/* ─────────────────────────────────────────────────────────────────
   VOLIA / MM — market-making dashboard styles
   Bloomberg-density on desktop, OLED-true black, Stage red accent.
   No green. "alive" = cool neutral white (cyan tint), "warn-rose" = amber,
   --accent reserved for brand + LOSS values + KILL state. Red is signal,
   not atmosphere. Inherits OPS tokens, adds MM-specifics.
   ───────────────────────────────────────────────────────────────── */

@property --pulse {
  syntax: '<percentage>';
  initial-value: 0%;
  inherits: false;
}
@property --pnl-num {
  syntax: '<number>';
  initial-value: 0;
  inherits: true;
}
@property --ring-fill {
  syntax: '<percentage>';
  initial-value: 0%;
  inherits: false;
}

/* Mobile CSS pass (Agent 1) — kept at top so @import is valid per CSS spec.
   Loaded as a separate file so HTML/JS agents don't collide on this one. */
@import "./styles-mobile.css";

:root, [data-theme="dark"] {
  color-scheme: dark;

  /* Inherit canonical tokens from OPS */
  --bg:          oklch(0% 0 0);
  --surface-0:   oklch(4% 0 0);
  --surface-1:   oklch(7% 0 0);
  --surface-2:   oklch(11% 0 0);
  --surface-3:   oklch(15% 0 0);

  --fg:          oklch(98% 0 0);
  --fg-mute:     oklch(70% 0 0);
  --fg-faint:    oklch(45% 0 0);
  --fg-dim:      oklch(28% 0 0);

  --accent:      oklch(60% 0.24 25);          /* Stage red — kill / accent */
  --accent-hi:   oklch(68% 0.26 25);
  --accent-lo:   oklch(50% 0.22 25);
  --accent-soft: oklch(60% 0.24 25 / 0.18);
  --accent-glow: oklch(60% 0.24 25 / 0.55);

  /* MM palette — green for positive values, red for negative. Trader convention.
     Owner explicitly asked 2026-04-29: "if it's plus it should be green, white doesn't
     mean anything." Brand red still reserved for losses + kill state. */
  --alive:       oklch(72% 0.20 145);          /* green — positive P&L, alive, win */
  --alive-soft:  oklch(72% 0.20 145 / 0.20);
  --warn-rose:   oklch(75% 0.12 70);           /* amber — warning, not red */
  --warn-rose-soft: oklch(75% 0.12 70 / 0.18);
  --kill:        oklch(56% 0.30 25);           /* hot red — kill state */
  --kill-glow:   oklch(56% 0.30 25 / 0.7);

  /* Differentiated ladder cool/warm so BID and ASK don't both read red. */
  --ladder-bid:  oklch(70% 0.10 220);          /* cool cyan — BID */
  --ladder-ask:  oklch(75% 0.12 70);           /* warm amber — ASK (not red) */

  /* Functional fallbacks (OPS still uses these names) */
  --win:         var(--alive);
  --loss:        var(--accent);
  --warn:        var(--warn-rose);

  --border:      oklch(18% 0 0);
  --border-hi:   oklch(28% 0 0);
  --border-acc:  oklch(40% 0.10 25);

  --grid-line:   oklch(15% 0 0);

  /* Per-theme structural surfaces */
  --hero-bg:        oklch(4% 0 0 / 0.88);
  --modal-scrim:    oklch(0% 0 0 / 0.7);
  --kill-scrim:     oklch(0% 0 0 / 0.85);
  --legend-bg:      var(--legend-bg);
  --ladder-stripe:  oklch(8% 0 0);
  --hairline:       oklch(98% 0 0 / 0.08);

  /* Heatmap chroma per theme — BID = cool cyan, ASK = warm amber.
     No red defaults: red = signal, not background. */
  --heat-bid-hue: 220;
  --heat-ask-hue: 70;
  --heat-bid-chroma: 0.05;
  --heat-bid-chroma-max: 0.13;
  --heat-ask-chroma: 0.05;
  --heat-ask-chroma-max: 0.14;
  --heat-l-base: 30;
  --heat-l-range: 50;

  --mono:        ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, monospace;
  --display:     -apple-system, BlinkMacSystemFont, 'SF Pro Display', system-ui, sans-serif;
  --text:        -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;

  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: linear(0, 0.402 7.4%, 0.711 15.3%, 0.929 23.7%, 1.008 28.2%, 1.067 33%, 1.099 38.2%, 1.103 43.7%, 1.064 53.6%, 1 62.4%, 0.973 67.4%, 0.969 73%, 0.991 86.4%, 1);

  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-pill: 999px;

  /* Body text scale (older eyes adjustment) */
  --text-base:   13px;
  --line-base:   1.4;
}

/* ─────────────────────────────────────────────────────────────────
   DAYLIGHT THEME — for Neo's dad. Warm cream paper, ink text,
   muted red. Larger type, softer hairlines, no OLED glow.
   ───────────────────────────────────────────────────────────────── */
[data-theme="light"] {
  color-scheme: light;

  /* Warm paper, never pure white */
  --bg:          oklch(98% 0.01 80);
  --surface-0:   oklch(96% 0.01 80);
  --surface-1:   oklch(95% 0.01 80);
  --surface-2:   oklch(92% 0.01 80);
  --surface-3:   oklch(89% 0.01 80);

  /* Warm ink, never pure black */
  --fg:          oklch(20% 0.01 270);
  --fg-mute:     oklch(45% 0.01 270);
  --fg-faint:    oklch(60% 0.01 270);
  --fg-dim:      oklch(75% 0.01 270);

  /* Red — desaturated for paper, less retina-burn */
  --accent:      oklch(50% 0.18 25);
  --accent-hi:   oklch(55% 0.20 25);
  --accent-lo:   oklch(45% 0.16 25);
  --accent-soft: oklch(50% 0.18 25 / 0.14);
  --accent-glow: oklch(50% 0.18 25 / 0.30);

  /* MM palette — light variants. "alive" is muted green here ONLY because
     dad reads Schwab where green = good. Dark theme keeps the no-green rule. */
  --alive:       oklch(45% 0.15 145);
  --alive-soft:  oklch(45% 0.15 145 / 0.14);
  --warn-rose:   oklch(60% 0.15 80);   /* amber */
  --warn-rose-soft: oklch(60% 0.15 80 / 0.18);
  --kill:        oklch(50% 0.20 25);
  --kill-glow:   oklch(50% 0.20 25 / 0.45);

  /* Light-theme ladder keeps Schwab convention: BID green, ASK red */
  --ladder-bid:  var(--alive);
  --ladder-ask:  var(--accent);

  --win:         var(--alive);
  --loss:        var(--accent);
  --warn:        var(--warn-rose);

  /* Soft hairlines */
  --border:      oklch(80% 0.005 80);
  --border-hi:   oklch(70% 0.008 80);
  --border-acc:  oklch(55% 0.10 25);

  --grid-line:   oklch(88% 0.005 80);

  --hero-bg:        oklch(96% 0.005 80 / 0.92);
  --modal-scrim:    oklch(20% 0.01 270 / 0.45);
  --kill-scrim:     oklch(20% 0.01 270 / 0.55);
  --legend-bg:      oklch(96% 0.005 80 / 0.85);
  --ladder-stripe:  oklch(94% 0.01 80);
  --hairline:       oklch(20% 0.01 270 / 0.08);

  /* Heatmap chroma per theme — chunkier in light so cells don't wash out */
  --heat-bid-hue: 145;
  --heat-ask-hue: 25;
  --heat-bid-chroma: 0.05;
  --heat-bid-chroma-max: 0.18;
  --heat-ask-chroma: 0.05;
  --heat-ask-chroma-max: 0.18;
  --heat-l-base: 92;
  --heat-l-range: -45;

  /* Bigger body text + roomier lines for older eyes */
  --text-base:   15px;
  --line-base:   1.6;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--text);
  font-size: var(--text-base);
  line-height: var(--line-base);
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
  overscroll-behavior-y: none;
  letter-spacing: -0.005em;
  transition: background-color 220ms var(--ease-out), color 220ms var(--ease-out);
}

body {
  min-height: 100dvh;
  /* Single subtle cool wash up top — NOT an emergency-room red glow.
     Brand red comes through in the mark, headline P&L (when negative),
     kill state, and small accent moments only. */
  background:
    radial-gradient(ellipse 70vw 30vh at 50% -10%, oklch(30% 0.02 240 / 0.20) 0%, transparent 65%),
    var(--bg);
}

[data-theme="light"] body {
  /* Quieter atmospheric glow on paper — no harsh red wash */
  background:
    radial-gradient(ellipse 60vw 30vh at 50% -10%, oklch(50% 0.18 25 / 0.05) 0%, transparent 60%),
    var(--bg);
}

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--surface-2); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.display { font-family: var(--display); font-weight: 700; letter-spacing: -0.025em; }
.dim { color: var(--fg-mute); }
.faint { color: var(--fg-faint); }
.acc { color: var(--accent); }

