/* ============================================================================
   The Lab Analytics — shared site stylesheet (theme system v1)
   ----------------------------------------------------------------------------
   Single source of truth for the site-wide design system (the 2026-07 "NCAAF"
   look): design tokens, base typography, the canonical site header, and shared
   components (pagetabs, panels, tables, crumbs).

   RULES OF THE ROAD
   - Served at /assets/site.css, referenced as /assets/site.css?v=N where N is
     site_theme.THEME_VERSION. Bump the version constant on ANY change here so
     Cloudflare/browser caches roll over. Purge /assets/site.css on deploy.
   - Linking this file = adopting the system (square corners, dark palette,
     Hanken/JetBrains). Do NOT link it from legacy-theme pages until they are
     intentionally migrated (task #2).
   - Page-SPECIFIC rules stay in each generator's own <style> block, which is
     emitted AFTER this link — so equal-specificity page rules win ties, and
     page !important beats shared !important. That is intentional.
   - The !important flags below are load-bearing: they let this file win over
     older non-!important inline <style> blocks that still ship on migrated
     pages (see generate_team_pages_espn.py, whose legacy block precedes the
     page-local block). Do not strip them until every legacy block is gone.
   - Source of truth lives in the repo at assets/site.css; deploy copies it to
     /var/www/thelabanalytics/assets/site.css.
   ========================================================================== */

/* ── Design tokens ────────────────────────────────────────────────────────── */
:root{
  --bg:#050505;--card:#0d0d0d;--card2:#101012;--panel:#080808;
  --rule:#232323;--rule-soft:#161616;--rule-strong:#2e2e2e;
  --ink:#F8FAFC;--ink2:#cbd5e1;--ink3:#94A3B8;--ink4:#64748B;
  --primary:#2273c5;--primary-h:#4a94de;--green:#22C55E;--red:#EF4444;
  --accent:#2273c5;
  --accent-bright:color-mix(in srgb,var(--accent) 60%,#ffffff 40%);
  --sans:'Hanken Grotesk',-apple-system,system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --header-offset:110px; /* fixed header height; pagetabs stick below it */
}

/* ── Base ─────────────────────────────────────────────────────────────────── */
html,body{background:var(--bg)!important;}
body{font-family:var(--sans)!important;color:var(--ink2)!important;font-size:14px!important;font-weight:400!important;letter-spacing:-0.005em;line-height:1.5;}
*,*::before,*::after{border-radius:0!important;}
a{color:var(--primary);text-decoration:none;} a:hover{color:var(--primary-h);text-decoration:none;}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums lining-nums;}

/* ── Canonical site header ────────────────────────────────────────────────
   Two layers:
   1. "Skin" overrides (from the team-page _NCAAF_STYLE block) that restyle a
      header whatever emitted it.
   2. Full standalone rules matching unify_site_headers.py's inline-styled
      output, so a page emitting site_theme.header() renders the canonical
      header with NO post-processing. While unify still runs it rewrites the
      markup with identical inline values — a visual no-op. When every
      generator emits site_theme.header(), retire unify.                    */
/* position:sticky (in flow), NOT fixed — header takes its own height, so content is
   never covered no matter how many rows the nav wraps to on mobile. No spacer needed. */
.site-header{background:#020202!important;border-bottom:1px solid var(--rule)!important;position:sticky!important;top:0!important;width:100%!important;z-index:9999!important;box-sizing:border-box!important;}
.site-header-inner{padding:14px 24px 0!important;max-width:1100px!important;margin:0 auto!important;}
.site-header-top{display:flex!important;align-items:center!important;justify-content:space-between!important;margin-bottom:12px!important;padding:0!important;}
.site-header .header-brand{display:flex!important;align-items:center!important;gap:12px!important;}
.site-header .header-logo{height:40px!important;width:auto!important;display:block!important;}
.site-header h1{font-family:var(--sans)!important;font-size:19px!important;font-weight:800!important;letter-spacing:-0.01em!important;color:var(--ink)!important;margin:0!important;padding:0!important;line-height:1.2!important;}
.site-header h1 a{color:var(--ink)!important;text-decoration:none!important;font-weight:inherit!important;}
.site-header h1 .brand-sub{color:var(--ink4)!important;font-weight:400!important;font-size:11px!important;letter-spacing:2.5px!important;text-transform:uppercase!important;margin-left:8px!important;}
.site-header h1 .sport{color:var(--ink3)!important;font-weight:400!important;letter-spacing:-0.005em!important;}
.site-header h1 .sep{color:var(--ink4)!important;font-weight:300!important;margin:0 8px!important;}
.site-header .season-tag{font-family:var(--mono)!important;font-size:10px!important;font-weight:500!important;letter-spacing:0.06em!important;padding:3px 8px!important;text-transform:uppercase!important;background:var(--card)!important;color:var(--ink3)!important;border:1px solid var(--rule)!important;display:inline-block!important;}
.header-nav{display:flex!important;gap:0!important;border-top:1px solid var(--rule-soft)!important;margin:0 -24px!important;padding:0 24px!important;align-items:stretch!important;flex-wrap:wrap!important;}
.header-nav a{font-family:var(--sans)!important;font-size:11.5px!important;letter-spacing:0.04em!important;font-weight:500!important;padding:10px 16px!important;text-transform:uppercase!important;color:var(--ink3)!important;text-decoration:none!important;border-bottom:1px solid transparent!important;position:relative!important;}
.header-nav a:hover,.header-nav a.here{color:var(--primary)!important;}
.header-nav a.here{box-shadow:inset 0 -1.5px 0 var(--primary)!important;}
/* Sticky header sits in flow, so the spacer is obsolete — hide any that linger
   (unify no longer emits one). --header-offset still positions sticky sub-bars
   (.pagetabs / predictions filter bar). */
[data-header-spacer]{display:none!important;}

/* ── Breadcrumb ───────────────────────────────────────────────────────────── */
.crumb{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink4);margin-bottom:12px;}
.crumb a{color:var(--ink4);}

/* ── Sticky section tabs (pagetabs) + tab views ───────────────────────────── */
.pagetabs{position:sticky;top:var(--header-offset);z-index:40;display:flex;flex-wrap:wrap;margin-bottom:16px;background:var(--panel);border:1px solid var(--rule);border-top:2px solid var(--accent);box-shadow:0 10px 24px -18px rgba(0,0,0,.9);}
.ptab{padding:13px 20px;font-family:var(--sans);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--ink4);background:none;border:none;border-bottom:2px solid transparent;cursor:pointer;}
.ptab:hover{color:var(--ink2);background:rgba(255,255,255,.03);}
.ptab.active{color:var(--accent-bright);border-bottom-color:var(--accent);}
.container>.view{display:none;} .container>.view.active{display:block;}

/* ── Panels ───────────────────────────────────────────────────────────────── */
.panel{background:var(--card);border:1px solid var(--rule);overflow:hidden;min-width:0;margin-bottom:16px;}
.panel-head{padding:12px 15px;font-size:11px;font-weight:700;color:var(--accent-bright);border-bottom:1px solid var(--rule);text-transform:uppercase;letter-spacing:.11em;background:var(--panel);display:flex;align-items:center;}
.panel-head::before{content:"";width:3px;height:12px;background:var(--accent);margin-right:9px;flex:none;}

/* ── Tables ───────────────────────────────────────────────────────────────── */
.tbl-wrap{overflow-x:auto;}
th{background:var(--panel)!important;color:var(--ink4)!important;font-family:var(--sans)!important;font-size:10.5px!important;text-transform:uppercase;letter-spacing:.03em!important;padding:9px 11px!important;border-bottom:1px solid var(--rule)!important;font-weight:600!important;}
td{padding:8px 11px!important;font-size:13px!important;border-bottom:1px solid var(--rule-soft)!important;color:var(--ink2)!important;font-variant-numeric:tabular-nums;}
td:first-child{color:var(--ink)!important;}
tr:nth-child(even){background:transparent!important;}
tbody tr:hover{background:var(--rule-soft)!important;}

/* keep centered layout from shifting when scrollbar appears (2026-07-13) */
html{scrollbar-gutter:stable;overflow-y:scroll}