/* ═══════════════════════════════════════════════════════════════════════════
   demo.css — the in-browser reconstruction of the Algoagent Core macOS app.

   Every colour, face, space, radius and duration comes from /tokens.css, which
   is the 1:1 port of algoagent-swift-app/Sources/AlgoagentApp/Theme/Tokens.swift. No
   hex is written here that duplicates a token.

   CSP note: `style-src 'self'` with no 'unsafe-inline' blocks style ATTRIBUTES.
   So nothing in demo.html carries style="". Data-driven widths ride on
   [data-w] / [data-x] attribute selectors (generated at the foot of this file)
   or are written from JS with el.style.setProperty(), which CSSOM allows.
   ═══════════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

:root {
  --page-ground: var(--surface-2);
  --side-w: 232px;
  --band-h: 1px;
}

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--page-ground);
  color: var(--ink);
  font: var(--t-body);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

svg { display: block; }
button { min-inline-size: 44px; min-block-size: 44px; font: inherit; color: inherit; }

/* Every outline icon in this page is drawn from one stroke recipe. */
svg[viewBox="0 0 24 24"] {
  width: 1em; height: 1em;
  fill: none; stroke: currentColor;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.dim  { color: var(--ink-faint); }
.eyebrow {
  font: var(--t-eyebrow); letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-faint); margin: 0;
}

:where(a) { color: var(--accent); text-underline-offset: .18em; text-decoration-thickness: 1px; }

:where(a, button, input, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

.skip-link {
  position: fixed; top: var(--s8); left: var(--s8); z-index: 90;
  transform: translateY(-200%);
  background: var(--accent-fill); color: var(--on-accent);
  padding: var(--s8) var(--s16); border-radius: var(--r-sm);
  font: var(--t-card); text-decoration: none;
  transition: transform var(--m-snappy);
}
.skip-link:focus { transform: none; }

/* In-iframe (homepage hero). The reconstruction is the preview; the
   marketing chrome around it is already on the parent page. */
html.embed, html.embed body {
  height: 100%;
  overflow: hidden;
  background: var(--bg);
}
html.embed .topbar,
html.embed .stage-foot { display: none !important; }
html.embed .stage-wrap {
  padding: 0;
  max-width: none;
  min-height: 100%;
  height: 100%;
}
html.embed .win {
  height: 100%;
  min-height: 100%;
  border: 0;
  border-radius: 0;
}

/* A wider reading layout for the homepage showcase. The same dossier,
   controls and reading order remain in the full demo's normal layout. */
@media (min-width: 1000px) {
  html.showcase .win { grid-template-columns: 190px minmax(0, 1fr); }
  html.showcase .page-head { padding: 15px 22px; }
  html.showcase .col { padding: 16px 22px; }
  html.showcase .stack { gap: 12px; }
  html.showcase .runcard { display: grid; grid-template-columns: minmax(0, 1fr) 310px; align-items: center; padding: 12px; gap: 8px; }
  html.showcase .runcard .runrow { flex-wrap: nowrap; }
  html.showcase .runcard .runstate { flex: 1; }
  html.showcase .runcard .spacer { display: none; }
  html.showcase .runcard .console { grid-column: 1 / -1; }
  html.showcase .rail-full { padding-block: 2px; }
  html.showcase #dossier-filed { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
  html.showcase #dossier-filed > * { grid-column: 1 / -1; }
  html.showcase #dossier-filed > .card:nth-child(-n+2) { grid-column: auto; }
  html.showcase .scorecard { gap: 16px; }
  html.showcase .pcgrid, html.showcase .bbb { grid-template-columns: 1fr; }
}

/* ── Page bar ─────────────────────────────────────────────────────────── */

.topbar {
  display: flex; align-items: center; gap: var(--s16);
  padding: var(--s12) var(--s20);
  border-bottom: 1px solid var(--hairline);
  background: var(--bg);
  position: sticky; top: 0; z-index: 30;
}
.topbar-back {
  display: inline-flex; align-items: center; gap: var(--s8);
  min-height: 44px;
  font: var(--t-card); color: var(--ink); text-decoration: none;
  padding: var(--s4) var(--s8); margin-left: calc(var(--s8) * -1);
  border-radius: var(--r-sm);
  transition: background var(--m-snappy), color var(--m-snappy);
}
.topbar-back:hover { background: var(--surface-raised); }
.topbar-back .mark { width: 20px; height: 20px; }

.mark .base, .mark .ring { stroke: var(--ink-faint); fill: none; }
.mark .sig { stroke: var(--accent); fill: none; }
.mark .node { fill: var(--accent); }

.topbar-tools { display: flex; align-items: center; gap: var(--s8); flex: none; margin-left: auto; }

.kbtn {
  display: inline-flex; align-items: center; gap: var(--s8);
  padding: var(--s4) var(--s8) var(--s4) var(--s8);
  background: var(--surface); color: var(--ink-muted);
  border: 1px solid var(--hairline); border-radius: var(--r-sm);
  font: var(--t-caption); cursor: pointer;
  transition: background var(--m-snappy), color var(--m-snappy), border-color var(--m-snappy);
}
.kbtn:hover { background: var(--surface-raised); color: var(--ink); border-color: var(--hairline-strong); }
.kbtn:active { transform: translateY(.5px); }
.kbtn svg { width: 14px; height: 14px; }
.kbtn kbd {
  font-family: var(--font-mono); font-size: 10px;
  padding: 1px 5px; border-radius: var(--r-xs);
  background: var(--surface-2); color: var(--ink-faint);
  border: 1px solid var(--hairline);
}
.theme-btn .ico-sun { display: block; }
.theme-btn .ico-moon { display: none; }
:root[data-theme="dark"] .theme-btn .ico-sun { display: none; }
:root[data-theme="dark"] .theme-btn .ico-moon { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .theme-btn .ico-sun { display: none; }
  :root:not([data-theme]) .theme-btn .ico-moon { display: block; }
}
.theme-btn .theme-label { min-width: 3.6em; text-align: left; }

/* ── The window ───────────────────────────────────────────────────────── */

.stage-wrap { padding: var(--s20); max-width: calc(var(--w-wide) + var(--s32) * 2); margin: 0 auto; }

.win {
  position: relative;
  display: grid;
  grid-template-columns: var(--side-w) minmax(0, 1fr);
  height: min(920px, calc(100vh - 132px));
  min-height: 620px;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--bg);
}

/* Sidebar replaces the titlebar — Theme.chrome (white in light, black in dark). */
.win-side {
  display: flex; flex-direction: column; min-height: 0;
  background: var(--chrome);
  border-right: 1px solid var(--hairline);
}

.lights { display: flex; gap: 8px; padding: 14px 16px 0; }
.lights i { width: 11px; height: 11px; border-radius: var(--r-full); display: block; }
.lights .l-close { background: #FF5F57; }
.lights .l-min   { background: #FEBC2E; }
.lights .l-zoom  { background: #28C840; }

.side-brand {
  display: flex; align-items: center; gap: 10px;
  padding: 16px 16px 12px;
}
.side-brand .mark { width: 26px; height: 26px; }
.side-brand b { font: 700 15px/1.2 var(--font-display); color: var(--ink); }

.navlist { display: flex; flex-direction: column; gap: 2px; padding: var(--s8); overflow-y: auto; flex: 1 1 auto; }
.navrow {
  display: flex; align-items: center; gap: 10px;
  width: 100%; text-align: left;
  padding: 6px var(--s8);
  background: none; border: 0; border-radius: var(--r-sm);
  color: var(--ink-muted);
  font: 400 14px/1.4 var(--font-display);
  cursor: pointer;
  transition: background var(--m-snappy), color var(--m-snappy);
}
.navrow svg { width: 16px; height: 16px; flex: none; }
.navrow span { flex: 1 1 auto; }
.navrow kbd {
  font-family: var(--font-mono); font-size: 10px; color: var(--ink-faint);
  opacity: 0; transition: opacity var(--m-snappy);
}
.navrow:hover { background: color-mix(in srgb, var(--surface-raised) 60%, transparent); color: var(--ink); }
.navrow:hover kbd { opacity: 1; }
.navrow[aria-current="page"] { background: var(--accent-soft); color: var(--accent); font-weight: 500; }
.navrow[aria-current="page"] kbd { opacity: 1; color: var(--accent); }

.side-foot {
  display: flex; align-items: center; gap: 6px;
  padding: var(--s12); border-top: 1px solid var(--hairline);
  font: var(--t-caption); color: var(--ink-muted);
}
.side-foot .conn { display: inline-flex; align-items: center; gap: 6px; flex: 1 1 auto; }
.side-foot .ver { color: var(--ink-faint); font-size: 10px; }

/* Operator mark. The photograph is demo chrome; the monogram underneath is
   what shows if the file is missing or an image request is blocked. */
.opmark {
  position: relative; flex: none; display: grid; place-items: center;
  width: 26px; height: 26px; border-radius: var(--r-full); overflow: hidden;
  background: var(--accent-soft); border: 1px solid var(--hairline);
}
.opmark img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.opinitials {
  font: 600 10px/1 var(--font-display); font-style: normal;
  letter-spacing: .04em; color: var(--accent);
}
.opmark-lg { width: 40px; height: 40px; }
.opmark-lg .opinitials { font-size: 14px; }
.voice {
  display: grid; place-items: center;
  width: 24px; height: 24px; padding: 0;
  background: none; border: 1px solid var(--hairline); border-radius: var(--r-sm);
  color: var(--ink-faint); cursor: pointer;
  transition: background var(--m-snappy), color var(--m-snappy), border-color var(--m-snappy);
}
.voice svg { width: 13px; height: 13px; }
.voice:hover { color: var(--ink); background: var(--surface-raised); }
.voice[aria-pressed="true"] { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }

.dot { width: 7px; height: 7px; border-radius: var(--r-full); background: var(--ink-faint); display: inline-block; flex: none; }
.dot.ok { background: var(--status-ok); }
.dot.warn { background: var(--status-warn); }
.dot.bad { background: var(--status-bad); }
.dot.none { background: var(--ink-faint); opacity: .45; }
.dot.pulse { animation: dotpulse 1.2s ease-in-out infinite alternate; }
@keyframes dotpulse { from { opacity: 1; } to { opacity: .35; } }

/* ── Detail column ────────────────────────────────────────────────────── */

.win-detail { position: relative; min-width: 0; min-height: 0; background: var(--bg); display: flex; flex-direction: column; }

.errbanner {
  position: absolute; inset: 0 0 auto 0; z-index: 12;
  display: flex; align-items: flex-start; gap: 10px;
  padding: var(--s8) var(--s16);
  background: color-mix(in srgb, var(--danger) 12%, var(--bg));
  border-bottom: 1px solid color-mix(in srgb, var(--danger) 45%, transparent);
  animation: dropin var(--m-snappy);
}
@keyframes dropin { from { transform: translateY(-100%); opacity: 0; } }
.errbanner svg { width: 15px; height: 15px; color: var(--danger); flex: none; margin-top: 1px; }
.errbanner p { margin: 0; flex: 1 1 auto; font: var(--t-caption); color: var(--ink); }

/* PageShell — one header band, one title rank, one gutter. */
.page { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; }
.page-head {
  display: flex; align-items: flex-end; gap: var(--s16);
  flex-wrap: wrap;
  padding: var(--s20) var(--s24) var(--s16);
  border-bottom: var(--band-h) solid var(--hairline);
  flex: none;
}
.page-titles { flex: 1 1 340px; min-width: 0; }
.page-eyebrow { font: var(--t-eyebrow); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-faint); margin: 0 0 var(--s2); }
.page-title { font: var(--t-title); color: var(--ink); margin: 0; letter-spacing: -.01em; }
.page-sub { font: var(--t-caption); color: var(--ink-muted); margin: var(--s2) 0 0; max-width: 62ch; }
.page-actions { display: flex; align-items: center; gap: var(--s8); flex-wrap: wrap; }

.page-body { flex: 1 1 auto; min-height: 0; }
.page-body.scrolls { overflow-y: auto; overscroll-behavior: contain; }

.col { width: 100%; margin-inline: auto; padding: var(--s20) var(--s24); }

/* List ⇄ dossier: [hidden] { display:none !important } is the default, but a
   second signal on the stocks panel beats it if a hidden attribute sticks. */
#r-stocks[data-view="detail"] #dossier-list { display: none !important; }
#r-stocks[data-view="detail"] #dossier-detail {
  display: flex !important;
  flex-direction: column;
}
.cap-prose    { max-width: calc(var(--w-prose)    + var(--s24) * 2); }
.cap-settings { max-width: calc(var(--w-settings) + var(--s24) * 2); }
.cap-content  { max-width: calc(var(--w-content)  + var(--s24) * 2); }
.cap-wide     { max-width: calc(var(--w-wide)     + var(--s24) * 2); }

.stack { display: flex; flex-direction: column; gap: var(--s20); align-items: stretch; }
.spacer { flex: 1 1 auto; }
.hair { border: 0; border-top: 1px solid var(--hairline); margin: var(--s4) 0; }
.vhair { border: 0; border-left: 1px solid var(--hairline); align-self: stretch; margin: 0; width: 0; }

/* The one research-only line the News wire carries above its cards. */
.sample-line { display: flex; align-items: center; gap: var(--s8); margin: 0; font: var(--t-caption); color: var(--ink-muted); flex-wrap: wrap; }
.sample-line .ico-lock { width: 14px; height: 14px; color: var(--ink-faint); }
.sample-tag {
  font: var(--t-eyebrow); letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-faint);
  padding: 3px var(--s8); border-radius: var(--r-full);
  background: var(--surface-2); border: 1px solid var(--hairline);
  white-space: nowrap;
}
.boundary {
  margin: 0; font: var(--t-caption); color: var(--ink-muted);
  padding: var(--s8) var(--s12);
  border-left: 2px solid var(--hairline-strong);
  background: color-mix(in srgb, var(--surface) 60%, transparent);
}

