/* ═══════════════════════════════════════════════════════════════════════════
   CLEARDILIGENCE — SHARED DESIGN SYSTEM
   Canonical tokens reconciled from the handoff shared-design system and the
   original Market / Analyst / Futures screenshots.

   Module identity:
     ANALYST  → neutral / white  (#EDEDED)
     MARKET   → terminal green   (#00C853)
     FUTURES  → institutional amber (#FFB000)

   Rules honored here:
     · dark institutional, terminal-inspired
     · 4px spacing tokens, type capped at --text-xl
     · tabular numerals for all data
     · text scaling with adaptive boxes
     · persistent, visibly-committed button/filter states
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Backgrounds ─────────────────────────────────────────────── */
  --bg-primary:    #0A0A0A;
  --bg-secondary:  #131313;
  --bg-tertiary:   #1C1C1C;
  --bg-hover:      #222222;
  --bg-inset:      #060606;

  /* ── Borders ─────────────────────────────────────────────────── */
  --bd-primary:    #262626;
  --bd-secondary:  #333333;
  --bd-tertiary:   #1C1C1C;
  --bd-strong:     #444444;

  /* ── Text ──────────────────────────────────────────────────────
     Raised for legibility: secondary/tertiary now clear WCAG-AA body
     contrast on #0A0A0A while keeping the terminal hierarchy. --tx-micro
     is decorative (separators/rules) only — never body copy. */
  --tx-primary:    #F2F2F2;   /* headings / key data            ~15.9:1 */
  --tx-secondary:  #ADADAD;   /* body copy / active labels      ~7.0:1  */
  --tx-tertiary:   #838383;   /* de-emphasis, still legible     ~4.6:1  */
  --tx-micro:      #4A4A4A;   /* hairline separators only */

  /* ── Semantic ────────────────────────────────────────────────── */
  --success:       #00C853;   --success-bg: #04211A;   --success-bd: #639922;
  --warning:       #FFB000;   --warning-bg: #3D2600;   --warning-bd: #BA7517;
  --danger:        #FF4444;   --danger-bg:  #4A1B0C;   --danger-bd:  #E24B4A;
  --info:          #8FB3C9;   --info-bg:    #0A1418;

  --pos: var(--success);
  --neg: var(--danger);
  --flat: var(--tx-tertiary);

  /* ── Module accents ──────────────────────────────────────────── */
  --analyst:       #EDEDED;   --analyst-bg: #262626;
  --market:        #00C853;   --market-bg:  #04211A;
  --futures:       #FFB000;   --futures-bg: #3D2600;
  --system:        #5C93D6;   --system-bg:  #0E1E30;   /* steel azure — operating home */
  --edgar:         #9A8CE8;   --edgar-bg:   #1A1433;   /* restrained violet — filings terminal */

  /* Default module accent (overridden per-surface via [data-module]) */
  --accent:    var(--tx-primary);
  --accent-bg: var(--bg-tertiary);

  /* ── Typography ──────────────────────────────────────────────── */
  /* Preferred brand faces first, then robust SYSTEM fallbacks so typography is
     correct with zero network dependency. No external font <link> is used —
     blocked/slow web fonts must never block paint or degrade the type system. */
  --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Code', 'Segoe UI Mono', 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;

  /* Text scaling: --ui-scale is mutated by the A-/A/A+ control (ui.js).
     Every type token derives from it, so the whole UI grows/shrinks in step
     while boxes adapt via clamp()/grid minmax. */
  --ui-scale: 1;
  --text-2xs:  calc(11px * var(--ui-scale));   /* smallest label — still scales with A+/A- */
  --text-xs:   calc(12px * var(--ui-scale));
  --text-sm:   calc(13px * var(--ui-scale));
  --text-base: calc(14px * var(--ui-scale));
  --text-md:   calc(16px * var(--ui-scale));
  --text-lg:   calc(20px * var(--ui-scale));
  --text-xl:   calc(24px * var(--ui-scale));   /* HARD CAP — no heading exceeds this */

  --leading-tight: 1.45;
  --leading-prose: 1.72;

  /* ── Spacing (4px base) ──────────────────────────────────────── */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 20px;  --space-6: 24px;  --space-8: 32px;  --space-10: 40px;
  --space-12: 48px; --space-16: 64px; --space-20: 80px;

  /* ── Radius ──────────────────────────────────────────────────── */
  --r-sm: 2px;  --r-md: 4px;  --r-lg: 6px;

  /* ── Motion (restrained) ─────────────────────────────────────── */
  --dur-fast: .12s;  --dur-med: .2s;
  --ease: cubic-bezier(.2,.6,.2,1);
}