/* ─── LAYOUT ─── */

.app {
  max-width: 1640px;
  margin: 0 auto;
  padding: 14px;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
  container-type: inline-size;
}

@media (max-width: 760px) {
  .app { padding: 10px; gap: 9px; }
  body { font-size: calc(var(--text-base) - 1px); }
}

/* ─── THEME TOGGLE ─── */

.theme-toggle {
  display: inline-flex;
  align-items: center;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  padding: 2px;
  font-family: var(--mono);
  gap: 1px;
}
.theme-toggle .tt-btn {
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--fg-mute);
  font-family: inherit;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  padding: 6px 10px;
  border-radius: var(--r-pill);
  cursor: pointer;
  min-height: 28px;
  min-width: 44px;
  transition: color 160ms var(--ease-out), background 160ms var(--ease-out);
}
.theme-toggle .tt-btn:hover { color: var(--fg); }
.theme-toggle .tt-btn[aria-pressed="true"] {
  background: var(--surface-3);
  color: var(--fg);
  box-shadow: inset 0 0 0 1px var(--border-hi);
}
[data-theme="light"] .theme-toggle .tt-btn[aria-pressed="true"] {
  background: oklch(55% 0.12 240);   /* soft TradingView blue */
  color: var(--bg);
  box-shadow: none;
}
.theme-toggle .tt-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ─── HERO STRIP ─── */

/* Hero wrapper takes full grid width (it's a div around .hero in markup).
   Use `1 / -1` not `span 12` so it doesn't force the grid to keep 12 tracks
   on phone (which collapses every other section to 1/12th width).        */
.hero-desktop {
  grid-column: 1 / -1;
  width: 100%;
  display: block;
}
.hero-mobile {
  grid-column: 1 / -1;
  width: 100%;
  /* Hidden by default; styles-mobile.css activates at ≤760px. */
  display: none;
}

.hero {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 18px;
  padding: 12px 18px;
  background: var(--surface-0);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  position: sticky; top: 6px; z-index: 20;
  backdrop-filter: blur(20px);
  background: var(--hero-bg);
}

/* Brand + bot identity: stays together, takes natural width */
.hero .brand { flex: 0 0 auto; }
.hero .bot-id { flex: 1 1 180px; min-width: 0; }

/* P&L headline: pushed right, but allowed to shrink */
.hero .pnl-headline { flex: 0 1 auto; margin-left: auto; }

/* Right cluster: kill + conn + lang + theme. Wraps to next row if needed. */
.hero .kill-status,
.hero .conn,
.hero .lang-toggle,
.hero .theme-toggle { flex: 0 0 auto; }

@media (max-width: 760px) {
  .hero { gap: 10px 12px; padding: 10px 12px; }
  .hero .pnl-headline { margin-left: 0; flex-basis: 100%; align-items: flex-start; }
}

.brand {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: -0.04em;
  font-size: 15px;
}
.brand .mark {
  width: 20px; height: 20px;
  display: grid; place-items: center;
  background: var(--accent);
  border-radius: 5px;
  box-shadow: 0 0 22px var(--accent-glow);
}
.brand .mark::after { content: ''; width: 8px; height: 8px; background: var(--bg); border-radius: 1px; }
.brand .slash { color: var(--accent); margin: 0 3px; }

.bot-id { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.bot-name {
  font-size: 18px;
  line-height: 1.15;
  white-space: nowrap;
  font-weight: 800;
  letter-spacing: -0.015em;
}
.bot-meta { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-size: 10px; }
.market-tag { font-family: var(--mono); color: var(--fg-faint); letter-spacing: 0.04em; }

.pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 7px;
  font-size: 9px;
  font-weight: 700;
  font-family: var(--mono);
  letter-spacing: 0.12em;
  border-radius: var(--r-pill);
  border: 1px solid currentColor;
  text-transform: uppercase;
}
.pill::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.pill.live    { color: var(--alive); }
.pill.live::before { animation: pulse-dot 1.6s infinite; }
.pill.paper   { color: var(--warn-rose); }
.pill.dead    { color: var(--fg-faint); }
.pill.realism { letter-spacing: 0.10em; }
.pill.realism.naive       { color: var(--fg-mute); border-style: dashed; }
.pill.realism.honest      { color: var(--alive); }
.pill.realism.pessimistic { color: var(--accent); }

@keyframes pulse-dot {
  0%   { box-shadow: 0 0 0 0 var(--alive-soft); }
  70%  { box-shadow: 0 0 0 6px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

.pnl-headline {
  display: flex; flex-direction: column; align-items: flex-end;
  font-family: var(--display);
  text-align: right;
  min-width: 0;
}
.pnl-bracket {
  font-size: 11px;
  color: var(--fg-faint);
  white-space: nowrap;
}
.pnl-num {
  font-size: clamp(36px, 4.5cqi, 64px);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1;
  transition: color 240ms var(--ease-out), text-shadow 400ms var(--ease-out);
  text-shadow: 0 0 24px transparent;
  font-variant-numeric: tabular-nums;
}
.pnl-headline[data-state="up"]   .pnl-num { color: var(--alive); text-shadow: 0 0 22px var(--alive-soft); }
.pnl-headline[data-state="down"] .pnl-num { color: var(--accent); text-shadow: 0 0 22px var(--accent-glow); }
[data-theme="light"] .pnl-headline[data-state="up"]   .pnl-num { text-shadow: none; }
[data-theme="light"] .pnl-headline[data-state="down"] .pnl-num { text-shadow: none; }
.pnl-bracket {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--fg-mute);
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}

.kill-status {
  display: inline-flex; flex-direction: row; align-items: center; gap: 6px;
  padding: 6px 12px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.10em;
  color: var(--fg-mute);
  min-width: 76px;
  max-width: 140px;
  white-space: nowrap;
  overflow: hidden;
}
.kill-status .lbl {
  overflow: hidden;
  text-overflow: ellipsis;
}
.kill-status .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--alive); box-shadow: 0 0 10px var(--alive); }
.kill-status[data-armed="true"]  .dot { background: var(--alive); box-shadow: 0 0 10px var(--alive); }
.kill-status[data-armed="false"] {
  border-color: var(--accent);
  color: var(--accent);
  animation: kill-blink 700ms steps(2) infinite;
}
.kill-status[data-armed="false"] .dot {
  background: var(--accent);
  box-shadow: 0 0 14px var(--kill-glow);
}
@keyframes kill-blink { 50% { opacity: 0.55; } }

.kill-status[data-warn="true"][data-armed="true"] {
  border-color: var(--warn-rose);
  color: var(--warn-rose);
}

/* ─── KILL HEADROOM CHIP ─── */
.kill-headroom {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--fg-mute);
  white-space: nowrap;
  flex: 0 0 auto;
}
.kill-headroom .lim { color: var(--fg-faint); font-weight: 600; }
.kill-headroom .sep { color: var(--fg-dim); }
.kill-headroom .room { color: var(--fg); font-weight: 700; }
.kill-headroom .pct { color: var(--fg-mute); font-weight: 600; }
.kill-headroom[data-state="ok"]    .room,
.kill-headroom[data-state="ok"]    .pct  { color: var(--alive); }
.kill-headroom[data-state="warn"]  { border-color: var(--warn-rose); }
.kill-headroom[data-state="warn"]  .room,
.kill-headroom[data-state="warn"]  .pct  { color: var(--warn-rose); }
.kill-headroom[data-state="crit"]  { border-color: var(--accent); animation: kill-blink 700ms steps(2) infinite; }
.kill-headroom[data-state="crit"]  .room,
.kill-headroom[data-state="crit"]  .pct  { color: var(--accent); }

/* ─── FAIR-VALUE DELTA SPARKLINE ─── */
.fv-spark-card {
  display: inline-flex; flex-direction: column; gap: 3px;
  padding: 8px 12px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.10em;
  color: var(--fg-faint);
  flex: 0 0 auto;
  min-width: 130px;
}
.fv-spark-card .fv-head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
  text-transform: uppercase;
}
.fv-spark-card .fv-head .v {
  color: var(--fg);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: -0.005em;
  font-variant-numeric: tabular-nums;
}
.fv-spark-card .fv-head .v.up   { color: oklch(70% 0.10 220); }
.fv-spark-card .fv-head .v.down { color: var(--accent); }
[data-theme="light"] .fv-spark-card .fv-head .v.up { color: oklch(45% 0.15 220); }
.fv-spark-card svg.fv-spark { width: 100%; height: 28px; display: block; }

/* ─── BTC PRICE TILE ───
   Sits in the hero strip next to the FV spark card. Mirrors the FV card's
   shape so the strip stays visually consistent. Colors:
     up    → cool cyan (matches FV up tone) — BTC up, not a loss signal.
     down  → amber — distinct from accent red, which we keep for losses.
     idle  → muted (no feed yet / warmup).
   Width matches fv-spark-card so they balance side-by-side. */