/* ── Buttons ──────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: var(--s8) var(--s12);
  border-radius: var(--r-md); border: 1px solid transparent;
  font: var(--t-card); cursor: pointer; white-space: nowrap;
  transition: background var(--m-snappy), color var(--m-snappy), border-color var(--m-snappy), transform var(--m-snappy);
}
.btn svg { width: 14px; height: 14px; }
.btn:active { transform: translateY(.5px); }
.btn[disabled] { opacity: .5; cursor: default; transform: none; }

.btn-prom { background: var(--accent-fill); color: var(--on-accent); }
.btn-prom:hover:not([disabled]) { background: var(--accent-press); }

.btn-ghost { background: var(--surface); color: var(--ink); border-color: var(--hairline); }
.btn-ghost:hover:not([disabled]) { background: var(--surface-raised); border-color: var(--hairline-strong); }

.btn-quiet { background: none; color: var(--accent); }
.btn-quiet:hover { background: var(--accent-soft); }

.btn-sm { padding: 5px var(--s8); font: var(--t-caption); }
.btn-xs { padding: 3px 7px; font: var(--t-eyebrow); letter-spacing: .04em; text-transform: none; }
.icon-only { padding: 5px; }
.icon-only svg { width: 15px; height: 15px; }
.btnrow { display: flex; gap: var(--s8); flex-wrap: wrap; }

.badge {
  font-family: var(--font-mono); font-size: 10px; font-weight: 600;
  padding: 0 5px; border-radius: var(--r-full);
  background: var(--accent-soft); color: var(--accent);
}

/* ── Segmented controls (real tablists) ───────────────────────────────── */

.seg {
  display: inline-flex; gap: var(--s4); padding: var(--s2);
  background: var(--surface-2); border: 1px solid var(--hairline);
  border-radius: var(--r-md);
}
.seg.wrap6 { flex-wrap: wrap; }
.seg-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px var(--s12);
  background: none; border: 0; border-radius: var(--r-sm);
  color: var(--ink-muted); font: var(--t-card); cursor: pointer;
  transition: background var(--m-snappy), color var(--m-snappy);
}
.seg-btn svg { width: 13px; height: 13px; }
.seg-btn:hover { background: var(--surface-raised); color: var(--ink); }
.seg-btn[aria-selected="true"],
.seg-btn[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.seg-btn .seg-n { font-family: var(--font-mono); font-size: 10px; font-weight: 600; color: var(--ink-faint); }
.seg-btn[aria-selected="true"] .seg-n { color: var(--accent); }
.seg-pill { border-radius: var(--r-full); }
.seg-pill .seg-btn { border-radius: var(--r-full); }
.seg.small .seg-btn { padding: 4px var(--s8); font: var(--t-caption); }

/* ── Ruled section (Parts.RuledSection) ───────────────────────────────── */

.rsec { display: flex; flex-direction: column; gap: 10px; }
.rsec-t {
  font: var(--t-eyebrow); letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-faint); margin: 0;
}
.rsec-hint { margin: -4px 0 0; font: var(--t-caption); color: var(--ink-faint); }

/* ── Cards ────────────────────────────────────────────────────────────── */

.card {
  display: flex; flex-direction: column; gap: var(--s12);
  padding: var(--s16);
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: var(--r-md);
}
.card-head { display: flex; align-items: baseline; gap: var(--s12); flex-wrap: wrap; }
.card-head h2, .card-head h3 { margin: 0; font: var(--t-section); color: var(--ink); }
.card-head h3.big { font: var(--t-title); }
.card-head .prov {
  margin-left: auto;
  font: var(--t-eyebrow); letter-spacing: .08em; text-transform: lowercase;
  color: var(--ink-faint);
  padding: 2px var(--s8); border-radius: var(--r-full); background: var(--surface-2);
}
.note { margin: 0; font: var(--t-caption); color: var(--ink); }
.note.dim { color: var(--ink-faint); }
.ok-ink { color: var(--status-ok); }

.metrics { display: flex; flex-wrap: wrap; gap: var(--s24); }
.metrics.tight { gap: var(--s16); }
.metrics > div { min-width: 84px; }
.metrics p { margin: 0; }
.metrics p + p { font: var(--t-mono); font-weight: 600; color: var(--ink); margin-top: 2px; }

.kvgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--s12) var(--s24); }
.kvgrid.wide { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
.kvgrid p { margin: 0; }
.kvgrid p + p { font: var(--t-body); color: var(--ink); margin-top: 2px; }
.kvgrid p + p.mono { font: var(--t-mono); font-weight: 600; }

/* ── P&L: colour is ALWAYS paired with a +/− glyph (Theme contract) ───── */

.pnl { font-variant-numeric: tabular-nums; }
.pnl.up   { color: var(--long); }
.pnl.down { color: var(--short); }
.pnl.flat { color: var(--neutral); }
.pnl em { font-style: normal; color: var(--ink-muted); }

/* ── Portfolio ────────────────────────────────────────────────────────── */

.tape-status { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 10px; color: var(--ink-muted); }

.ovhead {
  display: flex; flex-wrap: wrap; gap: var(--s24) var(--s32);
  align-items: flex-start; justify-content: space-between;
  padding: var(--s20);
  background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-md);
}
.hero-fig { display: flex; align-items: baseline; gap: var(--s12); flex-wrap: wrap; margin: var(--s4) 0 0; }
.hero-fig > .mono:first-child { font-family: var(--font-mono); font-size: 30px; font-weight: 600; color: var(--ink); letter-spacing: -.02em; }
.hero-fig .pnl { font-size: 13px; font-weight: 600; }
.ovhead-tiles { display: flex; gap: var(--s24); flex-wrap: wrap; }
.tile p { margin: 0; }
.tile-v { font: var(--t-mono); font-weight: 600; color: var(--ink); margin-top: 2px !important; }
.tile-s { font: var(--t-caption); color: var(--ink-faint); }

.allocbar { display: flex; gap: 2px; height: 10px; border-radius: 5px; overflow: hidden; background: var(--hairline); }
.allocbar i { flex: 0 0 var(--w, 0%); width: var(--w, 0%); max-width: var(--w, 0%); display: block; min-width: 0; height: 100%; }
.a1 { background: var(--ink-muted); }
.a2 { background: color-mix(in srgb, var(--ink-muted) 70%, transparent); }
.a3 { background: color-mix(in srgb, var(--ink-muted) 52%, transparent); }
.a4 { background: color-mix(in srgb, var(--ink-muted) 36%, transparent); }
.a5 { background: color-mix(in srgb, var(--ink-muted) 24%, transparent); }
.a6 { background: color-mix(in srgb, var(--ink-muted) 18%, transparent); }
.a7 { background: color-mix(in srgb, var(--ink-muted) 13%, transparent); }
.a8 { background: color-mix(in srgb, var(--ink-muted) 9%, transparent); }
.alloc-legend { display: flex; flex-wrap: wrap; gap: var(--s12); list-style: none; margin: 0; padding: 0; }
.alloc-legend li { display: inline-flex; align-items: center; gap: 5px; font: var(--t-caption); color: var(--ink-muted); }
.alloc-legend i { width: 7px; height: 7px; border-radius: var(--r-full); }
.alloc-legend .mono { color: var(--ink-faint); }

.tablewrap { overflow-x: auto; overscroll-behavior-x: contain; }

table.holdings, table.calib { width: 100%; border-collapse: collapse; min-width: 780px; }
table.calib { min-width: 560px; }
.holdings th, .holdings td, .calib th, .calib td {
  padding: var(--s12) var(--s8); text-align: left;
  border-bottom: 1px solid var(--hairline);
}
.holdings thead th, .calib thead th { padding-block: var(--s8); border-bottom-color: var(--hairline-strong); }
.holdings th.num, .holdings td.num, .calib th.num, .calib td.num { text-align: right; }
.holdings td, .calib td { font: var(--t-body); color: var(--ink); }
.holdings tfoot td { border-bottom: 0; font: var(--t-caption); color: var(--ink-faint); padding-top: var(--s8); }

.sortbtn {
  display: inline-flex; align-items: center; gap: 4px;
  background: none; border: 0; padding: 2px 0; cursor: pointer;
  font: var(--t-eyebrow); letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-faint);
  transition: color var(--m-snappy);
}
.sortbtn:hover { color: var(--ink); }
.sortbtn::after { content: "↕"; font-size: 9px; opacity: .35; }
th[aria-sort="ascending"] .sortbtn { color: var(--ink); }
th[aria-sort="ascending"] .sortbtn::after { content: "↑"; opacity: 1; }
th[aria-sort="descending"] .sortbtn { color: var(--ink); }
th[aria-sort="descending"] .sortbtn::after { content: "↓"; opacity: 1; }
th.act { width: 72px; }
.actcell { display: inline-flex; gap: 4px; justify-content: flex-end; }

