/* Trading Hub v2 — neutral design system
   No page-accent colors. Signal tiers are the ONLY chromatic channels.
   Everything else: grayscale + single gold accent for interaction.
   ──────────────────────────────────────────────────────────────────────
   v2.1 (2026-04-24 elite polish) — upgraded typography (Inter + JetBrains
   Mono), full spacing/elevation/motion token scale, refined tier pills,
   polished hero + focus pane + computed-assessment rhythm. */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root {
  /* Surface */
  --bg-0: #0a0d12;
  --bg-1: #12161d;
  --bg-2: #1a1f28;
  --bg-3: #232935;
  --bg-hover: #2a3240;

  /* Text */
  --fg-0: #f0f3f8;
  --fg-1: #c9cfd8;
  --fg-2: #9aa2b0;
  --fg-3: #7d8595;

  /* Chrome */
  --border: rgba(255,255,255,0.08);
  --border-strong: rgba(255,255,255,0.14);
  --shadow: 0 1px 3px rgba(0,0,0,0.4), 0 8px 24px rgba(0,0,0,0.3);

  /* Elevation (tiered shadows w/ inset highlight) */
  --elev-0: 0 0 0 1px var(--border);
  --elev-1: 0 1px 2px rgba(0,0,0,0.20), inset 0 1px 0 rgba(255,255,255,0.03);
  --elev-2: 0 4px 12px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.04);
  --elev-3: 0 14px 32px rgba(0,0,0,0.38), inset 0 1px 0 rgba(255,255,255,0.05);
  --glow-accent: 0 0 0 1px rgba(212,160,23,0.35), 0 0 24px rgba(212,160,23,0.18);

  /* Interaction */
  --accent: var(--color-directional-neutral, #d4a017);
  --accent-hi: #e8b527;
  --accent-dim: rgba(212,160,23,0.15);
  --accent-bg: rgba(212,160,23,0.08);
  --focus: var(--color-info-high, #5b8def);

  /* Signal tiers (the ONLY semantic colors) */
  --strong-buy: #1fb77a;
  --buy: #2d9cff;
  --hold: #8a92a0;
  --sell: #f0a020;
  --strong-sell: #e53e3e;
  --pos: var(--color-directional-bullish, #3fd38f);
  --neg: var(--color-directional-bearish, #f26e6e);

  /* Spacing scale */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 40px; --s-9: 56px;

  /* Motion */
  --dur-fast: 120ms;
  --dur: 180ms;
  --dur-slow: 280ms;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-linear: cubic-bezier(0.2, 0, 0, 1);

  /* Typography */
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Type scale — 10 canonical tokens (NEXUS Decision #5, 2026-04-29).
     Frequency-driven: the most-used integer sizes are tokenized.
     Half-pixel sizes (9.5/10.5/11.5/12.5/13.5/14.5) and 15/20/26/40 remain
     as deliberate optical adjustments and are NOT subtracted by these tokens.
     Cockpit density is doctrinal (AUDIENCE_PERSONA.md) — do not collapse aggressively. */
  --t-3xs: 9px;   /* micro caption / tag                  (15 sites) */
  --t-2xs: 10px;  /* tiny caption / kicker                (77 sites) */
  --t-xs:  11px;  /* footnote / small caption             (83 sites) */
  --t-sm:  12px;  /* small body / table cell              (65 sites) */
  --t-base:13px;  /* default cockpit body                 (37 sites) */
  --t-md:  14px;  /* standard body                        (17 sites) */
  --t-lg:  16px;  /* callout / emphasized body            (12 sites) */
  --t-xl:  18px;  /* section sub-heading                  (6 sites)  */
  --t-2xl: 22px;  /* section heading                      (5 sites)  */
  --t-3xl: 32px;  /* hero numeral / display               (2 sites)  */

  /* Layout */
  --rail: 240px;
  --right: 360px;
  --header: 48px;
  --radius: 6px;
  --radius-sm: 4px;
  --r-xs: 3px; --r-sm: 5px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px; --r-pill: 999px;
}

/* Theme transition (Wave-38) — smooth dark/light switch */
html { transition: background-color 200ms ease, color 200ms ease; }
body, .topbar, .rail, .card, .nav-bar, .skel-card {
  transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease;
}
@media (prefers-reduced-motion: reduce) {
  html, body, .topbar, .rail, .card, .nav-bar, .skel-card { transition: none !important; }
}

/* Theme toggle button (Wave-38) */
.thv2-theme-toggle {
  background: none;
  border: 1px solid var(--border, rgba(255,255,255,0.1));
  border-radius: var(--r-sm, 4px);
  color: var(--fg-2, #8a92a0);
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  padding: 5px 7px;
  transition: color 150ms, border-color 150ms;
  flex-shrink: 0;
}
.thv2-theme-toggle:hover { color: var(--fg-0, #e8e8f0); border-color: var(--border-strong, rgba(255,255,255,0.25)); }
[data-theme="light"] .thv2-theme-toggle { border-color: rgba(0,0,0,0.15); color: var(--fg-2, #8b93a3); }
[data-theme="light"] .thv2-theme-toggle:hover { color: var(--fg-0, #1a1a2e); }

/* ── Light mode override (toggle via .mode-light on <html>) ── */
.mode-light {
  --bg-0: #f5f6f8;
  --bg-1: #ffffff;
  --bg-2: #ebedf0;
  --bg-3: #dde0e5;
  --bg-hover: #d0d4db;
  --fg-0: #1a1d24;
  --fg-1: #3a3f4a;
  --fg-2: #8b93a3;
  --fg-3: #9ca3af;
  --border: rgba(0,0,0,0.10);
  --border-strong: rgba(0,0,0,0.18);
  --shadow: 0 1px 3px rgba(0,0,0,0.08), 0 8px 24px rgba(0,0,0,0.06);
  --elev-0: 0 0 0 1px var(--border);
  --elev-1: 0 1px 2px rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,0.80);
  --elev-2: 0 4px 12px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.90);
  --elev-3: 0 14px 32px rgba(0,0,0,0.10), inset 0 1px 0 rgba(255,255,255,0.95);
  --accent-dim: rgba(212,160,23,0.12);
  --accent-bg: rgba(212,160,23,0.06);
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  height: 100vh; overflow: hidden;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.4;
  color: var(--fg-0);
  background: var(--bg-0);
  -webkit-font-smoothing: antialiased;
}

/* Desktop scroll fix (2026-06-22): the html,body lock above is for the app-shell
   grid (.shell), whose inner .main scrolls. Document-flow pages have no .shell /
   inner scroller, so on desktop they were clipped to one screen (the 767px mobile
   query already releases the lock, which is why mobile scrolled but desktop did
   not). Release the lock for any page that is NOT the app-shell grid — keyed on
   absence of .shell so every dashboard that builds a .shell (incl. JS-rendered)
   keeps its inner-main scroll untouched. Guarded by @supports so non-:has()
   browsers keep prior behavior. */
@supports selector(:has(*)) {
  html:has(body:not(:has(.shell))) { height: auto; overflow: visible; }
  body:not(:has(.shell)) {
    height: auto; min-height: 100vh; min-height: 100dvh;
    overflow-x: hidden; overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}

button, input, select, textarea {
  font-family: inherit; font-size: inherit; color: inherit;
}
a { color: var(--fg-1); text-decoration: none; }
a:hover { color: var(--fg-0); }

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

/* ── SHELL ── */
.shell {
  display: grid;
  grid-template-columns: var(--rail) 1fr var(--right);
  grid-template-rows: var(--header) 1fr;
  grid-template-areas: "topbar topbar topbar" "rail main right";
  height: 100vh;
}
.topbar {
  grid-area: topbar;
  display: flex; align-items: center; gap: 16px;
  padding: 0 16px;
  background: var(--bg-1);
  border-bottom: 1px solid var(--border);
}
.topbar .brand {
  font-weight: 600; letter-spacing: 0.3px;
  color: var(--fg-0);
}
.topbar .brand .v2 {
  color: var(--accent);
  font-size: 11px;
  margin-left: 4px;
  padding: 2px 6px;
  background: var(--accent-dim);
  border-radius: 3px;
  vertical-align: 2px;
}
.topbar .palette-trigger {
  flex: 1; max-width: 420px;
  margin: 0 auto;
  background: var(--bg-2);
  border: 1px solid var(--border);
  color: var(--fg-2);
  padding: 6px 12px;
  border-radius: var(--radius);
  display: flex; align-items: center; gap: 8px;
  cursor: pointer;
  transition: border-color 120ms;
}
.topbar .palette-trigger:hover { border-color: var(--border-strong); color: var(--fg-1); }
.topbar .palette-trigger kbd {
  font-family: var(--font-mono);
  font-size: 10px;
  background: var(--bg-3);
  border: 1px solid var(--border);
  padding: 1px 5px;
  border-radius: 3px;
  margin-left: auto;
}
.topbar .status {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--fg-2);
}
.topbar .status .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--strong-buy);
}
.topbar .status .dot.closed { background: var(--fg-3); }
.topbar .status .dot.pre, .topbar .status .dot.post { background: var(--sell); }

.rail {
  grid-area: rail;
  background: var(--bg-1);
  border-right: 1px solid var(--border);
  padding: 8px 0;
  overflow-y: auto;
}
/* IA cutover 2026-04-29 (Decision #1 Option B-thick): elite-nav (engine/elite-nav.js)
   is now the canonical primary navigation. The legacy left rail is demoted —
   hidden on desktop ≥768px; kept visible on mobile <768px as a backup until
   mobile elite-nav drawer is verified. Reversible via single hunk revert. */
@media (min-width: 768px) {
  .rail { display: none !important; }
  .shell {
    grid-template-columns: 0 1fr var(--right) !important;
    grid-template-areas: "topbar topbar topbar" "main main right" !important;
  }
}
.rail .group {
  padding: 4px 0;
}
.rail .group-title {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.6px;
  color: var(--fg-3);
  padding: 8px 16px 4px;
}
.rail .nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 16px;
  color: var(--fg-1);
  cursor: pointer;
  border-left: 2px solid transparent;
  font-size: 13px;
  transition: background 80ms;
}
.rail .nav-item:hover { background: var(--bg-2); }
.rail .nav-item.active {
  background: var(--bg-2);
  border-left-color: var(--accent);
  color: var(--fg-0);
}
.rail .nav-item .ic { width: 14px; opacity: 0.7; font-size: 14px; }
.rail .nav-item .badge {
  margin-left: auto;
  font-size: 10px;
  padding: 1px 6px;
  background: var(--bg-3);
  border-radius: 10px;
  color: var(--fg-2);
}

.main {
  grid-area: main;
  overflow-y: auto;
  padding: 16px 20px 40px;
}

.right {
  grid-area: right;
  background: var(--bg-1);
  border-left: 1px solid var(--border);
  overflow-y: auto;
  padding: 12px;
}

/* ── VIEW TITLES ── */
.view-hd {
  display: flex; align-items: baseline; gap: 12px;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.view-hd h1 {
  font-size: 18px; font-weight: 600; margin: 0;
  color: var(--fg-0);
}
.view-hd .subtitle {
  font-size: 12px; color: var(--fg-2);
}

/* ── CARDS ── */
.card {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px;
  margin-bottom: 12px;
}
.card h2 {
  margin: 0 0 8px;
  font-size: 13px; font-weight: 600;
  color: var(--fg-1);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.card h3 {
  margin: 0 0 6px;
  font-size: 12px; font-weight: 600;
  color: var(--fg-1);
}

/* ── NOW (home) ── */
.now-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.now-hero {
  grid-column: 1 / -1;
  padding: 20px;
  background: linear-gradient(135deg, var(--bg-1) 0%, var(--bg-2) 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.now-hero .hero-regime {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.6px;
  color: var(--fg-2);
  margin-bottom: 6px;
}
.now-hero .hero-headline {
  font-size: 22px; font-weight: 600; margin: 0 0 12px;
  color: var(--fg-0);
  line-height: 1.25;
}
.now-hero .hero-meta {
  font-size: 12px; color: var(--fg-1);
  display: flex; gap: 16px; flex-wrap: wrap;
}
.now-hero .hero-meta .m-val { color: var(--fg-0); font-weight: 600; }

.now-action {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  background: var(--bg-2);
  border-radius: var(--radius-sm);
  margin-bottom: 6px;
}
.now-action .act-tier {
  font-size: 10px; font-weight: 700;
  padding: 2px 6px; border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.now-action .act-ticker {
  font-family: var(--font-mono);
  font-weight: 600; color: var(--fg-0);
}
.now-action .act-plain {
  flex: 1;
  font-size: 12px; color: var(--fg-1);
}
.now-action .act-score {
  font-family: var(--font-mono);
  font-size: 12px; color: var(--fg-2);
}

/* ── TIER COLORS (only semantic color in system) ── */
.tier-strong-buy  { color: var(--strong-buy) !important; }
.tier-buy         { color: var(--buy) !important; }
.tier-hold        { color: var(--hold) !important; }
.tier-sell        { color: var(--sell) !important; }
.tier-strong-sell { color: var(--strong-sell) !important; }

.bg-tier-strong-buy  { background: rgba(31,183,122,0.15); color: var(--strong-buy); }
.bg-tier-buy         { background: rgba(45,156,255,0.15); color: var(--buy); }
.bg-tier-hold        { background: rgba(138,146,160,0.15); color: var(--hold); }
.bg-tier-sell        { background: rgba(240,160,32,0.15); color: var(--sell); }
.bg-tier-strong-sell { background: rgba(229,62,62,0.15); color: var(--strong-sell); }

/* ── DENSE TABLE (canvas-backed for 1000+ rows, but fallback DOM) ── */
.dense-wrap {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-1);
}
.dense-ctrl {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-2);
  font-size: 12px;
  color: var(--fg-2);
}
.dense-ctrl input.q {
  flex: 1;
  background: var(--bg-0);
  border: 1px solid var(--border);
  color: var(--fg-0);
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  font-size: 12px;
}
.dense-ctrl button.chip {
  background: var(--bg-3); border: 1px solid var(--border);
  color: var(--fg-1);
  padding: 3px 10px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 11px;
}
.dense-ctrl button.chip.active { background: var(--accent-dim); border-color: var(--accent); color: var(--accent); }
.dense-ctrl button.chip:hover { background: var(--bg-hover); }

.dense-table {
  width: 100%; border-collapse: collapse;
  font-size: 12px;
  font-family: var(--font-mono);
}
.dense-table thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--bg-2);
  text-align: left;
  padding: 6px 10px;
  color: var(--fg-2);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-size: 10px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  transition: background var(--dur-fast, 120ms) var(--ease, cubic-bezier(.2,.8,.2,1)),
              color var(--dur-fast, 120ms) var(--ease, cubic-bezier(.2,.8,.2,1));
}
/* Wave-2: sort-affordance ⇅ glyph (low opacity until hover; full when sorted).
   CSP-compliant — pseudo-element only, JS owns sort-asc/sort-desc class toggles
   (see app.js:9182-9183). */
.dense-table thead th::after {
  content: " ⇅";
  color: var(--fg-3, #6b7180);
  opacity: 0;
  transition: opacity var(--dur-fast, 120ms) var(--ease, cubic-bezier(.2,.8,.2,1));
}
.dense-table thead th:hover {
  color: var(--fg-0);
  background: var(--bg-hover, var(--bg-3, #1a1f29));
}
.dense-table thead th:hover::after { opacity: 0.4; }
.dense-table thead th:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.dense-table thead th.sort-asc::after  { content: " ↑"; color: var(--accent); opacity: 1; }
.dense-table thead th.sort-desc::after { content: " ↓"; color: var(--accent); opacity: 1; }
.dense-table tbody td {
  padding: 5px 10px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  color: var(--fg-1);
}
.dense-table tbody tr:hover td { background: var(--bg-2); }
.dense-table tbody tr { cursor: pointer; }
.dense-table tbody tr.selected td { background: var(--accent-dim); }
.dense-table td.num   { text-align: right; font-variant-numeric: tabular-nums; }
.dense-table td.ticker { color: var(--fg-0); font-weight: 600; }

.tier-pill {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* ── FOCUS VIEW (right pane) ── */
.focus-empty {
  padding: 24px 12px;
  text-align: center;
  color: var(--fg-3);
  font-size: 12px;
}
.focus-hd {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.focus-hd .ticker {
  font-family: var(--font-mono);
  font-size: 20px; font-weight: 700;
  color: var(--fg-0);
}
.focus-hd .close {
  background: transparent; border: 0; color: var(--fg-3);
  cursor: pointer; font-size: 16px;
}
.focus-hd .close:hover { color: var(--fg-0); }

.focus-score {
  display: flex; align-items: center; gap: 16px;
  padding: 12px;
  background: var(--bg-2);
  border-radius: var(--radius);
  margin-bottom: 12px;
}
.focus-score .num {
  font-family: var(--font-mono);
  font-size: 32px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.focus-score .tier-lbl {
  font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 700;
}
.focus-score .confidence {
  margin-left: auto;
  font-size: 11px; color: var(--fg-2);
}
.focus-score .confidence .big {
  display: block;
  font-size: 16px; color: var(--fg-0);
  font-family: var(--font-mono);
}

.thesis {
  background: var(--bg-2);
  border-radius: var(--radius);
  padding: 10px 12px;
  font-size: 13px;
  color: var(--fg-1);
  line-height: 1.5;
  margin-bottom: 12px;
}
.thesis-mode-tabs {
  display: inline-flex;
  gap: 0;
  background: var(--bg-3);
  border-radius: var(--radius-sm);
  padding: 2px;
  margin-bottom: 8px;
  font-size: 10px;
}
.thesis-mode-tabs button {
  background: transparent; border: 0; color: var(--fg-2);
  padding: 3px 10px; border-radius: 3px;
  cursor: pointer;
  text-transform: uppercase; letter-spacing: 0.4px; font-weight: 600;
}
.thesis-mode-tabs button.active { background: var(--bg-1); color: var(--fg-0); }

.factor-bars { display: flex; flex-direction: column; gap: 3px; }
.factor-bar {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px;
}
.factor-bar .fb-name { flex: 0 0 110px; color: var(--fg-2); }
.factor-bar .fb-track {
  flex: 1; height: 6px;
  background: var(--bg-3);
  border-radius: 3px;
  position: relative;
}
.factor-bar .fb-fill {
  position: absolute; top: 0; bottom: 0; left: 50%;
  border-radius: 3px;
  transform-origin: left center;
}
.factor-bar .fb-fill.pos { background: var(--strong-buy); }
.factor-bar .fb-fill.neg { background: var(--strong-sell); transform-origin: right center; right: 50%; left: auto; }
.factor-bar .fb-val {
  flex: 0 0 32px;
  text-align: right;
  font-family: var(--font-mono);
  color: var(--fg-1);
}

.trade-plan {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 8px;
}
.trade-plan .tp-cell {
  background: var(--bg-2);
  padding: 8px;
  border-radius: var(--radius-sm);
  text-align: center;
}
.trade-plan .tp-cell .lbl {
  font-size: 10px; color: var(--fg-3);
  text-transform: uppercase; letter-spacing: 0.4px;
}
.trade-plan .tp-cell .val {
  font-family: var(--font-mono);
  font-size: 14px; font-weight: 600;
  color: var(--fg-0);
  margin-top: 3px;
}

/* ── COMMAND PALETTE (Cmd+K) ── */
.palette-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(4px);
  display: none; align-items: flex-start; justify-content: center;
  padding-top: 15vh;
  z-index: 100;
}
.palette-backdrop.open { display: flex; }
.palette {
  width: 560px; max-width: 90vw;
  background: var(--bg-1);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  box-shadow: var(--shadow);
  overflow: hidden;
}
.palette input {
  width: 100%; border: 0;
  background: var(--bg-1);
  padding: 14px 16px;
  font-size: 15px;
  color: var(--fg-0);
  border-bottom: 1px solid var(--border);
}
.palette input::placeholder { color: var(--fg-3); }
.palette .results {
  max-height: 360px; overflow-y: auto;
  padding: 4px;
}
.palette .res {
  padding: 8px 12px;
  display: flex; align-items: center; gap: 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 13px;
  color: var(--fg-1);
}
.palette .res:hover,
.palette .res.sel { background: var(--bg-2); color: var(--fg-0); }
.palette .res .kind {
  font-size: 10px; text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--fg-3);
  margin-left: auto;
}

/* ── TOASTS / NOTIFICATIONS ── */
.toast-stack {
  position: fixed;
  right: 16px; bottom: 16px;
  display: flex; flex-direction: column; gap: 8px;
  z-index: 90;
  pointer-events: none;
}
.toast {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--fg-2);
  border-radius: var(--radius);
  padding: 10px 14px;
  min-width: 300px; max-width: 420px;
  box-shadow: var(--shadow);
  font-size: 13px;
  color: var(--fg-0);
  pointer-events: auto;
  animation: toastIn 200ms ease-out;
}
.toast.buy  { border-left-color: var(--strong-buy); }
.toast.sell { border-left-color: var(--strong-sell); }
.toast.info { border-left-color: var(--buy); }
.toast .t-hd {
  font-weight: 600; margin-bottom: 2px;
  display: flex; align-items: baseline; justify-content: space-between;
}
.toast .t-body {
  font-size: 12px; color: var(--fg-1);
  line-height: 1.45;
}
@keyframes toastIn {
  from { transform: translateX(12px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

/* ── INBOX ── */
.inbox-item {
  padding: 10px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}
.inbox-item:hover { background: var(--bg-2); }
.inbox-item.unread { background: rgba(91,141,239,0.05); }
.inbox-item .ib-hd {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 4px;
}
.inbox-item .ib-tier {
  font-size: 9px; font-weight: 700;
  padding: 1px 5px; border-radius: 2px;
  text-transform: uppercase;
}
.inbox-item .ib-ticker {
  font-family: var(--font-mono);
  font-weight: 600;
}
.inbox-item .ib-time {
  margin-left: auto;
  font-size: 10px; color: var(--fg-3);
}
.inbox-item .ib-body {
  font-size: 12px; color: var(--fg-1);
  line-height: 1.4;
}

/* ── PLAIN-ENGLISH / MATH MODE ── */
.mode-plain .math-only { display: none; }
.mode-math  .plain-only { display: none; }

/* ── REPLAY BAR ── */
.replay-bar {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 12px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 12px;
  font-size: 12px;
}
.replay-bar .rb-btn {
  background: var(--bg-3); border: 1px solid var(--border);
  color: var(--fg-1);
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 11px;
}
.replay-bar .rb-btn.active { background: var(--accent-dim); border-color: var(--accent); color: var(--accent); }
.replay-bar input[type=range] { flex: 1; }
.replay-bar .rb-time {
  font-family: var(--font-mono);
  color: var(--fg-0);
  min-width: 100px; text-align: right;
}

/* ── RESPONSIVE (PWA-first mobile) ── */
@media (max-width: 1024px) {
  :root { --rail: 60px; --right: 0px; }
  .rail .nav-item span:not(.ic):not(.badge) { display: none; }
  .rail .group-title { display: none; }
  .right { display: none; }
  .shell { grid-template-areas: "topbar topbar" "rail main"; grid-template-columns: var(--rail) 1fr; }
  .topbar .palette-trigger { max-width: none; }
}
@media (max-width: 640px) {
  :root { --rail: 0px; --header: 44px; }
  .rail { display: none; }
  .shell { grid-template-areas: "topbar" "main"; grid-template-columns: 1fr; }
  .main { padding: 12px; }
  .now-grid { grid-template-columns: 1fr; }
  .topbar .brand .v2 { display: none; }
  .mobile-tab-bar {
    position: fixed; bottom: 0; left: 0; right: 0;
    height: 56px;
    background: var(--bg-1);
    border-top: 1px solid var(--border);
    display: flex;
    z-index: 50;
  }
  .mobile-tab-bar .tab {
    flex: 1;
    display: flex; align-items: center; justify-content: center;
    flex-direction: column; gap: 2px;
    font-size: 10px;
    color: var(--fg-2);
    cursor: pointer;
  }
  .mobile-tab-bar .tab.active { color: var(--accent); }
  .mobile-tab-bar .tab .ic { font-size: 18px; }
  .main { padding-bottom: 72px; }
}
@media (min-width: 1025px) {
  .mobile-tab-bar { display: none; }
}

/* ── REDUCED MOTION ── */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* ── UTILITIES ── */
.row { display: flex; align-items: center; gap: 8px; }
.grow { flex: 1; }
.muted { color: var(--fg-2); }
.dim { color: var(--fg-3); }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.small { font-size: 11px; }
.nowrap { white-space: nowrap; }
.pill {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 10px;
  font-size: 10px;
  background: var(--bg-3);
  color: var(--fg-1);
}
.btn {
  background: var(--bg-3); border: 1px solid var(--border);
  color: var(--fg-1);
  padding: 5px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 12px;
}
.btn:hover { background: var(--bg-hover); border-color: var(--border-strong); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--bg-0); font-weight: 600; }
.btn.primary:hover { background: #e0ad1f; }
.btn:active, .btn.primary:active { transform: scale(0.97); opacity: 0.92; transition: transform 80ms var(--ease-out), opacity 80ms var(--ease-out); }
@media (prefers-reduced-motion: reduce) { .btn:active, .btn.primary:active { transform: none; } }

.skeleton {
  background: linear-gradient(90deg, var(--bg-2) 0%, var(--bg-3) 50%, var(--bg-2) 100%);
  background-size: 200% 100%;
  animation: sk 1.2s ease-in-out infinite;
  border-radius: var(--radius-sm);
}
@keyframes sk { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ─── Academy / Learn view ───────────────────────────────────────── */
.acad-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.acad-item {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
}
.acad-head {
  display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px;
}
.acad-id {
  font-size: 11px; color: var(--fg-2);
  background: var(--bg-3); padding: 1px 5px; border-radius: 3px;
}
.acad-name { font-weight: 600; font-size: 13px; color: var(--fg-1); flex: 1; }
.acad-val {
  font-variant-numeric: tabular-nums;
  font-weight: 700; color: var(--accent);
  font-size: 14px;
}
.acad-plain { margin: 6px 0 4px; font-size: 13px; line-height: 1.45; color: var(--fg-1); }
.acad-teach { margin: 0; font-size: 11px; line-height: 1.4; }
.fbar.thin { height: 3px; margin: 4px 0 6px; }
.tiny { font-size: 11px; padding: 2px 8px; }

/* ─── XAI strip (Focus pane) ──────────────────────────────────────── */
.focus-xai {
  margin-top: 12px; padding-top: 10px;
  border-top: 1px solid var(--border);
}
.focus-xai-title {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--fg-2); margin-bottom: 8px;
}
.xai-row {
  margin-bottom: 10px; padding: 6px 8px;
  background: var(--bg-2); border-radius: var(--radius-sm);
  border-left: 3px solid transparent;
}
.xai-row.pos { border-left-color: var(--pos, #3ab77a); }
.xai-row.neg { border-left-color: var(--neg, #e15555); }
.xai-head {
  display: flex; align-items: baseline; gap: 8px; margin-bottom: 3px;
}
.xai-head code {
  font-size: 11px; color: var(--fg-2);
  background: var(--bg-3); padding: 1px 5px; border-radius: 3px;
  flex: 1;
}
.xai-val {
  font-variant-numeric: tabular-nums; font-weight: 700;
  font-size: 12px; color: var(--accent);
}
.xai-plain { margin: 4px 0 0; font-size: 12px; line-height: 1.4; }

/* ─── Signals driver tag ──────────────────────────────────────────── */
.driver {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; padding: 2px 6px; border-radius: 3px;
  background: var(--bg-3); color: var(--fg-2);
}
.driver.pos { color: var(--pos, #3ab77a); }
.driver.neg { color: var(--neg, #e15555); }
.driver code { background: transparent; padding: 0; font-size: inherit; }

/* ─── Decay drift alarms ──────────────────────────────────────────── */
.warn-card { border-color: var(--warn, #d4a017); background: rgba(212, 160, 23, 0.04); }
.warn-card h2 { color: var(--warn, #d4a017); }

/* ─── Academy learning progress grid ──────────────────────────────── */
.learn-grid {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  margin: 10px 0;
}
.learn-cell {
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
}
.learn-k { font-size: 11px; color: var(--fg-2); text-transform: uppercase; letter-spacing: 0.05em; }
.learn-v {
  font-variant-numeric: tabular-nums;
  font-size: 22px; font-weight: 700; color: var(--accent);
  margin: 4px 0;
}
.learn-v.ok { color: var(--pos, #3ab77a); }
.learn-v.neg { color: var(--neg, #e15555); }
.learn-v.warn { color: var(--warn, #d4a017); }

/* ─── Settings risk groups ───────────────────────────────────────── */
.risk-groups {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.risk-group {
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
}
.risk-group h3 {
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--fg-2); margin: 0 0 6px;
}
.kv.tight li { padding: 3px 0; }

/* ─── Dead-man supervisor status ─────────────────────────────────── */
.dm-status {
  padding: 8px 12px; border-radius: var(--radius-sm);
  background: var(--bg-2); border: 1px solid var(--border);
}
.dm-status.on { border-left: 3px solid var(--pos, #3ab77a); }
.dm-status.off { border-left: 3px solid var(--fg-3); opacity: 0.8; }

/* ─── Feed health cells ───────────────────────────────────────────── */
.ok { color: var(--pos, #3ab77a); }
.neg { color: var(--neg, #e15555); }
.warn { color: var(--warn, #d4a017); }

/* ─── Hero KPI row (Now view) ─────────────────────────────────────── */
.kpi-row {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  margin-bottom: 16px;
}
.kpi {
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: var(--radius-md, 10px);
  padding: 14px 16px;
  position: relative;
}
.kpi-k { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--fg-2); }
.kpi-v {
  font-variant-numeric: tabular-nums;
  font-size: 26px; font-weight: 700; color: var(--fg-1);
  margin: 4px 0;
  line-height: 1.1;
}
.kpi-v.pos { color: var(--pos, #3ab77a); }
.kpi-v.neg { color: var(--neg, #e15555); }
.kpi-sub { font-size: 11px; color: var(--fg-2); }
.kpi-spark { position: absolute; top: 10px; right: 10px; opacity: 0.5; }

/* ─── Portfolio analytics grid ───────────────────────────────────── */
.ratio-grid {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
}
.ratio-cell {
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 10px 12px;
}
.ratio-k { font-size: 11px; color: var(--fg-2); }
.ratio-v {
  font-variant-numeric: tabular-nums;
  font-size: 20px; font-weight: 700; color: var(--accent);
  margin-top: 3px;
}
.ratio-v.pos { color: var(--pos, #3ab77a); }
.ratio-v.neg { color: var(--neg, #e15555); }

/* ─── Calibration reliability diagram ────────────────────────────── */
.rel-diag {
  display: grid; gap: 2px;
  grid-template-columns: repeat(10, 1fr);
  margin: 12px 0;
}
.rel-bin {
  background: var(--bg-2); border: 1px solid var(--border);
  padding: 4px; border-radius: 3px;
  font-size: 10px; text-align: center;
}
.rel-bin-bar { height: 40px; position: relative; background: var(--bg-3); margin-bottom: 2px; }
.rel-bin-bar span {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: var(--accent);
}
.rel-bin-bar .ref { background: transparent; border-top: 1px dashed var(--fg-3); }

/* ─── Shadow variance ─────────────────────────────────────────────── */
.shadow-kpi { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.bias { font-weight: 700; }
.bias.pos { color: var(--pos, #3ab77a); }
.bias.neg { color: var(--neg, #e15555); }

/* ─── Journal ─────────────────────────────────────────────────────── */
.journal-entry {
  background: var(--bg-2); border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  margin-bottom: 8px;
}
.journal-entry.win { border-left-color: var(--pos, #3ab77a); }
.journal-entry.loss { border-left-color: var(--neg, #e15555); }
.journal-head { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.journal-ticker { font-weight: 700; font-size: 14px; }
.journal-pnl { font-variant-numeric: tabular-nums; font-weight: 700; }
.journal-thesis { font-size: 12px; margin: 4px 0; color: var(--fg-1); }
.journal-meta { font-size: 11px; color: var(--fg-2); }

/* ─── Alerts ─────────────────────────────────────────────────────── */
.alert-row {
  display: grid; gap: 10px; align-items: center;
  grid-template-columns: auto 1fr auto auto;
  padding: 8px 12px; background: var(--bg-2);
  border-left: 3px solid var(--accent); border-radius: var(--radius-sm);
  margin-bottom: 6px;
}
.alert-row.sev-crit { border-left-color: var(--neg, #e15555); }
.alert-row.sev-warn { border-left-color: var(--warn, #d4a017); }
.alert-row.sev-info { border-left-color: var(--accent); }
.alert-ts { font-size: 11px; color: var(--fg-2); font-variant-numeric: tabular-nums; }
.alert-msg { font-size: 13px; color: var(--fg-1); }
.alert-badge {
  font-size: 10px; padding: 2px 6px; border-radius: 10px;
  background: var(--bg-3); text-transform: uppercase; letter-spacing: 0.05em;
}

/* ─── Keyboard shortcuts sheet ───────────────────────────────────── */
.kbd-sheet {
  display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.kbd-row { display: flex; align-items: baseline; gap: 10px; }
.kbd-row kbd {
  background: var(--bg-3); border: 1px solid var(--border);
  padding: 2px 6px; border-radius: 3px; font-size: 11px;
  font-family: var(--font-mono, ui-monospace, monospace);
}

/* ─── Broker capability matrix (Settings) ─────────────────────────── */
.broker-matrix {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  margin-top: 10px;
}
.broker-card {
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 12px 14px;
  display: flex; flex-direction: column; gap: 6px;
  transition: border-color 120ms, transform 120ms;
}
.broker-card:hover { border-color: var(--border-strong); }
.broker-head {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px;
}
.broker-head strong { color: var(--fg-0); font-weight: 600; }
.broker-badge {
  font-size: 9px; font-weight: 700;
  padding: 2px 6px; border-radius: 3px;
  text-transform: uppercase; letter-spacing: 0.05em;
  margin-left: auto;
}
.broker-badge.ok { background: rgba(31,183,122,0.15); color: var(--strong-buy); }
.broker-badge.warn { background: rgba(240,160,32,0.15); color: var(--sell); }
.broker-badge.dim { background: var(--bg-3); color: var(--fg-3); }
.broker-meta {
  font-size: 11px; color: var(--fg-2);
  text-transform: capitalize;
}
.broker-assets, .broker-caps {
  display: flex; flex-wrap: wrap; gap: 4px;
  margin: 2px 0;
}
.asset-chip {
  font-size: 10px; padding: 2px 7px; border-radius: 10px;
  background: var(--accent-dim); color: var(--accent);
  border: 1px solid rgba(212,160,23,0.3);
  text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600;
}
.cap-chip {
  font-size: 10px; padding: 2px 6px; border-radius: 3px;
  background: var(--bg-3); color: var(--fg-1);
  border: 1px solid var(--border);
}
.broker-fees, .broker-api {
  font-size: 11px; color: var(--fg-2); line-height: 1.45;
}
.broker-fees strong, .broker-api strong {
  color: var(--fg-1); font-weight: 600; margin-right: 4px;
  text-transform: uppercase; letter-spacing: 0.05em; font-size: 10px;
}
.broker-note {
  margin-top: 4px; padding: 6px 8px;
  background: var(--bg-1); border-left: 2px solid var(--accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 11px; color: var(--fg-1); line-height: 1.5;
}

/* ─── Alerts nav badge ────────────────────────────────────────────── */
.rail .nav-item .badge.alert {
  background: rgba(229,62,62,0.15);
  color: var(--strong-sell);
  font-weight: 700;
  animation: alertPulse 2s ease-in-out infinite;
}
@keyframes alertPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

/* ─── KPI deltas (Now hero) ───────────────────────────────────────── */
.kpi-delta {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 11px; font-weight: 600;
  font-variant-numeric: tabular-nums;
  padding: 1px 5px; border-radius: 3px;
  margin-left: 6px;
  vertical-align: 3px;
}
.kpi-delta.pos { color: var(--strong-buy); background: rgba(31,183,122,0.1); }
.kpi-delta.neg { color: var(--strong-sell); background: rgba(229,62,62,0.1); }
.kpi-delta.flat { color: var(--fg-3); background: var(--bg-3); }
.kpi-spark-mini {
  display: inline-block;
  width: 50px; height: 14px;
  vertical-align: middle;
  margin-left: 8px;
  opacity: 0.7;
}

/* ─── Cascade cards (Now buy/sell fallback tiers) ─────────────────── */
.cascade-0 { /* strong tier — normal card chrome */ }
.cascade-1 { border-style: dashed; border-color: var(--border-strong); }
.cascade-2 { border-style: dashed; border-color: var(--fg-3); opacity: 0.92; }
.cascade-3 { border-style: dashed; border-color: var(--fg-3); opacity: 0.75; }
.cascade-tag {
  display: inline-block;
  font-size: 9px; font-weight: 700;
  padding: 2px 6px; border-radius: 3px;
  text-transform: uppercase; letter-spacing: 0.05em;
  margin-left: 8px; vertical-align: 2px;
}
.cascade-tag.tier-1 { background: rgba(45,156,255,0.12); color: var(--buy); }
.cascade-tag.tier-2 { background: rgba(138,146,160,0.14); color: var(--fg-2); }
.cascade-tag.tier-3 { background: rgba(87,93,104,0.2); color: var(--fg-3); }
.cascade-hint { margin: 2px 0 8px; line-height: 1.45; }
.rail .nav-item .badge.cascade-mid {
  background: rgba(45,156,255,0.15);
  color: var(--buy);
}

/* ─── Calibration confidence histogram overlay ────────────────────── */
.rel-bin-bar .sample-dot {
  position: absolute; top: -6px; left: 50%;
  transform: translateX(-50%);
  width: 5px; height: 5px;
  background: var(--accent); border-radius: 50%;
  opacity: 0.85;
}
.rel-bin-bar .sample-count {
  position: absolute; top: -4px; right: 2px;
  font-size: 8px; color: var(--fg-3);
  font-variant-numeric: tabular-nums;
}
.rel-legend {
  display: flex; gap: 16px; flex-wrap: wrap;
  margin-top: 8px;
  font-size: 11px; color: var(--fg-2);
}
.rel-legend .swatch {
  display: inline-block; width: 10px; height: 10px;
  vertical-align: middle; margin-right: 4px;
  border-radius: 2px;
}
.rel-legend .swatch.actual { background: var(--accent); }
.rel-legend .swatch.perfect {
  background: transparent;
  border-top: 1px dashed var(--fg-3);
  height: 1px; margin-top: 4px;
}

/* ─── Session-aware extended-hours badges ─────────────────────────────
 * Surfaced by Yahoo's marketState (PRE / POST / CLOSED). A ticker in a
 * regular RTH session gets no badge to keep the UI quiet during the day.
 * The badge sits next to the ticker in tickerList and signalTable, and
 * appears as a header strip in the focus pane.
 */
.session-badge {
  display: inline-block;
  font-size: 9px; font-weight: 700;
  padding: 2px 5px; border-radius: 3px;
  margin-left: 6px; vertical-align: 1px;
  text-transform: uppercase; letter-spacing: 0.03em;
  font-variant-numeric: tabular-nums;
  border: 1px solid transparent;
}
.session-badge.session-pre {
  background: rgba(255, 184, 45, 0.12);
  color: #ffb82d;
  border-color: rgba(255, 184, 45, 0.35);
}
.session-badge.session-post {
  background: rgba(130, 90, 255, 0.14);
  color: #b59bff;
  border-color: rgba(130, 90, 255, 0.35);
}
.session-badge.session-closed {
  background: rgba(138, 146, 160, 0.14);
  color: var(--fg-3);
  border-color: rgba(138, 146, 160, 0.3);
}
/* Focus pane header strip */
.session-strip {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin: 2px 0 10px;
  font-variant-numeric: tabular-nums;
}
.session-strip .session-price {
  font-weight: 700; font-size: 15px;
}
.session-strip .session-delta { font-weight: 600; font-size: 13px; }
.session-strip .session-delta.pos { color: var(--strong-buy); }
.session-strip .session-delta.neg { color: var(--strong-sell); }
.session-strip .session-close { opacity: 0.7; }

/* Top-bar market-state dot tint when universe is in extended hours.
 * The underlying regime class (.on/.off/.trn) still drives the base color;
 * the session class adds a ring so you can tell "risk-on + PRE" apart
 * from "risk-on + regular" at a glance. */
.dot.session-pre {
  box-shadow: 0 0 0 2px rgba(255, 184, 45, 0.45);
}
.dot.session-post {
  box-shadow: 0 0 0 2px rgba(130, 90, 255, 0.45);
}
.dot.session-closed {
  box-shadow: 0 0 0 2px rgba(138, 146, 160, 0.35);
  opacity: 0.75;
}

/* Signal-table session column: keep compact. */
.dense td .session-badge { margin-left: 0; }

/* Stale badge: quote cache is >3 min old. Dim + dashed border so the eye can
 * tell the session flag is being held open by a cached tick rather than a
 * fresh one. Hover title carries the exact age. */
.session-badge.stale {
  opacity: 0.55;
  border-style: dashed;
}

/* Regular-session strip + age chip.
 * Rendered on the focus pane for RTH too, so there's always one source of
 * truth for "latest price + age". Keep visually quieter than pre/post/closed
 * so the eye isn't drawn to it unless something's off. */
.session-badge.session-regular {
  background: rgba(90, 180, 120, 0.12);
  color: #7dd59a;
  border-color: rgba(90, 180, 120, 0.32);
}
.session-strip-regular { opacity: 0.85; }
.quote-age {
  display: inline-block;
  font-size: 10px; font-weight: 600;
  padding: 1px 5px; border-radius: 3px;
  margin-left: 4px;
  color: var(--fg-3);
  background: rgba(138, 146, 160, 0.08);
  border: 1px solid rgba(138, 146, 160, 0.22);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.quote-age.stale {
  color: #ffb82d;
  background: rgba(255, 184, 45, 0.08);
  border-color: rgba(255, 184, 45, 0.3);
  border-style: dashed;
}

/* Live quote cache panel in Data view */
.quote-cache-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px;
  margin-top: 8px;
}
.quote-cache-cell {
  padding: 8px 10px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-variant-numeric: tabular-nums;
}
.quote-cache-cell .qc-head {
  display: flex; align-items: center; justify-content: space-between;
  font-weight: 700; font-size: 12px;
}
.quote-cache-cell .qc-price { font-size: 15px; font-weight: 600; }
.quote-cache-cell .qc-meta { font-size: 10px; color: var(--fg-3); margin-top: 2px; }

/* ─── focus pane — progressive disclosure + education ───────────────
 * Structure: head (ticker + name + class chip + leverage chip) →
 * session strip → score block → actionable decision → leverage
 * warning (if applicable) → XAI contribs → rationale → route button →
 * venues → disclosure toggle → collapsible brief. Default collapsed
 * so the decision is visible in one screen; click to unfold the full
 * Gemini-framework education layer. */
.focus-head {
  display: flex; flex-direction: column; gap: 2px;
  margin-bottom: 6px;
}
.focus-head h3 {
  display: flex; align-items: center; gap: 6px; margin: 0;
}
.focus-name { font-size: 12px; line-height: 1.3; }
.focus-meta { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }

/* Clickable asset-class chip. Opens the class brief in the focus pane. */
.class-chip {
  display: inline-block;
  font-size: 10px; font-weight: 700; letter-spacing: 0.3px;
  padding: 2px 8px; border-radius: 10px;
  background: rgba(212, 160, 23, 0.10);
  color: var(--color-directional-neutral, #d4a017); border: 1px solid rgba(212, 160, 23, 0.3);
  cursor: pointer; text-decoration: none;
}
.class-chip:hover { background: rgba(212, 160, 23, 0.18); }

/* Leverage chip — ±2×, ±3×, ±1.5×, etc. Sits next to ticker. */
.lev-chip {
  display: inline-block;
  font-size: 10px; font-weight: 800; letter-spacing: 0.3px;
  padding: 2px 6px; border-radius: 4px;
  font-variant-numeric: tabular-nums;
  border: 1px solid transparent;
}
.lev-chip.lev-bull {
  background: rgba(38, 188, 120, 0.14);
  color: var(--color-directional-bullish, #3fd38f); border-color: rgba(38, 188, 120, 0.35);
}
.lev-chip.lev-bear {
  background: rgba(245, 95, 95, 0.14);
  color: #ff7d7d; border-color: rgba(245, 95, 95, 0.35);
}
/* Family-coherence badge — appears next to ticker in Forecast view to show
 * how a leveraged/inverse product relates to its underlying-derived bias.
 * "✓ AAPL" = coherent with the AAPL family bias; "⚠ AAPL" = contradicts. */
.coh-chip {
  display: inline-block;
  font-size: 10px; font-weight: 700; letter-spacing: 0.2px;
  padding: 2px 6px; border-radius: 4px;
  margin-left: 4px;
  font-variant-numeric: tabular-nums;
  border: 1px solid transparent;
}
.coh-chip.coh-ok {
  background: rgba(96, 165, 250, 0.10);
  color: #93c5fd; border-color: rgba(96, 165, 250, 0.30);
}
.coh-chip.coh-bad {
  background: rgba(245, 158, 11, 0.16);
  color: #fbbf24; border-color: rgba(245, 158, 11, 0.45);
  font-weight: 800;
}
/* Affordance for v61 column tooltips — `?` cursor on any header that has
 * a tooltip applied. Subtle dotted underline hints "more info on hover". */
th[title]:not([title='']),
th[data-th-tooltip-applied='1'] {
  cursor: help;
  text-decoration: underline dotted rgba(255,255,255,0.20);
  text-underline-offset: 3px;
}

/* Actionable decision block — the "what do I DO right now" answer.
 * Surfaces above the XAI so the user reads the verdict first, the
 * reasoning second. Colour-coded by action type. */
.actionable {
  margin: 10px 0;
  padding: 10px 12px;
  border-radius: 6px;
  border-left: 3px solid var(--fg-3);
  background: rgba(255, 255, 255, 0.025);
}
.actionable-verdict {
  font-weight: 700; font-size: 13px; letter-spacing: 0.3px;
  margin-bottom: 4px;
}
.actionable-body { font-size: 12px; line-height: 1.4; color: var(--fg-2); }
.actionable.act-buy    { border-left-color: var(--color-directional-bullish, #3fd38f); background: rgba(38, 188, 120, 0.06); }
.actionable.act-sell   { border-left-color: #ff7d7d; background: rgba(245, 95, 95, 0.06); }
.actionable.act-watch  { border-left-color: #ffb82d; background: rgba(255, 184, 45, 0.06); }
.actionable.act-hold   { border-left-color: #8a92a0; }
.actionable.pending    { border-left-color: #8a92a0; }
.actionable.act-buy .actionable-verdict    { color: var(--color-directional-bullish, #3fd38f); }
.actionable.act-sell .actionable-verdict   { color: #ff7d7d; }
.actionable.act-watch .actionable-verdict  { color: #ffb82d; }

/* Explicit leverage/vol-drag warning that appears when a leveraged
 * product has a confirmed buy/sell signal. Designed to be impossible
 * to miss — amber fill + bold heading. */
.focus-warning {
  margin: 8px 0;
  padding: 8px 10px;
  border-radius: 6px;
  background: rgba(255, 184, 45, 0.08);
  border: 1px solid rgba(255, 184, 45, 0.3);
  color: #ffd07f;
  font-size: 11px; line-height: 1.45;
}
.focus-warning strong { color: #ffb82d; }

.focus-section { margin-top: 10px; }
.section-title {
  font-size: 10px; font-weight: 700; letter-spacing: 0.8px;
  text-transform: uppercase; color: var(--fg-3);
  margin-bottom: 4px;
}
.chips { display: flex; flex-wrap: wrap; gap: 4px; }
.chip {
  display: inline-block;
  font-size: 10px; padding: 2px 6px; border-radius: 3px;
  background: var(--bg-2); border: 1px solid var(--border);
  color: var(--fg-2);
}

/* LS5 layer-impact decomposition (focus pane).
 * Stacked horizontal bar showing what fraction of a composite score
 * is driven by L1 asset class, L3 sector, L4 microsector, and global signal. */
.focus-layer-impact { margin-top: 12px; padding: 10px 12px; background: var(--bg-2); border: 1px solid var(--border); border-radius: 6px; }
.li-headline { margin: 4px 0 8px; }
.li-bar {
  display: flex; height: 10px; width: 100%;
  border-radius: 5px; overflow: hidden;
  background: var(--bg-1); border: 1px solid var(--border);
}
.li-seg { display: inline-block; height: 100%; transition: width 200ms ease; }
.li-l1 { background: #60a5fa; } /* blue — asset class */
.li-l3 { background: #a78bfa; } /* purple — sector */
.li-l4 { background: #f59e0b; } /* amber — microsector */
.li-g  { background: #8b93a3; } /* gray — global */
.li-legend { list-style: none; padding: 0; margin: 8px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 4px 12px; font-size: 11px; }
.li-legend li { display: flex; align-items: center; gap: 6px; }
.li-dot { display: inline-block; width: 8px; height: 8px; border-radius: 2px; flex: 0 0 auto; }
@media (max-width: 640px){ .li-legend { grid-template-columns: 1fr; } }

/* Progressive disclosure toggle — default state: brief collapsed.
 * Click once to expand the full Gemini-framework education. */
.disclose-toggle {
  display: block; width: 100%;
  margin-top: 10px;
  padding: 8px 10px;
  border-radius: 6px;
  background: var(--bg-2); border: 1px solid var(--border);
  color: var(--fg-2); font-size: 12px; font-weight: 600;
  cursor: pointer; text-align: center;
}
.disclose-toggle:hover { background: var(--bg-3); color: var(--fg-1); }
.disclose-open-label { display: none; }
.focus.disclose-open .disclose-open-label { display: inline; }
.focus.disclose-open .disclose-closed-label { display: none; }

.focus-brief {
  max-height: 0; overflow: hidden;
  transition: max-height 0.3s ease;
  margin-top: 8px;
}
.focus.disclose-open .focus-brief {
  max-height: none;
}

/* Class-focus view (different container — always expanded). */
.focus.class-focus .focus-brief,
.focus.class-focus {
  max-height: none;
}

/* Brief sections — Fundamentals / Technicals / Macro / Risk / Micro /
 * Mechanics. Tight line-height, generous whitespace between sections. */
.brief-tagline {
  font-style: italic; color: var(--fg-2);
  font-size: 12px; line-height: 1.4; padding: 6px 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 8px;
}
.brief-section { margin-bottom: 12px; }
.brief-title {
  font-size: 10px; font-weight: 700; letter-spacing: 0.8px;
  text-transform: uppercase; color: var(--fg-3);
  margin-bottom: 4px;
}
.brief-list {
  list-style: disc; margin: 0 0 0 18px;
  font-size: 11.5px; line-height: 1.5;
  color: var(--fg-2);
}
.brief-list li { margin: 2px 0; }
.brief-note {
  padding: 6px 8px;
  background: rgba(255, 184, 45, 0.08);
  border-left: 2px solid rgba(255, 184, 45, 0.45);
  border-radius: 3px;
  font-size: 11.5px; line-height: 1.45;
  margin-bottom: 8px;
}
.brief-actionable {
  margin-top: 8px; padding: 8px 10px;
  border-radius: 6px;
  background: rgba(38, 188, 120, 0.06);
  border-left: 3px solid var(--color-directional-bullish, #3fd38f);
  font-size: 11.5px; line-height: 1.45;
}
.brief-actionable strong { color: var(--color-directional-bullish, #3fd38f); }
.brief-footer {
  margin-top: 8px; padding-top: 6px;
  border-top: 1px solid var(--border);
  font-size: 10px; line-height: 1.4;
}
.focus-footer { margin-top: 10px; text-align: center; }
.focus.class-focus .focus-head h3 {
  color: var(--color-directional-neutral, #d4a017);
}

/* ─── Atlas (Markets) view ────────────────────────────────────────── */
.atlas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px;
  margin-top: 8px;
}
.atlas-cell {
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: 6px; padding: 10px 12px;
}
.atlas-cell h3 {
  font-size: 12.5px; font-weight: 700; margin: 0 0 4px;
  color: var(--fg-1); letter-spacing: 0.3px;
}
.atlas-cell p { margin: 4px 0; }
.atlas-cell .brief-actionable {
  margin-top: 6px; padding: 6px 8px;
  border-radius: 4px; font-size: 11px; line-height: 1.4;
}

/* ─── Heatmap view ───────────────────────────────────────────────── */
.hm-grid { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.hm-row {
  display: grid; grid-template-columns: 180px 1fr; gap: 8px;
  align-items: stretch;
}
.hm-label {
  display: flex; flex-direction: column; justify-content: center;
  padding: 6px 10px;
  background: var(--bg-2); border-radius: 6px;
}
.hm-label .class-chip {
  display: inline-block; margin-bottom: 3px;
  max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hm-cells {
  display: flex; flex-wrap: wrap; gap: 3px;
  min-height: 42px;
}
.hm-cell {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 56px; padding: 6px 8px;
  border-radius: 4px;
  cursor: pointer; transition: transform 0.08s ease;
  border: 1px solid rgba(255,255,255,0.05);
}
.hm-cell:hover { transform: scale(1.04); z-index: 2; }
.hm-tix { font-size: 10.5px; font-weight: 700; color: var(--fg-1); }
.hm-sc  { font-size: 11px; font-weight: 600; color: var(--fg-2); margin-top: 1px; }

/* ─── News / Sentiment view ──────────────────────────────────────── */
.news-row {
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.news-row:last-child { border-bottom: 0; }
.news-head {
  display: flex; gap: 10px; align-items: center;
  font-size: 11px; margin-bottom: 3px;
}
.news-sent {
  display: inline-block; padding: 1px 6px;
  border-radius: 3px;
  font-weight: 700; font-size: 10.5px;
  background: var(--bg-2);
}
.news-sent.pos { background: rgba(38,188,120,0.15); color: var(--color-directional-bullish, #3fd38f); }
.news-sent.neg { background: rgba(245,95,95,0.15);  color: var(--color-directional-bearish, #f26e6e); }
.news-tix { font-weight: 700; color: var(--fg-1); }
.news-title {
  font-size: 12.5px; line-height: 1.45; color: var(--fg-2);
}
.alert-ty {
  display: inline-block; padding: 1px 6px;
  border-radius: 3px; background: var(--bg-2);
  font-size: 10px; font-weight: 700; letter-spacing: 0.4px;
  text-transform: uppercase; color: var(--fg-2);
  margin-right: 8px;
}

/* ─── Ask AI view ────────────────────────────────────────────────── */
.ask-out {
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: 6px; padding: 10px 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11.5px; line-height: 1.5;
  color: var(--fg-1);
  white-space: pre-wrap; word-wrap: break-word;
  max-height: 360px; overflow: auto;
  margin: 8px 0;
}

/* ─── Alpha Lab view ─────────────────────────────────────────────── */
.alpha-gauge {
  padding: 16px 20px; border-radius: 8px;
  background: linear-gradient(180deg, rgba(38,188,120,0.08), rgba(38,188,120,0.02));
  border: 1px solid rgba(38,188,120,0.35);
  margin-bottom: 12px;
}
.alpha-gauge.neg {
  background: linear-gradient(180deg, rgba(245,95,95,0.08), rgba(245,95,95,0.02));
  border-color: rgba(245,95,95,0.35);
}
.alpha-gauge-num {
  font-size: 32px; font-weight: 700;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--color-directional-bullish, #3fd38f); letter-spacing: -0.02em;
}
.alpha-gauge.neg .alpha-gauge-num { color: var(--color-directional-bearish, #f26e6e); }
.alpha-table td:nth-child(4),
.alpha-table td:nth-child(5),
.alpha-table td:nth-child(6) {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11.5px;
  text-align: right;
}

/* ─── Factor Optimality status chips ─────────────────────────────── */
.fo-strong       { color: var(--color-directional-bullish, #3fd38f); font-weight: 700; }
.fo-earning      { color: var(--color-directional-bullish, #3fd38f); }
.fo-weak         { color: #c9cfd8; }
.fo-noise        { color: var(--fg-3); }
.fo-quarantined  { color: var(--color-directional-bearish, #f26e6e); font-weight: 600; }
.fo-warming-up   { color: var(--color-directional-neutral, #d4a017); font-style: italic; }

/* ─── Small utility buttons (close/remove) ──────────────────────── */
.xbtn {
  background: var(--bg-2); border: 1px solid var(--border);
  color: var(--fg-2);
  width: 24px; height: 24px; padding: 0;
  border-radius: 4px;
  cursor: pointer; line-height: 1;
  font-size: 13px; font-weight: 600;
}
.xbtn:hover { background: rgba(245,95,95,0.15); color: var(--color-directional-bearish, #f26e6e); }
.xbtn.primary { background: rgba(38,188,120,0.15); color: var(--color-directional-bullish, #3fd38f); border-color: rgba(38,188,120,0.35); width: auto; padding: 0 8px; }
.xbtn.primary:hover { background: rgba(38,188,120,0.28); color: var(--color-directional-bullish, #3fd38f); }
.xbtn:active, .xbtn.primary:active { transform: scale(0.94); transition: transform 80ms var(--ease-out); }
@media (prefers-reduced-motion: reduce) { .xbtn:active, .xbtn.primary:active { transform: none; } }

/* ─── Class-chip active state (watchlist tabs) ──────────────────── */
.class-chip.active {
  background: rgba(212, 160, 23, 0.18);
  border-color: rgba(212, 160, 23, 0.45);
  color: #e5ba3a;
}

/* ─── ML intelligence surfaces (badges, cards) ───────────────────── */
.ml-badge {
  display: inline-block; padding: 1px 6px; margin-left: 4px;
  border-radius: 3px; font-size: 10px; font-weight: 700;
  background: rgba(120, 90, 220, 0.15); color: #b49efc;
  letter-spacing: 0.3px;
}
.ml-badge.up   { background: rgba(38,188,120,0.18); color: var(--color-directional-bullish, #3fd38f); }
.ml-badge.down { background: rgba(245,95,95,0.18);  color: var(--color-directional-bearish, #f26e6e); }
.ml-badge.low  { background: rgba(138,146,160,0.15); color: var(--fg-2); }
.ml-card {
  background: linear-gradient(180deg, rgba(120,90,220,0.06), rgba(120,90,220,0.02));
  border: 1px solid rgba(120,90,220,0.25);
  border-radius: 6px; padding: 10px 12px;
  margin: 10px 0;
}
.ml-card h3 {
  font-size: 11px; font-weight: 700; letter-spacing: 0.5px;
  text-transform: uppercase; color: #b49efc;
  margin: 0 0 6px;
}
.ml-conf-bar {
  height: 6px; border-radius: 3px;
  background: var(--bg-3, var(--bg-2));
  overflow: hidden; margin: 4px 0;
}
.ml-conf-bar > span {
  display: block; height: 100%;
  background: linear-gradient(90deg, #7a5ddc, #b49efc);
}

/* Responsive fallback — tighten atlas + heatmap on mobile */
@media (max-width: 900px) {
  .atlas-grid { grid-template-columns: 1fr; }
  .hm-row { grid-template-columns: 100px 1fr; }
  .alpha-gauge-num { font-size: 24px; }
}

/* ── Holdings view ──────────────────────────────────────────────────── */
.holdings-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin: 0 0 14px;
  padding: 12px 14px;
  background: linear-gradient(180deg, rgba(212,160,23,0.04), rgba(212,160,23,0.01));
  border: 1px solid rgba(212,160,23,0.18);
  border-radius: 8px;
}
.holdings-summary .hs-cell { min-width: 0; }
.holdings-summary .hs-k {
  font-size: 10px; font-weight: 600; letter-spacing: 0.5px;
  text-transform: uppercase; color: var(--fg-2);
  margin-bottom: 2px;
}
.holdings-summary .hs-v { font-size: 18px; font-weight: 600; color: var(--fg); }
.holdings-summary .hs-v.pos { color: var(--pos, #3fd38f); }
.holdings-summary .hs-v.neg { color: var(--neg, #f26e6e); }
.holdings-summary .hs-v .small { font-size: 11px; font-weight: 500; opacity: 0.8; }

.holdings-acct { margin-bottom: 14px; }
.holdings-acct:last-child { margin-bottom: 0; }
.holdings-acct-hdr {
  font-size: 11px; font-weight: 700; letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--fg-2);
  padding: 6px 2px 4px;
  border-bottom: 1px solid var(--bord, rgba(138,146,160,0.15));
  margin-bottom: 6px;
}

.holdings-table { font-size: 13px; }
.holdings-table th { font-size: 10px; letter-spacing: 0.4px; text-transform: uppercase; }
.holdings-table input.h-edit {
  background: var(--bg-2); border: 1px solid var(--bord, rgba(138,146,160,0.2));
  color: var(--fg); border-radius: 3px; padding: 3px 6px;
  font-variant-numeric: tabular-nums;
}
.holdings-table input.h-edit:focus {
  border-color: var(--gold, #d4a017); outline: none;
}

/* ── Hamburger (mobile/tablet only) ─────────────────────────────────── */
.hamburger {
  display: none;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0;
  width: 36px; height: 36px;
  cursor: pointer;
  flex-direction: column; justify-content: center; align-items: center; gap: 4px;
  transition: border-color 120ms, background 120ms;
}
.hamburger:hover { border-color: var(--border-strong); background: var(--bg-2); }
.hamburger span {
  display: block;
  width: 18px; height: 2px;
  background: var(--fg-1);
  border-radius: 1px;
  transition: transform 150ms, opacity 150ms;
}
.hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ── Cockpit quick-switch tabs ─────────────────────────────────────── */
.cockpit-tabs {
  position: sticky; top: 0;
  z-index: 20;
  background: var(--bg-0);
  border-bottom: 1px solid var(--border);
  margin: -16px -20px 14px;
  padding: 0 16px;
}
.cockpit-tabs .ct-scroll {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 8px 4px;
}
.cockpit-tabs .ct-scroll::-webkit-scrollbar { display: none; }
.cockpit-tabs .ct-tab {
  display: inline-flex; align-items: center; gap: 6px;
  white-space: nowrap;
  padding: 6px 12px;
  font-size: 12px; font-weight: 500;
  color: var(--fg-2);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  user-select: none;
  transition: background 120ms, color 120ms, border-color 120ms;
  flex: 0 0 auto;
}
.cockpit-tabs .ct-tab:hover {
  color: var(--fg-1);
  background: var(--bg-2);
  border-color: var(--border);
}
.cockpit-tabs .ct-tab.active {
  color: var(--accent);
  background: var(--accent-dim);
  border-color: rgba(212,160,23,0.35);
}
.cockpit-tabs .ct-tab .ic { font-size: 11px; opacity: 0.85; }
.cockpit-tabs .ct-tab .ct-badge {
  display: none;
  min-width: 16px; height: 16px;
  padding: 0 5px;
  font-size: 10px; font-weight: 600;
  color: var(--bg-0);
  background: var(--accent);
  border-radius: 999px;
  align-items: center; justify-content: center;
  line-height: 1;
}
.cockpit-tabs .ct-tab .ct-badge.show { display: inline-flex; }

/* ── Mobile drawer (full nav) ──────────────────────────────────────── */
.drawer-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 60;
  opacity: 0;
  transition: opacity 180ms;
}
.drawer-backdrop.open { opacity: 1; }
.drawer-backdrop[hidden] { display: none; }
.mobile-drawer {
  position: fixed; top: 0; left: 0; bottom: 0;
  width: min(320px, 86vw);
  background: var(--bg-1);
  border-right: 1px solid var(--border);
  z-index: 61;
  transform: translateX(-100%);
  transition: transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
  display: flex; flex-direction: column;
  box-shadow: 4px 0 24px rgba(0,0,0,0.4);
}
.mobile-drawer.open { transform: translateX(0); }
.mobile-drawer .md-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-1);
}
.mobile-drawer .md-title {
  font-size: 13px; font-weight: 600; letter-spacing: 0.3px;
  color: var(--fg-0);
}
.mobile-drawer .md-close {
  background: transparent; border: 1px solid var(--border);
  color: var(--fg-1);
  width: 30px; height: 30px;
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 14px;
  display: flex; align-items: center; justify-content: center;
}
.mobile-drawer .md-close:hover { background: var(--bg-2); }
.mobile-drawer .md-body {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0 24px;
  -webkit-overflow-scrolling: touch;
}
.mobile-drawer .md-group { margin-bottom: 8px; }
.mobile-drawer .md-group-title {
  font-size: 10px; font-weight: 700; letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--fg-3);
  padding: 10px 16px 4px;
}
.mobile-drawer .md-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px;
  font-size: 13px;
  color: var(--fg-1);
  cursor: pointer;
  border-left: 3px solid transparent;
  transition: background 100ms, border-color 100ms;
}
.mobile-drawer .md-item:hover { background: var(--bg-2); }
.mobile-drawer .md-item.active {
  background: var(--accent-dim);
  border-left-color: var(--accent);
  color: var(--fg-0);
}
.mobile-drawer .md-item .ic { width: 16px; text-align: center; opacity: 0.75; font-size: 14px; }
.mobile-drawer .md-item .md-badge {
  margin-left: auto;
  min-width: 16px; height: 16px;
  padding: 0 5px;
  font-size: 10px; font-weight: 600;
  color: var(--bg-0);
  background: var(--accent);
  border-radius: 999px;
  display: none;
  align-items: center; justify-content: center;
  line-height: 1;
}
.mobile-drawer .md-item .md-badge.show { display: inline-flex; }
.mobile-drawer[aria-hidden="true"] { pointer-events: none; }

/* Desktop: hide mobile-only elements */
@media (min-width: 1025px) {
  .hamburger { display: none !important; }
  .mobile-drawer, .drawer-backdrop { display: none !important; }
}
/* Tablet + mobile: show hamburger, let drawer slide in over rail */
@media (max-width: 1024px) {
  .hamburger { display: inline-flex; }
  .topbar .brand .v2 { display: none; }
  .topbar .palette-trigger-text { display: none; }
  .topbar .palette-trigger { flex: 1; min-width: 0; max-width: 100%; }
  .topbar .palette-trigger kbd { display: none; }
}
/* Tablet range (641-1024): hamburger is the primary nav, hide bottom tab bar */
@media (min-width: 641px) and (max-width: 1024px) {
  .mobile-tab-bar { display: none !important; }
}

/* ── Computed assessment (focus pane) ──────────────────────────────── */
.computed-assessment {
  margin: 14px 0 10px;
  padding: 10px 12px;
  background: linear-gradient(180deg, rgba(212,160,23,0.04), rgba(212,160,23,0.01));
  border: 1px solid rgba(212,160,23,0.16);
  border-radius: 8px;
}
.ca-head {
  font-size: 10px; font-weight: 700; letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
}
.ca-section { margin-bottom: 10px; }
.ca-section:last-child { margin-bottom: 0; }
.ca-section-head {
  display: flex; align-items: baseline; gap: 8px;
  padding: 4px 0 4px;
  border-bottom: 1px dashed var(--border);
  margin-bottom: 4px;
}
.ca-section-title {
  font-size: 11px; font-weight: 600;
  color: var(--fg-1);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.ca-list { list-style: none; padding: 0; margin: 0; }
.ca-row {
  display: grid;
  grid-template-columns: 1.2fr 0.7fr 1.8fr auto;
  gap: 8px;
  padding: 5px 0;
  font-size: 11px;
  border-bottom: 1px solid rgba(255,255,255,0.03);
}
.ca-row:last-child { border-bottom: none; }
.ca-metric { color: var(--fg-1); font-weight: 500; }
.ca-val { color: var(--fg-0); font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.ca-interp { color: var(--fg-2); font-size: 10.5px; }
.ca-tag {
  font-size: 9px; font-weight: 700;
  padding: 2px 6px; border-radius: 999px;
  letter-spacing: 0.3px;
  white-space: nowrap;
  align-self: center;
}
.ca-tag.ca-pos { background: rgba(63,211,143,0.16); color: var(--pos, #3fd38f); }
.ca-tag.ca-pos-weak { background: rgba(63,211,143,0.08); color: var(--pos, #3fd38f); opacity: 0.85; }
.ca-tag.ca-neg { background: rgba(242,110,110,0.16); color: var(--neg, #f26e6e); }
.ca-tag.ca-neg-weak { background: rgba(242,110,110,0.08); color: var(--neg, #f26e6e); opacity: 0.85; }
.ca-tag.ca-neutral { background: var(--bg-2); color: var(--fg-2); }

/* Mobile: collapse metric + value into one column, stacked interp */
@media (max-width: 640px) {
  .ca-row {
    grid-template-columns: 1fr auto;
    grid-template-areas: "metric tag" "val tag" "interp interp";
    gap: 2px;
  }
  .ca-row .ca-metric { grid-area: metric; }
  .ca-row .ca-val { grid-area: val; }
  .ca-row .ca-interp { grid-area: interp; }
  .ca-row .ca-tag { grid-area: tag; }
}
/* Mobile: tighter cockpit tabs + mobile tab bar adjustments */
@media (max-width: 640px) {
  .cockpit-tabs { margin: -12px -12px 10px; padding: 0 8px; }
  .cockpit-tabs .ct-tab { padding: 6px 10px; font-size: 11px; }
  .mobile-tab-bar .tab .badge {
    position: absolute; top: 4px; right: 50%; transform: translateX(18px);
    min-width: 14px; height: 14px;
    padding: 0 4px;
    font-size: 9px; font-weight: 600;
    color: var(--bg-0); background: var(--accent);
    border-radius: 999px;
    display: none;
    align-items: center; justify-content: center;
    line-height: 1;
  }
  .mobile-tab-bar .tab { position: relative; }
  .mobile-tab-bar .tab .badge.show { display: inline-flex; }
}

/* ═══════════════════════════════════════════════════════════════════
   POLISH LAYER — v2.1 elite pass (2026-04-24)
   Non-destructive overrides applying Linear/Notion/Apple-tier fidelity:
   web-font typography, tabular-nums everywhere it matters, refined
   tier pills, editorial hero, clean table rhythm, numbered sections.
   ═══════════════════════════════════════════════════════════════════ */

/* -- Base typography + numerics -- */
html, body {
  font-family: var(--font-sans);
  font-feature-settings: "cv11" 1, "ss03" 1;
  letter-spacing: -0.005em;
}
code, kbd, samp,
.dense-table,
.factor-bar .fb-val,
.ca-val, .focus-score .num, .focus-hd .ticker,
.trade-plan .tp-cell .val,
.now-hero .hero-meta .m-val,
.now-action .act-ticker, .now-action .act-score,
.num, .ticker, .mono {
  font-family: var(--font-mono);
  font-feature-settings: "tnum" 1, "ss01" 1, "zero" 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

/* -- Text selection -- */
::selection { background: rgba(212,160,23,0.35); color: var(--fg-0); }

/* -- Scrollbars (subtle, track hidden) -- */
* { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.08) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.08);
  border-radius: 99px;
  border: 2px solid transparent;
  background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,0.18);
  background-clip: content-box;
}

/* -- Focus ring refinement -- */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: inherit;
}

/* -- Reduced motion -- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ───── Topbar ───── */
.topbar {
  background: linear-gradient(180deg, #151a23 0%, #12161d 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03), 0 1px 0 var(--border);
  padding: 0 var(--s-4);
}
.topbar .brand { font-weight: 700; letter-spacing: -0.01em; }
.topbar .brand .v2 {
  font-weight: 700; font-size: 9.5px; letter-spacing: 0.6px;
  border: 1px solid rgba(212,160,23,0.25);
}
.topbar .palette-trigger {
  font-size: 12.5px;
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.topbar .palette-trigger:hover {
  background: var(--bg-3);
  border-color: var(--border-strong);
  color: var(--fg-0);
}
.topbar .status { font-variant-numeric: tabular-nums; }
.topbar .status .dot {
  box-shadow: 0 0 0 3px rgba(31,183,122,0.15);
  transition: box-shadow var(--dur) var(--ease);
}
.topbar .status .dot.pre,
.topbar .status .dot.post { box-shadow: 0 0 0 3px rgba(240,160,32,0.15); }
.topbar .status .dot.closed { box-shadow: 0 0 0 3px rgba(138,146,160,0.15); }

/* ───── Rail ───── */
.rail { background: #0e1219; }
.rail .group-title {
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.9px;
  color: var(--fg-3);
  padding: var(--s-3) var(--s-4) var(--s-1);
}
.rail .nav-item {
  padding: 7px var(--s-4) 7px calc(var(--s-4) - 2px);
  font-weight: 500;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.rail .nav-item:hover { background: rgba(255,255,255,0.025); color: var(--fg-0); }
.rail .nav-item.active {
  background: linear-gradient(90deg, rgba(212,160,23,0.12), rgba(212,160,23,0.00) 70%);
  border-left-color: var(--accent);
  color: var(--fg-0);
  font-weight: 600;
}
.rail .nav-item.active .ic { opacity: 1; }
.rail .nav-item .badge {
  font-weight: 600; padding: 2px 7px;
  background: rgba(255,255,255,0.06);
  border: 1px solid transparent;
}

/* ───── Cockpit tabs (underline-active) ───── */
.cockpit-tabs {
  background: var(--bg-0);
  box-shadow: inset 0 -1px 0 var(--border);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.cockpit-tabs .ct-tab {
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  padding: 10px 14px;
  font-weight: 500;
  color: var(--fg-2);
  background: transparent;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.cockpit-tabs .ct-tab:hover { color: var(--fg-0); background: transparent; }
.cockpit-tabs .ct-tab.active {
  color: var(--fg-0);
  background: transparent;
  border-bottom-color: var(--accent);
  font-weight: 600;
}
.cockpit-tabs .ct-tab .ct-badge {
  background: rgba(212,160,23,0.18);
  color: var(--accent-hi);
  font-weight: 700;
}

/* ───── Cards ───── */
.card {
  border-radius: var(--r-md);
  box-shadow: var(--elev-1);
  transition: border-color var(--dur-fast) var(--ease);
}
.card:hover { border-color: var(--border-strong); }
.card h2 {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.7px;
  color: var(--fg-2);
}

/* ───── Now hero (editorial) ───── */
.now-hero {
  padding: var(--s-6);
  background:
    radial-gradient(80% 120% at 0% 0%, rgba(212,160,23,0.08), transparent 60%),
    radial-gradient(60% 100% at 100% 100%, rgba(91,141,239,0.05), transparent 60%),
    linear-gradient(180deg, var(--bg-1) 0%, var(--bg-2) 100%);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--elev-2);
  overflow: hidden;
  position: relative;
}
.now-hero::before {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 20px 20px;
  opacity: 0.35;
  pointer-events: none;
}
.now-hero > * { position: relative; z-index: 1; }
.now-hero .hero-regime {
  font-size: 10px; font-weight: 700; letter-spacing: 1px;
  color: var(--fg-2);
  margin-bottom: var(--s-2);
}
.now-hero .hero-headline {
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.18;
  color: var(--fg-0);
  margin: 0 0 var(--s-3);
}
.now-hero .hero-meta {
  font-size: 12.5px;
  gap: var(--s-5);
}
.now-hero .hero-meta .m-val { font-weight: 600; color: var(--fg-0); }

/* ───── Now actions ───── */
.now-action {
  background: rgba(255,255,255,0.02);
  border: 1px solid transparent;
  padding: 9px 12px;
  border-radius: var(--r-sm);
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.now-action:hover {
  background: rgba(255,255,255,0.04);
  border-color: var(--border);
}
.now-action .act-tier {
  font-size: 9.5px; font-weight: 700;
  padding: 3px 7px; border-radius: var(--r-xs);
}
.now-action .act-ticker { font-weight: 700; }

/* ───── Tier pills (dot + label) ───── */
.tier-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px 2px 7px;
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.4px;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  line-height: 1.4;
}
.tier-pill::before {
  content: '';
  width: 5px; height: 5px; border-radius: 50%;
  background: currentColor;
  flex: 0 0 auto;
}
.bg-tier-strong-buy { border-color: rgba(31,183,122,0.32); background: rgba(31,183,122,0.12); }
.bg-tier-buy        { border-color: rgba(45,156,255,0.32); background: rgba(45,156,255,0.12); }
.bg-tier-hold       { border-color: rgba(138,146,160,0.28); background: rgba(138,146,160,0.10); }
.bg-tier-sell       { border-color: rgba(240,160,32,0.32); background: rgba(240,160,32,0.12); }
.bg-tier-strong-sell{ border-color: rgba(229,62,62,0.32); background: rgba(229,62,62,0.12); }

/* ───── Dense tables ───── */
.dense-wrap { box-shadow: var(--elev-1); }
.dense-table thead th {
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.8px;
  color: var(--fg-3);
  padding: 8px 10px;
  background: linear-gradient(180deg, #171c24, #141821);
}
.dense-table thead th:hover { color: var(--fg-1); }
.dense-table tbody td {
  padding: 6px 10px;
  color: var(--fg-1);
  font-size: 11.5px;
  border-bottom: 1px solid rgba(255,255,255,0.035);
  transition: background var(--dur-fast) var(--ease);
}
.dense-table tbody tr { cursor: pointer; }
.dense-table tbody tr:hover td {
  background: rgba(255,255,255,0.03);
}
.dense-table tbody tr.selected td {
  background: rgba(212,160,23,0.10);
  color: var(--fg-0);
}
.dense-table tbody tr.selected td:first-child {
  box-shadow: inset 2px 0 0 var(--accent);
}
.dense-table td.ticker {
  font-weight: 700;
  color: var(--fg-0);
}

/* ───── Focus pane ───── */
.right { padding: var(--s-4) var(--s-3); }
.focus-hd {
  padding-bottom: var(--s-3);
  margin-bottom: var(--s-4);
  border-bottom: 1px solid var(--border);
}
.focus-hd .ticker {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--fg-0);
}
.focus-hd .close {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-sm);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.focus-hd .close:hover { background: var(--bg-2); color: var(--fg-0); }

.focus-score {
  padding: var(--s-4);
  background: linear-gradient(180deg, var(--bg-2) 0%, rgba(26,31,40,0.6) 100%);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--elev-1);
}
.focus-score .num {
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
}
.focus-score .tier-lbl {
  margin-top: 4px;
  font-size: 10px; letter-spacing: 0.6px;
}
.focus-score .confidence {
  text-align: right;
  font-size: 10px;
  color: var(--fg-3);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.focus-score .confidence .big {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--fg-0);
  margin-top: 2px;
}

/* ───── Thesis (Bull/Base/Bear mode tabs) ───── */
.thesis {
  background: linear-gradient(180deg, var(--bg-2), rgba(26,31,40,0.5));
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--s-3) var(--s-4);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--fg-1);
}
.thesis-mode-tabs {
  background: var(--bg-0);
  border: 1px solid var(--border);
  padding: 3px;
  border-radius: var(--r-sm);
}
.thesis-mode-tabs button {
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.5px;
  padding: 4px 10px;
  border-radius: 3px;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.thesis-mode-tabs button.active {
  background: var(--accent-bg);
  color: var(--accent-hi);
  box-shadow: inset 0 0 0 1px rgba(212,160,23,0.25);
}

/* ───── Factor bars (glow fills) ───── */
.factor-bar .fb-track {
  height: 5px;
  background: rgba(255,255,255,0.04);
  border-radius: 99px;
}
.factor-bar .fb-fill {
  border-radius: 99px;
  filter: drop-shadow(0 0 4px currentColor);
}
.factor-bar .fb-fill.pos { background: var(--pos); color: rgba(63,211,143,0.4); }
.factor-bar .fb-fill.neg { background: var(--neg); color: rgba(242,110,110,0.4); }

/* ───── Trade plan ───── */
.trade-plan .tp-cell {
  background: linear-gradient(180deg, var(--bg-2) 0%, rgba(255,255,255,0.005) 100%);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 10px;
  transition: border-color var(--dur-fast) var(--ease);
}
.trade-plan .tp-cell:hover { border-color: var(--border-strong); }
.trade-plan .tp-cell .lbl {
  font-size: 9.5px; letter-spacing: 0.7px; font-weight: 700;
  color: var(--fg-3);
}
.trade-plan .tp-cell .val {
  font-size: 15px; font-weight: 700;
  letter-spacing: -0.02em;
  margin-top: 4px;
}

/* ───── Computed assessment (8-section) ───── */
.computed-assessment {
  background:
    linear-gradient(180deg, rgba(212,160,23,0.045) 0%, rgba(212,160,23,0.00) 60%),
    var(--bg-1);
  border: 1px solid rgba(212,160,23,0.18);
  border-radius: var(--r-md);
  padding: var(--s-3) var(--s-3) var(--s-2);
  box-shadow: var(--elev-1);
}
.ca-head {
  font-size: 10px; font-weight: 800; letter-spacing: 0.9px;
  color: var(--accent-hi);
  display: flex; align-items: center; gap: 6px;
}
.ca-head::after {
  content: ''; flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(212,160,23,0.18), transparent);
}
.computed-assessment { counter-reset: ca-counter; }
.ca-section { counter-increment: ca-counter; margin-bottom: var(--s-3); }
.ca-section-head {
  display: flex; align-items: center; gap: 8px;
  border-bottom: 1px solid var(--border);
  padding: 5px 0 5px;
  margin-bottom: 4px;
}
.ca-section-head::before {
  content: counter(ca-counter, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: 9px; font-weight: 700; letter-spacing: 0.2px;
  color: var(--accent-hi);
  background: rgba(212,160,23,0.14);
  border: 1px solid rgba(212,160,23,0.24);
  padding: 2px 5px;
  border-radius: 3px;
  flex: 0 0 auto;
}
.ca-section-title {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.5px;
  color: var(--fg-0);
  text-transform: uppercase;
}
.ca-section-head .dim { color: var(--fg-3); font-size: 10px; margin-left: auto; }
.ca-row {
  padding: 6px 0;
  gap: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  font-size: 11px;
}
.ca-row:hover { background: rgba(255,255,255,0.015); }
.ca-metric { color: var(--fg-1); font-weight: 500; }
.ca-val { color: var(--fg-0); font-weight: 600; }
.ca-interp { color: var(--fg-2); line-height: 1.45; font-size: 10.5px; }
.ca-tag {
  font-size: 8.5px; font-weight: 700; letter-spacing: 0.5px;
  padding: 3px 7px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
}
.ca-tag.ca-pos      { color: #5fe6a8; background: rgba(63,211,143,0.14); border-color: rgba(63,211,143,0.24); }
.ca-tag.ca-pos-weak { color: #5fe6a8; background: rgba(63,211,143,0.06); border-color: rgba(63,211,143,0.12); }
.ca-tag.ca-neg      { color: #ff8a8a; background: rgba(242,110,110,0.14); border-color: rgba(242,110,110,0.24); }
.ca-tag.ca-neg-weak { color: #ff8a8a; background: rgba(242,110,110,0.06); border-color: rgba(242,110,110,0.12); }
.ca-tag.ca-neutral  { color: var(--fg-2); background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.06); }

/* ───── Session badges (dot + label) ───── */
.session-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-weight: 700; letter-spacing: 0.4px;
  font-size: 9px;
  padding: 2px 6px 2px 6px;
  border-radius: var(--r-xs);
  border: 1px solid transparent;
}
.session-badge::before {
  content: ''; width: 5px; height: 5px; border-radius: 50%;
  background: currentColor; flex: 0 0 auto;
}
.session-badge.session-pre { border-color: rgba(240,160,32,0.32); background: rgba(240,160,32,0.10); }
.session-badge.session-post{ border-color: rgba(160,112,240,0.32); background: rgba(160,112,240,0.10); }
.session-badge.session-closed { border-color: rgba(138,146,160,0.28); background: rgba(138,146,160,0.08); }
.session-badge.session-regular { border-color: rgba(63,211,143,0.28); background: rgba(63,211,143,0.08); }

/* ───── Command palette ───── */
.palette {
  border-radius: var(--r-lg);
  box-shadow: var(--elev-3);
  border-color: var(--border-strong);
}
.palette input { font-size: 14.5px; padding: 16px 18px; letter-spacing: -0.005em; }

/* ───── Mobile drawer + nav bar ───── */
.mobile-drawer {
  box-shadow: var(--elev-3);
  padding-top: env(safe-area-inset-top, 0);
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.mobile-drawer .md-head {
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--border);
}
.mobile-drawer .md-title { font-size: 13px; font-weight: 700; letter-spacing: -0.005em; }
.mobile-drawer .md-group-title {
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.8px;
  color: var(--fg-3);
  padding: var(--s-3) var(--s-4) 4px;
}
.mobile-drawer .md-item {
  padding: 9px var(--s-4);
  transition: background var(--dur-fast) var(--ease);
}
.mobile-drawer .md-item.active {
  background: linear-gradient(90deg, rgba(212,160,23,0.14), rgba(212,160,23,0) 70%);
  color: var(--fg-0);
  font-weight: 600;
  border-left: 2px solid var(--accent);
  padding-left: calc(var(--s-4) - 2px);
}
.hamburger {
  border-radius: var(--r-sm);
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}

/* ───── KPI delta helpers (useful later for hero Δ values) ───── */
.kpi-group { display: inline-flex; flex-direction: column; gap: 2px; }
.kpi-group .kpi-label {
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.8px;
  color: var(--fg-3); text-transform: uppercase;
}
.kpi-group .kpi-value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 18px; font-weight: 700; letter-spacing: -0.02em;
  color: var(--fg-0);
}
.delta { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 600; font-size: 11px; }
.delta.up   { color: var(--pos); }
.delta.down { color: var(--neg); }
.delta.up::before   { content: '▲ '; font-size: 8px; vertical-align: 1px; }
.delta.down::before { content: '▼ '; font-size: 8px; vertical-align: 1px; }

/* ───── Loading skeleton (useful for async content) ───── */
.skel {
  background: linear-gradient(90deg, var(--bg-2) 0%, var(--bg-3) 50%, var(--bg-2) 100%);
  background-size: 200% 100%;
  animation: skel-shimmer 1.6s linear infinite;
  border-radius: var(--r-xs);
  color: transparent;
}
@keyframes skel-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) {
  .skel { animation: none; background: var(--bg-2); }
}

/* ───── CLS skeleton: reserve space for async table containers ──────────
   Prevents layout shift when JS populates tbody after first paint.
   min-height = typical row-height × expected initial rows.
   Browsers reflow naturally once real content arrives.               */
.async-table-wrap {
  min-height: 120px;
  position: relative;
}
.async-table-wrap:empty::after,
.async-table-wrap[data-loading]::after {
  content: '';
  display: block;
  height: 120px;
  background: linear-gradient(90deg, var(--bg-2) 0%, var(--bg-3) 50%, var(--bg-2) 100%);
  background-size: 200% 100%;
  animation: skel-shimmer 1.6s linear infinite;
  border-radius: var(--r-xs);
}
@media (prefers-reduced-motion: reduce) {
  .async-table-wrap:empty::after,
  .async-table-wrap[data-loading]::after { animation: none; background: var(--bg-2); }
}
/* Table tbody containers that load async — fixed min-height prevents CLS */
tbody:empty {
  display: block;
  min-height: 40px;
}

/* ───── View headings (render-target-correct selectors) ───── */
.view > h1 {
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--fg-0);
  margin: 0 0 var(--s-4);
  line-height: 1.15;
}
.view > h2 {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--fg-0);
  margin: var(--s-5) 0 var(--s-3);
}

/* ───── KPI cards (Now view — real render target) ───── */
.kpi-row { gap: var(--s-3); margin-bottom: var(--s-4); }
.kpi {
  background: linear-gradient(180deg, var(--bg-2) 0%, rgba(26,31,40,0.7) 100%);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s-4) var(--s-4) 14px;
  box-shadow: var(--elev-1);
  transition: border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.kpi:hover {
  border-color: var(--border-strong);
  transform: translateY(-1px);
  box-shadow: var(--elev-2);
}
.kpi-k {
  font-size: 9.5px !important;
  font-weight: 700;
  letter-spacing: 0.1em !important;
  color: var(--fg-3) !important;
}
.kpi-v {
  font-family: var(--font-mono) !important;
  font-feature-settings: "tnum" 1, "ss01" 1;
  font-size: clamp(22px, 2.2vw, 28px) !important;
  letter-spacing: -0.025em;
  color: var(--fg-0) !important;
  margin: 6px 0 3px !important;
}
.kpi-v.pos { color: var(--pos) !important; }
.kpi-v.neg { color: var(--neg) !important; }
.kpi-sub { font-size: 10.5px !important; color: var(--fg-3) !important; }
.kpi-delta {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  letter-spacing: -0.01em;
  border-radius: var(--r-pill);
  padding: 2px 8px;
  font-size: 10px;
}

/* ───── Section / panel containers ───── */
.panel, .section-card {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--s-4);
  box-shadow: var(--elev-1);
}
.panel:hover, .section-card:hover { border-color: var(--border-strong); }

/* ───── Performance: content-visibility for off-screen panels ───── */
/* Browsers skip layout+paint for panels outside the viewport, ~30% LCP gain on dense dashboards. */
/* contain-intrinsic-size: 0 auto → browser measures real size first visit, reuses on scroll. */
@supports (content-visibility: auto) {
  .panel, .section-card {
    content-visibility: auto;
    contain-intrinsic-size: 0 auto;
  }
  /* contain: layout style on table rows improves paint perf for 100+ row tables */
  table.dense tr[data-ticker] {
    contain: layout style;
  }
}

/* ───── Top-3 Now widget ───── */
.top3-widget { padding: 12px 16px; }
.top3-grid { display: flex; gap: 24px; flex-wrap: wrap; }
.top3-col { flex: 1; min-width: 120px; }
.top3-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--fg-2); margin-bottom: 6px; }
.top3-row { display: flex; align-items: center; gap: 8px; padding: 4px 0; border-bottom: 1px solid var(--border); font-size: 12px; cursor: pointer; }
.top3-row:last-child { border-bottom: none; }
.top3-row.pos .top3-tk a { color: var(--pos); }
.top3-row.neg .top3-tk a { color: var(--neg); }
.top3-score { font-family: var(--mono); font-weight: 700; font-size: 11px; margin-left: auto; }
.top3-alpha { font-family: var(--mono); font-size: 10px; }

/* j/k keyboard row selection highlight */
tr[data-ticker].selected {
  outline: 2px solid var(--accent, #4f8ef7);
  outline-offset: -2px;
  background: color-mix(in srgb, var(--accent, #4f8ef7) 12%, transparent);
}

/* ───── Chip / Pill / Tag primitives ───── */
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px;
  font-size: 10.5px; font-weight: 600;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  color: var(--fg-1);
  letter-spacing: 0.1px;
}
.chip.accent { background: var(--accent-bg); border-color: rgba(212,160,23,0.26); color: var(--accent-hi); }
.chip.pos    { background: rgba(63,211,143,0.10); border-color: rgba(63,211,143,0.26); color: #6ee8b2; }
.chip.neg    { background: rgba(242,110,110,0.10); border-color: rgba(242,110,110,0.26); color: #ff9898; }

/* ───── Holdings / Position AI action pills ───── */
.action-add    { background: rgba(63,211,143,0.14); color: #6ee8b2; border: 1px solid rgba(63,211,143,0.30); }
.action-hold   { background: rgba(255,255,255,0.05); color: var(--fg-1); border: 1px solid var(--border); }
.action-trim   { background: rgba(240,160,32,0.14); color: #ffc25f; border: 1px solid rgba(240,160,32,0.30); }
.action-exit   { background: rgba(242,110,110,0.14); color: #ff9898; border: 1px solid rgba(242,110,110,0.30); }

/* ───── Button primitives ───── */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 13px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: var(--bg-2);
  color: var(--fg-1);
  font-size: 12.5px; font-weight: 600;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
  line-height: 1.2;
}
.btn:hover { background: var(--bg-3); color: var(--fg-0); border-color: var(--border-strong); }
.btn.primary {
  background: var(--accent);
  color: #1a1305;
  border-color: var(--accent);
  font-weight: 700;
}
.btn.primary:hover { background: var(--accent-hi); border-color: var(--accent-hi); }
.btn.ghost { background: transparent; }
.btn.ghost:hover { background: rgba(255,255,255,0.04); }

/* ───── Inputs ───── */
input[type="text"], input[type="search"], input[type="number"],
select, textarea {
  background: var(--bg-0);
  border: 1px solid var(--border);
  color: var(--fg-0);
  border-radius: var(--r-sm);
  padding: 8px 10px;
  font-size: 13px;
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
input[type="text"]:focus, input[type="search"]:focus, input[type="number"]:focus,
select:focus, textarea:focus {
  border-color: var(--accent);
  background: var(--bg-1);
  outline: none;
}

/* ───── Small visual polish — dim/subtle text ───── */
.dim  { color: var(--fg-2) !important; }
.muted { color: var(--fg-3) !important; }
.small { font-size: 10.5px !important; }

/* ───── Tabular numerics anywhere .num / .mono / digits live ───── */
.pos { color: var(--pos); }
.neg { color: var(--neg); }

/* ══════════════════════════════════════════════════════════════════════
   ELITE-PLUS LAYER — 25-upgrade pass (2026-04-24 PM)
   Additive polish for: density, light-mode, a11y contrast, regime card,
   connection dot, mobile focus sheet, heatmap fill, skeletons, signals
   cards, tier pills, delta pills, sort indicators, sparklines, focus TOC,
   factor hover, elite SVG chart, concentration chips, empty states.
   ══════════════════════════════════════════════════════════════════════ */

/* ─── A11y contrast lift — .dim was borderline 3.8:1 ─── */
:root {
  --fg-dim:  #9aa3b2;        /* was --fg-3 ~#7a8290 — now 4.8:1 on bg-0 */
  --fg-mute: #7a8290;
  --pos-hi:  #4fe19f;
  --neg-hi:  #ff8a8a;
  --accent-soft: rgba(232,181,39,0.14);
  --halo: 0 0 0 1px rgba(232,181,39,0.30), 0 0 14px 0 rgba(232,181,39,0.18);
}
.dim  { color: var(--fg-dim) !important; }
.muted { color: var(--fg-mute) !important; }

/* ─── Skip-to-content for SR/keyboard users ─── */
.skip-link {
  position: fixed; left: 8px; top: 8px;
  z-index: 9999;
  transform: translateY(-200%);
  padding: 10px 14px;
  background: var(--accent); color: #1a1305;
  font-weight: 700; font-size: 12.5px;
  border-radius: var(--r-sm);
  transition: transform 120ms var(--ease);
}
.skip-link:focus { transform: translateY(0); outline: none; }

/* ─── Density toggle (data-density on <html>) ─── */
html[data-density="compact"] body   { font-size: 13px; }
html[data-density="compact"] .card  { padding: 12px 14px; }
html[data-density="compact"] table.dense th,
html[data-density="compact"] table.dense td { padding: 4px 8px; }
html[data-density="compact"] .focus-section { padding: 8px 12px; margin: 8px 0; }
html[data-density="condensed"] body { font-size: 12.5px; }
html[data-density="condensed"] .card { padding: 8px 10px; }
html[data-density="condensed"] table.dense th,
html[data-density="condensed"] table.dense td { padding: 2px 6px; font-size: 11px; }
html[data-density="condensed"] .focus-section { padding: 6px 10px; margin: 6px 0; }
html[data-density="condensed"] .kpi { padding: 10px 14px !important; }

/* ─── Light mode (data-theme="light") ─── */
html[data-theme="light"] {
  --bg-0: #ffffff; --bg-1: #f7f7f5; --bg-2: #eceae4; --bg-3: #dedcd4;
  --fg-0: #0f1012; --fg-1: #22252a; --fg-2: #525965; --fg-3: #8a92a0;
  --fg-dim: #4a5260; --fg-mute: #6b7380;
  --border: #dcd9d2; --border-strong: #c4c0b6;
  --accent: #b88612; --accent-hi: #d9a228;
  --pos: #1fa366; --neg: #c5372c;
  --elev-1: 0 1px 2px rgba(0,0,0,0.06);
  --elev-2: 0 4px 12px rgba(0,0,0,0.08);
  --elev-3: 0 14px 32px rgba(0,0,0,0.10);
  color-scheme: light;
}
html[data-theme="light"] body { background: var(--bg-1); color: var(--fg-0); }
html[data-theme="light"] .topbar { background: linear-gradient(180deg, #ffffff, #f4f2ec); }
html[data-theme="light"] .rail   { background: #f4f2ec; }
html[data-theme="light"] .card   { background: #ffffff; border-color: var(--border); }
html[data-theme="light"] ::selection { background: rgba(184,134,18,0.22); color: var(--fg-0); }
html[data-theme="light"] * { scrollbar-color: rgba(0,0,0,0.18) transparent; }
html[data-theme="light"] *::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.18); background-clip: content-box; }
html[data-theme="light"] .palette-trigger { background: #ffffff; }
html[data-theme="light"] .hm-label { background: #efede5; }

/* ─── Firefox scrollbar tuning ─── */
@supports (scrollbar-color: auto) {
  * { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.10) transparent; }
}

/* ─── Focus ring — consistent across interactive surfaces ─── */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}
button:focus-visible, .btn:focus-visible, .nav-item:focus-visible,
.ct-tab:focus-visible, .md-item:focus-visible, .tab:focus-visible,
.class-chip:focus-visible, .chip:focus-visible {
  outline-offset: 3px;
}

/* ─── Connection-status dot in top bar ─── */
.conn-cluster {
  position: relative;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 8px;
  border-radius: var(--r-pill);
  background: var(--bg-2);
  border: 1px solid var(--border);
  cursor: pointer;
  font-size: 11px; font-weight: 600;
  color: var(--fg-2);
  transition: all var(--dur-fast) var(--ease);
}
.conn-cluster:hover { color: var(--fg-0); background: var(--bg-3); border-color: var(--border-strong); }
.conn-cluster .conn-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--fg-mute);
  box-shadow: 0 0 0 3px rgba(255,255,255,0.02);
}
.conn-cluster.ok .conn-dot  { background: var(--pos); box-shadow: 0 0 10px rgba(38,188,120,0.55); }
.conn-cluster.mix .conn-dot { background: #e0b027; box-shadow: 0 0 10px rgba(224,176,39,0.55); }
.conn-cluster.bad .conn-dot { background: var(--neg); box-shadow: 0 0 10px rgba(245,95,95,0.55); }
.conn-popover {
  position: absolute; top: calc(100% + 8px); right: 0;
  min-width: 280px; max-width: 360px;
  background: var(--bg-1); border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  box-shadow: var(--elev-3);
  padding: 8px 0;
  z-index: 90;
  opacity: 0; transform: translateY(-4px); pointer-events: none;
  transition: all var(--dur) var(--ease);
}
.conn-cluster.open .conn-popover { opacity: 1; transform: translateY(0); pointer-events: auto; }
.conn-popover .cp-row {
  display: grid; grid-template-columns: 14px 1fr auto auto;
  gap: 8px; align-items: center;
  padding: 6px 12px;
  font-size: 11.5px;
}
.conn-popover .cp-row + .cp-row { border-top: 1px solid rgba(255,255,255,0.04); }
.conn-popover .cp-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--fg-mute); justify-self: center; }
.conn-popover .cp-dot.ok { background: var(--pos); }
.conn-popover .cp-dot.warn { background: #e0b027; }
.conn-popover .cp-dot.err { background: var(--neg); }
.conn-popover .cp-name { color: var(--fg-1); font-weight: 600; }
.conn-popover .cp-meta { color: var(--fg-dim); font-size: 10.5px; font-family: var(--font-mono); }
.conn-popover .cp-latency { color: var(--fg-2); font-size: 10.5px; font-family: var(--font-mono); }
.conn-popover .cp-head { padding: 4px 12px 8px; color: var(--fg-dim); font-size: 10px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; border-bottom: 1px solid rgba(255,255,255,0.04); }

/* ─── Regime hover-card (top-bar status cluster) ─── */
.status { position: relative; cursor: pointer; }
.regime-popover {
  position: absolute; top: calc(100% + 8px); right: 0;
  min-width: 280px;
  background: var(--bg-1); border: 1px solid var(--border-strong);
  border-radius: var(--r-md); box-shadow: var(--elev-3);
  padding: 12px 14px;
  font-size: 11.5px;
  z-index: 90;
  opacity: 0; transform: translateY(-4px); pointer-events: none;
  transition: all var(--dur) var(--ease);
}
.status.open .regime-popover { opacity: 1; transform: translateY(0); pointer-events: auto; }
.regime-popover .rp-title { color: var(--fg-0); font-weight: 700; font-size: 12px; margin-bottom: 8px; letter-spacing: 0.2px; }
.regime-popover .rp-kv { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; font-family: var(--font-mono); }
.regime-popover .rp-kv .k { color: var(--fg-dim); font-size: 10.5px; letter-spacing: 0.3px; text-transform: uppercase; }
.regime-popover .rp-kv .v { color: var(--fg-0); font-weight: 600; text-align: right; }
.regime-popover .rp-footer { margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,0.06); color: var(--fg-dim); font-size: 10.5px; line-height: 1.45; }

/* ─── Regime-change pulse ─── */
@keyframes regime-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(232,181,39,0.65); }
  70%  { box-shadow: 0 0 0 18px rgba(232,181,39,0); }
  100% { box-shadow: 0 0 0 0 rgba(232,181,39,0); }
}
.dot.pulse { animation: regime-pulse 1200ms var(--ease) 2; }

/* ─── Mobile focus sheet (85vh slide-up) ─── */
.focus-sheet-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(4px) saturate(140%);
  -webkit-backdrop-filter: blur(4px) saturate(140%);
  z-index: 880;
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur) var(--ease);
}
.focus-sheet-backdrop.open { opacity: 1; pointer-events: auto; }
.focus-sheet {
  position: fixed; left: 0; right: 0; bottom: 0;
  height: 85vh;
  background: var(--bg-0);
  border-top-left-radius: 18px; border-top-right-radius: 18px;
  border-top: 1px solid var(--border-strong);
  box-shadow: 0 -24px 60px rgba(0,0,0,0.55);
  z-index: 890;
  transform: translateY(100%);
  transition: transform var(--dur-slow) var(--ease) 60ms;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.focus-sheet.open { transform: translateY(0); }
.focus-sheet-grip {
  flex: 0 0 auto;
  display: flex; justify-content: center;
  padding: 8px 0 6px;
  cursor: grab;
}
.focus-sheet-grip::before {
  content: ''; width: 40px; height: 4px;
  background: var(--border-strong); border-radius: 99px;
}
.focus-sheet-head {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 10px;
  padding: 4px 16px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.focus-sheet-head .fs-breadcrumb {
  flex: 1; min-width: 0;
  font-size: 11.5px; color: var(--fg-dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.focus-sheet-head .fs-breadcrumb b { color: var(--fg-0); font-weight: 700; }
.focus-sheet-head .fs-close {
  flex: 0 0 auto;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--bg-2); color: var(--fg-1);
  border: 1px solid var(--border);
  font-size: 16px; line-height: 1; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--dur-fast) var(--ease);
}
.focus-sheet-head .fs-close:hover { background: var(--bg-3); }
.focus-sheet-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 10px 16px calc(24px + env(safe-area-inset-bottom, 0px));
}
/* Sheet always gets the actual focus pane content */
.focus-sheet .focus { padding: 0; }

/* Mobile + tablet: hide desktop right pane; show sheet */
@media (max-width: 1024px) {
  .right { display: none !important; }
  .focus-sheet-mount { display: block; }
}
@media (min-width: 1025px) {
  .focus-sheet, .focus-sheet-backdrop { display: none !important; }
}

/* ─── Heatmap — fill grid + sector sub-rows ─── */
.hm-grid { gap: 6px; }
.hm-row {
  grid-template-columns: 160px 1fr;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  padding: 3px;
  transition: border-color var(--dur-fast) var(--ease);
}
.hm-row:hover { border-color: rgba(255,255,255,0.06); }
.hm-row .hm-label { padding: 8px 10px; border-radius: var(--r-sm); }
.hm-row .hm-label .class-chip { font-weight: 700; }
.hm-cells {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  gap: 4px !important;
  min-height: 52px;
  align-content: start;
}
.hm-cell {
  min-width: 0 !important; width: auto;
  aspect-ratio: 1 / 0.7;
  border-radius: 6px;
  position: relative; overflow: hidden;
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.hm-cell:hover {
  transform: scale(1.06); z-index: 2;
  box-shadow: 0 4px 14px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.08);
}
.hm-cell.unscored {
  background: repeating-linear-gradient(135deg, rgba(255,255,255,0.03) 0 4px, rgba(255,255,255,0.01) 4px 8px) !important;
  border: 1px dashed rgba(255,255,255,0.10) !important;
  opacity: 0.55;
}
.hm-cell.unscored .hm-sc { color: var(--fg-mute); }
.hm-sector-row {
  display: grid; grid-template-columns: 160px 1fr;
  gap: 8px; padding: 0 3px 3px 16px;
  align-items: stretch;
}
.hm-sector-label {
  font-size: 10.5px; color: var(--fg-dim);
  font-weight: 600; letter-spacing: 0.3px; text-transform: uppercase;
  padding: 6px 10px;
  background: rgba(255,255,255,0.02);
  border-left: 2px solid rgba(255,255,255,0.05);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  display: flex; align-items: center;
}
.hm-legend {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 10px;
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: var(--r-md);
  margin-top: 10px; font-size: 11px;
}
.hm-legend-scale {
  flex: 1; height: 10px; border-radius: 99px;
  background: linear-gradient(90deg, rgba(245,95,95,0.85), rgba(138,146,160,0.28), rgba(38,188,120,0.85));
  max-width: 320px;
}
.hm-legend-label { color: var(--fg-dim); font-size: 10.5px; letter-spacing: 0.3px; text-transform: uppercase; }

/* ─── Skeleton / shimmer (dedup — canonical block; earlier @keyframes skel-shimmer at §2569 wins) ─── */
.skel {
  position: relative;
  background: linear-gradient(90deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.09) 50%, rgba(255,255,255,0.03) 100%);
  background-size: 200% 100%;
  animation: skel-shimmer 1.6s linear infinite;
  border-radius: 6px; min-height: 10px; color: transparent;
  contain: layout style;  /* isolate shimmer repaint to this element */
}
.skel-line { height: 12px; margin: 6px 0; }
.skel-row  { height: 36px; margin: 4px 0; }
.skel-card { padding: 14px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--bg-1); }
.skel-kpi  { height: 88px; border-radius: var(--r-md); margin: 8px 0; }
@media (prefers-reduced-motion: reduce) {
  .skel { animation: none; background: rgba(255,255,255,0.05); }
}

/* ─── Signals: mobile card rows (< 640px) ─── */
@media (max-width: 640px) {
  table.dense.signals-table thead { display: none; }
  table.dense.signals-table,
  table.dense.signals-table tbody,
  table.dense.signals-table tr,
  table.dense.signals-table td { display: block; width: 100%; }
  table.dense.signals-table tr {
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 10px 12px;
    margin-bottom: 8px;
    position: relative;
    box-shadow: var(--elev-1);
  }
  table.dense.signals-table td {
    padding: 2px 0 !important;
    border: 0 !important;
    font-size: 12px;
  }
  table.dense.signals-table td::before {
    content: attr(data-h) " ";
    color: var(--fg-dim); font-size: 10.5px;
    font-weight: 600; letter-spacing: 0.3px;
    text-transform: uppercase;
    margin-right: 8px;
  }
  table.dense.signals-table td.cell-ticker::before { display: none; }
  table.dense.signals-table td.cell-ticker {
    font-size: 15px; font-weight: 700; margin-bottom: 4px;
  }
  table.dense.signals-table tr:active { transform: scale(0.99); }
}

/* ─── Row-hover halo + sort indicators ─── */
table.dense tbody tr { transition: background var(--dur-fast) var(--ease); cursor: pointer; }
table.dense tbody tr:hover {
  background: linear-gradient(90deg, rgba(232,181,39,0.05) 0%, rgba(232,181,39,0.02) 60%, transparent 100%);
}
table.dense th.sortable {
  cursor: pointer; user-select: none;
  position: relative;
  padding-right: 16px !important;
}
table.dense th.sortable::after {
  content: '↕';
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  color: var(--fg-mute); font-size: 9px; opacity: 0.6;
}
table.dense th.sortable.sort-asc::after  { content: '↑'; color: var(--accent); opacity: 1; }
table.dense th.sortable.sort-desc::after { content: '↓'; color: var(--accent); opacity: 1; }
table.dense th.sortable:hover { color: var(--fg-0); }

/* ─── Tier pill upgrade (icon + dot + label, pill-shape) ─── */
.tier-pill, .tier {
  display: inline-flex !important; align-items: center; gap: 6px;
  padding: 2px 10px 2px 8px !important;
  border-radius: var(--r-pill) !important;
  font-size: 10.5px !important; font-weight: 700;
  letter-spacing: 0.4px; text-transform: uppercase;
  line-height: 1.4;
  border: 1px solid transparent;
}
.tier-pill::before, td.cell-tier > .tier::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; flex: 0 0 auto;
  box-shadow: 0 0 6px currentColor;
}
.tier-strong-buy, .tier.strong-buy, .t-strong-buy {
  background: rgba(38,188,120,0.14); color: var(--pos-hi);
  border-color: rgba(38,188,120,0.34);
}
.tier-buy, .tier.buy, .t-buy {
  background: rgba(38,188,120,0.08); color: #8adfb6;
  border-color: rgba(38,188,120,0.20);
}
.tier-hold, .tier.hold, .t-hold {
  background: rgba(138,146,160,0.12); color: var(--fg-2);
  border-color: rgba(138,146,160,0.22);
}
.tier-sell, .tier.sell, .t-sell {
  background: rgba(245,95,95,0.08); color: #f2a5a5;
  border-color: rgba(245,95,95,0.22);
}
.tier-strong-sell, .tier.strong-sell, .t-strong-sell {
  background: rgba(245,95,95,0.14); color: var(--neg-hi);
  border-color: rgba(245,95,95,0.34);
}

/* ─── Delta arrow pills ─── */
.delta-pill {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 1px 7px 1px 5px;
  border-radius: var(--r-pill);
  font-size: 10.5px; font-weight: 700;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.2px;
  line-height: 1.4;
}
.delta-pill.up   { background: rgba(38,188,120,0.14); color: var(--pos-hi); }
.delta-pill.down { background: rgba(245,95,95,0.14); color: var(--neg-hi); }
.delta-pill.flat { background: rgba(138,146,160,0.10); color: var(--fg-dim); }
.delta-pill::before {
  font-size: 8px; line-height: 1;
  transform: translateY(-0.5px);
}
.delta-pill.up::before   { content: '▲'; }
.delta-pill.down::before { content: '▼'; }
.delta-pill.flat::before { content: '•'; }

/* ─── Sparkline per signal row (24×20 inline SVG) ─── */
.spark {
  display: inline-block; width: 60px; height: 18px;
  vertical-align: middle;
}
.spark polyline { fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.spark polyline.up   { stroke: var(--pos-hi); }
.spark polyline.down { stroke: var(--neg-hi); }
.spark polyline.flat { stroke: var(--fg-mute); }
.spark polygon.fill  { fill: currentColor; opacity: 0.08; }
.spark.up    { color: var(--pos-hi); }
.spark.down  { color: var(--neg-hi); }
.spark.flat  { color: var(--fg-mute); }
.spark .dot-last { fill: currentColor; }

/* ─── Focus pane: sticky section TOC + collapsible sections ─── */
.focus { position: relative; }
.focus-toc {
  position: sticky; top: 8px;
  background: var(--bg-1); border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 6px 4px;
  margin: 10px 0 8px;
  z-index: 5;
  box-shadow: var(--elev-1);
  display: flex; flex-wrap: wrap; gap: 4px;
}
.focus-toc a {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 9px;
  border-radius: var(--r-pill);
  font-size: 10.5px; font-weight: 600;
  color: var(--fg-dim);
  text-decoration: none;
  transition: all var(--dur-fast) var(--ease);
  cursor: pointer;
}
.focus-toc a:hover { background: var(--bg-2); color: var(--fg-0); }
.focus-toc a.active { background: var(--accent-soft); color: var(--accent-hi); }
.focus-toc a .toc-n {
  display: inline-flex; width: 14px; height: 14px;
  align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  color: var(--fg-2); font-size: 9px; font-weight: 700;
}
.focus-toc a.active .toc-n { background: var(--accent); color: #1a1305; }

/* Collapsible computed-assessment sections */
.ca-section > h4 {
  cursor: pointer; user-select: none;
  position: relative; padding-right: 22px;
}
.ca-section > h4::after {
  content: '▾';
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  color: var(--fg-dim); font-size: 10px;
  transition: transform var(--dur-fast) var(--ease);
}
.ca-section.collapsed > h4::after { transform: translateY(-50%) rotate(-90deg); }
.ca-section.collapsed .ca-rows { display: none; }

/* ─── Factor-bar hover explainer popover ─── */
.fbar-explainer {
  position: fixed;
  min-width: 260px; max-width: 340px;
  background: var(--bg-1); border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  box-shadow: var(--elev-3);
  padding: 10px 12px;
  font-size: 11.5px; line-height: 1.45;
  color: var(--fg-1);
  z-index: 900;
  opacity: 0; transform: translateY(-4px); pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.fbar-explainer.open { opacity: 1; transform: translateY(0); pointer-events: auto; }
.fbar-explainer .fe-id {
  font-family: var(--font-mono); font-size: 10.5px;
  color: var(--accent-hi); font-weight: 700;
  letter-spacing: 0.4px;
}
.fbar-explainer .fe-plain { color: var(--fg-1); margin: 6px 0 8px; }
.fbar-explainer .fe-kv { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; font-size: 10.5px; }
.fbar-explainer .fe-kv .k { color: var(--fg-dim); font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; }
.fbar-explainer .fe-kv .v { color: var(--fg-0); font-family: var(--font-mono); text-align: right; }

/* ─── Elite price chart ─── */
.chart-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.00));
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 10px 12px 8px;
  margin: 10px 0;
}
.chart-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 6px; gap: 10px; flex-wrap: wrap;
}
.chart-tfs {
  display: inline-flex; gap: 2px;
  background: var(--bg-2); border-radius: var(--r-sm);
  padding: 2px;
}
.chart-tfs .tf {
  padding: 3px 8px; border-radius: 4px;
  font-size: 10.5px; font-weight: 600;
  color: var(--fg-dim);
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease);
}
.chart-tfs .tf:hover { color: var(--fg-0); }
.chart-tfs .tf.active { background: var(--bg-0); color: var(--accent-hi); box-shadow: 0 0 0 1px var(--border-strong); }
.chart-readout {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--fg-dim);
  display: flex; gap: 12px; flex-wrap: wrap;
}
.chart-readout b { color: var(--fg-0); font-weight: 600; }
.chart-svg {
  width: 100%; height: 240px;
  display: block;
}
.chart-svg .price-line  { fill: none; stroke: var(--accent-hi); stroke-width: 1.4; }
.chart-svg .price-area  { fill: rgba(232,181,39,0.08); }
.chart-svg .candle-up   { fill: rgba(38,188,120,0.70); stroke: var(--pos-hi); stroke-width: 0.6; }
.chart-svg .candle-down { fill: rgba(245,95,95,0.70); stroke: var(--neg-hi); stroke-width: 0.6; }
.chart-svg .wick-up     { stroke: var(--pos-hi); stroke-width: 0.8; }
.chart-svg .wick-down   { stroke: var(--neg-hi); stroke-width: 0.8; }
.chart-svg .score-line  { fill: none; stroke: #b49efc; stroke-width: 1.2; stroke-dasharray: 2 2; }
.chart-svg .vol-bar     { fill: rgba(255,255,255,0.10); }
.chart-svg .axis-text   { fill: var(--fg-dim); font-size: 9.5px; font-family: var(--font-mono); }
.chart-svg .grid-line   { stroke: rgba(255,255,255,0.05); stroke-width: 1; stroke-dasharray: 2 3; }
.chart-svg .crosshair   { stroke: var(--fg-dim); stroke-width: 0.6; stroke-dasharray: 2 2; opacity: 0; }
.chart-svg.active .crosshair { opacity: 0.8; }
.chart-svg .marker      { fill: var(--accent-hi); }
.chart-legend {
  display: flex; gap: 14px; margin-top: 4px;
  font-size: 10.5px; color: var(--fg-dim);
}
.chart-legend .lg-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 5px; vertical-align: middle; }
.chart-legend .lg-dot.px    { background: var(--accent-hi); }
.chart-legend .lg-dot.score { background: #b49efc; }
.chart-legend .lg-dot.vol   { background: rgba(255,255,255,0.25); }

/* ─── Export button bar ─── */
.export-bar {
  display: flex; gap: 6px; flex-wrap: wrap;
  padding: 6px 0;
  margin-bottom: 4px;
}
.export-bar .btn { padding: 5px 10px; font-size: 11px; }

/* ─── Concentration chip (holdings) ─── */
.conc-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  font-size: 10.5px; font-weight: 700;
  font-family: var(--font-mono);
  letter-spacing: 0.3px;
}
.conc-chip.safe { background: rgba(38,188,120,0.10); color: #7fd4ab; }
.conc-chip.warn { background: rgba(224,176,39,0.14); color: #f3c95c; }
.conc-chip.hot  { background: rgba(245,95,95,0.14); color: var(--neg-hi); }
.conc-chip::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }

/* ─── Staleness chip (cached quotes) ─── */
.stale-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 1px 6px;
  border-radius: var(--r-pill);
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.3px;
  background: rgba(224,176,39,0.12);
  color: #f3c95c;
}
.stale-chip.fresh { background: rgba(38,188,120,0.10); color: #7fd4ab; }
.stale-chip.stale { background: rgba(245,95,95,0.12); color: var(--neg-hi); }

/* ─── Empty-state illustrations ─── */
.empty-state {
  padding: 40px 24px;
  text-align: center;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent);
  border: 1px dashed var(--border);
  border-radius: var(--r-lg);
  margin: 16px 0;
}
.empty-state svg { width: 64px; height: 64px; margin-bottom: 12px; opacity: 0.65; }
.empty-state h3 { font-size: 14px; color: var(--fg-0); margin: 0 0 6px; font-weight: 700; }
.empty-state p { color: var(--fg-dim); margin: 6px 0; font-size: 12.5px; line-height: 1.5; max-width: 420px; margin-left: auto; margin-right: auto; }
.empty-state .es-cta { margin-top: 14px; display: inline-flex; gap: 8px; flex-wrap: wrap; justify-content: center; }

/* ─── Alert rule authoring ─── */
.alert-rule-row {
  display: grid; grid-template-columns: 1fr 110px 90px 90px 80px 40px;
  gap: 8px; align-items: center;
  padding: 8px;
  background: var(--bg-1); border: 1px solid var(--border);
  border-radius: var(--r-sm);
  margin: 6px 0;
  font-size: 12px;
}
.alert-rule-row input, .alert-rule-row select {
  padding: 5px 8px; font-size: 12px;
}
.alert-rule-header {
  display: grid; grid-template-columns: 1fr 110px 90px 90px 80px 40px;
  gap: 8px;
  padding: 6px 8px;
  font-size: 10px; color: var(--fg-dim);
  font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase;
}
@media (max-width: 640px) {
  .alert-rule-row, .alert-rule-header { grid-template-columns: 1fr; }
  .alert-rule-header { display: none; }
  .alert-rule-row > * { width: 100%; }
}

/* ─── Touch-target enforcement on small controls ─── */
@media (pointer: coarse) {
  .xbtn, .class-chip, .chip, .ct-tab, .tab, .md-item,
  .nav-item, .conn-cluster, button {
    min-height: 44px;
  }
  .xbtn { min-width: 44px; }
  /* Wave-1 — enforce 44×44 on action surfaces that previously slipped under
     the universal `button` selector (scoped class targets). Now-page action
     buttons + Options Recommend filters + Verdict-Modal export buttons +
     Now-page Yes/No/Dismiss feedback row. */
  .now-btn,
  .opt-rec-filters button,
  .opt-rec-filters input,
  .vm-export button,
  .now-feedback button {
    min-height: 44px;
    min-width: 44px;
  }
}

/* ─── Signal row sparkline cell sizing ─── */
td.cell-spark { width: 72px; text-align: center; }

/* ─── Session strip (already existed) — light-mode tweak ─── */
html[data-theme="light"] .session-strip { background: rgba(0,0,0,0.03); }
html[data-theme="light"] .conn-popover,
html[data-theme="light"] .regime-popover,
html[data-theme="light"] .fbar-explainer { background: #ffffff; }

/* ─── Small-screen palette + sheet polish ─── */
@media (max-width: 640px) {
  .palette { width: 94vw; max-width: 560px; }
  .focus-toc { top: 0; border-radius: 0; margin: 0 -16px 8px; }
}

/* ─── Reduced motion ─── */
@media (prefers-reduced-motion: reduce) {
  .focus-sheet, .conn-popover, .regime-popover,
  .fbar-explainer, .hm-cell, .chart-tfs .tf,
  table.dense tbody tr, .delta-pill { transition: none !important; }
  .dot.pulse { animation: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   FINISHING-PASS 6 — Audit-driven elite polish (2026-04-24)
   Fixes: mobile overflow, brand wrap, conn-cluster visibility, list
   spacing, tier-pill size, KPI grid density, cockpit-tab fade.
   ═══════════════════════════════════════════════════════════════════════ */

/* 1. Stop ALL horizontal overflow at root */
html, body { max-width: 100%; overflow-x: hidden; }
.shell { width: 100%; max-width: 100vw; }
.main, #main-view, .view { min-width: 0; max-width: 100%; }
.kpi, .card { min-width: 0; }
/* Force grid tracks to 0-min so content doesn't push shell wider than viewport */
@media (max-width: 1024px) {
  .shell {
    grid-template-columns: minmax(0, var(--rail)) minmax(0, 1fr) !important;
  }
}
@media (max-width: 640px) {
  .shell { grid-template-columns: minmax(0, 1fr) !important; }
  /* Hide lower-priority topbar items on mobile to prevent overflow */
  .topbar .thesis-mode-tabs { display: none !important; }
  .topbar { padding-left: var(--s-2) !important; padding-right: var(--s-2) !important; gap: var(--s-2); }
  .topbar > * { flex-shrink: 1; }
}

/* 2. Mobile KPI grid: single-column at ≤640, two-column 641–768 */
@media (max-width: 640px) {
  .kpi-row { grid-template-columns: 1fr !important; gap: 10px !important; }
  .ratio-grid { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
  .view > h1 { font-size: 20px !important; letter-spacing: -0.015em; }
  .view > h2 { font-size: 13px !important; margin-top: var(--s-4) !important; }
  .hero-row { flex-wrap: wrap; gap: 8px; }
  body { font-size: 14px; }
  #main-view p, #main-view li, #main-view td { font-size: 13px; }
  /* mobile: brand shrinks but never wraps */
  .topbar .brand {
    white-space: nowrap; font-size: 14px;
    overflow: hidden; text-overflow: ellipsis; max-width: 120px;
  }
  /* thesis tabs compact on mobile */
  .thesis-mode-tabs button { padding: 4px 8px !important; font-size: 10px !important; }
  /* preserve conn-cluster (was disappearing) */
  .conn-cluster { display: inline-flex !important; padding: 4px 8px; font-size: 10px; }
  .conn-cluster .conn-label { display: none; }
  .status { font-size: 10px; padding: 4px 8px; }
  .status #ms-label { max-width: 80px; overflow: hidden; text-overflow: ellipsis; }
}
@media (min-width: 641px) and (max-width: 768px) {
  .kpi-row { grid-template-columns: repeat(2, 1fr) !important; }
  .ratio-grid { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (min-width: 641px) and (max-width: 1024px) {
  /* tablets: ensure conn-cluster + status stay visible */
  .conn-cluster, .status { display: inline-flex !important; }
}

/* 3. Brand "v2" badge — refined */
.topbar .brand {
  display: inline-flex; align-items: baseline; gap: 6px;
  font-weight: 700; letter-spacing: -0.01em;
}
.topbar .brand .v2 {
  font-size: 9px; letter-spacing: 0.08em; padding: 1px 5px;
  border-radius: 4px; background: var(--accent-bg); color: var(--accent);
  font-weight: 700; text-transform: uppercase;
}

/* 4. Cockpit tabs — edge fade hints scrollability */
.cockpit-tabs { position: relative; isolation: isolate; }
.cockpit-tabs::after {
  content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 36px;
  background: linear-gradient(90deg, rgba(10,13,18,0) 0%, var(--bg-0) 85%);
  pointer-events: none; z-index: 1;
}
html[data-theme="light"] .cockpit-tabs::after {
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, #ffffff 85%);
}

/* 5. Tier pill — legible min-size (was micro) */
.tier-pill, td.cell-tier .tier-pill, .signals-table .tier-pill {
  display: inline-flex !important; align-items: center; justify-content: center;
  padding: 3px 10px !important; font-size: 10px !important;
  font-weight: 700 !important; letter-spacing: 0.04em !important;
  min-width: 58px; text-align: center;
  border-radius: var(--r-pill);
}

/* 6. "Strongest buys / sells" lists (Now view) — proper spacing */
.strongest-list, .top-conv-list, ol.ranked-list {
  list-style: decimal; padding-left: 28px; margin: 8px 0 0;
  counter-reset: rank;
}
.strongest-list li, .top-conv-list li, ol.ranked-list li {
  padding: 5px 0; line-height: 1.5;
  font-variant-numeric: tabular-nums;
  border-bottom: 1px dashed rgba(255,255,255,0.04);
}
.strongest-list li:last-child, .top-conv-list li:last-child { border-bottom: none; }
.strongest-list li::marker, .top-conv-list li::marker { color: var(--fg-3); font-weight: 600; }
.strongest-list .tk, .top-conv-list .tk {
  font-weight: 700; color: var(--fg-0); margin-right: 8px; letter-spacing: -0.005em;
}
.strongest-list .sc, .top-conv-list .sc {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  color: var(--fg-2); margin-right: 10px;
}
/* Auto-spacing for inline content like "1. TSLA67.8 BUY" (no wrapper spans) */
.strongest-list li, ol.ranked-list li { word-spacing: 2px; }

/* 7. Empty focus pane — refined placeholder */
.focus-empty {
  height: 100%; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  color: var(--fg-2); padding: 40px 24px; gap: 10px; line-height: 1.5;
}
.focus-empty::before {
  content: ''; width: 56px; height: 56px; border-radius: 50%;
  background: radial-gradient(circle, var(--accent-bg), transparent 70%);
  border: 1px solid var(--border-strong); margin-bottom: 10px;
  box-shadow: inset 0 0 20px rgba(212,160,23,0.1);
}
.focus-empty .dim { color: var(--fg-3); font-size: 11px; }

/* 8. Section headers inside views — consistent small-caps */
.section-hd, .view-section-hd, .signals-section-hd {
  font-size: 10px; font-weight: 700; letter-spacing: 0.1em;
  color: var(--fg-3); text-transform: uppercase;
  margin: var(--s-5) 0 var(--s-2); padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 8px;
}

/* 9. Dense number cells — right-align consistency */
table.dense td.num, table.dense th.num,
table.dense td.n, table.dense th.n {
  text-align: right; font-variant-numeric: tabular-nums;
  font-family: var(--font-mono);
}

/* 10. Card polish — hairline top highlight */
.card, .kpi, .chart-card {
  position: relative;
}

/* 11. Signal-row hover: subtle lift, no layout jitter */
table.dense tbody tr { transition: background-color var(--dur-fast) var(--ease); }
table.dense tbody tr:hover {
  background: linear-gradient(90deg, rgba(212,160,23,0.03), transparent);
}

/* 12. Badge tier colors — kept as reference for tier cell contents */
.tier-pill.t-strong-buy { background: rgba(31,183,122,0.15); color: #1fb77a; border: 1px solid rgba(31,183,122,0.25); }
.tier-pill.t-buy        { background: rgba(45,156,255,0.12); color: #5ab3ff;  border: 1px solid rgba(45,156,255,0.2); }
.tier-pill.t-hold       { background: rgba(138,146,160,0.1); color: var(--fg-2); border: 1px solid rgba(138,146,160,0.2); }
.tier-pill.t-sell       { background: rgba(240,160,32,0.12); color: #f0a020; border: 1px solid rgba(240,160,32,0.22); }
.tier-pill.t-strong-sell{ background: rgba(229,62,62,0.14); color: #f06e6e; border: 1px solid rgba(229,62,62,0.25); }

/* 13. Session badge (new) — pre/rth/post/closed */
.session-chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.08em;
  padding: 2px 6px; border-radius: var(--r-xs); text-transform: uppercase;
  border: 1px solid var(--border);
}
.session-chip.rth { background: rgba(31,183,122,0.08); color: #1fb77a; border-color: rgba(31,183,122,0.2); }
.session-chip.pre { background: rgba(45,156,255,0.08); color: #5ab3ff; border-color: rgba(45,156,255,0.2); }
.session-chip.post{ background: rgba(240,160,32,0.08); color: #f0a020; border-color: rgba(240,160,32,0.2); }
.session-chip.closed, .session-chip.off { background: rgba(138,146,160,0.06); color: var(--fg-3); border-color: var(--border); }

/* 14. Better focus rings (enhanced from elite-plus) */
*:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
button:focus-visible, a:focus-visible, [role="button"]:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(212,160,23,0.18);
}

/* 15. Fallback tier chip: "TIER-2 FALLBACK" — now has proper tone */
.tier-fallback-chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.08em;
  padding: 2px 8px; border-radius: var(--r-xs); text-transform: uppercase;
  background: rgba(45,156,255,0.1); color: #5ab3ff;
  border: 1px solid rgba(45,156,255,0.22);
}

/* 16. Mobile bottom tab bar — avoid content hiding */
@media (max-width: 640px) {
  .main { padding-bottom: calc(var(--s-8) + 56px) !important; }
  .focus-sheet { padding-bottom: 56px; }
}

/* 17. Make brand "Trading Hub" never wrap even in narrow top bar */
.topbar .brand { flex-shrink: 0; }
.topbar .palette-trigger { min-width: 0; flex: 1 1 auto; }

/* 18. Ensure the right pane has breathing room on empty */
.right { padding: 16px; }

/* 19. Scrollbar styling (WebKit) */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 10px; border: 2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.14); border: 2px solid transparent; background-clip: padding-box; }

/* 20. Final: prevent any tables from forcing viewport-overflow */
table { max-width: 100%; }
table.dense { display: block; overflow-x: auto; }
@media (min-width: 1025px) {
  table.dense { display: table; overflow-x: visible; }
}

/* ───── Ticker list (Now view: Strongest Buys/Sells, Net α leaders) ───── */
/* The renderer emits: <li><span class="tix">AAPL</span><span class="sc">67.8</span><span class="tier">BUY</span></li>
   Without proper gap styling, these collide into "AAPL67.8BUY". */
ol.tlist {
  list-style: decimal; padding-left: 28px; margin: 8px 0 0;
}
ol.tlist li {
  padding: 6px 0; line-height: 1.55;
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 10px;
  border-bottom: 1px dashed rgba(255,255,255,0.05);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease);
}
ol.tlist li:last-child { border-bottom: none; }
ol.tlist li:hover { background: rgba(212,160,23,0.04); }
ol.tlist li::marker { color: var(--fg-3); font-weight: 600; font-variant-numeric: tabular-nums; }
ol.tlist .tix {
  font-weight: 700; color: var(--fg-0);
  letter-spacing: -0.01em; min-width: 60px;
  font-family: var(--font-mono); font-size: 12.5px;
}
ol.tlist .sc {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  color: var(--fg-2); font-size: 12.5px; min-width: 56px;
}
ol.tlist .sc.tier-strong-buy  { color: var(--strong-buy); font-weight: 700; }
ol.tlist .sc.tier-buy         { color: var(--buy); font-weight: 700; }
ol.tlist .sc.tier-hold        { color: var(--fg-2); }
ol.tlist .sc.tier-sell        { color: var(--sell); font-weight: 700; }
ol.tlist .sc.tier-strong-sell { color: var(--strong-sell); font-weight: 700; }
ol.tlist .tier {
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.08em;
  padding: 2px 8px; border-radius: var(--r-pill);
  background: rgba(255,255,255,0.05); border: 1px solid var(--border);
  text-transform: uppercase;
}
/* Tier-colored backgrounds when the tier span is the last child */
ol.tlist .tier-strong-buy + .tier,
ol.tlist li .tier {
  /* Fallback neutral; class-based tier styles below take precedence */
}
/* Level chip inside tlist (e.g. "3×" for TQQQ) */
ol.tlist .lev-chip, ol.tlist .lev-bull, ol.tlist .lev-bear {
  font-size: 9.5px; padding: 1px 6px; border-radius: var(--r-xs);
  letter-spacing: 0.04em; font-weight: 700;
}
/* Session chip inside tlist (pre/rth/post) */
ol.tlist .session-chip { margin-left: 2px; }

/* Mobile density: tighter tlist items */
@media (max-width: 640px) {
  ol.tlist li { gap: 8px; padding: 5px 0; flex-wrap: wrap; }
  ol.tlist .tix { min-width: 52px; font-size: 12px; }
  ol.tlist .sc { min-width: 48px; font-size: 11.5px; }
  ol.tlist .tier { font-size: 9px; padding: 1.5px 7px; }
}

/* ───── Signals table: ensure columns breathe on mobile (horizontal scroll) ───── */
@media (max-width: 640px) {
  table.dense { font-size: 11.5px; }
  table.dense th, table.dense td { padding: 6px 8px !important; white-space: nowrap; }
}

/* ───── Cascade card titles — stronger hierarchy ───── */
.card h2 {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: 12px; font-weight: 700; letter-spacing: 0.04em;
  color: var(--fg-1); text-transform: uppercase;
  margin: 0 0 var(--s-2); padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--border);
}
.card h2 .cascade-tag {
  font-size: 9.5px; letter-spacing: 0.06em; padding: 2px 8px;
  border-radius: var(--r-xs); font-weight: 700; text-transform: uppercase;
  border: 1px solid;
}
.card h2 .cascade-tag.tier-1 {
  background: rgba(45,156,255,0.1); color: #5ab3ff; border-color: rgba(45,156,255,0.22);
}
.card h2 .cascade-tag.tier-2 {
  background: rgba(138,146,160,0.08); color: var(--fg-2); border-color: rgba(138,146,160,0.2);
}
.card h2 .cascade-tag.tier-3 {
  background: rgba(87,93,104,0.14); color: var(--fg-3); border-color: rgba(87,93,104,0.25);
}

/* ───── Driver column (Signals table): keep code readable ───── */
td .driver { font-variant-numeric: tabular-nums; }
td .driver code {
  font-family: var(--font-mono); font-size: 10.5px;
  background: rgba(255,255,255,0.04); padding: 1px 5px;
  border-radius: 3px; letter-spacing: -0.01em;
}
td .driver.pos { color: var(--pos); }
td .driver.neg { color: var(--neg); }

/* ───── Regime summary paragraph — prominence ───── */
.card p strong {
  font-size: 16px; font-weight: 700; color: var(--fg-0);
  letter-spacing: -0.01em; text-transform: capitalize;
}

/* ───── Hero H1 context strip (space for future: timestamp, regime, tz) ───── */
.view > h1 + .hero-meta, .view > h1 ~ .hero-meta {
  display: flex; align-items: center; gap: 12px;
  margin: -8px 0 var(--s-4); padding-bottom: var(--s-3);
  font-size: 11px; color: var(--fg-3); border-bottom: 1px solid var(--border);
}

/* ───── Take? decision pills (Signals table) ───── */
.take {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.08em;
  padding: 2px 8px; border-radius: var(--r-pill);
  text-transform: uppercase; min-width: 44px;
  border: 1px solid;
}
.take.yes  { background: rgba(31,183,122,0.12); color: #1fb77a; border-color: rgba(31,183,122,0.3); }
.take.pass { background: rgba(138,146,160,0.08); color: var(--fg-2); border-color: rgba(138,146,160,0.22); }
.take.lean { background: rgba(240,160,32,0.1); color: #f0a020; border-color: rgba(240,160,32,0.26); }

/* ───── Mosaic column + confluence flags (Q2 2026-07-02) ───── */
.cell-mosaic .mosaic-val { font-variant-numeric: tabular-nums; font-weight: 600; }
.cell-mosaic .mosaic-val.pos { color: #1fb77a; }
.cell-mosaic .mosaic-val.neg { color: #e5484d; }
.mosaic-state { font-size: 11px; }
.mosaic-state.mosaic-div { color: #fda4af; }
.mosaic-state.mosaic-strong { color: #86efac; }
.mosaic-state.mosaic-weak { color: var(--fg-2); }
tr.row-mosaic-divergent td:first-child { box-shadow: inset 2px 0 0 rgba(244,63,94,0.5); }
.sg-confluence-banner {
  margin: 8px 0 10px; padding: 8px 12px; border-radius: 6px; font-size: 12px;
  background: rgba(244,63,94,0.08); border: 1px solid rgba(244,63,94,0.28); color: #fda4af;
}
.sg-confluence-banner a { color: #fda4af; text-decoration: underline; }

/* ───── Signals horizon column (2026-07-03 horizon prominence) ───── */
/* Mirrors the mosaic-cell conventions exactly: the same pos/neg glyph
   green/red (#1fb77a / #e5484d) and rose (#fda4af, same as .mosaic-div)
   for the ⏳≠ short/long divergence marker — divergence is the established
   rose semantic in this table. None of these hexes are canonical-palette
   literals, so the color-grammar lint gains zero new violations. */
td.cell-horizon { white-space: nowrap; }
.hz-badge {
  font-size: 10px; font-weight: 700; letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums; color: var(--fg-2);
  border: 1px solid rgba(138,146,160,0.28); border-radius: 4px; padding: 1px 5px;
}
.hz-strip { font-size: 10px; font-variant-numeric: tabular-nums; }
.hz-strip .hz-h { font-weight: 600; margin-left: 1px; }
.hz-strip .hz-h.pos { color: #1fb77a; }
.hz-strip .hz-h.neg { color: #e5484d; }
.hz-strip .hz-h.hz-empty { color: var(--fg-2); opacity: 0.6; }
.hz-strip .hz-div { color: #fda4af; font-weight: 700; font-size: 11px; }

/* ───── Cell sparkline (20-bar column) ───── */
td.cell-spark, th.cell-spark {
  width: 72px; text-align: center; padding: 4px 8px !important;
}
.cell-spark-svg {
  display: inline-block; vertical-align: middle;
  filter: drop-shadow(0 0 4px rgba(212,160,23,0.08));
}

/* ───── Signals section tier cell in-line color hint ───── */
td.cell-tier { font-weight: 700; font-size: 11px; letter-spacing: 0.02em; }

/* ───── KPI delta pills (tiny arrows, tight) ───── */
.kpi-delta {
  display: inline-flex; align-items: center;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 10px; font-weight: 700; letter-spacing: -0.01em;
  border-radius: var(--r-pill); padding: 2px 7px;
  margin-left: 8px; vertical-align: middle;
}
.kpi-delta.pos { background: rgba(31,183,122,0.1); color: var(--pos); }
.kpi-delta.neg { background: rgba(229,62,62,0.1); color: var(--neg); }
.kpi-delta.flat { background: rgba(138,146,160,0.08); color: var(--fg-2); }

/* ───── KPI mini sparkline inline with value ───── */
.kpi-spark-mini {
  display: inline-block; vertical-align: middle;
  margin-left: 8px; opacity: 0.7;
}

/* ───── Tier pill sizing standardization across all views ───── */
td.cell-tier {
  /* Inline tier text — doesn't use .tier-pill chrome */
  font-variant-numeric: tabular-nums;
}
td.cell-tier.tier-strong-buy::before,
td.cell-tier.tier-buy::before,
td.cell-tier.tier-hold::before,
td.cell-tier.tier-sell::before,
td.cell-tier.tier-strong-sell::before {
  content: '●'; margin-right: 5px; font-size: 8px;
}

/* ───── Scope: Level (3x bull/bear) badge inline ───── */
.lev-chip, .lev-bull, .lev-bear {
  display: inline-flex; align-items: center;
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.04em;
  padding: 1px 6px; border-radius: var(--r-xs); margin-left: 6px;
  border: 1px solid;
}
.lev-bull { background: rgba(31,183,122,0.1); color: var(--pos); border-color: rgba(31,183,122,0.22); }
.lev-bear { background: rgba(229,62,62,0.1); color: var(--neg); border-color: rgba(229,62,62,0.22); }

/* ────────────────────────────────────────────────────────────────────────
   PRESCIENCE-PASS 7 — forward-looking UI surfaces (v11)
   Every new element here is read "what's likely next", never "what just
   happened". Tonal separation from the backward-looking cards: forward
   elements carry a subtle gradient + sharper typography + tighter borders.
   ──────────────────────────────────────────────────────────────────────── */

/* ── Now-view: What's next card ── */
.prescience-card {
  background: linear-gradient(180deg, rgba(240,160,32,0.04), rgba(240,160,32,0.01) 60%, transparent);
  border: 1px solid rgba(240,160,32,0.18);
}
.prescience-card h2 { display: flex; align-items: center; gap: 10px; }
.prescience-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
  margin-top: 4px;
}
.prescience-h {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--fg-2);
  margin: 0 0 6px 0;
}
.prescience-list li {
  display: flex !important; align-items: center; gap: 10px;
  padding: 4px 0; font-variant-numeric: tabular-nums;
}
.prescience-mv {
  font-family: var(--font-mono);
  font-weight: 700;
  min-width: 72px;
}
.prescience-mv.pos { color: var(--pos); }
.prescience-mv.neg { color: var(--neg); }
.prescience-pu, .prescience-conf { font-size: 11px; }
.prescience-indicators {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 14px; padding-top: 12px;
  border-top: 1px solid var(--bg-2);
}
.prescience-chip {
  font-size: 10.5px; font-weight: 600;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  border: 1px solid;
  white-space: nowrap;
  cursor: default;
}
.prescience-chip.warn { background: rgba(240,160,32,0.1); color: #f0a020; border-color: rgba(240,160,32,0.25); }
.prescience-chip.info { background: rgba(90,130,200,0.08); color: #7aa2d9; border-color: rgba(90,130,200,0.2); }
.prescience-chip.pos  { background: rgba(31,183,122,0.1); color: var(--pos); border-color: rgba(31,183,122,0.22); }
.prescience-chip b { color: inherit; margin-right: 4px; }

@media (max-width: 640px){
  .prescience-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
}

/* ── Signals table: expected-move + hold columns ── */
td[data-h="Exp. move (1d)"], td[data-h="Hold"] {
  font-variant-numeric: tabular-nums;
  font-family: var(--font-mono);
  font-size: 12px;
  white-space: nowrap;
}
.em {
  font-weight: 700;
  padding: 1px 6px;
  border-radius: var(--r-xs);
}
.em.pos  { color: var(--pos); background: rgba(31,183,122,0.08); }
.em.neg  { color: var(--neg); background: rgba(229,62,62,0.08); }
.em.flat { color: var(--fg-3); }
td[data-h="Hold"] .hold { color: var(--fg-2); font-size: 11px; }

/* ── Focus pane: Playbook card ── */
.playbook-card {
  margin: 12px 0 18px 0;
  padding: 14px 16px;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent);
  border: 1px solid var(--bg-2);
  border-radius: var(--r-md);
}
.pb-head {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--bg-2);
  padding-bottom: 10px;
}
.pb-action {
  font-size: 11px; font-weight: 800; letter-spacing: 0.12em;
  padding: 4px 11px; border-radius: var(--r-pill);
  border: 1px solid;
}
.pb-buy       { background: rgba(31,183,122,0.18); color: var(--pos); border-color: rgba(31,183,122,0.38); }
.pb-lean-buy  { background: rgba(31,183,122,0.08); color: var(--pos); border-color: rgba(31,183,122,0.22); }
.pb-wait      { background: rgba(138,146,160,0.08); color: var(--fg-2); border-color: rgba(138,146,160,0.18); }
.pb-lean-sell { background: rgba(229,62,62,0.08); color: var(--neg); border-color: rgba(229,62,62,0.22); }
.pb-sell      { background: rgba(229,62,62,0.18); color: var(--neg); border-color: rgba(229,62,62,0.38); }
.pb-abort     { background: rgba(229,62,62,0.25); color: #ff6b6b; border-color: rgba(229,62,62,0.5); }
.pb-title {
  font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--fg-2);
}
.pb-forecast {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 11px;
  white-space: nowrap;
}
.pb-brackets {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}
.pb-bracket {
  padding: 8px 10px;
  background: var(--bg-1);
  border: 1px solid var(--bg-2);
  border-radius: var(--r-sm);
}
.pb-bracket-k {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--fg-3);
}
.pb-bracket-v {
  font-family: var(--font-mono);
  font-size: 14px; font-weight: 700;
  color: var(--fg-0);
  margin-top: 2px;
}
.pb-bracket.pb-target { border-left: 2px solid var(--pos); }
.pb-bracket.pb-stop   { border-left: 2px solid var(--neg); }
.pb-hold, .pb-sizing {
  font-size: 12px;
  margin-bottom: 8px;
}
.pb-section {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--bg-2);
}
.pb-section-h {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--fg-2);
  margin-bottom: 6px;
}
.pb-abort-list, .pb-noact-list {
  margin: 0; padding-left: 16px; list-style: disc;
}
.pb-abort-list li, .pb-noact-list li {
  margin: 4px 0;
  line-height: 1.5;
}
.pb-abort-list code {
  background: var(--bg-1);
  padding: 1px 5px;
  border-radius: var(--r-xs);
  font-size: 11px;
}
.pb-kind-hard-stop      { list-style-type: square; }
.pb-kind-time-stop      { list-style-type: circle; }
.pb-kind-regime-stop,
.pb-kind-liquidity-stop { list-style-type: disc; }
.pb-rationale { margin-top: 10px; font-size: 11px; line-height: 1.55; }

/* ── Holdings: Timing column ── */
.holdings-table td:nth-last-child(2) .em { font-size: 11px; }

/* ═══════════════════════════════════════════════════════════════════════
   PASS 8-11 — New surface modules (palette / cone / mtf-chart / tour /
   factor-editor). All use the existing token system.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Command palette (⌘-K) — Linear/Raycast lineage ─────────────────── */
#palette-root {
  position: fixed; inset: 0; z-index: 9000;
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 14vh;
}
#palette-root[hidden] { display: none; }
#palette-root .palette-backdrop {
  position: absolute; inset: 0;
  background: rgba(8, 11, 16, 0.66);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  animation: palette-fade-in var(--dur) var(--ease-out);
}
.palette-dialog {
  position: relative;
  width: min(640px, 92vw);
  max-height: 70vh;
  background: var(--bg-1);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-lg);
  box-shadow: var(--elev-3);
  display: flex; flex-direction: column;
  overflow: hidden;
  animation: palette-slide-in 220ms var(--ease-out);
}
.palette-head {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-1);
}
.palette-head .p-search-icon { color: var(--fg-2); flex-shrink: 0; }
.palette-head input {
  flex: 1; min-width: 0;
  background: transparent;
  border: none; outline: none;
  color: var(--fg-0);
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.palette-head input::placeholder { color: var(--fg-3); }
.p-esc {
  font-family: var(--font-mono); font-size: 10px;
  padding: 2px 6px;
  border: 1px solid var(--border-strong); border-radius: var(--r-xs);
  color: var(--fg-2);
  background: var(--bg-2);
}
.palette-list {
  list-style: none; margin: 0; padding: 6px 0;
  overflow-y: auto;
  scroll-behavior: smooth;
}
.p-item {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 8px 16px;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease);
}
.p-item.sel,
.p-item:hover { background: var(--bg-hover); }
.p-item.sel { box-shadow: inset 2px 0 0 var(--accent); }
.p-kind {
  font-family: var(--font-mono); font-size: 9px;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--fg-2);
  padding: 2px 6px;
  border-radius: var(--r-xs);
  background: var(--bg-2);
  text-align: center;
}
.p-kind-view   { color: #2d9cff; background: rgba(45,156,255,0.10); }
.p-kind-ticker { color: var(--accent); background: var(--accent-bg); }
.p-kind-action { color: var(--fg-1); background: rgba(255,255,255,0.05); }
.p-label {
  font-size: 13.5px; font-weight: 500;
  color: var(--fg-0);
  letter-spacing: -0.005em;
  white-space: nowrap; text-overflow: ellipsis; overflow: hidden;
}
.p-hint {
  font-size: 11px; color: var(--fg-2);
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}
.p-empty {
  padding: 24px 16px;
  text-align: center;
  color: var(--fg-2);
  font-size: 13px;
}
.palette-foot {
  display: flex; gap: 16px;
  padding: 10px 16px;
  border-top: 1px solid var(--border);
  background: var(--bg-0);
  font-size: 11px; color: var(--fg-2);
}
.palette-foot kbd {
  display: inline-block;
  font-family: var(--font-mono); font-size: 10px;
  padding: 1px 5px;
  margin: 0 3px;
  border: 1px solid var(--border-strong); border-radius: var(--r-xs);
  background: var(--bg-2);
  color: var(--fg-1);
  min-width: 16px; text-align: center;
}
@keyframes palette-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes palette-slide-in {
  from { opacity: 0; transform: translateY(-8px) scale(0.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Multi-timeframe chart (chart-mtf.js) ───────────────────────────── */
.mtf-svg { display: block; width: 100%; height: auto; }
.mtf-tf-picker {
  display: inline-flex; gap: 2px;
  padding: 2px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.mtf-tf {
  font-family: var(--font-mono); font-size: 11px;
  padding: 4px 9px;
  border: none; background: transparent;
  color: var(--fg-2);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: color var(--dur-fast), background var(--dur-fast);
  font-weight: 500;
  letter-spacing: 0.02em;
}
.mtf-tf:hover { color: var(--fg-0); background: var(--bg-3); }
.mtf-tf.active {
  color: var(--accent);
  background: var(--accent-bg);
  box-shadow: inset 0 0 0 1px var(--accent-dim);
}
.mtf-tf:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.chart-empty {
  padding: 28px 16px;
  text-align: center;
  color: var(--fg-2); font-size: 12px;
  border: 1px dashed var(--border);
  border-radius: var(--r-md);
  background: var(--bg-1);
}

/* ── Scenario cone SVG ──────────────────────────────────────────────── */
.cone-svg { display: block; width: 100%; height: auto; }
.cone-grid line { vector-effect: non-scaling-stroke; }

/* ── Onboarding tour ────────────────────────────────────────────────── */
.thv2-tour-root {
  position: fixed; inset: 0; z-index: 9500;
  pointer-events: none;
}
.thv2-tour-backdrop {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
  pointer-events: auto;
  animation: palette-fade-in var(--dur) var(--ease-out);
}
/* When a real element is spotlit, its 9999px box-shadow scrim already paints
   the rgba(0,0,0,0.55) dim around it; doubling that with the backdrop bg
   produces ~0.80 effective opacity (too dark). The has-spot class is set on
   .thv2-tour-root in step() and cleared in finish(). Backdrop stays
   click-trapping (transparent fill) so click-outside-to-close still works. */
.thv2-tour-root.has-spot .thv2-tour-backdrop {
  background: transparent;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.thv2-tour-tip {
  position: absolute;
  width: 320px; max-width: 90vw;
  background: var(--bg-1);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-lg);
  box-shadow: var(--elev-3);
  padding: 18px 18px 14px;
  pointer-events: auto;
  animation: palette-slide-in 220ms var(--ease-out);
}
.thv2-tour-progress {
  font-family: var(--font-mono); font-size: 10px;
  color: var(--fg-2);
  letter-spacing: 0.06em;
  margin-bottom: 4px;
}
.thv2-tour-title {
  font-size: 16px; font-weight: 700;
  letter-spacing: -0.015em;
  margin: 0 0 8px;
  color: var(--fg-0);
}
.thv2-tour-body {
  font-size: 13px; line-height: 1.55;
  color: var(--fg-1);
  margin: 0 0 14px;
}
.thv2-tour-body strong { color: var(--fg-0); font-weight: 600; }
.thv2-tour-foot {
  display: flex; justify-content: space-between; align-items: center;
  gap: 10px;
}
.thv2-tour-skip,
.thv2-tour-next {
  font-family: var(--font-sans); font-size: 12px; font-weight: 500;
  padding: 7px 14px;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
}
.thv2-tour-skip {
  background: transparent;
  border: 1px solid transparent;
  color: var(--fg-2);
}
.thv2-tour-skip:hover { color: var(--fg-0); background: var(--bg-3); }
.thv2-tour-next {
  background: var(--accent);
  color: #1a1100;
  border: 1px solid var(--accent-hi);
}
.thv2-tour-next:hover { background: var(--accent-hi); }
.thv2-tour-skip:focus-visible,
.thv2-tour-next:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.thv2-tour-spot {
  position: relative;
  z-index: 9501;
  box-shadow: 0 0 0 9999px rgba(0,0,0,0.55), 0 0 0 3px var(--accent), 0 0 24px rgba(212,160,23,0.4) !important;
  border-radius: var(--r-md);
  transition: box-shadow var(--dur) var(--ease-out);
}

/* ── Factor editor (factor-editor.js) ───────────────────────────────── */
.fx-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px;
  padding: 0 0 18px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
}
.fx-title {
  font-size: 18px; font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 4px; color: var(--fg-0);
}
.fx-sub {
  font-size: 12.5px; line-height: 1.5;
  color: var(--fg-2);
  margin: 0; max-width: 56ch;
}
.fx-sub strong { color: var(--fg-1); font-weight: 600; }
.fx-reset {
  font-family: var(--font-sans); font-size: 11.5px; font-weight: 500;
  padding: 6px 12px;
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  color: var(--fg-1); cursor: pointer;
  transition: background var(--dur-fast), border-color var(--dur-fast);
  white-space: nowrap;
}
.fx-reset:hover:not(:disabled) { background: var(--bg-2); border-color: var(--accent-dim); color: var(--accent); }
.fx-reset:disabled { opacity: 0.4; cursor: not-allowed; }
.fx-fam { margin-bottom: 24px; }
.fx-fam-title {
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.10em;
  color: var(--fg-2);
  margin: 0 0 10px;
}
.fx-fam-grid {
  display: grid; gap: 8px;
}
.fx-row {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) 2fr 48px;
  align-items: center;
  gap: 14px;
  padding: 10px 12px;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  transition: border-color var(--dur-fast);
}
.fx-row:hover { border-color: var(--border-strong); }
.fx-row.is-changed {
  border-color: var(--accent-dim);
  background: linear-gradient(180deg, var(--accent-bg), var(--bg-1));
}
.fx-label {
  font-size: 13px; font-weight: 500;
  color: var(--fg-1);
}
.fx-row.is-changed .fx-label { color: var(--accent); }
.fx-slider {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 4px;
  background: var(--bg-3);
  border-radius: var(--r-pill);
  outline: none;
  cursor: pointer;
}
.fx-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 16px; height: 16px;
  background: var(--accent);
  border: 2px solid var(--bg-0);
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0,0,0,0.4);
  transition: transform var(--dur-fast);
  cursor: grab;
}
.fx-slider::-moz-range-thumb {
  width: 16px; height: 16px;
  background: var(--accent);
  border: 2px solid var(--bg-0);
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0,0,0,0.4);
  cursor: grab;
}
.fx-slider:hover::-webkit-slider-thumb { transform: scale(1.15); }
.fx-slider:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
.fx-val {
  font-family: var(--font-mono); font-size: 12.5px; font-weight: 600;
  color: var(--fg-1);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.fx-row.is-changed .fx-val { color: var(--accent); }
.fx-foot {
  margin-top: 8px;
  padding: 12px 0 0;
  border-top: 1px solid var(--border);
  display: flex; justify-content: space-between;
}
.fx-summary { font-size: 12px; color: var(--fg-2); }

/* ── News feed cards (engine/news.js + future view) ─────────────────── */
.news-list {
  display: flex; flex-direction: column;
  gap: 8px;
}
.news-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 14px;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  transition: border-color var(--dur-fast), background var(--dur-fast);
}
.news-card:hover { border-color: var(--border-strong); background: var(--bg-2); }
.news-card .nc-sentiment {
  width: 4px; height: 100%;
  align-self: stretch;
  border-radius: var(--r-pill);
}
.news-card.nc-pos .nc-sentiment { background: var(--pos); }
.news-card.nc-neg .nc-sentiment { background: var(--neg); }
.news-card.nc-neu .nc-sentiment { background: var(--fg-3); }
.news-card .nc-title {
  font-size: 13.5px; font-weight: 500;
  color: var(--fg-0);
  line-height: 1.45;
  margin: 0 0 4px;
}
.news-card a.nc-title-link { color: inherit; text-decoration: none; }
.news-card a.nc-title-link:hover { color: var(--accent); }
.news-card .nc-meta {
  font-size: 11px; color: var(--fg-2);
  font-variant-numeric: tabular-nums;
  display: flex; gap: 8px; align-items: center;
}
.news-card .nc-meta .nc-source {
  text-transform: uppercase; letter-spacing: 0.06em;
  font-weight: 600; color: var(--fg-2);
}
.news-card .nc-tag {
  font-family: var(--font-mono); font-size: 10px;
  padding: 2px 6px;
  background: var(--bg-2);
  border-radius: var(--r-xs);
  color: var(--fg-1);
}

/* ── Reduced motion respect (a11y) ──────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .thv2-tour-spot { transition: none !important; }
}

/* ── Mobile palette adjustments ─────────────────────────────────────── */
@media (max-width: 720px) {
  #palette-root { padding-top: 7vh; }
  .palette-dialog { width: 96vw; max-height: 84vh; }
  .palette-foot { display: none; }
  .p-item { grid-template-columns: 56px 1fr; }
  .p-hint { display: none; }
  .thv2-tour-tip { width: calc(100vw - 32px); max-width: 360px; }
  .fx-row { grid-template-columns: 1fr 1fr 44px; gap: 10px; }
  .fx-label { font-size: 12px; }
}

/* ── Focus pane: chart strip + cone slot + factor editor wrap ───────── */
.focus-chart-strip {
  margin: 12px 0 8px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg-1);
}
.focus-chart-strip .mtf-tf-picker { margin-bottom: 8px; }
.focus-chart-host { width: 100%; min-height: 220px; }
.focus-cone-slot {
  margin: 8px 0 12px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg-1);
}
.factor-editor-wrap { padding: 18px; }
.factor-grid-h {
  font-size: 13px;
  font-weight: 600;
  margin: 22px 0 10px;
  color: var(--fg-1);
  letter-spacing: -0.01em;
}

/* ── Light-mode overrides ───────────────────────────────────────────── */
html[data-theme="light"] #palette-root .palette-backdrop {
  background: rgba(240, 243, 248, 0.62);
}
html[data-theme="light"] .palette-dialog {
  background: #ffffff;
  border-color: rgba(20, 30, 50, 0.10);
  box-shadow: 0 12px 32px rgba(20,30,50,0.18), 0 1px 3px rgba(20,30,50,0.08);
}
html[data-theme="light"] .palette-head input { color: #0F172A; }
html[data-theme="light"] .p-label { color: #0F172A; }
html[data-theme="light"] .p-item.sel,
html[data-theme="light"] .p-item:hover { background: #f1f5f9; }
html[data-theme="light"] .palette-foot { background: #f8fafc; }
html[data-theme="light"] .thv2-tour-tip { background: #ffffff; border-color: rgba(20,30,50,0.10); }
html[data-theme="light"] .thv2-tour-title { color: #0F172A; }
html[data-theme="light"] .thv2-tour-body { color: #475569; }
html[data-theme="light"] .fx-row { background: #ffffff; border-color: rgba(20,30,50,0.10); }
html[data-theme="light"] .fx-row.is-changed { background: linear-gradient(180deg, rgba(212,160,23,0.06), #ffffff); }
html[data-theme="light"] .fx-label { color: #0F172A; }
html[data-theme="light"] .news-card { background: #ffffff; border-color: rgba(20,30,50,0.10); }
html[data-theme="light"] .news-card:hover { background: #f8fafc; }
html[data-theme="light"] .news-card .nc-title { color: #0F172A; }

/* ═══════════════════════════════════════════════════════════════════════
   v2.2 ELITE FINISHING PASS — Apple/Linear/Notion-tier polish
   2026-04-24 — focus areas surfaced by UI/UX audit:
     1. Now-view context strip (regime · session · update · breadth)
     2. Equity tile marquee (2-col span on wide, prominent typography)
     3. Empty-focus pane → Live Brief (top moves + regime + watchlist)
     4. Cockpit-tab active underline animation
     5. Topbar cluster hierarchy refinement
     6. Card padding rhythm (desktop bump)
     7. Mobile drawer section dividers
     8. Hover micro-interactions on rail items
     9. Strongest-Buy/Sell list rhythm refinement
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── 1. Now-view context strip ─────────────────────────────────────── */
.now-context {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin: -4px 0 var(--s-4);
  padding: 10px 14px;
  background: linear-gradient(180deg, var(--bg-1), var(--bg-0) 110%);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  font-size: 12px;
  color: var(--fg-2);
  letter-spacing: -0.005em;
  box-shadow: var(--elev-1);
}
.now-context .nc-item {
  display: inline-flex; align-items: center; gap: 6px;
  white-space: nowrap;
}
.now-context .nc-item + .nc-item::before {
  content: ''; display: inline-block;
  width: 3px; height: 3px; border-radius: 50%;
  background: var(--fg-3);
  margin-right: 8px; vertical-align: middle; opacity: 0.7;
}
.now-context .nc-k {
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--fg-3);
}
.now-context .nc-v {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-weight: 600; color: var(--fg-0);
  letter-spacing: -0.01em;
}
.now-context .nc-v.pos { color: var(--pos); }
.now-context .nc-v.neg { color: var(--neg); }
.now-context .nc-v.warm { color: var(--accent); }
.now-context .nc-pulse {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--pos);
  box-shadow: 0 0 0 0 rgba(31,183,122,0.55);
  animation: nc-pulse 2s var(--ease-out) infinite;
}
@keyframes nc-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(31,183,122,0.55); }
  70%  { box-shadow: 0 0 0 6px rgba(31,183,122,0); }
  100% { box-shadow: 0 0 0 0 rgba(31,183,122,0); }
}
.now-context .nc-pulse.warn { background: var(--accent); animation: none; box-shadow: 0 0 8px rgba(212,160,23,0.4); }
.now-context .nc-pulse.off  { background: var(--fg-3); animation: none; }
@media (max-width: 640px) {
  .now-context { gap: 8px; padding: 8px 10px; font-size: 11px; }
  .now-context .nc-item + .nc-item::before { margin-right: 6px; }
}

/* ─── 2. Equity tile marquee (Now-view first KPI) ───────────────────── */
.kpi-row {
  grid-template-columns: minmax(0, 2fr) repeat(auto-fit, minmax(140px, 1fr)) !important;
}
.kpi-row .kpi:first-child {
  background: linear-gradient(140deg, var(--bg-2) 0%, rgba(212,160,23,0.04) 60%, rgba(26,31,40,0.7) 100%);
  border-color: rgba(212,160,23,0.18);
  position: relative;
  overflow: hidden;
}
.kpi-row .kpi:first-child::before {
  content: ''; position: absolute;
  top: 0; left: 0; width: 3px; height: 100%;
  background: linear-gradient(180deg, var(--accent) 0%, transparent 80%);
  opacity: 0.55;
}
.kpi-row .kpi:first-child .kpi-v {
  font-size: clamp(28px, 2.6vw, 36px) !important;
  letter-spacing: -0.03em;
  font-weight: 700;
}
.kpi-row .kpi:first-child .kpi-k {
  color: var(--accent) !important;
  opacity: 0.9;
}
@media (max-width: 1024px) {
  .kpi-row { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important; }
  .kpi-row .kpi:first-child { background: var(--bg-2); }
  .kpi-row .kpi:first-child .kpi-v { font-size: clamp(22px, 2.2vw, 28px) !important; }
}

/* ─── 3. Empty focus pane → Live Brief ──────────────────────────────── */
.live-brief {
  display: flex; flex-direction: column; gap: 14px;
  padding: 14px 12px 24px;
  height: 100%;
  overflow-y: auto;
}
.live-brief .lb-head {
  display: flex; align-items: center; gap: 8px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.live-brief .lb-mark {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--accent);
  padding: 3px 8px; border-radius: var(--r-pill);
  background: var(--accent-bg);
  border: 1px solid rgba(212,160,23,0.2);
}
.live-brief .lb-mark .lb-pulse {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent); animation: nc-pulse 2.4s ease-out infinite;
  box-shadow: 0 0 0 0 rgba(212,160,23,0.5);
}
.live-brief .lb-title {
  font-size: 11.5px; font-weight: 600;
  color: var(--fg-2); letter-spacing: -0.005em;
}
.live-brief .lb-card {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 12px 14px;
}
.live-brief .lb-card-h {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 10px;
}
.live-brief .lb-card-h h4 {
  margin: 0;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--fg-3);
}
.live-brief .lb-card-h .lb-meta {
  font-size: 10.5px; color: var(--fg-2);
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
}
.live-brief .lb-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column;
}
.live-brief .lb-list li {
  display: grid;
  grid-template-columns: minmax(56px, auto) 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 7px 0;
  border-bottom: 1px dashed rgba(255,255,255,0.04);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease);
  font-variant-numeric: tabular-nums;
}
.live-brief .lb-list li:last-child { border-bottom: none; }
.live-brief .lb-list li:hover { background: rgba(212,160,23,0.04); }
.live-brief .lb-list .lb-tk {
  font-family: var(--font-mono); font-weight: 700;
  color: var(--fg-0); font-size: 12px;
  letter-spacing: -0.01em;
}
.live-brief .lb-list .lb-sc {
  font-family: var(--font-mono); font-size: 11.5px;
  color: var(--fg-2);
}
.live-brief .lb-list .lb-tier {
  font-size: 9px; font-weight: 700; letter-spacing: 0.08em;
  padding: 2px 7px; border-radius: var(--r-pill);
  background: rgba(255,255,255,0.05); border: 1px solid var(--border);
  text-transform: uppercase;
  text-align: center; min-width: 50px;
}
.live-brief .lb-list .lb-tier.t-strong-buy { background: rgba(31,183,122,0.14); color: var(--pos); border-color: rgba(31,183,122,0.28); }
.live-brief .lb-list .lb-tier.t-buy        { background: rgba(45,156,255,0.12); color: #5ab3ff; border-color: rgba(45,156,255,0.25); }
.live-brief .lb-list .lb-tier.t-hold       { background: rgba(138,146,160,0.08); color: var(--fg-2); border-color: rgba(138,146,160,0.18); }
.live-brief .lb-list .lb-tier.t-sell       { background: rgba(240,160,32,0.12); color: var(--sell); border-color: rgba(240,160,32,0.25); }
.live-brief .lb-list .lb-tier.t-strong-sell{ background: rgba(229,62,62,0.14); color: var(--neg); border-color: rgba(229,62,62,0.28); }
.live-brief .lb-empty {
  font-size: 12px; color: var(--fg-3);
  padding: 8px 0; line-height: 1.5;
}
.live-brief .lb-regime-line {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  font-size: 12px; color: var(--fg-1); line-height: 1.55;
}
.live-brief .lb-regime-line .lb-regime-state {
  font-family: var(--font-mono); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--fg-0); font-size: 13px;
}
.live-brief .lb-regime-line .lb-conf {
  font-size: 10.5px; color: var(--fg-3);
  font-family: var(--font-mono);
}
.live-brief .lb-tip {
  margin-top: 4px;
  font-size: 11px; color: var(--fg-3);
  text-align: center; line-height: 1.5;
  padding: 10px 0 4px;
  border-top: 1px solid var(--border);
}
.live-brief .lb-tip kbd {
  font-family: var(--font-mono); font-size: 10px;
  padding: 1px 5px; margin: 0 2px;
  background: var(--bg-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-xs);
  color: var(--fg-1);
}

/* ─── 4. Cockpit tab active underline animation ─────────────────────── */
.cockpit-tabs .ct-tab {
  position: relative;
  padding: 9px 14px 11px;
  font-size: 12.5px; font-weight: 600;
  color: var(--fg-2);
  letter-spacing: -0.005em;
  border-bottom: 2px solid transparent;
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex; align-items: center; gap: 6px;
}
.cockpit-tabs .ct-tab:hover { color: var(--fg-0); background: rgba(255,255,255,0.02); }
.cockpit-tabs .ct-tab.active {
  color: var(--fg-0);
  font-weight: 700;
}
.cockpit-tabs .ct-tab.active::after {
  content: ''; position: absolute;
  left: 14px; right: 14px; bottom: -1px; height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--accent) 20%, var(--accent) 80%, transparent 100%);
  border-radius: var(--r-pill);
  animation: ct-underline 280ms var(--ease-out) forwards;
}
@keyframes ct-underline {
  from { transform: scaleX(0.35); opacity: 0.4; }
  to   { transform: scaleX(1); opacity: 1; }
}
.cockpit-tabs .ct-tab .ic {
  font-size: 13px; opacity: 0.75;
  margin-right: 1px;
}
.cockpit-tabs .ct-tab.active .ic { color: var(--accent); opacity: 1; }
.cockpit-tabs .ct-tab .ct-badge:not(:empty) {
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 700;
  padding: 1px 6px; border-radius: var(--r-pill);
  background: var(--accent-bg); color: var(--accent);
  letter-spacing: 0.04em; line-height: 1.4;
  border: 1px solid rgba(212,160,23,0.2);
  margin-left: 2px;
}

/* ─── 5. Topbar cluster hierarchy refinement ────────────────────────── */
.topbar { gap: 12px; }
.topbar .conn-cluster,
.topbar .status {
  height: 28px;
  border-radius: var(--r-pill);
  padding: 0 12px;
  display: inline-flex; align-items: center;
  font-size: 11.5px; font-weight: 600;
  letter-spacing: -0.005em;
  background: var(--bg-2);
  border: 1px solid var(--border);
  color: var(--fg-1);
  transition: border-color var(--dur-fast), background var(--dur-fast);
}
.topbar .conn-cluster:hover,
.topbar .status:hover { border-color: var(--border-strong); background: var(--bg-3); }
.topbar .conn-cluster .conn-dot,
.topbar .status .dot {
  width: 6px; height: 6px; border-radius: 50%;
  margin-right: 7px;
}
.topbar .status #ms-label { font-weight: 600; color: var(--fg-1); }
.topbar .status .dot.pulse {
  animation: nc-pulse 2.4s var(--ease-out) infinite;
}
.topbar .conn-cluster .conn-label { font-weight: 600; }
.topbar .thesis-mode-tabs {
  height: 28px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  padding: 2px;
  display: inline-flex; align-items: center;
}
.topbar .thesis-mode-tabs button {
  height: 22px;
  border-radius: var(--r-pill);
  padding: 0 11px;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-2);
  background: transparent; border: 0;
  cursor: pointer;
  transition: color var(--dur-fast), background var(--dur-fast);
}
.topbar .thesis-mode-tabs button.active,
.topbar .thesis-mode-tabs button[aria-selected="true"] {
  background: var(--bg-0);
  color: var(--fg-0);
  box-shadow: var(--elev-1);
}

/* ─── 6. Card padding rhythm + h2 hierarchy refinement (desktop) ────── */
@media (min-width: 1025px) {
  .card { padding: 16px 18px; }
  .card + .card { margin-top: var(--s-3); }
}
.card h2 {
  margin: 0 0 12px;
  padding-bottom: 10px;
}
.card.cascade-0,
.card.cascade-1,
.card.cascade-2,
.card.cascade-3 {
  border-style: solid;
}
.card.cascade-1 { border-color: rgba(45,156,255,0.18); background: linear-gradient(180deg, rgba(45,156,255,0.025), transparent 80%); }
.card.cascade-2 { border-color: rgba(138,146,160,0.18); }
.card.cascade-3 { border-color: rgba(87,93,104,0.22); border-style: dashed; }

/* ─── 7. Mobile drawer section dividers + active gradient ───────────── */
.mobile-drawer .md-group + .md-group {
  border-top: 1px solid var(--border);
  margin-top: 6px; padding-top: 6px;
}
.mobile-drawer .md-item {
  display: flex; align-items: center; gap: 12px;
  min-height: 44px;
  font-size: 13.5px; font-weight: 500;
  color: var(--fg-1);
  letter-spacing: -0.005em;
  cursor: pointer;
}
.mobile-drawer .md-item .ic {
  font-size: 16px; opacity: 0.7;
  width: 18px; text-align: center;
}
.mobile-drawer .md-item:hover { background: var(--bg-2); color: var(--fg-0); }
.mobile-drawer .md-item:hover .ic { opacity: 1; color: var(--accent); }
.mobile-drawer .md-item.active .ic { color: var(--accent); opacity: 1; }
.mobile-drawer .md-badge:not(:empty) {
  margin-left: auto;
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  padding: 2px 8px; border-radius: var(--r-pill);
  background: var(--accent-bg); color: var(--accent);
  border: 1px solid rgba(212,160,23,0.22);
}

/* ─── 8. Rail item hover micro-interactions ─────────────────────────── */
.rail .nav-item {
  position: relative;
  border-left-width: 2px;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.rail .nav-item .ic {
  display: inline-flex; justify-content: center; align-items: center;
  width: 16px; opacity: 0.65;
  transition: opacity var(--dur-fast), color var(--dur-fast);
}
.rail .nav-item:hover .ic { opacity: 1; color: var(--fg-0); }
.rail .nav-item.active { color: var(--fg-0); font-weight: 600; }
.rail .nav-item.active .ic { color: var(--accent); opacity: 1; }
.rail .nav-item .badge:not(:empty) {
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 700;
  padding: 1px 6px; border-radius: var(--r-pill);
  letter-spacing: 0.04em;
  background: var(--bg-3); color: var(--fg-1);
  border: 1px solid var(--border);
}
.rail .nav-item.active .badge:not(:empty) {
  background: var(--accent-bg); color: var(--accent);
  border-color: rgba(212,160,23,0.22);
}

/* ─── 9. Strongest-Buy/Sell "Hold list" rhythm refinement ──────────── */
.tlist.tlist-secondary {
  /* Used for cascade-2/3 cards where the list is informational, not actionable */
  font-size: 11.5px;
  opacity: 0.92;
}
.tlist.tlist-secondary li { padding: 4px 0; }
.cascade-hint {
  font-size: 11.5px; line-height: 1.55;
  color: var(--fg-2);
  margin: -2px 0 8px;
  padding: 6px 10px;
  background: rgba(255,255,255,0.02);
  border-radius: var(--r-sm);
  border-left: 2px solid var(--border-strong);
}

/* ─── 10. Brand "v2" badge — refined geometry ────────────────────── */
.topbar .brand .v2 {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hi) 100%);
  color: #1a1305;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 2px 6px;
  font-size: 9px;
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(212,160,23,0.3), inset 0 1px 0 rgba(255,255,255,0.2);
  text-transform: uppercase;
  vertical-align: 2px;
}

/* ─── 11. Hamburger refinement (mobile) ────────────────────────────── */
.hamburger {
  width: 36px; height: 36px;
  display: inline-flex; flex-direction: column;
  justify-content: center; align-items: center;
  gap: 4px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  cursor: pointer;
  padding: 0;
}
.hamburger:hover { background: var(--bg-2); border-color: var(--border-strong); }
.hamburger:active { transform: scale(0.96); }
.hamburger span {
  display: block;
  width: 16px; height: 2px;
  background: var(--fg-1);
  border-radius: 1px;
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); background: var(--accent); }
.hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); background: var(--accent); }
@media (min-width: 1025px) { .hamburger { display: none; } }

/* ─── 12. View h1 hero balance ─────────────────────────────────────── */
.view > h1 {
  display: flex; align-items: baseline; gap: 14px;
  flex-wrap: wrap;
}
.view > h1 .h1-sub {
  font-size: 12.5px; font-weight: 500;
  color: var(--fg-3);
  letter-spacing: -0.005em;
  margin-left: auto;
}

/* ─── 13. Light-mode parity for v2.2 layer ─────────────────────────── */
html[data-theme="light"] .now-context {
  background: linear-gradient(180deg, #ffffff, #f7f7f5);
  border-color: rgba(20,30,50,0.10);
  color: #475569;
}
html[data-theme="light"] .now-context .nc-v { color: #0F172A; }
html[data-theme="light"] .now-context .nc-item + .nc-item::before { background: #94A3B8; }
html[data-theme="light"] .live-brief .lb-card { background: #ffffff; border-color: rgba(20,30,50,0.10); }
html[data-theme="light"] .live-brief .lb-list .lb-tk { color: #0F172A; }
html[data-theme="light"] .live-brief .lb-mark { background: rgba(184,134,18,0.10); color: #b88612; border-color: rgba(184,134,18,0.20); }
html[data-theme="light"] .live-brief .lb-list li:hover { background: rgba(184,134,18,0.06); }

/* ── SOTA Right-Pane Elevation (Wave-30 2026-05-13) ── */

/* Score bar track + fill */
.live-brief .lb-score-bar-track {
  display: block;
  width: 100%;
  height: 3px;
  background: rgba(255,255,255,0.07);
  border-radius: 99px;
  margin-top: 3px;
  overflow: hidden;
}
.live-brief .lb-score-bar-fill {
  display: block;
  height: 3px;
  border-radius: 99px;
  transition: width 0.6s var(--ease);
}

/* Row layout upgrade */
.live-brief .lb-list li.lb-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--s-2);
  padding: 9px var(--s-3);
}
.live-brief .lb-list .lb-sc-wrap {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.live-brief .lb-list .lb-right-col {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

/* Momentum arrows */
.live-brief .lb-list .lb-arrow-up   { font-size: 9px; color: var(--pos); opacity: 0.85; }
.live-brief .lb-list .lb-arrow-dn   { font-size: 9px; color: var(--neg); opacity: 0.85; }
.live-brief .lb-list .lb-arrow-flat { font-size: 9px; color: var(--fg-3); }

/* Regime card confidence bar */
.live-brief .lb-conf-track {
  height: 3px;
  background: rgba(255,255,255,0.07);
  border-radius: 99px;
  overflow: hidden;
  margin-top: 8px;
}
.live-brief .lb-conf-fill {
  height: 3px;
  border-radius: 99px;
  transition: width 0.8s var(--ease);
}

/* Enhanced card hover */
.live-brief .lb-card {
  transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.live-brief .lb-card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--elev-2);
}

/* Enhanced row hover */
.live-brief .lb-list li:hover {
  background: rgba(212,160,23,0.06);
  border-radius: var(--radius-sm);
}
.live-brief .lb-list li:focus-visible {
  outline: 2px solid var(--accent-dim);
  border-radius: var(--radius-sm);
}

/* Light mode overrides */
html[data-theme="light"] .live-brief .lb-score-bar-track { background: rgba(0,0,0,0.08); }
html[data-theme="light"] .live-brief .lb-conf-track      { background: rgba(0,0,0,0.08); }

html[data-theme="light"] .kpi-row .kpi:first-child {
  background: linear-gradient(140deg, #fdfcf7 0%, rgba(184,134,18,0.05) 60%, #ffffff 100%);
  border-color: rgba(184,134,18,0.18);
}
html[data-theme="light"] .topbar .conn-cluster,
html[data-theme="light"] .topbar .status {
  background: #ffffff; border-color: rgba(20,30,50,0.10); color: #22252a;
}
html[data-theme="light"] .topbar .conn-cluster:hover,
html[data-theme="light"] .topbar .status:hover { background: #f7f7f5; border-color: rgba(20,30,50,0.18); }
html[data-theme="light"] .topbar .thesis-mode-tabs { background: #ffffff; border-color: rgba(20,30,50,0.10); }
html[data-theme="light"] .topbar .thesis-mode-tabs button.active,
html[data-theme="light"] .topbar .thesis-mode-tabs button[aria-selected="true"] {
  background: #eceae4;
  color: #0F172A;
  box-shadow: 0 1px 2px rgba(20,30,50,0.06);
}
html[data-theme="light"] .cockpit-tabs .ct-tab { color: #525965; }
html[data-theme="light"] .cockpit-tabs .ct-tab.active { color: #0F172A; }
html[data-theme="light"] .mobile-drawer .md-item { color: #22252a; }
html[data-theme="light"] .mobile-drawer .md-item:hover { background: #f7f7f5; color: #0F172A; }
html[data-theme="light"] .rail .nav-item { color: #22252a; }
html[data-theme="light"] .rail .nav-item.active { color: #0F172A; }
html[data-theme="light"] .hamburger { border-color: rgba(20,30,50,0.10); }
html[data-theme="light"] .hamburger:hover { background: #f7f7f5; }
html[data-theme="light"] .hamburger span { background: #22252a; }

/* ─── 14. Mobile bottom-tab-bar refinement ─────────────────────────── */
@media (max-width: 640px) {
  .mobile-tab-bar {
    height: 60px;
    padding-bottom: env(safe-area-inset-bottom, 0);
    box-shadow: 0 -1px 0 var(--border), 0 -4px 16px rgba(0,0,0,0.18);
    background: linear-gradient(180deg, var(--bg-1) 0%, var(--bg-0) 100%);
  }
  .mobile-tab-bar .tab {
    flex: 1;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px;
    font-size: 9.5px; font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--fg-2);
    cursor: pointer;
    transition: color var(--dur-fast), background var(--dur-fast);
    position: relative;
    padding-top: 8px;
  }
  .mobile-tab-bar .tab .ic { font-size: 18px; opacity: 0.85; transition: transform var(--dur-fast); }
  .mobile-tab-bar .tab:active .ic { transform: scale(0.92); }
  .mobile-tab-bar .tab.active { color: var(--accent); }
  .mobile-tab-bar .tab.active .ic { opacity: 1; }
  .mobile-tab-bar .tab.active::before {
    content: ''; position: absolute;
    top: 0; left: 30%; right: 30%; height: 2px;
    background: var(--accent); border-radius: var(--r-pill);
    box-shadow: 0 0 8px rgba(212,160,23,0.4);
  }
  .mobile-tab-bar .tab .badge:not(:empty) {
    position: absolute; top: 4px; right: 22%;
    font-family: var(--font-mono); font-size: 8.5px; font-weight: 700;
    padding: 1px 5px; border-radius: var(--r-pill);
    background: var(--accent); color: #1a1305;
    line-height: 1.2;
    letter-spacing: 0;
  }
  /* Bring h1 inline-meta below on mobile */
  .view > h1 { flex-direction: column; align-items: flex-start; gap: 4px; }
  .view > h1 .h1-sub { margin-left: 0; font-size: 11.5px; }
}

/* ─── 15. Focus-pane head refinement ───────────────────────────────── */
.focus-head {
  display: flex; flex-direction: column; gap: 4px;
  padding: 8px 4px 12px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 12px;
}
.focus-head h3 {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 22px; font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--fg-0);
  display: flex; align-items: baseline; gap: 8px;
}
.focus-head .focus-name {
  font-size: 11.5px; line-height: 1.4;
  font-weight: 500;
}
.focus-head .focus-meta {
  display: flex; align-items: center; gap: 8px;
  margin-top: 4px;
}

/* ─── 16. Reduced motion fallback for v2.2 animations ──────────────── */
@media (prefers-reduced-motion: reduce) {
  .now-context .nc-pulse,
  .live-brief .lb-mark .lb-pulse,
  .topbar .status .dot.pulse {
    animation: none !important;
    box-shadow: none !important;
  }
  .cockpit-tabs .ct-tab.active::after { animation: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
 * v2.3 — Security Profile card
 * Dense per-ticker facts surface that sits below ACTION/PLAYBOOK and above
 * the COMPUTED ASSESSMENT in the focus pane. Answers "what is THIS
 * security?" — identity, mechanics, risk math, live state, peers, venues —
 * fully personalised to the focused ticker. No cross-ticker leakage.
 * ═══════════════════════════════════════════════════════════════════════ */
.security-profile {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  margin: 10px 0;
}
.sp-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 8px;
}
.sp-title {
  margin: 0;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-2);
}
.sp-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 8px;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}
.sp-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px dashed var(--border);
}
.sp-row:last-of-type { border-bottom: none; }
.sp-fact {
  display: flex; flex-direction: column; gap: 2px;
  min-width: 0;
}
.sp-label {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-3, var(--fg-2));
}
.sp-value {
  font-size: 13px;
  font-weight: 500;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
  word-break: break-word;
}
.sp-hint {
  font-size: 10.5px;
  line-height: 1.35;
}
.sp-row.sp-riskmath .sp-value {
  color: var(--accent, var(--fg));
}
.sp-peers {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--border);
}
.sp-peer-chips {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 6px;
}
.sp-peer-chip {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 3px 8px;
  cursor: pointer;
  text-decoration: none;
  color: var(--fg);
  transition: background 150ms var(--ease-out, ease-out), border-color 150ms var(--ease-out, ease-out);
}
.sp-peer-chip:hover {
  background: var(--bg-3, rgba(255,255,255,0.05));
  border-color: var(--accent, var(--border));
  color: var(--accent, var(--fg));
}
.sp-venues { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--border); }
.sp-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.sp-vchip {
  font-size: 10.5px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 6px;
  color: var(--fg-2);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Light-mode parity */
html[data-theme="light"] .security-profile {
  background: rgba(255,255,255,0.92);
  border-color: var(--border);
}
html[data-theme="light"] .sp-tag,
html[data-theme="light"] .sp-peer-chip,
html[data-theme="light"] .sp-vchip {
  background: rgba(0,0,0,0.04);
}

@media (max-width: 640px) {
  .sp-row { grid-template-columns: 1fr 1fr; gap: 8px; }
  .sp-row.sp-identity { grid-template-columns: 1fr; }
}

/* ─────────────────────────────────────────────────────────────────────
 * v2.4 — Forecast page (prescience-driven top expected returns)
 * ──────────────────────────────────────────────────────────────────── */
.forecast-view h1 .dim { font-weight: 400; }

/* Horizon strip — three bands (intraday / swing / position) on one panel */
.forecast-horizon-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: 12px 0 14px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.fc-horizon-band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.fc-band-label {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 10px;
  color: var(--fg-3);
  margin-right: 4px;
  min-width: 56px;
}
.fc-chip {
  appearance: none;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.03);
  color: var(--fg-2);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 12px;
  padding: 5px 10px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 150ms, border-color 150ms, color 150ms, transform 100ms;
  letter-spacing: 0.01em;
}
.fc-chip:hover { background: rgba(255,255,255,0.08); border-color: var(--accent); color: var(--fg); }
.fc-chip:active { transform: scale(0.97); }
.fc-chip.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-weight: 600;
}
.fc-chip-intraday.active { background: #5b9bff; border-color: #5b9bff; }
.fc-chip-swing.active    { background: var(--accent); border-color: var(--accent); }
.fc-chip-position.active { background: #b07be5; border-color: #b07be5; }
.fc-horizon-hint {
  margin-left: auto;
  padding-left: 12px;
  border-left: 1px solid var(--border);
  font-size: 11px;
}

/* Asset-class chip strip — shared with Signals */
.fc-cls-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  margin: 0 0 14px;
  padding: 8px 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.fc-cls-chip {
  appearance: none;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.03);
  color: var(--fg-2);
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 150ms, border-color 150ms, color 150ms;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.fc-cls-chip:hover { background: rgba(255,255,255,0.08); border-color: var(--accent); color: var(--fg); }
.fc-cls-chip.active {
  background: rgba(74,158,255,0.15);
  border-color: var(--accent);
  color: var(--fg);
  font-weight: 600;
}
.fc-cls-count {
  display: inline-block;
  min-width: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: rgba(255,255,255,0.06);
  font-size: 10px;
  text-align: center;
  line-height: 14px;
}
.fc-cls-chip.active .fc-cls-count {
  background: rgba(255,255,255,0.18);
  color: #fff;
}

/* Forecast table */
.forecast-table {
  font-variant-numeric: tabular-nums;
  width: 100%;
}
.forecast-table th, .forecast-table td {
  vertical-align: middle;
  white-space: nowrap;
}
.forecast-table td.pos { color: var(--pos); }
.forecast-table td.neg { color: var(--neg); }
.forecast-table td.flat, .forecast-table td.dim { color: var(--fg-3); }
.fc-action {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  background: rgba(255,255,255,0.06);
}
.fc-action.pos  { background: rgba(38,188,120,0.18); color: var(--pos); }
.fc-action.neg  { background: rgba(245,95,95,0.18); color: var(--neg); }
.fc-action.warn { background: rgba(212,160,23,0.20); color: var(--color-directional-neutral, #d4a017); }
.fc-action.flat { background: rgba(255,255,255,0.06); color: var(--fg-3); }
.src-badge {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-family: var(--font-mono, ui-monospace, monospace);
  background: rgba(255,255,255,0.06);
  color: var(--fg-3);
}
.src-badge.src-pos  { background: rgba(38,188,120,0.18); color: var(--pos); }
.src-badge.src-flat { background: rgba(255,255,255,0.10); color: var(--fg-2); }
.src-badge.src-dim  { background: rgba(255,255,255,0.04); color: var(--fg-3); }

/* Watch/lead-indicator chips inside row */
.li-chip {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 10px;
  margin-right: 4px;
  background: rgba(255,255,255,0.06);
  color: var(--fg-2);
  white-space: nowrap;
}
.li-chip.li-pos  { background: rgba(38,188,120,0.18); color: var(--pos); }
.li-chip.li-neg  { background: rgba(245,95,95,0.18); color: var(--neg); }
.li-chip.li-warn { background: rgba(212,160,23,0.18); color: var(--color-directional-neutral, #d4a017); }
.li-chip.li-info { background: rgba(74,158,255,0.18); color: var(--accent); }

/* Inline cone preview svg */
.cell-cone-svg .cone-fan { fill: rgba(255,255,255,0.10); stroke: none; }
.cell-cone-svg .cone-mid { stroke: var(--fg-2); stroke-width: 1.2; stroke-linecap: round; }
.cell-cone-svg.cone-pos .cone-fan { fill: rgba(38,188,120,0.18); }
.cell-cone-svg.cone-pos .cone-mid { stroke: var(--pos); }
.cell-cone-svg.cone-neg .cone-fan { fill: rgba(245,95,95,0.18); }
.cell-cone-svg.cone-neg .cone-mid { stroke: var(--neg); }
.cell-cone-svg.cone-flat .cone-fan { fill: rgba(255,255,255,0.10); }
.cell-cone-svg.cone-flat .cone-mid { stroke: var(--fg-3); }
.cell-cone { width: 64px; }

/* Specialty leader quartet */
.forecast-quartet {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}
.forecast-leader {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
}
.forecast-leader h3 {
  margin: 0 0 4px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.fc-leader-hint {
  margin: 0 0 10px;
  font-size: 11px;
  line-height: 1.4;
}
.forecast-leader-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  counter-reset: lr;
}
.forecast-leader-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 5px 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 120ms, border-color 120ms;
  border: 1px solid transparent;
  font-size: 12px;
  counter-increment: lr;
}
.forecast-leader-row::before {
  content: counter(lr) ".";
  color: var(--fg-3);
  font-size: 10px;
  width: 14px;
  flex-shrink: 0;
}
.forecast-leader-row:hover {
  background: rgba(74,158,255,0.10);
  border-color: var(--accent);
}
.forecast-leader-row .lr-tx { display: inline-flex; align-items: center; gap: 4px; }
.forecast-leader-row .lr-val { font-family: var(--font-mono, ui-monospace, monospace); font-size: 11px; color: var(--fg-2); }

/* Lead-indicator universe summary */
.li-universe {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}
.li-group {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
}
.li-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.li-rationale { margin: 0 0 8px; line-height: 1.4; }
.li-tickers { display: flex; flex-wrap: wrap; gap: 4px; }
.li-tk {
  display: inline-block;
  padding: 2px 6px;
  font-size: 11px;
  font-family: var(--font-mono, ui-monospace, monospace);
  background: rgba(74,158,255,0.10);
  color: var(--accent);
  border-radius: 4px;
  cursor: pointer;
  transition: background 120ms;
}
.li-tk:hover { background: rgba(74,158,255,0.25); color: #fff; }

/* Method panel */
.fc-method { padding-left: 18px; line-height: 1.55; }
.fc-method li { margin-bottom: 4px; }
.fc-method code { background: rgba(255,255,255,0.06); padding: 1px 5px; border-radius: 3px; font-size: 11px; }

/* Light-mode parity */
html[data-theme="light"] .forecast-horizon-strip,
html[data-theme="light"] .fc-cls-strip,
html[data-theme="light"] .forecast-leader,
html[data-theme="light"] .li-group {
  background: rgba(0,0,0,0.02);
}
html[data-theme="light"] .fc-chip,
html[data-theme="light"] .fc-cls-chip,
html[data-theme="light"] .fc-cls-count {
  background: rgba(0,0,0,0.03);
}

@media (max-width: 720px) {
  .forecast-quartet { grid-template-columns: 1fr 1fr; }
  .fc-band-label { min-width: 48px; }
  .fc-horizon-hint { width: 100%; margin-left: 0; padding-left: 0; border-left: none; padding-top: 6px; border-top: 1px dashed var(--border); }
  .forecast-table .cell-cone { display: none; }
}
@media (max-width: 480px) {
  .forecast-quartet { grid-template-columns: 1fr; }
}

/* ─────────────────────────────────────────────────────────────────────
 * v2.4 — Atlas overhaul (drill-down on every cell)
 * ──────────────────────────────────────────────────────────────────── */
.atlas-view .atlas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px;
  margin-top: 8px;
}
.atlas-cell {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  position: relative;
  transition: background 150ms, border-color 150ms, transform 120ms;
}
.atlas-cell h3 {
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.atlas-cell p { margin: 4px 0; line-height: 1.45; }
.atlas-cell-tight { padding: 10px 12px; }
.atlas-cell-tight h3 { font-size: 12.5px; }
.atlas-cell-clickable { cursor: pointer; }
.atlas-cell-clickable:hover {
  background: rgba(74,158,255,0.08);
  border-color: var(--accent);
}
.atlas-cell-clickable:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.atlas-tag {
  display: inline-block;
  padding: 1px 6px;
  font-size: 10px;
  font-family: var(--font-mono, ui-monospace, monospace);
  border-radius: 4px;
  background: rgba(255,255,255,0.08);
  color: var(--fg-2);
  font-weight: 500;
  letter-spacing: 0.02em;
}
.atlas-tag.pos  { background: rgba(38,188,120,0.20); color: var(--pos); }
.atlas-tag.neg  { background: rgba(245,95,95,0.20); color: var(--neg); }
.atlas-tag.flat { background: rgba(255,255,255,0.08); color: var(--fg-2); }
.atlas-action {
  margin: 8px 0 6px !important;
  padding: 6px 8px;
  background: rgba(74,158,255,0.08);
  border-left: 3px solid var(--accent);
  border-radius: 0 6px 6px 0;
  font-size: 11.5px;
  line-height: 1.45;
}
.atlas-drill {
  display: block;
  margin-top: 8px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--fg-3);
  opacity: 0.8;
}
.atlas-cell-clickable:hover .atlas-drill { color: var(--accent); opacity: 1; }
.atlas-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.class-chip {
  display: inline-block;
  padding: 4px 10px;
  font-size: 12px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
  transition: background 120ms, border-color 120ms, color 120ms;
  color: var(--fg-2);
}
.class-chip:hover { background: rgba(74,158,255,0.10); border-color: var(--accent); color: var(--fg); }
.class-chip.active { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }

html[data-theme="light"] .atlas-cell { background: rgba(0,0,0,0.02); }
html[data-theme="light"] .atlas-tag,
html[data-theme="light"] .atlas-tag.flat { background: rgba(0,0,0,0.06); color: #334155; }
html[data-theme="light"] .atlas-tag.pos { background: rgba(38,188,120,0.18); color: #0d6938; }
html[data-theme="light"] .atlas-tag.neg { background: rgba(245,95,95,0.18); color: #991010; }
html[data-theme="light"] .atlas-action { background: rgba(74,158,255,0.06); color: #0F172A; }
html[data-theme="light"] .atlas-drill { color: #475569; }
html[data-theme="light"] .atlas-cell-clickable:hover .atlas-drill { color: var(--accent); }

/* Chip + badge contrast — every white-tinted background needs a dark
   counterpart in light mode. Force-readable text colors so a chip is never
   invisible-on-white. */
html[data-theme="light"] .fc-chip,
html[data-theme="light"] .fc-cls-chip,
html[data-theme="light"] .class-chip {
  background: rgba(0,0,0,0.05);
  color: #1e293b;
  border-color: rgba(0,0,0,0.10);
}
html[data-theme="light"] .fc-chip:hover,
html[data-theme="light"] .fc-cls-chip:hover,
html[data-theme="light"] .class-chip:hover {
  background: rgba(74,158,255,0.12);
  color: #0F172A;
  border-color: var(--accent);
}
html[data-theme="light"] .fc-chip.active,
html[data-theme="light"] .class-chip.active {
  color: #fff;
}
html[data-theme="light"] .fc-cls-chip.active {
  background: rgba(74,158,255,0.20);
  color: #0F172A;
}
html[data-theme="light"] .fc-cls-count { background: rgba(0,0,0,0.08); color: #1e293b; }
html[data-theme="light"] .fc-cls-chip.active .fc-cls-count { background: var(--accent); color: #fff; }
html[data-theme="light"] .src-badge,
html[data-theme="light"] .src-badge.src-flat,
html[data-theme="light"] .src-badge.src-dim {
  background: rgba(0,0,0,0.06); color: #334155;
}
html[data-theme="light"] .src-badge.src-pos { background: rgba(38,188,120,0.18); color: #0d6938; }
html[data-theme="light"] .li-chip,
html[data-theme="light"] .li-chip.li-info {
  background: rgba(74,158,255,0.14); color: #0c4cb3;
}
html[data-theme="light"] .li-chip.li-pos  { background: rgba(38,188,120,0.18); color: #0d6938; }
html[data-theme="light"] .li-chip.li-neg  { background: rgba(245,95,95,0.18);  color: #991010; }
html[data-theme="light"] .li-chip.li-warn { background: rgba(212,160,23,0.22); color: #6b4400; }
html[data-theme="light"] .fc-action.flat  { background: rgba(0,0,0,0.06);     color: #334155; }
html[data-theme="light"] .fc-action.pos   { background: rgba(38,188,120,0.20); color: #0d6938; }
html[data-theme="light"] .fc-action.neg   { background: rgba(245,95,95,0.20);  color: #991010; }
html[data-theme="light"] .fc-action.warn  { background: rgba(212,160,23,0.24); color: #6b4400; }

/* Sticky h1 — light mode opaque so text never bleeds into faded scroll content */
html[data-theme="light"] .view > h1 {
  background: #ffffff;
  border-bottom: 1px solid #E2E8F0;
  color: #0F172A;
}

/* General light-mode badge sweep — anything else with a bare white-tinted
   background gets darkened to keep text readable. */
html[data-theme="light"] [class*="badge"],
html[data-theme="light"] [class*="-tag"],
html[data-theme="light"] .kbd-hint,
html[data-theme="light"] kbd {
  background: rgba(0,0,0,0.06) !important;
  color: #1e293b !important;
}
html[data-theme="light"] .skeleton-row {
  background: linear-gradient(90deg, rgba(0,0,0,0.04) 0%, rgba(0,0,0,0.10) 50%, rgba(0,0,0,0.04) 100%);
}

/* Regime hero badge */
.regime-hero { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.regime-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.regime-badge.regime-pos { background: rgba(38,188,120,0.20); color: var(--pos); }
.regime-badge.regime-neg { background: rgba(245,95,95,0.20); color: var(--neg); }
.regime-badge.regime-warn { background: rgba(212,160,23,0.22); color: var(--color-directional-neutral, #d4a017); }

/* Closed-loop apply panel buttons */
.apply-row .btn {
  background: rgba(74,158,255,0.10);
  border: 1px solid var(--accent);
  color: var(--accent);
  padding: 8px 14px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  transition: background 150ms, color 150ms;
}
.apply-row .btn:hover { background: var(--accent); color: #fff; }
.apply-row .btn.ghost { background: transparent; border-color: var(--border); color: var(--fg-2); }
.apply-row .btn.ghost:hover { background: rgba(255,255,255,0.06); border-color: var(--accent); color: var(--fg); }

/* Inbox + Alerts row hover affordance */
.inbox-item, .alert-row {
  cursor: pointer;
  transition: background 120ms, transform 80ms;
}
.inbox-item:hover, .alert-row:hover { background: rgba(74,158,255,0.08); }
.inbox-item:active, .alert-row:active { transform: scale(0.99); }
.alert-action { margin-left: auto; cursor: pointer; }

/* Lead-Lag follower link */
.lead-tk {
  color: var(--accent);
  cursor: pointer;
}
.lead-tk:hover { text-decoration: underline; }

/* Cost class link */
.cost-cls-link {
  color: var(--accent);
  cursor: pointer;
}
.cost-cls-link:hover { text-decoration: underline; }

/* ─────────────────────────────────────────────────────────────────────
 * v2.5 — Mobile progressive disclosure
 *   On <640px width, dense tables get a compact mode: only the key 4
 *   columns shown; a tap on the row expands hidden cells inline.
 *   Pure CSS using :focus-within so no JS state needed.
 * ──────────────────────────────────────────────────────────────────── */
/* "One headline that matters" card on Now */
.headline-card {
  display: block;
  margin: 8px 0 12px;
  padding: 10px 14px;
  background: linear-gradient(90deg, rgba(74,158,255,0.08), rgba(176,123,229,0.04));
  border: 1px solid var(--accent);
  border-radius: 8px;
  cursor: pointer;
  transition: background 150ms;
}
.headline-card:hover { background: linear-gradient(90deg, rgba(74,158,255,0.14), rgba(176,123,229,0.08)); }
.headline-card .hl-tag { text-transform: uppercase; letter-spacing: 0.06em; font-size: 10px; }
.headline-card .hl-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 4px; }
.headline-card .hl-tx { font-family: var(--font-mono, ui-monospace, monospace); font-size: 12px; color: var(--accent); }
.headline-card .hl-sent { font-family: var(--font-mono, ui-monospace, monospace); font-size: 11px; padding: 1px 6px; border-radius: 3px; background: rgba(255,255,255,0.06); }
.headline-card .hl-title { flex: 1; font-size: 13.5px; line-height: 1.4; }
.headline-card .hl-age { font-size: 10px; }

/* Chart-lines list */
.chart-lines { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.chart-lines li { display: flex; align-items: center; gap: 8px; padding: 4px 8px; background: rgba(255,255,255,0.03); border-radius: 4px; font-size: 12px; }
.chart-lines .xbtn { background: transparent; border: none; color: var(--neg); cursor: pointer; font-size: 16px; line-height: 1; padding: 0 4px; }

/* Tooltip system — pure CSS, triggered on hover/focus of [data-tip] */
[data-tip] { position: relative; }
[data-tip]:hover::after,
[data-tip]:focus-visible::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(20, 25, 35, 0.96);
  color: #fff;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 400;
  white-space: nowrap;
  max-width: 320px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
  z-index: 9999;
  pointer-events: none;
  animation: tip-in 120ms ease-out;
}
[data-tip]:hover::before,
[data-tip]:focus-visible::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 1px);
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: rgba(20, 25, 35, 0.96);
  z-index: 9999;
  pointer-events: none;
}
@keyframes tip-in { from { opacity: 0; transform: translateX(-50%) translateY(2px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }
html[data-theme="light"] [data-tip]:hover::after,
html[data-theme="light"] [data-tip]:focus-visible::after {
  background: #1e293b;
  color: #fff;
}

/* Why-now Claude button on Forecast rows */
.btn-why {
  width: 24px; height: 24px;
  border-radius: 50%;
  border: 1px solid var(--accent);
  background: rgba(74,158,255,0.10);
  color: var(--accent);
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
  transition: background 120ms, transform 80ms;
}
.btn-why:hover { background: var(--accent); color: #fff; }
.btn-why:active { transform: scale(0.92); }
.cell-why { width: 36px; text-align: center; }

/* Modal (Why-now + Daily Briefing) */
.why-modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 99998;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  animation: fade-in 150ms ease-out;
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.why-modal {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 12px;
  max-width: 640px;
  width: 100%;
  max-height: 80vh;
  overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: 0 16px 48px rgba(0,0,0,0.6);
  animation: pop-in 180ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes pop-in { from { opacity: 0; transform: scale(0.95) translateY(10px); } to { opacity: 1; transform: scale(1) translateY(0); } }
.why-modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(90deg, rgba(74,158,255,0.10), transparent);
}
.why-modal-head .xbtn {
  background: transparent;
  border: none;
  color: var(--fg-2);
  font-size: 22px;
  cursor: pointer;
  padding: 0 6px;
}
.why-modal-head .xbtn:hover { color: var(--neg); }
.why-modal-body {
  padding: 16px 18px;
  font-size: 13px;
  line-height: 1.6;
  white-space: pre-wrap;
  font-family: var(--font-sans, system-ui);
  color: var(--fg);
  overflow-y: auto;
  flex: 1;
  margin: 0;
}
.why-modal-foot {
  padding: 8px 16px;
  border-top: 1px solid var(--border);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.briefing-modal { max-width: 720px; }
.briefing-body {
  padding: 16px 18px;
  font-size: 13px;
  line-height: 1.55;
  overflow-y: auto;
  flex: 1;
}
.briefing-body h3 { color: var(--accent); margin-top: 14px; }
.briefing-body ul { padding-left: 20px; }
.briefing-body li { margin: 4px 0; }
.briefing-body .guide-link { color: var(--accent); cursor: pointer; }

html[data-theme="light"] .why-modal {
  background: #fff;
  box-shadow: 0 16px 48px rgba(0,0,0,0.25);
}
html[data-theme="light"] .why-modal-body { color: #0F172A; }

/* Notebook view */
.notebook-view textarea { line-height: 1.5; }
.nb-preview {
  padding: 12px 14px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: 6px;
  min-height: 320px;
  max-height: 500px;
  overflow-y: auto;
  font-size: 13px;
  line-height: 1.6;
}
.nb-preview h2 { font-size: 16px; margin-top: 0; color: var(--accent); }
.nb-preview h3 { font-size: 14px; color: var(--fg); }
.nb-preview p { margin: 8px 0; }
.nb-link {
  display: inline-block;
  padding: 1px 6px;
  background: rgba(74,158,255,0.15);
  color: var(--accent);
  border-radius: 3px;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 12px;
  cursor: pointer;
}
.nb-link:hover { background: var(--accent); color: #fff; }
.nb-embed {
  display: inline-block;
  padding: 1px 6px;
  background: rgba(176,123,229,0.15);
  color: #b07be5;
  border-radius: 3px;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px;
  font-weight: 600;
}
.nb-embed.dim { background: rgba(255,255,255,0.06); color: var(--fg-3); }
.nb-history { list-style: none; padding: 0; margin: 0; }
.nb-history li {
  padding: 4px 8px;
  font-size: 11px;
  border-bottom: 1px dashed var(--border);
  color: var(--fg-2);
}
html[data-theme="light"] .nb-preview { background: rgba(0,0,0,0.02); }
html[data-theme="light"] .nb-link { background: rgba(74,158,255,0.18); color: #0c4cb3; }
html[data-theme="light"] .nb-embed { background: rgba(176,123,229,0.20); color: #6b3fa8; }

/* Tax-lot chip on Holdings action cell */
.tax-chip {
  display: inline-block;
  padding: 1px 6px;
  font-size: 10px;
  font-family: var(--font-mono, ui-monospace, monospace);
  background: rgba(255,255,255,0.06);
  border-radius: 3px;
  margin-top: 2px;
  cursor: help;
}
.tax-chip.pos { background: rgba(38,188,120,0.18); color: var(--pos); }
html[data-theme="light"] .tax-chip { background: rgba(0,0,0,0.06); color: #1e293b; }
html[data-theme="light"] .tax-chip.pos { background: rgba(38,188,120,0.20); color: #0d6938; }

/* Tax-lot details reveal (Ingenious #14) */
.tax-lot-details { display: inline-block; margin-top: 2px; }
.tax-lot-details summary { cursor: pointer; list-style: none; }
.tax-lot-details summary::-webkit-details-marker { display: none; }
.tax-lot-panel {
  position: absolute;
  z-index: 200;
  background: var(--bg-card, #1a1f2e);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 5px;
  padding: 6px 8px;
  min-width: 230px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.45);
  font-size: 11px;
  font-family: var(--font-mono, ui-monospace, monospace);
  margin-top: 2px;
}
html[data-theme="light"] .tax-lot-panel {
  background: #fff;
  border-color: rgba(0,0,0,0.12);
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
  color: #1e293b;
}
.tax-detail-row { padding: 2px 0; display: flex; align-items: center; gap: 6px; }
.tax-detail-rec { font-weight: 600; }
.tax-detail-method { width: 34px; display: inline-block; color: var(--fg-dim, #8892a4); }
.tax-detail-badge {
  font-size: 9px;
  background: rgba(74,158,255,0.18);
  color: var(--accent, #4a9eff);
  border-radius: 3px;
  padding: 0 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Tax-lot action-cell chip — color-grammar QUALITY axis variants
   (METHODOLOGY_HASH: tax-lot-action-cell-ui-2026-05-07-v1)
   savings > $50  → --good  (strong green)
   savings $10-50 → --warn  (acceptable gold)
   savings < $10  → --mute  (info-low grey)
   Per docs/color-grammar-2026-05-05.md (QUALITY axis = engineering health metric;
   tax-savings is a quality of execution, not a directional buy/sell). */
.tax-lot-chip {
  display: inline-block;
  padding: 1px 6px;
  font-size: 10px;
  font-family: var(--font-mono, ui-monospace, monospace);
  border-radius: 3px;
  margin-top: 2px;
  cursor: help;
  border: 1px solid transparent;
  letter-spacing: 0.01em;
}
.tax-lot-chip--good {
  background: rgba(63,211,143,0.16);
  color: var(--color-quality-strong, #3fd38f);
  border-color: rgba(63,211,143,0.30);
}
.tax-lot-chip--warn {
  background: rgba(212,160,23,0.16);
  color: var(--color-quality-acceptable, #d4a017);
  border-color: rgba(212,160,23,0.30);
}
.tax-lot-chip--mute {
  background: rgba(136,136,136,0.10);
  color: var(--color-info-low, #888888);
  border-color: rgba(136,136,136,0.20);
}
.tax-lot-chip:hover,
.tax-lot-chip:focus-visible {
  outline: 2px solid var(--color-info-high, #5b8def);
  outline-offset: 1px;
}
/* Light-theme contrast pass — preserves color-axis semantics */
html[data-theme="light"] .tax-lot-chip--good {
  background: rgba(63,211,143,0.18);
  color: #146e42;
  border-color: rgba(63,211,143,0.35);
}
html[data-theme="light"] .tax-lot-chip--warn {
  background: rgba(212,160,23,0.18);
  color: #7a5a0e;
  border-color: rgba(212,160,23,0.35);
}
html[data-theme="light"] .tax-lot-chip--mute {
  background: rgba(0,0,0,0.05);
  color: #5a5a5a;
  border-color: rgba(0,0,0,0.10);
}

/* Confluence-sizing chip on /now action cards
   (METHODOLOGY_HASH: confluence-sizing-recommendation-action-cards-2026-05-07-v1)
   STRONG_CONFLUENCE  → --strong  (1/4-Kelly; high-conviction green)
   PARTIAL/WEAK       → --weak    (1/8-Kelly; echo amber)
   DIVERGENT-HI-INDEP → --divergent (1/16-Kelly; reduce-size gold-warn)
   No-trade           → --mute    (skip; low-info grey)
   Per docs/color-grammar-2026-05-05.md DIRECTIONAL axis (action-card sizing
   maps directly to buy/sell decision conviction). */
.now-confluence-chip {
  display: inline-block;
  padding: 2px 8px;
  margin: 4px 0 0 0;
  font-size: 10px;
  font-family: var(--font-mono, ui-monospace, monospace);
  letter-spacing: 0.04em;
  border-radius: 3px;
  border: 1px solid transparent;
  text-decoration: none;
  cursor: help;
}
.now-confluence-chip--strong {
  background: rgba(63,211,143,0.16);
  color: var(--color-directional-bullish, #3fd38f);
  border-color: rgba(63,211,143,0.30);
}
.now-confluence-chip--weak {
  background: rgba(212,160,23,0.12);
  color: var(--color-directional-neutral, #d4a017);
  border-color: rgba(212,160,23,0.25);
}
.now-confluence-chip--divergent {
  background: rgba(208,104,84,0.14);
  color: var(--color-quality-weak, #d06854);
  border-color: rgba(208,104,84,0.28);
}
.now-confluence-chip--mute {
  background: rgba(136,136,136,0.10);
  color: var(--color-info-low, #888888);
  border-color: rgba(136,136,136,0.20);
}
.now-confluence-chip:hover,
.now-confluence-chip:focus-visible {
  outline: 2px solid var(--color-info-high, #5b8def);
  outline-offset: 1px;
}
html[data-theme="light"] .now-confluence-chip--strong {
  background: rgba(63,211,143,0.18);
  color: #146e42;
  border-color: rgba(63,211,143,0.35);
}
html[data-theme="light"] .now-confluence-chip--weak {
  background: rgba(212,160,23,0.18);
  color: #7a5a0e;
  border-color: rgba(212,160,23,0.35);
}
html[data-theme="light"] .now-confluence-chip--divergent {
  background: rgba(208,104,84,0.20);
  color: #7a3024;
  border-color: rgba(208,104,84,0.35);
}
html[data-theme="light"] .now-confluence-chip--mute {
  background: rgba(0,0,0,0.05);
  color: #5a5a5a;
  border-color: rgba(0,0,0,0.10);
}

/* Smart-money chip on SecurityProfile */
.sp-smartmoney {
  padding: 6px 10px;
  background: rgba(74,158,255,0.06);
  border-left: 2px solid var(--accent);
  border-radius: 0 4px 4px 0;
  margin-top: 8px;
}
.sp-smartmoney .sp-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--fg-3); }
.sp-smartmoney .sp-value { font-size: 13px; font-weight: 600; }
.sp-smartmoney .sp-value.pos { color: var(--pos); }
.sp-smartmoney .sp-value.neg { color: var(--neg); }

/* News decay timer chip */
.news-decay {
  display: inline-block;
  padding: 1px 6px;
  font-size: 10px;
  background: rgba(176,123,229,0.15);
  color: #b07be5;
  border-radius: 3px;
  cursor: help;
}
html[data-theme="light"] .news-decay { background: rgba(176,123,229,0.20); color: #6b3fa8; }

/* Macro signals card on Now */
.macro-signals-card {
  background: linear-gradient(135deg, rgba(74,158,255,0.04), rgba(176,123,229,0.02));
  border-left: 3px solid var(--accent);
}
.macro-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}
.macro-cell {
  padding: 10px 12px;
  background: rgba(255,255,255,0.03);
  border-radius: 6px;
  border: 1px solid var(--border);
}
.macro-cell.macro-wide { grid-column: 1 / -1; }
.macro-cell .macro-k {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--fg-3);
  margin-bottom: 4px;
}
.macro-cell .macro-v {
  font-size: 14px;
  margin-bottom: 4px;
  font-variant-numeric: tabular-nums;
}
.rot-chip {
  display: inline-block;
  padding: 2px 6px;
  margin: 2px 4px 2px 0;
  font-size: 11px;
  font-family: var(--font-mono, ui-monospace, monospace);
  border-radius: 4px;
  background: rgba(255,255,255,0.06);
  cursor: help;
}
.rot-chip.pos { background: rgba(38,188,120,0.18); color: var(--pos); }
.rot-chip.neg { background: rgba(245,95,95,0.18); color: var(--neg); }
.div-row { padding: 6px 0; border-bottom: 1px dashed var(--border); }
.div-row:last-child { border-bottom: none; }
.div-pair { font-family: var(--font-mono, ui-monospace, monospace); font-weight: 600; }
.div-pair.neg { color: var(--neg); }
.div-pair.warn { color: var(--color-directional-neutral, #d4a017); }

html[data-theme="light"] .macro-signals-card { background: linear-gradient(135deg, rgba(74,158,255,0.06), rgba(176,123,229,0.04)); }
html[data-theme="light"] .macro-cell { background: rgba(0,0,0,0.02); }

/* Vol-target alert chip */
.voltgt-alert {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 12px;
  margin-left: 8px;
}
.voltgt-alert.over { background: rgba(245,95,95,0.20); color: var(--neg); }
.voltgt-alert.ok   { background: rgba(38,188,120,0.18); color: var(--pos); }

/* Custom-factor list + editor */
.cf-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.cf-item { padding: 6px 10px; background: rgba(255,255,255,0.03); border-radius: 4px; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 12px; }
.cf-item .xbtn { margin-left: auto; background: transparent; border: none; color: var(--neg); cursor: pointer; font-size: 16px; }
.btn.small { padding: 2px 8px; font-size: 11px; }

/* Screen-reader only utility (a11y) */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* Skip-link visible on focus */
.skip-link {
  position: absolute;
  top: -40px;
  left: 8px;
  z-index: 10000;
  padding: 6px 12px;
  background: var(--accent);
  color: #fff;
  border-radius: 4px;
  text-decoration: none;
  font-size: 12px;
  transition: top 150ms;
}
.skip-link:focus {
  top: 8px;
  outline: 2px solid #fff;
}

/* Print stylesheet — clean, ink-friendly hardcopy of any view */
@media print {
  .topbar, .rail, .mobile-tab-bar, .mobile-drawer, .cockpit-tabs,
  .palette-trigger, .palette, .focus, aside.right, #toasts, .skip-link,
  #drawer-backdrop, .focus-empty {
    display: none !important;
  }
  body, .shell, .main, #main-view {
    background: #fff !important;
    color: #000 !important;
  }
  .view > h1 {
    position: static !important;
    backdrop-filter: none !important;
    background: #fff !important;
    color: #000 !important;
    border-bottom: 2px solid #000;
    margin: 0 0 12px;
    padding: 0 0 6px;
  }
  .card {
    background: #fff !important;
    border: 1px solid #000 !important;
    page-break-inside: avoid;
    margin-bottom: 12px;
  }
  table.dense th { background: #eee !important; color: #000 !important; }
  table.dense td { border-bottom: 1px solid #ccc !important; }
  .dim, .dim.small { color: #555 !important; }
  .pos { color: #006400 !important; }
  .neg { color: #8b0000 !important; }
  /* Footer with timestamp + URL */
  body::after {
    content: 'Trading Hub v2 · ' attr(data-print-ts) ' · trading-hub.kylifehub.com';
    display: block;
    margin-top: 24px;
    padding-top: 8px;
    border-top: 1px solid #000;
    font-size: 10px;
    color: #555;
  }
}

@media (max-width: 640px) {
  table.dense th:nth-child(n+5),
  table.dense td:nth-child(n+5) {
    display: none;
  }
  /* Tap a row → tabindex makes it focusable → :focus reveals all cells */
  table.dense tr[data-ticker]:focus-within th,
  table.dense tr[data-ticker]:focus-within td {
    display: table-cell;
  }
  /* Make rows tappable on mobile */
  table.dense tr[data-ticker] {
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(74,158,255,0.18);
  }
  /* Forecast-table mobile compact: keep the 4 most important columns */
  .forecast-table th:nth-child(n+5),
  .forecast-table td:nth-child(n+5) {
    display: none;
  }
  .forecast-table tr[data-ticker]:focus-within th,
  .forecast-table tr[data-ticker]:focus-within td {
    display: table-cell;
  }
}

@media (max-width: 600px) {
  .atlas-view .atlas-grid { grid-template-columns: 1fr; }
}

/* ─────────────────────────────────────────────────────────────────────
 * v2.4 — Walkthrough Guide
 * ──────────────────────────────────────────────────────────────────── */
.guide-view h1 .dim { font-weight: 400; }
.guide-cycle {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  counter-reset: guide;
}
.guide-step {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 16px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: 10px;
  transition: background 150ms, border-color 150ms;
}
.guide-step:hover { background: rgba(74,158,255,0.06); border-color: var(--accent); }
.guide-num {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), #b07be5);
  color: #fff;
  font-weight: 700;
  font-family: var(--font-mono, ui-monospace, monospace);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}
.guide-body { flex: 1; min-width: 0; }
.guide-title { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.guide-text  { font-size: 13px; line-height: 1.55; color: var(--fg-2); }
.guide-text strong { color: var(--fg); }
.guide-text code { background: rgba(255,255,255,0.06); padding: 1px 5px; border-radius: 3px; font-size: 11px; }
.guide-link {
  display: inline-block;
  margin-top: 6px;
  font-size: 12px;
  color: var(--accent);
  cursor: pointer;
  text-decoration: none;
}
.guide-link:hover { text-decoration: underline; }

.guide-pages {
  width: 100%;
  font-size: 12.5px;
}
.guide-pages td { padding: 6px 10px; vertical-align: top; }
.guide-pages td:first-child { width: 140px; white-space: nowrap; }

.guide-concepts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 10px;
}
.guide-concept {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
}
.guide-concept h3 { margin: 0 0 4px; font-size: 13px; font-weight: 600; color: var(--accent); }
.guide-concept p  { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--fg-2); }
.guide-concept code { background: rgba(255,255,255,0.06); padding: 1px 5px; border-radius: 3px; font-size: 11px; }

.guide-keys {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 6px;
}
.guide-keys li { font-size: 13px; padding: 4px 6px; }
.guide-keys kbd {
  display: inline-block;
  padding: 1px 6px;
  margin: 0 2px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: rgba(255,255,255,0.06);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px;
  color: var(--fg);
}

html[data-theme="light"] .guide-step,
html[data-theme="light"] .guide-concept {
  background: rgba(0,0,0,0.02);
}
html[data-theme="light"] .guide-keys kbd {
  background: rgba(0,0,0,0.04);
}

/* ─────────────────────────────────────────────────────────────────────
 * v2.4 — UX Polish (5 value-adds)
 *   1. Sticky page header for long views (Forecast/Atlas/Academy)
 *   2. Last-updated timestamp on tables
 *   3. Skeleton placeholder for slow loads
 *   4. Focused-row highlight when drilling into focus pane
 *   5. Inline keyboard hint after card titles
 * ──────────────────────────────────────────────────────────────────── */
.view > h1 {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--bg-1);
  margin: 0 -16px 12px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
html[data-theme="light"] .view > h1 { background: rgba(255,255,255,0.92); }
.last-updated {
  display: inline-block;
  margin-left: 10px;
  font-size: 10px;
  color: var(--fg-3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.skeleton-row {
  height: 18px;
  background: linear-gradient(90deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.10) 50%, rgba(255,255,255,0.04) 100%);
  background-size: 200% 100%;
  animation: skel-shimmer 1.4s linear infinite;  /* skel-shimmer defined once at §2577 */
  border-radius: 4px;
  margin: 6px 0;
  contain: layout style;
}
/* @keyframes skel-shimmer removed — canonical definition at §2577 */
tr[data-ticker].focused-row {
  background: rgba(74,158,255,0.18) !important;
  outline: 1px solid var(--accent);
}
.kbd-hint {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 6px;
  font-size: 10px;
  font-family: var(--font-mono, ui-monospace, monospace);
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border);
  border-radius: 3px;
  color: var(--fg-3);
  vertical-align: middle;
}

/* ─────────────────────────────────────────────────────────────────────
 * v2.4 — UI Polish (5 value-adds)
 *   1. Smooth view transitions
 *   2. Better focus rings (2px accent outline, not browser default)
 *   3. Tabular nums everywhere for clean column alignment
 *   4. Subtle row hover affordance on every dense table
 *   5. Brand wordmark hover lifts gradient
 * ──────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  #main-view > .view {
    animation: viewfade 220ms ease-out;
  }
  @keyframes viewfade {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
  }
}
button:focus-visible,
[role="button"]:focus-visible,
[data-view]:focus-visible,
[data-ticker]:focus-visible,
[data-class]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}
table.dense, .forecast-table, .signals-table {
  font-variant-numeric: tabular-nums;
}
table.dense tr[data-ticker]:hover,
.forecast-table tr[data-ticker]:hover,
.signals-table tr[data-ticker]:hover {
  background: rgba(74,158,255,0.06);
  cursor: pointer;
}
.brand:hover {
  background-image: linear-gradient(120deg, var(--accent), #b07be5, var(--accent));
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: brandshift 1800ms linear infinite;
}
@keyframes brandshift {
  0% { background-position: 0 0; }
  100% { background-position: 200% 0; }
}

/* ── Aha! Moment banner (NEXUS Decision #2, 2026-04-29) ──────────────
   Skeleton-match: the mount node carries no shape until JS populates;
   first paint is byte-stable. Gold accent matches cockpit identity. */
.aha-mount { display: block; }
.aha-mount:empty { display: none; }
.aha-banner {
  position: relative;
  background: linear-gradient(135deg, var(--accent-bg) 0%, var(--bg-1) 100%);
  border: 1px solid var(--accent-dim);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: 12px 36px 12px 14px;
  margin: 0 0 12px;
  font-size: 12px;
  line-height: 1.55;
  color: var(--fg-1);
}
.aha-banner .aha-headline { font-size: 12px; font-weight: 600; color: var(--accent); margin-bottom: 4px; letter-spacing: 0.2px; }
.aha-banner .aha-line { font-size: 13px; color: var(--fg-0); }
.aha-banner .aha-ticker { font-weight: 700; color: var(--accent); }
.aha-banner .aha-tier,
.aha-banner .aha-pup,
.aha-banner .aha-edge,
.aha-banner .aha-entry,
.aha-banner .aha-target,
.aha-banner .aha-stop { font-weight: 600; color: var(--fg-0); }
.aha-banner .aha-foot { margin-top: 6px; font-size: 11px; color: var(--fg-2); }
.aha-banner .aha-foot .aha-brier { font-weight: 600; color: var(--fg-0); }
.aha-banner .aha-foot .aha-hint { color: var(--fg-2); font-style: italic; }
.aha-banner a.aha-track { color: var(--accent); text-decoration: none; border-bottom: 1px dotted var(--accent-dim); }
.aha-banner a.aha-track:hover { color: var(--accent-hi); border-bottom-color: var(--accent); }
.aha-banner .aha-why {
  background: transparent; border: 0; padding: 0 0 0 4px; margin: 0;
  color: var(--accent); font-size: 12px; font-family: inherit; cursor: pointer;
}
.aha-banner .aha-why:hover { color: var(--accent-hi); }
.aha-banner .aha-why-body { margin-top: 6px; padding: 8px 10px; background: var(--bg-2); border-radius: 4px; font-size: 12px; color: var(--fg-1); }
.aha-banner .aha-dismiss {
  position: absolute; top: 6px; right: 8px;
  width: 22px; height: 22px; padding: 0; line-height: 20px; text-align: center;
  background: transparent; border: 1px solid transparent; border-radius: 4px;
  color: var(--fg-2); font-size: 16px; cursor: pointer; font-family: inherit;
}
.aha-banner .aha-dismiss:hover { color: var(--fg-0); border-color: var(--border); }
.aha-badge {
  font-size: 11px; color: var(--fg-2); padding: 6px 10px; margin: 0 0 10px;
  background: var(--bg-1); border: 1px solid var(--border); border-radius: 4px;
  letter-spacing: 0.2px;
}
.aha-badge .aha-brier { color: var(--fg-1); font-weight: 600; }
.aha-badge a.aha-track { color: var(--accent); text-decoration: none; }
.aha-badge a.aha-track:hover { color: var(--accent-hi); }

/* ── Demo-seed CTA + persistent demo banner (NEXUS Decision #3, 2026-04-29)
   Calm, secondary CTA tone. Mirrors aha-banner spacing tokens; no new
   custom properties — pure reuse of existing palette vars. */
.demo-cta {
  display: flex; flex-direction: column; gap: 10px;
  margin: 16px 0 0; padding: 12px 14px;
  background: var(--bg-1); border: 1px solid var(--border);
  border-radius: var(--radius); font-size: 12px; color: var(--fg-1);
}
.demo-cta .demo-cta-headline { font-size: 12px; font-weight: 600; color: var(--fg-0); letter-spacing: 0.2px; }
.demo-cta .demo-cta-line { margin: 4px 0 0; font-size: 12px; color: var(--fg-2); line-height: 1.5; }
.demo-cta-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.demo-cta-btn {
  display: inline-block; padding: 6px 12px; font-size: 12px; font-weight: 600;
  color: var(--accent); background: transparent;
  border: 1px solid var(--accent-dim); border-radius: 4px;
  text-decoration: none; cursor: pointer; font-family: inherit;
}
.demo-cta-btn:hover { color: var(--accent-hi); border-color: var(--accent); }
.demo-cta-dismiss {
  padding: 6px 10px; font-size: 12px; color: var(--fg-2);
  background: transparent; border: 1px solid transparent;
  border-radius: 4px; cursor: pointer; font-family: inherit;
}
.demo-cta-dismiss:hover { color: var(--fg-0); border-color: var(--border); }

.demo-banner {
  margin: 0 0 12px; padding: 8px 12px; font-size: 12px;
  background: var(--bg-1); border: 1px solid var(--border);
  border-left: 3px solid var(--accent-dim); border-radius: var(--radius);
  color: var(--fg-1); display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
}
.demo-banner .demo-banner-label { font-weight: 600; color: var(--fg-0); }
.demo-banner .demo-banner-line { color: var(--fg-2); }
.demo-banner .demo-banner-exit {
  margin-left: auto; padding: 4px 10px; font-size: 12px;
  color: var(--accent); border: 1px solid var(--accent-dim); border-radius: 4px;
  text-decoration: none;
}
.demo-banner .demo-banner-exit:hover { color: var(--accent-hi); border-color: var(--accent); }


/* ─── Calibration track-record badge (Lane F / B2.3, 2026-04-29) ─────── */
/* Pure CSS pill rendered next to a displayed probability percentage.
   Three states (gray no_resolved / gray insufficient / colored sufficient)
   driven by .cal-badge--green / --amber / --red modifiers. WCAG-2.2 AA. */
.cal-badge {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 6px;
  font-size: 10px;
  line-height: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  white-space: nowrap;
  border: 1px solid transparent;
  border-radius: 8px;
  vertical-align: 1px;
  cursor: help;
  font-family: inherit;
}
.cal-badge:focus-visible {
  outline: 2px solid var(--accent, #5cf);
  outline-offset: 1px;
}
.cal-badge--gray {
  color: var(--fg-2, #888);
  background: var(--bg-1, rgba(128,128,128,0.08));
  border-color: var(--border, rgba(128,128,128,0.25));
}
.cal-badge--green {
  color: #0a6b3b;
  background: rgba(34,170,90,0.12);
  border-color: rgba(34,170,90,0.45);
}
.cal-badge--amber {
  color: #8a5400;
  background: rgba(220,160,40,0.14);
  border-color: rgba(220,160,40,0.50);
}
.cal-badge--red {
  color: #9c1f2e;
  background: rgba(200,60,80,0.12);
  border-color: rgba(200,60,80,0.50);
}
@media (prefers-color-scheme: dark) {
  .cal-badge--green { color: #6fe1a3; background: rgba(34,170,90,0.18); }
  .cal-badge--amber { color: #f1c266; background: rgba(220,160,40,0.20); }
  .cal-badge--red   { color: #ff9aa6; background: rgba(200,60,80,0.18); }
}
.cal-modal {
  margin: 0; padding: 8px 10px;
  font-size: 12px;
  background: var(--bg-1, #1a1a1a);
  border: 1px solid var(--border, rgba(128,128,128,0.25));
  border-radius: 6px;
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 4px 12px;
  max-width: 320px;
}
.cal-modal dt { color: var(--fg-2, #888); font-weight: 600; }
.cal-modal dd { margin: 0; color: var(--fg-0, #eee); }
.cal-modal-brier--green { color: #0a6b3b; }
.cal-modal-brier--amber { color: #8a5400; }
.cal-modal-brier--red   { color: #9c1f2e; }
.cal-modal-link { color: var(--accent, #5cf); text-decoration: underline; }
@media (prefers-reduced-motion: reduce) {
  .cal-badge { transition: none; }
}

/* ── Macro-event-calendar banner (Wave 3 #13 ship 2026-05-05; sub-agent C) ──
   Surfaced above macro-signals card on /now when a high-impact event (FOMC /
   CPI / NFP / GDP) is within 90 days. Urgent state at <48h. Per N8 honesty:
   urgent-state uses gold not red so user reads as "high information" not "alarm". */
.macro-event-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  margin: 12px 0;
  background: rgba(91, 141, 239, 0.06);
  border-left: 3px solid var(--color-info-high, #5b8def);
  border-radius: 6px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--fg-1, #ccc);
}
.macro-event-banner.macro-event-urgent {
  background: rgba(212, 160, 23, 0.08);
  border-left-color: var(--color-directional-neutral, #d4a017);
  color: #f0c040;
}
.macro-event-banner strong {
  font-weight: 600;
  color: var(--fg-0, #eee);
}
.macro-event-banner .meb-label {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 3px;
  background: rgba(91, 141, 239, 0.18);
  color: var(--color-info-high, #5b8def);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.macro-event-urgent .meb-label {
  background: rgba(212, 160, 23, 0.20);
  color: var(--color-directional-neutral, #d4a017);
}
.macro-event-banner .meb-urgent-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 3px;
  background: var(--color-directional-neutral, #d4a017);
  color: #06090F;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  animation: meb-pulse 2.4s ease-in-out infinite;
}
@keyframes meb-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}
@media (prefers-reduced-motion: reduce) {
  .macro-event-banner .meb-urgent-badge { animation: none; }
}

/* --- N16: Sticky thead on dense tables --- */
.dense thead th,
table.dense thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--bg-1);
  box-shadow: 0 1px 0 var(--border);
}

/* --- N17: Mobile horizontal scroll + pinned ticker column --- */
.table-scroll-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.table-scroll-wrap .dense td:first-child,
.table-scroll-wrap .dense th:first-child {
  position: sticky;
  left: 0;
  background: var(--bg-1);
  z-index: 1;
  white-space: nowrap;
}
@media (max-width: 768px) {
  .dense td, .dense th { white-space: nowrap; }
  .signals-table th.cell-spark, .signals-table td.cell-spark { display: none; }
}

/* --- N22: Asset-class color coding on ticker rows --- */
tr[data-asset-class="crypto"] td:first-child { color: var(--accent-purple, #a78bfa); }
tr[data-asset-class="etf"]    td:first-child { color: var(--accent-teal, #2dd4bf); }
tr[data-asset-class="option"] td:first-child { color: var(--accent-orange, #fb923c); }
tr[data-asset-class="bond"]   td:first-child { color: var(--accent-amber, #fbbf24); }

/* --- N22: LLM-J badge column --- */
.cell-llmj { white-space: nowrap; }
.thv2-judge-badge { display: inline-block; }

/* ── SOTA Global Elevation (Wave-31 2026-05-13) ──────────────────────────────
   ~135 lines. Appended after Wave-30 (line 6862). No HTML/JS changes.
   Sections: page-enter · focus-ring · scrollbar · table-row-hover ·
             panel-shadow · text-selection · badge-micro · skel-line ·
             light-mode-skel · card-transitions.
   ──────────────────────────────────────────────────────────────────────────── */

/* §1 — Page fade-in: eliminates FOUC on every route load ------------------- */
@keyframes thv2-page-enter {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
body { animation: thv2-page-enter 0.22s ease forwards; }
@media (prefers-reduced-motion: reduce) { body { animation: none; } }

/* §2 — Global focus ring: replaces browser-default blue outline ------------ */
:focus-visible {
  outline: 2px solid var(--accent, #5cf);
  outline-offset: 2px;
  border-radius: 3px;
}
:focus:not(:focus-visible) { outline: none; }

/* §3 — Thin custom scrollbar (webkit + Firefox) ---------------------------- */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--border, rgba(128,128,128,0.3));
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover { background: var(--fg-3, #666); }
* {
  scrollbar-width: thin;
  scrollbar-color: var(--border, rgba(128,128,128,0.3)) transparent;
}

/* §4 — Data table row hover (dense + signals + generic data-table) --------- */
.dense tbody tr,
.signals-table tbody tr,
.data-table tbody tr {
  transition: background 0.12s ease;
}
.dense tbody tr:hover,
.signals-table tbody tr:hover,
.data-table tbody tr:hover {
  background: var(--bg-1, rgba(255,255,255,0.04));
}

/* §5 — Panel hover: add box-shadow on top of existing border-color change -- */
.panel:hover,
.section-card:hover {
  box-shadow: var(--elev-1, 0 2px 12px rgba(0,0,0,0.25));
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* §6 — Text selection color ------------------------------------------------ */
::selection { background: rgba(92, 195, 255, 0.25); color: inherit; }

/* §7 — Badge / pill micro-interaction -------------------------------------- */
.tag, .pill, .badge, .lb-tier, .bp-pill, .nf-tag {
  transition: opacity 0.12s ease, transform 0.12s ease;
}
.tag:hover, .pill:hover, .badge:hover {
  opacity: 0.85;
  transform: translateY(-1px);
}

/* §8 — Inline skeleton shimmer convenience class --------------------------- */
/* Usage: <span class="thv2-skel-line"></span> — shows shimmer bar in place
   of loading text without requiring a JS import. Reuses skel-shimmer keyframe
   defined earlier in file (~line 3087 / 6530). */
.thv2-skel-line {
  display: inline-block;
  width: 100%;
  height: 1em;
  border-radius: 4px;
  background: linear-gradient(
    90deg,
    var(--bg-1, #1a1a1a) 25%,
    var(--bg-2, #222)    50%,
    var(--bg-1, #1a1a1a) 75%
  );
  background-size: 200% 100%;
  animation: skel-shimmer 1.6s linear infinite;
  vertical-align: middle;
}

/* §9 — Light-mode overrides for .thv2-skel-line ---------------------------- */
html[data-theme="light"] .thv2-skel-line {
  background: linear-gradient(90deg, #e5e7eb 25%, #d1d5db 50%, #e5e7eb 75%);
  background-size: 200% 100%;
}

/* §10 — Improved .card transitions (about / AI page cards) ----------------- */
.card {
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}
.card:hover {
  border-color: var(--blue, #60a5fa);
  box-shadow: 0 4px 16px rgba(96,165,250,0.12);
  transform: translateY(-1px);
}

/* ── END Wave-31 ── */

/* ── SOTA Wave-33 Form + Modal Polish (2026-05-13) ── */

/* §1 — Generic input / select / textarea focus polish */
input[type="text"], input[type="search"], input[type="number"], input[type="email"],
input[type="tel"], input[type="url"], input[type="date"], input[type="time"], input[type="datetime-local"],
select, textarea {
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
input[type="text"]:focus, input[type="search"]:focus, input[type="number"]:focus,
input[type="email"]:focus, input[type="tel"]:focus, input[type="url"]:focus,
input[type="date"]:focus, input[type="time"]:focus, input[type="datetime-local"]:focus,
select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent, #5cf);
  box-shadow: 0 0 0 3px rgba(92, 195, 255, 0.18);
}
input::placeholder, textarea::placeholder {
  color: var(--fg-3, #666);
  opacity: 0.7;
}

/* §2 — Range slider styled thumb (cross-browser) */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  height: 20px;
  cursor: pointer;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  background: var(--border, rgba(128,128,128,0.3));
  border-radius: 2px;
}
input[type="range"]::-moz-range-track {
  height: 4px;
  background: var(--border, rgba(128,128,128,0.3));
  border-radius: 2px;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  margin-top: -6px;
  width: 16px; height: 16px;
  background: var(--accent, #5cf);
  border-radius: 50%;
  border: 2px solid var(--bg, #0a0a0c);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.2);
  transition: transform 0.12s ease, box-shadow 0.15s ease;
}
input[type="range"]::-moz-range-thumb {
  width: 16px; height: 16px;
  background: var(--accent, #5cf);
  border-radius: 50%;
  border: 2px solid var(--bg, #0a0a0c);
  cursor: pointer;
  transition: transform 0.12s ease;
}
input[type="range"]:hover::-webkit-slider-thumb { transform: scale(1.1); }
input[type="range"]:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 4px rgba(92, 195, 255, 0.25);
}
input[type="range"]:hover::-moz-range-thumb { transform: scale(1.1); }

/* §3 — Button focus ring on aria-pressed / role=button */
button[aria-pressed]:focus-visible,
[role="button"]:focus-visible,
button:focus-visible {
  outline: 2px solid var(--accent, #5cf);
  outline-offset: 2px;
  border-radius: 4px;
}
button[aria-pressed="true"] {
  background: rgba(92, 195, 255, 0.12);
  border-color: var(--accent, #5cf);
}

/* §4 — Modal / dialog SOTA polish */
dialog, [role="dialog"][aria-modal="true"], .modal, .ks-modal, .vm-shell, .ss-warn-modal {
  border-radius: 10px;
  border: 1px solid var(--border, rgba(128,128,128,0.3));
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  animation: thv2-modal-enter 0.18s ease-out;
}
@keyframes thv2-modal-enter {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0)   scale(1);    }
}
dialog::backdrop, [role="dialog"][aria-modal="true"] ~ .backdrop {
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(4px);
}
/* Floating-close affordance for modals that lack a button */
.thv2-modal-close {
  position: absolute; top: 12px; right: 14px;
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 0;
  color: var(--fg-2, #888);
  font-size: 20px; line-height: 1; cursor: pointer;
  border-radius: 4px;
  transition: background 0.12s ease, color 0.12s ease;
}
.thv2-modal-close:hover { background: var(--bg-1, rgba(255,255,255,0.06)); color: var(--fg-0); }
.thv2-modal-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* §5 — Reusable empty-state container */
.thv2-empty {
  padding: 32px 24px;
  text-align: center;
  border: 1px dashed var(--border, rgba(128,128,128,0.3));
  border-radius: 10px;
  color: var(--fg-2, #888);
  font-size: 13px;
  background: var(--bg-1, rgba(255,255,255,0.02));
}
.thv2-empty strong { color: var(--fg-0); display: block; margin-bottom: 6px; font-size: 15px; }
.thv2-empty svg { opacity: 0.35; margin: 0 auto 12px; display: block; }
.thv2-empty a { color: var(--accent); text-decoration: underline; }

/* §6 — Generic sticky thead opt-in for .cs-table / .pead-table / .ht-table */
.cs-table thead th, .pead-table thead th, .ht-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--bg-1, #1a1a1a);
  box-shadow: 0 1px 0 var(--border, rgba(128,128,128,0.3));
}

/* §7 — Dense hover on common THv2 table classes */
.ht-table tbody tr, .cs-table tbody tr, .pead-table tbody tr,
.nfx-table tbody tr, .fl-table tbody tr {
  transition: background 0.12s ease;
}
.ht-table tbody tr:hover, .cs-table tbody tr:hover, .pead-table tbody tr:hover,
.nfx-table tbody tr:hover, .fl-table tbody tr:hover {
  background: var(--bg-1, rgba(255,255,255,0.04));
}

/* §8 — Light-mode overrides for Wave-33 tokens */
html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder {
  color: #888;
}
html[data-theme="light"] .thv2-empty {
  background: #f9fafb;
  border-color: #d1d5db;
  color: #8b93a3;
}
html[data-theme="light"] .thv2-modal-close:hover {
  background: #f3f4f6;
  color: #111827;
}

/* §9 — Parent-cascade for JS-rendered tables (host element gets .dense) */
.dense .ht-table tbody tr, .dense .cs-table tbody tr, .dense .pead-table tbody tr,
.dense .nfx-table tbody tr, .dense .fl-table tbody tr {
  transition: background 0.12s ease;
}
.dense .ht-table tbody tr:hover, .dense .cs-table tbody tr:hover, .dense .pead-table tbody tr:hover,
.dense .nfx-table tbody tr:hover, .dense .fl-table tbody tr:hover {
  background: var(--bg-1, rgba(255,255,255,0.04));
}
.dense .ht-table thead th, .dense .cs-table thead th, .dense .pead-table thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--bg-1, #1a1a1a);
  box-shadow: 0 1px 0 var(--border, rgba(128,128,128,0.3));
}

/* ── END Wave-33 ── */

/* ═══════════════════════════════════════════════════════════════════════════
   PERF + UX POLISH — 2026-05-18
   ─────────────────────────────────────────────────────────────────────────
   1. View Transition API — cross-fade for SPA view switches
   2. Cold-start progress bar
   3. Reduced-motion safety net (single block covering all animation uses)
   4. Improved focus-visible rings (WCAG 2.1 §2.4.11)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. View Transition cross-fade ──────────────────────────────────────── */
/* Scoped to #main-view (view-transition-name: main) so the topbar / rail /
   nav stay static while only the content area fades. The root pseudo-element
   is set to animation:none so no full-page snapshot is taken — prevents the
   nav from briefly ghosting during the transition.                          */
#main-view {
  view-transition-name: main;
}
/* Root: instant swap — no snapshot, no flash */
::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
}
/* Content area: 120ms slide-fade — perceptually instant on modern hardware */
::view-transition-old(main) {
  animation: vt-fade-out 120ms ease-out both;
}
::view-transition-new(main) {
  animation: vt-fade-in 120ms ease-in both;
}
/* Disable the legacy CSS viewfade animation when View Transition API is
   available — VT provides the animation; running both would double-animate. */
@supports (view-transition-name: main) {
  @media (prefers-reduced-motion: no-preference) {
    #main-view > .view { animation: none; }
  }
}
@keyframes vt-fade-out {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-4px); }
}
@keyframes vt-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── 2. Cold-start progress bar ─────────────────────────────────────────── */
/* Thin accent bar at top of viewport that fills during boot phases.
   Controlled via CSS custom property --progress (0→1) set in app.js.       */
#thv2-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: calc(var(--progress, 0) * 100%);
  background: linear-gradient(90deg, var(--accent, #4f8ef7), var(--pos, #4ade80));
  z-index: 9999;
  transition: width 180ms ease-out, opacity 300ms ease-out;
  pointer-events: none;
}
#thv2-progress[data-done] {
  opacity: 0;
}

/* ── 3. Unified reduced-motion guard ────────────────────────────────────── */
/* Covers: skel shimmer, view transitions, today-edge pulse, ndv2 stagger.
   A single @media block is cheaper for the browser than scattered ones.    */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root),
  ::view-transition-old(main),
  ::view-transition-new(main) {
    animation: none;
  }
  .skel,
  .skeleton-row,
  .async-table-wrap:empty::after,
  .async-table-wrap[data-loading]::after,
  .thv2-skel-line {
    animation: none !important;
    background: var(--bg-2, rgba(255,255,255,0.05)) !important;
  }
  /* Disable the breathing pulse on Today's Edge hero if it exists */
  .teh-pulse { animation: none !important; }
}

/* ── 4. WCAG focus-visible rings ────────────────────────────────────────── */
/* Replace the default dotted outline with a 2px solid accent ring.
   :focus-visible ensures keyboard-only ring (not mouse-click rings).       */
:focus-visible {
  outline: 2px solid var(--accent, #4f8ef7);
  outline-offset: 3px;
  border-radius: 2px;
}
/* Buttons already have border-radius — match it */
button:focus-visible,
.btn:focus-visible,
[role="button"]:focus-visible {
  border-radius: var(--r-sm, 4px);
}

/* ── 5. Improved skel-card containment ──────────────────────────────────── */
/* Painting a shimmer inside a contained element skips the full-page repaint. */
.skel-card {
  contain: layout style;
}

/* ── 6. SW update banner ────────────────────────────────────────────────── */
/* Persistent bottom-left banner when a new service worker is waiting.
   Visible until the user clicks "Reload now" or dismisses.
   Intentionally low-contrast / subtle so it doesn't alarm.              */
#thv2-update-banner {
  position: fixed;
  bottom: 16px;
  left: 16px;
  z-index: 9998;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--bg-1, #1a1a22);
  border: 1px solid var(--border-strong, rgba(255,255,255,0.15));
  border-radius: var(--r-sm, 6px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
  font-size: 13px;
  color: var(--fg-2, #a0a0b0);
  max-width: 340px;
  animation: upd-slide-in 200ms ease-out both;
}
@keyframes upd-slide-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.thv2-upd-msg { flex: 1; }
.thv2-upd-reload {
  flex-shrink: 0;
  padding: 5px 10px;
  border-radius: var(--r-sm, 4px);
  background: var(--accent, #4f8ef7);
  color: #fff;
  border: none;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  transition: opacity 120ms;
}
.thv2-upd-reload:hover { opacity: 0.85; }
.thv2-upd-dismiss {
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--fg-3, #666);
  font-size: 14px;
  padding: 2px 4px;
  line-height: 1;
}
.thv2-upd-dismiss:hover { color: var(--fg-1, #e5e7eb); }
@media (prefers-reduced-motion: reduce) {
  #thv2-update-banner { animation: none; }
}
/* Stack above mobile bottom nav if present */
@media (max-width: 600px) {
  #thv2-update-banner { bottom: 72px; left: 8px; right: 8px; max-width: none; }
}

/* Install prompt banner (Wave-34) */
#thv2-install-banner {
  position: fixed;
  bottom: 60px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9997;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--bg-1, #12161d);
  border: 1px solid var(--accent, #d4a017);
  border-radius: var(--r-md, 8px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
  font-size: 13px;
  color: var(--fg-1, #e0e0f0);
  max-width: 380px;
  width: calc(100% - 32px);
  animation: upd-slide-in 300ms ease-out both;
}
.thv2-install-icon { font-size: 24px; flex-shrink: 0; }
.thv2-install-text { flex: 1; min-width: 0; }
.thv2-install-text strong { display: block; color: var(--fg-1, #e0e0f0); }
.thv2-install-text span { color: var(--fg-2, #9aa2b0); font-size: 12px; }
.thv2-install-btn {
  padding: 6px 14px;
  background: var(--accent, #d4a017);
  color: #000;
  border: none;
  border-radius: var(--r-sm, 4px);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
  transition: opacity 150ms;
}
.thv2-install-btn:hover { opacity: 0.85; }
.thv2-install-dismiss {
  background: none;
  border: none;
  color: var(--fg-3, #666);
  cursor: pointer;
  font-size: 16px;
  padding: 4px;
  flex-shrink: 0;
  line-height: 1;
}
@media (max-width: 600px) {
  #thv2-install-banner { bottom: 80px; }
}
@media (prefers-reduced-motion: reduce) {
  #thv2-install-banner { animation: none; }
}

/* ── END PERF + UX POLISH 2026-05-18 ── */

/* ─────────────────────────────────────────────────────────────────────────
   Print stylesheet — Wave-33 (2026-05-18)
   Enables professional audit-trail printing and report generation.
   ───────────────────────────────────────────────────────────────────────── */
@media print {
  /* Hide navigation chrome */
  .topbar,
  .nav-rail,
  .nav-bar,
  #thv2-update-banner,
  .thv2-fab,
  .thv2-toast-host,
  .view-transition-loader,
  [data-print-hide] { display: none !important; }

  /* Reset base */
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body, html {
    background: #fff !important;
    color: #000 !important;
    font-size: 10pt;
    line-height: 1.4;
  }
  #main-view {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
  }

  /* Tables */
  table { width: 100% !important; border-collapse: collapse !important; }
  th, td {
    border: 1px solid #ccc !important;
    padding: 4px 8px !important;
    font-size: 9pt !important;
    color: #000 !important;
    background: transparent !important;
  }
  th { background: #f0f0f0 !important; font-weight: bold; }
  tr:nth-child(even) td { background: #fafafa !important; }

  /* Cards and panels */
  .card, .panel, .stat-card, .skel-card {
    border: 1px solid #ccc !important;
    background: #fff !important;
    color: #000 !important;
    box-shadow: none !important;
    break-inside: avoid;
    margin-bottom: 8pt !important;
  }

  /* Score chips — readable in greyscale */
  .score-chip, .signal-chip, .regime-chip, [class*="-badge"] {
    border: 1px solid #888 !important;
    background: #fff !important;
    color: #000 !important;
    box-shadow: none !important;
  }

  /* Report header */
  #main-view::before {
    content: "Trading Hub v2 — Report";
    display: block;
    font-size: 14pt;
    font-weight: bold;
    border-bottom: 2pt solid #000;
    padding-bottom: 6pt;
    margin-bottom: 12pt;
    color: #000;
  }

  /* Page breaks */
  h1, h2, h3 { page-break-after: avoid; color: #000 !important; }
  tr, .card, .panel { page-break-inside: avoid; }

  /* Links */
  a[href]::after { content: " (" attr(href) ")"; font-size: 8pt; color: #555; }
  a[href^="/"]::after,
  a[href^="#"]::after { content: ""; }

  /* Canvas fallback */
  canvas {
    border: 1px solid #ccc !important;
    max-width: 100% !important;
  }

  /* Kill animations */
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    view-transition-name: none !important;
  }
}

/* ══ Wave-38 Visual Elevation 2026-05-20 ══ */

/* ── Bento tile entry stagger for cockpit panels ── */
@keyframes thv2-panel-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.panel, .card, .tile {
  animation: thv2-panel-in 0.35s cubic-bezier(0.16,1,0.3,1) both;
}
.panel:nth-child(1), .card:nth-child(1) { animation-delay: 0ms; }
.panel:nth-child(2), .card:nth-child(2) { animation-delay: 60ms; }
.panel:nth-child(3), .card:nth-child(3) { animation-delay: 120ms; }
.panel:nth-child(4), .card:nth-child(4) { animation-delay: 180ms; }
.panel:nth-child(5), .card:nth-child(5) { animation-delay: 240ms; }
@media (prefers-reduced-motion: reduce) {
  .panel, .card, .tile { animation: none !important; }
}

/* ── Score bar component (reusable) ── */
.thv2-score-track {
  height: 3px;
  background: rgba(255,255,255,0.06);
  border-radius: 2px;
  overflow: hidden;
}
.thv2-score-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.6s cubic-bezier(0.16,1,0.3,1);
}

/* ── Factor score glow (signal strength indicator) ── */
.factor-score-high   { color: #34d399; text-shadow: 0 0 12px rgba(52,211,153,0.35); }
.factor-score-mid    { color: var(--color-directional-neutral, #d4a017); text-shadow: 0 0 12px rgba(212,160,23,0.35); }
.factor-score-low    { color: #f87171; text-shadow: 0 0 12px rgba(248,113,113,0.25); }

/* ── Pulsing live indicator for active market hours ── */
@keyframes thv2-live-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.5); }
  70%  { box-shadow: 0 0 0 5px rgba(52, 211, 153, 0);  }
  100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0);    }
}
.live-dot {
  animation: thv2-live-pulse 2s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .live-dot { animation: none !important; }
}

/* ── Command palette backdrop ── */
.command-palette-overlay {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  background: rgba(10,13,18,0.75);
}

/* ── Glass card variant ── */
.thv2-glass {
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.07);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* ── Regime badge polish ── */
.regime-badge {
  font-size: 10px;
  font-family: ui-monospace, monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 4px;
}
.regime-bull  { background: rgba(52,211,153,0.12);  color: #34d399; border: 1px solid rgba(52,211,153,0.25); }
.regime-bear  { background: rgba(248,113,113,0.12); color: #f87171; border: 1px solid rgba(248,113,113,0.25); }
.regime-chop  { background: rgba(212,160,23,0.12);  color: var(--color-directional-neutral, #d4a017); border: 1px solid rgba(212,160,23,0.25); }

/* ── Focus-visible (WCAG 2.4.7) ── */
:focus-visible {
  outline: 2px solid var(--color-directional-neutral, #d4a017);
  outline-offset: 2px;
  border-radius: 4px;
}
:focus:not(:focus-visible) { outline: none; }

/* ── Cold-start progress bar polish ── */
#thv2-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: calc(var(--progress, 0) * 1%);
  height: 2px;
  background: linear-gradient(90deg, var(--color-directional-neutral, #d4a017), #f59e0b);
  transition: width 200ms ease, opacity 400ms ease;
  z-index: 9999;
  pointer-events: none;
}

/* ── MOBILE: release the desktop scroll-lock + collapse the shell (≤767px) ───
   Audit 2026-06-17 (mobile scroll-dead). The desktop cockpit locks
   html,body { height:100vh; overflow:hidden } and lays the shell out as a fixed
   3-column grid (rail | main | right) whose ONLY scroll region is .main. On
   phones that left ~169 app-shell pages effectively unscrollable: the 240px rail
   and 360px right tracks squeeze .main to nothing while the overflow:hidden body
   cannot scroll to compensate. Here we let the DOCUMENT scroll and collapse the
   shell to a single stacked column. The legacy rail is hidden (the canonical
   elite-nav + mobile bottom-nav drive mobile navigation, same as desktop ≥768px
   already hides it); .right is already display:none below 1024px. The 8 pages
   that ship bespoke mobile CSS (mobile-responsive.css) load it AFTER app.css and
   keep overriding this baseline. Fully reversible — single hunk. */
@media (max-width: 767px) {
  html, body {
    height: auto;
    min-height: 100vh;       /* fallback for browsers without dvh */
    min-height: 100dvh;      /* dynamic viewport height — correct under the URL bar */
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .shell {
    display: block;          /* drop the fixed desktop 3-column grid */
    height: auto;
    min-height: 100dvh;
  }
  .shell > .rail,
  .shell > .right { display: none; }
  .shell > .main {
    grid-area: auto;
    overflow: visible;       /* content flows into the document scroll */
    height: auto;
    padding: 14px 16px 96px; /* bottom clearance for the fixed mobile bottom-nav */
  }
}