.btc-tile {
  display: inline-flex; flex-direction: column; gap: 3px;
  padding: 8px 12px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.10em;
  color: var(--fg-faint);
  flex: 0 0 auto;
  min-width: 130px;
}
.btc-tile .btc-head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
  text-transform: uppercase;
}
.btc-tile .btc-head .v {
  color: var(--fg);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: -0.005em;
  font-variant-numeric: tabular-nums;
}
.btc-tile .btc-sub {
  font-size: 9px;
  color: var(--fg-mute);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.btc-tile[data-state="up"]   .btc-sub { color: oklch(70% 0.10 220); }    /* cool cyan */
.btc-tile[data-state="down"] .btc-sub { color: oklch(72% 0.14 70);  }    /* amber */
.btc-tile[data-state="idle"] .btc-sub { color: var(--fg-dim); }
[data-theme="light"] .btc-tile[data-state="up"]   .btc-sub { color: oklch(45% 0.15 220); }
[data-theme="light"] .btc-tile[data-state="down"] .btc-sub { color: oklch(48% 0.18 70); }

/* Screen-shake on kill state change */
.app[data-shake="1"] {
  animation: screen-shake 380ms cubic-bezier(.36,.07,.19,.97);
}
@keyframes screen-shake {
  10%, 90% { transform: translate3d(-1px, 0, 0); }
  20%, 80% { transform: translate3d(2px, 0, 0); }
  30%, 50%, 70% { transform: translate3d(-3px, 0, 0); }
  40%, 60% { transform: translate3d(3px, 0, 0); }
}

.clock {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--fg-mute);
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 11px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
}
.clock::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--alive);
  animation: pulse-dot 1.6s infinite;
}

.kbd {
  display: inline-block;
  font-family: var(--mono);
  font-size: 10px;
  padding: 2px 6px;
  background: var(--surface-1);
  border: 1px solid var(--border-hi);
  border-bottom-width: 2px;
  border-radius: 4px;
  color: var(--fg-mute);
  letter-spacing: 0.04em;
  cursor: pointer;
}
button.kbd:hover { color: var(--fg); border-color: var(--border-hi); }
button.kbd:disabled { cursor: not-allowed; opacity: 0.5; }

/* ─── SECTION SHELL ─── */

.section {
  background: var(--surface-0);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 18px 20px;
  position: relative;
  scroll-margin-top: 80px;
  min-width: 0;
}
.section h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--fg-faint);
  margin-bottom: 10px;
  display: flex; align-items: center; gap: 9px;
}
.section h2::before {
  content: ''; width: 3px; height: 11px; background: var(--fg-dim); border-radius: 2px;
}

/* Grid spans (Bloomberg-grade density on desktop) */
.card-ladder  { grid-column: span 7; grid-row: span 2; min-height: 480px; }
.card-inv     { grid-column: span 2; }
.card-timer   { grid-column: span 3; }
.card-math    { grid-column: span 5; }
.card-attr    { grid-column: span 4; }
.card-heat    { grid-column: span 3; }
.card-replay  { grid-column: span 5; }
.card-tape    { grid-column: span 7; }
.card-params  { grid-column: span 12; }
.card-intent  { grid-column: span 12; }
.card-perleg  { grid-column: span 6; }
.card-adverse { grid-column: span 6; }

/* Section header layout — let title + meta wrap cleanly when tight */
.section h2 { flex-wrap: wrap; row-gap: 2px; }
.section h2 .dim { font-size: 9px; letter-spacing: 0.12em; min-width: 0; }

@media (max-width: 1240px) {
  .card-ladder  { grid-column: span 12; min-height: 420px; }
  .card-inv     { grid-column: span 6; }
  .card-timer   { grid-column: span 6; }
  .card-math    { grid-column: span 6; }
  .card-attr    { grid-column: span 6; }
  .card-heat    { grid-column: span 6; }
  .card-replay  { grid-column: span 6; }
  .card-tape    { grid-column: span 12; }
}
@media (max-width: 760px) {
  .card-ladder, .card-inv, .card-timer, .card-math,
  .card-attr, .card-heat, .card-replay, .card-tape, .card-params,
  .card-intent, .card-perleg, .card-adverse { grid-column: span 12; }
  .card-ladder { grid-row: auto; min-height: 360px; }
}

/* ─── LADDER ─── */

.ladder-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 420px;
  background:
    repeating-linear-gradient(0deg, transparent 0 24px, var(--ladder-stripe) 24px 25px),
    var(--surface-1);
  border-radius: var(--r-md);
  overflow: hidden;
}
.ladder-svg { width: 100%; height: 100%; display: block; }
.ladder-svg text, .inv-svg text, .timer-svg text, .attr-svg text, .heatmap-svg text {
  font-variant-numeric: tabular-nums;
}
.ladder-svg .rung-bg     { fill: var(--surface-2); opacity: 0.45; }
.ladder-svg .rung-bid    { fill: var(--ladder-bid); opacity: 0.85; transition: width 180ms cubic-bezier(0.16, 1, 0.3, 1), x 180ms cubic-bezier(0.16, 1, 0.3, 1); }
.ladder-svg .rung-ask    { fill: var(--ladder-ask); opacity: 0.85; transition: width 180ms cubic-bezier(0.16, 1, 0.3, 1), x 180ms cubic-bezier(0.16, 1, 0.3, 1); }
.ladder-svg .rung-bid.filled { stroke: var(--ladder-bid); stroke-width: 1.5; opacity: 1; }
.ladder-svg .rung-ask.filled { stroke: var(--ladder-ask); stroke-width: 1.5; opacity: 1; }
.ladder-svg .price-tick  { fill: var(--fg-faint); font: 13px var(--mono); }
.ladder-svg .label       { fill: var(--fg-mute); font: 13px var(--mono); }
.ladder-svg .bbo-line    { stroke: var(--fg-faint); stroke-width: 1; stroke-dasharray: 3 3; }
.ladder-svg .mid-band    { fill: oklch(98% 0 0 / 0.05); }
[data-theme="light"] .ladder-svg .mid-band { fill: oklch(20% 0.01 270 / 0.05); }
.ladder-svg .mid-line    { stroke: var(--fg); stroke-width: 2.5; opacity: 1; }
[data-theme="light"] .ladder-svg .mid-line { stroke: var(--fg); stroke-width: 2.5; opacity: 1; }
.ladder-svg .mid-label   { fill: var(--fg); font: 700 16px var(--display); letter-spacing: -0.01em; }
[data-theme="light"] .ladder-svg .mid-label { fill: var(--fg); }
.ladder-svg .queue-text  { fill: var(--fg-faint); font: 9px var(--mono); }
.ladder-svg .size-text   { fill: var(--fg); font: 700 10px var(--mono); }
.ladder-svg .axis-line   { stroke: var(--border); stroke-width: 1; }

.ladder-legend {
  position: absolute; bottom: 8px; right: 12px;
  display: flex; gap: 14px;
  font-family: var(--mono); font-size: 10px;
  color: var(--fg-mute);
  background: var(--legend-bg);
  padding: 5px 9px;
  border-radius: var(--r-sm);
  backdrop-filter: blur(4px);
}
.ladder-legend .dot { width: 8px; height: 8px; border-radius: 2px; display: inline-block; margin-right: 5px; vertical-align: middle; }

/* ─── INVENTORY WHEEL ─── */

.inv-wrap {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  align-items: center;
  justify-items: center;
}
.inv-svg { width: 100%; max-width: 180px; aspect-ratio: 1; display: block; }
.inv-svg .ring-bg     { stroke: var(--surface-2); stroke-width: 14; fill: none; }
.inv-svg .ring-fill   { stroke: var(--fg-mute); stroke-width: 14; fill: none; stroke-linecap: round; transition: stroke-dashoffset 600ms var(--ease-out), stroke 240ms var(--ease-out); }
.inv-svg .ring-fill.alive  { stroke: var(--alive); }
.inv-svg .ring-fill.warn   { stroke: var(--warn-rose); }
.inv-svg .ring-fill.kill   { stroke: var(--accent); }
.inv-svg .threshold-tick { stroke: var(--fg-faint); stroke-width: 1; }
.inv-svg .threshold-tick.warn { stroke: var(--warn-rose); }
.inv-svg .center-num     { fill: var(--fg); font: 800 44px var(--display); text-anchor: middle; letter-spacing: -0.02em; }
.inv-svg .center-lbl     { fill: var(--fg-faint); font: 9px var(--mono); text-anchor: middle; letter-spacing: 0.16em; }
.inv-legend {
  display: flex; flex-direction: column; gap: 4px;
  font-family: var(--mono); font-size: 11px;
  color: var(--fg-mute);
  width: 100%;
}
.inv-legend > div { display: flex; justify-content: space-between; gap: 14px; }
.inv-legend .k { color: var(--fg-faint); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; }
.inv-legend .v { color: var(--fg); font-weight: 600; }