.holdings tbody tr { transition: background var(--m-snappy); }
.holdings tbody tr { cursor: pointer; }
.holdings tbody tr:hover { background: var(--surface); }
.holdings tbody tr:has(.rowlink:focus-visible) { background: var(--surface); }
.rowlink {
  display: flex; align-items: center; gap: var(--s8);
  background: none; border: 0; padding: 0; text-align: left; cursor: pointer;
}
.h-id { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; min-width: 0; }
.hmark { width: 20px; height: 20px; border-radius: 5px; flex: none; }
.hmark-lg { width: 28px; height: 28px; border-radius: 7px; }
.dc-top .hmark { align-self: center; }
.rowlink b { font: 600 13px/1.3 var(--font-display); color: var(--ink); }
.rowlink span { font: var(--t-caption); color: var(--ink-faint); }
.holdings tbody tr:hover .rowlink b { color: var(--accent); }
.h-sub { display: inline-flex; gap: 6px; }
.rowact {
  display: grid; place-items: center; width: 26px; height: 24px; padding: 0;
  background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-sm);
  color: var(--ink-faint); cursor: pointer;
  transition: color var(--m-snappy), background var(--m-snappy), border-color var(--m-snappy);
}
.rowact svg { width: 13px; height: 13px; }
.rowact:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.daycell { display: inline-flex; align-items: center; gap: 3px; justify-content: flex-end; font-weight: 600; }
.daycell svg { width: 11px; height: 11px; stroke-width: 2.4; }

.perfrow { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s12); font-size: 12px; }
.perfrow .pnl { font-weight: 600; }
.freshfoot { display: flex; align-items: center; gap: 6px; margin: 0; font: var(--t-caption); color: var(--ink-faint); }
.freshfoot svg { width: 12px; height: 12px; }

.cashlist { list-style: none; margin: 0; padding: 0; }
.cashlist li { display: flex; align-items: center; gap: var(--s12); padding: var(--s12) 0; border-bottom: 1px solid var(--hairline); }
.cashlist svg { width: 15px; height: 15px; color: var(--ink-faint); }
.cashlist b { font: var(--t-card); color: var(--ink); flex: 1 1 auto; }
.cashlist .mono { font-weight: 600; }

.actlist { list-style: none; margin: 0; padding: 0; }
.actlist li { display: flex; align-items: center; gap: var(--s12); padding: var(--s12) 0; border-bottom: 1px solid var(--hairline); flex-wrap: wrap; }
.act-toolbar { display: flex; align-items: center; gap: var(--s12); }
.act-toolbar .rsec-t { flex: 1 1 auto; margin: 0; }
.act-dir { width: 14px; height: 14px; border-radius: var(--r-full); flex: none; }
.act-dir.in  { background: color-mix(in srgb, var(--long) 22%, transparent);  border: 1.5px solid var(--long); }
.act-dir.out { background: color-mix(in srgb, var(--short) 22%, transparent); border: 1.5px solid var(--short); }
.act-dir.sync { background: var(--accent-soft); border: 1.5px solid var(--accent); }
.act-sym { font: 600 13px/1.3 var(--font-display); color: var(--ink); display: flex; flex-direction: column; min-width: 110px; }
.act-sym em { font: var(--t-caption); font-style: normal; color: var(--ink-faint); }
.act-q { flex: 1 1 auto; color: var(--ink-muted); font-size: 12px; }
.act-a { font-weight: 600; }

/* ── Index tape ───────────────────────────────────────────────────────── */

.tape { display: flex; flex-direction: column; gap: var(--s12); }
.tape-head { display: flex; align-items: center; gap: var(--s12); }
.tape-head .rule { flex: 1 1 auto; height: 1px; background: var(--hairline); }
.tape-live { display: inline-flex; align-items: center; gap: var(--s4); font-size: 10px; color: var(--ink-muted); }
.tapegrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--s12); }

.idxcard {
  display: flex; flex-direction: column; gap: var(--s8); align-items: stretch;
  padding: var(--s12); text-align: left; cursor: pointer;
  background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-md);
  transition: background var(--m-snappy), border-color var(--m-snappy);
}
.idxcard:hover { background: var(--surface-raised); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.idx-h { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); }
.idx-go { width: 12px; height: 12px; color: transparent; transition: color var(--m-snappy); }
.idxcard:hover .idx-go { color: var(--accent); }
.idx-v { font-size: 18px; font-weight: 600; color: var(--ink); }
.idx-m { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; }
.idx-m svg { width: 10px; height: 10px; stroke-width: 2.6; }
.idx-m em { font-style: normal; font-size: 11px; font-weight: 400; opacity: .85; }
.idx-m.up { color: var(--long); }
.idx-m.down { color: var(--short); }

.spark { width: 100%; height: 34px; }
.spark .sp-l { fill: none; stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.spark .sp-a { stroke: none; }
.spark.up   .sp-l { stroke: var(--long); }
.spark.up   .sp-a { fill: color-mix(in srgb, var(--long) 14%, transparent); }
.spark.down .sp-l { stroke: var(--short); }
.spark.down .sp-a { fill: color-mix(in srgb, var(--short) 14%, transparent); }
.tape-foot { margin: 0; font-size: 10px; color: var(--ink-faint); }

/* ── Research list ────────────────────────────────────────────────────── */

.listhead { display: flex; gap: var(--s8); flex-wrap: wrap; }
.warnbanner {
  padding: var(--s16);
  background: color-mix(in srgb, var(--status-warn) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--status-warn) 35%, transparent);
  border-radius: var(--r-md);
}
.warnbanner p { margin: 0; font: var(--t-caption); color: var(--ink-muted); }
.warnbanner .wb-t { display: flex; align-items: center; gap: 6px; font-weight: 600; color: var(--status-warn); margin-bottom: var(--s8); }
.warnbanner svg { width: 14px; height: 14px; }

.dcards { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s12); }
.dcard {
  display: flex; align-items: center; gap: var(--s12); width: 100%;
  padding: var(--s16); text-align: left; cursor: pointer;
  background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-md);
  transition: background var(--m-snappy), border-color var(--m-snappy), transform var(--m-snappy);
}
.dcard:hover { background: var(--surface-raised); border-color: var(--hairline-strong); }
.dcard:active { transform: translateY(.5px); }
.dc-main { display: flex; flex-direction: column; gap: var(--s8); flex: 1 1 auto; min-width: 0; }
.dc-top { display: flex; align-items: baseline; gap: var(--s8); }
.dc-top b { font: var(--t-section); color: var(--ink); }
.dc-top .dim { font: var(--t-caption); }
.dcard:hover .dc-top b { color: var(--accent); }
.dc-chip {
  display: inline-flex; align-items: center; gap: var(--s4); flex: none;
  padding: var(--s4) var(--s8); border-radius: var(--r-full);
  background: var(--surface-2); font: var(--t-caption); color: var(--ink-muted);
}
.marker {
  align-self: flex-start;
  font: var(--t-eyebrow); letter-spacing: .06em; text-transform: none;
  padding: 2px var(--s8); border-radius: var(--r-full);
  background: color-mix(in srgb, var(--status-warn) 12%, transparent);
  color: var(--status-warn);
}

/* Stage rail (RunConsoleView.StageRail) */
.rail { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; position: relative; }
.rail::before {
  content: ""; position: absolute; left: 4px; right: 4px; top: 50%;
  height: 1px; background: var(--hairline);
}
.rail-compact { width: 220px; max-width: 100%; justify-content: space-between; height: 10px; }
.rail-compact i {
  width: 8px; height: 8px; border-radius: var(--r-full); display: block; position: relative;
  background: var(--bg); box-shadow: 0 0 0 1px var(--ink-faint) inset;
  transition: background var(--m-standard), box-shadow var(--m-standard);
}
.rail-compact i.done { background: var(--status-ok); box-shadow: none; }
.rail-compact i.part { background: var(--status-warn); box-shadow: none; }

.rail-full { justify-content: space-between; padding: 0 2px; overflow-x: auto; }
.rail-full::before { top: 21px; }
.rail-full li {
  display: flex; flex: 0 0 44px; min-width: 44px; min-height: 44px;
  flex-direction: column; justify-content: center; align-items: center; gap: 2px;
  position: relative; cursor: pointer; background: none; border: 0; padding: 0;
}
.rail-full li:hover .n { color: var(--ink); }
.rail-full .node {
  width: 15px; height: 15px; border-radius: var(--r-full);
  background: var(--bg); box-shadow: 0 0 0 1.6px var(--ink-faint) inset;
  display: block; position: relative;
  transition: background var(--m-standard), box-shadow var(--m-standard), transform var(--m-standard);
}
.rail-full .n { font-size: 9px; color: var(--ink-faint); transition: color var(--m-standard); }
.rail-full li.done .node { background: var(--status-ok); box-shadow: none; }
.rail-full li.done .node::after {
  content: ""; position: absolute; inset: 0;
  background: var(--surface);
  clip-path: polygon(20% 50%, 42% 72%, 80% 28%, 87% 36%, 42% 85%, 13% 57%);
}
.rail-full li.part .node { background: var(--status-warn); box-shadow: none; }
.rail-full li.part .node::after {
  content: ""; position: absolute; inset: 0; background: var(--surface);
  clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% 100%);
  opacity: .55;
}
.rail-full li.running .node { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); transform: scale(1.15); }
.rail-full li.running .n { color: var(--accent); font-weight: 700; }
.rail-full li.running .node { animation: nodepulse 1.1s ease-in-out infinite alternate; }
@keyframes nodepulse { from { box-shadow: 0 0 0 2px var(--accent-soft); } to { box-shadow: 0 0 0 6px var(--accent-soft); } }

/* ── Dossier detail ───────────────────────────────────────────────────── */

.dossier-head { display: flex; align-items: center; gap: var(--s12); flex-wrap: wrap; }
.backbtn svg { width: 15px; height: 15px; }
.dossier-subject { margin: 0; font: var(--t-title); color: var(--ink); }
.dossier-subject:focus-visible { outline-offset: 4px; }
.dossier-meta { margin: -12px 0 0; font-size: 11px; color: var(--ink-faint); }

.runcard {
  display: flex; flex-direction: column; gap: var(--s12);
  padding: var(--s16);
  background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-md);
}
.runrow { display: flex; align-items: center; gap: var(--s12); flex-wrap: wrap; }
.runstate { display: inline-flex; align-items: center; gap: 6px; margin: 0; font: var(--t-caption); color: var(--ink-muted); }
.runstate.working { color: var(--accent); }

.console {
  font-family: var(--font-mono); font-size: 11px; line-height: 1.65;
  background: var(--surface-2); border: 1px solid var(--hairline); border-radius: var(--r-sm);
  padding: var(--s8) var(--s12);
  max-height: 168px; overflow-y: auto;
  color: var(--ink-muted);
}
.console p { margin: 0; display: flex; gap: var(--s8); align-items: baseline; }
.console p + p { margin-top: 2px; }
.console .c-tag {
  flex: none; min-width: 52px;
  font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-faint);
}
.console .c-tag.ok { color: var(--status-ok); }
.console .c-tag.run { color: var(--accent); }
.console .c-tag.warn { color: var(--status-warn); }
.console .c-new { animation: linein var(--m-standard); }
@keyframes linein { from { opacity: 0; transform: translateY(3px); } }

