/* Web keeps the spatial board, with one alternate layout for reading. */
.static-web .traffic,.static-web .topbar-left > .divider { display:none; }
.static-web .app.web .topbar { height:52px;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:20px;padding:0 18px; }
.static-web .app.web .topbar-center { display:flex;justify-content:center;min-width:0; }
.static-web .topbar-left,.static-web .topbar-right { gap:6px; }
.static-web .web-boards-button { display:flex;flex:none;align-items:center;justify-content:center;width:34px;height:34px;padding:0;border:0;border-radius:var(--r-control);background:transparent;color:var(--text-secondary);cursor:pointer; }
.static-web .web-boards-button:hover,.static-web .web-boards-button[aria-expanded=true] { background:var(--state-hover);color:var(--text-primary); }
.static-web .web-brand-mark { display:block;flex:none;width:24px;height:24px; }
.static-web .web-boards-button:focus-visible { outline:2px solid var(--accent-line);outline-offset:2px; }
.static-web .board-name { padding-left:6px; }
/* Canvas / Doc is the design system's one segmented control (styles.css .seg, .seg-text). */
#web-controls { flex:none; }
#web-controls button:focus-visible { outline:2px solid var(--accent-line); outline-offset:2px; }
.web-board-view-options { padding:6px 8px 10px;margin-bottom:6px;border-bottom:1px solid var(--border-subtle); }
.web-board-view-options[hidden] { display:none; }
.web-board-view-options > .pop-field-label { display:block;margin-bottom:8px; }
.web-board-view-options #web-controls button { flex:1; }
.static-web #btn-comments { position:relative; }
.static-web #btn-comments.has-unread::after { content:'';position:absolute;top:5px;right:5px;width:6px;height:6px;border-radius:50%;background:var(--accent);border:2px solid var(--surface-base); }
.static-web .topbar-right #btn-share { padding:0 12px; }
.static-web.web-reading .topbar-right #btn-search { display:none; }
.web-dialog { width:min(580px,calc(100vw - 40px));max-height:calc(100dvh - 48px);padding:0;color:var(--text-primary);background:var(--surface-top);border:1px solid var(--overlay-border);border-radius:var(--r-dialog);box-shadow:var(--shadow-modal); }
.web-dialog::backdrop { background:var(--scrim); }
.web-dialog > header { display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--border-subtle); }
.web-dialog h2 { margin:0;font-size:var(--fs-xl);font-weight:var(--fw-semibold);letter-spacing:-.2px; }
.web-close { display:grid;place-items:center;width:32px;height:32px;border:0;border-radius:var(--r-control);background:transparent;color:var(--text-secondary);cursor:pointer; }
.web-close:hover { background:var(--state-hover); }
.web-close svg { width:18px;height:18px; }
.web-dialog-body { padding:24px;overflow:auto; }
.web-subtitle { color:var(--text-secondary);font-size:var(--fs-sm); letter-spacing:var(--ls-12);line-height:1.6; }
.web-dialog-body > .web-subtitle:first-child { margin-top:0; }
.web-dialog-body h3 { margin:20px 0 8px;font-size:var(--fs-md); letter-spacing:var(--ls-13);font-weight:var(--fw-semibold);line-height:1.5; }
.web-dialog-body h3:first-child { margin-top:0; }
.web-dialog-body footer { display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;margin-top:20px; }
/* Navigation stays attached to its entry and leaves the board visible. Native
   popover supplies light dismissal and a top layer without a modal backdrop. */