/* ─── WINDOW TIMER ─── */

.timer-wrap {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.timer-svg { width: 100%; max-width: 200px; aspect-ratio: 1; display: block; }
.timer-svg .ring-bg     { stroke: var(--surface-2); stroke-width: 9; fill: none; }
.timer-svg .ring-fill   { stroke: var(--alive); stroke-width: 9; fill: none; stroke-linecap: round; transition: stroke-dashoffset 800ms linear, stroke 240ms var(--ease-out); }
.timer-svg .ring-fill.warn { stroke: var(--warn-rose); }
.timer-svg .ring-fill.crit { stroke: var(--accent); animation: timer-pulse 0.8s infinite; }
@keyframes timer-pulse { 50% { opacity: 0.55; } }
.timer-svg .num      { fill: var(--fg); font: 800 44px var(--display); text-anchor: middle; letter-spacing: -0.02em; }
.timer-svg .num.warn { fill: var(--warn-rose); }
.timer-svg .num.crit { fill: var(--accent); }
.timer-svg .lbl      { fill: var(--fg-faint); font: 9px var(--mono); text-anchor: middle; letter-spacing: 0.16em; }
.timer-stats { display: flex; gap: 14px; font-family: var(--mono); font-size: 11px; flex-wrap: nowrap; justify-content: center; width: 100%; }
.timer-stats > div { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.timer-stats .k { font-size: 9px; color: var(--fg-faint); letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; }
.timer-stats .v { color: var(--fg); font-weight: 600; white-space: nowrap; }

/* ─── COLLAPSIBLE SECTIONS (math + params) ─── */
.section details.mobile-collapsible > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  padding-right: 36px; /* leave room for help button */
  user-select: none;
}
.section details.mobile-collapsible > summary::-webkit-details-marker { display: none; }
.section details.mobile-collapsible > summary > h2 { margin-bottom: 0; }
.section details.mobile-collapsible > summary .chev {
  margin-left: auto;
  width: 14px;
  height: 14px;
  display: inline-block;
  border-right: 2px solid var(--fg-faint);
  border-bottom: 2px solid var(--fg-faint);
  transform: rotate(-45deg);
  transition: transform 200ms var(--ease-out);
  margin-right: 4px;
  flex-shrink: 0;
}
.section details.mobile-collapsible[open] > summary .chev {
  transform: rotate(45deg);
}
.section details.mobile-collapsible > summary:hover .chev {
  border-color: var(--fg);
}
/* When closed, give the section a tighter footprint so it doesn't waste a row */
.section details.mobile-collapsible:not([open]) {
  margin-bottom: -4px;
}
.section details.mobile-collapsible > .math-table,
.section details.mobile-collapsible > .params-form,
.section details.mobile-collapsible > .replay-list {
  margin-top: 10px;
}

/* ─── MATH PANEL ─── */

.math-table { width: 100%; font-size: 11px; border-collapse: collapse; }
.math-table td { padding: 4px 6px; border-bottom: 1px dashed var(--border); }
.math-table td:first-child { color: var(--fg-mute); }
.math-table td.v { text-align: right; color: var(--fg); font-weight: 600; min-width: 70px; }
.math-table td.v.acc { color: var(--accent); }
.math-table td.hint { color: var(--fg-faint); font-size: 10px; }
.math-table tr.sep td { padding-top: 8px; border-top: 1px solid var(--border); }
.math-table tr:last-child td { border-bottom: none; }

/* ─── ATTRIBUTION ─── */

.attr-wrap {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: center;
}
.attr-svg { width: 100%; max-width: 200px; aspect-ratio: 1; }
.attr-svg .seg-bg { fill: var(--surface-2); }
.attr-svg .seg    { transition: fill 240ms var(--ease-out); }
.attr-svg .seg-spread  { fill: var(--alive); }
.attr-svg .seg-adverse { fill: var(--accent); }
.attr-svg .seg-fees    { fill: var(--fg-faint); }
.attr-svg .seg-round   { fill: var(--warn-rose); }
.attr-svg .seg-settle  { fill: var(--fg-mute); }
.attr-svg .center-num  { fill: var(--fg); font: 800 18px var(--display); text-anchor: middle; }
.attr-svg .center-lbl  { fill: var(--fg-faint); font: 9px var(--mono); text-anchor: middle; letter-spacing: 0.16em; }

.attr-list { list-style: none; display: flex; flex-direction: column; gap: 4px; font-size: 11px; }
.attr-list li { display: grid; grid-template-columns: 12px 1fr auto; gap: 8px; align-items: center; padding: 3px 0; border-bottom: 1px dashed var(--border); }
.attr-list li:last-child { border-bottom: none; }
.attr-list .dot { width: 10px; height: 10px; border-radius: 2px; }
.attr-list .k { color: var(--fg-mute); }
.attr-list .v { color: var(--fg); font-weight: 600; text-align: right; }
.attr-list li.net { padding-top: 8px; margin-top: 4px; border-top: 1px solid var(--border); border-bottom: none; }
.attr-list li.net .k { color: var(--fg); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; font-size: 10px; }

/* ─── HEATMAP ─── */

.heat-grid {
  display: grid;
  grid-template-columns: 24px repeat(5, 1fr);
  grid-template-rows: 22px repeat(2, 1fr);
  gap: 3px;
  font-family: var(--mono); font-size: 10px;
}
.heat-grid .corner { color: transparent; }
.heat-grid .col-lbl { color: var(--fg-faint); text-align: center; line-height: 22px; letter-spacing: 0.06em; }
.heat-grid .row-lbl { color: var(--fg-faint); text-align: right; line-height: 36px; padding-right: 4px; letter-spacing: 0.12em; }
.heat-grid .cell {
  position: relative;
  background: var(--surface-2);
  border-radius: var(--r-sm);
  min-height: 36px;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--fg);
  transition: background 240ms var(--ease-out);
}
.heat-grid .cell.empty { color: var(--fg-faint); font-weight: 400; }

/* ─── REPLAY LIST ─── */

.replay-list {
  display: flex; flex-direction: column; gap: 4px;
  max-height: 340px; overflow-y: auto;
}
.replay-row {
  display: grid;
  grid-template-columns: 70px 1fr 70px 60px;
  gap: 10px;
  padding: 8px 10px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  font-family: var(--mono);
  font-size: 11px;
  cursor: pointer;
  transition: border-color 140ms var(--ease-out), background 140ms var(--ease-out);
  align-items: center;
  position: relative;
}
.replay-row::before {
  content: ''; position: absolute; left: 0; top: 4px; bottom: 4px; width: 2px;
  border-radius: 1px;
  background: var(--fg-faint);
}
.replay-row.win::before  { background: var(--alive); }
.replay-row.loss::before { background: var(--accent); }
.replay-row:hover { border-color: var(--border-acc); background: var(--surface-2); }
.replay-row .ts  { color: var(--fg-faint); }
.replay-row .pnl { text-align: right; font-weight: 600; }
.replay-row.win .pnl  { color: var(--alive); }
.replay-row.loss .pnl { color: var(--accent); }
.replay-row .spark { display: block; width: 100%; height: 26px; }
.replay-row .meta  { color: var(--fg-mute); }

/* ─── EVENT TAPE ─── */