/* Verdict scorecard */
.scorecard { display: flex; align-items: center; gap: var(--s24); flex-wrap: wrap; }
.dial { position: relative; width: 96px; height: 62px; flex: none; }
.dial svg { width: 96px; height: 60px; }
.dial path { fill: none; stroke-linecap: round; stroke-width: 8; }
.dial .d-track { stroke: var(--surface-2); }
/* pathLength="100" makes the dash pair read as a percentage of the arc.
   The authored 39 is conviction 61; JS rewrites the number, never a style
   attribute, so the gauge is correct before and after script. */
.dial .d-fill {
  stroke: var(--accent-fill);
  stroke-dasharray: 100;
  stroke-dashoffset: 39;
  transition: stroke-dashoffset var(--m-emphasized);
}
.dial b { position: absolute; left: 0; right: 0; bottom: 0; text-align: center; font-size: 20px; font-weight: 700; color: var(--ink); }
.dial-side p { margin: 0; }
.dial-side .warn { color: var(--status-warn); font-size: 11px; }
.dial-side .dim { font-size: 11px; }

.meters { display: flex; flex-direction: column; gap: var(--s8); min-width: 220px; }
.meterrow { display: flex; align-items: center; gap: var(--s8); margin: 0; }
.meterrow .eyebrow { min-width: 74px; }
.meter { position: relative; width: 92px; height: 5px; border-radius: 3px; background: var(--surface-2); overflow: hidden; flex: none; }
.meter i { display: block; height: 100%; width: var(--w, 0%); background: var(--ink-muted); border-radius: 3px; transition: width var(--m-emphasized); }
.meter .cap { position: absolute; top: 0; bottom: 0; left: var(--x, 0%); width: 1px; background: var(--bg); opacity: .9; }
.meterrow b { font-size: 12px; font-weight: 600; }

.chiprow { display: flex; gap: var(--s8); flex-wrap: wrap; }
.schip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px var(--s12); border-radius: var(--r-full);
  border: 1px solid; font-size: 11px;
}
.schip b { font-weight: 600; }
.schip.good { background: color-mix(in srgb, var(--long) 10%, transparent); border-color: color-mix(in srgb, var(--long) 25%, transparent); }
.schip.good b { color: var(--long); }
.schip.bad { background: color-mix(in srgb, var(--short) 10%, transparent); border-color: color-mix(in srgb, var(--short) 25%, transparent); }
.schip.bad b { color: var(--short); }

.hardflag { margin: 0; font: var(--t-caption); font-weight: 500; color: var(--status-bad); }
.qsplit {
  display: inline-flex; align-items: center; gap: var(--s8); align-self: flex-start;
  margin: 0; padding: var(--s4) var(--s12); border-radius: var(--r-full);
  background: var(--surface-2); font-size: 11px;
}

.pcgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--s16); }
.pc h4 { margin: 0 0 var(--s4); font: var(--t-caption); font-weight: 600; }
.pc.pros h4 { color: var(--status-ok); }
.pc.cons h4 { color: var(--status-bad); }
.pc.flags h4 { color: var(--status-bad); }
.pc ul { margin: 0; padding-left: 1.1em; display: flex; flex-direction: column; gap: var(--s4); }
.pc li { font: var(--t-body); color: var(--ink); }
.pc.pros li::marker { color: var(--status-ok); }
.pc.cons li::marker, .pc.flags li::marker { color: var(--status-bad); }

.bbb { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--s12); }
.bbb h4 { margin: 0 0 var(--s4); font: var(--t-caption); font-weight: 600; }
.bbb .bear { color: var(--status-bad); }
.bbb .base { color: var(--neutral); }
.bbb .bull { color: var(--status-ok); }
.bbb p { margin: 0; font: var(--t-body); color: var(--ink); }

/* Fair value band */
.fv { display: flex; flex-direction: column; gap: var(--s8); }
.fvbar { position: relative; height: 34px; }
.fv-band { position: absolute; inset: 0 0 auto 0; height: 14px; display: flex; border-radius: 4px; overflow: hidden; }
.fv-bear { width: var(--basepos, 50%); background: color-mix(in srgb, var(--short) 22%, transparent); }
.fv-bull { flex: 1 1 auto; background: color-mix(in srgb, var(--long) 18%, transparent); }
.fv-base { position: absolute; top: 0; height: 14px; width: 2px; background: var(--ink-muted); left: var(--basepos, 50%); }
.fv-mark { position: absolute; top: 0; left: var(--x, 50%); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 1px; }
.fv-mark i { width: 7px; height: 7px; border-radius: var(--r-full); margin-top: 3px; box-shadow: 0 0 0 1.5px var(--surface); }
.fv-mark em { font-style: normal; font-size: 9px; }
.fv-price i { background: var(--accent); }
.fv-price em { color: var(--accent); }
.fv-entry i { background: var(--staged); }
.fv-entry em { color: var(--staged); }
.fv-legend { display: flex; flex-wrap: wrap; gap: var(--s16); list-style: none; margin: 0; padding: 0; }
.fv-legend li { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--ink-muted); }
.fv-legend i { width: 6px; height: 6px; border-radius: var(--r-full); }
.c-bear { background: var(--short); }
.c-base { background: var(--ink-muted); }
.c-bull { background: var(--long); }

.valblocks { list-style: none; margin: 0; padding: 0; }
.valblocks li { display: flex; align-items: baseline; gap: var(--s8); flex-wrap: wrap; padding: var(--s8) 0; border-bottom: 1px solid var(--hairline); }
.valblocks li > span:first-child { font: var(--t-caption); font-weight: 600; color: var(--ink); flex: 1 1 auto; }
.valblocks b { font-size: 12px; font-weight: 500; }
.valblocks .abstain b { font-family: var(--font-display); font-weight: 400; font-size: 11px; color: var(--status-warn); }
.valblocks .needs { flex-basis: 100%; font-size: 10px; font-style: normal; color: var(--ink-faint); }

.auditlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s12); }
.auditlist li { padding-left: var(--s12); border-left: 2px solid var(--hairline); }
.auditlist li.sev-high { border-left-color: var(--status-bad); }
.auditlist li.sev-med { border-left-color: var(--status-warn); }
.auditlist li.sev-low { border-left-color: var(--ink-faint); }
.auditlist p { margin: 0; font: var(--t-body); color: var(--ink); }
.auditlist .a-cat { font: var(--t-eyebrow); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 2px; }
.auditlist li.sev-med .a-cat { color: var(--status-warn); }
.auditlist .paths { margin-top: var(--s4); font-size: 10px; color: var(--ink-faint); word-break: break-word; }

.rejected { border-color: color-mix(in srgb, var(--status-bad) 30%, transparent); }
.rejlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s8); }
.rejlist li { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s8); font: var(--t-caption); }
.rejlist .strike { color: var(--ink-faint); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--status-bad) 70%, transparent); }
.rejlist .bad { color: var(--status-bad); font-weight: 500; }

/* ── Stages accordion + evidence ledger ───────────────────────────────── */

.stages { display: flex; flex-direction: column; gap: var(--s8); }
.stage { border-bottom: 1px solid var(--hairline); }
.stage > summary {
  display: flex; align-items: center; gap: var(--s8);
  padding: var(--s8); cursor: pointer; list-style: none;
  border-radius: var(--r-sm);
  transition: background var(--m-snappy), color var(--m-snappy);
}
.stage > summary::-webkit-details-marker { display: none; }
.stage > summary::after {
  content: ""; width: 7px; height: 7px; flex: none;
  border-right: 1.6px solid var(--ink-faint); border-bottom: 1.6px solid var(--ink-faint);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--m-standard);
}
.stage[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.stage > summary:hover { background: var(--surface); }
.stage[open] > summary { background: var(--accent-soft); }
.stage[open] > summary .st-name { color: var(--accent); }
.st-glyph {
  width: 14px; height: 14px; border-radius: var(--r-full); flex: none; position: relative;
  box-shadow: 0 0 0 1.6px var(--ink-faint) inset;
}
.st-glyph.done { background: var(--status-ok); box-shadow: none; }
.st-glyph.done::after {
  content: ""; position: absolute; inset: 0; background: var(--bg);
  clip-path: polygon(20% 50%, 42% 72%, 80% 28%, 87% 36%, 42% 85%, 13% 57%);
}
.st-glyph.part { background: var(--status-warn); box-shadow: none; }
.st-glyph.part::after { content: ""; position: absolute; inset: 0; background: var(--bg); clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% 100%); }
.st-name { flex: 1 1 auto; font: var(--t-body); color: var(--ink); }
.st-cov { font-size: 11px; color: var(--ink-faint); }

.st-body { display: flex; flex-direction: column; gap: var(--s12); padding: var(--s12) var(--s8) var(--s16) 30px; }
.narr { margin: 0; font: var(--t-body); color: var(--ink); max-width: 78ch; }
.bullets { margin: 0; padding-left: 1.1em; display: flex; flex-direction: column; gap: var(--s4); }
.bullets li { font: var(--t-body); color: var(--ink); }
.gap {
  margin: 0; font: var(--t-caption); color: var(--status-warn);
  padding: var(--s8) var(--s12); border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--status-warn) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--status-warn) 28%, transparent);
}
.partial { margin: 0; font: var(--t-caption); font-weight: 600; color: var(--status-warn); }
.forces { display: flex; flex-wrap: wrap; gap: var(--s12); }
.forces span { display: flex; flex-direction: column; gap: 2px; }
.forces em { font: var(--t-eyebrow); letter-spacing: .1em; text-transform: uppercase; font-style: normal; color: var(--ink-faint); }
.forces b { font: var(--t-caption); font-weight: 500; color: var(--ink); padding: 2px var(--s8); border-radius: var(--r-full); background: var(--surface-2); }

/* The receipt mechanism — the product's whole thesis. Make it good to click. */
.ledger { display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--hairline); padding-top: var(--s8); }
.ledger-head {
  display: flex; align-items: baseline; gap: var(--s8); flex-wrap: wrap;
  font: var(--t-eyebrow); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint);
  margin-bottom: var(--s4);
}
.ledger-head .count { font-family: var(--font-mono); letter-spacing: 0; color: var(--ink-muted); }

