/* ==========================================================================
   spy-theme.css — "Baseball Spy" grayscale theme for Sports Experiments
   --------------------------------------------------------------------------
   Shared override loaded AFTER each page's shared.css (and inline <style>), so
   it wins the cascade at equal specificity — no !important. It does NOT modify
   shared.css; delete the <link> to revert.

   Matches the Baseball Spy shadcn/zinc design system (sourced verbatim from
   baseballspy/spy-ui/css/{global,components,inputs}.css):
     background/card #ffffff · foreground #1c1c22 · muted-surface #f4f4f5
     muted-foreground #71717a · border/input #e4e4e7 · primary #24242b
     ring/brand teal #14b8a6 · radius-m 6px (controls) · radius-l 8px (cards)
     shadow-s 0 1px 2px rgb(0 0 0/.05) · font = system stack
     focus = border #14b8a6 + 0 0 0 2px rgba(20,184,166,.1)
     hover border = rgba(28,28,34,.2) · filled/active = #24242b on #fefefe

   Scope of the recolor:
   - Only the NEUTRAL tones are remapped (background, surfaces, borders, text).
   - The non-grayscale DATA colors (--accent/--green/--yellow/--blue/--orange/
     --red/--purple) are left untouched, inherited from each page's own :root.
   - Neutrals are set on <body> (not :root) so pages whose charts read :root in
     JS (e.g. bat_tracking) keep their dark chart ink; their page-specific file
     handles the #111 chart surfaces.

   Covers BOTH sports' class vocabularies:
     baseball: .controls/.control-group/.view-toggle/.header-stats/.team-suffix
     basketball: .filter-bar/.filter-group/.seg/.header-meta/.season-suffix
   Selectors that don't exist on a given page are simply inert.
   ========================================================================== */

/* --- Tokens (on <body>) ---------------------------------------------------- */
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* Neutrals → Baseball Spy */
  --bg:         #ffffff;   /* --background */
  --surface:    #ffffff;   /* --card       */
  --surface-2:  #f4f4f5;   /* basketball has a second surface; map to --muted */
  --border:     #e4e4e7;   /* --border / --input */
  --text:       #1c1c22;   /* --foreground */
  --text-muted: #71717a;   /* --muted-foreground */

  /* Baseball Spy specifics used below */
  --bs-primary:       #24242b;
  --bs-primary-fg:    #fefefe;
  --bs-muted-surface: #f4f4f5;
  --bs-ring:          #14b8a6;
  --bs-ring-glow:     0 0 0 2px rgba(20, 184, 166, 0.1);
  --bs-hover-border:  rgba(28, 28, 34, 0.2);
  --bs-shadow-s:      0 1px 2px 0 rgb(0 0 0 / 0.05);
  --bs-radius:        6px;   /* controls */
  --bs-radius-lg:     8px;   /* cards     */
}

/* --- Header + nav ---------------------------------------------------------- */
header { border-bottom: 1px solid var(--border); }
header h1 {
  font-size: 1.25rem; font-weight: 600; letter-spacing: -0.01em; color: var(--text);
}
header h1 .team-suffix,
header h1 .season-suffix { color: var(--text-muted); font-weight: 400; }

nav a {
  color: var(--text-muted);
  font-size: 0.875rem; font-weight: 500;
  padding: 6px 10px; border-radius: var(--bs-radius);
  transition: color 150ms ease, background-color 150ms ease;
}
nav a:hover { color: var(--text); background-color: var(--bs-muted-surface); text-decoration: none; }
nav a.active { color: var(--text); font-weight: 600; background-color: var(--bs-muted-surface); }

.header-stats, .header-meta { color: var(--text-muted); font-size: 0.875rem; }
.header-stats .val, .header-meta .val { color: var(--text); font-weight: 600; }

/* --- Filter/control bars --------------------------------------------------- */
.controls, .filter-bar { border-bottom: 1px solid var(--border); }
/* basketball .filter-bar is a bordered panel in some pages — normalize it */
.filter-bar {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--bs-radius-lg);
}

/* Uppercase eyebrow labels → Baseball Spy table/group-label spec */
.control-group label,
.filter-group label,
.filter-bar .filter-label,
.stat-card .card-label {
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--text-muted);
}

/* Inputs & native selects → Baseball Spy .select/.input (keep native arrow) */
.controls select,
.filter-group select,
.filter-group input[type=number],
.player-search input {
  height: 38px; padding: 0 12px;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--bs-radius);
  font-size: 0.875rem;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.controls select:hover,