.tape {
  font-size: 11px;
  height: 320px;
  overflow-y: auto;
  background: var(--surface-1);
  border-radius: var(--r-md);
  padding: 6px 10px;
}
.tape-row {
  display: grid;
  grid-template-columns: 84px 76px 50px 80px 1fr;
  gap: 10px;
  padding: 3px 0;
  border-bottom: 1px dashed var(--border);
  color: var(--fg-mute);
}
.tape-row:last-child { border-bottom: none; }
.tape-row .ts        { color: var(--fg-faint); }
.tape-row .kind      { display: inline-block; padding: 0 5px; border-radius: 3px; text-align: center; font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; align-self: center; }
.tape-row .kind.fill          { background: var(--alive-soft); color: var(--alive); }
.tape-row .kind.quote_placed  { color: var(--fg-mute); border: 1px solid var(--border); }
.tape-row .kind.quote_canceled{ color: var(--fg-faint); border: 1px dashed var(--border); }
.tape-row .kind.tick          { color: var(--fg-faint); }
.tape-row .kind.boot          { color: var(--fg-mute); border: 1px solid var(--border-hi); }
.tape-row .kind.kill_switch   { background: var(--accent-soft); color: var(--accent); animation: kill-blink 800ms steps(2) infinite; }
.tape-row .side      { color: var(--fg-mute); font-weight: 600; }
.tape-row .side.BID  { color: var(--ladder-bid); }
.tape-row .side.ASK  { color: var(--ladder-ask); }
.tape-row .pnl       { text-align: right; }
.tape-row .pnl.up    { color: var(--alive); }
.tape-row .pnl.down  { color: var(--accent); }
.tape-row .msg       { color: var(--fg-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ─── PARAMS ─── */

.params-form {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
  align-items: end;
  font-size: 11px;
}
.params-form label { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.params-form .k { font-size: 9px; color: var(--fg-faint); letter-spacing: 0.12em; text-transform: uppercase; }
.params-form input {
  font-family: var(--mono);
  font-size: 13px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--fg);
  padding: 7px 9px;
  width: 100%;
  font-variant-numeric: tabular-nums;
}
.params-form input:disabled { color: var(--fg-mute); cursor: not-allowed; opacity: 0.7; }
.params-form input:focus { outline: none; border-color: var(--accent); }
.params-form .save-btn {
  padding: 8px 14px;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.params-form .save-btn:not(:disabled) {
  color: var(--fg);
  border-color: var(--border-acc);
}
.params-form .save-btn:not(:disabled):hover {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: var(--accent);
}
.params-form .hint { font-size: 10px; color: var(--alive); align-self: center; opacity: 0; transition: opacity 240ms var(--ease-out); }
.params-form .hint.shown { opacity: 1; }

/* ─── FOOTER ─── */

.foot {
  grid-column: span 12;
  text-align: center;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--fg-faint);
  padding: 14px;
  border-top: 1px solid var(--border);
  background: transparent;
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px;
}
.foot a { color: var(--accent); }
.foot a:hover { color: var(--accent-hi); }

/* ─── HELP / KILL MODALS ─── */

.modal-back {
  position: fixed; inset: 0;
  background: var(--modal-scrim);
  backdrop-filter: blur(8px);
  z-index: 100;
  display: none;
  place-items: center;
  padding: 20px;
}
.modal-back.open { display: grid; }
.modal {
  background: var(--surface-0);
  border: 1px solid var(--border-acc);
  border-radius: var(--r-lg);
  padding: 22px;
  max-width: 480px;
  width: 100%;
  box-shadow: 0 20px 80px var(--modal-scrim), 0 0 0 1px var(--accent-soft);
  animation: pop-in 320ms var(--ease-spring);
}
@keyframes pop-in  { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } }
.modal h3 { font-family: var(--display); font-weight: 800; font-size: 16px; margin-bottom: 14px; }
.modal table { width: 100%; font-family: var(--mono); font-size: 11px; }
.modal td { padding: 4px 0; vertical-align: top; }
.modal td.k { width: 44px; }

.kill-confirm {
  position: fixed; inset: 0;
  display: none;
  place-items: center;
  z-index: 200;
  background: var(--kill-scrim);
  backdrop-filter: blur(6px);
}
.kill-confirm.open { display: grid; }
.kill-confirm-inner {
  text-align: center;
  padding: 28px 36px;
  border: 2px solid var(--accent);
  border-radius: var(--r-lg);
  background: var(--surface-0);
  box-shadow: 0 0 60px var(--kill-glow);
}
.kill-confirm-title {
  font-family: var(--display);
  font-size: 22px;
  font-weight: 900;
  color: var(--accent);
  letter-spacing: 0.06em;
  margin-bottom: 14px;
}
.kill-confirm-bar {
  height: 8px;
  background: var(--surface-2);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 10px;
  width: 220px;
}
.kill-confirm-fill {
  height: 100%;
  width: 0%;
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent-glow);
  transition: width 0.05s linear;
}

/* ─── EMPTY / SKELETON ─── */

.empty {
  padding: 22px 16px;
  text-align: center;
  color: var(--fg-faint);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
}
.skel {
  display: block;
  background: linear-gradient(90deg, var(--surface-1) 0%, var(--surface-2) 50%, var(--surface-1) 100%);
  background-size: 800px 100%;
  animation: shimmer 1.4s linear infinite;
  border-radius: var(--r-sm);
  height: 14px;
}
@keyframes shimmer {
  from { background-position: -400px 0; }
  to   { background-position: 400px 0; }
}

/* Pre-cutover state — soften everything */
.app[data-pre-cutover="1"] .pnl-num { color: var(--fg-faint); text-shadow: none; }
.app[data-pre-cutover="1"] .section::after {
  content: 'Awaiting V2 cutover at 11:00 UTC';
  position: absolute;
  bottom: 6px; right: 10px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-dim);
  opacity: 0.7;
  pointer-events: none;
}

/* ─── SCROLL-DRIVEN REVEALS ─── */

@supports (animation-timeline: view()) {
  .section {
    animation: section-enter linear both;
    animation-timeline: view(block);
    animation-range: cover 0% cover 22%;
  }
  .hero { animation: none; }
  @keyframes section-enter {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
  }
}

/* ─── SECTION HELP BUTTON + POPOVER ─── */

.section { /* allow help button absolute positioning */ }
.section h2 {
  padding-right: 36px; /* leave room for help button */
}
.help-btn {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-1);
  border: 1px solid var(--border);
  color: var(--fg-mute);
  border-radius: 50%;
  font-family: var(--display);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: color 160ms var(--ease-out), border-color 160ms var(--ease-out), background 160ms var(--ease-out);
  padding: 0;
  line-height: 1;
  z-index: 5;
}
.help-btn:hover, .help-btn[aria-expanded="true"] {
  color: var(--fg);
  border-color: var(--border-hi);
  background: var(--surface-2);
}
.help-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
[data-theme="light"] .help-btn {
  background: var(--surface-1);
  color: var(--accent-lo);
}

.help-pop {
  display: none;
  position: absolute;
  top: 44px;
  right: 12px;
  z-index: 30;
  /* Wider container — long help text fits without truncating. Owner explicitly
     prefers a bigger popover over a scroll bar. */
  width: min(460px, calc(100% - 24px));
  max-width: calc(100vw - 32px);
  background: var(--surface-0);
  border: 1px solid var(--border-hi);
  border-radius: var(--r-md);
  box-shadow: 0 14px 40px var(--modal-scrim);
  padding: 14px 16px 16px;
  font-size: calc(var(--text-base) - 1px);
  line-height: 1.55;
  color: var(--fg);
  animation: pop-in 200ms var(--ease-spring);
}
.help-pop.open { display: block; }
.help-pop h4 {
  font-family: var(--display);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin-bottom: 6px;
  color: var(--fg);
}
.help-pop p {
  margin: 0 0 8px 0;
  color: var(--fg-mute);
}
.help-pop p:last-child { margin-bottom: 0; }
.help-pop strong { color: var(--fg); font-weight: 700; }
.help-pop code, .help-pop .ex {
  font-family: var(--mono);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 11px;
  color: var(--fg);
}
.help-pop .ex {
  display: block;
  margin-top: 6px;
  padding: 8px 10px;
  white-space: pre-wrap;
  line-height: 1.5;
}
.help-pop .pop-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 26px;
  height: 26px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--fg-mute);
  border-radius: 50%;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
}
.help-pop .pop-close:hover { color: var(--fg); border-color: var(--border-hi); }

/* RU/EN language toggle (sits next to theme toggle) */
.lang-toggle {
  display: inline-flex;
  align-items: center;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  padding: 2px;
  font-family: var(--mono);
  gap: 1px;
}
.lang-toggle .lt-btn {
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--fg-mute);
  font-family: inherit;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  padding: 6px 10px;
  border-radius: var(--r-pill);
  cursor: pointer;
  min-height: 28px;
  min-width: 36px;
  transition: color 160ms var(--ease-out), background 160ms var(--ease-out);
}
.lang-toggle .lt-btn:hover { color: var(--fg); }
.lang-toggle .lt-btn[aria-pressed="true"] {
  background: var(--surface-3);
  color: var(--fg);
  box-shadow: inset 0 0 0 1px var(--border-hi);
}
[data-theme="light"] .lang-toggle .lt-btn[aria-pressed="true"] {
  background: oklch(55% 0.12 240);   /* soft TradingView blue */
  color: var(--bg);
  box-shadow: none;
}

/* ─── LIGHT-THEME POLISH (TradingView vibe) ───────────────────────
   Softer hairlines, gentler shadows, more breathing room, semantic
   green/red for P&L only, brand red reserved for danger. */

[data-theme="light"] .section {
  border-color: var(--border);
  box-shadow: 0 1px 0 oklch(20% 0.01 270 / 0.04), 0 4px 16px oklch(20% 0.01 270 / 0.04);
}
[data-theme="light"] .section h2::before {
  background: var(--accent-lo);
}
[data-theme="light"] .hero {
  box-shadow: 0 1px 0 oklch(20% 0.01 270 / 0.04);
}
[data-theme="light"] .pill { border-width: 1px; }
[data-theme="light"] .pill.live    { color: var(--alive); }
[data-theme="light"] .pill.paper   { color: oklch(45% 0.12 80); }   /* amber, not rose */
[data-theme="light"] .pill.realism.honest { color: var(--alive); }
[data-theme="light"] .clock { background: var(--surface-1); }

