/* Verity AI - design system
   Built from veriten.com's own brand: the blue->purple signature gradient,
   Montserrat, the navy/purple surface. Register: intelligence terminal,
   premium and quiet, numbers in mono, motion on the Apple ease curve. */

:root {
  /* Surfaces: deep navy-purple, layered */
  --bg-0: #0a1026;      /* page base */
  --bg-1: #0e1530;      /* app frame */
  --surface: #141b3a;   /* cards */
  --surface-2: #1a2245; /* elevated / hover */
  --navy: #0e3970;      /* Veriten navy */
  --purple: #342f75;    /* Veriten purple */

  /* Signature gradient, sampled from the Veriten mark */
  --g-blue: #3cbdff;
  --g-mid: #637cff;
  --g-purple: #8c3aff;
  --gradient: linear-gradient(120deg, var(--g-blue) 0%, var(--g-mid) 45%, var(--g-purple) 100%);
  --gradient-soft: linear-gradient(120deg, rgba(60,189,255,.16), rgba(140,58,255,.16));

  /* Ink */
  --ink: #f4f6fc;
  --ink-2: #c2cbe6;
  --ink-3: #8b96bb;
  --ink-4: #5d6890;

  /* Accents */
  --gold: #ffbc7d;       /* micro-accent only */
  --up: #4ec89a;
  --down: #f2795f;

  /* Chart series (colorblind-validated on the purple surface) */
  --c1:#3987e5; --c2:#d95926; --c3:#199e70; --c4:#c98500;
  --c5:#d55181; --c6:#3aa655; --c7:#9085e9; --c8:#e66767;

  /* Lines & light */
  --line: rgba(255,255,255,.08);
  --line-2: rgba(255,255,255,.14);
  --glow: 0 0 0 1px rgba(255,255,255,.05), 0 18px 40px -18px rgba(0,0,0,.7);

  --radius: 16px;
  --radius-sm: 10px;
  --radius-pill: 999px;

  --font: "Montserrat", -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --ease: cubic-bezier(.16,1,.3,1);
  --rail: 74px;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background:
    radial-gradient(1200px 700px at 78% -10%, rgba(140,58,255,.18), transparent 60%),
    radial-gradient(900px 600px at -5% 10%, rgba(60,189,255,.12), transparent 55%),
    var(--bg-0);
  color: var(--ink);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  letter-spacing: .1px;
}
::selection { background: rgba(99,124,255,.35); }
a { color: inherit; text-decoration: none; }

/* Numbers, everywhere, in mono with tabular figures */
.mono, .num { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.2px; }

/* ---------- App frame ---------- */
.app { display: grid; grid-template-columns: var(--rail) 1fr; min-height: 100vh; }

.rail {
  position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column; align-items: center;
  padding: 18px 0; gap: 6px;
  background: linear-gradient(180deg, rgba(20,27,58,.7), rgba(10,16,38,.7));
  border-right: 1px solid var(--line);
  backdrop-filter: blur(14px);
}
.rail .mark {
  width: 38px; height: 38px; border-radius: 11px; margin-bottom: 16px;
  background-size: cover; box-shadow: 0 6px 18px -6px rgba(140,58,255,.6);
}
.rail nav { display: flex; flex-direction: column; gap: 4px; width: 100%; align-items: center; }
.rail a {
  position: relative; width: 46px; height: 46px; border-radius: 13px;
  display: grid; place-items: center; color: var(--ink-3);
  transition: color .25s var(--ease), background .25s var(--ease), transform .25s var(--ease);
}
.rail a svg { width: 21px; height: 21px; position: relative; z-index: 1; }
.rail a .ico { position: relative; z-index: 1; }
.rail a:hover { color: var(--ink); background: var(--surface-2); transform: translateY(-1px); }
.rail a.active { color: var(--ink); }
/* Active = a gradient-tinted rounded pill behind the icon, with a soft glow.
   No separate left bar (it mispositioned in collapsed mode). */
.rail a.active::after {
  content: ""; position: absolute; inset: 0; border-radius: 13px; z-index: 0;
  background: linear-gradient(135deg, rgba(60,189,255,.22), rgba(140,58,255,.22));
  border: 1px solid rgba(120,140,255,.35);
  box-shadow: 0 6px 18px -8px rgba(99,124,255,.55), inset 0 1px 0 rgba(255,255,255,.06);
}
.rail .tip {
  position: absolute; left: 56px; white-space: nowrap; padding: 5px 10px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px;
  font-size: 12px; color: var(--ink); opacity: 0; pointer-events: none;
  transform: translateX(-4px); transition: all .2s var(--ease); z-index: 20;
}
.rail a:hover .tip { opacity: 1; transform: translateX(0); }

/* ---------- Main ---------- */
.main { min-width: 0; }
.topbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 34px; gap: 20px;
  background: linear-gradient(180deg, rgba(10,16,38,.92), rgba(10,16,38,.55));
  backdrop-filter: blur(14px); border-bottom: 1px solid var(--line);
}
.brandline { display: flex; align-items: center; gap: 13px; }
.brandline .logo { height: 22px; }
.brandline .sep { width: 1px; height: 20px; background: var(--line-2); }
.brandline .kicker {
  font-size: 11px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--ink-3);
  font-weight: 600;
}
.topstats { display: flex; gap: 26px; align-items: center; }
.topstat { text-align: right; }
.topstat b { font-family: var(--mono); font-size: 15px; color: var(--ink); display: block; }
.topstat span { font-size: 10.5px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--ink-4); }
.live { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--ink-3); }
.live .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--up);
  box-shadow: 0 0 0 0 rgba(78,200,154,.6); animation: pulse 2.4s infinite; }
@keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(78,200,154,.55)} 70%{box-shadow:0 0 0 7px rgba(78,200,154,0)} 100%{box-shadow:0 0 0 0 rgba(78,200,154,0)} }

.wrap { padding: 30px 34px 80px; max-width: 1220px; }

/* ---------- Page header ---------- */
.pagehead { margin-bottom: 26px; }
.pagehead h1 {
  font-size: 30px; font-weight: 800; letter-spacing: -.5px; margin: 0 0 8px;
  line-height: 1.1;
}
.pagehead h1 .grad {
  background: var(--gradient); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.pagehead p { margin: 0; color: var(--ink-3); font-size: 15px; max-width: 720px; }

/* ---------- Section ---------- */
.section { margin-bottom: 40px; }
.section-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 16px; }
.section-head h2 {
  font-size: 13px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--ink-2); margin: 0;
}
.section-head .rule { flex: 1; height: 1px; background: var(--line); }
.section-head .note { font-size: 12px; color: var(--ink-4); }

/* ---------- Card ---------- */
.card {
  background: linear-gradient(180deg, var(--surface), rgba(20,27,58,.6));
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--glow);
}

/* ---------- Lifecycle matrix ---------- */
.lifecycle { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.stage { padding: 16px 15px 18px; }
.stage-head { display: flex; align-items: center; gap: 9px; margin-bottom: 14px; }
.stage-dot { width: 9px; height: 9px; border-radius: 50%; }
.stage-name { font-size: 12px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; }
.stage[data-stage=emerging] .stage-dot { background: var(--g-blue); }
.stage[data-stage=accelerating] .stage-dot { background: var(--g-mid); }
.stage[data-stage=consensus] .stage-dot { background: var(--g-purple); }
.stage[data-stage=fading] .stage-dot { background: var(--ink-4); }
.stage[data-stage=fading] .chip { opacity: .82; }

.chip {
  display: block; padding: 11px 12px; margin-bottom: 9px; border-radius: 12px;
  background: rgba(255,255,255,.03); border: 1px solid var(--line);
  cursor: default; transition: transform .28s var(--ease), background .28s var(--ease), border-color .28s var(--ease);
}
.chip:hover { transform: translateY(-2px); background: var(--surface-2); border-color: var(--line-2); }
.chip .name { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.chip .meta { display: flex; align-items: center; justify-content: space-between; margin-top: 5px; }
.chip .note { font-size: 11px; color: var(--ink-4); line-height: 1.35; margin-top: 5px;
  padding-right: 22px; }
.delta {
  font-family: var(--mono); font-size: 11.5px; font-weight: 600; padding: 2px 7px;
  border-radius: var(--radius-pill); letter-spacing: -.2px;
}
.delta.pos { color: var(--up); background: rgba(78,200,154,.12); }
.delta.neg { color: var(--down); background: rgba(242,121,95,.12); }

/* ---------- YoY table ---------- */
.yoy { width: 100%; border-collapse: separate; border-spacing: 0; overflow: hidden; border-radius: var(--radius); }
.yoy th, .yoy td { padding: 13px 16px; text-align: right; }
.yoy th:first-child, .yoy td:first-child { text-align: left; }
.yoy thead th {
  font-size: 10.5px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--ink-4);
  font-weight: 600; background: rgba(255,255,255,.02); border-bottom: 1px solid var(--line);
}
.yoy tbody td { border-bottom: 1px solid var(--line); }
.yoy tbody tr { transition: background .2s var(--ease); }
.yoy tbody tr:hover { background: rgba(255,255,255,.03); }
.yoy tbody tr:last-child td { border-bottom: none; }
.yoy .theme-name { font-weight: 600; font-size: 14px; }
.yoy .val { font-family: var(--mono); color: var(--ink-2); font-size: 14px; }
.yoy .val.peak { color: var(--ink); font-weight: 600; }
.yoy .barcell { width: 120px; }
.bar { height: 6px; border-radius: 4px; background: rgba(255,255,255,.07); overflow: hidden; }
.bar > i { display: block; height: 100%; border-radius: 4px; background: var(--gradient); }
.yoy .yoychg { font-family: var(--mono); font-weight: 600; }
.yoy .yoychg.pos { color: var(--up); }
.yoy .yoychg.neg { color: var(--down); }

/* ---------- Projections ---------- */
.proj-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.proj { padding: 18px 19px; display: flex; flex-direction: column; gap: 12px; }
.proj:hover { border-color: var(--line-2); }
.proj .claim { font-size: 16px; font-weight: 600; line-height: 1.4; letter-spacing: -.2px; }
.proj .who { display: flex; align-items: center; gap: 10px; color: var(--ink-3); font-size: 13px; }
.proj .who .avatar {
  width: 26px; height: 26px; border-radius: 50%; background: var(--gradient-soft);
  border: 1px solid var(--line-2); display: grid; place-items: center;
  font-size: 11px; font-weight: 700; color: var(--ink);
}
.proj .foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; }
.proj .src { font-family: var(--mono); font-size: 12px; color: var(--ink-4); }
.status {
  font-size: 10.5px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase;
  padding: 4px 10px; border-radius: var(--radius-pill); border: 1px solid var(--line-2);
}
.status[data-s=TRACKING] { color: var(--g-blue); background: rgba(60,189,255,.1); }
.status[data-s=HOLDING]  { color: var(--ink-2); background: rgba(255,255,255,.05); }
.status[data-s=CONSENSUS]{ color: var(--up); background: rgba(78,200,154,.12); }
.status[data-s=CONTESTED]{ color: var(--gold); background: rgba(255,188,125,.12); }
.status[data-s=EARLY]    { color: var(--g-purple); background: rgba(140,58,255,.14); }

/* Disagreement strip */
.splits { padding: 4px; display: grid; grid-template-columns: 1fr auto 1fr; gap: 0; align-items: stretch; }
.splits .side { padding: 18px 20px; }
.splits .vs {
  align-self: center; font-family: var(--mono); font-size: 12px; color: var(--ink-4);
  padding: 0 6px; letter-spacing: 1px;
}
.splits .side.a { border-right: 1px solid var(--line); }
.splits .claim-sm { font-size: 14.5px; font-weight: 600; line-height: 1.35; margin-bottom: 8px; }

