/* ============================================================================
   season_record.css — the Season Opener (Team of Record) tab.

   Scoped: EVERY selector below is `.sr-` prefixed. Grepped against style.css,
   team_news.css, action_queue.css, gaffer.css, pulse.css, template_diff.css
   before it was chosen — zero prior hits. Nothing here restyles a shared
   class; the surface reuses `.page-header`, `.page-title`, `.page-subtitle`
   and `.fx-tag--*` AS THEY ARE.

   MOBILE-FIRST. This is the surface Harold opens first, so the base rules
   below are the narrow-viewport rules (single column, cards stack). Wider
   layout is progressive enhancement added in the @media block at the foot,
   never the other way around — the binding widths for this project are
   390x745 / 375x667 / 440x956 and the base rules must hold there unaided.

   Built on style.css custom properties so `body.night` inherits automatically;
   explicit night overrides only where a tinted background needs reversing.
   ========================================================================= */

/* 2026-09-22 fix, same pattern as My Rank/Projections/Form XI/Year in
   Review: .page-header/.sr-meta/.sr-section are all plain flush-left
   full-width blocks; the "Your Live Team" pitch inside one of the
   .sr-section blocks self-centers on its own via pitch_component.css.
   On a wide monitor that left the title/meta/historical-weeks content
   hugging the left edge while the pitch floated alone in the middle of
   the viewport -- confirmed on an actual wide screenshot, not just
   reasoned about. One shared cap+center ties the whole page to the same
   boundary the pitch already centers within. `#tab-seasonrecord >` scope
   is redundant with this file's own `.sr-`/`.page-header`-reuse
   discipline (nothing here is used outside this tab) but kept explicit
   anyway, matching every other page fixed this same pass. min(Npx, 94%),
   not a flat px cap -- a flat cap looked fine up to ~1900px and then
   just left a growing, unfilled gutter beyond it (see style.css's
   .chip-stats comment -- this exact lesson was already learned once on
   this app's chip pages and I didn't apply it here the first time). */
#tab-seasonrecord > .page-header,
#tab-seasonrecord > .sr-meta,
#tab-seasonrecord > .sr-section {
  max-width: min(1600px, 94%);
  margin-left: auto;
  margin-right: auto;
}

