/* =============================================================================
   Indago — flagship marketing site
   site.css — shared chrome + marketing components, built on tokens.css
   Binds the Indago design system (colors_and_type.css → tokens.css) into a
   responsive, multi-page marketing surface. Brand layer = DM Sans + Raleway.
   ============================================================================= */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 76px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* site-wide page scrollbar — hidden (scrolling still works) */
html { scrollbar-width: none; -ms-overflow-style: none; }
html::-webkit-scrollbar { width: 0; height: 0; display: none; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
p { text-wrap: pretty; }
h1, h2, h3, h4 { text-wrap: balance; }
::selection { background: rgba(37,99,235,.16); }

/* ── Type roles ─────────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5 { font-family: var(--font-display); color: var(--fg-strong);
  font-weight: var(--weight-semibold); line-height: var(--leading-tight); margin: 0; }
.display { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em;
  line-height: 1.04; }
.eyebrow { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--accent); font-weight: 500; margin: 0; display: inline-flex;
  align-items: center; gap: 8px; }
.eyebrow::before { content: ""; width: 18px; height: 1px; background: var(--accent); opacity: .6; }
[data-theme="dark"] .eyebrow { color: var(--indigo-400); }
[data-theme="dark"] .eyebrow::before { background: var(--indigo-400); }
.lead { font-size: var(--text-lg); line-height: 1.5; color: var(--fg-muted); max-width: 60ch; margin: 0;
  font-weight: 400; }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.tnum { font-variant-numeric: tabular-nums; }
/* The `font:` shorthand on code-bearing rows resets numeric variant — restore
   tabular figures so claim IDs, CTD targets, and source coordinates stay aligned
   now that mono is folded into DM Sans. */
.gap-card .gtgt, .src-item .sn, .src-item .scoord, .flow .step .n,
.foot-bottom .meta, .cite, .ht-col-h, .src-rail .srh,
.gap-card .sev { font-variant-numeric: tabular-nums; }

/* ── Layout primitives ──────────────────────────────────────────────────── */
.wrap { width: 100%; max-width: var(--container-wide); margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 40px); }
.wrap-prose { max-width: var(--container-prose); }
.wrap-content { max-width: var(--container-content); }
.section { padding-block: clamp(56px, 8vw, 104px); }
.section-sm { padding-block: clamp(40px, 6vw, 64px); }
.divide { border-top: 1px solid var(--border); }
.stack { display: flex; flex-direction: column; gap: var(--space-5); }
.grid { display: grid; gap: var(--space-6); }
.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 880px) { .cols-2, .cols-3, .cols-4 { grid-template-columns: 1fr; } }
@media (max-width: 880px) { .cols-4.keep-2, .cols-3.keep-2 { grid-template-columns: 1fr 1fr; } }
/* Below ~square card width, drop keep-2 to a single full-width column */
@media (max-width: 480px) { .cols-4.keep-2, .cols-3.keep-2 { grid-template-columns: 1fr; } }
/* Product CTA: stack the pull line + button full-width on narrow screens instead of cramming them left */
@media (max-width: 480px) {
  .howto-cta { flex-direction: column; align-items: stretch !important; text-align: center; gap: 14px !important; }
  .howto-cta .pull { max-width: none !important; }
  .howto-cta .btn { justify-content: center; }
}

/* ── Buttons ────────────────────────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px;
  border-radius: var(--radius-sm); border: 1px solid transparent; font-family: var(--font-body);
  font-size: var(--text-base); font-weight: var(--weight-semibold); letter-spacing: -0.005em;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease); white-space: nowrap; }
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn-ghost { background: transparent; color: var(--fg); border-color: var(--border-strong); }
.btn-ghost:hover { border-color: var(--fg-muted); background: var(--surface-hover); }
.btn-arrow .ar { transition: transform var(--dur) var(--ease); }
.btn-arrow:hover .ar { transform: translateX(3px); }
[data-theme="dark"] .btn-ghost { color: var(--fg); border-color: var(--border-strong); }
[data-theme="dark"] .btn-ghost:hover { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.28); }
.btn-lg { padding: 14px 22px; font-size: var(--text-md); }

/* ── Top nav ────────────────────────────────────────────────────────────── */
.nav { position: sticky; top: 0; z-index: 50; background: color-mix(in oklab, var(--surface) 82%, transparent);
  backdrop-filter: saturate(180%) blur(16px); border-bottom: 1px solid var(--border); }
.nav-inner { display: flex; align-items: center; gap: var(--space-6); height: 60px; }
.brand { display: inline-flex; align-items: center; color: var(--fg-strong); }
.brand .wm { height: 30px; width: auto; display: block; }
.nav .brand .wm { height: 46px; }
.foot .brand .wm { height: 34px; }
/* Full-bleed chrome: nav + footer span the full viewport (no centered container cap). */
.nav > .wrap, .foot > .wrap { max-width: none; }
/* Only the nav wordmark bleeds flush to the viewport edge; the footer mark left-aligns
   with the blurb paragraph beneath it inside its grid column. */
.nav .brand { margin-left: calc(-1 * clamp(20px, 5vw, 40px)); }
/* Theme-aware wordmark swap: black mark on light chrome, white mark on dark chrome */
.brand .wm-on-dark { display: none; }
[data-theme="dark"] .brand .wm-on-light { display: none; }
[data-theme="dark"] .brand .wm-on-dark { display: block; }
.brand .orb { width: 24px; height: 24px; border-radius: 50%;
  background: linear-gradient(90deg, var(--grad-logo-1), var(--grad-logo-2)); flex-shrink: 0; }
.nav-links { display: flex; align-self: stretch; align-items: stretch; gap: 4px; margin-left: 12px; }
.nav-links a { position: relative; display: inline-flex; align-items: center; padding: 8px 12px;
  font-size: var(--text-base); font-weight: 500;
  color: var(--fg-muted); border-radius: 0; transition: color var(--dur) var(--ease),
    background var(--dur) var(--ease); }
.nav-links a:hover { color: var(--fg-strong); background: var(--surface-hover); }
.nav-links a.active { color: var(--fg-strong); }
.nav-links a.active::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px;
  height: 2px; background: var(--accent); }
.nav-cta { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.theme-toggle { width: 38px; height: 38px; flex-shrink: 0; display: inline-flex; align-items: center;
  justify-content: center; border: none; border-radius: var(--radius-sm);
  background: transparent; color: var(--fg-muted);
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease); }
.theme-toggle:hover { color: var(--fg-strong); }
.theme-toggle:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle .ic-moon { display: block; }
.theme-toggle .ic-sun { display: none; }
[data-theme="dark"] .theme-toggle .ic-moon { display: none; }
[data-theme="dark"] .theme-toggle .ic-sun { display: block; }
.nav-toggle { display: none; margin-left: auto; width: 40px; height: 40px; border: 1px solid var(--border);
  border-radius: var(--radius-sm); background: var(--surface); align-items: center; justify-content: center; }
.nav-toggle svg { width: 18px; height: 18px; color: var(--fg); }
@media (max-width: 860px) {
  .nav-links, .nav-cta .demo-soft { display: none; }
  .nav-toggle { display: inline-flex; }
  .nav-cta { margin-left: auto; }
}
/* mobile drawer */
.drawer { position: fixed; inset: 60px 0 auto 0; z-index: 49; background: var(--surface);
  border: 1px solid var(--border); border-top: none; border-radius: 0 0 16px 16px;
  box-shadow: 0 12px 28px rgba(0,0,0,.10); overflow: hidden;
  transform: translateY(-12px); opacity: 0; pointer-events: none;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); padding: 8px clamp(20px,5vw,40px) 14px; }
.drawer.open { transform: none; opacity: 1; pointer-events: auto; }
.drawer a { display: block; padding: 13px 4px; font-size: var(--text-md); font-weight: 500; color: var(--fg);
  border-bottom: 1px solid var(--border-divider); transition: color var(--dur) var(--ease); }
.drawer a:last-child { border-bottom: none; }
.drawer a.active { color: var(--accent); font-weight: 600; }
.drawer .btn { width: 100%; justify-content: center; margin-top: 14px; }

/* ── Footer ─────────────────────────────────────────────────────────────── */
.foot { background: var(--surface); border-top: 1px solid var(--border); }
.foot-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--space-6);
  padding-block: var(--space-9) var(--space-7); }
@media (max-width: 760px) { .foot-top { grid-template-columns: 1fr 1fr; row-gap: var(--space-7); } }
.foot .brand { margin-bottom: 14px; }
.foot-blurb { font-size: var(--text-base); color: var(--fg-muted); max-width: 34ch; }
.foot col, .foot-col { display: flex; flex-direction: column; gap: 10px; }
.foot-col .h { font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--fg-faint); margin-bottom: 4px; }
.foot-col a { font-size: var(--text-base); color: var(--fg-muted); transition: color var(--dur) var(--ease); }
.foot-col a:hover { color: var(--fg-strong); }
.foot-bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  padding-block: var(--space-5); border-top: 1px solid var(--border); }
.foot-bottom .meta { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--fg-faint); }

/* ── Chips / pills / badges ─────────────────────────────────────────────── */
.chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; font-size: var(--text-2xs);
  font-weight: 500; border-radius: var(--radius-pill); background: var(--ink-100); color: var(--ink-700);
  white-space: nowrap; }
.chip-accent { background: var(--accent-tint); color: var(--accent); }
.chip-amber { background: var(--amber-100); color: var(--amber-800); }
.chip-green { background: var(--green-100); color: var(--green-700); font-weight: 700; }
.chip-shipped { background: var(--green-100); color: var(--green-700); font-weight: 600; }
.chip-dot::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }

/* ── Cards ──────────────────────────────────────────────────────────────── */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: var(--space-6); transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
    transform var(--dur) var(--ease); }
.card-pad-lg { padding: var(--space-7); }
.card-hover:hover { border-color: var(--border-strong); box-shadow: var(--shadow-xs); }

/* ── Section heading block ──────────────────────────────────────────────── */
.sec-head { max-width: 60ch; margin-bottom: var(--space-8); }
.sec-head .eyebrow { margin-bottom: 16px; }
.sec-head h2 { font-size: var(--text-3xl); letter-spacing: -0.02em; line-height: 1.08; margin-bottom: 16px; }
.sec-head .lead { font-size: var(--text-lg); }
.sec-head.center { max-width: 80ch; margin-inline: auto; text-align: center; }
.sec-head.center .eyebrow { justify-content: center; }
.sec-head.center h2 { white-space: nowrap; font-size: clamp(1.9rem, 3.2vw, 2.75rem); }
.sec-head.center h2 .hb { display: inline; }
@media (max-width: 760px) {
  .sec-head.center h2 { white-space: normal; text-wrap: pretty; font-size: var(--text-2xl); }
  .sec-head.center h2 .hb { display: none; }
}
.sec-head.center .lead { max-width: 64ch; margin-inline: auto; }

/* =============================================================================
   PRODUCT-SURFACE MINI COMPONENTS — authentic Indago app UI, rendered inside
   marketing sections. These deliberately use the PRODUCT language: native
   system stack, dense 11–14px type, blue-600 actions, hairline borders. This
   is what the real app looks like (see source_examples / Indago Prototype).
   ============================================================================= */
.surface { font-family: var(--font-body); background: var(--white); border: 1px solid var(--ink-200);
  border-radius: var(--radius-md); overflow: hidden; box-shadow: 0 24px 60px -24px rgba(17,24,39,.18);
  color: var(--ink-900); }
[data-theme="dark"] .surface { box-shadow: 0 32px 80px -28px rgba(0,0,0,.6); }

/* Widget stage — frameless replacement for the old container card. The widget
   takes the full content width and the primary surface floats on the home-page
   drop shadow (see index.html .prov .trace-widget) instead of sitting in a card. */
.widget-stage { position: relative; }
.widget-lift { box-shadow: 0 30px 70px -34px rgba(16,22,48,.42); }
[data-theme="dark"] .widget-lift { box-shadow: 0 36px 80px -32px rgba(0,0,0,.6); }

/* app chrome bar (mini top-nav) */
.app-bar { display: flex; align-items: center; gap: 14px; height: 46px; padding: 0 14px;
  border-bottom: 1px solid var(--ink-150); background: #fff; }
.app-bar .ab-brand { display: inline-flex; align-items: center; gap: 7px; font: 700 13px/1 var(--font-body);
  color: var(--ink-950); letter-spacing: -0.01em; }
.app-bar .ab-orb { width: 18px; height: 18px; border-radius: 50%;
  background: linear-gradient(90deg, var(--grad-logo-1), var(--grad-logo-2)); }
.app-tabs { display: flex; gap: 2px; align-self: stretch; align-items: stretch; min-width: 0; flex-shrink: 1; overflow: hidden; }
.app-tabs .t { padding: 0 10px; font: 500 12.5px/1 var(--font-body); color: var(--ink-500);
  border-radius: var(--radius-xs); position: relative; display: flex; align-items: center; }
.app-tabs .t.on { color: var(--ink-900); }
/* underline sits exactly on the bar's 1px bottom border, not floating below it */
.app-tabs .t.on::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: -1px; height: 2px;
  background: var(--blue-600); }
.app-bar .ab-right { margin-left: auto; display: flex; align-items: center; gap: 6px; flex-shrink: 0; padding-left: 4px; padding-right: 2px; }
.app-ava { width: 22px; height: 22px; border-radius: 50%; overflow: hidden; flex: none;
  background: linear-gradient(135deg,#93c5fd,#2563eb); color: #fff; font: 700 10px/1 var(--font-body);
  box-shadow: 0 0 0 1.5px var(--white), 0 1px 4px rgba(0,0,0,.22);
  display: flex; align-items: center; justify-content: center; }
.app-ava img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* app-bar icon buttons (notifications, settings) */
.ab-ic { width: 28px; height: 28px; border-radius: var(--radius-sm); border: none; background: transparent;
  color: var(--ink-500); cursor: pointer; position: relative; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s var(--ease), color .15s var(--ease); }
.ab-ic:hover { background: var(--ink-100); color: var(--ink-900); }
.ab-ic.on { color: var(--blue-600); background: var(--blue-50); }
.ab-ic svg { width: 17px; height: 17px; }
.ab-badge { position: absolute; top: 0; right: 0; min-width: 14px; height: 14px; padding: 0 3px;
  border-radius: 999px; background: var(--red-500); color: #fff; font: 700 9px/14px var(--font-body);
  text-align: center; box-shadow: 0 0 0 2px var(--white); }
.ab-badge[hidden] { display: none; }
.ab-badge.pop { animation: badgePop .42s var(--ease-spring); }
/* modern notification dot variant — no counter, just a presence dot */
.ab-badge--dot { min-width: 8px; width: 8px; height: 8px; padding: 0; font-size: 0;
  top: 2px; right: 2px; background: var(--red-500); box-shadow: 0 0 0 2px var(--white); }
@keyframes badgePop { 0% { transform: scale(0); } 60% { transform: scale(1.18); } 100% { transform: scale(1); } }
/* collab notification bell — never fills on hover OR when the popout is open;
   only the bell stroke responds (darkens on hover, accent when open) */
#collab [data-cl-notif-btn]:hover { background: transparent; color: var(--ink-900); }
#collab [data-cl-notif-btn].on,
#collab [data-cl-notif-btn].on:hover { background: transparent; color: var(--blue-600); }

/* notification dropdown (anchored in .gap-editor so it escapes .surface clip) */
.notif-pop { position: absolute; top: 28px; right: 8px; width: 296px; z-index: 30;
  background: var(--white); border: 1px solid var(--ink-200);
  border-radius: var(--radius-md);
  box-shadow: 0 18px 50px -12px rgba(17,24,39,.34); overflow: hidden; transform-origin: top right; }
.notif-pop[hidden] { display: none; }
.notif-pop { animation: notifIn .18s var(--ease-out); }
@keyframes notifIn { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } }
.notif-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px;
  border-bottom: 1px solid var(--ink-150); }
.notif-head .nh-title { font: 700 14px/1 var(--font-display); color: var(--ink-950); }
.notif-head .nh-clear { font: 600 12px/1 var(--font-body); color: var(--blue-600); background: none;
  border: none; cursor: pointer; padding: 0; }
.notif-list { max-height: 330px; overflow-y: auto; }
.notif-item { display: flex; gap: 10px; padding: 11px 14px 11px 18px; position: relative;
  border-bottom: 1px solid var(--ink-100); }
.notif-item:last-child { border-bottom: none; }
.notif-item.unread { background: var(--blue-50); }
.notif-item.unread::before { content: ""; position: absolute; left: 7px; top: 18px; width: 6px; height: 6px;
  border-radius: 50%; background: var(--blue-600); }
.notif-ava { flex: none; width: 34px; height: 34px; border-radius: 50%; color: #fff;
  font: 700 12px/1 var(--font-body); display: flex; align-items: center; justify-content: center; }
.notif-body { min-width: 0; }
.notif-body .nb-line { font: 400 13px/1.45 var(--font-body); color: var(--ink-900); margin: 0; }
.notif-body .nb-line b { font-weight: 700; }
.notif-body .nb-sub { font: 400 12.5px/1.4 var(--font-body); color: var(--ink-500); margin: 1px 0 0; }
.notif-body .nb-date { font: 400 11px/1 var(--font-body); color: var(--ink-400); margin: 5px 0 0; }

