/* ============ Trifecta Dashboard IDE — styles ============
   Report-pane component styles mirror the hand-authored report.html so the
   dossier looks identical; the IDE layout + chat sidebar wrap around it. */
/* ============ DESIGN TOKENS — teal/emerald, shadcn-style ============
   The palette adopts shadcn/ui's *token model + aesthetic* expressed in vanilla
   CSS (no React/Tailwind/build). The canonical names are the shadcn semantic set
   (--background/--foreground/--card/--primary/--muted/--accent/--border/--ring +
   a --radius scale). Our long-standing app tokens (--bg/--panel/--ink/--signal/
   --paper/--line/--on-signal/...) are kept as *aliases* of those so every existing
   rule Just Works — re-pointing the values flips the whole stylesheet to teal with
   no rule churn. Dark is the default; Light overrides the same names below. */
:root{
  /* radius scale (shadcn feel: consistent, slightly tighter corners) */
  --radius:0.625rem;
  --radius-sm:calc(var(--radius) - 4px);
  --radius-md:calc(var(--radius) - 2px);
  --radius-lg:var(--radius);
  --radius-xl:calc(var(--radius) + 4px);

  /* --- shadcn semantic tokens (DARK) — cool teal primary on neutral grays --- */
  --background:#0a0f0f; --foreground:#e3eceb;
  --card:#111a19; --card-foreground:#e3eceb;
  --popover:#111a19; --popover-foreground:#e3eceb;
  --primary:#19c3a6; --primary-foreground:#04211b;
  --primary-hover:#3ad6bb;
  --secondary:#16201f; --secondary-foreground:#e3eceb;
  --muted:#16201f; --muted-foreground:#8fa3a0;
  --accent:#34d399; --accent-foreground:#04211b;
  --destructive:#f15a4a; --destructive-foreground:#1a0707;
  --border:#23302e; --input:#23302e; --ring:#19c3a6;

  /* --- legacy app tokens, aliased onto the shadcn palette --- */
  --bg:var(--background); --bg-2:#0d1413; --panel:var(--card); --panel-2:#16201f;
  --line:var(--border); --line-soft:#18211f; --ink:var(--foreground); --ink-dim:var(--muted-foreground);
  --ink-faint:#5d6f6c; --signal:var(--primary); --signal-soft:var(--primary-hover);
  /* --paper = "brightest ink" (headings/emphasis, ~70 uses); flips per theme */
  --paper:#f3faf8;
  --high:#34d399; --medium:#e0b341; --none:#6b7a78;
  /* text that sits ON the teal --signal accent (buttons, badges, selection). */
  --on-signal:var(--primary-foreground);
  /* monospace text inside code / diff blocks — re-pointed per theme. */
  --code-ink:#cdd9d6;
  --serif:"Fraunces",Georgia,serif;
  --sans:"IBM Plex Sans",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
  color-scheme:dark;
}
/* Dark is the default. The explicit selector lets a JS-driven data-theme="dark"
   pin it even when the OS prefers light. */
:root[data-theme="dark"]{ color-scheme:dark; }
/* ---- Light palette ---- a cool, near-white teal/emerald light theme tuned for
   contrast: ink-on-bg, teal primary, and the high/medium/none status hues all stay
   legible. Overrides the same token names so Light is purely additive. */
:root[data-theme="light"]{
  /* --- shadcn semantic tokens (LIGHT) --- */
  --background:#f4f7f6; --foreground:#14201e;
  --card:#ffffff; --card-foreground:#14201e;
  --popover:#ffffff; --popover-foreground:#14201e;
  --primary:#0d9b86; --primary-foreground:#f4fbf9;
  --primary-hover:#0b8775;
  --secondary:#e7efed; --secondary-foreground:#14201e;
  --muted:#e7efed; --muted-foreground:#51635f;
  --accent:#0d9b86; --accent-foreground:#f4fbf9;
  --destructive:#c43a2c; --destructive-foreground:#fdf3f1;
  --border:#d6e1de; --input:#d6e1de; --ring:#0d9b86;

  /* --- legacy app tokens (LIGHT) --- */
  --bg:var(--background); --bg-2:#eaf1ef; --panel:var(--card); --panel-2:#eef4f2;
  --line:var(--border); --line-soft:#e4ecea; --ink:var(--foreground); --ink-dim:var(--muted-foreground);
  --ink-faint:#7a8b87; --signal:var(--primary); --signal-soft:var(--primary-hover);
  --paper:#0c1816;
  --high:#0d9b86; --medium:#9a7110; --none:#7a8b87;
  --on-signal:var(--primary-foreground); --code-ink:#26302e; --brand-ink:#14201e;
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow:hidden}
::selection{background:var(--signal);color:var(--on-signal)}
a{color:inherit}

/* ---------- IDE layout ----------
   Claude.ai-style shell: BOTH sidebars run the FULL viewport height —
   the TOC in column 1 and the "Ask Trey" chat in the last column (grid-row 1/-1).
   The app bar sits in row 1 of the MIDDLE column only (over the report, between
   the two sidebars, never under them); the report lives in row 2 of that column. */
.app{display:grid;grid-template-columns:1fr minmax(360px,420px);grid-template-rows:auto 1fr;height:100vh;
  --chat-w:420px}
/* --toc-w (left sidebar width) is defaulted on :root in the desktop media queries
   below (so each breakpoint can pick its own default); JS sets it inline on .app
   when the user drags the #tocResize handle, which always beats the :root default. */
.report-pane{position:relative;overflow-y:auto;overflow-x:hidden;grid-row:2}

/* ---------- top app bar (over the content only; controls + current page title) ---------- */
.appbar{grid-column:1/-1;grid-row:1;display:flex;align-items:center;gap:12px;height:52px;padding:0 14px;
  background:var(--panel);border-bottom:1px solid var(--line);position:relative;z-index:40}
.ab-brand{font-family:var(--serif);font-weight:700;font-size:18px;color:var(--paper);line-height:1;
  display:flex;align-items:baseline;gap:8px;flex:none}
.ab-brand small{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-faint);font-weight:500}
.ab-sep{color:var(--ink-faint);font-family:var(--serif);font-size:17px;flex:none}
/* the app-bar brand (D.A.) + separator + expand toggle only appear when the sidebar
   is collapsed to a rail — when the sidebar is open the brand lives in the sidebar.
   (These hide rules come AFTER the styling above so `display:none` wins by order.) */