.cite { border-bottom: 1px solid var(--hairline); }
.cite:last-child { border-bottom: 0; }
.cite > summary {
  display: flex; align-items: center; gap: var(--s8); flex-wrap: wrap;
  padding: var(--s8) var(--s8) var(--s8) var(--s4);
  cursor: pointer; list-style: none; border-radius: var(--r-sm);
  transition: background var(--m-snappy);
}
.cite > summary::-webkit-details-marker { display: none; }
.cite > summary:hover { background: var(--surface); }
.cite[open] > summary { background: var(--surface); }
.cite-n {
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  color: var(--accent); flex: none; min-width: 30px;
}
.cite-claim { flex: 1 1 220px; min-width: 0; font: var(--t-body); color: var(--ink); }
.cite-host { font-family: var(--font-mono); font-size: 10px; color: var(--ink-faint); }
.cite-state {
  flex: none; display: inline-flex; align-items: center; gap: 4px;
  font: var(--t-eyebrow); letter-spacing: .06em; text-transform: uppercase;
  padding: 2px var(--s8); border-radius: var(--r-full);
}
.cite-state.supported { color: var(--status-ok); background: color-mix(in srgb, var(--long) 12%, transparent); }
.cite-state.stored { color: var(--ink-muted); background: var(--surface-2); }
.cite-state.unverifiable { color: var(--status-warn); background: color-mix(in srgb, var(--status-warn) 12%, transparent); }
.cite-state.rejected { color: var(--status-bad); background: color-mix(in srgb, var(--short) 12%, transparent); }
.receipt.rejected { border-left-color: var(--status-bad); }
.cite > summary::after {
  content: "+"; width: 14px; text-align: center; flex: none;
  font-family: var(--font-mono); font-size: 13px; color: var(--ink-faint);
  transition: transform var(--m-standard);
}
.cite[open] > summary::after { content: "−"; }

/* The receipt itself: a slip printed from under the machine. */
.receipt {
  margin: 0 var(--s4) var(--s12) 34px;
  padding: var(--s12);
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-left: 2px solid var(--accent);
  border-radius: var(--r-sm);
  display: grid; gap: var(--s4);
  animation: slipdown var(--m-standard);
}
@keyframes slipdown { from { opacity: 0; transform: translateY(-4px); } }
.receipt dl { display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 3px var(--s12); margin: 0; }
.receipt dt {
  font: var(--t-eyebrow); letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-faint); padding-top: 2px;
}
.receipt dd { margin: 0; font-family: var(--font-mono); font-size: 11px; color: var(--ink-muted); word-break: break-all; }
.receipt dd.hash { color: var(--ink); letter-spacing: -.02em; }
.receipt .snip {
  margin: var(--s4) 0 0; padding: var(--s8) var(--s12);
  background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-xs);
  font: var(--t-body); color: var(--ink); font-style: italic;
}
.receipt .snip mark {
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  color: inherit; padding: 0 2px; border-radius: 2px; font-style: normal; font-weight: 600;
}
.receipt .verdictline {
  display: flex; align-items: center; gap: 6px; margin: var(--s4) 0 0;
  font: var(--t-caption); color: var(--status-ok);
}
.receipt .verdictline.warn { color: var(--status-warn); }
.receipt .verdictline svg { width: 13px; height: 13px; }
.receipt .copy {
  justify-self: start; margin-top: var(--s4);
  padding: 3px var(--s8); font: var(--t-eyebrow); letter-spacing: .06em; text-transform: uppercase;
  background: var(--surface); color: var(--ink-muted);
  border: 1px solid var(--hairline); border-radius: var(--r-xs); cursor: pointer;
  transition: color var(--m-snappy), border-color var(--m-snappy);
}
.receipt .copy:hover { color: var(--accent); border-color: var(--accent); }

/* ── IPO list ─────────────────────────────────────────────────────────── */

.ipolist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s12); }
.ipolist li { margin: 0; padding: 0; }
.ipocard {
  display: flex; flex-direction: column; gap: var(--s12); align-items: stretch;
  width: 100%; text-align: left; cursor: pointer;
  padding: var(--s16); background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-md);
  transition: background var(--m-snappy), border-color var(--m-snappy);
}
.ipocard:hover { background: var(--surface-raised); border-color: var(--hairline-strong); }
.ipocard:hover .ipo-h b { color: var(--accent); }
.ipocard .metrics { display: flex; flex-wrap: wrap; gap: var(--s24); }
.ipocard .metrics > span { display: flex; flex-direction: column; gap: 2px; min-width: 84px; }
.ipocard .metrics .mono { font: var(--t-mono); font-weight: 600; color: var(--ink); }
.ipo-h { display: flex; align-items: baseline; gap: var(--s12); flex-wrap: wrap; }
.ipo-h b { font: var(--t-section); color: var(--ink); }
.ipo-chip { font: var(--t-caption); padding: 2px var(--s8); border-radius: var(--r-full); }
.ipo-chip.open { background: color-mix(in srgb, var(--long) 12%, transparent); color: var(--long); }
.ipo-chip.soon { background: var(--surface-2); color: var(--ink-muted); }
.ipo-chip.closed { background: var(--surface-2); color: var(--ink-faint); }

/* ── System audit ─────────────────────────────────────────────────────── */

.mosplit { display: flex; gap: var(--s24); flex-wrap: wrap; }
.mosplit p { margin: 0; }
.mosplit p + p { font: var(--t-body); color: var(--ink); margin-top: 2px; }
.sep { margin: 0; font: var(--t-caption); }
.sep.up { color: var(--status-ok); }
.checklist { list-style: none; margin: 0; padding: 0; }
.checklist li {
  display: flex; align-items: baseline; gap: var(--s8);
  padding: var(--s4) 0; border-bottom: 1px solid color-mix(in srgb, var(--hairline) 60%, transparent);
  font: var(--t-caption); color: var(--ink);
}
.checklist li::before { content: ""; width: 12px; height: 12px; border-radius: var(--r-full); flex: none; align-self: center; }
.checklist li.yes::before { background: var(--status-ok); }
.checklist li.no::before { background: var(--status-bad); }
.checklist li.na::before { background: var(--ink-faint); opacity: .5; }
.checklist li.na { color: var(--ink-muted); text-decoration: line-through; text-decoration-color: var(--hairline-strong); }
.checklist .mono { color: var(--ink-faint); min-width: 26px; font-size: 10px; }
.checklist .phase { margin-left: auto; font: var(--t-eyebrow); letter-spacing: .06em; text-transform: uppercase; color: var(--status-warn); }
.checklist .na-tag { margin-left: auto; font: var(--t-eyebrow); color: var(--ink-faint); }

/* ── News ─────────────────────────────────────────────────────────────── */

.livemod { display: inline-flex; align-items: center; gap: var(--s8); }
.livepill {
  display: inline-flex; align-items: center; gap: var(--s4);
  padding: var(--s4) var(--s8); border-radius: var(--r-full);
  background: var(--surface); border: 1px solid var(--hairline);
}
.livepill b { font: var(--t-eyebrow); letter-spacing: .12em; color: var(--status-ok); }
#news-clock { font-size: 11px; }

.newstabs { display: flex; align-items: center; gap: var(--s12); flex-wrap: wrap; }
.srcline { margin: 0; font: var(--t-caption); color: var(--ink-muted); }

.covstrip {
  display: flex; align-items: center; gap: var(--s16); flex-wrap: wrap;
  padding: var(--s8) var(--s12);
  background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-sm);
}
.cov-sum { margin: 0; font: var(--t-caption); color: var(--ink-muted); }
.freshcells { display: flex; gap: var(--s8); flex-wrap: wrap; }
.freshcells span { display: inline-flex; align-items: center; gap: var(--s4); font-size: 9px; font-weight: 500; color: var(--ink-muted); }
.freshcells i { display: block; width: 14px; height: 3px; border-radius: 2px; }
.freshcells i::before { content: ""; display: block; height: 100%; width: var(--w, 0%); min-width: 2px; border-radius: 2px; background: currentColor; }
.f1 { color: var(--ink); background: var(--surface-2); }
.f2 { color: var(--ink-muted); background: var(--surface-2); }
.f3 { color: var(--ink-faint); background: var(--surface-2); }
.f4 { color: var(--ink-faint); background: var(--surface-2); }
.srcdots { display: flex; gap: var(--s8); flex-wrap: wrap; margin-left: auto; }
.srcdots span { display: inline-flex; align-items: center; gap: var(--s4); font-size: 9px; font-weight: 500; color: var(--ink-muted); }
.srcdots em { font-style: normal; color: var(--status-bad); }

.newsbanner {
  display: flex; align-items: center; gap: var(--s8); flex-wrap: wrap;
  padding: var(--s8) var(--s12); border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--status-bad) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--status-bad) 25%, transparent);
}
.newsbanner.warn { background: color-mix(in srgb, var(--status-warn) 7%, transparent); border-color: color-mix(in srgb, var(--status-warn) 25%, transparent); }
.newsbanner svg { width: 15px; height: 15px; color: var(--status-bad); flex: none; }
.newsbanner.warn svg { color: var(--status-warn); }
.newsbanner p { margin: 0; flex: 1 1 240px; font: var(--t-caption); color: var(--ink); }

.signals { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--s12); }
.sig { padding: var(--s12); background: var(--surface-2); border: 1px solid var(--hairline); border-radius: var(--r-sm); display: flex; flex-wrap: wrap; gap: var(--s4); align-content: flex-start; }
.sig .eyebrow { flex-basis: 100%; display: flex; align-items: center; gap: var(--s4); margin-bottom: var(--s4); }
.sig .eyebrow svg { width: 10px; height: 10px; stroke-width: 2.6; }
.sig.cat  .eyebrow svg { color: var(--long); }
.sig.risk .eyebrow svg { color: var(--short); }
.sig.mix  .eyebrow svg { color: var(--staged); }
.term { display: inline-flex; align-items: center; gap: 3px; padding: 2px var(--s8); border-radius: var(--r-full); background: var(--surface); border: 1px solid var(--hairline); font: var(--t-caption); color: var(--ink); }
.term em { font-style: normal; font-size: 9px; color: var(--ink-faint); }

.themes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s8); }
.themes li { display: flex; gap: var(--s8); }
.themes p { margin: 0; font: var(--t-body); color: var(--ink); }
.themes p.dim { font: var(--t-caption); color: var(--ink-muted); }
.fchip {
  flex: none; display: grid; place-items: center; width: 16px; height: 16px; margin-top: 2px;
  border-radius: 3px; background: var(--surface-raised);
  font-size: 9px; font-weight: 700; color: var(--ink-muted);
}

.headlines { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--s12); }
.ncard {
  display: flex; flex-direction: column; align-items: stretch;
  width: 100%; text-align: left; cursor: pointer; padding: 0;
  background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-md);
  overflow: hidden; color: inherit;
  transition: border-color var(--m-snappy), transform var(--m-snappy);
}
.ncard:hover { border-color: var(--hairline-strong); transform: translateY(-1px); }
.ncard[hidden] { display: none !important; }
/* No external images: the CSP forbids them, and the app's own imageless feeds
   already fall back to this monogram band rather than a broken-image hole. */
