:root:not(#\#){--qn-space-1:4px;--qn-space-2:8px;--qn-space-3:12px;--qn-space-4:16px;--qn-space-5:20px;--qn-space-6:24px;--qn-space-8:32px;--qn-radius-row:8px;--qn-radius-menu:12px;--qn-radius-panel:18px;--qn-radius-window:20px;--qn-radius-platter:24px;--qn-radius-sheet:36px;--qn-radius-kbd:4px;--qn-radius-button-dense:5px;--qn-radius-button:6px;--qn-radius-button-ios:12px;--qn-radius-bubble-mac:12px;--qn-radius-bubble:20px;--qn-radius-capsule:999px;--qn-size-row-mac:28px;--qn-size-row-mac-double:40px;--qn-size-row-ios:44px;--qn-size-row-ios-double:64px;--qn-size-control-mac:28px;--qn-size-control-ios:44px;--qn-size-button-mac:28px;--qn-size-button-mac-dense:24px;--qn-size-button-ios:44px;--qn-size-kbd:16px;--qn-size-toolbar-mac:52px;--qn-size-tabbar-ios:62px;--qn-size-dot:8px;--qn-size-gutter:20px;--qn-material-glass:blur(28px) saturate(185%);--qn-material-sidebar:blur(40px) saturate(180%);--qn-material-bar:blur(30px) saturate(180%);--qn-dur-instant:0s;--qn-dur-micro:.12s;--qn-dur-short:.16s;--qn-dur-standard:.22s;--qn-dur-large:.32s;--qn-curve-out:cubic-bezier(.23,1,.32,1);--qn-curve-move:cubic-bezier(.645,.045,.355,1);--qn-curve-fade:ease;--qn-curve-sheet:cubic-bezier(.32,.72,0,1);--qn-font-sans:-apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", system-ui, sans-serif;--qn-font-mono:"Geist Mono", ui-monospace, monospace;--qn-surface-base:#fff;--qn-surface-glass:#ffffff9e;--qn-surface-glass-menu:#f6f6f8e6;--qn-surface-sidebar:#ececf0c7;--qn-surface-scrim:#00000047;--qn-surface-message-own:#f2f2f4;--qn-surface-code-well:#f5f5f7;--qn-text-primary:#1d1d1f;--qn-text-secondary:#6e6e73;--qn-icon-secondary:#6e6e73;--qn-text-on-accent:#fff;--qn-accent:#007aff;--qn-accent-text:#0040dd;--qn-accent-tint:#007aff1a;--qn-accent-edge:#007aff47;--qn-action-primary:#2c2c2e;--qn-action-primary-hover:#48484a;--qn-action-primary-pressed:#1d1d1f;--qn-action-primary-text:#fff;--qn-action-secondary:#fff;--qn-action-secondary-hover:#f5f5f7;--qn-action-secondary-pressed:#ebebed;--qn-action-secondary-text:#1d1d1f;--qn-action-secondary-border:#0003;--qn-action-destructive-text:#d70015;--qn-action-disabled:#f2f2f4;--qn-action-disabled-text:#6e6e73;--qn-action-ios-secondary:#7878801f;--qn-kbd-fill:#ffffff2e;--qn-kbd-text:#fff;--qn-kbd-secondary-fill:#0000000f;--qn-kbd-secondary-text:#58585c;--qn-kbd-border:#0000001f;--qn-separator:#0000001a;--qn-separator-ios:#3c3c434a;--qn-status-mark:#48484a;--qn-status-mark-quiet:#6e6e73;--qn-status-highlight:#007aff;--qn-control-idle:#c7c7cc;--qn-shadow-glass:0 0 0 .5px #0000001a, inset 0 1px 0 #ffffffd9, 0 8px 28px #0000001f, 0 1px 3px #00000014;--qn-shadow-menu:0 0 0 .5px #0000001f, inset 0 1px 0 #ffffffd9, 0 10px 30px #00000029;--qn-shadow-window:0 0 0 .5px #00000038, 0 24px 64px #00000047, 0 2px 8px #0000001f;--qn-shadow-button-secondary:0 0 0 .5px #0003, 0 1px 1px #0000000d}
@media (prefers-color-scheme:dark){:root:not(#\#){--qn-surface-base:#1c1c1e;--qn-surface-glass:#38383c85;--qn-surface-glass-menu:#2c2c2ee6;--qn-surface-sidebar:#1e1e20b3;--qn-surface-scrim:#00000080;--qn-surface-message-own:#2c2c2e;--qn-surface-code-well:#2c2c2e;--qn-text-primary:#f5f5f7;--qn-text-secondary:#a1a1a6;--qn-icon-secondary:#a1a1a6;--qn-text-on-accent:#fff;--qn-accent:#0a84ff;--qn-accent-text:#64b5ff;--qn-accent-tint:#0a84ff2e;--qn-accent-edge:#0a84ff5c;--qn-action-primary:#e5e5ea;--qn-action-primary-hover:#d1d1d6;--qn-action-primary-pressed:#f5f5f7;--qn-action-primary-text:#1d1d1f;--qn-action-secondary:#2c2c2e;--qn-action-secondary-hover:#3a3a3c;--qn-action-secondary-pressed:#333336;--qn-action-secondary-text:#f5f5f7;--qn-action-secondary-border:#fff3;--qn-action-destructive-text:#ff8783;--qn-action-disabled:#2c2c2e;--qn-action-disabled-text:#98989d;--qn-action-ios-secondary:#7878803d;--qn-kbd-fill:#0000001f;--qn-kbd-text:#1d1d1f;--qn-kbd-secondary-fill:#ffffff1a;--qn-kbd-secondary-text:#c7c7cc;--qn-kbd-border:#ffffff29;--qn-separator:#ffffff1f;--qn-separator-ios:#54545899;--qn-status-mark:#d1d1d6;--qn-status-mark-quiet:#a1a1a6;--qn-status-highlight:#0a84ff;--qn-control-idle:#48484a;--qn-shadow-glass:0 0 0 .5px #0000008c, inset 0 1px 0 #ffffff47, 0 10px 32px #00000073, 0 1px 3px #0006;--qn-shadow-menu:0 0 0 .5px #0009, inset 0 1px 0 #fff3, 0 12px 34px #00000080;--qn-shadow-window:0 0 0 .5px #000000b3, 0 24px 64px #0009;--qn-shadow-button-secondary:0 0 0 .5px #fff3, 0 1px 1px #0000004d}}
.document-detail:not(#\#){flex:1;min-height:0;padding:0 16px 24px;overflow-y:auto}
.document-detail:not(.has-pages) .document-side:not(#\#){padding-top:20px}
.document-file .dv-viewer-img:not(#\#){object-fit:contain;width:100%;height:auto;max-height:none;display:block}
.document-menu-item:not(#\#){text-align:left;border-radius:4px;width:100%;min-height:28px;padding:4px 8px;font-size:13px;display:block}
.document-menu-item:hover:not(#\#){background:var(--color-muted)}
.document-menu-item:disabled:not(#\#){opacity:.4}
@media (max-width:1079px){.document-menu-item:not(#\#){min-height:44px;font-size:17px}}
.document-stack:not(#\#){counter-reset:dv-page}
.document-stack figure[data-page-unit]:not(:has(.dv-pdf-page)):not(#\#){counter-increment:dv-page var(--dv-units,1)}
.document-stack .dv-pdf-page:not(#\#){counter-increment:dv-page}
.numbered .document-stack .dv-pdf-page figcaption:not(#\#){display:none}
.numbered .document-stack :is(figure[data-page-unit]:not(:has(.dv-pdf-page)),.dv-pdf-page):not(#\#):after{content:"Page " counter(dv-page) " of " var(--dv-page-total);text-align:center;color:var(--muted-foreground);margin-top:10px;font-size:11px;line-height:14px;display:block}
.document-pages .document-stack figure[data-page-unit]:not(:has(.dv-viewer-pages))>.document-file:not(#\#),.document-pages .dv-pdf-page>div:not(#\#){background:#fff;border:0;box-shadow:0 0 0 .5px #0000001f,0 2px 8px #00000014}
.document-stack [data-source]>:first-child:not(#\#){outline:3px solid var(--color-qn-accent);outline-offset:3px}
.document-pages-footer:not(#\#){color:var(--muted-foreground);justify-content:space-between;align-items:center;gap:16px;font-size:11px;line-height:14px;display:flex}
.document-desk:not(#\#){background:var(--color-muted);transform-origin:50% 0;flex-direction:column;min-height:0;display:flex;position:relative}
.document-desk .document-pages-scroll:not(#\#){--dv-gap:28px;--dv-page-w:calc(100cqw - 96px);--dv-page-h:min(calc(100cqh - 72px), calc(var(--dv-page-w) * 1.294));overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;outline:none;flex:1;min-height:0;position:relative;overflow:auto hidden;container-type:size}
.document-desk .document-pages-scroll:focus-visible:not(#\#){box-shadow:inset 0 0 0 2px var(--color-qn-accent)}
.document-desk :is(.document-stack,figure:has(.dv-viewer-pages),figure:has(.dv-viewer-pages)>.document-file,figure:has(.dv-viewer-pages)>.document-file>div,.dv-viewer-pages):not(#\#){align-items:flex-start;gap:var(--dv-gap);flex-direction:row;flex:none;width:auto;display:flex}
.document-desk .document-stack:not(#\#){box-sizing:border-box;width:max-content;min-width:100%;padding-top:28px}
.document-desk .document-stack:not(#\#):before,.document-desk .document-stack:not(#\#):after{content:"";width:max(0px, calc(50cqw - var(--dv-page-h) * .3864 - var(--dv-gap)));flex:none}
.document-desk :is(figure[data-page-unit],.dv-pdf-page):not(#\#){flex:none;width:auto;margin:0}
.document-desk :is(figure[data-page-unit]:not(:has(.dv-pdf-page)),.dv-pdf-page):not(#\#){scroll-snap-align:center;scroll-snap-stop:always}
.document-desk figure[data-page-unit]:not(:has(.dv-viewer-pages))>.document-file:not(#\#){height:var(--dv-page-h)}
.document-desk figure[data-page-unit]:not(:has(.dv-viewer-pages))>.document-file>div:not(#\#){height:100%}
.document-desk figure[data-page-unit] .dv-viewer-img:not(#\#){width:auto;height:100%;max-width:var(--dv-page-w);object-fit:contain;aspect-ratio:auto .7727}
.document-desk .document-file:not(:has(img,canvas,.dv-viewer-pages)):not(#\#){height:var(--dv-page-h);width:calc(var(--dv-page-h) * .7727);overflow:auto}
.document-desk .dv-pdf-page>div:not(#\#){width:auto!important}
.document-desk .dv-pdf-page>div:empty:not(#\#){height:var(--dv-page-h);max-width:var(--dv-page-w)}
.document-desk .dv-pdf-page canvas:not(#\#){max-height:var(--dv-page-h);width:auto!important;height:auto!important;max-width:var(--dv-page-w)!important}
.document-desk :is(figure[data-page-unit] .dv-viewer-img,.dv-pdf-page canvas):not(#\#){cursor:zoom-in}
.document-pager:not(#\#){border-radius:14px;align-items:center;gap:2px;min-height:28px;padding:0 4px;display:flex}
.document-pager button:not(#\#){width:28px;height:28px;color:var(--foreground);border-radius:14px;justify-content:center;align-items:center;display:flex}
.document-pager button:disabled:not(#\#){opacity:.3}
.document-pager span:not(#\#){font-variant-numeric:tabular-nums;padding:0 4px}
@media (hover:hover) and (pointer:fine){.document-pager button:not(:disabled):hover:not(#\#){background:var(--foreground)}@supports (color:color-mix(in lab, red, red)){.document-pager button:not(:disabled):hover:not(#\#){background:color-mix(in srgb, var(--foreground) 6%, transparent)}}}
.document-rail:not(#\#){min-height:0;padding:24px 6px;overflow-y:auto}
.document-rail .document-stack:not(#\#),.document-rail figure:not(#\#),.document-rail .dv-viewer-pages:not(#\#){gap:14px}
.document-rail :is(figure[data-page-unit]:not(:has(.dv-pdf-page)),.dv-pdf-page):not(#\#){cursor:pointer;border-radius:2px;outline:none}
.document-rail :is(figure[data-page-unit]:not(:has(.dv-pdf-page)),.dv-pdf-page)>:first-child:not(#\#){background:#fff;box-shadow:0 0 0 .5px #0000002e}
.document-rail .dv-pdf-page figcaption:not(#\#){display:none}
.document-rail :is(figure[data-page-unit]:not(:has(.dv-pdf-page)),.dv-pdf-page):not(#\#):after{content:counter(dv-page);text-align:center;color:var(--muted-foreground);margin-top:4px;font-size:11px;line-height:14px;display:block}
.document-rail [data-current]>:first-child:not(#\#),.document-rail :is(figure[data-page-unit]:not(:has(.dv-pdf-page)),.dv-pdf-page):focus-visible>:first-child:not(#\#){outline:2px solid var(--color-qn-accent);outline-offset:2px}
.document-stack figure[data-page-unit][data-units]:not(:has(.dv-pdf-page)):not(#\#):after{content:none}
.document-text .dv-viewer-text:not(#\#){white-space:pre-wrap;overflow-wrap:anywhere;font:inherit;font-size:13px;line-height:20px}
.document-text :not(#\#)::highlight(dv-passage){background-color:var(--color-qn-accent)}
@supports (color:color-mix(in lab, red, red)){.document-text :not(#\#)::highlight(dv-passage){background-color:color-mix(in srgb, var(--color-qn-accent) 16%, transparent)}}
.document-text :not(#\#)::highlight(dv-passage-current){background-color:var(--color-qn-accent)}
@supports (color:color-mix(in lab, red, red)){.document-text :not(#\#)::highlight(dv-passage-current){background-color:color-mix(in srgb, var(--color-qn-accent) 32%, transparent)}}
.document-text :not(#\#)::highlight(dv-passage-current){text-decoration:underline;text-decoration-thickness:1.5px}
.document-tier+.document-tier:not(#\#){margin-top:32px}
.document-tier>:where(*+*):not(#\#){margin-top:8px}
.document-tier-label:not(#\#){margin-bottom:8px}
.document-heading:not(#\#){margin:0}
.document-status:not(#\#){flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;font-size:13px;line-height:20px;display:flex}
.document-status>svg:not(#\#),.document-status>[data-status-mark]:not(#\#){margin-right:-4px}
.document-facts:not(#\#){grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px;display:grid}
.document-facts>[role=button]:not(#\#){border-bottom:0;align-items:flex-start;min-height:0;padding:0}
.document-facts>[role=button]>span:first-child>span:last-child:not(#\#){font-variant-numeric:tabular-nums;font-size:15px;font-weight:600;line-height:20px}
.document-side :is([data-testid=value-to-check],[data-testid=value-checked]):not(#\#){margin-top:8px}
.document-side :is([data-testid=value-to-check],[data-testid=value-checked])>div:not(#\#){grid-template-columns:minmax(0,1fr);row-gap:2px}
.document-side :is([data-testid=value-to-check],[data-testid=value-checked])>div>*:not(#\#){grid-column:1}
.document-side :is([data-testid=value-to-check],[data-testid=value-checked])>div>:not(:first-child):not(:last-child):not(#\#){padding-left:18px}
@media (max-width:639.98px){.document-tier-label:not(#\#){font-size:13px;line-height:18px}.document-status:not(#\#){font-size:15px;line-height:20px}.document-facts>[role=button]>span:first-child>span:first-child:not(#\#){font-size:13px;line-height:18px}.document-facts>[role=button]>span:first-child>span:last-child:not(#\#){font-size:17px;line-height:22px}}
@media (max-width:1079.98px){.document-detail.has-pages:not(#\#){padding:0;position:relative;overflow:hidden}.document-detail.has-pages .document-desk:not(#\#){position:absolute;inset:0 0 160px}.document-desk .document-pages-scroll:not(#\#){--dv-gap:16px;--dv-page-w:calc(100cqw - 72px);--dv-page-h:min(calc(100cqh - 52px), calc(var(--dv-page-w) * 1.294))}.document-desk .document-stack:not(#\#){padding-top:16px}.document-desk .document-pages-footer:not(#\#){justify-content:center;min-height:36px;padding:0 16px 4px;font-size:13px;line-height:18px}.document-pager button:not(#\#){border-radius:22px;width:44px;height:44px}.document-desk-dim:not(#\#){z-index:1;opacity:0;pointer-events:none;background:#000;position:absolute;inset:0}.document-sheet:not(#\#){z-index:2;background:var(--background);will-change:transform;touch-action:none;box-shadow:0 -.5px 0 var(--qn-separator), 0 -12px 40px #0000001f;border-radius:12px 12px 0 0;flex-direction:column;display:flex;position:absolute;inset:0}.document-sheet[data-detent=full]:not(#\#){touch-action:auto}.document-sheet-grabber:not(#\#){touch-action:none;cursor:grab;flex:none;justify-content:center;align-items:center;width:100%;height:24px;display:flex}.document-sheet-grabber>span:not(#\#){background:var(--muted-foreground);opacity:.45;border-radius:3px;width:36px;height:5px}.document-sheet-grabber:focus-visible:not(#\#){outline:2px solid var(--color-qn-accent);outline-offset:-4px;border-radius:8px}.document-sheet-scroll:not(#\#){overscroll-behavior:contain;flex:1;min-height:0;padding:0 16px 24px;overflow:hidden}.document-sheet-scroll.is-full:not(#\#){overflow-y:auto}.document-sheet .document-heading:not(#\#){margin-top:4px}.document-text .dv-viewer-text:not(#\#){font-size:15px;line-height:22px}}
.document-side:not(.document-sheet)>.document-side-body:not(#\#){display:contents}
@media (min-width:640px) and (max-width:1079.98px){.document-detail:not(#\#),.document-sheet-scroll:not(#\#){padding-inline:24px}.document-detail.text-only:not(#\#),.document-detail.without-pages:not(#\#){width:100%;max-width:720px;margin:0 auto}}
@media (min-width:1080px){.document-detail.has-pages:not(#\#){grid-template-columns:minmax(0,1fr) 460px;padding:0;display:grid;overflow:hidden}.document-detail.has-pages.with-rail:not(#\#){grid-template-columns:96px minmax(0,1fr) 460px}.document-desk .document-pages-footer:not(#\#){justify-content:center;padding:4px 24px 16px;position:relative}.document-desk .document-pages-footer>:not(.document-pager):not(#\#){position:absolute;right:24px}.has-pages .document-side:not(#\#){min-height:0;box-shadow:inset .5px 0 0 var(--qn-separator);padding:24px;overflow-y:auto}.has-pages .document-heading:not(#\#){margin-top:0}.document-detail.text-only:not(#\#){width:100%;max-width:1120px;margin:0 auto;padding:0 40px 24px}.text-only .document-side:not(#\#){grid-template-columns:minmax(0,1fr) 300px;align-content:start;column-gap:64px;display:grid}.text-only .document-side-body>*:not(#\#){grid-column:1}.text-only .document-side-body>.document-aside:not(#\#){grid-area:1/2/span 6}.document-detail.without-pages:not(#\#){width:100%;max-width:720px;margin:0 auto;padding-inline:40px}}
@media (prefers-reduced-motion:reduce){.document-desk .document-pages-scroll:not(#\#){scroll-behavior:auto}}
.animate-qn-spin[data-offscreen]:not(#\#){animation-play-state:paused}
:root:not(#\#){color-scheme:light;scrollbar-width:thin;scrollbar-color:#8a8a8e transparent;--read:#6e6e73;--review:#48484a;--unread:#c7c7cc;--sealed:#6e6e73;--background:#fff;--foreground:#1d1d1f;--card:#fff;--card-foreground:#1d1d1f;--popover:#f6f6f8;--popover-foreground:#1d1d1f;--primary:#2c2c2e;--primary-foreground:#fff;--secondary:#fff;--secondary-foreground:#1d1d1f;--muted:#f5f5f7;--muted-foreground:#6e6e73;--accent:#f5f5f7;--accent-foreground:#1d1d1f;--destructive:#d70015;--border:#0000001a;--input:#0003;--ring:#007aff;--chart-1:#c7c7cc;--chart-2:#8e8e93;--chart-3:#6e6e73;--chart-4:#48484a;--chart-5:#2c2c2e;--radius:6px;--sidebar:#ececf0;--sidebar-foreground:#1d1d1f;--sidebar-primary:#2c2c2e;--sidebar-primary-foreground:#fff;--sidebar-accent:#e5e5ea;--sidebar-accent-foreground:#1d1d1f;--sidebar-border:#0000001a;--sidebar-ring:#007aff}
@media (prefers-color-scheme:dark){:root:not(#\#){color-scheme:dark;scrollbar-width:thin;scrollbar-color:#707070 transparent;--background:#1c1c1e;--foreground:#f5f5f7;--card:#1c1c1e;--card-foreground:#f5f5f7;--popover:#242426;--popover-foreground:#f5f5f7;--primary:#e5e5ea;--primary-foreground:#1d1d1f;--secondary:#2c2c2e;--secondary-foreground:#f5f5f7;--muted:#2c2c2e;--muted-foreground:#a1a1a6;--accent:#242426;--accent-foreground:#f5f5f7;--destructive:#ff8783;--border:#ffffff1f;--input:#fff3;--ring:#0a84ff;--read:#a1a1a6;--review:#d1d1d6;--unread:#48484a;--sealed:#a1a1a6;--chart-1:#48484a;--chart-2:#636366;--chart-3:#8e8e93;--chart-4:#a1a1a6;--chart-5:#d1d1d6;--sidebar:#1e1e20;--sidebar-foreground:#f5f5f7;--sidebar-primary:#e5e5ea;--sidebar-primary-foreground:#1d1d1f;--sidebar-accent:#2c2c2e;--sidebar-accent-foreground:#f5f5f7;--sidebar-border:#ffffff1f;--sidebar-ring:#0a84ff}}
@media (prefers-reduced-motion:reduce){.animate-qn-spin:not(#\#){animation:none}}
.qn-chrome-circle:not(#\#){background:var(--qn-surface-glass);width:44px;height:44px;box-shadow:var(--qn-shadow-glass);-webkit-backdrop-filter:var(--qn-material-glass);border-radius:50%;justify-content:center;padding:0}
.dv-viewer-pages:not(#\#){flex-direction:column;gap:24px;width:100%;display:flex}
.dv-pdf-page:not(#\#){width:100%;margin:0}
.dv-pdf-page canvas:not(#\#){display:block}
.dv-pdf-page>div:not(#\#){border:1px solid var(--qn-separator);background:#fff}
.dv-pdf-page figcaption:not(#\#){color:var(--muted-foreground);margin-top:8px;font-size:11px}
@media (max-width:1079.98px){.dv-pdf-page figcaption:not(#\#){font-size:13px}}
.lp-plus:not(#\#):before{content:"+"}
details[open]>.lp-plus:not(#\#):before{content:"−"}
.lp-plus-end:not(#\#):after{content:"+"}
details[open]>.lp-plus-end:not(#\#):after{content:"−"}
.lp-arrow:not(#\#):after{content:""}
/* shell.css — docvault web shell. Ships its own copy of the design tokens and app chrome
   (mirrors the box app's docvault.css: two text colours, one accent, hairline structure,
   quiet Notion/Linear-like chrome). No external fonts, no external images.

   NAMESPACING RULE — read before adding a custom property below.

   `build.mjs` concatenates the compiled Tailwind sheet (from `app/src/index.css`) and THEN
   this file into one stylesheet. Both declare custom properties on bare `:root` (the app's dark
   palette is `:root` too, under `@media (prefers-color-scheme: dark)`). They all have the SAME
   specificity (0,1,0), so for any name declared in both, the one that
   comes later in the file wins — and this file is always later. A name declared here that the
   app's theme also declares therefore overrides the app token in BOTH themes, silently, while
   its paired `-foreground` token keeps the app's value.

   That is not hypothetical: `--card: #ffffff` and `--accent: #4f4fd0` used to be declared here
   under the app's own names. In the dark theme (then the only one the app shipped) every
   `bg-card` surface painted #ffffff while `--card-foreground` stayed
   near-white, for 1.21:1 contrast: the Emergency Kit secret key, signup fields as you type,
   every document title, the home headline and the empty-state actions were all invisible.

   So: every token this file defines is prefixed `--shell-` if the app's theme also names it.
   `app/test/theme-contrast.test.js` compiles the real emitted stylesheet and fails on any new
   collision, so this rule is enforced rather than remembered.

   GROUND RULE — this sheet may not paint the DOCUMENT.

   The same concatenation has a second edge. `index.css` sets the app's ground in Tailwind's
   `@layer base` (`body { background-color: var(--background) }`), and an UNLAYERED declaration
   beats a layered one at any specificity — so this file's unlayered `body { background:
   var(--paper) }` won, and the document ground of a near-black app was #fafaf9 in production.

   That is what the owner saw as "a weird flash of white on each navigation". `RouteTransition`
   crossfades the outgoing and incoming screens with `AnimatePresence mode="sync"`, so mid-
   transition both sit at partial opacity and the ground shows through: measured against the
   deployed bundle, composite coverage drops to 0.58 at the midpoint, with a long tail at
   0.90-0.99. Over a dark ground that is invisible. Over #fafaf9 it is a white flash, on every
   navigation, exactly as reported. No animation tuning fixes it; the ground does.

   So the retired frames paint their own light ground on their OWN roots — `.app-shell`,
   `.auth-wrap`, `.dv-pairing-watch` — and each of those also declares `color-scheme: light`,
   because a light surface needs light scrollbars and light form controls while the document
   around it is dark. `app/test/theme-ground.test.js` resolves `body`'s winning background out
   of the real emitted sheet and fails if this file reclaims the document again.
*/
:root:not(#\#){
  --ink: #1a1b1e;
  --mut: #6a6c72;
  --line: #e7e6e2;
  --paper: #fafaf9;
  --shell-card: #ffffff;
  --well: #f1f1ee;
  --hover: #f4f4f1;
  /* The light scrollbar thumb for the retired frames. `scrollbar-color` is INHERITED, so
     without this the dark document's thumb would be drawn down the side of a white card. Same
     per-subtree argument as `color-scheme`, and restated on the same three roots.

     Clears 3:1 against every light surface it is drawn on, resolving the transparent track to
     what shows through: 3.70:1 on `--shell-card`, 3.55:1 on `--paper`, 3.36:1 on `--hover`,
     3.27:1 on `--well` (the darkest, so the worst case). The first draft was #cbcac5, which is
     1.64:1 on white — a thumb nobody can find is a different fault from one that shouts. */
  --shell-scroll: #86857e;
  --shell-accent: #4f4fd0;
  --tag-green-bg: #e4f4ec; --tag-green-fg: #19694b;
  --tag-amber-bg: #fbf0d7; --tag-amber-fg: #82570c;
  --tag-blue-bg:  #e9edf9; --tag-blue-fg:  #3a5390;
  --danger-bg: #fdecec; --danger-fg: #8a1f1f; --danger-line: #f0b8b8;
  --t-xs: 11px; --t-sm: 12.5px; --t-md: 14px; --t-lg: 17px; --t-xl: 21px;
  --r: 8px; --r-sm: 6px;
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Inter, Roboto, sans-serif;
  --mono: ui-monospace, "JetBrains Mono", SFMono-Regular, Menlo, Consolas, monospace;
}
*:not(#\#){ box-sizing: border-box; }
html:not(#\#){ -webkit-text-size-adjust: 100%; }
/* No `background` and no `color` here — see GROUND RULE above. The document's ground and ink
   are the app theme's (`index.css`, `@layer base`); this sheet only sets the typography the
   retired screens were built against. */
body:not(#\#){ margin: 0; font-family: var(--sans);
       font-size: var(--t-md); line-height: 1.5; -webkit-font-smoothing: antialiased; }
a:not(#\#){ color: inherit; text-decoration: none; }
button:not(#\#){ font: inherit; cursor: pointer; }
input:not(#\#),textarea:not(#\#),select:not(#\#){ font: inherit; }
/* NO ZOOM ON FOCUS. iOS Safari zooms the page when a focused field's text is under 16px, and
   every field here is smaller: the line above is unlayered, so it beats each field's Tailwind
   size utility and the field inherits its parent's 13–14px. On a touch screen a field is at least
   16px, or its inherited size when that is larger (`1em` of a font-size is the parent's). The
   `!important` is for this sheet's own field rules (`.set-sec input`, `.auth-card input`, …),
   which are more specific. Pinch-zoom stays: the viewport sets no maximum-scale. Desktop, a fine
   pointer, is untouched. */
@media (pointer: coarse){input:not([type=checkbox], [type=radio], [type=range], [type=color], [type=file], [type=button], [type=submit], [type=reset], [type=image]):not(#\#),textarea:not(#\#),select:not(#\#){ font-size: max(16px, 1em) !important; }}
/* SELECTION AND FOCUS — two more places this sheet was painting the whole document.
   `::selection` and `:focus-visible` carry no class, so they match every element in the bundle,
   adopted screens included, and both were declared in this sheet's light palette:

     * `::selection { background: #dddcf6 }` against the app's near-white `--foreground` is
       1.11:1. Selecting any text in the dark product made it vanish — the same failure, and
       nearly the same ratio, as the 1.21:1 `--card` defect in the banner above.
     * `--shell-accent` (#4f4fd0) as the focus ring is 3.20:1 on the near-black ground, where
       the app theme's own `--ring` is 7.16:1. On a white retired card the order reverses —
       6.25:1 for the shell accent, 2.79:1 for `--ring` — so neither is "the better colour".
       Each palette's ring is the right one for its own ground, which is the per-subtree
       argument again.

   So the document keeps the app theme's ring, the retired frames keep the shell's, and the
   selection highlight is the browser's — which follows `color-scheme` and is therefore right in
   both without either sheet naming a colour. */
:focus-visible:not(#\#){ outline: 2px solid var(--ring); outline-offset: 2px; }
/* A home list block contains its paint, so it clips anything drawn past its edges: rings inside it
   are drawn inset. This sheet is unlayered, so a layered utility offset could not override the rule above. */
.dv-paint-block :focus-visible:not(#\#){ outline-offset: -2px; }
.app-shell :focus-visible:not(#\#),.auth-wrap :focus-visible:not(#\#),.dv-pairing-watch :focus-visible:not(#\#){
  outline-color: var(--shell-accent); }
.app-shell :not(#\#)::selection,.auth-wrap :not(#\#)::selection,.dv-pairing-watch :not(#\#)::selection{ background: #dddcf6; }
[hidden]:not(#\#){ display: none !important; }
.mono:not(#\#){ font-family: var(--mono); }
.dv-icon:not(#\#){ flex: none; vertical-align: -3px; }
/* boot spinner. This is the FIRST thing the reader sees, before the bundle has parsed, so it
   renders on the app's dark ground; `<Button busy>` and the vault-creation card render the same
   element inside the light retired frames. Hence `currentColor` rather than either palette's
   ink: one rule that is right in both places, and one that cannot go stale when either moves.
   The track falls back to `transparent` where `color-mix` is unsupported — a top-arc-only
   spinner, still legible, never a bright ring on a near-black page. */
/* Every full-page frame here is the viewport LESS `--dv-banner-height`: the measured height of
   the notices stacked in the flow above the routed screen (the account banner, the library
   refresh notice; see RouteTransition.jsx). A frame a whole viewport tall was pushed off the
   bottom by them — the retired sidebar's lock with it (#532). index.css's `h-app` is the same
   rule for the adopted screens. */
.dv-bootload:not(#\#){ display: flex; align-items: center; justify-content: center; min-height: calc(100vh - var(--dv-banner-height, 0px)); }
.spin:not(#\#){ display: inline-block; width: 13px; height: 13px; border: 2px solid transparent;
        border-color: color-mix(in oklab, currentColor 22%, transparent);
        border-top-color: currentColor; border-radius: 50%; animation: spin .8s linear infinite; flex: none; }
@media (prefers-reduced-motion: reduce){.spin:not(#\#){ animation: none; }}
/* ================================================================= buttons + tags */
.btn:not(#\#){ display: inline-flex; align-items: center; justify-content: center; gap: 7px;
       border-radius: var(--r-sm); padding: 6px 14px; font-size: var(--t-sm); font-weight: 550;
       border: 1px solid transparent; transition: transform .06s ease, background .15s, border-color .15s;
       line-height: 1.45; }
.btn:active:not(#\#){ transform: scale(.98); }
.btn-dark:not(#\#){ background: var(--ink); color: #fff; }
.btn-dark:hover:not(#\#){ background: #2c2d33; }
.btn-ghost:not(#\#){ border-color: var(--line); color: var(--ink); background: #fff; }
.btn-ghost:hover:not(#\#){ border-color: #c9c8c2; }
.btn-sm:not(#\#){ padding: 4px 10px; font-size: var(--t-sm); }
.btn:disabled:not(#\#),.btn[aria-disabled="true"]:not(#\#){ opacity: .4; cursor: default; pointer-events: none; }
.btn.busy:not(#\#){ opacity: .55; pointer-events: none; }
.tag:not(#\#){ font-family: var(--mono); font-size: var(--t-xs); padding: 2px 7px; border-radius: 4px;
       white-space: nowrap; background: var(--well); color: var(--mut); }
.tag-filed:not(#\#){ background: var(--tag-green-bg); color: var(--tag-green-fg); }
.tag-exp:not(#\#){ background: var(--tag-amber-bg); color: var(--tag-amber-fg); }
.tag-ent:not(#\#){ background: var(--tag-blue-bg); color: var(--tag-blue-fg); }
.kicker:not(#\#){ font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; color: var(--mut); text-transform: uppercase; }
.h-page:not(#\#){ font-size: var(--t-xl); letter-spacing: -.015em; margin: 3px 0 2px; font-weight: 650; }
.sub-mut:not(#\#){ color: var(--mut); font-size: var(--t-sm); }
.dv-pagehead:not(#\#){ margin: 4px 0 16px; }
.dv-pagehead.lib-head:not(#\#){ display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
/* ================================================================= app shell */
/* The retired signed-in frame. `color-scheme: light` is scoped to this subtree rather than set
   on the document: these screens really are light, so their scrollbars (the rail's `overflow-y`,
   the viewer's `overflow`) and their form controls must be the light ones, while the adopted
   dark screens outside keep the dark ones. Per-subtree is the only arrangement in which both
   can be right at once, and they coexist in one bundle until the last #274 screen is adopted. */
.app-shell:not(#\#){ display: flex; min-height: calc(100vh - var(--dv-banner-height, 0px)); background: var(--shell-card);
             color: var(--ink); color-scheme: light;
             scrollbar-width: thin; scrollbar-color: var(--shell-scroll) transparent; }
.side:not(#\#){ width: 236px; flex: none; display: flex; flex-direction: column;
        background: var(--paper); border-right: 1px solid var(--line);
        padding: 10px 8px 10px; position: sticky; top: 0; height: calc(100vh - var(--dv-banner-height, 0px)); overflow-y: auto; }
.side-brand:not(#\#){ display: flex; align-items: center; padding: 4px 8px 10px; }
.logo:not(#\#){ display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 14px; letter-spacing: -.02em; }
.side-new:not(#\#){ display: flex; align-items: center; gap: 8px; width: 100%; border: 1px solid var(--line);
            background: #fff; border-radius: var(--r-sm); padding: 6px 10px; font-size: var(--t-sm);
            font-weight: 550; color: var(--ink); box-shadow: 0 1px 1px rgba(20,20,18,.04); margin-bottom: 2px; }
.side-new:hover:not(#\#){ border-color: #c9c8c2; }
.side-search:not(#\#){ display: flex; align-items: center; gap: 8px; width: 100%; border: 0; background: none;
               border-radius: var(--r-sm); padding: 6px 10px; font-size: var(--t-sm); color: var(--mut); text-align: left; }
.side-search:hover:not(#\#){ background: var(--hover); color: var(--ink); }
.side-search kbd:not(#\#){ margin-left: auto; font-family: var(--mono); font-size: 10px; border: 1px solid var(--line);
                   background: #fff; border-radius: 4px; padding: 1px 5px; color: var(--mut); }
.side-sec:not(#\#){ font-family: var(--mono); font-size: 10px; letter-spacing: .12em; color: var(--mut);
            text-transform: uppercase; padding: 14px 10px 4px; }
.side-nav:not(#\#){ display: flex; flex-direction: column; gap: 1px; margin-top: 2px; }
.side-nav a:not(#\#){ display: flex; align-items: center; gap: 9px; padding: 4px 10px; border-radius: var(--r-sm);
              font-size: var(--t-sm); font-weight: 500; color: var(--ink); min-height: 28px; }
.side-nav a:hover:not(#\#){ background: var(--hover); }
.side-nav a.on:not(#\#){ background: #ebebe7; font-weight: 600; }
.side-nav a .ic:not(#\#){ width: 17px; color: var(--mut); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.side-nav a.on .ic:not(#\#){ color: var(--ink); }
.side-nav a .tx:not(#\#){ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-nav a .n:not(#\#){ margin-left: auto; font-family: var(--mono); font-size: 10px; color: var(--mut); }
.side-bottom:not(#\#){ margin-top: auto; padding-top: 8px; border-top: 1px solid var(--line); }
.side-user:not(#\#){ display: flex; align-items: center; gap: 9px; padding: 6px 8px; border-radius: var(--r-sm); margin-top: 2px; }
.side-user .who:not(#\#){ min-width: 0; line-height: 1.25; }
.side-user .who b:not(#\#){ display: block; font-size: var(--t-sm); font-weight: 550; }
.side-user .who span:not(#\#){ display: block; font-size: 11px; color: var(--mut); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avatar:not(#\#){ width: 26px; height: 26px; border-radius: 50%; background: var(--ink); color: #fff; flex: none;
          display: flex; align-items: center; justify-content: center; font-size: 10.5px; font-weight: 650; letter-spacing: .02em; }
.dv-side-empty:not(#\#){ padding: 4px 10px; display: block; }
.content:not(#\#){ flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--shell-card); }
.topbar:not(#\#){ display: none; }
.app-main:not(#\#){ width: 100%; max-width: 1000px; padding: 22px 36px 64px; }
.app-foot:not(#\#){ border-top: 1px solid var(--line); margin-top: auto; padding: 9px 36px; display: flex;
            justify-content: space-between; gap: 16px; font-size: 11.5px; color: var(--mut); }
.app-foot .lock:not(#\#){ display: flex; gap: 7px; align-items: center; }
.app-foot a:not(#\#){ text-decoration: underline; text-decoration-style: dotted; }
.mobile-tabs:not(#\#){ display: none; }
/* ================================================================= lists / rows */
.sec-head:not(#\#){ display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
            margin: 24px 0 0; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.sec-head .more:not(#\#){ font-size: var(--t-sm); color: var(--mut); }
.sec-head .more:hover:not(#\#){ color: var(--ink); }
.sec-head + .doc-list:not(#\#){ margin-top: 8px; }
.doc-list:not(#\#){ background: #fff; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; margin-top: 8px; }
.doc-list:empty:not(#\#){ display: none; }
.doc-row:not(#\#){ display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-top: 1px solid var(--line); min-height: 38px; color: var(--ink); }
.doc-row:first-child:not(#\#){ border-top: 0; }
a.doc-row:hover:not(#\#){ background: var(--hover); }
.doc-row .fic:not(#\#){ width: 26px; height: 26px; border-radius: 5px; border: 1px solid var(--line);
                display: flex; align-items: center; justify-content: center; color: var(--mut); flex: none; background: #fff; }
.doc-row .t:not(#\#){ font-weight: 550; font-size: var(--t-sm); }
.doc-row .m:not(#\#){ font-size: 11.5px; color: var(--mut); margin-top: 1px; }
.doc-row-openable:not(#\#){ cursor: pointer; }
.doc-row-openable:hover:not(#\#){ background: var(--hover); }
.doc-row-openable:focus-visible:not(#\#){ background: var(--hover); outline: none; box-shadow: inset 0 0 0 2px var(--ink); }
.dv-viewer:not(#\#){ min-height: 120px; max-height: 70vh; overflow: auto; }
.dv-viewer-img:not(#\#){ max-width: 100%; height: auto; display: block; }
.dv-viewer-pages:not(#\#){ display: flex; flex-direction: column; gap: 8px; align-items: center; }
.dv-viewer-pages canvas:not(#\#){ border: 1px solid var(--line); }
.dv-viewer-text:not(#\#){ white-space: pre-wrap; font-size: var(--t-sm); }
.doc-row .right:not(#\#){ margin-left: auto; font-size: var(--t-sm); color: var(--mut); white-space: nowrap; display: flex; gap: 8px; align-items: center; }
.dv-vault-locked:not(#\#){ display: inline-flex; align-items: center; gap: 3px; color: var(--mut); background: transparent; border: 1px solid var(--line); }
.dv-side-locked:not(#\#){ display: inline-flex; align-items: center; opacity: .58; }
.empty:not(#\#){ border: 1px dashed var(--line); background: #fff; border-radius: var(--r); padding: 22px 18px;
         text-align: center; color: var(--mut); font-size: var(--t-sm); margin-top: 8px; }
.empty b:not(#\#){ color: var(--ink); display: block; font-size: var(--t-sm); margin-bottom: 4px; }
.empty .star:not(#\#){ font-size: 18px; display: block; margin-bottom: 8px; }
.dv-empty-act:not(#\#){ margin-top: 12px; }
.dv-member-row .avatar:not(#\#){ width: 30px; height: 30px; }
.dv-inline:not(#\#){ display: inline-flex; gap: 8px; align-items: center; }
.dv-inline input:not(#\#){ flex: 1; }
.dv-row:not(#\#){ display: inline-flex; gap: 8px; align-items: center; }
.dv-stack:not(#\#){ display: flex; flex-direction: column; gap: 10px; margin: 8px 0; }
.dv-stack .btn:not(#\#){ justify-content: flex-start; }
.dv-kv:not(#\#){ display: flex; gap: 14px; align-items: baseline; padding: 6px 0; border-top: 1px solid var(--line); font-size: var(--t-sm); }
.dv-kv:first-of-type:not(#\#){ border-top: 0; }
.dv-kv-l:not(#\#){ color: var(--mut); min-width: 150px; }
.dv-kv-v:not(#\#){ color: var(--ink); overflow-wrap: anywhere; }
/* search box */
.askbox:not(#\#){ display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--line);
          border-radius: var(--r); padding: 3px 8px 3px 12px; margin: 12px 0 8px;
          box-shadow: 0 1px 2px rgba(20,20,18,.03); transition: border-color .15s, box-shadow .15s; }
.askbox:focus-within:not(#\#){ border-color: var(--shell-accent); box-shadow: 0 0 0 3px rgba(79,79,208,.10); }
.askbox svg:not(#\#){ flex: none; color: var(--mut); }
.askbox input:not(#\#){ flex: 1; border: 0; outline: 0; background: none; font-size: var(--t-md); padding: 8px 0; color: var(--ink); }
.askbox input:not(#\#)::placeholder{ color: var(--mut); opacity: .7; }
.askbox .ret:not(#\#){ font-family: var(--mono); font-size: 10px; border: 1px solid var(--line); border-radius: 5px;
               padding: 3px 6px; color: var(--mut); background: var(--paper); }
.dv-content-search:not(#\#){ margin: 18px 0 6px; }
.ent-grid:not(#\#){ display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px; margin-top: 8px; }
.ent-card:not(#\#){ display: flex; gap: 9px; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: var(--r-sm); padding: 6px 10px; }
.ent-card .ic:not(#\#){ width: 24px; height: 24px; font-family: var(--mono); font-size: var(--t-xs); border-radius: 5px;
                background: var(--well); color: var(--mut); display: flex; align-items: center; justify-content: center; flex: none; }
.ent-card b:not(#\#){ font-size: var(--t-sm); font-weight: 550; }
.ent-card .meta:not(#\#){ font-size: 11.5px; color: var(--mut); }
.dv-answers:not(#\#){ display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.dv-answer-text:not(#\#){ white-space: pre-wrap; font-size: var(--t-md); line-height: 1.6; }
/* The evidence line under an answer — the citations, or the admission that there are none.
   Both are the same size and weight on purpose: an uncited answer must not look like a
   footnote the eye skips. */
.dv-answer-cites:not(#\#),.dv-answer-uncited:not(#\#){ font-size: var(--t-sm); color: var(--mut); margin-top: 6px; }
.dv-answer-cites .dv-cite:not(#\#){ color: inherit; text-decoration: underline; }
/* How much of a vault search and Ask can actually see. */
.dv-coverage:not(#\#){ font-size: var(--t-sm); color: var(--mut); margin: 4px 0 0; }
/* tabs */
.tabs:not(#\#){ display: flex; gap: 4px; margin: 14px 0 10px; border-bottom: 1px solid var(--line); }
.tab:not(#\#){ display: inline-flex; gap: 7px; align-items: center; border-radius: var(--r-sm) var(--r-sm) 0 0; padding: 6px 11px;
       font-size: var(--t-sm); font-weight: 500; border: 0; background: none; color: var(--mut);
       border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tab:hover:not(#\#){ color: var(--ink); }
.tab.on:not(#\#){ color: var(--ink); border-bottom-color: var(--ink); font-weight: 600; }
.dv-tabpanel:not(#\#){ padding-bottom: 40px; }
/* ================================================================= settings-style sections */
.set-grid:not(#\#){ display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 28px; margin-top: 18px; }
.set-grid > div:not(#\#){ min-width: 0; }
.set-nav:not(#\#){ display: flex; flex-direction: column; gap: 1px; font-size: var(--t-sm); position: sticky; top: 20px; align-self: start; }
.set-nav a:not(#\#){ padding: 5px 10px; border-radius: var(--r-sm); color: var(--mut); }
.set-nav a:hover:not(#\#){ background: var(--hover); color: var(--ink); }
.set-sec:not(#\#){ background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; margin-bottom: 10px; scroll-margin-top: 20px; overflow-wrap: anywhere; }
.set-sec h2:not(#\#){ font-size: var(--t-md); margin: 0 0 3px; font-weight: 600; }
.set-sec .d:not(#\#){ font-size: var(--t-sm); color: var(--mut); margin: 0 0 12px; max-width: 68ch; }
.set-sec input[type=text]:not(#\#),.set-sec input[type=email]:not(#\#),.set-sec input[type=password]:not(#\#),.set-sec select:not(#\#){
  border: 1px solid var(--line); border-radius: var(--r-sm); padding: 6px 10px; font-size: var(--t-sm); background: #fff; }
.set-row:not(#\#){ display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 8px 0; }
.card:not(#\#){ background: #fff; border: 1px solid var(--line); border-radius: var(--r); }
.sess:not(#\#){ font-size: var(--t-sm); display: flex; gap: 12px; padding: 7px 0; border-top: 1px solid var(--line); align-items: center; }
.sess:first-of-type:not(#\#){ border-top: 0; }
.sess .cur:not(#\#){ font-family: var(--mono); font-size: 10px; border: 1px solid var(--line); color: var(--mut); padding: 1px 6px; border-radius: 4px; }
.audit-row:not(#\#){ display: flex; gap: 14px; padding: 7px 0; border-top: 1px solid var(--line); font-size: var(--t-sm); align-items: baseline; flex-wrap: wrap; }
.audit-row .when:not(#\#){ font-family: var(--mono); font-size: 10.5px; color: var(--mut); min-width: 150px; }
.audit-row .act:not(#\#){ font-family: var(--mono); font-size: 10.5px; background: var(--well); padding: 1px 7px; border-radius: 4px; }
.audit-row .det:not(#\#){ color: var(--ink); }
.hint:not(#\#){ display: flex; gap: 10px; background: var(--paper); border: 1px solid var(--line); border-left: 2px solid var(--ink);
        color: var(--ink); border-radius: var(--r-sm); padding: 9px 12px; font-size: var(--t-sm); margin: 8px 0; }
.dv-check:not(#\#){ display: flex; gap: 8px; align-items: center; font-size: var(--t-sm); }
.dv-tier:not(#\#){ padding: 12px 14px; }
.dv-adopt:not(#\#){ margin: 14px 0 4px; border-top: 1px solid var(--line); padding-top: 10px; }
.dv-adopt > summary:not(#\#){ cursor: pointer; font-size: var(--t-sm); color: var(--mut); }
.dv-adopt .hint:not(#\#){ margin-top: 10px; }
.dv-adopt .dv-check:not(#\#){ margin: 10px 0 4px; }
.dv-adopt input[type=text]:not(#\#),.dv-adopt input[type=password]:not(#\#){ font-family: var(--mono); font-size: var(--t-sm); }
/* Migration codes are one unbroken token; wrapping mid-token is what makes a partial copy
   possible, so they wrap on any character and never scroll sideways out of view. */
.dv-adopt textarea:not(#\#),.set-sec textarea.mono:not(#\#){ width: 100%; font-family: var(--mono); font-size: var(--t-xs); line-height: 1.5;
        overflow-wrap: anywhere; word-break: break-all; resize: vertical; }
.dv-adopt .dv-field:not(#\#){ margin-top: 12px; }
.dv-adopt .sub-mut:not(#\#){ margin-top: 6px; }
.dv-prose h2:not(#\#){ font-size: var(--t-md); margin: 22px 0 6px; }
.dv-prose p:not(#\#){ max-width: 72ch; font-size: var(--t-md); line-height: 1.65; color: var(--ink); }
/* ================================================================= forms (auth + modal) */
/* The retired signed-out frame. Same argument as `.app-shell`. */
.auth-wrap:not(#\#){ min-height: calc(100vh - var(--dv-banner-height, 0px)); display: flex; flex-direction: column; background: var(--paper);
             color: var(--ink); color-scheme: light;
             scrollbar-width: thin; scrollbar-color: var(--shell-scroll) transparent; }
.dv-auth-brand:not(#\#){ padding: 18px 22px; }
.auth-body:not(#\#){ flex: 1; display: flex; align-items: center; justify-content: center; padding: 40px 20px; }
.auth-card:not(#\#){ width: 420px; max-width: 100%; }
.auth-card h1:not(#\#){ font-size: var(--t-xl); letter-spacing: -.02em; margin: 0 0 8px; }
.auth-card .d:not(#\#){ color: var(--mut); font-size: var(--t-sm); margin: 0 0 22px; }
.auth-card form:not(#\#){ display: flex; flex-direction: column; gap: 10px; }
.auth-card input[type=text]:not(#\#),.auth-card input[type=email]:not(#\#),.auth-card input[type=password]:not(#\#),.auth-card input[type=search]:not(#\#){
  border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px 13px; font-size: var(--t-md); background: #fff; width: 100%; }
.auth-card input:focus:not(#\#){ outline: 0; border-color: var(--shell-accent); box-shadow: 0 0 0 3px rgba(79,79,208,.10); }
.auth-card .alt:not(#\#){ font-size: var(--t-sm); color: var(--mut); text-align: center; margin-top: 16px; }
.auth-card .alt a:not(#\#){ color: var(--ink); font-weight: 600; }
.auth-card .btn:not(#\#){ width: 100%; margin-top: 4px; }
.auth-card .set-row .btn:not(#\#),.auth-card .dv-inline .btn:not(#\#){ width: auto; }
.auth-foot:not(#\#){ padding: 18px; text-align: center; font-size: var(--t-sm); color: var(--mut); display: flex; gap: 8px; justify-content: center; align-items: center; flex-wrap: wrap; }
.dv-field:not(#\#){ display: flex; flex-direction: column; gap: 4px; margin: 4px 0 8px; }
.dv-field-l:not(#\#){ font-size: var(--t-sm); color: var(--mut); font-weight: 500; }
.dv-field-h:not(#\#){ font-size: 11.5px; color: var(--mut); }
.dv-field input[type=text]:not(#\#),.dv-field input[type=email]:not(#\#),.dv-field input[type=password]:not(#\#),.dv-field textarea:not(#\#),.dv-field select:not(#\#){
  border: 1px solid var(--line); border-radius: var(--r-sm); padding: 9px 12px; font-size: var(--t-md); background: #fff; width: 100%; }
.dv-field input:focus:not(#\#){ outline: 0; border-color: var(--shell-accent); box-shadow: 0 0 0 3px rgba(79,79,208,.10); }
.err:not(#\#){ background: #fff; border: 1px solid var(--line); border-left: 2px solid var(--ink); color: var(--ink);
       border-radius: var(--r-sm); padding: 9px 12px; font-size: var(--t-sm); margin: 8px 0; }
.dv-status:not(#\#){ min-height: 20px; }
.dv-create-progress:not(#\#){ margin: 12px 0 0; padding: 10px 12px; border-radius: var(--r-sm); background: var(--well); color: var(--ink); }
.dv-vault-progress:not(#\#){ display: flex; align-items: flex-start; gap: 14px; padding: 16px 18px; margin: 0 0 14px;
                     border: 1px solid var(--line); border-radius: var(--r); background: var(--paper); overflow: hidden; position: relative; }
.dv-vault-progress:not(#\#)::after{ content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 38%; background: var(--shell-accent);
                            animation: dv-progress 1.4s ease-in-out infinite alternate; }
.dv-vault-progress.failed:not(#\#)::after{ display: none; }
.dv-vault-progress-spin:not(#\#){ width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
                          border-radius: 50%; background: #fff; border: 1px solid var(--line); flex: none; }
.dv-vault-progress-copy:not(#\#){ min-width: 0; }
.dv-vault-progress-title:not(#\#){ display: block; font-size: var(--t-sm); }
.dv-vault-progress-message:not(#\#){ margin: 2px 0 0; color: var(--mut); font-size: var(--t-sm); }
.dv-vault-progress .btn:not(#\#){ margin-top: 10px; }
@media (prefers-reduced-motion: reduce){.dv-vault-progress:not(#\#)::after{ animation: none; width: 100%; opacity: .35; }}
.dv-meter:not(#\#){ margin: 2px 0 6px; }
.dv-meter-bar:not(#\#){ display: block; height: 5px; background: var(--well); border-radius: 999px; overflow: hidden; }
.dv-meter-bar span:not(#\#){ display: block; height: 100%; width: 0; background: var(--tag-amber-fg); transition: width .2s; }
.dv-meter[data-score="3"] .dv-meter-bar span:not(#\#),.dv-meter[data-score="4"] .dv-meter-bar span:not(#\#){ background: var(--tag-green-fg); }
.dv-meter-label:not(#\#){ display: block; font-size: 11.5px; color: var(--mut); margin-top: 4px; }
.dv-lockicon:not(#\#){ width: 52px; height: 52px; border-radius: 14px; background: var(--well); display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.dv-words:not(#\#){ display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.dv-word:not(#\#){ display: inline-flex; gap: 6px; align-items: baseline; background: #fff; border: 1px solid var(--line);
           border-radius: var(--r-sm); padding: 6px 10px; font-size: var(--t-md); font-weight: 600; }
.dv-word i:not(#\#){ font-style: normal; font-family: var(--mono); font-size: 10px; color: var(--mut); }
.dv-scan video:not(#\#){ width: 100%; border-radius: var(--r-sm); background: #000; margin-top: 8px; }
/* ================================================================= kit */
.dv-kitpreview:not(#\#){ background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px; margin: 12px 0; }
.dv-kit-row:not(#\#){ display: flex; gap: 12px; align-items: baseline; padding: 6px 0; border-top: 1px solid var(--line); font-size: var(--t-sm); flex-wrap: wrap; }
.dv-kit-row:first-child:not(#\#){ border-top: 0; }
.dv-sk:not(#\#){ font-size: var(--t-md); letter-spacing: .04em; }
.dv-kit-codes:not(#\#){ padding: 8px 0 2px; }
.dv-kit-codes summary:not(#\#){ cursor: pointer; font-size: var(--t-sm); color: var(--mut); }
.dv-codegrid:not(#\#){ list-style: decimal-leading-zero inside; columns: 2; column-gap: 24px; margin: 8px 0; padding: 0; }
.dv-codegrid li:not(#\#){ font-family: var(--mono); font-size: var(--t-sm); padding: 3px 0; break-inside: avoid; }
.dv-fp:not(#\#){ display: inline-flex; gap: 6px; align-items: baseline; cursor: pointer; }
.dv-fp-l:not(#\#){ font-size: 11px; color: var(--mut); }
.dv-fp-v:not(#\#){ font-family: var(--mono); font-size: 11.5px; background: var(--well); border: 1px solid var(--line); border-radius: 4px; padding: 1px 6px; }
.dv-fp--none:not(#\#){ color: var(--mut); font-size: 11.5px; }
/* ================================================================= banners */
.dv-bannerhost:not(#\#){ display: flex; flex-direction: column; gap: 8px; }
.dv-banner:not(#\#){ display: flex; gap: 12px; align-items: flex-start; border: 1px solid var(--line); border-left: 3px solid var(--ink);
             border-radius: var(--r-sm); padding: 11px 14px; margin: 10px 0; background: var(--paper); }
.dv-banner--warn:not(#\#){ background: var(--tag-amber-bg); border-color: #e0a03c66; border-left-color: var(--tag-amber-fg); color: var(--tag-amber-fg); }
.dv-banner--block:not(#\#){ background: var(--danger-bg); border-color: var(--danger-line); border-left-color: var(--danger-fg); color: var(--danger-fg); }
.dv-banner-title:not(#\#){ display: block; font-size: var(--t-sm); }
.dv-banner-text:not(#\#){ margin: 4px 0 0; font-size: var(--t-sm); }
.dv-banner-detail:not(#\#){ margin-top: 8px; }
.dv-banner-acts:not(#\#){ display: flex; gap: 8px; margin-top: 10px; }
.dv-banner .dv-icon:not(#\#){ color: currentColor; }
/* ================================================================= connectivity chooser */
.dv-conn:not(#\#){ display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 8px 0; }
.dv-conn-card:not(#\#){ display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--line); border-radius: var(--r);
                background: #fff; padding: 12px 14px; cursor: pointer; }
.dv-conn-card.on:not(#\#){ border-color: var(--ink); box-shadow: 0 0 0 2px rgba(26,27,30,.06); }
.dv-conn-card input:not(#\#){ margin-top: 3px; }
.dv-conn-head:not(#\#){ display: flex; gap: 8px; align-items: center; }
.dv-conn-title:not(#\#){ font-weight: 600; font-size: var(--t-md); }
.dv-conn-sum:not(#\#){ margin: 6px 0 4px; font-size: var(--t-sm); color: var(--ink); }
.dv-conn-details:not(#\#){ margin: 6px 0 0; padding-left: 18px; font-size: 11.5px; color: var(--mut); }
.dv-conn-details li:not(#\#){ margin: 3px 0; }
@media (max-width: 720px){.dv-conn:not(#\#){ grid-template-columns: 1fr; }}
/* ================================================================= modal + toast */
/* `startPairingWatch` (components/PairingApprove.jsx) mounts its own root on <body> so a pairing
   request survives navigation — which puts the only retired frame that is NOT inside
   `.app-shell` or `.auth-wrap` here. It draws a shell.css `<Modal>`, so it needs the same light
   ink and the same light scheme; without them its fields and its scrollbar would be the dark
   document's while the dialog itself is white. */
.dv-pairing-watch:not(#\#){ color: var(--ink); color-scheme: light;
                    scrollbar-width: thin; scrollbar-color: var(--shell-scroll) transparent; }
.modal-back:not(#\#){ position: fixed; inset: 0; background: rgba(12,13,16,.45); z-index: 90; display: none;
              align-items: flex-start; justify-content: center; padding: 9vh 16px; backdrop-filter: blur(3px);
              overflow-y: auto; }
.modal-back.open:not(#\#){ display: flex; }
.modal:not(#\#){ background: #fff; border-radius: 12px; width: 520px; max-width: 100%; box-shadow: 0 24px 70px rgba(0,0,0,.35);
         max-height: 82vh; overflow: hidden auto; }
.modal-wide:not(#\#){ width: 660px; }
.modal-h:not(#\#){ display: flex; justify-content: space-between; align-items: center; padding: 16px 22px 0; }
.modal-h b:not(#\#){ font-size: var(--t-md); }
.modal-h button:not(#\#){ background: none; border: 0; font-size: 17px; color: var(--mut); }
.dv-modal-body:not(#\#){ padding: 12px 22px 6px; display: flex; flex-direction: column; gap: 10px; }
.dv-modal-body input[type=text]:not(#\#),.dv-modal-body input[type=email]:not(#\#),.dv-modal-body input[type=password]:not(#\#){
  border: 1px solid var(--line); border-radius: var(--r-sm); padding: 9px 12px; font-size: var(--t-md); width: 100%; }
.dv-modal-acts:not(#\#){ display: flex; gap: 8px; justify-content: flex-end; padding: 12px 22px 18px; }
.toast:not(#\#){ position: fixed; bottom: 20px; right: 20px; transform: translateY(80px); background: var(--ink);
         color: #fff; border-radius: var(--r-sm); padding: 9px 16px; font-size: var(--t-sm); opacity: 0;
         transition: all .22s; z-index: 99; box-shadow: 0 10px 30px rgba(0,0,0,.25); max-width: min(90vw, 420px); }
.toast.show:not(#\#){ transform: translateY(0); opacity: 1; }
.toast:not(.show):not(#\#){ pointer-events: none; }
.toast-action:not(#\#){ margin-left: 12px; background: none; border: 0; padding: 0; color: inherit; font: inherit;
                font-weight: 600; text-decoration: underline; cursor: pointer; }
/* ================================================================= dropzone */
.dropzone:not(#\#){ margin: 12px 0; border: 1.5px dashed var(--line); border-radius: var(--r); padding: 28px 20px;
            text-align: center; color: var(--mut); font-size: var(--t-sm); transition: border-color .15s, background .15s; }
.dropzone.over:not(#\#){ border-color: var(--shell-accent); background: #f5f5fc; }
.dropzone b:not(#\#){ color: var(--ink); }
.dropzone a:not(#\#){ color: var(--ink); text-decoration: underline; }
.dropzone .formats:not(#\#){ font-family: var(--mono); font-size: 10.5px; margin-top: 10px; }
/* ================================================================= print (Emergency Kit) */
#dv-print:not(#\#){ display: none; }
@media print{body.dv-printing > *:not(#dv-print):not(#\#){ display: none !important; }body.dv-printing #dv-print:not(#\#){ display: block !important; }/* The Emergency Kit prints on paper. `#dv-print` is portalled onto <body>, outside every
     retired frame, so the light scheme is re-declared here rather than inherited. */body:not(#\#){ background: #fff; color-scheme: light; }.kit-print:not(#\#){ color: #111; font-family: var(--sans); padding: 24px; }.kit-print h1:not(#\#){ font-size: 22px; margin: 0 0 4px; }.kit-print h2:not(#\#){ font-size: 14px; margin: 22px 0 6px; text-transform: uppercase; letter-spacing: .08em; }.kit-print .kit-sub:not(#\#),.kit-print .kit-meta:not(#\#),.kit-print .kit-help:not(#\#){ color: #555; font-size: 11px; }.kit-print .kit-mono:not(#\#){ font-family: var(--mono); font-size: 15px; letter-spacing: .04em; }.kit-print .kit-small:not(#\#){ font-size: 9px; }.kit-print .kit-codes:not(#\#){ columns: 2; font-family: var(--mono); font-size: 12px; }.kit-print .kit-codes li:not(#\#){ padding: 3px 0; }/* Mirrors the PDF's Secret Key block: help text left, QR in a fixed track on the right. The
     track is a flex basis rather than a float so the help text cannot reflow under the QR. */.kit-print .kit-skrow:not(#\#){ display: flex; align-items: flex-start; gap: 6mm; }.kit-print .kit-skrow .kit-help:not(#\#){ flex: 1 1 auto; margin: 0; }.kit-print .kit-qr:not(#\#){ flex: 0 0 42mm; text-align: center; }.kit-print .kit-qr canvas:not(#\#){ width: 42mm; height: 42mm; image-rendering: pixelated; }.kit-print .kit-qrcap:not(#\#){ color: #555; font-size: 9px; margin: 2px 0 0; }.kit-print .kit-foot:not(#\#){ margin-top: 24px; border: 1px solid #999; padding: 10px 12px; font-size: 10px; }}
/* ================================================================= responsive */
@media (max-width: 900px){.side:not(#\#){ display: none; }.topbar:not(#\#){ display: flex; align-items: center; justify-content: space-between; gap: 10px;
            padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--paper); position: sticky; top: 0; z-index: 5; }.topbar .logo:not(#\#){ font-size: 14px; }.topbar-right:not(#\#){ display: flex; gap: 8px; align-items: center; }.topbar-bell:not(#\#){ position: relative; display: inline-flex; align-items: center; justify-content: center;
                 width: 34px; height: 34px; border-radius: var(--r-sm); color: var(--mut); border: 0; background: none; }.topbar-bell:hover:not(#\#){ background: var(--hover); color: var(--ink); }.app-main:not(#\#){ padding: 18px 16px 120px; }.app-foot:not(#\#){ display: none; }.mobile-tabs:not(#\#){ display: flex; position: fixed; bottom: 0; left: 0; right: 0; background: var(--paper);
                 border-top: 1px solid var(--line); z-index: 20; padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); }.mobile-tab:not(#\#){ flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 10.5px; color: var(--mut); padding: 4px 0; }.set-grid:not(#\#){ grid-template-columns: minmax(0, 1fr); gap: 14px; }.set-nav:not(#\#){ position: static; flex-direction: row; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 2px 16px 6px; }.set-nav a:not(#\#){ flex: none; white-space: nowrap; padding: 8px 13px; color: var(--ink); border: 1px solid var(--line); border-radius: 999px; background: #fff; }.h-page:not(#\#){ font-size: 19px; }.doc-row:not(#\#){ flex-wrap: wrap; }.doc-row .right:not(#\#){ margin-left: 36px; flex-wrap: wrap; }}
/* ================================================================= document page
   Ported from the box app's docvault.css (deleted with the box in ADR 0006 step 8b) so the
   per-document page looks like the page it replaces: breadcrumb, Notion-style property table,
   hairline field table, hairline linked lists, and the fullscreen image lightbox. */
.crumb:not(#\#){ display: flex; gap: 8px; align-items: center; font-size: var(--t-sm); color: var(--mut); margin-bottom: 2px; }
.crumb a:hover:not(#\#){ color: var(--ink); }
.doc-head:not(#\#){ margin: 2px 0 12px; }
.doc-titlerow:not(#\#){ display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.doc-titlerow h1:not(#\#){ font-size: var(--t-xl); letter-spacing: -.02em; margin: 0; font-weight: 650; }
.doc-titlerow .owner:not(#\#){ font-size: var(--t-sm); }
.doc-actions:not(#\#){ margin-left: auto; display: flex; gap: 6px; align-items: center; }
.doc-lede:not(#\#){ color: var(--ink); max-width: 72ch; margin: 6px 0 0; font-size: var(--t-md); }
.doc-lede:empty:not(#\#){ display: none; }
.typepill:not(#\#){ font-family: var(--mono); font-size: var(--t-xs); background: var(--well); border: 1px solid var(--line);
            padding: 2px 7px; border-radius: 4px; color: var(--mut); white-space: nowrap; }
/* the primary person a document is of — titles are type-only, so the owner rides alongside */
.owner:not(#\#){ font-size: var(--t-xs); color: var(--ink); white-space: nowrap; }
.owner:not(#\#)::before{ content: "◍"; margin-right: 4px; color: var(--mut); font-size: .9em; }
.statdot:not(#\#){ width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; }
.statdot.filed:not(#\#){ background: var(--tag-green-fg); }
.statdot.review:not(#\#){ background: var(--tag-amber-fg); }
.statdot.processing:not(#\#){ background: transparent; border: 1.5px solid var(--mut); animation: pulse 1.2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce){.statdot.processing:not(#\#){ animation: none; }}
/* quiet (tertiary) button — text only until hovered */
.btn-quiet:not(#\#){ background: none; border: 1px solid transparent; color: var(--mut); font-weight: 500; }
.btn-quiet:hover:not(#\#){ color: var(--ink); background: var(--hover); }
/* "Needs review" banner: amber-keyed to match the status dot */
.hint.review:not(#\#){ align-items: flex-start; background: var(--tag-amber-bg); border-color: #e0a03c66;
               border-left-color: var(--tag-amber-fg); }
.hint.review .ic:not(#\#){ color: var(--tag-amber-fg); font-weight: 700; }
.dv-doc-reviewwhy:not(#\#){ margin-top: 2px; }
/* callouts: state notices under the head */
.callout:not(#\#){ display: flex; gap: 12px; align-items: flex-start; border: 1px solid var(--line);
           background: var(--paper); border-radius: var(--r); padding: 10px 12px; margin: 10px 0;
           font-size: var(--t-sm); }
.callout .ico:not(#\#){ flex: none; width: 22px; height: 22px; border-radius: 6px; background: #fff;
                border: 1px solid var(--line); color: var(--mut); display: flex;
                align-items: center; justify-content: center; font-size: 12px; }
.callout .callout-body:not(#\#){ min-width: 0; flex: 1; color: var(--ink); }
.callout .callout-body b:not(#\#){ font-weight: 600; }
.callout .callout-body p:not(#\#){ margin: 2px 0 0; color: var(--mut); }
.callout .callout-act:not(#\#){ display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.callout.info:not(#\#){ background: var(--tag-blue-bg); border-color: #c9d4ee; }
.callout.info .ico:not(#\#){ color: var(--tag-blue-fg); border-color: transparent; background: transparent; }
/* the viewer frame: a bar naming the file, then the decrypted preview */
.viewer:not(#\#){ background: var(--well); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; margin-bottom: 22px; }
.viewer .vbar:not(#\#){ display: flex; justify-content: space-between; padding: 7px 12px; font-family: var(--mono);
                font-size: 10.5px; color: var(--mut); border-bottom: 1px solid var(--line); background: #fff; }
.viewer .vbar-r:not(#\#){ display: flex; align-items: center; gap: 12px; }
.viewer .vnone:not(#\#){ padding: 40px; text-align: center; color: var(--mut); background: #fff; font-family: var(--sans); font-size: var(--t-sm); }
.dv-doc-stage:not(#\#){ background: #fff; padding: 14px; text-align: center; max-height: min(82vh, 900px); overflow: auto; }
.dv-doc-stage .dv-viewer-img:not(#\#){ display: inline-block; width: auto; max-width: 100%; max-height: 360px;
                               border-radius: var(--r-sm); box-shadow: 0 1px 6px rgba(0,0,0,.10); }
.dv-doc-stage .dv-viewer-text:not(#\#){ text-align: left; max-height: 420px; overflow: auto; margin: 0; }
.dv-doc-stagemsg:not(#\#){ margin: 0; padding: 26px 0; }
.dv-doc-expandable:not(#\#){ cursor: zoom-in; }
.dv-doc-expandable:focus-visible:not(#\#){ outline: 2px solid var(--ink); outline-offset: -2px; }
@media (max-width: 640px){.dv-doc-stage .dv-viewer-img:not(#\#){ max-height: 240px; }}
/* page tabs for multi-attachment documents (front/back, extra pages) */
.page-tabs:not(#\#){ display: flex; gap: 6px; flex-wrap: wrap; padding: 10px 12px 0; background: #fff; }
.page-tab:not(#\#){ border: 1px solid var(--line); background: #fff; color: var(--mut); border-radius: 999px;
            padding: 4px 14px; font-size: var(--t-xs); font-weight: 600; cursor: pointer;
            transition: background .12s ease, color .12s ease; }
.page-tab:hover:not(#\#){ color: var(--ink); }
.page-tab.active:not(#\#){ background: var(--ink); border-color: var(--ink); color: #fff; }
.page-tab:focus-visible:not(#\#){ outline: 2px solid var(--ink); outline-offset: 2px; }
/* property table (a Notion-style dl of key/value rows) */
.props:not(#\#){ border: 1px solid var(--line); border-radius: var(--r); background: #fff; margin: 12px 0 0; overflow: hidden; }
.prop:not(#\#){ display: flex; align-items: center; gap: 14px; padding: 6px 12px; border-top: 1px solid var(--line);
        font-size: var(--t-sm); min-height: 36px; }
.prop:first-child:not(#\#){ border-top: 0; }
.prop dt:not(#\#){ flex: none; width: 92px; color: var(--mut); font-family: var(--mono); font-size: 10.5px;
           letter-spacing: .08em; text-transform: uppercase; }
.prop dd:not(#\#){ margin: 0; min-width: 0; flex: 1; display: flex; align-items: center; gap: 8px;
           flex-wrap: wrap; color: var(--ink); overflow-wrap: anywhere; }
.vault-chip:not(#\#){ display: inline-flex; align-items: center; gap: 7px; font-weight: 550; }
.vault-chip .sq:not(#\#){ width: 9px; height: 9px; border-radius: 3px; background: var(--ink); flex: none; }
.statline:not(#\#){ display: inline-flex; align-items: center; gap: 8px; }
/* extracted fields as a table: label · value · row actions */
.ftable:not(#\#){ border: 1px solid var(--line); border-radius: var(--r); background: #fff; margin-top: 8px; overflow: hidden; }
.ftable .frow:not(#\#){ display: grid; grid-template-columns: minmax(120px, 30%) minmax(0, 1fr) auto; align-items: center;
                gap: 12px; padding: 8px 12px; border-top: 1px solid var(--line); font-size: var(--t-sm);
                min-height: 38px; background: #fff; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ftable .frow:first-child:not(#\#){ border-top: 0; }
.ftable .frow:hover:not(#\#){ background: var(--hover); }
.ftable .frow.copied:not(#\#){ box-shadow: inset 3px 0 0 var(--ink); }
.ftable .frow .l:not(#\#){ color: var(--mut); }
.ftable .frow .v:not(#\#){ font-family: var(--mono); font-size: var(--t-sm); font-weight: 500; word-break: break-word; }
.ftable .frow .fact:not(#\#){ display: flex; gap: 8px; align-items: center; justify-self: end;
                      font-size: var(--t-xs); color: var(--mut); white-space: nowrap; }
.ftable .frow .reveal-field:not(#\#){ border: 0; background: none; padding: 2px 4px; margin: 0; cursor: pointer;
                              font: inherit; font-size: var(--t-xs); color: var(--mut); text-decoration: underline; }
.ftable .frow .reveal-field:hover:not(#\#){ color: var(--ink); }
.ftable .ftable-empty:not(#\#){ padding: 14px 12px; color: var(--mut); font-size: var(--t-sm); }
.ftable-foot:not(#\#){ display: flex; justify-content: space-between; gap: 12px; align-items: center;
               font-size: var(--t-xs); color: var(--mut); margin: 6px 2px 0; }
/* hairline lists of what a document is filed in / linked to */
.linked:not(#\#){ display: flex; flex-direction: column; gap: 0; border: 1px solid var(--line); border-radius: var(--r);
          background: #fff; overflow: hidden; margin-top: 8px; }
.linked .sub-mut:not(#\#){ display: flex; gap: 10px; align-items: center; border-top: 1px solid var(--line);
                   padding: 7px 12px; background: #fff; }
.linked b:not(#\#){ font-size: var(--t-sm); font-weight: 550; }
.linked .k:not(#\#){ font-size: 11.5px; color: var(--mut); }
.linked .ic:not(#\#){ width: 24px; height: 24px; font-family: var(--mono); font-size: var(--t-xs); border-radius: 5px;
              background: var(--well); color: var(--mut); display: flex; align-items: center; justify-content: center; flex: none; }
.linked-row:not(#\#){ display: flex; align-items: center; gap: 10px; padding: 7px 12px;
              border-top: 1px solid var(--line); background: #fff; }
.linked-row:first-child:not(#\#),.linked .sub-mut:first-child:not(#\#){ border-top: 0; }
/* the document's note */
.panel:not(#\#){ background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px; margin: 20px 0 8px; }
.dv-doc-note > summary:not(#\#){ cursor: pointer; font-weight: 600; font-size: var(--t-sm); }
.dv-doc-notetext:not(#\#){ margin: 10px 0 0; font-size: var(--t-sm); max-width: 72ch; }
/* fullscreen zoomable lightbox */
body.lb-lock:not(#\#){ overflow: hidden; }
.lightbox:not(#\#){ position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center;
            background: rgba(8,10,14,.92); overscroll-behavior: contain; }
.lightbox[hidden]:not(#\#){ display: none; }
.lb-img:not(#\#){ max-width: 96vw; max-height: 92vh; touch-action: none; will-change: transform;
          transform-origin: center center; user-select: none; -webkit-user-select: none; -webkit-user-drag: none; }
.lb-close:not(#\#){ position: fixed; top: max(14px, env(safe-area-inset-top)); right: 16px; z-index: 1001;
            width: 44px; height: 44px; border: 0; border-radius: 999px; cursor: pointer;
            font-size: 20px; line-height: 1; color: #fff; background: rgba(255,255,255,.14);
            display: flex; align-items: center; justify-content: center; }
.lb-close:hover:not(#\#){ background: rgba(255,255,255,.26); }
.lb-close:focus-visible:not(#\#){ outline: 2px solid #fff; outline-offset: 2px; }
@media (max-width: 860px){.prop:not(#\#){ align-items: flex-start; flex-direction: column; gap: 4px; }.prop dt:not(#\#){ width: auto; }.ftable .frow:not(#\#){ grid-template-columns: minmax(0, 1fr) auto; row-gap: 2px; }.ftable .frow .l:not(#\#){ grid-column: 1 / -1; }}