/* Operator-dark theme — graphite surfaces, off-white text, single muted-blue
   accent. No purple. No gradients on body. Built for information density on
   a financial workstation. HSL tokens so the accent can be retuned in one
   place. */
:root {
  /* Surfaces */
  --bg: hsl(220, 7%, 6%);              /* near-black graphite */
  --panel: hsl(220, 6%, 10%);          /* cards / panels */
  --panel-2: hsl(220, 6%, 14%);        /* hover / nested panels */
  --line: hsl(220, 5%, 20%);           /* borders */

  /* Foreground */
  --fg: hsl(220, 8%, 96%);             /* primary text */
  --fg-dim: hsl(220, 6%, 62%);         /* muted */

  /* Brand / accents — muted purple. Same hue across both themes, just
     re-leveled. The old neon hsl(263, 75%, 65%) read as "cringey"; this
     hsl(263, 50%, 60%) is restrained but still distinctly the brand
     mark, not neutral grey. */
  --accent: hsl(263, 50%, 60%);
  --accent-2: hsl(263, 55%, 70%);
  --ring: hsl(263, 60%, 50%);
  /* Space-separated R G B mirror of --accent so legacy rgba() call sites
     can switch to rgba(var(--accent-rgb), <alpha>) and follow the theme. */
  --accent-rgb: 154 110 210;

  /* Status */
  --ok: hsl(142, 70%, 50%);            /* gains */
  --warn: hsl(38, 92%, 55%);           /* amber */
  --bad: hsl(0, 70%, 58%);             /* losses */

  --mono: ui-monospace, SFMono-Regular, "JetBrains Mono", Menlo, Consolas, monospace;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --radius: 4px;
}

/* Light theme — clean white background, SAME purple accent (re-leveled
   for contrast). Not a full invert: surfaces go light but the brand
   colour family stays so the product still reads like the same product
   in both modes. */
:root[data-theme="light"] {
  --bg: #ffffff;                         /* pure white primary background */
  --panel: #ffffff;                      /* panels read on the page, not above it */
  --panel-2: hsl(263, 30%, 98.5%);         /* very faint violet wash for hover/nested */
  --line: hsl(263, 12%, 84%);            /* borders */

  --fg: hsl(263, 25%, 12%);              /* near-black with faint violet bias */
  --fg-dim: hsl(263, 10%, 42%);          /* muted */

  --accent: hsl(263, 50%, 50%);          /* same hue, deeper for white-bg contrast */
  --accent-2: hsl(263, 55%, 60%);
  --ring: hsl(263, 60%, 45%);
  --accent-rgb: 119 78 191;              /* matches the deeper light-mode purple */

  --ok: hsl(142, 60%, 36%);              /* darker green for readability on white */
  --warn: hsl(32, 88%, 42%);
  --bad: hsl(0, 65%, 48%);
}

/* Light mode: kill the hardcoded dark gradients on the topbar +
   statusbar and any panel with a hardcoded purple-tint linear-gradient.
   These were baked in for the old dark theme and would otherwise
   keep the topbar looking nearly black even with light mode on. */
:root[data-theme="light"] #topbar {
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  backdrop-filter: none;
}
:root[data-theme="light"] #ticker-tape,
:root[data-theme="light"] #statusbar {
  background: var(--panel);
}

/* Light-mode rail overrides — the dark/purple HSLs baked into the
   .rail-* selectors above don't respond to the theme. Override them
   here so the rail reads as a clean white/violet-wash sidebar. */
:root[data-theme="light"] #rail {
  background: var(--panel);
  border-right: 1px solid var(--line);
}
:root[data-theme="light"] #rail::after { display: none; }
:root[data-theme="light"] .rail-filter {
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}
:root[data-theme="light"] .rail-filter input {
  background: hsl(263, 25%, 97%);
  border-color: var(--line);
  color: var(--fg);
}
:root[data-theme="light"] .rail-filter input::placeholder { color: var(--fg-dim); }
:root[data-theme="light"] .rail-filter input:focus {
  background: #fff;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.15);
}
:root[data-theme="light"] .rail-filter__ic { color: var(--fg-dim); }
:root[data-theme="light"] .rail-filter__kbd {
  background: var(--panel-2);
  color: var(--fg-dim);
  border-color: var(--line);
}
:root[data-theme="light"] .rail-scroll {
  scrollbar-color: var(--line) transparent;
}
:root[data-theme="light"] .rail-scroll::-webkit-scrollbar-thumb { background: var(--line); }

/* Shared context strip shown on every view. It keeps the large dashboard
   navigable when a user lands on a deep route and makes the paper/live gate
   visible without repeating page-specific copy. */
.view-context {
  display: grid;
  grid-template-columns: minmax(170px, .7fr) minmax(240px, 1.7fr) auto;
  gap: 14px;
  align-items: center;
  margin: 0 0 14px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  background: var(--panel);
}
.view-context__heading {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.view-context__eyebrow {
  color: var(--accent-2);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.view-context__title {
  color: var(--fg);
  font-size: 14px;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.view-context__note {
  color: var(--fg-dim);
  font-size: 11px;
  line-height: 1.4;
}
.view-context__status {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  color: var(--fg-dim);
  font: 700 10px/1 var(--mono);
  letter-spacing: .06em;
  white-space: nowrap;
}
.view-context__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--warn);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--warn) 15%, transparent);
}
.view-context__divider { color: var(--line); }

/* Runtime model card — intentionally compact so it reads as a tool surface,
   not a marketing panel. */
.realtime-model-panel {
  margin: 0 0 14px;
  border-left: 3px solid var(--ok);
}
.realtime-model-head,
.realtime-model-meta,
.realtime-model-controls {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
}
.realtime-model-head { justify-content: space-between; }
.realtime-model-copy {
  max-width: 760px;
  margin: 7px 0 9px;
  color: var(--fg-dim);
  font-size: 11px;
  line-height: 1.45;
}
.realtime-model-meta {
  margin-bottom: 11px;
  color: var(--fg-dim);
  font: 10px/1.3 var(--mono);
}
.realtime-model-meta span + span::before { content: "·"; margin-right: 9px; color: var(--line); }
.realtime-model-controls { margin-bottom: 10px; }
.realtime-model-field {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 150px;
}
.realtime-model-field input {
  width: 90px;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-2);
  color: var(--fg);
  font: 12px/1.2 var(--mono);
  text-transform: uppercase;
}
.realtime-model-field input:focus { outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent); }
.realtime-model-run { margin-left: auto; }
.realtime-model-output { min-height: 48px; }
.realtime-model-summary { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.realtime-model-action { color: var(--ok); font: 700 15px/1 var(--mono); text-transform: uppercase; }
.realtime-model-reason { color: var(--fg-dim); font-size: 11px; }
.realtime-model-tiles { margin: 9px 0 5px; }

@media (max-width: 720px) {
  .view-context { grid-template-columns: 1fr; gap: 6px; }
  .view-context__status { justify-content: flex-start; }
  .realtime-model-run { margin-left: 0; }
}
:root[data-theme="light"] .nav-section__head,
:root[data-theme="light"] .nav-section__head .nav-section__label {
  color: var(--accent) !important;
  font-weight: 700 !important;
}
:root[data-theme="light"] .nav-section__head:hover,
:root[data-theme="light"] .nav-section__head:hover .nav-section__label {
  color: var(--accent-2) !important;
  background: var(--panel-2);
}
:root[data-theme="light"] .nav-section__ic,
:root[data-theme="light"] .nav-section__count {
  color: var(--fg-dim);
}
:root[data-theme="light"] .nav-section__count {
  background: var(--panel-2);
  border: 1px solid var(--line);
}
/* Buttons inside rail sections (.nav) — same treatment */
:root[data-theme="light"] .nav {
  color: var(--fg);
}
:root[data-theme="light"] .nav:hover {
  background: var(--panel-2);
  color: var(--accent);
}
:root[data-theme="light"] .nav.active {
  background: rgba(var(--accent-rgb), 0.10);
  color: var(--accent);
}
:root[data-theme="light"] .rail-foot {
  background: var(--panel);
  color: var(--fg-dim);
  border-top: 1px solid var(--line);
}
/* Refresh / topbar buttons hover */
:root[data-theme="light"] .refresh-btn:hover {
  background: var(--panel-2);
  color: var(--accent);
  border-color: var(--accent);
}

/* Purple-fill "hero" panel utility — for key dashboard sections that
   should stand out. White text on purple in light mode, accent-bordered
   in dark mode. Apply with class="panel hero-panel" or .panel.is-hero. */
.hero-panel,
.panel.is-hero {
  background: var(--accent);
  color: hsl(0, 0%, 98%);
  border-color: var(--accent);
}
.hero-panel a,
.panel.is-hero a {
  color: hsl(0, 0%, 100%);
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.45);
}
.hero-panel .u-label,
.hero-panel .u-meta,
.panel.is-hero .u-label,
.panel.is-hero .u-meta {
  color: rgba(255, 255, 255, 0.78);
}
.hero-panel .u-label { letter-spacing: 0.12em; }

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--fg);
  font: 12px/1.4 var(--mono);
  -webkit-font-smoothing: antialiased;
}

/* Top bar — denser, no gradient */
#topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 12px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 5;
}

/* ===========================================================
   NYSE-style ticker tape strip — thin scrolling marquee under
   the topbar. Trending stocks + a rotating crypto sample.
   Renderer in app.js populates #ticker-tape-track; CSS handles
   the infinite-loop scroll animation.
   =========================================================== */
#ticker-tape {
  display: flex;
  align-items: center;
  height: 28px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 38px;
  z-index: 4;
  overflow: hidden;
  white-space: nowrap;
}
#ticker-tape-track {
  display: inline-flex;
  align-items: center;
  gap: 0;
  /* 220s for one full cycle — much slower scroll so the eye can land
     on a tile and read it before it leaves the screen. */
  animation: tape-scroll 440s linear infinite;
  will-change: transform;
  /* no padding-left — would create a visible gap on first cycle */
}
#ticker-tape:hover #ticker-tape-track { animation-play-state: paused; }
@keyframes tape-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-100%, 0, 0); }
}
.tape-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 14px;
  font: 11px/1 var(--mono);
  cursor: pointer;
  user-select: none;
  border-right: 1px solid var(--line);
}
.tape-item:hover { background: var(--panel-2); }
.tape-item-sym { font-weight: 700; color: var(--fg); }
.tape-item-sym.tape-crypto { color: var(--accent); }
.tape-item-px  { color: var(--fg); }
.tape-item-chg { font-weight: 700; }
.tape-item-chg.pos { color: var(--ok); }
.tape-item-chg.neg { color: var(--bad); }
.tape-item-chg.flat { color: var(--fg-dim); }
.tape-loading { padding: 0 14px; font-size: 11px; color: var(--fg-dim); }
@media (max-width: 720px) {
  #ticker-tape { height: 22px; }
  .tape-item { padding: 0 10px; }
  .tape-item-sym, .tape-item-px, .tape-item-chg { font-size: 10px; }
}
/* Wordmark — DM Serif Display for editorial gravitas, no gradient.
   "Quant" upright, "FX" italic for a sober two-tone wordmark. */
.brand {
  font-family: "DM Serif Display", "Iowan Old Style", "Georgia", serif;
  font-weight: 400;
  letter-spacing: -0.01em;
  font-size: 19px;
  line-height: 1;
  color: var(--fg);
  white-space: nowrap;
  display: inline-flex;
  align-items: baseline;
  gap: 1px;
}
.brand .brand-fx {
  font-style: italic;
  color: var(--accent);
  margin-left: 1px;
}
.ticker-search {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 190px;
  max-width: 280px;
  flex: 1 1 220px;
  padding: 3px 4px 3px 8px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: rgba(255,255,255,0.035);
}
.ticker-search:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.16);
}
.ticker-search__ic {
  width: 14px;
  height: 14px;
  color: var(--fg-dim);
  flex: 0 0 auto;
}
.ticker-search__input {
  min-width: 0;
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--fg);
  font: 12px/1.2 var(--mono);
  text-transform: uppercase;
}
.ticker-search__input::placeholder {
  color: var(--fg-dim);
  text-transform: none;
}
.ticker-search__go {
  border: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--fg);
  border-radius: 3px;
  padding: 2px 7px;
  font: 10px/1.2 var(--mono);
  cursor: pointer;
}
.ticker-search__go:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.refresh-btn {
  background: var(--panel-2);
  border: 1px solid var(--line);
  color: var(--fg);
  cursor: pointer;
  padding: 2px 9px;
  border-radius: 3px;
  font-family: inherit;
  font-size: 11px;
  letter-spacing: 0.3px;
}
.refresh-btn:hover { background: hsla(270, 30%, 20%, 0.7); color: var(--accent); border-color: var(--accent); }
.refresh-btn:active { transform: translateY(1px); }
.refresh-btn.on { color: var(--bg); background: var(--accent); border-color: var(--accent); font-weight: 700; }

/* Allow the Signals verdict column (long prose) to wrap; numbers stay aligned. */
.signals-table td:last-child { white-space: normal; max-width: 380px; line-height: 1.35; }
.signals-table tbody tr.active { background: rgba(88,166,255,0.08); }
.signals-table tbody tr.active td:first-child { color: var(--accent); font-weight: 700; }

/* Signals detail panel */
.signal-detail-host { margin-top: 12px; }
.signal-detail {
  background: var(--panel); border: 1px solid var(--accent); border-radius: 5px;
  padding: 6px 10px;
}
.signal-detail-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 10px; }
.signal-detail-head h3 { margin: 0; font-size: 16px; color: var(--accent); letter-spacing: 0.5px; }
.signal-detail-kind {
  color: var(--fg-dim); font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.5px; padding: 1px 8px; background: var(--panel-2);
  border: 1px solid var(--line); border-radius: 3px;
}
.signal-detail-tiles { margin: 6px 0 10px; }
.signal-verdict { margin: 6px 0 12px; }
.signal-desc { font-size: 12px; line-height: 1.5; margin-bottom: 8px; }
.signal-detail-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 8px;
}
@media (max-width: 800px) { .signal-detail-grid { grid-template-columns: 1fr; } }
.signal-detail-meta { color: var(--fg-dim); font-size: 11px; margin-top: 10px; }
.signal-meaning-panel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 8px;
  margin: 8px 0 12px;
}
.signal-meaning-item {
  background: color-mix(in srgb, var(--panel-2) 70%, transparent);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 8px 9px;
}
.signal-meaning-k {
  color: var(--accent);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}
.signal-meaning-v {
  color: var(--fg-dim);
  font-size: 11px;
  line-height: 1.4;
  margin-top: 3px;
}
.signal-meaning-note {
  grid-column: 1 / -1;
  color: var(--warn);
  border-left: 2px solid var(--warn);
  padding: 5px 8px;
  font-size: 11px;
  background: rgba(245, 158, 11, 0.08);
}
.badges { display: flex; gap: 8px; }
.meta { margin-left: auto; display: flex; gap: 16px; color: var(--fg-dim); }