/* Play affordance */
.play {
  display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600;
  color: var(--ink-2); padding: 6px 12px; border-radius: var(--radius-pill);
  border: 1px solid var(--line-2); background: rgba(255,255,255,.03); cursor: pointer;
  transition: all .25s var(--ease);
}
.play:hover { background: rgba(99,124,255,.14); color: var(--ink); border-color: var(--g-mid); transform: translateY(-1px); }
.play svg { width: 12px; height: 12px; }
/* Icon swaps to pause and the button lights up while playing. */
.play .ic-pause { display: none; }
.play.playing .ic-play { display: none; }
.play.playing .ic-pause { display: inline-flex; }
.play.playing { background: var(--gradient); color: #0a1026; border-color: transparent; }
.play.playing:hover { color: #0a1026; }
.play.playing .plab { font-weight: 700; }

/* Reveal on load */
.reveal { opacity: 0; transform: translateY(10px); animation: reveal .6s var(--ease) forwards; }
@keyframes reveal { to { opacity: 1; transform: none; } }

@media (max-width: 1000px) {
  .lifecycle { grid-template-columns: repeat(2, 1fr); }
  .proj-grid { grid-template-columns: 1fr; }
  .topstats { display: none; }
}

/* ============ Sidebar (collapsed rail <-> expanded) ============ */
:root { --rail-open: 234px; }
.rail { transition: width .32s var(--ease); overflow: hidden;
  align-items: stretch; padding: 16px 12px; gap: 2px; }
.rail-top { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-bottom: 14px; }
.rail .mark { width: 40px; height: 40px; border-radius: 12px; margin: 0; flex: none; }
.nav-toggle { width: 34px; height: 34px; border-radius: 10px; flex: none;
  background: var(--surface); border: 1px solid var(--line); color: var(--ink-3);
  display: grid; place-items: center; cursor: pointer; transition: all .2s var(--ease); }
.nav-toggle svg { width: 16px; height: 16px; transition: transform .32s var(--ease); }
.nav-toggle:hover { background: var(--surface-2); color: var(--ink); border-color: var(--line-2); }
.rail nav { padding: 0; gap: 4px; align-items: stretch; }
.rail nav a { display: flex; align-items: center; justify-content: center; gap: 13px;
  width: 46px; height: 46px; margin: 0 auto; padding: 0; border-radius: 13px; }
.rail nav a .ico { width: 22px; height: 22px; display: grid; place-items: center; flex: none; }
.rail nav a .label { font-size: 14px; font-weight: 600; white-space: nowrap;
  opacity: 0; width: 0; overflow: hidden; transition: opacity .2s var(--ease); }

/* Expanded */
body[data-nav="open"] .app { grid-template-columns: var(--rail-open) 1fr; }
body[data-nav="open"] .rail { width: var(--rail-open); }
body[data-nav="open"] .rail-top { flex-direction: row; align-items: center; padding: 0 6px; gap: 12px; }
body[data-nav="open"] .nav-toggle { margin-left: auto; }
body[data-nav="open"] .nav-toggle svg { transform: rotate(180deg); }
body[data-nav="open"] .rail nav a { width: auto; justify-content: flex-start; padding: 0 12px; margin: 0; }
body[data-nav="open"] .rail nav a .label { opacity: 1; width: auto; }
body[data-nav="open"] .rail nav a .tip { display: none; }
.app { transition: grid-template-columns .32s var(--ease); }

/* ============ Shared page bits ============ */
.loading { color: var(--ink-4); padding: 40px 0; font-size: 14px; }
.range-toggle { display: inline-flex; gap: 2px; padding: 3px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-pill); }
.range-toggle button { font-family: var(--mono); font-size: 12px; padding: 5px 13px; border-radius: var(--radius-pill); border: 0; background: transparent; color: var(--ink-3); cursor: pointer; transition: all .2s var(--ease); }
.range-toggle button.on { background: var(--gradient); color: #0a1026; font-weight: 600; }

/* ============ Theme tracker ============ */
/* Two fixed-height panes: the rail stays put (no scroll), the dossier scrolls. */
.tracker { display: grid; grid-template-columns: 288px 1fr; gap: 20px; align-items: stretch; }
.theme-list { display: flex; flex-direction: column; gap: 3px; padding: 6px !important; align-self: start; }
.dossier-pane { height: 100%; overflow-y: auto; overflow-x: hidden; padding-right: 12px; }
.dossier-pane::-webkit-scrollbar { width: 9px; }
.dossier-pane::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 100px; }
.dossier-pane::-webkit-scrollbar-thumb:hover { background: var(--ink-4); }
.theme-item { position: relative; display: flex; align-items: center; gap: 11px; padding: 11px 13px; cursor: pointer;
  border-radius: 11px; border: 1px solid transparent; transition: background .15s var(--ease); }
.theme-item .swatch { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.theme-item .tn { font-weight: 600; font-size: 14px; flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.theme-item .tv { margin-left: auto; font-family: var(--mono); font-size: 13px; color: var(--ink-2);
  width: 46px; text-align: right; flex: none; }
.theme-item .tt { font-family: var(--mono); font-size: 11px; width: 50px; text-align: right; flex: none; }
.theme-item.on { border-color: var(--line-2); background: var(--surface-2); }
.theme-item:hover { transform: translateY(-1px); }
.chartcard { padding: 22px 24px; }
.chartcard .ch-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 6px; }
.chartcard h3 { margin: 0; font-size: 20px; font-weight: 700; }
.chartcard .ch-blurb { color: var(--ink-3); font-size: 13px; margin-bottom: 16px; }
.chart svg { width: 100%; height: auto; display: block; }
.chart .axis { stroke: var(--line); stroke-width: 1; }
.chart .gridline { stroke: rgba(255,255,255,.05); stroke-width: 1; }
.chart .aline { fill: none; stroke: url(#g); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.chart .afill { fill: url(#gf); opacity: .5; }
.chart .dot { fill: var(--g-mid); stroke: var(--bg-0); stroke-width: 2; cursor: pointer; }
.chart .lbl { fill: var(--ink-4); font-family: var(--mono); font-size: 10px; }
.quotes { margin-top: 22px; display: flex; flex-direction: column; gap: 10px; }
.quote { padding: 15px 17px; }
.quote .q-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-size: 12px; color: var(--ink-4); }
.quote .badge { font-family: var(--mono); font-size: 11px; color: var(--g-blue); background: rgba(60,189,255,.1); padding: 2px 8px; border-radius: var(--radius-pill); }
.quote .q-text { font-family: Georgia, serif; font-size: 14.5px; line-height: 1.6; color: var(--ink-2); }

/* ============ People ============ */
.people-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.person-card { padding: 16px 17px; cursor: pointer; display: flex; align-items: center; gap: 13px; }
.person-card .av { width: 42px; height: 42px; border-radius: 50%; background: var(--gradient-soft); border: 1px solid var(--line-2); display: grid; place-items: center; font-weight: 700; font-size: 15px; flex: none; }
.person-card .pn { font-weight: 600; font-size: 15px; }
.person-card .pc { font-family: var(--mono); font-size: 12px; color: var(--ink-4); }
.person-detail { }
.appearance { padding: 14px 17px; display: flex; align-items: center; gap: 14px; margin-bottom: 9px; }
.appearance .ep { font-family: var(--mono); font-size: 12px; color: var(--g-blue); min-width: 92px; }
.appearance .at { font-weight: 600; font-size: 14px; flex: 1; }
.appearance .ad { font-family: var(--mono); font-size: 12px; color: var(--ink-4); }
.backlink { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px;
  padding: 9px 18px; border-radius: 100px; border: 1px solid var(--line-2);
  background: var(--surface); color: var(--ink-2); font: 600 13px/1 inherit;
  cursor: pointer; transition: border-color .15s, color .15s, background .15s, transform .15s; }
.backlink:hover { color: #fff; border-color: transparent; background: var(--gradient);
  transform: translateX(-2px); }

/* ============ Ask ============ */
.askbar { display: flex; gap: 11px; margin-bottom: 14px; }
.askbar input { flex: 1; padding: 15px 18px; font-size: 15px; font-family: var(--font); border-radius: var(--radius-pill); border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); }
.askbar input:focus { outline: none; border-color: var(--g-mid); box-shadow: 0 0 0 3px rgba(99,124,255,.15); }
.askbar button { padding: 0 26px; border-radius: var(--radius-pill); border: 0; background: var(--gradient); color: #0a1026; font-weight: 700; font-size: 14px; cursor: pointer; transition: transform .2s var(--ease); }
.askbar button:hover { transform: translateY(-1px); }
.askbar button:disabled { opacity: .5; }
.suggestions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.suggestions button { font-size: 12.5px; padding: 8px 14px; border-radius: var(--radius-pill); border: 1px solid var(--line); background: var(--surface); color: var(--ink-3); cursor: pointer; transition: all .2s var(--ease); }
.suggestions button:hover { border-color: var(--line-2); color: var(--ink); }
.answer { padding: 22px 24px; margin-bottom: 20px; font-size: 16px; line-height: 1.65; }
.answer.refused { color: var(--ink-3); border-left: 3px solid var(--gold); }
.answer cite { font-style: normal; font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--g-blue); background: rgba(60,189,255,.12); padding: 1px 6px; border-radius: 4px; margin: 0 1px; }

/* ============ Partner ============ */
.partner-hero { padding: 26px 28px; margin-bottom: 22px; background: linear-gradient(120deg, rgba(60,189,255,.1), rgba(140,58,255,.12)); }
.partner-hero .plabel { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--ink-3); }
.partner-hero h1 { font-size: 28px; font-weight: 800; margin: 6px 0 3px; }
.partner-hero .pdesc { color: var(--ink-2); }
.sig-card { padding: 18px 20px; margin-bottom: 12px; }
.sig-card .sig-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.sig-card .sig-h { font-weight: 700; font-size: 16px; }
.state { font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; padding: 4px 10px; border-radius: var(--radius-pill); margin-left: auto; }
.state[data-st*="RISING"] { color: var(--up); background: rgba(78,200,154,.12); }
.state[data-st="ELEVATED"] { color: var(--gold); background: rgba(255,188,125,.12); }
.state[data-st="FADING"] { color: var(--down); background: rgba(242,121,95,.12); }
.sig-card .takeaway { color: var(--ink-2); font-size: 14px; margin-bottom: 12px; }
.sig-card .takeaway b { color: var(--g-blue); font-weight: 600; }
.sig-card .sig-quote { font-family: Georgia, serif; font-size: 13.5px; color: var(--ink-3); border-left: 2px solid var(--line-2); padding-left: 12px; margin-bottom: 12px; }
.watchrail { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 24px; }
.watch { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: var(--radius-pill); background: var(--surface); border: 1px solid var(--line); font-size: 13px; }
.watch .wv { font-family: var(--mono); color: var(--ink-3); }

/* ============ Receipts drawer ============ */
.yoy tr.clickable, .chip[data-theme] { cursor: pointer; }
.yoy tr.clickable:hover .theme-name { color: var(--g-blue); }
/* Everything that opens from a card opens as a centred modal, not a slide-out
   panel. A 520px column crushed the analysis into a ribbon of text; the reading
   is the product, so it gets the width. The docked Verity AI assistant stays a
   side panel, because a conversation you keep open while working is different. */
.drawer-scrim { position: fixed; inset: 0; background: rgba(5,8,20,.72); backdrop-filter: blur(3px);
  opacity: 0; pointer-events: none; transition: opacity .28s var(--ease); z-index: 40; }
.drawer-scrim.open { opacity: 1; pointer-events: auto; }
.drawer { position: fixed; inset: 4vh 0 auto; margin: 0 auto; width: min(1040px, 92vw);
  max-height: 92vh; border-radius: 18px; overflow: hidden;
  background: var(--bg-1); border: 1px solid var(--line-2);
  box-shadow: 0 30px 90px rgba(0,0,0,.55);
  opacity: 0; transform: translateY(14px) scale(.985); pointer-events: none;
  transition: opacity .22s var(--ease), transform .22s var(--ease);
  z-index: 41; display: flex; flex-direction: column; }
.drawer.open { opacity: 1; transform: none; pointer-events: auto; }
.drawer-head { position: relative; padding: 24px 28px 18px; border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(99,124,255,.09), transparent); }
.drawer-head .dh-kicker { font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--ink-4); }
.drawer-head h3 { margin: 6px 0 4px; font-size: 25px; font-weight: 800; letter-spacing: -.01em;
  max-width: calc(100% - 60px); }
.drawer-head .dh-method { font-size: 12px; color: var(--ink-4); font-family: var(--mono); }
.drawer-head .close { position: absolute; top: 22px; right: 24px; width: 34px; height: 34px; border-radius: 9px;
  background: var(--surface); border: 1px solid var(--line); color: var(--ink-3); cursor: pointer; font-size: 16px; }
.drawer-head .close:hover { color: var(--ink); background: var(--surface-2); }
.drawer-body { padding: 22px 28px 32px; overflow-y: auto; flex: 1; display: flex;
  flex-direction: column; gap: 13px; }
.drawer-body .md p, .drawer-body .drawer-arg { max-width: 90ch; }
.drawer-body .quote { background: var(--surface); }

/* Theme compare */
.dropdown { position: relative; }
.dd-btn { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font); font-size: 12.5px;
  font-weight: 600; padding: 8px 13px; border-radius: var(--radius-pill); background: var(--surface);
  border: 1px solid var(--line-2); color: var(--ink-2); cursor: pointer; transition: all .2s var(--ease); }
.dd-btn svg { width: 15px; height: 15px; transition: transform .2s var(--ease); }
.dd-btn:hover { border-color: var(--g-mid); color: var(--ink); }
.dropdown.open .dd-btn { border-color: var(--g-mid); color: var(--ink); }
.dropdown.open .dd-btn svg { transform: rotate(180deg); }
.dd-menu { position: absolute; top: calc(100% + 8px); right: 0; min-width: 200px; max-height: 320px; overflow-y: auto;
  background: var(--surface-2); border: 1px solid var(--line-2); border-radius: 14px; padding: 6px;
  box-shadow: 0 20px 44px -16px rgba(0,0,0,.75); z-index: 30;
  opacity: 0; transform: translateY(-6px) scale(.98); pointer-events: none; transform-origin: top right;
  transition: opacity .2s var(--ease), transform .2s var(--ease); }
.dropdown.open .dd-menu { opacity: 1; transform: none; pointer-events: auto; }
.dd-item { padding: 9px 12px; border-radius: 9px; font-size: 13.5px; color: var(--ink-2); cursor: pointer;
  transition: background .15s var(--ease), color .15s var(--ease); }