.mono-band {
  position: relative; height: 96px; display: flex; align-items: center; gap: var(--s12);
  padding: 0 var(--s16); background: var(--surface-2);
}
.mono-band b { font: 800 40px/1 var(--font-display); color: color-mix(in srgb, var(--ink-faint) 50%, transparent); }
.mono-band > span { font: var(--t-eyebrow); letter-spacing: .16em; color: var(--ink-muted); }
.mono-band .src {
  position: absolute; left: var(--s12); bottom: var(--s8);
  font: var(--t-eyebrow); font-style: normal; letter-spacing: .08em; text-transform: uppercase;
  padding: 2px var(--s8); border-radius: var(--r-full);
  background: var(--surface); border: 1px solid var(--hairline); color: var(--ink-muted);
}
.nc-b { padding: var(--s12); display: flex; flex-direction: column; gap: var(--s8); }
.nc-b h3, .nc-h { margin: 0; font: 600 14px/1.35 var(--font-display); color: var(--ink); }
.nc-b p, .nc-p { margin: 0; font: 400 12px/1.5 var(--font-display); color: var(--ink-muted); }
.news-filters { margin-top: calc(var(--s8) * -1); }
.chip-btn[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); border-color: color-mix(in srgb, var(--accent) 35%, transparent); }
.nc-m { display: flex; align-items: center; gap: var(--s4); font-size: 10px; color: var(--ink-faint); }
.nc-k { display: flex; gap: var(--s4); flex-wrap: wrap; }
.nc-k span { font: var(--t-eyebrow); letter-spacing: .06em; padding: 2px 6px; border-radius: var(--r-xs); background: var(--surface-2); color: var(--ink-faint); }

.empty {
  display: flex; flex-direction: column; align-items: center; gap: var(--s8);
  text-align: center; padding: var(--s32) var(--s24);
  background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-lg);
}
.empty svg { width: 28px; height: 28px; color: var(--ink-faint); }
.empty h3 { margin: 0; font: var(--t-section); color: var(--ink); }
.empty p { margin: 0; max-width: 46ch; font: var(--t-body); color: var(--ink-muted); }

/* ── Chat ─────────────────────────────────────────────────────────────── */

.chatpane { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.chat-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.chat-foot { flex: none; border-top: 1px solid var(--hairline); background: var(--bg); }
.chat-foot .col { padding-block: var(--s16); display: flex; flex-direction: column; gap: 10px; }

/* The app anchors a non-empty transcript to the bottom, so reopening chat
   lands on the latest turn rather than the top of a 200-turn history. */
.chat-scroll > .col { min-height: 100%; display: flex; flex-direction: column; justify-content: flex-end; }
.transcript { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.turn { display: flex; flex-direction: column; gap: var(--s4); }
.turn .bub { margin: 0; }
.stamp { font-size: 10px; color: var(--ink-faint); }

.t-user { align-items: flex-end; }
.t-user .bub {
  max-width: min(90%, 62ch);
  padding: 10px 14px; border-radius: var(--r-sm);
  background: var(--accent-fill); color: var(--on-accent);
  font: var(--t-body);
}
.t-assistant { flex-direction: row; align-items: flex-start; gap: var(--s8); }
.t-assistant > div { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: var(--s4); }
.t-assistant .bub {
  max-width: 78ch;
  padding: 10px 14px; border-radius: var(--r-sm);
  background: var(--surface); border: 1px solid var(--hairline);
  display: flex; flex-direction: column; gap: var(--s8);
}
.t-assistant .bub p { margin: 0; font: var(--t-body); color: var(--ink); }
.t-assistant .stamp { padding-left: var(--s4); }
.avatar {
  flex: none; display: grid; place-items: center; width: 26px; height: 26px;
  border-radius: var(--r-full); background: var(--surface); border: 1px solid var(--hairline);
  font: 700 12px/1 var(--font-display); color: var(--ink-muted);
}
.t-system .bub {
  display: flex; align-items: flex-start; gap: var(--s8);
  padding: 9px 12px; border-radius: var(--r-sm);
  background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
}
.t-system svg { width: 14px; height: 14px; color: var(--accent); flex: none; margin-top: 1px; }
.t-system p { margin: 0; font: var(--t-caption); color: var(--ink-muted); }
.t-error .bub {
  display: flex; gap: var(--s8); padding: var(--s12);
  background: var(--surface); border: 1px solid var(--hairline-strong); border-radius: var(--r-sm);
}

.typing .bub { display: inline-flex; gap: 5px; padding: 14px; }
.typing i { width: 6px; height: 6px; border-radius: var(--r-full); background: var(--ink-faint); animation: blink 1.2s ease-in-out infinite; }
.typing i:nth-child(2) { animation-delay: .18s; }
.typing i:nth-child(3) { animation-delay: .36s; }
@keyframes blink { 0%, 60%, 100% { opacity: .35; } 30% { opacity: 1; } }

/* The composer's honest closed state — one sentence, never a fake answer. */
.chat-offline {
  margin: 0; font: var(--t-caption); color: var(--ink);
  padding: var(--s8) var(--s12); border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--status-warn) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--status-warn) 40%, transparent);
}

.ctxmeter { display: flex; align-items: center; gap: var(--s8); flex-wrap: wrap; }
.ctx-bar { flex: 1 1 120px; max-width: 260px; height: 5px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
.ctx-bar i { display: block; height: 100%; width: var(--w, 0%); background: var(--accent); border-radius: 3px; transition: width var(--m-standard); }
.ctx-num { font-size: 10px; color: var(--ink-faint); }
.ctx-note { font: var(--t-eyebrow); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); }
.ctxmeter .btn { margin-left: auto; }

.composer { display: flex; align-items: flex-end; gap: var(--s12); }
.input-surface {
  flex: 1 1 auto; display: flex; align-items: center; gap: 10px;
  padding: 11px 14px; border-radius: var(--r-sm);
  background: var(--surface); border: 1px solid var(--hairline);
  transition: border-color var(--m-snappy), box-shadow var(--m-snappy);
}
.input-surface:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.input-surface input {
  flex: 1 1 auto; min-width: 0;
  background: none; border: 0; outline: none;
  font: var(--t-body); color: var(--ink);
}
.input-surface input::placeholder { color: var(--ink-faint); }
.clearfield { background: none; border: 0; padding: 0; color: var(--ink-faint); cursor: pointer; display: grid; place-items: center; }
.clearfield svg { width: 15px; height: 15px; }
.clearfield:hover { color: var(--ink); }
.sendbtn {
  flex: none; width: 30px; height: 30px; padding: 0; display: grid; place-items: center;
  background: none; border: 0; cursor: pointer; color: var(--accent);
  transition: color var(--m-snappy), transform var(--m-snappy);
}
.sendbtn svg { width: 26px; height: 26px; stroke-width: 1.5; }
.sendbtn[disabled] { color: var(--ink-faint); opacity: .5; cursor: default; }
.sendbtn:hover:not([disabled]) { transform: translateY(-1px); }

.chips { display: flex; gap: var(--s8); flex-wrap: wrap; }
.chip-btn {
  padding: 6px 10px; border-radius: var(--r-full);
  background: var(--surface); border: 1px solid var(--hairline);
  font: var(--t-caption); color: var(--ink-muted); cursor: pointer;
  transition: background var(--m-snappy), color var(--m-snappy), border-color var(--m-snappy);
}
.chip-btn:hover { background: var(--surface-raised); color: var(--ink); border-color: var(--hairline-strong); }

/* ── Settings ─────────────────────────────────────────────────────────── */

.statusstrip { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--s8); }
.stile {
  display: flex; flex-direction: column; gap: 2px; align-items: flex-start;
  padding: var(--s12); text-align: left; cursor: pointer;
  background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-md);
  transition: background var(--m-snappy), border-color var(--m-snappy);
}
.stile:hover { background: var(--surface-raised); border-color: var(--hairline-strong); }
.stile .sv { font: var(--t-mono); font-weight: 600; color: var(--ink); }
.stile .sv.ok { color: var(--status-ok); }

.srow { display: flex; align-items: flex-start; gap: var(--s12); padding: var(--s8) 0; border-bottom: 1px solid var(--hairline); }
.srow:last-of-type { border-bottom: 0; }
.srow > .dot { margin-top: 5px; }
.srow > div { flex: 1 1 auto; min-width: 0; }
.srow b { font: 600 13px/1.4 var(--font-display); color: var(--ink); }
.srow p { margin: 1px 0 0; font: var(--t-caption); }

.tag {
  font: var(--t-eyebrow); letter-spacing: .08em; text-transform: uppercase;
  padding: 1px var(--s8); border-radius: var(--r-xs);
  background: var(--surface-2); color: var(--ink-faint); border: 1px solid var(--hairline);
}
.tag.ro { color: var(--status-ok); border-color: color-mix(in srgb, var(--long) 35%, transparent); }
.tag.paused { color: var(--status-warn); border-color: color-mix(in srgb, var(--status-warn) 35%, transparent); }
.tag.none { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 35%, transparent); }

.modellist, .provlist, .secrets { list-style: none; margin: 0; padding: 0; }
.modellist li, .provlist li {
  display: flex; align-items: center; gap: var(--s12);
  padding: var(--s8) 0; border-bottom: 1px solid var(--hairline);
}
.modellist li:last-child, .provlist li:last-child { border-bottom: 0; }
.modellist li > div, .provlist li > div { flex: 1 1 auto; min-width: 0; }
.modellist b, .provlist b { font: 600 13px/1.4 var(--font-display); color: var(--ink); }
.modellist p, .provlist p { margin: 1px 0 0; font: var(--t-caption); }
.modellist li.active { background: var(--accent-soft); border-radius: var(--r-sm); padding-inline: var(--s8); }
.provlist .mono { font-size: 12px; color: var(--ink-muted); }
.provlist .dim { font: var(--t-caption); }

.secret { display: flex; align-items: flex-start; gap: var(--s12); padding: var(--s12) 0; border-bottom: 1px solid var(--hairline); }
.secret:last-child { border-bottom: 0; }
.secret > .dot { margin-top: 5px; }
.s-main { flex: 1 1 auto; min-width: 0; }
.s-title { display: flex; align-items: center; gap: var(--s8); flex-wrap: wrap; margin: 0; }
.s-title b { font: 600 13px/1.4 var(--font-display); color: var(--ink); }
.s-fp { margin: 2px 0 0; font-size: 11px; color: var(--ink-muted); word-break: break-all; }
.s-fp.dim { font-family: var(--font-display); }
.s-fp.revealed { color: var(--ink); }
.s-note { margin: var(--s4) 0 0; font: var(--t-caption); color: var(--status-warn); }
.s-ctl { display: flex; align-items: center; gap: var(--s8); flex: none; }
.s-nokey { font: var(--t-caption); }

