/* theme.css — the SHARED design tokens for every League Model site (football, baseball, basketball to come).
 * Lives in leaguemodel-infra/assets, served at /theme.css, deployed by ci/deploy_switcher.sh next to /responsive.css.
 * A site links it FIRST (before its own stylesheet) and reads only these variables; nothing here is a layout rule.
 * The DESIGN LANGUAGE block (glass surfaces + 3D edges) is the part every sport must share - see the note at that block.
 *
 * WHY (audit 2026-09-27, operator ruling): the baseball sheet carried 20 font sizes (6.5–25px, most text at 8–9.5px),
 * two families (a mono for numbers used as body text 337 times), 45 hard-coded colours that dodged the theme picker, and
 * gaps / paddings / radii picked per element. One scale, one family, one grid — so the three sports read as one product
 * and a phone can actually read them.
 *
 * ---- THEME ----------------------------------------------------------------------------------------------------------
 * Two hues, two intensities, saved per account by the site's theme.js (unchanged): --h base, --h2 accent, --si / --ai
 * saturation multipliers, --lb ground lightness. Everything chrome-coloured is hsl(var(--h) …); everything active is
 * hsl(var(--h2) …). SEMANTIC colours are NOT themed — a probability band or a volatility tier must never retint. */
:root {
  --h: 192; --h2: 258; --si: 0; --ai: 1; --lb: 1;   /* --si 0 = BLACK, the default base on every site (operator ruling 2026-09-28); theme.js applies a saved theme */

  /* ---- one family ----------------------------------------------------------------------------------------------
   * Plus Jakarta Sans (variable 200–800, self-hosted by each site) for EVERYTHING. Figures use tabular numerals
   * (the face ships tnum) so columns align exactly as the old mono did. --font-num is kept as an alias so a rule
   * that wants "this is a number" still says so — it resolves to the same family plus tnum via .num / --tnum. */
  --font-ui: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-num: var(--font-ui);
  --tnum: 'tnum' 1, 'lnum' 1;

  /* ---- type scale (7 steps + one chip size). 11px is the floor for anything a person reads; --t-2xs is for
   * chips / units / tick labels ONLY. Line heights are unitless so they scale with the step. ------------------- */
  --t-2xs: 10px;   --lh-2xs: 1.25;
  --t-xs:  11px;   --lh-xs:  1.35;
  --t-sm:  12px;   --lh-sm:  1.4;
  --t-base: 13px;  --lh-base: 1.45;
  --t-md:  14.5px; --lh-md:  1.4;
  --t-lg:  17px;   --lh-lg:  1.3;
  --t-xl:  22px;   --lh-xl:  1.2;
  --t-2xl: 30px;   --lh-2xl: 1.1;
  /* weights: labels 400/500, figures 500/600, names + headline numbers 700/800 */
  --w-reg: 400; --w-med: 500; --w-semi: 600; --w-bold: 700; --w-black: 800;
  /* tracking for small caps labels (the old mono relied on its own width for this) */
  --track-label: .08em; --track-tight: -.02em;

  /* ---- spacing, 4px grid ------------------------------------------------------------------------------------- */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px;
  /* row rhythm: a table row is --row tall, a card pads --pad, cards sit --gap apart */
  --row: 44px; --row-dense: 36px; --pad: var(--s4); --pad-dense: var(--s3); --gap: var(--s3);

  /* ---- radius: chips, rows / inputs, cards ------------------------------------------------------------------- */
  --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-pill: 999px;

  /* ---- surfaces (themed) ------------------------------------------------------------------------------------- */
  --bg:    hsl(var(--h) calc(26% * var(--si)) calc(5% * var(--lb)));
  --pnl:   hsl(var(--h) calc(22% * var(--si)) calc(8.5% * var(--lb)));      /* card */
  --pnl-2: hsl(var(--h) calc(22% * var(--si)) calc(12% * var(--lb)));       /* raised: chip, input, row hover */
  --pnl-3: hsl(var(--h) calc(24% * var(--si)) calc(16% * var(--lb)));       /* pressed / active neutral */
  --ln:        hsl(var(--h) calc(20% * var(--si)) 20% / .55);              /* hairline */
  --ln-strong: hsl(var(--h) calc(20% * var(--si)) 30% / .8);              /* card edge, focus */
  --shadow: 0 1px 0 hsl(var(--h) calc(40% * var(--si)) 70% / .06) inset, 0 8px 24px hsl(var(--h) calc(40% * var(--si)) 2% / .35);
  --shadow-sm: 0 1px 2px hsl(var(--h) calc(40% * var(--si)) 2% / .6);

  /* ---- text (themed) ----------------------------------------------------------------------------------------- */
  --tx: hsl(var(--h) calc(30% * var(--si)) 96%);                            /* primary */
  --d1: hsl(var(--h) calc(14% * var(--si)) 66%);                            /* secondary (was 62% — lifted for phones) */
  --d2: hsl(var(--h) calc(12% * var(--si)) 48%);                            /* muted   (was 42% — lifted for phones) */

  /* ---- accent (themed) --------------------------------------------------------------------------------------- */
  --ac:  hsl(var(--h2) calc(92% * var(--ai)) 62%);
  --ac2: hsl(var(--h2) calc(82% * var(--ai)) 68%);
  --ac-soft: hsl(var(--h2) calc(90% * var(--ai)) 60% / .14);               /* active pill fill, watch row wash */
  --ac-ink: hsl(var(--h) calc(40% * var(--si)) 6%);                         /* text on a solid accent */

  /* ---- semantic (NOT themed) --------------------------------------------------------------------------------- */
  --pos: #2fd39a; --neg: #ff5f7e; --wrn: #ffc857; --neg2: #c2415c;
  --pos-soft: hsl(160 60% 45% / .16); --neg-soft: hsl(348 90% 65% / .16); --wrn-soft: hsl(42 95% 60% / .16);
  --gold: #e6b422; --gold-soft: hsl(44 80% 52% / .16);                     /* one gold (was 4) */
  --info: #5eb8ff; --info-2: #4aa3d8; --info-soft: hsl(205 90% 60% / .14); /* cold / under / fav (was 5 blues) */
  --heat: #e07a3c;                                                          /* hot zone */
  /* starter volatility tiers (rail colour) */
  --v1: hsl(190 88% 58%); --v2: hsl(160 70% 52%); --v3: hsl(42 94% 60%); --v4: hsl(12 90% 62%);
  /* read grade — the measured band grade a board row carries (live from the sport's grader). Reserved here so every
   * sport's board speaks the same colour: strong = lifts above its own P, lean = slight lift, neutral = no lift,
   * fade = under water on the fresh record. Not the volatility tiers, not pos/neg. */
  /* lean is YELLOW (operator 2026-09-27), so strong and lean never read as the same green */
  --read-strong: #2fd39a; --read-lean: #ffc857; --read-neutral: hsl(var(--h) calc(14% * var(--si)) 66%); --read-fade: #ff8fa5;
  --read-strong-soft: hsl(160 60% 45% / .14); --read-lean-soft: hsl(42 95% 60% / .10); --read-fade-soft: hsl(348 90% 65% / .10);
  /* a hitter's own record against his P (grader bar |z| >= 2): beats it = blue, trails it = orange */
  --rec-up: #5eb8ff; --rec-dn: hsl(22 95% 60%);

  /* ---- DESIGN LANGUAGE: surfaces + edges (operator 2026-09-27: "all sites to match in design language and elements")
   * Every sport's sheet paints its own markup with THESE, never its own numbers, so a card, a bar, a pill and a chip look
   * the same on baseball, football and basketball. All from the account's BASE colour (--h / --si), so they follow the theme.
   *   GLASS   panel = every top-level card · bar = header bars and control strips (a step more solid) · tile = a card
   *           inside a panel (no blur of its own). Blur is switched off on touch screens by /responsive.css.
   *   EDGES   "every pill or box element has a 3D border, minimal but noticeable": a visible side edge, a lit top edge,
   *           a dark bottom lip, an inner sheen + shade. box = panels, cards, rows (with a soft drop); pill = segmented
   *           controls and buttons (no long drop); chip = coloured tags (inner sheen + shade only, their colour untouched). */
  --g-panel: linear-gradient(168deg, hsl(var(--h) calc(22% * var(--si)) 15% / .66), hsl(var(--h) calc(24% * var(--si)) 8% / .74));
  --g-panel-blur: blur(26px) saturate(1.35);
  --g-bar: linear-gradient(168deg, hsl(var(--h) calc(22% * var(--si)) 15% / .72), hsl(var(--h) calc(24% * var(--si)) 8% / .8));
  --g-bar-blur: blur(20px);
  --g-tile: hsl(var(--h) calc(20% * var(--si)) 13% / .6);
  --e-side: hsl(var(--h) calc(30% * var(--si)) 58% / .20);
  --e-top: hsl(var(--h) calc(35% * var(--si)) 80% / .34);
  --e-bot: hsl(var(--h) calc(30% * var(--si)) 2% / .9);
  --e-in: inset 0 1px 0 hsl(var(--h) calc(40% * var(--si)) 92% / .07), inset 0 -1px 0 hsl(0 0% 0% / .3);
  --e-box: var(--e-in), 0 1px 0 hsl(0 0% 0% / .35), 0 16px 30px -20px hsl(0 0% 0% / .95);
  --e-pill: var(--e-in), 0 1px 0 hsl(0 0% 0% / .4);
  --e-chip: inset 0 1px 0 hsl(0 0% 100% / .13), inset 0 -1px 0 hsl(0 0% 0% / .28);

  /* ---- motion ------------------------------------------------------------------------------------------------ */
  --ease: cubic-bezier(.2, .7, .2, 1); --dur: .15s;
}

