/* R163: Font swap — Inter Tight (condensed, designed for dense UI),
 * IBM Plex Mono (cleaner numerics than JetBrains at small sizes),
 * Barlow Condensed (display alternative to Big Shoulders — more readable). */
@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@900&family=Inter+Tight:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500&family=IBM+Plex+Mono:wght@400;500;600;700&family=Barlow+Condensed:wght@600;700;800;900&display=swap');

/* ═══════════════════════════════════════════════════════════════════════
   OGILVIE — Baseball Analytics
   Editorial · Bloomberg-meets-Athletic · square geometry · navy + gold
   ───────────────────────────────────────────────────────────────────────
   DESIGN SYSTEM
   ─────────────
   FONTS
     Newsreader (serif)        h1 / hero player name (editorial gravitas)
     DM Sans (sans body)       UI, labels, prose, h2 small caps
     JetBrains Mono (mono)     all numeric data — tabular, lining figures

   TYPE SCALE  (8 sizes — used consistently)
     10 micro     11 caption    12 body       13 lede
     15 sub       18 h2         22 h1-sm      30 h1-lg

   SPACING SCALE  (--sp-1..7 = 4 / 8 / 12 / 16 / 24 / 32 / 48 px)
   RADIUS  : 0 everywhere (square — brand identity)
   HAIRLINE: 1px borders, gold accent rule = 1px (was 3px brick — calmer)

   PALETTE
     Brand        navy / gold (unchanged) — gold reserved for primary
                  accents only (active nav, key WAR, hero rule).
     Surface      paper white body, subtle warm-cool gray tints for
                  zebra & section bands.
     Heat (5-step) cool blue (poor) → ash (average) → amber (elite)
                  Replaces traffic-light red→green which read as alerts.
                  All values calibrated for 4.5:1 contrast on white BG.
   ═══════════════════════════════════════════════════════════════════════ */
:root {
  /* ── Brand ── */
  --navy:        #0a1a33;     /* slightly deeper, richer */
  --navy-mid:    #16335f;
  --navy-soft:   #1f3e6e;
  --gold:        #b07a2b;     /* warmer, more amber */
  --gold-bright: #d8a955;
  --gold-light:  #ead196;
  --gold-dim:    #c0a062;

  /* ── Surface ── */
  --bg:          #ffffff;
  --paper:       #fafaf7;     /* warmer paper for subtle zebra */
  --surface:     #f4f5f7;     /* cool gray section bands */
  --surface-2:   #ebedf1;
  --tint:        #eef2f8;     /* navy-tinted highlight band */
  --tint-mid:    #dde4ef;
  --rule:        rgba(10,26,51,0.06);

  /* ── Text ── */
  --text:        #0a1320;
  --text-2:      #2a3442;
  --muted:       #6a7587;
  --muted-2:     #8c97a8;

  /* ── Borders ── */
  --border:      #e3e6ec;
  --border-2:    #cdd3dc;
  --border-dark: #99a3b3;

  /* ── Accents ── */
  --accent:      var(--gold);
  --link:        var(--navy-mid);

  /* ── Stat heat (cool→warm, calibrated for white BG, 4.5:1+ contrast) ── */
  --w1: #2c5e9e;   /* deep blue   — poor (< 25th)  */
  --w2: #5985b8;   /* slate blue  — below avg      */
  --w3: #4a5563;   /* graphite    — average        */
  --w4: #b06b1f;   /* burnt amber — above avg      */
  --w5: #8a4a13;   /* dark amber  — elite          */

  /* ── Spacing scale ── */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;

  /* ── Component tokens ── */
  --row-hover:   rgba(10,26,51,0.045);
  --card-bg:     #ffffff;
  --shadow-1:    0 1px 0 rgba(10,26,51,0.04);
  --shadow-2:    0 1px 2px rgba(10,26,51,0.06), 0 0 0 1px rgba(10,26,51,0.04);
  --inset-rule:  inset 0 -1px 0 rgba(10,26,51,0.08);

  /* ── Type tokens (font families) ── */
  --ff-serif:    'Newsreader', 'Iowan Old Style', Georgia, serif;
  --ff-sans:     'Inter Tight', system-ui, -apple-system, sans-serif;
  --ff-mono:     'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, 'Cascadia Code', monospace;
  --ff-display:  'Barlow Condensed', 'Oswald', 'Bebas Neue', 'Impact', sans-serif;

  /* ── R267: Heritage header palette (Brewers-inspired scorecard masthead) ── */
  --hdr-navy:        #0A2240;
  --hdr-gold:        #FFC52F;
  --hdr-cream:       #F4ECD8;
  --hdr-cream-dim:   rgba(244,236,216,0.55);
  --hdr-cream-ghost: rgba(244,236,216,0.08);
  --hdr-cream-focus: rgba(244,236,216,0.14);
  --nav-text:        #1a1208;
  --nav-text-muted:  #5a4a2a;
  --ff-wordmark:     'Big Shoulders Display', 'Barlow Condensed', 'Impact', sans-serif;
}

/* Global reset — zero radius everywhere (brand identity: square geometry) */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border-radius: 0 !important;
}

html { background: var(--paper); }
body {
  font-family: var(--ff-sans);
  background: var(--bg);
  color: var(--text);
  font-size: 12px;          /* R163: Inter Tight reads well at 12px; was 11 with DM Sans */
  line-height: 1.35;
  letter-spacing: -0.005em; /* R163: tightens condensed sans for dense data */
  font-feature-settings: "cv11" 1, "ss01" 1, "ss03" 1;  /* Inter stylistic alts: angular zero/0, single-story a */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Tabular numbers everywhere data appears */
td, th, .bio-val, .stat-num, .pch-val {
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1, "ss01" 1;
  font-family: var(--ff-mono);
}

a { color: var(--link); text-decoration: none; transition: color .12s; }
a:hover {
  color: var(--navy);
  text-decoration: underline;
  text-decoration-color: rgba(176,122,43,0.55);
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}

::selection { background: rgba(176,122,43,0.22); color: var(--navy); }

/* Focus ring (keyboard-accessible) */
:focus-visible {
  outline: 2px solid var(--gold-bright);
  outline-offset: 1px;
}
/* ═══ Header (R267 — heritage masthead, Brewers navy/gold/cream) ═════════ */

/* Focus rings: white outline on navy surfaces, navy on cream nav */
.site-header :focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}
.site-nav :focus-visible {
  outline: 2px solid var(--hdr-navy);
  outline-offset: 1px;
}

.site-header {
  display: flex;
  align-items: stretch;
  background: var(--hdr-navy);
  height: 132px;
  padding: 0;
  position: relative;
  z-index: 50;
  border-bottom: 2px solid var(--hdr-gold);
}

/* Brand zone — left column */
.header-brand {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 0;
  border-right: 1px solid rgba(255,255,255,0.07);
  position: relative;
  flex: 0 0 auto;
}
/* R290b: gold accent bar removed — logo IS the brand. No padding above/below either. */
.header-brand::before { display: none !important; }
.brand-link {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0;
  height: 100%;
  text-decoration: none !important;
}
.brand-link:hover { opacity: 0.88; }
.brand-link:hover .brand-wordmark { color: var(--hdr-gold); }

.brand-logo {
  height: 124px;
  width: auto;
  display: block;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4));
}

.brand-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
}
.brand-wordmark {
  font-family: var(--ff-wordmark);
  font-size: 30px;
  font-weight: 900;
  letter-spacing: 0.04em;
  color: var(--hdr-cream);
  text-transform: uppercase;
  line-height: 1;
  transition: color 0.12s;
}
.brand-tagline {
  font-family: var(--ff-sans);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.38em;
  color: var(--hdr-cream-dim);
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
}

.header-search {
  display: flex;
  align-items: center;
  flex: 1;
  padding: 0 20px;
  position: relative;
}
.header-search input {
  width: 300px !important;
  height: 32px;
  padding: 0 12px 0 34px !important;
  font-size: 12px !important;
  font-family: var(--ff-sans) !important;
  font-weight: 400;
  background: var(--hdr-cream-ghost) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  color: rgba(255,255,255,0.95) !important;
  letter-spacing: 0.2px;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23FFC52F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' opacity='0.7'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: 10px center !important;
}
.header-search input::placeholder {
  color: rgba(255,255,255,0.35);
  letter-spacing: 0.3px;
}
.header-search input:focus {
  outline: none;
  background: var(--hdr-cream-focus) !important;
  border-color: var(--hdr-gold) !important;
  box-shadow: 0 0 0 2px rgba(255,197,47,0.25), 0 4px 14px rgba(0,0,0,0.28);
}

#search-results {
  background: #0d1d3d;
  border: 1px solid rgba(255,197,47,0.35);
  border-top: 2px solid var(--hdr-gold);
  box-shadow: 0 8px 24px rgba(0,0,0,0.55);
}
#search-results a {
  display: block;
  padding: 8px 14px;
  color: rgba(255,255,255,0.82);
  font-size: 12px;
  text-decoration: none;
  border-left: 2px solid transparent;
  transition: background 0.1s, border-color 0.1s;
}
#search-results a:hover,
#search-results a:focus {
  background: rgba(255,197,47,0.10);
  border-left-color: var(--hdr-gold);
  color: #fff;
  outline: none;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 20px;
  flex: 0 0 auto;
  border-left: 1px solid rgba(255,255,255,0.07);
}
.vintage-stamp {
  font-family: var(--ff-mono);
  font-size: 9.5px;
  font-weight: 600;
  color: var(--hdr-cream-dim);
  background: rgba(255,197,47,0.10);
  border: 1px solid rgba(255,197,47,0.30);
  padding: 2px 8px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  white-space: nowrap;
}
.site-header .breadcrumb {
  font-family: var(--ff-sans);
  font-size: 11px;
  color: rgba(255,255,255,0.40);
  letter-spacing: 0.3px;
  white-space: nowrap;
}
.site-header .breadcrumb a {
  color: rgba(255,255,255,0.65);
  font-weight: 500;
}
.site-header .breadcrumb a:hover {
  color: var(--hdr-gold);
  text-decoration: none;
}
.bc-sep {
  color: rgba(255,255,255,0.18);
  margin: 0 6px;
  font-weight: 300;
}

/* ═══ Nav strip (cream on navy, classic tab treatment) ══════════════════ */
.site-nav {
  display: flex;
  background: var(--hdr-cream);
  padding: 0 16px;
  gap: 0;
  position: sticky;
  top: 0;
  z-index: 40;
  box-shadow: 0 2px 6px rgba(10,34,64,0.15);
}
.nav-group { position: relative; }
.nav-trigger {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 16px;
  height: 38px;
  font-family: var(--ff-sans);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.35px;
  color: var(--nav-text-muted);
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  cursor: pointer;
  transition: color 0.13s ease, border-color 0.13s ease, background 0.13s ease;
  white-space: nowrap;
}
.nav-trigger:hover {
  color: var(--nav-text);
  background: rgba(10,34,64,0.06);
  border-bottom-color: rgba(255,197,47,0.45);
}
.nav-arrow {
  font-size: 8px;
  opacity: 0.55;
  transform: translateY(1px);
}
.nav-group-active .nav-trigger {
  color: var(--hdr-navy);
  border-bottom-color: var(--hdr-gold);
  font-weight: 700;
}

