/* Generated by scripts/render/styles-css.mjs — do not edit by hand. */
:root {
  /* "Ledger" — a warm trading-desk canvas: espresso ink under parchment
     type, the way a ruled ledger or an FT page reads, not the default
     cool-slate SaaS dark mode. Atmosphere is elevation + hairlines, never
     decorative gradients. The signature chromatic note is a brass/gold
     accent (ticker-tape brass, not the generic fintech green); market
     direction owns green/red on its own (--pos / --neg), so the accent is
     never confused with "up". */
  --bg:#0c0b09;
  --surface:#17150f;
  --surface-2:#201d15;
  --surface-3:#2b271d;
  --border:rgba(244,233,210,0.10);
  --border-strong:rgba(244,233,210,0.18);
  --hairline:rgba(244,233,210,0.06);
  --text:#e7e0d2;
  --text-strong:#faf5ea;
  --muted:#8d8472;
  --muted-strong:#b6ac96;
  /* Signature brass — the Ledger accent in one chip. Used sparingly for
     active states, focus rings, eyebrows, CTAs and section marks. It is
     deliberately NOT the up/positive color; green (--pos) carries that, so
     the brand color never doubles as a market signal. Never flood large
     fields with it. */
  --accent:#d9a533;
  --accent-soft:rgba(217,165,51,0.11);
  --accent-strong:#efc15c;
  --accent-glow:rgba(217,165,51,0.26);
  --accent-glow-soft:rgba(217,165,51,0.13);
  --accent-tint-1:rgba(217,165,51,0.06);
  --accent-tint-2:rgba(217,165,51,0.12);
  --pos:#3ad29a;
  --pos-soft:rgba(58,210,154,0.11);
  --pos-glow:rgba(58,210,154,0.18);
  --pos-tint:rgba(58,210,154,0.07);
  --neg:#f2645f;
  --neg-soft:rgba(242,100,95,0.11);
  --neg-glow:rgba(242,100,95,0.18);
  --neg-tint:rgba(242,100,95,0.07);
  --warn:#f08a3c;
  --warn-soft:rgba(240,138,60,0.13);
  --warn-tint:rgba(240,138,60,0.08);
  --info:#5b9bd6;
  --info-soft:rgba(91,155,214,0.11);
  --info-tint:rgba(91,155,214,0.07);
  /* Institutional UIs are defined by precise hairlines + subtle drop, not
     puffy shadows. Keep elevation strictly for modals + popovers. */
  --shadow-sm:0 1px 2px rgba(0,0,0,0.35);
  --shadow-md:0 4px 16px rgba(0,0,0,0.45);
  --shadow-lg:0 24px 60px rgba(0,0,0,0.60);
  --shadow-glow-accent:0 0 0 1px color-mix(in srgb, var(--accent) 25%, transparent);
  /* Refined 4-tier elevation ladder — hairline + soft drops. Tier 0 is
     flat (data rows). Tier 1 is the resting card. Tier 2 is a raised
     surface (hero readouts, pinned strip). Tier 3 is modal/popover. */
  --elev-0:0 0 0 1px var(--hairline);
  --elev-1:inset 0 1px 0 rgba(255,255,255,0.03), 0 1px 0 var(--hairline), 0 2px 6px rgba(0,0,0,0.50), 0 8px 20px -12px rgba(0,0,0,0.55);
  --elev-2:0 1px 0 var(--hairline), 0 8px 24px rgba(0,0,0,0.50), inset 0 1px 0 rgba(255,255,255,0.02);
  --elev-2-hover:0 1px 0 var(--hairline), 0 14px 34px -10px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.04);
  --elev-3:0 0 0 1px var(--border-strong), 0 24px 60px rgba(0,0,0,0.65), inset 0 1px 0 rgba(255,255,255,0.04);
  --elev-pop:var(--elev-3);
  --elev-focus:0 0 0 1px var(--accent), 0 0 0 4px var(--accent-glow-soft);
  --elev-glow:0 0 24px -4px var(--accent-glow);
  /* Glass surfaces — sticky header, popovers, command palette only.
     Never on data cards. */
  --glass-bg:color-mix(in srgb, var(--surface) 72%, transparent);
  --glass-border:color-mix(in srgb, var(--text-strong) 8%, var(--border));
  --glass-blur:saturate(160%) blur(16px);
  /* Accent ramp extras for tinted backgrounds and on-fill text. Brass fills
     take dark espresso ink as their foreground (not white) — the high-
     contrast, "stamped foil" reading. */
  --accent-dim:#a87a1c;
  --accent-fg:#211705;
  --accent-line:color-mix(in srgb, var(--accent) 38%, var(--border));
  /* Gradient skins — applied via background-image so borders + box-shadow
     compose cleanly on top. The "hero" gradient is reserved for the
     few flagship surfaces (score readout, AI review, sign-in card). */
  --gradient-card:var(--surface);
  --gradient-positive:linear-gradient(180deg, color-mix(in srgb, var(--pos) 10%, var(--surface)) 0%, var(--surface) 70%);
  --gradient-negative:linear-gradient(180deg, color-mix(in srgb, var(--neg) 10%, var(--surface)) 0%, var(--surface) 70%);
  --grad-surface:linear-gradient(180deg, color-mix(in srgb, #ffffff 5%, var(--surface)) 0%, var(--surface) 60%);
  --grad-surface-raised:linear-gradient(180deg, color-mix(in srgb, var(--accent) 4%, var(--surface-2)) 0%, var(--surface) 70%);
  --grad-pos:linear-gradient(180deg, var(--pos-tint) 0%, transparent 60%);
  --grad-neg:linear-gradient(180deg, var(--neg-tint) 0%, transparent 60%);
  --grad-warn:linear-gradient(180deg, var(--warn-tint) 0%, transparent 60%);
  --grad-hero:linear-gradient(135deg, color-mix(in srgb, var(--accent) 15%, var(--surface)) 0%, var(--surface) 58%, color-mix(in srgb, #c65f2e 7%, var(--surface)) 100%);
  /* Display typography — large hero numbers (equity, score) lean on
     this weight + slight negative tracking. */
  --fw-display:700;
  --ls-display:-0.03em;
  --r-1:4px; --r-2:6px; --r-3:8px; --r-4:14px; --r-5:18px; --r-pill:999px;
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px; --s-7:32px; --s-8:48px;
  --fs-2xs:10px; --fs-xs:11px; --fs-sm:13px; --fs-md:15px; --fs-lg:16px; --fs-xl:19px; --fs-2xl:25px; --fs-3xl:33px; --fs-hero:50px; --fs-mega:64px;
  --lh-tight:1.15; --lh-snug:1.35; --lh-normal:1.55;
  --ls-num:-0.01em; --ls-caps:0.10em;
  --font-sans:"Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  --font-mono:"JetBrains Mono", "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  /* Display serif (Fraunces) — card titles, hero headlines, section marks
     and the wordmark. A high-contrast, optically-sized "old-style" serif
     with real character: it gives the product an editorial, art-directed
     voice that a geometric sans can't, and signals a human hand over a
     template. Pairs with Hanken Grotesk (--font-sans) for dense UI and
     JetBrains Mono (--font-mono) for tabular data. The var name stays
     --font-serif for compatibility with existing uses. */
  --font-serif:"Fraunces", "Hanken Grotesk", "Iowan Old Style", Georgia, serif;
  --focus-ring:0 0 0 2px color-mix(in srgb, var(--accent) 45%, transparent);
  --ease-out:cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:cubic-bezier(0.4, 0, 0.2, 1);
  /* One restrained-overshoot easing reserved for press/lift micro-feedback. */
  --ease-spring:cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-0:90ms; --dur-1:120ms; --dur-2:220ms; --dur-3:350ms;
  /* Offset focus ring — a --bg-colored gap separates the accent ring from
     busy/glass surfaces (header, command palette). Gap flips per theme via
     --bg, so it stays crisp on both. */
  --focus-ring-bold:0 0 0 2px var(--bg), 0 0 0 4px var(--accent), 0 0 0 8px var(--accent-glow-soft);
  /* Alias tokens — these were referenced across the vol / strategies / OI /
     heatmap tabs (100+ uses) but never declared, so they silently fell through
     (color → inherited, radius → 0, transition → none). They are var()-based,
     so this single base definition resolves correctly in BOTH themes. */
  --text-2:var(--muted-strong);
  --text-3:var(--muted);
  --up:var(--pos);
  --dn:var(--neg);
  --xt:.12s var(--ease-out);
  --r-md:var(--r-3);
  --r-sm:var(--r-2);
  --accent-on:var(--accent-fg);
  /* Unified content widths — wider than the legacy 760px to give the new
     dashboard layouts room to breathe without losing the focused feel. */
  --w-content:1120px;
  --w-shell:1220px;
  color-scheme:dark;
}
:root[data-theme="light"] {
  /* Light theme — a warm parchment field (ledger paper), not stark white,
     sharing the same Ledger semantic tokens. The brass accent darkens for
     legibility on paper; P&L keeps green/red so direction stays
     unmistakable. */
  --bg:#faf7f0;
  --surface:#fffdf8;
  --surface-2:#f3efe5;
  --surface-3:#e9e3d5;
  --border:rgba(45,38,24,0.12);
  --border-strong:rgba(45,38,24,0.20);
  --hairline:rgba(45,38,24,0.07);
  --text:#2c2719;
  --text-strong:#16120a;
  --muted:#8a8270;
  --muted-strong:#5b5345;
  --accent:#9a6f12;
  --accent-soft:rgba(154,111,18,0.10);
  --accent-strong:#7d590a;
  --accent-glow:rgba(154,111,18,0.20);
  --accent-glow-soft:rgba(154,111,18,0.10);
  --accent-tint-1:rgba(154,111,18,0.05);
  --accent-tint-2:rgba(154,111,18,0.10);
  --pos:#0f9d5e;
  --pos-soft:rgba(15,157,94,0.10);
  --pos-glow:rgba(15,157,94,0.16);
  --pos-tint:rgba(15,157,94,0.06);
  --neg:#d8453f;
  --neg-soft:rgba(216,69,63,0.10);
  --neg-glow:rgba(216,69,63,0.14);
  --neg-tint:rgba(216,69,63,0.06);
  --warn:#b5700f;
  --warn-soft:rgba(181,112,15,0.10);
  --warn-tint:rgba(181,112,15,0.07);
  --info:#2f6fb5;
  --info-soft:rgba(47,111,181,0.10);
  --info-tint:rgba(47,111,181,0.06);
  --shadow-sm:0 1px 2px rgba(15,23,42,0.05);
  --shadow-md:0 4px 12px rgba(15,23,42,0.08);
  --shadow-lg:0 24px 48px rgba(15,23,42,0.12);
  --shadow-glow-accent:0 0 0 1px color-mix(in srgb, var(--accent) 25%, transparent);
  --elev-0:0 0 0 1px var(--hairline);
  --elev-1:0 1px 0 var(--hairline), 0 2px 6px rgba(15,23,42,0.06), 0 10px 22px -14px rgba(15,23,42,0.10);
  --elev-2:0 1px 0 var(--hairline), 0 10px 28px rgba(15,23,42,0.10);
  --elev-2-hover:0 1px 0 var(--hairline), 0 16px 34px -12px rgba(15,23,42,0.14);
  --elev-3:0 0 0 1px var(--border-strong), 0 28px 60px rgba(15,23,42,0.18);
  --elev-pop:var(--elev-3);
  --elev-focus:0 0 0 1px var(--accent), 0 0 0 4px var(--accent-glow-soft);
  --elev-glow:0 0 22px -4px var(--accent-glow);
  --glass-bg:color-mix(in srgb, var(--surface) 78%, transparent);
  --glass-border:color-mix(in srgb, var(--text-strong) 6%, var(--border));
  --glass-blur:saturate(150%) blur(16px);
  --accent-dim:#0b7d4d;
  --accent-fg:#ffffff;
  --accent-line:color-mix(in srgb, var(--accent) 35%, var(--border));
  --gradient-card:var(--surface);
  --gradient-positive:linear-gradient(180deg, color-mix(in srgb, var(--pos) 8%, var(--surface)) 0%, var(--surface) 70%);
  --gradient-negative:linear-gradient(180deg, color-mix(in srgb, var(--neg) 8%, var(--surface)) 0%, var(--surface) 70%);
  --grad-surface:linear-gradient(180deg, var(--surface) 0%, color-mix(in srgb, var(--surface) 96%, var(--surface-2)) 100%);
  --grad-surface-raised:linear-gradient(180deg, color-mix(in srgb, var(--accent) 3%, var(--surface)) 0%, var(--surface) 70%);
  --grad-hero:linear-gradient(135deg, color-mix(in srgb, var(--accent) 11%, var(--surface)) 0%, var(--surface) 58%, color-mix(in srgb, #c65f2e 6%, var(--surface)) 100%);
  --focus-ring:0 0 0 2px color-mix(in srgb, var(--accent) 40%, transparent);
  color-scheme:light;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font: var(--fs-md)/var(--lh-normal) var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  font-feature-settings: "cv11", "ss01", "tnum" 1;
  /* One restrained vignette behind the masthead — replaces the multi-radial
     accent halos that read as the AI-template default. Just enough depth
     to seat the header without competing with content. */
  background-image:
    radial-gradient(ellipse 1100px 380px at 50% -120px,
      color-mix(in srgb, var(--accent) 5%, transparent) 0%,
      transparent 75%);
  background-attachment: fixed;
  background-repeat: no-repeat;
  letter-spacing: 0;
}
:root[data-theme="light"] body {
  background-image:
    radial-gradient(ellipse 1100px 380px at 50% -120px,
      color-mix(in srgb, var(--accent) 4%, transparent) 0%,
      transparent 75%);
}
/* Numeric data — always tabular and slightly tighter than prose */
.num, .mono, code, kbd, samp,
.pf-symbol, .pf-equity-now, .pf-equity-chg,
.pf-perf-pnl-value, .pf-stat-value,
.pf-mark-value, .pf-pnl-pct, .pf-pnl-total {
  font-feature-settings: "tnum" 1, "ss01" 1;
  font-variant-numeric: tabular-nums;
}
/* Standard institutional "eyebrow" label — tracked-out small caps used
   above every data section. Pairs with --muted to read as metadata. */
.eyebrow {
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--muted);
  font-feature-settings: "tnum" 1;
}
@keyframes pf-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes pf-shimmer {
  from { background-position: -200px 0; }
  to   { background-position: calc(200px + 100%) 0; }
}

/* === Motion primitives ===================================================
   Tasteful, professional micro-animations. All gated under
   prefers-reduced-motion: no-preference so accessibility settings short-
   circuit motion entirely. Reuses --ease-out (1,0.3,1 cubic-bezier) so
   timing matches the rest of the UI's transitions.

   stonks-fade-up:   subtle 8px rise + opacity 0→1, used for card entrances
   stonks-fade-in:   pure opacity 0→1, used for page-pane swaps where a
                     translate would conflict with the underlying layout
   stonks-draw:      stroke-dashoffset 1→0, used for SVG paths drawing in
   stonks-pulse:     soft scale 1→1.04→1, used for value-change emphasis
   ----------------------------------------------------------------------*/
@keyframes stonks-fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes stonks-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes stonks-draw {
  to { stroke-dashoffset: 0; }
}
/* Hero surfaces (score readout, AI review) softly breathe an accent
   halo so the user's eye returns to them. Capped iteration so the
   motion doesn't feel relentless on long sessions. */
@keyframes stonks-glow-pulse {
  0%, 100% { box-shadow: var(--elev-2), 0 0 0 0 var(--accent-glow-soft); }
  50%      { box-shadow: var(--elev-2), 0 0 24px 2px var(--accent-glow); }
}

@media (prefers-reduced-motion: no-preference) {
  /* Page-tab swap: fade the freshly-shown pane in with a small upward
     translate. Gives the top-level nav a sense of weight without
     disrupting layout. */
  .page-pane:not([hidden]) {
    animation: stonks-fade-up var(--dur-3) var(--ease-out);
  }
  /* Calendar chips cascade in on first paint of a day group. Limit the
     cascade depth so a heavy news day doesn't ripple visibly for 2s. */
  .cal-chip {
    animation: stonks-fade-up .32s var(--ease-out) both;
  }
  .cal-day .cal-chip:nth-child(1) { animation-delay: 0ms; }
  .cal-day .cal-chip:nth-child(2) { animation-delay: 30ms; }
  .cal-day .cal-chip:nth-child(3) { animation-delay: 60ms; }
  .cal-day .cal-chip:nth-child(4) { animation-delay: 90ms; }
  .cal-day .cal-chip:nth-child(5) { animation-delay: 120ms; }
  .cal-day .cal-chip:nth-child(n+6) { animation-delay: 140ms; }
  .cal-chip {
    transition: border-color .15s var(--ease-out), transform .15s var(--ease-out), background .15s var(--ease-out);
  }
  .cal-chip:hover {
    transform: translateX(2px);
    background: color-mix(in srgb, var(--accent) 4%, var(--surface-2));
  }

  /* Portfolio risk: stagger the four sub-blocks on first render so the
     dashboard composes itself instead of slamming in. */
  .pf-risk-block {
    animation: stonks-fade-up .35s var(--ease-out) both;
    transition: transform .18s var(--ease-out), border-color .18s var(--ease-out);
  }
  .pf-risk-grid .pf-risk-block:nth-child(1) { animation-delay: 0ms; }
  .pf-risk-grid .pf-risk-block:nth-child(2) { animation-delay: 50ms; }
  .pf-risk-grid .pf-risk-block:nth-child(3) { animation-delay: 100ms; }
  .pf-risk-grid .pf-risk-block:nth-child(4) { animation-delay: 150ms; }
  .pf-risk-block:hover {
    border-color: color-mix(in srgb, var(--accent) 25%, var(--border));
  }

  /* IV card: term-structure line draws itself in. stroke-dasharray on
     the path is set inline by the renderer so the keyframe just sweeps
     the offset to zero. */
  .opt-iv-svg .opt-iv-line {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: stonks-draw .9s var(--ease-out) forwards;
  }
  .opt-iv-svg .opt-iv-dots circle {
    opacity: 0;
    animation: stonks-fade-in .25s var(--ease-out) forwards;
    animation-delay: .55s;
  }

  /* Flow chips already have a hover background; add a tiny translate so
     the interaction feels intentional rather than flat. */
  .flow-chip {
    transition: background .15s var(--ease-out), border-color .15s var(--ease-out), transform .15s var(--ease-out);
  }
  .flow-chip:hover {
    transform: translateY(-1px);
  }
  /* Narrative cards: subtle lift on hover. Many cards on screen at once,
     so keep it light to avoid making the page feel busy. */
  .narr-industry, .narr-card {
    transition: transform .18s var(--ease-out), border-color .18s var(--ease-out), box-shadow .18s var(--ease-out);
  }
  .narr-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px -6px rgba(0, 0, 0, .35);
  }

  /* Page-tab selection indicator slide. The underline is the bottom
     border of the active tab; smoothing the color transition makes
     switching between sections feel less abrupt. */
  .page-tab {
    transition: color .15s var(--ease-out), border-color .2s var(--ease-out), background .15s var(--ease-out);
  }

  /* Primary CTAs and pill toggles get a press-down state for tactility. */
  .pf-btn, .calendar-pill, .flow-pill, .opt-tab, .acc-tab {
    transition: color .12s var(--ease-out), background .12s var(--ease-out), border-color .12s var(--ease-out), transform .08s var(--ease-out);
  }
  .pf-btn:active, .calendar-pill:active, .flow-pill:active, .opt-tab:active, .acc-tab:active {
    transform: translateY(1px);
  }

  /* Cards opted into hover lift get a subtle raise + accent-tinted
     shadow. Sentiment-keyed surfaces (sector overviews, recommendation
     cards) compose this with their existing background gradient. */
  .card.is-hoverable:hover {
    transform: translateY(-1px);
    box-shadow: var(--elev-2), var(--elev-glow);
  }

  /* Active page-tab indicator — a slim accent bar that slides between
     tabs. The crisp per-tab ::after bar handles the rest state; this one
     glides during selection. No glow — the bar speaks for itself. */
  .page-tabs::before {
    content: "";
    position: absolute;
    left: 0; bottom: -1px;
    width: 1px; height: 2px;
    background: var(--accent);
    transform: translateX(var(--ind-x, 0px)) scaleX(var(--ind-w, 0));
    transform-origin: left;
    transition: transform .28s var(--ease-out);
    pointer-events: none;
    z-index: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-tabs::before { transition: none; transform: none; opacity: 0; }
  .opt-rec-card, .pf-review-card { animation: none; }
}

.skeleton {
  display: inline-block;
  background: linear-gradient(90deg,
    var(--surface-2) 0%,
    var(--surface-3) 50%,
    var(--surface-2) 100%);
  background-size: 200px 100%;
  background-repeat: no-repeat;
  border-radius: var(--r-2);
  color: transparent;
  animation: pf-shimmer 1.4s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .skeleton { animation: none; }
}
.mono, code, kbd, samp {
  font-family: var(--font-mono);
  font-feature-settings: "tnum" 1, "ss01" 1;
}
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-strong); text-decoration: underline; }
button { font: inherit; }
:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--r-2);
}

/* === Layout ===
   Top utility bar — sticky glass chrome that floats over the scroll.
   Backed by a translucent surface + backdrop blur so content reads
   through without bleeding. Border-bottom carries the hairline so the
   strip below it (page-sub / freshness) doesn't double up. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  display: flex; align-items: center; justify-content: space-between;
  margin: 0 auto;
  padding: var(--s-3) var(--s-6);
  /* A solid masthead band — not a translucent floating glass bar (that
     backdrop-blur chrome is the giveaway of a generated template). The
     surface band sits a step above the page ink and is underlined by a
     two-rule keyline: a brass hairline over a faint shadow, the way a
     printed masthead is ruled off from the body. */
  background: var(--surface);
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border));
  box-shadow: 0 1px 0 var(--accent-line), 0 6px 18px -12px rgba(0,0,0,0.7);
}
:root[data-theme="light"] .site-header {
  box-shadow: 0 1px 0 var(--accent-line), 0 6px 18px -12px rgba(15,23,42,0.10);
}
.site-header-inner {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%;
  max-width: var(--w-shell);
  margin: 0 auto;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header { background: var(--surface); }
}
.brand {
  display: inline-flex; align-items: center; gap: var(--s-3);
  color: var(--text-strong);
  font-family: var(--font-serif);
  font-weight: 600; font-size: 22px;
  letter-spacing: -0.01em;
  font-style: italic;
}
.brand:hover { text-decoration: none; }
.brand-word { line-height: 1; }
.brand-mark {
  color: var(--accent);
  transition: transform .35s var(--ease-out);
}
.brand:hover .brand-mark { transform: rotate(28deg); }
.brand-tag {
  font-family: var(--font-sans);
  font-style: normal;
  font-size: 11px; font-weight: 600;
  color: var(--muted); letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0;
  border: 0;
  border-radius: 0;
  margin-left: var(--s-1);
  padding-left: var(--s-3);
  border-left: 1px solid var(--hairline);
  background: transparent;
}
.site-nav { display: inline-flex; gap: var(--s-2); align-items: center; }
.auth-chip {
  display: inline-flex; align-items: center; gap: 7px;
  height: 32px; padding: 0 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-2, transparent);
  color: var(--muted);
  font-size: 13.5px; line-height: 1;
}
.auth-chip svg { color: var(--accent, #5865f2); flex: none; }
.auth-chip .auth-name { color: var(--text); font-weight: 600; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.auth-chip .auth-logout {
  color: var(--muted); text-decoration: none; font-weight: 600;
  padding-left: 8px; margin-left: 2px; border-left: 1px solid var(--border);
}
.auth-chip .auth-logout:hover { color: var(--text); text-decoration: underline; }
@media (max-width: 560px) { .auth-chip .auth-name { display: none; } }
/* Logged-out CTAs in the chip slot (freemium): a filled "Join" (the Discord
   invite — where premium is bought) + a ghost "Log in" for existing members. */
.auth-chip[data-anon] { padding: 0; border: 0; background: transparent; }
.auth-chip .auth-join {
  display: inline-flex; align-items: center; gap: 7px;
  height: 32px; padding: 0 13px; border-radius: 999px;
  background: var(--accent); color: var(--accent-fg); text-decoration: none;
  font-size: 13.5px; font-weight: 600; line-height: 1; transition: filter .15s;
}
.auth-chip .auth-join:hover { filter: brightness(1.08); }
.auth-chip .auth-join svg { color: var(--accent-fg); }
.auth-chip .auth-login {
  color: var(--muted); text-decoration: none; font-weight: 600;
  font-size: 13.5px; line-height: 1; padding: 0 4px;
}
.auth-chip .auth-login:hover { color: var(--text); text-decoration: underline; }

/* --- Freemium gate -------------------------------------------------------- */
/* Lock glyph on premium nav items, only while the visitor is NOT a member. */
body:not(.is-member) [data-premium] { position: relative; }
body:not(.is-member) [data-premium]::after {
  content: "🔒"; font-size: 10px; line-height: 1;
  margin-left: 5px; opacity: .65; vertical-align: middle;
}
/* A locked premium pane hides its real content and shows only the upsell card. */
.page-pane.locked > :not(.premium-lock) { display: none !important; }
.premium-lock { display: none; }
.page-pane.locked > .premium-lock { display: block; }
.premium-lock {
  padding: 48px 18px; display: flex; justify-content: center;
}
.premium-lock-card {
  max-width: 460px; width: 100%; text-align: center;
  background: var(--surface, var(--panel, #12151c));
  border: 1px solid var(--border); border-radius: 18px;
  padding: 36px 30px;
  box-shadow: 0 18px 48px rgba(0,0,0,.28);
}
.premium-lock-badge {
  width: 54px; height: 54px; margin: 0 auto 16px;
  display: grid; place-items: center; border-radius: 14px;
  color: var(--accent, #5865f2);
  background: color-mix(in srgb, var(--accent, #5865f2) 14%, transparent);
}
.premium-lock-title { font-size: 19px; margin: 0 0 8px; line-height: 1.25; }
.premium-lock-body { color: var(--muted); font-size: 14px; line-height: 1.55; margin: 0 0 22px; }
.premium-lock-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 12px 22px; border-radius: 12px;
  background: var(--accent); color: var(--accent-fg); text-decoration: none;
  font-size: 14.5px; font-weight: 600; transition: filter .15s;
}
.premium-lock-cta:hover { filter: brightness(1.08); }
.premium-lock-cta svg { color: var(--accent-fg); }
.premium-lock-foot { color: var(--muted); font-size: 13.5px; margin: 16px 0 0; }
.premium-lock-foot a { color: var(--accent, #5865f2); text-decoration: none; }
.premium-lock-foot a:hover { text-decoration: underline; }
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  border-radius: var(--r-2);
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  cursor: pointer;
  transition: color .15s var(--ease-out), border-color .15s var(--ease-out),
              background .15s var(--ease-out);
}
.icon-btn:hover {
  color: var(--text-strong);
  border-color: var(--border-strong);
  background: var(--surface-2);
  text-decoration: none;
}
:root:not([data-theme="dark"]) .icon-btn .i-moon { display: none; }
:root[data-theme="dark"] .icon-btn .i-sun { display: none; }

/* Marketing tagline under the header — kept small + muted so it reads as
   metadata, not as a hero. Institutional dashboards don't need a pitch. */
.page-sub {
  max-width: var(--w-content); margin: 0 auto;
  padding: var(--s-3) var(--s-5) 0;
  color: var(--muted);
  font-size: var(--fs-sm);
  letter-spacing: 0;
  line-height: var(--lh-snug);
}

main {
  max-width: var(--w-content); margin: 0 auto;
  padding: var(--s-3) var(--s-5) var(--s-7);
}

/* === Page-level section tabs ===
   Underline indicator — institutional standard. Crisp 2px accent bar on the
   active tab, no decorative chrome. Persists to localStorage. */
/* Heights of the pinned chrome stack, shared so stacked stickies (the Grade
   tab's verdict bar) can offset below them. --header-h matches the sticky
   .site-header; --page-tabs-h the tab strip below it. */
:root { --header-h: 56px; --page-tabs-h: 48px; }
/* Full-bleed bar that carries the tab strip and pins it directly under the
   sticky .site-header, so you can jump tabs from anywhere on the page without
   scrolling back to the top. Sits below the header (z 60) and the dropdown
   menus (z 50), which live outside this bar and stay viewport-fixed. The
   page-coloured backing means it's invisible at rest and just cleanly covers
   content once it sticks. */
.page-tabs-bar {
  position: sticky;
  top: var(--header-h);
  z-index: 40;
  background: var(--bg);
  margin-bottom: var(--s-4);
}
.page-tabs {
  position: relative;
  max-width: var(--w-content);
  margin: 0 auto;
  padding: 0 var(--s-5);
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  scrollbar-width: none;
  /* When the strip overflows horizontally, fade both edges so users see
     there's more to scroll on either side. The previous version only faded
     the right edge — but once you scroll, the right side is no longer the
     "hidden" one. Fading both is pure-CSS and works without JS hooks. */
  mask-image: linear-gradient(to right,
    transparent 0,
    black 32px,
    black calc(100% - 32px),
    transparent 100%);
  -webkit-mask-image: linear-gradient(to right,
    transparent 0,
    black 32px,
    black calc(100% - 32px),
    transparent 100%);
}
.page-tabs::-webkit-scrollbar { display: none; }
.page-tab {
  position: relative;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: var(--s-3) var(--s-4);
  cursor: pointer;
  transition: color var(--dur-1) var(--ease-out),
              border-color var(--dur-2) var(--ease-out),
              background var(--dur-1) var(--ease-out);
  margin-bottom: -1px;
  white-space: nowrap;
  flex: 0 0 auto;
  border-radius: var(--r-1) var(--r-1) 0 0;
}
.page-tab:hover {
  color: var(--text);
  background: color-mix(in srgb, var(--accent) 5%, transparent);
}
.page-tab[aria-selected="true"] {
  color: var(--text-strong);
  letter-spacing: 0.03em;
  border-bottom-color: var(--accent);
  background: transparent;
}
/* Flat 2px accent rule under the active tab — no glow, no pill rounding.
   The accent color already provides the cue. */
.page-tab[aria-selected="true"]::after {
  content: "";
  position: absolute;
  inset: auto 8px -1px 8px;
  height: 2px;
  background: var(--accent);
  pointer-events: none;
}
.page-tab:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-1); }
.page-pane[hidden] { display: none; }
/* Reference / legal / info pages (Buyer's manual, Chart patterns, What's
   included, Privacy, Terms) mounted as in-app tabs. The host is a bare block —
   all visual styling lives inside its shadow root (scripts/render/docs.mjs), so
   the page keeps its own bespoke look with no collision against the app CSS. */
.doc-pane { padding: 0; }
.doc-host { display: block; }

/* Grouped tabs (Flow / Macro / Tools) — secondary destinations collapsed
   behind a dropdown trigger that lives in the same horizontal strip as the
   primary tabs. Reduces the visible tab count from 16 to 8 without losing
   any deep-links — cmd-K and ?tab= aliases still target the menu items by
   their original data-page-tab values. */
.page-tab-group {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: stretch;
}
.page-tab-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.page-tab-caret {
  flex: 0 0 auto;
  color: currentColor;
  opacity: 0.7;
  transition: transform var(--dur-2) var(--ease-out), opacity var(--dur-1) var(--ease-out);
}
.page-tab-trigger:hover .page-tab-caret { opacity: 1; }
.page-tab-trigger[aria-expanded="true"] .page-tab-caret { transform: rotate(180deg); opacity: 1; }
/* When the currently active tab lives inside this group, paint the trigger
   the same way an active top-level page-tab would render. Mirrors the
   .page-tab[aria-selected="true"] rule without colliding with aria semantics
   (the trigger is a menu button, not a tab). */
.page-tab-group[data-active="true"] .page-tab-trigger {
  color: var(--text-strong);
  border-bottom-color: var(--accent);
}
.page-tab-group[data-active="true"] .page-tab-trigger::after {
  content: "";
  position: absolute;
  inset: auto 12px -1px 12px;
  height: 2px;
  background: var(--accent);
  pointer-events: none;
}
/* The dropdown panel is positioned by JS via top/left CSS vars so it can
   escape the scroll-clipped .page-tabs strip. Position: fixed sidesteps the
   parent's overflow + mask without needing a portal. */
.page-tab-menu {
  position: fixed;
  top: var(--menu-y, 0);
  left: var(--menu-x, 0);
  min-width: max(180px, var(--menu-min, 180px));
  padding: 6px;
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-3);
  box-shadow: var(--elev-pop);
  display: flex;
  flex-direction: column;
  gap: 2px;
  z-index: 50;
  transform-origin: top left;
  animation: stonks-page-tab-menu-in var(--dur-2) var(--ease-out);
}
.page-tab-menu[hidden] { display: none; }
@keyframes stonks-page-tab-menu-in {
  from { opacity: 0; transform: translateY(-4px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .page-tab-menu { animation: none; }
  .page-tab-caret { transition: none; }
}
.page-tab-menu-item {
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--text);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 500;
  text-align: left;
  padding: 8px 12px;
  border-radius: var(--r-2);
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out);
}
.page-tab-menu-item:hover,
.page-tab-menu-item:focus-visible {
  outline: none;
  color: var(--text-strong);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}
.page-tab-menu-item[aria-selected="true"] {
  color: var(--text-strong);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  box-shadow: inset 2px 0 0 var(--accent);
}

.site-footer {
  max-width: var(--w-shell);
  margin: var(--s-7) auto 0;
  padding: var(--s-5) var(--s-5) var(--s-6);
  color: var(--muted); font-size: var(--fs-xs);
  display: flex; flex-wrap: wrap; gap: var(--s-4); justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--hairline);
  font-family: var(--font-sans);
  font-feature-settings: "tnum" 1;
  letter-spacing: 0;
  text-transform: none;
}
.site-footer > div { display: inline-flex; align-items: center; gap: var(--s-2); }
.site-footer .muted { color: var(--muted); text-transform: none; letter-spacing: 0; }
.site-footer .mono, .site-footer time { font-family: var(--font-mono); }
.site-footer a {
  color: var(--muted);
  border-bottom: 1px solid transparent;
  transition: color .12s var(--ease-out), border-color .12s var(--ease-out);
}
.site-footer a:hover {
  color: var(--text);
  border-bottom-color: var(--accent);
  text-decoration: none;
}
/* Discord join link in the footer — accented so it stands out as the path to
   premium without shouting like a button. */
.site-footer a.foot-discord {
  color: var(--accent, #5865f2);
  font-weight: 600;
  border-bottom-color: transparent;
}
.site-footer a.foot-discord:hover { border-bottom-color: var(--accent, #5865f2); }

/* === Status strip ===
   Sits between the header and the page tabs. Three slots laid out like a
   trader-desk system bar: SYSTEM STATUS · DATA TIMESTAMP · MARKET STATE.
   Each is a label-over-value cell with a hairline divider between, mono
   font for the value so timestamps line up. */
.freshness {
  max-width: var(--w-content);
  margin: 0 auto var(--s-2);
  padding: var(--s-3) var(--s-5) var(--s-2);
  display: flex;
  gap: var(--s-3);
  align-items: center;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: var(--fs-sm);
  font-family: var(--font-sans);
  font-feature-settings: "tnum" 1;
  letter-spacing: 0;
  text-transform: none;
}
/* Quiet, static status mark — a small filled disc, no pulsing halo. The
   color carries the signal; the heartbeat-style animation reads as
   generative-AI chrome and isn't needed. */
.freshness .freshness-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--pos); flex: 0 0 6px;
}
.freshness.warn .freshness-dot { background: var(--warn); }
.freshness.bad  .freshness-dot { background: var(--neg); }
@keyframes freshness-pulse {
  0%, 100% {
    box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 18%, transparent),
                0 0 0 0 color-mix(in srgb, currentColor 40%, transparent);
  }
  50% {
    box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 18%, transparent),
                0 0 0 6px color-mix(in srgb, currentColor 0%, transparent);
  }
}
.freshness .freshness-dot { color: var(--pos); }
.freshness.warn .freshness-dot { color: var(--warn); }
.freshness.bad .freshness-dot { color: var(--neg); }
@media (prefers-reduced-motion: reduce) {
  .freshness .freshness-dot { animation: none; }
}
.freshness-detail { color: var(--muted); text-transform: none; letter-spacing: 0; }
.freshness #freshness-text { color: var(--text); font-weight: 500; }
.freshness .mono, .freshness time { font-family: var(--font-mono); font-feature-settings: "tnum" 1; }
.freshness.warn #freshness-text { color: var(--warn); }
.freshness.bad  #freshness-text { color: var(--neg); }

/* Live market-status badge in the freshness banner. A quiet pill whose leading
   dot carries the state: open = green, pre-market / after-hours = amber,
   closed (weekend/holiday) = grey. Computed client-side from ET wall-clock. */
.market-status {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 2px var(--s-3);
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
}
.market-status::before {
  content: "";
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--muted); flex: 0 0 6px;
}
.market-status-open   { color: var(--pos);  border-color: color-mix(in srgb, var(--pos) 35%, var(--border)); }
.market-status-open::before   { background: var(--pos); }
.market-status-pre,
.market-status-after  { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 35%, var(--border)); }
.market-status-pre::before,
.market-status-after::before  { background: var(--warn); }
.market-status-closed { color: var(--muted); }
.market-status-closed::before { background: var(--muted); }

/* Top-Picks "markets closed" context note — explains a short list outside the
   live session is expected (picks need live option quotes), not a failure. */
.picks-market-note {
  margin: 0 0 var(--s-4);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-2);
  border: 1px solid color-mix(in srgb, var(--warn) 30%, var(--border));
  background: color-mix(in srgb, var(--warn) 8%, transparent);
  color: var(--text);
  font-size: var(--fs-sm);
  line-height: 1.5;
}
.picks-market-note strong { color: var(--warn); font-weight: 700; }

/* === Landing / Home tab ===
   First view a user lands on. A welcome hero + a grid of clickable
   section cards. Each card uses the new gradient skin + glow tokens
   so the entry point reads as the showcase surface. */
.landing-hero {
  position: relative;
  max-width: var(--w-content);
  margin: 0 auto var(--s-5);
  padding: var(--s-7) var(--s-6) var(--s-6);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--hairline);
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}
/* Kicker above the headline — set as small caps with a hairline rule on
   the left so it reads like a printed publication's section mark rather
   than a SaaS eyebrow chip. */
.landing-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font: 600 var(--fs-xs)/1 var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--muted-strong);
  margin-bottom: var(--s-4);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.landing-hero-eyebrow::before {
  content: "";
  display: inline-block;
  width: 28px; height: 1px;
  background: var(--accent);
  opacity: 0.85;
}
.landing-hero-title {
  margin: 0 0 var(--s-3);
  font-family: var(--font-serif);
  font-size: clamp(38px, 5.6vw, 64px);
  font-weight: 500;
  letter-spacing: -0.025em;
  color: var(--text-strong);
  line-height: 1.02;
  max-width: 18ch;
}
.landing-hero-sub {
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-sm);
  letter-spacing: 0.02em;
}
.landing-hero-sub .mono { color: var(--text); }

/* Market-pulse strip — major index ETFs with their last-close 1-day move,
   tucked under the hero sub. Each item is a hairline pill; the move number is
   tinted by tone (green up / red down, inverted for the volatility proxy). */
.landing-pulse {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-top: var(--s-4);
}
.pulse-item {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 7px var(--s-3);
  background: color-mix(in srgb, var(--surface) 60%, transparent);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  box-shadow: var(--elev-0);
  white-space: nowrap;
}
.pulse-name {
  font: 600 var(--fs-xs)/1 var(--font-sans);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.pulse-sym {
  font: 500 var(--fs-2xs)/1 var(--font-mono);
  color: var(--muted-strong);
  letter-spacing: 0.04em;
  opacity: 0.7;
}
.pulse-move {
  font: 700 var(--fs-sm)/1 var(--font-mono);
  letter-spacing: var(--ls-num);
  color: var(--muted-strong);
  font-variant-numeric: tabular-nums;
}
.pulse-item.is-up { border-color: var(--accent-line); }
.pulse-item.is-up .pulse-move { color: var(--pos); }
.pulse-item.is-dn { border-color: color-mix(in srgb, var(--neg) 35%, var(--border)); }
.pulse-item.is-dn .pulse-move { color: var(--neg); }
.pulse-item.is-flat .pulse-move { color: var(--text); }

.landing-grid {
  max-width: var(--w-content);
  margin: 0 auto var(--s-4);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--s-4);
}

/* Landing sections — group the cards into Find ideas / Research / Act
   so the tab strip's 13 destinations don't dump on the user as a flat
   list. Each section has a short eyebrow + sub explaining the cluster. */
.landing-section {
  max-width: var(--w-content);
  margin: 0 auto var(--s-5);
  padding: 0;
}
.landing-section-head {
  padding: 0 var(--s-1);
  margin: 0 0 var(--s-3);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.landing-section-title {
  margin: 0;
  font: 700 var(--fs-md)/1.2 var(--font-sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-strong);
}
.landing-section-sub {
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--muted);
  line-height: var(--lh-normal);
}
.landing-section .landing-grid { margin-bottom: 0; }

.landing-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-6);
  min-height: 194px;
  text-align: left;
  cursor: pointer;
  appearance: none;
  color: var(--text);
  background: var(--surface);
  background-image: var(--grad-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-4);
  box-shadow: var(--elev-1);
  font: inherit;
  transition: transform .25s var(--ease-out),
              box-shadow .25s var(--ease-out),
              border-color .15s var(--ease-out),
              background .15s var(--ease-out);
  overflow: hidden;
}
/* Hover state — a single hairline at the bottom in the accent color, like
   an underline drawn by hand. No gradient sweep, no glow. */
.landing-card::after {
  content: "";
  position: absolute;
  left: var(--s-6); right: var(--s-6); bottom: var(--s-5);
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s var(--ease-out);
  pointer-events: none;
  opacity: 0.7;
}
.landing-card:hover {
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border-strong));
  background: var(--surface);
  box-shadow: var(--elev-2);
}
.landing-card:hover::after { transform: scaleX(1); }
.landing-card:focus-visible {
  outline: none;
  box-shadow: var(--elev-focus);
  border-color: var(--accent);
}
.landing-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  margin-bottom: var(--s-1);
}
.landing-card-eyebrow {
  font: 700 var(--fs-md)/1.1 var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-strong);
}
.landing-card-arrow {
  font-size: var(--fs-lg);
  color: var(--muted);
  transform: translateX(0);
  transition: transform .25s var(--ease-out), color .15s var(--ease-out);
}
.landing-card:hover .landing-card-arrow {
  color: var(--accent-strong);
  transform: translateX(4px);
}
.landing-card-stat {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(40px, 4.4vw, 56px);
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--text-strong);
  font-variant-numeric: tabular-nums;
}
.landing-card-sub {
  font-size: var(--fs-xs);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.10em;
  font-weight: 500;
  margin-top: 2px;
}
.landing-card-desc {
  margin: auto 0 0;
  color: var(--text);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  padding-top: var(--s-2);
  border-top: 1px solid var(--hairline);
}

/* Hot variant — used for Unusual flow when there's active flagging. The
   accent shows up as a small pulsing dot in the corner rather than a
   permanent border tint, so the badge means "live activity" instead of
   competing with the user's other cards. */
/* "Hot" badge — a quiet static disc, no pulsing. The hover underline
   already signals activity; the dot just confirms there's something fresh
   without behaving like a status LED. */
.landing-card-hot {
  position: relative;
}
.landing-card-hot > .landing-card-head::after {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  margin-left: 8px;
  vertical-align: 1px;
}

.landing-foot {
  max-width: var(--w-content);
  margin: 0 auto var(--s-5);
  padding: 0 var(--s-2);
  text-align: center;
  color: var(--muted);
  font-size: var(--fs-xs);
  letter-spacing: 0.02em;
}
.landing-foot kbd {
  display: inline-block;
  padding: 1px 6px;
  margin: 0 2px;
  border: 1px solid var(--border);
  border-radius: var(--r-1);
  background: var(--surface-2);
  color: var(--text);
  font: 600 11px/1 var(--font-mono);
}

@media (max-width: 640px) {
  .landing-grid { grid-template-columns: 1fr; gap: var(--s-3); }
  .landing-hero { padding: var(--s-5) var(--s-4); }
  .landing-hero-title { font-size: var(--fs-2xl); }
  .landing-card { min-height: 0; padding: var(--s-4); }
  .landing-card-stat { font-size: var(--fs-3xl); }
}

@media (prefers-reduced-motion: no-preference) {
  /* Stagger the landing cards in on first paint of the home pane so the
     hub feels considered, not slammed in. */
  .landing-card { animation: stonks-fade-up .42s var(--ease-out) both; }
  .landing-grid .landing-card:nth-child(1) { animation-delay: 0ms; }
  .landing-grid .landing-card:nth-child(2) { animation-delay: 60ms; }
  .landing-grid .landing-card:nth-child(3) { animation-delay: 120ms; }
  .landing-grid .landing-card:nth-child(4) { animation-delay: 180ms; }
  .landing-grid .landing-card:nth-child(5) { animation-delay: 240ms; }
  .landing-grid .landing-card:nth-child(6) { animation-delay: 300ms; }
}

/* === Cards ===
   Flat surface with a precise 1px hairline. Elevation by border, not shadow
   — institutional UIs read cleaner this way. */
.card {
  position: relative;
  background: var(--surface);
  background-image: var(--grad-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-4);
  padding: var(--s-5) var(--s-6);
  margin-bottom: var(--s-4);
  box-shadow: var(--elev-1);
  transition: box-shadow .25s var(--ease-out),
              transform .25s var(--ease-out),
              border-color .15s var(--ease-out);
}
.card.is-hoverable { cursor: default; }
.card-header {
  display: flex; align-items: center; gap: var(--s-3);
  padding-bottom: var(--s-3);
  margin-bottom: var(--s-4);
  border-bottom: 1px solid var(--hairline);
}
.card-title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--text-strong);
  display: inline-flex; align-items: baseline; gap: 12px;
  line-height: 1.15;
}
/* A typographic mark before the title — replaces the glowing accent pill.
   Reads as a printed publication's section dingbat instead of a status LED. */
.card-title::before {
  content: '§';
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: 0.85em;
  color: var(--accent);
  opacity: 0.85;
  line-height: 1;
}
.card-eyebrow {
  font-size: var(--fs-xs); color: var(--muted);
  text-transform: none; letter-spacing: 0; font-weight: 500;
  font-family: var(--font-sans);
  font-feature-settings: "tnum" 1;
  margin-left: auto;
}
.card-eyebrow .mono, .card-eyebrow time {
  font-family: var(--font-mono); font-feature-settings: "tnum" 1;
}
.hint {
  margin: 0 0 var(--s-3);
  color: var(--muted);
  font-size: var(--fs-sm);
  line-height: 1.55;
  /* Hairline left accent — gives the descriptive intro paragraph
     visual weight without competing with the card title above. */
  border-left: 2px solid color-mix(in srgb, var(--accent) 35%, var(--hairline));
  padding-left: var(--s-2);
}
.hint em {
  color: var(--text);
  font-style: normal;
  font-weight: 600;
}
.hint code {
  font-family: var(--font-mono);
  font-size: 13px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-1);
  padding: 1px 6px;
}

/* Collapsible explainer (infoNote() in html.mjs) — the long per-tab "how this
   works" intros are folded behind this disclosure, defaulted CLOSED so each tab
   is quick to scan (mobile especially). No information is removed — clicking the
   summary reveals the full methodology. Mirrors the .picks-howto / .bonds-primer
   disclosure look so the whole site reads consistently. */
.info-note {
  margin: 0 0 var(--s-3);
  border: 1px solid var(--border);
  border-radius: var(--r-2);
  background: var(--surface);
  font-size: var(--fs-sm);
  color: var(--text);
}
.info-note > summary {
  cursor: pointer;
  padding: 9px 12px;
  font: 600 13px/1.35 var(--font-sans);
  color: var(--muted-strong);
  list-style: none;
  user-select: none;
  border-radius: var(--r-2);
  display: flex;
  align-items: center;
  gap: var(--s-2);
  transition: color .12s var(--ease-out), background .12s var(--ease-out);
}
.info-note > summary::-webkit-details-marker { display: none; }
.info-note > summary::before {
  content: "ⓘ";
  flex: none;
  color: var(--accent);
  font-size: 14px;
}
.info-note > summary::after {
  content: "▸";
  margin-left: auto;
  flex: none;
  color: var(--muted);
  font-size: 11px;
  transition: transform .15s var(--ease-out);
}
.info-note[open] > summary::after { transform: rotate(90deg); }
.info-note > summary:hover {
  color: var(--text-strong);
  background: color-mix(in srgb, var(--accent) 5%, var(--surface));
}
.info-note[open] > summary {
  color: var(--text-strong);
  border-bottom: 1px solid var(--border);
  border-radius: var(--r-2) var(--r-2) 0 0;
}
.info-note-body {
  padding: 10px 14px 12px;
  line-height: 1.55;
  color: var(--text);
}
.info-note-body p { margin: 0 0 var(--s-2); }
.info-note-body p:last-child { margin-bottom: 0; }
.info-note-body em { color: var(--text); font-style: normal; font-weight: 600; }
.info-note-body b, .info-note-body strong { color: var(--text-strong); font-weight: 600; }
.info-note-body a { color: var(--accent); }
.info-note-body code {
  font-family: var(--font-mono);
  font-size: 13px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-1);
  padding: 1px 6px;
}

/* === Narratives === */
/* Market pulse — cross-sector summary above the sector tabs. Aggregates every
   real (non-watchlist) narrative into one at-a-glance read: strength-weighted
   bull/bear tilt, headline counts, and the strongest stories market-wide as
   click-to-jump chips. The "front page" of the narratives section. */
.narr-pulse {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: var(--s-3) var(--s-4);
  margin: var(--s-3) 0 var(--s-2);
  padding: var(--s-4);
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface-2) 80%, transparent), var(--surface));
  border: 1px solid var(--border);
  border-radius: var(--r-4);
}
.narr-pulse[hidden] { display: none; }
@media (max-width: 720px) { .narr-pulse { grid-template-columns: 1fr; } }
.narr-pulse-tilt { display: flex; flex-direction: column; gap: 6px; justify-content: center; }
.narr-pulse-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-2); }
.narr-pulse-eyebrow {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em;
  color: var(--muted);
}
.narr-pulse-verdict {
  font-family: var(--font-serif);
  font-size: var(--fs-md); font-weight: 700; letter-spacing: -0.01em;
}
.narr-pulse-verdict.is-bull { color: var(--pos); }
.narr-pulse-verdict.is-bear { color: var(--neg); }
.narr-pulse-verdict.is-mixed { color: var(--warn); }
.narr-pulse-bar {
  position: relative; display: flex; height: 9px;
  border-radius: var(--r-pill); overflow: hidden; background: var(--surface-3);
}
.narr-pulse-bar-bull { background: linear-gradient(90deg, color-mix(in srgb, var(--pos) 60%, transparent), var(--pos)); }
.narr-pulse-bar-bear { background: linear-gradient(90deg, var(--neg), color-mix(in srgb, var(--neg) 60%, transparent)); }
.narr-pulse-bar-mid {
  position: absolute; left: 50%; top: -1px; bottom: -1px; width: 2px;
  transform: translateX(-50%); background: var(--surface); opacity: 0.7;
}
.narr-pulse-legend {
  display: flex; justify-content: space-between; gap: var(--s-2);
  font-family: var(--font-mono); font-size: 11.5px; font-variant-numeric: tabular-nums;
}
.narr-pulse-legend .is-bull { color: var(--pos); }
.narr-pulse-legend .is-bear { color: var(--neg); }
.narr-pulse-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-2); align-content: center; }
.narr-pulse-stat {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  padding: 8px 4px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-2);
}
.narr-pulse-stat-num {
  font-family: var(--font-mono); font-size: var(--fs-lg); font-weight: 700;
  font-variant-numeric: tabular-nums; color: var(--text-strong); line-height: 1;
}
.narr-pulse-stat-num.is-warn { color: var(--warn); }
.narr-pulse-stat-num.is-accent { color: var(--accent-strong); }
.narr-pulse-stat-label {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--muted);
}
.narr-pulse-leaders {
  grid-column: 1 / -1;
  display: flex; flex-direction: column; gap: 6px;
  padding-top: var(--s-3); margin-top: 2px;
  border-top: 1px dashed var(--hairline);
}
.narr-pulse-leaders-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--muted);
}
.narr-pulse-leader-list { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.narr-pulse-leader {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 11px 7px 9px;
  background: var(--surface); border: 1px solid var(--border);
  border-left-width: 3px; border-radius: var(--r-2);
  cursor: pointer; font: inherit; text-align: left;
  transition: border-color .12s var(--ease-out), background .12s var(--ease-out), transform .12s var(--ease-out);
}
.narr-pulse-leader.bullish { border-left-color: var(--pos); }
.narr-pulse-leader.bearish { border-left-color: var(--neg); }
.narr-pulse-leader:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border-strong));
  border-left-color: color-mix(in srgb, var(--accent) 35%, var(--border-strong));
  background: color-mix(in srgb, var(--accent) 4%, var(--surface));
}
.narr-pulse-leader.bullish:hover { border-left-color: var(--pos); }
.narr-pulse-leader.bearish:hover { border-left-color: var(--neg); }
.narr-pulse-leader:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.narr-pulse-leader-rank { font-family: var(--font-mono); font-size: 11px; font-weight: 700; color: var(--muted); }
.narr-pulse-leader-name {
  font-family: var(--font-serif);
  font-size: 13px; font-weight: 600; letter-spacing: -0.01em; color: var(--text-strong);
  white-space: nowrap; max-width: 240px; overflow: hidden; text-overflow: ellipsis;
}
.narr-pulse-leader-meta { display: inline-flex; align-items: center; gap: 6px; }
.narr-pulse-leader-sector { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.narr-pulse-leader-str { font-family: var(--font-mono); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.narr-pulse-leader-str.bullish { color: var(--pos); }
.narr-pulse-leader-str.bearish { color: var(--neg); }

/* Sector tab strip across the top of the narratives card. Horizontally
   scrollable on narrow viewports so all 11 sectors stay reachable. */
.narr-tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: thin;
  margin: var(--s-2) 0 var(--s-3);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
  -webkit-overflow-scrolling: touch;
}
.narr-tab {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: color .12s ease, background .12s ease, border-color .12s ease;
  white-space: nowrap;
}
.narr-tab:hover { color: var(--text); background: var(--surface-2); }
.narr-tab.is-active {
  color: var(--accent-strong);
  background: var(--accent-soft);
  border-color: color-mix(in srgb, var(--accent) 30%, transparent);
}
.narr-tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  background: var(--surface-3);
  border-radius: var(--r-pill);
}
.narr-tab.is-active .narr-tab-count {
  color: var(--accent-strong);
  background: color-mix(in srgb, var(--accent) 20%, transparent);
}
.narr-panel { display: flex; flex-direction: column; gap: var(--s-3); }
/* Sector-overview banner — the top-down story for the active sector. Sits
   above the sub-industry blocks. Colour-keyed by stance so the user reads
   "bullish / bearish / mixed" at a glance, with the watch-for panel nested
   below the thesis. */
.narr-sector-overview {
  position: relative;
  padding: var(--s-3) var(--s-3) var(--s-3);
  border: 1px solid var(--border);
  border-left: 4px solid var(--border-strong);
  border-radius: var(--r-3);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--surface-2) 92%, transparent) 0%,
    var(--surface) 100%);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.narr-sector-overview[data-stance="bullish"] {
  border-left-color: var(--pos);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--pos-soft) 55%, var(--surface-2)) 0%,
    var(--surface) 100%);
}
.narr-sector-overview[data-stance="bearish"] {
  border-left-color: var(--neg);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--neg-soft) 55%, var(--surface-2)) 0%,
    var(--surface) 100%);
}
.narr-sector-overview[data-stance="mixed"] {
  border-left-color: var(--warn);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--warn-soft) 45%, var(--surface-2)) 0%,
    var(--surface) 100%);
}
.narr-sector-overview.is-empty { border-left-color: var(--border-strong); }
.narr-sector-overview-head {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--s-2);
}
.narr-sector-overview-eyebrow {
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--muted);
}
.narr-sector-overview-title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--fs-xl);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-strong);
}
.narr-sector-overview-stance {
  display: inline-flex; align-items: center;
  height: 22px; padding: 0 10px;
  font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  border-radius: var(--r-pill);
}
.narr-sector-overview-stance.bullish {
  color: var(--pos);
  background: var(--pos-soft);
  border: 1px solid color-mix(in srgb, var(--pos) 40%, transparent);
}
.narr-sector-overview-stance.bearish {
  color: var(--neg);
  background: var(--neg-soft);
  border: 1px solid color-mix(in srgb, var(--neg) 40%, transparent);
}
.narr-sector-overview-stance.mixed {
  color: var(--warn);
  background: var(--warn-soft);
  border: 1px solid color-mix(in srgb, var(--warn) 40%, transparent);
}
.narr-sector-overview-thesis {
  margin: 0;
  font-size: var(--fs-md);
  line-height: 1.65;
  color: var(--text);
  max-width: 78ch;
}
.narr-sector-overview-thesis.muted { color: var(--muted); font-style: italic; }
.narr-industries { display: flex; flex-direction: column; gap: var(--s-6); }
.narr-industry {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.narr-industry-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-2);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.narr-industry-name {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--fs-lg);
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--text-strong);
}
.narr-industry-count {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  color: var(--muted);
}
.narr-industry-list {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}
.narr-empties {
  margin-top: var(--s-2);
  padding: var(--s-2) var(--s-3);
  background: var(--surface-2);
  border: 1px dashed var(--border);
  border-radius: var(--r-2);
  color: var(--muted);
  font-size: var(--fs-sm);
}
.narr-empties > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--s-2);
}
.narr-empties > summary::-webkit-details-marker { display: none; }
.narr-empties-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  color: var(--muted);
}
.narr-empties-count {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  font-size: 12px;
}
.narr-empties-list {
  margin: var(--s-2) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 4px 12px;
  color: var(--text);
  font-size: 13px;
}
.narr-empties-list li::before {
  content: "·";
  margin-right: 6px;
  color: var(--muted);
}
/* Collapsible watchlist strip — one row per industry, with the tickers
   as compact chips. Replaces a stack of identical "no single narrative
   driving X — these names are in scope" cards. */
.narr-watchlists {
  margin-top: var(--s-2);
  padding: var(--s-2) var(--s-3);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-2);
  color: var(--text);
  font-size: var(--fs-sm);
}
.narr-watchlists > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--s-2);
}
.narr-watchlists > summary::-webkit-details-marker { display: none; }
.narr-watchlists-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: var(--muted);
}
.narr-watchlists-count {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  color: var(--muted);
}
.narr-watchlists-body {
  margin-top: var(--s-3);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.narr-watchlist-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  padding-bottom: var(--s-2);
  border-bottom: 1px dashed var(--hairline);
}
.narr-watchlist-row:last-child { border-bottom: 0; padding-bottom: 0; }
.narr-watchlist-ind {
  font-weight: 600;
  font-size: 13px;
  color: var(--text);
  min-width: 160px;
}
.narr-watchlist-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.narr-list { display: flex; flex-direction: column; gap: var(--s-3); }
.narr-list:empty { display: none; }
.narr {
  position: relative;
  padding: var(--s-4) var(--s-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-3);
  transition: border-color .15s var(--ease-out), background .15s var(--ease-out), transform .15s var(--ease-out);
}
.narr:hover {
  border-color: color-mix(in srgb, var(--accent) 22%, var(--border-strong));
  background: color-mix(in srgb, var(--accent) 2%, var(--surface));
  transform: translateY(-1px);
}
.narr-accent {
  position: absolute; left: 12px; top: 14px; bottom: 14px;
  width: 2px; border-radius: 1px;
  background: var(--pos);
  transition: box-shadow .15s var(--ease-out);
}
.narr:hover .narr-accent {
  box-shadow: 0 0 8px color-mix(in srgb, var(--pos) 50%, transparent);
}
.narr[data-sent="bearish"]:hover .narr-accent {
  box-shadow: 0 0 8px color-mix(in srgb, var(--neg) 50%, transparent);
}
.narr[data-sent="bearish"] .narr-accent { background: var(--neg); }
.narr-head {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2);
  margin-bottom: 0;
}
.narr-name {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--fs-xl);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--text-strong);
}
/* Metadata strip under the headline — status / timeframe / confidence / tenure.
   Muted + secondary so the headline and thesis carry the read (editorial feel). */
.narr-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin: var(--s-2) 0 var(--s-1);
}
.narr-tag {
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.01em;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--muted);
}
.narr-tag.sent.bullish { color: var(--pos); border-color: color-mix(in srgb, var(--pos) 35%, transparent); background: var(--pos-soft); }
.narr-tag.sent.bearish { color: var(--neg); border-color: color-mix(in srgb, var(--neg) 35%, transparent); background: var(--neg-soft); }
.narr-life {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 500;
  padding: 2px 8px 2px 6px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--muted);
}
.narr-life-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
}
.narr-thesis {
  margin: var(--s-2) 0;
  color: var(--text);
  font-size: var(--fs-md);
  line-height: 1.7;
  max-width: 72ch;
}
/* Supporting analytics — strength / lifecycle / hype — grouped below the prose
   behind a hairline so the story reads first and the gauges read as "the data
   behind it" rather than competing with the headline. */
.narr-analytics {
  margin-top: var(--s-3);
  padding-top: var(--s-2);
  border-top: 1px solid var(--hairline);
}
.narr-analytics .narr-strength { margin-top: 0; }
.narr-side-row {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 6px;
  margin: 4px 0;
}
.narr-side-label {
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  margin-right: 4px;
}
.narr-side-row.long  .narr-side-label { color: var(--pos); }
.narr-side-row.short .narr-side-label { color: var(--neg); }
.narr-chip {
  display: inline-flex; align-items: center;
  height: 22px;
  padding: 0 8px;
  font-size: 12px; font-weight: 600;
  font-variant-numeric: tabular-nums;
  border-radius: var(--r-1);
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
}
.narr-chip.long  { border-color: color-mix(in srgb, var(--pos) 35%, transparent); }
.narr-chip.short { border-color: color-mix(in srgb, var(--neg) 35%, transparent); }
/* Clickable ticker chips inside narrative cards — they're rendered as
   buttons whenever the symbol is in our curated list so users can jump
   straight to the Grade tab from the thesis. */
button.narr-chip {
  font: inherit;
  cursor: pointer;
  letter-spacing: inherit;
  transition: background .12s var(--ease-out), border-color .12s var(--ease-out), transform .12s var(--ease-out);
}
button.narr-chip:hover {
  background: color-mix(in srgb, var(--accent) 12%, var(--surface-2));
  border-color: color-mix(in srgb, var(--accent) 50%, transparent);
  transform: translateY(-1px);
}
button.narr-chip.long:hover  { border-color: color-mix(in srgb, var(--pos) 60%, transparent); }
button.narr-chip.short:hover { border-color: color-mix(in srgb, var(--neg) 60%, transparent); }
button.narr-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.narr-ended { margin-top: var(--s-4); }
.narr-ended:empty { display: none; }
.narr-ended-head {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--muted); font-weight: 700;
  margin-bottom: var(--s-2);
}
.narr-ended-strip {
  display: flex; gap: var(--s-2);
  overflow-x: auto;
  padding-bottom: var(--s-1);
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.narr-ended-card {
  flex: 0 0 220px;
  scroll-snap-align: start;
  padding: var(--s-3);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-2);
  transition: border-color .15s var(--ease-out), background .15s var(--ease-out);
}
.narr-ended-card:hover {
  border-color: var(--border-strong);
  background: var(--surface-3);
}
.narr-ended-name { font-size: var(--fs-sm); font-weight: 600; color: var(--text); margin-bottom: 2px; }
.narr-ended-meta { font-size: 12px; color: var(--muted); }
.narr-empty { color: var(--muted); font-size: var(--fs-sm); padding: var(--s-1) 0; }

/* Narrative rank, strength meter, status / timeframe tags, triggers, conflicts, macro digest */
.narr-rank {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px;
  padding: 0 6px;
  font-family: var(--font-mono);
  font-size: 12px; font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  letter-spacing: -0.02em;
  margin-right: 2px;
}
.narr:first-child .narr-rank {
  color: var(--accent-strong);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  background: var(--accent-soft);
}
.narr-tag.status {
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.narr-tag.status.active   { color: var(--pos); border-color: color-mix(in srgb, var(--pos) 35%, transparent); background: var(--pos-soft); }
.narr-tag.status.building { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, transparent); background: var(--warn-soft); }
.narr-tag.status.fading   { color: var(--muted); border-color: var(--border); background: var(--surface-2); }
.narr-tag.stale {
  color: var(--warn);
  border-color: color-mix(in srgb, var(--warn) 40%, transparent);
  background: var(--warn-soft);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.narr[data-status="fading"]   { opacity: 0.78; }
.narr[data-status="fading"]:hover { opacity: 1; }
.narr.is-stale .narr-thesis { color: var(--muted); }
.narr-tag.tf {
  color: var(--text);
  background: var(--surface-3);
  font-variant-numeric: tabular-nums;
}
.narr-strength {
  display: flex; align-items: center; gap: var(--s-2);
  margin: 2px 0 var(--s-2);
}
.narr-strength-track {
  position: relative;
  flex: 1 1 auto;
  height: 6px;
  background: var(--surface-3);
  border-radius: var(--r-pill);
  overflow: hidden;
}
.narr-strength-fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  border-radius: var(--r-pill);
  background: var(--accent);
  transition: width .2s ease;
}
.narr-strength-fill.hi  {
  background: linear-gradient(90deg, var(--accent), var(--accent-strong));
  box-shadow: 0 0 6px color-mix(in srgb, var(--accent) 45%, transparent);
}
.narr-strength-fill.mid { background: var(--accent); opacity: 0.85; }
.narr-strength-fill.lo  {
  background: color-mix(in srgb, var(--muted) 65%, var(--border-strong));
  opacity: 0.9;
}
.narr-strength-num {
  font-family: var(--font-mono);
  font-size: 12px; font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  min-width: 28px; text-align: right;
}
/* Strength momentum — change vs the most recent prior narrative snapshot.
   Lazy-fetched from data/trends-history.json once the Narratives tab is
   open; shows ▲+5 / ▼-3 next to the strength number. Color-coded by sign. */
.narr-delta {
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  padding: 1px 5px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--muted);
  line-height: 1.4;
  min-width: 36px; text-align: center;
}
.narr-delta.up {
  color: var(--pos);
  border-color: color-mix(in srgb, var(--pos) 35%, transparent);
  background: var(--pos-soft);
}
.narr-delta.down {
  color: var(--neg);
  border-color: color-mix(in srgb, var(--neg) 35%, transparent);
  background: var(--neg-soft);
}
.narr-delta.flat { opacity: 0.6; }
/* Red-flag / watch-for panel — the catalysts that would FLIP this narrative.
   Used by both the per-narrative card and the sector overview banner. Styled
   as a "danger watchlist" with a warm accent border so it visually pops vs.
   the thesis paragraph above it. */
.narr-watchfor {
  margin-top: var(--s-2);
  padding: var(--s-2) var(--s-2) calc(var(--s-2) - 2px);
  border: 1px solid color-mix(in srgb, var(--warn) 40%, var(--border));
  border-left-width: 3px;
  border-radius: var(--r-2);
  background: color-mix(in srgb, var(--warn-soft) 55%, transparent);
}
.narr[data-status="building"] .narr-watchfor {
  border-color: color-mix(in srgb, var(--warn) 55%, var(--border));
  background: color-mix(in srgb, var(--warn-soft) 70%, transparent);
}
.narr-watchfor-head {
  display: inline-flex; align-items: center; gap: 6px;
  margin-bottom: 4px;
}
.narr-watchfor-icon {
  font-size: 13px;
  color: var(--warn);
  line-height: 1;
}
.narr-watchfor-label {
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--warn);
}
.narr-watchfor-list {
  margin: 0; padding: 0 0 0 16px;
  font-size: var(--fs-sm); color: var(--text);
  line-height: 1.5;
}
.narr-watchfor-list li + li { margin-top: 3px; }
.narr-watchfor-list li::marker { color: var(--warn); }
.narr-conflicts {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 6px;
  margin-top: var(--s-2);
}
.narr-conflicts-label {
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--neg);
  margin-right: 2px;
}
.narr-conflict-chip {
  display: inline-flex; align-items: center;
  height: 20px;
  padding: 0 8px;
  font-size: 12px; font-weight: 600;
  color: var(--neg);
  background: var(--neg-soft);
  border: 1px solid color-mix(in srgb, var(--neg) 35%, transparent);
  border-radius: var(--r-pill);
}

/* Narrative lifecycle stepper — the 6-stage boom→bust arc (catalysts →
   amplification → validation → peak → challenges → collapse). Past stages read
   muted; the current stage is highlighted accent while rising (≤ peak) and
   negative once falling (challenges/collapse) as an exhaustion cue. */
.narr-lifecycle { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.narr-lifecycle-label,
.narr-hype-label {
  font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); flex: 0 0 auto;
}
.narr-lifecycle-steps { display: inline-flex; gap: 3px; flex: 0 0 auto; }
.narr-life-step { width: 16px; height: 5px; border-radius: var(--r-pill); background: var(--surface-3); }
.narr-life-step.is-past { background: color-mix(in srgb, var(--muted) 55%, transparent); }
.narr-lifecycle.is-rising .narr-life-step.is-on {
  background: linear-gradient(90deg, var(--accent), var(--accent-strong));
  box-shadow: 0 0 6px color-mix(in srgb, var(--accent) 45%, transparent);
}
.narr-lifecycle.is-falling .narr-life-step.is-on {
  background: var(--neg);
  box-shadow: 0 0 6px color-mix(in srgb, var(--neg) 45%, transparent);
}
.narr-lifecycle-stage { font-size: 12px; font-weight: 700; color: var(--text); }
.narr-lifecycle.is-falling .narr-lifecycle-stage { color: var(--neg); }

/* Lifecycle outlook — the why-here / what's-next / watch-for read under the
   stepper. Compact key/value rows on a left-railed card; the "Next" stage chip
   is accent-coloured, tinted red when the story is advancing toward collapse
   and green when it is recovering back up the arc. */
.narr-life-outlook {
  margin-top: 6px; display: flex; flex-direction: column; gap: 3px;
  padding: 6px 8px; border-radius: var(--r-1);
  background: var(--surface-2); border-left: 2px solid var(--border-strong);
}
.narr-life-outlook-row { display: grid; grid-template-columns: 62px 1fr; gap: 8px; align-items: baseline; }
.narr-life-outlook-k {
  font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted);
}
.narr-life-outlook-v { font-size: 12.5px; color: var(--text); line-height: 1.35; }
.narr-life-outlook-next { font-weight: 700; color: var(--accent-strong); }
.narr-life-outlook-next.is-advancing { color: var(--neg); }
.narr-life-outlook-next.is-recovering { color: var(--pos); }

/* Fundamentals → hype gauge. The track is a fixed fundamentals(green) →
   hype(red) gradient; the marker shows where this story sits on it. */
.narr-hype { margin-top: 8px; }
.narr-hype-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.narr-hype-verdict { font-size: 12px; font-weight: 700; color: var(--text); }
.narr-hype.is-fundamentals .narr-hype-verdict { color: var(--pos); }
.narr-hype.is-hype .narr-hype-verdict { color: var(--neg); }
.narr-hype.is-balanced .narr-hype-verdict { color: var(--accent-strong); }
.narr-hype-track {
  position: relative; height: 6px; border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--pos), var(--accent) 50%, var(--neg));
  opacity: .85;
}
.narr-hype-fill {
  position: absolute; top: -2px; bottom: -2px; width: 3px; transform: translateX(-50%);
  background: var(--text); border-radius: var(--r-pill);
  box-shadow: 0 0 0 2px var(--surface);
}
.narr-hype-why { display: block; margin-top: 4px; font-size: 12px; color: var(--muted); line-height: 1.35; }

/* Bull / Base / Bear scenario block — the optimistic / most-likely / pessimistic
   paths, colour-keyed on the left rail. */
.narr-scenarios { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.narr-scenario {
  display: grid; grid-template-columns: 40px 1fr; gap: 8px; align-items: baseline;
  padding: 4px 8px; border-radius: var(--r-1);
  background: var(--surface-2); border-left: 2px solid var(--border-strong);
}
.narr-scenario-tag { font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.narr-scenario-text { font-size: 12.5px; color: var(--text); line-height: 1.35; }
.narr-scenario.bull { border-left-color: var(--pos); }
.narr-scenario.bull .narr-scenario-tag { color: var(--pos); }
.narr-scenario.base { border-left-color: var(--accent); }
.narr-scenario.base .narr-scenario-tag { color: var(--accent-strong); }
.narr-scenario.bear { border-left-color: var(--neg); }
.narr-scenario.bear .narr-scenario-tag { color: var(--neg); }

/* Sector industry-group grade breakdown — makes the two-level rollup visible
   (sector grade = the average of these). Magnitude bar coloured by stance. */
.narr-iggrades { margin-top: var(--s-2); }
.narr-iggrades-summary {
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); cursor: pointer; list-style: none;
}
.narr-iggrades-summary::-webkit-details-marker { display: none; }
.narr-iggrades-summary::before { content: '▸ '; }
.narr-iggrades[open] .narr-iggrades-summary::before { content: '▾ '; }
.narr-iggrades-hint { font-weight: 500; text-transform: none; letter-spacing: 0; opacity: .8; }
.narr-iggrades-list { list-style: none; margin: 6px 0 0; padding: 0; }
.narr-iggrade { display: grid; grid-template-columns: minmax(0,1fr) 80px 34px; gap: 8px; align-items: center; padding: 2px 0; }
.narr-iggrade-name { font-size: 12px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.narr-iggrade-count {
  font-size: 10px; font-weight: 700; color: var(--muted);
  background: var(--surface-3); border-radius: var(--r-pill); padding: 0 5px; margin-left: 4px;
}
.narr-iggrade-bar { position: relative; height: 5px; border-radius: var(--r-pill); background: var(--surface-3); overflow: hidden; }
.narr-iggrade-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: var(--r-pill); }
.narr-iggrade[data-stance="bullish"] .narr-iggrade-fill { background: var(--pos); }
.narr-iggrade[data-stance="bearish"] .narr-iggrade-fill { background: var(--neg); }
.narr-iggrade[data-stance="mixed"]   .narr-iggrade-fill { background: var(--muted); }
.narr-iggrade-score {
  font-family: var(--font-mono); font-size: 12px; font-weight: 700;
  font-variant-numeric: tabular-nums; text-align: right; color: var(--muted);
}
.narr-iggrade[data-stance="bullish"] .narr-iggrade-score { color: var(--pos); }
.narr-iggrade[data-stance="bearish"] .narr-iggrade-score { color: var(--neg); }

/* Per-narrative source citations — appears under watchFor/conflicts. Each
   entry is a verified headline that informed the thesis. Hairline divider
   above to separate from the thesis body; tracked-uppercase eyebrow label;
   mono publisher tag + regular-weight title + UTC date so traders can
   recognize the wire at a glance. */
.narr-sources {
  margin-top: var(--s-3);
  padding-top: var(--s-2);
  border-top: 1px dashed var(--hairline);
}
.narr-sources-label {
  display: inline-block;
  margin-bottom: 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--muted);
  font-family: var(--font-mono);
}
.narr-sources-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.narr-source {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 12px;
  line-height: 1.4;
}
.narr-source-pub {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-strong);
  padding: 2px 6px;
  border: 1px solid var(--border);
  border-radius: var(--r-1);
  background: var(--surface-2);
  white-space: nowrap;
}
.narr-source-title {
  flex: 1 1 auto;
  color: var(--text);
  min-width: 0;
}
.narr-source-date {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  font-feature-settings: "tnum" 1;
}

.narr-macro { margin-top: var(--s-4); }
.narr-macro:empty { display: none; }
.narr-macro-details {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-3);
  padding: var(--s-2) var(--s-3);
}
.narr-macro-details > summary {
  cursor: pointer;
  display: flex; align-items: center; gap: var(--s-2);
  list-style: none;
}
.narr-macro-details > summary::-webkit-details-marker { display: none; }
.narr-macro-details > summary::after {
  content: '+';
  margin-left: auto;
  color: var(--muted);
  font-family: var(--font-mono);
  font-weight: 700;
}
.narr-macro-details[open] > summary::after { content: '−'; }
.narr-macro-head {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text); font-weight: 700;
}
.narr-macro-meta { font-size: 12px; color: var(--muted); }
.narr-macro-list {
  margin: var(--s-2) 0 0; padding: 0;
  list-style: none;
  display: flex; flex-direction: column; gap: 4px;
  font-size: var(--fs-sm);
}
.narr-macro-list li {
  display: grid;
  grid-template-columns: auto auto 1fr;
  gap: var(--s-2);
  align-items: baseline;
  padding: 4px 0;
  border-top: 1px solid var(--border);
}
.narr-macro-list li:first-child { border-top: none; }
.narr-macro-date {
  font-family: var(--font-mono);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}
.narr-macro-pub {
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--accent-strong);
  white-space: nowrap;
}
.narr-macro-title { color: var(--text); }
/* Macro headlines link to their source article when the feed gave us a
   permalink. Title links read as body text until hover; a small ↗ marks them. */
a.narr-macro-title {
  text-decoration: none;
  transition: color .12s var(--ease-out);
}
a.narr-macro-title:hover { color: var(--accent-strong); text-decoration: underline; text-underline-offset: 2px; }
a.narr-macro-title:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
.narr-macro-ext { margin-left: 4px; font-size: 10px; color: var(--muted); }
a.narr-macro-title:hover .narr-macro-ext { color: var(--accent-strong); }

/* Macro shell — top-3 pill strip + collapsed full list. Replaces the
   purely-collapsed details so the user can see the freshest macro hits
   without clicking. */
.narr-macro-shell {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-3);
  padding: var(--s-2) var(--s-3) var(--s-3);
  display: flex; flex-direction: column; gap: var(--s-2);
}
.narr-macro-bar {
  display: flex; align-items: baseline; gap: var(--s-2);
  flex-wrap: wrap;
}
.narr-macro-pills {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-2);
}
@media (max-width: 720px) { .narr-macro-pills { grid-template-columns: 1fr; } }
.narr-macro-pill {
  display: flex; flex-direction: column; gap: 4px;
  padding: 8px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-2);
  cursor: default;
  text-decoration: none;
  min-width: 0;
}
.narr-macro-pill-date {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.narr-macro-pill-pub {
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--accent-strong);
}
.narr-macro-pill-title {
  font-size: 13px;
  line-height: 1.35;
  color: var(--text);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}
/* When the feed gave us a permalink the pill is a real <a> — make it feel
   clickable (lift + accent border on hover) and badge the publisher with ↗. */
.narr-macro-pill.is-link {
  cursor: pointer;
  transition: border-color .12s var(--ease-out), background .12s var(--ease-out), transform .12s var(--ease-out), box-shadow .12s var(--ease-out);
}
.narr-macro-pill.is-link:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border-strong));
  background: color-mix(in srgb, var(--accent) 5%, var(--surface));
  transform: translateY(-1px);
}
.narr-macro-pill.is-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.narr-macro-pill-ext { margin-left: 5px; font-size: 10px; color: var(--muted); vertical-align: 1px; }
.narr-macro-pill.is-link:hover .narr-macro-pill-ext { color: var(--accent-strong); }
.narr-macro-shell .narr-macro-details {
  border: 0;
  padding: 0;
  background: transparent;
  border-top: 1px dashed var(--hairline);
  border-radius: 0;
  padding-top: var(--s-2);
}
.narr-macro-shell .narr-macro-details > summary {
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
  letter-spacing: 0.03em;
}
.narr-macro-shell .narr-macro-details > summary::after {
  content: '+';
}
.narr-macro-shell .narr-macro-details[open] > summary::after { content: '−'; }

/* Confidence — replaces the "Conf · High" text tag with a 3-dot indicator
   that visually mirrors signal-strength rows used elsewhere in the app. */
.narr-conf {
  display: inline-flex; align-items: center; gap: 5px;
  height: 22px;
  padding: 0 8px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  background: var(--surface-2);
}
.narr-conf-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--muted);
}
.narr-conf-dots {
  display: inline-flex; align-items: center; gap: 3px;
}
.narr-conf-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--border-strong);
  display: inline-block;
}
.narr-conf-dot.is-on { background: var(--accent-strong); }

/* Fresh badge — narratives whose first detection is today's build. */
.narr-tag.fresh {
  color: var(--accent-strong);
  background: var(--accent-soft);
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
}
.narr.is-fresh .narr-accent {
  background: var(--accent);
  box-shadow: 0 0 6px color-mix(in srgb, var(--accent) 35%, transparent);
}

/* Sector tab stance dot — color-keyed to sectorOverviews[sec].stance so
   users read the top-down view (bullish / bearish / mixed) per sector at
   a glance, without clicking each tab. */
.narr-tab-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--border-strong);
  flex: 0 0 auto;
}
.narr-tab-dot.is-bullish { background: var(--pos); box-shadow: 0 0 4px color-mix(in srgb, var(--pos) 40%, transparent); }
.narr-tab-dot.is-bearish { background: var(--neg); box-shadow: 0 0 4px color-mix(in srgb, var(--neg) 40%, transparent); }
.narr-tab-dot.is-mixed   { background: var(--warn); box-shadow: 0 0 4px color-mix(in srgb, var(--warn) 40%, transparent); }

/* Sector rollup strip — bullish/bearish split, building count, fresh count,
   plus the tickers driving the sector (most-frequently-cited across narratives).
   Sits between the stance pill and the strength bar in the overview banner. */
.narr-sec-stats {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 4px 6px;
  font-size: 12px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.narr-sec-stat strong {
  color: var(--text);
  font-weight: 700;
  font-family: var(--font-mono);
  margin-right: 3px;
}
.narr-sec-stat.is-pos strong   { color: var(--pos); }
.narr-sec-stat.is-neg strong   { color: var(--neg); }
.narr-sec-stat.is-warn strong  { color: var(--warn); }
.narr-sec-stat.is-accent strong{ color: var(--accent-strong); }
.narr-sec-stat-sep {
  color: var(--border-strong);
  margin: 0 1px;
}
.narr-sec-drivers {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 6px;
  margin-top: var(--s-1);
}
.narr-sec-drivers-label {
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--muted);
}
.narr-sec-driver-list {
  display: flex; flex-wrap: wrap; gap: 4px;
  align-items: center;
}
.narr-sec-driver-count {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  margin-right: 4px;
  margin-left: -2px;
  font-variant-numeric: tabular-nums;
}

/* Source compactness — wrap overflow titles and tuck overflow entries
   behind a "+N more" toggle so the source list doesn't dominate the card
   when a narrative has 5+ citations. */
.narr-sources-more {
  margin-top: 4px;
}
.narr-sources-more > summary {
  list-style: none;
  cursor: pointer;
  font-size: 11px;
  color: var(--muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 0;
}
.narr-sources-more > summary::-webkit-details-marker { display: none; }
.narr-sources-more > summary:hover { color: var(--text); }
.narr-sources-more[open] > summary::before { content: '− '; }
.narr-sources-more:not([open]) > summary::before { content: '+ '; }
.narr-sources-more > .narr-sources-list { margin-top: 4px; }
.narr-source-title { word-break: break-word; }

/* === Option eval card === */
.opt-controls {
  display: flex; flex-wrap: wrap; gap: var(--s-2);
  align-items: stretch;
  margin-bottom: var(--s-3);
}
/* The contract-grade controls live inside the Contract grade tab now; the call/put
   segmented sits alone there (the ticker combo stays at the top of the card). */
.opt-controls-contract { margin-bottom: var(--s-2); }
/* Whole-ticker grade headline — the lead element on the Grade-a-ticker page.
   It reuses the pick-card / pillar-panel components, so most styling is
   inherited; these rules just give it breathing room and de-button the symbol. */
.opt-ticker-grade { margin: var(--s-3) 0; }
.opt-ticker-grade[hidden] { display: none; }
.opt-grade-loading {
  padding: var(--s-3); border-radius: var(--r-3);
  border: 1px dashed var(--border); background: var(--surface-2, var(--surface));
  color: var(--muted); font-size: 13px; text-align: center;
}
.opt-grade-headline { margin: 0; }
.opt-grade-headline-sym {
  font-family: var(--font-mono, monospace);
  font-weight: 800; font-size: 18px; letter-spacing: 0.02em;
  color: var(--text);
}
/* Contract-grade section wrapper inside its tab pane. */
.opt-contract-grade { margin: 0; }
.opt-chain-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-2) var(--s-3);
  margin-bottom: var(--s-2);
  padding: 4px 8px;
  margin-inline: -8px;
  border-radius: var(--r-2);
  transition: background .15s var(--ease-out), box-shadow .15s var(--ease-out);
}
.opt-chain-row:hover { background: var(--accent-tint-1); }
.opt-chain-row:focus-within { box-shadow: var(--elev-focus); }
@media (max-width: 480px){ .opt-chain-row { grid-template-columns: 1fr; } }
.field {
  display: flex; flex-direction: column; gap: 4px;
}
.field-label {
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--muted);
}
.field select, .opt-manual-field input, .opt-manual-field select {
  height: 42px; padding: 0 var(--s-3);
  border-radius: var(--r-3);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font: inherit; font-size: var(--fs-md);
  font-variant-numeric: tabular-nums;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field select:focus-visible, .opt-manual-field input:focus-visible, .opt-manual-field select:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
}

/* === Combobox === */
.combo {
  position: relative;
  flex: 1 1 260px; min-width: 200px;
}
.combo input {
  width: 100%; height: 42px;
  padding: 0 36px 0 var(--s-3);
  border-radius: var(--r-3);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font: inherit; font-size: var(--fs-md);
  transition: border-color .15s, box-shadow .15s;
}
.combo input::placeholder { color: var(--muted); opacity: 0.8; }
.combo input:focus-visible { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); }
.combo-clear {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px;
  border: none; background: transparent;
  color: var(--muted);
  font-size: 18px; line-height: 1;
  border-radius: var(--r-1);
  cursor: pointer;
}
.combo-clear:hover { color: var(--text); background: var(--surface-2); }
.combo ul {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px);
  z-index: 20;
  list-style: none; margin: 0; padding: 4px;
  max-height: min(50vh, 320px); overflow: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-3);
  box-shadow: var(--elev-3);
}
.combo ul li {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: var(--s-2);
  align-items: center;
  padding: 8px var(--s-3);
  border-radius: var(--r-1);
  cursor: pointer;
  font-size: var(--fs-sm);
  transition: background .1s var(--ease-out);
}
.combo ul li.is-active, .combo ul li:hover {
  background: var(--accent-soft);
}
.combo ul li.is-active::before {
  content: "";
  position: absolute;
  left: 2px; top: 6px; bottom: 6px;
  width: 2px;
  background: var(--accent);
  border-radius: 1px;
}
.combo-sym { font-weight: 700; color: var(--text-strong); font-variant-numeric: tabular-nums; }
.combo-spot { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.combo-sector {
  font-size: 12px; color: var(--muted);
  padding: 2px 6px; border-radius: var(--r-1);
  background: var(--surface-2);
  border: 1px solid var(--border);
}
.combo-empty { padding: 10px var(--s-3); color: var(--muted); font-size: var(--fs-sm); }

/* === Top Picks "grade any ticker" search === */
.picks-search { margin: 0 0 var(--s-4); }
.picks-search-label {
  display: block;
  font: 600 var(--fs-sm)/1.2 inherit;
  color: var(--text);
  margin: 0 0 6px;
}
/* The .combo defaults to flex:1 for the header layout; here it's a standalone
   field, so cap its width and let it size itself. */
.picks-search .combo { flex: none; max-width: 460px; min-width: 0; }
.picks-search-hint { margin: 6px 0 0; font-size: 13px; color: var(--muted); }
/* Grade chip shown in each search row once grades.json loads — color by sign
   via the shared .sig-pos / .sig-neg / .sig-zero tokens. */
.picks-search-grade {
  font: 700 13px/1 var(--font-mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.picks-search-miss { padding: var(--s-3); color: var(--muted); font-size: var(--fs-sm); }
.picks-search-miss .pick-symbol { margin-left: 4px; }

/* === Segmented control === */
.segmented {
  display: inline-flex;
  padding: 3px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  position: relative;
}
.segmented input {
  position: absolute; opacity: 0; pointer-events: none;
}
.segmented label {
  cursor: pointer;
  padding: 6px 16px;
  font-size: var(--fs-sm); font-weight: 600;
  color: var(--muted);
  border-radius: var(--r-pill);
  transition: color .15s ease, background .15s ease, box-shadow .15s ease;
}
.segmented input:checked + label {
  color: var(--text-strong);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.segmented input:focus-visible + label { box-shadow: var(--focus-ring); }

/* === Status === */
.opt-status {
  font-size: var(--fs-sm);
  min-height: 18px; margin: var(--s-1) 0;
  color: var(--muted);
  display: flex; align-items: center; gap: var(--s-2);
}

/* --- Compare companies (Tools) ---------------------------------------- */
.cmp-controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 8px; }
.cmp-controls .combo { flex: 1 1 180px; min-width: 160px; }
.cmp-btn {
  appearance: none; border: 1px solid var(--border); background: var(--surface);
  color: var(--text-strong); border-radius: var(--r-1); padding: 7px 12px;
  font: 600 13px/1 var(--font-sans); cursor: pointer;
}
.cmp-btn:hover { border-color: var(--accent); }
.cmp-btn-quick { color: var(--accent); }
.cmp-btn-ghost { color: var(--muted); }
.cmp-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.cmp-chips:empty { display: none; }
.cmp-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 6px 4px 10px; border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  border: 1px solid var(--border); font: 600 12px/1 var(--font-sans);
}
.cmp-chip-base { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.cmp-chip-base-tag { font: 700 9px/1 var(--font-sans); text-transform: uppercase; color: var(--accent); letter-spacing: 0.04em; }
.cmp-chip-name { font-weight: 400; color: var(--muted); max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmp-chip-x { appearance: none; border: 0; background: transparent; color: var(--muted); font-size: 16px; line-height: 1; cursor: pointer; padding: 0 2px; }
.cmp-chip-x:hover { color: var(--neg); }
.cmp-summary {
  margin: 8px 0; padding: 10px 12px;
  background: color-mix(in srgb, var(--accent) 4%, var(--surface));
  border: 1px solid var(--border); border-left: 3px solid var(--accent);
  border-radius: var(--r-1);
}
.cmp-summary-head { font: 700 11px/1 var(--font-sans); text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-strong); margin-bottom: 6px; }
.cmp-summary-list { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }
.cmp-summary-list li { font: 400 13px/1.5 var(--font-sans); color: var(--text); }
.cmp-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cmp-table { width: 100%; border-collapse: collapse; font: 400 13px/1.3 var(--font-sans); }
.cmp-table th, .cmp-table td { padding: 7px 10px; text-align: right; border-bottom: 1px solid var(--border); white-space: nowrap; }
.cmp-table thead th { position: sticky; top: 0; background: var(--surface); z-index: 1; vertical-align: bottom; }
.cmp-th-metric, .cmp-td-metric { text-align: left; font-weight: 600; color: var(--text-strong); position: sticky; left: 0; background: var(--surface); }
.cmp-td-metric { color: var(--muted); font-weight: 500; }
.cmp-th-co { min-width: 96px; }
.cmp-th-base { box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--accent) 50%, transparent); }
.cmp-th-sym { font: 700 14px/1 var(--font-sans); color: var(--text-strong); }
.cmp-th-sector { display: block; font: 400 10px/1.2 var(--font-sans); color: var(--muted); margin-top: 2px; white-space: normal; }
.cmp-side { font: 700 9px/1 var(--font-sans); padding: 2px 4px; border-radius: 4px; vertical-align: middle; }
.cmp-side-call { color: var(--pos); background: color-mix(in srgb, var(--pos) 14%, transparent); }
.cmp-side-put { color: var(--neg); background: color-mix(in srgb, var(--neg) 14%, transparent); }
.cmp-td .cmp-val { font-variant-numeric: tabular-nums; font-weight: 600; }
.cmp-leader { background: color-mix(in srgb, var(--pos) 9%, transparent); }
.cmp-leader .cmp-val { color: var(--pos); }
.cmp-delta { display: block; font: 600 10.5px/1.2 var(--font-mono); margin-top: 1px; }
.cmp-d-good { color: var(--pos); }
.cmp-d-bad { color: var(--neg); }
.cmp-d-flat { color: var(--muted); }

/* --- AI CapEx (Macro) ------------------------------------------------- */
.cx-hero {
  display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: flex-end;
  padding: 14px 16px; margin-bottom: 14px;
  background: color-mix(in srgb, var(--accent) 5%, var(--surface));
  border: 1px solid var(--border); border-radius: var(--r-2);
}
.cx-hero-label { font: 600 11px/1 var(--font-sans); text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); margin-bottom: 4px; }
.cx-hero-val { font: 800 30px/1 var(--font-mono); color: var(--text-strong); font-variant-numeric: tabular-nums; }
.cx-hero-sub { font: 600 13px/1.3 var(--font-sans); margin-top: 5px; }
.cx-hero-ttm { margin-left: auto; text-align: right; }
.cx-hero-ttm-val { font: 700 20px/1 var(--font-mono); color: var(--text-strong); }
.cx-hero-note { font: 400 11px/1.3 var(--font-sans); color: var(--muted); margin-top: 2px; }
.cx-up { color: var(--pos); }
.cx-down { color: var(--neg); }
.cx-rows { display: flex; flex-direction: column; gap: 12px; }
.cx-row-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 3px; }
.cx-tkr { font: 700 14px/1 var(--font-sans); color: var(--text-strong); }
.cx-name { font: 400 12px/1 var(--font-sans); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cx-bar-wrap { display: flex; align-items: center; gap: 8px; position: relative; }
.cx-bar { height: 18px; border-radius: 4px; background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 55%, transparent), var(--accent)); min-width: 2px; flex: 0 0 auto; }
.cx-bar-val { font: 700 13px/1 var(--font-mono); color: var(--text-strong); font-variant-numeric: tabular-nums; }
.cx-yoy { font: 700 11px/1 var(--font-sans); padding: 2px 5px; border-radius: 4px; }
.cx-yoy.cx-up { background: color-mix(in srgb, var(--pos) 14%, transparent); }
.cx-yoy.cx-down { background: color-mix(in srgb, var(--neg) 14%, transparent); }
.cx-row-meta { font: 400 11.5px/1.3 var(--font-sans); color: var(--muted); margin-top: 3px; }
.cx-missing { font: 400 12px/1.4 var(--font-sans); color: var(--muted); margin-top: 12px; }
/* Revenue check strip (CapEx vs combined revenue, same fiscal years) */
.cx-revcmp {
  display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: flex-start;
  padding: 12px 16px; margin-bottom: 14px;
  border: 1px solid var(--border); border-radius: var(--r-2);
  background: var(--surface);
}
.cx-revcmp-val { font: 700 18px/1.25 var(--font-mono); color: var(--text-strong); font-variant-numeric: tabular-nums; }
.cx-revcmp-sep { font: 600 11px/1 var(--font-sans); color: var(--muted); }
.cx-revcmp-note { flex-basis: 100%; margin-top: 0; }

/* --- RAM prices (Macro) ------------------------------------------------ */
.rp-hero-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.rp-chip { display: inline-flex; align-items: baseline; gap: 3px; white-space: nowrap; }
.rp-chip-label { font: 600 10px/1 var(--font-sans); color: var(--muted); }
.rp-chart { margin: 0 0 16px; }
.rp-block { margin-bottom: 18px; }
.rp-block-head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px;
  font: 700 13px/1.3 var(--font-sans); color: var(--text-strong);
  padding-bottom: 6px; margin-bottom: 8px; border-bottom: 1px solid var(--border);
}
.rp-block-src { font: 400 11px/1.3 var(--font-sans); color: var(--muted); margin-left: auto; }
.rp-row {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px;
  padding: 7px 2px; border-bottom: 1px dashed color-mix(in srgb, var(--border) 60%, transparent);
}
.rp-row:last-child { border-bottom: none; }
.rp-row-name { font: 600 12.5px/1.3 var(--font-sans); color: var(--text-strong); flex: 1 1 220px; min-width: 0; }
.rp-row-sub { font: 400 11px/1.3 var(--font-sans); color: var(--muted); }
.rp-row-price { font: 700 13px/1 var(--font-mono); color: var(--text-strong); font-variant-numeric: tabular-nums; }
.rp-row-chips { display: inline-flex; flex-wrap: wrap; gap: 5px; margin-left: auto; }

/* --- Capital raises (Macro) ------------------------------------------- */
.cr-rows { display: flex; flex-direction: column; gap: 10px; }
.cr-row { padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--r-1); background: var(--surface); }
.cr-row-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cr-kind { font: 700 10px/1 var(--font-sans); text-transform: uppercase; letter-spacing: 0.03em; padding: 3px 7px; border-radius: 999px; }
.cr-debt { color: var(--neg); background: color-mix(in srgb, var(--neg) 13%, transparent); }
.cr-conv { color: #b8860b; background: color-mix(in srgb, #d4a017 16%, transparent); }
.cr-equity { color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.cr-buyback { color: var(--pos); background: color-mix(in srgb, var(--pos) 14%, transparent); }
.cr-tkr { font: 700 14px/1 var(--font-sans); color: var(--text-strong); }
.cr-name { font: 400 12px/1 var(--font-sans); color: var(--muted); }
.cr-amt { margin-left: auto; font: 700 14px/1 var(--font-mono); color: var(--text-strong); }
.cr-headline { font: 500 13.5px/1.45 var(--font-sans); color: var(--text); margin: 6px 0 4px; }
.cr-headline a { color: var(--text); text-decoration: none; border-bottom: 1px solid var(--border); }
.cr-headline a:hover { color: var(--accent); border-color: var(--accent); }
.cr-meta { font: 400 11.5px/1.3 var(--font-sans); color: var(--muted); }
.cr-filed { color: var(--text-strong); }
.opt-status:empty { display: none; }
.opt-status.err { color: var(--neg); }
.opt-status.ok  { color: var(--pos); }
.opt-status.loading::before {
  content: "";
  width: 10px; height: 10px;
  border-radius: 50%;
  border: 2px solid var(--accent-soft);
  border-top-color: var(--accent);
  animation: opt-status-spin 0.7s linear infinite;
  flex: 0 0 auto;
}
@keyframes opt-status-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .opt-status.loading::before { animation: none; opacity: 0.7; }
}

/* === Unusual options flow === */
.flow-card-header { align-items: center; }
.flow-collapse-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: inherit;
  text-align: left;
  font: inherit;
}
.flow-collapse-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-2); }
.flow-collapse-btn .card-title { margin: 0; }
.flow-chevron {
  color: var(--muted);
  transition: transform .18s ease, color .18s ease;
  flex: 0 0 auto;
}
.flow-collapse-btn:hover .flow-chevron { color: var(--text); }
.flow-collapse-btn[aria-expanded="false"] .flow-chevron { transform: rotate(-90deg); }
.flow-card.is-collapsed { padding-bottom: var(--s-3); }
.flow-body[hidden] { display: none; }

.flow-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  padding: 0 0 var(--s-3);
  margin-bottom: var(--s-3);
}
.flow-search {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-2);
  padding: 4px 10px;
  min-width: 180px;
  flex: 1 1 180px;
  max-width: 260px;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.flow-search:focus-within {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  box-shadow: var(--focus-ring);
}
.flow-search svg { color: var(--muted); flex: 0 0 auto; }
.flow-search input {
  border: 0;
  background: transparent;
  outline: 0;
  width: 100%;
  font: inherit;
  font-size: var(--fs-sm);
  color: var(--text);
}
.flow-search input::placeholder { color: var(--muted); }
.flow-search input::-webkit-search-decoration,
.flow-search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.flow-search-clear {
  background: transparent;
  border: 0;
  color: var(--muted);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 0 2px;
}
.flow-search-clear:hover { color: var(--text); }

.flow-side-filter {
  display: inline-flex;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  padding: 2px;
  gap: 2px;
}
.flow-pill {
  background: transparent;
  border: 1px solid transparent;
  color: var(--muted);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  padding: 4px 12px;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.flow-pill:hover {
  color: var(--text);
  background: color-mix(in srgb, var(--accent) 5%, transparent);
  border-color: var(--hairline);
}
.flow-pill.is-on {
  background: var(--accent-soft);
  color: var(--accent-strong);
  border-color: color-mix(in srgb, var(--accent) 35%, transparent);
}
.flow-pill:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.flow-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-sm);
  color: var(--text);
  cursor: pointer;
  user-select: none;
}
.flow-toggle input { accent-color: var(--accent); margin: 0; }
.flow-toggle-hint { color: var(--muted); font-size: var(--fs-xs); }

.flow-sort {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-sm);
  color: var(--muted);
}
.flow-sort-label { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; }
.flow-sort select {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-2);
  color: var(--text);
  font: inherit;
  font-size: var(--fs-sm);
  padding: 4px 8px;
  cursor: pointer;
}
.flow-sort select:focus-visible { outline: none; box-shadow: var(--focus-ring); border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); }

.flow-action-btn {
  margin-left: auto;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  font: inherit;
  font-size: var(--fs-xs);
  font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--r-2);
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.flow-action-btn:hover { background: var(--surface-2); border-color: var(--border-strong); color: var(--text); }
.flow-action-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* Directional summary bar — call vs put premium split + lean read */
.flow-summary {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-3);
  margin-bottom: var(--s-3);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-3);
}
.flow-summary[hidden] { display: none; }
.flow-sum-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-3);
}
.flow-sum-lean {
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
}
.flow-sum-lean.is-bull { color: var(--pos); background: var(--pos-soft); border-color: color-mix(in srgb, var(--pos) 35%, transparent); }
.flow-sum-lean.is-bear { color: var(--neg); background: var(--neg-soft); border-color: color-mix(in srgb, var(--neg) 35%, transparent); }
.flow-sum-lean.is-neutral { color: var(--muted); background: color-mix(in srgb, var(--surface-3) 70%, transparent); border-color: var(--border); }
.flow-sum-stat { font-size: var(--fs-sm); color: var(--muted); font-variant-numeric: tabular-nums; }
.flow-sum-stat strong { color: var(--text-strong); font-weight: 700; }
.flow-sum-top {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--accent-strong);
  background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius: var(--r-pill);
  padding: 2px 10px;
}
.flow-sum-bar {
  display: flex;
  width: 100%;
  height: 8px;
  border-radius: var(--r-pill);
  overflow: hidden;
  background: var(--surface-3);
}
.flow-sum-bar-call { background: var(--pos); }
.flow-sum-bar-put { background: var(--neg); }
.flow-sum-bar-call, .flow-sum-bar-put { transition: width .2s ease; }
.flow-sum-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-3);
  font-size: var(--fs-xs);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.flow-sum-leg { display: inline-flex; align-items: center; gap: 6px; }
.flow-sum-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.flow-sum-leg.is-call .flow-sum-dot { background: var(--pos); }
.flow-sum-leg.is-put .flow-sum-dot { background: var(--neg); }

/* Volume-to-OI multiple badge on each contract chip */
.flow-voi {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 1px 5px;
  border-radius: var(--r-1);
  color: var(--accent-strong);
  background: var(--accent-soft);
}
.flow-voi.flow-voi-new { color: var(--warn); background: color-mix(in srgb, var(--warn) 18%, transparent); }

.flow-list { display: flex; flex-direction: column; gap: var(--s-2); }
.flow-list:empty { display: none; }
.flow-row {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  background: var(--surface-2);
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  border-radius: var(--r-3);
  transition: border-color .15s ease, background .15s ease;
}
.flow-row:hover { background: color-mix(in srgb, var(--accent) 4%, var(--surface-3)); border-color: var(--border-strong); }
.flow-row.tier-hot { border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.flow-row.is-collapsed { padding-bottom: var(--s-2); }
.flow-row-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  background: transparent;
  border: 0;
  padding: 0;
  color: inherit;
  text-align: left;
  cursor: pointer;
  font: inherit;
  width: 100%;
}
.flow-row-head:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-2); }
.flow-row-chevron {
  color: var(--muted);
  transition: transform .15s ease;
  flex: 0 0 auto;
}
.flow-row-head[aria-expanded="false"] .flow-row-chevron { transform: rotate(-90deg); }
.flow-row-head:hover .flow-row-chevron { color: var(--text); }

@media (max-width: 640px){
  .flow-controls { gap: var(--s-2); }
  .flow-search { min-width: 0; max-width: none; flex: 1 1 100%; }
  .flow-action-btn { margin-left: 0; }
  .flow-sort-label { display: none; }
}
.flow-symbol {
  font-family: var(--font-mono);
  font-size: var(--fs-lg);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-strong);
}
.flow-spot {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.flow-count {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.flow-top {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--accent-strong);
  background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  border-radius: var(--r-pill);
  padding: 2px 8px;
}
/* Per-ticker dealer gamma-exposure strip (net GEX / flip / call+put walls),
   precomputed by the scanner. Compact horizontal mini-metrics that read as
   "stats next to the ticker"; shared by the Unusual flow + Volume tab rows
   (both flex-column with gap, so the strip needs no margin of its own) and
   stays visible when a row's detail is collapsed. */
.flow-gex {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 6px;
}
.flow-gex-tag {
  align-self: center;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
  border: 1px solid var(--border);
  border-radius: var(--r-1, 4px);
  padding: 2px 5px;
}
.flow-gex-metric {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  padding: 2px 9px;
  line-height: 1.5;
}
.flow-gex-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-3);
}
.flow-gex-val {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--text-strong);
  font-variant-numeric: tabular-nums;
}
.flow-gex-metric.is-pos .flow-gex-val { color: var(--up); }
.flow-gex-metric.is-neg .flow-gex-val { color: var(--dn); }
.flow-gex-sub { font-size: 11px; color: var(--text-3); }
@media (max-width: 640px){
  .flow-gex-label { display: none; }
  .flow-gex { gap: 4px; }
  .flow-gex-metric { padding: 2px 7px; }
}
.flow-contracts {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
/* When any contract carries an AI flow-explanation note, switch to a
   vertical stack so each chip + note pair owns its own row. Otherwise
   the dense pill layout keeps the original horizontal wrap. */
.flow-contracts.has-notes {
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}
.flow-contract { display: contents; }
.flow-contracts.has-notes .flow-contract {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.flow-note {
  margin: 0 0 0 4px;
  padding: 6px 10px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
  font-style: italic;
  max-width: 64em;
  background: color-mix(in srgb, var(--accent) 6%, transparent);
  border-left: 2px solid color-mix(in srgb, var(--accent) 35%, transparent);
  border-radius: 0 var(--r-1) var(--r-1) 0;
}
/* The HTML 'hidden' attribute resolves to display:none via the UA stylesheet,
   but `.flow-contracts { display: flex }` is an equally-specific class
   selector that wins the cascade. Restore the collapse behavior explicitly. */
.flow-contracts[hidden] { display: none; }
.flow-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-2);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  font-family: var(--font-mono);
  color: var(--text);
  transition: border-color .12s ease, background .12s ease, transform .12s ease;
}
.flow-chip:hover {
  background: var(--surface-3);
  transform: translateY(-1px);
}
.flow-chip.call {
  border-color: color-mix(in srgb, var(--pos) 35%, transparent);
}
.flow-chip.call:hover {
  border-color: color-mix(in srgb, var(--pos) 60%, transparent);
}
.flow-chip.put {
  border-color: color-mix(in srgb, var(--neg) 35%, transparent);
}
.flow-chip.put:hover {
  border-color: color-mix(in srgb, var(--neg) 60%, transparent);
}
.flow-chip.tier-hot {
  background: color-mix(in srgb, var(--accent-soft) 70%, var(--surface-2));
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
}
.flow-side {
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.06em;
  padding: 1px 5px;
  border-radius: var(--r-1);
}
.flow-chip.call .flow-side { color: var(--pos); background: var(--pos-soft); }
.flow-chip.put  .flow-side { color: var(--neg); background: var(--neg-soft); }
.flow-strike { font-weight: 700; color: var(--text-strong); }
.flow-exp { color: var(--muted); }
.flow-stats {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 0 6px;
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
  color: var(--text);
}
.flow-sep { color: var(--muted); }
.flow-oi { color: var(--muted); }
.flow-delta {
  font-weight: 700;
  color: var(--accent-strong);
  font-size: 12px;
}
.flow-chip.tier-warm .flow-delta { color: var(--warn); }
.flow-chip.tier-mild .flow-delta { color: var(--text); }
.flow-otm {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  padding: 1px 5px;
  border-radius: var(--r-1);
  background: color-mix(in srgb, var(--surface-3) 60%, transparent);
  letter-spacing: 0.02em;
}
.flow-dte {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  padding: 1px 5px;
  border-radius: var(--r-1);
  letter-spacing: 0.02em;
}
.flow-dte.near {
  color: var(--warn);
  background: color-mix(in srgb, var(--warn) 18%, transparent);
}
.flow-prem {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  margin-left: 6px;
  letter-spacing: 0.01em;
}
/* Per-contract intraday price sparkline (tapeSparkSvg). The svg colors itself
   via the tape-spark-on/off tone; this wrapper just aligns it in the chip. */
.flow-spark {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
}
.flow-tape {
  font-size: 11px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 4px;
  margin-left: 6px;
  letter-spacing: 0.06em;
  color: var(--muted);
  background: color-mix(in srgb, var(--surface-3) 60%, transparent);
}
.flow-tape.tape-ask { color: var(--pos); background: color-mix(in srgb, var(--pos) 22%, transparent); }
.flow-tape.tape-bid { color: var(--neg); background: color-mix(in srgb, var(--neg) 22%, transparent); }
.flow-tape.tape-abv { color: var(--pos); background: color-mix(in srgb, var(--pos) 12%, transparent); }
.flow-tape.tape-blw { color: var(--neg); background: color-mix(in srgb, var(--neg) 12%, transparent); }
.flow-repeat {
  font-size: 11px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 4px;
  margin-left: 6px;
  letter-spacing: 0.04em;
  color: var(--warn);
  background: color-mix(in srgb, var(--warn) 22%, transparent);
}
.flow-flagged {
  font-size: 11px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 4px;
  margin-left: 6px;
  letter-spacing: 0.02em;
  color: var(--muted);
  background: color-mix(in srgb, var(--surface-3) 60%, transparent);
  white-space: nowrap;
}
.flow-chip.is-repeat {
  outline: 1px solid color-mix(in srgb, var(--warn) 55%, transparent);
  outline-offset: -1px;
}
.flow-grade-btn {
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--accent-strong);
  background: var(--accent-soft);
  text-decoration: none;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  transition: background .12s ease, border-color .12s ease;
  white-space: nowrap;
}
.flow-grade-btn:hover {
  background: color-mix(in srgb, var(--accent-soft) 65%, var(--accent) 18%);
  border-color: color-mix(in srgb, var(--accent) 60%, transparent);
}
.flow-empty {
  color: var(--muted);
  font-size: var(--fs-sm);
  padding: var(--s-2) 0;
}

/* === Per-ticker narrative chips === */
.opt-narr-chips {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin: var(--s-2) 0;
  align-items: center;
}
.opt-narr-chips-label {
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--muted); margin-right: 2px;
}
.opt-narr-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; padding: 3px 10px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text); font-weight: 600;
}
.opt-narr-chip.long  { border-color: color-mix(in srgb, var(--pos) 35%, transparent); }
.opt-narr-chip.short { border-color: color-mix(in srgb, var(--neg) 35%, transparent); }
.opt-narr-chip-side {
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  padding: 2px 6px; border-radius: var(--r-pill);
}
.opt-narr-chip.long  .opt-narr-chip-side { color: var(--pos); background: var(--pos-soft); }
.opt-narr-chip.short .opt-narr-chip-side { color: var(--neg); background: var(--neg-soft); }

/* === Live spot pill === */
.opt-live {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin: var(--s-2) 0;
  font-variant-numeric: tabular-nums;
}
.opt-live-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 9px; border-radius: var(--r-pill);
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  border: 1px solid var(--border);
  background: var(--surface-2); color: var(--muted);
}
.opt-live-pill::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--muted);
}
.opt-live-pill.live     { color: var(--pos);  background: var(--pos-soft);  border-color: color-mix(in srgb, var(--pos) 35%, transparent); }
.opt-live-pill.live::before { background: var(--pos); box-shadow: 0 0 0 0 color-mix(in srgb, var(--pos) 60%, transparent); animation: opt-live-pulse 1.6s ease-out infinite; }
.opt-live-pill.pre,
.opt-live-pill.post     { color: var(--warn); background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 40%, transparent); }
.opt-live-pill.pre::before, .opt-live-pill.post::before { background: var(--warn); }
.opt-live-pill.delayed  { color: var(--muted); background: var(--surface-3); }
.opt-live-pill.checking { color: var(--muted); background: var(--surface-3); }
.opt-live-pill.checking::before {
  background: var(--muted); animation: opt-live-pulse 1s ease-in-out infinite alternate;
}
@keyframes opt-live-pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 55%, transparent); }
  70%  { box-shadow: 0 0 0 6px color-mix(in srgb, currentColor 0%,  transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 0%,  transparent); }
}
.opt-live-sym   { font-size: 13px; font-weight: 700; color: var(--text-strong); letter-spacing: 0.02em; }
.opt-live-spot  { font-size: var(--fs-md); font-weight: 700; color: var(--text-strong); }
.opt-live-chg   { font-size: 13px; font-weight: 600; }
.opt-live-chg.up   { color: var(--pos); }
.opt-live-chg.down { color: var(--neg); }
.opt-live-refresh {
  display: inline-flex; align-items: center;
  margin-top: 6px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.02em;
  color: var(--muted);
}
.opt-live-refresh::before {
  content: ''; display: inline-block;
  width: 6px; height: 6px; margin-right: 6px;
  border-radius: 50%; background: var(--muted);
}
.opt-live-refresh.on { color: var(--pos); }
.opt-live-refresh.on::before {
  background: var(--pos);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--pos) 60%, transparent);
  animation: opt-live-pulse 1.6s ease-out infinite;
}

/* === Max pain card === */
.opt-max-pain {
  margin: var(--s-3) 0 var(--s-3);
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  border-radius: var(--r-3);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface-2) 92%, transparent), color-mix(in srgb, var(--surface-2) 60%, transparent)),
    var(--surface-2);
  font-variant-numeric: tabular-nums;
}
.opt-max-pain-head {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-bottom: 6px;
}
.opt-max-pain-label {
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--muted);
}
.opt-max-pain-exp {
  font-size: 12px; font-weight: 600;
  color: var(--text);
  padding: 2px 9px; border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--surface-3) 80%, transparent);
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
}
.opt-max-pain-body {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px;
}
.opt-max-pain-strike {
  font-size: 24px; font-weight: 700; letter-spacing: -0.01em;
  color: var(--text-strong);
  font-feature-settings: "tnum" 1;
}
.opt-max-pain-strike.up   { color: var(--pos); }
.opt-max-pain-strike.down { color: var(--neg); }
.opt-max-pain-strike.flat { color: var(--text-strong); }
.opt-max-pain-delta {
  font-size: 13px; color: var(--muted);
}
.opt-max-pain-delta.up   { color: color-mix(in srgb, var(--pos) 75%, var(--text)); }
.opt-max-pain-delta.down { color: color-mix(in srgb, var(--neg) 75%, var(--text)); }
.opt-max-pain-delta b { color: inherit; font-weight: 700; }
.opt-max-pain-meta {
  margin-top: 4px;
  font-size: 12px; color: var(--muted);
  letter-spacing: 0.03em;
}

/* === Top-Picks grade banner === */
/* The best call/put the Top Picks engine baked for this ticker, graded with
   the exact picks criteria. Accent-tinted to read as a featured highlight;
   the inner card reuses the .pick-contract* / .pick-qchip* / .pick-stat*
   styles from the Picks tab so it looks identical to a pick card. */
.opt-toppick {
  margin: var(--s-3) 0;
  padding: 12px 14px;
  border: 1px solid var(--accent-line);
  border-radius: var(--r-3);
  background:
    linear-gradient(180deg, var(--accent-tint-1), transparent),
    var(--surface-2);
}
.opt-toppick-head {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: 8px;
  margin-bottom: 8px;
}
.opt-toppick-title {
  font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--accent-strong);
}
.opt-toppick-asof {
  font-size: 12px; color: var(--muted);
  letter-spacing: 0.02em;
}
/* The pick-contract card already carries its own margin-top inside a
   pick-card; standalone in the banner it sits flush under the header. */
.opt-toppick .pick-contract { margin-top: 0; }
.opt-toppick-empty {
  font-size: 13px; line-height: 1.5; color: var(--text-2);
}
.opt-toppick-crit {
  display: block; margin-top: 3px;
  font-size: 12px; color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* === Technical signals card === */
.opt-tech {
  margin: var(--s-3) 0;
  padding: var(--s-3) var(--s-3) var(--s-2);
  border: 1px solid var(--border);
  border-radius: var(--r-3);
  background: var(--surface-2);
}

/* --- Implied vol card ---------------------------------------------------- */
.opt-iv {
  margin: var(--s-3) 0;
  padding: var(--s-3) var(--s-3) var(--s-2);
  border: 1px solid var(--border);
  border-radius: var(--r-3);
  background: var(--surface-2);
}
.opt-iv[hidden] { display: none; }
.opt-iv-head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2);
  margin-bottom: var(--s-2);
  justify-content: space-between;
}
.opt-iv-title {
  margin: 0; font-size: var(--fs-md); font-weight: 700;
  color: var(--text-strong); letter-spacing: 0.01em;
}
.opt-iv-rank {
  font: 600 12px/1 var(--font-mono);
  color: var(--muted);
  letter-spacing: .03em;
}
.opt-iv-rank-rich { color: var(--neg); }
.opt-iv-rank-cheap { color: var(--pos); }
.opt-iv-rank-normal { color: var(--text); }
.opt-iv-term { margin: var(--s-2) 0; }
.opt-iv-svg {
  width: 100%;
  max-width: 480px;
  height: auto;
  font-family: var(--font-mono);
  cursor: crosshair;
}
.opt-iv-hit { fill: transparent; }
.opt-iv-hover-line {
  stroke: var(--muted);
  stroke-width: 1;
  stroke-dasharray: 2 2;
  opacity: 0.7;
  pointer-events: none;
}
.opt-iv-hover-dot {
  fill: var(--accent);
  stroke: var(--surface-2);
  stroke-width: 1.5;
  pointer-events: none;
}
.opt-iv-hover-label {
  fill: var(--text-strong);
  font: 700 10px var(--font-mono);
  pointer-events: none;
}
.opt-iv-line {
  stroke: var(--accent);
  stroke-width: 1.8;
}
.opt-iv-dots circle {
  fill: var(--accent);
}
.opt-iv-axis {
  fill: var(--muted);
  font-size: 10px;
}
.opt-iv-empty {
  padding: var(--s-3);
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}
.opt-iv-foot {
  font-size: 11px;
  color: var(--muted);
  margin: var(--s-2) 0 0;
  line-height: 1.4;
}

.opt-tech-head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2);
  margin-bottom: var(--s-2);
}
.opt-tech-title {
  margin: 0; font-size: var(--fs-md); font-weight: 700;
  color: var(--text-strong); letter-spacing: 0.01em;
}
.opt-tech-sub {
  font-size: 12px; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600;
}
.opt-tech-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: var(--s-2);
}
.opt-tech-card {
  display: flex; flex-direction: column; gap: 4px;
  padding: var(--s-2) var(--s-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-2);
  min-width: 0;
}
.opt-tech-label {
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--muted);
  display: flex; align-items: center;
}
.opt-tech-value {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px;
  font-variant-numeric: tabular-nums;
}
.opt-tech-num {
  font-size: var(--fs-xl); font-weight: 700; color: var(--text-strong);
  line-height: 1.1;
}
.opt-tech-vsub {
  font-size: 12px; color: var(--muted);
  text-transform: none; letter-spacing: 0; font-weight: 500;
}
.opt-tech-state { display: flex; align-items: center; gap: 6px; }
.opt-tech-pill {
  display: inline-block;
  padding: 2px 8px; border-radius: var(--r-pill);
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em;
  border: 1px solid var(--border);
  background: var(--surface-2); color: var(--text);
}
.opt-tech-pill.pos  { color: var(--pos);  background: var(--pos-soft);  border-color: color-mix(in srgb, var(--pos) 35%, transparent); }
.opt-tech-pill.warn { color: var(--warn); background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 40%, transparent); }
.opt-tech-pill.fair { color: var(--muted); background: var(--surface-3); }
.opt-tech-note {
  font-size: 12px; color: var(--muted); line-height: 1.4;
}
.opt-tech-foot {
  font-size: 12px; color: var(--muted);
  margin: var(--s-2) 0 0; line-height: 1.4;
}

/* AI-identified chart pattern banner — spans the full grid width above the
   indicator cards. The left border colour encodes the directional bias. */
.opt-tech-chart {
  position: relative;
  grid-column: 1 / -1;
  display: flex; flex-direction: column; gap: 8px;
  padding: var(--s-2) var(--s-3) var(--s-3);
  margin-bottom: var(--s-1);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-2);
}
.opt-tech-chart-head {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 8px;
}
.opt-tech-chart-title {
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--muted);
}
.opt-pc-legend { display: flex; flex-wrap: wrap; gap: 10px; }
.opt-pc-leg {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.opt-pc-key { width: 12px; height: 3px; border-radius: 2px; display: inline-block; }
.opt-pc-key-close  { background: var(--text-strong); }
.opt-pc-key-sma50  { background: var(--info); }
.opt-pc-key-sma200 { background: var(--accent); }
.opt-pc-key-spot   { background: var(--neg); }
.opt-pc-key-rsi    { background: var(--warn); }
.opt-pc-svg { width: 100%; height: auto; display: block; }
.opt-pc-grid { stroke: var(--border); stroke-width: 1; }
.opt-pc-band { fill: color-mix(in srgb, var(--text-strong) 7%, transparent); stroke: none; }
.opt-pc-close  { stroke: var(--text-strong); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.opt-pc-sma50  { stroke: var(--info); stroke-width: 1.2; vector-effect: non-scaling-stroke; opacity: 0.95; }
.opt-pc-sma200 { stroke: var(--accent); stroke-width: 1.2; vector-effect: non-scaling-stroke; opacity: 0.95; }
.opt-pc-spot   { stroke: var(--neg); stroke-width: 1; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; opacity: 0.8; }
.opt-pc-vol    { stroke: var(--muted); opacity: 0.32; }
/* RSI(14) sub-panel below the volume strip. */
.opt-pc-rsi { stroke: var(--warn); stroke-width: 1.3; vector-effect: non-scaling-stroke; opacity: 0.95; }
.opt-pc-rsi-grid { stroke: var(--border); stroke-width: 1; stroke-dasharray: 3 3; opacity: 0.7; }
.opt-pc-rsi-grid.is-mid { stroke-dasharray: none; opacity: 0.4; }
.opt-pc-rsi-zone { fill: var(--text-strong); opacity: 0.04; }
.opt-pc-rsi-ylabel { fill: var(--muted); font-size: 10px; text-anchor: end; font-variant-numeric: tabular-nums; }
.opt-pc-rsi-tag { fill: var(--muted); font-size: 10px; letter-spacing: 0.04em; }
.opt-pc-ylabel, .opt-pc-xlabel { fill: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.opt-pc-ylabel { text-anchor: end; }
.opt-pc-spotlabel { fill: var(--neg); font-size: 11px; text-anchor: end; font-variant-numeric: tabular-nums; }
/* Analyst price-forecast cone (1Y range) — green upside / red downside wedges
   fanning from the current price to the analyst high/avg/low 1-year targets. */
.opt-pc-key-fan { background: linear-gradient(90deg, var(--pos), var(--neg)); }
.opt-pc-fan-area { stroke: none; }
.opt-pc-fan-up-0 { stop-color: var(--pos); stop-opacity: 0.05; }
.opt-pc-fan-up-1 { stop-color: var(--pos); stop-opacity: 0.32; }
.opt-pc-fan-dn-0 { stop-color: var(--neg); stop-opacity: 0.05; }
.opt-pc-fan-dn-1 { stop-color: var(--neg); stop-opacity: 0.32; }
.opt-pc-fan-hi  { stroke: var(--pos); stroke-width: 1.3; vector-effect: non-scaling-stroke; opacity: 0.9; }
.opt-pc-fan-lo  { stroke: var(--neg); stroke-width: 1.3; vector-effect: non-scaling-stroke; opacity: 0.9; }
.opt-pc-fan-avg { stroke: var(--muted); stroke-width: 1.1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; opacity: 0.9; }
.opt-pc-fan-sep { stroke: var(--border); stroke-width: 1; vector-effect: non-scaling-stroke; opacity: 0.6; }
.opt-pc-fan-origin { fill: var(--text-strong); stroke: var(--surface); stroke-width: 1.5; }
.opt-pc-fan-cur { fill: var(--muted); font-size: 10px; font-weight: 600; font-variant-numeric: tabular-nums; }
.opt-pc-fan-pill rect { fill: var(--surface-2); stroke: var(--border); stroke-width: 1; }
.opt-pc-fan-pill.up rect  { fill: color-mix(in srgb, var(--pos) 16%, var(--surface-2)); stroke: color-mix(in srgb, var(--pos) 50%, transparent); }
.opt-pc-fan-pill.dn rect  { fill: color-mix(in srgb, var(--neg) 16%, var(--surface-2)); stroke: color-mix(in srgb, var(--neg) 50%, transparent); }
.opt-pc-fan-pill-t { font-size: 9px; font-weight: 700; font-variant-numeric: tabular-nums; fill: var(--text-strong); }
.opt-pc-fan-pill.up .opt-pc-fan-pill-t { fill: var(--pos); }
.opt-pc-fan-pill.dn .opt-pc-fan-pill-t { fill: var(--neg); }
.opt-pc-fan-pill.avg .opt-pc-fan-pill-t { fill: var(--text); }
.opt-pc-fan-pill-p { font-size: 9px; font-weight: 600; font-variant-numeric: tabular-nums; fill: var(--text); }
.opt-tech-chart-foot { font-size: 12px; color: var(--muted); line-height: 1.4; }

/* Hover crosshair + tooltip — the hit rect catches moves over empty gaps; the
   overlay group is positioned onto the nearest bar by attachPriceChartHover. */
.opt-pc-hit { fill: transparent; }
.opt-pc-hover { pointer-events: none; }
.opt-pc-cross-x, .opt-pc-cross-y {
  stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 3;
  opacity: 0.7; vector-effect: non-scaling-stroke;
}
.opt-pc-cross-dot { fill: var(--text-strong); stroke: var(--surface); stroke-width: 1.5; }
.opt-pc-tip {
  position: absolute; left: 0; top: 0; pointer-events: none; z-index: 5;
  background: var(--surface-3); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: var(--r-2);
  padding: 6px 8px; font-size: 0.74rem; line-height: 1.3;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); white-space: nowrap;
}
.opt-pc-tip[hidden] { display: none; }
.opt-pc-tip-head { font: 700 12px/1.2 var(--font-mono); color: var(--text-strong); margin-bottom: 3px; }
.opt-pc-tip-row { display: flex; justify-content: space-between; gap: 14px; }
.opt-pc-tip-row span:first-child { color: var(--muted); }
.opt-pc-tip-row span:last-child { font-variant-numeric: tabular-nums; font-weight: 600; }

/* Range tabs (1M/3M/1Y/MAX) — CSS-only switching via hidden radios. */
.opt-pc-radio { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.opt-pc-ranges { display: flex; gap: 2px; }
.opt-pc-tab {
  font-size: 12px; font-weight: 700; letter-spacing: 0.03em;
  color: var(--muted); padding: 3px 9px; border-radius: var(--r-1);
  cursor: pointer; user-select: none;
}
.opt-pc-tab:hover { color: var(--text-strong); background: var(--surface-2); }
.opt-pc-chart { display: none; position: relative; }
.opt-pc-chart .opt-pc-legend { margin-bottom: 6px; }
/* Show the chart + highlight the tab matching the checked radio. */
#opt-pc-r-1w:checked ~ .opt-pc-charts .opt-pc-chart-1w,
#opt-pc-r-1m:checked ~ .opt-pc-charts .opt-pc-chart-1m,
#opt-pc-r-3m:checked ~ .opt-pc-charts .opt-pc-chart-3m,
#opt-pc-r-1y:checked ~ .opt-pc-charts .opt-pc-chart-1y { display: block; }
#opt-pc-r-1w:checked ~ .opt-tech-chart-head .opt-pc-tab[for="opt-pc-r-1w"],
#opt-pc-r-1m:checked ~ .opt-tech-chart-head .opt-pc-tab[for="opt-pc-r-1m"],
#opt-pc-r-3m:checked ~ .opt-tech-chart-head .opt-pc-tab[for="opt-pc-r-3m"],
#opt-pc-r-1y:checked ~ .opt-tech-chart-head .opt-pc-tab[for="opt-pc-r-1y"] {
  color: var(--accent-fg); background: var(--accent);
}
#opt-pc-r-1w:focus-visible ~ .opt-tech-chart-head .opt-pc-tab[for="opt-pc-r-1w"],
#opt-pc-r-1m:focus-visible ~ .opt-tech-chart-head .opt-pc-tab[for="opt-pc-r-1m"],
#opt-pc-r-3m:focus-visible ~ .opt-tech-chart-head .opt-pc-tab[for="opt-pc-r-3m"],
#opt-pc-r-1y:focus-visible ~ .opt-tech-chart-head .opt-pc-tab[for="opt-pc-r-1y"] {
  outline: 2px solid var(--accent-glow); outline-offset: 1px;
}

.opt-tech-pattern {
  grid-column: 1 / -1;
  display: flex; flex-direction: column; gap: 6px;
  padding: var(--s-2) var(--s-3);
  margin-bottom: var(--s-1);
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--muted);
  border-radius: var(--r-2);
}
.opt-tech-pattern.pos  { border-left-color: var(--pos); }
.opt-tech-pattern.neg  { border-left-color: var(--neg); }
.opt-tech-pattern-head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2);
}
.opt-tech-pattern-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--muted);
  display: flex; align-items: center;
}
.opt-tech-pattern-name {
  font-size: var(--fs-lg); font-weight: 700; color: var(--text-strong);
}
.opt-tech-pattern-type {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  padding: 2px 8px; border-radius: var(--r-pill);
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text);
}
.opt-tech-pattern-type.pos { color: var(--pos); background: var(--pos-soft); border-color: color-mix(in srgb, var(--pos) 35%, transparent); }
.opt-tech-pattern-type.neg { color: var(--neg); background: var(--neg-soft); border-color: color-mix(in srgb, var(--neg) 35%, transparent); }
.opt-tech-pattern-conf {
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--muted);
}
.opt-tech-pattern-body { font-size: 13px; color: var(--text); line-height: 1.5; }
.opt-tech-pattern-signal { font-size: 13px; color: var(--text); line-height: 1.5; }
.opt-tech-pattern-signal-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--muted); margin-right: 6px;
}
.opt-tech-pattern-foot { font-size: 11px; color: var(--muted); line-height: 1.4; }

/* Forming (early-warning) vs confirmed. A forming pattern is unconfirmed, so it
   reads as a caution (accent/gold) rather than a hard pos/neg signal. */
.opt-tech-pattern.forming { border-left-color: var(--accent); }
.opt-tech-pattern-stage {
  font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em;
  padding: 2px 8px; border-radius: var(--r-pill); white-space: nowrap;
}
.opt-tech-pattern-stage.forming { color: var(--accent-fg); background: var(--accent); }
.opt-tech-pattern-stage.confirmed {
  color: var(--pos); background: var(--pos-soft);
  border: 1px solid color-mix(in srgb, var(--pos) 35%, transparent);
}
.opt-tech-pattern-lvls {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 6px 16px; padding: 8px 10px; margin-top: 2px;
  background: var(--surface-2); border-radius: var(--r-1);
}
.opt-tech-pattern-lvl { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.opt-tech-pattern-lvl-k {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--muted);
}
.opt-tech-pattern-lvl-v {
  font-size: 13px; font-weight: 600; color: var(--text-strong);
  font-variant-numeric: tabular-nums;
}

/* === Fundamentals + earnings panel === */
.opt-fund {
  margin-top: var(--s-4);
  padding: var(--s-4);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-3);
}
.opt-fund-head {
  display: flex; align-items: center; gap: var(--s-3);
  flex-wrap: wrap;
  margin-bottom: var(--s-3);
}
.opt-fund-title {
  font-size: var(--fs-md); font-weight: 700; margin: 0;
  color: var(--text-strong);
}
.opt-fund-verdict {
  display: inline-flex; align-items: center;
  padding: 4px 10px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  border-radius: var(--r-pill);
  background: var(--surface-3); color: var(--muted);
  border: 1px solid var(--border);
}
.opt-fund-verdict.strong { color: var(--pos); background: var(--pos-soft); border-color: color-mix(in srgb, var(--pos) 35%, transparent); }
.opt-fund-verdict.weak   { color: var(--neg); background: var(--neg-soft); border-color: color-mix(in srgb, var(--neg) 35%, transparent); }
.opt-fund-verdict.mixed  { color: var(--warn); background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 40%, transparent); }
.opt-fund-summary {
  margin: 0 0 var(--s-3);
  font-size: var(--fs-md); line-height: 1.5; color: var(--text);
}
.opt-fund-recap {
  margin: 0 0 var(--s-3);
  padding: var(--s-2) var(--s-3);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-2);
  font-size: var(--fs-sm); color: var(--text); line-height: 1.5;
}
.opt-fund-recap-label {
  display: inline-block;
  margin-right: 6px;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--muted);
}
.opt-fund-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3);
  margin-bottom: var(--s-4);
}
@media (max-width: 640px) {
  .opt-fund-columns { grid-template-columns: 1fr; }
}
.opt-fund-col {
  padding: var(--s-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-2);
}
.opt-fund-col.opt-fund-pos { border-left: 3px solid var(--pos); }
.opt-fund-col.opt-fund-neg { border-left: 3px solid var(--neg); }
.opt-fund-col-head {
  font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  margin-bottom: var(--s-2);
}
.opt-fund-pos .opt-fund-col-head { color: var(--pos); }
.opt-fund-neg .opt-fund-col-head { color: var(--neg); }
.opt-fund-list {
  margin: 0; padding-left: 18px;
  font-size: var(--fs-sm); line-height: 1.5; color: var(--text);
}
.opt-fund-list li { margin-bottom: 6px; }
.opt-fund-list li:last-child { margin-bottom: 0; }
.opt-fund-list li.opt-fund-empty { color: var(--muted); font-style: italic; list-style: none; margin-left: -18px; }
.opt-fund-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--s-2);
}
.opt-fund-metric {
  padding: var(--s-2) var(--s-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-2);
}
.opt-fund-metric.tone-pos  { border-color: color-mix(in srgb, var(--pos)  35%, var(--border)); }
.opt-fund-metric.tone-neg  { border-color: color-mix(in srgb, var(--neg)  35%, var(--border)); }
.opt-fund-metric.tone-warn { border-color: color-mix(in srgb, var(--warn) 35%, var(--border)); }
.opt-fund-metric-label {
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--muted); margin-bottom: 2px;
}
.opt-fund-metric-value {
  font-size: var(--fs-md); font-weight: 600; color: var(--text-strong);
  font-variant-numeric: tabular-nums;
}
.opt-fund-metric.tone-pos  .opt-fund-metric-value { color: var(--pos); }
.opt-fund-metric.tone-neg  .opt-fund-metric-value { color: var(--neg); }
.opt-fund-metric.tone-warn .opt-fund-metric-value { color: var(--warn); }
.opt-fund-metric-sub {
  display: inline-block; margin-left: 4px;
  font-size: 12px; font-weight: 500; color: var(--muted);
}
.opt-fund-foot {
  font-size: 12px; color: var(--muted);
  margin: var(--s-3) 0 0; line-height: 1.4;
}

/* === Earnings history card (Fundamentals tab) === */
.opt-fund-ehx {
  margin-top: var(--s-4);
  padding: var(--s-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-2);
}
.opt-ehx-head {
  display: flex; align-items: baseline; gap: var(--s-2);
  margin-bottom: var(--s-2);
}
.opt-ehx-title {
  font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-strong);
}
.opt-ehx-sub { font-size: 12px; color: var(--muted); }
.opt-ehx-next {
  margin-bottom: var(--s-2);
  padding: var(--s-2) var(--s-3);
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: var(--r-2);
}
.opt-ehx-next-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--muted); margin-bottom: 4px;
}
.opt-ehx-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.opt-ehx-chip {
  padding: 2px 8px;
  font-size: 12px; font-weight: 600; color: var(--text);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-pill);
  font-variant-numeric: tabular-nums;
}
.opt-ehx-chip.warn { color: var(--warn); background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 40%, transparent); }
.opt-ehx-chip-sub { font-weight: 500; color: var(--muted); }
.opt-ehx-verdict {
  margin: var(--s-2) 0 0;
  font-size: var(--fs-sm); line-height: 1.5; color: var(--text);
}
.opt-ehx-recap {
  display: flex; flex-wrap: wrap; gap: 4px 14px;
  margin-bottom: var(--s-2);
  font-size: 12px; color: var(--muted);
}
.opt-ehx-stat b { font-weight: 700; color: var(--text-strong); font-variant-numeric: tabular-nums; }
.opt-ehx-tablewrap { overflow-x: auto; }
.opt-ehx-table {
  width: 100%; border-collapse: collapse;
  font-size: 13px; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.opt-ehx-table th {
  padding: 6px 8px;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--muted); text-align: right;
  border-bottom: 1px solid var(--border);
}
.opt-ehx-table th:nth-child(-n+3) { text-align: left; }
.opt-ehx-table td {
  padding: 6px 8px;
  color: var(--text);
  border-bottom: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
}
.opt-ehx-table tbody tr:last-child td { border-bottom: 0; }
.opt-ehx-num { text-align: right; }
.opt-ehx-pos { color: var(--pos); }
.opt-ehx-neg { color: var(--neg); }
.opt-ehx-cell-sub { font-size: 11px; color: var(--muted); }
.opt-ehx-cell-sub.opt-ehx-pos { color: var(--pos); }
.opt-ehx-cell-sub.opt-ehx-neg { color: var(--neg); }
.opt-ehx-foot {
  margin: var(--s-2) 0 0;
  font-size: 11px; color: var(--muted); line-height: 1.4;
}

/* === Robinhood-style history charts === */
.opt-fund-charts {
  margin-top: var(--s-4);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--s-3);
}
.opt-fund-eh {
  position: relative;
  padding: var(--s-4) var(--s-3) var(--s-3);
  border: 1px solid var(--border);
  border-radius: var(--r-3);
  background: var(--surface);
}
.opt-fund-eh-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s-2); margin-bottom: 2px;
}
.opt-fund-eh-title {
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--muted);
}
.opt-fund-eh-value {
  display: inline-flex; align-items: baseline; gap: 6px;
  font-variant-numeric: tabular-nums;
}
.opt-fund-eh-now {
  font-size: var(--fs-lg); font-weight: 700; color: var(--text-strong);
  letter-spacing: -0.01em;
  font-family: var(--font-mono);
}
.opt-fund-eh-chg {
  font-size: 12px; font-weight: 700;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.opt-fund-eh-chg.up   { color: var(--pos); }
.opt-fund-eh-chg.down { color: var(--neg); }
.opt-fund-eh.is-hovering .opt-fund-eh-value { visibility: hidden; }
.opt-fund-eh-readout {
  position: absolute;
  top: var(--s-3); right: var(--s-3);
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 4px 8px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-2);
  font-size: 12px;
  pointer-events: none;
  z-index: 2;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.opt-fund-eh-readout-label { color: var(--muted); font-weight: 600; letter-spacing: 0.02em; }
.opt-fund-eh-readout-value { color: var(--text-strong); font-weight: 700; font-family: var(--font-mono); }
.opt-fund-eh-svg {
  width: 100%; height: auto; display: block;
  overflow: visible;
}
.opt-fund-eh-axis {
  font-size: 10px; fill: var(--muted);
  font-family: var(--font-sans);
}
.opt-fund-eh-axis.fwd { fill: color-mix(in srgb, var(--muted) 70%, transparent); }
.opt-fund-eh-line {
  fill: none; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.opt-fund-eh-line.up   { stroke: var(--pos); }
.opt-fund-eh-line.down { stroke: var(--neg); }
.opt-fund-eh-area      { opacity: 0.9; }
.opt-fund-eh-stop1.up    { stop-color: var(--pos); stop-opacity: 0.28; }
.opt-fund-eh-stop1.down  { stop-color: var(--neg); stop-opacity: 0.28; }
.opt-fund-eh-stop2       { stop-color: var(--pos); stop-opacity: 0; }
.opt-fund-eh-fwdline {
  fill: none; stroke-width: 1.5;
  stroke-dasharray: 4 4;
  opacity: 0.7;
  stroke-linecap: round;
}
.opt-fund-eh-fwdline.up   { stroke: var(--pos); }
.opt-fund-eh-fwdline.down { stroke: var(--neg); }
.opt-fund-eh-fwdmark {
  fill: var(--surface); stroke-width: 1.5;
}
.opt-fund-eh-fwdmark.up   { stroke: var(--pos); }
.opt-fund-eh-fwdmark.down { stroke: var(--neg); }
.opt-fund-eh-est {
  fill: color-mix(in srgb, var(--muted) 70%, transparent);
}
.opt-fund-eh-est-badge {
  fill: var(--muted);
  font: 700 7px/1 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.85;
}
.opt-fund-eh-end {
  stroke: none;
}
.opt-fund-eh-end.up   { fill: var(--pos); }
.opt-fund-eh-end.down { fill: var(--neg); }
.opt-fund-eh-end.halo.up   { fill: color-mix(in srgb, var(--pos) 25%, transparent); }
.opt-fund-eh-end.halo.down { fill: color-mix(in srgb, var(--neg) 25%, transparent); }
.opt-fund-eh-cross {
  stroke: var(--muted); stroke-width: 1;
  stroke-dasharray: 2 3; opacity: 0.6;
  pointer-events: none;
}
.opt-fund-eh-crossdot {
  pointer-events: none;
  stroke: var(--surface); stroke-width: 1.5;
}
.opt-fund-eh-crossdot.up   { fill: var(--pos); }
.opt-fund-eh-crossdot.down { fill: var(--neg); }
.opt-fund-eh-hit {
  fill: transparent;
  cursor: crosshair;
}

/* === Revenue segment donut charts === */
.opt-fund-segments {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--s-3);
  margin-top: var(--s-4);
}
.opt-fund-segments[hidden] { display: none; }
.opt-fund-seg-chart {
  position: relative;
  padding: var(--s-4) var(--s-3) var(--s-3);
  border: 1px solid var(--border);
  border-radius: var(--r-3);
  background: var(--surface);
}
.opt-fund-seg-title {
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--muted); margin-bottom: var(--s-1);
}
.opt-fund-seg-sub {
  font-size: 11px; color: var(--muted);
  margin-bottom: 2px;
  font-variant-numeric: tabular-nums;
}
.opt-fund-seg-headline {
  font-size: 13px; font-weight: 700;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  margin-bottom: var(--s-2);
}
.opt-fund-seg-headline.tone-up { color: var(--pos); }
.opt-fund-seg-headline.tone-down { color: var(--neg); }
.opt-fund-seg-headline.tone-flat { color: var(--muted); }
.opt-fund-seg-svg {
  display: block; margin: 0 auto;
}
.opt-fund-seg-slice {
  cursor: pointer;
  transition: transform 0.15s ease, opacity 0.15s ease;
  transform-origin: 100px 100px;
}
.opt-fund-seg-slice:hover { transform: scale(1.04); }
.opt-fund-seg-slice.dimmed { opacity: 0.35; }
.opt-fund-seg-center {
  font-size: 13px; font-weight: 700;
  fill: var(--text-strong); text-anchor: middle;
  font-family: var(--font-mono);
  pointer-events: none;
}
.opt-fund-seg-center-sub {
  font-size: 9px; fill: var(--muted); text-anchor: middle;
  font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em;
  pointer-events: none;
}
.opt-fund-seg-legend {
  display: flex; flex-wrap: wrap;
  gap: var(--s-1) var(--s-3);
  margin-top: var(--s-3);
  justify-content: center;
}
.opt-fund-seg-leg-item {
  display: inline-flex; align-items: center;
  gap: 5px; font-size: 12px; color: var(--text);
  cursor: pointer; white-space: nowrap;
  transition: opacity 0.15s ease;
}
.opt-fund-seg-leg-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.opt-fund-seg-leg-pct {
  color: var(--muted); font-family: var(--font-mono); font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.opt-fund-seg-leg-delta {
  font-family: var(--font-mono); font-size: 11px;
  font-variant-numeric: tabular-nums; font-weight: 700;
  padding: 1px 5px; border-radius: 999px;
  letter-spacing: 0.01em;
}
.opt-fund-seg-leg-delta.tone-up   { color: var(--pos); background: var(--pos-soft); }
.opt-fund-seg-leg-delta.tone-down { color: var(--neg); background: var(--neg-soft); }
.opt-fund-seg-leg-delta.tone-flat { color: var(--muted); background: var(--surface-2); }
.opt-fund-seg-leg-delta.tone-new  { color: var(--muted-strong); background: var(--surface-2); font-weight: 600; }
.opt-fund-seg-tip {
  position: absolute; top: var(--s-3); right: var(--s-3);
  padding: 6px 9px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-2);
  font-size: 12px;
  pointer-events: none; z-index: 2;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  display: flex; flex-direction: column; gap: 2px;
  min-width: 130px;
}
.opt-fund-seg-tip-name { color: var(--text-strong); font-weight: 700; }
.opt-fund-seg-tip-row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px;
}
.opt-fund-seg-tip-k {
  color: var(--muted); font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.opt-fund-seg-tip-val {
  color: var(--text-strong); font-weight: 700;
  font-family: var(--font-mono);
}
.opt-fund-seg-tip-row.tone-up .opt-fund-seg-tip-val,
.opt-fund-seg-tip-row.tone-up .opt-fund-seg-tip-k { color: var(--pos); }
.opt-fund-seg-tip-row.tone-down .opt-fund-seg-tip-val,
.opt-fund-seg-tip-row.tone-down .opt-fund-seg-tip-k { color: var(--neg); }
.opt-fund-seg-tip-row.tone-new .opt-fund-seg-tip-val,
.opt-fund-seg-tip-row.tone-new .opt-fund-seg-tip-k { color: var(--muted-strong); }

/* === Retail sentiment gauge === */
.opt-social {
  display: flex; flex-direction: column; gap: var(--s-2);
  padding: var(--s-3);
  margin-bottom: var(--s-3);
  border: 1px solid var(--border);
  border-radius: var(--r-2);
  background: var(--surface-2);
}
.opt-social-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s-3); flex-wrap: wrap;
}
.opt-social-label {
  font-size: 13px; font-weight: 600; color: var(--text);
  letter-spacing: 0.02em;
}
.opt-social-stat {
  font-size: 12px; color: var(--muted);
}
.opt-social-bar {
  display: flex; height: 8px; width: 100%;
  border-radius: 4px; overflow: hidden;
  background: color-mix(in srgb, var(--border) 70%, transparent);
}
.opt-social-bar .bull { background: var(--pos); }
.opt-social-bar .bear { background: var(--neg); }
.opt-social-bar .neutral { background: transparent; }
.opt-social-sources {
  font-size: 12px; color: var(--muted);
}
.opt-social-source {
  display: flex; flex-direction: column; gap: 4px;
  margin-top: var(--s-3);
  padding-top: var(--s-2);
  border-top: 1px solid var(--hairline);
}
.opt-social-source-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s-2); flex-wrap: wrap;
}
.opt-social-source-name {
  position: relative;
  font: 600 11px/1 var(--font-mono);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--muted-strong);
  padding-left: 10px;
}
.opt-social-source-name::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 20%, transparent);
}
.opt-social-source-counts {
  font: 600 12px/1 var(--font-mono);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.opt-social-source-method {
  font-size: 12px; color: var(--muted); font-style: italic;
  line-height: 1.5;
}
.opt-social-examples {
  list-style: none; padding: 0; margin: 4px 0 0 0;
  display: flex; flex-direction: column; gap: 4px;
}
.opt-social-example {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 8px; row-gap: 2px;
  align-items: start;
  font-size: 12.5px; line-height: 1.45;
  padding: 6px 8px 6px 10px;
  border-radius: var(--r-1);
  background: color-mix(in srgb, var(--surface-3) 60%, transparent);
  border-left: 2px solid var(--hairline);
  transition: background .12s var(--ease-out), border-color .12s var(--ease-out);
}
.opt-social-example:hover {
  background: color-mix(in srgb, var(--surface-3) 85%, var(--surface-2));
}
.opt-social-example.bullish {
  border-left-color: color-mix(in srgb, var(--pos) 55%, transparent);
}
.opt-social-example.bearish {
  border-left-color: color-mix(in srgb, var(--neg) 55%, transparent);
}
.opt-social-example .opt-social-ex-tag {
  grid-row: 1; grid-column: 1;
  align-self: center;
}
.opt-social-ex-body {
  grid-row: 1; grid-column: 2;
  color: var(--text);
  word-break: break-word;
}
.opt-social-ex-body a {
  color: inherit; text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
}
.opt-social-ex-body a:hover {
  text-decoration-color: currentColor;
}
.opt-social-ex-meta {
  grid-row: 2; grid-column: 2;
  font-size: 11.5px; color: var(--muted);
}
.opt-social-ex-tag {
  display: inline-block;
  font-size: 11px; font-weight: 600; letter-spacing: 0.02em;
  padding: 1px 6px; border-radius: 999px;
  text-transform: uppercase;
  white-space: nowrap;
}
.opt-social-ex-tag.bull {
  background: color-mix(in srgb, var(--pos) 25%, transparent);
  color: var(--pos);
}
.opt-social-ex-tag.bear {
  background: color-mix(in srgb, var(--neg) 25%, transparent);
  color: var(--neg);
}
.opt-social-ex-tag.neu {
  background: color-mix(in srgb, var(--muted) 25%, transparent);
  color: var(--muted);
}

.opt-row-mute {
  color: var(--muted); font-size: 12px; margin-left: 6px;
  font-weight: 500;
}

/* === Grade explainer === */
.opt-explainer {
  margin-top: var(--s-5);
  border: 1px solid var(--border);
  border-radius: var(--r-3);
  background: var(--surface-2);
}
.opt-explainer summary {
  list-style: none;
  cursor: pointer;
  padding: var(--s-3) var(--s-4);
  font-weight: 600;
  font-size: var(--fs-md);
  color: var(--text);
  display: flex;
  align-items: center;
  gap: var(--s-2);
}
.opt-explainer summary::-webkit-details-marker { display: none; }
.opt-explainer summary::before {
  content: "▸";
  display: inline-block;
  color: var(--muted);
  font-size: 12px;
  transition: transform .15s ease;
}
.opt-explainer[open] summary::before { transform: rotate(90deg); }
.opt-explainer summary:hover { color: var(--text-strong); }
.opt-explainer-body {
  padding: 0 var(--s-4) var(--s-4);
  font-size: var(--fs-sm);
  color: var(--text);
  line-height: 1.55;
}
.opt-explainer-body p { margin: 0 0 var(--s-3); }
.opt-explainer-body ul { margin: 0 0 var(--s-3); padding-left: var(--s-5); }
.opt-explainer-body li { margin-bottom: 4px; }
.opt-explainer-body h4 {
  margin: var(--s-4) 0 var(--s-2);
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  font-weight: 700;
}
.opt-explainer-foot { color: var(--muted); font-style: italic; }

/* === Result panel === */
.opt-result-wrap { position: relative; }
.opt-result-sticky {
  /* Offset below the pinned chrome stack (sticky .site-header + the sticky
     .page-tabs-bar, ~104px; matches the live-reveal IntersectionObserver's
     rootMargin) so the verdict bar doesn't slide under it when the option
     chain scrolls. */
  position: sticky; top: calc(var(--header-h, 56px) + var(--page-tabs-h, 48px)); z-index: 5;
  display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center;
  padding: var(--s-2) var(--s-3);
  margin: 0 calc(-1 * var(--s-3));
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  -webkit-backdrop-filter: saturate(160%) blur(8px);
  backdrop-filter: saturate(160%) blur(8px);
  border-bottom: 1px solid var(--border);
}
.opt-verdict-mini {
  display: inline-block;
  padding: 4px 10px; border-radius: var(--r-pill);
  font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
}
.opt-verdict-mini.good { color: var(--pos); background: var(--pos-soft); border: 1px solid color-mix(in srgb, var(--pos) 35%, transparent); }
.opt-verdict-mini.fair { color: var(--warn); background: var(--warn-soft); border: 1px solid color-mix(in srgb, var(--warn) 40%, transparent); }
.opt-verdict-mini.bad  { color: var(--neg); background: var(--neg-soft); border: 1px solid color-mix(in srgb, var(--neg) 35%, transparent); }
.opt-contract-mini { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }

.opt-result:empty { display: none; }
.opt-buy {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-4);
  border-radius: var(--r-3);
  border: 1px solid;
  margin: var(--s-3) 0 var(--s-3);
}
.opt-buy.yes { background: var(--pos-soft); border-color: color-mix(in srgb, var(--pos) 45%, transparent); }
.opt-buy.no  { background: var(--neg-soft); border-color: color-mix(in srgb, var(--neg) 45%, transparent); }
.opt-buy-head {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}
.opt-buy-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 64px;
  padding: 8px 14px;
  border-radius: var(--r-2);
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1;
  color: #fff;
  flex: 0 0 auto;
}
.opt-buy.yes .opt-buy-badge { background: var(--pos); }
.opt-buy.no  .opt-buy-badge { background: var(--neg); }
.opt-buy-headline {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
}
.opt-buy-headline-main {
  font-size: var(--fs-md);
  line-height: 1.35;
  color: var(--text-strong);
  font-weight: 600;
}
.opt-buy-headline-sub {
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}
.opt-buy-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.opt-buy-stat {
  display: inline-flex;
  align-items: center;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: var(--r-1);
}
.opt-buy-stat.good { color: var(--pos);  background: color-mix(in srgb, var(--pos)  14%, transparent); }
.opt-buy-stat.bad  { color: var(--neg);  background: color-mix(in srgb, var(--neg)  14%, transparent); }
.opt-buy-stat.fair { color: var(--muted); background: var(--surface-3); }

/* "In plain English" primer for the conviction card. Quietly framed so it
   doesn't overpower the technical reasoning below — but always visible
   for first-time users who can't infer what calls/puts/aligned-score mean. */
.opt-buy-explainer {
  margin: var(--s-2) 0 var(--s-3);
  padding: 10px 12px;
  background: color-mix(in srgb, var(--surface-3) 80%, transparent);
  border: 1px dashed var(--hairline);
  border-radius: var(--r-2);
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.5;
}
.opt-buy-explainer-title {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: 6px;
}
.opt-buy-explainer p { margin: 0 0 6px; }
.opt-buy-explainer p:last-child { margin-bottom: 0; }
.opt-buy-explainer b { color: var(--text); }
.opt-buy-explainer-pos { color: var(--pos); font-weight: 600; }
.opt-buy-explainer-neg { color: var(--neg); font-weight: 600; }
.opt-buy-explainer-sub { font-size: 12.5px; font-style: italic; }
.opt-buy-sections {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.opt-buy-section {
  background: color-mix(in srgb, var(--surface-2) 60%, transparent);
  border: 1px solid var(--hairline);
  border-left: 2px solid var(--border);
  border-radius: var(--r-2);
  padding: var(--s-3) var(--s-4);
}
.opt-buy-section.opt-buy-fails { border-left-color: var(--neg); }
.opt-buy-section.opt-buy-pros  { border-left-color: var(--pos); }
.opt-buy-section.opt-buy-cons  { border-left-color: var(--warn); }
.opt-buy-section.opt-buy-warn  { border-left-color: var(--muted); }
.opt-buy-section-title {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}
.opt-buy-section ul {
  margin: 0;
  padding-left: var(--s-4);
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--text);
}
.opt-buy-section li { margin-bottom: 4px; }
.opt-buy-section li:last-child { margin-bottom: 0; }
.opt-buy-section b { color: var(--text-strong); font-weight: 600; }
.opt-buy-weight {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 1px 5px;
  border-radius: var(--r-1);
  background: var(--surface-3);
  color: var(--muted);
  margin: 0 4px 0 2px;
  vertical-align: 1px;
}
.opt-buy-empty {
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-sm);
  font-style: italic;
}
.opt-buy-suggestion {
  background: color-mix(in srgb, var(--accent) 8%, var(--surface-2));
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius: var(--r-2);
  padding: var(--s-3) var(--s-4);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.opt-buy-suggestion.neutral {
  background: var(--surface-2);
  border-color: var(--hairline);
}
.opt-buy-suggestion-title {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}
.opt-buy-suggestion.neutral .opt-buy-suggestion-title { color: var(--muted); }
.opt-buy-suggestion-action {
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--text-strong);
}
.opt-buy-suggestion-why {
  font-size: var(--fs-sm);
  color: var(--text);
  line-height: 1.5;
}
.opt-buy-suggestion-btn {
  align-self: flex-start;
  margin-top: 4px;
  padding: 6px 12px;
  font-size: var(--fs-sm);
  font-weight: 600;
  border-radius: var(--r-1);
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  background: var(--accent);
  color: var(--accent-fg);
  cursor: pointer;
  transition: background .15s var(--ease-out), transform .12s var(--ease-out);
}
.opt-buy-suggestion-btn:hover { background: color-mix(in srgb, var(--accent) 85%, black); }
.opt-buy-suggestion-btn:active { transform: translateY(1px); }

/* Side-by-side before/after comparison inside "Try this instead" — the
   user sees the original delta / spread / DTE next to the suggested
   contract's, so the tradeoff is one glance instead of two. */
.opt-buy-compare {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: 4px;
  padding: 6px 0;
  border-top: 1px dashed color-mix(in srgb, var(--accent) 25%, transparent);
  border-bottom: 1px dashed color-mix(in srgb, var(--accent) 25%, transparent);
}
.opt-buy-compare-row {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--text);
}
.opt-buy-compare-label {
  font-family: var(--font-sans);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.opt-buy-compare-from { color: var(--muted); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--muted) 55%, transparent); }
.opt-buy-compare-arrow { color: var(--accent); font-weight: 700; }
.opt-buy-compare-to { color: var(--text-strong); font-weight: 600; }

/* Graded-at meta line — shows render time + data source age. The .stale
   modifier highlights it when the underlying build snapshot has aged past
   the threshold and a Re-grade affordance is offered. */
.opt-buy-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 8px 0 4px;
  font-size: var(--fs-xs);
  color: var(--muted);
  letter-spacing: 0.01em;
}
.opt-buy-meta b { color: var(--text); font-weight: 600; }
.opt-buy-meta-sep { color: var(--hairline); }
.opt-buy-meta.stale {
  padding: 6px 10px;
  border: 1px solid color-mix(in srgb, var(--warn) 35%, var(--hairline));
  background: color-mix(in srgb, var(--warn) 8%, transparent);
  border-radius: var(--r-2);
}
.opt-buy-regrade {
  margin-left: auto;
  padding: 4px 10px;
  font-family: inherit;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--accent);
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--hairline));
  border-radius: var(--r-1);
  cursor: pointer;
  transition: background .12s var(--ease-out), color .12s var(--ease-out);
}
.opt-buy-regrade:hover { background: var(--accent); color: var(--accent-fg); }
.opt-buy-regrade:disabled { opacity: 0.6; cursor: progress; }

/* Small inline AI-source chip — uses the existing .tip mechanism but
   renders as a subtle "AI" / "i" pill so the affordance stands out next
   to plain text. */
.tip.ai-info {
  background: color-mix(in srgb, var(--accent) 12%, var(--surface-2));
  border-color: color-mix(in srgb, var(--accent) 35%, var(--hairline));
  color: var(--accent);
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  min-width: 16px;
  padding: 0 4px;
  margin-left: 3px;
}
.tip.ai-info:hover, .tip.ai-info:focus-visible, .tip.ai-info.is-open {
  background: var(--accent);
  color: var(--accent-fg);
}
@media (max-width: 560px){
  .opt-buy-head { flex-wrap: wrap; }
  .opt-buy-headline-main { font-size: var(--fs-sm); }
  .opt-buy-badge { min-width: 56px; font-size: 18px; padding: 6px 10px; }
}
.opt-buy-mini {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 8px;
  border-radius: var(--r-1);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #fff;
}
.opt-buy-mini.yes { background: var(--pos); }
.opt-buy-mini.no  { background: var(--neg); }
.opt-verdict {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 7px 14px;
  border-radius: var(--r-pill);
  font-weight: 600; font-size: var(--fs-md);
  letter-spacing: 0.02em;
  margin: var(--s-3) 0 var(--s-3);
}
.opt-verdict::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.opt-verdict.good { background: color-mix(in srgb, var(--pos)  10%, transparent); color: var(--pos);  border: 0; }
.opt-verdict.fair { background: color-mix(in srgb, var(--warn) 11%, transparent); color: var(--warn); border: 0; }
.opt-verdict.bad  { background: color-mix(in srgb, var(--neg)  11%, transparent); color: var(--neg);  border: 0; }
.opt-contract {
  font-size: var(--fs-sm); color: var(--muted);
  margin: var(--s-2) 0 var(--s-3);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--hairline);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}
.opt-contract b, .opt-contract strong { color: var(--text); font-weight: 600; }
.opt-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--s-3);
  margin: var(--s-3) 0;
  align-items: start;
}
.opt-section {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 10px 12px 4px;
  background: color-mix(in srgb, var(--surface-2) 65%, transparent);
  border: 1px solid var(--hairline);
  border-radius: var(--r-2);
  transition: border-color .15s var(--ease-out);
}
.opt-section:hover {
  border-color: color-mix(in srgb, var(--accent) 18%, var(--hairline));
}
.opt-section-title {
  margin: 0 0 4px;
  padding: 0 0 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text);
  border-bottom: 1px solid var(--hairline);
}
.opt-section-rows {
  display: flex;
  flex-direction: column;
}
.opt-row {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--s-3);
  padding: 8px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--hairline) 60%, transparent);
  border-radius: 0;
  font-size: var(--fs-md);
  transition: background .12s var(--ease-out);
}
.opt-row:hover {
  background: color-mix(in srgb, var(--accent) 4%, transparent);
  margin: 0 -8px;
  padding-left: 8px;
  padding-right: 8px;
  border-radius: var(--r-1);
}
.opt-section-rows .opt-row:last-child { border-bottom: none; }
.opt-row:last-child { border-bottom: none; }
.opt-row-label {
  color: var(--muted);
  font-size: 11.5px;
  text-transform: uppercase; letter-spacing: 0.08em;
  font-weight: 600;
  flex: 0 1 auto;
  min-width: 0;
}
.opt-row-value {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--text-strong);
  text-align: right;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 4px;
  font-size: 14px;
}
.opt-row-sub { font-weight: 400; margin-left: 6px; color: var(--muted); font-size: var(--fs-sm); }
.opt-grade {
  display: inline-block; margin-left: 6px;
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 6px; border-radius: var(--r-1);
  border: 0;
  vertical-align: middle;
  line-height: 1.3;
}
.opt-grade.good { color: var(--pos);  background: color-mix(in srgb, var(--pos)  14%, transparent); }
.opt-grade.fair { color: var(--warn); background: color-mix(in srgb, var(--warn) 14%, transparent); }
.opt-grade.bad  { color: var(--neg);  background: color-mix(in srgb, var(--neg)  14%, transparent); }
.opt-notes {
  margin: var(--s-3) 0 var(--s-1);
  padding-left: var(--s-4);
  font-size: var(--fs-sm); color: var(--text);
}
.opt-notes li { margin-bottom: 3px; }
.opt-disclaimer { font-size: 12px; color: var(--muted); margin-top: var(--s-2); }
.opt-news {
  margin: var(--s-2) 0 var(--s-3);
  padding: var(--s-3);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-2);
  font-size: var(--fs-sm); line-height: 1.55;
}
.opt-news.bullish   { border-color: color-mix(in srgb, var(--pos) 35%, transparent); }
.opt-news.bearish   { border-color: color-mix(in srgb, var(--neg) 35%, transparent); }
.opt-news.neutral   { border-color: color-mix(in srgb, var(--warn) 40%, transparent); }
.opt-news.uncertain { border-color: var(--border); }
.opt-news-head { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin-bottom: 4px; font-weight: 700; }
.opt-news-body { color: var(--text); }
.opt-news-note { margin-top: 6px; font-size: 13px; color: var(--muted); font-style: italic; }
.opt-rec-card {
  position: relative;
  margin: var(--s-3) 0 var(--s-3);
  padding: var(--s-4) var(--s-5);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-3);
  font-size: var(--fs-sm); line-height: 1.5;
  box-shadow: var(--elev-1);
}
.opt-rec-card::before {
  content: "";
  position: absolute;
  inset: var(--s-3) auto var(--s-3) 0;
  width: 2px;
  background: var(--accent);
  opacity: 0.7;
  border-radius: 1px;
}
.opt-rec-title {
  font-size: 13px; text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--text); margin-bottom: var(--s-3); font-weight: 700;
}
.opt-rec-block {
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px dashed color-mix(in srgb, var(--hairline) 80%, transparent);
  display: grid; grid-template-columns: 110px 1fr;
  gap: var(--s-3);
  align-items: start;
}
.opt-rec-block:last-of-type {
  border-bottom: 0;
  margin-bottom: 0;
  padding-bottom: 0;
}
.opt-rec-label {
  font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.10em;
  color: var(--muted); font-weight: 700;
  align-self: flex-start;
  padding: 4px 8px;
  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
  border: 1px solid var(--hairline);
  border-radius: var(--r-pill);
  display: inline-block;
  width: fit-content;
  letter-spacing: 0.08em;
}
.opt-rec-body { color: var(--text); }
.opt-rec-muted { color: var(--muted); font-style: italic; }
.opt-rec-sub {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed var(--hairline);
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
}
.opt-rec-pill {
  display: inline-block; padding: 1px 6px; border-radius: 999px;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  vertical-align: middle; border: 1px solid transparent; margin-right: 4px;
}
.opt-rec-pill.pos  { color: var(--pos);  background: var(--pos-soft);  border-color: color-mix(in srgb, var(--pos) 35%, transparent); }
.opt-rec-pill.warn { color: var(--warn); background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 40%, transparent); }
.opt-rec-pill.fair { color: var(--muted); background: var(--surface-3); }
.opt-rec-action {
  margin-top: var(--s-2); padding-top: var(--s-2);
  border-top: 1px dashed var(--border);
  font-weight: 600; color: var(--text);
}
.opt-rec-action.yes { color: var(--pos); }
.opt-rec-action.no  { color: var(--muted); }
.opt-rec-rule {
  margin-top: 6px; padding: 6px 8px;
  background: var(--surface-3); border-radius: var(--r-2);
  font-size: 13px; color: var(--text); font-weight: 500;
}
@media (max-width: 560px){
  .opt-rec-block { grid-template-columns: 1fr; gap: 2px; }
}

/* "Execute now?" entry-timing card. Sits between the verdict chip and the
   Recommendation breakdown. Three states (pos = EXECUTE, fair = WAIT,
   warn = AVOID) drive both the left rail color and the verdict pill. */
.opt-exec-card {
  position: relative;
  margin: var(--s-3) 0;
  padding: var(--s-4) var(--s-5);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-3);
  font-size: var(--fs-sm); line-height: 1.5;
  box-shadow: var(--elev-1);
}
.opt-exec-card::before {
  content: "";
  position: absolute;
  inset: var(--s-3) auto var(--s-3) 0;
  width: 3px;
  border-radius: 2px;
  background: var(--accent);
  opacity: 0.85;
}
.opt-exec-card.opt-exec-pos::before  { background: var(--pos); }
.opt-exec-card.opt-exec-warn::before { background: var(--warn); }
.opt-exec-card.opt-exec-fair::before { background: var(--muted); }
.opt-exec-card.opt-exec-muted::before { background: var(--hairline); opacity: 0.55; }
/* Demoted Execute-now card — shown when the contract above has hard fails.
   Lower contrast so the green/red verdict above stays the headline; the
   chart read is still visible but doesn't compete for the eye. */
.opt-exec-card.opt-exec-demoted {
  background: var(--surface-1);
  box-shadow: none;
  opacity: 0.82;
}
.opt-exec-card.opt-exec-demoted .opt-exec-subtitle { font-weight: 600; }
.opt-exec-head {
  display: flex; align-items: center; gap: var(--s-3);
  margin-bottom: var(--s-2);
}
.opt-exec-verdict {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 84px; padding: 6px 10px;
  border-radius: var(--r-2);
  font-size: var(--fs-sm); font-weight: 800; letter-spacing: 0.08em;
  border: 1px solid transparent;
}
.opt-exec-verdict-pos {
  color: var(--pos);
  background: var(--pos-soft);
  border-color: color-mix(in srgb, var(--pos) 45%, transparent);
}
.opt-exec-verdict-warn {
  color: var(--warn);
  background: var(--warn-soft);
  border-color: color-mix(in srgb, var(--warn) 45%, transparent);
}
.opt-exec-verdict-fair {
  color: var(--muted);
  background: var(--surface-3);
  border-color: var(--hairline);
}
.opt-exec-verdict-muted {
  color: var(--muted);
  background: transparent;
  border-color: var(--hairline);
  font-weight: 600;
}
.opt-exec-headline { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.opt-exec-title {
  font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--muted); font-weight: 600;
}
.opt-exec-subtitle {
  font-size: var(--fs-md); font-weight: 700; color: var(--text);
  line-height: 1.3;
}
.opt-exec-meta {
  margin-bottom: var(--s-2);
  font-size: var(--fs-xs);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.opt-exec-meta-sep { color: var(--hairline); margin: 0 2px; }

/* Market backdrop strip — compact row of live index moves (SPY/QQQ/IWM/SMH/
   UVXY). Coloured pills so the user can read tape direction at a glance:
   green = up, red = down, neutral = ~flat. Sits between the local meta
   strip and the verdict body. */
.opt-exec-backdrop {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0 0 var(--s-3);
  padding: 8px 10px;
  background: color-mix(in srgb, var(--surface-3) 80%, transparent);
  border: 1px solid var(--hairline);
  border-radius: var(--r-2);
  font-variant-numeric: tabular-nums;
}
.opt-exec-bd-label {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--muted);
  margin-right: 4px;
  white-space: nowrap;
}
.opt-exec-bd-pill {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 500;
  border: 1px solid transparent;
}
.opt-exec-bd-pill b {
  font-weight: 700;
  letter-spacing: 0.02em;
  font-size: 11.5px;
  text-transform: uppercase;
}
.opt-exec-bd-pill.up   { color: var(--pos);  background: var(--pos-soft);  border-color: color-mix(in srgb, var(--pos) 35%, transparent); }
.opt-exec-bd-pill.down { color: var(--warn); background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 40%, transparent); }
.opt-exec-bd-pill.flat { color: var(--muted); background: var(--surface-2); border-color: var(--hairline); }

/* Plain-English primer for the Execute-now card. Spells out
   EXECUTE / WAIT / AVOID with everyday-language definitions so beginners
   understand this card grades the MOMENT (entry timing), not the contract. */
.opt-exec-explainer {
  margin: var(--s-2) 0 var(--s-3);
  padding: 10px 12px;
  background: color-mix(in srgb, var(--surface-3) 80%, transparent);
  border: 1px dashed var(--hairline);
  border-radius: var(--r-2);
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.5;
}
.opt-exec-explainer-title {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: 6px;
}
.opt-exec-explainer p { margin: 0 0 6px; }
.opt-exec-explainer b { color: var(--text); }
.opt-exec-explainer em { color: var(--text); font-style: italic; }
.opt-exec-explainer-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 4px;
}
.opt-exec-explainer-list li { font-size: 13px; line-height: 1.5; }
.opt-exec-explainer-tag {
  display: inline-block;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.04em;
  padding: 1px 6px; border-radius: 999px;
  margin-right: 6px; vertical-align: middle;
  border: 1px solid transparent;
}
.opt-exec-explainer-tag.pos  { color: var(--pos);  background: var(--pos-soft);  border-color: color-mix(in srgb, var(--pos)  35%, transparent); }
.opt-exec-explainer-tag.fair { color: var(--muted); background: var(--surface-3); border-color: var(--hairline); }
.opt-exec-explainer-tag.warn { color: var(--warn); background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 40%, transparent); }

.opt-exec-body { color: var(--text); margin-bottom: var(--s-3); }
.opt-exec-section { margin-top: var(--s-2); }
.opt-exec-section-title {
  font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.10em;
  color: var(--muted); font-weight: 600;
  margin-bottom: 4px;
}
.opt-exec-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 6px;
}
.opt-exec-list li {
  padding: 6px 8px;
  background: var(--surface-3);
  border-radius: var(--r-2);
  font-size: 13.5px; line-height: 1.45;
  color: var(--text);
}
.opt-exec-tag {
  display: inline-block; padding: 1px 6px; border-radius: 999px;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  margin-right: 6px; vertical-align: middle;
  border: 1px solid transparent;
}
.opt-exec-tag.pos  { color: var(--pos);  background: var(--pos-soft);  border-color: color-mix(in srgb, var(--pos) 35%, transparent); }
.opt-exec-tag.warn { color: var(--warn); background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 40%, transparent); }
.opt-exec-foot {
  margin-top: var(--s-3);
  padding-top: var(--s-2);
  border-top: 1px dashed var(--hairline);
  font-size: 12.5px;
  color: var(--muted);
  font-style: italic;
}
@media (max-width: 560px){
  .opt-exec-head { flex-direction: column; align-items: flex-start; gap: var(--s-2); }
  .opt-exec-verdict { min-width: 0; }
}

.opt-actions {
  display: flex; flex-wrap: wrap; gap: var(--s-2);
  margin: var(--s-4) 0 var(--s-2);
  padding-top: var(--s-3);
  border-top: 1px solid var(--hairline);
}
/* Three sibling buttons share a single visual treatment — outline by
   default, calm accent hover, accent fill only when state is "on"
   (.is-pinned). Avoiding a special green "Tweak" treatment keeps the row
   reading as a group of equals. */
.opt-tweak-btn,
.opt-copylink-btn,
.opt-pin-btn {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--r-2);
  padding: 7px 13px;
  font: inherit; font-size: var(--fs-sm); font-weight: 500;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.opt-tweak-btn:hover,
.opt-copylink-btn:hover,
.opt-pin-btn:hover {
  color: var(--text-strong);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  background: color-mix(in srgb, var(--accent) 5%, transparent);
}
.opt-pin-btn.is-pinned {
  background: var(--accent);
  color: var(--accent-fg);
  border-color: var(--accent);
  font-weight: 600;
}
.opt-pinned-strip {
  margin: 0 0 var(--s-3);
  padding: var(--s-3);
  background: var(--surface-2);
  background-image: var(--grad-surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--r-3);
  box-shadow: var(--elev-1);
}
.opt-pinned-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--s-2);
}
.opt-pinned-title {
  font: 600 var(--fs-xs)/1 var(--font-sans, inherit);
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--muted);
}
.opt-pinned-clear {
  appearance: none; background: transparent; border: none; cursor: pointer;
  color: var(--muted); font: 500 var(--fs-xs)/1 inherit; padding: 4px 6px;
  border-radius: var(--r-2);
}
.opt-pinned-clear:hover { color: var(--text-strong); background: var(--surface-3); }
.opt-pinned-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--s-2);
}
.opt-pinned-card {
  position: relative;
  display: flex; flex-direction: column; gap: 4px;
  padding: 10px 12px;
  background: var(--surface);
  background-image: var(--grad-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-2);
  cursor: pointer;
  box-shadow: var(--elev-1);
  transition: border-color .12s ease, background .12s ease, transform .18s var(--ease-out), box-shadow .25s var(--ease-out);
}
.opt-pinned-card:hover {
  border-color: var(--accent);
  background: var(--surface-2);
  box-shadow: var(--elev-2), var(--elev-glow);
  transform: translateY(-1px);
}
.opt-pinned-card:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.opt-pinned-card-head { display: flex; align-items: center; gap: 6px; }
.opt-pinned-sym {
  font: 700 13px/1 var(--font-mono, inherit);
  color: var(--text-strong); letter-spacing: 0.02em;
}
.opt-pinned-side {
  font: 600 10px/1 var(--font-mono, inherit);
  padding: 3px 5px; border-radius: 3px;
  letter-spacing: 0.06em;
}
.opt-pinned-side.pin-call { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); }
.opt-pinned-side.pin-put  { background: rgba(220, 60, 80, 0.16); color: #ff8a8a; }
.opt-pinned-x {
  margin-left: auto; appearance: none; background: transparent; border: none;
  color: var(--muted); font: 600 18px/1 inherit; cursor: pointer;
  padding: 0 4px; border-radius: 3px;
}
.opt-pinned-x:hover { color: var(--text-strong); background: var(--surface-3); }
.opt-pinned-meta {
  display: flex; align-items: center; gap: 8px;
  font: 500 12px/1.3 var(--font-mono, inherit);
  color: var(--muted);
}
.opt-pinned-strike { color: var(--text); }
.opt-pinned-grades { display: flex; gap: 4px; }
.pin-grade {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 4px;
  font: 700 11px/1 var(--font-mono, inherit);
  background: var(--surface-3); color: var(--muted);
}
.pin-grade-good { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); }
.pin-grade-bad  { background: rgba(220, 60, 80, 0.18); color: #ff8a8a; }
.pin-grade-fair { background: var(--surface-3); color: var(--muted); }
.opt-pinned-foot { display: flex; align-items: center; gap: 6px; margin-top: 2px; }
.opt-pinned-buy {
  font: 700 10px/1 var(--font-mono, inherit); letter-spacing: 0.08em;
  padding: 3px 5px; border-radius: 3px;
}
.opt-pinned-buy.pin-yes { background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--accent); }
.opt-pinned-buy.pin-no  { background: rgba(220, 60, 80, 0.18); color: #ff8a8a; }
.opt-pinned-verdict { font: 500 12px/1 inherit; color: var(--muted); }

/* === CSV export button === */
.csv-export-btn {
  appearance: none;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  font: inherit; font-size: var(--fs-xs); font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--r-2);
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.csv-export-btn:hover { background: var(--surface-2); border-color: var(--border-strong); color: var(--text); }
.csv-export-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.calendar-controls .csv-export-btn { margin-left: auto; }
.card-header .csv-export-btn { margin-left: auto; }

/* === Command palette === */
/* The header trigger is styled to look like a real search input so users
   actually notice it. Wider on desktop, kbd hint pinned to the right, the
   placeholder reads "Search ticker, narrative, tab…" so the affordance is
   obvious without having to click. Collapses to an icon-only button on
   narrow viewports. */
.cmd-palette-trigger {
  appearance: none;
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--muted);
  font: inherit; font-size: var(--fs-xs); font-weight: 500;
  padding: 7px 10px 7px 12px;
  min-width: 260px;
  border-radius: var(--r-3);
  cursor: pointer;
  text-align: left;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.cmd-palette-trigger:hover { color: var(--text-strong); border-color: var(--border-strong); background: var(--surface-3); }
.cmd-palette-trigger-label {
  letter-spacing: 0.02em;
  flex: 1 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cmd-palette-trigger-kbd {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--muted);
  padding: 2px 6px; border-radius: 3px;
  font: 600 11px/1 var(--font-mono, inherit);
  margin-left: auto;
}
@media (max-width: 880px){
  .cmd-palette-trigger { min-width: 180px; }
}
@media (max-width: 640px){
  .cmd-palette-trigger-label, .cmd-palette-trigger-kbd { display: none; }
  .cmd-palette-trigger { padding: 6px 8px; min-width: 0; }
}

/* Back-to-top — floating button bottom-right, revealed by app.js once the
   page is scrolled past ~600px. Hidden via opacity (not [hidden]) so the
   fade transition works; pointer-events gate keeps the invisible button
   from eating clicks. Sits below the cmd-palette overlay (z 9999). */
.back-to-top {
  position: fixed;
  right: max(var(--s-4), env(safe-area-inset-right, 0px));
  bottom: max(var(--s-4), env(safe-area-inset-bottom, 0px));
  z-index: 900;
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  color: var(--muted);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity .18s ease, transform .18s ease, color .12s ease, border-color .12s ease;
}
.back-to-top.is-visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
.back-to-top:hover { color: var(--text-strong); border-color: var(--accent); }
.back-to-top:focus-visible { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); color: var(--text-strong); }
@media (prefers-reduced-motion: reduce) {
  .back-to-top { transition: none; transform: none; }
}

.cmd-palette {
  position: fixed; inset: 0; z-index: 9999;
}
.cmd-palette[hidden] { display: none; }
.cmd-palette-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.cmd-palette-modal {
  position: relative;
  max-width: 560px;
  margin: 14vh auto 0;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-4);
  box-shadow: 0 32px 64px rgba(0,0,0,0.5);
  overflow: hidden;
}
.cmd-palette-srtitle {
  position: absolute; left: -9999px; top: -9999px;
}
.cmd-palette-input-wrap {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}
.cmd-palette-icon { color: var(--muted); flex-shrink: 0; }
.cmd-palette-input-wrap input {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--text-strong);
  /* Form controls don't inherit font-family, and "inherit" is invalid as a
     font-family inside the font shorthand (the whole declaration gets
     dropped), so name the family explicitly or the input falls back to the
     UA default serif. */
  font: 500 15px/1.2 var(--font-sans);
  outline: none;
  padding: 0;
}
.cmd-palette-kbd, .cmd-palette-footer kbd {
  background: var(--surface-3);
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 6px;
  font: 600 11px/1 var(--font-mono, inherit);
}
.cmd-palette-results {
  list-style: none; margin: 0; padding: 6px;
  max-height: 50vh; overflow-y: auto;
  /* Don't chain a results-list overscroll into the (scroll-locked) page —
     on touch the rubber-band otherwise jiggles the whole backdrop. */
  overscroll-behavior: contain;
}
.cmd-palette-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  border-radius: var(--r-2);
  cursor: pointer;
}
.cmd-palette-row.is-active { background: var(--surface-2); }
.cmd-palette-row-type {
  font: 700 10px/1 var(--font-mono, inherit);
  letter-spacing: 0.06em;
  padding: 3px 5px; border-radius: 3px;
  flex-shrink: 0;
}
.cmd-type-ticker { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); }
.cmd-type-narrative { background: var(--warn-soft); color: var(--warn); }
.cmd-type-tab { background: var(--surface-3); color: var(--muted); }
.cmd-palette-row-label {
  font: 500 14px/1.3 inherit;
  color: var(--text-strong);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cmd-palette-row-sub {
  color: var(--muted);
  font: 400 13px/1.3 inherit;
  margin-left: auto;
  white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
  max-width: 40%;
}
.cmd-palette-empty {
  list-style: none;
  padding: 24px;
  text-align: center;
  color: var(--muted);
  font: 500 13px/1.3 inherit;
}
.cmd-palette-footer {
  display: flex; gap: 14px;
  padding: 10px 16px;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font: 500 12px/1.3 inherit;
}
body.cmd-palette-open { overflow: hidden; }
@media (max-width: 640px){
  .cmd-palette-modal { margin: 8vh 16px 0; }
  .cmd-palette-footer { gap: 10px; font-size: 11px; }
  /* Phone keyboards eat ~40% of the viewport while the palette input is
     focused; dvh tracks the VISIBLE viewport (vh does not on mobile), so the
     results list stays reachable instead of running under the keyboard. */
  .cmd-palette-results { max-height: min(50vh, 42dvh); }
  /* Match the ≥44px touch-target rule the rest of the mobile block applies. */
  .cmd-palette-row { min-height: 44px; }
}

/* === Manual form === */
.opt-manual-grid {
  display: grid;
  gap: var(--s-3) var(--s-4);
  grid-template-columns: 1fr;
}
@media (min-width: 640px){
  .opt-manual-grid { grid-template-columns: 1fr 1fr; }
  .opt-manual-paste, .opt-manual-submit { grid-column: 1 / -1; }
}
.opt-manual-field {
  display: flex; flex-direction: column; gap: 6px;
}
.opt-manual-field-label {
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--muted);
}
.opt-manual-opt {
  font-size: 10px; font-weight: 500;
  text-transform: lowercase; letter-spacing: 0;
  color: var(--muted); opacity: 0.8;
  margin-left: 4px;
}
.opt-manual-field input::placeholder { color: var(--muted); opacity: 0.65; }
.opt-manual-field input.err {
  border-color: var(--neg);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--neg) 25%, transparent);
}
.opt-manual-paste input {
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
}
.opt-paste-hint {
  font-size: 12px; color: var(--muted);
  text-transform: none; letter-spacing: 0;
  min-height: 14px; margin-top: 2px;
}
.opt-paste-hint.err { color: var(--neg); }
.opt-manual-submit {
  background: linear-gradient(180deg, var(--accent-strong), var(--accent));
  color: var(--accent-fg);
  border: none; border-radius: var(--r-2);
  padding: 10px 18px;
  font-size: var(--fs-md); font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  box-shadow: var(--elev-1), var(--elev-glow);
  transition: background .15s var(--ease-out),
              transform .08s var(--ease-out),
              box-shadow .2s var(--ease-out),
              filter .15s var(--ease-out);
  justify-self: start;
}
.opt-manual-submit:hover {
  filter: brightness(1.06);
  box-shadow: var(--elev-2), var(--elev-glow);
}
.opt-manual-submit:active { transform: scale(0.98); }

/* === Tooltip ===
   Subtle "?" affordance — bare glyph by default so a grid full of help
   icons doesn't read like a constellation of buttons. The bordered
   circle only forms on hover/focus, signalling it's interactive. */
.tip {
  display: inline-flex; align-items: center; justify-content: center;
  margin-left: 5px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid transparent;
  color: color-mix(in srgb, var(--muted) 65%, transparent);
  font-size: 11px; font-weight: 600;
  cursor: help;
  position: relative; vertical-align: middle;
  text-transform: none; letter-spacing: 0;
  transition: color .12s var(--ease-out), border-color .12s var(--ease-out), background .12s var(--ease-out);
}
.tip:hover, .tip:focus-visible, .tip.is-open {
  color: var(--text);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  background: color-mix(in srgb, var(--accent) 6%, transparent);
  outline: none;
}
.tip::after {
  content: attr(data-tip);
  position: absolute; bottom: calc(100% + 6px); left: 50%;
  transform: translateX(-50%);
  background: var(--text-strong); color: var(--surface);
  border: none; border-radius: var(--r-2);
  padding: 8px 10px;
  font-size: 13px; font-weight: 500;
  line-height: 1.4;
  width: max-content; max-width: min(260px, 80vw);
  white-space: normal; text-align: left;
  box-shadow: var(--shadow-md);
  pointer-events: none; opacity: 0;
  transition: opacity .12s ease;
  z-index: 30;
}
.tip:hover::after, .tip:focus-visible::after, .tip.is-open::after { opacity: 1; }
/* Hover-only devices: keep the cursor signal. Touch devices reveal the
   bubble via tap (toggling .is-open from JS), so the bubble can't be
   stranded by a sticky hover state. */
@media (hover: none) {
  .tip { cursor: pointer; }
}
@media (max-width: 480px){
  .tip::after { left: auto; right: 0; transform: none; }
}

/* === Terminal redesign overrides === */
/* Apply monospace to all numerics that read like terminal data */
.opt-live-spot, .opt-live-chg, .opt-tech-num, .opt-tech-vsub,
.opt-fund-metric-value, .opt-fund-metric-sub, .opt-row-value,
.opt-row-mute, .opt-row-sub, .opt-contract, .opt-contract-mini,
.opt-verdict, .opt-verdict-mini, .narr-chip, .opt-narr-chip,
.combo input, .opt-live-pill, .opt-live-sym, .opt-live-refresh {
  font-family: var(--font-mono);
  font-feature-settings: "tnum" 1, "ss01" 1;
}

/* Brand wordmark feels right in mono too */
.brand-word { font-family: var(--font-mono); letter-spacing: -0.02em; font-weight: 700; }
.brand-tag { font-family: var(--font-sans); text-transform: uppercase; letter-spacing: 0.14em; font-size: 11px; }

/* Restrained verdict — square label, no pill, terminal-flat */
.opt-verdict {
  display: inline-flex; align-items: center;
  padding: 7px 14px;
  border-radius: var(--r-2);
  font-weight: 700; font-size: var(--fs-sm);
  text-transform: uppercase; letter-spacing: 0.08em;
  border-width: 1px; border-style: solid;
}
.opt-verdict.good { background: var(--pos-soft); color: var(--pos); border-color: color-mix(in srgb, var(--pos) 45%, transparent); }
.opt-verdict.fair { background: var(--warn-soft); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, transparent); }
.opt-verdict.bad  { background: var(--neg-soft); color: var(--neg); border-color: color-mix(in srgb, var(--neg) 45%, transparent); }
.opt-verdict-mini {
  border-radius: var(--r-2);
  font-size: 12px; letter-spacing: 0.06em;
}

/* Tighter result rows — Bloomberg-style flat key/value table. The hairline
   between rows is enough; the top edge picks up the surrounding card border
   already, so a redundant border-top is just visual clutter. */
.opt-grid {
  margin-top: var(--s-3);
}
.opt-row {
  padding: 9px 2px;
  border-bottom: 1px solid var(--hairline);
}
.opt-row-value { font-weight: 600; color: var(--text-strong); }

/* Inputs / selects — flat panels, sharp corners */
.combo input,
.opt-chain-row select,
.opt-manual-field input,
.opt-manual-field select {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-3);
  color: var(--text-strong);
  padding: 8px 10px;
  font-size: var(--fs-sm);
  transition: border-color .12s ease;
}
.combo input:focus,
.opt-chain-row select:focus,
.opt-manual-field input:focus,
.opt-manual-field select:focus {
  border-color: var(--accent);
  outline: none;
}

/* Card title is now the only "loud" element — pin a terminal accent bar */
.opt-eval-section .card-title,
#opt-eval-section .card-title,
#narratives-section .card-title,
#opt-manual-section .card-title {
  font-family: var(--font-mono);
}

/* === Tabs (Technicals / Fundamentals / News) === */
.opt-tabs {
  display: flex; flex-wrap: wrap; gap: 0;
  margin: var(--s-4) 0 0;
  border-bottom: 1px solid var(--border);
}
.opt-tabs[hidden] { display: none; }
.opt-tab {
  position: relative;
  appearance: none; background: transparent;
  border: none; border-bottom: 2px solid transparent;
  padding: 10px 16px;
  font-family: var(--font-mono);
  font-size: var(--fs-sm); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--muted);
  cursor: pointer;
  margin-bottom: -1px;
  border-radius: var(--r-1) var(--r-1) 0 0;
  transition: color .12s ease, border-color .12s ease, background .12s ease;
}
.opt-tab:hover {
  color: var(--text);
  background: color-mix(in srgb, var(--accent) 4%, transparent);
}
.opt-tab[aria-selected="true"] {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.opt-tab[aria-selected="true"]::after {
  content: "";
  position: absolute;
  inset: auto 0 -2px 0;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    color-mix(in srgb, var(--accent) 60%, transparent) 50%,
    transparent 100%);
  filter: blur(3px);
  pointer-events: none;
}
.opt-tab-pane {
  padding-top: var(--s-4);
}
.opt-tab-pane[hidden] { display: none; }

/* When sub-cards live inside a tab pane, drop their own card chrome — the
   tab strip already frames them, and double borders look cluttered. */
.opt-tab-pane .opt-tech,
.opt-tab-pane .opt-fund {
  background: transparent;
  border: none;
  margin: 0;
  padding: 0;
}
.opt-tab-pane .opt-tech-head,
.opt-tab-pane .opt-fund-head {
  display: none;
}

/* News pane mirrors the old inline take but at full width inside the tab */
.opt-news-pane {
  font-size: var(--fs-sm); line-height: 1.55; color: var(--text);
}
.opt-news-pane .opt-news {
  margin: 0;
  background: transparent;
  border: none;
  padding: 0;
}
.opt-news-pane .opt-news-head {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.10em; font-weight: 700;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--s-2);
}
.opt-news-pane .opt-news-body { color: var(--text); }
.opt-news-pane .opt-news-empty {
  color: var(--muted); font-style: italic; font-size: var(--fs-sm);
}
/* News take "Sources" block — open by default, each row a real headline
   citation. Reputable-publisher hard filter at build time means everything
   in this list is wire-grade, so the rows act as the user's proof that
   the AI take is grounded. Hairline above to separate from the body
   paragraph; tracked-uppercase label; mono publisher tag on the left,
   headline title in the middle, UTC date on the right. */
.opt-news-sources {
  margin-top: var(--s-3);
  padding-top: var(--s-2);
  border-top: 1px solid var(--hairline);
}
.opt-news-sources-label {
  display: inline-block;
  margin-bottom: 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--muted);
  font-family: var(--font-mono);
}
.opt-news-sources-list {
  list-style: none;
  margin: 0; padding: 0;
  display: flex; flex-direction: column;
  gap: 6px;
}
.opt-news-source-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 12px;
  line-height: 1.4;
}
.opt-news-source-pub {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-strong);
  padding: 2px 6px;
  border: 1px solid var(--border);
  border-radius: var(--r-1);
  background: var(--surface-2);
  white-space: nowrap;
}
.opt-news-source-title {
  flex: 1 1 auto;
  color: var(--text);
  min-width: 0;
}
.opt-news-source-date {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  font-feature-settings: "tnum" 1;
}

/* === Manual grader accordion === */
.opt-manual-details summary {
  list-style: none;
  cursor: pointer;
  display: flex; align-items: center; gap: var(--s-3);
  padding: 0;
  /* Pull onto the card header line cleanly */
  margin: 0;
}
.opt-manual-details summary::-webkit-details-marker { display: none; }
.opt-manual-details summary::after {
  content: '+';
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 18px; font-weight: 600;
  color: var(--muted);
  width: 20px; text-align: center;
  transition: transform .15s ease, color .12s ease;
}
.opt-manual-details[open] summary::after {
  content: '−';
  color: var(--accent);
}
.opt-manual-details summary:hover::after { color: var(--text); }
.opt-manual-details summary .card-title {
  margin: 0;
}
.opt-manual-details summary .opt-manual-trigger-sub {
  font-family: var(--font-mono);
  font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted);
}
.opt-manual-details > .opt-manual-body {
  padding-top: var(--s-4);
}
/* Hide the card-header divider when the accordion is closed — otherwise
   there's a stray bottom line under just the summary row. */
.opt-manual-details:not([open]) summary.card-header {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
}
.opt-manual-details[open] summary.card-header {
  margin-bottom: 0;
}

/* Nudge fund-verdict chip to read more like a status tag */
.opt-fund-verdict {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.10em;
  padding: 3px 8px;
  border-radius: var(--r-2);
}

/* Sub-card heads inside tab panes — render once, smaller */
.opt-tab-pane .opt-tech-foot,
.opt-tab-pane .opt-fund-foot {
  margin-top: var(--s-3);
  padding-top: var(--s-3);
  border-top: 1px dashed var(--border);
}

/* Slightly tighter freshness banner — it competes with the header otherwise */
.freshness {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  text-transform: none;
  letter-spacing: 0;
  border-radius: 0;
}

/* Page subtitle reads as a quiet sentence-case tagline under the header.
   Earlier iterations used mono+uppercase here; that made the page feel
   like a terminal banner rather than a product. */
.page-sub {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  text-transform: none;
  letter-spacing: 0;
  color: var(--muted);
}

/* Tighter narrative cards */
.narr {
  border-radius: var(--r-3);
}
.narr-chip {
  font-size: 12px;
  letter-spacing: 0.04em;
}

/* Section spacing — main cards sit closer to read as one continuous panel */
main { padding-top: var(--s-2); }
.card { margin-bottom: var(--s-3); }

/* === Calendar tab === */
.calendar-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin: var(--s-2) 0 var(--s-3);
}
.calendar-type-filter { display: inline-flex; gap: 4px; }
.calendar-pill {
  appearance: none;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--muted);
  padding: 4px 10px;
  border-radius: var(--r-pill);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  transition: color .12s, background .12s, border-color .12s;
}
.calendar-pill:hover { color: var(--text); }
.calendar-pill.is-on {
  color: var(--text);
  background: color-mix(in srgb, var(--accent) 14%, var(--surface-2));
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
}
/* Live count badge inside each filter pill (populated by renderCalendar). */
.calendar-pill-count {
  margin-left: 5px;
  font: 600 11px/1 var(--font-mono);
  color: var(--muted);
}
.calendar-pill.is-on .calendar-pill-count { color: var(--accent-strong); }
.calendar-pill-count:empty { display: none; }
/* "Up next" overview strip — at-a-glance highlight cards above the timeline,
   driven by the full (unfiltered) event set so it's a stable orientation aid. */
.cal-overview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
  gap: var(--s-2);
  margin: var(--s-3) 0 var(--s-2);
}
.cal-ov-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  text-align: left;
  padding: 11px 13px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--border-strong);
  border-radius: var(--r-3);
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  width: 100%;
}
button.cal-ov-card { cursor: pointer; transition: border-color var(--dur-1), background var(--dur-1), transform var(--dur-1); }
button.cal-ov-card:hover { border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); background: var(--surface-3); }
button.cal-ov-card:active { transform: translateY(1px); }
button.cal-ov-card:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.cal-ov-fomc, .cal-ov-report { border-left-color: var(--warn); }
.cal-ov-earnings { border-left-color: var(--accent); }
.cal-ov-catalyst { border-left-color: var(--pos); }
.cal-ov-total { border-left-color: var(--muted); }
.cal-ov-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: var(--r-2); flex: none; margin-top: 1px;
  background: var(--accent-soft); color: var(--accent);
}
.cal-ov-fomc .cal-ov-icon, .cal-ov-report .cal-ov-icon { background: var(--warn-soft); color: var(--warn); }
.cal-ov-catalyst .cal-ov-icon { background: var(--pos-soft); color: var(--pos); }
.cal-ov-total .cal-ov-icon { background: color-mix(in srgb, var(--muted) 14%, transparent); color: var(--muted-strong); }
.cal-ov-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cal-ov-label { font: 600 10px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.cal-ov-value { font: 700 16px/1.15 var(--font-serif); color: var(--text-strong); letter-spacing: -.01em; }
.cal-ov-sub { font-size: 12px; color: var(--muted-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.calendar-root { display: flex; flex-direction: column; gap: var(--s-3); margin-top: var(--s-2); }
/* === Month-grid calendar ===
   The Calendar tab renders a real wall-calendar month view: a nav bar
   (‹ June 2026 › + Today), a 7-column day grid with compact per-day event
   markers, and a detail panel below showing the selected day's full chips.
   Defaults to the current month; ‹ / › walk the window. */
.cal-monthbar {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
}
.cal-nav-btn {
  appearance: none;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-2);
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
  transition: color .12s, background .12s, border-color .12s;
}
.cal-nav-btn:hover:not(:disabled) {
  color: var(--accent-strong);
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
}
.cal-nav-btn:disabled { opacity: .35; cursor: default; }
.cal-monthbar-label {
  font: 700 17px/1.1 var(--font-serif);
  color: var(--text-strong);
  letter-spacing: -.01em;
  min-width: 9.5em;
  text-align: center;
}
.cal-today-btn {
  appearance: none;
  border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--border));
  background: var(--accent-tint-2);
  color: var(--accent-strong);
  padding: 5px 12px;
  border-radius: var(--r-pill);
  font: 600 12px/1 var(--font-sans);
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.cal-today-btn:hover { background: color-mix(in srgb, var(--accent) 16%, transparent); }
.cal-monthbar-count {
  margin-left: auto;
  font: 500 12px/1 var(--font-mono);
  color: var(--muted);
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
}
.cal-grid-wd {
  font: 600 10px/1 var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
  padding: 2px 0 6px;
}
.cal-cell {
  appearance: none;
  text-align: left;
  font: inherit;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-2);
  min-height: 88px;
  padding: 5px 6px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  overflow: hidden;
  color: var(--text);
}
button.cal-cell { cursor: pointer; transition: border-color .12s, background .12s, box-shadow .12s; }
button.cal-cell:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); background: var(--surface-3); }
button.cal-cell:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.cal-cell.is-out { background: transparent; border-color: transparent; min-height: 0; }
.cal-cell.is-out .cal-cell-num { color: color-mix(in srgb, var(--muted) 55%, transparent); }
.cal-cell.is-skel { min-height: 64px; align-items: center; justify-content: center; }
.cal-cell-num { font: 600 12px/1 var(--font-mono); color: var(--muted-strong); }
.cal-cell.is-today { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.cal-cell.is-today .cal-cell-num { color: var(--accent-strong); }
.cal-cell.is-selected { background: var(--accent-tint-2); border-color: var(--accent); }
.cal-cell-events { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
/* Index calendar — monthly SPY/QQQ/IWM daily-return grid (premium tab). Reuses
   the Calendar tab's .cal-monthbar / .cal-nav-btn / .cal-today-btn / .cal-grid-wd. */
.idx-cal-root { display: flex; flex-direction: column; gap: var(--s-3); }
.idx-cal-toggle { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 3px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-pill); align-self: flex-start; }
.idx-cal-tab { appearance: none; border: 0; background: transparent; color: var(--muted-strong); font: 600 12px/1 var(--font-mono); letter-spacing: .04em; padding: 6px 14px; border-radius: var(--r-pill); cursor: pointer; transition: color .12s, background .12s; }
.idx-cal-tab:hover { color: var(--text); }
.idx-cal-tab.is-on { background: var(--accent-tint-2); color: var(--accent-strong); }
.idx-cal-monthbar { margin-top: 2px; }
.idx-cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.idx-cal-cell { border: 1px solid var(--border); border-radius: var(--r-2); background: var(--surface-2); min-height: 68px; padding: 6px 7px; display: flex; flex-direction: column; justify-content: space-between; gap: 4px; overflow: hidden; }
.idx-cal-cell.is-out { background: transparent; border-color: transparent; min-height: 0; }
.idx-cal-cell.is-out .idx-cal-num { color: color-mix(in srgb, var(--muted) 55%, transparent); }
.idx-cal-cell.is-skel { min-height: 68px; align-items: center; justify-content: center; }
.idx-cal-num { font: 600 12px/1 var(--font-mono); color: var(--muted-strong); }
.idx-cal-pct { font: 700 13px/1 var(--font-mono); font-variant-numeric: tabular-nums; }
.idx-cal-pct-na { color: var(--muted); font-weight: 500; }
.idx-cal-cell.idx-up { border-color: color-mix(in srgb, var(--pos) 45%, var(--border)); background: var(--pos-tint); }
.idx-cal-cell.idx-up .idx-cal-pct { color: var(--pos); }
.idx-cal-cell.idx-dn { border-color: color-mix(in srgb, var(--neg) 45%, var(--border)); background: var(--neg-tint); }
.idx-cal-cell.idx-dn .idx-cal-pct { color: var(--neg); }
.idx-cal-cell.idx-flat .idx-cal-pct { color: var(--muted-strong); }
.idx-cal-cell.is-today { box-shadow: inset 0 0 0 2px var(--accent); border-color: var(--accent); }
.idx-cal-cell.is-today .idx-cal-num { color: var(--accent-strong); }
.idx-cal-summary { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--r-2); background: var(--surface-2); font: 500 13px/1.2 var(--font-sans); color: var(--muted-strong); }
.idx-cal-sum-month { font: 700 14px/1 var(--font-serif); color: var(--text-strong); }
.idx-cal-sum-stat { display: inline-flex; align-items: baseline; gap: 5px; }
.idx-cal-sum-stat b { font-variant-numeric: tabular-nums; }
.idx-cal-sum-ret { margin-left: auto; }
.idx-cal-sum-label { font: 500 11px/1 var(--font-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.idx-cal-empty { padding: 24px; text-align: center; color: var(--muted); }
.idx-up { color: var(--pos); }
.idx-dn { color: var(--neg); }
@media (max-width: 640px) {
  .idx-cal-grid { gap: 3px; }
  .idx-cal-cell { min-height: 52px; padding: 4px 5px; }
  .idx-cal-pct { font-size: 11px; }
  .idx-cal-summary { font-size: 12px; }
  .idx-cal-sum-ret { margin-left: 0; }
}
.cal-mini {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  font: 600 10px/1.25 var(--font-sans);
  color: var(--text);
}
.cal-mini-dot { width: 6px; height: 6px; border-radius: 50%; flex: none; background: var(--muted); }
.cal-mini-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-mini-earnings .cal-mini-dot { background: var(--accent); }
.cal-mini-report .cal-mini-dot, .cal-mini-fomc .cal-mini-dot { background: var(--warn); }
.cal-mini-catalyst .cal-mini-dot { background: var(--pos); }
.cal-mini-macro .cal-mini-dot { background: var(--muted-strong); }
.cal-mini-more { font: 600 10px/1 var(--font-mono); color: var(--muted); padding-left: 10px; }
/* Selected-day detail — reuses the rich .cal-day / .cal-chip styling below.
   Spacing comes from the .calendar-root flex column gap, so no margin here. */
.cal-detail .cal-day { border-top: none; padding-top: 0; }
.cal-detail-empty {
  padding: var(--s-4);
  border: 1px dashed var(--border);
  border-radius: var(--r-2);
  color: var(--muted);
  font-size: 13px;
  text-align: center;
}
.cal-day {
  display: grid;
  grid-template-columns: 124px minmax(0, 1fr);
  gap: var(--s-3);
  align-items: start;
  padding: var(--s-2) 0;
  border-top: 1px solid var(--border);
}
/* The first day row of each month sits right under the month header's own
   bottom border, so drop its top border to avoid a doubled hairline. */
.cal-month-head + .cal-day { border-top: none; }
/* Proximity emphasis — today gets an accent rail + tint; the next week is
   softly raised so the imminent events read first. */
.cal-day.is-today {
  background: linear-gradient(90deg, var(--accent-tint-2), transparent 62%);
  border-radius: var(--r-2);
  box-shadow: inset 3px 0 0 var(--accent);
  padding-left: 9px;
  margin-left: -9px;
}
.cal-day.is-soon { background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 3%, transparent), transparent 50%); }
.cal-date {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 4px;
}
.cal-date-main {
  font: 600 13px/1.2 var(--font-mono);
  color: var(--muted);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.cal-day.is-today .cal-date-main { color: var(--accent-strong); }
.cal-reltag {
  align-self: flex-start;
  font: 600 10px/1 var(--font-mono);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 2px 6px;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--muted) 14%, transparent);
}
.cal-reltag.is-today { color: var(--accent-fg); background: var(--accent); }
.cal-chips { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cal-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-left-width: 3px;
  border-radius: var(--r-2);
  font-size: 13px;
  line-height: 1.4;
  color: var(--text);
}
.cal-chip-sym {
  font: 600 13px/1 var(--font-mono);
  color: var(--text);
  letter-spacing: .02em;
}
/* Leading type glyph — a scannable rail that inherits each chip's color. */
.cal-chip-ico { display: inline-flex; align-items: center; flex: none; opacity: .9; }
.cal-chip-icon { display: block; }
.cal-earnings .cal-chip-ico { color: var(--accent); }
.cal-fomc .cal-chip-ico { color: var(--warn); }
.cal-report .cal-chip-ico { color: var(--warn); }
.cal-catalyst .cal-chip-ico { color: var(--pos); }
.cal-fed .cal-chip-ico { color: var(--neg); }
.cal-cpi .cal-chip-ico { color: var(--warn); }
.cal-sec .cal-chip-ico, .cal-macro .cal-chip-ico { color: var(--muted-strong); }
/* Clickable ticker symbol inside earnings/catalyst chips → opens the Grade tab. */
.cal-chip-sym-btn {
  appearance: none;
  border: none;
  background: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  border-bottom: 1px dashed transparent;
  transition: color var(--dur-1), border-color var(--dur-1);
}
.cal-chip-sym-btn:hover { color: var(--accent); border-bottom-color: color-mix(in srgb, var(--accent) 50%, transparent); }
.cal-chip-sym-btn:focus-visible { outline: none; color: var(--accent); border-bottom-color: var(--accent); }
.cal-chip-tag {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: var(--r-1);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent);
}
.cal-chip-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cal-chip-source {
  font-size: 11px;
  color: var(--muted);
  font-style: italic;
}
.cal-chip-stale {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(245, 158, 11, 0.15);
  color: var(--warn);
  font: 600 11px/1.4 var(--font-mono);
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: help;
}
.cal-chip.is-stale .cal-report-val { color: var(--muted); }
.cal-chip-time {
  font: 600 11px/1 var(--font-mono);
  color: var(--muted);
  letter-spacing: .04em;
  padding: 2px 5px;
  border-radius: var(--r-1);
  background: color-mix(in srgb, var(--muted) 12%, transparent);
}
.cal-chip-move {
  font: 600 11px/1 var(--font-mono);
  color: var(--warn);
  letter-spacing: .02em;
  padding: 2px 5px;
  border-radius: var(--r-1);
  background: color-mix(in srgb, var(--warn) 14%, transparent);
  cursor: help;
}
.cal-earnings { border-left-color: var(--accent); }
.cal-fed { border-left-color: var(--neg); }
.cal-fed .cal-chip-tag { background: color-mix(in srgb, var(--neg) 14%, transparent); color: var(--neg); }
.cal-cpi { border-left-color: var(--warn); }
.cal-cpi .cal-chip-tag { background: color-mix(in srgb, var(--warn) 16%, transparent); color: var(--warn); }
.cal-sec { border-left-color: var(--muted); }
.cal-sec .cal-chip-tag { background: color-mix(in srgb, var(--muted) 18%, transparent); color: var(--muted); }
.cal-macro { border-left-color: color-mix(in srgb, var(--accent) 60%, var(--border)); }
.cal-fomc { border-left-color: var(--warn); }
.cal-fomc .cal-chip-tag { background: color-mix(in srgb, var(--warn) 16%, transparent); color: var(--warn); }
/* Ticker-specific catalyst chip. Default border / tag color picks up the
   pos accent; category-specific variants below recolor by event flavor so
   FDA reads differently from a contract award or a court ruling at a
   glance. */
.cal-catalyst { border-left-color: var(--pos); }
.cal-catalyst .cal-chip-tag { background: color-mix(in srgb, var(--pos) 14%, transparent); color: var(--pos); }
.cal-catalyst-fda { border-left-color: var(--pos); }
.cal-catalyst-fda .cal-chip-tag { background: color-mix(in srgb, var(--pos) 16%, transparent); color: var(--pos); }
.cal-catalyst-contract { border-left-color: var(--accent); }
.cal-catalyst-contract .cal-chip-tag { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); }
.cal-catalyst-launch { border-left-color: var(--accent); }
.cal-catalyst-launch .cal-chip-tag { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
.cal-catalyst-court { border-left-color: var(--neg); }
.cal-catalyst-court .cal-chip-tag { background: color-mix(in srgb, var(--neg) 14%, transparent); color: var(--neg); }
.cal-catalyst-trial { border-left-color: var(--pos); }
.cal-catalyst-trial .cal-chip-tag { background: color-mix(in srgb, var(--pos) 14%, transparent); color: var(--pos); }
.cal-catalyst-merger { border-left-color: var(--warn); }
.cal-catalyst-merger .cal-chip-tag { background: color-mix(in srgb, var(--warn) 14%, transparent); color: var(--warn); }
.cal-catalyst-investor { border-left-color: color-mix(in srgb, var(--accent) 75%, var(--border)); }
.cal-catalyst-investor .cal-chip-tag { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); }
.cal-catalyst-guidance { border-left-color: var(--warn); }
.cal-catalyst-guidance .cal-chip-tag { background: color-mix(in srgb, var(--warn) 14%, transparent); color: var(--warn); }
.cal-catalyst-other { border-left-color: var(--muted); }
.cal-catalyst-other .cal-chip-tag { background: color-mix(in srgb, var(--muted) 18%, transparent); color: var(--muted); }
.cal-chip-conf {
  font: 600 10px/1 var(--font-mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 2px 5px;
  border-radius: var(--r-1);
  background: color-mix(in srgb, var(--muted) 14%, transparent);
  cursor: help;
}
.cal-session {
  font: 600 10px/1 var(--font-mono);
  letter-spacing: .08em;
  padding: 2px 5px;
  border-radius: var(--r-1);
  background: color-mix(in srgb, var(--muted) 22%, transparent);
  color: var(--muted);
  text-transform: uppercase;
  cursor: help;
}
.cal-session-am {
  background: color-mix(in srgb, var(--pos) 18%, transparent);
  color: var(--pos);
}
.cal-session-pm {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--accent);
}
.cal-report {
  flex-direction: column;
  align-items: stretch;
  border-left-color: var(--warn);
  padding: 8px 12px;
  gap: 6px;
}
.cal-report-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.cal-report-head .cal-chip-tag {
  background: color-mix(in srgb, var(--warn) 16%, transparent);
  color: var(--warn);
}
.cal-report-grid {
  display: grid;
  /* Cells span the grid evenly; the renderer drops empty Consensus/Forecast
     so the column count adapts (typically 2–4 depending on data). */
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 6px;
}
.cal-report-cell {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 5px 8px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-1);
  min-width: 0;
}
.cal-report-label {
  font: 600 10px/1 var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
.cal-report-val {
  font: 600 13px/1.2 var(--font-mono);
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 640px) {
  .cal-report-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Report chip → clickable; opens the bar-chart + summary modal. */
.cal-report-clickable { cursor: pointer; }
.cal-report-clickable:hover { border-color: var(--accent); }
.cal-report-clickable:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cal-report-expand { margin-left: 6px; font-size: 11px; opacity: .5; }
.cal-report-clickable:hover .cal-report-expand { opacity: 1; }
/* Report detail modal (bar chart + summary). */
body.cal-rc-open { overflow: hidden; }
.cal-rc-overlay {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: var(--s-3);
  background: rgba(0, 0, 0, 0.6); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.cal-rc-overlay[hidden] { display: none; }
.cal-rc-modal {
  position: relative;
  width: min(720px, 96vw); max-height: 90vh; overflow-y: auto;
  background: var(--surface-2); border: 1px solid var(--border-strong);
  border-radius: var(--r-3); padding: var(--s-4);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.cal-rc-close {
  position: absolute; top: 10px; right: 10px;
  width: 30px; height: 30px; border-radius: var(--r-2);
  background: transparent; border: 1px solid var(--border-strong);
  color: var(--text-3); font-size: 1.1rem; line-height: 1; cursor: pointer;
  transition: background 120ms, color 120ms, border-color 120ms;
}
.cal-rc-close:hover { background: var(--neg-tint); border-color: var(--neg); color: var(--neg); }
.cal-rc-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; padding-right: 34px; }
.cal-rc-title { margin: 0; font-size: 1.05rem; color: var(--text-strong); }
.cal-rc-date { font: 600 12px/1 var(--font-mono); color: var(--muted); }
.cal-rc-summary { margin: var(--s-2) 0 var(--s-3); color: var(--text-2); font-size: 0.92rem; line-height: 1.5; }
.cal-rc-chart { margin-bottom: var(--s-3); }
.cal-rc-svg { width: 100%; height: auto; display: block; }
.cal-rc-bar { fill: var(--info); }
.cal-rc-bar.is-neg { fill: var(--neg); }
.cal-rc-bar.is-latest { fill: var(--accent); }
.cal-rc-grid { stroke: var(--hairline); stroke-width: 1; }
.cal-rc-grid.is-zero { stroke: var(--border-strong); }
.cal-rc-ylabel { fill: var(--muted); font: 10px var(--font-mono); text-anchor: end; }
.cal-rc-xlabel { fill: var(--muted); font: 10px var(--font-mono); }
.cal-rc-nochart { padding: var(--s-4); text-align: center; color: var(--muted); font-size: 0.85rem; background: var(--surface); border: 1px dashed var(--hairline); border-radius: var(--r-2); }
.cal-rc-figs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--s-2); }
.cal-rc-fig { display: flex; flex-direction: column; gap: 2px; padding: 6px 10px; background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-2); }
.cal-rc-fig-l { font: 600 10px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.cal-rc-fig-v { font: 600 14px/1.2 var(--font-mono); color: var(--text); }
.cal-rc-source { font-size: 0.72rem; color: var(--muted); }
.fomc-widget {
  margin-top: var(--s-2);
  padding: var(--s-3);
  border: 1px solid var(--border);
  border-left: 3px solid var(--warn);
  border-radius: var(--r-2);
  background: var(--surface-2);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.fomc-head {
  display: flex;
  gap: var(--s-4);
  flex-wrap: wrap;
  align-items: baseline;
}
.fomc-rate, .fomc-next { display: flex; flex-direction: column; gap: 2px; }
.fomc-rate-label, .fomc-next-label {
  font: 600 11px/1 var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
.fomc-rate-value {
  font: 700 22px/1.1 var(--font-mono);
  color: var(--text-strong);
}
.fomc-next-value {
  font: 600 13px/1.2 var(--font-mono);
  color: var(--text);
}
.fomc-rate-asof {
  font-size: 11px;
  color: var(--muted);
  font-style: italic;
}
.fomc-rate-stale {
  display: inline-block;
  margin-top: 2px;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(245, 158, 11, 0.15);
  color: var(--warn);
  font: 600 11px/1.4 var(--font-mono);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.fomc-rate-missing .fomc-rate-value { color: var(--muted); }
/* Headline readout — one stacked cumulative-odds bar for the next meeting, so
   the most-watched number reads at a glance above the detail tables. */
.fomc-headline {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 11px 13px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-3);
}
.fomc-hl-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.fomc-hl-title { font: 700 13px/1.2 var(--font-serif); color: var(--text-strong); }
.fomc-hl-cap { font: 600 10px/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.fomc-hl-bar {
  display: flex;
  height: 12px;
  border-radius: var(--r-pill);
  overflow: hidden;
  background: var(--surface-3);
}
.fomc-hl-seg { display: block; height: 100%; min-width: 3px; transition: flex var(--dur-2) var(--ease-out); }
.fomc-hl-seg.cut { background: var(--pos); }
.fomc-hl-seg.hold { background: color-mix(in srgb, var(--muted) 52%, var(--surface-3)); }
.fomc-hl-seg.hike { background: var(--neg); }
.fomc-hl-keys { display: flex; flex-wrap: wrap; gap: 16px; }
.fomc-hl-key { display: inline-flex; align-items: center; gap: 5px; font: 600 12px/1 var(--font-mono); color: var(--muted); }
.fomc-hl-key::before { content: ""; width: 8px; height: 8px; border-radius: 2px; display: inline-block; }
.fomc-hl-key.cut::before { background: var(--pos); }
.fomc-hl-key.hold::before { background: color-mix(in srgb, var(--muted) 52%, var(--surface-3)); }
.fomc-hl-key.hike::before { background: var(--neg); }
.fomc-hl-key b { font-size: 13px; color: var(--text); }
.fomc-hl-key.cut b { color: var(--pos); }
.fomc-hl-key.hike b { color: var(--neg); }
.fomc-meeting + .fomc-meeting { margin-top: var(--s-3); border-top: 1px solid var(--hairline); padding-top: var(--s-2); }
.fomc-meeting-title {
  font: 600 13px/1.2 var(--font-mono);
  color: var(--text);
  margin: 0 0 6px 0;
  letter-spacing: .03em;
}
.fomc-prob-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.fomc-prob-table th, .fomc-prob-table td {
  padding: 4px 8px;
  text-align: right;
  border-bottom: 1px solid var(--hairline);
}
.fomc-prob-table thead th {
  font: 600 11px/1 var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
.fomc-prob-row {
  text-align: left !important;
  font-weight: 600;
  color: var(--text);
}
.fomc-prob-empty {
  margin: 6px 0 0 0;
  font-size: 12px;
  color: var(--muted);
  font-style: italic;
}
.fomc-prob-empty a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.fomc-prob-empty a:hover { color: var(--text-strong); }
.fomc-prob-cap {
  font: 600 10px/1 var(--font-mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 4px 0;
}
/* Prediction-market cross-check (Kalshi + Polymarket) under the futures table. */
.fomc-pm { margin-top: var(--s-2); }
.fomc-pm-head {
  font: 600 11px/1 var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.fomc-pm-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.fomc-pm-table th, .fomc-pm-table td {
  padding: 3px 8px;
  text-align: right;
  border-bottom: 1px solid var(--hairline);
}
.fomc-pm-table thead th {
  font: 600 11px/1 var(--font-mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}
.fomc-pm-name { text-align: left !important; font-weight: 600; color: var(--text); }
.fomc-pm-name a { color: var(--accent); text-decoration: none; }
.fomc-pm-name a:hover { text-decoration: underline; }
.fomc-pm-stale {
  padding: 1px 5px;
  border-radius: 999px;
  background: rgba(245, 158, 11, 0.15);
  color: var(--warn);
  font: 600 10px/1.4 var(--font-mono);
  letter-spacing: .04em;
  text-transform: uppercase;
}
/* Consensus-divergence badge (futures vs Kalshi vs Polymarket disagree). */
.fomc-pm-diverge {
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(245, 158, 11, 0.15);
  color: var(--warn);
  font: 600 10px/1.4 var(--font-mono);
  letter-spacing: .03em;
}
/* Per-platform volume + thin-liquidity tag. */
.fomc-pm-vol { font: 500 11px/1 var(--font-mono); color: var(--muted); }
.fomc-pm-thin, .cal-report-pm-thin {
  padding: 0 5px;
  border-radius: 999px;
  background: var(--surface-3, rgba(127,127,127,.15));
  color: var(--muted);
  font: 600 10px/1.5 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.fomc-pm-row.is-thin td, .fomc-pm-row.is-thin .fomc-pm-name a { opacity: .55; }
.cal-report-pm-item.is-thin { opacity: .7; }
/* Hold-probability trend cell: tiny sparkline + Δ vs ~1w ago. */
.fomc-pm-trend { white-space: nowrap; }
.fomc-pm-spark { vertical-align: middle; color: var(--muted); }
.fomc-pm-delta { margin-left: 5px; font: 600 11px/1 var(--font-mono); }
.fomc-pm-delta.up { color: var(--up, #16a34a); }
.fomc-pm-delta.down { color: var(--down, #dc2626); }
.fomc-pm-delta.flat { color: var(--muted); }
/* Per-meeting tally chips + the all-meetings odds ladder (move tracking). */
.fomc-meeting-summary {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin: 0 0 8px 0;
}
.fomc-move-odds {
  font: 600 12px/1 var(--font-mono);
  color: var(--muted);
  letter-spacing: .03em;
}
.fomc-flag {
  display: inline-block;
  font: 700 11px/1 var(--font-mono);
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: var(--r-pill);
  background: rgba(234, 179, 8, 0.16);
  color: var(--warn);
  border: 1px solid rgba(234, 179, 8, 0.4);
}
.fomc-flag-hike { background: rgba(234, 88, 12, 0.18); color: #a04400; border-color: rgba(234, 88, 12, 0.45); }
.fomc-flag-cut { background: color-mix(in srgb, var(--pos) 16%, transparent); color: var(--pos); border-color: color-mix(in srgb, var(--pos) 40%, transparent); }
:root[data-theme="dark"] .fomc-flag-hike { color: #fdba74; }
.fomc-shift {
  font: 600 11px/1 var(--font-mono);
  letter-spacing: .02em;
  padding: 2px 6px;
  border-radius: var(--r-1, 4px);
  background: var(--surface-2);
  color: var(--muted);
}
.fomc-shift.hawk { color: var(--neg); }
.fomc-shift.dove { color: var(--pos); }
.fomc-shift.flat { color: var(--muted); }
.fomc-live {
  font: 600 11px/1 var(--font-mono);
  letter-spacing: .04em;
  color: var(--pos);
  padding: 3px 9px;
  border: 1px solid color-mix(in srgb, var(--pos) 35%, transparent);
  border-radius: 999px;
  white-space: nowrap;
  align-self: center;
  margin-left: auto;
}
.fomc-ladder-wrap { margin-top: var(--s-3); border-top: 1px solid var(--hairline); padding-top: var(--s-2); }
.fomc-ladder-title {
  font: 600 12px/1.2 var(--font-mono);
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 6px 0;
}
.fomc-ladder { width: 100%; border-collapse: collapse; font-size: 13px; }
.fomc-ladder th, .fomc-ladder td {
  padding: 4px 8px; text-align: right; border-bottom: 1px solid var(--hairline);
  font-variant-numeric: tabular-nums;
}
.fomc-ladder thead th {
  font: 600 11px/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
}
.fomc-ladder-meeting { text-align: left !important; font-weight: 600; color: var(--text); white-space: nowrap; }
.fomc-ladder-move { font-weight: 600; color: var(--text); }
.fomc-ladder-trend { text-align: right !important; white-space: nowrap; }
.fomc-ladder-flag { text-align: right !important; }
.fomc-ladder tr.is-notable td { background: rgba(234, 179, 8, 0.08); }
.fomc-ladder-na td { color: var(--muted); font-style: italic; }
.fomc-legend { margin: var(--s-2) 0 0 0; font-size: 12px; color: var(--muted); line-height: 1.5; }
.fomc-legend strong { color: var(--text); font-weight: 600; }
/* Market-implied pill on a macro report chip. */
.cal-report-pm { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.cal-report-pm-item {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  padding: 2px 8px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  font-size: 12px;
  color: var(--text);
  text-decoration: none;
  background: var(--surface-2);
}
a.cal-report-pm-item:hover { border-color: var(--accent); }
.cal-report-pm-plat {
  font: 600 11px/1 var(--font-mono);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
}
.cal-report-pm-lbl { color: var(--muted); }
/* A flat chip (earnings) carrying a market-implied prediction line: switch to a
   stacked layout so the pill sits on its own row beneath the head. */
.cal-chip.has-pm { flex-direction: column; align-items: stretch; }
.cal-chip-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.calendar-empty {
  padding: var(--s-5) var(--s-3);
  text-align: center;
  color: var(--muted);
  font-size: 13px;
  border: 1px dashed var(--hairline);
  border-radius: var(--r-2);
  margin-top: var(--s-2);
  background: color-mix(in srgb, var(--surface-2) 50%, transparent);
}
.calendar-empty::before {
  content: "📅";
  display: block;
  font-size: 18px;
  margin-bottom: 4px;
  opacity: 0.5;
}
/* === 13F filings tab === */
.f13-root {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  margin-top: var(--s-3);
}
.f13-empty {
  padding: var(--s-4) var(--s-3);
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}
.f13-source {
  font-size: 13px;
  color: var(--muted);
  margin: 0;
}
.f13-block {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.f13-block-title {
  font: 600 13px/1.2 var(--font-mono);
  letter-spacing: .03em;
  color: var(--text);
  margin: 0;
}
.f13-note, .f13-tail {
  font-size: 12px;
  color: var(--muted);
  margin: 0;
  font-style: italic;
}
.f13-paragraph {
  font-size: 13px;
  color: var(--text);
  margin: 0;
  line-height: 1.5;
}
.f13-list {
  margin: 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  line-height: 1.5;
}
.f13-table-scroll {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--r-2);
  background: var(--surface-2);
}
.f13-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  min-width: 680px;
}
.f13-table th, .f13-table td {
  padding: 7px 10px;
  text-align: left;
  border-bottom: 1px solid var(--hairline);
  white-space: nowrap;
}
.f13-table th {
  font: 600 11px/1 var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--surface);
}
.f13-table tbody tr:last-child td { border-bottom: none; }
.f13-table tbody tr:hover { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.f13-num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--font-mono); }
.f13-tkr { font: 600 13px/1.2 var(--font-mono); color: var(--text-strong); letter-spacing: .02em; }
.f13-muted { color: var(--muted); }
.f13-rank-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.f13-rank-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  line-height: 1.5;
  padding: 4px 8px;
  border-bottom: 1px solid var(--hairline);
  flex-wrap: wrap;
}
.f13-rank-row:last-child { border-bottom: none; }
.f13-rank {
  font: 700 12px/1 var(--font-mono);
  color: var(--accent);
  min-width: 32px;
  letter-spacing: .04em;
}
.f13-rank-range {
  color: var(--muted);
  font-weight: 600;
  min-width: auto;
}
.f13-pos-name {
  color: var(--muted);
  font-size: 13px;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.f13-pos-note {
  color: var(--muted);
  font-size: 12px;
  font-style: italic;
}
.f13-firm {
  border: 1px solid var(--border);
  border-radius: var(--r-2);
  background: var(--surface-2);
  margin-top: var(--s-2);
  overflow: hidden;
}
.f13-firm[open] {
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
}
.f13-firm-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  cursor: pointer;
  user-select: none;
  list-style: none;
  flex-wrap: wrap;
}
.f13-firm-summary::-webkit-details-marker { display: none; }
.f13-firm-summary::before {
  content: "▸";
  display: inline-block;
  color: var(--muted);
  transition: transform .12s;
  margin-right: 4px;
}
.f13-firm[open] .f13-firm-summary::before { transform: rotate(90deg); }
.f13-firm-name {
  font: 600 13px/1.2 var(--font-mono);
  color: var(--text-strong);
  letter-spacing: .03em;
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}
.f13-firm-meta {
  font-size: 12px;
  color: var(--muted);
  font-family: var(--font-mono);
  white-space: nowrap;
}
.f13-firm .f13-table-scroll {
  border: none;
  border-top: 1px solid var(--hairline);
  border-radius: 0;
  background: var(--surface);
}
.f13-flow-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3);
}
.f13-flow-col {
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--border);
  border-radius: var(--r-2);
  background: var(--surface-2);
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.f13-flow-buy { border-left: 3px solid var(--pos); }
.f13-flow-sell { border-left: 3px solid var(--neg); }
.f13-footer {
  border-top: 1px solid var(--border);
  padding-top: var(--s-2);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.f13-disclaimer, .f13-links {
  font-size: 12px;
  color: var(--muted);
  margin: 0;
  line-height: 1.5;
}
@media (max-width: 640px) {
  .f13-flow-pair { grid-template-columns: 1fr; }
}

/* === Top picks tab === */
/* Master → detail. The landing view is a grid of clickable ticker tabs;
   clicking one opens a focused page that judges just that ticker, with a back
   button to return. Keeps the long judgment cards off the landing view entirely
   — far cleaner to scan, especially on mobile. */
.picks-listview[hidden],
.picks-detail[hidden] { display: none; }
.picks-detail { margin-top: var(--s-3); }

/* Landing grid of ticker tabs. */
.picks-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  gap: 10px;
  margin-top: var(--s-3);
}
.pick-tab-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "rank head   score"
    "rank tier   tier"
    "rank thesis thesis"
    "rank entry  entry"
    "rank con    con"
    "rank meta   meta"
    "rank cta    cta";
  column-gap: 12px;
  row-gap: 3px;
  align-items: center;
  text-align: left;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-left-width: 4px;
  border-radius: var(--r-3);
  background: var(--surface-2);
  background-image: var(--grad-surface);
  box-shadow: var(--elev-1);
  color: var(--text);
  cursor: pointer;
  appearance: none;
  font: inherit;
  transition: border-color .15s var(--ease-out), box-shadow .15s var(--ease-out), transform .12s var(--ease-out);
}
.pick-tab-card:hover {
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
  box-shadow: var(--elev-2);
  transform: translateY(-1px);
}
.pick-tab-card.call { border-left-color: var(--pos); }
.pick-tab-card.put  { border-left-color: var(--neg); }
.ptc-rank {
  grid-area: rank;
  align-self: start;
  font: 700 20px/1 var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}
.pick-tab-card.call .ptc-rank { color: color-mix(in srgb, var(--pos) 70%, var(--muted)); }
.pick-tab-card.put  .ptc-rank { color: color-mix(in srgb, var(--neg) 70%, var(--muted)); }
.ptc-head { grid-area: head; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; min-width: 0; }
/* The ticker is the card's headline — it must never truncate. Keep it from
   shrinking; the side/timing badges wrap to a second line on a narrow card
   instead of crushing the symbol to "C…". */
.ptc-sym {
  flex: 0 0 auto;
  font: 700 16px/1 var(--font-mono);
  color: var(--text-strong);
  letter-spacing: .02em;
  white-space: nowrap;
}
.ptc-side {
  flex: 0 0 auto;
  font: 700 9px/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 3px 5px;
  border-radius: 3px;
}
.ptc-side-call { color: var(--pos); background: color-mix(in srgb, var(--pos) 12%, transparent); }
.ptc-side-put  { color: var(--neg); background: color-mix(in srgb, var(--neg) 12%, transparent); }
/* Neutral muted tint over the card (the card itself is --surface-2, so a flat
   --surface-2 chip would vanish). Geometry matches the adjacent .ptc-side chip;
   only the hue is neutral instead of the call/put green/red. */
.ptc-streak {
  flex: 0 0 auto;
  font: 700 9px/1 var(--font-mono);
  letter-spacing: .06em;
  padding: 3px 5px;
  border-radius: 3px;
  color: var(--muted);
  background: color-mix(in srgb, var(--muted) 16%, transparent);
  white-space: nowrap;
}
/* Live "since it appeared" modeled-contract mark, read from the track record.
   Mono, tabular, color-coded by sign (sig-pos/sig-neg set the hue); the "new"
   variant (same-build debut) is a muted, neutral badge. */
.ptc-live {
  flex: 0 0 auto;
  font: 700 10px/1 var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
  padding: 3px 5px;
  border-radius: 3px;
  white-space: nowrap;
  background: color-mix(in srgb, currentColor 12%, transparent);
}
.ptc-live-new {
  color: var(--muted);
  background: color-mix(in srgb, var(--muted) 14%, transparent);
}
.ptc-score {
  grid-area: score;
  align-self: start;
  font: 700 20px/1 var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--text-strong);
}
/* P5.1 execution-cost debit beside the score — the round-trip spread charged
   against the grade for roster ranking. */
.ptc-cost {
  font: 600 12px/1 var(--font-mono);
  color: var(--warn);
  white-space: nowrap;
}
.pick-tab-card.call .ptc-score { color: var(--pos); }
.pick-tab-card.put  .ptc-score { color: var(--neg); }
.ptc-tier {
  grid-area: tier;
  font: 600 12px/1.3 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--text-strong);
}
/* Entry call — "buy now" (green) vs a specific wait-for trigger price (amber).
   Surfaced on the grid tile so the ranked list is triageable at a glance. */
.ptc-entry {
  grid-area: entry;
  justify-self: start;
  font: 700 11px/1 var(--font-mono);
  letter-spacing: .03em;
  padding: 4px 8px;
  border-radius: 4px;
  white-space: nowrap;
}
.ptc-entry-now {
  color: var(--pos);
  background: color-mix(in srgb, var(--pos) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--pos) 40%, var(--border));
}
.ptc-entry-wait {
  color: var(--warn);
  background: color-mix(in srgb, var(--warn) 14%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--warn) 36%, var(--border));
}
/* Contract economics line — strike·DTE, premium, move-to-breakeven, earnings
   flag. Makes the premium / breakeven sorts legible on the grid and lets picks
   be compared without drilling into each detail page. */
.ptc-contract {
  grid-area: con;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 3px 8px;
  margin-top: 1px;
  font: 600 12px/1.2 var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.ptc-con-k { color: var(--text-strong); }
.ptc-con-prem { color: var(--text); }
.ptc-con-be { color: var(--muted); }
/* Breakeven move colored by reachability vs the chain-priced 1σ move (rrRatio). */
.ptc-con-be-good { color: var(--pos); }
.ptc-con-be-fair { color: var(--warn); }
.ptc-con-be-bad  { color: var(--neg); }
.ptc-con-er {
  color: var(--warn);
  font-weight: 700;
  letter-spacing: .03em;
}
/* Defined-risk debit-spread marker on the landing tile (PICKS_VERT_AUTO). */
.ptc-con-spread {
  color: var(--accent);
  font-weight: 700;
  letter-spacing: .02em;
}
/* Probability-of-profit chip on the landing tile (color via .ptc-con-be-*). */
.ptc-con-pop { font-weight: 700; letter-spacing: .02em; }
/* Defined-risk spread structure block on the pick detail (pickVerticalStructureHtml). */
.pick-vert {
  margin: 10px 0 4px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 6%, transparent);
}
.pick-vert-head {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.pick-vert-tag {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: .03em;
}
.pick-vert-legs { margin: 8px 0; display: flex; flex-direction: column; gap: 4px; }
.pick-vert-leg {
  display: grid;
  grid-template-columns: 52px 1fr auto;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
}
.pick-vert-side { font-size: 11px; font-weight: 700; letter-spacing: .04em; }
.pick-vert-long  { color: var(--pos); }
.pick-vert-short { color: var(--neg); }
.pick-vert-k { color: var(--text); font-variant-numeric: tabular-nums; }
.pick-vert-prem { color: var(--muted); font-variant-numeric: tabular-nums; }
.pick-vert-econ { display: flex; gap: 16px; flex-wrap: wrap; padding-top: 6px; border-top: 1px dashed var(--border); }
.pick-vert-stat-label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.pick-vert-stat-val { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text); }
.pick-vert-loss { color: var(--neg); }
.pick-vert-profit { color: var(--pos); }
.ptc-thesis {
  grid-area: thesis;
  font: 400 12.5px/1.45 var(--font-sans); color: var(--text);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ptc-meta { grid-area: meta; font-size: 12px; color: var(--muted); }
.ptc-cta {
  grid-area: cta;
  margin-top: 4px;
  font: 600 11px/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--accent);
}

/* Detail page back button. */
.picks-back {
  display: inline-flex;
  align-items: center;
  padding: 7px 13px;
  margin-bottom: var(--s-3);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--surface-2);
  color: var(--text);
  cursor: pointer;
  appearance: none;
  font: 600 13px/1 var(--font-mono);
  transition: background .15s var(--ease-out), border-color .15s var(--ease-out);
}
.picks-back:hover {
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
  border-color: color-mix(in srgb, var(--accent) 30%, var(--border));
}
.picks-empty {
  padding: var(--s-4) var(--s-3);
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}
.picks-foot {
  font-size: 11px;
  color: var(--muted);
  margin: var(--s-3) 0 0;
  line-height: 1.45;
}
.pick-card {
  display: grid;
  /* Two columns: rank gutter + main body. The score breakdown used to be a
     third always-on column; it now lives inside the body as the "Grade" tab. */
  grid-template-columns: 48px minmax(0, 1fr);
  gap: var(--s-3);
  padding: var(--s-3);
  border: 1px solid var(--border);
  border-left-width: 4px;
  border-radius: var(--r-3);
  background: var(--surface-2);
  background-image: var(--grad-surface);
  box-shadow: var(--elev-1);
  align-items: stretch;
  /* Tab switches scroll here; clear the sticky site-header + ticker tab strip. */
  scroll-margin-top: 108px;
  transition: border-color .18s var(--ease-out), box-shadow .18s var(--ease-out), transform .18s var(--ease-out);
}
/* Side color bleeds into the rank gutter only, then fades — a directional
   cue that doesn't wash the whole card. */
.pick-card.call { border-left-color: var(--pos); background-image: linear-gradient(90deg, color-mix(in srgb, var(--pos) 7%, transparent) 0, transparent 64px), var(--grad-surface); }
.pick-card.put  { border-left-color: var(--neg); background-image: linear-gradient(90deg, color-mix(in srgb, var(--neg) 7%, transparent) 0, transparent 64px), var(--grad-surface); }
.pick-card:hover {
  border-color: color-mix(in srgb, var(--accent) 30%, var(--border));
}
/* The #1 leader card sits proud — real elevation + a side-keyed top wash +
   a contained directional glow, not the old near-invisible flat tint. */
.pick-card.pick-card-leader {
  border-left-width: 5px;
  box-shadow: var(--elev-2);
}
.pick-card-leader.call {
  background-image: linear-gradient(180deg, color-mix(in srgb, var(--pos) 12%, var(--surface-2)) 0%, var(--surface-2) 42%), var(--grad-surface);
  box-shadow: var(--elev-2), 0 0 28px -10px var(--pos-glow);
}
.pick-card-leader.put {
  background-image: linear-gradient(180deg, color-mix(in srgb, var(--neg) 12%, var(--surface-2)) 0%, var(--surface-2) 42%), var(--grad-surface);
  box-shadow: var(--elev-2), 0 0 28px -10px var(--neg-glow);
}

.pick-rank {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 1px;
  /* Anchor the rank to the top of the gutter so it baseline-aligns with the
     ticker in the head row — not floating at the vertical center of a very
     tall card. */
  align-self: start;
  padding-top: 2px;
  text-align: center;
  color: var(--muted);
  letter-spacing: -.02em;
}
.pick-rank-hash {
  font: 600 13px/1 var(--font-mono);
  opacity: .55;
}
.pick-rank-num {
  font: 700 26px/1 var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.pick-card.call .pick-rank { color: color-mix(in srgb, var(--pos) 70%, var(--muted)); }
.pick-card.put  .pick-rank { color: color-mix(in srgb, var(--neg) 70%, var(--muted)); }
.pick-card.call .pick-rank-top1 { color: var(--pos); }
.pick-card.put  .pick-rank-top1 { color: var(--neg); }
/* The #1 pick gets a filled medallion instead of plain "#1" text. */
.pick-rank-top1 .pick-rank-hash { display: none; }
.pick-rank-top1 .pick-rank-num {
  color: var(--accent-fg);
  border-radius: var(--r-pill);
  padding: 4px 9px;
  font-size: 24px;
  box-shadow: var(--elev-glow);
}
.pick-card.call .pick-rank-top1 .pick-rank-num { background: var(--pos); }
.pick-card.put  .pick-rank-top1 .pick-rank-num { background: var(--neg); }
.pick-rank-top2 .pick-rank-num,
.pick-rank-top3 .pick-rank-num { font-size: 28px; }
.pick-main { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pick-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.pick-symbol {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 0;
  font: 700 16px/1 var(--font-mono);
  color: var(--text-strong);
  cursor: pointer;
  letter-spacing: .02em;
  transition: color .12s var(--ease-out);
}
.pick-symbol:hover { color: var(--accent); }
.pick-spot {
  font: 500 13px/1 var(--font-mono);
  color: var(--muted);
}
.pick-sector {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
  padding: 2px 6px;
  border-radius: var(--r-1);
  border: 1px solid var(--border);
}
.pick-side {
  font: 700 11px/1 var(--font-mono);
  letter-spacing: .08em;
  padding: 3px 7px;
  border-radius: var(--r-1);
}
.pick-side-call { background: var(--pos-soft); color: var(--pos); }
.pick-side-put { background: var(--neg-soft); color: var(--neg); }
.pick-side-neutral { background: var(--surface); color: var(--muted); border: 1px solid var(--border); }

/* Grade-only card (off-list searched ticker) — no rank gutter, so collapse the
   pick-card's two-column grid to a single column. */
.pick-card.pick-grade-card { grid-template-columns: minmax(0, 1fr); }
/* No-trade names render neutral (no green/red side wash). */
.pick-card.pick-grade-neutral { border-left-color: var(--border); }
.pick-offlist-note {
  margin: 0 0 var(--s-3);
  padding: 8px 10px;
  border-radius: var(--r-2);
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: var(--fs-sm);
  line-height: 1.45;
}
.pick-streak {
  font: 600 11px/1 var(--font-mono);
  letter-spacing: .04em;
  padding: 3px 6px;
  border-radius: var(--r-1);
}
.pick-streak-green { background: var(--pos-soft); color: var(--pos); }
.pick-streak-red { background: var(--neg-soft); color: var(--neg); }
.pick-tenure {
  font: 600 11px/1 var(--font-mono);
  letter-spacing: .04em;
  padding: 3px 6px;
  border-radius: var(--r-1);
  background: var(--surface-2);
  color: var(--muted);
  cursor: help;
}
.pick-thesis {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
}
.pick-drivers {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 2px;
}
.pick-driver {
  font: 500 11px/1.3 var(--font-mono);
  padding: 2px 7px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  color: var(--muted);
  background: var(--surface);
  transition: border-color .12s var(--ease-out), background .12s var(--ease-out), color .12s var(--ease-out);
}
.pick-driver:hover { color: var(--text); border-color: var(--border-strong); }
.pick-driver-pos {
  color: var(--pos);
  border-color: color-mix(in srgb, var(--pos) 30%, var(--border));
  background: color-mix(in srgb, var(--pos) 5%, var(--surface));
}
.pick-driver-pos:hover {
  border-color: color-mix(in srgb, var(--pos) 55%, var(--border));
  background: color-mix(in srgb, var(--pos) 8%, var(--surface));
}
.pick-driver-neg {
  color: var(--neg);
  border-color: color-mix(in srgb, var(--neg) 30%, var(--border));
  background: color-mix(in srgb, var(--neg) 5%, var(--surface));
}
.pick-driver-neg:hover {
  border-color: color-mix(in srgb, var(--neg) 55%, var(--border));
  background: color-mix(in srgb, var(--neg) 8%, var(--surface));
}
.pick-driver-narrative { font-weight: 600; }

/* Grouped driver rows — "For" (signals aligned with this pick's side) and
   "Against" (signals pulling the other way). Stacks vertically; the label
   chip sits inline at the start of each row so the eye groups chips by
   stance instead of treating a bullish chip next to a bearish chip as the
   same kind of evidence. */
.pick-drivers-grouped {
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.pick-drivers-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}
.pick-drivers-label {
  font: 700 11px/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 2px 6px;
  border-radius: var(--r-pill);
  color: var(--muted);
  background: var(--surface-3);
  border: 1px solid var(--hairline);
  margin-right: 2px;
}
.pick-drivers-for .pick-drivers-label {
  color: var(--pos);
  background: color-mix(in srgb, var(--pos) 10%, transparent);
  border-color: color-mix(in srgb, var(--pos) 35%, var(--hairline));
}
.pick-drivers-against .pick-drivers-label {
  color: var(--neg);
  background: color-mix(in srgb, var(--neg) 10%, transparent);
  border-color: color-mix(in srgb, var(--neg) 35%, var(--hairline));
}

/* Suggested contract block — strike/expiry, quote, Greeks, breakeven, and
   a one-click jump into the grader pre-filled with the recommendation. */
.pick-contract {
  margin-top: 8px;
  padding: 8px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-2);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pick-card.call .pick-contract { border-left: 2px solid color-mix(in srgb, var(--pos) 45%, var(--border)); }
.pick-card.put  .pick-contract { border-left: 2px solid color-mix(in srgb, var(--neg) 45%, var(--border)); }
.pick-contract-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}
.pick-contract-label {
  font: 600 10px/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
}
.pick-contract-strike {
  font: 700 13px/1.2 var(--font-mono);
  color: var(--text-strong);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}
.pick-contract-meta {
  font: 500 12px/1.4 var(--font-mono);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* Stat grid — replaces the dense mono lines (quote, greeks, breakeven) with
   a labeled three-cell layout so the user can find the price, the breakeven,
   and the greek summary at a glance. Each stat is a small card with a
   muted uppercase label, a tabular numeric primary value, and a muted
   sub-line of context (bid/ask, % to breakeven, etc.). */
.pick-stat-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 6px;
  margin-top: 6px;
  /* The three readouts now read as one recessed instrument cluster rather
     than three loose boxes. */
  padding: 8px;
  background: color-mix(in srgb, var(--bg) 35%, var(--surface));
  border: 1px solid var(--hairline);
  border-radius: var(--r-2);
}
.pick-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 2px 6px;
  border-radius: var(--r-1);
  background: transparent;
  border: 0;
  min-width: 0;
}
.pick-stat-label {
  font: 600 10px/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
}
/* "● live" badge next to the Greeks label — the row recomputes from the polled
   spot every 30s while the Top Picks tab is open. */
.pick-greeks-live {
  margin-left: 5px;
  color: var(--pos);
  letter-spacing: .04em;
}
.pick-stat-value {
  font: 800 16px/1.1 var(--font-mono);
  color: var(--text-strong);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pick-stat-sub {
  font: 500 11px/1.2 var(--font-mono);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pick-stat-greeks .pick-stat-greek-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font: 500 12px/1.2 var(--font-mono);
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.pick-stat-greeks .pick-stat-greek-row > span {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}
.pick-stat-greeks .pick-stat-greek-row b {
  color: var(--muted);
  font-weight: 600;
  width: 1.1em;
  display: inline-block;
}
@media (max-width: 640px) {
  .pick-stat-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .pick-stat-greeks { grid-column: 1 / -1; }
  .pick-stat-greeks .pick-stat-greek-row { flex-direction: row; flex-wrap: wrap; gap: 8px; }
}
.pick-contract-grade {
  align-self: flex-start;
  margin-top: 4px;
  padding: 6px 10px;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  color: var(--text-strong);
  border-radius: var(--r-2);
  font: 600 13px/1 var(--font-sans);
  cursor: pointer;
  transition: background .15s var(--ease-out), border-color .15s var(--ease-out);
}
.pick-contract-grade:hover {
  background: color-mix(in srgb, var(--accent) 18%, var(--surface));
  border-color: color-mix(in srgb, var(--accent) 60%, var(--border));
}

/* Overall-quality accent: an extra glow tint when every component
   grades clean. Subtle on dark, near-invisible on light. */
.pick-contract-overall-good {
  background-image: linear-gradient(180deg,
    color-mix(in srgb, var(--accent) 6%, var(--surface)) 0%,
    var(--surface) 70%);
  box-shadow: var(--elev-1), 0 0 18px -8px var(--accent-glow);
}
.pick-contract-overall-bad {
  background-image: linear-gradient(180deg,
    color-mix(in srgb, var(--neg) 6%, var(--surface)) 0%,
    var(--surface) 70%);
}

/* Risk/reward readout — compares required breakeven move to
   IV-implied 1σ expected move. Color-coded by ratio. */
.pick-contract-rr {
  font: 600 12px/1.3 var(--font-mono);
  font-variant-numeric: tabular-nums;
  padding: 3px 8px;
  border-radius: var(--r-pill);
  display: inline-block;
  margin-top: 2px;
  /* Demoted from a heavy filled block to a hairline chip so this secondary
     risk readout stops out-shouting the tier banner above it. */
  background: transparent;
  border: 1px solid var(--border);
}
.pick-rr-good { color: var(--pos); border-color: color-mix(in srgb, var(--pos) 30%, var(--border)); }
.pick-rr-fair { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 30%, var(--border)); }
.pick-rr-bad  { color: var(--neg); border-color: color-mix(in srgb, var(--neg) 30%, var(--border)); }

/* Contract-quality chip row — Spread / Liq / Δ / Θ / IV. Each chip
   shows label + grade, color-coded so the user can eyeball
   mechanical risk before pulling the trigger. */
.pick-contract-quality {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}
.pick-qchip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border-radius: var(--r-pill);
  font: 600 11px/1 var(--font-mono);
  letter-spacing: 0.04em;
  border: 1px solid var(--hairline);
  background: transparent;
}
.pick-qchip-label { color: var(--muted); text-transform: uppercase; }
.pick-qchip-val { color: var(--text); }
.pick-qchip-good {
  background: transparent;
  border-color: color-mix(in srgb, var(--pos) 40%, var(--hairline));
}
.pick-qchip-good .pick-qchip-val { color: var(--pos); }
/* "fair" is the resting/neutral state — hairline only, so it recedes and the
   problem ("bad") chip is the one that pops. */
.pick-qchip-fair {
  background: transparent;
  border-color: var(--hairline);
}
.pick-qchip-fair .pick-qchip-val { color: var(--warn); }
.pick-qchip-bad {
  background: var(--neg-soft);
  border-color: color-mix(in srgb, var(--neg) 45%, transparent);
}
.pick-qchip-bad .pick-qchip-val { color: var(--neg); }

/* Earnings-in-window badge — small warning chip in the header. */
.pick-badge {
  display: inline-block;
  padding: 2px 6px;
  border-radius: var(--r-pill);
  font: 700 10px/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border: 1px solid transparent;
}
.pick-badge-warn {
  color: var(--warn);
  background: var(--warn-soft);
  border-color: color-mix(in srgb, var(--warn) 40%, transparent);
}

.pick-conviction {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 4px;
  border-left: 1px solid var(--border);
  min-width: 60px;
}
.pick-conv-label {
  font: 600 10px/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
}
.pick-conv-value {
  font: 700 24px/1 var(--font-mono);
  color: var(--text-strong);
  font-variant-numeric: tabular-nums;
  display: inline-flex;
  align-items: baseline;
}
.pick-conv-max {
  font: 500 12px/1 var(--font-mono);
  color: var(--muted);
  margin-left: 1px;
}
.pick-conv-bar {
  width: 36px;
  height: 6px;
  background: color-mix(in srgb, var(--text) 8%, var(--surface));
  border-radius: var(--r-pill);
  overflow: hidden;
  position: relative;
}
.pick-conv-fill {
  display: block;
  width: var(--pick-conv-pct, 50%);
  height: 100%;
  background: color-mix(in srgb, var(--accent) 70%, transparent);
  border-radius: var(--r-pill);
  transition: height .3s var(--ease-out), width .3s var(--ease-out);
}
.pick-card.call .pick-conv-fill { background: color-mix(in srgb, var(--pos) 75%, transparent); }
.pick-card.put .pick-conv-fill { background: color-mix(in srgb, var(--neg) 75%, transparent); }
.pick-card.call .pick-conv-value { color: color-mix(in srgb, var(--pos) 65%, var(--text-strong)); }
.pick-card.put  .pick-conv-value { color: color-mix(in srgb, var(--neg) 65%, var(--text-strong)); }

/* Controls bar above the picks list — currently just a sort dropdown. */
.picks-controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  align-items: center;
  margin: 0 0 12px;
}
.picks-sort,
.streaks-sort,
.vol-sort {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-sm);
  color: var(--muted);
}
.picks-sort-label,
.streaks-sort-label,
.vol-sort-label {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
}
.picks-sort select,
.streaks-sort select,
.vol-sort select {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-2);
  color: var(--text);
  font: inherit;
  font-size: var(--fs-sm);
  padding: 4px 8px;
  cursor: pointer;
}
.picks-sort select:focus-visible,
.streaks-sort select:focus-visible,
.vol-sort select:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
}
.vol-sort { margin-left: auto; }
@media (max-width: 640px){
  .vol-sort { margin-left: 0; }
  .picks-sort-label,
  .streaks-sort-label,
  .vol-sort-label { display: none; }
}

/* Streaks controls row — filter fields + sort selector sit just above the
   two-column bullish/bearish grid. */
.streaks-controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  align-items: center;
  margin: 0 0 12px;
}
.streaks-field {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-sm);
  color: var(--muted);
}
.streaks-field-label {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
}
.streaks-field select,
.streaks-field input {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-2);
  color: var(--text);
  font: inherit;
  font-size: var(--fs-sm);
  padding: 4px 8px;
}
.streaks-field select { cursor: pointer; }
.streaks-field-search input { width: 9ch; transition: width .15s var(--ease-out); }
.streaks-field-search input:focus { width: 12ch; }
.streaks-field select:focus-visible,
.streaks-field input:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
}
.streaks-sort { margin-left: auto; }
@media (max-width: 640px) {
  .streaks-sort { margin-left: 0; }
  .streaks-field-label { display: none; }
}

/* Summary strip — small chip row above the cards that shows the shape of
   today's picks (counts of call/put, average conviction, any earnings-window
   contracts) so the user can read the list's character before scrolling. */
.picks-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.picks-summary:empty { display: none; }
.picks-summary-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 6px 10px;
  border-radius: var(--r-2);
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--elev-1);
}
.picks-summary-num {
  font: 800 18px/1 var(--font-mono);
  color: var(--text-strong);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--ls-display);
}
.picks-summary-lbl {
  font: 600 10px/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
}
.picks-summary-call {
  border-color: color-mix(in srgb, var(--pos) 30%, var(--border));
  background: color-mix(in srgb, var(--pos) 5%, var(--surface));
}
.picks-summary-call .picks-summary-num { color: var(--pos); }
.picks-summary-call .picks-summary-lbl { color: var(--pos); opacity: .8; }
.picks-summary-put {
  border-color: color-mix(in srgb, var(--neg) 30%, var(--border));
  background: color-mix(in srgb, var(--neg) 5%, var(--surface));
}
.picks-summary-put .picks-summary-num { color: var(--neg); }
.picks-summary-put .picks-summary-lbl { color: var(--neg); opacity: .8; }
.picks-summary-warn {
  border-color: color-mix(in srgb, var(--warn) 35%, var(--border));
  background: color-mix(in srgb, var(--warn) 6%, var(--surface));
}
.picks-summary-warn .picks-summary-num { color: var(--warn); }
.picks-summary-warn .picks-summary-lbl { color: var(--warn); opacity: .85; }
/* "Strong" tier count — the most important number in the strip. The markup
   has always emitted .picks-summary-strong but no rule existed, so it looked
   the least special. Give it the accent treatment. */
.picks-summary-strong {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
  box-shadow: var(--elev-1), 0 0 16px -8px var(--accent-glow);
}
.picks-summary-strong .picks-summary-num { color: var(--accent); }
.picks-summary-strong .picks-summary-lbl { color: var(--accent); opacity: .85; }

/* --- Live "market tape" — cross-asset macro regime ----------------------- */
/* display:contents keeps the live-replaced regime chip inline with the other
   summary chips while its wrapper carries the stable #picks-regime-chip id. */
.picks-regime-slot { display: contents; }
.picks-tape-dot { color: var(--pos); font-size: .8em; animation: tape-pulse 2.2s ease-in-out infinite; }
@keyframes tape-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

.picks-tape { margin: 0 0 14px; }
.picks-tape[hidden] { display: none; }

/* Top Picks — risk-on / risk-off history calendar (month grid of the daily
   cross-asset macro regime that set the engine's posture). */
.picks-regime-hist { margin: 0 0 14px; }
.picks-regime-hist[hidden] { display: none; }
.regime-wrap {
  border: 1px solid var(--border);
  border-radius: var(--r-2);
  background: var(--surface);
  padding: 12px 14px;
}
.regime-summary-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  cursor: pointer;
  list-style: none;
}
.regime-summary-bar::-webkit-details-marker { display: none; }
.regime-summary-bar::after {
  content: '▸';
  margin-left: auto;
  color: var(--muted);
  transition: transform .15s;
}
.regime-wrap[open] .regime-summary-bar::after { transform: rotate(90deg); }
.regime-title { font-weight: 600; font-size: 13px; color: var(--text-strong); }
.regime-hint { margin: 8px 0 12px; color: var(--muted); font-size: 13px; line-height: 1.45; }
.regime-legend {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  font: 500 12px/1 var(--font-mono);
  color: var(--muted);
}
.regime-legend-item { display: inline-flex; align-items: center; gap: 5px; }
.regime-swatch {
  display: inline-block;
  width: 11px; height: 11px;
  border-radius: 3px;
  border: 1px solid var(--border);
}
.regime-cal { display: flex; flex-wrap: wrap; gap: 18px; }
.regime-month { flex: 1 1 220px; min-width: 196px; }
.regime-month-title { font: 600 13px/1 var(--font-mono); color: var(--text); margin: 0 0 6px; }
.regime-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.regime-dow { text-align: center; font: 600 10px/1 var(--font-mono); color: var(--muted); padding-bottom: 2px; }
.regime-cell {
  position: relative;
  aspect-ratio: 1 / 1;
  border: 1px solid transparent;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: color-mix(in srgb, var(--text) 4%, transparent);
}
.regime-cell-day { font: 500 11px/1 var(--font-mono); color: var(--muted); }
button.regime-cell { cursor: pointer; transition: transform .1s, box-shadow .1s; }
button.regime-cell:hover,
button.regime-cell:focus-visible { transform: scale(1.1); box-shadow: var(--shadow-md); outline: none; z-index: 2; }
.regime-cell.is-blank { background: transparent; border-color: transparent; }
.regime-cell.is-empty { background: color-mix(in srgb, var(--text) 3%, transparent); }
.regime-cell.is-on { background: color-mix(in srgb, var(--pos) 32%, var(--surface)); border-color: color-mix(in srgb, var(--pos) 45%, var(--border)); }
.regime-cell.is-on .regime-cell-day { color: var(--text-strong); }
.regime-cell.is-neutral { background: color-mix(in srgb, var(--muted) 24%, var(--surface)); border-color: var(--border); }
.regime-cell.is-fragile { background: color-mix(in srgb, var(--warn) 28%, var(--surface)); border-color: color-mix(in srgb, var(--warn) 42%, var(--border)); }
.regime-cell.is-off { background: color-mix(in srgb, var(--neg) 32%, var(--surface)); border-color: color-mix(in srgb, var(--neg) 45%, var(--border)); }
.regime-cell.is-off .regime-cell-day { color: var(--text-strong); }
.regime-cell.is-severe { background: color-mix(in srgb, var(--neg) 64%, var(--surface)); border-color: var(--neg); }
.regime-cell.is-severe .regime-cell-day { color: #fff; }
.regime-swatch.is-on { background: color-mix(in srgb, var(--pos) 45%, var(--surface)); }
.regime-swatch.is-neutral { background: color-mix(in srgb, var(--muted) 32%, var(--surface)); }
.regime-swatch.is-fragile { background: color-mix(in srgb, var(--warn) 42%, var(--surface)); }
.regime-swatch.is-off { background: color-mix(in srgb, var(--neg) 45%, var(--surface)); }
.regime-swatch.is-severe { background: color-mix(in srgb, var(--neg) 70%, var(--surface)); }
.regime-detail {
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px dashed var(--border);
  border-radius: var(--r-2);
  background: color-mix(in srgb, var(--text) 2%, var(--surface));
  min-height: 44px;
}
.regime-detail-empty { color: var(--muted); font-size: 13px; }
.regime-detail-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.regime-badge {
  padding: 2px 8px;
  border-radius: var(--r-pill);
  font: 600 12px/1.4 var(--font-mono);
  border: 1px solid var(--border);
}
.regime-badge.is-on { background: color-mix(in srgb, var(--pos) 16%, var(--surface)); color: var(--pos); border-color: color-mix(in srgb, var(--pos) 35%, var(--border)); }
.regime-badge.is-neutral { background: var(--surface); color: var(--text); }
.regime-badge.is-fragile { background: color-mix(in srgb, var(--warn) 14%, var(--surface)); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 35%, var(--border)); }
.regime-badge.is-off,
.regime-badge.is-severe { background: color-mix(in srgb, var(--neg) 14%, var(--surface)); color: var(--neg); border-color: color-mix(in srgb, var(--neg) 35%, var(--border)); }
.regime-detail-date { font: 600 13px/1 var(--font-mono); color: var(--text-strong); }
.regime-detail-stress { font: 500 12px/1 var(--font-mono); color: var(--muted); }
.regime-detail-summary { margin-top: 6px; font-size: 13px; line-height: 1.45; color: var(--text); }
.regime-detail-drivers { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; }
.regime-driver {
  padding: 2px 7px;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--text) 6%, transparent);
  font: 500 11px/1.4 var(--font-mono);
  color: var(--text);
}
.regime-detail-lean { margin-top: 8px; font-size: 13px; color: var(--text); }
@media (max-width: 560px){ .regime-month { flex: 1 1 100%; } }
.picks-tape-card {
  border: 1px solid var(--border);
  border-radius: var(--r-2);
  background: var(--surface);
  box-shadow: var(--elev-1);
  overflow: hidden;
}
.picks-tape-head {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 14px;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  color: var(--text-strong);
  font: inherit;
}
.picks-tape-head:hover { background: color-mix(in srgb, var(--text-strong) 4%, transparent); }
.picks-tape-kicker {
  font: 700 11px/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--muted);
}
.picks-tape-state {
  font: 800 13px/1 var(--font-mono);
  letter-spacing: var(--ls-display);
  padding: 4px 8px;
  border-radius: var(--r-1);
  border: 1px solid var(--border);
}
.picks-tape-state.picks-summary-put { color: var(--neg); border-color: color-mix(in srgb, var(--neg) 30%, var(--border)); background: color-mix(in srgb, var(--neg) 6%, var(--surface)); }
.picks-tape-state.picks-summary-call { color: var(--pos); border-color: color-mix(in srgb, var(--pos) 30%, var(--border)); background: color-mix(in srgb, var(--pos) 6%, var(--surface)); }
.picks-tape-state.picks-summary-warn { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 30%, var(--border)); background: color-mix(in srgb, var(--warn) 6%, var(--surface)); }
.picks-tape-live {
  margin-left: auto;
  font: 600 11px/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .06em;
  white-space: nowrap;
}
.picks-tape-live.is-live { color: var(--pos); }
.picks-tape-live.is-baked { color: var(--muted); }
.picks-tape-toggle { color: var(--muted); font-size: 13px; }
.picks-tape-body { display: none; padding: 0 14px 14px; }
.picks-tape-card.is-open .picks-tape-body { display: block; }
.picks-tape-summary { margin: 4px 0 10px; font: 400 13px/1.6 var(--font-sans); color: var(--text); }
.picks-tape-summary b { color: var(--text-strong); font-weight: 700; }
/* Condition-aware "what this means right now" callout. */
.picks-tape-callout {
  margin: 0 0 12px;
  padding: 11px 13px;
  border: 1px solid var(--border);
  border-left-width: 3px;
  border-radius: var(--r-1);
  background: color-mix(in srgb, var(--text-strong) 3%, var(--surface));
}
.picks-tape-callout.tape-callout-on { border-left-color: var(--pos); background: color-mix(in srgb, var(--pos) 5%, var(--surface)); }
.picks-tape-callout.tape-callout-off { border-left-color: var(--neg); background: color-mix(in srgb, var(--neg) 5%, var(--surface)); }
.picks-tape-callout.tape-callout-warn { border-left-color: var(--warn); background: color-mix(in srgb, var(--warn) 5%, var(--surface)); }
.picks-tape-callout.tape-callout-neutral { border-left-color: var(--border); }
.picks-tape-callout-head { margin: 0 0 5px; font: 700 13px/1.4 var(--font-sans); color: var(--text-strong); }
.tape-callout-on .picks-tape-callout-head { color: var(--pos); }
.tape-callout-off .picks-tape-callout-head { color: var(--neg); }
.tape-callout-warn .picks-tape-callout-head { color: var(--warn); }
.picks-tape-callout-body { margin: 0; font: 400 13px/1.65 var(--font-sans); color: var(--text); }
.picks-tape-callout-body b { color: var(--text-strong); font-weight: 700; }
.picks-tape-callout-meta { margin: 7px 0 0; font: 400 12px/1.55 var(--font-sans); color: var(--muted); }
.picks-tape-callout-meta b {
  display: inline-block;
  margin-right: 6px;
  font: 700 10px/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-strong);
}
.picks-tape-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.picks-tape-metrics span {
  font: 600 11px/1.3 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
}
.picks-tape-metrics b {
  font: 800 14px/1 var(--font-mono);
  color: var(--text-strong);
  margin-left: 4px;
  font-variant-numeric: tabular-nums;
}
.picks-tape-axes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(184px, 1fr));
  gap: 8px;
}
.tape-axis {
  border: 1px solid var(--border);
  border-left-width: 3px;
  border-radius: var(--r-1);
  padding: 8px 10px;
  background: color-mix(in srgb, var(--text-strong) 2%, var(--surface));
}
.tape-axis.tape-off { border-left-color: var(--neg); }
.tape-axis.tape-on { border-left-color: var(--pos); }
.tape-axis.tape-flat { border-left-color: var(--border); }
.tape-axis-head { display: flex; align-items: center; gap: 6px; margin-bottom: 3px; }
.tape-axis-name { font: 700 12px/1 var(--font-mono); color: var(--text-strong); text-transform: uppercase; letter-spacing: .04em; }
.tape-axis-score { margin-left: auto; font: 800 13px/1 var(--font-mono); font-variant-numeric: tabular-nums; }
.tape-off .tape-axis-score { color: var(--neg); }
.tape-on .tape-axis-score { color: var(--pos); }
.tape-flat .tape-axis-score { color: var(--muted); }
.tape-axis-badge {
  font: 700 9px/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 2px 4px;
  border-radius: 3px;
}
.tape-axis-badge.is-live { color: var(--pos); background: color-mix(in srgb, var(--pos) 14%, transparent); }
.tape-axis-badge.is-baked { color: var(--muted); background: color-mix(in srgb, var(--muted) 14%, transparent); }
.tape-axis-label { font: 500 12px/1.4 var(--font-sans); color: var(--text); }
.tape-axis-desc { font: 400 10px/1.3 var(--font-mono); color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin-top: 2px; }
/* Per-axis mini-meter: the −2..+2 score as a marker on a risk rail inside each tile. */
.tape-axis-rail { position: relative; height: 8px; margin: 5px 0 6px; }
.tape-axis-rail::before {
  content: ""; position: absolute; inset: 2px 0; border-radius: var(--r-pill);
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--neg) 30%, var(--surface)) 0%,
    color-mix(in srgb, var(--muted) 12%, var(--surface)) 50%,
    color-mix(in srgb, var(--pos) 30%, var(--surface)) 100%);
  border: 1px solid var(--border);
}
.tape-axis-rail-mid { position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; transform: translateX(-.5px); background: color-mix(in srgb, var(--text-strong) 20%, transparent); }
.tape-axis-rail-mark {
  position: absolute; top: 50%; width: 9px; height: 9px; border-radius: 50%;
  transform: translate(-50%, -50%); background: var(--surface); border: 2px solid var(--muted); box-shadow: var(--elev-1);
}
.tape-axis-rail-mark.tape-on { border-color: var(--pos); background: color-mix(in srgb, var(--pos) 22%, var(--surface)); }
.tape-axis-rail-mark.tape-off { border-color: var(--neg); background: color-mix(in srgb, var(--neg) 22%, var(--surface)); }

/* Headline risk meter — the whole tape on one rail (the visual gauge). */
.tape-meter {
  margin: 4px 0 12px;
  padding: 11px 13px 9px;
  border: 1px solid var(--border);
  border-left-width: 3px;
  border-radius: var(--r-1);
  background: color-mix(in srgb, var(--text-strong) 2%, var(--surface));
}
.tape-meter.tape-meter-off { border-left-color: var(--neg); }
.tape-meter.tape-meter-on { border-left-color: var(--pos); }
.tape-meter.tape-meter-warn { border-left-color: var(--warn); }
.tape-meter.tape-meter-flat { border-left-color: var(--border); }
.tape-meter-scale { display: flex; justify-content: space-between; margin-bottom: 5px; }
.tape-meter-scale span { font: 700 10px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.tape-meter-scale span:first-child { color: var(--neg); }
.tape-meter-scale span:last-child { color: var(--pos); }
.tape-meter-rail { position: relative; height: 16px; }
.tape-meter-rail::before {
  content: ""; position: absolute; inset: 5px 0; border-radius: var(--r-pill);
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--neg) 38%, var(--surface)) 0%,
    color-mix(in srgb, var(--neg) 16%, var(--surface)) 30%,
    color-mix(in srgb, var(--muted) 12%, var(--surface)) 50%,
    color-mix(in srgb, var(--pos) 16%, var(--surface)) 70%,
    color-mix(in srgb, var(--pos) 38%, var(--surface)) 100%);
  border: 1px solid var(--border);
}
.tape-meter-mid { position: absolute; top: 1px; bottom: 1px; left: 50%; width: 1px; transform: translateX(-.5px); background: color-mix(in srgb, var(--text-strong) 24%, transparent); }
.tape-meter-marker {
  position: absolute; top: 50%; width: 16px; height: 16px; border-radius: 50%;
  transform: translate(-50%, -50%); background: var(--surface); box-shadow: var(--elev-1); border: 3px solid var(--muted);
}
.tape-meter-off .tape-meter-marker { border-color: var(--neg); background: color-mix(in srgb, var(--neg) 24%, var(--surface)); }
.tape-meter-on .tape-meter-marker { border-color: var(--pos); background: color-mix(in srgb, var(--pos) 24%, var(--surface)); }
.tape-meter-warn .tape-meter-marker { border-color: var(--warn); background: color-mix(in srgb, var(--warn) 24%, var(--surface)); }
.tape-meter-caption { margin-top: 7px; font: 500 12px/1.4 var(--font-sans); color: var(--muted); }
.tape-meter-caption b { color: var(--text-strong); font-weight: 700; }
.picks-tape-note { margin: 10px 0 0; font: 500 12px/1.5 var(--font-sans); color: var(--text); }
.picks-tape-note.is-warn { color: var(--warn); }
.picks-tape-note b { font-weight: 700; }
.picks-tape-foot { margin: 10px 0 0; font: 400 12px/1.6 var(--font-sans); color: var(--muted); }

/* --- Risk-on / risk-off barometer (per-asset 0–100 rail) ----------------- */
.picks-barometer { margin: 0 0 14px; }
.picks-barometer[hidden] { display: none; }
.rob-card {
  border: 1px solid var(--border);
  border-radius: var(--r-2);
  background: var(--surface);
  box-shadow: var(--elev-1);
  overflow: hidden;
}
.rob-head {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 14px;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  color: var(--text-strong);
  font: inherit;
}
.rob-head:hover { background: color-mix(in srgb, var(--text-strong) 4%, transparent); }
.rob-kicker {
  font: 700 11px/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--muted);
}
.rob-state {
  font: 800 13px/1 var(--font-mono);
  letter-spacing: var(--ls-display);
  padding: 4px 8px;
  border-radius: var(--r-1);
  border: 1px solid var(--border);
}
.rob-state.rob-off { color: var(--neg); border-color: color-mix(in srgb, var(--neg) 30%, var(--border)); background: color-mix(in srgb, var(--neg) 6%, var(--surface)); }
.rob-state.rob-on  { color: var(--pos); border-color: color-mix(in srgb, var(--pos) 30%, var(--border)); background: color-mix(in srgb, var(--pos) 6%, var(--surface)); }
.rob-state.rob-flat { color: var(--muted); }
.rob-asof {
  margin-left: auto;
  font: 600 11px/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
  white-space: nowrap;
}
.rob-asof.is-live { color: var(--pos); }
.rob-asof-dot {
  color: var(--pos);
  font-size: 10px;
  vertical-align: middle;
  animation: rob-live-pulse 2s ease-in-out infinite;
}
.rob-toggle { color: var(--muted); font-size: 13px; }
.rob-body { display: none; padding: 4px 14px 14px; }
.rob-card.is-open .rob-body { display: block; }
.rob-loading { padding: 14px; font: 500 13px/1.4 var(--font-sans); color: var(--muted); }
/* Zone legend, aligned over the rail column. */
.rob-scale {
  display: grid;
  grid-template-columns: var(--rob-name-col, 132px) 1fr;
  align-items: center;
  margin: 2px 0 8px;
  padding-left: 0;
}
.rob-scale::before { content: ""; }
.rob-scale-off, .rob-scale-mid, .rob-scale-on {
  grid-column: 2;
  grid-row: 1;
  font: 700 10px/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .08em;
}
.rob-scale-off { justify-self: start;  color: var(--neg); }
.rob-scale-mid { justify-self: center; color: var(--muted); }
.rob-scale-on  { justify-self: end;    color: var(--pos); }
.rob-rows { display: flex; flex-direction: column; gap: 6px; }
.rob-row {
  display: grid;
  grid-template-columns: var(--rob-name-col, 132px) 1fr auto;
  align-items: center;
  gap: 10px;
}
.rob-name {
  font: 600 12px/1.2 var(--font-sans);
  color: var(--text-strong);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rob-live-dot {
  color: var(--pos);
  font-size: 9px;
  vertical-align: middle;
  margin-right: 4px;
  animation: rob-live-pulse 2s ease-in-out infinite;
}
@keyframes rob-live-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .rob-live-dot, .rob-asof-dot { animation: none; } }
.rob-rail {
  position: relative;
  height: 14px;
  display: block;
}
.rob-rail-track {
  position: absolute;
  inset: 5px 0;
  border-radius: var(--r-pill);
  /* red (risk-off) → neutral → green (risk-on), matching the marker bands. */
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--neg) 32%, var(--surface)) 0%,
    color-mix(in srgb, var(--neg) 14%, var(--surface)) 30%,
    color-mix(in srgb, var(--muted) 12%, var(--surface)) 50%,
    color-mix(in srgb, var(--pos) 14%, var(--surface)) 70%,
    color-mix(in srgb, var(--pos) 32%, var(--surface)) 100%);
  border: 1px solid var(--border);
}
.rob-rail-mid {
  position: absolute;
  top: 1px;
  bottom: 1px;
  left: 50%;
  width: 1px;
  transform: translateX(-.5px);
  background: color-mix(in srgb, var(--text-strong) 22%, transparent);
}
.rob-marker {
  position: absolute;
  top: 50%;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: var(--surface);
  border: 2px solid var(--muted);
  box-shadow: var(--elev-1);
}
.rob-marker.rob-on  { border-color: var(--pos); background: color-mix(in srgb, var(--pos) 22%, var(--surface)); }
.rob-marker.rob-off { border-color: var(--neg); background: color-mix(in srgb, var(--neg) 22%, var(--surface)); }
.rob-marker.rob-flat { border-color: var(--muted); }
.rob-move {
  font: 700 12px/1 var(--font-mono);
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}
.rob-move.ovn-up { color: var(--pos); }
.rob-move.ovn-dn { color: var(--neg); }
.rob-move.ovn-flat { color: var(--muted); }
.rob-lvl { font: 500 10px/1 var(--font-mono); color: var(--muted); }
.rob-foot { margin: 11px 0 0; font: 400 12px/1.6 var(--font-sans); color: var(--muted); }
@media (max-width: 860px) {
  .rob-scale, .rob-row { --rob-name-col: 92px; }
  .rob-lvl { display: none; }
}

/* --- Market tape: expandable axis tiles, sparklines, cross-highlight ------- */
/* The axis tiles are now buttons (click to drill down) — keep the card look. */
.tape-axis {
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color .12s ease, background .12s ease, box-shadow .12s ease;
}
.tape-axis:hover { background: color-mix(in srgb, var(--text-strong) 5%, var(--surface)); }
.tape-axis:focus-visible { outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset: 2px; }
.tape-axis.is-open { box-shadow: var(--elev-1); border-color: color-mix(in srgb, var(--text-strong) 16%, var(--border)); }
.tape-axis-foot { display: flex; align-items: center; gap: 8px; justify-content: space-between; margin-top: 2px; }
.tape-axis-foot .tape-axis-desc { margin-top: 0; }
.tape-axis-spark { flex: 0 0 auto; display: inline-flex; align-items: center; }
.tape-axis-more {
  display: inline-block; margin-top: 6px;
  font: 700 9px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted);
}
.tape-axis:hover .tape-axis-more, .tape-axis.is-open .tape-axis-more { color: var(--text-strong); }

/* Shared inline sparkline — tone colors the stroke, dashed line marks neutral. */
.tape-spark { display: inline-block; vertical-align: middle; color: var(--muted); }
.tape-spark-on { color: var(--pos); }
.tape-spark-off { color: var(--neg); }
.tape-spark-warn { color: var(--warn); }
.tape-spark-flat { color: var(--muted); }
.tape-spark-base { stroke: color-mix(in srgb, var(--text-strong) 22%, transparent); stroke-width: 1; stroke-dasharray: 2 2; }

/* Axis drill-down drawer. */
.tape-axis-detail { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--border); display: grid; gap: 6px; }
.tape-axis-detail-about { margin: 0; font: 400 11.5px/1.5 var(--font-sans); color: var(--text); }
.tape-axis-detail-reading { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tape-axis-detail-badge {
  font: 800 10px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .05em;
  padding: 3px 6px; border-radius: 4px; border: 1px solid var(--border);
}
.tape-axis-detail-badge.tape-off { color: var(--neg); border-color: color-mix(in srgb, var(--neg) 30%, var(--border)); background: color-mix(in srgb, var(--neg) 7%, var(--surface)); }
.tape-axis-detail-badge.tape-on { color: var(--pos); border-color: color-mix(in srgb, var(--pos) 30%, var(--border)); background: color-mix(in srgb, var(--pos) 7%, var(--surface)); }
.tape-axis-detail-badge.tape-flat { color: var(--muted); }
.tape-axis-detail-label { font: 500 11.5px/1.4 var(--font-sans); color: var(--text); }
.tape-axis-detail-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.tape-chip {
  display: inline-flex; align-items: baseline; gap: 4px;
  padding: 2px 6px; border: 1px solid var(--border); border-radius: 4px;
  background: color-mix(in srgb, var(--text-strong) 3%, var(--surface));
}
.tape-chip-k { font: 700 9px/1.2 var(--font-mono); text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.tape-chip-v { font: 700 11px/1.2 var(--font-mono); color: var(--text-strong); font-variant-numeric: tabular-nums; }
.tape-axis-detail-feeds, .tape-axis-detail-flip, .tape-axis-detail-live { font: 400 11px/1.5 var(--font-sans); color: var(--muted); }
.tape-axis-detail-feeds b, .tape-axis-detail-flip b { color: var(--text-strong); font-weight: 700; }

/* Headline meter net-stress trend sparkline. */
.tape-meter-trend { display: flex; align-items: center; gap: 8px; margin-top: 7px; }
.tape-meter-trend-lbl { font: 700 9px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.tape-meter-trend-spark { display: inline-flex; align-items: center; }

/* Cross-highlight — hover an axis tile <-> its feeding rail rows (and back). */
.tape-axis.is-xhl, .tape-axis.is-xhl-src {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  background: color-mix(in srgb, var(--accent) 9%, var(--surface));
}
.rob-row.is-xhl, .rob-row.is-xhl-src {
  background: color-mix(in srgb, var(--accent) 13%, transparent);
  box-shadow: inset 2px 0 0 color-mix(in srgb, var(--accent) 65%, transparent);
}

/* --- Cross-asset rail: controls + clickable rows + drill-down -------------- */
.rob-controls { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 10px; }
.rob-ctrl { display: inline-flex; align-items: center; gap: 6px; font: 600 11px/1 var(--font-mono); color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.rob-ctrl select { font: 600 11px/1 var(--font-mono); color: var(--text-strong); background: var(--surface); border: 1px solid var(--border); border-radius: 4px; padding: 4px 6px; cursor: pointer; }
.rob-group-btn {
  font: 700 10px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .05em;
  padding: 5px 9px; border: 1px solid var(--border); border-radius: 5px;
  background: var(--surface); color: var(--muted); cursor: pointer;
  transition: color .12s ease, border-color .12s ease, background .12s ease;
}
.rob-group-btn:hover { color: var(--text-strong); }
.rob-group-btn[aria-pressed="true"] {
  color: var(--text-strong);
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
  background: color-mix(in srgb, var(--accent) 9%, var(--surface));
}
.rob-liveonly { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; font: 600 11px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.rob-liveonly input { cursor: pointer; accent-color: var(--accent); }

.rob-group-head {
  font: 700 10px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .08em;
  color: var(--muted); margin: 8px 0 5px; padding-top: 7px; border-top: 1px solid var(--border);
}
.rob-group:first-child .rob-group-head { border-top: 0; padding-top: 0; margin-top: 0; }

.rob-row-wrap { display: block; }
/* Rows are now buttons (click to expand). Keep the grid from the base rule and
   add the resets + a 4th column for the disclosure chevron. */
.rob-row {
  width: 100%;
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
  text-align: left;
  transition: background .12s ease, box-shadow .12s ease;
  grid-template-columns: var(--rob-name-col, 132px) 1fr auto auto;
}
.rob-row:hover { background: color-mix(in srgb, var(--text-strong) 5%, transparent); }
.rob-row:focus-visible { outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset: 1px; }
.rob-row.is-open { background: color-mix(in srgb, var(--text-strong) 4%, transparent); }
.rob-scale { padding: 0 6px; }
.rob-spark { display: inline-flex; align-items: center; color: var(--muted); margin-right: 2px; }
.rob-row-chev { color: var(--muted); font-size: 10px; padding-left: 2px; }
.rob-row-detail {
  padding: 7px 10px 9px;
  margin: 2px 0;
  border-left: 2px solid color-mix(in srgb, var(--text-strong) 14%, var(--border));
  display: grid;
  gap: 4px;
}
.rob-row-detail-row { font: 400 11.5px/1.5 var(--font-sans); color: var(--muted); }
.rob-row-detail-row b { color: var(--text-strong); font-weight: 700; }
.rob-row-detail-fresh { font: 600 10px/1.3 var(--font-mono); text-transform: uppercase; letter-spacing: .04em; }
.rob-empty { padding: 10px 4px; font: 500 12px/1.5 var(--font-sans); color: var(--muted); }
@media (max-width: 860px) {
  .rob-spark { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .tape-axis, .rob-row, .rob-group-btn { transition: none; }
}

/* Mobile: tighten the rank gutter. The score breakdown is now the in-card
   "Grade" tab (a tabpanel inside .pick-main), so it already flows full-width
   beneath the tabs on narrow viewports — no grid reflow needed. */
@media (max-width: 860px) {
  .pick-card {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: var(--s-2);
    padding: 10px;
  }
  .pick-rank-num { font-size: 22px; }
  .pick-rank-top1 .pick-rank-num { font-size: 24px; }
  .pick-rank-top2 .pick-rank-num,
  .pick-rank-top3 .pick-rank-num { font-size: 22px; }
}

/* --- Recommendation ⇄ Grade toggle -------------------------------------
   A small segmented control under the head row that switches the card body
   between the recommendation and the full 4-pillar score breakdown. */
.pick-tabs {
  display: flex;
  gap: 4px;
  margin: 4px 0 8px;
  padding: 2px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  width: fit-content;
  box-shadow: var(--elev-1);
}
.pick-tab {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  font: 600 12px/1 var(--font-mono);
  letter-spacing: .04em;
  color: var(--muted);
  cursor: pointer;
  transition: background .12s var(--ease-out), color .12s var(--ease-out);
}
.pick-tab:hover:not(.is-active) { color: var(--text); }
.pick-tab.is-active {
  background: var(--surface-2);
  color: var(--text-strong);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 30%, var(--border));
}
.pick-tabpanel[hidden] { display: none; }

/* --- 4-pillar tier banner -----------------------------------------------
   Sits directly under the head row and dominates the card. Each tier gets
   its own color and intensity so the user knows at a glance whether this
   pick is Strong Call / Call / Put / Strong Put. */
.pick-tier {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border-radius: var(--r-3);
  background: color-mix(in srgb, var(--surface) 90%, var(--muted) 10%);
  border: 1px solid var(--border);
  box-shadow: var(--elev-1);
}
.pick-tier-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.pick-tier-label {
  font: 700 14px/1 var(--font-sans);
  letter-spacing: .02em;
  color: var(--text-strong);
}
.pick-tier-score {
  font: var(--fw-display) var(--fs-2xl)/1 var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--ls-display);
  color: var(--text-strong);
  margin-left: auto;
}
.pick-tier-sub {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  font: 500 11px/1.2 var(--font-mono);
  letter-spacing: .04em;
  color: var(--muted);
  text-transform: uppercase;
}
.pick-tier-conv::after {
  content: " ·";
  margin-left: 4px;
  opacity: .4;
}
/* Risk-based sizing line (P3.4): "size ~X% of book · ~N contracts at $Y" — has
   numbers + a $ price, so keep it readable (no uppercase) and let it take the
   remaining width / wrap to its own line on a narrow card. */
.pick-tier-size {
  text-transform: none;
  letter-spacing: .01em;
  color: var(--text);
  cursor: help;
}
.pick-tier-strong-call {
  background-image: linear-gradient(135deg, color-mix(in srgb, var(--pos) 16%, var(--surface)) 0%, var(--surface) 62%);
  border-color: color-mix(in srgb, var(--pos) 45%, var(--border));
  border-left: 3px solid var(--pos);
}
.pick-tier-strong-call .pick-tier-label,
.pick-tier-strong-call .pick-tier-score { color: var(--pos); }
.pick-tier-call {
  background: color-mix(in srgb, var(--pos) 6%, var(--surface));
  border-color: color-mix(in srgb, var(--pos) 30%, var(--border));
}
.pick-tier-call .pick-tier-label,
.pick-tier-call .pick-tier-score { color: color-mix(in srgb, var(--pos) 80%, var(--text-strong)); }
.pick-tier-strong-put {
  background-image: linear-gradient(135deg, color-mix(in srgb, var(--neg) 16%, var(--surface)) 0%, var(--surface) 62%);
  border-color: color-mix(in srgb, var(--neg) 45%, var(--border));
  border-left: 3px solid var(--neg);
}
.pick-tier-strong-put .pick-tier-label,
.pick-tier-strong-put .pick-tier-score { color: var(--neg); }
.pick-tier-put {
  background: color-mix(in srgb, var(--neg) 6%, var(--surface));
  border-color: color-mix(in srgb, var(--neg) 30%, var(--border));
}
.pick-tier-put .pick-tier-label,
.pick-tier-put .pick-tier-score { color: color-mix(in srgb, var(--neg) 80%, var(--text-strong)); }
.pick-tier-no-trade {
  background: color-mix(in srgb, var(--muted) 8%, var(--surface));
  border-color: var(--border);
}

/* --- Execution-timing gate (computeEntryTiming) — "should we execute NOW?" -
   Separate from the grade tier above: the tier says how good the setup is, this
   says whether now is the moment. 'go' tints green (--pos), 'wait' amber (--warn). */
.pick-timing {
  margin: 6px 0 4px;
  padding: 9px 11px;
  border-radius: var(--r-2);
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 92%, var(--muted) 8%);
}
.pick-timing-pos { border-left: 3px solid var(--pos); background: color-mix(in srgb, var(--pos) 7%, var(--surface)); }
.pick-timing-fair { border-left: 3px solid var(--warn); background: color-mix(in srgb, var(--warn) 7%, var(--surface)); }
.pick-timing-head { display: flex; align-items: baseline; gap: 8px; }
.pick-timing-verdict {
  font: 700 12px/1 var(--font-mono);
  letter-spacing: .06em;
  padding: 3px 7px;
  border-radius: var(--r-1);
  white-space: nowrap;
}
.pick-timing-v-pos { background: var(--pos); color: var(--bg); }
.pick-timing-v-fair { background: var(--warn); color: var(--bg); }
.pick-timing-title { font: 600 13px/1.3 var(--font-sans); color: var(--text-strong); }
.pick-timing-sub { font-weight: 400; color: var(--muted); }
.pick-timing-reasons {
  margin: 7px 0 0;
  padding-left: 16px;
  font: 400 12.5px/1.5 var(--font-sans);
  color: var(--text);
}
.pick-timing-reasons li { margin: 1px 0; }
.pick-timing-tactical {
  margin-top: 6px;
  font: 500 12px/1.45 var(--font-sans);
  color: color-mix(in srgb, var(--neg) 80%, var(--text-strong));
}
.pick-timing-foot {
  margin-top: 7px;
  font: 400 11.5px/1.4 var(--font-sans);
  color: var(--muted);
}
/* Compact pills on the head row + the scannable grid card. */
.pick-timing-pill, .ptc-tactical, .pick-tactical-tag, .ptc-defer, .pick-defer-tag {
  font: 700 10px/1 var(--font-mono);
  letter-spacing: .05em;
  padding: 3px 6px;
  border-radius: var(--r-1);
  white-space: nowrap;
}
.pick-timing-pos.pick-timing-pill { background: color-mix(in srgb, var(--pos) 18%, var(--surface)); color: var(--pos); border: 1px solid color-mix(in srgb, var(--pos) 40%, var(--border)); }
.pick-timing-fair.pick-timing-pill { background: color-mix(in srgb, var(--warn) 18%, var(--surface)); color: var(--warn); border: 1px solid color-mix(in srgb, var(--warn) 40%, var(--border)); }
.ptc-tactical, .pick-tactical-tag { background: color-mix(in srgb, var(--neg) 16%, var(--surface)); color: var(--neg); border: 1px solid color-mix(in srgb, var(--neg) 38%, var(--border)); }
/* Deferred-entry chip — a scheduled catalyst (earnings/FOMC-class event) parks
   the entry; warn-tinted so a WAIT name can't read as "enter now" while skimming. */
.ptc-defer, .pick-defer-tag { background: color-mix(in srgb, var(--warn) 16%, var(--surface)); color: var(--warn); border: 1px solid color-mix(in srgb, var(--warn) 40%, var(--border)); }
.pick-defer-tag { white-space: normal; line-height: 1.35; }
/* Honest roster note above the picks grid (short list / gated / sector-capped). */
.picks-roster-note {
  grid-column: 1 / -1;
  margin: 0 0 4px;
  padding: 8px 12px;
  border-radius: var(--r-2);
  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border));
  font: 500 13px/1.5 var(--font-sans);
  color: var(--text);
}
.picks-roster-note b { color: var(--text-strong); font-variant-numeric: tabular-nums; }

/* --- Regime-drift banner (bake-timing honesty) -- */
/* The roster is baked hourly; the live cross-asset gauge recomputes ~30s. When
   the live tape turns more defensive than the regime the roster was built under,
   this fires above the grid so the user knows the frozen picks predate the flip. */
.picks-regime-drift-card {
  margin: 0 0 10px;
  padding: 11px 14px;
  border-radius: var(--r-2);
  background: color-mix(in srgb, var(--warn) 9%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--warn) 38%, var(--border));
  border-left: 3px solid var(--warn);
}
.picks-regime-drift-head {
  margin: 0;
  font: 700 13.5px/1.45 var(--font-sans);
  color: var(--warn);
}
.picks-regime-drift-body {
  margin: 5px 0 0;
  font: 500 12.5px/1.55 var(--font-sans);
  color: var(--text);
}
.picks-regime-drift-head b, .picks-regime-drift-body b { color: var(--text-strong); font-weight: 700; }

/* --- Plain-English analysis paragraph -- */
.pick-analysis {
  margin: 4px 0 4px;
  padding: 8px 10px;
  background: color-mix(in srgb, var(--accent) 4%, var(--surface));
  border-left: 2px solid color-mix(in srgb, var(--accent) 35%, var(--border));
  border-radius: 0 var(--r-1) var(--r-1) 0;
  font: 400 13px/1.55 var(--font-sans);
  color: var(--text);
}

/* --- Thesis (what makes it work / what would disprove it) --------------- */
.pick-thesis {
  margin: 6px 0;
  padding: 10px 12px;
  background: var(--surface-2, color-mix(in srgb, var(--surface) 96%, var(--text)));
  border: 1px solid var(--border);
  border-radius: var(--r-1);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pick-thesis.thesis-bull { border-left: 3px solid var(--pos); }
.pick-thesis.thesis-bear { border-left: 3px solid var(--neg); }
.pick-thesis-head {
  font: 700 12px/1 var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-strong);
  display: flex;
  align-items: center;
  gap: 8px;
}
.pick-thesis-head .thesis-dir {
  font-weight: 600;
  text-transform: capitalize;
  letter-spacing: 0;
  color: var(--text-muted);
  font-size: 11px;
}
.thesis-col-head { font: 700 11px/1.3 var(--font-sans); color: var(--text-muted); margin-bottom: 3px; }
.thesis-works .thesis-col-head { color: var(--pos); }
.thesis-inval .thesis-col-head { color: var(--neg); }
.pick-thesis .thesis-col ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 3px; }
.pick-thesis .thesis-col li {
  font: 400 12.5px/1.45 var(--font-sans);
  color: var(--text);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
}
.thesis-li-meta { font: 600 10.5px/1 var(--font-mono); color: var(--text-muted); }
.thesis-target {
  font: 400 12px/1.4 var(--font-sans);
  color: var(--text-muted);
  padding-top: 2px;
  border-top: 1px dashed var(--border);
}
.thesis-target-lbl { font-weight: 700; color: var(--text); text-transform: uppercase; font-size: 10px; letter-spacing: 0.04em; margin-right: 4px; }
.thesis-status {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  padding: 5px 8px;
  border-radius: var(--r-1);
  font: 400 12px/1.4 var(--font-sans);
}
.thesis-status-verdict { font-weight: 700; }
.thesis-status.thesis-ontrack { background: color-mix(in srgb, var(--pos) 10%, transparent); }
.thesis-status.thesis-ontrack .thesis-status-verdict { color: var(--pos); }
.thesis-status.thesis-broken { background: color-mix(in srgb, var(--neg) 10%, transparent); }
.thesis-status.thesis-broken .thesis-status-verdict { color: var(--neg); }
.thesis-status.thesis-mixed { background: color-mix(in srgb, var(--text) 6%, transparent); }
.thesis-status.thesis-mixed .thesis-status-verdict { color: var(--text-muted); }
.thesis-status-bits { color: var(--text-muted); }

/* --- Thesis: strategy / conviction / market read / disclosure / AI prose -- */
.thesis-strat {
  display: inline-flex; align-items: center; gap: 5px;
  align-self: flex-start;
  padding: 3px 9px; border-radius: 999px;
  font: 700 11px/1.3 var(--font-sans); letter-spacing: 0.01em;
  border: 1px solid var(--border);
}
.thesis-strat-icon { font-size: 12px; }
.thesis-strat-fb { font-weight: 400; color: var(--text-muted); font-size: 10px; }
.thesis-strat-credit { background: color-mix(in srgb, var(--accent, #5b8def) 14%, transparent); color: var(--accent, #5b8def); border-color: color-mix(in srgb, var(--accent, #5b8def) 35%, transparent); }
.thesis-strat-debit  { background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--text); }
.thesis-strat-naked  { background: color-mix(in srgb, var(--pos) 12%, transparent); color: var(--pos); border-color: color-mix(in srgb, var(--pos) 35%, transparent); }
.thesis-conviction { font: 400 12px/1.4 var(--font-sans); color: var(--text-muted); }
.thesis-conv-lbl { font-weight: 700; color: var(--text); text-transform: uppercase; font-size: 10px; letter-spacing: 0.04em; margin-right: 4px; }
.thesis-market {
  font: 400 12.5px/1.5 var(--font-sans);
  padding: 6px 9px; border-radius: var(--r-1);
  border-left: 3px solid var(--border);
}
.thesis-market-lbl { font-weight: 700; color: var(--text); text-transform: uppercase; font-size: 10px; letter-spacing: 0.04em; margin-right: 5px; }
.thesis-market.thesis-mr-ok { background: color-mix(in srgb, var(--pos) 8%, transparent); border-left-color: var(--pos); }
.thesis-market.thesis-mr-bad { background: color-mix(in srgb, var(--neg) 8%, transparent); border-left-color: var(--neg); }
.thesis-market.thesis-mr-neutral { background: color-mix(in srgb, var(--text) 5%, transparent); }
.thesis-disclosure {
  font: 600 12px/1.5 var(--font-sans); color: var(--warn, #d98a00);
  background: color-mix(in srgb, var(--warn, #d98a00) 10%, transparent);
  border: 1px dashed color-mix(in srgb, var(--warn, #d98a00) 45%, transparent);
  border-radius: var(--r-1); padding: 6px 9px;
}
.pick-thesis.thesis-weak { border-left-color: var(--warn, #d98a00); }
.thesis-weak-tag {
  margin-left: 6px; font: 700 9px/1 var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--warn, #d98a00); background: color-mix(in srgb, var(--warn, #d98a00) 14%, transparent);
  padding: 2px 5px; border-radius: 4px; vertical-align: middle;
}
.thesis-prose {
  font: 400 12.5px/1.55 var(--font-sans); color: var(--text);
  background: color-mix(in srgb, var(--text) 4%, transparent);
  border-radius: var(--r-1); padding: 7px 10px;
}
.thesis-prose-tag {
  font: 700 9px/1 var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-muted); border: 1px solid var(--border); padding: 2px 5px; border-radius: 4px; margin-left: 4px; white-space: nowrap;
}
/* --- AI thesis (everything-aware): the prominent SUMMARY lead, the detailed
   reasoning section, the load-bearing drivers, and the AI's own confidence --- */
.thesis-summary {
  font: 500 13.5px/1.55 var(--font-sans); color: var(--text-strong, var(--text));
  background: color-mix(in srgb, var(--accent, #5b8def) 9%, transparent);
  border-left: 3px solid var(--accent, #5b8def); border-radius: var(--r-1); padding: 8px 11px;
}
.thesis-summary-lbl { font-weight: 800; text-transform: uppercase; font-size: 10px; letter-spacing: 0.05em; color: var(--accent, #5b8def); margin-right: 5px; }
.thesis-sec-reasoning .thesis-sec-ai { color: var(--accent, #5b8def); }
.thesis-reasoning {
  font: 400 12.5px/1.6 var(--font-sans); color: var(--text);
  background: color-mix(in srgb, var(--text) 4%, transparent);
  border-radius: var(--r-1); padding: 7px 10px; margin-top: 3px;
}
/* --- AI thesis STORY: the narrative arc (backdrop / what's changing / early
   confirmation / outlook), each a labelled beat in a flowing briefing --- */
.thesis-narrative {
  background: color-mix(in srgb, var(--text) 4%, transparent);
  border-radius: var(--r-1); padding: 8px 11px; margin-top: 3px;
  display: flex; flex-direction: column; gap: 8px;
}
.thesis-beat { display: flex; flex-direction: column; gap: 2px; }
.thesis-beat-lbl {
  font: 800 9.5px/1.2 var(--font-sans); text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--accent, #5b8def);
}
.thesis-beat-body { font: 400 12.5px/1.6 var(--font-sans); color: var(--text); }
.thesis-confirm-ul { margin: 1px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 3px; }
.thesis-confirm-ul li {
  font: 400 12px/1.45 var(--font-sans); color: var(--text);
  display: flex; align-items: baseline; gap: 6px;
}
.thesis-confirm-ul li::before { content: '✓'; color: var(--pos); font-weight: 800; flex: none; }
.thesis-strat-reason-ai { color: var(--text); margin-bottom: 3px; }
.thesis-ai-drivers { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.thesis-ai-driver {
  font: 600 10.5px/1.2 var(--font-sans); color: var(--accent, #5b8def);
  background: color-mix(in srgb, var(--accent, #5b8def) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent, #5b8def) 28%, transparent);
  padding: 2px 7px; border-radius: 999px; white-space: nowrap;
}
.thesis-ai-conf {
  font: 700 9px/1 var(--font-mono); text-transform: uppercase; letter-spacing: 0.05em;
  padding: 2px 6px; border-radius: 4px; margin-left: 6px; white-space: nowrap; border: 1px solid var(--border);
}
.thesis-ai-conf-high { color: var(--pos); border-color: color-mix(in srgb, var(--pos) 38%, transparent); background: color-mix(in srgb, var(--pos) 10%, transparent); }
.thesis-ai-conf-moderate { color: var(--accent, #5b8def); border-color: color-mix(in srgb, var(--accent, #5b8def) 35%, transparent); background: color-mix(in srgb, var(--accent, #5b8def) 9%, transparent); }
.thesis-ai-conf-low { color: var(--warn, #d98a00); border-color: color-mix(in srgb, var(--warn, #d98a00) 40%, transparent); background: color-mix(in srgb, var(--warn, #d98a00) 10%, transparent); }
.pick-vert.pick-vert-credit { border-left: 3px solid var(--accent, #5b8def); }
.pick-contract-credit .pick-contract-label { color: var(--accent, #5b8def); }
.ptc-con-spread.ptc-con-credit { color: var(--accent, #5b8def); }

/* --- Thesis v2: the edge, six sections, quality checklist, classification --- */
.pick-thesis.thesis-q-strong { border-left-color: var(--pos); }
.pick-thesis.thesis-q-moderate { border-left-color: var(--warn, #d98a00); }
.pick-thesis.thesis-q-weak, .pick-thesis.thesis-norec-card { border-left-color: var(--text-muted); }
/* classification badge in the thesis head + (smaller) on the compact tile */
.pick-class { margin-left: auto; font: 700 9.5px/1 var(--font-mono); text-transform: uppercase; letter-spacing: 0.05em; padding: 3px 7px; border-radius: 999px; white-space: nowrap; border: 1px solid var(--border); }
.pick-class-actionable { color: var(--pos); background: color-mix(in srgb, var(--pos) 12%, transparent); border-color: color-mix(in srgb, var(--pos) 35%, transparent); }
.pick-class-moderate { color: var(--accent, #5b8def); background: color-mix(in srgb, var(--accent, #5b8def) 12%, transparent); border-color: color-mix(in srgb, var(--accent, #5b8def) 35%, transparent); }
.pick-class-weak { color: var(--warn, #d98a00); background: color-mix(in srgb, var(--warn, #d98a00) 12%, transparent); border-color: color-mix(in srgb, var(--warn, #d98a00) 40%, transparent); }
.pick-class-idea { color: var(--text-muted); background: color-mix(in srgb, var(--text) 6%, transparent); }
/* final-grade chip — the AI grader's tier + score (after the data screen) */
.thesis-final-grade { margin-left: 6px; font: 700 9px/1 var(--font-mono); text-transform: uppercase; letter-spacing: 0.04em; padding: 3px 7px; border-radius: 999px; white-space: nowrap; border: 1px solid var(--border); }
.thesis-final-grade.thesis-q-strong { color: var(--pos); background: color-mix(in srgb, var(--pos) 12%, transparent); border-color: color-mix(in srgb, var(--pos) 35%, transparent); }
.thesis-final-grade.thesis-q-moderate { color: var(--accent, #5b8def); background: color-mix(in srgb, var(--accent, #5b8def) 12%, transparent); border-color: color-mix(in srgb, var(--accent, #5b8def) 35%, transparent); }
.thesis-final-grade.thesis-q-weak { color: var(--warn, #d98a00); background: color-mix(in srgb, var(--warn, #d98a00) 12%, transparent); border-color: color-mix(in srgb, var(--warn, #d98a00) 40%, transparent); }
.ptc-class { font: 700 8.5px/1 var(--font-mono); text-transform: uppercase; letter-spacing: 0.05em; padding: 2px 5px; border-radius: 4px; white-space: nowrap; border: none; margin: 0; }
.ptc-norec { font: 600 11px/1.3 var(--font-sans); color: var(--warn, #d98a00); }
.pick-tab-card.ptc-norec-card { opacity: 0.92; }
/* the EDGE line — the always-visible "why this trade" */
.thesis-edge { font: 500 13px/1.5 var(--font-sans); color: var(--text); background: color-mix(in srgb, var(--accent, #5b8def) 7%, transparent); border-left: 3px solid var(--accent, #5b8def); border-radius: var(--r-1); padding: 7px 10px; }
.thesis-edge.thesis-edge-none { background: color-mix(in srgb, var(--text) 5%, transparent); border-left-color: var(--text-muted); color: var(--text-muted); }
.thesis-edge-lbl { font-weight: 800; text-transform: uppercase; font-size: 10px; letter-spacing: 0.05em; color: var(--accent, #5b8def); margin-right: 5px; }
.thesis-edge-none .thesis-edge-lbl { color: var(--text-muted); }
/* no-strategy-recommendation note */
.thesis-norec { font: 700 12.5px/1.45 var(--font-sans); color: var(--text-strong); background: color-mix(in srgb, var(--warn, #d98a00) 10%, transparent); border: 1px dashed color-mix(in srgb, var(--warn, #d98a00) 45%, transparent); border-radius: var(--r-1); padding: 6px 10px; }
.thesis-norec-why { display: block; font-weight: 400; color: var(--text-muted); margin-top: 2px; }
/* expand / collapse "full reasoning" */
.thesis-expand { border-top: 1px dashed var(--border); padding-top: 6px; }
.thesis-expand > summary { cursor: pointer; list-style: none; font: 700 11px/1.3 var(--font-sans); text-transform: uppercase; letter-spacing: 0.04em; color: var(--accent, #5b8def); padding: 2px 0; user-select: none; }
.thesis-expand > summary::-webkit-details-marker { display: none; }
.thesis-expand > summary::before { content: '▸ '; }
.thesis-expand[open] > summary::before { content: '▾ '; }
.thesis-expand[open] > summary { margin-bottom: 6px; }
.thesis-expand-body { display: flex; flex-direction: column; gap: 9px; }
/* a numbered section inside the expand */
.thesis-sec { display: flex; flex-direction: column; gap: 4px; }
.thesis-sec-head { font: 700 11px/1.3 var(--font-sans); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em; }
.thesis-sec-head.thesis-sec-ok { color: var(--pos); }
.thesis-sec-head.thesis-sec-inval { color: var(--neg); }
.thesis-ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 3px; }
.thesis-ul li { font: 400 12.5px/1.45 var(--font-sans); color: var(--text); display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.thesis-inval-ul li { color: var(--text-muted); }
.thesis-inval-ul li::before { content: '↘'; color: var(--neg); font-weight: 700; }
.thesis-strat-reason { font: 400 12.5px/1.5 var(--font-sans); color: var(--text); }
/* thesis-quality checklist */
.thesis-check-ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 3px; }
.thesis-check { font: 400 12px/1.4 var(--font-sans); display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.thesis-check-mark { font-weight: 800; width: 12px; }
.thesis-check-pass .thesis-check-mark { color: var(--pos); }
.thesis-check-fail .thesis-check-mark { color: var(--neg); }
.thesis-check-fail .thesis-check-lbl { color: var(--text-muted); }
.thesis-check-detail { font: 400 11px/1.3 var(--font-sans); color: var(--text-muted); }
.thesis-q-strong { color: var(--pos); }
.thesis-q-moderate { color: var(--warn, #d98a00); }
.thesis-q-weak { color: var(--text-muted); }
.thesis-q-score { font: 600 10px/1 var(--font-mono); color: var(--text-muted); }
/* roster group headers (Actionable / Ideas·Watch) */
.picks-group-head { grid-column: 1 / -1; width: 100%; flex-basis: 100%; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin: 10px 0 2px; padding-bottom: 5px; border-bottom: 1px solid var(--border); }
.picks-group-title { font: 800 13px/1.2 var(--font-sans); text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-strong); }
.picks-group-actionable .picks-group-title { color: var(--pos); }
.picks-group-watch .picks-group-title { color: var(--text-muted); }
.picks-group-count { font: 700 11px/1 var(--font-mono); color: var(--text-muted); background: color-mix(in srgb, var(--text) 8%, transparent); padding: 2px 7px; border-radius: 999px; }
.picks-group-sub { font: 400 11.5px/1.4 var(--font-sans); color: var(--text-muted); flex-basis: 100%; }
.picks-group-empty { grid-column: 1 / -1; width: 100%; flex-basis: 100%; font: 400 12.5px/1.5 var(--font-sans); color: var(--text-muted); padding: 10px 12px; border: 1px dashed var(--border); border-radius: var(--r-1); }

/* --- Sector-peer comparison -------------------------------------------- */
.pick-peers {
  margin-top: 8px;
  padding: 8px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-2);
}
.pick-peers-head {
  font: 600 10px/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  margin-bottom: 6px;
}
.pick-peer-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.pick-peer {
  display: grid;
  grid-template-columns: 70px 50px 1fr;
  align-items: baseline;
  gap: 8px;
  padding: 3px 6px;
  border-radius: var(--r-1);
  font: 500 13px/1.3 var(--font-sans);
}
.pick-peer-sym {
  font: 700 13px/1 var(--font-mono);
  color: var(--text-strong);
  letter-spacing: .02em;
}
.pick-peer-score {
  font: 600 13px/1 var(--font-mono);
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--text);
}
.pick-peer-tier {
  font: 500 12px/1 var(--font-sans);
  color: var(--muted);
}
.pick-peer.pick-peer-strong-call,
.pick-peer.pick-peer-call {
  background: color-mix(in srgb, var(--pos) 6%, var(--surface-2));
}
.pick-peer.pick-peer-strong-call .pick-peer-score,
.pick-peer.pick-peer-call .pick-peer-score { color: var(--pos); }
.pick-peer.pick-peer-strong-put,
.pick-peer.pick-peer-put {
  background: color-mix(in srgb, var(--neg) 6%, var(--surface-2));
}
.pick-peer.pick-peer-strong-put .pick-peer-score,
.pick-peer.pick-peer-put .pick-peer-score { color: var(--neg); }
.pick-peer.pick-peer-no-trade .pick-peer-score { color: var(--muted); }

/* --- 4-pillar score breakdown (the "Grade" tab) ------------------------ */
.pick-pillars-panel {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.pick-pillars-bar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 4px 6px 8px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}
.pick-pillars-title {
  font: 700 11px/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
}
.pick-pillars-total {
  font: 700 18px/1 var(--font-mono);
  font-variant-numeric: tabular-nums;
}
/* Composition bar — proportional, sign-colored snapshot of how the four
   pillars sum into the score. Segment width = share of total |contribution|;
   the 1-letter code (F/T/M/N) maps each segment to its row below. */
.pick-pillars-viz {
  display: flex;
  gap: 2px;
  height: 16px;
  margin: 2px 6px 4px;
}
.pp-seg {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 3px;
  border-radius: 2px;
  font: 700 10px/1 var(--font-mono);
  color: rgba(8, 10, 14, 0.82);
  overflow: hidden;
}
.pp-seg.sig-pos { background: color-mix(in srgb, var(--pos) 78%, transparent); }
.pp-seg.sig-neg { background: color-mix(in srgb, var(--neg) 78%, transparent); }
.pp-seg.sig-zero { background: color-mix(in srgb, var(--muted) 32%, transparent); }
.pp-seg-l { letter-spacing: .04em; }
.pick-pillars-viz-cap {
  font: 600 10px/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  opacity: .75;
  margin: 0 6px 8px;
}
/* Per-row diverging magnitude bar in each pillar summary. Center line is
   zero; fill extends right (green) for a positive pillar, left (red) for a
   negative one. --pill-mag is the half-width set inline (0–50%). */
.pick-pillar-bar {
  position: relative;
  align-self: center;
  height: 6px;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--text) 7%, transparent);
}
.pick-pillar-bar::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -1px;
  bottom: -1px;
  width: 1px;
  background: color-mix(in srgb, var(--text) 16%, transparent);
}
.pick-pillar-bar i {
  position: absolute;
  top: 0;
  bottom: 0;
  width: var(--pill-mag, 0%);
  border-radius: var(--r-pill);
}
.pick-pillar-bar.sig-pos i { left: 50%; background: var(--pos); }
.pick-pillar-bar.sig-neg i { right: 50%; background: var(--neg); }
.pick-pillar-bar.sig-zero i { display: none; }
.pick-pillar {
  border: 1px solid var(--border);
  border-radius: var(--r-1);
  background: var(--surface);
  overflow: hidden;
}
.pick-pillar > summary.pick-pillar-head {
  list-style: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 46px auto;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  cursor: pointer;
  user-select: none;
  transition: background .12s var(--ease-out);
}
.pick-pillar > summary.pick-pillar-head::-webkit-details-marker { display: none; }
.pick-pillar > summary.pick-pillar-head:hover {
  background: color-mix(in srgb, var(--accent) 5%, var(--surface));
}
.pick-pillar[open] > summary.pick-pillar-head {
  border-bottom: 1px solid var(--border);
}
.pick-pillar-name {
  font: 600 13px/1 var(--font-sans);
  color: var(--text-strong);
}
/* Forward-trajectory chip on the Fundamentals pillar header (↗ improving /
   ↘ declining) — the blended "where it's heading" read. */
.pillar-traj {
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  font: 700 10px/1.4 var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  vertical-align: middle;
}
.pillar-traj.sig-pos { color: var(--pos); background: color-mix(in srgb, var(--pos) 14%, transparent); }
.pillar-traj.sig-neg { color: var(--neg); background: color-mix(in srgb, var(--neg) 14%, transparent); }
.pick-pillar-score {
  font: 700 13px/1 var(--font-mono);
  font-variant-numeric: tabular-nums;
}
/* Per-category plain-language explainer shown at the top of each expanded
   pillar (and the timing panel) so the signals below read without prior
   knowledge of the rubric. */
.pick-pillar-desc {
  margin: 0;
  padding: 8px 10px 0;
  font: 400 12px/1.45 var(--font-sans);
  color: var(--muted-strong);
}
.pick-pillar-signals {
  list-style: none;
  margin: 0;
  padding: 6px 10px 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
/* --- Entry-timing pillar: verdict + classified reason list ---------------- */
.pick-timing-verdict {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 10px 0;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: var(--r-1);
  background: var(--surface);
}
.pick-timing-state {
  flex: 0 0 auto;
  font: 700 11px/1 var(--font-mono);
  letter-spacing: .08em;
  padding: 4px 7px;
  border-radius: var(--r-1);
  color: #fff;
}
.pick-timing-go    .pick-timing-state { background: var(--pos); }
.pick-timing-wait  .pick-timing-state { background: var(--warn, #b8860b); }
.pick-timing-avoid .pick-timing-state { background: var(--neg); }
.pick-timing-go    { border-color: color-mix(in srgb, var(--pos) 40%, var(--border)); }
.pick-timing-wait  { border-color: color-mix(in srgb, var(--warn, #b8860b) 40%, var(--border)); }
.pick-timing-avoid { border-color: color-mix(in srgb, var(--neg) 40%, var(--border)); }
.pick-timing-headline {
  font: 600 12px/1.35 var(--font-sans);
  color: var(--text-strong);
}
.pick-timing-hint {
  margin: 6px 10px 0;
  font: 400 11px/1.4 var(--font-sans);
  color: var(--muted);
}
.pick-timing-group {
  margin: 8px 10px 0;
}
.pick-timing-group:last-child { margin-bottom: 8px; }
.pick-timing-group-head {
  font: 600 11px/1 var(--font-mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
}
.pick-timing-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.pick-timing-list li {
  position: relative;
  padding-left: 14px;
  font: 400 12px/1.4 var(--font-sans);
  color: var(--text);
}
.pick-timing-list li::before {
  position: absolute;
  left: 0;
  top: 0;
  font: 700 12px/1.4 var(--font-mono);
}
.pick-timing-group.is-pro  .pick-timing-list li::before { content: "+"; color: var(--pos); }
.pick-timing-group.is-con  .pick-timing-list li::before { content: "−"; color: var(--neg); }
.pick-timing-group.is-flag .pick-timing-list li::before { content: "⚠"; color: var(--neg); font-size: 11px; }
.pick-timing-group.is-flag .pick-timing-group-head { color: var(--neg); }
.pick-timing-group.is-flag .pick-timing-list li { color: var(--text-strong); font-weight: 500; }
.pick-timing-empty {
  margin: 8px 10px;
  font: 400 12px/1.4 var(--font-sans);
  color: var(--muted);
}
/* Research/unproven footnote on the Entry-timing panel (P0.2): the gate's
   thresholds are fit in-sample and not yet validated on forward picks. Muted +
   a subtle top rule so it reads as a caveat, not a signal. */
.pick-timing-research {
  margin: 8px 10px 4px;
  padding-top: 6px;
  border-top: 1px dashed var(--border, rgba(255,255,255,0.12));
  font: 400 11.5px/1.4 var(--font-sans);
  color: var(--muted);
  font-style: italic;
}
/* Dated-catalysts sub-section inside the Narrative pillar (Top Picks / Grade
   breakdown). Chips reuse the Calendar tab's .cal-chip / .cal-catalyst styling;
   these rules only add the labeled wrapper + let the title wrap in the narrow
   panel (scoped under .pick-catalysts so the Calendar tab's one-line chips are
   untouched). Purely additive — new class names not used elsewhere. */
.pick-catalysts {
  margin: 0 10px 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}
.pick-catalysts-head {
  font: 600 11px/1 var(--font-mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}
.pick-catalysts .cal-chip-text {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}
.pillar-signal {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 8px;
  row-gap: 2px;
  align-items: baseline;
  padding: 2px 0;
  border-radius: var(--r-1);
}
.pillar-signal-label {
  font: 500 12px/1.3 var(--font-sans);
  color: var(--text);
}
.pillar-signal-score {
  font: 700 12px/1 var(--font-mono);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.pillar-signal-value {
  font: 500 11px/1.2 var(--font-mono);
  color: var(--muted);
  grid-column: 1 / -1;
}
.pillar-signal-note {
  font: 400 11px/1.3 var(--font-sans);
  color: var(--muted);
  grid-column: 1 / -1;
  opacity: .8;
}
.pillar-signal.sig-pos .pillar-signal-score { color: var(--pos); }
.pillar-signal.sig-neg .pillar-signal-score { color: var(--neg); }
.pillar-signal.sig-zero .pillar-signal-score { color: var(--muted); opacity: .7; }
.pillar-signal-nodata {
  opacity: .55;
}
.pillar-signal-nodata .pillar-signal-label::after {
  content: " · no data";
  font-style: italic;
  color: var(--muted);
}
/* Sign-coded helpers used by other elements (analysis, peers, totals). */
.sig-pos { color: var(--pos); }
.sig-neg { color: var(--neg); }
.sig-zero { color: var(--muted); }

/* "In plain English" explainer block — translates the Greek/IV row above
   into beginner-friendly bullets. Subtle bordered panel, mono digits, so
   it reads as a sibling of the contract block rather than a callout. */
.pick-plain {
  margin-top: 8px;
  padding: 8px 10px;
  background: color-mix(in srgb, var(--accent) 4%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border));
  border-radius: var(--r-2);
}
.pick-plain-head {
  font: 600 10px/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  margin-bottom: 6px;
}
.pick-plain-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pick-plain-list li {
  font: 400 13px/1.5 var(--font-sans);
  color: var(--text);
  padding-left: 14px;
  position: relative;
}
.pick-plain-list li::before {
  content: "›";
  position: absolute;
  left: 2px;
  top: 0;
  color: var(--muted);
  font-weight: 700;
}
.pick-plain-list b {
  color: var(--text-strong);
  font-weight: 600;
}
.pick-card.call .pick-plain {
  background: color-mix(in srgb, var(--pos) 4%, var(--surface));
  border-color: color-mix(in srgb, var(--pos) 20%, var(--border));
}
.pick-card.put .pick-plain {
  background: color-mix(in srgb, var(--neg) 4%, var(--surface));
  border-color: color-mix(in srgb, var(--neg) 20%, var(--border));
}

/* Exit plan — two price targets (take-profit + cut/reduce) plus contextual
   exit triggers. Sits under the contract block. */
/* ----- Entry plan (mirror of the exit ladder) ------------------------------ */
.pick-entry {
  margin-top: 8px;
  padding: 8px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-2);
}
.pick-entry-head {
  font: 600 10px/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  margin-bottom: 6px;
}
.pick-entry-alert, .pick-entry-defer {
  font: 400 12.5px/1.45 var(--font-sans);
  color: var(--text-strong);
  padding: 7px 9px;
  margin-bottom: 7px;
  border: 1px solid color-mix(in srgb, var(--warn) 45%, var(--border));
  border-left-width: 3px;
  border-left-color: var(--warn);
  border-radius: var(--r-1);
  background: color-mix(in srgb, var(--warn) 9%, var(--surface));
}
.pick-entry-defer b { color: var(--warn); }
.pick-entry-strat {
  padding: 7px 9px;
  margin-bottom: 7px;
  border: 1px solid var(--border);
  border-left-width: 3px;
  border-left-color: var(--accent);
  border-radius: var(--r-1);
  background: color-mix(in srgb, var(--accent) 5%, var(--surface));
}
.pick-entry-strat-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.pick-entry-strat-name {
  font: 700 13.5px/1.2 var(--font-sans);
  color: var(--text-strong);
}
.pick-entry-strat-strength {
  font: 700 9.5px/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: 3px 6px;
  border-radius: var(--r-pill);
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, var(--surface));
}
.pick-entry-strat-blurb {
  font: 400 12.5px/1.45 var(--font-sans);
  color: var(--text);
  margin-top: 3px;
}
.pick-entry-sizing {
  display: flex;
  align-items: baseline;
  gap: 7px;
  flex-wrap: wrap;
  margin-bottom: 7px;
}
.pick-entry-stance {
  flex: none;
  font: 700 9.5px/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: 3px 7px;
  border-radius: var(--r-pill);
  white-space: nowrap;
}
.pick-entry-stance-full {
  color: var(--pos);
  background: color-mix(in srgb, var(--pos) 14%, var(--surface));
}
.pick-entry-stance-scale {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, var(--surface));
}
.pick-entry-sizing-txt {
  font: 400 12.5px/1.45 var(--font-sans);
  color: var(--text);
}
.pick-entry-ladder {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.pick-entry-rung {
  padding: 5px 9px;
  border: 1px solid var(--border);
  border-left-width: 3px;
  border-left-color: var(--accent);
  border-radius: var(--r-1);
  background: var(--surface);
}
.pick-entry-rung-starter {
  border-left-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 5%, var(--surface));
}
.pick-entry-rung-add { border-left-color: color-mix(in srgb, var(--accent) 60%, var(--muted)); }
.pick-entry-rung-final { border-left-color: var(--muted); border-left-style: dashed; }
.pick-entry-rung-main {
  display: flex;
  align-items: baseline;
  gap: 7px;
  flex-wrap: wrap;
}
.pick-entry-size {
  flex: none;
  font: 700 10px/1 var(--font-mono);
  letter-spacing: .03em;
  padding: 3px 6px;
  border-radius: var(--r-pill);
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, var(--surface));
}
.pick-entry-price {
  font: 700 14px/1 var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--text-strong);
}
.pick-entry-move {
  font: 600 12px/1 var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}
.pick-entry-rung-label {
  font: 400 12px/1.3 var(--font-sans);
  color: var(--muted-strong);
}
.pick-entry-trigger {
  font: 400 12.5px/1.4 var(--font-sans);
  color: var(--text);
  margin-top: 2px;
  padding-left: 13px;
  position: relative;
}
.pick-entry-trigger::before {
  content: "▸";
  position: absolute;
  left: 2px;
  top: 0;
  color: var(--accent);
  font-weight: 700;
}
/* "±20 grade at 50D SMA" alert chips (detail header + grid card) */
.pick-fifty-alert {
  font: 700 10px/1 var(--font-mono);
  letter-spacing: .04em;
  padding: 3px 7px;
  border-radius: var(--r-pill);
  color: var(--warn);
  background: color-mix(in srgb, var(--warn) 15%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--warn) 40%, transparent);
  white-space: nowrap;
}
.ptc-alert {
  font: 700 9px/1 var(--font-mono);
  letter-spacing: .03em;
  padding: 2px 5px;
  border-radius: var(--r-pill);
  color: var(--warn);
  background: color-mix(in srgb, var(--warn) 15%, var(--surface));
  white-space: nowrap;
}

.pick-exit {
  margin-top: 8px;
  padding: 8px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-2);
}
.pick-exit-head {
  font: 600 10px/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  margin-bottom: 6px;
}
.pick-exit-targets {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 6px;
}
.pick-exit-target {
  padding: 7px 9px;
  border: 1px solid var(--border);
  border-radius: var(--r-1);
  background: var(--surface);
  border-left-width: 3px;
}
.pick-exit-tp {
  border-left-color: var(--pos);
  background: color-mix(in srgb, var(--pos) 4%, var(--surface));
}
.pick-exit-cut {
  border-left-color: var(--neg);
  background: color-mix(in srgb, var(--neg) 4%, var(--surface));
}
.pick-exit-target-head {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 3px;
}
.pick-exit-kind {
  font: 600 11px/1.2 var(--font-sans);
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-strong);
}
.pick-exit-tp .pick-exit-kind { color: var(--pos); }
.pick-exit-cut .pick-exit-kind { color: var(--neg); }
.pick-exit-price {
  font: 700 14px/1 var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--text-strong);
  margin-left: auto;
}
.pick-exit-move {
  font: 600 12px/1 var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}
.pick-exit-reason {
  font: 400 12.5px/1.45 var(--font-sans);
  color: var(--text);
}
.pick-exit-pillars { margin-top: 9px; }
.pick-exit-pillars-head {
  font: 600 10px/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  margin-bottom: 5px;
}
.pick-exit-pillar {
  padding: 6px 0;
  border-top: 1px solid var(--border);
}
.pick-exit-pillar:first-of-type { border-top: 0; padding-top: 0; }
.pick-exit-pillar-head {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 2px;
}
.pick-exit-pillar-label {
  font: 600 11px/1.2 var(--font-sans);
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-strong);
}
.pick-exit-strength {
  font: 700 9.5px/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 2px 5px;
  border-radius: var(--r-1);
  color: var(--muted-strong);
  background: color-mix(in srgb, var(--muted) 14%, var(--surface));
}
.pick-exit-strength-very-high {
  color: var(--neg);
  background: color-mix(in srgb, var(--neg) 12%, var(--surface));
}
.pick-exit-pillar-reason {
  font: 400 12.5px/1.45 var(--font-sans);
  color: var(--text);
}
.pick-exit-triggers { margin-top: 7px; }
.pick-exit-triggers-head {
  font: 600 10px/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  margin-bottom: 4px;
}
.pick-exit-trigger-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.pick-exit-trigger-list li {
  font: 400 12.5px/1.45 var(--font-sans);
  color: var(--text);
  padding-left: 14px;
  position: relative;
}
.pick-exit-trigger-list li::before {
  content: "›";
  position: absolute;
  left: 2px;
  top: 0;
  color: var(--muted);
  font-weight: 700;
}

/* Layered exit ladder — a vertical price ladder (high → low) with an action,
   prose line, per-pillar "why this level" disclosure, and watch-for cue per
   rung. Role accents map to the chart: take-profit/runner green, cut red,
   reduce amber, spot a muted dashed marker. */
.pick-exit-overview {
  font: 500 12.5px/1.45 var(--font-sans);
  color: var(--text-strong);
  margin: 0 0 8px;
  padding: 6px 8px;
  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
  border-left: 2px solid var(--accent);
  border-radius: var(--r-1);
}
/* Two side-by-side ladders: scale-out (above entry) left, defend & cut
   (entry + below) right. Stacks back to one column on narrow viewports. */
.pick-exit-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  align-items: start;
}
@media (max-width: 720px) {
  .pick-exit-cols { grid-template-columns: minmax(0, 1fr); }
}
.pick-exit-col-head {
  font: 600 10px/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 5px;
}
.pick-exit-col-head-up { color: var(--pos); }
.pick-exit-col-head-down { color: var(--neg); }
.pick-exit-ladder {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.pick-exit-level {
  padding: 5px 9px;
  border: 1px solid var(--border);
  border-left-width: 3px;
  border-radius: var(--r-1);
  background: var(--surface);
}
.pick-exit-level-tp {
  border-left-color: var(--pos);
  background: color-mix(in srgb, var(--pos) 5%, var(--surface));
}
.pick-exit-level-runner { border-left-color: var(--pos); border-left-style: dashed; }
.pick-exit-level-trim { border-left-color: color-mix(in srgb, var(--pos) 55%, var(--muted)); }
.pick-exit-level-spot {
  border-left-color: var(--muted);
  border-left-style: dashed;
  background: var(--surface-2);
}
.pick-exit-level-reduce { border-left-color: var(--warn); }
.pick-exit-level-cut {
  border-left-color: var(--neg);
  background: color-mix(in srgb, var(--neg) 5%, var(--surface));
}
.pick-exit-level-main {
  display: flex;
  align-items: baseline;
  gap: 7px;
  flex-wrap: wrap;
}
.pick-exit-level-price {
  font: 700 14px/1 var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--text-strong);
}
.pick-exit-action {
  margin-left: auto;
  font: 700 9.5px/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: 3px 6px;
  border-radius: var(--r-pill);
  color: var(--muted-strong);
  background: color-mix(in srgb, var(--muted) 14%, var(--surface));
}
.pick-exit-level-tp .pick-exit-action,
.pick-exit-level-runner .pick-exit-action {
  color: var(--pos);
  background: color-mix(in srgb, var(--pos) 13%, var(--surface));
}
.pick-exit-level-cut .pick-exit-action {
  color: var(--neg);
  background: color-mix(in srgb, var(--neg) 13%, var(--surface));
}
.pick-exit-level-reduce .pick-exit-action {
  color: var(--warn);
  background: color-mix(in srgb, var(--warn) 16%, var(--surface));
}
/* Concrete contract (option) price to set the take-profit / stop at, shown
   next to the underlying stock level. */
.pick-exit-opt {
  font: 700 9.5px/1 var(--font-mono);
  font-variant-numeric: tabular-nums;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 3px 6px;
  border-radius: var(--r-pill);
  white-space: nowrap;
  border: 1px solid transparent;
}
.pick-exit-opt-stop {
  color: var(--neg);
  background: color-mix(in srgb, var(--neg) 10%, var(--surface));
  border-color: color-mix(in srgb, var(--neg) 30%, transparent);
}
.pick-exit-opt-tp {
  color: var(--pos);
  background: color-mix(in srgb, var(--pos) 10%, var(--surface));
  border-color: color-mix(in srgb, var(--pos) 30%, transparent);
}
.pick-exit-opt-pct { opacity: .8; }
.pick-exit-level-prose {
  font: 400 12.5px/1.4 var(--font-sans);
  color: var(--text);
  margin-top: 2px;
}
.pick-exit-watch {
  font: 400 12px/1.4 var(--font-sans);
  color: var(--muted-strong);
  margin-top: 2px;
  padding-left: 13px;
  position: relative;
}
.pick-exit-watch::before {
  content: "▸";
  position: absolute;
  left: 2px;
  top: 0;
  color: var(--warn);
  font-weight: 700;
}
.pick-exit-why { margin-top: 3px; }
.pick-exit-why > summary {
  cursor: pointer;
  list-style: none;
  display: inline-block;
  font: 600 9.5px/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--muted);
  transition: color .12s var(--ease-out);
}
.pick-exit-why > summary:hover { color: var(--accent); }
.pick-exit-why[open] > summary { color: var(--accent); margin-bottom: 4px; }
.pick-exit-why > summary::-webkit-details-marker { display: none; }
.pick-exit-rsn-list {
  list-style: none;
  margin: 6px 0 2px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.pick-exit-rsn {
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: 7px;
  align-items: start;
}
.pick-exit-rsn-tag {
  font: 700 10px/16px var(--font-mono);
  text-align: center;
  width: 16px;
  height: 16px;
  border-radius: var(--r-1);
  color: var(--surface);
  background: var(--muted-strong);
}
.pick-exit-rsn-technical .pick-exit-rsn-tag { background: var(--accent); }
.pick-exit-rsn-fundamental .pick-exit-rsn-tag { background: var(--pos); }
.pick-exit-rsn-mechanical .pick-exit-rsn-tag { background: var(--muted-strong); }
.pick-exit-rsn-narrative .pick-exit-rsn-tag { background: var(--warn); }
.pick-exit-rsn-txt {
  font: 400 12px/1.4 var(--font-sans);
  color: var(--text);
}

/* Audit-panel lead caption — names the dominant pillar up top. */
.pick-pillars-lead {
  font: 600 12px/1.3 var(--font-sans);
  margin: 0 0 7px;
}
.pick-pillars-lead b { font-variant-numeric: tabular-nums; }
.pick-pillars-lead.sig-pos { color: var(--pos); }
.pick-pillars-lead.sig-neg { color: var(--neg); }
.pick-pillars-lead.sig-zero { color: var(--muted-strong); }

/* Regime-weighting banner (§3.5.1) — explains how the live market tape is
   re-weighting the grade (slow pillars discounted in risk-off, boosted in
   risk-on). Hidden in the neutral tape (no element emitted). */
.pick-pillars-regime {
  display: flex;
  gap: 6px;
  align-items: flex-start;
  font: 500 11.5px/1.4 var(--font-sans);
  padding: 6px 8px;
  margin: 0 0 8px;
  border-radius: 7px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--muted-strong);
}
.pick-pillars-regime .ppr-ico { flex: 0 0 auto; font-size: 12px; line-height: 1.3; }
.pick-pillars-regime.pp-regime-off,
.pick-pillars-regime.pp-regime-severe {
  border-color: color-mix(in srgb, var(--neg) 35%, var(--border));
  background: color-mix(in srgb, var(--neg) 9%, var(--surface));
}
.pick-pillars-regime.pp-regime-off .ppr-ico,
.pick-pillars-regime.pp-regime-severe .ppr-ico { color: var(--neg); }
.pick-pillars-regime.pp-regime-severe { background: color-mix(in srgb, var(--neg) 15%, var(--surface)); }
.pick-pillars-regime.pp-regime-on {
  border-color: color-mix(in srgb, var(--pos) 35%, var(--border));
  background: color-mix(in srgb, var(--pos) 9%, var(--surface));
}
.pick-pillars-regime.pp-regime-on .ppr-ico { color: var(--pos); }

/* ===== Track record (pick accuracy) tab ============================== */
.acc-ok { color: var(--pos); font-weight: 600; }
.acc-bad { color: var(--neg); font-weight: 600; }
/* === Track-record sub-tabs (Scorecard / Top 10 / Activity / Picks) ===
   One short view at a time instead of the old single long scroll. The tab
   strip mirrors .opt-tabs (Grade tab) so the two read consistently. */
.accuracy-how {
  margin: -2px 0 4px;
}
.accuracy-how > summary {
  cursor: pointer;
  list-style: none;
  width: max-content;
  padding: 2px 0;
  color: var(--accent);
  font: 600 11px/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .07em;
}
.accuracy-how > summary::-webkit-details-marker { display: none; }
.accuracy-how > summary::before { content: "▸ "; }
.accuracy-how[open] > summary::before { content: "▾ "; }
.accuracy-how > p {
  margin: 8px 0 0;
  color: var(--muted-strong);
  font: 400 13px/1.5 var(--font-sans);
}
.acc-tabs {
  display: flex; flex-wrap: wrap; gap: 0;
  margin: var(--s-4) 0 0;
  border-bottom: 1px solid var(--border);
}
.acc-tab {
  position: relative;
  appearance: none; background: transparent;
  border: none; border-bottom: 2px solid transparent;
  padding: 10px 16px;
  font-family: var(--font-mono);
  font-size: var(--fs-sm); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--muted);
  cursor: pointer;
  margin-bottom: -1px;
  border-radius: var(--r-1) var(--r-1) 0 0;
}
.acc-tab:hover {
  color: var(--text);
  background: color-mix(in srgb, var(--accent) 4%, transparent);
}
.acc-tab[aria-selected="true"] {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.acc-tab[aria-selected="true"]::after {
  content: "";
  position: absolute;
  inset: auto 0 -2px 0;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    color-mix(in srgb, var(--accent) 60%, transparent) 50%,
    transparent 100%);
  filter: blur(3px);
  pointer-events: none;
}
.acc-tab-n {
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: var(--r-pill);
  font: 700 10px/1.5 var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  color: var(--muted-strong);
  background: color-mix(in srgb, var(--muted) 16%, var(--surface));
}
.acc-tab[aria-selected="true"] .acc-tab-n {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}
.acc-pane { padding-top: var(--s-4); }
.acc-pane[hidden] { display: none; }
.acc-pane-empty {
  color: var(--muted);
  font: 400 13px/1.5 var(--font-sans);
  padding: 12px 0;
}
.acc-pane-empty[hidden] { display: none; }
/* Advanced / research disclosure inside the Scorecard pane — demotes the
   sector / regime / A-B cohort bars + fade-the-grade / grade-IC chips. */
.accuracy-advanced {
  margin-top: 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-2);
  background: var(--surface);
}
.accuracy-advanced > summary {
  cursor: pointer;
  list-style: none;
  padding: 9px 12px;
  font: 600 11px/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted-strong);
}
.accuracy-advanced > summary::-webkit-details-marker { display: none; }
.accuracy-advanced > summary::before { content: "▸ "; color: var(--muted); }
.accuracy-advanced[open] > summary::before { content: "▾ "; }
.accuracy-advanced[open] > summary { border-bottom: 1px solid var(--border); }
.accuracy-advanced-body {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
/* Flatten the cohort blocks inside the advanced card — the disclosure already
   frames them, so drop their own surface chrome to avoid nested boxes. */
.accuracy-advanced-body .accuracy-tiers { background: transparent; border: none; padding: 0; }
.accuracy-chips-research { margin-bottom: 0; }

/* ── Track Record analytics: Scorecard $-lens + Equity / Breakdowns /
      Simulator / Monte-Carlo sub-tabs ────────────────────────────────────── */
.acc-analytics { margin-top: 10px; }
.acc-an-lead { margin: 2px 0 10px; }
.acc-an-note { margin: 8px 0; }
.acc-an-subhead {
  font-size: var(--fs-sm); font-weight: 700; color: var(--text-strong);
  margin: 16px 0 8px; display: flex; align-items: center; gap: 8px;
}
.acc-an-tag, .acc-xtab-hint {
  font-size: 11px; font-weight: 600; color: var(--muted);
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 999px; padding: 1px 8px; letter-spacing: .02em;
}
.acc-pctlens-head { margin-top: 20px; }
.accuracy-profit { margin-bottom: 6px; }
.acc-controls { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; margin: 4px 0 12px; }
.acc-ctl { display: flex; align-items: center; gap: 8px; }
.acc-ctl-lbl { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.acc-seg label { padding: 5px 12px; font-size: 12px; }
.acc-check { display: inline-flex; align-items: center; gap: 7px; font-size: var(--fs-sm); color: var(--text-strong); cursor: pointer; }
.acc-check input { accent-color: var(--accent); width: 15px; height: 15px; }
.acc-hypo {
  display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .04em;
  color: var(--neg); background: color-mix(in srgb, var(--neg) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--neg) 35%, transparent);
  border-radius: 6px; padding: 4px 10px; margin-bottom: 10px;
}
.acc-an-rules { margin-top: 14px; font-size: var(--fs-sm); color: var(--muted); }
.acc-an-rules summary { cursor: pointer; font-weight: 600; color: var(--text-strong); }
.acc-an-rules ul { margin: 8px 0 0; padding-left: 18px; }
.acc-an-rules li { margin: 4px 0; }
/* metric tables (one CSS grid; header + label + numeric cells flow as items) */
.acc-tscroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.acc-mtable { display: grid; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; min-width: 520px; }
.acc-mh, .acc-ml, .acc-mc { background: var(--surface); padding: 7px 9px; font-size: 12px; font-variant-numeric: tabular-nums; }
.acc-mh { background: var(--surface-2); font-weight: 700; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .03em; text-align: right; }
.acc-mh.acc-ml { text-align: left; }
.acc-ml { font-weight: 600; color: var(--text-strong); text-align: left; }
.acc-mc { text-align: right; color: var(--text-strong); }
.acc-mrow-total { background: var(--surface-2); font-weight: 700; }
/* cross-tab heatmap */
.acc-xtab-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; }
.acc-xsel { background: var(--surface-2); color: var(--text-strong); border: 1px solid var(--border); border-radius: 6px; padding: 5px 8px; font-size: 12px; }
.acc-xtab-x { color: var(--muted); font-weight: 700; }
.acc-xtab { display: grid; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; min-width: 420px; }
.acc-xh, .acc-xrh, .acc-xc, .acc-xcorner { background: var(--surface); padding: 6px 8px; font-size: 11px; }
.acc-xh { background: var(--surface-2); font-weight: 700; color: var(--muted); text-align: center; }
.acc-xrh { background: var(--surface-2); font-weight: 700; color: var(--text-strong); }
.acc-xc { text-align: center; display: flex; flex-direction: column; gap: 1px; font-variant-numeric: tabular-nums; }
.acc-xc-wr { font-weight: 700; color: var(--text-strong); }
.acc-xc-sub { font-size: 10px; color: var(--muted); }
.acc-xc-empty { color: var(--muted); opacity: .5; align-items: center; justify-content: center; }
/* equity / fan / histogram svg */
.acc-eq-svg, .acc-hist-svg, .acc-fan-svg { width: 100%; height: auto; display: block; margin: 6px 0 2px; }
.acc-eq-grid { stroke: var(--border); stroke-width: 1; }
.acc-eq-yl, .acc-hist-xl { fill: var(--muted); font-size: 10px; }
.acc-eq-yl { text-anchor: end; }
.acc-hist-xl { text-anchor: middle; }
.acc-eq-base { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 3; opacity: .6; }
.acc-eq-area.up { fill: color-mix(in srgb, var(--pos) 14%, transparent); }
.acc-eq-area.down { fill: color-mix(in srgb, var(--neg) 14%, transparent); }
.acc-eq-line { fill: none; stroke-width: 2; }
.acc-eq-line.up { stroke: var(--pos); }
.acc-eq-line.down { stroke: var(--neg); }
.acc-eq-dot.up { fill: var(--pos); }
.acc-eq-dot.down { fill: var(--neg); }
.acc-hist-bar { fill: var(--accent); }
.acc-hist-bar.is-neg { fill: var(--neg); }
.acc-hist-mark { stroke: var(--muted); stroke-width: 1.5; stroke-dasharray: 4 3; }
.acc-fan-path { fill: none; stroke: var(--accent); stroke-width: .6; opacity: .14; }
.acc-fan-env { fill: color-mix(in srgb, var(--accent) 12%, transparent); stroke: none; }
.acc-fan-median { fill: none; stroke: var(--accent); stroke-width: 2.5; }
/* monte carlo cards + run button */
.acc-mc-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 10px 0; }
.acc-mc-card { background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 12px; display: flex; flex-direction: column; gap: 3px; }
.acc-mc-num { font-size: 20px; font-weight: 800; color: var(--text-strong); font-variant-numeric: tabular-nums; }
.acc-mc-card.sig-pos .acc-mc-num { color: var(--pos); }
.acc-mc-card.sig-neg .acc-mc-num { color: var(--neg); }
.acc-mc-lbl { font-size: 11px; color: var(--muted); }
.acc-mc-run { cursor: pointer; background: var(--accent); color: #fff; border: none; border-radius: var(--r-pill); padding: 8px 18px; font-size: 13px; font-weight: 700; }
.acc-mc-run:disabled { opacity: .5; cursor: not-allowed; }
/* engine summary (Summary sub-tab) */
.acc-sum-verdict {
  display: flex; align-items: flex-start; gap: 12px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-left: 3px solid var(--muted); border-radius: 10px; padding: 12px 14px; margin: 6px 0 14px;
}
.acc-sum-badge {
  flex: none; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  border-radius: 999px; padding: 4px 10px; margin-top: 1px;
  color: var(--muted-strong); background: var(--surface-3);
}
.acc-sum-verdict.acc-sum-healthy { border-left-color: var(--pos); }
.acc-sum-verdict.acc-sum-healthy .acc-sum-badge { color: var(--pos); background: color-mix(in srgb, var(--pos) 14%, transparent); }
.acc-sum-verdict.acc-sum-mixed { border-left-color: var(--warn); }
.acc-sum-verdict.acc-sum-mixed .acc-sum-badge { color: var(--warn); background: color-mix(in srgb, var(--warn) 14%, transparent); }
.acc-sum-verdict.acc-sum-struggling { border-left-color: var(--neg); }
.acc-sum-verdict.acc-sum-struggling .acc-sum-badge { color: var(--neg); background: color-mix(in srgb, var(--neg) 14%, transparent); }
.acc-sum-verdict.acc-sum-early { border-left-color: var(--info); }
.acc-sum-verdict.acc-sum-early .acc-sum-badge { color: var(--info); background: color-mix(in srgb, var(--info) 14%, transparent); }
.acc-sum-story { margin: 0; font-size: var(--fs-sm); color: var(--text-strong); line-height: 1.55; }
.acc-sum-note { margin: 8px 0; font-size: var(--fs-sm); color: var(--text-strong); line-height: 1.55; }
.acc-sum-exits { margin: 6px 0 2px; }
.acc-attr-bar { display: flex; gap: 2px; border-radius: 6px; overflow: hidden; margin: 4px 0 6px; }
.acc-attr-seg { min-width: 26px; text-align: center; font-size: 11px; font-weight: 800; padding: 5px 0; color: #fff; }
.acc-attr-seg.acc-attr-dir, .acc-attr-dot.acc-attr-dir { background: var(--neg); }
.acc-attr-seg.acc-attr-mix, .acc-attr-dot.acc-attr-mix { background: var(--warn); }
.acc-attr-seg.acc-attr-theta, .acc-attr-dot.acc-attr-theta { background: var(--info); }
.acc-attr-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 11px; color: var(--muted); margin-bottom: 4px; }
.acc-attr-legend span { display: inline-flex; align-items: center; gap: 6px; }
.acc-attr-dot { width: 9px; height: 9px; border-radius: 3px; display: inline-block; }
.acc-sum-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0 22px; }
.acc-sum-list { list-style: none; margin: 0; padding: 0; }
.acc-sum-seg {
  display: grid; grid-template-columns: 1fr auto; gap: 0 10px; align-items: baseline;
  padding: 7px 2px; border-bottom: 1px solid var(--border);
}
.acc-sum-seg-lbl { font-size: var(--fs-sm); font-weight: 600; color: var(--text-strong); display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.acc-sum-seg-dim { font-size: 10px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.acc-sum-seg-val { font-size: var(--fs-sm); font-weight: 800; font-variant-numeric: tabular-nums; }
.acc-sum-seg-sub { grid-column: 1 / -1; font-size: 11px; color: var(--muted); }
.acc-sum-diags { margin: 6px 0 10px; padding-left: 20px; }
.acc-sum-diags li { margin: 7px 0; font-size: var(--fs-sm); color: var(--text-strong); line-height: 1.55; }
.acc-why-list { list-style: none; margin: 4px 0 0; padding: 0; }
.acc-why-row { border: 1px solid var(--border); border-left: 3px solid var(--muted); border-radius: 8px; padding: 9px 12px; margin: 8px 0; background: var(--surface); }
.acc-why-row.acc-why-win { border-left-color: var(--pos); }
.acc-why-row.acc-why-loss { border-left-color: var(--neg); }
.acc-why-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.acc-why-outcome { font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; }
.acc-why-meta { font-size: 11px; color: var(--muted); margin-left: auto; }
.acc-why-text { margin: 6px 0 0; font-size: var(--fs-sm); color: var(--text-strong); line-height: 1.5; }
.acc-why-more { margin-top: 8px; font-size: var(--fs-sm); }
.acc-why-more summary { cursor: pointer; font-weight: 600; color: var(--muted-strong); }

.accuracy-stats { margin: 10px 0 14px; }
.accuracy-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.accuracy-chip {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 12px;
  min-width: 80px;
  border: 1px solid var(--border);
  border-radius: var(--r-2);
  background: var(--surface);
}
.accuracy-chip-num {
  font: 700 18px/1 var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--text-strong);
}
.accuracy-chip-lbl {
  font: 500 10.5px/1.1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
}
.accuracy-chip-good .accuracy-chip-num { color: var(--pos); }
.accuracy-chip-bad .accuracy-chip-num { color: var(--neg); }
/* Tint the whole chip (not just the number) so the scorecard's good/bad split
   reads at a glance instead of only on close inspection. */
.accuracy-chip-good { border-color: color-mix(in srgb, var(--pos) 28%, var(--border)); background: color-mix(in srgb, var(--pos) 6%, var(--surface)); }
.accuracy-chip-bad { border-color: color-mix(in srgb, var(--neg) 28%, var(--border)); background: color-mix(in srgb, var(--neg) 6%, var(--surface)); }
/* Win / loss size profile — avg winner vs avg loser + the payoff ratio, with a
   back-to-back bar so the asymmetry is the visual. */
.accuracy-payoff {
  padding: 10px 12px;
  margin-bottom: 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-2);
  background: var(--surface);
}
.payoff-tag {
  margin-left: 6px;
  padding: 2px 6px;
  border-radius: var(--r-pill);
  font: 600 9.5px/1 var(--font-sans);
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted-strong);
  background: color-mix(in srgb, var(--muted) 14%, var(--surface));
  vertical-align: middle;
}
.payoff-bar {
  display: flex;
  align-items: center;
  height: 9px;
  margin: 10px 0 12px;
}
.payoff-bar-side { flex: 1 1 0; height: 100%; display: flex; }
.payoff-bar-loss { justify-content: flex-end; padding-right: 3px; border-right: 1px solid var(--border); }
.payoff-bar-win { justify-content: flex-start; padding-left: 3px; }
.payoff-bar-side i { display: block; height: 100%; border-radius: var(--r-pill); }
.payoff-bar-loss i { background: var(--neg); }
.payoff-bar-win i { background: var(--pos); }
.payoff-stats { display: flex; gap: 20px; }
.payoff-stat { display: flex; flex-direction: column; gap: 3px; }
.payoff-num {
  font: 700 15px/1 var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--text-strong);
}
.payoff-num.sig-pos { color: var(--pos); }
.payoff-num.sig-neg { color: var(--neg); }
.payoff-lbl {
  font: 500 10.5px/1.1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
}
.accuracy-tiers {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-2);
  background: var(--surface);
}
.accuracy-tiers-head {
  font: 600 10px/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  margin-bottom: 8px;
}
.acc-tier-row {
  display: grid;
  grid-template-columns: 110px 1fr 44px 44px;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
}
.acc-tier-bar {
  height: 7px;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--muted) 18%, var(--surface));
  overflow: hidden;
}
.acc-tier-bar i {
  display: block;
  height: 100%;
  border-radius: var(--r-pill);
  background: var(--muted);
}
.acc-tier-bar i.sig-pos { background: var(--pos); }
.acc-tier-bar i.sig-neg { background: var(--neg); }
.acc-tier-rate {
  font: 700 13px/1 var(--font-mono);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.acc-tier-n {
  font: 500 11px/1 var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  text-align: right;
}
.accuracy-root {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.accuracy-group-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font: 600 12px/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-strong);
  margin-bottom: 8px;
}
.accuracy-group-n {
  font: 700 10px/1 var(--font-mono);
  padding: 2px 6px;
  border-radius: var(--r-pill);
  color: var(--muted-strong);
  background: color-mix(in srgb, var(--muted) 16%, var(--surface));
}
.acc-row {
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-left-width: 3px;
  border-radius: var(--r-1);
  background: var(--surface);
  margin-bottom: 6px;
}
.acc-row-open { border-left-color: var(--accent); }
.acc-outcome-win { border-left-color: var(--pos); background: color-mix(in srgb, var(--pos) 4%, var(--surface)); }
.acc-outcome-loss { border-left-color: var(--neg); background: color-mix(in srgb, var(--neg) 4%, var(--surface)); }
.acc-outcome-flat { border-left-color: var(--muted); }
.acc-row-head {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}
.acc-side {
  font: 700 9.5px/1 var(--font-mono);
  letter-spacing: .05em;
  padding: 3px 5px;
  border-radius: var(--r-1);
}
.acc-side-call { color: var(--pos); background: color-mix(in srgb, var(--pos) 13%, var(--surface)); }
.acc-side-put { color: var(--neg); background: color-mix(in srgb, var(--neg) 13%, var(--surface)); }
.acc-sym {
  font: 700 14px/1 var(--font-mono);
  color: var(--text-strong);
}
.acc-tier {
  font: 600 10px/1 var(--font-sans);
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 3px 6px;
  border-radius: var(--r-pill);
  color: var(--muted-strong);
  background: color-mix(in srgb, var(--muted) 14%, var(--surface));
}
.acc-tier-strong-call, .acc-tier-call { color: var(--pos); background: color-mix(in srgb, var(--pos) 12%, var(--surface)); }
.acc-tier-strong-put, .acc-tier-put { color: var(--neg); background: color-mix(in srgb, var(--neg) 12%, var(--surface)); }
.acc-score {
  font: 700 13px/1 var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--muted-strong);
}
.acc-since {
  margin-left: auto;
  font: 700 13px/1 var(--font-mono);
  font-variant-numeric: tabular-nums;
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}
/* Small muted "contract" / "stock" label inside the lead P&L chip, so it's clear
   whether the headline number is the modeled option mark or the underlying move. */
.acc-since-tag {
  font: 600 9px/1 var(--font-sans);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted);
}
.acc-grade {
  margin-left: auto;
  font: 600 11.5px/1 var(--font-sans);
  color: var(--muted-strong);
}
.acc-outcome {
  font: 700 10px/1 var(--font-mono);
  letter-spacing: .06em;
  padding: 3px 6px;
  border-radius: var(--r-1);
}
.acc-outcome-tag-win { color: var(--surface); background: var(--pos); }
.acc-outcome-tag-loss { color: var(--surface); background: var(--neg); }
.acc-outcome-tag-flat { color: var(--muted-strong); background: color-mix(in srgb, var(--muted) 16%, var(--surface)); }
.acc-row-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin-top: 5px;
  font: 400 12px/1.3 var(--font-sans);
  color: var(--muted-strong);
}
.acc-row-meta .acc-peak { color: var(--muted); }
.acc-targets {
  display: flex;
  gap: 8px;
  margin-top: 5px;
}
.acc-target {
  font: 600 11px/1 var(--font-mono);
  font-variant-numeric: tabular-nums;
  padding: 3px 6px;
  border-radius: var(--r-1);
}
.acc-target-tp { color: var(--pos); background: color-mix(in srgb, var(--pos) 10%, var(--surface)); }
.acc-target-cut { color: var(--neg); background: color-mix(in srgb, var(--neg) 10%, var(--surface)); }
.acc-contract {
  font: 600 11px/1 var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--muted-strong);
  padding: 3px 6px;
  border-radius: var(--r-1);
  background: color-mix(in srgb, var(--muted) 12%, var(--surface));
}
/* Per-ticker dropdown grouping multiple open contracts. Collapsed by default
   so a hot ticker with several contracts stays to one summary line. */
.acc-dd {
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-1);
  background: var(--surface);
  margin-bottom: 6px;
}
.acc-dd-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.acc-dd-summary::-webkit-details-marker { display: none; }
.acc-dd-summary::after {
  content: '▸';
  margin-left: 4px;
  color: var(--muted);
  font-size: 12px;
  transition: transform .15s ease;
}
.acc-dd[open] > .acc-dd-summary::after { transform: rotate(90deg); }
.acc-dd[open] > .acc-dd-summary { border-bottom: 1px solid var(--border); }
.acc-dd-sym { font: 700 14px/1 var(--font-mono); color: var(--text-strong); }
.acc-dd-count {
  font: 700 10px/1 var(--font-mono);
  padding: 2px 6px;
  border-radius: var(--r-pill);
  color: var(--muted-strong);
  background: color-mix(in srgb, var(--muted) 16%, var(--surface));
}
.acc-dd-side { font: 700 9.5px/1 var(--font-mono); letter-spacing: .05em; color: var(--muted-strong); }
.acc-dd-avg {
  margin-left: auto;
  font: 700 13px/1 var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.acc-dd-body { padding: 8px; }
.acc-dd-body .acc-row { margin-bottom: 6px; }
.acc-dd-body .acc-row:last-child { margin-bottom: 0; }
.accuracy-empty { color: var(--muted); font: 400 13px/1.5 var(--font-sans); padding: 12px 0; }
@media (max-width: 560px) {
  .acc-tier-row { grid-template-columns: 92px 1fr 40px 40px; gap: 6px; }
  .acc-since, .acc-grade { margin-left: 0; }
}

/* ===== Grade-change log (whole-universe upgrades / downgrades) ======== */
.accuracy-grade-log { margin: 0 0 16px; }
.accuracy-grade-log:empty { display: none; }
.acc-gc-wrap {
  border: 1px solid var(--border);
  border-radius: var(--r-1);
  background: var(--surface);
}
.acc-gc-wrap > summary {
  cursor: pointer;
  list-style: none;
  padding: 9px 10px;
  margin: 0;
}
.acc-gc-wrap > summary::-webkit-details-marker { display: none; }
.acc-gc-wrap[open] > summary { border-bottom: 1px solid var(--border); }
.acc-gc-list { display: flex; flex-direction: column; }
.acc-gc-row {
  display: grid;
  grid-template-columns: 52px auto auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px 10px;
  padding: 6px 10px;
  border-top: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
  font: 400 12.5px/1.3 var(--font-sans);
}
.acc-gc-row:first-child { border-top: none; }
.acc-gc-row .acc-sym { font-size: 13.5px; }
.acc-gc-tiers { display: inline-flex; align-items: center; gap: 5px; }
.acc-gc-arrow { font-size: 11px; }
.acc-gc-score { font: 700 12px/1 var(--font-mono); font-variant-numeric: tabular-nums; }
.acc-gc-why { color: var(--muted); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acc-gc-date { color: var(--muted); font: 400 11px/1 var(--font-mono); justify-self: end; }
.acc-gc-more { padding: 6px 10px; color: var(--muted); font: 400 11.5px/1 var(--font-sans); border-top: 1px solid var(--border); }

/* ===== Picks in & out log (why a name crossed the conviction bar) ===== */
.accuracy-picks-changes { margin: 0 0 16px; }
.accuracy-picks-changes:empty { display: none; }
.acc-pc-wrap {
  border: 1px solid var(--border);
  border-radius: var(--r-1);
  background: var(--surface);
}
.acc-pc-wrap > summary {
  cursor: pointer;
  list-style: none;
  padding: 9px 10px;
  margin: 0;
}
.acc-pc-wrap > summary::-webkit-details-marker { display: none; }
.acc-pc-wrap[open] > summary { border-bottom: 1px solid var(--border); }
.acc-pc-list { display: flex; flex-direction: column; }
.acc-pc-row {
  display: grid;
  grid-template-columns: 58px auto auto auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px 10px;
  padding: 6px 10px;
  border-top: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
  font: 400 12.5px/1.3 var(--font-sans);
}
.acc-pc-row:first-child { border-top: none; }
.acc-pc-row .acc-sym { font-size: 13.5px; }
.acc-pc-evt { font: 700 10.5px/1 var(--font-mono); letter-spacing: .03em; white-space: nowrap; }
.acc-pc-score { font: 700 12px/1 var(--font-mono); font-variant-numeric: tabular-nums; }
.acc-pc-reason { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.acc-pc-ai { color: var(--text); font-size: 12px; overflow: hidden; text-overflow: ellipsis; }
.acc-pc-why { color: var(--muted); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acc-pc-date { color: var(--muted); font: 400 11px/1 var(--font-mono); justify-self: end; }

/* ===== Top-10 roster (picks in & out) ================================== */
.accuracy-roster { margin: 0 0 16px; }
.accuracy-roster:empty { display: none; }
.roster-wrap {
  border: 1px solid var(--border);
  border-radius: var(--r-1);
  background: var(--surface);
}
.roster-wrap > summary {
  cursor: pointer;
  list-style: none;
  padding: 9px 10px;
  margin: 0;
}
.roster-wrap > summary::-webkit-details-marker { display: none; }
.roster-wrap[open] > summary { border-bottom: 1px solid var(--border); }
.roster-intro { color: var(--muted); font: 400 12px/1.5 var(--font-sans); margin: 8px 10px 4px; }
.roster-stale {
  margin: 6px 10px; padding: 6px 9px;
  border-radius: var(--r-1);
  background: color-mix(in srgb, var(--warn, #e0a800) 12%, var(--surface));
  color: var(--muted-strong); font: 500 11.5px/1.4 var(--font-sans);
}
.roster-section-lbl {
  font: 600 10.5px/1 var(--font-sans); text-transform: uppercase; letter-spacing: .05em;
  color: var(--muted-strong); margin: 10px 10px 6px;
}
/* Swap callouts: X took the slot of Y */
.roster-swaps { margin-bottom: 4px; }
.roster-swap-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  padding: 4px 10px; font: 400 12.5px/1.3 var(--font-sans);
}
.roster-swap-in, .roster-swap-out { font: 700 13px/1 var(--font-mono); }
.roster-swap-arrow { color: var(--muted); font-size: 11.5px; }
.roster-swap-note { color: var(--muted); font-size: 11px; }
/* Roster rows */
.roster-list { display: flex; flex-direction: column; }
.roster-row { border-top: 1px solid color-mix(in srgb, var(--border) 60%, transparent); }
.roster-row:first-child { border-top: none; }
.roster-row-head {
  display: grid;
  grid-template-columns: 30px auto auto auto auto minmax(0, 1fr) auto 16px;
  align-items: center;
  gap: 6px 8px;
  padding: 7px 10px;
  cursor: pointer;
  list-style: none;
  font: 400 12.5px/1.3 var(--font-sans);
}
.roster-row-head::-webkit-details-marker { display: none; }
.roster-row-head .acc-sym { font: 700 13.5px/1 var(--font-sans); }
.roster-rank { color: var(--muted); font: 600 11px/1 var(--font-mono); }
.roster-status-cell { display: inline-flex; align-items: center; min-width: 0; }
.roster-status { font: 700 10.5px/1 var(--font-mono); letter-spacing: .03em; white-space: nowrap; }
.roster-flip { color: var(--muted-strong); font: 600 10px/1 var(--font-sans); margin-left: 2px; white-space: nowrap; }
.roster-score { font: 700 12px/1 var(--font-mono); font-variant-numeric: tabular-nums; }
.roster-score small { font-size: 11px; }
/* Forecast + optional earnings badge share ONE grid cell so the badge can't spill
   into the caret column. Hugs the right edge, next to the expand caret. */
.roster-fc-cell { display: inline-flex; align-items: center; justify-self: end; min-width: 0; }
.roster-fc { font: 600 11px/1 var(--font-sans); white-space: nowrap; }
.roster-earn { color: var(--muted-strong); font: 600 10px/1 var(--font-sans); margin-left: 4px; white-space: nowrap; }
.roster-expand { color: var(--muted); font-size: 11px; justify-self: end; transition: transform .15s; }
.roster-row[open] > .roster-row-head .roster-expand { transform: rotate(180deg); }
/* Expanded body */
.roster-row-body { padding: 2px 10px 12px; }
.roster-deltas { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.roster-deltas-none, .roster-deltas-flat { color: var(--muted); font: 400 11.5px/1.3 var(--font-sans); }
.roster-dchip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 7px; border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--muted) 12%, var(--surface));
  font: 700 11px/1 var(--font-mono); font-variant-numeric: tabular-nums;
}
.roster-dchip.sig-pos { background: color-mix(in srgb, var(--pos) 13%, var(--surface)); }
.roster-dchip.sig-neg { background: color-mix(in srgb, var(--neg) 13%, var(--surface)); }
.roster-dchip-k { color: var(--muted-strong); }
/* Forecast block */
.roster-fc-block {
  margin-top: 10px; padding: 9px 10px;
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  border-radius: var(--r-1);
  background: color-mix(in srgb, var(--muted) 6%, var(--surface));
}
.roster-fc-head { font: 600 12px/1.3 var(--font-sans); color: var(--text); }
.roster-fc-conf { color: var(--muted); font: 500 10.5px/1 var(--font-sans); text-transform: uppercase; letter-spacing: .04em; margin-left: 4px; }
.roster-fc-ai { color: var(--text); font: 400 12.5px/1.45 var(--font-sans); margin: 6px 0 0; }
.roster-fc-factors { margin: 6px 0 0; padding-left: 16px; color: var(--muted-strong); font: 400 12px/1.5 var(--font-sans); }
.roster-fc-factors li { margin: 1px 0; }
/* Full rubric disclosure */
.roster-rubric { margin-top: 10px; }
.roster-rubric > summary {
  cursor: pointer; list-style: none;
  font: 600 11px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted-strong); padding: 2px 0;
}
.roster-rubric > summary::-webkit-details-marker { display: none; }
.roster-rubric-pending { padding: 8px 0; font: 400 12px/1.4 var(--font-sans); }
/* Exited (dropped-out) names */
.roster-exited { margin-top: 4px; }
.roster-row-exited .roster-row-head {
  grid-template-columns: auto auto auto auto auto minmax(0, 1fr) 16px;
}
.roster-out-tag { font: 600 10px/1 var(--font-sans); color: var(--muted-strong); white-space: nowrap; }
.roster-out-why { color: var(--muted); font: 400 11px/1.3 var(--font-sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 560px) {
  .roster-row-head {
    grid-template-columns: 26px auto auto auto 1fr 14px;
  }
  .roster-score { grid-column: 2 / -1; }
  .roster-fc-cell { grid-column: 1 / -1; justify-self: start; }
  .roster-row-exited .roster-row-head { grid-template-columns: auto auto auto 1fr 14px; }
  .roster-out-why { grid-column: 1 / -1; white-space: normal; }
}

/* ===== Per-pick checkpoints (Day 0 / 2wk / 1mo price-vs-score) ======== */
.acc-checkpoints { margin-top: 6px; }
.acc-cp-summary {
  cursor: pointer;
  list-style: none;
  font: 600 11px/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted-strong);
  padding: 2px 0;
}
.acc-cp-summary::-webkit-details-marker { display: none; }
.acc-cp-summary::after {
  content: '▸';
  margin-left: 5px;
  color: var(--muted);
  display: inline-block;
  transition: transform .15s ease;
}
.acc-checkpoints[open] > .acc-cp-summary::after { transform: rotate(90deg); }
.acc-cp-table { margin-top: 5px; }
.acc-cp-row {
  display: grid;
  grid-template-columns: 64px 1fr 72px 66px 74px;
  gap: 4px 8px;
  padding: 3px 0;
  font: 400 12px/1.3 var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.acc-cp-head {
  color: var(--muted);
  font: 600 10px/1 var(--font-sans);
  text-transform: uppercase;
  letter-spacing: .04em;
  border-bottom: 1px solid var(--border);
  padding-bottom: 4px;
}
.acc-cp-mark { color: var(--muted-strong); font-weight: 700; }
.acc-cp-verdict { margin-top: 6px; font: 600 12px/1.3 var(--font-sans); color: var(--muted-strong); }
@media (max-width: 560px) {
  .acc-gc-row { grid-template-columns: 46px auto 1fr; }
  .acc-gc-score { grid-column: 2 / -1; }
  .acc-gc-why, .acc-gc-date { grid-column: 1 / -1; justify-self: start; white-space: normal; }
  .acc-pc-row { grid-template-columns: 52px auto auto 1fr; }
  .acc-pc-score { grid-column: 2 / -1; }
  .acc-pc-reason { grid-column: 1 / -1; }
  .acc-pc-why { white-space: normal; }
  .acc-pc-date { grid-column: 1 / -1; justify-self: start; }
  .acc-cp-row { grid-template-columns: 58px 1fr 60px 64px; }
  .acc-cp-row > :nth-child(2) { display: none; }
}

/* "How to read a pick" collapsible — sits between the section hint and
   the cards. Closed by default so the section stays tight for return
   visitors; opening it shows the layout legend for first-time readers. */
/* "Check a position you hold" tool (Top Picks) */
.picks-position {
  margin: var(--s-2) 0 var(--s-3);
  border: 1px solid var(--border);
  border-radius: var(--r-2);
  background: var(--surface);
  font-size: 13px;
  color: var(--text);
}
.picks-position > summary {
  cursor: pointer; padding: 8px 12px;
  font: 600 13px/1.2 var(--font-sans); color: var(--muted-strong);
  list-style: none; user-select: none; border-radius: var(--r-2);
  transition: color .12s var(--ease-out), background .12s var(--ease-out);
}
.picks-position > summary::-webkit-details-marker { display: none; }
.picks-position > summary:hover { color: var(--text-strong); background: color-mix(in srgb, var(--accent) 5%, var(--surface)); }
.picks-position[open] > summary { color: var(--text-strong); border-bottom: 1px solid var(--border); border-radius: var(--r-2) var(--r-2) 0 0; }
.picks-position-body { padding: 10px 14px 14px; display: flex; flex-direction: column; gap: 10px; }
.picks-position-body .hint { margin: 0; line-height: 1.55; color: var(--text); }
.pos-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 10px; }
.pos-field { display: flex; flex-direction: column; gap: 3px; flex: 1 1 130px; min-width: 0; }
.pos-field-sm { flex: 0 1 96px; }
.pos-field-xs { flex: 0 1 76px; }
.pos-field > span { font: 600 11px/1 var(--font-sans); text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.pos-field input, .pos-field select {
  width: 100%; box-sizing: border-box; padding: 7px 8px;
  font: 500 13px/1.2 var(--font-sans); color: var(--text-strong);
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-1);
}
.pos-field input:focus, .pos-field select:focus { outline: none; border-color: var(--accent); }
.pos-field input:disabled, .pos-field select:disabled { opacity: .5; }
.pos-check-btn {
  flex: 0 0 auto; padding: 8px 14px; font: 600 13px/1 var(--font-sans);
  color: var(--bg); background: var(--accent); border: 0; border-radius: var(--r-1); cursor: pointer;
  transition: opacity .12s var(--ease-out);
}
.pos-check-btn:disabled { opacity: .45; cursor: default; }
.pos-check-btn:not(:disabled):hover { opacity: .9; }
.pos-status { font-size: 13px; color: var(--muted); }
.pos-status.loading { color: var(--muted-strong); }
.pos-status.err { color: var(--neg); }
.pos-result {
  display: flex; flex-direction: column; gap: 9px;
  padding: 12px; border: 1px solid var(--border); border-radius: var(--r-2); background: var(--bg);
}
.pos-head { display: flex; flex-direction: column; gap: 2px; padding-left: 10px; border-left: 3px solid var(--muted); }
.pos-tone-good, .pos-tone-hold { border-left-color: var(--pos); }
.pos-tone-bad { border-left-color: var(--neg); }
.pos-tone-wait { border-left-color: var(--accent); }
.pos-tone-warn { border-left-color: var(--warn); }
.pos-tone-warn .pos-action { color: var(--warn); }
.pos-action { font: 800 15px/1.1 var(--font-sans); letter-spacing: .01em; color: var(--text-strong); }
.pos-tone-good .pos-action, .pos-tone-hold .pos-action { color: var(--pos); }
.pos-tone-bad .pos-action { color: var(--neg); }
.pos-headline { font-size: 13.5px; color: var(--text); }
.pos-contract { font: 600 13px/1.2 var(--font-mono); color: var(--muted-strong); }
.pos-stats { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.pos-stat { display: flex; flex-direction: column; gap: 1px; }
.pos-stat-num { font: 700 14px/1.1 var(--font-sans); color: var(--text-strong); font-variant-numeric: tabular-nums; }
.pos-stat-num.pos-up { color: var(--pos); }
.pos-stat-num.pos-down { color: var(--neg); }
.pos-stat-lbl { font-size: 11px; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); }
.pos-mark-detail { font: 500 12px/1.5 var(--font-mono); color: var(--muted); font-variant-numeric: tabular-nums; }
.pos-mark-note { font-family: var(--font-sans); color: var(--warn); }
.pos-reasons { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 5px; }
.pos-reasons li { line-height: 1.5; color: var(--text); }
.pos-context { display: flex; flex-direction: column; gap: 6px; padding-top: 9px; border-top: 1px solid var(--border); }
.pos-context-title { font: 700 11px/1 var(--font-sans); text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.pos-factors { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.pos-factor { display: flex; flex-direction: column; gap: 2px; padding-left: 9px; border-left: 2px solid var(--muted); }
.pos-factor-good { border-left-color: var(--pos); }
.pos-factor-bad { border-left-color: var(--neg); }
.pos-factor-warn { border-left-color: var(--warn); }
.pos-factor-info { border-left-color: var(--border); }
.pos-factor-label { font: 700 11px/1 var(--font-sans); text-transform: uppercase; letter-spacing: .03em; color: var(--muted-strong); }
.pos-factor-text { font-size: 13px; line-height: 1.5; color: var(--text); }
.pos-foot { margin: 0; font-size: 12px; line-height: 1.5; color: var(--muted); }

.picks-howto {
  margin: var(--s-2) 0 var(--s-3);
  border: 1px solid var(--border);
  border-radius: var(--r-2);
  background: var(--surface);
  font-size: 13px;
  color: var(--text);
}
.picks-howto > summary {
  cursor: pointer;
  padding: 8px 12px;
  font: 600 13px/1.2 var(--font-sans);
  color: var(--muted-strong);
  list-style: none;
  user-select: none;
  border-radius: var(--r-2);
  transition: color .12s var(--ease-out), background .12s var(--ease-out);
}
.picks-howto > summary::-webkit-details-marker { display: none; }
.picks-howto > summary:hover {
  color: var(--text-strong);
  background: color-mix(in srgb, var(--accent) 5%, var(--surface));
}
.picks-howto[open] > summary {
  color: var(--text-strong);
  border-bottom: 1px solid var(--border);
  border-radius: var(--r-2) var(--r-2) 0 0;
}
.picks-howto-body {
  padding: 10px 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.picks-howto-body p {
  margin: 0;
  line-height: 1.55;
  color: var(--text);
}
.picks-howto-body b {
  color: var(--text-strong);
  font-weight: 600;
}

/* === Streaks tab === */
.streaks-root { margin-top: var(--s-3); }

/* Summary chip strip — sits above the two-column card layout so the user
   gets a sense of the day's shape (how many tickers are on a run, longest
   active runs on each side, average cumulative move) before scrolling. */
.streaks-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: var(--s-3);
}
.streaks-summary-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 6px 10px;
  border-radius: var(--r-2);
  border: 1px solid var(--border);
  background: var(--surface);
}
.streaks-summary-num {
  font: 700 16px/1 var(--font-mono);
  color: var(--text-strong);
  font-variant-numeric: tabular-nums;
}
.streaks-summary-lbl {
  font: 600 10px/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
}
.streaks-summary-bull {
  border-color: color-mix(in srgb, var(--pos) 30%, var(--border));
  background: color-mix(in srgb, var(--pos) 5%, var(--surface));
}
.streaks-summary-bull .streaks-summary-num { color: var(--pos); }
.streaks-summary-bull .streaks-summary-lbl { color: var(--pos); opacity: .85; }
.streaks-summary-bear {
  border-color: color-mix(in srgb, var(--neg) 30%, var(--border));
  background: color-mix(in srgb, var(--neg) 5%, var(--surface));
}
.streaks-summary-bear .streaks-summary-num { color: var(--neg); }
.streaks-summary-bear .streaks-summary-lbl { color: var(--neg); opacity: .85; }
.streaks-summary-best .streaks-summary-num { font-size: 18px; }

.streaks-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-4);
}
@media (max-width: 720px) {
  .streaks-cols { grid-template-columns: 1fr; }
}
.streaks-col-title {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin: 0 0 var(--s-2);
}
.streaks-col-bull { color: var(--pos); }
.streaks-col-bear { color: var(--neg); }
.streaks-row {
  border: 1px solid var(--border);
  border-left-width: 3px;
  border-radius: var(--r-3, 10px);
  padding: var(--s-3);
  margin-bottom: var(--s-2);
  background: var(--surface);
  transition: border-color .15s var(--ease-out), background .15s var(--ease-out), transform .15s var(--ease-out);
}
.streaks-row-is-green { border-left-color: color-mix(in srgb, var(--pos) 55%, var(--border)); }
.streaks-row-is-red   { border-left-color: color-mix(in srgb, var(--neg) 55%, var(--border)); }
.streaks-row:hover {
  border-color: var(--border-strong);
  background: color-mix(in srgb, var(--accent) 2.5%, var(--surface));
  transform: translateX(2px);
}
.streaks-row-is-green:hover { border-left-color: var(--pos); }
.streaks-row-is-red:hover   { border-left-color: var(--neg); }

.streaks-head {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-bottom: 8px;
}
.streaks-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: 0 0 8px;
  background: var(--muted);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--muted) 18%, transparent);
}
.streaks-dot.is-green {
  background: var(--pos);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pos) 22%, transparent);
}
.streaks-dot.is-red {
  background: var(--neg);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--neg) 22%, transparent);
}
.streaks-dot.is-flat { background: var(--muted); }

.streaks-sym {
  font-weight: 700;
  font-size: 16px;
  color: var(--text-strong);
  letter-spacing: .01em;
}
.streaks-sector {
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
/* Stat blocks — the cumulative move and streak-day count are the headline
   numbers for each card; promote them with a labeled mini-stat layout
   pinned to the right of the head row. */
.streaks-stat-block {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  line-height: 1;
}
.streaks-stat-block:nth-of-type(1) { margin-left: auto; }
.streaks-stat-num {
  font: 700 16px/1 var(--font-mono);
  color: var(--text-strong);
  font-variant-numeric: tabular-nums;
}
.streaks-stat-unit {
  font: 500 12px/1 var(--font-mono);
  color: var(--muted);
  margin-left: 1px;
}
.streaks-stat-lbl {
  font: 600 9px/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
}
.streaks-pos { color: var(--pos); }
.streaks-neg { color: var(--neg); }

/* Sparkline — vertical bars, one per day of the streak. Each bar's height
   is proportional to that day's absolute move (scaled to the largest day
   in the run), and color reflects direction. Replaces the dense comma
   list with a single glance read of length + consistency + acceleration. */
.streaks-spark {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 32px;
  padding: 2px 0;
  margin-bottom: 8px;
  position: relative;
}
.streaks-spark-bar {
  flex: 1 1 0;
  min-width: 6px;
  max-width: 22px;
  height: var(--h, 25%);
  border-radius: 2px;
  background: var(--muted);
  opacity: .85;
  position: relative;
  transition: opacity .15s var(--ease-out), transform .15s var(--ease-out);
}
.streaks-spark-bar:hover, .streaks-spark-bar:focus-visible { opacity: 1; transform: scaleY(1.05); outline: none; }
.streaks-spark-bar::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(2px);
  background: var(--text-strong);
  color: var(--surface);
  border-radius: var(--r-2);
  padding: 6px 9px;
  font: 500 12px/1.3 var(--font-mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  letter-spacing: .01em;
  box-shadow: var(--shadow-md);
  pointer-events: none;
  opacity: 0;
  transition: opacity .12s var(--ease-out), transform .12s var(--ease-out);
  z-index: 30;
}
.streaks-spark-bar::before {
  content: "";
  position: absolute;
  bottom: calc(100% + 3px);
  left: 50%;
  transform: translateX(-50%) translateY(2px);
  border: 5px solid transparent;
  border-top-color: var(--text-strong);
  pointer-events: none;
  opacity: 0;
  transition: opacity .12s var(--ease-out), transform .12s var(--ease-out);
  z-index: 30;
}
.streaks-spark-bar:hover::after,
.streaks-spark-bar:focus-visible::after,
.streaks-spark-bar:hover::before,
.streaks-spark-bar:focus-visible::before {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.streaks-spark-bar.is-pos {
  background: color-mix(in srgb, var(--pos) 80%, transparent);
}
.streaks-spark-bar.is-neg {
  background: color-mix(in srgb, var(--neg) 80%, transparent);
}
.streaks-spark-bar.is-flat {
  background: color-mix(in srgb, var(--muted) 50%, transparent);
  height: 6px;
  align-self: center;
}

/* Tolerance meter — only renders when the streak has eaten into its
   counter-day bank. Shows the bank-used pct as a tiny progress bar so
   the reader can eyeball how close the run is to tripping the tripwire. */
.streaks-tol-meter {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  font: 500 12px/1 var(--font-mono);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.streaks-tol-label {
  font: 600 10px/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .08em;
}
.streaks-tol-bar {
  flex: 1;
  height: 4px;
  background: color-mix(in srgb, var(--text) 8%, var(--surface));
  border-radius: var(--r-pill);
  overflow: hidden;
}
.streaks-tol-fill {
  display: block;
  height: 100%;
  width: var(--w, 0%);
  background: color-mix(in srgb, var(--warn) 70%, transparent);
  border-radius: var(--r-pill);
  transition: width .3s var(--ease-out);
}
.streaks-tol-val { color: var(--text); }
.streaks-tol-counter-pill {
  padding: 1px 6px;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--neg) 12%, transparent);
  color: var(--neg);
  font: 600 11px/1.4 var(--font-mono);
}

/* Footer — last price on one side, grade-jump button on the other. */
.streaks-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
}
.streaks-last {
  font: 500 12px/1 var(--font-mono);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.streaks-last b {
  color: var(--text);
  font-weight: 600;
}
.streaks-btn {
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 5px 12px;
  border-radius: var(--r-2);
  border: 1px solid var(--border-strong, var(--border));
  background: transparent;
  color: var(--text);
  cursor: pointer;
  transition: border-color .12s var(--ease-out), background .12s var(--ease-out), color .12s var(--ease-out);
}
.streaks-row-is-green .streaks-btn:hover {
  background: color-mix(in srgb, var(--pos) 8%, var(--surface-2));
  border-color: color-mix(in srgb, var(--pos) 45%, var(--border-strong));
  color: var(--pos);
}
.streaks-row-is-red .streaks-btn:hover {
  background: color-mix(in srgb, var(--neg) 8%, var(--surface-2));
  border-color: color-mix(in srgb, var(--neg) 45%, var(--border-strong));
  color: var(--neg);
}
.streaks-btn:hover {
  background: color-mix(in srgb, var(--accent) 6%, var(--surface-2));
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border-strong));
  color: var(--accent-strong);
}
.streaks-btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
.streaks-empty {
  color: var(--muted);
  font-size: 13px;
  padding: var(--s-3);
  border: 1px dashed var(--border);
  border-radius: var(--r-3, 10px);
  margin: 0;
}
.streaks-footer {
  margin-top: var(--s-3);
  color: var(--muted);
  font-size: 12px;
  font-family: var(--font-mono, ui-monospace, monospace);
}

/* Inline count beside each column title. */
.streaks-col-count {
  font: 700 12px/1 var(--font-mono);
  color: var(--text);
  background: color-mix(in srgb, var(--text) 8%, var(--surface));
  border-radius: var(--r-pill);
  padding: 2px 8px;
  margin-left: 6px;
  vertical-align: middle;
}

/* Length-mix distribution — stacked bar + legend under the summary chips. */
.streaks-dist {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 2px 0 var(--s-3);
}
.streaks-dist-label {
  font: 600 10px/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
}
.streaks-dist-bar {
  display: flex;
  flex: 1 1 160px;
  min-width: 140px;
  height: 8px;
  border-radius: var(--r-pill);
  overflow: hidden;
  background: color-mix(in srgb, var(--text) 6%, var(--surface));
}
.streaks-dist-seg { width: var(--w, 0%); height: 100%; transition: width .3s var(--ease-out); }
.streaks-dist-2 { background: color-mix(in srgb, var(--text) 20%, transparent); }
.streaks-dist-3 { background: color-mix(in srgb, var(--accent) 45%, transparent); }
.streaks-dist-4 { background: color-mix(in srgb, var(--accent) 78%, transparent); }
.streaks-dist-5 { background: var(--warn); }
.streaks-dist-legend { display: inline-flex; gap: 10px; flex-wrap: wrap; }
.streaks-dist-key {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font: 500 11px/1 var(--font-mono);
  color: var(--muted);
}
.streaks-dist-key b { color: var(--text); font-weight: 700; }
.streaks-dist-dot { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }

/* "Just snapped" strip — recently-broken runs (mean-reversion watchlist). */
.streaks-snapped {
  margin: 0 0 var(--s-3);
  padding: var(--s-3);
  border: 1px solid var(--border);
  border-radius: var(--r-3, 10px);
  background: color-mix(in srgb, var(--warn) 4%, var(--surface));
}
.streaks-snapped-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.streaks-snapped-title {
  font: 700 13px/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-strong);
}
.streaks-snapped-sub { font-size: 12px; color: var(--muted); }
.streaks-snapped-count {
  margin-left: auto;
  font: 700 12px/1 var(--font-mono);
  color: var(--text);
  background: color-mix(in srgb, var(--text) 8%, var(--surface));
  border-radius: var(--r-pill);
  padding: 2px 8px;
}
.streaks-snapped-strip {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: thin;
}
.streaks-snap-chip {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  gap: 1px 6px;
  text-align: left;
  padding: 7px 11px;
  border-radius: var(--r-2);
  border: 1px solid var(--border);
  border-left-width: 3px;
  background: var(--surface);
  cursor: pointer;
  font-family: inherit;
  transition: border-color .12s var(--ease-out), background .12s var(--ease-out), transform .12s var(--ease-out);
}
.streaks-snap-chip:hover { transform: translateY(-1px); border-color: var(--border-strong); }
.streaks-snap-chip:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.streaks-snap-chip.is-green { border-left-color: color-mix(in srgb, var(--pos) 60%, var(--border)); }
.streaks-snap-chip.is-red { border-left-color: color-mix(in srgb, var(--neg) 60%, var(--border)); }
.streaks-snap-arrow { grid-row: 1 / span 2; font-size: 13px; }
.streaks-snap-chip.is-green .streaks-snap-arrow { color: var(--pos); }
.streaks-snap-chip.is-red .streaks-snap-arrow { color: var(--neg); }
.streaks-snap-sym { font: 700 13px/1.1 var(--font-mono); color: var(--text-strong); }
.streaks-snap-run { font: 500 11px/1.2 var(--font-mono); color: var(--muted); grid-column: 2; }
.streaks-snap-meta { grid-column: 2; font: 500 10px/1.2 var(--font-mono); color: var(--muted); opacity: .85; }

/* Rarity badge — "longest in 3mo" / "3mo high Nd" chip in the card head. */
.streaks-badge {
  font: 700 10px/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: 3px 7px;
  border-radius: var(--r-pill);
  white-space: nowrap;
}
.streaks-badge-record {
  color: var(--warn);
  background: color-mix(in srgb, var(--warn) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--warn) 35%, transparent);
}
.streaks-badge-ctx {
  color: var(--muted);
  background: color-mix(in srgb, var(--text) 6%, transparent);
  border: 1px solid var(--border);
}

/* Meta row — run start date + volume-trend chip, between spark and footer. */
.streaks-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 8px;
  min-height: 1px;
}
.streaks-meta:empty { display: none; }
.streaks-since {
  font: 500 11px/1 var(--font-mono);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.streaks-vol {
  font: 600 11px/1 var(--font-mono);
  padding: 2px 7px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  color: var(--muted);
}
.streaks-vol.is-rising {
  color: var(--text-strong);
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}
.streaks-vol.is-falling { color: var(--muted); opacity: .9; }

/* At-risk run — the card and tolerance meter flag a run that's burned most
   of its tripwire headroom, so it stands out as about-to-snap. */
.streaks-row.is-at-risk,
.streaks-row.is-at-risk:hover {
  border-left-color: var(--warn);
  background: color-mix(in srgb, var(--warn) 4%, var(--surface));
}
.streaks-tol-meter.is-at-risk .streaks-tol-label { color: var(--warn); }
.streaks-tol-meter.is-at-risk .streaks-tol-fill { background: var(--warn); }

.tickers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: var(--s-3);
  margin-top: var(--s-3);
}
.ticker-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--s-2);
  min-height: 84px;
  padding: var(--s-3) var(--s-4) var(--s-3) var(--s-4);
  border: 1px solid var(--border);
  border-radius: var(--r-3);
  background: var(--surface);
  background-image: var(--grad-surface);
  color: var(--text);
  text-decoration: none;
  box-shadow: var(--elev-1);
  transition: border-color var(--dur-1) var(--ease-out),
              background var(--dur-1) var(--ease-out),
              transform var(--dur-1) var(--ease-out),
              box-shadow var(--dur-2) var(--ease-out);
  position: relative;
  overflow: hidden;
}
/* Subtle accent rail on the left edge that animates in on hover —
   borrows the same "left border accent" pattern as macro report rows. */
.ticker-card::before {
  content: "";
  position: absolute;
  inset: 6px auto 6px 0;
  width: 2px;
  border-radius: 2px;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: center;
  opacity: 0.85;
  transition: transform var(--dur-2) var(--ease-out);
}
.ticker-card:hover {
  border-color: color-mix(in srgb, var(--accent) 38%, var(--border-strong));
  background: color-mix(in srgb, var(--accent) 4%, var(--surface));
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: var(--elev-2), var(--elev-glow);
}
.ticker-card:hover::before { transform: scaleY(1); }
.ticker-card:hover .ticker-sym { color: var(--text-strong); }
.ticker-card:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-color: var(--accent);
}
.ticker-card-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-2);
}
.ticker-sym {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: var(--fs-lg);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text-strong);
  transition: color var(--dur-1) var(--ease-out);
}
.ticker-sector {
  font-size: var(--fs-xs);
  color: var(--muted);
  line-height: var(--lh-snug);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  font-weight: 600;
}
.ticker-spot {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.ticker-spot:empty { display: none; }
.tickers-controls {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  margin: var(--s-2) 0 var(--s-3);
}
.tickers-search-wrap { display: flex; }
.tickers-search {
  flex: 1;
  padding: 6px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-2);
  color: var(--text);
  font-size: var(--fs-sm);
}
.tickers-search:focus { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); }
.tickers-empty {
  display: flex; flex-direction: column; align-items: center; gap: var(--s-3);
  margin-top: var(--s-3);
  padding: var(--s-6) var(--s-4);
  border: 1px dashed var(--border);
  border-radius: var(--r-3);
  color: var(--muted);
  font-size: var(--fs-sm);
  text-align: center;
}
.tickers-empty[hidden] { display: none; }
.tickers-empty-reset {
  appearance: none;
  padding: 5px 12px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  color: var(--text);
  font: inherit; font-size: var(--fs-xs); font-weight: 600;
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.tickers-empty-reset:hover { border-color: var(--accent); color: var(--text-strong); }
.tickers-chips {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.tickers-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.tickers-chip:hover { color: var(--text); border-color: var(--border-strong); }
/* Phone: 3px-vertical chips are sub-30px tap targets — give the sector
   filter row thumb-sized pills. */
@media (max-width: 640px) {
  .tickers-chip { padding: 6px 12px; }
}
.tickers-chip.is-active {
  background: var(--accent-soft);
  border-color: color-mix(in srgb, var(--accent) 50%, transparent);
  color: var(--accent-strong);
}
.tickers-chip-count {
  font-size: 11px;
  opacity: 0.7;
  font-variant-numeric: tabular-nums;
}
.ticker-card[hidden] { display: none; }

/* ============================================================================
 * Mobile responsive layer
 *
 * Bottom-of-stylesheet so it cleanly overrides earlier desktop-first rules.
 * Goal: smooth, dense-but-readable single-column experience on <=640px-wide
 * screens (covers every common phone in portrait). No layout breaks: every
 * feature that works on desktop should remain reachable on mobile.
 *
 * Design notes:
 * - Touch targets land at >=40px tall (Apple HIG = 44px, Material = 48dp;
 *   40px is the trading-desk-dense compromise that keeps the page from
 *   feeling sparse on a phone while still hitting reliably).
 * - Hover styles are scoped to (hover: hover) so they don't strand a
 *   "stuck" hover state on touch devices after a tap.
 * - The horizontal-scrolling page-tabs strip gets scroll-snap so flicks
 *   land cleanly on a tab boundary instead of mid-tab.
 * ========================================================================== */

/* On no-hover devices, replace hover-only visual cues with focus-visible
   so keyboard nav still works but stale touch-hover doesn't stick. */
@media (hover: none) {
  .flow-chip:hover,
  .cal-chip:hover,
  .narr-card:hover,
  .pf-risk-block:hover {
    transform: none;
    background: var(--surface-2);
  }
}

/* === Tablet & narrow desktop (<=900px) ============================== */
@media (max-width: 900px) {
  main { padding: var(--s-3) var(--s-3) var(--s-6); }
  .page-tabs { padding: 0 var(--s-3); }
}

/* === Phone (<=640px) ================================================ */
@media (max-width: 640px) {
  body { font-size: 13px; }
  main { padding: var(--s-2) var(--s-2) var(--s-6); }
  .page-tabs {
    padding: 0 var(--s-2);
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }
  .page-tab {
    scroll-snap-align: start;
    padding: var(--s-3);
    min-height: 40px;
    font-size: 13px;
  }
  /* Cards: tighter padding so on-screen content doesn't shrink below
     readable size. */
  .card {
    padding: var(--s-3);
    border-radius: var(--r-2);
  }
  .card-header { flex-wrap: wrap; gap: var(--s-2); }
  .page-sub { font-size: 13px; }

  /* Calendar: single-column chips, no source byline (saves horizontal
     space, the date already implies the feed cluster). */
  .cal-day {
    grid-template-columns: minmax(0, 1fr);
    padding: var(--s-2) 0;
    gap: 4px;
  }
  .cal-date { font-size: 12px; padding-top: 0; }
  .cal-chip { padding: 8px 10px; font-size: 13px; }
  .cal-chip-source { display: none; }
  .calendar-controls { gap: var(--s-2); }
  .calendar-pill { min-height: 36px; padding: 6px 12px; }
  /* Month grid: tighten cells and collapse the per-day markers to colored dots
     so 7 columns fit a phone. Tapping a day opens its full events below. */
  .cal-grid { gap: 3px; }
  .cal-cell { min-height: 52px; padding: 4px; gap: 3px; }
  .cal-cell.is-out { min-height: 0; }
  .cal-cell-events { flex-direction: row; flex-wrap: wrap; gap: 3px; }
  .cal-mini { gap: 0; }
  .cal-mini-txt { display: none; }
  .cal-mini-dot { width: 7px; height: 7px; }
  .cal-mini-more { padding-left: 2px; font-size: 9px; }
  .cal-monthbar-label { min-width: 0; flex: 1; font-size: 16px; }

  /* Flow controls: stack search + filters vertically; keep pills tappable. */
  .flow-controls {
    flex-direction: column;
    align-items: stretch;
    gap: var(--s-2);
  }
  .flow-search { width: 100%; min-width: 0; }
  .flow-pill, .flow-action-btn {
    min-height: 36px;
    padding: 6px 12px;
  }
  .flow-chip { font-size: 12px; flex-wrap: wrap; }
  .flow-chip > * { line-height: 1.4; }
  .flow-row-head {
    flex-wrap: wrap;
    padding: var(--s-2);
    gap: 6px;
    min-height: 44px;
  }
  .flow-symbol { font-size: 14px; }
  .flow-spot, .flow-count, .flow-top { font-size: 12px; }
  .flow-note { font-size: 12px; padding: 6px 8px; max-width: none; }

  /* Narratives: tab strip horizontally scrolls, panels keep single column. */
  .narr-tabs {
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
  }
  .narr-tabs::-webkit-scrollbar { display: none; }
  .narr-tab { white-space: nowrap; flex: 0 0 auto; min-height: 36px; }
  .narr-card { padding: var(--s-3); }

  /* Implied vol card: keep SVG fluid; tighten padding. */
  .opt-iv { padding: var(--s-3); }
  .opt-iv-head { gap: 6px; }
  .opt-iv-foot { font-size: 11px; }

  /* Option grader inputs: full-width, taller, 16px font so iOS Safari
     doesn't auto-zoom in on focus (anything below 16px triggers the
     zoom and never zooms back out). The combobox listbox needs
     touch-friendly rows too. */
  .opt-eval-section .field,
  .opt-eval-section .field input,
  .opt-eval-section .field select {
    width: 100%;
  }
  select, input[type="text"], input[type="email"], input[type="number"], input[type="search"], input[type="date"], input[type="tel"], textarea {
    min-height: 44px;
    font-size: 16px;
  }
  .opt-chain-row { grid-template-columns: 1fr !important; }
  .opt-result { padding: var(--s-2); font-size: 13px; }
  .opt-result-sticky { padding: var(--s-2); border-radius: 0; }
  /* Result-sticky pins to bottom on phone so the verdict stays visible
     while the user scrolls through the chain table or below-fold cards. */
  .opt-result-sticky:not([hidden]) {
    position: sticky;
    bottom: 0;
    z-index: 10;
    background: var(--surface);
    box-shadow: 0 -8px 16px -8px rgba(0,0,0,.45);
  }

  /* Streaks: stack the green/red columns on phones. */
  .streaks-cols { grid-template-columns: 1fr; gap: var(--s-3); }

  /* Site header: compact logo/title so the icon-btn cluster fits. */
  .site-header { padding: var(--s-2) var(--s-3); }
  .site-title { font-size: 14px; }
  .freshness { font-size: 12px; }

  /* Touch-target floor for any small buttons that fell through. */
  button, .pf-iconbtn { min-height: 36px; }

  /* Site-header icon buttons (theme toggle, GitHub link) — bump to the
     40px touch floor on phones so the cluster doesn't feel cramped. */
  .icon-btn { width: 40px; height: 40px; }

  /* Hero numbers — equity total + perf P/L — were sized for desktop;
     scale them down so they don't blow past the card edge on a 360px
     phone. clamp keeps them fluid between 22px and 32px. */
  .pf-equity-now, .pf-perf-pnl-value {
    font-size: clamp(22px, 7vw, 32px);
  }

  /* Narratives "recently ended" carousel: shrink cards so one full card
     + a peek of the next signals scrollability instead of one card
     filling the viewport awkwardly. */
  .narr-ended-card {
    flex: 0 0 78vw;
    max-width: 280px;
  }

  /* Grade tab: the call/put/technicals/fundamentals/news tab strip
     wrapped to two lines on phones, which made the active underline
     ambiguous. Switch to a horizontal scroller (same pattern as
     .narr-tabs) so the strip stays one row and flicks cleanly. */
  .opt-tabs,
  .acc-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .opt-tabs::-webkit-scrollbar,
  .acc-tabs::-webkit-scrollbar { display: none; }
  .opt-tab { flex: 0 0 auto; white-space: nowrap; }
  .acc-tab { flex: 0 0 auto; white-space: nowrap; }

  /* Grade tab technicals grid: minmax(170px,1fr) tried to fit two
     columns at ~360px viewport and overflowed. Force single column. */
  .opt-tech-grid { grid-template-columns: 1fr; }

  /* Ticker grid: rare long sector strings (e.g. "Communication
     Services") could push the card wider than its grid cell. Let the
     label wrap mid-word as a last resort instead of clipping. */
  .ticker-sector { overflow-wrap: anywhere; }

  /* Top-picks: the greek row (Δ / Θ / IV / vol) and the drivers chip
     row are tight at 360px. Let them wrap onto a second line instead
     of horizontal overflow. */
  .pick-contract-greeks {
    flex-wrap: wrap;
    gap: 6px 10px;
    font-size: 12px;
  }
  .pick-drivers { flex-wrap: wrap; gap: 6px; }
}

/* === Extra-narrow (<=480px) tightenings — 13F table + brand tag ==== */
@media (max-width: 480px) {
  /* 13F holdings table has a desktop-oriented min-width: 520px that
     forces a horizontal scrollbar inside .f13-table-scroll even when
     the page itself fits. Drop it on phones, tighten the cell padding,
     and let non-numeric cells wrap so company names don't push the
     numerics column out of view. */
  .f13-table { min-width: 0; font-size: 12px; }
  .f13-table th, .f13-table td { padding: 6px 7px; }
  .f13-table td:not(.f13-num) { white-space: normal; }

  /* The small "REV-X" badge next to the brand competes with the icon
     cluster for the limited header width. Hide on tiny screens; the
     wordmark alone is unambiguous. */
  .brand-tag { display: none; }
}

/* === Extra-narrow (<=400px) for older / smaller phones ============== */
@media (max-width: 400px) {
  main { padding: var(--s-2) 10px var(--s-6); }
  body { font-size: 13.5px; }
  .page-tab { padding: var(--s-2); font-size: 12.5px; }
  .card { padding: 10px; }
  .cal-chip { padding: 7px 9px; }
  .flow-row-head { gap: 4px; }
  .pf-risk-greeks { grid-template-columns: repeat(2, 1fr); gap: var(--s-2); }
  /* Tighter ticker grid so two cards still sit side-by-side on
     iPhone-SE-class screens (375px) and the smallest 360/320px
     devices don't overflow. */
  .tickers-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--s-2); }
  .ticker-card { padding: var(--s-2) var(--s-3); min-height: 64px; }
}

/* === Design refresh (big-pass) =======================================
   Coordinated polish applied across the whole site: subtle paper-edge
   highlight on cards, press-down micro-feedback on every clickable
   surface, refined focus ring with a soft outer halo, and a numeric
   utility for muting the decimal portion of large numbers so the
   reader's eye lands on the integer first. */

/* Paper-edge highlight on every card — 1px top inset that picks up
   surface light. Sits BELOW any explicit border because it's drawn
   inside the card via a pseudo-element. */
.card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    color-mix(in srgb, var(--text) 8%, transparent) 20%,
    color-mix(in srgb, var(--text) 8%, transparent) 80%,
    transparent 100%);
  border-radius: inherit;
  pointer-events: none;
}
:root[data-theme="light"] .card::before {
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(15, 23, 42, 0.05) 20%,
    rgba(15, 23, 42, 0.05) 80%,
    transparent 100%);
}

/* Press-down feedback on every common button/pill so clicks feel
   responsive. Subtle 1px translateY + slight darken — institutional,
   not bouncy. */
.icon-btn:active,
.calendar-pill:active,
.flow-pill:active,
.opt-tab:active,
.pf-btn:active,
.streaks-btn:active,
.page-tab:active,
.pick-symbol:active,
.combo-clear:active {
  transform: translateY(1px);
  filter: brightness(0.94);
  transition-duration: .04s;
}
@media (prefers-reduced-motion: reduce) {
  .icon-btn:active, .calendar-pill:active, .flow-pill:active,
  .opt-tab:active, .pf-btn:active, .streaks-btn:active,
  .page-tab:active, .pick-symbol:active, .combo-clear:active {
    transform: none;
  }
}

/* Refined focus ring — primary accent ring + soft outer halo so the
   focused element stands out without looking aggressive. Overrides the
   global :focus-visible only on interactive surfaces that opt in. */
:focus-visible {
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--accent) 45%, transparent),
    0 0 0 5px color-mix(in srgb, var(--accent) 12%, transparent);
}

/* Number-style utility — for large monetary readouts where the integer
   should dominate visually and the decimals recede. Use on a span
   containing the whole number; the descendant .dec span gets muted. */
.num-large {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "ss01" 1;
}
.num-large .dec {
  color: var(--muted);
  font-weight: 500;
}

/* Refined hint paragraph — already gets a left accent stripe from the
   earlier round. Add a slightly tighter top margin so the breathing
   room between card-title bottom-border and hint is consistent. */
.card-header + .hint { margin-top: var(--s-3); }

/* Refined section divider — used to break up a card into sub-sections
   (e.g. "Per-firm holdings" inside the 13F card). Subtle tracked
   eyebrow above a hairline rule. */
.section-divider {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin: var(--s-4) 0 var(--s-2);
}
.section-divider-label {
  font: 700 10px/1 var(--font-mono);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--muted-strong);
  flex: 0 0 auto;
}
.section-divider::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--hairline);
}

/* Cleaner long-form prose inside cards — paragraph rhythm */
.card p { margin-block: 0; }
.card p + p { margin-top: var(--s-2); }

/* Make the freshness banner read a tad more confidently — slightly
   tighter padding and slightly larger pulse glow. */
.freshness {
  padding: var(--s-2) var(--s-4);
  background: color-mix(in srgb, var(--surface-2) 50%, transparent);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-radius: var(--r-2);
  border-bottom: none;
  margin-inline: auto;
  border: 1px solid var(--hairline);
}

/* === Landscape phone (low height) =================================== */
/* Cap the sticky result bar so a rotated phone doesn't get its viewport
   eaten in half. */
@media (max-height: 500px) and (max-width: 900px) {
  .opt-result-sticky:not([hidden]) {
    max-height: 40vh;
    overflow-y: auto;
  }
}

/* === Shared UI utilities (added in the polish pass) ===================
   Skeleton placeholders, micro-bars for in-table magnitude, empty-state
   chrome, refined card hover, accessible focus polish, tabular-num
   enforcement for any numeric content. Components above can opt in. */

/* Skeleton — shimmer placeholder for loading states. Use as a span or
   div with the .skel class plus a width/height; multiple .skel-line
   elements stacked give a "loading paragraph" look. */
.skel {
  display: block;
  background: linear-gradient(90deg,
    var(--surface-2) 0%,
    color-mix(in srgb, var(--text) 6%, var(--surface-2)) 50%,
    var(--surface-2) 100%);
  background-size: 200% 100%;
  animation: skel-shimmer 1.4s var(--ease-in-out) infinite;
  border-radius: var(--r-1);
  color: transparent;
}
.skel-line { height: 12px; margin: 6px 0; }
.skel-line.lg { height: 16px; }
.skel-line.sm { height: 10px; }
.skel-block { height: 80px; border-radius: var(--r-2); margin: var(--s-2) 0; }
@keyframes skel-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .skel { animation: none; opacity: 0.6; }
}

/* In-table magnitude bar — renders behind a numeric cell to show its
   share of a total (e.g. 13F holding value / top-10 sum, FOMC hike %).
   Use as: <span class="mag-bar" style="--mag:0.42"></span> placed
   inside a position:relative cell. */
.mag-cell {
  position: relative;
}
.mag-cell > .mag-bar {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
}
.mag-cell > .mag-bar::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--mag, 0) * 100%);
  background: var(--mag-color, color-mix(in srgb, var(--accent) 14%, transparent));
  border-right: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  transition: width .35s var(--ease-out);
  border-radius: inherit;
}
.mag-cell > * { position: relative; }
.mag-hike { --mag-color: color-mix(in srgb, var(--pos) 14%, transparent); }
.mag-cut  { --mag-color: color-mix(in srgb, var(--neg) 14%, transparent); }
.mag-hold { --mag-color: color-mix(in srgb, var(--muted) 14%, transparent); }
.mag-hike-bdr::after { border-right-color: color-mix(in srgb, var(--pos) 35%, transparent); }
.mag-cut-bdr::after  { border-right-color: color-mix(in srgb, var(--neg) 35%, transparent); }
.mag-hold-bdr::after { border-right-color: color-mix(in srgb, var(--muted) 35%, transparent); }

/* Empty-state chrome — replaces bare "No data" text with a centered
   icon + line + optional helper text. Toggle visibility via [hidden]. */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: var(--s-6) var(--s-4);
  color: var(--muted);
  text-align: center;
}
.empty-state-icon {
  width: 32px; height: 32px;
  opacity: 0.45;
  color: var(--muted-strong);
}
.empty-state-title {
  font: 600 13px/1.2 var(--font-mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted-strong);
}
.empty-state-hint {
  font-size: 12px;
  color: var(--muted);
  max-width: 32ch;
  line-height: 1.5;
}

/* Subtle card hover — only on cards that opt in via .card.is-hoverable.
   Pure cards stay flat (institutional); content rows + chips can lift. */
.card.is-hoverable {
  transition: border-color .15s var(--ease-out), background .15s var(--ease-out), transform .15s var(--ease-out);
}
.card.is-hoverable:hover {
  border-color: var(--border-strong);
  background: color-mix(in srgb, var(--accent) 2%, var(--surface));
  transform: translateY(-1px);
}

/* Calendar chip hover lift — keeps the existing border + adds gentle
   shadow + accent tint on hover. */
.cal-chip {
  transition: border-color .15s var(--ease-out), background .15s var(--ease-out), transform .12s var(--ease-out);
}
.cal-chip:hover {
  border-color: var(--border-strong);
  background: color-mix(in srgb, var(--accent) 3%, var(--surface-2));
  transform: translateX(2px);
}

/* AM/PM pill: add a sunrise/sunset glyph alongside the AM/PM letters so
   the meaning is immediate even before reading the tooltip. */
.cal-session::before {
  margin-right: 3px;
  font-size: 10px;
  font-family: var(--font-sans);
}
.cal-session-am::before { content: "☀"; opacity: 0.85; }
.cal-session-pm::before { content: "☾"; opacity: 0.85; }
.cal-session-tbd::before { content: "?"; opacity: 0.5; }

/* FOMC probability table — add visual width bar behind each cell. */
.fomc-prob-table tbody td {
  position: relative;
  font-variant-numeric: tabular-nums;
}
.fomc-prob-bar {
  position: absolute;
  inset: 0 0 0 0;
  pointer-events: none;
  border-radius: var(--r-1);
  background-image: linear-gradient(
    to right,
    var(--mag-color, color-mix(in srgb, var(--accent) 14%, transparent)) 0%,
    var(--mag-color, color-mix(in srgb, var(--accent) 14%, transparent)) calc(var(--mag, 0) * 100%),
    transparent calc(var(--mag, 0) * 100%));
  border-right: 1px solid transparent;
}
.fomc-prob-table tbody td > span { position: relative; }
.fomc-prob-row { white-space: nowrap; }

/* 13F per-firm row — show top-10 concentration as a thin bar under the
   summary, and per-holding share of top-10 as a horizontal bar in the
   value cell. */
.f13-firm-bar {
  height: 3px;
  width: 100%;
  background: var(--hairline);
  border-radius: var(--r-pill);
  overflow: hidden;
}
.f13-firm-bar > i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--accent) 60%, transparent),
    var(--accent));
  border-radius: inherit;
  transition: width .4s var(--ease-out);
}
.f13-firm-meta { font-variant-numeric: tabular-nums; }
.f13-holding-bar {
  position: absolute;
  inset: 0 auto 0 0;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border-right: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
  pointer-events: none;
  border-radius: inherit;
}
.f13-holding-bar.f13-bar-buy {
  background: color-mix(in srgb, var(--pos) 14%, transparent);
  border-right-color: color-mix(in srgb, var(--pos) 35%, transparent);
}
.f13-holding-bar.f13-bar-sell {
  background: color-mix(in srgb, var(--neg) 14%, transparent);
  border-right-color: color-mix(in srgb, var(--neg) 35%, transparent);
}
.f13-table td.mag-cell > * { position: relative; z-index: 1; }
.f13-subtitle {
  font-size: var(--fs-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin: 0 0 var(--s-2);
}
.f13-tag-new, .f13-tag-exit {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 1px 4px;
  border-radius: 3px;
  margin-left: var(--s-2);
  vertical-align: middle;
}
.f13-tag-new {
  background: color-mix(in srgb, var(--pos) 18%, transparent);
  color: var(--pos);
  border: 1px solid color-mix(in srgb, var(--pos) 35%, transparent);
}
.f13-tag-exit {
  background: color-mix(in srgb, var(--neg) 18%, transparent);
  color: var(--neg);
  border: 1px solid color-mix(in srgb, var(--neg) 35%, transparent);
}
.f13-empty-side {
  font-size: var(--fs-sm);
  color: var(--muted);
  font-style: italic;
  margin: var(--s-3) 0 0;
}

/* Enforce tabular numerals across every numeric surface. Many cells
   already opt in explicitly; this is a defensive default for any new
   data cells that forget to. */
.f13-num, .cal-report-val, .fomc-prob-table td,
.streaks-stat-value, .picks-conviction,
.pf-greek-value, .pf-table .f13-num,
.opt-result-stat-value {
  font-variant-numeric: tabular-nums;
}

/* Accessible focus rings — clearer than the global :focus-visible for
   non-button interactive surfaces (page-tabs, calendar-pills, opt-tabs,
   pf-btns). */
.calendar-pill:focus-visible,
.flow-pill:focus-visible,
.opt-tab:focus-visible,
.acc-tab:focus-visible,
.pf-btn:focus-visible,
.f13-firm-summary:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--r-2);
}

/* Section reveal on tab activate — staggered fade per card so the page
   settles in a single visual beat instead of all cards popping at once. */
.page-pane:not([hidden]) > .card {
  animation: section-fade-in .35s var(--ease-out) both;
}
.page-pane:not([hidden]) > .card:nth-of-type(1) { animation-delay: 0ms; }
.page-pane:not([hidden]) > .card:nth-of-type(2) { animation-delay: 50ms; }
.page-pane:not([hidden]) > .card:nth-of-type(3) { animation-delay: 100ms; }
.page-pane:not([hidden]) > .card:nth-of-type(n+4) { animation-delay: 140ms; }
@media (prefers-reduced-motion: reduce) {
  .page-pane:not([hidden]) > .card { animation: none; }
}
@keyframes section-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Pick cards are clickable — give them a real hover affordance. The
   default cursor + transform stays subtle so the page reads as a data
   table, not a marketing grid. */
.pick-card {
  transition: border-color .15s var(--ease-out), background .15s var(--ease-out), box-shadow .15s var(--ease-out), transform .15s var(--ease-out);
}
.pick-card:hover {
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border-strong));
  /* background-color (not the shorthand) so the side-gutter wash survives hover. */
  background-color: color-mix(in srgb, var(--accent) 3%, var(--surface-2));
  box-shadow: var(--elev-2);
}
.pick-card .pick-symbol {
  cursor: pointer;
  transition: color .12s var(--ease-out);
}
.pick-card .pick-symbol:hover {
  color: var(--accent-strong);
}
.pick-card .pick-symbol:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--r-1);
}

/* Pick rank — refine the small "#1" / "#2" badge so it reads as a rank,
   not as inline body text. */
.pick-rank {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

/* Freshness strip status label — only surfaces when the data is stale.
   For a fresh build the pulsing dot is already the state indicator, so
   appending a redundant "Live" pill just adds noise. */
.freshness::after { content: none; }
.freshness.warn::after,
.freshness.bad::after {
  content: "Stale";
  margin-left: auto;
  font: 600 11px/1 var(--font-sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: var(--r-pill);
  flex-shrink: 0;
}
.freshness.warn::after { color: var(--warn); background: color-mix(in srgb, var(--warn) 12%, transparent); }
.freshness.bad::after  { color: var(--neg);  background: color-mix(in srgb, var(--neg)  14%, transparent); }
@media (max-width: 420px) {
  /* On very narrow viewports the pill can overlap the relative-time
     text. Hide the label and rely on the pulsing dot for state. */
  .freshness::after { display: none; }
}

/* Calendar AM/PM session pill — kept compact but uses a fixed min-width
   so the chips align across the timeline. */
.cal-session {
  min-width: 32px;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Brand wordmark — keep the existing layout but add a subtle accent
   underline on hover so the link reads as interactive without breaking
   the institutional feel. */
.brand:hover .brand-word {
  background-image: linear-gradient(to right, var(--accent), var(--accent));
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 100% 1px;
}
.brand-word { transition: background-size .15s var(--ease-out); }

/* Tighten the page-tab strip on very narrow viewports so the labels
   don't grow into a second row before the horizontal scroll kicks in. */
@media (max-width: 480px) {
  .page-tabs { padding: 0 var(--s-3); gap: 0; }
  .page-tab { padding: 6px 10px; font-size: 12px; }
  .page-tab-trigger { gap: 4px; }
  .page-tab-menu { min-width: 200px; padding: 4px; }
  .page-tab-menu-item { padding: 10px 12px; font-size: 13px; }
}

/* === CNN Fear & Greed Index tab ========================================= */
:root {
  --fng-extreme-fear: #d54a4a;
  --fng-fear:         #d68040;
  --fng-neutral:      #c8b94a;
  --fng-greed:        #6db367;
  --fng-extreme-greed:#3aa55a;
}
[data-theme="light"] {
  --fng-extreme-fear: #c1393c;
  --fng-fear:         #c46f2b;
  --fng-neutral:      #a8993a;
  --fng-greed:        #4f9b58;
  --fng-extreme-greed:#2c8a47;
}
/* Bonds & USD educational tab — plain table + list styling scoped to that pane
   so the markdown-derived content reads cleanly without affecting other tabs. */
.bonds-usd-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
  color: var(--text);
}
.bonds-usd-table th,
.bonds-usd-table td {
  text-align: left;
  padding: var(--s-2) var(--s-3);
  border-bottom: 1px solid var(--hairline);
  vertical-align: top;
}
.bonds-usd-table th {
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.04em;
}
.bonds-usd-table tbody tr:last-child td { border-bottom: none; }
.bonds-usd-list {
  margin: 0;
  padding-left: var(--s-5);
  color: var(--text);
  font-size: var(--fs-sm);
  line-height: 1.55;
}
.bonds-usd-list li { margin-bottom: var(--s-1, 4px); }
/* Phone: the 5-column movement-scale table is the widest thing on this tab —
   compact cells + a smaller base size keep it inside a 390px viewport. */
@media (max-width: 640px) {
  .bonds-usd-table { font-size: 12px; }
  .bonds-usd-table th,
  .bonds-usd-table td { padding: var(--s-1) var(--s-2); }
}
.bonds-live-grid {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  margin: var(--s-3) 0;
}
.bonds-live-group { display: flex; flex-direction: column; gap: var(--s-2); }
.bonds-live-group-label {
  font: 700 11px/1 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.bonds-live-group-label span {
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  opacity: 0.7;
}
.bonds-live-subgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--s-3);
}
.bonds-live-tile {
  padding: var(--s-3);
  border: 1px solid var(--border);
  border-radius: var(--r-2);
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.bonds-live-label {
  font: 700 11px/1 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.bonds-live-value {
  font: 700 22px/1.1 var(--font-mono);
  color: var(--text-strong);
  font-variant-numeric: tabular-nums;
}
.bonds-live-change {
  font: 600 13px/1 var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.bonds-live-change.up { color: var(--pos); }
.bonds-live-change.down { color: var(--neg); }
.bonds-live-change.flat { color: var(--muted); }
.bonds-live-change--sub { font-size: 12px; opacity: 0.85; }
.bonds-live-tile-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.bonds-live-band-row { display: flex; }
.bonds-live-band {
  display: inline-block;
  font: 700 11px/1 var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 6px;
  border-radius: var(--r-1, 4px);
  border: 1px solid transparent;
}
.bonds-live-band.band-normal {
  color: var(--muted);
  background: var(--surface-2, rgba(127,127,127,0.08));
  border-color: var(--hairline, rgba(127,127,127,0.2));
}
.bonds-live-band.band-notable {
  color: #8a6d00;
  background: rgba(234, 179, 8, 0.16);
  border-color: rgba(234, 179, 8, 0.4);
}
.bonds-live-band.band-big {
  color: #a04400;
  background: rgba(234, 88, 12, 0.18);
  border-color: rgba(234, 88, 12, 0.45);
}
.bonds-live-band.band-very-large {
  color: #fff;
  background: #b91c1c;
  border-color: #b91c1c;
}
:root[data-theme="dark"] .bonds-live-band.band-notable {
  color: #fcd34d;
  background: rgba(234, 179, 8, 0.18);
  border-color: rgba(234, 179, 8, 0.55);
}
:root[data-theme="dark"] .bonds-live-band.band-big {
  color: #fdba74;
  background: rgba(234, 88, 12, 0.22);
  border-color: rgba(234, 88, 12, 0.6);
}
.bonds-live-tile.is-alerting {
  border-color: rgba(185, 28, 28, 0.65);
  box-shadow: 0 0 0 1px rgba(185, 28, 28, 0.25);
}
.bonds-live-alert {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #b91c1c;
  color: #fff;
  font: 700 11px/1 var(--font-mono);
}
.bonds-scale-table th { vertical-align: middle; }
.bonds-scale-table .bonds-live-band { letter-spacing: 0.04em; }
.bonds-live-prev {
  font: 500 12px/1.2 var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  margin-top: 2px;
}
.bonds-live-empty {
  color: var(--muted);
  font-size: var(--fs-sm);
  padding: var(--s-2) 0;
}
/* Per-tile sparkline over the trailing macro-history closes. Neutral muted
   stroke — for yields/DXY a rising line isn't inherently good or bad. */
.bonds-spark { color: var(--muted); opacity: 0.85; margin-top: 2px; }
/* Treasury yield-curve chart (2Y/10Y/30Y, today vs prior close). */
.bonds-curve {
  margin: var(--s-1) 0 var(--s-3);
  padding: var(--s-3);
  border: 1px solid var(--border);
  border-radius: var(--r-2);
  background: var(--surface);
}
.bonds-curve-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-bottom: 2px;
}
.bonds-curve-title {
  font: 700 11px/1 var(--font-mono);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
}
.bonds-curve-legend {
  display: flex; align-items: center; gap: 5px;
  font: 500 11px/1 var(--font-mono); color: var(--muted);
}
.bonds-curve-key { display: inline-block; width: 12px; height: 0; border-top: 2px solid var(--muted); }
.bonds-curve-key.cur { border-top-color: var(--accent); }
.bonds-curve-key.prev { border-top-style: dashed; }
.bonds-curve-svg { width: 100%; height: auto; display: block; overflow: visible; }
.bonds-curve-cur { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.bonds-curve-prev { fill: none; stroke: var(--muted); stroke-width: 1.5; stroke-dasharray: 4 3; opacity: 0.65; }
.bonds-curve-dot { fill: var(--accent); }
.bonds-curve-val { fill: var(--text); font: 600 9px var(--font-mono); text-anchor: middle; }
.bonds-curve-axis { fill: var(--muted); font: 600 10px var(--font-mono); text-anchor: middle; }
.bonds-curve-foot { margin-top: 4px; font: 500 12px/1.4 var(--font-mono); color: var(--muted); }
.bonds-curve-foot strong { color: var(--text); }
/* Collapsible primer — folds the educational cards under the live dashboard. */
.bonds-primer { margin-top: var(--s-2); }
.bonds-primer > summary {
  cursor: pointer;
  list-style: none;
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--border);
  border-radius: var(--r-3);
  background: var(--surface);
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s-3); flex-wrap: wrap;
}
.bonds-primer > summary::-webkit-details-marker { display: none; }
.bonds-primer > summary:hover { border-color: var(--accent); }
.bonds-primer[open] > summary {
  border-bottom-left-radius: 0; border-bottom-right-radius: 0;
}
.bonds-primer-summary-title { font-weight: 700; color: var(--text-strong); font-size: var(--fs-md); }
.bonds-primer-summary-title::before { content: "📖 "; }
.bonds-primer-summary-hint { color: var(--muted); font-size: 13px; }
.bonds-primer-body { display: flex; flex-direction: column; margin-top: var(--s-4); }
/* "What's moving — and why it matters" context panel. */
.bonds-context { display: flex; flex-direction: column; gap: var(--s-2); margin: var(--s-2) 0; }
.bonds-ctx-quiet { color: var(--muted); font-size: 13px; margin: var(--s-2) 0; }
.bonds-ctx-headline {
  font-size: 14px; line-height: 1.5; color: var(--text);
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-2);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--muted);
}
.bonds-ctx-headline.is-notable { border-left-color: var(--warn); }
.bonds-ctx-drivers { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.bonds-ctx-driver { display: flex; align-items: baseline; gap: 8px; font-size: 13px; line-height: 1.45; color: var(--text); }
.bonds-ctx-driver-text { flex: 1; min-width: 0; }
.bonds-ctx-dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; transform: translateY(1px); background: var(--muted); }
.bonds-ctx-dot-print { background: var(--warn); }
.bonds-ctx-dot-fed { background: var(--accent); }
.bonds-ctx-dot-fomc { background: var(--accent); }
.bonds-ctx-dot-feds { background: var(--muted); }
.bonds-ctx-dot-risk { background: var(--neg); }
.bonds-ctx-tag {
  flex: 0 0 auto;
  font: 700 11px/1 var(--font-mono);
  letter-spacing: .03em;
  padding: 2px 6px;
  border-radius: var(--r-pill);
}
.bonds-ctx-tag.hawk { color: var(--neg); background: color-mix(in srgb, var(--neg) 12%, transparent); }
.bonds-ctx-tag.dove { color: var(--pos); background: color-mix(in srgb, var(--pos) 12%, transparent); }
.bonds-ctx-fed {
  font: 500 13px/1.5 var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--text);
  padding: 6px var(--s-3);
  border-radius: var(--r-2);
  background: var(--surface);
  border: 1px solid var(--hairline);
}
.bonds-ctx-fed-label {
  font: 600 11px/1 var(--font-mono);
  letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
}
.bonds-ctx-moveodds { color: var(--muted); }
.bonds-ctx-watch { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.bonds-ctx-watch-label {
  font: 600 11px/1 var(--font-mono);
  letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
}
.bonds-ctx-watch-item {
  font: 500 12px/1 var(--font-mono);
  color: var(--text);
  padding: 3px 8px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  border: 1px solid var(--border);
}
.fng-root { display: flex; flex-direction: column; gap: var(--s-5); }
.fng-headline {
  display: grid;
  grid-template-columns: minmax(220px, 260px) 1fr;
  gap: var(--s-5);
  align-items: center;
  padding: var(--s-4);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-4);
}
.fng-gauge { width: 100%; height: auto; display: block; }
.fng-arc {
  fill: none;
  stroke-width: 14;
  stroke-linecap: round;
  opacity: 0.34;
}
.fng-arc-extreme-fear  { stroke: var(--fng-extreme-fear); }
.fng-arc-fear          { stroke: var(--fng-fear); }
.fng-arc-neutral       { stroke: var(--fng-neutral); }
.fng-arc-greed         { stroke: var(--fng-greed); }
.fng-arc-extreme-greed { stroke: var(--fng-extreme-greed); }
.fng-gauge.fng-band-extreme-fear  .fng-arc-extreme-fear,
.fng-gauge.fng-band-fear          .fng-arc-fear,
.fng-gauge.fng-band-neutral       .fng-arc-neutral,
.fng-gauge.fng-band-greed         .fng-arc-greed,
.fng-gauge.fng-band-extreme-greed .fng-arc-extreme-greed { opacity: 1; }
.fng-needle {
  fill: var(--text);
  stroke: var(--surface-2);
  stroke-width: 0.75;
  stroke-linejoin: round;
}
.fng-needle-hub { fill: var(--text); }
.fng-needle-hub-dot { fill: var(--surface-2); }
.fng-tick {
  stroke: var(--surface-2);
  stroke-width: 2;
  opacity: 0.85;
}
.fng-gauge-end {
  fill: var(--muted);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: var(--ls-num);
}
.fng-gauge-num {
  fill: var(--text);
  font-family: var(--font-mono);
  font-size: 30px;
  font-weight: 800;
  letter-spacing: var(--ls-num);
}
.fng-gauge.fng-band-extreme-fear  .fng-gauge-num { fill: var(--fng-extreme-fear); }
.fng-gauge.fng-band-fear          .fng-gauge-num { fill: var(--fng-fear); }
.fng-gauge.fng-band-neutral       .fng-gauge-num { fill: var(--fng-neutral); }
.fng-gauge.fng-band-greed         .fng-gauge-num { fill: var(--fng-greed); }
.fng-gauge.fng-band-extreme-greed .fng-gauge-num { fill: var(--fng-extreme-greed); }
.fng-headline-meta { display: flex; flex-direction: column; gap: var(--s-3); min-width: 0; }
.fng-rating {
  font-size: var(--fs-2xl);
  font-weight: 700;
  letter-spacing: var(--ls-num);
  text-transform: capitalize;
  display: flex; align-items: center; gap: var(--s-2);
}
.fng-band-extreme-fear  .fng-rating { color: var(--fng-extreme-fear); }
.fng-band-fear          .fng-rating { color: var(--fng-fear); }
.fng-band-neutral       .fng-rating { color: var(--fng-neutral); }
.fng-band-greed         .fng-rating { color: var(--fng-greed); }
.fng-band-extreme-greed .fng-rating { color: var(--fng-extreme-greed); }
.fng-stale-tag {
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  padding: 2px 6px;
  border-radius: var(--r-pill);
  color: var(--warn);
  border: 1px solid color-mix(in srgb, var(--warn) 40%, transparent);
  background: color-mix(in srgb, var(--warn) 8%, transparent);
}
.fng-headline-sub {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--muted);
  letter-spacing: var(--ls-num);
}
.fng-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--s-2);
}
.fng-chip {
  display: flex; flex-direction: column; gap: 2px;
  padding: var(--s-2);
  border-radius: var(--r-3);
  border: 1px solid var(--border);
  background: var(--surface-3);
}
.fng-chip-now {
  border-color: color-mix(in srgb, var(--text) 28%, var(--border));
  background: var(--surface-1);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 6%, transparent);
}
.fng-chip-now .fng-chip-label { color: var(--text); }
.fng-chip-label {
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  color: var(--muted);
}
.fng-chip-num {
  font-family: var(--font-mono);
  font-size: var(--fs-xl);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--ls-num);
  line-height: 1.05;
}
.fng-chip-rating {
  font-size: var(--fs-2xs);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
}
.fng-chip.fng-band-extreme-fear  .fng-chip-num { color: var(--fng-extreme-fear); }
.fng-chip.fng-band-fear          .fng-chip-num { color: var(--fng-fear); }
.fng-chip.fng-band-neutral       .fng-chip-num { color: var(--fng-neutral); }
.fng-chip.fng-band-greed         .fng-chip-num { color: var(--fng-greed); }
.fng-chip.fng-band-extreme-greed .fng-chip-num { color: var(--fng-extreme-greed); }
.fng-chip-empty .fng-chip-num { color: var(--muted); }
.fng-section-title {
  font-size: var(--fs-md);
  font-weight: 600;
  margin: 0 0 var(--s-3);
  color: var(--text);
}
.fng-section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s-3); flex-wrap: wrap;
}
.fng-section-head .fng-section-title { margin: 0; }
.fng-section-hint {
  font-size: var(--fs-2xs);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
}
.fng-spark-section { display: flex; flex-direction: column; gap: var(--s-2); }
.fng-spark-wrap {
  display: flex; flex-direction: column; gap: 2px;
  padding: var(--s-3);
  border: 1px solid var(--border);
  border-radius: var(--r-3);
  background: var(--surface-2);
}
.fng-spark-plot { position: relative; touch-action: none; }
.fng-spark { width: 100%; height: 100px; display: block; }
.fng-spark-cursor {
  position: absolute; top: 0; bottom: 0; width: 1px;
  background: color-mix(in srgb, var(--text) 38%, transparent);
  transform: translateX(-50%);
  pointer-events: none;
}
.fng-spark-dot {
  position: absolute; width: 10px; height: 10px; border-radius: 50%;
  background: var(--text);
  border: 2px solid var(--surface-2);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--text) 30%, transparent);
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.fng-spark-dot.fng-band-extreme-fear  { background: var(--fng-extreme-fear); }
.fng-spark-dot.fng-band-fear          { background: var(--fng-fear); }
.fng-spark-dot.fng-band-neutral       { background: var(--fng-neutral); }
.fng-spark-dot.fng-band-greed         { background: var(--fng-greed); }
.fng-spark-dot.fng-band-extreme-greed { background: var(--fng-extreme-greed); }
.fng-spark-tip {
  position: absolute; z-index: 4;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 5px 9px;
  border-radius: var(--r-2);
  background: var(--surface-1);
  border: 1px solid var(--border);
  box-shadow: 0 6px 18px rgba(0,0,0,0.28);
  transform: translateX(-50%);
  pointer-events: none;
  white-space: nowrap;
}
.fng-spark-tip-top { display: flex; align-items: baseline; gap: var(--s-2); }
.fng-spark-tip-score {
  font-family: var(--font-mono);
  font-size: var(--fs-lg);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--ls-num);
  line-height: 1;
}
.fng-spark-tip-score.fng-band-extreme-fear  { color: var(--fng-extreme-fear); }
.fng-spark-tip-score.fng-band-fear          { color: var(--fng-fear); }
.fng-spark-tip-score.fng-band-neutral       { color: var(--fng-neutral); }
.fng-spark-tip-score.fng-band-greed         { color: var(--fng-greed); }
.fng-spark-tip-score.fng-band-extreme-greed { color: var(--fng-extreme-greed); }
.fng-spark-tip-band {
  font-size: var(--fs-2xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  color: var(--muted);
}
.fng-spark-tip-date {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  color: var(--muted);
}
.fng-spark-band { opacity: 0.10; }
.fng-spark-band.fng-band-extreme-fear  { fill: var(--fng-extreme-fear); }
.fng-spark-band.fng-band-fear          { fill: var(--fng-fear); }
.fng-spark-band.fng-band-neutral       { fill: var(--fng-neutral); }
.fng-spark-band.fng-band-greed         { fill: var(--fng-greed); }
.fng-spark-band.fng-band-extreme-greed { fill: var(--fng-extreme-greed); }
.fng-spark-line {
  stroke: var(--text);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}
.fng-spark-axis {
  display: flex; justify-content: space-between;
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  color: var(--muted);
}
.fng-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--s-3);
}
.fng-card {
  display: flex; flex-direction: column; gap: var(--s-2);
  padding: var(--s-3);
  border: 1px solid var(--border);
  border-left-width: 3px;
  border-radius: var(--r-3);
  background: var(--surface-2);
}
.fng-card.fng-band-extreme-fear  { border-left-color: var(--fng-extreme-fear); }
.fng-card.fng-band-fear          { border-left-color: var(--fng-fear); }
.fng-card.fng-band-neutral       { border-left-color: var(--fng-neutral); }
.fng-card.fng-band-greed         { border-left-color: var(--fng-greed); }
.fng-card.fng-band-extreme-greed { border-left-color: var(--fng-extreme-greed); }
.fng-card-title {
  font-size: var(--fs-md);
  font-weight: 600;
  margin: 0;
  color: var(--text);
}
.fng-card-blurb {
  font-size: var(--fs-sm);
  color: var(--muted);
  margin: 0;
  line-height: var(--lh-snug);
}
.fng-card-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-2);
  margin-top: auto;
}
.fng-card-rating {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  color: var(--muted);
}
.fng-bar { display: flex; align-items: center; gap: var(--s-2); flex: 1 1 auto; }
.fng-bar-track {
  position: relative;
  flex: 1 1 auto;
  height: 6px;
  background: var(--surface-3);
  border-radius: var(--r-pill);
  overflow: hidden;
}
.fng-bar-fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  border-radius: var(--r-pill);
  background: var(--muted);
  transition: width .2s ease;
}
.fng-bar.fng-band-extreme-fear  .fng-bar-fill { background: var(--fng-extreme-fear); }
.fng-bar.fng-band-fear          .fng-bar-fill { background: var(--fng-fear); }
.fng-bar.fng-band-neutral       .fng-bar-fill { background: var(--fng-neutral); }
.fng-bar.fng-band-greed         .fng-bar-fill { background: var(--fng-greed); }
.fng-bar.fng-band-extreme-greed .fng-bar-fill { background: var(--fng-extreme-greed); }
.fng-bar-num {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  min-width: 26px; text-align: right;
}
.fng-card-empty { opacity: 0.7; }
@media (max-width: 720px) {
  .fng-headline { grid-template-columns: 1fr; }
  .fng-strip { grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); }
}

/* ==========================================================================
   Visual polish pass — additive refinements layered on top of the base
   component CSS above. Kept in one block so the diff is easy to read /
   revert. All changes are pure CSS, gated under prefers-reduced-motion
   where they animate, and degrade gracefully on browsers without
   color-mix / backdrop-filter.
   ========================================================================== */

/* Brand mark — the dashed aperture ring is a static printer's mark, not a
   perpetually-breathing "live" LED (that constant glow-pulse is exactly the
   generated-dashboard tell we're moving away from). It comes alive only on
   interaction: hovering the wordmark sweeps the ring open (the rotate lives
   on .brand:hover .brand-mark) and gives the dot one quiet pulse. */
@keyframes brand-mark-pulse {
  0%   { opacity: 1; }
  50%  { opacity: 0.6; }
  100% { opacity: 1; }
}
@media (prefers-reduced-motion: no-preference) {
  .brand:hover .brand-mark circle {
    animation: brand-mark-pulse 1.4s var(--ease-in-out);
  }
}

/* Site-header — a 1px inset top highlight reads the solid masthead band as
   a raised surface, and the brass keyline (--accent-line) rules it off from
   the page below, the way a printed masthead is separated from the body. */
.site-header {
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--text-strong) 6%, transparent),
    0 1px 0 var(--accent-line),
    0 6px 18px -12px rgba(0,0,0,0.7);
}
:root[data-theme="light"] .site-header {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.7),
    0 1px 0 var(--accent-line),
    0 6px 18px -12px rgba(15,23,42,0.10);
}

/* Brand tag pill — currently transparent, give it a faint surface so the
   "Option Rater" badge reads as a chip not stray text. */
.brand-tag {
  background: color-mix(in srgb, var(--accent) 6%, transparent);
  border-color: color-mix(in srgb, var(--accent) 22%, var(--border));
  color: var(--muted-strong);
}

/* Icon-btn — explicit focus-visible ring so keyboard users see the
   target. The :focus-visible global rule already adds a ring but
   buttons with their own border need it tuned. */
.icon-btn:focus-visible {
  outline: none;
  border-color: var(--accent);
  color: var(--text-strong);
  background: var(--accent-soft);
  box-shadow: var(--focus-ring);
}

/* Cmd-palette-trigger — subtle accent-tinted hover + focus that signals
   "press ⌘K". The kbd chip inside also brightens to reinforce the cue. */
.cmd-palette-trigger {
  transition: background var(--dur-1) var(--ease-out),
              border-color var(--dur-1) var(--ease-out),
              color var(--dur-1) var(--ease-out),
              box-shadow var(--dur-1) var(--ease-out);
}
.cmd-palette-trigger:hover .cmd-palette-trigger-kbd,
.cmd-palette-trigger:focus-visible .cmd-palette-trigger-kbd {
  color: var(--accent-strong);
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
}
.cmd-palette-trigger:focus-visible {
  outline: none;
  border-color: var(--accent);
  color: var(--text-strong);
  box-shadow: var(--focus-ring);
}

/* Cmd-palette modal entrance — backdrop fades, modal scales up slightly.
   Pure CSS, fires on every open since the [hidden] attribute toggles. */
@media (prefers-reduced-motion: no-preference) {
  .cmd-palette:not([hidden]) .cmd-palette-backdrop {
    animation: cmdp-backdrop-in 180ms var(--ease-out) both;
  }
  .cmd-palette:not([hidden]) .cmd-palette-modal {
    animation: cmdp-modal-in 220ms var(--ease-out) both;
    transform-origin: 50% 0;
  }
}
@keyframes cmdp-backdrop-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes cmdp-modal-in {
  from { opacity: 0; transform: translateY(-8px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Landing-card arrow — currently slides right on hover; add a tiny
   scale so the affordance reads stronger. */
.landing-card:hover .landing-card-arrow {
  transform: translateX(4px) scale(1.1);
}

/* Pick card — push the call/put differentiation past a 3px left bar.
   Add a left-anchored gradient tint so cards are scannable at a glance,
   and lift on hover so they feel interactive. */
.pick-card.call {
  background-image: linear-gradient(
    90deg,
    color-mix(in srgb, var(--pos) 6%, transparent) 0%,
    transparent 22%);
}
.pick-card.put {
  background-image: linear-gradient(
    90deg,
    color-mix(in srgb, var(--neg) 6%, transparent) 0%,
    transparent 22%);
}
@media (prefers-reduced-motion: no-preference) {
  .pick-card {
    transition: border-color .15s var(--ease-out),
                background .15s var(--ease-out),
                transform .18s var(--ease-out),
                box-shadow .18s var(--ease-out);
  }
  .pick-card:hover {
    transform: translateY(-1px);
    box-shadow: var(--elev-2);
  }
  .pick-card.call:hover {
    box-shadow: var(--elev-1),
                0 0 18px -4px color-mix(in srgb, var(--pos) 28%, transparent);
  }
  .pick-card.put:hover {
    box-shadow: var(--elev-1),
                0 0 18px -4px color-mix(in srgb, var(--neg) 28%, transparent);
  }
}

/* Hero surface refinement — add a hair-thin top accent line to the
   landing hero so it visually anchors as the page entry point. The
   existing ::before pseudo is the left accent rail; we use box-shadow
   inset for the top hairline to avoid stacking ::after on top of the
   gradient. */
.landing-hero {
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--accent) 25%, transparent),
    var(--elev-2),
    var(--elev-glow);
}
:root[data-theme="light"] .landing-hero {
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--accent) 35%, transparent),
    var(--elev-2),
    var(--elev-glow);
}

/* Landing-card-stat — the gradient-clipped text can render as a thin
   sliver in light mode because text-strong → accent at the same
   luminance loses contrast. Add a fallback solid color and only apply
   the gradient where it'll read. */
.landing-card-stat {
  color: var(--text-strong);
}
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .landing-card:hover .landing-card-stat {
    background: linear-gradient(180deg,
      var(--text-strong) 0%,
      var(--accent-strong) 120%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }
}

/* Card hover refinement — when a .card opts into .is-hoverable, swap the
   subtle solid border for an accent-tinted hairline so the hover state
   reads as "this is the one you're aiming at". */
.card.is-hoverable:hover {
  border-color: color-mix(in srgb, var(--accent) 30%, var(--border-strong));
}

/* Narrative card — accent the left rail on hover with a soft outer glow
   that matches the sentiment. Reinforces the bullish/bearish read. */
@media (prefers-reduced-motion: no-preference) {
  .narr:hover .narr-accent {
    box-shadow: 0 0 10px color-mix(in srgb, var(--pos) 55%, transparent),
                0 0 1px color-mix(in srgb, var(--pos) 80%, transparent);
  }
  .narr[data-sent="bearish"]:hover .narr-accent {
    box-shadow: 0 0 10px color-mix(in srgb, var(--neg) 55%, transparent),
                0 0 1px color-mix(in srgb, var(--neg) 80%, transparent);
  }
}

/* Freshness banner — when a stale-state pill is shown, give it a subtle
   inner highlight so it reads as a chip not flat text. */
.freshness.warn::after,
.freshness.bad::after {
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text-strong) 5%, transparent);
}

/* Skeleton loader — current shimmer travels through the whole gradient
   in 1.4s; tighten the highlight band so it reads as a sweep, not a
   wash. The opacity stop in the middle makes the moving band sharper. */
.skel {
  background-image: linear-gradient(
    90deg,
    var(--surface-2) 0%,
    var(--surface-2) 38%,
    color-mix(in srgb, var(--text-strong) 9%, var(--surface-2)) 50%,
    var(--surface-2) 62%,
    var(--surface-2) 100%);
}

/* Empty-state — give the icon a slow breath so a totally empty section
   doesn't feel dead. Capped iteration count to keep it from being
   distracting on long sessions. */
@keyframes empty-state-breathe {
  0%, 100% { opacity: 0.45; transform: scale(1); }
  50%      { opacity: 0.65; transform: scale(1.03); }
}
@media (prefers-reduced-motion: no-preference) {
  .empty-state-icon {
    animation: empty-state-breathe 3.2s var(--ease-in-out) infinite;
  }
}

/* Calendar chip — current hover translates right 2px; add a tiny accent
   shadow on the right edge so the slide reads as "entering the day's
   detail" rather than just shifting in place. */
@media (prefers-reduced-motion: no-preference) {
  .cal-chip:hover {
    box-shadow: 1px 0 0 color-mix(in srgb, var(--accent) 35%, transparent);
  }
}

/* Scrollbar — match the desk-chrome feel. Thin, neutral, only visible
   when hovered. Applies to the few scrollable strips (.narr-ended-strip,
   cmd-palette results, calendar day list, etc.). */
.narr-ended-strip,
.cmd-palette-results,
.opt-pinned-strip {
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}
.narr-ended-strip::-webkit-scrollbar,
.cmd-palette-results::-webkit-scrollbar,
.opt-pinned-strip::-webkit-scrollbar { height: 8px; width: 8px; }
.narr-ended-strip::-webkit-scrollbar-thumb,
.cmd-palette-results::-webkit-scrollbar-thumb,
.opt-pinned-strip::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: var(--r-pill);
  border: 2px solid transparent;
  background-clip: padding-box;
}
.narr-ended-strip::-webkit-scrollbar-thumb:hover,
.cmd-palette-results::-webkit-scrollbar-thumb:hover,
.opt-pinned-strip::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--accent) 35%, var(--border-strong));
  background-clip: padding-box;
}

/* Tighter selection — the default browser highlight clashes with the
   green accent. Replace with an accent-soft surface so selected
   numbers + tickers stay readable. */
::selection {
  background: color-mix(in srgb, var(--accent) 32%, transparent);
  color: var(--text-strong);
}

/* Keyboard hint — every <kbd> gets the same chip treatment so shortcuts
   read as a system, not ad-hoc. Specific rules (.cmd-palette-kbd,
   .landing-foot kbd, etc.) keep their own paint via higher specificity.
   Uses individual font props (not the shorthand) so the existing
   .mono, code, kbd, samp font-feature-settings rule still applies. */
kbd {
  display: inline-block;
  padding: 2px 7px;
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  border-radius: var(--r-2);
  background: var(--surface-2);
  color: var(--text);
  font-weight: 600;
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: 0;
  vertical-align: 1px;
  box-shadow: 0 1px 0 var(--border-strong);
}

/* Global scrollbar — thin, tinted track so the browser chrome matches
   the institutional palette instead of defaulting to OS gray. */
html {
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}
html::-webkit-scrollbar { width: 10px; }
html::-webkit-scrollbar-track { background: transparent; }
html::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: var(--r-pill);
  border: 3px solid transparent;
  background-clip: padding-box;
}
html::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--accent) 35%, var(--border-strong));
  background-clip: padding-box;
}

/* ---- Volume + S/R break tab ----------------------------------------- */
.vol-card { padding: var(--s-4); }
.vol-controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  align-items: center;
  margin-bottom: var(--s-3);
}
.vol-search {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  color: var(--text-2);
  min-width: 240px;
}
.vol-search:focus-within {
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
}
.vol-search input {
  background: transparent;
  border: none;
  outline: none;
  color: var(--text);
  flex: 1;
  font: inherit;
  min-width: 0;
}
.vol-search-clear {
  background: none;
  border: none;
  color: var(--text-2);
  cursor: pointer;
  padding: 0 var(--s-1);
  font-size: 1.1em;
  line-height: 1;
}
.vol-filter {
  display: inline-flex;
  gap: 4px;
  padding: 3px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
}
.vol-pill {
  background: transparent;
  border: none;
  color: var(--text-2);
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-pill);
  font: inherit;
  cursor: pointer;
  transition: background-color var(--xt), color var(--xt);
}
.vol-pill:hover { color: var(--text); }
.vol-pill.is-on {
  background: var(--accent);
  color: var(--accent-on);
}
.vol-pill:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.vol-toggles { display: inline-flex; gap: var(--s-2); }
.vol-toggle-pill { border: 1px solid var(--border); }
.vol-toggle-pill.is-on { border-color: transparent; }

/* Phone layout for the Volume tab. */
@media (max-width: 640px) {
  /* The Volume tab's intro explainer paragraphs are desktop reference
     prose — on a phone they push the actual scan a full screen down. */
  .vol-card > .hint { display: none; }
  /* Controls: full-width search on its own row, wrappable pill groups with
     thumb-sized targets, and the sort select stretched to the row width. */
  .vol-card { padding: var(--s-3); }
  .vol-controls { gap: var(--s-2); }
  .vol-search { flex: 1 1 100%; min-width: 0; }
  .vol-filter { flex-wrap: wrap; }
  .vol-pill { padding: var(--s-2) 10px; min-height: 36px; }
  .vol-sort { flex: 1 1 100%; }
  .vol-sort select { flex: 1; min-width: 0; }
  /* Flag cards: ticker + spot on the first line, the chips/stats summary on
     its own full-width line below (margin-left:auto right-ragged wrapping
     reads broken at ~390px), with taller tap targets throughout. */
  .vol-row { padding: var(--s-3); }
  .vol-row-head { row-gap: var(--s-1); padding: var(--s-1) 0; }
  .vol-row-summary { flex-basis: 100%; margin-left: 0; }
  .vol-sector-head { padding: var(--s-2) 0; min-height: 40px; }
  /* Hour buckets: label + price move share the first line, the volume
     actual/expected detail drops to its own line (same pattern as the live
     board's phone rows). */
  .vol-bucket-row { row-gap: 2px; }
  .vol-bucket-label { min-width: 0; }
  .vol-bucket-move { margin-left: auto; }
  .vol-bucket-vol { flex-basis: 100%; order: 3; font-size: 0.85em; }
  /* Breadth banner: tighter, and the ticker-breadth stat wraps under the
     legend instead of fighting margin-left:auto for space. */
  .vol-summary { padding: var(--s-2) var(--s-3); }
  .vol-summary-tickers { margin-left: 0; flex-basis: 100%; }
}

/* ---- Shared auto-live overlays (Tickers grid / Top Picks / OI tab) ----- */
/* Small "Live · 10:42 AM" status next to a card header's eyebrow. */
.tab-live-state {
  font: 600 10px/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  white-space: nowrap;
}
.tab-live-state:empty { display: none; }
.tab-live-state.is-live { color: var(--accent); }
.tab-live-state.is-error { color: var(--neg); }
/* Tickers grid: live day-change badge next to the card's spot. */
.ticker-chg {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: var(--fs-xs);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.ticker-chg.is-up { color: var(--pos); }
.ticker-chg.is-dn { color: var(--neg); }
/* Top Picks: "live since pick" board above the grid. */
.picks-live-board {
  display: grid;
  gap: 2px;
  margin-bottom: var(--s-3);
  padding: var(--s-2) var(--s-3);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.picks-live-title {
  color: var(--text-3);
  font-size: 0.78em;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: 2px var(--s-2);
}
.picks-live-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  padding: 3px var(--s-2);
  border-radius: var(--r-2);
  font-variant-numeric: tabular-nums;
}
.picks-live-sym { font-weight: 700; min-width: 4em; }
.picks-live-side {
  font-size: 0.75em;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 1px 6px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border-strong);
}
.picks-live-side.is-call { color: var(--pos); border-color: color-mix(in srgb, var(--pos) 45%, transparent); }
.picks-live-side.is-put { color: var(--neg); border-color: color-mix(in srgb, var(--neg) 45%, transparent); }
.picks-live-spot { color: var(--text-2); min-width: 5.5em; }
.picks-live-since.is-pos { color: var(--pos); }
.picks-live-since.is-neg { color: var(--neg); }
.picks-live-lvls { color: var(--text-3); font-size: 0.88em; }
.picks-live-hit {
  font-weight: 700;
  font-size: 0.85em;
  padding: 1px 8px;
  border-radius: var(--r-pill);
}
.picks-live-hit.is-tp { background: var(--pos-soft); color: var(--pos); }
.picks-live-hit.is-cut { background: var(--neg-soft); color: var(--neg); }
/* Top Picks live board on phones: each pick's level distances get their
   own line so the row doesn't squeeze into an unreadable single string. */
@media (max-width: 640px) {
  .picks-live-row { padding: 6px var(--s-2); row-gap: 2px; }
  .picks-live-sym { min-width: 3.5em; }
  .picks-live-spot { min-width: 0; }
  .picks-live-lvls { flex-basis: 100%; }
}
/* OI tab: live spot-vs-walls distance in each row head. */
.oi-live { display: inline-flex; flex-wrap: wrap; gap: 2px var(--s-2); }
.oi-live-gap {
  color: var(--text-3);
  font-size: 0.85em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.oi-live-gap.is-breach-up { color: var(--pos); font-weight: 600; }
.oi-live-gap.is-breach-dn { color: var(--neg); font-weight: 600; }

.vol-summary {
  display: grid;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-4);
  margin-bottom: var(--s-4);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--border-strong);
  border-radius: var(--r-md);
}
.vol-summary.is-bear { border-left-color: var(--neg); }
.vol-summary.is-bull { border-left-color: var(--pos); }
.vol-summary.is-mixed { border-left-color: var(--text-3); }
.vol-summary-head { display: flex; align-items: baseline; gap: var(--s-3); flex-wrap: wrap; }
.vol-summary-tone { font-weight: 700; font-size: 1.05em; letter-spacing: 0.01em; color: var(--text); }
.vol-summary.is-bear .vol-summary-tone { color: var(--neg); }
.vol-summary.is-bull .vol-summary-tone { color: var(--pos); }
.vol-summary-sub { color: var(--text-2); font-size: 0.9em; }
.vol-summary-bar {
  display: flex;
  height: 8px;
  border-radius: var(--r-pill);
  overflow: hidden;
  background: var(--surface-3);
}
.vol-summary-seg { display: block; height: 100%; }
.vol-summary-seg.bear { background: var(--neg); }
.vol-summary-seg.bull { background: var(--pos); }
.vol-summary-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  align-items: baseline;
  font-size: 0.85em;
  color: var(--text-2);
}
.vol-summary-stat b { font-variant-numeric: tabular-nums; }
.vol-summary-stat.muted { color: var(--text-3); }
.vol-summary-legend .neg { color: var(--neg); }
.vol-summary-legend .pos { color: var(--pos); }
.vol-summary-tickers { color: var(--text-3); margin-left: auto; }

.vol-list {
  display: grid;
  gap: var(--s-3);
}
.vol-sector-group { display: grid; gap: var(--s-3); }
.vol-sector-group + .vol-sector-group { margin-top: var(--s-5); }
.vol-sector-head {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  width: 100%;
  background: none;
  border: none;
  border-bottom: 1px solid var(--border);
  padding: 0 0 var(--s-2) 0;
  margin: 0;
  font: inherit;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.vol-sector-head:hover { border-color: var(--border-strong); }
.vol-sector-head:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-sm); }
.vol-sector-caret { color: var(--text-3); font-size: 0.8em; width: 1em; flex: none; }
.vol-sector-name {
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  font-size: 0.9em;
}
.vol-sector-count {
  background: var(--surface-3);
  color: var(--text-2);
  border-radius: var(--r-pill);
  padding: 1px var(--s-2);
  font-size: 0.8em;
  font-variant-numeric: tabular-nums;
}
.vol-sector-bias { margin-left: auto; font-size: 0.82em; color: var(--text-3); }
.vol-sector-bias.pos { color: var(--pos); }
.vol-sector-bias.neg { color: var(--neg); }
.vol-sector-cards { display: grid; gap: var(--s-3); margin-top: var(--s-3); }
/* Pinned "★ Top Picks" group — the build's current picks, lifted above the
   sector groups and visually set apart with the accent. */
.vol-picks-group {
  background: var(--accent-tint-1);
  border: 1px solid var(--accent-line);
  border-radius: var(--r-md, 10px);
  padding: var(--s-3) var(--s-3) var(--s-2);
  margin-bottom: var(--s-4);
}
.vol-picks-group .vol-sector-head { border-bottom-color: var(--accent-line); }
.vol-picks-group .vol-sector-name { color: var(--accent-strong); }
/* Top-Picks side badge shown on each pinned card. */
.vol-pick-side { font-weight: 600; }
.vol-pick-call { background: var(--accent-soft); color: var(--accent-strong); border: 1px solid var(--accent-line); }
.vol-pick-put { background: color-mix(in srgb, var(--neg) 14%, transparent); color: var(--neg); border: 1px solid color-mix(in srgb, var(--neg) 35%, var(--border)); }
.vol-row {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--s-3) var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.vol-row:hover {
  background: color-mix(in srgb, var(--accent) 3%, var(--surface-2));
  border-color: var(--border-strong);
}
.vol-row-head {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  flex-wrap: wrap;
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.vol-row-head:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-sm); }
.vol-row-caret { color: var(--text-3); font-size: 0.8em; width: 1em; flex: none; align-self: center; }
.vol-symbol {
  font-weight: 600;
  font-size: 1.05em;
  letter-spacing: 0.02em;
  color: var(--text);
}
.vol-spot { color: var(--text-2); font-variant-numeric: tabular-nums; }
.vol-row-summary {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
  margin-left: auto;
}
.vol-row-stats { color: var(--text-3); font-size: 0.85em; font-variant-numeric: tabular-nums; }
.vol-row-body {
  margin-top: var(--s-2);
  padding-top: var(--s-2);
  border-top: 1px solid var(--border);
}
.vol-row-meta { color: var(--text-3); font-size: 0.85em; margin-bottom: var(--s-2); }
.vol-avg20 { color: var(--text-3); font-size: 0.85em; margin-left: auto; }

/* Intraday volume-profile strip — a six-column micro bar chart (one per
   session hour bucket) shown on every collapsed card. Column height tracks
   that hour's volume ratio (relative to the card's peak), hue tracks the price
   direction that hour, and flagged / S-R / scan-missed hours read distinctly.
   Surfaces the SHAPE of the session's volume — front-loaded vs back-loaded vs
   steady — at a glance, without expanding the hour-by-hour breakdown. */
.vol-profile { display: flex; flex-direction: column; gap: 2px; margin-top: var(--s-1); }
.vol-profile-track { display: flex; align-items: flex-end; gap: 3px; height: 24px; }
.vol-profile-cell {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  display: flex;
  align-items: flex-end;
  border-radius: var(--r-2, 3px);
  background: var(--surface-3);
}
.vol-profile-cell.is-empty { background: color-mix(in srgb, var(--border) 45%, transparent); }
.vol-profile-cell.is-missed {
  background: repeating-linear-gradient(45deg, var(--surface-3) 0, var(--surface-3) 3px, transparent 3px, transparent 6px);
}
.vol-profile-bar {
  width: 100%;
  min-height: 2px;
  border-radius: var(--r-2, 3px);
  background: var(--text-3);
}
.vol-profile-cell.is-up .vol-profile-bar { background: var(--pos); }
.vol-profile-cell.is-dn .vol-profile-bar { background: var(--neg); }
.vol-profile-cell.is-flat .vol-profile-bar { background: var(--text-3); }
/* Quiet (scanned but unflagged) hours are dimmed so the flagged hours read as
   the loud ones; flagged hours stay fully saturated. */
.vol-profile-cell.is-quiet .vol-profile-bar { opacity: 0.4; }
.vol-profile-cell.is-flagged .vol-profile-bar { opacity: 1; }
/* S/R break marker — a small triangle notch riding the column (up at the top
   for a resistance break, down at the base for a support break). */
.vol-profile-sr {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
}
.vol-profile-sr-upper { top: -2px; border-bottom: 4px solid var(--pos); }
.vol-profile-sr-lower { bottom: -2px; border-top: 4px solid var(--neg); }
.vol-profile-axis {
  display: flex;
  justify-content: space-between;
  font-size: 0.6em;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-3);
  opacity: 0.75;
}

.vol-bucket {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-2) 0;
  border-top: 1px dashed var(--border);
}
.vol-bucket:first-of-type { border-top: none; padding-top: 0; }
.vol-bucket-row {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  flex-wrap: wrap;
  font-variant-numeric: tabular-nums;
}
.vol-bucket-label {
  font-weight: 500;
  color: var(--text);
  min-width: 8.5em;
}
.vol-bucket-vol { color: var(--text-2); font-size: 0.95em; }
.vol-bucket-vol.is-flagged {
  color: var(--text);
  font-weight: 500;
}
.vol-bucket-move { color: var(--text-2); font-size: 0.95em; }
.vol-bucket-move.is-up { color: var(--up); }
.vol-bucket-move.is-dn { color: var(--dn); }
.vol-why {
  font-size: 0.85em;
  line-height: 1.45;
  color: var(--text-3);
  max-width: 64ch;
}

.vol-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}
.vol-pill-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--s-2);
  border-radius: var(--r-pill);
  font-size: 0.82em;
  font-weight: 500;
  letter-spacing: 0.01em;
  background: var(--surface-3);
  color: var(--text-2);
  border: 1px solid var(--border);
}
.vol-pill-badge.vol-conv-very-high {
  background: color-mix(in srgb, var(--up) 18%, var(--surface-2));
  color: var(--up);
  border-color: color-mix(in srgb, var(--up) 45%, transparent);
}
.vol-pill-badge.vol-conv-high {
  background: color-mix(in srgb, var(--accent) 18%, var(--surface-2));
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
}
.vol-pill-badge.vol-conv-medium {
  background: color-mix(in srgb, var(--text-2) 12%, var(--surface-2));
  color: var(--text);
  border-color: var(--border-strong);
}
.vol-pill-badge.vol-conv-low {
  background: color-mix(in srgb, var(--dn) 18%, var(--surface-2));
  color: var(--dn);
  border-color: color-mix(in srgb, var(--dn) 45%, transparent);
}
.vol-pill-badge.vol-sr-lower.vol-conv-very-high {
  background: color-mix(in srgb, var(--dn) 18%, var(--surface-2));
  color: var(--dn);
  border-color: color-mix(in srgb, var(--dn) 45%, transparent);
}
.vol-pill-badge.vol-direction-up {
  background: var(--pos-soft);
  color: var(--pos);
  border-color: color-mix(in srgb, var(--pos) 45%, transparent);
}
.vol-pill-badge.vol-direction-dn {
  background: var(--neg-soft);
  color: var(--neg);
  border-color: color-mix(in srgb, var(--neg) 45%, transparent);
}
/* "Would you follow it?" verdict pill — follow (green/red by side),
   wait (amber), avoid (muted + dashed, like the scan-gap pills). */
.vol-pill-badge.vol-verdict { font-weight: 600; }
.vol-pill-badge.vol-verdict-follow.is-bull {
  background: var(--pos-soft);
  color: var(--pos);
  border-color: color-mix(in srgb, var(--pos) 55%, transparent);
}
.vol-pill-badge.vol-verdict-follow.is-bear {
  background: var(--neg-soft);
  color: var(--neg);
  border-color: color-mix(in srgb, var(--neg) 55%, transparent);
}
.vol-pill-badge.vol-verdict-wait {
  background: var(--warn-soft);
  color: var(--warn);
  border-color: color-mix(in srgb, var(--warn) 45%, transparent);
}
.vol-pill-badge.vol-verdict-avoid {
  background: color-mix(in srgb, var(--text-3) 14%, var(--surface-2));
  color: var(--text-2);
  border-style: dashed;
  border-color: var(--border-strong);
}
/* Expanded-body verdict row — the pill's reasoning in full. */
.vol-verdict-row {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  border-left-width: 3px;
  background: var(--surface-2);
}
.vol-verdict-row.vol-verdict-follow.is-bull { border-left-color: var(--pos); }
.vol-verdict-row.vol-verdict-follow.is-bear { border-left-color: var(--neg); }
.vol-verdict-row.vol-verdict-wait { border-left-color: var(--warn); }
.vol-verdict-row.vol-verdict-avoid { border-left-color: var(--text-3); }
.vol-verdict-label { font-weight: 600; font-size: 0.92em; color: var(--text); }
.vol-verdict-row.vol-verdict-follow.is-bull .vol-verdict-label { color: var(--pos); }
.vol-verdict-row.vol-verdict-follow.is-bear .vol-verdict-label { color: var(--neg); }
.vol-verdict-row.vol-verdict-wait .vol-verdict-label { color: var(--warn); }
.vol-verdict-why {
  font-size: 0.85em;
  line-height: 1.45;
  color: var(--text-3);
  max-width: 64ch;
}
.vol-card .vol-key-up { color: var(--pos); font-weight: 500; }
.vol-card .vol-key-dn { color: var(--neg); font-weight: 500; }
.vol-bucket.is-scan-missed { opacity: 0.7; }
.vol-bucket-vol.is-muted {
  color: var(--text-3);
  font-style: italic;
}
.vol-pill-badge.vol-scan-missed,
.vol-pill-badge.vol-scan-gap {
  background: color-mix(in srgb, var(--text-3) 18%, var(--surface-2));
  color: var(--text-2);
  border-color: var(--border-strong);
  border-style: dashed;
}

.vol-eod {
  display: flex;
  gap: var(--s-3);
  align-items: baseline;
  flex-wrap: wrap;
  padding: var(--s-2) var(--s-3);
  background: color-mix(in srgb, var(--accent) 8%, var(--surface-2));
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  border-radius: var(--r-sm);
  font-variant-numeric: tabular-nums;
}
.vol-eod-why {
  flex-basis: 100%;
  margin-top: var(--s-1);
  font-size: 0.85em;
  line-height: 1.45;
  color: var(--text-3);
  font-variant-numeric: normal;
}
.vol-eod-label {
  font-weight: 600;
  color: var(--accent);
  letter-spacing: 0.05em;
  font-size: 0.85em;
}
.vol-eod-vol { color: var(--text); }
.vol-eod-move.is-up { color: var(--up); }
.vol-eod-move.is-dn { color: var(--dn); }

.vol-empty {
  padding: var(--s-4);
  text-align: center;
  color: var(--text-3);
}

/* ---- Strategies tab ----------------------------------------------------- */
.strat-card { padding: var(--s-4); }
.strat-section-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-strong);
  margin: 0;
}
.strat-leg-counter {
  color: var(--text-3);
  font-weight: 400;
  font-size: 0.9em;
}
.strat-controls {
  display: flex;
  gap: var(--s-3);
  align-items: center;
  margin-bottom: var(--s-3);
  flex-wrap: wrap;
}
.strat-controls .combo {
  flex: 1 1 280px;
  min-width: 0;
}
.strat-btn-ghost {
  appearance: none;
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text-2);
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-pill);
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 120ms, color 120ms, border-color 120ms;
}
.strat-btn-ghost:hover {
  border-color: var(--accent);
  color: var(--text-strong);
  background: var(--accent-tint-1);
}
.strat-ticker-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-3);
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: var(--r-3);
  color: var(--text-2);
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
  margin-bottom: var(--s-3);
}
.strat-meta-sym {
  color: var(--text-strong);
  font-weight: 600;
}

/* --- Templates gallery ---- */
.strat-templates {
  margin-bottom: var(--s-4);
}
.strat-tpl-groups {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--s-3);
  margin-top: var(--s-2);
}
.strat-tpl-group {
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: var(--r-4);
  padding: var(--s-3);
}
.strat-tpl-group-head {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-bottom: var(--s-2);
}
.strat-tpl-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}
.strat-tpl-chip {
  appearance: none;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-3);
  padding: var(--s-2) var(--s-3);
  cursor: pointer;
  text-align: left;
  min-width: 120px;
  transition: background 120ms, border-color 120ms, transform 80ms;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.strat-tpl-chip:hover {
  border-color: var(--accent);
  background: var(--accent-tint-1);
}
.strat-tpl-chip:active { transform: translateY(1px); }
.strat-tpl-chip.is-on {
  border-color: var(--accent);
  background: var(--accent-tint-2);
  box-shadow: 0 0 0 1px var(--accent-glow-soft) inset;
}
.strat-tpl-chip-name {
  color: var(--text-strong);
  font-weight: 600;
  font-size: 0.9rem;
}
.strat-tpl-chip-label {
  color: var(--text-3);
  font-size: 0.78rem;
}
.strat-tpl-foot {
  color: var(--text-3);
  font-size: 0.78rem;
  margin: var(--s-3) 0 0;
}

/* --- Legs panel ---- */
.strat-legs { margin-top: var(--s-3); }
.strat-legs-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--s-2);
}
.strat-legs-actions { display: flex; gap: var(--s-2); }
.strat-legs-list {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.strat-legs-foot {
  color: var(--text-3);
  font-size: 0.78rem;
  margin: var(--s-2) 0 0;
}
.strat-legs-foot b { color: var(--text-2); font-weight: 600; }
.strat-legs-empty {
  padding: var(--s-4);
  text-align: center;
  color: var(--text-3);
  background: var(--surface-2);
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-3);
}
.strat-leg {
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--border-strong);
  border-radius: var(--r-3);
  padding: var(--s-3);
  transition: border-color 120ms;
}
.strat-leg.is-buy  { border-left-color: var(--pos); }
.strat-leg.is-sell { border-left-color: var(--neg); }
.strat-leg-grid {
  display: grid;
  grid-template-columns: auto auto minmax(120px, 1.3fr) minmax(92px, 1fr) 62px 82px auto;
  gap: var(--s-2);
  align-items: end;
}
.strat-leg-toggle {
  display: inline-flex;
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  padding: 2px;
}
.strat-leg-toggle button {
  appearance: none;
  background: transparent;
  border: none;
  color: var(--text-2);
  padding: 6px 12px;
  font-size: 0.82rem;
  cursor: pointer;
  border-radius: var(--r-pill);
  font-weight: 500;
  transition: background 120ms, color 120ms;
}
.strat-leg-toggle button:hover { color: var(--text-strong); }
.strat-leg-side button.is-on[data-leg-val="buy"]  { background: var(--pos); color: #06231a; }
.strat-leg-side button.is-on[data-leg-val="sell"] { background: var(--neg); color: #fff; }
.strat-leg-type button.is-on { background: var(--accent); color: var(--accent-fg); }
.strat-leg-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.strat-leg-flabel {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.strat-leg-field select,
.strat-leg-field input {
  appearance: none;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-2);
  color: var(--text);
  padding: 6px 8px;
  font-size: 0.88rem;
  font-variant-numeric: tabular-nums;
  width: 100%;
}
.strat-leg-field select:focus,
.strat-leg-field input:focus {
  outline: none;
  border-color: var(--accent);
}
.strat-leg-qty input { text-align: right; }
.strat-leg-price input { text-align: right; }
.strat-leg-price input::placeholder { color: var(--text-3); opacity: 0.7; }
.strat-leg-price input.is-manual {
  border-color: var(--accent);
  color: var(--text-strong);
  font-weight: 600;
}
.strat-leg-remove {
  appearance: none;
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text-3);
  width: 32px;
  height: 32px;
  border-radius: var(--r-2);
  font-size: 1.1rem;
  cursor: pointer;
  align-self: end;
  transition: background 120ms, color 120ms, border-color 120ms;
}
.strat-leg-remove:hover {
  background: var(--neg-tint);
  border-color: var(--neg);
  color: var(--neg);
}
.strat-leg-detail {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: var(--s-2);
  padding-top: var(--s-2);
  border-top: 1px dashed var(--hairline);
  color: var(--text-3);
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
  align-items: center;
}
.strat-leg-detail b { color: var(--text); font-weight: 600; }
.strat-leg-cost { margin-left: auto; font-weight: 600; }
.strat-leg-cost.is-debit  { color: var(--neg); }
.strat-leg-cost.is-credit { color: var(--pos); }
.strat-leg-manual { color: var(--accent); font-weight: 600; }
.strat-leg-detail-note { color: var(--muted); }
.strat-leg-dte {
  color: var(--muted);
  background: var(--surface-3);
  padding: 2px 8px;
  border-radius: var(--r-pill);
  font-size: 0.72rem;
}
.strat-leg-warn {
  color: var(--warn);
}

@media (max-width: 900px) {
  /* 3 rows: toggles + remove · expiry + strike · qty + price */
  .strat-leg-grid {
    grid-template-columns: 1fr 1fr 64px 84px;
  }
  .strat-leg-side   { grid-row: 1; grid-column: 1; }
  .strat-leg-type   { grid-row: 1; grid-column: 2; }
  .strat-leg-remove { grid-row: 1; grid-column: 4; justify-self: end; }
  .strat-leg-field:nth-of-type(1) { grid-row: 2; grid-column: 1 / 3; } /* Expiry */
  .strat-leg-field:nth-of-type(2) { grid-row: 2; grid-column: 3 / 5; } /* Strike */
  .strat-leg-qty    { grid-row: 3; grid-column: 1; }
  .strat-leg-price  { grid-row: 3; grid-column: 2; }
}
@media (max-width: 560px) {
  /* Single stack, two-up where it reads well (toggles, then qty + price) */
  .strat-leg-grid {
    grid-template-columns: 1fr 1fr;
  }
  .strat-leg-side   { grid-row: auto; grid-column: 1; }
  .strat-leg-type   { grid-row: auto; grid-column: 2; justify-self: start; }
  .strat-leg-field:nth-of-type(1) { grid-row: auto; grid-column: 1 / -1; } /* Expiry */
  .strat-leg-field:nth-of-type(2) { grid-row: auto; grid-column: 1 / -1; } /* Strike */
  .strat-leg-qty    { grid-row: auto; grid-column: 1; }
  .strat-leg-price  { grid-row: auto; grid-column: 2; }
  .strat-leg-remove { grid-row: auto; grid-column: 1 / -1; justify-self: end; }
}

/* --- Results panel ---- */
.strat-results {
  margin-top: var(--s-4);
  padding-top: var(--s-3);
  border-top: 1px solid var(--hairline);
}
.strat-results-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-bottom: var(--s-3);
}
.strat-results-head-left {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}
.strat-bias {
  font-size: 0.78rem;
  padding: 2px 10px;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  color: var(--text-2);
  border: 1px solid var(--border-strong);
}
.strat-score-wrap {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}
.strat-score-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.strat-score-chip {
  font-size: 1rem;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: var(--r-3);
  border: 1px solid var(--border-strong);
  background: var(--surface-3);
  color: var(--text-strong);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}
.strat-score-chip.strat-grade-aplus,
.strat-score-chip.strat-grade-a {
  background: var(--pos-soft);
  border-color: var(--pos);
  color: var(--pos);
}
.strat-score-chip.strat-grade-b {
  background: var(--accent-tint-1);
  border-color: var(--accent);
  color: var(--accent);
}
.strat-score-chip.strat-grade-c {
  background: var(--warn-tint);
  border-color: var(--warn);
  color: var(--warn);
}
.strat-score-chip.strat-grade-d {
  background: var(--neg-tint);
  border-color: var(--neg);
  color: var(--neg);
}

.strat-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--s-2);
  margin-bottom: var(--s-3);
}
.strat-summary-cell {
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: var(--r-3);
  padding: var(--s-2) var(--s-3);
}
.strat-summary-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-bottom: 4px;
}
.strat-summary-val {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-strong);
  font-variant-numeric: tabular-nums;
}
.strat-summary-val.is-debit { color: var(--neg); }
.strat-summary-val.is-credit { color: var(--pos); }
.strat-summary-val.is-profit { color: var(--pos); }
.strat-summary-val.is-loss { color: var(--neg); }
.strat-summary-unlim {
  font-style: italic;
  color: var(--pos);
}
.strat-summary-unlim.is-loss { color: var(--neg); }

.strat-results-body {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: var(--s-4);
}
@media (max-width: 860px) {
  .strat-results-body { grid-template-columns: 1fr; }
}

.strat-payoff-wrap {
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: var(--r-3);
  padding: var(--s-3);
}
.strat-payoff-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--s-2);
}
.strat-payoff-title {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
}
.strat-payoff-axis { color: var(--text-3); font-size: 0.78rem; }
.strat-payoff-svg { width: 100%; height: auto; display: block; }
.strat-payoff-zero {
  stroke: var(--border-strong);
  stroke-width: 1;
  stroke-dasharray: 3 3;
}
.strat-payoff-area-profit { fill: var(--pos-soft); }
.strat-payoff-area-loss   { fill: var(--neg-soft); }
.strat-payoff-line {
  stroke: var(--accent);
  stroke-width: 2;
  fill: none;
}
.strat-payoff-spot {
  stroke: var(--text-2);
  stroke-width: 1;
  stroke-dasharray: 2 4;
  opacity: 0.7;
}
.strat-payoff-spot-lbl { fill: var(--text-2); }
.strat-payoff-be {
  stroke: var(--accent);
  stroke-width: 1;
  stroke-dasharray: 4 3;
  opacity: 0.5;
}
.strat-payoff-axislbl {
  fill: var(--text-3);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}

.strat-greeks-wrap {
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: var(--r-3);
  padding: var(--s-3);
}
.strat-greeks-title {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: var(--s-2);
}
.strat-greeks {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-2);
}
.strat-greek-cell {
  background: var(--surface-3);
  border: 1px solid var(--hairline);
  border-radius: var(--r-2);
  padding: var(--s-2);
}
.strat-greek-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.strat-greek-val {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-strong);
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
}

.strat-score-explain {
  margin-top: var(--s-3);
  padding-top: var(--s-2);
  border-top: 1px dashed var(--hairline);
}
.strat-score-parts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.strat-score-parts li {
  display: grid;
  grid-template-columns: 110px 1fr auto;
  gap: var(--s-2);
  align-items: center;
  font-size: 0.78rem;
}
.strat-score-part-label { color: var(--text-2); }
.strat-score-part-bar {
  background: var(--surface-3);
  height: 6px;
  border-radius: var(--r-pill);
  overflow: hidden;
  border: 1px solid var(--hairline);
}
.strat-score-part-bar span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-strong));
}
.strat-score-part-val {
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
  font-size: 0.78rem;
}
.strat-score-part-note {
  grid-column: 1 / -1;
  color: var(--text-3);
  font-size: 0.74rem;
  margin-top: 2px;
}

.strat-foot {
  margin-top: var(--s-3);
  color: var(--text-3);
  font-size: 0.78rem;
}

/* ---------------- Heatmap (Finviz-style market map) ----------------------
   Treemap rendered as absolutely-positioned tiles inside .heatmap-root.
   The layout JS sets each tile's --x/--y/--w/--h custom props as
   percentages; CSS just turns them into left/top/width/height. Color is
   driven by --hm-c (a 0..1 number where 0 = max-red, 0.5 = neutral, 1 =
   max-green) via a divergent red→gray→green gradient blend. */
.heatmap-controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  align-items: center;
  margin: 0 0 12px;
}
.heatmap-control {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--muted-strong);
}
.heatmap-control-label {
  font: 600 10px/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
}
.heatmap-control select {
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--r-2);
  padding: 6px 10px;
  font: inherit;
}
.heatmap-live-toggle {
  cursor: pointer;
  user-select: none;
}
.heatmap-live-toggle input { accent-color: var(--accent); }
.heatmap-live-state {
  font: 600 10px/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  margin-left: auto;
}
.heatmap-live-state.is-live { color: var(--accent); }
.heatmap-live-state.is-error { color: var(--neg); }

.heatmap-zoom { gap: 4px; }
.heatmap-zoom-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 26px;
  padding: 0 8px;
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--r-2);
  font: 700 13px/1 var(--font-mono);
  cursor: pointer;
}
.heatmap-zoom-btn:hover:not(:disabled) { border-color: var(--accent); }
.heatmap-zoom-btn:disabled { opacity: 0.4; cursor: default; }
.heatmap-zoom-reset { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
.heatmap-zoom-level {
  min-width: 40px;
  text-align: center;
  font: 600 12px/1 var(--font-mono);
  color: var(--muted-strong);
}

.heatmap-search-input {
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--r-2);
  padding: 6px 10px;
  font: inherit;
  width: 120px;
  min-width: 90px;
}
.heatmap-search-input:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
}

/* Advancers / decliners ribbon between the controls and the map. */
/* Sector-rotation notification banner — persistent ≥70% one-way breadth. */
.heatmap-rotation {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin: 0 0 12px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 7%, var(--surface-2));
}
.heatmap-rotation[hidden] { display: none; }
.heatmap-rotation-head {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex: 0 0 auto;
}
.heatmap-rotation-icon { font-size: 0.95rem; }
.heatmap-rotation-title {
  font: 700 0.82rem/1 var(--font-sans);
  color: var(--text-strong);
  letter-spacing: 0.01em;
}
.heatmap-rotation-sub {
  font: 500 0.7rem/1 var(--font-mono);
  color: var(--muted);
}
.heatmap-rotation-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex: 1 1 auto;
}
.heatmap-rotation-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  font: 600 0.74rem/1 var(--font-mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  cursor: default;
}
.heatmap-rotation-chip.is-green {
  border-color: color-mix(in srgb, var(--up) 45%, var(--border));
  background: color-mix(in srgb, var(--up) 12%, var(--surface-2));
}
.heatmap-rotation-chip.is-red {
  border-color: color-mix(in srgb, var(--dn) 45%, var(--border));
  background: color-mix(in srgb, var(--dn) 12%, var(--surface-2));
}
.heatmap-rotation-chip.is-green .heatmap-rotation-arrow { color: var(--up); }
.heatmap-rotation-chip.is-red .heatmap-rotation-arrow { color: var(--dn); }
.heatmap-rotation-sector { color: var(--text-strong); font-weight: 700; }
.heatmap-rotation-detail { color: var(--muted-strong); }

.heatmap-breadth {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin: 0 0 10px;
}
.heatmap-breadth:empty { display: none; }
.heatmap-breadth-bar {
  display: flex;
  flex: 1 1 220px;
  height: 8px;
  min-width: 180px;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface-2);
}
.heatmap-breadth-seg { height: 100%; display: block; }
.heatmap-breadth-seg.pos { background: var(--pos); }
.heatmap-breadth-seg.neg { background: var(--neg); }
.heatmap-breadth-seg.flat { background: var(--surface-3); }
.heatmap-breadth-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  font: 600 0.72rem/1 var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--muted-strong);
}
.heatmap-breadth-stat.pos { color: var(--pos); }
.heatmap-breadth-stat.neg { color: var(--neg); }
.heatmap-breadth-stat.flat { color: var(--muted); }
.heatmap-breadth-stat.zero { color: var(--muted); }

.heatmap-root {
  position: relative;
  width: 100%;
  height: 78vh;
  min-height: 520px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-2);
  overflow: hidden;
}
.heatmap-root.is-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 0.85rem;
  padding: var(--s-3);
  text-align: center;
}
/* Zoom/pan target. Sized to zoom*100% of the root (so tiles laid out as % of
   the canvas grow with zoom) and offset by a translate for panning — both set
   inline by applyHeatmapView(). Not CSS-scaled, so text stays crisp. */
.heatmap-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  will-change: transform;
}
.heatmap-root.is-zoomed { cursor: grab; }
.heatmap-root.is-panning { cursor: grabbing; }
.heatmap-root.is-panning .heatmap-canvas { transition: none; }

.heatmap-sector {
  position: absolute;
  left: calc(var(--x, 0) * 1%);
  top: calc(var(--y, 0) * 1%);
  width: calc(var(--w, 0) * 1%);
  height: calc(var(--h, 0) * 1%);
  border: 1px solid var(--surface-3);
  background: var(--surface);
  box-sizing: border-box;
}
.heatmap-sector-label {
  position: absolute;
  top: 1px;
  left: 4px;
  right: 4px;
  font: 600 11px/1.2 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted-strong);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}

.heatmap-tile {
  position: absolute;
  left: calc(var(--x, 0) * 1%);
  top: calc(var(--y, 0) * 1%);
  width: calc(var(--w, 0) * 1%);
  height: calc(var(--h, 0) * 1%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding: 2px;
  border: 1px solid rgba(0, 0, 0, 0.35);
  background: var(--hm-bg, var(--surface-2));
  color: var(--hm-fg, #fff);
  font: 700 13px/1 var(--font-mono);
  letter-spacing: .02em;
  cursor: pointer;
  overflow: hidden;
  box-sizing: border-box;
  transition: filter 120ms ease, transform 120ms ease;
}
.heatmap-tile:hover {
  filter: brightness(1.12);
  z-index: 2;
}
.heatmap-tile:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  z-index: 3;
}
.heatmap-tile-sym {
  font: 700 var(--hm-sym-size, 14px)/1 var(--font-mono);
  letter-spacing: .02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.heatmap-tile-pct {
  font: 500 var(--hm-pct-size, 11px)/1 var(--font-mono);
  font-variant-numeric: tabular-nums;
  opacity: .92;
  white-space: nowrap;
  overflow: hidden;
}
/* Hide the % line on tiny tiles where it'd just be visual noise. */
.heatmap-tile.is-tiny .heatmap-tile-pct { display: none; }
.heatmap-tile.is-tiny .heatmap-tile-sym { font-size: 11px; }
/* Micro tiles are too small (<16px tall or <22px wide) to render any text
   legibly — a 10px symbol in a 6px box just looks like a graphical glitch.
   Drop to a bare colored square. */
.heatmap-tile.is-micro .heatmap-tile-sym,
.heatmap-tile.is-micro .heatmap-tile-pct { display: none; }
.heatmap-tile.is-micro { padding: 0; }

/* Divergent red → gray → green color scale. The renderer sets --hm-c on
   each tile (0 = -3% or worse, 0.5 = flat, 1 = +3% or better). We use
   color-mix to blend toward the surface color at the midpoint so flat
   tickers stay readable against the dark canvas instead of going neon. */
.heatmap-tile {
  --hm-neg: var(--neg);
  --hm-pos: var(--pos);
  --hm-neutral: var(--surface-3);
}
.heatmap-tile[data-dir="neg"] {
  background: color-mix(in srgb, var(--hm-neg) calc(var(--hm-intensity, 0) * 100%), var(--hm-neutral));
}
.heatmap-tile[data-dir="pos"] {
  background: color-mix(in srgb, var(--hm-pos) calc(var(--hm-intensity, 0) * 100%), var(--hm-neutral));
}
.heatmap-tile[data-dir="zero"] { background: var(--hm-neutral); }

.heatmap-tile.is-live-up { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 55%, transparent); }
.heatmap-tile.is-live-down { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--neg) 55%, transparent); }

/* "Hot" corner dot for heavy-volume names in performance mode. Redundant in
   rvol mode (the whole tile already encodes volume) so it's hidden there, and
   on micro tiles where there's no room. */
.heatmap-tile.is-hot::after {
  content: "";
  position: absolute;
  top: 3px;
  right: 3px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #ffd24a;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45);
  pointer-events: none;
}
.heatmap-root.hm-mode-rvol .heatmap-tile.is-hot::after,
.heatmap-tile.is-micro.is-hot::after { display: none; }

/* Stale tile — the hourly refresh couldn't get a fresh quote, so the % shown
   is the last good print. Dim it and hatch faintly so it doesn't read as
   current. */
.heatmap-tile.is-stale {
  opacity: 0.5;
  background-image: repeating-linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.07) 0,
    rgba(255, 255, 255, 0.07) 2px,
    transparent 2px,
    transparent 6px
  );
}

/* Search highlight — dim everything, pop the matches. */
.heatmap-root.is-searching .heatmap-tile { opacity: 0.22; }
.heatmap-root.is-searching .heatmap-tile.is-search-hit {
  opacity: 1;
  z-index: 4;
  box-shadow: 0 0 0 2px var(--accent), 0 0 14px 2px color-mix(in srgb, var(--accent) 55%, transparent);
}
.heatmap-root.is-searching .heatmap-tile.is-stale.is-search-hit { opacity: 1; }

.heatmap-legend {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  font: 600 10px/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
}
.heatmap-legend-bar {
  flex: 0 0 220px;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(to right, var(--neg) 0%, var(--surface-3) 50%, var(--pos) 100%);
  border: 1px solid var(--border);
}
.heatmap-legend-label {
  font-variant-numeric: tabular-nums;
}
.heatmap-legend-note {
  flex-basis: 100%;
  margin-top: 2px;
  font: 500 0.68rem/1.3 var(--font-sans);
  text-transform: none;
  letter-spacing: 0;
  color: var(--muted);
}

/* Floating tooltip — positioned via JS using --tip-x / --tip-y (px). */
.heatmap-tooltip {
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(var(--tip-x, 0), var(--tip-y, 0));
  pointer-events: none;
  background: var(--surface-3);
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-2);
  padding: 8px 10px;
  font-size: 0.8rem;
  line-height: 1.35;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  z-index: 10;
  max-width: 240px;
}
.heatmap-tooltip[hidden] { display: none; }
.heatmap-tooltip-head {
  font: 700 13px/1.2 var(--font-mono);
  color: var(--text-strong);
  letter-spacing: .02em;
  margin-bottom: 2px;
}
.heatmap-tooltip-name {
  color: var(--muted-strong);
  font-size: 0.74rem;
  margin-bottom: 6px;
}
.heatmap-tooltip-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.heatmap-tooltip-row span:first-child { color: var(--muted); }
.heatmap-tooltip-row span:last-child {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.heatmap-tooltip-pct-pos { color: var(--pos); }
.heatmap-tooltip-pct-neg { color: var(--neg); }
.heatmap-tooltip-rv-hot { color: #ffd24a; }
.heatmap-tooltip-stale {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--border);
  font: 600 0.68rem/1.3 var(--font-mono);
  color: var(--warn, #e0a44a);
}

/* ---------------- EOD recap (heatmap) -----------------------------------
   Painted below the legend once scripts/refresh-heatmap.mjs has stamped an
   eodSummary onto data/heatmap.json. Headline up top, per-sector cards in
   a responsive grid below. Leader / laggard chips reuse the tickers tab's
   navigation handler. */
.heatmap-eod-summary {
  margin-top: 16px;
  border-top: 1px solid var(--border);
  padding-top: 16px;
}
.heatmap-eod-summary[hidden] { display: none; }
.heatmap-eod-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-2);
  margin-bottom: 6px;
}
.heatmap-eod-titles {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  margin-right: auto;
}
.heatmap-eod-title {
  margin: 0;
  font: 700 0.95rem/1.2 var(--font-sans);
  color: var(--text-strong);
  letter-spacing: .01em;
}
.heatmap-eod-stamp {
  font: 600 10px/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
}
.heatmap-eod-tape {
  font: 600 0.75rem/1.2 var(--font-mono);
  color: var(--muted-strong);
}
.heatmap-eod-pos { color: var(--pos); }
.heatmap-eod-neg { color: var(--neg); }
.heatmap-eod-flat { color: var(--muted); }
.heatmap-eod-headline {
  margin: 4px 0 14px;
  font: 600 0.95rem/1.4 var(--font-sans);
  color: var(--text);
}
.heatmap-eod-sectors {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--s-3);
}
.heatmap-eod-sector {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-2);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-left-width: 3px;
}
.heatmap-eod-sector[data-dir="pos"] { border-left-color: var(--pos); }
.heatmap-eod-sector[data-dir="neg"] { border-left-color: var(--neg); }
.heatmap-eod-sector[data-dir="zero"] { border-left-color: var(--border-strong); }
.heatmap-eod-sector-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}
.heatmap-eod-sector-name {
  margin: 0;
  font: 700 0.85rem/1.2 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-strong);
}
.heatmap-eod-sector-avg {
  font: 700 0.85rem/1 var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.heatmap-eod-sector-avg.pos { color: var(--pos); }
.heatmap-eod-sector-avg.neg { color: var(--neg); }
.heatmap-eod-sector-avg.zero { color: var(--muted); }
.heatmap-eod-sector-text {
  margin: 0;
  font: 400 0.85rem/1.5 var(--font-sans);
  color: var(--text);
}
.heatmap-eod-movers {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.heatmap-eod-movers-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.heatmap-eod-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px 8px;
  font: 600 0.7rem/1 var(--font-mono);
  color: var(--text);
  cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.heatmap-eod-chip:hover {
  border-color: var(--border-strong);
  background: var(--surface-3);
}
.heatmap-eod-chip.pos { color: var(--pos); }
.heatmap-eod-chip.neg { color: var(--neg); }
.heatmap-eod-chip span {
  color: var(--muted);
  font-weight: 500;
}
.heatmap-eod-chip.pos span { color: color-mix(in srgb, var(--pos) 80%, var(--text)); }
.heatmap-eod-chip.neg span { color: color-mix(in srgb, var(--neg) 80%, var(--text)); }

/* ── Market brief tab ─────────────────────────────────────────────────── */
.brief-root { display: flex; flex-direction: column; gap: var(--s-3); }
.brief-empty {
  margin: 8px 0;
  font: 400 0.9rem/1.5 var(--font-sans);
  color: var(--muted);
}
.brief-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-3);
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  border-left-width: 3px;
  border-left-color: var(--border-strong);
}
.brief-card[data-kind="morning"] { border-left-color: var(--accent); }
.brief-card[data-kind="intraday"] { border-left-color: var(--info); }
.brief-card[data-kind="afternoon"] { border-left-color: var(--pos); }
.brief-card-head { display: flex; flex-direction: column; gap: 6px; }
.brief-card-titles { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.brief-kind {
  font: 700 10px/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: 3px 7px;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  color: var(--muted-strong);
}
.brief-kind-morning { color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.brief-kind-intraday { color: var(--info); background: color-mix(in srgb, var(--info) 14%, transparent); }
.brief-kind-afternoon { color: var(--pos); background: color-mix(in srgb, var(--pos) 14%, transparent); }
.brief-date { font: 600 0.72rem/1 var(--font-mono); color: var(--muted-strong); }
.brief-stamp { font: 600 10px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.brief-headline { margin: 2px 0 0; font: 700 1.4rem/1.3 var(--font-serif); letter-spacing: -0.02em; color: var(--text-strong); }
.brief-summary { margin: 0; font: 400 1rem/1.7 var(--font-sans); color: var(--text); max-width: 76ch; }
.brief-stats { display: flex; flex-wrap: wrap; gap: 6px; }
.brief-stat {
  display: inline-flex; flex-direction: column; gap: 2px;
  padding: 6px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-1);
}
.brief-stat-label { font: 600 9px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.brief-stat-val { font: 700 0.8rem/1.1 var(--font-mono); color: var(--text-strong); font-variant-numeric: tabular-nums; }
.brief-stat-val .pos { color: var(--pos); }
.brief-stat-val .neg { color: var(--neg); }
.brief-stat-chg { color: var(--muted); font-weight: 500; }
.brief-highlights { margin: 2px 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 9px; }
.brief-hl {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px;
  font: 400 0.95rem/1.6 var(--font-sans); color: var(--text);
  padding-left: 12px;
  border-left: 2px solid color-mix(in srgb, var(--accent) 45%, var(--border));
}
.brief-hl-label {
  flex: none;
  font: 700 0.66rem/1.3 var(--font-mono);
  text-transform: uppercase; letter-spacing: .04em;
  color: var(--accent);
  min-width: 84px;
}
.brief-hl-text { flex: 1 1 200px; }
/* Detailed data blocks, grouped below the story behind a rule so the prose
   (headline / summary / takeaways) reads first. */
.brief-blocks {
  display: flex; flex-direction: column; gap: var(--s-4);
  margin-top: 2px; padding-top: 14px;
  border-top: 1px solid var(--border);
}
.brief-block { display: flex; flex-direction: column; gap: 8px; }
.brief-block-title {
  margin: 0; font: 700 0.72rem/1.2 var(--font-mono);
  text-transform: uppercase; letter-spacing: .07em; color: var(--muted-strong);
  padding-bottom: 5px; border-bottom: 1px solid var(--hairline);
}
.brief-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.brief-chip {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-pill); padding: 3px 9px;
  font: 600 0.72rem/1 var(--font-mono); color: var(--text);
  cursor: pointer; font-variant-numeric: tabular-nums;
}
button.brief-chip:hover { border-color: var(--border-strong); background: var(--surface-3); }
.brief-chip span { color: var(--muted); font-weight: 500; }
.brief-chip.pos { color: var(--pos); }
.brief-chip.neg { color: var(--neg); }
.brief-chip.pos span { color: color-mix(in srgb, var(--pos) 80%, var(--text)); }
.brief-chip.neg span { color: color-mix(in srgb, var(--neg) 80%, var(--text)); }
.brief-chip.foreign, .brief-chip.info, span.brief-chip { cursor: default; }
.brief-chip.flow span, .brief-chip.pick span { text-transform: uppercase; letter-spacing: .03em; color: var(--accent); }
.brief-analog {
  display: flex; flex-direction: column; gap: 7px;
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
  border-radius: var(--r-1);
  padding: 10px 12px;
}
.brief-analog-head { font: 700 0.82rem/1.3 var(--font-sans); color: var(--accent); }
.brief-analog-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; font: 400 0.84rem/1.5 var(--font-sans); color: var(--text); }
.brief-analog-k {
  flex: none;
  font: 700 0.62rem/1.4 var(--font-mono);
  text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted-strong);
  min-width: 96px;
}
.brief-analog-v { flex: 1 1 220px; }
.brief-events { display: flex; flex-wrap: wrap; gap: 5px; }
.brief-event {
  display: inline-flex; align-items: baseline; gap: 6px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-1); padding: 4px 9px;
}
.brief-event-label { font: 600 0.72rem/1.2 var(--font-sans); color: var(--text); }
.brief-event-detail { font: 600 0.66rem/1 var(--font-mono); color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.brief-hlines { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.brief-hline {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-2); padding: 6px 10px;
}
.brief-hline-title { font: 500 0.8rem/1.4 var(--font-sans); color: var(--text); flex: 1 1 240px; }
/* Tape headlines link to their source article when the feed gave us a permalink. */
a.brief-hline-title { text-decoration: none; transition: color .12s var(--ease-out); }
a.brief-hline-title:hover { color: var(--accent-strong); text-decoration: underline; text-underline-offset: 2px; }
a.brief-hline-title:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
.brief-hline-ext { margin-left: 4px; font-size: 10px; color: var(--muted); }
a.brief-hline-title:hover .brief-hline-ext { color: var(--accent-strong); }
.brief-hline-meta { font: 600 0.62rem/1.2 var(--font-mono); color: var(--muted); text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }

@media (max-width: 640px) {
  .heatmap-root {
    height: 60vh;
    min-height: 380px;
  }
  .heatmap-legend-bar { flex-basis: 140px; }
  .heatmap-eod-sectors { grid-template-columns: 1fr; }
  /* Thumb-sized zoom controls — 26px buttons are fiddly on touch. */
  .heatmap-zoom-btn { min-width: 34px; height: 34px; }
  .heatmap-controls { gap: var(--s-2); }
}

/* ---- Gamma OI tab --------------------------------------------------- */
.oi-card { padding: var(--s-4); }
.oi-card-header { align-items: center; }
.oi-collapse-btn {
  background: none;
  border: none;
  color: inherit;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  cursor: pointer;
  padding: 0;
}
.oi-collapse-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-2); }
.oi-collapse-btn[aria-expanded="false"] .oi-chevron { transform: rotate(-90deg); }
.oi-chevron { transition: transform var(--xt); color: var(--text-2); }
.oi-card .oi-body[hidden] { display: none; }

.oi-controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  align-items: center;
  margin-bottom: var(--s-3);
}
.oi-search {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  color: var(--text-2);
  min-width: 240px;
}
.oi-search:focus-within {
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
}
.oi-search input {
  background: transparent;
  border: none;
  outline: none;
  color: var(--text);
  flex: 1;
  font: inherit;
  min-width: 0;
}
.oi-search-clear {
  background: none;
  border: none;
  color: var(--text-2);
  cursor: pointer;
  padding: 0 var(--s-1);
  font-size: 1.1em;
  line-height: 1;
}
.oi-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  color: var(--text-2);
  cursor: pointer;
}
.oi-sort {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  color: var(--text-2);
}
.oi-sort-label { font-size: 0.9em; }
.oi-sort select {
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  padding: var(--s-2) var(--s-3);
  font: inherit;
}
.oi-action-btn {
  background: var(--surface-2);
  color: var(--text-2);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  padding: var(--s-2) var(--s-3);
  font: inherit;
  cursor: pointer;
  transition: background-color var(--xt), color var(--xt);
}
.oi-action-btn:hover { color: var(--text); }
.oi-action-btn[aria-pressed="true"] {
  background: var(--accent);
  color: var(--accent-on);
  border-color: transparent;
}

.oi-list {
  display: grid;
  gap: var(--s-3);
}
.oi-row {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--s-3) var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.oi-row:hover {
  background: color-mix(in srgb, var(--accent) 3%, var(--surface-2));
  border-color: var(--border-strong);
}
.oi-row.is-flagged {
  border-color: color-mix(in srgb, var(--accent) 50%, transparent);
  background: color-mix(in srgb, var(--accent) 5%, var(--surface-2));
}
.oi-row.is-collapsed { padding-bottom: var(--s-3); }
.oi-row-head {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
  background: none;
  border: none;
  color: inherit;
  padding: 0;
  cursor: pointer;
  text-align: left;
  width: 100%;
}
.oi-row-head:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-2); }
.oi-row-chevron { transition: transform var(--xt); color: var(--text-2); flex-shrink: 0; }
.oi-row-head[aria-expanded="false"] .oi-row-chevron { transform: rotate(-90deg); }

.oi-symbol {
  font-weight: 600;
  font-size: 1.05em;
  letter-spacing: 0.02em;
  color: var(--text);
}
.oi-spot {
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}
.oi-summary-bits {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-left: auto;
  color: var(--text-2);
  font-size: 0.9em;
}
.oi-wall, .oi-cp {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--s-2);
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  background: var(--surface-3);
  font-variant-numeric: tabular-nums;
}
.oi-wall-call {
  color: var(--up);
  border-color: color-mix(in srgb, var(--up) 35%, transparent);
}
.oi-wall-put {
  color: var(--dn);
  border-color: color-mix(in srgb, var(--dn) 35%, transparent);
}

.oi-score {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--s-2);
  border-radius: var(--r-pill);
  font-weight: 600;
  font-size: 0.88em;
  letter-spacing: 0.02em;
  border: 1px solid var(--border);
  background: var(--surface-3);
  color: var(--text-2);
}
.oi-score.tier-1 { color: var(--text-3); }
.oi-score.tier-2 { color: var(--text-2); }
.oi-score.tier-3 {
  background: color-mix(in srgb, var(--accent) 8%, var(--surface-3));
  color: var(--text);
  border-color: color-mix(in srgb, var(--accent) 25%, transparent);
}
.oi-score.tier-4 {
  background: color-mix(in srgb, var(--accent) 22%, var(--surface-2));
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
}
.oi-score.tier-5 {
  background: color-mix(in srgb, var(--up) 22%, var(--surface-2));
  color: var(--up);
  border-color: color-mix(in srgb, var(--up) 55%, transparent);
}
.oi-score.is-flagged {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent);
}

.oi-body-row { display: flex; flex-direction: column; gap: var(--s-3); }
.oi-body-row[hidden] { display: none; }

.oi-reasons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}
.oi-reason {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px var(--s-2);
  border-radius: var(--r-pill);
  font-size: 0.85em;
  background: color-mix(in srgb, var(--accent) 10%, var(--surface-3));
  color: var(--text);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}
.oi-reason-tick { color: var(--up); font-weight: 700; }

/* Options ladder — two columns, calls left + puts right. Each "rung" is
   one strike. Rungs are pre-sorted closest-to-spot first by the JS, so
   visually the top of each column is ATM and the bottom is the most
   distant. Bar widths share a scale across both sides so a tall call
   wall really does look taller than a smaller put wall. */
.oi-ladder {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3);
}
.oi-ladder-col {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--s-3);
  min-width: 0;
}
.oi-ladder-calls {
  border-color: color-mix(in srgb, var(--up) 28%, var(--border));
  background: color-mix(in srgb, var(--up) 3%, var(--surface));
}
.oi-ladder-puts {
  border-color: color-mix(in srgb, var(--dn) 28%, var(--border));
  background: color-mix(in srgb, var(--dn) 3%, var(--surface));
}
.oi-ladder-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-2);
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--border);
}
.oi-ladder-side {
  font-weight: 700;
  letter-spacing: 0.08em;
  font-size: 0.78em;
  text-transform: uppercase;
}
.oi-ladder-calls .oi-ladder-side { color: var(--up); }
.oi-ladder-puts .oi-ladder-side { color: var(--dn); }
.oi-ladder-count {
  color: var(--text-3);
  font-size: 0.78em;
  letter-spacing: 0.04em;
}
.oi-ladder-empty {
  color: var(--text-3);
  font-style: italic;
  font-size: 0.88em;
  padding: var(--s-3) 0;
  text-align: center;
}
.oi-ladder-rungs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.oi-rung {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--s-2);
  border-radius: var(--r-2);
  background: var(--surface-2);
  border: 1px solid transparent;
  font-variant-numeric: tabular-nums;
  transition: border-color var(--xt), background-color var(--xt);
}
.oi-rung:hover {
  background: color-mix(in srgb, var(--accent) 4%, var(--surface-2));
}
.oi-rung.is-wall.is-call {
  border-color: color-mix(in srgb, var(--up) 45%, transparent);
  background: color-mix(in srgb, var(--up) 8%, var(--surface-2));
}
.oi-rung.is-wall.is-put {
  border-color: color-mix(in srgb, var(--dn) 45%, transparent);
  background: color-mix(in srgb, var(--dn) 8%, var(--surface-2));
}
.oi-rung-head {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  flex-wrap: wrap;
}
.oi-rung-strike {
  font-weight: 600;
  font-size: 1em;
  color: var(--text);
}
.oi-rung-spot {
  font-size: 0.8em;
  color: var(--text-3);
}
.oi-rung-spot.is-atm { color: var(--accent); font-weight: 500; }
.oi-rung-spot.is-itm { color: var(--text-2); }
.oi-rung-wall {
  font-size: 0.66em;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 1px 5px;
  border-radius: var(--r-pill);
  border: 1px solid currentColor;
}
.oi-rung-wall.is-call { color: var(--up); }
.oi-rung-wall.is-put { color: var(--dn); }
.oi-rung-oi {
  margin-left: auto;
  color: var(--text-2);
  font-size: 0.85em;
}
.oi-rung-oi b { color: var(--text); font-weight: 600; }
.oi-rung-bar {
  position: relative;
  height: 6px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--text-3) 14%, transparent);
  overflow: hidden;
}
.oi-rung-bar-fill {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: inherit;
  background: linear-gradient(90deg,
    color-mix(in srgb, currentColor 60%, transparent),
    currentColor);
  transition: width var(--xt);
}
.oi-rung.is-call .oi-rung-bar-fill { color: var(--up); }
.oi-rung.is-put  .oi-rung-bar-fill { color: var(--dn); }
.oi-rung-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  color: var(--text-3);
  font-size: 0.8em;
}
.oi-rung-delta.is-up { color: var(--up); }
.oi-rung-delta.is-dn { color: var(--dn); }
.oi-rung-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.oi-chip {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  border-radius: var(--r-pill);
  font-size: 0.78em;
  font-weight: 500;
  border: 1px solid var(--border);
  background: var(--surface-3);
  color: var(--text-2);
}
.oi-chip-big {
  color: var(--text);
  border-color: var(--border-strong);
}
.oi-chip-delta30 {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  background: color-mix(in srgb, var(--accent) 12%, var(--surface-3));
}
.oi-chip-delta100 {
  color: var(--up);
  border-color: color-mix(in srgb, var(--up) 55%, transparent);
  background: color-mix(in srgb, var(--up) 18%, var(--surface-3));
}
.oi-chip-volhot {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  background: color-mix(in srgb, var(--accent) 15%, var(--surface-3));
}

.oi-empty {
  padding: var(--s-4);
  color: var(--text-3);
  text-align: center;
  font-style: italic;
}

@media (max-width: 720px) {
  .oi-ladder { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  /* Controls: full-width search on its own row (same treatment as the
     Volume tab), tighter toolbar gaps. */
  .oi-controls { gap: var(--s-2); }
  .oi-search { flex: 1 1 100%; min-width: 0; }
  .oi-row-head { gap: var(--s-2); }
  .oi-summary-bits { margin-left: 0; width: 100%; }
  .oi-symbol { font-size: 1em; }
  .oi-ladder-col { padding: var(--s-2); }
  .oi-rung { padding: var(--s-2); }
  .oi-rung-head { gap: var(--s-1); }
  .oi-rung-meta { font-size: 0.78em; }
  .oi-rung-strike { font-size: 0.95em; }
}

/* ===================================================================
   Gamma exposure (GEX) heatmap — per-ticker strike × expiration grid
   computed client-side (see computeGex/renderGex in app-js).
   =================================================================== */
.gex-card { padding: var(--s-4); margin-bottom: var(--s-4); }
.gex-card .gex-key-pos { color: var(--up); font-weight: 500; }
.gex-card .gex-key-neg { color: var(--dn); font-weight: 500; }
.gex-controls {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s-3);
  margin-bottom: var(--s-4);
}
.gex-control { display: flex; flex-direction: column; gap: var(--s-1); }
.gex-control-label { font-size: 0.78em; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.04em; }
.gex-control select {
  appearance: none; background: var(--surface-2); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--r-2);
  padding: var(--s-2) var(--s-3); font: inherit; min-width: 130px; cursor: pointer;
}
.gex-control select:focus-visible { outline: none; box-shadow: var(--focus-ring); }
/* Searchable ticker combobox (replaces the old <select>). Reuses the shared
   .combo styling; just size it to sit inline with the other GEX controls. */
.gex-control-ticker { flex: 0 1 280px; min-width: 200px; }
.gex-combo { flex: none; width: 100%; min-width: 0; }
.gex-combo input { height: auto; padding-top: var(--s-2); padding-bottom: var(--s-2); }
.gex-action-btn {
  background: var(--surface-2); color: var(--text-2); border: 1px solid var(--border);
  border-radius: var(--r-2); padding: var(--s-2) var(--s-3); font: inherit; cursor: pointer;
  transition: color var(--xt), border-color var(--xt);
}
.gex-action-btn:hover { color: var(--text); border-color: var(--border-strong); }
.gex-action-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.gex-summary { display: flex; flex-direction: column; gap: var(--s-3); margin-bottom: var(--s-4); }
/* Verdict badges — the one-second read (Lean / Regime / Volatility / Positioning). */
.gex-verdict { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.gex-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; border-radius: var(--r-pill);
  border: 1px solid var(--border); background: var(--surface-2);
  font-size: var(--fs-sm);
}
.gex-badge-k { font-size: 0.72em; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.05em; }
.gex-badge-v { font-weight: 600; color: var(--text-strong); font-variant-numeric: tabular-nums; }
.gex-badge-sub { font-weight: 500; color: var(--text-3); font-size: 0.88em; }
.gex-badge.is-pos { border-color: color-mix(in srgb, var(--up) 45%, var(--border)); background: color-mix(in srgb, var(--up) 8%, var(--surface-2)); }
.gex-badge.is-pos .gex-badge-v { color: var(--up); }
.gex-badge.is-neg { border-color: color-mix(in srgb, var(--dn) 45%, var(--border)); background: color-mix(in srgb, var(--dn) 8%, var(--surface-2)); }
.gex-badge.is-neg .gex-badge-v { color: var(--dn); }
.gex-metrics { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.gex-metric {
  flex: 1 1 150px; min-width: 130px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r-3); padding: var(--s-3);
  display: flex; flex-direction: column; gap: 2px;
}
.gex-metric-label { font-size: 0.72em; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.05em; }
.gex-metric-val { font-size: 1.25em; font-weight: 600; color: var(--text-strong); font-variant-numeric: tabular-nums; }
.gex-metric-sub { font-size: 0.78em; color: var(--text-3); }
.gex-metric.is-pos .gex-metric-val { color: var(--up); }
.gex-metric.is-neg .gex-metric-val { color: var(--dn); }
.gex-spot-chg { font-size: 0.6em; font-weight: 600; vertical-align: middle; }
.gex-spot-chg.is-up { color: var(--up); }
.gex-spot-chg.is-dn { color: var(--dn); }

.gex-keylevels { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.gex-keylevels-label { font-size: 0.72em; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.05em; }
.gex-keychip {
  font-size: 0.82em; font-variant-numeric: tabular-nums;
  padding: 3px var(--s-2); border-radius: var(--r-pill);
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text);
}
.gex-keychip.is-pos { border-color: color-mix(in srgb, var(--pos) 40%, var(--border)); }
.gex-keychip.is-neg { border-color: color-mix(in srgb, var(--neg) 40%, var(--border)); }
.gex-keychip-exp { color: var(--text-3); }

/* Plain-English read of the current dealer-gamma situation (gexNarrative). */
.gex-takeaway {
  margin: 0;
  padding: var(--s-3);
  border: 1px solid var(--border);
  border-left: 3px solid var(--text-3);
  border-radius: var(--r-2);
  background: var(--surface-2);
  color: var(--text-2);
  font-size: var(--fs-sm); line-height: 1.55;
}
.gex-takeaway strong { color: var(--text-strong); font-weight: 600; }
.gex-takeaway.is-pos { border-left-color: var(--up); }
.gex-takeaway.is-neg { border-left-color: var(--dn); }

.gex-grid-wrap {
  overflow: auto; max-height: 70vh;
  border: 1px solid var(--border); border-radius: var(--r-3);
}
.gex-table { border-collapse: separate; border-spacing: 0; width: 100%; font-variant-numeric: tabular-nums; }
.gex-table th, .gex-table td {
  padding: 5px var(--s-2); text-align: center; white-space: nowrap;
  font-size: 0.82em; border-bottom: 1px solid var(--border); border-right: 1px solid var(--border);
}
.gex-th-strike, .gex-th-exp, .gex-th-total {
  position: sticky; top: 0; z-index: 3;
  background: var(--surface-2); color: var(--text-2);
  font-weight: 600; font-size: 0.74em; text-transform: uppercase; letter-spacing: 0.03em;
}
.gex-th-exp { display: table-cell; }
.gex-th-date { display: block; color: var(--text); }
.gex-th-dte { display: block; font-size: 0.85em; color: var(--text-3); font-weight: 400; }
.gex-th-strike { left: 0; z-index: 4; text-align: right; }
.gex-strike {
  position: sticky; left: 0; z-index: 2;
  background: var(--surface-2); color: var(--text-2);
  text-align: right; font-weight: 600;
}
.gex-cell { color: var(--text-strong); font-weight: 500; }
.gex-cell.is-empty { color: var(--text-3); background: transparent; }
.gex-tr:hover .gex-strike { color: var(--text); }
.gex-spot-row .gex-spot-strike {
  background: var(--accent-soft); color: var(--accent-strong); font-weight: 700;
  border-top: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
}
.gex-spot-tag {
  font-size: 0.68em; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--accent); font-weight: 600;
}
.gex-spot-cell { background: color-mix(in srgb, var(--accent) 7%, transparent); border-top: 2px solid var(--accent); border-bottom: 2px solid var(--accent); }

/* Per-strike "Net Σ" aggregate column — the gamma profile beside each strike.
   The diverging bar is drawn as an inline-styled cell background (gexTotalBg);
   these rules just handle the value's color + the empty/zero state. */
.gex-total-cell { font-weight: 600; color: var(--text-strong); }
.gex-total-cell.is-pos { color: var(--accent-strong); }
.gex-total-cell.is-neg { color: var(--neg); }
.gex-total-cell.is-empty { color: var(--text-3); background: transparent; }

/* Call / put wall row markers — a CW/PW tag in the strike cell plus an inset
   accent rail on the sticky strike column. */
.gex-wall-tag {
  display: inline-block; margin-left: 4px; padding: 0 4px; border-radius: var(--r-1);
  font-size: 0.64em; font-weight: 700; letter-spacing: 0.03em; vertical-align: middle;
}
.gex-wall-tag.is-call { color: var(--accent-strong); background: var(--accent-soft); }
.gex-wall-tag.is-put { color: var(--neg); background: color-mix(in srgb, var(--neg) 14%, transparent); }
.gex-tr.is-callwall .gex-strike { box-shadow: inset 3px 0 0 var(--accent); }
.gex-tr.is-putwall .gex-strike { box-shadow: inset 3px 0 0 var(--neg); }

/* Gamma-flip reference line — amber + dashed so it reads distinctly from the
   solid-green spot line (the two often sit close together). */
.gex-flip-row .gex-flip-strike {
  background: var(--warn-soft); color: var(--warn); font-weight: 700;
  border-top: 2px dashed var(--warn); border-bottom: 2px dashed var(--warn);
}
.gex-flip-tag {
  font-size: 0.68em; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--warn); font-weight: 600;
}
.gex-flip-cell { background: var(--warn-tint); border-top: 2px dashed var(--warn); border-bottom: 2px dashed var(--warn); }

.gex-legend { display: flex; align-items: center; gap: var(--s-2); margin-top: var(--s-3); justify-content: center; }
.gex-legend-label { font-size: 0.74em; color: var(--text-3); }
.gex-legend-bar {
  width: 180px; height: 8px; border-radius: var(--r-pill);
  background: linear-gradient(90deg, rgba(255,77,94,0.9), rgba(255,77,94,0.15), var(--surface-2), rgba(22,224,138,0.15), rgba(22,224,138,0.9));
}
.gex-empty { padding: var(--s-4); color: var(--text-3); text-align: center; font-style: italic; }

@media (max-width: 640px) {
  .gex-metric { flex-basis: 120px; min-width: 110px; }
  .gex-metric-val { font-size: 1.1em; }
  .gex-table th, .gex-table td { font-size: 0.76em; padding: 4px 6px; }
}

/* ===================================================================
   Mobile refinements (final pass)
   ===================================================================
   Layered on top of the established mobile blocks higher up in this
   stylesheet (look for the "Tablet & narrow desktop (<=900px)" /
   "Phone (<=640px)" sections starting around line 6694). Those already
   handle the bulk of layout adjustments — padding, table stacking,
   font sizes, input zoom prevention. THIS block only adds the
   refinements those blocks don't cover:

     1. tap-highlight suppression (global, dark-UI cosmetic fix)
     2. hover-state cleanup for touch devices (cards, tiles)
     3. landing-page polish — hero numerals + card padding at <=560px
        (the existing 640px block doesn't reach into .landing-*)
     4. footer + freshness stacking on phones
     5. safe-area-inset handling for notched / rounded-screen phones

   Anything that overlaps with the existing mobile rules — main /
   page-sub / page-tabs / site-header padding, .icon-btn sizing,
   input font-size — is intentionally NOT redefined here so this
   block doesn't undo the existing per-breakpoint gradient.
   ------------------------------------------------------------------- */

/* Suppress the iOS Safari double-tap zoom flash on every interactive
   element. We already handle focus rings via :focus-visible; the
   default grey/blue tap-highlight just looks like a bug on dark UI. */
html { -webkit-tap-highlight-color: transparent; }

/* Rapid taps on small controls (filter chips, segmented toggles, pagination,
   the pin/compare buttons) must register as TAPS, not as a double-tap zoom
   gesture — touch-action: manipulation disables double-tap-to-zoom on the
   control itself while leaving pinch zoom and scrolling untouched. Links are
   included; text content is not, so a reader can still double-tap-zoom prose. */
button, [role="button"], [role="tab"], [role="option"], a, select, label,
input[type="checkbox"], input[type="radio"], summary {
  touch-action: manipulation;
}

/* Flinging a horizontally-scrollable strip to its edge must not chain into
   the browser's edge-swipe (back/forward navigation on iOS/Android) — that
   reads as "the site randomly navigated away". Vertical chaining stays. */
.page-tabs, .narr-tabs {
  overscroll-behavior-x: contain;
}

/* Hover-capable pointers only. Touch devices fire :hover on tap and
   then strand the hovered state until the next tap elsewhere — for
   purely cosmetic hover effects (translate/scale, glow halos, soft
   tint shifts) this reads as a UI bug. The existing @media (hover: none)
   block around line 6684 handles flow-chip / cal-chip / narr-card /
   pf-risk-block. This adds the four heaviest remaining offenders:
   landing-card (transform + glow + arrow slide), pick-card (border
   shift), heatmap-tile (brightness pump), and the cmd-palette
   trigger (background swap). */
@media (hover: none) {
  .landing-card:hover {
    transform: none;
    box-shadow: var(--elev-1);
    border-color: var(--border);
    background: var(--surface);
    background-image: var(--grad-surface);
  }
  .landing-card:hover::before { transform: scaleX(0); }
  .landing-card:hover .landing-card-arrow {
    color: var(--muted);
    transform: translateX(0);
  }
  .pick-card:hover { border-color: var(--border); }
  .heatmap-tile:hover { filter: none; }
  .cmd-palette-trigger:hover {
    color: var(--muted);
    border-color: var(--border);
    background: var(--surface-2);
  }
}

/* === Landing page polish (<=560px) ================================
   The existing 640px block tightens main/header/page-tabs but doesn't
   touch the home-tab landing hero or the section cards, so those still
   render with desktop-scale padding and the ~44px hero numerals can
   wrap mid-digit on a card whose stat is "$200.42". Scale the hero
   typography, tighten card padding, and reduce vertical rhythm so the
   home tab fits in one viewport on a 6.1" phone instead of forcing
   four screenfuls of scroll just to see the section titles. */
@media (max-width: 560px) {
  .landing-hero {
    padding: var(--s-5) var(--s-3) var(--s-4);
    margin-bottom: var(--s-4);
  }
  .landing-hero-title { font-size: var(--fs-xl); }
  .landing-hero-eyebrow { font-size: 11px; margin-bottom: var(--s-2); }
  .landing-section { margin-bottom: var(--s-4); }
  .landing-section-head { padding: 0; }
  .landing-card {
    padding: var(--s-3);
    min-height: 0;
    gap: var(--s-1);
  }
  .landing-card-stat { font-size: 28px; }
  .landing-card-desc {
    font-size: var(--fs-xs);
    padding-top: var(--s-2);
  }
  .landing-card-head { margin-bottom: 0; }

  /* Footer — let the legal links + build timestamp stack so neither
     gets squeezed against the screen edge. The existing footer rule
     uses flex-wrap which still keeps both rows on the same line at
     360–420px widths. */
  .site-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s-3);
    padding: var(--s-4) var(--s-3) var(--s-5);
  }

  /* Picks — at 480px the rank+content already stack via the 860px
     rule. Tighten the inner padding so the card isn't mostly empty
     whitespace at compact widths. */
  .pick-card {
    padding: var(--s-2) var(--s-2) var(--s-3);
    gap: var(--s-2);
  }
  .pick-rank-num { font-size: 20px; }
  .pick-contract { padding: 6px 8px; }
  .pick-tier { padding: 6px 10px; }
}

/* === Body overflow protection =====================================
   Some absolutely-positioned children (tooltips, heatmap tiles using
   percentage transforms, the ambient radial gradient on body) can
   briefly extend a pixel or two past the viewport edge and trigger a
   horizontal scrollbar. overflow-x: clip is the modern way to silently
   crop without creating a scroll container, which would break
   position: sticky on the header. (Safari 16+, all other evergreen.) */
@media (max-width: 560px) {
  html, body { overflow-x: clip; }
}

/* === Compact phones (<=380px) =====================================
   iPhone SE / mini territory. The existing 400px block tightens
   tickers-grid and per-card padding, but the page chrome (freshness
   timestamp, header nav cluster, footer) still tries to lay out on
   one line and clips. Force column stacking on those three rows. */
@media (max-width: 380px) {
  .freshness { flex-direction: column; align-items: flex-start; }
  .site-nav { gap: 4px; }
  .cmd-palette-trigger { padding: 8px; min-width: 36px; }
  .site-footer { font-size: 11px; gap: var(--s-2); }
}

/* === Safe-area handling for notched / rounded phones ==============
   The header is sticky and the footer is flush to the bottom; both
   need to respect env(safe-area-inset-*) so content doesn't bleed
   under the iOS home-indicator pill or the iPhone notch when the
   browser chrome auto-hides on scroll. Using max() preserves the
   existing per-breakpoint horizontal padding when the inset is 0
   (rectangular screens / Android) and only adds extra padding when
   the inset is non-zero (iPhone X+ / Pixel XL+). */
@supports (padding: max(0px)) {
  .site-header {
    padding-left: max(var(--s-3), env(safe-area-inset-left));
    padding-right: max(var(--s-3), env(safe-area-inset-right));
  }
  main {
    padding-left: max(var(--s-2), env(safe-area-inset-left));
    padding-right: max(var(--s-2), env(safe-area-inset-right));
  }
  .page-tabs {
    padding-left: max(var(--s-2), env(safe-area-inset-left));
    padding-right: max(var(--s-2), env(safe-area-inset-right));
  }
  .site-footer {
    padding-bottom: max(var(--s-5), env(safe-area-inset-bottom));
    padding-left: max(var(--s-3), env(safe-area-inset-left));
    padding-right: max(var(--s-3), env(safe-area-inset-right));
  }
}

/* Overnight markets / correlations tab + Grade-tab peer-read widget. */
.overnight-tone{display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem .8rem;margin:.25rem 0 .85rem;padding:.55rem .85rem;border-radius:10px;border:1px solid var(--border);background:var(--surface-2);}
.overnight-tone.ovn-up{border-color:color-mix(in srgb,var(--pos) 40%,var(--border));background:var(--pos-tint);}
.overnight-tone.ovn-dn{border-color:color-mix(in srgb,var(--neg) 40%,var(--border));background:var(--neg-tint);}
.ovn-tone-label{font-weight:700;text-transform:capitalize;}
.ovn-tone-why{color:var(--muted-strong);font-size:.85em;}
.overnight-broad{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:1rem;}
.ovn-chip{display:inline-flex;align-items:center;gap:.4rem;padding:.22rem .55rem;border-radius:999px;border:1px solid var(--border);background:var(--surface);font-size:.78rem;white-space:nowrap;}
.ovn-chip-name{color:var(--muted-strong);}
.ovn-chip-ch,.ovn-tile-ch,.ovn-w-ch,.ovn-w-imp{font-variant-numeric:tabular-nums;font-weight:600;}
.ovn-region{margin-bottom:1.1rem;}
.ovn-region-title{font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:0 0 .5rem;}
.ovn-region-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:.6rem;}
.ovn-tile{border:1px solid var(--border);border-radius:10px;background:var(--surface-2);padding:.6rem .7rem;display:flex;flex-direction:column;gap:.3rem;}
.ovn-tile.ovn-up{border-left:3px solid var(--pos);}
.ovn-tile.ovn-dn{border-left:3px solid var(--neg);}
.ovn-tile.ovn-flat{border-left:3px solid var(--border-strong);}
.ovn-tile-top{display:flex;justify-content:space-between;align-items:baseline;gap:.5rem;}
.ovn-tile-name{font-weight:600;}
.ovn-tile-lead{font-size:.75rem;color:var(--muted-strong);}
.ovn-tile-flags{display:flex;flex-wrap:wrap;align-items:center;gap:.3rem;font-size:.72rem;color:var(--muted);}
.ovn-tile-flags-lbl{text-transform:uppercase;letter-spacing:.06em;}
.ovn-flag{font:inherit;font-size:.72rem;cursor:pointer;border:1px solid var(--border-strong);background:var(--surface);color:var(--text-2);border-radius:6px;padding:.05rem .35rem;}
.ovn-flag:hover{border-color:var(--accent);color:var(--accent);opacity:1 !important;}
.ovn-flag-r{margin-left:.18rem;font-variant-numeric:tabular-nums;color:var(--muted-strong);}
.ovn-flag-weak{border-style:dashed;}
.ovn-tile-sub{display:flex;align-items:baseline;gap:.5rem;}
.ovn-tile-level{font-variant-numeric:tabular-nums;font-size:.82rem;color:var(--muted-strong);}
.ovn-tile-asof{font-size:.68rem;color:var(--muted);}
.ovn-chip-lvl{font-variant-numeric:tabular-nums;color:var(--text-2);}
.ovn-keylvl-lbl{align-self:center;font-size:.7rem;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);margin-right:.15rem;}
.ovn-tag{font-size:.62rem;text-transform:uppercase;letter-spacing:.04em;padding:.02rem .3rem;border-radius:5px;border:1px solid var(--border-strong);color:var(--muted);vertical-align:middle;white-space:nowrap;}
.overnight-empty{color:var(--muted-strong);}
.ovn-up .ovn-chip-ch,.ovn-up .ovn-tile-ch,.ovn-up .ovn-w-ch,.ovn-w-head.ovn-up b{color:var(--pos);}
.ovn-dn .ovn-chip-ch,.ovn-dn .ovn-tile-ch,.ovn-dn .ovn-w-ch,.ovn-w-head.ovn-dn b{color:var(--neg);}
.ovn-flat .ovn-chip-ch,.ovn-flat .ovn-tile-ch,.ovn-flat .ovn-w-ch{color:var(--muted-strong);}
.ovn-w-imp.ovn-up{color:var(--pos);}
.ovn-w-imp.ovn-dn{color:var(--neg);}
.ovn-w-imp.ovn-flat{color:var(--muted-strong);}
.ovn-widget{margin:.75rem 0;padding:.7rem .85rem;border:1px solid var(--border);border-radius:12px;background:var(--surface-2);}
.ovn-w-title{margin:0 0 .5rem;font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);}
.ovn-w-head{font-size:.95rem;margin-bottom:.5rem;}
.ovn-w-r{color:var(--muted-strong);font-size:.82em;}
.ovn-w-peers{display:flex;flex-direction:column;gap:.25rem;margin-bottom:.55rem;}
.ovn-w-row{display:grid;grid-template-columns:1fr auto auto auto;gap:.5rem;align-items:baseline;font-size:.83rem;padding:.18rem 0;border-bottom:1px solid var(--border);}
.ovn-w-row:last-child{border-bottom:0;}
.ovn-w-peer{color:var(--text-2);}
.ovn-w-stat{color:var(--muted-strong);font-variant-numeric:tabular-nums;}
.ovn-w-imp{text-align:right;}
.ovn-w-broad{display:flex;flex-wrap:wrap;gap:.35rem;align-items:center;}
.ovn-w-nopeer{color:var(--muted-strong);font-size:.8rem;}
.ovn-w-loading{color:var(--muted-strong);font-size:.85rem;}
.ovn-w-weak{opacity:.6;}
.ovn-w-legend{font-size:.72rem;color:var(--muted);margin-bottom:.55rem;line-height:1.35;}
/* Phone: the 4-column peer rows (name + r + beta + implied) get tight at
   390px — shrink the type/gaps and let a long peer name ellipsize instead
   of squeezing the stats columns. */
@media (max-width: 640px){
  .ovn-w-row{grid-template-columns:minmax(0,1fr) auto auto auto;gap:.35rem;font-size:.78rem;}
  .ovn-w-peer{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
}