/* ============================================================================
   Lab overlay — the research page in the Arena's colours.

   The page reads its chart colours from CSS custom properties at runtime, so
   retargeting the tokens restyles the canvases as well as the markup. Loaded
   after the page's own <style> and after arena.css.
   ========================================================================== */

:root, :root[data-theme=dark], :root[data-theme=light] {
  --bg: var(--page-bg, #07090f);
  --surface: #10141f;
  --surface2: #161b2a;
  --surface-2: #161b2a;
  --ink: #eef2f8;
  --ink-2: #c3ccd9;
  --muted: #8b95a8;
  --grid: #1c2231;
  --line: #2a3242;
  --hair: rgba(255, 255, 255, .09);
  --accent: #2ef27a;
  --accent-ink: #07090f;
  --accent-soft: rgba(46, 242, 122, .16);
  --s1: #2ed3ff; --s2: #ff7a1a; --s3: #2ef27a; --s4: #e8ff47; --s5: #ff3d81; --s8: #ff4d6d;
  --good: #2ef27a; --critical: #ff4d6d;
  --div-lo: #2ed3ff; --div-mid: #1d2436; --div-hi: #ff4d6d;
  --pitch: #1c6b3a; --pitch-2: #175c31; --court: #2f63b8; --hardwood: #b98a54; --pool: #1f8fb3;
  --shadow: 0 10px 30px -12px rgba(0, 0, 0, .7);
}
body { background: #07090f !important; color: var(--ink) !important; font-family: "Inter", system-ui, sans-serif !important; }

/* ---- layout ---------------------------------------------------------------- */
.shell { max-width: 1280px !important; margin: 0 auto; padding: 0 24px; gap: 28px !important; grid-template-columns: 220px minmax(0, 1fr) !important; }
.rail { top: 80px !important; height: auto !important; max-height: calc(100vh - 90px); align-self: start; padding: 22px 14px 22px 0 !important; border-right: 1px solid var(--hair) !important; background: transparent !important; }
.rail .wordmark { display: none; }
main { padding: 0 0 72px !important; max-width: none !important; min-width: 0; }
.rail nav a { border-radius: 999px !important; padding: 9px 13px !important; font: 600 16px "Barlow Condensed", sans-serif !important; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-2) !important; }
.rail nav a:hover { background: var(--surface) !important; color: var(--ink) !important; }
.rail nav a.active { background: var(--accent) !important; color: #07090f !important; }
.rail .legendnote { font-size: 13px !important; color: var(--ink-2) !important; background: var(--surface); border: 1px solid var(--hair); border-radius: 14px; padding: 12px 14px; }

/* ---- type ------------------------------------------------------------------ */
h1, h2, h3, h4 { font-family: "Barlow Condensed", "Arial Narrow", sans-serif !important; font-weight: 700 !important; text-transform: uppercase; letter-spacing: 0 !important; color: var(--ink) !important; line-height: 1 !important; }
h1 { font-size: clamp(44px, 6vw, 84px) !important; font-weight: 800 !important; }
h2 { font-size: clamp(30px, 3.6vw, 48px) !important; }
h3 { font-size: 24px !important; }
.eyebrow, .surface-cap, .fig-sub { font: 500 12px/1.4 "JetBrains Mono", monospace !important; letter-spacing: .14em !important; text-transform: uppercase; color: var(--muted) !important; }
.intro .lede, .sport-head .thesis { font-size: 18px !important; color: var(--ink-2) !important; line-height: 1.55 !important; }
.note, .sources { font-size: 13.5px !important; color: var(--ink-2) !important; }
b, strong { color: var(--ink); }

/* ---- intro & scoreboard ---------------------------------------------------- */
.intro { grid-template-columns: minmax(0, 1fr) !important; gap: 30px !important; padding: 44px 0 30px !important; border-bottom: 1px solid var(--hair) !important; }
.intro > div:not(.scoreboard) { max-width: 80ch; }
.scoreboard { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; background: var(--hair) !important; border: 1px solid var(--hair) !important; border-radius: 18px !important; overflow: hidden; }
.scoreboard > div { background: var(--surface) !important; padding: 16px 16px 14px !important; min-width: 0; }
.scoreboard .lbl { font: 500 11px "JetBrains Mono", monospace !important; letter-spacing: .1em !important; color: var(--muted) !important; }
.scoreboard .val { font: 800 34px/1.1 "Barlow Condensed", sans-serif !important; color: var(--ink) !important; margin: 6px 0 4px !important; }
.scoreboard .sub { font: 400 13px "Inter", sans-serif !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--ink-2) !important; }
@media (max-width: 860px) { .scoreboard { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important; } }

/* ---- sections & cards ------------------------------------------------------ */
.sport-head { grid-template-columns: minmax(0, 1fr) minmax(0, 280px) !important; gap: 32px !important; }
.model-grid { grid-template-columns: minmax(0, .95fr) minmax(0, 1.25fr) !important; gap: 30px !important; }
.model + .model { border-top: 1px solid var(--hair) !important; }
.figure { background: var(--surface) !important; border: 1px solid var(--hair) !important; border-radius: 18px !important; box-shadow: var(--shadow) !important; padding: 18px 20px 16px !important; }
.fig-title { font-size: 15px !important; color: var(--ink) !important; font-weight: 600; }
.takeaway { background: var(--surface) !important; border: 1px solid var(--hair) !important; border-left: 3px solid var(--accent) !important; border-radius: 12px !important; padding: 16px 18px !important; }
.takeaway .eyebrow { color: var(--accent) !important; }
.takeaway ul { color: var(--ink-2) !important; }
.formula { font-size: 15px !important; background: var(--surface2) !important; border: 1px solid var(--hair) !important; border-left: 3px solid var(--s4) !important; border-radius: 12px !important; padding: 14px 18px !important; color: var(--ink) !important; font-family: "JetBrains Mono", monospace !important; }
.formula .where { color: var(--ink-2) !important; font-size: 12.5px !important; font-family: "Inter", sans-serif !important; }
.surface { border-radius: 18px !important; box-shadow: var(--shadow) !important; }
.sources { border-top: 1px solid var(--hair) !important; }
sub, sup { font-size: 11.5px !important; line-height: 0; }

/* ---- readouts --------------------------------------------------------------- */
.readout { grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)) !important; gap: 10px !important; }
.readout > div { background: var(--surface2) !important; border: 1px solid var(--hair); border-radius: 12px !important; padding: 12px 14px !important; min-width: 0; }
.readout .lbl { font: 500 11px "JetBrains Mono", monospace !important; letter-spacing: .1em !important; color: var(--muted) !important; }
.readout .val { font: 700 26px/1.1 "Barlow Condensed", sans-serif !important; color: var(--ink) !important; overflow-wrap: anywhere; }