.ab-expand{display:none}
.ab-brand{display:none}
.ab-sep{display:none}
.ab-title{font-family:var(--sans);font-size:14px;color:var(--ink-dim);font-weight:600;flex:1;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ab-btn{display:inline-flex;align-items:center;gap:7px;background:var(--panel-2);color:var(--ink);
  border:1px solid var(--line);border-radius:8px;font-family:var(--mono);font-size:12.5px;font-weight:600;
  padding:8px 11px;cursor:pointer;line-height:1;transition:.18s;flex:none}
.ab-btn:hover{border-color:var(--signal);color:var(--paper)}
.ab-btn svg{display:block}
/* Inline Lucide-style chrome icons: inherit color, align to the text baseline.
   (svg.ico replaced emoji/glyphs across the app shell — see ico() in app.js.) */
svg.ico{vertical-align:-0.14em;flex:none}
svg.ico-inline{vertical-align:-0.12em}
.ab-ask{color:var(--on-signal);background:var(--signal);border-color:var(--signal)}
.ab-ask:hover{background:var(--signal-soft);color:var(--on-signal);border-color:var(--signal-soft)}
/* the app bar replaces the old floating FABs + docked toggles */
.toc-fab,.chat-fab,.dock-toggle{display:none !important}
@media(max-width:560px){.ab-brand small{display:none}.ab-ask-label{display:none}}
/* ---- recent-notifications bell + feed panel (Phase 1) ---- */
.ab-bell{position:relative;padding:8px}
.ab-bell-ico{display:inline-flex}
.ab-bell-dot{position:absolute;top:5px;right:5px;width:7px;height:7px;border-radius:50%;
  background:var(--signal);border:1.5px solid var(--panel)}
.notif-panel{position:absolute;top:48px;right:12px;z-index:60;width:340px;max-width:calc(100vw - 24px);
  max-height:min(70vh,520px);display:flex;flex-direction:column;background:var(--panel);
  border:1px solid var(--line);border-radius:12px;box-shadow:0 14px 40px rgba(0,0,0,.35);overflow:hidden}
/* the author display:flex above outranks the [hidden] attribute's UA display:none, so
   without this the panel never hides (close/outside-click/Esc set hidden but it stayed). */
.notif-panel[hidden]{display:none}
.notif-head{display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:11px 13px;border-bottom:1px solid var(--line)}
.notif-title{font-family:var(--mono);font-size:12.5px;font-weight:700;color:var(--ink);letter-spacing:.01em}
.notif-x{display:inline-flex;align-items:center;justify-content:center;background:transparent;border:0;
  color:var(--ink-dim);cursor:pointer;padding:2px;border-radius:6px}
.notif-x:hover{color:var(--ink);background:var(--panel-2)}
.notif-list{overflow:auto;padding:6px}
.notif-empty{padding:18px 14px;color:var(--ink-dim);font-size:12.5px;line-height:1.5}
.notif-item{display:flex;gap:10px;padding:9px 10px;border-radius:9px}
.notif-item+.notif-item{border-top:1px solid var(--line-soft)}
.notif-item:hover{background:var(--panel-2)}
.notif-item-ico{flex:none;color:var(--signal);margin-top:2px}
.notif-item-body{min-width:0;flex:1}
.notif-msg{font-size:13px;color:var(--ink);line-height:1.4}
.notif-meta{display:flex;align-items:center;gap:8px;margin-top:4px;font-size:11.5px;color:var(--ink-faint)}
.notif-link{color:var(--ink-dim);text-decoration:none;font-weight:600}
.notif-link:hover{color:var(--signal)}
.notif-scope{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.04em;
  color:var(--ink-faint);border:1px solid var(--line);border-radius:5px;padding:0 4px}
.notif-when{margin-left:auto}
/* ---- background-jobs indicator + feed panel (ADR 0016) ---- */
.ab-jobs{position:relative;display:inline-flex;align-items:center;gap:4px;padding:8px;color:var(--signal)}
.ab-jobs[hidden]{display:none}
.ab-jobs-ico{display:inline-flex}
.ab-jobs-ico svg{animation:spin 1.4s linear infinite}
.ab-jobs-count{font-family:var(--mono);font-size:11px;font-weight:700;line-height:1;
  min-width:15px;height:15px;padding:0 4px;border-radius:999px;display:inline-flex;
  align-items:center;justify-content:center;color:var(--bg);background:var(--signal)}
.ab-jobs-count[hidden]{display:none}
.jobs-panel{position:absolute;top:48px;right:12px;z-index:60;width:340px;max-width:calc(100vw - 24px);
  max-height:min(70vh,520px);display:flex;flex-direction:column;background:var(--panel);
  border:1px solid var(--line);border-radius:12px;box-shadow:0 14px 40px rgba(0,0,0,.35);overflow:hidden}
.jobs-panel[hidden]{display:none}
.jobs-head{display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:11px 13px;border-bottom:1px solid var(--line)}
.jobs-title{font-family:var(--mono);font-size:12.5px;font-weight:700;color:var(--ink);letter-spacing:.01em;margin-right:auto}
.jobs-x{display:inline-flex;align-items:center;justify-content:center;background:transparent;border:0;
  color:var(--ink-dim);cursor:pointer;padding:2px;border-radius:6px}
.jobs-x:hover{color:var(--ink);background:var(--panel-2)}
/* Web Push opt-in toggle in the jobs head (ADR 0016 Phase B). Hidden until push is
   supported + configured; `.on` (subscribed) lights it with the accent. */
.push-toggle{display:inline-flex;align-items:center;justify-content:center;background:transparent;border:0;
  color:var(--ink-dim);cursor:pointer;padding:2px;border-radius:6px}
.push-toggle:hover{color:var(--ink);background:var(--panel-2)}
.push-toggle.on{color:var(--accent,#0aa)}
.push-toggle[hidden]{display:none}
.jobs-list{overflow:auto;padding:6px}
.jobs-empty{padding:18px 14px;color:var(--ink-dim);font-size:12.5px;line-height:1.5}
.job-item{display:flex;gap:10px;padding:9px 10px;border-radius:9px;cursor:pointer}
.job-item+.job-item{border-top:1px solid var(--line-soft)}
.job-item:hover{background:var(--panel-2)}
.job-item-ico{flex:none;margin-top:2px;color:var(--ink-dim)}
.job-item-ico .spin{display:inline-block;animation:spin 1s linear infinite;color:var(--signal)}
.job-running .job-item-ico{color:var(--signal)}
.job-done .job-item-ico{color:var(--ok,#3fb950)}
.job-failed .job-item-ico{color:var(--bad,#f85149)}
.job-item-body{min-width:0;flex:1}
.job-title{font-size:13px;color:var(--ink);line-height:1.4;overflow:hidden;text-overflow:ellipsis;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.job-summary{font-size:12px;color:var(--ink-dim);line-height:1.4;margin-top:3px}
.job-error{font-size:12px;color:var(--bad,#f85149);line-height:1.4;margin-top:3px}
.job-meta{display:flex;align-items:center;gap:8px;margin-top:4px;font-size:11.5px;color:var(--ink-faint)}
.job-status{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.04em;
  color:var(--ink-faint);border:1px solid var(--line);border-radius:5px;padding:0 4px}
.job-running .job-status{color:var(--signal);border-color:var(--signal)}
.job-when{margin-left:auto}
/* one-click Retry on a FAILED job row (ADR 0017): re-runs the server-held prompt */
.job-actions{margin-top:7px}
.job-retry{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;cursor:pointer;
  font-size:11.5px;color:var(--ink-dim);background:transparent;border:1px solid var(--line);
  border-radius:6px}
.job-retry:hover{color:var(--high);border-color:var(--high)}
.job-retry .ico{width:13px;height:13px}
/* in-session "running in background…" placeholder bubble */
.bg-running{display:flex;align-items:flex-start;gap:8px;font-size:13px;color:var(--ink-dim);line-height:1.5}
.bg-running .spin{display:inline-block;animation:spin 1s linear infinite;color:var(--signal);flex:none;margin-top:1px}
.report-pane::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(var(--line-soft) 1px,transparent 1px),
    linear-gradient(90deg,var(--line-soft) 1px,transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(ellipse 90% 60% at 40% 0%,#000,transparent 75%);
  mask-image:radial-gradient(ellipse 90% 60% at 40% 0%,#000,transparent 75%);opacity:.5}
.wrap{position:relative;z-index:1;max-width:920px;margin:0 auto;padding:0 32px 80px}

/* ---------- masthead ---------- */
.terminal{font-family:var(--mono);font-size:12.5px;color:var(--ink-dim);
  border:1px solid var(--line);border-radius:9px;background:rgba(15,18,23,.7);
  padding:10px 14px;display:flex;align-items:center;gap:9px;max-width:560px;margin-top:34px}
.terminal .dot{width:9px;height:9px;border-radius:50%;flex:none}
.terminal .dot:nth-child(1){background:#ff5f57}.terminal .dot:nth-child(2){background:#febc2e}
.terminal .dot:nth-child(3){background:#28c840}
.terminal .cmd{margin-left:6px;color:var(--paper)}.terminal .cmd .flag{color:var(--signal-soft)}
.cursor{display:inline-block;width:7px;height:14px;background:var(--signal);margin-left:2px;
  transform:translateY(2px);animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.eyebrow{font-family:var(--mono);font-size:11.5px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--signal);margin:30px 0 14px;font-weight:600}
h1.title{font-family:var(--serif);font-weight:600;font-size:clamp(40px,6.5vw,82px);line-height:.94;
  letter-spacing:-.02em;margin:0;color:var(--paper)}
h1.title .db{font-style:italic;font-weight:500;color:var(--signal)}
.subhead{font-family:var(--serif);font-size:clamp(17px,2vw,22px);font-weight:400;font-style:italic;
  color:var(--ink-dim);margin:20px 0 0;max-width:680px;line-height:1.4}
.meta-row{display:flex;flex-wrap:wrap;gap:9px 24px;margin:26px 0 0;font-family:var(--mono);
  font-size:12px;color:var(--ink-faint)}
.meta-row b{color:var(--ink-dim);font-weight:500}

.statband{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:12px;overflow:hidden;margin:44px 0 14px}
.statband .cell{background:var(--panel);padding:22px 20px;min-width:0;position:relative}
@media(max-width:640px){.statband{grid-template-columns:repeat(2,1fr)}}
.statband .num{font-family:var(--serif);font-weight:600;font-size:clamp(30px,4vw,46px);line-height:1;
  color:var(--paper);letter-spacing:-.02em}
.statband .num.em,.statband .cell:first-child .num{color:var(--signal)}
.statband .lbl{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-faint);margin-top:10px}
/* "Send to On the Go" affordance on an Overview measure (masthead KPI + role stat) */
.ov-sendto{position:absolute;top:8px;right:8px;display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;padding:0;border:1px solid var(--line);border-radius:7px;background:var(--panel);
  color:var(--ink-faint);cursor:pointer;opacity:0;transition:opacity .12s,color .12s,border-color .12s;z-index:1}
.cell:hover .ov-sendto,.rstat:hover .ov-sendto,.ov-sendto:focus-visible{opacity:1}
.ov-sendto:hover{color:var(--accent);border-color:var(--accent)}

/* ---------- sections ---------- */
section{position:relative;z-index:1;padding:54px 0}
.sec-head{display:flex;align-items:baseline;gap:16px;margin-bottom:8px}
.sec-kicker{font-family:var(--mono);font-size:11.5px;color:var(--signal);letter-spacing:.2em;
  text-transform:uppercase;font-weight:600}
.sec-num{font-family:var(--mono);font-size:11.5px;color:var(--ink-faint)}
h2.sec{font-family:var(--serif);font-weight:600;font-size:clamp(28px,4vw,42px);letter-spacing:-.018em;
  margin:6px 0 0;color:var(--paper);line-height:1.05}
.sec-lede{font-size:16px;color:var(--ink-dim);max-width:640px;margin:18px 0 0}

.verdict{display:grid;grid-template-columns:1.1fr .9fr;gap:20px;margin-top:38px}
/* grid children must be allowed to shrink below content, or long monospace
   strings blow the track out and the report-pane clips them (no x-scroll) */
.verdict>*{min-width:0}
@media(max-width:1400px){.verdict{grid-template-columns:1fr}}
.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:24px}
.card h3{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-faint);margin:0 0 18px;font-weight:600}
.platform{display:flex;align-items:center;gap:15px}
.platform .wp{width:46px;height:46px;border-radius:12px;flex:none;
  background:linear-gradient(135deg,#2b3440,#1a2029);border:1px solid var(--line);display:grid;
  place-items:center;font-family:var(--serif);font-weight:700;font-size:20px;color:var(--paper)}
.platform .name{font-family:var(--serif);font-size:27px;font-weight:600;color:var(--paper);line-height:1.05}
.platform .name small{display:block;font-family:var(--sans);font-size:12.5px;font-weight:400;
  color:var(--ink-faint);margin-top:5px}
.ev-note{font-family:var(--mono);font-size:11.5px;color:var(--ink-faint);line-height:1.55;
  border-left:2px solid var(--line);padding-left:12px;margin-top:16px}
.purposes{display:flex;flex-direction:column;gap:10px}
.purpose{display:flex;align-items:center;gap:13px;padding:12px 14px;border-radius:10px;
  background:var(--panel-2);border:1px solid var(--line-soft);transition:transform .25s,border-color .25s}
.purpose:hover{transform:translateX(4px);border-color:var(--clr)}
.purpose .ico{width:8px;height:32px;border-radius:4px;background:var(--clr);flex:none;
  box-shadow:0 0 16px -2px var(--clr)}
.purpose .body{flex:1;min-width:0}
.purpose .pname{font-weight:600;font-size:14.5px;color:var(--paper)}
.purpose .pev{font-family:var(--mono);font-size:11px;color:var(--ink-faint);margin-top:3px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.badge{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  padding:4px 9px;border-radius:999px;flex:none;border:1px solid}
.badge.high{color:var(--high);border-color:color-mix(in srgb,var(--high) 40%,transparent);
  background:color-mix(in srgb,var(--high) 11%,transparent)}
.badge.medium{color:var(--medium);border-color:color-mix(in srgb,var(--medium) 40%,transparent);
  background:color-mix(in srgb,var(--medium) 11%,transparent)}
.badge.low,.badge.none{color:var(--none);border-color:color-mix(in srgb,var(--none) 45%,transparent);
  background:color-mix(in srgb,var(--none) 11%,transparent)}
.profile-grid{display:flex;flex-wrap:wrap;gap:10px}
.pchip{font-family:var(--mono);font-size:12px;padding:9px 13px;border-radius:9px;background:var(--panel-2);
  border:1px solid var(--line-soft)}
.pchip b{color:var(--ink-faint);font-weight:500;text-transform:uppercase;letter-spacing:.08em;
  font-size:10px;display:block;margin-bottom:3px}
.pchip span{color:var(--paper);font-size:13.5px}
.gap{display:flex;gap:11px;align-items:flex-start;font-size:13px;color:var(--ink-dim);padding:10px 0;
  border-top:1px solid var(--line-soft)}
.gap .x{color:var(--signal);font-family:var(--mono);font-weight:700;flex:none}

.hubrow{display:grid;grid-template-columns:200px 1fr 80px;align-items:center;gap:14px;padding:8px 0;
  border-bottom:1px solid var(--line-soft)}
.hubrow .tname{font-family:var(--mono);font-size:12px;color:var(--ink-dim);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.hubrow .bartrack{height:11px}
.hubrow .bar{height:11px;border-radius:3px;background:linear-gradient(90deg,var(--signal),var(--signal-soft));
  transition:width 1s cubic-bezier(.2,.7,.2,1)}
.hubrow .rc{font-family:var(--mono);font-size:12px;color:var(--paper);text-align:right;font-weight:600}

/* ---------- role tabs ---------- */
/* single-line, horizontally-scrollable role tabs (no wrapping — saves vertical
   space on mobile). Scrollbar hidden; tabs never shrink. */
.tabnav{position:sticky;top:0;z-index:5;display:flex;gap:6px;flex-wrap:nowrap;padding:14px 0;
  overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;
  background:linear-gradient(var(--bg) 72%,transparent)}
.tabnav::-webkit-scrollbar{display:none}
.tab{font-family:var(--mono);font-size:12px;font-weight:500;color:var(--ink-dim);background:var(--panel);
  border:1px solid var(--line);border-radius:999px;padding:9px 15px;cursor:pointer;display:flex;flex:none;
  align-items:center;gap:8px;transition:.22s;white-space:nowrap}
.tab .swatch{width:9px;height:9px;border-radius:50%;background:var(--clr);flex:none;transition:.22s}
.tab:hover{color:var(--paper);border-color:var(--clr)}
.tab.active{color:var(--on-signal);background:var(--clr);border-color:var(--clr);font-weight:600}
.tab.active .swatch{background:var(--on-signal)}
.panel{display:none}.panel.active{display:block;animation:fadein .45s cubic-bezier(.2,.7,.2,1)}
@keyframes fadein{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.role-hero{border-left:3px solid var(--clr);padding:4px 0 4px 24px;margin:28px 0 6px}
.role-tag{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--clr);font-weight:600}
.role-name{font-family:var(--serif);font-weight:600;font-size:clamp(28px,4vw,40px);color:var(--paper);
  line-height:1.04;margin:9px 0 0;letter-spacing:-.015em}
.role-obj{font-size:16px;color:var(--ink-dim);max-width:680px;margin:14px 0 0}
.owns{font-family:var(--mono);font-size:11.5px;color:var(--ink-faint);margin-top:16px}
.owns b{color:var(--clr)}
.rstats{display:grid;grid-template-columns:repeat(4,1fr);gap:13px;margin:30px 0 6px}
.rstats>*{min-width:0}
@media(max-width:760px){.rstats{grid-template-columns:repeat(2,1fr)}}
.rstat{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:18px;
  position:relative;overflow:hidden}
.rstat::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--clr);opacity:.7}
.rstat .v{font-family:var(--serif);font-weight:600;font-size:clamp(24px,3vw,34px);color:var(--paper);
  line-height:1;letter-spacing:-.02em}
.rstat .v em{font-style:normal;color:var(--clr)}
.rstat .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-faint);margin-top:9px;line-height:1.4}
.rstat .v,.rstat .k,.rstat .t{overflow-wrap:anywhere;word-break:break-word}
/* prose findings: no fake big-number — show the claim as readable wrapped text */
.rstat-text{display:flex;align-items:center}
.rstat-text .t{font-family:var(--serif);font-weight:600;font-size:17px;line-height:1.32;
  color:var(--paper);letter-spacing:-.01em}
.blk-head{display:flex;align-items:center;gap:12px;margin:46px 0 20px}
.blk-head .ln{height:1px;background:var(--line);flex:1}
.blk-head h4{font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--clr);margin:0;font-weight:600}
.evidence{display:grid;gap:12px}
.ev{background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden;
  transition:border-color .25s,transform .25s}
.ev:hover{border-color:var(--clr);transform:translateY(-2px)}
.ev .top{display:flex;gap:14px;padding:16px 19px 13px;align-items:flex-start}
.ev .idx{font-family:var(--serif);font-weight:600;font-size:20px;color:var(--clr);line-height:1;
  flex:none;width:28px}
.ev .claim{font-weight:600;font-size:15px;color:var(--paper);line-height:1.4}
.ev .qrow{font-family:var(--mono);font-size:11.5px;background:var(--bg-2);border-top:1px solid var(--line-soft);
  padding:11px 19px;color:var(--ink-dim);display:flex;gap:9px;align-items:flex-start;overflow-x:auto}
.ev .qrow .prompt{color:var(--clr);flex:none;font-weight:600}
.ev .qrow code{white-space:pre;color:var(--code-ink)}
.ev .resimp{display:grid;grid-template-columns:3fr 2fr;border-top:1px solid var(--line-soft)}
@media(max-width:620px){.ev .resimp{grid-template-columns:1fr}}
.ev .res{padding:13px 19px;background:color-mix(in srgb,var(--clr) 7%,transparent);
  border-right:1px solid var(--line-soft);min-width:160px}
.ev .res .rlbl{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint)}
.ev .res .rval{font-family:var(--mono);font-size:13px;color:var(--paper);font-weight:600;margin-top:5px;line-height:1.45}
.ev .imp{padding:13px 19px;font-size:13px;color:var(--ink-dim);line-height:1.5}
.ev .imp .ilbl{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--clr);display:block;margin-bottom:5px}
/* Comparative finding — a metric split across segments and/or vs a baseline.
   The derived contrast leads; each slice shows its value and folds its query. */
.cmp{border-top:1px solid var(--line-soft);background:color-mix(in srgb,var(--clr) 4%,transparent)}
.cmp-head{display:flex;flex-wrap:wrap;gap:8px;align-items:baseline;padding:12px 19px 8px}
.cmp-dim{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint)}
.cmp-contrast{font-size:13px;font-weight:600;color:var(--paper);line-height:1.4}
.cmp-rows{padding:0 19px 13px;display:grid;gap:6px}
.cmp-row{display:grid;grid-template-columns:minmax(80px,auto) 1fr auto;gap:12px;align-items:baseline;
  padding:6px 0;border-top:1px dashed var(--line-soft)}
.cmp-row.cmp-base{opacity:.78}
.cmp-lbl{font-family:var(--mono);font-size:11.5px;color:var(--clr);font-weight:600}
.cmp-val{font-family:var(--mono);font-size:12.5px;color:var(--paper)}
.cmp-q{justify-self:end}
.cmp-q summary{font-family:var(--mono);font-size:10px;color:var(--ink-faint);cursor:pointer;list-style:none}
.cmp-q code{display:block;white-space:pre-wrap;font-family:var(--mono);font-size:11px;color:var(--code-ink);
  margin-top:5px;max-width:420px}
.recs{display:grid;gap:10px;counter-reset:rec}
.rec{display:flex;gap:15px;background:var(--panel);border:1px solid var(--line);border-radius:11px;
  padding:15px 18px;align-items:flex-start;transition:.25s}
.rec:hover{border-color:var(--clr);background:var(--panel-2)}
.rec::before{counter-increment:rec;content:counter(rec,decimal-leading-zero);font-family:var(--mono);
  font-size:12px;font-weight:700;color:var(--clr);flex:none;padding-top:2px;min-width:24px}
.rec p{margin:0;font-size:14px;color:var(--ink);line-height:1.55}
.rec p b{color:var(--paper);font-weight:600}
.oq{margin-top:28px;background:var(--panel);border:1px dashed var(--line);border-radius:12px;padding:20px 22px}
.oq h5{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-faint);margin:0 0 13px;font-weight:600}
.oq ul{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.oq li{display:flex;gap:11px;font-size:13.5px;color:var(--ink-dim);line-height:1.5}
.oq li .q{color:var(--clr);font-family:var(--serif);font-weight:700;flex:none}

/* answered-from-the-data callout */
.qa{margin:28px 0 4px;background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--clr);
  border-radius:12px;padding:20px 22px}
.qa .qtag{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--clr);font-weight:600;display:flex;align-items:center;gap:8px}
/* small diamond marker drawn with CSS (a rotated square) — no glyph */
.qa .qtag::before{content:"";width:6px;height:6px;background:currentColor;transform:rotate(45deg);flex:none}
.qa .qq{font-family:var(--serif);font-style:italic;font-size:20px;color:var(--paper);line-height:1.3;margin:11px 0 13px}
.qa .qbody{font-size:14px;color:var(--ink-dim);line-height:1.6}
.qa ul.qlist{list-style:none;margin:14px 0 4px;padding:0;display:grid;gap:10px}
.qa ul.qlist li{display:grid;grid-template-columns:24px 1fr;gap:11px;font-size:13.5px;color:var(--ink-dim);line-height:1.5}
.qa .qcite{font-family:var(--mono);font-size:11px;color:var(--ink-faint);margin-top:14px;
  border-top:1px solid var(--line-soft);padding-top:12px;line-height:1.55}

/* honesty */
.honesty{background:linear-gradient(180deg,var(--panel),var(--bg-2));border:1px solid var(--line);
  border-radius:16px;padding:36px 34px;margin-top:28px}
.honesty .lede{font-family:var(--serif);font-size:19px;font-style:italic;color:var(--ink-dim);
  max-width:560px;line-height:1.45;margin:0 0 24px}
.conf-ladder{display:flex;gap:0;flex-wrap:wrap;margin:0 0 18px;border:1px solid var(--line);
  border-radius:11px;overflow:hidden;background:rgba(0,0,0,.18)}
.conf-ladder .rung{flex:1;min-width:90px;padding:12px 14px;border-right:1px solid var(--line-soft)}
.conf-ladder .rung:last-child{border-right:none}
.conf-ladder .rung.is-none{background:color-mix(in srgb,var(--signal) 9%,transparent)}
.conf-ladder .lvl{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.conf-ladder .rung.high .lvl{color:var(--high)}.conf-ladder .rung.medium .lvl{color:var(--medium)}
.conf-ladder .rung.low .lvl{color:var(--none)}.conf-ladder .rung.is-none .lvl{color:var(--signal)}
.conf-ladder .desc{font-size:11.5px;color:var(--ink-faint);margin-top:7px;line-height:1.4}
.conf-label{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-faint);margin:0 0 12px}
.notconc{display:flex;flex-wrap:wrap;gap:10px}
.nc{font-family:var(--mono);font-size:12.5px;color:var(--ink-dim);padding:10px 15px;border:1px solid var(--line);
  border-radius:9px;background:rgba(0,0,0,.2);display:flex;gap:10px;align-items:center}
.nc .strike{color:var(--signal);font-weight:700}
/* data-health flags reuse the .nc chip; a suspicious-zero (empty fact/activity table)
   is the highest-signal, so it carries the warning accent. Grounded row count tagged. */
.datahealth .nc code{color:var(--paper)}
.datahealth .dh-rows{color:var(--ink-faint);font-size:11.5px}
.datahealth .dh-suspicious-zero .strike{color:var(--destructive)}

/* custom sections */
.custom-sec{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:26px 28px;margin-top:18px}
.custom-sec h3{font-family:var(--serif);font-size:24px;color:var(--paper);margin:0 0 14px;font-weight:600}
.custom-sec .body{font-size:15px;color:var(--ink-dim);line-height:1.65}

/* change-flash highlight (the chef's-kiss live-edit moment) */
@keyframes flash{0%{box-shadow:0 0 0 0 var(--signal);background:color-mix(in srgb,var(--signal) 14%,transparent)}
  100%{box-shadow:0 0 0 8px transparent;background:transparent}}
.flash{animation:flash 1.8s cubic-bezier(.2,.7,.2,1)}

/* askable affordance — Overview report overlay ONLY.
   Scoped to .askable so it does NOT style the in-flow .pb-tools Ask button on wiki
   blocks (those use the inline `.pb-tools .ask-btn` rule near .pb-tools below). */
.askable{position:relative}
.askable>.ask-btn{position:absolute;top:8px;right:8px;z-index:6;font-family:var(--mono);font-size:10.5px;
  color:var(--on-signal);background:var(--signal);border:none;border-radius:999px;padding:4px 9px;cursor:pointer;
  opacity:0;transform:translateY(-3px);transition:.18s;font-weight:700;letter-spacing:.04em}
.askable:hover>.ask-btn{opacity:1;transform:none}
.askable>.ask-btn:hover{background:var(--signal-soft)}

/* ============ CHAT SIDEBAR ============ */
.chat{position:relative;display:flex;flex-direction:column;height:100%;border-left:1px solid var(--line);
  background:var(--bg-2);min-width:0;min-height:0;overflow:hidden}
/* draggable left-edge resize handle (desktop only; see @media(min-width:901px)).
   Hidden/inert by default — the desktop rule below shows it. */
.chat-resize{display:none;position:absolute;top:0;left:0;width:8px;height:100%;z-index:42;
  cursor:col-resize;transform:translateX(-4px);touch-action:none;
  background:transparent;transition:background .15s}
.chat-resize::before{content:"";position:absolute;top:0;left:4px;width:1px;height:100%;background:transparent}
.chat-resize:hover::before,.chat-resize.dragging::before{background:var(--signal)}
.chat-resize.dragging{background:color-mix(in srgb,var(--signal) 12%,transparent)}

/* draggable RIGHT-edge resize handle for the left TOC sidebar (mirror of .chat-resize;
   desktop only, see @media(min-width:901px) — and never on the collapsed icon rail).
   Hidden/inert by default; the desktop rule shows it. Dragging RIGHT widens the toc. */
.toc-resize{display:none;position:absolute;top:0;right:0;width:8px;height:100%;z-index:42;
  cursor:col-resize;transform:translateX(4px);touch-action:none;
  background:transparent;transition:background .15s}
.toc-resize::before{content:"";position:absolute;top:0;left:3px;width:1px;height:100%;background:transparent}
.toc-resize:hover::before,.toc-resize.dragging::before{background:var(--signal)}
.toc-resize.dragging{background:color-mix(in srgb,var(--signal) 12%,transparent)}
.chat-toolbar{display:flex;align-items:center;gap:8px;height:52px;padding:0 14px;border-bottom:1px solid var(--line);
  background:var(--panel);flex:none}
.chat-toolbar .brand{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--signal);font-weight:600;white-space:nowrap;flex:none}
.chat-toolbar button{font-family:var(--mono);font-size:11.5px;background:var(--panel-2);color:var(--ink);
  border:1px solid var(--line);border-radius:8px;height:30px;padding:0 10px;box-sizing:border-box;
  display:inline-flex;align-items:center;justify-content:center;line-height:1;cursor:pointer;transition:.18s}
.chat-toolbar button:hover{border-color:var(--signal);color:var(--paper)}
/* filterable session history — slides in over the chat body (no overflow) */
/* toolbar order: [sidebar toggle] [brand] … right cluster (history · +New) */
.session-picker{display:flex;flex:none;margin-left:auto}
#sessionBtn[aria-expanded="true"]{border-color:var(--signal);color:var(--paper)}
/* full-width overlay panel inside .chat, below the toolbar, covering the message body */
.session-panel{position:absolute;left:0;right:0;top:var(--chat-toolbar-h,49px);bottom:0;z-index:40;
  background:var(--bg-2);border-top:1px solid var(--line);
  display:flex;flex-direction:column;min-height:0;
  transform:translateY(-10px);opacity:0;pointer-events:none;
  transition:transform .22s cubic-bezier(.2,.7,.2,1),opacity .22s ease}
.session-panel[hidden]{display:none}
.session-panel.open{transform:translateY(0);opacity:1;pointer-events:auto}
.session-panel-head{display:flex;align-items:center;gap:8px;flex:none;
  padding:10px 12px;border-bottom:1px solid var(--line);background:var(--panel)}
.session-panel-title{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--signal);font-weight:600;flex:1;text-align:center}
.session-back,.session-close{font-family:var(--mono);font-size:13px;line-height:1;background:var(--panel-2);
  color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:6px 9px;cursor:pointer;
  transition:.18s;flex:none}
.session-back:hover,.session-close:hover{border-color:var(--signal);color:var(--paper)}
.session-filter{font-family:var(--mono);font-size:12px;background:var(--bg-2);color:var(--ink);
  border:0;border-bottom:1px solid var(--line);padding:10px 12px;outline:none;flex:none}
.session-filter::placeholder{color:var(--ink-faint)}
.session-list{list-style:none;margin:0;padding:6px;flex:1 1 auto;min-height:0;
  overflow-y:auto;overscroll-behavior:contain}
.session-item{display:flex;flex-direction:column;gap:2px;padding:7px 9px;border-radius:7px;cursor:pointer;outline:none}
.session-item:hover,.session-item:focus{background:rgba(255,255,255,.05)}
.session-item.active{background:color-mix(in srgb,var(--signal) 15%,transparent)}
.session-item.active .s-title{color:var(--paper)}
.session-item .s-title{font-size:12.5px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.session-item .s-meta{font-family:var(--mono);font-size:10px;color:var(--ink-faint)}
.session-empty{padding:12px;text-align:center;color:var(--ink-faint);font-family:var(--mono);font-size:11.5px;list-style:none}
.chat-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  padding:18px 16px;display:flex;flex-direction:column;gap:14px}
.msg{display:flex;flex-direction:column;gap:6px;max-width:100%}
.msg .who{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);
  display:flex;align-items:center;gap:6px;min-height:18px}
/* per-message "copy as markdown" — floats at the bubble's top-right corner as an
   overlay (like the block toolbars), revealed by opacity on hover/focus only (no
   layout shift). A small panel backdrop keeps the icon legible over bubble text. */
.msg .bubble-wrap{position:relative}
.msg-copy{position:absolute;top:6px;right:6px;z-index:2;width:18px;height:18px;padding:0;margin:0;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--panel-2);border:1px solid var(--line-soft);border-radius:6px;color:var(--ink-faint);cursor:pointer;
  opacity:0;transition:opacity .15s,color .15s,background .15s}
.msg-copy svg{width:14px;height:14px}
.msg:hover .msg-copy,.msg:focus-within .msg-copy,.msg-copy:focus-visible{opacity:1}
.msg-copy:hover{color:var(--paper);background:var(--panel)}
.msg-copy.copied{opacity:1;color:var(--high);border-color:var(--high)}
/* no copy affordance over an empty/working bubble (nothing to copy yet) */
.msg .bubble-wrap:has(.bubble:empty) .msg-copy{display:none}
/* toolbar "copy whole conversation" — icon-only square, matches the New/History buttons */
.chat-toolbar .copy-convo{flex:none;width:30px;padding:0}
.chat-toolbar .copy-convo.copied{border-color:var(--high);color:var(--high)}
/* toolbar "share this conversation" — icon-only square, matches copy/New */
.chat-toolbar .chat-share{flex:none;width:30px;padding:0}
/* toolbar "Copy conversation" dropdown — one trigger opening a small menu with
   Copy markdown / Copy with activity (reuses the persona-pick popover idiom;
   drops DOWN since the toolbar sits at the top of the chat column). */
.copy-pick{position:relative;display:inline-flex}
.copy-pick-menu{position:absolute;right:0;left:auto;top:calc(100% + 6px);z-index:25;
  display:flex;flex-direction:column;gap:2px;width:max-content;
  background:var(--panel-2);border:1px solid var(--border);border-radius:8px;
  padding:6px;box-shadow:0 6px 24px rgba(0,0,0,.18)}
.copy-pick-menu[hidden]{display:none}
.copy-mi{display:inline-flex;align-items:center;gap:8px;cursor:pointer;width:100%;
  font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.02em;color:var(--ink-dim);
  background:transparent;border:0;border-radius:6px;padding:6px 8px;text-align:left}
.copy-mi:hover{color:var(--ink);background:var(--panel)}
.copy-mi svg{color:var(--signal);flex:none}
.msg .bubble{font-size:14px;line-height:1.55;border-radius:12px;padding:11px 14px;white-space:pre-wrap;word-wrap:break-word}
/* an answer bubble with no content yet shouldn't render an empty box while Trey
   works — the live "working… {N}s" chip carries the progress instead. */
.msg .bubble:empty{display:none}
.msg.user .who{color:var(--signal)}
.msg.user .bubble{background:var(--panel);border:1px solid var(--line)}
.msg.assistant .bubble{background:var(--panel-2);border:1px solid var(--line-soft);color:var(--ink);white-space:normal;margin-top:2px}
.msg .bubble b{color:var(--paper)}
/* rendered Markdown inside an assistant bubble */
.msg.assistant .bubble>:first-child{margin-top:0}
.msg.assistant .bubble>:last-child{margin-bottom:0}
.msg.assistant .bubble p{margin:0 0 8px}
.msg.assistant .bubble strong{color:var(--paper)}
.msg.assistant .bubble em{font-style:italic}
.msg.assistant .bubble h1,.msg.assistant .bubble h2,.msg.assistant .bubble h3,
.msg.assistant .bubble h4,.msg.assistant .bubble h5,.msg.assistant .bubble h6{
  font-family:var(--serif);color:var(--paper);font-weight:600;line-height:1.25;margin:14px 0 6px}
.msg.assistant .bubble h1{font-size:18px}.msg.assistant .bubble h2{font-size:16px}
.msg.assistant .bubble h3{font-size:15px}.msg.assistant .bubble h4,
.msg.assistant .bubble h5,.msg.assistant .bubble h6{font-size:14px}
.msg.assistant .bubble ul,.msg.assistant .bubble ol{margin:6px 0 8px;padding-left:20px}
.msg.assistant .bubble li{margin:2px 0}
.msg.assistant .bubble a{color:var(--signal-soft);text-decoration:underline;text-underline-offset:2px}
.msg.assistant .bubble code{font-family:var(--mono);font-size:12.5px;background:rgba(255,255,255,.06);
  border:1px solid var(--line-soft);border-radius:4px;padding:1px 5px}
.msg.assistant .bubble pre{background:var(--bg-2);border:1px solid var(--line);border-radius:8px;
  padding:10px 12px;margin:8px 0;overflow-x:auto}
.msg.assistant .bubble pre code{background:none;border:0;padding:0;font-size:12.5px;white-space:pre;color:var(--ink)}
.msg.assistant .bubble blockquote{margin:8px 0;padding:2px 0 2px 12px;border-left:3px solid var(--line);
  color:var(--ink-dim)}
.msg.assistant .bubble hr{border:0;border-top:1px solid var(--line);margin:12px 0}
.msg.assistant .bubble .md-err{font-family:var(--mono);font-size:12px;color:var(--signal-soft);margin-top:6px}
.msg.assistant .bubble .md-retry-wrap{margin-top:8px}
.md-retry{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;cursor:pointer;
  font-family:var(--mono);font-size:12px;font-weight:600;color:var(--ink-dim);
  background:var(--panel);border:1px solid var(--line);border-radius:8px}
.md-retry:hover{color:var(--high);border-color:var(--high)}
.md-retry .ico{width:13px;height:13px}
.msg.assistant .bubble table{border-collapse:collapse;width:100%;margin:8px 0;font-size:12.5px;display:block;overflow-x:auto}
.msg.assistant .bubble th,.msg.assistant .bubble td{border:1px solid var(--line);padding:5px 9px;text-align:left;vertical-align:top}
.msg.assistant .bubble th{background:var(--bg-2);color:var(--paper);font-weight:600;font-family:var(--mono);
  font-size:11px;letter-spacing:.04em}
.msg.assistant .bubble tbody tr:nth-child(even){background:rgba(255,255,255,.025)}
/* collapsed query/proof inside a chat bubble — reuse the report's .qdetails look,
   but supply --clr (the report sets it per-panel) and inset it for the bubble. */
.msg.assistant .bubble .qdetails{--clr:var(--signal);border-top:1px solid var(--line-soft);
  border-radius:8px;margin:8px 0;background:rgba(255,255,255,.02)}
.msg.assistant .bubble .qdetails>summary{padding:7px 11px}
.msg.assistant .bubble .qdetails[open]>summary{border-bottom:1px solid var(--line-soft)}
.msg.assistant .bubble .qdetails.qcode>pre{margin:0;border:0;border-radius:0 0 8px 8px}
.msg.assistant .bubble .qdetails>:not(summary){padding:0 11px}
.msg.assistant .bubble .qdetails.qcode>:not(summary){padding:0}
.toolchips{display:flex;flex-wrap:wrap;gap:6px}
.toolchips:empty{display:none}   /* no chips (e.g. user turns) -> no flex gap above the bubble */
.toolchip{font-family:var(--mono);font-size:10.5px;color:var(--ink-dim);background:color-mix(in srgb,var(--signal) 8%,transparent);
  border:1px solid color-mix(in srgb,var(--signal) 30%,transparent);border-radius:999px;padding:3px 9px}
/* a chip is the way INTO the activity log (click → open + scroll to the call) */
#chatScroll .toolchip{cursor:pointer}
#chatScroll .toolchip:hover{border-color:color-mix(in srgb,var(--signal) 55%,transparent);color:var(--ink)}
.toolchip .spin{display:inline-block;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
/* live activity log under a turn — see each tool call's args + result as it streams */
.toollog{margin-top:1px}   /* working trail sits above the final response now; flex gap handles separation */
.toollog>summary{cursor:pointer;list-style:none;font-family:var(--mono);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-faint)}
.toollog>summary::-webkit-details-marker{display:none}
/* caret drawn as a CSS border-triangle (no glyph); rotates down when open */
.toollog>summary::before{content:"";display:inline-block;width:0;height:0;margin-right:6px;
  border-left:4px solid currentColor;border-top:3px solid transparent;border-bottom:3px solid transparent;
  vertical-align:middle;transition:transform .15s}
.toollog[open]>summary::before{transform:rotate(90deg)}
/* grow-to-fit: NO inner max-height/scrollbar — the activity log flows in the chat
   column (the user scrolls the whole column, like the regular streamed answer). */
.tl-body{margin-top:7px;display:grid;gap:8px;
  border-left:2px solid var(--line);padding-left:11px;font-family:var(--mono);font-size:11px}
.tl-row{display:grid;gap:3px}
.tl-call{color:var(--ink-dim);line-height:1.45;overflow-wrap:anywhere}
.tl-call b{color:var(--paper);font-weight:600}
.tl-call .tl-args{color:var(--ink-faint)}
.tl-call .spin{display:inline-block;animation:spin 1s linear infinite}
.tl-res{color:var(--ink-dim);white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.5;
  background:var(--bg-2);border-radius:6px;padding:6px 9px}
.tl-res:empty{display:none}
/* llm_request rows (ADR 0018 addendum): the EXACT request sent to the model —
   collapsed by default; the expanded dump (system prompt + message list) is huge,
   so unlike the grow-to-fit tool rows it scrolls INSIDE its own box. */
.tl-llmreq>summary{cursor:pointer;list-style:none}
.tl-llmreq>summary::-webkit-details-marker{display:none}
.tl-llmreq>summary::before{content:"";display:inline-block;width:0;height:0;margin-right:6px;
  border-left:4px solid currentColor;border-top:3px solid transparent;border-bottom:3px solid transparent;
  vertical-align:middle;transition:transform .15s}
.tl-llmreq[open]>summary::before{transform:rotate(90deg)}
.tl-llmreq .tl-res{margin-top:5px;max-height:320px;overflow:auto}
/* live reasoning ("thinking") panel — sits above the answer bubble; ticker = the
   latest reasoning line. Reuses the .toollog/.qdetails muted-monospace look. */
/* Persistent "about to: …" intent line — promoted from Trey's opening reasoning so
   the user durably sees what's coming even after the Thinking panel collapses. */
.intent{display:flex;align-items:flex-start;gap:6px;margin:0 0 6px;
  font-family:var(--mono);font-size:11px;line-height:1.45;color:var(--ink-dim)}
.intent .ico{flex:none;margin-top:1px;color:var(--ink-faint)}
.intent .intent-text{min-width:0;overflow-wrap:anywhere}
.trey-thinking{margin-top:1px}
.trey-thinking>summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:6px;
  font-family:var(--mono);font-size:10.5px;color:var(--ink-faint);min-width:0}