/* Per-surface module theming — set data-module on <body> */
[data-module="analyst"] { --accent: var(--analyst); --accent-bg: var(--analyst-bg); }
[data-module="market"]  { --accent: var(--market);  --accent-bg: var(--market-bg);  }
[data-module="futures"] { --accent: var(--futures); --accent-bg: var(--futures-bg); }
[data-module="system"]  { --accent: var(--system);  --accent-bg: var(--system-bg);  }
[data-module="edgar"]   { --accent: var(--edgar);   --accent-bg: var(--edgar-bg);   }

/* ═══════════════════════════════════════════════════════════════════════════
   RESET / BASE
   ═══════════════════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* Only html is pinned to viewport height. Pinning body too makes a flex-column
   body a fixed-height container, which on a tall page creates negative free
   space that collapses shrinkable children (e.g. the ticker). Pages that want
   a full-height shell use min-height:100vh instead. */
html { height: 100%; }

body {
  font-family: var(--font-sans);
  background: var(--bg-primary);
  color: var(--tx-secondary);
  font-size: var(--text-base);
  line-height: var(--leading-tight);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* All numeric / tabular data uses tabular figures */
.mono, .num, table, .stat-val, .tabular { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--font-mono); }

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

::selection { background: var(--accent-bg); color: var(--tx-primary); }

/* Dark, flush scrollbars */
* { scrollbar-width: thin; scrollbar-color: var(--bd-secondary) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: var(--bd-secondary); border-radius: var(--r-sm); }
*::-webkit-scrollbar-track { background: transparent; }

/* ═══════════════════════════════════════════════════════════════════════════
   TYPE SCALE — capped, uppercase institutional labels
   ═══════════════════════════════════════════════════════════════════════════ */
.eyebrow {
  font-size: var(--text-xs); letter-spacing: .14em; text-transform: uppercase;
  color: var(--tx-tertiary); font-weight: 600;
}
.label {
  font-size: var(--text-xs); letter-spacing: .1em; text-transform: uppercase;
  color: var(--tx-secondary); font-family: var(--font-mono);
}
h1, .h1 { font-size: var(--text-xl); line-height: 1.15; color: var(--tx-primary); font-weight: 600; letter-spacing: -.01em; }
h2, .h2 { font-size: var(--text-lg); line-height: 1.2;  color: var(--tx-primary); font-weight: 600; }
h3, .h3 { font-size: var(--text-md); line-height: 1.3;  color: var(--tx-primary); font-weight: 600; }
.dim  { color: var(--tx-tertiary); }
.hi   { color: var(--tx-primary); }
.accent { color: var(--accent); }
.pos { color: var(--pos); } .neg { color: var(--neg); } .flat { color: var(--flat); }

/* ═══════════════════════════════════════════════════════════════════════════
   LAYOUT PRIMITIVES
   ═══════════════════════════════════════════════════════════════════════════ */
.wrap { width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 var(--space-6); }
.stack   > * + * { margin-top: var(--space-4); }
.stack-2 > * + * { margin-top: var(--space-2); }
.stack-6 > * + * { margin-top: var(--space-6); }
.row { display: flex; align-items: center; gap: var(--space-3); }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.spacer { flex: 1; }

/* Adaptive card grid — boxes reflow instead of overflowing as text scales */
.grid-adaptive {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
  gap: var(--space-3);
}

/* ═══════════════════════════════════════════════════════════════════════════
   PANEL — the core institutional container
   ═══════════════════════════════════════════════════════════════════════════ */