/* TradingView-style row hover for replays */
[data-theme="light"] .replay-row { border-color: var(--border); background: var(--surface-0); }
[data-theme="light"] .replay-row:hover { border-color: var(--border-hi); background: var(--surface-1); }

/* Tape: clearer kind labels on paper */
[data-theme="light"] .tape-row .kind.fill { background: var(--alive-soft); color: var(--alive); }
[data-theme="light"] .tape-row .kind.kill_switch { background: var(--accent-soft); color: var(--accent); }
[data-theme="light"] .tape-row .kind.quote_placed { color: var(--fg-mute); border-color: var(--border); }
[data-theme="light"] .tape-row .side.BID { color: var(--alive); }
[data-theme="light"] .tape-row .side.ASK { color: var(--accent); }
[data-theme="light"] .tape-row .pnl.up   { color: var(--alive); }
[data-theme="light"] .tape-row .pnl.down { color: var(--accent); }

/* Math panel — chunkier rows in light theme */
[data-theme="light"] .math-table { font-size: calc(var(--text-base) - 2px); }
[data-theme="light"] .math-table td { padding: 7px 8px; }
[data-theme="light"] .math-table td.v.acc { color: var(--accent); }

/* Bigger inputs in light mode for older fingers */
[data-theme="light"] .params-form input { padding: 10px 12px; min-height: 44px; font-size: 14px; }
[data-theme="light"] .params-form .save-btn { padding: 12px 18px; min-height: 44px; }

/* Roomier gaps in light mode */
[data-theme="light"] .app { gap: 14px; }
[data-theme="light"] .replay-list { gap: 6px; }
[data-theme="light"] .replay-row { padding: 10px 12px; }
[data-theme="light"] .tape-row { padding: 5px 0; }

/* Brand mark: in light mode, the red square overpowers — soften it */
[data-theme="light"] .brand .mark { box-shadow: 0 0 0 1px var(--accent-lo); background: var(--accent); }
[data-theme="light"] .brand .mark::after { background: var(--bg); }

/* Heatmap empty cell on light bg */
[data-theme="light"] .heat-grid .cell { background: var(--surface-2); color: var(--fg); }
[data-theme="light"] .heat-grid .cell.empty { color: var(--fg-faint); background: var(--surface-1); }

/* SVG axis/grid in light theme — soften the strokes */
[data-theme="light"] .ladder-svg .axis-line { stroke: var(--grid-line); }
[data-theme="light"] .ladder-svg .price-tick { fill: var(--fg-faint); }
[data-theme="light"] .ladder-svg .label { fill: var(--fg-mute); }
[data-theme="light"] .ladder-svg .bbo-line { stroke: var(--fg-faint); }
[data-theme="light"] .ladder-svg .queue-text { fill: var(--fg-faint); }
[data-theme="light"] .ladder-svg .size-text { fill: var(--fg); }
[data-theme="light"] .ladder-svg .rung-bid { fill: var(--alive); opacity: 0.85; }
[data-theme="light"] .ladder-svg .rung-ask { fill: var(--accent); opacity: 0.85; }

/* Inventory wheel + timer + donut: make tracks visible against paper */
[data-theme="light"] .inv-svg .ring-bg,
[data-theme="light"] .timer-svg .ring-bg { stroke: var(--surface-3); }
[data-theme="light"] .inv-svg .center-num,
[data-theme="light"] .timer-svg .num { fill: var(--fg); }
[data-theme="light"] .inv-svg .ring-fill.alive { stroke: var(--alive); }
[data-theme="light"] .inv-svg .ring-fill.warn  { stroke: var(--warn-rose); }
[data-theme="light"] .inv-svg .ring-fill.kill  { stroke: var(--accent); }
[data-theme="light"] .timer-svg .ring-fill.warn { stroke: var(--warn-rose); }
[data-theme="light"] .attr-svg .seg-bg { fill: var(--surface-2); }
[data-theme="light"] .attr-svg .seg-spread  { fill: var(--alive); }
[data-theme="light"] .attr-svg .seg-adverse { fill: var(--accent); }
[data-theme="light"] .attr-svg .seg-fees    { fill: var(--fg-mute); }
[data-theme="light"] .attr-svg .seg-round   { fill: var(--warn-rose); }
[data-theme="light"] .attr-svg .seg-settle  { fill: var(--fg-faint); }

/* Footer link — keep red but desaturated */
[data-theme="light"] .foot a { color: var(--accent-lo); }
[data-theme="light"] .foot a:hover { color: var(--accent); }

/* Modal in light theme — paper card */
[data-theme="light"] .modal { background: var(--surface-0); border-color: var(--border-hi); }

/* Pre-cutover overlay text on paper */
[data-theme="light"] .app[data-pre-cutover="1"] .section::after { color: var(--fg-faint); }

/* ─────────────────────────────────────────────────────────────────
   POLISH PASS — UX-LENS + TRADER-LENS additions (Apr 29).
   Appended at bottom so the in-flight top-10 agent's edits above
   don't conflict. These are additive: new components, refined
   typographic scale, semantic color tightening, transitions.
   ───────────────────────────────────────────────────────────────── */

/* — Three-tier numeric scale tokens — */
:root {
  --num-hero: clamp(44px, 5cqi, 64px);   /* P&L headline */
  --num-large: 44px;                      /* ring centers, attribution net */
  --num-mid: 20px;                        /* secondary values (timer fills, attr items) */
  --num-mono: 11px;                       /* tabular tertiary */
  --label-mono: 9px;
}

/* — Body mono drop letter-spacing for readability (Idea #7) — */
.mono { letter-spacing: 0; }
.tape, .math-table, .heat-grid, .params-form, .replay-row, .tape-row { letter-spacing: 0; }

/* — Italic for derived/computed values (Idea #6) — */
.math-table td.v.acc, .math-table td.hint { font-style: italic; }

/* — Pin ladder + P&L hero band (Idea #19): tighten visual primary band — */
.card-ladder { background: linear-gradient(180deg, var(--surface-0) 0%, var(--surface-0) 100%); }

/* Ladder fixed-tall on wide screens (Idea #22) */
@media (min-width: 1440px) {
  .card-ladder { min-height: clamp(480px, 60vh, 760px); }
  .ladder-wrap { min-height: clamp(440px, 56vh, 720px); }
}

/* — Reserve red ONLY for loss + kill (Idea #8) — purge red leaks — */
.foot a { color: var(--fg-mute); }
.foot a:hover { color: var(--fg); border-bottom: 1px solid var(--border-hi); }
[data-theme="light"] .foot a { color: var(--fg-mute); }
[data-theme="light"] .foot a:hover { color: var(--fg); }

/* — P&L timeframe toggle (trader-lens 2.1) — */
.pnl-tf-toggle {
  display: inline-flex;
  align-items: center;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  padding: 2px;
  gap: 1px;
  margin-top: 6px;
  font-family: var(--mono);
  align-self: flex-end;
}
.pnl-tf-toggle .tf-btn {
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--fg-faint);
  font-family: inherit;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.10em;
  padding: 4px 9px;
  border-radius: var(--r-pill);
  cursor: pointer;
  min-height: 22px;
  transition: color 160ms var(--ease-out), background 160ms var(--ease-out);
}
.pnl-tf-toggle .tf-btn:hover { color: var(--fg-mute); }
.pnl-tf-toggle .tf-btn[aria-pressed="true"] {
  background: var(--surface-3);
  color: var(--fg);
  box-shadow: inset 0 0 0 1px var(--border-hi);
}
[data-theme="light"] .pnl-tf-toggle .tf-btn[aria-pressed="true"] {
  background: oklch(55% 0.12 240);
  color: var(--bg);
}

/* — Heatmap mode toggle (trader-lens 5.3) — */
.heat-mode-toggle {
  position: absolute;
  top: 14px;
  right: 52px;          /* leave room for help button */
  display: inline-flex;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  padding: 2px;
  font-family: var(--mono);
  z-index: 4;
}
.heat-mode-toggle .hm-btn {
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--fg-faint);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.10em;
  padding: 4px 9px;
  border-radius: var(--r-pill);
  cursor: pointer;
  min-height: 22px;
  font-family: inherit;
}
.heat-mode-toggle .hm-btn[aria-pressed="true"] {
  background: var(--surface-3);
  color: var(--fg);
}

/* — Diagnostics panel — */
.card-diag    { grid-column: span 7; }
.card-metrics { grid-column: span 5; }
.card-rung    { grid-column: span 12; }

@media (max-width: 1240px) {
  .card-diag    { grid-column: span 12; }
  .card-metrics { grid-column: span 12; }
  .card-rung    { grid-column: span 12; }
}