.badge {
  padding: 2px 8px;
  border: 1px solid var(--line);
  border-radius: 3px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  background: var(--panel-2);
  color: var(--fg-dim);
}
.badge.mode-PAPER { color: #0d1117; background: var(--warn); border-color: var(--warn); }
.badge.mode-READONLY { color: var(--fg); background: var(--panel-2); }
.badge-blocked { color: #0d1117; background: var(--bad); border-color: var(--bad); }
.badge-alert { color: #0d1117; background: var(--bad); border-color: var(--bad); }

/* ═══════════════════════════════════════════════════════════════════
   LEFT NAVIGATION — operator-grade
   JetBrains Mono headers, Lucide line icons, grid-row collapse anim,
   command-bar filter, single accent color, no decorative noise.
   ═══════════════════════════════════════════════════════════════════ */

/* Layout — left rail restored. The 38px is topbar, 28px is the new
   ticker-tape strip, 26px is the statusbar; main fills the rest. */
#layout { display: flex; height: calc(100vh - 38px - 28px - 26px); }

#rail {
  width: 224px;
  flex: 0 0 224px;
  display: flex;
  flex-direction: column;
  background:
    /* faint mesh in upper-left for atmosphere */
    radial-gradient(circle at 0% 0%, hsla(263, 70%, 35%, 0.10), transparent 45%),
    linear-gradient(180deg, hsla(272, 28%, 9%, 1) 0%, hsla(273, 32%, 7%, 1) 100%);
  border-right: 1px solid hsla(270, 20%, 16%, 0.8);
  position: relative;
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-feature-settings: "ss01" 1, "cv11" 1, "calt" 1;
}
/* Hairline accent stripe on the rail's right edge */
#rail::after {
  content: "";
  position: absolute;
  top: 0; right: -1px; bottom: 0;
  width: 1px;
  background: linear-gradient(180deg,
    transparent 0%,
    hsla(263, 75%, 55%, 0.25) 15%,
    hsla(263, 75%, 55%, 0.10) 60%,
    transparent 100%);
  pointer-events: none;
}

/* ─── Filter / command bar ───────────────────────────────────────── */
.rail-filter {
  position: relative;
  padding: 12px 12px 10px;
  border-bottom: 1px solid hsla(270, 18%, 18%, 0.5);
  background: hsla(273, 32%, 7%, 0.4);
}
.rail-filter__ic {
  position: absolute;
  left: 22px;
  top: 50%;
  transform: translateY(-50%);
  width: 12px; height: 12px;
  color: hsla(270, 10%, 50%, 1);
  pointer-events: none;
  transition: color 160ms ease;
}
.rail-filter input {
  width: 100%;
  font: inherit;
  font-size: 11.5px;
  letter-spacing: 0.02em;
  padding: 7px 32px 7px 28px;
  color: var(--fg);
  background: hsla(272, 30%, 12%, 0.8);
  border: 1px solid hsla(270, 20%, 22%, 0.7);
  border-radius: 7px;
  outline: none;
  transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}
.rail-filter input::placeholder {
  color: hsla(270, 8%, 48%, 1);
  letter-spacing: 0.01em;
}
.rail-filter input:focus {
  border-color: hsla(263, 75%, 60%, 0.65);
  background: hsla(272, 35%, 14%, 0.95);
  box-shadow:
    0 0 0 2px hsla(263, 75%, 55%, 0.15),
    inset 0 0 12px hsla(263, 75%, 55%, 0.05);
}
.rail-filter:has(input:focus) .rail-filter__ic { color: var(--accent); }
.rail-filter__kbd {
  position: absolute;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  font: 10px/1 "JetBrains Mono", monospace;
  padding: 2px 6px;
  border-radius: 4px;
  background: hsla(270, 18%, 18%, 0.9);
  color: hsla(270, 10%, 60%, 1);
  border: 1px solid hsla(270, 18%, 25%, 0.7);
  pointer-events: none;
  letter-spacing: 0;
}
.rail-filter:has(input:focus) .rail-filter__kbd { opacity: 0; }

/* ─── Scrollable section column ──────────────────────────────────── */
.rail-scroll {
  flex: 1;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: hsla(270, 25%, 30%, 0.35) transparent;
  padding: 6px 0 16px;
}
.rail-scroll::-webkit-scrollbar { width: 6px; }
.rail-scroll::-webkit-scrollbar-thumb {
  background: hsla(270, 25%, 30%, 0.35);
  border-radius: 3px;
}
.rail-scroll::-webkit-scrollbar-thumb:hover {
  background: hsla(263, 60%, 45%, 0.5);
}

/* ─── Section ────────────────────────────────────────────────────── */
.nav-section {
  display: block;
  position: relative;
}
.nav-section + .nav-section { margin-top: 1px; }

.nav-section__head {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 9px 12px 9px 14px;
  background: transparent;
  border: 0;
  font: inherit;
  font-family: "JetBrains Mono", monospace;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: hsla(270, 10%, 56%, 1);
  cursor: pointer;
  outline: 0;
  user-select: none;
  text-align: left;
  position: relative;
  transition: color 200ms cubic-bezier(0.16, 1, 0.3, 1),
              background 200ms cubic-bezier(0.16, 1, 0.3, 1);
}
.nav-section__head:hover {
  color: var(--fg);
  background: hsla(270, 22%, 14%, 0.5);
}
.nav-section__head:focus-visible {
  box-shadow: inset 2px 0 0 var(--accent), inset 0 0 0 1px hsla(263, 75%, 55%, 0.3);
}
.nav-section__ic {
  width: 13px;
  height: 13px;
  color: hsla(270, 12%, 60%, 1);
  flex: 0 0 13px;
  transition: color 200ms cubic-bezier(0.16, 1, 0.3, 1);
}
.nav-section__label {
  flex: 1;
  min-width: 0;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.nav-section__count {
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0;
  color: hsla(270, 8%, 45%, 1);
  padding: 1px 5px;
  background: hsla(270, 20%, 16%, 0.7);
  border-radius: 3px;
  min-width: 18px;
  text-align: center;
  transition: all 200ms cubic-bezier(0.16, 1, 0.3, 1);
}
.nav-section__chev {
  width: 11px;
  height: 11px;
  color: hsla(270, 12%, 55%, 1);
  flex: 0 0 11px;
  transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1),
              color 200ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Open state: chevron rotates 90° (points down), label brightens, accent on icon */
.nav-section[data-open="true"] .nav-section__head {
  color: hsla(0, 0%, 92%, 1);
}
.nav-section[data-open="true"] .nav-section__ic {
  color: var(--accent);
}
.nav-section[data-open="true"] .nav-section__count {
  color: hsla(263, 60%, 75%, 1);
  background: hsla(263, 60%, 22%, 0.55);
}
.nav-section[data-open="true"] .nav-section__chev {
  transform: rotate(90deg);
  color: var(--accent);
}

/* Section containing the active view — subtle accent stripe on the left */
.nav-section.has-active::before {
  content: "";
  position: absolute;
  left: 0; top: 4px; bottom: 4px;
  width: 2px;
  background: linear-gradient(180deg,
    hsla(263, 80%, 60%, 0.7),
    hsla(263, 80%, 60%, 0.15));
  border-radius: 2px;
  pointer-events: none;
}

/* ─── Collapsible body using grid-row 0→1 animation ──────────────── */
.nav-section__body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 320ms cubic-bezier(0.16, 1, 0.3, 1);
}
.nav-section[data-open="true"] .nav-section__body {
  grid-template-rows: 1fr;
}
.nav-section__inner {
  min-height: 0;
  overflow: hidden;
  padding: 2px 0 4px;
}

/* ─── Individual nav item ────────────────────────────────────────── */
.nav {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  border-left: 2px solid transparent;
  color: hsla(270, 8%, 70%, 1);
  padding: 7px 12px 7px 36px;
  font: inherit;
  font-family: "Geist", "JetBrains Mono", monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.005em;
  cursor: pointer;
  position: relative;
  outline: 0;
  transition: color 160ms cubic-bezier(0.16, 1, 0.3, 1),
              background 160ms cubic-bezier(0.16, 1, 0.3, 1),
              border-color 160ms cubic-bezier(0.16, 1, 0.3, 1);
}
.nav::before {
  /* Tiny tick mark on the left, brightens on hover/active */
  content: "";
  position: absolute;
  left: 18px;
  top: 50%;
  width: 4px;
  height: 1px;
  background: hsla(270, 10%, 35%, 1);
  transform: translateY(-50%);
  transition: background 160ms ease, width 200ms cubic-bezier(0.16, 1, 0.3, 1);
}
.nav:hover {
  color: var(--fg);
  background: linear-gradient(90deg,
    hsla(263, 55%, 28%, 0.22),
    hsla(263, 55%, 28%, 0.04));
}
.nav:hover::before {
  background: hsla(263, 75%, 70%, 0.9);
  width: 8px;
}
.nav__ic {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  color: hsla(270, 10%, 52%, 1);
  transition: color 160ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 160ms cubic-bezier(0.16, 1, 0.3, 1);
}
.nav:hover .nav__ic {
  color: hsla(263, 80%, 74%, 1);
}
.nav:focus-visible {
  box-shadow: inset 2px 0 0 var(--accent), inset 0 0 0 1px hsla(263, 75%, 55%, 0.25);
}

.nav.active {
  color: var(--fg);
  border-left-color: var(--accent);
  background: linear-gradient(90deg,
    hsla(263, 75%, 35%, 0.32) 0%,
    hsla(263, 75%, 35%, 0.06) 60%,
    transparent 100%);
  font-weight: 600;
}
.nav.active .nav__ic {
  color: var(--accent);
  transform: translateX(1px);
}
.nav.active::before {
  background: var(--accent);
  width: 10px;
  box-shadow: 0 0 6px hsla(263, 90%, 65%, 0.6);
}
.nav.active::after {
  /* Pulsing dot on the right edge of the active item */
  content: "";
  position: absolute;
  right: 12px;
  top: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  transform: translateY(-50%);
  box-shadow: 0 0 8px var(--accent), 0 0 16px hsla(263, 90%, 65%, 0.4);
  animation: navActivePulse 2.6s ease-in-out infinite;
}
@keyframes navActivePulse {
  0%, 100% { opacity: 1; transform: translateY(-50%) scale(1); }
  50%      { opacity: 0.55; transform: translateY(-50%) scale(0.85); }
}

/* Inline trailing bits */
.nav__star {
  margin-left: auto;
  color: hsla(45, 90%, 70%, 0.9);
  font-size: 11px;
  text-shadow: 0 0 6px hsla(45, 90%, 60%, 0.4);
}
.nav__hint {
  margin-left: auto;
  font-size: 9px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: hsla(270, 8%, 45%, 1);
  padding: 1px 5px;
  background: hsla(270, 20%, 16%, 0.8);
  border-radius: 3px;
}

/* ─── Filter behavior ────────────────────────────────────────────── */
.nav.nav-filtered-out { display: none; }
.nav-section.section-all-filtered { display: none; }
.nav-filter-hit { color: var(--accent) !important; }

/* When filtering, the count badge shows the current visible count */
.nav-section[data-filter-active] .nav-section__count {
  color: var(--accent);
  background: hsla(263, 60%, 25%, 0.6);
}

/* ─── Foot of the rail — version/mode tag ────────────────────────── */
.rail-foot {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 14px;
  border-top: 1px solid hsla(270, 18%, 18%, 0.45);
  background: hsla(273, 32%, 6%, 0.5);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: hsla(270, 8%, 50%, 1);
}
.rail-foot__ic {
  width: 11px; height: 11px;
  color: hsla(263, 75%, 60%, 0.85);
}

/* ─── Reduced motion ─────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .nav-section__body { transition: none; }
  .nav-section__chev { transition: none; }
  .nav, .nav-section__head { transition: none; }
  .nav.active::after { animation: none; }
}

#main { flex: 1; min-width: 0; overflow: auto; padding: 12px 16px; }

/* Sections */
.section-title { font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: var(--fg-dim); margin: 0 0 10px; }
.split { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; }
@media (max-width: 1100px) { .split { grid-template-columns: 1fr; } }

/* Tables */
/* Wrap any table in an overflow-x scroller so wide tables (Top Plays,
   leaderboards, optimizer) don't push the layout or clip cells. */
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 6px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
th { color: var(--fg-dim); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; position: sticky; top: 0; background: var(--bg); z-index: 1; }
tbody tr:hover { background: var(--panel-2); }
tbody tr.selectable { cursor: pointer; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* Cells that hold long-form text (descriptions, notes, signal lists)
   should wrap rather than truncate horizontally. */
td.struct-cell, th.struct-cell {
  white-space: normal;
  min-width: 140px;
  max-width: 360px;
  word-break: break-word;
}

/* Wrap any table in this to allow horizontal scroll without breaking layout */
.tbl-scroll {
  width: 100%;
  overflow-x: auto;
  overflow-y: visible;
  scrollbar-width: thin;
  scrollbar-color: hsla(270, 25%, 30%, 0.4) transparent;
}
.tbl-scroll::-webkit-scrollbar { height: 8px; }
.tbl-scroll::-webkit-scrollbar-thumb { background: hsla(270, 25%, 30%, 0.4); border-radius: 4px; }

/* Status pills */
.pill { padding: 1px 7px; border-radius: 10px; font-size: 11px; font-weight: 700; }
.pill-ok { color: #0d1117; background: var(--ok); }
.pill-bad { color: #0d1117; background: var(--bad); }
.pill-warn { color: #0d1117; background: var(--warn); }
.pill-mut { color: var(--fg-dim); border: 1px solid var(--line); }

/* Panel / detail */
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; }
.panel h3 { margin: 0 0 8px; font-size: 13px; }
.tile, .chart-card, .play-tile, .u-card, .signal-detail, .model-card {
  /* unify rounded radius across cards for the shadcn look */
  border-radius: var(--radius);
}
.tile, .chart-card { box-shadow: 0 1px 2px 0 hsla(263, 50%, 5%, 0.4); }
.kv { display: grid; grid-template-columns: 130px 1fr; gap: 2px 10px; }
.kv .k { color: var(--fg-dim); }
.kv .v { font-variant-numeric: tabular-nums; }

/* Checklist */
.rule { display: flex; align-items: center; gap: 8px; padding: 2px 0; }
.rule .dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 9px; }
.dot.passed { background: var(--ok); }
.dot.blocked { background: var(--bad); }
.dot.not_evaluated { background: var(--line); }
.dot.unknown { background: var(--warn); }
.rule .rid { color: var(--fg-dim); }
.rule.is-blocked .rid { color: var(--bad); font-weight: 700; }

/* Utilization bars */
.bar-row { margin: 8px 0; }
.bar-row .bar-label { display: flex; justify-content: space-between; color: var(--fg-dim); margin-bottom: 3px; }
.bar { height: 9px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
.bar > span { display: block; height: 100%; background: var(--accent); }
.bar > span.hot { background: var(--bad); }

/* Journal */
.journal-entry { border: 1px solid var(--line); border-radius: 5px; margin-bottom: 10px; }
.journal-entry > .head { display: flex; gap: 10px; align-items: center; padding: 7px 10px; background: var(--panel); }
.event-row { display: flex; gap: 10px; padding: 4px 10px; border-top: 1px solid var(--line); color: var(--fg-dim); }
.event-row .et { color: var(--fg); min-width: 130px; }

/* Live gate banner */
.gate-banner { border: 1px solid var(--bad); background: rgba(248,81,73,0.08); border-radius: 5px; padding: 12px 14px; margin-bottom: 14px; }
.gate-banner b { color: var(--bad); }

.loading { color: var(--fg-dim); padding: 20px; }
.empty { color: var(--fg-dim); padding: 16px; border: 1px dashed var(--line); border-radius: 5px; }
.pos { color: var(--ok); }
.neg { color: var(--bad); }
.flat { color: var(--fg-dim); }
.actor-link {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px dashed rgba(var(--accent-rgb), 0.35);
  cursor: pointer;
  font-weight: 700;
}
.actor-link:hover { color: var(--ok); border-color: var(--ok); }
.quote-change {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 72px;
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  background: var(--panel-2);
  border: 1px solid var(--line);
}
.quote-change.pos { color: var(--ok); background: rgba(63, 185, 80, 0.12); border-color: rgba(63, 185, 80, 0.35); }
.quote-change.neg { color: var(--bad); background: rgba(248, 81, 73, 0.12); border-color: rgba(248, 81, 73, 0.35); }
.quote-change.flat { color: var(--fg-dim); }
.news-pulse {
  display: grid;
  gap: 8px;
  margin: 0 0 10px;
}
.news-pulse-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
  gap: 8px;
}
.news-pulse-card {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
  padding: 8px 9px;
}
.news-pulse-label {
  color: var(--fg-dim);
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}
.news-pulse-value {
  color: var(--fg);
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.news-pulse-sentiment {
  display: flex;
  height: 12px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.08);
}
.news-pulse-fill { display: block; height: 100%; min-width: 2px; }
.news-pulse-fill.positive { background: var(--ok); }
.news-pulse-fill.neutral { background: var(--accent); }
.news-pulse-fill.negative { background: var(--bad); }
.news-impact-board {
  display: grid;
  gap: 8px;
  margin: 0 0 10px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(148, 163, 184, 0.04);
}
.news-impact-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(126px, 1fr));
  gap: 8px;
}
.news-impact-ticker {
  min-width: 0;
  min-height: 96px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  grid-template-rows: auto 10px 8px;
  column-gap: 8px;
  row-gap: 8px;
  align-items: center;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg);
  color: var(--fg);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.news-impact-ticker:hover {
  border-color: var(--accent);
  background: var(--panel-2);
}
.news-impact-ticker:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.news-impact-ticker.positive { border-color: rgba(63, 185, 80, 0.32); }
.news-impact-ticker.negative { border-color: rgba(248, 81, 73, 0.32); }
.news-impact-logo-wrap {
  display: grid;
  place-items: center;
}
.news-impact-logo {
  width: 32px;
  height: 32px;
  border-radius: 7px;
  object-fit: contain;
  background: var(--panel-2);
  border: 1px solid var(--line);
  padding: 4px;
}
.news-impact-logo-empty {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--fg-dim);
  font-size: 9px;
  font-weight: 800;
  overflow-wrap: anywhere;
}
.news-impact-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.news-impact-symbol {
  color: var(--fg);
  font-size: 13px;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.news-impact-meta {
  color: var(--fg-dim);
  font-size: 10px;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.news-impact-meter {
  grid-column: 1 / -1;
  display: flex;
  height: 10px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.08);
}
.news-impact-fill { display: block; height: 100%; min-width: 2px; }
.news-impact-fill.positive { background: var(--ok); }
.news-impact-fill.neutral { background: var(--accent); }
.news-impact-fill.negative { background: var(--bad); }
.news-impact-weight {
  grid-column: 1 / -1;
  display: block;
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.08);
}
.news-impact-weight-fill {
  display: block;
  height: 100%;
  background: #58a6ff;
}
.news-impact-source-bars {
  display: grid;
  gap: 6px;
}
.news-impact-source-row {
  min-width: 0;
  display: grid;
  grid-template-columns: 22px minmax(74px, 0.8fr) minmax(70px, 1fr) 24px;
  gap: 7px;
  align-items: center;
}
.news-impact-source-logo {
  width: 22px;
  height: 22px;
  border-radius: 5px;
  object-fit: contain;
  background: var(--panel-2);
  border: 1px solid var(--line);
  padding: 2px;
}
.news-impact-source-name {
  min-width: 0;
  color: var(--fg-dim);
  font-size: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.news-impact-source-track {
  display: block;
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.08);
}
.news-impact-source-fill {
  display: block;
  height: 100%;
  background: var(--accent);
}
.news-impact-source-count {
  color: var(--fg);
  font-size: 10px;
  font-weight: 800;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.news-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
}
.news-card {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  min-height: 96px;
  color: var(--fg);
  text-decoration: none;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.news-card:hover {
  border-color: var(--accent);
  background: var(--panel-2);
  transform: translateY(-1px);
  box-shadow: 0 8px 22px -10px rgba(var(--accent-rgb), 0.4);
}
/* Hero-image variant: stack image on top, body below. Used for the
   default Polygon news feed where image_url is available. */
/* YouTube preview card — hero image with title overlay at the bottom,
   red play badge top-left, duration chip bottom-right. The hero IS the
   image; no separate body. Used when /api/youtube-search returns real
   thumbnails AND for the search-link fallback (with a red gradient
   backdrop). */
.yt-card .news-hero { aspect-ratio: 16 / 9; }
.yt-card .news-hero-img { display: block; }
.yt-card .yt-hero-fallback,
.yt-card .yt-hero-fallback.news-hero {
  background:
    radial-gradient(circle at 25% 30%, #ff5e5e, transparent 60%),
    linear-gradient(135deg, #cc0000 0%, #7a0000 100%);
}
.yt-card .yt-play-badge {
  position: absolute;
  top: 9px; left: 9px;
  width: 32px; height: 22px;
  border-radius: 4px;
  background: rgba(204, 0, 0, 0.92);
  color: #fff;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.yt-card .yt-duration {
  position: absolute;
  bottom: 60px;     /* sits above the overlay strip */
  right: 9px;
  background: rgba(0, 0, 0, 0.78);
  color: #fff;
  font-family: var(--mono);
  font-size: 10px;
  padding: 1px 5px;
  border-radius: 2px;
  z-index: 2;
}
.yt-card .yt-overlay {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 18px 12px 10px;
  background: linear-gradient(180deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.68) 55%,
    rgba(0, 0, 0, 0.88) 100%);
  color: #fff;
  z-index: 2;
}
.yt-card .yt-overlay-title {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.32;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.yt-card .yt-overlay-channel {
  margin-top: 4px;
  font-family: var(--mono);
  font-size: 10px;
  color: rgba(255, 255, 255, 0.78);
}
.yt-card:hover .news-hero-img { transform: scale(1.04); }
.yt-card .news-card-body { display: none; } /* hero contains everything */

.news-card-hero {
  display: flex;
  flex-direction: column;
  grid-template-columns: none;
  min-height: 0;
}
.news-hero {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background:
    radial-gradient(circle at 30% 30%, rgba(var(--accent-rgb), 0.18), transparent 60%),
    linear-gradient(135deg, var(--panel-2) 0%, var(--bg) 100%);
  overflow: hidden;
}
.news-hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .25s ease;
}
.news-card:hover .news-hero-img { transform: scale(1.04); }
.news-hero-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(8,4,18,0.55) 0%, rgba(8,4,18,0) 35%,
    rgba(8,4,18,0) 65%, rgba(8,4,18,0.55) 100%);
  pointer-events: none;
}
.news-hero-noimage {
  display: flex;
  align-items: center;
  justify-content: center;
}
.news-hero-fallback {
  font-family: var(--mono);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--accent);
  text-shadow: 0 0 18px rgba(var(--accent-rgb), 0.6);
  z-index: 1;
}
.news-chip {
  position: absolute;
  top: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  min-width: 28px;
  padding: 0 6px;
  background: rgba(8,4,18,0.78);
  border: 1px solid rgba(var(--accent-rgb), 0.45);
  border-radius: 8px;
  color: var(--fg);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.05em;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 2;
}
.news-chip-company { left: 8px; }
.news-chip-source { right: 8px; }
.news-chip img {
  width: 18px;
  height: 18px;
  object-fit: contain;
  border-radius: 4px;
}
.news-card-img {
  width: 92px;
  height: 100%;
  min-height: 96px;
  object-fit: cover;
  background: var(--bg);
}
.news-card-img-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fg-dim);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
}
.news-logo-lockup {
  position: relative;
  display: grid;
  place-items: center;
  padding: 12px;
  object-fit: initial;
}
.news-card-logo {
  display: block;
  object-fit: contain;
}
.news-company-logo {
  width: 52px;
  height: 52px;
  max-width: 52px;
  max-height: 52px;
  border-radius: 8px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  padding: 7px;
}
.news-company-logo.news-card-img-empty {
  padding: 0 4px;
  text-align: center;
  overflow-wrap: anywhere;
  letter-spacing: 0.02em;
}
.news-source-logo {
  position: absolute;
  right: 9px;
  bottom: 9px;
  width: 24px;
  height: 24px;
  max-width: 24px;
  max-height: 24px;
  border-radius: 6px;
  background: var(--panel);
  border: 1px solid var(--line);
  padding: 3px;
}
.news-source-text {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fg-dim);
  font-size: 9px;
  font-weight: 800;
}
.news-card-body { padding: 10px 12px 12px; min-width: 0; }
.news-card-hero .news-card-body { padding: 12px 14px 14px; }
.news-card-title {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
  overflow-wrap: anywhere;
  color: var(--fg);
}
.news-card-hero .news-card-title {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.38;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.news-card-desc {
  color: var(--fg-dim);
  font-size: 11px;
  line-height: 1.4;
  margin-top: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.starter-quote-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 8px;
  margin: 10px 0;
}
.starter-quote-chip {
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.035);
  border-radius: 6px;
  padding: 8px 9px;
  min-height: 66px;
}
.starter-quote-head { font-size: 11px; font-weight: 700; min-height: 18px; }
.starter-quote-price {
  margin-top: 4px;
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 700;
}
.starter-quote-move {
  margin-top: 2px;
  font-family: var(--mono);
  font-size: 11px;
}
.starter-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid var(--line);
  padding: 10px 0;
}
.starter-row:first-of-type { border-top: 0; }
.starter-row .run-btn { flex: 0 0 auto; }
.ticker-detail-layout { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(340px,.95fr); gap: 12px; align-items: start; min-width: 0; }
.ticker-detail-layout > * { min-width: 0; max-width: 100%; }
.ticker-chart-column { min-width: 0; max-width: 100%; overflow: hidden; box-sizing: border-box; }
.ticker-main-widgets { display: grid; grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); gap: 12px; margin-top: 12px; min-width: 0; max-width: 100%; }
.ticker-main-widgets > * { min-width: 0; max-width: 100%; overflow: hidden; box-sizing: border-box; }
.ticker-chart-short { width: 100%; box-sizing: border-box; height: 340px; min-height: 280px; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 6px; overflow: hidden; }
.ticker-chart-short .tv-lightweight-charts { max-width: 100%; }
.ticker-identity {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 10px;
  margin: 0 0 12px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
}
.ticker-quote-header {
  align-items: stretch;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
}
.ticker-identity-main {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1 1 280px;
  min-width: min(100%, 260px);
}
.ticker-logo-cell { width: 44px; height: 44px; flex: 0 0 44px; }
.ticker-logo {
  width: 44px;
  height: 44px;
  object-fit: contain;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--panel-2);
}
.ticker-logo-fallback {
  display: grid;
  place-items: center;
  color: var(--accent);
  font-weight: 800;
  font-size: 11px;
  overflow-wrap: anywhere;
}
.ticker-identity-text { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ticker-identity-name { font-size: 17px; font-weight: 800; line-height: 1.2; }
.ticker-identity-meta { color: var(--fg-dim); font-size: 11px; overflow-wrap: anywhere; }
.ticker-identity-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.ticker-quote-header-metrics {
  flex: 2 1 520px;
  min-width: min(100%, 320px);
  display: grid;
  grid-template-columns: minmax(130px, auto) 1fr;
  gap: 8px 14px;
  align-items: start;
}
.ticker-quote-price {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 28px;
  line-height: 1;
  font-weight: 800;
  color: var(--fg);
  white-space: nowrap;
}
.ticker-quote-moves {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  align-items: baseline;
  min-width: 0;
}
.ticker-quote-move {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.ticker-quote-grid {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(6, minmax(92px, 1fr));
  gap: 6px;
}
.ticker-quote-stat {
  min-width: 0;
  padding: 7px 8px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 6px;
}
.ticker-quote-stat .value {
  font-size: 11px;
  font-weight: 800;
  overflow-wrap: anywhere;
}
.ticker-quote-source {
  grid-column: 1 / -1;
  color: var(--fg-dim);
  font-size: 10px;
  overflow-wrap: anywhere;
}
.ticker-profile-description {
  color: var(--fg);
  font-size: 11px;
  line-height: 1.45;
  margin-bottom: 8px;
  overflow-wrap: anywhere;
}
.ticker-profile-link {
  color: var(--accent);
  text-decoration: none;
  overflow-wrap: anywhere;
}
.ticker-profile-link:hover { text-decoration: underline; }
@media (max-width: 980px) {
  .ticker-detail-layout { grid-template-columns: 1fr; }
  .ticker-side-rail { order: 1; }
  .ticker-chart-column { order: 2; }
  .ticker-main-widgets { grid-template-columns: 1fr; }
  .ticker-quote-header-metrics { grid-template-columns: 1fr; }
  .ticker-quote-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .ticker-quote-price { font-size: 23px; }
  .ticker-quote-grid { grid-template-columns: 1fr; }
  .ticker-quote-move { white-space: normal; }
}

/* Status bar */
#statusbar {
  height: 26px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 14px;
  background: var(--panel);
  border-top: 1px solid var(--line);
  color: var(--fg-dim);
  font-size: 11px;
}
.disclaimer { margin-left: auto; }

/* ---- Backtest / Compare form + stats + charts ---- */
.bt-form {
  display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: end;
  background: var(--panel); border: 1px solid var(--line); border-radius: 5px;
  padding: 12px 14px; margin-bottom: 14px;
}
.bt-form label { display: flex; flex-direction: column; gap: 3px; color: var(--fg-dim); font-size: 11px; }
.bt-form input, .bt-form select {
  background: var(--bg); color: var(--fg); border: 1px solid var(--line);
  border-radius: 3px; padding: 4px 7px; font: 12px var(--mono); min-width: 110px;
}
.bt-form .multi-select { min-width: 180px; min-height: 90px; }
.bt-form input:focus, .bt-form select:focus { outline: 1px solid var(--accent); }
.bt-form .run-btn {
  background: linear-gradient(135deg, var(--accent), hsl(263, 75%, 55%));
  color: var(--bg); border: 1px solid var(--accent);
  border-radius: var(--radius); padding: 6px 16px; font: 700 12px var(--mono); cursor: pointer;
  letter-spacing: 0.3px;
  box-shadow: 0 0 12px hsla(263, 75%, 50%, 0.3);
  transition: all 120ms ease;
}
.bt-form .run-btn:hover {
  background: linear-gradient(135deg, hsl(263, 85%, 70%), hsl(280, 80%, 65%));
  box-shadow: 0 0 18px hsla(263, 75%, 50%, 0.5);
}
.bt-form .run-btn:disabled { opacity: 0.5; cursor: wait; box-shadow: none; }

.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-bottom: 14px; }
.tile { min-width: 0; background: var(--panel); border: 1px solid var(--line); border-radius: 5px; padding: 9px 12px; }
.tile .label { color: var(--fg-dim); font-size: 10px; text-transform: uppercase; letter-spacing: 0.8px; }
.tile .value { overflow-wrap: anywhere; font-size: 18px; font-variant-numeric: tabular-nums; margin-top: 3px; }
.tile .value.pos { color: var(--ok); }
.tile .value.neg { color: var(--bad); }
.tile .sub { color: var(--fg-dim); font-size: 11px; margin-top: 2px; }
.compact-list { margin: 8px 0 0; padding-left: 18px; color: var(--fg-dim); font-size: 11px; line-height: 1.45; }
.compact-list li + li { margin-top: 4px; }

.charts { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 14px; min-width: 0; max-width: 100%; }
.charts > * { min-width: 0; max-width: 100%; }
@media (max-width: 900px) { .charts { grid-template-columns: 1fr; } }
.chart-card { background: var(--panel); border: 1px solid var(--line); border-radius: 5px; padding: 10px 12px; min-width: 0; max-width: 100%; overflow: hidden; box-sizing: border-box; }
.chart-card h3 { margin: 0 0 6px; font-size: 12px; color: var(--fg-dim); text-transform: uppercase; letter-spacing: 0.5px; }
.chart-card canvas { width: 100%; display: block; }
.chart-card .echart-host, .chart-card .highcharts-container { max-width: 100%; overflow: hidden; }
.chart-meta { color: var(--fg-dim); font-size: 11px; margin-top: 6px; }