.panel {
  background: var(--bg-secondary);
  border: 1px solid var(--bd-primary);
  border-radius: var(--r-md);
}
.panel-hdr {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--bd-primary);
  font-size: var(--text-xs); letter-spacing: .1em; text-transform: uppercase;
  color: var(--tx-secondary); font-family: var(--font-mono);
}
.panel-hdr .title { color: var(--tx-primary); font-weight: 600; }
.panel-hdr .spacer { flex: 1; }
.panel-body { padding: var(--space-4); }
.panel-body.flush { padding: 0; }

/* ═══════════════════════════════════════════════════════════════════════════
   STAT BOX — KPI-first, adaptive
   ═══════════════════════════════════════════════════════════════════════════ */
.stat {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--bd-primary);
  border-radius: var(--r-md);
  background: var(--bg-secondary);
  min-width: 0;
}
.stat .stat-label {
  font-size: var(--text-xs); letter-spacing: .08em; text-transform: uppercase;
  color: var(--tx-tertiary); font-family: var(--font-mono); margin-bottom: var(--space-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.stat .stat-val {
  font-size: var(--text-lg); color: var(--tx-primary); font-weight: 600;
  font-family: var(--font-mono); line-height: 1;
}
.stat .stat-sub { font-size: var(--text-xs); color: var(--tx-secondary); margin-top: var(--space-1); }
.stat.accent .stat-val { color: var(--accent); }

/* ═══════════════════════════════════════════════════════════════════════════
   BUTTONS + PERSISTENT / SEGMENTED CONTROLS
   The .seg control persists selection via .is-active (set by ui.js and kept
   through re-render); pressing visibly commits (aria-pressed styling).
   ═══════════════════════════════════════════════════════════════════════════ */
.btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: .08em; text-transform: uppercase; font-weight: 600;
  color: var(--tx-secondary);
  background: var(--bg-tertiary);
  border: 1px solid var(--bd-secondary);
  border-radius: var(--r-sm);
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}
.btn:hover { color: var(--tx-primary); border-color: var(--bd-strong); background: var(--bg-hover); }
.btn:active { transform: translateY(.5px); }
.btn-primary {
  color: var(--bg-primary); background: var(--accent); border-color: var(--accent);
}
.btn-primary:hover { color: var(--bg-primary); background: var(--accent); filter: brightness(1.12); }
.btn-ghost { background: transparent; }
.btn:disabled { opacity: .45; pointer-events: none; }

/* Segmented / persistent-state control */
.seg { display: inline-flex; border: 1px solid var(--bd-secondary); border-radius: var(--r-sm); overflow: hidden; }
.seg > button {
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .06em;
  text-transform: uppercase; font-weight: 600;
  color: var(--tx-tertiary); background: transparent; border: none;
  border-right: 1px solid var(--bd-tertiary);
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.seg > button:last-child { border-right: none; }
.seg > button:hover { color: var(--tx-secondary); background: var(--bg-hover); }
.seg > button.is-active {
  color: var(--bg-primary); background: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}
/* Neutral (non-accent) active state, e.g. grid toggles */
.seg.neutral > button.is-active { color: var(--tx-primary); background: var(--bg-tertiary); box-shadow: inset 0 -2px 0 var(--accent); }

/* Chip */
.chip {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .06em;
  color: var(--tx-secondary); background: var(--bg-tertiary);
  border: 1px solid var(--bd-secondary); border-radius: var(--r-sm);
  transition: all var(--dur-fast) var(--ease);
}
.chip:hover { color: var(--accent); border-color: var(--accent); }
.chip.is-active { color: var(--bg-primary); background: var(--accent); border-color: var(--accent); }

/* Status pill */
.pill {
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding: 1px var(--space-2); border-radius: var(--r-sm);
  font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .06em;
  text-transform: uppercase; font-weight: 600; border: 1px solid;
}
.pill.success { color: var(--success); background: var(--success-bg); border-color: var(--success-bd); }
.pill.warning { color: var(--warning); background: var(--warning-bg); border-color: var(--warning-bd); }
.pill.danger  { color: var(--danger);  background: var(--danger-bg);  border-color: var(--danger-bd); }
.pill.info    { color: var(--info);     background: var(--info-bg);    border-color: var(--bd-secondary); }

/* ═══════════════════════════════════════════════════════════════════════════
   TABS (surface nav)
   ═══════════════════════════════════════════════════════════════════════════ */
.tabs { display: flex; align-items: center; gap: var(--space-6); }
.tabs a {
  font-size: var(--text-xs); letter-spacing: .14em; text-transform: uppercase;
  font-weight: 600; color: var(--tx-tertiary); padding: var(--space-2) 0;
  border-bottom: 2px solid transparent; transition: color var(--dur-fast) var(--ease);
}
.tabs a:hover { color: var(--tx-secondary); }
.tabs a.is-active { color: var(--accent); border-bottom-color: var(--accent); }

/* ═══════════════════════════════════════════════════════════════════════════
   TABLE — dense, tabular
   ═══════════════════════════════════════════════════════════════════════════ */
.tbl { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.tbl th {
  text-align: left; padding: var(--space-2) var(--space-3);
  font-size: var(--text-xs); letter-spacing: .08em; text-transform: uppercase;
  color: var(--tx-tertiary); font-family: var(--font-mono); font-weight: 600;
  border-bottom: 1px solid var(--bd-primary); white-space: nowrap;
}
.tbl td {
  padding: var(--space-2) var(--space-3); font-size: var(--text-sm);
  color: var(--tx-secondary); border-bottom: 1px solid var(--bd-tertiary);
}
.tbl td.n, .tbl th.n { text-align: right; font-family: var(--font-mono); }
.tbl tr:hover td { background: var(--bg-secondary); }
.tbl td .hi { color: var(--tx-primary); }

/* Scroll region for wide content — never breaks the page horizontally */
.scroll-x { overflow-x: auto; }

/* ═══════════════════════════════════════════════════════════════════════════
   CHART SCAFFOLD (gridlines, crosshair) — used by Market/Analyst SVG charts
   ═══════════════════════════════════════════════════════════════════════════ */
.chart-grid line { stroke: var(--bd-tertiary); stroke-width: 1; }
.chart-grid line.axis { stroke: var(--bd-secondary); }
.chart-axis-label { fill: var(--tx-tertiary); font-family: var(--font-mono); font-size: 10px; }
.chart-line { fill: none; stroke: var(--accent); stroke-width: 1.5; }
.chart-area { fill: url(#accentFade); opacity: .12; }

/* ═══════════════════════════════════════════════════════════════════════════
   APP SHELL — topbar / footer used across surfaces
   ═══════════════════════════════════════════════════════════════════════════ */
.appbar {
  display: flex; align-items: center; gap: var(--space-6);
  height: 48px; padding: 0 var(--space-6);
  background: var(--bg-primary); border-bottom: 1px solid var(--bd-primary);
  position: sticky; top: 0; z-index: 40;
}
.brand {
  font-family: var(--font-mono); font-weight: 700; font-size: var(--text-sm);
  letter-spacing: .16em; text-transform: uppercase; color: var(--accent);
  white-space: nowrap;
}
.brand .sep { color: var(--tx-tertiary); font-weight: 300; }
.appbar .context {
  font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .1em;
  text-transform: uppercase; color: var(--tx-tertiary);
}

.footer {
  border-top: 1px solid var(--bd-primary); background: var(--bg-primary);
  padding: var(--space-4) var(--space-6);
  display: flex; align-items: center; gap: var(--space-4);
  font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .06em;
  color: var(--tx-tertiary); flex-wrap: wrap;
}
.footer .sep { color: var(--tx-micro); }
.footer a:hover { color: var(--tx-secondary); }
.footer .right { margin-left: auto; }

/* Live status dot */
.live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--success);
  box-shadow: 0 0 5px var(--success); animation: cd-pulse 2.4s ease-in-out infinite; }
@keyframes cd-pulse { 0%,100%{opacity:1} 50%{opacity:.35} }

/* ═══════════════════════════════════════════════════════════════════════════
   TEXT-SCALE CONTROL (A- / A / A+)
   ═══════════════════════════════════════════════════════════════════════════ */
.text-scale { display: inline-flex; align-items: center; border: 1px solid var(--bd-secondary); border-radius: var(--r-sm); }
.text-scale button {
  width: 26px; height: 24px; background: transparent; border: none; color: var(--tx-tertiary);
  font-family: var(--font-mono); font-weight: 600; border-right: 1px solid var(--bd-tertiary);
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.text-scale button:last-child { border-right: none; }
.text-scale button:hover { color: var(--tx-primary); background: var(--bg-hover); }
.text-scale button.a-sm { font-size: 11px; }
.text-scale button.a-md { font-size: 13px; }
.text-scale button.a-lg { font-size: 16px; }

/* Operator identity chip — inherits each view's accent */
.op-chip { display:inline-flex; align-items:center; gap:var(--space-2);
  font-family:var(--font-mono); font-size:var(--text-2xs); letter-spacing:.1em;
  text-transform:uppercase; font-weight:600; color:var(--accent);
  border:1px solid var(--bd-secondary); border-radius:var(--r-sm);
  padding:2px var(--space-2); white-space:nowrap; }
.op-chip .op-dot { width:5px; height:5px; border-radius:50%; background:var(--accent); flex-shrink:0; }
@media (max-width:1240px){ .op-chip { display:none; } }

/* 12h / 24h time-format toggle — shared shell control */
.time-toggle {
  height: 24px; padding: 0 var(--space-2); background: transparent;
  border: 1px solid var(--bd-secondary); border-radius: var(--r-sm);
  font-family: var(--font-mono); font-size: var(--text-2xs); font-weight: 600;
  letter-spacing: .08em; color: var(--tx-tertiary);
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.time-toggle:hover { color: var(--tx-primary); border-color: var(--bd-strong); background: var(--bg-hover); }
.time-toggle:active { transform: translateY(.5px); }

/* ═══════════════════════════════════════════════════════════════════════════
   REVEAL (tasteful entrance) — PURE CSS, no JS dependency.
   animation-fill-mode:both guarantees the end state (opacity 1) even if the
   animation is skipped/janky, so content can never get stuck invisible.
   ═══════════════════════════════════════════════════════════════════════════ */
/* Transform-ONLY entrance: opacity is never touched, so content is fully
   visible even if the animation is paused/skipped (background tab, reduced
   motion, or a renderer that doesn't advance animations). Motion is a bonus,
   never a gate on visibility. */
@keyframes cd-rise { from { transform: translateY(8px); } to { transform: none; } }
[data-reveal] { animation: cd-rise .5s var(--ease) both; }
[data-reveal][data-reveal-delay="1"] { animation-delay: .07s; }
[data-reveal][data-reveal-delay="2"] { animation-delay: .14s; }
[data-reveal][data-reveal-delay="3"] { animation-delay: .21s; }
@media (prefers-reduced-motion: reduce) { [data-reveal] { animation: none; transform: none; } }

/* Mini demo chart (module-preview sparkline / gridded chart scaffold) */
.mini-chart { display: block; width: 100%; height: auto; }
.mini-chart .grid { stroke: var(--bd-tertiary); stroke-width: 1; }
.mini-chart .grid.axis { stroke: var(--bd-secondary); }
.mini-chart .plot { fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.mini-chart .plot-area { fill: var(--accent); opacity: .1; }
.mini-chart .dot { fill: var(--accent); }

/* ═══════════════════════════════════════════════════════════════════════════
   MARKET ATMOSPHERE — ticker tape, index rail, chart pulse, news depth
   Reusable across the landing hero and the Market surface. Motion here is
   always opacity-safe: every value is real DOM and visible without animation.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Scrolling ticker tape ─────────────────────────────────────────────── */
.ticker { overflow: hidden; position: relative; background: var(--bg-inset);
  border-bottom: 1px solid var(--bd-primary); flex-shrink: 0; }
.ticker::before, .ticker::after { content: ""; position: absolute; top: 0; bottom: 0; width: 56px; z-index: 2; pointer-events: none; }
.ticker::before { left: 0;  background: linear-gradient(90deg, var(--bg-inset), transparent); }
.ticker::after  { right: 0; background: linear-gradient(270deg, var(--bg-inset), transparent); }
.ticker-track { display: flex; width: max-content; align-items: stretch; white-space: nowrap;
  animation: cd-marquee 60s linear infinite; will-change: transform; }
.ticker:hover .ticker-track { animation-play-state: paused; }
@keyframes cd-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.tick-item { display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-4); border-right: 1px solid var(--bd-tertiary);
  font-family: var(--font-mono); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.tick-sym { color: var(--tx-secondary); letter-spacing: .08em; }
.tick-px  { color: var(--tx-primary); }
.tick-chg.pos { color: var(--pos); } .tick-chg.neg { color: var(--neg); } .tick-chg.flat { color: var(--flat); }
.tick-arrow { font-size: var(--text-2xs); }
@media (prefers-reduced-motion: reduce) { .ticker-track { animation: none; } }

/* ── Index rail (vertical) ─────────────────────────────────────────────── */
.rail { display: flex; flex-direction: column; }
.rail-row { display: grid; grid-template-columns: 1fr auto auto 68px; align-items: center;
  gap: var(--space-3); padding: var(--space-2) 0; border-bottom: 1px solid var(--bd-tertiary);
  font-family: var(--font-mono); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.rail-row:last-child { border-bottom: none; }
.rail-sym { color: var(--tx-secondary); letter-spacing: .06em; }
.rail-px  { color: var(--tx-primary); text-align: right; }
.rail-chg { text-align: right; } .rail-chg.pos { color: var(--pos); } .rail-chg.neg { color: var(--neg); }
.rail-spark { width: 68px; height: 20px; display: block; }
.rail-spark .plot { fill: none; stroke-width: 1.25; }
.rail-spark .plot.pos { stroke: var(--pos); } .rail-spark .plot.neg { stroke: var(--neg); }

/* ── Chart endpoint pulse (decorative; solid dot always renders) ────────── */
.chart-dot { fill: var(--accent); }
.chart-ping { fill: none; stroke: var(--accent); transform-origin: center;
  animation: cd-ping 2.6s ease-out infinite; }
@keyframes cd-ping { 0% { r: 3; opacity: .55; } 70%, 100% { r: 11; opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .chart-ping { animation: none; opacity: 0; } }

/* ── Value-tick flash (JS toggles .up/.down; base value always visible) ─── */
.val { font-variant-numeric: tabular-nums; border-radius: var(--r-sm); padding: 0 2px;
  transition: background var(--dur-med) var(--ease), color var(--dur-med) var(--ease); }
.val.up   { background: rgba(0,200,83,.16);  color: var(--pos); }
.val.down { background: rgba(255,68,68,.16); color: var(--neg); }

/* ── Signal tag (news category) ────────────────────────────────────────── */
.tag { display: inline-flex; align-items: center; padding: 1px var(--space-2); border-radius: var(--r-sm);
  font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: .08em; text-transform: uppercase;
  font-weight: 700; border: 1px solid; white-space: nowrap; }
.tag.macro   { color: var(--info);    border-color: var(--bd-secondary); background: var(--info-bg); }
.tag.bull    { color: var(--success); border-color: var(--success-bd);   background: var(--success-bg); }
.tag.bear    { color: var(--danger);  border-color: var(--danger-bd);    background: var(--danger-bg); }
.tag.event   { color: var(--warning); border-color: var(--warning-bd);   background: var(--warning-bg); }

/* ── News depth panels (Simple / Standard / Technical) ─────────────────────
   Fail-safe: with no JS, only the Standard panel shows. When ui.js marks the
   document .tiers-ready, JS controls which single panel is .is-shown. */
[data-panel-group] { display: none; }
[data-panel-group][data-panel="standard"] { display: block; }
.tiers-ready [data-panel-group] { display: none; }
.tiers-ready [data-panel-group].is-shown { display: block; }

/* ═══════════════════════════════════════════════════════════════════════════
   CROSS-SURFACE FEED — newswire / deal wire / analysis wire / command feed
   Shared item structure: source · time · tag → headline → why it matters.
   ═══════════════════════════════════════════════════════════════════════════ */
.feed-item { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--bd-tertiary); transition: background var(--dur-fast) var(--ease); }
.feed-item:last-child { border-bottom: none; }
.feed-item:hover { background: var(--bg-tertiary); }
.feed-top { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--tx-tertiary); letter-spacing: .04em; }
.feed-top .src { color: var(--tx-secondary); font-weight: 600; }
.feed-top .tkr { color: var(--tx-secondary); }
.feed-head { margin-top: var(--space-2); font-size: var(--text-sm); color: var(--tx-primary); line-height: 1.4; }
.feed-why { margin-top: var(--space-1); font-size: var(--text-xs); color: var(--tx-secondary); line-height: var(--leading-prose); }
.feed-why .wk { color: var(--accent); font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: .08em; text-transform: uppercase; margin-right: var(--space-1); }

/* ── Media / playbook cards — link-based index, native <details> expand ──── */
.media-card { border-bottom: 1px solid var(--bd-tertiary); }
.media-card:last-child { border-bottom: none; }
.media-card > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 64px 1fr; gap: var(--space-3);
  padding: var(--space-3) var(--space-4); align-items: center; }
.media-card > summary::-webkit-details-marker { display: none; }
.media-card:hover > summary { background: var(--bg-tertiary); }
.media-thumb { position: relative; height: 42px; border-radius: var(--r-sm); border: 1px solid var(--bd-secondary);
  background: linear-gradient(135deg, var(--bg-tertiary), var(--bg-inset)); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.media-thumb .mt-play { width: 0; height: 0; border-left: 9px solid var(--accent); border-top: 6px solid transparent; border-bottom: 6px solid transparent; margin-left: 3px; opacity: .9; }
.media-thumb .mt-len { position: absolute; bottom: 2px; right: 3px; font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--tx-secondary); background: rgba(0,0,0,.55); padding: 0 3px; border-radius: 1px; }
.media-info .mt-src { font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: .05em; color: var(--tx-tertiary); }
.media-info .mt-src .kind { color: var(--accent); font-weight: 600; }
.media-info .mt-title { font-size: var(--text-sm); color: var(--tx-primary); line-height: 1.35; margin-top: 3px; }
.media-body { padding: 0 var(--space-4) var(--space-3) calc(64px + var(--space-4) + var(--space-3)); font-size: var(--text-xs); color: var(--tx-secondary); line-height: var(--leading-prose); }
.media-body .ml { display: block; margin-top: var(--space-2); font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: .05em; color: var(--tx-tertiary); }

/* ── Horizontal media tiles (playbook bands) — link-based, <details> expand ── */
.media-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-3);
  padding: var(--space-3) var(--space-4) var(--space-4); }
.media-tile { border: 1px solid var(--bd-secondary); border-radius: var(--r-md); background: var(--bg-inset);
  overflow: hidden; min-width: 0; transition: border-color var(--dur-fast) var(--ease); }
.media-tile:hover { border-color: var(--accent); }
.media-tile > summary { list-style: none; cursor: pointer; }
.media-tile > summary::-webkit-details-marker { display: none; }
.media-tile .tile-thumb { position: relative; height: 110px; display: flex; align-items: center; justify-content: center;
  border-bottom: 1px solid var(--bd-tertiary);
  background: repeating-linear-gradient(0deg, transparent 0 21px, rgba(255,255,255,.015) 21px 22px),
              linear-gradient(135deg, var(--bg-tertiary), var(--bg-inset)); }
.media-tile .tile-thumb .play { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--accent);
  display: flex; align-items: center; justify-content: center; opacity: .9; }
.media-tile .tile-thumb .play::after { content: ""; width: 0; height: 0; border-left: 10px solid var(--accent);
  border-top: 6px solid transparent; border-bottom: 6px solid transparent; margin-left: 3px; }
.media-tile .tile-thumb .len { position: absolute; bottom: 6px; right: 8px; font-family: var(--font-mono);
  font-size: var(--text-2xs); color: var(--tx-secondary); background: rgba(0,0,0,.6); padding: 1px 5px; border-radius: 2px; }
.media-tile .tile-meta { display: flex; flex-wrap: wrap; gap: var(--space-2); padding: var(--space-3) var(--space-3) 0;
  font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: .05em; color: var(--tx-tertiary); }
.media-tile .tile-meta .kind { color: var(--accent); font-weight: 700; text-transform: uppercase; }
.media-tile .tile-title { padding: var(--space-2) var(--space-3) var(--space-3); font-size: var(--text-sm);
  color: var(--tx-primary); line-height: 1.4; font-weight: 600; }
.media-tile .tile-body { padding: 0 var(--space-3) var(--space-3); font-size: var(--text-xs);
  color: var(--tx-secondary); line-height: var(--leading-prose); }
.media-tile .tile-body .ml { display: block; margin-top: var(--space-2); font-family: var(--font-mono);
  font-size: var(--text-2xs); letter-spacing: .05em; color: var(--tx-tertiary); }

/* ── Column equalizers: stretch designated panels to kill dead space ──────
   In a stretch-aligned grid row, .col children with .grow share the slack so
   every column bottoms out at the same line (no black L-gaps). */
.col > .panel.grow { flex: 1 1 auto; display: flex; flex-direction: column; }
.panel.grow > .panel-body { flex: 1 1 auto; }

/* ═══════════════════════════════════════════════════════════════════════════
   EXPORT STYLE PICKER + LIVE PREVIEW
   A selectable "house style" for downloadable artifacts, with a believable
   light-paper preview of the exported document. Presentation only.
   ═══════════════════════════════════════════════════════════════════════════ */
.xp-picker { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--bd-tertiary); }
.xp-lbl { font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: .1em; text-transform: uppercase; color: var(--tx-tertiary); }
.xp-chips { display: flex; gap: var(--space-1); flex-wrap: wrap; }
.xp-chip { font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: .04em; color: var(--tx-secondary); background: var(--bg-tertiary); border: 1px solid var(--bd-secondary); border-radius: var(--r-sm); padding: 3px var(--space-2); cursor: pointer; transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); }
.xp-chip:hover { color: var(--accent); border-color: var(--accent); }
.xp-chip.is-active { color: var(--bg-primary); background: var(--accent); border-color: var(--accent); }
.xp-preview { display: flex; justify-content: center; padding: var(--space-1) 0; }
.xp-cap { font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: .04em; color: var(--tx-tertiary); text-align: center; }

