/* ============================================================
   Legacy Manager — SATURDAY NIGHT LIGHTS design system
   (College football is played on Saturdays.)
   Ported verbatim from the approved v4 prototype
   (02_friday_night_broadcast_v4.html). Page sections are
   scoped under #page-<route>; each Django template's root is
   <section id="page-<route>" class="page active">.
   Django-integration primitives appended at the end.
   ============================================================ */


/* ======================== SHELL / DESIGN SYSTEM ======================== */

/* ============================================================
   SATURDAY NIGHT LIGHTS — Legacy Manager design system
   All tokens, components, and the animation engine live here.
   Page authors reuse these classes (see CATALOG.md).
   ============================================================ */

/* ---- TOKENS : dark (default) ---- */
:root{
  --bg:#0A0E14; --panel:#121821; --panel-2:#161E2B;
  --line:#26324A; --line-bright:#34456A;
  --accent:#1E6FFF; --accent-bright:#4A8BFF;
  --on-accent:#fff;                          /* text ON an accent fill (primary buttons) */
  --live:#FFB02E; --win:#37D67A; --loss:#FF5C5C; --gold:#E6C15A; --rare:#A78BFA;
  --on-loss:#1a0606;                         /* text ON a --loss fill (the notification badge): 6.47:1 (white was ~3.0:1) */
  --ink:#FFFFFF; --ink-2:#C4D0E4; --dim:#8294B4; --mute:#5A6B8C;

  /* per-team accent (drives chips, your-rows, GOTW glow). @CTROB = Alabama crimson */
  --me:#9E1B32;

  /* surfaces tuned per theme */
  --header-bg:rgba(10,14,20,.72);
  --glass:rgba(18,24,33,.66);
  --shadow-card:0 1px 0 rgba(255,255,255,.02), 0 12px 28px -18px rgba(0,0,0,.8);
  --shadow-lift:0 1px 0 rgba(255,255,255,.04), 0 22px 44px -20px rgba(0,0,0,.85);
  --zebra:rgba(255,255,255,.018);
  --hover-row:rgba(30,111,255,.07);
  --scrim:rgba(8,11,16,.66);

  /* radii / spacing rhythm */
  --r-sm:7px; --r:11px; --r-lg:16px; --r-xl:22px;
  --pad:clamp(16px,3.5vw,28px);
  --maxw:1320px;

  /* type */
  --disp:"Saira Condensed",ui-sans-serif,system-ui,sans-serif;
  --body:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;

  /* easing + motion */
  --ease-out-quint:cubic-bezier(.22,1,.36,1);
  --ease-out-expo:cubic-bezier(.16,1,.3,1);

  /* z-scale (semantic, never arbitrary) */
  --z-base:1; --z-raised:5; --z-dropdown:40; --z-sticky:60;
  --z-scrim:80; --z-drawer:90; --z-toast:120;

  /* docked Wire height: 48 desktop (fixed bottom); 46 on phones (fixed top), set in the TICKER block */
  --ticker-h:48px;
}

/* ---- TOKENS : light ("studio day") ---- */
:root[data-theme="light"]{
  /* softened 2026-07-05 — pure #FFF panels were blinding; warm the whites */
  --bg:#E7ECF4; --panel:#F7F9FC; --panel-2:#EEF2F8;
  --line:#D3DCEC; --line-bright:#BBC8E0;
  --accent:#1E6FFF; --accent-bright:#0F58E0;
  --live:#C97A00; --win:#16965A; --loss:#D43B3B; --gold:#A9802A; --rare:#7C5CE0;
  --on-loss:#fff;                            /* white on the light --loss: 4.68:1 */
  --ink:#0B1424; --ink-2:#33425C; --dim:#5E6E8C; --mute:#8595B0;
  --me:#9E1B32;

  --header-bg:rgba(238,242,248,.74);
  --glass:rgba(255,255,255,.7);
  --shadow-card:0 1px 0 rgba(255,255,255,.6), 0 10px 24px -18px rgba(20,40,80,.32);
  --shadow-lift:0 1px 0 rgba(255,255,255,.7), 0 22px 40px -20px rgba(20,40,80,.34);
  --zebra:rgba(13,30,60,.022);
  --hover-row:rgba(30,111,255,.06);
  --scrim:rgba(20,32,56,.34);
}

/* ---- SKIN : CFB27 (EA College Football 27 broadcast chrome) ----
   Activated by <html data-skin="cfb27"> (set from settings.THEME_PRESET via the
   current_tenant context processor). The original look = data-skin "fnb"/absent.
   This block ONLY adds rules under [data-skin="cfb27"], so FNB v4 is untouched.
   Final hexes from docs/cfb27_alignment.html; tune during the render check. */
:root[data-skin="cfb27"]{
  --bg:#090b10; --panel:#161b24; --panel-2:#1b2230;
  --line:#222b3a; --line-bright:#33415c;
  --accent:#46b8ea; --accent-bright:#6fcef5;     /* cyan — the ◆ diamond accent */
  --on-accent:#04131d;                           /* dark ink on the light cyan: 8.3:1 (white was 2.3:1) */
  --ink:#FFFFFF; --ink-2:#c2cede; --dim:#8493a8; --mute:#6a7a96;
  --header-bg:rgba(9,11,16,.84);
  --glass:rgba(22,27,36,.7);
  --scrim:rgba(5,7,11,.7);

  /* CFB27 currency + economy category palette (additive; FNB ignores these) */
  --ds-points:#46b8ea;   /* ◆ Legacy/Dynasty points */
  --cat-staff:#3f73e6; --cat-fac:#cf2f97;
  --cat-recruit:#f0892a; --cat-roster:#f6b81f;
  --cat-un:#5A6B8C;      /* unspent DP — muted slate */

  /* fallback team-band colors when no coach/team is bound */
  --team-1:#11233f; --team-2:#46b8ea;
}

/* CFB27 skin — LIGHT mode ("studio day"). MUST out-specify the cfb27 dark token
   block above (0,2,1 > 0,1,1), otherwise the day/night toggle does nothing under
   the active skin — the equal-specificity dark skin tokens were winning by source
   order, which is why "there was no light mode". Generic --win/--loss/--gold/--me
   come from :root[data-theme="light"]; only the skin-owned tokens are redeclared here. */
:root[data-skin="cfb27"][data-theme="light"]{
  /* softened 2026-07-05 — pure #FFF panels were blinding; warm the whites */
  --bg:#E8EDF5; --panel:#F7F9FC; --panel-2:#EDF2F8;
  --line:#D2DCEC; --line-bright:#BAC8E0;
  --accent:#0E7AAE; --accent-bright:#0A5E87;        /* deeper cyan: readable on white */
  --on-accent:#fff;                                 /* white on the deep cyan: 4.8:1 */
  --ink:#0B1424; --ink-2:#33425C; --dim:#566683; --mute:#8090AC;
  --header-bg:rgba(238,243,249,.82);
  --glass:rgba(255,255,255,.72);
  --scrim:rgba(20,32,56,.34);
  --ds-points:#0E7AAE;                              /* ◆ diamond, deeper for contrast */
  --cat-staff:#2f5fd0; --cat-fac:#b81f83;
  --cat-recruit:#cf6f12; --cat-roster:#b8860b;
  --cat-un:#98A6C2;      /* unspent DP — muted slate, lighter for day */
  --team-1:#cdd9ea; --team-2:#0E7AAE;
}

/* CFB27 type tell: condensed all-caps on eyebrow/kicker labels and table headers only.
   NOTE: This codebase uses page-scoped eyebrow/kicker classes (no bare .eyebrow/.kicker).
   Body copy stays Inter sentence-case (NOT applied to paragraphs or td cells). */
:root[data-skin="cfb27"] .sb-eyebrow,
:root[data-skin="cfb27"] .bk-eyebrow,
:root[data-skin="cfb27"] .pwr-eyebrow,
:root[data-skin="cfb27"] .mc-kicker,
:root[data-skin="cfb27"] .hist-kicker,
:root[data-skin="cfb27"] .rh-kicker,
:root[data-skin="cfb27"] .rc-kicker,
:root[data-skin="cfb27"] .cd-kicker,
:root[data-skin="cfb27"] .cn-kicker,
:root[data-skin="cfb27"] .ep-kicker,
:root[data-skin="cfb27"] .gh-kicker,
:root[data-skin="cfb27"] thead th{
  font-family:var(--disp);
  text-transform:uppercase;
  letter-spacing:.04em;
}

/* ◆ currency utility — used by the band now, by economy chips later. */
:root[data-skin="cfb27"] .ds-pts::before{
  content:"\25C6";              /* ◆ */
  color:var(--ds-points);
  margin-right:.28em;
  font-size:.82em;
}

/* Header band — hidden everywhere except the CFB27 skin. */
.cfb27-band{display:none}
:root[data-skin="cfb27"] .cfb27-band{
  display:flex; align-items:center; gap:12px;
  padding:10px clamp(16px,3.5vw,28px);
  font-family:var(--disp); text-transform:uppercase; letter-spacing:.03em;
  color:#fff;
  background:
    linear-gradient(115deg, transparent 0 38%, rgba(255,255,255,.16) 42%, transparent 46%),
    linear-gradient(90deg, var(--team-1,#11233f), color-mix(in oklab, var(--team-1,#11233f) 55%, var(--team-2,#46b8ea)));
  border-bottom:2px solid var(--team-2,#46b8ea);
}
:root[data-skin="cfb27"] .cfb27-band__logo{height:26px;width:26px;object-fit:contain}
:root[data-skin="cfb27"] .cfb27-band__name{font-weight:900;font-size:1.05rem}
:root[data-skin="cfb27"] .cfb27-band__sub{font-weight:600;opacity:.82;font-size:.82rem}

*{box-sizing:border-box}
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--body); font-size:15px; line-height:1.5;
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
  transition:background-color .5s var(--ease-out-quint), color .5s var(--ease-out-quint);
}
/* ambient broadcast wash */
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(900px 520px at 82% -8%, color-mix(in oklab,var(--accent) 16%, transparent), transparent 60%),
    radial-gradient(760px 480px at 6% 2%, color-mix(in oklab,var(--me) 12%, transparent), transparent 62%);
  opacity:.9; transition:opacity .5s var(--ease-out-quint);
}
:root[data-theme="light"] body::before{ opacity:.45; }

a{color:inherit; text-decoration:none}
button{font-family:inherit}
img{max-width:100%}
:focus-visible{ outline:2px solid var(--accent-bright); outline-offset:2px; border-radius:4px; }
::selection{ background:color-mix(in oklab,var(--accent) 40%, transparent); color:#fff; }

/* tabular numerals everywhere numbers appear */
.num,.score,.count,td .v,.lp,.rating{ font-variant-numeric:tabular-nums; }

/* ============================================================
   HEADER / NAV
   ============================================================ */
.hdr{
  position:sticky; top:0; z-index:var(--z-sticky);
  background:var(--header-bg);
  -webkit-backdrop-filter:saturate(160%) blur(16px);
  backdrop-filter:saturate(160%) blur(16px);
  border-bottom:1px solid var(--line);
}
.hdr::after{ /* hairline of accent light */
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px;
  background:linear-gradient(90deg,transparent,color-mix(in oklab,var(--accent) 55%,transparent),transparent);
  opacity:.5;
}
.hdr-in{
  max-width:var(--maxw); margin:0 auto; padding:0 var(--pad);
  height:62px; display:flex; align-items:center; gap:8px;
}
.brand{ display:flex; align-items:center; gap:11px; cursor:pointer; margin-right:6px; flex:0 0 auto; }
.brand-mark{
  width:36px; height:36px; display:grid; place-items:center; flex:0 0 auto;
}
.brand-mark img{ width:34px; height:34px; display:block; }
.brand-txt{ display:flex; flex-direction:column; line-height:1; }
.brand-txt b{ font-family:var(--disp); font-weight:800; font-size:18px; letter-spacing:.04em; text-transform:uppercase; }
.brand-txt span{ font-family:var(--disp); font-weight:700; font-size:10.5px; letter-spacing:.34em; color:var(--accent-bright); margin-top:3px; }

/* Top-left marquee = the primary home affordance (replaces the removed
   "⌂ Home" button) — make its clickability obvious via emboss + hover lift. */
.brand:hover .brand-txt b{ color:var(--accent, #1E6FFF); }
.brand-txt b{ font-weight:900; letter-spacing:.2px; text-shadow:0 1px 0 rgba(0,0,0,.35), 0 0 14px rgba(30,111,255,.25); }
.brand-mark{ filter:drop-shadow(0 2px 6px rgba(30,111,255,.35)); transition:transform .12s ease; }
.brand:hover .brand-mark{ transform:translateY(-1px) scale(1.03); }

.nav{ display:flex; align-items:center; gap:2px; margin-left:4px; }
.nav-link, .nav-trigger{
  position:relative; display:inline-flex; align-items:center; gap:7px;
  height:62px; padding:0 13px; background:none; border:0; cursor:pointer;
  font-family:var(--disp); font-weight:700; font-size:14px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-2); white-space:nowrap;
  transition:color .2s var(--ease-out-quint);
}
.nav-link:hover,.nav-trigger:hover{ color:var(--ink); }
.nav-link::after,.nav-trigger::after{ /* animated underline */
  content:""; position:absolute; left:13px; right:13px; bottom:14px; height:2px; border-radius:2px;
  background:var(--accent-bright); transform:scaleX(0); transform-origin:left;
  transition:transform .26s var(--ease-out-expo);
}
.nav-link:hover::after,.nav-trigger:hover::after,
.nav-link[aria-current="page"]::after,.nav-group.open .nav-trigger::after,
.nav-trigger.is-active::after,.nav-link.is-active::after{ transform:scaleX(1); }
.nav-link[aria-current="page"],.nav-trigger.is-active,.nav-link.is-active{ color:var(--ink); }
.nav-trigger .caret{ width:9px; height:9px; transition:transform .26s var(--ease-out-expo); opacity:.7; }
.nav-group.open .nav-trigger .caret{ transform:rotate(180deg); }

/* ===== Team Selection nav spotlight =====================================
   Only rendered while a cycle is in-flight (context: selection_spotlight);
   the flag auto-clears when results are applied, so this reverts on its own. */
.nav-spotlight{
  height:38px; align-self:center; margin:0 4px; padding:0 16px; gap:8px;
  border-radius:999px; color:var(--accent-bright);
  background:color-mix(in oklab,var(--accent) 15%,transparent);
  border:1px solid color-mix(in oklab,var(--accent) 48%,var(--line));
  box-shadow:0 6px 18px -12px color-mix(in oklab,var(--accent) 90%,#000);
  transition:background-color .2s var(--ease-out-quint), border-color .2s, transform .16s, box-shadow .2s; }
.nav-spotlight::after{ display:none; }                 /* it's a pill, not an underline link */
.nav-spotlight:hover{ color:#fff; background:var(--accent); border-color:var(--accent);
  transform:translateY(-1px); box-shadow:0 10px 22px -12px color-mix(in oklab,var(--accent) 95%,#000); }
.nav-spotlight.is-active{ color:#fff; background:var(--accent); border-color:var(--accent); }
.nav-spotlight-dot{ width:7px; height:7px; border-radius:50%; flex:0 0 auto;
  background:var(--live); box-shadow:0 0 8px var(--live); animation:pulse 1.5s ease-in-out infinite; }
.nav-spotlight:hover .nav-spotlight-dot,.nav-spotlight.is-active .nav-spotlight-dot{
  background:#fff; box-shadow:0 0 8px rgba(255,255,255,.9); }
/* mobile dock — Selection slot reads as accent even when idle, with a live pip */
.dock-spotlight{ color:var(--accent-bright); }
.dock-spotlight .dock-lb{ font-weight:800; }
.dock-spotlight::after{ content:""; position:absolute; top:8px; left:calc(50% + 8px);
  width:6px; height:6px; border-radius:50%; background:var(--live); box-shadow:0 0 6px var(--live);
  animation:pulse 1.5s ease-in-out infinite; }
/* mobile drawer — prominent direct link above the accordions */
.drawer-spotlight{ display:flex !important; align-items:center; gap:10px;
  margin:10px 0; padding:13px 14px; border-radius:var(--r);
  background:color-mix(in oklab,var(--accent) 14%,transparent);
  border:1px solid color-mix(in oklab,var(--accent) 42%,var(--line)) !important;
  color:var(--accent-bright) !important; font-family:var(--disp); font-weight:800;
  font-size:16px; letter-spacing:.05em; text-transform:uppercase; }
@media (prefers-reduced-motion: reduce){
  .nav-spotlight-dot,.dock-spotlight::after{ animation:none; } }

/* ===== League-TV, the marquee (s151, Rob 2026-10-18: "give it a dedicated button") ==========
   The bar CTA where Rules stood: a gradient-ringed pill with a filled play badge. The chrome
   promises 0 queries, so there is no live state to show: a play glyph, never the pulsing live dot.
   At rest it sits under the Commish pill's glow (ring + badge only, panel fill); it lifts on hover.
   Its box is pinned at (0,4,0): the bar's width rungs (`.nav-link{ padding }`, incl. the
   `.hdr-in:has(.nav-book) .nav-link` 8 px rung) must never re-pad the badge off-center. */
.nav-tv{
  height:38px; align-self:center; gap:8px;
  border-radius:999px; color:var(--ink); border:1px solid transparent;
  background:
    linear-gradient(100deg,color-mix(in oklab,var(--accent) 16%,var(--panel-2)),var(--panel-2) 70%) padding-box,
    linear-gradient(100deg,var(--accent-bright),color-mix(in oklab,var(--accent) 30%,var(--line))) border-box;
  transition:transform .16s, box-shadow .2s, color .2s; }
.hdr-in .nav .nav-link.nav-tv{ margin:0 3px; padding:0 13px 0 4px; }
.nav-tv::after{ display:none; }                         /* a pill, not an underline link */
.ntv-ic{ width:26px; height:26px; border-radius:50%; display:grid; place-items:center; flex:0 0 auto;
  color:var(--on-accent); background:linear-gradient(140deg,var(--accent-bright),var(--accent));
  box-shadow:0 2px 8px -3px color-mix(in oklab,var(--accent) 80%,transparent);
  transition:transform .2s var(--ease-out-quint); }
.ntv-ic svg{ width:12px; height:12px; margin-left:2px; display:block; }
.ntv-min{ display:none; }
/* The short form, "TV" (s151 header-fit sweep, measured with the longest names): every header at
   1024-1239, and at every width the widest header: the cycle pill + 4 + TV + the Sportsbook beside
   the Commish pill (an admin, in a cycle, Lines on). The full "<League>-TV" stays in the pill's
   title and the drawer row. */
@media (min-width:1024px) and (max-width:1239px){
  .nav-tv .ntv-full{ display:none; }
  .nav-tv .ntv-min{ display:inline; } }
.hdr-in:has(.nav-book):has(.nav-spotlight):has(.hdr-pill) .nav-tv .ntv-full{ display:none; }
.hdr-in:has(.nav-book):has(.nav-spotlight):has(.hdr-pill) .nav-tv .ntv-min{ display:inline; }
.nav-tv:hover{ transform:translateY(-1px); box-shadow:0 10px 22px -12px color-mix(in oklab,var(--accent) 95%,#000); }
.nav-tv:hover .ntv-ic{ transform:scale(1.07); }
.nav-tv.is-active{
  background:
    linear-gradient(100deg,color-mix(in oklab,var(--accent) 30%,var(--panel-2)),color-mix(in oklab,var(--accent) 10%,var(--panel-2))) padding-box,
    linear-gradient(100deg,var(--accent-bright),var(--accent)) border-box; }
.nav-tv:focus-visible{ outline:2px solid var(--accent-bright); outline-offset:2px; }
@media (prefers-reduced-motion: reduce){ .nav-tv, .nav-tv:hover, .nav-tv:hover .ntv-ic{ transform:none; } }

/* dropdown — fixed-positioned so it never clips inside the header */
.nav-group{ position:relative; }
.menu{
  position:fixed; z-index:var(--z-dropdown); min-width:230px;
  background:var(--panel); border:1px solid var(--line-bright); border-radius:var(--r);
  box-shadow:var(--shadow-lift); padding:7px;
  opacity:0; transform:translateY(-8px) scale(.97); transform-origin:top left;
  pointer-events:none; visibility:hidden;
  transition:opacity .18s var(--ease-out-quint), transform .22s var(--ease-out-expo), visibility 0s linear .22s;
}
.menu.open{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; visibility:visible; transition-delay:0s; }
.menu a{
  display:flex; align-items:center; gap:10px; padding:9px 11px; border-radius:8px;
  font-family:var(--body); font-weight:600; font-size:14px; color:var(--ink-2); letter-spacing:0; text-transform:none;
  transition:background-color .15s, color .15s;
}
.menu a:hover{ background:var(--hover-row); color:var(--ink); }
.menu a .mi{ width:7px; height:7px; border-radius:50%; background:var(--mute); flex:0 0 auto; }
.menu a:hover .mi{ background:var(--accent-bright); }
.menu a small{ margin-left:auto; color:var(--dim); font-size:11.5px; font-weight:600; }
/* LP Leaderboard = Legacy Points; promoted to the top of the Legacy menu */
.menu a.lp-hot, .acc-body a.lp-hot{
  color:var(--accent, #1E6FFF); font-weight:800;
  box-shadow:inset 0 0 0 1px rgba(30,111,255,.35); border-radius:8px;
}
.menu a.lp-hot .mi, .acc-body a.lp-hot .mi{ background:var(--accent, #1E6FFF); }
/* small live ● indicator (USDA-TV menu item / nav) */
.live-dot{ width:7px; height:7px; border-radius:50%; background:var(--live); box-shadow:0 0 8px var(--live);
  flex:0 0 auto; animation:pulse 1.5s ease-in-out infinite; }
.menu a .live-dot, .drawer-nav > a .live-dot{ margin-left:auto; }
@media (prefers-reduced-motion: reduce){ .live-dot{ animation:none; } }

.hdr-right{ margin-left:auto; display:flex; align-items:center; gap:10px; }

/* theme toggle */
.theme-toggle{
  position:relative; width:38px; height:38px; border-radius:10px; cursor:pointer;
  background:var(--panel-2); border:1px solid var(--line); display:grid; place-items:center;
  color:var(--ink-2); transition:border-color .2s, color .2s, background-color .2s;
}
.theme-toggle:hover{ border-color:var(--line-bright); color:var(--ink); }
.theme-toggle svg{ width:18px; height:18px; position:absolute; transition:opacity .3s var(--ease-out-quint), transform .4s var(--ease-out-expo); }
.theme-toggle .i-sun{ opacity:0; transform:rotate(-90deg) scale(.6); }
.theme-toggle .i-moon{ opacity:1; transform:rotate(0) scale(1); }
:root[data-theme="light"] .theme-toggle .i-sun{ opacity:1; transform:rotate(0) scale(1); }
:root[data-theme="light"] .theme-toggle .i-moon{ opacity:0; transform:rotate(90deg) scale(.6); }

/* My Hub button — a real header control, team-tinted via per-chip --me.
   Carries the team LOGO + ABBREV + "My Hub" on ONE line; never wraps.
   Sits beside the theme-toggle / logout icon buttons (Rob, 2026-07-18). */
.hub-btn{
  display:inline-flex; align-items:center; gap:9px; height:44px; padding:0 15px 0 9px; border-radius:12px;
  flex:0 0 auto; white-space:nowrap; cursor:pointer; font-family:var(--disp);
  background:color-mix(in oklab,var(--me) 20%, var(--panel-2));
  border:1px solid color-mix(in oklab,var(--me) 52%, var(--line));
  transition:border-color .2s, background-color .2s, transform .15s var(--ease-out-quint);
}
.hub-btn:hover{
  border-color:color-mix(in oklab,var(--me) 72%, var(--line));
  background:color-mix(in oklab,var(--me) 27%, var(--panel-2)); transform:translateY(-1px);
}
.hub-btn:focus-visible{ outline:2px solid color-mix(in oklab,var(--me) 60%, var(--accent-bright)); outline-offset:1px; }
/* team logo (or a team-coloured initial chip when there's no logo/it 404s) */
.hub-btn .hub-logo{ width:28px; height:28px; flex:0 0 auto; object-fit:contain; border-radius:6px;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.45)); }
.hub-btn .hub-logo-ph{ display:none; place-items:center; object-fit:unset;
  background:color-mix(in oklab,var(--me) 80%, var(--ink)); color:#fff;
  font-weight:800; font-size:14px; text-shadow:0 1px 1px rgba(0,0,0,.4); }
.hub-btn .hub-logo-ph.show{ display:grid; }
.hub-btn .hub-ab{ font-weight:800; font-size:15.5px; letter-spacing:.03em; text-transform:uppercase; color:var(--ink); }
.hub-btn .hub-tx{ font-weight:700; font-size:12.5px; letter-spacing:.05em; text-transform:uppercase;
  padding-left:9px; border-left:1px solid color-mix(in oklab,var(--me) 42%, var(--line));
  color:color-mix(in oklab,var(--me) 44%, var(--ink)); }
.hub-btn .hub-tx{ line-height:1; }

/* hamburger (mobile) */
.burger{ display:none; width:38px; height:38px; border-radius:10px; background:var(--panel-2);
  border:1px solid var(--line); color:var(--ink); cursor:pointer; place-items:center; }
.burger svg{ width:20px; height:20px; }

/* ===== Nav S3 (2026-10-13): brand split, header-right pills, account menu =====
   Brand: the riveted mark + LEGACYCFB wordmark go to "/" (s60); the league line under the
   wordmark is its OWN link to the league home, capped in width (audit D15). Grid, not nested
   links: the mark is a second "/" link hidden from AT and the tab order. */
.brand-box{ display:grid; grid-template-columns:36px auto; column-gap:11px; align-items:center;
  flex:0 0 auto; margin-right:6px; }
.brand-box .brand{ margin-right:0; }
.brand-logo{ display:grid; place-items:center; }
.brand-box .brand-logo:hover .brand-mark{ transform:translateY(-1px) scale(1.03); }
.brand-box.has-league{ grid-template-rows:auto auto; row-gap:3px; }
.brand-box.has-league .brand-logo{ grid-row:1 / 3; }
.brand-league{ grid-column:2; grid-row:2; display:block; max-width:var(--brand-league-w, 78px);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; line-height:1;
  font-family:var(--disp); font-weight:700; font-size:10.5px; letter-spacing:.34em; color:var(--accent-bright); }
.brand-league:hover, .brand-league[aria-current="page"]{ color:var(--ink); }
.drawer-h .brand-txt span{ max-width:200px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* Commish pill (admins): icon + label; icon-only at <=420. s147 (Rob 2026-10-13: "a bit faint,
   particularly on desktop"): an accent-tinted fill, an accent border and a soft accent glow, label at
   full ink. Color only: its box (38px / 0 13px / 13px type) is what the header-fit sweep measured. */
.hdr-pill{ display:inline-flex; align-items:center; gap:7px; height:38px; padding:0 13px; border-radius:999px;
  flex:0 0 auto; white-space:nowrap; font-family:var(--disp); font-weight:800; font-size:13px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink);
  background:color-mix(in oklab,var(--accent) 22%,var(--panel-2));
  border:1px solid color-mix(in oklab,var(--accent) 64%,var(--line));
  box-shadow:0 0 14px -4px color-mix(in oklab,var(--accent) 60%,transparent);
  transition:border-color .2s, color .2s, background-color .2s, box-shadow .2s; }
.hdr-pill:hover, .hdr-pill[aria-current="page"]{ color:var(--ink);
  background:color-mix(in oklab,var(--accent) 34%,var(--panel-2)); border-color:var(--accent-bright);
  box-shadow:0 0 18px -3px color-mix(in oklab,var(--accent) 75%,transparent); }
.hdr-pill-ic{ display:none; width:17px; height:17px; flex:0 0 auto; }   /* the label carries it above 420 */
/* Account button: a person glyph, never the team initial (spec §3.2: it sits beside the hub chip) */
.acct-btn{ position:relative; width:38px; height:38px; border-radius:50%; display:grid; place-items:center; cursor:pointer;
  background:var(--panel-2); border:1px solid var(--line); color:var(--ink-2);
  transition:border-color .2s, color .2s; }
.acct-btn:hover, .nav-group.open .acct-btn{ color:var(--ink); border-color:var(--line-bright); }
.acct-btn svg{ width:20px; height:20px; }
/* Notification center (s151): the count on the person icon + the menu row's inline count. No animation. */
.acct-badge{ position:absolute; top:-3px; right:-3px; min-width:17px; height:17px; padding:0 4px; box-sizing:border-box;
  border-radius:9px; font:800 10.5px/17px var(--body); font-variant-numeric:tabular-nums; text-align:center;
  background:var(--loss); color:var(--on-loss); box-shadow:0 0 0 2px var(--header-bg); pointer-events:none; }
.acct-count{ display:inline-block; min-width:17px; height:17px; padding:0 5px; box-sizing:border-box; border-radius:9px;
  font:800 10.5px/17px var(--body); font-variant-numeric:tabular-nums; text-align:center;
  background:var(--loss); color:var(--on-loss); }
.menu a small.acct-count{ margin-left:auto; color:var(--on-loss); font-size:10.5px; font-weight:800; }   /* beats `.menu a small` */
.acct-btn:focus-visible, .hdr-pill:focus-visible{ outline:2px solid var(--accent-bright); outline-offset:1px; }
/* the account menu: rows share the dropdown look; forms and buttons render as rows */
.menu-account{ min-width:248px; max-width:calc(100vw - 16px); max-height:calc(100vh - 80px); overflow-y:auto; overscroll-behavior:contain; }
.menu .acct-form{ margin:0; }
.menu .menu-btn{ display:flex; align-items:center; gap:10px; width:100%; padding:9px 11px; border-radius:8px;
  background:none; border:0; cursor:pointer; text-align:left;
  font-family:var(--body); font-weight:600; font-size:14px; color:var(--ink-2); }
.menu .menu-btn:hover{ background:var(--hover-row); color:var(--ink); }
.menu .menu-btn .mi{ width:7px; height:7px; border-radius:50%; background:var(--mute); flex:0 0 auto; }
.menu .menu-btn small{ margin-left:auto; color:var(--dim); font-size:11.5px; font-weight:600; }
.menu a:focus-visible, .menu .menu-btn:focus-visible{ outline:2px solid var(--accent-bright); outline-offset:-2px; }
.acct-id{ display:flex; flex-direction:column; gap:2px; padding:8px 11px 10px; margin-bottom:4px;
  border-bottom:1px solid var(--line); line-height:1.25; }
.acct-id b{ font-family:var(--disp); font-weight:800; font-size:15px; letter-spacing:.02em; color:var(--ink);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.acct-id span{ font-size:12px; color:var(--dim); }
.acct-id em{ align-self:flex-start; margin-top:3px; padding:1px 7px; border-radius:999px; font-style:normal;
  font-size:10.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:var(--accent-bright); border:1px solid color-mix(in oklab,var(--accent) 45%,var(--line)); }
.acct-sec{ padding:8px 11px 2px; font-family:var(--disp); font-weight:800; font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--mute); }
.acct-rule{ height:1px; margin:5px 4px; background:var(--line); }
.menu .t-light{ display:none; }
:root[data-theme="light"] .menu .t-dark{ display:none; }
:root[data-theme="light"] .menu .t-light{ display:inline; }
@media (display-mode: standalone){ .nav-install{ display:none !important; } }   /* installed: useless */

/* ============================================================
   LAYOUT : page sections + transitions
   ============================================================ */
#app{ position:relative; z-index:var(--z-base); }
.page{
  max-width:var(--maxw); margin:0 auto; padding:clamp(20px,3vw,34px) var(--pad) 90px;
}
.page[hidden]{ display:none; }
/* Defensive: the `hidden` attribute is our universal JS toggle (modals, edit rows,
   collapsible forms). Element-scoped display rules (e.g. #page-myclass .mc-modal-scrim
   {display:grid}) beat the UA `[hidden]{display:none}` on specificity, which left the
   Edit-Recruit modal stuck open and dimming the page. Force it so `hidden` always wins. */
[hidden]{ display:none !important; }
/* page transition: incoming slides up + fades */
.page.active{ animation:pageIn .34s var(--ease-out-expo) both; }
@keyframes pageIn{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } }
/* outgoing handled by JS via .leaving (down + out, faster) */
.page.leaving{ animation:pageOut .18s var(--ease-out-quint) both; }
@keyframes pageOut{ from{ opacity:1; transform:none; } to{ opacity:0; transform:translateY(10px); } }

/* ============================================================
   REVEAL / COUNT / BAR animation helpers
   ============================================================ */
.reveal{ opacity:0; transform:translateY(14px); }
.reveal.in{ opacity:1; transform:none; transition:opacity .5s var(--ease-out-quint), transform .58s var(--ease-out-expo); }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; }
}

/* ============================================================
   LOWER-THIRD section header
   ============================================================ */
.lower-third{
  display:flex; align-items:flex-end; gap:13px; margin:clamp(26px,4vw,42px) 0 16px;
}
.lower-third:first-child{ margin-top:4px; }
.lower-third .lt-bar{ width:5px; align-self:stretch; min-height:30px; border-radius:3px;
  background:var(--accent); box-shadow:0 0 16px -2px color-mix(in oklab,var(--accent) 80%,transparent); }
.lower-third.is-me .lt-bar{ background:var(--me); box-shadow:0 0 16px -2px color-mix(in oklab,var(--me) 80%,transparent); }
.lower-third h2{ margin:0; font-family:var(--disp); font-weight:800; font-size:clamp(22px,3.2vw,30px);
  letter-spacing:.02em; text-transform:uppercase; line-height:1; }
.lower-third .lt-sub{ color:var(--dim); font-size:13px; font-weight:600; padding-bottom:2px; }
.lower-third .lt-action{ margin-left:auto; padding-bottom:2px; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; gap:8px; height:38px; padding:0 16px; border-radius:10px;
  border:1px solid var(--line-bright); background:var(--panel-2); color:var(--ink);
  font-family:var(--disp); font-weight:700; font-size:13.5px; letter-spacing:.06em; text-transform:uppercase;
  cursor:pointer; transition:transform .12s var(--ease-out-quint), border-color .2s, background-color .2s, box-shadow .2s;
}
.btn:hover{ border-color:var(--accent); transform:translateY(-1px); }
.btn:active{ transform:translateY(0) scale(.98); }
.btn.primary{ background:var(--accent); border-color:var(--accent); color:var(--on-accent);
  box-shadow:0 10px 24px -12px color-mix(in oklab,var(--accent) 90%,#000); }
.btn.primary:hover{ background:var(--accent-bright); border-color:var(--accent-bright); }
.btn.me{ background:var(--me); border-color:var(--me); color:#fff;
  box-shadow:0 10px 24px -12px color-mix(in oklab,var(--me) 90%,#000); }
.btn.me:hover{ filter:brightness(1.08); }
.btn.ghost{ background:transparent; }
.btn.sm{ height:31px; padding:0 12px; font-size:12px; }

/* .lg-join — join/create CTA shared by the directory, create, apply + codes pages
   (was scoped to #page-lgdir, leaving native white buttons everywhere else) */
.lg-join{ font-family:var(--disp); font-weight:700; font-size:12.5px; letter-spacing:.05em;
  text-transform:uppercase; padding:9px 16px; border-radius:var(--r-sm); border:1px solid var(--accent);
  background:var(--accent); color:#fff; cursor:pointer; text-decoration:none; display:inline-block; }
.lg-join:hover{ filter:brightness(1.08); }

/* native checkboxes/radios pick up the brand accent instead of OS white */
input[type="checkbox"], input[type="radio"]{ accent-color:var(--accent); }

/* ============================================================
   PANELS / CARDS
   ============================================================ */
.panel{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--shadow-card); position:relative;
}
.panel.pad{ padding:clamp(15px,2vw,20px); }
.panel-h{ display:flex; align-items:center; gap:10px; padding:14px 16px; border-bottom:1px solid var(--line); }
.panel-h h3{ margin:0; font-family:var(--disp); font-weight:700; font-size:16px; letter-spacing:.05em; text-transform:uppercase; }
.panel-h .ph-r{ margin-left:auto; color:var(--dim); font-size:12.5px; font-weight:600; }
.panel-b{ padding:6px 8px; }

/* generic grid helpers */
.grid{ display:grid; gap:clamp(12px,1.6vw,18px); }
.cols-2{ grid-template-columns:repeat(2,1fr); }
.cols-3{ grid-template-columns:repeat(3,1fr); }
.auto{ grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.stack{ display:flex; flex-direction:column; gap:clamp(12px,1.6vw,18px); }

/* ============================================================
   SCORE-BUG game card (signature component)
   The .bug/.bug-top/.bug-meta card shell was retired (score-bug port 2a-3-fix1,
   Fix round 1 finding 2) — templates/nil/_game_card.html's .game-card/.gc-*
   (above, GAME CARD block) is the only card shell now. The .bug-row* rows
   below are still live: _game_card.html reuses `bug-row` on its own team rows.
   ============================================================ */
.bug-row{ display:flex; align-items:center; gap:11px; padding:5px 0; }
.bug-row + .bug-row{ border-top:1px solid var(--line); }
.bug-row.winner .team-name{ color:var(--ink); }
.bug-row .poss{ width:7px; height:7px; border-radius:50%; background:transparent; flex:0 0 auto; }
.bug-row.has-poss .poss{ background:var(--live); box-shadow:0 0 8px var(--live); animation:pulse 1.6s ease-in-out infinite; }
.team-name{ font-family:var(--disp); font-weight:700; font-size:17px; letter-spacing:.02em; text-transform:uppercase;
  color:var(--ink-2); flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.team-name .seed{ color:var(--dim); font-size:12px; margin-right:5px; font-weight:600; }
.bug-row .score{ font-family:var(--disp); font-weight:800; font-size:25px; letter-spacing:.01em; color:var(--ink-2); min-width:34px; text-align:right; }
.bug-row.winner .score{ color:var(--ink); }

/* ============================================================
   CONF-CHAMP DRESS (shared component)
   Gold conference-title treatment, lifted from the bracket page
   2026-07-09 when conference championships moved off the bracket
   and onto the scoreboard. ONE source of truth: any surface that
   shows a W15 CONF_CHAMP game puts .cc-dress on the card root and
   .cc-champ-tag on the winner's "<Conference> Champion" chip.
   ============================================================ */
.cc-dress{ border-color:color-mix(in oklab,var(--gold) 34%,var(--line)); }
.cc-dress:hover{ border-color:color-mix(in oklab,var(--gold) 55%,var(--line)); }
/* (the .bug.cc-dress::before gold-leaf top edge and .cc-dress .bug-meta title-game
   meta styling were retired with .bug above — score-bug port 2a-3-fix1; the
   scoreboard's own gold dress now lives on .game-card.cc-dress .gc-slot, above) */
/* restrained gold chip naming the crown ("SEC Champion") on the winner row */
.cc-champ-tag{ display:inline-flex; align-items:center; flex:0 0 auto;
  font-family:var(--disp); font-weight:800; font-size:9.5px; letter-spacing:.08em; text-transform:uppercase;
  white-space:nowrap; color:var(--gold); padding:3px 8px; border-radius:999px;
  border:1px solid color-mix(in oklab,var(--gold) 42%,var(--line));
  background:color-mix(in oklab,var(--gold) 12%,var(--panel-2)); }
:root[data-theme="light"] .cc-champ-tag{ color:color-mix(in oklab,var(--gold) 62%,#000000); }

/* team monogram chip — accent driven by --c (set inline per team) */
.mono{
  width:30px; height:30px; border-radius:8px; flex:0 0 auto; display:grid; place-items:center;
  font-family:var(--disp); font-weight:800; font-size:14px; color:#fff; letter-spacing:.01em;
  background:var(--c,var(--accent));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14), 0 4px 10px -6px var(--c,var(--accent));
}
.mono.lg{ width:42px; height:42px; border-radius:10px; font-size:20px; }
.mono.xl{ width:64px; height:64px; border-radius:14px; font-size:30px; }

/* The operator/admin pages (.admin-tools / .lp-audit-page / .sched-preview) reuse the
   class name `.mono` to mean MONOSPACE TEXT, not the team monogram chip above. Without
   this reset the chip geometry leaks in and every eyebrow / help paragraph / table cell
   collapses into a 30px accent-blue grid square with the text overflowing — the admin
   Tools "text collision" bug. Neutralize the chip geometry so it's plain mono text. */
.admin-tools .mono,
.lp-audit-page .mono,
.sched-preview .mono,
#page-dress .mono,
#page-codes .mono{
  display:revert; width:auto; height:auto; min-width:0; border-radius:0; flex:initial;
  place-items:normal; background:none; box-shadow:none; color:inherit;
  font-weight:inherit; font-size:inherit; letter-spacing:inherit;
  font-family:'JetBrains Mono',ui-monospace,Menlo,monospace;
}

/* ============================================================
   TEAM LOGO — real <img> with monogram fallback
   <span class="logo-wrap"><img class="logo" src=… onerror="this.classList.add('is-broken')">
     <span class="logo-ph" style="--lc:#hex">ALA</span></span>
   Sizes: --logo-sz (default 28) or .logo-sm 22 / .logo-md 36 / .logo-lg 44.
   ============================================================ */
.logo-wrap{
  --logo-sz:28px;
  position:relative; display:inline-flex; flex:0 0 auto; align-items:center; justify-content:center;
  width:var(--logo-sz); height:var(--logo-sz); border-radius:7px; overflow:hidden;
  background:var(--panel-2);
}
.logo-wrap.logo-sm{ --logo-sz:22px; border-radius:6px; }
.logo-wrap.logo-md{ --logo-sz:36px; border-radius:8px; }
.logo-wrap.logo-lg{ --logo-sz:44px; border-radius:9px; }
.logo{
  width:100%; height:100%; object-fit:contain; display:block;
  border-radius:inherit; background:transparent;
}
/* monogram fallback — hidden until the <img> errors out (add .is-broken via onerror) */
.logo-ph{
  position:absolute; inset:0; display:none; place-items:center;
  background:var(--lc,var(--accent)); color:var(--lc-on,#fff);
  font-family:var(--disp); font-weight:800; font-size:calc(var(--logo-sz) * .42);
  letter-spacing:.01em; line-height:1; text-transform:uppercase;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
}
.logo.is-broken{ display:none; }
.logo.is-broken + .logo-ph{ display:grid; }
/* if the <img> is omitted entirely, still show the monogram chip */
.logo-wrap > .logo-ph:first-child{ display:grid; }

/* ============================================================
   CREST — THE one team mark (templates/nil/_crest.html)
   Real Team.logo_url when there is one, else a coloured disc carrying the
   label. SIZING is the caller's (a page rule sets `--logo-sz` on .gc-crest /
   .w2-team .crest …); PAINT is here, so a surface cannot grow its own crest
   look. `--lc` is always a safe_hex-validated colour and `--lc-on` its
   on_color ink — both emitted by the partial, never by a call site.
   ============================================================ */
.crest{ border-radius:50%; background:transparent; }
.crest > .logo{ border-radius:inherit; }
.crest > .logo-ph{
  border-radius:50%;
  background:radial-gradient(circle at 35% 30%,
    color-mix(in srgb,var(--lc,var(--accent)) 74%,#fff),
    color-mix(in srgb,var(--lc,var(--accent)) 70%,#000));
  font-size:calc(var(--logo-sz) * .38); letter-spacing:0;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16), 0 0 0 1px rgba(255,255,255,.08);
}

/* ============================================================
   GAME CARD — the scoreboard score bug (templates/nil/_game_card.html)
   Ported from Legacy 2K .game-card/.gc-* (score-bug port 2a). Inks are the
   two CSS vars the card sets inline from {% matchup_colors %}; the light
   theme swaps to the light pair. R7: two solid inks, never a hatch.
   ============================================================ */
.game-card{ position:relative; display:flex; flex-direction:column; min-width:0;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
  box-shadow:var(--shadow-card); scroll-margin-top:80px;
  transition:transform .2s var(--ease-out-expo), border-color .2s, box-shadow .2s;
  --gc-away:var(--gc-away-dark); --gc-home:var(--gc-home-dark); }
:root[data-theme="light"] .game-card{ --gc-away:var(--gc-away-light); --gc-home:var(--gc-home-light); }
.game-card::before{ content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background:var(--accent); opacity:.7; transition:opacity .2s, box-shadow .2s; }
.game-card:hover{ transform:translateY(-3px); border-color:var(--line-bright); box-shadow:var(--shadow-lift); }
.game-card:hover::before{ opacity:1; box-shadow:0 0 16px 1px color-mix(in oklab,var(--accent) 75%,transparent); }
.game-card:target{ border-color:var(--accent);
  box-shadow:0 0 0 1px var(--accent), 0 0 28px color-mix(in oklab,var(--accent) 40%,transparent); }
.game-card.is-gotw::before{ background:var(--me); opacity:1; }
.game-card.is-gotw{ border-color:color-mix(in oklab,var(--me) 45%,var(--line)); }
.game-card.is-upcoming{ opacity:.92; }
.game-card.is-upcoming::before{ background:var(--mute); opacity:.5; }
.game-card.is-unlogged{ border-color:color-mix(in oklab,var(--loss) 45%,var(--line)); box-shadow:inset 4px 0 0 var(--loss); }
.game-card.is-unlogged::before{ background:var(--loss); }
.game-card.cc-dress .gc-slot{ color:var(--gold); }

/* zone 1 : slot · state · chips */
.gc-top{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:10px 14px 0; min-height:34px;
  font-family:var(--disp); font-weight:700; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--mute); }
.gc-slot{ color:var(--dim); font-weight:800; letter-spacing:.08em; }
.gc-st{ color:var(--ink-2); }
.gc-st::before{ content:"·"; margin-right:8px; color:var(--mute); }
.gc-st.sb-not-logged{ color:var(--loss); }
.gc-st-up{ color:var(--mute); }
.gc-st.is-tie{ color:var(--live); }
.gc-pills{ margin-left:auto; display:flex; gap:6px; align-items:center; flex-wrap:wrap; justify-content:flex-end; }
.gc-pills .pill{ height:20px; font-size:10px; padding:0 8px; }
.gc-flag{ font-size:10px; letter-spacing:.04em; border-radius:999px; padding:2px 8px; border:1px solid var(--line); color:var(--ink-2); white-space:nowrap; }
.gc-flag.nailbiter{ color:var(--accent-bright); border-color:color-mix(in oklab,var(--accent) 45%,var(--line)); }
.gc-flag.blowout{ color:var(--loss); border-color:color-mix(in oklab,var(--loss) 40%,var(--line)); }
.gc-flag.shutout{ color:var(--ink); border-color:var(--line-bright); }

/* zone 2 : the Legacy 2K scorebug (s107 iv-b — the grammar the Discord TIER B score card
   settled, Rob 2026-09-22). A narrow wedge of each side's ink off the outer edge with the
   crest ghosted inside it; per side ONE stacked block (crest · ABBR · team · coach · WIN)
   anchored to its outer edge; the two scores flank a bordered FINAL / TIE / SIM pill on a
   vertical hairline. Each side row IS the coach_profile link. `.gc-id` is display:contents
   so its pieces sit on the row's own grid: crest + score on line 1 (score against the
   pill), the rest of the block beneath at full side width — that is what lets the grammar
   fit a ~270px scoreboard column and a 390px phone. Every colour is a matchup_inks var —
   never a stored primary. */
.gc-body{ --gc-wedge:clamp(14px,6%,34px); position:relative; isolation:isolate; width:100%; max-width:640px; margin-inline:auto; padding:10px 0 12px; }
.gc-wedge{ position:absolute; top:0; bottom:0; width:var(--gc-wedge); z-index:-1; pointer-events:none; --wk:var(--gc-away); }
.gc-wedge-a{ left:0; }
.gc-wedge-h{ right:0; --wk:var(--gc-home); }
.gc-wedge svg{ position:absolute; inset:0; width:100%; height:100%; display:block; overflow:visible; }
.gc-wedge polygon{ fill:var(--wk); fill-opacity:.24; }
.gc-wedge line{ stroke:var(--wk); stroke-opacity:.8; stroke-width:2; vector-effect:non-scaling-stroke; }
.gc-ghost{ position:absolute; top:50%; width:120px; height:120px; object-fit:contain; opacity:.1; transform:translateY(-50%); }
.gc-wedge-a .gc-ghost{ left:-34px; }
.gc-wedge-h .gc-ghost{ right:-34px; }
.gc-teams{ display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:start; column-gap:6px;
  padding:0 calc(var(--gc-wedge) + 6px); }
.gc-row{ position:relative; display:grid; align-items:center; column-gap:6px; row-gap:1px; min-width:0; padding:0; border:0;
  text-decoration:none; color:inherit; --tc-ink:var(--gc-away); }
.gc-row.gc-side-a{ grid-template-columns:auto minmax(0,1fr); justify-items:start; text-align:left; }
.gc-row.gc-side-h{ grid-template-columns:minmax(0,1fr) auto; justify-items:end; text-align:right; --tc-ink:var(--gc-home); }
a.gc-row{ cursor:pointer; transition:transform .14s; }
a.gc-row:hover{ transform:translateY(-1px); }
.gc-id{ display:contents; }
.gc-id > *{ grid-column:1 / -1; max-width:100%; min-width:0; }
.gc-side-a .gc-id > .gc-crest{ grid-column:1; grid-row:1; }
.gc-side-a > .score{ grid-column:2; grid-row:1; justify-self:end; }
.gc-side-h > .score{ grid-column:1; grid-row:1; justify-self:start; }
.gc-side-h .gc-id > .gc-crest{ grid-column:2; grid-row:1; }
.gc-crest{ --logo-sz:40px; }
.gc-abbr{ margin-top:7px; overflow:hidden; text-overflow:ellipsis; font-family:var(--disp); font-weight:700; font-size:21px; letter-spacing:.02em;
  text-transform:uppercase; color:var(--tc-ink); line-height:1; white-space:nowrap; }
.gc-abbr .seed{ color:var(--dim); font-size:11.5px; font-weight:600; margin-right:3px; vertical-align:3px; }
.gc-name{ font-size:11.5px; color:var(--dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gc-id .gc-coach{ display:grid; grid-template-columns:auto minmax(0,auto); align-items:center; column-gap:5px; margin-top:3px;
  font-size:11.5px; line-height:1.35; }
.gc-side-h .gc-id .gc-coach{ justify-self:end; justify-content:end; }
.gc-id .gc-coach .nm{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gc-id .gc-coach > span:last-child{ grid-column:1 / -1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--mute); }
.gc-side-h .gc-id .gc-coach > span:last-child{ justify-self:end; }
.gc-row:hover .gc-coach{ color:var(--tc-ink); }
.gc-tags{ display:flex; flex-wrap:wrap; gap:4px; margin-top:6px; }
.gc-side-h .gc-tags{ justify-content:flex-end; }
.gc-win{ display:inline-flex; align-items:center; height:18px; padding:0 9px; border-radius:5px; background:var(--tc-ink); color:var(--panel);
  font-family:var(--disp); font-weight:800; font-size:10.5px; letter-spacing:.14em; line-height:1; }
.gc-home{ display:inline-flex; align-items:center; height:18px; font-family:var(--disp); font-weight:700; font-size:9.5px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--dim); border:1px solid var(--line); border-radius:999px; padding:0 6px; }
.gc-row .score{ min-width:0; font-family:var(--disp); font-weight:800; font-size:36px; line-height:1; letter-spacing:0;
  color:var(--tc-ink); font-variant-numeric:tabular-nums; }
.gc-row.winner .score{ color:var(--tc-ink); }
.gc-row.dimmed .score{ color:var(--mute); }
.gc-row .score.dim{ color:var(--mute); font-weight:700; }
.gc-mid{ align-self:stretch; display:flex; flex-direction:column; align-items:center; }
.gc-mid::before,.gc-mid::after{ content:""; width:1px; background:color-mix(in oklab,var(--ink) 22%,transparent); }
.gc-mid::before{ height:8px; flex:0 0 auto; }
.gc-mid::after{ flex:1 1 auto; min-height:12px; }
.gc-pill{ display:inline-flex; align-items:center; height:24px; padding:0 8px; border:1.5px solid color-mix(in oklab,var(--ink) 22%,transparent);
  border-radius:7px; background:color-mix(in oklab,var(--ink) 5%,var(--panel)); color:var(--dim); white-space:nowrap;
  font-family:var(--disp); font-weight:800; font-size:11px; letter-spacing:.1em; line-height:1; }
.gc-pill.is-tie{ color:var(--ink-2); }
.gc-pill.is-vs{ color:var(--mute); border-style:dashed; }
/* quarter line score — centred beneath the pill, only when a box score exists */
.gc-line{ display:grid; grid-template-columns:auto repeat(5,24px); justify-content:center; column-gap:3px; row-gap:1px;
  width:max-content; max-width:calc(100% - 2 * var(--gc-wedge) - 12px); margin:12px auto 0; font-variant-numeric:tabular-nums; }
.gc-line.is-ot{ grid-template-columns:auto repeat(6,24px); }   /* s124: + the OT column */
.gc-line-h{ padding-bottom:3px; border-bottom:1px solid var(--line); text-align:center; color:var(--mute);
  font-family:var(--disp); font-weight:600; font-size:10.5px; letter-spacing:.06em; }
.gc-line-t{ min-width:0; max-width:84px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding-right:8px; text-align:right;
  font-family:var(--disp); font-weight:700; font-size:13px; letter-spacing:.02em; text-transform:uppercase; line-height:1.5; color:var(--gc-away); }
.gc-line-t.gc-line-hm{ color:var(--gc-home); }
.gc-line-v{ text-align:center; font-family:var(--disp); font-size:14px; font-weight:600; line-height:1.4; color:var(--ink-2); }
.gc-line-v.is-f{ color:var(--ink); font-weight:800; }
.gc-line-v.is-dim{ color:var(--mute); }

/* the coach line base — shared with the box-score page hero (.bx-coach) */
.gc-coach{ display:inline-flex; align-items:center; gap:6px; font-size:12px; line-height:1.4;
  color:var(--dim); justify-self:start; min-width:0; }
.gc-coach .nm{ color:var(--ink-2); font-weight:600; }

/* coach avatar — Coach.avatar_url with initials fallback (R5) */
.av{ --av:18px; display:inline-grid; place-items:center; width:var(--av); height:var(--av); border-radius:50%; flex:0 0 auto;
  background:radial-gradient(120% 120% at 30% 20%,#2A3A58,#161E2B 70%); color:var(--ink-2);
  font-family:var(--disp); font-weight:800; font-size:calc(var(--av) * .42); line-height:1; letter-spacing:.02em; text-transform:uppercase;
  box-shadow:0 0 0 1.5px var(--av-ring,var(--line-bright)); overflow:hidden; vertical-align:middle; }
.av img{ width:100%; height:100%; object-fit:cover; display:block; }

/* zone 3 : rivalry + clamped recap */
.gc-note{ display:flex; flex-direction:column; gap:3px; min-width:0; padding:0 14px 9px; font-size:12px; color:var(--dim); }
.gc-note .sb-rivalry{ display:inline-flex; align-items:center; gap:5px; align-self:flex-start; font-family:var(--disp); font-weight:700;
  font-size:11px; letter-spacing:.04em; text-transform:uppercase; color:var(--live); text-decoration:none; white-space:nowrap; }
.gc-note .sb-rivalry .rec{ color:var(--ink-2); }
.gc-note .sb-rivalry .psn{ text-transform:none; }
.gc-note .sb-rivalry .mt{ color:var(--mute); font-weight:600; letter-spacing:.02em; }
.gc-note .sb-riv-x{ font-size:12px; line-height:1; }
.gc-note-recap{ margin:0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  color:var(--mute); font-style:italic; line-height:1.4; }
/* Watch Game Film (s122) — small secondary links, same muted-block row as rivalry/recap */
.gc-films{ margin:0; display:flex; flex-wrap:wrap; gap:4px 12px; }
.gc-film{ font-family:var(--disp); font-weight:700; font-size:11px; letter-spacing:.02em;
  color:var(--accent-bright); text-decoration:none; white-space:nowrap; }
.gc-film:hover{ text-decoration:underline; }
/* s148 LEGACY BREAKDOWN — the scoreboard card's one-sentence teaser (zone 3) */
.gc-bd{ margin:0; color:var(--ink-2); line-height:1.4; display:-webkit-box; -webkit-line-clamp:3;
  -webkit-box-orient:vertical; overflow:hidden; }
.gc-bd strong{ color:var(--ink); font-weight:700; }

/* zone 4 : the 2K stat table (s107) — away value · rule · STAT NAME · rule · home value,
   raw numbers in each side's ink, hairlines between rows, inside a rounded panel.
   NO BARS (Rob's closed ruling, 2026-09-22). Condensed numerals (the Discord card's face)
   so "5-10 (50%)" fits a ~270px scoreboard column. Else the empty state. */
.gc-stats{ width:calc(100% - 24px); max-width:600px; margin:2px auto 12px; padding:2px 0; border:1px solid var(--line); border-radius:12px;
  background:color-mix(in oklab,var(--panel-2) 90%,transparent); font-variant-numeric:tabular-nums; }
.gc-stat-row{ display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:stretch; min-height:25px; margin:0 8px; }
.gc-stat-row + .gc-stat-row{ border-top:1px solid color-mix(in oklab,var(--line) 75%,transparent); }
.gc-stat-k{ display:flex; align-items:center; justify-content:center; min-width:88px; padding:0 6px;
  border-left:1px solid var(--line); border-right:1px solid var(--line); white-space:nowrap;
  font-family:var(--disp); font-weight:700; font-size:10.5px; letter-spacing:.07em; text-transform:uppercase; color:var(--dim); }
.gc-stat-a,.gc-stat-h{ display:flex; align-items:center; min-width:0; white-space:nowrap;
  font-family:var(--disp); font-size:15px; font-weight:700; letter-spacing:.01em; }
.gc-stat-a{ justify-content:flex-end; padding-right:8px; color:var(--gc-away); }
.gc-stat-h{ justify-content:flex-start; padding-left:8px; color:var(--gc-home); }
.gc-noscore{ display:flex; align-items:center; justify-content:center; gap:6px; min-height:40px; padding:8px 12px; text-align:center;
  font-size:12px; color:var(--mute); border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--panel-2); }
.gc-noscore a{ color:var(--accent-bright); font-weight:600; text-decoration:none; }
.gc-noscore a:hover{ text-decoration:underline; }

/* zone 5 : reactions (open row) + box score / logged */
.gc-foot{ display:flex; align-items:flex-end; gap:8px; flex-wrap:wrap; padding:9px 14px 11px; margin-top:auto; }
.gc-foot .sb-react{ flex:1 1 auto; min-width:0; }
.gc-foot-bs{ margin-left:auto; font:600 12.5px/1 var(--body); color:var(--accent-bright); white-space:nowrap; }
.gc-foot-t{ margin-left:auto; font-family:var(--disp); font-weight:700; font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--mute); white-space:nowrap; }

/* ============================================================
   LEGACY AI™  — branded-AI lockup (spark mark + wordmark; no emoji)
   Reusable via {% include 'nil/_legacy_ai.html' %}. The spark tints to the
   brand accent; the wordmark inherits surrounding text so it blends in copy.
   ============================================================ */
.lai{ display:inline-flex; align-items:baseline; gap:.3em; white-space:nowrap; }
.lai-mark{ align-self:center; flex:0 0 auto; color:var(--accent-bright);
  filter:drop-shadow(0 0 4px color-mix(in srgb, var(--accent-bright) 40%, transparent)); }
.lai-mark path{ fill:currentColor; }
.lai-mark .lai-mark-2{ opacity:.6; }
.lai-wm{ font-weight:700; letter-spacing:.005em; }
.lai-tm{ font-size:.62em; font-weight:600; vertical-align:.45em; opacity:.75; }

/* ============================================================
   PILLS / BADGES
   ============================================================ */
.pill{
  display:inline-flex; align-items:center; gap:6px; height:22px; padding:0 9px; border-radius:999px;
  font-family:var(--disp); font-weight:700; font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  background:var(--panel-2); border:1px solid var(--line); color:var(--ink-2); white-space:nowrap;
}
.pill.live{ color:var(--live); border-color:color-mix(in oklab,var(--live) 45%,var(--line));
  background:color-mix(in oklab,var(--live) 14%,var(--panel-2)); }
.pill.live .dot{ width:7px; height:7px; border-radius:50%; background:var(--live); box-shadow:0 0 8px var(--live);
  animation:pulse 1.5s ease-in-out infinite; }
.pill.final{ color:var(--dim); }
.pill.gotw{ color:var(--me); border-color:color-mix(in oklab,var(--me) 50%,var(--line));
  background:color-mix(in oklab,var(--me) 15%,var(--panel-2)); }
.pill.win{ color:var(--win); border-color:color-mix(in oklab,var(--win) 40%,var(--line));
  background:color-mix(in oklab,var(--win) 12%,var(--panel-2)); }
.pill.loss{ color:var(--loss); border-color:color-mix(in oklab,var(--loss) 40%,var(--line));
  background:color-mix(in oklab,var(--loss) 12%,var(--panel-2)); }
.pill.rank{ color:var(--gold); border-color:color-mix(in oklab,var(--gold) 42%,var(--line));
  background:color-mix(in oklab,var(--gold) 12%,var(--panel-2)); }
.pill.ai{ color:var(--accent-bright); border-color:color-mix(in oklab,var(--accent) 45%,var(--line));
  background:color-mix(in oklab,var(--accent) 13%,var(--panel-2)); }
.pill.bye{ color:var(--mute); }
/* Belt markers. Gold ink off the shared --gold token (already
   theme-aware: #E6C15A dark / #A9802A light) so the belt reads as the same
   object on the LP board and a scoreboard card.
   ON THE HUB HERO the pill also carries `gold`, which hands it the band's
   existing CHAMPION treatment (`:is(.hx-host,#_) .hx .pill.gold` in
   _hx_hero_css.html, solid gold on dark ink). That rule is id-weighted and
   deliberately beats these panel inks — a panel ink is unreadable on a team
   colour band, which is exactly what the first render of this pill showed.
   `filter` is used for the hover so it needs no specificity fight either way. */
.pill.belt-pill{ color:var(--gold); border-color:color-mix(in oklab,var(--gold) 46%,var(--line));
  background:color-mix(in oklab,var(--gold) 14%,var(--panel-2)); }
.pill.belt-pill:hover{ filter:brightness(1.1); }
.pill.belt-chip{ color:var(--gold); border-color:color-mix(in oklab,var(--gold) 42%,var(--line));
  background:color-mix(in oklab,var(--gold) 12%,var(--panel-2)); }
/* The LP-board glyph is an inline mark next to a PSN, not a pill — it must not
   add row height, so it stays at the text baseline with no box. */
.belt-glyph{ margin-left:5px; font-size:.92em; line-height:1; color:var(--gold); }

@keyframes pulse{ 0%,100%{ opacity:1; transform:scale(1); } 50%{ opacity:.45; transform:scale(.78); } }
@media (prefers-reduced-motion: reduce){ .pill.live .dot,.bug-row.has-poss .poss{ animation:none; } }

/* movement arrows */
.mv{ display:inline-flex; align-items:center; gap:2px; font-weight:700; font-size:12.5px; font-variant-numeric:tabular-nums; }
.mv.up{ color:var(--win); }
.mv.down{ color:var(--loss); }
.mv.flat{ color:var(--mute); }
.mv svg{ width:11px; height:11px; }
.mv.up svg,.mv.down svg{ animation:nudge .5s var(--ease-out-expo) both; }
@keyframes nudge{ from{ transform:translateY(var(--ny,3px)); opacity:0; } to{ transform:none; opacity:1; } }
.mv.down svg{ --ny:-3px; }
@media (prefers-reduced-motion: reduce){ .mv svg{ animation:none; } }

/* ============================================================
   STAT CHIPS
   ============================================================ */
.chip{
  display:flex; flex-direction:column; gap:5px; padding:13px 15px; border-radius:var(--r);
  background:var(--panel); border:1px solid var(--line); min-width:0;
}
.chip .k{ font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--dim); }
.chip .v{ font-family:var(--disp); font-weight:800; font-size:clamp(22px,3vw,30px); line-height:1; letter-spacing:.01em; }
.chip .sub{ font-size:12px; color:var(--ink-2); font-weight:500; }

/* progress bar (.bar grows on page show) */
.track{ height:7px; border-radius:999px; background:var(--panel-2); overflow:hidden; border:1px solid var(--line); }
.bar{ height:100%; width:0; border-radius:999px; background:linear-gradient(90deg,var(--accent),var(--accent-bright)); }
.bar.in{ width:var(--w); transition:width .9s var(--ease-out-expo); }
.bar.me{ background:linear-gradient(90deg,var(--me),color-mix(in oklab,var(--me) 55%,#ff7a90)); }
.bar.gold{ background:linear-gradient(90deg,color-mix(in oklab,var(--gold) 70%,#000),var(--gold)); }
@media (prefers-reduced-motion: reduce){ .bar{ width:var(--w); } }

/* ============================================================
   TABLES (standings / LP / power)
   ============================================================ */
.tbl-wrap{ overflow-x:auto; border-radius:var(--r-lg); border:1px solid var(--line); background:var(--panel); }
table.tbl{ width:100%; border-collapse:collapse; min-width:540px; }
.tbl thead th{
  position:sticky; top:0; background:var(--panel-2); z-index:1;
  font-family:var(--disp); font-weight:700; font-size:11.5px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--dim); text-align:left; padding:11px 14px; border-bottom:1px solid var(--line); white-space:nowrap;
}
.tbl thead th.r,.tbl td.r{ text-align:right; }
.tbl thead th.c,.tbl td.c{ text-align:center; }
.tbl tbody td{ padding:12px 14px; border-bottom:1px solid var(--line); font-size:14px; color:var(--ink-2); }
.tbl tbody tr:last-child td{ border-bottom:0; }
.tbl tbody tr:nth-child(even){ background:var(--zebra); }
.tbl tbody tr{ transition:background-color .15s; }
.tbl tbody tr:hover{ background:var(--hover-row); }
.tbl tbody tr.is-me{ background:color-mix(in oklab,var(--me) 11%, transparent); box-shadow:inset 3px 0 0 var(--me); }
.tbl tbody tr.is-me:hover{ background:color-mix(in oklab,var(--me) 16%, transparent); }
.tbl .rk{ font-family:var(--disp); font-weight:800; font-size:16px; color:var(--ink); width:34px; }
.tbl .team-cell{ display:flex; align-items:center; gap:10px; }
.tbl .team-cell b{ font-family:var(--disp); font-weight:700; font-size:15px; letter-spacing:.02em; text-transform:uppercase; color:var(--ink); }
.tbl .v{ font-family:var(--disp); font-weight:700; color:var(--ink); }
.tbl .psn{ color:var(--dim); font-weight:600; font-size:12.5px; }

/* ============================================================
   THE WIRE — bottom-line ticker (s144 redesign, site spec §8.9; Rob 2026-10-12:
   "our logo ... instead of the janky looking text as the lead in ... like an ESPN
   presentation ... slightly larger text"). The riveted-mark lead-in, then ONE flip at a
   time: [category chip] [content] [status]. Fixed to the bottom on desktop, to the top
   on phones (MOBILE section). Markup: templates/nil/_bottomline.html.
   ============================================================ */
.ticker{
  position:fixed; left:0; right:0; bottom:0; z-index:var(--z-sticky);   /* docked to viewport bottom (desktop) */
  border-top:1px solid var(--line-bright); background:linear-gradient(180deg,var(--panel),var(--bg));
  height:var(--ticker-h); display:flex; align-items:center; overflow:hidden; overflow:clip;
}
/* The lead-in: the riveted mark + LEGACY CFB / WIRE · <league>. It is IN-FLOW (the s83 JS
   that measured the old absolutely-placed tag is gone), and a long league tag ellipsizes
   at 118px. The plate stays dark in BOTH themes, so its inks are fixed brand values;
   --w2-acc is the skin accent on dark and the brand blue on light. */
.w2-lead{ --w2-acc:var(--accent-bright); position:relative; flex:0 0 auto; height:100%; display:flex;
  align-items:center; gap:10px; padding:0 26px 0 14px; z-index:3;
  background:linear-gradient(180deg,#222a37 0%,#141922 55%,#0d1117 100%);
  clip-path:polygon(0 0,100% 0,calc(100% - 14px) 100%,0 100%); }
:root[data-theme="light"] .w2-lead{ --w2-acc:#4A8BFF; }
.w2-lead::after{ content:""; position:absolute; top:0; bottom:0; right:0; width:18px;
  background:var(--w2-acc); clip-path:polygon(14px 0,18px 0,4px 100%,0 100%); }
.w2-lead::before{ content:""; position:absolute; left:4px; top:50%; width:56px; height:56px; transform:translateY(-50%);
  background:radial-gradient(circle,rgba(30,111,255,.38) 0%,transparent 65%); pointer-events:none; }
.w2-mark{ position:relative; width:36px; height:36px; display:block; flex:0 0 auto;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.65)); }
.w2-lock{ position:relative; display:flex; flex-direction:column; justify-content:center; line-height:1; min-width:0; }
.w2-lock b{ font-family:var(--disp); font-weight:900; font-size:18px; letter-spacing:.045em; color:#fff;
  text-shadow:0 1px 0 rgba(0,0,0,.6); }
.w2-lock b em{ font-style:normal; color:#4A8BFF; }
.w2-sub{ margin-top:3px; font-family:var(--disp); font-weight:800; font-size:9.5px; letter-spacing:.3em;
  text-transform:uppercase; color:var(--w2-acc); max-width:118px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.w2-sub i{ font-style:normal; color:#8294B4; margin:0 .25em 0 -.05em; letter-spacing:0; }

/* Flip stage: cards stack absolutely and JS turns ONE on (.is-on), skipping any card that
   is display:none at this width. No-JS / reduced-motion fallback = the default here: a
   static scroll row where every card keeps its natural width (flex:none) and nothing
   wraps or clamps; the fit-one-flip rules below are all scoped to .is-live (W5: a phone
   clamp there shrank headline / news cards to their longest word). The live stage and the
   bar CLIP rather than hide: the hidden flips sit 60% down (and the lead's glow overhangs
   the bar), and a scroll container with that overflow got scrolled by keyboard focus,
   sliding the shown flip out of its box (W5). `hidden` stays first for a browser without clip. */
.wire-stage{ position:relative; flex:1 1 auto; min-width:0; height:100%;
  display:flex; align-items:center; gap:26px; overflow-x:auto; overflow-y:hidden;
  padding-left:18px; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.wire-stage::-webkit-scrollbar{ display:none; }
.wire-stage.is-live{ display:block; overflow:hidden; overflow:clip; padding-left:0; }
.wire-card{ flex:none; display:flex; align-items:center; gap:16px; white-space:nowrap; }
.wire-stage.is-live .wire-card{ position:absolute; left:18px; right:16px; top:0; bottom:0;
  opacity:0; transform:translateY(60%); pointer-events:none;
  transition:opacity .38s var(--ease-out-expo), transform .38s var(--ease-out-expo); }
.wire-stage.is-live .wire-card.is-on{ opacity:1; transform:none; pointer-events:auto; }
@media (prefers-reduced-motion: reduce){
  .wire-stage.is-live .wire-card{ transition:none; } }
.wire-card.is-count{ display:none; }      /* the phone-only flip: desktop has the right module */

/* The category chip: ONE look on every flip, CAT in the accent, then a muted qualifier. */
.w2-cat{ flex:0 0 auto; display:inline-flex; align-items:center; gap:7px; height:24px; padding:0 9px;
  border:1px solid color-mix(in srgb,var(--accent) 45%,transparent); border-radius:5px;
  background:color-mix(in srgb,var(--accent) 10%,transparent);
  font-family:var(--disp); font-weight:800; font-size:12px; letter-spacing:.13em; text-transform:uppercase; color:var(--accent); }
.w2-cat span{ color:var(--dim); letter-spacing:.08em; font-weight:700; }
.w2-cat.is-news{ color:var(--loss); border-color:color-mix(in srgb,var(--loss) 45%,transparent);
  background:color-mix(in srgb,var(--loss) 10%,transparent); }
.w2-rule{ width:1px; height:24px; background:var(--line-bright); flex:0 0 auto; }

/* The score flip: crest (team-ink ring) · rank · ABBR · score. The winner gets full ink
   and a caret, the loser dims. Abbrs are ink, not team colour (a slate read as a rainbow). */
.w2-game, .w2-detail{ display:inline-flex; align-items:center; gap:14px; min-width:0;
  text-decoration:none; font-variant-numeric:tabular-nums; }
.w2-team{ display:inline-flex; align-items:center; gap:7px; font-family:var(--disp); line-height:1;
  --wc-ink:var(--wc-ink-dark); }
:root[data-theme="light"] .w2-team{ --wc-ink:var(--wc-ink-light); }
.w2-team .crest{ --logo-sz:24px; box-shadow:0 0 0 2px color-mix(in srgb,var(--wc-ink) 70%,transparent); }
.w2-team .crest > .logo-ph{ font-size:0; }
.w2-team .rk{ font-style:normal; font-weight:700; font-size:12px; color:var(--dim); margin-right:-3px; }
.w2-team .ab{ font-weight:800; font-size:19px; letter-spacing:.04em; text-transform:uppercase; color:var(--ink); }
.w2-team .sc{ font-weight:900; font-size:22px; color:var(--ink); margin-left:5px; }
.w2-team.is-lost .ab, .w2-team.is-lost .sc{ color:var(--dim); font-weight:700; }
.w2-team.is-lost .crest{ opacity:.75; }
.w2-caret{ width:0; height:0; border:5px solid transparent; border-right:7px solid var(--accent); margin-left:-2px; }
.w2-at{ font-family:var(--disp); font-weight:700; font-size:13px; color:var(--mute); }
.w2-status{ flex:0 0 auto; display:inline-flex; align-items:center; gap:6px; height:24px; padding:0 10px;
  border-radius:5px; border:1px solid var(--line-bright); background:var(--panel-2); color:var(--ink-2);
  font-family:var(--disp); font-weight:800; font-size:12px; letter-spacing:.12em; text-transform:uppercase; white-space:nowrap; }
.w2-status.is-final{ color:var(--ink); }
.w2-status.is-up, .w2-status.is-sim{ color:var(--dim); }
.w2-status.is-tie{ color:var(--live); }
.w2-status .belt{ letter-spacing:0; }

/* The detail flip, right after its score flip: a mini score, then ONE lead stat big and the
   supporting stats smaller (KEY STAT), or the recap headline (HEADLINE). A KEY STAT part
   never shrinks: phones never render the third (.w2-desk), and a phone's live flip drops
   any part that still does not fit WHOLE (see the phone block, W5), never cut mid-word. */
.wire-card.is-detail{ --wc-ink2:var(--wc-ink2-dark); }
:root[data-theme="light"] .wire-card.is-detail{ --wc-ink2:var(--wc-ink2-light); }
.w2-mini{ font-family:var(--disp); font-weight:800; font-size:14px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--dim); white-space:nowrap; }
.w2-mini b{ color:var(--ink); font-weight:900; }
.w2-who{ flex:0 0 auto; display:inline-flex; align-items:center; height:24px; padding:0 8px 0 7px;
  border-left:4px solid var(--wc-ink2); border-radius:0 5px 5px 0;
  background:color-mix(in srgb,var(--wc-ink2) 14%,transparent);
  font-family:var(--disp); font-weight:900; font-size:15px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink); }
.w2-lead-stat{ flex:0 0 auto; font-family:var(--disp); font-weight:900; font-size:22px; line-height:1; color:var(--ink); }
.w2-lead-stat small{ margin-left:4px; font-size:13px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2); }
.w2-more{ flex:0 0 auto; font-size:14px; font-weight:500; color:var(--ink-2); white-space:nowrap; }
.w2-more b{ color:var(--ink); font-weight:700; }
.w2-more i{ font-style:normal; color:var(--mute); margin-right:.6em; }
.w2-hl{ min-width:0; font-size:15px; font-weight:600; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* TOP 25: five per flip. On desktop an item never shrinks and a long name ellipsizes inside
   its own 11ch; on phones + tablets (W3 / W7, below) the items are equal slots capped at their own
   content. Either way the rank chip itself never shrinks (ten shrinking items squeezed it
   to the phone '#. · #.' bug). */
.w2-poll{ display:inline-flex; align-items:center; gap:18px; min-width:0; overflow:hidden; }
.w2-pt{ flex:0 0 auto; display:inline-flex; align-items:center; gap:7px; font-family:var(--disp); }
.w2-pt .n{ display:inline-grid; place-items:center; min-width:24px; height:22px; padding:0 4px; border-radius:4px;
  background:color-mix(in srgb,var(--accent) 16%,transparent); color:var(--accent); font-weight:900; font-size:13px; }
.w2-pt .t{ max-width:11ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-weight:800; font-size:18px; letter-spacing:.04em; text-transform:uppercase; color:var(--ink); }

/* LEGACY NEWS + the countdown flip */
.w2-news{ display:inline-flex; align-items:center; gap:12px; min-width:0; text-decoration:none; }
.w2-read{ flex:0 0 auto; font-family:var(--disp); font-weight:800; font-size:12px; letter-spacing:.14em; color:var(--accent); white-space:nowrap; }
.w2-clock-l{ font-family:var(--disp); font-weight:800; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-2); }
.w2-clock{ font-family:var(--disp); font-weight:900; font-size:18px; color:var(--accent); }

/* The persistent right module (desktop): league brand + the next-event countdown. A league
   with no abbrev shows its whole name here, so the brand ellipsizes instead of eating the stage. */
.wire-module{ flex:0 0 auto; display:flex; align-items:center; gap:12px; padding:0 20px;
  border-left:1px solid var(--line); height:100%; background:var(--bg); z-index:3; }
.wm-brand{ max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-family:var(--disp); font-weight:800; font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink); }
.wm-label{ font-family:var(--disp); font-weight:700; font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--dim); }
.wm-clock{ font-family:var(--disp); font-weight:800; font-size:17px; color:var(--accent);
  text-shadow:0 0 12px color-mix(in srgb, var(--accent) 45%, transparent); }

/* Phones (≤760; the bar docks at the TOP, see MOBILE): 46px, one line per flip, a mark-only
   lead, the countdown joins the rotation, and the KEY STAT flip shows the lead stat + ONE
   more (Rob 2026-10-12: no truncated third). */
@media (max-width:760px){
  :root{ --ticker-h:46px; }
  .w2-lead{ padding:0 18px 0 8px; gap:0; flex-direction:column; justify-content:center; }
  .w2-lead::before{ left:-6px; width:48px; height:48px; }
  .w2-mark{ width:27px; height:27px; }
  .w2-lock b{ display:none; }
  .w2-sub{ margin-top:2px; font-size:8px; letter-spacing:.2em; max-width:40px; }
  .w2-sub i, .w2-sub .lg{ display:none; }
  .wire-stage{ padding-left:10px; }
  .wire-stage.is-live .wire-card{ left:10px; right:8px; }
  .wire-card{ gap:9px; }
  .wire-card.is-game .w2-cat, .wire-card.is-poll .w2-cat{ display:none; }   /* the status chip / rank boxes say it */
  .w2-cat{ height:20px; padding:0 6px; font-size:10px; letter-spacing:.1em; gap:4px; }
  .w2-cat span{ display:none; }
  .w2-game, .w2-detail{ gap:9px; }
  .w2-team{ gap:5px; }
  .w2-team .crest{ --logo-sz:19px; }
  .w2-team .rk{ font-size:10.5px; margin-right:0; }
  .w2-team .ab{ font-size:16px; }
  .w2-team .sc{ font-size:18px; }
  .w2-caret{ border-width:4px; border-right-width:6px; }
  .w2-status{ height:20px; padding:0 6px; font-size:10.5px; letter-spacing:.08em; }
  /* W5: a blank Team.short_name prints the whole name ('Middle Tennessee') and pushed the
     status chip / TIE off the live flip. Each team is an equal flexible slot capped at its
     own content (the W3 poll pattern), so a short abbr keeps its exact width, long names
     share what is left and ellipsize inside their own slot, and the chip always shows.
     Phones, and tablets once their category chip is gone (the tablet tier below): with
     the chip still there, the same rule crushed real abbrs to nothing at 768 (W5). Desktop
     (>=1024) keeps its pre-W5 behavior.
     The abbr's 1px padding (cancelled by its margin) keeps a glyph's edge ink, e.g. the
     left of 'T' / 'A', inside the clip, so a name that fits renders exactly as before. */
  .wire-stage.is-live .w2-game{ flex:1 1 0; }
  .wire-stage.is-live .w2-team{ flex:1 1 0; min-width:0; max-width:max-content; }
  .wire-stage.is-live .w2-team .ab{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
    padding:0 1px; margin:0 -1px; }
  .w2-rule, .w2-mini, .w2-read, .w2-desk{ display:none; }
  .w2-who{ height:20px; padding:0 6px 0 5px; border-left-width:3px; font-size:13px; }
  .w2-lead-stat{ font-size:18px; }
  .w2-lead-stat small{ font-size:11px; }
  .w2-more{ font-size:12.5px; }
  /* W5: a long blank-short_name who chip ('LOUISIANA-MONROE') cut the next part mid-word.
     The live KEY STAT parts wrap inside a box one line tall, so a part that does not fit
     drops WHOLE onto the clipped second line. Only where the mini score and its rule are
     hidden (phones + the tablet tier), so line 1 always starts with the who chip and the
     lead stat (on desktop the mini comes first and would push the stat away). */
  .wire-stage.is-live .w2-detail.is-stat{ flex-wrap:wrap; align-content:flex-start; height:20px; overflow:hidden; }
  .w2-hl{ font-size:13.5px; }
  /* the 2-line clamp only where a flip has a fixed width: the static row (Reduce Motion /
     no JS) keeps a headline on one line at its natural width and scrolls (W5) */
  .wire-stage.is-live .w2-hl{ line-height:1.18; white-space:normal; display:-webkit-box;
    -webkit-line-clamp:2; -webkit-box-orient:vertical; }
  /* Ruling W3 (2026-10-12): five items ALWAYS fit. The poll fills the flip and each item is
     an equal flexible slot capped at its own content, so a short name keeps its exact width
     and long names share what is left, each ellipsizing inside its slot: never cut by the
     container, never dropped (five blank-short_name teams at 390 cut #4 and lost #5). */
  .w2-poll{ flex:1 1 0; gap:8px; }
  .w2-pt{ flex:1 1 0; min-width:0; max-width:max-content; gap:4px; }
  .w2-pt .n{ flex:none; min-width:17px; height:18px; font-size:11px; }
  .w2-pt .t{ min-width:0; max-width:8ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:14.5px; }
  .wire-stage .wire-card.is-count{ display:flex; }
  .wire-card.is-count .w2-cat{ display:block; max-width:96px; line-height:18px; overflow:hidden;
    text-overflow:ellipsis; white-space:nowrap; }      /* a long league name: 'BIG BOY C…' */
  .wire-module{ display:none; }
}
/* Tablet (761-1023; rulings W6 + W7, 2026-10-12): the desktop flip is denser than the stage
   here. At 768 it put the status chip under the right module on 5 of 6 score flips, and a
   long-name league's module (its whole name) left a 188px flip. So the LIVE flips take the
   phone compaction: the detail flip drops its mini score + rule (line 1 then starts with
   the who chip) and drops a KEY STAT part whole; score and poll flips drop the category
   chip (the status chip / rank boxes say it); polls are the W3 slots and teams the W5 abbr
   slots, so a catalog abbr keeps its natural width and only a blank-short_name name
   ellipsizes. Type stays desktop size (W7: no step-down was needed). */
@media (min-width:761px) and (max-width:1023px){
  .wire-stage.is-live .w2-detail .w2-mini, .wire-stage.is-live .w2-detail .w2-rule{ display:none; }
  .wire-stage.is-live .w2-detail.is-stat{ flex-wrap:wrap; align-content:flex-start; height:24px; overflow:hidden; }
  .wire-stage.is-live .wire-card.is-game .w2-cat, .wire-stage.is-live .wire-card.is-poll .w2-cat{ display:none; }
  .wire-stage.is-live .w2-poll{ flex:1 1 0; gap:12px; }
  .wire-stage.is-live .w2-pt{ flex:1 1 0; min-width:0; max-width:max-content; }
  .wire-stage.is-live .w2-pt .n{ flex:none; }
  .wire-stage.is-live .w2-pt .t{ min-width:0; }
  .wire-stage.is-live .w2-game{ flex:1 1 0; }
  .wire-stage.is-live .w2-team{ flex:1 1 0; min-width:0; max-width:max-content; }
  .wire-stage.is-live .w2-team .ab{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
    padding:0 1px; margin:0 -1px; }
}
/* The right module drops the league name from 761 to 1199 (W7 + W8 + final review M1): a
   league with no abbrev prints its whole name there (180px), which left its flip 188px at
   768, lost status chips at 1024-1055, and pushed the KEY STAT 3rd part and the poll's
   rank 5 past the card at 1080-1180. The lead-in's WIRE · <tag> already carries the name;
   1200+ shows it again (and phones hide the whole module). */
@media (min-width:761px) and (max-width:1199px){
  .wire-module .wm-brand{ display:none; }
}
/* 360-class phones (W7): the widest catalog row, two ranked teams + a belt (UMASS vs WISC),
   ran 4.9px over at 360 and UMASS ellipsized. The score flip has two gaps (the rule is
   hidden on phones): 9 -> 6px each (7 left it 0.9px short). 390 keeps 9px. */
@media (max-width:374px){
  .wire-stage.is-live .w2-game{ gap:6px; }
}
/* desktop: keep page content clear of the fixed bottom ticker (only when it renders) */
@media (min-width:761px){ body:has(.ticker){ padding-bottom:var(--ticker-h); } }

/* ============================================================
   MOBILE DRAWER
   ============================================================ */
.scrim{ position:fixed; inset:0; z-index:var(--z-scrim); background:var(--scrim);
  -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); opacity:0; pointer-events:none; transition:opacity .25s; }
.scrim.open{ opacity:1; pointer-events:auto; }
.drawer{
  position:fixed; top:0; right:0; bottom:0; width:min(86vw,360px); z-index:var(--z-drawer);
  background:var(--panel); border-left:1px solid var(--line-bright); box-shadow:var(--shadow-lift);
  transform:translateX(102%); transition:transform .34s var(--ease-out-expo);
  display:flex; flex-direction:column; overflow-y:auto;
}
.drawer.open{ transform:none; }
.drawer-h{ display:flex; align-items:center; padding:16px var(--pad); border-bottom:1px solid var(--line); }
.drawer-h .close{ margin-left:auto; width:36px; height:36px; border-radius:9px; background:var(--panel-2);
  border:1px solid var(--line); color:var(--ink); display:grid; place-items:center; cursor:pointer; }
.drawer-nav{ padding:10px var(--pad) 30px; display:flex; flex-direction:column; gap:2px; }
.drawer-nav > a, .acc-head{
  display:flex; align-items:center; gap:10px; width:100%; text-align:left; padding:13px 8px; border:0; background:none;
  font-family:var(--disp); font-weight:700; font-size:16px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-2); cursor:pointer;
  border-bottom:1px solid var(--line);
}
.drawer-nav > a:hover,.acc-head:hover{ color:var(--ink); }
.acc-head .caret{ margin-left:auto; width:12px; height:12px; transition:transform .25s var(--ease-out-expo); }
.acc.open .acc-head .caret{ transform:rotate(180deg); }
.acc-body{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .3s var(--ease-out-expo); }
.acc.open .acc-body{ grid-template-rows:1fr; }
.acc-body > div{ overflow:hidden; }
.acc:not(.open) .acc-body{ visibility:hidden; transition:grid-template-rows .3s var(--ease-out-expo), visibility 0s linear .3s; }
.acc-body a small{ margin-left:auto; color:var(--mute); font-size:11.5px; font-weight:600; }
.acc-body a{ display:flex; align-items:center; gap:9px; padding:11px 8px 11px 18px; font-weight:600; font-size:14px; color:var(--dim); }
.acc-body a:hover{ color:var(--ink); }
.acc-body a .mi{ width:6px; height:6px; border-radius:50%; background:var(--mute); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1100px){ .cols-3{ grid-template-columns:1fr 1fr; } }
@media (max-width:760px){
  .nav{ display:none; }
  .burger{ display:none; }              /* replaced by the bottom dock */
  .hub-btn{ display:none; }              /* Nav S3: the dock's My Hub slot carries it (audit D6) */
  .cols-2,.cols-3{ grid-template-columns:1fr; }
  .hdr-in{ height:56px; }
  .brand-txt span{ letter-spacing:.28em; }
  /* mobile: ticker rides at the TOP (bottom is the dock); content scrolls behind it.
     The sticky header drops below the ticker; body padding clears both ends.
     Top spacing only applies when the ticker actually renders (games exist). */
  .ticker{ top:0; bottom:auto; z-index:65; }
  body:has(.ticker) .hdr{ top:var(--ticker-h); }
  body:has(.ticker){ padding-top:var(--ticker-h); }
  body{ padding-bottom:calc(62px + env(safe-area-inset-bottom)); }
  body:not(:has(.dock)){ padding-bottom:0; }   /* Nav S3: platform pages render no dock, so no blank band */
}
@media (min-width:1024px){ .drawer,.scrim{ display:none; } }
/* Tablet / narrow-laptop band: the full inline nav doesn't fit (would overflow
   the header → horizontal scroll), so switch to the hamburger + drawer here.
   ≤760px uses the bottom dock instead; ≥1024px shows the full nav. */
@media (min-width:761px) and (max-width:1023px){
  .nav{ display:none; }
  .burger{ display:inline-flex; align-items:center; justify-content:center; }
  html,body{ overflow-x:hidden; }
}
/* Nav S3 width rules (spec §3.1, measured in the S3 plan): the hub chip drops its "My Hub" text
   from 761 to 1199, and the bar's links tighten to 10px padding from 1024 to 1199. Both are
   REQUIRED for an owner in-cycle to fit at 1024. */
@media (min-width:761px) and (max-width:1199px){
  .hub-btn{ padding:0 11px 0 9px; }
  .hub-btn .hub-tx{ display:none; }
}
@media (min-width:1024px) and (max-width:1199px){
  .nav-link, .nav-trigger{ padding:0 10px; }
  .nav-link::after, .nav-trigger::after{ left:10px; right:10px; }
}
@media (min-width:1200px){ .brand-box{ --brand-league-w:160px; } }
/* s147: the league Sportsbook, the bar's last item ("<League> Sportsbook" from 1200). REQUIRED (the
   s147 header-fit sweep, rungs L3 + L4), and ONLY in a header that carries it (`.hdr-in:has(.nav-book)`:
   a Free league, Lines off, a visitor or a guest keep S3's header exactly):
   - 1024-1199: a ticket glyph only, the full name kept in aria-label + title (the way the Commish
     pill goes icon-only at <=420), and the bar's links tighten 10 -> 8px;
   - 1200-1319: S3's hub-text and 78px league-line compactions carry on, until the full header fits
     a long league name with a 5-letter abbrev ("BBCFL Sportsbook") at 1320. */
.nav-book .nb-ic{ display:none; width:18px; height:18px; flex:0 0 auto; }
@media (min-width:1024px) and (max-width:1199px){
  .nav-book .nb-full{ display:none; }
  .nav-book .nb-ic{ display:block; }
  .hdr-in:has(.nav-book) .nav-link, .hdr-in:has(.nav-book) .nav-trigger{ padding:0 8px; }
  .hdr-in:has(.nav-book) .nav-link::after, .hdr-in:has(.nav-book) .nav-trigger::after{ left:8px; right:8px; }
}
@media (min-width:1200px) and (max-width:1319px){
  .hdr-in:has(.nav-book) .hub-btn{ padding:0 11px 0 9px; }
  .hdr-in:has(.nav-book) .hub-btn .hub-tx{ display:none; }
  .hdr-in:has(.nav-book) .brand-box{ --brand-league-w:78px; }
}
/* ---------- mobile bottom dock ---------- */
.dock{ display:none; position:fixed; left:0; right:0; bottom:0; z-index:70;
  height:calc(62px + env(safe-area-inset-bottom)); padding:0 4px env(safe-area-inset-bottom);
  /* Solid background, NO backdrop-filter. iOS Safari mis-positions a
     position:fixed element that also carries backdrop-filter — it detaches
     from the viewport and drifts/"undocks" on scroll (same WebKit bug fixed
     earlier on .busy-overlay). A docked bar must stay docked. */
  background:var(--panel);
  border-top:1px solid var(--line); align-items:stretch; justify-content:space-around; }
@media (max-width:760px){ .dock{ display:flex; } }
.dock-item{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  background:none; border:0; cursor:pointer; color:var(--mute); font-family:var(--body); padding:8px 2px 6px;
  -webkit-tap-highlight-color:transparent; position:relative; }
.dock-ic{ width:23px; height:23px; display:flex; align-items:center; justify-content:center; }
.dock-ic svg{ width:23px; height:23px; display:block; }
.dock-ic .ic-fill{ display:none; }
.dock-lb{ font-size:9px; font-weight:700; letter-spacing:.01em; text-transform:uppercase; white-space:nowrap; }
.dock-item[aria-current="page"]{ color:var(--accent-bright); }
.dock-item[aria-current="page"] .ic-line{ display:none; }
.dock-item[aria-current="page"] .ic-fill{ display:block; }
.dock-item[aria-current="page"]::before{ content:""; position:absolute; top:0; left:24%; right:24%; height:2px;
  border-radius:0 0 3px 3px; background:var(--accent); }
.dock-item{ transition:transform .09s ease, color .15s; }
.dock-item:active{ transform:scale(.9); }
.dock-item:active .dock-ic{ transform:scale(.86); transition:transform .09s ease; }
@media (max-width:420px){
  .brand-txt b{ font-size:16px; }
  .hdr-pill{ width:38px; padding:0; justify-content:center; }
  .hdr-pill-tx{ display:none; }          /* Nav S3: the Commish pill is icon-only on small phones */
  .hdr-pill-ic{ display:block; }
  .page{ padding-bottom:70px; }
}

/* ============================================================
   TACTILE PRESS FEEDBACK — every interactive surface visibly
   confirms the tap (the bottom dock, drawer/menu links, the
   user chip, ticker rows, header buttons). Dark theme swallows
   the default tap-highlight, so we add an explicit press scale.
   ============================================================ */
.nav-link, .nav-trigger, .menu a, .acc-head, .acc-body a, .drawer-nav > a,
.hub-btn, .burger, .theme-toggle, .ticker-item, .close{
  transition:transform .08s ease, color .15s, background-color .15s, border-color .15s;
}
.nav-link:active, .nav-trigger:active, .menu a:active, .acc-head:active,
.acc-body a:active, .drawer-nav > a:active, .ticker-item:active{ transform:scale(.97); }
.hub-btn:active, .burger:active, .theme-toggle:active, .close:active{ transform:scale(.92); }
/* touch devices: give any remaining block/flex link or button a press too */
@media (hover:none){
  .btn:active, a.card:active, .card-link:active, [role="button"]:active,
  .chip:active, .pill:active{ transform:scale(.97); }
}
/* JS-driven press (static/js/click-feedback.js) — fires on iOS Safari too,
   where :active is unreliable on links/divs. Mirrors the :active scales above
   so the tuned press feel is reliable on every device, and gives drawer +
   dropdown rows a clear accent highlight so hamburger-menu taps confirm
   instantly (they have no resting background to depress). */
.is-pressed{ transition:transform .06s ease, background-color .06s ease, filter .06s ease; }
.nav-link.is-pressed, .nav-trigger.is-pressed, .menu a.is-pressed, .acc-head.is-pressed,
.acc-body a.is-pressed, .drawer-nav > a.is-pressed, .ticker-item.is-pressed,
.btn.is-pressed, a.card.is-pressed, .card-link.is-pressed, [role="button"].is-pressed,
.chip.is-pressed{ transform:scale(.96); }
summary.is-pressed{ filter:brightness(1.12); } /* s146: never scale a summary — a full-width row shrinks out from under the pointer and the click is lost */
.hub-btn.is-pressed, .burger.is-pressed, .theme-toggle.is-pressed, .close.is-pressed{ transform:scale(.92); }
.dock-item.is-pressed{ transform:scale(.9); }
.dock-item.is-pressed .dock-ic{ transform:scale(.86); }
.menu a.is-pressed, .acc-body a.is-pressed, .drawer-nav > a.is-pressed, .acc-head.is-pressed{
  background:color-mix(in oklab, var(--accent) 18%, transparent);
  border-radius:9px; filter:brightness(1.06);
}
@media (prefers-reduced-motion: reduce){ .is-pressed{ transform:none !important; } }

/* Mobile: stronger, more obvious tap feedback (touch devices only — desktop
   hover keeps the subtle press). A bigger depress + a brightness pop + ring so a
   tap clearly registers, especially on iOS where the Vibration API is blocked. */
@media (hover: none) and (pointer: coarse){
  .is-pressed{ transition:transform .05s ease, filter .05s ease, background-color .05s ease; }
  .nav-link.is-pressed, .nav-trigger.is-pressed, .menu a.is-pressed, .acc-head.is-pressed,
  .acc-body a.is-pressed, .drawer-nav > a.is-pressed, .ticker-item.is-pressed,
  .btn.is-pressed, a.card.is-pressed, .card-link.is-pressed, [role="button"].is-pressed,
  .chip.is-pressed{ transform:scale(.93); filter:brightness(1.22); }
  summary.is-pressed{ filter:brightness(1.22); }
  .btn.is-pressed{ box-shadow:0 0 0 2px color-mix(in oklab,var(--accent) 55%,transparent); }
  .hub-btn.is-pressed, .burger.is-pressed, .theme-toggle.is-pressed,
  .close.is-pressed{ transform:scale(.88); filter:brightness(1.25); }
  .dock-item.is-pressed{ transform:scale(.84); }
  .dock-item.is-pressed .dock-ic{ transform:scale(.8); filter:drop-shadow(0 0 7px var(--accent-bright)); }
}
/* s146: a summary never scales, even one that carries a scaling class (My Class "Sign commits" is
   <summary class="btn">). Specificity 0,2,1 (type + :is(0,1,0) + :is(0,1,0)) beats every scaling rule
   above that can match it (.btn.is-pressed / .btn:active / .chip.is-pressed ... = 0,2,0), and it sits
   after the coarse block. See summary.is-pressed above + nil/test_summary_press_guard. */
summary:is(.btn,.chip,.card-link,.pill,[role="button"]):is(.is-pressed,:active){ transform:none; }

/* utility */
.muted{ color:var(--dim); } .dim{ color:var(--mute); }
.row{ display:flex; align-items:center; gap:10px; }
.wrap{ flex-wrap:wrap; }
.spread{ justify-content:space-between; }
.center{ align-items:center; }
.mt{ margin-top:14px; } .mt-lg{ margin-top:22px; }
.divider{ height:1px; background:var(--line); margin:14px 0; }

/* ============================================================
   MOBILE-OVERFLOW SAFEGUARD (keep — prevents horizontal scroll)
   ============================================================ */
.grid>*,.stack,.tbl-wrap,.panel,.panel-b,.bug,.pwr-row{min-width:0}
.tbl-wrap{width:100%;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
img{max-width:100%}
@media(max-width:760px){html,body{overflow-x:hidden}}

/* mobile overflow safeguard (assembly) */
.grid>*,.stack,.tbl-wrap,.panel,.panel-b,.bug,.pwr-row{min-width:0}
.tbl-wrap{width:100%;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
img{max-width:100%}
@media(max-width:760px){html,body{overflow-x:hidden}}

/* ======================== PAGE: home ======================== */

  #page-home .home-hero{
    position:relative; overflow:hidden; border-radius:var(--r-xl);
    border:1px solid var(--line); background:
      linear-gradient(180deg, color-mix(in oklab,var(--accent) 9%,var(--panel)) 0%, var(--panel) 58%);
    padding:clamp(20px,3.4vw,34px); margin-bottom:6px;
  }
  #page-home .home-hero::after{
    content:""; position:absolute; right:-60px; top:-80px; width:340px; height:340px; border-radius:50%;
    background:radial-gradient(circle, color-mix(in oklab,var(--accent) 30%,transparent), transparent 68%);
    pointer-events:none;
  }
  #page-home .hh-status{ display:flex; align-items:center; gap:11px; flex-wrap:wrap; position:relative; z-index:1; }
  #page-home .hh-status span{ font-family:var(--disp); font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
  #page-home .hh-game{ font-size:13px; color:var(--accent-bright); }
  #page-home .hh-szn{ font-size:13px; color:var(--ink); }
  #page-home .hh-div{ width:4px; height:4px; border-radius:50%; background:var(--mute); }
  #page-home .hh-title{ font-family:var(--disp); font-weight:900; font-size:clamp(38px,6.4vw,68px); line-height:.92;
    letter-spacing:-.01em; text-transform:uppercase; margin:14px 0 0; text-wrap:balance; position:relative; z-index:1; }
  #page-home .hh-tag{ max-width:64ch; color:var(--ink-2); font-size:15px; margin:10px 0 0; position:relative; z-index:1; }
  #page-home .hh-cta{ display:flex; gap:10px; flex-wrap:wrap; margin-top:18px; position:relative; z-index:1; }
  #page-home .hh-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:22px; position:relative; z-index:1; }
  #page-home .hh-stats .chip{ background:color-mix(in oklab,var(--bg) 30%, var(--panel)); }

  /* USDA-TV cards */
  #page-home .tv-card{ display:block; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
    background:var(--panel); cursor:pointer; transition:border-color .16s, transform .16s, box-shadow .16s; }
  #page-home .tv-card:hover{ border-color:var(--line-bright); transform:translateY(-2px); box-shadow:var(--shadow-lift); }
  #page-home .tv-thumb{ position:relative; aspect-ratio:16/9; display:grid; place-items:center;
    background:linear-gradient(135deg, color-mix(in oklab,var(--tc) 40%,var(--panel-2)), var(--panel-2)); }
  #page-home .tv-play{ font-size:30px; color:rgba(255,255,255,.9); filter:drop-shadow(0 2px 6px rgba(0,0,0,.5)); }
  #page-home .tv-badge{ position:absolute; top:10px; left:10px; }
  #page-home .tv-meta{ display:flex; align-items:center; gap:10px; padding:11px 13px; }
  #page-home .tv-psn{ font-family:var(--disp); font-weight:800; font-size:15px; letter-spacing:.03em; color:var(--ink); }
  #page-home .tv-sub{ font-size:12.5px; color:var(--dim); font-weight:500; margin-top:1px; }

  /* pulse tiles : keep equal-height feel */
  #page-home .pulse-tile{ height:100%; }

  /* Latest Results rows */
  #page-home .res-row{ display:flex; align-items:center; gap:8px; padding:10px 10px; border-radius:var(--r-sm);
    cursor:pointer; transition:background-color .15s; }
  #page-home .res-row + .res-row{ border-top:1px solid var(--line); }
  #page-home .res-row:hover{ background:var(--hover-row); }
  #page-home .res-row .wk{ font-family:var(--disp); font-weight:800; font-size:12.5px; color:var(--dim); width:28px; flex:0 0 auto; letter-spacing:.04em; }
  #page-home .res-side{ display:flex; align-items:center; gap:7px; flex:1; min-width:0; }
  #page-home .res-side:last-of-type{ justify-content:flex-end; }
  #page-home .res-name{ font-weight:600; font-size:13.5px; color:var(--ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  #page-home .res-side.winner .res-name{ color:var(--ink); font-weight:700; }
  #page-home .res-sc{ font-family:var(--disp); font-weight:800; font-size:17px; color:var(--ink-2); font-variant-numeric:tabular-nums; flex:0 0 auto; }
  #page-home .res-side.winner .res-sc{ color:var(--ink); }
  #page-home .res-dash{ color:var(--mute); font-weight:700; flex:0 0 auto; }

  /* Champion block */
  #page-home .champ-block{ display:flex; align-items:center; gap:14px; }
  #page-home .champ-label{ font-family:var(--disp); font-weight:800; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--gold); }
  #page-home .champ-psn{ display:inline-block; font-family:var(--disp); font-weight:800; font-size:22px; letter-spacing:.02em; color:var(--ink); cursor:pointer; line-height:1.05; }
  #page-home .champ-psn:hover{ color:var(--accent-bright); }
  #page-home .champ-team{ font-size:13px; color:var(--ink-2); font-weight:600; margin-top:2px; }
  #page-home .champ-score{ font-size:12.5px; color:var(--dim); font-weight:500; margin-top:1px; }
  #page-home .dyn-label{ font-family:var(--disp); font-weight:800; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--dim); margin-bottom:11px; }
  #page-home .dyn-row{ display:flex; align-items:center; gap:10px; }
  #page-home .dyn-rk{ font-family:var(--disp); font-weight:800; font-size:14px; color:var(--mute); width:14px; flex:0 0 auto; }
  #page-home .dyn-psn{ font-family:var(--disp); font-weight:700; font-size:15px; letter-spacing:.02em; color:var(--ink); cursor:pointer; }
  #page-home .dyn-psn:hover{ color:var(--accent-bright); }
  #page-home .dyn-titles{ margin-left:auto; font-family:var(--disp); font-weight:800; font-size:15px; color:var(--gold); font-variant-numeric:tabular-nums; }

  /* News rows */
  #page-home .news-item{ display:flex; gap:12px; align-items:flex-start; padding:13px 12px; border-radius:var(--r);
    cursor:pointer; transition:background-color .16s; }
  #page-home .news-item + .news-item{ border-top:1px solid var(--line); }
  #page-home .news-item:hover{ background:var(--hover-row); }
  #page-home .news-item.pinned{ box-shadow:inset 3px 0 0 var(--gold); }
  #page-home .ni-tag{ flex:0 0 auto; margin-top:1px; }
  #page-home .ni-h{ font-weight:600; font-size:14.5px; color:var(--ink); line-height:1.35; }
  #page-home .ni-meta{ font-size:12px; color:var(--dim); margin-top:3px; font-weight:500; }

  /* Explore cards */
  #page-home .explore-card{ display:flex; flex-direction:column; gap:6px; padding:18px 16px; border:1px solid var(--line);
    border-radius:var(--r-lg); background:var(--panel); cursor:pointer; transition:border-color .16s, transform .16s, box-shadow .16s; }
  #page-home .explore-card:hover{ border-color:var(--line-bright); transform:translateY(-2px); box-shadow:var(--shadow-lift); }
  #page-home .ex-ic{ font-size:26px; line-height:1; }
  #page-home .ex-t{ font-family:var(--disp); font-weight:800; font-size:18px; letter-spacing:.02em; text-transform:uppercase; color:var(--ink); margin-top:4px; }
  #page-home .ex-d{ font-size:13px; color:var(--ink-2); line-height:1.4; }
  #page-home .ex-go{ font-family:var(--disp); font-weight:700; font-size:12.5px; letter-spacing:.04em; text-transform:uppercase; color:var(--accent-bright); margin-top:auto; padding-top:8px; }

  /* Footer */
  #page-home .home-footer{ text-align:center; font-family:var(--disp); font-weight:800; font-size:13px;
    letter-spacing:.18em; text-transform:uppercase; color:var(--dim); padding:26px 0 8px; }

  @media (max-width:760px){
    #page-home .hh-stats{ grid-template-columns:1fr 1fr; }
    #page-home .hh-cta .btn{ flex:1; justify-content:center; }
  }
  @media (max-width:420px){
    #page-home .hh-stats{ grid-template-columns:1fr; }
  }

/* ======================== PAGE: myhub ======================== */

  /* ---- 1a Hero ---- */
  #page-myhub .hub-hero{ position:relative; overflow:hidden; border-radius:var(--r-xl);
    border:1px solid var(--line); padding:clamp(20px,3.2vw,32px); margin-bottom:6px;
    background:linear-gradient(135deg, color-mix(in oklab,var(--me) 36%,var(--panel)) 0%, color-mix(in oklab,var(--me) 8%,var(--panel)) 55%, var(--panel) 100%); }
  #page-myhub .hub-hero-art{ position:absolute; right:-70px; top:-90px; width:360px; height:360px; border-radius:50%;
    background:radial-gradient(circle, color-mix(in oklab,var(--me) 40%,transparent), transparent 68%); pointer-events:none; }
  #page-myhub .hub-hero-main{ display:flex; align-items:center; gap:clamp(14px,2.4vw,26px); position:relative; z-index:1; }
  #page-myhub .hub-logo{ --logo-sz:84px; flex:0 0 auto; box-shadow:var(--shadow-card); }
  #page-myhub .hub-hero-id{ min-width:0; }
  #page-myhub .hub-conf{ font-family:var(--disp); font-weight:800; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-2); }
  #page-myhub .hub-team-line{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:2px; }
  #page-myhub .hub-team{ font-family:var(--disp); font-weight:900; font-size:clamp(34px,5.4vw,56px); line-height:.94; letter-spacing:-.01em; text-transform:uppercase; }
  #page-myhub .hub-rank{ font-size:14px; }
  #page-myhub .hub-tier{ font-size:18px; color:var(--gold); letter-spacing:.04em; }
  #page-myhub .hub-coach-line{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:10px; }
  #page-myhub .hub-avatar{ width:30px; height:30px; border-radius:50%; background:var(--ac); display:grid; place-items:center;
    font-family:var(--disp); font-weight:800; font-size:12px; color:#fff; flex:0 0 auto; box-shadow:inset 0 0 0 1px rgba(255,255,255,.18); }
  /* uploaded profile photo — the hero's identity anchor, sits left of the team
     logo (hero-lead). object-fit:cover fills the round frame; size is a CSS var
     (one number to retune) and eases down on phones so the hero row doesn't
     crowd the team name. */
  #page-myhub .hub-hero-main{ --hub-ava:136px; }
  #page-myhub .hub-avatar-img{ width:var(--hub-ava); height:var(--hub-ava); border-radius:50%;
    object-fit:cover; flex:0 0 auto; background:var(--panel-2);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.22), 0 8px 24px -10px rgba(0,0,0,.75); display:block; }
  /* phones: avatar + team logo share the top row, the name/record block wraps
     to its own full-width row below — otherwise the big avatar squeezes the
     team name off the edge. */
  @media (max-width:600px){
    #page-myhub .hub-hero-main{ flex-wrap:wrap; --hub-ava:104px; }
    #page-myhub .hub-hero-id{ flex:1 1 100%; }
  }
  #page-myhub .hub-psn{ font-family:var(--disp); font-weight:800; font-size:18px; letter-spacing:.03em; color:var(--ink); }
  #page-myhub .admin-badge{ background:var(--me); color:#fff; border-color:transparent; }
  #page-myhub .hub-achievements{ display:flex; flex-wrap:wrap; gap:7px; margin-top:14px; }
  #page-myhub .pill.ach{ cursor:default; }
  #page-myhub .pill.ach.gold{ background:color-mix(in oklab,var(--gold) 22%,var(--panel)); color:var(--gold); border-color:color-mix(in oklab,var(--gold) 40%,transparent); }
  #page-myhub .pill.ach.unicorn{ background:color-mix(in oklab,#C97BFF 20%,var(--panel)); color:#D9A8FF; border-color:color-mix(in oklab,#C97BFF 40%,transparent); }
  #page-myhub .pill.ach.silver{ background:var(--panel-2); color:var(--ink-2); border-color:var(--line-bright); }
  #page-myhub .pill.ach.primary{ background:color-mix(in oklab,var(--accent) 20%,var(--panel)); color:var(--accent-bright); border-color:color-mix(in oklab,var(--accent) 40%,transparent); }
  #page-myhub .pill.ach.accent{ background:color-mix(in oklab,var(--live) 18%,var(--panel)); color:var(--live); border-color:color-mix(in oklab,var(--live) 38%,transparent); }

  /* ---- FIX(b) action bar — three visually distinct actions ---- */
  #page-myhub .hub-actions{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:14px; }
  #page-myhub .hub-act{ font-size:16px; padding:13px 22px; border:1px solid transparent; font-weight:800; }
  #page-myhub .hub-act.act-log{ background:var(--accent); color:#fff; }
  #page-myhub .hub-act.act-log:hover{ background:var(--accent-bright); }
  #page-myhub .hub-act.act-class{ background:var(--gold); color:#1a1205; }
  #page-myhub .hub-act.act-class:hover{ filter:brightness(1.08); }
  #page-myhub .hub-act.act-live{ background:#E5484D; color:#fff; }
  #page-myhub .hub-act.act-live:hover{ background:#F25D62; }

  /* ---- Coach Info ---- */
  #page-myhub .info-list{ display:flex; flex-direction:column; gap:0; margin:0; }
  #page-myhub .info-row{ display:flex; justify-content:space-between; gap:12px; padding:9px 0; border-top:1px solid var(--line); align-items:baseline; }
  #page-myhub .info-row:first-child{ border-top:0; }
  #page-myhub .info-row dt{ font-family:var(--disp); font-weight:700; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--dim); flex:0 0 auto; }
  #page-myhub .info-row dd{ margin:0; font-size:13.5px; color:var(--ink); font-weight:600; text-align:right; min-width:0; }
  #page-myhub .mono-psn{ font-family:var(--disp); letter-spacing:.03em; }
  #page-myhub .info-link{ display:inline-flex; align-items:center; gap:5px; color:var(--accent-bright); font-weight:600; text-decoration:none; }
  #page-myhub .info-link:hover{ text-decoration:underline; }
  #page-myhub .info-bio{ font-size:13px; color:var(--ink-2); line-height:1.5; margin:12px 0 0; }
  #page-myhub .btn.full{ width:100%; justify-content:center; }

  /* ---- USDATV ---- */
  #page-myhub .usdatv-live-head{ display:flex; align-items:center; gap:9px; }
  #page-myhub .usdatv-live-txt{ font-family:var(--disp); font-weight:800; font-size:15px; letter-spacing:.03em; text-transform:uppercase; color:var(--live); }
  #page-myhub .usdatv-title{ font-size:13px; color:var(--ink-2); font-style:italic; margin-top:6px; }
  #page-myhub .usdatv-explain{ font-size:12.5px; color:var(--dim); line-height:1.45; margin:0 0 12px; }

  /* ---- shared form fields ---- */
  /* the hub's Log Score / Go Live drawer (.dw) is rendered OUTSIDE #page-myhub —
     .page.active animates transform, which would trap a position:fixed drawer.
     These hub form rules are extended to it so there is ONE definition, not two. */
  #page-myhub .field, .dw .field{ display:flex; flex-direction:column; gap:5px; }
  #page-myhub .field-l, .dw .field-l{ font-family:var(--disp); font-weight:700; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--dim); }
  #page-myhub .field-hint, .dw .field-hint{ font-size:11.5px; color:var(--mute); }
  #page-myhub .inp, .dw .inp{ width:100%; background:var(--panel-2); border:1px solid var(--line); border-radius:var(--r-sm); color:var(--ink);
    font-family:var(--body); font-size:14px; padding:9px 11px; transition:border-color .15s, box-shadow .15s; }
  #page-myhub textarea.inp, .dw textarea.inp{ resize:vertical; font-family:var(--body); }
  #page-myhub .inp:focus, .dw .inp:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in oklab,var(--accent) 25%,transparent); }
  #page-myhub select.inp, .dw select.inp{ appearance:none; cursor:pointer; }

  /* ---- Career LP ---- */
  #page-myhub .clp-total{ font-family:var(--disp); font-weight:900; font-size:44px; line-height:1; color:var(--accent-bright); font-variant-numeric:tabular-nums; }
  #page-myhub .clp-sub{ font-size:12.5px; color:var(--dim); margin-top:3px; }
  #page-myhub .clp-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:14px; }
  #page-myhub .clp-plat{ display:flex; flex-direction:column; gap:1px; background:var(--panel-2); border:1px solid var(--line); border-radius:var(--r-sm); padding:9px 10px; }
  #page-myhub .clp-plat-name{ font-family:var(--disp); font-weight:700; font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--dim); }
  #page-myhub .clp-plat-lp{ font-family:var(--disp); font-weight:800; font-size:19px; color:var(--ink); font-variant-numeric:tabular-nums; }
  #page-myhub .clp-plat-sub{ font-size:11px; color:var(--mute); }
  #page-myhub .clp-note{ font-size:11px; color:var(--mute); margin-top:10px; line-height:1.4; }
  #page-myhub .season-pills{ display:flex; flex-wrap:wrap; gap:6px; margin-top:13px; }
  #page-myhub .szn-pill{ display:inline-flex; align-items:center; gap:5px; background:var(--panel-2); border:1px solid var(--line);
    border-radius:var(--r-sm); padding:4px 9px; font-family:var(--disp); font-weight:700; font-size:11px; letter-spacing:.04em; color:var(--dim); }
  #page-myhub .szn-pill b{ color:var(--win); font-variant-numeric:tabular-nums; }
  #page-myhub .szn-pill.neg b{ color:var(--loss); }

  /* ---- Log Score ---- */
  #page-myhub .hub-logscore{ margin-bottom:6px; }
  #page-myhub .ls-summary{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between;
    padding:16px 18px; user-select:none; }
  #page-myhub .ls-summary::-webkit-details-marker{ display:none; }
  #page-myhub .ls-summary-t{ font-family:var(--disp); font-weight:800; font-size:17px; letter-spacing:.03em; text-transform:uppercase; color:var(--ink); }
  #page-myhub .ls-summary-x{ font-family:var(--disp); font-weight:800; font-size:20px; color:var(--me); transition:transform .2s var(--ease-out-quint); }
  #page-myhub details[open] .ls-summary-x{ transform:rotate(45deg); }
  #page-myhub .ls-fieldset{ border:1px solid var(--line); border-radius:var(--r); padding:14px; margin:0 0 16px; }
  #page-myhub .ls-legend{ font-family:var(--disp); font-weight:800; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--dim); padding:0 6px; }
  #page-myhub .ls-picks{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:10px; }
  #page-myhub .ls-pick input{ position:absolute; opacity:0; pointer-events:none; }
  #page-myhub .ls-pick-card{ display:flex; flex-direction:column; gap:6px; padding:11px 12px; border:1px solid var(--line);
    border-radius:var(--r-sm); background:var(--panel-2); cursor:pointer; transition:border-color .15s, background-color .15s; }
  #page-myhub .ls-pick input:checked + .ls-pick-card{ border-color:var(--me); background:color-mix(in oklab,var(--me) 12%,var(--panel-2)); }
  #page-myhub .ls-pick-card:hover{ border-color:var(--line-bright); }
  #page-myhub .ls-pick-wk{ display:flex; align-items:center; gap:8px; font-family:var(--disp); font-weight:800; font-size:13px; letter-spacing:.04em; color:var(--ink); }
  #page-myhub .ls-pick-opp{ display:flex; align-items:center; gap:6px; font-size:13px; color:var(--ink-2); font-weight:600; }
  #page-myhub .ls-loc, .dw .ls-loc{ font-family:var(--disp); font-weight:800; font-size:9.5px; letter-spacing:.08em; padding:2px 6px; border-radius:5px; flex:0 0 auto; }
  #page-myhub .ls-loc.home, .dw .ls-loc.home{ background:color-mix(in oklab,var(--win) 18%,var(--panel)); color:var(--win); }
  #page-myhub .ls-loc.away, .dw .ls-loc.away{ background:var(--panel-2); color:var(--dim); border:1px solid var(--line); }
  #page-myhub #manualFields{ display:none; }
  #page-myhub #manualFields.show{ display:block; }
  #page-myhub .ls-homeaway, .dw .ls-homeaway{ display:flex; gap:10px; flex-wrap:wrap; margin-top:12px; }
  #page-myhub .ls-ha, .dw .ls-ha{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--ink-2); cursor:pointer; }
  #page-myhub .ls-ha input, .dw .ls-ha input{ accent-color:var(--me); }
  #page-myhub .ls-preview{ display:flex; align-items:center; justify-content:center; gap:clamp(14px,4vw,40px);
    background:var(--panel-2); border:1px solid var(--line); border-radius:var(--r); padding:18px; margin:16px 0; }
  #page-myhub .ls-prev-side{ display:flex; flex-direction:column; align-items:center; gap:7px; }
  #page-myhub .ls-prev-name{ font-family:var(--disp); font-weight:800; font-size:15px; letter-spacing:.03em; text-transform:uppercase; color:var(--ink); }
  #page-myhub .ls-prev-vs{ font-family:var(--disp); font-weight:900; font-size:18px; color:var(--mute); }
  #page-myhub .ls-sim, .dw .ls-sim{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--ink-2); cursor:pointer; margin-top:14px; }
  #page-myhub .ls-sim input, .dw .ls-sim input{ accent-color:var(--me); }
  #page-myhub .ls-foot{ font-size:11.5px; color:var(--mute); line-height:1.45; margin:12px 0 0; }

  /* ---- Class Composition ---- */
  #page-myhub .star-strip{ display:grid; grid-template-columns:repeat(5,1fr); gap:8px; }
  #page-myhub .star-cell{ display:flex; flex-direction:column; align-items:center; gap:2px; background:var(--panel-2);
    border:1px solid var(--line); border-radius:var(--r-sm); padding:11px 6px; }
  #page-myhub .star-glyphs{ font-size:13px; letter-spacing:.02em; line-height:1; }
  #page-myhub .star-count{ font-family:var(--disp); font-weight:900; font-size:22px; color:var(--ink); font-variant-numeric:tabular-nums; }
  #page-myhub .star-lbl{ font-family:var(--disp); font-weight:700; font-size:9.5px; letter-spacing:.06em; color:var(--dim); }
  #page-myhub .star-rank-5 .star-glyphs{ color:var(--gold); }
  #page-myhub .star-rank-4 .star-glyphs{ color:#7FC8FF; }
  #page-myhub .star-rank-3 .star-glyphs{ color:var(--win); }
  #page-myhub .star-rank-2 .star-glyphs{ color:var(--dim); }
  #page-myhub .star-rank-1 .star-glyphs{ color:var(--mute); }
  #page-myhub .comp-h{ font-family:var(--disp); font-weight:800; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2); margin:4px 0 12px; }
  #page-myhub .headliner{ position:relative; background:var(--panel-2); border:1px solid var(--line); border-radius:var(--r-sm);
    padding:13px 14px 13px 16px; overflow:hidden; }
  #page-myhub .headliner::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--hc); }
  #page-myhub .hl-pos{ font-family:var(--disp); font-weight:800; font-size:12px; letter-spacing:.06em; color:var(--dim); display:flex; align-items:center; gap:7px; }
  #page-myhub .portal-tag{ font-size:8.5px; background:color-mix(in oklab,var(--accent) 24%,var(--panel)); color:var(--accent-bright); padding:1px 5px; border-radius:4px; letter-spacing:.06em; }
  #page-myhub .hl-name{ font-family:var(--disp); font-weight:800; font-size:18px; letter-spacing:.01em; color:var(--ink); margin-top:3px; }
  #page-myhub .hl-meta{ margin-top:5px; }
  #page-myhub .hl-nil{ font-family:var(--disp); font-weight:800; font-size:16px; color:var(--gold); margin-top:7px; font-variant-numeric:tabular-nums; }
  #page-myhub .commit-row{ display:flex; align-items:center; gap:10px; padding:9px 4px; border-top:1px solid var(--line); }
  #page-myhub .commit-row:first-child{ border-top:0; }
  #page-myhub .cr-pos{ font-family:var(--disp); font-weight:800; font-size:12px; color:var(--dim); width:42px; flex:0 0 auto; letter-spacing:.04em; }
  #page-myhub .cr-name{ font-weight:600; font-size:14px; color:var(--ink); flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  #page-myhub .portal-mark{ color:var(--accent-bright); font-weight:800; }
  #page-myhub .cr-nil{ font-family:var(--disp); font-weight:800; font-size:15px; color:var(--gold); flex:0 0 auto; font-variant-numeric:tabular-nums; }

  /* tier + status + pipeline pills (shared) */
  #page-myhub .tier-pill{ font-family:var(--disp); font-weight:700; font-size:10px; letter-spacing:.04em; text-transform:uppercase;
    padding:3px 8px; border-radius:6px; flex:0 0 auto; white-space:nowrap; }
  #page-myhub .tier-pill.tr-5{ background:color-mix(in oklab,var(--gold) 20%,var(--panel)); color:var(--gold); }
  #page-myhub .tier-pill.tr-4{ background:color-mix(in oklab,#7FC8FF 18%,var(--panel)); color:#9FD4FF; }
  #page-myhub .tier-pill.tr-3{ background:color-mix(in oklab,var(--win) 16%,var(--panel)); color:var(--win); }
  #page-myhub .tier-pill.tr-2{ background:var(--panel-2); color:var(--dim); }
  #page-myhub .tier-pill.tr-1{ background:var(--panel-2); color:var(--mute); }
  #page-myhub .pill.st-signed{ background:color-mix(in oklab,var(--win) 18%,var(--panel)); color:var(--win); border-color:transparent; }
  #page-myhub .pill.st-committed{ background:color-mix(in oklab,var(--accent) 18%,var(--panel)); color:var(--accent-bright); border-color:transparent; }
  #page-myhub .pill.st-target{ background:var(--panel-2); color:var(--dim); border-color:var(--line); }
  #page-myhub .pipe-pill{ font-family:var(--disp); font-weight:700; font-size:10px; letter-spacing:.05em; padding:2px 7px; border-radius:5px; background:var(--panel-2); color:var(--dim); border:1px solid var(--line); }
  #page-myhub .pipe-pill.out{ background:color-mix(in oklab,var(--live) 16%,var(--panel)); color:var(--live); border-color:transparent; }

  /* ---- Current Recruiting Class ---- */
  #page-myhub .rc-top{ display:grid; grid-template-columns:auto 1fr; gap:20px; align-items:center; }
  #page-myhub .rc-cap{ display:flex; flex-direction:column; gap:2px; }
  #page-myhub .rc-cap-k{ font-family:var(--disp); font-weight:700; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--dim); }
  #page-myhub .rc-cap-v{ font-family:var(--disp); font-weight:900; font-size:52px; line-height:1; color:var(--accent-bright); font-variant-numeric:tabular-nums; }
  #page-myhub .rc-stats{ display:grid; grid-template-columns:repeat(5,1fr); gap:10px; }
  #page-myhub .rc-tier-stars{ color:var(--gold); font-size:13px; }
  #page-myhub .rc-bar-block{ margin-top:16px; }
  #page-myhub .rc-bar-head{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:7px; }
  #page-myhub .rc-bar-rem{ font-family:var(--disp); font-weight:700; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--dim); }
  #page-myhub .rc-bar-rem b{ color:var(--ink); font-size:14px; }
  #page-myhub .rc-bar-pct{ font-family:var(--disp); font-weight:700; font-size:11px; letter-spacing:.06em; color:var(--dim); }

  /* ---- Schedule ---- */
  #page-myhub .sched-grouplbl{ font-family:var(--disp); font-weight:800; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--dim); padding:11px 8px 5px; }
  #page-myhub .sched-row{ display:flex; align-items:center; gap:9px; padding:9px 8px; border-radius:var(--r-sm); transition:background-color .15s; }
  #page-myhub .sched-row:hover{ background:var(--hover-row); }
  #page-myhub .sched-wk{ font-family:var(--disp); font-weight:800; font-size:13px; color:var(--dim); width:30px; flex:0 0 auto; letter-spacing:.03em; }
  #page-myhub .sched-vs{ color:var(--mute); font-weight:700; font-size:12px; }
  #page-myhub .sched-opp{ font-weight:600; font-size:13.5px; color:var(--ink); flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  #page-myhub .sched-state{ font-size:11.5px; color:var(--mute); font-weight:500; margin-left:auto; flex:0 0 auto; }
  #page-myhub .sched-dash{ color:var(--mute); }
  #page-myhub .sched-score{ font-family:var(--disp); font-weight:800; font-size:15px; color:var(--ink); margin-left:auto; flex:0 0 auto; font-variant-numeric:tabular-nums; }
  #page-myhub .sched-edit{ background:transparent; border:1px solid var(--line); color:var(--dim); border-radius:6px; width:26px; height:26px;
    cursor:pointer; flex:0 0 auto; transition:border-color .15s, color .15s; font-size:13px; }
  #page-myhub .sched-edit:hover{ border-color:var(--accent); color:var(--accent-bright); }
  #page-myhub .sched-lock{ color:var(--mute); flex:0 0 auto; cursor:help; font-size:13px; }
  #page-myhub .pill.win{ background:color-mix(in oklab,var(--win) 22%,var(--panel)); color:var(--win); border-color:transparent; }
  #page-myhub .pill.loss{ background:color-mix(in oklab,var(--loss) 22%,var(--panel)); color:var(--loss); border-color:transparent; }
  #page-myhub .pill.fine{ background:color-mix(in oklab,var(--loss) 14%,var(--panel)); color:var(--loss); border-color:transparent; cursor:help; }

  /* ---- Fines ---- */
  #page-myhub .fines-impact{ font-family:var(--disp); font-weight:800; font-size:14px; font-variant-numeric:tabular-nums; }
  #page-myhub .fines-impact.danger{ color:var(--loss); }
  #page-myhub .fines-sub{ font-family:var(--disp); font-weight:700; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--dim); margin-bottom:10px; }
  #page-myhub .fine-item{ display:flex; align-items:flex-start; gap:10px; padding:11px 4px; border-top:1px solid var(--line); }
  #page-myhub .fine-item:first-of-type{ border-top:0; }
  #page-myhub .fine-body{ flex:1; min-width:0; }
  #page-myhub .fine-title{ font-weight:600; font-size:13.5px; color:var(--ink); line-height:1.35; }
  #page-myhub .fine-meta{ font-size:11.5px; color:var(--dim); margin-top:3px; }
  #page-myhub .fine-amt{ font-family:var(--disp); font-weight:800; font-size:15px; flex:0 0 auto; font-variant-numeric:tabular-nums; }
  #page-myhub .fine-amt.danger{ color:var(--loss); }
  #page-myhub .fine-amt.win{ color:var(--win); }
  #page-myhub .pill.fine-pill-penalty{ background:color-mix(in oklab,var(--loss) 16%,var(--panel)); color:var(--loss); border-color:transparent; flex:0 0 auto; }
  #page-myhub .pill.fine-pill-bonus{ background:color-mix(in oklab,var(--win) 16%,var(--panel)); color:var(--win); border-color:transparent; flex:0 0 auto; }
  #page-myhub .fine-del button{ background:transparent; border:1px solid var(--line); color:var(--mute); border-radius:6px; width:22px; height:22px; cursor:pointer; flex:0 0 auto; }
  #page-myhub .fine-del button:hover{ border-color:var(--loss); color:var(--loss); }
  #page-myhub .fine-item.ro{ opacity:.92; }
  #page-myhub .fines-past{ margin-top:12px; border-top:1px solid var(--line); padding-top:10px; }
  #page-myhub .fines-past summary{ font-family:var(--disp); font-weight:700; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--dim); cursor:pointer; }
  #page-myhub .fines-past-head{ display:flex; justify-content:space-between; font-family:var(--disp); font-weight:800; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-2); margin:12px 0 4px; }
  #page-myhub .fines-past-head .num{ color:var(--loss); }

  /* ---- Notes / Complaints ---- */
  #page-myhub .card-sub{ font-size:12px; color:var(--dim); margin-bottom:12px; line-height:1.4; }
  #page-myhub .note-item{ padding:11px 0; border-top:1px solid var(--line); }
  #page-myhub .note-item:first-child{ border-top:0; padding-top:0; }
  #page-myhub .note-name{ font-family:var(--disp); font-weight:800; font-size:15px; letter-spacing:.02em; color:var(--ink); }
  #page-myhub .note-meta{ font-size:11px; color:var(--dim); font-weight:600; margin-top:2px; }
  #page-myhub .note-txt{ font-size:13px; color:var(--ink-2); line-height:1.45; margin-top:5px; }
  #page-myhub .cmp-item{ padding:11px 0; border-top:1px solid var(--line); }
  #page-myhub .cmp-item:first-of-type{ border-top:0; padding-top:0; }
  #page-myhub .cmp-item.pending{ box-shadow:inset 3px 0 0 var(--live); padding-left:11px; border-radius:2px; }
  #page-myhub .cmp-top{ display:flex; justify-content:space-between; align-items:center; gap:8px; }
  #page-myhub .cmp-id{ font-family:var(--disp); font-weight:700; font-size:11px; letter-spacing:.04em; color:var(--dim); }
  #page-myhub .cmp-title{ font-weight:600; font-size:13.5px; color:var(--ink); margin-top:5px; }
  #page-myhub .cmp-target{ font-size:12px; color:var(--dim); margin-top:2px; }
  #page-myhub .cmp-fee{ font-size:11.5px; color:var(--mute); line-height:1.4; margin-top:12px; border-top:1px solid var(--line); padding-top:10px; }

  /* ---- Past Classes ---- */
  #page-myhub .pc-row{ display:flex; align-items:center; gap:10px; padding:11px 10px; border-radius:var(--r-sm); cursor:pointer; transition:background-color .15s; }
  #page-myhub .pc-row + .pc-row{ border-top:1px solid var(--line); }
  #page-myhub .pc-row:hover{ background:var(--hover-row); }
  #page-myhub .pc-szn{ font-family:var(--disp); font-weight:800; font-size:13px; letter-spacing:.03em; color:var(--ink); width:120px; flex:0 0 auto; }
  #page-myhub .pc-team{ font-weight:600; font-size:13.5px; color:var(--ink-2); flex:1; min-width:0; }
  #page-myhub .pc-stat{ font-size:12px; color:var(--dim); font-weight:500; flex:0 0 auto; }
  #page-myhub .pc-pager{ display:flex; align-items:center; justify-content:center; gap:14px; padding:10px 6px 4px; }
  #page-myhub .pc-info{ font-family:var(--disp); font-weight:700; font-size:12px; letter-spacing:.04em; color:var(--dim); }

  #page-myhub .home-footer-mh{ text-align:center; font-family:var(--disp); font-weight:800; font-size:13px; letter-spacing:.18em; text-transform:uppercase; color:var(--dim); padding:26px 0 8px; }

  /* ============ current-platform headline — twin glowing Rank + LP ============ */
  #page-myhub .hub-stat-hero{ display:flex; align-items:center; justify-content:space-between; gap:18px;
    flex-wrap:wrap; margin:14px 0 4px; padding:clamp(16px,2.4vw,26px) clamp(18px,2.6vw,30px);
    border:1px solid var(--line-bright); border-radius:var(--r-lg); text-decoration:none;
    background:
      radial-gradient(120% 160% at 85% 0%, color-mix(in oklab,var(--accent) 16%,transparent), transparent 60%),
      linear-gradient(180deg, var(--panel-2), var(--panel));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 18px 40px -26px color-mix(in oklab,var(--accent) 80%,transparent);
    transition:transform .16s var(--ease-out-quint), border-color .2s, box-shadow .2s; }
  #page-myhub .hub-stat-hero:hover{ transform:translateY(-2px); border-color:var(--accent);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 26px 54px -24px color-mix(in oklab,var(--accent) 90%,transparent); }
  #page-myhub .hsh-stats{ display:flex; align-items:center; gap:clamp(16px,3vw,40px); flex-wrap:wrap; }
  #page-myhub .hsh-stat{ display:flex; flex-direction:column; gap:2px; }
  #page-myhub .hsh-num{ font-family:var(--disp); font-weight:900; font-size:clamp(40px,7vw,66px); line-height:.92;
    color:var(--ink); font-variant-numeric:tabular-nums; letter-spacing:-.01em;
    text-shadow:0 0 26px color-mix(in oklab,var(--accent) 55%,transparent); }
  #page-myhub .hsh-rank .hsh-num{ color:var(--gold); text-shadow:0 0 26px color-mix(in oklab,var(--gold) 50%,transparent); }
  #page-myhub .hsh-lp .hsh-num{ color:var(--accent-bright); text-shadow:0 0 28px color-mix(in oklab,var(--accent) 60%,transparent); }
  #page-myhub .hsh-hash{ font-size:.6em; vertical-align:.12em; opacity:.85; margin-right:.02em; }
  #page-myhub .hsh-lbl{ font-family:var(--disp); font-weight:800; font-size:11px; letter-spacing:.1em;
    text-transform:uppercase; color:var(--dim); }
  #page-myhub .hsh-div{ width:1px; align-self:stretch; min-height:46px;
    background:linear-gradient(180deg,transparent,var(--line-bright),transparent); }
  #page-myhub .hsh-cta{ font-family:var(--disp); font-weight:800; font-size:13px; letter-spacing:.05em;
    text-transform:uppercase; color:var(--accent-bright); display:inline-flex; align-items:center; gap:7px; }
  #page-myhub .hsh-arrow{ transition:transform .2s var(--ease-out-expo); }
  #page-myhub .hub-stat-hero:hover .hsh-arrow{ transform:translateX(4px); }

  /* ============ attention strip — warning + Fines/Complaints counter-nodes ============ */
  #page-myhub .attn-strip{ display:flex; flex-wrap:wrap; align-items:flex-start; gap:9px; margin:10px 0 2px; }
  #page-myhub .attn-node{ display:inline-flex; align-items:center; gap:8px; padding:8px 13px;
    border:1px solid var(--line-bright); border-radius:999px; background:var(--panel-2);
    font-family:var(--disp); font-weight:800; font-size:13px; letter-spacing:.03em; color:var(--ink-2);
    cursor:pointer; list-style:none; user-select:none; white-space:nowrap; text-decoration:none;
    transition:border-color .16s, color .16s, background-color .16s, transform .12s var(--ease-out-quint); }
  #page-myhub .attn-node::-webkit-details-marker{ display:none; }
  #page-myhub .attn-node:hover{ border-color:var(--accent); color:var(--ink); }
  #page-myhub .attn-node:active{ transform:scale(.97); }
  #page-myhub .attn-ic{ font-size:14px; line-height:1; }
  #page-myhub .attn-x{ font-family:var(--disp); font-weight:800; font-size:15px; color:var(--dim); margin-left:2px;
    transition:transform .2s var(--ease-out-quint); }
  #page-myhub .cnode[open] > .attn-node .attn-x{ transform:rotate(45deg); }
  #page-myhub .attn-impact{ font-variant-numeric:tabular-nums; font-size:12px; }
  #page-myhub .attn-impact.danger{ color:var(--loss); }
  #page-myhub .attn-impact.win{ color:var(--win); }
  /* needs-a-score warning — lights up amber */
  #page-myhub .attn-warn{ color:var(--live); border-color:color-mix(in oklab,var(--live) 50%,var(--line));
    background:color-mix(in oklab,var(--live) 14%,var(--panel));
    box-shadow:0 0 18px -6px color-mix(in oklab,var(--live) 70%,transparent); }
  #page-myhub .attn-warn:hover{ border-color:var(--live); color:var(--live); }
  /* zero-state node — quiet/muted, no glow; non-zero lights up toward accent */
  #page-myhub .cnode.is-quiet > .attn-node{ color:var(--mute); border-color:var(--line); background:transparent; }
  #page-myhub .cnode:not(.is-quiet) > .attn-node{ color:var(--ink);
    border-color:color-mix(in oklab,var(--accent) 40%,var(--line)); }
  /* drawer: the open node spans the full row; its body drops below full-width */
  #page-myhub .cnode{ flex:0 0 auto; }
  #page-myhub .cnode[open]{ flex:1 1 100%; }
  #page-myhub .cnode-body{ margin-top:9px; }
  #page-myhub .cnode-body.panel{ animation:cnodeIn .22s var(--ease-out-quint) both; }
  @keyframes cnodeIn{ from{ opacity:0; transform:translateY(-5px); } to{ opacity:1; transform:none; } }

  /* ============ schedule (under Log Score) — warning + full-schedule drawer ============ */
  #page-myhub .sched-warn{ display:flex; align-items:center; gap:10px; margin:6px 6px 10px; padding:11px 13px;
    border-radius:var(--r-sm); text-decoration:none;
    border:1px solid color-mix(in oklab,var(--live) 50%,var(--line));
    background:color-mix(in oklab,var(--live) 13%,var(--panel));
    box-shadow:0 0 20px -8px color-mix(in oklab,var(--live) 70%,transparent);
    transition:border-color .16s, transform .12s var(--ease-out-quint); }
  #page-myhub .sched-warn:hover{ border-color:var(--live); transform:translateY(-1px); }
  #page-myhub .sched-warn-ic{ font-size:17px; line-height:1; }
  #page-myhub .sched-warn-tx{ flex:1; min-width:0; font-size:13.5px; color:var(--ink-2); }
  #page-myhub .sched-warn-tx b{ color:var(--live); font-family:var(--disp); font-weight:800; }
  #page-myhub .sched-warn-cta{ font-family:var(--disp); font-weight:800; font-size:12px; letter-spacing:.04em;
    text-transform:uppercase; color:var(--live); flex:0 0 auto; }
  #page-myhub .sched-full{ margin-top:8px; border-top:1px solid var(--line); }
  #page-myhub .sched-full-sum{ display:flex; align-items:center; justify-content:space-between; cursor:pointer;
    list-style:none; padding:11px 8px 6px; font-family:var(--disp); font-weight:800; font-size:11.5px;
    letter-spacing:.08em; text-transform:uppercase; color:var(--dim); }
  #page-myhub .sched-full-sum::-webkit-details-marker{ display:none; }
  #page-myhub .sched-full-sum:hover{ color:var(--ink-2); }
  #page-myhub .sched-full-x{ font-family:var(--disp); font-weight:800; font-size:16px; color:var(--dim);
    transition:transform .2s var(--ease-out-quint); }
  #page-myhub .sched-full[open] .sched-full-x{ transform:rotate(45deg); }

  @media (prefers-reduced-motion: reduce){
    #page-myhub .hub-stat-hero, #page-myhub .hsh-arrow, #page-myhub .attn-x,
    #page-myhub .sched-full-x, #page-myhub .sched-warn{ transition:none; }
    #page-myhub .hub-stat-hero:hover, #page-myhub .sched-warn:hover{ transform:none; }
    #page-myhub .cnode-body.panel{ animation:none; }
  }

  /* ---- responsive ---- */
  @media (max-width:1100px){
    #page-myhub .hub-top{ grid-template-columns:1fr 1fr; }
    #page-myhub .rc-stats{ grid-template-columns:repeat(3,1fr); }
  }
  @media (max-width:920px){
    #page-myhub .rc-top{ grid-template-columns:1fr; gap:12px; }
  }
  @media (max-width:760px){
    #page-myhub .hub-top{ grid-template-columns:1fr; }
    #page-myhub .hub-logo{ --logo-sz:62px; }
    #page-myhub .clp-grid{ grid-template-columns:1fr; }
    #page-myhub .star-strip{ grid-template-columns:repeat(2,1fr); }
    #page-myhub .rc-stats{ grid-template-columns:repeat(2,1fr); }
    #page-myhub .hub-act-primary{ flex:1 0 100%; }
    #page-myhub .pc-szn{ width:auto; }
    #page-myhub .pc-stat{ display:none; }
  }
  @media (max-width:420px){
    #page-myhub .rc-cap-v{ font-size:42px; }
    #page-myhub .rc-stats{ grid-template-columns:1fr; }
    #page-myhub .star-strip{ grid-template-columns:1fr; }
  }

/* ======================== PAGE: usdatv ======================== */

  /* pulsing red header dot */
  #page-usdatv .tv-dot{ display:inline-block; width:11px; height:11px; border-radius:50%; background:var(--loss);
    box-shadow:0 0 10px var(--loss); margin-right:9px; vertical-align:middle; animation:pulse 1.6s ease-in-out infinite; }
  #page-usdatv .tv-lede{ color:var(--ink-2); font-size:14.5px; margin:2px 0 8px; display:flex; align-items:center;
    gap:12px; flex-wrap:wrap; }
  #page-usdatv .tv-count{ font-family:var(--disp); font-weight:800; font-size:12px; letter-spacing:.05em;
    text-transform:uppercase; color:var(--loss); background:color-mix(in oklab,var(--loss) 12%,var(--panel-2));
    border:1px solid color-mix(in oklab,var(--loss) 40%,var(--line)); padding:4px 10px; border-radius:999px;
    font-variant-numeric:tabular-nums; }

  /* HERO */
  #page-usdatv .tv-hero{ border:1px solid var(--line); border-radius:var(--r-xl); overflow:hidden; background:var(--panel);
    box-shadow:var(--shadow-card); margin-top:4px; }
  #page-usdatv .tv-player{ position:relative; display:block; aspect-ratio:16/9; background:#000; overflow:hidden;
    text-decoration:none; }
  #page-usdatv .tv-thumb-img{ width:100%; height:100%; object-fit:cover; display:block; }
  #page-usdatv .tv-thumb-fallback{ position:absolute; inset:0; display:none; align-items:center; justify-content:center;
    font-size:clamp(34px,7vw,60px); color:var(--dim); background:
    radial-gradient(120% 120% at 50% 0%, color-mix(in oklab,var(--me) 18%,#0b0f16) 0%, #0b0f16 70%); }
  #page-usdatv .tv-live-badge{ position:absolute; top:13px; left:13px; z-index:2; font-family:var(--disp); font-weight:800;
    font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:#fff;
    background:var(--loss); padding:5px 10px; border-radius:6px; display:inline-flex; align-items:center; gap:6px;
    box-shadow:0 4px 14px -4px var(--loss); }
  #page-usdatv .tv-live-badge .dot{ width:6px; height:6px; border-radius:50%; background:#fff; animation:pulse 1.6s ease-in-out infinite; }
  #page-usdatv .tv-live-badge.sm{ top:9px; left:9px; font-size:10px; padding:4px 8px; }
  #page-usdatv .tv-viewers{ position:absolute; top:13px; right:13px; z-index:2; font-family:var(--disp); font-weight:700;
    font-size:12px; letter-spacing:.04em; text-transform:uppercase; color:var(--ink); background:var(--scrim);
    border:1px solid var(--line); padding:5px 10px; border-radius:999px; display:inline-flex; align-items:center; gap:6px;
    font-variant-numeric:tabular-nums; backdrop-filter:blur(6px); }
  #page-usdatv .tv-play{ position:absolute; inset:0; z-index:1; margin:auto; width:clamp(56px,9vw,76px); height:clamp(56px,9vw,76px);
    border-radius:50%; border:1px solid color-mix(in oklab,var(--me) 60%,var(--line));
    background:color-mix(in oklab,var(--me) 80%,#000); color:#fff; display:flex; align-items:center; justify-content:center;
    box-shadow:0 14px 40px -10px var(--me); transition:transform .16s var(--ease-out-quint),filter .16s; }
  #page-usdatv .tv-player:hover .tv-play{ transform:scale(1.07); filter:brightness(1.12); }
  #page-usdatv .tv-play-tri{ font-size:clamp(20px,3vw,26px); margin-left:4px; }

  #page-usdatv .tv-hero-meta{ display:flex; align-items:center; gap:16px; flex-wrap:wrap;
    padding:clamp(14px,2vw,20px); border-top:1px solid var(--line); }
  #page-usdatv .tv-hero-info{ flex:1; min-width:240px; }
  #page-usdatv .tv-hero-host{ display:flex; align-items:center; gap:9px; margin-bottom:10px; }
  #page-usdatv .tv-host-n{ font-family:var(--disp); font-weight:800; font-size:14px; letter-spacing:.03em; color:var(--ink); }
  #page-usdatv .tv-host-s{ font-size:12px; color:var(--dim); font-weight:500; }
  #page-usdatv .tv-hero-title{ font-family:var(--disp); font-weight:900; font-size:clamp(24px,3.4vw,34px); line-height:1;
    letter-spacing:.005em; text-transform:uppercase; margin:0; }
  #page-usdatv .tv-hero-sub{ font-family:var(--disp); font-weight:700; font-size:12px; letter-spacing:.05em;
    text-transform:uppercase; color:var(--dim); margin-top:7px; }
  #page-usdatv .tv-hero-desc{ font-size:13.5px; color:var(--ink-2); margin-top:8px; max-width:48ch; }
  #page-usdatv .tv-hero-cta{ display:flex; flex-direction:column; gap:7px; align-items:stretch; min-width:170px; }
  #page-usdatv .tv-cta-sub{ font-size:11.5px; color:var(--dim); font-weight:600; text-align:center; font-variant-numeric:tabular-nums; }

  /* LIVE / SCHEDULED CARDS */
  #page-usdatv .tv-card{ display:block; text-decoration:none; background:var(--panel); border:1px solid var(--line);
    border-radius:var(--r-lg); overflow:hidden; transition:transform .15s var(--ease-out-quint),border-color .15s,box-shadow .15s; }
  #page-usdatv a.tv-card:hover{ transform:translateY(-3px); border-color:var(--accent); box-shadow:var(--shadow-lift); }
  #page-usdatv .tv-card.sched{ border-style:dashed; }
  #page-usdatv .tv-thumb{ position:relative; aspect-ratio:16/9; background:#000; overflow:hidden; display:block; }
  #page-usdatv .tv-thumb .tv-thumb-img{ width:100%; height:100%; object-fit:cover; }
  #page-usdatv .tv-thumb .tv-thumb-fallback{ background:
    radial-gradient(120% 120% at 50% 0%, color-mix(in oklab,var(--accent) 12%,#0b0f16), #0b0f16 72%); }
  #page-usdatv .tv-when{ position:absolute; top:9px; right:9px; z-index:2; font-family:var(--disp); font-weight:700;
    font-size:10.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink); background:var(--scrim);
    border:1px solid var(--line); padding:4px 8px; border-radius:999px; backdrop-filter:blur(6px); }
  #page-usdatv .tv-card-b{ padding:12px 14px; }
  #page-usdatv .tv-card-host{ display:flex; align-items:center; gap:8px; }
  #page-usdatv .tv-psn{ font-family:var(--disp); font-weight:800; font-size:14px; letter-spacing:.02em; color:var(--ink); }
  #page-usdatv .tv-card-matchup{ display:flex; align-items:center; flex-wrap:wrap; gap:4px; font-family:var(--disp);
    font-weight:700; font-size:11.5px; letter-spacing:.04em; text-transform:uppercase; color:var(--dim); margin-top:8px; }
  #page-usdatv .tv-card-title{ font-size:13px; color:var(--ink-2); margin-top:6px; line-height:1.35; }

  /* logo sizing : 22px on USDA-TV per spec (logo-sm default 22) */
  #page-usdatv .logo-wrap.logo-sm{ --logo-sz:22px; }

  /* COACHES STRIP */
  #page-usdatv .coach-rail{ display:grid; grid-template-columns:1fr 1fr; gap:9px; }
  #page-usdatv .coach{ display:flex; align-items:center; gap:10px; padding:9px 11px; border-radius:var(--r);
    background:var(--panel-2); border:1px solid var(--line); text-decoration:none;
    transition:border-color .15s,background-color .15s; }
  #page-usdatv a.coach:hover{ border-color:var(--line-bright); background:var(--hover-row); }
  #page-usdatv .coach .cn{ font-family:var(--disp); font-weight:700; font-size:13px; letter-spacing:.02em; color:var(--ink); min-width:0;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  #page-usdatv .coach .ch-resolve{ margin-left:auto; flex:0 0 auto; font-size:11px; }
  #page-usdatv .coach .ch-resolve.ok{ color:var(--win); }
  #page-usdatv .coach .ch-resolve.no{ color:var(--mute); }
  #page-usdatv .coach .cs{ flex:0 0 auto; font-family:var(--disp); font-weight:700; font-size:10px; letter-spacing:.05em;
    text-transform:uppercase; padding:3px 7px; border-radius:999px; border:1px solid var(--line); }
  #page-usdatv .coach .cs.off{ color:var(--mute); }
  #page-usdatv .tv-resolve-meta{ display:flex; gap:8px; flex-wrap:wrap; margin-top:13px; padding-top:13px; border-top:1px solid var(--line); }

  /* HOW IT WORKS */
  #page-usdatv .tv-how{ border:1px solid var(--line); border-radius:var(--r-lg); background:var(--panel);
    padding:clamp(16px,2.2vw,22px); display:flex; flex-direction:column; }
  #page-usdatv .how-step{ display:flex; gap:12px; align-items:flex-start; padding:9px 0; }
  #page-usdatv .how-step + .how-step{ border-top:1px solid var(--line); }
  #page-usdatv .how-ic{ flex:0 0 auto; width:36px; height:36px; border-radius:10px; display:flex; align-items:center;
    justify-content:center; font-size:17px; }
  #page-usdatv .how-ic.me{ background:color-mix(in oklab,var(--me) 16%,var(--panel-2)); border:1px solid color-mix(in oklab,var(--me) 40%,var(--line)); }
  #page-usdatv .how-ic.accent{ background:color-mix(in oklab,var(--accent) 14%,var(--panel-2)); border:1px solid color-mix(in oklab,var(--accent) 40%,var(--line)); color:var(--accent-bright); }
  #page-usdatv .how-h{ font-family:var(--disp); font-weight:800; font-size:14px; letter-spacing:.02em; text-transform:uppercase; color:var(--ink); }
  #page-usdatv .how-p{ font-size:12.5px; color:var(--ink-2); margin:4px 0 0; line-height:1.45; }
  #page-usdatv .how-foot{ font-size:12px; color:var(--dim); margin:0; line-height:1.45; }

  /* EMPTY STATE */
  #page-usdatv .tv-empty{ border:1px dashed var(--line-bright); border-radius:var(--r-lg); background:var(--panel);
    padding:clamp(28px,5vw,48px); text-align:center; margin-top:8px; }
  #page-usdatv .tv-empty-ic{ font-size:42px; line-height:1; }
  #page-usdatv .tv-empty-h{ font-family:var(--disp); font-weight:900; font-size:22px; letter-spacing:.02em;
    text-transform:uppercase; color:var(--ink); margin-top:12px; }
  #page-usdatv .tv-empty-p{ font-size:14px; color:var(--dim); max-width:44ch; margin:8px auto 0; }

  @media (prefers-reduced-motion:reduce){
    #page-usdatv .tv-dot,#page-usdatv .tv-live-badge .dot{ animation:none; }
  }
  @media (max-width:920px){
    #page-usdatv .grid[style*="1.55fr"]{ grid-template-columns:1fr !important; }
  }
  @media (max-width:760px){
    #page-usdatv .tv-hero-meta{ flex-direction:column; align-items:stretch; }
    #page-usdatv .coach-rail{ grid-template-columns:1fr; }
  }

/* ======================== PAGE: scoreboard ======================== */

  /* header */
  #page-scoreboard .sb-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:18px;
    flex-wrap:wrap; margin-bottom:14px; }
  #page-scoreboard .sb-head-l{ min-width:0; }
  #page-scoreboard .sb-eyebrow{ font-family:var(--disp); font-weight:800; font-size:12px; letter-spacing:.14em;
    text-transform:uppercase; color:var(--dim); }
  #page-scoreboard .sb-title-row{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:5px; }
  #page-scoreboard .sb-title{ font-family:var(--disp); font-weight:900; font-size:clamp(34px,5vw,54px); line-height:.95;
    letter-spacing:-.01em; text-transform:uppercase; color:var(--ink); margin:0; }
  #page-scoreboard .sb-wkstatus{ position:relative; top:2px; }
  #page-scoreboard .sb-wkstatus.played{ background:color-mix(in oklab,var(--mute) 20%,transparent); color:var(--dim);
    border-color:var(--line); }
  #page-scoreboard .sb-wkstatus.upcoming{ background:color-mix(in oklab,var(--accent) 16%,transparent); color:var(--accent-bright);
    border-color:color-mix(in oklab,var(--accent) 40%,var(--line)); }
  #page-scoreboard .sb-wkstatus.mixed{ background:color-mix(in oklab,var(--live) 18%,transparent); color:var(--live);
    border-color:color-mix(in oklab,var(--live) 45%,var(--line)); }
  #page-scoreboard .sb-lede{ color:var(--ink-2); font-size:14.5px; margin:9px 0 0; max-width:60ch; }

  /* playoff-bracket banner-link — slim gold row, shown once postseason
     games exist. Speaks the shared conf-champ/title gold language. */
  #page-scoreboard .sb-bracket-link{ display:flex; align-items:center; gap:10px; margin:0 0 14px; padding:9px 14px;
    border-radius:var(--r-sm); text-decoration:none;
    border:1px solid color-mix(in oklab,var(--gold) 38%,var(--line));
    background:linear-gradient(90deg, color-mix(in oklab,var(--gold) 12%,var(--panel-2)), var(--panel-2) 72%);
    transition:border-color .15s, transform .12s, box-shadow .15s; }
  #page-scoreboard .sb-bracket-link:hover{ border-color:color-mix(in oklab,var(--gold) 60%,var(--line));
    transform:translateY(-1px); box-shadow:0 6px 18px -12px color-mix(in oklab,var(--gold) 70%,transparent); }
  #page-scoreboard .sb-bl-tr{ font-size:14px; line-height:1;
    filter:drop-shadow(0 0 6px color-mix(in oklab,var(--gold) 50%,transparent)); }
  #page-scoreboard .sb-bl-txt{ font-family:var(--disp); font-weight:800; font-size:12px; letter-spacing:.09em;
    text-transform:uppercase; color:var(--gold); }
  #page-scoreboard .sb-bl-arrow{ margin-left:auto; color:var(--gold); font-weight:800; font-size:14px; }
  :root[data-theme="light"] #page-scoreboard .sb-bl-txt,
  :root[data-theme="light"] #page-scoreboard .sb-bl-arrow{ color:color-mix(in oklab,var(--gold) 62%,#000000); }

  /* week picker */
  #page-scoreboard .sb-picker{ display:flex; align-items:center; gap:10px; flex:0 0 auto; }
  #page-scoreboard .sb-picker-k{ font-family:var(--disp); font-weight:800; font-size:11px; letter-spacing:.12em;
    text-transform:uppercase; color:var(--dim); }
  #page-scoreboard .sb-select-wrap{ position:relative; }
  #page-scoreboard .sb-select{ appearance:none; -webkit-appearance:none; font-family:var(--disp); font-weight:800;
    font-size:14px; letter-spacing:.03em; text-transform:uppercase; color:var(--ink);
    background:var(--panel-2); border:1px solid var(--line-bright); border-radius:var(--r-sm);
    padding:9px 34px 9px 13px; cursor:pointer; transition:border-color .15s, box-shadow .15s; }
  #page-scoreboard .sb-select:hover{ border-color:var(--accent); }
  #page-scoreboard .sb-select:focus-visible{ outline:none; border-color:var(--accent);
    box-shadow:0 0 0 3px color-mix(in oklab,var(--accent) 35%,transparent); }
  #page-scoreboard .sb-select-caret{ position:absolute; right:12px; top:50%; transform:translateY(-50%);
    pointer-events:none; color:var(--dim); font-size:12px; }

  /* card wiring */
  #page-scoreboard .sb-grid{ align-items:start; }

  /* reactions — zone 5 of the SHARED nil/_game_card.html. My Hub marquees that same
     card (s103), so every rule below carries #page-myhub as a SECOND SELECTOR rather
     than being copied into the hub's own <style> block: one rule body, one source of
     truth, and the scoreboard's specificity (1,1,0) is untouched so its pixels cannot
     move. Without this the hub rendered each reaction <form> as a block and the picker
     stacked into a six-row column. */
  /* the card's own .gc-foot now owns the spacing (score-bug port 2a) */
  #page-scoreboard .sb-react,
  #page-myhub .sb-react{ margin-top:0; padding-top:0; }
  #page-scoreboard .sb-react-counts,
  #page-myhub .sb-react-counts{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:6px; }
  #page-scoreboard .sb-rc,
  #page-myhub .sb-rc{ display:inline-flex; align-items:center; gap:4px; font-size:12.5px; font-weight:700;
    color:var(--ink-2); background:var(--panel-2); border:1px solid var(--line); border-radius:999px; padding:3px 9px;
    font-variant-numeric:tabular-nums; }
  #page-scoreboard .sb-rc .num,
  #page-myhub .sb-rc .num{ color:var(--ink); }
  #page-scoreboard .sb-rc.mine,
  #page-myhub .sb-rc.mine{ border-color:var(--me); color:var(--ink);
    background:color-mix(in oklab,var(--me) 18%,var(--panel-2)); }
  #page-scoreboard .sb-react-pick,
  #page-myhub .sb-react-pick{ display:flex; flex-wrap:wrap; gap:6px; }
  #page-scoreboard .sb-rb,
  #page-myhub .sb-rb{ font-size:15px; line-height:1; padding:6px 8px; border-radius:var(--r-sm);
    background:transparent; border:1px solid var(--line); cursor:pointer;
    transition:border-color .14s, transform .14s, background-color .14s; }
  #page-scoreboard .sb-rb:hover,
  #page-myhub .sb-rb:hover{ transform:translateY(-2px); border-color:var(--line-bright); background:var(--panel-2); }
  #page-scoreboard .sb-rb:active,
  #page-myhub .sb-rb:active{ transform:translateY(0); }
  #page-scoreboard .sb-rb:focus-visible,
  #page-myhub .sb-rb:focus-visible{ outline:none; border-color:var(--accent);
    box-shadow:0 0 0 3px color-mix(in oklab,var(--accent) 30%,transparent); }
  #page-scoreboard .sb-rb.mine,
  #page-myhub .sb-rb.mine{ border-color:var(--me); background:color-mix(in oklab,var(--me) 16%,transparent); }

  /* empty state */
  #page-scoreboard .sb-empty{ text-align:center; padding:46px 22px; border:1px dashed var(--line-bright);
    border-radius:var(--r-lg); background:var(--panel); }
  #page-scoreboard .sb-empty-ic{ font-size:36px; }
  #page-scoreboard .sb-empty-h{ font-family:var(--disp); font-weight:800; font-size:20px; letter-spacing:.02em;
    text-transform:uppercase; color:var(--ink); margin-top:10px; }
  #page-scoreboard .sb-empty-d{ color:var(--ink-2); font-size:14px; margin:8px auto 0; max-width:44ch; }

  @media (max-width:760px){
    #page-scoreboard .sb-head{ align-items:stretch; }
    #page-scoreboard .sb-picker{ width:100%; justify-content:space-between; }
    #page-scoreboard .sb-select{ flex:1; }
  }

/* ======================== PAGE: bracket ======================== */

  #page-bracket.bk-head, #page-bracket .bk-head{ margin-bottom:14px; }
  #page-bracket .bk-eyebrow{ font-family:var(--disp); font-weight:800; font-size:12px; letter-spacing:.14em;
    text-transform:uppercase; color:var(--dim); }
  #page-bracket .bk-title{ font-family:var(--disp); font-weight:900; font-size:clamp(34px,5.4vw,56px); line-height:.94;
    letter-spacing:-.01em; text-transform:uppercase; margin:6px 0 0; color:var(--ink); }
  #page-bracket .bk-sub{ max-width:60ch; color:var(--ink-2); font-size:14.5px; margin:9px 0 0; }
  #page-bracket .bk-legend{ display:flex; flex-wrap:wrap; gap:8px 16px; margin-top:14px; }
  #page-bracket .bk-lg{ display:inline-flex; align-items:center; gap:7px; font-family:var(--disp); font-weight:700;
    font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--dim); }
  #page-bracket .bk-lg-final{ color:var(--gold); }
  #page-bracket .bk-sw{ width:11px; height:11px; border-radius:3px; flex:0 0 auto; }
  #page-bracket .bk-sw-win{ background:var(--win); }
  #page-bracket .bk-sw-loss{ background:var(--loss); opacity:.55; }
  #page-bracket .bk-sw-tbd{ background:transparent; border:1px dashed var(--mute); }

  /* round grids */
  #page-bracket .bk-grid{ grid-template-columns:repeat(auto-fill,minmax(264px,1fr)); align-items:start; margin-bottom:6px; }
  #page-bracket .bk-grid-tight{ grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); }
  #page-bracket .bk-grid-semi{ grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); margin-bottom:6px; }
  #page-bracket .bk-grid-final{ display:grid; grid-template-columns:minmax(0,440px); justify-content:center; margin-bottom:6px; }

  /* bracket card */
  #page-bracket .bk-card{ border:1px solid var(--line); border-radius:var(--r-lg); background:var(--panel);
    overflow:hidden; transition:border-color .16s, transform .16s, box-shadow .16s; min-width:0; }
  #page-bracket .bk-card:hover{ border-color:var(--line-bright); transform:translateY(-2px); box-shadow:var(--shadow-lift); }
  #page-bracket .bk-card-h{ display:flex; align-items:center; gap:8px; padding:9px 12px; background:var(--panel-2);
    border-bottom:1px solid var(--line); }
  #page-bracket .bk-rd{ font-family:var(--disp); font-weight:800; font-size:11px; letter-spacing:.07em;
    text-transform:uppercase; color:var(--dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  #page-bracket .bk-conf{ font-family:var(--disp); font-weight:800; font-size:10.5px; letter-spacing:.08em;
    text-transform:uppercase; color:var(--accent-bright); padding:1px 7px; border:1px solid var(--line-bright);
    border-radius:999px; flex:0 0 auto; }
  #page-bracket .bk-card-h .pill{ margin-left:auto; flex:0 0 auto; }

  /* team row */
  #page-bracket .bk-team{ display:flex; align-items:center; gap:10px; padding:11px 12px; text-decoration:none;
    transition:background-color .15s, transform .15s; }
  #page-bracket a.bk-team{ cursor:pointer; }
  #page-bracket a.bk-team:hover{ background:var(--hover-row); transform:translateX(2px); }
  #page-bracket .bk-team + .bk-team{ border-top:1px solid var(--line); }
  #page-bracket .bk-seed{ font-family:var(--disp); font-weight:800; font-size:11px; color:var(--dim);
    font-variant-numeric:tabular-nums; flex:0 0 auto; }
  #page-bracket .bk-name{ font-family:var(--disp); font-weight:700; font-size:16px; letter-spacing:.02em;
    color:var(--ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:1; min-width:0; }
  #page-bracket .bk-sc{ font-family:var(--disp); font-weight:900; font-size:21px; color:var(--ink-2);
    font-variant-numeric:tabular-nums; flex:0 0 auto; }
  #page-bracket .bk-sc-pending{ color:var(--mute); }

  /* winner / loser / tbd states (applied only when the game is played) */
  #page-bracket .bk-win{ background:color-mix(in oklab,var(--accent) 12%,transparent);
    box-shadow:inset 3px 0 0 var(--accent); }
  #page-bracket .bk-win .bk-name{ color:var(--ink); font-weight:800; }
  #page-bracket .bk-win .bk-sc{ color:var(--ink); }
  #page-bracket a.bk-win.bk-team:hover{ background:color-mix(in oklab,var(--accent) 18%,transparent); }
  #page-bracket .bk-loss{ opacity:.55; }
  #page-bracket .bk-team-tbd .bk-name{ font-style:italic; font-weight:600; font-size:14px;
    text-transform:none; letter-spacing:0; color:var(--mute); font-family:var(--body); }
  #page-bracket .bk-team-tbd .logo-ph{ opacity:.6; }

  /* national championship card : bright accent border + glow + crown on winner */
  #page-bracket .bk-card-final{ border:2px solid var(--gold);
    box-shadow:0 0 0 1px color-mix(in oklab,var(--gold) 30%,transparent), 0 0 34px color-mix(in oklab,var(--gold) 20%,transparent);
    background:linear-gradient(180deg, color-mix(in oklab,var(--gold) 8%,var(--panel)), var(--panel) 60%); }
  #page-bracket .bk-card-final:hover{ border-color:var(--gold);
    box-shadow:0 0 0 1px color-mix(in oklab,var(--gold) 40%,transparent), 0 0 44px color-mix(in oklab,var(--gold) 30%,transparent); }
  #page-bracket .bk-card-final .bk-card-h{ background:color-mix(in oklab,var(--gold) 10%,var(--panel-2)); }
  #page-bracket .bk-card-final .bk-win .bk-name::before{ content:"👑 "; }
  #page-bracket .bk-card-final .bk-win{ background:color-mix(in oklab,var(--gold) 16%,transparent); box-shadow:inset 3px 0 0 var(--gold); }
  #page-bracket .bk-card-final .bk-win .bk-sc{ color:var(--gold); }
  #page-bracket .bk-final-note{ padding:11px 13px; font-size:12.5px; color:var(--dim); font-weight:500;
    line-height:1.4; border-top:1px solid var(--line); background:var(--panel-2); }
  #page-bracket .bk-lt-final h2{ color:var(--gold); }

  /* pre-bracket empty state */
  #page-bracket .bk-empty{ text-align:center; border:1px dashed var(--line-bright); border-radius:var(--r-lg);
    background:var(--panel); padding:34px 22px; margin-top:6px; }
  #page-bracket .bk-empty-ic{ font-size:38px; line-height:1; display:block; }
  #page-bracket .bk-empty-h{ font-family:var(--disp); font-weight:800; font-size:22px; letter-spacing:.02em;
    text-transform:uppercase; color:var(--ink); margin-top:10px; }
  #page-bracket .bk-empty-b{ max-width:52ch; margin:9px auto 0; color:var(--ink-2); font-size:14px; line-height:1.5; }
  #page-bracket .bk-empty-b code{ font-family:var(--body); font-size:13px; background:var(--panel-2);
    border:1px solid var(--line); border-radius:var(--r-sm); padding:1px 6px; color:var(--ink); }
  #page-bracket .bk-empty-cta{ margin-top:16px; }

  @media (max-width:760px){
    #page-bracket .bk-grid, #page-bracket .bk-grid-tight, #page-bracket .bk-grid-semi{ grid-template-columns:1fr; }
    #page-bracket .bk-grid-final{ grid-template-columns:1fr; }
  }

/* ======================== PAGE: standings ======================== */

  /* banner with flanking rules */
  #page-standings .std-banner{ display:flex; align-items:center; gap:clamp(12px,2.4vw,22px); margin:2px 0 2px; }
  #page-standings .std-rule{ flex:1; height:1px; background:linear-gradient(90deg,transparent,var(--line-bright)); }
  #page-standings .std-rule:last-child{ background:linear-gradient(90deg,var(--line-bright),transparent); }
  #page-standings .std-head{ font-family:var(--disp); font-weight:900; font-size:clamp(26px,4.6vw,46px); line-height:1;
    letter-spacing:.01em; text-transform:uppercase; color:var(--ink); margin:0; white-space:nowrap; text-shadow:0 2px 18px color-mix(in oklab,var(--accent) 22%,transparent); }
  #page-standings .std-lede{ color:var(--ink-2); font-size:14px; max-width:74ch; margin:2px 0 8px; }

  /* conference filter chips */
  #page-standings .std-filters{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:2px 0 10px; }
  #page-standings .std-tab{
    font-family:var(--disp); font-weight:700; font-size:12.5px; letter-spacing:.05em; text-transform:uppercase;
    height:32px; padding:0 14px; border-radius:999px; border:1px solid var(--line);
    background:var(--panel-2); color:var(--ink-2); cursor:pointer;
    transition:border-color .15s, color .15s, background-color .15s, transform .12s;
  }
  #page-standings .std-tab:hover{ border-color:var(--line-bright); color:var(--ink); transform:translateY(-1px); }
  #page-standings .std-tab:active{ transform:translateY(0) scale(.98); }
  #page-standings .std-tab.is-active{ background:var(--accent); border-color:var(--accent); color:#fff; }
  #page-standings .std-tab:focus-visible{ outline:2px solid var(--accent-bright); outline-offset:2px; }
  #page-standings .std-key{ margin-left:auto; display:inline-flex; align-items:center; gap:7px;
    font-size:11.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--dim); }
  #page-standings .std-key .key-me{ width:11px; height:11px; border-radius:3px; background:var(--me);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.18); }

  /* conference summary grid */
  #page-standings .conf-grid{ grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:12px; margin:0 0 12px; }
  #page-standings .conf-card{ display:flex; align-items:center; gap:13px; text-align:left; padding:14px 15px;
    border-radius:var(--r-lg); border:1px solid var(--line); background:var(--panel); box-shadow:var(--shadow-card);
    cursor:pointer; transition:border-color .15s, transform .12s, background-color .15s; min-width:0; }
  #page-standings .conf-card:hover{ border-color:var(--line-bright); transform:translateY(-2px); }
  #page-standings .conf-card:focus-visible{ outline:2px solid var(--accent-bright); outline-offset:2px; }
  #page-standings .conf-mk{ flex:0 0 auto; width:46px; height:46px; border-radius:12px; display:grid; place-items:center;
    font-family:var(--disp); font-weight:900; font-size:15px; letter-spacing:.02em; color:#fff;
    background:linear-gradient(160deg, color-mix(in oklab,var(--cc) 92%,#000) 0%, color-mix(in oklab,var(--cc) 70%,#000) 100%);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.16), 0 8px 20px -10px var(--cc); }
  #page-standings .conf-card-body{ display:flex; flex-direction:column; gap:2px; min-width:0; }
  #page-standings .conf-card-name{ font-family:var(--disp); font-weight:800; font-size:16px; letter-spacing:.02em;
    text-transform:uppercase; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  #page-standings .conf-card-count{ font-size:12px; font-weight:600; color:var(--dim); }
  #page-standings .conf-card-count b{ font-family:var(--disp); font-weight:800; color:var(--ink-2); font-size:13px; }
  #page-standings .conf-card-lead{ margin-left:auto; text-align:right; font-family:var(--disp); font-weight:800;
    font-size:12.5px; letter-spacing:.02em; text-transform:uppercase; color:var(--ink-2); white-space:nowrap; flex:0 0 auto; }
  #page-standings .conf-card-lead .muted{ font-family:var(--body); font-weight:600; font-size:12px; }

  /* standings table */
  #page-standings .std-tbl .rkh{ width:46px; text-align:center; }
  #page-standings .std-tbl td.rk{ text-align:center; font-size:19px; }
  #page-standings .std-row{ cursor:pointer; }
  #page-standings .team-cell{ gap:11px; }
  #page-standings .tc-body{ display:flex; flex-direction:column; gap:1px; min-width:0; }
  #page-standings .tc-name{ display:flex; align-items:center; gap:7px; min-width:0; }
  #page-standings .tc-name b{ font-family:var(--disp); font-weight:700; font-size:15.5px; letter-spacing:.02em;
    color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  #page-standings .std-row:hover .tc-name b{ color:var(--accent-bright); }
  #page-standings .is-me .tc-name b{ color:var(--ink); }
  #page-standings .tc-psn{ font-size:12px; font-weight:600; color:var(--dim); }
  #page-standings .seed{ font-family:var(--disp); font-weight:800; font-size:11px; letter-spacing:.02em; color:var(--gold);
    flex:0 0 auto; padding:1px 5px; border-radius:5px; border:1px solid color-mix(in oklab,var(--gold) 38%,var(--line));
    background:color-mix(in oklab,var(--gold) 12%,var(--panel-2)); }

  /* W–L record cell */
  #page-standings .rec{ font-variant-numeric:tabular-nums; white-space:nowrap; }
  #page-standings .rec .w{ color:var(--ink); }
  #page-standings .rec .sep{ color:var(--mute); margin:0 1px; }
  #page-standings .rec .l{ color:var(--loss); }

  /* streak chips */
  #page-standings .strk{ font-family:var(--disp); font-weight:800; font-size:13px; letter-spacing:.03em;
    padding:3px 9px; border-radius:7px; border:1px solid var(--line); font-variant-numeric:tabular-nums; white-space:nowrap; }
  #page-standings .strk.win{ color:var(--win); border-color:color-mix(in oklab,var(--win) 38%,var(--line));
    background:color-mix(in oklab,var(--win) 11%,var(--panel-2)); }
  #page-standings .strk.loss{ color:var(--loss); border-color:color-mix(in oklab,var(--loss) 38%,var(--line));
    background:color-mix(in oklab,var(--loss) 11%,var(--panel-2)); }

  /* conference filter hiding */
  #page-standings.flt-sec [data-conf]:not([data-conf="sec"]),
  #page-standings.flt-big-ten [data-conf]:not([data-conf="big-ten"]),
  #page-standings.flt-big-12 [data-conf]:not([data-conf="big-12"]),
  #page-standings.flt-acc [data-conf]:not([data-conf="acc"]){ display:none; }
  /* keep the conf-card grid visible in any filter (it is the index) */
  #page-standings.flt-sec .conf-grid,
  #page-standings.flt-big-ten .conf-grid,
  #page-standings.flt-big-12 .conf-grid,
  #page-standings.flt-acc .conf-grid{ display:grid; }

  @media (max-width:760px){
    #page-standings .std-key{ width:100%; margin-left:0; justify-content:flex-start; order:9; }
    #page-standings .conf-card-lead{ display:none; }
    #page-standings .tc-name b{ font-size:14.5px; }
  }

/* ======================== PAGE: power ======================== */

  /* Centered header */
  #page-power .pwr-head{ text-align:center; padding:6px 0 18px; }
  #page-power .pwr-eyebrow{ font-family:var(--disp); font-weight:800; font-size:12.5px; letter-spacing:.16em;
    text-transform:uppercase; color:var(--accent-bright); }
  #page-power .pwr-eyebrow-szn{ color:var(--dim); margin-left:8px; }
  #page-power .pwr-title{ font-family:var(--disp); font-weight:900; font-size:clamp(34px,5.4vw,56px); line-height:.94;
    letter-spacing:-.01em; text-transform:uppercase; margin:8px 0 0; color:var(--ink); }
  #page-power .pwr-lede{ max-width:62ch; margin:11px auto 0; color:var(--ink-2); font-size:14.5px; line-height:1.5; }

  /* Table tuning */
  #page-power .pwr-table thead th{ white-space:nowrap; }
  #page-power .pwr-table .team-cell{ display:flex; align-items:center; gap:11px; min-width:0; }
  #page-power .pwr-table .tc-text{ display:flex; flex-direction:column; gap:1px; min-width:0; }
  #page-power .pwr-table .tc-text b{ font-weight:700; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  #page-power .pwr-table .psn{ font-family:var(--disp); font-weight:700; font-size:11.5px; letter-spacing:.03em;
    color:var(--dim); white-space:nowrap; }
  #page-power .pwr-table .psn-cpu{ font-family:var(--disp); font-weight:700; font-size:10.5px; letter-spacing:.1em;
    text-transform:uppercase; color:var(--mute); }

  /* Rank cell coloring : #1 gold+bold, top-5 primary */
  #page-power .pwr-rank{ font-variant-numeric:tabular-nums; }
  #page-power .pwr-rank.gold{ color:var(--gold); font-weight:900; }
  #page-power .pwr-rank.top5{ color:var(--accent-bright); font-weight:800; }

  /* Rating cell : value + grow bar */
  #page-power .pwr-rating{ min-width:120px; }
  #page-power .pwr-rating .rt{ display:block; color:var(--accent-bright); font-weight:800; font-variant-numeric:tabular-nums; }
  #page-power .pwr-rating .track{ display:block; height:4px; width:100%; margin-top:5px; border-radius:99px;
    background:var(--panel-2); overflow:hidden; }
  #page-power .pwr-rating .track .bar{ display:block; height:100%; border-radius:99px; }

  /* Avg diff coloring */
  #page-power .pwr-diff{ font-variant-numeric:tabular-nums; }
  #page-power .pwr-diff.pos{ color:var(--win); }
  #page-power .pwr-diff.neg{ color:var(--loss); }

  /* SOS dimmed */
  #page-power .sos{ color:var(--dim); font-variant-numeric:tabular-nums; }

  /* AP none */
  #page-power .pwr-ap-none{ color:var(--mute); font-family:var(--disp); font-weight:700; }

  /* Click-through rows */
  #page-power .pwr-tr-link{ cursor:pointer; }
  #page-power .pwr-tr-link:hover{ background:var(--hover-row); }

  /* Sortable headers */
  #page-power .sortable{ cursor:pointer; user-select:none; transition:color .14s; }
  #page-power .sortable:hover{ color:var(--accent-bright); }
  #page-power .srt{ display:inline-block; width:9px; margin-left:3px; color:var(--mute); font-size:10px; }
  #page-power th.sorted-asc{ color:var(--accent-bright); }
  #page-power th.sorted-desc{ color:var(--accent-bright); }
  #page-power th.sorted-asc .srt::after{ content:"▲"; color:var(--accent-bright); }
  #page-power th.sorted-desc .srt::after{ content:"▼"; color:var(--accent-bright); }

  /* Empty state */
  #page-power .pwr-empty{ text-align:center; }
  #page-power .pwr-empty-ic{ font-size:34px; line-height:1; }
  #page-power .pwr-empty-h{ font-family:var(--disp); font-weight:800; font-size:20px; letter-spacing:.02em;
    text-transform:uppercase; color:var(--ink); margin-top:10px; }
  #page-power .pwr-empty-b{ max-width:52ch; margin:8px auto 0; color:var(--ink-2); font-size:14px; line-height:1.5; }
  #page-power .pwr-empty-cta{ margin-top:14px; }

  /* Footnote */
  #page-power .pwr-foot{ margin:14px 0 8px; color:var(--dim); font-size:12.5px; line-height:1.5; max-width:90ch; }

  /* Responsive : tighten dense columns under 600px */
  @media (max-width:600px){
    #page-power .pwr-title{ font-size:34px; }
    #page-power .pwr-table thead th,
    #page-power .pwr-table tbody td{ padding-left:7px; padding-right:7px; }
    #page-power .pwr-rating{ min-width:96px; }
    #page-power .pwr-table .psn,
    #page-power .pwr-table .psn-cpu{ font-size:10.5px; }
  }

/* ======================== PAGE: lpboard ======================== */

  #page-lpboard .lp-lede{ max-width:70ch; color:var(--ink-2); font-size:14.5px; margin:2px 0 14px; }
  #page-lpboard .lp-szn-badge{ font-size:11px; }

  /* platform tabs */
  #page-lpboard .lp-tabs{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:14px; }
  #page-lpboard .lp-tab{ display:flex; flex-direction:column; gap:2px; align-items:flex-start;
    padding:10px 16px; border:1px solid var(--line); border-radius:var(--r); background:var(--panel-2);
    cursor:pointer; transition:border-color .16s, transform .16s, background-color .16s; }
  #page-lpboard .lp-tab:hover{ border-color:var(--line-bright); transform:translateY(-1px); }
  #page-lpboard .lp-tab.active{ border-color:var(--accent);
    background:color-mix(in oklab,var(--accent) 12%,var(--panel)); box-shadow:inset 0 -2px 0 var(--accent); }
  #page-lpboard .lp-tab-k{ font-family:var(--disp); font-weight:800; font-size:16px; letter-spacing:.04em;
    text-transform:uppercase; color:var(--ink); }
  #page-lpboard .lp-tab.active .lp-tab-k{ color:var(--accent-bright); }
  #page-lpboard .lp-tab-sub{ font-size:11.5px; color:var(--dim); font-weight:500; }

  /* YOUR card */
  #page-lpboard .my-lp-card{ background:
      linear-gradient(180deg, color-mix(in oklab,var(--me) 10%,var(--panel)) 0%, var(--panel) 64%);
    border-color:color-mix(in oklab,var(--me) 30%,var(--line)); margin-bottom:16px; }
  #page-lpboard .mylp-top{ display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; }
  #page-lpboard .mylp-id{ display:flex; align-items:center; gap:14px; min-width:0; }
  #page-lpboard .mylp-label{ font-family:var(--disp); font-weight:800; font-size:11px; letter-spacing:.12em;
    text-transform:uppercase; color:var(--me); }
  #page-lpboard .mylp-psn{ display:inline-block; font-family:var(--disp); font-weight:900; font-size:24px;
    letter-spacing:.02em; color:var(--ink); cursor:pointer; line-height:1.05; }
  #page-lpboard .mylp-psn:hover{ color:var(--accent-bright); }
  #page-lpboard .mylp-team{ font-size:13px; color:var(--ink-2); font-weight:600; margin-top:2px; }
  #page-lpboard .mylp-figs{ display:flex; gap:26px; }
  #page-lpboard .mylp-fig{ display:flex; flex-direction:column; }
  #page-lpboard .mylp-k{ font-family:var(--disp); font-weight:800; font-size:11px; letter-spacing:.1em;
    text-transform:uppercase; color:var(--dim); }
  #page-lpboard .mylp-v{ font-family:var(--disp); font-weight:900; font-size:clamp(34px,5vw,46px); line-height:1;
    color:var(--accent-bright); font-variant-numeric:tabular-nums; margin-top:2px; }
  #page-lpboard .mylp-v.rank-v{ color:var(--gold); }
  #page-lpboard .mylp-sub{ font-size:11.5px; color:var(--dim); font-weight:500; margin-top:4px; }
  #page-lpboard .mylp-strip-label{ font-family:var(--disp); font-weight:800; font-size:11px; letter-spacing:.1em;
    text-transform:uppercase; color:var(--dim); margin-bottom:10px; }
  #page-lpboard .mylp-strip{ display:flex; gap:8px; flex-wrap:wrap; }
  #page-lpboard .szn-chip{ display:flex; flex-direction:column; align-items:center; gap:2px; min-width:46px;
    padding:7px 8px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--panel-2); }
  #page-lpboard .szn-chip.empty{ opacity:.5; }
  #page-lpboard .szn-k{ font-family:var(--disp); font-weight:800; font-size:11px; letter-spacing:.04em;
    text-transform:uppercase; color:var(--dim); }
  #page-lpboard .szn-v{ font-family:var(--disp); font-weight:800; font-size:15px; color:var(--ink);
    font-variant-numeric:tabular-nums; }

  /* LP table */
  #page-lpboard .lp-table th.c, #page-lpboard .lp-table td.c{ text-align:center; }
  #page-lpboard .lp-table .lp-total{ color:var(--accent-bright); font-size:16px; }
  #page-lpboard .lp-table td.hot{ color:var(--accent-bright); font-weight:800; }
  #page-lpboard .lp-table td.dim{ color:var(--mute); }
  #page-lpboard .lp-table .psn a{ color:var(--ink-2); font-weight:600; cursor:pointer; }
  #page-lpboard .lp-table .psn a:hover{ color:var(--accent-bright); }
  #page-lpboard .lp-table tr.is-me .psn a{ color:var(--ink); }
  #page-lpboard .rk.gold{ color:var(--gold); }
  #page-lpboard .you-pill{ background:var(--me); color:#fff; border-color:transparent; font-size:9.5px;
    padding:2px 6px; vertical-align:middle; }

  /* mobile cards */
  #page-lpboard .lp-cards{ display:none; flex-direction:column; gap:10px; margin-bottom:16px; }
  #page-lpboard .lp-card{ display:flex; align-items:center; gap:12px; padding:13px 14px; border:1px solid var(--line);
    border-radius:var(--r-lg); background:var(--panel); cursor:pointer; transition:border-color .16s, transform .16s; }
  #page-lpboard .lp-card:hover{ border-color:var(--line-bright); transform:translateY(-1px); }
  #page-lpboard .lp-card.is-me{ border-color:color-mix(in oklab,var(--me) 45%,var(--line));
    background:color-mix(in oklab,var(--me) 9%,var(--panel)); }
  #page-lpboard .lp-card.medal{ box-shadow:inset 3px 0 0 var(--gold); }
  #page-lpboard .lp-card.medal.is-me{ box-shadow:inset 3px 0 0 var(--me); }
  #page-lpboard .lp-rk{ font-family:var(--disp); font-weight:900; font-size:22px; color:var(--mute);
    width:24px; flex:0 0 auto; text-align:center; font-variant-numeric:tabular-nums; }
  #page-lpboard .lp-rk.gold{ color:var(--gold); }
  #page-lpboard .lp-card-id{ flex:1; min-width:0; }
  #page-lpboard .lp-card-psn{ font-family:var(--disp); font-weight:800; font-size:16px; letter-spacing:.02em;
    color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  #page-lpboard .lp-card-sub{ font-size:12px; color:var(--dim); font-weight:500; margin-top:1px; }
  #page-lpboard .lp-card-total{ font-family:var(--disp); font-weight:900; font-size:24px; color:var(--accent-bright);
    font-variant-numeric:tabular-nums; flex:0 0 auto; }

  /* notice */
  #page-lpboard .notice{ border:1px solid var(--line); border-radius:var(--r-lg); background:var(--panel);
    padding:18px 20px; margin-bottom:6px; }
  #page-lpboard .notice-gold{ border-color:color-mix(in oklab,var(--gold) 40%,var(--line));
    background:color-mix(in oklab,var(--gold) 7%,var(--panel)); }
  #page-lpboard .notice-h{ display:flex; align-items:center; gap:9px; font-family:var(--disp); font-weight:800;
    font-size:17px; letter-spacing:.03em; text-transform:uppercase; color:var(--gold); margin-bottom:10px; }
  #page-lpboard .notice-ic{ font-size:18px; }
  #page-lpboard .notice-b p{ color:var(--ink-2); font-size:14px; line-height:1.55; margin:0 0 12px; }
  #page-lpboard .notice-b b{ color:var(--ink); }
  #page-lpboard .notice-list{ list-style:none; padding:0; margin:0 0 12px; display:flex; flex-direction:column; gap:8px; }
  #page-lpboard .notice-list li{ display:flex; align-items:flex-start; gap:10px; color:var(--ink-2); font-size:13.5px;
    line-height:1.45; }
  #page-lpboard .nl-dot{ width:9px; height:9px; border-radius:50%; flex:0 0 auto; margin-top:5px; }
  #page-lpboard .nl-dot.earn{ background:var(--win); }
  #page-lpboard .nl-dot.zero{ background:var(--mute); }
  #page-lpboard .nl-dot.bonus{ background:var(--gold); }
  #page-lpboard .nl-dot.adj{ background:var(--accent); }
  #page-lpboard .notice-foot{ font-size:12.5px; color:var(--dim) !important; margin-bottom:0 !important; }
  #page-lpboard .notice-foot a{ color:var(--accent-bright); cursor:pointer; }

  @media (max-width:760px){
    #page-lpboard .desktop-only{ display:none !important; }
    #page-lpboard .lp-cards{ display:flex; }
    #page-lpboard .mylp-top{ flex-direction:column; align-items:flex-start; gap:14px; }
    #page-lpboard .mylp-figs{ gap:22px; }
  }

/* ======================== PAGE: myclass ======================== */

  /* 4a header */
  #page-myclass .mc-head{ display:flex; align-items:center; gap:16px; flex-wrap:wrap;
    border:1px solid var(--line); border-radius:var(--r-xl); padding:clamp(16px,2.6vw,24px);
    background:linear-gradient(135deg, color-mix(in oklab,var(--me) 16%,var(--panel)) 0%, var(--panel) 60%);
    margin-bottom:6px; }
  #page-myclass .mc-head-id{ min-width:0; flex:1 1 240px; }
  #page-myclass .mc-kicker{ font-family:var(--disp); font-weight:800; font-size:12px; letter-spacing:.1em;
    text-transform:uppercase; color:var(--ink-2); }
  #page-myclass .mc-team{ font-family:var(--disp); font-weight:900; font-size:clamp(28px,4.4vw,44px); line-height:1;
    text-transform:uppercase; letter-spacing:-.01em; margin:4px 0 0; color:var(--ink); }
  #page-myclass .mc-stars{ color:var(--gold); font-size:.62em; letter-spacing:.04em; vertical-align:middle; margin-left:6px; }
  #page-myclass .mc-psn{ font-family:var(--disp); font-weight:700; font-size:14px; letter-spacing:.03em;
    color:var(--dim); margin-top:5px; }
  #page-myclass .mc-tier{ flex:0 0 auto; min-width:200px; padding:13px 15px; border:1px solid var(--line);
    border-radius:var(--r); background:var(--panel-2); }
  #page-myclass .mc-tier-k{ font-family:var(--disp); font-weight:800; font-size:11px; letter-spacing:.12em;
    text-transform:uppercase; color:var(--dim); }
  #page-myclass .mc-tier-v{ font-family:var(--disp); font-weight:800; font-size:17px; letter-spacing:.02em;
    text-transform:uppercase; color:var(--ink); margin-top:4px; }
  #page-myclass .mc-tier-stars{ color:var(--gold); margin-left:4px; }
  #page-myclass .mc-tier-note{ display:block; font-size:11.5px; color:var(--mute); font-weight:500; margin-top:5px; }

  /* 4b bars */
  #page-myclass .mc-stat-grid{ grid-template-columns:repeat(4,1fr); gap:12px; }
  #page-myclass .mc-bars{ margin-top:18px; display:flex; flex-direction:column; gap:13px; }
  #page-myclass .mc-bar-label{ display:flex; justify-content:space-between; align-items:baseline;
    font-family:var(--disp); font-weight:800; font-size:12px; letter-spacing:.05em; text-transform:uppercase;
    color:var(--ink-2); margin-bottom:6px; }
  #page-myclass .mc-track{ position:relative; }
  #page-myclass .bar.mc-proj{ opacity:.7; background:linear-gradient(90deg,var(--accent),var(--accent-bright)); }
  #page-myclass .mc-floor{ position:absolute; top:50%; left:80%; transform:translate(-50%,-50%);
    font-family:var(--disp); font-weight:800; font-size:8.5px; letter-spacing:.06em; color:var(--bg);
    background:var(--gold); padding:1px 4px; border-radius:3px; pointer-events:none; white-space:nowrap; }

  /* 4c composition */
  #page-myclass .mc-stars-strip{ display:grid; grid-template-columns:repeat(5,1fr); gap:8px; margin-bottom:18px; }
  #page-myclass .mc-star-cell{ display:flex; flex-direction:column; align-items:center; gap:2px;
    padding:11px 6px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--panel-2); }
  #page-myclass .mc-star-glyph{ font-size:12px; line-height:1.1; letter-spacing:1px; }
  #page-myclass .star-rank-5 .mc-star-glyph{ color:var(--gold); }
  #page-myclass .star-rank-4 .mc-star-glyph{ color:var(--accent-bright); }
  #page-myclass .star-rank-3 .mc-star-glyph{ color:var(--win); }
  #page-myclass .star-rank-2 .mc-star-glyph{ color:var(--ink-2); }
  #page-myclass .star-rank-1 .mc-star-glyph{ color:var(--mute); }
  #page-myclass .mc-star-n{ font-family:var(--disp); font-weight:900; font-size:24px; color:var(--ink); line-height:1; }
  #page-myclass .mc-star-lab{ font-family:var(--disp); font-weight:700; font-size:10px; letter-spacing:.08em;
    text-transform:uppercase; color:var(--dim); }

  #page-myclass .mc-headliners-head{ font-family:var(--disp); font-weight:800; font-size:12px; letter-spacing:.08em;
    text-transform:uppercase; color:var(--gold); margin-bottom:10px; }
  #page-myclass .mc-hl-grid{ grid-template-columns:1fr 1fr; gap:10px; }
  #page-myclass .mc-headliner{ display:flex; align-items:center; gap:11px; position:relative;
    background:var(--panel-2); border:1px solid var(--line); border-radius:var(--r); padding:11px 13px 11px 16px; overflow:hidden; }
  #page-myclass .mc-hl-rail{ position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--lc); }
  #page-myclass .mc-hl-body{ min-width:0; flex:1; }
  #page-myclass .mc-hl-pos{ font-family:var(--disp); font-weight:800; font-size:11px; letter-spacing:.06em;
    color:var(--dim); }
  #page-myclass .mc-hl-portal{ color:var(--accent-bright); margin-left:3px; }
  #page-myclass .mc-hl-name{ font-family:var(--disp); font-weight:800; font-size:17px; letter-spacing:.01em;
    color:var(--ink); line-height:1.05; margin-top:1px; }
  #page-myclass .mc-hl-tier{ font-size:12px; color:var(--gold); font-weight:600; margin-top:2px; }
  #page-myclass .mc-hl-nil{ font-family:var(--disp); font-weight:800; font-size:17px; color:var(--ink);
    flex:0 0 auto; }

  #page-myclass .mc-commits-head{ font-family:var(--disp); font-weight:800; font-size:12px; letter-spacing:.08em;
    text-transform:uppercase; color:var(--dim); margin-bottom:4px; }
  #page-myclass .mc-commits{ gap:0; }
  #page-myclass .mc-commit{ display:flex; align-items:center; gap:10px; padding:9px 4px; }
  #page-myclass .mc-commit + .mc-commit{ border-top:1px solid var(--line); }
  #page-myclass .mc-c-pos{ font-family:var(--disp); font-weight:800; font-size:12px; color:var(--dim);
    width:42px; flex:0 0 auto; letter-spacing:.04em; }
  #page-myclass .mc-c-name{ font-weight:600; font-size:14px; color:var(--ink); flex:1; min-width:0;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  #page-myclass .mc-portal-glyph{ color:var(--accent-bright); font-weight:700; }
  #page-myclass .mc-c-tier{ flex:0 0 auto; }
  #page-myclass .mc-c-status{ flex:0 0 auto; }
  #page-myclass .mc-c-nil{ font-family:var(--disp); font-weight:800; font-size:14.5px; color:var(--ink-2);
    flex:0 0 auto; width:62px; text-align:right; font-variant-numeric:tabular-nums; }

  /* tier pills (color by rank) */
  #page-myclass .pill.tier-5{ color:var(--gold); border-color:color-mix(in oklab,var(--gold) 45%,transparent);
    background:color-mix(in oklab,var(--gold) 14%,transparent); }
  #page-myclass .pill.tier-4{ color:var(--accent-bright); border-color:color-mix(in oklab,var(--accent) 45%,transparent);
    background:color-mix(in oklab,var(--accent) 14%,transparent); }
  #page-myclass .pill.tier-3{ color:var(--win); border-color:color-mix(in oklab,var(--win) 42%,transparent);
    background:color-mix(in oklab,var(--win) 12%,transparent); }
  #page-myclass .pill.tier-2{ color:var(--ink-2); border-color:var(--line-bright); background:var(--panel-2); }
  #page-myclass .pill.tier-1{ color:var(--mute); border-color:var(--line); background:var(--panel-2); }
  /* status pills */
  #page-myclass .pill.st-signed{ color:var(--win); border-color:color-mix(in oklab,var(--win) 45%,transparent);
    background:color-mix(in oklab,var(--win) 13%,transparent); }
  #page-myclass .pill.st-committed{ color:var(--accent-bright); border-color:color-mix(in oklab,var(--accent) 45%,transparent);
    background:color-mix(in oklab,var(--accent) 13%,transparent); }
  #page-myclass .pill.st-target{ color:var(--live); border-color:color-mix(in oklab,var(--live) 45%,transparent);
    background:color-mix(in oklab,var(--live) 13%,transparent); }
  #page-myclass .pill.mc-pipe-pill{ color:var(--dim); border-color:var(--line); background:var(--panel-2); }
  #page-myclass .pill.mc-pipe-pill.out{ color:var(--live); border-color:color-mix(in oklab,var(--live) 45%,transparent);
    background:color-mix(in oklab,var(--live) 12%,transparent); }

  /* add-recruit disclosure (collapsed by default — opens in place, no dim) */
  #page-myclass .mc-add{ margin-bottom:6px; }
  #page-myclass .mc-add-sum{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 16px; }
  #page-myclass .mc-add-sum::-webkit-details-marker{ display:none; }
  #page-myclass .mc-add-sum-t{ font-family:var(--disp); font-weight:800; font-size:17px; letter-spacing:.03em; text-transform:uppercase; color:var(--ink); display:flex; align-items:center; gap:9px; }
  #page-myclass .mc-add-plus{ color:var(--accent-bright); font-size:19px; line-height:1; }
  #page-myclass .mc-add-x{ font-family:var(--disp); font-weight:800; font-size:22px; color:var(--accent-bright); line-height:1; transition:transform .2s var(--ease-out-quint); }
  #page-myclass details.mc-add[open] .mc-add-x{ transform:rotate(45deg); }
  #page-myclass details.mc-add[open] .mc-add-sum{ border-bottom:1px solid var(--line); }
  #page-myclass .mc-add-sum:hover{ background:color-mix(in oklab,var(--accent) 7%,transparent); }
  #page-myclass .mc-add-hint{ font-size:12px; margin-bottom:8px; }

  /* forms */
  #page-myclass .mc-form{ display:grid; grid-template-columns:repeat(6,1fr); gap:10px 12px; align-items:end; }
  #page-myclass .mc-field{ display:flex; flex-direction:column; gap:5px; min-width:0; }
  #page-myclass .mc-field-wide{ grid-column:span 2; }
  #page-myclass .mc-field-submit{ grid-column:1 / -1; flex-direction:row; gap:8px; justify-content:flex-end; padding-top:2px; }
  #page-myclass .mc-flab{ font-family:var(--disp); font-weight:700; font-size:10.5px; letter-spacing:.08em;
    text-transform:uppercase; color:var(--dim); }
  #page-myclass .mc-input{ font-family:var(--body); font-size:13.5px; color:var(--ink); background:var(--panel-2);
    border:1px solid var(--line); border-radius:var(--r-sm); padding:8px 10px; width:100%;
    transition:border-color .14s, box-shadow .14s; }
  #page-myclass .mc-input:focus-visible{ outline:none; border-color:var(--accent);
    box-shadow:0 0 0 2px color-mix(in oklab,var(--accent) 28%,transparent); }
  #page-myclass .mc-input:disabled{ color:var(--mute); }
  #page-myclass .mc-inline-form{ background:var(--panel-2); border:1px solid var(--line-bright);
    border-radius:var(--r); padding:13px 14px; margin:2px 0; }

  /* recruit table extras */
  #page-myclass .mc-status-sel{ font-family:var(--disp); font-weight:800; font-size:11px; letter-spacing:.04em;
    text-transform:uppercase; border-radius:999px; padding:3px 9px; border:1px solid var(--line);
    background:var(--panel-2); color:var(--ink-2); cursor:pointer; transition:border-color .14s, color .14s, background-color .14s; }
  #page-myclass .mc-status-sel:focus-visible{ outline:none; box-shadow:0 0 0 2px color-mix(in oklab,var(--accent) 28%,transparent); }
  #page-myclass .st-sel-signed{ color:var(--win); border-color:color-mix(in oklab,var(--win) 45%,transparent);
    background:color-mix(in oklab,var(--win) 12%,transparent); }
  #page-myclass .st-sel-committed{ color:var(--accent-bright); border-color:color-mix(in oklab,var(--accent) 45%,transparent);
    background:color-mix(in oklab,var(--accent) 12%,transparent); }
  #page-myclass .st-sel-target{ color:var(--live); border-color:color-mix(in oklab,var(--live) 45%,transparent);
    background:color-mix(in oklab,var(--live) 12%,transparent); }
  #page-myclass .mc-icon-btn{ font-size:13px; line-height:1; width:26px; height:26px; border-radius:var(--r-sm);
    border:1px solid var(--line); background:var(--panel-2); color:var(--ink-2); cursor:pointer;
    transition:border-color .14s, color .14s, transform .14s; }
  #page-myclass .mc-icon-btn + .mc-icon-btn{ margin-left:5px; }
  #page-myclass .mc-icon-btn:hover{ border-color:var(--line-bright); color:var(--ink); transform:translateY(-1px); }
  #page-myclass .mc-icon-btn.danger:hover{ color:var(--loss); border-color:color-mix(in oklab,var(--loss) 50%,transparent); }
  #page-myclass .mc-note-cell{ font-size:12.5px; color:var(--dim); font-style:italic; padding-top:2px !important; padding-bottom:9px !important; }
  #page-myclass .mc-recruit-tbl th[data-sortable]{ cursor:pointer; user-select:none; }
  #page-myclass .mc-recruit-tbl th[data-sortable]:hover{ color:var(--ink); }

  /* mobile recruit cards */
  #page-myclass .mc-card-hint{ font-size:12px; color:var(--mute); font-weight:500; margin-bottom:10px; text-align:center; }
  #page-myclass .mc-recruit-card{ border:1px solid var(--line); border-radius:var(--r);
    background:var(--panel); padding:13px 14px; margin-bottom:10px; }
  #page-myclass .mc-rc-top{ display:flex; align-items:baseline; gap:9px; }
  #page-myclass .mc-rc-rk{ font-family:var(--disp); font-weight:800; font-size:13px; color:var(--mute); flex:0 0 auto; }
  #page-myclass .mc-rc-name{ font-family:var(--disp); font-weight:800; font-size:16px; letter-spacing:.01em;
    color:var(--ink); flex:1; min-width:0; }
  #page-myclass .mc-rc-nil{ font-family:var(--disp); font-weight:800; font-size:16px; color:var(--ink); flex:0 0 auto;
    font-variant-numeric:tabular-nums; }
  #page-myclass .mc-rc-meta{ font-size:12.5px; color:var(--dim); font-weight:500; margin-top:3px; }
  #page-myclass .mc-rc-pills{ display:flex; flex-wrap:wrap; gap:6px; margin-top:9px; }
  #page-myclass .mc-rc-note{ font-size:12.5px; color:var(--dim); font-style:italic; margin-top:9px;
    border-top:1px solid var(--line); padding-top:8px; }

  #page-myclass .mc-foot{ display:flex; gap:10px; flex-wrap:wrap; justify-content:space-between; margin:8px 0 6px; }

  /* modal */
  #page-myclass .mc-modal-scrim{ position:fixed; inset:0; background:var(--scrim); display:grid; place-items:end center;
    z-index:var(--z-scrim); padding:0; }
  #page-myclass .mc-modal{ width:100%; max-width:520px; background:var(--panel); border:1px solid var(--line-bright);
    border-radius:var(--r-lg) var(--r-lg) 0 0; padding:16px 16px calc(16px + env(safe-area-inset-bottom));
    box-shadow:var(--shadow-lift); animation:mcSheetUp .26s var(--ease-out-quint); }
  @keyframes mcSheetUp{ from{ transform:translateY(18px); opacity:0; } to{ transform:none; opacity:1; } }
  #page-myclass .mc-modal-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:13px; }
  #page-myclass .mc-modal-head h3{ font-family:var(--disp); font-weight:800; font-size:18px; letter-spacing:.02em;
    text-transform:uppercase; color:var(--ink); margin:0; }
  #page-myclass .mc-modal-actions{ justify-content:space-between; }

  /* desktop/mobile gating */
  #page-myclass .mobile-only{ display:none; }
  @media (max-width:900px){
    #page-myclass .mc-form{ grid-template-columns:repeat(2,1fr); }
    #page-myclass .mc-field-wide{ grid-column:span 2; }
    #page-myclass .mc-stat-grid{ grid-template-columns:1fr 1fr; }
  }
  @media (max-width:760px){
    #page-myclass .desktop-only{ display:none !important; }
    #page-myclass .mobile-only{ display:block; }
    #page-myclass .mc-tier{ flex:1 1 100%; }
    #page-myclass .mc-hl-grid{ grid-template-columns:1fr; }
    #page-myclass .mc-stars-strip{ grid-template-columns:repeat(5,1fr); gap:5px; }
    #page-myclass .mc-star-n{ font-size:19px; }
    #page-myclass .mc-star-lab{ font-size:8.5px; }
    #page-myclass .mc-foot .btn{ flex:1; justify-content:center; }
  }
  @media (max-width:480px){
    #page-myclass .mc-stat-grid{ grid-template-columns:1fr 1fr; }
    #page-myclass .mc-form{ grid-template-columns:1fr; }
    #page-myclass .mc-field-wide{ grid-column:span 1; }
  }

/* ======================== PAGE: nilboard ======================== */

  #page-nilboard .nb-chips{ grid-template-columns:repeat(4,1fr); }
  #page-nilboard .chip-me .k{ color:var(--me); }

  /* conference filter row */
  #page-nilboard .nb-filter{ display:flex; gap:8px; flex-wrap:wrap; margin:2px 0 4px; }
  #page-nilboard .nb-chip{ font-family:var(--disp); font-weight:700; font-size:12.5px; letter-spacing:.05em; text-transform:uppercase;
    padding:7px 14px; border-radius:999px; border:1px solid var(--line); background:var(--panel-2); color:var(--ink-2);
    cursor:pointer; transition:border-color .15s, color .15s, background-color .15s, transform .12s; }
  #page-nilboard .nb-chip:hover{ border-color:var(--line-bright); color:var(--ink); transform:translateY(-1px); }
  #page-nilboard .nb-chip:active{ transform:translateY(0) scale(.97); }
  #page-nilboard .nb-chip.is-on{ background:var(--accent); border-color:var(--accent); color:#fff; }
  #page-nilboard .nb-chip:focus-visible{ outline:2px solid var(--accent-bright); outline-offset:2px; }

  /* conference pill */
  #page-nilboard .nb-conf{ font-family:var(--disp); font-weight:700; font-size:11px; letter-spacing:.06em; text-transform:uppercase;
    color:var(--ink-2); padding:3px 9px; border-radius:999px; border:1px solid var(--line); background:var(--panel-2); white-space:nowrap; }

  /* YOU pill on own team */
  #page-nilboard .nb-you{ margin-left:8px; font-family:var(--disp); font-weight:800; font-size:10px; letter-spacing:.08em;
    color:#fff; background:var(--me); padding:2px 7px; border-radius:999px; vertical-align:middle; }

  /* % used mini-bar cell */
  #page-nilboard .nb-use{ min-width:128px; }
  #page-nilboard .nb-bar-cell{ display:flex; align-items:center; gap:9px; }
  #page-nilboard .nb-bar-cell .track{ flex:1; min-width:54px; }
  #page-nilboard .nb-pct{ font-family:var(--disp); font-weight:800; font-size:13px; color:var(--ink-2); font-variant-numeric:tabular-nums;
    flex:0 0 auto; width:38px; text-align:right; }
  #page-nilboard .bar.over-cap{ background:var(--loss); }

  /* gold top row */
  #page-nilboard .nb-tbl .gold-rk{ color:var(--gold); }
  #page-nilboard .nb-tbl tbody tr:first-child{ background:color-mix(in oklab,var(--gold) 7%,transparent); }
  #page-nilboard .nb-tbl tbody tr:first-child:hover{ background:color-mix(in oklab,var(--gold) 11%,transparent); }

  /* mobile cards (hidden on desktop) */
  #page-nilboard .nb-cards{ display:none; }
  #page-nilboard .nb-card{ display:block; padding:14px 15px; border-radius:var(--r-lg); border:1px solid var(--line);
    background:var(--panel); cursor:pointer; transition:border-color .16s, transform .14s; }
  #page-nilboard .nb-card + .nb-card{ margin-top:10px; }
  #page-nilboard .nb-card:hover{ border-color:var(--line-bright); transform:translateY(-2px); }
  #page-nilboard .nb-card.is-me{ border-color:color-mix(in oklab,var(--me) 45%,var(--line)); box-shadow:inset 3px 0 0 var(--me); }
  #page-nilboard .nb-card-h{ display:flex; align-items:center; gap:11px; }
  #page-nilboard .nb-rank{ font-family:var(--disp); font-weight:900; font-size:20px; color:var(--dim); width:24px; flex:0 0 auto;
    font-variant-numeric:tabular-nums; }
  #page-nilboard .nb-rank.gold-rk{ color:var(--gold); }
  #page-nilboard .nb-card-id{ min-width:0; }
  #page-nilboard .nb-card-team{ font-family:var(--disp); font-weight:800; font-size:18px; letter-spacing:.02em; text-transform:uppercase;
    color:var(--ink); line-height:1.05; }
  #page-nilboard .nb-card-sub{ font-size:12.5px; color:var(--dim); font-weight:600; margin-top:2px; }
  #page-nilboard .nb-card-stats{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-top:12px; }
  #page-nilboard .nb-stat{ display:flex; flex-direction:column; gap:3px; padding:9px 11px; border-radius:var(--r-sm);
    background:var(--panel-2); border:1px solid var(--line); }
  #page-nilboard .nb-stat-k{ font-size:10px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--dim); }
  #page-nilboard .nb-stat-v{ font-family:var(--disp); font-weight:800; font-size:16px; color:var(--ink); font-variant-numeric:tabular-nums; }
  /* s144 H0 (G §2.1): a tile may shrink below its nowrap DP chip; long lanes/labels end in "…", never past the card. */
  #page-nilboard .nb-stat{ min-width:0; }
  #page-nilboard .nb-stat-split .nb-stat-v{ display:block; overflow:hidden; text-overflow:ellipsis; }
  #page-nilboard .nb-philo{ display:inline-block; max-width:100%; overflow:hidden; text-overflow:ellipsis; vertical-align:bottom; }
  @media (max-width:360px){ #page-nilboard .nb-stat{ padding:9px 8px; } #page-nilboard .nb-stat-v{ font-size:13px; } #page-nilboard .nb-card{ padding:12px; } }
  #page-nilboard .nb-card-bar{ display:flex; align-items:center; gap:10px; margin-top:11px; }
  #page-nilboard .nb-card-bar .track{ flex:1; }

  #page-nilboard .nb-foot{ font-size:12.5px; margin-top:14px; max-width:74ch; }

  @media (max-width:920px){
    #page-nilboard .nb-chips{ grid-template-columns:1fr 1fr !important; }
  }
  /* swap table for cards on phones */
  @media (max-width:760px){
    #page-nilboard .nb-desk{ display:none; }
    #page-nilboard .nb-cards{ display:block; }
  }

/* ======================== PAGE: champions ======================== */

  /* banner */
  #page-champions .champ-banner{
    position:relative; overflow:hidden; border-radius:var(--r-xl);
    border:1px solid color-mix(in oklab,var(--gold) 38%,var(--line));
    display:flex; align-items:center; gap:clamp(14px,2.4vw,26px); flex-wrap:wrap;
    padding:clamp(20px,3.2vw,34px); margin-top:4px;
    background:linear-gradient(110deg, color-mix(in oklab,var(--gold) 18%,var(--panel)) 0%, color-mix(in oklab,var(--gold) 6%,var(--panel)) 48%, var(--panel) 100%);
  }
  #page-champions .cb-bg{ position:absolute; inset:0; pointer-events:none;
    background:radial-gradient(440px 340px at 88% -30%, color-mix(in oklab,var(--gold) 32%,transparent), transparent 64%); }
  #page-champions .cb-trophy{ position:relative; z-index:1; font-size:clamp(44px,7vw,68px); line-height:1; flex:0 0 auto;
    filter:drop-shadow(0 6px 14px rgba(0,0,0,.4)); }
  #page-champions .cb-body{ position:relative; z-index:1; min-width:0; flex:1; }
  #page-champions .cb-title{ font-family:var(--disp); font-weight:900; font-size:clamp(30px,5.4vw,54px); line-height:.92;
    letter-spacing:-.005em; text-transform:uppercase; margin:0; text-wrap:balance; }
  #page-champions .cb-lede{ max-width:62ch; color:var(--ink-2); font-size:14.5px; margin:9px 0 0; line-height:1.5; }
  #page-champions .cb-count{ font-family:var(--disp); font-weight:800; font-size:15px; letter-spacing:.04em; text-transform:uppercase;
    color:var(--gold); margin-top:13px; display:inline-flex; align-items:center; gap:10px; font-variant-numeric:tabular-nums; }
  #page-champions .cb-count .count{ font-size:22px; color:var(--ink); }
  #page-champions .cb-dot{ width:4px; height:4px; border-radius:50%; background:var(--mute); }

  /* reigning hero (banner washed in --champ-primary) */
  #page-champions .champ-hero{
    position:relative; overflow:hidden; border-radius:var(--r-xl);
    border:1px solid color-mix(in oklab,var(--champ-primary) 38%,var(--line));
    display:flex; align-items:center; gap:clamp(14px,2.4vw,28px); flex-wrap:wrap;
    padding:clamp(20px,3.2vw,34px); margin-bottom:6px;
    background:linear-gradient(110deg, color-mix(in oklab,var(--champ-primary) 26%,var(--panel)) 0%, color-mix(in oklab,var(--champ-primary) 9%,var(--panel)) 48%, var(--panel) 100%);
  }
  #page-champions .champ-hero-bg{ position:absolute; inset:0; pointer-events:none;
    background:radial-gradient(440px 340px at 86% -28%, color-mix(in oklab,var(--champ-primary) 36%,transparent), transparent 64%); }
  #page-champions .champ-hero-logo{ position:relative; z-index:1; flex:0 0 auto; }
  #page-champions .champ-hero-logo .logo-wrap{ border-radius:20px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.14), 0 16px 38px -16px var(--champ-primary); }
  #page-champions .champ-hero-body{ position:relative; z-index:1; min-width:0; flex:1; }
  #page-champions .champ-title{ font-family:var(--disp); font-weight:900; font-size:clamp(30px,5.6vw,56px); line-height:.9;
    letter-spacing:-.005em; text-transform:uppercase; margin:0; text-wrap:balance; }
  #page-champions .champ-sub{ display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; margin-top:10px; }
  #page-champions .champ-psn{ font-family:var(--disp); font-weight:800; font-size:18px; letter-spacing:.04em;
    color:color-mix(in oklab,var(--champ-primary) 35%,var(--ink)); }
  #page-champions .champ-line{ font-size:14.5px; color:var(--ink-2); font-weight:500; }
  #page-champions .champ-line b{ font-family:var(--disp); font-weight:800; font-size:17px; color:var(--ink); }
  #page-champions .champ-stat-row{ display:flex; gap:clamp(18px,3vw,40px); flex-wrap:wrap; margin-top:18px; }
  #page-champions .cs{ display:flex; flex-direction:column; gap:3px; }
  #page-champions .cs-k{ font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--dim); }
  #page-champions .cs-v{ font-family:var(--disp); font-weight:800; font-size:24px; letter-spacing:.02em; color:var(--ink); font-variant-numeric:tabular-nums; }

  /* title-card grid */
  #page-champions .champ-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; align-items:start; }
  #page-champions .title-card{ position:relative; border-radius:var(--r-lg); overflow:hidden;
    border:1px solid color-mix(in oklab,var(--champ-primary) 30%,var(--line)); background:var(--panel);
    transition:border-color .16s, transform .16s, box-shadow .16s; }
  #page-champions .title-card-link{ cursor:pointer; }
  #page-champions .title-card-link:hover{ border-color:color-mix(in oklab,var(--champ-primary) 55%,var(--line));
    transform:translateY(-2px); box-shadow:var(--shadow-lift); }
  #page-champions .tc-banner{ display:flex; align-items:center; justify-content:space-between; padding:11px 15px;
    background:linear-gradient(100deg, var(--champ-primary) 0%, var(--champ-secondary) 100%); }
  #page-champions .tc-szn{ font-family:var(--disp); font-weight:800; font-size:13px; letter-spacing:.07em; text-transform:uppercase;
    color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.4); }
  #page-champions .tc-trophy{ font-size:18px; line-height:1; filter:drop-shadow(0 2px 4px rgba(0,0,0,.4)); }
  #page-champions .tc-body{ display:flex; align-items:center; gap:13px; padding:15px 15px 4px; }
  #page-champions .tc-id{ display:flex; flex-direction:column; gap:1px; min-width:0; flex:1; }
  #page-champions .tc-label{ font-family:var(--disp); font-weight:800; font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--gold); }
  #page-champions .tc-psn{ font-family:var(--disp); font-weight:800; font-size:18px; letter-spacing:.02em; color:var(--ink); line-height:1.05; }
  #page-champions .tc-team{ font-size:12.5px; color:var(--dim); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  #page-champions .tc-score{ display:flex; flex-direction:column; align-items:flex-end; flex:0 0 auto; }
  #page-champions .tc-line{ font-family:var(--disp); font-weight:900; font-size:22px; letter-spacing:.01em; color:var(--ink); font-variant-numeric:tabular-nums; }
  #page-champions .tc-recap{ margin:8px 15px 16px; padding:10px 13px; border-left:2px solid color-mix(in oklab,var(--champ-primary) 50%,var(--line));
    background:var(--panel-2); border-radius:0 var(--r-sm) var(--r-sm) 0; font-size:12.5px; line-height:1.5; color:var(--ink-2); }

  /* dynasty rankings rail */
  #page-champions #champ-rail{ position:sticky; top:84px; }
  #page-champions .dyn-row{ display:flex; align-items:center; gap:12px; padding:12px 11px; border-radius:var(--r-sm); transition:background-color .15s; }
  #page-champions .dyn-row + .dyn-row{ border-top:1px solid var(--line); }
  #page-champions .dyn-row:hover{ background:var(--hover-row); }
  #page-champions .dyn-row.is-me{ background:color-mix(in oklab,var(--me) 9%,transparent); box-shadow:inset 3px 0 0 var(--me); }
  #page-champions .dyn-rk{ font-family:var(--disp); font-weight:800; font-size:20px; color:var(--dim); width:24px; flex:0 0 auto; text-align:center; font-variant-numeric:tabular-nums; }
  #page-champions .dyn-rk.gold{ color:var(--gold); }
  #page-champions .dynasty-logo--placeholder{ display:inline-grid; place-items:center; width:22px; height:22px; border-radius:6px; flex:0 0 auto;
    background:var(--panel-2); border:1px solid var(--line); color:var(--gold); font-family:var(--disp); font-weight:800; font-size:13px; }
  #page-champions .dyn-id{ display:flex; flex-direction:column; gap:1px; min-width:0; }
  #page-champions .dyn-id b{ font-weight:700; font-size:14.5px; color:var(--ink); }
  #page-champions .dyn-team{ font-size:12px; color:var(--dim); font-weight:600; }
  #page-champions .dyn-stars{ margin-left:auto; font-size:12px; letter-spacing:.5px; white-space:nowrap; filter:drop-shadow(0 1px 2px rgba(0,0,0,.4)); }
  #page-champions .dyn-n{ font-family:var(--disp); font-weight:800; font-size:16px; color:var(--gold); width:30px; text-align:right; flex:0 0 auto; font-variant-numeric:tabular-nums; }
  #page-champions .dyn-note{ font-size:12px; color:var(--dim); line-height:1.5; margin:0; padding:0 4px; }

  /* conference strip */
  #page-champions .conf-row{ display:flex; align-items:center; gap:11px; padding:12px 11px; border-radius:var(--r-sm); transition:background-color .15s; }
  #page-champions .conf-row + .conf-row{ border-top:1px solid var(--line); }
  #page-champions .conf-row:hover{ background:var(--hover-row); }
  #page-champions .conf-tag{ font-family:var(--disp); font-weight:800; font-size:11px; letter-spacing:.06em; text-transform:uppercase;
    color:var(--ink-2); background:var(--panel-2); border:1px solid var(--line); padding:4px 8px; border-radius:7px; width:62px; text-align:center; flex:0 0 auto; }
  #page-champions .conf-id{ display:flex; flex-direction:column; gap:1px; min-width:0; }
  #page-champions .conf-id b{ font-weight:700; font-size:14.5px; color:var(--ink); }
  #page-champions .conf-coach{ font-size:12px; color:var(--dim); font-weight:600; }

  /* timeline */
  #page-champions .champ-timeline{ position:relative; display:flex; flex-direction:column; gap:0; padding-left:6px; }
  #page-champions .ct-item{ position:relative; display:grid; grid-template-columns:44px 22px 1fr; align-items:center; gap:10px; padding:7px 0; }
  #page-champions .ct-item::before{ content:""; position:absolute; left:55px; top:0; bottom:0; width:2px; background:var(--line); }
  #page-champions .ct-item:first-child::before{ top:50%; }
  #page-champions .ct-item:last-child::before{ bottom:50%; }
  #page-champions .ct-szn{ font-family:var(--disp); font-weight:800; font-size:15px; color:var(--dim); letter-spacing:.04em; text-align:right; font-variant-numeric:tabular-nums; }
  #page-champions .ct-dot{ position:relative; z-index:1; width:13px; height:13px; border-radius:50%; background:var(--panel-2); border:2px solid var(--line-bright); justify-self:center; }
  #page-champions .ct-current .ct-dot{ background:var(--gold); border-color:var(--gold); box-shadow:0 0 0 4px color-mix(in oklab,var(--gold) 22%,transparent); }
  #page-champions .ct-current .ct-szn{ color:var(--gold); }
  #page-champions .ct-card{ display:flex; align-items:center; gap:11px; padding:10px 13px; border-radius:var(--r); background:var(--panel); border:1px solid var(--line); transition:border-color .15s, transform .15s; }
  #page-champions .ct-card:hover{ border-color:var(--line-bright); transform:translateX(2px); }
  #page-champions .ct-current .ct-card{ border-color:color-mix(in oklab,var(--gold) 40%,var(--line)); background:color-mix(in oklab,var(--gold) 7%,var(--panel)); }
  #page-champions .ct-body{ display:flex; flex-direction:column; gap:1px; min-width:0; }
  #page-champions .ct-body b{ font-family:var(--disp); font-weight:700; font-size:15px; letter-spacing:.02em; color:var(--ink); }
  #page-champions .ct-coach{ font-size:12px; color:var(--dim); font-weight:600; }
  #page-champions .ct-score{ margin-left:auto; font-family:var(--disp); font-weight:700; font-size:13.5px; color:var(--ink-2); letter-spacing:.02em; white-space:nowrap; font-variant-numeric:tabular-nums; }

  /* empty state */
  #page-champions .champ-empty{ text-align:center; padding:clamp(34px,6vw,64px) 20px; border:1px dashed var(--line); border-radius:var(--r-lg); background:var(--panel); }
  #page-champions .ce-icon{ font-size:42px; opacity:.6; margin-bottom:10px; }
  #page-champions .ce-h{ font-family:var(--disp); font-weight:800; font-size:20px; letter-spacing:.02em; color:var(--ink); margin:0 0 6px; }
  #page-champions .ce-p{ color:var(--dim); font-size:14px; margin:0; max-width:46ch; margin-inline:auto; }

  @media (max-width:920px){
    #page-champions #champ-body{ grid-template-columns:1fr !important; }
    #page-champions #champ-rail{ position:static; }
  }
  @media (max-width:760px){
    #page-champions .champ-banner,
    #page-champions .champ-hero{ flex-direction:column; align-items:flex-start; }
    #page-champions .champ-grid{ grid-template-columns:1fr; }
    #page-champions .ct-score{ display:none; }
    #page-champions .ct-item{ grid-template-columns:38px 20px 1fr; }
    #page-champions .ct-item::before{ left:47px; }
  }

/* ======================== PAGE: history ======================== */

  /* Header */
  #page-history .hist-head{ text-align:center; padding:6px 0 4px; }
  #page-history .hist-kicker{ font-family:var(--disp); font-weight:800; font-size:12px; letter-spacing:.16em;
    text-transform:uppercase; color:var(--accent-bright); }
  #page-history .hist-title{ font-family:var(--disp); font-weight:900; font-size:clamp(34px,5.6vw,58px); line-height:.94;
    letter-spacing:-.01em; text-transform:uppercase; color:var(--ink); margin:8px 0 0; }
  #page-history .hist-lede{ max-width:62ch; margin:10px auto 0; color:var(--ink-2); font-size:14.5px; line-height:1.5; }
  #page-history .hist-count{ display:inline-block; margin-top:10px; font-family:var(--disp); font-weight:700; font-size:12.5px;
    letter-spacing:.06em; text-transform:uppercase; color:var(--dim); }
  #page-history .hist-count b{ color:var(--ink); }

  /* H2H selector */
  #page-history .h2h-card{ margin-bottom:8px; }
  #page-history .h2h-form{ display:grid; grid-template-columns:1fr auto 1fr auto; gap:14px; align-items:end; }
  #page-history .h2h-field{ display:flex; flex-direction:column; gap:6px; min-width:0; }
  #page-history .h2h-flabel{ font-family:var(--disp); font-weight:800; font-size:11px; letter-spacing:.1em;
    text-transform:uppercase; color:var(--dim); }
  #page-history .sel-wrap{ position:relative; }
  #page-history .sel-wrap::after{ content:"▾"; position:absolute; right:12px; top:50%; transform:translateY(-50%);
    color:var(--dim); pointer-events:none; font-size:12px; }
  #page-history .h2h-sel{ width:100%; appearance:none; -webkit-appearance:none; background:var(--panel-2);
    border:1px solid var(--line); border-radius:var(--r-sm); color:var(--ink); font-family:var(--body);
    font-weight:600; font-size:14px; padding:11px 32px 11px 13px; cursor:pointer; transition:border-color .15s; }
  #page-history .h2h-sel:hover{ border-color:var(--line-bright); }
  #page-history .h2h-sel:focus-visible{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in oklab,var(--accent) 30%,transparent); }
  #page-history .h2h-vs{ font-family:var(--disp); font-weight:900; font-size:18px; letter-spacing:.04em; color:var(--dim);
    padding-bottom:11px; align-self:end; }
  #page-history .h2h-go{ align-self:end; }
  #page-history .h2h-err{ color:var(--loss); font-size:12.5px; font-weight:600; margin:12px 0 0; }
  #page-history .h2h-hint{ font-size:12px; margin:12px 0 0; }

  /* H2H result card */
  #page-history .h2h-result{ margin-bottom:6px; overflow:hidden; }
  #page-history .h2h-headline{ display:grid; grid-template-columns:1fr auto 1fr; gap:14px; align-items:center;
    padding:20px clamp(14px,2.4vw,22px); border-bottom:1px solid var(--line);
    background:linear-gradient(180deg, color-mix(in oklab,var(--accent) 7%,var(--panel)), var(--panel)); }
  #page-history .h2h-side{ display:flex; align-items:center; gap:13px; min-width:0; }
  #page-history .h2h-side-r{ justify-content:flex-end; text-align:right; }
  #page-history .h2h-side-id{ display:flex; flex-direction:column; min-width:0; }
  #page-history .h2h-psn{ font-family:var(--disp); font-weight:800; font-size:clamp(18px,2.4vw,24px); letter-spacing:.02em;
    color:var(--ink); cursor:pointer; line-height:1.05; white-space:nowrap; }
  #page-history .h2h-psn:hover{ color:var(--accent-bright); }
  #page-history .h2h-side-team{ font-size:12.5px; color:var(--dim); font-weight:600; margin-top:2px; }
  #page-history .h2h-center{ text-align:center; flex:0 0 auto; }
  #page-history .h2h-record{ font-family:var(--disp); font-weight:900; font-size:clamp(26px,3.6vw,38px); line-height:1;
    letter-spacing:.02em; font-variant-numeric:tabular-nums; white-space:nowrap; }
  #page-history .h2h-w{ color:var(--win); }
  #page-history .h2h-l{ color:var(--loss); }
  #page-history .h2h-t{ color:var(--dim); }
  #page-history .h2h-rdash{ color:var(--mute); margin:0 2px; }
  #page-history .h2h-games{ display:block; font-family:var(--disp); font-weight:700; font-size:11px; letter-spacing:.08em;
    text-transform:uppercase; color:var(--dim); margin-top:5px; }

  #page-history .h2h-tiles{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; padding:16px clamp(14px,2.4vw,22px); }
  #page-history .h2h-tiles .chip{ background:color-mix(in oklab,var(--bg) 26%,var(--panel)); }
  #page-history .h2h-tile-me{ box-shadow:inset 3px 0 0 var(--me); }
  #page-history .h2h-margin{ color:var(--win); font-family:var(--disp); font-weight:900; }
  #page-history .h2h-margin.loss{ color:var(--loss); }

  /* H2H matchups table block */
  #page-history .h2h-matchups{ border-top:1px solid var(--line); }
  #page-history .h2h-matchups .panel-h{ padding:14px clamp(14px,2.4vw,22px) 10px; }
  #page-history .mu-cell{ white-space:nowrap; }
  #page-history .mu-cell b{ font-weight:700; font-size:12.5px; color:var(--ink-2); margin:0 2px 0 5px; vertical-align:middle; }
  #page-history .mu-at{ color:var(--mute); font-weight:700; margin:0 4px; }
  #page-history .mu-cell .logo-wrap{ vertical-align:middle; }
  #page-history .mu-sim{ font-size:9px; padding:1px 4px; border-radius:4px; background:var(--panel-2);
    color:var(--dim); margin-left:5px; letter-spacing:.04em; vertical-align:middle; }
  #page-history .h2h-empty{ padding:26px 22px; text-align:center; color:var(--dim); font-size:13.5px; }

  /* All-time stats table */
  #page-history .hist-panel{ margin-bottom:6px; }
  #page-history .hist-row{ cursor:pointer; }
  #page-history .hist-row:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; }
  #page-history .tc-team{ font-family:var(--disp); font-weight:700; font-size:10.5px; letter-spacing:.06em;
    color:var(--dim); margin-left:7px; }
  #page-history .hist-table .psn{ font-family:var(--disp); font-weight:700; font-size:14px; letter-spacing:.02em;
    color:var(--ink); cursor:pointer; }
  #page-history .hist-table .psn:hover{ color:var(--accent-bright); }
  #page-history .t-app{ color:var(--dim); font-weight:700; }
  #page-history .diff{ font-family:var(--disp); font-weight:800; font-variant-numeric:tabular-nums; }
  #page-history .diff.up{ color:var(--win); }
  #page-history .diff.down{ color:var(--loss); }
  #page-history .hist-foot{ font-size:11.5px; line-height:1.5; padding:12px clamp(12px,2vw,16px) 4px; }

  /* Responsive */
  @media (max-width:920px){
    #page-history .h2h-tiles{ grid-template-columns:1fr 1fr; }
  }
  @media (max-width:760px){
    #page-history .h2h-form{ grid-template-columns:1fr; gap:10px; }
    #page-history .h2h-vs{ text-align:center; padding:2px 0; align-self:center; }
    #page-history .h2h-go{ width:100%; justify-content:center; }
    #page-history .h2h-headline{ grid-template-columns:1fr; gap:16px; text-align:center; }
    #page-history .h2h-side, #page-history .h2h-side-r{ justify-content:center; text-align:center; }
    #page-history .h2h-side-r{ flex-direction:row-reverse; }
    #page-history .h2h-side-id{ align-items:center; }
  }
  @media (max-width:480px){
    #page-history .h2h-tiles{ grid-template-columns:1fr; }
  }

/* ======================== PAGE: news ======================== */

  #page-news .news-feed{ display:flex; flex-direction:column; gap:14px; }

  /* AI banner */
  #page-news .news-ai-banner{
    display:flex; align-items:center; gap:16px; margin-bottom:14px;
    border:1px solid var(--line); border-radius:var(--r-lg);
    background:linear-gradient(180deg, color-mix(in oklab,var(--accent) 11%,var(--panel)) 0%, var(--panel) 64%);
    padding:16px 18px; position:relative; overflow:hidden;
  }
  #page-news .news-ai-banner::after{
    content:""; position:absolute; right:-50px; top:-60px; width:240px; height:240px; border-radius:50%;
    background:radial-gradient(circle, color-mix(in oklab,var(--accent) 26%,transparent), transparent 68%);
    pointer-events:none;
  }
  #page-news .ai-mark{
    flex:0 0 auto; display:grid; place-items:center; width:44px; height:44px; border-radius:var(--r);
    background:color-mix(in oklab,var(--accent) 24%,var(--panel-2)); color:var(--accent-bright);
    font-size:24px; position:relative; z-index:1;
  }
  #page-news .ai-copy{ position:relative; z-index:1; min-width:0; }
  #page-news .ai-title{ font-family:var(--disp); font-weight:800; font-size:18px; letter-spacing:.03em; text-transform:uppercase; color:var(--ink); }
  #page-news .ai-sub{ font-size:13px; color:var(--ink-2); line-height:1.45; margin:3px 0 0; max-width:78ch; }
  #page-news .ai-banner-pill{ margin-left:auto; flex:0 0 auto; position:relative; z-index:1; }

  /* Filter chips */
  #page-news .news-filters{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
  #page-news .nf-chip{
    font-family:var(--disp); font-weight:700; font-size:12.5px; letter-spacing:.05em; text-transform:uppercase;
    color:var(--dim); background:var(--panel-2); border:1px solid var(--line); border-radius:999px;
    padding:6px 13px; cursor:pointer; transition:color .15s, border-color .15s, background-color .15s, transform .12s;
  }
  #page-news .nf-chip:hover{ color:var(--ink-2); border-color:var(--line-bright); }
  #page-news .nf-chip:active{ transform:translateY(1px); }
  #page-news .nf-chip.is-on{ color:var(--bg); background:var(--accent); border-color:var(--accent); }
  #page-news .nf-chip:focus-visible{ outline:2px solid var(--accent-bright); outline-offset:2px; }

  /* Post card */
  #page-news .news-post{ padding:18px 20px; position:relative; }
  #page-news .news-post.pinned{ box-shadow:inset 4px 0 0 var(--gold); border-color:var(--line-bright); }

  /* Meta line */
  #page-news .np-meta{ display:flex; align-items:center; flex-wrap:wrap; gap:9px; margin-bottom:10px; }
  #page-news .np-date{ font-family:var(--disp); font-weight:700; font-size:12px; letter-spacing:.04em; text-transform:uppercase; color:var(--dim); font-variant-numeric:tabular-nums; }
  #page-news .np-author{ font-size:12.5px; color:var(--ink-2); font-weight:600; }
  #page-news .np-dot{ width:3px; height:3px; border-radius:50%; background:var(--mute); flex:0 0 auto; }
  #page-news .np-source{ font-size:12px; color:var(--accent-bright); font-weight:600; cursor:pointer; text-decoration:none; }
  #page-news .np-source:hover{ text-decoration:underline; }

  /* Category pills (tint the base .pill per category) */
  #page-news .np-cat{ border:1px solid transparent; }
  #page-news .cat-matchup{ color:var(--accent-bright); background:color-mix(in oklab,var(--accent) 16%,var(--panel-2)); border-color:color-mix(in oklab,var(--accent) 34%,transparent); }
  #page-news .cat-upset{ color:var(--loss); background:color-mix(in oklab,var(--loss) 15%,var(--panel-2)); border-color:color-mix(in oklab,var(--loss) 34%,transparent); }
  #page-news .cat-signing{ color:var(--win); background:color-mix(in oklab,var(--win) 15%,var(--panel-2)); border-color:color-mix(in oklab,var(--win) 32%,transparent); }
  #page-news .cat-lp{ color:var(--gold); background:color-mix(in oklab,var(--gold) 16%,var(--panel-2)); border-color:color-mix(in oklab,var(--gold) 34%,transparent); }
  #page-news .cat-power{ color:var(--live); background:color-mix(in oklab,var(--live) 16%,var(--panel-2)); border-color:color-mix(in oklab,var(--live) 34%,transparent); }
  #page-news .cat-recap{ color:var(--ink-2); background:var(--panel-2); border-color:var(--line); }

  /* Title */
  #page-news .news-title{
    font-family:var(--disp); font-weight:800; font-size:clamp(20px,2.4vw,26px); line-height:1.08;
    letter-spacing:.005em; text-transform:uppercase; color:var(--ink); margin:0 0 10px;
    display:flex; align-items:center; gap:10px; flex-wrap:wrap; text-wrap:balance;
  }
  #page-news .news-title .np-tl{ flex:0 0 auto; }

  /* Body */
  #page-news .news-body{ font-size:14.5px; line-height:1.6; color:var(--ink-2); white-space:pre-line; margin:0 0 12px; max-width:74ch; }
  #page-news .news-body:last-of-type{ margin-bottom:0; }

  /* "image" panel : crest matchup banner stand-in */
  #page-news .news-image{
    position:relative; border-radius:var(--r); margin:0 0 14px; min-height:140px;
    display:grid; place-items:center; overflow:hidden; border:1px solid var(--line);
    background:linear-gradient(135deg, color-mix(in oklab,var(--ic1) 40%,var(--panel-2)) 0%, var(--panel-2) 48%, color-mix(in oklab,var(--ic2) 40%,var(--panel-2)) 100%);
  }
  #page-news .ni-vs{ display:flex; align-items:center; gap:18px; }
  #page-news .ni-vs-sc{ font-family:var(--disp); font-weight:900; font-size:38px; color:var(--ink); letter-spacing:.02em; font-variant-numeric:tabular-nums; filter:drop-shadow(0 2px 8px rgba(0,0,0,.45)); }
  #page-news .ni-vs-x{ color:var(--dim); margin:0 6px; }
  #page-news .ni-tag-final{ position:absolute; top:10px; right:10px; }

  /* Matchup-preview inline banner (no score yet) */
  #page-news .np-preview{
    display:flex; align-items:center; gap:14px; margin:0 0 14px; padding:14px 16px;
    border:1px solid var(--line); border-radius:var(--r); background:var(--panel-2);
  }
  #page-news .npp-side{ display:flex; align-items:center; gap:11px; flex:1; min-width:0; }
  #page-news .npp-side.npp-right{ justify-content:flex-end; text-align:right; }
  #page-news .npp-info{ display:flex; flex-direction:column; min-width:0; }
  #page-news .npp-team{ font-family:var(--disp); font-weight:800; font-size:16px; letter-spacing:.02em; text-transform:uppercase; color:var(--ink); }
  #page-news .npp-rec{ font-size:12px; color:var(--dim); font-weight:600; margin-top:1px; }
  #page-news .npp-vs{ font-family:var(--disp); font-weight:900; font-size:13px; letter-spacing:.1em; color:var(--mute); flex:0 0 auto; }

  /* In-card tables */
  #page-news .np-table{ margin:0 0 12px; }
  #page-news .np-up{ color:var(--win); }

  /* Admin actions */
  #page-news .np-actions{ display:flex; gap:8px; margin-top:14px; padding-top:13px; border-top:1px solid var(--line); }
  #page-news .np-del:hover{ color:var(--loss); border-color:var(--loss); }

  /* Empty state */
  #page-news .news-empty{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px;
    padding:48px 20px; border:1px dashed var(--line); border-radius:var(--r-lg); background:var(--panel); }
  #page-news .ne-ic{ font-size:36px; line-height:1; }
  #page-news .ne-h{ font-family:var(--disp); font-weight:800; font-size:20px; letter-spacing:.02em; text-transform:uppercase; color:var(--ink); }
  #page-news .ne-d{ font-size:13.5px; color:var(--ink-2); line-height:1.5; max-width:50ch; margin:0 0 6px; }

  /* Footer */
  #page-news .news-footer{ text-align:center; font-family:var(--disp); font-weight:800; font-size:13px;
    letter-spacing:.18em; text-transform:uppercase; color:var(--dim); padding:26px 0 8px; }

  @media (max-width:760px){
    #page-news .news-ai-banner{ flex-wrap:wrap; gap:12px; }
    #page-news .ai-banner-pill{ margin-left:0; }
    #page-news .news-post{ padding:16px 15px; }
    #page-news .np-preview{ gap:10px; padding:12px; }
    #page-news .npp-team{ font-size:14px; }
    #page-news .ni-vs{ gap:12px; }
    #page-news .ni-vs-sc{ font-size:30px; }
    #page-news .np-actions .btn{ flex:1; justify-content:center; }
  }

/* ======================== PAGE: rules ======================== */

  /* Header */
  #page-rules .rules-head{ margin-bottom:6px; }
  #page-rules .rh-kicker{ display:inline-block; font-family:var(--disp); font-weight:800; font-size:12px;
    letter-spacing:.16em; text-transform:uppercase; color:var(--accent-bright); }
  #page-rules .rh-title{ font-family:var(--disp); font-weight:900; font-size:clamp(34px,5.4vw,58px); line-height:.94;
    letter-spacing:-.01em; text-transform:uppercase; margin:8px 0 0; color:var(--ink); }
  #page-rules .rh-lede{ max-width:66ch; color:var(--ink-2); font-size:15px; margin:10px 0 0; line-height:1.5; }

  /* Search form */
  #page-rules .rules-search{ margin-bottom:14px; }
  #page-rules .rs-form{ display:flex; align-items:center; gap:10px; }
  #page-rules .rs-ic{ font-size:18px; flex:0 0 auto; line-height:1; }
  #page-rules .rs-input{ flex:1; min-width:0; height:46px; padding:0 14px; border-radius:var(--r);
    border:1px solid var(--line); background:var(--panel-2); color:var(--ink); font-family:var(--body);
    font-size:15px; font-weight:500; transition:border-color .16s, box-shadow .16s; }
  #page-rules .rs-input::placeholder{ color:var(--mute); }
  #page-rules .rs-input:focus-visible{ outline:none; border-color:var(--accent);
    box-shadow:0 0 0 3px color-mix(in oklab,var(--accent) 28%,transparent); }
  #page-rules .rs-submit{ flex:0 0 auto; height:46px; }
  #page-rules .rs-hint{ font-size:12.5px; color:var(--dim); font-weight:500; margin-top:10px; }

  /* Two-column layout : results + sidebar */
  #page-rules .rules-layout{ display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:16px;
    align-items:start; margin-bottom:8px; }
  #page-rules .rules-main{ min-width:0; }

  /* Result cards */
  #page-rules .rs-results{ margin-top:4px; }
  #page-rules .rule-result{ display:block; position:relative; padding:16px 18px; border:1px solid var(--line);
    border-radius:var(--r-lg); background:var(--panel); cursor:pointer; overflow:hidden;
    transition:border-color .16s, transform .16s, box-shadow .16s; }
  #page-rules .rule-result::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
    background:var(--accent); opacity:0; transition:opacity .16s; }
  #page-rules .rule-result:hover{ border-color:var(--line-bright); transform:translateY(-2px); box-shadow:var(--shadow-lift); }
  #page-rules .rule-result:hover::before{ opacity:1; }
  #page-rules .rr-cat{ display:inline-flex; align-items:center; gap:7px; padding:4px 9px; border-radius:999px;
    background:var(--panel-2); border:1px solid var(--line); }
  #page-rules .rr-cat-ic{ font-size:13px; line-height:1; }
  #page-rules .rr-cat-name{ font-family:var(--disp); font-weight:700; font-size:11px; letter-spacing:.08em;
    text-transform:uppercase; color:var(--dim); }
  #page-rules .rr-title{ font-family:var(--disp); font-weight:800; font-size:19px; letter-spacing:.01em;
    text-transform:uppercase; color:var(--ink); margin:11px 0 0; line-height:1.05; }
  #page-rules .rr-body{ font-size:13.5px; color:var(--ink-2); line-height:1.5; margin:7px 0 0;
    font-variant-numeric:tabular-nums; }
  #page-rules .rr-link{ display:inline-block; font-family:var(--disp); font-weight:700; font-size:12px;
    letter-spacing:.05em; text-transform:uppercase; color:var(--accent-bright); margin-top:11px; }

  /* Most Searched sidebar */
  #page-rules .rules-side{ position:sticky; top:80px; }
  #page-rules .ms-row{ display:flex; align-items:center; gap:11px; padding:10px 11px; border-radius:var(--r-sm);
    cursor:pointer; transition:background-color .15s; }
  #page-rules .ms-row + .ms-row{ border-top:1px solid var(--line); }
  #page-rules .ms-row:hover{ background:var(--hover-row); }
  #page-rules .ms-rk{ font-family:var(--disp); font-weight:800; font-size:13px; color:var(--mute);
    width:18px; flex:0 0 auto; text-align:right; font-variant-numeric:tabular-nums; }
  #page-rules .ms-term{ flex:1; min-width:0; font-weight:600; font-size:14px; color:var(--ink-2);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  #page-rules .ms-row:hover .ms-term{ color:var(--ink); }
  #page-rules .ms-hits{ flex:0 0 auto; font-family:var(--disp); font-weight:800; font-size:13px;
    color:var(--dim); font-variant-numeric:tabular-nums; }

  /* Category cards */
  #page-rules .cat-card{ display:flex; flex-direction:column; gap:6px; padding:18px 16px; border:1px solid var(--line);
    border-radius:var(--r-lg); background:var(--panel); cursor:pointer;
    transition:border-color .16s, transform .16s, box-shadow .16s; }
  #page-rules .cat-card:hover{ border-color:var(--line-bright); transform:translateY(-2px); box-shadow:var(--shadow-lift); }
  #page-rules .cc-ic{ font-size:26px; line-height:1; }
  #page-rules .cc-name{ font-family:var(--disp); font-weight:800; font-size:18px; letter-spacing:.02em;
    text-transform:uppercase; color:var(--ink); margin-top:4px; }
  #page-rules .cc-desc{ font-size:13px; color:var(--ink-2); line-height:1.45; flex:1; }
  #page-rules .cc-count{ font-family:var(--disp); font-weight:800; font-size:12.5px; letter-spacing:.05em;
    text-transform:uppercase; color:var(--accent-bright); margin-top:6px; padding-top:8px;
    border-top:1px solid var(--line); }
  #page-rules .cc-count .num{ font-size:14px; }

  /* Footer */
  #page-rules .rules-footer{ text-align:center; font-family:var(--disp); font-weight:800; font-size:13px;
    letter-spacing:.18em; text-transform:uppercase; color:var(--dim); padding:26px 0 8px; }

  @media (max-width:920px){
    #page-rules .rules-layout{ grid-template-columns:1fr; }
    #page-rules .rules-side{ position:static; top:auto; }
  }
  @media (max-width:760px){
    #page-rules .rs-form{ flex-wrap:wrap; }
    #page-rules .rs-input{ flex:1 1 100%; order:2; }
    #page-rules .rs-ic{ order:1; }
    #page-rules .rs-submit{ order:3; flex:1; justify-content:center; }
  }

/* ======================== PAGE: tools ======================== */

  #page-tools .t-lede{ color:var(--ink-2); font-size:14.5px; max-width:74ch; margin:0 0 6px; }
  #page-tools code{ font-family:var(--body); font-size:.92em; background:var(--panel-2); padding:1px 5px; border-radius:5px; color:var(--ink-2); }

  /* commish / premium tags */
  #page-tools .t-tag{ font-family:var(--disp); font-weight:800; font-size:9.5px; letter-spacing:.08em; text-transform:uppercase;
    color:var(--gold); background:color-mix(in oklab,var(--gold) 16%,transparent); border:1px solid color-mix(in oklab,var(--gold) 38%,transparent);
    padding:1px 5px; border-radius:5px; vertical-align:middle; margin-left:4px; }
  #page-tools .t-tag--prem{ color:var(--accent-bright); background:color-mix(in oklab,var(--accent) 16%,transparent); border-color:color-mix(in oklab,var(--accent) 40%,transparent); }
  #page-tools .t-tag--super{ margin-left:6px; }

  /* SUPER-TAB strip */
  #page-tools .t-supers{ display:flex; flex-wrap:wrap; gap:6px; padding:6px; background:var(--panel-2); border:1px solid var(--line);
    border-radius:var(--r-lg); margin-bottom:14px; }
  #page-tools .t-super{ font-family:var(--disp); font-weight:800; font-size:13px; letter-spacing:.04em; text-transform:uppercase;
    color:var(--dim); background:transparent; border:1px solid transparent; border-radius:var(--r); padding:9px 14px; cursor:pointer;
    display:inline-flex; align-items:center; gap:7px; transition:color .15s, background-color .15s, border-color .15s; }
  #page-tools .t-super:hover{ color:var(--ink-2); background:var(--hover-row); }
  #page-tools .t-super.is-active{ color:var(--ink); background:var(--panel); border-color:var(--line-bright); box-shadow:var(--shadow-card); }
  #page-tools .tools-tab-count{ font-family:var(--disp); font-weight:800; font-size:11px; min-width:18px; text-align:center; padding:1px 5px;
    border-radius:20px; background:var(--panel); border:1px solid var(--line); color:var(--ink-2); font-variant-numeric:tabular-nums; }
  #page-tools .t-super.is-active .tools-tab-count{ background:var(--panel-2); }
  #page-tools .tools-tab-count--alert{ background:color-mix(in oklab,var(--loss) 22%,transparent); border-color:color-mix(in oklab,var(--loss) 50%,transparent); color:var(--loss); }

  /* SUB-TAB strip */
  #page-tools .t-subs{ display:flex; flex-wrap:wrap; gap:4px; border-bottom:1px solid var(--line); margin-bottom:16px; }
  #page-tools .t-sub{ font-family:var(--disp); font-weight:700; font-size:12.5px; letter-spacing:.04em; text-transform:uppercase;
    color:var(--dim); background:transparent; border:none; border-bottom:2px solid transparent; padding:9px 12px 10px; cursor:pointer;
    display:inline-flex; align-items:center; gap:7px; margin-bottom:-1px; transition:color .15s, border-color .15s; }
  #page-tools .t-sub:hover{ color:var(--ink-2); }
  #page-tools .t-sub.is-active{ color:var(--ink); border-bottom-color:var(--accent); }

  /* panes */
  #page-tools .t-super-pane{ display:none; }
  #page-tools .t-super-pane.is-active{ display:block; }
  #page-tools .t-pane{ display:none; }
  #page-tools .t-pane.is-active{ display:block; }

  /* generic small card inside a pane */
  #page-tools .t-card{ border:1px solid var(--line); border-radius:var(--r-lg); background:var(--panel); padding:16px; }
  #page-tools .t-card-h{ font-family:var(--disp); font-weight:800; font-size:14.5px; letter-spacing:.03em; text-transform:uppercase; color:var(--ink); display:flex; align-items:center; gap:8px; flex-wrap:wrap; }

  /* form controls */
  #page-tools .t-sel, #page-tools .t-in{ font-family:var(--body); font-size:13.5px; color:var(--ink); background:var(--panel-2);
    border:1px solid var(--line); border-radius:var(--r-sm); padding:8px 10px; width:100%; transition:border-color .15s; }
  #page-tools .t-sel:focus, #page-tools .t-in:focus{ outline:none; border-color:var(--accent); }
  #page-tools .t-ta{ font-family:var(--body); font-size:13px; color:var(--ink); background:var(--panel-2); border:1px solid var(--line);
    border-radius:var(--r-sm); padding:10px; width:100%; resize:vertical; line-height:1.5; transition:border-color .15s; }
  #page-tools .t-ta:focus{ outline:none; border-color:var(--accent); }
  #page-tools .t-fld{ display:flex; flex-direction:column; gap:5px; min-width:0; }
  #page-tools .t-fld>span{ font-family:var(--disp); font-weight:700; font-size:10.5px; letter-spacing:.07em; text-transform:uppercase; color:var(--dim); }
  #page-tools .t-chk{ display:inline-flex; align-items:center; gap:7px; font-size:13px; color:var(--ink-2); cursor:pointer; }
  #page-tools .t-color{ width:46px; height:30px; padding:0; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--panel-2); cursor:pointer; }
  #page-tools .t-link{ color:var(--accent-bright); font-weight:600; cursor:pointer; text-decoration:none; }
  #page-tools .t-link:hover{ text-decoration:underline; }
  #page-tools .t-btns{ display:flex; flex-wrap:wrap; gap:8px; }

  /* bespoke grids (own collapse below) */
  #page-tools .t-grid5{ grid-template-columns:repeat(5,1fr); }
  #page-tools .t-grid4{ grid-template-columns:repeat(4,1fr); }
  #page-tools .t-grid-cat{ grid-template-columns:80px 1fr 80px 1.5fr auto; }

  /* file dropzone */
  #page-tools .t-file{ display:block; cursor:pointer; }
  #page-tools .t-file input{ position:absolute; width:1px; height:1px; opacity:0; }
  #page-tools .t-file-face{ display:flex; align-items:center; gap:12px; border:1.5px dashed var(--line-bright); border-radius:var(--r);
    background:var(--panel-2); padding:14px 16px; transition:border-color .15s, background-color .15s; }
  #page-tools .t-file:hover .t-file-face{ border-color:var(--accent); background:color-mix(in oklab,var(--accent) 7%,var(--panel-2)); }
  #page-tools .t-file-ic{ font-size:24px; }
  #page-tools .t-file-txt{ font-size:13px; color:var(--ink-2); line-height:1.4; }
  #page-tools .t-file-txt small{ color:var(--dim); }

  /* status pills (Discord + system) */
  #page-tools .t-pills{ display:flex; flex-wrap:wrap; gap:7px; }
  #page-tools .t-statuspill{ display:inline-flex; align-items:center; gap:6px; font-family:var(--disp); font-weight:700; font-size:11px;
    letter-spacing:.04em; text-transform:uppercase; color:var(--mute); background:var(--panel-2); border:1px solid var(--line);
    border-radius:20px; padding:4px 10px; text-decoration:none; }
  #page-tools .t-statuspill.is-on{ color:var(--ink-2); border-color:color-mix(in oklab,var(--win) 40%,var(--line)); }
  #page-tools .t-pill-dot{ width:7px; height:7px; border-radius:50%; background:var(--mute); flex:0 0 auto; }
  #page-tools .t-pill-dot--on{ background:var(--win); box-shadow:0 0 0 3px color-mix(in oklab,var(--win) 22%,transparent); }

  /* role pills */
  #page-tools .t-role{ font-family:var(--disp); font-weight:800; font-size:10px; letter-spacing:.06em; text-transform:uppercase;
    padding:2px 7px; border-radius:6px; }
  #page-tools .t-role-comm{ color:var(--gold); background:color-mix(in oklab,var(--gold) 16%,transparent); }
  #page-tools .t-role-admin{ color:var(--accent-bright); background:color-mix(in oklab,var(--accent) 16%,transparent); }
  #page-tools .t-role-inspector{ color:var(--win); background:color-mix(in oklab,var(--win) 16%,transparent); }

  /* status + fine pills reused from app vocabulary */
  #page-tools .status{ font-family:var(--disp); font-weight:800; font-size:10.5px; letter-spacing:.05em; text-transform:uppercase; padding:3px 8px; border-radius:6px; display:inline-block; }
  #page-tools .status-active, #page-tools .status-approved{ color:var(--win); background:color-mix(in oklab,var(--win) 15%,transparent); }
  #page-tools .status-pending{ color:var(--live); background:color-mix(in oklab,var(--live) 16%,transparent); }
  #page-tools .status-denied{ color:var(--loss); background:color-mix(in oklab,var(--loss) 15%,transparent); }
  #page-tools .fine-pill{ font-family:var(--disp); font-weight:800; font-size:10.5px; letter-spacing:.04em; text-transform:uppercase; padding:3px 8px; border-radius:6px; }
  #page-tools .fine-pill-scheduling{ color:var(--accent-bright); background:color-mix(in oklab,var(--accent) 15%,transparent); }
  #page-tools .fine-pill-conduct{ color:var(--loss); background:color-mix(in oklab,var(--loss) 15%,transparent); }
  #page-tools .fine-pill-general{ color:var(--dim); background:var(--panel-2); }

  #page-tools .t-icon{ color:var(--live); font-size:13px; }
  #page-tools .wkpill{ font-family:var(--disp); font-weight:800; letter-spacing:.04em; font-size:11px; color:var(--dim); background:var(--panel-2); border:1px solid var(--line); border-radius:6px; padding:2px 7px; }

  /* danger card */
  #page-tools .t-danger{ border-color:color-mix(in oklab,var(--loss) 45%,var(--line)); background:color-mix(in oklab,var(--loss) 6%,var(--panel)); }
  #page-tools .t-conf-pair{ font-family:var(--disp); font-weight:800; letter-spacing:.04em; font-size:14px; color:var(--ink); margin:10px 0 8px; text-transform:uppercase; }
  #page-tools .t-conf-rows{ display:flex; flex-direction:column; gap:8px; }
  #page-tools .t-conf-row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
  #page-tools .t-conf-match{ font-size:13.5px; color:var(--ink-2); font-variant-numeric:tabular-nums; }
  #page-tools .t-conf-match b{ color:var(--ink); }

  /* week filter bar */
  #page-tools .t-weekbar{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-bottom:12px; }
  #page-tools .t-weekbar-lbl{ font-family:var(--disp); font-weight:800; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--dim); margin-right:4px; }
  #page-tools .t-wk{ font-family:var(--disp); font-weight:800; font-size:12px; letter-spacing:.03em; color:var(--dim); background:var(--panel-2);
    border:1px solid var(--line); border-radius:var(--r-sm); padding:5px 11px; cursor:pointer; transition:color .15s, border-color .15s, background-color .15s; }
  #page-tools .t-wk:hover{ color:var(--ink-2); border-color:var(--line-bright); }
  #page-tools .t-wk.is-active{ color:var(--ink); background:var(--accent); border-color:var(--accent); }

  /* games table tabular nums + matchup spacing */
  #page-tools .tbl td.v, #page-tools .tbl td.c.v, #page-tools .tbl td.r.v{ font-variant-numeric:tabular-nums; }
  #page-tools .t-games-table .team-cell{ gap:6px; }
  #page-tools .aw-at{ color:var(--mute); font-weight:700; }

  /* inline edit / move rows */
  #page-tools .t-inline{ background:var(--panel-2); border:1px solid var(--line); border-radius:var(--r); padding:14px; margin:2px 0; }

  /* details */
  #page-tools .t-det summary{ font-family:var(--disp); font-weight:700; font-size:12px; letter-spacing:.03em; text-transform:uppercase;
    color:var(--accent-bright); cursor:pointer; list-style:none; }
  #page-tools .t-det summary::-webkit-details-marker{ display:none; }
  #page-tools .t-det summary::before{ content:"▸ "; }
  #page-tools .t-det[open] summary::before{ content:"▾ "; }

  /* match row (bracket/conf) */
  #page-tools .t-match{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:8px; font-size:13.5px; color:var(--ink-2); }
  #page-tools .t-match b{ color:var(--ink); }

  /* complaint rows */
  #page-tools .t-complaint{ display:block; position:relative; padding:11px 12px; border-radius:var(--r); cursor:pointer; text-decoration:none; transition:background-color .15s; }
  #page-tools .t-complaint + .t-complaint{ border-top:1px solid var(--line); }
  #page-tools .t-complaint:hover{ background:var(--hover-row); }
  #page-tools .t-complaint--pending{ box-shadow:inset 3px 0 0 var(--live); }
  #page-tools .t-cmp-h{ font-family:var(--disp); font-weight:700; font-size:11px; letter-spacing:.04em; color:var(--dim); text-transform:uppercase; }
  #page-tools .t-cmp-t{ font-weight:600; font-size:14px; color:var(--ink); margin-top:2px; }
  #page-tools .t-cmp-m{ font-size:12.5px; color:var(--dim); margin-top:2px; }
  #page-tools .t-cmp-pill{ position:absolute; top:11px; right:12px; }

  #page-tools .t-detail{ max-width:480px; }

  /* ===== ADVANCE WEEK ===== */
  #page-tools .t-advance{ border-color:color-mix(in oklab,var(--gold) 32%,var(--line)); }
  #page-tools .aw-steps{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-bottom:18px; }
  #page-tools .aw-step{ display:flex; align-items:center; gap:8px; }
  #page-tools .aw-num{ width:26px; height:26px; border-radius:50%; display:grid; place-items:center; font-family:var(--disp);
    font-weight:800; font-size:13px; color:var(--dim); background:var(--panel-2); border:1px solid var(--line); flex:0 0 auto; }
  #page-tools .aw-lbl{ font-family:var(--disp); font-weight:700; font-size:11.5px; letter-spacing:.04em; text-transform:uppercase; color:var(--dim); }
  #page-tools .aw-step.is-active .aw-num{ color:#0A0E14; background:var(--gold); border-color:var(--gold); }
  #page-tools .aw-step.is-active .aw-lbl{ color:var(--ink); }
  #page-tools .aw-step.is-done .aw-num{ color:var(--win); background:color-mix(in oklab,var(--win) 18%,transparent); border-color:color-mix(in oklab,var(--win) 45%,transparent); }
  #page-tools .aw-step.is-done .aw-lbl{ color:var(--ink-2); }
  #page-tools .aw-conn{ flex:1; min-width:18px; height:2px; background:var(--line); }
  #page-tools .aw-weeks{ display:flex; align-items:stretch; gap:14px; flex-wrap:wrap; }
  #page-tools .aw-week{ flex:1; min-width:160px; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--panel-2); padding:16px 18px; }
  #page-tools .aw-week--next{ border-color:color-mix(in oklab,var(--gold) 45%,var(--line)); background:color-mix(in oklab,var(--gold) 8%,var(--panel-2)); }
  #page-tools .aw-week-k{ display:block; font-family:var(--disp); font-weight:700; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--dim); }
  #page-tools .aw-week-v{ display:block; font-family:var(--disp); font-weight:900; font-size:30px; line-height:1; color:var(--ink); margin-top:4px; }
  #page-tools .aw-week--next .aw-week-v{ color:var(--gold); }
  #page-tools .aw-arrow{ align-self:center; font-family:var(--disp); font-weight:900; font-size:28px; color:var(--gold); }

  #page-tools .aw-channel-tag{ display:inline-flex; align-items:center; gap:7px; font-size:12.5px; color:var(--ink-2); font-weight:600; margin-bottom:10px; }
  #page-tools .aw-channel-tag b{ color:var(--ink); }
  #page-tools .aw-preview{ border:1px solid var(--line-bright); border-radius:var(--r-lg); background:var(--panel-2); overflow:hidden; }
  #page-tools .aw-prev-h{ display:flex; align-items:center; gap:10px; padding:12px 14px; border-bottom:1px solid var(--line); }
  #page-tools .aw-prev-title{ font-family:var(--disp); font-weight:800; font-size:14px; color:var(--ink); }
  #page-tools .aw-prev-sub{ font-size:11.5px; color:var(--dim); }
  #page-tools .aw-prev-body{ padding:14px 16px; }
  #page-tools .aw-prev-headline{ font-family:var(--disp); font-weight:800; font-size:17px; letter-spacing:.02em; color:var(--ink); }
  #page-tools .aw-prev-text{ font-size:13.5px; color:var(--ink-2); margin:8px 0 12px; line-height:1.5; }
  #page-tools .aw-prev-text b{ color:var(--accent-bright); }
  #page-tools .aw-sched{ display:flex; flex-direction:column; gap:7px; }
  #page-tools .aw-sched-row{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--ink-2); padding:7px 10px; background:var(--panel); border-radius:var(--r-sm); }
  #page-tools .aw-sched-row b{ color:var(--ink); }

  /* advance preview ping line */
  #page-tools .aw-prev-ping{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:0 0 12px;
    padding:8px 10px; border-radius:var(--r-sm); background:color-mix(in oklab,var(--accent) 9%,var(--panel));
    border:1px solid color-mix(in oklab,var(--accent) 32%,var(--line)); }
  #page-tools .aw-ping-pill{ font-family:var(--disp); font-weight:800; font-size:13px; letter-spacing:.02em;
    color:var(--accent-bright); background:color-mix(in oklab,var(--accent) 16%,transparent);
    border:1px solid color-mix(in oklab,var(--accent) 40%,transparent); border-radius:6px; padding:3px 9px; }
  #page-tools .aw-ping-note{ font-size:12px; color:var(--dim); }
  #page-tools .aw-ping-note b{ color:var(--ink-2); }

  /* mention tags table */
  #page-tools .t-mentions th, #page-tools .t-mentions td{ vertical-align:middle; }
  #page-tools .t-mentions .t-sel{ width:100%; min-width:130px; }
  #page-tools .t-mentions .t-in{ width:100%; min-width:150px; }

  /* responsive */
  @media (max-width:920px){
    #page-tools .t-grid5, #page-tools .t-grid4{ grid-template-columns:1fr 1fr; }
    #page-tools .t-grid-cat{ grid-template-columns:1fr 1fr; }
  }
  @media (max-width:760px){
    #page-tools .t-supers{ overflow-x:auto; flex-wrap:nowrap; }
    #page-tools .t-super{ flex:0 0 auto; }
    #page-tools .t-grid5, #page-tools .t-grid4, #page-tools .t-grid-cat{ grid-template-columns:1fr; }
    #page-tools .aw-conn{ display:none; }
    #page-tools .aw-arrow{ transform:rotate(90deg); }
  }


/* ============================================================
   DJANGO INTEGRATION — shared primitives the prototype omits.
   Tokenized to the Friday Night Broadcast system above.
   (flash messages · busy/navigation feedback · form controls)
   ============================================================ */

/* ---- flash / Django messages ---- */
.flash-wrap{ display:flex; flex-direction:column; gap:8px; margin-bottom:16px; }
.flash{
  display:flex; align-items:center; gap:10px; padding:12px 15px; border-radius:var(--r);
  font-size:14px; font-weight:500; border:1px solid var(--line); background:var(--panel-2); color:var(--ink-2);
}
.flash::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--dim); flex:0 0 auto; }
.flash.success,.flash.info{ color:var(--win); border-color:color-mix(in oklab,var(--win) 40%,var(--line));
  background:color-mix(in oklab,var(--win) 12%,var(--panel-2)); }
.flash.success::before,.flash.info::before{ background:var(--win); box-shadow:0 0 8px var(--win); }
.flash.error,.flash.danger{ color:var(--loss); border-color:color-mix(in oklab,var(--loss) 40%,var(--line));
  background:color-mix(in oklab,var(--loss) 12%,var(--panel-2)); }
.flash.error::before,.flash.danger::before{ background:var(--loss); box-shadow:0 0 8px var(--loss); }
.flash.warning{ color:var(--live); border-color:color-mix(in oklab,var(--live) 40%,var(--line));
  background:color-mix(in oklab,var(--live) 12%,var(--panel-2)); }
.flash.warning::before{ background:var(--live); box-shadow:0 0 8px var(--live); }

/* ---- form controls ---- */
.field{
  width:100%; background:var(--panel-2); color:var(--ink);
  border:1px solid var(--line); border-radius:var(--r-sm);
  padding:11px 13px; font-family:var(--body); font-size:15px; line-height:1.35;
  -webkit-appearance:none; appearance:none;
  transition:border-color .18s var(--ease-out-quint), box-shadow .18s var(--ease-out-quint), background-color .18s;
}
textarea.field{ resize:vertical; min-height:64px; }
select.field{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' stroke='%238294B4' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; background-size:12px; padding-right:34px;
}
.field:hover{ border-color:var(--line-bright); }
/* s124: the Commish stylesheet's `.admin-tools .field{ background:… }` shorthand (0,2,0) resets the chevron above
   (0,1,1) — restore it at higher specificity (0,2,1) so every Commish select shows its arrow. */
.admin-tools select.field{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' stroke='%238294B4' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 11px center; background-size:12px; padding-right:32px;
}
.field:focus,.field:focus-visible{
  outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in oklab,var(--accent) 26%, transparent);
}
.field::placeholder{ color:var(--mute); }
.field:disabled{ opacity:.5; cursor:not-allowed; }
input[type="checkbox"],input[type="radio"]{ accent-color:var(--accent); width:16px; height:16px; cursor:pointer; }

/* labels + field layout */
.fld{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.fld > .lbl, label.lbl, .form-label{
  font-family:var(--disp); font-weight:700; font-size:12px; letter-spacing:.09em; text-transform:uppercase; color:var(--dim);
}
.fld-row{ display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end; }
.fld-grid{ display:grid; gap:13px; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); }
.fld-hint{ font-size:12px; color:var(--dim); }
.fld-error{ font-size:12.5px; color:var(--loss); font-weight:600; }
/* The Commish Advance card's selects (Week to announce, Announce to channel) are
   width:100% .field inside their label AND carry an inline margin-left:6px, so they
   drew 6px past the label: at 390px the channel select ran to the card's right edge
   (s121). Take the margin back out of the width. */
.adv-week-card label > select.field{ max-width:calc(100% - 6px); }

/* button extensions on top of .btn (.primary/.me/.ghost/.sm already exist) */
.btn.full,.btn.block{ width:100%; justify-content:center; }
.btn.lg{ height:46px; padding:0 22px; font-size:15px; }
.btn.gold{ background:var(--gold); border-color:var(--gold); color:#1a1406; }
.btn.danger{ background:var(--loss); border-color:var(--loss); color:#fff; }
.btn.danger.ghost{ background:transparent; color:var(--loss); border-color:color-mix(in oklab,var(--loss) 45%,var(--line)); }
.btn.danger.ghost:hover{ border-color:var(--loss); }
.btn.win{ background:var(--win); border-color:var(--win); color:#04240f; }
.btn:disabled,.btn[disabled]{ opacity:.45; cursor:not-allowed; transform:none; }
/* Global aliases for the hyphenated btn variants. These were defined ONLY inside
   the .admin-tools / .lp-audit-page / .sched-preview scopes, so any off-scope page
   (applications, lp-snapshot, os/social, my-applications) that used them fell back
   to bare .btn and rendered its "primary" buttons as flat neutrals. Scoped defs
   still win by specificity where they exist, so admin_tools is unchanged. */
.btn-primary{ background:var(--accent); border-color:var(--accent); color:var(--on-accent);
  box-shadow:0 10px 24px -12px color-mix(in oklab,var(--accent) 90%,#000); }
.btn-primary:hover:not(:disabled){ background:var(--accent-bright); border-color:var(--accent-bright); }
.btn-ghost{ background:transparent; }
.btn-sm,.sm-btn{ height:31px; padding:0 12px; font-size:12px; }

/* small icon button (row actions) */
.icon-btn{
  width:36px; height:36px; flex:0 0 auto; display:grid; place-items:center; border-radius:9px;
  background:var(--panel-2); border:1px solid var(--line); color:var(--ink-2); cursor:pointer;
  transition:border-color .18s, color .18s, background-color .18s;
}
.icon-btn:hover{ border-color:var(--line-bright); color:var(--ink); }
.icon-btn.danger:hover{ border-color:var(--loss); color:var(--loss); }

/* ---- busy / navigation feedback (drives static/js/click-feedback.js) ---- */
button.busy,input.busy{ pointer-events:none; opacity:.65; cursor:progress; position:relative; }
button.busy::after{
  content:""; display:inline-block; width:12px; height:12px; margin-left:8px; vertical-align:middle;
  border:2px solid currentColor; border-right-color:transparent; border-radius:50%;
  animation:btn-spin .6s linear infinite;
}
@keyframes btn-spin{ to{ transform:rotate(360deg); } }

/* top-of-page progress bar while a link/POST is in flight */
body.is-navigating::before{
  content:""; position:fixed; top:0; left:0; width:0; height:3px; z-index:99999;
  background:linear-gradient(90deg,var(--accent),var(--accent-bright));
  box-shadow:0 0 8px var(--accent);
  animation:nav-progress 1.2s ease-out forwards, nav-pulse 1.5s 1.2s ease-in-out infinite;
}
@keyframes nav-progress{ from{ width:0; } to{ width:90%; } }
@keyframes nav-pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.5; } }

/* full-screen loading screen — a solid dark veil + glowing spinner + label,
   shown the instant a tap navigates. No backdrop-filter (iOS Safari renders a
   fixed + backdrop-filter overlay blank when it's toggled on — that was why
   the spinner showed on desktop but not on mobile) and no color-mix in the
   spinner, so it paints on every browser. */
.busy-overlay{
  position:fixed; inset:0; z-index:99998; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:18px;
  background:rgba(8,11,16,.84);
  opacity:0; visibility:hidden; -webkit-tap-highlight-color:transparent;
}
body.is-navigating .busy-overlay{ visibility:visible; opacity:1; }
.busy-spinner{
  width:56px; height:56px; border:4px solid rgba(255,255,255,.26);
  border-top-color:var(--accent-bright); border-radius:50%;
  box-shadow:0 0 22px rgba(30,111,255,.5);
  animation:busy-spin .7s linear infinite; will-change:transform;
}
.busy-label{
  font-family:var(--disp); font-weight:800; font-size:13px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-2);
}
@keyframes busy-spin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){ .busy-spinner{ animation-duration:1.4s; } }

/* ---- generic empty state ---- */
.empty-state{
  text-align:center; padding:clamp(34px,7vw,72px) 20px; color:var(--dim);
}
.empty-state .es-icon{ font-size:34px; margin-bottom:10px; opacity:.7; }
.empty-state h3{ font-family:var(--disp); font-weight:800; font-size:20px; color:var(--ink-2);
  text-transform:uppercase; letter-spacing:.04em; margin:0 0 6px; }

/* keep the rendered page visible even without the JS router (no [hidden] applied) */
#app .page{ display:block; }


/* ---- header/drawer Django helpers ---- */
.desktop-only-inline{ display:inline-flex; }
@media(max-width:760px){ .desktop-only-inline{ display:none; } }

/* Side rails retired 2026-06-29 — markup removed from base.html; see side_banners.py if reviving. */

/* ============================================================
   CFB27 DP CHIP  (nil/_dp_chip.html — slice 2)
   ◆ Dynasty Points lead, compact dollars trail (dimmed).
   Full-precision dollars live in the title tooltip.
   ============================================================ */
.dp-chip{ display:inline-flex; align-items:baseline; gap:4px; white-space:nowrap; }
/* DP-only now: the ◆ points ARE the chip (the $ trail was removed 2026-07-18). */
.dp-chip .dp-points{ font-family:var(--mono,ui-monospace,"JetBrains Mono",monospace); font-weight:700; }
.dp-chip .dp-glyph{ color:var(--ds-points,var(--accent)); font-size:.9em; line-height:1; }

/* ============================================================
   RECRUITING-BUDGET RING  (nil/_recruiting_ring.html — Task 2, 2026-08-29)
   A single-fill FUEL GAUGE, not a segmented donut (constraint 1): one track,
   one spent arc. Shares dpw's arc math/proportions but never its category
   colours — spent is --gold, flips whole (arc + center text) to --loss when
   over budget, never green. Shared by My Hub + Program Profile.
   ============================================================ */
.rring{ display:flex; flex-direction:column; gap:12px; }
.rring-main{ display:flex; flex-wrap:wrap; align-items:center; gap:16px 22px; }
.rring-ring{ position:relative; flex:0 0 auto; width:180px; height:180px; }
.rring-sm .rring-ring{ width:130px; height:130px; }
.rring-svg{ width:100%; height:100%; display:block; }
.rring-track{ stroke:var(--panel-2); }
:root[data-theme="light"] .rring-track{ stroke:var(--line); }
.rring-seg{ stroke:var(--gold); transition:stroke-dasharray .5s var(--ease-out-quint,ease); }
.rring-seg.is-over{ stroke:var(--loss); }

.rring-center{ position:absolute; inset:0; padding:0 13%; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:2px; text-align:center; pointer-events:none; }
.rring-n{ font-family:var(--disp); font-weight:900; font-size:26px; line-height:1;
  color:var(--gold); font-variant-numeric:tabular-nums; letter-spacing:-.01em; max-width:100%; }
.rring-sm .rring-n{ font-size:20px; }
.rring-n.is-over{ color:var(--loss); }
.rring-l{ font-family:var(--disp); font-weight:700; font-size:9px; letter-spacing:.11em;
  text-transform:uppercase; color:var(--dim); margin-top:1px; }
.rring-l.is-over{ color:var(--loss); }

.rring-side{ flex:1 1 220px; min-width:0; display:flex; flex-direction:column; gap:10px; }
.rring-chip{ display:flex; align-items:baseline; justify-content:space-between; gap:8px;
  padding:7px 11px; border:1px solid var(--line); border-radius:10px; background:var(--panel-2); }
.rring-chip-l{ font-family:var(--disp); font-weight:700; font-size:10.5px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--dim); }
.rring-chip-v{ font-family:var(--disp); font-weight:900; font-size:15px; color:var(--ink);
  font-variant-numeric:tabular-nums; }

.rring-philo{ display:flex; flex-direction:column; gap:8px; }
.rring-philo-h{ display:flex; align-items:baseline; gap:10px; }
.rring-philo-l{ font-family:var(--disp); font-weight:700; font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--dim); }
.rring-ta{ display:flex; align-items:baseline; gap:8px; }
.rring-ta-l{ font-size:11.5px; color:var(--dim); }
.rring-ta-v{ font-family:var(--disp); font-weight:900; font-size:15px; color:var(--ink);
  font-variant-numeric:tabular-nums; }

.rring-lane-h{ display:flex; justify-content:space-between; gap:10px; font-size:.82rem; margin-bottom:4px; }
.rring-lane-n{ font-variant-numeric:tabular-nums; }
.rring-bar{ display:flex; height:9px; border-radius:999px; overflow:hidden; background:var(--panel-2); }
.rring-bar-f{ display:block; height:100%; background:var(--gold); }
.rring-bar-f.rring-bar-over{ background:var(--loss); }
.rring-lane-sub{ margin-top:3px; font-size:11px; color:var(--mute); }
/* why lane targets round up to 5 DP (s130) — spans the full row of a 2-col lanes grid */
.rring-lane-note{ grid-column:1 / -1; margin:2px 0 0; font-size:11px; line-height:1.45; color:var(--mute); }
.rring-note{ margin:0; font-size:12px; line-height:1.5; color:var(--dim); }

.rring-empty{ padding:12px; border:1px dashed rgba(255,255,255,.25); border-radius:10px; }
.rring-empty b{ font-size:14px; }
.rring-empty .rring-note{ margin-top:6px; }

/* mobile: ring ABOVE full-width lanes (mirrors .dpw's stacking) */
@media (max-width:560px){
  .rring-main{ flex-direction:column; align-items:stretch; gap:14px; }
  .rring-ring{ align-self:center; }
  .rring-side{ width:100%; }
}
@media (prefers-reduced-motion:reduce){ .rring-seg{ transition:none; } }

/* ===== selection show ===== */
.sel-cols{ grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:760px){ .sel-cols{ grid-template-columns:1fr; } }
.sel-list{ list-style:none; margin:0; padding:8px; min-height:120px; display:flex; flex-direction:column; gap:6px; }
.sel-item{ display:flex; align-items:center; gap:8px; padding:9px 12px; border:1px solid var(--line);
  border-radius:var(--r-sm); background:var(--panel-2); cursor:pointer; transition:transform .18s var(--ease-out-expo), box-shadow .18s; }
.sel-item:hover{ box-shadow:var(--shadow-card); }
/* Dragging row: floats above its siblings. No CSS transform here — the drag JS
   owns the inline translateY; transition is killed so the follow is 1:1 (no lag). */
.sel-item.dragging{ opacity:.97; z-index:20; position:relative; cursor:grabbing;
  box-shadow:0 10px 26px rgba(0,0,0,.34); transition:none; }
/* ≡ drag handle — the ONLY element with touch-action:none, so the page still
   scrolls when a finger lands anywhere else on the row. */
.sel-grip{ flex:0 0 auto; align-self:stretch; display:inline-flex; align-items:center; justify-content:center;
  width:24px; margin:-9px 0 -9px -6px; padding:0 5px; color:var(--dim); cursor:grab; touch-action:none;
  font-size:17px; line-height:1; letter-spacing:-1px; border-radius:var(--r-sm) 0 0 var(--r-sm);
  user-select:none; -webkit-user-select:none; -webkit-tap-highlight-color:transparent; }
.sel-grip:hover{ color:var(--ink-2); background:var(--panel); }
.sel-item.dragging .sel-grip{ cursor:grabbing; color:var(--ink-2); }
.sel-item .sel-name{ font-weight:600; }
.sel-rank{ min-width:22px; height:22px; display:inline-grid; place-items:center; border-radius:999px;
  background:var(--me); color:#fff; font-weight:700; font-size:12px; }
.sel-conf{ color:var(--dim); font-size:12px; }
/* Available Budget — the marquee figure on each tile (◆ DP). Pushed to the
   right edge, bold and accent-coloured so it reads louder than the conf tag. */
.sel-dp{ margin-left:auto; display:inline-flex; align-items:baseline; gap:4px; white-space:nowrap;
  font-family:var(--mono,ui-monospace,"JetBrains Mono",monospace); font-weight:800; font-size:14px;
  color:var(--accent); letter-spacing:.2px; }
.sel-dp .dp-glyph{ color:var(--ds-points,var(--accent)); font-size:.9em; line-height:1; }
/* Estimated budgets (program not shown in the reveal) read provisional: dimmer
   figure + a small "est" tag, so guests know it's unverified until release. */
.sel-dp.is-est{ color:var(--dim); }
.sel-dp .dp-est{ margin-left:4px; padding:0 4px; border:1px solid var(--line); border-radius:4px;
  font-family:var(--sans,inherit); font-weight:700; font-size:9px; text-transform:uppercase;
  letter-spacing:.4px; color:var(--dim); vertical-align:top; }
.sel-count{ background:var(--me); color:#fff; border-radius:999px; padding:1px 9px; font-weight:700; }
.sel-rule{ margin:10px 0 14px; }
@media (prefers-reduced-motion:reduce){ .sel-item{ transition:none; } }
.sel-reveal-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.sel-pick{ display:flex; align-items:center; gap:12px; padding:14px 16px; border:1px solid var(--line);
  border-radius:var(--r); background:var(--panel-2); opacity:0; transform:translateY(14px);
  transition:opacity .5s var(--ease-out-quint), transform .58s var(--ease-out-expo); }
.sel-pick.in{ opacity:1; transform:none; }
.sel-pick-no{ font:700 22px/1 var(--disp); color:var(--me); min-width:46px; }
.sel-pick-owner{ color:var(--ink-2); font-size:15px; }
.sel-pick-team{ font:700 18px/1 var(--disp); margin-left:auto; }
.sel-pick-tag{ background:var(--accent); color:#fff; border-radius:999px; padding:2px 9px; font-size:11px; font-weight:700; }
.sel-pick-tag.gold{ background:var(--gold); color:#000; }

/* ===== Greenlit board — branded broadcast confirmation graphic =====
   Global (self-contained under .gl-card) so the same _greenlit_card.html partial
   renders identically on the board page AND pegged into the My Hub panel. */
.gl-card{ position:relative; overflow:hidden; margin:22px 0 0;
  border-radius:var(--r-lg); border:1px solid color-mix(in oklab,var(--win) 42%,var(--line));
  background:linear-gradient(180deg, color-mix(in oklab,var(--win) 10%,var(--panel)) 0%, var(--panel) 42%);
  box-shadow:var(--shadow-card), 0 0 42px -20px color-mix(in oklab,var(--win) 85%,transparent); }
.gl-card .gl-card-glow{ position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 62% at 88% -12%, color-mix(in oklab,var(--win) 22%,transparent), transparent 60%); }
.gl-card .gl-card-top{ position:relative; display:flex; align-items:center; justify-content:space-between;
  gap:14px; padding:16px 18px; border-bottom:1px solid color-mix(in oklab,var(--win) 22%,var(--line)); }
.gl-card .gl-brand{ display:flex; align-items:center; gap:11px; min-width:0; }
.gl-card .gl-brand-mark{ width:30px; height:30px; color:var(--ink); flex:0 0 auto; }
.gl-card .gl-brand-mark img{ width:100%; height:100%; display:block; }
.gl-card .gl-brand-txt{ display:flex; flex-direction:column; min-width:0; }
.gl-card .gl-brand-txt b{ font-family:'Saira Condensed',sans-serif; font-weight:800; font-size:1.05rem;
  letter-spacing:.04em; text-transform:uppercase; color:var(--ink); line-height:1; }
.gl-card .gl-brand-txt span{ font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent-bright); font-weight:700; margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gl-card .gl-seal{ flex:0 0 auto; display:inline-flex; align-items:center; gap:7px; padding:7px 14px;
  border-radius:999px; font-family:'Saira Condensed',sans-serif; font-weight:800; font-size:.92rem;
  letter-spacing:.12em; text-transform:uppercase; color:#062012;
  background:linear-gradient(180deg, color-mix(in oklab,var(--win) 92%,#fff), var(--win));
  box-shadow:0 0 16px -2px color-mix(in oklab,var(--win) 85%,transparent); }
.gl-card .gl-seal-tick{ display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px;
  border-radius:50%; background:#062012; color:var(--win); font-size:.7rem; }
.gl-card .gl-id{ position:relative; display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:12px 18px 4px; }
.gl-card .gl-pick{ font-family:'Saira Condensed',sans-serif; font-weight:800; font-size:.8rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--gold); padding:3px 10px; border-radius:999px;
  border:1px solid color-mix(in oklab,var(--gold) 45%,var(--line)); }
.gl-card .gl-psn{ font-family:'Saira Condensed',sans-serif; font-weight:800; font-size:1rem; letter-spacing:.03em; color:var(--ink); }
.gl-card .gl-board{ position:relative; list-style:none; margin:8px 0 0; padding:8px 10px 10px;
  display:flex; flex-direction:column; gap:5px; }
.gl-card .gl-row{ display:flex; align-items:center; gap:11px; padding:8px 12px; border-radius:var(--r);
  background:color-mix(in oklab,var(--tc,var(--accent)) 8%,var(--panel-2));
  border-left:3px solid var(--tc,var(--accent)); }
.gl-card .gl-rk{ flex:0 0 auto; width:22px; text-align:center; font-family:'Saira Condensed',sans-serif;
  font-weight:800; font-size:1rem; color:var(--dim); font-variant-numeric:tabular-nums; }
.gl-card .gl-team{ flex:1; min-width:0; font-weight:600; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gl-card .gl-conf{ flex:0 0 auto; font-size:.74rem; letter-spacing:.06em; text-transform:uppercase; color:var(--dim); }
.gl-card .gl-foot{ position:relative; display:flex; align-items:center; gap:9px; padding:12px 18px 15px;
  color:var(--ink-2); font-size:.86rem; }
.gl-card .gl-beacon{ flex:0 0 auto; width:11px; height:11px; border-radius:50%;
  background:var(--win); box-shadow:0 0 12px var(--win); }


/* ============================================================
   MARKETING SURFACE PALETTE (--mk-*) — ONE source of truth
   ------------------------------------------------------------
   The public "broadcast" pages (/pricing, marketing root,
   get-started, refund policy, privacy, terms) paint themselves from a private
   --mk-* palette instead of the global tokens. That palette used
   to be copy-pasted, HARDCODED DARK, into each template's <style>
   block — so in LIGHT mode those pages kept near-white ink
   (--mk-ink:#F2F5F7) while the shell background flipped to light:
   every hero headline, sub-line and section title rendered
   white-on-white. Only the (still dark) cards stayed legible.

   Fixed 2026-07-13 by hoisting the palette here and giving it a
   light variant. DARK VALUES ARE THE ORIGINAL LITERALS, byte for
   byte — dark mode must not shift.
   ============================================================ */
#page-pricing, #page-marketing, #page-getstarted, #page-refund,
#page-privacy, #page-terms{
  --mk-bg:#0A0E12; --mk-panel:#11161C; --mk-ink:#F2F5F7;
  --mk-gold:#E8B23A; --mk-red:#E4482B;
  --mk-line:rgba(242,245,247,.08); --mk-line-strong:rgba(242,245,247,.18);
  --mk-mute:rgba(242,245,247,.62);
  --mk-scrim:rgba(3,5,8,.5);          /* hero vignette */
}
/* marketing root ran a slightly softer mute — preserved exactly */
#page-marketing{ --mk-mute:rgba(242,245,247,.68); }

:root[data-theme="light"] #page-pricing,
:root[data-theme="light"] #page-marketing,
:root[data-theme="light"] #page-getstarted,
:root[data-theme="light"] #page-refund,
:root[data-theme="light"] #page-privacy,
:root[data-theme="light"] #page-terms{
  --mk-bg:#E7ECF4; --mk-panel:#FFFFFF; --mk-ink:#0B1424;
  /* deepened amber: readable AS TEXT on white (4.5:1) and still dark enough
     under the #151006 ink used on gold buttons/flags (4.2:1) */
  --mk-gold:#9A6F0F; --mk-red:#C0341A;
  --mk-line:rgba(11,20,36,.14); --mk-line-strong:rgba(11,20,36,.26);
  --mk-mute:rgba(11,20,36,.66);
  --mk-scrim:rgba(90,110,145,.16);
}

/* ============================================================
   BOX SCORE — UPLOAD + CONFIRM (score-bug port 2b, spec §3.5)
   The hub's screenshot form and the read->confirm grid. The box-score PAGE's
   own look lands in Task 5. No hatch anywhere (R7).
   NOTE: this file has no --hair or --warn token (checked all four theme roots),
   so the hairlines use --line and the warning text uses --gold, which IS
   defined in dark, light, cyan and cyan-light.
   ============================================================ */
/* The hub drawer's second path. It is a SIBLING form of #logScoreForm inside the
   flex column .dw-panel, so it must NOT take .dw-form's flex:1 (that stretched it
   over the empty rest of the drawer) and it carries the drawer body's own
   14px/16px padding itself, since it sits outside .dw-b. */
.bxu-hub{ flex:0 0 auto; padding:14px 16px 18px;
  border-top:1px solid var(--line); background:var(--panel-2); }
.ls-ruling{ margin:0 0 12px; padding:9px 12px; border-radius:var(--r); border:1px solid var(--accent);
  background:color-mix(in oklab,var(--accent) 12%,var(--panel-2)); color:var(--ink); font-size:13px; font-weight:700; line-height:1.4; }
.bxu-hub-h{ margin:0 0 4px; font:800 12px/1 var(--disp); letter-spacing:.14em;
  text-transform:uppercase; color:var(--dim); }
.bxu-hub-d{ margin:0 0 10px; font-size:12.5px; line-height:1.45; color:var(--dim); }
.bxu-hub-d b{ color:var(--ink-2); }
.bxu-drop{ display:grid; place-items:center; gap:4px; min-height:92px; padding:10px;
  border:1px dashed var(--line-bright); border-radius:var(--r); background:var(--panel-2);
  color:var(--dim); font-size:12px; text-align:center; cursor:pointer; }
.bxu-drop b{ color:var(--ink-2); font-size:13px; }
.bxu-drop .ic{ font-size:22px; line-height:1; }
.bxu-drop input[type="file"]{ width:100%; margin-top:6px; font-size:11px; color:var(--dim); }
.bxu-hub .btn{ margin-top:10px; }
.bxu-hub .btn[disabled]{ opacity:.45; cursor:not-allowed; }
/* Shown by the drawer's sync() only while no opponent is picked. */
.bxu-hub-n{ display:none; margin:6px 0 0; font-size:11.5px; color:var(--mute); }
.bxu-hub-n.show{ display:block; }

/* --- the two logging options, 2026-09-21 -----------------------------------
   Rob: "need it more prominent to be option 1 to take a picture of box score and
   then give option to only log manual final score." The photo form is now the
   FIRST child of .dw-panel and the typed form follows it, so the weight has to
   move with the order: option 1 gets the accent rule, the step chip and the
   primary button; option 2 gets the same chip in a muted ink and a ghost submit.
   Both option chips are one class so the pair can never drift apart. */
.bxu-hub.is-primary{ border-bottom:1px solid var(--line);
  background:linear-gradient(180deg, color-mix(in srgb, var(--accent) 7%, transparent), transparent); }
/* --- ONE photo button (2026-10-04) -----------------------------------------
   Rob: "the upload and scan buttons do same thing … maybe just one unified button
   because they both pop up the iOS 3 selection menu." The 2026-09-22 Upload + Scan
   pair (and its two-column .bxu-2up grid, used nowhere else) is gone: one
   full-width label over the single file input, and the phone offers library or
   camera itself. As a flex label it is block-level, so it spans the form. */
.bxu-way{ display:flex; flex-direction:column; align-items:center; gap:2px;
  margin-top:4px;
  padding:14px 10px; border:1px dashed var(--line-bright); border-radius:var(--r);
  background:var(--panel); color:var(--ink-2); font:inherit; text-align:center;
  cursor:pointer; }
.bxu-way:hover{ border-color:var(--accent); background:var(--panel-2); }
.bxu-way .ic{ font-size:20px; line-height:1; }
.bxu-way b{ font:800 13px/1.2 var(--disp); letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink); }
/* NOT `span:last-child` (and NOT `.bxu-sub`, which this file already uses):
   inside the photo LABEL the last child is the hidden <input>, so :last-child
   silently misses the hint there (it once matched only the retired Scan button,
   and the two tiles rendered with different type). Only a render showed it. */
.bxu-way-sub{ font-size:11px; color:var(--mute); }

/* The annotated real screen, shown on BOTH upload surfaces (2026-09-22). Width
   is 100% with an intrinsic ratio on the tag, so it never reflows on load. */
.bxu-eg{ margin:12px 0 2px; }
.bxu-eg img{ display:block; width:100%; height:auto; border-radius:var(--r);
  border:1px solid var(--line-bright); }
.bxu-eg figcaption{ margin-top:6px; font-size:11.5px; line-height:1.4;
  color:var(--mute); }
.bxu-eg figcaption b{ color:var(--ink-2); }
.bxu-way input[type="file"]{ display:none; }

/* The manual-entry drawer: a closed door, not a second option. */
.ls-manual-toggle{ display:flex; align-items:center; justify-content:space-between;
  width:100%; padding:11px 12px; border:1px solid var(--line);
  border-radius:var(--r); background:var(--panel); color:var(--ink-2);
  font:800 13px/1 var(--disp); letter-spacing:.06em; text-transform:uppercase;
  cursor:pointer; }
.ls-manual-toggle:hover{ border-color:var(--line-bright); }
.ls-manual-toggle::before{ content:"+"; margin-right:8px; color:var(--dim); }
.ls-manual-toggle[aria-expanded="true"]::before{ content:"\2212"; }
.ls-manual-hint{ font:500 11px/1 var(--body); text-transform:none;
  letter-spacing:0; color:var(--mute); }
/* Collapsed, the typed form must not stretch OR show its own footer buttons. */
.dw-form.is-collapsed{ flex:0 0 auto; }
.dw-form.is-collapsed .dw-f{ display:none; }

/* NOT `.bxu-step` — that name is already taken by boxscore_confirm.html's
   "Step 2 of 2" label (defined further down this file), and giving it a second
   meaning would have squashed that shipped label into an 18px circle. This is
   the `.mono` collision the project doctrine flags; caught by grepping the name
   before shipping it. */
.bxu-optn{ display:inline-grid; place-items:center; width:18px; height:18px;
  margin-right:7px; border-radius:50%; background:var(--accent); color:#fff;
  font:800 11px/1 var(--disp); vertical-align:1px; }
.bxu-alt .bxu-optn{ background:var(--line-bright); color:var(--ink-2); }
/* The reassurance line under option 1's button: what the screenshot BUYS them,
   which is the sentence the old "Or snap…" heading was carrying alone. */
.bxu-hub-f{ margin:8px 0 0; font-size:11.5px; line-height:1.45; color:var(--mute); }
.bxu-hub-f b{ color:var(--ink-2); }
/* Option 2's heading sits inside .dw-b, which already pads — so it only needs
   its own rhythm, not .bxu-hub's padding. */
.bxu-alt{ margin:2px 0 4px; }
.bxu-alt-d{ margin:0 0 12px; }

.bxu-wrap{ max-width:720px; margin:0 auto; padding:22px var(--pad) 40px; }
.bxu-step{ font:800 10px/1 var(--disp); letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent-bright); }
.bxu-title{ margin:6px 0 4px; font:800 26px/1.1 var(--disp); text-transform:uppercase;
  letter-spacing:.02em; }
.bxu-sub{ margin:0 0 16px; color:var(--dim); font-size:13.5px; }
.bxu-sub b{ color:var(--ink-2); }
.bxu-notes{ margin-bottom:14px; }
.bxu-warn{ display:block; margin-top:4px; font-size:11.5px; line-height:1.35;
  color:var(--gold); }
.bxu-conflict{ padding:14px 16px; margin-bottom:14px; border:1px solid var(--line-bright);
  border-radius:var(--r-lg); background:var(--panel-2); }
.bxu-conflict h2{ margin:0 0 6px; font:800 14px/1 var(--disp); text-transform:uppercase;
  letter-spacing:.06em; }
.bxu-conflict p{ margin:0; font-size:13px; color:var(--dim); }
.bxu-pick{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:14px; }
.bxu-pick-o{ display:inline-flex; align-items:center; gap:8px; padding:9px 13px;
  border:1px solid var(--line); border-radius:999px; background:var(--panel);
  font-size:12.5px; cursor:pointer; }
.bxu-pick-o:has(input:checked){ border-color:var(--accent);
  box-shadow:0 0 0 1px color-mix(in oklab,var(--accent) 40%,transparent); }

/* table-layout:fixed pins the three column widths, so a cell's warning WRAPS
   inside its own column instead of widening that column and sprawling across
   the table (caught in the 1440 `warned` render). */
.bxu-grid{ width:100%; table-layout:fixed; border-collapse:collapse;
  background:var(--panel); border:1px solid var(--line);
  border-radius:var(--r-lg); overflow:hidden; }
.bxu-grid th[scope="col"]{ padding:9px 10px; background:var(--panel-2);
  font:800 10px/1 var(--disp); letter-spacing:.12em; text-transform:uppercase;
  color:var(--mute); text-align:center; width:30%; }
.bxu-grid th[scope="col"]:first-child{ text-align:left; width:40%; }
.bxu-venue{ display:block; margin-top:3px; font-size:8.5px; letter-spacing:.14em;
  color:var(--mute); }
.bxu-grid th[scope="row"]{ padding:6px 10px; border-top:1px solid var(--line);
  font:600 12px/1.3 var(--body); color:var(--dim); text-align:left; white-space:nowrap; }
.bxu-grid td{ padding:6px 8px; border-top:1px solid var(--line); text-align:center; }
.bxu-grid tr.bxu-score th[scope="row"], .bxu-grid tr.bxu-score td{
  background:rgba(30,111,255,.08); }
/* #page-boxscore-confirm is neither #page-myhub nor .dw, so the app-wide `.inp`
   field tokens (the `#page-myhub .inp, .dw .inp` block above) DO NOT reach this
   page: `class="inp"` on these cells was inert and all 38 of them rendered as
   white browser-default number inputs on a dark page — the .mono collision
   footgun in reverse (review fix, 2026-09-20). Same tokens, scoped here, tighter
   padding because this is a 19-row grid rather than a stacked form. */
.bxu-cell{ width:100%; max-width:110px; text-align:center;
  font-variant-numeric:tabular-nums;
  background:var(--panel-2); border:1px solid var(--line);
  border-radius:var(--r-sm); color:var(--ink);
  font-family:var(--body); font-size:14px; padding:7px 8px;
  transition:border-color .15s, box-shadow .15s; }
.bxu-cell:focus{ outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in oklab,var(--accent) 25%,transparent); }
.bxu-grid tr.bxu-score .bxu-cell{ font-weight:700; }
.bxu-grid td .bxu-warn{ max-width:100%; margin-inline:auto; text-align:center;
  overflow-wrap:anywhere; }
.bxu-foot{ margin:12px 0 0; font-size:11.5px; line-height:1.5; color:var(--mute); }
/* The optional caption (Game.recap). NOT the hub drawer's `.field-l`/`.field-hint`
   classes — those are scoped to `#page-myhub, .dw` (see the form-controls block
   above) and would land here unstyled. The control itself reuses the global
   `textarea.field`; only the label and the counter need page-local rules. */
.bxu-cap{ display:flex; flex-direction:column; gap:5px; margin-top:16px; }
.bxu-cap-l{ font:700 11px/1 var(--disp); letter-spacing:.08em; text-transform:uppercase;
  color:var(--dim); }
/* 68px, not the global textarea.field 64px: the placeholder wraps to two lines
   at 390px and a 64px box clips the descenders on the second one. */
.bxu-cap-t{ min-height:68px; font-size:14px; }
.bxu-cap-n{ font-size:11.5px; color:var(--mute); }
.bxu-btns{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:16px; }
@media (max-width:640px){
  .bxu-wrap{ padding-left:16px; padding-right:16px; }
  .bxu-grid th[scope="row"]{ white-space:normal; }
  .bxu-grid th[scope="row"], .bxu-grid td{ padding:6px; }
  .bxu-cell{ max-width:none; }
}

/* ============================================================
   BOX SCORE — PAGE (templates/nil/boxscore.html, spec §3.5)
   The EA Box Score screen and nothing more: hero + line score, five headline
   tiles (the card five), then the eleven other EA rows in EA order with EA's
   own labels. The template does NO maths — every value comes from
   nil/boxscore_stats.py, the same derivation the card bars and the Discord
   tiles read. TWO SOLID INKS, NEVER A HATCH (R7).
   ============================================================ */
#page-game-boxscore{ max-width:760px; margin:0 auto; padding:22px var(--pad) 40px; }
.bx-body{ --gc-away:var(--gc-away-dark); --gc-home:var(--gc-home-dark); }
:root[data-theme="light"] .bx-body{ --gc-away:var(--gc-away-light); --gc-home:var(--gc-home-light); }
.bx-top{ display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-bottom:14px; flex-wrap:wrap; }
.bx-back,.bx-shot{ display:inline-flex; align-items:center; gap:6px; height:32px;
  padding:0 12px; border:1px solid var(--line); border-radius:999px;
  background:var(--panel); font:800 11px/1 var(--disp); letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-2); text-decoration:none; }
.bx-recap{ flex-basis:100%; margin:2px 0 0; font:700 20px/1.2 var(--disp);
  color:var(--ink); letter-spacing:.01em; }
.bx-hero{ display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:stretch; border:1px solid var(--line); border-radius:var(--r-lg);
  overflow:hidden; background:var(--panel); }
.bx-side{ display:flex; align-items:center; gap:14px; min-width:0; padding:20px 18px;
  background:color-mix(in srgb,var(--tc-ink) 22%,var(--panel));
  box-shadow:inset 0 3px 0 var(--tc-ink); }
.bx-side-h{ flex-direction:row-reverse; text-align:right; }
.bx-crest{ --logo-sz:64px; }
.bx-side-id{ min-width:0; display:flex; flex-direction:column; gap:2px; }
.bx-venue{ font:700 9.5px/1 var(--disp); letter-spacing:.14em; text-transform:uppercase;
  color:var(--dim); }
.bx-tri{ font:800 30px/1 var(--disp); letter-spacing:.02em; color:var(--tc-ink); }
.bx-full{ font-size:13px; color:var(--ink-2); white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis; }
.bx-coach{ margin-top:4px; }
/* Home reads name-then-handle same as away (never "@ctrob Rob") — only the
   AVATAR moves to the outer edge via `order`, so the chip's own text order
   never reverses; `justify-content:flex-end` packs the group against the
   same edge the team name/venue labels above it already right-align to
   (review fix round 1, item 1 — a bare flex-direction:row-reverse on the
   whole chip was flipping all three children, printing "@ctrob Rob [av]"). */
.bx-side-h .bx-coach{ justify-content:flex-end; }
.bx-side-h .bx-coach .av{ order:1; }
.bx-coach .av{ --av:28px; }
.bx-mid{ display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:8px; padding:14px 22px; background:var(--panel-2);
  border-left:1px solid var(--line); border-right:1px solid var(--line); }
.bx-score{ display:flex; align-items:baseline; gap:10px; font:800 52px/1 var(--disp);
  color:var(--ink); font-variant-numeric:tabular-nums; }
.bx-score .l{ color:var(--dim); }
.bx-score .dash{ font-size:22px; color:var(--mute); }
.bx-status{ font:700 10.5px/1 var(--disp); letter-spacing:.14em; text-transform:uppercase;
  color:var(--dim); }
.bx-status .tie{ color:var(--live); }
.bx-line{ border-collapse:collapse; font:700 12.5px/1 var(--disp);
  font-variant-numeric:tabular-nums; margin-top:2px; }
.bx-line th{ font-weight:700; font-size:9.5px; letter-spacing:.12em; color:var(--mute);
  padding:0 7px 4px; text-align:center; }
.bx-line th.f{ color:var(--dim); }
.bx-line td{ padding:3px 7px; text-align:center; color:var(--ink-2); }
.bx-line td.t{ text-align:left; color:var(--tc-ink); letter-spacing:.04em;
  padding-left:0; font-weight:800; }
.bx-line td.f{ color:var(--ink); font-weight:800; background:rgba(255,255,255,.06);
  border-radius:4px; }
.bx-line tr.lo td.f{ color:var(--dim); }
.bx-keys{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px;
  margin:14px 0; }
.bx-key{ padding:12px 8px; text-align:center; background:var(--panel);
  border:1px solid var(--line); border-radius:var(--r); }
.bx-key-k{ font:800 10px/1 var(--disp); letter-spacing:.14em; text-transform:uppercase;
  color:var(--dim); }
.bx-key-v{ display:flex; justify-content:center; align-items:center; gap:8px;
  margin-top:8px; font:700 17px/1 var(--disp); font-variant-numeric:tabular-nums; }
.bx-key-v .a{ color:var(--gc-away); white-space:nowrap; }
.bx-key-v .h{ color:var(--gc-home); white-space:nowrap; }
.bx-key-v .sep{ width:1px; height:16px; background:var(--line-bright); }
.bx-key-v .lo{ opacity:.55; font-weight:600; }
.bx-cmp{ background:var(--panel); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:6px 18px 14px; }
.bx-grp{ padding:18px 0 6px; font:800 11px/1 var(--disp); letter-spacing:.18em;
  text-transform:uppercase; color:var(--dim); border-bottom:1px solid var(--line);
  display:flex; justify-content:space-between; gap:10px; }
.bx-grp small{ font:600 10px/1.3 var(--body); letter-spacing:0; text-transform:none;
  color:var(--mute); }
.bx-row{ display:grid; grid-template-columns:1fr auto 1fr; align-items:end;
  column-gap:12px; padding:12px 0 0; font-variant-numeric:tabular-nums; }
.bx-row + .bx-row{ border-top:1px solid var(--line); }
.bx-v{ font:700 14px/1.2 var(--disp); color:var(--dim); }
.bx-v.a{ text-align:left; }
.bx-v.h{ text-align:right; }
.bx-v.a.is-best{ color:var(--gc-away); }
.bx-v.h.is-best{ color:var(--gc-home); }
.bx-lbl{ text-align:center; font:800 10px/1.2 var(--disp); letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-2); }
.bx-hint{ display:block; margin-top:3px; font:600 9px/1.2 var(--body);
  letter-spacing:.04em; text-transform:none; color:var(--mute); }
.bx-bar{ grid-column:1/-1; height:6px; border-radius:999px; background:var(--gc-home);
  overflow:hidden; margin-top:7px; }
.bx-bar > i{ display:block; height:100%; width:var(--aw,50%); background:var(--gc-away);
  box-shadow:2px 0 0 var(--panel); }
.bx-bar.is-none{ background:var(--line); }
.bx-bar.is-none > i{ width:0; }
.bx-pal{ display:flex; justify-content:center; gap:18px; margin:12px 0 0;
  font:700 10.5px/1 var(--disp); letter-spacing:.1em; text-transform:uppercase;
  color:var(--dim); }
.bx-pal i{ display:inline-block; width:16px; height:7px; border-radius:999px;
  vertical-align:middle; margin-right:6px; background-color:var(--sw); }
.bx-note{ margin:14px 0 0; font-size:12px; color:var(--mute); text-align:center; }
.bx-del{ margin:12px 0 0; display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  justify-content:center; }
.bx-del-h{ font-size:11px; color:var(--mute); }
.bx-empty{ margin-top:22px; padding:34px 22px; text-align:center;
  border:1px dashed var(--line-bright); border-radius:var(--r-lg); background:var(--panel); }
.bx-empty-ic{ font-size:30px; line-height:1; }
.bx-empty-h{ font:800 22px/1.1 var(--disp); text-transform:uppercase; margin:10px 0 6px; }
.bx-empty-d{ color:var(--dim); font-size:13.5px; max-width:46ch; margin:0 auto 16px; }
.bx-empty-d b{ color:var(--ink-2); }
/* s148 LEGACY BREAKDOWN — the game page block (the recap after the game, the preview before) */
.bd-block{ margin-top:16px; padding:14px 16px; border:1px solid var(--line);
  border-left:3px solid var(--gold); border-radius:var(--r-lg); background:var(--panel); }
.bd-head{ display:flex; align-items:center; gap:8px; margin:0 0 6px; }
.bd-mark{ width:22px; height:22px; flex:none; }
.bd-name{ font:800 13px/1 var(--disp); letter-spacing:.08em; color:var(--gold); }
.bd-text{ margin:0; font-size:15px; line-height:1.5; color:var(--ink-2); }
.bd-text strong{ color:var(--ink); font-weight:700; }
/* ---- s150 GAME SCHEDULING panel (templates/nil/_game_schedule.html; the .gs-* prefix is also used by
   the get-started page's own inline CSS, so only the names below belong to this block) ---- */
.gs-sched{ margin-top:16px; padding:14px 16px; border:1px solid var(--line);
  border-left:3px solid var(--accent); border-radius:var(--r-lg); background:var(--panel);
  display:grid; gap:8px; justify-items:start; min-width:0; }
.gs-sched .gs-h{ margin:0; font:800 13px/1.2 var(--disp); letter-spacing:.08em;
  text-transform:uppercase; color:var(--accent); }
.gs-sched .gs-line{ margin:0; font-size:15px; line-height:1.45; color:var(--ink-2); }
.gs-sched .gs-line b{ color:var(--ink); font-weight:700; }
.gs-sched .gs-copy{ margin:0 0 6px; font-size:13px; line-height:1.4; color:var(--dim); }
.gs-sched .gs-local{ font-size:12px; color:var(--mute); }
.gs-sched .gs-late{ color:var(--accent); font-weight:700; }
.gs-sched .gs-acts{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.gs-sched .gs-inline{ display:inline-flex; margin:0; }
.gs-sched .gs-form{ margin:0; display:grid; gap:4px; max-width:100%; }
.gs-sched .gs-form-row{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.gs-sched .gs-zone{ font:800 11px/1 var(--disp); letter-spacing:.1em; color:var(--dim); }
.gs-sched .gs-more{ max-width:100%; }
.gs-sched .gs-more summary{ cursor:pointer; font:800 11px/1 var(--disp); letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-2); padding:8px 0; }
.gs-sched .gs-linkbtn{ background:none; border:0; padding:8px 4px; cursor:pointer;
  font:800 11px/1 var(--disp); letter-spacing:.1em; text-transform:uppercase; color:var(--dim);
  text-decoration:underline; }
.gs-sched .field{ width:auto; max-width:100%; padding:8px 10px; font-size:14px; }
/* The agreed time joins the status line ("UPCOMING · W9 · 🗓 TUE OCT 13 · 9:00 PM ET"): let the line wrap
   inside the hero's auto-width middle column instead of stretching it over the two coach chips. */
.bx-status{ max-width:170px; text-align:center; line-height:1.5; text-wrap:balance; }
.bx-empty-form{ max-width:420px; margin:0 auto; display:grid; gap:12px;
  justify-items:center; }
.bx-empty small{ display:block; margin-top:10px; color:var(--mute); font-size:11.5px; }
@media (max-width:640px){
  .bx-hero{ grid-template-columns:1fr; }
  .bx-side-h{ flex-direction:row; text-align:left; }
  /* Un-reverse on mobile like the rest of the home side: avatar-first,
     matching the away side exactly ("[avatar] Rob @ctrob" both sides). */
  .bx-side-h .bx-coach{ justify-content:flex-start; }
  .bx-side-h .bx-coach .av{ order:0; }
  .bx-mid{ order:-1; border:0; border-bottom:1px solid var(--line); }
  .bx-score{ font-size:40px; }
  .bx-keys{ grid-template-columns:repeat(5,1fr); gap:6px; }
  .bx-key-v{ font-size:14px; gap:5px; }
}

/* ============================================================
   THE FRESHMAN FACTOR — results archive + class-page module (s131)
   templates/nil/freshman/results.html (/freshman/results/), the module on
   templates/nil/recruiting_class_view.html, and THE row partial both print
   (templates/nil/freshman/_result_row.html). Every class is fxr- prefixed: the
   show page owns fx-*, My Class mc-fx-*, My Hub hfx-*, the master list fsml-*.
   Category = label + shape + color: --win ▲ / --loss ▼ / --live ■ / --rare ◆,
   set as --c by .fxr-c-<category>.
   ============================================================ */
.fxr-sr{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* chips: the tally, the legend, the school mini-tally */
.fxr-tchip{ --c:var(--ink-2); display:inline-flex; align-items:center; gap:6px; padding:4px 12px; border-radius:999px;
  font-size:12.5px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; white-space:nowrap; color:var(--c);
  border:1px solid color-mix(in oklab,var(--c) 50%,transparent); background:color-mix(in oklab,var(--c) 12%,transparent); }
.fxr-tchip:not([class*="fxr-c-"]){ border-color:var(--line-bright); background:transparent; }
.fxr-link{ font-family:var(--disp); font-weight:800; font-size:15px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--accent-bright); text-decoration:none; white-space:nowrap; }
.fxr-link:hover{ text-decoration:underline; }

/* ---- the row (THE partial) ---- */
.fxr-row{ --c:var(--ink-2); padding:16px 22px 16px 26px; border-top:1px solid var(--line);
  box-shadow:inset 3px 0 0 var(--c); }
.fxr-rows > .fxr-row:first-child{ border-top:0; }
.fxr-row-h{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; min-width:0; }
.fxr-who{ display:inline-flex; flex-wrap:wrap; align-items:center; gap:6px 12px; min-width:0; }
.fxr-stars{ color:var(--gold); font-size:17px; letter-spacing:.06em; white-space:nowrap; line-height:1; }
.fxr-pos{ padding:2px 8px; border-radius:6px; border:1px solid var(--line-bright); background:var(--panel-2);
  font-family:var(--disp); font-weight:800; font-size:13px; letter-spacing:.06em; color:var(--ink-2); line-height:1.2; }
.fxr-name{ min-width:0; font-family:var(--disp); font-weight:800; font-size:20px; letter-spacing:.01em; color:var(--ink);
  overflow-wrap:anywhere; line-height:1.1; }
.fxr-chip{ display:inline-flex; align-items:center; gap:6px; padding:4px 12px; border-radius:999px; white-space:nowrap;
  font-size:12.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--c);
  border:1px solid color-mix(in oklab,var(--c) 55%,transparent); background:color-mix(in oklab,var(--c) 13%,transparent); }
.fxr-state{ margin-left:auto; white-space:nowrap; font-size:14.5px; font-weight:700; }
.fxr-applied{ color:var(--win); }
.fxr-pending{ padding:3px 12px; border-radius:999px; border:1px dashed var(--line-bright); color:var(--dim); font-weight:600; }
.fxr-ev{ margin:10px 0 0; color:var(--dim); font-size:15px; line-height:1.45; overflow-wrap:anywhere; }
.fxr-ev b{ color:var(--ink); font-weight:700; }
.fxr-attrs{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:10px 0 0; }
.fxr-attrs-lab{ margin-right:4px; font-family:var(--disp); font-weight:700; font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--mute); white-space:nowrap; }
.fxr-pill{ display:inline-flex; align-items:baseline; gap:5px; max-width:100%; padding:4px 13px; border-radius:999px;
  border:1px solid var(--line-bright); background:var(--panel-2); color:var(--ink); font-size:14px; font-weight:600;
  line-height:1.35; overflow-wrap:anywhere; }
.fxr-amt{ font-weight:800; }
.fxr-amt-pos{ color:var(--win); }
.fxr-amt-neg{ color:var(--loss); }
.fxr-pill-note{ color:var(--live); border-color:color-mix(in oklab,var(--live) 55%,transparent);
  background:color-mix(in oklab,var(--live) 12%,transparent); }
.fxr-pill-pending{ border-style:dashed; background:transparent; color:var(--dim); font-weight:500; }
.fxr-pill-sub{ border-color:color-mix(in oklab,var(--c) 55%,transparent); background:color-mix(in oklab,var(--c) 12%,transparent); font-weight:700; }
.fxr-sub-tag{ font-family:var(--disp); font-weight:800; font-size:12.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--c); }
.fxr-arch{ display:inline-flex; flex-wrap:wrap; align-items:center; gap:6px; max-width:100%; padding:4px; border-radius:14px;
  border:1px solid color-mix(in oklab,var(--accent) 45%,var(--line)); background:color-mix(in oklab,var(--accent) 7%,var(--panel)); }
.fxr-arch-tag{ padding:4px 12px; border-radius:999px; background:color-mix(in oklab,var(--accent) 24%,var(--panel-2));
  font-family:var(--disp); font-weight:800; font-size:13.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--accent-bright); }
.fxr-arch-one{ padding:0 4px; font-size:14px; font-weight:600; color:var(--ink); white-space:nowrap; }
.fxr-arch-note{ font-size:13.5px; font-style:italic; color:var(--dim); }
.fxr-rr{ margin:10px 0 0; font-size:14px; font-weight:700; color:var(--live); }

/* ---- the class-page module ---- */
.fxr-card{ overflow:hidden; }
.fxr-tally{ display:flex; flex-wrap:wrap; gap:8px; padding:14px 22px; border-bottom:1px solid var(--line); background:var(--panel-2); }

/* ---- the archive ---- */
.fxr-page{ max-width:1080px; }
.fxr-hero{ margin:0 0 22px; padding:clamp(18px,3vw,30px); border:1px solid var(--line); border-radius:var(--r-xl);
  background:radial-gradient(120% 140% at 0% 0%, color-mix(in oklab,var(--accent) 14%,var(--panel)) 0%, var(--panel) 55%, color-mix(in oklab,var(--rare) 8%,var(--panel)) 100%);
  box-shadow:var(--shadow-card); }
.fxr-hero-top{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:16px 28px; }
.fxr-hero-txt{ flex:1 1 440px; min-width:0; }
.fxr-kicker{ margin:0 0 8px; font-family:var(--disp); font-weight:800; font-size:14px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-bright); }
.fxr-h1{ margin:0; font-family:var(--disp); font-weight:800; font-size:clamp(30px,4.2vw,46px); line-height:1; letter-spacing:.01em;
  text-transform:uppercase; color:var(--ink); overflow-wrap:anywhere; }
.fxr-h1-dim{ color:var(--ink-2); }
.fxr-credit{ margin:10px 0 0; color:var(--dim); font-size:15px; }
.fxr-season{ flex:0 1 330px; min-width:0; }
.fxr-lab{ display:block; margin:0 0 7px; font-family:var(--disp); font-weight:700; font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); }
.fxr-page select.fxr-select{ width:100%; padding-top:12px; padding-bottom:12px; font-size:16px; background-color:var(--panel-2); border-color:var(--line-bright); border-radius:10px; }
.fxr-season-links{ display:flex; flex-wrap:wrap; gap:6px 12px; margin:8px 0 0; font-size:14px; }
.fxr-season-links a{ color:var(--accent-bright); font-weight:700; }
.fxr-stats{ display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:12px; margin:22px 0 0; }
.fxr-stat{ --c:var(--line-bright); display:flex; flex-direction:column; gap:6px; padding:14px 16px; border-radius:12px; min-width:0;
  border:1px solid color-mix(in oklab,var(--c) 60%,var(--line)); background:color-mix(in oklab,var(--panel-2) 80%,transparent); }
.fxr-stat b{ font-family:var(--disp); font-weight:800; font-size:32px; line-height:1; color:var(--ink); white-space:nowrap; font-variant-numeric:tabular-nums; }
.fxr-stat[class*="fxr-c-"] b{ color:var(--c); }
.fxr-glyph{ font-size:.7em; vertical-align:.12em; }
.fxr-stat > span{ font-family:var(--disp); font-weight:700; font-size:12.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--dim); }
.fxr-notice{ margin:0 0 16px; padding:11px 15px; border:1px solid var(--line); border-radius:12px; background:var(--panel-2); color:var(--ink-2); font-size:14.5px; }
.fxr-tools{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:14px 20px; margin:0 0 18px; }
.fxr-jump{ flex:0 1 380px; min-width:0; }
.fxr-tools-r{ display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:10px 16px; }
.fxr-legend{ display:flex; flex-wrap:wrap; gap:8px; }
.fxr-print{ height:46px; padding:0 22px; font-size:15px; }
.fxr-team{ --tc:var(--accent); margin:0 0 22px; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--panel);
  overflow:hidden; box-shadow:var(--shadow-card); scroll-margin-top:90px; }
.fxr-team-h{ display:flex; flex-wrap:wrap; align-items:center; gap:12px 16px; padding:16px 24px; border-bottom:1px solid var(--line);
  background:linear-gradient(90deg, color-mix(in oklab,var(--tc) 30%,var(--panel-2)) 0%, var(--panel-2) 62%); }
.fxr-crest{ --logo-sz:46px; }
.fxr-team-n{ display:flex; flex-direction:column; gap:2px; flex:1 1 200px; min-width:0; }
.fxr-team-n h2{ margin:0; font-family:var(--disp); font-weight:800; font-size:27px; line-height:1; letter-spacing:.02em; text-transform:uppercase; color:var(--ink); overflow-wrap:anywhere; }
.fxr-team-n span{ color:var(--dim); font-size:16px; overflow-wrap:anywhere; }
.fxr-team-tally{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.fxr-team-tally .fxr-link{ margin-left:8px; }
.fxr-empty{ margin:0 0 16px; padding:18px 20px; border:1px dashed var(--line-bright); border-radius:var(--r-lg); background:var(--panel); color:var(--ink-2); font-size:15px; line-height:1.5; }
.fxr-empty a{ color:var(--accent-bright); font-weight:700; white-space:nowrap; }
.fxr-foot{ margin:4px 0 20px; color:var(--dim); font-size:13px; }
/* The category color. AFTER every component rule above: .fxr-row / .fxr-tchip / .fxr-stat set a
   neutral --c at the same specificity, and source order must let the category win. */
.fxr-c-positive{ --c:var(--win); }
.fxr-c-negative{ --c:var(--loss); }
.fxr-c-availability{ --c:var(--live); }
.fxr-c-rare{ --c:var(--rare); }

@media (max-width:760px){
  .fxr-stats{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
  .fxr-season{ flex-basis:100%; }
}
@media (max-width:560px){
  .fxr-row{ padding:14px 14px 14px 18px; }
  .fxr-who{ flex-basis:100%; }
  .fxr-name{ font-size:18px; }
  .fxr-attrs-lab{ flex-basis:100%; }
  .fxr-tally{ padding:12px 14px; }
  .fxr-lt{ flex-wrap:wrap; position:relative; padding-left:18px; row-gap:8px; }
  .fxr-lt .lt-bar{ position:absolute; left:0; top:0; bottom:0; min-height:0; }
  .fxr-lt h2{ flex-basis:100%; }
  .fxr-team-h{ padding:14px; }
  .fxr-team-tally{ flex-basis:100%; }
  .fxr-jump{ flex:1 1 0; }
  .fxr-tools-r{ display:contents; }
  .fxr-legend{ order:3; flex-basis:100%; }
  .fxr-tchip{ padding:3px 10px; font-size:12px; }
  .fxr-legend{ gap:5px; }
  .fxr-legend .fxr-tchip{ gap:3px; padding:2px 7px; font-size:10.5px; letter-spacing:.02em; }
}
@media print{
  body:has(.fxr-page) :is(header.hdr, nav.dock, .drawer, .scrim, .menu, .flash-host, footer, .cfb27-band, .busy-overlay, .ticker){ display:none !important; }
  .fxr-noprint{ display:none !important; }
  body:has(.fxr-page), body:has(.fxr-page) main#app{ background:#fff !important; }
  .fxr-page{ max-width:none; margin:0; padding:0; animation:none; }
  .fxr-page, .fxr-page *{ color:#000 !important; background:transparent !important; box-shadow:none !important; text-shadow:none !important; }
  .fxr-team{ border:1px solid #000; border-radius:0; }
  .fxr-row{ break-inside:avoid; page-break-inside:avoid; border-top:1px solid #999; border-left:3px solid #000; }
  .fxr-pill, .fxr-chip, .fxr-tchip, .fxr-stat, .fxr-arch, .fxr-pos{ border-color:#000 !important; }
}

/* ---- Multi-photo picker strip (static/js/multi-image.js, 2026-10-12) ----
   Built by the script under an opted-in multiple file input: "N of MAX photos", the photos in
   order (numbered) and a remove button each. Wraps at any width; flex-basis 100% puts it on
   its own row when the input sits in a flex row (Top 25, Staff Moves). */
.mimg{ flex:1 1 100%; width:100%; min-width:0; margin:8px 0 0; }
.mimg[hidden]{ display:none; }
.mimg-head{ margin:0 0 6px; font-size:12.5px; color:var(--dim); }
.mimg-count{ color:var(--ink); font-weight:700; }
.mimg-list{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.mimg-item{ position:relative; width:64px; height:64px; flex:0 0 auto; border-radius:var(--r-sm);
  border:1px solid var(--line); background:var(--panel-2); }
/* The picture rounds itself (no overflow:hidden on the tile, which would clip the remove
   button's tap area below). */
.mimg-item img{ display:block; width:100%; height:100%; object-fit:cover; border-radius:calc(var(--r-sm) - 1px); }
.mimg-item.is-prep{ animation:mimg-pulse 1s ease-in-out infinite alternate; }
.mimg-item.is-noprev::before{ content:'\1F4F7'; position:absolute; inset:0; display:grid; place-items:center; font-size:22px; }
@keyframes mimg-pulse{ from{ opacity:.45; } to{ opacity:1; } }
.mimg-n{ position:absolute; left:3px; bottom:3px; min-width:16px; padding:2px 4px; border-radius:4px;
  background:rgba(0,0,0,.68); color:#fff; font-size:11px; line-height:1; text-align:center; }
.mimg-x{ position:absolute; top:3px; right:3px; width:24px; height:24px; padding:0; border:0; border-radius:50%;
  background:rgba(0,0,0,.68); color:#fff; font-size:12px; line-height:24px; text-align:center; cursor:pointer; }
/* A bigger tap target than the 24px circle, out of the layout (absolute): 36px, 44x44 on phones
   (Apple HIG). It reaches about 6px past the tile, inside the 8px gap, so it never covers a neighbor. */
.mimg-x::after{ content:''; position:absolute; inset:-6px; }
@media (max-width:760px){ .mimg-x::after{ inset:-10px; } }
.mimg-x:focus-visible{ outline:2px solid var(--accent-bright); outline-offset:1px; }
.mimg-msg{ margin:6px 0 0; font-size:12.5px; color:var(--loss); }
.mimg-msg:empty{ display:none; }
@media (prefers-reduced-motion:reduce){ .mimg-item.is-prep{ animation:none; } }

/* ==== SHARED COMPONENTS (s144 re-nav P0) — ONE of each, sitewide ==== */
/* Spec: docs/superpowers/specs/2026-10-12-site-nav-pages-design.md §4.1. Pinned by nil/test_shared_components.py.
   RAIL — browse content only (spec §2): a grid at ≥901px, a swipe row with the next card peeking at ≤900px
   (My Hub's card row, generalized; hx-cards rides on it). FOLD — native <details>, no JS needed, the summary
   carries the ONE-LINE headline value (.fold-v) so a closed fold is never blind. SEG — one look for a page's
   own view switch (≤4 segments; more → a <select>). CL — the compact list's bar/rows (static/js/compact-list.js). */
.rail{ display:grid; grid-template-columns:repeat(auto-fit,minmax(var(--rail-min,300px),1fr)); gap:12px; }
.rail-item{ min-width:0; }
.rail-count{ font-size:12px; color:var(--dim); font-variant-numeric:tabular-nums; }
@media (max-width:900px){
  .rail{ display:flex; overflow-x:auto; scroll-snap-type:x mandatory; gap:10px;
    margin:0 -16px; padding:0 16px 4px; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
  .rail::-webkit-scrollbar{ display:none; }
  .rail > .rail-item{ flex:0 0 86%; scroll-snap-align:start; }
}
@media (min-width:901px){
  .rail-count{ display:none; }
}

details.fold > summary.fold-sum{ list-style:none; cursor:pointer; display:flex; flex-wrap:wrap; align-items:center;
  column-gap:12px; row-gap:2px; padding:14px 16px; user-select:none; }
details.fold > summary.fold-sum::-webkit-details-marker{ display:none; }
.fold-t{ margin:0; font-family:var(--disp); font-weight:800; font-size:15px; letter-spacing:.04em; text-transform:uppercase; color:var(--ink); }
.fold-v{ flex:1 1 12ch; min-width:0; text-align:right; overflow-wrap:anywhere; font-size:13px; color:var(--ink-2); font-variant-numeric:tabular-nums; }
.fold-x{ flex:0 0 auto; font-family:var(--disp); font-weight:800; font-size:20px; line-height:1; color:var(--accent-bright);
  transition:transform .2s var(--ease-out-quint); }
.fold-x::before{ content:"+"; }
details.fold[open] > summary .fold-x{ transform:rotate(45deg); }
details.fold > .fold-body{ padding:0 16px 16px; }
details.fold > summary.fold-sum:focus-visible{ outline:2px solid var(--accent-bright); outline-offset:2px; }

.seg{ display:flex; gap:4px; padding:4px; max-width:100%; border-radius:var(--r-sm); background:var(--panel-2); border:1px solid var(--line); }
.seg-btn{ flex:1 1 0; min-width:0; display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:8px 10px;
  border:0; border-radius:calc(var(--r-sm) - 2px); background:transparent; color:var(--ink-2); cursor:pointer; text-decoration:none;
  font-family:var(--disp); font-weight:700; font-size:13px; letter-spacing:.06em; text-transform:uppercase; text-align:center; }
.seg-btn:hover{ color:var(--ink); }
.seg-btn.is-on, .seg-btn[aria-current="page"], .seg-btn[aria-selected="true"] { background:var(--accent); color:#fff; }
.seg-btn:focus-visible{ outline:2px solid var(--accent-bright); outline-offset:2px; }

.cl-bar{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; margin:14px 0 10px; scroll-margin-top:90px; }
.cl-bar + *{ margin-top:0 !important; }
.cl-q{ flex:1 1 200px; width:auto; min-width:0; max-width:340px; }
.cl-n{ font-size:12.5px; color:var(--dim); }
.cl-more{ display:none !important; }
@media (max-width:760px){
  .cl-bar{ scroll-margin-top:calc(56px + var(--ticker-h) + 14px); }
}

/* ============================================================
   NEXT ADVANCE BANNER (s149, Rob 2026-10-16: "an embossed branded legacy riveted banner with
   the advance time"). Markup: templates/nil/_advance_clock.html on the Scoreboard, My Hub and the
   league home; static/js/advance-clock.js ticks it and re-tiers it. A steel plate, embossed,
   four corner rivets, the riveted mark, its edge in the tier's ink: calm = the league's own
   --accent; urgent (<= 24 h) = --gold; critical (<= 6 h) = --loss and the countdown pulses;
   due = --loss. Like the Wire's lead-in the plate stays dark in BOTH themes (a step lighter on
   light), so its inks are its own vars (--acb-*): the theme tokens on dark; on light, where
   --accent/--gold/--loss are tuned for light panels and go muddy on steel, the league's accent
   mixed toward white and brighter fixed gold/red. A container query stacks it (the countdown
   full width) wherever it is narrow: a phone, and My Hub's aside.
   ============================================================ */
.acb{
  --acb-accent:var(--accent); --acb-calm:var(--accent-bright); --acb-gold:var(--gold); --acb-red:var(--loss);
  --acb-steel-1:#2b3442; --acb-steel-2:#1a2029; --acb-steel-3:#0f1319;
  container-type:inline-size; container-name:acb;
  position:relative; max-width:640px; min-width:0; margin:10px 0; color:#C9D3E3;
  border:1px solid #05070a; border-left:4px solid var(--acb-edge); border-radius:9px;
  background:
    radial-gradient(150px 90px at 0% 50%, color-mix(in srgb,var(--acb-edge) 30%,transparent), transparent 72%),
    linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,0) 48%),
    linear-gradient(180deg,var(--acb-steel-1) 0%,var(--acb-steel-2) 56%,var(--acb-steel-3) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.17),          /* the emboss: a lit top edge */
    inset 0 -2px 0 rgba(0,0,0,.5),                /* ...and a shadowed bottom edge */
    inset 0 0 0 1px rgba(255,255,255,.035),
    0 12px 24px -14px rgba(0,0,0,.85);            /* the plate stands off the page */
}
.acb:first-child{ margin-top:0; }
/* The four pan-head rivets (the Forged L's plate corners): a dark recess ring, a steel dome, a glint. */
.acb::before{
  content:""; position:absolute; inset:5px; pointer-events:none;
  --acb-glint:radial-gradient(circle at 36% 32%,rgba(255,255,255,.95) 0 .7px,rgba(255,255,255,.3) 1.7px,transparent 2.7px);
  --acb-rivet:radial-gradient(circle at 50% 50%,#b3bcc8 0,#7b8594 1.9px,#454d59 3.3px,#14181e 4.2px,rgba(0,0,0,.45) 4.9px,transparent 5.5px);
  background:
    var(--acb-glint) left top/11px 11px no-repeat, var(--acb-rivet) left top/11px 11px no-repeat,
    var(--acb-glint) right top/11px 11px no-repeat, var(--acb-rivet) right top/11px 11px no-repeat,
    var(--acb-glint) left bottom/11px 11px no-repeat, var(--acb-rivet) left bottom/11px 11px no-repeat,
    var(--acb-glint) right bottom/11px 11px no-repeat, var(--acb-rivet) right bottom/11px 11px no-repeat;
}
.acb-in{ position:relative; display:flex; align-items:center; gap:14px; padding:13px 24px 13px 18px; }
.acb-mark{ flex:0 0 auto; display:block; width:40px; height:40px; border-radius:8px;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.7)); }
.acb-what{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:5px; }
.acb-label{ font-family:var(--disp); font-weight:800; font-size:13px; line-height:1; letter-spacing:.24em;
  text-transform:uppercase; color:var(--acb-ink); text-shadow:0 1px 0 rgba(0,0,0,.65); }
.acb-slot{ font-family:var(--body); font-weight:600; font-size:14.5px; line-height:1.25; color:#DFE5EE;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.acb-count{ flex:0 0 auto; display:flex; align-items:baseline; gap:12px; margin-left:auto; padding-left:20px;
  border-left:1px solid rgba(0,0,0,.6); box-shadow:inset 1px 0 0 rgba(255,255,255,.07);   /* an engraved groove */
  font-family:var(--disp); font-variant-numeric:tabular-nums; color:var(--acb-num);
  text-shadow:0 2px 0 rgba(0,0,0,.6); }
.acb-seg{ display:inline-flex; align-items:baseline; gap:2px; white-space:nowrap; }
.acb-seg b{ min-width:2ch; text-align:right; font-weight:800; font-size:40px; line-height:.9; letter-spacing:.01em; }
.acb-seg-d b{ min-width:0; }
.acb-seg small{ font-weight:700; font-size:15px; letter-spacing:.04em; color:#8E9BB2; text-shadow:none; }

/* The pressure tiers (nil.advance_clock.tier; the JS re-tiers every second). Every banner
   carries one, so the edge / label / number inks live here only. */
.acb--calm{ --acb-edge:var(--acb-accent); --acb-ink:var(--acb-calm); --acb-num:#fff; }
.acb--urgent{ --acb-edge:var(--acb-gold); --acb-ink:var(--acb-gold); --acb-num:var(--acb-gold); }
.acb--critical{ --acb-edge:var(--acb-red); --acb-ink:var(--acb-red); --acb-num:var(--acb-red); }
.acb--critical .acb-count{ animation:acb-pulse 2.4s ease-in-out infinite; }
.acb--due{ --acb-edge:var(--acb-red); --acb-ink:var(--acb-red); }
.acb--due .acb-label{ font-size:26px; letter-spacing:.14em; }
@keyframes acb-pulse{
  0%,100%{ opacity:1; text-shadow:0 2px 0 rgba(0,0,0,.6), 0 0 4px transparent; }
  50%{ opacity:.8; text-shadow:0 2px 0 rgba(0,0,0,.6), 0 0 20px var(--acb-red); }
}
@media (prefers-reduced-motion: reduce){ .acb--critical .acb-count{ animation:none; } }

:root[data-theme="light"] .acb{
  --acb-accent:color-mix(in srgb,var(--accent) 72%,#fff); --acb-calm:color-mix(in srgb,var(--accent) 45%,#fff);
  --acb-gold:#EBC75E; --acb-red:#FF6E6E;
  --acb-steel-1:#3b4657; --acb-steel-2:#29323f; --acb-steel-3:#1d242e;
  border-color:#141a22 #141a22 #141a22 var(--acb-edge);      /* keep the tier's left edge */
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2), inset 0 -2px 0 rgba(0,0,0,.42),
    inset 0 0 0 1px rgba(255,255,255,.04), 0 12px 22px -12px rgba(20,40,80,.55);
}

/* Narrow (a phone, My Hub's aside): mark + label + slot on top, the countdown full width below. */
@container acb (max-width:540px){
  .acb-in{ flex-wrap:wrap; row-gap:11px; padding:13px 18px 14px 15px; }
  .acb-what{ flex:1 1 0; }
  .acb-count{ flex:1 1 100%; justify-content:center; gap:clamp(14px,7cqi,34px); margin-left:0; padding:11px 0 0;
    border-left:0; border-top:1px solid rgba(0,0,0,.6); box-shadow:inset 0 1px 0 rgba(255,255,255,.07); }
  .acb-seg b{ font-size:42px; }
  .acb--due .acb-label{ font-size:22px; }
}
/* ==== END SHARED COMPONENTS ==== */

/* ===== Game scheduling (s150 Task 7): the agreed time on the shared card (.gc-time), the My Hub owner's
   Accept strip (.hs-sched*, inside the hero band: its ink / line / chip tokens, with fallbacks) and the
   Legacy Lines board line (.wg-time). The card + board lines are one line with an ellipsis; the hub strip's text wraps (its time is the point). ===== */
.gc-time{ display:flex; align-items:center; justify-content:center; min-height:34px; padding:6px 12px; margin:0; text-align:center;
  font-size:12px; font-weight:600; letter-spacing:.01em; color:var(--dim); border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background:var(--panel-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hs-sched{ margin:8px 0 2px; border:1px solid var(--gline,var(--line)); border-radius:12px; background:var(--bandChip,rgba(0,0,0,.28)); overflow:hidden; }
.hs-sched-row{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; min-width:0; padding:8px 10px; font-size:12.5px; line-height:1.3; color:var(--ink2,var(--dim)); }
.hs-sched-row + .hs-sched-row{ border-top:1px solid var(--gline,var(--line)); }
.hs-sched-t{ flex:1 1 100%; min-width:0; overflow-wrap:anywhere; }   /* wraps: the time is the point, never ellipsised */
.hs-sched-t b{ color:var(--ink,#fff); font-weight:700; }
.hs-sched-row form{ flex:0 0 auto; margin:0; }
.hs-sched-go{ border:0; border-radius:8px; padding:6px 13px; cursor:pointer; background:var(--accent); color:#fff;
  font-family:var(--disp); font-weight:700; font-size:12.5px; letter-spacing:.07em; text-transform:uppercase; line-height:1; }
.hs-sched-go:hover{ filter:brightness(1.08); }
.hs-sched-a{ flex:0 0 auto; white-space:nowrap; font-weight:700; font-size:12px; color:var(--bandAccent,var(--accent-bright)); text-decoration:none; }
.hs-sched-a:hover{ text-decoration:underline; }
.wg-time{ font-size:11.5px; font-weight:600; color:var(--dim); white-space:nowrap; max-width:100%; overflow:hidden; text-overflow:ellipsis; }

/* ---- Notification center page (/notifications/, s151 C4, NC §5.4). One column, rows are whole links >= 44px. ---- */
.nc-page{ max-width:720px; margin:0 auto; padding-bottom:40px; }
.nc-head{ margin:6px 0 18px; }
.nc-h1{ font-family:var(--disp); font-weight:800; font-size:clamp(26px,5vw,34px); letter-spacing:.01em; margin:0; color:var(--ink); }
.nc-sub{ margin:4px 0 0; font-size:14px; color:var(--dim); }
.nc-caught{ border:1px solid var(--line); border-left:3px solid var(--win); border-radius:var(--r); background:var(--panel); padding:16px 18px; margin:0 0 22px; }
.nc-caught-t{ margin:0 0 12px; font-size:14.5px; line-height:1.5; color:var(--ink-2); }
.nc-back{ display:inline-flex; align-items:center; min-height:44px; font-weight:700; font-size:14px; color:var(--accent-bright); text-decoration:none; }
.nc-back:hover{ text-decoration:underline; }
.nc-group{ margin:0 0 26px; }
.nc-gh{ font-family:var(--disp); font-weight:800; font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:var(--dim); margin:0 0 8px; padding-bottom:6px; border-bottom:1px solid var(--line); }
.nc-row{ display:block; position:relative; min-height:44px; padding:12px 16px 12px 18px; margin:0 0 8px; border:1px solid var(--line); border-radius:var(--r); background:var(--panel); box-shadow:var(--shadow-card); color:var(--ink); text-decoration:none; }
.nc-row::before{ content:""; position:absolute; left:0; top:10px; bottom:10px; width:3px; border-radius:2px; background:var(--accent-bright); }
.nc-row:hover{ border-color:var(--line-bright); background:var(--panel-2); }
.nc-row:focus-visible{ outline:2px solid var(--accent-bright); outline-offset:2px; }
.nc-tag{ display:block; font-size:10.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--accent-bright); margin-bottom:3px; }
.nc-title{ display:block; font-weight:700; font-size:15px; line-height:1.35; color:var(--ink); overflow-wrap:anywhere; }
.nc-detail{ display:block; margin-top:3px; font-size:13px; line-height:1.4; color:var(--dim); overflow-wrap:anywhere; }
.nc-foot{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:6px 14px; margin-top:8px; }
.nc-when{ font-size:12px; font-weight:600; color:var(--dim); white-space:nowrap; }
.nc-cta{ margin-left:auto; font-size:13px; font-weight:800; color:var(--accent-bright); }
.nc-none{ margin:0 0 8px; padding:12px 4px; font-size:14px; color:var(--dim); }
.nc-row--admin{ background:transparent; box-shadow:none; border-style:dashed; }
.nc-row--admin::before{ background:var(--gold); }
.nc-row--admin .nc-title{ font-size:14px; color:var(--ink-2); }
/* ---- s154 FORCE WIN / FAIR SIM panel (templates/nil/_game_ruling.html), the game page's second private panel ---- */
.gr-panel{ margin-top:12px; padding:14px 16px; border:1px solid var(--line);
  border-left:3px solid var(--gold); border-radius:var(--r-lg); background:var(--panel);
  display:grid; gap:8px; justify-items:start; min-width:0; }
.gr-panel .gr-h{ margin:0; font:800 13px/1.2 var(--disp); letter-spacing:.08em;
  text-transform:uppercase; color:var(--gold); }
.gr-panel .gr-line{ margin:0; font-size:15px; line-height:1.45; color:var(--ink-2); }
.gr-panel .gr-line b{ color:var(--ink); font-weight:700; }
.gr-panel .gr-copy{ margin:0 0 6px; font-size:13px; line-height:1.4; color:var(--dim); }
.gr-panel .gr-dim{ color:var(--dim); font-weight:500; }
.gr-panel .gr-more{ max-width:100%; }
.gr-panel .gr-more summary{ cursor:pointer; font:800 11px/1 var(--disp); letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-2); padding:8px 0; }
.gr-panel .gr-form{ margin:0; display:grid; gap:10px; max-width:100%; }
.gr-panel .gr-kinds{ border:0; margin:0; padding:0; display:grid; gap:6px; }
.gr-panel .gr-radio{ display:flex; align-items:flex-start; gap:8px; cursor:pointer; font-size:14px;
  color:var(--ink); font-weight:600; }
.gr-panel .gr-radio input{ margin-top:3px; }
.gr-panel .gr-fld{ display:grid; gap:4px; }
.gr-panel .field{ width:100%; max-width:520px; padding:8px 10px; font-size:14px; }
.gr-panel .gr-row{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; }