/* ---- Universe tab ---- */
.u-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
  gap: 12px;
}
.u-card { background: var(--panel); border: 1px solid var(--line); border-radius: 5px; padding: 10px 12px; }
.u-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.u-ticker { font-weight: 700; font-size: 14px; letter-spacing: 0.5px; color: var(--accent); }
.u-name { color: var(--fg); font-size: 12px; }
.u-alloc { color: var(--fg-dim); font-size: 11px; margin-left: auto; }
.u-sector { color: var(--fg-dim); font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; }
.u-meta { color: var(--fg-dim); font-size: 11px; margin-bottom: 2px; }
.u-section { margin-top: 7px; }
.u-label { color: var(--fg-dim); font-size: 10px; text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 3px; }
.u-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.u-tag { background: var(--panel-2); border: 1px solid var(--line); padding: 1px 6px; border-radius: 3px; font-size: 10px; color: var(--fg); }
.u-tag.tag-cat { border-color: var(--warn); color: var(--warn); }
.u-slice { display: flex; gap: 8px; font-size: 11px; padding: 1px 0; }
.u-slice-k { color: var(--fg-dim); min-width: 50px; }
.u-slice-v { color: var(--fg); font-variant-numeric: tabular-nums; }

/* ---- Chain table ---- */
.chain-table th, .chain-table td { padding: 3px 6px; font-size: 11px; }
.chain-row.atm { background: rgba(88,166,255,0.08); }
.chain-row.atm td { border-color: var(--accent); }