.dd-item:hover { background: var(--surface); color: var(--ink); }
.dd-item.sel { color: var(--g-blue); }
.chart-legend { display: flex; align-items: center; gap: 16px; margin-bottom: 10px; }
.chart-legend .lg { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--ink-2); }
.chart-legend .lg i { width: 14px; height: 3px; border-radius: 2px; display: inline-block; }

/* ============ Chat (Ask) ============ */
.wrap-full { padding: 0; max-width: none; height: calc(100vh - 74px); display: flex; flex-direction: column; }
.chat-page { flex: 1; min-height: 0; display: flex; }
.chat { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.chat-scroll { flex: 1; overflow-y: auto; padding: 30px 0 20px; scroll-behavior: smooth; }
.chat-scroll::-webkit-scrollbar { width: 10px; }
.chat-scroll::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 10px; }

.chat-empty { max-width: 720px; margin: 8vh auto 0; text-align: center; padding: 0 24px; }
.chat-empty-mark { width: 60px; height: 60px; margin: 0 auto 22px; border-radius: 18px;
  background: url(/static/brand/veriten-icon.png) center/cover; box-shadow: 0 12px 30px -10px rgba(140,58,255,.6); }
.chat-empty h2 { font-size: 26px; font-weight: 800; margin: 0 0 8px; letter-spacing: -.4px; }
.chat-empty p { color: var(--ink-3); margin: 0 0 26px; font-size: 15px; }
.chat-empty .suggestions { justify-content: center; }

.msg { max-width: 780px; margin: 0 auto 22px; padding: 0 28px; display: flex; gap: 14px; }
.msg.user { justify-content: flex-end; }
.msg.user .user-body {
  background: var(--gradient); color: #0a1026; padding: 12px 17px; border-radius: 18px 18px 5px 18px;
  font-weight: 500; font-size: 15px; max-width: 78%; }
.msg.assistant .msg-avatar { width: 30px; height: 30px; border-radius: 9px; flex: none; margin-top: 2px;
  background: url(/static/brand/veriten-icon.png) center/cover; box-shadow: 0 4px 12px -4px rgba(140,58,255,.6); }
.msg.assistant .msg-body { flex: 1; min-width: 0; }
.answer-text { font-size: 16px; line-height: 1.7; color: var(--ink); }
.answer-text.refused { color: var(--ink-3); }
sup.cite { font-family: var(--mono); font-size: 10px; font-weight: 600; color: var(--g-blue);
  background: rgba(60,189,255,.15); padding: 1px 5px; border-radius: 5px; margin: 0 2px; vertical-align: super; cursor: default; }

.typing { display: inline-flex; gap: 5px; padding: 8px 2px; }
.typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-4); animation: blink 1.4s infinite both; }
.typing span:nth-child(2) { animation-delay: .2s; } .typing span:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%,80%,100%{opacity:.25;transform:translateY(0)} 40%{opacity:1;transform:translateY(-3px)} }

.sources-fold { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 8px; }
.sources-fold > summary { cursor: pointer; font-size: 12px; letter-spacing: 1px; text-transform: uppercase;
  color: var(--ink-4); font-weight: 600; padding: 6px 0; list-style: none; }
.sources-fold > summary::-webkit-details-marker { display: none; }
.sources-fold > summary::before { content: "\25B8"; margin-right: 8px; display: inline-block; transition: transform .2s var(--ease); }
.sources-fold[open] > summary::before { transform: rotate(90deg); }
.sources-list { display: flex; flex-direction: column; gap: 10px; padding: 8px 0 4px; }
.source-line { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 13px 15px;
  display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 10px; }
.source-line .badge { font-family: var(--mono); font-size: 11px; color: var(--g-blue); background: rgba(60,189,255,.1); padding: 3px 9px; border-radius: var(--radius-pill); }
.source-line .src-guest { font-size: 12.5px; color: var(--ink-2); font-weight: 600; }
.source-line .src-date { font-family: var(--mono); font-size: 11px; color: var(--ink-4); }
.source-line .src-quote { grid-column: 1 / -1; font-family: Georgia, serif; font-size: 13.5px; color: var(--ink-3); line-height: 1.55; }

.composer { padding: 12px 28px 20px; border-top: 1px solid var(--line);
  background: linear-gradient(180deg, transparent, rgba(10,16,38,.6)); }
.composer-inner { max-width: 780px; margin: 0 auto; display: flex; align-items: flex-end; gap: 10px;
  background: var(--surface); border: 1px solid var(--line-2); border-radius: 24px; padding: 8px 8px 8px 18px;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease); }
.composer-inner:focus-within { border-color: var(--g-mid); box-shadow: 0 0 0 3px rgba(99,124,255,.13); }
.composer textarea { flex: 1; background: transparent; border: 0; color: var(--ink); font-family: var(--font);
  font-size: 15px; line-height: 1.5; resize: none; outline: none; padding: 8px 0; max-height: 160px; }
.composer textarea::placeholder { color: var(--ink-4); }
.composer #go { width: 38px; height: 38px; flex: none; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--gradient); color: #0a1026; display: grid; place-items: center; transition: transform .2s var(--ease), opacity .2s; }
.composer #go svg { width: 19px; height: 19px; }
.composer #go:hover { transform: scale(1.06); }
.composer-note { max-width: 780px; margin: 8px auto 0; text-align: center; font-size: 11.5px; color: var(--ink-4); }

/* ============ Agent chat: working state, trace, markdown ============ */
.working { display: inline-flex; align-items: center; gap: 11px; padding: 6px 0; color: var(--ink-3); font-size: 14px; }
.working .spin { width: 15px; height: 15px; border: 2px solid var(--line-2); border-top-color: var(--g-blue); border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.working-text { animation: fadepulse 2.2s ease-in-out infinite; }
@keyframes fadepulse { 0%,100%{opacity:.55} 50%{opacity:1} }

.trace { margin-bottom: 12px; }
.trace > summary { cursor: pointer; font-size: 11.5px; letter-spacing: .5px; color: var(--ink-4); list-style: none; padding: 4px 0; }
.trace > summary::-webkit-details-marker { display: none; }
.trace > summary::before { content: "\25B8"; margin-right: 7px; display: inline-block; transition: transform .2s var(--ease); }
.trace[open] > summary::before { transform: rotate(90deg); }
.trace-list { display: flex; flex-direction: column; gap: 4px; padding: 6px 0 2px; }
.trace-item { font-size: 12.5px; color: var(--ink-3); font-family: var(--mono); }
.trace-verb { color: var(--g-blue); }

/* Markdown in the answer */
.answer-text.md h3, .answer-text.md h4, .answer-text.md h5 { font-weight: 700; margin: 18px 0 8px; letter-spacing: -.2px; }
.answer-text.md h3 { font-size: 18px; } .answer-text.md h4 { font-size: 15.5px; } .answer-text.md h5 { font-size: 14px; color: var(--ink-2); }
.answer-text.md p { margin: 0 0 12px; }
.answer-text.md ul, .answer-text.md ol { margin: 0 0 12px; padding-left: 22px; }
.answer-text.md li { margin-bottom: 6px; }
.answer-text.md strong { color: var(--ink); font-weight: 700; }
.answer-text.md code { font-family: var(--mono); font-size: 13px; background: var(--surface-2); padding: 1px 6px; border-radius: 5px; }
.answer-text.md hr { border: 0; border-top: 1px solid var(--line); margin: 18px 0; }
.md-table-wrap { overflow-x: auto; margin: 4px 0 16px; border: 1px solid var(--line); border-radius: 12px; }
.md-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.md-table th { text-align: left; padding: 10px 14px; background: rgba(255,255,255,.03); color: var(--ink-3);
  font-size: 11px; letter-spacing: .8px; text-transform: uppercase; font-weight: 600; border-bottom: 1px solid var(--line); }
.md-table td { padding: 10px 14px; border-bottom: 1px solid var(--line); font-family: var(--mono); font-variant-numeric: tabular-nums; }
.md-table tr:last-child td { border-bottom: 0; }
.md-table td:first-child { font-family: var(--font); color: var(--ink); }

/* Citation playback: seeks to the exact cited second (the guest saying it). */

/* ============ The Quarterly Read (findings) ============ */
.read { display: flex; flex-direction: column; gap: 18px; margin-bottom: 44px; }
.finding { padding: 26px 30px; position: relative; overflow: hidden; }
.finding::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--gradient); }
.finding .kicker { font-family: var(--mono); font-size: 11px; letter-spacing: 2px; color: var(--g-blue); margin-bottom: 10px; }
.finding h2 { font-size: 22px; font-weight: 800; line-height: 1.25; letter-spacing: -.3px; margin: 0 0 14px; max-width: 900px; }
.finding .argument { color: var(--ink-2); font-size: 15px; line-height: 1.7; max-width: 880px; margin: 0 0 16px; }
.finding .argument q, .finding .argument .q { font-style: italic; color: var(--ink); }
.finding .stat-strip, .drawer .stat-strip { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.finding .stat, .drawer .stat { font-family: var(--mono); font-size: 12.5px; color: var(--ink-2); background: rgba(255,255,255,.04);
  border: 1px solid var(--line); padding: 7px 13px; border-radius: var(--radius-pill); }
.finding .what, .drawer .what { font-size: 15px; line-height: 1.6; max-width: 880px; padding: 14px 0 0; border-top: 1px solid var(--line); }
.finding .what b { color: var(--gold); font-weight: 700; letter-spacing: .3px; }
.finding .fwtag { position: absolute; top: 26px; right: 30px; font-size: 10.5px; letter-spacing: .4px;
  color: var(--ink-4); max-width: 220px; text-align: right; }
.finding .cite-mini { cursor: pointer; color: var(--g-blue); font-size: 12px; font-family: var(--mono); }
.frameworks-block { padding: 20px 24px; margin-bottom: 40px; }
.frameworks-block h3 { font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ink-3); margin: 0 0 12px; }
.frameworks-block ul { margin: 0; padding-left: 18px; color: var(--ink-3); font-size: 13px; }
.frameworks-block li { margin-bottom: 6px; }

/* ============ AI analysis header on pages ============ */
.ai-analysis { padding: 24px 26px; margin-bottom: 22px; position: relative;
  background: linear-gradient(135deg, rgba(60,189,255,.06), rgba(140,58,255,.07)); }
.ai-analysis .ai-tag { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--g-blue); margin-bottom: 12px; font-weight: 700; }
.ai-analysis .ai-tag::before { content: ""; width: 16px; height: 16px; border-radius: 5px; background: var(--gradient); }
.ai-analysis .md { font-size: 15px; line-height: 1.7; }
.ai-analysis.loading-ai { color: var(--ink-3); }

.readlink { font-size: 12px; color: var(--g-blue); font-family: var(--mono); }
.readlink:hover { text-decoration: underline; }

/* Analyst review queue: the Stage D gate (spec 07) */
.gate{display:inline-block;font:600 11px/1.5 "IBM Plex Mono",monospace;letter-spacing:.02em;
  padding:3px 10px;border-radius:100px;margin:2px 0 10px}