.trey-thinking>summary::-webkit-details-marker{display:none}
.trey-thinking>summary .spin{display:inline-block;animation:spin 1s linear infinite;flex:none}
.trey-thinking .tt-line{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;flex:1 1 auto;min-width:0}
.trey-thinking[open]>summary{color:var(--ink-dim)}
.tt-body{margin-top:7px;max-height:220px;overflow:auto;border-left:2px solid var(--line);
  padding-left:11px;font-family:var(--mono);font-size:11px;line-height:1.5;color:var(--ink-faint);
  white-space:pre-wrap;overflow-wrap:anywhere}
.chat-empty{color:var(--ink-dim);font-size:13px;line-height:1.55;padding:18px 16px;font-family:var(--sans)}
.chat-empty b{color:var(--paper);display:block;margin-bottom:8px;font-family:var(--mono);font-size:12px;
  letter-spacing:.12em;text-transform:uppercase}
.chat-empty p{margin:0 0 14px}
.chat-empty strong{color:var(--paper);font-weight:600}
.chat-empty-hint{color:var(--ink-faint);font-size:12px;margin:14px 0 0}
.suggest-list{display:flex;flex-direction:column;gap:7px}
.suggest{display:block;width:100%;text-align:left;font-family:var(--sans);font-size:12.5px;color:var(--ink);
  background:var(--panel-2);border:1px solid var(--line);border-radius:9px;padding:9px 11px;cursor:pointer;
  transition:.15s;line-height:1.4}
.suggest:hover{border-color:var(--signal);color:var(--paper);background:var(--panel)}
/* context indicators above the composer: a passive "Viewing" pill (so the user sees
   Trey knows where they are) + the explicit "Asking about" pill. Each is removable. */