#web-hub { position:fixed;inset:auto;margin:0;box-sizing:border-box;width:328px;max-width:calc(100vw - 16px);padding:6px;overflow:auto;overscroll-behavior:contain;border:1px solid var(--overlay-border);border-radius:var(--r-popover);background:var(--surface-overlay);color:var(--text-primary);box-shadow:var(--shadow-popover);font:var(--fs-md)/var(--lh-relaxed) var(--font-ui);letter-spacing:var(--ls-13);}
#web-hub::backdrop { background:transparent;backdrop-filter:none; }
.web-board-row { display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;min-height:44px;padding:8px 10px;border:0;border-radius:var(--r-control);background:transparent;color:var(--text-primary);font:inherit;text-align:left;cursor:pointer; }
.web-board-row:hover:not([aria-current]) { background:var(--state-hover); }
.web-board-row[aria-current] { background:var(--fill-subtle); }
.web-board-row:disabled { opacity:.5;cursor:wait; }
.web-board-row > span:first-child { display:flex;flex-direction:column;gap:2px;min-width:0; }
.web-board-row strong { display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--fs-md); letter-spacing:var(--ls-13);font-weight:var(--fw-medium); }
.web-board-row small { color:var(--text-secondary);font-size:var(--fs-xs); letter-spacing:var(--ls-11); }
.web-board-current { display:flex;flex:none;align-items:center;gap:4px;color:var(--text-secondary);font-size:var(--fs-2xs); letter-spacing:var(--ls-10); }
.web-board-current svg { width:13px;height:13px; }
.web-shared-boards { margin-top:6px;padding-top:6px;border-top:1px solid var(--border-subtle); }
.web-shared-boards h2 { margin:2px 10px 5px;color:var(--text-secondary);font-size:var(--fs-xs); letter-spacing:var(--ls-11);font-weight:var(--fw-medium); }
.web-board-status { margin:8px 10px 10px;color:var(--text-secondary);font-size:var(--fs-sm); letter-spacing:var(--ls-12);line-height:1.6; }
.web-board-retry { margin:0 10px 8px;padding:4px 0;border:0;background:transparent;color:var(--accent-text);font:inherit;font-size:var(--fs-sm); letter-spacing:var(--ls-12);cursor:pointer; }
.web-menu-back { display:flex;align-items:center;gap:6px;width:100%;min-height:36px;margin-bottom:6px;padding:6px 10px;border:0;border-bottom:1px solid var(--border-subtle);background:transparent;color:var(--text-secondary);font:inherit;font-size:var(--fs-sm);text-align:left;cursor:pointer; }
.web-menu-back svg { width:14px;height:14px; }
.web-menu-back:hover { color:var(--text-primary);background:var(--state-hover); }
.web-board-search { display:flex;align-items:center;gap:8px;margin:4px 4px 8px;padding:0 8px;border:1px solid var(--border-default);border-radius:var(--r-field);color:var(--text-secondary);background:var(--fill-subtle); }
.web-board-search[hidden] { display:none; }
.web-board-search svg { flex:none;width:14px;height:14px; }
.web-board-search input { box-sizing:border-box;width:100%;min-width:0;height:34px;padding:0;border:0;outline:none;background:transparent;color:var(--text-primary);font:inherit;font-size:var(--fs-sm); letter-spacing:var(--ls-12); }
.web-board-search:focus-within { border-color:var(--field-focus-border);box-shadow:var(--ring-focus); }
#web-hub button:focus-visible { outline:2px solid var(--accent-line);outline-offset:-2px; }
.web-sharing-options label { display:flex;flex-direction:column;gap:8px;margin-top:20px;font-size:var(--fs-sm); letter-spacing:var(--ls-12);color:var(--text-secondary); }
.web-sharing-options textarea,.web-sharing-options select,#web-note textarea { box-sizing:border-box;width:100%;border:1px solid var(--border-default);border-radius:var(--r-field);background:var(--fill-subtle);color:var(--text-primary);padding:10px 12px;font:inherit; }
.web-empty { padding:24px 0;color:var(--text-secondary);line-height:1.6;font-size:var(--fs-md); letter-spacing:var(--ls-13); }
/* Preview and optional setup belong to the snapshot section of Share. */
#share-dialog .share-item:has(.web-share-settings) { row-gap:4px; }
.web-share-settings { grid-column:2 / -1;min-width:0; }
.web-share-preview { display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:4px;color:var(--text-secondary);font-size:var(--fs-xs); letter-spacing:var(--ls-11); }
.web-share-preview svg { width:12px;height:12px; }
.web-share-preview button { display:inline-flex;align-items:center;gap:6px; }
.web-sharing-options { margin:6px 0 0; }
.web-sharing-options summary { display:flex;align-items:center;gap:6px;list-style:none;font-size:var(--fs-xs); letter-spacing:var(--ls-11);color:var(--text-secondary);cursor:pointer;padding:4px 0; }
.web-sharing-options summary::-webkit-details-marker { display:none; }
.web-sharing-options summary svg { width:12px;height:12px; }
.web-sharing-options[open] summary svg { transform:rotate(180deg); }
.web-sharing-options textarea { resize:vertical;min-height:64px; }
.web-sharing-options :is(textarea,select):focus-visible,#web-note textarea:focus-visible { outline:0; border-color:var(--field-focus-border); box-shadow:var(--ring-focus); }
.web-sharing-options label { margin-top:14px; }
.web-source-url { display:block;overflow-wrap:anywhere;line-height:1.6;font-size:var(--fs-sm); letter-spacing:var(--ls-12);color:var(--accent-text); }
.web-source-url svg { width:14px;height:14px;vertical-align:middle; }
.web-shot-scroll { max-height:50dvh;overflow:auto;overscroll-behavior:contain;border:1px solid var(--border-subtle);border-radius:4px;background:var(--surface-base); }
.web-detail-shot { display:block;width:100%;height:auto; }
.viewer-image-watermark { position:absolute;display:block;pointer-events:none;background-repeat:repeat;z-index:1; }
.viewer-protected-image { user-select:none;-webkit-user-select:none;-webkit-user-drag:none;-webkit-touch-callout:none; }
.viewer-images-pending :is(.viewer-protected-image,.viewer-image-watermark) { visibility:hidden; }
.web-shot-scroll.actual-size .web-detail-shot { width:auto;max-width:none; }
.web-shot-scroll:focus-visible { outline:2px solid var(--accent-line);outline-offset:2px; }
.web-upload-status { color:var(--text-secondary);font-size:var(--fs-sm); letter-spacing:var(--ls-12); }
.web-upload-status:empty { display:none; }
#web-preview { width:min(1100px,calc(100vw - 40px)); }
#web-preview .web-dialog-body { padding:12px; }
#web-preview .web-subtitle { margin:2px 8px 12px; }
#web-preview iframe { display:block;width:100%;height:72dvh;border:1px solid var(--border-subtle);border-radius:var(--r-control);background:var(--surface-base); }
/* Source links remain useful even before a screenshot has been saved. */
.web-link-host { text-transform:uppercase;letter-spacing:.06em;font-size:var(--fs-xs); }
.web-still-empty strong { font-size:20px;line-height:1.3;color:var(--text-primary);font-weight:600; }
.web-still-empty p { font-size:14px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;margin:0; }
.web-link-url { font-size:var(--fs-sm); letter-spacing:var(--ls-12);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.web-link-status { display:flex;align-items:center;gap:8px;margin-top:12px;font-size:var(--fs-sm); letter-spacing:var(--ls-12); }
.web-link-status svg { width:16px;height:16px; }
/* Reader: title, context, content. Actions stay next to the thing they act on. */
#web-reader { display:none;position:absolute;inset:52px 0 0;z-index:31;overflow:auto;overscroll-behavior:contain;scroll-padding-bottom:calc(100px + env(safe-area-inset-bottom));background:var(--surface-base);color:var(--text-primary); }
.web-reading #web-reader { display:block; }
#web-reader:has(.is-read-editing),#web-reader.read-editor-transition { overflow-anchor:none; }
.web-read-skip { position:fixed;top:60px;left:12px;z-index:45;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap; }
.web-read-skip:focus { width:auto;height:auto;padding:10px 14px;clip-path:none;border-radius:var(--r-control);background:var(--surface-overlay);color:var(--text-primary);box-shadow:var(--shadow-md);outline:2px solid var(--accent-line);outline-offset:2px; }
.web-reading .viewport { visibility:hidden; }
.static-web.web-reading .outline,.static-web.web-reading .bottombar,.web-reading #card-toolbar,.web-reading #link-toolbar { display:none !important; }
/* Broadser for Mac: Doc takes the canvas's place under the same bars. The sidebar is the
   Outline in both views (its row for what is being read is marked); the bottom bar keeps
   the sidebar, Comments, Side Peek and Ask AI while the canvas's own tools step out. */
html:not(.static-web) #web-reader { inset:0;z-index:calc(var(--z-canvas-ui) + 1); }
html:not(.static-web) :is(.web-read-outline,.web-read-navigation [data-read-contents]) { display:none !important; }
html:not(.static-web) .has-read-outline .web-reader-layout { grid-template-columns:minmax(0,808px);gap:0;padding:0; }
html:not(.static-web).web-reading :is(#zoom-pct,#btn-minimap,.bl .vsep,.minimap,.tool-dock > :not(#btn-comments)) { display:none !important; }
.ol-item.is-reading { background-color:var(--state-selected); }
.ol-item.is-reading .ol-title { font-weight:var(--fw-medium); }
.web-reader-head,.web-reading-content { box-sizing:border-box;width:100%;max-width:808px;margin:0 auto;padding-left:36px;padding-right:36px; }
.web-reader-head { padding-top:28px;padding-bottom:0; }
.web-reader-title-row { display:flex;align-items:center;justify-content:space-between;gap:24px; }
.web-reader-title-row > div { min-width:0; }
.web-reader-access { flex:none;max-width:40%;color:var(--text-secondary);font-size:var(--fs-sm);letter-spacing:var(--ls-12);line-height:1.5;overflow-wrap:anywhere; }
.web-reader-meta { margin:0 0 6px;font-size:var(--fs-xs); letter-spacing:var(--ls-11);line-height:1.5;color:var(--text-secondary); }
.web-reader-head h1 { margin:0;font-size:30px;line-height:1.25;letter-spacing:-.8px;font-weight:600;overflow-wrap:anywhere; }
.web-reading-intro { margin:18px 0 0;font-size:15px;line-height:1.7;color:var(--text-secondary);white-space:pre-wrap; }
.web-reader-tools { display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:28px;padding-bottom:24px;border-bottom:1px solid var(--border-subtle); }
.web-read-search { display:flex;align-items:center;width:280px;max-width:80%;min-width:0;border:1px solid var(--border-default);border-radius:var(--r-field);color:var(--text-secondary);background:var(--fill-subtle); }
.web-reader-tools label { display:flex;align-items:center;gap:8px;flex:1;min-width:0;padding:0 10px; }
.web-read-search:has(input:focus) { border-color:var(--field-focus-border);box-shadow:var(--ring-focus); }
.web-read-search button { display:grid;place-items:center;flex:none;width:28px;height:28px;margin:0 3px 0 0;padding:0;border:0;border-radius:calc(var(--r-field) - 3px);background:transparent;color:var(--text-secondary);cursor:pointer; }
.web-read-search button:hover { color:var(--text-primary);background:var(--state-hover); }
.web-read-search button svg { width:14px;height:14px; }
.web-reader-tools input::-webkit-search-cancel-button { -webkit-appearance:none; }
.web-reader-tools label svg { width:14px;height:14px;flex:none; }
.web-reader-tools input { width:100%;min-width:0;height:34px;padding:0;border:0;outline:none;background:transparent;color:var(--text-primary);font:inherit;font-size:var(--fs-sm); letter-spacing:var(--ls-12); }
.web-reading-count { font-size:var(--fs-xs); letter-spacing:var(--ls-11);color:var(--text-secondary);white-space:nowrap; }
.web-reading-content { padding-bottom:calc(110px + env(safe-area-inset-bottom)); }
/* Contents is quiet, local navigation. On narrow screens it uses the same
   native popover and overlay tokens as the rest of the workspace. */
.web-reader-layout { display:grid;grid-template-columns:minmax(0,808px);justify-content:center;box-sizing:border-box;max-width:1176px;margin:0 auto; }
.has-read-outline .web-reader-layout { grid-template-columns:272px minmax(0,808px);gap:28px;padding:0 28px; }
.web-read-main { min-width:0; }
.web-read-outline { display:none;position:sticky;top:20px;align-self:start;min-width:0;max-height:calc(100dvh - 96px);overflow:auto;overscroll-behavior:contain;padding:0 0 16px;color:var(--text-secondary); }
.has-read-outline .web-read-outline { display:block; }
.web-read-outline-head { display:flex;align-items:center;gap:12px;position:sticky;top:0;z-index:1;padding:8px 10px 14px;background:var(--surface-base);font-size:12px;letter-spacing:0; }
.web-read-outline-head strong { flex:1;font-weight:var(--fw-semibold);color:var(--text-primary); }
.web-read-outline-head button { padding:4px 6px;border:0;border-radius:var(--r-control);background:transparent;color:var(--text-secondary);font:inherit;cursor:pointer; }
.web-read-outline-head [data-read-close] { display:none; }
.web-read-toc ul { list-style:none;margin:0;padding:0; }
.web-read-toc > ul > .web-read-chapter + li,.web-read-toc > ul > li + .web-read-chapter { margin-top:14px; }
.web-read-toc-row { display:flex;align-items:flex-start;min-width:0;padding-inline-start:calc(var(--read-depth,0) * 9px); }
.web-read-toc-row > button,.web-read-toc-spacer { display:grid;place-items:center;flex:none;width:22px;height:34px;padding:0;border:0;border-radius:var(--r-control);background:transparent;color:var(--text-tertiary); }
.web-read-toc-row > button { cursor:pointer; }
.web-read-toc-row svg { width:13px;height:13px;transition:transform 120ms; }
.web-read-toc-row [aria-expanded=true] svg { transform:rotate(90deg); }
.web-read-toc a { display:block;min-width:0;flex:1;padding:7px 10px;border-radius:var(--r-control);color:var(--text-secondary);text-decoration:none;white-space:normal;overflow-wrap:anywhere;font-size:13px;font-weight:400;letter-spacing:0;line-height:1.55; }
.web-read-toc-row[data-read-kind=section] > a { color:var(--text-primary);font-weight:600; }
.web-read-toc-row[data-read-kind=heading] > a { color:var(--text-tertiary);font-size:12px; }
.web-read-toc a:hover:not([aria-current]),.web-read-toc-row button:hover,.web-read-outline-head button:hover { color:var(--text-primary);background:var(--state-hover); }
.web-read-toc a[aria-current] { color:var(--text-primary);background:var(--fill-subtle);font-weight:500; }
.web-read-toc-row[data-read-kind=section] > a[aria-current] { font-weight:600; }
.web-read-empty { padding:8px;font-size:var(--fs-sm); letter-spacing:var(--ls-12); }
.web-read-navigation { display:flex;align-items:center;gap:12px;position:sticky;top:0;z-index:2;min-height:44px;box-sizing:border-box;padding:4px 36px;background:var(--surface-base); }
.web-read-navigation button { display:flex;align-items:center;justify-content:center;gap:6px;flex:none;min-width:32px;height:32px;padding:0 6px;border:0;border-radius:var(--r-control);color:var(--text-secondary);background:transparent;font:inherit;font-size:var(--fs-sm); letter-spacing:var(--ls-12);cursor:pointer; }
.web-read-navigation button:hover:not(:disabled,[aria-expanded=true]) { color:var(--text-primary);background:var(--state-hover); }
.web-read-navigation [data-read-contents][aria-expanded=true] { color:var(--text-primary);background:var(--fill-subtle); }
.web-read-navigation button:disabled { opacity:.35;cursor:default; }
.web-read-navigation svg { width:16px;height:16px; }
.web-read-navigation [data-read-contents] { display:none; }
.web-read-location { flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-secondary);font-size:12px;letter-spacing:0; }
.web-read-step { display:flex;gap:2px; }
.web-read-crumbs { display:flex;align-items:center;gap:6px;min-width:0;margin:0 0 12px;color:var(--text-secondary);font-size:12px;letter-spacing:0; }
.web-read-crumbs button,.web-read-crumbs [aria-current] { min-width:0;max-width:50%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.web-read-crumbs [aria-current]:first-child { max-width:100%; }
.web-read-crumbs button { padding:2px 0;border:0;background:transparent;color:inherit;font:inherit;cursor:pointer; }
.web-read-crumbs button:hover { color:var(--text-primary);text-decoration:underline; }
.web-read-crumbs > span[aria-hidden] { display:flex;flex:none; }
.web-read-crumbs svg { width:12px;height:12px; }
.web-read-outline :is(a,button):focus-visible,.web-read-navigation button:focus-visible,.web-read-crumbs button:focus-visible { outline:2px solid var(--accent-line);outline-offset:-2px; }
.web-reading-item,.web-reading-group,[data-reading-heading] { scroll-margin-top:72px; }
.web-reading-item:focus-visible { outline:none; }
.web-reading-item:focus-visible > header :is(h2,h3,h4,h5,h6),.web-reading-group:focus-visible,[data-reading-heading]:focus-visible { outline:2px solid var(--accent-line);outline-offset:4px; }
@media (max-width:1100px) {
  .has-read-outline .web-reader-layout { display:block;padding:0;max-width:808px; }
  .web-read-navigation [data-read-contents] { display:flex; }
  .web-read-outline[popover] { display:none;position:fixed;inset:112px auto auto max(12px,calc((100vw - 736px) / 2));margin:0;width:min(340px,calc(100vw - 24px));max-height:calc(100dvh - 160px);box-sizing:border-box;padding:0 8px 12px;border:1px solid var(--overlay-border);border-radius:var(--r-popover);background:var(--surface-overlay);box-shadow:var(--shadow-popover); }
  .web-read-outline[popover]:popover-open { display:block; }
  .web-read-outline-head { padding-top:12px;background:var(--surface-overlay); }
  .web-read-outline-head [data-read-close] { display:grid;place-items:center;flex:none;width:44px;padding:0;border-radius:var(--r-control); }
  .web-read-outline-head [data-read-close] svg { width:16px;height:16px; }
  .web-read-outline::backdrop { background:transparent;backdrop-filter:none; }
  .web-read-toc a,.web-read-toc-row > button,.web-read-outline-head button { min-height:44px;box-sizing:border-box; }
  .web-read-toc-row > button,.web-read-toc-spacer { width:44px; }
}
/* Keep reading actions close to the reader and above the device's safe area.
   The comment button moves here from the canvas dock; it is never duplicated. */
#web-reading-tools { position:absolute;z-index:40;right:calc(16px + env(safe-area-inset-right));bottom:calc(16px + env(safe-area-inset-bottom));display:flex;align-items:center;gap:4px;padding:6px;border:1px solid var(--overlay-border);border-radius:var(--r-panel);background:var(--surface-overlay);box-shadow:var(--shadow-panel); }
#web-reading-tools .icon-btn { display:grid;place-items:center;flex:none;width:44px;height:44px;color:var(--text-secondary);border-radius:calc(var(--r-panel) - 6px); }
#web-reading-tools .icon-btn:hover:not([aria-expanded=true]) { background:var(--state-hover);color:var(--text-primary); }
#web-reading-tools .icon-btn[aria-expanded=true] { background:var(--state-selected);color:var(--accent-text); }
#web-reading-tools .icon-btn:focus-visible { outline:2px solid var(--accent-line);outline-offset:-2px; }
#web-reading-tools svg { width:20px;height:20px; }
.web-reading .web-snapshot #present-exit { display:none; }
.web-snapshot #present-exit #btn-comments { flex:none; }
.web-reading-group { margin:32px 0 0;padding:8px 0;font-size:23px;font-weight:600;letter-spacing:-.5px; }
h3.web-reading-group { font-size:20px; }
:is(h4,h5,h6).web-reading-group { font-size:18px; }
.web-reading-item { padding:32px 0;border-bottom:1px solid var(--border-subtle); }
.web-reading-item header > span { font-size:var(--fs-2xs);font-weight:var(--fw-medium);color:var(--text-secondary);letter-spacing:.08em;text-transform:uppercase; }
.web-reading-item header :is(h2,h3,h4,h5,h6) { margin:8px 0 18px;font-size:21px;font-weight:600;line-height:1.4;letter-spacing:-.4px;overflow-wrap:anywhere; }
.web-reading-shot { display:block;width:100%;height:auto;border:1px solid var(--border-subtle);border-radius:4px;box-sizing:border-box; }
.web-reading-shot[role=button] { cursor:zoom-in; }
.web-reading-shot[role=button]:focus-visible { outline:2px solid var(--accent-line);outline-offset:4px; }
.web-reading-profile-preview { max-height:min(420px,52vh);overflow:hidden;border:1px solid var(--border-subtle);border-radius:4px; }
.web-reading-profile-preview .web-reading-shot { border:0;border-radius:0; }
.web-reading-profile.is-expanded .web-reading-profile-preview { max-height:none; }
.web-read-shot-toggle { display:block;margin:0 0 10px auto;min-height:40px; }
.web-shot-caption { display:flex;align-items:center;gap:5px;margin-top:10px;padding:2px 0;border:0;background:transparent;color:var(--text-secondary);font:inherit;font-size:var(--fs-xs); letter-spacing:var(--ls-11);cursor:pointer; }
.web-shot-caption:hover { color:var(--text-primary); }
.web-shot-caption svg { width:12px;height:12px; }
.web-reading-text,.web-reading-item blockquote { font-size:15px;line-height:1.8;overflow-wrap:anywhere; }
.web-reading-text :is(h1,h2,h3,h4,h5,h6) { margin:24px 0 12px;font-size:18px;line-height:1.5;letter-spacing:-.2px; }
.web-reading-text :is(h4,h5,h6) { font-size:16px; }
.web-reading-item blockquote { margin:0;padding-left:20px;border-left:2px solid var(--accent); }
.web-reading-item footer { display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px; }
.web-reading-item footer > div { display:flex;align-items:center;gap:14px; }
.web-inline-action { display:inline-flex;align-items:center;gap:5px;padding:6px 0;background:none;border:0;color:var(--text-secondary);font:inherit;font-size:var(--fs-sm); letter-spacing:var(--ls-12);cursor:pointer;white-space:nowrap; }
.web-inline-action svg { width:14px;height:14px; }
.web-inline-action:hover { color:var(--text-primary); }
.web-open-source { display:inline-flex;align-items:center;gap:5px;color:var(--accent-text);font-size:var(--fs-sm); letter-spacing:var(--ls-12);text-decoration:none; }
.web-open-source:hover { text-decoration:underline; }
.web-open-source svg { width:13px;height:13px; }
.web-reading-link { padding:14px 0;color:var(--text-secondary);font-size:var(--fs-md); letter-spacing:var(--ls-13);line-height:1.7; }
.web-reading-link p { margin:0 0 10px; }
.web-reading-link > span { display:block;font-size:var(--fs-xs); letter-spacing:var(--ls-11); }
.web-connections { color:var(--text-secondary);font-size:var(--fs-xs); letter-spacing:var(--ls-11);line-height:1.7;margin:18px 0 0; }
.web-connections button { padding:0;background:none;border:0;color:var(--text-secondary);font:inherit;cursor:pointer;text-decoration:underline;text-underline-offset:3px; }
.web-connections button:hover { color:var(--accent-text); }
.web-reading-table { overflow:auto; }
.web-reading-table table { border-collapse:collapse;width:100%;font-size:var(--fs-md); letter-spacing:var(--ls-13); }
.web-reading-table th,.web-reading-table td { text-align:left;padding:12px;border-bottom:1px solid var(--border-subtle); }
.static-web[data-web-access=view] .tool-dock,.static-web[data-web-access=view] .rz,.static-web[data-web-access=view] .anchors,.static-web[data-web-access=view] .card-toolbar,.static-web[data-web-access=view] .link-toolbar { display:none !important; }
.static-web[data-web-access=view] #board-name { pointer-events:none; }
/* A published page gets a normal header, independent of the editor's presentation bar. */
#web-snapshot-header { position:absolute;inset:0 0 auto;height:56px;z-index:40;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:24px;padding:0 24px;border-bottom:1px solid var(--border-subtle);background:var(--surface-base); }
.web-snapshot .main { padding-top:56px; }
.web-snapshot #web-reader { top:56px; }
.web-snapshot-title { min-width:0;grid-column:1;grid-row:1; }
.web-snapshot-title strong,.web-snapshot-title span { display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.web-snapshot-title strong { font-size:var(--fs-sm); letter-spacing:var(--ls-12);font-weight:var(--fw-semibold); }
.web-snapshot-title span { margin-top:3px;font-size:var(--fs-xs); letter-spacing:var(--ls-11);color:var(--text-secondary); }
#web-snapshot-header #web-controls { grid-column:2;grid-row:1; }
.web-snapshot-actions { grid-column:3;grid-row:1;display:flex;align-items:center;justify-content:flex-end;gap:12px; }
.web-made { font-size:var(--fs-xs); letter-spacing:var(--ls-11);color:var(--text-secondary);text-decoration:none; }
.web-made:hover { color:var(--text-primary); }
.static-web .web-snapshot #present-exit { top:auto;right:auto;bottom:16px;left:50%;transform:translateX(-50%);max-width:calc(100% - 32px);padding:5px 8px;flex-wrap:nowrap; }
.static-web .web-snapshot #present-where { flex:initial;font-size:var(--fs-xs); letter-spacing:var(--ls-11);max-width:250px; }
.web-snapshot #present-exit .view-author,.web-snapshot #present-exit .view-made,.web-snapshot #present-exit .view-comments-button { display:none !important; }
.web-reading .web-snapshot #present-exit { display:none; }
.web-snapshot-message { position:absolute;left:20px;top:76px;max-width:400px;z-index:4;padding:10px 14px;background:var(--surface-overlay);color:var(--text-secondary);border:1px solid var(--border-subtle);border-radius:var(--r-control);font-size:var(--fs-sm); letter-spacing:var(--ls-12);line-height:1.6; }
.web-reading .web-snapshot-message { display:none; }
.web-reading #engagement-panel.is-comments { top:64px !important;right:12px !important;bottom:calc(88px + env(safe-area-inset-bottom));left:auto !important;height:auto;max-height:calc(100% - 152px - env(safe-area-inset-bottom)); }
.web-reading .engagement-foot.comment-foot { display:none; }
.static-web :is(.web-dialog,#web-controls,#web-reader) button:focus-visible { outline:2px solid var(--accent-line);outline-offset:3px; }
#web-note textarea { resize:vertical; }
@media (max-width:900px) {
  .static-web .app.web .topbar { gap:10px;padding:0 12px; }
  .static-web .save-state { display:none; }
}
@media (max-width:720px) {
  .static-web .app.web .topbar { height:56px;grid-template-columns:minmax(0,1fr) auto;gap:8px;padding:0 10px; }
  .static-web .app.web .topbar-center { display:none; }
  .static-web .topbar-left { max-width:none;min-width:0;gap:2px; }
  .static-web .board-name { padding:0 2px;min-width:0; }
  .static-web .board-name #board-name-text { max-width:100%;font-size:var(--fs-sm); letter-spacing:var(--ls-12); }
  .static-web .board-name .chev,.static-web #btn-search,.static-web .topbar-right .divider { display:none; }
  .static-web .topbar-right #btn-more { display:grid;width:44px;min-height:44px; }
  .static-web .topbar-right { gap:0; }
  .static-web .topbar-right #btn-share { min-height:44px;padding:0 6px;font-size:var(--fs-sm); letter-spacing:var(--ls-12); }
  .static-web .topbar .web-boards-button { width:44px;min-height:44px;padding:0 4px; }
  #web-controls { padding:2px; }
  #web-controls button { min-width:50px;height:40px;padding:0 8px; }
  #web-reader { top:56px; }
  .web-reader-head,.web-reading-content { padding-left:22px;padding-right:22px; }
  .web-reader-head { padding-top:28px; }
  .web-reader-title-row { align-items:flex-start;gap:12px; }
  .web-reader-head h1 { font-size:25px;letter-spacing:-.6px; }
  .web-reader-meta { font-size:var(--fs-2xs); letter-spacing:var(--ls-10);line-height:1.6; }
  .web-reading-intro { margin-top:14px;font-size:14px; }
  .web-reader-tools { margin-top:22px;padding-bottom:22px; }
  .web-reader-tools input { height:44px; }
  .web-read-search button { width:44px;height:44px;margin-right:1px; }
  .web-reading-item { padding:26px 0; }
  .web-reading-item header :is(h2,h3,h4,h5,h6) { font-size:19px;margin-bottom:14px; }
  .web-read-navigation { padding:2px 16px;gap:8px; }
  .web-read-navigation button { min-width:44px;height:44px; }
  .web-read-crumbs { margin-bottom:16px; }
  .web-reading-item footer { flex-wrap:wrap;gap:4px 12px;margin-top:10px; }
  .web-reading-item footer > div { gap:12px; }
  .web-reading-item footer a,.web-inline-action,.web-shot-caption { min-height:44px; }
  .web-shot-caption { margin-top:0; }
  .web-reading-item footer { margin-top:0; }
  .web-connections { margin-top:8px; }
  .web-dialog { width:calc(100vw - 24px);max-height:calc(100dvh - 24px); }
  .web-dialog > header { padding:10px 16px; }
  .web-close { width:44px;height:44px; }
  .web-dialog-body { padding:20px; }
  #web-hub { width:328px; }
  .web-board-row { min-height:48px; }
  .web-board-search input { height:42px;font-size:var(--fs-xl); letter-spacing:var(--ls-16); }
  .web-dialog-body footer button { min-height:44px; }
  #web-preview { width:calc(100vw - 20px); }
  #web-snapshot-header { grid-template-columns:minmax(0,1fr) auto auto;gap:10px;padding:0 14px; }
  .web-snapshot-actions { gap:0; }
  .web-made { display:none; }
  .web-snapshot-title strong { font-size:var(--fs-xs); letter-spacing:var(--ls-11); }
  .web-snapshot #present-where { max-width:180px; }
  .web-snapshot-message { left:12px;right:12px; }
  .web-reading #engagement-panel.is-comments { top:64px !important;right:8px !important;left:8px !important;width:auto !important;bottom:calc(88px + env(safe-area-inset-bottom)); }
  .web-share-settings { grid-column:1 / -1; }
}
@media (prefers-reduced-motion:no-preference) {
  .web-dialog[open] { animation:web-dialog-in var(--dur-base) var(--ease-out); }
  #web-hub:popover-open { animation:web-dialog-in var(--dur-base) var(--ease-out); }
  @keyframes web-dialog-in { from { opacity:0;translate:0 var(--motion-offset); } to { opacity:1;translate:none; } }
}
@media (pointer:coarse) {
  #web-controls button { min-height:var(--ctl-xl); }
  .web-reader-tools input,.web-dialog :is(input:not([type=checkbox],[type=radio]),textarea,select),#web-note textarea { font-size:var(--fs-xl);letter-spacing:var(--ls-16); }
}

/* Reading edits share the original note; the composer stays local until Save. */
.web-reading-item.is-read-editing { scroll-margin-top:80px; }
.web-reading-item footer[hidden] { display:none; }
/* The edit entry is rendered exactly when the item is [data-read-editable]. Asked with
   header:has(.web-read-edit-entry) > span|input|h2…, Chrome restyled every span, input and
   heading on the board on any change under it: half of a canvas click's restyle. */
.web-reading-item[data-read-editable] > header { display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center; }
.web-reading-item[data-read-editable] > header > span { grid-column:1 / -1; }
.web-reading-item[data-read-editable] > header > :is(h2,h3,h4,h5,h6,input) { grid-column:1;grid-row:2; }
.web-reading-item.is-read-editing[data-read-editable] > header > input { grid-column:1 / -1; }
.web-read-edit-entry { grid-column:2;grid-row:2;justify-self:end;display:inline-flex;align-items:center;gap:6px;margin-left:12px;margin-top:-10px;min-height:32px;padding:0 8px;border-radius:var(--r-control); }
.web-read-edit-entry svg,.web-read-save-feedback svg { width:14px;height:14px; }
[data-read-editable]:not(.is-read-editing) :is(header > h2,header > h3,header > h4,header > h5,header > h6,.web-reading-text) { cursor:text; }
[data-read-editable]:hover .web-read-edit-entry,[data-read-editable]:focus-within .web-read-edit-entry { background:var(--state-hover);color:var(--text-primary); }
[data-read-editable]:not(.is-read-editing) .web-reading-text:empty { min-height:44px; }
[data-read-editable]:not(.is-read-editing) .web-reading-text:empty:before { content:'Empty note';color:var(--text-tertiary); }
.web-reading-item header { position:relative; }
.web-reading-item header > .web-read-save-feedback { position:absolute;right:0;top:-18px;display:flex;align-items:center;gap:4px;font-size:var(--fs-xs);letter-spacing:normal;text-transform:none;color:var(--accent-text); }
.is-read-editing .web-read-edit-entry { display:none; }
.web-read-edit-title { display:block;box-sizing:border-box;width:100%;margin:8px 0 18px;padding:0;font:inherit;font-size:21px;line-height:1.4;font-weight:600;letter-spacing:-.4px;color:var(--text-primary);background:transparent;border:0;border-bottom:1px solid var(--border-subtle);border-radius:0; }
.web-read-edit-title:focus { outline:none;border-bottom-color:var(--field-focus-border); }
.is-read-editing .web-reading-text { min-height:160px;padding:0 0 24px;border:0;border-bottom:1px solid var(--border-subtle);outline:none;cursor:text;caret-color:var(--accent); }
.is-read-editing .web-reading-text:empty:before { content:'Start writing…';color:var(--text-tertiary);pointer-events:none; }
.is-read-editing .web-reading-text:focus { border-bottom-color:var(--field-focus-border); }
.is-read-editing :is(.web-reading-text,.web-read-edit-title) { scroll-margin-top:170px; }
.web-read-edit-bar { position:sticky;top:8px;z-index:3;display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:8px 10px;margin:0 -10px 18px;border:1px solid var(--overlay-border);border-radius:var(--r-panel);background:var(--surface-overlay);box-shadow:var(--shadow-sm); }
.has-read-outline .web-read-edit-bar { top:52px; }
.web-read-formats { display:flex;align-items:center;gap:4px;order:-1; }
.web-read-formats :is(button,select) { display:grid;place-items:center;min-width:36px;height:36px;box-sizing:border-box;padding:6px;border:0;border-radius:var(--r-control);background:transparent;color:var(--text-secondary);font:inherit;font-size:var(--fs-sm);cursor:pointer; }
.web-read-formats select { width:112px;border:0;border-right:1px solid var(--border-subtle);border-radius:0;background:transparent; }
.web-read-formats button:hover:not(:disabled) { background:var(--state-hover);color:var(--text-primary); }
.web-read-formats button[aria-pressed=true] { background:var(--state-selected);color:var(--accent-text); }
.web-read-formats :is(button,select):focus-visible,.web-read-edit-entry:focus-visible { outline:2px solid var(--accent-line);outline-offset:2px; }
.web-read-formats :disabled { opacity:.45;cursor:default; }
.web-read-edit-bar svg { width:16px;height:16px; }
.web-read-edit-actions { display:flex;align-items:center;gap:8px;flex:1;min-width:min(100%,320px); }
.web-read-edit-actions [role=status] { flex:1;min-width:0;font-size:var(--fs-xs);line-height:1.5;color:var(--text-secondary); }
.web-read-edit-actions [role=status]:before { content:'';display:inline-block;width:6px;height:6px;margin-right:6px;border-radius:50%;background:var(--text-tertiary);vertical-align:middle; }
[data-read-edit-state=pending] [role=status]:before { background:var(--text-tertiary); }
[data-read-edit-state=draft] [role=status]:before { background:var(--accent); }
[data-read-edit-state=error] [role=status] { color:var(--danger-text); }
[data-read-edit-state=error] [role=status]:before { background:currentColor; }
[data-read-edit-state=saving] [data-read-save]:before { content:'';width:12px;height:12px;display:inline-block;margin-right:6px;border:1.5px solid currentColor;border-right-color:transparent;border-radius:50%;vertical-align:middle; }
.web-read-edit-actions .text-btn { flex:none; }
.web-read-edit-actions [data-read-save] { width:112px; }
.is-read-editing header > span { color:var(--accent-text); }
.is-read-editing header > span:after { content:" · Editing"; }
.web-read-edit-actions [data-read-cancel] { background:transparent;color:var(--text-secondary);border:1px solid var(--border-subtle); }
.web-read-edit-actions [data-read-cancel]:hover:not(:disabled) { background:var(--surface-base);color:var(--text-primary); }
@media (prefers-reduced-motion:no-preference) {
  .web-read-edit-actions [data-read-save] { transition:background-color var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out); }
  .web-read-edit-actions [role=status]:before { transition:background-color var(--dur-fast) var(--ease-out); }
  .web-read-edit-entry,.web-read-formats button,.web-read-edit-title,.is-read-editing .web-reading-text { transition:background-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out); }
  .web-read-edit-bar,.web-read-save-feedback,.web-selection-comment:not([hidden]) { animation:web-edit-reveal var(--dur-base) var(--ease-out); }
  [data-read-edit-state=saving] [data-read-save]:before { animation:web-edit-saving var(--dur-pulse) linear infinite; }
  .is-read-saved { animation:web-edit-saved var(--dur-feedback) var(--ease-out); }
  @keyframes web-edit-reveal { from { opacity:0;translate:0 4px; } to { opacity:1;translate:0 0; } }
  @keyframes web-edit-saving { to { transform:rotate(360deg); } }
  @keyframes web-edit-saved { from { border-bottom-color:var(--accent); } to { border-bottom-color:var(--border-subtle); } }
}
.web-selection-comment { position:fixed;z-index:var(--z-popover);padding:10px 14px;min-height:40px;border:1px solid var(--overlay-border);border-radius:var(--r-control);background:var(--surface-overlay);color:var(--text-primary);box-shadow:var(--shadow-panel);font:inherit;font-size:var(--fs-sm);cursor:pointer; }
.web-selection-comment[hidden] { display:none; }
.web-reading:has(#engagement-panel.is-comments:not([hidden])) #web-reader { right:372px; }
.web-reading:has(#engagement-panel.is-comments:not([hidden])) .web-reader-layout { display:block;padding:0; }
.web-reading:has(#engagement-panel.is-comments:not([hidden])) .web-read-outline { display:none; }
.web-reading:has(#engagement-panel.is-comments:not([hidden])) .web-read-outline:popover-open { display:flex;position:fixed;top:112px;left:12px;bottom:96px;width:280px;margin:0;z-index:var(--z-popover); }
.web-reading:has(#engagement-panel.is-comments:not([hidden])) [data-read-contents] { display:inline-flex; }
.web-reading #engagement-panel.is-comments { width:348px !important; }
@media (max-width:720px) {
  .web-read-edit-title { font-size:19px; }
  .has-read-outline .web-read-edit-bar { top:48px; }
  .web-read-formats :is(button,select),.web-read-edit-entry { min-width:44px;min-height:44px; }
  .web-reading-item footer > div { flex-wrap:wrap;gap:4px 14px; }
  .web-reading:has(#engagement-panel.is-comments:not([hidden])) #web-reader { right:0;bottom:calc(48% + 12px); }
  .web-reading #engagement-panel.is-comments { top:auto !important;bottom:calc(8px + env(safe-area-inset-bottom));height:48%;max-height:48%;width:auto !important; }
  .web-reading:has(#engagement-panel.is-comments:not([hidden])) #web-reading-tools { display:none; }
  .web-read-edit-actions { flex-wrap:nowrap; }
  [data-read-edit-state=error] .web-read-edit-actions { flex-wrap:wrap;justify-content:flex-end; }
  [data-read-edit-state=error] .web-read-edit-actions [role=status] { flex-basis:100%; }
}
.web-reading-material,.web-reading-image { position:relative;min-height:40px; }
.web-reading-image .web-reading-shot { display:block; }
.web-reading-marks { position:absolute;inset:0;pointer-events:none; }
.web-read-comment-pin { position:absolute;display:grid;place-items:center;width:32px;height:32px;border:2px solid var(--surface-overlay);border-radius:50%;background:var(--accent);color:var(--text-on-accent,#fff);box-shadow:var(--shadow-panel);pointer-events:auto;cursor:pointer;transform:translate(-50%,-10%); }
.web-read-comment-pin svg { width:16px;height:16px; }
.web-read-comment-pin.is-current,.web-read-comment-pin:focus-visible { outline:3px solid var(--accent-line);outline-offset:3px; }
.web-read-mark-region,.web-read-mark-preview { position:absolute;border:2px solid var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent);box-sizing:border-box;pointer-events:none; }
.web-reading-mark-surface.is-marking { cursor:crosshair;user-select:none;touch-action:none;outline:2px dashed var(--accent);outline-offset:5px; }
.web-reading-mark-surface.is-marking * { cursor:crosshair;pointer-events:none; }
.web-read-mark-help { display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 0 12px;font-size:var(--fs-sm);color:var(--text-secondary); }
.web-read-mark-help button { font:inherit;min-height:40px;padding:4px 8px;color:var(--text-primary);background:transparent;border:1px solid var(--border-default);border-radius:var(--r-control);cursor:pointer; }
@media (max-width:720px) {
  .web-read-edit-actions .text-btn,.web-selection-comment { min-height:44px; }
  .web-read-comment-pin { width:40px;height:40px; }
}
/* Share ▸ Opens in (app.js renderShare): the view every link in the dialog opens. */
.share-view { display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 0 12px;margin-bottom:4px;border-bottom:1px solid var(--border-subtle);color:var(--text-secondary);font-size:var(--fs-sm);letter-spacing:var(--ls-12); }
/* Switching views (web-workspace.js morphViews): the Doc sections on screen open out of their
   cards (or close back onto them) while Doc's surface comes in or goes. The canvas stays shown
   under Doc meanwhile, and Doc over the canvas as it leaves, taking no clicks. */
html.doc-entering .viewport { visibility:visible; }
html.doc-leaving #web-reader { display:block;pointer-events:none; }
/* A mind map in Doc: one list under its main topic (web-workspace.js mapTopics). */
.web-reading-map ul { margin:4px 0;padding-inline-start:22px; }
.web-reading-map > ul { padding-inline-start:18px; }
.web-reading-map li { margin:2px 0; }
/* A nested board in Doc opens in place (web-workspace.js nestedBody), read-only. */
.web-reading-nested > summary { cursor:pointer;color:var(--text-secondary);font-size:var(--fs-sm);letter-spacing:var(--ls-12);padding:4px 0;width:max-content; }
.web-reading-nested > summary:hover { color:var(--text-primary); }
.web-reading-nested > summary:focus-visible { outline:2px solid var(--accent-line);outline-offset:3px;border-radius:var(--r-control); }
.web-nested-cards { margin:12px 0 0;padding:4px 0 4px 18px;border-left:2px solid var(--border-subtle); }
.web-nested-item { margin:0 0 18px; }
.web-nested-title { margin:0 0 6px;font-weight:600;font-size:15px; }
.web-nested-frame { margin:18px 0 10px;color:var(--text-secondary);font-size:var(--fs-xs);letter-spacing:var(--ls-11);text-transform:uppercase; }
.web-nested-cards .web-reading-shot { max-height:420px;object-fit:cover;object-position:top; }
.web-nested-item > a { display:inline-flex;align-items:center;gap:4px;color:var(--accent-text);font-size:var(--fs-sm);letter-spacing:var(--ls-12);text-decoration:none; }
.web-nested-item > a:hover { text-decoration:underline; }
.web-nested-item > a svg { width:12px;height:12px; }
/* Writing and arranging in Doc (web-workspace.js insertNote, moveAfter). + Note shows in the
   gap between sections on hover or focus; a section's grip drags it, a line marks where. */
.web-read-insert { position:relative;z-index:1;height:0; }
.web-read-insert button { position:absolute;top:-13px;left:50%;transform:translateX(-50%);display:inline-flex;align-items:center;gap:4px;height:26px;padding:0 10px;border:1px solid var(--border-default);border-radius:999px;background:var(--surface-base);color:var(--text-secondary);font:inherit;font-size:var(--fs-xs);letter-spacing:var(--ls-11);cursor:pointer;opacity:0;transition:opacity var(--dur-fast) var(--ease-out); }
.web-read-insert button svg { width:12px;height:12px; }
.web-read-insert button:hover,.web-read-insert button:focus-visible { opacity:1; }
.web-read-insert::before { content:'';position:absolute;left:0;right:0;top:-16px;height:32px; }
.web-read-insert:hover button { opacity:1; }
.web-read-insert button:hover { color:var(--text-primary);background:var(--state-hover); }
.web-read-insert button:focus-visible { outline:2px solid var(--accent-line);outline-offset:2px; }
.read-dragging .web-read-insert { visibility:hidden; }
.web-reading-item > header { position:relative; }
.web-read-grip { position:absolute;left:-28px;top:-5px;display:grid;place-items:center;width:20px;height:24px;margin:0;padding:0;border:0;border-radius:var(--r-control);background:transparent;color:var(--text-tertiary);cursor:grab;opacity:0;touch-action:none;transition:opacity var(--dur-fast) var(--ease-out); }
.web-reading-item:hover .web-read-grip,.web-read-grip:focus-visible { opacity:1; }
.web-read-grip:hover { color:var(--text-primary);background:var(--state-hover); }
.web-read-grip:focus-visible { outline:2px solid var(--accent-line);outline-offset:1px; }
.read-dragging,.read-dragging * { cursor:grabbing !important;user-select:none; }
.web-reading-item.is-read-dragging { opacity:.45; }
.web-reading-content { position:relative; }
.web-read-drop { position:absolute;left:36px;right:36px;height:2px;margin-top:-1px;border-radius:1px;background:var(--accent);pointer-events:none; }
@media (hover:none) { .web-read-insert button,.web-read-grip { opacity:1; } }
/* Doc's quieter page (UI/UX review 2026-10-09). The sticky bar's location appears once the
   title has scrolled away; a page's address keeps its own case; an item without text below
   its title leaves no gap; Show in Canvas and Comment show on hover or focus (always on
   touch), while a comment count stays; on Mac the bottom bar's lone Comments says its name. */
.web-read-navigation.at-top .web-read-location { visibility:hidden; }
.web-reading-item header > span .web-read-host { text-transform:none;letter-spacing:.01em; }
.web-reading-material.is-empty { display:none; }
.web-reading-item footer :is([data-canvas],[data-comment]) { opacity:0;transition:opacity var(--dur-fast) var(--ease-out); }
.web-reading-item:is(:hover,:focus-within) footer :is([data-canvas],[data-comment]),.web-reading-item footer :is([data-canvas],[data-comment]):focus-visible { opacity:1; }
@media (hover:none) { .web-reading-item footer :is([data-canvas],[data-comment]) { opacity:1; } }
.doc-btn-label { display:none; }
html:not(.static-web).web-reading #btn-comments { width:auto;padding:0 10px;gap:6px;display:inline-flex;align-items:center; }
html:not(.static-web).web-reading #btn-comments .doc-btn-label { display:inline;font-size:var(--fs-sm);letter-spacing:var(--ls-12); }
.web-reading-item.is-bare > header :is(h2,h3,h4,h5,h6) { margin-bottom:4px; }
.web-reading-item.is-bare footer { margin-top:0; }