/* ── Base color tokens (needed by mobile which doesn't load styles.css) ── */
:root {
  --black:        #0f172a;
  --wordmark:     #1e293b;
  --white:        #ffffff;
  --off-white:    #f8fafc;
  --border:       #e2e8f0;
  --mid-gray:     #64748b;
  --light-gray:   #cbd5e1;
  --accent:       #e11d48;
  --border-panel: #e2e8f0;
}
[data-theme="dark"] {
  --black:        #f1f5f9;
  --wordmark:     #e2e8f0;
  --white:        #0f172a;
  --off-white:    #1e293b;
  --border:       #334155;
  --mid-gray:     #94a3b8;
  --light-gray:   #475569;
  --accent:       #fb7185;
  --border-panel: #334155;
}

/* ═══════════════════════════════════════════════════════════
   Dark theme — hardcoded color overrides
   Covers: auth_modal.css, how_it_works_modal.css,
   pick_matrix.css, mobile.css, and styles.css outliers
   that bypass :root custom properties.

   The [data-theme="dark"] block in styles.css handles all
   var() references automatically. This file only overrides
   selectors with hardcoded hex values.
═══════════════════════════════════════════════════════════ */

/* ── styles.css outliers ──────────────────────────────── */
[data-theme="dark"] nav a:hover { color: #94a3b8; }

/* ── Auth modal ───────────────────────────────────────── */
[data-theme="dark"] .auth-card {
  background: #1e293b;
  border-color: #334155;
}
[data-theme="dark"] .auth-card,
[data-theme="dark"] .auth-title,
[data-theme="dark"] .auth-close:hover,
[data-theme="dark"] .auth-tab.active,
[data-theme="dark"] .auth-tab:hover,
[data-theme="dark"] .auth-field label,
[data-theme="dark"] .auth-field input,
[data-theme="dark"] #nav-auth-btn {
  color: #f1f5f9;
}
[data-theme="dark"] #nav-auth-btn:hover {
  color: #94a3b8;
}
[data-theme="dark"] .auth-close,
[data-theme="dark"] .auth-tab,
[data-theme="dark"] .auth-hint,
[data-theme="dark"] .auth-events-hint {
  color: #94a3b8;
}
[data-theme="dark"] .auth-header {
  border-bottom-color: #334155;
}
[data-theme="dark"] .auth-tabs {
  border-bottom-color: #334155;
}
[data-theme="dark"] .auth-tab.active {
  border-bottom-color: #f1f5f9;
}
[data-theme="dark"] .auth-field input {
  background: #0f172a;
  border-color: #334155;
}
[data-theme="dark"] .auth-field input::placeholder {
  color: #475569;
}
[data-theme="dark"] .auth-field input:focus {
  border-color: #f1f5f9;
}
[data-theme="dark"] .auth-submit {
  color: #0f172a;
  background: #f1f5f9;
}
[data-theme="dark"] .auth-submit:hover {
  background: #cbd5e1;
}
[data-theme="dark"] .auth-msg.error {
  color: #fb7185;
}
[data-theme="dark"] .auth-msg.success {
  color: #4ade80;
}
[data-theme="dark"] .auth-events {
  border-top-color: #334155;
}
[data-theme="dark"] .auth-evt-box {
  border-color: #475569;
  background: #0f172a;
}
[data-theme="dark"] .auth-evt-box:hover {
  border-color: #94a3b8;
}
[data-theme="dark"] .auth-evt-box:checked {
  background: #f1f5f9;
  border-color: #f1f5f9;
}
[data-theme="dark"] .auth-evt-box:checked::after {
  border-color: #0f172a;
}
[data-theme="dark"] .auth-evt-box:disabled {
  border-color: #e2e8f0;
  background: #1e293b;
}
[data-theme="dark"] .auth-evt-row:has(.auth-evt-box:disabled) .auth-evt-name {
  color: #e2e8f0;
}
[data-theme="dark"] .auth-events-hint.flash {
  color: #fb7185;
}
[data-theme="dark"] .auth-evt-name {
  color: #f1f5f9;
}
/* Logged-in state buttons */
[data-theme="dark"] .auth-logged-in-toggle {
  color: #f1f5f9;
  background: #1e293b;
  border-color: #334155;
}
[data-theme="dark"] .auth-logged-in-toggle.active {
  background: #f1f5f9;
  color: #0f172a;
}
[data-theme="dark"] .auth-logged-in-toggle:not(.active) {
  background: #0f172a;
  color: #f1f5f9;
  border-color: #f1f5f9;
}