.ctx-chip{margin:0 14px 8px;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.ctx-pill{display:inline-flex;align-items:center;gap:6px;max-width:100%;font-family:var(--mono);
  font-size:11px;color:var(--ink-dim);background:var(--panel-2);border:1px solid var(--line);
  border-radius:999px;padding:4px 6px 4px 9px}
.ctx-pill .ctx-ico{flex:0 0 auto;opacity:.85}
.ctx-pill .ctx-txt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ctx-pill.ctx-ask{color:var(--ink);border-color:color-mix(in srgb,var(--signal) 45%,var(--line))}
.ctx-pill.ctx-ask .ctx-ico{color:var(--signal);opacity:1}
.ctx-x{flex:0 0 auto;cursor:pointer;border:0;background:none;color:var(--ink-faint);
  font-size:12px;line-height:1;padding:1px 3px;border-radius:50%}
.ctx-x:hover{color:var(--signal);background:var(--panel)}
/* per-turn switches above the composer: Thinking (stream reasoning) + Planning
   (plan-before-act). Hand-rolled toggle, no lib; state persists in localStorage. */
.composer-toggles{display:flex;gap:16px;align-items:center;padding:8px 14px 0;background:var(--panel);justify-content:space-between}
.composer-toggles-right{display:flex;gap:8px;align-items:center}
/* Collapsed mode toggles: a compact Lucide chip per ENABLED mode + a sliders button
   that opens the labeled-toggles popover (reuses the persona-pick popover idiom). */
.mode-chips{display:inline-flex;gap:6px;align-items:center}
.mode-chip{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;
  border-radius:999px;flex:none;color:var(--signal);
  background:color-mix(in srgb,var(--signal) 14%,transparent);border:1px solid var(--signal)}
.mode-chip svg{width:14px;height:14px}
.mode-pick{position:relative;display:inline-flex}
.mode-pick-btn{display:inline-flex;align-items:center;justify-content:center;cursor:pointer;flex:none;
  color:var(--ink-dim);background:var(--panel-2);border:1px solid var(--border);border-radius:999px;padding:4px}
.mode-pick-btn:hover,.mode-pick-btn[aria-expanded="true"]{border-color:var(--signal);color:var(--ink)}
.mode-pick-menu{position:absolute;right:0;bottom:calc(100% + 6px);z-index:25;
  display:flex;flex-direction:column;gap:12px;width:max-content;
  background:var(--panel-2);border:1px solid var(--border);border-radius:8px;
  padding:12px 14px;box-shadow:0 -6px 24px rgba(0,0,0,.18)}
.mode-pick-menu[hidden]{display:none}
/* "Run in background" action inside the response-modes menu (ADR 0016) */
.mode-menu-sep{height:1px;background:var(--line);margin:1px 0}
.mode-action{display:inline-flex;align-items:center;gap:8px;cursor:pointer;width:100%;
  font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.02em;color:var(--ink-dim);
  background:transparent;border:0;border-radius:6px;padding:5px 4px;text-align:left}
.mode-action:hover{color:var(--ink);background:var(--panel)}
.mode-action svg{color:var(--signal);flex:none}
/* AI personas (ADR 0013): sticky persona picker on the left of the toggles row */
.persona-pick{position:relative}
.persona-pick[hidden]{display:none}
.persona-pick-btn{display:inline-flex;align-items:center;gap:6px;cursor:pointer;
  font-family:var(--mono);font-size:11px;font-weight:600;color:var(--ink);letter-spacing:.02em;
  background:var(--panel-2);border:1px solid var(--border);border-radius:999px;padding:3px 7px}
.persona-pick-btn:hover{border-color:var(--signal)}
.persona-pick-btn svg{color:var(--ink-dim);flex:none}
.pp-dot{width:8px;height:8px;border-radius:50%;background:var(--signal);flex:none}
.pp-name{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.persona-pick-menu{position:absolute;left:0;bottom:calc(100% + 6px);z-index:25;
  display:flex;flex-direction:column;
  width:max-content;min-width:200px;max-width:min(320px,calc(100vw - 28px));
  max-height:300px;overflow:hidden;background:var(--panel-2);
  border:1px solid var(--border);border-radius:8px;box-shadow:0 -6px 24px rgba(0,0,0,.18)}
.persona-pick-menu[hidden]{display:none}
/* the option rows scroll; the filter/help header stays pinned above them */
.pp-rows{flex:1 1 auto;min-height:0;overflow-y:auto}
/* picker header: filter input (shown at >=7 personas) + the (?) help toggle */
.pp-head{display:flex;align-items:center;gap:6px;padding:7px 8px;border-bottom:1px solid var(--line)}
.pp-head-slim{justify-content:flex-end;padding:3px 6px;border-bottom:0}
.pp-filter{flex:1 1 auto;min-width:0;font-family:var(--mono);font-size:11px;color:var(--ink);
  background:var(--panel);border:1px solid var(--border);border-radius:6px;padding:4px 7px}
.pp-filter:focus{outline:none;border-color:var(--signal)}
.pp-help-btn{display:inline-flex;align-items:center;justify-content:center;cursor:pointer;flex:none;
  color:var(--ink-dim);background:transparent;border:0;border-radius:6px;padding:3px}
.pp-help-btn:hover,.pp-help-btn[aria-expanded="true"]{color:var(--signal)}
/* (?) help panel — short explainer + the actionable "talk to @hr" line */
.pp-help{padding:8px 10px 9px;border-bottom:1px solid var(--line);
  font-size:11.5px;line-height:1.45;color:var(--ink-dim)}
.pp-help[hidden]{display:none}
.pp-help p{margin:0 0 6px}
.pp-help-handle{font-family:var(--mono);font-weight:600;color:var(--signal)}
.pp-help-hr{display:block;width:100%;cursor:pointer;text-align:left;font:inherit;color:var(--ink);
  background:color-mix(in srgb,var(--signal) 8%,transparent);
  border:1px solid var(--border);border-radius:6px;padding:6px 8px;margin-top:2px}
.pp-help-hr:hover{border-color:var(--signal)}
.pp-help-hr[hidden]{display:none}
/* quiet empty row when the filter matches nothing (never a blank popover) */
.pp-empty{padding:9px 12px;font-size:11.5px;color:var(--ink-faint)}
/* picker rows are name-only (dot + name + check) so long @handles never overflow */
.pp-rowname{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.pm-check{margin-left:auto;color:var(--signal);flex:none;opacity:0}
.pm-item{min-width:0}
.pm-item.sel .pm-check{opacity:1}
/* persona tag on an assistant reply: a colored dot before the name in the who-row */
.who-dot{width:8px;height:8px;border-radius:50%;flex:none}
/* roundtable header above a multi-persona panel (ADR 0014) */
.roundtable-note{display:flex;align-items:center;gap:7px;margin:10px 2px 2px;
  font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;color:var(--ink-dim)}
.roundtable-note svg{color:var(--signal);flex:none}
.cswitch{display:inline-flex;align-items:center;gap:7px;cursor:pointer;user-select:none}
.cswitch input{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.cswitch-track{flex:0 0 auto;position:relative;width:30px;height:17px;border-radius:999px;
  background:var(--panel-2);border:1px solid var(--line);transition:.18s}
.cswitch-knob{position:absolute;top:1px;left:1px;width:13px;height:13px;border-radius:50%;
  background:var(--ink-faint);transition:.18s}
.cswitch input:checked + .cswitch-track{background:color-mix(in srgb,var(--signal) 32%,var(--panel-2));
  border-color:var(--signal)}
.cswitch input:checked + .cswitch-track .cswitch-knob{left:14px;background:var(--signal)}
.cswitch input:focus-visible + .cswitch-track{outline:2px solid var(--signal);outline-offset:2px}
.cswitch-ico{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;color:var(--ink-dim)}
.cswitch-ico svg{width:15px;height:15px}
.cswitch input:checked ~ .cswitch-ico{color:var(--ink)}
.cswitch-label{font-family:var(--mono);font-size:11px;font-weight:600;color:var(--ink-dim);letter-spacing:.02em}
.cswitch input:checked ~ .cswitch-label{color:var(--ink)}
.composer{padding:12px 14px;background:var(--panel);display:flex;gap:9px;align-items:flex-end;position:relative}
/* AI personas (ADR 0013): the @-autocomplete menu above the composer */
.persona-menu{position:absolute;left:14px;right:14px;bottom:calc(100% - 4px);z-index:20;
  background:var(--panel-2);border:1px solid var(--border);border-radius:8px;
  box-shadow:0 -6px 24px rgba(0,0,0,.18);max-height:260px;overflow-y:auto}
.persona-menu[hidden]{display:none}
.pm-item{display:flex;align-items:center;gap:8px;padding:8px 11px;cursor:pointer;font-size:13px;
  border-bottom:1px solid var(--border)}
.pm-item:last-child{border-bottom:0}
.pm-item.sel,.pm-item:hover{background:var(--signal-soft);color:var(--on-signal)}
.pm-dot{width:8px;height:8px;border-radius:50%;flex:none}
.pm-handle{font-family:var(--mono);font-weight:600;flex:none}
.pm-name{font-weight:600;flex:none}
.pm-desc{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1 1 auto;min-width:0}
.pm-item.sel .pm-desc,.pm-item:hover .pm-desc{color:inherit;opacity:.85}
.composer textarea{flex:1;resize:none;font-family:var(--sans);font-size:14px;background:var(--panel-2);
  color:var(--ink);border:1px solid var(--line);border-radius:10px;padding:10px 12px;max-height:150px;line-height:1.5}
.composer textarea:focus{outline:none;border-color:var(--signal)}
.composer button{font-family:var(--mono);font-size:12px;font-weight:600;background:var(--signal);color:var(--on-signal);
  border:none;border-radius:10px;padding:11px 15px;cursor:pointer;transition:.18s}
.composer button:hover{background:var(--signal-soft)}
.composer button:disabled{opacity:.45;cursor:default}

/* ---- desktop docked panel toggles (collapse/expand TOC + chat) ---- */
/* hidden by default (and on mobile); only the relevant one shows on desktop
   when its panel is collapsed, so it stays reachable to reopen the panel. */
.dock-toggle{position:absolute;top:14px;z-index:8;display:none;align-items:center;justify-content:center;
  width:36px;height:36px;color:var(--ink-dim);background:rgba(15,18,23,.82);border:1px solid var(--line);
  border-radius:9px;cursor:pointer;backdrop-filter:blur(4px);transition:.18s}
.dock-toggle:hover{color:var(--paper);border-color:var(--signal)}
.dock-toc{left:14px}
.dock-chat{right:14px}

/* mobile drawer: FAB to open, close button + backdrop to dismiss */
.chat-fab{position:fixed;right:16px;bottom:16px;z-index:60;display:none;align-items:center;gap:7px;
  font-family:var(--mono);font-size:13px;font-weight:700;color:var(--on-signal);background:var(--signal);
  border:none;border-radius:999px;padding:13px 18px;box-shadow:0 8px 30px rgba(0,0,0,.55);cursor:pointer}
.chat-fab:active{transform:scale(.96)}
.toc-fab{position:fixed;left:16px;bottom:16px;z-index:60;display:none;align-items:center;gap:7px;
  font-family:var(--mono);font-size:13px;font-weight:700;color:var(--on-signal);background:var(--signal);
  border:none;border-radius:999px;padding:13px 16px;box-shadow:0 8px 30px rgba(0,0,0,.55);cursor:pointer}
.toc-fab:active{transform:scale(.96)}
/* sidebar/panel toggle (mirrors the TOC sidebar icon); sits first in the toolbar.
   inherits height/flex/hover from `.chat-toolbar button`; square padding for the icon. */
.chat-close{flex:none;padding:0 7px;background:var(--panel-2);color:var(--ink);
  border:1px solid var(--line);border-radius:8px;cursor:pointer}
.chat-close svg{display:block}
.chat-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:45;opacity:0;pointer-events:none;
  transition:opacity .28s}

@media(max-width:900px){
  .app{grid-template-columns:1fr;height:100dvh}
  .report-pane{width:100vw}
  .chat{position:fixed;top:0;right:0;height:100vh;height:100dvh;width:min(92vw,420px);z-index:50;
    transform:translateX(101%);transition:transform .3s cubic-bezier(.2,.7,.2,1)}
  /* shadow only when OPEN — a closed off-canvas drawer (translateX 101%) only clears
     the panel by ~1%, so a 60px blur on the base rule bleeds a dark vignette onto the
     screen edge. Casting it only in the open state keeps the slide-in glow, no bleed. */
  .app.chat-open .chat{transform:translateX(0);box-shadow:-24px 0 60px rgba(0,0,0,.6)}
  .app.chat-open .chat-backdrop{opacity:1;pointer-events:auto}
  .chat-fab{display:flex}
  .app.chat-open .chat-fab{display:none}
  .chat-close{display:inline-flex;align-items:center}
  /* TOC becomes a left slide-in drawer (page list is otherwise unreachable on mobile).
     Use `.app .toc` specificity to beat the later base `.toc{display:none}` rule.
     The icon rail is desktop-only — mobile always shows the full inner (brand + tree),
     even if the desktop `toc-collapsed` state happens to be persisted. */
  .app .toc{display:flex;flex-direction:column;position:fixed;top:0;left:0;height:100vh;height:100dvh;
    width:min(86vw,330px);z-index:50;
    transform:translateX(-101%);transition:transform .3s cubic-bezier(.2,.7,.2,1)}
  .app .toc-inner{display:flex}
  .app .toc-rail{display:none}
  /* mobile drawer: no in-drawer collapse toggle (use the backdrop/Pages button) */
  .app .toc-collapse{display:none}
  /* the app-bar button opens the drawer on mobile (the "Pages" affordance) — always
     visible since it's the only way to reach the TOC drawer */
  .appbar .ab-expand{display:inline-flex}
  /* Ask Trey opens the chat drawer; hide it only while that drawer is already open */
  .ab-ask{display:inline-flex}
  .app.chat-open .ab-ask{display:none}
  /* shadow only when OPEN (see .app.chat-open .chat) — no bleed while off-canvas */
  .app.toc-open .toc{transform:translateX(0);box-shadow:24px 0 60px rgba(0,0,0,.6)}
  .app.toc-open .chat-backdrop{opacity:1;pointer-events:auto}
  .toc-fab{display:flex}
  .app.toc-open .toc-fab,.app.chat-open .toc-fab{display:none}
  .dock-toggle{display:none !important}  /* desktop-only docked toggles */
}

/* ============ charts on findings (inline, no lib) ============ */
.chart{border-top:1px solid var(--line-soft);padding:14px 19px 16px;background:var(--bg-2)}
.chart-title{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:11px}
.cbars{display:grid;gap:7px}
.cbar-row{display:grid;grid-template-columns:minmax(64px,32%) 1fr auto;align-items:center;gap:10px}
.cbar-lbl{font-family:var(--mono);font-size:11px;color:var(--ink-dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cbar-track{height:10px;background:var(--panel-2);border-radius:3px;overflow:hidden}
.cbar-fill{display:block;height:100%;border-radius:3px;min-width:2px}
.cbar-val{font-family:var(--mono);font-size:11.5px;color:var(--paper);font-weight:600;text-align:right}
.cdonut{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.clegend{display:grid;gap:6px;font-family:var(--mono);font-size:11.5px;color:var(--ink-dim)}
.cleg{display:flex;align-items:center;gap:8px}
.cdot{width:10px;height:10px;border-radius:3px;flex:none}
.cleg b{color:var(--paper);font-weight:600}.cpct{color:var(--ink-faint)}
.cline svg{display:block}
.cline-x{display:flex;justify-content:space-between;font-family:var(--mono);font-size:10px;color:var(--ink-faint);margin-top:5px}
/* multi-series: column charts (grouped/stacked bar) + the shared series legend */
.ccol svg{display:block;width:100%}
.cbar-axis{stroke:var(--line-soft);stroke-width:1}
.cbar-xtxt{font-family:var(--mono);font-size:8px;fill:var(--ink-faint)}
.cseries-leg{display:flex;flex-wrap:wrap;gap:6px 14px;font-family:var(--mono);font-size:10.5px;color:var(--ink-dim);margin-bottom:9px}
.cleg-item{display:flex;align-items:center;gap:6px}

/* collapsed SQL behind a details/summary (non-technical readers see graph + meaning) */
.qdetails{border-top:1px solid var(--line-soft)}
.qdetails>summary{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-faint);padding:9px 19px;cursor:pointer;list-style:none;user-select:none}
.qdetails>summary::-webkit-details-marker{display:none}
/* caret as a CSS border-triangle (no glyph) tinted with --clr; rotates when open */
.qdetails>summary::before{content:"";width:0;height:0;margin-right:7px;display:inline-block;vertical-align:middle;
  border-left:4px solid var(--clr);border-top:3px solid transparent;border-bottom:3px solid transparent;transition:transform .15s}
.qdetails[open]>summary::before{transform:rotate(90deg)}
.qdetails>summary:hover{color:var(--ink-dim)}
.qdetails .qrow{border-top:1px solid var(--line-soft)}

/* ============ mermaid diagrams (wiki + chat) ============
   Centered, dark-friendly container; wide diagrams scroll horizontally instead of
   breaking the layout. Before the bundle renders, the placeholder shows the raw source
   as muted monospace; the rendered SVG replaces it. */
.mermaid{display:block;margin:16px 0;padding:14px;text-align:center;overflow-x:auto;
  background:var(--panel-2);border:1px solid var(--line-soft);border-radius:10px;
  font-family:var(--mono);font-size:12px;color:var(--ink-dim);white-space:pre}
.mermaid.mermaid-rendered{white-space:normal;color:inherit}
.mermaid svg{max-width:100%;height:auto}
.mermaid.mermaid-error{text-align:left}
.mermaid .mermaid-note{font-family:var(--mono);font-size:11px;color:var(--signal-soft);margin-bottom:8px}
.mermaid .mermaid-fallback{margin:0;white-space:pre;overflow-x:auto;color:var(--ink-dim)}
.msg.assistant .bubble .mermaid{margin:10px 0}

/* ============ left table-of-contents sidebar ============
   Full-height column (grid-row 1/-1) to the LEFT of the app bar. */
.toc{display:none;position:relative;z-index:41;grid-column:1;grid-row:1/-1;
  border-right:1px solid var(--line);background:var(--bg-2);overflow:hidden;
  display:flex;flex-direction:column}
/* .toc-inner is the positioning context + clip box for the bottom-sheet account
   panel/scrim: it fills the sidebar height and does NOT scroll (the page tree
   scrolls in its own .toc-scroll child), so the slide-up panel is anchored to the
   sidebar viewport rather than scrolling with — or being clipped by — the tree. */
.toc-inner{display:flex;flex-direction:column;height:100%;min-height:0;
  padding:0 18px 22px;position:relative;overflow:hidden}
/* the page tree is the only scrolling region inside the sidebar */
.toc-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;
  margin:0 -18px;padding:0 18px}
.toc h6{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--signal);margin:0 0 14px;font-weight:600}

/* ---- sidebar brand header (replaces the old "Contents" head) ---- */
.toc-brandhead{display:flex;align-items:center;gap:10px;height:52px;flex:none;
  margin:0 -18px 14px;padding:0 16px 0 18px;border-bottom:1px solid var(--line-soft)}
.toc-brand{display:flex;align-items:baseline;gap:8px;flex:1;min-width:0;
  font-family:var(--serif);font-weight:700;font-size:18px;color:var(--paper);line-height:1}
.toc-brand small{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-faint);font-weight:500}
.toc-collapse{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;flex:none;
  color:var(--ink-faint);background:none;border:1px solid var(--line);border-radius:8px;cursor:pointer;transition:.18s}
.toc-collapse:hover{color:var(--paper);border-color:var(--signal)}
.toc-collapse svg{display:block}

/* ---- collapsed icon rail (desktop) ---- */
.toc-rail{display:none;flex-direction:column;align-items:center;gap:8px;padding:11px 0;height:100%}
.toc-rail .rail-btn{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;
  color:var(--ink-dim);background:none;border:1px solid transparent;border-radius:9px;cursor:pointer;transition:.18s}
.toc-rail .rail-btn:hover{color:var(--paper);border-color:var(--signal);background:var(--panel)}
.toc-rail .rail-btn.active{color:var(--signal)}
.toc-rail .rail-spacer{flex:1}
.toc-rail svg{display:block}
.toc .toc-sec{display:block;width:100%;text-align:left;background:none;border:none;cursor:pointer;font-family:var(--sans);
  font-size:13.5px;color:var(--ink-dim);padding:8px 10px;border-radius:8px;border-left:2px solid transparent;transition:.18s}
.toc .toc-sec:hover{color:var(--paper);background:var(--panel)}
.toc .toc-sec .n{font-family:var(--mono);font-size:10px;color:var(--ink-faint);margin-right:8px}
.toc .toc-roles{margin:3px 0 8px}
.toc .toc-role{display:flex;align-items:center;gap:9px;width:100%;text-align:left;background:none;border:none;cursor:pointer;
  font-family:var(--mono);font-size:12px;color:var(--ink-faint);padding:6px 10px 6px 16px;border-radius:7px;
  border-left:2px solid transparent;transition:.18s}
.toc .toc-role:hover{color:var(--paper);background:var(--panel)}
.toc .toc-role .dot{width:8px;height:8px;border-radius:50%;background:var(--clr);flex:none}
.toc .toc-role.active{color:var(--paper);background:var(--panel);border-left-color:var(--clr)}
.toc-foot{flex:none;padding-top:14px;border-top:1px solid var(--line-soft)}
.toc-foot-meta{font-family:var(--mono);font-size:10.5px;color:var(--ink-faint);line-height:1.6}
/* signed-in account, pinned in the sidebar footer: identity row + (kebab) submenu */
/* no position here: the bottom-sheet menu/scrim are absolute against .toc-inner (the
   non-scrolling sidebar viewport), so they full-bleed past this row's box. */
.toc-acct{margin-top:14px;padding-top:12px;border-top:1px solid var(--line-soft)}
.toc-acct-id{display:flex;align-items:center;gap:9px;padding:0 2px}
.toc-avatar{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;
  background:var(--signal);color:var(--on-signal);font:700 12px var(--mono);flex:none}
.toc-acct-name{flex:1;min-width:0;display:flex;flex-direction:column;color:var(--ink);font-size:13px;font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.toc-acct-name small{font:500 9.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-faint);margin-top:2px}
.toc-acct-kebab{flex:none;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;
  border-radius:7px;background:none;border:1px solid transparent;color:var(--ink-dim);cursor:pointer}
.toc-acct-kebab:hover,.toc-acct-kebab[aria-expanded="true"]{border-color:var(--line);color:var(--paper)}
.toc-acct-kebab svg{display:block}
/* The account submenu is an in-sidebar BOTTOM SHEET that slides UP from the account
   row, dimming the page tree behind a scrim — it mirrors the chat .session-panel
   slide idiom. Both the scrim and the panel are position:absolute against .toc-inner
   (which is overflow:hidden, NOT scrolling), so the sheet is pinned to the sidebar
   viewport and never overhangs the content pane or scrolls with the tree. Full-bleed
   (left/right/bottom negative insets cancel .toc-inner's padding) so it spans the
   whole sidebar width at any --toc-w. */
.toc-acct-scrim{position:absolute;left:-18px;right:-18px;top:0;bottom:-22px;z-index:45;
  background:rgba(0,0,0,.5);opacity:0;pointer-events:none;transition:opacity .22s ease}
.toc-acct-scrim[hidden]{display:none}
.toc-acct-scrim.open{opacity:1;pointer-events:auto}
.toc-acct-menu{position:absolute;left:-18px;right:-18px;bottom:-22px;z-index:46;
  background:var(--popover,var(--panel));border-top:1px solid var(--line);
  box-shadow:0 -16px 40px rgba(0,0,0,.5);
  padding:8px 18px calc(22px + 8px);display:flex;flex-direction:column;gap:2px;
  transform:translateY(100%);pointer-events:none;
  transition:transform .22s cubic-bezier(.2,.7,.2,1)}
.toc-acct-menu[hidden]{display:none}
.toc-acct-menu.open{transform:translateY(0);pointer-events:auto}
.acct-menu-head{display:flex;flex-direction:column;gap:2px;padding:6px 10px 8px;margin-bottom:4px;
  border-bottom:1px solid var(--line-soft)}
.acct-menu-head b{color:var(--ink);font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acct-menu-head span{color:var(--ink-faint);font:10.5px var(--mono);letter-spacing:.03em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acct-mi{display:flex;align-items:center;gap:9px;width:100%;text-align:left;background:none;border:none;
  color:var(--ink);font:13px var(--sans);padding:8px 10px;border-radius:6px;cursor:pointer}
.acct-mi:hover{background:var(--panel-2)}
.acct-mi svg{display:block;flex:none;color:var(--ink-dim)}
.acct-mi-danger{color:var(--signal-soft)}
.acct-mi-danger svg{color:var(--signal-soft)}
/* segmented theme switcher (Light | Dark | System) inside the account menu.
   Stacked as its own full-width row (label above, segments below) so all three
   segments — Light | Dark | System — fit without the longest ("System") clipping. */
.acct-theme{display:flex;flex-direction:column;align-items:stretch;gap:6px;padding:8px 10px 6px;margin-top:4px;
  border-top:1px solid var(--line-soft)}
.acct-theme-row{display:flex;align-items:center;gap:9px}
.acct-theme > svg,.acct-theme-row > svg{flex:none;color:var(--ink-dim)}
.acct-theme-lbl{color:var(--ink-dim);font:11px var(--mono);letter-spacing:.04em;
  text-transform:uppercase;flex:none}
.theme-seg{display:flex;width:100%;background:var(--panel-2);border:1px solid var(--line);
  border-radius:7px;padding:2px;gap:2px}
.theme-seg-btn{flex:1;text-align:center;background:none;border:none;color:var(--ink-dim);font:11px var(--mono);font-weight:600;
  padding:5px 6px;border-radius:5px;cursor:pointer;line-height:1;white-space:nowrap;transition:.15s}
.theme-seg-btn:hover{color:var(--ink)}
.theme-seg-btn[aria-pressed="true"]{background:var(--signal);color:var(--on-signal)}
.theme-seg-btn:focus-visible{outline:2px solid var(--signal);outline-offset:1px}

/* ---- Overview tree: collapsible root whose children are the report sections ---- */
.toc-node{display:flex;align-items:stretch;gap:2px}
.toc-node .toc-caret{flex:none;width:22px;display:inline-flex;align-items:center;justify-content:center;
  background:none;border:0;color:var(--ink-faint);font-size:11px;cursor:pointer;border-radius:7px;
  transition:transform .15s,color .15s;align-self:center;height:30px}
.toc-node .toc-caret:hover{color:var(--paper)}
.toc-node .toc-caret.open{transform:rotate(90deg)}
.toc-node .toc-caret[disabled]{opacity:0;cursor:default;pointer-events:none}
.toc-node .toc-root{flex:1;min-width:0}
/* "+ Import" sidebar action on the Scratch Data node — mirrors the wiki
   ".tph-newfolder" affordance; lives at the right edge of the node row */
.toc-node .scratch-import-nav{flex:none;align-self:center;background:none;border:0;color:var(--ink-faint);
  font:inherit;font-size:11px;cursor:pointer;padding:1px 6px;margin-right:4px;border-radius:5px;
  letter-spacing:0;text-transform:none;white-space:nowrap}
.toc-node .scratch-import-nav:hover{background:var(--panel-2);color:var(--signal)}
/* the section subtree (children of Overview): hidden unless .open, indented a level */
.toc-subtree{display:none;margin:2px 0 4px 22px;padding-left:8px;border-left:1px solid var(--line-soft)}
.toc-subtree.open{display:block}
/* roles sit a further level in, under Stakeholders */
.toc-subtree .toc-roles{margin:2px 0 6px 6px}
.toc-subtree .toc-role{padding-left:14px}

/* ---- desktop layout + collapse states (>=901px; separate from the mobile drawer) ----
   On desktop the sidebar is a real grid column (full height in col 1). When the
   sidebar is collapsed it shrinks to a thin icon RAIL (it is never fully hidden);
   the app-bar then shows the D.A. brand + an expand toggle. */
@media(min-width:901px){
  :root{--rail-w:54px;--toc-w:240px}
  /* sidebar full-height in column 1; app bar over the content columns only */
  .app{grid-template-columns:var(--toc-w) 1fr var(--chat-w);grid-template-rows:52px 1fr}
  .toc{display:flex}
  /* the chat (left-edge) AND the toc (right-edge) resize handles are desktop-only */
  .chat-resize,.toc-resize{display:block}
  /* app bar covers ONLY the report column — between the TOC (col 1) and the
     full-height chat (col 3); both sidebars are level with it, never under it */
  .appbar{grid-column:2/3;grid-row:1}
  .report-pane{grid-column:2;grid-row:2}
  /* chat is a full-height right sidebar mirroring the TOC (top->bottom of viewport) */
  .chat{grid-column:3;grid-row:1/-1}

  /* sidebar collapsed -> thin icon rail (show rail markup, hide the full inner) */
  .app.toc-collapsed{grid-template-columns:var(--rail-w) 1fr var(--chat-w)}
  .app.toc-collapsed .toc-inner{display:none}
  .app.toc-collapsed .toc-rail{display:flex}
  /* the toc resize handle is inert on the collapsed icon rail (fixed --rail-w width) */
  .app.toc-collapsed .toc-resize{display:none}
  /* app-bar brand + separator appear only when the sidebar is collapsed to a rail.
     The TOC toggle (.ab-expand) is NEVER shown in the app bar on desktop: when the
     sidebar is open its brand-header carries the collapse toggle, and when collapsed
     the rail's own top toggle reopens it — so the app-bar one is always redundant. */
  .app.toc-collapsed .ab-brand{display:flex}
  .app.toc-collapsed .ab-sep{display:inline}
  .ab-expand{display:none}

  /* chat can be collapsed at any desktop width; drop its column */
  .app.chat-collapsed{grid-template-columns:var(--toc-w) 1fr}
  .app.chat-collapsed .chat{display:none}
  .app.chat-collapsed.toc-collapsed{grid-template-columns:var(--rail-w) 1fr}

  /* Ask Trey app-bar button is a RE-OPEN affordance only: shown when the chat is
     collapsed, hidden when the docked chat is open (it has its own close / Esc). */
  .ab-ask{display:none}
  .app.chat-collapsed .ab-ask{display:inline-flex}
}

/* slightly narrower sidebar + chat in the 901–1200 range to keep the report roomy */
@media(min-width:901px) and (max-width:1200px){
  /* narrower default toc here (overridable: a user drag sets --toc-w inline on .app) */
  :root{--toc-w:212px}
  .app{grid-template-columns:var(--toc-w) 1fr var(--chat-w)}
  .app.chat-collapsed{grid-template-columns:var(--toc-w) 1fr}
}

/* ============ WIKI PAGES (additive companion docs) ============ */
/* TOC: the page switcher (Overview home + generated pages) */
.toc-pages{display:flex;flex-direction:column;gap:2px;margin:2px 0 6px}
.toc-page{display:flex;align-items:center;gap:9px;width:100%;text-align:left;
  background:none;border:0;color:var(--ink-dim);font:inherit;font-size:13px;
  padding:7px 10px;border-radius:8px;cursor:pointer;border-left:2px solid transparent}
.toc-page:hover{background:var(--panel-2);color:var(--ink)}
.toc-page.active{background:var(--panel-2);color:var(--ink);border-left-color:var(--signal)}
.toc-page .pg-ico{flex:0 0 16px;color:var(--ink-faint);width:16px;display:inline-flex;align-items:center;justify-content:center}
.toc-page .pg-ico svg{display:block}
.toc-page.active .pg-ico{color:var(--signal)}
/* the title takes the remaining width; allow long titles to wrap as before */
.toc-page .pg-name{flex:1 1 auto;min-width:0}
/* the delete control keeps a FIXED layout slot at ALL times (rest + hover) so the
   title's available width never changes — only opacity changes on hover. Revealing
   it must never use display/width toggles (that re-wraps the title -> row grows). */
.toc-page .pg-del{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  width:18px;height:18px;margin-left:auto;opacity:0;color:var(--ink-faint);
  border-radius:4px;transition:opacity .12s ease}
.toc-page .pg-del svg{display:block}
.toc-page:hover .pg-del,.toc-page:focus-within .pg-del{opacity:.7}
.toc-page .pg-del:hover{opacity:1;color:var(--signal)}

/* page header in the report pane */
.page-head{margin:8px 0 30px}
.page-head .page-kicker{font-family:var(--mono);font-size:11.5px;color:var(--signal);
  letter-spacing:.2em;text-transform:uppercase}
.page-head h1{font-family:var(--serif,Fraunces,serif);font-size:clamp(30px,5vw,46px);
  line-height:1.04;margin:14px 0 0;font-weight:600}
.page-head .page-summary{color:var(--ink-dim);max-width:680px;margin:16px 0 0;line-height:1.5}
/* the back link is rendered as a sibling BEFORE .page-head, so scope it directly
   (not as a .page-head descendant) or it falls back to the default browser button */
.page-back{display:inline-flex;align-items:center;gap:6px;margin-bottom:18px;
  font-family:var(--mono);font-size:12px;color:var(--ink-faint);background:none;border:0;
  cursor:pointer;padding:0}
.page-back:hover{color:var(--signal)}
/* "Refresh all" + last-refreshed stamp (shown only when the page has re-runnable data) */
.page-refresh{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:20px 0 0}
.page-refresh-all{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:11px;
  letter-spacing:.04em;color:var(--ink-dim);background:var(--panel-2);border:1px solid var(--line);
  border-radius:8px;padding:7px 12px;cursor:pointer;transition:.18s}
.page-refresh-all:hover{color:var(--paper);border-color:var(--signal)}
.page-refresh-all.busy{opacity:.7;pointer-events:none}
.page-refresh-all .ref-ico{display:inline-block;line-height:1}
.page-refresh-all.busy .ref-ico{animation:spin .8s linear infinite}
.page-refresh-ts{font-family:var(--mono);font-size:10.5px;letter-spacing:.03em;color:var(--ink-faint)}

.page-blocks{display:flex;flex-direction:column;gap:20px}
/* Dashboard grid: blocks flow into a 12-col responsive grid and wrap into rows.
   A `full` block spans all 12 (so it starts a fresh row); half/third/quarter let
   blocks sit side-by-side. `grid-auto-flow:row dense` keeps the packing tight while
   never reordering a `full`. Default width is full → existing pages render identically. */
.page-blocks.pb-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:20px;align-items:start;grid-auto-flow:row dense}
.pb-grid > .pb-w-full{grid-column:span 12}
.pb-grid > .pb-w-half{grid-column:span 6}
.pb-grid > .pb-w-third{grid-column:span 4}
.pb-grid > .pb-w-quarter{grid-column:span 3}
/* Responsive: drop to fewer columns, then a single stacked column on narrow screens. */
@media(max-width:1000px){
  .pb-grid > .pb-w-third{grid-column:span 6}
  .pb-grid > .pb-w-quarter{grid-column:span 6}
}
@media(max-width:700px){
  .page-blocks.pb-grid{grid-template-columns:1fr}
  .pb-grid > .pblock,.pb-grid > .pb-empty{grid-column:1 / -1}
}
.pblock{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:22px 24px;position:relative}
/* loading state while a data block re-runs its query (can take seconds for GraphQL) */
.pblock.refreshing{pointer-events:none}
.pblock.refreshing::after{content:"";position:absolute;inset:0;border-radius:inherit;z-index:5;
  background:color-mix(in srgb,var(--panel) 60%,transparent)}
.pblock.refreshing::before{content:"";position:absolute;top:calc(50% - 12px);left:calc(50% - 12px);
  width:24px;height:24px;z-index:6;border-radius:50%;
  border:2px solid var(--line);border-top-color:var(--signal);animation:spin .8s linear infinite}
.pblock.prose{background:none;border:0;padding:4px 0}
.pblock h3.pb-title{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-faint);margin:0 0 14px;font-weight:600;
  display:flex;align-items:center;gap:10px}
.pblock .pb-prose{color:var(--ink);line-height:1.6}
.pblock .pb-prose p{margin:0 0 12px}
.pblock .pb-prose a{color:var(--signal);text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--signal) 40%,transparent)}
.pblock .pb-prose a:hover{border-bottom-color:var(--signal)}