/* CTD / Pre-IND segmented mode toggle (the real product control) */
.mode-toggle { display: inline-flex; align-items: center; padding: 2px; border: 1px solid var(--ink-300);
  border-radius: var(--radius-pill); background: #fff; gap: 0; }
.mode-toggle button { padding: 4px 12px; font: 600 11.5px/1 var(--font-body); border: none; background: transparent;
  color: var(--ink-500); border-radius: var(--radius-pill); transition: background var(--dur) var(--ease),
    color var(--dur) var(--ease); }
.mode-toggle button.on { color: #fff; }
.mode-toggle[data-mode="ctd"] button.ctd { background: var(--blue-600); }
.mode-toggle[data-mode="preind"] button.preind { background: var(--amber-500); color: var(--ink-950); }

/* status chips inside product surfaces */
.pchip { display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px; border-radius: var(--radius-pill);
  font: 600 10.5px/1.6 var(--font-body); }
.pchip.blue { background: var(--accent-tint); color: var(--blue-600); }
.pchip.amber { background: var(--amber-100); color: var(--amber-800); }
.pchip.green { background: var(--green-100); color: var(--green-700); }
.pchip.gray { background: var(--ink-100); color: var(--ink-700); }
.pchip.glp { background: var(--green-100); color: var(--green-700); font-weight: 700; }

/* document canvas + traceable prose */
.doc-canvas { padding: 22px 26px; background: var(--ink-50); }
.doc-sheet { background: #fff; border: 1px solid var(--ink-200); border-radius: var(--radius-sm);
  padding: 26px 30px; max-width: 100%; }
.doc-sheet .dh { font: 600 11px/1 var(--font-body); text-transform: uppercase; letter-spacing: .07em;
  color: var(--ink-400); margin: 0 0 4px; }
.doc-sheet h4 { font: 700 15px/1.4 var(--font-body); color: var(--ink-950); margin: 0 0 12px; }
.doc-sheet p { font: 400 13.5px/1.7 var(--font-body); color: var(--ink-900); margin: 0 0 12px; }
.sentence { transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease); cursor: pointer;
  border-radius: 3px; padding: 1px 2px; }
.sentence:hover { background: var(--blue-50); }
.sentence.active { background: var(--blue-50); box-shadow: inset 0 0 0 1px var(--blue-300); }
.cite { font-weight: 600; color: var(--blue-600); cursor: pointer; font-variant-numeric: tabular-nums;
  white-space: nowrap; }
.cite:hover { text-decoration: underline; }

/* gap card (per-section gap detection) — severity reads from a leading status
   dot + label (color always paired with text), never a colored left border
   (DS §12 anti-pattern). Uniform hairline card; module target sits in a quiet
   mono chip. */
.gap-card { border: 1px solid var(--ink-200); border-radius: var(--radius-md); padding: 12px 14px;
  background: #fff; }
.gap-card + .gap-card { margin-top: 8px; }
.gap-card .gh { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; gap: 8px; }
.gap-card .sev { display: inline-flex; align-items: center; gap: 7px;
  font: 700 10px/1 var(--font-body); text-transform: uppercase; letter-spacing: .06em; }
.gap-card .sev::before { content: ""; width: 7px; height: 7px; border-radius: 999px;
  background: currentColor; flex: none;
  box-shadow: 0 0 0 3px color-mix(in oklab, currentColor 14%, transparent); }
.gap-card.severe .sev { color: var(--red-600); }
.gap-card.moderate .sev { color: var(--amber-800); }
.gap-card.minor .sev { color: var(--ink-500); }
.gap-card .gtgt { font: 600 10.5px/1 var(--font-mono); color: var(--ink-500);
  background: var(--ink-50); border-radius: 999px; padding: 4px 9px; }
.gap-card .gtxt { font: 500 12px/1.5 var(--font-body); color: var(--ink-900); margin: 0; }
.gap-card .gsrc { font: 400 11px/1.5 var(--font-body); color: var(--ink-500); margin: 6px 0 0; }

/* document-location breadcrumb — Pre-IND briefing now lives UNDER Module 1
   (one unified document tree on Generate; no CTD/Pre-IND mode switch) */
.doc-loc { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 8px 14px;
  border-bottom: 1px solid var(--ink-150); background: var(--ink-50); }
.doc-loc .dl-crumb { font: 500 11px/1 var(--font-body); color: var(--ink-500); white-space: nowrap; }
.doc-loc .dl-crumb.on { color: var(--ink-900); font-weight: 600; }
.doc-loc .dl-sep { width: 12px; height: 12px; color: var(--ink-300); flex: none; }
/* shared View/Editor toggle — always the right-most item in the breadcrumb */
.dl-viewseg { display: inline-flex; flex: none; background: var(--ink-100);
  border-radius: var(--radius-sm); padding: 3px; }
/* deterministic right-alignment: when the toggle is the only right-side item
   (gaps widget) it owns the auto-margin; when a presence stack precedes it
   (notebook, collab) the presence stack owns the auto-margin and the toggle
   just trails it with a fixed gap — so it never fights for the free space. */
.dl-crumb + .dl-viewseg { margin-left: auto; }
.cl-presence + .dl-viewseg { margin-left: 10px; }
.dl-viewseg button { padding: 2px 13px; border: none; background: transparent; cursor: pointer;
  font: 500 12.5px/18px var(--font-body); color: var(--ink-500); border-radius: var(--radius-xs);
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease); }
.dl-viewseg button.on { background: var(--surface); color: var(--ink-900); box-shadow: var(--shadow-xs); }
[data-theme="dark"] .dl-viewseg { background: var(--surface-sunken); }
[data-theme="dark"] .dl-viewseg button { color: var(--fg-muted); }
[data-theme="dark"] .dl-viewseg button.on { background: var(--surface-hover); color: var(--fg-strong); }

/* right-hand gap pane header */
.gap-pane-head { padding: 12px 14px; border-bottom: 1px solid var(--ink-150);
  display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.gap-pane-title { font: 600 12px/1 var(--font-body); color: var(--ink-900); }

/* editor shows only a portion of a longer document — clip at a fixed height
   so the draft runs off the bottom of the pane, then fade into the canvas to
   signal it continues below. */
/* both panes equal height and top-aligned side by side */
#gap .split { align-items: start; }
#gap .gap-pane { display: flex; flex-direction: column; height: 430px; }
#gap .gap-pane [data-gap-list] { flex: 1 1 auto; overflow-y: auto; }
#gap .gap-editor { position: relative; align-self: start; }
#gap .gap-editor .surface { display: flex; flex-direction: column; height: 430px; }
#gap .gap-editor .doc-canvas { flex: 1 1 auto; overflow: hidden; padding-bottom: 0; }
#gap .gap-editor::after { content: ""; position: absolute; left: 1px; right: 1px; bottom: 1px; height: 104px;
  border-radius: 0 0 var(--radius-md) var(--radius-md); pointer-events: none;
  background: linear-gradient(to bottom, rgba(249,250,251,0), var(--ink-50)); }
[data-theme="dark"] #gap .gap-editor::after {
  background: linear-gradient(to bottom, rgba(18,19,31,0), var(--surface-sunken)); }

/* ── Dark-mode support for the #gap product mock ──────────────────────────
   The product UI is light-mode-native, but on the dark marketing surface the
   mock adapts to semantic tokens (same approach as the .nbgap widget) so it
   never glares white. Scoped to #gap so other light product mocks are intact. */
[data-theme="dark"] #gap .surface { background: var(--surface); border-color: var(--border); color: var(--fg); }
[data-theme="dark"] #gap .app-bar { background: var(--surface); border-bottom-color: var(--border); }
[data-theme="dark"] #gap .app-bar .ab-brand { color: var(--fg-strong); }
[data-theme="dark"] #gap .app-tabs .t { color: var(--fg-muted); }
[data-theme="dark"] #gap .app-tabs .t.on { color: var(--fg-strong); }
[data-theme="dark"] #gap .ab-ic { color: var(--fg-muted); }
[data-theme="dark"] #gap .ab-ic:hover { background: var(--surface-sunken); color: var(--fg-strong); }
[data-theme="dark"] #gap .ab-ic.on { background: rgba(37,99,235,.16); color: var(--fg-strong); }
[data-theme="dark"] #gap .ab-badge { box-shadow: 0 0 0 2px var(--surface); }
[data-theme="dark"] #gap .app-ava { background: var(--surface-sunken); box-shadow: 0 0 0 1.5px var(--surface), 0 1px 4px rgba(0,0,0,.4); }
[data-theme="dark"] #gap .notif-pop { background: var(--surface); border-color: var(--border); box-shadow: 0 22px 60px -16px rgba(0,0,0,.7); }
[data-theme="dark"] #gap .notif-head { border-bottom-color: var(--border); }
[data-theme="dark"] #gap .notif-head .nh-title { color: var(--fg-strong); }
[data-theme="dark"] #gap .notif-item { border-bottom-color: var(--border); }
[data-theme="dark"] #gap .notif-item.unread { background: rgba(37,99,235,.13); }
[data-theme="dark"] #gap .notif-body .nb-line { color: var(--fg); }
[data-theme="dark"] #gap .notif-body .nb-sub { color: var(--fg-muted); }
[data-theme="dark"] #gap .notif-body .nb-date { color: var(--fg-faint); }
[data-theme="dark"] #gap .doc-loc { background: var(--surface-sunken); border-bottom-color: var(--border); }
[data-theme="dark"] #gap .doc-loc .dl-crumb { color: var(--fg-muted); }
[data-theme="dark"] #gap .doc-loc .dl-crumb.on { color: var(--fg-strong); }
[data-theme="dark"] #gap .doc-loc .dl-sep { color: var(--fg-faint); }
[data-theme="dark"] #gap .doc-canvas { background: var(--surface-sunken); }
[data-theme="dark"] #gap .doc-sheet { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] #gap .doc-sheet .dh { color: var(--fg-faint); }
[data-theme="dark"] #gap .doc-sheet h4 { color: var(--fg-strong); }
[data-theme="dark"] #gap .doc-sheet p { color: var(--fg); }
[data-theme="dark"] #gap .gap-pane-head { border-bottom-color: var(--border); }
[data-theme="dark"] #gap .gap-pane-title { color: var(--fg-strong); }
[data-theme="dark"] #gap .gap-card { background: var(--surface-sunken); border-color: var(--border); }
[data-theme="dark"] #gap .gap-card .gtxt { color: var(--fg-strong); }
[data-theme="dark"] #gap .gap-card .gsrc { color: var(--fg-muted); }
[data-theme="dark"] #gap .gap-card .gtgt { color: var(--fg-muted); background: color-mix(in oklab, var(--surface) 70%, #fff 6%); }
[data-theme="dark"] #gap .gap-card.minor .sev { color: var(--fg-muted); }

/* ── Section-scoped gap detection — carousel through the sections ─────────
   Self-contained demo (no app nav): a per-section gap panel that steps through
   each drafted IND leaf (auto-advancing, with a rail + prev/next). Themed with
   semantic tokens so it adapts to light/dark like the grounded-chat widget. */
.nbgap { display: flex; flex-direction: column; gap: 14px; }

.nbgap-panel { display: flex; flex-direction: column; min-width: 0; padding: 16px 16px 14px;
  height: clamp(440px, 52vw, 560px);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: 0 24px 60px -28px rgba(15,18,40,.28); }
[data-theme="dark"] .nbgap-panel { box-shadow: 0 30px 70px -28px rgba(0,0,0,.6); }
.nbgap-panel-head { display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; margin-bottom: 14px; }
.nbgap-eyebrow { font: 600 10px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .09em;
  color: var(--fg-faint); margin-bottom: 7px; }
.nbgap-active { font: 600 13px/1.35 var(--font-body); color: var(--fg-strong); }
.nbgap-rail { display: flex; gap: 6px; margin-bottom: 16px; }
.nbgap-seg { flex: 1; height: 4px; padding: 0; border: none; border-radius: 999px; cursor: pointer;
  background: var(--border); transition: background .3s var(--ease); }
.nbgap-seg:hover { background: var(--border-strong); }
.nbgap-seg.active, .nbgap-seg.active:hover { background: var(--accent); }
.nbgap-seg:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.nbgap-gaps { flex: 1; min-height: 0; overflow-y: auto; }
.nbgap-group { display: none; }
.nbgap-group.active { display: block; animation: nbfade .4s var(--ease-out); }
@keyframes nbfade { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .nbgap-group.active { animation: none; } }
.nbgap .gap-card { background: var(--surface-sunken); border-color: var(--border); }
.nbgap .gap-card .gtxt { color: var(--fg-strong); }
.nbgap .gap-card .gsrc { color: var(--fg-muted); }
.nbgap .gap-card .gtgt { color: var(--fg-muted); background: color-mix(in oklab, var(--surface) 70%, #fff 6%); }
.nbgap-nav { display: flex; align-items: center; justify-content: flex-end; gap: 12px;
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border-divider); }
.nbgap-pos { margin-right: auto; font: 600 11px/1 var(--font-mono); letter-spacing: .04em;
  color: var(--fg-faint); font-variant-numeric: tabular-nums; }
.nbgap-pos [data-nbgap-idx] { color: var(--fg-strong); }
.nbgap-arrow { display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0; border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); background: var(--surface); color: var(--fg-muted);
  cursor: pointer; transition: color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease); }
.nbgap-arrow svg { width: 16px; height: 16px; }
.nbgap-arrow:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-tint); }
.nbgap-arrow:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.nbgap-foot { margin: 14px 2px 0; text-align: center; font-size: var(--text-2xs); color: var(--fg-faint); line-height: 1.55; }

/* Export Gap Analysis — action in the notebook nav (AC-1 affordance) */
.nbgap-export { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface);
  color: var(--fg-muted); font: 500 12px/1 var(--font-body); cursor: pointer; white-space: nowrap;
  transition: color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease); }
.nbgap-export svg { width: 14px; height: 14px; }
.nbgap-export:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-tint); }
.nbgap-export:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Gap-analysis key points */
.gap-points { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.gap-points li { display: grid; grid-template-columns: 26px 1fr; gap: 13px; align-items: start; }
.gp-idx { font: 600 11px/1.7 var(--font-mono); letter-spacing: .04em; color: var(--accent);
  font-variant-numeric: tabular-nums; }
.gap-points strong { display: block; font-weight: 600; color: var(--fg-strong); font-size: var(--text-md);
  margin-bottom: 3px; letter-spacing: -.01em; }
.gap-points p { margin: 0; color: var(--fg-muted); font-size: var(--text-sm); line-height: 1.55; }
.gap-export { max-width: 760px; margin: 40px auto 0; }
.gap-export .gap-points { margin-top: 14px; }
@media (min-width: 720px) { .gap-export .gap-points { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 28px 24px; }
  .gap-export .gap-points { max-width: none; } .gap-export { max-width: 1080px; } }

/* sources rail (numbered citation provenance) */
.src-rail { padding: 16px 16px 18px; border-left: 1px solid var(--ink-150); background: #fff; }
.src-rail .srh { font: 600 11px/1 var(--font-body); text-transform: uppercase; letter-spacing: .08em;
  color: var(--ink-400); margin: 0 0 12px; }
.src-item { display: flex; gap: 10px; padding: 10px 11px; border: 1px solid var(--ink-200);
  border-radius: var(--radius-sm); margin-bottom: 8px; transition: border-color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease); }
.src-item.active { border-color: var(--blue-500); box-shadow: 0 0 0 2px rgba(37,99,235,.14); }
.src-item .sn { font: 700 11px/1.5 var(--font-mono); color: var(--blue-600); flex-shrink: 0; }
.src-item .snm { font: 600 12px/1.3 var(--font-body); color: var(--ink-950); margin: 0 0 3px; }
.src-item .squote { font: 400 11px/1.55 var(--font-body); color: var(--ink-500); margin: 0; }
.src-item .scoord { font: 500 10px/1.4 var(--font-mono); color: var(--ink-400); margin: 6px 0 0; }

/* generic mini table */
.mini-table { width: 100%; border-collapse: collapse; font-family: var(--font-body); }
.mini-table th { font: 500 10.5px/1 var(--font-body); text-transform: uppercase; letter-spacing: .07em;
  color: var(--ink-400); text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--ink-150); }
.mini-table td { padding: 11px 12px; border-bottom: 1px solid var(--ink-100); font: 400 12.5px/1.4 var(--font-body);
  color: var(--ink-900); }
.mini-table tr:last-child td { border-bottom: none; }
.bar { height: 6px; border-radius: 3px; background: var(--ink-100); overflow: hidden; }
.bar > i { display: block; height: 100%; width: 0; border-radius: 3px;
  background: linear-gradient(90deg, var(--grad-logo-1), var(--grad-logo-2));
  transition: width var(--dur-hero) var(--ease-out); }
/* Fill to target only once the container reveals; stagger row-by-row so the
   coverage bars sweep in like the export is being measured. */
[data-reveal].in .bar > i { width: var(--w, 0); }
[data-reveal].in .mini-table tbody tr:nth-child(1) .bar > i { transition-delay: .10s; }
[data-reveal].in .mini-table tbody tr:nth-child(2) .bar > i { transition-delay: .19s; }
[data-reveal].in .mini-table tbody tr:nth-child(3) .bar > i { transition-delay: .28s; }
[data-reveal].in .mini-table tbody tr:nth-child(4) .bar > i { transition-delay: .37s; }
@media (prefers-reduced-motion: reduce) {
  .bar > i { transition: none; width: var(--w, 0); } }

/* Dark mode — CTD export widget. The .surface panel is hard-coded white, so
   re-theme the panel, table and bar track onto dark tokens (mirrors #gap). */
[data-theme="dark"] #ctd .surface { background: var(--surface); border-color: var(--border); color: var(--fg); }
[data-theme="dark"] #ctd .surface > div:first-child { border-bottom-color: var(--border); }
[data-theme="dark"] #ctd .surface > div:first-child span:nth-child(2) { color: var(--fg-strong) !important; }
[data-theme="dark"] #ctd .mini-table th { color: var(--fg-faint); border-bottom-color: var(--border); }
[data-theme="dark"] #ctd .mini-table td { color: var(--fg); border-bottom-color: var(--border-divider); }
[data-theme="dark"] #ctd .mini-table .mono { color: var(--fg-muted); }
[data-theme="dark"] #ctd .bar { background: rgba(255, 255, 255, .08); }
[data-theme="dark"] #ctd .surface > p { color: var(--fg-faint) !important; border-top-color: var(--border) !important; }

/* ── reveal-on-scroll ───────────────────────────────────────────────────── */
[data-reveal] { opacity: 0; transform: translateY(16px);
  transition: opacity var(--dur-entrance) var(--ease-out), transform var(--dur-entrance) var(--ease-out); }
[data-reveal].in { opacity: 1; transform: none; }
[data-reveal][data-delay="1"] { transition-delay: .07s; }
[data-reveal][data-delay="2"] { transition-delay: .14s; }
[data-reveal][data-delay="3"] { transition-delay: .21s; }
@media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1 !important; transform: none !important; } }