.nav-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 190px;
  background: var(--hdr-navy);
  border: 1px solid rgba(255,197,47,0.28);
  border-top: 2px solid var(--hdr-gold);
  box-shadow: 0 8px 24px rgba(0,0,0,0.45);
  display: none;
  flex-direction: column;
  z-index: 50;
  padding: 4px 0;
}
.nav-group:hover .nav-dropdown,
.nav-group:focus-within .nav-dropdown,
.nav-group.open .nav-dropdown {
  display: flex;
}
.nav-dropdown a {
  display: block;
  padding: 8px 16px;
  font-family: var(--ff-sans);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.3px;
  color: rgba(244,236,216,0.80);
  text-decoration: none;
  border-left: 2px solid transparent;
  transition: background 0.11s ease, color 0.11s ease, border-color 0.11s ease;
}
.nav-dropdown a:hover {
  color: var(--hdr-cream);
  background: rgba(255,197,47,0.10);
  border-left-color: var(--hdr-gold);
}
.nav-dropdown a.dd-active {
  color: var(--hdr-gold);
  background: rgba(255,197,47,0.08);
  border-left-color: var(--hdr-gold);
  font-weight: 700;
}

/* ═══ Layout ═════════════════════════════════════════════════════ */
main { max-width: 1680px; margin: 0 auto; padding: var(--sp-2) var(--sp-3) var(--sp-4); }

/* ═══ Mobile responsive — header ════════════════════════════════════════ */
@media (max-width: 960px) {
  .header-search input { width: 200px !important; }
  .header-right { padding: 0 12px; }
  .vintage-stamp { display: none; }
}
@media (max-width: 720px) {
  .site-header { height: auto; flex-wrap: wrap; padding: 6px 10px; }
  .header-brand { padding: 0 10px 0 8px; border-right: none; }
  .header-brand::before { top: 6px; bottom: 6px; }
  .brand-logo { height: 90px; }
  .brand-wordmark { font-size: 22px; }
  .brand-tagline { font-size: 7px; letter-spacing: 0.30em; }
  .header-search {
    display: block;
    flex: 1 1 100%;
    order: 3;
    padding: 6px 0 4px;
  }
  .header-search input {
    width: 100% !important;
    height: 40px;
    font-size: 15px !important;
    min-width: 0;
  }
  #search-results { left: 0 !important; right: 0; width: auto !important; top: 100% !important; }
  .header-right { display: none; }
  .site-nav { padding: 0 4px; }
  .nav-trigger { font-size: 11px; padding: 0 11px; height: 44px; }
  main { padding: 8px 10px; max-width: 100%; }
}
@media (max-width: 480px) {
  .site-nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .site-nav::-webkit-scrollbar { display: none; }
  .nav-group { flex: 0 0 auto; }
  .nav-trigger { white-space: nowrap; padding: 0 12px; height: 44px; font-size: 10.5px; }
  .header-brand { padding: 0 6px 0 4px; }
  .nav-dropdown { left: 0; min-width: 200px; }
}

/* ═══ Projection row styling ═════════════════════════════════════ */
tbody tr.proj-row td  { font-family: var(--ff-mono); font-size: 10.5px; }
tbody tr.total-row td { font-family: var(--ff-mono); }

/* ═══ Comp table enhancements ════════════════════════════════════ */
.comps-table { font-size: 9px; }
.comps-table td, .comps-table th { padding: 1px 3px; }
.comps-table th { white-space: nowrap; }
.comps-table .comp-link { font-weight: 600; color: var(--navy-mid); }
.comps-table .comp-link:hover { color: var(--navy); }

/* ═══ Standings enhancements ═════════════════════════════════════ */
.standings-table { font-size: 11.5px; }
.standings-table .war-val { font-weight: 700; }
.div-leader td { font-weight: 600 !important; }

/* ═══ Playoff probability cells ══════════════════════════════════
   Uses heat scale (cool→warm) for consistency, NOT traffic-light
   red/green which over-alerts the eye. */
.po-high { color: var(--w5); font-weight: 700; }
.po-mid  { color: var(--w4); font-weight: 600; }
.po-low  { color: var(--muted); }

/* ═══ IL / utility badges ════════════════════════════════════════ */
.il-badge {
  display: inline-block;
  padding: 1px 5px;
  font-size: 8px;
  font-weight: 800;
  background: #b03030;
  color: #fff;
  letter-spacing: 0.6px;
  margin-left: 4px;
  vertical-align: middle;
  font-family: var(--ff-sans);
  text-transform: uppercase;
}

/* ═══ Typography ═════════════════════════════════════════════════
   h1 — Newsreader serif (editorial gravitas)
   h2 — small caps, hairline rule + gold tick (replaces heavy navy bar)
   subtitle — refined gray lede                                       */
h1 {
  font-family: var(--ff-sans);
  font-size: 18px;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: -0.2px;
  line-height: 1.15;
  margin: 0 0 var(--sp-1);
  font-variant-numeric: lining-nums;
}
h2 {
  position: relative;
  font-family: var(--ff-sans);
  font-size: 9.5px;
  font-weight: 800;
  color: var(--navy);
  letter-spacing: 2.0px;
  text-transform: uppercase;
  padding: var(--sp-3) 0 var(--sp-2) 16px;
  margin: var(--sp-6) 0 var(--sp-3);
  background: transparent;
  border-bottom: 1px solid var(--border-2);
  border-left: none;
}
h2::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-30%);
  width: 3px; height: 16px;
  background: var(--gold-bright);
}
.subtitle {
  font-family: var(--ff-sans);
  font-size: 12px;
  color: var(--muted);
  margin: var(--sp-1) 0 var(--sp-4);
  line-height: 1.55;
  letter-spacing: 0.05px;
  max-width: 80ch;
}
.subtitle a { color: var(--navy-mid); border-bottom: 1px solid var(--gold-dim); }
.subtitle a:hover { color: var(--navy); border-bottom-color: var(--gold); text-decoration: none; }
.subtitle b { color: var(--text); font-weight: 600; }
.subtitle em { font-style: italic; color: var(--text-2); }

/* ═══ Player card header ═════════════════════════════════════════
   Hero panel: flat navy (no gradient/shimmer), gold hairline accent
   on the keystone WAR stat. Calmer, more editorial than the prior
   "shiny dark glass" look.                                         */
.player-card-header {
  padding: var(--sp-5) var(--sp-5) 0;
  margin-bottom: var(--sp-3);
  border-bottom: none;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--sp-5);
  background: var(--card-bg);
  border-top: 2px solid var(--navy);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-1);
  position: relative;
}
.player-card-header::before {
  /* small gold mark in the corner — editorial flag */
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 64px; height: 2px;
  background: var(--gold-bright);
}
.pch-left  { flex: 1 1 auto; min-width: 0; }
.pch-right { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; padding-top: 2px; }

.pch-name {
  font-family: var(--ff-sans);
  font-size: 32px;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: -0.5px;
  line-height: 1.05;
  font-variant-numeric: lining-nums;
}
.pch-meta {
  font-family: var(--ff-sans);
  font-size: 11.5px;
  color: var(--muted);
  margin: var(--sp-2) 0 var(--sp-3);
  letter-spacing: 0.3px;
  font-weight: 500;
  text-transform: uppercase;
}
.pch-meta b { color: var(--text-2); font-weight: 700; }

/* ═══ R194 player header redesign ════════════════════════════════════
   Bloomberg-clean: name + position chip + team on one row, big WAR hero
   on the right, single-line bio meta, then existing stats strip. */
.pch-redesign .pch-titlerow {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: 4px;
}
.pch-redesign .pch-name-block {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  min-width: 0;
}
.pch-pos-chip {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 8px;
  background: var(--navy);
  color: var(--gold-bright);
  font-family: var(--ff-sans);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 1.0px;
  text-transform: uppercase;
  border-radius: 2px;
  vertical-align: middle;
  transform: translateY(-3px);
}
.pch-team {
  font-family: var(--ff-sans);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-2);
  letter-spacing: 0.2px;
}
.pch-war-block {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1;
  flex: 0 0 auto;
  white-space: nowrap;
}
.pch-war-num {
  font-family: var(--ff-mono);
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.8px;
  font-variant-numeric: tabular-nums lining-nums;
}
.pch-war-lbl {
  font-family: var(--ff-sans);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1.4px;
  color: var(--muted);
  text-transform: uppercase;
  margin-top: 2px;
}
.pch-bio {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0 14px;
  font-family: var(--ff-sans);
  font-size: 11px;
  color: var(--muted);
  margin: 2px 0 8px;
  letter-spacing: 0.2px;
}
.pch-bio > span:not(:last-child)::after { content: ''; }
.pch-bio-lvl {
  background: rgba(216,169,85,0.12);
  color: var(--gold-dark);
  padding: 1px 6px;
  font-weight: 700;
  border-radius: 2px;
  font-size: 10px;
  letter-spacing: 0.6px;
}
.pch-pf-strip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.pch-peak {
  margin-left: auto;
  font-family: var(--ff-mono);
  font-size: 10.5px;
  color: var(--muted);
  letter-spacing: 0.2px;
}
.pch-peak b { color: var(--gold-dark); font-weight: 700; }
.pch-ct {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  color: var(--text-2);
  letter-spacing: 0.2px;
}
.pch-ct b { color: var(--text); font-weight: 700; }
.pch-splits {
  display: flex;
  gap: 14px;
  margin: 4px 0 0;
  font-size: 10.5px;
  color: var(--muted);
  font-family: var(--ff-mono);
}
.pch-splits b { color: var(--text-2); font-weight: 700; }
.pch-spark-panel {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 6px 0 0;
  padding: 4px 10px;
  background: rgba(216,169,85,0.04);
  border-left: 2px solid var(--gold);
  border-radius: 0 2px 2px 0;
  flex: 1 1 auto;
  min-width: 220px;
}
/* R239t (rd7 #3): empty state when pitcher has insufficient sample —
   keeps header card visually balanced. */
.pch-spark-empty { opacity: 0.45; min-height: 56px; }
.pch-spark-eyebrow {
  font-family: var(--ff-sans);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 1.2px;
  color: var(--gold-dark);
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0.75;
}
/* R285: detail row aligns 3 panels (Waterfall | Scouting | Trajectory) at the
   BOTTOM line — looks intentional and connected, not "stuff at random heights". */
.pch-detail-row {
  display: flex;
  align-items: flex-end;
  gap: 18px;
  margin: 6px 0 0;
  flex-wrap: wrap;
}
/* R278: integrated 3-zone detail row — Waterfall | Scouting | Trajectory.
   Scouting now sits between WAR breakdown and trajectory (was far right).
   On wrap, all three stack cleanly. */
.pch-detail-row > .war-waterfall { flex: 0 0 auto; }
.pch-detail-row > .pch-scouting  { flex: 0 0 auto; align-self: flex-start; }
.pch-detail-row > .pch-spark-panel { flex: 1 1 240px; min-width: 220px; align-self: stretch; }