/* "On the Go" reference block: a live pointer to a source chart/stat/table — renders
   like its underlying kind, plus a "from <page>" provenance link + an unpin control. */
.pblock.ref{border-style:dashed;border-color:color-mix(in srgb,var(--signal) 40%,var(--line))}
.pblock.ref.prose{border-style:dashed;border-width:1px;padding:14px 16px;background:var(--panel)}
.pb-ref{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:14px;
  padding-top:10px;border-top:1px dashed var(--line);font-family:var(--mono);font-size:11px;
  letter-spacing:.04em;color:var(--ink-faint)}
.pb-ref .ref-from{display:inline-flex;align-items:center;gap:5px;color:var(--signal);
  text-decoration:none}
.pb-ref .ref-from:hover{text-decoration:underline}
.pb-ref .ref-unpin{display:inline-flex;align-items:center;gap:5px;margin-left:auto;
  background:none;border:0;color:var(--ink-faint);cursor:pointer;font:inherit;padding:2px 4px;
  border-radius:6px}
.pb-ref .ref-unpin:hover{color:var(--signal);background:color-mix(in srgb,var(--signal) 12%,transparent)}
.pb-ref .ref-unpin.busy{opacity:.5;pointer-events:none}

/* finding block (evidence-card flavor) */
.pblock.finding .pb-claim{font-size:16px;line-height:1.45;color:var(--ink);margin:0 0 12px}
.pblock .pb-resimp{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:6px}
@media(max-width:560px){.pblock .pb-resimp{grid-template-columns:1fr}}
.pblock .pb-resimp .rlbl,.pblock .pb-resimp .ilbl{font-family:var(--mono);font-size:10.5px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);display:block;margin-bottom:5px}
.pblock .pb-resimp .rval{color:var(--ink);font-size:14px}
.pblock .pb-resimp .imp{color:var(--ink-dim);font-size:14px;line-height:1.5}

/* stat (KPI) block — a compact card matching the Overview .statband look. The big
   value + colored delta are SERVER-COMPUTED (b.stat); the client renders, never maths. */
/* KPI cards stretch to the tallest card in their row (the grid is align-items:start,
   so opt the stat cards back into stretch) — equal-height row, content top-aligned. */
.pblock.stat{padding:18px 20px;align-self:stretch;display:flex;flex-direction:column}
/* Equal-height ROWS for the data blocks too: charts, findings and tables opt into the
   same stretch + flex-column treatment as the KPI cards so blocks sharing a grid row
   all reach the row's tallest height. Prose stays content-sized (a lone prose block in
   a mixed row shouldn't be force-stretched into an awkward tall card). */
.pblock.chart,.pblock.finding,.pblock.table{align-self:stretch;display:flex;flex-direction:column}
/* Within those stretched blocks the title row stays fixed and the body fills the rest,
   so the bottom edges of two cards in a row line up. */
.pblock.chart > .pb-title,.pblock.finding > .pb-title,.pblock.table > .pb-title{flex:none}
/* The chart container grows to fill the card; its inner body (bars / columns / pie /
   line) centers in the available height so a taller card has no dead gap below the
   chart. The hand-rolled SVGs already scale to width (preserveAspectRatio), so they
   simply sit centered in the extra vertical space — no distortion. */
.pblock.chart > .chart{flex:1;display:flex;flex-direction:column}
.pblock.chart > .chart > .chart-title{flex:none}
/* the chart body wrapper (.cbars / .ccol / .cdonut / .cline) takes the remaining
   height; each centers its real content vertically in that space per its own layout
   (grid bars: center the rows; flex column charts: center the svg; the donut row: it
   already cross-centers). No body grows the SVG itself, so nothing distorts. */
.pblock.chart .cbars{flex:1;align-content:center}
.pblock.chart .ccol,.pblock.chart .cline{flex:1;display:flex;flex-direction:column;justify-content:center}
.pblock.chart .cdonut{flex:1;align-items:center}
.pb-stat-head{display:flex;align-items:flex-start;gap:10px;margin-bottom:10px}
.pb-stat-lbl{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-faint);font-weight:600;line-height:1.4;min-width:0;flex:1}
/* hover tools are an absolute top-right overlay via the SHARED .pblock .pb-tools rule
   below (out of flow) so the stat label uses the full card width; stat just nudges the
   overlay to match its tighter 18px padding. */
.pblock.stat .pb-tools{top:14px;right:14px}
/* card body fills the stretched card so the sections line up across a KPI row:
   the value flex-fills + vertically centers, the delta/sublabel pin to the bottom. */
.pb-stat-card{display:flex;flex-direction:column;gap:6px;min-width:0;flex:1}
.pb-stat-val{font-family:var(--serif);font-weight:600;font-size:clamp(28px,3.4vw,42px);
  line-height:1;color:var(--ink);font-variant-numeric:tabular-nums;
  flex:1;display:flex;align-items:center}
.pb-stat-delta{display:inline-flex;align-items:center;gap:5px;font-family:var(--mono);
  font-size:12px;font-weight:600;align-self:flex-start}
.pb-stat-delta .ico{flex:none}
.pb-stat-delta.up{color:var(--high)}
.pb-stat-delta.down{color:var(--signal)}
.pb-stat-delta.flat{color:var(--ink-faint)}
.pb-stat-pct{color:var(--ink-faint);font-weight:500}
.pb-stat-sub{font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--ink-faint);margin-top:2px}

/* data table */
.pb-table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:10px}
table.pb-table{width:100%;border-collapse:collapse;font-size:13px}
table.pb-table th,table.pb-table td{padding:9px 14px;text-align:left;border-bottom:1px solid var(--line-soft);
  white-space:nowrap}
table.pb-table thead th{font-family:var(--mono);font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-faint);cursor:pointer;user-select:none;position:sticky;top:0;
  background:var(--panel-2)}
table.pb-table thead th:hover{color:var(--ink)}
table.pb-table thead th .sort-ind{color:var(--signal);margin-left:6px;font-size:10px}
table.pb-table tbody tr:hover{background:var(--panel-2)}
table.pb-table td.num{text-align:right;font-variant-numeric:tabular-nums}
.pb-empty{color:var(--ink-faint);font-size:13px;padding:14px;font-style:italic}

/* source-reference affordance + refresh */
.pb-tools{display:flex;align-items:center;gap:8px}
/* SHARED hover-toolbar overlay — unified across ALL block kinds (chart/finding/table/
   prose/stat). The toolbar is taken OUT OF FLOW as an absolute top-right overlay so the
   block title (h3.pb-title / .pb-prose-title / .pb-stat-lbl) uses the FULL card width and
   never reserves a sliver for the (opacity:0) tools — previously the in-flow
   margin-left:auto box squeezed long titles into a one-word-per-line column. A solid
   panel background + radius/padding + z-index keep the buttons legible if they overlap a
   long title (or a chart SVG) on hover. .pblock is position:relative. */
.pblock .pb-tools{position:absolute;top:16px;right:16px;margin-left:0;z-index:3;
  opacity:0;transition:opacity .12s;background:var(--panel);border-radius:8px;padding:2px 4px}
.pblock:hover .pb-tools,.pblock:focus-within .pb-tools{opacity:1}
/* leave room so a long title doesn't run under the (revealed) overlay on hover */
.pblock h3.pb-title,.pb-prose-head .pb-prose-title,.pb-stat-lbl{padding-right:70px}
/* In-flow Ask button for wiki blocks — a normal inline pill in the tools row (NOT the
   .askable absolute overlay). Signal-accented so it reads as the discovery cue, with a
   solid background + z-index so it stays legible over a chart's SVG. */
.pb-tools .ask-btn{position:static;z-index:2;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.04em;font-weight:700;color:var(--on-signal);background:var(--signal);
  border:1px solid var(--signal);border-radius:7px;padding:4px 9px;cursor:pointer;
  display:inline-flex;align-items:center;gap:5px;line-height:1;transform:none}
.pb-tools .ask-btn:hover{background:var(--signal-soft);border-color:var(--signal-soft)}
.pb-tools .ask-btn .ico{flex:none}
/* Icon-only compact controls — square buttons sized for a single 14px glyph (no text
   label). Accessible name lives on title=/aria-label=. */
.pb-src,.pb-refresh{background:var(--panel-2);border:1px solid var(--line);color:var(--ink-faint);
  border-radius:7px;padding:0;cursor:pointer;display:inline-flex;align-items:center;
  justify-content:center;width:24px;height:24px;line-height:1}
.pb-src .ico,.pb-refresh .ico{flex:none}
.pb-src:hover,.pb-refresh:hover{color:var(--ink);border-color:var(--ink-faint)}
/* "Send to…" icon button — same square-icon footprint as src/refresh, signal-accented. */
.pb-sendto{background:var(--panel-2);border:1px solid var(--line);color:var(--ink-faint);
  border-radius:7px;padding:0;cursor:pointer;display:inline-flex;align-items:center;
  justify-content:center;width:24px;height:24px;line-height:1}
.pb-sendto .ico{flex:none}
.pb-sendto:hover,.pb-sendto[aria-expanded="true"]{color:var(--signal);border-color:var(--signal)}
/* "Send to…" popup menu — anchored under the .pb-sendto button inside .pb-tools. */
.sendto-menu{position:absolute;top:100%;right:0;margin-top:4px;z-index:20;min-width:172px;
  background:var(--popover,var(--panel));border:1px solid var(--line);border-radius:9px;
  padding:4px;box-shadow:0 10px 30px rgba(0,0,0,.4);display:flex;flex-direction:column;gap:2px}
.sendto-item{display:flex;align-items:center;gap:8px;width:100%;text-align:left;
  background:none;border:0;border-radius:6px;padding:7px 9px;cursor:pointer;color:var(--ink);
  font-family:var(--mono);font-size:11.5px;letter-spacing:.02em;line-height:1.1}
.sendto-item .ico{flex:none;color:var(--ink-faint)}
.sendto-item:hover{background:var(--signal-soft);color:var(--on-signal)}
.sendto-item:hover .ico{color:var(--on-signal)}
/* "Alert me…" icon button — same square-icon footprint, signal-accented. */
.pb-alert{background:var(--panel-2);border:1px solid var(--line);color:var(--ink-faint);
  border-radius:7px;padding:0;cursor:pointer;display:inline-flex;align-items:center;
  justify-content:center;width:24px;height:24px;line-height:1}
.pb-alert .ico{flex:none}
.pb-alert:hover,.pb-alert[aria-expanded="true"]{color:var(--signal);border-color:var(--signal)}
/* "Alert me…" popup form — anchored under the .pb-alert button inside .pb-tools. */
.alert-popup{position:absolute;top:100%;right:0;margin-top:4px;z-index:21;width:240px;
  background:var(--popover,var(--panel));border:1px solid var(--line);border-radius:9px;
  padding:11px;box-shadow:0 10px 30px rgba(0,0,0,.4)}
.alert-form{display:flex;flex-direction:column;gap:8px}
.alert-title{font-family:var(--mono);font-size:11px;color:var(--ink);letter-spacing:.02em;
  margin-bottom:2px}
.alert-f{display:flex;align-items:center;justify-content:space-between;gap:8px;
  font-family:var(--mono);font-size:11px;color:var(--ink-faint)}
.alert-f span{flex:none}
.alert-f select,.alert-f input{flex:1;min-width:0;background:var(--panel-2);color:var(--ink);
  border:1px solid var(--line);border-radius:6px;padding:5px 7px;font-family:var(--mono);
  font-size:11.5px}
.alert-f select:focus,.alert-f input:focus{outline:none;border-color:var(--signal)}
.alert-hint{font-family:var(--mono);font-size:9.5px;color:var(--ink-faint);line-height:1.35}
.alert-actions{display:flex;justify-content:flex-end;gap:6px;margin-top:2px}
.alert-actions button{font-family:var(--mono);font-size:11px;border-radius:6px;padding:6px 10px;
  cursor:pointer;border:1px solid var(--line);background:var(--panel-2);color:var(--ink)}
.alert-create,.alert-edit-save{background:var(--signal);border-color:var(--signal);color:var(--on-signal)}
.alert-create:hover,.alert-edit-save:hover{filter:brightness(1.08)}
/* Alerts modal (account-menu "Alerts" panel) */
.alerts-modal{max-width:560px;width:92vw}
.alerts-modal .modal-body{display:flex;flex-direction:column;gap:8px;padding:14px 18px 18px}
.alert-row{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  border:1px solid var(--line);border-radius:9px;padding:11px 13px;background:var(--panel-2)}
.alert-row-main{min-width:0;flex:1}
.alert-row-title{font-size:13px;color:var(--paper);font-weight:600}
.alert-link{color:var(--paper);text-decoration:none;border-bottom:1px dotted var(--ink-faint)}
.alert-link:hover{color:var(--signal);border-color:var(--signal)}
.alert-paused{color:var(--ink-faint);font-weight:400;font-size:11px}
.alert-row-cond{font-family:var(--mono);font-size:11.5px;color:var(--signal);margin-top:3px}
.alert-row-meta{font-family:var(--mono);font-size:10px;color:var(--ink-faint);margin-top:3px}
.alert-row-tools{display:flex;align-items:center;gap:6px;flex:none}
.alert-edit,.alert-remove{background:none;border:1px solid var(--line);border-radius:6px;
  color:var(--ink-faint);cursor:pointer;width:28px;height:28px;display:inline-flex;
  align-items:center;justify-content:center}