/* ── feature row (alternating split) ────────────────────────────────────── */
.split { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.split > * { min-width: 0; }
.split.rev .split-media { order: -1; }
@media (max-width: 940px) { .split { grid-template-columns: 1fr; gap: 32px; }
  .split.rev .split-media { order: 0; } }
.split-copy h3 { font-size: var(--text-2xl); letter-spacing: -0.01em; line-height: 1.12; margin-bottom: 14px; }
.split-copy .lead { font-size: var(--text-md); margin-bottom: 20px; }
.feat-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.feat-list li { display: flex; gap: 12px; font-size: var(--text-base); color: var(--fg-muted); line-height: 1.5; }
.feat-list li .fi { flex-shrink: 0; width: 18px; height: 18px; color: var(--accent); margin-top: 1px; }
.feat-list li b { color: var(--fg-strong); font-weight: 600; }

/* ── stat / metric row ──────────────────────────────────────────────────── */
.stat { padding: 4px 0; }
.stat .k { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 700; letter-spacing: -0.02em;
  color: var(--fg-strong); line-height: 1; }
.stat .l { font-size: var(--text-sm); color: var(--fg-muted); margin-top: 8px; line-height: 1.45; }

/* ── pull / quote ───────────────────────────────────────────────────────── */
.pull { font-family: var(--font-display); font-weight: 600; font-size: clamp(24px, 3.4vw, 38px);
  line-height: 1.2; letter-spacing: -0.02em; color: var(--fg-strong); text-wrap: balance; }
.pull .hl { display: block; background: linear-gradient(90deg, var(--grad-logo-1), var(--grad-logo-2));
  -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ── CTA band ───────────────────────────────────────────────────────────── */
.cta-band { position: relative; overflow: hidden; border-radius: var(--radius-lg); padding: clamp(40px,6vw,72px);
  background: radial-gradient(120% 140% at 15% 10%, #161a3a 0%, #0a0b14 60%); color: #fff; text-align: center; }
.cta-band h2 { color: #fff; font-size: var(--text-3xl); letter-spacing: -0.02em; line-height: 1.08; }
.cta-band .lead { color: #c3c6dd; margin: 16px auto 28px; }
.cta-band .row { display: inline-flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
/* glassy CTA button matching homepage hero — always dark context */
.cta-band { --cta: 48; --cta2: 60; }
.cta-band .btn-primary { color: #fff; position: relative; isolation: isolate;
  background: linear-gradient(96deg, color-mix(in srgb, var(--grad-logo-1) calc(var(--cta) * 1%), transparent), color-mix(in srgb, var(--grad-logo-2) calc((var(--cta) - 2) * 1%), transparent));
  border-color: color-mix(in srgb, var(--grad-logo-2) calc((var(--cta) + 2) * 1%), transparent);
  backdrop-filter: blur(10px) saturate(140%); -webkit-backdrop-filter: blur(10px) saturate(140%);
  box-shadow: 0 6px 22px -12px rgba(60,73,235,.55), inset 0 1px 0 rgba(255,255,255,.28); }
.cta-band .btn-primary::before { content: ""; position: absolute; inset: 0; border-radius: inherit;
  z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(255,255,255,.22), rgba(255,255,255,0) 52%); }
.cta-band .btn-primary:hover { transform: translateY(-1px);
  background: linear-gradient(96deg, color-mix(in srgb, var(--grad-logo-1) calc((var(--cta) + 14) * 1%), transparent), color-mix(in srgb, var(--grad-logo-2) calc((var(--cta) + 12) * 1%), transparent));
  border-color: color-mix(in srgb, var(--grad-logo-2) calc((var(--cta) + 16) * 1%), transparent);
  box-shadow: 0 12px 30px -12px rgba(60,73,235,.7), inset 0 1px 0 rgba(255,255,255,.35); }
.cta-band .wave { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .5;
  pointer-events: none; object-fit: cover; object-position: center 42%;
  /* Anchor to the band (NOT oversized) so the mask feathers in BAND
     coordinates — the ribbon artwork runs to its own canvas edges, so the
     reveal must fade to transparent before every band edge on any viewport,
     dissolving the hard cut into the dark gradient. */
  -webkit-mask-image: radial-gradient(78% 88% at 50% 44%, #000 30%, transparent 94%);
  mask-image: radial-gradient(78% 88% at 50% 44%, #000 30%, transparent 94%); }

/* Mobile: shorten the band and re-seat the wave so cover-zoom can't crop it
   into a hard edge */
@media (max-width: 600px) {
  .cta-band { padding: 34px 22px; }
  .cta-band h2 { font-size: var(--text-2xl); }
  .cta-band .lead { margin: 12px auto 22px; }
  .cta-band .wave { inset: 0; opacity: .4; object-position: center 38%;
    -webkit-mask-image: radial-gradient(82% 80% at 50% 40%, #000 24%, transparent 92%);
    mask-image: radial-gradient(82% 80% at 50% 40%, #000 24%, transparent 92%); }
}

/* ── Book-a-demo form (light card floating on the dark CTA band) ─────────── */
.cta-band--form { text-align: left; }
.book-grid { position: relative; z-index: 2; display: grid; gap: clamp(28px, 4vw, 56px);
  grid-template-columns: 1fr; align-items: center; }
@media (min-width: 880px) { .book-grid { grid-template-columns: 1fr minmax(380px, 440px); } }
.book-intro h2 { color: #fff; font-size: var(--text-3xl); letter-spacing: -0.02em; line-height: 1.08; margin: 0; }
.book-intro .lead { color: #c3c6dd; margin: 16px 0 22px; }
.book-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.book-points li { position: relative; padding-left: 26px; color: #d7d9ec; font-size: var(--text-base); line-height: 1.5; }
.book-points li::before { content: ""; position: absolute; left: 0; top: 6px; width: 14px; height: 14px;
  background: var(--grad-brand); border-radius: 999px;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/12px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/12px no-repeat; }

.book-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: clamp(18px, 2.4vw, 24px); box-shadow: 0 24px 60px -22px rgba(0,0,0,.55); }
.demo-form { display: grid; gap: 11px; }
.demo-form[hidden] { display: none; }
.demo-form-title { font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg);
  color: var(--fg-strong); margin: 0 0 2px; }
.df-row { display: grid; gap: 11px; grid-template-columns: 1fr; }
@media (min-width: 480px) { .df-row { grid-template-columns: 1fr 1fr; } }
.df-field { display: grid; gap: 6px; }
.df-label { font-size: var(--text-xs); font-weight: 500; color: var(--fg-muted); }
.df-label i { color: var(--accent); font-style: normal; }
.df-input { font-family: inherit; font-size: var(--text-base); color: var(--fg); background: var(--surface);
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: 10px 12px; width: 100%;
  box-sizing: border-box; transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.df-input::placeholder { color: var(--fg-faint); }
.df-input:focus { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); }
.df-textarea { resize: vertical; min-height: 58px; line-height: 1.5; }
.df-select { appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; padding-right: 38px; }
.df-submit { width: 100%; justify-content: center; margin-top: 2px; }
.df-submit[aria-busy="true"] { opacity: .7; pointer-events: none; }
.df-submit:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
.df-fine { font-size: var(--text-xs); color: var(--fg-faint); margin: 0; text-align: center; }
.df-error { font-size: var(--text-sm); color: var(--red-600); margin: 0; }
.df-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.demo-success { text-align: center; padding: 18px 8px; display: grid; gap: 6px; justify-items: center; }
.demo-success[hidden] { display: none; }
.demo-success-mark { width: 48px; height: 48px; border-radius: 999px; display: grid; place-items: center;
  color: #fff; background: var(--grad-brand); margin-bottom: 6px; }
.demo-success-mark svg { width: 24px; height: 24px; }
.demo-success h3 { font-family: var(--font-display); font-size: var(--text-lg); color: var(--fg-strong); margin: 0; }
.demo-success p { color: var(--fg-muted); font-size: var(--text-base); margin: 0; max-width: 32ch; }

@media (max-width: 600px) {
  .cta-band--form { padding: 28px 20px; }
  .book-intro h2 { font-size: var(--text-2xl); }
}

/* ── Page hero (inner pages — light) ────────────────────────────────────── */
.phero { position: relative; overflow: hidden; padding-block: clamp(56px, 8vw, 104px) clamp(40px, 5vw, 64px);
  border-bottom: 1px solid var(--border); }
.phero::before { content: ""; position: absolute; inset: -40% -10% auto -10%; height: 90%;
  background: radial-gradient(60% 70% at 80% 0%, rgba(37,99,235,.08), transparent 60%),
    radial-gradient(50% 60% at 10% 0%, rgba(126,109,255,.07), transparent 60%); pointer-events: none; }
.phero .wrap { position: relative; z-index: 2; }
.phero h1 { font-size: clamp(2.2rem, 4.6vw, 3.4rem); letter-spacing: -0.025em; line-height: 1.04;
  margin: 16px 0 0; max-width: 28ch; text-align: center; margin-inline: auto; }
.phero .lead { margin-top: 20px; font-size: var(--text-lg); max-width: 56ch;
  text-align: center; margin-inline: auto; }
.phero .eyebrow { margin-bottom: 6px; }
/* Lead eyebrow — subtle intro above hero headlines */
.lead-eyebrow { font-family: var(--font-mono); font-size: var(--text-sm); letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--fg-muted); font-weight: 500; margin: 0 0 8px;
  display: block; }
/* Gradient text accent — brand gradient on key words */
.grad-text { background: linear-gradient(92deg, var(--grad-logo-1), var(--grad-logo-2));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
/* Hero headline gradient accent (homepage style — slightly warmer) */
.grad { background: linear-gradient(130deg, #2f5bf6 0%, #6b6bf8 45%, #9b6dff 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
[data-theme="dark"] .grad { background: linear-gradient(130deg, #6d8bff 0%, #9a8cff 48%, #c2a0ff 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.phero-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.phero-meta { margin-top: 36px; display: grid; grid-template-columns: repeat(3, auto); gap: clamp(24px, 5vw, 56px);
  justify-content: start; }
@media (max-width: 620px) { .phero-meta { grid-template-columns: 1fr; gap: 18px; } }

/* ── Page hero with live silk-ribbon canvas (variant per page) ──────────── */
.phero.has-canvas { background: var(--bg); isolation: isolate; border-bottom: 0; }
.phero.has-canvas::before { display: none; }            /* canvas replaces the static glow */
/* product hero dropped its stat block — hold the original height so it doesn't collapse */
.phero-product { display: flex; flex-direction: column; justify-content: center; min-height: 667px; }
@media (max-width: 720px) { .phero-product { min-height: 0; } }

/* Left-aligned hero variant (for product page) */
.phero-left h1,
.phero-left .lead,
.phero-left .phero-cta { text-align: left; margin-inline: 0; }
.phero-left h1 { max-width: 18ch; }
.phero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; }
/* readability scrim — weighted toward the left where the copy sits */
.phero-scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(95% 130% at 30% 50%, color-mix(in srgb, var(--bg) 62%, transparent), transparent 74%); }
.phero-fade { position: absolute; left: 0; right: 0; bottom: 0; height: 32%; z-index: 1; pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--bg)); }

/* glassy theme-aware page-hero CTAs (same system as the home hero) */
.phero-cta { --cta: 75; --cta2: 32; }
[data-theme="dark"] .phero-cta { --cta: 48; --cta2: 60; }
.phero-cta .btn-primary { color: #fff; position: relative; isolation: isolate;
  background: linear-gradient(96deg, color-mix(in srgb, var(--grad-logo-1) calc(var(--cta) * 1%), transparent), color-mix(in srgb, var(--grad-logo-2) calc((var(--cta) - 2) * 1%), transparent));
  border-color: color-mix(in srgb, var(--grad-logo-2) calc((var(--cta) + 2) * 1%), transparent);
  backdrop-filter: blur(10px) saturate(140%); -webkit-backdrop-filter: blur(10px) saturate(140%);
  box-shadow: 0 6px 22px -12px rgba(60,73,235,.55), inset 0 1px 0 rgba(255,255,255,.28); }
.phero-cta .btn-primary::before { content: ""; position: absolute; inset: 0; border-radius: inherit;
  z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(255,255,255,.22), rgba(255,255,255,0) 52%); }
.phero-cta .btn-primary:hover { transform: translateY(-1px);
  background: linear-gradient(96deg, color-mix(in srgb, var(--grad-logo-1) calc((var(--cta) + 14) * 1%), transparent), color-mix(in srgb, var(--grad-logo-2) calc((var(--cta) + 12) * 1%), transparent));
  border-color: color-mix(in srgb, var(--grad-logo-2) calc((var(--cta) + 16) * 1%), transparent);
  box-shadow: 0 12px 30px -12px rgba(60,73,235,.7), inset 0 1px 0 rgba(255,255,255,.35); }
.phero-cta .btn-ghost { background: color-mix(in srgb, var(--surface) calc(var(--cta2) * 1%), transparent);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.phero-cta .btn-ghost:hover { border-color: color-mix(in srgb, var(--fg-strong) 28%, transparent);
  transform: translateY(-1px); }

/* in-page sub-nav (sticky under main nav) */
.subnav { position: sticky; top: 60px; z-index: 40; background: color-mix(in oklab, var(--surface) 88%, transparent);
  backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); }
.subnav-inner { display: flex; gap: 4px; height: 48px; align-items: center; overflow-x: auto; scrollbar-width: none; }
.subnav-inner::-webkit-scrollbar { display: none; }
.subnav a { padding: 7px 12px; font-size: var(--text-sm); font-weight: 500; color: var(--fg-muted);
  border-radius: var(--radius-sm); white-space: nowrap; transition: color var(--dur) var(--ease), background var(--dur) var(--ease); }
.subnav a:hover { color: var(--fg-strong); background: var(--surface-hover); }
@media (max-width: 860px) { .subnav { display: none; } }

/* numbered process flow */
.flow { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; border: 1px solid var(--border);
  border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); }
@media (max-width: 900px) { .flow { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .flow { grid-template-columns: 1fr; } }
.flow .step { padding: 20px; border-right: 1px solid var(--border); }
.flow .step:last-child { border-right: 0; }
.flow .step .n { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--accent); letter-spacing: .06em; }
.flow .step h4 { font-size: var(--text-base); margin: 10px 0 6px; }
.flow .step p { font-size: var(--text-sm); color: var(--fg-muted); margin: 0; line-height: 1.5; }

/* faq / disclosure */
.faq-item { border-bottom: 1px solid var(--border); }
.faq-item summary { cursor: pointer; list-style: none; padding: 20px 0; display: flex; align-items: center;
  justify-content: space-between; gap: 16px; font-family: var(--font-display); font-weight: 600;
  font-size: var(--text-md); color: var(--fg-strong); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .pm { flex-shrink: 0; width: 18px; height: 18px; color: var(--fg-muted); transition: transform var(--dur) var(--ease); }
.faq-item[open] summary .pm { transform: rotate(45deg); }
.faq-item p { margin: 0 0 20px; color: var(--fg-muted); font-size: var(--text-base); line-height: 1.6; max-width: 70ch; }

/* utility */
.muted { color: var(--fg-muted); }
.center { text-align: center; }
.nowrap { white-space: nowrap; }
.mt-6 { margin-top: var(--space-6); } .mt-7 { margin-top: var(--space-7); } .mt-8 { margin-top: var(--space-8); }
.hr { border: 0; border-top: 1px solid var(--border); margin: 0; }
.skip-link { position: absolute; left: -999px; top: 8px; background: var(--accent); color: #fff;
  padding: 8px 14px; border-radius: var(--radius-sm); z-index: 100; }
.skip-link:focus { left: 8px; }

/* ── Grounded chat widget (Document intelligence) ───────────────────── */
.ragchat { display: flex; flex-direction: column; height: clamp(440px, 52vw, 560px);
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-lg);
  overflow: hidden; box-shadow: 0 24px 60px -28px rgba(15,18,40,.28); }
[data-theme="dark"] .ragchat { box-shadow: 0 30px 70px -28px rgba(0,0,0,.6); }
.rag-head { display: flex; align-items: center; gap: 10px; padding: 11px 14px; flex-shrink: 0;
  border-bottom: 1px solid var(--border-divider); }
.rag-id { display: inline-flex; align-items: center; gap: 8px; font: 600 13px/1 var(--font-display); color: var(--fg-strong); }
.rag-head .ab-orb { width: 16px; height: 16px; border-radius: 50%;
  background: linear-gradient(90deg, var(--grad-logo-1), var(--grad-logo-2)); }
.rag-scope { margin-left: auto; font: 500 11px/1 var(--font-body); color: var(--fg-faint); }
.rag-thread { flex: 1; min-height: 0; min-width: 0; overflow-y: auto; padding: 16px 14px;
  scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent;
  display: flex; flex-direction: column; gap: 14px; }
.rag-thread::-webkit-scrollbar { width: 8px; }
.rag-thread::-webkit-scrollbar-track { background: transparent; }
.rag-thread::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 999px;
  border: 2px solid var(--surface); background-clip: padding-box;
  transition: background var(--dur) var(--ease); }
.rag-thread:hover::-webkit-scrollbar-thumb { background: var(--fg-faint); background-clip: padding-box; }

.rag-msg-user { align-self: flex-end; max-width: 84%; background: var(--accent-tint);
  border: 1px solid rgba(37,99,235,.22); border-radius: 12px 12px 4px 12px; padding: 9px 13px;
  font: 400 13.5px/1.5 var(--font-body); color: var(--fg-strong); }
.rag-msg-ai { align-self: stretch; width: 100%; min-width: 0; }
.rag-ai-body { font: 400 13.5px/1.62 var(--font-body); color: var(--fg); }
.rag-ai-body .rag-block { margin: 0 0 9px; }
.rag-ai-body .rag-block:last-child { margin-bottom: 0; }
.rag-ai-body strong { font-weight: 600; color: var(--fg-strong); }
.rag-ai-body ul { list-style: none; padding: 0; margin: 0 0 9px; display: flex; flex-direction: column; gap: 6px; }
.rag-ai-body li { position: relative; padding-left: 18px; }
.rag-ai-body li::before { content: ""; position: absolute; left: 4px; top: 8px; width: 5px; height: 5px;
  border-radius: 50%; background: var(--accent); }

.rag-ai-body table { width: 100%; border-collapse: collapse; margin: 4px 0 11px; font: 400 12.5px/1.4 var(--font-body);
  border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.rag-ai-body thead th { background: var(--surface-sunken); text-align: left; padding: 7px 10px;
  font: 600 11px/1.3 var(--font-display); text-transform: uppercase; letter-spacing: .04em;
  color: var(--fg-muted); border-bottom: 1px solid var(--border); }
.rag-ai-body tbody td { padding: 7px 10px; border-bottom: 1px solid var(--border-divider); color: var(--fg);
  font-variant-numeric: tabular-nums; }
.rag-ai-body tbody tr:last-child td { border-bottom: none; }
.rag-ai-body tbody td:first-child { font-weight: 500; color: var(--fg-strong); }

.rag-cite { display: inline-flex; align-items: center; justify-content: center; min-width: 15px; height: 15px;
  padding: 0 4px; margin-left: 2px; border-radius: 4px; background: var(--accent-tint); color: var(--accent);
  font: 600 9.5px/1 var(--font-display); vertical-align: super; cursor: pointer; position: relative; top: -1px;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }
.rag-cite:hover, .rag-cite.lit { background: var(--accent); color: #fff; }

.rag-src-head { font: 600 10px/1 var(--font-display); text-transform: uppercase; letter-spacing: .07em;
  color: var(--fg-faint); margin: 12px 0 7px; }
.rag-srcs { display: flex; flex-direction: row; gap: 8px; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x proximity;
  scrollbar-width: none; -ms-overflow-style: none; }
.rag-srcs::-webkit-scrollbar { width: 0; height: 0; display: none; }
.rag-src { flex: 0 0 240px; scroll-snap-align: start; display: flex; gap: 9px; padding: 8px 10px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface-sunken); transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.rag-src.lit { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.rag-src .rs-n { flex-shrink: 0; width: 16px; height: 16px; border-radius: 4px; background: var(--accent-tint);
  color: var(--accent); font: 600 10px/16px var(--font-display); text-align: center; }
.rag-src .rs-file { font: 600 12px/1.3 var(--font-display); color: var(--fg-strong);
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.rag-src .rs-kind { font: 500 9px/1 var(--font-body); text-transform: uppercase; letter-spacing: .05em;
  padding: 2px 5px; border-radius: 3px; background: var(--border); color: var(--fg-muted); }
.rag-src .rs-quote { font: 400 11.5px/1.45 var(--font-body); color: var(--fg-muted); margin: 3px 0 2px; font-style: italic;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rag-src .rs-file { min-width: 0; }
.rag-src > div { min-width: 0; }
.rag-src .rs-coord { font: 500 10.5px/1 var(--font-body); color: var(--fg-faint); font-variant-numeric: tabular-nums; }

.rag-think { display: inline-flex; align-items: center; gap: 8px; font: 500 12px/1 var(--font-body); color: var(--fg-faint); }
.rag-dots { display: inline-flex; gap: 3px; }
.rag-dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); opacity: .4; animation: ragdot 1s infinite; }
.rag-dots i:nth-child(2) { animation-delay: .15s; } .rag-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes ragdot { 0%,60%,100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

.rag-block { opacity: 0; transform: translateY(5px); transition: opacity .34s var(--ease-out), transform .34s var(--ease-out); }
.rag-block.in { opacity: 1; transform: none; }

.rag-foot { flex-shrink: 0; border-top: 1px solid var(--border-divider); padding: 10px 12px 12px; background: var(--surface); }
.rag-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 9px; }
.rag-chip { font: 500 11px/1 var(--font-body); color: var(--fg-muted); background: var(--surface-sunken);
  border: 1px solid var(--border); border-radius: 999px; padding: 6px 11px; cursor: pointer;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease); }
.rag-chip:hover { border-color: var(--accent); color: var(--accent); }
.rag-form { position: relative; display: block; }
.rag-input { width: 100%; min-width: 0; border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  padding: 11px 78px 11px 13px; font: 400 13px/1.4 var(--font-body); color: var(--fg-strong); background: var(--surface);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.rag-input::placeholder { color: var(--fg-faint); }
.rag-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(79,70,229,.12); }
.rag-enter { position: absolute; right: 7px; top: 50%; transform: translateY(-50%); pointer-events: none;
  font: 600 9.5px/1 var(--font-display); letter-spacing: .03em; color: var(--fg-faint); white-space: nowrap;
  background: var(--surface-sunken); border: 1px solid var(--border); border-radius: 5px; padding: 4px 7px;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), background var(--dur) var(--ease); }
.rag-input:focus ~ .rag-enter { color: var(--accent); border-color: var(--accent); background: var(--accent-tint); }
@media (prefers-reduced-motion: reduce) { .rag-block { transition: none; } .rag-dots i { animation: none; } }

/* =============================================================================
   NOTEBOOK EDITOR — prompt-driven, high-level section edits (#notebook)
   The app chrome reuses .surface / .app-bar; below that sits a formatting
   toolbar, the editable section sheet (the "leaf"), and a draggable AI
   composer that blooms from a movable dot (ported from the product Notebook).
   ============================================================================= */
#notebook .nbe-surface { display: flex; flex-direction: column; height: 700px;
  box-shadow: 0 24px 60px -28px rgba(17,24,39,.22); overflow: hidden; }

/* ── formatting toolbar ───────────────────────────────────────────────── */
.nbe-tbar { display: flex; align-items: center; gap: 7px; height: 42px; flex: none;
  padding: 0 12px; background: var(--surface); border-bottom: 1px solid var(--ink-150);
  overflow: hidden; }
.nbe-size { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 8px;
  border: 1px solid var(--ink-200); border-radius: var(--radius-xs);
  font: 400 12.5px/1 var(--font-body); color: var(--ink-700); white-space: nowrap; flex: none; }
.nbe-size svg { width: 9px; height: 9px; }
.nbe-div { width: 1px; height: 18px; background: var(--ink-200); flex: none; }
.nbe-grp { display: inline-flex; align-items: center; gap: 2px; flex: none; }
.nbe-ic { width: 27px; height: 27px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-xs); color: var(--ink-500); cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }
.nbe-ic:hover { background: var(--ink-100); color: var(--ink-900); }
.nbe-ic svg { width: 16px; height: 16px; }
.nbe-tbright { margin-left: auto; display: flex; align-items: center; gap: 9px; flex: none; }
.nbe-save { height: 27px; padding: 0 14px; border: 1px solid transparent; border-radius: var(--radius-sm);
  background: var(--accent); color: #fff; font: 600 12.5px/1 var(--font-body); cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.nbe-save:hover:not(:disabled) { background: var(--accent-hover); }
/* nothing to save → quiet ghost; user edits enable it (JS removes [disabled]) */
.nbe-save:disabled { background: transparent; color: var(--ink-400); border-color: var(--ink-200); cursor: default; }

/* ── canvas + section sheet (the leaf) ────────────────────────────────── */
.nbe-canvas { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden;
  background: var(--ink-50); }
/* the document is a fixed-height page that clips at the bottom (no scroll, no
   fade) — its height never changes between versions; dot floats over it */
.nbe-scroll { height: 100%; overflow: hidden; padding: 26px 24px 0; }
.nbe-sheet { max-width: 620px; margin: 0 auto; height: 100%; overflow: hidden; background: var(--surface);
  border: 1px solid var(--ink-200); border-bottom: none;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  box-shadow: 0 1px 3px rgba(17,24,39,.04); padding: 26px 32px 30px; }
.nbe-dh { font: 600 11px/1 var(--font-body); text-transform: uppercase; letter-spacing: .07em;
  color: var(--ink-400); margin: 0 0 12px; }
.nbe-h { font: 600 17px/1.3 var(--font-display); color: var(--ink-950); margin: 0 0 11px; }
.nbe-para { font: 400 14px/1.78 var(--font-body); color: var(--ink-900); margin: 0;
  border-radius: 4px; padding: 2px 4px; margin: 0 -4px;
  transition: opacity .36s var(--ease), filter .36s var(--ease), transform .36s var(--ease); }
.nbe-para b { font-weight: 700; color: var(--ink-950); }
.nbe-para.is-out { opacity: 0; filter: blur(5px); transform: translateY(5px); }
.nbe-para.is-in { animation: nbe-wash 1.5s var(--ease-out); }
@keyframes nbe-wash { from { background: rgba(79,70,229,.16); } to { background: transparent; } }
.nbe-new { background: rgba(5,150,105,.16); border-radius: 3px; padding: 1px 2px; margin: 0 -2px;
  box-shadow: 0 0 0 1px rgba(5,150,105,.12); transition: background .9s var(--ease), box-shadow .9s var(--ease); }
.nbe-new.settle { background: transparent; box-shadow: none; }
/* the paragraph is directly editable — hint it on hover, ring it on focus */
.nbe-para[contenteditable] { cursor: text; outline: none;
  transition: box-shadow var(--dur) var(--ease), background var(--dur) var(--ease),
    opacity .36s var(--ease), filter .36s var(--ease), transform .36s var(--ease); }
.nbe-para[contenteditable]:hover { box-shadow: inset 0 0 0 1px var(--ink-200); }
.nbe-para[contenteditable]:focus { box-shadow: inset 0 0 0 1.5px var(--accent);
  background: rgba(79,70,229,.035); }

/* secondary subsection — continues below the edited passage so the document
   runs off the bottom of the pane (like the gaps editor) */
.nbe-h2 { margin-top: 22px; }
.nbe-static { color: var(--ink-700); }
/* in-text summary table (a written summary legitimately carries summary tables) */
.nbe-tbl-wrap { margin: 18px 0 0; }
.nbe-tbl-cap { font: 600 12px/1.4 var(--font-body); color: var(--ink-800); margin: 0 0 7px; }
.nbe-tbl { width: 100%; border-collapse: collapse; font: 400 12.5px/1.4 var(--font-body);
  border: 1px solid var(--ink-200); border-radius: var(--radius-sm); overflow: hidden; }
.nbe-tbl th, .nbe-tbl td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--ink-150);
  vertical-align: top; }
.nbe-tbl thead th { background: var(--ink-50); font: 600 11px/1.3 var(--font-body); text-transform: uppercase;
  letter-spacing: .04em; color: var(--ink-600); }
.nbe-tbl tbody tr:last-child td { border-bottom: none; }
.nbe-tbl tbody td:first-child { font-weight: 600; color: var(--ink-900); }
.nbe-tbl tbody td:last-child { color: var(--ink-700); font-variant-numeric: tabular-nums; }
.nbe-tbl-note { margin: 7px 0 0; font-size: var(--text-2xs); color: var(--ink-400); }
[data-theme="dark"] #notebook .nbe-tbl-cap { color: var(--fg-strong); }
[data-theme="dark"] #notebook .nbe-tbl { border-color: var(--border); }
[data-theme="dark"] #notebook .nbe-tbl th, [data-theme="dark"] #notebook .nbe-tbl td { border-bottom-color: var(--border); }
[data-theme="dark"] #notebook .nbe-tbl thead th { background: var(--surface-sunken); color: var(--fg-muted); }
[data-theme="dark"] #notebook .nbe-tbl tbody td { color: var(--fg); }
[data-theme="dark"] #notebook .nbe-tbl tbody td:first-child { color: var(--fg-strong); }
[data-theme="dark"] #notebook .nbe-tbl tbody td:last-child { color: var(--fg); }
[data-theme="dark"] #notebook .nbe-tbl-note { color: var(--fg-faint); }

[data-theme="dark"] #notebook .nbe-scroll { scrollbar-color: var(--border) transparent; }
[data-theme="dark"] #notebook .nbe-scroll::-webkit-scrollbar-thumb { background: var(--border); background-clip: padding-box; }

.nbe-attr { display: flex; align-items: center; gap: 7px; margin: 14px 0 0;
  font: 500 11.5px/1.4 var(--font-body); color: var(--ink-500); flex-wrap: wrap;
  animation: nbe-attr-in .4s var(--ease-out) both; }
.nbe-attr[hidden] { display: none; }
@keyframes nbe-attr-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.nbe-attr-ava { width: 18px; height: 18px; border-radius: 50%; flex: none; display: inline-flex;
  align-items: center; justify-content: center; font-size: 9px; color: #fff; background: var(--grad-brand); }
.nbe-attr-tag { font-size: 10.5px; font-weight: 600; color: var(--ink-700);
  background: var(--ink-100); border-radius: var(--radius-pill); padding: 2px 8px; }

/* ── composer dock: floats over the canvas, draggable ─────────────────── */
.nbe-dock { position: absolute; left: 20px; right: 20px; bottom: 18px; z-index: 6;
  display: flex; justify-content: center; align-items: flex-end; pointer-events: none; }
.nbe-float { pointer-events: auto; will-change: transform; max-width: calc(100% - 8px);
  transition: transform .3s var(--ease-out); }
/* while open the bar is anchored to the dock (bottom-center) — the drag offset only
   moves the collapsed pill, so the prompt box itself never wanders. */
.nbe-float.is-open { transform: none !important; }
.nbe-float.is-drag { cursor: grabbing; transition: none; }

/* collapsed dot (the resting / not-focused state) */
.nbe-fab { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  padding: 0; border-radius: 50%; background: var(--surface); border: 1px solid var(--ink-200);
  box-shadow: var(--shadow-md); color: var(--ink-500); cursor: grab;
  transition: transform .15s var(--ease), border-color .15s var(--ease), box-shadow .15s var(--ease);
  animation: nbe-pop .18s var(--ease-spring); }
.nbe-fab:hover { transform: translateY(-1px); border-color: var(--indigo-400);
  box-shadow: 0 10px 30px rgba(79,70,229,.22); }
.nbe-float.is-drag .nbe-fab { cursor: grabbing; transform: scale(1.04); }
@keyframes nbe-pop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: scale(1); } }
.nbe-float.is-open .nbe-fab { display: none; }

/* the bar — one stable structure that grows in height; blooms from the dot */
.nbe-bar { display: none; position: relative; width: 540px; max-width: 100%;
  border-radius: 15px; border: 1.5px solid var(--ink-200); background: var(--surface);
  padding: 10px 11px 9px 13px; box-shadow: var(--shadow-md); overflow: hidden;
  transition: box-shadow .3s var(--ease), border-color .3s var(--ease); }
.nbe-float.is-open .nbe-bar { display: block; animation: nbe-bloom .26s var(--ease-out); }
@keyframes nbe-bloom { from { opacity: 0; transform: translateY(10px) scale(.95); } to { opacity: 1; transform: none; } }
.nbe-bar:hover { border-color: rgba(79,70,229,.30); box-shadow: 0 0 0 1px rgba(79,70,229,.16), 0 10px 30px rgba(79,70,229,.14); }
.nbe-bar.focus { border-color: rgba(79,70,229,.55); box-shadow: 0 0 0 1px rgba(79,70,229,.45), 0 12px 34px rgba(79,70,229,.20); }

.nbe-head { display: flex; align-items: flex-start; gap: 10px; }
.nbe-spark { flex: none; margin-top: 2px; }
.nbe-ta { flex: 1; width: 100%; border: none; outline: none; resize: none; background: transparent;
  display: block; height: 66px; min-height: 66px; max-height: 140px; overflow-y: hidden;
  font: 400 14px/22px var(--font-body); color: var(--ink-900); }
.nbe-ta::placeholder { color: var(--ink-400); }
.nbe-ta:disabled { color: var(--ink-500); }

.nbe-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; }
.nbe-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.nbe-hot { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 13px;
  font: 600 11.5px/1 var(--font-body); color: var(--ink-500); background: var(--ink-50);
  border: 1px solid var(--ink-150); cursor: pointer; white-space: nowrap;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease); }
.nbe-hot:hover { background: var(--surface); border-color: var(--indigo-400); color: var(--ink-900); }
.nbe-hot svg { color: var(--ink-400); flex: none; }
.nbe-hot:hover svg { color: var(--indigo-500); }
.nbe-sendwrap { display: flex; align-items: center; gap: 9px; flex: none; }
.nbe-count { font: 500 11px/1 var(--font-body); color: var(--ink-400); font-variant-numeric: tabular-nums; }
.nbe-send { flex: none; width: 28px; height: 28px; border-radius: 8px; border: none; cursor: pointer;
  background: var(--grad-brand); color: #fff; display: flex; align-items: center; justify-content: center;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
.nbe-send:hover { opacity: .92; }
.nbe-send:active { transform: scale(.94); }
.nbe-send:disabled { background: var(--ink-100); color: var(--ink-400); cursor: default; }

/* "redrafting" shimmer line across the top of the bar */
.nbe-busybar { position: absolute; left: 0; top: 0; height: 2px; width: 100%; opacity: 0;
  background: linear-gradient(90deg, transparent, var(--indigo-500), transparent);
  background-size: 42% 100%; background-repeat: no-repeat; background-position: -42% 0;
  transition: opacity .2s var(--ease); }
.nbe-bar.is-busy .nbe-busybar { opacity: 1; animation: nbe-sweep 1.05s linear infinite; }
@keyframes nbe-sweep { from { background-position: -42% 0; } to { background-position: 142% 0; } }

/* ── dark theme parity (brand/marketing dark surface) ─────────────────── */
[data-theme="dark"] #notebook .nbe-surface { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] #notebook .app-bar { background: var(--surface); border-bottom-color: var(--border); }
[data-theme="dark"] #notebook .app-bar .ab-brand { color: var(--fg-strong); }
[data-theme="dark"] #notebook .app-tabs .t { color: var(--fg-muted); }
[data-theme="dark"] #notebook .app-tabs .t.on { color: var(--fg-strong); }
[data-theme="dark"] #notebook .nbe-tbar { background: var(--surface); border-bottom-color: var(--border); }
[data-theme="dark"] #notebook .doc-loc { background: var(--surface-sunken); border-bottom-color: var(--border); }
[data-theme="dark"] #notebook .doc-loc .dl-crumb { color: var(--fg-muted); }
[data-theme="dark"] #notebook .doc-loc .dl-crumb.on { color: var(--fg-strong); }
[data-theme="dark"] #notebook .doc-loc .dl-sep { color: var(--fg-faint); }
[data-theme="dark"] #notebook .nbe-size { border-color: var(--border-strong); color: var(--fg-muted); }
[data-theme="dark"] #notebook .nbe-div { background: var(--border-strong); }
[data-theme="dark"] #notebook .nbe-ic { color: var(--fg-muted); }
[data-theme="dark"] #notebook .nbe-ic:hover { background: var(--surface-hover); color: var(--fg-strong); }
[data-theme="dark"] #notebook .nbe-canvas { background: var(--surface-sunken); }
[data-theme="dark"] #notebook .nbe-sheet { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] #notebook .nbe-h { color: var(--fg-strong); }
[data-theme="dark"] #notebook .nbe-para { color: var(--fg); }
[data-theme="dark"] #notebook .nbe-para b { color: var(--fg-strong); }
[data-theme="dark"] #notebook .nbe-static { color: var(--fg-muted); }
[data-theme="dark"] #notebook .nbe-attr-tag { background: var(--surface-hover); color: var(--fg-muted); }
[data-theme="dark"] #notebook .nbe-fab { background: var(--surface); border-color: var(--border-strong); }
[data-theme="dark"] #notebook .nbe-bar { background: var(--surface); border-color: var(--border-strong); }
[data-theme="dark"] #notebook .nbe-ta { color: var(--fg); }
[data-theme="dark"] #notebook .nbe-hot { background: var(--surface-sunken); border-color: var(--border-strong); color: var(--fg-muted); }
[data-theme="dark"] #notebook .nbe-hot:hover { background: var(--surface-hover); color: var(--fg-strong); }

.nbe-cap { font-size: var(--text-2xs); color: var(--fg-faint); margin: 14px 2px 0; max-width: 640px;
  text-wrap: pretty; }

/* ── presence stack in the app bar (you + collaborators) ──────────────── */
.nbe-pres { display: inline-flex; align-items: center; }
.nbe-pava { width: 27px; height: 27px; border-radius: 50%; display: inline-flex; align-items: center;
  justify-content: center; font: 600 10.5px/1 var(--font-body); color: #fff; letter-spacing: .02em; }
.nbe-pava + .nbe-pava, .nbe-pava-sd { margin-left: -7px; }
.nbe-pava-sd { background: #4f46e5; position: relative; z-index: 2; }
.nbe-pava-gb { background: #0d9488; z-index: 1; }
.nbe-pava-gb[hidden] { display: none; }
.nbe-pava-gb.is-join { animation: nbe-pjoin .34s var(--ease-spring) both; }
@keyframes nbe-pjoin { from { opacity: 0; transform: translateX(8px) scale(.6); } to { opacity: 1; transform: none; } }

/* ── two-pane body: editor canvas + right rail ────────────────────────── */
.nbe-body { display: flex; flex: 1 1 auto; min-height: 0; }
.nbe-canvas { min-width: 0; }

/* ── right rail panel ─────────────────────────────────────────────────── */
.nbe-panel { flex: none; width: 304px; display: flex; flex-direction: column; min-height: 0;
  background: var(--surface); border-left: 1px solid var(--ink-150); }
.nbe-phead { display: flex; align-items: center; gap: 7px; flex: none; padding: 12px 12px 11px;
  border-bottom: 1px solid var(--ink-150); color: var(--ink-800);
  font: 600 12px/1 var(--font-body); }
.nbe-phead svg { color: var(--ink-400); flex: none; }
.nbe-phead .nbe-pcount { margin-left: auto; font: 500 11px/1 var(--font-body); color: var(--ink-400);
  font-variant-numeric: tabular-nums; text-transform: none; letter-spacing: 0; }
.nbe-pbody { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 8px; scrollbar-width: thin;
  scrollbar-color: var(--ink-200) transparent; }
.nbe-pbody[hidden] { display: none; }
.nbe-pbody::-webkit-scrollbar { width: 9px; }
.nbe-pbody::-webkit-scrollbar-thumb { background: var(--ink-200); border-radius: 9px; border: 3px solid var(--surface); }

/* version history rows */
.nbe-vers { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.nbe-ver { position: relative; display: flex; gap: 9px; padding: 9px 9px 9px 8px; border-radius: var(--radius-sm);
  align-items: flex-start; transition: background var(--dur) var(--ease); }
.nbe-ver.is-current { background: rgba(79,70,229,.07); }
.nbe-ver.is-add { animation: nbe-vadd .5s var(--ease-out) both; }
@keyframes nbe-vadd { from { opacity: 0; transform: translateY(-9px); } to { opacity: 1; transform: none; } }
.nbe-ver.is-flash::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-sm);
  box-shadow: 0 0 0 1.5px rgba(79,70,229,.45); animation: nbe-vflash 1.4s var(--ease) forwards; pointer-events: none; }
@keyframes nbe-vflash { from { opacity: 1; } to { opacity: 0; } }
.nbe-vava { flex: none; width: 26px; height: 26px; border-radius: 50%; display: inline-flex;
  align-items: center; justify-content: center; font: 600 9.5px/1 var(--font-body); color: #fff;
  background: var(--c, var(--ink-500)); position: relative; }
.nbe-vava-ai { background: var(--grad-brand); }
/* dual-author badge: AI spark over the human avatar */
.nbe-vava .nbe-vbadge { position: absolute; right: -3px; bottom: -3px; width: 14px; height: 14px;
  border-radius: 50%; background: var(--grad-brand); display: inline-flex; align-items: center;
  justify-content: center; box-shadow: 0 0 0 1.5px var(--surface); }
.nbe-vava .nbe-vbadge svg { width: 9px; height: 9px; }
.nbe-vmain { flex: 1 1 auto; min-width: 0; }
.nbe-vtop { display: flex; align-items: baseline; gap: 7px; margin: 0 0 2px; }
.nbe-vtop b { font: 700 12.5px/1 var(--font-body); color: var(--ink-950); }
.nbe-vwhen { font: 400 11px/1 var(--font-body); color: var(--ink-400); font-variant-numeric: tabular-nums; }
.nbe-vact { margin: 0 0 1px; font: 400 12px/1.4 var(--font-body); color: var(--ink-700); }
.nbe-vact i { font-style: italic; color: var(--ink-500); }
.nbe-vby { margin: 0; font: 500 11px/1.3 var(--font-body); color: var(--ink-500); }
.nbe-vcur { width: 15px; height: 15px; flex: none; color: var(--accent); margin-top: 4px; }
/* photo avatar in a version row (Garrett) */
.nbe-vava.nbe-vava-img { background: var(--ink-100); overflow: hidden; }
.nbe-vava img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
/* version rows are clickable — jump back to any prior version */
.nbe-ver[role="button"] { cursor: pointer; }
.nbe-ver[role="button"]:hover { background: var(--ink-100); }
.nbe-ver.is-current[role="button"]:hover { background: rgba(79,70,229,.1); }
.nbe-ver[role="button"]:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.nbe-ver.is-restored::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-sm);
  box-shadow: 0 0 0 1.5px rgba(79,70,229,.45); animation: nbe-vflash 1s var(--ease) forwards; pointer-events: none; }

/* gaps tab */
.nbe-gaps, .nbe-srcs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.nbe-gap { display: flex; gap: 9px; padding: 9px 8px; border-radius: var(--radius-sm); align-items: flex-start; }
.nbe-gdot { flex: none; width: 8px; height: 8px; border-radius: 50%; margin-top: 4px; }
.nbe-gdot.ok { background: #059669; }
.nbe-gdot.warn { background: #d97706; }
.nbe-gdot.bad { background: #dc2626; }
.nbe-gh { margin: 0 0 2px; font: 600 12px/1.3 var(--font-body); color: var(--ink-900); }
.nbe-gm { margin: 0; font: 400 11.5px/1.4 var(--font-body); color: var(--ink-500); }
.nbe-gm b { color: var(--ink-800); font-weight: 700; }

/* sources tab */
.nbe-src { display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: var(--radius-sm); }
.nbe-sname { font: 400 12px/1.3 var(--font-body); color: var(--ink-800); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }

/* chat tab */
.nbe-chat { display: flex; flex-direction: column; gap: 10px; padding: 4px; }
.nbe-cq { align-self: flex-end; max-width: 88%; margin: 0; padding: 8px 11px; border-radius: 12px 12px 3px 12px;
  background: var(--accent); color: #fff; font: 400 12px/1.45 var(--font-body); }
.nbe-ca { display: flex; gap: 8px; align-items: flex-start; }
.nbe-ca-spark { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--grad-brand);
  display: inline-flex; align-items: center; justify-content: center; }
.nbe-ca-body { margin: 0 0 4px; font: 400 12px/1.5 var(--font-body); color: var(--ink-800); }
.nbe-ca-cite { font: 500 10.5px/1 var(--font-mono); color: var(--accent);
  background: var(--accent-tint); border-radius: var(--radius-pill); padding: 3px 8px; display: inline-block; }

/* save-button flash when a collaborator commits */
.nbe-save.is-flash { animation: nbe-saveflash .9s var(--ease); }
@keyframes nbe-saveflash { 0%,100% { box-shadow: none; } 35% { box-shadow: 0 0 0 4px rgba(37,99,235,.28); } }

/* ── remote collaborator caret + name flag (Garrett, live co-edit) ────── */
.nbe-rcaret { position: relative; display: inline-block; width: 2px; height: 1.05em; vertical-align: text-bottom;
  background: #0d9488; margin: 0 1px; border-radius: 1px; animation: nbe-cblink 1.05s steps(1) infinite; }
@keyframes nbe-cblink { 0%,55% { opacity: 1; } 56%,100% { opacity: .15; } }
.nbe-rflag { position: absolute; left: -1px; top: -1.55em; white-space: nowrap; padding: 2px 7px;
  border-radius: 5px 5px 5px 0; background: #0d9488; color: #fff; font: 600 10px/1.1 var(--font-body);
  box-shadow: var(--shadow-sm); animation: nbe-flagin .24s var(--ease-out) both; }
@keyframes nbe-flagin { from { opacity: 0; transform: translateY(3px) scale(.85); } to { opacity: 1; transform: none; } }
.nbe-rins { background: rgba(13,148,136,.16); border-radius: 2px; transition: background .9s var(--ease); }
.nbe-rins.settle { background: transparent; }

/* ── dark theme: panel, history, caret + dark-mode bug fixes ──────────── */
[data-theme="dark"] #notebook .nbe-panel { background: var(--surface); border-left-color: var(--border); }
[data-theme="dark"] #notebook .nbe-phead { color: var(--fg-strong); border-bottom-color: var(--border); }
[data-theme="dark"] #notebook .nbe-phead svg { color: var(--fg-faint); }
[data-theme="dark"] #notebook .nbe-phead .nbe-pcount { color: var(--fg-faint); }
[data-theme="dark"] #notebook .nbe-pbody { scrollbar-color: var(--border-strong) transparent; }
[data-theme="dark"] #notebook .nbe-pbody::-webkit-scrollbar-thumb { background: var(--border-strong); border-color: var(--surface); }
[data-theme="dark"] #notebook .nbe-ver.is-current { background: rgba(109,123,255,.12); }
/* fix: history-row hover was washing light (--ink-100) in dark */
[data-theme="dark"] #notebook .nbe-ver[role="button"]:hover { background: var(--surface-hover); }
[data-theme="dark"] #notebook .nbe-ver.is-current[role="button"]:hover { background: rgba(109,123,255,.18); }
/* fix: top-right avatar showed a white ring (--white box-shadow) in dark */
[data-theme="dark"] #notebook .app-ava { box-shadow: 0 0 0 1.5px var(--surface), 0 1px 4px rgba(0,0,0,.4); }
/* fix: composer send + quiet Save read as light grey blocks in dark */
[data-theme="dark"] #notebook .nbe-send:disabled { background: var(--surface-hover); color: var(--fg-faint); }
[data-theme="dark"] #notebook .nbe-save:disabled { background: transparent; color: var(--fg-faint); border-color: var(--border-strong); }
/* fix: editable-paragraph hover ring was light (--ink-200) in dark */
[data-theme="dark"] #notebook .nbe-para[contenteditable]:hover { box-shadow: inset 0 0 0 1px var(--border-strong); }
[data-theme="dark"] #notebook .nbe-para[contenteditable]:focus { background: rgba(109,123,255,.08); }
[data-theme="dark"] #notebook .nbe-vtop b { color: var(--fg-strong); }
[data-theme="dark"] #notebook .nbe-vwhen { color: var(--fg-faint); }
[data-theme="dark"] #notebook .nbe-vact { color: var(--fg); }
[data-theme="dark"] #notebook .nbe-vact i, [data-theme="dark"] #notebook .nbe-vby { color: var(--fg-muted); }
[data-theme="dark"] #notebook .nbe-gh { color: var(--fg-strong); }
[data-theme="dark"] #notebook .nbe-gm { color: var(--fg-muted); }
[data-theme="dark"] #notebook .nbe-gm b { color: var(--fg); }
[data-theme="dark"] #notebook .nbe-gdot.ok { background: #34d399; }
[data-theme="dark"] #notebook .nbe-gdot.warn { background: #fbbf24; }
[data-theme="dark"] #notebook .nbe-gdot.bad { background: #f87171; }
[data-theme="dark"] #notebook .nbe-sname { color: var(--fg); }
[data-theme="dark"] #notebook .nbe-ca-body { color: var(--fg); }
[data-theme="dark"] #notebook .nbe-vava .nbe-vbadge { box-shadow: 0 0 0 2px var(--surface); }

/* ── responsive: collapse later toolbar groups, shrink the bar ────────── */
@media (max-width: 980px) {
  .nbe-panel { display: none; }
}
@media (max-width: 760px) {
  #notebook .nbe-surface { height: 560px; }
  .nbe-collapsible { display: none; }
  .nbe-canvas { padding: 18px 14px 0; }
  .nbe-sheet { padding: 22px 20px 26px; }
  .nbe-bar { width: 100%; }
  .nbe-dock { left: 12px; right: 12px; bottom: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .nbe-fab, .nbe-bar, .nbe-attr, .nbe-ver.is-add, .nbe-pava-gb.is-join, .nbe-rflag { animation: none; }
  .nbe-para { transition: none; }
  .nbe-busybar { display: none; }
  .nbe-rcaret { animation: none; }
}

/* ════════════════ REAL-TIME TEAM COLLABORATION (#collab) ════════════════
   The Notebook editor's social layer: a Figma-style presence stack in the
   breadcrumb, a live comment thread anchored to a text selection (tagging,
   reactions, resolve), and instant @mention notifications. Driven by
   initCollab() in site.js. */
.cl-shell { position: relative; }
.cl-surface { display: flex; flex-direction: column; height: 700px; overflow: hidden; }

/* presence stack — overlapping ringed avatars, Figma multiplayer style */
.cl-presence { margin-left: auto; display: inline-flex; align-items: center; }
.cl-pava { width: 26px; height: 26px; border-radius: 50%; margin-left: -7px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  font: 700 9.5px/1 var(--font-body); color: #fff; background: var(--ring, #4f46e5);
  position: relative; z-index: 1;
  transition: opacity .35s var(--ease), transform .3s var(--ease), width .35s var(--ease), margin .35s var(--ease); }
.cl-pava:first-child { margin-left: 0; }
/* not-yet-joined: collapse to zero footprint so the stack grows as people
   arrive instead of fading into pre-reserved slots */
.cl-pava.cl-join { opacity: 0; transform: scale(.5) translateX(8px); width: 0; margin-left: 0; }
.cl-pava.cl-join.in { opacity: 1; transform: none; width: 26px; margin-left: -7px; animation: clJoin .44s var(--ease-spring); }
/* a participant drifts out of the leaf after their last contribution */
.cl-pava.cl-leaving { opacity: 0; transform: scale(.4); width: 0; margin-left: 0; pointer-events: none; }
@keyframes clJoin { 0% { opacity: 0; transform: scale(.4) translateX(10px); }
  60% { transform: scale(1.16); } 100% { opacity: 1; transform: none; } }
.cl-pcount { margin-left: 11px; font: 500 11px/1 var(--font-body); color: var(--ink-500); white-space: nowrap; }
/* photo avatar in a presence stack (Garrett) + his live join into the notebook breadcrumb */
.cl-pava.cl-pava-img { background: var(--ink-100); overflow: hidden; padding: 0; }
.cl-pava img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.cl-pava[data-nb-pres-gb][hidden] { display: none; }
.cl-pava[data-nb-pres-gb].is-join { animation: nbe-pjoin .34s var(--ease-spring) both; }

/* canvas: a flex row — optional outline rail (wide only) + the editing stage */
.cl-canvas { position: relative; flex: 1; min-height: 0; display: flex; background: var(--white); }
/* the stage holds the leaf + floating thread/pin and is the positioning context */
.cl-stage { position: relative; flex: 1; min-width: 0; overflow: hidden; }
.cl-stage::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 60px;
  background: linear-gradient(to bottom, transparent, var(--white)); pointer-events: none; z-index: 2; }
.cl-sheet { padding: 22px 30px 44px; max-width: 660px; }

/* ── outline + sources rail (renders only on wide desktop, see media query) ── */
.cl-side { display: none; flex-direction: column; width: 248px; flex: none; overflow-y: auto;
  border-right: 1px solid var(--ink-100); background: var(--ink-50); padding: 14px 12px 28px; }
.cl-side-h { margin: 6px 6px 8px; font: 600 10.5px/1 var(--font-body); letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-400); }
.cl-side-h + .cl-src { margin-top: 0; }
.cl-tree, .cl-src { list-style: none; margin: 0 0 18px; padding: 0; }
.cl-tree li { font: 400 12.5px/1.3 var(--font-body); color: var(--ink-600); border-radius: 6px;
  padding: 6px 8px; cursor: default; transition: background .14s var(--ease), color .14s var(--ease); }
.cl-tree li:hover { background: var(--ink-100); }
.cl-tw { font-weight: 600; color: var(--ink-800); display: flex; align-items: center; gap: 4px; }
.cl-tchev { width: 13px; height: 13px; flex: none; color: var(--ink-400); }
.cl-tc { margin-left: 16px; }
.cl-tc-on { background: var(--blue-50); color: var(--blue-600); font-weight: 600; }
.cl-tc-on:hover { background: var(--blue-50); }
.cl-src li { font: 400 12px/1.3 var(--font-body); color: var(--ink-600); padding: 5px 8px;
  display: flex; align-items: center; gap: 7px; }
.cl-src-grp { font-weight: 600; color: var(--ink-800); flex: 1; min-width: 0; }
.cl-src-n { font: 600 10px/1 var(--font-body); color: var(--ink-500); background: var(--ink-100);
  border-radius: 999px; padding: 2px 6px; flex: none; }
.cl-src-doc { color: var(--ink-600); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl-doc-tag { font: 700 8.5px/1 var(--font-body); letter-spacing: .04em; border-radius: 4px;
  padding: 3px 4px; flex: none; }
.cl-doc-tag.pdf { color: var(--red-600); background: #fef2f2; }
.cl-doc-tag.doc { color: var(--blue-600); background: var(--blue-50); }
.cl-src-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* a source doc landing live in the rail — appears, processes, then settles in like the rest */
.cl-src-new[hidden] { display: none; }
.cl-src-new.in { animation: clSrcIn .42s var(--ease-out) both; }
.cl-src-new.processing .cl-src-name { color: var(--ink-400); }
.cl-src-new.processing .cl-doc-tag { opacity: .5; }
.cl-src-new.done { animation: clSrcFlash 1.3s var(--ease) both; }
.cl-src-status { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 13px; height: 13px; }
.cl-src-spin { width: 12px; height: 12px; border: 1.5px solid var(--ink-200); border-top-color: var(--blue-600);
  border-radius: 50%; animation: clSpin .7s linear infinite; }
.cl-src-check { width: 13px; height: 13px; color: var(--green-600); animation: clCheckPop .3s var(--ease-spring) both; }
.cl-src-count.bumped { animation: clCountBump .5s var(--ease) both; }
@keyframes clSrcIn { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } }
@keyframes clSpin { to { transform: rotate(360deg); } }
@keyframes clCheckPop { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }
@keyframes clSrcFlash { 0% { background: var(--blue-50); } 100% { background: transparent; } }
@keyframes clCountBump { 0% { transform: none; } 35% { transform: scale(1.25); color: var(--blue-600); } 100% { transform: none; } }
[data-theme="dark"] .cl-src-spin { border-color: var(--border); border-top-color: var(--accent); }
[data-theme="dark"] .cl-src-check { color: #6ee7b7; }
[data-theme="dark"] .cl-src-new.done { animation-name: clSrcFlashDark; }
@keyframes clSrcFlashDark { 0% { background: rgba(37,99,235,.18); } 100% { background: transparent; } }
@media (prefers-reduced-motion: reduce) {
  .cl-src-new.in, .cl-src-new.done, .cl-src-check, .cl-src-count.bumped { animation: none; }
  .cl-src-spin { animation-duration: 1.4s; }
}

/* mobile bottom-sheet backdrop — only painted on small screens */
.cl-scrim { position: absolute; inset: 0; z-index: 5; background: rgba(17,24,39,.34);
  opacity: 0; pointer-events: none; transition: opacity .26s var(--ease); }
.cl-scrim[hidden] { display: none; }
.cl-para { font: 400 14px/1.7 var(--font-body); color: var(--ink-700); margin: 0 0 13px; max-width: 560px; }

/* anchored selection highlight */
.cl-sel { border-radius: 3px; padding: 1px 2px; box-decoration-break: clone; -webkit-box-decoration-break: clone;
  transition: background .35s var(--ease), box-shadow .35s var(--ease); }
.cl-sel.on { background: rgba(37,99,235,.16); box-shadow: 0 0 0 1px rgba(37,99,235,.30); }
.cl-sel.resolved { background: var(--green-100); box-shadow: none; }

/* Figma-style comment pin, anchored to the selection */
.cl-pin { position: absolute; z-index: 5; display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 8px 3px 3px; background: var(--white); border: 1px solid var(--ink-200);
  border-radius: 14px 14px 14px 3px; box-shadow: 0 6px 18px -6px rgba(17,24,39,.45);
  cursor: pointer; transform-origin: bottom left;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease); }
.cl-pin[hidden] { display: none; }
.cl-pin.in { animation: clPinDrop .42s var(--ease-spring); }
.cl-pin:hover { transform: translateY(-1px) scale(1.04); box-shadow: 0 10px 24px -6px rgba(17,24,39,.5); }
.cl-pin.is-open { opacity: 0; pointer-events: none; transform: scale(.7); }
.cl-pin-ava { width: 24px; height: 24px; border-radius: 50%; flex: none; color: #fff;
  font: 700 9px/1 var(--font-body); display: inline-flex; align-items: center; justify-content: center; }
.cl-pin-n { font: 700 11px/1 var(--font-body); color: var(--ink-700); padding-right: 1px; }
@keyframes clPinDrop { 0% { opacity: 0; transform: translateY(-8px) scale(.4); }
  60% { transform: translateY(0) scale(1.14); } 100% { opacity: 1; transform: none; } }

/* the live comment thread popover, anchored over the passage */
.cl-thread { position: absolute; top: 96px; right: 26px; width: 332px; z-index: 6;
  background: var(--white); border: 1px solid var(--ink-200); border-radius: 12px;
  box-shadow: 0 22px 60px -20px rgba(17,24,39,.42); overflow: hidden;
  display: flex; flex-direction: column; max-height: calc(100% - 112px);
  transform-origin: top right; opacity: 0; visibility: hidden; pointer-events: none;
  transform: scale(.92) translateY(-8px);
  transition: opacity .26s var(--ease-out), transform .3s var(--ease-spring), visibility 0s linear .3s; }
.cl-thread.open { opacity: 1; visibility: visible; pointer-events: auto; transform: none;
  transition: opacity .24s var(--ease-out), transform .34s var(--ease-spring); }
.cl-th-count { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px;
  padding: 0 4px; border-radius: 999px; background: var(--ink-100); color: var(--ink-600);
  font: 700 10px/1 var(--font-body); margin-left: 4px; vertical-align: middle; }
.cl-thread-head { display: flex; align-items: center; justify-content: space-between;
  padding: 9px 12px; border-bottom: 1px solid var(--ink-100); flex: none; }
.cl-th-title { font: 700 12px/1 var(--font-body); color: var(--ink-700); }
.cl-resolve { display: inline-flex; align-items: center; gap: 4px; border: 1px solid #bbf7d0;
  background: var(--green-100); color: var(--green-700); border-radius: 999px; padding: 3px 9px;
  font: 600 11px/1 var(--font-body); cursor: pointer; transition: background .15s var(--ease), color .15s var(--ease); }
.cl-resolve svg { width: 12px; height: 12px; }
.cl-resolve:hover { background: #bbf7d0; }
.cl-thread.resolved .cl-resolve { background: var(--green-600); color: #fff; border-color: var(--green-600); }

.cl-msgs { padding: 5px 4px; overflow-y: auto; flex: 1; max-height: 232px; }
.cl-msg { display: flex; gap: 9px; padding: 7px 10px; opacity: 0; transform: translateY(7px);
  transition: opacity .34s var(--ease-out), transform .34s var(--ease-out); }
.cl-msg.in { opacity: 1; transform: none; }
/* click-to-locate flash: neutral wash only — NO colored left border (no ai-slop left accents) */
.cl-msg.flash { animation: clMsgFlash 1.5s var(--ease); }
@keyframes clMsgFlash { 0%, 18% { background: var(--ink-100); border-radius: 8px; }
  100% { background: transparent; border-radius: 8px; } }
[data-theme="dark"] .cl-msg.flash { animation-name: clMsgFlashDark; }
@keyframes clMsgFlashDark { 0%, 18% { background: var(--surface-sunken); border-radius: 8px; }
  100% { background: transparent; border-radius: 8px; } }
.cl-msg-ava { flex: none; width: 26px; height: 26px; border-radius: 50%; color: #fff;
  font: 700 9.5px/1 var(--font-body); display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 4px rgba(0,0,0,.25); }
.cl-msg-main { min-width: 0; flex: 1; }
.cl-msg-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cl-name { font: 700 12px/1.2 var(--font-body); color: var(--ink-900); }
.cl-you { font: 700 8.5px/1 var(--font-body); letter-spacing: .04em; text-transform: uppercase;
  color: var(--blue-600); background: var(--blue-50); border-radius: 4px; padding: 2px 4px; }
.cl-role { font: 500 9.5px/1 var(--font-body); color: var(--ink-500); background: var(--ink-100);
  border-radius: 4px; padding: 2px 5px; }
.cl-time { margin-left: auto; font: 400 10.5px/1 var(--font-body); color: var(--ink-400); }
.cl-msg-body { font: 400 12.5px/1.5 var(--font-body); color: var(--ink-700); margin: 3px 0 0; }
.cl-at { color: var(--blue-600); font-weight: 600; background: var(--accent-tint); border-radius: 3px; padding: 0 3px; }

/* reactions */
.cl-rx-row { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 6px; }
.cl-rx { display: flex; flex-wrap: wrap; gap: 5px; }
.cl-rx:empty { display: none; }
.cl-rx-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; border-radius: 999px;
  border: 1px solid var(--ink-200); background: var(--ink-50); font: 600 11px/1 var(--font-body);
  color: var(--ink-700); cursor: pointer; animation: clPop .32s var(--ease-spring);
  transition: border-color .15s var(--ease), background .15s var(--ease), transform .12s var(--ease); }
.cl-rx-chip:hover { transform: translateY(-1px); }
.cl-rx-chip.mine { border-color: rgba(37,99,235,.4); background: var(--blue-50); color: var(--blue-600); }
.cl-rx-chip .e { font-size: 12px; }
@keyframes clPop { 0% { transform: scale(0); } 60% { transform: scale(1.18); } 100% { transform: scale(1); } }

/* add-reaction button (appears on message hover, always visible if reactions exist) */
.cl-rx-add { position: relative; width: 22px; height: 22px; flex: none; border-radius: 999px;
  border: 1px solid var(--ink-200); background: var(--white); color: var(--ink-500);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  opacity: 0; transition: opacity .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease), background .15s var(--ease); }
.cl-msg:hover .cl-rx-add, .cl-rx-add:focus-visible, .cl-rx-add.on { opacity: 1; }
.cl-rx-add:hover, .cl-rx-add.on { color: var(--blue-600); border-color: rgba(37,99,235,.4); background: var(--blue-50); }
.cl-rx-add svg { width: 13px; height: 13px; }
.cl-rx-plus { position: absolute; right: -2px; bottom: -2px; width: 11px; height: 11px; border-radius: 50%;
  background: var(--blue-600); color: #fff; font: 700 9px/11px var(--font-body); font-style: normal;
  text-align: center; box-shadow: 0 0 0 1.5px var(--white); }

/* reaction picker */
.cl-rx-picker { position: absolute; z-index: 9; display: flex; gap: 2px; padding: 5px;
  background: var(--white); border: 1px solid var(--ink-200); border-radius: 999px;
  box-shadow: 0 10px 28px -8px rgba(17,24,39,.4); animation: clPop .2s var(--ease-spring); transform-origin: bottom center; }
.cl-rx-picker[hidden] { display: none; }
.cl-rx-picker button { width: 28px; height: 28px; border: none; background: transparent; border-radius: 50%;
  font-size: 16px; line-height: 1; cursor: pointer; transition: transform .12s var(--ease), background .12s var(--ease); }
.cl-rx-picker button:hover { background: var(--ink-100); transform: scale(1.22); }

/* typing indicator */
.cl-typing { display: flex; align-items: center; gap: 9px; padding: 7px 10px; }
.cl-typing[hidden] { display: none; }
.cl-dots { display: inline-flex; gap: 3px; padding: 8px 11px; background: var(--ink-100); border-radius: 12px; }
.cl-dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--ink-400); animation: clBlink 1s infinite; }
.cl-dots i:nth-child(2) { animation-delay: .18s; }
.cl-dots i:nth-child(3) { animation-delay: .36s; }
@keyframes clBlink { 0%, 60%, 100% { opacity: .3; } 30% { opacity: 1; } }

/* reply composer — real input */
.cl-reply { display: flex; align-items: center; gap: 8px; padding: 9px 11px; border-top: 1px solid var(--ink-100); flex: none; }
.cl-reply-ava { width: 22px; height: 22px; font-size: 8.5px; box-shadow: none; }
.cl-reply-field { position: relative; flex: 1; min-width: 0; }
.cl-reply-input { width: 100%; font: 400 12px/1.2 var(--font-body); color: var(--ink-900);
  background: var(--ink-50); border: 1px solid var(--ink-150); border-radius: 999px; padding: 8px 38px 8px 12px;
  outline: none; transition: border-color .15s var(--ease), box-shadow .15s var(--ease), background .15s var(--ease); }
.cl-reply-input::placeholder { color: var(--ink-400); }
.cl-reply-input:focus { background: var(--white); border-color: var(--blue-600); box-shadow: 0 0 0 3px rgba(79,70,229,.12); }
.cl-reply-send { position: absolute; right: 5px; top: 50%; transform: translateY(-50%);
  width: 26px; height: 26px; display: grid; place-items: center; flex: none;
  background: transparent; color: var(--ink-400); border: none; border-radius: 50%; cursor: pointer;
  transition: color .15s var(--ease), background .15s var(--ease), transform .15s var(--ease-spring); }
.cl-reply-send svg { width: 15px; height: 15px; }
.cl-reply-send:hover { color: #fff; background: var(--blue-600); }
.cl-reply-send.armed { color: var(--blue-600); }
.cl-reply-send.armed:hover { color: #fff; transform: translateY(-50%) scale(1.06); }
.cl-reply-send:active { transform: translateY(-50%) scale(.92); }

/* resolved tag */
.cl-resolved-tag { display: flex; align-items: center; gap: 6px; padding: 9px 12px; border-top: 1px solid var(--ink-100);
  font: 600 11.5px/1.3 var(--font-body); color: var(--green-700); background: var(--green-100); flex: none; }
.cl-resolved-tag svg { width: 13px; height: 13px; flex: none; }
.cl-resolved-tag[hidden] { display: none; }

/* notifications dropdown — positioned within .cl-shell so it escapes the surface clip */
.cl-notif-pop { top: 46px; right: 12px; }
.cl-notif-pop .notif-item[hidden] { display: none; }
/* notif items are clickable buttons here (jump to the tagged comment) */
.cl-notif-pop .notif-item { width: 100%; text-align: left; font: inherit; color: inherit;
  background: transparent; border: none; border-bottom: 1px solid var(--ink-100); cursor: pointer;
  transition: background .14s var(--ease); }
/* unread = the neutral hover tone (not blue) + a red presence dot; no distinct
   unread-hover state — the row already sits at the hover color */
.cl-notif-pop .notif-item.unread { background: var(--ink-100); }
.cl-notif-pop .notif-item.unread::before { background: var(--red-500); }
.cl-notif-pop .notif-item:hover,
.cl-notif-pop .notif-item.unread:hover { background: var(--ink-100); }

/* dark theme parity for #collab */
[data-theme="dark"] #collab .surface { background: var(--surface); border-color: var(--border); color: var(--fg); }
[data-theme="dark"] #collab .app-bar { background: var(--surface); border-bottom-color: var(--border); }
[data-theme="dark"] #collab .app-bar .ab-brand { color: var(--fg-strong); }
[data-theme="dark"] #collab .app-tabs .t { color: var(--fg-muted); }
[data-theme="dark"] #collab .app-tabs .t.on { color: var(--fg-strong); }
[data-theme="dark"] #collab .doc-loc { background: var(--surface-sunken); border-bottom-color: var(--border); }
[data-theme="dark"] #collab .doc-loc .dl-crumb { color: var(--fg-muted); }
[data-theme="dark"] #collab .doc-loc .dl-crumb.on { color: var(--fg-strong); }
[data-theme="dark"] #collab .doc-loc .dl-sep { color: var(--fg-faint); }
[data-theme="dark"] #collab .nbe-h { color: var(--fg-strong); }
[data-theme="dark"] #collab .nbe-dh { color: var(--fg-muted); }
[data-theme="dark"] .cl-canvas { background: var(--surface); }
[data-theme="dark"] .cl-stage::after { background: linear-gradient(to bottom, transparent, var(--surface)); }
[data-theme="dark"] .cl-para { color: var(--fg); }
[data-theme="dark"] .cl-pcount { color: var(--fg-muted); }
/* presence-stack avatars are ringless site-wide — no box-shadow in either theme */
[data-theme="dark"] .cl-thread { background: var(--surface); border-color: var(--border); box-shadow: 0 22px 60px -18px rgba(0,0,0,.7); }
[data-theme="dark"] .cl-thread-head { border-bottom-color: var(--border); }
[data-theme="dark"] .cl-th-title { color: var(--fg-muted); }
[data-theme="dark"] .cl-name { color: var(--fg-strong); }
[data-theme="dark"] .cl-msg-body { color: var(--fg); }
[data-theme="dark"] .cl-role { background: var(--surface-sunken); color: var(--fg-muted); }
[data-theme="dark"] .cl-time { color: var(--fg-faint); }
[data-theme="dark"] .cl-rx-chip { background: var(--surface-sunken); border-color: var(--border); color: var(--fg-muted); }
[data-theme="dark"] .cl-reply { border-top-color: var(--border); }
[data-theme="dark"] .cl-reply-input { background: var(--surface-sunken); border-color: var(--border); color: var(--fg-faint); }
[data-theme="dark"] .cl-dots { background: var(--surface-sunken); }
[data-theme="dark"] .cl-resolved-tag { border-top-color: var(--border); }
[data-theme="dark"] .cl-resolve { border-color: rgba(16,163,74,.4); }
[data-theme="dark"] .cl-resolve:hover { background: rgba(16,163,74,.3); }
[data-theme="dark"] .cl-sel.resolved { background: rgba(16,163,74,.22); }
[data-theme="dark"] .cl-pin { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .cl-pin-n { color: var(--fg-muted); }
[data-theme="dark"] .cl-th-count { background: var(--surface-sunken); color: var(--fg-muted); }
[data-theme="dark"] .cl-rx-add { background: var(--surface); border-color: var(--border); color: var(--fg-muted); }
[data-theme="dark"] .cl-rx-add:hover, [data-theme="dark"] .cl-rx-add.on { background: rgba(37,99,235,.16); color: var(--fg-strong); border-color: rgba(37,99,235,.5); }
[data-theme="dark"] .cl-rx-plus { box-shadow: 0 0 0 1.5px var(--surface); }
[data-theme="dark"] .cl-rx-picker { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .cl-rx-picker button:hover { background: var(--surface-sunken); }
[data-theme="dark"] .cl-reply-input { color: var(--fg); }
[data-theme="dark"] .cl-reply-input:focus { background: var(--surface); }
[data-theme="dark"] .cl-notif-pop .notif-item { border-bottom-color: var(--border); }
[data-theme="dark"] .cl-notif-pop .notif-item.unread { background: var(--surface-sunken); }
[data-theme="dark"] .cl-notif-pop .notif-item.unread::before { background: #f2635f; }
[data-theme="dark"] .cl-notif-pop .notif-item:hover,
[data-theme="dark"] .cl-notif-pop .notif-item.unread:hover { background: var(--surface-sunken); }
/* dark: app-bar you-avatar — surface-toned ring, not white */
[data-theme="dark"] #collab .app-ava { box-shadow: 0 0 0 1.5px var(--surface), 0 1px 4px rgba(0,0,0,.4); }
/* dark: bell hover/open — stroke responds, background always transparent */
[data-theme="dark"] #collab [data-cl-notif-btn]:hover { background: transparent; color: var(--fg-strong); }
[data-theme="dark"] #collab [data-cl-notif-btn].on,
[data-theme="dark"] #collab [data-cl-notif-btn].on:hover { background: transparent; color: var(--accent); }
/* dark: "YOU" badge — was light blue-50 box; muted accent wash instead */
[data-theme="dark"] #collab .cl-you { background: rgba(37,99,235,.18); color: #93b4ff; }
/* dark: Resolve button — was light mint; muted translucent green to match the resolved tag */
[data-theme="dark"] #collab .cl-resolve { background: rgba(16,163,74,.14); color: #5ec990; }
[data-theme="dark"] #collab .cl-thread.resolved .cl-resolve { background: rgba(16,163,74,.28); color: #d6f5e3; border-color: rgba(16,163,74,.5); }
/* dark: notification dot — softened red + dark ring (no white border) */
[data-theme="dark"] #collab .ab-badge--dot { background: #f2635f; box-shadow: 0 0 0 2px var(--surface), 0 0 6px rgba(242,99,95,.45); }
/* dark: notifications popout — dark surface + readable text */
[data-theme="dark"] #collab .cl-notif-pop { background: var(--surface); border-color: var(--border); box-shadow: 0 22px 60px -16px rgba(0,0,0,.7); }
[data-theme="dark"] #collab .notif-head { border-bottom-color: var(--border); }
[data-theme="dark"] #collab .notif-head .nh-title { color: var(--fg-strong); }
[data-theme="dark"] #collab .nb-line { color: var(--fg); }
[data-theme="dark"] #collab .nb-sub { color: var(--fg-muted); }
[data-theme="dark"] #collab .nb-date { color: var(--fg-faint); }
/* dark: resolved tag — muted green wash, not the light mint chip */
[data-theme="dark"] #collab .cl-resolved-tag { background: rgba(16,163,74,.14); color: #5ec990; }

/* ── wide desktop: reveal the outline + sources rail so the leaf isn't marooned ── */
@media (min-width: 1060px) {
  .cl-side { display: flex; }
  .cl-sheet { padding: 26px 40px 48px; max-width: 720px; }
}
[data-theme="dark"] .cl-side { background: var(--surface-sunken); border-right-color: var(--border); }
[data-theme="dark"] .cl-side-h { color: var(--fg-faint); }
[data-theme="dark"] .cl-tree li, [data-theme="dark"] .cl-src li { color: var(--fg-muted); }
[data-theme="dark"] .cl-tw, [data-theme="dark"] .cl-src-grp { color: var(--fg-strong); }
[data-theme="dark"] .cl-tree li:hover { background: var(--surface); }
[data-theme="dark"] .cl-tc-on, [data-theme="dark"] .cl-tc-on:hover { background: rgba(37,99,235,.16); color: var(--fg-strong); }
[data-theme="dark"] .cl-src-n { background: var(--surface); color: var(--fg-muted); }
[data-theme="dark"] .cl-doc-tag.pdf { background: rgba(239,68,68,.18); color: #fca5a5; }
[data-theme="dark"] .cl-doc-tag.doc { background: rgba(37,99,235,.2); color: #93c5fd; }

/* ── mobile: pin stays visible; tapping the passage (or pin) opens a near-fullscreen
      bottom sheet over a scrim, instead of a cramped floating popover ── */
@media (max-width: 720px) {
  .cl-surface { height: 560px; }
  .cl-side { display: none !important; }
  .cl-sheet { padding: 18px 18px 8px; max-width: none; }
  .cl-sel { cursor: pointer; }
  /* the thread becomes a bottom sheet anchored to the stage */
  .cl-thread { position: absolute; left: 0; right: 0; bottom: 0; top: auto; width: auto; max-width: none;
    max-height: 86% !important; border-radius: 16px 16px 0 0; transform-origin: bottom center;
    transform: translateY(101%); opacity: 1; visibility: visible;
    box-shadow: 0 -16px 44px -16px rgba(17,24,39,.5);
    transition: transform .34s var(--ease-spring), visibility 0s; }
  .cl-thread.open { transform: translateY(0); }
  .cl-thread::before { content: ""; position: absolute; top: 7px; left: 50%; transform: translateX(-50%);
    width: 36px; height: 4px; border-radius: 999px; background: var(--ink-200); }
  .cl-thread-head { padding-top: 16px; }
  .cl-msgs { max-height: none !important; flex: 1; }
  .cl-stage.sheet-open .cl-scrim { opacity: 1; pointer-events: auto; }
}
[data-theme="dark"] .cl-thread::before { background: var(--border); }

/* ═══════════════════════════════════════════════════════════════════════════
   SOURCES — AI ingest → metadata extraction → live eCTD tree  (#sources)
   Left lane reads each uploaded doc; extracted paragraphs/tables/tags fly into
   the eCTD tree on the right, which fills live. Sort regroups by extracted
   field; the view toggle switches tree / list / grid. Light + dark + responsive.
   ═══════════════════════════════════════════════════════════════════════════ */
.src-surface { display: flex; flex-direction: column; }

/* toolbar */
.src-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 14px; border-bottom: 1px solid var(--ink-150); background: #fff; }
.src-tb-left { display: flex; align-items: center; gap: 8px; min-width: 0; }
.src-title { font: 600 13px/1 var(--font-display); color: var(--ink-950); letter-spacing: -0.01em; }
.src-tb-right { display: flex; align-items: center; gap: 10px; flex: none; }

/* sort control */
.src-sort { position: relative; display: flex; align-items: center; gap: 6px; }
.src-sort-lbl { font: 500 11.5px/1 var(--font-body); color: var(--ink-400); white-space: nowrap; }
@media (max-width: 560px) { .src-sort-lbl { display: none; } }
.src-sort-btn { display: inline-flex; align-items: center; gap: 5px; font: 600 12px/1 var(--font-body);
  color: var(--ink-800); background: var(--white); border: 1px solid var(--ink-300);
  border-radius: var(--radius-sm); padding: 6px 8px 6px 10px; cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.src-sort-btn svg { width: 13px; height: 13px; color: var(--ink-400); transition: transform var(--dur) var(--ease); }
.src-sort-btn:hover:not(:disabled) { background: var(--ink-50); }
.src-sort-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.src-sort-btn:disabled { opacity: .55; cursor: default; }
.src-sort-menu { position: absolute; top: calc(100% + 5px); right: 0; z-index: 30; min-width: 152px;
  background: var(--white); border: 1px solid var(--ink-200); border-radius: var(--radius-md);
  box-shadow: var(--shadow-md); padding: 4px; animation: notifIn .16s var(--ease-out); }
.src-sort-menu[hidden] { display: none; }
.src-sort-menu button { display: flex; align-items: center; justify-content: space-between; width: 100%;
  font: 500 12.5px/1 var(--font-body); color: var(--ink-700); background: none; border: none; cursor: pointer;
  padding: 8px 9px; border-radius: var(--radius-xs); text-align: left; }
.src-sort-menu button:hover { background: var(--ink-50); color: var(--ink-900); }
.src-sort-menu button.on { color: var(--blue-600); font-weight: 600; }
.src-sort-menu button.on::after { content: ""; width: 13px; height: 13px; flex: none;
  background: currentColor; -webkit-mask: var(--ck) center/contain no-repeat; mask: var(--ck) center/contain no-repeat;
  --ck: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E"); }

/* view toggle */
.src-views { display: inline-flex; padding: 2px; gap: 2px; background: var(--ink-100); border-radius: var(--radius-sm); }
.src-view { width: 28px; height: 26px; display: inline-flex; align-items: center; justify-content: center;
  border: none; background: transparent; color: var(--ink-500); border-radius: 5px; cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }
.src-view svg { width: 15px; height: 15px; }
.src-view:hover:not(:disabled) { color: var(--ink-900); }
.src-view.on { background: var(--white); color: var(--blue-600); box-shadow: 0 1px 3px rgba(17,24,39,.12); }
.src-view:disabled { opacity: .5; cursor: default; }

/* body: ingest lane + main */
.src-body { display: grid; grid-template-columns: 300px 1fr; min-height: 0; height: 560px; }

/* ── ingest lane ───────────────────────────────────────────────────────── */
.src-ingest { display: flex; flex-direction: column; gap: 11px; padding: 14px; border-right: 1px solid var(--ink-150);
  background: var(--ink-25); min-width: 0; overflow: hidden; }
.src-upload { display: flex; align-items: center; gap: 9px; padding: 11px 12px; border-radius: var(--radius-md);
  border: 1.5px dashed var(--ink-300); background: var(--white); color: var(--ink-600); cursor: pointer;
  font: 600 12px/1.3 var(--font-body); text-align: left; transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease); }
.src-upload:hover { border-color: var(--blue-300); background: var(--blue-50); color: var(--blue-700); }
.src-upload.busy { border-style: solid; border-color: var(--blue-300); }
.src-upload .src-up-ic { width: 30px; height: 30px; flex: none; border-radius: 8px; display: flex; align-items: center; justify-content: center;
  background: var(--accent-tint); color: var(--blue-600); }
.src-upload .src-up-ic svg { width: 16px; height: 16px; }
.src-upload b { display: block; color: var(--ink-900); font-weight: 700; }
.src-upload span.sub { font-weight: 500; color: var(--ink-400); }

/* scanner — the document currently being read, as a bare A5 page (no container
   chrome): the sheet fills the width at real-paper aspect and is cropped to its
   top, so it reads unmistakably as a sheet of paper being scanned. */
.src-scan { position: relative; flex: none; display: flex; flex-direction: column; gap: 9px; --tc: var(--red-500); }
.src-scan.pdf { --tc: var(--red-500); }
.src-scan.doc { --tc: var(--blue-500); }
.src-scan.xls { --tc: var(--green-600); }
.src-scan.csv { --tc: var(--ink-500); }
.src-scan-win { position: relative; height: 234px; overflow: hidden; display: flex;
  align-items: flex-start; justify-content: center; border-radius: 8px 8px 0 0; }
.src-sheet { position: relative; width: 100%; aspect-ratio: 1 / 1.414; background: #fff;
  border: 1px solid var(--ink-200); border-bottom: none; border-radius: 7px 7px 0 0;
  box-shadow: 0 14px 30px -14px rgba(16,22,48,.36); padding: 19px 19px 0;
  display: flex; flex-direction: column; gap: 7px; overflow: hidden; }
.src-sheet::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 5px; background: var(--tc); }
.src-sheet-body { display: flex; flex-direction: column; gap: 7px; }
/* scale the shared page-content marks up for the large scanner sheet */
.src-sheet .th-ttl { font-size: 12.5px; line-height: 1.3; margin-bottom: 1px; }
.src-sheet .th-ext { top: 13px; right: 14px; font-size: 8.5px; }
.src-sheet .th-meta { height: 4px; margin-bottom: 3px; }
.src-sheet .th-blk { gap: 5px; }
.src-sheet .th-ln { height: 4.5px; }
.src-sheet .th-h { height: 6.5px; margin-top: 2px; }
.src-sheet .th-tbl { gap: 3px; padding: 4px; }
.src-sheet .th-tbl i { height: 12px; }
.src-sheet .th-ssheet { gap: 3px; }
.src-sheet .th-ssheet i { height: 14px; }
/* the sweep — travels down the visible top of the sheet */
.src-sweep { position: absolute; left: 0; right: 0; top: 0; height: 40px; pointer-events: none; opacity: 0; z-index: 3;
  background: linear-gradient(180deg, rgba(37,99,235,0) 0%, rgba(37,99,235,.10) 55%, rgba(37,99,235,.28) 100%);
  border-bottom: 1.5px solid var(--blue-500); }
.src-scan.reading .src-sweep { opacity: 1; animation: srcSweep 1.5s var(--ease) infinite; }
@keyframes srcSweep { 0% { transform: translateY(-44px); } 100% { transform: translateY(238px); } }
/* caption: the file being read + its state */
.src-scan-cap { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.src-scan-name { flex: 1; min-width: 0; font: 600 11.5px/1.3 var(--font-body); color: var(--ink-800);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.src-scan-state { flex: none; font: 600 9.5px/1 var(--font-body); color: var(--blue-600);
  letter-spacing: .03em; text-transform: uppercase; }

/* batch queue */
.src-queue { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 2px;
  border-top: 1px solid var(--ink-150); padding-top: 9px; margin-top: 1px; scrollbar-width: thin; }
.src-q { display: flex; align-items: center; gap: 7px; padding: 4px 5px; border-radius: 5px; }
.src-q .src-q-ic { width: 13px; height: 13px; flex: none; display: inline-flex; align-items: center; justify-content: center; }
.src-q .src-q-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-300); }
.src-q-name { flex: 1; min-width: 0; font: 500 11px/1.3 var(--font-body); color: var(--ink-400);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.src-q.reading .src-q-name { color: var(--ink-900); font-weight: 600; }
.src-q.filed .src-q-name { color: var(--ink-600); }
.src-q-spin { width: 12px; height: 12px; border: 1.5px solid var(--ink-200); border-top-color: var(--blue-600);
  border-radius: 50%; animation: spin .7s linear infinite; }
.src-q-check { width: 13px; height: 13px; color: var(--green-600); }

/* ── main: tree / list / grid ──────────────────────────────────────────── */
.src-main { overflow-y: auto; padding: 10px 12px 16px; min-width: 0; scrollbar-width: thin; }

/* type badge */
.src-tag { font: 700 8.5px/1 var(--font-body); letter-spacing: .03em; border-radius: 4px; padding: 3px 4px; flex: none; }
.src-tag.pdf { color: var(--red-600); background: #fef2f2; }
.src-tag.doc { color: var(--blue-600); background: var(--blue-50); }
.src-tag.xls { color: var(--green-700); background: var(--green-100); }
.src-tag.csv { color: var(--ink-700); background: var(--ink-100); }

/* tag chip (extracted metadata) */
.src-chip { display: inline-flex; align-items: center; font: 500 10px/1 var(--font-body); color: var(--ink-700);
  background: var(--ink-100); border-radius: var(--radius-pill); padding: 3px 7px; white-space: nowrap; }
.src-chip.glp { background: var(--green-100); color: var(--green-700); font-weight: 700; }
.src-chip.preind { background: var(--amber-100); color: var(--amber-800); }
.src-chip.accent { background: var(--accent-tint); color: var(--blue-600); }

/* tree */
.src-tree { display: flex; flex-direction: column; gap: 3px; }
.src-mod { border-radius: var(--radius-sm); }
.src-mod-head { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: var(--radius-sm);
  cursor: pointer; transition: background var(--dur) var(--ease); user-select: none; }
.src-mod-head:hover { background: var(--ink-50); }
.src-mod-head:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--blue-300); }
.src-mod-head .src-chev { width: 14px; height: 14px; flex: none; color: var(--ink-400); transition: transform var(--dur) var(--ease); }
.src-mod.collapsed > .src-mod-head .src-chev { transform: rotate(-90deg); }
.src-mod.collapsed > .src-sec { display: none; }
.src-mod-folder { width: 16px; height: 16px; flex: none; color: var(--blue-500); }
.src-mod.preind .src-mod-folder { color: var(--amber-500); }
.src-mod-name { font: 600 12.5px/1.2 var(--font-display); color: var(--ink-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.src-mod-count { margin-left: auto; flex: none; font: 600 10px/1 var(--font-body); color: var(--ink-500);
  background: var(--ink-100); border-radius: 999px; padding: 3px 7px; min-width: 18px; text-align: center; }
.src-mod-count.bumped { animation: clCountBump .5s var(--ease) both; }
.src-mod-head.pulse { animation: srcPulse .6s var(--ease); }
@keyframes srcPulse { 0% { background: var(--blue-50); } 100% { background: transparent; } }
.src-mod.preind .src-mod-head.pulse { animation-name: srcPulseAmber; }
@keyframes srcPulseAmber { 0% { background: var(--amber-100); } 100% { background: transparent; } }

.src-sec { margin: 1px 0 4px 11px; padding-left: 12px; border-left: 1px solid var(--ink-150); }
.src-sec-name { font: 600 9.5px/1 var(--font-body); letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink-400); padding: 6px 0 5px 6px; }
.src-leaf { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: var(--radius-sm);
  transition: background var(--dur) var(--ease); }
.src-leaf:hover { background: var(--ink-50); }
.src-leaf-name { font: 500 12px/1.2 var(--font-body); color: var(--ink-800); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto; min-width: 60px; }
.src-leaf-tags { display: flex; align-items: center; gap: 4px; margin-left: auto; flex: none; overflow: hidden; }
.src-leaf-meta { font: 500 10px/1 var(--font-body); color: var(--ink-400); flex: none; }
.src-leaf.drop { animation: srcDrop .4s var(--ease-out) both; }
@keyframes srcDrop { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }

/* list */
.src-list { display: flex; flex-direction: column; }
.src-row { display: flex; align-items: center; gap: 10px; padding: 9px 8px; border-bottom: 1px solid var(--ink-100); }
.src-row:hover { background: var(--ink-50); }
.src-row-name { font: 500 12.5px/1.2 var(--font-body); color: var(--ink-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1 1 40%; min-width: 80px; }
.src-row-path { font: 500 11px/1 var(--font-body); color: var(--ink-500); flex: 1 1 26%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.src-row-tags { display: flex; gap: 4px; flex: none; overflow: hidden; }
.src-row-date { font: 500 11px/1 var(--font-body); color: var(--ink-400); flex: none; width: 52px; text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 720px) { .src-row-path, .src-row-date { display: none; } }

/* grid */
.src-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(186px, 1fr)); gap: 10px; }
.src-card { border: 1px solid var(--ink-200); border-radius: var(--radius-md); padding: 11px; background: var(--white);
  display: flex; flex-direction: column; gap: 8px; transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.src-card:hover { border-color: var(--ink-300); box-shadow: var(--shadow-xs); }
.src-card-top { display: flex; align-items: center; gap: 7px; }
.src-card-name { font: 600 12px/1.3 var(--font-body); color: var(--ink-900); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.src-card-path { font: 500 10.5px/1 var(--font-body); color: var(--ink-400); margin-top: -2px; }
.src-card-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: auto; }

/* grid thumbnails — real-feeling cropped page previews: the sheet fills the card
   and runs taller than the frame, so only the top third shows (like Finder/Drive). */
.src-card-thumb { margin: -11px -11px 11px; height: 132px; display: flex; align-items: flex-start; justify-content: center;
  padding: 14px 16px 0; border-bottom: 1px solid var(--ink-150); border-radius: var(--radius-md) var(--radius-md) 0 0;
  overflow: hidden; --tc: var(--red-500); background: #fef2f2; }
.src-card-thumb.pdf { --tc: var(--red-500); background: #fef2f2; }
.src-card-thumb.doc { --tc: var(--blue-500); background: var(--blue-50); }
.src-card-thumb.xls { --tc: var(--green-600); background: var(--green-100); }
.src-card-thumb.csv { --tc: var(--ink-500); background: var(--ink-100); }
.th-sheet { position: relative; width: 100%; max-width: 156px; aspect-ratio: 51 / 66; background: #fff;
  border: 1px solid var(--ink-200); border-bottom: none; border-radius: 4px 4px 0 0; box-shadow: 0 6px 16px -6px rgba(16,22,48,.30);
  padding: 13px 13px 0; display: flex; flex-direction: column; gap: 5px; overflow: hidden; }
.th-sheet::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--tc); }
.th-ext { position: absolute; top: 8px; right: 9px; font: 700 6px/1 var(--font-body); letter-spacing: .05em; color: var(--tc); z-index: 2; }

/* shared in-DOM page content — used by both grid thumbnails and the scanner sheet */
.th-ttl { font: 700 6.5px/1.25 var(--font-body); color: var(--ink-800); letter-spacing: .005em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 16px; }
.th-meta { display: block; height: 2.5px; border-radius: 1px; background: var(--ink-200); }
.th-blk { display: flex; flex-direction: column; gap: 2.5px; }
.th-ln { height: 2.5px; border-radius: 1px; background: var(--ink-150); width: 100%; }
.th-h { height: 3.5px; border-radius: 1px; background: var(--ink-300); margin-top: 1px; }
.th-tbl { display: grid; gap: 1.5px; border: 1px solid var(--ink-150); border-radius: 2px; padding: 2px; }
.th-tbl i { height: 6px; border-radius: 1px; background: var(--ink-50); }
.th-tbl i.h { background: color-mix(in oklab, var(--tc) 30%, transparent); }
.th-ssheet { display: grid; gap: 1.5px; }
.th-ssheet i { height: 7px; border-radius: 1px; background: var(--ink-50); }
.th-ssheet i.h { background: color-mix(in oklab, var(--tc) 36%, transparent); }
.th-ssheet i.f { background: color-mix(in oklab, var(--tc) 17%, transparent); }

/* flying extraction particles */
.src-fly { position: absolute; inset: 0; pointer-events: none; z-index: 25; overflow: visible; }
.src-particle { position: absolute; left: 0; top: 0; will-change: transform, opacity;
  transition: transform .62s var(--ease), opacity .62s var(--ease); }
.src-particle.chip { font: 600 10px/1 var(--font-body); color: var(--blue-700); background: var(--white);
  border: 1px solid var(--blue-300); border-radius: var(--radius-pill); padding: 3px 7px; box-shadow: 0 4px 12px rgba(37,99,235,.22); }
.src-particle.glyph { width: 22px; height: 22px; border-radius: 6px; background: var(--white); border: 1px solid var(--ink-200);
  display: flex; align-items: center; justify-content: center; color: var(--blue-600); box-shadow: 0 4px 12px rgba(17,24,39,.18); }
.src-particle.glyph svg { width: 13px; height: 13px; }

/* caption replay button */
.src-replay { font: 600 11px/1 var(--font-body); color: var(--blue-600); background: none; border: none;
  cursor: pointer; padding: 0; text-decoration: underline; text-underline-offset: 2px; }
.src-replay:hover { color: var(--blue-700); }

@keyframes spin { to { transform: rotate(360deg); } }

/* ── dark ──────────────────────────────────────────────────────────────── */
[data-theme="dark"] .src-surface,
[data-theme="dark"] .src-toolbar,
[data-theme="dark"] .src-card,
[data-theme="dark"] .src-scan,
[data-theme="dark"] .src-upload { background: var(--surface); }
[data-theme="dark"] .src-surface { border-color: var(--border); }   /* was inheriting .surface's light border */
[data-theme="dark"] .src-toolbar { border-bottom-color: var(--border); }
[data-theme="dark"] .src-title { color: var(--fg-strong); }
[data-theme="dark"] .src-ingest { background: var(--surface-sunken); border-right-color: var(--border); }
[data-theme="dark"] .src-main { color: var(--fg); }
[data-theme="dark"] .src-sort-btn { background: var(--surface); border-color: var(--border-strong); color: var(--fg); }
[data-theme="dark"] .src-sort-btn:hover:not(:disabled) { background: var(--surface-hover); }
[data-theme="dark"] .src-sort-menu { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .src-sort-menu button { color: var(--fg-muted); }
[data-theme="dark"] .src-sort-menu button:hover { background: var(--surface-hover); color: var(--fg-strong); }
[data-theme="dark"] .src-sort-menu button.on { color: var(--accent); }
[data-theme="dark"] .src-views { background: var(--surface-sunken); }
[data-theme="dark"] .src-view.on { background: var(--surface-hover); color: var(--accent); box-shadow: none; }
[data-theme="dark"] .src-upload { border-color: var(--border-strong); color: var(--fg-muted); }
[data-theme="dark"] .src-upload b { color: var(--fg-strong); }
[data-theme="dark"] .src-upload:hover { background: rgba(109,123,255,.12); border-color: var(--accent); color: var(--accent); }
[data-theme="dark"] .src-upload .src-up-ic { background: var(--accent-tint); color: var(--accent); }
[data-theme="dark"] .src-scan-name { color: var(--fg); }
/* the sheet stays light paper in both themes so a document is always recognizable */
[data-theme="dark"] .src-sheet { background: #eef1f8; border-color: rgba(0,0,0,.45); box-shadow: 0 14px 30px -12px rgba(0,0,0,.7); }
[data-theme="dark"] .src-queue { border-top-color: var(--border); }
[data-theme="dark"] .src-q-name { color: var(--fg-faint); }
[data-theme="dark"] .src-q.reading .src-q-name { color: var(--fg-strong); }
[data-theme="dark"] .src-q.filed .src-q-name { color: var(--fg-muted); }
[data-theme="dark"] .src-q-spin { border-color: var(--border); border-top-color: var(--accent); }
[data-theme="dark"] .src-q-check { color: #6ee7b7; }
[data-theme="dark"] .src-tag.pdf { background: rgba(239,68,68,.18); color: #fca5a5; }
[data-theme="dark"] .src-tag.doc { background: rgba(37,99,235,.2); color: #93c5fd; }
[data-theme="dark"] .src-tag.xls { background: rgba(16,163,74,.22); color: #6ee7b7; }
[data-theme="dark"] .src-tag.csv { background: var(--surface-hover); color: var(--fg-muted); }
[data-theme="dark"] .src-chip { background: var(--surface-hover); color: var(--fg-muted); }
[data-theme="dark"] .src-chip.glp { background: var(--green-100); color: var(--green-700); }
[data-theme="dark"] .src-chip.preind { background: var(--amber-100); color: var(--amber-800); }
[data-theme="dark"] .src-mod-head:hover { background: var(--surface-hover); }
[data-theme="dark"] .src-mod-name { color: var(--fg-strong); }
[data-theme="dark"] .src-mod-count { background: var(--surface-hover); color: var(--fg-muted); }
[data-theme="dark"] .src-mod-folder { color: var(--accent); }
[data-theme="dark"] .src-sec { border-left-color: var(--border); }
[data-theme="dark"] .src-leaf-name { color: var(--fg); }
[data-theme="dark"] .src-leaf:hover, [data-theme="dark"] .src-row:hover { background: var(--surface-hover); }
[data-theme="dark"] .src-row { border-bottom-color: var(--border-divider); }
[data-theme="dark"] .src-row-name { color: var(--fg-strong); }
[data-theme="dark"] .src-row-path { color: var(--fg-muted); }
[data-theme="dark"] .src-card { border-color: var(--border); }
[data-theme="dark"] .src-card-name { color: var(--fg-strong); }
[data-theme="dark"] .src-particle.chip { background: var(--surface); color: var(--accent); border-color: var(--accent); }
[data-theme="dark"] .src-particle.glyph { background: var(--surface); border-color: var(--border); color: var(--accent); }
[data-theme="dark"] .src-mod-head.pulse { animation-name: srcPulseDark; }

/* app-bar chrome — #sources was missing the per-section dark override the other widgets have */
[data-theme="dark"] #sources .app-bar { background: var(--surface); border-bottom-color: var(--border); }
[data-theme="dark"] #sources .app-bar .ab-brand { color: var(--fg-strong); }
[data-theme="dark"] #sources .app-tabs .t { color: var(--fg-muted); }
[data-theme="dark"] #sources .app-tabs .t.on { color: var(--fg-strong); }
[data-theme="dark"] #sources .app-ava { background: var(--surface-sunken); box-shadow: 0 0 0 1.5px var(--surface), 0 1px 4px rgba(0,0,0,.4); }

/* the light sheet keeps the light blue reading flash in both themes; only the sweep tint lifts */
[data-theme="dark"] .src-sweep { background: linear-gradient(180deg, rgba(109,123,255,0) 0%, rgba(109,123,255,.14) 55%, rgba(109,123,255,.38) 100%); border-bottom-color: var(--accent); }

/* scrollbars — the thin native bars defaulted to light chrome in dark mode */
.src-main, .src-queue, .cl-msgs, .notif-list { scrollbar-width: thin; scrollbar-color: var(--ink-300) transparent; }
.src-main::-webkit-scrollbar, .src-queue::-webkit-scrollbar, .cl-msgs::-webkit-scrollbar, .notif-list::-webkit-scrollbar { width: 8px; }
.src-main::-webkit-scrollbar-track, .src-queue::-webkit-scrollbar-track, .cl-msgs::-webkit-scrollbar-track, .notif-list::-webkit-scrollbar-track { background: transparent; }
.src-main::-webkit-scrollbar-thumb, .src-queue::-webkit-scrollbar-thumb, .cl-msgs::-webkit-scrollbar-thumb, .notif-list::-webkit-scrollbar-thumb { background: var(--ink-300); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
.src-main:hover::-webkit-scrollbar-thumb, .src-queue:hover::-webkit-scrollbar-thumb, .cl-msgs:hover::-webkit-scrollbar-thumb, .notif-list:hover::-webkit-scrollbar-thumb { background: var(--ink-400); background-clip: padding-box; }
[data-theme="dark"] .src-main, [data-theme="dark"] .src-queue, [data-theme="dark"] .cl-msgs, [data-theme="dark"] .notif-list { scrollbar-color: var(--border-strong) transparent; }
[data-theme="dark"] .src-main::-webkit-scrollbar-thumb, [data-theme="dark"] .src-queue::-webkit-scrollbar-thumb, [data-theme="dark"] .cl-msgs::-webkit-scrollbar-thumb, [data-theme="dark"] .notif-list::-webkit-scrollbar-thumb { background: var(--border-strong); background-clip: padding-box; }
[data-theme="dark"] .src-main:hover::-webkit-scrollbar-thumb, [data-theme="dark"] .src-queue:hover::-webkit-scrollbar-thumb, [data-theme="dark"] .cl-msgs:hover::-webkit-scrollbar-thumb, [data-theme="dark"] .notif-list:hover::-webkit-scrollbar-thumb { background: var(--fg-faint); background-clip: padding-box; }

/* grid thumbnails */
[data-theme="dark"] .src-card-thumb.pdf { background: rgba(239,68,68,.14); }
[data-theme="dark"] .src-card-thumb.doc { background: rgba(37,99,235,.14); }
[data-theme="dark"] .src-card-thumb.xls { background: rgba(16,163,74,.14); }
[data-theme="dark"] .src-card-thumb.csv { background: var(--surface-hover); }
[data-theme="dark"] .src-card-thumb { border-bottom-color: var(--border); }
[data-theme="dark"] .th-sheet { background: #eef1f8; border-color: rgba(0,0,0,.35); box-shadow: 0 6px 18px -6px rgba(0,0,0,.65); }
[data-theme="dark"] .th-ttl { color: #3c4456; }
[data-theme="dark"] .th-meta { background: #b9c0cf; }
[data-theme="dark"] .th-ln { background: #cdd4e1; }
[data-theme="dark"] .th-h { background: #a7afc2; }
[data-theme="dark"] .th-tbl { border-color: #c3cad8; }
[data-theme="dark"] .th-tbl i:not(.h) { background: #e1e6f0; }
[data-theme="dark"] .th-ssheet i:not(.h):not(.f) { background: #dde2ec; }
@keyframes srcPulseDark { 0% { background: rgba(109,123,255,.18); } 100% { background: transparent; } }

/* ── responsive: stack the ingest lane above the tree ─────────────────── */
@media (max-width: 920px) {
  .src-body { grid-template-columns: 1fr; height: auto; }
  .src-ingest { border-right: none; border-bottom: 1px solid var(--ink-150); }
  [data-theme="dark"] .src-ingest { border-bottom-color: var(--border); }
  .src-queue { display: none; }
  .src-main { max-height: 380px; }
}
@media (max-width: 560px) {
  .src-toolbar { flex-wrap: wrap; }
  .src-grid { grid-template-columns: 1fr 1fr; }
}

/* ── reduced motion ────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .src-scan.reading .src-sweep,
  .src-mod-count.bumped, .src-mod-head.pulse, .src-leaf.drop, .src-q-spin { animation: none; }
  .src-particle { transition: none; }
  .src-sort-menu { animation: none; }
}

/* ══ Gap scroll-spy widget (#gap) — outline · document · per-leaf gaps ════ */
.gd-surface { display: flex; flex-direction: column; height: 600px; overflow: hidden; }
.gd-canvas { flex: 1; min-height: 0; display: flex; background: var(--white); }

/* LEFT — eCTD outline rail (scroll-spy target) */
.gd-side { display: flex; width: 236px; overflow: visible; }
.gd-tree .gd-nav { cursor: pointer; }
.gd-sub { margin-left: 16px; }                /* 2.6.6 sub-parent nests under 2.6 */
.gd-tree .gd-leafnav { margin-left: 30px; }   /* leaves nest under 2.6.6 */
.gd-nav.on, .gd-nav.on:hover { background: var(--blue-50); color: var(--blue-600); font-weight: 600; }

/* CENTER — the document, scrolls in View mode */
.gd-stage { position: relative; flex: 1; min-width: 0; }
.gd-scroll { height: 100%; overflow-y: auto; padding: 0 34px;
  scrollbar-width: thin; scrollbar-color: var(--ink-200) transparent; }
.gd-scroll::-webkit-scrollbar { width: 9px; }
.gd-scroll::-webkit-scrollbar-thumb { background: var(--ink-200); border-radius: 9px; border: 3px solid var(--white); }
.gd-doc { max-width: 600px; margin: 0 auto; padding: 26px 0 0; }
.gd-leaf { padding-bottom: 28px; margin-bottom: 28px; border-bottom: 1px solid var(--ink-100); }
.gd-leaf-last { border-bottom: 0; padding-bottom: 96px; }
.gd-dh { font: 600 11px/1 var(--font-body); text-transform: uppercase; letter-spacing: .07em;
  color: var(--ink-400); margin: 0 0 8px; transition: color .3s var(--ease); }
.gd-leaf.on .gd-dh { color: var(--blue-600); }
.gd-lh { font: 700 16px/1.35 var(--font-body); color: var(--ink-950); margin: 0 0 12px; }
.gd-doc p:not(.gd-dh) { font: 400 13.5px/1.72 var(--font-body); color: var(--ink-800); margin: 0 0 12px; }
.gd-fade { position: absolute; left: 0; right: 0; bottom: 0; height: 46px; pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--white)); }

/* RIGHT — gaps for the active leaf */
.gd-gaps { flex: none; width: 304px; display: flex; flex-direction: column; min-height: 0;
  border-left: 1px solid var(--ink-150); background: var(--ink-50); }
.gd-gaps-head { display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px 11px; border-bottom: 1px solid var(--ink-150); flex: none; }
.gd-gaps-title { font: 600 12px/1 var(--font-body); color: var(--ink-900); }
.gd-gaps-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 12px 14px;
  scrollbar-width: thin; scrollbar-color: var(--ink-200) transparent; }
.gd-gaps-body::-webkit-scrollbar { width: 9px; }
.gd-gaps-body::-webkit-scrollbar-thumb { background: var(--ink-200); border-radius: 9px; border: 3px solid var(--ink-50); }
.gd-gapgroup { display: none; }
.gd-gapgroup.on { display: block; animation: gdGapIn .3s var(--ease-out) both; }
@keyframes gdGapIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.gd-gaps-foot { padding: 10px 14px 12px; border-top: 1px solid var(--ink-150); flex: none;
  font-size: var(--text-2xs); color: var(--ink-400); margin: 0; line-height: 1.5; }

/* "no gaps" clear state */
.gd-clear { text-align: center; padding: 30px 14px; }
.gd-clear-ic { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px;
  border-radius: 50%; background: var(--green-100); color: var(--green-600); margin-bottom: 12px; }
.gd-clear-ic svg { width: 20px; height: 20px; }
.gd-clear-t { font: 600 13px/1.3 var(--font-body); color: var(--ink-900); margin: 0 0 5px; }
.gd-clear-s { font: 400 11.5px/1.55 var(--font-body); color: var(--ink-500); margin: 0 auto; max-width: 224px; }

.pchip.red { background: #fef2f2; color: var(--red-600); }

/* dark mode */
[data-theme="dark"] #gap .gd-canvas { background: var(--surface); }
[data-theme="dark"] #gap .gd-side { background: var(--surface-sunken); border-right-color: var(--border); }
[data-theme="dark"] #gap .cl-side-h { color: var(--fg-faint); }
[data-theme="dark"] #gap .gd-tree .cl-tw { color: var(--fg-strong); }
[data-theme="dark"] #gap .gd-tree li { color: var(--fg-muted); }
[data-theme="dark"] #gap .gd-tree li:hover { background: var(--surface); }
[data-theme="dark"] #gap .gd-nav.on, [data-theme="dark"] #gap .gd-nav.on:hover { background: rgba(37,99,235,.16); color: var(--fg-strong); }
[data-theme="dark"] #gap .gd-scroll { scrollbar-color: var(--border) transparent; }
[data-theme="dark"] #gap .gd-scroll::-webkit-scrollbar-thumb { background: var(--border); border-color: var(--surface); }
[data-theme="dark"] #gap .gd-dh { color: var(--fg-faint); }
[data-theme="dark"] #gap .gd-leaf.on .gd-dh { color: var(--accent); }
[data-theme="dark"] #gap .gd-lh { color: var(--fg-strong); }
[data-theme="dark"] #gap .gd-doc p:not(.gd-dh) { color: var(--fg); }
[data-theme="dark"] #gap .gd-leaf { border-bottom-color: var(--border); }
[data-theme="dark"] #gap .gd-fade { background: linear-gradient(to bottom, transparent, var(--surface)); }
[data-theme="dark"] #gap .gd-gaps { background: var(--surface-sunken); border-left-color: var(--border); }
[data-theme="dark"] #gap .gd-gaps-head { border-bottom-color: var(--border); }
[data-theme="dark"] #gap .gd-gaps-title { color: var(--fg-strong); }
[data-theme="dark"] #gap .gd-gaps-body::-webkit-scrollbar-thumb { background: var(--border); border-color: var(--surface-sunken); }
[data-theme="dark"] #gap .gd-gaps-foot { color: var(--fg-faint); border-top-color: var(--border); }
[data-theme="dark"] #gap .gd-clear-ic { background: rgba(16,185,129,.16); color: #6ee7b7; }
[data-theme="dark"] #gap .gd-clear-t { color: var(--fg-strong); }
[data-theme="dark"] #gap .gd-clear-s { color: var(--fg-muted); }
[data-theme="dark"] .pchip.red { background: rgba(239,68,68,.15); color: #fca5a5; }
[data-theme="dark"] .pchip.green { background: rgba(16,163,74,.14); color: #5ec990; }

/* mobile leaf rail — horizontal nav that replaces the hidden outline */
.gd-leafbar { display: none; gap: 7px; padding: 9px 12px; flex: none; overflow-x: auto;
  background: var(--ink-50); border-bottom: 1px solid var(--ink-150);
  scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.gd-leafbar::-webkit-scrollbar { display: none; }
.gd-chip { flex: none; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  cursor: pointer; font: 600 11px/1 var(--font-mono); letter-spacing: .01em; color: var(--ink-600);
  background: var(--white); border: 1px solid var(--ink-200); border-radius: var(--radius-pill);
  padding: 7px 11px; transition: color .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease); }
.gd-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.gd-chip.on { background: var(--blue-50); color: var(--blue-600);
  border-color: color-mix(in oklab, var(--blue-600) 32%, var(--white)); }
.gd-cdot { width: 7px; height: 7px; border-radius: 999px; flex: none; background: var(--ink-300); }
.gd-chip.sev-severe   .gd-cdot { background: var(--red-500); }
.gd-chip.sev-moderate .gd-cdot { background: var(--amber-500); }
.gd-chip.sev-minor    .gd-cdot { background: var(--ink-400); }
.gd-chip.sev-clear    .gd-cdot { background: var(--green-600); }

[data-theme="dark"] #gap .gd-leafbar { background: var(--surface-sunken); border-bottom-color: var(--border); }
[data-theme="dark"] #gap .gd-chip { background: var(--surface); border-color: var(--border); color: var(--fg-muted); }
[data-theme="dark"] #gap .gd-chip.on { background: rgba(37,99,235,.16); color: var(--fg-strong);
  border-color: color-mix(in oklab, var(--accent) 50%, var(--surface)); }

/* responsive: drop the outline first, then stack into one mobile column */
@media (max-width: 1080px) { .gd-side { display: none; } }

/* ≤860px — two side panes no longer fit. Stack vertically: the leaf rail up
   top stands in for the outline, the document sits in a bounded scroller, and
   the gaps panel (the whole point of the widget) becomes a full-width hero
   directly beneath it — surfaced, never hidden. */
@media (max-width: 860px) {
  .gd-surface { height: auto; }
  .gd-leafbar { display: flex; }
  .gd-canvas { flex-direction: column; }
  .gd-stage { flex: none; height: 300px; order: 2; }
  .gd-gaps { display: flex; width: auto; order: 3; min-height: 0;
    border-left: none; border-top: 1px solid var(--ink-150); }
  [data-theme="dark"] #gap .gd-gaps { border-top-color: var(--border); }
  .gd-gaps-body { flex: 0 0 auto; overflow: visible; }
}

@media (max-width: 420px) {
  .gd-stage { height: 264px; }
  .gd-leafbar { padding: 8px 10px; }
  .gd-chip { padding: 6px 10px; font-size: 10.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .gd-gapgroup.on { animation: none; }
  .gd-dh { transition: none; }
}

/* ════════════════════════════════════════════════════════════════════════
   VERSION-HISTORY MICRO WIDGET (security · audit-ready)
   Mirrors the Notebook editor's version rail; theme-aware semantic tokens
   only (raw --ink-* don't flip in dark) so it reads correctly in both modes.
   ════════════════════════════════════════════════════════════════════════ */
.vh { display: flex; flex-direction: column; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  overflow: hidden; box-shadow: 0 24px 60px -30px rgba(17,24,39,.2); }
[data-theme="dark"] .vh { box-shadow: 0 24px 60px -30px rgba(0,0,0,.55); }

.vh-head { display: flex; align-items: center; gap: 8px; flex: none;
  padding: 12px 14px; border-bottom: 1px solid var(--border);
  color: var(--fg-strong); font: 600 12.5px/1 var(--font-body); }
.vh-head svg { color: var(--fg-faint); flex: none; }
.vh-count { margin-left: auto; font: 500 11px/1 var(--font-mono);
  color: var(--fg-faint); font-variant-numeric: tabular-nums; }

.vh-list { list-style: none; margin: 0; padding: 6px; display: flex;
  flex-direction: column; gap: 2px; max-height: 296px; overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
.vh-list::-webkit-scrollbar { width: 9px; }
.vh-list::-webkit-scrollbar-thumb { background: var(--border-strong);
  border-radius: 9px; border: 3px solid var(--surface); }

.vh-row { position: relative; display: flex; gap: 10px; align-items: flex-start;
  padding: 10px; border-radius: var(--radius-sm); cursor: pointer;
  transition: background var(--dur) var(--ease); }
.vh-row:hover { background: var(--surface-hover); }
.vh-row.is-current { background: var(--accent-tint-2); }
.vh-row.is-current:hover { background: var(--accent-tint); }
.vh-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.vh-row.is-add { animation: vh-add .5s var(--ease-out) both; }
@keyframes vh-add { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }
.vh-row.is-leave { animation: vh-leave .42s var(--ease-in) both; }
@keyframes vh-leave { from { opacity: 1; } to { opacity: 0; transform: translateY(8px); } }
.vh-row.is-restored::after { content: ""; position: absolute; inset: 0;
  border-radius: var(--radius-sm); box-shadow: 0 0 0 1.5px var(--accent);
  animation: vh-flash 1s var(--ease) forwards; pointer-events: none; }
@keyframes vh-flash { from { opacity: 1; } to { opacity: 0; } }

.vh-ava { flex: none; width: 28px; height: 28px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font: 600 10px/1 var(--font-body); color: #fff; background: var(--c, var(--fg-muted)); }
.vh-ava-ai { background: var(--grad-brand); }
.vh-main { flex: 1 1 auto; min-width: 0; }
.vh-top { display: flex; align-items: baseline; gap: 8px; margin: 0 0 2px; }
.vh-top b { font: 700 12.5px/1 var(--font-body); color: var(--fg-strong); }
.vh-when { font: 400 11px/1 var(--font-body); color: var(--fg-faint);
  font-variant-numeric: tabular-nums; }
.vh-act { margin: 0 0 1px; font: 400 12px/1.4 var(--font-body); color: var(--fg); }
.vh-act i { font-style: italic; color: var(--fg-muted); }
.vh-by { margin: 0; font: 500 11px/1.3 var(--font-body); color: var(--fg-muted); }
.vh-check { width: 15px; height: 15px; flex: none; color: var(--accent);
  margin-top: 3px; opacity: 0; transition: opacity var(--dur) var(--ease); }
.vh-row.is-current .vh-check { opacity: 1; }

.vh-foot { display: flex; align-items: center; gap: 8px; flex: none;
  padding: 10px 14px; border-top: 1px solid var(--border); }
.vh-foot-meta { font: 500 11px/1.4 var(--font-mono); color: var(--fg-faint); }
.vh-export { border: 1px solid var(--border-strong); background: transparent;
  color: var(--fg-muted); font: 500 11px/1 var(--font-body); padding: 5px 9px;
  border-radius: var(--radius-sm); cursor: default; }
.vh-cap { margin: 12px 2px 0; font-size: 11px; line-height: 1.5; color: var(--fg-faint); }

@media (prefers-reduced-motion: reduce) {
  .vh-row.is-add, .vh-row.is-leave, .vh-row.is-restored::after { animation: none; }
}