:root {
  color-scheme: light;
  --page: #eaf0f6;
  --navy: #061d35;
  --panel: #f5f8fb;
  --panel-2: #edf3f8;
  --panel-3: #e5eef6;
  --text: #17212d;
  --muted: #626d79;
  --soft: #7b8794;
  --line: #dce6ef;
  --blue: #0067ad;
  --dodger-blue: #0077c8;
  --green: #087c59;
  --red: #d8333a;
}

* { box-sizing: border-box; }
html { background: var(--page); }
body {
  margin: 0;
  color: var(--text);
  background: var(--page);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.45;
}
a { color: var(--blue); }
.shell { width: min(1180px, calc(100% - 32px)); margin: 6px auto 42px; }
.report-frame {
  overflow: hidden;
  background: #fff;
  border: 1px solid #dce6ef;
  border-radius: 30px;
  box-shadow: 0 24px 70px rgba(6, 29, 53, .18);
}

.hero { padding: 20px 24px; color: #fff; background: linear-gradient(145deg, #08233e 0%, #061d35 72%); }
/* One column now: the broadcast and forecast read as a line under the date. */
.hero-top { display: block; }
.hero-head { min-width: 0; }
.hero-head::after { content: ""; display: block; clear: both; }
.logo { float: left; width: 40px; height: 48px; margin: 0 13px 2px 0; object-fit: contain; }
.eyebrow, .section-kicker {
  color: #9fc9ed;
  font-size: 13px;
  font-weight: 850;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.matchup-title { display: flex; align-items: center; gap: 11px; min-width: 0; }
/* Sized to keep the club name on one line, with balanced wrapping as a
   fallback for the longest names on the narrowest screens. */
.hero h1 { margin: 2px 0 4px; font-size: clamp(22px, 2.5vw, 32px); line-height: 1.04; letter-spacing: -.025em; text-wrap: balance; }
.opponent-logo { width: 30px; height: 30px; object-fit: contain; flex: 0 0 auto; }
/* No balancing here: it breaks the line early and pushes the game number onto
   a row of its own. Fill the width, and keep the game number itself intact. */
.subhead { color: #d3e4f3; font-size: clamp(12px, 1.1vw, 14px); }
/* The game number rides beside the eyebrow rather than on the date line. */
.eyebrow .game-no { margin-left: 9px; color: #7fb4de; font-size: 11px; font-weight: 800; letter-spacing: .06em; white-space: nowrap; }
/* Same size and colour as the date line directly above it. */
.hero-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; margin-top: 4px; color: #d3e4f3; font-size: clamp(12px, 1.1vw, 14px); }
.hero-tv { display: inline-flex; align-items: center; gap: 6px; }
/* Bigger than the text it separates, nudged onto the optical centre line, and
   carrying its own symmetric margins so every bullet is spaced identically. */
.hero-top .dot { margin: 0 7px; font-size: 1.7em; line-height: 0; vertical-align: -.16em; opacity: .65; }
.tv-icon { width: 15px; height: 15px; flex: 0 0 auto; }
.hero-weather { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 3px 9px; }
.subhead .game-kind { white-space: nowrap; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; font-size: .82em; }
.hero h1, .hero h2 { color: #fff; }
.weather-line { display: flex; flex-wrap: wrap; gap: 3px 10px; margin-top: 3px; font-size: 14px; font-weight: 750; }
.weather-piece { white-space: nowrap; }

.lineup-card { margin-top: 16px; padding: 16px; background: #0a243d; border: 1px solid var(--line); border-radius: 22px; }
.lineup-heading { display: flex; justify-content: space-between; gap: 20px; align-items: end; margin-bottom: 13px; }
.lineup-heading h2 { margin: 2px 0 0; color: #fff; font-size: 25px; }
.lineup-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; color: #c3d3e1; font-size: 14px; }
.lineup-legend span { white-space: nowrap; }
.lineup-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.batter {
  display: grid;
  grid-template-columns: 31px minmax(0, 1fr);
  gap: 9px;
  min-width: 0;
  padding: 11px;
  background: #0d2944;
  border: 1px solid rgba(255, 255, 255, .055);
  border-radius: 12px;
}
.order {
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  color: #fff;
  background: var(--dodger-blue);
  border-radius: 8px;
  font-weight: 900;
}
.batter-body { min-width: 0; }
.batter-name { color: #fff; font-size: 16px; font-weight: 820; line-height: 1.3; }
.position { margin-left: 4px; color: #b8c9d8; font-size: 14px; font-weight: 650; }
.statline { display: grid; grid-template-columns: 31px minmax(0, 1fr); gap: 5px; margin-top: 4px; color: #c3d3e1; font-size: 14px; line-height: 1.3; }
.statline > span { color: #b8cfe2; font-size: 13px; font-weight: 750; }
.stat-values { display: flex; flex-wrap: wrap; gap: 0 7px; }
.stat-values b { white-space: nowrap; font-weight: inherit; }
.stat-values b:not(:last-child)::after { content: ' ·'; }
.statline.recent { color: #7bc3ff; font-weight: 750; }
.batter-stats { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 14px; line-height: 1.5; font-variant-numeric: tabular-nums; margin-top: 5px; color: #d2deea; }
.batter-stats th, .batter-stats td { padding: 1px 0; text-align: right; white-space: nowrap; }
.batter-stats th:first-child { width: 28px; text-align: left; }
.batter-stats th { color: #bdd3e5; font-weight: 650; }
.batter-stats .recent td { color: #7bc3ff; font-weight: 750; }
.sample-note { font-size: 14px; color: #bdd3e5; margin-top: 3px; }
.installed-app { overscroll-behavior-y: contain; }
.moneyline-pair { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.moneyline-pair > span { display: inline-flex; gap: 8px; white-space: nowrap; font-weight: 500; }
.rss a.rss-button { display: inline-flex; align-items: center; justify-content: center; gap: 12px; max-width: 100%; min-height: 52px; padding: 14px 22px; border-radius: 16px; color: #fff; background: #08233e; font-size: 19px; font-weight: 800; text-decoration: none; }
.rss-button svg { width: 32px; height: 32px; flex: 0 0 32px; }
.rss-button:hover { background: #123a5e; }
.mobile-standings { display: none; }

.section { min-width: 0; padding: 28px 32px; color: var(--text); background: #fff; border-top: 1px solid var(--line); }
.section-heading { display: flex; justify-content: space-between; gap: 22px; align-items: end; margin-bottom: 18px; }
.section-heading h2, .section > h2 { margin: 3px 0 0; color: var(--text); font-size: clamp(24px, 3vw, 31px); letter-spacing: -.018em; }
/* Left-aligned even on the right-hand side: right-justified wrapped text reads
   as ragged and unbalanced. */
.section-heading > p { max-width: 330px; margin: 0; color: var(--muted); font-size: 14px; text-align: left; }
.section h3 { color: var(--text); }
.section .section-kicker { color: #005a9c; }
.hero .section-kicker { color: #9fc9ed; }

.comparison-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.metric { min-width: 0; padding: 16px; background: #0d2944; border: 1px solid #1a496d; border-radius: 14px; }
.metric strong { display: block; color: #fff; font-size: 23px; line-height: 1.1; }
.metric span { display: block; margin-top: 6px; color: #d1dfeb; font-size: 14px; }
.metric small { display: block; margin-top: 4px; color: #84c9ff; font-size: 13px; }
.closest { display: grid; gap: 3px; margin-top: 10px; padding: 15px 17px; background: #eef6fc; border: 1px solid #cfe2f2; border-radius: 14px; }
.closest-label { color: var(--blue); font-size: 13px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.closest strong { color: var(--text); }
.closest > span:last-child, .card-subtitle { color: var(--muted); font-size: 14px; }
.lineup-changes { margin-top: 18px; }
.closest + .lineup-changes { margin-top: 18px; }

.pitcher-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.pitcher-card { min-width: 0; padding: 18px; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; }
.pitcher-team { display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: 14px; font-weight: 750; }
.pitcher-team img { width: 32px; height: 32px; object-fit: contain; }
.pitcher-card h3 { margin: 10px 0 2px; color: var(--text); font-size: 25px; }
.pitcher-record { color: var(--muted); font-size: 14px; }
.pitcher-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; margin-top: 15px; }
.pitcher-stats div { min-width: 0; padding: 9px; background: #fff; border: 1px solid var(--line); border-radius: 9px; text-align: center; }
.pitcher-stats span { display: block; color: #637384; font-size: 11px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.pitcher-stats strong { display: block; overflow: hidden; margin-top: 2px; color: var(--text); font-size: 16px; text-overflow: ellipsis; }

.schedule-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.schedule-game { min-width: 0; padding: 13px; background: var(--panel); border: 1px solid var(--line); border-radius: 13px; }
.schedule-date { color: var(--blue); font-size: 14px; font-weight: 800; }
.schedule-date span { color: var(--soft); font-weight: 600; }
.schedule-matchup { display: flex; gap: 9px; align-items: center; margin-top: 8px; min-width: 0; }
.schedule-matchup img { width: 35px; height: 35px; object-fit: contain; flex: 0 0 auto; }
.schedule-matchup div { min-width: 0; }
.schedule-matchup strong, .schedule-matchup span { display: block; overflow-wrap: anywhere; }
.schedule-matchup strong { color: var(--text); }
.schedule-matchup span { color: var(--muted); font-size: 13px; }

.standings-block { min-width: 0; margin-top: 16px; }
.standings-block h3 { margin: 0 0 8px; font-size: 18px; }
.matchup-snapshot { margin-bottom: 18px; }
.matchup-snapshot h3 { margin: 0 0 8px; font-size: 18px; }
.snapshot-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.snapshot-team { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 13px; }
.snapshot-team.dodgers { background: #e8f4fd; border-color: #9bc9e8; }
.snapshot-team img { width: 38px; height: 38px; object-fit: contain; flex: 0 0 auto; }
.snapshot-team div { min-width: 0; }
.snapshot-team strong, .snapshot-team span { display: block; }
.snapshot-team strong { color: var(--text); font-size: 16px; }
.snapshot-team.dodgers strong { color: #005a9c; }
.snapshot-team span { margin-top: 2px; color: var(--muted); font-size: 14px; }
.race-panels { display: grid; grid-template-columns: 1fr; gap: 14px; }
.race-panels > div { min-width: 0; }
.scroll-table { width: 100%; max-width: 100%; overflow-x: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 13px; -webkit-overflow-scrolling: touch; }
.standings { width: 100%; border-collapse: collapse; color: var(--text); font-size: 14px; }
.standings th, .standings td { padding: 9px 8px; border-bottom: 1px solid var(--line); text-align: right; white-space: nowrap; }
.standings th { color: #fff; background: #08233e; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.standings th:first-child, .standings td:first-child { background: var(--panel); text-align: left; }
.standings th:first-child { z-index: 2; background: #08233e; }
.standings tr:last-child td { border-bottom: 0; }
.standings tr.dodgers td { color: #005a9c; background: #eaf5fd; font-weight: 850; }
.standings-divider td { height: 11px; padding: 0; border: 0; background: var(--panel) !important; }
.standings-divider td > span:first-child { display: block; height: 3px; background: #6f50ff; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.team-cell { display: table-cell; }
.team-cell > span { display: flex; align-items: center; gap: 8px; }
.standings-extra { display: none; }
.standings-cut-key { margin: 9px 0 0; color: var(--muted); font-size: 14px; }
.standings-cut-key::before { content: ''; display: inline-block; width: 24px; height: 3px; margin: 0 8px 3px 0; background: #6f50ff; }
.team-cell img { width: 23px; height: 23px; object-fit: contain; flex: 0 0 auto; }
.diff { font-weight: 850; }
.diff.positive { color: var(--green); }
.diff.negative { color: var(--red); }
.diff.neutral { color: var(--muted); }

.odds-facts { overflow: hidden; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; }
.odds-facts > div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 16px; padding: 11px 15px; border-bottom: 1px solid var(--line); }
.odds-facts > div:last-child { border-bottom: 0; }
.odds-facts span { color: var(--soft); font-weight: 750; }
.odds-facts strong { color: var(--text); }
.probability-section { margin-top: 20px; }
.probability-section h3 { margin: 0 0 9px; font-size: 18px; }
.game-probability { min-width: 0; padding: 16px; background: var(--panel); border: 1px solid var(--line); border-radius: 15px; }
.probability-matchup { margin-bottom: 11px; color: var(--text); font-size: 17px; font-weight: 800; }
.probability-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: hidden; border-radius: 12px; }
.probability-split > div { padding: 15px 17px; background: #eef2f6; }
.probability-split .dodgers-side { background: #e3f5ee; }
.probability-split span, .probability-split strong { display: block; }
.probability-split span { color: var(--muted); font-size: 14px; }
.probability-split .dodgers-side span { color: #087c59; }
.probability-split strong { margin-top: 3px; color: var(--text); font-size: 29px; }
.probability-split .dodgers-side strong { color: #087c59; }
.season-outlook { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.market-card { min-width: 0; padding: 17px; background: var(--panel); border: 1px solid var(--line); border-radius: 15px; }
.season-outlook > .market-card { margin-top: 9px; }
.market-title { color: var(--text); font-size: 17px; }
.market-title strong { color: var(--green); }
.chart-wrap { margin-top: 13px; padding: 11px; background: #edf3f8; border: 1px solid var(--line); border-radius: 10px; }
.chart-title { color: #526374; font-size: 14px; font-weight: 850; letter-spacing: .04em; text-transform: uppercase; }
.chart { display: flex; align-items: flex-end; gap: 3px; height: 68px; margin-top: 7px; border-bottom: 1px solid var(--line); }
.bar { flex: 1; min-width: 3px; background: linear-gradient(#57b4ff, #238fd8); border-radius: 3px 3px 0 0; }
.chart-wrap.down .bar { background: linear-gradient(#ff787d, #d84449); }
.chart-wrap.up .bar { background: linear-gradient(#65e4b4, #249d76); }
.chart-labels { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; margin-top: 6px; color: #526374; font-size: 14px; }
.comparison-legend { display: flex; flex-wrap: wrap; gap: 8px 10px; margin-top: 13px; font-size: 13px; }
.chart-caption { margin-top: 8px; }
.legend-chip { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; color: var(--text); background: #fff; border: 1px solid var(--line); border-radius: 999px; }
.legend-chip i { flex: 0 0 auto; width: 15px; height: 4px; border-radius: 2px; }
.legend-chip b { font-weight: 800; }
.legend-chip em { font-style: normal; color: #6b7a8c; }
.chart-wrap.down .chart-labels strong { color:#ad3034; }
.chart-wrap.up .chart-labels strong { color:#087c56; }
.chart-labels strong { color: var(--blue); }
.hero-flag { display: inline-block; margin-top: 10px; padding: 5px 12px; border-radius: 999px; background: rgba(255, 255, 255, .13); color: #dce8f5; font-size: 13px; font-weight: 700; }
/* The % axis is HTML in its own gutter rather than SVG text inside the plot, so
   it keeps a real pixel size on phones and can never be covered by a bar. */
.ws-chart { position: relative; display: flex; align-items: stretch; gap: 6px; }
.ws-gutter { position: relative; flex: 0 0 auto; min-width: 30px; }
.ws-gutter span { position: absolute; right: 0; transform: translateY(-50%); color: #7c8b9c; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ws-plot { position: relative; flex: 1 1 auto; min-width: 0; }
.ws-pt { cursor: pointer; }
rect.ws-pt:hover { filter: brightness(1.08); }
.ws-tip { position: absolute; top: 0; left: 0; pointer-events: none; z-index: 6; padding: 7px 11px; border-radius: 10px; background: #0e2942; color: #fff; font-size: 13px; font-weight: 600; white-space: nowrap; box-shadow: 0 8px 22px rgba(8, 25, 45, .3); }
.ws-tip b { font-weight: 800; }
/* End-of-line team labels keep a constant user-unit size so they always fit the
   right margin, and drop out on narrow screens where the legend chips name the
   series instead. Touch targets widen as the chart shrinks. */
.ws-label { font-size: 17px; }
@media (max-width: 760px) { .ws-label { display: none; } }
@media (max-width: 640px) { circle.ws-pt { r: 18px; } }
@media (max-width: 430px) { .ws-gutter span { font-size: 11px; } circle.ws-pt { r: 24px; } }
.external-link { display: inline-block; margin-top: 12px; color: var(--blue); font-size: 14px; font-weight: 800; text-decoration: none; }

/* ABS challenges: paired win/loss bars, so every number is readable inside the
   bar it describes and the two sides line up for comparison. */
/* Dodger blue for a call that stood up, Dodgers red for one that did not. */
.abs-section { --abs-won: #0077c8; --abs-lost: #d8333a; }
/* Their own row under the sentence. Inline, they broke across its line wrap
   and left one pill stranded on a line of its own. */
.abs-keys { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.abs-key { display: inline-block; padding: 2px 8px; border-radius: 6px; color: #fff; font-size: 13px; font-weight: 800; }
.abs-key.won { background: var(--abs-won); }
.abs-key.lost { background: var(--abs-lost); }
.abs-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; }
.abs-panel { min-width: 0; margin: 0; padding: 17px 18px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; }
.abs-panel h3 { margin: 0 0 13px; font-size: 17px; }
.abs-panel h3 span { display: block; margin-top: 2px; color: var(--muted); font-size: 13px; font-weight: 500; }
.abs-row + .abs-row { margin-top: 13px; }
.abs-row-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 5px; }
.abs-row-head strong { font-size: 14px; }
.abs-row-head span { color: var(--muted); font-size: 12px; }
.abs-bar { display: flex; overflow: hidden; height: 34px; border-radius: 8px; background: #e3eaf1; }
.abs-bar span { display: flex; align-items: center; justify-content: center; overflow: hidden; min-width: 0; color: #fff; font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.abs-bar .abs-won { background: var(--abs-won); }
.abs-bar .abs-lost { background: var(--abs-lost); }
.abs-bar.sm { height: 22px; }
.abs-bar.sm span { font-size: 12px; }
.abs-bar.empty { align-items: center; justify-content: center; }
.abs-bar .abs-none { color: var(--muted); font-weight: 600; }
/* One grid for the whole list so the name column sizes to the longest name and
   every bar starts at the same x. */
.abs-players { display: grid; grid-template-columns: minmax(0, max-content) minmax(96px, 1fr) auto; align-items: center; }
.abs-player { display: contents; }
.abs-player > * { padding: 6px 0; border-bottom: 1px solid var(--line); }
.abs-player > .abs-name, .abs-player > .abs-track { padding-right: 10px; }
.abs-player > .abs-score { padding-left: 2px; }
.abs-player:last-child > * { border-bottom: 0; }
.abs-track { display: block; }
.abs-name { overflow: hidden; font-size: 14px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.abs-player b { font-size: 14px; font-variant-numeric: tabular-nums; text-align: right; }
.abs-flip + .abs-flip { margin-top: 15px; }
.abs-flip-label { margin-bottom: 7px; font-size: 14px; font-weight: 700; }
.abs-flip-row { display: grid; grid-template-columns: minmax(0, 1fr) auto 76px; gap: 9px; align-items: center; margin-top: 6px; }
.abs-flip-track { display: block; overflow: hidden; height: 14px; border-radius: 5px; background: #e3eaf1; }
.abs-flip-track i { display: block; height: 100%; min-width: 3px; border-radius: 5px; background: #b9c6d3; }
.abs-flip-track i.dodgers { background: var(--blue); }
.abs-flip-row b { font-size: 14px; font-variant-numeric: tabular-nums; }
.abs-flip-row em { color: var(--muted); font-size: 12px; font-style: normal; }
.abs-lineup { margin: -2px 0 12px; }
.abs-zone { margin-bottom: 12px; }
.abs-zone-lead { margin: 0 0 12px; font-size: 15px; }
/* The worst-calls panel now shares a row with the umpire card, so its cards
   stack rather than squeezing two to a half-width column. */
.abs-calls { display: grid; gap: 8px; }
.abs-call { display: flex; align-items: center; gap: 11px; padding: 10px 12px; color: inherit; background: #fff; border: 1px solid var(--line); border-radius: 11px; text-decoration: none; }
a.abs-call:hover { border-color: var(--blue); box-shadow: 0 4px 14px rgba(8, 25, 45, .08); }
.abs-miss { flex: 0 0 auto; padding: 5px 8px; border-radius: 8px; background: var(--abs-lost); color: #fff; font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; }
.abs-call-body { display: flex; flex-direction: column; min-width: 0; }
.abs-call-body strong { overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.abs-call-body span { color: var(--muted); font-size: 12px; }
.abs-play { flex: 0 0 auto; margin-left: auto; color: var(--blue); font-size: 13px; }
/* Video cards use MLB's own still for each clip. */
.video-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.video-card { display: block; min-width: 0; color: inherit; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; text-decoration: none; }
.video-card:hover { border-color: var(--blue); box-shadow: 0 6px 20px rgba(8, 25, 45, .12); }
.video-thumb { position: relative; aspect-ratio: 16 / 9; background: #0d2944; }
.video-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.video-art { width: 100%; height: 100%; background: linear-gradient(135deg, #0d2944, #1a496d); }
.video-play { position: absolute; inset: auto auto 10px 10px; display: grid; place-items: center; width: 34px; height: 34px; padding-left: 3px; color: #0d2944; background: rgba(255, 255, 255, .92); border-radius: 50%; font-size: 13px; }
.video-meta { padding: 11px 13px; }
.video-meta strong { display: block; font-size: 15px; }
.video-meta span { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; line-height: 1.4; }

/* Season splits: runs by inning next to the hit-by-pitch headline stat. */
.splits-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 12px; }
.panel-card { min-width: 0; margin: 0; padding: 18px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; }
.panel-card h3 { margin: 0 0 14px; font-size: 17px; }
.panel-card h3 span { display: block; margin-top: 2px; color: var(--muted); font-size: 13px; font-weight: 500; }
.table-scroll { overflow-x: auto; }
/* Fixed layout so every inning column is the same width regardless of digits. */
.inning-table { width: 100%; table-layout: fixed; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.inning-table col.inning-col-w { width: 7.6%; }
.inning-table col.inning-team-w { width: 15%; }
.inning-table col.inning-total-w { width: 9.4%; }
.inning-table th { color: var(--muted); font-size: 12px; font-weight: 800; text-align: center; padding-bottom: 6px; }
.inning-table th:first-child { text-align: left; }
.inning-table td { padding: 7px 3px 6px; text-align: center; vertical-align: bottom; }
.inning-table th[scope="row"] { font-size: 14px; text-align: left; white-space: nowrap; padding-right: 8px; }
/* Fixed-height well so the bar grows upward and never pushes the number out. */
.inning-col { display: flex; align-items: flex-end; justify-content: center; height: 40px; }
.inning-bar { display: block; width: 100%; min-width: 13px; border-radius: 4px 4px 0 0; background: #c3d4e3; }
.is-dodgers .inning-bar { background: linear-gradient(#5cb3fb, #2f8fd8); }
.inning-table b { display: block; padding-top: 5px; font-size: 13px; }
.inning-total .inning-col { display: none; }
.inning-total b { font-size: 16px; }
.inning-table tbody tr + tr td { border-top: 1px solid var(--line); }

.hbp-hero { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.hbp-hero strong { font-size: 54px; line-height: 1; letter-spacing: -.03em; color: var(--blue); font-variant-numeric: tabular-nums; }
.hbp-name { display: block; font-size: 18px; font-weight: 800; }
.hbp-sub { display: block; color: var(--muted); font-size: 13px; }
.hbp-chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
.hbp-chip { min-width: 0; padding: 9px 10px; background: #fff; border: 1px solid var(--line); border-radius: 11px; text-align: center; }
.hbp-chip b { display: block; font-size: 19px; font-variant-numeric: tabular-nums; }
.hbp-chip span { display: block; color: var(--muted); font-size: 11px; line-height: 1.3; }
.hbp-compare > div { display: grid; grid-template-columns: minmax(0, 1fr) 2fr auto; gap: 9px; align-items: center; margin-bottom: 7px; }
.hbp-compare span { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.hbp-compare i { display: block; height: 12px; min-width: 3px; border-radius: 4px; background: #c3d4e3; }
.hbp-compare i.lead { background: var(--blue); }
.hbp-compare b { font-size: 14px; font-variant-numeric: tabular-nums; }
.hbp-last { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-top: 14px; padding: 11px 13px; color: inherit; background: #fff; border: 1px solid var(--line); border-radius: 11px; text-decoration: none; }
.hbp-last span { color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.hbp-last strong { font-size: 14px; }
.hbp-last em { margin-left: auto; color: var(--blue); font-style: normal; font-size: 13px; font-weight: 800; }
a.hbp-last:hover { border-color: var(--blue); }

/* Replay review table. */
.replay-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.replay-table th { color: var(--muted); font-size: 11px; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; text-align: right; padding: 0 0 8px 10px; white-space: nowrap; }
.replay-table th:first-child { text-align: left; padding-left: 0; }
.replay-table td { padding: 10px 0 10px 10px; border-top: 1px solid var(--line); text-align: right; }
.replay-table th[scope="row"] { font-size: 14px; font-weight: 750; text-align: left; text-transform: none; letter-spacing: 0; color: var(--text); padding: 10px 0; border-top: 1px solid var(--line); }
.replay-rate { display: flex; align-items: center; justify-content: flex-end; gap: 9px; }
.replay-bar { display: block; overflow: hidden; width: 74px; height: 9px; border-radius: 5px; background: #e3eaf1; }
.replay-bar i { display: block; height: 100%; border-radius: 5px; background: #c3d4e3; }
.is-dodgers .replay-bar i { background: var(--blue); }
.replay-table b { font-variant-numeric: tabular-nums; }

/* Injured list board. */
.il-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.il-table th { color: var(--muted); font-size: 11px; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; text-align: left; padding: 0 10px 8px 0; white-space: nowrap; }
.il-table td { padding: 9px 10px 9px 0; border-top: 1px solid var(--line); vertical-align: top; }
.il-pos { color: var(--muted); font-weight: 800; white-space: nowrap; }
.il-name { font-weight: 750; white-space: nowrap; }
.il-injury { color: #4f5e6c; }
.il-number { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Guided setup: only the steps this device needs, ticked off from live state.
   The alerts section sits on a light panel, so this is a light treatment. */
.pwa-guided { margin: 14px 0 4px; padding: 16px 18px; background: #fff; border: 1px solid var(--line); border-radius: 14px; }
.guide-heading { margin: 0 0 12px; color: var(--text); font-size: 15px; font-weight: 800; }
.guide-steps { margin: 0; padding: 0; list-style: none; }
.guide-step { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 11px; padding: 11px 0; border-top: 1px solid var(--line); }
.guide-step:first-child { border-top: 0; padding-top: 0; }
.guide-mark { display: grid; place-items: center; width: 24px; height: 24px; line-height: 1; border-radius: 50%; background: #e3eaf1; color: #5b6b7c; font-size: 12px; font-weight: 850; }
.guide-step strong { display: block; color: var(--text); font-size: 15px; }
/* Scoped to the detail text: a bare `span` here also matched the number circle
   and knocked out its centring. */
.guide-detail { display: block; margin-top: 3px; color: var(--muted); font-size: 13px; line-height: 1.45; }
.guide-action { margin-top: 9px; padding: 8px 14px; color: #fff; background: var(--blue); border: 0; border-radius: 9px; font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; }
.guide-action:hover { background: #00558f; }
.guide-action[disabled] { opacity: .55; cursor: default; }
.guide-step.is-done .guide-mark { background: #1d6f56; color: #fff; }
.guide-step.is-done strong { color: #1d6f56; }
.guide-step.is-current .guide-mark { background: var(--blue); color: #fff; }
.guide-step.is-current { background: #eef6fc; border-radius: 10px; padding-left: 10px; padding-right: 10px; margin: 0 -10px; }
.guide-optional { color: var(--muted); font-size: 11px; font-style: normal; font-weight: 750; text-transform: uppercase; letter-spacing: .05em; }
.guide-blocked { margin: 8px 0 0; padding: 9px 11px; background: #fdecec; border: 1px solid #f3c9cb; border-radius: 9px; color: #9c2b30; font-size: 13px; }

/* Coming Up reads as a look-ahead, so it sits on a lighter blue ground. */
.upcoming-section { background: #eaf3fb; }
.upcoming-section .schedule-game { background: #fff; }

/* The comparison uses the same blue as the Game Preview button. */
.comparison-section { color: #fff; background: var(--dodger-blue); }
.comparison-section h2 { color: #fff; }
.comparison-section .section-kicker { color: #d5ecfd; }
.comparison-section .section-heading > p { color: #e3f2fd; }
.comparison-section .metric { background: rgba(255, 255, 255, .15); border-color: rgba(255, 255, 255, .26); }
.comparison-section .metric span { color: #f0f8fe; }
.comparison-section .metric small { color: #c8e6fa; }
.comparison-section .closest, .comparison-section .lineup-changes { background: rgba(255, 255, 255, .94); border-color: rgba(255, 255, 255, .55); }

/* Two side-by-side match cards, each led by a big dark-blue count. */
.comparison-grid.is-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Scoped to the section, whose own .metric rules would otherwise win. */
.comparison-section .compare-metric { background: #fff; border-color: rgba(255, 255, 255, .55); }
.comparison-section .compare-count { display: block; color: #04437a; font-size: 44px; font-weight: 900; line-height: 1; letter-spacing: -.03em; }
.comparison-section .compare-count em { font-size: 19px; font-style: normal; font-weight: 800; letter-spacing: 0; }
.comparison-section .compare-metric > span { display: block; margin-top: 8px; color: var(--text); font-size: 16px; font-weight: 800; }
.comparison-section .compare-metric > small { display: block; margin-top: 2px; color: var(--muted); font-size: 13px; }
.comparison-section .compare-when { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.comparison-section .compare-when strong { display: block; color: var(--text); font-size: 14px; }
.comparison-section .compare-when span { display: block; margin-top: 1px; color: var(--muted); font-size: 13px; }
.comparison-section .lineup-changes { margin-top: 12px; }

/* Tab icons: one colour, inheriting the tab's own text colour. */
.report-tab { display: inline-flex; align-items: center; gap: 7px; }
.report-tab svg { width: 15px; height: 15px; flex: 0 0 auto; }

/* Report tabs. */
/* Full-bleed menu bar inside the sticky topbar. `overflow-x: auto` is a safety
   valve only: the row is sized to fit, but the active tab's label widens it,
   and "Standings" on a 360px phone would otherwise break the layout. */
.report-menubar { width: 100%; background: #005a9c; }
/* Matches .report-refresh's column so the first tab lines up with the content. */
.menubar-inner { display: flex; align-items: center; gap: 8px; width: min(1180px, calc(100% - 32px)); margin: 0 auto; padding: 0 10px; }
.menubar-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; margin-left: auto; }
.menubar-btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .42); border-radius: 8px; color: #fff; font: inherit; cursor: pointer; }
.menubar-btn:hover { background: rgba(255, 255, 255, .26); }
.menubar-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.menubar-btn[disabled] { opacity: .6; cursor: default; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* The tabs take the room the controls leave, and scroll under them if a narrow
   screen cannot hold them all. */
.report-tabs { flex: 1 1 auto; display: flex; flex-wrap: nowrap; justify-content: flex-start; gap: 4px; min-width: 0; padding: 0; background: none; overflow-x: auto; scrollbar-width: none; }
.report-tabs::-webkit-scrollbar { display: none; }
.report-tab { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 7px; padding: 10px 14px; color: rgba(255, 255, 255, .78); background: none; border: 0; border-bottom: 3px solid transparent; border-radius: 0; font: inherit; font-size: 14px; font-weight: 800; white-space: nowrap; cursor: pointer; }
.report-tab svg { width: 18px; height: 18px; flex: 0 0 auto; }
.report-tab:hover { color: #fff; background: rgba(255, 255, 255, .12); }
.report-tab.active { color: #fff; border-bottom-color: #fff; }
.report-tab:focus-visible { outline: 2px solid #fff; outline-offset: -3px; }
.report-panel > .section:first-child { border-top: 1px solid var(--line); }


/* The challenge leaderboard gets the full width of the ABS tab. */
.abs-board { margin-bottom: 12px; }
.abs-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.abs-groups .abs-group + .abs-group { margin-top: 0; }

/* Data credits. */
.credits-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0 0 14px; padding: 0; list-style: none; }
.credits-list li { min-width: 0; padding: 12px 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; }
.credits-list a { display: block; font-size: 15px; font-weight: 800; text-decoration: none; }
.credits-list a:hover { text-decoration: underline; }
.credits-list span { display: block; margin-top: 3px; color: var(--muted); font-size: 13px; line-height: 1.45; }

/* Headshots beside names. */
.headshot { flex: 0 0 auto; width: 40px; height: 40px; object-fit: cover; background: #14324f; border-radius: 50%; }
.headshot.big { width: 54px; height: 54px; }
.headshot.small { width: 34px; height: 34px; }

/* Bullpen availability. The left edge carries the status colour so the board
   can be read at a glance without relying on the flag text alone. */
.pen-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pen-card { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--muted); border-radius: 10px; }
/* Fully rested is a deeper green than merely available, so the tier the sort
   uses is something the reader can actually see. */
.pen-card.is-rested { border-left-color: #0f6b38; }
.pen-card.is-available { border-left-color: #3aa568; }
.pen-card.is-caution { border-left-color: #c8811a; }
.pen-card.is-down { border-left-color: var(--red); }
.pen-card.is-starting { border-left-color: var(--blue); }
.pen-body { flex: 1 1 auto; min-width: 0; }
.pen-name { font-size: 14px; font-weight: 800; }
.pen-name a { color: inherit; }
.pen-role { margin-left: 6px; color: var(--blue); font-size: 11px; font-weight: 800; font-style: normal; letter-spacing: .04em; text-transform: uppercase; }
.pen-line { margin-top: 1px; color: #4f5e6c; font-size: 12px; font-weight: 700; }
.pen-reason { margin-top: 2px; color: var(--muted); font-size: 12px; }
.pen-flag { flex: 0 0 auto; align-self: flex-start; padding: 3px 8px; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; }
.is-rested .pen-flag { background: #0f6b38; color: #fff; }
.is-available .pen-flag { background: #e3f4ea; color: #126736; }
.is-caution .pen-flag { background: #fdf0dc; color: #8d5a0f; }
.is-down .pen-flag { background: #fde8e9; color: #a81f26; }
.is-starting .pen-flag { background: #e4eefb; color: #14548f; }
.batter { grid-template-columns: 31px 40px minmax(0, 1fr); align-items: start; }
.batter-name a { color: #fff; text-decoration: none; }
.batter-name a:hover { text-decoration: underline; }
.pitcher-id { display: flex; align-items: center; gap: 12px; margin: 10px 0 2px; }
.pitcher-id h3 { margin: 0; }
.pitcher-card h3 a { color: var(--text); text-decoration: none; }
.pitcher-card h3 a:hover { text-decoration: underline; }
.hbp-name a { color: var(--text); text-decoration: none; }
.hbp-name a:hover { text-decoration: underline; }
.abs-name a { color: inherit; text-decoration: none; }
.abs-name a:hover { color: var(--blue); text-decoration: underline; }
.ump-head a { color: inherit; text-decoration: none; }
.ump-head a:hover { color: var(--blue); text-decoration: underline; }

/* Clear separation between the best and worst challenge groups. */
.abs-group-head { align-items: center; padding-bottom: 5px; border-bottom: 2px solid var(--line); }
.abs-group-head strong { color: var(--blue); font-size: 11px; font-weight: 850; letter-spacing: .09em; text-transform: uppercase; }
.abs-group-head span { font-size: 11px; font-style: italic; }
.abs-group + .abs-group { margin-top: 20px; }

/* Press-notes crest in the hero. */
.notes-crest { display: flex; flex-direction: column; align-items: center; gap: 2px; flex: 0 0 auto; padding: 10px 12px; color: #fff; background: rgba(255, 255, 255, .08); border: 1px solid rgba(185, 215, 239, .22); border-radius: 12px; text-decoration: none; }
/* A wordmark, so it needs width to stay legible at this size. */
.notes-crest img { width: 62px; height: 62px; object-fit: contain; }
.notes-crest span { font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }
.notes-crest:hover { background: rgba(255, 255, 255, .15); border-color: #7bc3ff; }
.hero-note { display: flex; align-items: center; gap: 15px; }
/* The batting order, the club notes and the game links all belong to the
   default tab. The menu sits above the hero, so anywhere else they would only
   push the panel down. The matchup header stays, as context for every tab. */
body.off-home .lineup-card,
body.off-home .hero-note,
body.off-home .hero-game-links { display: none; }
.hero-note-body { min-width: 0; }

/* One press-box line carried up into the hero. */
.hero-note { display: grid; grid-template-columns: minmax(0, 1fr) minmax(190px, auto); gap: 20px; align-items: start; margin-top: 20px; padding: 15px 17px; background: rgba(255, 255, 255, .08); border-left: 3px solid #7bc3ff; border-radius: 0 12px 12px 0; }
.hero-note-body { min-width: 0; }
.hero-note-kicker { margin-bottom: 9px; color: #9fc9ed; font-size: 11px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.hero-quotes { margin: 0; padding: 0; list-style: none; }
.hero-quotes li { margin: 0 0 10px; color: #e4eefa; font-size: 14px; line-height: 1.5; }
.hero-quotes li:last-child { margin-bottom: 0; }
.hero-note-empty { margin: 0; color: #a9c6de; font-size: 14px; }
/* One pill style for every link in this block, so they read as a set. */
/* justify-items keeps each pill at its content width; as plain grid items
   they stretched to the column and read far wider than their label. */
.hero-links-notes { display: grid; gap: 8px; align-content: start; justify-items: start; }
.hero-game-links { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 14px; }
.pill-link { display: flex; align-items: center; gap: 9px; padding: 9px 13px; color: #e4eefa; background: rgba(255, 255, 255, .07); border: 1px solid rgba(185, 215, 239, .22); border-radius: 10px; text-decoration: none; }
.pill-link span { font-size: 11px; font-weight: 850; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }
.pill-link img, .pill-link svg { width: 20px; height: 20px; flex: 0 0 auto; object-fit: contain; }
/* Club crests arrive in their own colours; flatten them to white to match. */
.pill-link img.is-club { filter: brightness(0) invert(1); opacity: .92; }
.pill-link:hover { border-color: #7bc3ff; color: #fff; }
.pill-link.is-red { background: var(--red); border-color: transparent; color: #fff; }
.pill-link.is-red:hover { background: #b9282e; }
.pill-link.is-blue { background: var(--dodger-blue); border-color: transparent; color: #fff; }
.pill-link.is-blue:hover { background: #005a9c; }

/* The script-and-ball mark signs off the archive. */
.history-section .section-heading { align-items: center; }
.history-mark { width: 54px; height: 54px; flex: 0 0 auto; opacity: .85; }

/* The change list is short lines, so it reads better in columns. */
.lineup-changes ul { columns: 3; column-gap: 26px; }
.lineup-changes li { break-inside: avoid; }
@media (max-width: 900px) { .lineup-changes ul { columns: 2; } }
@media (max-width: 560px) { .lineup-changes ul { columns: 1; } }

/* Alerts bell: filled red when on, a plain outline when off. */
/* Icon only. The label stays in the markup for screen readers, and because
   pwa.js writes the on/off wording into it. On the blue bar a red bell on a
   transparent button would be unreadable, so "on" takes a white chip and keeps
   the red bell and red outline the owner asked for. */
.bell-label { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.bell-toggle svg { stroke-width: 1.7; }
.bell-toggle.is-on { background: #fff; border-color: var(--red); color: var(--red); }
.bell-toggle.is-on:hover { background: #ffe9ea; }
.bell-toggle.is-on svg { fill: var(--red); stroke: var(--red); }

/* First-visit invitation: fills the bar beside the refresh controls. */
/* Sized to its content rather than stretched across the bar. */
.alert-invite { flex: 0 1 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 16px; padding: 10px 14px; background: linear-gradient(180deg, #e8383f 0%, var(--red) 100%); border-radius: 12px; box-shadow: 0 2px 10px rgba(191, 32, 38, .28); color: #fff; }
.alert-invite-lead { display: flex; align-items: center; gap: 10px; min-width: 0; }
.alert-invite-lead > .invite-icon { flex: 0 0 auto; width: 22px; height: 22px; opacity: .95; }
.alert-invite-text { display: flex; flex-direction: column; line-height: 1.3; }
.alert-invite-text strong { font-size: 14px; font-weight: 800; }
.alert-invite-text span { font-size: 12.5px; font-weight: 600; opacity: .9; }
.alert-invite-actions { display: flex; align-items: center; gap: 8px; }
/* pointer-events keeps a click on the glyph resolving to the button itself. */
.invite-icon { width: 15px; height: 15px; fill: currentColor; pointer-events: none; }
/* These sit inside .report-refresh, whose button rule would otherwise win. */
/* These sit inside .report-refresh, whose bare button rule would otherwise
   give each one a white box with a grey border. */
.report-refresh .alert-invite button { display: inline-flex; align-items: center; gap: 6px; min-height: 0; padding: 8px 13px; border: 0; border-radius: 9px; font: inherit; font-size: 13px; font-weight: 800; line-height: 1.2; white-space: nowrap; cursor: pointer; transition: background .15s ease, transform .15s ease; }
.report-refresh .alert-invite button:active { transform: translateY(1px); }
.report-refresh .alert-invite .invite-go { background: #fff; color: var(--red); box-shadow: 0 1px 4px rgba(0, 0, 0, .18); }
.report-refresh .alert-invite .invite-go:hover { background: #ffe9ea; }
.report-refresh .alert-invite .invite-soft { background: rgba(255, 255, 255, .16); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .34); }
.report-refresh .alert-invite .invite-soft:hover { background: rgba(255, 255, 255, .3); }
@media (max-width: 640px) {
  .alert-invite { justify-content: center; padding: 10px 10px 12px; }
  .alert-invite-lead { justify-content: flex-start; }
  /* Three labelled buttons plus their glyphs overrun a 375px phone, so they
     are tightened here and allowed to wrap rather than clip at the edge. */
  .alert-invite-actions { width: 100%; flex-wrap: wrap; justify-content: center; gap: 6px; }
  .report-refresh .alert-invite button { padding: 7px 10px; font-size: 12.5px; gap: 5px; }
  .invite-icon { width: 14px; height: 14px; }
}


/* The challenge leaderboard splits into best and worst, so each half is labelled. */
.abs-group + .abs-group { margin-top: 16px; }
.abs-group-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.abs-group-head strong { font-size: 14px; }
.abs-group-head span { color: var(--muted); font-size: 12px; }
.abs-score { text-align: right; }
.abs-score b { display: block; font-size: 14px; font-variant-numeric: tabular-nums; }
.abs-score em { display: block; color: var(--muted); font-size: 11px; font-style: normal; white-space: nowrap; }

/* Plate umpire: a league range with his spot and the league average marked, so
   the rank has visible context instead of being a bare number. */
.ump-head { display: flex; align-items: center; gap: 10px; margin-bottom: 13px; }
.ump-head strong { font-size: 19px; letter-spacing: -.01em; }
.ump-badge { padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.ump-badge.confirmed { background: #dff0e8; color: #1d6f56; }
.ump-badge.projected { background: #fdeadd; color: #9a4f1c; }
.ump-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin-bottom: 15px; }
.ump-stat { min-width: 0; padding: 9px 11px; background: #fff; border: 1px solid var(--line); border-radius: 11px; }
.ump-stat span { display: block; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.ump-stat strong { display: block; margin: 2px 0 1px; font-size: 19px; font-variant-numeric: tabular-nums; }
.ump-stat em { display: block; color: var(--muted); font-size: 11px; font-style: normal; line-height: 1.35; }
.ump-scale + .ump-scale { margin-top: 15px; }
.ump-scale-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.ump-scale-head strong { font-size: 14px; }
.ump-scale-head b { font-size: 17px; font-variant-numeric: tabular-nums; }
.ump-scale-track { position: relative; height: 10px; margin: 7px 0 5px; border-radius: 5px; background: linear-gradient(90deg, #e3eaf1, #c9d6e2); }
.ump-scale-track i { position: absolute; top: 50%; width: 3px; height: 18px; margin-left: -1.5px; border-radius: 2px; transform: translateY(-50%); }
.ump-scale-track i.league { background: #9aa8b6; }
.ump-scale-track i.me { width: 13px; height: 13px; margin-left: -6.5px; border: 3px solid #fff; border-radius: 50%; background: var(--blue); box-shadow: 0 1px 4px rgba(8, 25, 45, .3); }
.ump-scale-foot { display: flex; justify-content: space-between; gap: 10px; color: var(--muted); font-size: 11px; }
.ump-scale .fine-print { margin: 5px 0 0; font-size: 12px; }

.notes-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.note-card { min-width: 0; margin: 0; padding: 16px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; }
.note-card h3 { margin: 0 0 9px; font-size: 17px; }
.note-card ul { margin: 0; padding-left: 19px; }
.note-card li { margin: 8px 0; color: #4f5e6c; font-size: 15px; }
.note-card a { color: #005a9c; font-weight: 750; }
/* Inside the numbers: a display figure with the club's line beneath it. */
.inside-list { margin: 0; padding: 0; list-style: none; }
.inside-list li { padding: 12px 0; border-top: 1px solid var(--line); }
.inside-list li:first-child { padding-top: 0; border-top: 0; }
.inside-list strong { display: block; color: #04437a; font-size: 34px; font-weight: 900; line-height: 1.05; letter-spacing: -.03em; }
.inside-list span { display: block; margin-top: 4px; color: #4f5e6c; font-size: 14px; line-height: 1.5; }

.lasttime-card { grid-column: 1 / -1; }
.lasttime-list { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 26px; }
.lasttime-list li { display: flex; flex-wrap: wrap; gap: 2px 10px; justify-content: space-between; padding: 7px 0; border-top: 1px solid var(--line); }
.lasttime-list li:first-child, .lasttime-list li:nth-child(2) { padding-top: 0; border-top: 0; }
.lasttime-list strong { color: #04437a; font-size: 13px; font-weight: 800; }
.lasttime-list span { color: #4f5e6c; font-size: 13px; text-align: right; }

/* Trivia: native details, so the reveal needs no script under the page's CSP. */
.trivia-question { margin: 0 0 11px; color: var(--text); font-size: 15px; font-weight: 700; line-height: 1.45; }
.trivia summary { display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; background: var(--blue); border-radius: 9px; color: #fff; font-size: 13px; font-weight: 800; list-style: none; cursor: pointer; }
.trivia summary::-webkit-details-marker { display: none; }
.trivia summary::after { content: "▸"; font-size: 11px; }
.trivia[open] summary { background: #e7eef5; color: var(--text); }
.trivia[open] summary::after { content: "▾"; }
.trivia-answer { margin-top: 11px; padding: 12px 14px; background: #eef6fc; border-left: 3px solid var(--blue); border-radius: 0 10px 10px 0; }
.trivia-answer strong { display: block; color: #04437a; font-size: 18px; }
.trivia-answer span { display: block; margin-top: 3px; color: #4f5e6c; font-size: 14px; }
.trivia-card .fine-print { margin: 12px 0 0; font-size: 12px; }

.fine-print { color: #596878; font-size: 14px; }

.buttons { display: flex; flex-wrap: wrap; gap: 9px; }
.button { display: inline-block; padding: 11px 15px; color: #fff !important; background: var(--dodger-blue); border-radius: 10px; font-weight: 850; text-decoration: none; }
.button.red { background: var(--red); }
.history-tabs { display: flex; align-items: stretch; gap: 8px; overflow-x: auto; padding: 2px 2px 8px; scroll-snap-type: x proximity; }
.history-tab { display: flex; flex: 1 0 0; flex-direction: column; justify-content: center; min-width: 142px; height: 84px; padding: 10px 12px; color: var(--text); background: var(--panel); border: 1px solid var(--line); border-radius: 11px; text-decoration: none; scroll-snap-align: start; }
.history-tab strong, .history-tab span { display: block; }
.history-tab strong { min-height: 23px; line-height: 1.3; }
.history-tab span { min-height: 38px; color: var(--muted); font-size: 13px; line-height: 1.45; white-space: nowrap; }
.history-tab.active { background: var(--dodger-blue); border-color: #43a9ed; }
.history-tab.active strong { color: #fff; }
.history-tab.active span { color: #e1f2ff; }
.history-section { color: #fff; background: #061d35; border-top-color: #061d35; }
.history-section h2, .history-section .section-kicker { color: #fff; }
.history-section .section-kicker { color: #a9d5f5; }
.footer-snapshot { margin-top: 12px; color: #51697d; font-size: 14px; text-align: center; }
.rss { padding: 20px 8px 0; text-align: center; }
.rss a { color: #005a9c; font-weight: 800; }
.empty { min-height: 320px; padding: 70px 24px; text-align: center; }

.subscribe-form { padding: 20px; background: var(--panel); border: 1px solid var(--line); border-radius: 15px; }
.form-grid { display: grid; grid-template-columns: minmax(160px, .35fr) minmax(0, 1fr); gap: 14px; }
.subscribe-form label > span { display: block; margin-bottom: 6px; color: #455565; font-size: 14px; font-weight: 800; }
.subscribe-form input, .subscribe-form select {
  width: 100%; height: 48px; min-height: 48px; padding: 10px 12px; color: var(--text); background: #fff;
  border: 1px solid #aebfce; border-radius: 9px; font: inherit; font-size: 16px;
}
.subscribe-form input:focus, .subscribe-form select:focus { outline: 3px solid rgba(0, 119, 200, .22); border-color: var(--dodger-blue); }
.form-help { margin: 12px 0; color: #526171; font-size: 15px; }
.form-help a { color: #005a9c; font-weight: 750; }
.subscribe-button { margin-top: 12px; border: 0; cursor: pointer; font-size: 16px; }
.subscribe-button:disabled { cursor: wait; opacity: .65; }
.form-status { min-height: 24px; margin-top: 10px; color: #364656; font-size: 15px; font-weight: 650; }
.manage-shell { max-width: 680px; margin-top: 7vh; }
.manage-card { border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 18px 50px rgba(6, 29, 53, .13); }
.manage-card h1 { margin: 5px 0 12px; font-size: clamp(28px, 5vw, 40px); }
.manage-card p { font-size: 17px; }
.subscribe-form select { appearance: none; padding-right: 36px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%23536273' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 12px center; }
.subscribe-section { padding-top: 18px; }
.subscribe-section > summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; cursor: pointer; list-style: none; }
.subscribe-section > summary::-webkit-details-marker { display: none; }
.subscribe-section > summary::after { content: "＋"; color: #005a9c; font-size: 28px; line-height: 1; }
.subscribe-section[open] > summary::after { content: "−"; }
.subscribe-section > summary strong { color: var(--text); font-size: clamp(21px, 3vw, 28px); letter-spacing: .06em; }
.subscribe-intro { margin: 12px 0 16px; color: var(--muted); font-size: 16px; }
.subscribe-rss { margin: 16px 0; padding: 16px; color: var(--muted); background: var(--panel); border: 1px solid var(--line); border-radius: 12px; font-size: 16px; }
.subscribe-rss a { color: #005a9c; font-weight: 750; }
.subscribe-rss p { margin: 5px 0 0; }
.pwa-section { padding-top: 22px; background: #fff; }
.pwa-section > summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; cursor: pointer; list-style: none; }
.pwa-section > summary::-webkit-details-marker { display: none; }
.pwa-section > summary::after { content: "＋"; color: #005a9c; font-size: 28px; line-height: 1; }
.pwa-section[open] > summary::after { content: "−"; }
.pwa-section > summary strong { color: var(--text); font-size: clamp(21px, 3vw, 28px); letter-spacing: .06em; }
.pwa-guide { margin-top: 16px; padding: 20px; background: var(--panel); border: 1px solid var(--line); border-radius: 15px; }
.pwa-lede { max-width: 780px; margin: 0; color: var(--text); font-size: 17px; }
.pwa-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 18px; padding: 15px; background: #fff; border: 1px solid var(--line); border-radius: 12px; }
.pwa-actions .button { border: 0; cursor: pointer; font: inherit; font-weight: 850; }
.pwa-actions .button.outline { color: var(--blue) !important; background: transparent; border: 2px solid #9fc9ed; }
.pwa-actions .button:disabled { cursor: wait; opacity: .65; }
.pwa-actions [hidden], .report-refresh [hidden] { display: none !important; }
/* Pinned so Refresh and the alerts bell stay reachable while scrolling. */
/* The strip spans the window so nothing scrolls past it in the side gutters;
   its contents stay on the same measure as the report. */
.report-topbar { position: sticky; top: 0; z-index: 30; padding: 5px 0 0; background: var(--page); }
/* Collapses to nothing when there is no status and no invitation, so the menu
   bar sits tight to the top until there is something to say. */
.report-topbar .report-refresh { justify-content: flex-end; min-height: 0; margin-bottom: 2px; }
/* Lowercased in CSS rather than in pwa.js, so the wording stays one source of
   truth for screen readers and no cache version has to be bumped for it. */
#report-refresh-status { margin-left: auto; text-align: right; font-size: 11px; line-height: 1.25; text-transform: lowercase; }
.report-refresh { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; width: min(1180px, calc(100% - 32px)); margin: 0 auto; padding: 0 10px; color: #35485b; font-size: 14px; }
.report-refresh button, .report-refresh a { min-height: 0; padding: 7px 12px; border: 1px solid #9cb0c3; border-radius: 8px; background: #fff; color: #005a9c; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.pwa-actions .pwa-status { flex: 1 1 280px; margin: 0; }
.pwa-status[data-tone="success"] { color: var(--green); }
.pwa-status[data-tone="error"] { color: var(--red); }
.pwa-status[data-tone="info"] { color: var(--muted); }
.pwa-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 18px; }
.pwa-grid > div { min-width: 0; padding: 16px; background: #fff; border: 1px solid var(--line); border-radius: 12px; }
.pwa-grid h3 { margin: 0 0 8px; color: var(--text); font-size: 18px; }
.pwa-grid ol { margin: 0; padding-left: 22px; }
.pwa-grid li { margin: 8px 0; color: #4f5e6c; font-size: 15px; }
.pwa-note { margin: 16px 0 0; padding: 13px 15px; color: #4f5e6c; background: #eaf5fd; border-left: 4px solid var(--dodger-blue); border-radius: 9px; font-size: 15px; }
.pwa-rss { margin: 16px 0 0; color: var(--muted); font-size: 16px; }
.pwa-rss a { color: #005a9c; font-weight: 800; }
.pwa-status { margin: 12px 0 0; color: var(--soft); font-size: 14px; }
summary:focus-visible, a:focus-visible, button:focus-visible { outline: 3px solid #0077c8; outline-offset: 4px; }

@media (max-width: 900px) {
  .hero-top { grid-template-columns: 1fr; }
  .lineup-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .race-panels { grid-template-columns: 1fr; }
  .schedule-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .desktop-standings { display: none; }
  .mobile-standings { display: block; }
  .mobile-standings table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
  .mobile-team-col { width: 43%; }
  .mobile-standings th, .mobile-standings td { padding: 10px 6px; text-align: right; white-space: nowrap; }
  .mobile-standings th:first-child { text-align: left; }
  .mobile-standings thead { background: #08233e; color: #fff; }
  .mobile-standings tbody th { font-weight: 600; }
  .mobile-team { display: flex; align-items: center; gap: 6px; white-space: normal; }
  .mobile-team img { width: 20px; height: 20px; flex: 0 0 20px; }
  .mobile-standings .dodgers { background: #eaf5fd; color: #005a9c; font-weight: 800; }
  .mobile-standings .mobile-details td { padding: 0 7px 10px; border-bottom: 1px solid var(--line); text-align: left; color: var(--muted); white-space: normal; font-weight: 400; }
  .mobile-details td > span { display: inline-block; margin-right: 12px; }
  .mobile-standings .mobile-cut td { border-top: 3px solid #6f50ff; padding: 0; height: 0; }
  .shell { width: calc(100% - 8px); margin: 4px auto 24px; }
  .report-frame { border-radius: 20px; }
  .hero { padding: 16px 12px; }
  .hero-head { gap: 13px; }
  .logo { width: 64px; height: 78px; }
  .opponent-logo { width: 42px; height: 42px; }
  .hero h1 { font-size: 31px; }
  .lineup-card { margin-top: 16px; padding: 11px; border-radius: 15px; }
  .lineup-heading { align-items: start; flex-direction: column; gap: 8px; margin-bottom: 12px; }
  .lineup-heading h2 { font-size: 21px; }
  .lineup-grid { grid-template-columns: 1fr; gap: 5px; }
  .batter { padding: 9px; }
  .section { padding: 22px 14px; }
  .section-heading { display: block; margin-bottom: 14px; }
  .section-heading > p { margin-top: 5px; text-align: left; }
  .comparison-grid, .comparison-grid.is-pair, .pitcher-grid, .notes-grid, .schedule-strip, .snapshot-grid, .form-grid { grid-template-columns: 1fr; }
  .abs-grid, .abs-calls, .splits-grid, .credits-list, .abs-groups, .hero-note { grid-template-columns: 1fr; }
  /* Two label/value columns are too cramped to read on a phone. */
  .lasttime-list { grid-template-columns: 1fr; }
  .pen-grid { grid-template-columns: 1fr; }
  .lasttime-list li:nth-child(2) { padding-top: 7px; border-top: 1px solid var(--line); }
  .abs-groups .abs-group + .abs-group { margin-top: 20px; }
  .menubar-inner { width: 100%; gap: 4px; padding: 0 7px; }
  .menubar-btn { width: 30px; height: 30px; }
  .menubar-actions { gap: 5px; }
  .menubar-btn svg { width: 17px; height: 17px; }
  .report-tabs { justify-content: flex-start; gap: 1px; padding: 0; }
  .report-tab { gap: 4px; padding: 9px 5px; font-size: 13px; }
  .report-tab svg { width: 16px; height: 16px; }
  .report-tab span { display: none; }
  .report-tab.active span { display: inline; }
  .video-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .il-table { font-size: 13px; }
  .abs-player { grid-template-columns: minmax(76px, 1fr) minmax(0, 1.6fr) 38px; }
  .pwa-grid { grid-template-columns: 1fr; }
  .probability-split { grid-template-columns: 1fr 1fr; }
  .odds-facts > div { grid-template-columns: 92px minmax(0, 1fr); gap: 10px; }
  .pitcher-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .metric strong { font-size: 21px; }
  .col-streak, .col-diff, .col-l10 { display: none; }
  .standings { table-layout: fixed; font-size: 14px; }
  .standings th, .standings td { padding: 11px 5px; white-space: normal; vertical-align: middle; }
  .standings th:first-child, .standings td:first-child { width: 43%; }
  .team-cell > span { gap: 5px; }
  .team-cell img { width: 20px; height: 20px; }
  .standings-extra { display: table-row; }
  .standings-extra td { padding: 0 8px 10px; color: var(--muted); font-size: 13px; }
  .standings-extra td > span { display: flex; flex-wrap: wrap; gap: 3px 12px; }
  .standings tr:has(+ .standings-extra) td { border-bottom: 0; }
}

@media (max-width: 390px) {
  .matchup-title { gap: 7px; }
  .hero h1 { font-size: 28px; }
  .subhead { font-size: 14px; }
  .weather-line { gap: 4px 8px; font-size: 14px; }
  .pitcher-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}