/* ── How to play modal ────────────────────────────────── */
[data-theme="dark"] .hiw-card {
  background: #1e293b;
  border-color: #334155;
}
[data-theme="dark"] .hiw-card,
[data-theme="dark"] .hiw-title,
[data-theme="dark"] .hiw-section-title,
[data-theme="dark"] .hiw-close:hover,
[data-theme="dark"] #nav-how-it-works-btn {
  color: #f1f5f9;
}
[data-theme="dark"] #nav-how-it-works-btn:hover {
  color: #94a3b8;
}
[data-theme="dark"] .hiw-close {
  color: #94a3b8;
}
[data-theme="dark"] .hiw-header {
  border-bottom-color: #334155;
}
[data-theme="dark"] .hiw-section-body {
  color: #cbd5e1;
}

/* ── Pick matrix — desktop ────────────────────────────── */
[data-theme="dark"] .pm-circle-filler {
  border-color: #334155;
}
[data-theme="dark"] .pm-row-header {
  border-bottom-color: #334155;
}
[data-theme="dark"] .pm-row {
  border-bottom-color: #334155;
}

/* ── Pick matrix — mobile ─────────────────────────────── */
[data-theme="dark"] .m-pm-game-card {
  border-color: #334155;
}
[data-theme="dark"] .m-pm-game-header {
  border-bottom-color: #334155;
}
[data-theme="dark"] .m-pm-circle.m-pm-picked {
  background: #64748b;
  border-color: #64748b;
}

/* ── Theme toggle button ──────────────────────────────── */
#theme-toggle-btn {
  margin-right: 8px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 18px;
  padding: 4px 8px;
  color: var(--mid-gray);
  font-family: var(--mono);
  transition: color 0.2s;
}
#theme-toggle-btn:hover {
  color: var(--black);
}
[data-theme="dark"] .header-logo-svg g { stroke: #e2e8f0 !important; }
/* Mobile logo mirror of the rule above — same override, .m- prefixed
   class. Session 18 shipped the desktop rule; mobile logo was left
   invisible against the dark background because the selector didn't
   match. Added 2026-09-05. */
[data-theme="dark"] .m-logo-svg g { stroke: #e2e8f0 !important; }
/* Watermark dark-mode treatment. Original selector #section-leaderboard
   was retired in the ui-declutter restructure (2026-09-28); watermark
   moved to .tab-panel[data-tab="leaderboard"]::before, and the
   corresponding dark-mode invert + lighten rule was ported to
   styles.css alongside the base watermark rule. The line below is
   retained as documentation of the old selector, commented out; the
   live rule lives in styles.css. */
/* [data-theme="dark"] #section-leaderboard::before { filter: invert(1) brightness(1.5); opacity: 0.35; mix-blend-mode: lighten; } */

[data-theme="dark"] .lb-thead-group .lb-th-group,
[data-theme="dark"] .lb-thead-group .lb-th-rnk,
[data-theme="dark"] .lb-thead-group .lb-th-pos,
[data-theme="dark"] .lb-thead-group .lb-th-player,
[data-theme="dark"] .lb-thead-group .lb-th-g-col {
  border-bottom-color: #334155;
}


/* brightness lifts, contrast compresses range: darks get lighter, brights stay tame */

/* ── Team colors (--tc / --tcd) ──── */
/* Team abbreviations. --tc set inline by consumers (e.g. schedule.js
   render, mobile team labels via [style*="--tc"] catch-all below).
   Ticker author names formerly used --tc too; migrated to --pc in
   Session 21 (2026-09-07) for semantic consistency — persona colors
   belong on the --pc namespace, not the team-color namespace. */
.g-abbrev { color: var(--tc); }
[data-theme="dark"] .g-abbrev { color: var(--tcd); }

/* ── Player color custom properties (personas, field, mobile) ── */
/* ui-declutter follow-up 2026-09-29: personas box-shadow bar removed
   in both themes. personas.js no longer writes --pc/--pcd, and selection
   is signaled by --black text on the active row's NAME + RNK cells
   (styles.css). Prior rules on this location wrote a 2px inset box-
   shadow using the persona color; kept the section comment for context. */

/* Field chart: name labels and dots */
.alpha-name-label { color: var(--pc, inherit); }
[data-theme="dark"] .alpha-name-label { color: var(--pcd, inherit); }
.alpha-name-dot { background: var(--pc); }
[data-theme="dark"] .alpha-name-dot { background: var(--pcd); }

/* Ticker: persona author name — same --pc / --pcd pipeline as
   field / trajectory / persona-panel. Session 21 migrated from
   --tc / --tcd, which had been semantically overloaded (team color
   AND persona color sharing one custom-property name). */
.ticker-msg-author { color: var(--pc); }
[data-theme="dark"] .ticker-msg-author { color: var(--pcd); }

/* Mobile: team abbreviation colors */
[style*="--tc"] { color: var(--tc); }
[data-theme="dark"] [style*="--tc"] { color: var(--tcd); }

/* ── Row separators: hairline dark borders for leaderboard + picks ── */
[data-theme="dark"] .lb-table tbody tr { border-bottom-color: var(--light-gray); }
[data-theme="dark"] .game-entry { border-bottom-color: var(--light-gray); }
[data-theme="dark"] .pm-table tbody tr.g-row-home td { border-bottom-color: var(--light-gray); }
[data-theme="dark"] .pm-h-game { border-bottom-color: var(--light-gray); }
[data-theme="dark"] .pm-h-player { border-bottom-color: var(--light-gray); }

/* ── Modal body text — lighter for readability ── */
[data-theme="dark"] .hiw-section-body,
[data-theme="dark"] .hiw-body,
[data-theme="dark"] .hiw-card p,
[data-theme="dark"] .hiw-card li {
  color: #e2e8f0;
}
[data-theme="dark"] .auth-card p,
[data-theme="dark"] .auth-card label,
[data-theme="dark"] .auth-hint,
[data-theme="dark"] .auth-events-hint,
[data-theme="dark"] .auth-evt-name {
  color: #e2e8f0;
}

/* ── Modal titles + bold/strong text ── */
[data-theme="dark"] .hiw-title,
[data-theme="dark"] .hiw-card strong,
[data-theme="dark"] .hiw-card b,
[data-theme="dark"] .hiw-section-title,
[data-theme="dark"] .hiw-card em {
  color: #f1f5f9;
}
[data-theme="dark"] .auth-title,
[data-theme="dark"] .auth-card strong,
[data-theme="dark"] .auth-card b,
[data-theme="dark"] .auth-events-label,
[data-theme="dark"] .auth-events-title {
  color: #f1f5f9;
}

/* ── Modal main titles — force override ── */
[data-theme="dark"] .hiw-title { color: #f1f5f9 !important; }
[data-theme="dark"] .auth-title { color: #f1f5f9 !important; }

[data-theme="dark"] .hiw-card-title { color: #f1f5f9 !important; }
[data-theme="dark"] .auth-card-title { color: #f1f5f9 !important; }

/* ── Mobile AI badge: prevent clipping ── */
.m-lb-name { overflow: visible !important; }

/* .lb-td-alp dark override — cyan-200 to keep the ALPHA-AVG legible
   as the primary scoreboard number on dark backgrounds. Paired with
   the base 15px teal rule in styles.css. */
[data-theme="dark"] .lb-table td.lb-td-alp { color: #a5f3fc; }
[data-theme="dark"] .m-lb-stat.m-lb-stat--alp { color: #a5f3fc; }
/* Persona sparkline endpoint value — same dark-mode cyan as .lb-td-alp
   so the two live values (leaderboard column + persona sparkline)
   stay in the same visual family in dark mode. */
[data-theme="dark"] .personas-spark-value { color: #a5f3fc; }