/* ---- controls --------------------------------------------------------------- */
.controls { border-top: 1px solid var(--hair) !important; gap: 12px 20px !important; padding-top: 14px !important; }
.ctl { min-width: 0; }
.ctl label { font-size: 12.5px !important; color: var(--ink-2) !important; }
.ctl select, .ctl input[type=text], .ctl input[type=number] { border-radius: 10px !important; border: 1px solid var(--line) !important; background: var(--surface2) !important; color: var(--ink) !important; max-width: 100%; min-width: 0; }
.ctl input[type=range] { accent-color: var(--accent); }
.ctl .seg { border-radius: 10px !important; border-color: var(--line) !important; overflow: hidden; }
.ctl .seg button { background: var(--surface2) !important; color: var(--ink-2) !important; font: 600 13px "Barlow Condensed", sans-serif !important; text-transform: uppercase; letter-spacing: .05em; }
.ctl .seg button[aria-pressed=true] { background: var(--accent) !important; color: #07090f !important; }
.transport { gap: 9px !important; margin-top: 12px !important; flex-wrap: wrap !important; }
.transport button, .transport select, .transport input { border-radius: 999px !important; border: 1px solid var(--line) !important; background: var(--surface2) !important; color: var(--ink) !important; font: 600 14px "Barlow Condensed", sans-serif !important; text-transform: uppercase; letter-spacing: .06em; padding: 8px 14px !important; min-width: 0 !important; max-width: 100%; }
.transport button.primary { background: var(--accent) !important; color: #07090f !important; border-color: transparent !important; }
.transport button:hover { background: var(--surface) !important; }
.transport button.primary:hover { filter: brightness(1.08); }
.transport .clock { color: var(--muted) !important; font: 500 12.5px "JetBrains Mono", monospace !important; }
.legend { font-size: 13px !important; color: var(--ink-2) !important; }
.tip { background: #1d2436 !important; color: #fff !important; border-radius: 10px !important; border: 1px solid var(--line); }

/* ---- narrow screens --------------------------------------------------------- */
@media (max-width: 1080px) {
  .shell { grid-template-columns: 1fr !important; padding: 0 20px; }
  .rail { position: static !important; height: auto !important; max-height: none; border-right: 0 !important; border-bottom: 1px solid var(--hair) !important; flex-direction: row !important; flex-wrap: wrap; align-items: center; gap: 10px !important; padding: 12px 0 !important; }
  .rail nav { flex-direction: row !important; flex-wrap: wrap; }
  .rail .legendnote { display: none; }
  .sport-head, .model-grid { grid-template-columns: 1fr !important; }
  .sport-head .surface { max-width: 320px; }
}