.filter-group select:hover,
.filter-group input[type=number]:hover,
.player-search input:hover { border-color: var(--bs-hover-border); }
.controls select:focus,
.filter-group select:focus,
.filter-group input[type=number]:focus,
.player-search input:focus {
  outline: none; border-color: var(--bs-ring); box-shadow: var(--bs-ring-glow);
}

/* Segmented controls (.view-toggle / .seg) → Baseball Spy segmented control */
.view-toggle button, .seg button {
  background: var(--surface); color: var(--text-muted);
  border: 1px solid var(--border); height: 38px; padding: 0 14px; font-size: 0.8125rem;
  transition: color 150ms ease, background-color 150ms ease, border-color 150ms ease;
}
.view-toggle button:hover, .seg button:hover { color: var(--text); background: var(--bs-muted-surface); }
.view-toggle button:first-child, .seg button:first-child { border-radius: var(--bs-radius) 0 0 var(--bs-radius); }
.view-toggle button:last-child,  .seg button:last-child  { border-radius: 0 var(--bs-radius) var(--bs-radius) 0; border-left: none; }
.view-toggle button.active, .seg button.active {
  background: var(--bs-primary); color: var(--bs-primary-fg); border-color: var(--bs-primary);
}
.filter-group .count { color: var(--text-muted); font-size: 0.75rem; }

/* --- Tables → Baseball Spy .spy-table -------------------------------------- */
th {
  border-bottom: 1px solid var(--border);
  color: var(--text-muted);
  text-transform: uppercase; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.05em;
}
th:hover, th.sorted { color: var(--text); }
th .sort-arrow { color: var(--text); }
td { border-bottom: 1px solid var(--border); }
tr:hover { background: var(--bs-muted-surface); }
/* Header row shading like Baseball Spy thead */
thead, thead tr { background: var(--bs-muted-surface); }
thead th { border-bottom: 1px solid var(--border); }

.summary-row, tr.summary-row { background: var(--bs-muted-surface); font-weight: 600; }
.summary-row td, tr.summary-row td { border-bottom: 1px solid var(--border); }
tr.summary-row:hover td { background: var(--bs-muted-surface); }

.num { font-variant-numeric: tabular-nums; }

/* --- Cards / stat cards / sections ----------------------------------------- */
.stat-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--bs-radius-lg); padding: 16px 18px; box-shadow: none;
}
.stat-card .card-value { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.stat-card .card-sub { color: var(--text-muted); }

.section-title {
  font-size: 1rem; font-weight: 600; color: var(--text);
  border-bottom: 1px solid var(--border);
}
.section-title .hint { color: var(--text-muted); font-weight: 400; }

.detail-header h2 { color: var(--text); font-weight: 600; }
.detail-header .subtitle,
.detail-header .meta-line { color: var(--text-muted); }
.detail-header .meta-line .v { color: var(--text); }

/* --- Links ----------------------------------------------------------------- */
/* Baseball Spy links are foreground, not colored (data blue stays on charts). */
.back-link, .clickable-label, .player-link {
  color: var(--text); font-weight: 500; text-decoration: none;
}
.back-link:hover, .clickable-label:hover, .player-link:hover { text-decoration: underline; color: var(--text); }
.video-link { color: var(--text); font-weight: 600; }
.video-link:hover { text-decoration: underline; opacity: 1; }

/* --- Misc chrome ----------------------------------------------------------- */
.no-data { color: var(--text-muted); }
.filter-checkbox { color: var(--text); }
.filter-checkbox:hover { color: var(--text); }
.filter-checkbox input { accent-color: var(--bs-primary); }

/* Spinners tinted Baseball Spy brand teal */
.loading .spinner, .spinner-sm { border-top-color: var(--bs-ring); }

/* Player-search dropdown → Baseball Spy popover */
.player-search .results {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--bs-radius); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.player-search .result-item { border-bottom: 1px solid var(--border); }
.player-search .result-item:hover { background: var(--bs-muted-surface); }
.player-search .result-team { color: var(--text-muted); }

/* --- Dark chart surfaces (kept on #111 like bat_tracking) ------------------
   SVG plots that should stay on a near-black backdrop. Loaded after each page's
   inline <style>, so these win over the inline `.zone-svg{background:var(--surface)}`.
   The token re-scope keeps the SVG marks (var(--text)/var(--border)) light on black.
   Inert on pages without these containers.
     .zone-svg — abs.html / abs_viewer.html strike-zone plots */
.zone-svg {
  background: #111111;
  border-radius: var(--bs-radius-lg);
  --surface:    #111111;
  --border:     #2c2c2c;
  --text:       #e8e8e8;
  --text-muted: #8a8a8a;
  /* data accents inherit each page's originals from :root */
}