.switch { position: relative; display: inline-block; width: 44px; height: 44px; flex: none; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.switch span[aria-hidden] {
  position: absolute; left: 6px; top: 13px; width: 32px; height: 18px; border-radius: var(--r-full);
  background: var(--surface-2); border: 1px solid var(--hairline);
  transition: background var(--m-snappy), border-color var(--m-snappy);
  pointer-events: none;
}
.switch span[aria-hidden]::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px;
  border-radius: var(--r-full); background: var(--ink-faint);
  transition: transform var(--m-snappy), background var(--m-snappy);
}
.switch input:checked + span[aria-hidden] { background: var(--accent-soft); border-color: var(--accent); }
.switch input:checked + span[aria-hidden]::after { transform: translateX(14px); background: var(--accent); }
.switch input:focus-visible + span[aria-hidden] { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

.prefrow { display: flex; align-items: center; gap: var(--s16); padding: var(--s8) 0; border-bottom: 1px solid var(--hairline); flex-wrap: wrap; }
.prefrow:last-of-type { border-bottom: 0; }
.prefrow > div { flex: 1 1 260px; }
.prefrow b { font: 600 13px/1.4 var(--font-display); color: var(--ink); }
.prefrow p { margin: 1px 0 0; font: var(--t-caption); }

/* ── Command palette ──────────────────────────────────────────────────── */

.scrim {
  position: fixed; inset: 0; z-index: 60;
  display: grid; place-items: start center;
  padding-top: 14vh;
  background: rgb(0 0 0 / .45);
  animation: fadein var(--m-snappy);
}
@keyframes fadein { from { opacity: 0; } }
.palette {
  width: min(560px, calc(100vw - var(--s32)));
  max-height: 420px; display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: var(--r-lg); overflow: hidden;
  box-shadow: 0 8px 24px rgb(0 0 0 / .35);
  animation: palin var(--m-emphasized);
}
@keyframes palin { from { opacity: 0; transform: translateY(-8px) scale(.985); } }
.pal-search { display: flex; align-items: center; gap: 10px; padding: var(--s16); border-bottom: 1px solid var(--hairline); }
.pal-search svg { width: 16px; height: 16px; color: var(--ink-faint); flex: none; }
.pal-search input { flex: 1 1 auto; min-width: 0; background: none; border: 0; outline: none; font: var(--t-section); color: var(--ink); }
.pal-search input::placeholder { color: var(--ink-faint); font-weight: 400; }
.pal-search kbd {
  font-family: var(--font-mono); font-size: 10px; color: var(--ink-faint);
  padding: 2px 6px; border-radius: var(--r-xs); background: var(--surface-raised);
}
.pal-list { list-style: none; margin: 0; padding: 0; overflow-y: auto; }
.pal-row {
  display: flex; align-items: center; gap: var(--s12);
  padding: 9px var(--s16); cursor: pointer;
}
.pal-row svg { width: 16px; height: 16px; color: var(--ink-muted); flex: none; }
.pal-row .pr-t { flex: 1 1 auto; min-width: 0; }
.pal-row b { display: block; font: 400 14px/1.35 var(--font-display); color: var(--ink); }
.pal-row small { display: block; font: var(--t-eyebrow); letter-spacing: .06em; text-transform: none; color: var(--ink-faint); }
.pal-row kbd { font-family: var(--font-mono); font-size: 10px; color: var(--ink-faint); }
.pal-row[aria-selected="true"] { background: var(--accent-soft); }
.pal-row[aria-selected="true"] svg { color: var(--ink); }
.pal-empty { padding: 28px var(--s16); text-align: center; font: var(--t-body); color: var(--ink-faint); }

/* ── Sheets (CSV, chart, IPO, news, picker) ───────────────────────────── */

.sheet {
  width: min(720px, calc(100vw - var(--s32)));
  max-height: min(86vh, 780px);
  display: flex; flex-direction: column;
  background: var(--bg);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  overflow: hidden;
  animation: palin var(--m-emphasized);
}
.sheet.wide { width: min(880px, calc(100vw - var(--s24))); }
.sheet-head {
  display: flex; align-items: center; gap: var(--s12);
  padding: var(--s16) var(--s20);
  border-bottom: 1px solid var(--hairline);
  flex: none;
}
.sheet-head h2 { margin: 0; flex: 1 1 auto; font: var(--t-title); color: var(--ink); }
.sheet-body {
  overflow-y: auto; padding: var(--s20);
  display: flex; flex-direction: column; gap: var(--s16);
}
.sheet-foot {
  display: flex; justify-content: flex-end; gap: var(--s8);
  padding-top: var(--s8); border-top: 1px solid var(--hairline);
}

.csv-sample {
  font: var(--t-mono); font-size: 11px; line-height: 1.65;
  padding: var(--s12); margin: 0;
  background: var(--surface-2); border: 1px solid var(--hairline); border-radius: var(--r-sm);
  color: var(--ink-muted); overflow-x: auto; white-space: pre;
}

.chart-hero { display: flex; align-items: baseline; gap: var(--s12); flex-wrap: wrap; }
.chart-hero .lvl { font-size: 28px; font-weight: 600; color: var(--ink); }
.chart-ranges { display: flex; gap: var(--s4); flex-wrap: wrap; }
.chart-svg { width: 100%; height: 240px; display: block; background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-sm); }
.chart-svg .c-area { stroke: none; }
.chart-svg .c-line { fill: none; stroke-width: 1.8; vector-effect: non-scaling-stroke; }
.chart-svg.up .c-line { stroke: var(--long); }
.chart-svg.up .c-area { fill: color-mix(in srgb, var(--long) 14%, transparent); }
.chart-svg.down .c-line { stroke: var(--short); }
.chart-svg.down .c-area { fill: color-mix(in srgb, var(--short) 14%, transparent); }
.chart-meta { display: flex; flex-wrap: wrap; gap: var(--s12); font: var(--t-caption); color: var(--ink-faint); }

.ipo-stages { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--s8); }
.ipo-st {
  display: flex; align-items: flex-start; gap: var(--s8);
  padding: var(--s8); background: var(--surface-2); border-radius: var(--r-sm);
}
.ipo-st .st-glyph { margin-top: 2px; }
.ipo-st b { display: block; font: var(--t-caption); font-weight: 600; color: var(--ink); }
.ipo-st span { font: var(--t-caption); color: var(--ink-faint); }

.pick-list { list-style: none; margin: 0; padding: 0; }
.pick-list li { margin: 0; }
.pick-row {
  display: flex; align-items: center; gap: var(--s12); width: 100%;
  padding: var(--s12); text-align: left; cursor: pointer;
  background: none; border: 0; border-bottom: 1px solid var(--hairline);
  color: inherit;
}
.pick-row:hover { background: var(--surface); }
.pick-row b { font: 600 13px/1.3 var(--font-display); color: var(--ink); }
.pick-row small { display: block; font: var(--t-caption); color: var(--ink-faint); }
.pick-row .spacer { flex: 1 1 auto; }

.size-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--s12); }
.size-form label { display: flex; flex-direction: column; gap: 4px; font: var(--t-caption); color: var(--ink-muted); }
.size-form input {
  padding: 7px var(--s8); font: var(--t-mono);
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--hairline); border-radius: var(--r-sm);
}
.size-form input:focus { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
.size-out { padding: var(--s12); background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-sm); }

.story-kicker { font: var(--t-eyebrow); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); margin: 0; }
.story-lede { margin: 0; font: var(--t-body); color: var(--ink); max-width: 68ch; }
.story-body { margin: 0; font: var(--t-body); color: var(--ink-muted); max-width: 68ch; }

.empty-dossier {
  display: flex; flex-direction: column; gap: var(--s12);
  padding: var(--s24); text-align: center; align-items: center;
  background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-md);
}
.empty-dossier h3 { margin: 0; font: var(--t-section); color: var(--ink); }
.empty-dossier p { margin: 0; max-width: 52ch; font: var(--t-body); color: var(--ink-muted); }

.filed-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; }
.filed-list li {
  display: flex; align-items: baseline; gap: var(--s8);
  padding: var(--s8) 0; border-bottom: 1px solid var(--hairline);
  font: var(--t-body); color: var(--ink);
}
.filed-list .st-cov { margin-left: auto; }

/* ── Voice panel — compact, bottom-trailing, NEVER modal ─────────────── */

.voice-panel {
  position: absolute; right: var(--s20); bottom: var(--s20); z-index: 18;
  width: min(340px, calc(100% - var(--s32)));
  padding: 14px;
  display: flex; flex-direction: column; gap: 10px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  pointer-events: auto;
}
.vp-head { display: flex; align-items: center; gap: var(--s8); }
.vp-head p { margin: 0; flex: 1 1 auto; font-size: 11px; color: var(--ink-muted); }
.vp-copy { margin: 0; font: var(--t-caption); color: var(--ink); }
.vp-copy.dim { color: var(--ink-faint); }
.vp-caption {
  max-height: 168px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 6px;
  padding: var(--s8) 10px; border-radius: var(--r-sm);
  background: var(--surface-2); border: 1px solid var(--hairline);
}
.vp-caption p { margin: 0; font: var(--t-caption); color: var(--ink); }
.vp-caption p.vc-you { color: var(--ink-muted); }
.vp-caption p.vc-you::before { content: "you · "; color: var(--ink-faint); }
.vp-caption p.vc-agent::before { content: "algo · "; color: var(--ink-faint); }
.vp-caption p.vc-partial { color: var(--ink-faint); font-style: italic; }
.vp-caption p.vc-prov { color: var(--ink-faint); font-size: 10px; }

/* ── Page foot ────────────────────────────────────────────────────────── */

.stage-foot {
  max-width: 78ch; margin: var(--s20) auto 0; padding: 0 var(--s8) var(--s8);
  text-align: center; font: var(--t-caption); color: var(--ink-faint);
}

/* ── Compact app shell ──────────────────────────────────────────────────
   The same surfaces fill the available viewport, with a persistent bottom
   navigation and one scrolling reading pane. This also bounds the iframe:
   allowing its content to overflow would clip everything below the fold. */

