/* ================================= Token bridge =================
   Self-heals surfaces that do not load premium.css (investor child
   pages). Light values mirror premium.css; .dark override keeps
   contrast on nocturne surfaces. No page regression: premium's own
   definitions still win where it loads.
   ---------------------------------------------------------------- */
:root {
  --c-text-secondary: 82 82 91;   /* zinc-600 */
  --c-success: 5 150 105;         /* emerald-600 */
  --c-error: 220 38 38;           /* red-600 */
  --c-on-primary: 255 255 255;
}
.dark {
  --c-text-secondary: 161 161 172;/* zinc-400 */
}

/* ============================================================
   RESTRAINT LAYER - "Stripe dashboard" rein for the command
   surfaces. Loaded AFTER premium.css; progressively rolls to the
   rest of the journey (dashboard first by design decision).
   ------------------------------------------------------------
   The three moves:
   1. Radical hierarchy, ONE dominant number, everything else
      whispers. No equal-weight tiles.
   2. Typography instead of chrome, hairline rules replace
      borders/shadows/glow; no micro-label inflation (no 10px
      uppercase everywhere), normal-case labels at 12–13px.
   3. Honest ink, numbers solid, semantic color only on
      direction. No gradient paint, no glass, no glow.
   Every override carries a nocturne twin.
   ------------------------------------------------------------ */

/* ---- 1. Page canvas: pure quiet. ------------------------------ */
html body {
  background: rgb(var(--c-background));
  -webkit-font-smoothing: antialiased;
}
.restraint > .terminal-strip {
  background: transparent;
  border-bottom: 1px solid rgb(var(--c-outline-variant));
  box-shadow: none;
}
/* status line: normal-case labels, hairline rhythm.
   Scoped .restraint chain beats premium.css, which a runtime
   injector re-appends AFTER this sheet (ties would go to it). */
.restraint .terminal-strip .ts-label,
.restraint .terminal-strip .ts-label {
  font-size: 11.5px; font-weight: 500; letter-spacing: 0;
  text-transform: none;
  color: rgb(var(--c-text-muted));
}
.restraint .terminal-strip .ts-stat {
  font-size: 12.5px; font-weight: 600; letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  color: rgb(var(--c-on-surface));
}
.terminal-strip .ts-sep { background: rgb(var(--c-outline-variant)); width: 1px; height: 16px; margin: 0; }

/* ---- 2. Hero: no card. One big number. ------------------------- */
.restraint-hero .hero-date-line {
  font-size: 13px; font-weight: 500; color: rgb(var(--c-text-muted));
}
.restraint-hero .hero-heading {
  font-size: 14px; font-weight: 500; color: rgb(var(--c-text-secondary));
  margin-top: 2px;
}
.restraint-hero .hero-heading .brand-gradient-text {
  background: none; -webkit-text-fill-color: currentColor;
  color: rgb(var(--c-on-surface)); font-weight: 600;
}
.restraint-hero .hero-big-value {
  font-size: 54px; line-height: 1.04; font-weight: 700;
  letter-spacing: -0.025em; font-variant-numeric: tabular-nums;
  color: rgb(var(--c-on-surface));
  margin-top: 10px;
}
.restraint-hero .hero-sublabel {
  font-size: 12.5px; font-weight: 500; color: rgb(var(--c-text-muted));
}
.restraint-hero .hero-note {
  font-size: 13px; color: rgb(var(--c-text-secondary)); margin-top: 6px; max-width: 52rem;
}
.restraint-hero .hero-note b { font-weight: 600; color: rgb(var(--c-on-surface)); }

/* sub-stat rail: hairline separators, no cards */
.hero-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid rgb(var(--c-outline-variant));
  margin-top: 26px; padding-top: 18px; gap: 0;
}
.hero-stats .hs-cell { padding: 0 26px; border-left: 1px solid rgb(var(--c-outline-variant)); min-width: 0; }
.hero-stats .hs-cell:first-child { padding-left: 0; border-left: none; }
.hero-stats .hs-label { font-size: 12.5px; font-weight: 500; color: rgb(var(--c-text-muted)); }
.hero-stats .hs-value {
  font-size: 24px; font-weight: 700; letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums; color: rgb(var(--c-on-surface));
  margin-top: 6px; line-height: 1.15;
}
.hero-stats .hs-note { font-size: 11.5px; font-weight: 500; color: rgb(var(--c-text-muted)); margin-top: 5px; }
@media (max-width: 1024px) {
  .hero-stats { grid-template-columns: repeat(2, 1fr); row-gap: 14px; }
  .hero-stats .hs-cell { border-left: none; padding-left: 0; }
}

/* top opportunity: a hairline row, not a jewel */
.top-opp {
  display: flex; align-items: center; gap: 18px;
  border-top: 1px solid rgb(var(--c-outline-variant));
  margin-top: 26px; padding-top: 16px;
  border-radius: 0; background: none; box-shadow: none;
}
.top-opp .to-kicker { font-size: 12px; font-weight: 600; color: rgb(var(--c-text-muted)); text-transform: none; letter-spacing: 0; }
.top-opp .to-name   { font-size: 13.5px; font-weight: 600; color: rgb(var(--c-on-surface)); }
.top-opp .to-name .muted { color: rgb(var(--c-text-muted)); font-weight: 500; }
.top-opp .to-value  { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; color: rgb(var(--c-on-surface)); letter-spacing: -0.01em; }
.top-opp .to-value .unit { font-size: 11.5px; font-weight: 500; color: rgb(var(--c-text-muted)); margin-left: 6px; letter-spacing: 0; }

/* signal chips row in hero: removed by restraint (design decision) */
.hero-signal-chips { display: none !important; }
/* floating glass chips: gone everywhere */
.glass-float { display: none !important; }

/* ---- 3. Sections & cards: hairline borders, flat Whites -------- */
.restraint .kpi-card,
.restraint [role="region"] > .bg-surface,
main .bg-surface.border,
main .gborder {
  border: 1px solid rgb(var(--c-outline-variant)) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  background: rgb(var(--c-surface)) !important;
}
/* shadow/glow leftovers */
main [style*="box-shadow"] { box-shadow: none !important; }
main [style*="radial-gradient"] { display: none !important; }

/* section headings: normal case, typographic */
main h3, main h4 { letter-spacing: -0.005em; }
main .text-\[10px\][class*="uppercase"],
main .text-\[11px\][class*="uppercase"] { text-transform: none; letter-spacing: 0; font-weight: 500; }

/* ---- 4. Chart: single-hue bars, calm rows ---------------------- */
.chart-row { background: none !important; padding: 7px 8px; }
.chart-row:nth-child(odd) { background: none !important; }
.chart-row:hover { background: rgb(var(--c-surface-container) / .5) !important; }
.chart-bar,
html.nocturne .chart-bar {
  background: rgb(var(--c-primary) / .30) !important;
}
.chart-bar.hot-lit { background: rgb(var(--c-primary)) !important; }
.chart-bar.neg { background: rgb(var(--c-error) / .35) !important; }
.chart-lore { display: none; }
.time-range-pill { font-size: 12.5px; border-radius: 0; padding: 4px 10px; background: none; border: none; color: rgb(var(--c-text-muted)); border-bottom: 2px solid transparent; }
.time-range-pill.active { color: rgb(var(--c-on-surface)); border-bottom-color: rgb(var(--c-on-surface)); font-weight: 600; }
html.nocturne .time-range-pill.active { border-bottom-color: rgb(var(--c-on-surface)); }

/* ---- 5. Signals feed: text rows, no pills ---------------------- */
.feed-row { background: none !important; border-bottom: 1px solid rgb(var(--c-outline-variant)); padding: 13px 18px; }
.feed-row:nth-child(odd) { background: none !important; }
.feed-row .feed-msg { font-size: 13px; font-weight: 450; color: rgb(var(--c-on-surface)); }
.feed-row .feed-time { font-size: 11.5px; font-weight: 500; }
/* no pills, direction lives in text */
.feed-badge { display: none !important; }
.feed-row .feed-dir { font-size: 12px; font-weight: 600; flex: none; width: 52px; }
.feed-row .feed-dir.bullish { color: rgb(var(--c-success)); }
.feed-row .feed-dir.bearish { color: rgb(var(--c-error)); }
.feed-row .feed-dir.info  { color: rgb(var(--c-text-muted)); }
.feed-row .feed-dir.warning { color: rgb(var(--c-error)); }

/* ---- 6. Buttons: quiet -------------------------------------- */
.btn-grad,
main .btn-grad {
  background: rgb(var(--c-primary)) !important;
  color: rgb(var(--c-on-primary)) !important;
  box-shadow: none !important; border-radius: 10px !important;
}
.btn-grad:hover { background: rgb(var(--c-primary) / .90) !important; }
.hero-actions .btn-grad { padding: 9px 16px; font-size: 13px; font-weight: 600; }
.hero-actions .ghost-link {
  font-size: 13px; font-weight: 600; color: rgb(var(--c-text-secondary));
  padding: 9px 14px; border: 1px solid rgb(var(--c-outline-variant)); border-radius: 10px;
  transition: border-color .15s ease, color .15s ease;
}
.hero-actions .ghost-link:hover { color: rgb(var(--c-on-surface)); border-color: rgb(var(--c-outline)); }

/* inline text links for headings */
.section-link {
  font-size: 12.5px; font-weight: 600; color: rgb(var(--c-text-secondary));
  display: inline-flex; align-items: center; gap: 4px; text-decoration: none;
}
.section-link:hover { color: rgb(var(--c-on-surface)); }

/* ---- 7. Insights & explainability: typography over jewelry ---- */
.insight, main .insight {
  border: 1px solid rgb(var(--c-outline-variant));
  border-radius: 12px; background: rgb(var(--c-surface)); box-shadow: none;
}
.insight::before { display: none !important; }
.insight .i-kicker { font-size: 12.5px; font-weight: 600; color: rgb(var(--c-text-muted)); letter-spacing: 0; text-transform: none; }
.insight .i-value { font-size: 21px; font-weight: 700; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; color: rgb(var(--c-on-surface)); }
.insight .i-value.trend-up { color: rgb(var(--c-success)); }
.insight .i-value.trend-down { color: rgb(var(--c-error)); }
.insight .i-body { font-size: 12.5px; color: rgb(var(--c-text-secondary)); }
.insight.reveal { animation: none; }

/* driver/risk rows: plain text + colored delta, no wash pills */
.driver-row { display: flex; align-items: baseline; gap: 10px; padding: 7px 0; border-bottom: 1px solid rgb(var(--c-outline-variant)); }
.driver-row:last-child { border-bottom: none; }
.driver-row .d-delta { font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; width: 46px; flex: none; text-align: right; }
.driver-row .d-delta.up { color: rgb(var(--c-success)); }
.driver-row .d-delta.down { color: rgb(var(--c-error)); }
.driver-row .d-title { font-size: 12.5px; font-weight: 600; color: rgb(var(--c-on-surface)); }
.driver-row .d-note { font-size: 12px; color: rgb(var(--c-text-muted)); }

/* ---- 7b. Ticker row: plain hairline, no pill ------------------- */
.ticker-pill {
  background: none; border-radius: 0; border: 0;
  border-top: 1px solid rgb(var(--c-outline-variant));
  box-shadow: none; padding: 12px 0;
}
html.nocturne .ticker-pill { border-top-color: rgb(var(--c-outline-variant)); }

/* ---- 7c. Sample-data footnote ---- */
#sample-data-note { opacity: .75; }

/* ---- 7d. Number reveals: deterministic (load animation is
   decoration the skeleton already covers; both-fill leaves hero
   values opacity-0 in throttled tabs). */
.restraint .num-reveal,
.restraint .num-reveal.is-loading,
html.nocturne .restraint .num-reveal {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}

/* ---- 8. Nocturne twin -------------------------------------- */
html.nocturne .terminal-strip { border-bottom-color: rgb(var(--c-outline-variant)); }
html.nocturne .hero-stats,
html.nocturne .top-opp { border-top-color: rgb(var(--c-outline-variant)); }
html.nocturne .hero-stats .hs-cell { border-left-color: rgb(var(--c-outline-variant)); }
html.nocturne .feed-row { border-bottom-color: rgb(var(--c-outline-variant)); }
html.nocturne .driver-row { border-bottom-color: rgb(var(--c-outline-variant)); }
html.nocturne .insight, html.nocturne main .insight { border-color: rgb(var(--c-outline-variant)); }
html.nocturne .chart-bar { background: rgb(var(--c-primary) / .35) !important; }
html.nocturne .chart-bar.hot-lit { background: rgb(var(--c-primary)) !important; }

/* ---- 9. Reduced motion -------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .top-opp, .hero-stats .hs-cell, .hero-big-value { transition: none; }
}