.xp-doc { width: 100%; max-width: 264px; background: var(--pp); color: var(--pi); border-radius: 2px; overflow: hidden;
  box-shadow: 0 4px 16px rgba(0,0,0,.45); font-family: var(--pbf); }
.xp-doc .xp-hd { display: flex; align-items: center; justify-content: space-between; padding: 7px 10px; gap: 8px; }
.xp-doc.band .xp-hd { background: var(--pa); }
.xp-doc.band .xp-mark, .xp-doc.band .xp-style { color: #fff; }
.xp-doc:not(.band) .xp-hd { border-bottom: 2px solid var(--pa); }
.xp-doc:not(.band) .xp-mark { color: var(--pa); }
.xp-mark { font-family: var(--phf); font-weight: 700; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.xp-style { font-size: 11px; letter-spacing: .05em; text-transform: uppercase; opacity: .85; }
.xp-b { padding: 10px 12px 12px; }
.xp-h1 { font-family: var(--phf); font-weight: 700; font-size: 14px; letter-spacing: -.01em; }
.xp-h2 { font-family: var(--phf); font-size: 11px; color: var(--pa); border-bottom: 1px solid var(--pr); padding-bottom: 2px; margin: 8px 0 4px; }
.xp-t { width: 100%; border-collapse: collapse; font-size: 11px; }
.xp-t td { padding: 2px 0; border-bottom: 1px solid rgba(0,0,0,.12); }
.xp-t td:last-child { text-align: right; font-weight: 600; }
.xp-p { font-size: 11px; line-height: 1.5; margin-top: 8px; opacity: .85; }

/* ═══════════════════════════════════════════════════════════════════════════
   MOTION / A11Y
   ═══════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}
:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }