/* ==========================================================================
   Sports Index — "Terminal Light" tokens (design_handoff_terminal_light).
   Loaded site-wide, right after Pico. Light values are the handoff's exact
   literals. Every grey is the ink colour at an alpha, so dark mode only has
   to flip --tl-ink-rgb and the surfaces.

   Theme switch: html.si-light = light (site default); no class = dark.
   base.html's head script and siToggleTheme() own the class and persist it
   to localStorage['si-theme'].
   ========================================================================== */

@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/static/fonts/InterVariable.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: italic; font-weight: 100 900; font-display: swap; src: url('/static/fonts/InterVariable-Italic.woff2') format('woff2'); }
@font-face { font-family: 'Roboto Mono'; font-style: normal; font-weight: 100 700; font-display: swap; src: url('/static/fonts/robotomono-Variable.ttf') format('truetype'); }

:root {
  /* ---- Ink. rgb list so alphas can be derived: rgba(var(--tl-ink-rgb), a) ---- */
  --tl-ink-rgb: 16, 20, 24;
  --tl-ink: rgb(var(--tl-ink-rgb));
  --tl-ink-90: rgba(var(--tl-ink-rgb), 0.9);
  --tl-ink-75: rgba(var(--tl-ink-rgb), 0.75);
  --tl-ink-70: rgba(var(--tl-ink-rgb), 0.7);
  --tl-ink-65: rgba(var(--tl-ink-rgb), 0.65);
  --tl-ink-62: rgba(var(--tl-ink-rgb), 0.62);   /* inactive nav text */
  --tl-ink-60: rgba(var(--tl-ink-rgb), 0.6);    /* secondary copy, links */
  --tl-ink-55: rgba(var(--tl-ink-rgb), 0.55);   /* inactive segmented text */
  --tl-ink-50: rgba(var(--tl-ink-rgb), 0.5);    /* meta, sub-labels, column heads */
  --tl-ink-45: rgba(var(--tl-ink-rgb), 0.45);   /* mono kickers, timestamps */
  --tl-ink-40: rgba(var(--tl-ink-rgb), 0.4);    /* non-top rank numbers */
  --tl-ink-35: rgba(var(--tl-ink-rgb), 0.35);   /* flat-move dash, dimmed bars */
  --tl-line-20: rgba(var(--tl-ink-rgb), 0.2);   /* SOON tag outline */
  --tl-line-18: rgba(var(--tl-ink-rgb), 0.18);  /* dashed chips, odds underdog bar */
  --tl-line-15: rgba(var(--tl-ink-rgb), 0.15);  /* idle progress dots */
  --tl-line-14: rgba(var(--tl-ink-rgb), 0.14);  /* dashed sidebar card */
  --tl-line-12: rgba(var(--tl-ink-rgb), 0.12);  /* button outlines */
  --tl-line-10: rgba(var(--tl-ink-rgb), 0.1);   /* inputs, chips */
  --tl-line-08: rgba(var(--tl-ink-rgb), 0.08);
  --tl-line-07: rgba(var(--tl-ink-rgb), 0.07);  /* card border, band bottom rule */
  --tl-line-06: rgba(var(--tl-ink-rgb), 0.06);  /* rules under card headers */
  --tl-line-05: rgba(var(--tl-ink-rgb), 0.05);  /* dividers between rows */
  --tl-fill-07: rgba(var(--tl-ink-rgb), 0.07);  /* active sidebar conference */
  --tl-fill-06: rgba(var(--tl-ink-rgb), 0.06);  /* active nav bg */
  --tl-fill-05: rgba(var(--tl-ink-rgb), 0.05);  /* segmented track, league pill */
  --tl-fill-045: rgba(var(--tl-ink-rgb), 0.045);/* spotlight / own-row band */
  --tl-fill-04: rgba(var(--tl-ink-rgb), 0.04);  /* sidebar hover */
  --tl-fill-035: rgba(var(--tl-ink-rgb), 0.035);/* expanded row panel */
  --tl-fill-03: rgba(var(--tl-ink-rgb), 0.03);  /* row hover, search bg */
  --tl-fill-025: rgba(var(--tl-ink-rgb), 0.025);/* table column-head strip */

  /* ---- Surfaces ---- */
  --tl-page: #f4f5f7;                 /* page background */
  --tl-card: #fafafb;                 /* card surface as a solid colour */
  --tl-card-bg: #fafafb;              /* card background shorthand (a gradient in dark) */
  --tl-control: #ffffff;              /* controls on cards, active segment, "next" rows */
  --tl-header-glass: rgba(244, 245, 247, 0.88);
  --tl-logo-chip: #eceef1;            /* round tile behind small crests */
  --tl-on-ink: #ffffff;               /* text on an ink button or chip */
  --tl-ink-hover: #000000;            /* ink button hover */
  --tl-tooltip-bg: #101418;           /* dark tooltip in both themes */
  --tl-tooltip-ink: #ffffff;

  /* ---- Semantic ---- */
  --tl-up: #15803d;        /* rank up, HIT, live status text */
  --tl-up-bg: rgba(22, 163, 74, 0.1);
  --tl-live: #22c55e;      /* live dot */
  --tl-live-strong: #16a34a;
  --tl-down: #c42b2b;      /* rank down, MISS, losses */
  --tl-down-bg: rgba(220, 38, 38, 0.08);
  --tl-pro: #0088d1;       /* PRO tag text: the one blue */
  --tl-pro-line: rgba(0, 168, 255, 0.5);
  --tl-pro-ring: #00a8ff;  /* sidebar points ring */

  /* ---- Type ---- */
  --tl-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --tl-mono: 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ---- Radii ---- */
  --tl-r-card: 10px;
  --tl-r-btn: 8px;
  --tl-r-chip: 7px;
  --tl-r-pill: 6px;
  --tl-r-seg-in: 5px;
  --tl-r-tag: 4px;

  /* ---- Shadows ---- */
  --tl-card-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 1px 2px rgba(16, 20, 24, 0.035);
  --tl-card-shadow-hover: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 12px 28px -16px rgba(16, 20, 24, 0.3);
  --tl-float-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(16, 20, 24, 0.07), 0 1px 2px rgba(16, 20, 24, 0.04), 0 12px 24px -16px rgba(16, 20, 24, 0.18);
  --tl-seg-on-shadow: 0 1px 2px rgba(16, 20, 24, 0.12), 0 0 0 1px rgba(16, 20, 24, 0.05);
  --tl-pick-shadow: inset 0 0 0 1.5px var(--tl-ink), 0 10px 24px -14px rgba(16, 20, 24, 0.35);
  --tl-focus-ring: 0 0 0 2px var(--tl-page), 0 0 0 4px var(--tl-ink);

  /* ---- Pixel field ---- */
  --tl-field-rgb: 16, 20, 24;
  --tl-field-opacity: 0.13;
  --tl-field-opacity-banner: 0.16;
  --tl-field-opacity-edges: 0.10;

  /* ---- Motion ---- */
  --tl-ease: cubic-bezier(0.2, 0.8, 0.2, 1);   /* the only easing curve */

  /* ---- Layout ---- */
  --tl-topbar-h: 56px;
  --tl-sidebar-w: 232px;
}

