/* ==========================================================================
   ABS — Automated Ball-Strike Challenge Tracker
   Editorial Sports Analytics Stylesheet
   ========================================================================== */

:root { color-scheme: light only; }

/* --- Reset & Base --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Slim scrollbar — default everywhere. Per-component styles that need to
   hide scrollbars entirely (scrollbar-width: none) still win via specificity. */
* { scrollbar-width: thin; scrollbar-color: rgba(0,0,0,.22) transparent; }
*::-webkit-scrollbar { width: 6px; height: 6px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: rgba(0,0,0,.18); border-radius: 3px; }
*::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,.32); }

:root {
  /* ── ACCENT ─────────────────────────────────────────────── */
  --red:    #FC3D21;
  --red-d:  rgba(252,61,33,.10);
  --red-b:  rgba(252,61,33,.28);

  /* ── SURFACES — ivory palette ────────────────────────────── */
  --bg:    #F5F2EC;
  --bgw:   #EDE9E1;
  --bgi:   #E4E0D7;
  --dark:  #1A1A1A;
  --foot:  #111111;

  /* ── RULES & BORDERS ─────────────────────────────────────── */
  --rule:   rgba(0,0,0,.09);
  --rules:  rgba(0,0,0,.18);
  --ruled:  rgba(0,0,0,.12);

  /* ── TEXT ────────────────────────────────────────────────── */
  --text:    #1A1A1A;
  --sec:     #555555;
  --muted:   #999999;
  --on-dark: #ffffff;
  --on-d2:   rgba(255,255,255,.55);

  /* ── DATA SEMANTIC ───────────────────────────────────────── */
  --good:  #2E7D32;
  --warn:  #B45309;
  --bad:   #FC3D21;
  --blue:  #1565C0;

  /* ── CHART SERIES ────────────────────────────────────────── */
  --s1: #FC3D21;  --s2: #1565C0;  --s3: #B45309;
  --s4: #4A7C59;  --s5: #888888;  --s6: #9C27B0;  --s7: #00838F;

  /* ── HEAT MAP ────────────────────────────────────────────── */
  --h5: rgba(252,61,33,.75);  --h4: rgba(252,61,33,.45);
  --h3: rgba(252,61,33,.20);  --h2: rgba(252,61,33,.08);  --h1: transparent;

  /* ── GRADE / SCORE CHIPS ─────────────────────────────────── */
  --ga-bg: #E8F5E9;  --ga-tx: #2E7D32;
  --gb-bg: #E3F0FC;  --gb-tx: #1565C0;
  --gc-bg: #FFF8E1;  --gc-tx: #B45309;
  --gd-bg: #FBE9E7;  --gd-tx: #C62828;

  /* ── TYPOGRAPHY ──────────────────────────────────────────── */
  --fi: "Inter", system-ui, -apple-system, sans-serif;

  /* ── SPACING — 4px grid ──────────────────────────────────── */
  --sp-1:4px;   --sp-2:8px;   --sp-3:12px;  --sp-4:16px;
  --sp-5:24px;  --sp-6:32px;  --sp-7:48px;  --sp-8:64px;
  --sp-9:96px;  --sp-10:128px;

  /* ── LAYOUT ──────────────────────────────────────────────── */
  --max-w:      1280px;
  --pg-m:       72px;
  --pg-m-mid:   48px;
  --pg-m-mob:   16px;
  --hdr-h:      52px;
  --row-h:      38px;
  --flt-h:      34px;
  --section-v:  72px;
  --section-vb: 80px;
  --grid-gap:   48px;
  --subsec-mb:  52px;

  /* ── RADIUS ──────────────────────────────────────────────── */
  --r:    0px;
  --r-sm: 2px;

  /* ── Z-INDEX ─────────────────────────────────────────────── */
  --z-sticky:  100;
  --z-overlay: 200;
  --z-modal:   300;
  --z-tip:     9999;

  /* ── MOTION ──────────────────────────────────────────────── */
  --ease: cubic-bezier(0,0,.2,1);
  --tf:   120ms var(--ease);
  --tb:   180ms var(--ease);
}

html { font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; }

body {
  font-family: var(--fi);
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

a { color: inherit; text-decoration: none; }

img { max-width: 100%; display: block; }

/* ==========================================================================
   .pi-tbl — unified data-table header grammar (SPRINT-068)
   Opt-in by adding `pi-tbl` to any <table>. Defines:
     · dark header, white text, 600/10px uppercase, .10em tracking
     · right-aligned numeric cells by default; .l for left, .c for center
     · sort arrows (▲/▼ solid when active, ▲▼ dim when not) via .srt span
     · mini subtitle under the column label via .mini span
     · dashed column-group separators via th.grp / td.grp
   Row heights, striping, highlights stay with per-table classes so each
   surface can tune its own density.
   ========================================================================== */
.pi-tbl {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.pi-tbl thead th {
  background: var(--dark);
  color: #fff;
  font: 600 10px/1 var(--fi);
  letter-spacing: .10em;
  text-transform: uppercase;
  padding: 12px 10px;
  text-align: right;
  vertical-align: middle;
  white-space: nowrap;
  user-select: none;
}
.pi-tbl thead th.l { text-align: left; }
.pi-tbl thead th.c { text-align: center; }
.pi-tbl thead th[data-sort] { cursor: pointer; }
.pi-tbl thead th .srt {
  color: rgba(255,255,255,.55);
  margin-left: 4px;
  font-size: 9px;
}
.pi-tbl thead th .srt.dim { color: rgba(255,255,255,.22); }
.pi-tbl thead th.sorted { color: var(--red); }
.pi-tbl thead th.sorted .srt { color: var(--red); }
.pi-tbl thead th .mini {
  display: block;
  font: 400 8px/1 var(--fi);
  color: rgba(255,255,255,.55);
  letter-spacing: .06em;
  text-transform: none;
  margin-top: 3px;
}
.pi-tbl thead th.grp { border-left: 1px dashed rgba(255,255,255,.18); }
.pi-tbl tbody td { vertical-align: middle; font-variant-numeric: tabular-nums; }
.pi-tbl tbody td.l { text-align: left; }
.pi-tbl tbody td.c { text-align: center; }
.pi-tbl tbody td.grp { border-left: 1px dashed var(--ruled); }

/* --- Typography --- */
h1, h2, h3, h4 { font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; color: var(--text); }
h1 { font-size: 2.25rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.125rem; }

.mono { font-family: var(--fi); }
.stat-num {
  font-family: var(--fi);
  font-weight: 600;
  letter-spacing: -0.03em;
}
.text-muted { color: var(--muted); }
.text-orange { color: var(--red); }
.text-green { color: var(--good); }
.text-red { color: var(--red); }

/* Mobile nav toggle */
.mobile-nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  flex-direction: column;
  gap: 5px;
}
.mobile-nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: all 0.2s ease;
}

.mobile-nav-overlay {
  display: none;
  position: fixed;
  top: 56px;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--bg);
  border-top: 1px solid var(--rules);
  z-index: var(--z-overlay);
  flex-direction: column;
  padding: 32px var(--pg-m-mob);
  gap: 8px;
}
.mobile-nav-overlay .nav-lnk {
  font: 600 13px/1 var(--fi);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--sec);
  padding: 14px 0;
  border-bottom: 1px solid var(--rule);
  transition: color var(--tf);
}
.mobile-nav-overlay .nav-lnk:hover,
.mobile-nav-overlay .nav-lnk.active { color: var(--red); }
.mobile-nav-overlay.open { display: flex; }



@media (max-width: 768px) {
  .mobile-nav-toggle { display: flex; }
  .pi-tagline { display: none; }
  .pi-wm-r, .pi-wm-l { font-size:22px; }
  .hdr-inner { padding: 0 var(--pg-m-mob); }
}

/* ==========================================================================
   Main Content Area
   ========================================================================== */

#app {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0;
  width: 100%;
  flex: 1;
  min-height: 60vh;
}
/* Inset wrapper — sections that need side margins use this */
.pg-inset { padding-left: var(--pg-m); padding-right: var(--pg-m); }


/* ==========================================================================
   Cards — editorial white on warm gray
   ========================================================================== */

.card {
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: var(--r);
  transition: background 0.15s ease;
}

.card:hover {
}

.card-clickable:hover {
  background: var(--bgw);
  cursor: pointer;
}

.card-header {
  padding: 16px 24px;
  border-bottom: 1px solid var(--rule);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.card-body {
  padding: 24px;
}

/* ==========================================================================
   Page Headers
   ========================================================================== */

.page-header { margin-bottom: 32px; }
.page-header h1 {
  font: 800 36px/1 var(--fi);
  letter-spacing: -0.03em;
  text-transform: uppercase;
}
.page-header .subtitle {
  font: 300 15px/1.6 var(--fi);
  color: var(--sec);
  margin-top: 8px;
}

/* ==========================================================================
   Live Feed
   ========================================================================== */

/* .live-banner removed in Sprint 014 (dead CSS) */

.live-dot {
  width: 10px;
  height: 10px;
  background: var(--good);
  border-radius: 50%;
  animation: pulse 2s ease-in-out infinite;
  flex-shrink: 0;
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(1.2); }
}

/* .live-banner-text removed in Sprint 014 (dead CSS) */

/* .live-badge removed in Sprint 014 (dead CSS) */

/* .games-grid, .game-card, .game-card-teams, .game-team, .game-team-abbr, .game-team-name removed in Sprint 014 (dead CSS) */

/* .game-score removed in Sprint 014 (dead CSS) */

.game-vs {
  font-size: 0.85rem;
  color: var(--muted);
  font-weight: 600;
  padding: 0 16px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* .game-card-meta removed in Sprint 014 (dead CSS) */

.game-status {
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.game-status.live { color: var(--good); }
.game-status.final { color: var(--muted); }

/* .challenge-pills, .challenge-pill removed in Sprint 014 (dead CSS) */

/* .game-card-matchup, .game-team-row, .game-team-score, .game-card-footer, .game-abs-tag removed in Sprint 014 (dead CSS) */

/* .challenge-pills-v2, .challenge-pill-v2, .pill-team, .pill-dots, .pill-dot removed in Sprint 014 (dead CSS) */

/* .live-dot-sm removed in Sprint 014 (dead CSS) */

/* .challenge-card-who, .challenger-type-tag, .challenge-type-tag removed in Sprint 014 (dead CSS) */

/* Grade badge */
.grade-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--fi);
  font-weight: 700;
  border-radius: 0;
  line-height: 1;
}
.grade-badge-sm { width: 28px; height: 28px; font-size: 0.75rem; }
.grade-badge-md { width: 36px; height: 36px; font-size: 0.9rem; }
.grade-badge-lg { width: 48px; height: 48px; font-size: 1.2rem; }
.grade-excellent { background: var(--good); color: #fff; }
.grade-good { background: var(--blue); color: #fff; }
.grade-average { background: var(--red); color: #fff; }
.grade-poor { background: var(--red); color: #fff; }
.grade-terrible { background: #7F1D1D; color: #fff; }

/* Leverage bar */
.leverage-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
}
.leverage-bar-track {
  width: 60px;
  height: 6px;
  background: var(--rule);
  border-radius: 0;
  overflow: hidden;
}
.leverage-bar-fill {
  height: 100%;
  border-radius: 0;
  transition: width 0.3s;
}
.leverage-bar-fill.low { background: var(--good); }
.leverage-bar-fill.medium { background: var(--red); }
.leverage-bar-fill.high { background: var(--red); }

/* Date nav */
.date-nav {
  display: flex;
  align-items: center;
  gap: 8px;
}
.date-nav-btn {
  background: none;
  border: 1px solid var(--rule);
  border-radius: 0;
  padding: 4px 10px;
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--muted);
}
.date-nav-btn:hover { background: var(--rule); }
.date-nav-btn:disabled { opacity: 0.3; cursor: default; }

/* .auto-refresh-badge removed in Sprint 014 (dead CSS) */

/* --- Team logo (img element with class directly) --- */
img.team-logo {
  object-fit: contain;
  flex-shrink: 0;
}
img.team-logo-sm { width: 28px; height: 28px; }
img.team-logo-md { width: 40px; height: 40px; }
img.team-logo-lg { width: 56px; height: 56px; }
/* wrapper-div variant (if used) */
div.team-logo {
  border-radius: 50%;
  overflow: hidden;
  background: var(--rule);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
div.team-logo.sm { width: 28px; height: 28px; }
div.team-logo.md { width: 40px; height: 40px; }
div.team-logo.lg { width: 56px; height: 56px; }
div.team-logo img { width: 100%; height: 100%; object-fit: contain; }

/* --- Player headshot (img element with class directly) --- */
img.player-headshot {
  border-radius: 50%;
  object-fit: cover;
  background: var(--rule);
  flex-shrink: 0;
}
img.player-headshot-sm { width: 32px; height: 32px; }
img.player-headshot-md { width: 48px; height: 48px; }
img.player-headshot-lg { width: 72px; height: 72px; }
/* wrapper-div variant */
div.player-headshot {
  border-radius: 50%;
  overflow: hidden;
  background: var(--rule);
  flex-shrink: 0;
}
div.player-headshot.sm { width: 32px; height: 32px; }
div.player-headshot.md { width: 48px; height: 48px; }
div.player-headshot.lg { width: 72px; height: 72px; }
div.player-headshot img { width: 100%; height: 100%; object-fit: cover; }

/* .feed-section-header, .challenge-feed, .challenge-card, .challenge-card-top removed in Sprint 014 (dead CSS) */

.challenge-zone-mini {
  flex-shrink: 0;
  width: 100px;
  height: 120px;
}

/* .challenge-details, .challenge-who removed in Sprint 014 (dead CSS) */

.challenge-context {
  font-size: 0.8rem;
  color: var(--muted);
  line-height: 1.5;
}

.challenge-context span {
  display: inline-block;
  margin-right: 16px;
}

/* .challenge-metrics, .challenge-metric, .challenge-result-badge removed in Sprint 014 (dead CSS) */

/* .challenge-who-row, .challenge-who-info, .challenge-result-area removed in Sprint 014 (dead CSS) */

/* Leverage bar wrapper (app.js) */
.leverage-bar-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
}

.leverage-bar-val {
  font-family: var(--fi);
  font-weight: 700;
  font-size: 0.8rem;
  white-space: nowrap;
}

/* --- No games state --- */
.empty-state {
  text-align: center;
  padding: 48px 24px;
}

.empty-state-icon {
  font-size: 3rem;
  margin-bottom: 16px;
  opacity: 0.3;
  font-family: var(--fi);
}

.empty-state h3 {
  margin-bottom: 8px;
  color: var(--muted);
  font-weight: 700;
}

.empty-state p {
  color: var(--muted);
  font-size: 0.9rem;
}

/* ==========================================================================
   Scorecard Page
   ========================================================================== */

.scorecard-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  padding: 32px 0;
  margin-bottom: 24px;
}

.scorecard-team {
  text-align: center;
}

.scorecard-team-abbr {
  font-family: var(--fi);
  font-weight: 400;
  font-size: 3.5rem;
  line-height: 1;
  letter-spacing: 0.04em;
}

.scorecard-team-name {
  font-size: 0.82rem;
  color: var(--muted);
  margin-top: 4px;
}

.scorecard-score {
  font-family: var(--fi);
  font-weight: 800;
  font-size: 3rem;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 16px;
  letter-spacing: -0.04em;
}

.scorecard-score .dash {
  font-size: 1.5rem;
  color: var(--muted);
  font-weight: 400;
}

.scorecard-date {
  text-align: center;
  font-size: 0.85rem;
  color: var(--muted);
  margin-bottom: 32px;
}

/* Ump report card */
.ump-report-card { }
.ump-accuracy-gauge {
  flex-shrink: 0;
}

/* Challenge summary */
.challenge-summary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 32px;
}

.challenge-summary-team {
  padding: 24px;
}

.challenge-summary-team h4 {
  font-size: 0.78rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
  font-weight: 700;
}

.summary-stats {
  display: flex;
  gap: 24px;
}

.summary-stat {
  text-align: center;
}

.summary-stat-value {
  font-family: var(--fi);
  font-weight: 700;
  font-size: 1.75rem;
  display: block;
  letter-spacing: -0.03em;
}

.summary-stat-label {
  font-size: 0.65rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}

/* --- Zone container --- */
.zone-container {
  margin-bottom: 32px;
}

/* Zone 3-column layout: sidebar | zone SVG | info panel */
.zone-layout {
  display: grid;
  grid-template-columns: 140px 1fr 200px;
  min-height: 460px;
}

.zone-sidebar {
  display: flex;
  flex-direction: column;
  padding: 24px;
  gap: 16px;
  border-right: 1px solid var(--rule);
}

.zone-title {
  font-size: 0.95rem;
  font-weight: 700;
  margin: 0;
}

.zone-svg-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
}

/* SVG zone interactive styles */
.zone-svg .pitch-dot { cursor: pointer; }
.zone-svg .pitch-normal:hover { opacity: 0.8 !important; }
.zone-svg .pitch-missed:hover { opacity: 1 !important; }
.zone-svg .pitch-overturned:hover, .zone-svg .pitch-upheld:hover { opacity: 1 !important; }

/* Info panel (right side of zone) */
.zone-info-panel {
  border-left: 1px solid var(--rule);
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.zone-info-empty {
  color: var(--muted);
  font-size: 0.78rem;
  font-style: italic;
}

.zone-info-content {
  font-size: 0.78rem;
  line-height: 1.6;
}

.zone-info-content .tt-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 2px 0;
}

.zone-info-content .tt-label {
  color: var(--muted);
  font-size: 0.72rem;
}

.zone-info-content .tt-value {
  font-family: var(--fi);
  font-weight: 600;
  font-size: 0.78rem;
  text-align: right;
}


/* Zone legend (vertical in sidebar) */
.zone-legend {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}

.zone-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  color: var(--muted);
  font-weight: 500;
}

.zone-legend-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}
.zone-legend-dot.normal { background: var(--muted); }
.zone-legend-dot.overturned { background: var(--good); }
.zone-legend-dot.upheld { background: var(--red); }
.zone-legend-dot.missed {
  background: var(--warn);
  border-radius: 0;
  transform: rotate(45deg);
  width: 8px;
  height: 8px;
}

/* Zone wrapper (for drift and other standalone zones) */
.zone-wrapper {
  display: flex;
  justify-content: center;
  padding: 24px;
}

/* --- Trajectory accordion (inside zone card) --- */
.traj-accordion {
  border-top: 1px solid var(--rule);
  padding: 24px;
}

/* Pitch bar in info panel when trajectory is active */
.traj-pitch-type {
  font-family: var(--fi);
  font-weight: 700;
  font-size: 0.95rem;
  display: block;
  margin-bottom: 4px;
}

.traj-pitch-detail {
  font-size: 0.72rem;
  color: var(--muted);
  display: block;
  margin-bottom: 4px;
}

.traj-pitch-result {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 8px;
  border-radius: 0;
  display: inline-block;
}
.traj-pitch-result.overturned { background: rgba(46,125,50,.12); color: var(--good); }
.traj-pitch-result.upheld { background: rgba(252,61,33,.12); color: var(--red); }
.traj-pitch-result.missed { background: rgba(180,83,9,.12); color: var(--warn); }

.traj-dual-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.traj-view-wrap {
  border: 1px solid var(--rule);
  border-radius: var(--r);
  overflow: hidden;
  position: relative;
}

.traj-view-label {
  position: absolute;
  top: 8px;
  left: 10px;
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  z-index: 1;
}

.traj-view-wrap canvas {
  display: block;
  width: 100%;
  height: auto;
}

.traj-movement-stats {
  display: flex;
  gap: 24px;
  padding: 16px 0 0;
  flex-wrap: wrap;
}

.traj-stat {
  text-align: center;
}

.traj-stat-val {
  font-family: var(--fi);
  font-weight: 700;
  font-size: 0.95rem;
  display: block;
  color: var(--text);
}

.traj-stat-label {
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}

/* --- Challenge timeline --- */
.timeline {
  position: relative;
  margin-bottom: 32px;
}

.timeline-item {
  position: relative;
  padding-left: 32px;
  padding-bottom: 24px;
  border-left: 2px solid var(--rule);
  margin-left: 8px;
}

.timeline-item:last-child {
  border-left-color: transparent;
  padding-bottom: 0;
}

.timeline-dot {
  position: absolute;
  left: -7px;
  top: 4px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--rule);
}
.timeline-item.overturned .timeline-dot { background: var(--good); border-color: var(--good); }
.timeline-item.upheld .timeline-dot { background: var(--red); border-color: var(--red); }
.timeline-item.pending .timeline-dot { background: var(--red); border-color: var(--red); }

.timeline-inning {
  font-family: var(--fi);
  font-weight: 700;
  font-size: 0.72rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 4px;
}

.timeline-content {
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: var(--r);
  padding: 16px;
}

.timeline-who {
  font-weight: 800;
  margin-bottom: 2px;
}

.timeline-desc {
  font-size: 0.85rem;
  color: var(--muted);
  margin-bottom: 8px;
}

.timeline-stats {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.timeline-stat {
  font-size: 0.8rem;
}

.timeline-stat-label {
  color: var(--muted);
  margin-right: 4px;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.timeline-stat-value {
  font-family: var(--fi);
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* --- Missed opportunities --- */
.missed-section {
  margin-bottom: 32px;
}

.missed-card {
  border-left: 4px solid var(--warn);
  margin-bottom: 8px;
}

.missed-card .card-body {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 16px 24px;
}

.missed-inning {
  font-family: var(--fi);
  font-weight: 700;
  font-size: 0.78rem;
  color: var(--warn);
  min-width: 60px;
  letter-spacing: -0.02em;
}

.missed-details {
  flex: 1;
  font-size: 0.85rem;
}

.missed-edge {
  font-family: var(--fi);
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--warn);
  letter-spacing: -0.02em;
}

/* ==========================================================================
   Leaderboards — newspaper stat sheet
   ========================================================================== */

/* --- Leaderboard tables — newspaper stat sheet --- */
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--r);
  border: 1px solid var(--rule);
  background: var(--bg);
}

table.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

table.data-table thead th {
  background: var(--text);
  color: rgba(255,255,255,0.85);
  padding: 10px 16px;
  text-align: left;
  font-weight: 700;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-bottom: none;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  position: relative;
}

table.data-table thead th:hover {
  color: var(--red);
}

table.data-table thead th .sort-arrow {
  margin-left: 4px;
  font-size: 0.6rem;
  opacity: 0.3;
}

table.data-table thead th.sorted .sort-arrow {
  opacity: 1;
  color: var(--red);
}

table.data-table tbody tr {
  border-bottom: 1px solid var(--rule);
  transition: background 0.1s ease;
}

table.data-table tbody tr:nth-child(even) {
  background: var(--bgw);
}

table.data-table tbody tr:hover {
  background: var(--red-d);
}

table.data-table tbody tr:last-child {
  border-bottom: none;
}

table.data-table tbody td {
  padding: 10px 16px;
  white-space: nowrap;
}

table.data-table .rank-col {
  font-family: var(--fi);
  font-weight: 700;
  color: var(--muted);
  width: 36px;
  text-align: center;
  font-size: 0.78rem;
}

/* Top 3 ranks get special treatment */
table.data-table tbody tr:nth-child(1) .rank-col,
table.data-table tbody tr:nth-child(2) .rank-col,
table.data-table tbody tr:nth-child(3) .rank-col {
  color: var(--red);
  font-weight: 800;
}

table.data-table .num-col {
  font-family: var(--fi);
  font-weight: 500;
  text-align: right;
  letter-spacing: -0.02em;
}

table.data-table .clickable-cell {
  color: var(--red);
  cursor: pointer;
  font-weight: 700;
}
table.data-table .clickable-cell:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Win rate bar */
.winrate-bar {
  display: flex;
  align-items: center;
  gap: 8px;
}

.winrate-track {
  width: 60px;
  height: 5px;
  background: var(--rule);
  border-radius: 0;
  overflow: hidden;
}

.winrate-fill {
  height: 100%;
  border-radius: 0;
  transition: width 0.3s ease;
}

.winrate-value {
  font-family: var(--fi);
  font-size: 0.78rem;
  font-weight: 700;
  min-width: 40px;
  letter-spacing: -0.02em;
}

/* --- Progress bar (generic) --- */
.progress-bar {
  width: 100%;
  height: 6px;
  background: var(--rule);
  border-radius: 0;
  overflow: hidden;
}
.progress-bar-fill {
  height: 100%;
  border-radius: 0;
  background: var(--red);
  transition: width 0.4s ease;
}
.progress-bar-fill.green { background: var(--good); }
.progress-bar-fill.red { background: var(--red); }

/* ==========================================================================
   Player / Team Profile
   ========================================================================== */

.profile-header {
  display: flex;
  align-items: center;
  gap: 32px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}

.profile-info h1 {
  font-family: var(--fi);
  font-size: 3rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin-bottom: 4px;
  line-height: 1;
}

.profile-meta {
  display: flex;
  gap: 16px;
  font-size: 0.88rem;
  color: var(--muted);
  flex-wrap: wrap;
}

.profile-meta span {
  display: flex;
  align-items: center;
  gap: 4px;
}

.profile-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 16px;
  margin-bottom: 32px;
}

/* --- Stat card --- */
.stat-card,
.profile-stat-card {
  padding: 24px 16px;
  text-align: center;
  position: relative;
}

.stat-card::before,
.profile-stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 32px;
  height: 3px;
  background: var(--red);
  border-radius: 0 0 2px 2px;
}

.profile-stat-card .stat-value,
.stat-card .stat-value {
  font-family: var(--fi);
  font-weight: 800;
  font-size: 2rem;
  display: block;
  letter-spacing: -0.04em;
  line-height: 1.1;
}

.profile-stat-card .stat-label,
.stat-card .stat-label {
  font-size: 0.68rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  margin-top: 4px;
}

.profile-stat-card .stat-compare,
.stat-card .stat-compare {
  font-size: 0.7rem;
  margin-top: 4px;
  color: var(--muted);
}

/* Challenge history list (player profile) */
.challenge-history-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 32px;
}

/* Player insights grid (missed calls + savant + zone) */
.player-insights-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
  margin-bottom: 32px;
}

/* Savant comparison grid */
.savant-comparison-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 16px;
}
.savant-comp-item {
  padding: 8px;
}

/* Game log table */
.game-log-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}
.game-log-table th {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  font-weight: 700;
  text-align: left;
  padding: 6px 8px;
  border-bottom: 2px solid var(--rule);
}
.game-log-table td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--rule);
}
.game-log-table td.mono,
.game-log-table td.bat_rbi {
  font-family: var(--fi);
  font-size: 0.85rem;
}
.game-log-table tr:hover {
  background: var(--bgw);
}

/* Section headings — editorial rule */
.section-heading {
  font-family: var(--fi);
  font-size: 1.35rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
}

.section-heading .accent-bar {
  width: 4px;
  height: 20px;
  background: var(--red);
  border-radius: 2px;
  flex-shrink: 0;
}

/* Charts area */
.charts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  gap: 24px;
  margin-bottom: 32px;
}

.chart-card {
  padding: 24px;
}

.chart-card h4 {
  font-size: 0.85rem;
  font-weight: 700;
  margin-bottom: 16px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.chart-card canvas {
  max-height: 280px;
}

/* ==========================================================================
   Score Badge — letter grade style
   ========================================================================== */

.score-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--fi);
  font-weight: 800;
  font-size: 0.82rem;
  width: 44px;
  height: 28px;
  border-radius: var(--r-sm);
  letter-spacing: -0.02em;
}

.score-badge.excellent {
  background: rgba(46,125,50,.1);
  color: #15803D;
}

.score-badge.good {
  background: rgba(21,101,192,.1);
  color: #1E40AF;
}

.score-badge.average {
  background: var(--red-d);
  color: #B45309;
}

.score-badge.poor {
  background: rgba(252,61,33,.1);
  color: #B91C1C;
}


/* ==========================================================================
   Strategy Card (manager fingerprint)
   ========================================================================== */

.strategy-card {
  overflow: hidden;
}

.strategy-card .card-header {
  border-bottom: 2px solid var(--rule);
}

.strategy-card .card-header strong {
  font-size: 1rem;
}

/* ==========================================================================
   Tags / Pills
   ========================================================================== */

.tag,
.pill {
  display: inline-flex;
  align-items: center;
  font-size: 0.72rem;
  padding: 2px 10px;
  border-radius: 0;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--red-d);
  color: var(--red);
}

.tag.green, .pill.green {
  background: rgba(46,125,50,.1);
  color: #15803D;
}

.tag.red, .pill.red {
  background: rgba(252,61,33,.1);
  color: #B91C1C;
}

.tag.blue, .pill.blue {
  background: rgba(21,101,192,.1);
  color: #1E40AF;
}

.tag.neutral, .pill.neutral {
  background: var(--rule);
  color: var(--muted);
}

.tag-active {
  background: var(--red) !important;
  color: #fff !important;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 20px;
  font-family: var(--fi);
  font-size: 0.82rem;
  font-weight: 700;
  border: none;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: all 0.15s ease;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.btn-primary {
  background: var(--red);
  color: #fff;
}
.btn-primary:hover { background: var(--red); }

.btn-outline {
  background: transparent;
  border: 1px solid var(--rule);
  color: var(--muted);
}
.btn-outline:hover {
  border-color: var(--red);
  color: var(--red);
}

/* ==========================================================================
   Loading & Skeleton
   ========================================================================== */

.loading-spinner {
  display: flex;
  justify-content: center;
  padding: 48px;
}

.spinner {
  width: 28px;
  height: 28px;
  border: 3px solid var(--rule);
  border-top-color: var(--red);
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.skeleton {
  background: var(--bgw);
  animation: shimmer 1.5s ease-in-out infinite;
  border-radius: var(--r-sm);
}

@keyframes shimmer {
  0% { opacity: 0.6; }
  50% { opacity: 1; }
  100% { opacity: 0.6; }
}

/* ==========================================================================
   Back link
   ========================================================================== */

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 24px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.back-link:hover { color: var(--red); }
.back-link::before { content: '\2190'; font-size: 1rem; }

/* .scoreboard-ticker and related classes removed in Sprint 014 (dead CSS) */


/* .mode-toggle, .mode-toggle-btn removed in Sprint 014 (dead CSS) */

/* ==========================================================================
   Responsive — consolidated Sprint 014
   ========================================================================== */

/* ── 1024px: tablets, narrow desktops ── */
@media (max-width: 1024px) {
  .pg-inset { padding-left: var(--pg-m-mid); padding-right: var(--pg-m-mid); }

  .two-col, .g2 { gap: 32px; }
  .three-col, .g3 { grid-template-columns: 1fr 1fr; }
  .profile-stat-strip { padding: 16px; }
}

/* ── 768px: large phones, small tablets ── */
@media (max-width: 768px) {
  .pg-inset { padding-left: var(--pg-m-mob); padding-right: var(--pg-m-mob); }

  .page-header h1 { font-size: 2rem; }
  h1 { font-size: 1.75rem; }
  h2 { font-size: 1.25rem; }

  /* Grids collapse to single column */
  .two-col, .g2 { grid-template-columns: 1fr; gap: 32px; }
  .three-col, .g3 { grid-template-columns: 1fr; gap: 24px; }

  /* Stat strips */
  .profile-stat-strip { grid-template-columns: repeat(2, 1fr); }
  .stat-strip-5 { grid-template-columns: repeat(3, 1fr); }

  /* Player header stacks vertically */
  .player-hdr { flex-direction: column; gap: 16px; }
  .player-name { font-size: 28px; }

  /* Challenge zone layout */
  .challenge-zone-wrap { grid-template-columns: 1fr; gap: 24px; }

  /* Game row right side wraps */
  .game-right { flex-wrap: wrap; gap: 12px; }

  /* Intel grid */
  .intel-grid { grid-template-columns: repeat(2, 1fr); }
  .intel-item { border-right: none; border-bottom: 1px solid var(--rule); }

  /* Scorecard */
  .scorecard-header { flex-direction: column; gap: 16px; }
  .scorecard-team-abbr { font-size: 2.5rem; }
  .scorecard-score { font-size: 2rem; }
  .challenge-summary { grid-template-columns: 1fr; }

  /* Zone layout stacks */
  .zone-layout { grid-template-columns: 1fr; min-height: auto; }
  .zone-sidebar {
    flex-direction: row; flex-wrap: wrap; align-items: center;
    border-right: none; border-bottom: 1px solid var(--rule); padding: 16px 24px;
  }
  .zone-sidebar .zone-legend { flex-direction: row; flex-wrap: wrap; gap: 16px; }
  .zone-info-panel { border-left: none; border-top: 1px solid var(--rule); min-height: 60px; }

  /* Trajectory */
  .traj-dual-layout { grid-template-columns: 1fr; }
  .traj-pitch-bar { flex-wrap: wrap; }

  /* Charts and insights */
  .charts-grid { grid-template-columns: 1fr; }
  .player-insights-grid { grid-template-columns: 1fr; }
  .profile-stats-grid { grid-template-columns: repeat(2, 1fr); }
  .profile-info h1 { font-size: 2.25rem; }

  /* Pitcher grid */
  .pitcher-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
  .arsenal-tbl { font-size: 11px; }
  .arsenal-tbl td, .arsenal-tbl th { padding: 0 8px; }

  /* Umpire profile */
  .ump-name { font-size: 28px; }
  .ump-stat-strip { grid-template-columns: repeat(2, 1fr); }

  /* Nav: hide desktop, show hamburger */
  .site-nav { display: none; }

  /* Leaderboard table: ensure horizontal scroll */
  .tbl { min-width: 680px; }

  /* Challenge feed rows */
  .game-row { flex-wrap: wrap; gap: 8px 16px; }
  .game-row > div:last-child { margin-left: 0; }
  .game-right { margin-left: 0; width: 100%; }

  /* Tab nav scrollable */
  .tab-nav { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ── 480px: small phones ── */
@media (max-width: 480px) {
  /* Stat strips collapse further */
  .profile-stat-strip { grid-template-columns: 1fr; }
  .stat-strip-5, .stat-strip-4 { grid-template-columns: repeat(2, 1fr); }
  .ump-stat-strip { grid-template-columns: repeat(2, 1fr); }

  /* Team abbreviations and scores smaller */
  .team-abbr { font-size: 13px; }
  .game-vs { font-size: 11px; }

  /* Summary stats wrap */
  .summary-stats { flex-wrap: wrap; }

  /* Intel to single column */
  .intel-grid { grid-template-columns: 1fr; }

  /* Ump numbers wrap */
  .ump-numbers { flex-wrap: wrap; gap: 20px; }

  /* Profile info */
  .profile-info h1 { font-size: 1.75rem; }

  /* Three-col summary sections */
  .three-col { grid-template-columns: 1fr; }
  .profile-stats-grid { grid-template-columns: 1fr; }
}




/* ==========================================================================
   Sprint Dashboard
   ========================================================================== */

.sprint-dashboard {
  max-width: 1280px;
  margin: 0 auto;
  padding: 24px 16px;
}

.sprint-dashboard .page-header {
  margin-bottom: 24px;
}

.sprint-dashboard .page-header h1 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 2.2rem;
  letter-spacing: 0.02em;
  color: var(--text);
}

.sprint-dashboard .page-subtitle {
  color: var(--muted);
  margin-top: 4px;
}

/* Stats bar */
.sprint-stats-bar {
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.stat-chip {
  background: white;
  border: 1px solid var(--rule);
  border-radius: 0;
  padding: 12px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 90px;
}

.stat-chip .stat-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text);
}

.stat-chip .stat-label {
  font-size: 0.75rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 2px;
}

.stat-in-progress .stat-num { color: #FC3D21; }
.stat-ready .stat-num { color: var(--good); }
.stat-planning .stat-num { color: var(--blue); }
.stat-completed .stat-num { color: var(--good); }
.stat-rate .stat-num { color: var(--blue); }
.stat-loading { color: var(--muted); padding: 16px; }

/* Controls */
.sprint-controls {
  display: flex;
  gap: 10px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.sprint-search {
  flex: 1;
  min-width: 200px;
  padding: 10px 14px;
  border: 1px solid var(--rule);
  border-radius: 0;
  font-size: 0.9rem;
  background: white;
  color: var(--text);
  transition: border-color 0.15s;
}

.sprint-search:focus {
  outline: none;
  border-color: #FC3D21;
}

.sprint-filter {
  padding: 10px 14px;
  border: 1px solid var(--rule);
  border-radius: 0;
  font-size: 0.85rem;
  background: white;
  color: var(--sec);
  cursor: pointer;
}

.sprint-filter:focus {
  outline: none;
  border-color: #FC3D21;
}

/* Sprint grid */
.sprint-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 16px;
}

/* Sprint card */
.sprint-card {
  background: white;
  border: 1px solid var(--rule);
  border-radius: 0;
  padding: 20px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s, background 0.15s;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-left: 4px solid var(--rule);
}

.sprint-card:hover {
  border-color: #FC3D21;
  background: var(--bgw);
}

.sprint-card-in_progress { border-left-color: #FC3D21; }
.sprint-card-ready { border-left-color: var(--good); }
.sprint-card-plan { border-left-color: var(--blue); }
.sprint-card-idea { border-left-color: #9C27B0; }
.sprint-card-done { border-left-color: var(--good); }
.sprint-card-blocked { border-left-color: var(--red); }
.sprint-card-parked { border-left-color: var(--muted); }

.sprint-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.sprint-id {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.8rem;
  font-weight: 600;
  color: #FC3D21;
}

.sprint-priority-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.sprint-card-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
}

.sprint-card-problem {
  font-size: 0.85rem;
  color: var(--muted);
  line-height: 1.4;
}

.sprint-card-meta {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.sprint-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 0;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}

.sprint-badge-lg {
  padding: 5px 14px;
  font-size: 0.85rem;
}

.sprint-badge-epic {
  background: #A78BFA20;
  color: #7C3AED;
  border: 1px solid #A78BFA40;
}

.sprint-card-tags {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.sprint-tag {
  font-size: 0.7rem;
  padding: 2px 8px;
  border-radius: 0;
  background: var(--bgw);
  color: var(--muted);
  font-family: 'JetBrains Mono', monospace;
}

.sprint-progress-bar {
  height: 6px;
  background: var(--bgw);
  border-radius: 0;
  position: relative;
  overflow: hidden;
}

.sprint-progress-fill {
  height: 100%;
  background: var(--red);
  border-radius: 0;
  transition: width 0.3s ease;
}

.sprint-progress-text {
  position: absolute;
  right: 0;
  top: -18px;
  font-size: 0.7rem;
  font-family: 'JetBrains Mono', monospace;
  color: var(--muted);
}

.sprint-card-footer {
  display: flex;
  gap: 12px;
  margin-top: auto;
}

.sprint-date, .sprint-duration {
  font-size: 0.75rem;
  color: var(--muted);
}

/* Sprint detail view */
.sprint-detail {
  max-width: 1280px;
  margin: 0 auto;
  padding: 24px 16px;
}

.breadcrumb {
  font-size: 0.85rem;
  color: var(--muted);
  margin-bottom: 16px;
}

.breadcrumb a {
  color: #FC3D21;
  text-decoration: none;
}

.breadcrumb a:hover {
  text-decoration: underline;
}

.sprint-detail-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}

.sprint-detail-header h1 {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--text);
}

.sprint-detail-id {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.9rem;
  color: #FC3D21;
  font-weight: 600;
  margin-top: 4px;
}

.sprint-detail-badges {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.sprint-detail-grid {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 24px;
}

.sprint-detail-main {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.sprint-section {
  background: white;
  border: 1px solid var(--rule);
  border-radius: 0;
  padding: 20px;
}

.sprint-section h3 {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  margin-bottom: 10px;
}

.sprint-section p {
  color: var(--sec);
  line-height: 1.6;
}

.sprint-section-blockers {
  border-left: 4px solid var(--red);
}

.sprint-detail-sidebar {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sprint-sidebar-card {
  background: white;
  border: 1px solid var(--rule);
  border-radius: 0;
  padding: 20px;
}

.sprint-sidebar-card h4 {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  margin-bottom: 12px;
}

.sprint-detail-row {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px solid var(--bgw);
  font-size: 0.9rem;
}

.sprint-detail-row:last-child {
  border-bottom: none;
}

.sprint-detail-label {
  color: var(--muted);
}

.sprint-dod-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sprint-dod-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--sec);
}

.sprint-dod-item.completed {
  color: var(--muted);
  text-decoration: line-through;
}

.sprint-dod-check {
  font-size: 0.75rem;
}

.sprint-doc-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  font-size: 0.85rem;
  color: var(--sec);
}

.sprint-doc-path {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.75rem;
  color: var(--muted);
}

/* ==========================================================================
   Zone Drift
   ========================================================================== */

.drift-legend {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 8px;
  padding: 0 4px;
}

.drift-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  color: var(--muted);
}

.drift-legend-swatch {
  width: 16px;
  height: 4px;
  border-radius: 2px;
  display: inline-block;
}

.drift-metrics {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.drift-metric {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.drift-metric-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}

.drift-reaction-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

@media (max-width: 768px) {
  .card-body > div[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
}

/* Responsive */
@media (max-width: 768px) {
  .sprint-grid {
    grid-template-columns: 1fr;
  }
  .sprint-detail-grid {
    grid-template-columns: 1fr;
  }
  .sprint-stats-bar {
    gap: 8px;
  }
  .stat-chip {
    min-width: 70px;
    padding: 8px 12px;
  }
  .stat-chip .stat-num {
    font-size: 1.2rem;
  }
}

/* ══════════════════════════════════════════════════════════════
   PLAYER PROFILE — Batter profile page styles (Sprint 009)
   ══════════════════════════════════════════════════════════════ */

/* Player Header */
.player-hdr { display:flex; align-items:flex-start; gap:24px; margin-bottom:0; padding-bottom:32px; border-bottom:1px solid var(--rule); }

.player-media { flex-shrink:0; position:relative; transition:opacity var(--tb),width var(--tb); }
.player-media.hidden { opacity:0; width:0; overflow:hidden; pointer-events:none; }

.headshot-wrap { width:72px; height:72px; border-radius:50%; overflow:hidden; background:var(--bgi); flex-shrink:0; }
.headshot-wrap img { width:100%; height:100%; object-fit:cover; display:block; }
.headshot-fallback { width:100%; height:100%; display:flex; align-items:center; justify-content:center; font:700 22px/1 var(--fi); color:var(--muted); }

.team-logo-badge { position:absolute; bottom:-2px; right:-2px; width:22px; height:22px; background:var(--bg); border-radius:50%; display:flex; align-items:center; justify-content:center; border:1px solid var(--rule); }
.team-logo-badge img { width:16px; height:16px; object-fit:contain; }
.team-logo-badge.hidden { display:none; }

.player-info { flex:1; }
.player-name { font:800 40px/1 var(--fi); letter-spacing:-.03em; text-transform:uppercase; margin-bottom:8px; }
.player-meta { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:8px; }
.pos-badge { font:600 10px/1 var(--fi); letter-spacing:.10em; text-transform:uppercase; background:var(--dark); color:rgba(255,255,255,.7); padding:3px 7px; }
.player-team { font:400 13px/1 var(--fi); color:var(--sec); letter-spacing:-.01em; }
.meta-sep { color:var(--rules); }
.player-salary { font:400 13px/1 var(--fi); color:var(--muted); letter-spacing:-.01em; font-variant-numeric:tabular-nums; }
.player-bio-line { font:300 13px/1 var(--fi); color:var(--muted); letter-spacing:-.01em; }
.player-narrative { font:300 14px/1.5 var(--fi); color:var(--sec); letter-spacing:-.01em; margin-top:12px; font-style:italic; border-left:2px solid var(--red); padding-left:12px; max-width:560px; }

/* Section Label */
.sec-label { font:500 9px/1 var(--fi); letter-spacing:.20em; text-transform:uppercase; color:var(--muted); display:block; margin-bottom:14px; margin-top:52px; padding-bottom:14px; border-bottom:1px solid var(--rule); }

/* Contextual Stat Strip (profile) */
.profile-stat-strip { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--rule); }
.stat-block { background:var(--bg); padding:20px 20px 18px; }
.stat-block:hover { background:var(--bgw); }
.stat-block-label { font:500 9px/1 var(--fi); letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:12px; display:flex; align-items:center; gap:6px; }
.stat-block-val { font:300 38px/1 var(--fi); color:var(--text); letter-spacing:-.02em; font-variant-numeric:tabular-nums; margin-bottom:12px; }
.stat-block-val em { font:300 18px/1 var(--fi); color:var(--sec); letter-spacing:-.01em; font-style:normal; }
.stat-block-val.good { color:var(--good); }
.stat-block-val.bad { color:var(--red); }

/* Percentile bar inside stat block */
.pct-bar-wrap { display:flex; align-items:center; gap:8px; }
.pct-bar-track { flex:1; height:3px; background:var(--bgi); position:relative; }
.pct-bar-fill { height:100%; background:var(--red); transition:width .6s var(--ease); }
.pct-bar-fill.good { background:var(--good); }
.pct-bar-fill.warn { background:var(--warn); }
.pct-label { font:500 9px/1 var(--fi); letter-spacing:.06em; color:var(--sec); white-space:nowrap; font-variant-numeric:tabular-nums; }
.pct-note { font:300 11px/1 var(--fi); color:var(--muted); margin-top:6px; letter-spacing:-.01em; }

/* Two / Three Column Layouts */
.two-col { display:grid; grid-template-columns:1fr 1fr; gap:48px; }
.three-col { display:grid; grid-template-columns:1fr 1fr 1fr; gap:40px; }
.chart-title { font:600 11px/1 var(--fi); letter-spacing:.08em; text-transform:uppercase; color:var(--text); margin-bottom:4px; }
.chart-sub { font:300 12px/1.4 var(--fi); color:var(--sec); letter-spacing:-.01em; margin-bottom:20px; }

/* Ump Ledger Numbers */
.ump-ledger { padding:0; }
.ump-numbers { display:flex; gap:32px; margin-bottom:20px; }
.ump-num-val { font:300 36px/1 var(--fi); letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.ump-num-val.bad { color:var(--red); }
.ump-num-val.good { color:var(--good); }
.ump-num-val.net-neg { color:var(--red); }
.ump-num-val.net-pos { color:var(--good); }
.ump-num-lbl { font:500 9px/1 var(--fi); letter-spacing:.10em; text-transform:uppercase; color:var(--sec); margin-top:5px; }
.ump-context { font:300 12px/1.5 var(--fi); color:var(--sec); letter-spacing:-.01em; padding-top:16px; border-top:1px solid var(--rule); }
.ump-rank-line { display:flex; align-items:center; gap:10px; margin-top:12px; }
.ump-rank-bar { flex:1; height:3px; background:var(--bgi); }
.ump-rank-fill { height:100%; background:var(--red); }
.ump-rank-label { font:500 9px/1 var(--fi); color:var(--muted); white-space:nowrap; font-variant-numeric:tabular-nums; }

/* Zone Portrait */
.zone-portrait { display:flex; flex-direction:column; gap:0; }
.zone-compare { display:flex; gap:32px; align-items:flex-start; }
.zone-col { display:flex; flex-direction:column; align-items:center; gap:8px; }
.zone-col-label { font:500 9px/1 var(--fi); letter-spacing:.10em; text-transform:uppercase; color:var(--muted); }
.zone-height-callout { font:300 28px/1 var(--fi); letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.zone-height-callout em { font:300 14px/1 var(--fi); font-style:normal; color:var(--sec); }
.zone-delta { font:500 11px/1.4 var(--fi); color:var(--sec); letter-spacing:-.01em; margin-top:4px; }
.zone-rank { font:300 11px/1 var(--fi); color:var(--muted); letter-spacing:-.01em; margin-top:2px; }

/* Challenge Dot Plot */
.challenge-zone-wrap { display:grid; grid-template-columns:1fr 320px; gap:48px; align-items:start; }
.challenge-list { display:flex; flex-direction:column; gap:0; }
.challenge-item { display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:start; padding:14px 0; border-bottom:1px solid var(--rule); }
.challenge-item:last-child { border-bottom:none; }
.challenge-dot-indicator { width:10px; height:10px; border-radius:50%; flex-shrink:0; margin-top:3px; }
.challenge-dot-indicator.overturned { background:var(--good); }
.challenge-dot-indicator.upheld { background:var(--red); }
.challenge-game { font:500 11px/1.4 var(--fi); color:var(--text); letter-spacing:-.01em; }
.challenge-context { font:300 10px/1.5 var(--fi); color:var(--sec); letter-spacing:-.01em; margin-top:2px; }
.challenge-context strong { font-weight:500; color:var(--text); }
.challenge-after { font:300 10px/1.4 var(--fi); color:var(--muted); margin-top:4px; letter-spacing:-.01em; font-style:italic; }
.challenge-result-chip { font:600 9px/1 var(--fi); letter-spacing:.08em; text-transform:uppercase; padding:3px 7px; border:1px solid currentColor; flex-shrink:0; white-space:nowrap; }
.challenge-result-chip.overturned { color:var(--good); }
.challenge-result-chip.upheld { color:var(--red); }
.challenge-grade { font:600 10px/1 var(--fi); letter-spacing:.06em; margin-top:6px; }

/* Game Log Table */
/* .game-log-tbl — row styling only; header handled by .pi-tbl */
.game-log-tbl th.key { background:var(--red); color:rgba(255,255,255,.9); }
.game-log-tbl tbody tr { background:var(--bg); border-bottom:1px solid var(--rule); height:36px; transition:background var(--tf); }
.game-log-tbl tbody tr:nth-child(even) { background:var(--bgw); }
.game-log-tbl tbody tr.has-chal { background:rgba(252,61,33,.06); }
.game-log-tbl tbody tr:hover { background:var(--bgi); }
.game-log-tbl td { padding:0 12px; text-align:right; font:400 12px/1 var(--fi); color:var(--text); font-variant-numeric:tabular-nums; letter-spacing:-.01em; vertical-align:middle; }
.game-log-tbl td.l { text-align:left; }
.game-log-tbl td.date { color:var(--sec); }
.game-log-tbl td.opp { font-weight:500; }
.game-log-tbl td.zero { color:var(--muted); }
.chal-badge { display:inline-flex; align-items:center; gap:3px; font:600 9px/1 var(--fi); letter-spacing:.06em; text-transform:uppercase; padding:2px 5px; border:1px solid currentColor; }
.chal-badge.ov { color:var(--good); }
.chal-badge.up { color:var(--red); }
.chal-badge.inv { color:var(--blue); }

/* Involvement Section */
.involvement-row { display:flex; align-items:center; gap:20px; padding:14px 0; border-bottom:1px solid var(--rule); }
.involvement-row:last-child { border-bottom:none; }
.inv-date { font:400 11px/1 var(--fi); color:var(--sec); width:48px; flex-shrink:0; font-variant-numeric:tabular-nums; }
.inv-game { flex:1; }
.inv-game-title { font:500 12px/1 var(--fi); color:var(--text); letter-spacing:-.01em; }
.inv-game-meta { font:300 10px/1.4 var(--fi); color:var(--sec); margin-top:3px; }
.inv-result-badge { font:600 9px/1 var(--fi); letter-spacing:.08em; text-transform:uppercase; padding:3px 7px; border:1px solid currentColor; flex-shrink:0; white-space:nowrap; }
.inv-result-badge.overturned { color:var(--good); }
.inv-result-badge.upheld { color:var(--red); }

/* ══════════════════════════════════════════════════════════
   PITCHER / CATCHER PROFILE — Sprint 010
══════════════════════════════════════════════════════════ */

/* Role dividers for dual-role catcher pages */
.role-divider {
  display:flex; align-items:center; gap:16px;
  margin-top:52px; margin-bottom:0;
  padding-bottom:14px; border-bottom:3px solid var(--dark);
}
.role-divider-text { font:800 13px/1 var(--fi); letter-spacing:.08em; text-transform:uppercase; }
.role-divider-sub { font:300 12px/1 var(--fi); color:var(--sec); letter-spacing:-.01em; }

/* Pitcher grid for "Pitchers He's Fought For" */
.pitcher-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:1px; background:var(--rule); border:1px solid var(--rule); }
.pitcher-card { background:var(--bg); padding:16px 18px; transition:background var(--tf); }
.pitcher-card:hover { background:var(--bgw); }
.pitcher-card-name { font:500 13px/1 var(--fi); color:var(--text); letter-spacing:-.01em; margin-bottom:4px; }
.pitcher-card-stat { display:flex; align-items:center; gap:8px; margin-top:10px; }
.pitcher-card-stat-val { font:300 24px/1 var(--fi); color:var(--text); letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.pitcher-card-stat-label { font:500 9px/1 var(--fi); letter-spacing:.08em; text-transform:uppercase; color:var(--sec); }
.pitcher-win-bar { height:3px; background:var(--bgi); margin-top:10px; }
.pitcher-win-fill { height:100%; }

/* Arsenal table */
/* .arsenal-tbl — row styling + keyed columns; header handled by .pi-tbl */
.arsenal-tbl th.key { background:var(--red); color:rgba(255,255,255,.9); }
.arsenal-tbl th.key-g { background:var(--good); color:rgba(255,255,255,.9); }
.arsenal-tbl tbody tr { background:var(--bg); border-bottom:1px solid var(--rule); height:44px; transition:background var(--tf); }
.arsenal-tbl tbody tr:nth-child(even) { background:var(--bgw); }
.arsenal-tbl tbody tr:hover { background:var(--bgi); }
.arsenal-tbl tbody tr.haschal { background:rgba(252,61,33,.06); }
.arsenal-tbl td { padding:0 14px; text-align:right; font:400 13px/1 var(--fi); color:var(--text); font-variant-numeric:tabular-nums; letter-spacing:-.01em; vertical-align:middle; }
.arsenal-tbl td.l { text-align:left; }
.arsenal-tbl td.pitch-name { font:500 13px/1 var(--fi); }
.pitch-usage-bar { height:3px; background:var(--bgi); margin-top:4px; }
.pitch-usage-fill { height:100%; background:var(--blue); }

/* Game table (pitcher/catcher game log) */
.game-tbl { width:100%; border-collapse:collapse; }
.game-tbl.fixed { table-layout:fixed; }
.game-tbl thead tr { background:var(--dark); }
.game-tbl th { font:600 9px/1 var(--fi); letter-spacing:.10em; text-transform:uppercase; color:rgba(255,255,255,.5); padding:0 12px; height:30px; text-align:right; white-space:nowrap; }
.game-tbl th.l { text-align:left; }
.game-tbl th.key { background:var(--red); color:rgba(255,255,255,.9); }
.game-tbl th.key-g { background:var(--good); color:rgba(255,255,255,.9); }
.game-tbl tbody tr { background:var(--bg); border-bottom:1px solid var(--rule); height:36px; transition:background var(--tf); }
.game-tbl tbody tr:nth-child(even) { background:var(--bgw); }
.game-tbl tbody tr:hover { background:var(--bgi); }
.game-tbl tbody tr.haschal { background:rgba(252,61,33,.06); }
.game-tbl td { padding:0 12px; text-align:right; font:400 12px/1 var(--fi); color:var(--text); font-variant-numeric:tabular-nums; letter-spacing:-.01em; vertical-align:middle; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.game-tbl td.l { text-align:left; }
.game-tbl td.date { color:var(--sec); font:400 11px/1 var(--fi); }

/* Challenge log list (pitcher profile) */
.chal-log { display:flex; flex-direction:column; gap:0; }
.chal-item { display:grid; grid-template-columns:auto 1fr auto; gap:14px; align-items:start; padding:14px 0; border-bottom:1px solid var(--rule); }
.chal-item:last-child { border-bottom:none; }
.chal-dot { width:10px; height:10px; border-radius:50%; margin-top:3px; flex-shrink:0; }
.chal-dot.ov { background:var(--red); }
.chal-dot.up { background:var(--good); }
.chal-title { font:500 12px/1 var(--fi); color:var(--text); letter-spacing:-.01em; }
.chal-meta { font:300 11px/1.4 var(--fi); color:var(--sec); margin-top:3px; }
.chal-badge-pc { font:600 9px/1 var(--fi); letter-spacing:.08em; text-transform:uppercase; padding:3px 7px; border:1px solid currentColor; white-space:nowrap; }
.chal-badge-pc.ov { color:var(--red); }
.chal-badge-pc.up { color:var(--good); }

/* Pip dots for catcher game log */
.chal-pip { display:inline-flex; gap:3px; align-items:center; }
.pip { width:7px; height:7px; border-radius:50%; }
.pip-ov { background:var(--good); }
.pip-up { background:var(--red); }

/* Pitcher stat strip override — 5 columns */
.stat-strip-5 { grid-template-columns:repeat(5,1fr); }
.stat-strip-4 { grid-template-columns:repeat(4,1fr); }

/* Trend chips */
.trend-chip { display:inline-flex; align-items:center; gap:4px; font:500 9px/1 var(--fi); letter-spacing:.06em; text-transform:uppercase; margin-top:7px; }
.trend-chip.pos { color:var(--good); }
.trend-chip.neg { color:var(--red); }
.trend-chip.flat { color:var(--muted); }
.trend-mini { display:flex; align-items:center; gap:6px; margin-top:6px; }
.trend-text { font:300 10px/1 var(--fi); color:var(--muted); letter-spacing:-.01em; }
.trend-text.up { color:var(--good); }
.trend-text.dn { color:var(--red); }

/* Ump context block */
.ump-context { font:300 12px/1.6 var(--fi); color:var(--sec); letter-spacing:-.01em; padding:14px 0; }

/* Pitcher/Catcher pct-fill inside stat-block */
.pct-fill { height:100%; }

/* Player/pitcher responsive rules consolidated into main responsive block — Sprint 014 */


/* ══════════════════════════════════════════════════════════════
   UMPIRE PROFILE PAGE
   ══════════════════════════════════════════════════════════════ */

/* Profile header */
.ump-hdr { padding-bottom:32px; border-bottom:1px solid var(--rule); margin-bottom:0; }
.ump-role-badge { font:500 9px/1 var(--fi); letter-spacing:.18em; text-transform:uppercase; color:var(--muted); margin-bottom:12px; display:block; }
.ump-name { font:800 44px/1 var(--fi); letter-spacing:-.03em; text-transform:uppercase; margin-bottom:10px; }
.ump-meta { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:12px; }
.ump-meta-item { font:400 13px/1 var(--fi); color:var(--sec); letter-spacing:-.01em; }
.meta-sep { color:var(--rules); }
.ump-alerts { display:flex; gap:10px; flex-wrap:wrap; margin-top:8px; }
.ump-alert { display:inline-flex; align-items:center; gap:8px; font:600 10px/1 var(--fi); letter-spacing:.10em; text-transform:uppercase; color:var(--red); border:1px solid var(--red); padding:4px 10px; }
.ump-alert.ok { color:var(--good); border-color:var(--good); }
.ump-alert.warn { color:var(--warn); border-color:var(--warn); }
.ump-narrative { font:300 14px/1.6 var(--fi); color:var(--sec); letter-spacing:-.01em; margin-top:16px; border-left:2px solid var(--red); padding-left:14px; max-width:640px; }

/* Ump stat strip — 5 columns grid with 1px gap */
.ump-stat-strip { display:grid; grid-template-columns:repeat(5,1fr); gap:1px; background:var(--rule); margin-top:36px; }
.ump-stat-block { background:var(--bg); padding:20px 18px 16px; }
.ump-stat-block:hover { background:var(--bgw); }
.ump-stat-lbl { font:500 9px/1 var(--fi); letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:10px; }
.ump-stat-val { font:300 36px/1 var(--fi); color:var(--text); letter-spacing:-.02em; font-variant-numeric:tabular-nums; margin-bottom:10px; }
.ump-stat-val em { font:300 16px/1 var(--fi); color:var(--sec); font-style:normal; }
.ump-stat-val.bad { color:var(--red); }
.ump-stat-val.good { color:var(--good); }
.ump-stat-val.warn { color:var(--warn); }
.ump-pct-row { display:flex; align-items:center; gap:8px; }
.ump-pct-track { flex:1; height:3px; background:var(--bgi); }
.ump-pct-fill { height:100%; }
.ump-pct-note { font:300 10px/1 var(--fi); color:var(--muted); margin-top:5px; letter-spacing:-.01em; }
.ump-trend-chip { display:inline-flex; align-items:center; gap:4px; font:500 9px/1 var(--fi); letter-spacing:.06em; text-transform:uppercase; padding:2px 6px; border:1px solid currentColor; }
.ump-trend-chip.up { color:var(--red); }
.ump-trend-chip.dn { color:var(--good); }
.ump-trend-chip.flat { color:var(--muted); }

/* Pitch type table */
/* .pitch-tbl — row styling + keyed columns; header handled by .pi-tbl */
.pitch-tbl th.key { background:var(--red); color:rgba(255,255,255,.9); }
.pitch-tbl tbody tr { border-bottom:1px solid var(--rule); height:38px; background:var(--bg); }
.pitch-tbl tbody tr:nth-child(even) { background:var(--bgw); }
.pitch-tbl tbody tr:hover { background:var(--bgi); }
.pitch-tbl td { padding:0 14px; text-align:right; font:400 12px/1 var(--fi); color:var(--text); font-variant-numeric:tabular-nums; letter-spacing:-.01em; vertical-align:middle; }
.pitch-tbl td.l { text-align:left; }
.pitch-tbl td.name { font:500 13px/1 var(--fi); color:var(--text); }
.pitch-tbl td.hi { color:var(--red); font-weight:500; }
.miss-bar { height:3px; background:var(--bgi); display:inline-block; vertical-align:middle; width:52px; margin-right:6px; }
.miss-fill { height:100%; }

/* Accuracy badge */
.acc-badge { font:600 10px/1 var(--fi); padding:2px 6px; letter-spacing:.04em; }
.acc-badge.good { color:var(--good); background:rgba(46,125,50,.08); }
.acc-badge.warn { color:var(--warn); background:rgba(180,83,9,.08); }
.acc-badge.bad { color:var(--red); background:rgba(252,61,33,.08); }

/* Challenger rows */
.chal-row { display:flex; align-items:center; gap:14px; padding:12px 0; border-bottom:1px solid var(--rule); }
.chal-row:last-child { border-bottom:none; }
.chal-rank { font:300 20px/1 var(--fi); color:var(--muted); width:24px; flex-shrink:0; font-variant-numeric:tabular-nums; text-align:center; }
.chal-name { flex:1; font:500 12px/1 var(--fi); color:var(--red); letter-spacing:-.01em; cursor:pointer; }
.chal-name:hover { text-decoration:underline; }
.chal-team { font:300 11px/1 var(--fi); color:var(--sec); }
.chal-bar-wrap { width:100px; }
.chal-bar-track { height:3px; background:var(--bgi); }
.chal-bar-fill { height:100%; background:var(--good); }
.chal-pct { font:500 11px/1 var(--fi); color:var(--text); font-variant-numeric:tabular-nums; text-align:right; min-width:36px; }
.chal-count { font:300 10px/1 var(--fi); color:var(--muted); min-width:32px; text-align:right; font-variant-numeric:tabular-nums; }

/* Pregame intel panel */
.intel-panel { background:var(--bg); padding:28px; margin-top:0; border-top:2px solid var(--rules); }
.intel-header { font:500 9px/1 var(--fi); letter-spacing:.20em; text-transform:uppercase; color:var(--muted); margin-bottom:20px; display:flex; align-items:center; gap:10px; }
.intel-header::after { content:''; flex:1; height:1px; background:var(--rule); }
.intel-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:0; border-top:1px solid var(--rule); }
.intel-item { padding:16px 20px; border-right:1px solid var(--rule); }
.intel-item:last-child, .intel-item:nth-child(3), .intel-item:nth-child(6) { border-right:none; }
.intel-item-label { font:500 9px/1 var(--fi); letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:8px; }
.intel-item-val { font:600 15px/1.4 var(--fi); color:var(--dark); letter-spacing:-.01em; }
.intel-item-val.alert { color:var(--red); }
.intel-item-val.good { color:var(--good); }
.intel-item-sub { font:300 11px/1.4 var(--fi); color:var(--sec); margin-top:4px; letter-spacing:-.01em; }

/* Umpire responsive rules consolidated into main responsive block — Sprint 014 */


/* ══════════════════════════════════════════════════════════════
   DESIGN SYSTEM — COMPONENT LIBRARY (from abs-design)
   These classes are the canonical reference for the new design.
   Future sprints will migrate existing markup to use these.
   ══════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════
   PAGE SHELL
══════════════════════════════════════════════════════════ */

/* Standard page layout: sidebar (optional) + main */
.pg-layout { display:flex; min-height:100vh; }
.pg-main { flex:1; overflow:hidden; min-width:0; }

/* Section cadence — matches showpiece exactly */
.section {
  padding: var(--section-v) var(--pg-m) var(--section-vb);
  border-bottom: 1px solid var(--rule);
}
.section:last-of-type { border-bottom:none; }
.section-header { margin-bottom:52px; }
.section-num {
  font: 500 9px/1 var(--fi);
  letter-spacing: .20em;
  text-transform: uppercase;
  color: var(--muted);
  display: block;
  margin-bottom: 14px;
}
.section-title {
  font: 800 36px/1 var(--fi);
  letter-spacing: -.03em;
  margin-bottom: 10px;
}
.section-desc {
  font: 300 15px/1.6 var(--fi);
  color: var(--sec);
  letter-spacing: -.01em;
  max-width: 600px;
}

/* Subsection label */
.subsec { margin-bottom: var(--subsec-mb); }
.subsec:last-child { margin-bottom: 0; }
.subsec-label {
  font: 500 9px/1 var(--fi);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  display: block;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 24px;
}

/* Grid utilities */
.g   { display:grid; gap:var(--grid-gap); }
.g2  { grid-template-columns:1fr 1fr; }
.g3  { grid-template-columns:1fr 1fr 1fr; }
.g4  { grid-template-columns:1fr 1fr 1fr 1fr; }
.g12 { grid-template-columns:1fr 2fr; }
.g21 { grid-template-columns:2fr 1fr; }
.g13 { grid-template-columns:1fr 3fr; }
.g31 { grid-template-columns:3fr 1fr; }


/* ══════════════════════════════════════════════════════════
   COVER / HERO
══════════════════════════════════════════════════════════ */
.cover {
  background: var(--dark);
  padding: 88px var(--pg-m) 80px;
  border-bottom: 3px solid var(--red);
  position: relative;
  overflow: hidden;
}
.cover-ghost {
  position: absolute; right:-24px; top:-60px;
  font: 900 340px/1 var(--fi);
  letter-spacing: -.06em;
  color: rgba(255,255,255,.016);
  pointer-events: none; user-select: none;
}
.cover-eyebrow {
  font: 500 9px/1 var(--fi);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255,255,255,.25);
  margin-bottom: 20px;
}
.cover-headline {
  font: 900 80px/1 var(--fi);
  color: #fff;
  letter-spacing: -.04em;
  margin-bottom: 10px;
}
.cover-headline em { color:var(--red); font-style:normal; }
.cover-sub {
  font: 300 18px/1.55 var(--fi);
  color: rgba(255,255,255,.42);
  max-width: 520px;
  letter-spacing: -.01em;
  margin-bottom: 56px;
}
.cover-stats {
  display: flex; gap: 48px; flex-wrap: wrap;
  padding-top: 32px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.cover-stat label {
  font: 500 8px/1 var(--fi);
  letter-spacing: .18em; text-transform: uppercase;
  color: rgba(255,255,255,.25);
  display: block; margin-bottom: 7px;
}
.cover-stat span {
  font: 500 13px/1 var(--fi);
  color: rgba(255,255,255,.65);
  letter-spacing: -.01em;
}
.cover-stat span.accent { color:var(--red); }


/* ══════════════════════════════════════════════════════════
   SIDEBAR NAVIGATION
══════════════════════════════════════════════════════════ */
.sidebar {
  width: 200px; flex-shrink: 0;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  background: var(--foot);
  border-right: 1px solid rgba(255,255,255,.05);
  display: flex; flex-direction: column;
}
.sidebar::-webkit-scrollbar { width:3px; }
.sidebar::-webkit-scrollbar-thumb { background:rgba(255,255,255,.1); }
.sb-brand {
  padding: 20px 18px 14px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.sb-brand-name {
  font: 800 16px/1 var(--fi);
  color: var(--red);
  letter-spacing: -.02em;
}
.sb-brand-sub {
  font: 300 9px/1 var(--fi);
  color: rgba(255,255,255,.25);
  margin-top: 5px;
}
.sb-nav { padding:10px 0; flex:1; }
.sb-section { margin-bottom:4px; }
.sb-section-title {
  font: 500 8px/1 var(--fi);
  letter-spacing: .18em; text-transform: uppercase;
  color: rgba(255,255,255,.2);
  padding: 8px 18px 4px; display: block;
}
.sb-link {
  display: block;
  font: 400 11px/1.2 var(--fi);
  color: rgba(255,255,255,.38);
  padding: 6px 18px;
  border-left: 2px solid transparent;
  letter-spacing: -.01em;
  transition: color var(--tf), background var(--tf), border-color var(--tf);
  cursor: pointer;
}
.sb-link:hover { color:rgba(255,255,255,.8); background:rgba(255,255,255,.04); }
.sb-link.active { color:#fff; border-left-color:var(--red); background:rgba(252,61,33,.08); }


/* ══════════════════════════════════════════════════════════
   HEADER / NAV
══════════════════════════════════════════════════════════ */
.pg-red-bar  { height:3px; background:var(--red); }
.site-hdr {
  position: sticky; top:3px; z-index:var(--z-sticky);
  background: var(--bg);
  height: var(--hdr-h);
}
.hdr-inner {
  max-width: var(--max-w); margin:0 auto;
  padding: 0 var(--pg-m);
  height: 100%;
  display: flex; align-items: center; gap:32px;
  position: relative;
}
.hdr-logo { display:flex; align-items:center; gap:10px; margin-right:auto; text-decoration:none; }
.pi-mark  { overflow:visible; flex-shrink:0; }
.hdr-logo-stack { display:flex; flex-direction:column; gap:2px; }
.pi-wm-r { font:800 28px/1 var(--fi); color:var(--red); letter-spacing:-.03em; }
.pi-wm-l { font:300 28px/1 var(--fi); color:var(--text); letter-spacing:-.01em; }
.pi-tagline { font:300 11px/1 var(--fi); letter-spacing:-.01em; color:var(--sec); }
.hdr-rule { height:1px; background:var(--rules); }

/* ── SEARCH ────────────────────────────────────────────── */
.search-wrap {
  position: relative;
  flex: 1;
  max-width: 420px;
}
.search-input {
  width: 100%;
  padding: 7px 12px;
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  font: 400 12px/1 var(--fi);
  color: var(--text);
  background: var(--bg);
  letter-spacing: -.01em;
  transition: border-color var(--tf);
}
.search-input::placeholder { color: var(--muted); font-weight: 300; }
.search-input:focus { outline: none; border-color: var(--red); }

.search-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  width: 480px;
  background: var(--bg);
  border: 1px solid var(--rules);
  z-index: var(--z-overlay);
  max-height: 440px;
  overflow-y: auto;
}
.search-dropdown.open { display: block; }

.search-group-label {
  font: 500 8px/1 var(--fi);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 10px 14px 5px;
}
.search-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px;
  cursor: pointer;
  border-bottom: 1px solid var(--rule);
  transition: background var(--tf);
  min-height: 32px;
}
.search-item:hover, .search-item.focused { background: var(--bgw); }

/* Left column: team logo or empty spacer */
.si-logo {
  width: 18px; height: 18px; flex-shrink: 0;
  filter: grayscale(1) opacity(.45);
  transition: filter var(--tf);
}
.search-item:hover .si-logo { filter: none; }
.si-logo-empty { width: 18px; flex-shrink: 0; }

/* Center: label */
.si-label { font: 500 12px/1 var(--fi); color: var(--text); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.si-label strong { font-weight: 700; }

/* Right column */
.si-right { font: 400 11px/1 var(--fi); color: var(--sec); white-space: nowrap; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.si-pos { color: var(--muted); }
.si-abbr { color: var(--sec); font-weight: 500; letter-spacing: .04em; }
.si-ov { color: var(--sec); }
.si-date { color: var(--muted); }

/* Challenge dots — stacked 2 rows (away top, home bottom) */
.si-dots { display: flex; flex-direction: column; gap: 2px; margin-left: auto; align-items: flex-end; }
.si-dots-row { display: flex; gap: 3px; }
.sd { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; opacity: .4; }
.sd-w { background: var(--good); }
.sd-l { background: var(--red); }
.sd-u { background: var(--bgi); opacity: .5; }

.search-empty { padding: 20px 14px; font: 300 12px/1.4 var(--fi); color: var(--muted); text-align: center; }

/* Mobile search button (magnifying glass) */
.mobile-search-btn {
  display: none;
  background: none; border: none; cursor: pointer;
  color: var(--sec); padding: 6px;
  transition: color var(--tf);
}
.mobile-search-btn:hover { color: var(--red); }

/* Fullscreen search overlay (mobile) */
.search-fullscreen {
  position: fixed !important;
  top: 0; left: 0; right: 0; bottom: 0;
  max-width: none !important;
  z-index: var(--z-modal);
  background: var(--bg);
  display: flex !important;
  flex-direction: column;
  padding: 0;
}
.search-fullscreen .search-row {
  display: flex; align-items: center;
  padding: 10px 12px; gap: 8px;
  border-bottom: 1px solid var(--rule);
}
.search-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--rule);
}
.search-row .search-input {
  flex: 1; font-size: 16px; padding: 10px 12px;
  border: 1px solid var(--rule);
}
.search-close {
  background: none; border: none; cursor: pointer;
  font: 400 14px/1 var(--fi); color: var(--red);
  padding: 8px 0; flex-shrink: 0; white-space: nowrap;
}
.search-fullscreen .search-dropdown {
  position: static;
  width: 100%;
  flex: 1;
  max-height: none;
  border: none;
  border-top: 1px solid var(--rule);
}
.search-fullscreen .search-dropdown.open { display: block; }
.search-fullscreen .sd { opacity: .35; }
.search-fullscreen .sd-u { opacity: .4; }

.site-nav { display:flex; gap:28px; align-items:center; }
.nav-lnk {
  font: 600 11px/1 var(--fi);
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--sec);
  padding-bottom: 4px;
  border-bottom: 2px solid transparent;
  text-decoration: none;
  transition: color var(--tf), border-color var(--tf);
}
.nav-lnk:hover { color:var(--text); }
.nav-lnk.active { color:var(--text); border-bottom-color:var(--red); }

/* Nav dropdown (Admin menu) — flat, no card, rule-line only */
.nav-dd { position: relative; display: inline-flex; align-items: center; }
.nav-dd-trigger {
  background: none; border: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  /* Button reset so .nav-lnk typography applies cleanly */
  font-family: inherit;
}
.nav-dd-caret {
  font-size: 10px; line-height: 1;
  opacity: .55;
  transition: transform var(--tf), opacity var(--tf);
}
.nav-dd:hover .nav-dd-caret,
.nav-dd.open .nav-dd-caret { opacity: 1; }
.nav-dd.open .nav-dd-caret { transform: translateY(1px); }

.nav-dd-panel {
  position: absolute;
  top: calc(100% + 10px);   /* clears the 2px underline + padding-bottom */
  right: 0;
  min-width: 180px;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 0;
  padding: 6px 0;
  display: none;
  z-index: 100;
}
.nav-dd.open .nav-dd-panel { display: block; }

.nav-dd-item {
  display: block;
  padding: 10px 16px;
  border-bottom: none !important;    /* override .nav-lnk bottom-border */
  white-space: nowrap;
}
.nav-dd-item:hover { background: var(--rule-soft, rgba(0,0,0,0.04)); color: var(--text); }
.nav-dd-item.active {
  color: var(--text);
  border-bottom: none !important;
  box-shadow: inset 2px 0 0 var(--red);
}

/* Live indicator */
.live-dot {
  width:6px; height:6px; border-radius:50%;
  background:var(--good);
  display:inline-block;
  animation: ldot 2s ease-in-out infinite;
}
@keyframes ldot { 0%,100%{opacity:1} 50%{opacity:.28} }


/* ══════════════════════════════════════════════════════════
   TAB NAVIGATION
══════════════════════════════════════════════════════════ */
.tab-nav { display:flex; gap:28px; }
.tab-lnk {
  font: 600 11px/1 var(--fi);
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--sec);
  padding-bottom: 10px;
  border-bottom: 2px solid transparent;
  white-space: nowrap; cursor:pointer;
  transition: color var(--tf), border-color var(--tf);
}
.tab-lnk:hover { color:var(--text); }
.tab-lnk.active { color:var(--red); border-bottom-color:var(--red); }


/* ══════════════════════════════════════════════════════════
   RULE LINES
══════════════════════════════════════════════════════════ */
.rule-h   { height:1px; background:var(--rule);  border:none; display:block; }
.rule-s   { height:1px; background:var(--rules); border:none; display:block; }
.rule-red { height:3px; background:var(--red);   border:none; display:block; }


/* ══════════════════════════════════════════════════════════
   FILTER CONTROLS (Savant pattern)
══════════════════════════════════════════════════════════ */
.filters { display:flex; flex-wrap:wrap; gap:8px; align-items:flex-end; }
.flt {
  display: flex; flex-direction: column;
  border: 1px solid var(--rules);
  min-width: 128px;
  transition: border-color var(--tf);
}
.flt:focus-within { border-color:var(--red); }
.flt.focus { border-color:var(--red); }
.flt-l {
  font: 500 9px/1 var(--fi);
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted);
  padding: 5px 8px 2px;
}
.flt-l.focus { color:var(--red); }
.flt-v {
  font: 400 13px/1 var(--fi);
  color: var(--text);
  padding: 2px 22px 6px 8px;
  letter-spacing: -.01em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%23999'/%3E%3C/svg%3E") no-repeat right 8px center;
  appearance: none; -webkit-appearance: none;
  border: none; outline: none;
  background-color: transparent;
  width: 100%; cursor: pointer;
}
.flt-v.focus { color:var(--red); }


/* ══════════════════════════════════════════════════════════
   BUTTONS
══════════════════════════════════════════════════════════ */
.btn-p {
  font: 600 10px/1 var(--fi);
  letter-spacing: .10em; text-transform: uppercase;
  background: var(--red); color: #fff;
  padding: 9px 18px;
  border: none; border-radius: var(--r);
  cursor: pointer;
  transition: opacity var(--tf);
}
.btn-p:hover { opacity:.88; }
.btn-p:disabled { opacity:.32; cursor:not-allowed; }

.btn-g {
  font: 600 10px/1 var(--fi);
  letter-spacing: .10em; text-transform: uppercase;
  background: transparent; color: var(--sec);
  padding: 8px 14px;
  border: 1px solid var(--rules); border-radius: var(--r);
  cursor: pointer;
  transition: color var(--tf), border-color var(--tf);
}
.btn-g:hover { color:var(--text); border-color:var(--text); }
.btn-g.active { color:var(--red); border-color:var(--red); }


/* ══════════════════════════════════════════════════════════
   DATA TABLE
══════════════════════════════════════════════════════════ */
.tbl-wrap { overflow-x:auto; }
.tbl { width:100%; border-collapse:collapse; font-family:var(--fi); }

/* Header */
.tbl thead tr { background:var(--dark); }
.tbl th {
  font: 600 9px/1 var(--fi);
  letter-spacing: .10em; text-transform: uppercase;
  color: rgba(255,255,255,.50);
  padding: 0 14px; height: 32px;
  text-align: right; white-space: nowrap; vertical-align: middle;
  border-right: 1px solid rgba(255,255,255,.04);
  cursor: pointer;
  transition: color var(--tf);
}
.tbl th:hover { color:rgba(255,255,255,.88); }
.tbl th:last-child { border-right:none; }
.tbl th.l { text-align:left; }
.tbl th.key { background:var(--red); color:rgba(255,255,255,.92); }
.tbl th.key:hover { color:#fff; }
.tbl th.sorted { color:#fff; }

/* Body */
.tbl tbody tr {
  background: var(--bg);
  border-bottom: 1px solid var(--rule);
  height: var(--row-h);
  transition: background var(--tf);
  cursor: pointer;
}
.tbl tbody tr:nth-child(even) { background:var(--bgw); }
.tbl tbody tr:hover { background:var(--bgi); }
.tbl td {
  padding: 0 14px;
  text-align: right; vertical-align: middle;
  color: var(--text); white-space: nowrap;
  font: 400 12px/1 var(--fi);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}
.tbl td.l      { text-align:left; }
.tbl td.rank   { color:var(--muted); font:300 12px/1 var(--fi); width:36px; }
.tbl td.player { font:500 13px/1 var(--fi); color:var(--red); }
.tbl td.team   { font:300 12px/1 var(--fi); color:var(--sec); }
.tbl td.grp    { border-left:1px dashed var(--ruled); }  /* column group divider */

/* Win% bar */
.win-wrap { display:flex; align-items:center; gap:8px; justify-content:flex-end; }
.win-bar  { width:52px; height:3px; background:var(--bgi); flex-shrink:0; }
.win-fill { height:100%; background:var(--good); }

/* Heat map cells — add as td class */
.h5 { background:var(--h5); }
.h4 { background:var(--h4); }
.h3 { background:var(--h3); }
.h2 { background:var(--h2); }


/* ══════════════════════════════════════════════════════════
   SCORE / GRADE CHIPS
══════════════════════════════════════════════════════════ */
.chip {
  display: inline-flex; align-items:center; justify-content:center;
  font: 600 11px/1 var(--fi);
  letter-spacing: .04em;
  padding: 3px 7px;
  border: 1px solid currentColor;
  border-radius: 0;
  min-width: 28px;
  white-space: nowrap;
}
.chip-a { color:var(--ga-tx); background:var(--ga-bg); }
.chip-b { color:var(--gb-tx); background:var(--gb-bg); }
.chip-c { color:var(--gc-tx); background:var(--gc-bg); }
.chip-d { color:var(--gd-tx); background:var(--gd-bg); }
.chip-n { color:var(--text); background:var(--bgw); border-color:var(--rules); }


/* ══════════════════════════════════════════════════════════
   TAGS
══════════════════════════════════════════════════════════ */
.tag {
  display: inline-block;
  font: 500 9px/1 var(--fi);
  letter-spacing: .10em; text-transform: uppercase;
  padding: 3px 7px;
  border: 1px solid currentColor;
  border-radius: var(--r-sm);  /* 2px — only exception to zero-radius rule */
  white-space: nowrap;
}
.tag-n { color:var(--sec); }
.tag-r { color:var(--red); }
.tag-g { color:var(--good); }
.tag-w { color:var(--warn); }
.tag-b { color:var(--blue); }
.tags  { display:flex; flex-wrap:wrap; gap:6px; }


/* ══════════════════════════════════════════════════════════
   PROFILE + STAT STRIP
══════════════════════════════════════════════════════════ */
.profile-name {
  font: 800 36px/1 var(--fi);
  letter-spacing: -.02em; text-transform: uppercase;
  margin-bottom: 5px;
}
.profile-role {
  font: 300 13px/1 var(--fi);
  color: var(--sec);
  letter-spacing: -.01em;
  margin-bottom: 20px;
}
.back-lnk {
  font: 500 10px/1 var(--fi);
  letter-spacing: .10em; text-transform: uppercase;
  color: var(--muted);
  display: inline-block;
  margin-bottom: 20px;
  cursor: pointer;
  transition: color var(--tf);
}
.back-lnk:hover { color:var(--red); }

.stat-strip {
  display: flex; gap:40px; flex-wrap:wrap;
  padding: 24px 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.stat-item { display:flex; flex-direction:column; gap:4px; }
.stat-bar  { width:20px; height:2px; background:var(--red); margin-bottom:8px; }
.stat-val  { font:300 34px/1 var(--fi); color:var(--text); letter-spacing:-.02em; }
.stat-val.bad  { color:var(--red); }
.stat-val.good { color:var(--good); }
.stat-lbl  { font:500 10px/1 var(--fi); letter-spacing:.08em; text-transform:uppercase; color:var(--sec); }


/* ══════════════════════════════════════════════════════════
   GAME FEED ROWS
══════════════════════════════════════════════════════════ */
.feed-date {
  font: 500 9px/1 var(--fi);
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--muted);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--rule);
}
.game-row {
  display: flex; align-items:center; gap:20px;
  padding: 14px 0;
  border-bottom: 1px solid var(--rule);
  transition: background var(--tf);
  cursor: pointer;
}
.game-row:hover {
  background: var(--bgw);
  margin: 0 -16px; padding: 14px 16px;
}
.game-row:last-child { border-bottom:none; }
.game-teams { display:flex; align-items:center; gap:12px; min-width:188px; }
.team-abbr  { font:700 15px/1 var(--fi); letter-spacing:.02em; }
.game-vs    { font:300 13px/1 var(--fi); color:var(--muted); }
.game-status {
  font: 500 10px/1 var(--fi);
  letter-spacing: .10em; text-transform: uppercase;
  color: var(--muted);
}
.game-status.live { color:var(--good); }
.cdots  { display:flex; gap:4px; align-items:center; }
.cdot   { width:8px; height:8px; border-radius:50%; }
.cdot-w { background:var(--good); }
.cdot-l { background:var(--red); }
.cdot-u { background:var(--bgi); border:1px solid var(--rules); }
.cdot-label { font:300 10px/1 var(--fi); color:var(--muted); margin-left:4px; }
.game-right { display:flex; align-items:center; gap:20px; margin-left:auto; }


/* ══════════════════════════════════════════════════════════
   CHART HEADER
══════════════════════════════════════════════════════════ */
.ch  { margin-bottom:20px; }
.ct  { font:600 11px/1 var(--fi); letter-spacing:.08em; text-transform:uppercase; color:var(--text); margin-bottom:4px; }
.cs  { font:300 12px/1.4 var(--fi); color:var(--sec); letter-spacing:-.01em; margin-bottom:10px; }


/* ══════════════════════════════════════════════════════════
   LEGEND
══════════════════════════════════════════════════════════ */
.legend { display:flex; gap:20px; flex-wrap:wrap; margin-top:16px; padding-top:12px; border-top:1px solid var(--rule); }
.li     { display:flex; align-items:center; gap:6px; font:400 10px/1 var(--fi); color:var(--sec); cursor:pointer; transition:opacity var(--tf); }
.li-dot  { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.li-line { width:16px; height:2px; flex-shrink:0; }
.li-dash { width:16px; height:0; border-top:2px dashed; flex-shrink:0; }


/* ══════════════════════════════════════════════════════════
   PI-TIP — Unified Tooltip System (SPRINT-052)
   Change tokens here → all 5 types update.
══════════════════════════════════════════════════════════ */

/* ── Base class ── */
.pi-tip {
  font-family: var(--fi);
  font-variant-numeric: tabular-nums;
  background: var(--bg);
  border: 1px solid var(--rules);
  border-top: 2px solid var(--red);
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
  padding: 10px 12px;
  min-width: 180px;
  max-width: 280px;
  color: var(--dark);
}

/* ── Shared structural elements ── */
.pi-tip__eyebrow { font: 500 9px/1 var(--fi); letter-spacing: .04em; color: var(--muted); margin-bottom: 4px; display: flex; align-items: center; gap: 6px; }
.pi-tip__value { font: 600 13px/1.2 var(--fi); color: var(--dark); margin-bottom: 6px; }
.pi-tip__detail { font: 400 10px/1.4 var(--fi); color: var(--sec); }
.pi-tip__row { display: flex; align-items: baseline; justify-content: space-between; padding: 3px 0; }
.pi-tip__row + .pi-tip__row { border-top: 1px solid var(--rule); }
.pi-tip__label { font: 500 10px/1 var(--fi); color: var(--muted); }
.pi-tip__data { font: 500 10px/1 var(--fi); color: var(--dark); text-align: right; }
.pi-tip__divider { border-top: 1px solid var(--rule); margin: 6px 0; }

/* ── Semantic colors (values only) ── */
.pi-tip__data.--good, .--good { color: var(--good); }
.pi-tip__data.--bad, .--bad { color: var(--red); }
.pi-tip__data.--warn, .--warn { color: var(--warn); }

/* ── Inline tags ── */
.pi-tip__tag { display: inline-flex; align-items: center; gap: 3px; font: 600 8px/1 var(--fi); letter-spacing: .04em; text-transform: uppercase; padding: 2px 5px; border: 1px solid; border-radius: 2px; }
.pi-tip__tag.--ot { border-color: rgba(46,125,50,.3); background: rgba(46,125,50,.06); color: var(--good); }
.pi-tip__tag.--up { border-color: rgba(252,61,33,.3); background: rgba(252,61,33,.06); color: var(--red); }
.pi-tip__tag.--mi { border-color: rgba(180,83,9,.3); background: rgba(180,83,9,.06); color: var(--warn); }
.pi-tip__tag.--ksave { border-color: rgba(252,61,33,.25); background: rgba(252,61,33,.05); color: var(--red); }

/* ── Type 1: Pitch ── */
.pi-tip--pitch { min-width: 200px; max-width: 260px; }
.pi-tip--pitch .pitch-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.pi-tip--pitch .pitch-type { font: 600 12px/1.2 var(--fi); color: var(--dark); }
.pi-tip--pitch .pitch-speed { font: 300 12px/1.2 var(--fi); color: var(--sec); }
.pi-tip--pitch .pitch-matchup { font: 400 9px/1.3 var(--fi); color: var(--muted); margin-top: 2px; }
.pi-tip--pitch .call-result { display: flex; align-items: center; gap: 6px; padding: 6px 8px; margin: 6px -12px; background: var(--bgw); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.pi-tip--pitch .call-result.--overturned { background: rgba(46,125,50,.06); }
.pi-tip--pitch .call-result.--upheld { background: rgba(252,61,33,.04); }
.pi-tip--pitch .call-result.--missed { background: rgba(180,83,9,.05); }
.pi-tip--pitch .call-arrow { font: 400 11px/1 var(--fi); color: var(--muted); }
.pi-tip--pitch .call-original, .pi-tip--pitch .call-new { font: 500 11px/1 var(--fi); }
.pi-tip--pitch .call-original { color: var(--sec); }
.pi-tip--pitch .call-new.--good { color: var(--good); }
.pi-tip--pitch .call-new.--bad { color: var(--red); }
.pi-tip--pitch .call-new.--warn { color: var(--warn); }
.pi-tip--pitch .stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; margin-top: 6px; }
.pi-tip--pitch .stat { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
.pi-tip--pitch .stat-label { font: 400 9px/1 var(--fi); color: var(--muted); }
.pi-tip--pitch .stat-value { font: 500 10px/1 var(--fi); color: var(--dark); }
.pi-tip--pitch .score-block { display: flex; align-items: baseline; gap: 6px; margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--rule); }
.pi-tip--pitch .score-value { font: 700 14px/1 var(--fi); }
.pi-tip--pitch .score-tier { font: 500 9px/1 var(--fi); color: var(--muted); }

/* ── Type 2: Chart ── */
.pi-tip--chart { min-width: 160px; max-width: 220px; }
.pi-tip--chart .chart-eyebrow { font: 500 9px/1 var(--fi); letter-spacing: .04em; color: var(--muted); margin-bottom: 4px; }
.pi-tip--chart .chart-value { font: 300 20px/1.1 var(--fi); letter-spacing: -.02em; color: var(--dark); margin-bottom: 2px; }
.pi-tip--chart .chart-context { font: 500 9px/1 var(--fi); color: var(--muted); }
.pi-tip--chart .chart-detail { font: 400 10px/1.3 var(--fi); color: var(--sec); margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--rule); }
.pi-tip--chart .metric-row { display: flex; align-items: baseline; gap: 6px; }
.pi-tip--chart .metric-pct { font: 500 9px/1 var(--fi); color: var(--muted); }
.pi-tip--chart .metric-pct.--good { color: var(--good); }
.pi-tip--chart .metric-pct.--bad { color: var(--red); }

/* ── Type 3: Table header definition ── */
.pi-tip--def { min-width: 200px; max-width: 280px; }
.pi-tip--def .def-name { font: 700 11px/1.2 var(--fi); color: var(--dark); margin-bottom: 6px; }
.pi-tip--def .def-desc { font: 400 10px/1.45 var(--fi); color: var(--sec); }
.pi-tip--def .def-context { display: flex; align-items: baseline; gap: 12px; margin-top: 8px; padding-top: 6px; border-top: 1px solid var(--rule); font: 400 9px/1 var(--fi); color: var(--muted); }
.pi-tip--def .def-context strong { font-weight: 600; color: var(--dark); }

/* ── Type 4: Event ── */
.pi-tip--event { min-width: 220px; max-width: 300px; }
.pi-tip--event .event-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-bottom: 6px; border-bottom: 1px solid var(--rule); margin-bottom: 6px; }
.pi-tip--event .event-date { font: 600 10px/1 var(--fi); color: var(--dark); }
.pi-tip--event .event-game { font: 400 9px/1 var(--fi); color: var(--muted); }
.pi-tip--event .event-list { display: flex; flex-direction: column; }
.pi-tip--event .event-item { display: flex; align-items: flex-start; gap: 8px; padding: 6px 0; border-top: 1px solid var(--rule); }
.pi-tip--event .event-item:first-child { border-top: none; padding-top: 0; }
.pi-tip--event .event-dot { width: 8px; height: 8px; flex-shrink: 0; margin-top: 3px; }
.pi-tip--event .event-dot.--ot { background: var(--good); }
.pi-tip--event .event-dot.--up { background: var(--red); }
.pi-tip--event .event-dot.--mi { background: var(--warn); }
.pi-tip--event .event-content { flex: 1; min-width: 0; }
.pi-tip--event .event-result { font: 500 10px/1.3 var(--fi); color: var(--dark); }
.pi-tip--event .event-meta { font: 400 9px/1.3 var(--fi); color: var(--muted); margin-top: 2px; }

/* ── Type 5: Simple ── */
.pi-tip--simple { min-width: 80px; max-width: 200px; padding: 6px 10px; border-top-width: 1px; border-top-color: var(--rules); }
.pi-tip--simple .simple-text { font: 400 10px/1.35 var(--fi); color: var(--sec); }
.pi-tip--simple .simple-text strong { font-weight: 600; color: var(--dark); }


/* ══════════════════════════════════════════════════════════
   EMPTY + LOADING STATES
══════════════════════════════════════════════════════════ */
.chart-loading {
  height: 2px; background:var(--rule);
  overflow: hidden; position:relative;
  margin-bottom: 16px;
}
.chart-loading::after {
  content: ''; position:absolute; top:0; left:-40%; width:40%; height:100%;
  background: var(--red);
  animation: scan 1.4s linear infinite;
}
@keyframes scan { 0%{left:-40%} 100%{left:100%} }

.empty-state {
  display: flex; flex-direction:column; align-items:flex-start; justify-content:center;
  min-height: 120px; gap:8px;
  border-top: 1px solid var(--rule); padding:24px 0;
}
.empty-lbl  { font:500 10px/1 var(--fi); letter-spacing:.10em; text-transform:uppercase; color:var(--muted); }
.empty-desc { font:300 13px/1.5 var(--fi); color:var(--muted); letter-spacing:-.01em; }


/* ══════════════════════════════════════════════════════════
   VIDEO PLAYER
══════════════════════════════════════════════════════════ */
.vp { background:var(--dark); user-select:none; font-family:var(--fi); }

.vp-screen {
  width:100%; aspect-ratio:16/9;
  background: #000;
  position:relative; cursor:pointer; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.vp-frame {
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  background: #080808;
}
.vp-overlay { position:absolute; top:12px; right:12px; display:flex; flex-direction:column; gap:4px; z-index:3; }
.vp-chip {
  font: 500 9px/1 var(--fi);
  letter-spacing: .10em; text-transform: uppercase;
  background: rgba(20,20,20,.9); color:rgba(255,255,255,.88);
  padding: 4px 8px; text-align:right;
}
.vp-chip.r { background:rgba(252,61,33,.88); color:#fff; }
.vp-badge {
  position:absolute; top:12px; left:12px;
  font: 700 11px/1 var(--fi); letter-spacing:.04em;
  background: var(--dark); color:#fff; padding:5px 10px; z-index:3;
}
.vp-play-btn {
  width:54px; height:54px; background:rgba(252,61,33,.9);
  display:flex; align-items:center; justify-content:center;
  position:relative; z-index:2; cursor:pointer;
  transition: background var(--tf), transform var(--tf);
}
.vp-play-btn:hover { background:var(--red); transform:scale(1.06); }
.vp-play-icon {
  width:0; height:0; border-style:solid;
  border-width: 10px 0 10px 18px;
  border-color: transparent transparent transparent #fff;
  margin-left: 3px;
}
.vp-ctrl { background:#111; padding:0 16px 10px; }
.vp-prog {
  height:3px; background:rgba(255,255,255,.12);
  position:relative; cursor:pointer; margin-bottom:10px;
}
.vp-prog-fill { height:100%; background:var(--red); position:relative; transition:width .04s linear; }
.vp-prog-thumb {
  width:10px; height:10px; background:var(--red); border:2px solid #fff;
  position:absolute; right:-5px; top:50%; transform:translateY(-50%); cursor:grab;
}
.vp-prog:hover .vp-prog-fill,
.vp-prog:hover .vp-prog-thumb { background:#fff; }
.vp-ctrl-row { display:flex; align-items:center; gap:14px; }
.vp-btn {
  background:none; border:none; cursor:pointer;
  color:rgba(255,255,255,.6); padding:4px;
  display:flex; align-items:center; justify-content:center;
  transition:color var(--tf);
}
.vp-btn:hover { color:#fff; }
.vp-btn svg { width:16px; height:16px; fill:currentColor; }
.vp-time { font:400 11px/1 var(--fi); color:rgba(255,255,255,.5); font-variant-numeric:tabular-nums; }
.vp-time strong { color:rgba(255,255,255,.9); font-weight:500; }
.vp-speed {
  font:500 10px/1 var(--fi); letter-spacing:.04em;
  color:rgba(255,255,255,.5); cursor:pointer; padding:3px 6px;
  border:1px solid rgba(255,255,255,.14); background:none;
  transition: color var(--tf), border-color var(--tf);
}
.vp-speed:hover { color:#fff; border-color:rgba(255,255,255,.4); }
.vp-speed.active { color:var(--red); border-color:var(--red); }
.vp-vol { display:flex; align-items:center; gap:6px; margin-left:auto; }
.vp-vol-bar { width:48px; height:3px; background:rgba(255,255,255,.14); cursor:pointer; }
.vp-vol-fill { height:100%; background:rgba(255,255,255,.52); width:72%; }
.vp-chapters {
  display:flex; padding:10px 16px 0;
  border-top:1px solid rgba(255,255,255,.05);
  overflow-x:auto; gap:0;
}
.vp-ch {
  flex-shrink:0; font:400 10px/1 var(--fi); color:rgba(255,255,255,.38);
  padding:8px 12px 8px 0; cursor:pointer;
  display:flex; align-items:center; gap:6px;
  border-right:1px solid rgba(255,255,255,.06); margin-right:12px;
  transition:color var(--tf);
}
.vp-ch:last-child { border-right:none; }
.vp-ch:hover { color:rgba(255,255,255,.8); }
.vp-ch.active { color:#fff; }
.vp-ch-t { font:500 9px/1 var(--fi); letter-spacing:.08em; color:var(--red); font-variant-numeric:tabular-nums; }
.vp-meta { display:flex; align-items:center; gap:16px; padding:14px 16px 16px; border-top:1px solid rgba(255,255,255,.05); }
.vp-meta-title { font:600 13px/1.3 var(--fi); color:#fff; letter-spacing:-.01em; flex:1; }
.vp-meta-sub   { font:300 11px/1 var(--fi); color:rgba(255,255,255,.42); margin-top:4px; letter-spacing:-.01em; }
.vp-meta-chip  {
  font:500 9px/1 var(--fi); letter-spacing:.10em; text-transform:uppercase;
  padding:4px 8px; border:1px solid rgba(252,61,33,.4); color:rgba(252,61,33,.88); flex-shrink:0;
}


/* ══════════════════════════════════════════════════════════
   BULLET CHART (CSS only — no D3 needed)
══════════════════════════════════════════════════════════ */
.bullet-row {
  display: grid; grid-template-columns:130px 1fr 68px;
  align-items:center; gap:12px;
  padding:10px 0; border-bottom:1px solid var(--rule);
}
.bullet-row:last-child { border-bottom:none; }
.bullet-lbl   { font:400 12px/1 var(--fi); color:var(--text); letter-spacing:-.01em; }
.bullet-track { height:20px; background:var(--bgi); position:relative; cursor:pointer; }
.bullet-range { position:absolute; top:4px; bottom:4px; background:var(--bgw); }
.bullet-bar   { position:absolute; top:6px; bottom:6px; background:var(--text); }
.bullet-tgt   { position:absolute; top:2px; bottom:2px; width:2px; background:var(--red); }
.bullet-val   { font:500 12px/1 var(--fi); text-align:right; font-variant-numeric:tabular-nums; letter-spacing:-.01em; }


/* ══════════════════════════════════════════════════════════
   SMALL MULTIPLES GRID
══════════════════════════════════════════════════════════ */
.sm-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); }
.sm-cell { padding:12px; border-right:1px solid var(--rule); border-bottom:1px solid var(--rule); }
.sm-lbl  { font:600 10px/1 var(--fi); letter-spacing:.06em; text-transform:uppercase; margin-bottom:8px; }
.sm-stat { font:300 10px/1 var(--fi); color:var(--sec); margin-top:4px; letter-spacing:-.01em; }


/* ══════════════════════════════════════════════════════════
   REFERENCE / DOCS TABLE
══════════════════════════════════════════════════════════ */
.ref-tbl { width:100%; border-collapse:collapse; font-size:12px; }
.ref-tbl thead tr { background:var(--dark); }
.ref-tbl th { font:600 9px/1 var(--fi); letter-spacing:.10em; text-transform:uppercase; color:rgba(255,255,255,.48); padding:10px 14px; text-align:left; }
.ref-tbl tbody tr { border-bottom:1px solid var(--rule); }
.ref-tbl tbody tr:nth-child(even) { background:var(--bgw); }
.ref-tbl td { padding:10px 14px; font:400 12px/1.45 var(--fi); vertical-align:top; letter-spacing:-.01em; }
.ref-tbl td:first-child { font:500 12px/1 var(--fi); color:var(--red); white-space:nowrap; }
.ref-tbl .do   { color:var(--good); }
.ref-tbl .dont { color:var(--red); }


/* ══════════════════════════════════════════════════════════
   FOOTER
══════════════════════════════════════════════════════════ */
.site-footer {
  background: var(--bgw);
  border-top: 1px solid var(--rules);
  padding: 14px var(--pg-m);
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.foot-logo-r { font:700 12px/1 var(--fi); color:var(--red); letter-spacing:-.02em; }
.foot-logo-l { font:300 12px/1 var(--fi); color:var(--muted); letter-spacing:-.01em; }
.foot-sep { color: var(--rule); }
.foot-copy { font:300 10px/1 var(--fi); color:var(--muted); letter-spacing:-.01em; }

/* ══════════════════════════════════════════════════════════
   PI TAKE COMPONENT
══════════════════════════════════════════════════════════ */
.pi-take {
  display: none;   /* hidden by default — toggle adds body.takes-on */
  padding: 8px 0 4px 14px;
  border-left: 2px solid var(--bgi);
  margin-top: 6px;
  overflow: hidden;
  max-width: 100%;
  box-sizing: border-box;
}
body.takes-on .pi-take { display: block; }
.pi-take-label {
  font: 500 7px/1 var(--fi);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 5px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.pi-take-dot {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--bgi);
  flex-shrink: 0;
}
.pi-take-text {
  font: 300 11px/1.55 var(--fi);
  color: var(--sec);
  letter-spacing: -.01em;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.pi-take-text.expanded { -webkit-line-clamp: unset; }
.pi-take-text strong { font-weight: 500; color: var(--text); }
.pi-take-more {
  font: 500 8px/1 var(--fi);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  cursor: pointer;
  margin-top: 4px;
  display: inline-block;
}
.pi-take-more:hover { color: var(--red); }

/* Triptych: takes always expanded, no "more" button */
body.layout-triptych .lf-replay-col .pi-take-text { -webkit-line-clamp: unset; }
body.layout-triptych .lf-replay-col .pi-take-more { display: none; }

/* ── Challenge variant ─────────────────────────────────────
   When the pitch is a challenge or missed call, the take
   carries the editorial weight for col2's empty space:
   larger body copy, red rule, red label. Flat — no card. */
.pi-take--challenge {
  padding: 14px 4px 12px 16px;
  border-left: 3px solid var(--red);
  margin-top: 12px;
}
.pi-take--challenge .pi-take-label {
  font: 600 9px/1 var(--fi);
  letter-spacing: .14em;
  color: var(--red);
  margin-bottom: 8px;
  gap: 6px;
}
.pi-take--challenge .pi-take-dot {
  width: 5px;
  height: 5px;
  background: var(--red);
}
.pi-take--challenge .pi-take-text {
  font: 400 13px/1.6 var(--fi);
  color: var(--text);
  letter-spacing: -.005em;
  -webkit-line-clamp: unset;
  display: block;
}
.pi-take--challenge .pi-take-text strong {
  font-weight: 600;
  color: var(--text);
}
.pi-take--challenge .pi-take-more { display: none; }


/* Screenshot watermark */
.pi-watermark {
  position:absolute; bottom:12px; right:12px;
  display:flex; align-items:center; gap:6px;
  background:rgba(26,26,26,.88);
  padding:5px 8px;
  border-radius:0;
}
.pi-watermark-text {
  font:600 9px/1 var(--fi);
  letter-spacing:.10em;
  text-transform:uppercase;
  color:rgba(255,255,255,.65);
}

/* Toggle (footer dark-mode toggle pattern) */
.toggle-wrap  { display:flex; align-items:center; gap:8px; cursor:pointer; }
.toggle-input { display:none; }
.toggle-track {
  width:30px; height:17px; background:rgba(255,255,255,.15); border-radius:9px;
  position:relative; transition:background var(--tb);
}
.toggle-track::after {
  content:''; position:absolute; width:11px; height:11px; background:#fff; border-radius:50%;
  top:3px; left:3px; transition:transform var(--tb);
}
.toggle-input:checked + .toggle-track { background:var(--red); }
.toggle-input:checked + .toggle-track::after { transform:translateX(13px); }
.toggle-lbl { font:300 11px/1 var(--fi); color:rgba(255,255,255,.45); letter-spacing:-.01em; }


/* ══════════════════════════════════════════════════════════
   MOBILE OVERRIDES — must come after all component styles
══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .site-nav { display: none; }
  .mobile-nav-toggle { display: flex; }
  .pi-tagline { display: none; }
  .hdr-logo-tag { display: none; }
  .hdr-logo-div { display: none; }
  .hdr-inner { padding: 0 var(--pg-m-mob); gap: 16px; }
  .search-wrap { display: none; }
  .search-wrap.search-fullscreen { display: flex !important; }
  .mobile-search-btn { display: flex; }
  .tbl { min-width: 680px; }
  .game-row { flex-wrap: wrap; gap: 8px 16px; }
  .game-right { margin-left: 0; width: 100%; }
  .tab-nav { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

@media (max-width: 480px) {
  .profile-stat-strip { grid-template-columns: 1fr; }
  .ump-stat-strip { grid-template-columns: repeat(2, 1fr); }
  .stat-strip-5, .stat-strip-4 { grid-template-columns: repeat(2, 1fr); }
  .three-col { grid-template-columns: 1fr; }
  .profile-stats-grid { grid-template-columns: 1fr; }
  .ump-numbers { flex-wrap: wrap; gap: 20px; }
  .profile-info h1 { font-size: 1.75rem; }
}


/* ==========================================================================
   SubwayLine component
   ========================================================================== */

.sub-shell { border: 1px solid rgba(0,0,0,.09); }

.sub-ctrl-rows {
  border-bottom: 1px solid rgba(0,0,0,.09);
}

.sub-ctrl-row {
  display: flex; align-items: center; gap: 7px;
  padding: 8px 12px;
}
.sub-ctrl-row + .sub-ctrl-row {
  border-top: 1px solid rgba(0,0,0,.05);
  padding-top: 8px;
}

.sub-ctrl-label {
  font: 500 9px/1 'Inter', sans-serif; letter-spacing: .12em;
  text-transform: uppercase; color: #999; white-space: nowrap;
  margin-right: 2px;
}

/* Filter chips */
.sub-filter-chip {
  font: 500 9px/1 'Inter', sans-serif; letter-spacing: .08em;
  text-transform: uppercase; padding: 5px 10px;
  border: 1px solid rgba(0,0,0,.18); cursor: pointer;
  background: none; color: #999; transition: all 80ms;
}
.sub-filter-chip:hover { color: #1A1A1A; border-color: #1A1A1A; }
.sub-filter-chip.sub-filter-on { color: #1A1A1A; border-color: #1A1A1A; background: #EDE9E1; }
.sub-filter-chip.sub-filter-on.sub-chip-g { color: #2E7D32; border-color: #2E7D32; background: rgba(46,125,50,.06); }
.sub-filter-chip.sub-filter-on.sub-chip-r { color: #FC3D21; border-color: #FC3D21; background: rgba(252,61,33,.06); }
.sub-filter-chip.sub-filter-on.sub-chip-a { color: #B45309; border-color: #B45309; background: rgba(180,83,9,.06); }

.sub-li-slider {
  -webkit-appearance: none; width: 80px; height: 3px;
  background: #E4E0D7; outline: none; cursor: pointer;
}
.sub-li-slider::-webkit-slider-thumb {
  -webkit-appearance: none; width: 11px; height: 11px;
  background: #1A1A1A; border-radius: 0; cursor: pointer;
}
.sub-li-val {
  font: 600 11px/1 'Inter', sans-serif; color: #1A1A1A;
  min-width: 24px; font-variant-numeric: tabular-nums;
}

.sub-period-btn {
  font: 600 10px/1 'Inter', sans-serif; letter-spacing: .06em;
  padding: 5px 10px; border: 1px solid rgba(0,0,0,.18);
  background: none; color: #999; cursor: pointer; transition: all 80ms;
}
.sub-period-btn:hover { color: #1A1A1A; border-color: #1A1A1A; }
.sub-period-btn.sub-period-active {
  color: #1A1A1A; border-color: #1A1A1A; background: #EDE9E1;
}
.sub-period-inf { letter-spacing: 0; font-size: 14px; line-height: 1; padding: 3px 10px; }

.sub-ctrl-sep {
  width: 1px; height: 18px; background: rgba(0,0,0,.09); flex-shrink: 0;
  margin-left: auto;
}

.sub-zoom-group {
  display: flex; align-items: center; gap: 5px; margin-left: auto;
}

.sub-zoom-btn {
  font: 600 14px/1 'Inter', sans-serif; width: 24px; height: 24px;
  border: 1px solid rgba(0,0,0,.18); background: none; color: #999;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.sub-zoom-btn:hover { color: #1A1A1A; border-color: #1A1A1A; }

.sub-zoom-info {
  font: 300 10px/1 'Inter', sans-serif; color: #999;
  min-width: 36px; text-align: center; font-variant-numeric: tabular-nums;
}

.sub-body { display: flex; }

.sub-lcol {
  flex: 0 0 148px; border-right: 1px solid rgba(0,0,0,.18);
  background: #F5F2EC; flex-shrink: 0;
}
.sub-lcol-html {
  flex: 0 0 168px; border-right: 1px solid rgba(0,0,0,.18);
  background: #F5F2EC; flex-shrink: 0; overflow: hidden;
}

.sub-scol {
  flex: 1; min-width: 0; overflow-x: scroll; overflow-y: hidden;
}
.sub-scol::-webkit-scrollbar { height: 4px; }
.sub-scol::-webkit-scrollbar-track { background: #E4E0D7; }
.sub-scol::-webkit-scrollbar-thumb { background: rgba(0,0,0,.22); }

.sub-scrub-row {
  display: flex; align-items: center; gap: 10px;
  background: #EDE9E1; border-bottom: none;
  padding: 8px 12px 6px;
}

.sub-scrub-label {
  font: 500 8px/1 'Inter', sans-serif; letter-spacing: .12em;
  text-transform: uppercase; color: #999; white-space: nowrap;
}

.sub-mm-container { flex: 1; min-width: 0; overflow: hidden; }



/* ==========================================================================
   ZoneScatter component
   ========================================================================== */

.zone-scatter-wrap {
  width: 100%; max-width: 360px; background: #F5F2EC;
}
.zone-scatter-svg { width: 100%; height: auto; display: block; }



/* ==========================================================================
   SubwayZonePair layout
   ========================================================================== */

.szp-wrap {
  display: grid; grid-template-columns: 1fr 360px; gap: 24px;
  align-items: start;
}

.szp-subway-col { min-width: 0; }
.szp-subway { min-width: 0; }

.szp-legend {
  display: flex; gap: 18px; flex-wrap: wrap;
  margin-top: 14px; padding-top: 12px;
  border-top: 1px solid rgba(0,0,0,.09);
}

.szp-leg-item {
  display: flex; align-items: center; gap: 6px;
  font: 500 9px/1 'Inter', sans-serif; letter-spacing: .10em;
  text-transform: uppercase; color: #888;
}

/* ==========================================================================
   Inning Detail Timeline (shown when game selected on subway)
   ========================================================================== */

.inning-timeline {
  border: 1px solid rgba(0,0,0,.09); border-top: none;
  background: #F5F2EC; display: none;
  margin-top: -1px; /* seamless with subway shell border */
}
.inning-timeline.visible { display: block; }

.inning-timeline-hdr {
  padding: 10px 16px; border-bottom: 1px solid rgba(0,0,0,.09);
  display: flex; align-items: center; justify-content: space-between;
}
.inning-timeline-title {
  font: 600 11px/1 'Inter', sans-serif; letter-spacing: .08em;
  text-transform: uppercase; color: #1A1A1A;
}
.inning-timeline-meta {
  font: 300 11px/1 'Inter', sans-serif; color: #999;
}
.inning-timeline-close {
  font: 400 16px/1 'Inter', sans-serif; color: #999; cursor: pointer;
  border: none; background: none; padding: 4px 8px;
}
.inning-timeline-close:hover { color: #1A1A1A; }

.inning-grid {
  display: grid; border-bottom: 1px solid rgba(0,0,0,.09);
  overflow-x: auto;
}
.inning-grid-col {
  border-right: 1px solid rgba(0,0,0,.09);
  display: flex; flex-direction: column;
}
.inning-grid-col:last-child { border-right: none; }
.ig-hdr {
  font: 500 9px/1 'Inter', sans-serif; letter-spacing: .10em;
  text-transform: uppercase; color: rgba(0,0,0,.3); text-align: center;
  padding: 7px 0 6px; border-bottom: 1px solid rgba(0,0,0,.09);
  background: #EDE9E1;
}
.ig-hdr.extra { color: rgba(252,61,33,.7); }
.ig-half {
  flex: 1; min-height: 52px;
  border-bottom: 1px solid rgba(0,0,0,.09); position: relative;
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 4px; padding: 6px 4px;
}
.ig-half:last-child { border-bottom: none; }
.ig-half-label {
  position: absolute; top: 4px; left: 5px;
  font: 500 7px/1 'Inter', sans-serif; letter-spacing: .08em;
  text-transform: uppercase; color: rgba(0,0,0,.2);
}
.ig-dot {
  border-radius: 50%; flex-shrink: 0; cursor: pointer;
  transition: opacity 80ms; position: relative;
}
.ig-dot:hover { opacity: .75; }
.ig-dot.ov { background: #2E7D32; }
.ig-dot.up { background: #FC3D21; }
.ig-dot.mi { background: #B45309; }
.ig-dot.normal { background: rgba(0,0,0,.15); }
.ig-dot.ov::after, .ig-dot.up::after {
  content: ''; position: absolute; border-radius: 50%; background: #F5F2EC;
  width: var(--inner, 4px); height: var(--inner, 4px);
  top: 50%; left: 50%; transform: translate(-50%, -50%);
}

/* ==========================================================================
   Game Page — Dark Header + Linescore + Accuracy Band
   ========================================================================== */

.game-hdr {
  background: #1A1A1A; padding: 32px 48px 28px;
  margin: 0 -48px; border-bottom: 3px solid #FC3D21;
  position: relative; overflow: hidden;
}
.game-hdr::before {
  content: 'FINAL'; position: absolute; right: -20px; top: -20px;
  font: 900 180px/1 'Inter', sans-serif; letter-spacing: -.04em;
  color: rgba(255,255,255,.025); pointer-events: none;
}
.game-hdr.live::before { content: 'LIVE'; color: rgba(252,61,33,.06); }
.game-hdr-inner { max-width: 1280px; margin: 0 auto; }
.game-meta-top {
  font: 500 9px/1 'Inter', sans-serif; letter-spacing: .18em;
  text-transform: uppercase; color: rgba(255,255,255,.3); margin-bottom: 20px;
}

/* Score row */
.game-score-row { display: flex; align-items: center; gap: 0; }
.game-team-block { display: flex; align-items: center; gap: 14px; }
.game-team-logo {
  width: 40px; height: 40px; object-fit: contain; opacity: .9;
}
.game-team-info { display: flex; flex-direction: column; gap: 3px; }
.game-team-abbr {
  font: 800 34px/1 'Inter', sans-serif; letter-spacing: -.01em; color: #fff;
}
.game-team-name {
  font: 300 11px/1 'Inter', sans-serif; color: rgba(255,255,255,.4);
}
.game-score-center {
  display: flex; flex-direction: column; align-items: center;
  padding: 0 28px; gap: 4px;
}
.game-score-nums { display: flex; align-items: baseline; gap: 14px; }
.game-score-num {
  font: 300 60px/1 'Inter', sans-serif; letter-spacing: -.04em;
  color: #fff; font-variant-numeric: tabular-nums;
}
.game-score-num.lose { color: rgba(255,255,255,.38); }
.game-score-dash {
  font: 300 44px/1 'Inter', sans-serif; color: rgba(255,255,255,.2);
}
.game-final-badge {
  font: 600 9px/1 'Inter', sans-serif; letter-spacing: .14em;
  text-transform: uppercase; color: rgba(255,255,255,.35);
}
.game-details-row {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 14px;
}
.game-detail {
  font: 300 11px/1 'Inter', sans-serif; color: rgba(255,255,255,.42);
}
.game-detail-sep {
  width: 3px; height: 3px; border-radius: 50%; background: rgba(255,255,255,.2);
}
.game-ump-link {
  font: 500 11px/1 'Inter', sans-serif; color: rgba(255,255,255,.65);
  text-decoration: none; cursor: pointer;
}
.game-ump-link:hover { color: rgba(255,255,255,.9); }

/* Linescore table (inside dark header) */
.linescore-wrap {
  margin-top: 24px; border-top: 1px solid rgba(255,255,255,.06); padding-top: 20px;
}
.linescore-scroll { overflow-x: auto; }
.linescore-scroll::-webkit-scrollbar { height: 2px; }
.linescore-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); }
.linescore-table { width: 100%; border-collapse: collapse; }
.linescore-table td, .linescore-table th {
  font-variant-numeric: tabular-nums; text-align: center; padding: 0; border: none;
}
.ls-team {
  font: 600 11px/1 'Inter', sans-serif; letter-spacing: .06em;
  text-transform: uppercase; color: rgba(255,255,255,.55);
  text-align: left; padding-right: 20px; white-space: nowrap; width: 1%;
}
.ls-team.away { color: rgba(255,255,255,.4); }
.ls-team.home { color: rgba(255,255,255,.7); }
.ls-inning-hdr {
  font: 500 9px/1 'Inter', sans-serif; letter-spacing: .10em;
  color: rgba(255,255,255,.25); width: 36px; min-width: 36px; padding-bottom: 8px;
}
.ls-inning-hdr.extra { color: rgba(252,61,33,.5); }
.ls-cell {
  font: 300 20px/1 'Inter', sans-serif; letter-spacing: -.01em;
  color: rgba(255,255,255,.55); width: 36px; min-width: 36px; height: 38px;
  vertical-align: middle; position: relative;
}
.ls-cell.scored { color: #fff; font-weight: 400; }
.ls-cell.current { background: rgba(252,61,33,.08); }
.ls-cell.pending { color: rgba(255,255,255,.18); }
.ls-sep-col { width: 16px; min-width: 16px; }
.ls-rhe-hdr {
  font: 500 9px/1 'Inter', sans-serif; letter-spacing: .10em;
  color: rgba(255,255,255,.25); width: 36px; min-width: 36px; padding-bottom: 8px;
}
.ls-r-cell {
  font: 600 22px/1 'Inter', sans-serif; letter-spacing: -.01em;
  color: #fff; width: 36px; min-width: 36px; height: 38px; vertical-align: middle;
}
.ls-r-cell.lose-team { color: rgba(255,255,255,.38); }
.ls-he-cell {
  font: 300 18px/1 'Inter', sans-serif; letter-spacing: -.01em;
  color: rgba(255,255,255,.55); width: 36px; min-width: 36px; height: 38px;
  vertical-align: middle;
}
.ls-row-sep td { height: 1px; background: rgba(255,255,255,.06); padding: 0; }
.ls-chal-row td { height: 12px; vertical-align: top; padding-top: 2px; }
.ls-chal-dot {
  width: 5px; height: 5px; border-radius: 50%; margin: 0 auto;
}
.ls-chal-dot.ov { background: #2E7D32; }
.ls-chal-dot.up { background: #FC3D21; }
.ls-chal-dot.mi { background: #B45309; }

/* Challenge ledger (below dark header, inside it) */
.game-chal-ledger {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  margin-top: 20px; border-top: 1px solid rgba(255,255,255,.06); padding-top: 16px;
}
.game-chal-side { padding: 0 20px; }
.game-chal-side + .game-chal-side { border-left: 1px solid rgba(255,255,255,.06); }
.game-chal-team-label {
  font: 500 9px/1 'Inter', sans-serif; letter-spacing: .12em;
  text-transform: uppercase; color: rgba(255,255,255,.35); margin-bottom: 10px;
}
.game-chal-nums { display: flex; align-items: center; gap: 20px; }
.game-chal-num {
  font: 300 22px/1 'Inter', sans-serif; color: #1A1A1A; font-variant-numeric: tabular-nums;
}
.game-chal-num.good { color: #2E7D32; }
.game-chal-num.bad { color: #FC3D21; }
.game-chal-sub {
  font: 500 9px/1 'Inter', sans-serif; letter-spacing: .08em;
  text-transform: uppercase; color: rgba(255,255,255,.35); margin-top: 4px;
}

/* Accuracy band (below dark header) */
.game-acc-band {
  display: flex; align-items: stretch; gap: 0;
  border-bottom: 1px solid rgba(0,0,0,.09);
}
.game-acc-block {
  flex: 1; padding: 14px 20px; display: flex; flex-direction: column;
  gap: 3px; border-right: 1px solid rgba(0,0,0,.09);
}
.game-acc-block:last-child { border-right: none; flex: 2; }
.game-acc-block.accent { background: rgba(252,61,33,.04); }
.game-acc-val {
  font: 300 26px/1 'Inter', sans-serif; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.game-acc-val.bad { color: #FC3D21; }
.game-acc-val.good { color: #2E7D32; }
.game-acc-label {
  font: 500 8px/1 'Inter', sans-serif; letter-spacing: .10em;
  text-transform: uppercase; color: #999;
}
.game-acc-sub { font: 300 9px/1 'Inter', sans-serif; color: #999; }
.game-acc-narrative {
  font: 300 12px/1.6 'Inter', sans-serif; color: #555; padding: 14px 20px;
  display: flex; align-items: center;
}

/* Light game header (ivory bg, same layout as dark but inverted) */
.game-hdr-light {
  background: #EDE9E1; padding: 20px 0 16px;
  border-bottom: 1px solid rgba(0,0,0,.09);
}
.game-meta-top-light {
  font: 500 9px/1 'Inter', sans-serif; letter-spacing: .18em;
  text-transform: uppercase; color: #999; margin-bottom: 12px;
}
.game-team-info-light { display: flex; flex-direction: column; gap: 3px; }
.game-team-abbr-light {
  font: 800 28px/1 'Inter', sans-serif; letter-spacing: -.01em; color: #1A1A1A;
}
.game-team-name-light { font: 300 11px/1 'Inter', sans-serif; color: #999; }
.game-score-num-light {
  font: 300 44px/1 'Inter', sans-serif; letter-spacing: -.04em;
  color: #1A1A1A; font-variant-numeric: tabular-nums;
}
.game-score-num-light.lose { color: rgba(0,0,0,.25); }
.game-score-dash-light { font: 300 32px/1 'Inter', sans-serif; color: rgba(0,0,0,.15); }
.game-score-center { padding: 0 20px; }
.game-final-badge-light {
  font: 600 9px/1 'Inter', sans-serif; letter-spacing: .14em;
  text-transform: uppercase; color: #999;
}

/* Linescore light */
.linescore-wrap-light {
  margin-top: 14px; border-top: 1px solid rgba(0,0,0,.09); padding-top: 10px;
}
.linescore-scroll-light { overflow-x: auto; }
.linescore-scroll-light::-webkit-scrollbar { height: 2px; }
.linescore-scroll-light::-webkit-scrollbar-thumb { background: rgba(0,0,0,.15); }
.linescore-table-light { width: 100%; border-collapse: collapse; }
.linescore-table-light td, .linescore-table-light th {
  font-variant-numeric: tabular-nums; text-align: center; padding: 0; border: none;
}
.ls-team-light {
  font: 600 11px/1 'Inter', sans-serif; letter-spacing: .06em;
  text-transform: uppercase; text-align: left; padding-right: 20px;
  white-space: nowrap; width: 1%;
}
.ls-team-light.away { color: #999; }
.ls-team-light.home { color: #1A1A1A; }
.ls-inning-hdr-light {
  font: 500 9px/1 'Inter', sans-serif; letter-spacing: .10em;
  color: #999; width: 36px; min-width: 36px; padding-bottom: 8px;
}
.ls-inning-hdr-light.extra { color: rgba(252,61,33,.7); }
.ls-cell-light {
  font: 300 16px/1 'Inter', sans-serif; letter-spacing: -.01em;
  color: #555; width: 30px; min-width: 30px; height: 30px; vertical-align: middle;
}
.ls-cell-light.scored { color: #1A1A1A; font-weight: 400; }
.ls-cell-light.pending { color: rgba(0,0,0,.15); }
.ls-rhe-hdr-light {
  font: 500 9px/1 'Inter', sans-serif; letter-spacing: .10em;
  color: #999; width: 36px; min-width: 36px; padding-bottom: 8px;
}
.ls-r-cell-light {
  font: 600 22px/1 'Inter', sans-serif; letter-spacing: -.01em;
  color: #1A1A1A; width: 36px; min-width: 36px; height: 38px; vertical-align: middle;
}
.ls-r-cell-light.lose { color: rgba(0,0,0,.25); }
.ls-row-sep-light td { height: 1px; background: rgba(0,0,0,.06); padding: 0; }
.ls-chal-row-light td { height: 12px; vertical-align: top; padding-top: 2px; }
.ls-chal-dot-light { width: 5px; height: 5px; border-radius: 50%; margin: 0 auto; }
.ls-chal-dot-light.ov { background: #2E7D32; }
.ls-chal-dot-light.up { background: #FC3D21; }
.ls-chal-dot-light.mi { background: #B45309; }

/* CP/Runs toggle — inline, minimal */
.ls-toggle-wrap {
  display: inline-flex; gap: 0; border: 1px solid rgba(0,0,0,.15);
}
.ls-toggle-btn {
  font: 600 8px/1 'Inter', sans-serif; letter-spacing: .06em;
  padding: 2px 5px; border: none;
  background: none; color: #999; cursor: pointer; transition: all 80ms;
}
.ls-toggle-btn:hover { color: #1A1A1A; }
.ls-toggle-btn.ls-toggle-active { color: #1A1A1A; background: rgba(0,0,0,.08); }
.ls-toggle-btn + .ls-toggle-btn { border-left: 1px solid rgba(0,0,0,.15); }

/* Challenge ledger light */
.game-chal-ledger-light {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  margin-top: 10px; border-top: 1px solid rgba(0,0,0,.09); padding-top: 10px;
}
.game-chal-side-light { padding: 0 20px; }
.game-chal-side-light + .game-chal-side-light { border-left: 1px solid rgba(0,0,0,.09); }
.game-chal-team-label-light {
  font: 500 9px/1 'Inter', sans-serif; letter-spacing: .12em;
  text-transform: uppercase; color: #999; margin-bottom: 10px;
}
.game-chal-sub-light {
  font: 500 9px/1 'Inter', sans-serif; letter-spacing: .08em;
  text-transform: uppercase; color: #999; margin-top: 4px;
}
.game-details-row-light {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(0,0,0,.09);
}
.game-detail-light { font: 300 11px/1 'Inter', sans-serif; color: #999; }
.game-detail-sep-light {
  width: 3px; height: 3px; border-radius: 50%; background: rgba(0,0,0,.15);
}
.game-ump-link-light {
  font: 500 11px/1 'Inter', sans-serif; color: #1A1A1A;
  text-decoration: none; cursor: pointer;
}
.game-ump-link-light:hover { color: #FC3D21; }

/* Game inning grid (always visible on game page) */
.game-inning-grid-wrap {
  border: 1px solid rgba(0,0,0,.09); margin-top: 24px;
}
.game-inning-hdr {
  padding: 10px 16px; border-bottom: 1px solid rgba(0,0,0,.09);
  display: flex; align-items: center; justify-content: space-between;
}
.game-inning-title {
  font: 600 11px/1 'Inter', sans-serif; letter-spacing: .08em;
  text-transform: uppercase; color: #1A1A1A;
}
.game-inning-meta { font: 300 11px/1 'Inter', sans-serif; color: #999; }

/* Subway demo page */
.subway-demo-page { padding: 24px 0; }
.subway-demo-page .ey {
  font: 500 9px/1 'Inter', sans-serif; letter-spacing: .18em;
  text-transform: uppercase; color: #999; margin-bottom: 4px;
}
.subway-demo-page .ti {
  font: 800 24px/1 'Inter', sans-serif; letter-spacing: -.02em; margin-bottom: 3px;
}
.subway-demo-page .su {
  font: 300 13px/1.5 'Inter', sans-serif; color: #555; margin-bottom: 20px;
}
.subway-demo-section {
  margin-bottom: 40px; padding-bottom: 24px;
  border-bottom: 1px solid rgba(0,0,0,.09);
}
.subway-demo-section h3 {
  font: 600 14px/1 'Inter', sans-serif; letter-spacing: -.01em;
  margin-bottom: 12px;
}

@media (max-width: 900px) {
  .szp-wrap { grid-template-columns: 1fr; }
  .szp-subway-col { min-width: 0; }
  .zone-scatter-wrap { max-width: 100%; }
}

/* --- WebSocket Status Indicator --- */
.ws-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
  transition: background-color 0.3s;
}
.ws-status-dot.ws-connected {
  background: #22c55e;
  box-shadow: 0 0 4px rgba(34,197,94,.5);
}
.ws-status-dot.ws-disconnected {
  background: #94a3b8;
}
.ws-status-dot.ws-reconnecting {
  background: #f59e0b;
  animation: ws-pulse 1.5s ease-in-out infinite;
}
@keyframes ws-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

/* ==========================================================================
   LIVE FEED PAGE — Game Ribbon, Tally, 3-Column Grid, Edge Zoom, Feeds, Umps
   ========================================================================== */

/* ── GAME RIBBON ── */
.ribbon-shell {
  border-bottom: 1px solid var(--rules);
  background: var(--bg);
  position: relative; z-index: 90;
}
.ribbon-row {
  display: flex; align-items: stretch;
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none;
}
.ribbon-row::-webkit-scrollbar { display: none; }

.ribbon-date-nav {
  flex-shrink: 0; border-right: 1px solid var(--rules);
  background: var(--bg);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 0 6px; gap: 2px; min-width: 32px;
  cursor: pointer; transition: min-width 80ms;
}
.rib-arr {
  width: 20px; height: 18px; border: none; background: none;
  cursor: pointer; color: var(--muted); font-size: 13px;
  display: flex; align-items: center; justify-content: center;
  transition: color 80ms; line-height: 1;
}
.rib-arr:hover { color: var(--dark); }
.rib-date { font: 700 9px/1 var(--fi); letter-spacing: .04em; color: var(--dark); white-space: nowrap; }

.ribbon-games { display: flex; align-items: stretch; padding: 4px 10px; gap: 7px; }

/* ── Game Tile — "Stacked Split" ribbon tiles ── */
.game-tile{width:156px;height:90px;border:1px solid rgba(0,0,0,.14);position:relative;overflow:hidden;cursor:pointer;background:var(--bg);flex-shrink:0;transition:border-color 80ms;}
.game-tile:hover{border-color:rgba(0,0,0,.28);}
.game-tile.on{border-color:var(--dark);background:var(--bgw);}
.game-tile.live{border-top:2px solid var(--good);}
.game-tile.challenge{border-top:none;}
.wp-wash{position:absolute;inset:0;pointer-events:none;z-index:0;}
.tile-content{position:relative;z-index:1;width:100%;height:100%;}
.challenge-bar{position:absolute;top:0;left:0;right:0;height:14px;background:var(--red);z-index:20;display:flex;align-items:center;padding:0 7px;gap:4px;}
.challenge-pulse{width:4px;height:4px;border-radius:50%;background:#fff;flex-shrink:0;animation:chal-blink .65s ease-in-out infinite;}
@keyframes chal-blink{0%,100%{opacity:1;}50%{opacity:.2;}}
.challenge-label{font:700 7px/1 var(--fi);letter-spacing:.12em;text-transform:uppercase;color:#fff;flex:1;}
.challenge-inn{font:300 7px/1 var(--fi);color:rgba(255,255,255,.65);}
.tile-body{padding:7px 8px 0;display:flex;flex-direction:column;height:100%;}
.tile-head{display:flex;align-items:flex-start;flex:1;}
.team-rows{flex:1;display:flex;flex-direction:column;gap:3px;}
.team-row{display:flex;align-items:center;gap:5px;}
.team-logo-img{object-fit:contain;flex-shrink:0;}
.team-logo-fb{display:flex;align-items:center;justify-content:center;font:700 6px/1 var(--fi);color:rgba(255,255,255,.92);flex-shrink:0;}
.team-abbr{font:700 10px/1 var(--fi);letter-spacing:-.01em;flex:1;}
.team-abbr.dim{color:rgba(0,0,0,.28);}
.tile-score{font:300 19px/1 var(--fi);letter-spacing:-.03em;font-variant-numeric:tabular-nums;}
.tile-score.win{font-weight:700;}
.tile-score.lose{color:rgba(0,0,0,.24);}
.tile-score.blank{color:rgba(0,0,0,.15);font-size:14px;}
.tile-right{display:flex;flex-direction:column;align-items:flex-end;gap:3px;margin-left:6px;flex-shrink:0;}
.tile-status{font:500 7px/1 var(--fi);letter-spacing:.10em;text-transform:uppercase;white-space:nowrap;}
.tile-status.live{color:var(--good);}
.tile-status.final,.tile-status.scheduled{color:var(--muted);}
.tile-footer{display:flex;align-items:center;border-top:1px solid var(--rule);padding:4px 8px 5px;gap:5px;flex-shrink:0;margin-top:auto;}
.tile-inn{font:500 8px/1 var(--fi);color:var(--dark);flex-shrink:0;}
.tile-time{font:500 9px/1 var(--fi);color:var(--muted);flex-shrink:0;}
.tile-probs{font:300 7px/1 var(--fi);color:rgba(0,0,0,.38);letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:70px;}
.final-lbl{font-weight:300;color:var(--muted);}
.abs-grid{display:flex;flex-wrap:wrap;gap:2px;max-width:36px;}
.ab{width:5px;height:5px;border-radius:50%;flex-shrink:0;}
.ab.ov{background:var(--good);}
.ab.up{background:var(--red);}
.ab.mi{background:var(--warn);}
.cdo{display:flex;align-items:center;gap:1px;}
.cb,.cst,.co{width:4px;height:4px;border-radius:50%;background:rgba(0,0,0,.10);border:1px solid rgba(0,0,0,.18);}
.cb.on{background:var(--warn);border-color:var(--warn);}
.cst.on{background:var(--red);border-color:var(--red);}
.co.on{background:var(--dark);border-color:var(--dark);}
.csep{width:1px;height:6px;background:rgba(0,0,0,.10);margin:0 1px;}

/* ── TALLY STRIP ── */
.tally-strip {
  display: flex; align-items: center; gap: 0;
  padding: 0 32px; border-bottom: 1px solid var(--rule);
  background: var(--bgw);
}
.tally-item {
  display: flex; align-items: baseline; gap: 6px;
  padding: 10px 20px; border-right: 1px solid var(--rule);
}
.tally-item:last-of-type { border-right: none; }
.tally-num {
  font: 300 22px/1 var(--fi); letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.tally-num.g { color: var(--good); }
.tally-num.r { color: var(--red); }
.tally-num.w { color: var(--warn); }
.tally-lbl { font: 500 8px/1 var(--fi); letter-spacing: .10em; text-transform: uppercase; color: var(--muted); }
.tally-context { margin-left: auto; font: 300 10px/1 var(--fi); color: var(--muted); }
.tally-label {
  padding: 10px 20px; border-right: 1px solid var(--rule);
  font: 500 9px/1 var(--fi); letter-spacing: .10em; text-transform: uppercase;
  color: var(--red);
}

/* ── MAIN 3-COLUMN GRID ── */
.lf-main-grid {
  display: grid;
  grid-template-columns: 1fr 300px 280px;
  border-bottom: 1px solid var(--rule);
  min-height: 700px;
}

/* ══════════════════════════════════════════════════════════════
   TRIPTYCH LAYOUT — Zone | Replay | Event + Feed Strips
   Activated via body.layout-triptych
   ══════════════════════════════════════════════════════════════ */
body.layout-triptych .lf-main-grid {
  grid-template-columns: 440px 1fr 320px;
  min-height: auto;
}
body.layout-triptych .lf-right-col { display: none; }
body.layout-triptych .lf-event-col { overflow: hidden; }

/* Replay well column */
.lf-replay-col {
  border-right: 1px solid var(--rule);
  display: flex; flex-direction: column;
}

/* ── Batter strip — thin horizontal ticker ── */
.lf-batter-strip {
  display: flex; align-items: center;
  border-bottom: 1px solid var(--rule);
  height: 36px; overflow: hidden;
}
.lf-strip-label {
  font: 600 8px/1 var(--fi); letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted);
  padding: 0 14px; border-right: 1px solid var(--rule);
  flex-shrink: 0; white-space: nowrap; height: 100%;
  display: flex; align-items: center; gap: 6px;
}
.lf-strip-count {
  font: 300 8px/1 var(--fi); color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.lf-batter-scroll {
  display: flex; gap: 0; overflow-x: auto; flex: 1; height: 100%;
  scrollbar-width: none; -ms-overflow-style: none;
}
.lf-batter-scroll::-webkit-scrollbar { display: none; }
.lf-bt {
  flex-shrink: 0; padding: 0 12px; height: 100%;
  border-right: 1px solid var(--rule);
  cursor: pointer; transition: background 80ms;
  display: flex; align-items: center; gap: 8px;
}
.lf-bt:hover { background: var(--bgw); }
.lf-bt.on { background: var(--bgw); border-bottom: 2px solid var(--red); }
.lf-bt-name { font: 500 10px/1 var(--fi); color: var(--dark); letter-spacing: -.01em; white-space: nowrap; }
.lf-bt-sub { font: 300 9px/1 var(--fi); color: var(--muted); white-space: nowrap; }
.lf-bt-count { font: 300 12px/1 var(--fi); color: var(--dark); font-variant-numeric: tabular-nums; }
.lf-bt-li { font: 600 7px/1 var(--fi); letter-spacing: .08em; text-transform: uppercase; padding: 2px 5px; }
.lf-bt-li.hi { color: var(--red); background: rgba(252,61,33,.06); }
.lf-bt-li.med { color: var(--warn); background: rgba(180,83,9,.06); }

/* ── Challenge/Missed feed strip — ribbon tile cards ── */
.lf-feed-strip {
  display: flex; align-items: stretch;
  border-bottom: 1px solid var(--rule);
}
.lf-fs-tabs {
  display: flex; flex-direction: column; flex-shrink: 0;
  border-right: 1px solid var(--rule);
}
.lf-fs-tab {
  font: 600 8px/1 var(--fi); letter-spacing: .10em;
  text-transform: uppercase; color: var(--muted);
  padding: 0 14px; cursor: pointer;
  border-left: 2px solid transparent; transition: all 80ms;
  white-space: nowrap; flex: 1;
  display: flex; align-items: center;
}
.lf-fs-tab:hover { color: var(--dark); }
.lf-fs-tab.on { color: var(--dark); border-left-color: var(--red); }
.lf-fs-scroll {
  display: flex; gap: 6px; overflow-x: auto; flex: 1;
  padding: 6px 8px;
  scrollbar-width: none;
}
.lf-fs-scroll::-webkit-scrollbar { display: none; }

/* ── Strip cards (v3) — banner / mini-zone / two-side body / outcome footer ── */
.lf-fs-card {
  flex-shrink: 0; width: 240px; height: 110px;
  background: var(--bgw);
  border: 1px solid var(--rule);
  display: flex; flex-direction: column;
  cursor: pointer; transition: border-color 80ms;
  overflow: hidden;
}
.lf-fs-card:hover { border-color: var(--rules); }
/* Selection — matches .lf-bt.on convention (tinted bg + red bottom stripe).
   inset shadow draws the stripe without shifting layout. */
.lf-fs-card.selected {
  background: rgba(252,61,33,.06);
  box-shadow: inset 0 -2px 0 var(--red);
}
.lf-fs-card.selected .lf-fs-foot,
.lf-fs-card.selected .lf-fs-zone { background: transparent; }

/* Banner — tinted strip across the top, colored text + edge metric.
   Subtle tint (10% color over ivory) keeps the result classification visible
   without dominating the page hierarchy. */
.lf-fs-banner {
  height: 18px; flex-shrink: 0;
  display: flex; align-items: center; gap: 6px;
  padding: 0 8px;
  font: 700 9px/1 var(--fi); letter-spacing: .08em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--rule);
}
.lf-fs-banner.ov { background: rgba(46,125,50,.10); color: var(--good); }
.lf-fs-banner.up { background: rgba(252,61,33,.10); color: var(--red); }
.lf-fs-banner.mi { background: rgba(180,83,9,.10); color: var(--warn); }
.lf-fs-banner .lf-fs-edge {
  margin-left: auto; font-weight: 500; opacity: .75;
  letter-spacing: .04em; font-variant-numeric: tabular-nums;
}

/* Body — mini-zone column + two-side player area */
.lf-fs-body { flex: 1; display: flex; min-height: 0; }
.lf-fs-zone {
  width: 60px; flex-shrink: 0;
  border-right: 1px solid var(--rule);
  display: flex; align-items: center; justify-content: center;
  background: var(--bg);
  padding: 4px;
}
.lf-fs-zone svg { display: block; width: 100%; height: 100%; }

.lf-fs-sides { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.lf-fs-side {
  flex: 1;
  display: flex; align-items: center; gap: 6px;
  padding: 0 8px;
  min-width: 0;
}
.lf-fs-side + .lf-fs-side { border-top: 1px solid var(--rule); }

.lf-fs-logo {
  width: 18px; height: 18px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  transition: opacity 80ms;
}
.lf-fs-logo img { width: 100%; height: 100%; object-fit: contain; }
/* Upheld-opposing side: dim team logo since the player wasn't actually impacted.
   Challenges-only — missed cards both stay full opacity. */
.lf-fs-card.up .lf-fs-side:nth-child(2) .lf-fs-logo { opacity: .45; }

.lf-fs-headshot {
  width: 24px; height: 24px;
  border-radius: 50%; overflow: hidden;
  background: #ccc; flex-shrink: 0;
  border: 2px solid transparent;
}
.lf-fs-headshot.win { border-color: var(--good); }
.lf-fs-headshot.lose { border-color: var(--red); opacity: .55; }
.lf-fs-headshot.neu { border-color: var(--rules); }
.lf-fs-headshot img { width: 100%; height: 100%; object-fit: cover; display: block; }

.lf-fs-pinfo {
  display: flex; flex-direction: column; gap: 1px;
  min-width: 0; flex: 1;
}
.lf-fs-role {
  font: 600 7px/1 var(--fi); letter-spacing: .10em;
  text-transform: uppercase; color: var(--muted);
}
.lf-fs-name {
  font: 600 11px/1.1 var(--fi); color: var(--dark);
  letter-spacing: -.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.lf-fs-verdict {
  font: 600 8px/1 var(--fi); letter-spacing: .04em;
  text-transform: uppercase; flex-shrink: 0;
}
.lf-fs-verdict.win { color: var(--good); }
.lf-fs-verdict.lose { color: var(--red); }
.lf-fs-verdict.neu { color: var(--muted); }

/* Footer — outcome narrative + time ago */
.lf-fs-foot {
  height: 20px; flex-shrink: 0;
  display: flex; align-items: center; gap: 4px;
  padding: 0 8px;
  border-top: 1px solid var(--rule);
  background: var(--bg);
  font: 400 10px/1 var(--fi); color: var(--dark);
}
.lf-fs-arr { color: var(--muted); }
.lf-fs-result { font-weight: 600; }
.lf-fs-result.win { color: var(--good); }
.lf-fs-result.lose { color: var(--red); }
.lf-fs-time { margin-left: auto; font: 300 9px/1 var(--fi); color: var(--muted); }

.lf-fs-empty { padding: 16px 12px; font: 300 11px/1 var(--fi); color: var(--muted); display: flex; align-items: center; }

/* ── COL 1: ZONE + EDGE ZOOM ── */
.lf-zone-col { border-right: 1px solid var(--rule); display: flex; flex-direction: column; }
.lf-zone-hdr {
  padding: 10px 16px; border-bottom: 1px solid var(--rule);
  display: flex; align-items: center; gap: 10px;
  background: var(--bg); flex-shrink: 0;
}
.lf-zone-hdr-title { font: 600 10px/1 var(--fi); letter-spacing: .10em; text-transform: uppercase; color: var(--dark); }
.zone-filter-chips { display: flex; gap: 5px; margin-left: auto; align-items: center; }
.zchip {
  font: 500 8px/1 var(--fi); letter-spacing: .08em; text-transform: uppercase;
  padding: 4px 8px; border: 1px solid var(--rules);
  background: transparent; color: var(--muted); cursor: pointer; transition: all 80ms;
  line-height: 1; vertical-align: middle;
}
.zchip:hover { color: var(--dark); border-color: var(--dark); }
.zchip.on { color: var(--dark); border-color: var(--dark); background: var(--bgw); }
.zchip.on.g { color: var(--good); border-color: var(--good); background: rgba(46,125,50,.06); }
.zchip.on.r { color: var(--red); border-color: var(--red); background: rgba(252,61,33,.06); }
.zchip.on.w { color: var(--warn); border-color: var(--warn); background: rgba(180,83,9,.06); }
.zchip.on.wh { color: #555; border-color: #555; background: rgba(0,0,0,.04); }
.zchip.on.ip { color: #1565C0; border-color: #1565C0; background: rgba(21,101,192,.06); }
.zchip.on.fl { color: var(--red); border-color: var(--red); background: rgba(252,61,33,.06); }

.zchip-sep { display: inline-block; width: 1px; height: 14px; background: var(--rules); margin: 0 4px; vertical-align: middle; }

.lf-zone-scatter-wrap {
  display: flex; align-items: center; justify-content: center;
  padding: 20px; background: var(--bg);
  border-bottom: 1px solid var(--rule);
}
#live-zone-svg { display: block; cursor: crosshair; }
.lf-zone-label {
  padding: 6px 16px 8px;
  font: 300 9px/1 var(--fi); color: var(--muted); letter-spacing: .04em;
  border-bottom: 1px solid var(--rule);
}

/* Edge zoom section */
.ez-section { flex: 1; display: flex; flex-direction: column; }
.ez-hdr {
  padding: 8px 16px; border-bottom: 1px solid var(--rule);
  display: flex; align-items: center; justify-content: space-between;
  background: var(--bgw);
}
.ez-hdr-title { font: 600 9px/1 var(--fi); letter-spacing: .10em; text-transform: uppercase; color: var(--dark); }
.ez-hdr-meta { font: 300 9px/1 var(--fi); color: var(--muted); }
.ez-render { flex: 1; min-height: 160px; background: var(--bg); overflow: hidden; }
.ez-ghost {
  display: flex; align-items: center; justify-content: center;
  gap: 10px; padding: 24px; opacity: .15;
  height: 100%;
}
.ez-stats { display: flex; align-items: center; gap: 0; border-top: 1px solid var(--rule); }
.ez-stat { flex: 1; padding: 8px 12px; border-right: 1px solid var(--rule); }
.ez-stat:last-child { border-right: none; }
.ez-val { font: 300 18px/1 var(--fi); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ez-val.ov { color: var(--good); }
.ez-val.up { color: var(--red); }
.ez-val.mi { color: var(--warn); }
.ez-lbl { font: 500 8px/1 var(--fi); letter-spacing: .10em; text-transform: uppercase; color: var(--muted); margin-top: 3px; }

/* ── COL 2: LAST EVENT + PLAY CONTEXT ── */
.lf-event-col { border-right: 1px solid var(--rule); display: flex; flex-direction: column; min-width: 0; overflow: hidden; }

.le-hdr {
  padding: 9px 14px; border-bottom: 1px solid var(--rule);
  background: var(--bgw); display: flex; align-items: center; justify-content: space-between;
}
.le-hdr-title { font: 600 10px/1 var(--fi); letter-spacing: .10em; text-transform: uppercase; color: var(--dark); }
.le-hdr-time { font: 300 9px/1 var(--fi); color: var(--muted); }
.le-empty {
  padding: 20px 14px;
  font: 500 9px/1 var(--fi); letter-spacing: .12em; text-transform: uppercase;
  color: rgba(0,0,0,.18); text-align: center;
}
.le-body { display: none; }
.le-body.show { display: block; }
.le-ruling-row { padding: 12px 14px 8px; border-bottom: 1px solid var(--rule); }
.le-ruling { font: 800 20px/1 var(--fi); letter-spacing: -.02em; }
.le-ruling.ov { color: var(--good); }
.le-ruling.up { color: var(--red); }
.le-ruling.mi { color: var(--warn); }
.le-who { font: 300 10px/1 var(--fi); color: var(--muted); margin-top: 3px; }
.le-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 5px 14px; border-bottom: 1px solid var(--rule);
}
.le-row:last-child { border-bottom: none; }
.le-rl { font: 500 8px/1 var(--fi); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.le-rv { font: 400 11px/1 var(--fi); color: var(--dark); font-variant-numeric: tabular-nums; text-align: right; }
.le-rv.hi { color: var(--red); font-weight: 600; }

/* Matchup header (triptych only) */
.le-matchup { padding: 10px 14px; border-bottom: 1px solid var(--rule); }
.le-mu-teams {
  display: flex; align-items: center; gap: 8px; justify-content: center;
  margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--rule);
}
.le-mu-team { display: flex; align-items: center; gap: 5px; }
.le-mu-logo { width: 20px; height: 20px; object-fit: contain; }
.le-mu-abbr { font: 700 12px/1 var(--fi); letter-spacing: -.01em; color: var(--dark); }
.le-mu-at { font: 300 10px/1 var(--fi); color: var(--muted); }
.le-mu-players { display: flex; gap: 0; }
.le-mu-player {
  flex: 1; display: flex; align-items: center; gap: 8px;
  padding: 4px 0;
}
.le-mu-player + .le-mu-player { border-left: 1px solid var(--rule); padding-left: 10px; }
.le-mu-headshot {
  width: 32px; height: 32px; object-fit: cover;
  border-radius: 50%; flex-shrink: 0;
  background: var(--bgi);
}
.le-mu-pinfo { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.le-mu-role { font: 500 7px/1 var(--fi); letter-spacing: .10em; text-transform: uppercase; color: var(--muted); }
.le-mu-name {
  font: 500 10px/1 var(--fi); color: var(--dark); letter-spacing: -.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Note: .pd-* v5 block removed in SPRINT-058 Phase 1 cleanup. Replaced by
   .col3__* block below. */

/* When col3 panel is active in triptych, hide the legacy situation bar
   (col3 has its own scorebug). Also hide the col-header — the banner
   serves as the header instead. */
body.layout-triptych .lf-event-col .lf-play-context { display: none; }
body.layout-triptych .lf-event-col > .le-hdr { display: none; }

/* Time-ago sits in the top-right corner of the punchline (absolute,
   doesn't affect punchline layout). */
.col3__punchline { position: relative; }
.col3__punchline-time {
  position: absolute;
  top: 6px;
  right: 8px;
  font: 300 9px/1 var(--fi);
  color: var(--muted);
  letter-spacing: .02em;
}

/* AT-BAT SEQUENCE STRIP — tiny pitch thumbnails at the bottom of col3 */
.col3__seq-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px 4px;
  flex-shrink: 0;
}
.col3__seq-head-label {
  font: 600 7px/1 var(--fi);
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--muted);
}
.col3__seq-all {
  font: 500 7px/1 var(--fi);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--red);
  cursor: pointer;
  padding: 3px 6px;
  border: 1px solid var(--rule);
  background: var(--bg);
  user-select: none;
  transition: background 120ms;
}
.col3__seq-all:hover { background: var(--bgw); border-color: var(--rules); }
.col3__seq-strip {
  padding: 4px 10px 10px;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 4px;
  flex-shrink: 0;
}
.col3__seq-thumb {
  width: 38px;
  flex-shrink: 0;
  background: var(--bg);
  border: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  cursor: pointer;
  position: relative;
  transition: background 120ms, border-color 120ms;
  user-select: none;
}
.col3__seq-thumb:hover { background: var(--bgw); }
.col3__seq-thumb.--current {
  border-color: var(--dark);
  box-shadow: inset 0 -2px 0 var(--red);
}
.col3__seq-thumb-zone {
  height: 40px;
  padding: 3px;
  background: var(--bgi);
  border-bottom: 1px solid var(--rule);
}
.col3__seq-thumb-zone svg { display: block; width: 100%; height: 100%; }
.col3__seq-thumb-meta {
  padding: 3px 2px;
  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: center;
  gap: 3px;
}
.col3__seq-thumb-type {
  font: 700 7px/1 var(--fi);
  letter-spacing: .04em;
  color: var(--dark);
}
.col3__seq-thumb-velo {
  font: 400 7px/1 var(--fi);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.col3__seq-thumb-pn {
  position: absolute;
  top: 1px;
  left: 2px;
  font: 700 6px/1 var(--fi);
  color: var(--muted);
  background: var(--bg);
  padding: 1px 2px;
}

/* ══════════════════════════════════════════════════════════════
   COL3 PITCH DETAIL PANEL — unified panel for all pitch types
   See share/claudeweb/pitch-detail/BUILD_pitch-detail-col3.html
   SPRINT-058 Phase 1 — replaces .pd-* block above
   Outcome families: challenge-win, challenge-loss, hit, out,
   missed, neutral, multi.
   Fix vs mockup: challenger-only verdict tag; non-challenger
   gets role + "Impacted" sub-label with no verdict.
   ══════════════════════════════════════════════════════════════ */

.col3 {
  background: var(--bg);
  font-family: var(--fi);
  font-variant-numeric: tabular-nums;
  color: var(--dark);
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

/* outcome family color tokens (scoped) */
.col3 {
  --oc-win:    #2E7D32;
  --oc-win-bg: rgba(46,125,50,.06);
  --oc-win-b:  rgba(46,125,50,.22);
  --oc-loss:   #FC3D21;
  --oc-loss-bg:rgba(252,61,33,.06);
  --oc-loss-b: rgba(252,61,33,.22);
  --oc-hit:    #1565C0;
  --oc-out:    #555;
  --oc-miss:   #B45309;
  --oc-neut:   #999;
}

/* ── 1. BANNER — 28px, colored per family ──────────── */
.col3__banner {
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  font: 700 8px/1 var(--fi);
  letter-spacing: .08em;
  text-transform: uppercase;
  flex-shrink: 0;
}
.col3__banner-left { display: flex; align-items: center; gap: 6px; }
.col3__banner-right { font-weight: 500; letter-spacing: .06em; opacity: .7; }

.col3__banner.--win   { background: var(--oc-win);  color: #fff; }
.col3__banner.--loss  { background: var(--oc-loss); color: #fff; }
.col3__banner.--hit   { background: var(--oc-hit);  color: #fff; }
.col3__banner.--out   { background: var(--oc-out);  color: #fff; }
.col3__banner.--miss  { background: var(--oc-miss); color: #fff; }
.col3__banner.--neut  { background: var(--bgi);     color: var(--sec); }
.col3__banner.--multi { background: var(--dark);    color: #fff; }

/* ── 2. PUNCHLINE — the big "what happened" ─────────── */
.col3__punchline {
  padding: 12px 10px 10px;
  border-bottom: 1px solid var(--rule);
  flex-shrink: 0;
}
.col3__punchline-main {
  font: 300 28px/1.1 var(--fi);
  letter-spacing: -.03em;
  color: var(--dark);
}
.col3__punchline-main .hl-win  { color: var(--good); font-weight: 500; }
.col3__punchline-main .hl-loss { color: var(--red);  font-weight: 500; }
.col3__punchline-main .hl-hit  { color: var(--blue, #1565C0); font-weight: 500; }
.col3__punchline-main .hl-out  { color: var(--sec);  font-weight: 500; }
.col3__punchline-main .hl-miss { color: var(--warn); font-weight: 500; }
.col3__punchline-sub {
  font: 400 10px/1.4 var(--fi);
  color: var(--muted);
  margin-top: 4px;
}

/* ── 3. MATCHUP — pitcher + batter rows ─────────────── */
.col3__matchup { border-bottom: 1px solid var(--rule); flex-shrink: 0; }
.col3__player {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  align-items: center;
  border-bottom: 1px solid var(--rule);
  min-height: 64px;
}
.col3__player:last-child { border-bottom: none; }

.col3__hs {
  width: 56px;
  height: 64px;
  background: var(--bgi);
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 1px solid var(--rule);
  position: relative;
  overflow: hidden;
}
.col3__hs img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.col3__hs-init {
  font: 800 16px/1 var(--fi);
  color: var(--sec);
  letter-spacing: -.02em;
}
.col3__hs-sil {
  position: absolute;
  bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: 36px; height: 36px;
  background: rgba(0,0,0,.06);
  border-radius: 50% 50% 0 0;
}
.col3__player.--winner .col3__hs { border-bottom: 3px solid var(--good); }
.col3__player.--loser  .col3__hs { border-bottom: 3px solid var(--red); opacity: .6; }
.col3__player.--neutral .col3__hs { border-bottom: none; }

.col3__pinfo {
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.col3__pname-row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.col3__pname {
  font: 800 14px/1 var(--fi);
  letter-spacing: -.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.col3__role {
  font: 700 7px/1 var(--fi);
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 2px 5px;
  background: var(--bgi);
  color: var(--muted);
  border: 1px solid var(--rule);
  flex-shrink: 0;
}
.col3__pstat {
  font: 400 9px/1 var(--fi);
  color: var(--muted);
}

/* verdict tag (right side) — challenger only per user direction */
.col3__verdict {
  padding: 0 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
.col3__verdict-tag {
  font: 800 8px/1 var(--fi);
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 3px 8px;
  border: 1px solid;
}
.col3__verdict-tag.--right {
  color: var(--good);
  border-color: var(--oc-win-b);
  background: var(--oc-win-bg);
}
.col3__verdict-tag.--wrong {
  color: var(--red);
  border-color: var(--oc-loss-b);
  background: var(--oc-loss-bg);
}
.col3__verdict-sub {
  font: 300 7px/1 var(--fi);
  color: var(--muted);
}

/* ── 4. MINI SCOREBUG ───────────────────────────────── */
.col3__bug {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  border-bottom: 1px solid var(--rules);
  background: var(--bgw);
  min-height: 52px;
  flex-shrink: 0;
}
.col3__bug-team {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
}
.col3__bug-team.--away { justify-content: flex-start; }
.col3__bug-team.--home { justify-content: flex-end; flex-direction: row-reverse; }
.col3__team-logo {
  width: 24px; height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.col3__team-logo img { width: 24px; height: 24px; object-fit: contain; }
.col3__team-logo svg { width: 24px; height: 24px; }
.col3__team-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.col3__bug-team.--home .col3__team-info { align-items: flex-end; }
.col3__score-team {
  font: 800 11px/1 var(--fi);
  letter-spacing: -.01em;
}
.col3__score-num {
  font: 300 20px/1 var(--fi);
  letter-spacing: -.03em;
}
.col3__score-num.--win { font-weight: 700; }

.col3__bug-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border-left: 1px solid var(--rule);
  border-right: 1px solid var(--rule);
  min-width: 100px;
}
.col3__inning {
  font: 700 10px/1 var(--fi);
  color: var(--dark);
  letter-spacing: .02em;
}
.col3__situation-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.col3__count {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.col3__count-row {
  display: flex;
  align-items: center;
  gap: 2px;
}
.col3__count-lbl {
  font: 600 6px/1 var(--fi);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  width: 8px;
}
.col3__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--bgi);
  border: 1px solid rgba(0,0,0,.15);
}
.col3__dot.--ball.--on  { background: var(--warn); border-color: var(--warn); }
.col3__dot.--strike.--on { background: var(--red);  border-color: var(--red); }

.col3__bases {
  display: grid;
  grid-template-areas: ". b2 ." "b3 . b1";
  grid-template-columns: 9px 9px 9px;
  grid-template-rows: 9px 9px;
  gap: 2px;
}
.col3__base {
  width: 9px; height: 9px;
  background: var(--bgi);
  border: 1px solid rgba(0,0,0,.15);
  transform: rotate(45deg);
}
.col3__base.--1b { grid-area: b1; }
.col3__base.--2b { grid-area: b2; }
.col3__base.--3b { grid-area: b3; }
.col3__base.--on { background: var(--warn); border-color: var(--warn); }

.col3__outs {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.col3__outs-row { display: flex; gap: 2px; }
.col3__out-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--bgi);
  border: 1px solid rgba(0,0,0,.15);
}
.col3__out-dot.--on { background: var(--dark); border-color: var(--dark); }
.col3__outs-lbl {
  font: 600 6px/1 var(--fi);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
}

/* ── 5. FACTS GRID — 2×2 ─────────────────────────────── */
.col3__facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid var(--rule);
  flex-shrink: 0;
}
.col3__fact {
  padding: 8px 10px;
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.col3__fact:nth-child(2n) { border-right: none; }
.col3__fact:nth-last-child(-n+2) { border-bottom: none; }
.col3__fact-label {
  font: 500 7px/1 var(--fi);
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
}
.col3__fact-value {
  font: 300 18px/1 var(--fi);
  letter-spacing: -.02em;
  color: var(--dark);
}
.col3__fact-value.--accent { color: var(--red); font-weight: 500; }
.col3__fact-value.--good   { color: var(--good); }
.col3__fact-value.--warn   { color: var(--warn); }
.col3__fact-value.--muted  { color: var(--muted); }

/* ── 6. PITCH INFO ROW ──────────────────────────────── */
.col3__pitch-info {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-bottom: 1px solid var(--rule);
  background: var(--bgw);
  flex-shrink: 0;
}
.col3__pitch-type { font: 700 9px/1 var(--fi); color: var(--dark); }
.col3__pitch-speed { font: 400 9px/1 var(--fi); color: var(--sec); }
.col3__pitch-meta { font: 300 8px/1 var(--fi); color: var(--muted); margin-left: auto; }

/* ── 7. STORY AFFORDANCE ────────────────────────────── */
.col3__story {
  padding: 7px 10px;
  font: 500 9px/1 var(--fi);
  color: var(--red);
  letter-spacing: -.01em;
  cursor: pointer;
  border-bottom: 1px solid var(--rule);
  transition: background 120ms cubic-bezier(0,0,.2,1);
  flex-shrink: 0;
}
.col3__story:hover { background: var(--bgw); }
.col3__story-icon { font-weight: 300; }

/* ── MULTI-PITCH: TILE GRID ─────────────────────────── */
.col3__tiles {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  border-bottom: 1px solid var(--rule);
  flex-shrink: 0;
}
.col3__tile {
  padding: 8px 6px;
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.col3__tile:nth-child(3n) { border-right: none; }
.col3__tile:last-child { border-right: none; }
.col3__tile-hs {
  width: 36px; height: 36px;
  background: var(--bgi);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.col3__tile-hs .col3__hs-init { font-size: 11px; }
.col3__tile-hs .col3__hs-sil { width: 24px; height: 24px; }
.col3__tile-name {
  font: 700 8px/1 var(--fi);
  color: var(--dark);
  text-align: center;
  letter-spacing: -.01em;
}
.col3__tile-stat {
  font: 300 7px/1 var(--fi);
  color: var(--muted);
  text-align: center;
}
.col3__tile-result {
  font: 700 7px/1 var(--fi);
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 2px 5px;
}
.col3__tile-result.--win  { color: var(--good); background: var(--oc-win-bg); border: 1px solid var(--oc-win-b); }
.col3__tile-result.--loss { color: var(--red);  background: var(--oc-loss-bg); border: 1px solid var(--oc-loss-b); }

.col3__hint {
  padding: 8px 10px;
  font: 400 9px/1.4 var(--fi);
  color: var(--muted);
  text-align: center;
  border-bottom: 1px solid var(--rule);
  flex-shrink: 0;
}

/* ── AT-BAT SEQUENCE ────────────────────────────────── */
.col3__seq { border-bottom: 1px solid var(--rule); flex-shrink: 0; }
.col3__seq-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-bottom: 1px solid var(--rule);
  font: 400 9px/1 var(--fi);
}
.col3__seq-row:last-child { border-bottom: none; }
.col3__seq-num  { font: 700 8px/1 var(--fi); color: var(--muted); min-width: 14px; }
.col3__seq-type { font: 700 9px/1 var(--fi); color: var(--dark); min-width: 22px; }
.col3__seq-speed { font: 400 9px/1 var(--fi); color: var(--sec); min-width: 42px; }
.col3__seq-result { font: 400 8px/1 var(--fi); color: var(--muted); flex: 1; text-align: right; }
.col3__seq-result.--k    { color: var(--red); font-weight: 700; }
.col3__seq-result.--ball { color: var(--good); }
.col3__seq-result.--foul { color: var(--sec); }

/* Play context */
.lf-play-context { flex: 1; border-top: 1px solid var(--rule); display: flex; flex-direction: column; }
.situation-bar {
  display: flex; align-items: center; gap: 0;
  border-bottom: 1px solid var(--rule); background: var(--bgw);
}
.sit-item { padding: 8px 12px; border-right: 1px solid var(--rule); display: flex; flex-direction: column; gap: 3px; }
.sit-item:last-child { border-right: none; }
.sit-lbl { font: 500 8px/1 var(--fi); letter-spacing: .10em; text-transform: uppercase; color: var(--muted); }
.sit-val { font: 600 13px/1 var(--fi); font-variant-numeric: tabular-nums; color: var(--dark); }

.count-display { display: flex; align-items: center; gap: 4px; }
.count-ball {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--bgw); border: 1.5px solid rgba(0,0,0,.2);
}
.count-ball.on { background: var(--warn); border-color: var(--warn); }
.count-strike {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--bgw); border: 1.5px solid rgba(0,0,0,.2);
}
.count-strike.on { background: var(--red); border-color: var(--red); }
.count-sep { width: 1px; height: 10px; background: var(--rule); margin: 0 2px; }

/* Trajectory */
.traj-section { flex: 1; display: flex; flex-direction: column; }
.traj-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
  background: var(--bgw); border-bottom: 1px solid var(--rule); border-top: 1px solid var(--rule);
}
.traj-stat { padding: 8px 10px; border-right: 1px solid var(--rule); }
.traj-stat:last-child { border-right: none; }
.traj-stat-val { font: 300 14px/1 var(--fi); color: var(--dark); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.traj-stat-val.accent { color: var(--warn); font-weight: 500; }
.traj-stat-lbl { font: 500 7px/1 var(--fi); letter-spacing: .10em; text-transform: uppercase; color: var(--muted); margin-top: 3px; }
.traj-view { padding: 10px 14px; border-bottom: 1px solid var(--rule); flex: 1; }
.traj-view:last-child { border-bottom: none; }
.traj-view-lbl { font: 500 8px/1 var(--fi); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); display: block; margin-bottom: 8px; }
#traj-side-svg, #traj-top-svg { display: block; width: 100%; height: auto; }

/* ── COL 3: BATTERS + FEEDS ── */
.lf-right-col { display: flex; flex-direction: column; position: sticky; top: 56px; align-self: start; max-height: calc(100vh - 64px); overflow-y: auto; }
.lf-right-col > :last-child { flex: 1; min-height: 0; }
.lf-section-hdr {
  padding: 9px 14px; border-bottom: 1px solid var(--rule);
  background: var(--bgw); display: flex; align-items: center; justify-content: space-between;
}
.lf-section-title { font: 600 10px/1 var(--fi); letter-spacing: .10em; text-transform: uppercase; color: var(--dark); }
.lf-section-meta { font: 300 9px/1 var(--fi); color: var(--muted); }

.lf-batter-row {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 14px; border-bottom: 1px solid var(--rule);
  cursor: pointer; transition: background 80ms;
}
.lf-batter-row:hover { background: var(--bgw); }
.lf-batter-row.on { background: var(--bgw); border-left: 2px solid var(--dark); padding-left: 12px; }
.lf-batter-name { font: 600 10px/1 var(--fi); color: var(--dark); }
.lf-batter-sub { font: 300 8px/1 var(--fi); color: var(--muted); margin-top: 2px; }
.lf-batter-li {
  font: 500 8px/1 var(--fi); padding: 2px 5px;
  border: 1px solid transparent; flex-shrink: 0;
}
.lf-batter-li.hi { color: var(--red); border-color: rgba(252,61,33,.3); }
.lf-batter-li.med { color: var(--warn); border-color: rgba(180,83,9,.3); }
.lf-batter-stats { margin-left: auto; text-align: right; }
.lf-batter-count { font: 600 11px/1 var(--fi); font-variant-numeric: tabular-nums; }
.lf-batter-ab { font: 300 8px/1 var(--fi); color: var(--muted); }

.lf-feed-tabs { display: flex; border-bottom: 1px solid var(--rules); }
.lf-feed-tab {
  flex: 1; padding: 8px 0; text-align: center;
  font: 600 9px/1 var(--fi); letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); cursor: pointer;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: all 80ms;
}
.lf-feed-tab.on { color: var(--dark); border-bottom-color: var(--red); }
.lf-feed-content { display: none; flex-direction: column; overflow-y: auto; flex: 1; min-height: 0; }
.lf-feed-content.on { display: flex; }
.lf-feed-content::-webkit-scrollbar { width: 3px; }
.lf-feed-content::-webkit-scrollbar-thumb { background: rgba(0,0,0,.15); }
.lf-feed-item {
  padding: 8px 14px; border-bottom: 1px solid var(--rule);
  cursor: pointer; transition: background 80ms;
}
.lf-feed-item:hover { background: var(--bgw); }
.fi-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 3px; }
.fi-name { font: 600 10px/1 var(--fi); color: var(--dark); }
.fi-role { font: 500 8px/1 var(--fi); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-left: 4px; }
.fi-badge {
  font: 600 9px/1 var(--fi); letter-spacing: .06em; text-transform: uppercase;
  padding: 2px 6px; border: 1px solid; flex-shrink: 0;
}
.fi-badge.ov { color: var(--good); border-color: rgba(46,125,50,.3); background: rgba(46,125,50,.06); }
.fi-badge.up { color: var(--red); border-color: rgba(252,61,33,.3); background: rgba(252,61,33,.06); }
.fi-badge.mi { color: var(--warn); border-color: rgba(180,83,9,.3); background: rgba(180,83,9,.06); }
.fi-score { font: 500 10px/1 var(--fi); color: var(--dark); margin-right: 5px; font-variant-numeric: tabular-nums; }
.fi-meta { font: 300 8px/1.5 var(--fi); color: var(--muted); display: flex; align-items: center; gap: 6px; }

/* ── AI COMMENTARY ── */
.ai-commentary { border-bottom: 1px solid var(--rule); }
.ai-hdr {
  padding: 9px 14px; border-bottom: 1px solid var(--rule);
  background: var(--bgw); display: flex; align-items: center; justify-content: space-between;
}
.ai-hdr-title {
  font: 600 10px/1 var(--fi); letter-spacing: .10em; text-transform: uppercase; color: var(--dark);
}
.ai-length-toggle { display: flex; gap: 0; }
.ai-len-btn {
  font: 500 8px/1 var(--fi); letter-spacing: .06em; text-transform: uppercase;
  padding: 4px 8px; border: 1px solid var(--rule); border-right: none;
  background: none; color: var(--muted); cursor: pointer; transition: all 80ms;
}
.ai-len-btn:last-child { border-right: 1px solid var(--rule); }
.ai-len-btn:hover { background: var(--bgi); color: var(--dark); }
.ai-len-btn.on { background: var(--dark); color: #fff; border-color: var(--dark); }
.ai-len-btn.on + .ai-len-btn { border-left-color: var(--dark); }
.ai-body {
  padding: 14px; font: 300 11px/1.6 var(--fi); color: var(--sec);
}

/* ── UMP SECTION ── */
.lf-ump-section {
  padding: 20px 32px; border-top: 1px solid var(--rule);
}
.lf-ump-section-title {
  font: 500 9px/1 var(--fi); letter-spacing: .18em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 12px;
}
.lf-ump-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.lf-ump-card { flex: 1; min-width: 130px; max-width: 156px; border: 1px solid var(--rule); padding: 10px 12px; }
.lf-ump-name { font: 600 10px/1 var(--fi); color: var(--dark); margin-bottom: 2px; }
.lf-ump-game { font: 300 8px/1 var(--fi); color: var(--muted); margin-bottom: 6px; }
.lf-ump-bar-wrap { display: flex; align-items: center; gap: 8px; }
.lf-ump-bar-track { flex: 1; height: 3px; background: var(--bgi); }
.lf-ump-bar-fill { height: 3px; }
.lf-ump-bar-fill.good { background: var(--good); }
.lf-ump-bar-fill.avg { background: var(--warn); }
.lf-ump-bar-fill.bad { background: var(--red); }
.lf-ump-pct { font: 600 10px/1 var(--fi); font-variant-numeric: tabular-nums; }


/* ── Challenge Feed Cards (mini zone + plain-English rows) ── */
.fi-card { display: flex; gap: 10px; align-items: flex-start; padding: 10px 14px; border-bottom: 1px solid var(--rule); cursor: pointer; transition: background 80ms; }
.fi-card:hover { background: var(--bgw); }
.fi-card.selected, .lf-feed-item.selected { background: var(--bgw); border-left: 2px solid var(--dark); padding-left: 12px; }
.fi-card-body { flex: 1; min-width: 0; }
.fi-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.fi-card-ruling { font: 700 11px/1 var(--fi); }
.fi-card-ruling.ov { color: var(--good); }
.fi-card-ruling.up { color: var(--red); }
.fi-card-ruling.mi { color: var(--warn); }
.fi-card-badge { font: 600 8px/1 var(--fi); letter-spacing: .08em; text-transform: uppercase; padding: 2px 6px; border: 1px solid; }
.fi-card-badge.ov { color: var(--good); border-color: rgba(46,125,50,.3); background: rgba(46,125,50,.06); }
.fi-card-badge.up { color: var(--red); border-color: rgba(252,61,33,.3); background: rgba(252,61,33,.06); }
.fi-card-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 2px; }
.fi-card-rl { font: 500 8px/1 var(--fi); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); flex-shrink: 0; }
.fi-card-rv { font: 400 10px/1 var(--fi); color: var(--dark); text-align: right; padding-left: 6px; }
.fi-card-rv.ov { color: var(--good); font-weight: 600; }
.fi-card-rv.up { color: var(--red); font-weight: 600; }
.fi-card-meta { font: 300 8px/1.4 var(--fi); color: var(--muted); margin-top: 4px; padding-top: 3px; border-top: 1px solid var(--rule); display: flex; align-items: center; gap: 6px; }

/* ══════════════════════════════════════════════════════════════════════════
   GAME PAGE (SPRINT-024)
   All rules scoped under .gp wrapper to avoid conflicts with old scorecard CSS.
   Classes already uniquely prefixed with gp- are not double-scoped.
   ══════════════════════════════════════════════════════════════════════════ */

/* Game header */
.gp { }
.gp-game-hdr { border-bottom: 1px solid var(--rules); background: var(--bg); }

/* ════════════════════════════════════
   GAME HERO — Three-column grid
════════════════════════════════════ */
.gp-hdr-grid {
  display: grid;
  grid-template-columns: 210px 1fr 190px 240px;
  min-height: 150px;
  border-left: 1px solid var(--rule);
}

/* ── LEFT COLUMN ── */
.gp-hdr-left {
  border-right: 1px solid var(--rule);
  display: flex; flex-direction: column;
}
.gp-team-row {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 16px 10px;
  flex: 1;
}
.gp-team-row.away { border-bottom: 1px solid var(--rule); }
.gp-team-row.home { padding-top: 10px; padding-bottom: 13px; }
.gp-team-logo {
  width: 30px; height: 30px; object-fit: contain; flex-shrink: 0;
}
.gp-team-logo.hide { display: none; }
.gp-team-info { flex: 1; min-width: 0; }
.gp-team-abbr { font: 800 17px/1 var(--fi); letter-spacing: -.01em; }
.gp-challenge-dots { display: flex; align-items: center; gap: 3px; margin-top: 6px; flex-wrap: wrap; }
.gp-cp { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.gp-cp.won { background: var(--good); }
.gp-cp.lost { background: var(--red); }
.gp-cp.rem { background: transparent; border: 1px solid rgba(0,0,0,.22); }
.gp-cp-meta { font: 300 8px/1 var(--fi); color: var(--muted); margin-left: 3px; }
.gp-team-score {
  font: 800 40px/1 var(--fi); letter-spacing: -.04em;
  font-variant-numeric: tabular-nums; flex-shrink: 0;
}
.gp-team-score.lose { font-weight: 300; color: rgba(0,0,0,.26); }

/* ── CENTER COLUMN (linescore only, fills space, left-aligned) ── */
.gp-hdr-center {
  border-right: 1px solid var(--rule);
  display: flex; align-items: center;
  min-width: 0;
}
.gp-hdr-linescore {
  padding: 10px 14px;
  overflow-x: auto; scrollbar-width: none;
  display: flex; justify-content: flex-start;
  width: 100%;
}
.gp-hdr-linescore::-webkit-scrollbar { display: none; }

/* ── PITCHER/BATTER COLUMN ── */
.gp-hdr-pb {
  border-right: 1px solid var(--rule);
  display: flex; flex-direction: column;
}
.gp-pb-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; flex: 1;
}
.gp-pb-row.pitcher { border-bottom: 1px solid var(--rule); }
.gp-pb-head {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--bgi); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.gp-pb-head .player-headshot,
.gp-pb-head img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.gp-pb-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.gp-pb-lbl {
  font: 500 8px/1 var(--fi); letter-spacing: .10em;
  text-transform: uppercase; color: var(--muted);
}
.gp-pb-name {
  font: 600 12px/1.15 var(--fi); color: var(--dark);
  overflow: hidden; text-overflow: ellipsis;
}

/* ── RIGHT COLUMN (bigger minimap + inline inning/BSO) ── */
.gp-hdr-right {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; padding: 6px 8px 10px; gap: 8px;
  background: var(--bgw);
}
.gp-minimap { display: flex; align-items: center; justify-content: center; flex: 1; width: 100%; }
.gp-hdr-bso {
  display: flex; align-items: center; gap: 10px;
  justify-content: center;
}
.gp-hdr-inn {
  font: 700 11px/1 var(--fi); letter-spacing: .04em;
  color: var(--dark); flex-shrink: 0;
}
.gp-count-wrap { display: flex; align-items: center; gap: 3px; }
.gp-count-group { display: flex; align-items: center; gap: 2px; }
.gp-count-lbl {
  font: 700 7px/1 var(--fi); letter-spacing: .10em;
  text-transform: uppercase; color: var(--muted); margin-right: 3px;
}
.gp-cd {
  width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0;
  background: rgba(0,0,0,.1); border: 1.5px solid rgba(0,0,0,.18);
}
.gp-cd.ball.on { background: var(--warn); border-color: var(--warn); }
.gp-cd.strike.on { background: var(--red); border-color: var(--red); }
.gp-cd.out.on { background: var(--dark); border-color: var(--dark); }
.gp-cd-sep { width: 1px; height: 10px; background: rgba(0,0,0,.1); margin: 0 4px; }

/* ── LINESCORE (header-embedded) ── */
.gp-ls-tbl { display: inline-flex; border-top: 1px solid var(--rule); border-left: 1px solid var(--rule); }
.gp-ls-col { display: flex; flex-direction: column; }
.gp-ls-c {
  height: 22px; display: flex; align-items: center; justify-content: center;
  font: 300 11px/1 var(--fi); font-variant-numeric: tabular-nums;
  border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  padding: 0 5px; min-width: 26px; position: relative;
}
.gp-ls-c.hdr { font: 500 7px/1 var(--fi); letter-spacing: .08em; color: var(--muted); background: var(--bgi); }
.gp-ls-c.team { font: 700 11px/1 var(--fi); min-width: 40px; justify-content: flex-start; padding: 0 7px; }
.gp-ls-c.scored { font-weight: 700; background: rgba(0,0,0,.02); }
.gp-ls-c.total { font: 700 11px/1 var(--fi); }
.gp-ls-c.muted { color: var(--muted); }
.gp-ls-c.active-inn { background: rgba(252,61,33,.05); }
.gp-ls-c.inn-active { background: rgba(252,61,33,.08); }
.gp-ls-c.ls-pitch-hl { background: rgba(252,61,33,.06); }
.gp-ls-totals-sep { border-left: 1px solid var(--rules); }
/* Linescore interactivity */
.gp-ls-col[data-ls-inn] .gp-ls-c { cursor: pointer; }
.gp-ls-col[data-ls-inn] .gp-ls-c:hover { background: rgba(0,0,0,.03); }
.gp-ls-c[data-ls-team] { cursor: pointer; }
.gp-ls-c[data-ls-team]:hover { background: rgba(0,0,0,.03); }
.gp-ls-c.team-active { background: rgba(252,61,33,.08); }
/* ABS dots inside linescore cells */
.gp .ls-abs { display: flex; gap: 2px; align-items: center; justify-content: center; flex-wrap: wrap; position: absolute; bottom: 2px; left: 0; right: 0; }
.gp .ls-abs-dot { width: 5px; height: 5px; border-radius: 50%; transition: transform 150ms, box-shadow 150ms; }
.gp .ls-abs-dot.ov { width: 7px; height: 7px; background: var(--good); }
.gp .ls-abs-dot.up { width: 7px; height: 7px; background: var(--red); }
.gp .ls-abs-dot.mi { background: var(--warn); }
.gp .ls-abs-dot.glow { transform: scale(1.6); box-shadow: 0 0 4px currentColor; }


/* Subway timeline */
.gp .subway-shell { border-bottom: 1px solid var(--rules); background: var(--bg); position: sticky; top: 55px; z-index: 90; overflow: hidden; }
.gp .subway-ctrl {
  display: flex; align-items: center; gap: 7px;
  padding: 6px 16px; border-bottom: 1px solid var(--rule); background: var(--bgw);
  font-size: 9px; line-height: 1;
}
.gp .subway-scroll { overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
.gp .subway-scroll::-webkit-scrollbar { height: 3px; }
.gp .subway-scroll::-webkit-scrollbar-thumb { background: rgba(0,0,0,.15); }
#gp-subway-svg { display: block; }

/* Waterfall expand button */
.gp .wf-expand-btn {
  background: var(--red); border: 1px solid var(--red); padding: 2px 8px; border-radius: 2px;
  font: 600 9px/1 var(--fi); letter-spacing: .06em; color: #fff; cursor: pointer;
  text-transform: uppercase;
}
.gp .wf-expand-btn:hover { opacity: .85; }

/* Waterfall shell */
.gp .wf-shell { border-bottom: 1px solid var(--rules); background: var(--bg); overflow: hidden; }
.gp .wf-pitch-count { font: 300 9px/1 var(--fi); color: var(--muted); }
.gp .wf-wrap { }

/* Main 3-col grid */
.gp .main-grid { display: grid; grid-template-columns: 1fr 300px 280px; border-bottom: 1px solid var(--rule); min-height: 700px; }
/* V2: zone-fixed left, flex center, sidebar right */
.gp .main-grid.v2 { grid-template-columns: 380px 1fr 280px; }
/* SPRINT-058 Phase 4 — Triptych: zone | replay well | col3 pitch detail */
.gp .main-grid.triptych { grid-template-columns: 440px 1fr 320px; min-height: 560px; }
.gp .gp-col3-col { border-left: 1px solid var(--rule); display: flex; flex-direction: column; min-width: 0; }
.gp #gp-col3-mount { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.gp #gp-col3-mount .col3-empty { padding: 40px 16px; text-align: center; font: 300 11px/1.5 var(--fi); color: var(--muted); }
.gp #gp-col3-mount .col3 { flex: 1; display: flex; flex-direction: column; }
/* SPRINT-058 Phase 4 — lineup/boxscore now full-width below the strip housing */
.gp-below-triptych { display: block; border-top: 1px solid var(--rule); padding: 18px 20px 4px 20px; }

/* ═══════════════════════════════════════════════════════════════════════
   HERO V2 — Mockup A line-score + team ABS summary strip.
   Replaces the prior 3-column score-band hero. Single horizontal grid
   with per-inning R + R/H/E + ABS team totals; live/final footer below.
   ═══════════════════════════════════════════════════════════════════════ */
.gp-hero-v2 {
  border: 1px solid var(--rules); background: var(--bg);
  font-variant-numeric: tabular-nums;
}
.gp-hv-grid {
  display: grid; gap: 0;
  font: 400 12px/1 var(--fi);
}
.gp-hv-cell {
  padding: 10px 0; text-align: center;
  border-right: 1px solid var(--rule);
  display: flex; align-items: center; justify-content: center;
  min-width: 0; white-space: nowrap;
}
.gp-hv-cell:last-child { border-right: none; }
.gp-hv-cell.hdr {
  font: 600 9px/1 var(--fi); letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); background: var(--bgw);
  border-bottom: 1px solid var(--rule); padding: 8px 0;
}
.gp-hv-cell.hdr.team-hdr { justify-content: flex-start; padding-left: 14px; }
.gp-hv-cell.hdr.active { color: var(--red); background: rgba(252,61,33,.06); }
.gp-hv-cell.gap { background: var(--bgi); border: none; padding: 0; }
.gp-hv-cell.team {
  justify-content: flex-start; padding: 10px 14px;
  gap: 10px; cursor: pointer;
  border-bottom: 1px solid var(--rule);
}
.gp-hv-cell.team:hover { background: rgba(0,0,0,.02); }
.gp-hv-cell.team.team-active { background: var(--red-d); }
.gp-hv-logo { width: 22px; height: 22px; flex-shrink: 0; object-fit: contain; }
.gp-hv-team-name { display: flex; align-items: center; gap: 8px; min-width: 0; }
.gp-hv-abbr { font: 700 14px/1 var(--fi); letter-spacing: .04em; color: var(--dark); }
.gp-hv-wl { font: 600 10px/1 var(--fi); letter-spacing: .08em; padding: 2px 5px; }
.gp-hv-wl.win { color: var(--good); background: rgba(46,125,50,.10); }
.gp-hv-wl.lose { color: var(--muted); background: transparent; }

.gp-hv-cell.inn { border-bottom: 1px solid var(--rule); color: var(--dark); cursor: pointer; }
.gp-hv-cell.inn:hover { background: rgba(0,0,0,.03); }
.gp-hv-cell.inn.zero { color: var(--muted); }
.gp-hv-cell.inn.empty { color: rgba(0,0,0,.20); }
.gp-hv-cell.inn.active { background: rgba(252,61,33,.06); color: var(--red); font-weight: 600; }
/* Selected inning (user click) — red tint + red underline stripe */
.gp-hv-cell.inn-active {
  background: var(--red-d) !important;
  box-shadow: inset 0 -2px 0 var(--red);
  color: var(--red); font-weight: 600;
}
.gp-hv-cell.hdr.inn-hdr { cursor: pointer; }
.gp-hv-cell.hdr.inn-hdr:hover { color: var(--dark); background: var(--bgi); }
.gp-hv-cell.hdr.inn-active { color: var(--red); background: var(--red-d) !important; }

.gp-hv-cell.rhe {
  font: 700 14px/1 var(--fi); border-bottom: 1px solid var(--rule);
}
.gp-hv-cell.rhe.winner { color: var(--good); }
.gp-hv-cell.rhe.muted { color: var(--muted); font-weight: 300; }

.gp-hv-cell.abs {
  font: 600 12px/1 var(--fi); border-bottom: 1px solid var(--rule);
}
.gp-hv-cell.abs.muted { color: var(--muted); font-weight: 300; }
.gp-hv-cell.abs.pos { color: var(--good); }
.gp-hv-cell.abs.neg { color: var(--red); }

/* Live / final footer strip */
.gp-hv-live, .gp-hv-final {
  padding: 10px 16px; background: var(--bgw);
  font: 400 12px/1.3 var(--fi); color: var(--sec);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.gp-hv-live-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--red);
  box-shadow: 0 0 0 3px rgba(252,61,33,.18);
  animation: hv-pulse 1.4s ease-in-out infinite; flex-shrink: 0;
}
@keyframes hv-pulse { 0%,100% { opacity: .9 } 50% { opacity: .45 } }
.gp-hv-live-inn { font: 700 11px/1 var(--fi); letter-spacing: .08em; text-transform: uppercase; color: var(--red); }
.gp-hv-live-sep { color: var(--muted); opacity: .6; }
.gp-hv-live strong { font-weight: 600; color: var(--dark); }
.gp-hv-live .muted { color: var(--muted); font-weight: 300; margin: 0 2px; }
.gp-hv-live-li { font-weight: 700; color: var(--dark); }
.gp-hv-final { color: var(--sec); font: 400 11px/1.3 var(--fi); }
.gp-hv-final-sep { color: var(--muted); opacity: .5; margin: 0 2px; }

/* ═══════════════════════════════════════════════════════════════════════
   BOXSCORE — replaces the prior single-team lineup block.
   Side-by-side dense tables (Mockup A), 14 traditional cols + 4 ABS cols.
   ═══════════════════════════════════════════════════════════════════════ */
.gp-bx-section { margin-bottom: 22px; }
.gp-bx-hdr {
  font: 700 10px/1 var(--fi); letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); padding: 0 0 6px 2px;
}
.gp-bx-two {
  display: grid; grid-template-columns: 1fr 1px 1fr; gap: 0;
  border: 1px solid var(--rules); background: var(--bg);
}
.gp-bx-sep { background: var(--rules); }
.gp-bx-empty {
  padding: 14px 18px; font: 300 12px/1.4 var(--fi); color: var(--muted);
}
.gp-bx-pregame { border: 1px solid var(--rules); background: var(--bgw); text-align: center; }

.gp-bx-tbl {
  width: 100%; border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.gp-bx-tbl th, .gp-bx-tbl td {
  padding: 4px 6px; text-align: right;
  font: 400 11px/1.3 var(--fi);
  border-bottom: 1px solid var(--rule);
}
.gp-bx-tbl th {
  font: 600 9px/1 var(--fi); letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); background: var(--bgw); padding: 8px 6px;
  border-bottom: 1px solid var(--rules);
}
.gp-bx-tbl th.team-hdr {
  text-align: left; font: 700 11px var(--fi); letter-spacing: .06em;
  color: var(--dark); padding: 10px 12px 7px 12px;
  background: var(--bg); border-bottom: 1px solid var(--rule);
}
.gp-bx-tbl th.l, .gp-bx-tbl td.l { text-align: left; }
.gp-bx-tbl td.player {
  font-weight: 500; color: var(--dark); padding-left: 8px;
  max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gp-bx-tbl td.pos {
  font: 400 10px/1 var(--fi); color: var(--muted); letter-spacing: .04em;
  padding-left: 4px; width: 24px; text-transform: uppercase;
}
.gp-bx-tbl td.pos .pos { /* inline pitcher hand chip */ color: var(--muted); }
.gp-bx-tbl td.ord {
  width: 22px; color: var(--muted); text-align: center;
  font: 500 10px var(--fi); padding-left: 10px;
}
.gp-bx-tbl tbody tr { cursor: pointer; transition: opacity .08s; }
.gp-bx-tbl tbody tr:hover { opacity: .65; }
.gp-bx-tbl tr.sub td { color: var(--sec); font-style: italic; font-weight: 300; }
.gp-bx-tbl tr.sub td.player::before { content: "\u21B3  "; color: var(--muted); }
.gp-bx-tbl tr.active td { background: rgba(252,61,33,.06); }
.gp-bx-tbl tr.active td.player::before { content: "\u25B6 "; color: var(--red); }
.gp-bx-tbl tr.selected td { background: var(--red-d); box-shadow: inset 3px 0 0 var(--red); }

.gp-bx-tbl td.zero { color: var(--muted); }
.gp-bx-tbl td.divider-col,
.gp-bx-tbl th.divider-col {
  width: 1px; background: var(--rules); padding: 0 !important; border-bottom: none;
}

.gp-bx-tbl td.abs-col {
  background: rgba(252,61,33,.02); font-weight: 500;
}
.gp-bx-tbl td.abs-col.won { color: var(--good); }
.gp-bx-tbl td.abs-col.lost { color: var(--red); }
.gp-bx-tbl td.abs-col.muted { color: var(--muted); font-weight: 300; }

.gp-bx-tbl tr.totals td {
  border-top: 1px solid var(--rules); border-bottom: none;
  font-weight: 700; background: var(--bgw);
  padding-top: 7px; padding-bottom: 7px;
}
.gp-bx-tbl tr.totals td.l { padding-left: 8px; }
.gp-bx-tbl tr.totals:hover { opacity: 1; cursor: default; }

/* Notes row (game details — 2B / HBP etc inline) */
.gp-bx-notes {
  padding: 10px 14px; font: 400 11px/1.6 var(--fi); color: var(--sec);
  background: var(--bgw); border: 1px solid var(--rules); border-top: none;
  display: flex; gap: 20px; flex-wrap: wrap;
}
.gp-bx-notes .line strong {
  font: 700 9px/1 var(--fi); letter-spacing: .10em; text-transform: uppercase;
  color: var(--dark); margin-right: 6px;
}
.gp-bx-notes .sep-dot { color: var(--muted); margin: 0 8px; }

/* Catchers callout */
.gp-bx-catchers {
  border: 1px solid var(--rules); background: var(--bg); margin-top: 4px;
}
.gp-bx-catchers-hdr {
  font: 700 9px/1 var(--fi); letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); padding: 10px 14px 6px 14px;
  background: var(--bgw); border-bottom: 1px solid var(--rule);
}
.gp-bx-catchers-row {
  display: flex; align-items: center; gap: 14px; padding: 8px 14px;
  font: 400 11px/1.4 var(--fi); color: var(--dark);
  border-bottom: 1px solid var(--rule);
}
.gp-bx-catchers-row:last-child { border-bottom: none; }
.gp-bx-catchers-row .team {
  font: 700 10px/1 var(--fi); letter-spacing: .08em; width: 42px; color: var(--muted);
}
.gp-bx-catchers-row .name {
  font: 600 12px/1 var(--fi); min-width: 150px; color: var(--dark); cursor: pointer;
}
.gp-bx-catchers-row .name:hover { color: var(--red); }
.gp-bx-catchers-row .stat { color: var(--sec); font-size: 11px; }
.gp-bx-catchers-row .stat strong { color: var(--dark); font-weight: 600; }
.gp-bx-catchers-row .stat.good strong { color: var(--good); }
.gp-bx-catchers-row .stat.bad strong { color: var(--red); }
.gp-bx-catchers-row .stat.ksv { color: var(--red); font-weight: 600; }
.gp-bx-catchers-row .stat.ksv::before { content: "\u26A1 "; font-size: 10px; }
@media (max-width: 900px) {
  .gp .main-grid.triptych { grid-template-columns: 1fr !important; }
}

/* SPRINT-058 Phase 4 — Strip housing (Challenges / Missed / Feed) */
/* Sits between .main-grid.triptych and .gp-below-triptych. Same grammar as
   Live Feed's .lf-feed-strip (.lf-fs-tabs + .lf-fs-scroll + .lf-fs-card). */
.gp .gp-strip-housing { border-top: 1px solid var(--rule); }

/* Feed card: AB-level variant. Same 240×110 shell as Challenge/Missed;
   stacked Batter → prose → Pitcher, prose clamps to one line. */
.lf-fs-body.feed-body {
  flex-direction: column;
  padding: 4px 8px;
  gap: 2px;
  justify-content: space-between;
}
.lf-fs-body.feed-body .lf-fs-side { padding: 0; }
.gp-fs-what {
  font: 500 11px/1.2 var(--fi);
  color: var(--dark);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lf-fs-banner.feed-hr  { background: rgba(46,125,50,.14); color: var(--good); }
.lf-fs-banner.feed-hit { background: rgba(46,125,50,.10); color: var(--good); }
.lf-fs-banner.feed-bb  { background: rgba(180,83,9,.10);  color: var(--warn); }
.lf-fs-banner.feed-k   { background: rgba(252,61,33,.10); color: var(--red); }
.lf-fs-banner.feed-out { background: rgba(120,120,120,.06); color: var(--muted); }

/* ─────────────────────────────────────────────────────────────────────────
   VD feed tile — L-shape with float-right state block
   240×110 card: 24px header (avatar/name/outcome/score) + body with prose
   wrapping around a floated 58×74 state block (diamond/outs/inning/pitcher).
   Scoped tight so the Live page's shared .lf-feed-strip rules don't bleed.
   ───────────────────────────────────────────────────────────────────────── */
.gp .gp-strip-housing .fd-card,
.lf-feed-strip .fd-card {
  flex-shrink: 0;
  width: 240px; height: 110px;
  background: var(--bgw);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--muted);
  border-radius: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  font: 400 11px/1.2 var(--fi);
  color: var(--dark);
  cursor: pointer;
}
.gp .gp-strip-housing .fd-card:hover,
.lf-feed-strip .fd-card:hover { border-color: var(--rules); }
/* Selection — matches .lf-fs-card.selected (tinted bg + red bottom stripe). */
.gp .gp-strip-housing .fd-card.selected,
.lf-feed-strip .fd-card.selected {
  background: rgba(252,61,33,.06);
  box-shadow: inset 0 -2px 0 var(--red);
}
.gp .gp-strip-housing .fd-card.cls-hr,
.gp .gp-strip-housing .fd-card.cls-hit,
.lf-feed-strip .fd-card.cls-hr,
.lf-feed-strip .fd-card.cls-hit { border-left-color: var(--good); }
.gp .gp-strip-housing .fd-card.cls-bb,
.lf-feed-strip .fd-card.cls-bb { border-left-color: var(--warn); }
.gp .gp-strip-housing .fd-card.cls-k,
.lf-feed-strip .fd-card.cls-k { border-left-color: var(--red); }
.gp .gp-strip-housing .fd-card.cls-out,
.lf-feed-strip .fd-card.cls-out { border-left-color: var(--muted); }

.gp .gp-strip-housing .fd-top,
.lf-feed-strip .fd-top {
  height: 24px; flex-shrink: 0;
  display: flex; align-items: center; gap: 5px;
  padding: 0 8px 0 4px;
  border-bottom: 1px solid var(--rule);
}
.gp .gp-strip-housing .fd-av,
.lf-feed-strip .fd-av {
  position: relative;
  width: 18px; height: 18px; border-radius: 50%;
  overflow: hidden;
  background: #ddd; border: 1px solid var(--rules);
  flex-shrink: 0;
}
.gp .gp-strip-housing .fd-av img,
.lf-feed-strip .fd-av img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
/* Team badge — only renders when .multi (Live multi-game feed) */
.gp .gp-strip-housing .fd-av .fd-team-badge,
.lf-feed-strip .fd-av .fd-team-badge {
  display: none;
}
.gp .gp-strip-housing .fd-card.multi .fd-av,
.lf-feed-strip .fd-card.multi .fd-av {
  overflow: visible;
}
.gp .gp-strip-housing .fd-card.multi .fd-av .fd-team-badge,
.lf-feed-strip .fd-card.multi .fd-av .fd-team-badge {
  display: block;
  position: absolute;
  right: -4px; bottom: -3px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--bgw);
  border: 1px solid var(--rules);
  overflow: hidden;
}
.gp .gp-strip-housing .fd-card.multi .fd-av .fd-team-badge img,
.lf-feed-strip .fd-card.multi .fd-av .fd-team-badge img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.gp .gp-strip-housing .fd-name,
.lf-feed-strip .fd-name {
  font: 700 11px/1 var(--fi); letter-spacing: -.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  min-width: 0; flex: 1;
}
.gp .gp-strip-housing .fd-top .otag,
.lf-feed-strip .fd-top .otag {
  font: 700 9px/1 var(--fi); letter-spacing: .06em;
  text-transform: uppercase; flex-shrink: 0;
}
.gp .gp-strip-housing .fd-top .otag.hr,
.gp .gp-strip-housing .fd-top .otag.hit,
.lf-feed-strip .fd-top .otag.hr,
.lf-feed-strip .fd-top .otag.hit { color: var(--good); }
.gp .gp-strip-housing .fd-top .otag.bb,
.lf-feed-strip .fd-top .otag.bb { color: var(--warn); }
.gp .gp-strip-housing .fd-top .otag.k,
.lf-feed-strip .fd-top .otag.k { color: var(--red); }
.gp .gp-strip-housing .fd-top .otag.out,
.lf-feed-strip .fd-top .otag.out { color: var(--sec); }
.gp .gp-strip-housing .fd-score,
.lf-feed-strip .fd-score {
  font: 700 12px/1 var(--fi); font-variant-numeric: tabular-nums;
  flex-shrink: 0; margin-left: 2px;
}
.gp .gp-strip-housing .fd-score.scored,
.lf-feed-strip .fd-score.scored { color: var(--red); }

.gp .gp-strip-housing .fd-body,
.lf-feed-strip .fd-body {
  flex: 1; padding: 3px 0 3px 8px; overflow: hidden;
}

.gp .gp-strip-housing .fd-state,
.lf-feed-strip .fd-state {
  float: right; width: 58px; height: 74px;
  margin: 0 0 0 4px; padding: 3px 6px;
  border-left: 1px solid var(--rule);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 2px;
}
.gp .gp-strip-housing .fd-diamond,
.lf-feed-strip .fd-diamond {
  position: relative; width: 28px; height: 28px; flex-shrink: 0;
}
.gp .gp-strip-housing .fd-diamond .b,
.lf-feed-strip .fd-diamond .b {
  position: absolute; width: 9px; height: 9px;
  background: var(--bgi);
  border: 1px solid rgba(0,0,0,.15);
  transform: rotate(45deg);
}
.gp .gp-strip-housing .fd-diamond .b.on,
.lf-feed-strip .fd-diamond .b.on {
  background: var(--warn); border-color: var(--warn);
}
.gp .gp-strip-housing .fd-diamond .b1,
.lf-feed-strip .fd-diamond .b1 { right: 1px; top: 10px; }
.gp .gp-strip-housing .fd-diamond .b2,
.lf-feed-strip .fd-diamond .b2 { left: 10px; top: 1px; }
.gp .gp-strip-housing .fd-diamond .b3,
.lf-feed-strip .fd-diamond .b3 { left: 1px; top: 10px; }
.gp .gp-strip-housing .fd-outs,
.lf-feed-strip .fd-outs {
  font: 700 9px/1 var(--fi); font-variant-numeric: tabular-nums;
  color: var(--sec);
}
.gp .gp-strip-housing .fd-outs.ended,
.lf-feed-strip .fd-outs.ended { color: var(--red); }
.gp .gp-strip-housing .fd-inn,
.lf-feed-strip .fd-inn {
  font: 400 8px/1 var(--fi); color: var(--muted);
  font-variant-numeric: tabular-nums;
  display: inline-flex; align-items: center; gap: 2px;
}
.gp .gp-strip-housing .fd-inn-arrow,
.lf-feed-strip .fd-inn-arrow {
  font-size: 7px; line-height: 1;
}
.gp .gp-strip-housing .fd-pitcher,
.lf-feed-strip .fd-pitcher {
  font: 400 8px/1 var(--fi); color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 48px; text-align: center;
}
.gp .gp-strip-housing .fd-prose,
.lf-feed-strip .fd-prose {
  font: 400 11px/1.35 var(--fi); color: var(--dark);
  display: -webkit-box;
  -webkit-line-clamp: 5; -webkit-box-orient: vertical;
  overflow: hidden;
  padding-right: 8px;
}

/* Col 1: zone + edge zoom */
.gp-zone-col { border-right: 1px solid var(--rule); display: flex; flex-direction: column; }
.gp-zone-hdr { padding: 10px 16px; border-bottom: 1px solid var(--rule); display: flex; align-items: center; gap: 10px; background: var(--bg); }
.gp-zone-hdr-title { font: 600 10px/1 var(--fi); letter-spacing: .10em; text-transform: uppercase; color: var(--dark); }
.gp-zone-scatter-wrap { display: flex; align-items: center; justify-content: center; padding: 20px; background: var(--bg); border-bottom: 1px solid var(--rule); }
#gp-zone-svg { display: block; cursor: crosshair; }
.gp-zone-label { padding: 6px 16px 8px; font: 300 9px/1 var(--fi); color: var(--muted); letter-spacing: .04em; border-bottom: 1px solid var(--rule); }

/* 3D viewer button */
.gp-3d-btn {
  position: absolute; bottom: 8px; right: 8px; z-index: 10;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 8px 4px 6px;
  background: var(--bg); color: var(--sec);
  border: 1px solid var(--rules); border-radius: 0; cursor: pointer;
  font: 600 9px/1 var(--fi); letter-spacing: .10em; text-transform: uppercase;
  transition: color .15s, border-color .15s;
}
.gp-3d-btn:hover { color: var(--text); border-color: var(--text); }
.gp-3d-btn svg { flex-shrink: 0; width: 12px; height: 12px; }

/* Single-pitch 3D mini button — inline in meta rows, absolute in event detail */
.gp-3d-mini {
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  width: 18px; height: 18px; padding: 0;
  background: var(--bg); color: var(--sec);
  border: 1px solid var(--rules); border-radius: 0; cursor: pointer;
  transition: color .15s, border-color .15s;
}
.gp-3d-mini:first-of-type { margin-left: auto; }
.gp-3d-mini + .gp-3d-mini { margin-left: -2px; }
.gp-3d-mini:hover:not(:disabled) { color: var(--text); border-color: var(--text); }
.gp-3d-mini:disabled, .gp-3d-mini.disabled { opacity: .3; cursor: default; pointer-events: none; }
.gp-3d-mini svg { width: 10px; height: 10px; flex-shrink: 0; }
/* Action row at bottom of pitch detail / ABS event detail */
.le-action-row { display: flex; justify-content: flex-end; padding: 6px 14px 8px; border-top: 1px solid var(--rule); }
.le-action-btns { display: flex; gap: 4px; }

/* ── Video Modal ─────────────────────────────────────────────────── */
.pi-vm-overlay {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .2s ease;
}
.pi-vm-overlay.open { opacity: 1; }
.pi-vm-backdrop {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, .65);
}
.pi-vm-container {
  position: relative; z-index: 1;
  width: 720px; max-width: 92vw;
  background: var(--bg);
  border: 1px solid var(--rules);
  transform: translateY(12px) scale(.97);
  transition: transform .2s ease;
}
.pi-vm-overlay.open .pi-vm-container {
  transform: translateY(0) scale(1);
}
.pi-vm-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--rules);
}
.pi-vm-title { display: flex; flex-direction: column; gap: 1px; }
.pi-vm-matchup {
  font: 600 11px/1.2 var(--fi);
  color: var(--text);
  letter-spacing: .02em;
}
.pi-vm-sub {
  font: 400 9px/1.2 var(--fi);
  color: var(--sec);
  letter-spacing: .03em;
  text-transform: uppercase;
}
.pi-vm-controls { display: flex; align-items: center; gap: 6px; }
.pi-vm-popout, .pi-vm-close {
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 1px solid var(--rules);
  color: var(--sec); cursor: pointer;
  transition: color .15s, border-color .15s;
}
.pi-vm-popout {
  width: 26px; height: 26px; padding: 0;
}
.pi-vm-close {
  width: 26px; height: 26px; padding: 0;
  font-size: 16px; line-height: 1;
}
.pi-vm-popout:hover, .pi-vm-close:hover {
  color: var(--text); border-color: var(--text);
}
.pi-vm-body { position: relative; padding: 0; background: #000; }
.pi-vm-video {
  display: block; width: 100%; max-height: 70vh;
  background: #000; outline: none;
}
.pi-vm-loading {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 300px;
  font: 400 12px/1 var(--fi); color: #888;
  letter-spacing: .04em;
}

/* Zone play button (replay well) — sits left of 3D button */
.gp-play-btn.gp-3d-btn {
  right: 58px;
}

/* Zone search button + input */
.zone-search-btn {
  position: absolute; bottom: 8px; right: 90px; z-index: 10;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 4px 6px;
  background: var(--bg); color: var(--sec);
  border: 1px solid var(--rules); border-radius: 0; cursor: pointer;
  font: 600 9px/1 var(--fi);
  transition: color .15s, border-color .15s;
}
.zone-search-btn:hover, .zone-search-btn.active { color: var(--text); border-color: var(--text); }
.zone-search-btn svg { flex-shrink: 0; width: 12px; height: 12px; }

.zone-search-input {
  position: absolute; bottom: 8px; right: 116px; z-index: 10;
  width: 0; padding: 0; opacity: 0;
  border: 1px solid var(--rules); border-radius: 0;
  background: var(--bg); color: var(--text);
  font: 400 11px/20px var(--fi);
  transition: width .2s, opacity .2s, padding .2s;
  outline: none; height: 22px; box-sizing: border-box;
}
.zone-search-input.open {
  width: 180px; padding: 0 8px; opacity: 1;
}
.zone-search-input::placeholder { color: var(--muted); font-size: 10px; }

/* Zone search chips */
.zone-chip-bar {
  display: none; flex-wrap: wrap; gap: 6px;
  padding: 6px 16px 8px; border-bottom: 1px solid var(--rule);
}
.zone-search-chip {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 2px 4px 2px 8px; border: 1px solid var(--rules);
  font: 500 10px/1 var(--fi); letter-spacing: .02em;
  color: var(--muted); cursor: pointer; user-select: none;
  transition: color .15s, border-color .15s, opacity .15s;
}
.zone-search-chip.on { color: var(--text); border-color: var(--text); }
.zone-search-chip:not(.on) { opacity: .4; }
.zsc-label { padding: 2px 0; }
.zsc-x {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; font-size: 13px; line-height: 1;
  color: var(--muted); cursor: pointer; margin-left: 2px;
}
.zsc-x:hover { color: var(--red); }

/* Edge zoom */
.gp .ez-section { flex: 1; display: flex; flex-direction: column; }
.gp .ez-hdr { padding: 8px 16px; border-bottom: 1px solid var(--rule); display: flex; align-items: center; justify-content: space-between; background: var(--bgw); flex-shrink: 0; }
.gp .ez-hdr-title { font: 600 9px/1 var(--fi); letter-spacing: .10em; text-transform: uppercase; color: var(--dark); }
.gp .ez-hdr-meta { font: 300 9px/1 var(--fi); color: var(--muted); }
.gp .ez-render { flex: 1; min-height: 160px; background: var(--bg); overflow: hidden; }
.gp .ez-ghost { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 28px; opacity: .15; height: 100%; }
.gp .ez-stats { display: flex; align-items: center; border-top: 1px solid var(--rule); flex-shrink: 0; }
.gp .ez-stat { flex: 1; padding: 8px 12px; border-right: 1px solid var(--rule); }
.gp .ez-stat:last-child { border-right: none; }
.gp .ez-val { font: 300 18px/1 var(--fi); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.gp .ez-val.ov { color: var(--good); }
.gp .ez-val.up { color: var(--red); }
.gp .ez-val.mi { color: var(--warn); }
.gp .ez-lbl { font: 500 8px/1 var(--fi); letter-spacing: .10em; text-transform: uppercase; color: var(--muted); margin-top: 3px; }

/* Col 2: pitch context + last event + trajectory */
.gp .event-col { border-right: 1px solid var(--rule); display: flex; flex-direction: column; }
.gp .situation { border-bottom: 1px solid var(--rule); display: flex; flex-direction: column; flex-shrink: 0; }
.gp .situation-hdr { padding: 9px 14px; border-bottom: 1px solid var(--rule); background: var(--bgw); display: flex; align-items: center; justify-content: space-between; }
.gp .situation-title { font: 600 10px/1 var(--fi); letter-spacing: .10em; text-transform: uppercase; color: var(--dark); }
.gp .situation-body { display: flex; gap: 0; }
.gp .park-minimap-wrap { flex-shrink: 0; padding: 4px 10px; border-right: 1px solid var(--rule); display: flex; flex-direction: column; gap: 2px; align-items: center; }
.gp .runners-diamond { line-height: 0; }
.gp .game-state { display: flex; flex-direction: column; flex: 1; }
.gp .gs-row { display: flex; justify-content: space-between; align-items: baseline; padding: 6px 12px; border-bottom: 1px solid var(--rule); }
.gp .gs-row:last-child { border-bottom: none; }
.gp .gs-lbl { font: 500 8px/1 var(--fi); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.gp .gs-val { font: 400 12px/1 var(--fi); color: var(--dark); font-variant-numeric: tabular-nums; }
.gp .gs-val.big { font: 400 12px/1 var(--fi); font-variant-numeric: tabular-nums; }
.gp .count-dots { display: flex; align-items: center; gap: 3px; }
.gp .count-ball { width: 8px; height: 8px; border-radius: 50%; background: var(--bgi); border: 1.5px solid rgba(0,0,0,.18); }
.gp .count-ball.on { background: var(--warn); border-color: var(--warn); }
.gp .count-strike { width: 8px; height: 8px; border-radius: 50%; background: var(--bgi); border: 1.5px solid rgba(0,0,0,.18); }
.gp .count-strike.on { background: var(--red); border-color: var(--red); }
.gp .count-sep { width: 1px; height: 10px; background: var(--rule); margin: 0 2px; }
.gp .out-dots { display: flex; gap: 3px; }
.gp .out-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--bgi); border: 1.5px solid rgba(0,0,0,.18); }
.gp .out-dot.on { background: var(--dark); border-color: var(--dark); }
.gp .matchup-strip { padding: 8px 12px; border-bottom: 1px solid var(--rule); background: var(--bgw); }
.gp .matchup-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 2px; }
.gp .matchup-row:last-child { margin-bottom: 0; }
.gp .matchup-lbl { font: 500 8px/1 var(--fi); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.gp .matchup-name { font: 600 11px/1 var(--fi); color: var(--dark); }

/* Last ABS event */
.gp .le-hdr { padding: 9px 14px; border-bottom: 1px solid var(--rule); background: var(--bgw); display: flex; align-items: center; justify-content: space-between; }
.gp .le-hdr-title { font: 600 10px/1 var(--fi); letter-spacing: .10em; text-transform: uppercase; color: var(--dark); }
.gp .le-empty { padding: 16px 14px; font: 500 9px/1 var(--fi); letter-spacing: .12em; text-transform: uppercase; color: rgba(0,0,0,.18); text-align: center; }
.gp .le-body { display: none; }
.gp .le-body.show { display: block; }
.gp .le-ruling-row { padding: 10px 14px 7px; border-bottom: 1px solid var(--rule); }
.gp .le-ruling { font: 800 20px/1 var(--fi); letter-spacing: -.02em; }
.gp .le-ruling.ov { color: var(--good); }
.gp .le-ruling.up { color: var(--red); }
.gp .le-ruling.mi { color: var(--warn); }
.gp .le-who { font: 300 10px/1 var(--fi); color: var(--muted); margin-top: 3px; }
.gp .le-row { display: flex; justify-content: space-between; align-items: baseline; padding: 5px 14px; border-bottom: 1px solid var(--rule); }
.gp .le-row:last-child { border-bottom: none; }
.gp .le-rl { font: 500 8px/1 var(--fi); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.gp .le-rv { font: 400 11px/1 var(--fi); color: var(--dark); font-variant-numeric: tabular-nums; text-align: right; }
.gp .le-rv.hi { color: var(--red); font-weight: 600; }

/* Trajectory */
.gp .traj-section { display: flex; flex-direction: column; }
.gp .traj-stats { display: grid; grid-template-columns: repeat(3,1fr); background: var(--bgw); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.gp .traj-stat { padding: 7px 10px; border-right: 1px solid var(--rule); }
.gp .traj-stat:last-child { border-right: none; }
.gp .traj-stat-val { font: 300 13px/1 var(--fi); color: var(--dark); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.gp .traj-stat-val.accent { color: var(--warn); font-weight: 500; }
.gp .traj-stat-lbl { font: 500 7px/1 var(--fi); letter-spacing: .10em; text-transform: uppercase; color: var(--muted); margin-top: 3px; }
.gp .traj-view { padding: 10px 14px; border-bottom: 1px solid var(--rule); }
.gp .traj-view:last-child { border-bottom: none; }
.gp .traj-view-lbl { font: 500 8px/1 var(--fi); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); display: block; margin-bottom: 8px; }
.gp .traj-view svg { display: block; width: 100%; height: auto; }

/* Col 3: lineup + challenges */
.gp .box-col { display: flex; flex-direction: column; }
.gp .box-col > :last-child { flex: 1; overflow-y: auto; min-height: 0; }
.gp .box-col::-webkit-scrollbar { width: 3px; }
.gp .box-col::-webkit-scrollbar-thumb { background: rgba(0,0,0,.15); }
.gp .lineup-always { border-bottom: 1px solid var(--rules); }
.gp .lineup-always-tabs { display: flex; border-bottom: 1px solid var(--rules); }
.gp .lineup-team-tab {
  flex: 1; padding: 8px 0; text-align: center;
  font: 600 9px/1 var(--fi); letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: all 80ms;
}
.gp .lineup-team-tab.on { color: var(--dark); border-bottom-color: var(--red); }
.gp .lineup-wrap { display: none; flex-direction: column; }
.gp .lineup-wrap.show { display: flex; }
.gp .lineup-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 14px; border-bottom: 1px solid var(--rule);
  transition: background 80ms; cursor: pointer;
}
.gp .lineup-row:hover { background: var(--bgw); }
.gp .lineup-row.active { background: var(--bgw); border-left: 2px solid var(--red); padding-left: 12px; }
.gp .lineup-row.sub { padding-left: 28px; opacity: .55; border-bottom-style: dashed; }
.gp .lineup-row.sub .bat-order { width: 0; min-width: 0; padding: 0; }
.gp .lineup-row.out { opacity: .45; }
.gp .bat-order { font: 300 10px/1 var(--fi); color: var(--muted); width: 12px; text-align: center; flex-shrink: 0; }
.gp .batter-name { font: 600 10px/1 var(--fi); color: var(--dark); flex: 1; }
.gp .batter-pos { font: 500 8px/1 var(--fi); color: var(--muted); width: 20px; }
.gp .batter-line { font: 300 10px/1 var(--fi); font-variant-numeric: tabular-nums; color: var(--dark); }
.gp .batter-abs { display: flex; gap: 2px; align-items: center; }
.gp .batter-abs-dot { border-radius: 50%; }
.gp .batter-abs-dot.ov { width: 7px; height: 7px; background: var(--good); }
.gp .batter-abs-dot.up { width: 7px; height: 7px; background: var(--red); }
.gp .batter-abs-dot.mi { width: 4px; height: 4px; background: var(--warn); }
.gp .pitcher-section { border-top: 1px solid var(--rules); }
.gp .pitcher-hdr { padding: 9px 14px; border-bottom: 1px solid var(--rule); background: var(--bgw); display: flex; align-items: center; }
.gp .pitcher-hdr-title { font: 600 10px/1 var(--fi); letter-spacing: .10em; text-transform: uppercase; color: var(--dark); }
.gp .pitcher-row { display: flex; align-items: center; gap: 8px; padding: 6px 14px; border-bottom: 1px solid var(--rule); }
.gp .pitcher-row:last-child { border-bottom: none; }
.gp .pitcher-row.active { background: var(--bgw); border-left: 2px solid var(--red); padding-left: 12px; }
.gp .pitcher-name { font: 600 10px/1 var(--fi); color: var(--dark); flex: 1; }
.gp .pitcher-hand { font: 500 8px/1 var(--fi); color: var(--muted); }
.gp .pitcher-line { font: 300 10px/1 var(--fi); font-variant-numeric: tabular-nums; color: var(--dark); }
.gp .lineup-empty { padding: 16px 14px; font: 400 11px/1.4 var(--fi); color: var(--muted); text-align: center; }

/* Challenge cards in col 3 */
.gp .chal-missed-tabs { display: flex; border-bottom: 1px solid var(--rules); background: var(--bgw); }
.gp .cm-tab {
  flex: 1; padding: 8px 0; text-align: center;
  font: 600 9px/1 var(--fi); letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: all 80ms;
}
.gp .cm-tab.on { color: var(--dark); border-bottom-color: var(--red); }
.gp .cm-panel { display: none; overflow-y: auto; max-height: 400px; }
.gp .cm-panel::-webkit-scrollbar { width: 3px; }
.gp .cm-panel::-webkit-scrollbar-thumb { background: rgba(0,0,0,.15); }
.gp .cm-panel.show { display: block; }
.gp .chal-team-header { padding: 8px 14px; border-bottom: 1px solid var(--rule); display: flex; align-items: center; justify-content: space-between; background: var(--bgw); }
.gp .chal-team-name { font: 600 10px/1 var(--fi); color: var(--dark); }
.gp .chal-team-record { font: 300 9px/1 var(--fi); color: var(--muted); }
.gp .chal-pips-row { display: flex; gap: 4px; }
.gp .cpip { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--rules); }
.gp .cpip.won { background: var(--good); border-color: var(--good); }
.gp .cpip.lost { background: var(--red); border-color: var(--red); }
.gp .chal-card {
  padding: 10px 14px; border-bottom: 1px solid var(--rule);
  cursor: pointer; transition: background 80ms; display: flex; gap: 10px; align-items: flex-start;
}
.gp .chal-card:hover { background: var(--bgw); }
.gp .chal-card-zone { flex-shrink: 0; }
.gp .chal-card-body { flex: 1; min-width: 0; }
.gp .chal-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.gp .chal-card-ruling { font: 700 11px/1 var(--fi); }
.gp .chal-card-ruling.ov { color: var(--good); }
.gp .chal-card-ruling.up { color: var(--red); }
.gp .chal-card-badge { font: 600 8px/1 var(--fi); letter-spacing: .08em; text-transform: uppercase; padding: 2px 6px; border: 1px solid; }
.gp .chal-card-badge.ov { color: var(--good); border-color: rgba(46,125,50,.3); background: rgba(46,125,50,.06); }
.gp .chal-card-badge.up { color: var(--red); border-color: rgba(252,61,33,.3); background: rgba(252,61,33,.06); }
.gp .chal-card-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 2px; }
.gp .chal-card-rl { font: 500 8px/1 var(--fi); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); flex-shrink: 0; }
.gp .chal-card-rv { font: 400 10px/1 var(--fi); color: var(--dark); text-align: right; padding-left: 6px; }
.gp .chal-card-rv.ov { color: var(--good); font-weight: 600; }
.gp .chal-card-rv.up { color: var(--red); font-weight: 600; }
.gp .chal-card-meta { font: 300 8px/1.4 var(--fi); color: var(--muted); margin-top: 4px; padding-top: 3px; border-top: 1px solid var(--rule); display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.gp .chal-card-stats { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.gp .chal-card-inn { font: 700 8px/1 var(--fi); color: var(--dark); }
.gp .missed-item { padding: 9px 14px; border-bottom: 1px solid var(--rule); cursor: pointer; transition: background 80ms; }
.gp .missed-item:hover { background: var(--bgw); }
.gp .missed-item-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 3px; }
.gp .missed-item-player { font: 600 10px/1 var(--fi); color: var(--dark); }
.gp .missed-item-edge { font: 600 10px/1 var(--fi); color: var(--warn); font-variant-numeric: tabular-nums; }
.gp .missed-item-inning { font: 700 10px/1 var(--fi); color: var(--dark); letter-spacing: -.01em; }
.gp .missed-item-badge { font: 600 8px/1 var(--fi); letter-spacing: .06em; text-transform: uppercase; padding: 2px 6px; border: 1px solid rgba(180,83,9,.3); color: var(--warn); background: rgba(180,83,9,.06); }
.gp .missed-item-meta { font: 300 9px/1 var(--fi); color: var(--muted); display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.gp .missed-item-stats { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.gp .missed-item-inn { font: 700 9px/1 var(--fi); color: var(--dark); }

/* Play Feed */
.gp .feed-inn-hdr {
  padding: 6px 14px;
  font: 700 8px/1 var(--fi);
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--bgw);
  border-bottom: 1px solid var(--rule);
  position: sticky; top: 0; z-index: 1;
}
.gp .feed-tile {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--rule);
  cursor: pointer;
  transition: background 80ms;
  flex-wrap: wrap;
}
.gp .feed-tile:hover { background: var(--bgw); }
.gp .feed-tile-left {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 28px;
}
.gp .feed-bases .base-bg { fill: none; }
.gp .feed-bases .base { fill: none; stroke: var(--rule); stroke-width: 1; }
.gp .feed-bases .base.on { fill: var(--dark); stroke: var(--dark); }
.gp .feed-situation { display: flex; flex-direction: column; gap: 2px; align-items: center; }
.gp .feed-situation .count-dots { gap: 1px; }
.gp .feed-situation .count-dots .count-ball,
.gp .feed-situation .count-dots .count-strike,
.gp .feed-situation .count-dots .count-sep { width: 4px; height: 4px; }
.gp .feed-situation .out-dots { gap: 1px; }
.gp .feed-situation .out-dots .out-dot { width: 4px; height: 4px; }
.gp .feed-tile-body { flex: 1; min-width: 0; }
.gp .feed-tile-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 1px;
}
.gp .feed-batter { font: 600 10px/1.2 var(--fi); color: var(--dark); }
.gp .feed-pitches { font: 300 8px/1 var(--fi); color: var(--muted); font-variant-numeric: tabular-nums; }
.gp .feed-pitcher { font: 300 9px/1.2 var(--fi); color: var(--muted); margin-bottom: 2px; }
.gp .feed-outcome {
  font: 400 9px/1.3 var(--fi);
  color: var(--dark);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gp .feed-tile-actions {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
}
.gp .feed-video-btn {
  display: flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  border: 1px solid var(--rule);
  background: none;
  color: var(--dark);
  cursor: pointer;
  transition: background 80ms, color 80ms;
}
.gp .feed-video-btn:hover { background: var(--red); color: #fff; border-color: var(--red); }
}

/* Inning grid */
.gp .inning-shell { border-bottom: 1px solid var(--rule); }
.gp .inning-hdr { padding: 10px 32px; border-bottom: 1px solid var(--rule); background: var(--bgw); display: flex; align-items: center; justify-content: space-between; }
.gp .inning-hdr-title { font: 600 10px/1 var(--fi); letter-spacing: .10em; text-transform: uppercase; color: var(--dark); }
.gp .inning-grid { display: grid; }
.gp .ig-col { border-right: 1px solid var(--rule); display: flex; flex-direction: column; }
.gp .ig-col:last-child { border-right: none; }
.gp .ig-inn-hdr { font: 500 8px/1 var(--fi); letter-spacing: .10em; text-transform: uppercase; color: rgba(0,0,0,.28); text-align: center; padding: 5px 0 4px; border-bottom: 1px solid var(--rule); background: var(--bgw); }
.gp .ig-half { min-height: 44px; border-bottom: 1px solid var(--rule); display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 3px; padding: 5px 3px; position: relative; }
.gp .ig-half:last-child { border-bottom: none; }
.gp .ig-half-lbl { position: absolute; top: 2px; left: 3px; font: 500 7px/1 var(--fi); letter-spacing: .06em; text-transform: uppercase; color: rgba(0,0,0,.18); }
.gp .ig-dot { border-radius: 50%; cursor: pointer; transition: opacity 80ms; position: relative; flex-shrink: 0; }
.gp .ig-dot:hover { opacity: .7; }
.gp .ig-dot.ov { background: var(--good); }
.gp .ig-dot.up { background: var(--red); }
.gp .ig-dot.mi { background: var(--warn); }

/* Umpire section */
.gp .ump-section { padding: 20px 32px; border-bottom: 1px solid var(--rule); }
.gp .ump-section-hdr { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.gp .ump-section-title { font: 500 9px/1 var(--fi); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.gp .ump-body { display: flex; gap: 24px; align-items: flex-start; }
.gp .ump-main { flex: 1; }
.gp .ump-name-big { font: 800 22px/1 var(--fi); letter-spacing: -.02em; margin-bottom: 4px; }
.gp .ump-game { font: 300 10px/1 var(--fi); color: var(--muted); margin-bottom: 12px; }
.gp .ump-stats { display: flex; gap: 0; border: 1px solid var(--rule); }
.gp .ump-stat { flex: 1; padding: 10px 12px; border-right: 1px solid var(--rule); }
.gp .ump-stat:last-child { border-right: none; }
.gp .ump-stat-val { font: 300 24px/1 var(--fi); letter-spacing: -.02em; font-variant-numeric: tabular-nums; margin-bottom: 0; }
.gp .ump-stat-val.bad { color: var(--red); }
.gp .ump-stat-val.good { color: var(--good); }
.gp .ump-stat-lbl { font: 500 8px/1 var(--fi); letter-spacing: .10em; text-transform: uppercase; color: var(--muted); margin-top: 3px; margin-bottom: 0; }
.gp .ump-bar-section { width: 180px; }
.gp .ump-bar-title { font: 500 8px/1 var(--fi); letter-spacing: .10em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.gp .ump-bar-track { height: 4px; background: var(--bgi); margin-bottom: 5px; }
.gp .ump-bar-fill { height: 4px; }
.gp .ump-bar-fill.bad { background: var(--red); }
.gp .ump-bar-fill.avg { background: var(--warn); }
.gp .ump-bar-fill.good { background: var(--good); }
.gp .ump-bar-labels { display: flex; justify-content: space-between; font: 300 8px/1 var(--fi); color: var(--muted); }
.gp .ump-narrative {
  margin-top: 10px; padding: 10px 12px;
  border: 1px solid var(--rule); border-left: 3px solid var(--warn);
  font: 300 11px/1.6 var(--fi); color: var(--sec); background: var(--bgw);
}


/* ==========================================================================
   PITCH CARD — Shareable 390px card (SPRINT-025)
   ========================================================================== */

/* Card shell */
.pitch-card{width:390px;max-width:100%;margin:24px auto;background:var(--bg);border:1px solid var(--rules);overflow:hidden;}

/* 1. Site header mini */
.card-site-hdr{height:36px;background:#111;display:flex;align-items:center;padding:0 12px;gap:8px;}
.card-site-hdr .logo-r{font:800 15px/1 var(--fi);color:var(--red);letter-spacing:-.02em;}
.card-site-hdr .logo-l{font:300 15px/1 var(--fi);color:rgba(255,255,255,.85);letter-spacing:-.01em;}
.card-site-hdr-right{margin-left:auto;display:flex;align-items:center;gap:8px;}
.card-live-dot{width:6px;height:6px;border-radius:50%;background:var(--good);}
.card-badge{font:600 8px/1 var(--fi);letter-spacing:.08em;text-transform:uppercase;padding:3px 7px;border:1px solid;}
.card-badge.ov{color:var(--good);border-color:rgba(46,125,50,.35);background:rgba(46,125,50,.06);}
.card-badge.up{color:var(--red);border-color:rgba(252,61,33,.35);background:rgba(252,61,33,.06);}
.card-badge.mi{color:var(--warn);border-color:rgba(180,83,9,.35);background:rgba(180,83,9,.06);}

/* 2. Score band */
.card-score-band{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;border-bottom:1px solid var(--rule);background:var(--bg);}
.card-team-side{display:flex;align-items:center;gap:8px;padding:10px 12px;}
.card-team-side.home{flex-direction:row-reverse;padding-right:12px;}
.card-team-logo{width:28px;height:28px;object-fit:contain;transition:filter 150ms;}
.card-team-logo.grey{filter:grayscale(100%) opacity(.45);}
.card-team-logo:hover{filter:none;}
.card-team-logo.hide{display:none;}
.card-team-text{display:flex;flex-direction:column;gap:2px;}
.card-team-abbr{font:800 18px/1 var(--fi);letter-spacing:-.03em;}
.card-team-full{font:300 8px/1 var(--fi);color:var(--muted);}
.card-score-center{display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 16px;}
.card-score-nums{display:flex;align-items:baseline;}
.card-score-num{font:300 38px/1 var(--fi);letter-spacing:-.04em;font-variant-numeric:tabular-nums;min-width:32px;text-align:center;}
.card-score-num.win{font-weight:600;}
.card-score-num.lose{color:rgba(0,0,0,.2);}
.card-score-dash{font:300 22px/1 var(--fi);color:rgba(0,0,0,.15);padding:0 4px;}
.card-score-meta{font:300 8px/1 var(--fi);color:var(--muted);letter-spacing:.02em;}

/* 3. Live situation bar */
.card-sit-bar{display:flex;align-items:stretch;border-bottom:1px solid var(--rules);background:var(--bgw);}
.card-sit-item{display:flex;align-items:center;gap:5px;padding:5px 8px;border-right:1px solid var(--rule);flex-shrink:0;}
.card-sit-item.players{flex-direction:column;align-items:flex-start;gap:3px;flex:1;min-width:0;max-width:120px;}
.card-sit-lbl{font:500 7px/1 var(--fi);letter-spacing:.10em;text-transform:uppercase;color:var(--muted);}
.card-sit-val{font:600 9px/1 var(--fi);color:var(--dark);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;}
.card-sit-player-row{display:flex;align-items:center;gap:4px;width:100%;min-width:0;}
.card-sit-player-lbl{font:500 7px/1 var(--fi);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);flex-shrink:0;}
.card-sit-player-name{font:600 9px/1 var(--fi);color:var(--dark);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0;}
.card-cdots{display:flex;align-items:center;gap:2px;}
.card-cb{width:5px;height:5px;border-radius:50%;background:var(--bgi);border:1px solid rgba(0,0,0,.18);}
.card-cb.on{background:var(--warn);border-color:var(--warn);}
.card-cs{width:5px;height:5px;border-radius:50%;background:var(--bgi);border:1px solid rgba(0,0,0,.18);}
.card-cs.on{background:var(--red);border-color:var(--red);}
.card-csep{width:1px;height:7px;background:var(--rule);margin:0 1px;}
.card-od{width:5px;height:5px;border-radius:50%;background:var(--bgi);border:1px solid rgba(0,0,0,.18);}
.card-od.on{background:var(--dark);border-color:var(--dark);}

/* 4. Hero: zone + edge zoom */
.card-hero{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--rule);}
.card-zone-col{border-right:1px solid var(--rule);display:flex;flex-direction:column;align-items:center;padding:8px 6px 6px;gap:3px;}
.card-zone-sub{font:300 7px/1 var(--fi);color:var(--muted);letter-spacing:.04em;}
.card-ez-col{display:flex;flex-direction:column;}
.card-ez-lbl{font:500 7px/1 var(--fi);letter-spacing:.10em;text-transform:uppercase;color:var(--muted);margin-bottom:5px;}
.card-ez-render{flex:1;min-height:60px;}
.card-ez-stats{display:flex;border-top:1px solid var(--rule);margin-top:6px;}
.card-ez-stat{flex:1;padding:5px 6px;border-right:1px solid var(--rule);}
.card-ez-stat:last-child{border-right:none;}
.card-ez-val{font:300 13px/1 var(--fi);font-variant-numeric:tabular-nums;}
.card-ez-val.accent{color:var(--warn);font-weight:500;}
.card-ez-val.ov{color:var(--good);font-weight:600;}
.card-ez-val.up{color:var(--red);font-weight:600;}
.card-ez-slbl{font:500 6px/1 var(--fi);letter-spacing:.10em;text-transform:uppercase;color:var(--muted);margin-top:2px;}

/* 5. Call rows */
.card-call-rows{border-bottom:1px solid var(--rule);}
.card-call-row{display:flex;justify-content:space-between;align-items:baseline;padding:4px 12px;border-bottom:1px solid var(--rule);}
.card-call-row:last-child{border-bottom:none;}
.card-cr-lbl{font:500 7px/1 var(--fi);letter-spacing:.07em;text-transform:uppercase;color:var(--muted);}
.card-cr-val{font:400 9px/1 var(--fi);color:var(--dark);text-align:right;}
.card-cr-val.ov{color:var(--good);font-weight:700;}
.card-cr-val.up{color:var(--red);font-weight:700;}

/* 6. WP strip */
.card-wp-strip{border-bottom:1px solid var(--rule);background:var(--bgw);position:relative;overflow:hidden;}
.card-wp-strip-lbl{position:absolute;top:4px;left:8px;font:500 6px/1 var(--fi);letter-spacing:.10em;text-transform:uppercase;color:rgba(0,0,0,.22);z-index:1;}

/* 7. Challenger strip */
.card-challenger-strip{display:flex;align-items:stretch;gap:0;border-bottom:1px solid var(--rules);background:var(--bg);}
.card-challenger-photo{flex-shrink:0;width:64px;overflow:hidden;background:var(--bgi);position:relative;}
.card-challenger-photo img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block;filter:grayscale(30%) contrast(1.05);}
.card-challenger-photo-fallback{width:64px;height:100%;min-height:64px;background:var(--bgw);display:flex;align-items:center;justify-content:center;font:800 18px/1 var(--fi);color:var(--dark);letter-spacing:-.02em;border-right:1px solid var(--rule);}
.card-challenger-main{flex:1;padding:8px 10px;border-right:1px solid var(--rule);display:flex;flex-direction:column;gap:6px;}
.card-challenger-name-row{display:flex;align-items:center;gap:6px;}
.card-challenger-name{font:800 14px/1 var(--fi);color:var(--dark);letter-spacing:-.02em;}
.card-challenger-pos{font:700 7px/1 var(--fi);letter-spacing:.08em;padding:2px 5px;background:var(--bgi);color:var(--muted);border:1px solid var(--rule);}
.card-ch-stat-line{display:flex;gap:12px;margin-top:5px;}
.card-ch-stat-item{display:flex;flex-direction:column;gap:1px;}
.card-ch-stat-val{font:700 12px/1 var(--fi);font-variant-numeric:tabular-nums;color:var(--dark);}
.card-ch-stat-val.good{color:var(--good);}
.card-ch-stat-val.warn{color:var(--warn);}
.card-ch-stat-lbl{font:300 7px/1 var(--fi);color:var(--muted);}
.card-challenger-right{flex-shrink:0;width:96px;padding:8px 10px;display:flex;flex-direction:column;gap:5px;justify-content:center;}
.card-ch-trend-lbl{font:500 7px/1 var(--fi);letter-spacing:.10em;text-transform:uppercase;color:var(--muted);}
.card-ch-peer-wrap{margin-top:0;}
.card-ch-peer-track{height:3px;background:var(--bgi);margin:3px 0;}
.card-ch-peer-fill{height:3px;background:var(--good);}
.card-ch-peer-lbl{font:300 7px/1 var(--fi);color:var(--muted);}
.card-ch-edge-dist{margin-top:auto;padding-top:5px;border-top:1px solid var(--rule);}
.card-ch-edge-lbl{font:300 7px/1.3 var(--fi);color:var(--muted);margin-bottom:3px;}
.card-ch-edge-this{font:600 7px/1 var(--fi);color:var(--warn);}
.card-ch-edge-svg{display:block;}
.card-ch-innings{margin-top:4px;}
.card-ch-innings-lbl{font:500 7px/1 var(--fi);letter-spacing:.10em;text-transform:uppercase;color:var(--muted);margin-bottom:3px;}
.card-ch-innings-grid{display:flex;gap:1px;}
.card-ch-inn-col{display:flex;flex-direction:column;gap:1px;align-items:center;}
.card-ch-inn-n{font:300 5.5px/1 var(--fi);color:rgba(0,0,0,.2);margin-bottom:1px;}
.card-ch-inn-half{width:9px;height:9px;border-radius:0;background:var(--bgi);display:flex;align-items:center;justify-content:center;}
.card-ch-inn-dot{width:5px;height:5px;border-radius:50%;}
.card-ch-inn-dot.ov{background:var(--good);}
.card-ch-inn-dot.up{background:var(--red);}
.card-ch-inn-dot.mi{background:var(--warn);}
.card-ch-inn-half.this-call{box-shadow:0 0 0 1.5px var(--dark);}

/* 8. Grades */
.card-grades{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--rule);align-items:start;}
.card-grade-block{padding:7px 10px;border-right:1px solid var(--rule);display:flex;flex-direction:column;}
.card-grade-block:last-child{border-right:none;}
.card-grade-lbl{font:500 7.5px/1.3 var(--fi);color:var(--muted);margin-bottom:4px;}
.card-grade-val{font:700 13px/1 var(--fi);font-variant-numeric:tabular-nums;}
.card-grade-val.pos{color:var(--good);}
.card-grade-val.neg{color:var(--red);}
.card-grade-val.neu{color:var(--dark);}
.card-grade-desc{font:300 7px/1.4 var(--fi);color:var(--muted);margin-top:2px;}
.card-g3-spark{display:block;margin-top:4px;}
.card-grade-viz{display:block;margin-top:5px;}
.card-grade-letter{font:800 18px/1 var(--fi);letter-spacing:-.03em;margin-top:5px;padding-top:5px;border-top:1px solid var(--rule);}
.card-grade-letter.good{color:var(--good);}
.card-grade-letter.bad{color:var(--red);}
.card-grade-letter.warn{color:var(--warn);}
.card-grade-letter-row{display:flex;align-items:center;gap:8px;margin-top:6px;}
.card-grade-bullets{padding:0;margin:0;display:flex;flex-direction:column;gap:2px;}
.card-grade-bullet{font:300 7px/1.3 var(--fi);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* 9. AI commentary */
.card-ai-section{padding:10px 12px;border-bottom:1px solid var(--rule);overflow:hidden;}
.card-ai-dropcap{float:left;line-height:1;margin:1px 6px 0 0;font:800 22px/1 var(--fi);letter-spacing:-.04em;}
.card-ai-dropcap .dc-pi{color:var(--red);}
.card-ai-dropcap .dc-rest{color:var(--dark);}
.card-ai-text{font:300 9px/1.6 var(--fi);color:var(--sec);}
.card-ai-text strong{font-weight:600;color:var(--dark);}

/* 10. What happened next */
.card-next-section{padding:7px 12px;background:var(--bgw);border-bottom:1px solid var(--rule);}
.card-next-lbl{font:500 7px/1 var(--fi);letter-spacing:.10em;text-transform:uppercase;color:var(--muted);margin-bottom:6px;}
.card-next-grid{display:flex;gap:0;}
.card-ng-col{flex:1;display:flex;flex-direction:column;gap:3px;}
.card-ng-col-lbl{font:500 7px/1 var(--fi);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);opacity:.6;margin-bottom:2px;}
.card-ng-divider{width:1px;background:var(--rule);margin:0 8px;flex-shrink:0;}
.card-next-row{display:flex;align-items:baseline;gap:4px;}
.card-nr-pitch{font:600 8px/1 var(--fi);color:var(--dark);flex-shrink:0;}
.card-nr-detail{font:300 8px/1 var(--fi);color:var(--muted);flex:1;min-width:0;}
.card-nr-result{font:700 8px/1 var(--fi);flex-shrink:0;}
.card-nr-result.bad{color:var(--red);}
.card-nr-result.good{color:var(--good);}
.card-next-batter{display:flex;align-items:baseline;justify-content:space-between;gap:4px;}
.card-nb-name{font:400 9px/1 var(--fi);color:var(--dark);}
.card-nb-result{font:700 9px/1 var(--fi);color:var(--muted);}
.card-nb-result.good{color:var(--good);}
.card-nb-result.bad{color:var(--red);}

/* 11. Footer */
.card-footer{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;background:#111;}
.card-footer-brand .logo-r{font-size:12px;}
.card-footer-brand .logo-l{font-size:12px;color:rgba(255,255,255,.85);}
.card-footer-meta{font:300 7px/1 var(--fi);color:rgba(255,255,255,.35);margin-top:2px;}
.card-share-btn{font:600 8px/1 var(--fi);letter-spacing:.08em;text-transform:uppercase;padding:5px 10px;border:1px solid rgba(255,255,255,.3);background:none;cursor:pointer;color:rgba(255,255,255,.7);transition:all 80ms;}
.card-share-btn:hover{background:rgba(255,255,255,.1);color:#fff;}

/* Card — hide site header/footer when showing card */
body.pitch-card-mode .site-hdr,
body.pitch-card-mode .hdr-rule,
body.pitch-card-mode .pg-red-bar,
body.pitch-card-mode .site-footer,
body.pitch-card-mode .mobile-nav-overlay{display:none !important;}
body.pitch-card-mode #app{padding:0;margin:0;}
body.pitch-card-mode{background:var(--bg);}

/* ═══════════════════════════════════════════════════════════════════
   PLAYER PROFILE — claudeweb port (catcher/batter/pitcher)
   ═══════════════════════════════════════════════════════════════════ */

/* ── PLAYER HEADER ── */
.player-hdr{display:block;background:var(--bg);border-bottom:2px solid var(--rules);padding:0 32px;margin-bottom:0;padding-bottom:0;gap:0;}
.player-hdr-top{display:flex;align-items:center;gap:0;padding:16px 0 12px;border-bottom:1px solid var(--rule);}
.pp-headshot-wrap{position:relative;flex-shrink:0;width:56px;height:56px;}
.pp-headshot{width:56px;height:56px;border-radius:50%;object-fit:cover;background:#F3F4F6;}
.pp-team-logo-badge{position:absolute;bottom:-2px;right:-4px;width:24px;height:24px;background:#fff;border-radius:50%;padding:2px;box-shadow:0 1px 3px rgba(0,0,0,.12);}
.player-identity{display:flex;flex-direction:column;gap:4px;margin-left:14px;flex-shrink:0;}
.player-name{font:800 32px/1 var(--fi);letter-spacing:-.03em;color:var(--dark);}
.player-meta{display:flex;align-items:center;gap:8px;}
.player-team{font:600 11px/1 var(--fi);letter-spacing:.10em;text-transform:uppercase;color:var(--muted);}
.player-pos-tag{font:600 9px/1 var(--fi);letter-spacing:.10em;text-transform:uppercase;padding:3px 7px;background:var(--dark);color:#fff;}
.player-hand{font:300 11px/1 var(--fi);color:var(--muted);}
/* Inline compact stat strip under Bats/Throws — replaces old .team-stat-line row */
.pp-id-strip{display:flex;align-items:center;gap:18px;margin-top:6px;}
.pp-id-stat{display:inline-flex;align-items:baseline;gap:6px;}
.pp-id-v{font:700 16px/1 var(--fi);color:var(--dark);font-variant-numeric:tabular-nums;}
.pp-id-l{font:600 10px/1 var(--fi);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);}
.pp-id-rank{font:600 9px/1 var(--fi);letter-spacing:.06em;text-transform:uppercase;color:var(--red);margin-left:4px;padding:2px 5px;border:1px solid var(--red);}

/* Detail section lives INSIDE .main-grid as row 2, col 2 only. Dist-rows are
   narrower (col2 width) — Challenge Map moved to col3 under the dossier.
   zone-col and ledger-col span both rows so they run long on their own. */
.main-grid .zone-col{grid-column:1;grid-row:1 / span 2;}
.main-grid .analysis-col{grid-column:2;grid-row:1;}
.main-grid .ledger-col{grid-column:3;grid-row:1 / span 2;}
.pp-wide-detail{grid-column:2;grid-row:2;min-width:0;border-top:1px solid var(--rule);overflow:hidden;}
@media (max-width:1024px){
  .main-grid .zone-col,.main-grid .ledger-col{grid-row:1;}
  .pp-wide-detail{grid-column:1 / -1;}
}
.player-hdr-ribbon{flex:1;min-width:0;display:flex;align-items:center;margin-left:20px;overflow:hidden;}
.player-hdr-ribbon .ribbon-games{flex:1;display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:4px 0;}
.player-hdr-ribbon .ribbon-games::-webkit-scrollbar{display:none;}
/* Player stat line — inherits .team-stat-line but no double padding */
.player-hdr .team-stat-line{padding:8px 0;}
/* PA Map section — header matches Live/Game subway style (subway-ctrl + lsub-*) */
.pp-pamap-section{border-bottom:1px solid var(--rules);}
.pp-def-subway-section{border-bottom:1px solid var(--rules);}
.pp-pamap-header{display:flex;align-items:center;gap:7px;padding:6px 16px;border-bottom:1px solid var(--rule);background:var(--bgw);font-size:9px;line-height:1;cursor:pointer;user-select:none;transition:background 80ms;}
/* SPRINT-069 Arsenal: pitch count beside usage %, + bottom total row. */
.arsenal-count{color:var(--muted);font-weight:400;font-size:9px;}
.arsenal-total-row td{border-top:1px solid var(--rule);padding-top:7px;}
/* SPRINT-069 Catcher Battery Partners: cap vertical height to ~6 rows
   (bp-row is ~28px tall + 20px header), scroll beyond. Prevents the
   section from eating the whole fold when a catcher has 20+ pitcher
   partners. Same class applies to the CW Battery (8-col table) variant. */
.battery-partners-wrap{max-height:calc(7 * 28px + 30px);overflow-y:auto;scrollbar-width:thin;}
.battery-partners-wrap::-webkit-scrollbar{width:6px;}
.battery-partners-wrap::-webkit-scrollbar-thumb{background:rgba(0,0,0,.15);}
#battery-partners{max-height:calc(7 * 28px + 30px);overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;}
#battery-partners::-webkit-scrollbar{width:6px;}
#battery-partners::-webkit-scrollbar-thumb{background:rgba(0,0,0,.15);}
/* Defensive subway wrap — cap at 15 rows + date header like PA Map. */
#def-subway-wrap{max-height:calc(15 * 44px + 48px);overflow-y:auto;overflow-x:auto;scrollbar-width:thin;}
#def-subway-wrap::-webkit-scrollbar{width:6px;height:4px;}
#def-subway-wrap::-webkit-scrollbar-thumb{background:rgba(0,0,0,.15);}
.pp-pamap-header:hover{background:var(--bg);}
.pp-pamap-header.open{background:var(--bg);}
/* Legacy hooks retained so the old .pp-pamap-toggle class still matches styling
   for any stale DOM (e.g., the defensive-map section still uses it). */
.pp-pamap-toggle{display:flex;align-items:center;justify-content:space-between;padding:8px 32px;cursor:pointer;user-select:none;transition:background 80ms;}
.pp-pamap-toggle:hover{background:var(--bgw);}
.pp-pamap-toggle.open{background:var(--bgw);border-bottom:1px solid var(--rule);}
.pp-pamap-body{padding:0;}
/* Cap the subway vertical display to ~15 rows (44px each) + date header (~40px)
   + filter padding when "All" games selected. Beyond 15 rows the container
   scrolls instead of growing to full content height. */
#pp-pamap-wrap{max-height:calc(15 * 44px + 48px);overflow-y:auto;overflow-x:auto;scrollbar-width:thin;}
#pp-pamap-wrap::-webkit-scrollbar{width:6px;height:4px;}
#pp-pamap-wrap::-webkit-scrollbar-thumb{background:rgba(0,0,0,.15);}
.pamap-filter-bar{display:flex;align-items:center;padding:6px 12px;background:#EDE9E1;border-bottom:1px solid var(--rule);flex-wrap:nowrap;}
.pamap-bar-left,.pamap-bar-right{flex:1;display:flex;align-items:center;gap:4px;}
.pamap-bar-right{justify-content:flex-end;}
.pamap-bar-center{display:flex;align-items:center;gap:4px;justify-content:center;}
.pamap-slider{width:60px;height:2px;accent-color:var(--red);cursor:pointer;}
.pamap-slider-val{font:300 10px/1 var(--fi);color:var(--muted);min-width:16px;font-variant-numeric:tabular-nums;}
.pamap-search{font:400 11px/20px var(--fi);padding:0 8px;border:1px solid var(--rules);border-radius:0;background:var(--bg);color:var(--text);width:160px;height:22px;box-sizing:border-box;outline:none;}
.pamap-search:focus{border-color:var(--text);}
.pamap-search::placeholder{color:var(--muted);font-size:10px;}
.pamap-chip-bar{display:flex;gap:4px;align-items:center;}
.pamap-chip{display:inline-flex;align-items:center;gap:2px;padding:2px 4px 2px 8px;border:1px solid var(--rules);font:500 10px/1 var(--fi);letter-spacing:.02em;color:var(--muted);cursor:pointer;user-select:none;white-space:nowrap;transition:color .15s,border-color .15s;}
.pamap-chip.on{color:var(--text);border-color:var(--text);}
.pamap-chip:not(.on){opacity:.4;}
.pamap-chip .pc-x{font-size:12px;opacity:.5;margin-left:2px;cursor:pointer;}
.pamap-chip .pc-x:hover{opacity:1;}
/* PA Subway */
.pa-sub-shell{padding:12px 0 16px;}
.pa-sub-ctrl{display:flex;gap:4px;padding:0 32px 8px;}
.pa-sub-zoom{width:28px;height:24px;border:1px solid var(--rule);background:var(--bg);font:500 14px/1 var(--fi);color:var(--muted);cursor:pointer;display:flex;align-items:center;justify-content:center;}
.pa-sub-zoom:hover{background:var(--bgw);color:var(--dark);}
.pa-sub-outer{display:flex;align-items:flex-start;padding:0 32px 0 0;}
.pa-sub-labels{flex-shrink:0;margin-left:32px;}
.pa-sub-scroll{flex:1;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;}
.pa-sub-scroll::-webkit-scrollbar{height:4px;}
.pa-sub-scroll::-webkit-scrollbar-thumb{background:rgba(0,0,0,.12);}
.pa-sub-svg{display:block;}
.pa-sub-hdr{font:500 8px/1 var(--fi);fill:var(--muted);text-anchor:middle;letter-spacing:.08em;text-transform:uppercase;}
.pa-sub-date{font:300 11px/1 var(--fi);fill:var(--dark);font-variant-numeric:tabular-nums;}
.pa-sub-opp{font:400 9px/1 var(--fi);fill:var(--muted);letter-spacing:.02em;}
.pa-sub-track{stroke:rgba(0,0,0,.10);stroke-width:2;}
/* Pitch dots — same styling as zone scatter */
.pa-dot{fill:rgba(0,0,0,.10);stroke:none;}
.pa-dot-s{fill:rgba(0,0,0,.30);stroke:none;}
.pa-dot-ot{fill:#2E7D32;stroke:#2E7D32;stroke-opacity:.3;stroke-width:3;}
.pa-dot-up{fill:#FC3D21;stroke:#FC3D21;stroke-opacity:.25;stroke-width:3;}
.pa-dot-mi{fill:#B45309;stroke:#B45309;stroke-opacity:.25;stroke-width:3;}
circle[data-gamepk]{cursor:pointer;}
circle[data-gamepk]:hover{opacity:.7;}

/* PA Map table (legacy, keep for now) */
.pamap-wrap{padding:12px 32px 16px;}
.pamap-legend{display:flex;gap:14px;margin-bottom:10px;}
.pamap-legend-item{display:flex;align-items:center;gap:4px;font:400 9px/1 var(--fi);color:var(--muted);}
.pamap-legend-dot{width:9px;height:9px;border-radius:50%;}
.pamap-table{width:100%;border-collapse:collapse;}
.pamap-table th{font:500 8px/1 var(--fi);letter-spacing:.10em;text-transform:uppercase;color:var(--muted);padding:6px 8px;text-align:left;border-bottom:1px solid var(--rule);}
.pamap-date-hdr{width:100px;}
.pamap-pa-hdr{text-align:center !important;width:auto;}
.pamap-row{cursor:pointer;transition:background 80ms;}
.pamap-row:hover{background:var(--bgw);}
.pamap-row.on{background:rgba(252,61,33,.06);box-shadow:inset 3px 0 0 var(--red);}
.pamap-row td{padding:6px 8px;border-bottom:1px solid var(--bgi);vertical-align:middle;}
.pamap-date-val{font:300 12px/1 var(--fi);color:var(--dark);font-variant-numeric:tabular-nums;letter-spacing:-.02em;}
.pamap-opp{display:block;font:400 9px/1 var(--fi);color:var(--muted);margin-top:2px;letter-spacing:.02em;}
.pamap-pa{text-align:center;white-space:nowrap;}
.pamap-dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin:0 1.5px;vertical-align:middle;background:rgba(0,0,0,.08);}
.pamap-dot.strike{background:rgba(0,0,0,.30);}
.pamap-dot.ot{background:var(--good);width:11px;height:11px;box-shadow:0 0 0 2px rgba(46,125,50,.3);}
.pamap-dot.up{background:var(--red);width:11px;height:11px;box-shadow:0 0 0 2px rgba(252,61,33,.25);}
.pamap-dot.mi{background:var(--warn);width:11px;height:11px;box-shadow:0 0 0 2px rgba(255,152,0,.25);}

/* Archetype badge */
.archetype-badge{display:flex;align-items:center;gap:8px;padding:6px 12px;border:1px solid var(--rules);background:var(--bgw);}
.archetype-icon{font:700 14px/1 var(--fi);color:var(--good);}
.archetype-label{font:700 10px/1 var(--fi);letter-spacing:.08em;text-transform:uppercase;color:var(--dark);}
.archetype-sub{font:300 9px/1 var(--fi);color:var(--muted);}

/* Season selector */
.season-sel{display:flex;align-items:center;gap:6px;}
.season-btn{font:500 9px/1 var(--fi);letter-spacing:.06em;padding:4px 8px;border:1px solid var(--rules);background:none;color:var(--muted);cursor:pointer;}
.season-btn.on{background:var(--dark);color:#fff;border-color:var(--dark);}

/* ── HERO METRIC STRIP ── */
.hero-strip{display:grid;grid-template-columns:repeat(5,1fr);border-bottom:1px solid var(--rules);}
.hero-cell{padding:16px 20px;border-right:1px solid var(--rule);display:flex;flex-direction:column;gap:0;position:relative;}
.hero-cell:last-child{border-right:none;}
.hero-lbl{font:500 8px/1 var(--fi);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:6px;}
.hero-val{font:300 36px/1 var(--fi);letter-spacing:-.03em;color:var(--dark);font-variant-numeric:tabular-nums;}
.hero-val.accent{color:var(--red);}
.hero-val.good{color:var(--good);}
.hero-sub{font:300 10px/1 var(--fi);color:var(--muted);margin-top:4px;}

/* League context bar */
.ctx-bar-wrap{margin-top:8px;}
.ctx-bar-lbl{font:500 7px/1 var(--fi);letter-spacing:.10em;text-transform:uppercase;color:rgba(0,0,0,.25);margin-bottom:3px;display:flex;justify-content:space-between;}
.ctx-bar-track{height:4px;background:var(--bgi);position:relative;}
.ctx-bar-fill{height:4px;background:var(--good);position:absolute;left:0;top:0;transition:width 600ms ease;}
.ctx-bar-fill.warn{background:var(--warn);}
.ctx-bar-fill.red{background:var(--red);}
.ctx-bar-marker{position:absolute;top:-3px;width:2px;height:10px;background:var(--dark);}

/* Rank tag */
.rank-tag{position:absolute;top:14px;right:14px;font:700 8px/1 var(--fi);letter-spacing:.06em;padding:2px 6px;background:var(--bgi);color:var(--muted);}
.rank-tag.top{background:rgba(46,125,50,.1);color:var(--good);}

/* ── TIME FILTER BAR ── */
.time-bar{display:flex;align-items:center;gap:0;border-bottom:1px solid var(--rules);background:var(--bgw);}
.time-lbl{font:500 8px/1 var(--fi);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding:0 14px;}
.time-sep{width:1px;height:32px;background:var(--rule);}
.time-btn{font:500 9px/1 var(--fi);letter-spacing:.06em;text-transform:uppercase;padding:0 14px;height:36px;border:none;background:none;color:var(--muted);cursor:pointer;border-right:1px solid var(--rule);transition:all 80ms;display:flex;align-items:center;gap:6px;}
.time-btn:hover{background:var(--bgi);color:var(--dark);}
.time-btn.on{background:var(--bg);color:var(--dark);border-bottom:2px solid var(--red);}
.time-count{font:300 9px/1 var(--fi);color:var(--muted);}
.date-range{display:flex;align-items:center;gap:8px;padding:0 14px;margin-left:auto;}
.date-input{font:300 10px/1 var(--fi);color:var(--dark);border:1px solid var(--rule);background:var(--bg);padding:4px 8px;outline:none;}

/* ── MAIN GRID ── */
.main-grid{display:grid;grid-template-columns:380px 1fr 300px;border-bottom:1px solid var(--rules);min-height:700px;}

/* ── COL 1: ZONE + EDGE ZOOM ── */
.zone-col{border-right:1px solid var(--rule);display:flex;flex-direction:column;align-items:stretch;}
.zone-hdr{padding:8px 12px;border-bottom:1px solid var(--rule);display:flex;align-items:center;gap:6px;background:var(--bg);flex-wrap:wrap;}
.zone-hdr-title{font:600 10px/1 var(--fi);letter-spacing:.10em;text-transform:uppercase;color:var(--dark);white-space:nowrap;}
.zone-mode-btn{margin-left:auto;font:500 9px/1 var(--fi);letter-spacing:.06em;text-transform:uppercase;padding:3px 8px;border:1px solid var(--rule);background:var(--bgw);color:var(--muted);cursor:pointer;transition:color .15s,border-color .15s;}
.zone-mode-btn:hover{color:var(--dark);border-color:var(--dark);}
.zone-filter-chips{display:flex;gap:3px;flex-wrap:wrap;}
.zchip{font:500 8px/1 var(--fi);letter-spacing:.05em;text-transform:uppercase;padding:3px 5px;border:1px solid var(--rules);background:none;color:var(--muted);cursor:pointer;transition:all 80ms;border-radius:2px;}
.zchip:hover{color:var(--dark);border-color:var(--dark);}
.zchip.on{color:var(--dark);border-color:var(--dark);background:var(--bgw);}
.zchip.on.g{color:var(--good);border-color:var(--good);background:rgba(46,125,50,.06);}
.zchip.on.r{color:var(--red);border-color:var(--red);background:rgba(252,61,33,.06);}
.zchip.on.w{color:var(--warn);border-color:var(--warn);background:rgba(180,83,9,.06);}

.zone-scatter-wrap{display:flex;align-items:center;justify-content:center;padding:8px 16px;background:var(--bg);border-bottom:1px solid var(--rule);}
#player-zone-svg{display:block;cursor:crosshair;}
.zone-sub-label{padding:5px 16px 8px;font:300 9px/1 var(--fi);color:var(--muted);letter-spacing:.04em;border-bottom:1px solid var(--rule);}

/* Pitch type filter chips */
.pt-filter-row{padding:8px 16px;border-bottom:1px solid var(--rule);display:flex;gap:4px;flex-wrap:wrap;background:var(--bgw);}
.ptchip{font:600 8px/1 var(--fi);letter-spacing:.06em;padding:3px 7px;border:1px solid var(--rules);background:none;color:var(--muted);cursor:pointer;transition:all 80ms;}
.ptchip.on{background:var(--bgi);color:var(--dark);border-color:var(--dark);}

/* Edge zoom */
.ez-section{flex:1;display:flex;flex-direction:column;}
.ez-hdr{padding:8px 16px;border-bottom:1px solid var(--rule);display:flex;align-items:center;justify-content:space-between;background:var(--bgw);flex-shrink:0;}
.ez-hdr-title{font:600 9px/1 var(--fi);letter-spacing:.10em;text-transform:uppercase;color:var(--dark);}
.ez-hdr-meta{font:300 9px/1 var(--fi);color:var(--muted);}
.ez-section{position:relative;}
.ez-render{flex:1;min-height:130px;background:var(--bg);overflow:hidden;}
.ez-video-wrap{background:#000;position:relative;width:100%;padding-top:56.25%;}
.ez-video-wrap video{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:contain;}
.ez-video-status{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font:300 10px/1 var(--fi);color:rgba(255,255,255,.6);pointer-events:none;}
#lf-3d-popout{position:absolute;bottom:6px;right:6px;z-index:10;background:rgba(0,0,0,.55);color:#fff;border:none;border-radius:2px;font:500 11px/1 var(--fi);padding:4px 7px;cursor:pointer;opacity:.7;transition:opacity .15s;}
#lf-3d-popout:hover{opacity:1;}
.ez-ghost{display:flex;align-items:center;justify-content:center;padding:28px;opacity:.14;height:100%;gap:10px;}
.ez-ghost-icon{font:300 28px/1 var(--fi);color:var(--dark);}
.ez-ghost-txt{font:500 9px/1 var(--fi);letter-spacing:.12em;text-transform:uppercase;color:var(--dark);}
.ez-stats{display:flex;align-items:center;border-top:1px solid var(--rule);flex-shrink:0;}
.ez-stat{flex:1;padding:8px 12px;border-right:1px solid var(--rule);}
.ez-stat:last-child{border-right:none;}
.ez-val{font:300 18px/1 var(--fi);letter-spacing:-.02em;font-variant-numeric:tabular-nums;}
.ez-val.ov{color:var(--good);}
.ez-val.up{color:var(--red);}
.ez-val.mi{color:var(--warn);}
.ez-lbl{font:500 8px/1 var(--fi);letter-spacing:.10em;text-transform:uppercase;color:var(--muted);margin-top:3px;}

/* ── COL 2: ANALYSIS ── */
.analysis-col{border-right:1px solid var(--rule);display:flex;flex-direction:column;min-width:0;overflow:hidden;}

/* GEI hero */
.gei-hero{padding:20px 20px 16px;border-bottom:1px solid var(--rule);}
.gei-formula-row{display:flex;align-items:flex-start;gap:20px;margin-bottom:16px;}
.gei-big{display:flex;flex-direction:column;gap:3px;}
.gei-number{font:300 56px/1 var(--fi);letter-spacing:-.04em;color:var(--good);}
.gei-label{font:500 8px/1 var(--fi);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);}
.gei-def{flex:1;padding-left:20px;border-left:1px solid var(--rule);}
.gei-def-title{font:600 11px/1 var(--fi);color:var(--dark);margin-bottom:4px;}
.gei-def-body{font:300 10px/1.6 var(--fi);color:var(--muted);}
.gei-def-formula{margin-top:8px;padding:6px 10px;background:var(--bgi);font:500 9px/1 var(--fi);letter-spacing:.04em;color:var(--dark);}

/* League distribution rows */
.dist-rows{display:flex;flex-direction:column;gap:0;}
.dist-row{display:flex;align-items:center;gap:6px;padding:7px 14px;border-bottom:1px solid var(--rule);}
.dist-row:last-child{border-bottom:none;}
.dist-lbl{font:500 8px/1 var(--fi);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);width:80px;flex-shrink:0;}
.dist-lbl[data-def]{cursor:pointer;transition:color 120ms;}
.dist-lbl[data-def]:hover{color:var(--dark);}
.sec-hdr-sub[data-def]{cursor:pointer;}
.dist-svg-wrap{flex:1;min-width:0;height:24px;position:relative;overflow:hidden;}
.dist-svg-wrap svg{display:block;max-width:100%;}
.dist-val{font:700 11px/1 var(--fi);color:var(--good);width:38px;text-align:right;font-variant-numeric:tabular-nums;flex-shrink:0;}
.dist-rank{font:300 8px/1 var(--fi);color:var(--muted);width:44px;text-align:right;flex-shrink:0;}

/* Section headers */
.sec-hdr{padding:10px 20px;border-bottom:1px solid var(--rule);border-top:1px solid var(--rule);background:var(--bgw);display:flex;align-items:center;justify-content:space-between;}
.sec-hdr-title{font:600 10px/1 var(--fi);letter-spacing:.10em;text-transform:uppercase;color:var(--dark);}
.sec-hdr-sub{font:300 9px/1 var(--fi);color:var(--muted);}

/* Batter Challenge Map — By me / All involved toggle */
.bcm-toggle{display:inline-flex;gap:0;}
.bcm-opt{
  font:500 9px/1 var(--fi);letter-spacing:.08em;text-transform:uppercase;
  background:transparent;border:1px solid var(--rule);color:var(--muted);
  padding:5px 9px;cursor:pointer;border-radius:0;
}
.bcm-opt + .bcm-opt{border-left:0;}
.bcm-opt:hover{color:var(--text);}
.bcm-opt.active{color:var(--text);background:var(--bg);border-color:var(--dark);}

/* Per-pitch-type table */
.pt-table{width:100%;border-collapse:collapse;}
.pt-table th{font:500 8px/1 var(--fi);letter-spacing:.10em;text-transform:uppercase;color:var(--muted);padding:7px 14px;text-align:left;border-bottom:1px solid var(--rule);background:var(--bgw);}
.pt-table th:not(:first-child){text-align:right;}
.pt-table td{font:300 11px/1 var(--fi);padding:7px 14px;border-bottom:1px solid var(--rule);font-variant-numeric:tabular-nums;}
.pt-table td:not(:first-child){text-align:right;}
.pt-table tr:last-child td{border-bottom:none;}
.pt-name{font:600 11px/1 var(--fi);color:var(--dark);}
.pt-bar-cell{padding:6px 14px !important;}
.pt-mini-bar{height:4px;background:var(--bgi);}
.pt-mini-fill{height:4px;background:var(--good);}
.pt-mini-fill.warn{background:var(--warn);}

/* Replay Well */
.replay-well{border-bottom:1px solid var(--rule);}
.replay-hdr{padding:8px 14px;display:flex;align-items:center;gap:8px;cursor:pointer;background:var(--bgw);border-bottom:1px solid var(--rule);}
.replay-arrow{font-size:8px;color:var(--muted);transition:transform 150ms;display:inline-block;}
.replay-arrow.open{transform:rotate(90deg);}
.replay-title{font:600 9px/1 var(--fi);letter-spacing:.10em;text-transform:uppercase;color:var(--dark);}
.replay-pitch-label{font:400 9px/1 var(--fi);color:var(--muted);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.replay-tabs{display:flex;gap:1px;margin-left:auto;flex-shrink:0;}
.replay-tab{font:600 8px/1 var(--fi);letter-spacing:.06em;text-transform:uppercase;padding:3px 8px;border:1px solid var(--rules);background:none;color:var(--muted);cursor:pointer;}
.replay-tab.on{color:var(--dark);border-color:var(--dark);background:var(--bg);}
.replay-body{position:relative;}
.replay-screen{background:#000;position:relative;width:100%;padding-top:56.25%;/* 16:9 */}
.replay-screen>*{position:absolute;top:0;left:0;width:100%;height:100%;}
.replay-video{display:block;object-fit:contain;background:#000;}
.replay-3d-frame{border:none;background:#F5F2EC;}
.replay-2d-wrap{background:#F5F2EC;display:flex;align-items:center;justify-content:center;}
.replay-empty{font:300 10px/1.4 var(--fi);color:rgba(255,255,255,.5);display:flex;align-items:center;justify-content:center;background:#000;}
.replay-popout{display:none;/* popout now inside iframe bottom bar */}

/* ==========================================================================
   ReplayWell — unified 2D / 3D / Video replay component (SPRINT-055)
   ========================================================================== */
.rw-root { display: flex; flex-direction: column; width: 100%; }
.rw-header {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 16px; border-bottom: 1px solid var(--rule);
  background: var(--bgw); flex-shrink: 0;
}
.rw-title { font: 600 9px/1 var(--fi); letter-spacing: .10em; text-transform: uppercase; color: var(--dark); }
.rw-meta  { font: 300 9px/1 var(--fi); color: var(--muted); }
.rw-tabs  { display: flex; gap: 2px; margin-left: auto; }
.rw-tab   {
  font: 600 8px/1 var(--fi); letter-spacing: .06em; text-transform: uppercase;
  padding: 3px 8px; border: 1px solid var(--rules); background: none;
  color: var(--muted); cursor: pointer;
}
.rw-tab.on { color: var(--dark); border-color: var(--dark); background: var(--bg); }
.rw-popout {
  background: none; border: 1px solid var(--rules); color: var(--muted);
  padding: 3px 5px; cursor: pointer; line-height: 0;
}
.rw-popout:hover { color: var(--dark); border-color: var(--dark); }

.rw-body {
  background: #000; position: relative; width: 100%; padding-top: 56.25%; /* 16:9 */
}
.rw-panel { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.rw-panel-2d    { background: #F5F2EC; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.rw-panel-3d    { border: none; background: #F5F2EC; }
.rw-panel-video { background: #000; }
.rw-video       { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
.rw-video-overlay {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.85); pointer-events: none;
}

/* Placeholder (spinning baseball + PI copy) */
.rw-placeholder {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 100%; height: 100%; gap: 10px;
  color: rgba(255,255,255,.6); background: transparent;
}
.rw-panel-2d .rw-placeholder { color: rgba(0,0,0,.35); }
.rw-ph-ball { animation: rw-spin 2s linear infinite; line-height: 0; }
.rw-ph-copy { font: 500 10px/1.2 var(--fi); letter-spacing: .06em; text-transform: uppercase; }
@keyframes rw-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }


/* Market chart (full-width collapsible) */
.mc-shell{border-bottom:1px solid var(--rule);background:var(--bg);}
.mc-body{overflow:hidden;}
.gp-market-tf{display:flex;gap:2px;}
.gp-market-tf .tf-btn{font:500 8px/1 var(--fi);letter-spacing:.04em;padding:2px 6px;border:none;background:none;color:var(--muted);cursor:pointer;border-radius:2px;}
.gp-market-tf .tf-btn:hover{color:var(--sec);}
.gp-market-tf .tf-btn.active{background:var(--text);color:#fff;}
.mc-shell .gp-market-chart{height:320px;width:100%;padding:0 16px 8px;}

/* Live market chart + watchlist */
.lm-shell{border-bottom:1px solid var(--rule);background:var(--bg);}
.lm-ctrl{display:flex;align-items:center;gap:7px;padding:6px 16px;border-bottom:1px solid var(--rule);background:var(--bgw);font-size:9px;line-height:1;}
.lm-label{font:700 9px/1 var(--fi);letter-spacing:.10em;text-transform:uppercase;color:var(--dark);}
.lm-sub{font:400 9px/1 var(--fi);color:var(--muted);}
.lm-expand-btn{background:var(--red);border:1px solid var(--red);padding:2px 8px;border-radius:2px;font:600 9px/1 var(--fi);letter-spacing:.06em;color:#fff;cursor:pointer;text-transform:uppercase;}
.lm-expand-btn:hover{opacity:.85;}
.lm-body{overflow:hidden;}
.lm-layout{display:flex;height:320px;}
.lm-chart-wrap{flex:1;min-width:0;}
.lm-chart{height:100%;width:100%;padding:0 16px 8px;}

/* Watchlist panel (right sidebar) */
.wl-panel{width:260px;flex-shrink:0;border-left:1px solid var(--rule);display:flex;flex-direction:column;overflow:hidden;}
.wl-colheader{display:flex;align-items:center;padding:6px 10px;border-bottom:1px solid var(--rule);flex-shrink:0;background:var(--bgw);}
.wl-colheader span{font:600 9px/1 var(--fi);color:var(--dark);text-transform:uppercase;letter-spacing:.06em;}
.wl-col-sym{flex:1;}
.wl-col-last{width:46px;text-align:right;}
.wl-col-chg{width:46px;text-align:right;}
.wl-col-vol{width:56px;text-align:right;}
.wl-list{flex:1;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--bgi) transparent;}
.wl-list::-webkit-scrollbar{width:4px;}
.wl-list::-webkit-scrollbar-thumb{background:var(--bgi);border-radius:2px;}
.wl-group{font:600 8px/1 var(--fi);text-transform:uppercase;letter-spacing:.08em;color:var(--muted);padding:8px 10px 4px;}
.wl-row{display:flex;align-items:center;padding:5px 10px;cursor:pointer;transition:background 60ms;}
.wl-row:hover{background:var(--bgw);}
.wl-row.active{background:var(--bgw);box-shadow:inset 2px 0 0 var(--text);}
.wl-sym{flex:1;display:flex;align-items:center;gap:5px;min-width:0;}
.wl-logos{display:flex;align-items:center;gap:0;flex-shrink:0;}
.wl-logos img{width:14px;height:14px;object-fit:contain;}
.wl-logos img+img{margin-left:-3px;}
.wl-sym-name{font:600 10px/1 var(--fi);letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.wl-last{width:46px;font:500 10px/1 var(--fi);font-variant-numeric:tabular-nums;text-align:right;flex-shrink:0;}
.wl-chg{width:46px;font:500 10px/1 var(--fi);font-variant-numeric:tabular-nums;text-align:right;flex-shrink:0;}
.wl-vol{width:56px;flex-shrink:0;position:relative;height:16px;display:flex;align-items:center;justify-content:flex-end;}
.wl-vol-bar{position:absolute;left:0;top:0;height:100%;background:rgba(0,0,0,.06);border-radius:1px;transition:width .3s ease;}
.wl-vol-text{position:relative;font:500 9px/1 var(--fi);font-variant-numeric:tabular-nums;color:var(--sec);z-index:1;padding-right:2px;}
.up-text{color:var(--good);}
.down-text{color:var(--red);}
.flat-text{color:var(--muted);}

/* GEI sparkline */
.trend-section{padding:16px 20px;}
.trend-lbl{font:500 8px/1 var(--fi);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:10px;}
#gei-spark{display:block;width:100%;overflow:visible;}

/* Count heatmap */
.count-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--rules);margin:0 14px 12px;}
.count-cell{background:var(--bg);padding:4px 3px;display:flex;flex-direction:column;align-items:center;gap:1px;}
.count-cell-label{font:700 8px/1 var(--fi);letter-spacing:.04em;color:var(--muted);}
.count-cell-val{font:600 11px/1 var(--fi);color:var(--dark);font-variant-numeric:tabular-nums;}
.count-cell-sub{font:300 7px/1 var(--fi);color:var(--muted);}
.count-cell.hot{background:rgba(46,125,50,.08);}
.count-cell.cold{background:rgba(252,61,33,.05);}

/* ── COL 3: CHALLENGE LEDGER ── */
.ledger-col{display:flex;flex-direction:column;min-width:0;position:sticky;top:56px;align-self:start;max-height:calc(100vh - 64px);overflow-y:auto;}
.ledger-col::-webkit-scrollbar{width:3px;}
.ledger-col::-webkit-scrollbar-thumb{background:rgba(0,0,0,.15);}
.ledger-hdr{padding:10px 14px;border-bottom:1px solid var(--rules);background:var(--bgw);display:flex;align-items:center;justify-content:space-between;flex-shrink:0;}
.ledger-title{font:600 10px/1 var(--fi);letter-spacing:.12em;text-transform:uppercase;color:var(--dark);}
.ledger-sort{font:300 9px/1 var(--fi);color:var(--muted);cursor:pointer;display:flex;align-items:center;gap:4px;}

/* Challenge card */
.chal-card{padding:10px 14px;border-bottom:1px solid var(--rule);cursor:pointer;transition:background 80ms;display:flex;gap:8px;align-items:flex-start;}
.chal-card:hover{background:var(--bgw);}
.chal-card.active{background:var(--bgw);border-left:2px solid var(--red);padding-left:12px;}
.chal-card-zone{flex-shrink:0;}
.chal-card-body{flex:1;min-width:0;}
.chal-card-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px;}
.chal-card-ruling{font:700 11px/1 var(--fi);}
.chal-card-ruling.ov{color:var(--good);}
.chal-card-ruling.up{color:var(--red);}
.chal-card-badge{font:600 8px/1 var(--fi);letter-spacing:.08em;text-transform:uppercase;padding:2px 6px;border:1px solid;}
.chal-card-badge.ov{color:var(--good);border-color:rgba(46,125,50,.3);background:rgba(46,125,50,.06);}
.chal-card-badge.up{color:var(--red);border-color:rgba(252,61,33,.3);background:rgba(252,61,33,.06);}
.chal-card-badge.ks{color:#B8860B;border-color:rgba(184,134,11,.4);background:rgba(184,134,11,.08);}
.chal-card-row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:2px;}
.chal-card-rl{font:500 8px/1 var(--fi);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);flex-shrink:0;white-space:nowrap;}
.chal-card-rv{font:400 10px/1 var(--fi);color:var(--dark);text-align:right;padding-left:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.chal-card-rv.ov{color:var(--good);font-weight:600;}
.chal-card-rv.up{color:var(--red);font-weight:600;}
.chal-card-meta{font:300 8px/1.4 var(--fi);color:var(--muted);margin-top:4px;padding-top:3px;border-top:1px solid var(--rule);display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.ksave-crown{font:10px/1 var(--fi);margin-right:3px;}

/* Ledger feed */
.ledger-feed{flex:1;min-height:0;}
.ledger-show-more{display:block;width:100%;padding:10px;margin-top:4px;font:500 10px/1 var(--fi);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);background:transparent;border:1px solid var(--rule);cursor:pointer;transition:all .12s;}
.ledger-show-more:hover{color:var(--dark);border-color:var(--dark);}

/* Budget strip */
.budget-strip{padding:10px 14px;border-bottom:1px solid var(--rules);background:var(--bgw);display:flex;flex-direction:column;gap:6px;overflow:hidden;}
.budget-streak{display:flex;gap:1px;width:100%;height:14px;}
.streak-seg{flex:1;min-width:2px;height:14px;transition:opacity 80ms;}
.streak-seg.won{background:var(--good);}
.streak-seg.lost{background:var(--red);}
.streak-seg:hover{opacity:.7;}
.streak-seg:first-child{border-radius:2px 0 0 2px;}
.streak-seg:last-child{border-radius:0 2px 2px 0;}
.budget-meta{display:flex;align-items:center;justify-content:space-between;}
.budget-text{font:500 9px/1 var(--fi);color:var(--muted);font-variant-numeric:tabular-nums;}
.budget-gei{font:700 12px/1 var(--fi);color:var(--good);}
.budget-gei-lbl{font:300 8px/1 var(--fi);color:var(--muted);}


/* Inning strip */
.inning-strip{display:flex;align-items:flex-end;gap:3px;padding:12px 20px 10px;}
.inn-col{display:flex;flex-direction:column;align-items:center;gap:0;flex:1;}
.inn-col-dots{display:flex;flex-direction:column-reverse;align-items:center;gap:2px;min-height:44px;justify-content:flex-start;}
.inn-dot{width:10px;height:10px;border-radius:50%;cursor:pointer;transition:opacity 80ms;flex-shrink:0;}
.inn-dot.ov{background:var(--good);}
.inn-dot.up{background:var(--red);}
.inn-dot.mi{background:var(--warn);border-radius:0;transform:rotate(45deg);width:8px;height:8px;}
.inn-dot:hover{opacity:.7;}
.inn-num{font:700 9px/1 var(--fi);color:var(--muted);margin-top:5px;}
.inn-net{font:600 8px/1 var(--fi);margin-bottom:3px;font-variant-numeric:tabular-nums;}
.inn-net.pos{color:var(--good);}
.inn-net.neg{color:var(--red);}
.inn-net.zero{color:var(--muted);}
.inn-empty{width:100%;height:2px;background:var(--bgi);margin:auto 0 7px;}

/* Pitcher splits */
.pitcher-split-row{display:flex;align-items:center;padding:8px 20px;border-bottom:1px solid var(--rule);gap:10px;cursor:default;}
.pitcher-split-row:last-child{border-bottom:none;}
.ps-pitcher-name{font:600 11px/1 var(--fi);color:var(--dark);width:120px;flex-shrink:0;}
.ps-stat{display:flex;flex-direction:column;gap:2px;width:42px;flex-shrink:0;}
.ps-stat-val{font:600 11px/1 var(--fi);color:var(--dark);font-variant-numeric:tabular-nums;}
.ps-stat-val.good{color:var(--good);}
.ps-stat-val.warn{color:var(--warn);}
.ps-stat-lbl{font:300 7px/1 var(--fi);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);}
.ps-bar-wrap{flex:1;display:flex;flex-direction:column;gap:3px;}
.ps-bar-lbl{font:300 8px/1 var(--fi);color:var(--muted);display:flex;justify-content:space-between;}
.ps-bar-track{height:5px;background:var(--bgi);position:relative;}
.ps-bar-fill{position:absolute;left:0;top:0;height:5px;background:var(--good);opacity:.75;}
.ps-bar-fill.warn{background:var(--warn);}
.ps-bar-marker{position:absolute;top:-2px;width:2px;height:9px;background:var(--dark);}

/* Pretext-measured truncation */
.gei-def-body.truncated{max-height:52px;overflow:hidden;-webkit-mask-image:linear-gradient(black 60%,transparent);mask-image:linear-gradient(black 60%,transparent);}
.pp-read-more{font:500 9px/1 var(--fi);letter-spacing:.06em;text-transform:uppercase;color:var(--red);background:none;border:none;cursor:pointer;padding:4px 0;margin-top:2px;}
.pp-read-more:hover{opacity:.7;}

/* ── BATTER PROFILE — CIQ hero (GEI variant, green), Blind Spot heatmap ── */
.ciq-hero{padding:20px 20px 16px;border-bottom:1px solid var(--rule);}
.ciq-row{display:flex;align-items:flex-start;gap:20px;}
.ciq-big{display:flex;flex-direction:column;gap:3px;}
.ciq-number{font:300 56px/1 var(--fi);letter-spacing:-.04em;color:var(--good);}
.ciq-label{font:500 8px/1 var(--fi);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);}
.ciq-def{flex:1;padding-left:20px;border-left:1px solid var(--rule);}
.ciq-def-title{font:600 11px/1 var(--fi);color:var(--dark);margin-bottom:4px;}
.ciq-def-body{font:300 10px/1.6 var(--fi);color:var(--muted);}
.ciq-def-formula{margin-top:8px;padding:6px 10px;background:var(--bgi);font:500 9px/1 var(--fi);letter-spacing:.04em;color:var(--dark);}
.budget-ciq{margin-left:auto;font:700 12px/1 var(--fi);color:var(--good);}
.budget-ciq-lbl{font:300 8px/1 var(--fi);color:var(--muted);}

/* ── PITCHER PROFILE — Painter Index, Arsenal, Heatmap, Battery, Division ── */

/* Painter Index hero */
.pi-hero{padding:20px 20px 16px;border-bottom:1px solid var(--rule);}
.pi-row{display:flex;align-items:flex-start;gap:20px;}
.pi-big{display:flex;flex-direction:column;gap:3px;}
.pi-number{font:300 56px/1 var(--fi);letter-spacing:-.04em;color:var(--red);}
.pi-label{font:500 8px/1 var(--fi);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);}
.pi-def{flex:1;padding-left:20px;border-left:1px solid var(--rule);}
.pi-def-title{font:600 11px/1 var(--fi);color:var(--dark);margin-bottom:4px;}
.pi-def-body{font:300 10px/1.6 var(--fi);color:var(--muted);}
.pi-def-formula{margin-top:8px;padding:6px 10px;background:var(--bgi);font:500 9px/1 var(--fi);letter-spacing:.04em;color:var(--dark);}

/* Heatmap */
.heat-wrap{padding:14px 20px 12px;border-bottom:1px solid var(--rule);display:flex;gap:20px;align-items:flex-start;}
.heat-legend{display:flex;flex-direction:column;gap:6px;padding-top:20px;}
.hl-row{display:flex;align-items:center;gap:6px;font:300 9px/1 var(--fi);color:var(--muted);}
.hl-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}

/* Batter splits (pitcher profile — who challenged this pitcher) */
.batter-row{display:flex;align-items:center;padding:8px 20px;border-bottom:1px solid var(--rule);gap:10px;}
.batter-row:last-child{border-bottom:none;}
.br-name{font:600 11px/1 var(--fi);color:var(--dark);width:120px;flex-shrink:0;}
.br-stat{display:flex;flex-direction:column;gap:2px;width:40px;flex-shrink:0;}
.br-stat-val{font:600 11px/1 var(--fi);color:var(--dark);font-variant-numeric:tabular-nums;}
.br-stat-lbl{font:300 7px/1 var(--fi);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);}
.br-bar-wrap{flex:1;display:flex;flex-direction:column;gap:3px;}
.br-bar-lbl{font:300 8px/1 var(--fi);color:var(--muted);display:flex;justify-content:space-between;}
.br-bar-track{height:5px;background:var(--bgi);position:relative;}
.br-bar-fill{position:absolute;left:0;top:0;height:5px;opacity:.75;}
.br-bar-marker{position:absolute;top:-2px;width:2px;height:9px;background:var(--dark);}

/* Ledger summary strip (pitcher) */
.ledger-summary{padding:10px 14px;border-bottom:1px solid var(--rules);background:var(--bgw);display:flex;gap:0;}
.ls-cell{flex:1;display:flex;flex-direction:column;gap:3px;border-right:1px solid var(--rule);padding:0 10px;}
.ls-cell:first-child{padding-left:0;}
.ls-cell:last-child{border-right:none;}
.ls-val{font:700 16px/1 var(--fi);font-variant-numeric:tabular-nums;color:var(--dark);}
.ls-val.red{color:var(--red);}
.ls-val.good{color:var(--good);}
.ls-val.warn{color:var(--warn);}
.ls-lbl{font:300 8px/1 var(--fi);color:var(--muted);letter-spacing:.04em;text-transform:uppercase;}

/* Battery section */
.battery-section{padding:0;border-bottom:1px solid var(--rule);}
.battery-header{padding:12px 20px 10px;display:flex;align-items:center;gap:10px;background:var(--bgw);border-bottom:1px solid var(--rule);}
.battery-icon{font:700 13px/1 var(--fi);letter-spacing:0;}
.battery-names{font:600 12px/1 var(--fi);color:var(--dark);letter-spacing:-.01em;}
.battery-sub{font:300 9px/1 var(--fi);color:var(--muted);margin-left:auto;}
.battery-metrics{padding:10px 20px;border-bottom:1px solid var(--rule);}
.battery-dist-row{display:flex;align-items:center;gap:10px;margin-bottom:7px;}
.battery-dist-row:last-child{margin-bottom:0;}
.battery-dist-lbl{font:500 8px/1 var(--fi);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);width:120px;flex-shrink:0;}
.battery-dist-svg{flex:1;height:22px;}
.battery-dist-val{font:700 11px/1 var(--fi);width:38px;text-align:right;font-variant-numeric:tabular-nums;flex-shrink:0;}
.battery-dist-rank{font:300 9px/1 var(--fi);color:var(--muted);width:50px;text-align:right;flex-shrink:0;}

/* Flip strip */
.flip-strip{display:flex;align-items:stretch;border-bottom:1px solid var(--rule);}
.flip-cell{flex:1;padding:10px 14px;border-right:1px solid var(--rule);display:flex;flex-direction:column;gap:3px;}
.flip-cell:last-child{border-right:none;}
.flip-val{font:300 28px/1 var(--fi);letter-spacing:-.03em;font-variant-numeric:tabular-nums;}
.flip-val.kflip{color:#B8860B;}
.flip-val.wflip{color:var(--red);}
.flip-val.pflip{color:var(--muted);}
.flip-lbl{font:500 8px/1 var(--fi);letter-spacing:.10em;text-transform:uppercase;color:var(--muted);}
.flip-sub{font:300 8px/1.4 var(--fi);color:var(--muted);margin-top:2px;}

/* Challenge alignment bar */
.align-wrap{padding:10px 20px 12px;border-bottom:1px solid var(--rule);}
.align-row{display:flex;align-items:center;gap:10px;margin-bottom:5px;}
.align-lbl{font:500 8px/1 var(--fi);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);width:120px;flex-shrink:0;}
.align-bar-track{flex:1;height:7px;background:var(--bgi);position:relative;}
.align-bar-fill{position:absolute;left:0;top:0;height:7px;background:var(--good);opacity:.8;}
.align-marker{position:absolute;top:-3px;width:2px;height:13px;background:var(--dark);}
.align-val{font:700 11px/1 var(--fi);width:36px;text-align:right;font-variant-numeric:tabular-nums;flex-shrink:0;}

/* Division comparison */
.div-row{display:flex;align-items:center;padding:8px 20px;border-bottom:1px solid var(--rule);gap:10px;}
.div-row:last-child{border-bottom:none;}
.div-row.highlight{background:rgba(252,61,33,.03);}
.div-team{font:700 11px/1 var(--fi);letter-spacing:.04em;width:36px;flex-shrink:0;}
.div-battery{font:300 9px/1 var(--fi);color:var(--muted);width:120px;flex-shrink:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.div-bar-track{flex:1;height:6px;background:var(--bgi);position:relative;}
.div-bar-fill{position:absolute;left:0;top:0;height:6px;opacity:.75;}
.div-bar-marker{position:absolute;top:-2px;width:2px;height:10px;background:var(--dark);}
.div-gei{font:700 11px/1 var(--fi);width:30px;text-align:right;font-variant-numeric:tabular-nums;flex-shrink:0;}
.div-gei.accent{color:var(--red);}
.div-gei.good{color:var(--good);}
.div-gei.red{color:var(--red);}
.div-rank{font:300 8px/1 var(--fi);color:var(--muted);width:42px;text-align:right;flex-shrink:0;}

/* Division standing (col3 compact) */
.ds-row{display:flex;align-items:center;gap:8px;padding:6px 14px;border-bottom:1px solid var(--rule);}
.ds-row:last-child{border-bottom:none;}
.ds-row.self{background:rgba(0,0,0,.02);}
.ds-row .team-logo{width:20px;height:20px;flex-shrink:0;}
.ds-abbr{font:600 9px/1 var(--fi);letter-spacing:.04em;color:var(--muted);width:24px;flex-shrink:0;}
.ds-row.self .ds-abbr{color:var(--dark);}
.ds-bar-track{flex:1;height:5px;background:var(--bgi);position:relative;}
.ds-bar-fill{position:absolute;left:0;top:0;height:5px;}
.ds-bar-marker{position:absolute;top:-2px;width:1px;height:9px;background:var(--dark);opacity:.3;}
.ds-gei{font:300 12px/1 var(--fi);color:var(--muted);width:26px;text-align:right;font-variant-numeric:tabular-nums;flex-shrink:0;letter-spacing:-.01em;}
.ds-gei.self{font-weight:600;}
.ds-ch{font:400 9px/1 var(--fi);color:var(--muted);width:18px;text-align:right;font-variant-numeric:tabular-nums;flex-shrink:0;}

/* Inning strip — pitcher POV classes */
.inn-net.good{color:var(--good);}
.inn-net.bad{color:var(--red);}

/* ═══════════════════════════════════════════════════════════════════
   TEAM PROFILE — Hexbin Zone, Analytics, Roster, Battery, Payroll
   ═══════════════════════════════════════════════════════════════════ */

/* Team header */
.team-hdr{background:var(--bg);border-bottom:2px solid var(--rules);padding:0 32px;}
.team-hdr-top{display:flex;align-items:center;gap:0;padding:16px 0 12px;border-bottom:1px solid var(--rule);}
.team-hdr-identity{display:flex;align-items:center;gap:14px;flex-shrink:0;}
.team-hdr-ribbon{flex:1;min-width:0;display:flex;align-items:center;gap:0;margin-left:20px;overflow:hidden;}
.team-hdr-ribbon .ribbon-games{flex:1;display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:4px 0;}
.team-hdr-ribbon .ribbon-games::-webkit-scrollbar{display:none;}
.team-hdr-ribbon .rib-date{font:700 8px/1 var(--fi);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding:0 10px;flex-shrink:0;}
.team-color-bar{width:5px;height:48px;border-radius:1px;flex-shrink:0;}
.team-city{font:300 12px/1 var(--fi);color:var(--muted);letter-spacing:.04em;}
.team-name-big{font:800 32px/1 var(--fi);letter-spacing:-.03em;color:var(--dark);}
.team-meta{display:flex;align-items:center;gap:10px;margin-top:4px;}
.team-record{font:300 12px/1 var(--fi);color:var(--muted);}
.team-div-tag{font:600 9px/1 var(--fi);letter-spacing:.10em;text-transform:uppercase;padding:3px 8px;background:var(--bgi);color:var(--muted);}
.abs-grade{display:flex;flex-direction:column;align-items:center;padding:6px 14px;border:2px solid rgba(46,125,50,.3);background:rgba(46,125,50,.04);flex-shrink:0;}
.abs-grade-val{font:300 36px/1 var(--fi);color:var(--good);letter-spacing:-.04em;}
.abs-grade-lbl{font:500 7px/1 var(--fi);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:2px;}

/* Compact stat line */
.team-stat-line{display:flex;align-items:center;gap:6px;padding:8px 32px;border-bottom:1px solid var(--rule);flex-wrap:wrap;}
.tsl-val{font:300 14px/1 var(--fi);color:var(--dark);font-variant-numeric:tabular-nums;letter-spacing:-.02em;}
.tsl-val.good{color:var(--good);}
.tsl-val.red{color:var(--red);}
.tsl-lbl{font:500 9px/1 var(--fi);color:var(--muted);letter-spacing:.06em;margin-right:2px;}
.tsl-sep{font:300 10px/1 var(--fi);color:var(--rule);margin:0 2px;}
.tsl-sep-v{width:1px;height:14px;background:var(--rule);flex-shrink:0;margin:0 6px;}
.tsl-rank{font:500 8px/1 var(--fi);letter-spacing:.06em;padding:2px 5px;background:var(--bgi);color:var(--muted);}
.tsl-rank.top{background:rgba(46,125,50,.1);color:var(--good);}
.tsl-type-tok{font:500 9px/1 var(--fi);letter-spacing:.04em;color:var(--muted);padding:2px 6px;background:var(--bgi);}

/* Team subway network section */
.team-subway-section{border-bottom:1px solid var(--rules);}
.team-subway-toggle{display:flex;align-items:center;justify-content:space-between;padding:8px 32px;cursor:pointer;user-select:none;transition:background 80ms;}
.team-subway-toggle:hover{background:var(--bgw);}
.team-subway-toggle.open{background:var(--bgw);border-bottom:1px solid var(--rule);}
.team-subway-toggle-left{display:flex;align-items:center;gap:8px;}
.team-subway-toggle-arrow{font-size:9px;color:var(--muted);width:12px;text-align:center;transition:transform 120ms;}
.team-subway-toggle-title{font:600 11px/1 var(--fi);letter-spacing:.02em;color:var(--dark);}
.team-subway-toggle-sub{font:300 10px/1 var(--fi);color:var(--muted);}
.team-subway-body{padding:0;}
.team-subway-section .sub-shell{border:none;border-top:none;}

/* Edge profile horizontal bars */
#edge-profile{border-top:1px solid var(--rule);}
.ep-chart{padding:6px 0 2px;}
.ep-row{display:flex;align-items:center;gap:0;height:22px;cursor:pointer;padding:0 10px;transition:background 60ms;}
.ep-row:hover{background:var(--bgw);}
.ep-row.active{background:rgba(252,61,33,.06);}
.ep-label{font:400 9px/1 var(--fi);color:var(--muted);width:32px;text-align:right;font-variant-numeric:tabular-nums;flex-shrink:0;margin-right:6px;}
.ep-row.active .ep-label{color:var(--dark);font-weight:600;}
.ep-bar-track{flex:1;height:10px;display:flex;background:var(--bgi);min-width:0;}
.ep-seg{height:100%;}
.ep-count{font:300 11px/1 var(--fi);color:var(--dark);width:30px;text-align:right;font-variant-numeric:tabular-nums;flex-shrink:0;letter-spacing:-.01em;margin-left:6px;}
.ep-pct{font:400 9px/1 var(--fi);color:var(--muted);width:26px;text-align:right;font-variant-numeric:tabular-nums;flex-shrink:0;}
.ep-note{padding:6px 10px 10px;font:300 9px/1.4 var(--fi);color:var(--muted);letter-spacing:.02em;}
.ep-clear{color:var(--red);cursor:pointer;text-decoration:underline;}
.ep-clear:hover{opacity:.7;}
.ep-call-toggle{display:flex;gap:0;padding:6px 10px 2px;}
.ep-ct{font:600 8px/1 var(--fi);letter-spacing:.06em;text-transform:uppercase;padding:3px 8px;border:1px solid var(--rules);background:none;color:var(--muted);cursor:pointer;transition:all 60ms;}
.ep-ct+.ep-ct{border-left:none;}
.ep-ct:hover{color:var(--dark);}
.ep-ct.on{background:var(--dark);color:var(--bg);border-color:var(--dark);}
.ep-empty{padding:12px 10px;font:300 10px/1 var(--fi);color:var(--muted);}

/* Challenge card game link */
.chal-game-link{color:var(--red);cursor:pointer;text-decoration:none;}
.chal-game-link:hover{text-decoration:underline;}

/* Battery partners */
.bp-header{display:flex;align-items:center;gap:0;padding:4px 14px;border-bottom:1px solid var(--rule);}
.bp-h-lbl{font:600 8px/1 var(--fi);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);width:36px;text-align:right;}
div.bp-row{display:flex;align-items:center;gap:0;padding:6px 14px;transition:background 60ms;}
div.bp-row:hover{background:var(--bgw);}
div.bp-name{font:400 11px/1 var(--fi);color:var(--dark);width:120px;flex-shrink:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.bp-bar-track{flex:1;height:8px;background:var(--bgi);min-width:0;}
.bp-bar-fill{height:100%;background:rgba(0,0,0,.20);}
.bp-stat{font:300 11px/1 var(--fi);color:var(--dark);width:36px;text-align:right;font-variant-numeric:tabular-nums;flex-shrink:0;}

/* Player page tooltip */

/* Zone quadrant grid */
.quad-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;padding:0 14px 10px;background:var(--bg);}
.quad-cell{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:8px 4px;border:1px solid var(--rule);background:var(--bg);}
.quad-cell.warm{background:rgba(252,61,33,.04);}
.quad-cell.hot{background:rgba(252,61,33,.10);}
.quad-n{font:300 16px/1 var(--fi);color:var(--dark);font-variant-numeric:tabular-nums;letter-spacing:-.02em;}
.quad-pct{font:300 9px/1 var(--fi);color:var(--muted);margin-top:2px;}

/* Role split */
.rs-bars{padding:8px 14px 6px;}
.rs-bar-row{display:flex;align-items:center;gap:8px;margin-bottom:4px;}
.rs-bar-label{font:600 9px/1 var(--fi);letter-spacing:.06em;color:var(--muted);width:28px;text-align:right;}
.rs-bar-track{flex:1;height:14px;display:flex;overflow:hidden;}
.rs-bar-seg{height:100%;}
.rs-detail{padding:4px 14px 10px;}
.rs-row{display:flex;align-items:center;gap:6px;padding:4px 0;border-bottom:1px solid var(--rule);}
.rs-row:last-child{border-bottom:none;}
.rs-dot{width:6px;height:6px;flex-shrink:0;}
.rs-role{font:500 10px/1 var(--fi);color:var(--dark);width:50px;}
.rs-count{font:300 12px/1 var(--fi);color:var(--dark);font-variant-numeric:tabular-nums;width:22px;text-align:right;letter-spacing:-.01em;}
.rs-pct{font:500 10px/1 var(--fi);color:var(--muted);width:28px;text-align:right;}
.rs-wr{font:300 9px/1 var(--fi);color:var(--muted);flex:1;}
.rs-diff{font:500 8px/1 var(--fi);color:var(--muted);letter-spacing:.02em;}
.rs-diff.high{color:var(--dark);}
.rs-diff.low{color:var(--red);}

/* Team vs League table */
.tvl-table{width:100%;border-collapse:collapse;padding:0 14px;}
.tvl-table th{font:500 8px/1 var(--fi);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);text-align:right;padding:4px 8px 6px;border-bottom:1px solid var(--rule);}
.tvl-table th:first-child{text-align:left;}
.tvl-table td{padding:5px 8px;border-bottom:1px solid var(--rule);font-variant-numeric:tabular-nums;}
.tvl-lbl{font:500 10px/1 var(--fi);color:var(--dark);text-align:left!important;}
.tvl-val{font:300 13px/1 var(--fi);color:var(--dark);text-align:right;font-variant-numeric:tabular-nums;letter-spacing:-.01em;}
.tvl-lg{font:400 11px/1 var(--fi);color:var(--muted);text-align:right;}
.tvl-diff{font:600 9px/1 var(--fi);color:var(--muted);letter-spacing:.02em;}
.tvl-diff.up{color:var(--dark);}
.tvl-diff.dn{color:var(--red);}

/* Division challenges compact */
.dc-list{padding:4px 14px 10px;}
.dc-row{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid var(--rule);}
.dc-row:last-child{border-bottom:none;}
.dc-row.self{background:rgba(0,0,0,.02);}
.dc-row .team-logo{width:20px;height:20px;flex-shrink:0;}
.dc-abbr{font:600 9px/1 var(--fi);letter-spacing:.04em;color:var(--muted);width:24px;flex-shrink:0;}
.dc-abbr.self{color:var(--dark);}
.dc-bar-track{flex:1;height:5px;background:var(--bgi);}
.dc-bar-fill{height:100%;}
.dc-ch{font:300 11px/1 var(--fi);color:var(--dark);font-variant-numeric:tabular-nums;width:20px;text-align:right;letter-spacing:-.01em;}
.dc-gei{font:400 9px/1 var(--fi);color:var(--muted);font-variant-numeric:tabular-nums;width:24px;text-align:right;}

/* Offense/Defense toggle */
.view-toggle{display:flex;gap:0;}
.vt-btn{font:600 9px/1 var(--fi);letter-spacing:.08em;text-transform:uppercase;padding:5px 12px;border:1px solid var(--rules);background:none;color:var(--muted);cursor:pointer;transition:all 80ms;}
.vt-btn:first-child{border-right:none;}
.vt-btn:hover{color:var(--dark);}
.vt-btn.on{background:var(--dark);color:var(--bg);border-color:var(--dark);}
.vt-sep{width:1px;height:18px;background:var(--rule);margin:0 8px;flex-shrink:0;}

/* Roster challenge count badge */
.rr-ch{font:500 8px/1 var(--fi);color:var(--muted);letter-spacing:.04em;padding:1px 4px;background:var(--bgi);flex-shrink:0;}

/* Hexbin zone column */
.hex-filter-row{padding:6px 12px;border-bottom:1px solid var(--rule);display:flex;gap:3px;flex-wrap:wrap;background:var(--bgw);flex-shrink:0;align-items:center;}
.hex-filter-row.lite{background:var(--bg);}
.hex-row-lbl{font:500 7px/1 var(--fi);letter-spacing:.10em;text-transform:uppercase;color:var(--muted);margin-right:4px;flex-shrink:0;}
.hex-row-sep{width:1px;height:16px;background:var(--rule);flex-shrink:0;margin:0 4px;}
.hchip{font:600 8px/1 var(--fi);letter-spacing:.06em;padding:3px 7px;border:1px solid var(--rules);background:none;color:var(--muted);cursor:pointer;}
.hchip:hover{color:var(--dark);border-color:var(--dark);}
.hchip.on{background:var(--bgi);color:var(--dark);border-color:var(--dark);}
.hex-canvas-wrap{padding:10px 8px 4px;background:var(--bg);display:flex;align-items:flex-start;justify-content:center;border-bottom:1px solid var(--rule);position:relative;}
#hex-svg{display:block;}
.hex-sub{padding:5px 14px 6px;font:300 8px/1 var(--fi);color:var(--muted);border-bottom:1px solid var(--rule);background:var(--bg);}
.hex-legend{display:flex;align-items:center;gap:8px;padding:6px 14px;border-bottom:1px solid var(--rule);}
.hex-legend-bar{flex:1;height:5px;background:linear-gradient(to right,rgba(252,61,33,.05),rgba(252,61,33,.15),#e8a820,#d06000,#b82000);}
.hex-legend-lbl{font:300 8px/1 var(--fi);color:var(--muted);}
.cmp-row{padding:7px 14px;display:flex;align-items:center;gap:6px;border-bottom:1px solid var(--rule);background:var(--bgw);}
.cmp-lbl{font:500 7px/1 var(--fi);letter-spacing:.10em;text-transform:uppercase;color:var(--muted);flex-shrink:0;}
.cmp-sel{font:300 10px/1 var(--fi);border:1px solid var(--rule);background:var(--bg);padding:3px 6px;outline:none;flex:1;color:var(--dark);}
.cmp-badge{font:600 8px/1 var(--fi);letter-spacing:.04em;padding:2px 7px;border:1px solid var(--rules);background:none;color:var(--muted);cursor:pointer;flex-shrink:0;}
.cmp-badge.on{background:var(--dark);color:#fff;border-color:var(--dark);}

/* Analytics column */
.analytics-col{border-right:1px solid var(--rule);display:flex;flex-direction:column;}

/* Battery table */
.battery-table{width:100%;border-collapse:collapse;}
.battery-table th{font:500 8px/1 var(--fi);letter-spacing:.10em;text-transform:uppercase;color:var(--muted);padding:7px 16px;text-align:left;border-bottom:1px solid var(--rule);background:var(--bgw);}
.battery-table th:not(:first-child){text-align:right;}
.battery-table td{font:300 11px/1 var(--fi);padding:7px 16px;border-bottom:1px solid var(--rule);font-variant-numeric:tabular-nums;}
.battery-table td:not(:first-child){text-align:right;}
.battery-table tr:last-child td{border-bottom:none;}
.bat-names{font:600 11px/1 var(--fi);color:var(--dark);}

/* Flip row (team level — 4 cells) */
.flip-table{width:100%;border-collapse:collapse;}
.flip-table th{font:500 8px/1 var(--fi);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:6px 14px;text-align:right;border-bottom:1px solid var(--rule);}
.flip-table th:first-child{text-align:left;}
.flip-side{font:500 9px/1 var(--fi);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:8px 14px;}
.flip-num{font:300 22px/1 var(--fi);letter-spacing:-.02em;font-variant-numeric:tabular-nums;text-align:right;padding:6px 14px;}

/* Payroll */
.payroll-hero{display:flex;align-items:stretch;border-bottom:1px solid var(--rule);}
.payroll-cell{flex:1;padding:14px 20px;border-right:1px solid var(--rule);display:flex;flex-direction:column;gap:3px;}
.payroll-cell:last-child{border-right:none;}
.payroll-lbl{font:500 8px/1 var(--fi);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);}
.payroll-val{font:300 28px/1 var(--fi);letter-spacing:-.02em;font-variant-numeric:tabular-nums;}
.payroll-sub{font:300 9px/1 var(--fi);color:var(--muted);}
.payroll-rank{font:600 8px/1 var(--fi);letter-spacing:.04em;padding:1px 5px;background:rgba(46,125,50,.1);color:var(--good);}

/* Star accountability table */
.star-table{width:100%;border-collapse:collapse;}
.star-table th{font:500 8px/1 var(--fi);letter-spacing:.10em;text-transform:uppercase;color:var(--muted);padding:7px 16px;text-align:left;border-bottom:1px solid var(--rule);background:var(--bgw);}
.star-table th:not(:first-child){text-align:right;}
.star-table td{font:300 11px/1 var(--fi);padding:7px 16px;border-bottom:1px solid var(--rule);font-variant-numeric:tabular-nums;}
.star-table td:not(:first-child){text-align:right;}
.star-table tr:last-child td{border-bottom:none;}
.star-name{font:600 11px/1 var(--fi);color:var(--dark);}
.star-pos{font:600 8px/1 var(--fi);letter-spacing:.06em;text-transform:uppercase;padding:2px 4px;background:var(--bgi);color:var(--muted);}
.value-tag{font:700 7px/1 var(--fi);letter-spacing:.06em;padding:2px 5px;}
.value-tag.elite{background:rgba(46,125,50,.12);color:var(--good);}
.value-tag.fair{background:rgba(0,0,0,.06);color:var(--muted);}
.value-tag.poor{background:rgba(252,61,33,.08);color:var(--red);}
.star-metric-lbl{font:400 8px/1 var(--fi);color:var(--muted);letter-spacing:.04em;}
.star-table th.has-tip{cursor:help;border-bottom:1px dashed rgba(0,0,0,.25);}
.ab-track{height:5px;background:var(--bgi);position:relative;display:inline-block;width:70px;vertical-align:middle;}
.ab-fill{position:absolute;left:0;top:0;height:5px;}
.ab-marker{position:absolute;top:-2px;width:2px;height:9px;background:var(--dark);}

/* Roster column */
.roster-col{display:flex;flex-direction:column;}
.roster-hdr{padding:10px 16px;border-bottom:1px solid var(--rule);background:var(--bgw);display:flex;align-items:center;justify-content:space-between;}
.roster-hdr-title{font:600 10px/1 var(--fi);letter-spacing:.10em;text-transform:uppercase;color:var(--dark);}
.roster-filter{display:flex;gap:3px;}
.rfchip{font:500 8px/1 var(--fi);letter-spacing:.06em;padding:3px 8px;border:1px solid var(--rules);background:none;color:var(--muted);cursor:pointer;}
.rfchip.on{background:var(--dark);color:#fff;border-color:var(--dark);}
.roster-row{display:flex;align-items:center;padding:9px 14px;border-bottom:1px solid var(--rule);cursor:pointer;transition:background 80ms;gap:8px;}
.roster-row:hover{background:var(--bgw);}
.rr-pos{font:700 8px/1 var(--fi);letter-spacing:.06em;text-transform:uppercase;padding:2px 5px;background:var(--bgi);color:var(--muted);flex-shrink:0;min-width:24px;text-align:center;}
.rr-pos.c{background:rgba(46,125,50,.12);color:var(--good);}
.rr-pos.sp{background:rgba(252,61,33,.08);color:var(--red);}
.rr-name{font:600 11px/1 var(--fi);color:var(--dark);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.rr-metric{font:700 11px/1 var(--fi);flex-shrink:0;font-variant-numeric:tabular-nums;}
.rr-metric.good{color:var(--good);}
.rr-metric.accent{color:var(--red);}
.rr-bar-track{width:50px;height:5px;background:var(--bgi);position:relative;flex-shrink:0;}
.rr-bar-fill{position:absolute;left:0;top:0;height:5px;opacity:.75;}
.rr-lbl{font:300 8px/1 var(--fi);color:var(--muted);flex-shrink:0;}

/* ── UMPIRE PAGE RESPONSIVE (@container) ── */
@container app (max-width: 1199px) {
  .intel-grid{grid-template-columns:repeat(2,1fr);}
  .ump-stat-strip{grid-template-columns:repeat(3,1fr);}
}
@container app (max-width: 767px) {
  .intel-panel{padding:16px 12px;}
  .intel-grid{grid-template-columns:1fr;}
  .intel-item{border-right:none;border-bottom:1px solid var(--rule);padding:12px 0;}
  .intel-item:last-child{border-bottom:none;}
  .ump-stat-strip{grid-template-columns:repeat(2,1fr);}
  .tbl-wrap{-webkit-overflow-scrolling:touch;overflow-x:auto;}
  .game-tbl,.pitch-tbl{min-width:600px;}
  .g,.g2,.g3{min-width:0;overflow:hidden;}
  .sub-ctrl-row{flex-wrap:wrap;}
  .szp-wrap{min-width:0;overflow:hidden;}
  .sub-shell{min-width:0;overflow:hidden;}
}

/* ── TEAM PROFILE RESPONSIVE (@container) ── */
@container app (max-width: 1199px) {
  .team-hdr{padding:0 16px;}
  .team-stat-line{padding:8px 16px;}
  .team-subway-toggle{padding:8px 16px;}
  .team-page .main-grid{grid-template-columns:340px 1fr !important;min-height:auto;}
  .team-page .main-grid .ledger-col{grid-column:1 / -1;border-top:1px solid var(--rule);max-height:400px;overflow-y:auto;scrollbar-width:thin;}
  .star-table,.battery-table,.flip-table,.tvl-table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;}
}
@container app (max-width: 767px) {
  .team-hdr{padding:0 12px;}
  .team-hdr-top{flex-wrap:wrap;gap:8px;}
  .team-hdr-ribbon{margin-left:0;width:100%;margin-top:8px;}
  .team-name-big{font-size:24px;}
  .team-stat-line{padding:8px 12px;gap:4px;}
  .team-subway-toggle{padding:8px 12px;}
  .team-page .main-grid{display:flex !important;flex-direction:column;min-height:auto;}
  .team-page .zone-col{order:1;border-right:none;border-bottom:1px solid var(--rule);}
  .team-page .analysis-col{order:2;border-right:none;border-bottom:1px solid var(--rule);}
  .team-page .ledger-col{order:3;max-height:500px;overflow-y:auto;scrollbar-width:thin;}
  .star-table,.battery-table,.flip-table{min-width:500px;}
}

/* ── GAME PAGE RESPONSIVE (@container) ── */
@container app (max-width: 1199px) {
  .gp .main-grid{grid-template-columns:1fr 280px !important;min-height:auto;}
  .gp .main-grid.v2{grid-template-columns:340px 1fr !important;}
  .gp .gp-active-col{grid-column:1 / -1;border-top:1px solid var(--rule);}
}
@container app (max-width: 767px) {
  .gp-hdr-grid{grid-template-columns:1fr !important;min-height:auto;}
  .gp-hdr-left{border-right:none;border-bottom:1px solid var(--rule);}
  .gp-hdr-center{border-right:none;border-bottom:1px solid var(--rule);overflow:hidden;max-width:100%;}
  .gp-hdr-linescore{overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .gp-hdr-right{max-width:100%;overflow-x:auto;}
  .gp .main-grid{display:flex !important;flex-direction:column;min-height:auto;}
  .gp-zone-col{border-right:none;border-bottom:1px solid var(--rule);min-height:auto;}
  .gp-zone-scatter-wrap{padding:12px;}
  #gp-zone-svg{max-width:100%;height:auto;}
  .gp-event-col{border-right:none;border-bottom:1px solid var(--rule);}
  .gp .gp-active-col{border-top:1px solid var(--rule);}
  .gp .ump-section{padding:16px 12px;}
  .gp .ump-body{flex-direction:column;gap:12px;}
  .gp .ump-numbers{flex-wrap:wrap;gap:16px;}
}

/* ── PLAYER PROFILE RESPONSIVE (@container) ── */
@container app (max-width: 1199px) {
  .main-grid{grid-template-columns:340px 1fr !important;min-height:auto;}
  .ledger-col{grid-column:1 / -1;border-top:1px solid var(--rule);max-height:400px;overflow-y:auto;scrollbar-width:thin;}
  .ledger-col::-webkit-scrollbar{width:3px;}
  .ledger-col::-webkit-scrollbar-thumb{background:rgba(0,0,0,.15);}
  .hero-strip{grid-template-columns:repeat(3,1fr);}
  .hero-cell:nth-child(4),.hero-cell:nth-child(5){border-top:1px solid var(--rule);}
}

@container app (max-width: 767px) {
  .main-grid{display:flex !important;flex-direction:column;min-height:auto;}
  .zone-col{order:1;border-right:none;border-bottom:1px solid var(--rule);}
  .analysis-col{order:2;border-right:none;border-bottom:1px solid var(--rule);}
  .ledger-col{order:3;max-height:500px;overflow-y:auto;scrollbar-width:thin;}
  .ledger-col::-webkit-scrollbar{width:3px;}
  .ledger-col::-webkit-scrollbar-thumb{background:rgba(0,0,0,.15);}

  .player-hdr{padding:0 12px;}
  .player-hdr-top{flex-wrap:wrap;gap:10px;}
  .player-name{font-size:22px;}
  .player-hdr-right{margin-left:0;width:100%;flex-direction:row;align-items:center;justify-content:space-between;}

  .hero-strip{grid-template-columns:repeat(2,1fr);}
  .hero-cell{padding:10px 12px;}
  .hero-val{font-size:24px;}
  .hero-cell:last-child{grid-column:1 / -1;}

  .time-bar{flex-wrap:wrap;gap:0;}
  .time-btn{font-size:8px;padding:0 8px;height:30px;}
  .date-range{display:none;}

  .zone-scatter-wrap svg{max-width:100%;height:auto;}
  .zone-hdr{flex-direction:column;align-items:flex-start;gap:6px;}
  .zone-filter-chips{margin-left:0;flex-wrap:wrap;gap:3px;}

  .gei-hero{padding:12px;}
  .gei-formula-row{flex-direction:column;gap:12px;}
  .gei-def{padding-left:0;border-left:none;border-top:1px solid var(--rule);padding-top:10px;}
  .gei-number{font-size:36px;}

  .count-grid{margin:0 12px 12px;overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .inning-strip{padding:10px 12px;}

  .sbi-toggle-row{flex-wrap:wrap;gap:4px;}
  .sbi-toggle-row button{font-size:8px;padding:2px 6px;}

  .pt-table-wrap,.count-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .pt-table,.count-table{min-width:320px;}

  .blind-spots-grid{flex-wrap:wrap;gap:8px;}
  .blind-spot-cell{min-width:calc(50% - 4px);}

  .vs-pitcher-table{overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .vs-pitcher-table table{min-width:340px;}

  .ledger-feed{max-height:400px;}
  .chal-card{padding:8px 10px;gap:6px;}
}

/* ══════════════════════════════════════════════════════════════
   LAYOUT ENGINE — RESPONSIVE BREAKPOINTS
   Uses @container queries on #app so layout responds to the
   actual container width, not the viewport. This lets the
   layout engine + CSS work together at any size.
   ══════════════════════════════════════════════════════════════ */
#app { container-type: inline-size; container-name: app; }

/* Tablet: 2 columns — zone + event stacked left, feed right */
@container app (max-width: 1199px) {
  .lf-main-grid {
    grid-template-columns: 1fr 1fr !important;
    min-height: auto;
  }
  .lf-zone-col { grid-column: 1; }
  .lf-event-col { grid-column: 1; }
  .ai-commentary { grid-column: 1 / -1; }
  .lf-right-col { grid-column: 2; grid-row: 1 / span 3; }

  .tally-strip { flex-wrap: wrap; gap: 4px 12px; padding: 8px 16px; }
  .ribbon-games { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .zone-filter-chips { flex-wrap: wrap; gap: 4px; }
}

/* Mobile: single column, priority-ordered stacking */
@container app (max-width: 767px) {
  .lf-main-grid {
    grid-template-columns: 1fr !important;
    display: flex !important;
    flex-direction: column;
    min-height: auto;
  }

  .lf-zone-col { order: 1; border-right: none; border-bottom: 1px solid var(--rule); }
  .ai-commentary { order: 2; }
  .lf-event-col { order: 3; border-right: none; border-bottom: 1px solid var(--rule); }
  .lf-right-col { order: 4; }

  .lf-zone-scatter-wrap { max-width: 100%; overflow: hidden; }
  #live-zone-container svg { max-width: 100%; height: auto; }
  .ez-render { min-height: 100px; }

  .tally-strip { flex-wrap: wrap; gap: 2px 8px; padding: 8px 12px; }
  .tally-item { min-width: 60px; }
  .tally-num { font-size: 16px; }
  .tally-lbl { font-size: 7px; }
  .tally-context { width: 100%; text-align: right; margin-top: 4px; }

  .ribbon-shell { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .ribbon-row { min-width: max-content; }
  .ribbon-games { overflow-x: auto; gap: 4px; }

  .lf-zone-hdr { flex-direction: column; align-items: flex-start; gap: 6px; padding: 8px 12px; }
  .zone-filter-chips { flex-wrap: wrap; gap: 3px; }
  .zchip { font-size: 7px; padding: 3px 6px; }

  .traj-stats { flex-wrap: wrap; gap: 4px; }
  .traj-stat { min-width: 55px; }

  .fi-card { padding: 8px 10px; gap: 6px; }
  .ai-body { padding: 10px 12px; font-size: 11px; }

  .lf-ump-section { padding: 12px; }
  .lf-ump-grid { gap: 6px; }
  .lf-ump-card { min-width: 100px; }

  .ez-stats { flex-wrap: wrap; }
  .ez-stat { min-width: 60px; }
}

/* ══════════════════════════════════════════════════════════════
   MOBILE PHASE 1 — Touch targets, readability, padding
   All rules under @container app so they respond to #app width.
   ══════════════════════════════════════════════════════════════ */

@container app (max-width: 767px) {

  /* ── Global touch ── */
  * { -webkit-tap-highlight-color: transparent; }

  /* ── Ribbon game tiles — larger touch, single-tap affordance ── */
  .game-tile { touch-action: manipulation; min-height: 80px; }
  .game-tile .tile-tap-hint {
    display: block; position: absolute; bottom: 0; left: 0; right: 0;
    font: 500 7px/1 var(--fi); letter-spacing: .10em; text-transform: uppercase;
    color: var(--muted); text-align: center; padding: 3px 0;
    background: linear-gradient(transparent, rgba(0,0,0,.03));
  }

  /* ── Zone filter chips — 44px touch target ── */
  .zchip { font-size: 9px; padding: 8px 10px; min-height: 32px; display: inline-flex; align-items: center; }
  .zchip-sep { height: 20px; margin: 0 2px; }
  .zone-filter-chips { gap: 4px; }

  /* ── Subway filter chips — 44px touch ── */
  .sub-filter-chip { padding: 8px 10px; font-size: 9px; min-height: 32px; }
  .sub-ctrl-row { gap: 5px; padding: 8px 10px; }

  /* ── Time period buttons — thumb-friendly ── */
  .time-btn { height: 40px; padding: 0 12px; font-size: 9px; }
  .time-bar { flex-wrap: wrap; }

  /* ── Feed tabs — taller touch target ── */
  .lf-feed-tab { padding: 12px 0; font-size: 10px; }

  /* ── Leaderboard tabs ── */
  .lb3-tab { padding: 0 12px; height: 40px; font-size: 10px; }

  /* ── Player header — more room ── */
  .player-hdr { padding: 0 12px; }
  .player-name { font-size: 20px; }
  .player-hdr-right { flex-wrap: wrap; }

  /* ── Team header — tighter padding ── */
  .team-hdr { padding: 0 12px; }
  .team-stat-line { padding: 8px 12px; }
  .team-subway-toggle { padding: 8px 12px; }

  /* ── Section headers — more breathing room ── */
  .sec-hdr { padding: 10px 12px 8px; }

  /* ── Typography bumps for readability ── */
  .fi-card { font-size: 12px; }
  .ai-body { font-size: 12px; line-height: 1.5; }
  .hero-lbl { font-size: 9px; }
  .hero-val { font-size: 22px; }
  .hero-sub { font-size: 10px; }
  .tally-lbl { font-size: 8px; }
  .tally-num { font-size: 18px; }

  /* ── Tally strip — touch for toggle ── */
  .tally-item { min-height: 40px; display: flex; flex-direction: column; justify-content: center; }

  /* ── Wire hub — touch-friendly tabs ── */
  .wh-tab { padding: 0 14px 12px; font-size: 10px; }

  /* ── Collapsible sections — larger toggle target ── */
  .sec-toggle, .team-subway-toggle { min-height: 44px; }

  /* ── Footer — space ── */
  .site-footer { padding: 16px 12px; font-size: 10px; }

  /* ── Search input — taller ── */
  .search-input { padding: 10px 12px; font-size: 14px; }

  /* ── Nav overlay links — generous tap target ── */
  .mobile-nav-overlay .nav-lnk { padding: 18px 0; font-size: 14px; }
}

/* @media fallback for elements outside #app (header, footer) */
@media (max-width: 767px) {
  .site-hdr { padding: 0; }
  .hdr-inner { padding: 0 12px; gap: 12px; }
  .pi-wm-r, .pi-wm-l { font-size: 20px; }
  .pi-tagline { display: none; }
  .search-wrap { display: none; } /* search via mobile button instead */
  .mobile-search-btn { display: flex !important; }
  .mobile-nav-toggle { display: flex; }
  .site-nav { display: none; }
  .settings-btn { display: none; }
  .site-footer { padding: 16px 12px; flex-wrap: wrap; gap: 4px; }
  .foot-copy { font-size: 9px; }
}

/* ==========================================================================
   Query Bar — AI Search
   ========================================================================== */

.qb {
  max-height: 0;
  overflow: hidden;
  transition: max-height 250ms var(--ease, cubic-bezier(0,0,.2,1));
  border-bottom: 1px solid var(--rule);
  background: var(--bg);
}
.qb--open { max-height: 600px; overflow: visible; }

.qb-inner {
  max-width: 960px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  padding: 0 16px;
  gap: 8px;
  height: 44px;
}

.qb-icon { color: var(--muted); flex-shrink: 0; display: flex; }

.qb-input {
  flex: 1;
  height: 44px;
  padding: 0;
  font: 300 13px/1 'Inter', sans-serif;
  color: var(--dark);
  background: none;
  border: none;
  outline: none;
}
.qb-input::placeholder { color: var(--muted); font-weight: 300; }

.qb-hint {
  font: 500 9px/1 'Inter', sans-serif;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--red);
  opacity: .7;
  flex-shrink: 0;
}

.qb-badge {
  font: 600 10px/1 'Inter', sans-serif;
  background: var(--red);
  color: #fff;
  padding: 2px 6px;
  border-radius: 2px;
  flex-shrink: 0;
}

.qb-close {
  background: none;
  border: none;
  font-size: 18px;
  color: var(--muted);
  cursor: pointer;
  padding: 4px;
  line-height: 1;
}
.qb-close:hover { color: var(--dark); }

/* ── Interpretation row ─────────────────────────────────────────────── */

.qb-interp {
  max-width: 960px;
  margin: 0 auto;
  padding: 8px 16px 10px;
  border-top: 1px solid var(--rule);
}

.qb-interp-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font: 400 12px/1.4 'Inter', sans-serif;
  color: var(--dark);
}

.qb-interp-label {
  font-weight: 600;
  font-size: 10px;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--muted);
  flex-shrink: 0;
}

.qb-interp-text { flex: 1; min-width: 0; }

.qb-cost {
  font: 400 10px/1 'Inter', sans-serif;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

.qb-tag {
  display: inline-block;
  font: 500 10px/1 'Inter', sans-serif;
  background: var(--bgw);
  color: var(--dark);
  padding: 2px 6px;
  border-radius: 2px;
  border: 1px solid var(--rule);
}

.qb-resolved {
  font: 400 11px/1 'Inter', sans-serif;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 4px;
}

/* ── Loading ────────────────────────────────────────────────────────── */

.qb-loading {
  display: flex;
  align-items: center;
  gap: 8px;
  font: 400 12px/1 'Inter', sans-serif;
  color: var(--muted);
}

.qb-loading-dot {
  width: 8px; height: 8px;
  background: var(--red);
  border-radius: 50%;
  animation: qb-pulse 1s ease-in-out infinite;
}
@keyframes qb-pulse {
  0%, 100% { opacity: .3; transform: scale(.8); }
  50% { opacity: 1; transform: scale(1); }
}

/* ── Error ──────────────────────────────────────────────────────────── */

.qb-error {
  font: 400 12px/1.4 'Inter', sans-serif;
  color: var(--red);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.qb-error-hint {
  font: 300 11px/1 'Inter', sans-serif;
  color: var(--muted);
}

/* ── Results ────────────────────────────────────────────────────────── */

.qb-results {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 16px 12px;
}

.qb-results-meta {
  font: 400 11px/1 'Inter', sans-serif;
  color: var(--muted);
  padding: 4px 0 8px;
  font-variant-numeric: tabular-nums;
}

.qb-empty {
  font: 400 12px/1.4 'Inter', sans-serif;
  color: var(--muted);
  padding: 12px 0;
}

.qb-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.qb-table {
  width: 100%;
  border-collapse: collapse;
  font: 400 11px/1.3 'Inter', sans-serif;
  font-variant-numeric: tabular-nums;
}

.qb-table thead th {
  font-weight: 600;
  font-size: 9px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 6px 8px;
  text-align: left;
  border-bottom: 1px solid var(--rules);
  white-space: nowrap;
  position: sticky;
  top: 0;
  background: var(--bg);
}

.qb-table tbody td {
  padding: 5px 8px;
  border-bottom: 1px solid var(--rule);
  white-space: nowrap;
  color: var(--dark);
}

.qb-table tbody tr:hover td { background: var(--bgw); }

.qb-td-num { font-variant-numeric: tabular-nums; text-align: right; }
.qb-td-date { color: var(--muted); font-size: 10px; }
.qb-td-chall { color: var(--red); font-weight: 600; font-size: 10px; }
.qb-td-miss { color: #E67E22; }

/* ==========================================================================
   How It Works Page
   ========================================================================== */

.hiw-page {
  max-width: min(860px, 100%);
  box-sizing: border-box;
  margin: 0 auto;
  padding: var(--sp-7) 0 0;
}

/* Hero */
.hiw-hero { margin-bottom: var(--sp-6); }

.hiw-h1 {
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  margin-bottom: var(--sp-3);
}

.hiw-subtitle {
  font-size: 15px;
  line-height: 1.7;
  color: var(--sec);
  max-width: 620px;
}

.hiw-subtitle em {
  font-style: normal;
  font-weight: 700;
  color: var(--text);
}

.hiw-disclaimer {
  margin-top: var(--sp-4);
  font-size: 13px;
  color: var(--muted);
  line-height: 1.7;
  max-width: 620px;
  border-left: 2px solid var(--rule);
  padding-left: var(--sp-4);
}

/* Back-to-overview link (sub-pages only) */
.hiw-back {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--sp-4);
}
.hiw-back a {
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.hiw-back a:hover {
  color: var(--text);
  border-bottom-color: var(--rule);
}

/* Sub-page tiles on landing */
.hiw-subpage-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-5);
  margin-top: var(--sp-4);
}
.hiw-subpage-tile {
  display: block;
  padding: var(--sp-5);
  border: 1px solid var(--rule);
  text-decoration: none;
  color: var(--text);
  transition: border-color 120ms ease, background 120ms ease;
}
.hiw-subpage-tile:hover {
  border-color: var(--text);
  background: var(--bgw);
}
.hiw-subpage-tile-title {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: var(--sp-2);
}
.hiw-subpage-tile-desc {
  font-size: 13px;
  color: var(--sec);
  line-height: 1.6;
  margin-bottom: var(--sp-3);
}
.hiw-subpage-tile-cta {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--red);
  font-weight: 600;
}
@media (max-width: 640px) {
  .hiw-subpage-tiles { grid-template-columns: 1fr; }
}

/* TOC */
.hiw-toc {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;
  padding: var(--sp-4) 0;
}

.hiw-toc-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-right: var(--sp-2);
}

.hiw-toc a {
  font-size: 13px;
  font-weight: 500;
  color: var(--sec);
  transition: color var(--tf);
  border-bottom: 1px solid transparent;
}

.hiw-toc a:hover {
  color: var(--red);
  border-bottom-color: var(--red);
}

/* Section headings */
.hiw-section { padding: var(--sp-7) 0 var(--sp-5); }

.hiw-h2 {
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: var(--sp-3);
}

.hiw-h3 {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: var(--sp-3);
  color: var(--text);
}

.hiw-intro {
  font-size: 14px;
  line-height: 1.7;
  color: var(--sec);
  max-width: 620px;
  margin-bottom: var(--sp-6);
}

/* ── ABS Rules Grid ─────────────────────────────────────────── */

.hiw-rules-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-5);
}

.hiw-rule-item {
  display: flex;
  gap: var(--sp-4);
  align-items: flex-start;
}

.hiw-rule-num {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--red);
  min-width: 36px;
  text-align: right;
  line-height: 1.2;
  padding-top: 2px;
  font-variant-numeric: tabular-nums;
}

.hiw-rule-text {
  font-size: 13px;
  line-height: 1.65;
  color: var(--sec);
}

.hiw-rule-text strong {
  color: var(--text);
  font-weight: 600;
}

/* ── Live Example Containers ────────────────────────────────── */

.hiw-live-example {
  margin-top: var(--sp-4);
}

.hiw-example-label {
  font: 600 9px/1 var(--fi);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--sp-2);
}

/* Ribbon demo */
.hiw-ribbon-demo {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 12px 0;
}

/* Callout grid */
.hiw-callout-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
  margin-top: var(--sp-4);
}

.hiw-callout {
  border-top: 1px solid var(--rule);
  padding-top: var(--sp-3);
}

.hiw-callout-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
  letter-spacing: -0.01em;
}

.hiw-callout-desc {
  font-size: 12px;
  line-height: 1.6;
  color: var(--sec);
}

.hiw-callout-desc strong {
  font-weight: 600;
  color: var(--text);
}

.hiw-callout-desc em {
  font-style: normal;
  font-weight: 600;
  color: var(--text);
}

/* 3D controls demo */
.hiw-3d-controls-demo {
  background: var(--bg);
  border: 1px solid var(--rule);
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  pointer-events: none;
}

.hiw-3d-controls-demo .ctrl-sep {
  width: 1px;
  height: 20px;
  background: var(--rule);
  margin: 0 4px;
}

.hiw-3d-controls-demo .ctrl-lbl {
  font: 500 8px/1 var(--fi);
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--muted);
  margin-right: 4px;
}

.hiw-3d-controls-demo .pbtn {
  height: 28px;
  min-width: 28px;
  border: 1px solid var(--rules);
  background: none;
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 500 11px/1 var(--fi);
  flex-shrink: 0;
  padding: 0 6px;
}

.hiw-3d-controls-demo .pbtn.play {
  background: var(--dark);
  color: #fff;
  border-color: var(--dark);
  min-width: 56px;
  gap: 5px;
  font-size: 10px;
  letter-spacing: .06em;
}

.hiw-3d-controls-demo .ccam {
  font: 500 8px/1 var(--fi);
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 4px 9px;
  border: 1px solid var(--rules);
  background: none;
  color: var(--muted);
}

.hiw-3d-controls-demo .ccam.on {
  color: var(--dark);
  border-color: var(--dark);
  background: var(--bgw);
}

.hiw-3d-controls-demo .ccam.on.r {
  color: var(--red);
  border-color: var(--red);
  background: rgba(252,61,33,.06);
}

.hiw-3d-controls-demo .mode-chip {
  font: 600 9px/1 var(--fi);
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border: 1px solid var(--rules);
  background: none;
  color: var(--muted);
}

.hiw-3d-controls-demo .mode-chip.on {
  background: var(--red);
  color: #fff;
  border-color: var(--red);
}

.hiw-3d-row {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

@media (max-width: 768px) {
  .hiw-callout-grid { grid-template-columns: 1fr; }
  .hiw-ribbon-demo { flex-wrap: nowrap; }
}

/* ── Flip Concept Box ───────────────────────────────────────── */

.hiw-concept-box {
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: var(--sp-5) 0;
  margin-bottom: var(--sp-6);
}

.hiw-concept-box > p {
  font-size: 14px;
  line-height: 1.7;
  color: var(--sec);
  margin-bottom: var(--sp-4);
}

.hiw-concept-box > p strong {
  color: var(--text);
  font-weight: 700;
}

.hiw-flip-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-5);
  margin: var(--sp-5) 0;
}

.hiw-flip-card {
  display: flex;
  gap: var(--sp-4);
  align-items: flex-start;
  padding: var(--sp-4);
  border-left: 3px solid var(--rule);
}

.hiw-flip-k { border-left-color: var(--good); }
.hiw-flip-bb { border-left-color: var(--red); }

.hiw-flip-icon {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.04em;
  min-width: 36px;
  text-align: center;
  line-height: 1;
  padding-top: 2px;
}

.hiw-flip-k .hiw-flip-icon { color: var(--good); }
.hiw-flip-bb .hiw-flip-icon { color: var(--red); }

.hiw-flip-card strong {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: var(--sp-1);
}

.hiw-flip-card p {
  font-size: 13px;
  line-height: 1.65;
  color: var(--sec);
  margin: 0;
}

.hiw-flip-card em {
  font-style: normal;
  font-weight: 600;
  color: var(--text);
}

.hiw-flip-note {
  font-size: 13px;
  line-height: 1.7;
  color: var(--muted);
  border-left: 2px solid var(--rule);
  padding-left: var(--sp-4);
  margin-top: var(--sp-2);
}

.hiw-flip-note strong {
  color: var(--sec);
  font-weight: 600;
}

@media (max-width: 768px) {
  .hiw-flip-pair { grid-template-columns: 1fr; }
}

/* ── Inline Term Note ───────────────────────────────────────── */

.hiw-term-note {
  font-size: 12px;
  line-height: 1.65;
  color: var(--muted);
  padding: var(--sp-4) 0;
  background: var(--bg);
}

.hiw-term-note strong {
  color: var(--sec);
  font-weight: 700;
}

/* ── Metric Cards ───────────────────────────────────────────── */

.hiw-metrics-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--rule);
}

.hiw-metric {
  background: var(--bg);
  padding: var(--sp-5) 0;
}

.hiw-metric-hdr {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}

.hiw-acro {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--red);
  min-width: 56px;
  text-align: center;
  background: rgba(252,61,33,.06);
  padding: var(--sp-1) var(--sp-2);
  border: 1px solid rgba(252,61,33,.15);
}

.hiw-metric-title {
  flex: 1;
  min-width: 0;
}

.hiw-name {
  display: block;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
}

.hiw-oneliner {
  display: block;
  font-size: 13px;
  color: var(--sec);
  margin-top: 2px;
}

.hiw-dir {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 3px 8px;
  white-space: nowrap;
}

.hiw-dir.dir-high {
  color: var(--good);
  background: rgba(46,125,50,.08);
  border: 1px solid rgba(46,125,50,.2);
}

.hiw-dir.dir-low {
  color: var(--warn);
  background: rgba(180,83,9,.08);
  border: 1px solid rgba(180,83,9,.2);
}

.hiw-metric-body {
  margin-top: var(--sp-4);
  padding-left: 76px;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.hiw-formula-row,
.hiw-scale-row,
.hiw-example-row,
.hiw-why-row {
  display: flex;
  gap: var(--sp-4);
  font-size: 13px;
  line-height: 1.65;
}

.hiw-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  min-width: 72px;
  padding-top: 3px;
  flex-shrink: 0;
}

.hiw-formula {
  font-family: var(--fi);
  font-weight: 600;
  font-size: 13px;
  color: var(--text);
  background: var(--bgw);
  padding: 2px 8px;
  letter-spacing: -0.01em;
}

.hiw-scale {
  font-size: 13px;
  color: var(--sec);
  font-variant-numeric: tabular-nums;
}

.hiw-example {
  font-size: 13px;
  color: var(--sec);
}

.hiw-why {
  font-size: 13px;
  color: var(--sec);
}

.hiw-why em {
  font-style: normal;
  font-weight: 600;
  color: var(--text);
}

/* ── Feature Cards ──────────────────────────────────────────── */

.hiw-pages-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-5);
}

.hiw-feature {
  border-top: 1px solid var(--rule);
  padding-top: var(--sp-4);
}

.hiw-feature-title {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: var(--sp-2);
}

.hiw-feature-desc {
  font-size: 13px;
  color: var(--sec);
  line-height: 1.65;
  margin-bottom: var(--sp-3);
}

.hiw-tips {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.hiw-tips li {
  font-size: 12px;
  line-height: 1.6;
  color: var(--sec);
  padding-left: 14px;
  position: relative;
}

.hiw-tips li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 7px;
  width: 5px;
  height: 5px;
  background: var(--red);
}

.hiw-tips li strong {
  font-weight: 600;
  color: var(--text);
}

/* ── Detail Grid (Ribbon, Subway, Zone) ─────────────────────── */

.hiw-detail-grid {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--rule);
}

.hiw-detail-item {
  display: flex;
  gap: var(--sp-5);
  padding: var(--sp-4) 0;
  background: var(--bg);
}

.hiw-detail-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  min-width: 120px;
  flex-shrink: 0;
  letter-spacing: -0.01em;
}

.hiw-detail-val {
  font-size: 13px;
  line-height: 1.65;
  color: var(--sec);
}

.hiw-detail-val strong {
  font-weight: 600;
  color: var(--text);
}

/* ── Camera Grid (3D Viewer) ─────────────────────────────────── */

.hiw-camera-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  background: var(--rule);
}

.hiw-cam {
  background: var(--bg);
  padding: var(--sp-3);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.hiw-cam-key {
  font-size: 18px;
  font-weight: 800;
  color: var(--red);
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.hiw-cam-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
}

.hiw-cam-desc {
  font-size: 11px;
  line-height: 1.5;
  color: var(--muted);
}

@media (max-width: 768px) {
  .hiw-camera-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── Leaderboard Tab Guide ──────────────────────────────────── */

.hiw-tabs-guide {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--rule);
}

.hiw-tab-item {
  display: flex;
  gap: var(--sp-5);
  padding: var(--sp-4) 0;
  background: var(--bg);
}

.hiw-tab-name {
  font-size: 13px;
  font-weight: 800;
  color: var(--red);
  min-width: 80px;
  flex-shrink: 0;
  letter-spacing: -0.02em;
}

.hiw-tab-desc {
  font-size: 13px;
  line-height: 1.65;
  color: var(--sec);
}

.hiw-tab-desc em {
  font-style: normal;
  font-weight: 600;
  color: var(--text);
}

/* ── Data Sources ───────────────────────────────────────────── */

.hiw-data-grid {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--rule);
  margin-bottom: var(--sp-6);
}

.hiw-data-item {
  display: flex;
  gap: var(--sp-5);
  padding: var(--sp-4) 0;
  background: var(--bg);
}

.hiw-data-source {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  min-width: 120px;
  flex-shrink: 0;
}

.hiw-data-what {
  font-size: 13px;
  line-height: 1.65;
  color: var(--sec);
}

.hiw-data-notes {
  border-top: 1px solid var(--rule);
  padding-top: var(--sp-4);
}

.hiw-data-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.hiw-data-list li {
  font-size: 13px;
  line-height: 1.65;
  color: var(--sec);
  padding-left: 14px;
  position: relative;
}

.hiw-data-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 5px;
  height: 5px;
  background: var(--rule);
  border: 1px solid var(--muted);
}

.hiw-data-list li strong {
  font-weight: 600;
  color: var(--text);
}

/* ── Responsive ─────────────────────────────────────────────── */

@container app (max-width: 767px) {
  .hiw-page { padding: var(--sp-5) var(--sp-4) 0; overflow: hidden; }
  .hiw-rules-grid { grid-template-columns: 1fr; }
  .hiw-pages-grid { grid-template-columns: 1fr; }
  .hiw-metric-body { padding-left: 0; }
  .hiw-metric-hdr { flex-wrap: wrap; }
  .hiw-detail-item { flex-direction: column; gap: var(--sp-1); }
  .hiw-tab-item { flex-direction: column; gap: var(--sp-1); }
  .hiw-data-item { flex-direction: column; gap: var(--sp-1); }
  .hiw-formula-row,
  .hiw-scale-row,
  .hiw-example-row,
  .hiw-why-row { flex-direction: column; gap: var(--sp-1); }
  .hiw-toc { gap: var(--sp-2); }
  .hiw-live-example { overflow: hidden; }
  .hiw-ribbon-demo { max-width: 100%; }
}

/* ==========================================================================
   THE WIRE — Editorial content hub
   All classes scoped under .wire to avoid conflicts
   ========================================================================== */

/* ── Wire Layout ── */
.wire { max-width: min(960px, 100%); margin: 0 auto; padding: 0 var(--sp-7) var(--sp-8); box-sizing: border-box; }

/* ── Wire Hub ── */
.wire-hdr { padding: var(--sp-7) 0 var(--sp-6); border-bottom: 1px solid var(--rules); }
.wire-eyebrow { font: 500 9px/1 var(--fi); letter-spacing: .22em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }
.wire-title { font: 300 48px/1 var(--fi); letter-spacing: -.04em; color: var(--text); margin-bottom: 12px; }
.wire-subtitle { font: 300 15px/1.6 var(--fi); color: var(--sec); max-width: 600px; letter-spacing: -.01em; }

.wire-section { padding: var(--sp-6) 0; }
.wire-sec-label { font: 500 9px/1 var(--fi); letter-spacing: .22em; text-transform: uppercase; color: var(--muted); padding-bottom: 14px; border-bottom: 1px solid var(--rules); margin-bottom: 0; }

.wire-list { display: flex; flex-direction: column; }
.wire-item { display: block; padding: 16px 0; border-bottom: 1px solid var(--rule); text-decoration: none; color: inherit; transition: background 80ms; }
.wire-item:hover { background: var(--bgw); margin: 0 -12px; padding: 16px 12px; }
.wire-item-date { font: 600 16px/1 var(--fi); letter-spacing: -.01em; margin-bottom: 4px; }
.wire-item-meta { font: 300 12px/1 var(--fi); color: var(--muted); font-variant-numeric: tabular-nums; }
.wire-item-preview { font: 300 13px/1.5 var(--fi); color: var(--sec); margin-top: 6px; max-width: 640px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wire-item-none { font: 300 12px/1 var(--fi); color: var(--muted); padding: 20px 0; }

/* ── Wire Tabs ── */
.wire-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--rules); margin-top: var(--sp-5); }
.wire-tab { font: 500 10px/1 var(--fi); letter-spacing: .10em; text-transform: uppercase; color: var(--muted); padding: 12px 20px 14px; text-decoration: none; border-bottom: 2px solid transparent; transition: color 100ms, border-color 100ms; }
.wire-tab:first-child { padding-left: 0; }
.wire-tab:hover { color: var(--text); }
.wire-tab.active { color: var(--text); border-bottom-color: var(--red); }

/* ── Wire Featured Card (hero) ── */
.wire-featured { padding: var(--sp-6) 0; border-bottom: 1px solid var(--rules); }
.wire-featured-eyebrow { font: 500 9px/1 var(--fi); letter-spacing: .22em; text-transform: uppercase; color: var(--muted); margin-bottom: 16px; }
.wire-featured-inner { display: block; text-decoration: none; color: inherit; padding: 28px 32px; border: 1px solid var(--rules); transition: border-color 120ms; }
.wire-featured-inner:hover { border-color: var(--red); }
.wire-featured-date { font: 300 36px/1 var(--fi); letter-spacing: -.03em; color: var(--text); margin-bottom: 20px; }
.wire-tag { display: inline-block; font: 600 9px/1 var(--fi); letter-spacing: .08em; text-transform: uppercase; background: var(--red); color: #fff; padding: 3px 8px; vertical-align: middle; margin-left: 8px; }
.wire-featured-stats { display: flex; gap: 24px; margin-bottom: 20px; font-variant-numeric: tabular-nums; flex-wrap: wrap; }
.wire-fstat { display: flex; flex-direction: column; gap: 4px; }
.wire-fstat-val { font: 500 28px/1 var(--fi); letter-spacing: -.02em; }
.wire-fstat-val.accent { color: var(--red); }
.wire-fstat-val.good { color: var(--good); }
.wire-fstat-lbl { font: 300 9px/1 var(--fi); letter-spacing: .10em; text-transform: uppercase; color: var(--muted); }
.wire-featured-hook { margin-bottom: 16px; }
.wire-featured-pi { font: 300 15px/1.6 var(--fi); color: var(--sec); letter-spacing: -.01em; max-width: 640px; }
.wire-featured-cotn { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.wire-cotn-flag { font: 600 9px/1 var(--fi); letter-spacing: .10em; text-transform: uppercase; background: rgba(184,134,11,.12); color: var(--gold); padding: 3px 8px; border: 1px solid rgba(184,134,11,.35); }
.wire-cotn-who { font: 600 14px/1 var(--fi); letter-spacing: -.01em; }
.wire-cotn-detail { font: 300 12px/1 var(--fi); color: var(--sec); font-variant-numeric: tabular-nums; }
.wire-featured-cta { font: 500 11px/1 var(--fi); letter-spacing: .06em; color: var(--red); }
.wire-featured-loading { font: 300 12px/1 var(--fi); color: var(--muted); }

/* ── Wire Report Cards Grid ── */
.wire-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.wire-card { display: block; text-decoration: none; color: inherit; padding: 20px 20px 20px 0; border-bottom: 1px solid var(--rule); transition: background 80ms; }
.wire-card:nth-child(3n+2) { padding: 20px; border-left: 1px solid var(--rule); border-right: 1px solid var(--rule); }
.wire-card:nth-child(3n+3) { padding: 20px 0 20px 20px; }
.wire-card:hover { background: var(--bgw); }
.wire-card-date { font: 600 15px/1 var(--fi); letter-spacing: -.01em; margin-bottom: 8px; }
.wire-card-stats { font-variant-numeric: tabular-nums; margin-bottom: 6px; display: flex; flex-wrap: wrap; gap: 0; align-items: center; }
.wire-cstat { font: 400 11px/1 var(--fi); color: var(--sec); letter-spacing: -.01em; }
.wire-cstat.accent { color: var(--red); font-weight: 500; }
.wire-cstat-sep { font: 300 11px/1 var(--fi); color: var(--muted); margin: 0 6px; }
.wire-card-cotn { font: 300 11px/1.4 var(--fi); color: var(--sec); margin-top: 4px; }
.wire-card-empty { font: 300 11px/1 var(--fi); color: var(--muted); }
.wire-card-loading { font: 300 11px/1 var(--fi); color: var(--muted); }

/* ── Coming Soon Tab ── */
.wire-coming-soon { padding: var(--sp-8) 0 var(--sp-7); max-width: 560px; }
.wire-cs-title { font: 300 32px/1.2 var(--fi); letter-spacing: -.03em; color: var(--text); margin-bottom: 16px; }
.wire-cs-desc { font: 300 15px/1.7 var(--fi); color: var(--sec); letter-spacing: -.01em; margin-bottom: 24px; }
.wire-cs-label { font: 500 9px/1 var(--fi); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); padding: 6px 12px; border: 1px solid var(--rules); display: inline-block; }

/* Back link */
.wire-back { display: inline-flex; align-items: center; gap: 6px; font: 500 10px/1 var(--fi); letter-spacing: .10em; text-transform: uppercase; color: var(--muted); text-decoration: none; padding: 20px 0 0; transition: color 100ms; }
.wire-back:hover { color: var(--text); }

/* ── Report Header ── */
.wire .report-hdr { padding: var(--sp-7) 0 var(--sp-6); border-bottom: 1px solid var(--rules); }
.wire .report-date-eyebrow { font: 500 9px/1 var(--fi); letter-spacing: .22em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }
.wire .report-date { font: 300 56px/1 var(--fi); letter-spacing: -.04em; color: var(--text); margin-bottom: 16px; }
.wire .report-summary-strip { display: flex; align-items: center; gap: 0; font-variant-numeric: tabular-nums; flex-wrap: wrap; }
.wire .rss-item { display: flex; flex-direction: column; gap: 5px; padding: 0 28px 0 0; margin: 0 28px 0 0; border-right: 1px solid var(--rules); }
.wire .rss-item:first-child { padding-left: 0; margin-left: 0; }
.wire .rss-item:last-child { border-right: none; }
.wire .rss-val { font: 500 26px/1 var(--fi); letter-spacing: -.02em; }
.wire .rss-val.accent { color: var(--red); }
.wire .rss-val.good { color: var(--good); }
.wire .rss-lbl { font: 300 9px/1 var(--fi); letter-spacing: .10em; text-transform: uppercase; color: var(--muted); }

/* ── PI Lead ── */
.wire .pi-lead { padding: 40px 0; border-bottom: 1px solid var(--rule); max-width: 720px; }
.wire .pi-lead-eyebrow { font: 500 9px/1 var(--fi); letter-spacing: .22em; text-transform: uppercase; color: var(--muted); margin-bottom: 20px; display: flex; align-items: center; gap: 10px; }
.wire .pi-badge { display: inline-flex; align-items: center; gap: 5px; background: var(--dark); color: #fff; padding: 3px 8px; font: 600 9px/1 var(--fi); letter-spacing: .08em; }
.wire .pi-badge-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--red); }
.wire .pi-text { font: 300 22px/1.55 var(--fi); letter-spacing: -.02em; color: var(--text); }
.wire .pi-text::first-letter { font: 800 44px/0.9 var(--fi); color: var(--red); float: left; margin: 4px 6px 0 0; letter-spacing: -.03em; }
.wire .pi-none { font: 300 14px/1.5 var(--fi); color: var(--muted); padding: 40px 0; }

/* ── Section Label ── */
.wire .sec-label { font: 500 9px/1 var(--fi); letter-spacing: .22em; text-transform: uppercase; color: var(--muted); padding: 36px 0 14px; border-bottom: 1px solid var(--rules); margin-bottom: 0; display: flex; align-items: center; justify-content: space-between; }
.wire .sec-label-sub { font: 300 10px/1 var(--fi); letter-spacing: 0; text-transform: none; }

/* ── Feature Card (Challenge of Night / Worst Decision) ── */
.wire .feature-card { display: grid; grid-template-columns: 220px 1fr; gap: 0; border-bottom: 1px solid var(--rule); padding: 28px 0; }
.wire .feature-zone-wrap { width: 220px; }
.wire .feature-right { padding-left: 32px; border-left: 1px solid var(--rule); }
.wire .feature-flag { font: 600 9px/1 var(--fi); letter-spacing: .12em; text-transform: uppercase; padding: 4px 10px; margin-bottom: 16px; display: inline-block; }
.wire .feature-flag.gold { background: rgba(184,134,11,.12); color: var(--gold); border: 1px solid rgba(184,134,11,.35); }
.wire .feature-flag.red { background: rgba(252,61,33,.08); color: var(--red); border: 1px solid var(--red-b); }
.wire .feature-who { font: 700 16px/1 var(--fi); letter-spacing: -.01em; margin-bottom: 3px; }
.wire .feature-ctx { font: 300 11px/1 var(--fi); color: var(--muted); margin-bottom: 16px; font-variant-numeric: tabular-nums; }
.wire .feature-stats { display: flex; gap: 24px; margin-bottom: 18px; padding-bottom: 18px; border-bottom: 1px solid var(--rule); }
.wire .fs-item { display: flex; flex-direction: column; gap: 4px; }
.wire .fs-val { font: 500 22px/1 var(--fi); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.wire .fs-val.good { color: var(--good); }
.wire .fs-val.accent { color: var(--red); }
.wire .fs-val.gold { color: var(--gold); }
.wire .fs-lbl { font: 300 9px/1 var(--fi); letter-spacing: .10em; text-transform: uppercase; color: var(--muted); }
.wire .feature-pi { font: 300 14px/1.6 var(--fi); color: var(--sec); letter-spacing: -.01em; }
.wire .feature-pi strong { font-weight: 600; color: var(--text); }
.wire .feature-none { font: 300 13px/1.5 var(--fi); color: var(--muted); padding: 28px 0; border-bottom: 1px solid var(--rule); }

/* ── Edge Zoom ── */
.wire .edge-zoom-wrap { background: var(--bgw); border: 1px solid var(--rule); padding: 10px; margin-top: 12px; }
.wire .edge-zoom-label { font: 500 8px/1 var(--fi); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }

/* ── Game Grid ── */
.wire .game-grid-wrap { margin-top: 0; }
.wire .game-hdr-row { display: grid; grid-template-columns: 140px 90px 90px 52px 72px 72px 1fr; gap: 0; background: var(--dark); padding: 0; height: 30px; align-items: center; }
.wire .gh-cell { font: 600 9px/1 var(--fi); letter-spacing: .10em; text-transform: uppercase; color: rgba(255,255,255,.42); padding: 0 10px; font-variant-numeric: tabular-nums; }
.wire .gh-cell.r { text-align: right; }
.wire .game-row-wrap { border-bottom: 1px solid var(--rule); }
.wire .game-row { display: grid; grid-template-columns: 140px 90px 90px 52px 72px 72px 1fr; gap: 0; height: 36px; align-items: center; cursor: pointer; transition: background 80ms; }
.wire .game-row:hover { background: var(--bgw); }
.wire .game-row.expanded { background: var(--bgw); }
.wire .gc { font: 400 12px/1 var(--fi); padding: 0 10px; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.wire .gc.r { text-align: right; }
.wire .gc-teams { font: 600 12px/1 var(--fi); letter-spacing: .01em; }
.wire .gc-score { font-weight: 300; font-size: 11px; color: var(--sec); }
.wire .gc-ch { display: flex; align-items: center; gap: 3px; justify-content: flex-end; padding-right: 10px; }
.wire .ch-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.wire .ch-dot.w { background: var(--good); }
.wire .ch-dot.l { background: var(--red); }
.wire .ch-num { font: 400 11px/1 var(--fi); color: var(--sec); font-variant-numeric: tabular-nums; }
.wire .grade-chip { display: inline-flex; align-items: center; justify-content: center; font: 700 10px/1 var(--fi); width: 22px; height: 22px; border: 1px solid currentColor; }
.wire .grade-a { color: var(--ga-tx); background: var(--ga-bg); }
.wire .grade-b { color: var(--gb-tx); background: var(--gb-bg); }
.wire .grade-c { color: var(--gc-tx); background: var(--gc-bg); }
.wire .grade-d, .wire .grade-f { color: var(--gd-tx); background: var(--gd-bg); }
.wire .expand-btn { padding: 0 10px; font: 300 10px/1 var(--fi); color: var(--muted); text-align: right; }
.wire .game-detail { display: none; padding: 16px 10px 20px; border-top: 1px solid var(--rule); background: var(--bgw); }
.wire .game-detail.open { display: block; }
.wire .game-detail-pi { font: 300 12px/1.6 var(--fi); color: var(--sec); max-width: 640px; margin-bottom: 14px; letter-spacing: -.01em; }
.wire .game-detail-pi strong { font-weight: 600; color: var(--text); }
.wire .challenge-list { display: flex; flex-direction: column; gap: 0; }
.wire .ch-item { display: grid; grid-template-columns: 28px 130px 60px 80px 60px 1fr; gap: 0; padding: 8px 0; border-top: 1px solid var(--rule); align-items: center; font-variant-numeric: tabular-nums; }
.wire .ch-item:first-child { border-top: none; }
.wire .chi { font: 400 11px/1 var(--fi); padding: 0 8px; color: var(--sec); letter-spacing: -.01em; }
.wire .chi.result-o { color: var(--good); font-weight: 600; }
.wire .chi.result-u { color: var(--red); }
.wire .chi.result-p { color: var(--muted); }
.wire .games-footer { font: 300 11px/1 var(--fi); color: var(--muted); padding: 12px 10px; border-top: 1px solid var(--rules); }

/* ── Invisible Tax ── */
.wire .tax-section { padding: 32px 0; border-bottom: 1px solid var(--rule); }
.wire .tax-desc { font: 300 13px/1.6 var(--fi); color: var(--sec); max-width: 640px; margin-bottom: 24px; letter-spacing: -.01em; }
.wire .tax-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--rule); font-variant-numeric: tabular-nums; }
.wire .tax-row:first-of-type { border-top: none; }
.wire .tax-team { font: 600 13px/1 var(--fi); width: 120px; letter-spacing: .01em; }
.wire .tax-bar-track { flex: 1; height: 8px; background: var(--bgi); position: relative; }
.wire .tax-bar-fill { height: 100%; background: var(--red); width: 0; transition: width 600ms cubic-bezier(0,0,.2,1); }
.wire .tax-wp { font: 500 14px/1 var(--fi); color: var(--red); width: 52px; text-align: right; }
.wire .tax-calls { font: 300 10px/1 var(--fi); color: var(--muted); width: 100px; text-align: right; }
.wire .tax-total { padding: 16px 0 0; border-top: 1px solid var(--rule); margin-top: 8px; font: 300 11px/1.5 var(--fi); color: var(--muted); }
.wire .tax-total strong { color: var(--text); font-weight: 600; }
.wire .tax-empty { font: 300 13px/1.5 var(--fi); color: var(--muted); padding: 20px 0; letter-spacing: -.01em; }

/* ── Ump Report ── */
.wire .ump-section { padding: 32px 0; border-bottom: 1px solid var(--rule); }
.wire .ump-rank-label { font: 500 9px/1 var(--fi); letter-spacing: .10em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; margin-top: 4px; }
.wire .ump-rank-label + .ump-rank-label { padding-top: 16px; }
.wire .ump-row { display: grid; grid-template-columns: 180px 44px 60px 60px 1fr; gap: 0; padding: 10px 0; border-top: 1px solid var(--rule); align-items: start; font-variant-numeric: tabular-nums; }
.wire .ump-row:first-of-type { border-top: none; }
.wire .ump-name { font: 600 13px/1 var(--fi); margin-bottom: 3px; }
.wire .ump-game { font: 300 10px/1 var(--fi); color: var(--muted); }
.wire .ump-acc-val { font: 500 15px/1 var(--fi); text-align: right; }
.wire .ump-acc-val.bad { color: var(--red); }
.wire .ump-acc-val.ok { color: var(--warn); }
.wire .ump-acc-val.good { color: var(--good); }
.wire .ump-miss { font: 300 12px/1 var(--fi); color: var(--muted); text-align: right; }
.wire .ump-ot { font: 300 12px/1 var(--fi); text-align: right; }
.wire .ump-note { font: 300 11px/1.5 var(--fi); color: var(--sec); letter-spacing: -.01em; }

/* ── Trending ── */
.wire .trend-section { padding: 32px 0; border-bottom: 1px solid var(--rule); }
.wire .trend-item { padding: 14px 0; border-top: 1px solid var(--rule); display: grid; grid-template-columns: 28px 1fr; gap: 12px; align-items: start; }
.wire .trend-item:first-child { border-top: none; }
.wire .trend-dir { font: 700 16px/1 var(--fi); }
.wire .trend-dir.up { color: var(--good); }
.wire .trend-dir.dn { color: var(--red); }
.wire .trend-text { font: 300 13px/1.6 var(--fi); color: var(--sec); letter-spacing: -.01em; }
.wire .trend-text strong { font-weight: 600; color: var(--text); }
.wire .trend-text em { font-style: normal; color: var(--red); }
.wire .trend-empty { font: 300 13px/1.5 var(--fi); color: var(--muted); padding: 20px 0; }


/* ── Wire Responsive ── */
@media (max-width: 768px) {
  .wire { padding: 0 var(--sp-4) var(--sp-7); }
  .wire-title { font-size: 32px; }
  .wire-cards { grid-template-columns: 1fr; }
  .wire-card, .wire-card:nth-child(3n+2), .wire-card:nth-child(3n+3) { padding: 16px 0; border-left: none; border-right: none; }
  .wire-featured-date { font-size: 28px; }
  .wire-fstat-val { font-size: 22px; }
  .wire-featured-inner { padding: 20px 16px; }
  .wire .report-date { font-size: 36px; }
  .wire .report-summary-strip { gap: 0; }
  .wire .rss-item { padding: 0 16px 0 0; margin: 0 16px 0 0; }
  .wire .rss-val { font-size: 20px; }
  .wire .feature-card { grid-template-columns: 1fr; }
  .wire .feature-zone-wrap { width: 100%; max-width: 220px; margin-bottom: 16px; }
  .wire .feature-right { padding-left: 0; border-left: none; padding-top: 16px; border-top: 1px solid var(--rule); }
  .wire .feature-stats { flex-wrap: wrap; }
  .wire .game-hdr-row,
  .wire .game-row { grid-template-columns: 1fr 70px 70px 40px 60px; }
  .wire .game-hdr-row .gh-cell:nth-child(6),
  .wire .game-hdr-row .gh-cell:nth-child(7),
  .wire .game-row .gc:nth-child(6),
  .wire .game-row .gc:nth-child(7) { display: none; }
  .wire .ch-item { grid-template-columns: 24px 1fr 60px; }
  .wire .ch-item .chi:nth-child(4),
  .wire .ch-item .chi:nth-child(5),
  .wire .ch-item .chi:nth-child(6) { display: none; }
  .wire .ump-row { grid-template-columns: 1fr 44px 60px; }
  .wire .ump-ot, .wire .ump-note { display: none; }
  .wire .pi-text { font-size: 18px; }
}

/* ══════════════════════════════════════════════════════════════
   Daily Report (dr-) — CW prototype port
   Route: #/wire/daily/:date
══════════════════════════════════════════════════════════════ */

/* ── 1. Dateline header ── */
.dr-dateline { padding: 48px 0 0; }
.dr-dateline-eyebrow { font: 500 9px/1 var(--fi); letter-spacing: .22em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.dr-dateline-date { font: 300 56px/1 var(--fi); letter-spacing: -.04em; color: var(--text); margin-bottom: 6px; }
.dr-dateline-sub { font: 300 18px/1 var(--fi); color: var(--sec); letter-spacing: -.01em; margin-bottom: 28px; }
.dr-date-nav { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.dr-date-btn { font: 500 10px/1 var(--fi); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); cursor: pointer; transition: color 120ms; display: flex; align-items: center; gap: 4px; text-decoration: none; }
.dr-date-btn:hover { color: var(--red); }
.dr-summary-strip { display: flex; gap: 0; border-top: 1px solid var(--rules); border-bottom: 1px solid var(--rules); }
.dr-ss-item { flex: 1; padding: 18px 20px; border-right: 1px solid var(--rule); display: flex; flex-direction: column; gap: 5px; }
.dr-ss-item:last-child { border-right: none; }
.dr-ss-val { font: 300 28px/1 var(--fi); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.dr-ss-val.accent { color: var(--red); }
.dr-ss-val.good { color: var(--good); }
.dr-ss-lbl { font: 500 8px/1 var(--fi); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }

/* ── 2. PI Lead ── */
.dr-lead { padding: 48px 0 52px; border-bottom: 1px solid var(--rule); max-width: 780px; }
.dr-lead-label { font: 500 9px/1 var(--fi); letter-spacing: .18em; text-transform: uppercase; color: var(--red); margin-bottom: 18px; display: block; }
.dr-lead-text { font: 300 19px/1.72 var(--fi); color: var(--text); letter-spacing: -.01em; }
.dr-lead-text .dr-dropcap { float: left; font: 800 68px/1 var(--fi); color: var(--red); margin: 4px 10px 0 -4px; letter-spacing: -.04em; }
.dr-lead-text strong { font-weight: 600; }

/* ── 3-4. Spotlight pair ── */
.dr-spotlights { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-bottom: 1px solid var(--rule); }
.dr-spot { padding: 48px 0 52px; }
.dr-spot:first-child { padding-right: 40px; border-right: 1px solid var(--rule); }
.dr-spot:last-child { padding-left: 40px; }
.dr-spot-label { font: 500 9px/1 var(--fi); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; display: block; }
.dr-spot-title { font: 800 18px/1.15 var(--fi); letter-spacing: -.02em; margin-bottom: 20px; }
.dr-spot-title.best { color: var(--good); }
.dr-spot-title.worst { color: var(--red); }
.dr-spot-body { display: grid; grid-template-columns: 130px 1fr; gap: 20px; }
.dr-spot-zone { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.dr-spot-zone-lbl { font: 300 7px/1 var(--fi); color: var(--muted); letter-spacing: .04em; }
.dr-spot-detail { display: flex; flex-direction: column; gap: 0; }
.dr-spot-row { display: flex; justify-content: space-between; align-items: baseline; padding: 5px 0; border-bottom: 1px solid var(--rule); }
.dr-spot-row:last-child { border-bottom: none; }
.dr-spot-rk { font: 500 8px/1 var(--fi); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.dr-spot-rv { font: 400 12px/1 var(--fi); color: var(--text); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.dr-spot-rv.ov { color: var(--good); font-weight: 700; }
.dr-spot-rv.up { color: var(--red); font-weight: 700; }
.dr-score-badge { display: inline-flex; align-items: center; justify-content: center; font: 700 11px/1 var(--fi); letter-spacing: .04em; padding: 3px 7px; border: 1px solid currentColor; min-width: 28px; }
.dr-score-a { color: var(--ga-tx); background: var(--ga-bg); }
.dr-score-b { color: var(--gb-tx); background: var(--gb-bg); }
.dr-score-c { color: var(--gc-tx); background: var(--gc-bg); }
.dr-score-d { color: var(--gd-tx); background: var(--gd-bg); }
.dr-spot-narrative { font: 300 13px/1.6 var(--fi); color: var(--sec); letter-spacing: -.01em; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--rule); }

/* ── 5. Game grid ── */
.dr-section { padding: 48px 0 52px; border-bottom: 1px solid var(--rule); }
.dr-section:last-child { border-bottom: none; }
.dr-section-hdr { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 24px; padding-bottom: 14px; border-bottom: 1px solid var(--rule); }
.dr-section-title { font: 800 15px/1 var(--fi); letter-spacing: .08em; text-transform: uppercase; }
.dr-section-count { font: 300 12px/1 var(--fi); color: var(--muted); }
.dr-game { border-bottom: 1px solid var(--rule); transition: background 120ms; }
.dr-game:last-child { border-bottom: none; }
.dr-game:hover { background: var(--bgw); margin: 0 -12px; padding: 0 12px; }
.dr-game-summary { display: grid; grid-template-columns: 200px 100px 80px 80px 60px 1fr; align-items: center; padding: 12px 0; cursor: pointer; gap: 8px; }
.dr-game-teams { display: flex; flex-direction: column; gap: 3px; }
.dr-game-team { display: flex; align-items: center; gap: 8px; }
.dr-game-abbr { font: 700 14px/1 var(--fi); letter-spacing: .02em; min-width: 36px; }
.dr-game-abbr.win { color: var(--text); }
.dr-game-abbr.lose { color: var(--muted); font-weight: 400; }
.dr-game-score { font: 400 14px/1 var(--fi); font-variant-numeric: tabular-nums; min-width: 18px; text-align: right; }
.dr-game-score.win { font-weight: 700; }
.dr-game-score.lose { color: var(--muted); }
.dr-game-tally { display: flex; flex-direction: column; gap: 4px; }
.dr-game-tally-row { display: flex; align-items: center; gap: 3px; }
.dr-cd { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.dr-cd-ov { background: var(--good); }
.dr-cd-up { background: var(--red); }
.dr-cd-rem { background: transparent; border: 1.5px solid rgba(0,0,0,.22); }
.dr-cd-lbl { font: 300 8px/1 var(--fi); color: var(--muted); margin-left: 2px; }
.dr-budget { display: inline-flex; align-items: center; justify-content: center; font: 700 12px/1 var(--fi); padding: 3px 8px; border: 1px solid currentColor; }
.dr-budget-a { color: var(--ga-tx); background: var(--ga-bg); }
.dr-budget-b { color: var(--gb-tx); background: var(--gb-bg); }
.dr-budget-c { color: var(--gc-tx); background: var(--gc-bg); }
.dr-budget-d { color: var(--gd-tx); background: var(--gd-bg); }
.dr-budget-f { color: #fff; background: var(--red); border-color: var(--red); }
.dr-game-acc { font: 400 13px/1 var(--fi); font-variant-numeric: tabular-nums; letter-spacing: -.01em; text-align: center; }
.dr-game-acc.low { color: var(--red); font-weight: 600; }
.dr-game-flags { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.dr-flag { font: 600 8px/1 var(--fi); letter-spacing: .06em; text-transform: uppercase; padding: 2px 6px; border: 1px solid; }
.dr-flag-ks { color: #B8860B; border-color: rgba(184,134,11,.4); background: rgba(184,134,11,.06); }
.dr-flag-wf { color: var(--blue); border-color: rgba(21,101,192,.35); background: rgba(21,101,192,.06); }
.dr-game-toggle { font: 400 10px/1 var(--fi); color: var(--muted); cursor: pointer; transition: color 120ms; text-align: right; }
.dr-game-toggle:hover { color: var(--red); }
.dr-game-detail { display: none; padding: 0 0 20px; border-top: 1px solid var(--rule); }
.dr-game.open .dr-game-detail { display: block; }
.dr-game-narrative { font: 300 13px/1.65 var(--fi); color: var(--sec); letter-spacing: -.01em; padding: 16px 0; max-width: 680px; }
.dr-game-narrative strong { font-weight: 600; color: var(--text); }
.dr-challenges { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; margin-top: 12px; }
.dr-ch { border: 1px solid var(--rule); padding: 14px 16px; display: grid; grid-template-columns: 80px 1fr; gap: 14px; transition: border-color 120ms; }
.dr-ch:hover { border-color: var(--rules); }
.dr-ch-zone { display: flex; align-items: center; justify-content: center; }
.dr-ch-info { display: flex; flex-direction: column; gap: 0; }
.dr-ch-top { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }
.dr-ch-challenger { font: 600 12px/1 var(--fi); letter-spacing: -.01em; }
.dr-ch-result { font: 700 10px/1 var(--fi); letter-spacing: .06em; text-transform: uppercase; }
.dr-ch-result.ov { color: var(--good); }
.dr-ch-result.up { color: var(--red); }
.dr-ch-stats { display: flex; flex-wrap: wrap; gap: 0; }
.dr-ch-stat { display: flex; flex-direction: column; gap: 2px; padding: 5px 10px 5px 0; border-right: 1px solid var(--rule); margin-right: 10px; }
.dr-ch-stat:last-child { border-right: none; margin-right: 0; padding-right: 0; }
.dr-ch-sv { font: 400 12px/1 var(--fi); font-variant-numeric: tabular-nums; }
.dr-ch-sl { font: 500 6px/1 var(--fi); letter-spacing: .10em; text-transform: uppercase; color: var(--muted); }
.dr-ch-note { font: 300 11px/1.55 var(--fi); color: var(--sec); letter-spacing: -.01em; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--rule); }
.dr-ch-note strong { font-weight: 600; color: var(--text); }
.dr-game-grid-hdr { display: grid; grid-template-columns: 200px 100px 80px 80px 60px 1fr; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--rules); }
.dr-gg-h { font: 600 8px/1 var(--fi); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.dr-gg-h.c { text-align: center; }

/* ── 6. Invisible Tax ── */
.dr-tax-list { display: flex; flex-direction: column; gap: 0; }
.dr-tax-hdr { display: grid; grid-template-columns: 140px 1fr 80px 80px; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--rules); }
.dr-tax-hdr span { font: 600 8px/1 var(--fi); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.dr-tax-hdr span:nth-child(3), .dr-tax-hdr span:nth-child(4) { text-align: right; }
.dr-tax-row { display: grid; grid-template-columns: 140px 1fr 80px 80px; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--rule); }
.dr-tax-row:last-child { border-bottom: none; }
.dr-tax-team { font: 600 13px/1 var(--fi); letter-spacing: -.01em; }
.dr-tax-bar-wrap { display: flex; align-items: center; gap: 8px; height: 18px; }
.dr-tax-bar { height: 14px; background: var(--red); opacity: .7; min-width: 2px; transition: width .4s cubic-bezier(0,0,.2,1); }
.dr-tax-count { font: 400 11px/1 var(--fi); color: var(--sec); font-variant-numeric: tabular-nums; }
.dr-tax-val { font: 400 13px/1 var(--fi); font-variant-numeric: tabular-nums; text-align: right; }
.dr-tax-val.neg { color: var(--red); font-weight: 600; }
.dr-tax-narrative { font: 300 12px/1.6 var(--fi); color: var(--sec); margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--rule); max-width: 620px; }
.dr-tax-narrative strong { font-weight: 600; color: var(--text); }
.dr-tax-empty { font: 300 13px/1.5 var(--fi); color: var(--muted); padding: 20px 0; }

/* ── 7. Ump Report ── */
.dr-ump-tier { margin-bottom: 28px; }
.dr-ump-tier:last-child { margin-bottom: 0; }
.dr-ump-tier-label { font: 500 9px/1 var(--fi); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); padding-bottom: 10px; margin-bottom: 0; display: flex; align-items: center; gap: 8px; }
.dr-tier-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.dr-tier-clean { background: var(--good); }
.dr-tier-avg { background: var(--warn); }
.dr-tier-below { background: var(--red); }
.dr-ump-row { display: grid; grid-template-columns: 180px 80px 60px 1fr; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--rule); }
.dr-ump-row:last-child { border-bottom: none; }
.dr-ump-name { font: 500 13px/1 var(--fi); letter-spacing: -.01em; }
.dr-ump-acc { font: 400 14px/1 var(--fi); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.dr-ump-acc.high { color: var(--good); font-weight: 600; }
.dr-ump-acc.mid { color: var(--warn); }
.dr-ump-acc.low { color: var(--red); font-weight: 600; }
.dr-ump-missed { font: 300 12px/1 var(--fi); color: var(--sec); font-variant-numeric: tabular-nums; }
.dr-ump-game { font: 300 11px/1 var(--fi); color: var(--muted); }

/* ── DR Responsive ── */
@container app (max-width: 900px) {
  .dr-spotlights { grid-template-columns: 1fr; }
  .dr-spot:first-child { padding-right: 0; border-right: none; border-bottom: 1px solid var(--rule); padding-bottom: 40px; }
  .dr-spot:last-child { padding-left: 0; padding-top: 40px; }
  .dr-game-summary { grid-template-columns: 160px 80px 60px 60px 1fr; font-size: 12px; }
  .dr-game-grid-hdr { grid-template-columns: 160px 80px 60px 60px 1fr; }
  .dr-game-flags { display: none; }
  .dr-dateline-date { font-size: 36px; }
  .dr-summary-strip { flex-wrap: wrap; }
  .dr-ss-item { min-width: 120px; }
}
@container app (max-width: 600px) {
  .dr-game-summary { grid-template-columns: 1fr; gap: 6px; }
  .dr-game-grid-hdr { display: none; }
  .dr-spot-body { grid-template-columns: 1fr; }
  .dr-tax-row { grid-template-columns: 100px 1fr 60px; }
  .dr-tax-hdr { grid-template-columns: 100px 1fr 60px; }
  .dr-ump-row { grid-template-columns: 1fr 60px 50px; }
  .dr-summary-strip { flex-direction: column; }
  .dr-ss-item { border-right: none; border-bottom: 1px solid var(--rule); }
  .dr-ss-item:last-child { border-bottom: none; }
}

/* ══════════════════════════════════════════════════════════════
   Wire Hub (wh-) — CW prototype port
   Route: #/wire
══════════════════════════════════════════════════════════════ */

/* ── Hero ── */
.wh-hero { padding: 48px 0 0; }
.wh-hero-eyebrow { font: 500 9px/1 var(--fi); letter-spacing: .22em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
.wh-hero-title { font: 300 48px/1.05 var(--fi); letter-spacing: -.03em; color: var(--text); margin-bottom: 8px; }
.wh-hero-title strong { font-weight: 800; color: var(--red); }
.wh-hero-desc { font: 300 16px/1.55 var(--fi); color: var(--sec); letter-spacing: -.01em; max-width: min(520px, 100%); margin-bottom: 36px; }

/* ── Tabs ── */
.wh-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--rules); margin-bottom: 0; }
.wh-tab { font: 500 10px/1 var(--fi); letter-spacing: .10em; text-transform: uppercase; color: var(--muted); padding: 0 20px 12px; border-bottom: 2px solid transparent; cursor: pointer; transition: color 120ms, border-color 120ms; white-space: nowrap; }
.wh-tab:first-child { padding-left: 0; }
.wh-tab:hover { color: var(--text); }
.wh-tab.active { color: var(--text); border-bottom-color: var(--red); }
.wh-tab-content { display: none; }
.wh-tab-content.active { display: block; }

/* ── Date strip ── */
.wh-date-strip-wrap { position: relative; margin: 28px 0 0; padding-bottom: 24px; border-bottom: 1px solid var(--rule); }
.wh-date-strip { display: flex; gap: 0; overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none; }
.wh-date-strip::-webkit-scrollbar { display: none; }
.wh-ds-arrow { position: absolute; top: 0; width: 36px; height: 100%; display: flex; align-items: flex-start; padding-top: 24px; justify-content: center; font: 400 18px/1 var(--fi); color: var(--muted); cursor: pointer; z-index: 2; transition: color 120ms; }
.wh-ds-arrow:hover { color: var(--red); }
.wh-ds-arrow.left { left: -40px; }
.wh-ds-arrow.right { right: -40px; }

/* ── Date tile ── */
.wh-tile { flex-shrink: 0; width: 108px; padding: 12px 10px 10px; border-right: 1px solid var(--rule); cursor: pointer; transition: background 120ms; display: flex; flex-direction: column; gap: 0; position: relative; }
.wh-tile:first-child { border-left: 1px solid var(--rule); }
.wh-tile:hover { background: var(--bgw); }
.wh-tile.selected { background: var(--bgw); border-bottom: 2px solid var(--red); padding-bottom: 8px; }
.wh-tile.offday { opacity: .5; }
.wh-tile.offday:hover { opacity: .7; }
.wh-tile-month { font: 500 8px/1 var(--fi); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.wh-tile-day { font: 300 10px/1 var(--fi); letter-spacing: .06em; text-transform: uppercase; color: var(--sec); margin-bottom: 2px; }
.wh-tile-num { font: 700 22px/1 var(--fi); letter-spacing: -.02em; color: var(--text); margin-bottom: 8px; font-variant-numeric: tabular-nums; }
.wh-tile.selected .wh-tile-num { color: var(--red); }
.wh-tile-today { font: 700 7px/1 var(--fi); letter-spacing: .10em; text-transform: uppercase; color: #fff; background: var(--red); padding: 2px 5px; display: inline-block; margin-bottom: 5px; position: absolute; top: 6px; right: 6px; }
.wh-tile-stats { display: flex; flex-direction: column; gap: 3px; padding-top: 6px; border-top: 1px solid var(--rule); }
.wh-tile-stat { display: flex; justify-content: space-between; align-items: baseline; }
.wh-tile-sk { font: 400 8px/1 var(--fi); color: var(--muted); letter-spacing: .02em; }
.wh-tile-sv { font: 500 9px/1 var(--fi); color: var(--text); font-variant-numeric: tabular-nums; }
.wh-tile-bar { height: 3px; background: var(--bgi); margin-top: 6px; }
.wh-tile-bar-fill { height: 100%; background: var(--red); transition: width .3s cubic-bezier(0,0,.2,1); }
.wh-tile-off { font: 300 9px/1 var(--fi); color: var(--muted); padding-top: 6px; border-top: 1px solid var(--rule); }
.wh-tile-loading { font: 300 8px/1 var(--fi); color: var(--muted); padding-top: 6px; border-top: 1px solid var(--rule); }

/* ── Featured report preview ── */
.wh-featured { padding: 32px 0 40px; border-bottom: 1px solid var(--rule); }
.wh-feat-strip { display: flex; gap: 0; border-top: 1px solid var(--rules); border-bottom: 1px solid var(--rules); margin-bottom: 28px; }
.wh-feat-si { flex: 1; padding: 14px 16px; border-right: 1px solid var(--rule); display: flex; flex-direction: column; gap: 4px; }
.wh-feat-si:last-child { border-right: none; }
.wh-feat-sv { font: 300 24px/1 var(--fi); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.wh-feat-sv.accent { color: var(--red); }
.wh-feat-sv.good { color: var(--good); }
.wh-feat-sl { font: 500 8px/1 var(--fi); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.wh-feat-grid { display: grid; grid-template-columns: 1fr 340px; gap: 40px; align-items: start; }
.wh-feat-lead { display: flex; flex-direction: column; gap: 0; }
.wh-feat-lead-label { font: 500 9px/1 var(--fi); letter-spacing: .18em; text-transform: uppercase; color: var(--red); margin-bottom: 12px; }
.wh-feat-lead-text { font: 300 16px/1.65 var(--fi); color: var(--text); letter-spacing: -.01em; margin-bottom: 16px; }
.wh-feat-lead-text strong { font-weight: 600; }
.wh-feat-link { font: 500 11px/1 var(--fi); letter-spacing: .06em; color: var(--red); display: inline-flex; align-items: center; gap: 6px; transition: opacity 120ms; }
.wh-feat-link:hover { opacity: .7; }
.wh-feat-cotn { padding: 20px; border: 1px solid var(--rule); display: flex; flex-direction: column; gap: 0; }
.wh-feat-cotn-label { font: 500 8px/1 var(--fi); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.wh-feat-cotn-title { font: 700 15px/1.2 var(--fi); letter-spacing: -.01em; color: var(--good); margin-bottom: 10px; }
.wh-feat-cotn-body { display: grid; grid-template-columns: 70px 1fr; gap: 12px; margin-bottom: 12px; }
.wh-feat-cotn-rows { display: flex; flex-direction: column; gap: 0; }
.wh-feat-cotn-row { display: flex; justify-content: space-between; align-items: baseline; padding: 4px 0; border-bottom: 1px solid var(--rule); }
.wh-feat-cotn-row:last-child { border-bottom: none; }
.wh-feat-cotn-rk { font: 500 7px/1 var(--fi); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.wh-feat-cotn-rv { font: 400 11px/1 var(--fi); font-variant-numeric: tabular-nums; }
.wh-feat-cotn-rv.ov { color: var(--good); font-weight: 700; }
.wh-badge { display: inline-flex; align-items: center; justify-content: center; font: 700 10px/1 var(--fi); letter-spacing: .04em; padding: 2px 6px; border: 1px solid currentColor; }
.wh-badge-a { color: var(--ga-tx); background: var(--ga-bg); }
.wh-badge-b { color: var(--gb-tx); background: var(--gb-bg); }
.wh-badge-c { color: var(--gc-tx); background: var(--gc-bg); }
.wh-badge-d { color: var(--gd-tx); background: var(--gd-bg); }

/* ── Previous reports grid ── */
.wh-prev { padding: 36px 0 0; }
.wh-prev-label { font: 500 9px/1 var(--fi); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); padding-bottom: 14px; border-bottom: 1px solid var(--rule); margin-bottom: 0; }
.wh-prev-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.wh-prev-item { padding: 20px 24px 20px 0; border-bottom: 1px solid var(--rule); border-right: 1px solid var(--rule); cursor: pointer; transition: background 120ms; text-decoration: none; color: inherit; display: block; }
.wh-prev-item:nth-child(3n) { border-right: none; padding-right: 0; }
.wh-prev-item:nth-child(3n+1) { padding-left: 0; }
.wh-prev-item:hover { background: var(--bgw); margin: 0 -8px; padding-left: 8px; padding-right: calc(24px + 8px); }
.wh-prev-item:nth-child(3n):hover { padding-right: 8px; }
.wh-prev-item:nth-child(3n+1):hover { padding-left: 8px; }
.wh-prev-date { font: 700 14px/1 var(--fi); letter-spacing: -.01em; margin-bottom: 6px; }
.wh-prev-stats { font: 300 11px/1 var(--fi); color: var(--sec); margin-bottom: 8px; font-variant-numeric: tabular-nums; }
.wh-prev-teaser { font: 300 12px/1.5 var(--fi); color: var(--sec); letter-spacing: -.01em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ── Coming soon ── */
.wh-soon { padding: 64px 0; max-width: 520px; }
.wh-soon-title { font: 300 32px/1.15 var(--fi); letter-spacing: -.02em; margin-bottom: 14px; }
.wh-soon-desc { font: 300 15px/1.6 var(--fi); color: var(--sec); letter-spacing: -.01em; margin-bottom: 24px; }
.wh-soon-badge { display: inline-block; font: 500 9px/1 var(--fi); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding: 6px 12px; border: 1px solid var(--rules); }
.wh-feat-loading { font: 300 13px/1.5 var(--fi); color: var(--muted); padding: 20px 0; }

/* ── WH Responsive ── */
@container app (max-width: 960px) {
  .wire{overflow:hidden;}
}
@container app (max-width: 900px) {
  .wh-hero-title { font-size: 36px; }
  .wh-feat-grid { grid-template-columns: 1fr; gap: 24px; }
  .wh-prev-grid { grid-template-columns: 1fr 1fr; }
  .wh-prev-item:nth-child(3n) { border-right: 1px solid var(--rule); }
  .wh-prev-item:nth-child(2n) { border-right: none; }
  .wh-ds-arrow.left { left: -28px; }
  .wh-ds-arrow.right { right: -28px; }
  .wh-tile { width: 92px; padding: 10px 8px 8px; }
}
@container app (max-width: 600px) {
  .wh-hero-title { font-size: 28px; }
  .wh-feat-strip { flex-direction: column; }
  .wh-feat-si { border-right: none; border-bottom: 1px solid var(--rule); padding: 10px 0; }
  .wh-feat-si:last-child { border-bottom: none; }
  .wh-prev-grid { grid-template-columns: 1fr; }
  .wh-prev-item { border-right: none !important; padding-right: 0 !important; }
  .wh-feat-cotn-body { grid-template-columns: 1fr; }
  .wh-ds-arrow { display: none; }
  .wh-tile { width: 80px; }
  .wh-tabs { overflow-x: auto; scrollbar-width: none; }
}

/* ==========================================================================
   Settings Panel
   ========================================================================== */

/* Gear button in header */
.settings-btn {
  background: none;
  border: none;
  color: var(--sec);
  cursor: pointer;
  padding: 4px;
  margin-left: 12px;
  display: flex;
  align-items: center;
  transition: color 0.15s;
}
.settings-btn:hover { color: var(--red); }
@media (max-width: 768px) { .settings-btn { display: none; } }

/* Overlay */
.settings-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.2);
  z-index: 999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.settings-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

/* Panel */
.settings-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: 340px;
  max-width: 100vw;
  height: 100vh;
  background: var(--bg);
  border-left: 1px solid var(--rule);
  z-index: 1000;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.16,1,0.3,1);
  display: flex;
  flex-direction: column;
}
.settings-panel.active { transform: translateX(0); }

/* Header */
.settings-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid var(--rule);
}
.settings-title {
  font: 600 11px/1 var(--fi);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--dark);
}
.settings-close {
  width: 28px;
  height: 28px;
  border: none;
  background: none;
  font-size: 1.2rem;
  color: var(--muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s;
}
.settings-close:hover { color: var(--red); }

/* Body */
.settings-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Setting rows */
.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  border-bottom: 1px solid var(--rule);
}
.settings-row:first-child { padding-top: 0; }
.settings-row-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.settings-row-label {
  font: 500 12px/1 var(--fi);
  color: var(--dark);
}
.settings-row-hint {
  font: 300 10px/1.3 var(--fi);
  color: var(--muted);
}

/* Toggle switch */
.settings-toggle {
  position: relative;
  width: 40px;
  height: 22px;
  border-radius: 11px;
  border: none;
  background: var(--bgi);
  cursor: pointer;
  padding: 0;
  transition: background 0.2s;
  flex-shrink: 0;
}
.settings-toggle.active { background: var(--red); }
.settings-toggle-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
  transition: transform 0.2s;
}
.settings-toggle.active .settings-toggle-knob { transform: translateX(18px); }

/* Section labels */
.settings-section-label {
  font: 600 8px/1 var(--fi);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 18px;
  margin-bottom: 2px;
}
.settings-section-label:first-child { margin-top: 0; }

/* Stacked row (label above, control below) */
.settings-row-stack {
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}

/* Size button group */
.settings-size-group {
  display: flex;
  gap: 0;
  flex-shrink: 0;
}
.settings-size-btn {
  font: 400 10px/1 var(--fi);
  padding: 6px 0;
  flex: 1;
  border: 1px solid var(--rule);
  background: none;
  color: var(--sec);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.settings-size-btn:first-child { border-radius: 3px 0 0 3px; }
.settings-size-btn:last-child { border-radius: 0 3px 3px 0; }
.settings-size-btn:not(:first-child) { border-left: none; }
.settings-size-btn.active {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
  font-weight: 500;
}
.settings-size-btn:not(.active):hover { background: var(--bgw); }

/* --- Text Size --- */
body.text-lg #app { zoom: 1.15; }
body.text-xl #app { zoom: 1.3; }
body.text-xxl #app { zoom: 1.5; }

/* --- High Contrast — darker text --- */
body.high-contrast {
  --sec: #333333;
  --muted: #666666;
}

@media (max-width: 520px) {
  .settings-panel { width: 100vw; }
}

/* ═══════════════════════════════════════════
   CATCHER DEFENSIVE MODE
   ═══════════════════════════════════════════ */
.pp-role-toggle{display:flex;gap:0;margin-left:auto;}
.role-btn{font:500 10px/1 var(--fi);letter-spacing:.06em;text-transform:uppercase;padding:4px 10px;border:1px solid var(--rule);background:transparent;color:var(--muted);cursor:pointer;transition:all .15s;}
.role-btn:first-child{border-radius:2px 0 0 2px;border-right:0;}
.role-btn:last-child{border-radius:0 2px 2px 0;}
.role-btn.on{background:var(--red);color:#fff;border-color:var(--red);}

/* Game Log Strip */
.gl-table{width:100%;border-collapse:collapse;font:300 12px/1.3 var(--fi);}
.gl-table thead th{font:500 9px/1 var(--fi);letter-spacing:.10em;text-transform:uppercase;color:var(--muted);text-align:left;padding:4px 6px;border-bottom:1px solid var(--rule);}
.gl-row{cursor:pointer;transition:background .1s;}
.gl-row:hover{background:rgba(252,61,33,.04);}
.gl-row.active{background:rgba(252,61,33,.07);font-weight:500;}
.gl-row td{padding:4px 6px;border-bottom:1px solid var(--rule);white-space:nowrap;}
.gl-date{color:var(--muted);font-variant-numeric:tabular-nums;}
.gl-opp{font-weight:500;}
.gl-pitchers{color:var(--sec);max-width:120px;overflow:hidden;text-overflow:ellipsis;}
.gl-num{font-variant-numeric:tabular-nums;text-align:right;}
.gl-num.warn{color:var(--red);}
.gl-num.good{color:#2E7D32;}
.gl-num.bad{color:var(--red);}

/* Battery Partner Table (Defensive) */
.bp-table{width:100%;border-collapse:collapse;font:300 11px/1.2 var(--fi);}
.bp-table thead th{font:500 8px/1 var(--fi);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);text-align:left;padding:3px 6px;border-bottom:1px solid var(--rule);}
.bp-th-r{text-align:right;}
tr.bp-row{cursor:pointer;transition:background .1s;}
tr.bp-row:hover{background:rgba(252,61,33,.04);}
tr.bp-row.active{background:rgba(252,61,33,.07);}
tr.bp-row td{padding:3px 6px;border-bottom:1px solid var(--rule);}
.bp-name{font-weight:500;white-space:nowrap;}
.bp-num{font-variant-numeric:tabular-nums;text-align:right;color:var(--sec);}
.bp-num.good{color:#2E7D32;}
.bp-num.warn{color:var(--red);}
.bp-miss-cell{position:relative;min-width:70px;padding-right:40px !important;}
.bp-miss-bar{position:absolute;left:6px;top:50%;transform:translateY(-50%);height:12px;opacity:.45;}
.bp-miss-val{position:relative;float:right;font-variant-numeric:tabular-nums;font-weight:500;}
.bp-miss-val.good{color:#2E7D32;}
.bp-miss-val.warn{color:#B45309;}


/* Challenge Quality */
.cq-wrap{padding:4px 0;}
.cq-summary{font:300 12px/1.4 var(--fi);color:var(--sec);margin-bottom:8px;}
.cq-ratio{font:600 16px/1 var(--fi);color:var(--dark);font-variant-numeric:tabular-nums;letter-spacing:-.02em;margin-right:4px;}
.cq-ratio.good{color:#2E7D32;}
.cq-ratio.warn{color:var(--red);}
.cq-pct{color:var(--muted);}
.cq-bar{display:flex;height:14px;overflow:hidden;margin-bottom:8px;}
.cq-seg{display:flex;align-items:center;justify-content:center;opacity:.8;}
.cq-seg-n{font:600 9px/1 var(--fi);color:#fff;}
.cq-legend{display:flex;gap:12px;flex-wrap:wrap;font:300 10px/1 var(--fi);color:var(--sec);}
.cq-legend-item{display:flex;align-items:center;gap:3px;}
.cq-dot{width:7px;height:7px;border-radius:50%;display:inline-block;flex-shrink:0;}

/* Defensive Timing */
.tp-bars{display:flex;flex-direction:column;gap:6px;padding:4px 0;}
.tp-row{display:flex;align-items:center;gap:8px;font:300 11px/1 var(--fi);}
.tp-lbl{min-width:64px;color:var(--sec);font-weight:500;font-size:10px;letter-spacing:.02em;}
.tp-bar-wrap{flex:1;height:14px;background:rgba(0,0,0,.03);}
.tp-bar{height:100%;}
.tp-val{min-width:54px;text-align:right;color:var(--dark);font-variant-numeric:tabular-nums;}
.tp-pct{color:var(--muted);font-size:10px;}
.tp-role-row{display:flex;align-items:center;gap:10px;margin-top:10px;padding-top:8px;border-top:1px solid var(--rule);}
.tp-role-lbl{font:500 9px/1 var(--fi);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);}
.tp-role-chip{font:300 11px/1 var(--fi);color:var(--dark);padding:3px 8px;border-left:3px solid var(--rule);}
.tp-role-n{font-weight:600;font-variant-numeric:tabular-nums;}

/* Behind the Plate */
.btp-section{display:flex;flex-direction:column;gap:12px;padding:4px 0;}
.btp-metric{display:flex;flex-direction:column;gap:6px;}
.btp-metric-row{display:flex;align-items:baseline;gap:8px;}
.btp-metric-val{font:600 22px/1 var(--fi);color:var(--dark);font-variant-numeric:tabular-nums;letter-spacing:-.02em;}
.btp-metric-val.good{color:#2E7D32;}
.btp-metric-val.warn{color:var(--red);}
.btp-metric-lbl{font:300 12px/1 var(--fi);color:var(--sec);}
.btp-bars{display:flex;flex-direction:column;gap:3px;}
.btp-bar-row{display:flex;align-items:center;gap:6px;font:300 10px/1 var(--fi);}
.btp-bar-lbl{min-width:60px;color:var(--sec);text-align:right;font-variant-numeric:tabular-nums;}
.btp-bar-track{flex:1;height:10px;background:rgba(0,0,0,.03);}
.btp-bar-fill{height:100%;}
.btp-bar-val{min-width:36px;font:500 10px/1 var(--fi);color:var(--dark);font-variant-numeric:tabular-nums;}
.btp-callout{display:flex;align-items:flex-start;gap:8px;padding:8px 10px;border-left:3px solid var(--rule);font:300 11px/1.4 var(--fi);color:var(--sec);}
.btp-callout.bad{border-left-color:var(--red);}
.btp-callout.warn{border-left-color:#B45309;}
.btp-callout.clean{border-left-color:#2E7D32;}
.btp-callout-icon{flex-shrink:0;font-size:11px;}
.btp-callout.bad .btp-callout-icon{color:var(--red);}
.btp-callout.warn .btp-callout-icon{color:#B45309;}
.btp-callout.clean .btp-callout-icon{color:#2E7D32;}
.btp-callout-text{flex:1;}

/* Awareness Profile */
.aw-summary{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 8px;font:300 12px/1.4 var(--fi);padding:6px 0;}
.aw-summary strong{font-weight:600;font-variant-numeric:tabular-nums;}
.aw-summary .good{color:#2E7D32;}
.aw-summary .warn{color:#B45309;}
.aw-sep{color:var(--rule);}
.aw-hist{margin:8px 0;overflow-x:auto;}
.aw-legend{display:flex;gap:16px;font:300 11px/1 var(--fi);color:var(--muted);padding:4px 0;}
.aw-list-hdr{font:500 10px/1 var(--fi);letter-spacing:.08em;text-transform:uppercase;padding:8px 0 4px;border-top:1px solid var(--rule);margin-top:8px;}
.aw-list-hdr.good{color:#2E7D32;}
.aw-list-hdr.warn{color:#B45309;}
.aw-list-sub{font-weight:300;letter-spacing:0;text-transform:none;color:var(--muted);margin-left:6px;}
.aw-table{width:100%;border-collapse:collapse;font:300 11px/1.2 var(--fi);}
.aw-row td{padding:2px 6px;border-bottom:1px solid var(--rule);font-variant-numeric:tabular-nums;}
.aw-inn{font-weight:500;white-space:nowrap;}
.aw-li{color:var(--sec);}
.aw-call{color:var(--muted);font-style:italic;}
.aw-note{font:300 11px/1.4 var(--fi);color:var(--muted);padding:8px 0;font-style:italic;}

/* Empty state */
.empty-msg{font:300 12px/1.4 var(--fi);color:var(--muted);padding:12px 0;text-align:center;}

/* ═══════════════════════════════════════════════════════════════
   PITCH DETAIL CARD — replaces edge zoom, reusable across pages
═══════════════════════════════════════════════════════════════ */
.pdc{margin-top:12px;transition:opacity 200ms;}
.pdc:not(.has-pitch){display:none;}
.pdc.has-pitch{border-top:1px solid var(--rule);padding-top:14px;}

/* Result header */
.pdc-result{padding:10px 14px;margin-bottom:2px;}
.pdc-result-text{font:700 20px/1 var(--fi);letter-spacing:-.02em;}
.pdc-result.ov{background:rgba(46,125,50,.06);}.pdc-result.ov .pdc-result-text{color:var(--good);}
.pdc-result.up{background:rgba(252,61,33,.06);}.pdc-result.up .pdc-result-text{color:var(--red);}
.pdc-result.miss{background:rgba(180,83,9,.06);}.pdc-result.miss .pdc-result-text{color:#B45309;}

/* Subtitle */
.pdc-subtitle{font:300 12px/1.3 var(--fi);color:var(--sec);padding:0 14px 10px;border-bottom:1px solid var(--rule);}

/* Detail rows */
.pdc-details{padding:0;}
.pdc-row{display:flex;justify-content:space-between;align-items:center;padding:6px 14px;border-bottom:1px solid var(--rule);}
.pdc-row-label{font:500 10px/1 var(--fi);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);}
.pdc-row-value{font:400 13px/1 var(--fi);color:var(--dark);text-align:right;font-variant-numeric:tabular-nums;}
.pdc-row-value.ov{color:var(--good);font-weight:600;}
.pdc-row-value.up{color:var(--red);font-weight:600;}
.pdc-row-value.miss{color:#B45309;font-weight:600;}
.pdc-row-value.tight{color:var(--red);font-weight:500;}
.pdc-row-value.high-li{color:var(--red);font-weight:500;}

/* PI Take */
.pdc-take{padding:10px 14px;border-top:1px solid var(--rule);background:var(--bgw);}
.pdc-take-label{font:600 9px/1 var(--fi);letter-spacing:.08em;color:var(--muted);margin-bottom:6px;}
.pdc-take-label::before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;background:#B45309;margin-right:5px;vertical-align:1px;}
.pdc-take-text{font:300 12px/1.5 var(--fi);color:var(--sec);}
.pdc-take-more{font:500 10px/1 var(--fi);letter-spacing:.06em;color:var(--muted);margin-top:6px;cursor:pointer;}
.pdc-take-more:hover{color:var(--dark);}

/* Game state bar */
.pdc-state{display:flex;border-top:1px solid var(--rule);background:var(--bgw);}
.pdc-state-cell{flex:1;padding:8px 10px;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;}
.pdc-state-cell:not(:last-child){border-right:1px solid var(--rule);}
.pdc-state-label{font:500 8px/1 var(--fi);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);}
.pdc-state-val{font:600 13px/1 var(--fi);color:var(--dark);}
.pdc-state-inning{display:flex;align-items:center;justify-content:center;gap:3px;}
.pdc-inn-num{font:700 16px/1 var(--fi);color:var(--dark);}
.pdc-inn-arrow{font-size:8px;color:var(--sec);}
.pdc-state-dots{display:flex;align-items:center;justify-content:center;gap:3px;}
.pdc-dot{width:8px;height:8px;border-radius:50%;border:1.5px solid;display:inline-block;}
.pdc-dot.filled{border-color:transparent !important;}
.pdc-dot-sep{color:var(--rule);font-size:12px;margin:0 2px;}

/* ═══════════════════════════════════════════════════════════════
   CATCHER COL2 — Challenge Map + Battery + Behind the Plate
═══════════════════════════════════════════════════════════════ */
/* catcher-col2 sections use existing .sec-hdr pattern */
.catcher-col2{padding:7px 14px;}

/* Challenge Map controls */
.catcher-col2 .map-controls{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;gap:8px;flex-wrap:wrap;}
/* Single-row layout: filter chips flex-grow, view toggle shrinks to its content. */
.catcher-col2 .map-controls--single{flex-wrap:nowrap;}
.catcher-col2 .map-filters{display:flex;gap:4px;flex-wrap:wrap;}
.catcher-col2 .filter-chip{display:flex;align-items:center;gap:4px;padding:4px 7px;background:var(--bg);border:1px solid var(--rule);font:500 9px/1 var(--fi);letter-spacing:.02em;color:var(--sec);cursor:pointer;transition:all 120ms cubic-bezier(0,0,.2,1);user-select:none;}
.catcher-col2 .filter-chip:hover{background:var(--bgw);}
.catcher-col2 .filter-chip.active{background:var(--bgw);border-color:rgba(0,0,0,.18);color:var(--dark);}
.catcher-col2 .filter-chip.active.ov{border-color:var(--good);}
.catcher-col2 .filter-chip.active.up{border-color:var(--red);}
.catcher-col2 .filter-chip.active.miss{border-color:#B45309;}
.catcher-col2 .chip-dot{width:8px;height:8px;border-radius:2px;}
.catcher-col2 .chip-dot.ov{background:var(--good);}
.catcher-col2 .chip-dot.up{background:var(--red);}
.catcher-col2 .chip-dot.miss{background:#B45309;}
.catcher-col2 .filter-chip.inactive .chip-dot{opacity:.3;}
.catcher-col2 .chip-count{font-weight:400;color:var(--muted);}

/* View toggle */
.catcher-col2 .view-toggle{display:flex;border:1px solid var(--rule);background:var(--bg);flex-shrink:0;}
.catcher-col2 .view-btn{padding:4px 9px;font:500 9px/1 var(--fi);letter-spacing:.04em;color:var(--muted);cursor:pointer;transition:all 120ms;border:none;background:none;}
.catcher-col2 .view-btn:first-child{border-right:1px solid var(--rule);}
.catcher-col2 .view-btn:hover{color:var(--sec);}
.catcher-col2 .view-btn.active{background:var(--dark);color:#fff;}

/* Grid */
.catcher-col2 .map-wrap{display:flex;gap:6px;align-items:flex-start;}
.catcher-col2 .map-labels{display:flex;flex-direction:column;gap:2px;padding-top:38px;}
.catcher-col2 .map-label{height:14px;font:400 9px/14px var(--fi);color:var(--muted);text-align:right;padding-right:4px;}
.catcher-col2 .map-grid-container{flex:1;overflow-x:auto;}
.catcher-col2 .map-months{display:flex;gap:4px;margin-bottom:2px;}
.catcher-col2 .map-month-span{font:500 9px/1 var(--fi);letter-spacing:.06em;color:var(--sec);text-align:center;padding-bottom:3px;border-bottom:1px solid var(--rule);}
.catcher-col2 .map-dates{display:flex;gap:2px;margin-bottom:4px;height:14px;}
.catcher-col2 .map-date{width:14px;font:400 8px/1 var(--fi);color:var(--muted);text-align:center;display:flex;align-items:flex-end;justify-content:center;}
.catcher-col2 .map-grid{display:flex;gap:2px;}
.catcher-col2 .map-col{display:flex;flex-direction:column;gap:2px;}
.catcher-col2 .map-cell{width:14px;height:14px;border-radius:0;cursor:pointer;transition:transform 120ms;position:relative;display:flex;align-items:center;justify-content:center;}
.catcher-col2 .map-cell:hover{opacity:.75;z-index:10;}
.catcher-col2 .map-cell.empty{background:var(--bgi);}
.catcher-col2 .map-cell.ov{background:var(--good);}
.catcher-col2 .map-cell.up{background:var(--red);}
.catcher-col2 .map-cell.miss{background:#B45309;}
.catcher-col2.quality-view .map-cell.tier-S{background:var(--good);}
.catcher-col2.quality-view .map-cell.tier-A{background:#5B9279;}
.catcher-col2.quality-view .map-cell.tier-B{background:#D4A017;}
.catcher-col2.quality-view .map-cell.tier-C{background:#C4873B;}
.catcher-col2.quality-view .map-cell.tier-D{background:var(--red);}
.catcher-col2 .multi-dot{position:absolute;bottom:2px;right:2px;width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.7);}

/* Legend */
.catcher-col2 .map-legend{display:flex;align-items:center;justify-content:space-between;margin-top:12px;font:300 10px/1 var(--fi);color:var(--muted);}
.catcher-col2 .map-legend-item{display:flex;align-items:center;gap:5px;}
.catcher-col2 .map-legend-swatch{width:10px;height:10px;border-radius:0;}
.catcher-col2 .map-legend-left{display:flex;align-items:center;gap:10px;}
.catcher-col2 .map-legend-right{display:flex;align-items:center;gap:8px;}
.catcher-col2 .map-legend-label{font:500 9px/1 var(--fi);letter-spacing:.04em;color:var(--sec);}

/* Battery table (CW) */
/* .battery-tbl — row styling + keyed columns; header handled by .pi-tbl */
.catcher-col2 .battery-tbl th.key{background:var(--red);color:rgba(255,255,255,.9);}
.catcher-col2 .battery-tbl tbody tr{background:var(--bg);border-bottom:1px solid var(--rule);height:34px;transition:background 120ms;cursor:pointer;}
.catcher-col2 .battery-tbl tbody tr:nth-child(even){background:var(--bgw);}
.catcher-col2 .battery-tbl tbody tr:hover{background:var(--bgi);}
.catcher-col2 .battery-tbl tbody tr.selected{background:rgba(252,61,33,.10);}
.catcher-col2 .battery-tbl td{padding:0 10px;text-align:right;font:400 12px/1 var(--fi);color:var(--dark);}
.catcher-col2 .battery-tbl td.l{text-align:left;}
.catcher-col2 .battery-tbl td.pitcher-name{font-weight:500;}
.catcher-col2 .battery-tbl td.miss-pct{position:relative;}
.catcher-col2 .miss-bar{position:absolute;left:10px;top:50%;transform:translateY(-50%);height:4px;background:var(--red);opacity:.25;}
.catcher-col2 .battery-hint{font:300 11px/1.4 var(--fi);color:var(--muted);margin-top:10px;}

/* Behind the Plate (CW) — comparison bars */
.catcher-col2 .compare-row{display:grid;grid-template-columns:140px 1fr;gap:16px;align-items:center;margin-bottom:20px;}
.catcher-col2 .compare-row:last-child{margin-bottom:0;}
.catcher-col2 .compare-label{font:400 12px/1 var(--fi);color:var(--sec);}
.catcher-col2 .compare-bars{display:flex;flex-direction:column;gap:4px;}
.catcher-col2 .compare-bar-row{display:grid;grid-template-columns:60px 1fr 50px;gap:8px;align-items:center;}
.catcher-col2 .compare-bar-entity{font:500 10px/1 var(--fi);letter-spacing:.04em;text-transform:uppercase;}
.catcher-col2 .compare-bar-entity.player{color:var(--dark);}
.catcher-col2 .compare-bar-entity.league{color:var(--muted);}
.catcher-col2 .compare-bar-track{height:6px;background:var(--bgi);}
.catcher-col2 .compare-bar-fill{height:100%;}
.catcher-col2 .compare-bar-fill.player.worse{background:var(--red);}
.catcher-col2 .compare-bar-fill.player.better{background:var(--good);}
.catcher-col2 .compare-bar-fill.league{background:var(--muted);opacity:.5;}
.catcher-col2 .compare-bar-val{font:300 12px/1 var(--fi);font-variant-numeric:tabular-nums;text-align:right;}


/* ==========================================================================
   Admin Tweets (#/admin/tweets)
   ========================================================================== */
.atw { padding: 24px var(--sp-4); max-width: 1200px; margin: 0 auto; }
.atw-head { margin-bottom: 32px; border-bottom: 2px solid var(--rules); padding-bottom: 16px; }
.atw-title-row { display: flex; justify-content: space-between; align-items: baseline; }
.atw-h1 { font: 800 24px/1 var(--fi); letter-spacing: -0.02em; }
.atw-back { font: 500 13px/1 var(--fi); color: var(--muted); text-decoration: none; }
.atw-back:hover { color: var(--dark); }
.atw-controls { margin-top: 12px; }
.atw-date { font: 400 13px/1 var(--fi); padding: 6px 10px; border: 1px solid var(--rule); background: #fff; }

.atw-section { margin-bottom: 40px; }
.atw-section-label { font: 700 10px/1 var(--fi); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.atw-sub-label { font: 600 12px/1 var(--fi); color: var(--sec); margin: 24px 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--rule); }
.atw-rule { border-top: 1px solid var(--rule); margin-bottom: 16px; }

/* Spotlights */
.atw-spots { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px; margin-bottom: 24px; }
.atw-spot { padding: 16px 0; border-bottom: 1px solid var(--rule); }
.atw-spot-label { font: 700 10px/1 var(--fi); letter-spacing: 0.1em; text-transform: uppercase; color: var(--red); margin-bottom: 10px; }
.atw-spot-matchup { display: flex; gap: 8px; align-items: baseline; margin-bottom: 6px; }
.atw-spot-name { font: 700 18px/1 var(--fi); }
.atw-spot-team { font: 500 13px/1 var(--fi); color: var(--muted); }
.atw-spot-meta { display: flex; gap: 12px; align-items: center; font: 500 13px/1 var(--fi); margin-bottom: 6px; }
.atw-spot-edge { font-weight: 700; font-variant-numeric: tabular-nums; }
.atw-spot-score { color: var(--sec); font-variant-numeric: tabular-nums; }
.atw-spot-detail { font: 400 12px/1.3 var(--fi); color: var(--sec); margin-bottom: 8px; }
.atw-spot-take { font: 400 12px/1.5 var(--fi); color: var(--sec); margin: 8px 0 12px; max-height: 60px; overflow: hidden; }

/* Candidate table */
.atw-table { width: 100%; border-collapse: collapse; font: 400 13px/1 var(--fi); }
.atw-table th { font: 600 10px/1 var(--fi); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--rules); }
.atw-table td { padding: 8px 10px; border-bottom: 1px solid var(--rule); }
.atw-table tr:hover td { background: var(--bgw); }
.atw-mono { font-variant-numeric: tabular-nums; }

/* Flag */
.atw-flag { background: var(--red-d); color: var(--red); padding: 2px 6px; font: 600 10px/1 var(--fi); letter-spacing: 0.04em; text-transform: uppercase; }

/* Generate button */
.atw-gen-btn { background: none; border: 1px solid var(--rule); padding: 4px 10px; font: 600 11px/1 var(--fi); cursor: pointer; text-transform: uppercase; letter-spacing: 0.04em; }
.atw-gen-btn:hover { border-color: var(--dark); background: var(--bgw); }
.atw-gen-primary { background: var(--dark); color: #fff; border-color: var(--dark); }
.atw-gen-primary:hover { background: var(--red); border-color: var(--red); }

/* Color helpers */
.atw-good { color: var(--good); font-weight: 600; }
.atw-bad { color: var(--red); font-weight: 600; }

/* Per-row collapsible preview (card iframe + 3D + take selector) */
.atw-expand-btn { background: none; border: 1px solid var(--rule); width: 22px; height: 22px; padding: 0; font: 700 12px/1 var(--fi); color: var(--sec); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.atw-expand-btn:hover { border-color: var(--dark); background: var(--bgw); color: var(--dark); }
.atw-expand-btn[aria-expanded="true"] { background: var(--dark); color: #fff; border-color: var(--dark); }
.atw-preview-row td { padding: 0; background: var(--bgw); border-bottom: 1px solid var(--rule); }
.atw-pv { display: grid; grid-template-columns: 410px 1fr 320px; gap: 20px; padding: 20px; }
@media (max-width: 1100px) { .atw-pv { grid-template-columns: 1fr; } }
.atw-pv-label { font: 700 10px/1 var(--fi); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.atw-pv-card-col, .atw-pv-media-col, .atw-pv-takes-col { display: flex; flex-direction: column; min-width: 0; }
.atw-pv-card { width: 410px; height: 920px; border: 1px solid var(--rule); background: #999; display: block; }
/* 3D viewer: fill column width with a sensible 16:10 aspect so the field reads
   correctly. Without aspect-ratio the iframe inherits sibling height (920px on
   desktop) and the view stretches into a tall sliver. */
.atw-pv-r3f { width: 100%; aspect-ratio: 16 / 10; min-height: 320px; border: 1px solid var(--rule); background: #111; display: block; }
.atw-pv-clip-slot { display: flex; flex-direction: column; gap: 6px; }
.atw-pv-clip-loading { padding: 8px 0; font: 500 12px/1.4 var(--fi); color: var(--muted); }
.atw-pv-clip-picker { display: flex; flex-wrap: wrap; gap: 6px; }
.atw-pv-clip-btn { font: 500 11px/1 var(--fi); padding: 4px 8px; border: 1px solid var(--rule); background: #fff; cursor: pointer; }
.atw-pv-clip-btn:hover { border-color: var(--dark); }
.atw-pv-clip-btn.atw-pv-clip-active { background: var(--dark); color: #fff; border-color: var(--dark); }
.atw-pv-clip-video { width: 100%; aspect-ratio: 16 / 9; background: #111; border: 1px solid var(--rule); display: block; }
.atw-pv-clip-meta { font: 500 10px/1.4 var(--fi); color: var(--muted); }
.atw-pv-takes-col { gap: 10px; }
.atw-pv-take-picker { display: flex; flex-direction: column; gap: 6px; padding: 8px 10px; border: 1px solid var(--rule); background: #fff; }
.atw-pv-take-opt { font: 500 12px/1.2 var(--fi); display: flex; align-items: center; gap: 6px; cursor: pointer; }
.atw-pv-take-opt.atw-pv-disabled { color: var(--muted); cursor: not-allowed; }
.atw-pv-na { color: var(--muted); font-weight: 400; font-size: 11px; }
.atw-pv-take-block { border: 1px solid var(--rule); background: #fff; display: flex; flex-direction: column; }
.atw-pv-take-hd { font: 700 10px/1 var(--fi); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); padding: 6px 10px; border-bottom: 1px solid var(--rule); background: var(--bgw); flex-shrink: 0; }
.atw-pv-take-body { font: 400 12px/1.5 var(--fi); color: var(--dark); padding: 8px 10px; white-space: pre-wrap; }
.atw-pv-take-body.atw-pv-empty { color: var(--muted); font-style: italic; }

/* Queue rows (compact list) */
.atw-qrow { display: flex; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--rule); font: 400 13px/1 var(--fi); }
.atw-qrow:hover { background: var(--bgw); }
.atw-qrow-pid { font: 600 12px/1 var(--fi); font-variant-numeric: tabular-nums; color: var(--muted); min-width: 80px; }
.atw-qrow-name { font: 600 13px/1 var(--fi); }
.atw-qrow-edge { font: 400 12px/1 var(--fi); font-variant-numeric: tabular-nums; color: var(--muted); }
.atw-qrow-result { font: 600 12px/1 var(--fi); }
.atw-qrow-icon { font: 700 9px/1 var(--fi); letter-spacing: 0.06em; padding: 2px 5px; background: var(--bgw); color: var(--sec); }
.atw-qrow-status { margin-left: auto; font: 600 10px/1 var(--fi); letter-spacing: 0.08em; text-transform: uppercase; padding: 3px 8px; background: var(--bgw); }
.atw-s-ready .atw-qrow-status { background: var(--good); color: #fff; }
.atw-s-capturing .atw-qrow-status { background: #E3F2FD; color: #1565C0; }
.atw-s-awaiting_text .atw-qrow-status { background: #FFF3E0; color: #E65100; }
.atw-s-error .atw-qrow-status { background: var(--red-d); color: var(--red); }
.atw-s-posted .atw-qrow-status { background: var(--bgw); color: var(--muted); }
.atw-s-discarded .atw-qrow-status { background: var(--bgw); color: var(--muted); text-decoration: line-through; }
.atw-qrow-err { font: 400 11px/1 var(--fi); color: var(--red); max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.atw-qrow-actions { display: flex; gap: 6px; }
.atw-q-review { background: var(--dark); color: #fff; border: none; padding: 4px 12px; font: 600 11px/1 var(--fi); cursor: pointer; text-transform: uppercase; letter-spacing: 0.04em; }
.atw-q-review:hover { background: var(--red); }
.atw-q-action { background: none; border: 1px solid var(--rule); padding: 3px 10px; font: 500 11px/1 var(--fi); cursor: pointer; }
.atw-q-action:hover { background: var(--bgw); }

/* Review page */
.atw-rv { display: grid; grid-template-columns: 340px 1fr; gap: 40px; }
@media (max-width: 860px) { .atw-rv { grid-template-columns: 1fr; } }

.atw-rv-label { font: 700 10px/1 var(--fi); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.atw-rv-dl { font: 600 10px/1 var(--fi); letter-spacing: 0.06em; text-transform: none; color: var(--dark); text-decoration: none; padding: 4px 8px; border: 1px solid var(--rule); }
.atw-rv-dl:hover { background: var(--bgw); }
.atw-rv-clip-btn { font: 600 10px/1 var(--fi); letter-spacing: 0.04em; text-transform: none; color: var(--dark); background: none; padding: 5px 9px; border: 1px solid var(--rule); cursor: pointer; }
.atw-rv-clip-btn:hover { background: var(--bgw); }
.atw-rv-clip-btn.atw-rv-clip-active { background: var(--dark); color: var(--bgw); border-color: var(--dark); }
.atw-rv-challenger { margin-bottom: 4px; }
.atw-rv-name { font: 700 20px/1 var(--fi); }
.atw-rv-type { font: 500 13px/1 var(--fi); color: var(--muted); margin-left: 6px; }
.atw-rv-matchup { font: 400 14px/1.3 var(--fi); color: var(--sec); margin-bottom: 4px; }
.atw-rv-situation { font: 400 12px/1.3 var(--fi); color: var(--muted); margin-bottom: 16px; }

.atw-rv-stats { width: 100%; border-collapse: collapse; font: 400 13px/1 var(--fi); margin-bottom: 16px; }
.atw-rv-stats td { padding: 6px 0; border-bottom: 1px solid var(--rule); }
.atw-rv-stats td:first-child { font-weight: 600; color: var(--sec); width: 130px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; }
.atw-rv-stats td:last-child { font-variant-numeric: tabular-nums; }
.atw-rv-status-tag { font: 600 10px/1 var(--fi); letter-spacing: 0.08em; text-transform: uppercase; padding: 2px 6px; }
.atw-s-ready .atw-rv-status-tag, .atw-rv-status-tag.atw-s-ready { background: var(--good); color: #fff; }
.atw-s-capturing .atw-rv-status-tag, .atw-rv-status-tag.atw-s-capturing { background: #E3F2FD; color: #1565C0; }
.atw-s-awaiting_text .atw-rv-status-tag, .atw-rv-status-tag.atw-s-awaiting_text { background: #FFF3E0; color: #E65100; }
.atw-s-error .atw-rv-status-tag, .atw-rv-status-tag.atw-s-error { background: var(--red-d); color: var(--red); }

.atw-rv-take { font: 400 12px/1.6 var(--fi); color: var(--sec); line-height: 1.6; }

.atw-rv-card { width: 100%; max-width: 390px; height: auto; border: 1px solid var(--rule); }
.atw-rv-video { width: 100%; max-width: 640px; border: 1px solid var(--rule); background: #000; }

.atw-rv-textarea { width: 100%; font: 400 14px/1.5 var(--fi); padding: 10px; border: 1px solid var(--rule); background: #fff; resize: vertical; }
.atw-rv-textarea:focus { border-color: var(--red); outline: none; }
.atw-rv-charbar { font: 400 11px/1 var(--fi); color: var(--muted); text-align: right; margin-top: 4px; font-variant-numeric: tabular-nums; }

.atw-rv-actions { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.atw-rv-btn { padding: 8px 16px; font: 600 12px/1 var(--fi); border: 1px solid var(--rule); background: none; cursor: pointer; text-transform: uppercase; letter-spacing: 0.04em; }
.atw-rv-btn:hover { background: var(--bgw); }
.atw-rv-btn-good { border-color: var(--good); color: var(--good); }
.atw-rv-btn-good:hover { background: var(--good); color: #fff; }
.atw-rv-btn-bad { border-color: var(--red); color: var(--red); }
.atw-rv-btn-bad:hover { background: var(--red); color: #fff; }
.atw-rv-btn-gen { background: var(--dark); color: #fff; border-color: var(--dark); }
.atw-rv-btn-gen:hover { background: var(--red); border-color: var(--red); }
.atw-rv-btn-gen:disabled { opacity: 0.5; cursor: wait; }

.atw-loading { font: 400 13px/1 var(--fi); color: var(--muted); padding: 12px 0; }
.atw-empty { font: 400 13px/1 var(--fi); color: var(--muted); font-style: italic; padding: 12px 0; }
.atw-error { font: 400 13px/1 var(--fi); color: var(--red); padding: 12px 0; }

/* ==========================================================================
   LIVE SUBWAY
   ========================================================================== */
.lsub-shell { margin: 0 0 8px; border-bottom: 1px solid var(--rule); }
.lsub-header { background: var(--bgw); display: flex; align-items: center; gap: 7px; padding: 6px 16px; border-bottom: 1px solid var(--rule); font-size: 9px; line-height: 1; }
.lsub-summary { }
.lsub-summary-scroll { overflow: hidden; }
.lsub-summary-scroll svg { display: block; }
.lsub-expand-btn { background: var(--red); border: 1px solid var(--red); padding: 2px 8px; border-radius: 2px; font: 600 9px/1 var(--fi); letter-spacing: .06em; color: #fff; cursor: pointer; text-transform: uppercase; flex-shrink: 0; }
.lsub-expand-btn:hover { opacity: .85; }
.lsub-ctrl { display: flex; align-items: center; gap: 8px; padding: 4px 8px; background: var(--bgw); border-bottom: 1px solid rgba(0,0,0,.06); height: 33px; box-sizing: border-box; }
.lsub-view-toggle { display: flex; gap: 0; }
.lsub-view-btn { font: 600 9px/1 var(--fi) !important; letter-spacing: .08em; text-transform: uppercase; padding: 3px 10px; height: auto !important; border: 1px solid rgba(0,0,0,.12); background: transparent; color: var(--muted); cursor: pointer; }
.lsub-view-btn:first-child { border-radius: 2px 0 0 2px; }
.lsub-view-btn:last-child { border-radius: 0 2px 2px 0; margin-left: -1px; }
.lsub-view-btn.on { background: var(--dark); color: var(--bg); border-color: var(--dark); }
.lsub-filter-chips { display: flex; gap: 4px; }
.lsub-search { font: 400 10px/1 var(--fi); padding: 4px 8px; border: 1px solid rgba(0,0,0,.12); border-radius: 2px; width: 110px; background: var(--bg); color: var(--dark); outline: none; }
.lsub-search:focus { border-color: var(--red); }
.lsub-info { font: 300 9px/1 var(--fi); color: var(--muted); margin-left: auto; white-space: nowrap; }
.lsub-body { display: flex; overflow: hidden; }
.lsub-labels { flex-shrink: 0; overflow: hidden; background: var(--bgw); border-right: 1px solid rgba(0,0,0,.08); width: 160px; }
.lsub-scroll { flex: 1; overflow-x: auto; overflow-y: hidden; }
.lsub-scroll svg { display: block; }
.lsub-label-row:hover { background: rgba(0,0,0,.02); }

@keyframes lsub-pulse-anim {
  0% { opacity: .8; r: 14; }
  50% { opacity: .3; r: 20; }
  100% { opacity: .8; r: 14; }
}
.lsub-pulse { animation: lsub-pulse-anim 1.5s ease-in-out infinite; }