.alert-edit:hover{color:var(--signal);border-color:var(--signal)}
.alert-remove:hover{color:var(--destructive,#e0533a);border-color:var(--destructive,#e0533a)}
.alert-edit-form{display:flex;flex-direction:column;gap:8px;width:100%}
.alerts-empty{text-align:center;color:var(--ink-faint);font-size:13px;padding:18px 8px;line-height:1.5}
.alerts-empty-how{font-size:11.5px;margin-top:8px}
.alerts-empty-how .ico{vertical-align:-3px;color:var(--signal)}

/* ---- Delivery / Webhooks (Phase 3) ---- */
.delivery-section{margin-top:14px;padding-top:14px;border-top:1px dashed var(--line)}
.delivery-h{font-size:13px;color:var(--paper);font-weight:600;margin:0 0 4px}
.delivery-intro{font-size:11.5px;color:var(--ink-faint);line-height:1.5;margin:0 0 10px}
#deliveryForm{display:flex;flex-direction:column;gap:10px}
.delivery-optin{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink-dim);cursor:pointer}
.delivery-row{display:flex;flex-direction:column;gap:4px}
.delivery-f{display:flex;flex-direction:column;gap:4px;font-size:11.5px;color:var(--ink-faint)}
.delivery-url{font-family:var(--mono);font-size:12px;background:var(--bg-2);border:1px solid var(--line);
  border-radius:8px;padding:8px 10px;color:var(--ink)}
.delivery-url:focus{outline:none;border-color:var(--signal)}
.delivery-row-meta{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:10.5px}
.delivery-set{color:var(--high,#7fd49a);display:inline-flex;align-items:center;gap:4px}
.delivery-set .ico{vertical-align:-2px}
.delivery-unset{color:var(--ink-faint)}
.delivery-clear{background:none;border:none;color:var(--ink-faint);cursor:pointer;
  display:inline-flex;align-items:center;gap:3px;font-family:var(--mono);font-size:10.5px}
.delivery-clear:hover{color:var(--destructive,#e0533a)}
.delivery-actions{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:4px}
.delivery-test{background:none;border:1px solid var(--line);border-radius:8px;color:var(--ink-dim);
  cursor:pointer;padding:7px 12px;font-size:12px;display:inline-flex;align-items:center;gap:5px}
.delivery-test:hover:not(:disabled){border-color:var(--signal);color:var(--signal)}
.delivery-test:disabled{opacity:.45;cursor:not-allowed}
.delivery-save{background:var(--signal);border:1px solid var(--signal);border-radius:8px;
  color:var(--on-signal);cursor:pointer;padding:7px 14px;font-size:12px;font-weight:600}
.delivery-save:hover{filter:brightness(1.05)}
/* per-event delivery badges in the bell feed */
.notif-delivery-row{display:flex;align-items:center;gap:6px;margin-top:5px;flex-wrap:wrap}
.notif-delivery{display:inline-flex;align-items:center;gap:3px;font-family:var(--mono);font-size:10px;
  border:1px solid var(--line);border-radius:5px;padding:0 5px;line-height:1.7}
.notif-delivery .ico{vertical-align:-1px}
.notif-delivery.ok{color:var(--high,#7fd49a);border-color:color-mix(in srgb,var(--high,#7fd49a) 40%,transparent)}
.notif-delivery.fail{color:var(--destructive,#e0533a);border-color:color-mix(in srgb,var(--destructive,#e0533a) 40%,transparent)}
.pb-refresh.busy{opacity:.7;pointer-events:none}
.pb-refresh .ref-ico{display:inline-block;line-height:1}
.pb-refresh.busy .ref-ico{animation:spin .8s linear infinite}
.pb-src.no-src{cursor:default;opacity:.5}
.pb-source{margin-top:14px;border-top:1px dashed var(--line);padding-top:12px;display:none}
.pblock.show-src .pb-source{display:block}
.pb-source .qrow{font-family:var(--mono);font-size:12px;color:var(--ink-dim);
  background:var(--bg-2);border:1px solid var(--line-soft);border-radius:8px;padding:10px 12px;
  white-space:pre-wrap;word-break:break-word}
.pb-source .ev-ref{font-family:var(--mono);font-size:11px;color:var(--ink-faint);margin-top:8px;
  display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pb-source .refreshed{font-family:var(--mono);font-size:10.5px;color:var(--ink-faint);margin-top:8px}

/* ---- table pagination ("showing N of M") ---- */
.pb-pager{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  margin-top:10px;font-family:var(--mono);font-size:11px;color:var(--ink-faint)}
.pb-pager .pb-count{letter-spacing:.04em}
.pb-pgbtns{display:flex;align-items:center;gap:4px}
.pb-pgnum{padding:0 6px;color:var(--ink-dim)}
.pb-pg{font-family:var(--mono);font-size:12px;background:var(--panel-2);border:1px solid var(--line);
  color:var(--ink-dim);border-radius:6px;min-width:24px;padding:3px 7px;cursor:pointer;line-height:1}
.pb-pg:hover:not([disabled]){color:var(--ink);border-color:var(--ink-faint)}
.pb-pg[disabled]{opacity:.35;cursor:default}

/* ---- in-UI block controls (inline prose edit) ---- */
.pb-edit{font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;
  background:var(--panel-2);border:1px solid var(--line);color:var(--ink-faint);
  border-radius:7px;padding:4px 8px;cursor:pointer;line-height:1}
.pb-edit:hover:not([disabled]){color:var(--ink);border-color:var(--ink-faint)}
.pb-evidence{font-family:var(--mono);font-size:10px;background:var(--panel-2);border:1px solid var(--line);
  color:var(--ink-faint);border-radius:6px;padding:2px 7px;cursor:pointer}
.pb-evidence:hover{color:var(--signal);border-color:var(--signal)}
.pb-evidence.busy{opacity:.6;pointer-events:none}
.pb-evidence-out:empty{display:none}
.ev-card{margin-top:10px;border:1px solid var(--line-soft);border-radius:8px;padding:10px 12px;background:var(--bg-2)}
.ev-card .ev-meta{font-family:var(--mono);font-size:10px;color:var(--ink-faint);letter-spacing:.06em;margin-bottom:6px}
.ev-card .ev-rc{font-family:var(--mono);font-size:10.5px;color:var(--ink-dim);margin-top:6px}
.ev-card .ev-sample{font-family:var(--mono);font-size:11px;color:var(--ink-dim);margin:8px 0 0;
  max-height:220px;overflow:auto;white-space:pre-wrap;word-break:break-word}
.ev-miss{font-family:var(--mono);font-size:11px;color:var(--ink-faint);margin-top:8px}

/* prose block head (title + inline-edit/reorder tools) */
.pb-prose-head{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.pb-prose-title{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-faint);font-weight:600}
/* prose hover tools use the SHARED absolute overlay; prose has no side padding
   (.pblock.prose{padding:4px 0}) so pin the overlay to the prose block's own edges. */
.pblock.prose .pb-tools{top:0;right:0}
.pb-prose-edit{margin-top:6px}
.pb-prose-ta{width:100%;background:var(--bg-2);border:1px solid var(--line);border-radius:8px;
  color:var(--ink);font:inherit;font-size:14px;line-height:1.55;padding:10px 12px;resize:vertical}
.pb-prose-actions{display:flex;gap:8px;margin-top:8px}
.pb-prose-save,.pb-prose-cancel{font-family:var(--mono);font-size:11px;border-radius:7px;padding:5px 12px;cursor:pointer}
.pb-prose-save{background:var(--signal);border:1px solid var(--signal);color:var(--on-signal);font-weight:600}
.pb-prose-cancel{background:var(--panel-2);border:1px solid var(--line);color:var(--ink-dim)}
.pb-prose-cancel:hover{color:var(--ink)}

/* ---- "what links here" (backlinks footer) ---- */
.pb-backlinks{margin-top:26px;border-top:1px dashed var(--line);padding-top:16px}
.pb-backlinks .bl-head{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-faint);margin-bottom:10px}
.pb-backlinks .bl-list{display:flex;flex-wrap:wrap;gap:8px}
.pb-backlinks .bl-link{font-size:13px;color:var(--signal);text-decoration:none;background:var(--panel);
  border:1px solid var(--line);border-radius:999px;padding:5px 13px}
.pb-backlinks .bl-link:hover{border-color:var(--signal)}

/* ---- TOC page drag-to-reorder insertion indicator ---- */
/* a thin signal-coloured line on the edge the dragged row will drop against.
   Uses an inset box-shadow so it never affects layout/height. */
.toc-page.drop-before{box-shadow:inset 0 2px 0 0 var(--signal)}
.toc-page.drop-after{box-shadow:inset 0 -2px 0 0 var(--signal)}

/* ---- TOC folder tree (nav-only grouping; drag pages onto a folder) ---- */
.toc-pages-head{display:flex;align-items:center;justify-content:space-between;
  padding:8px 10px 2px;color:var(--ink-faint);font-size:10px;letter-spacing:.08em;text-transform:uppercase}
/* the second pages section ("My pages") gets a little air + a hairline divider */
.toc-pages-head ~ .toc-pages-head,
#tocWikiPages .toc-rootdrop + .toc-pages-head{margin-top:10px;border-top:1px solid var(--line);padding-top:8px}
.toc-pages-head .tph-newfolder{background:none;border:0;color:var(--ink-faint);font:inherit;
  font-size:11px;cursor:pointer;padding:1px 5px;border-radius:5px;letter-spacing:0;text-transform:none}
.toc-pages-head .tph-newfolder:hover{background:var(--panel-2);color:var(--signal)}
.toc-rootdrop{display:flex;flex-direction:column;gap:2px;min-height:6px}
.toc-rootdrop.drop-hot,.tf-row.drop-hot{outline:1px dashed var(--signal);outline-offset:-1px;border-radius:8px;background:var(--panel-2)}
.toc-folder{display:flex;flex-direction:column}
.tf-row{display:flex;align-items:center;gap:6px;padding:6px 10px;border-radius:8px;
  color:var(--ink-dim);font-size:13px;cursor:default;padding-left:calc(10px + var(--depth,0)*12px)}
.tf-row:hover{background:var(--panel-2)}
.tf-caret{background:none;border:0;color:var(--ink-faint);cursor:pointer;
  width:14px;display:inline-flex;align-items:center;justify-content:center;transition:transform .12s ease;line-height:1}
.tf-caret.open{transform:rotate(90deg);color:var(--ink-dim)}
.tf-caret svg{display:block}
.tf-ico{display:inline-flex;align-items:center}
.tf-ico svg{display:block}
.tf-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tf-acts{display:inline-flex;gap:2px;opacity:0}
.tf-row:hover .tf-acts{opacity:.8}
.tf-acts span{color:var(--ink-faint);display:inline-flex;align-items:center;padding:0 4px;border-radius:4px;cursor:pointer}
.tf-acts span:hover{color:var(--signal)}
.tf-kids{display:none;flex-direction:column;gap:2px}
.tf-kids.open{display:flex}
.tf-kids .toc-page{padding-left:calc(22px + var(--depth,0)*12px)}
.toc-page[draggable="true"]{cursor:grab}
.toc-page.dragging{opacity:.45}

/* ============ version history (TOC-footer trigger + modal) ============ */
.hist-modal{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;padding:24px}
.hist-modal[hidden]{display:none}
.hist-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.6)}
.hist-panel{position:relative;z-index:1;width:min(780px,94vw);max-height:84vh;display:flex;flex-direction:column;
  background:var(--panel);border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.hist-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--line)}
.hist-head h3{font-family:var(--serif);font-size:20px;color:var(--paper);margin:0;font-weight:600}
.hist-x{background:var(--panel-2);color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:6px 10px;
  cursor:pointer;font-family:var(--mono);font-size:13px}
.hist-x:hover{border-color:var(--signal);color:var(--paper)}
.hist-note{padding:12px 20px;font-size:12.5px;color:var(--ink-faint);border-bottom:1px solid var(--line-soft);line-height:1.5}
.hist-list{overflow-y:auto;padding:4px 0}
.hist-item{border-bottom:1px solid var(--line-soft)}
.hist-row{display:flex;align-items:center;gap:12px;padding:11px 20px;cursor:pointer}
.hist-row:hover{background:var(--panel-2)}
.hist-auth{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:3px 8px;border-radius:999px;flex:none;border:1px solid;min-width:44px;text-align:center}
.auth-trey{color:var(--signal);border-color:color-mix(in srgb,var(--signal) 40%,transparent);background:color-mix(in srgb,var(--signal) 12%,transparent)}
.auth-you{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 40%,transparent);background:color-mix(in srgb,var(--accent) 12%,transparent)}
.auth-system{color:var(--ink-faint);border-color:var(--line);background:var(--panel-2)}
.hist-subj{flex:1;min-width:0;font-size:13.5px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hist-time{font-family:var(--mono);font-size:11px;color:var(--ink-faint);flex:none}
.hist-restore{font-family:var(--mono);font-size:11px;font-weight:600;background:var(--panel-2);color:var(--ink-dim);
  border:1px solid var(--line);border-radius:7px;padding:5px 9px;cursor:pointer;flex:none}
.hist-restore:hover{border-color:var(--signal);color:var(--signal)}
.hist-diff{margin:0;padding:12px 20px;background:var(--bg-2);border-top:1px solid var(--line-soft);
  font-family:var(--mono);font-size:11px;color:var(--code-ink);white-space:pre;overflow:auto;max-height:340px}
.hist-empty{padding:26px 20px;color:var(--ink-faint);font-family:var(--mono);font-size:13px;text-align:center}

/* ---------- toasts (transient error/success/info notices) ---------- */
#toasts{position:fixed;right:16px;bottom:16px;z-index:9000;display:flex;flex-direction:column;gap:10px;
  max-width:min(380px,calc(100vw - 32px));pointer-events:none}
.toast{pointer-events:auto;display:flex;align-items:flex-start;gap:10px;padding:12px 12px 12px 14px;
  background:var(--panel-2);color:var(--ink);border:1px solid var(--line);border-left:3px solid var(--ink-faint);
  border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.45);font-size:13.5px;line-height:1.45;
  opacity:0;transform:translateY(10px);transition:opacity .2s ease,transform .2s ease}
.toast.in{opacity:1;transform:translateY(0)}
.toast.leaving{opacity:0;transform:translateY(10px)}
.toast-msg{flex:1;min-width:0;word-break:break-word}
.toast-x{flex:none;background:none;border:none;color:var(--ink-faint);cursor:pointer;font-size:13px;
  line-height:1;padding:2px 2px 0;margin-left:2px}
.toast-x:hover{color:var(--ink)}
.toast-error{border-left-color:var(--signal)}
.toast-error .toast-msg{color:var(--ink)}
.toast-success{border-left-color:var(--high)}
.toast-info{border-left-color:var(--medium)}
@media(max-width:560px){#toasts{left:16px;right:16px;max-width:none}}

/* ============ MCP servers panel ============ */
#tocMcpBtn{margin-top:8px}
.mcp-modal{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;padding:24px}
.mcp-modal[hidden]{display:none}
.mcp-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.6)}
.mcp-panel{position:relative;z-index:1;width:min(640px,94vw);max-height:88vh;display:flex;flex-direction:column;
  background:var(--panel);border:1px solid var(--line);border-radius:14px;overflow:hidden auto;
  overscroll-behavior:contain;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.mcp-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--line)}
.mcp-head h3{font-family:var(--serif);font-size:20px;color:var(--paper);margin:0;font-weight:600}
.mcp-x{background:none;border:none;color:var(--ink-faint);font-size:18px;cursor:pointer;line-height:1}
.mcp-x:hover{color:var(--paper)}
.mcp-note{padding:12px 20px;font-size:12.5px;color:var(--ink-faint);border-bottom:1px solid var(--line-soft);line-height:1.5}
.mcp-note b{color:var(--ink-dim)}
.mcp-list{overflow-y:auto;padding:8px 16px;display:flex;flex-direction:column;gap:8px}
.mcp-empty{padding:20px;text-align:center;color:var(--ink-faint);font-size:13px}
.mcp-item{border:1px solid var(--line-soft);border-radius:10px;padding:10px 12px;background:var(--bg-2)}
.mcp-item.locked{border-style:dashed;opacity:.92}
.mcp-row{display:flex;align-items:center;gap:8px}
.mcp-name{font-weight:600;color:var(--ink);font-size:13.5px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mcp-builtin{font-family:var(--mono);font-size:9.5px;color:var(--signal);border:1px solid var(--signal);border-radius:5px;padding:1px 5px;font-weight:600}
.mcp-type{font-family:var(--mono);font-size:10px;color:var(--ink-faint);text-transform:uppercase;letter-spacing:.08em}
.mcp-badge{font-family:var(--mono);font-size:9.5px;border-radius:5px;padding:1px 6px;font-weight:600}
.mcp-badge.on{color:var(--on-signal);background:var(--signal)}
.mcp-badge.off{color:var(--ink-faint);border:1px solid var(--line)}
.mcp-where{font-family:var(--mono);font-size:11px;color:var(--ink-dim);margin-top:5px;word-break:break-all}
.mcp-actions{display:flex;align-items:center;gap:8px;margin-top:9px;flex-wrap:wrap}
.mcp-actions button{background:var(--panel-2);color:var(--ink-dim);border:1px solid var(--line);border-radius:7px;
  font-family:var(--mono);font-size:11.5px;font-weight:600;padding:4px 10px;cursor:pointer}
.mcp-actions button:hover{border-color:var(--signal);color:var(--paper)}
.mcp-del:hover{border-color:var(--destructive) !important;color:var(--destructive) !important}
.mcp-toggle{display:inline-flex;align-items:center;cursor:pointer}
.mcp-toggle input{accent-color:var(--signal);cursor:pointer}
.mcp-status{margin-top:8px;font-family:var(--mono);font-size:11px;line-height:1.5;color:var(--ink-faint);
  border-top:1px dashed var(--line-soft);padding-top:7px;word-break:break-word}
.mcp-status.ok{color:var(--high)}.mcp-status.err{color:var(--destructive)}
.mcp-add-btn{margin:6px 16px 14px;background:var(--panel-2);color:var(--ink);border:1px solid var(--line);
  border-radius:8px;font-family:var(--mono);font-size:12.5px;font-weight:600;padding:9px;cursor:pointer}
.mcp-add-btn:hover{border-color:var(--signal);color:var(--paper)}
.mcp-form{border-top:1px solid var(--line);padding:14px 20px 18px;overflow-y:auto;display:flex;flex-direction:column;gap:11px}
.mcp-form[hidden]{display:none}
.mcp-form-head{font-family:var(--serif);font-size:15px;color:var(--paper);font-weight:600}
.mcp-field{display:flex;flex-direction:column;gap:4px;font-family:var(--mono);font-size:11px;color:var(--ink-faint);text-transform:uppercase;letter-spacing:.06em}
.mcp-field input,.mcp-field select,.mcp-kv-row input,.mcp-arg-row input{
  font-family:var(--sans);font-size:13px;color:var(--ink);background:var(--bg-2);border:1px solid var(--line);
  border-radius:7px;padding:8px 10px;text-transform:none;letter-spacing:0}
.mcp-field input:focus,.mcp-field select:focus,.mcp-kv-row input:focus,.mcp-arg-row input:focus{outline:none;border-color:var(--signal)}
.mcp-kv-head{font-family:var(--mono);font-size:10.5px;color:var(--ink-faint);text-transform:uppercase;letter-spacing:.08em;margin-top:4px}
.mcp-kv,.mcp-args{display:flex;flex-direction:column;gap:6px}
.mcp-kv-row,.mcp-arg-row{display:flex;gap:6px;align-items:center}
.mcp-kv-row .mcp-kv-k{flex:0 0 34%}.mcp-kv-row .mcp-kv-v{flex:1}.mcp-arg-row .mcp-arg-v{flex:1}
.mcp-kv-del{flex:none;background:none;border:1px solid var(--line);color:var(--ink-faint);border-radius:6px;
  width:30px;height:30px;cursor:pointer;font-size:13px}
.mcp-kv-del:hover{border-color:var(--destructive);color:var(--destructive)}
.mcp-kv-add{align-self:flex-start;background:none;border:1px dashed var(--line);color:var(--ink-dim);
  border-radius:7px;font-family:var(--mono);font-size:11px;padding:5px 10px;cursor:pointer}
.mcp-kv-add:hover{border-color:var(--signal);color:var(--paper)}
.mcp-net[hidden],.mcp-stdio[hidden]{display:none}
.mcp-net,.mcp-stdio{display:flex;flex-direction:column;gap:9px}
.mcp-enable{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-dim);cursor:pointer}
.mcp-enable input{accent-color:var(--signal)}
.mcp-form-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:4px}
.mcp-cancel,.mcp-save{font-family:var(--mono);font-size:12.5px;font-weight:600;border-radius:8px;padding:8px 16px;cursor:pointer}
.mcp-cancel{background:var(--panel-2);color:var(--ink-dim);border:1px solid var(--line)}
.mcp-cancel:hover{border-color:var(--signal);color:var(--paper)}
.mcp-save{background:var(--signal);color:var(--on-signal);border:1px solid var(--signal)}
.mcp-save:hover{background:var(--signal-soft);border-color:var(--signal-soft)}
.mcp-form-err{color:var(--destructive);font-size:12.5px;font-family:var(--mono);background:color-mix(in srgb,var(--destructive) 8%,transparent);
  border:1px solid color-mix(in srgb,var(--destructive) 40%,transparent);border-radius:7px;padding:8px 10px}
.mcp-form-err[hidden]{display:none}
.mcp-lock{font-size:10px}
/* ---- Connections (ADR 0021 move A) — same idiom as the MCP servers card ---- */
.conn-section{border-top:1px solid var(--line);margin-top:10px}
.conn-head{border-bottom:1px solid var(--line-soft)}
.mcp-badge.conn-ro{color:var(--ink-faint);border:1px solid var(--line)}
.mcp-badge.conn-rw{color:var(--destructive);border:1px solid var(--destructive);display:inline-flex;align-items:center;gap:3px}
/* OpenAPI accelerator (ADR 0021 move B): op-count badge + the spec section in the form */
.mcp-badge.conn-spec-badge{color:var(--accent);border:1px solid var(--accent);display:inline-flex;align-items:center;gap:3px}
.conn-spec{border-top:1px dashed var(--line-soft);margin-top:10px;padding-top:8px}
.conn-spec[hidden]{display:none}
.conn-spec-head{font-weight:600;font-size:.85rem;margin-bottom:4px}
.conn-spec-status{font-size:.8rem;color:var(--ink-faint);margin:6px 0}
.conn-spec-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.conn-spec-actions button{background:var(--panel-2);color:var(--ink-dim);border:1px solid var(--line);border-radius:7px;
  font-family:var(--mono);font-size:11.5px;font-weight:600;padding:4px 10px;cursor:pointer}
.conn-spec-actions button:hover{border-color:var(--signal);color:var(--paper)}
.conn-spec-actions button[hidden]{display:none}

/* ===== Share-links owner dialog (ADR 0015 Phase B) ===== */
.share-modal{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;padding:24px}
.share-modal[hidden]{display:none}
.share-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.6)}
.share-panel{position:relative;z-index:1;width:min(560px,94vw);max-height:88vh;display:flex;flex-direction:column;
  background:var(--panel);border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.share-modal-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--line)}
.share-modal-head h3{font-family:var(--serif);font-size:20px;color:var(--paper);margin:0;font-weight:600}
.share-x{background:none;border:none;color:var(--ink-faint);font-size:18px;cursor:pointer;line-height:1}
.share-x:hover{color:var(--paper)}
/* the privacy warning — loud on purpose: a public no-login link exposes everything */
.share-warn{display:flex;gap:10px;align-items:flex-start;margin:16px 20px 4px;padding:11px 13px;font-size:12.5px;line-height:1.5;
  color:var(--ink-dim);background:color-mix(in srgb,var(--destructive) 9%,transparent);
  border:1px solid color-mix(in srgb,var(--destructive) 40%,transparent);border-radius:10px}
.share-warn svg{flex:none;color:var(--destructive);margin-top:1px}
.share-warn b{color:var(--ink)}
.share-create{display:flex;align-items:flex-end;gap:10px;padding:12px 20px 14px}
.share-field{display:flex;flex-direction:column;gap:4px;font-family:var(--mono);font-size:11px;color:var(--ink-faint);
  text-transform:uppercase;letter-spacing:.06em;flex:1}
.share-field select{font-family:var(--sans);font-size:13px;color:var(--ink);background:var(--bg-2);border:1px solid var(--line);
  border-radius:7px;padding:8px 10px;text-transform:none;letter-spacing:0}
.share-field select:focus{outline:none;border-color:var(--signal)}
.share-create-btn{flex:none;display:inline-flex;align-items:center;gap:5px;font-family:var(--mono);font-size:12.5px;font-weight:600;
  border-radius:8px;padding:8px 14px;cursor:pointer;background:var(--signal);color:var(--on-signal);border:1px solid var(--signal)}
.share-create-btn:hover{background:var(--signal-soft);border-color:var(--signal-soft)}
.share-create-btn:disabled{opacity:.6;cursor:default}
.share-list-head{font-family:var(--mono);font-size:10.5px;color:var(--ink-faint);text-transform:uppercase;letter-spacing:.08em;
  padding:6px 20px 0;border-top:1px solid var(--line-soft)}
.share-list{overflow-y:auto;padding:10px 16px 16px;display:flex;flex-direction:column;gap:8px}
.share-empty{padding:16px;text-align:center;color:var(--ink-faint);font-size:13px}
.share-item{border:1px solid var(--line-soft);border-radius:10px;padding:10px 12px;background:var(--bg-2)}
.share-item-url{display:flex;gap:6px;align-items:center}
.share-url{flex:1;min-width:0;font-family:var(--mono);font-size:11.5px;color:var(--ink);background:var(--panel-2);
  border:1px solid var(--line);border-radius:7px;padding:7px 9px}
.share-url:focus{outline:none;border-color:var(--signal)}
.share-copy{flex:none;background:var(--panel-2);border:1px solid var(--line);color:var(--ink-dim);border-radius:7px;
  width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.share-copy:hover{border-color:var(--signal);color:var(--paper)}
.share-copy.copied{border-color:var(--high);color:var(--high)}
.share-item-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:8px}
.share-exp{font-family:var(--mono);font-size:11px;color:var(--ink-faint)}
.share-revoke{display:inline-flex;align-items:center;gap:5px;background:none;border:1px solid var(--line);color:var(--ink-dim);
  border-radius:7px;font-family:var(--mono);font-size:11.5px;font-weight:600;padding:4px 10px;cursor:pointer}
.share-revoke:hover{border-color:var(--destructive);color:var(--destructive)}

.toolchip.thinking{color:var(--ink-faint);font-style:italic}

/* ============ Auth: gate overlay, user menu, users admin ============ */
/* Full-screen sign-in / first-run bootstrap. Sits above everything until the
   user is authenticated; the rest of the app boots only behind it. */
.auth-gate{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;
  padding:24px;background:radial-gradient(120% 120% at 50% 0,var(--bg-2),var(--bg));}
.auth-card{width:100%;max-width:360px;background:var(--panel);border:1px solid var(--line);
  border-radius:14px;padding:28px 26px;box-shadow:0 24px 60px rgba(0,0,0,.45);}
.auth-brand{font-family:var(--serif);font-weight:700;font-size:22px;color:var(--paper);margin-bottom:18px}
.auth-brand small{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-faint);margin-left:8px}
.auth-title{font-family:var(--serif);font-size:21px;color:var(--ink);margin:0 0 4px}
.auth-sub{font-size:13px;color:var(--ink-dim);margin:0 0 18px}
/* the `hidden` attribute must win over these display rules (same guard the other
   modals use) — without it the gate shows before JS wires the form (so a click
   does a native GET reload) and can't be dismissed after a successful login. */
.auth-gate[hidden],.users-modal[hidden],.auth-field[hidden]{display:none}
.auth-field{display:block;margin-bottom:13px}
.auth-field>span{display:block;font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-faint);margin-bottom:5px}
.auth-field input{width:100%;box-sizing:border-box;background:var(--bg-2);border:1px solid var(--line);
  border-radius:8px;color:var(--ink);font:14px/1.3 var(--sans);padding:10px 11px}
.auth-field input:focus{outline:none;border-color:var(--signal)}
.auth-err{font-size:12.5px;color:var(--destructive);background:color-mix(in srgb,var(--destructive) 8%,transparent);border:1px solid color-mix(in srgb,var(--destructive) 30%,transparent);
  border-radius:7px;padding:8px 10px;margin-bottom:12px}
.auth-submit{width:100%;background:var(--signal);color:var(--on-signal);border:none;border-radius:8px;
  font:600 14px var(--sans);padding:11px;cursor:pointer}
.auth-submit:hover{background:var(--signal-soft)}
.auth-submit:disabled{opacity:.6;cursor:default}

/* User menu in the app bar */
.ab-user{margin-left:auto;position:relative}
.ab-userbtn{padding:5px 9px 5px 5px}
.ab-avatar{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;
  background:var(--signal);color:var(--on-signal);font:700 11px var(--mono)}
.ab-username{max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:560px){.ab-username{display:none}}
.user-menu{position:absolute;right:0;top:calc(100% + 6px);min-width:210px;background:var(--panel);
  border:1px solid var(--line);border-radius:10px;box-shadow:0 16px 40px rgba(0,0,0,.5);padding:6px;z-index:60}
.user-id{padding:8px 10px 10px;border-bottom:1px solid var(--line-soft);margin-bottom:6px;display:flex;
  flex-direction:column;gap:2px}
.user-id b{color:var(--ink);font-size:13.5px}
.user-id span{color:var(--ink-dim);font-size:12px}
.user-role{align-self:flex-start;margin-top:4px;font:600 9.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--signal);border:1px solid color-mix(in srgb,var(--signal) 40%,transparent);border-radius:5px;padding:1px 6px}
.user-mi{display:block;width:100%;text-align:left;background:none;border:none;color:var(--ink);
  font:13px var(--sans);padding:8px 10px;border-radius:6px;cursor:pointer}
.user-mi:hover{background:var(--panel-2)}
.user-mi-danger{color:var(--signal-soft)}

/* Users admin modal — mirrors the MCP modal pattern */
.users-modal{position:fixed;inset:0;z-index:90;display:flex;align-items:center;justify-content:center;padding:24px}
.users-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.55)}
.users-panel{position:relative;width:100%;max-width:560px;max-height:82vh;overflow:auto;background:var(--panel);
  border:1px solid var(--line);border-radius:14px;padding:22px 24px;box-shadow:0 24px 60px rgba(0,0,0,.5)}
.users-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.users-head h3{font-family:var(--serif);font-size:19px;color:var(--ink);margin:0}
.users-x{background:none;border:none;color:var(--ink-dim);font-size:17px;cursor:pointer}
.users-note{font-size:12.5px;color:var(--ink-dim);line-height:1.5;margin-bottom:16px}
.user-row{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;padding:10px 0;border-top:1px solid var(--line-soft)}
.user-row-id{flex:1 1 100%;min-width:0;display:flex;flex-direction:column}
.user-row-id b{color:var(--ink);font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.user-row-id span{color:var(--ink-faint);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.user-role-sel,.users-field select{background:var(--bg-2);border:1px solid var(--line);border-radius:7px;
  color:var(--ink);font:13px var(--sans);padding:6px 8px}
.user-active{display:inline-flex;align-items:center;gap:5px;color:var(--ink-dim);font-size:12.5px}
.user-reset{background:var(--panel-2);border:1px solid var(--line);border-radius:7px;color:var(--ink);
  font:12px var(--sans);padding:6px 9px;cursor:pointer}
.user-reset:hover{border-color:var(--signal)}
.users-add-btn{margin-top:14px;background:var(--panel-2);border:1px solid var(--line);border-radius:8px;
  color:var(--ink);font:13px var(--sans);padding:9px 12px;cursor:pointer}
.users-add-btn:hover{border-color:var(--signal)}
.users-form{margin-top:14px;border-top:1px solid var(--line-soft);padding-top:14px}
.users-form-head{font:600 13px var(--sans);color:var(--ink);margin-bottom:10px}
.users-field{display:block;margin-bottom:11px}
.users-field>span{display:block;font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-faint);margin-bottom:5px}
.users-field input{width:100%;box-sizing:border-box;background:var(--bg-2);border:1px solid var(--line);
  border-radius:8px;color:var(--ink);font:14px var(--sans);padding:9px 11px}
.users-field input:focus,.users-field select:focus{outline:none;border-color:var(--signal)}
.users-form-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:6px}
.users-cancel{background:none;border:1px solid var(--line);border-radius:8px;color:var(--ink-dim);
  font:13px var(--sans);padding:8px 14px;cursor:pointer}
.users-save{background:var(--signal);border:none;border-radius:8px;color:var(--on-signal);font:600 13px var(--sans);
  padding:8px 16px;cursor:pointer}
.users-form-err{margin-top:10px;font-size:12.5px;color:var(--destructive)}

/* My-profile editor (reuses the users-modal chrome) */
.profile-text{width:100%;box-sizing:border-box;background:var(--bg-2);border:1px solid var(--line);
  border-radius:9px;color:var(--ink);font:13.5px/1.55 var(--mono);padding:12px 13px;resize:vertical;min-height:200px}
.profile-text:focus{outline:none;border-color:var(--signal)}
.profile-foot{display:flex;align-items:center;justify-content:space-between;margin-top:12px;gap:12px}
.profile-count{font:11px var(--mono);color:var(--ink-faint)}
.profile-actions{display:flex;gap:8px}

/* Fast cross-device sign-in (QR) — lives at the foot of the profile modal */
.qr-signin{margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
.qr-signin-title{margin:0 0 4px;font-size:13px}
.qr-signin-note{font-size:12px;line-height:1.5;color:var(--ink-dim);margin-bottom:14px}
.qr-signin-stage{display:flex;flex-direction:column;align-items:center;gap:10px;min-height:120px;justify-content:center}
.qr-loading,.qr-err{font-size:12.5px;color:var(--ink-dim);text-align:center}
.qr-canvas{background:#fff;padding:10px;border-radius:10px;line-height:0}
/* the SVG now carries a viewBox (added server-side), so width sizes it and the
   content scales to fit — height:auto + max-width keep it square and inside the card. */
.qr-canvas svg{display:block;width:180px;height:auto;max-width:100%}
.qr-meta{display:flex;align-items:center;gap:12px}
.qr-countdown{font:11px var(--mono);color:var(--ink-faint)}
.qr-refresh{display:inline-flex;align-items:center;gap:5px;background:transparent;border:1px solid var(--line);
  color:var(--ink-dim);border-radius:7px;padding:5px 9px;font:inherit;font-size:11.5px;cursor:pointer}
.qr-refresh:hover{color:var(--ink);border-color:var(--signal)}

/* What Trey remembers — memory panel (reuses the users-modal chrome) */
.mem-list{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.mem-row{display:flex;align-items:center;gap:10px;padding:9px 11px;background:var(--bg-2);
  border:1px solid var(--line);border-radius:8px}
.mem-text{flex:1;min-width:0;color:var(--ink);font:13px/1.45 var(--sans)}
.mem-forget{flex:none;background:none;border:none;color:var(--ink-faint);font-size:14px;cursor:pointer;
  width:24px;height:24px;border-radius:6px}
.mem-forget:hover{color:var(--signal-soft);background:var(--panel-2)}
.mem-add{display:flex;gap:8px}
.mem-add input{flex:1;background:var(--bg-2);border:1px solid var(--line);border-radius:8px;color:var(--ink);
  font:13.5px var(--sans);padding:9px 11px}
.mem-add input:focus{outline:none;border-color:var(--signal)}

/* stale-data cue on the freshness stamps (manual-refresh / scratchpad snapshots) */
.refreshed.stale,.page-refresh-ts.stale{color:var(--medium)}

/* API tokens panel */
.token-add{display:flex;gap:8px;margin-top:12px}
.token-add input{flex:1;background:var(--bg-2);border:1px solid var(--line);border-radius:8px;
  color:var(--ink);font:13.5px var(--sans);padding:9px 11px}
.token-add input:focus{outline:none;border-color:var(--signal)}
.token-new{margin-top:12px;background:var(--bg-2);border:1px solid var(--signal);border-radius:9px;padding:11px 12px}
.token-reveal{display:flex;align-items:center;gap:10px}
.token-reveal code{flex:1;min-width:0;overflow-x:auto;white-space:nowrap;font:12.5px var(--mono);color:var(--high)}

/* admin session inspector — read-only; reuses the live chat's `.msg`/`.bubble` markdown
   rendering (so markdown styling is DRY with the chat panel). Wider + taller than the
   surrounding modal/page chrome so long transcripts read comfortably on desktop. */
.usess-transcript{margin-top:14px;display:flex;flex-direction:column;gap:14px;max-height:70vh;overflow:auto}
.usess-transcript .msg{max-width:100%}
/* when a transcript is open in the (otherwise narrow) sessions modal, widen the panel so
   chat bubbles aren't cramped — fixed width, not operator-resizable. */
.users-panel:has(.usess-transcript:not([hidden])){max-width:880px}

/* ============ Admin console (full page #/admin) ============ */
.admin-page{max-width:1100px;margin:0 auto;padding:24px 28px}
.admin-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px}
.admin-head h1{font-family:var(--serif);font-size:26px;color:var(--ink);margin:0}
.admin-grid{display:grid;grid-template-columns:300px 1fr;gap:22px;align-items:start}
@media(max-width:760px){.admin-grid{grid-template-columns:1fr}}
.admin-side-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;
  font:600 12px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint)}
.admin-add{display:flex;flex-direction:column;gap:7px;margin-bottom:12px;padding:11px;
  background:var(--bg-2);border:1px solid var(--line);border-radius:9px}
.admin-add input,.admin-add select{background:var(--panel);border:1px solid var(--line);border-radius:7px;
  color:var(--ink);font:13px var(--sans);padding:7px 9px}
.admin-add input:focus,.admin-add select:focus{outline:none;border-color:var(--signal)}
.admin-add-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:2px}
.admin-userlist{display:flex;flex-direction:column;gap:4px}
.admin-urow{display:flex;flex-direction:column;gap:2px;text-align:left;width:100%;cursor:pointer;
  background:var(--panel-2);border:1px solid var(--line);border-radius:9px;padding:10px 12px}
.admin-urow:hover{border-color:var(--ink-faint)}
.admin-urow.active{border-color:var(--signal);background:var(--panel)}
.admin-uname{color:var(--ink);font-size:13.5px;font-weight:600}
.admin-umeta{color:var(--ink-faint);font:11.5px var(--mono)}
.admin-off{color:var(--medium);font-weight:600;text-transform:uppercase;font-size:9px;letter-spacing:.08em}
.admin-detail{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:20px 22px;min-height:300px}
.admin-empty{color:var(--ink-dim);font-size:14px;padding:40px 8px;text-align:center}
.admin-detail-head{display:flex;align-items:baseline;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.admin-detail-head h2{font-family:var(--serif);font-size:20px;color:var(--ink);margin:0}
.admin-controls{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding-bottom:18px;
  margin-bottom:18px;border-bottom:1px solid var(--line-soft)}
.admin-controls label{display:inline-flex;align-items:center;gap:7px;color:var(--ink-dim);font-size:13px}
.admin-sess h3{font-family:var(--serif);font-size:16px;color:var(--ink);margin:0 0 12px}

/* ---- admin QA Chats tab (read-only transcript + per-turn activity, ADR 0018) ---- */
.qa-transcript{display:flex;flex-direction:column;gap:14px;max-height:70vh;overflow:auto}
.qa-turn .msg{max-width:100%}
.qa-turn .qa-log{margin:4px 0 0}   /* the activity disclosure sits under its turn */

/* `hidden` must beat these display rules (same guard the modals use) — otherwise
   toggling .hidden on the add-form / transcript / session-list is a no-op. */
.admin-add[hidden],.usess-transcript[hidden],.mem-list[hidden],.token-new[hidden]{display:none}

/* ---- admin tabs (Users / Configuration) ---- */
.admin-tabs{display:flex;gap:4px;margin-bottom:20px;border-bottom:1px solid var(--line)}
.admin-tab{display:inline-flex;align-items:center;gap:7px;background:none;border:none;cursor:pointer;
  color:var(--ink-faint);font:600 13px var(--sans);padding:9px 14px;border-bottom:2px solid transparent;
  margin-bottom:-1px}
.admin-tab:hover{color:var(--ink-dim)}
.admin-tab.active{color:var(--ink);border-bottom-color:var(--signal)}

/* ---- admin: read-only Configuration view ---- */
.cfg-note{display:flex;align-items:center;gap:8px;color:var(--ink-faint);font:12.5px var(--mono);
  margin-bottom:16px}
.cfg-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;align-items:start}
@media(max-width:820px){.cfg-grid{grid-template-columns:1fr}}
.cfg-card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:18px 20px}
/* a full-width card (Demo snapshots) inside the 2-col config grid */
.cfg-card.cfg-wide{grid-column:1/-1}
.snap-create{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.snap-create input{flex:1 1 160px;min-width:120px;padding:7px 10px;border:1px solid var(--line);
  border-radius:8px;background:var(--bg);color:var(--ink);font:13px var(--sans)}
.snap-create #snapCreateBtn{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border:1px solid var(--line);
  border-radius:8px;background:var(--accent);color:#fff;font:13px var(--sans);cursor:pointer;white-space:nowrap}
.snap-create #snapCreateBtn:hover{filter:brightness(.95)}
.snap-list{display:flex;flex-direction:column;gap:6px}
.snap-empty{color:var(--ink-faint);font:12.5px var(--mono);padding:6px 0}
.snap-row{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:8px 10px;border:1px solid var(--line);border-radius:9px;background:var(--bg)}
.snap-meta{display:flex;flex-direction:column;gap:2px;min-width:0}
.snap-name{font-size:13px;color:var(--ink);font-weight:600}
.snap-sub{font:11.5px var(--mono);color:var(--ink-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.snap-acts{display:flex;align-items:center;gap:6px;flex:none}
.snap-restore,.snap-del{display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border:1px solid var(--line);
  border-radius:7px;background:var(--panel);color:var(--ink);font:12px var(--sans);cursor:pointer}
.snap-restore:hover{border-color:var(--accent);color:var(--accent)}
.snap-del{padding:5px 8px;color:var(--ink-faint)}
.snap-del:hover{border-color:var(--danger,#c0392b);color:var(--danger,#c0392b)}
/* ---- admin: Personas tab (reuses the snap-row/acts idiom) ---- */
.pers-new-row{display:flex;justify-content:flex-end;margin-bottom:10px}
.pers-row{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--line);
  border-radius:9px;background:var(--bg)}
.pers-row.pers-dis{opacity:.55}
.pers-chip{flex:none;width:10px;height:10px;border-radius:50%;border:1px solid var(--line)}
.pers-meta{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.pers-name{display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-size:13px;color:var(--ink);font-weight:600}
.pers-slug{font-family:var(--mono);font-size:11.5px;color:var(--ink-faint);font-weight:400}
.pers-badge{display:inline-flex;align-items:center;gap:4px;padding:1px 7px;border:1px solid var(--line);
  border-radius:99px;font:600 10px var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--ink-faint)}
.pers-badge.pers-off{color:var(--danger,#c0392b);border-color:var(--danger,#c0392b)}
.pers-sub{font:11.5px var(--sans);color:var(--ink-faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pers-form{display:flex;flex-direction:column;gap:7px;padding:11px;border:1px solid var(--signal);
  border-radius:9px;background:var(--bg)}
.pers-form label{display:flex;flex-direction:column;gap:3px;font:600 11px var(--sans);color:var(--ink-dim)}
.pers-form label.user-active{flex-direction:row;align-items:center;gap:7px}
.pers-form input[type="text"],.pers-form textarea{background:var(--panel);border:1px solid var(--line);
  border-radius:7px;padding:7px 9px;color:var(--ink);font:13px var(--sans);resize:vertical}
.pers-form input:focus,.pers-form textarea:focus{outline:none;border-color:var(--signal)}
.pers-form input[type="color"]{width:44px;height:26px;padding:1px;border:1px solid var(--line);
  border-radius:7px;background:var(--panel);cursor:pointer}
/* full-screen overlay shown while a restore restarts the server */
.reset-overlay{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;
  background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(3px)}
.reset-box{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;
  padding:28px 34px;border:1px solid var(--line);border-radius:14px;background:var(--panel);max-width:340px}
.reset-overlay .spin{display:inline-block;animation:spin .9s linear infinite;color:var(--accent)}
.reset-title{font-family:var(--serif);font-size:17px;color:var(--ink)}
.reset-sub{font:12.5px var(--sans);color:var(--ink-faint);line-height:1.5}
.cfg-card h3{display:flex;align-items:center;gap:9px;font-family:var(--serif);font-size:16px;color:var(--ink);
  margin:0 0 14px}
.cfg-sub{font:600 10.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);
  margin:16px 0 8px;padding-top:12px;border-top:1px solid var(--line-soft)}
.cfg-card>.cfg-sub:first-of-type{padding-top:0;border-top:none}
.cfg-row{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:4px 0;
  font-size:13px;line-height:1.4}
.cfg-row.col{flex-direction:column;align-items:flex-start;gap:4px}
.cfg-k{color:var(--ink-dim);flex:none}
.cfg-v{color:var(--ink);text-align:right;word-break:break-word}
.cfg-v.mono{font-family:var(--mono);font-size:12px}
.cfg-set{color:var(--signal)}
.cfg-unset{color:var(--ink-faint)}
.cfg-ctx{color:var(--ink-dim);font-size:12.5px;line-height:1.5}
.cfg-sql{font:11.5px var(--mono);color:var(--ink-dim);background:var(--bg-2);border:1px solid var(--line-soft);
  border-radius:7px;padding:8px 10px;margin:0 0 6px;white-space:pre-wrap;word-break:break-word;overflow-x:auto}
.cfg-mcp{background:var(--bg-2);border:1px solid var(--line);border-radius:9px;padding:11px 13px;margin-bottom:10px}
.cfg-mcp-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px}
.cfg-mcp-name{display:inline-flex;align-items:center;gap:7px;color:var(--ink);font-weight:600;font-size:13px}
.cfg-mcp-status{font:10px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint);
  border:1px solid var(--line);border-radius:20px;padding:1px 8px}
.cfg-mcp-status.ok,.cfg-mcp-status.enabled{color:var(--signal);border-color:var(--signal)}

/* ---- Scratch Data workspace: split console + spreadsheet grid (ADR 0006/0007) ---- */
.data-h2{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-faint);margin:0;font-weight:600;display:flex;align-items:center;gap:8px}
.data-ro{font-family:var(--mono);font-size:10px;letter-spacing:.06em;border:1px solid var(--signal);
  border-radius:20px;padding:1px 8px;color:var(--signal)}
.data-empty{color:var(--ink-dim);font-size:13px;background:var(--panel);border:1px dashed var(--line);
  border-radius:12px;padding:18px}
.data-empty b{color:var(--ink);display:block;margin-bottom:6px}
.data-empty p{margin:0;line-height:1.5}
.data-empty a{color:var(--signal)}
.data-hint{font-size:12px;color:var(--ink-faint);margin:0}
.data-sql{width:100%;box-sizing:border-box;font-family:var(--mono);font-size:13px;line-height:1.5;
  background:var(--bg-2);color:var(--ink);border:1px solid var(--line);border-radius:10px;padding:11px 13px;
  resize:none;flex:1;min-height:60px}
.data-sql:focus{outline:none;border-color:var(--signal)}
.data-run{font-family:var(--mono);font-size:12.5px;font-weight:600;background:var(--signal);color:var(--on-signal);
  border:1px solid var(--signal);border-radius:8px;padding:7px 18px;cursor:pointer}
.data-run:hover{background:var(--signal-soft);border-color:var(--signal-soft)}
.data-status{font-family:var(--mono);font-size:11.5px;color:var(--ink-faint)}
.data-err{font-family:var(--mono);font-size:12.5px;color:var(--signal-soft);background:var(--bg-2);
  border:1px solid var(--line);border-left:3px solid var(--signal);border-radius:8px;padding:11px 13px;
  white-space:pre-wrap;word-break:break-word;margin:14px}

/* Full-bleed: on the Scratch Data route the report wrap drops its centered
   max-width + horizontal padding so the grid + console span the whole pane.
   The report-pane stops scrolling (the grid owns its own scroller). */
.app.data-route .report-pane,.app.doc-route .report-pane{overflow:hidden}
/* full-bleed + DEFINITE height so the data grid / doc viewer can fill the pane (the
   doc view's .docview is height:100% and needs a sized ancestor, else the PDF iframe
   collapses to its min-height and leaves dead space below). */
.app.data-route #report.wrap,.app.doc-route #report.wrap{max-width:none;margin:0;padding:14px 0 0;height:100%;
  display:flex;flex-direction:column;min-height:0}
/* the split workspace fills the report pane */
.scratch{display:flex;flex-direction:column;height:100%;min-height:0}
.scratch-split{flex:1;min-height:0;display:flex;flex-direction:column;
  border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--panel)}
/* Full-bleed: edge-to-edge, only top/bottom rules (no side gaps). */
.app.data-route .scratch-split{border-left:none;border-right:none;border-radius:0}
.app.data-route .scratch-console{padding-left:18px;padding-right:18px}
.scratch-console{flex:0 0 168px;display:flex;flex-direction:column;padding:13px 15px;min-height:90px;
  border-bottom:1px solid var(--line);background:var(--bg)}
.data-h2-row{display:flex;align-items:baseline;gap:12px;margin-bottom:9px;flex-wrap:wrap}
.scratch-divider{flex:none;height:8px;cursor:row-resize;background:var(--bg-2);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);position:relative}
.scratch-divider::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:36px;height:2px;border-radius:2px;background:var(--line)}
.scratch-divider:hover::after{background:var(--signal)}
body.dragging-row{cursor:row-resize;user-select:none}
body.dragging-col{cursor:col-resize;user-select:none}
.scratch-grid-pane{flex:1;min-height:0;display:flex;flex-direction:column}
/* Command bar: sits between the SQL console and the rows. Holds Run + Export. */
.scratch-cmdbar{flex:none;display:flex;align-items:center;gap:12px;padding:9px 14px;
  border-bottom:1px solid var(--line);background:var(--bg-2)}