/* Hero stat block: flat navy (no gradient, no shimmer) */
.pch-stats {
  display: flex;
  gap: 0;
  flex-wrap: wrap;
  padding: 8px 14px 7px;
  background: var(--navy);
  margin: 6px 0 4px;
  border-left: 2px solid var(--gold-bright);
  position: relative;
}
.pch-stats::before { content: none; }
.pch-stats::after  {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, var(--gold-bright) 0%, transparent 24%);
}
.pch-stat {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 0 10px 0 0;
  margin-right: 10px;
  border-right: 1px solid rgba(255,255,255,0.08);
  min-width: 38px;
}
.pch-stat:last-child { border-right: none; margin-right: 0; padding-right: 0; }
.pch-label {
  font-family: var(--ff-sans);
  font-size: 7px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  color: rgba(255,255,255,0.42);
}
.pch-val {
  font-family: var(--ff-mono);
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.3px;
  line-height: 1.05;
  font-variant-numeric: tabular-nums lining-nums;
}
/* Refined hero stat color semantics — calmer, more editorial */
.pch-val-good  { color: #8fd3a8; }              /* pleasant green */
.pch-val-great { color: #a8c8f0; }              /* soft sky */
.pch-val-elite { color: var(--gold-light); }    /* gold for elite */
.pch-val-avg   { color: rgba(255,255,255,0.92); }
.pch-val-below { color: rgba(255,255,255,0.48); }

/* ═══ Scouting grades strip (top-right panel) ════════════════════
   Compact 20-80 grade chips with refined heat scale + tonal labels */
.pch-scouting {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0 0 var(--sp-2);
  align-items: flex-end;
}

/* ═══ Player bio (legacy, used on some pages) ═══ */
.player-bio {
  display: flex;
  gap: 0;
  flex-wrap: wrap;
  padding: var(--sp-3) 0 var(--sp-4);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--sp-2);
}
.bio-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 var(--sp-5) 0 0;
  margin-right: var(--sp-5);
  border-right: 1px solid var(--border);
}
.bio-item:last-child { border-right: none; }
.bio-label {
  font-family: var(--ff-sans);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  color: var(--muted);
}
.bio-val {
  font-family: var(--ff-mono);
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: -0.2px;
}

/* ═══ Tables ═════════════════════════════════════════════════════
   Bloomberg-terminal density: tight padding, mono numerics, sticky
   navy header, gold-bright accent on sort indicators. Subtle paper
   zebra (warm tint) instead of bright stripes. Hairline column
   group separators in cool gray.                                   */
.tbl-wrap {
  overflow-x: auto;
  overflow-y: visible;   /* R239q (rd4 #1): let sticky thead use page body
                           as scroll context — was clipping inside the
                           wrapper, so headers scrolled away on tall tables */
  border: 1px solid var(--border);
  border-top: none;
  margin-bottom: var(--sp-3);
  background: var(--bg);
  box-shadow: var(--shadow-1);
}
.tbl-wrap + h2 { margin-top: var(--sp-5); }

table {
  border-collapse: collapse;
  width: 100%;
  font-family: var(--ff-mono);
  font-size: 9.5px;        /* R163: bumped from 8.5 — IBM Plex Mono is wider but more readable */
  line-height: 1.15;
  background: var(--bg);
}
table tbody td {
  padding: 2px 3px;        /* R163: tighter cell padding for dense projection tables */
  white-space: nowrap;
}
/* R163: dense-mode tables get even tighter — used for 30-col career projection */
.tbl-wrap.tbl-dense table { font-size: 8.5px; }
.tbl-wrap.tbl-dense table tbody td { padding: 1.5px 2.5px; }

/* R164: Career table column toggle — hide advanced cols by default so the
 * table fits on a normal viewport without horizontal scroll. Toggle button
 * (Show advanced cols) reveals them.
 * Column indices in #career-table:
 *  1=Year 2=Age 3=Lvl 4=Team 5=PA *6=AB *7=H *8=2B *9=3B 10=HR
 *  *11=BB *12=SO *13=HBP 14=SB *15=CS 16=AVG 17=OBP 18=SLG 19=OPS
 *  *20=ISO *21=BABIP 22=K% 23=BB% *24=wOBA 25=wRC+
 *  *26=BAT *27=RUN *28=FLD *29=POS *30=REP 31=WAR
 * Stars = hidden by default (16 hidden, 15 visible). */
#career-table-wrap:not(.show-advanced) #career-table tr > *:nth-child(6),
#career-table-wrap:not(.show-advanced) #career-table tr > *:nth-child(7),
#career-table-wrap:not(.show-advanced) #career-table tr > *:nth-child(8),
#career-table-wrap:not(.show-advanced) #career-table tr > *:nth-child(9),
#career-table-wrap:not(.show-advanced) #career-table tr > *:nth-child(11),
#career-table-wrap:not(.show-advanced) #career-table tr > *:nth-child(12),
#career-table-wrap:not(.show-advanced) #career-table tr > *:nth-child(13),
#career-table-wrap:not(.show-advanced) #career-table tr > *:nth-child(15),
#career-table-wrap:not(.show-advanced) #career-table tr > *:nth-child(20),
#career-table-wrap:not(.show-advanced) #career-table tr > *:nth-child(21),
#career-table-wrap:not(.show-advanced) #career-table tr > *:nth-child(24),
#career-table-wrap:not(.show-advanced) #career-table tr > *:nth-child(26),
#career-table-wrap:not(.show-advanced) #career-table tr > *:nth-child(27),
#career-table-wrap:not(.show-advanced) #career-table tr > *:nth-child(28),
#career-table-wrap:not(.show-advanced) #career-table tr > *:nth-child(29),
#career-table-wrap:not(.show-advanced) #career-table tr > *:nth-child(30) {
  display: none;
}
/* Section-sep rows span all cols; let them show. */
#career-table-wrap #career-table tr.section-sep > * { display: table-cell !important; }