/* ---- Payoff legs ---- */
.preset-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.preset-btn {
  background: var(--panel-2); color: var(--fg); border: 1px solid var(--line);
  border-radius: 3px; padding: 4px 9px; font: 11px var(--mono); cursor: pointer;
}
.preset-btn:hover { background: var(--line); color: var(--accent); border-color: var(--accent); }
.preset-btn.add { background: var(--accent); color: var(--bg); border-color: var(--accent); }
.legs-host { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.leg-row {
  display: flex; gap: 6px; align-items: center; background: var(--panel);
  border: 1px solid var(--line); border-radius: 3px; padding: 4px 7px;
}
.leg-row select, .leg-row input {
  background: var(--bg); color: var(--fg); border: 1px solid var(--line);
  border-radius: 2px; padding: 2px 5px; font: 12px var(--mono); min-width: 70px;
}
.leg-rm {
  background: transparent; color: var(--bad); border: 0; cursor: pointer;
  font-size: 14px; font-weight: 700; padding: 2px 8px;
}
.help-text { color: var(--fg-dim); font-size: 11px; margin-bottom: 10px; }

/* ---- Models tab ---- */
.model-card .model-stats { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 4px; }
.model-stat-tile {
  display: inline-flex; gap: 4px; align-items: baseline;
  background: var(--bg); border: 1px solid var(--line); border-radius: 3px;
  padding: 2px 7px; font-size: 11px;
}
.model-stat-k { color: var(--fg-dim); font-size: 10px; }
.model-stat-v { font-variant-numeric: tabular-nums; color: var(--fg); }
.model-stat-tile.pos .model-stat-v { color: var(--ok); }
.model-stat-tile.neg .model-stat-v { color: var(--bad); }
.model-verdict {
  color: var(--fg-dim); font-size: 11px; font-style: italic;
  border-left: 2px solid var(--line); padding: 2px 8px; margin: 4px 0; line-height: 1.35;
}
.model-arch {
  background: var(--bg); border: 1px solid var(--line); border-radius: 3px;
  padding: 6px 8px; font-size: 10.5px; line-height: 1.45; color: var(--fg);
  white-space: pre-wrap; margin: 0;
}
.code-block {
  background: var(--bg); border: 1px solid var(--line); border-radius: 3px;
  color: var(--fg); font-family: var(--mono); font-size: 10.5px; line-height: 1.45;
  margin: 6px 0 0; overflow-wrap: anywhere; padding: 6px 8px; white-space: pre-wrap;
}
.model-hparams { display: grid; grid-template-columns: 1fr; gap: 1px; }
.model-impl { font-family: var(--mono); font-size: 10.5px; color: var(--fg-dim); }
.model-btn-row { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
.model-btn-out { color: var(--fg-dim); font-size: 11px; font-variant-numeric: tabular-nums; }

/* ---- Top Plays (advisor home) ---- */
.tp-banner {
  background:
    radial-gradient(ellipse at top right, hsla(263, 80%, 40%, 0.18), transparent 60%),
    linear-gradient(135deg, hsla(263, 70%, 25%, 0.35), hsla(280, 60%, 20%, 0.2));
  border: 1px solid hsla(263, 70%, 50%, 0.4);
  border-radius: var(--radius);
  padding: 16px 18px; margin-bottom: 14px;
  box-shadow: 0 0 24px hsla(263, 75%, 30%, 0.15);
}
.tp-title {
  margin: 0 0 4px; font-size: 17px; letter-spacing: 0.5px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-weight: 800;
}
.tp-sub { color: var(--fg-dim); font-size: 11px; }
.home-decision-cockpit {
  margin: 0 0 12px;
  padding: 11px;
  background: var(--panel);  /* was slate-dark gradient — bled grey in light mode */
}
.home-decision-cockpit h3 {
  margin-bottom: 10px;
}
.home-cockpit-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}
.home-cockpit-lane {
  min-width: 0;
  min-height: 128px;
  display: grid;
  grid-template-rows: auto minmax(30px, auto) 8px 32px;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: rgba(2, 6, 23, 0.18);
  color: var(--fg);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.home-cockpit-lane:hover {
  border-color: currentColor;
  background: var(--panel-2);
}
.home-cockpit-lane:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}
.home-cockpit-lane.market { color: #58a6ff; }
.home-cockpit-lane.picks { color: var(--accent); }
.home-cockpit-lane.news { color: #60a5fa; }
.home-cockpit-lane.models { color: var(--ok); }
.home-cockpit-lane.paper { color: var(--warn); }
.home-cockpit-head {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 7px;
  align-items: center;
  min-width: 0;
}
.home-cockpit-icon {
  grid-row: span 2;
  width: 20px;
  height: 20px;
}
.home-cockpit-label {
  color: var(--fg-dim);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.home-cockpit-value {
  min-width: 0;
  color: var(--fg);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.home-cockpit-detail {
  min-width: 0;
  color: var(--fg-dim);
  font-size: 10px;
  line-height: 1.25;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.home-cockpit-meter {
  display: block;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.1);
}
.home-cockpit-fill {
  display: block;
  height: 100%;
  min-width: 2px;
}
.home-cockpit-fill.market,
.home-cockpit-bar.market { background: #58a6ff; }
.home-cockpit-fill.picks,
.home-cockpit-bar.picks { background: var(--accent); }
.home-cockpit-fill.news,
.home-cockpit-bar.news { background: #60a5fa; }
.home-cockpit-fill.models,
.home-cockpit-bar.models { background: var(--ok); }
.home-cockpit-fill.paper,
.home-cockpit-bar.paper { background: var(--warn); }
.home-cockpit-spark {
  display: flex;
  align-items: end;
  gap: 4px;
  min-width: 0;
  height: 32px;
}
.home-cockpit-bar {
  flex: 1 1 0;
  min-width: 3px;
  border-radius: 2px 2px 0 0;
  opacity: 0.9;
}
.home-command-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 12px;
}
.home-command-card {
  min-width: 0;
  min-height: 104px;
  display: grid;
  grid-template-rows: auto auto auto 1fr;
  gap: 6px;
  align-items: start;
  padding: 10px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--fg);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.home-command-card:hover {
  border-color: var(--accent);
  background: var(--panel-2);
}
.home-command-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.home-command-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.home-command-icon {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  color: var(--accent);
}
.home-command-card.news .home-command-icon { color: #58a6ff; }
.home-command-card.models .home-command-icon { color: var(--ok); }
.home-command-card.plan .home-command-icon { color: var(--warn); }
.home-command-value {
  flex: 0 1 auto;
  max-width: 88px;
  padding: 1px 7px;
  border: 1px solid var(--line);
  border-radius: 3px;
  color: var(--fg-dim);
  font-size: 10px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.home-command-title {
  min-width: 0;
  color: var(--fg);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.home-command-meta {
  min-width: 0;
  color: var(--fg-dim);
  font-size: 10.5px;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.home-command-meter {
  align-self: end;
  display: block;
  height: 9px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.08);
}
.home-command-fill {
  display: block;
  height: 100%;
  min-width: 2px;
}
.home-command-fill.picks { background: var(--accent); }
.home-command-fill.news { background: #58a6ff; }
.home-command-fill.models { background: var(--ok); }
.home-command-fill.plan { background: var(--warn); }
.home-visual-guide {
  margin: 0 0 12px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}
.home-guide-rail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px minmax(0, 1fr) 34px minmax(0, 1fr) 34px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
}
.home-guide-node {
  min-width: 0;
  min-height: 86px;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  grid-template-rows: auto 24px;
  column-gap: 8px;
  row-gap: 8px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  color: var(--fg);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.home-guide-node:hover {
  border-color: currentColor;
  background: var(--panel-2);
}
.home-guide-node:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}
.home-guide-node.market { color: #58a6ff; }
.home-guide-node.picks { color: var(--accent); }
.home-guide-node.models { color: var(--ok); }
.home-guide-node.paper { color: var(--warn); }
.home-guide-icon {
  width: 22px;
  height: 22px;
}
.home-guide-text {
  min-width: 0;
  display: grid;
  gap: 1px;
}
.home-guide-label {
  color: var(--fg);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.15;
}
.home-guide-meta {
  color: var(--fg-dim);
  font-size: 10px;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.home-guide-spark {
  grid-column: 1 / -1;
  height: 24px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 4px;
  align-items: end;
}
.home-guide-bar {
  display: block;
  min-height: 3px;
  border-radius: 2px 2px 0 0;
  background: currentColor;
  opacity: 0.72;
}
.home-guide-link {
  display: block;
  height: 2px;
  min-width: 18px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--line), transparent);
}
.power-user-guide,
.growth-trend-panel {
  margin: 0 0 12px;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}
.power-user-head,
.growth-trend-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 10px;
}
.power-user-title,
.growth-trend-title {
  color: var(--fg);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.2;
}
.power-user-note,
.growth-trend-note {
  color: var(--fg-dim);
  font-size: 10.5px;
  line-height: 1.25;
  text-align: right;
}
.power-user-grid,
.growth-trend-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 8px;
}
.power-user-card {
  min-width: 0;
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 8px;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: rgba(15, 23, 42, 0.18);
}
.power-user-icon {
  width: 22px;
  height: 22px;
  color: var(--accent);
}
.power-user-card:nth-child(2) .power-user-icon { color: #58a6ff; }
.power-user-card:nth-child(3) .power-user-icon { color: var(--ok); }
.power-user-card:nth-child(4) .power-user-icon { color: var(--warn); }
.power-user-card-body {
  min-width: 0;
  display: grid;
  gap: 3px;
}
.power-user-card-title {
  color: var(--fg);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.15;
}
.power-user-copy {
  color: var(--fg-dim);
  font-size: 10.5px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.growth-trend-card {
  min-width: 0;
  display: grid;
  grid-template-rows: auto auto auto 1fr auto;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 6px;
  background: rgba(2, 6, 23, 0.2);
}
.growth-trend-card:hover { background: var(--panel-2); }
.growth-trend-top {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.growth-trend-icon {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  color: var(--accent);
}
.growth-trend-name {
  min-width: 0;
  color: var(--fg);
  font-size: 12.5px;
  font-weight: 800;
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.growth-trend-copy {
  color: var(--fg-dim);
  font-size: 10.5px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.growth-trend-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.trend-pill {
  min-width: 0;
  padding: 2px 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--fg);
  background: rgba(148, 163, 184, 0.08);
  font-size: 9.5px;
  font-weight: 800;
  line-height: 1.2;
  text-decoration: none;
}
.trend-proof-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}
.trend-proof {
  min-width: 0;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: rgba(148, 163, 184, 0.06);
}
.trend-proof-label {
  display: block;
  color: var(--fg-dim);
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.trend-proof-value {
  display: block;
  margin-top: 2px;
  color: var(--fg);
  font-size: 10.5px;
  font-weight: 800;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.trend-spark {
  display: flex;
  align-items: end;
  height: 30px;
  gap: 4px;
}
.trend-spark-bar {
  flex: 1 1 0;
  min-width: 3px;
  border-radius: 2px 2px 0 0;
  background: var(--accent);
  opacity: 0.85;
}
.trend-checks {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 6px;
}
.trend-check {
  min-width: 0;
  color: var(--fg-dim);
  font-size: 10px;
  line-height: 1.25;
}
.trend-check strong {
  display: block;
  color: var(--fg);
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.theme-movers-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.theme-mover-row {
  min-width: 0;
  display: grid;
  grid-template-columns: 58px 68px minmax(0, 1fr);
  gap: 8px;
  align-items: baseline;
  padding: 4px 0;
  border-bottom: 1px solid var(--line);
}
.theme-mover-ticker {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.theme-mover-change {
  min-width: 0;
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.theme-mover-themes {
  min-width: 0;
  overflow-wrap: anywhere;
  line-height: 1.25;
}
.themes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: 14px;
  margin-top: 14px;
}
.themes-grid > * { min-width: 0; }
.themes-table-scroll {
  max-width: 100%;
  margin-top: 2px;
}
.themes-table-scroll .opt-table {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
}
.themes-table-scroll .opt-table th,
.themes-table-scroll .opt-table td {
  padding: 4px 5px;
  font-size: 10.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.theme-perf-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
}
.theme-perf-cell {
  min-width: 0;
  padding: 5px 6px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: rgba(148, 163, 184, 0.06);
}
.theme-perf-value {
  display: block;
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tp-form { margin-bottom: 14px; }
.tp-option-controls, .tp-shared-controls { display: contents; }
.tp-option-controls[hidden], .tp-option-style-row[hidden], .tp-equity-styles[hidden] { display: none !important; }
.tp-asset-tabs {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  margin-bottom: 8px; padding: 8px 10px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 4px;
}
.tp-asset-tabs .u-label { margin-right: 8px; margin-bottom: 0; }
.tp-asset-tab {
  border-radius: 4px;
  min-width: 96px;
}
.tp-asset-context {
  margin: 0 0 12px; color: var(--fg-dim); font-size: 11px;
  padding-left: 2px;
}
.tp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); gap: 12px; }
/* Compact mode kicks in when there are many tiles — tighter cards, smaller fonts */
.tp-grid.compact { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 10px; }
.tp-grid.compact .play-tile { padding: 10px 12px; }
.tp-grid.compact .play-ticker { font-size: 16px; }
.tp-grid.compact .play-narrative { font-size: 10.5px; }
.tp-grid.compact .play-pnl-v { font-size: 12px; }
.play-tile {
  /* Was a hardcoded dark gradient (var(--panel) → hsla(272,28%,7%)) that
     produced an ugly white-to-near-black sweep in light mode. Solid
     panel reads cleanly in both themes. */
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 14px; display: flex; flex-direction: column; gap: 8px;
  min-width: 0;
  word-wrap: break-word;
  overflow-wrap: anywhere;
  transition: transform 120ms ease, border-color 200ms ease, box-shadow 200ms ease;
}
.play-tile > * { min-width: 0; }
.play-tile:hover {
  transform: translateY(-2px); border-color: var(--accent);
  box-shadow: 0 8px 24px hsla(263, 75%, 20%, 0.4), 0 0 12px hsla(263, 75%, 40%, 0.2);
}
.play-tile.top {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), 0 0 24px hsla(263, 75%, 50%, 0.25);
}
.play-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.play-head > * { min-width: 0; }
.play-rank {
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 12px;
  padding: 1px 8px; font-size: 11px; color: var(--fg-dim); font-weight: 700;
}
.play-tile.top .play-rank { background: var(--ok); color: var(--bg); border-color: var(--ok); }
.play-ticker { font-size: 18px; font-weight: 700; letter-spacing: 0.5px; color: var(--accent); }
.play-spark {
  width: 110px; max-width: 110px; height: 32px; display: block;
  background: var(--bg); border: 1px solid var(--line); border-radius: 3px;
}
.play-trend { font-size: 11px; font-variant-numeric: tabular-nums; font-weight: 700; }
.play-trend.pos { color: var(--ok); }
.play-trend.neg { color: var(--bad); }
.play-catalyst {
  font-size: 10.5px; color: var(--warn); font-weight: 700;
  background: rgba(210,153,34,0.12); border: 1px solid var(--warn);
  border-radius: 10px; padding: 1px 7px; letter-spacing: 0.2px;
}
.play-score { margin-left: auto; padding: 1px 8px; border-radius: 3px; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }
.play-score.hot { background: var(--ok); color: var(--bg); }
.play-score.warm { background: var(--warn); color: var(--bg); }
.play-score.cool { background: var(--line); color: var(--fg-dim); }
.play-score.pos { background: rgba(63,185,80,0.16); color: var(--ok); border: 1px solid rgba(63,185,80,0.35); }
.play-score.neg { background: rgba(248,81,73,0.16); color: var(--bad); border: 1px solid rgba(248,81,73,0.35); }
.play-struct {
  color: var(--fg); font-size: 12px; font-weight: 600;
  word-break: break-word; overflow-wrap: anywhere;
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
}
.play-explainer {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: color-mix(in srgb, var(--panel-2) 78%, transparent);
  padding: 9px 10px;
}
.play-explainer.bullish { border-color: rgba(63,185,80,0.34); }
.play-explainer.bearish { border-color: rgba(248,81,73,0.34); }
.play-explainer.volatility, .play-explainer.neutral { border-color: rgba(96,165,250,0.32); }
.play-explainer-head {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 9px;
  align-items: start;
}
.option-direction-icon {
  width: 30px;
  height: 30px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--accent);
}
.option-direction-icon svg { width: 19px; height: 19px; display: block; }
.option-direction-icon.bullish { color: var(--ok); border-color: rgba(63,185,80,0.38); }
.option-direction-icon.bearish { color: var(--bad); border-color: rgba(248,81,73,0.38); }
.option-direction-icon.volatility { color: var(--warn); border-color: rgba(245,158,11,0.42); }
.play-explainer-title {
  color: var(--fg);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.3;
}
.play-explainer-text, .play-explainer-note {
  color: var(--fg-dim);
  font-size: 11px;
  line-height: 1.45;
  margin-top: 3px;
}
.play-explainer-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 8px;
}
.play-explainer-badge {
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--fg);
  background: var(--bg);
  padding: 1px 7px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.35px;
}
.play-risk-visual {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-top: 8px;
}
.play-risk-side {
  border-radius: 5px;
  padding: 6px 7px;
  background: var(--bg);
  border: 1px solid var(--line);
}
.play-risk-side.gain { border-color: rgba(63,185,80,0.30); }
.play-risk-side.loss { border-color: rgba(248,81,73,0.30); }
.play-risk-label {
  color: var(--fg-dim);
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}
.play-risk-value {
  margin-top: 2px;
  font-size: 13px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.play-risk-side.gain .play-risk-value { color: var(--ok); }
.play-risk-side.loss .play-risk-value { color: var(--bad); }
.play-pills { display: flex; flex-wrap: wrap; gap: 5px; }
.play-pill {
  background: var(--bg); border: 1px solid var(--line); border-radius: 3px;
  padding: 1px 7px; font-size: 10px; display: inline-flex; gap: 5px;
}
.play-pill-k { color: var(--fg-dim); }
.play-pill-v { color: var(--fg); font-variant-numeric: tabular-nums; }
.play-pop { font-size: 10px; }
.play-pop-bar { position: relative; height: 12px; background: var(--bg); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.play-pop-fill { height: 100%; background: var(--accent); }
.play-pop-fill.ok { background: var(--ok); }
.play-pop-fill.warn { background: var(--warn); }
.play-pop-fill.bad { background: var(--bad); }
.play-pop-pct { position: absolute; right: 7px; top: -1px; font-size: 10px; font-weight: 700; color: var(--fg); }
.decision-queue-chart {
  min-height: 220px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 6px;
}
.decision-attention-bar {
  height: 12px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
}
.decision-attention-bar > span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--ok));
}
.decision-attention-row {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 8px;
  align-items: center;
  margin: 6px 0;
}
.decision-next-steps {
  display: grid;
  gap: 8px;
  margin: 10px 0 12px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(148, 163, 184, 0.04);
}
.decision-next-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.decision-next-title {
  color: var(--fg);
  font-size: 11px;
  font-weight: 800;
}
.decision-next-mode {
  color: var(--fg-dim);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.decision-next-rail {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 8px;
}
.decision-next-step {
  min-width: 0;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--bg);
}
.decision-next-index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--line);
  color: var(--fg);
  font-size: 10px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.decision-next-copy {
  color: var(--fg-dim);
  font-size: 10.5px;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.decision-next-step.quote .decision-next-index { background: var(--accent); color: var(--bg); }
.decision-next-step.approval .decision-next-index { background: var(--warn); color: var(--bg); }
.decision-next-step.paper .decision-next-index { background: var(--ok); color: var(--bg); }
.decision-next-step.blocked .decision-next-index { background: var(--bad); color: var(--bg); }
.option-trade-workflow-map {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 10px 0;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
}
.option-trade-step {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 8px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 5px;
  background: rgba(2, 6, 23, 0.2);
}
.option-trade-step.pos { border-color: rgba(16, 185, 129, 0.35); }
.option-trade-step.neg { border-color: rgba(239, 68, 68, 0.38); }
.option-trade-step.warn { border-color: rgba(245, 158, 11, 0.42); }
.option-trade-step-head {
  display: flex;
  justify-content: space-between;
  gap: 7px;
  align-items: center;
  min-width: 0;
}
.option-trade-step-label {
  color: var(--fg-dim);
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
}
.option-trade-step-badge {
  overflow: hidden;
  max-width: 130px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px 6px;
  color: var(--fg-dim);
  font-size: 9px;
  font-weight: 800;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
.option-trade-step-badge.pos { color: var(--ok); border-color: rgba(16, 185, 129, 0.45); }
.option-trade-step-badge.neg { color: var(--bad); border-color: rgba(239, 68, 68, 0.48); }
.option-trade-step-badge.warn { color: var(--warn); border-color: rgba(245, 158, 11, 0.48); }
.option-trade-step-badge.cool { color: var(--accent); border-color: rgba(96, 165, 250, 0.42); }
.option-trade-step-meter {
  height: 8px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.12);
}
.option-trade-step-fill {
  display: block;
  height: 100%;
  min-width: 2px;
}
.option-trade-step-fill.pos { background: var(--ok); }
.option-trade-step-fill.neg { background: var(--bad); }
.option-trade-step-fill.warn { background: var(--warn); }
.option-trade-step-fill.cool { background: var(--accent); }
.option-trade-step-detail {
  overflow: hidden;
  color: var(--fg-dim);
  font-size: 9.5px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 760px) {
  #main .u-meta {
    white-space: normal !important;
    overflow-wrap: anywhere;
  }
  #main .quote-change {
    flex: 1 1 auto !important;
    min-width: 0;
    max-width: 100%;
    white-space: normal !important;
    overflow-wrap: anywhere;
  }
  .option-trade-workflow-map { grid-template-columns: 1fr; }
  .option-trade-step-detail { white-space: normal; }
}
.decision-queue-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.home-live-tape,
.home-deep-research {
  margin: 0 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}
.home-live-summary,
.home-deep-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  padding: 10px 14px;
  cursor: pointer;
}
.home-live-summary::-webkit-details-marker,
.home-deep-summary::-webkit-details-marker { display: none; }
.home-live-summary::before,
.home-deep-summary::before {
  content: "▸";
  color: var(--accent);
  font-size: 14px;
}
.home-live-tape[open] .home-live-summary::before,
.home-deep-research[open] .home-deep-summary::before { content: "▾"; }
.home-live-title,
.home-deep-title {
  flex: 1 1 auto;
  color: var(--fg);
  font-weight: 700;
}
.home-live-meta,
.home-deep-meta {
  color: var(--fg-dim);
  font-size: 11px;
}
.home-live-body,
.home-deep-body {
  display: grid;
  gap: 12px;
  padding: 0 12px 12px;
  min-width: 0;
  max-width: 100%;
}
.home-deep-body > .panel {
  min-width: 0;
  max-width: 100%;
}
.option-trade-plan-panel .u-meta {
  white-space: normal !important;
  overflow-wrap: anywhere;
}
.option-trade-plan-panel .quote-change {
  flex: 1 1 auto !important;
  min-width: 0;
  max-width: 100%;
  justify-content: flex-start;
  white-space: normal !important;
  overflow-wrap: anywhere;
  text-align: left;
}
#main .prediction-audit-center-panel .quote-change,
#main .prediction-trust-center-panel .quote-change,
.prediction-audit-center-panel .quote-change {
  flex: 0 0 auto !important;
  min-width: 72px;
  max-width: none;
  justify-content: center;
  white-space: nowrap !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}
.home-live-body .live-streaming-panel {
  border: 0;
  background: transparent;
  padding: 0;
}
.market-pulse-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px;
  margin: 10px 0;
}
.market-pulse-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px;
  background: var(--bg);
}
.market-pulse-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: baseline;
  margin-bottom: 8px;
}
.market-pulse-meter {
  display: flex;
  height: 14px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.08);
}
.market-pulse-fill { display: block; min-width: 2px; }
.market-pulse-fill.bull { background: var(--ok); }
.market-pulse-fill.bear { background: var(--bad); }
.market-pulse-fill.call { background: var(--accent); }
.market-pulse-fill.put { background: var(--warn); }
.model-lab-panel .tile .value {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.model-evidence-matrix {
  display: grid;
  gap: 8px;
  margin: 10px 0 12px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}
.model-evidence-title {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: baseline;
  color: var(--fg);
  font-size: 12px;
  font-weight: 800;
}
.model-evidence-title small {
  color: var(--fg-dim);
  font-size: 10px;
  font-weight: 600;
}
.model-evidence-row {
  display: grid;
  grid-template-columns: minmax(112px, 0.7fr) minmax(260px, 2.4fr) minmax(76px, auto);
  gap: 10px;
  align-items: center;
  min-width: 0;
  padding: 8px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 6px;
  background: rgba(2, 6, 23, 0.22);
}
.model-evidence-model {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.model-evidence-model strong {
  overflow: hidden;
  color: var(--fg);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.model-evidence-meta {
  overflow: hidden;
  color: var(--fg-dim);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.model-evidence-bars {
  display: grid;
  grid-template-columns: repeat(4, minmax(78px, 1fr));
  gap: 7px;
  min-width: 0;
}
.model-evidence-bar {
  min-width: 0;
}
.model-evidence-stat {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 4px;
  color: var(--fg-dim);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
}
.model-evidence-stat strong {
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}
.model-evidence-track {
  height: 9px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.1);
}
.model-evidence-fill {
  display: block;
  height: 100%;
  min-width: 2px;
}
.model-evidence-fill.pos { background: var(--ok); }
.model-evidence-fill.neg { background: var(--bad); }
.model-evidence-fill.cool { background: var(--accent); }
.model-evidence-badge {
  justify-self: end;
  min-width: 72px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 7px;
  color: var(--fg-dim);
  font-size: 9px;
  font-weight: 800;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
}
.model-evidence-badge.pos {
  border-color: rgba(16, 185, 129, 0.45);
  color: var(--ok);
  background: rgba(16, 185, 129, 0.08);
}
.model-evidence-badge.neg {
  border-color: rgba(239, 68, 68, 0.45);
  color: var(--bad);
  background: rgba(239, 68, 68, 0.08);
}
.model-evidence-badge.cool {
  border-color: rgba(96, 165, 250, 0.38);
  color: var(--accent);
  background: rgba(96, 165, 250, 0.08);
}
.research-winner-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
}
.research-winner-main {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
}
.research-winner-title,
.research-winner-sub {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.research-winner-metric {
  flex: 0 0 86px;
  min-width: 86px;
  max-width: 86px;
  border: 1px solid currentColor;
  border-radius: 8px;
  padding: 5px 7px;
  text-align: right;
  line-height: 1.14;
  white-space: nowrap;
}
.research-winner-metric-label,
.research-winner-metric-score {
  display: block;
  font-size: 10px;
  font-weight: 700;
}
.research-winner-metric-label { text-transform: none; }
.research-winner-metric-score { text-transform: uppercase; }
.research-winner-metric-value {
  display: block;
  font-size: 15px;
  font-weight: 800;
}
.model-lab-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  margin: 10px 0;
}
.model-lab-row {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px;
  background: var(--bg);
  min-width: 0;
}
.model-lab-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: baseline;
  margin-bottom: 8px;
}
.model-lab-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--fg);
  font-weight: 700;
}
.model-lab-score {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.model-lab-score.pos { color: var(--ok); }
.model-lab-score.neg { color: var(--bad); }
.model-lab-score.cool { color: var(--fg-dim); }
.model-lab-meter {
  height: 12px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.08);
}
.model-lab-fill { display: block; height: 100%; min-width: 2px; }
.model-lab-fill.pos { background: var(--ok); }
.model-lab-fill.neg { background: var(--bad); }
.model-lab-fill.cool { background: var(--accent); }
.model-lab-meta {
  margin-top: 7px;
  color: var(--fg-dim);
  font-size: 10.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.model-lab-action {
  margin-top: 8px;
  background: var(--panel-2);
  border: 1px solid var(--accent);
  color: var(--fg);
  border-radius: 4px;
  padding: 6px 12px;
  font: 700 11px var(--mono);
  cursor: pointer;
}
.model-lab-action:hover {
  color: var(--accent);
  background: var(--bg);
}
.play-pnl { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.play-pnl-cell { background: var(--bg); border: 1px solid var(--line); border-radius: 3px; padding: 4px 6px; }
.play-pnl-k { color: var(--fg-dim); font-size: 9px; letter-spacing: 0.4px; }
.play-pnl-v { font-size: 13px; font-variant-numeric: tabular-nums; margin-top: 1px; }
.play-pnl-v.pos { color: var(--ok); }
.play-pnl-v.neg { color: var(--bad); }
.play-canvas { width: 100%; display: block; border: 1px solid var(--line); border-radius: 3px; }
.play-narrative {
  font-size: 11px; line-height: 1.4; color: var(--fg-dim);
  border-left: 2px solid var(--accent); padding: 2px 8px; margin: 4px 0;
  font-style: italic;
}
.decision-brief {
  display: grid;
  gap: 6px;
  padding: 8px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 4px;
  min-width: 0;
}
.ticker-decision-map {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin: 2px 0 4px;
}
.ticker-decision-node {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 7px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: rgba(148, 163, 184, 0.06);
}
.ticker-decision-node.pos { border-color: rgba(16, 185, 129, 0.32); }
.ticker-decision-node.neg { border-color: rgba(239, 68, 68, 0.35); }
.ticker-decision-node.warn { border-color: rgba(245, 158, 11, 0.38); }
.ticker-decision-head {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  align-items: center;
  min-width: 0;
}
.ticker-decision-label {
  color: var(--fg-dim);
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
}
.ticker-decision-badge {
  overflow: hidden;
  max-width: 120px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px 6px;
  color: var(--fg-dim);
  font-size: 9px;
  font-weight: 800;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
.ticker-decision-badge.pos { color: var(--ok); border-color: rgba(16, 185, 129, 0.42); }
.ticker-decision-badge.neg { color: var(--bad); border-color: rgba(239, 68, 68, 0.45); }
.ticker-decision-badge.warn { color: var(--warn); border-color: rgba(245, 158, 11, 0.45); }
.ticker-decision-badge.cool { color: var(--accent); border-color: rgba(96, 165, 250, 0.4); }
.ticker-decision-meter {
  height: 8px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.12);
}
.ticker-decision-fill {
  display: block;
  height: 100%;
  min-width: 2px;
}
.ticker-decision-fill.pos { background: var(--ok); }
.ticker-decision-fill.neg { background: var(--bad); }
.ticker-decision-fill.warn { background: var(--warn); }
.ticker-decision-fill.cool { background: var(--accent); }
.ticker-decision-detail {
  overflow: hidden;
  color: var(--fg-dim);
  font-size: 9.5px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 560px) {
  .ticker-decision-map { grid-template-columns: 1fr; }
  .ticker-decision-detail { white-space: normal; }
}
.decision-thesis {
  color: var(--fg);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.decision-section {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.decision-label {
  color: var(--fg-dim);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.decision-list {
  margin: 0;
  padding-left: 14px;
  color: var(--fg-dim);
  font-size: 10.5px;
  line-height: 1.35;
}
.decision-list li {
  margin: 0 0 2px;
  overflow-wrap: anywhere;
}
.compact-research-card .play-narrative {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.compact-research-details {
  border: 1px solid var(--line);
  border-radius: 4px;
  background: rgba(148, 163, 184, 0.04);
  min-width: 0;
}
.compact-research-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 6px 8px;
  cursor: pointer;
  list-style: none;
}
.compact-research-summary::-webkit-details-marker { display: none; }
.compact-research-summary::before {
  content: "+";
  color: var(--accent);
  font-weight: 700;
}
.compact-research-details[open] .compact-research-summary::before { content: "-"; }
.compact-research-title {
  flex: 1 1 auto;
  color: var(--fg);
  font-size: 10.5px;
  font-weight: 700;
}
.compact-research-meta {
  flex: 0 0 auto;
  color: var(--fg-dim);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}
.compact-research-body {
  display: grid;
  gap: 8px;
  padding: 0 8px 8px;
}
.compact-research-body .decision-brief {
  background: rgba(5, 5, 12, 0.55);
}
.opportunity-radar {
  display: grid;
  gap: 10px;
  margin: 0 0 14px;
}
.opportunity-radar-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}
.opportunity-radar-card {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
  padding: 10px;
}
.opportunity-radar-card.primary {
  border-color: rgba(63, 185, 80, 0.45);
}
.opportunity-radar-label {
  color: var(--fg-dim);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}
.opportunity-radar-value {
  min-height: 24px;
  color: var(--fg);
  font-size: 18px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.opportunity-radar-sub {
  margin-top: 5px;
  color: var(--fg-dim);
  font-size: 10.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.opportunity-radar-mix {
  display: flex;
  height: 12px;
  margin-top: 8px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.08);
}
.opportunity-radar-mix-fill { display: block; min-width: 2px; }
.opportunity-radar-mix-fill.option { background: var(--accent); }
.opportunity-radar-mix-fill.equity { background: var(--ok); }
.opportunity-radar-mix-fill.other { background: var(--warn); }
.opportunity-radar-risks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 8px 12px;
}
.opportunity-radar-risk {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr) 28px;
  gap: 8px;
  align-items: center;
}
.opportunity-radar-risk-label,
.opportunity-radar-count {
  color: var(--fg-dim);
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
}
.opportunity-radar-count {
  text-align: right;
  color: var(--fg);
  font-weight: 700;
}
.opportunity-radar-bar {
  height: 12px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.08);
}
.opportunity-radar-fill { display: block; height: 100%; min-width: 2px; }
.opportunity-radar-fill.conservative { background: var(--ok); }
.opportunity-radar-fill.balanced { background: var(--accent); }
.opportunity-radar-fill.aggressive { background: var(--warn); }
.opportunity-heatmap {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
  gap: 8px;
  margin: 0 0 12px;
}
.opportunity-heatmap-cell {
  min-width: 0;
  min-height: 116px;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 7px;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg);
  color: var(--fg);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.opportunity-heatmap-cell:hover {
  border-color: var(--accent);
  background: var(--panel-2);
}
.opportunity-heatmap-cell:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.opportunity-heatmap-cell.conservative { border-color: rgba(63, 185, 80, 0.32); }
.opportunity-heatmap-cell.balanced { border-color: rgba(var(--accent-rgb), 0.35); }
.opportunity-heatmap-cell.aggressive { border-color: rgba(210, 153, 34, 0.38); }
.opportunity-heatmap-head {
  min-width: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.opportunity-heatmap-ticker {
  min-width: 0;
  color: var(--fg);
  font-size: 14px;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.opportunity-heatmap-score {
  flex: 0 0 auto;
  color: var(--fg);
  font-size: 12px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.opportunity-heatmap-kind {
  min-width: 0;
  color: var(--fg-dim);
  font-size: 10px;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.opportunity-heatmap-meters {
  align-self: end;
  display: grid;
  gap: 5px;
}
.opportunity-heatmap-track {
  display: block;
  height: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.08);
  border: 1px solid var(--line);
}
.opportunity-heatmap-track.pop { height: 7px; }
.opportunity-heatmap-fill {
  display: block;
  height: 100%;
  min-width: 2px;
}
.opportunity-heatmap-fill.conservative { background: var(--ok); }
.opportunity-heatmap-fill.balanced { background: var(--accent); }
.opportunity-heatmap-fill.aggressive { background: var(--warn); }
.opportunity-heatmap-fill.pop { background: #58a6ff; }
.opportunity-heatmap-meta {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.opportunity-heatmap-risk,
.opportunity-heatmap-direction,
.opportunity-heatmap-premium {
  min-width: 0;
  max-width: 100%;
  padding: 1px 6px;
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--fg-dim);
  font-size: 9.5px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.opportunity-heatmap-direction.bullish { color: var(--ok); }
.opportunity-heatmap-direction.bearish { color: var(--bad); }
.opportunity-heatmap-direction.neutral { color: var(--accent); }
.opp-buckets {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}
.opp-bucket { min-width: 0; }
.opp-bucket h4 {
  margin: 0 0 8px;
  color: var(--fg-dim);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.opp-bucket-summary {
  margin: -4px 0 8px;
  color: var(--fg-dim);
  font-size: 10.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.opp-bucket .tp-grid.compact {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.compact-more-grid {
  margin-top: 8px;
  border-top: 1px solid var(--line);
  padding-top: 8px;
}
.compact-more-summary {
  color: var(--accent);
  font-size: 10.5px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
  margin-bottom: 8px;
}
.compact-more-summary::-webkit-details-marker { display: none; }
.opportunity-card .play-pill-v {
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.play-tile.clickable { cursor: pointer; }
.play-tile.clickable:hover { border-color: var(--ok); }
.play-cta {
  color: var(--accent); font-size: 11px; font-weight: 600; text-align: right;
  margin-top: 4px; opacity: 0.7;
}
.play-tile.clickable:hover .play-cta { opacity: 1; }
.play-budget {
  background: var(--bg); border: 1px solid var(--accent);
  border-radius: 4px; padding: 5px 8px; margin-top: 6px;
}
.play-budget .u-label { color: var(--accent); margin-bottom: 4px; }
.play-budget-cells { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.play-budget-cell { font-size: 10px; }
.play-budget-k { color: var(--fg-dim); }
.play-budget-v { color: var(--fg); font-weight: 700; font-variant-numeric: tabular-nums; font-size: 12px; }
.play-budget-note { color: var(--fg-dim); font-size: 10.5px; margin-top: 4px; }
.play-budget-warn { color: var(--bad); font-size: 11px; font-style: italic; }
.tp-footer {
  grid-column: 1 / -1; color: var(--fg-dim); font-size: 10.5px; padding: 8px 6px;
  border-top: 1px dashed var(--line); margin-top: 6px;
}
.tp-styles {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  margin-bottom: 14px; padding: 8px 10px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 4px;
}
.tp-styles .u-label { margin-right: 8px; margin-bottom: 0; }
.style-pill {
  background: var(--panel-2); color: var(--fg-dim); border: 1px solid var(--line);
  border-radius: 14px; padding: 4px 12px; font: 11px var(--mono);
  cursor: pointer; letter-spacing: 0.3px;
}
.style-pill:hover { color: var(--fg); border-color: var(--accent); }
.style-pill.active {
  background: var(--accent); color: var(--bg); border-color: var(--accent); font-weight: 700;
}

/* ---- Optimizer ---- */
.opt-table th, .opt-table td { padding: 4px 9px; font-size: 12px; }
.opt-table th { cursor: pointer; user-select: none; transition: color 0.1s; }
.opt-table th:hover { color: var(--accent); }
.opt-table .struct-cell { text-align: left; color: var(--accent); font-weight: 600; white-space: nowrap; }
.opt-table td.pos { color: var(--ok); }
.opt-table td.neg { color: var(--bad); }
.opt-table tbody tr:first-child { background: rgba(63,185,80,0.06); }
.opt-table tbody tr:first-child td:first-child { color: var(--ok); font-weight: 700; }
.party-d { color: var(--accent); font-weight: 700; }
.party-r { color: var(--bad); font-weight: 700; }

/* ─────────────────────────────────────────────────────────────────────
   RESPONSIVE — best-effort iPad/iPhone layout
   The dashboard is information-dense and designed for a desktop monitor;
   on touch devices we collapse the left rail to a drawer, shrink padding,
   stack form rows, and force single-column play grids. Tables fall back
   to the existing .tbl-scroll horizontal scroller.
   ───────────────────────────────────────────────────────────────────── */

/* Hamburger toggle in the topbar — visible only on small viewports */
.rail-toggle {
  display: none;
  background: var(--panel-2);
  border: 1px solid var(--line);
  color: var(--fg);
  cursor: pointer;
  padding: 4px 9px;
  border-radius: 4px;
  font-size: 16px;
  line-height: 1;
}
.rail-toggle:hover { color: var(--accent); border-color: var(--accent); }

/* iPad portrait + below — sidebar becomes an off-canvas drawer */
@media (max-width: 900px) {
  .home-cockpit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-cockpit-lane { min-height: 112px; }
  .home-command-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-command-card { min-height: 96px; }
  .home-guide-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-guide-link { display: none; }
  .home-guide-node { min-height: 80px; }
  .rail-toggle { display: inline-block; }
  /* Push topbar elements tighter on mobile so they fit one row */
  #topbar { gap: 10px; padding: 8px 12px; flex-wrap: wrap; }
  #topbar .meta { gap: 10px; font-size: 11px; flex-wrap: wrap; }
  #topbar .meta span { white-space: nowrap; }
  .brand { font-size: 13px; }
  .badges { gap: 6px; }
  .badge { font-size: 10px; padding: 1px 6px; }

  /* Rail slides in from the left as a fixed-position drawer */
  #layout { height: auto; min-height: calc(100vh - 38px - 26px); }
  #rail {
    position: fixed;
    top: 50px; left: 0; bottom: 0;
    width: 240px; flex: 0 0 240px;
    z-index: 50;
    transform: translateX(-100%);
    transition: transform 0.18s ease-out;
    box-shadow: 4px 0 16px rgba(0,0,0,0.45);
  }
  #rail.open { transform: translateX(0); }

  /* Optional backdrop when the rail is open. The rail-toggle script
     toggles `body.rail-open` so we can dim the rest of the page. */
  body.rail-open::before {
    content: "";
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 40;
    cursor: pointer;
  }

  /* Main content fills the whole width when the rail is hidden */
  #main { padding: 10px 12px; }

  /* Forms — stack inputs full-width on narrow screens */
  .bt-form, .tp-form {
    flex-wrap: wrap; gap: 8px;
  }
  .bt-form label, .tp-form label {
    flex: 1 1 calc(50% - 4px); min-width: 140px;
  }
  .bt-form input, .bt-form select, .tp-form input, .tp-form select {
    width: 100%; box-sizing: border-box;
  }

  /* Tile grids — smaller min track + tighter padding */
  .tiles {
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 6px;
  }
  .tile { padding: 6px 9px; }
  .tile .value { font-size: 14px; }
  .tile .label { font-size: 9px; }

  /* Play-tile grid (Top Plays / Bears / Themes movers) — single column */
  .tp-grid {
    grid-template-columns: 1fr;
  }

  /* Tabs / style pills wrap nicely */
  .tp-styles { flex-wrap: wrap; gap: 4px; }
  .style-pill { padding: 4px 10px; font-size: 10px; }

  /* Banners — smaller title */
  .tp-title { font-size: 16px; }
  .tp-sub { font-size: 11px; line-height: 1.4; }

  /* Tables — already wrapped in .tbl-scroll, just shrink padding */
  table th, table td { padding: 4px 6px; font-size: 11px; }
  .opt-table th, .opt-table td { padding: 3px 5px; font-size: 11px; }

  /* Cards / panels */
  .panel { padding: 10px 11px; }
}

@media (max-width: 760px) {
  .model-evidence-title {
    display: grid;
    gap: 2px;
  }
  .model-evidence-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .model-evidence-bars {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .model-evidence-badge {
    justify-self: start;
  }
}

/* iPhone-sized — even more aggressive */
@media (max-width: 480px) {
  .home-cockpit-grid { grid-template-columns: 1fr; }
  .home-cockpit-lane {
    min-height: 104px;
    grid-template-rows: auto auto 8px 28px;
  }
  .home-command-strip { grid-template-columns: 1fr; }
  .home-guide-rail { grid-template-columns: 1fr; }
  .power-user-grid,
  .growth-trend-grid,
  .themes-grid { grid-template-columns: 1fr; }
  .theme-movers-grid { grid-template-columns: 1fr; }
  .theme-mover-row { grid-template-columns: 58px 68px minmax(0, 1fr); }
  .power-user-head,
  .growth-trend-head { display: grid; gap: 3px; }
  .power-user-note,
  .growth-trend-note { text-align: left; }
  .theme-perf-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #topbar { gap: 8px; padding: 6px 10px; }
  #topbar .meta { font-size: 10px; }
  .brand { font-size: 12px; }
  /* Tiles — 2 per row on phones */
  .tiles { grid-template-columns: repeat(2, 1fr); }
  /* Forms one per row */
  .bt-form label, .tp-form label { flex: 1 1 100%; }
  /* Hide the universe-count chip — saves space */
  #universe-count { display: none; }
  /* Schwab refresh banner spans full width */
  #schwab-warn { font-size: 11px; padding: 4px 10px; }
}

/* Coarse pointer (touch devices) — bigger touch targets */
@media (pointer: coarse) {
  .nav { padding: 10px 12px; min-height: 36px; }
  .style-pill { padding: 6px 12px; min-height: 32px; }
  .refresh-btn, .run-btn { min-height: 32px; padding: 6px 12px; }
  .rail-toggle { min-height: 36px; min-width: 36px; }
}

/* ======================================================
   Google-Finance-style price chart (mkPriceChart)
   ====================================================== */
.price-chart-host { position: relative; }
.price-chart {
  background:
    radial-gradient(circle at top left, rgba(var(--accent-rgb), 0.10), transparent 55%),
    var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px 18px 6px;
  position: relative;
  overflow: hidden;
}
.price-chart-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.price-chart-ticker {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-dim);
  margin-bottom: 2px;
}
.price-chart-price {
  font-family: var(--mono);
  font-size: 28px;
  font-weight: 800;
  color: var(--fg);
  line-height: 1.1;
}
.price-chart-move {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  margin-top: 3px;
  letter-spacing: 0.03em;
}
.price-chart-move-up { color: #49df80; }
.price-chart-move-down { color: #e85e5e; }
.price-chart-periods {
  display: flex;
  gap: 4px;
  background: rgba(8,4,18,0.45);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 3px;
}
.price-chart-period-btn {
  padding: 5px 11px;
  border-radius: 7px;
  background: transparent;
  color: var(--fg-dim);
  border: 0;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  transition: background .15s ease, color .15s ease;
}
.price-chart-period-btn:hover { color: var(--fg); }
.price-chart-period-btn.is-active {
  background: rgba(var(--accent-rgb), 0.18);
  color: var(--accent);
}
.price-chart-wrap {
  position: relative;
  width: 100%;
  height: 280px;
  margin-top: 4px;
}
.price-chart-svg { display: block; width: 100%; height: 100%; }
.price-chart-tooltip {
  position: absolute;
  pointer-events: none;
  background: rgba(8,4,18,0.92);
  border: 1px solid rgba(var(--accent-rgb), 0.40);
  border-radius: 8px;
  padding: 8px 11px;
  font-size: 11px;
  color: var(--fg);
  min-width: 170px;
  z-index: 5;
  opacity: 0;
  transition: opacity .12s ease;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 10px 24px -10px rgba(var(--accent-rgb), 0.4);
}
.price-chart-tooltip-date {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--fg-dim);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.price-chart-tooltip-row {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 2px 0;
  font-family: var(--mono);
}
.price-chart-tooltip-row strong { color: var(--fg); }
.price-chart-up { color: #49df80; }
.price-chart-down { color: #e85e5e; }

/* ======================================================
   Insight-first fundamentals panel — analysis up top
   ====================================================== */
.fund-insight-banner {
  background:
    linear-gradient(135deg, rgba(var(--accent-rgb), 0.10), transparent 70%),
    var(--panel-2);
  border: 1px solid rgba(var(--accent-rgb), 0.30);
  border-radius: 12px;
  padding: 6px 10px;
  margin: 16px 0 14px;
}
.fund-insight-eyebrow {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 800;
  margin-bottom: 6px;
}
.fund-insight-bullets {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 6px 18px;
}
.fund-insight-bullets > div {
  font-size: 13px;
  color: var(--fg);
  line-height: 1.45;
  padding: 4px 0;
  border-left: 2px solid var(--accent);
  padding-left: 10px;
}
.fund-stats-compact {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  margin: 10px 0 16px;
}
.fund-stat {
  background: var(--panel);
  padding: 8px 10px;
}
.fund-stat-label {
  font-size: 9px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--fg-dim);
  margin-bottom: 3px;
}
.fund-stat-value {
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 700;
  color: var(--fg);
}
.fund-stat-value.is-pos { color: #49df80; }
.fund-stat-value.is-neg { color: #e85e5e; }

/* ======================================================
   Home dashboard right rail — live news + video + X.
   Splits viewHome into two columns on desktop; collapses
   to a stacked column below main on narrow screens.
   ====================================================== */
.home-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 10px;
  align-items: start;
}
.home-main { min-width: 0; }
/* Right column flows with the page now — no sticky scroll. Holds the
   X + Reddit pulse only; news + video moved into main column central
   modals. */
.home-right-rail {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* Compact list-style rows for X + Reddit pulse */
.rail-pulse-row {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 9px;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  text-decoration: none;
  color: var(--fg);
  transition: border-color .12s ease, background .12s ease;
}
.rail-pulse-row + .rail-pulse-row { margin-top: 6px; }
.rail-pulse-row:hover { border-color: var(--accent); background: var(--panel-2); }
.rail-pulse-ic {
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 6px;
  font-weight: 800; font-size: 13px;
  color: #fff;
}
.rail-pulse-ic-x { background: #000; }
.rail-pulse-ic-reddit { background: #ff4500; font-size: 11px; }
.rail-pulse-body { min-width: 0; }
.rail-pulse-title {
  font-size: 12px; font-weight: 700; color: var(--fg);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rail-pulse-meta {
  font-size: 10px; color: var(--fg-dim); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-family: var(--mono);
}

/* Central news modal — large prominent grid in the main column. */
.home-news-modal {
  margin: 6px 0;
  padding: 6px 10px;
  border-left: 3px solid var(--accent);
}
.home-news-modal-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 12px;
  gap: 12px;
}
.home-news-modal-head .section-title { margin: 0; }
.home-news-modal-grid {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
}
.home-rail-head {
  margin: 12px 0 4px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-dim);
  border-bottom: 1px solid var(--line);
  padding-bottom: 6px;
}
.home-rail-head:first-child { margin-top: 0; }
.home-rail-news, .home-rail-yt, .home-rail-x {
  grid-template-columns: 1fr !important;
  gap: 8px !important;
}
.home-rail-news .news-card,
.home-rail-yt .news-card { min-height: 0; }
.home-rail-news .news-card-hero .news-card-title { font-size: 13px; }
@media (max-width: 980px) {
  .home-wrap { grid-template-columns: 1fr; }
  .home-right-rail {
    position: static;
    max-height: none;
    overflow: visible;
  }
}

/* Light-mode: kill leftover dark rail count badges and foot strip
   so the rail reads cleanly in white mode. */
:root[data-theme="light"] .nav-section__count {
  background: var(--panel-2) !important;
  border: 1px solid var(--line) !important;
  color: var(--fg-dim) !important;
}
:root[data-theme="light"] .nav-section[data-open="true"] .nav-section__count {
  background: rgba(var(--accent-rgb), 0.10) !important;
  color: var(--accent) !important;
}
:root[data-theme="light"] .nav-section[data-filter-active] .nav-section__count {
  background: rgba(var(--accent-rgb), 0.15) !important;
  color: var(--accent) !important;
}
:root[data-theme="light"] .rail-foot {
  background: transparent !important;
  border-top: 1px solid var(--line);
  color: var(--fg-dim);
}
/* Standalone .nav hover/active markers — the ::before stripe used a
   hardcoded purple HSL that didn't track the theme. */
:root[data-theme="light"] .nav:hover::before,
:root[data-theme="light"] .nav.active::before {
  background: var(--accent) !important;
}
/* Various widget tints baked at 0.04-0.08 alpha against dark — they
   end up too dim on white. Bump the readable variants. */
:root[data-theme="light"] [style*="rgba(168,152,179"]  { background: var(--panel-2) !important; }

/* Market Summary hero — first widget on home. Indices + BTC/ETH/oil
   with a mini sparkline per card. Yahoo-Finance style. */
.market-hero {
  margin: 12px 0 18px;
  padding: 12px 14px;
  border-left: 3px solid var(--accent);
}
.market-hero-title {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-dim);
  margin-bottom: 10px;
}
.market-hero-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
}
.market-hero-card {
  display: flex;
  flex-direction: column;
  padding: 6px 10px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  text-decoration: none;
  color: var(--fg);
  transition: border-color .12s ease, transform .12s ease;
}
.market-hero-card:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
}
.market-hero-card .mh-label {
  font-size: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--fg-dim);
}
.market-hero-card .mh-price {
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 800;
  color: var(--fg);
  margin-top: 4px;
  line-height: 1.1;
}
.market-hero-card .mh-change {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  margin-top: 3px;
  letter-spacing: 0.03em;
}
.market-hero-card .mh-change.pos { color: var(--ok); }
.market-hero-card .mh-change.neg { color: var(--bad); }
.market-hero-card .mh-spark {
  margin-top: 6px;
  height: 32px;
}
.market-hero-card .mh-spark svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Yahoo-Finance-style three-tier news layout inside the home news
   modal. Hero card + 6 top-story cards + headlines list. */
.yh-news-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(180px, 1fr);
  gap: 10px;
  align-items: start;
}
@media (max-width: 980px) {
  .yh-news-layout { grid-template-columns: 1fr; }
  /* At single-column the children's hardcoded grid-column / grid-row
     hints would otherwise spawn implicit tracks that squeeze the
     top-stories cell to ~55px. Force every child into the one real
     column so they stack vertically. */
  .yh-news-layout > * {
    grid-column: 1 !important;
    grid-row: auto !important;
  }
}
.yh-news-layout .yh-hero {
  grid-column: 1;
  grid-row: 1 / span 1;
  /* Full hero card — bigger image + title */
}
.yh-news-layout .yh-hero .news-hero {
  /* Use aspect-ratio so the hero scales with width instead of being
     pinned at 75px high — at desktop widths the image was getting cut
     off because the card grew wider while the box stayed short.
     16/9 keeps the natural framing of most editorial thumbnails. */
  aspect-ratio: 16 / 9;
  max-height: 140px;
  overflow: hidden;
}
.yh-news-layout .yh-hero .news-card-title {
  font-size: 12px !important;
  line-height: 1.3 !important;
  -webkit-line-clamp: 3;
}
.yh-top-stories { grid-column: 1; }
.yh-top-stories-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}
.yh-tier-head {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-dim);
  margin: 0 0 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
}
.yh-headlines {
  grid-column: 2;
  grid-row: 1 / span 2;
}
.yh-headlines-list {
  list-style: none;
  margin: 0; padding: 0;
}
.yh-headline-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
}
.yh-headline-item:last-child { border-bottom: 0; }
.yh-headline-link {
  font-size: 12px;
  color: var(--fg);
  text-decoration: none;
  line-height: 1.4;
  font-weight: 500;
}
.yh-headline-link:hover { color: var(--accent); }
.yh-headline-age {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--fg-dim);
  white-space: nowrap;
  padding-top: 2px;
}

/* Further news-modal shrink — user requested ~35% more reduction. */
.home-news-modal .news-card { min-height: 0; }
.home-news-modal .news-card-hero .news-hero {
  height: 65px;
  aspect-ratio: auto;
  overflow: hidden;
}
.home-news-modal .news-card-title { font-size: 10px !important; -webkit-line-clamp: 2; line-height: 1.25; }
.home-news-modal .news-card-desc { display: none; }
.home-news-modal .yh-headline-link { font-size: 10px; line-height: 1.3; }
.home-news-modal .yh-headline-item { padding: 3px 0; }
.home-news-modal .yh-tier-head { font-size: 10px; margin-bottom: 5px; padding-bottom: 3px; }
.home-news-modal .yh-top-stories-grid { gap: 5px; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }

/* Light mode: kill the grey panel-2 hover/nested backgrounds.
   Surfaces stay pure white; hover shows only the accent border. */
:root[data-theme="light"] .panel,
:root[data-theme="light"] .home-news-modal,
:root[data-theme="light"] .market-hero,
:root[data-theme="light"] .home-decision-cockpit,
:root[data-theme="light"] .home-visual-guide,
:root[data-theme="light"] .play-tile,
:root[data-theme="light"] .news-card,
:root[data-theme="light"] .rail-pulse-row,
:root[data-theme="light"] .market-hero-card,
:root[data-theme="light"] .tile {
  background: #ffffff !important;
}
:root[data-theme="light"] .news-card:hover,
:root[data-theme="light"] .market-hero-card:hover,
:root[data-theme="light"] .rail-pulse-row:hover,
:root[data-theme="light"] .play-tile:hover {
  background: #ffffff !important;
  border-color: var(--accent) !important;
}
:root[data-theme="light"] tbody tr:hover {
  background: rgba(var(--accent-rgb), 0.06) !important;
}

/* News modal vertical cap — keeps it in line with neighboring widgets
   on home so the page doesn't have one tall scrolling block. */
.home-news-modal {
  max-height: 380px;
  overflow: hidden;
}
.home-news-modal .yh-news-layout {
  max-height: 340px;
}
.home-news-modal .yh-headlines-list {
  max-height: 320px;
  overflow-y: auto;
  scrollbar-width: thin;
}
.home-news-modal .yh-headlines-list::-webkit-scrollbar { width: 4px; }
.home-news-modal .yh-headlines-list::-webkit-scrollbar-thumb { background: var(--line); border-radius: 2px; }

/* Mark curator-authored badges so users can distinguish editorial
   research notes from feed-sourced market data. */
.u-curated-note {
  font-size: 9px;
  font-weight: 400;
  color: var(--fg-dim);
  letter-spacing: 0.05em;
  margin-left: 4px;
  font-style: italic;
}

/* News modal — drop the company/publisher chip overlays (user said
   "don't need badges on news articles") and use cover-by-width so the
   hero doesn't get awkwardly cropped at a tight height. */
.home-news-modal .news-chip,
.home-news-modal .news-chip-company,
.home-news-modal .news-chip-source,
.home-news-modal .news-hero-shade {
  display: none !important;
}
.home-news-modal .news-card-hero .news-hero,
.home-news-modal .yh-hero .news-hero {
  height: auto !important;
  aspect-ratio: 16 / 9 !important;
  max-height: 130px !important;
}
.home-news-modal .news-hero-img {
  width: 100%;
  height: 100%;
  /* `cover` crops to fill the box (Yahoo-Finance style). `center top`
     keeps faces / headline subjects visible when the natural image is
     taller than the box. */
  object-fit: cover;
  object-position: center top;
}
/* Top stories grid: responsive — `auto-fit` lets cards reflow, no
   max-height clipping (the previous 200px cap chopped the second row
   on narrow viewports). Cards size on minmax(140px, 1fr) so they
   scale from 2-up on mobile to 6-up on large desktop. */
.home-news-modal .yh-top-stories-grid {
  grid-auto-rows: 1fr;
  /* removed `overflow: hidden` + `max-height: 200px` — they were the
     source of the cropping the user reported on narrower viewports. */
}
/* Below 700px viewport, drop to a single column so headline + image
   stay readable instead of being squeezed to 140px wide each. */
@media (max-width: 700px) {
  .home-news-modal .yh-top-stories-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 480px) {
  .home-news-modal .yh-top-stories-grid {
    grid-template-columns: 1fr;
  }
}

/* Force pure-white background on all panels / nested widgets in light
   mode — catches anything still using var(--panel-2) or a hardcoded
   slate background. */
:root[data-theme="light"] .panel,
:root[data-theme="light"] .panel-2,
:root[data-theme="light"] .tile,
:root[data-theme="light"] .opt-table,
:root[data-theme="light"] .home-decision-cockpit,
:root[data-theme="light"] .home-visual-guide,
:root[data-theme="light"] .home-news-modal,
:root[data-theme="light"] .home-news-modal .news-card,
:root[data-theme="light"] .home-news-modal .news-card-hero,
:root[data-theme="light"] .home-news-modal .yh-hero,
:root[data-theme="light"] .market-hero,
:root[data-theme="light"] .market-hero-card,
:root[data-theme="light"] .play-tile,
:root[data-theme="light"] .news-card,
:root[data-theme="light"] .rail-pulse-row,
:root[data-theme="light"] .yt-card,
:root[data-theme="light"] .news-card-hero,
:root[data-theme="light"] .news-card-img,
:root[data-theme="light"] .scn-table,
:root[data-theme="light"] table.opt-table,
:root[data-theme="light"] table tbody,
:root[data-theme="light"] table thead {
  background-color: #ffffff !important;
}
:root[data-theme="light"] .market-hero .market-hero-card .mh-spark { background: transparent !important; }

/* Final light-mode sweep — catches the last hold-outs the playwright
   audit flagged (panel-2 hsl(263, 30%, 98.5%) leaking onto buttons,
   chips, table cells, and inline logos). */
:root[data-theme="light"] .refresh-btn,
:root[data-theme="light"] .run-btn,
:root[data-theme="light"] .style-pill,
:root[data-theme="light"] .play-score,
:root[data-theme="light"] .quote-change,
:root[data-theme="light"] .news-impact-logo,
:root[data-theme="light"] .news-impact-source-logo,
:root[data-theme="light"] .play-underlying-pill,
:root[data-theme="light"] .nav__star,
:root[data-theme="light"] .nav__hint,
:root[data-theme="light"] .tile,
:root[data-theme="light"] .badge,
:root[data-theme="light"] .u-tag,
:root[data-theme="light"] .u-section,
:root[data-theme="light"] thead,
:root[data-theme="light"] tbody,
:root[data-theme="light"] .scn-table th,
:root[data-theme="light"] table th,
:root[data-theme="light"] table td,
:root[data-theme="light"] .home-news-modal *,
:root[data-theme="light"] .home-right-rail *,
:root[data-theme="light"] .market-hero * {
  background-color: #ffffff !important;
}
/* Restore SVG / image-bg utilities back to transparent so the white
   override doesn't paint over icons. */
:root[data-theme="light"] svg,
:root[data-theme="light"] img,
:root[data-theme="light"] .price-chart-svg,
:root[data-theme="light"] .news-hero-img,
:root[data-theme="light"] .rail-pulse-ic-x,
:root[data-theme="light"] .rail-pulse-ic-reddit {
  background-color: transparent !important;
}
:root[data-theme="light"] .rail-pulse-ic-x { background: #000 !important; }
:root[data-theme="light"] .rail-pulse-ic-reddit { background: #ff4500 !important; }
/* Refresh / run / style-pill buttons keep a visible border so they
   still read as buttons against the white surface. */
:root[data-theme="light"] .refresh-btn,
:root[data-theme="light"] .run-btn,
:root[data-theme="light"] .style-pill {
  border: 1px solid var(--line) !important;
}

.rail-pulse-ic-stocktwits {
  background: #008080;
  color: #fff;
  font-weight: 800;
}
:root[data-theme="light"] .rail-pulse-ic-stocktwits { background: #008080 !important; }

/* Light-mode override for elements with hardcoded rgba(slate,X) bg —
   the Decision Cockpit lanes, power-user cards, and similar widgets
   used rgba(2,6,23,...) which paints translucent grey over white. */
:root[data-theme="light"] .home-cockpit-lane,
:root[data-theme="light"] .power-user-card,
:root[data-theme="light"] .home-command-card,
:root[data-theme="light"] .home-guide-node,
:root[data-theme="light"] .home-decision-cockpit .home-cockpit-lane,
:root[data-theme="light"] .home-visual-guide .home-guide-node {
  background-color: #ffffff !important;
  border: 1px solid var(--line) !important;
}
:root[data-theme="light"] .home-cockpit-lane:hover,
:root[data-theme="light"] .power-user-card:hover,
:root[data-theme="light"] .home-command-card:hover,
:root[data-theme="light"] .home-guide-node:hover {
  border-color: var(--accent) !important;
  background-color: #ffffff !important;
}
/* Final headline-image fix — width-based, no fixed height clamp */
.home-news-modal .yh-hero .news-hero,
.home-news-modal .news-card-hero .news-hero {
  height: auto !important;
  max-height: none !important;
  aspect-ratio: 16 / 9 !important;
}
.home-news-modal .yh-hero { max-width: 100%; }
.rail-pulse-ic-bsky { background: #1185fe; color: #fff; }
:root[data-theme="light"] .rail-pulse-ic-bsky { background: #1185fe !important; }

/* More leaky slate backgrounds — light mode override.
   Selectors: .growth-trend-card / .option-trade-step / .model-evidence-row */
:root[data-theme="light"] .growth-trend-card,
:root[data-theme="light"] .option-trade-step,
:root[data-theme="light"] .model-evidence-row,
:root[data-theme="light"] .growth-trend-card:hover,
:root[data-theme="light"] .option-trade-step:hover,
:root[data-theme="light"] .model-evidence-row:hover {
  background-color: #ffffff !important;
  border-color: var(--line) !important;
}

/* News modal hero — image takes ~40% of card width on the left,
   body fills the rest. Was 100% width image swallowing the title. */
.home-news-modal .yh-hero {
  display: grid !important;
  grid-template-columns: 200px minmax(0, 1fr) !important;
  gap: 12px !important;
  flex-direction: row !important;
  align-items: stretch !important;
  min-height: 0 !important;
}
.home-news-modal .yh-hero .news-hero {
  width: 100%;
  height: 100% !important;
  max-height: 140px !important;
  aspect-ratio: auto !important;
  border-radius: 6px;
  overflow: hidden;
}
.home-news-modal .yh-hero .news-hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.home-news-modal .yh-hero .news-card-body {
  padding: 4px 0 !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}
.home-news-modal .yh-hero .news-card-title {
  font-size: 13px !important;
  line-height: 1.35 !important;
  -webkit-line-clamp: 3 !important;
  margin-bottom: 6px;
}
@media (max-width: 720px) {
  .home-news-modal .yh-hero {
    grid-template-columns: 1fr !important;
  }
  .home-news-modal .yh-hero .news-hero { max-height: 100px !important; }
}

/* Trend chart in fundamentals — cap max width so bars don't stretch
   absurdly wide on hi-res screens (user: 'revenue and eps charts are
   way stretched out'). */
.fundamentals-trends svg {
  max-width: 380px;
  width: auto !important;
  display: block;
}
.fundamentals-trends > div {
  max-width: 480px;
}
/* Social fold on ticker detail — keep collapsed open-summary minimal */
.social-fold summary { list-style: none; padding: 8px 12px; }
.social-fold summary::-webkit-details-marker { display: none; }
.social-fold[open] summary::before { content: "▾ "; }
.social-fold:not([open]) > *:not(summary) { display: none; }

/* Light-mode .active first-pill text-white bug — pills used color:#fff
   inherited from .active state but light mode pill bg is white too. */
:root[data-theme="light"] .style-pill.active,
:root[data-theme="light"] .tnav.active,
:root[data-theme="light"] .nav.active {
  color: var(--accent) !important;
  background: rgba(var(--accent-rgb), 0.10) !important;
}

/* Light-mode override for pale category text colors that were
   designed for dark bg. On white #58a6ff / #60a5fa are nearly
   invisible — switch to darker variants. */
:root[data-theme="light"] .home-cockpit-lane.market,
:root[data-theme="light"] .home-cockpit-lane.news,
:root[data-theme="light"] .home-guide-node.market {
  color: hsl(212, 80%, 40%) !important;
}
:root[data-theme="light"] .home-cockpit-lane.picks {
  color: var(--accent) !important;
}
:root[data-theme="light"] .home-cockpit-lane.models {
  color: hsl(142, 50%, 32%) !important;
}
:root[data-theme="light"] .home-cockpit-lane.paper {
  color: hsl(38, 80%, 36%) !important;
}
/* Any other pale-on-white text inside cockpit / guide */
:root[data-theme="light"] .home-cockpit-lane,
:root[data-theme="light"] .home-guide-node,
:root[data-theme="light"] .home-command-card {
  color: var(--fg) !important;
}

/* Term-help tooltips — dotted underline marks labels with a plain-English
   explanation in the native title tooltip. */
.term-help {
  border-bottom: 1px dotted var(--fg-dim);
  cursor: help;
}
th.term-help { border-bottom-style: dotted; }

/* ── Home: Reddit top daily posts ─────────────────────────────────── */
.home-reddit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
}
.reddit-card {
  display: flex;
  flex-direction: column;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  text-decoration: none;
  color: var(--fg);
  transition: border-color .15s ease, transform .15s ease;
}
.reddit-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.reddit-card-media {
  height: 130px;
  background: var(--panel);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.reddit-card-media img { width: 100%; height: 100%; object-fit: cover; }
.reddit-card-media.noimg { font-size: 42px; opacity: .65; }
.reddit-card-body { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 8px; }
.reddit-card-title {
  font-size: 13px;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.reddit-card-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.reddit-chip {
  font-size: 11px;
  color: var(--accent-2);
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  border-radius: 999px;
  padding: 2px 8px;
}
.reddit-stat { font-size: 11px; color: var(--fg-dim); }
.reddit-author { margin-left: auto; }

/* IPO hub tables: cells never wrap into neighboring columns; the
   .tbl-scroll wrapper provides horizontal scroll on narrow viewports. */
.ipo-table th, .ipo-table td { white-space: nowrap; }
.ipo-table td:nth-child(2) { max-width: 300px; overflow: hidden; text-overflow: ellipsis; }

/* Deep-dossier grids: children may shrink below content width so long
   analyst quotes can never push a column over its neighbor. */
.ipo-deep-grid > * { min-width: 0; }

/* Home entry for the AI infrastructure cycle map. */
.home-ai-stack-entry {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  margin: 0 0 12px;
  border-left: 3px solid var(--accent);
  background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.15), transparent 55%), var(--panel);
}
.home-ai-stack-copy {
  min-width: 0;
}
.home-ai-stack-copy h3 {
  margin: 3px 0 5px;
  font-size: 16px;
}
.home-ai-stack-copy p {
  margin: 0;
  color: var(--fg-dim);
  font-size: 12px;
  line-height: 1.45;
}
.home-ai-stack-actions {
  display: flex;
  flex: 0 0 auto;
}
@media (max-width: 720px) {
  .home-ai-stack-entry {
    align-items: stretch;
    flex-direction: column;
  }
  .home-ai-stack-actions .refresh-btn {
    width: 100%;
    text-align: center;
  }
}

/* AI Stack cycle map ------------------------------------------------------- */
.ai-stack-banner { border-left: 3px solid var(--accent); }
.ai-stack-controls {
  display: flex;
  align-items: end;
  gap: 14px;
  flex-wrap: wrap;
  margin: 0 0 12px;
}
.ai-stack-controls .tp-styles { margin: 0; }
.ai-stack-period-wrap {
  display: grid;
  gap: 4px;
  min-width: 160px;
}
.ai-stack-period-wrap select {
  min-height: 32px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--fg);
  padding: 5px 8px;
  font: 12px/1.3 var(--mono);
}
.ai-stack-play { min-height: 32px; }
.ai-stack-overview-actions {
  display: flex;
  justify-content: flex-end;
  margin: -2px 0 12px;
}
.ai-stack-source { margin: -4px 0 10px; }
.ai-stack-playback-status {
  margin: -4px 0 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.ai-stack-next-stage {
  color: var(--accent);
  font-weight: 800;
}
.ai-stack-cycle-read {
  margin: 0 0 12px;
  padding: 12px 14px;
}
.ai-stack-cycle-read h3 {
  margin: 4px 0 8px;
  font-size: 15px;
}
.ai-stack-cycle-read p {
  margin: 6px 0;
  font-size: 12px;
  line-height: 1.48;
}
.ai-stack-cycle-path {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0 6px;
}
.ai-stack-cycle-path span {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-2);
  color: var(--fg);
  padding: 5px 7px;
  font-size: 11px;
}
.ai-stack-shell {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(340px, 0.75fr);
  gap: 12px;
  align-items: start;
}
.ai-stack-left,
.ai-stack-right { min-width: 0; }
.ai-stack-right {
  display: grid;
  gap: 12px;
}
.ai-stack-graph-host {
  min-height: 420px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    linear-gradient(rgba(var(--accent-rgb), 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--accent-rgb), 0.05) 1px, transparent 1px),
    var(--bg);
  background-size: 40px 40px;
  overflow: auto;
}
.ai-stack-graph {
  width: 100%;
  min-height: 420px;
  display: block;
}
.ai-stack-edge {
  fill: none;
  color: var(--accent);
  stroke: currentColor;
  stroke-linecap: round;
  opacity: 0.58;
  marker-end: url(#aiStackArrow);
}
.ai-stack-edge.is-hot {
  opacity: 0.95;
  stroke: var(--ok);
  stroke-dasharray: 10 8;
  animation: ai-stack-flow 1.1s linear infinite;
}
.ai-stack-edge.selected {
  opacity: 1;
  stroke: hsl(198, 75%, 58%);
  stroke-width: 5;
}
.ai-stack-edge.is-muted { opacity: 0.12; }
.ai-stack-edge-label {
  text-anchor: middle;
  fill: var(--fg-dim);
  font: 10px/1 var(--mono);
  pointer-events: none;
}
.ai-stack-node {
  cursor: pointer;
  outline: none;
}
.ai-stack-node circle {
  fill: var(--panel);
  stroke: var(--line);
  stroke-width: 2;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.24));
}
.ai-stack-node circle.bottleneck { stroke: var(--accent); }
.ai-stack-node circle.memory { stroke: var(--warn); }
.ai-stack-node circle.networking { stroke: hsl(198, 75%, 58%); }
.ai-stack-node circle.power { stroke: var(--ok); }
.ai-stack-node circle.future { stroke: hsl(285, 74%, 64%); }
.ai-stack-node.selected circle {
  stroke-width: 4;
  fill: rgba(var(--accent-rgb), 0.18);
}
.ai-stack-node.is-muted { opacity: 0.24; }
.ai-stack-node-title,
.ai-stack-node-sub {
  text-anchor: middle;
  pointer-events: none;
  paint-order: stroke;
  stroke: var(--bg);
  stroke-width: 4px;
  stroke-linejoin: round;
}
.ai-stack-node-title {
  fill: var(--fg);
  font: 700 12px/1 var(--mono);
}
.ai-stack-node-sub {
  fill: var(--fg-dim);
  font: 700 10px/1 var(--mono);
}
.ai-stack-node-sub.pos { fill: var(--ok); }
.ai-stack-node-sub.neg { fill: var(--bad); }
@keyframes ai-stack-flow {
  to { stroke-dashoffset: -36; }
}
.ai-stack-cycle-timeline {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}
.ai-stack-cycle-step {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-2);
  color: var(--fg);
  padding: 8px;
  cursor: pointer;
}
.ai-stack-cycle-step.active {
  border-color: var(--accent);
  background: rgba(var(--accent-rgb), 0.14);
}
.ai-stack-cycle-num {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--fg-dim);
  font-weight: 800;
}
.ai-stack-cycle-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.ai-stack-cycle-copy strong { font-size: 11px; }
.ai-stack-cycle-copy small {
  color: var(--fg-dim);
  font-size: 10px;
  line-height: 1.35;
}
.ai-stack-detail-host,
.ai-stack-performance {
  padding: 0;
  overflow: hidden;
}
.ai-stack-detail-card {
  border-bottom: 1px solid var(--line);
  padding: 12px 14px;
}
.ai-stack-detail-card:last-child { border-bottom: 0; }
.ai-stack-detail-card h3 {
  margin: 4px 0 8px;
  font-size: 15px;
}
.ai-stack-detail-card p {
  margin: 6px 0;
  color: var(--fg);
  font-size: 12px;
  line-height: 1.48;
}
.ai-stack-ticker-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.ai-stack-concept {
  padding: 10px 0;
  border-top: 1px solid var(--line);
}
.ai-stack-concept:first-of-type { border-top: 0; }
.ai-stack-concept h4 {
  margin: 0 0 4px;
  color: var(--accent);
  font-size: 12px;
}
.ai-stack-company-card {
  display: grid;
  width: 100%;
  gap: 4px;
  margin: 8px 0 0;
  text-align: left;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--fg);
  padding: 9px;
  cursor: pointer;
}
.ai-stack-company-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
}
.ai-stack-company-role,
.ai-stack-company-risk {
  color: var(--fg-dim);
  font-size: 11px;
  line-height: 1.4;
}
.ai-stack-performance h3 {
  margin: 0;
  padding: 12px 14px 8px;
  font-size: 13px;
}
.ai-stack-performance .tbl-scroll {
  border-top: 1px solid var(--line);
  max-height: 520px;
}
.ai-stack-performance-table td:nth-child(2) {
  max-width: 360px;
  white-space: normal;
  line-height: 1.35;
}
.ai-stack-detail-lab {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.65fr);
  gap: 12px;
  align-items: start;
}
.ai-stack-detail-primary,
.ai-stack-detail-secondary,
.ai-stack-detail-tab-content {
  min-width: 0;
  display: grid;
  gap: 12px;
}
.ai-stack-detail-toolbar {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 12px;
}
.ai-stack-detail-tabs { margin: 0; }
.ai-stack-scenario {
  margin: 0 0 12px;
  padding: 12px 14px;
}
.ai-stack-scenario h3,
.ai-stack-edge-inspector h3,
.ai-stack-detail-narrative h3,
.ai-stack-stock-card h3,
.ai-stack-evidence-card h3 {
  margin: 4px 0 8px;
  font-size: 14px;
}
.ai-stack-scenario p,
.ai-stack-edge-inspector p,
.ai-stack-detail-narrative p,
.ai-stack-stock-card p,
.ai-stack-evidence-card p {
  margin: 6px 0;
  font-size: 12px;
  line-height: 1.45;
}
.ai-stack-scenario-slider {
  display: grid;
  grid-template-columns: auto minmax(160px, 1fr) auto;
  gap: 10px;
  align-items: center;
  margin: 10px 0;
  color: var(--fg-dim);
  font-size: 11px;
}
.ai-stack-scenario-slider input {
  width: 100%;
  accent-color: var(--accent);
}
.ai-stack-cycle-tape {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 12px;
}
.ai-stack-tape-step {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  min-height: 74px;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-2);
  color: var(--fg);
  padding: 8px;
  cursor: pointer;
}
.ai-stack-tape-step.active {
  border-color: var(--accent);
  background: rgba(var(--accent-rgb), 0.14);
}
.ai-stack-tape-index {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--fg-dim);
  font-weight: 800;
}
.ai-stack-tape-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}
.ai-stack-tape-copy strong { font-size: 11px; }
.ai-stack-tape-copy small {
  color: var(--fg-dim);
  font-size: 10px;
  line-height: 1.35;
}
.ai-stack-edge-inspector,
.ai-stack-detail-narrative {
  padding: 12px 14px;
}
.ai-stack-edge-signals {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 10px 0;
}
.ai-stack-edge-signals > div {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-2);
  padding: 8px;
}
.ai-stack-edge-signals strong {
  color: var(--accent);
  font-size: 11px;
}
.ai-stack-stock-grid,
.ai-stack-evidence-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.ai-stack-stock-card,
.ai-stack-evidence-card {
  display: grid;
  gap: 4px;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--fg);
  padding: 12px;
  cursor: pointer;
}
.ai-stack-stock-card.active,
.ai-stack-evidence-card.active {
  border-color: var(--accent);
  background: rgba(var(--accent-rgb), 0.12);
}
.ai-stack-deep-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.65fr);
  gap: 12px;
  align-items: start;
  margin-top: 12px;
}
.ai-stack-exposure-matrix {
  grid-row: span 2;
  overflow: hidden;
}
.ai-stack-scorecard,
.ai-stack-primer-card,
.ai-stack-exposure-matrix,
.ai-stack-source-ledger,
.ai-stack-playbook {
  padding: 12px 14px;
}
.ai-stack-scorecard h3,
.ai-stack-primer-card h3,
.ai-stack-exposure-matrix h3,
.ai-stack-source-ledger h3,
.ai-stack-playbook h3 {
  margin: 4px 0 8px;
  font-size: 14px;
}
.ai-stack-score-row {
  display: grid;
  width: 100%;
  gap: 6px;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-2);
  color: var(--fg);
  padding: 9px;
  margin-top: 8px;
  cursor: pointer;
}
.ai-stack-score-row.active {
  border-color: var(--accent);
  background: rgba(var(--accent-rgb), 0.12);
}
.ai-stack-score-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: baseline;
}
.ai-stack-score-head strong {
  font-size: 12px;
}
.ai-stack-score-head em {
  color: var(--fg-dim);
  font-style: normal;
  font-size: 10px;
}
.ai-stack-metric-bar {
  display: block;
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--panel);
}
.ai-stack-metric-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), hsl(198, 75%, 58%));
}
.ai-stack-primer-line {
  display: grid;
  gap: 4px;
  padding: 8px 0;
  border-top: 1px solid var(--line);
}
.ai-stack-primer-line strong {
  color: var(--accent);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.ai-stack-primer-line span {
  color: var(--fg);
  font-size: 12px;
  line-height: 1.45;
}
.ai-stack-exposure-matrix .tbl-scroll {
  margin: 8px -14px -12px;
  max-height: 680px;
  border-top: 1px solid var(--line);
}
.ai-stack-exposure-matrix table {
  table-layout: fixed;
  width: 100%;
  min-width: 0;
}
.ai-stack-exposure-matrix th,
.ai-stack-exposure-matrix td {
  overflow-wrap: anywhere;
}
.ai-stack-exposure-matrix th:nth-child(1),
.ai-stack-exposure-matrix td:nth-child(1) { width: 64px; }
.ai-stack-exposure-matrix th:nth-child(2),
.ai-stack-exposure-matrix td:nth-child(2) { width: 110px; }
.ai-stack-exposure-matrix th:nth-child(6),
.ai-stack-exposure-matrix td:nth-child(6) { width: 62px; }
.ai-stack-exposure-matrix td {
  vertical-align: top;
  white-space: normal;
  line-height: 1.35;
}
.ai-stack-playbook {
  display: grid;
  gap: 8px;
}
.ai-stack-playbook-step {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-2);
  padding: 10px;
}
.ai-stack-playbook-step h4 {
  margin: 0 0 6px;
  font-size: 12px;
  color: var(--fg);
}
.ai-stack-playbook-step p {
  margin: 5px 0;
  font-size: 12px;
  line-height: 1.45;
}
.ai-stack-source-item {
  padding: 8px 0;
  border-top: 1px solid var(--line);
}
.ai-stack-source-item a {
  color: var(--accent);
  font-weight: 700;
  font-size: 12px;
}
.ai-stack-source-item p {
  margin: 4px 0 0;
}
@media (max-width: 1200px) {
  .ai-stack-shell { grid-template-columns: 1fr; }
  .ai-stack-detail-lab { grid-template-columns: 1fr; }
  .ai-stack-deep-grid { grid-template-columns: 1fr; }
  .ai-stack-stock-grid,
  .ai-stack-evidence-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .ai-stack-controls { align-items: stretch; }
  .ai-stack-controls .tp-styles,
  .ai-stack-period-wrap,
  .ai-stack-play { width: 100%; }
  .ai-stack-overview-actions { justify-content: stretch; }
  .ai-stack-overview-actions .refresh-btn { width: 100%; }
  .ai-stack-detail-toolbar { align-items: stretch; }
  .ai-stack-detail-tabs,
  .ai-stack-detail-toolbar .ai-stack-period-wrap { width: 100%; }
  .ai-stack-cycle-tape,
  .ai-stack-stock-grid,
  .ai-stack-evidence-grid,
  .ai-stack-edge-signals { grid-template-columns: 1fr; }
  .ai-stack-scenario-slider { grid-template-columns: 1fr; }
  .ai-stack-cycle-timeline { grid-template-columns: 1fr; }
  .ai-stack-graph-host,
  .ai-stack-graph { min-height: 360px; }
  .ai-stack-graph { min-width: 760px; }
}
@media (prefers-reduced-motion: reduce) {
  .ai-stack-edge.is-hot { animation: none; }
}