.scratch-cmd-spacer{flex:1}
/* Export dropdown */
.export-menu{position:relative}
.data-export{font-family:var(--mono);font-size:12px;font-weight:600;background:var(--panel-2);color:var(--ink);
  border:1px solid var(--line);border-radius:8px;padding:7px 14px;cursor:pointer;white-space:nowrap}
.data-export:hover:not(:disabled){border-color:var(--signal);color:var(--paper)}
.data-export:disabled{opacity:.45;cursor:default}
.export-pop{position:absolute;right:0;top:calc(100% + 6px);z-index:30;min-width:200px;
  background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:5px;
  box-shadow:0 12px 32px rgba(0,0,0,.4)}
.export-pop[hidden]{display:none}
.export-item{display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;
  font-family:var(--mono);font-size:12.5px;color:var(--ink);background:none;border:none;border-radius:6px;
  padding:7px 10px;cursor:pointer;text-align:left}
.export-item:hover{background:var(--panel-2);color:var(--paper)}
.export-sub{font-size:10.5px;color:var(--ink-faint);text-transform:uppercase;letter-spacing:.04em}
.export-sep{height:1px;background:var(--line);margin:5px 2px}
.scratch-grid-bar{flex:none;display:flex;align-items:center;gap:12px;padding:9px 14px;
  border-bottom:1px solid var(--line);background:var(--bg);font-family:var(--mono);font-size:11.5px;color:var(--ink-faint);flex-wrap:wrap}
.scratch-grid-bar .grid-open b{color:var(--paper)}
.scratch-grid-bar .grid-bar-spacer{flex:1}
.scratch-grid-host{flex:1;min-height:0;overflow:auto;position:relative}
.scratch-grid-scroll{min-width:100%}
/* Pinned bottom footer for the open table's stats — flex:none so the scrolling
   grid host above reserves the remaining height and never overlaps it. */
.scratch-grid-footer{flex:none;display:flex;align-items:center;gap:10px;
  padding:7px 14px;border-top:1px solid var(--line);background:var(--bg);
  font-family:var(--mono);font-size:11.5px;color:var(--ink-faint)}
.scratch-grid-footer[hidden]{display:none}
.scratch-grid-footer .gf-stats{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-width:0;flex:1}
.scratch-grid-footer .gf-spacer{flex:none;width:8px}
.scratch-grid-footer .gf-table b{color:var(--paper)}
.scratch-grid-footer .gf-stat{color:var(--ink-dim)}
.scratch-grid-footer .gf-stat.stale{color:var(--signal-soft)}
.scratch-grid-footer .gf-src{color:var(--ink-faint);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;max-width:40%}
.scratch-grid-footer .pb-pgbtns{flex:none}
.scratch-table{border-collapse:separate;border-spacing:0;width:max-content;min-width:100%;font-family:var(--mono);font-size:12.5px}
.scratch-table thead th{position:sticky;top:0;z-index:2;background:var(--bg-2);text-align:left;
  border-bottom:1px solid var(--line);border-right:1px solid var(--line);padding:0;vertical-align:top;color:var(--ink)}
.scratch-table th.num{text-align:right}
.gh-top{display:flex;align-items:center;gap:6px;padding:7px 9px 4px;cursor:pointer;user-select:none}
.gh-name{font-weight:600;color:var(--paper);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gh-ind{color:var(--signal);font-size:10px;flex:none}
.gh-resize{margin-left:auto;width:8px;align-self:stretch;cursor:col-resize;flex:none}
.gh-resize:hover{background:var(--signal)}
.gh-filter{width:100%;box-sizing:border-box;font-family:var(--mono);font-size:11px;background:var(--bg);
  color:var(--ink);border:none;border-top:1px solid var(--line);padding:4px 9px}
.gh-filter:focus{outline:none;background:var(--panel-2);color:var(--paper)}
.scratch-table tbody td{padding:6px 9px;border-bottom:1px solid var(--line);border-right:1px solid var(--line);
  color:var(--ink-dim);white-space:nowrap;max-width:420px;overflow:hidden;text-overflow:ellipsis;cursor:cell}
.scratch-table tbody td.num{text-align:right;color:var(--paper)}
.scratch-table tbody tr:hover td{background:var(--panel-2)}
.scratch-table tbody td.selected{background:rgba(255,122,69,.22);outline:1px solid var(--signal);color:var(--paper)}

/* ---- Scratch Data: nested sidebar table list ---- */
.scratch-nav{padding:0}
.scratch-nav.open{padding:2px 0 6px}
.scratch-filter-row{padding:4px 12px 6px 30px}
.scratch-filter{width:100%;box-sizing:border-box;font-family:var(--mono);font-size:11.5px;background:var(--bg-2);
  color:var(--ink);border:1px solid var(--line);border-radius:7px;padding:5px 8px}
.scratch-filter:focus{outline:none;border-color:var(--signal)}
.scratch-trows{display:flex;flex-direction:column}
/* Two-line row: name on top-left, abbreviated count on its own line, right-aligned. */
.scratch-trow{display:flex;flex-direction:column;align-items:stretch;gap:1px;width:100%;text-align:left;
  background:none;border:none;border-left:2px solid transparent;color:var(--ink-dim);cursor:pointer;
  padding:5px 12px 5px 30px;font-family:var(--mono);font-size:12px}
.scratch-trow:hover{background:var(--panel-2);color:var(--ink)}
.scratch-trow.active{border-left-color:var(--signal);color:var(--paper);background:var(--panel-2)}
.scratch-trow .sn-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.scratch-trow .sn-count{align-self:flex-end;font-size:10px;color:var(--ink-faint)}
.scratch-nav-empty{padding:6px 12px 8px 30px;font-family:var(--mono);font-size:11px;color:var(--ink-faint)}
.scratch-nav-empty a{color:var(--signal)}
/* stored documents (PDFs / ZIP members) — read-only roster under the table list */
.scratch-docs{margin-top:6px;border-top:1px solid var(--line)}
.scratch-docs-h{display:flex;align-items:center;gap:5px;padding:6px 12px 3px 18px;
  font-family:var(--mono);font-size:10px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-faint)}
.scratch-docs-hint{margin-left:auto;text-transform:none;letter-spacing:0;font-size:10px;opacity:.7}
.scratch-drows{display:flex;flex-direction:column}
.scratch-drow{display:flex;align-items:center;gap:6px;width:100%;padding:4px 12px 4px 18px;
  border-left:2px solid transparent;color:var(--ink-dim);font-size:12px}
.scratch-drow .sn-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}
.scratch-drow .sn-doc-kind{font-family:var(--mono);font-size:9px;color:var(--ink-faint);
  border:1px solid var(--line);border-radius:3px;padding:0 4px}
/* clickable doc rows (now openable in the preview pane) */
.scratch-drow{cursor:pointer;background:none;border-top:0;border-right:0;border-bottom:0;text-align:left}
.scratch-drow:hover{background:var(--panel-2);color:var(--ink)}
.scratch-drow.active{border-left-color:var(--signal);color:var(--paper);background:var(--panel-2)}

/* ---- full-width document viewer (the "doc" content-body view) ----
   A selected document takes over the main #report body like a page (NOT a cramped inline
   pane). It has NO header of its own — the file name + back + "open in new tab" live in
   the top app-bar (.ab-docacts); the body fills the pane minus that bar with the native
   PDF <iframe> / text <pre> / ZIP member tree. */
.docview{display:flex;flex-direction:column;height:100%;min-height:0}
/* doc-view actions in the top app-bar (right side, next to Ask Trey) */
.ab-docacts{display:inline-flex;align-items:center;gap:14px;flex:none}
.ab-docacts[hidden]{display:none}
.ab-doclink{font-family:var(--mono);font-size:11.5px;color:var(--ink-dim);display:inline-flex;
  align-items:center;gap:5px;text-decoration:none;background:none;border:0;cursor:pointer;padding:0}
.ab-doclink:hover{color:var(--signal)}
.docview-body{flex:1;min-height:420px;overflow:auto;position:relative;
  border:1px solid var(--line);border-radius:8px;background:var(--bg-2)}
.spv-title{font-family:var(--mono);font-size:12px;color:var(--paper);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;min-width:0}
.spv-pdf{width:100%;height:100%;min-height:420px;border:0;display:block;background:var(--bg)}
.spv-text{margin:0;padding:12px 14px;font-family:var(--mono);font-size:12px;line-height:1.5;
  color:var(--code-ink);white-space:pre;overflow:auto}
.spv-text-loading,.spv-note{padding:18px 16px;font-family:var(--mono);font-size:12px;color:var(--ink-faint)}
.spv-note a{color:var(--signal)}
/* zip tree */
.scratch-zip-tree{padding:6px 0;font-size:12.5px}
.sz-row{display:flex;align-items:center;gap:6px;padding:4px 12px;cursor:pointer;
  color:var(--ink-dim);user-select:none}
.sz-row:hover{background:var(--panel-2);color:var(--ink)}
.sz-row .sz-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}
.sz-row .sz-kind{font-family:var(--mono);font-size:9px;color:var(--ink-faint);
  border:1px solid var(--line);border-radius:3px;padding:0 4px}
.sz-caret{display:inline-flex;transition:transform .12s}
.sz-row.collapsed .sz-caret{transform:rotate(-90deg)}
.sz-children[hidden]{display:none}
.sz-empty{padding:4px 12px;font-family:var(--mono);font-size:11px;color:var(--ink-faint)}

/* ---- import modal ---- */
.modal-backdrop{position:fixed;inset:0;z-index:9100;display:none;align-items:center;justify-content:center;
  background:rgba(0,0,0,.6);padding:20px}
.modal{background:var(--panel);border:1px solid var(--line);border-radius:14px;width:min(620px,100%);
  max-height:88vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.5)}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--line)}
.modal-head h2{margin:0;font-size:15px;color:var(--paper)}
.modal-x{background:none;border:none;color:var(--ink-faint);font-size:15px;cursor:pointer}
.modal-x:hover{color:var(--ink)}
.modal-foot{display:flex;justify-content:flex-end;gap:10px;padding:14px 18px;border-top:1px solid var(--line)}
.btn-primary{font-family:var(--mono);font-size:12.5px;font-weight:600;background:var(--signal);color:var(--on-signal);
  border:1px solid var(--signal);border-radius:8px;padding:8px 18px;cursor:pointer}
.btn-primary:hover{background:var(--signal-soft)}
.btn-ghost{font-family:var(--mono);font-size:12.5px;background:var(--panel-2);color:var(--ink);
  border:1px solid var(--line);border-radius:8px;padding:8px 16px;cursor:pointer}
.btn-ghost:hover{border-color:var(--ink-faint)}
.imp-tabs{display:flex;gap:4px;padding:12px 18px 0}
.imp-tab{font-family:var(--mono);font-size:11.5px;background:none;border:1px solid transparent;border-bottom:none;
  color:var(--ink-faint);padding:7px 13px;border-radius:8px 8px 0 0;cursor:pointer}
.imp-tab:hover{color:var(--ink)}
.imp-tab.active{background:var(--bg-2);border-color:var(--line);color:var(--paper)}
.imp-body{padding:16px 18px;overflow:auto}
.imp-field{display:flex;flex-direction:column;gap:5px;margin-bottom:14px;font-family:var(--mono);font-size:11px;
  letter-spacing:.05em;text-transform:uppercase;color:var(--ink-faint)}
.imp-field input,.imp-pane input[type=text],.imp-pane select,.imp-pane textarea{font-family:var(--mono);font-size:13px;
  background:var(--bg-2);color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:9px 11px;text-transform:none;letter-spacing:0}
.imp-field input:focus,.imp-pane input:focus,.imp-pane select:focus,.imp-pane textarea:focus{outline:none;border-color:var(--signal)}
.imp-pane textarea{width:100%;box-sizing:border-box;resize:vertical;line-height:1.5}
.imp-hint{font-size:12px;color:var(--ink-faint);margin:0 0 10px;line-height:1.5}
/* drag-and-drop / click-to-browse zone (File pane) */
.imp-drop{display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:26px 18px;border:1.5px dashed var(--border);border-radius:10px;
  background:var(--bg-2);color:var(--ink-faint);cursor:pointer;text-align:center;
  transition:border-color .12s,background .12s,color .12s}
.imp-drop:hover,.imp-drop:focus-visible{border-color:var(--signal);color:var(--ink);outline:none}
.imp-drop.dragover{border-color:var(--signal);background:color-mix(in srgb,var(--signal) 10%,var(--bg-2));color:var(--paper)}
.imp-drop.has-file{border-style:solid;border-color:var(--high)}
.imp-drop-ico{color:var(--ink-dim)}
.imp-drop.dragover .imp-drop-ico,.imp-drop.has-file .imp-drop-ico{color:var(--signal)}
.imp-drop-main{font-family:var(--mono);font-size:12.5px}
.imp-drop-browse{color:var(--signal);text-decoration:underline;text-underline-offset:2px}
.imp-drop-name{font-family:var(--mono);font-size:12px;color:var(--paper);word-break:break-all}
.imp-pane select{margin-bottom:10px}
.imp-status{font-family:var(--mono);font-size:12px;margin-top:12px;min-height:16px}
.imp-status.err{color:var(--signal-soft)}
.imp-status.ok{color:var(--high)}

/* ---- chart interactivity: hover tooltip, highlight, drill modal ---- */
.chart-el{cursor:pointer;transition:opacity .12s ease}
.chart-el.cbar-row{cursor:pointer}
.chart.dimmed .chart-el{opacity:.42}
.chart.dimmed .chart-el.hot{opacity:1}
rect.chart-el.hot,path.chart-el.hot,circle.chart-el.hot{stroke:var(--paper);stroke-width:1.4;paint-order:stroke}
circle.cline-dot.hot{r:4}
.cbar-row.chart-el.hot .cbar-fill{filter:brightness(1.18)}
.cbar-row.chart-el:hover .cbar-fill{filter:brightness(1.12)}
.chart-tip{position:fixed;z-index:9300;pointer-events:none;background:var(--panel-2);
  border:1px solid var(--line);border-radius:8px;padding:7px 10px;box-shadow:0 10px 30px rgba(0,0,0,.5);
  display:flex;flex-direction:column;gap:1px;max-width:260px;font-size:12px;color:var(--ink)}
/* the `hidden` attribute must actually hide it — `display:flex` above otherwise wins
   over the UA `[hidden]{display:none}`, so hideChartTip() had no visual effect. */
.chart-tip[hidden]{display:none}
.chart-tip .ct-label{font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;color:var(--ink-dim)}
.chart-tip .ct-series{font-size:11.5px;color:var(--ink-dim)}
.chart-tip .ct-val{font-weight:600;color:var(--paper);font-variant-numeric:tabular-nums}

.drill-modal{width:min(880px,100%)}
.drill-body{padding:16px 18px;overflow:auto}
.drill-loading{display:flex;align-items:center;gap:8px;color:var(--ink-dim);font-size:13px;padding:8px 0}
.drill-loading .spin{display:inline-block;animation:spin .8s linear infinite}
.drill-empty{color:var(--ink-dim);font-size:13px;padding:14px 0;text-align:center}
.drill-note{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-dim);
  background:var(--bg-2);border:1px solid var(--line-soft);border-radius:8px;padding:8px 11px;margin-bottom:12px}
.drill-trunc,.drill-count{font-family:var(--mono);font-size:11px;color:var(--ink-faint);margin:8px 2px 0}
.drill-count{margin:0 2px 9px}
.drill-tablewrap{overflow:auto;max-height:58vh;border:1px solid var(--line);border-radius:10px}
table.drill-table thead th{position:sticky;top:0;background:var(--panel);z-index:1}

/* ============ PUBLIC SHARE VIEW (ADR 0015) ============================
   The minimal, no-login /share/<token> page. It reuses the chat bubble styles
   (.msg/.bubble/.who) via renderStoredMsg; only the page-level frame is bespoke.
   Read-only: no composer, nav or account chrome exist on this page (the theme
   picker injected by wireShareTheme is the ONE piece of chrome).
   Every color here is a palette token (never a raw hex) so the Light/Dark/System
   themes both render legibly — guarded by share_view.test.mjs.
   The page has NO internal scroll region — it relies on normal document
   scrolling, so it must undo the global body{height:100%;overflow:hidden}
   the SPA's IDE shell depends on (scoped here; the global rule is untouched). */
body.share-mode{margin:0;background:var(--bg);color:var(--paper);height:auto;overflow:auto}
.share-app{max-width:820px;margin:0 auto;padding:28px 20px 64px;min-height:100vh;box-sizing:border-box}
.share-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;
  border-bottom:1px solid var(--line);padding-bottom:14px;margin-bottom:18px}
.share-title{font-family:var(--serif,var(--sans));font-size:22px;font-weight:600;margin:0;color:var(--paper);word-break:break-word;
  flex:1 1 auto;min-width:min(100%,260px)}
/* the injected Light/Dark/System control reuses the account-menu markup
   (themeSwitcherHtml → .acct-theme/.theme-seg) but drops its menu chrome here */
.share-theme{flex:none;width:220px;max-width:100%}
.share-theme .acct-theme{padding:0;margin:0;border-top:none}
.share-scroll .msg{margin:0 0 22px}
.share-empty{color:var(--ink-dim);font-size:14px;line-height:1.6;padding:32px 4px;font-family:var(--sans)}