/* ---- Dark (README "Dark mode": real tokens, not the prototype's invert) ---- */
html:not(.si-light) {
  color-scheme: dark;
  --tl-ink-rgb: 242, 244, 246;                 /* ink #f2f4f6 */
  --tl-page: #14171b;
  --tl-card: #25282c;                          /* solid equivalent of .075 white on the page */
  --tl-card-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.02));
  --tl-control: rgba(255, 255, 255, 0.08);
  --tl-header-glass: rgba(20, 23, 27, 0.86);
  --tl-logo-chip: rgba(255, 255, 255, 0.1);
  --tl-on-ink: #101418;
  --tl-ink-hover: #ffffff;
  --tl-tooltip-bg: #f2f4f6;
  --tl-tooltip-ink: #101418;

  --tl-up: #22c55e;
  --tl-up-bg: rgba(34, 197, 94, 0.14);
  --tl-down: #ef4444;
  --tl-down-bg: rgba(239, 68, 68, 0.14);
  --tl-pro: #38bdf8;

  --tl-card-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 1px 2px rgba(0, 0, 0, 0.4);
  --tl-card-shadow-hover: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 12px 28px -16px rgba(0, 0, 0, 0.8);
  --tl-float-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 0 0 1px rgba(255, 255, 255, 0.08), 0 12px 24px -16px rgba(0, 0, 0, 0.8);
  --tl-seg-on-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.08);
  --tl-pick-shadow: inset 0 0 0 1.5px var(--tl-ink), 0 10px 24px -14px rgba(0, 0, 0, 0.8);

  --tl-field-rgb: 232, 236, 240;
  --tl-field-opacity: 0.10;
  --tl-field-opacity-banner: 0.12;
  --tl-field-opacity-edges: 0.08;
}