#main .research-winner-metric.quote-change {
  display: block;
  flex: 0 0 92px !important;
  min-width: 92px;
  max-width: 92px;
  white-space: nowrap !important;
  overflow-wrap: normal;
  text-align: right;
}

.ticker-underwrite-panel {
  overflow: hidden;
}
.ticker-underwrite-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.ticker-underwrite-archetype,
.ticker-underwrite-label,
.ticker-underwrite-metric-label {
  color: var(--fg-dim);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.ticker-underwrite-posture {
  margin-top: 4px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
}
.ticker-underwrite-thesis {
  max-width: 92ch;
  margin: 12px 0;
  color: var(--fg);
  font-size: 13px;
  line-height: 1.55;
}
.ticker-underwrite-capital {
  display: grid;
  gap: 5px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 10px 0;
}
.ticker-underwrite-capital-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.ticker-underwrite-capital-head strong {
  font-size: 12px;
  text-align: right;
}
.ticker-underwrite-capital-detail {
  font-size: 12px;
  line-height: 1.4;
}
.ticker-underwrite-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-bottom: 1px solid var(--line);
}
.ticker-underwrite-metric {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 11px 12px 12px 0;
}
.ticker-underwrite-metric + .ticker-underwrite-metric {
  border-left: 1px solid var(--line);
  padding-left: 12px;
}
.ticker-underwrite-metric strong {
  font-family: var(--mono);
  font-size: 15px;
  line-height: 1.15;
}
.ticker-underwrite-metric span {
  color: var(--fg-dim);
  font-size: 10px;
  line-height: 1.35;
}
.ticker-underwrite-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 24px;
  margin-top: 2px;
}
.ticker-underwrite-section {
  min-width: 0;
  border-bottom: 1px solid var(--line);
  padding: 12px 0;
}
.ticker-underwrite-list {
  display: grid;
  gap: 6px;
  margin: 8px 0 0;
  padding: 0 0 0 16px;
}
.ticker-underwrite-list li {
  color: var(--fg);
  font-size: 12px;
  line-height: 1.45;
}
.ticker-underwrite-sources {
  display: grid;
  gap: 6px;
  padding-top: 12px;
}
.ticker-underwrite-source {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
  text-decoration: none;
}
.ticker-underwrite-source:hover { text-decoration: underline; }
.ticker-underwrite-source span {
  flex: 0 0 auto;
  color: var(--fg-dim);
  font-size: 10px;
  font-weight: 500;
  text-align: right;
}
.ticker-underwrite-note {
  margin-top: 10px;
  color: var(--fg-dim);
  font-size: 10px;
  font-style: italic;
  line-height: 1.4;
}
.ticker-detail-analysis-panel { overflow: hidden; }
.ticker-detail-analysis-section {
  border-top: 1px solid var(--line);
  padding: 16px 0;
}
.ticker-detail-analysis-section:first-child {
  border-top: 0;
  padding-top: 2px;
}
.ticker-detail-analysis-section:last-child { padding-bottom: 2px; }
.ticker-detail-analysis-heading {
  margin: 0 0 10px;
  color: var(--fg);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.25;
}
.ticker-detail-analysis-label {
  color: var(--fg-dim);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.ticker-detail-analysis-note {
  margin: 0 0 10px;
  color: var(--fg-dim);
  font-size: 12px;
  line-height: 1.5;
}
.ticker-detail-analysis-rows { display: grid; }
.ticker-detail-analysis-row {
  align-items: flex-start;
  min-width: 0;
}
.ticker-detail-analysis-row > :first-child {
  flex: 0 1 34%;
  min-width: 0;
}
.ticker-detail-analysis-row > :last-child {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 68%;
  overflow-wrap: anywhere;
  text-align: right;
  white-space: normal !important;
}
.ticker-detail-analysis-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 24px;
  margin-top: 10px;
}
.ticker-detail-analysis-list-block {
  min-width: 0;
  border-top: 1px solid var(--line);
  padding: 10px 0;
}
.ticker-detail-analysis-list {
  display: grid;
  gap: 6px;
  margin: 8px 0 0;
  padding-left: 17px;
}
.ticker-detail-analysis-list li {
  color: var(--fg);
  font-size: 12px;
  line-height: 1.45;
}
.ticker-detail-analysis-table-scroll {
  max-height: 420px;
  margin: 10px 0 14px;
  border: 1px solid var(--line);
  border-radius: 6px;
}
.ticker-detail-analysis-table th { background: var(--panel-2); }
.ticker-detail-analysis-table td { font-family: var(--mono); font-size: 11px; }
.ticker-detail-analysis-stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border: 1px solid var(--line);
  border-radius: 6px;
  margin: 10px 0 14px;
}
.ticker-detail-analysis-stat {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 10px 12px;
}
.ticker-detail-analysis-stat + .ticker-detail-analysis-stat {
  border-left: 1px solid var(--line);
}
.ticker-detail-analysis-stat strong {
  color: var(--fg);
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.ticker-detail-frontier {
  border-top: 1px solid var(--line);
  margin-top: 12px;
  padding-top: 12px;
}
.ticker-detail-frontier-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.ticker-detail-frontier-chart {
  display: block;
  width: 100%;
  max-width: 560px;
  height: auto;
  margin-top: 8px;
}
.ticker-detail-frontier-axis { stroke: var(--line); stroke-width: 1; }
.ticker-detail-frontier-line {
  stroke: var(--accent);
  stroke-width: 2.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ticker-detail-frontier-minimum {
  fill: var(--ok);
  stroke: var(--panel);
  stroke-width: 2;
}
.ticker-detail-frontier-label {
  fill: var(--fg-dim);
  font-family: var(--mono);
  font-size: 10px;
}
.ticker-detail-frontier-summary {
  color: var(--fg-dim);
  font-size: 11px;
  line-height: 1.45;
}
.ticker-detail-model-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}
.ticker-detail-model {
  display: grid;
  gap: 5px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 11px 12px;
}
.ticker-detail-model strong {
  font-family: var(--mono);
  font-size: 13px;
}
.ticker-detail-model-copy {
  color: var(--fg);
  font-size: 12px;
  line-height: 1.45;
}
.ticker-detail-model-status {
  color: var(--fg-dim);
  font-size: 10px;
  line-height: 1.4;
}
@media (max-width: 720px) {
  .ticker-underwrite-head,
  .ticker-underwrite-capital-head {
    align-items: flex-start;
    flex-direction: column;
  }
  .ticker-underwrite-capital-head strong { text-align: left; }
  .ticker-underwrite-metrics,
  .ticker-underwrite-grid,
  .ticker-detail-analysis-grid,
  .ticker-detail-model-grid { grid-template-columns: 1fr; }
  .ticker-underwrite-metric + .ticker-underwrite-metric {
    border-top: 1px solid var(--line);
    border-left: 0;
    padding-left: 0;
  }
  .ticker-detail-analysis-stats { grid-template-columns: 1fr; }
  .ticker-detail-analysis-row { flex-direction: column; }
  .ticker-detail-analysis-row > :first-child { flex-basis: auto; }
  .ticker-detail-analysis-row > :last-child {
    max-width: 100%;
    text-align: left;
  }
  .ticker-detail-analysis-stat + .ticker-detail-analysis-stat {
    border-top: 1px solid var(--line);
    border-left: 0;
  }
  .ticker-detail-frontier-head { align-items: flex-start; flex-direction: column; }
  .ticker-underwrite-source { align-items: flex-start; }
}

/* ======================================================================
   2026 workspace refresh
   A task-focused shell and bounded home workspace. These final overrides
   intentionally sit after legacy route styles so every specialist surface
   benefits from the same readable type, spacing, and interaction states.
   ====================================================================== */
:root {
  --bg: #080b11;
  --panel: #10151e;
  --panel-2: #171d28;
  --panel-3: #1d2431;
  --line: #252d3b;
  --line-strong: #354052;
  --fg: #f4f6fb;
  --fg-dim: #919bac;
  --fg-soft: #c2c9d5;
  --accent: #8b5cf6;
  --accent-2: #4dd7e8;
  --accent-rgb: 139 92 246;
  --ring: #a78bfa;
  --ok: #35d59a;
  --warn: #f0b85b;
  --bad: #f06a7b;
  --sans: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --radius: 12px;
  --shadow-panel: 0 18px 50px rgba(0, 0, 0, 0.18);
}

:root[data-theme="light"] {
  --bg: #f4f6fa;
  --panel: #ffffff;
  --panel-2: #f0f2f7;
  --panel-3: #e8ebf2;
  --line: #dce1ea;
  --line-strong: #c5ccd8;
  --fg: #151923;
  --fg-dim: #667085;
  --fg-soft: #3d4655;
  --accent: #6d47d9;
  --accent-2: #087d91;
  --accent-rgb: 109 71 217;
  --ring: #6d47d9;
  --ok: #11865e;
  --warn: #a9680f;
  --bad: #c63e53;
  --shadow-panel: 0 16px 38px rgba(30, 40, 60, 0.08);
}

html,
body {
  min-height: 100%;
  overflow-x: hidden;
  background: var(--bg);
  color: var(--fg);
  font: 14px/1.5 var(--sans);
}

button,
input,
select,
textarea { font-family: inherit; }

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 3px;
}