/* ─── Single-row thead ─── */
thead tr.solo th {
  background: var(--navy);
  color: rgba(255,255,255,0.85);
  text-align: right;
  font-family: var(--ff-sans);
  font-size: 7.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 2px 4px;
  border-top: none;
  border-bottom: 1px solid var(--gold-bright);
  white-space: nowrap;
  /* R175: sticky table headers — header row stays visible while scrolling
   * long leaderboards (4500-row hitter board, 6200-row pitcher board).
   * Replaces position: relative which scrolled out of view at row 50. */
  position: sticky;
  top: 0;
  z-index: 10;
}
thead tr.solo th.left { text-align: left; }
thead tr.solo th.sortable:hover { color: #fff; cursor: pointer; }
thead tr.solo th.sort-asc::after,
thead tr.solo th.sort-desc::after { color: var(--gold-bright); margin-left: 2px; font-size: 8px; }
/* R239ab (rd13 #1): glossary deep-link in column header — dotted underline
   cues "click for definition" without disturbing the sort indicator. */
.th-glos { color: inherit; text-decoration: none; border-bottom: 1px dotted rgba(255,255,255,0.40); }
.th-glos:hover { border-bottom-color: var(--gold-bright); }

/* Fld sign coloring */
.fld-pos { color: var(--w4); }
.fld-neg { color: var(--w2); }

/* ─── Multi-row thead (group + column rows) ─── */
thead tr.grp-row th {
  background: var(--navy);
  color: var(--gold-light);
  font-family: var(--ff-sans);
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 1.6px;
  padding: var(--sp-2) var(--sp-2) var(--sp-1);
  text-align: center;
  text-transform: uppercase;
  border-top: none;
  border-bottom: 1px solid rgba(216,169,85,0.28);
  white-space: nowrap;
}
thead tr.grp-row th.left { text-align: left; }

thead tr.col-row th {
  background: var(--navy);
  color: rgba(255,255,255,0.86);
  text-align: right;
  font-family: var(--ff-sans);
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  padding: 3px 5px 4px;
  border-bottom: 1px solid var(--gold-bright);
  white-space: nowrap;
  position: relative;
  z-index: 9;
}
thead tr.col-row th.left { text-align: left; }
thead tr.grp-row th { position: relative; z-index: 11; }
thead tr.col-row th { /* sticky disabled — see grp-row */ }

/* Column group separators (subtle — hairlines, not bricks) */
.grp-sep,
.grp-proj-sep { border-left: 1px solid var(--border) !important; }
.grp-mle-sep  { border-left: 1px solid var(--gold-dim) !important; }

/* ─── Body rows ─── */
tbody tr { border-bottom: 1px solid var(--border); transition: background .08s; }
tbody tr:nth-child(even) { background: var(--paper); }
tbody tr:last-child { border-bottom: 1px solid var(--border-2); }
tbody tr:hover { background: var(--row-hover) !important; }
tbody tr.totals { background: var(--tint); font-weight: 600; }

tbody tr.section-sep td {
  background: var(--surface-2);
  color: var(--navy);
  font-family: var(--ff-sans);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  padding: var(--sp-2) 10px;
  border-top: 1px solid var(--border-2);
  border-bottom: 1px solid var(--border);
  text-align: left !important;
}
tbody tr.section-sep:hover { background: var(--surface-2) !important; }

/* Projection rows — visually subdued so actual seasons + totals lead */
tbody tr.proj-row { background: #f4f6fb; }
tbody tr.proj-row td,
tbody tr.ros-row td {
  font-size: 10.5px;
  color: var(--muted);
  padding-top: 3px;
  padding-bottom: 3px;
}
tbody tr.proj-row td.left,
tbody tr.ros-row  td.left { color: var(--muted); }
tbody tr.ros-row { background: #eef2fb; font-style: italic; }
tbody tr.total-row {
  background: var(--tint);
  font-weight: 700;
  border-top: 1px solid var(--navy);
  border-bottom: 1px solid var(--navy);
}
tbody tr.total-row td { font-size: 11.5px; color: var(--text); padding-top: 5px; padding-bottom: 5px; }
tbody tr.total-row:hover { background: var(--tint-mid) !important; }

tbody td {
  padding: 1px 4px;
  text-align: right;
  white-space: nowrap;
  color: var(--text);
  line-height: 1.1;
}
tbody td.left  { text-align: left; }
tbody td.muted { color: var(--muted); }
tbody td.rank  {
  color: var(--muted-2);
  font-size: 10px;
  padding-right: 6px;
  font-weight: 500;
}

/* Hover: subtle gold left rule on row */
tbody tr:hover td:first-child {
  box-shadow: inset 2px 0 0 var(--gold-bright);
}
tbody tr.proj-row:hover td:first-child,
tbody tr.ros-row:hover td:first-child {
  box-shadow: inset 2px 0 0 var(--gold-dim);
}

/* ─── Heat color tokens ─── */
.w1 { color: var(--w1); font-weight: 600; }
.w2 { color: var(--w2); font-weight: 600; }
.w3 { color: var(--w3); }
.w4 { color: var(--w4); font-weight: 600; }
.w5 { color: var(--w5); font-weight: 700; }

/* ═══ Level badges ═══════════════════════════════════════════════
   Tonal badges — flat, mono, square. MLB gets a gold rule (special).
   R239t (rd7 #2): bumped 9→10px font + tightened 1.0→0.6px tracking
   (over-tracked at 9px hurt WCAG 1.4.4); added 2px left rule per
   level for shape redundancy (color-blind safe per WCAG 1.4.1). */
.level-badge {
  display: inline-block;
  padding: 2px 6px 2px 4px;
  font-family: var(--ff-sans);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  border-left: 2px solid transparent;
}
.lv-MLB  { background: var(--navy);     color: var(--gold-light); box-shadow: inset 0 -2px 0 var(--gold-bright); border-left-color: var(--gold-bright); }
.lv-AAA  { background: #0e4f3d;         color: #b5dfc8; border-left-color: #7fcfa1; }
.lv-AA   { background: #18386f;         color: #b5cdef; border-left-color: #7fa8e3; }
.lv-Ap   { background: #5b3a83;         color: #e6d5f5; border-left-color: #c4a8e6; }
.lv-A    { background: #1e6388;         color: #c2e1f0; border-left-color: #82c4e3; }
.lv-ROK  { background: #7a1f3a;         color: #f0c8d5; border-left-color: #e39bb0; }
.lv-INTL { background: #6b1d72;         color: #ecd0f0; border-left-color: #d6a8df; }
.lv-DSL  { background: #843a18;         color: #f0d3bd; border-left-color: #e3b18b; }
.lv-PRJ  { background: var(--gold);     color: var(--navy); box-shadow: inset 0 -2px 0 var(--gold-bright); border-left-color: var(--gold-bright); }

/* ═══ Leaderboard header ═════════════════════════════════════════ */
.dash-header { padding: var(--sp-1) 0 var(--sp-3); }
.dash-header h1 { font-size: 18px; }

/* ═══ Filter bar ═════════════════════════════════════════════════ */
.filter-bar {
  display: flex;
  gap: var(--sp-2);
  margin: 0 0 var(--sp-2);
  align-items: center;
  flex-wrap: wrap;
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--border);
}
.filter-bar input,
.filter-bar select,
.filter-bar button { height: 24px;
  border: 1px solid var(--border-2);
  padding: 0 10px;
  font-family: var(--ff-sans);
  font-size: 11px;
  font-weight: 500;
  color: var(--text);
  background: var(--bg);
  height: 30px;
  letter-spacing: 0.2px;
  transition: border-color 0.12s, box-shadow 0.12s;
  -webkit-appearance: none;
  appearance: none;
}
.filter-bar select {
  padding-right: 26px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%2316335f'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 9px center;
  cursor: pointer;
}
.filter-bar input { width: 220px; font-family: var(--ff-sans); }
.filter-bar input::placeholder { color: var(--muted-2); letter-spacing: 0.3px; }
.filter-bar input:focus,
.filter-bar select:focus {
  outline: none;
  border-color: var(--navy-mid);
  box-shadow: 0 0 0 1px var(--navy-mid);
}
.filter-bar .count {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  color: var(--muted);
  margin-left: var(--sp-1);
  font-weight: 500;
  letter-spacing: 0.3px;
}
.filter-bar button {
  background: var(--bg);
  color: var(--navy-mid);
  font-weight: 600;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  font-size: 10px;
}
.filter-bar button:hover {
  background: var(--surface);
  border-color: var(--navy-mid);
  color: var(--navy);
}
.filter-check {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: var(--ff-sans);
  font-size: 11px;
  color: var(--text);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  letter-spacing: 0.2px;
}
.filter-check input[type="checkbox"] {
  width: 13px; height: 13px;
  accent-color: var(--navy);
  cursor: pointer;
}

/* ═══ Sortable headers ═══════════════════════════════════════════ */
th.sortable { cursor: pointer; user-select: none; transition: color .1s; }
th.sortable:hover { color: var(--gold-light) !important; }
th.sortable.sort-asc::after  { content: " ▲"; font-size: 7.5px; color: var(--gold-bright); margin-left: 3px; }
th.sortable.sort-desc::after { content: " ▼"; font-size: 7.5px; color: var(--gold-bright); margin-left: 3px; }

/* ═══ Org grid ═══════════════════════════════════════════════════ */
.division-section { margin-bottom: var(--sp-6); }
.division-title {
  font-family: var(--ff-sans);
  font-size: 10.5px;
  font-weight: 800;
  color: var(--navy);
  letter-spacing: 2.0px;
  text-transform: uppercase;
  padding: var(--sp-5) 0 var(--sp-2);
  border-bottom: 1px solid var(--navy);
  margin-bottom: var(--sp-3);
  position: relative;
}
.division-title::after {
  content: '';
  position: absolute;
  left: 0; bottom: -1px;
  width: 56px; height: 2px;
  background: var(--gold-bright);
}
.org-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--sp-2);
  margin-top: var(--sp-2);
}
.org-card {
  border: 1px solid var(--border);
  border-top: 2px solid var(--navy);
  padding: var(--sp-3) var(--sp-4);
  background: var(--bg);
  transition: background 0.12s, border-color 0.12s, transform 0.12s;
}
.org-card:hover {
  background: var(--paper);
  border-top-color: var(--gold-bright);
  transform: translateY(-1px);
}
.org-card a { display: block; text-decoration: none; }
.org-card .code {
  font-family: var(--ff-mono);
  font-size: 18px;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: -0.4px;
  line-height: 1;
}
.org-card .name {
  font-family: var(--ff-sans);
  font-size: 10px;
  color: var(--muted);
  margin-top: 4px;
  letter-spacing: 0.2px;
}

/* ═══ Org level sections ═════════════════════════════════════════ */
.level-section { margin-bottom: var(--sp-5); }
.level-header {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-4);
  background: var(--navy);
  border-bottom: 1px solid var(--gold-bright);
}
.level-header .team-name {
  font-family: var(--ff-sans);
  font-weight: 700;
  font-size: 12px;
  color: #fff;
  letter-spacing: 0.5px;
}
.level-header .league {
  font-family: var(--ff-sans);
  font-size: 10.5px;
  color: rgba(255,255,255,0.62);
  letter-spacing: 0.4px;
}
.level-section .tbl-wrap { border-top: none; }

/* ═══ Park / MLE factor coloring (heat scale, calmer than red/blue) ═══ */
.pf-hi5 { color: #6e2912; font-weight: 700; }
.pf-hi4 { color: #8a3a16; font-weight: 600; }
.pf-hi3 { color: #a85320; }
.pf-neu { color: var(--muted); }
.pf-lo3 { color: #2c5e9e; }
.pf-lo4 { color: #224f8a; font-weight: 600; }
.pf-lo5 { color: #16335f; font-weight: 700; }

.mf-hi3 { color: #8a3a16; font-weight: 600; }
.mf-hi2 { color: #a85320; }
.mf-neu { color: var(--muted); }
.mf-lo2 { color: #2c5e9e; }
.mf-lo3 { color: #224f8a; font-weight: 600; }

/* ═══ Career totals ══════════════════════════════════════════════ */
tbody tr.career-act-row {
  background: var(--tint-mid);
  font-weight: 700;
  border-top: 1px solid var(--navy);
}
tbody tr.career-act-row:hover { background: #cdd9e8 !important; }
tbody tr.career-all-row {
  background: var(--tint);
  font-weight: 700;
  border-top: 1px solid var(--border-2);
}
tbody tr.career-all-row:hover { background: var(--tint-mid) !important; }
tbody tr.per162-row {
  background: var(--surface);
  font-style: italic;
  border-bottom: 1px solid var(--border-2);
  color: var(--text-2);
}
tbody tr.per162-row td { color: var(--text-2); }
tbody tr.per162-row:hover { background: var(--surface-2) !important; }

/* ═══ Footer ═════════════════════════════════════════════════════ */
.site-footer {
  margin-top: var(--sp-7);
  padding: var(--sp-5) var(--sp-6);
  border-top: 2px solid var(--navy);
  color: var(--muted);
  font-family: var(--ff-sans);
  font-size: 11px;
  text-align: left;
  background: var(--surface);
  letter-spacing: 0.2px;
  line-height: 1.7;
  position: relative;
}
.site-footer::before {
  content: '';
  position: absolute;
  left: var(--sp-6); top: -2px;
  width: 64px; height: 2px;
  background: var(--gold-bright);
}
.site-footer a {
  color: var(--navy-mid);
  font-weight: 600;
  border-bottom: 1px solid var(--gold-dim);
}
.site-footer a:hover {
  color: var(--navy);
  border-bottom-color: var(--gold);
  text-decoration: none;
}

/* ═══ Comps / chart ══════════════════════════════════════════════ */
.comps-chart-container {
  height: 280px;
  margin: var(--sp-3) 0 var(--sp-2);
  background: var(--paper);
  border: 1px solid var(--border);
  padding: var(--sp-3);
  box-shadow: var(--shadow-1);
}
.comps-table td,
.comps-table th { font-size: 9px; }
.comp-note {
  font-family: var(--ff-sans);
  font-size: 11.5px;
  color: var(--text-2);
  background: var(--paper);
  border-left: 2px solid var(--gold-bright);
  padding: var(--sp-3) var(--sp-4);
  margin: var(--sp-2) 0 var(--sp-3);
  line-height: 1.6;
  letter-spacing: 0.1px;
}
.comp-note b { color: var(--navy); font-weight: 700; }
.comp-note em { color: var(--text-2); font-style: italic; }
a.comp-link { color: var(--navy-mid); font-weight: 600; }
a.comp-link:hover { color: var(--navy); }
.comp-leg-dot {
  display: inline-block;
  width: 8px; height: 8px;
  margin-right: 6px;
  vertical-align: middle;
}
.comp-leg-item {
  white-space: nowrap;
  color: var(--text-2);
  font-family: var(--ff-sans);
  font-size: 11px;
  letter-spacing: 0.2px;
}

/* ═══ WAR color utility (career dashboard rows) ══════════════════
   Uses heat scale tokens for consistency with table cells.        */
.war-mvp    { color: #6e2912; font-weight: 700; }
.war-as     { color: #8a3a16; font-weight: 700; }
.war-star   { color: #a85320; font-weight: 600; }
.war-start  { color: var(--text); }
.war-bench  { color: var(--muted); }

/* ═══ Leaders grid (multi-stat micro tables) ═════════════════════ */
.leader-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-4);
  margin-top: var(--sp-4);
}
.leader-block { min-width: 0; }
.leader-block h3 {
  font-family: var(--ff-sans);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.6px;
  color: var(--navy);
  margin: 0;
  border-bottom: 1px solid var(--navy);
  padding-bottom: var(--sp-1);
  position: relative;
}
.leader-block h3::after {
  content: '';
  position: absolute;
  left: 0; bottom: -1px;
  width: 32px; height: 1px;
  background: var(--gold-bright);
}
.leader-table { width: 100%; border-collapse: collapse; font-family: var(--ff-mono); font-size: 11px; }
.leader-table th,
.leader-table td { padding: 2px var(--sp-1); text-align: right; white-space: nowrap; }
.leader-table th.left,
.leader-table td.left { text-align: left; max-width: 140px; overflow: hidden; text-overflow: ellipsis; }
.leader-table th.rk,
.leader-table td.rk { color: var(--muted-2); width: 22px; font-size: 10px; }
.leader-table th.org,
.leader-table td.org { color: var(--muted); font-size: 10px; }
.leader-table td.val { font-weight: 700; color: var(--navy); }
.leader-table th {
  font-family: var(--ff-sans);
  font-size: 9px; font-weight: 700;
  color: rgba(255,255,255,0.86);
  text-transform: uppercase; letter-spacing: 0.8px;
  border-bottom: none;
  background: var(--navy);
  padding: var(--sp-1) var(--sp-2);
}
.leader-table tbody tr { border-bottom: 1px solid var(--border); }
.leader-table tbody tr:hover { background: var(--row-hover); }

/* ═══ Team banner (depth chart) ══════════════════════════════════ */
.team-banner {
  background: var(--navy);
  color: #fff;
  padding: var(--sp-4) var(--sp-5) var(--sp-3);
  margin-bottom: var(--sp-4);
  border-left: 4px solid var(--gold-bright);
  position: relative;
  overflow: hidden;
}
.team-banner::after {
  /* gold dotted right rule — Bloomberg flag */
  content: '';
  position: absolute;
  right: 0; top: 0; bottom: 0;
  width: 96px;
  background-image: repeating-linear-gradient(
    135deg,
    transparent 0 6px,
    rgba(216,169,85,0.04) 6px 7px
  );
  pointer-events: none;
}
.team-banner-main {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  margin-bottom: var(--sp-1);
}
.team-banner-name {
  font-family: var(--ff-sans);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.4px;
  text-transform: none;
  color: #fff;
  font-variant-numeric: lining-nums;
}
.team-banner-year {
  font-family: var(--ff-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 3px;
  color: var(--gold-light);
}
.team-banner-meta {
  font-family: var(--ff-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.4px;
  display: flex;
  gap: var(--sp-5);
  color: rgba(255,255,255,0.75);
  margin-top: 3px;
}
.tbm-rec { color: rgba(255,255,255,0.95); font-weight: 700; font-family: var(--ff-mono); }
/* R239v (rd9 #3): division context pill in team banner */
.tbm-div {
  color: rgba(255,255,255,0.92);
  font-weight: 600;
  font-family: var(--ff-sans);
  font-size: 12px;
  padding-left: 14px;
  border-left: 1px solid rgba(255,255,255,0.18);
  margin-left: 4px;
}
.tbm-pf::before {
  content: "PARK HR  ";
  opacity: 0.55;
  font-size: 9px;
  letter-spacing: 1.4px;
  font-weight: 700;
}

/* ═══ Depth chart grid + per-position blocks ═════════════════════ */
.dc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6); align-items: start; }
.dc-col { min-width: 0; }
.dc-pos-block { margin-bottom: var(--sp-4); }
.dc-pos-block h3 {
  font-family: var(--ff-sans);
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.6px;
  color: var(--navy);
  margin: 0;
  border-bottom: 1px solid var(--navy);
  padding: var(--sp-2) var(--sp-3) 5px;
  position: relative;
}
.dc-pos-block h3::before {
  /* subtle gold gleam on the left */
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--gold-bright);
}
.dc-table { width: 100%; border-collapse: collapse; font-family: var(--ff-mono); font-size: 11px; }
.dc-table th,
.dc-table td { padding: 2px var(--sp-1); text-align: right; white-space: nowrap; }
.dc-table th.left,
.dc-table td.left { text-align: left; }
.dc-table thead th {
  font-family: var(--ff-sans);
  font-size: 9px; font-weight: 700;
  color: rgba(255,255,255,0.85);
  text-transform: uppercase; letter-spacing: 0.8px;
  border-bottom: none;
  background: var(--navy);
  padding: var(--sp-1) var(--sp-2);
}
.dc-table tbody tr { border-bottom: 1px solid var(--border); }
.dc-table tbody tr:first-child td { font-weight: 700; }
.dc-table tbody tr:hover { background: var(--row-hover); }
.dc-table td.w1 { font-weight: 600; }
.dc-table td.w3 { color: var(--navy); font-weight: 700; }
/* R123: Replacement-level fill row */
.dc-table tr.dc-repl-row td { color: var(--muted); font-style: italic; background: rgba(0,0,0,0.02); }
.dc-table tr.dc-repl-row .dc-repl-name { color: var(--muted-2); font-weight: 500; }
/* R125: Position totals row */
.dc-table tr.dc-totals-row td { background: var(--tint); border-top: 1px solid var(--navy); border-bottom: 1px solid var(--navy); }

/* ═══ Standings ══════════════════════════════════════════════════ */
.standings-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
  margin-top: var(--sp-4);
}
.standings-division { min-width: 0; }
.standings-division h3 {
  font-family: var(--ff-sans);
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.6px;
  color: var(--navy);
  margin: 0;
  border-bottom: 1px solid var(--navy);
  padding: var(--sp-2) var(--sp-3) 5px;
  background: transparent;
  position: relative;
}
.standings-division h3::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--gold-bright);
}
.standings-table { width: 100%; border-collapse: collapse; font-family: var(--ff-mono); font-size: 11.5px; }
.standings-table th,
.standings-table td { padding: 3px var(--sp-1); text-align: right; white-space: nowrap; }
.standings-table th.left,
.standings-table td.left { text-align: left; }
.standings-table thead th {
  font-family: var(--ff-sans);
  font-size: 9.5px; font-weight: 700;
  color: rgba(255,255,255,0.86);
  text-transform: uppercase; letter-spacing: 0.8px;
  border-bottom: none;
  background: var(--navy);
  padding: 4px var(--sp-2);
}
.standings-table tbody tr { border-bottom: 1px solid var(--border); }
.standings-table tbody tr:hover { background: var(--row-hover); }
.standings-table td.war-val { font-weight: 700; color: var(--navy); }
.standings-table tr:first-child td { font-weight: 600; }
.standings-table tr.div-leader td {
  font-weight: 700;
  background: rgba(176,122,43,0.05);
  border-top: 1px solid var(--navy);
}
.standings-table tr.div-leader td:first-child {
  position: relative;
  box-shadow: inset 3px 0 0 var(--gold-bright);
}

/* ═══ Depth chart fixed-width columns ════════════════════════════ */
.dc-table { table-layout: fixed; }
.dc-table colgroup col.col-name { width: auto; }
.dc-table colgroup col.col-pa   { width: 44px; }
.dc-table colgroup col.col-wrc  { width: 44px; }
.dc-table colgroup col.col-fld  { width: 50px; }
.dc-table colgroup col.col-war  { width: 50px; }
.dc-table colgroup col.col-ip   { width: 44px; }
.dc-table colgroup col.col-gs   { width: 44px; }
.dc-table colgroup col.col-era  { width: 44px; }
.dc-table colgroup col.col-fip  { width: 44px; }
.dc-table colgroup col.col-k    { width: 50px; }
.dc-table tbody tr:first-child td {
  font-weight: 700;
  background: rgba(176,122,43,0.04);
}

.dc-group-divider {
  font-family: var(--ff-sans);
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.8px;
  color: var(--navy);
  padding: var(--sp-3) 0 var(--sp-1) var(--sp-1);
  margin-top: var(--sp-1);
  border-top: 1px solid var(--border);
  position: relative;
}
.dc-group-divider::after {
  content: '';
  position: absolute;
  left: 0; top: -1px;
  width: 24px; height: 1px;
  background: var(--gold-bright);
}
.dc-col .dc-group-divider:first-child {
  border-top: none;
  margin-top: 0;
  padding-top: var(--sp-1);
}

/* ═══ Team WAR summary bar (depth chart top) ═════════════════════ */
.war-summary-bar {
  display: flex; align-items: center; gap: var(--sp-5);
  background: var(--navy); color: #fff;
  padding: var(--sp-3) var(--sp-5);
  margin-bottom: var(--sp-4);
  flex-wrap: wrap;
  border-left: 2px solid var(--gold-bright);
  box-shadow: var(--shadow-1);
}
.war-summary-totals { display: flex; gap: var(--sp-4); flex-shrink: 0; }
.war-summary-total {
  display: flex; flex-direction: column; align-items: center;
  min-width: 60px; padding: 0 var(--sp-2);
  border-right: 1px solid rgba(255,255,255,0.10);
}
.war-summary-total:last-child { border-right: none; }
.war-summary-total--main .wst-val {
  font-family: var(--ff-mono);
  font-size: 22px;
  font-weight: 700;
  color: var(--gold-light);
  letter-spacing: -0.4px;
}
.wst-label {
  font-family: var(--ff-sans);
  font-size: 8.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  opacity: 0.62;
}
.wst-val {
  font-family: var(--ff-mono);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.2px;
}
.war-summary-tiles { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.war-tiles-group { display: flex; gap: 4px; flex-wrap: wrap; }
.war-tiles-sep {
  width: 1px; height: 36px;
  background: rgba(255,255,255,0.18);
  margin: 0 var(--sp-1);
}
.war-tile {
  display: flex; flex-direction: column; align-items: center;
  background: rgba(255,255,255,0.06);
  padding: 4px var(--sp-2); min-width: 40px;
  border-bottom: 1px solid transparent;
  transition: background .12s, border-color .12s;
}
.war-tile:hover {
  background: rgba(255,255,255,0.10);
  border-bottom-color: var(--gold-bright);
}
.war-tile-pitch {
  background: rgba(176,122,43,0.15);
}
.war-tile-pitch:hover { background: rgba(176,122,43,0.22); }
.war-tile-pos {
  font-family: var(--ff-sans);
  font-size: 8px; font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  opacity: 0.75;
}
.war-tile-val {
  font-family: var(--ff-mono);
  font-size: 12px; font-weight: 700;
  letter-spacing: -0.2px;
}

/* ═══ League summary banner ═════════════════════════════════════ */
.league-summary {
  display: flex; align-items: stretch; gap: 0;
  background: var(--navy); color: #fff;
  margin-bottom: var(--sp-5);
  overflow: hidden;
  border-left: 2px solid var(--gold-bright);
  box-shadow: var(--shadow-1);
}
.league-summary-champion {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: var(--sp-3) var(--sp-5);
  background: linear-gradient(180deg, rgba(216,169,85,0.18) 0%, rgba(216,169,85,0.10) 100%);
  min-width: 160px;
  border-right: 1px solid rgba(255,255,255,0.10);
  position: relative;
}
.league-summary-champion::before {
  content: 'CHAMPION';
  position: absolute;
  top: 4px; left: 50%;
  transform: translateX(-50%);
  font-family: var(--ff-sans);
  font-size: 7px;
  font-weight: 800;
  letter-spacing: 2.6px;
  color: var(--gold-bright);
}
.lsc-label {
  display: none;   /* replaced by ::before flag above */
}
.lsc-team {
  font-family: var(--ff-sans);
  font-size: 28px;
  font-weight: 700;
  color: var(--gold-light);
  text-decoration: none;
  letter-spacing: -0.5px;
  margin-top: var(--sp-2);
}
.lsc-team:hover { color: #fff; }
.lsc-w {
  font-family: var(--ff-mono);
  font-size: 11px;
  font-weight: 700;
  opacity: 0.78;
  letter-spacing: 0.4px;
  margin-top: 2px;
}
.league-summary-divisions {
  display: flex; align-items: stretch; flex-wrap: wrap; flex: 1;
}
.league-summary-tile {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: var(--sp-2) var(--sp-4);
  border-left: 1px solid rgba(255,255,255,0.08);
  min-width: 100px;
  flex: 1;
  transition: background .12s;
}
.league-summary-tile:hover { background: rgba(255,255,255,0.04); }
.lst-div {
  font-family: var(--ff-sans);
  font-size: 8px; font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.6px;
  opacity: 0.55;
}
.lst-team {
  font-family: var(--ff-mono);
  font-size: 17px;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  letter-spacing: -0.2px;
  margin-top: 2px;
}
.lst-team:hover { color: var(--gold-light); }
.lst-w {
  font-family: var(--ff-mono);
  font-size: 10px;
  font-weight: 600;
  opacity: 0.62;
  margin-top: 1px;
}

/* ═══ Playoff picture ═══════════════════════════════════════════ */
.playoff-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
}
.playoff-picture {
  background: var(--bg);
  border: 1px solid var(--border);
  overflow: hidden;
  box-shadow: var(--shadow-1);
}
.playoff-picture-label {
  background: var(--navy);
  color: var(--gold-light);
  font-family: var(--ff-sans);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.8px;
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--gold-bright);
}
.playoff-table { width: 100%; border-collapse: collapse; font-family: var(--ff-mono); font-size: 11px; }
.playoff-table th,
.playoff-table td { padding: 2px var(--sp-1); text-align: right; white-space: nowrap; }
.playoff-table th.left,
.playoff-table td.left { text-align: left; }
.playoff-table thead th {
  font-family: var(--ff-sans);
  font-size: 9.5px; font-weight: 700;
  color: rgba(255,255,255,0.78);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  background: rgba(10,26,51,0.85);
  padding: 3px var(--sp-2);
}
.playoff-table tbody tr { border-bottom: 1px solid var(--border); }
.playoff-table tbody tr:hover { background: var(--row-hover); }
.playoff-slot {
  display: inline-block;
  padding: 1px 6px;
  font-family: var(--ff-sans);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}
.playoff-slot-div { background: var(--navy); color: #fff; }
.playoff-slot-wc  { background: var(--gold); color: var(--navy); }
/* po-high/mid/low already defined earlier with refined heat scale */

/* ═══ Depth chart IL/UTIL badges (override the earlier minimal one) ═══ */
.util-badge {
  display: inline-block;
  background: var(--navy-mid);
  color: var(--gold-light);
  font-family: var(--ff-sans);
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.6px;
  padding: 1px 5px;
  vertical-align: middle;
  margin-left: 4px;
  line-height: 1.4;
  text-transform: uppercase;
}
.depth-chart-updated {
  font-family: var(--ff-sans);
  font-size: 10.5px;
  color: var(--muted);
  margin: var(--sp-1) 0 var(--sp-3);
  padding: 0;
  letter-spacing: 0.3px;
  font-style: italic;
}

/* ═══ ROS toggle pill (square — no rounded radius) ═══════════════ */
.ros-toggle {
  display: inline-flex;
  border: 1px solid rgba(255,255,255,0.20);
  overflow: hidden;
  font-family: var(--ff-sans);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  vertical-align: middle;
  margin-left: 6px;
  cursor: pointer;
  user-select: none;
}
.ros-toggle span {
  padding: 2px 7px;
  color: rgba(255,255,255,0.50);
  background: transparent;
  transition: background .15s, color .15s;
}
.ros-toggle span:hover { color: rgba(255,255,255,0.85); }
.ros-toggle span.active {
  background: var(--gold-bright);
  color: var(--navy);
}
/* Compact variant for filter-bar placement */
.war-toggles { font-family: var(--ff-sans); }
.ros-toggle.compact { font-size: 9.5px; height: 24px; }
.ros-toggle.compact span { padding: 0 8px; line-height: 24px; min-width: 0; }
/* R149: Clean segmented control for WAR park/window toggle */
.war-toggle-group { display:flex; align-items:center; gap:6px; }
.war-toggle-label {
  font-size: 9px; font-weight:700; color: var(--muted);
  text-transform: uppercase; letter-spacing: 1.0px;
}
.war-segctrl {
  display:inline-flex;
  border: 1px solid var(--border-2);
  border-radius: 3px;
  background: #fff;
  overflow: hidden;
}
.war-segctrl button {
  appearance: none; cursor: pointer;
  font-family: var(--ff-sans);
  font-size: 10px; font-weight: 600;
  padding: 4px 10px;
  background: transparent;
  border: none;
  border-right: 1px solid var(--border);
  color: var(--muted);
  letter-spacing: 0.4px;
  transition: all 0.08s;
}
.war-segctrl button:last-child { border-right: none; }
.war-segctrl button:hover { color: var(--navy); background: rgba(11,25,52,0.04); }
.war-segctrl button.active {
  background: var(--navy);
  color: var(--gold-bright);
}

/* ═══ Comps layout (R171) — table FULL-WIDTH on top, chart below ═══════
 * Two-column grid was forcing the comps table into a narrow half-width
 * pane and triggering horizontal scroll on every comp row. Stacking
 * vertically gives the table full width and eliminates the scroll. */
.comps-layout {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-top: var(--sp-2);
}
.comps-layout > .tbl-wrap {
  margin: 0;
  overflow-x: auto;     /* still allow if very narrow viewport */
  order: 1;             /* table FIRST (above chart) */
}
.comps-layout > .comps-chart-container {
  height: 240px !important;
  margin: 0;
  order: 2;             /* chart SECOND (below table) */
}

/* ═══ Search dropdown polish ════════════════════════════════════ */
#search-results {
  overflow: hidden;
  box-shadow: 0 12px 28px rgba(10,26,51,0.18), 0 2px 6px rgba(10,26,51,0.10) !important;
  border: 1px solid var(--border-2) !important;
  background: var(--bg) !important;
  margin-top: 4px;
}
#search-results a {
  display: block;
  padding: var(--sp-2) var(--sp-3) !important;
  color: var(--text) !important;
  text-decoration: none;
  font-family: var(--ff-sans) !important;
  font-size: 12px !important;
  border-bottom: 1px solid var(--border) !important;
  transition: background .10s, padding-left .10s, border-left-color .10s;
  border-left: 2px solid transparent;
  letter-spacing: 0.1px;
}
#search-results a:hover {
  background: var(--paper) !important;
  border-left: 2px solid var(--gold-bright);
  padding-left: 14px !important;
  text-decoration: none;
}
#search-results a:last-child { border-bottom: none !important; }
#search-results a b { color: var(--navy); font-weight: 700; }

/* ═══ Latest-build report styling ════════════════════════════════
   Build-report changelog: hairline-separated rows with gold ticks. */
.build-stats {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 0;
  margin: var(--sp-3) 0 var(--sp-6);
  border: 1px solid var(--border);
  border-top: 2px solid var(--navy);
  background: var(--bg);
  box-shadow: var(--shadow-1);
}
.build-stats .bs-tile {
  padding: var(--sp-3) var(--sp-3);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
  transition: background .12s;
}
.build-stats .bs-tile:last-child { border-right: none; }
.build-stats .bs-tile:hover { background: var(--paper); }
.build-stats .bs-tile::before {
  content: '';
  position: absolute;
  left: 0; top: 0;
  width: 100%; height: 1px;
  background: var(--gold-bright);
  opacity: 0;
  transition: opacity .12s;
}
.build-stats .bs-tile:hover::before { opacity: 0.6; }
.bs-label {
  font-family: var(--ff-sans);
  font-size: 8.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  color: var(--muted);
}
.bs-val {
  font-family: var(--ff-mono);
  font-size: 17px;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: -0.4px;
  line-height: 1.05;
}
.bs-num { color: var(--gold); }
@media (max-width: 1280px) { .build-stats { grid-template-columns: repeat(5, 1fr); } .build-stats .bs-tile:nth-child(5) { border-right: none; } }
@media (max-width: 768px)  { .build-stats { grid-template-columns: repeat(3, 1fr); } .build-stats .bs-tile { border-right: 1px solid var(--border) !important; border-bottom: 1px solid var(--border); } }

.build-report > h2 + ul {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--sp-5);
  border-left: 1px solid var(--border);
  background: var(--bg);
}
.build-report > h2 + ul > li {
  position: relative;
  padding: var(--sp-2) var(--sp-3) var(--sp-2) var(--sp-5);
  font-family: var(--ff-sans);
  font-size: 12px;
  line-height: 1.55;
  color: var(--text);
  border-bottom: 1px solid var(--border);
  letter-spacing: 0.1px;
  transition: background .10s, padding-left .10s;
}
.build-report > h2 + ul > li:hover {
  background: var(--paper);
  padding-left: calc(var(--sp-5) + 4px);
}
.build-report > h2 + ul > li:last-child { border-bottom: none; }
.build-report > h2 + ul > li::before {
  content: '';
  position: absolute;
  left: 16px; top: calc(50% - 2.5px);
  width: 5px; height: 5px;
  background: var(--gold-bright);
}
.build-report > h2 + ul > li b { color: var(--navy); font-weight: 700; }
.build-report > h2 + ul > li a { color: var(--navy-mid); border-bottom: 1px solid var(--gold-dim); font-weight: 600; }
.build-report > h2 + ul > li a:hover { color: var(--navy); border-bottom-color: var(--gold); text-decoration: none; }

/* ═══ "Career Path Comps" gold note refinement ══════════════════ */
.comp-note {
  position: relative;
  font-family: var(--ff-sans);
}

/* ═══ WAR-dashboard heat (per-cell) — let inline colors ride ═════ */
#war-table tbody tr td:first-child { color: var(--muted-2); }
#war-table tbody tr:hover td:first-child {
  color: var(--navy);
  font-weight: 600;
}
#war-table thead tr.solo th { font-size: 9.5px; }

/* ═══ Compact prose blocks (for prospects subtitle, etc.) ═══════ */
main > p:not(.subtitle):not(.comp-note):not(.depth-chart-updated) {
  font-family: var(--ff-sans);
  font-size: 12px;
  color: var(--text-2);
  line-height: 1.55;
  margin-bottom: var(--sp-3);
  max-width: 90ch;
}

/* ═══ Player card "diff vs prior" pill (HR -5%, BB +4%) ═════════ */
/* These are inline-styled in HTML; keep them legible — no override. */

/* ═══ Responsive ═════════════════════════════════════════════════ */
@media (max-width: 1280px) {
  main { padding: var(--sp-5) var(--sp-5) var(--sp-7); }
}
@media (max-width: 1200px) {
  .leader-grid { grid-template-columns: repeat(3, 1fr); }
  .standings-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1100px) {
  .comps-layout { grid-template-columns: 1fr; }
}
@media (max-width: 960px) {
  .org-grid { grid-template-columns: repeat(3, 1fr); }
  .leader-grid { grid-template-columns: repeat(2, 1fr); }
  main { padding: var(--sp-4) var(--sp-4) var(--sp-6); }
  .player-card-header {
    flex-direction: column;
    align-items: stretch;
  }
  .pch-right { align-items: flex-start; padding-top: var(--sp-3); border-top: 1px solid var(--border); }
  .pch-scout-tools { align-items: flex-start; }
  .pch-scout-tool  { justify-content: flex-start; }
  .pch-name { font-size: 26px; }
}
/* R239ab (rd13 #3): bump breakpoint 860→960px so iPad portrait (768px)
   no longer clips long pitcher names — the 2-col layout left only
   ~74px for the name column at 768px after stats took 276px. */
@media (max-width: 960px) {
  .dc-grid { grid-template-columns: 1fr; }
  .playoff-grid { grid-template-columns: 1fr; }
  .league-summary { flex-direction: column; }
  .league-summary-divisions { flex-direction: column; }
  .league-summary-tile { border-left: none; border-top: 1px solid rgba(255,255,255,0.08); padding: var(--sp-2) var(--sp-4); }
}
@media (max-width: 600px) {
  .org-grid { grid-template-columns: repeat(2, 1fr); }
  .leader-grid { grid-template-columns: 1fr 1fr; }
  .standings-grid { grid-template-columns: 1fr; }
  .player-bio { gap: 10px; }
  .filter-bar input { width: 100%; max-width: 240px; }
  main { padding: var(--sp-3) var(--sp-3) var(--sp-5); }
  .war-summary-bar { flex-direction: column; align-items: flex-start; gap: var(--sp-3); }
  .playoff-grid { grid-template-columns: 1fr; }
  .pch-name { font-size: 22px; }
  h1 { font-size: 22px; }
  .header-brand { padding: 0 16px; min-width: auto; }
  .header-search { padding: 0 8px; }
  .header-search input { width: 100% !important; min-width: 0; }
  .header-right { display: none; }
  .pch-stats { padding: var(--sp-3) var(--sp-3); }
  .pch-val { font-size: 18px; }
  .pch-stat { padding-right: var(--sp-3); margin-right: var(--sp-3); min-width: 44px; }
  /* R239z (mobile audit #5): filter bar reflow — search on its own row at top,
     selects pair up 2-per-row, count goes right-aligned on its own row */
  .filter-bar { gap: 6px; padding: var(--sp-1) 0; }
  .filter-bar input { max-width: none; flex: 1 1 100%; order: -1; }
  .filter-bar select { flex: 1 1 calc(50% - 3px); min-width: 0; }
  .filter-bar .count { flex: 1 1 100%; text-align: right; }
  /* R239z (mobile audit #4): footer 3-col stacks vertically with left-aligned
     content. Mid-line bullet wraps were reading as render bugs. */
  .site-footer > div { flex-direction: column; gap: 8px; }
  .site-footer > div > div { width: 100%; text-align: left; }
  .site-footer { padding: var(--sp-3) var(--sp-3); font-size: 10.5px; }
  /* R239z (mobile audit #2): pch-stats hero strip — switch to 4-col grid
     so 8-10 pills wrap as exactly 3 tidy rows instead of jagged flex-wrap */
  .pch-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px 0; padding: 8px 10px; }
  .pch-stat { border-right: 1px solid rgba(255,255,255,0.08); padding-right: 6px; margin-right: 0; min-width: 0; }
  .pch-stat:nth-child(4n) { border-right: none; }
}
/* R239z (mobile audit #3): division strip 6-tile awkward orphan zone
   between iPad portrait (768) and tablet (~860) where flex-wrap leaves
   stranded 2-tile second row. Force 3-col grid in that band. */
@media (max-width: 900px) and (min-width: 601px) {
  .league-summary-divisions { display: grid; grid-template-columns: repeat(3, 1fr); }
  .league-summary-tile { min-width: 0; }
}
/* R239z (mobile audit #1): tables — at 600px, hide tertiary columns;
   at 414px, scale font down. Generic class system: tag low-priority cells
   with .col-secondary or .col-tertiary at table-render time. */
@media (max-width: 600px) {
  table th.col-secondary, table td.col-secondary { display: none; }
}
@media (max-width: 414px) {
  table th.col-tertiary, table td.col-tertiary { display: none; }
  table { font-size: 9px; }
}

/* R239au (mobile-spec #1): hero tiles. The 4-tile grid uses inline
   style="grid-template-columns:repeat(4,minmax(0,1fr))" with each tile
   carrying inline min-width:240px, forcing a 960px overflow on phones.
   Override with !important since the inline can't be removed cleanly. */
@media (max-width: 700px) {
  .hero-tile { min-width: 0 !important; flex: 1 1 100% !important; }
}
@media (max-width: 700px) and (min-width: 481px) {
  /* 2-col on mid-tablet/large phone */
  div[style*="repeat(4,minmax(0,1fr))"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 480px) {
  /* 1-col on small phones */
  div[style*="repeat(4,minmax(0,1fr))"] { grid-template-columns: 1fr !important; }
}
/* R239au (mobile-spec #2): Best-at-Position grid. 9 position cols × 34px
   each at 360px = unreadable abstract bars. Collapse the 9-col + label
   grid to a manageable 5-col below 760px (overflow-x scroll), 1-col below
   480px. Targets the inline "54px repeat(9, minmax(0, 1fr))" pattern. */
@media (max-width: 760px) {
  div[style*="grid-template-columns:54px"][style*="repeat(9,"] {
    grid-template-columns: 50px repeat(5, minmax(0, 1fr)) !important;
    overflow-x: auto;
  }
}
@media (max-width: 480px) {
  div[style*="grid-template-columns:54px"][style*="repeat(9,"] {
    grid-template-columns: 50px repeat(3, minmax(0, 1fr)) !important;
  }
}
/* R239au (mobile-spec #4): pitcher Statcast bar grid. Inline 1fr 1fr at
   max-width 680px overflows below 440px. Stack to single column on phones. */
@media (max-width: 600px) {
  div[style*="grid-template-columns:1fr 1fr"][style*="max-width:680px"] {
    grid-template-columns: 1fr !important;
    max-width: 100% !important;
  }
}

/* ═══ Headshot / team-logo classes (R239y rd12 #3) ═══════════════════
   Was: every leaderboard row (4,500-6,200 of them per page) carried the
   full inline style. ~530KB savings on index, ~720KB on pitchers, ~360KB
   on war-dashboard. Pure search-and-replace at the row-render helpers,
   no template surgery. Width/height attrs prevent CLS on lazy-load. */
/* Silo cutout headshots — alpha PNG from MLB's silo endpoint + stacked
   drop-shadow filter that traces the natural head shape (no circle frame).
   The 8 directions of drop-shadow simulate a white outline around the
   visible alpha edge; the 9th adds a soft drop shadow under the silhouette.
   Outline is 1px (was 1.5px) for a slightly tighter, more refined look. */
.hs-22, .hs-24, .hs-28, .hs-32 {
  object-fit: contain;
  background: transparent;
  vertical-align: middle;
  flex-shrink: 0;
  border: 0;
}
/* Apply to BOTH old midfield (spots) and new silo URLs so the look is
   consistent even on legacy/cached HTML. The silo endpoint is the
   img.mlbstatic.com/mlb-photos pattern. */
img[src*="img.mlbstatic.com/mlb-photos"],
img[src*="midfield.mlbstatic.com/v1/people/"] {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  object-fit: contain !important;
  /* R301b: 8-direction drop-shadows at EQUAL magnitude. Previous mix
     of 1px cardinals and 0.7px diagonals caused asymmetric stacking
     (cardinals wider than diagonals after filter compound). All-1px
     gives a uniform ring. User: "outline looks bigger on the left
     side than the right". */
  filter:
    drop-shadow( 1px    0     0 #fff)
    drop-shadow(-1px    0     0 #fff)
    drop-shadow( 0      1px   0 #fff)
    drop-shadow( 0     -1px   0 #fff)
    drop-shadow( 1px    1px   0 #fff)
    drop-shadow(-1px    1px   0 #fff)
    drop-shadow( 1px   -1px   0 #fff)
    drop-shadow(-1px   -1px   0 #fff)
    drop-shadow( 0      2px   4px rgba(10,34,64,0.40));
}
.hs-22 { width: 22px; height: 22px; margin-right: 6px; }
.hs-24 { width: 24px; height: 24px; margin-right: 6px; }
.hs-28 { width: 28px; height: 28px; margin-right: 6px; }
.hs-32 { width: 32px; height: 32px; margin-right: 6px; }
.tlogo-12, .tlogo-14, .tlogo-16 {
  object-fit: contain;
  vertical-align: middle;
}
.tlogo-12 { width: 12px; height: 12px; }
.tlogo-14 { width: 14px; height: 14px; }
.tlogo-16 { width: 16px; height: 16px; }

/* ═══ Print ══════════════════════════════════════════════════════ */
@media print {
  /* R239s (rd6 #5): proper print stylesheet — was a 5-line stub.
     Beat reporters / scouts / FO users print matchups + trade-value
     weekly. print-color-adjust:exact is critical so colored bars
     (surplus/WAR) actually ink rather than printing as white space. */
  .site-header, .site-nav, .filter-bar, .ros-toggle,
  .footer, footer, #search-results, .vintage-stamp,
  .changelog, .footer-links { display: none !important; }
  body { background: #fff; color: #000; font-size: 10pt; }
  main { max-width: 100%; padding: 0; margin: 0; }
  a { color: #000; text-decoration: none; }
  a[href]:not([href^="#"])::after {
    content: " (" attr(href) ")"; font-size: 8pt; color: #555;
  }
  table { page-break-inside: avoid; font-size: 9pt; border-collapse: collapse; }
  thead { display: table-header-group; }   /* repeat headers across pages */
  tr { page-break-inside: avoid; }
  th, td { border: 1px solid #999 !important; padding: 3px 5px !important;
           background: #fff !important; }
  .player-card-header, [class*="card"], section {
    box-shadow: none !important; border: 1px solid #999 !important;
    background: #fff !important;
  }
  /* Force background colors so surplus / WAR bars ink rather than vanish */
  * { -webkit-print-color-adjust: exact !important;
      print-color-adjust: exact !important; }
  thead tr.solo th { position: static; background: #eee !important; }
  h1 { font-size: 16pt; } h2 { font-size: 13pt; }
}

/* ═══ Touch-tap tooltip fallback ═════════════════════════════════════
   R239s (rd6 #2): On hover-less devices (phones/tablets), every
   title="..." attribute is invisible. The site has 80+ critical
   tooltips (NTC/OPT/DEF badges, Asset Value column header, gmLI,
   recent-form context). Tap-and-hold now reveals the tooltip as a
   small dark popover above the element. */
@media (hover: none) {
  [title] { position: relative; }
  [title]:active::after {
    content: attr(title);
    position: absolute;
    left: 0; bottom: calc(100% + 4px);
    background: var(--navy, #0a1a33); color: #fff;
    font: 11px/1.3 var(--ff-sans, sans-serif);
    padding: 6px 9px; border-radius: 3px;
    white-space: normal; max-width: 240px;
    z-index: 9999;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    pointer-events: none;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   OGILVIE — UI OVERHAUL (R121-UI)
   Adds: hero marquee, inline data bars, sticky name column,
         position chips, refined nav, section cards.
   ═══════════════════════════════════════════════════════════════════════ */

.hero-tile {
  padding: var(--sp-4) var(--sp-3) var(--sp-4);
  border-right: 1px solid rgba(255,255,255,0.06);
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}
.hero-tile:last-child { border-right: none; }
/* ── 2. Inline percentile data-bars on stat cells ─────────────── */
.db-cell { position: relative; }
.db-cell .db {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--w3);
  opacity: 0.45;
  pointer-events: none;
}
.db-cell .db.db-w1 { background: var(--w1); opacity: 0.30; }
.db-cell .db.db-w2 { background: var(--w2); opacity: 0.40; }
.db-cell .db.db-w3 { background: var(--w3); opacity: 0.30; }
.db-cell .db.db-w4 { background: var(--w4); opacity: 0.55; }
.db-cell .db.db-w5 { background: var(--gold-bright); opacity: 0.85; }
.db-cell .dbv {
  position: relative;
  z-index: 1;
}

/* ── 3. Sticky Name column on leaderboard ─────────────────────── */
#lb thead tr.solo th:nth-child(2),
#lb tbody tr td:nth-child(2) {
  position: sticky;
  left: 28px;  /* width of rank column */
  z-index: 6;
  background: var(--bg);
  box-shadow: inset -1px 0 0 var(--border);
}
/* R300b/R301b: cap table + asset column width — tighter than before
   ("boxes are still way too big"). */
#lb { width: auto; max-width: 100%; }
#lb thead tr.solo th:nth-child(3),
#lb tbody tr td:nth-child(3) { width: 340px; }
#lb thead tr.solo th:nth-child(2) {
  background: var(--navy);
  z-index: 12;
  box-shadow: inset -1px 0 0 rgba(216,169,85,0.4);
}
#lb tbody tr:nth-child(even) td:nth-child(2) { background: var(--paper); }
#lb tbody tr:hover td:nth-child(2) { background: #fafafe; }
#lb tbody tr td:nth-child(2) a { font-weight: 600; color: var(--navy); }
#lb tbody tr td:nth-child(2) a:hover { color: var(--gold); }

/* ── 4. Position chip beside player name ──────────────────────── */
.pos-chip {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 5px;
  font-family: var(--ff-sans);
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.8px;
  background: var(--surface-2);
  color: var(--navy-mid);
  border: 1px solid var(--border-2);
  vertical-align: 1px;
  text-transform: uppercase;
}
.pos-chip.pos-C  { background: #fef0e0; color: #7a3a10; border-color: #f0d8b8; }
.pos-chip.pos-IF { background: #e6efff; color: var(--navy-mid); border-color: #cdd9ee; }
.pos-chip.pos-OF { background: #e3f1e7; color: #0e5a3a; border-color: #c5e2ce; }
.pos-chip.pos-DH { background: #f4e8d2; color: #6e4a12; border-color: #e3d2a8; }
.pos-chip.pos-P  { background: #f0e0e8; color: #6a1d3a; border-color: #e0c5d2; }

/* R267: removed stale .site-nav a !important overrides — heritage nav owns it */

/* ── 6. Section card wrapper (used by build_index hero context) ──── */

/* ── 7. Polished leader-grid (trophy treatment for rank #1) ─── */
.leader-block { position: relative; }
.leader-block h3 {
  font-family: var(--ff-sans);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--navy);
  padding: 0 0 var(--sp-2);
  border-bottom: 1px solid var(--border-2);
  margin: 0 0 var(--sp-2);
  position: relative;
}
.leader-block h3::after {
  content: '';
  position: absolute;
  left: 0; bottom: -1px;
  width: 24px; height: 2px;
  background: var(--gold-bright);
}
.leader-table tr:first-child td.val { font-weight: 800; color: var(--gold); }
.leader-table tr:first-child td.left a { font-weight: 700; color: var(--navy); }
.leader-table tr:first-child td.rk {
  color: var(--gold-bright);
  font-weight: 800;
}
.leader-table tr:first-child td.rk::before {
  content: '★ ';
  color: var(--gold-bright);
  font-size: 10px;
}
.leader-table td.rk { width: 24px; }

/* ── 8. Refined dash-header → eyebrow + h1 ─────────────────── */
.dash-header h1 {
  font-size: 22px !important;
  letter-spacing: -0.4px;
}
.dash-header .eyebrow {
  display: block;
  font-family: var(--ff-sans);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 2.6px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 5px;
}

/* ── 9. Filter bar polish: pill-style level toggle ────────── */
.lvl-pills {
  display: inline-flex;
  border: 1px solid var(--border-2);
  background: var(--bg);
  height: 30px;
  overflow: hidden;
}
.lvl-pills button {
  border: none !important;
  background: transparent !important;
  padding: 0 11px !important;
  height: 30px !important;
  font-family: var(--ff-sans) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  color: var(--muted) !important;
  letter-spacing: 0.8px !important;
  text-transform: uppercase;
  cursor: pointer;
  border-right: 1px solid var(--border) !important;
  transition: background .1s, color .1s;
}
.lvl-pills button:last-child { border-right: none !important; }
.lvl-pills button:hover { background: var(--surface) !important; color: var(--navy) !important; }
.lvl-pills button.active {
  background: var(--navy) !important;
  color: var(--gold-light) !important;
  box-shadow: inset 0 -2px 0 var(--gold-bright);
}

/* ── 10. Mobile niceties for hero ───────────────────────────── */
@media (max-width: 1100px) {
  .hero-marquee { grid-template-columns: 1fr; }
  .hero-marquee::before { display: none; }
  .hero-right { grid-template-columns: repeat(4, 1fr); }
  .hero-left { padding: var(--sp-4) var(--sp-4) var(--sp-3) var(--sp-5); }
}
@media (max-width: 700px) {
  .hero-right { grid-template-columns: repeat(2, 1fr); }
  .hero-tile:nth-child(2) { border-right: none; }
  .hero-tile:nth-child(1), .hero-tile:nth-child(2) { border-bottom: 1px solid rgba(255,255,255,0.06); }
  .hero-title { font-size: 24px; }
  /* On mobile, drop sticky name column to avoid overlap weirdness */
  #lb thead tr.solo th:nth-child(2),
  #lb tbody tr td:nth-child(2) { position: static; box-shadow: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   OGILVIE — UI/UX POLISH PASS (R151)
   Editorial coherence: stronger page-headline rhythm, brand-tonal
   accents on player pages, tightened table affordances, mobile fixes.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. Editorial dash-header — every top-level page now leads with
       eyebrow → h1 → subtitle, separated from content by a navy hairline
       and a 56px gold tick. Replaces 18px h1 floating in white space. */
.dash-header {
  position: relative;
  padding: var(--sp-4) 0 var(--sp-3);
  margin: 0 0 var(--sp-4);
  border-bottom: 1px solid var(--border-2);
}
.dash-header::after {
  content: '';
  position: absolute;
  left: 0; bottom: -1px;
  width: 56px; height: 2px;
  background: var(--gold-bright);
}
.dash-header h1 {
  font-size: 26px !important;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: var(--navy);
  line-height: 1.1;
  margin: 0;
}
.dash-header .eyebrow {
  display: block;
  font-family: var(--ff-sans);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 2.6px;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 6px;
}
.dash-header .subtitle {
  margin: 6px 0 0;
  max-width: 90ch;
}

/* ── 2. Leaderboard table — stronger sticky name column, brighter
       column-header hover, gold-light hover state on the navy thead. */
thead tr.solo th { color: rgba(255,255,255,0.92); }
thead tr.solo th.sortable:hover { color: var(--gold-light); cursor: pointer; }

/* Sticky name column: amplify shadow so it visibly "lifts" off the body */
#lb tbody tr td:nth-child(2) {
  box-shadow: inset -1px 0 0 var(--border-2), 2px 0 4px -2px rgba(10,26,51,0.10);
}
#lb thead tr.solo th:nth-child(2) {
  box-shadow: inset -1px 0 0 rgba(216,169,85,0.55), 3px 0 6px -2px rgba(0,0,0,0.20);
}

/* Row hover — gold rule already exists; add a touch more bg contrast */
tbody tr:hover { background: rgba(216,169,85,0.04) !important; }
tbody tr.proj-row:hover, tbody tr.ros-row:hover { background: rgba(216,169,85,0.06) !important; }

/* ── 3. Player-page hero polish — calmer meta line, thicker gold rule
       on the navy stat block, more breathing room around the slash. */
.pch-meta {
  font-size: 10.5px;
  letter-spacing: 0.5px;
  font-weight: 600;
  color: var(--muted-2);
}
.pch-stats {
  border-left: 3px solid var(--gold-bright);
  padding-top: 9px;
  padding-bottom: 9px;
}
.pch-stat {
  border-right-color: rgba(255,255,255,0.10);
  padding-right: 12px;
  margin-right: 12px;
}
.pch-label { letter-spacing: 1.6px; font-size: 7.5px; }

/* ── 4. Park-factor diff pills — square, brand-tonal (set inline by Python).
       Override leftover border-radius from old inline rules. */
.pch-left > div[style*="border:1px solid"] span {
  border-radius: 0 !important;
}

/* ── 5. Statcast/scouting inline bars — remove leftover 1-2px radius so
       the square brand geometry holds across the player page. */
.pch-left + div div[style*="border-radius:1px"],
.pch-left + div div[style*="border-radius:2px"] {
  border-radius: 0 !important;
}
/* Soften the gray bar background on Statcast rows to a brand-friendly tone */
div[style*="height:9px;background:#eee"] { background: var(--surface-2) !important; }

/* Scouting chip squares — tonal coherence, slightly tighter padding */
.pch-left + div span[style*="background:#fbbf24"],
.pch-left + div span[style*="background:#a8c8f0"],
.pch-left + div span[style*="background:#8fd3a8"],
.pch-left + div span[style*="background:#9ca3af"],
.pch-left + div span[style*="background:#7b1fa2"],
.pch-left + div span[style*="background:#dc2626"] {
  border-radius: 0 !important;
}

/* ── 6. Standings & playoff polish — playoff cards lift slightly */
.playoff-picture { transition: box-shadow .15s; }
.playoff-picture:hover { box-shadow: 0 2px 8px rgba(10,26,51,0.10), 0 0 0 1px var(--border-2); }
.standings-table tr.div-leader td:first-child {
  background: linear-gradient(90deg, rgba(216,169,85,0.10) 0%, rgba(216,169,85,0.02) 100%);
}

/* ── 7. Trade-Value Gantt — tighten the rank column + the empty "—" cells
       so the green/red ramp dominates the grid visually. */
#lb-gantt td.rank { font-size: 10px !important; color: var(--muted-2); padding-right: 6px; }
#lb-gantt td[style*="background:#f0f3f7"] {
  background: var(--paper) !important;
  color: var(--border-2) !important;
}

/* ── 8. Org grid + depth-chart cards — subtle lift on hover */
.dc-pos-block {
  background: var(--bg);
  border: 1px solid var(--border);
  border-top: 2px solid var(--navy);
  margin-bottom: var(--sp-3);
  transition: border-top-color .12s, box-shadow .12s;
}
.dc-pos-block:hover {
  border-top-color: var(--gold-bright);
  box-shadow: var(--shadow-2);
}
.dc-pos-block h3 { border-bottom: 1px solid var(--border); padding-left: var(--sp-3); }

/* ── 9. Footer — make the brand mark sit a bit prouder */
.site-footer {
  border-top: 3px solid var(--navy);
  padding-top: var(--sp-4);
}
.site-footer::before { width: 80px; height: 3px; top: -3px; }

/* R267: stale header/brand overrides removed — heritage @media blocks own these */
@media (max-width: 500px) {
  .dash-header h1 { font-size: 20px !important; }
  .dash-header .eyebrow { font-size: 8.5px; letter-spacing: 2.0px; }
  .pch-stats { padding: 6px 10px; gap: 0; }
  .pch-stat { min-width: 36px; padding-right: 8px; margin-right: 8px; }
  .pch-val { font-size: 13px; }
  .pch-label { font-size: 6.5px; letter-spacing: 1.0px; }
  .pch-meta { font-size: 9.5px; }
  .pch-name { font-size: 22px !important; }
  .player-card-header { padding: var(--sp-3) var(--sp-3) 0 !important; }
  .league-summary-champion { min-width: 120px; }
  .lsc-team { font-size: 22px; }
  /* Hide build-stats grid border on tiniest screens (already responsive) */
}

/* ── 11. Pitcher table thead — same polish as hitter board */
#pb thead tr.solo th { color: rgba(255,255,255,0.92); }
#pb thead tr.solo th.sortable:hover { color: var(--gold-light); }

/* ── 12. Notable Long-Term Contracts table — match hitter board lift */
#lb-notable thead tr.solo th { color: rgba(255,255,255,0.92); }

/* ── 13. WAR component bar — square, slightly taller */
.player-card-header div[style*="height:11px"] {
  height: 13px !important;
  margin-top: 6px !important;
}
.player-card-header div[style*="height:11px"] > div {
  font-size: 7.5px !important;
}

/* R267: removed stale .site-nav a !important overrides (R121/R151 layered debt) */

/* R278b: mobile audit fixes — bundled responsive overrides for blockers
   identified across home/player/trade-value/prospects/matchups pages. */

/* Matchups "Top Bets" 3-col grid — drop to 2 cols at tablet, 1 col at phone */
@media (max-width: 700px) {
  .matchup-bets-grid { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 440px) {
  .matchup-bets-grid { grid-template-columns: 1fr !important; }
}

/* Player page wRC+ pill — hide flanking vL/vR spans at very narrow widths
   (the splits row below already shows them) */
@media (max-width: 500px) {
  .pch-stat .pch-val > span:first-child,
  .pch-stat .pch-val > span:last-child { display: none; }
}

/* Player page contract grid — stack the "Status / debut" facts above the
   salary table when the row gets cramped */
@media (max-width: 600px) {
  .contract-grid { grid-template-columns: 1fr !important; }
}

/* Scouting chip row — tighten gap + chip min-width on very narrow phones */
@media (max-width: 360px) {
  .pch-scouting > div > div[style*="gap:14px"] { gap: 8px !important; }
  .pch-scouting > div > div > div[style*="min-width:46px"] {
    min-width: 38px !important;
  }
}

/* Generic horizontal-scroll hint for tables that overflow on mobile */
@media (max-width: 600px) {
  .tbl-wrap { position: relative; }
  .tbl-wrap::before {
    content: "← scroll for more →";
    display: block;
    font-size: 9px;
    color: var(--muted);
    text-align: center;
    padding: 2px 0 4px;
    letter-spacing: 0.5px;
  }
}