/* ---- Pico bridge. Pico is still loaded; any of its styles that leak onto a
   control (buttons, groups, inputs, links, focus rings) must read as ink,
   never Pico blue. html[data-theme] outranks Pico's own :root/[data-theme]
   declarations; the tokens above already flip for dark. ---- */
html[data-theme] {
  --pico-font-family: var(--tl-font);
  --pico-font-family-monospace: var(--tl-mono);
  --pico-background-color: var(--tl-page);
  --pico-color: var(--tl-ink);
  --pico-muted-color: var(--tl-ink-50);
  --pico-muted-border-color: var(--tl-line-07);
  --pico-primary: var(--tl-ink);
  --pico-primary-background: var(--tl-ink);
  --pico-primary-border: var(--tl-ink);
  --pico-primary-underline: var(--tl-line-20);
  --pico-primary-hover: var(--tl-ink);
  --pico-primary-hover-background: var(--tl-ink-hover);
  --pico-primary-hover-border: var(--tl-ink-hover);
  --pico-primary-hover-underline: var(--tl-ink);
  --pico-primary-focus: var(--tl-line-20);
  --pico-primary-inverse: var(--tl-on-ink);
  --pico-secondary: var(--tl-ink-60);
  --pico-secondary-background: var(--tl-fill-06);
  --pico-secondary-border: var(--tl-line-12);
  --pico-secondary-hover: var(--tl-ink);
  --pico-secondary-hover-background: var(--tl-fill-05);
  --pico-secondary-hover-border: var(--tl-line-18);
  --pico-secondary-focus: var(--tl-line-20);
  --pico-secondary-inverse: var(--tl-ink);
  --pico-contrast: var(--tl-ink);
  --pico-contrast-background: var(--tl-ink);
  --pico-contrast-inverse: var(--tl-on-ink);
  --pico-form-element-background-color: var(--tl-control);
  --pico-form-element-selected-background-color: var(--tl-fill-06);
  --pico-form-element-border-color: var(--tl-line-10);
  --pico-form-element-color: var(--tl-ink);
  --pico-form-element-placeholder-color: var(--tl-ink-45);
  --pico-form-element-active-background-color: var(--tl-control);
  --pico-form-element-active-border-color: var(--tl-ink);
  --pico-form-element-focus-color: var(--tl-line-20);
  --pico-switch-background-color: var(--tl-line-18);
  --pico-switch-checked-background-color: var(--tl-ink);
  --pico-switch-color: var(--tl-control);
  --pico-range-thumb-color: var(--tl-ink);
  --pico-range-active-border-color: var(--tl-ink);
  --pico-group-box-shadow: none;
  --pico-group-box-shadow-focus-with-button: none;
  --pico-group-box-shadow-focus-with-input: none;
  --pico-card-background-color: var(--tl-card);
  --pico-card-sectioning-background-color: var(--tl-card);
  --pico-card-box-shadow: var(--tl-card-shadow);
  --pico-dropdown-background-color: var(--tl-card);
  --pico-dropdown-border-color: var(--tl-line-07);
  --pico-dropdown-hover-background-color: var(--tl-fill-04);
  --pico-modal-overlay-background-color: rgba(0, 0, 0, 0.32);
  --pico-text-selection-color: var(--tl-line-20);
  --pico-mark-background-color: var(--tl-fill-06);
  --pico-mark-color: var(--tl-ink);
  --pico-ins-color: var(--tl-up);
  --pico-del-color: var(--tl-down);
  --pico-code-background-color: var(--tl-fill-04);
  --pico-code-color: var(--tl-ink);
  --pico-table-border-color: var(--tl-line-05);
  --pico-table-row-stripped-background-color: var(--tl-fill-025);
}

/* ---- Pico element resets that change shape, not just colour. Placed here
   (right after Pico, before page CSS) at Pico's own specificity, so they
   cancel Pico by source order while every page class rule still wins. ---- */
/* role=button on a non-button: Pico paints it as a centred primary button. */
[role="button"] {
  padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none;
  color: inherit; font: inherit; line-height: inherit; text-align: inherit;
}
/* aria-busy: Pico injects a spinner and forces nowrap. The design uses
   skeletons, so the attribute stays purely semantic. */
[aria-busy="true"]:not(input, select, textarea, html, form)::before { content: none !important; display: none !important; }
[aria-busy="true"]:not(input, select, textarea, html, form) { white-space: inherit !important; }