.diag-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
  font-family: var(--mono);
  margin-top: 4px;
}
.diag-card {
  padding: 10px 12px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 76px;
}
.diag-card .diag-k {
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-faint);
  font-weight: 600;
}
.diag-card .diag-v {
  font-size: 18px;
  font-weight: 700;
  font-family: var(--mono);
  color: var(--fg);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  line-height: 1.1;
}
.diag-card .diag-v.gain { color: var(--alive); }
.diag-card .diag-v.loss { color: var(--accent); }
.diag-card .diag-sub {
  font-size: 10px;
  color: var(--fg-mute);
  font-style: italic;
}
.diag-card .diag-sep { color: var(--fg-dim); margin: 0 3px; }
.diag-card[data-tone="warn"] { border-color: var(--warn-rose); border-left: 3px solid var(--warn-rose); }
.diag-card[data-tone="loss"] { border-color: var(--accent); border-left: 3px solid var(--accent); }
.diag-card[data-tone="gain"] { border-color: var(--alive); border-left: 3px solid var(--alive); }
.diag-card .d-spark {
  width: 100%;
  height: 24px;
  display: block;
}
.diag-card .d-spark .bar { fill: var(--fg-mute); }
.diag-card .d-spark .bar.recent { fill: var(--alive); }

/* Streak warning state */
#d-streak-card[data-warn="true"] { border-color: var(--warn-rose); border-left: 3px solid var(--warn-rose); }
#d-streak-card[data-warn="true"] .diag-v { color: var(--warn-rose); }

/* — Metrics grid — */
.metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
  font-family: var(--mono);
  margin-top: 4px;
}
.metric-card {
  padding: 10px 12px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 76px;
}
.metric-card .m-k {
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-faint);
  font-weight: 600;
}
.metric-card .m-k .dim { font-weight: 400; letter-spacing: 0.06em; }
.metric-card .m-v {
  font-size: 16px;
  font-weight: 700;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
}
.metric-card .m-v .gain { color: var(--alive); }
.metric-card .m-v .loss { color: var(--accent); }
.metric-card .m-v .ci   { font-size: 10px; font-weight: 500; }
.metric-card .m-v .sep  { font-size: 11px; }
.metric-card .m-sub {
  font-size: 10px;
  color: var(--fg-mute);
  font-style: italic;
}
.metric-card .wr-cell {
  display: inline-flex;
  flex-direction: column;
  gap: 1px;
  margin-right: 8px;
}
.metric-card .wr-cell .lbl {
  font-size: 8px;
  color: var(--fg-faint);
  letter-spacing: 0.10em;
  text-transform: uppercase;
}
.metric-card .wr-cell .val {
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.metric-card .m-scatter,
.metric-card .m-hist {
  width: 100%;
  height: 60px;
  display: block;
}
.metric-card .m-scatter circle.bar { fill: var(--alive); }
.metric-card .m-scatter circle.bar.loss { fill: var(--accent); }
.metric-card .m-scatter line.zero { stroke: var(--fg-dim); stroke-dasharray: 2 3; }
.metric-card .m-hist rect.bar { fill: var(--fg-mute); }
.metric-card .m-hist rect.bar.gain { fill: var(--alive); }
.metric-card .m-hist rect.bar.loss { fill: var(--accent); }

/* — Rung profitability ladder — */
.rung-grid {
  display: grid;
  grid-template-columns: 60px repeat(5, 1fr);
  gap: 6px;
  font-family: var(--mono);
  font-size: 11px;
  margin-top: 4px;
}
.rung-grid .rh {
  color: var(--fg-faint);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-align: center;
  text-transform: uppercase;
  line-height: 24px;
}
.rung-grid .rl {
  color: var(--fg-faint);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-align: right;
  padding-right: 6px;
  text-transform: uppercase;
  line-height: 36px;
}
.rung-grid .rcell {
  background: var(--surface-2);
  border-radius: var(--r-sm);
  padding: 6px 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 36px;
  border: 1px solid transparent;
  position: relative;
  font-variant-numeric: tabular-nums;
}
.rung-grid .rcell .pnl {
  font-size: 12px;
  font-weight: 700;
}
.rung-grid .rcell .pnl.gain { color: var(--alive); }
.rung-grid .rcell .pnl.loss { color: var(--accent); }
.rung-grid .rcell .nf {
  font-size: 9px;
  color: var(--fg-faint);
  letter-spacing: 0.05em;
}
.rung-grid .rcell.empty { opacity: 0.5; }
.rung-grid .rcell.best { border-color: var(--alive); box-shadow: inset 0 0 0 1px var(--alive-soft); }
.rung-grid .rcell.worst { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent-soft); }
.rung-foot { margin-top: 8px; font-size: 11px; }
.rung-foot #rung-rec { color: var(--fg); font-weight: 700; }

/* — Ladder annotations — */
.ladder-svg .bbo-band { fill: var(--fg-faint); opacity: 0.06; }
[data-theme="light"] .ladder-svg .bbo-band { fill: var(--fg-mute); opacity: 0.08; }
.ladder-svg .edge-bps { fill: var(--fg-faint); font: 10px var(--mono); font-style: italic; }
.ladder-svg .queue-pip { transition: fill 200ms var(--ease-out); }
.ladder-svg .queue-pip.full { fill: var(--alive); }
.ladder-svg .queue-pip.empty { fill: var(--fg-dim); }
.ladder-svg .fill-marker { fill: var(--alive); transition: opacity 600ms linear; }
.ladder-svg .fill-marker.ask { fill: var(--ladder-ask); }
.ladder-svg .gridline-pct { stroke: var(--grid-line); stroke-dasharray: 1 4; opacity: 0.5; }
.ladder-svg .our-glow {
  filter: drop-shadow(0 0 3px var(--alive-soft));
}
.ladder-svg .our-glow.ask { filter: drop-shadow(0 0 3px var(--warn-rose-soft)); }
[data-theme="light"] .ladder-svg .our-glow.ask { filter: drop-shadow(0 0 3px oklch(50% 0.18 25 / 0.30)); }
.ladder-svg .bbo-pair-label {
  fill: var(--fg);
  font: 700 11px var(--mono);
}
.ladder-svg .model-cap-chip { fill: var(--warn-rose); }
.ladder-svg .model-skew { fill: var(--fg-mute); font: 9px var(--mono); font-style: italic; }

/* Cancel/replace flash on rung change */
.ladder-svg .rung-bid.flashing,
.ladder-svg .rung-ask.flashing {
  animation: rung-flash 180ms ease-out;
}
@keyframes rung-flash {
  0% { opacity: 0.3; }
  60% { opacity: 1; }
  100% { opacity: 0.85; }
}

/* — Inventory wheel split (R / U) — */
.inv-svg .ring-realized { stroke: var(--alive); stroke-width: 7; fill: none; opacity: 0.85; }
.inv-svg .ring-unrealized { stroke: var(--warn-rose); stroke-width: 7; fill: none; opacity: 0.6; }
.inv-svg .soft-ring { stroke: var(--fg-faint); stroke-width: 1.5; stroke-dasharray: 3 4; fill: none; }
.inv-svg .skew-arrow { fill: var(--fg-mute); }
.inv-svg .ttf-text { fill: var(--fg-faint); font: 9px var(--mono); text-anchor: middle; }
.inv-svg .dd-badge { fill: var(--accent); font: 600 10px var(--mono); }

/* — Tape: kind tag pills + toxic-flow color — */
.tape-row .kind {
  background: var(--surface-2);
  padding: 1px 7px;
  border-radius: var(--r-pill);
}
.tape-row .kind.fill { background: var(--alive-soft); }
.tape-row .kind.kill_switch { background: var(--accent-soft); }
.tape-row.toxic { background: var(--accent-soft); }
.tape-row.clean { /* default */ }
.tape-row.unknown { opacity: 0.85; }

/* — Right-align numeric columns (Idea #23) — */
.tape-row .pnl, .replay-row .pnl, .attr-list .v, .inv-legend .v, .timer-stats .v {
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* — Number flash on update (Idea #14) — */
@keyframes num-flash {
  0% { background: var(--alive-soft); }
  100% { background: transparent; }
}
@keyframes num-flash-loss {
  0% { background: var(--accent-soft); }
  100% { background: transparent; }
}
.flash-up   { animation: num-flash 480ms ease-out; }
.flash-down { animation: num-flash-loss 480ms ease-out; }

/* — Color-flash on P&L sign change (Idea #18) — */
.pnl-headline.sign-flip .pnl-num {
  animation: pnl-sign-flip 560ms ease-out;
}
@keyframes pnl-sign-flip {
  0%   { text-shadow: 0 0 32px var(--accent-glow); }
  100% { text-shadow: 0 0 24px transparent; }
}

/* — Fill flash overlay (Idea #32) — */
.section.fill-flash::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 2px solid var(--alive);
  pointer-events: none;
  animation: fill-flash 600ms ease-out;
  z-index: 5;
}
.section.fill-flash[data-side="ASK"]::before { border-color: var(--ladder-ask); }
@keyframes fill-flash {
  0%   { opacity: 0.9; box-shadow: inset 0 0 24px var(--alive-soft); }
  100% { opacity: 0;   box-shadow: inset 0 0 0 transparent; }
}

/* — Window-roll banner (Idea #34) — */
.window-roll-banner {
  position: fixed;
  top: 90px;
  left: 50%;
  transform: translate(-50%, -10px);
  background: var(--surface-0);
  border: 1px solid var(--alive);
  border-radius: var(--r-pill);
  padding: 8px 18px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--fg);
  z-index: 90;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 12px 36px var(--modal-scrim);
  transition: opacity 280ms var(--ease-out), transform 280ms var(--ease-out);
}
.window-roll-banner[data-state="loss"] { border-color: var(--accent); }
.window-roll-banner.show { opacity: 1; transform: translate(-50%, 0); }