@media (max-width: 900px) {
  :root {
    --t-body: 400 16px/1.55 var(--font-display);
    --t-card: 500 14px/1.4 var(--font-display);
    --t-caption: 500 12px/1.5 var(--font-display);
    --t-section: 600 17px/1.3 var(--font-display);
    --t-mono: 500 14px/1.5 var(--font-mono);
  }
  html.demo-ready:not(.embed) body { height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
  .topbar { flex: none; padding: 8px max(16px, env(safe-area-inset-right)) 8px max(16px, env(safe-area-inset-left)); gap: 12px; }
  .topbar-tools { margin-left: auto; }
  .stage-wrap { padding: 0; min-height: 0; width: 100%; flex: 1; }
  .win {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    grid-template-areas: "detail" "navigation";
    height: 100%; min-height: 0; border: 0; border-radius: 0;
  }
  .win-detail { grid-area: detail; min-height: 0; }
  .win-side {
    grid-area: navigation; display: flex; flex-direction: row; align-items: center;
    gap: 4px; padding: 6px max(8px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
    border-right: 0; border-top: 1px solid var(--hairline); z-index: 20;
  }
  .lights, .side-brand { display: none; }
  .navlist { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); padding: 0; gap: 2px; min-width: 0; overflow: visible; }
  .navrow { flex-direction: column; justify-content: center; gap: 4px; min-width: 0; min-height: 52px; padding: 6px 2px; text-align: center; }
  .navrow svg { width: 19px; height: 19px; }
  .navrow span { flex: none; font-size: 11px; line-height: 1.2; }
  .navrow kbd { display: none; }
  .side-foot { border: 0; padding: 0; flex: none; }
  .side-foot .conn, .side-foot .ver { display: none; }
  .voice { width: 44px; height: 52px; border: 0; gap: 4px; align-content: center; }
  .voice svg { width: 19px; height: 19px; }
  .voice .sr-only { position: static; width: auto; height: auto; margin: 0; clip: auto; clip-path: none; font-size: 11px; line-height: 1.2; }
  .page-body.scrolls, .chat-scroll { overflow-y: auto; overscroll-behavior-y: contain; }
  .chatpane { min-height: 0; }
  .col { padding: 16px max(16px, env(safe-area-inset-right)) 24px max(16px, env(safe-area-inset-left)); }
  .page-head { padding: 16px; gap: 12px; }
  .page-titles { flex-basis: 280px; }
  .page-title { font-size: 22px; }
  .page-actions { max-width: 100%; }
  .stack { gap: 16px; }
  .sample-tag, .sample-line { white-space: normal; max-width: 100%; line-height: 1.5; }
  .receipt { margin-left: 0; }
  .receipt dd { min-width: 0; overflow-wrap: anywhere; }
  .st-body { padding-left: 12px; }
  .voice-panel { bottom: calc(76px + env(safe-area-inset-bottom)); right: 12px; max-height: calc(100% - 100px - env(safe-area-inset-bottom)); overflow-y: auto; }
  .demo-ready .stage-foot { display: none; }
  .seg { max-width: 100%; flex-wrap: wrap; }
  .seg-btn { justify-content: center; }
  .metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .metrics > div { min-width: 0; }
  .pcgrid, .bbb { grid-template-columns: minmax(0, 1fr); }
  .input-surface input, .pal-search input, .size-form input { font-size: 16px; }
  .scrim { padding: 12px; place-items: end center; }
  .sheet, .sheet.wide, .palette { width: 100%; max-height: calc(100% - 12px); }
  .sheet-head, .sheet-body { padding: 16px; }
  .sheet-head h2 { font-size: 20px; min-width: 0; }
  .sheet-foot { flex-wrap: wrap; }
  .pal-row { min-height: 52px; }
}

@media (min-width: 621px) and (max-width: 900px) {
  .navlist { max-width: 640px; margin-inline: auto; }
  .metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pcgrid, .bbb { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .kbtn span, .kbtn kbd { display: none; }
  .kbtn { justify-content: center; }
  .page-head { align-items: flex-start; }
  .page-actions { width: 100%; }
  .page-actions > .seg { width: 100%; }
  .page-actions .seg-btn { flex: 1; padding-inline: 8px; }
  .dossier-head { gap: 8px; }
  .dossier-head .spacer { flex-basis: 100%; height: 0; }
  .dossier-head > .btn-ghost { flex: 1; justify-content: center; }
  .dossier-meta { margin-top: -4px; line-height: 1.6; }
  .runcard { padding: 12px; }
  .runrow { gap: 10px; }
  .runrow .spacer { display: none; }
  .runstate { flex-basis: 100%; }
  #run-btn { width: 100%; justify-content: center; }
  .console p { overflow-wrap: anywhere; }
  .console .c-tag { min-width: 34px; }
  .hero-fig > .mono:first-child { font-size: 28px; }
  .scorecard { gap: 16px; }
  .vhair { display: none; }
  .receipt dl { grid-template-columns: minmax(0, 1fr); gap: 1px; }
  .receipt dt { padding-top: 4px; }
  .secret { flex-wrap: wrap; }
  .secret .s-ctl { margin-left: 23px; }
  .prefrow > div { flex-basis: 180px; }
  .chat-foot .col { gap: 8px; padding-block: 12px; }
  .chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; }
  .chip-btn { flex: none; }

}

@media (max-width: 900px) {
  /* Each holding keeps every value and action in the same semantic table.
     Sort headers remain available above the rows; data no longer needs panning. */
  table.holdings { display: block; min-width: 0; }
  .holdings thead, .holdings tbody, .holdings tfoot { display: block; }
  .holdings thead tr { display: flex; overflow-x: auto; gap: 8px; padding-bottom: 8px; }
  .holdings thead th { flex: none; padding: 0; border: 0; }
  .holdings th.act { display: none; }
  .sortbtn { padding: 8px 12px; border: 1px solid var(--hairline); border-radius: var(--r-sm); white-space: nowrap; }
  .holdings tbody tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; padding: 20px 0; border-bottom: 1px solid var(--hairline-strong); }
  .holdings tbody td, .holdings tbody td.num { display: block; min-width: 0; padding: 0; border: 0; text-align: left; font: var(--t-mono); }
  .holdings tbody td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 4px; font: var(--t-caption); color: var(--ink-muted); }
  .holdings tbody td:first-child { grid-column: 1; grid-row: 1; }
  .holdings tbody td:last-child { grid-column: 2; grid-row: 1; justify-self: end; }
  .holdings tbody td:nth-child(6) { grid-column: 1 / -1; }
  .rowlink b { font-size: 17px; }
  .rowact { width: 44px; height: 44px; }
  .rowact svg { width: 17px; height: 17px; }
  .holdings tfoot tr { display: flex; justify-content: space-between; gap: 12px; }
  .holdings tfoot td { padding: 12px 0; }
  .holdings tfoot td:empty { display: none; }
}
@media (min-width: 621px) and (max-width: 900px) {
  .holdings tbody { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
}
@media (max-width: 360px) {
  .win-side { padding-inline: 0; gap: 0; }
  .navlist { gap: 0; }
  .navrow span { font-size: 10px; }
}
@media (max-width: 540px) {
  .rail-full { display: grid; grid-template-columns: repeat(5, minmax(44px, 1fr)); overflow: visible; gap: 2px 0; }
  .rail-full::before { display: none; }
  .rail-full li { min-width: 0; }
}
@media (max-width: 900px) and (max-height: 480px) {
  .page-head { padding-block: 10px; gap: 8px; }
  .page-titles { flex-basis: 240px; }
  .page-actions { width: auto; }
  .navrow, .voice { min-height: 44px; height: 44px; }
  .navrow { flex-direction: row; gap: 6px; }
  .chat-foot .col { padding-block: 8px; }
}

html:not(.demo-ready) .page,
html:not(.demo-ready) .page[hidden],
html:not(.demo-ready) [role="tabpanel"][hidden],
html:not(.demo-ready) #dossier-detail[hidden],
html:not(.demo-ready) #dossier-list[hidden] {
  display: flex !important;
  flex-direction: column;
}
html:not(.demo-ready) .win { height: auto; min-height: 0; overflow: visible; }
html:not(.demo-ready) .page-body { overflow: visible; }
html:not(.demo-ready) #palette,
html:not(.demo-ready) #sheet,
html:not(.demo-ready) #voice-panel { display: none !important; }

/* The global prefers-reduced-motion guard lives in tokens.css; these are the
   looping animations it cannot express as a duration, replaced by the state
   they were signalling rather than left mid-way. */
@media (prefers-reduced-motion: reduce) {
  .dot.pulse, .rail-full li.running .node, .typing i { animation: none; }
  .dot.pulse { opacity: 1; }
  .rail-full li.running .node { box-shadow: 0 0 0 4px var(--accent-soft); }
  .typing i { opacity: .8; }
}

/* ── Data-driven widths ───────────────────────────────────────────────────
   `style-src 'self'` blocks style="" attributes, so every authored percentage
   arrives as data-w / data-x and resolves here. JS writes finer values with
   setProperty(), which CSSOM permits. Never inline a style attribute.
   ─────────────────────────────────────────────────────────────────────── */
[data-w="0"]{--w:0%}[data-w="1"]{--w:1%}[data-w="2"]{--w:2%}[data-w="3"]{--w:3%}[data-w="4"]{--w:4%}[data-w="5"]{--w:5%}[data-w="6"]{--w:6%}[data-w="7"]{--w:7%}
[data-w="8"]{--w:8%}[data-w="9"]{--w:9%}[data-w="10"]{--w:10%}[data-w="11"]{--w:11%}[data-w="12"]{--w:12%}[data-w="13"]{--w:13%}[data-w="14"]{--w:14%}[data-w="15"]{--w:15%}
[data-w="16"]{--w:16%}[data-w="17"]{--w:17%}[data-w="18"]{--w:18%}[data-w="19"]{--w:19%}[data-w="20"]{--w:20%}[data-w="21"]{--w:21%}[data-w="22"]{--w:22%}[data-w="23"]{--w:23%}
[data-w="24"]{--w:24%}[data-w="25"]{--w:25%}[data-w="26"]{--w:26%}[data-w="27"]{--w:27%}[data-w="28"]{--w:28%}[data-w="29"]{--w:29%}[data-w="30"]{--w:30%}[data-w="31"]{--w:31%}
[data-w="32"]{--w:32%}[data-w="33"]{--w:33%}[data-w="34"]{--w:34%}[data-w="35"]{--w:35%}[data-w="36"]{--w:36%}[data-w="37"]{--w:37%}[data-w="38"]{--w:38%}[data-w="39"]{--w:39%}
[data-w="40"]{--w:40%}[data-w="41"]{--w:41%}[data-w="42"]{--w:42%}[data-w="43"]{--w:43%}[data-w="44"]{--w:44%}[data-w="45"]{--w:45%}[data-w="46"]{--w:46%}[data-w="47"]{--w:47%}
[data-w="48"]{--w:48%}[data-w="49"]{--w:49%}[data-w="50"]{--w:50%}[data-w="51"]{--w:51%}[data-w="52"]{--w:52%}[data-w="53"]{--w:53%}[data-w="54"]{--w:54%}[data-w="55"]{--w:55%}
[data-w="56"]{--w:56%}[data-w="57"]{--w:57%}[data-w="58"]{--w:58%}[data-w="59"]{--w:59%}[data-w="60"]{--w:60%}[data-w="61"]{--w:61%}[data-w="62"]{--w:62%}[data-w="63"]{--w:63%}
[data-w="64"]{--w:64%}[data-w="65"]{--w:65%}[data-w="66"]{--w:66%}[data-w="67"]{--w:67%}[data-w="68"]{--w:68%}[data-w="69"]{--w:69%}[data-w="70"]{--w:70%}[data-w="71"]{--w:71%}
[data-w="72"]{--w:72%}[data-w="73"]{--w:73%}[data-w="74"]{--w:74%}[data-w="75"]{--w:75%}[data-w="76"]{--w:76%}[data-w="77"]{--w:77%}[data-w="78"]{--w:78%}[data-w="79"]{--w:79%}
[data-w="80"]{--w:80%}[data-w="81"]{--w:81%}[data-w="82"]{--w:82%}[data-w="83"]{--w:83%}[data-w="84"]{--w:84%}[data-w="85"]{--w:85%}[data-w="86"]{--w:86%}[data-w="87"]{--w:87%}
[data-w="88"]{--w:88%}[data-w="89"]{--w:89%}[data-w="90"]{--w:90%}[data-w="91"]{--w:91%}[data-w="92"]{--w:92%}[data-w="93"]{--w:93%}[data-w="94"]{--w:94%}[data-w="95"]{--w:95%}
[data-w="96"]{--w:96%}[data-w="97"]{--w:97%}[data-w="98"]{--w:98%}[data-w="99"]{--w:99%}[data-w="100"]{--w:100%}

[data-x="0"]{--x:0%}[data-x="5"]{--x:5%}[data-x="10"]{--x:10%}[data-x="15"]{--x:15%}[data-x="20"]{--x:20%}[data-x="25"]{--x:25%}[data-x="30"]{--x:30%}[data-x="35"]{--x:35%}[data-x="40"]{--x:40%}[data-x="45"]{--x:45%}[data-x="50"]{--x:50%}
[data-x="55"]{--x:55%}[data-x="60"]{--x:60%}[data-x="65"]{--x:65%}[data-x="70"]{--x:70%}[data-x="75"]{--x:75%}[data-x="80"]{--x:80%}[data-x="85"]{--x:85%}[data-x="90"]{--x:90%}[data-x="95"]{--x:95%}[data-x="100"]{--x:100%}