.skip-link {
  position: fixed;
  z-index: 1000;
  top: 12px;
  left: 12px;
  transform: translateY(-160%);
  padding: 9px 13px;
  border-radius: 8px;
  background: var(--fg);
  color: var(--bg);
  font-weight: 700;
  text-decoration: none;
}
.skip-link:focus { transform: translateY(0); }

#topbar {
  min-height: 64px;
  padding: 10px 18px;
  gap: 14px;
  background: color-mix(in srgb, var(--panel) 94%, transparent);
  border-bottom-color: var(--line);
  backdrop-filter: blur(18px);
}
.brand {
  color: var(--fg);
  font-family: "DM Serif Display", "Iowan Old Style", Georgia, serif;
  font-size: 21px;
  font-weight: 400;
  letter-spacing: -0.02em;
  text-decoration: none;
}
.brand .brand-fx {
  color: var(--accent);
  font-style: normal;
}
.ticker-search {
  flex: 1 1 360px;
  max-width: 480px;
  min-width: 240px;
  margin-left: clamp(16px, 7vw, 110px);
  min-height: 40px;
  padding: 4px 5px 4px 12px;
  border-color: var(--line);
  border-radius: 10px;
  background: var(--bg);
}
.ticker-search:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.16);
}
.ticker-search__ic { width: 16px; height: 16px; }
.ticker-search__input {
  font: 13px/1.3 var(--sans);
  text-transform: none;
}
.ticker-search__go,
.refresh-btn {
  min-height: 30px;
  border-color: var(--line);
  border-radius: 8px;
  background: var(--panel-2);
  color: var(--fg-soft);
  font: 600 12px/1 var(--sans);
  letter-spacing: 0;
}
.ticker-search__go { padding: 7px 11px; }
.ticker-search__go:hover,
.refresh-btn:hover {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, var(--panel-2));
  color: var(--fg);
}
.badges { align-items: center; gap: 7px; }
.badge {
  display: inline-flex;
  align-items: center;
  min-height: 27px;
  padding: 5px 8px;
  border-color: var(--line);
  border-radius: 999px;
  background: var(--panel-2);
  color: var(--fg-dim);
  font: 700 9px/1 var(--mono);
  letter-spacing: 0.06em;
}
.badge.mode-PAPER {
  border-color: color-mix(in srgb, var(--warn) 35%, var(--line));
  background: color-mix(in srgb, var(--warn) 12%, var(--panel));
  color: var(--warn);
}
.badge-blocked,
.badge-alert {
  border-color: color-mix(in srgb, var(--bad) 35%, var(--line));
  background: color-mix(in srgb, var(--bad) 11%, var(--panel));
  color: var(--bad);
}
#market-status-badge[data-market="open"] {
  border-color: color-mix(in srgb, var(--ok) 35%, var(--line));
  background: color-mix(in srgb, var(--ok) 10%, var(--panel));
  color: var(--ok);
}
#market-status-badge[data-market="extended-hours"] {
  border-color: color-mix(in srgb, var(--warn) 35%, var(--line));
  color: var(--warn);
}
.meta {
  align-items: center;
  gap: 8px;
  color: var(--fg-dim);
  font: 11px/1 var(--mono);
}
#session-date { white-space: nowrap; }
.topbar-secondary { display: none; }