.sr-meta {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md, 8px);
  padding: var(--space-3, 12px);
  margin-bottom: var(--space-4, 16px);
  background: var(--color-surface, #fff);
}
.sr-status-line {
  font-size: 0.86rem;
  color: var(--color-text-muted, #666);
  margin: 0 0 8px;
  line-height: 1.45;
}
.sr-meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2, 8px);
}
.sr-chip {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  font-size: 0.72rem;
  color: var(--color-text-muted, #666);
}
.sr-chip--transfer {
  font-weight: 600;
  color: var(--color-text, #111);
}

/* ---- sections -------------------------------------------------------------- */
.sr-section { margin-bottom: var(--space-5, 24px); }
/* The per-surface `#tab-seasonrecord .gaf-pitch` cell/jersey/max-width
   freeze that used to live here is gone — pitch_component.css's own
   responsive cascade + self-centering default (`width: fit-content;
   margin-inline: auto;`) now cover this surface with no override needed,
   same as every other unified adopter (see pitch_component.css's
   2026-09-22 "UNIFICATION + REDESIGN PASS" note). */
.sr-section-head {
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
  margin-bottom: 4px;
}
.sr-section-title {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0;
  letter-spacing: -0.01em;
}
.sr-section-blurb {
  font-size: 0.84rem;
  color: var(--color-text-muted, #666);
  margin: 0 0 var(--space-3, 12px);
  line-height: 1.45;
}
.sr-budget-line {
  font-size: 0.82rem;
  color: var(--color-text-muted, #666);
  font-variant-numeric: tabular-nums;
  margin: 0 0 var(--space-3, 12px);
}

/* ---- player cards -- single column on mobile, grid on wider viewports ------ */
.sr-cards { display: grid; gap: 8px; grid-template-columns: 1fr; }
.sr-cards--tight { margin-bottom: var(--space-3, 12px); }

.sr-card {
  display: flex;
  gap: var(--space-3, 12px);
  align-items: center;
  padding: 9px 11px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md, 8px);
  background: var(--color-surface, #fff);
}
.sr-card--bench { opacity: 0.82; }
.sr-card-kit { flex: 0 0 auto; line-height: 0; }
.sr-card-kit .jersey { width: 30px; height: 30px; }
/* .gaf-crest is a <span> — inline by default, and width/height are ignored
   on inline non-replaced elements. display:inline-block is what makes the
   sizing below actually apply. */
.sr-card-kit .gaf-crest { display: inline-block; width: 30px; height: 30px; }
.sr-card-body { flex: 1 1 auto; min-width: 0; }

.sr-card-top {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 3px;
}
.sr-card-name { font-weight: 600; font-size: 0.92rem; }
.sr-bench-order {
  font-variant-numeric: tabular-nums;
  color: var(--color-text-muted, #666);
  margin-right: 4px;
}

.sr-armband {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1;
}
.sr-armband--c { background: var(--color-primary, #00ff87); color: #05140d; }
.sr-armband--v { background: var(--color-border); color: var(--color-text, #111); }

.sr-card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 0.76rem;
  color: var(--color-text-muted, #666);
  font-variant-numeric: tabular-nums;
}
.sr-card-note {
  font-size: 0.78rem;
  color: var(--color-text-muted, #666);
  margin: 5px 0 0;
  line-height: 1.4;
}

/* SUPERSEDED — pitch-look unification, Batch 2, retired in the same push
   that made Draft Builder the app-wide design of record. The full
   `.sr-pitch*` formation-view block (turf, markings, rows, cells, bench)
   that used to live here has been deleted: its two callers
   (srSquadPitchSectionHtml / srMyTeamSectionHtml, below) migrated to
   gafRenderPitch (pitch_component.js) back in Batch 2, and this CSS has had
   zero live consumers since — reconfirmed via repo-wide grep immediately
   before deletion. `.sr-armband`/`.sr-armband--c`/`.sr-armband--v` (above)
   are NOT part of this retirement — srPlayerCardHtml (`.sr-card`) still
   uses them; only the pitch-scoped size override
   (`.sr-pitch-name-row .sr-armband`) that assumed the now-gone
   `.sr-pitch-name-row` context was removed alongside this block. */

/* ---- predicted points (current/opener GW only) ------------------------------ */
.sr-predicted {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md, 8px);
  padding: var(--space-3, 12px);
  margin-bottom: var(--space-3, 12px);
  background: var(--color-surface, #fff);
}
.sr-predicted-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.sr-predicted-value {
  font-weight: 700;
  font-size: 0.94rem;
  font-variant-numeric: tabular-nums;
}
.sr-predicted-actual {
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--color-text, #111);
  font-variant-numeric: tabular-nums;
}
.sr-predicted-label {
  font-size: 0.74rem;
  color: var(--color-text-muted, #666);
  margin: 6px 0 0;
  line-height: 1.4;
}

/* ---- condensed plan lines (GW2/GW3 once GW1 has its own pitch) ------------- */
.sr-week-lines { display: grid; gap: 8px; }
.sr-week-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md, 8px);
  background: var(--color-surface, #fff);
  font-size: 0.82rem;
}
.sr-week-line-gw { font-weight: 700; }
.sr-week-line-cap { color: var(--color-text-muted, #666); }
.sr-week-line-transfers { color: var(--color-text-muted, #666); margin-left: auto; }

/* ---- the 3-gameweek plan ----------------------------------------------------- */
.sr-weeks { display: grid; gap: var(--space-4, 16px); }
.sr-week {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md, 8px);
  padding: var(--space-3, 12px);
  background: var(--color-surface, #fff);
}
.sr-week-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}
.sr-week-title { font-size: 0.98rem; font-weight: 700; margin: 0; }
.sr-week-note {
  font-size: 0.82rem;
  color: var(--color-text-muted, #666);
  margin: 0 0 var(--space-3, 12px);
  line-height: 1.42;
}
.sr-week-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted, #666);
  margin: 10px 0 6px;
}

/* ---- rationale ---------------------------------------------------------------- */
.sr-rationale {
  margin: 0;
  padding-left: 1.1em;
  font-size: 0.84rem;
  color: var(--color-text-muted, #666);
  line-height: 1.55;
}
.sr-rationale li { margin-bottom: 6px; }

/* ---- season tally (frozen GW1 XI, scored every week) ------------------------ */
.sr-tally-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--space-2, 8px);
  font-size: 0.84rem;
  font-variant-numeric: tabular-nums;
}
.sr-tally-table th {
  text-align: left;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted, #666);
  padding: 0 8px 6px 0;
  border-bottom: 1px solid var(--color-border);
}
.sr-tally-table td { padding: 7px 8px 7px 0; border-bottom: 1px solid var(--color-border); }
.sr-tally-row:last-child td { border-bottom: none; }
.sr-tally-gw { font-weight: 600; }
.sr-tally-run { font-weight: 700; }
.sr-tally-flag {
  margin-left: 3px;
  font-weight: 700;
  color: var(--color-warning, #b86f1c);
  cursor: help;
}

/* ---- my team (live state, post-deadline) ------------------------------------ */
.sr-mt-section { }
.sr-mt-meta { margin-bottom: var(--space-3, 12px); }

.sr-mt-note,
.sr-mt-transfers-note {
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md, 8px);
  padding: var(--space-3, 12px);
  margin-bottom: var(--space-4, 16px);
}
.sr-mt-note-text {
  font-size: 0.86rem;
  color: var(--color-text-muted, #666);
  margin: 0;
  line-height: 1.45;
}

.sr-mt-summary {
  font-size: 0.84rem;
  color: var(--color-text-muted, #666);
  font-variant-numeric: tabular-nums;
  margin: 0 0 var(--space-3, 12px);
  line-height: 1.5;
}

.sr-card-pos {
  text-transform: uppercase;
  font-size: 0.68rem;
  letter-spacing: 0.03em;
}
.sr-card-pts { font-weight: 600; }

.sr-mt-transfers-wrap { margin-top: var(--space-3, 12px); }

/* two columns from the start — even at 375px this is two narrow lists, not a
   single wide one, and stays legible without horizontal scroll */
.sr-mt-transfers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3, 12px);
}
.sr-mt-transfer-col { min-width: 0; }
.sr-mt-transfer-head {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.sr-mt-transfer-head--in { color: var(--color-success, #157f3a); }
.sr-mt-transfer-head--out { color: var(--color-danger, #c62828); }
.sr-mt-transfer-list { list-style: none; margin: 0; padding: 0; }
.sr-mt-transfer-row {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 6px 0;
  border-bottom: 1px solid var(--color-border);
  font-size: 0.8rem;
}
.sr-mt-transfer-row:last-child { border-bottom: none; }
.sr-mt-transfer-name { font-weight: 600; overflow-wrap: anywhere; }
.sr-mt-transfer-team {
  color: var(--color-text-muted, #666);
  font-size: 0.74rem;
}
.sr-mt-transfer-price {
  color: var(--color-text-muted, #666);
  font-variant-numeric: tabular-nums;
  font-size: 0.74rem;
}
.sr-mt-transfer-empty {
  color: var(--color-text-muted, #666);
  font-size: 0.8rem;
}

/* ---- historical demotion (manual plan, once the live team has top billing) --- */
.sr-section--historical { opacity: 0.92; }
.sr-historical-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted, #666);
  margin-bottom: 4px;
}

/* ---- honest degrade ------------------------------------------------------------ */
.sr-degrade {
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md, 8px);
  padding: var(--space-5, 24px) var(--space-4, 16px);
  text-align: center;
  color: var(--color-text-muted, #666);
}
.sr-degrade-mark { width: 32px; height: 32px; margin: 0 auto 10px; opacity: 0.6; }
.sr-degrade-reason { font-size: 0.9rem; margin: 0; line-height: 1.5; }
.sr-loading { padding: var(--space-5, 24px); color: var(--color-text-muted, #666); }

/* ---- night theme ----------------------------------------------------------- */
body.night .sr-meta,
body.night .sr-card,
body.night .sr-week,
body.night .sr-predicted,
body.night .sr-week-line { background: var(--color-surface, #12161c); }
body.night .sr-status-line,
body.night .sr-budget-line,
body.night .sr-rationale,
body.night .sr-week-note,
body.night .sr-card-meta,
body.night .sr-predicted-label,
body.night .sr-week-line-cap,
body.night .sr-week-line-transfers { color: var(--color-text-muted, #9aa4b2); }
body.night .sr-armband--v { color: var(--color-text, #e8ecf1); }
body.night .sr-predicted-actual { color: var(--color-text, #e8ecf1); }
body.night .sr-mt-note-text,
body.night .sr-mt-summary,
body.night .sr-mt-transfer-team,
body.night .sr-mt-transfer-price,
body.night .sr-mt-transfer-empty,
body.night .sr-historical-label { color: var(--color-text-muted, #9aa4b2); }

/* ---- wider viewports: cards move to a real grid, pitch cells enlarge ------- */
@media (min-width: 640px) {
  .sr-cards { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
  .sr-weeks { grid-template-columns: 1fr; }
  .sr-mt-transfers { grid-template-columns: repeat(2, minmax(200px, 320px)); }
}
@media (min-width: 960px) {
  .sr-weeks { grid-template-columns: repeat(3, 1fr); }
}