/* ============================================================
   PS IA-ITB — LIGHT MODE
   Load AFTER styles.css and mobile.css. Everything is scoped to
   html[data-theme="light"] so the shipped "Broadcast Navy" dark
   theme is the untouched default; adding the attribute flips the
   whole site to light. theme-toggle.js sets the attribute from the
   OS setting (prefers-color-scheme) with a manual override.

   The look: a DAYLIGHT SPORTS PAGE, not the dark theme with the
   lights turned up. A pure white page carrying white cards, told
   apart by a quiet grey neutral hairline; elevation on hover where
   the dark theme uses an accent bar; generous radii, with buttons
   and chips as pills; near-black neutral ink; and a royal blue +
   deep navy pair doing all the control work — blue accents and
   links, navy for the committed state (active tab, masthead).
   Section headers are plain bold type with a pill "view all".
   Photo heroes are untouched: they stay dark (§1).

   Strategy
   --------
   1. Re-map the design tokens (:root vars) to a light palette. Most
      of the site reads these, so it re-skins for free — and that now
      includes the RADIUS tokens, which is why the pills and the
      generous corners need almost no per-component rules.
   2. Re-assert the ORIGINAL dark tokens on the photo heroes so they
      stay dark & broadcast-forward (only the body goes light).
   3. State the shared vocabulary once (§0), then override the
      handful of places that hard-code dark hex values instead of
      tokens (headers over light bars, sticky tab bar, table/row
      dividers, podium plinths, squad + account panels).

   Every ink in here is measured, not eyeballed, against each surface
   it actually lands on — see the notes on the token block.
   ============================================================ */

html[data-theme="light"]{
  /* surfaces — a PURE WHITE page carrying WHITE cards. Nothing is tinted:
     what separates a card from the page is a quiet grey hairline, and what
     marks it as clickable is elevation on hover. That is the whole structural
     idea of this theme, and it is why --bg and --card are the same white.
     The previous light mode tinted everything faintly blue (#EDF1F8 page,
     #F5F8FD panel, #D5DEEC borders); the greys here are NEUTRAL so the only
     colour on a page is the content, the royal blue and the gold. */
  --bg:#FFFFFF;        /* page */
  --card:#FFFFFF;      /* raised cards — same white, told apart by the hairline */
  --panel:#F6F7F9;     /* recessed: table heads, sub-panels, footer, fields */
  --border:#DCDFE5;    /* the hairline that does all the separating */
  --border-2:#EAECF0;
  --divider:#C9CDD5;
  /* --bg USED to be the recessed grey, and a dozen components in styles.css
     still reach for it as one — inputs, chips, progress troughs. Now that it
     is the page white, those have to be re-grounded by hand or they vanish
     into it; §2b does that. These two are the tokens they should have had. */
  --hover:#F4F5F8;     /* row / card hover wash */
  --track:#E9EBEF;     /* progress + bar-chart troughs */
  /* radii — generous, and buttons/chips go fully round. Remapping the SHARED
     radius tokens means every component that already reads them turns pill or
     rounded without a rule of its own; only the handful that hard-code a
     radius need naming further down. */
  --r-card:18px; --r-card-lg:22px; --r-btn:999px;
  /* brand — a royal blue and a deep navy, and between them they do all the
     control work: royal blue is the accent, the link and the primary fill,
     navy is the committed/selected state (active tabs, masthead). Both are
     measured as TEXT on every surface they sit on — white cards, the panel
     and their own tints — and as a ground under white ink: royal blue 6.5:1,
     navy 15.9:1. Gold is unchanged; it was already measured against white. */
  --blue:#1F4FE0; --blue-fill:#1F4FE0; --blue-light:#1A44C9; --blue-deep:#122045;
  /* Blue's tint pair, on the same footing as win/draw/loss below: the ground
     sits at the lightness of --win-bg/--draw-bg/--loss-bg and the border at
     theirs, so a blue chip reads as tinted rather than outlined. --blue-light
     on --blue-bg measures 8.3, comfortably past the 5.2-5.8 the other three run
     at — blue is simply the darkest of the four inks. */
  --blue-bg:#E7EDFC; --blue-bd:#B9CCF2;
  --gold:#8F5E09; --gold-2:#7A5008;
  /* results — same hues, pale light tints. The ink is sized for its own tint,
     the hardest surface it sits on: win 5.8 on --win-bg, draw 5.2 on
     --draw-bg, loss 5.4 on --loss-bg (they were 3.9 / 3.2 / 4.0). */
  --win:#0B6B41; --win-bg:#E4F5EC; --win-bd:#AEE0C4;
  --draw:#8A5A10; --draw-bg:#FAF0D6; --draw-bd:#E9D096;
  --loss:#B4291C; --loss-bg:#FCE8E5; --loss-bd:#F2B7B0;
  /* No --cat-* block here on purpose. The match-category badge is a SOLID
     saturated fill with dark ink, which reads identically on a dark card and
     a white one — so unlike a tinted pill it needs no light-mode remap. See
     the --cat-* comment in styles.css :root. */
  /* --comm IS remapped, precisely because .ncat is tinted rather than solid:
     lilac ink on a near-black ground is invisible once the card goes white.
     Same shape as the result tints above — deeper ink, pale ground. */
  --comm:#5B4BA8; --comm-bg:#EFEBFA; --comm-bd:#CFC4EE;
  /* text — NEAR-BLACK AND NEUTRAL. The old ramp was navy (#101B33 down to
     #5D6C87): on a faintly blue page that read as one family, but on pure
     white a blue-grey ink looks like a link that isn't. Every step is still
     measured, and the floor is what matters — --dim captions table heads,
     countdowns, footers and empty states, so it is a reading ink, not a
     decoration. On white: text 18.1, muted 8.7, muted-2 6.6, dim 5.0; on
     --panel, the other surface they land on, 16.9 / 8.2 / 6.2 / 4.7. */
  --text:#14161A; --muted:#474B54; --muted-2:#585D67; --dim:#6A6F79;
  /* stats podium value ink — the bright dark-mode MEDAL hex stays on the
     badge/ring (self-contained), but the bare .pod3-val number needs a
     darker ink to read on the now-light card */
  --medal-1-ink:#8F5E09; --medal-2-ink:#585D67; --medal-3-ink:#8B5A34;
}

html[data-theme="light"] body{ background:var(--bg); color:var(--text); }
html[data-theme="light"] a{ color:var(--blue); }
html[data-theme="light"] a:hover{ color:var(--blue-deep); }
/* subtle color-scheme hint so native controls (scrollbars, form UI) match */
html[data-theme="light"]{ color-scheme:light; }

/* ------------------------------------------------------------
   0. THE VOCABULARY
   The moves that make this a daylight sports page rather than the
   dark theme with the lights turned up. All light-mode only —
   dark keeps its accent bars, square corners and chip headers.
     · a hairline, not a tint, separates a white card from a
       white page
     · ELEVATION ON HOVER replaces the accent bar as the signal
       that a card is a thing you can click
     · buttons and chips are pills, cards take generous radii —
       both inherited from the radius tokens remapped above, so
       most components need no rule of their own here
     · section headers are plain bold type with a pill "view all"
   Component-specific work (tabs, rows, match chips) stays in the
   sections it already belonged to, further down.
   ------------------------------------------------------------ */
html[data-theme="light"]{ --lift:0 14px 30px -16px rgba(20,22,26,.32); }

/* The 4px blue→gold strip across the top of every card was the dark theme's
   way of saying "card". The hairline says it now, so the bar is just noise —
   and it is the one element that would keep a hard accent edge on a page
   whose whole idea is quiet.
   Two sources: the .accent-strip class and two strips register.js writes
   INLINE. (The squad page's own bar is gone — what replaced it, .sqs-you-strip,
   is the KIT COLOUR and therefore information, so it is never hidden.) The
   inline hook keys
   on the gradient literal and on `div`, which is what keeps it off the fill
   of the registration progress bar — that is an <i> carrying the same
   gradient, and it is a bar, not an accent. */
html[data-theme="light"] .accent-strip,
html[data-theme="light"] #app div[style*="linear-gradient(90deg,var(--blue),var(--gold))"]{ display:none; }

/* Same reason, for the nav's active/hover underline: a gold-tipped gradient is
   the old accent language. In this theme the pair does the control work, so
   the indicator is simply royal blue. */
html[data-theme="light"] .nav-main a::after{ background:var(--blue); }

/* ...and hover says the rest. A border-colour change alone is too quiet on a
   white page; a lift reads instantly and spends no colour doing it. */
html[data-theme="light"] .nfx,
html[data-theme="light"] .ncard,
html[data-theme="light"] .abt-tile,
html[data-theme="light"] .statbar,
html[data-theme="light"] .match-card{ transition:box-shadow .16s ease, transform .16s ease, border-color .16s ease; }
html[data-theme="light"] .nfx:hover,
html[data-theme="light"] .ncard.lk:hover,
html[data-theme="light"] .abt-tile.lk:hover,
html[data-theme="light"] .statbar.lk:hover{
  box-shadow:var(--lift); transform:translateY(-2px); border-color:var(--divider);
}

/* Section headers. The numbered chip + bordered uppercase label is broadcast
   graphics — it belongs to the dark theme. Here the header is just its title,
   set bold, and the "view all" becomes the pill on the right. .num is hidden
   rather than restyled: the number is the device, not information. */
html[data-theme="light"] .shead .num{ display:none; }
html[data-theme="light"] .shead .lbl{
  background:none; border:none; border-radius:0; padding:0;
  font-size:20px; font-weight:800; letter-spacing:-.015em; text-transform:none; color:var(--text);
}
html[data-theme="light"] .shead .link{
  border:1px solid var(--border); border-radius:var(--pill);
  padding:8px 16px; font-size:12.5px; font-weight:700; color:var(--text);
}
html[data-theme="light"] .shead .link:hover{ background:var(--panel); border-color:var(--divider); color:var(--text); }

/* Chips go round. Only the ones that HARD-CODE a radius need naming —
   everything reading --r-btn/--pill already followed. Deliberately not in
   this list: .poschip and .mpill are two-line tiles, and a 999px radius on a
   tall box reads as a lozenge, not a pill; they take a generous corner. */
html[data-theme="light"] .nfx-chip,
html[data-theme="light"] .rbadge,
html[data-theme="light"] .int-tag,
html[data-theme="light"] .upc-reg,
html[data-theme="light"] .upc-squad,
html[data-theme="light"] .poschip-mini,
html[data-theme="light"] .acct-step,
html[data-theme="light"] .stat-tab{ border-radius:var(--pill); }
html[data-theme="light"] .poschip{ border-radius:13px; }
html[data-theme="light"] .mpill{ border-radius:14px; }

/* --bg is the PAGE white now, but a dozen components in styles.css still use
   it as their recessed ground. Troughs are the load-bearing case — a progress
   bar whose track is the page colour has no track at all — so they take
   --track. The rest (admin-console inputs, pool chips, .btn-lock) all carry a
   hairline of their own, so they simply land on white with an edge, which is
   this theme's normal state and needs no rule. */
html[data-theme="light"] .progress,
html[data-theme="light"] .sqs-prog{ background:var(--track); }

/* ------------------------------------------------------------
   1. Photo heroes stay DARK. Re-assert the shipped dark tokens on
   .hero so every descendant (h1, sub, eyebrow, scorebug, CTAs)
   renders against the dark photo exactly as before.
   ------------------------------------------------------------ */
html[data-theme="light"] .hero{
  --text:#EEF3FB; --muted:#C4CEDE; --muted-2:#9DAAC0; --dim:#828FA8;
  --card:#111B2E; --panel:#0A1326; --border:#25324A; --border-2:#1A2336; --divider:#2C3A55;
  --blue:#3D7BF0; --blue-fill:#2F6BE0; --blue-light:#5C95F5; --blue-deep:#1B3C8C; --gold:#F5C542;
  --blue-bg:#0E1D3A; --blue-bd:#2F5BB0;
  color:#EEF3FB;   /* h1/scorebug inherit `color` (not var(--text)), so set it directly */
}

/* Light-mode photo grade: brighter, softer contrast and a touch cooler so the
   heroes read airy against the light body — the scrim is kept only where the
   headline sits, and the base fades into the page so the photo melts in.
   Dark mode is untouched. */
html[data-theme="light"] .hero-photo{ filter:brightness(1.1) contrast(.93) saturate(.96); }
/* The bottom half of this ramp is LOAD-BEARING, not decoration: .lower-third
   sits in it, and the eyebrow, headline and standfirst are read against
   whatever it leaves behind. The first version of this grade kept the airy
   middle all the way down to 80%, and measured on the glyph pixels the eyebrow
   fell to 2.0–3.3:1 and the standfirst to 3.1:1 over the bright parts of the
   photo — light mode was materially worse than dark here, purely because the
   scrim had been lifted. The airy middle is preserved; the ramp just starts
   earlier and lands deeper, which is the band the text actually occupies. */
html[data-theme="light"] .hero-ov1{
  background:linear-gradient(180deg,
    rgba(13,22,42,.55) 0%,
    rgba(96,124,166,.12) 30%,
    rgba(120,145,180,.05) 46%,
    rgba(20,32,58,.42) 64%,
    rgba(14,23,44,.74) 82%,
    rgba(9,15,30,.92) 100%);
}
html[data-theme="light"] .hero-ov2{ background:linear-gradient(90deg, rgba(13,22,42,.5), transparent 60%); }
html[data-theme="light"] .hero-inner{ position:relative; z-index:3; }
html[data-theme="light"] .hero::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:60px; z-index:2; pointer-events:none;
  background:linear-gradient(180deg, rgba(237,241,248,0), var(--bg));
}
html[data-theme="light"] .hero-h1{ color:#EEF3FB; text-shadow:0 4px 30px rgba(0,0,0,.55), 0 1px 3px rgba(0,0,0,.5); }
/* The standfirst carries no scrim of its own in dark (the photo is graded dark
   enough there); in light the brighter grade puts it over sky and shirts, where
   it measured 3.1:1 on its glyph pixels. Its own shadow is the fix, same as the
   eyebrow above it. */
html[data-theme="light"] .hero-sub{ text-shadow:0 1px 2px rgba(0,0,0,.85), 0 0 8px rgba(0,0,0,.9), 0 0 20px rgba(0,0,0,.75); }
/* squad readiness band: a small lift so it sits in the same lighter family */
/* The matchday masthead stays a NAVY band in light mode — it is the page's
   marquee, and navy is the pair's committed half, the same colour doing the
   active-tab job on Stats. Re-pitched to the new navy so the two agree. */
/* The band stays DARK in light mode, but the match-category pill inside it
   needs no re-assertion any more: a solid saturated fill with dark ink is
   theme-independent. The tinted first pass DID need one. */

/* ------------------------------------------------------------
   2. Header — transparent over a hero, a light bar everywhere else.
   ------------------------------------------------------------ */
html[data-theme="light"] .site-header{ background:rgba(255,255,255,.9); border-bottom-color:var(--border-2); }
html[data-theme="light"] .site-header.over-hero{ background:transparent; border-bottom:none; }
/* over a dark hero: keep the wordmark + burger light */
html[data-theme="light"] .site-header.over-hero .brand .word{ color:#fff; }
html[data-theme="light"] .site-header.over-hero .menu-btn{ border-color:rgba(255,255,255,.28); color:#fff; }
/* on the light bar: dark wordmark + burger */
html[data-theme="light"] .site-header:not(.over-hero) .brand .word{ color:var(--text); }
html[data-theme="light"] .site-header:not(.over-hero) .menu-btn{ border-color:var(--border); color:var(--text); }
/* …and the desktop nav, which this family had been missing. styles.css inks
   the hovered/active link #fff, which is right over a photo and invisible on
   the light bar. Until the article page there was no NAV-LEVEL view without a
   hero, so only match reports hit it and only their crumb link went white. */
html[data-theme="light"] .site-header:not(.over-hero) .nav-main a{ color:var(--muted-2); }
html[data-theme="light"] .site-header:not(.over-hero) .nav-main a:hover,
html[data-theme="light"] .site-header:not(.over-hero) .nav-main a.active{ color:var(--text); }
/* Over a hero the bar is transparent on the dark photo, and the light-bar
   family above deliberately doesn't reach it — but nothing re-inked the
   links either, so they resolved to light-mode BLUE on a dark photograph
   and only the active (white-underlined) link could be read. Match what
   dark mode renders there: quiet white, full white when current/hovered. */
html[data-theme="light"] .site-header.over-hero .nav-main a{ color:rgba(255,255,255,.78); }
html[data-theme="light"] .site-header.over-hero .nav-main a:hover,
html[data-theme="light"] .site-header.over-hero .nav-main a.active{ color:#fff; }
/* the ghost button hover goes white-on-white on the light bar */
html[data-theme="light"] .site-header:not(.over-hero) .signin-ghost{ color:var(--muted); }
html[data-theme="light"] .site-header:not(.over-hero) .signin-ghost:hover{ color:var(--text); border-color:var(--divider); }
/* mobile dropdown nav sits on the light panel already (tokenised) */
html[data-theme="light"] .mobnav a{ color:var(--muted); }
html[data-theme="light"] .mobnav a.active{ color:var(--blue); }
/* signed-in gold chip reads on white — scoped to the light bar ONLY. Over a
   hero (Home/Stats/etc., which stays dark per section 1) the chip floats on
   a dark photo, so it keeps the bright dark-mode gold instead (matching what
   dark mode already renders there, since acct-btn sits outside .hero's DOM
   subtree and never gets the hero's local dark-token re-assertion). */
html[data-theme="light"] .site-header:not(.over-hero) .acct-btn.signed-in{
  background:rgba(178,110,19,.12); border-color:var(--gold-2); color:var(--gold-2);
}
html[data-theme="light"] .site-header.over-hero .acct-btn.signed-in{
  background:rgba(245,197,66,.16); border-color:#E0B528; color:#F5C542;
}

/* ------------------------------------------------------------
   3. Home — most of it is tokenised. Only the join band and the
   sidebar join card keep their saturated blue (white text), which
   is fine on light too.
   ------------------------------------------------------------ */
/* keep the treasury/kas divider crisp */
html[data-theme="light"] .kas-cell:first-child{ border-bottom-color:var(--border); }

/* The matchday rail sits VISUALLY on the dark hero photo above 1000px, but it
   is a sibling of .hero, not a descendant — so it never gets the dark-token
   re-assertion in section 1. That's deliberate: below 1000px the rail un-floats
   onto the light page background, where a dark card would look like a bug. So
   the card goes light with the page, and a deeper shadow does the work of
   separating it from the photo on desktop. */
html[data-theme="light"] .nfx-body{
  background:rgba(255,255,255,.92); border-color:var(--border);
}
/* Neutral and shallower than the old navy-tinted drop: on a white page the
   rail card is separated by its hairline, and the shadow is only there to
   float it over the photo. --lift takes over on hover (§0). */
html[data-theme="light"] .nfx{ box-shadow:0 18px 44px -26px rgba(20,22,26,.34); }
html[data-theme="light"] .nfx-cd-u{ background:var(--panel); border-color:var(--border); }

/* Same reason, for the banner above it: outside .hero it no longer inherits
   dark tokens, and its gradients hardcode the DARK gold (#F5C542-ish) rather
   than var(--gold), which is #B26E13 in light mode. */
/* Light mode is where the old near-transparent fill was worst. The ink here is
   DARK — brown tag, navy CTA — and above 1000px it was landing on the dark
   hero photo, which measured 1.05:1 and 1.25:1: unreadable, not merely low.
   So the tint gets the same near-opaque white base .nfx-body has above, which
   is what makes dark ink legible whether the banner is over the photo or over
   the light page below 1000px. */
html[data-theme="light"] .hero-squadout{
  background:linear-gradient(90deg,rgba(178,110,19,.15),rgba(178,110,19,.05)),rgba(255,255,255,.94);
  border-color:var(--gold);
}
html[data-theme="light"] .hero-squadout:hover{
  background:linear-gradient(90deg,rgba(178,110,19,.22),rgba(178,110,19,.09)),rgba(255,255,255,.94);
}
html[data-theme="light"] .hero-squadout .hs-tag{ color:var(--gold-2); }
html[data-theme="light"] .hero-squadout .hs-go{ color:var(--text); }
html[data-theme="light"] .hero-squadout.me{
  background:linear-gradient(90deg,rgba(178,110,19,.24),rgba(178,110,19,.09)),rgba(255,255,255,.94);
  box-shadow:0 8px 28px -14px rgba(178,110,19,.55);
}
html[data-theme="light"] .hero-squadout.me:hover{
  background:linear-gradient(90deg,rgba(178,110,19,.32),rgba(178,110,19,.13)),rgba(255,255,255,.94);
}
/* the personal variant's CTA is a solid gold pill in both themes, so its ink
   stays the pale cream that reads on it */
html[data-theme="light"] .hero-squadout.me .hs-tag{ color:var(--gold-2); }
html[data-theme="light"] .hero-squadout.me .hs-go{ background:var(--gold); color:#FFF3D0; }

/* Glass buttons are built for dark heroes (translucent white). On a light
   surface they vanish, so give them an ink-on-light treatment — then restore
   the white glass inside the dark hero and the blue join band. */
html[data-theme="light"] .btn-glass{ background:rgba(16,26,50,.05); color:var(--text); border-color:var(--border); -webkit-backdrop-filter:none; backdrop-filter:none; }
html[data-theme="light"] .btn-glass:hover{ background:rgba(16,26,50,.10); }
html[data-theme="light"] .hero .btn-glass,
html[data-theme="light"] .join .btn-glass{ background:rgba(255,255,255,.14); color:#fff; border-color:rgba(255,255,255,.34); }
html[data-theme="light"] .hero .btn-glass:hover,
html[data-theme="light"] .join .btn-glass:hover{ background:rgba(255,255,255,.22); }

/* ------------------------------------------------------------
   4. Matches / Upcoming — replace the hard-coded #1F2A41 dividers
   and #13203A hovers with light tokens.
   ------------------------------------------------------------ */
/* The spotlight card loses its blue wash: a tinted gradient is exactly the
   "card announces itself with colour" move this theme replaces with a
   hairline and a corner. */
html[data-theme="light"] .spot{ background:var(--card); }
html[data-theme="light"] .spot-meta{ border-bottom-color:var(--border-2); }
html[data-theme="light"] .spot-cta{ border-top-color:var(--border-2); }
html[data-theme="light"] .spot-info .dot,
html[data-theme="light"] .spot-spots .t.dim{ color:var(--dim); }

html[data-theme="light"] .upc-row{ border-bottom-color:var(--border-2); }
html[data-theme="light"] .upc-row.lk:hover{ background:var(--hover); }
html[data-theme="light"] .upc-reg{ background:rgba(31,79,224,.10); border-color:rgba(31,79,224,.32); color:var(--blue); }
html[data-theme="light"] .upc-reg:hover{ background:var(--blue); color:#fff; }

html[data-theme="light"] .int-row{ border-bottom-color:var(--border-2); }
html[data-theme="light"] .int-row.lk:hover{ background:var(--hover); }
html[data-theme="light"] .int-tag{ background:rgba(31,79,224,.10); border-color:rgba(31,79,224,.32); color:var(--blue); }
html[data-theme="light"] .int-strow{ border-bottom-color:var(--border-2); }
html[data-theme="light"] .rbadge.int{ background:rgba(31,79,224,.10); border-color:rgba(31,79,224,.32); color:var(--blue); }

/* all-results table */
html[data-theme="light"] .rt-row{ border-bottom-color:var(--border-2); }
html[data-theme="light"] .rt-row.lk:hover{ background:var(--hover); }

/* ------------------------------------------------------------
   5. Stats — sticky tab bar, tab chips, podium plinths, list rows.
   ------------------------------------------------------------ */
html[data-theme="light"] .stat-tabs{ background:rgba(255,255,255,.92); border-top-color:var(--border-2); border-bottom-color:var(--border-2); }
html[data-theme="light"] .stat-tab{ background:var(--card); border-color:var(--border); color:var(--muted); }
html[data-theme="light"] .stat-tab:hover{ background:var(--hover); color:var(--text); border-color:var(--divider); }
/* The chosen tab commits to the DEEP NAVY half of the pair rather than the
   royal blue used for links and accents, so "this is the tab you are on"
   never reads as just another blue thing on the page. White on navy is
   15.9:1 — the strongest contrast anywhere in the theme, which is right for
   the one control that states where you are. */
html[data-theme="light"] .stat-tab.active{ background:var(--blue-deep); border-color:var(--blue-deep); color:#fff; }

/* month chips: the dark rule paints the active label in --bg, which in light
   mode is a pale grey on gold (~1.9:1). White on the deep gold clears AA. */
html[data-theme="light"] .potm-chip{ background:var(--card); border-color:var(--border); color:var(--muted); }
html[data-theme="light"] .potm-chip:hover{ color:var(--text); border-color:var(--divider); }
html[data-theme="light"] .potm-chip.dim{ background:transparent; color:var(--muted-2); }
html[data-theme="light"] .potm-chip.active{ background:var(--gold); border-color:var(--gold); color:#FFFFFF; }
html[data-theme="light"] .potm-empty{ color:var(--muted-2); }

/* podium plinths: light tinted blocks with medal-coloured numerals */
html[data-theme="light"] .pod3-col.p1 .pod3-plinth{ background:linear-gradient(180deg,#FBF1D8,#FFFFFF); border-color:var(--draw-bd); color:rgba(178,110,19,.5); }
html[data-theme="light"] .pod3-col.p2 .pod3-plinth{ background:linear-gradient(180deg,#EEF2F8,#FFFFFF); border-color:var(--border); color:rgba(120,135,160,.6); }
html[data-theme="light"] .pod3-col.p3 .pod3-plinth{ background:linear-gradient(180deg,#F3EBE2,#FFFFFF); border-color:#E4C9AE; color:rgba(150,100,60,.55); }

/* full table list */
html[data-theme="light"] .sl-row{ border-top-color:var(--border-2); }
html[data-theme="light"] .sl-row:hover{ background:var(--hover); }
/* The rank chip is a bare numeral now, so only the ink is left to set. A
   near-black base keeps the faded low ranks legible (~3.9:1 on the white panel)
   where --muted would have gone soft under the opacity ramp. .sl-tag needs
   nothing here: its grey cell rides --track/--muted-2, both already remapped
   above, and its position fill is a solid colour with dark ink — the same
   one-token-set-both-themes trick .mcat uses. */
html[data-theme="light"] .sl-rank{ color:var(--text); }
html[data-theme="light"] .sl-bar{ background:var(--track) !important; }
html[data-theme="light"] .sl-meta{ color:var(--muted-2); }

/* player-card popup: keep the collectible card dark & premium (it reads as
   an artefact, not page chrome), just lighten the backdrop + modal shell */
html[data-theme="light"] .pcard-modal{ background:rgba(16,26,50,.45); }
/* The legend picker is modal CHROME, so unlike .save-hold below it follows
   the theme rather than re-asserting the dark tokens — .save-hold stays dark
   because it is displaying an exported image, and this is a sheet of text.
   Only the scrim needs saying; every colour inside it is already a token,
   and both its buttons were built to land in either palette unaided. */
html[data-theme="light"] .sp{ background:rgba(16,26,50,.45); }

/* ------------------------------------------------------------
   6. Match report
   ------------------------------------------------------------ */
html[data-theme="light"] .rep-score{ background:var(--card); border-color:var(--border); }
html[data-theme="light"] .rs-panel.away{ background:var(--panel); }
html[data-theme="light"] .rs-panel.away .rs-team{ color:var(--muted); }
html[data-theme="light"] .rs-abbr{ background:var(--panel); border-color:var(--divider); }
/* the base (un-highlighted) score digit was --dim (2.78:1 on a 50px numeral,
   too low) — .wg/.wr/.dr already tint the winning side via --win/--loss/--gold,
   so the losing/tied side just needs the same readable tier as its team name */
html[data-theme="light"] .rs-sc{ color:var(--muted); }
html[data-theme="light"] .rs-ft{ color:var(--muted-2); }
html[data-theme="light"] .rep-next{ background:var(--panel); border-color:var(--border); }
html[data-theme="light"] .perf2-photo{ background:var(--panel); }
/* This wash stays DARK because it sits over a portrait — so the name on top
   of it has to stay light too. .ln carries no color of its own and .fn reads
   var(--muted-2), so both followed the page into dark navy and disappeared
   into the wash. Same rule the player-card front already follows for the
   same reason: ink over a photo is decided by the photo, not the theme. */
html[data-theme="light"] .perf2-name{ background:linear-gradient(transparent,rgba(16,26,50,.82)); }
html[data-theme="light"] .perf2-name .ln{ color:#fff; }
html[data-theme="light"] .perf2-name .fn{ color:#C4CEDE; }
html[data-theme="light"] .perf2-bar{ background:var(--track); }
html[data-theme="light"] .mpill.disabled{ border-color:var(--border); color:var(--dim); }
/* A media pill is an <a> on a solid saturated fill, and this file's own
   `a{color:var(--blue)}` (0,1,1) outranks .mpill's color:#fff (0,1,0) — so
   the labels went blue on blue and vanished. Restate white at a weight that
   wins; the fill is the same in both themes, so the ink should be too. */
html[data-theme="light"] a.mpill{ color:#fff; }

/* ------------------------------------------------------------
   7. Forms — register (desktop), account, gates, fields.
   ------------------------------------------------------------ */
html[data-theme="light"] .reg-form{ background:var(--card); border-color:var(--border); }
html[data-theme="light"] .fld input,
html[data-theme="light"] .fld select,
html[data-theme="light"] .fld textarea{ background:var(--panel); border-color:var(--border); color:var(--text); }
html[data-theme="light"] .fld input:focus{ border-color:var(--blue); box-shadow:0 0 0 3px rgba(31,79,224,.15); }
/* This is the REGISTER-PAGE TILE (.poschip's other definition, styles.css §
   "position picker"), not the small mono stats chip. It never reached the stats
   chips anyway — those carried an inline style that outranked it — and now that
   the podium's is class-based, .poschip.posfill.* out-specifies this on purpose
   so the tint survives. Left unscoped because it also serves the account page's
   picker, which sits behind sign-in. */
html[data-theme="light"] .poschip{ background:var(--panel); border-color:var(--border); }
html[data-theme="light"] .poschip.on{ background:rgba(31,79,224,.10); box-shadow:0 0 0 2px rgba(31,79,224,.22) inset; }
html[data-theme="light"] .poschip.on b{ color:var(--blue); }
html[data-theme="light"] .gate{ background:var(--card); border-color:var(--border); }
html[data-theme="light"] .reggroup,
html[data-theme="light"] .reggroup-h{ border-color:var(--border); }
html[data-theme="light"] .reggroup-h{ background:var(--panel); }
html[data-theme="light"] .regrow{ border-bottom-color:var(--border-2); }
html[data-theme="light"] .acct-readout{ background:var(--panel); border-color:var(--border); }
html[data-theme="light"] .or-divider{ color:var(--muted-2); }
html[data-theme="light"] .or-divider::before,
html[data-theme="light"] .or-divider::after{ background:var(--border); }

/* Account signed-out card — was a hard-coded dark gradient */
html[data-theme="light"] .acct-card{ background:linear-gradient(180deg,#FFFFFF,#F5F8FD); border-color:var(--border); box-shadow:0 30px 70px -34px rgba(16,26,50,.22); }
html[data-theme="light"] .acct-hero{ border-bottom-color:var(--border); background:radial-gradient(120% 160% at 0% 0%, rgba(31,79,224,.10), transparent 55%); }
html[data-theme="light"] .acct-hero h1{ color:var(--text); }
html[data-theme="light"] .acct-seam{ background:var(--border); }
html[data-theme="light"] .acct-or{ background:#fff; border-color:var(--border); color:var(--muted-2); }
html[data-theme="light"] .acct-col + .acct-col{ border-top-color:var(--border); }
/* solid chip grounds, not translucent tints — these sit ON the account
   hero's radial, and a see-through tint let the gradient dilute the ink's
   contrast to ~4:1. A solid ground makes the ratio a constant. */
html[data-theme="light"] .acct-step{ background:#E8EDFD; border-color:rgba(31,79,224,.30); color:var(--blue); }
html[data-theme="light"] .acct-step.gold{ background:#F3E9D4; border-color:rgba(122,80,8,.35); color:var(--gold-2); }
html[data-theme="light"] .acct-col .fld input,
html[data-theme="light"] .acct-col .fld select,
html[data-theme="light"] .acct-col .fld textarea{ background:var(--panel); border-color:var(--border); }
html[data-theme="light"] .acct-col .fld input:focus{ background:#fff; border-color:var(--blue); }
html[data-theme="light"] .acct-col .poschip{ background:transparent; border-color:var(--border); }
html[data-theme="light"] .acct-col .poschip b{ color:var(--muted-2); }
html[data-theme="light"] .acct-col .poschip.on{ background:rgba(31,79,224,.12); }
html[data-theme="light"] .acct-col .poschip.on b{ color:var(--blue); }
html[data-theme="light"] .btn-google{ background:#fff; color:#1F2430; border-color:#DADCE0; }
html[data-theme="light"] .btn-google:hover{ background:#F5F7FA; }
html[data-theme="light"] .acct-forgot{ color:var(--blue); }

/* ------------------------------------------------------------
   8. Matchday Squad — the readiness hero stays a dark broadcast band
   (it's the page's marquee); everything below goes light.
   ------------------------------------------------------------ */
html[data-theme="light"] .sqs-tile{ background:#fff; border-color:var(--border); }
html[data-theme="light"] .sqs-tile b{ color:var(--text); }
html[data-theme="light"] .sqs-row{ border-color:var(--border); }
html[data-theme="light"] .sqs-row.me{ background:rgba(31,79,224,.07); }
html[data-theme="light"] .sqs-chip.await{ background:var(--panel); border-color:var(--border); color:var(--muted-2); }
html[data-theme="light"] .sqs-pick select{ background:var(--card); border-color:var(--border); color:var(--text); }
html[data-theme="light"] .sqs-notyet,
html[data-theme="light"] .sqs-swaphint{ border-color:var(--border); color:var(--muted); }
/* the "you're on <side>" line keeps its blue tint but needs the light ink */
/* THE POSITION PILL, the same trap as the team builder's: --pos-* is a solid
   FILL under dark ink everywhere else, and here it is ink on a pale tint,
   which in this theme is about 1.6:1. Each drops to the light palette's
   already-darkened member of the same family. */
html[data-theme="light"] .sqs-pp.GK{ color:var(--draw); background:rgba(138,90,16,.11); }
html[data-theme="light"] .sqs-pp.DF{ color:var(--blue); background:rgba(31,79,224,.10); }
html[data-theme="light"] .sqs-pp.MF{ color:var(--win);  background:rgba(11,107,65,.11); }
html[data-theme="light"] .sqs-pp.FW{ color:var(--loss); background:rgba(180,41,28,.10); }
/* Pay now is the page's primary action: --win is a DARK green here, so the
   dark ink the dark theme puts on it would be near-invisible. */
html[data-theme="light"] .sqs-you-cta{ background:var(--win); border-color:var(--win); color:#fff; }
html[data-theme="light"] .sqs-you-cta.done{ background:var(--win-bg); border-color:var(--win-bd); color:var(--win); }
html[data-theme="light"] .sqs-you,
html[data-theme="light"] .sqs-card,
html[data-theme="light"] .sqs-side,
html[data-theme="light"] .sqs-board{ border-color:var(--border); }
html[data-theme="light"] .sqs-you.kitted,
html[data-theme="light"] .sqs-side.mine{ border-color:#9FBBEE; }
html[data-theme="light"] .sqs-wrow{ border-color:var(--border); }
html[data-theme="light"] .sqs-tab{ border-color:var(--border); }
html[data-theme="light"] .sqs-tab.on{ border-color:#9FBBEE; background:rgba(61,123,240,.09); }
/* internal team builder: the armed side and a live drop target */
html[data-theme="light"] .it-side{ border-color:var(--border); }
html[data-theme="light"] .it-side.armed{ border-color:#9FBBEE; background:rgba(61,123,240,.08); }
html[data-theme="light"] .it-side.over{ border-color:var(--win); background:rgba(54,210,123,.12); }
html[data-theme="light"] .it-prow{ border-color:var(--border); }
html[data-theme="light"] .it-prow:hover{ border-color:#9FBBEE; }
/* THE POSITION LETTER IS THE ONE THING THAT DOES NOT SURVIVE THE THEME.
   --pos-gk/def/mid/fwd are used everywhere else as a SOLID FILL under dark
   ink, where a bright hue is exactly right; here they are ink on a pale tint,
   and bright yellow on near-white is about 1.6:1. Each one drops to this
   theme's already-darkened member of the same family — the same four hues the
   result badges and form chips use in light mode. */
html[data-theme="light"] .it-prow.GK .it-pp{ color:var(--draw);  background:rgba(138,90,16,.11); }
html[data-theme="light"] .it-prow.DF .it-pp{ color:var(--blue);  background:rgba(31,79,224,.10); }
html[data-theme="light"] .it-prow.MF .it-pp{ color:var(--win);   background:rgba(11,107,65,.11); }
html[data-theme="light"] .it-prow.FW .it-pp{ color:var(--loss);  background:rgba(180,41,28,.10); }
/* Same problem one level up: the banner's label chip tinted itself with the
   DARK theme's bright amber, which is invisible against --draw-bg here. */
html[data-theme="light"] .it-gap-t{ background:rgba(138,90,16,.12); }
html[data-theme="light"] .it-gap.ok .it-gap-t{ background:rgba(11,107,65,.12); }
html[data-theme="light"] .it-cov{ border-color:var(--border); }
html[data-theme="light"] .it-cov-bar{ background:var(--border); }
html[data-theme="light"] .it-drop{ border-color:var(--border); }
html[data-theme="light"] .it-tab{ border-color:var(--border); }
html[data-theme="light"] .it-tab.on{ border-color:#9FBBEE; background:rgba(61,123,240,.09); }
/* Publish was near-white ink (#EAFBF0) on --win-bd, which is a dark green in
   this theme's dark counterpart and a PALE one here — about 1.2:1, i.e. not
   readable. The page's primary action fills solid instead. */
html[data-theme="light"] .it-go{ background:var(--win); border-color:var(--win); color:#fff; }
html[data-theme="light"] .sqs-prog{ background:var(--bg); }
/* pengurus-tools buttons + the "Call up →" promote pill — both hardcode a
   near-white text color in styles.css that only ever looked right against
   the shipped dark --panel/--win-bg; needs an explicit repaint here */
html[data-theme="light"] .sqs-admbtn{ color:var(--text); }
html[data-theme="light"] .sqs-callup{ color:var(--win); }
html[data-theme="light"] .sqs-wpick-lbl{ color:var(--muted); }

/* ------------------------------------------------------------
   9. Manage admin console — the mobile menu (rail list) + topbar.
   Most of it is tokenised; these cover the hard-coded shells.
   ------------------------------------------------------------ */
html[data-theme="light"] .mc-topbar{ background:var(--panel); border-bottom-color:var(--border); }
html[data-theme="light"] .mc-wordmark{ color:var(--text); }
html[data-theme="light"] .mc-center{ background:var(--bg); }
html[data-theme="light"] .mc-navitem{ border-bottom-color:var(--border-2); color:var(--muted); }
/* ≤720px the active row is a flat list item (styles.css nulls the blue fill
   there) and dark ink is right; above that the blue fill stands, so the ink
   must stay white — this file's first pass darkened it there too (~3.2:1). */
html[data-theme="light"] .mc-navitem.active{ color:var(--text); }
@media(min-width:721px){
  html[data-theme="light"] .mc-navitem.active{ color:#fff; }
}
html[data-theme="light"] .mc-menutitle{ color:var(--text); }
html[data-theme="light"] .mc-link{ background:var(--card); border-color:var(--border); color:var(--muted); }
html[data-theme="light"] .mc-navitem[data-tab]::after{ color:var(--dim); }
html[data-theme="light"] .mc-center .mng-card{ background:transparent; }
html[data-theme="light"] .mng-card{ background:var(--card); border-color:var(--border); }
html[data-theme="light"] .mng-fld input,
html[data-theme="light"] .mng-fld select,
html[data-theme="light"] .mc-center .mng-fld input,
html[data-theme="light"] .mc-center .mng-fld select{ background:var(--panel); border-color:var(--border); color:var(--text); }
/* member-detail bottom sheet (Members tab → tap a row) — its own text is
   already tokenised (var(--text)/var(--dim)/var(--muted-2)), but the sheet's
   background was a hardcoded dark navy with no light.css coverage at all */
html[data-theme="light"] .sld-sheet-panel{ background:var(--card); }

/* ------------------------------------------------------------
   10. Header theme toggle (added by theme-toggle.js). A small
   sun/moon pill that matches the .signin control language.
   ------------------------------------------------------------ */
.theme-toggle{
  display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:42px; flex:none; border-radius:10px; cursor:pointer;
  border:1px solid rgba(255,255,255,.28); background:rgba(255,255,255,.12);
  color:#fff; font-size:17px; line-height:1; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  transition:.15s;
}
.theme-toggle:hover{ background:rgba(255,255,255,.2); }
/* on a light bar (not over a hero) the toggle takes ink colours */
html[data-theme="light"] .site-header:not(.over-hero) .theme-toggle{
  border-color:var(--border); background:var(--card); color:var(--text);
}
html[data-theme="light"] .site-header:not(.over-hero) .theme-toggle:hover{ background:var(--panel); }
@media(max-width:480px){ .theme-toggle{ width:38px; height:38px; font-size:16px; } }

/* ------------------------------------------------------------
   11. Appearance control (Profile → 04 Appearance). Deliberately
   its OWN class: .poschip has two competing definitions in
   styles.css and reusing it renders a 46x39 pointer chip on a
   phone. Base rules are unscoped — they style the control in dark
   mode too — exactly like the .theme-toggle block above, so this
   file is a hard dependency for the control, not just a skin.
   ------------------------------------------------------------ */
.thseg{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:4px; }
.thseg-opt{
  display:flex; flex-direction:column; align-items:flex-start; gap:2px;
  background:var(--bg); border:1px solid var(--border); border-radius:10px;
  padding:12px 14px; cursor:pointer; transition:.15s; text-align:left;
  font:inherit; color:inherit;            /* <button> resets its own font */
}
.thseg-opt b{ font-family:var(--mono); font-weight:700; font-size:13px; letter-spacing:.04em; }
.thseg-opt i{ font-style:normal; font-size:11.5px; color:var(--muted-2); }
.thseg-opt:hover{ border-color:var(--blue-light); }
.thseg-opt.on{
  border-color:var(--blue); background:rgba(61,123,240,.14);
  box-shadow:0 0 0 2px rgba(61,123,240,.25) inset;
}
.thseg-opt.on b{ color:var(--blue-light); }
.thseg-opt:disabled{ opacity:.5; cursor:default; }
.thseg-opt:disabled:hover{ border-color:var(--border); }
.thseg-opt:focus-visible{ outline:2px solid var(--blue); outline-offset:2px; }
html[data-theme="light"] .thseg-opt{ background:var(--panel); border-color:var(--border); }
/* border-color must be restated here: the rule above is (0,2,1) and would
   otherwise out-rank the unscoped .thseg-opt.on (0,2,0), leaving the selected
   segment with a plain grey edge in light mode. */
html[data-theme="light"] .thseg-opt.on{
  border-color:var(--blue); background:rgba(31,79,224,.10);
  box-shadow:0 0 0 2px rgba(31,79,224,.22) inset;
}
html[data-theme="light"] .thseg-opt:hover{ border-color:var(--blue-light); }
html[data-theme="light"] .thseg-opt:disabled:hover{ border-color:var(--border); }
html[data-theme="light"] .thseg-opt.on b{ color:var(--blue); }
@media(max-width:480px){
  .thseg-opt{ padding:11px 10px; }
  .thseg-opt i{ font-size:11px; }
}

/* ------------------------------------------------------------
   12. AA sweep — dark literals that never had a light treatment.
   Found by a WCAG contrast audit of every text node on every view
   plus a full inventory of styles.css literal colors: each rule
   below is a dark-mode hex that leaked into light mode (a dark
   pane on the light page, white ink on a pale tint, or a hover
   that painted a dark block). Same language as the sections
   above: pale ground, deep ink, tokened borders.
   ------------------------------------------------------------ */
/* chrome. The deepened gold flips two ink relationships: near-black ink was
   right on the BRIGHT dark-mode gold, but on #8F5E09 it reads ~3.4:1 — the
   fill is now dark enough that these need white (5.6:1). */
html[data-theme="light"] .shead .num.gold{ color:#fff; }
html[data-theme="light"] .btn-gold{ color:#fff; }
/* .tag is ONLY ever emitted inside <header class="hero">, and §1 re-asserts the
   dark --blue on that subtree — so this rule was resolving var(--blue) to
   #3D7BF0 in the hero's context and quietly reinstating the 3.97:1 it was
   written to fix. It also out-specifies .scorebug .tag (0,2,1 vs 0,2,0), so it
   would have defeated the --blue-fill sweep too. Pointed at the fill token,
   which is #2F6BE0 in the hero in both themes. */
html[data-theme="light"] .tag{ background:var(--blue-fill); }
html[data-theme="light"] .nfx-vs i{ color:var(--dim); }                     /* was the DARK theme's --dim on a white card */
html[data-theme="light"] .spot-center{ border-top-color:var(--border-2); }  /* mobile.css hard-codes #1F2A41, phone-only */
html[data-theme="light"] .panel-head.lk:hover .lbl{ color:var(--text); }    /* hover inked #fff on the white label chip */

/* register — the selected match card and the "Registering for …" pill carry
   INLINE styles from register.js, so both need !important. The [style*=] hook
   keys on the inline radial that only the SELECTED card has; unselected cards
   keep their plain inline var(--card). The <b> rule resolves through var() on
   purpose: inside a dark-token subtree it stays near-white, on light it inks
   dark — one rule, right on both grounds. */
/* The selected match chip. It used to be a blue WASH; here the card stays
   white like every other one and ROYAL BLUE does the selecting — a coloured
   edge plus a ring, which is the same "control work" language as the primary
   button and the focus state. The [style*=] hook still keys on the inline
   radial that only the selected card carries, so unselected chips (plain
   inline var(--card)) are untouched by construction. */
html[data-theme="light"] .match-card[style*="radial-gradient"]{
  background:var(--card) !important;
  border-color:var(--blue) !important;
  box-shadow:0 0 0 2px rgba(31,79,224,.20) !important;
}
/* The same idea for the two match HERO cards (phone spotlight + the detail
   card): register.js washes their top-left corner from a dark navy into
   var(--card). Against the shipped dark theme that is a highlight; on a white
   page it is a grey smudge across the crest and the opponent's name. Keyed on
   the navy literal itself, which only those two carry. */
html[data-theme="light"] #app div[style*="#16233F"]{ background:var(--card) !important; }
html[data-theme="light"] #app b[style*="color:#fff"]{ color:var(--text) !important; }

/* matches table — styles.css uses !important on these two, so match it */
html[data-theme="light"] .mt-row:hover{ background:var(--hover) !important; }
html[data-theme="light"] #matchRoot input:focus{ background:#fff !important; border-color:var(--blue); }
html[data-theme="light"] .int-strow.lead{ background:rgba(143,94,9,.10); }  /* 5% gold was invisible on white */

/* stats. NOT touched: .pod3-ava .ph / .sl-ava — their navy is only a
   fallback; the real disc color arrives inline from JS per name, dark with
   white initials in both themes, self-contained like the category badges. */
html[data-theme="light"] .sl-bar>span{ background:linear-gradient(90deg,rgba(31,79,224,.35),var(--blue)); }

/* match report */
html[data-theme="light"] .perf2.motm{ border-color:var(--draw-bd); }

/* account */
html[data-theme="light"] .acct-col .poschip:hover{ border-color:var(--divider); }
html[data-theme="light"] .acct-readout .acct-edit:hover{ color:var(--blue-deep); }
html[data-theme="light"] .acct-forgot:hover{ color:var(--blue-deep); }

/* matchday squad + upcoming — the "I'm in"/"Call up" family inked a pale
   cream (#EAFBF0) built for the DARK green tint; on the light tint it
   vanished. Withdraw/remove wore the dark maroon border. */
html[data-theme="light"] .sqs-you-in{ color:var(--win); }
html[data-theme="light"] .sqs-callup:hover{ background:rgba(31,79,224,.12); }
html[data-theme="light"] .sqs-you-b.out,
html[data-theme="light"] .sqs-rem{ border-color:var(--loss-bd); color:var(--loss); }
html[data-theme="light"] .sqs-you-b.out:hover,
html[data-theme="light"] .sqs-rem:hover{ background:rgba(180,41,28,.10); }
/* the ↓ beside it is the neutral one of the pair — a white wash and a near-white
   ink both disappear on the light ground, same fix as .sqs-wpick-x below */
html[data-theme="light"] .sqs-bench{ color:var(--muted); }
html[data-theme="light"] .sqs-bench:hover{ background:rgba(16,26,50,.06); color:var(--text); }
html[data-theme="light"] .sqs-err{ color:var(--loss); }
html[data-theme="light"] .sqs-gate p{ color:var(--muted); }
html[data-theme="light"] .sqs-progline{ color:var(--muted-2); }
html[data-theme="light"] .sqs-wrow.me{ background:rgba(31,79,224,.07); }
html[data-theme="light"] .sqs-wpick{ border-top-color:var(--border-2); }
html[data-theme="light"] .sqs-wpick-lbl{ color:var(--muted); }
html[data-theme="light"] .sqs-wpick-lbl b{ color:var(--text); }
html[data-theme="light"] .sqs-wpick select{ color:var(--text); }
html[data-theme="light"] .sqs-wpick-x:hover{ background:rgba(16,26,50,.06); color:var(--text); }
html[data-theme="light"] .upc-squad{ background:var(--card); color:var(--muted); }
html[data-theme="light"] .upc-squad:hover{ background:var(--hover); color:var(--text); }
html[data-theme="light"] .board-locked-note .bln-main{ color:var(--muted); }

/* manage — classic console */
html[data-theme="light"] .mng-savebar{ background:rgba(245,248,253,.94); }
html[data-theme="light"] .mng-del:hover{ background:rgba(180,41,28,.10); }
html[data-theme="light"] .mng-record:hover{ background:rgba(11,107,65,.12); }
html[data-theme="light"] .mng-ghead:hover{ background:var(--hover); }
html[data-theme="light"] .mng-xl-err{ color:var(--loss); }

/* manage — admin console: whole panes stayed dark navy */
html[data-theme="light"] .mc-savebar{ background:linear-gradient(180deg,rgba(245,248,253,.94),var(--panel)); }
html[data-theme="light"] .mc-preview{ background:var(--panel); }
html[data-theme="light"] .mc-modal{ background:var(--card); }
@media(min-width:721px){
  html[data-theme="light"] .mc-navitem:hover{ background:var(--hover); }  /* ≤720px styles.css nulls hover paint for touch — keep that */
}
html[data-theme="light"] .mc-audrow:hover{ background:rgba(16,26,50,.04); }
html[data-theme="light"] .mc-audmore{ color:var(--blue); }
html[data-theme="light"] .mc-audrole.sys{ color:var(--draw); border-color:var(--draw-bd); }

/* member saldo + member picker — maroon/olive borders built for dark, and
   rgba(255,255,255,…) ghost fills that are no-ops on a white sheet */
html[data-theme="light"] .sld-owe,
html[data-theme="light"] .sld-badge.is-loss,
html[data-theme="light"] .sld-susp{ border-color:var(--loss-bd); }
html[data-theme="light"] .sld-badge.is-gold,
html[data-theme="light"] .sld-review{ border-color:var(--draw-bd); }
html[data-theme="light"] .sld-msg.is-ok{ border-color:var(--win-bd); }
html[data-theme="light"] .sld-msg.is-err{ border-color:var(--loss-bd); }
html[data-theme="light"] .sld-actbtn.is-ghost,
html[data-theme="light"] .sld-quick-topup.is-off,
html[data-theme="light"] .sld-quick-ico,
html[data-theme="light"] .sld-seg,
html[data-theme="light"] .pst-acct-btn,
html[data-theme="light"] .pst-add{ background:rgba(16,26,50,.05); }
html[data-theme="light"] .sld-quick-ico.is-danger{ border-color:var(--loss-bd); }

/* ------------------------------------------------------------
   13. Always-dark artifacts. The hero (§1) set the pattern: some
   surfaces are shipped ARTWORK, not page chrome, and they keep
   the dark palette in light mode by re-asserting the dark tokens
   on their subtree. Three more join it:
     · the player card — BOTH faces. The front was protected by
       its photo; the back is tokenised and half-flipped (a
       #16233b→white header gradient, pale pills, marginal gold on
       white). The downloaded PNG is ALWAYS the dark card, and the
       screen must stay a truthful preview of what gets saved.
     · the press-and-hold save panel — a lightbox; its caption
       reads var(--muted), which had gone near-black on the dark
       overlay.
     · the avatar cropper — its dialog hard-codes the dark navy
       box, so its tokenised labels and buttons must resolve dark
       to be seen against it.
     · the article photo viewer — the same argument as the save
       panel, one surface further: it exists to show a photograph
       at full size, and a white bar under it would light up the
       room the picture is being read in.
     · the teamsheet pitch — floodlit turf IS the artwork, and its
       position chips fill with var(--gold)/var(--draw) under dark
       ink, which the deepened light gold would have broken.
   Values are styles.css :root verbatim, so these render pixel-
   identical to dark mode. The explicit `color` matters: descendants
   that only INHERIT ink got body's already-resolved light navy —
   inheritance carries computed values, not var() lookups. §1's hero
   block solves the same trap the same way. */
html[data-theme="light"] .pcard,
html[data-theme="light"] .save-hold,
html[data-theme="light"] .avc-ovl,
html[data-theme="light"] .stz,
html[data-theme="light"] .pitch{
  --text:#EEF3FB; --muted:#C4CEDE; --muted-2:#9DAAC0; --dim:#828FA8;
  --card:#111B2E; --panel:#0A1326; --border:#25324A; --border-2:#1A2336; --divider:#2C3A55;
  --blue:#3D7BF0; --blue-fill:#2F6BE0; --blue-light:#5C95F5; --blue-deep:#1B3C8C; --gold:#F5C542; --gold-2:#E0B528;
  --blue-bg:#0E1D3A; --blue-bd:#2F5BB0;
  --win:#36D27B; --win-bg:#11271B; --win-bd:#1E5237;
  --draw:#E0B528; --draw-bg:#2A2410; --draw-bd:#5A4A12;
  --loss:#F0584B; --loss-bg:#2A1412; --loss-bd:#5A2420;
  --medal-1-ink:#F5C542; --medal-2-ink:#C9D2E0; --medal-3-ink:#C08457;
  /* Geometry, not just colour. The card is a fixed 300x424 artefact and
     playercard-export.js mirrors it at 3x with the corner hard-coded as
     R = 14 * S — its own comment says "every CSS length below is just the
     stylesheet's value x 3". Light mode's generous radii are a decision about
     PAGE CHROME, and letting them reach in here gave the on-screen card 18px
     corners against a PNG that still had 14px. Exactly two rules inside this
     island read the token, and both are the card artefact: .pcard-face, and
     .save-hold-img, which is the exported PNG itself on display. --r-card-lg
     is deliberately not restated — nothing in this subtree reads it, and the
     one place that does (.mng-card) is page chrome with no PNG to match. */
  --r-card:14px;
  color:var(--text);
}
/* ---- …except the card's BACK, which follows the theme ----
   The island above keeps the FRONT dark, and that part of the reasoning still
   holds: it is a photo card, and ink over a portrait is decided by the
   portrait, not the theme. The back is not a photo. It is a data sheet — name,
   honours key, stat strip — and on a white page it belongs to the page.

   These are §the token block's own light values restated on the back's
   subtree. They out-resolve the island because a custom property resolves from
   the NEAREST ancestor that sets it, and .pcard-back is inside .pcard.
   .pcard-face's `background:var(--card)` needs no restating for the same
   reason: it re-resolves against the --card set here.

   The explicit `color` is load-bearing, exactly as on the island itself: ten
   elements on this face declare no colour of their own and would otherwise go
   on inheriting the island's already-computed #EEF3FB. Inheritance carries
   computed values, not var() lookups.

   Colour only in here. .pcard-tilt/.pcard-flip carry transform-style:
   preserve-3d, and a filter, opacity below 1, backdrop-filter, mix-blend-mode
   or clip-path on this element would flatten that context and let the back
   bleed through the front. --cs must not be touched either: every length on
   this face is calc(N * var(--cs)).

   playercard-export.js has a matching light path for backSVG, so the download
   still matches what is on screen — see the note on the palette there. */
html[data-theme="light"] .pcard-back{
  --text:#14161A; --muted:#474B54; --muted-2:#585D67; --dim:#6A6F79;
  --card:#FFFFFF; --panel:#F6F7F9; --border:#DCDFE5; --border-2:#EAECF0; --divider:#C9CDD5;
  --blue:#1F4FE0; --blue-fill:#1F4FE0; --blue-light:#1A44C9; --blue-deep:#122045;
  --gold:#8F5E09; --gold-2:#7A5008;
  --win:#0B6B41;  --win-bg:#E4F5EC;  --win-bd:#AEE0C4;
  --draw:#8A5A10; --draw-bg:#FAF0D6; --draw-bd:#E9D096;
  --loss:#B4291C; --loss-bg:#FCE8E5; --loss-bd:#F2B7B0;
  color:var(--text);
  /* the frame stays dark so the light face still reads as a collectible
     artefact rather than a page panel that has come loose */
  border-color:#25324A;
  box-shadow:0 24px 48px -20px rgba(20,22,26,.45);
}
/* The two literals in the back's own rules, which no token flip can reach.
   #16233b→var(--card) is the half-flip the island comment describes: leave it
   and the header runs navy into white under near-black type. */
html[data-theme="light"] .pcard-back .pcard-bhead{ background:linear-gradient(180deg,#EEF2F8,var(--card)); }
html[data-theme="light"] .pcard-back .pcard-hhead i{ background:linear-gradient(90deg,rgba(26,68,201,.5),transparent); }
/* The accent edge keeps the BRIGHT dark-mode gold. Under the tokens above it
   would deepen to #8F5E09 and stop reading as an edge. */
html[data-theme="light"] .pcard-back .pcard-strip.rev{ background:linear-gradient(90deg,#F5C542,#3D7BF0); }

/* The card modal's ✕ / Download / Share sit OUTSIDE .pcard on the light
   backdrop, and their dark-navy shells kept dark-slate light-mode ink
   (2.06:1 — the worst button on the site). Light buttons, same control
   language as the light bar. */
html[data-theme="light"] .pcard-modal-x,
html[data-theme="light"] .pcard-modal-dl,
html[data-theme="light"] .pcard-modal-sh{ background:var(--card); border-color:var(--border); color:var(--muted); }
html[data-theme="light"] .pcard-modal-x:hover,
html[data-theme="light"] .pcard-modal-dl:hover,
html[data-theme="light"] .pcard-modal-sh:hover{ color:var(--text); border-color:var(--blue-light); }

/* ------------------------------------------------------------
   14. Signed-in surfaces whose colors arrive as INLINE styles
   from JS (register, squad, auth, manage, payments). An inline
   style beats any stylesheet, so every override here carries
   !important — and each hook keys on a class/id PLUS the literal
   that only the broken state embeds, so an element's other
   states are untouchable by construction.
   ------------------------------------------------------------ */
/* register — the "you're registered" state of both CTAs inks a pale mint
   (#8FEFB6 / white) that was built for the DARK green tint; on the light
   tint it vanishes. Same win-on-win-bg treatment as .sqs-you-in. */
html[data-theme="light"] .mreg-cta[style*="#8FEFB6"]{
  background:var(--win-bg) !important; color:var(--win) !important;
}
html[data-theme="light"] .mt-submit[style*="--win-bd"]{
  background:var(--win-bg) !important; color:var(--win) !important;
  border:1px solid var(--win-bd) !important;
}
/* Same pale mint, same tokened green ground, but written by payStripHTML as
   plain .lk spans ("Pay from saldo →", "✓ I'll be there") rather than as a
   .mt-submit — so the rule above never reached them and they were still near
   -white ink on a pale green pill (~1.3:1) once the ground went light. Keyed
   on the ink literal itself, which is what these two carry and the selector
   above does not. Signed-in only, so no runtime audit reaches this state —
   verified by reading register.js, not by measurement. */
html[data-theme="light"] #app [style*="#EAFBF0"]{
  background:var(--win-bg) !important; color:var(--win) !important;
  border-color:var(--win-bd) !important;
}
/* register — the unselected date chip on a match card, and the trough of the
   "squad of 16" progress bar, are both the dark navy literal #0D1526. On the
   old faintly-blue page they read as inset; on a white one they are a hole,
   and the chip's var(--muted-2) date sat on them at 2.8:1 — the only AA
   failure left on these five pages. Each hook keys on the literal PLUS the
   declaration that follows it, which is what tells the two apart and keeps
   both off the position popover (same navy, its own rule below). */
html[data-theme="light"] #app [style*="#0D1526;border"]{
  background:var(--card) !important; border-color:var(--border) !important;
}
html[data-theme="light"] #app [style*="#0D1526;overflow"]{ background:var(--track) !important; }
/* register — the position dropdown hard-codes a dark popover shell, but its
   option inks are all tokens: re-grounding the shell light is the whole fix */
html[data-theme="light"] #mtPosMenu{
  background:var(--card) !important; border-color:var(--border) !important;
  box-shadow:0 -14px 34px -12px rgba(16,26,50,.28) !important;
}
html[data-theme="light"] #mtPosMenu .opt{ border-top-color:var(--border-2) !important; }
/* the "emergency contact" warning bolds (register + team selection) and the
   selection board's "dropped" tag wear pale dark-mode golds on light tints */
html[data-theme="light"] #app b[style*="#F0C36B"]{ color:var(--gold-2) !important; }
html[data-theme="light"] .pc-tag[style*="#F0A94B"]{ color:var(--draw) !important; }
/* suspended-member banner: its tint is tokened (goes pale in light) but its
   ink is a literal pale rose picked for the dark tint */
html[data-theme="light"] #suspNotice{ color:var(--loss) !important; }
/* manage — "waiting for a new password" heading, gold on a gold-tinted box */
html[data-theme="light"] .mng-card div[style*="#D4AF37"]{ color:var(--gold-2) !important; }
/* NOT touched, deliberately: the stale-build banner (manage.js) and the
   temporary-password banner (auth.js). Both ship ink and ground together as
   one dark literal pair, so they read identically over any theme. */

/* payments reconcile (Manage → match fee) — a dark console through and
   through: rows, tiles and buttons hard-code dark surfaces while the inks
   are tokens that would resolve to light-mode values on them. Re-grounding
   every emitted surface blind is redesign, not repair — it joins §13's
   always-dark artifacts instead, so its token inks resolve back to the dark
   values the surfaces were built around. :has() paints the hosting card dark
   so no white frame peeks between the dark rows; a browser without :has()
   still gets readable rows from the #payRoot token scope alone. */
html[data-theme="light"] #payRoot,
html[data-theme="light"] .mng-card:has(#payRoot){
  --text:#EEF3FB; --muted:#C4CEDE; --muted-2:#9DAAC0; --dim:#828FA8;
  --card:#111B2E; --panel:#0A1326; --border:#25324A; --border-2:#1A2336; --divider:#2C3A55;
  --blue:#3D7BF0; --blue-fill:#2F6BE0; --blue-light:#5C95F5; --blue-deep:#1B3C8C; --gold:#F5C542; --gold-2:#E0B528;
  --blue-bg:#0E1D3A; --blue-bd:#2F5BB0;
  --win:#36D27B; --win-bg:#11271B; --win-bd:#1E5237;
  --draw:#E0B528; --draw-bg:#2A2410; --draw-bd:#5A4A12;
  --loss:#F0584B; --loss-bg:#2A1412; --loss-bd:#5A2420;
  color:var(--text);
}
html[data-theme="light"] .mng-card:has(#payRoot){ background:#0A1326; border-color:#25324A; }

/* ---- the ORIGINAL squad page (external fixtures) ----
   Its own light-mode set, scoped under .sqs-legacy. These are the rules the
   redesign retired; the legacy path still renders that markup, so they are
   restored rather than reinstated globally — .sqs-row and friends mean two
   different things depending on which layout is on screen. */
html[data-theme="light"] .sqs-legacy .sqs-strip{ display:none; }
html[data-theme="light"] .sqs-legacy .sqs-prog{ background:var(--track); }
html[data-theme="light"] .sqs-legacy .sqs-hero{ background:linear-gradient(125deg,#1B3559,#122045); }
html[data-theme="light"] .sqs-legacy .sqs-ready{ border-color:var(--border); }
html[data-theme="light"] .sqs-legacy .sqs-stats{ background:var(--panel); }
html[data-theme="light"] .sqs-legacy .sqs-tile{ background:#fff; border-color:var(--border); }
html[data-theme="light"] .sqs-legacy .sqs-tile b{ color:var(--text); }
html[data-theme="light"] .sqs-legacy .sqs-groupcard{ background:var(--card); border-color:var(--border); }
html[data-theme="light"] .sqs-legacy .sqs-row{ border-top-color:var(--border-2); }
html[data-theme="light"] .sqs-legacy .sqs-name{ color:var(--text); }
html[data-theme="light"] .sqs-legacy .sqs-row.me{ background:rgba(31,79,224,.07); }
html[data-theme="light"] .sqs-legacy .sqs-chip.await{ background:var(--panel); border-color:var(--border); color:var(--muted-2); }
html[data-theme="light"] .sqs-legacy .sqs-pick select{ background:var(--card); border-color:var(--border); color:var(--text); }
html[data-theme="light"] .sqs-legacy .sqs-sh-lbl{ background:var(--card); border-color:var(--border); }
html[data-theme="light"] .sqs-legacy .sqs-notyet,
html[data-theme="light"] .sqs-legacy .sqs-swaphint{ border-color:var(--border); color:var(--muted); }
html[data-theme="light"] .sqs-legacy .sqs-tab{ border-color:var(--border); }
html[data-theme="light"] .sqs-legacy .sqs-tab.on{ border-color:#9FBBEE; background:rgba(61,123,240,.09); }
html[data-theme="light"] .sqs-legacy .sqs-prog{ background:var(--bg); }
html[data-theme="light"] .sqs-legacy .sqs-admbtn{ color:var(--text); }
html[data-theme="light"] .sqs-legacy .sqs-callup{ color:var(--win); }
html[data-theme="light"] .sqs-legacy .sqs-wpick-lbl{ color:var(--muted); }
html[data-theme="light"] .sqs-legacy .sqs-b.in{ color:var(--win); }
html[data-theme="light"] .sqs-legacy .sqs-b.in:hover,
html[data-theme="light"] .sqs-legacy .sqs-callup:hover{ background:rgba(11,107,65,.16); }
html[data-theme="light"] .sqs-legacy .sqs-b.out,
html[data-theme="light"] .sqs-legacy .sqs-rem{ border-color:var(--loss-bd); color:var(--loss); }
html[data-theme="light"] .sqs-legacy .sqs-b.out:hover,
html[data-theme="light"] .sqs-legacy .sqs-rem:hover{ background:rgba(180,41,28,.10); }
html[data-theme="light"] .sqs-legacy .sqs-bench{ color:var(--muted); }
html[data-theme="light"] .sqs-legacy .sqs-bench:hover{ background:rgba(16,26,50,.06); color:var(--text); }
html[data-theme="light"] .sqs-legacy .sqs-err{ color:var(--loss); }
html[data-theme="light"] .sqs-legacy .sqs-gate p{ color:var(--muted); }
html[data-theme="light"] .sqs-legacy .sqs-progline{ color:var(--muted-2); }
html[data-theme="light"] .sqs-legacy .sqs-wrow.me{ background:rgba(31,79,224,.07); }
html[data-theme="light"] .sqs-legacy .sqs-wpick{ border-top-color:var(--border-2); }
html[data-theme="light"] .sqs-legacy .sqs-wpick-lbl{ color:var(--muted); }
html[data-theme="light"] .sqs-legacy .sqs-wpick-lbl b{ color:var(--text); }
html[data-theme="light"] .sqs-legacy .sqs-wpick select{ color:var(--text); }
html[data-theme="light"] .sqs-legacy .sqs-wpick-x:hover{ background:rgba(16,26,50,.06); color:var(--text); }

/* ==================================================================
   CLUB PARTNERS — light mode
   ------------------------------------------------------------------
   The plate does NOT flip. Its whole reason for existing is that three
   of the eight marks are navy ink and one is yellow on transparent, so
   a dark ground loses half the roster whatever the theme says. What
   changes is SEPARATION: against #070C18 the plate reads as a change of
   stock, and against a white page it has nothing to read against.

   The complication is that this theme hides every .accent-strip (see
   the note further up — the hairline says "card" here, so the bar is
   noise). That strip is the match plate's only top edge, and the
   fixture plate deliberately has none at all, so both would arrive
   seamless on exactly the page where a seam is the whole separating
   device. They take the hairline instead.
   ================================================================== */
/* The plate goes PURE WHITE here rather than keeping the #F6F7F9 it has on
   the dark site. That grey IS this theme's --panel, and the two flush plates
   land straight on it: the spotlight's CTA strip and the report's away score
   panel are both --panel, so the plate stopped reading as a different
   material and became one more grey row. White lifts off every ground it
   meets — the two panels above, the spotlight card, and the band below. */
html[data-theme="light"]{ --sup-plate:#FFFFFF; }
html[data-theme="light"] .spot .sup-plate.sup-fixture,
html[data-theme="light"] .mt-fixcard .sup-plate.sup-fixture,
html[data-theme="light"] .sup-plate.sup-match{ border-top:1px solid var(--border-2); }
/* The award plate stands free on the page rather than closing a card, so it
   takes the hairline all round. It goes on the WRAPPER, which is what clips
   the 12px corners — a border on the plate inside would be cut by that clip.
   Its gold seam is not an .accent-strip and survives, so the top edge is
   already spoken for and the border only has to finish the other three. */
html[data-theme="light"] .sup-award-wrap{ border:1px solid var(--border-2); border-top:none; }
/* The band takes the recessed grey, so its two white tiers come forward on
   it — the same relationship they have on the dark site, where the band sits
   back on the page and the plates are the light thing standing on it. It also
   puts the band on the footer's OWN ground, so the footer reads as one
   surface instead of stepping from white to grey halfway down. */
html[data-theme="light"] .sup-band{ background:var(--panel); }
html[data-theme="light"] .sup-tier{ border:1px solid var(--border-2); }