#ticker-tape {
  top: 64px;
  height: 34px;
  background: var(--bg);
  border-bottom-color: var(--line);
}
.tape-item {
  min-height: 34px;
  padding: 0 16px;
  border-right-color: var(--line);
  font-size: 10px;
}
.tape-item-sym.tape-crypto { color: var(--accent-2); }

.data-quality-strip {
  position: sticky;
  z-index: 4;
  top: 98px;
  display: flex;
  align-items: center;
  min-height: 32px;
  gap: 9px;
  padding: 6px 18px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel) 96%, transparent);
  color: var(--fg-dim);
  font: 600 11px/1.35 var(--sans);
}
.data-quality-strip__dot {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 50%;
  background: var(--warn);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--warn) 12%, transparent);
}
.data-quality-strip[data-tone="ready"] .data-quality-strip__dot { background: var(--ok); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ok) 12%, transparent); }
.data-quality-strip[data-tone="unavailable"] .data-quality-strip__dot { background: var(--bad); box-shadow: 0 0 0 4px color-mix(in srgb, var(--bad) 12%, transparent); }

#layout { height: calc(100vh - 64px - 34px - 32px - 30px); }
#rail {
  width: 122px;
  flex-basis: 122px;
  background: var(--panel);
  border-right-color: var(--line);
  font-family: var(--sans);
}
#rail::after { display: none; }
.rail-filter { display: none; }
.rail-filter input {
  min-height: 36px;
  padding: 8px 32px 8px 31px;
  border-color: var(--line);
  border-radius: 9px;
  background: var(--bg);
  color: var(--fg);
  font: 12px/1.2 var(--sans);
}
.rail-filter__ic { left: 24px; width: 14px; height: 14px; }
.rail-filter__kbd { right: 23px; }
.rail-scroll { padding: 14px 7px 18px; }
.rail-primary,
.rail-secondary { display: grid; gap: 3px; }
.rail-secondary {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.rail-kicker {
  padding: 0 7px 7px;
  color: var(--fg-dim);
  font: 700 9px/1 var(--mono);
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.nav {
  min-height: 37px;
  gap: 10px;
  padding: 8px 8px;
  border: 1px solid transparent;
  border-radius: 9px;
  color: var(--fg-dim);
  font: 550 11px/1.2 var(--sans);
}
.nav::before,
.nav.active::after { display: none; }
.nav:hover {
  border-color: var(--line);
  background: var(--panel-2);
  color: var(--fg);
}
.nav.active {
  border-color: color-mix(in srgb, var(--accent) 34%, var(--line));
  background: color-mix(in srgb, var(--accent) 13%, var(--panel));
  color: var(--fg);
  font-weight: 650;
}
.nav.active .nav__ic { color: var(--accent-2); transform: none; }
.nav__ic { width: 16px; height: 16px; flex-basis: 16px; color: var(--fg-dim); }
#rail:has(.rail-more[open]) {
  width: 236px;
  flex-basis: 236px;
}
#rail:has(.rail-more[open]) .rail-filter {
  display: block;
  padding: 4px 6px 10px;
}
.rail-more {
  margin-top: 15px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
.rail-more > summary { list-style: none; }
.rail-more > summary::-webkit-details-marker { display: none; }
.rail-more__summary {
  min-height: 38px;
  padding: 8px 9px;
  border-radius: 9px;
  color: var(--fg-dim);
  font: 650 12px/1 var(--sans);
  letter-spacing: 0;
  text-transform: none;
}
.rail-more__summary:hover { background: var(--panel-2); }
.rail-more[open] .rail-more__summary .nav-section__ic { transform: rotate(90deg); color: var(--accent); }
.rail-more__body {
  margin-top: 6px;
  padding: 4px 0 10px 4px;
  border-left: 1px solid var(--line);
}
.rail-more__body .nav-section__head {
  padding: 8px 8px 8px 11px;
  color: var(--fg-dim);
  font: 650 9px/1 var(--mono);
  letter-spacing: 0.1em;
}
.rail-more__body .nav { padding-left: 21px; font-size: 12px; }
.nav-section.has-active::before { display: none; }
.rail-foot {
  min-height: 46px;
  border-top-color: var(--line);
  background: var(--panel);
  color: var(--fg-dim);
}

#main {
  padding: 18px 18px 32px;
  background: var(--bg);
  scroll-behavior: smooth;
}
#main:focus { outline: none; }
#main h1,
#main h2,
#main h3 { font-family: var(--sans); }
.panel,
.view-context,
.signal-detail,
.bt-form {
  border-color: var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: none;
}
.panel { padding: 16px 18px; }
.panel h3 { font-size: 14px; }
.view-context {
  margin-bottom: 18px;
  padding: 12px 15px;
  border-left: 1px solid var(--line);
}
.view-context__title { font-size: 16px; }
.view-context__note { font-size: 12px; }
table { font-family: var(--mono); font-size: 11px; }
th { background: var(--panel); }

#statusbar {
  height: 30px;
  min-height: 30px;
  border-top-color: var(--line);
  background: var(--panel);
  color: var(--fg-dim);
  font: 10px/1 var(--mono);
}

.workspace-route { min-height: 100%; }
.workspace-home {
  display: grid;
  width: min(100%, 1320px);
  margin: 0 auto;
  gap: 12px;
}
.workspace-intro {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.workspace-intro__copy { max-width: 830px; }
.workspace-eyebrow {
  color: var(--accent-2);
  font: 700 10px/1.2 var(--mono);
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.workspace-intro h1 {
  max-width: 760px;
  margin: 8px 0 8px;
  color: var(--fg);
  font-size: clamp(25px, 3vw, 38px);
  font-weight: 650;
  letter-spacing: -0.045em;
  line-height: 1.08;
}
.workspace-intro p {
  max-width: 760px;
  margin: 0;
  color: var(--fg-dim);
  font-size: 14px;
  line-height: 1.6;
}
.workspace-intro__status { display: flex; align-items: center; gap: 7px; padding-bottom: 4px; }
.workspace-status {
  display: inline-flex;
  align-items: center;
  min-height: 25px;
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel-2);
  color: var(--fg-dim);
  font: 700 9px/1 var(--mono);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}
.workspace-status--paper { border-color: color-mix(in srgb, var(--warn) 38%, var(--line)); color: var(--warn); }
.workspace-status--blocked { border-color: color-mix(in srgb, var(--bad) 38%, var(--line)); color: var(--bad); }
.workspace-status[data-tone="ready"] { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 38%, var(--line)); }
.workspace-status[data-tone="partial"] { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 38%, var(--line)); }
.workspace-status[data-tone="unavailable"] { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 38%, var(--line)); }
.workspace-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 10px;
  align-items: stretch;
}
.workspace-right-stack {
  display: grid;
  grid-template-rows: auto auto;
  align-content: start;
  gap: 10px;
  min-width: 0;
}
.workspace-lower-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.75fr);
  gap: 10px;
}
.workspace-insight-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: 10px;
  align-items: start;
}
.workspace-panel__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}
.workspace-panel {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: none;
}
.workspace-panel__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 14px 11px;
  border-bottom: 1px solid var(--line);
}
.workspace-panel__head h2 {
  margin: 5px 0 0;
  color: var(--fg);
  font-size: 17px;
  font-weight: 650;
  letter-spacing: -0.025em;
}
.workspace-panel__body { min-height: 100px; padding: 14px; }
.workspace-panel__note {
  margin: 13px 0 0;
  color: var(--fg-dim);
  font-size: 11px;
  line-height: 1.5;
}
.workspace-regime { min-height: 0; }
.workspace-regime__summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--line);
}
.workspace-metric { display: grid; gap: 3px; padding: 11px 12px; background: var(--panel-2); }
.workspace-metric strong { color: var(--fg); font: 700 16px/1.1 var(--mono); }
.workspace-metric span { color: var(--fg-dim); font-size: 10px; }
.workspace-metric[data-tone="positive"] strong { color: var(--ok); }
.workspace-metric[data-tone="negative"] strong { color: var(--bad); }
.workspace-metric[data-tone="accent"] strong { color: var(--accent-2); }
.workspace-regime__chart { height: 225px; margin-top: 10px; }
.workspace-regime__readouts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin-top: 14px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--line);
}
.workspace-regime__readout {
  display: grid;
  align-content: start;
  gap: 5px;
  min-width: 0;
  padding: 11px 12px;
  background: var(--panel-2);
}
.workspace-regime__readout span { color: var(--fg-dim); font-size: 9px; text-transform: uppercase; letter-spacing: 0.06em; }
.workspace-regime__readout strong { color: var(--fg); font: 700 12px/1.2 var(--mono); text-transform: capitalize; }
.workspace-regime__readout small { color: var(--fg-dim); font-size: 9px; line-height: 1.4; }
.workspace-regime__drivers {
  display: grid;
  gap: 8px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.workspace-regime__drivers > div { display: grid; gap: 5px; }
.workspace-regime__driver {
  display: grid;
  grid-template-columns: 7px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  color: var(--fg-dim);
  font-size: 9px;
  line-height: 1.4;
}
.workspace-regime__driver-dot {
  width: 5px;
  height: 5px;
  margin-top: 4px;
  border-radius: 50%;
  background: var(--accent-2);
}
.workspace-opportunity {
  position: relative;
  border-color: color-mix(in srgb, var(--accent) 38%, var(--line));
}
.workspace-opportunity::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--accent);
}
.workspace-opportunity__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}
.workspace-opportunity__symbol { font: 700 27px/1 var(--mono); letter-spacing: -0.04em; }
.workspace-opportunity__setup { margin-top: 6px; color: var(--fg-dim); font-size: 12px; }
.workspace-score {
  min-width: 50px;
  padding: 8px;
  border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--line));
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 10%, var(--panel));
  color: var(--accent-2);
  font: 700 14px/1 var(--mono);
  text-align: center;
}
.workspace-opportunity__thesis {
  margin: 12px 0;
  color: var(--fg-soft);
  font-size: 14px;
  line-height: 1.6;
}
.workspace-opportunity__evidence { display: grid; gap: 0; border-top: 1px solid var(--line); }
.workspace-opportunity__fact {
  display: grid;
  grid-template-columns: minmax(100px, 0.45fr) minmax(0, 1fr);
  gap: 14px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.workspace-opportunity__fact span { color: var(--fg-dim); font-size: 11px; }
.workspace-opportunity__fact strong { color: var(--fg-soft); font-size: 11px; font-weight: 600; line-height: 1.45; }
.workspace-risk-boundary {
  display: flex;
  gap: 10px;
  margin: 10px 0;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--warn) 28%, var(--line));
  border-radius: 10px;
  background: color-mix(in srgb, var(--warn) 7%, var(--panel));
}
.workspace-risk-boundary p { margin: 5px 0 0; color: var(--fg-soft); font-size: 11px; line-height: 1.5; }
.workspace-icon { width: 17px; height: 17px; flex: 0 0 17px; color: var(--accent-2); }
.workspace-primary-action,
.workspace-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  border-radius: 9px;
  color: var(--accent-2);
  font-size: 12px;
  font-weight: 650;
  text-decoration: none;
}
.workspace-primary-action {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #fff;
}
.workspace-primary-action:hover { background: color-mix(in srgb, var(--accent) 86%, #fff); }
.workspace-link:hover { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; }
.workspace-link--quiet { min-height: auto; color: var(--fg-dim); font-size: 11px; }
.workspace-journey .workspace-panel__head { display: none; }
.workspace-journey .workspace-panel__body {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(132px, 1fr);
  min-height: 0;
  padding: 0;
}
.workspace-journey__steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.workspace-journey__card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 13px;
  min-height: 122px;
  padding: 12px;
  border-right: 1px solid var(--line);
}
.workspace-journey__card:last-child { border-right: 0; }
.workspace-journey__number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 29px;
  height: 29px;
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  color: var(--fg-dim);
  font: 700 10px/1 var(--mono);
}
.workspace-journey__card[data-state="ready"] .workspace-journey__number { border-color: color-mix(in srgb, var(--ok) 45%, var(--line)); color: var(--ok); }
.workspace-journey__card[data-state="guarded"] .workspace-journey__number { border-color: color-mix(in srgb, var(--warn) 45%, var(--line)); color: var(--warn); }
.workspace-journey__card h3 { margin: 2px 0 5px; font-size: 12px; }
.workspace-journey__card p { min-height: 36px; margin: 0 0 7px; color: var(--fg-dim); font-size: 10px; line-height: 1.4; }
.workspace-journey__meta { display: block; min-height: 0; color: var(--fg-soft); font: 8.5px/1.35 var(--mono); }
.workspace-journey__card .workspace-link { display: none; }
.workspace-next-action {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  min-width: 0;
  padding: 12px;
  border-top: 0;
  border-left: 1px solid var(--line);
  background: color-mix(in srgb, var(--accent) 7%, var(--panel));
}
.workspace-next-action__copy { flex: 1; min-width: 0; }
.workspace-next-action > .workspace-icon { display: none; }
.workspace-next-action strong { display: block; margin-top: 5px; font-size: 11px; line-height: 1.35; }
.workspace-next-action p { margin: 4px 0 0; color: var(--fg-dim); font-size: 9px; line-height: 1.4; }
.workspace-next-action .workspace-link { min-height: auto; margin-top: 6px; font-size: 9px; }
.workspace-evidence__list,
.workspace-watchlist__rows { display: grid; }
.workspace-evidence__item,
.workspace-watchlist__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
  color: var(--fg);
  text-decoration: none;
}
.workspace-evidence__item:first-child,
.workspace-watchlist__row:first-child { padding-top: 0; }
.workspace-evidence__item:last-child,
.workspace-watchlist__row:last-child { padding-bottom: 0; border-bottom: 0; }
.workspace-evidence__item strong { display: block; font-size: 12px; font-weight: 600; line-height: 1.4; }
.workspace-evidence__item span { display: block; margin-top: 3px; color: var(--fg-dim); font-size: 10px; }
.workspace-evidence__item:hover strong,
.workspace-watchlist__row:hover { color: var(--accent-2); }
.workspace-evidence__arrow { flex: 0 0 auto; font-weight: 650; }
.workspace-watchlist__name { margin-bottom: 11px; color: var(--fg-dim); font-size: 11px; }
.workspace-watchlist__row { color: var(--fg); font: 700 12px/1 var(--mono); }
.workspace-watchlist__row span { color: var(--fg-dim); font: 500 10px/1 var(--sans); }
.workspace-ai-trade,
.workspace-model-results { min-height: 100%; }
.workspace-ai-trade { border-color: color-mix(in srgb, var(--accent) 32%, var(--line)); }
.workspace-ai-trade__hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: start;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.workspace-ai-trade__hero h3 {
  margin: 6px 0;
  color: var(--fg);
  font-size: 17px;
  line-height: 1.25;
}
.workspace-ai-trade__hero p {
  max-width: 660px;
  margin: 0;
  color: var(--fg-dim);
  font-size: 11px;
  line-height: 1.5;
}
.workspace-ai-trade__score {
  display: grid;
  justify-items: end;
  gap: 3px;
  min-width: 84px;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 7%, var(--panel));
}
.workspace-ai-trade__score strong { color: var(--accent); font: 700 22px/1 var(--mono); }
.workspace-ai-trade__score span { color: var(--fg-dim); font-size: 8px; text-align: right; text-transform: uppercase; }
.workspace-ai-lanes { display: grid; gap: 0; margin-top: 4px; }
.workspace-ai-lane {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(90px, 0.55fr) minmax(0, 1.4fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.workspace-ai-lane__head { display: grid; gap: 3px; min-width: 0; }
.workspace-ai-lane__head strong { color: var(--fg); font-size: 11px; }
.workspace-ai-lane__head span { color: var(--fg-dim); font: 8px/1.2 var(--mono); text-transform: uppercase; }
.workspace-ai-lane__meter {
  height: 5px;
  overflow: hidden;
  border-radius: 99px;
  background: var(--panel-2);
}
.workspace-ai-lane__fill { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.workspace-ai-lane p { margin: 0; color: var(--fg-dim); font-size: 9px; line-height: 1.35; }
.workspace-ai-lane__tickers { display: flex; justify-content: flex-end; gap: 4px; flex-wrap: wrap; }
.workspace-ai-ticker,
.workspace-ai-evidence__ticker {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 4px 7px;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--accent);
  font: 700 9px/1 var(--mono);
  text-decoration: none;
}
.workspace-ai-ticker:hover,
.workspace-ai-evidence__ticker:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, var(--panel)); }
.workspace-ai-evidence {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin-top: 12px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--line);
}
.workspace-ai-evidence__metric {
  display: grid;
  gap: 4px;
  padding: 10px;
  background: var(--panel-2);
}
.workspace-ai-evidence__metric span { color: var(--fg-dim); font-size: 8px; text-transform: uppercase; }
.workspace-ai-evidence__metric strong { color: var(--fg); font: 700 15px/1.2 var(--mono); }
.workspace-ai-evidence__metric small { color: var(--fg-dim); font-size: 8px; line-height: 1.35; }
.workspace-ai-evidence__list { display: grid; gap: 0; margin-top: 12px; }
.workspace-ai-evidence__list > .workspace-eyebrow { padding-bottom: 7px; border-bottom: 1px solid var(--line); }
.workspace-ai-evidence__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 9px;
  align-items: start;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
}
.workspace-ai-evidence__row > div { min-width: 0; }
.workspace-ai-evidence__row strong { display: block; overflow: hidden; color: var(--fg); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.workspace-ai-evidence__row span { display: block; margin-top: 3px; color: var(--fg-dim); font-size: 8px; }
.workspace-research-scoreboard {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--line);
}
.workspace-research-score {
  display: grid;
  align-content: start;
  gap: 5px;
  min-width: 0;
  padding: 11px;
  background: var(--panel-2);
}
.workspace-research-score span { min-height: 22px; color: var(--fg-dim); font-size: 8px; line-height: 1.25; text-transform: uppercase; }
.workspace-research-score strong { color: var(--fg); font: 700 18px/1 var(--mono); }
.workspace-research-score small { color: var(--fg-dim); font-size: 8px; line-height: 1.3; }
.workspace-results-caption {
  margin: 9px 0 0;
  color: var(--fg-dim);
  font-size: 9px;
  line-height: 1.45;
}
.workspace-model-leaderboard { display: grid; margin-top: 12px; border-top: 1px solid var(--line); }
.workspace-model-leaderboard__head,
.workspace-model-result {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 60px minmax(92px, 0.45fr);
  gap: 12px;
  align-items: center;
}
.workspace-model-leaderboard__head {
  padding: 8px 0;
  color: var(--fg-dim);
  font: 700 8px/1 var(--mono);
  text-transform: uppercase;
}
.workspace-model-result { padding: 10px 0; border-top: 1px solid var(--line); }
.workspace-model-result__name { display: grid; gap: 3px; min-width: 0; }
.workspace-model-result__name > span { color: var(--accent-2); font-size: 8px; font-weight: 700; text-transform: uppercase; }
.workspace-model-result__name strong { color: var(--fg); font-size: 11px; }
.workspace-model-result__name small { overflow: hidden; color: var(--fg-dim); font-size: 8px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.workspace-model-result__metric { color: var(--fg); font: 700 13px/1 var(--mono); }
.workspace-model-result__status { color: var(--fg-dim); font-size: 8px; line-height: 1.3; text-transform: uppercase; }
.workspace-research-groups {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin-top: 12px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--line);
}
.workspace-research-group { display: flex; align-items: baseline; gap: 7px; padding: 9px 10px; background: var(--panel-2); }
.workspace-research-group strong { color: var(--fg); font: 700 13px/1 var(--mono); }
.workspace-research-group span { color: var(--fg-dim); font-size: 8px; text-transform: uppercase; }
.workspace-model-gate {
  display: grid;
  gap: 5px;
  margin-top: 12px;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-2);
}
.workspace-model-gate--blocked { border-color: color-mix(in srgb, var(--bad) 28%, var(--line)); }
.workspace-model-gate--guarded { border-color: color-mix(in srgb, var(--warn) 28%, var(--line)); }
.workspace-model-gate strong { color: var(--fg); font-size: 11px; text-transform: capitalize; }
.workspace-model-gate p { margin: 0; color: var(--fg-dim); font-size: 9px; line-height: 1.45; }
.data-state {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  min-height: 110px;
  flex-direction: column;
  gap: 7px;
  padding: 16px;
  border: 1px dashed var(--line-strong);
  border-radius: 10px;
  background: color-mix(in srgb, var(--panel-2) 65%, transparent);
  color: var(--fg-dim);
  font-size: 12px;
}
.data-state strong { color: var(--fg); font-size: 13px; }
.data-state--loading { align-items: center; flex-direction: row; justify-content: flex-start; }
.data-state__pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-2);
  animation: workspacePulse 1.4s ease-in-out infinite;
}
.data-state--unavailable { border-color: color-mix(in srgb, var(--bad) 30%, var(--line)); }
.workspace-text-button {
  margin-top: 4px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--accent-2);
  cursor: pointer;
  font-size: 12px;
  font-weight: 650;
}
@keyframes workspacePulse { 50% { opacity: 0.3; transform: scale(0.82); } }