.gate.pass{background:rgba(46,160,110,.12);color:#1f9d63;border:1px solid rgba(46,160,110,.3)}
.gate.fail{background:rgba(210,60,60,.1);color:#c0392b;border:1px solid rgba(210,60,60,.3)}
.receipt{margin-top:14px;border-top:1px solid var(--line);padding-top:10px}
.receipt summary{cursor:pointer;font:600 12px/1.4 "IBM Plex Mono",monospace;color:var(--muted)}
.receipt summary:hover{color:var(--ink)}
.receipt pre{margin:10px 0 0;padding:12px 14px;background:var(--surface-2,#f6f7fb);border-radius:10px;
  font:12px/1.6 "IBM Plex Mono",monospace;color:var(--ink);white-space:pre-wrap;overflow-x:auto}

/* ============ Voices: the roster as intelligence ============ */
.voices-intro{margin-bottom:22px;max-width:none}
.voices-intro .chip{display:inline-block;font:600 11px/1 "IBM Plex Mono",monospace;letter-spacing:.08em;
  text-transform:uppercase;color:var(--g-mid);background:rgba(99,124,255,.1);
  border:1px solid rgba(99,124,255,.28);padding:6px 11px;border-radius:100px;margin-bottom:12px}
.voices-intro p{color:var(--ink-2,#c7cbe0);font-size:15px;line-height:1.6;margin:0 0 16px}
.vsearch{width:100%;max-width:560px;background:var(--surface,#12162b);border:1px solid var(--line,#242a44);
  border-radius:12px;padding:12px 16px;color:var(--ink);font-size:14px;font-family:inherit;outline:none}
.vsearch:focus{border-color:var(--g-mid);box-shadow:0 0 0 3px rgba(99,124,255,.15)}
.voice-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:14px}
.voice-card{padding:18px 18px 14px;cursor:pointer;display:flex;flex-direction:column;gap:12px;
  transition:transform .12s ease,border-color .12s ease,box-shadow .12s ease}
.voice-card:hover{transform:translateY(-2px);border-color:rgba(99,124,255,.5);
  box-shadow:0 10px 30px -12px rgba(60,120,255,.35)}
.voice-top{display:flex;align-items:center;gap:12px}
.voice-id{min-width:0}
.voice-id .vn{font-weight:700;font-size:15px;color:var(--ink);line-height:1.2}
.vmeta{display:flex;flex-wrap:wrap;gap:5px;margin-top:5px}
.vtag{font:500 10.5px/1 "IBM Plex Mono",monospace;color:var(--ink-3,#8b90ad);
  background:rgba(255,255,255,.04);border:1px solid var(--line);padding:3px 7px;border-radius:6px}
/* flex:1 stretched the box past the line clamp, so a long capsule rendered a
   fourth line that the footer border sliced through. Let the clamp own the
   height and push the footer down with auto margin instead. */
.voice-thesis{font-size:14px;line-height:1.55;color:var(--ink-2,#c7cbe0);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
  max-height:calc(14px * 1.55 * 3);margin-bottom:auto}
.vmuted{color:var(--ink-4,#6b7091)}
.voice-foot{display:flex;justify-content:space-between;align-items:center;
  border-top:1px solid var(--line);padding-top:10px;margin-top:2px}
.vcount{font:500 11px/1 "IBM Plex Mono",monospace;color:var(--ink-4,#6b7091)}
.varrow{font-size:12px;font-weight:600;color:var(--g-mid);opacity:0;transition:opacity .12s}
.voice-card:hover .varrow{opacity:1}

/* ============ Person profile ============ */
.person-hero{display:flex;align-items:center;gap:16px;margin-bottom:16px}
.appearances-fold{margin-top:24px}
.appearances-fold summary{cursor:pointer;font:600 13px/1.4 "IBM Plex Mono",monospace;
  color:var(--ink-3);padding:8px 0}
.appearances-fold summary:hover{color:var(--ink)}
.appearances-fold .appearance{margin-top:8px}

/* ============ Refresh control on every analyst read ============ */
.ai-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:4px}
.refresh-btn{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.04);
  border:1px solid var(--line);color:var(--ink-3);border-radius:9px;padding:6px 11px;
  font:600 12px/1 inherit;cursor:pointer;transition:all .12s ease}
.refresh-btn svg{width:14px;height:14px}
.refresh-btn:hover{color:var(--ink);border-color:var(--g-mid);background:rgba(99,124,255,.1)}
.refresh-btn:active svg{transform:rotate(-180deg);transition:transform .4s ease}

/* ============ Compact chat (per-voice) ============ */
.person-chat{margin-bottom:8px}
.chat-compact .chat{height:auto}
.chat-compact .chat-scroll{max-height:420px;min-height:0;padding:4px 0}
.chat-compact .composer{position:static;padding:12px 0 0;background:none;border:none}
.chat-compact .chat-empty{padding:8px 0 4px;text-align:left;align-items:flex-start}
.chat-compact .chat-empty h2{font-size:16px;margin:0 0 10px}
.chat-compact .suggestions{justify-content:flex-start}
.composer-note a{color:var(--g-mid);text-decoration:none}
.composer-note a:hover{text-decoration:underline}

/* ============ Docked assistant (every page) ============ */
.assistant-launcher{position:fixed;right:24px;bottom:24px;z-index:60;display:inline-flex;align-items:center;
  gap:9px;padding:13px 20px 13px 16px;border:none;border-radius:100px;cursor:pointer;color:#fff;
  font:700 14px/1 inherit;background:linear-gradient(120deg,#3cbdff,#637cff 55%,#8c3aff);
  box-shadow:0 12px 34px -8px rgba(80,110,255,.6),0 2px 8px rgba(0,0,0,.3);
  transition:transform .14s ease,box-shadow .14s ease}
.assistant-launcher svg{width:19px;height:19px}
.assistant-launcher:hover{transform:translateY(-2px);box-shadow:0 18px 44px -8px rgba(80,110,255,.7)}
.assistant[data-state="open"] .assistant-launcher,
.assistant[data-state="expanded"] .assistant-launcher{opacity:0;pointer-events:none;transform:translateY(12px)}

.assistant-panel{position:fixed;top:0;right:0;height:100vh;width:min(440px,100vw);z-index:61;
  display:flex;flex-direction:column;background:var(--surface,#0f1324);
  border-left:1px solid var(--line,#242a44);box-shadow:-24px 0 60px -20px rgba(0,0,0,.6);
  transform:translateX(102%);transition:transform .28s cubic-bezier(.4,0,.2,1)}
.assistant[data-state="open"] .assistant-panel{transform:translateX(0)}
.assistant[data-state="expanded"] .assistant-panel{transform:translateX(0);width:min(880px,100vw)}
.assistant[data-state="expanded"][data-side="hidden"] .assistant-panel{width:min(720px,100vw)}
.assistant-head{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px 16px 14px 20px;border-bottom:1px solid var(--line);flex:none}
.assistant-title{display:flex;align-items:center;gap:9px;font:700 15px/1 inherit;color:var(--ink)}
.asst-dot{width:8px;height:8px;border-radius:50%;background:#33d17a;box-shadow:0 0 0 3px rgba(51,209,122,.18)}
.assistant-actions{display:flex;gap:4px}
.asst-ico{width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;
  background:transparent;border:none;border-radius:9px;color:var(--ink-3);cursor:pointer;transition:all .12s}
.asst-ico svg{width:17px;height:17px}
.asst-ico:hover{background:rgba(255,255,255,.06);color:var(--ink)}
.assistant-body{flex:1;min-height:0;display:flex;flex-direction:column;padding:0 18px}
.assistant-body .chat{height:100%}
.assistant-body .chat-scroll{flex:1;min-height:0;padding:16px 0}
.assistant-body .composer{position:static;padding:12px 0 18px;background:none;border:none}
.assistant-body .chat-empty{text-align:left;align-items:flex-start;padding:12px 0}
.assistant-body .chat-empty h2{font-size:18px}
.assistant-body .suggestions{justify-content:flex-start}
@media(max-width:640px){.assistant-panel,.assistant[data-state="expanded"] .assistant-panel{width:100vw}
  .assistant-launcher span{display:none}.assistant-launcher{padding:15px}}

/* ============ Login page (split) ============ */
.login{display:grid;grid-template-columns:minmax(340px,1fr) 1.15fr;min-height:100vh}
.login-form{display:flex;align-items:center;justify-content:center;padding:40px;background:var(--bg-0,#0a1026)}
.login-box{width:100%;max-width:380px}
.login-logo{height:26px;margin-bottom:22px}
.login-kicker{font:600 11px/1 "IBM Plex Mono",monospace;letter-spacing:2.5px;text-transform:uppercase;color:var(--ink-3);margin-bottom:26px}
.login-box h1{font-size:30px;font-weight:800;letter-spacing:-.5px;margin:0 0 8px}
.login-sub{color:var(--ink-3);font-size:14px;line-height:1.55;margin:0 0 26px}
.login-box form{display:flex;flex-direction:column;gap:6px}
.login-box label{font:600 12px/1 inherit;color:var(--ink-2);margin-top:14px;letter-spacing:.3px}
.login-box input{background:var(--surface,#141b3a);border:1px solid var(--line-2,#2a3358);border-radius:11px;
  padding:13px 15px;color:var(--ink);font-size:15px;font-family:inherit;outline:none;transition:border-color .15s,box-shadow .15s}
.login-box input:focus{border-color:var(--g-mid);box-shadow:0 0 0 3px rgba(99,124,255,.16)}
.login-box button{margin-top:24px;padding:14px;border:none;border-radius:11px;cursor:pointer;color:#fff;
  font:700 15px/1 inherit;background:linear-gradient(120deg,#3cbdff,#637cff 55%,#8c3aff);
  box-shadow:0 12px 30px -10px rgba(80,110,255,.6);transition:transform .12s,box-shadow .12s}
.login-box button:hover{transform:translateY(-1px);box-shadow:0 16px 38px -10px rgba(80,110,255,.7)}
.lg-error{background:rgba(210,60,60,.12);border:1px solid rgba(210,60,60,.35);color:#f0a090;
  padding:11px 14px;border-radius:10px;font-size:13px;margin-bottom:18px}
.login-foot{margin-top:28px;font:500 11px/1 "IBM Plex Mono",monospace;color:var(--ink-4);letter-spacing:.4px}
.login-hero{position:relative;overflow:hidden;display:flex;align-items:center;padding:56px;
  background:
    radial-gradient(1000px 700px at 80% -10%,rgba(140,58,255,.28),transparent 60%),
    radial-gradient(800px 600px at 0% 110%,rgba(60,189,255,.22),transparent 55%),
    linear-gradient(150deg,#0e1530,#141b3a)}
.login-hero-inner{position:relative;max-width:520px}
.lh-badge{display:inline-block;font:600 11px/1 "IBM Plex Mono",monospace;letter-spacing:.06em;text-transform:uppercase;
  color:var(--g-blue);background:rgba(99,124,255,.1);border:1px solid rgba(99,124,255,.3);padding:7px 12px;border-radius:100px;margin-bottom:22px}
.login-hero h2{font-size:38px;line-height:1.12;font-weight:800;letter-spacing:-.7px;margin:0 0 16px}
.login-hero h2 .grad{background:var(--gradient);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.login-hero p{color:var(--ink-2);font-size:16px;line-height:1.6;margin:0 0 34px;max-width:440px}
.lh-stats{display:flex;gap:34px}
.lh-stats b{font-family:"IBM Plex Mono",monospace;font-size:24px;color:var(--ink);display:block}
.lh-stats span{font:600 10.5px/1 inherit;letter-spacing:1.4px;text-transform:uppercase;color:var(--ink-4)}
@media(max-width:820px){.login{grid-template-columns:1fr}.login-hero{display:none}}

/* Logout button in the topbar corner */
.logout{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;
  border-radius:9px;color:var(--ink-3);border:1px solid var(--line);margin-left:8px;transition:all .12s}
.logout svg{width:17px;height:17px}
.logout:hover{color:var(--ink);border-color:var(--g-mid);background:rgba(99,124,255,.1)}

/* ============ Shared: share bars, spark, chart foot ============ */
.muted { color: var(--ink-4); } .pad { padding: 14px 2px; }
.gradtext { background: var(--gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.spark { width: 100%; height: 120px; display: block; }
.ch-foot { font-size: 12px; margin-top: 12px; }
.share-bars { display: flex; flex-direction: column; gap: 9px; }
.sb-row { display: grid; grid-template-columns: 150px 1fr 46px; align-items: center; gap: 12px; }
.sb-name { font-size: 13px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-track { height: 9px; background: rgba(255,255,255,.05); border-radius: 100px; overflow: hidden; }
.sb-fill { height: 100%; background: var(--gradient); border-radius: 100px; }
.sb-val { font-family: var(--mono); font-size: 12px; color: var(--ink-3); text-align: right; }

/* ============ Dashboard ============ */
.dash-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 20px; }
.dtile { background: linear-gradient(180deg, var(--surface), rgba(20,27,58,.6)); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; box-shadow: var(--glow); }
.dt-k { font: 600 11px/1 var(--mono); letter-spacing: 1.4px; text-transform: uppercase; color: var(--ink-4); }
.dt-v { font-size: 34px; font-weight: 800; letter-spacing: -.6px; margin: 10px 0 6px; }
.dt-v span { font-size: 18px; color: var(--ink-4); font-weight: 600; }
.dt-s { font-size: 13px; color: var(--ink-3); }
.dash-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 22px; align-items: start; }
.dash-panel { padding: 18px 20px; }
.dp-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.dp-head h3 { margin: 0; font-size: 15px; font-weight: 700; }
.dp-head .muted { font-size: 12px; }
.mv-row { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "name z" "sub sub"; gap: 2px 10px; padding: 10px 0; border-top: 1px solid var(--line); }
.mv-name { grid-area: name; font-weight: 600; font-size: 14px; }
.mv-z { grid-area: z; font-family: var(--mono); font-size: 13px; font-weight: 600; }
.mv-z.up { color: var(--up); } .mv-z.down { color: var(--down); }
.mv-sub { grid-area: sub; font-size: 12px; color: var(--ink-4); font-family: var(--mono); }
.dash-jump { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.jcard { display: block; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); transition: all .14s var(--ease); }
.jcard:hover { transform: translateY(-2px); border-color: rgba(99,124,255,.5); box-shadow: 0 10px 30px -12px rgba(60,120,255,.35); }
.jcard b { display: block; font-size: 15px; margin-bottom: 6px; }
.jcard span { font-size: 13px; color: var(--ink-3); }

/* ============ Patterns: heatmap ============ */
.hm-card { padding: 18px 20px; margin-bottom: 16px; }
.hm-scroll { overflow-x: auto; margin-top: 8px; }
.hm { border-collapse: separate; border-spacing: 2px; }
.hm-qt { font: 500 10px/1 var(--mono); color: var(--ink-4); transform: rotate(-60deg); transform-origin: left bottom; height: 44px; white-space: nowrap; padding-left: 8px; }
.hm-corner { width: 130px; }
.hm-name { font-size: 12.5px; color: var(--ink-2); text-align: right; padding-right: 10px; white-space: nowrap; }
.hm-cell { width: 22px; height: 22px; border-radius: 4px; }
.hm-cell:hover { outline: 2px solid var(--g-mid); }

/* ============ Risk ============ */
.risk-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 16px; }
.rtile { background: linear-gradient(180deg, var(--surface), rgba(20,27,58,.6)); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; box-shadow: var(--glow); }
.rt-label { font: 600 10.5px/1 var(--mono); letter-spacing: 1.2px; text-transform: uppercase; color: var(--ink-4); }
.rt-val { font-size: 30px; font-weight: 800; letter-spacing: -.5px; margin: 9px 0 6px; font-family: var(--mono); }
.rt-sub { font-size: 12.5px; color: var(--ink-3); }
.pill { display: inline-block; font: 600 10px/1 var(--mono); padding: 3px 7px; border-radius: 100px; }
.pill.hot { background: rgba(242,121,95,.14); color: #f2795f; } .pill.warm { background: rgba(255,188,125,.14); color: var(--gold); } .pill.cool { background: rgba(78,200,154,.14); color: var(--up); }
.risk-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
.corr-wrap { overflow-x: auto; }
.corr { border-collapse: separate; border-spacing: 2px; margin-top: 6px; }
.corr th.corr-col { font: 500 10px/1 var(--mono); color: var(--ink-4); padding: 4px; }
.corr td.corr-row { font-size: 11.5px; color: var(--ink-2); text-align: right; padding-right: 8px; white-space: nowrap; }
.corr td.corr-cell { width: 34px; height: 30px; border-radius: 4px; text-align: center; font: 500 10.5px/1 var(--mono); color: var(--ink); }

/* ============ Frameworks ============ */
.fw-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; margin-bottom: 22px; }
.fw-method { padding: 18px 20px; display: flex; flex-direction: column; gap: 8px; }
.fw-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.fw-name { font-size: 16px; font-weight: 700; }
.fw-badge { font: 600 10px/1 var(--mono); letter-spacing: .04em; text-transform: uppercase; padding: 4px 9px; border-radius: 100px; }
.fw-badge[data-st=surfaced] { background: rgba(78,200,154,.14); color: var(--up); }
.fw-badge[data-st=computed] { background: rgba(99,124,255,.14); color: var(--g-mid); }
.fw-badge[data-st=roadmap] { background: rgba(255,255,255,.06); color: var(--ink-4); }
.fw-cite { font: 500 12px/1.3 var(--mono); color: var(--g-blue); }
.fw-desc { font-size: 13.5px; line-height: 1.55; color: var(--ink-2); flex: 1; margin: 2px 0; }
.fw-link { font-size: 13px; font-weight: 600; color: var(--g-mid); } .fw-link.muted { color: var(--ink-4); font-weight: 500; }
@media (max-width: 900px) { .dash-tiles, .risk-tiles, .dash-jump { grid-template-columns: 1fr 1fr; } .dash-cols, .risk-cols { grid-template-columns: 1fr; } }

/* ============ Dashboard mover tooltips ============ */
.mv-row { position: relative; }
.mv-row:hover { background: rgba(255,255,255,.02); }
.mv-name { border-bottom: 1px dotted transparent; }
.mv-row:hover .mv-name { border-bottom-color: var(--ink-4); }
.mv-tip {
  position: absolute; left: 0; top: calc(100% + 6px); z-index: 40;
  width: min(380px, 86vw); padding: 14px 16px;
  background: var(--surface-2); border: 1px solid var(--line-2); border-radius: 12px;
  box-shadow: 0 20px 44px -14px rgba(0,0,0,.65);
  font-size: 13px; line-height: 1.6; color: var(--ink-2);
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .16s var(--ease), transform .16s var(--ease), visibility .16s;
  pointer-events: none;
}
.mv-tip b { color: var(--ink); }
.mv-row:hover .mv-tip, .mv-row:focus-within .mv-tip { opacity: 1; visibility: visible; transform: translateY(0); }

/* ============ Signals: findings as clickable cards + read drawer ============ */
.finding.clickable { cursor: pointer; transition: transform .12s var(--ease), border-color .12s var(--ease); }
.finding.clickable:hover { transform: translateY(-2px); border-color: rgba(99,124,255,.5); box-shadow: 0 12px 34px -14px rgba(60,120,255,.4); }
.finding-more { margin-top: 15px; font-size: 13px; font-weight: 600; color: var(--g-mid); opacity: .75; transition: opacity .12s; }
.finding.clickable:hover .finding-more { opacity: 1; }
.drawer-analysis { margin-bottom: 6px; }
/* The drawer label was inheriting body text while the same label on every other
   card was a styled eyebrow. One label, one treatment. */
.drawer-analysis .ai-tag { display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; font-weight: 700;
  color: var(--g-blue); margin-bottom: 14px; }
.drawer-analysis .ai-tag::before { content: ""; width: 16px; height: 16px; border-radius: 5px;
  background: var(--gradient); }
.dh-sub { font: 700 11px/1 var(--mono); letter-spacing: 1.3px; text-transform: uppercase; color: var(--ink-3);
  margin: 24px 0 12px; padding-top: 16px; border-top: 1px solid var(--line); }
.drawer-arg { font-size: 15px; line-height: 1.65; color: var(--ink-2); margin: 4px 0 16px; }
.q-who { font-size: 12px; color: var(--ink-4); margin-top: 7px; font-weight: 600; }

/* ============ What happens next: a clean briefing list ============ */
.proj-list { padding: 2px 4px; }
.proj-item { display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 16px 18px; border-top: 1px solid var(--line); }
.proj-item:first-child { border-top: none; }
.proj-item:hover { background: rgba(255,255,255,.02); }
.proj-body { min-width: 0; }
.proj-claim { font-size: 15.5px; font-weight: 600; color: var(--ink); line-height: 1.4; letter-spacing: -.1px; }
.proj-meta { font: 500 12.5px/1.4 var(--mono); color: var(--ink-4); margin-top: 5px; }
.proj-status { display: inline-flex; align-items: center; gap: 7px; font: 600 12px/1 inherit;
  color: var(--ink-3); white-space: nowrap; flex: none; }
.proj-status i { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-4); flex: none; }
.proj-status[data-s=TRACKING] { color: var(--g-blue); } .proj-status[data-s=TRACKING] i { background: var(--g-blue); }
.proj-status[data-s=CONSENSUS] { color: var(--up); } .proj-status[data-s=CONSENSUS] i { background: var(--up); }
.proj-status[data-s=EARLY] { color: var(--g-purple); } .proj-status[data-s=EARLY] i { background: var(--g-purple); }
.proj-status[data-s=HOLDING] { color: var(--gold); } .proj-status[data-s=HOLDING] i { background: var(--gold); }
@media (max-width: 640px) { .proj-item { flex-direction: column; align-items: flex-start; gap: 8px; } }

/* ============ Where the room splits: two-column table ============ */
.splits-table { padding: 0; overflow-x: auto; }
.splits-t { width: 100%; border-collapse: collapse; }
.splits-t thead th { padding: 15px 22px; text-align: left; border-bottom: 1px solid var(--line); }
.side-tag { display: inline-block; font: 700 10.5px/1 var(--mono); letter-spacing: 1px; text-transform: uppercase; padding: 6px 12px; border-radius: 100px; }
.side-tag.a { color: var(--g-blue); background: rgba(60,189,255,.12); }
.side-tag.b { color: var(--gold); background: rgba(255,188,125,.12); }
.split-cell { padding: 22px; vertical-align: top; width: 46%; }
.split-claim { font-size: 15.5px; line-height: 1.55; font-weight: 600; color: var(--ink); margin: 0 0 14px; }
.split-who { display: flex; align-items: center; gap: 9px; }
.split-who .avatar { width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center;
  justify-content: center; background: var(--surface-2); border: 1px solid var(--line-2); font: 700 11px/1 var(--mono); color: var(--ink-2); }
.sw-name { font-weight: 600; font-size: 13.5px; }
.split-src { font: 500 12px/1.5 var(--mono); color: var(--ink-4); margin-top: 8px; }
.vs-cell, .vs-th { width: 8%; text-align: center; vertical-align: middle; border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
.vs-badge { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%;
  background: var(--surface-2); border: 1px solid var(--line-2); font: 700 12px/1 var(--mono); color: var(--ink-3); }
@media (max-width: 760px) { .splits-t thead { display: none; } .splits-t tr { display: flex; flex-direction: column; } .split-cell { width: auto; } .vs-cell { display: none; } }

/* ============ Theme dossier ============ */
.theme-hero { margin-bottom: 16px; }
.theme-hero h1 { font-size: 30px; font-weight: 800; letter-spacing: -.5px; margin: 0 0 10px; }
.hero-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.hchip { font: 700 11px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; padding: 6px 12px;
  border-radius: 100px; background: rgba(255,255,255,.05); color: var(--ink-2); border: 1px solid var(--line-2); }
.hchip.stage-emerging { color: var(--g-blue); background: rgba(60,189,255,.12); border-color: transparent; }
.hchip.stage-accelerating { color: var(--g-mid); background: rgba(99,124,255,.14); border-color: transparent; }
.hchip.stage-consensus { color: var(--g-purple); background: rgba(140,58,255,.14); border-color: transparent; }
.hchip.stage-fading { color: var(--ink-3); background: rgba(255,255,255,.05); }
.glance { display: grid; grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)); gap: 12px; margin: 16px 0; }
.gcard { background: linear-gradient(180deg, var(--surface), rgba(20,27,58,.6)); border: 1px solid var(--line);
  border-radius: 14px; padding: 15px 16px; box-shadow: var(--glow); }
.g-label { font: 600 10.5px/1 var(--mono); letter-spacing: 1.2px; text-transform: uppercase; color: var(--ink-4); }
.g-value { font-size: 18px; font-weight: 700; color: var(--ink); margin: 9px 0 5px; letter-spacing: -.2px; }
.g-sub { font-size: 12.5px; line-height: 1.45; color: var(--ink-3); }
.theme-voices { display: flex; flex-wrap: wrap; gap: 9px; }
.tv-chip { display: inline-flex; align-items: center; gap: 9px; padding: 7px 13px 7px 7px; border-radius: 100px;
  background: var(--surface); border: 1px solid var(--line-2); transition: all .12s var(--ease); }
.tv-chip:hover { border-color: var(--g-mid); transform: translateY(-1px); }
.tv-chip .av { width: 26px; height: 26px; font-size: 10.5px; }
.tv-n { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.tv-c { font: 600 11px/1 var(--mono); color: var(--ink-4); background: rgba(255,255,255,.05); padding: 3px 7px; border-radius: 6px; }
.theme-receipts { display: flex; flex-direction: column; gap: 11px; }

/* Theme dossier: the standing finding callout */
.theme-call { padding: 20px 22px; margin: 16px 0; border-left: 3px solid var(--g-mid); }
.call-tag { font: 700 11px/1 var(--mono); letter-spacing: 1.3px; text-transform: uppercase; color: var(--g-mid); margin-bottom: 10px; }
.theme-call h3 { font-size: 19px; font-weight: 700; margin: 0 0 12px; line-height: 1.3; }

/* ============ "Opens a side panel" affordance ============ */
.finding.clickable, .chip[data-theme], .theme-call { position: relative; }
/* Anything carrying the corner affordance keeps its text clear of it. */
.finding.clickable > *, .theme-call > * { padding-right: 30px; }
.finding.clickable .stats, .finding.clickable .finding-more { padding-right: 0; }
.opens-ic { position: absolute; top: 13px; right: 13px; width: 17px; height: 17px; color: var(--ink-4);
  opacity: .42; transition: opacity .15s var(--ease), color .15s var(--ease); pointer-events: none; }
.finding.clickable:hover .opens-ic, .chip[data-theme]:hover .opens-ic, .theme-call:hover .opens-ic {
  opacity: 1; color: var(--g-mid); }
.chip .opens-ic { top: auto; bottom: 11px; right: 11px; width: 14px; height: 14px; }
.yoy td.row-open { text-align: right; width: 34px; padding-right: 14px; }
.yoy td.row-open .opens-ic { position: static; opacity: .35; }
.yoy tr:hover td.row-open .opens-ic { opacity: 1; color: var(--g-mid); }

/* Read not yet built: a quiet prompt to build it, never a blocking wait */
.pending-read { padding: 10px 2px 4px; }
.pending-read p { color: var(--ink-3); font-size: 14px; margin: 0 0 12px; }

/* Rail hover tip: appears below the row (inside the rail column, never over the
   dossier), fully opaque and on top so it is always readable. */
.ti-tip { position: absolute; left: 6px; top: calc(100% + 4px); z-index: 200; width: 250px; padding: 12px 14px;
  background: var(--bg-1); border: 1px solid var(--line-2); border-radius: 11px;
  box-shadow: 0 22px 52px -12px rgba(0,0,0,.8); font-size: 12.5px; line-height: 1.55; color: var(--ink-2);
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .14s var(--ease), transform .14s var(--ease), visibility .14s; pointer-events: none; }
.ti-tip b { color: var(--ink); }
.theme-item:hover .ti-tip { opacity: 1; visibility: visible; transform: translateY(0); }

/* Glance card hover tip */
.gcard.has-tip { cursor: help; position: relative; }
.g-tip { position: absolute; left: 0; top: calc(100% + 8px); z-index: 200; width: 250px; padding: 12px 14px;
  background: var(--bg-1); border: 1px solid var(--line-2); border-radius: 11px;
  box-shadow: 0 22px 52px -12px rgba(0,0,0,.8); font-size: 12.5px; line-height: 1.55; color: var(--ink-2);
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .14s var(--ease), transform .14s var(--ease), visibility .14s; pointer-events: none; }
.gcard.has-tip:hover .g-tip { opacity: 1; visibility: visible; transform: translateY(0); }

/* ============ Risk register ============ */
.reg-list { display: flex; flex-direction: column; gap: 14px; }
.reg-card { padding: 22px 24px; }
.reg-top { display: flex; align-items: center; gap: 11px; margin-bottom: 12px; }
.reg-num { font: 700 12px/1 var(--mono); color: var(--ink-4); }
.reg-type { font: 600 10.5px/1 var(--mono); letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--ink-3); background: rgba(255,255,255,.05); border: 1px solid var(--line);
  padding: 5px 10px; border-radius: 100px; }
.reg-sev { margin-left: auto; font: 700 10.5px/1 var(--mono); letter-spacing: 1.1px; text-transform: uppercase;
  padding: 5px 11px; border-radius: 100px; }
.reg-sev[data-s=high] { color: #f2795f; background: rgba(242,121,95,.14); }
.reg-sev[data-s=elevated] { color: var(--gold); background: rgba(255,188,125,.14); }
.reg-sev[data-s=moderate] { color: var(--g-blue); background: rgba(60,189,255,.12); }
.reg-card h3 { font-size: 20px; font-weight: 700; letter-spacing: -.3px; line-height: 1.3; margin: 0 0 12px; }
.reg-exposure { font-size: 14.5px; line-height: 1.68; color: var(--ink-2); margin: 0 0 16px; max-width: 900px; }
.reg-watch { display: flex; flex-direction: column; gap: 5px; padding-top: 14px; border-top: 1px solid var(--line); }
.rw-label { font: 700 10.5px/1 var(--mono); letter-spacing: 1.2px; text-transform: uppercase; color: var(--g-mid); }
.rw-text { font-size: 14px; line-height: 1.55; color: var(--ink); }
.reg-foot { display: flex; justify-content: flex-end; margin-top: 14px; }


/* Frameworks: cards open the method detail in the panel */
.fw-method.clickable { position: relative; cursor: pointer;
  transition: transform .12s var(--ease), border-color .12s var(--ease), box-shadow .12s var(--ease); }
.fw-method.clickable:hover { transform: translateY(-2px); border-color: rgba(99,124,255,.5);
  box-shadow: 0 12px 34px -14px rgba(60,120,255,.4); }
.fw-method .fw-link { opacity: .75; transition: opacity .12s; }
.fw-method.clickable:hover .fw-link { opacity: 1; }
.drawer .fw-status { margin-top: 12px; }
.fw-see { display: inline-block; margin-top: 22px; font-size: 13.5px; font-weight: 600; color: var(--g-mid); }

/* ============ Voices: sections, filters, richer cards ============ */
.vfilters { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.vchip { padding: 7px 13px; border-radius: 100px; border: 1px solid var(--line-2);
  background: var(--surface); color: var(--ink-3); font: 600 12.5px/1 inherit; cursor: pointer;
  transition: all .12s var(--ease); }
.vchip:hover { color: var(--ink); border-color: var(--g-mid); }
.vchip.on { background: var(--gradient); color: #fff; border-color: transparent; }
.vsec-head { margin: 30px 0 6px; }
.vsec-head:first-child { margin-top: 8px; }
.vsec-note { font-size: 13.5px; color: var(--ink-3); margin: 0 0 14px; }
.v-role { font: 500 12px/1.4 var(--mono); color: var(--g-blue); margin-top: 4px; }
.house-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-left: 7px;
  background: var(--gradient); vertical-align: middle; }

/* Voices: the filter row wraps across the full width so every category is
   visible at once. A row that scrolls sideways hides its own options. */
.vfilters { flex-wrap: wrap; width: 100%; row-gap: 9px; padding-bottom: 2px; }
.vchip { white-space: nowrap; flex: none; }
.voice-card { position: relative; }
.v-label { position: absolute; top: 12px; right: 12px; z-index: 2;
  font: 700 9.5px/1 var(--mono); letter-spacing: .09em; text-transform: uppercase;
  padding: 5px 9px; border-radius: 100px; color: var(--g-blue);
  background: rgba(60,189,255,.12); border: 1px solid rgba(60,189,255,.28); }
.voice-card .voice-top { padding-right: 96px; }
.bench-list { display: flex; flex-wrap: wrap; gap: 8px; }
.bench-item { display: inline-flex; align-items: baseline; gap: 7px; padding: 8px 13px;
  border-radius: 10px; background: var(--surface); border: 1px solid var(--line);
  cursor: pointer; transition: border-color .15s, background .15s; }
.bench-item:hover { border-color: var(--line-2); background: var(--surface-2, var(--surface)); }
.bench-item b { font-size: 13.5px; font-weight: 600; color: var(--ink-2); }
.bench-item span { font: 500 11.5px/1 var(--mono); color: var(--ink-4); }
.vmore { margin-top: 12px; padding: 9px 16px; border-radius: 100px; border: 1px solid var(--line-2);
  background: var(--surface); color: var(--g-mid); font: 600 13px/1 inherit; cursor: pointer;
  transition: all .12s var(--ease); }
.vmore:hover { border-color: var(--g-mid); background: rgba(99,124,255,.1); }
.known-for { padding: 20px 22px; margin-bottom: 8px; }
.known-for p { font-size: 16px; line-height: 1.6; color: var(--ink); margin: 10px 0 14px; }
.known-note { font-size: 12.5px; line-height: 1.55; color: var(--ink-4); padding-top: 12px; border-top: 1px solid var(--line); }

/* Evidence on a voice profile: the passages from the hours they were in, each
   seekable. Shown for every voice, so a one-appearance guest still carries
   receipts rather than an empty page. */
.evidence-list { display: grid; gap: 12px; }
.evidence-item { padding: 14px 16px; }
.evidence-item .q-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 6px;
  font-size: 12px; color: var(--ink-4); flex-wrap: wrap; }
.evidence-item .ev-title { font-size: 12.5px; color: var(--ink-3); margin-bottom: 8px; }
.evidence-item .q-text { font-family: Georgia, serif; font-size: 14.5px; line-height: 1.62;
  color: var(--ink-2); }

/* ---- Verity AI: conversation history ----
   The sidebar only exists at full width. In the docked panel there is no room
   for it, and a list of past chats is not what a quick question needs. */
/* A flex child defaults to min-width:auto, so the chat body could grow wider
   than the panel and push the send button off the right edge. Both levels need
   the guard, and the wrapper needs to be told it is exactly panel-width. */
.assistant-main { flex: 1; min-height: 0; min-width: 0; width: 100%; display: flex; }
.assistant-main > .assistant-body { min-width: 0; }
.asst-side { display: none; }
.assistant[data-state="expanded"] .asst-side {
  display: flex; flex-direction: column; width: 236px; flex: none;
  border-right: 1px solid var(--line); padding: 14px 10px; gap: 10px; min-height: 0; }
.asst-new { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 10px;
  border: 1px solid var(--line-2); background: var(--surface); color: var(--ink-2);
  font: 600 13px/1 inherit; cursor: pointer; flex: none; }
.asst-new:hover { color: #fff; border-color: transparent; background: var(--gradient); }
.asst-new svg { width: 15px; height: 15px; }
.asst-convos { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 3px; }
.asst-convo { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-radius: 9px;
  cursor: pointer; color: var(--ink-3); font-size: 13px; line-height: 1.35; }
.asst-convo:hover { background: var(--surface); color: var(--ink-2); }
.asst-convo.on { background: var(--surface); color: var(--ink); }
.asst-convo .ct { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.asst-convo .cx { flex: none; width: 20px; height: 20px; display: none; align-items: center;
  justify-content: center; border-radius: 6px; border: 0; background: none;
  color: var(--ink-4); cursor: pointer; }
.asst-convo:hover .cx { display: inline-flex; }
.asst-convo .cx:hover { background: rgba(255,90,90,.14); color: #ff8080; }
.asst-convo .cx svg { width: 13px; height: 13px; }
.asst-empty { color: var(--ink-4); font-size: 12.5px; padding: 8px 10px; line-height: 1.5; }
.assistant[data-state="expanded"] .assistant-body { padding: 0 22px; }

/* ---- Framework modal ----
   The method, and what it is telling us today. Wide enough for a chart and the
   passages underneath it, because a claim with no receipts is just an assertion. */
.fmodal { position: fixed; inset: 0; z-index: 90; display: none;
  background: rgba(6, 8, 20, .72); backdrop-filter: blur(3px);
  padding: 4vh 24px; overflow-y: auto; }
.fmodal.open { display: block; }
body.modal-open { overflow: hidden; }
.fmodal-card { max-width: 1040px; margin: 0 auto; background: var(--bg-1);
  border: 1px solid var(--line-2); border-radius: 18px; overflow: hidden;
  box-shadow: 0 30px 90px rgba(0,0,0,.55); }
.fm-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px;
  padding: 24px 28px 18px; border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(99,124,255,.09), transparent); }
.fm-kicker { font: 600 11.5px/1 var(--mono); letter-spacing: .09em; text-transform: uppercase;
  color: var(--g-blue); margin-bottom: 8px; }
.fm-head h2 { margin: 0; font-size: 25px; font-weight: 800; letter-spacing: -.01em; }
.fm-badges { display: flex; align-items: center; gap: 12px; margin-top: 11px; }
.fm-see { color: var(--g-mid); font-size: 13px; font-weight: 600; text-decoration: none; }
.fm-see:hover { text-decoration: underline; }
.fm-close { flex: none; width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--line-2);
  background: var(--surface); color: var(--ink-3); font-size: 21px; line-height: 1; cursor: pointer; }
.fm-close:hover { color: #fff; border-color: var(--g-mid); }
.fm-body { padding: 22px 28px 30px; }
.fm-lead { font-size: 16px; line-height: 1.6; color: var(--ink-2); margin: 0 0 22px; }
.fm-verdict { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 24px; }
@media (max-width: 820px) { .fm-verdict { grid-template-columns: 1fr; } }
.fm-col { border: 1px solid var(--line); border-radius: 13px; padding: 16px 18px; background: var(--surface); }
.fm-col.says { border-color: rgba(99,124,255,.34); }
.fm-col-head { font: 700 10.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-4); margin-bottom: 12px; }
.fm-line { display: flex; gap: 10px; margin-bottom: 11px; font-size: 14px; line-height: 1.55;
  color: var(--ink-2); }
.fm-line:last-child { margin-bottom: 0; }
.fm-mark { flex: none; width: 18px; height: 18px; border-radius: 50%; display: inline-flex;
  align-items: center; justify-content: center; font-size: 11px; margin-top: 1px;
  background: rgba(99,124,255,.18); color: var(--g-mid); }
.fm-mark.no { background: rgba(255,255,255,.06); color: var(--ink-4); }
.fm-chart { border: 1px solid var(--line); border-radius: 13px; padding: 18px 20px;
  background: var(--surface); margin-bottom: 24px; }
.fm-chart-head { display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.fm-chart-head h3 { margin: 0; font-size: 15px; font-weight: 700; }
.fm-chart-note { font: 500 11.5px/1.4 var(--mono); color: var(--ink-4); }
.fm-bars { display: flex; flex-direction: column; gap: 9px; }
.fm-bar-row { display: grid; grid-template-columns: minmax(120px, 200px) 1fr 62px;
  align-items: center; gap: 12px; }
.fb-label { font-size: 13px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fb-track { height: 9px; border-radius: 100px; background: rgba(255,255,255,.05); overflow: hidden; }
.fb-track i { display: block; height: 100%; border-radius: 100px; background: var(--gradient); }
.fb-track i.neg { background: linear-gradient(90deg, #6b7290, #4a5170); }
.fb-val { font: 600 12.5px/1 var(--mono); color: var(--ink-3); text-align: right; }
.fm-line { }
svg.fm-line { width: 100%; height: 210px; display: block; }
.fm-ax { font: 500 10px var(--mono); fill: var(--ink-4); }
.fm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 26px; }
@media (max-width: 820px) { .fm-grid { grid-template-columns: 1fr; } }
.fm-block p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--ink-2); }
.fm-sub { font: 700 10.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-4); margin-bottom: 10px; }
.fm-sub-lg { margin-top: 4px; margin-bottom: 13px; font-size: 11.5px; color: var(--ink-3); }
.fm-refs { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.fm-ref { display: grid; grid-template-columns: 108px 1fr 96px; gap: 12px; align-items: center;
  padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface); text-decoration: none; color: inherit; }
.fm-ref:hover { border-color: var(--g-mid); }
.fr-src { font: 600 11px/1 var(--mono); color: var(--g-blue); }
.fr-title { font-size: 13.5px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fr-date { font: 500 11.5px/1 var(--mono); color: var(--ink-4); text-align: right; }
.fmodal .evidence-list { margin-bottom: 24px; }

/* ---- Briefing: the organization picker ----
   Every firm on the record can be briefed, so the selector has to search, not
   just list. A dropdown that shows one client is a demo; this is a product. */
.brief-picker { display: flex; align-items: center; gap: 18px; padding: 16px 20px; margin-bottom: 22px; }
.bp-label { font: 700 10.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-4); flex: none; }
.bp-select { position: relative; flex: 1; max-width: 520px; }
.bp-current { width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 11px 16px; border-radius: 11px; border: 1px solid var(--line-2);
  background: var(--surface); color: var(--ink); font: 600 15px/1.2 inherit; cursor: pointer; }
.bp-current:hover { border-color: var(--g-mid); }
.bp-current svg { width: 16px; height: 16px; flex: none; color: var(--ink-4); }
.bp-menu { display: none; position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 40;
  background: var(--bg-1); border: 1px solid var(--line-2); border-radius: 12px;
  box-shadow: 0 22px 60px rgba(0,0,0,.5); overflow: hidden; }
.bp-menu.open { display: block; }
.bp-search { width: 100%; border: 0; border-bottom: 1px solid var(--line); background: transparent;
  color: var(--ink); font: 500 14px/1 inherit; padding: 13px 16px; outline: none; }
.bp-list { max-height: 340px; overflow-y: auto; }
.bp-item { display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  padding: 10px 16px; cursor: pointer; }
.bp-item:hover, .bp-item.on { background: var(--surface); }
.bi-name { font-size: 14px; color: var(--ink-2); }
.bp-item.on .bi-name { color: var(--ink); font-weight: 600; }
.bi-meta { font: 500 11.5px/1 var(--mono); color: var(--ink-4); flex: none; }
.bp-empty { padding: 16px; color: var(--ink-4); font-size: 13px; }

table.brief-themes { width: 100%; border-collapse: collapse; }
table.brief-themes td { padding: 12px 14px; border-bottom: 1px solid var(--line); font-size: 14px; }
table.brief-themes tr:last-child td { border-bottom: 0; }
table.brief-themes tr.clickable { cursor: pointer; }
table.brief-themes tr.clickable:hover td { background: rgba(255,255,255,.02); }
.bt-name { font-weight: 600; color: var(--ink); }
.bt-eps, .bt-dir { font: 500 12.5px/1 var(--mono); color: var(--ink-4); }
.bt-num { text-align: right; }
.bt-chg { font: 600 12.5px/1 var(--mono); }
.bt-chg.pos { color: var(--up, #5ad19b); }
.bt-chg.neg { color: var(--down, #f2795f); }
.brief-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.brief-person { display: flex; flex-direction: column; padding: 16px; text-decoration: none; color: inherit; }
.brief-person:hover { border-color: var(--g-mid); }
.bp-top { display: flex; gap: 12px; align-items: center; margin-bottom: 10px; }
.split-row { display: grid; grid-template-columns: 1fr 44px 1fr; align-items: center; gap: 10px; padding: 18px; }
.sr-claim { font-family: Georgia, serif; font-size: 14.5px; line-height: 1.55; color: var(--ink-2); }
.sr-who { font: 500 11.5px/1.4 var(--mono); color: var(--ink-4); margin-top: 8px; }
.sr-vs { text-align: center; font: 700 11px/1 var(--mono); color: var(--ink-4);
  border: 1px solid var(--line-2); border-radius: 100px; padding: 7px 0; }
@media (max-width: 780px) { .split-row { grid-template-columns: 1fr; } }

/* The framework card's affordance lives on the call to action, not stacked
   under the status badge where it collided with it. */
.fw-method .fw-link { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.fw-method .fw-link .opens-ic { position: static; width: 15px; height: 15px; }

/* Collapsing the history gives the answer the full width. The state is
   remembered, because someone who wants the text big wants it big every time. */
.asst-hide { align-self: flex-end; width: 26px; height: 26px; display: inline-flex;
  align-items: center; justify-content: center; border-radius: 7px; border: 0;
  background: none; color: var(--ink-4); cursor: pointer; flex: none; }
.asst-hide:hover { background: var(--surface); color: var(--ink-2); }
.asst-hide svg { width: 15px; height: 15px; }
#asst-show { display: none; }
.assistant[data-state="expanded"][data-side="hidden"] .asst-side { display: none; }
.assistant[data-state="expanded"] #asst-show { display: inline-flex; }
.assistant[data-state="expanded"][data-side="hidden"] #asst-show { color: var(--g-mid); }
/* Hiding the history gives the answer that space. The earlier rule padded it
   back in, which made the text narrower than before, the opposite of the point. */
.assistant[data-state="expanded"][data-side="hidden"] .assistant-body { padding: 0 26px; }
.assistant[data-state="expanded"][data-side="hidden"] .assistant-body .msg-body { max-width: none; }

/* The page has to answer "what am I looking at" before it shows nine cards. */
.fw-intro { padding: 22px 26px; margin-bottom: 18px; }
.fw-intro h3 { margin: 0 0 12px; font-size: 17px; font-weight: 700; }
.fw-intro p { margin: 0 0 10px; font-size: 14.5px; line-height: 1.65; color: var(--ink-2); max-width: 88ch; }
.fw-intro p:last-child { margin-bottom: 0; }

/* The framework modal reads top to bottom as an argument: what it is, why it
   exists, how it works, what it shows now, what it cannot show, the risk. */
.fm-why { display: flex; gap: 12px; align-items: baseline; padding: 14px 18px; margin-bottom: 20px;
  border-left: 2px solid var(--g-mid); background: rgba(99,124,255,.06); border-radius: 0 10px 10px 0;
  font-size: 14.5px; line-height: 1.6; color: var(--ink-2); }
.fm-why-tag { flex: none; font: 700 10px/1.5 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--g-mid); }
.fm-pipe { display: flex; align-items: stretch; gap: 10px; margin-bottom: 24px; flex-wrap: wrap; }
.fm-pipe-step { flex: 1 1 220px; display: flex; gap: 11px; padding: 14px 16px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--surface); }
.fp-n { flex: none; width: 22px; height: 22px; border-radius: 50%; background: rgba(99,124,255,.16);
  color: var(--g-mid); font: 700 11px/22px var(--mono); text-align: center; }
.fp-step { font: 700 10.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-4); margin-bottom: 7px; }
.fp-detail { font-size: 13.5px; line-height: 1.55; color: var(--ink-2); }
.fp-arrow { align-self: center; color: var(--ink-4); font-size: 15px; flex: none; }
@media (max-width: 860px) { .fp-arrow { display: none; } }
.fm-read { padding: 20px 22px; margin-bottom: 24px; }
.fm-read .md p { font-size: 15px; line-height: 1.7; color: var(--ink-2); }
.fm-read .md p:last-child { margin-bottom: 0; }
.fm-rm .fm-block { padding: 16px 18px; border-radius: 12px; border: 1px solid var(--line); }
.fm-risk { border-color: rgba(242,121,95,.32) !important; background: rgba(242,121,95,.05); }
.fm-risk .fm-sub { color: #f2795f; }
.fm-market { border-color: rgba(99,124,255,.3) !important; background: rgba(99,124,255,.05); }
.fm-market .fm-sub { color: var(--g-mid); }

/* Briefing: the partner's watchlist, one card per subject they track. */
.watch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.watch-card { position: relative; padding: 18px 20px; cursor: pointer;
  transition: transform .15s var(--ease), border-color .15s var(--ease); }
.watch-card:hover { transform: translateY(-2px); border-color: rgba(99,124,255,.5); }
.wc-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding-right: 26px; margin-bottom: 6px; }
.wc-name { font-size: 15.5px; font-weight: 700; color: var(--ink); }
.wc-dir { font: 500 12px/1 var(--mono); color: var(--ink-4); margin-bottom: 13px; }
.wc-voices { display: flex; flex-wrap: wrap; gap: 6px; }
.wc-v { font: 500 11.5px/1 var(--mono); color: var(--ink-3); padding: 5px 9px; border-radius: 100px;
  background: var(--surface-2, rgba(255,255,255,.04)); border: 1px solid var(--line); }
.p-source { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line);
  font-size: 12.5px; line-height: 1.55; color: var(--ink-4); max-width: 78ch; }
.bp-count { font: 500 12.5px/1 var(--mono); color: var(--ink-4); margin-left: auto; }
.bp-add { border-top: 1px solid var(--line); padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.bp-add-head { font: 700 10px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-4); }
.bp-in { width: 100%; padding: 9px 12px; border-radius: 9px; border: 1px solid var(--line-2);
  background: var(--surface); color: var(--ink); font: 500 13.5px/1.2 inherit; outline: none; }
.bp-in:focus { border-color: var(--g-mid); }
.bp-add-btn { padding: 9px 14px; border-radius: 9px; border: 0; background: var(--gradient);
  color: #fff; font: 600 13px/1 inherit; cursor: pointer; }

/* The send button is the last thing between a question and an answer, so it gets
   a hit area you cannot miss rather than an icon you have to aim at. */
.composer-inner #go { width: 42px; height: 42px; flex: none; }
.composer-inner { cursor: text; }

/* Two panels can disagree honestly if each says what it is comparing against.
   Without the basis on the face of it, the reader sees a contradiction. */
.dash-basis { margin: 12px 2px 0; font-size: 12.5px; line-height: 1.6; color: var(--ink-4);
  max-width: 92ch; }
.tl-basis { font: 600 10px/1 var(--mono); letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-4); padding: 8px 10px 6px; }


/* A markdown table inside the chat must scroll inside its own box. Without the
   min-width:0 on the flex chain the table widens the message and clips instead. */
.assistant-body .md-table-wrap { max-width: 100%; overflow-x: auto; }
.assistant-body .msg-body, .assistant-body .answer-text, .assistant-body .md { min-width: 0; max-width: 100%; }
.assistant-body .msg { min-width: 0; }
.assistant-body .md pre, .assistant-body .md code { white-space: pre-wrap; word-break: break-word; }
/* The history rail gives ground before the answer does. */
.assistant[data-state="expanded"] .asst-side { width: clamp(150px, 22%, 236px); }

/* The register card's affordance belongs on its call to action, not stacked on
   top of the severity chip it was overlapping. */
.reg-card .reg-open { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.reg-card .reg-open .opens-ic { position: static; width: 15px; height: 15px; }

/* The sample partner is labelled on its face. A briefing that looks this real
   must never be mistaken for a real client relationship. */
.phead { display: flex; align-items: center; justify-content: space-between; gap: 14px;
  flex-wrap: wrap; margin-bottom: 10px; }
.fict-badge { font: 700 10px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--gold, #ffbc7d); background: rgba(255,188,125,.13);
  border: 1px solid rgba(255,188,125,.3); padding: 6px 11px; border-radius: 100px; }
.bp-item .bi-meta { white-space: nowrap; }

/* Heatmap tooltip. The browser's own tooltip took half a second to appear, could
   not be styled, and printed the raw index unit. This one is instant, branded,
   and says what the number means in shares. */
.hm-tip { position: fixed; z-index: 95; pointer-events: none; opacity: 0;
  transform: translateY(3px); transition: opacity .09s ease, transform .09s ease;
  background: var(--bg-1); border: 1px solid var(--line-2); border-radius: 11px;
  padding: 11px 14px; min-width: 190px; max-width: 260px;
  box-shadow: 0 18px 44px rgba(0,0,0,.55); }
.hm-tip.on { opacity: 1; transform: none; }
.hm-tip .ht-name { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.hm-tip .ht-when { font: 600 10.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase;
  color: var(--g-blue); margin-top: 5px; }
.hm-tip .ht-share { font-size: 13px; color: var(--ink-2); margin-top: 9px; }
.hm-tip .ht-share b { color: var(--ink); font-weight: 700; }
.hm-tip .ht-how { font-size: 12px; color: var(--ink-4); margin-top: 4px; }
.hm-cell { cursor: default; }

/* ---- Clickability, said with the cursor ----
   Anything that opens a panel, a modal or a link gets the hand cursor and a
   hover state. A card that reacts to a click but not to a pointer reads as
   decoration, and people stop trying. */
.reg-card.clickable, .theme-call, .mv-row, .fm-ref, .brief-person,
.yoy tr.clickable td, .hm-name { cursor: pointer; }
.reg-card.clickable { transition: transform .15s var(--ease), border-color .15s var(--ease); }
.reg-card.clickable:hover { transform: translateY(-2px); border-color: rgba(99,124,255,.5); }
.reg-card.clickable:hover .reg-open { color: var(--g-mid); }
.reg-card.clickable:hover .opens-ic { opacity: 1; color: var(--g-mid); }
.theme-call:hover { border-color: rgba(99,124,255,.5); }
.mv-row:hover { background: rgba(255,255,255,.03); }
.brief-person:hover .varrow { color: var(--g-mid); }
.fm-ref:hover .fr-title { color: var(--ink); }
/* Read-only surfaces keep the default arrow so the difference stays meaningful. */
.hm-cell, .fb-track, .stat, .watch { cursor: default; }

/* The rail says which section is the heart of the product. Hidden when the rail
   is collapsed to icons, where there is no room for a word. */
.rail nav a .nav-flag { margin-left: auto; font: 700 8.5px/1 var(--mono); letter-spacing: .1em;
  text-transform: uppercase; color: var(--g-blue); background: rgba(60,189,255,.13);
  border: 1px solid rgba(60,189,255,.28); padding: 4px 7px; border-radius: 100px;
  white-space: nowrap; }
.rail nav a.active .nav-flag { color: #fff; background: rgba(255,255,255,.16); border-color: transparent; }
body:not([data-nav="open"]) .rail nav a .nav-flag { display: none; }

/* ============ Collapsed rail: true optical centring ============
   The label keeps width:0 so it can animate open, but a flex gap still applies
   between it and the icon, which pushed every icon left of centre. No gap while
   there is nothing to sit beside. */
body:not([data-nav="open"]) .rail nav a { gap: 0; }
body:not([data-nav="open"]) .rail nav a .label { display: none; }

/* ============ Mobile ============
   Same structure as desktop, not a different product: the rail is the identical
   drawer, parked off screen and opened from the top bar. A bottom tab bar would
   have meant maintaining two navigations and losing the user card. */
.rail-scrim { display: none; }
.topbar-toggle { display: none; }

@media (max-width: 860px) {
  .app, body[data-nav="open"] .app { grid-template-columns: 1fr; }

  .rail, body[data-nav="open"] .rail {
    position: fixed; top: 0; left: 0; bottom: 0; height: 100dvh; z-index: 80;
    width: var(--rail-open); padding: 16px 12px;
    transform: translateX(-100%); transition: transform .28s var(--ease);
    background: var(--bg-1); border-right: 1px solid var(--line-2);
    box-shadow: 24px 0 60px -20px rgba(0,0,0,.7); overflow-y: auto; }
  body[data-nav="open"] .rail { transform: none; }

  /* Inside the drawer it is always the expanded rail: labels, user card, log out. */
  .rail-top { flex-direction: row; align-items: center; padding: 0 6px; gap: 12px; }
  .rail .nav-toggle { margin-left: auto; }
  .rail nav a, body:not([data-nav="open"]) .rail nav a {
    width: auto; justify-content: flex-start; padding: 0 12px; margin: 0; gap: 13px; }
  .rail nav a .label, body:not([data-nav="open"]) .rail nav a .label {
    display: block; opacity: 1; width: auto; font-size: 14px; font-weight: 600; }
  .rail nav a .tip { display: none; }
  .rail nav a .nav-flag, body:not([data-nav="open"]) .rail nav a .nav-flag { display: inline-block; }
  .ru-id, body:not([data-nav="open"]) .ru-id { opacity: 1; width: auto; flex: 1; }
  .ru-card, body:not([data-nav="open"]) .ru-card { justify-content: flex-start; padding: 10px;
    border-color: var(--line); background: var(--surface); }
  .rail a.ru-logout, body:not([data-nav="open"]) .rail a.ru-logout { display: flex; }
  .ru-by, body:not([data-nav="open"]) .ru-by { display: block; }

  .rail-scrim { display: block; position: fixed; inset: 0; z-index: 79; background: rgba(5,8,20,.6);
    opacity: 0; pointer-events: none; transition: opacity .28s var(--ease); }
  body[data-nav="open"] .rail-scrim { opacity: 1; pointer-events: auto; }

  .topbar-toggle { display: inline-grid; place-items: center; width: 36px; height: 36px; flex: none;
    border-radius: 10px; background: var(--surface); border: 1px solid var(--line);
    color: var(--ink-3); cursor: pointer; margin-right: 4px; }
  .topbar-toggle svg { width: 17px; height: 17px; }
  .topbar-toggle:hover { color: var(--ink); border-color: var(--line-2); }

  /* Heading, rule and note on one baseline needs width it does not have here.
     Stacked, the note reads as a subtitle instead of a squeezed second column. */
  .section-head { flex-wrap: wrap; gap: 4px 12px; }
  .section-head h2 { flex: 1 1 100%; }
  .section-head .rule { display: none; }
  .section-head .note { flex: 1 1 100%; font-size: 12.5px; }

  .topbar { padding: 12px 14px; }
  .page, .pagehead { padding-left: 14px; padding-right: 14px; }
  .pagehead h1 { font-size: 26px; }
  .pagehead p { font-size: 14px; }
  .assistant-launcher { right: 14px; bottom: 16px; padding: 11px 16px; font-size: 13px; }

  /* The chat panel parks just off the right edge when it is closed. At 390px
     that parked box is part of the document, so the page scrolled sideways into
     empty space. Clip rather than hide: `clip` does not make a scroll container,
     so the sticky top bar keeps working. */
  html { overflow-x: clip; }
  .assistant-panel, .assistant[data-state="expanded"] .assistant-panel,
  .assistant[data-state="expanded"][data-side="hidden"] .assistant-panel { width: 100vw; }
  .assistant[data-state="expanded"] .asst-side { display: none; }
  .drawer { inset: 0; width: 100vw; max-height: 100dvh; height: 100dvh; border-radius: 0; }
  .drawer-head { padding: 18px 18px 14px; }
  .drawer-head h3 { font-size: 20px; }
  .drawer-body { padding: 16px 18px 28px; }
  .fmodal { padding: 0; }
  .fmodal-card { border-radius: 0; min-height: 100dvh; }
  .fm-head, .fm-body { padding-left: 18px; padding-right: 18px; }
  .fm-head h2 { font-size: 21px; }
  .fm-verdict, .fm-grid { grid-template-columns: 1fr; }
  .fm-pipe-step { flex: 1 1 100%; }

  /* Every desktop grid becomes one column, the Theme tracker included: its
     288px list beside a dossier pane was pushing the read off the screen.
     It has to be minmax(0,1fr), not 1fr: a grid item's min-width defaults to
     min-content, so a single 1fr column widens to fit its widest child and the
     page scrolls sideways. On a 390px phone the tracker was resolving to 555px. */
  .tracker { gap: 14px; }
  .tracker, .dash-cols, .risk-cols, .lifecycle, .proj-grid, .fw-grid,
  .watch-grid, .brief-people, .voices-grid, .glance, .split-row {
    grid-template-columns: minmax(0, 1fr); }
  .tracker > *, .dash-cols > *, .risk-cols > *, .lifecycle > *, .proj-grid > *,
  .fw-grid > *, .watch-grid > *, .brief-people > *, .voices-grid > *,
  .glance > *, .split-row > * { min-width: 0; }
  .theme-list { align-self: stretch; }
  .dossier-pane { height: auto; overflow: visible; padding-right: 0; }
  .theme-hero h2, .theme-hero h1 { font-size: 24px; word-break: normal; }
  .hero-chips { flex-wrap: wrap; }

  .hm-scroll, .md-table-wrap, .fm-chart { max-width: 100%; overflow-x: auto; }
  /* A table will not shrink below its own min-content, and overflow is ignored
     on a table box, so `max-width` alone left the Signals table 463px wide in a
     390px window. Turning it into a block makes it its own scroller; the bar
     column goes, because the figure beside it already says the same thing. */
  table.yoy { display: block; overflow-x: auto; max-width: 100%; }
  .yoy th, .yoy td { padding: 11px 12px; white-space: nowrap; }
  .yoy .barcell, .yoy th.barcell { display: none; }
  .fm-bar-row { grid-template-columns: minmax(90px, 1fr) 1fr 46px; }
  .evidence-item .q-text, .drawer-body .md p { font-size: 14px; }
  .topstats { display: none; }
}

/* ---- Sample banner ----
   The one thing a reader must not miss on this page, so it is the first thing
   and it is the size of a headline, not a chip in the corner. */
.sample-banner { display: flex; gap: 22px; align-items: flex-start; margin-bottom: 22px;
  padding: 24px 26px; border-radius: 16px;
  background: linear-gradient(120deg, rgba(255,188,125,.10), rgba(255,188,125,.03));
  border: 1px solid rgba(255,188,125,.34); }
.sb-mark { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 128px; padding: 14px 16px; border-radius: 13px;
  background: rgba(255,188,125,.14); border: 1px solid rgba(255,188,125,.4);
  font: 800 25px/1 inherit; letter-spacing: -.02em; color: var(--gold, #ffbc7d); text-transform: uppercase; }
.sb-mark span { display: block; margin-top: 5px; font: 800 25px/1 inherit; letter-spacing: -.02em; }
.sb-body h2 { margin: 2px 0 10px; font-size: 21px; font-weight: 800; color: var(--ink); }
.sb-body p { margin: 0 0 9px; font-size: 14.5px; line-height: 1.65; color: var(--ink-2); max-width: 82ch; }
.sb-body p:last-child { margin-bottom: 0; }
.sb-body em { color: var(--ink); font-style: normal; font-weight: 700; }
@media (max-width: 760px) { .sample-banner { flex-direction: column; gap: 14px; padding: 18px; }
  .sb-mark { min-width: 0; width: 100%; flex-direction: row; gap: 10px; font-size: 20px; }
  .sb-mark span { margin-top: 0; font-size: 20px; } }

/* Where the real roster would go. */
.roster-ph { display: flex; gap: 16px; align-items: flex-start; margin-top: 26px; padding: 20px 22px;
  border-style: dashed; }
.rp-icon { flex: none; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center;
  background: var(--surface-2, rgba(255,255,255,.05)); color: var(--ink-4); }
.rp-icon svg { width: 18px; height: 18px; }
.roster-ph h3 { margin: 2px 0 6px; font-size: 15px; font-weight: 700; }
.roster-ph p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--ink-4); max-width: 80ch; }

/* ---- Who is signed in ----
   Name first and bright, the address beneath it, then a real button. An icon on
   its own is a guess; a button that says Log out is not. */
.rail-user { margin-top: auto; display: flex; flex-direction: column; gap: 8px; position: relative; }
.ru-card { display: flex; align-items: center; gap: 11px; padding: 10px;
  border-radius: 13px; border: 1px solid var(--line); background: var(--surface); }
.ru-av { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
  background: var(--gradient); color: #fff; font: 700 12px/1 var(--mono); letter-spacing: .04em; }
.ru-id { display: flex; flex-direction: column; gap: 3px; min-width: 0; opacity: 0; width: 0;
  overflow: hidden; transition: opacity .2s var(--ease); }
.ru-name { font-size: 14px; font-weight: 700; color: var(--ink); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; letter-spacing: -.01em; }
.ru-mail { font: 500 11px/1 var(--mono); color: var(--ink-4); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.rail a.ru-logout { width: 100%; height: auto; display: none; place-items: unset; }
.ru-logout { align-items: center; justify-content: center; gap: 9px; white-space: nowrap;
  padding: 11px 14px; border-radius: 11px; border: 1px solid var(--line-2);
  background: var(--surface); color: var(--ink-2); font: 600 13.5px/1 inherit;
  cursor: pointer; transition: background .15s var(--ease), color .15s var(--ease),
  border-color .15s var(--ease); }
.rail a.ru-logout svg { width: 16px; height: 16px; flex: none; }
.rail a.ru-logout:hover { background: rgba(242,121,95,.12); border-color: rgba(242,121,95,.45);
  color: #f2795f; transform: none; }
.rail-user .tip { left: calc(100% + 10px); top: 12px; }
.rail-user:hover .tip { opacity: 1; transform: translateX(0); }

body[data-nav="open"] .ru-id { opacity: 1; width: auto; flex: 1; }
body[data-nav="open"] .rail a.ru-logout { display: flex; }
body[data-nav="open"] .rail-user .tip { display: none; }
/* Collapsed: the avatar alone, and it is the way out. */
body:not([data-nav="open"]) .ru-card { justify-content: center; padding: 8px 0; border-color: transparent;
  background: none; }
body:not([data-nav="open"]) .rail-user { cursor: pointer; }


/* ---- Login hero: the founding line ----
   A quote carries the page, so it gets quote setting: a little tighter, a little
   larger, with the attribution close under it rather than floating away. */
.login-hero h2.lh-quote { font-size: 40px; line-height: 1.14; letter-spacing: -.9px;
  margin: 0 0 14px; max-width: 15ch; }
.lh-attrib { font: 500 12.5px/1.5 "IBM Plex Mono", monospace; color: var(--ink-4);
  letter-spacing: .02em; margin: 0 0 22px; }
.login-foot a { color: var(--g-blue); text-decoration: none; border-bottom: 1px solid transparent; }
.login-foot a:hover { border-bottom-color: currentColor; }
@media (max-width: 1180px) { .login-hero h2.lh-quote { font-size: 33px; max-width: 18ch; } }

/* Build credit, under the way out. Present without competing with navigation. */
.ru-by { display: none; text-align: center; padding: 2px 0; white-space: nowrap;
  font: 500 10.5px/1.5 var(--mono); color: var(--ink-4); letter-spacing: .02em; }
.rail .ru-by a { width: auto; height: auto; display: inline; place-items: unset; border-radius: 0;
  color: var(--ink-3); text-decoration: none; border-bottom: 1px solid transparent; }
.rail .ru-by a:hover { background: none; transform: none; }
.ru-by a:hover { color: var(--g-blue); border-bottom-color: currentColor; }
body[data-nav="open"] .ru-by { display: block; }