/* — Section transitions on window roll (Idea #40) — */
.app[data-window-roll="1"] .section:not(.card-ladder):not(.card-inv):not(.card-timer) {
  animation: section-fade 360ms var(--ease-out);
}
@keyframes section-fade {
  0% { opacity: 0.7; }
  100% { opacity: 1; }
}

/* — Vignette pulse on kill (Idea #33, replaces shake) — */
.app[data-shake="1"] {
  animation: none;   /* drop shake */
}
.app::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 50%, var(--accent-soft) 100%);
  opacity: 0;
  transition: opacity 280ms var(--ease-out);
  z-index: 1000;
}
.app[data-vignette="1"]::after {
  opacity: 1;
  animation: vignette-pulse 580ms var(--ease-out);
}
@keyframes vignette-pulse {
  0%   { opacity: 0; }
  35%  { opacity: 1; }
  100% { opacity: 0; }
}

/* — Heartbeat micro-bar under clock (Idea #36) — */
.clock {
  position: relative;
  overflow: hidden;
}
.clock::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: var(--heartbeat, 0%);
  background: var(--alive);
  transition: width 1.8s linear;
  opacity: 0.7;
}

/* — Drop card borders, lean on surface elevation (Idea #37) — */
.section { border-color: transparent; box-shadow: 0 1px 0 0 oklch(0% 0 0 / 0.5); }
[data-theme="dark"] .section { border-color: oklch(15% 0 0); }
[data-theme="light"] .section { box-shadow: 0 1px 0 oklch(20% 0.01 270 / 0.04), 0 4px 16px oklch(20% 0.01 270 / 0.04); }

/* — Consistent corner radius (Idea #38) — */
.section, .modal, .help-pop, .hero, .ladder-wrap { border-radius: 12px; }
.pill, .kill-status, .clock, .pnl-tf-toggle, .heat-mode-toggle, .theme-toggle, .lang-toggle { border-radius: 999px; }
.diag-card, .metric-card, .rcell { border-radius: 10px; }

/* — Focus rings on interactive (Idea #39) — */
.tf-btn:focus-visible, .hm-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-pill);
}

/* — Vol gauge — uses split bar inside metric card — */
.vol-gauge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.vol-gauge .impl { color: var(--fg-mute); }
.vol-gauge .real { color: var(--fg); font-weight: 700; }
.vol-gauge .delta { color: var(--warn-rose); font-size: 10px; }

/* — Force-close countdown chip — */
.kill-status[data-force="true"] {
  border-color: var(--warn-rose);
  color: var(--warn-rose);
  animation: kill-blink 500ms steps(2) infinite;
}

/* Tabular nums on every numeric SVG text (Idea #20 reinforcement) */
.ladder-svg text, .inv-svg text, .timer-svg text, .attr-svg text, .fv-spark, .d-spark, .m-scatter, .m-hist {
  font-variant-numeric: tabular-nums;
}

/* — Demote section headers, promote section values (Idea #2) — */
.section h2 {
  opacity: 0.78;
  font-weight: 600;
}
.section h2 .dim { opacity: 0.95; }

/* — Use weight not color for label/value separation (Idea #5) — */
.diag-card .diag-k, .metric-card .m-k, .inv-legend .k, .timer-stats .k, .heat-grid .col-lbl, .heat-grid .row-lbl {
  font-weight: 600;
}
.diag-card .diag-v, .metric-card .m-v, .inv-legend .v, .timer-stats .v {
  font-weight: 700;
}

/* Diverging gradient stroke on inventory ring (Idea #10) */
.inv-svg .ring-fill.diverging {
  stroke: url(#inv-gradient);
}

/* Pre-cutover chip when bot is awaiting V2 cutover */
.section[data-pre-cutover="1"] .diag-grid,
.section[data-pre-cutover="1"] .metrics-grid,
.section[data-pre-cutover="1"] .rung-grid {
  opacity: 0.45;
  filter: grayscale(0.4);
}

/* Zero-fill ("idle") window rows — flagged so trader sees the bot was inactive */
.replay-row.zero-fill {
  opacity: 0.6;
  border-style: dashed;
}
.replay-row.zero-fill .meta {
  color: var(--fg-faint);
  font-style: italic;
}
.replay-row.zero-fill::before { background: var(--fg-dim); }

/* Last-update flash hint on numeric values */
.diag-card.flash-up   .diag-v { animation: num-flash 480ms ease-out; }
.diag-card.flash-down .diag-v { animation: num-flash-loss 480ms ease-out; }

/* Sign indicator on inventory imbalance */
.diag-card[data-imb-sign="+"] .diag-v::before { content: ''; }
.diag-card[data-imb-sign="-"] .diag-v::before { content: ''; }

/* ─── REDUCED MOTION ─── */

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

/* ─── PRINT ─── */

@media print {
  body { background: #fff; color: #000; }
  .hero { position: static; background: #fff; border-color: #ccc; }
  .section { background: #fff; border: 1px solid #ccc; page-break-inside: avoid; box-shadow: none; }
  .pill, .kill-status { border: 1px solid #888; color: #000; }
  .kbd, .clock, .modal-back, .kill-confirm, .theme-toggle, .help-btn { display: none !important; }
  .pnl-num, .display { color: #000; text-shadow: none; }
}

/* ─── DASHBOARD LOGGING ADDITIONS (2026-04-29) ─── */

/* Bot intent panel */
.intent-wrap { display: flex; flex-direction: column; gap: 10px; }
.intent-line { font-size: 14px; line-height: 1.5; padding: 8px 10px; background: var(--surface-1); border-radius: 4px; border-left: 3px solid var(--accent); }
.intent-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; font-size: 11px; }
@media (max-width: 760px) { .intent-grid { grid-template-columns: repeat(3, 1fr); } }
.intent-grid > div { display: flex; flex-direction: column; padding: 6px 8px; background: var(--surface-1); border-radius: 3px; }
.intent-grid .k { color: var(--fg-faint); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 2px; }
.intent-grid .v { color: var(--fg); font-size: 13px; font-weight: 700; }
.intent-status-paused { color: var(--warn-rose) !important; }
.intent-status-quoting { color: var(--alive) !important; }

/* Leg chip — used in tape and per-leg table */
.leg-chip { display: inline-block; padding: 1px 5px; border-radius: 3px; font-size: 9px; font-weight: 700; letter-spacing: 0.08em; align-self: center; }
.leg-chip.yes { background: rgba(0, 240, 200, 0.15); color: #00f0c8; }
.leg-chip.no  { background: rgba(255, 120, 90, 0.15); color: #ff785a; }

/* Adverse warning chip in tape */
.adv-chip { color: var(--warn-rose); margin-right: 4px; font-weight: 700; cursor: help; }

/* Per-leg P&L table */
.perleg-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.perleg-table th, .perleg-table td { padding: 5px 8px; text-align: left; border-bottom: 1px solid var(--border); }
.perleg-table th { font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-faint); }
.perleg-table td.num, .perleg-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.perleg-table tr.leg-total { background: var(--surface-1); }
.perleg-table tr.leg-total td { border-bottom: 2px solid var(--border); }
.perleg-table .up { color: var(--alive); }
.perleg-table .down { color: var(--warn-rose); }

/* Adverse breakdown list */
.adverse-list { list-style: none; padding: 0; margin: 0; }
.adverse-list .adv-row { display: grid; grid-template-columns: 1fr 110px 50px 50px; gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px dashed var(--border); font-size: 12px; }
.adverse-list .adv-row:last-child { border-bottom: none; }
.adv-label { color: var(--fg); }
.adv-bar { background: var(--surface-1); height: 8px; border-radius: 2px; overflow: hidden; }
.adv-bar-fill { display: block; height: 100%; background: linear-gradient(90deg, var(--warn-rose), var(--accent)); }
.adv-count { color: var(--fg-mute); text-align: right; }
.adv-pct { color: var(--fg); font-weight: 700; text-align: right; }