/* ---- base: every site inherits these; a site's own sheet adds layout only --------------------------------------- */
html { font-size: 16px; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { font-family: var(--font-ui); font-size: var(--t-base); line-height: var(--lh-base); color: var(--tx); font-weight: var(--w-reg);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
/* figures: tabular numerals wherever a number sits in a column */
.num, td, th, .stat, .pct, .odds, .score, [data-num] { font-variant-numeric: tabular-nums lining-nums; font-feature-settings: var(--tnum); }
/* small caps labels (column heads, section eyebrows) */
.label, th, .eyebrow { font-size: var(--t-xs); font-weight: var(--w-med); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--d2); }
/* code-ish tokens (zone ids, pitch codes) — same face, medium weight, a little tracking; NOT a mono */
.code { font-weight: var(--w-med); letter-spacing: .04em; }
/* iOS zooms any input under 16px on focus — never let a control fall below it on touch screens */
@media (hover: none) and (pointer: coarse) { input:not([type=range]):not([type=checkbox]):not([type=radio]), select, textarea { font-size: max(16px, var(--t-base)); } }
/* honour the OS setting */
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ---- thin collapsible breaks (planc-52): the shared /collapse.js marks a site's section headings; these are the only styles --------
 * A heading gets a chevron and folds what it owns. Transparent and thin: it never adds a box, only a 1px hairline (@line / .lm-cl-bar). */
[class*="lm-cl-hide"] { display: none !important; }
.lm-cl-h { cursor: pointer; -webkit-user-select: none; user-select: none; }
.lm-cl-h:hover { color: var(--tx); }
.lm-cl-h:focus-visible { outline: 1px dashed var(--ac); outline-offset: 3px; }
.lm-cl-chev { display: inline-block; flex: none; width: 6px; height: 6px; margin: 0 8px 3px 2px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg); opacity: .75; transition: transform var(--dur) var(--ease); vertical-align: middle; }
.lm-cl-shut > .lm-cl-chev { transform: rotate(-45deg); margin-bottom: 0; }
.lm-cl-h:hover > .lm-cl-chev { color: var(--ac); opacity: 1; }
.lm-cl-line, .lm-cl-bar { display: flex; align-items: center; }
.lm-cl-line::after, .lm-cl-bar::after { content: ''; flex: 1; height: 1px; margin-left: 10px; background: linear-gradient(90deg, var(--ln), transparent); }
.lm-cl-shut.lm-cl-line::after, .lm-cl-shut.lm-cl-bar::after { background: linear-gradient(90deg, color-mix(in srgb, var(--ac) 45%, transparent), transparent); }
.lm-cl-bar { height: 20px; margin: var(--s4) 0 var(--s2); font-family: var(--font-num); font-size: var(--t-2xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--d2); background: transparent; }
@keyframes lm-cl-deny { 0%, 100% { transform: none; } 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
.lm-cl-deny { animation: lm-cl-deny .28s ease-in-out; color: var(--ac) !important; }