/* ─── Magnets & AI microsite ──────────────────────────────────────────── */
.magnets-page {
  display: grid;
  gap: 18px;
  width: 100%;
  max-width: 1540px;
  margin: 0 auto;
  color: var(--fg);
  font-family: var(--sans);
}
:root[data-theme="light"] .magnets-page {
  color-scheme: light;
}
.magnets-page *,
.magnets-page *::before,
.magnets-page *::after { box-sizing: border-box; }
.magnets-page h1,
.magnets-page h2,
.magnets-page h3,
.magnets-page p { margin-top: 0; }
.magnets-page h1 { max-width: 900px; margin-bottom: 15px; font-size: clamp(34px, 4.4vw, 68px); line-height: .98; letter-spacing: -.045em; }
.magnets-page h2 { margin-bottom: 7px; font-size: clamp(24px, 2.8vw, 39px); line-height: 1.05; letter-spacing: -.035em; }
.magnets-page h3 { margin-bottom: 7px; font-size: 15px; line-height: 1.28; }
.magnets-page p { color: var(--fg-dim); font-size: 12px; line-height: 1.58; }
.magnets-page a:focus-visible,
.magnets-page button:focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; }
.magnets-icon { width: 18px; height: 18px; color: var(--accent); }
.magnets-link-icon { width: 11px; height: 11px; margin-left: 4px; transform: rotate(-90deg); }
.magnets-eyebrow,
.magnets-card-label {
  display: block;
  margin-bottom: 7px;
  color: var(--accent);
  font: 750 9px/1.2 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.magnets-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(320px, .75fr);
  gap: 24px;
  align-items: stretch;
  min-height: 420px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
}
.magnets-hero__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(28px, 5vw, 68px);
}
.magnets-hero__kicker { display: flex; gap: 9px; align-items: center; margin-bottom: 18px; color: var(--accent); font: 750 10px/1 var(--mono); letter-spacing: .11em; }
.magnets-hero__lead { max-width: 780px; margin-bottom: 18px; color: var(--fg) !important; font-size: 15px !important; line-height: 1.6 !important; }
.magnets-hero__badges { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 2px; }
.magnets-badge,
.magnets-posture,
.magnets-confidence,
.magnets-risk-chip {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 22px;
  padding: 4px 7px;
  border: 1px solid color-mix(in srgb, var(--accent) 32%, var(--line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 7%, var(--panel));
  color: var(--accent);
  font: 750 8px/1.15 var(--mono);
  letter-spacing: .05em;
  text-transform: uppercase;
}
.magnets-badge--blocked { border-color: color-mix(in srgb, var(--bad) 32%, var(--line)); background: color-mix(in srgb, var(--bad) 6%, var(--panel)); color: var(--bad); }
.magnets-hero__boundary { max-width: 740px; margin: 19px 0 0 !important; padding-left: 12px; border-left: 2px solid var(--warn); font-size: 11px !important; }
.magnets-hero__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  padding: 1px;
  background: var(--line);
}
.magnets-stat { display: grid; align-content: start; gap: 6px; min-width: 0; padding: 18px; background: var(--panel-2); }
.magnets-stat > span { color: var(--fg-dim); font: 700 8px/1.3 var(--mono); letter-spacing: .04em; text-transform: uppercase; }
.magnets-stat > strong { color: var(--fg); font: 750 24px/1 var(--mono); }
.magnets-stat > small { color: var(--fg-dim); font-size: 9px; line-height: 1.45; }
.magnets-jump-nav {
  position: sticky;
  top: 104px;
  z-index: 24;
  display: flex;
  gap: 4px;
  align-items: center;
  overflow-x: auto;
  padding: 7px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: color-mix(in srgb, var(--panel) 94%, transparent);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--fg) 6%, transparent);
  backdrop-filter: blur(14px);
  scrollbar-width: none;
}
.magnets-jump-nav::-webkit-scrollbar { display: none; }
.magnets-jump-nav a { flex: 0 0 auto; padding: 7px 11px; border-radius: 7px; color: var(--fg-dim); font-size: 10px; font-weight: 700; text-decoration: none; }
.magnets-jump-nav a:hover { background: var(--panel-2); color: var(--accent); }
.magnets-section {
  scroll-margin-top: 160px;
  padding: clamp(22px, 3vw, 40px);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
}
.magnets-section__head { display: flex; justify-content: space-between; gap: 24px; align-items: flex-end; margin-bottom: 23px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.magnets-section__head > div:first-child { max-width: 900px; }
.magnets-section__head p { max-width: 860px; margin: 0; font-size: 13px; }
.magnets-section__actions { flex: 0 0 auto; }
.magnets-freshness { display: inline-flex; padding: 6px 9px; border: 1px solid var(--line); border-radius: 7px; color: var(--fg-dim); font: 700 8px/1 var(--mono); }
.magnets-freshness[data-tone="ready"] { border-color: color-mix(in srgb, var(--ok) 28%, var(--line)); color: var(--ok); }
.magnets-freshness[data-tone="unavailable"] { border-color: color-mix(in srgb, var(--bad) 28%, var(--line)); color: var(--bad); }
.magnets-policy-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.magnets-policy-card { padding: 21px; border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line)); border-radius: 10px; background: color-mix(in srgb, var(--accent) 5%, var(--panel)); }
.magnets-policy-card--caution { border-color: color-mix(in srgb, var(--warn) 38%, var(--line)); background: color-mix(in srgb, var(--warn) 5%, var(--panel)); }
.magnets-policy-card p { margin-bottom: 13px; }
.magnets-check-list { display: grid; gap: 8px; margin: 13px 0 0; padding: 0; list-style: none; }
.magnets-check-list li { position: relative; padding-left: 17px; color: var(--fg-dim); font-size: 11px; line-height: 1.45; }
.magnets-check-list li::before { position: absolute; top: 6px; left: 0; width: 6px; height: 6px; border-radius: 50%; background: var(--warn); content: ""; }
.magnets-source-link { display: inline-flex; align-items: center; color: var(--accent); font-size: 10px; font-weight: 750; text-decoration: none; }
.magnets-source-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.magnets-timeline { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin-top: 20px; border: 1px solid var(--line); border-radius: 10px; background: var(--line); overflow: hidden; }
.magnets-timeline__item { display: grid; align-content: start; gap: 12px; padding: 18px; background: var(--panel-2); }
.magnets-timeline__item time { color: var(--accent); font: 750 9px/1 var(--mono); letter-spacing: .08em; }
.magnets-timeline__item p { min-height: 96px; margin-bottom: 10px; font-size: 10px; }
.magnets-market-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.magnets-market-card { min-width: 0; padding: 17px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2); transition: border-color 140ms ease, transform 140ms ease; }
.magnets-market-card:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); transform: translateY(-1px); }
.magnets-market-card[data-state="unavailable"] { border-color: color-mix(in srgb, var(--bad) 30%, var(--line)); }
.magnets-market-card__head { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; min-height: 47px; }
.magnets-market-card__head > div { display: grid; gap: 5px; min-width: 0; }
.magnets-market-card__head .tk-link { width: fit-content; color: var(--fg) !important; font: 800 14px/1 var(--mono); }
.magnets-market-card__head div > span { overflow: hidden; color: var(--fg-dim); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.magnets-posture { min-height: 19px; padding: 3px 6px; white-space: nowrap; }
.magnets-posture--advance { border-color: color-mix(in srgb, var(--ok) 34%, var(--line)); background: color-mix(in srgb, var(--ok) 6%, var(--panel)); color: var(--ok); }
.magnets-posture--watch { border-color: color-mix(in srgb, var(--warn) 34%, var(--line)); background: color-mix(in srgb, var(--warn) 6%, var(--panel)); color: var(--warn); }
.magnets-posture--pass { border-color: color-mix(in srgb, var(--bad) 34%, var(--line)); background: color-mix(in srgb, var(--bad) 6%, var(--panel)); color: var(--bad); }
.magnets-market-card__price { display: block; margin: 12px 0 5px; font: 780 27px/1 var(--mono); letter-spacing: -.03em; }
.magnets-market-card__move { display: block; min-height: 16px; color: var(--fg-dim); font: 650 9px/1.3 var(--mono); }
.magnets-market-card__move[data-tone="positive"] { color: var(--ok); }
.magnets-market-card__move[data-tone="negative"] { color: var(--bad); }
.magnets-market-card__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin: 15px 0 12px; overflow: hidden; border: 1px solid var(--line); border-radius: 7px; background: var(--line); }
.magnets-market-card__stats .magnets-stat { gap: 4px; padding: 9px; }
.magnets-market-card__stats .magnets-stat > strong { font-size: 13px; }
.magnets-market-card__stats .magnets-stat > small { font-size: 7px; }
.magnets-provenance { display: grid; gap: 4px; margin: 0; }
.magnets-provenance > div { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 7px; }
.magnets-provenance dt { color: var(--fg-dim); font: 700 8px/1.3 var(--mono); text-transform: uppercase; }
.magnets-provenance dd { overflow: hidden; margin: 0; color: var(--fg); font: 600 8px/1.3 var(--mono); text-overflow: ellipsis; white-space: nowrap; }
.magnets-chart-panel { margin-top: 12px; padding: 17px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2); }
.magnets-chart-panel__head { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.magnets-chart-panel__head > div { font-size: 13px; font-weight: 750; }
.magnets-chart-panel__head > span { color: var(--fg-dim); font: 600 8px/1.3 var(--mono); }
.magnets-chart { min-height: 330px; margin-top: 8px; }
.magnets-chart .data-state { min-height: 300px; }
.magnets-chain { display: grid; grid-template-columns: repeat(6, minmax(145px, 1fr)); gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.magnets-chain__step { position: relative; display: flex; flex-direction: column; min-height: 230px; padding: 17px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2); }
.magnets-chain__step:not(:last-child)::after { position: absolute; z-index: 2; top: 29px; right: -10px; width: 11px; height: 1px; background: var(--accent); content: ""; }
.magnets-chain__number { margin-bottom: 24px; color: var(--accent); font: 800 10px/1 var(--mono); }
.magnets-chain__step p { flex: 1 1 auto; margin-bottom: 13px; font-size: 10px; }
.magnets-chain__step small { min-height: 34px; color: var(--fg); font: 600 8px/1.45 var(--mono); }
.magnets-risk-chip { margin-top: 12px; border-color: var(--line); background: var(--panel); color: var(--fg-dim); }
.magnets-primer-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 20px; }
.magnets-primer-card { padding: 18px; border-top: 2px solid var(--accent); background: var(--panel-2); }
.magnets-primer-card p { margin-bottom: 0; font-size: 10px; }
.magnets-ai-flow { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-bottom: 16px; }
.magnets-ai-flow__node { display: grid; gap: 9px; min-height: 88px; padding: 14px; border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line)); border-radius: 9px; background: color-mix(in srgb, var(--accent) 5%, var(--panel)); }
.magnets-ai-flow__node span { color: var(--accent); font: 800 8px/1 var(--mono); }
.magnets-ai-flow__node strong { font-size: 11px; line-height: 1.35; }
.magnets-ai-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.magnets-ai-card { min-height: 205px; padding: 17px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel-2); }
.magnets-confidence { margin-bottom: 25px; border-color: var(--line); color: var(--fg-dim); }
.magnets-ai-card p { margin-bottom: 0; font-size: 10px; }
.magnets-callout { display: flex; gap: 13px; align-items: flex-start; margin-top: 16px; padding: 16px; border-left: 3px solid var(--accent); background: var(--panel-2); }
.magnets-callout strong { display: block; margin-bottom: 5px; font-size: 12px; }
.magnets-callout p { margin: 0; font-size: 10px; }
.magnets-candidate-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.magnets-candidate { overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2); }
.magnets-candidate--advance { border-top: 3px solid var(--ok); }
.magnets-candidate--watch { border-top: 3px solid var(--warn); }
.magnets-candidate--pass { border-top: 3px solid var(--bad); }
.magnets-candidate__head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 17px; }
.magnets-candidate__rank { color: var(--fg-dim); font: 800 10px/1.4 var(--mono); }
.magnets-candidate__head > div { display: grid; gap: 3px; }
.magnets-candidate__head .tk-link { width: fit-content; color: var(--accent) !important; font: 800 13px/1 var(--mono); }
.magnets-candidate__head h3 { margin: 0; }
.magnets-candidate__role { min-height: 55px; margin: 0; padding: 0 17px 15px; font-size: 10px !important; }
.magnets-candidate__evidence { margin: 0; border-top: 1px solid var(--line); }
.magnets-candidate__evidence > div { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 12px; padding: 10px 17px; border-bottom: 1px solid var(--line); }
.magnets-candidate__evidence > div:last-child { border-bottom: 0; }
.magnets-candidate__evidence dt { color: var(--fg-dim); font: 750 8px/1.4 var(--mono); text-transform: uppercase; }
.magnets-candidate__evidence dd { margin: 0; color: var(--fg); font-size: 9px; line-height: 1.48; }
.magnets-comparators { margin-top: 14px; padding: 19px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2); }
.magnets-comparator-rows { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; border: 1px solid var(--line); border-radius: 8px; background: var(--line); overflow: hidden; }
.magnets-comparator-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; padding: 13px; background: var(--panel); }
.magnets-comparator-row > strong { color: var(--accent); font: 800 9px/1.35 var(--mono); }
.magnets-comparator-row b { display: block; margin-bottom: 4px; font-size: 10px; }
.magnets-comparator-row p { margin: 0; font-size: 9px; }
.magnets-trade-boundary { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 10px; align-items: center; margin-bottom: 14px; padding: 13px 15px; border: 1px solid color-mix(in srgb, var(--bad) 28%, var(--line)); border-radius: 9px; background: color-mix(in srgb, var(--bad) 5%, var(--panel)); }
.magnets-trade-boundary span,
.magnets-trade-boundary strong { color: var(--bad); font: 800 9px/1 var(--mono); }
.magnets-trade-boundary p { margin: 0; padding-left: 10px; border-left: 1px solid var(--line); font-size: 9px; }
.magnets-trade-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.magnets-trade-card { padding: 18px; border: 1px solid var(--line); border-left: 3px solid var(--fg-dim); border-radius: 10px; background: var(--panel-2); }
.magnets-trade-card--advance { border-left-color: var(--ok); }
.magnets-trade-card--watch { border-left-color: var(--warn); }
.magnets-trade-card--pass { border-left-color: var(--bad); }
.magnets-trade-card__head { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; margin-bottom: 13px; }
.magnets-trade-card__head .tk-link { color: var(--fg) !important; font: 800 14px/1 var(--mono); }
.magnets-trade-card__refs { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin: 13px 0; overflow: hidden; border: 1px solid var(--line); border-radius: 7px; background: var(--line); }
.magnets-trade-card__refs .magnets-stat { gap: 4px; padding: 10px; }
.magnets-trade-card__refs .magnets-stat > strong { font-size: 14px; }
.magnets-trade-steps { display: grid; gap: 8px; margin: 0; padding-left: 18px; }
.magnets-trade-steps li { padding-left: 3px; color: var(--fg-dim); font-size: 9px; line-height: 1.48; }
.magnets-trade-steps li::marker { color: var(--accent); font: 700 8px var(--mono); }
.magnets-formula { margin-top: 14px; padding: 17px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel-2); }
.magnets-formula code { display: block; overflow-x: auto; padding: 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); color: var(--fg); font: 650 11px/1.4 var(--mono); }
.magnets-formula p { margin: 9px 0 0; font-size: 9px; }
.magnets-source-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.magnets-source-group { padding: 17px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel-2); }
.magnets-source-group h3 { padding-bottom: 11px; border-bottom: 1px solid var(--line); }
.magnets-source-item { padding: 11px 0; border-bottom: 1px solid var(--line); }
.magnets-source-item:last-child { padding-bottom: 0; border-bottom: 0; }
.magnets-source-item p { margin: 5px 0 0; font-size: 9px; }
.magnets-methodology { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 14px; margin-top: 14px; padding: 15px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-2); }
.magnets-methodology strong { font-size: 10px; }
.magnets-methodology p { margin: 0; font-size: 9px; }
.magnets-footer { display: flex; justify-content: space-between; gap: 14px; align-items: center; padding: 13px 4px 6px; color: var(--fg-dim); font: 700 8px/1.4 var(--mono); text-transform: uppercase; }
.magnets-footer strong { color: var(--fg); }

@media (max-width: 1180px) {
  .topbar-secondary { display: none; }
  .workspace-grid { grid-template-columns: minmax(0, 1.1fr) minmax(340px, 0.9fr); }
  .magnets-hero { grid-template-columns: minmax(0, 1.2fr) minmax(300px, .8fr); }
  .magnets-market-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .magnets-ai-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .magnets-ai-card { min-height: 180px; }
}

@media (max-width: 980px) {
  .workspace-grid,
  .workspace-lower-grid,
  .workspace-insight-grid { grid-template-columns: 1fr; }
  .workspace-regime { min-height: 380px; }
  .magnets-hero { grid-template-columns: 1fr; }
  .magnets-hero__stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .magnets-policy-split,
  .magnets-candidate-grid,
  .magnets-trade-grid { grid-template-columns: 1fr; }
  .magnets-timeline,
  .magnets-primer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .magnets-ai-flow { grid-template-columns: repeat(5, minmax(140px, 1fr)); overflow-x: auto; }
  .magnets-comparator-rows { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  #topbar { min-height: 58px; }
  #ticker-tape { position: relative; top: auto; }
  .data-quality-strip { position: relative; top: auto; }
  #layout { height: auto; min-height: calc(100vh - 58px - 34px - 32px - 30px); }
  #rail {
    top: 0;
    width: min(82vw, 280px);
    flex-basis: min(82vw, 280px);
    z-index: 80;
  }
  .rail-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border-radius: 9px;
  }
  .rail-toggle svg { width: 17px; height: 17px; }
  #main { min-height: calc(100vh - 154px); overflow: visible; }
  .ticker-search { margin-left: 0; }
  .magnets-jump-nav { position: static; }
}

@media (max-width: 760px) {
  #topbar { align-items: center; padding: 9px 12px; gap: 9px; }
  .ticker-search { order: 4; flex-basis: 100%; max-width: none; min-width: 100%; }
  .badges { margin-left: auto; }
  .badges #market-status-badge { display: none; }
  .meta { margin-left: 0; }
  #session-date { display: none; }
  #main { padding: 18px 14px 28px; }
  .workspace-home { gap: 14px; }
  .workspace-intro { align-items: flex-start; flex-direction: column; gap: 12px; }
  .workspace-intro h1 { font-size: 27px; }
  .workspace-intro__status { padding: 0; }
  .workspace-panel__head { padding: 15px 16px 12px; }
  .workspace-panel__body { padding: 15px 16px 17px; }
  .workspace-regime__summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .workspace-regime__readouts { grid-template-columns: 1fr; }
  .workspace-journey .workspace-panel__body { display: block; }
  .workspace-journey__steps { grid-template-columns: 1fr; }
  .workspace-journey__card { min-height: 0; border-right: 0; border-bottom: 1px solid var(--line); padding: 17px 16px; }
  .workspace-journey__card:last-child { border-bottom: 0; }
  .workspace-journey__card p,
  .workspace-journey__meta { min-height: 0; }
  .workspace-next-action { padding: 15px 16px; border-top: 1px solid var(--line); border-left: 0; }
  .workspace-next-action .workspace-link { float: none; margin-top: 8px; }
  .workspace-opportunity__fact { grid-template-columns: 1fr; gap: 3px; }
  .workspace-panel__actions { align-items: flex-end; flex-direction: column; gap: 4px; }
  .workspace-ai-trade__hero { grid-template-columns: 1fr; }
  .workspace-ai-trade__score { justify-items: start; }
  .workspace-ai-trade__score span { text-align: left; }
  .workspace-ai-lane { grid-template-columns: minmax(0, 1fr) 90px; }
  .workspace-ai-lane p { grid-column: 1 / -1; }
  .workspace-ai-lane__tickers { grid-column: 1 / -1; justify-content: flex-start; }
  .workspace-ai-evidence,
  .workspace-research-scoreboard { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .workspace-model-leaderboard__head { display: none; }
  .workspace-model-result { grid-template-columns: minmax(0, 1fr) auto; }
  .workspace-model-result__status { grid-column: 1 / -1; }
  .workspace-research-groups { grid-template-columns: 1fr; }
  .magnets-page { gap: 12px; }
  .magnets-page h1 { font-size: 38px; }
  .magnets-hero { min-height: 0; }
  .magnets-hero__copy { padding: 27px 20px; }
  .magnets-hero__lead { font-size: 13px !important; }
  .magnets-hero__stats,
  .magnets-market-grid,
  .magnets-timeline,
  .magnets-primer-grid,
  .magnets-ai-grid,
  .magnets-source-grid { grid-template-columns: 1fr; }
  .magnets-stat { padding: 14px; }
  .magnets-section { padding: 22px 17px; border-radius: 11px; }
  .magnets-section__head { align-items: flex-start; flex-direction: column; gap: 10px; }
  .magnets-market-card__head { min-height: 0; }
  .magnets-chart-panel__head { align-items: flex-start; flex-direction: column; }
  .magnets-chain { grid-template-columns: 1fr; overflow: visible; }
  .magnets-chain__step { min-height: 0; }
  .magnets-chain__step:not(:last-child)::after { top: auto; right: auto; bottom: -9px; left: 29px; width: 1px; height: 10px; }
  .magnets-ai-card { min-height: 0; }
  .magnets-confidence { margin-bottom: 16px; }
  .magnets-candidate__head { grid-template-columns: auto minmax(0, 1fr); }
  .magnets-candidate__head > .magnets-posture { grid-column: 2; }
  .magnets-candidate__role { min-height: 0; }
  .magnets-candidate__evidence > div { grid-template-columns: 1fr; gap: 5px; }
  .magnets-trade-boundary { grid-template-columns: auto auto; }
  .magnets-trade-boundary p { grid-column: 1 / -1; padding: 10px 0 0; border-top: 1px solid var(--line); border-left: 0; }
  .magnets-trade-card__head { align-items: flex-start; flex-direction: column; }
  .magnets-methodology { grid-template-columns: 1fr; }
  .magnets-footer { align-items: flex-start; flex-direction: column; }
  #statusbar { height: auto; min-height: 34px; padding: 6px 10px; }
  #status-msg { display: none; }
  .disclaimer { margin: 0 auto; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  #main { scroll-behavior: auto; }
  #ticker-tape-track { animation: none; transform: none; }
  .data-state__pulse { animation: none; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}