/* ============================================================================
   template_diff.css — the Template & Differentials tab.

   Scoped: EVERY selector below is `.td-` prefixed. The prefix was grepped
   against style.css, team_news.css, action_queue.css, gaffer.css and pulse.css
   before it was chosen — zero prior hits. Nothing here restyles a shared
   class; the surface reuses `.page-header`, `.fx-tag--*` and `.fdr-bg-*` AS
   THEY ARE, plus (this gate) `.gaf-pitch*` from pitch_component.css for the
   two pitches themselves — see the PITCHES + ACCORDIONS block near the end
   of this file. The accordion rows (`.td-acc-*`) do NOT embed `.gaf-pitch`
   (that per-row formation-cell shell was retired in the declutter pass,
   see the ACCORDIONS comment below) — they build small dedicated rows
   instead, calling the shared jersey/fixture PRIMITIVES directly.

   Built on style.css custom properties so `body.night` inherits automatically
   — including `--panel-gap`/`--panel-radius`/`--panel-padding` (My Team's
   Rank-Glance/Bench/stat-tile alignment tokens, reused here so this page's
   pitches, headings, and accordions share one gutter/radius/padding instead
   of a second, slightly-different set of numbers) — with explicit night
   overrides only where a tinted background needs reversing, the same
   pattern team_news.css established.
   ========================================================================= */

/* ---- meta strip ---------------------------------------------------------- */
.td-meta {
  border: 1px solid var(--color-border);
  border-radius: var(--panel-radius);
  padding: var(--panel-padding);
  margin-bottom: var(--panel-gap);
  background: var(--color-surface, #fff);
}
/* margin-bottom intentionally uses --panel-gap (not the --space-4 this once
   hardcoded) so the gap below the meta strip matches every other gutter on
   this page — one gutter value, not a fourth close-but-different number. */
.td-meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2, 8px);
}
.td-asof {
  font-size: 0.85rem;
  color: var(--color-text-muted, #666);
}
.td-asof strong { color: var(--color-text, #111); font-weight: 600; }

.td-chip {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  color: var(--color-text-muted, #666);
  white-space: nowrap;
}
.td-chip--fallback { border-color: #e0af68; color: #a1741f; }
/* The declutter pass's one-chip stand-in for the old three-paragraph
   ROSTER SHARE / MOMENTUM / FIXTURES explainer — full text lives in its
   title tooltip (tdMetaStrip, template_diff_tab.js). cursor:help signals
   "hover me" the same way a native title attribute already does everywhere
   else on this page; no new icon system. */
.td-chip--info { cursor: help; }

.td-run {
  margin-left: auto;
  padding: 5px 12px;
  border-radius: var(--radius-sm, 6px);
  border: 1px solid var(--color-primary, #00ff87);
  background: transparent;
  color: var(--color-text, #111);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
}
.td-run:hover:not(:disabled) { background: var(--color-primary, #00ff87); color: #05140d; }
.td-run:disabled { opacity: 0.6; cursor: default; }
.td-run--lg { margin: var(--space-3, 12px) auto 0; display: block; padding: 9px 18px; font-size: 0.9rem; }

/* RETIRED — .td-notes/.td-note/.td-note-k (the three-paragraph ROSTER
   SHARE / MOMENTUM / FIXTURES explainer's <ul>). Collapsed into the
   .td-chip--info tooltip above (tdMetaStrip, template_diff_tab.js) — zero
   remaining emitters confirmed before deletion. */

/* ---- sections ------------------------------------------------------------ */
/* min-width: 0 is load-bearing, not decoration: `.td-section` is a grid
   ITEM inside `.td-pitch-grid`, and grid items default to `min-width: auto`
   — the CSS Grid spec's own "content can't shrink below its intrinsic
   minimum" rule. The pitch inside (4-across DEF row at --gaf-pitch-cell)
   has no max-width of its own, so without this the grid TRACK grows to fit
   the pitch's natural content width instead of the pitch shrinking to the
   track — a real, measured horizontal overflow at 390px (the pitch
   rendered 426px wide inside a 352px track, pushing the page into a
   sideways scroll). This is the standard fix for that well-known grid
   behavior, not a new pattern invented here. */
.td-section { margin-bottom: var(--panel-gap); min-width: 0; }
.td-section-head {
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
  margin-bottom: 4px;
}
.td-section-title {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0;
  letter-spacing: -0.01em;
}
/* RETIRED — .td-section-blurb (the "Who the field is on right now..." /
   "Thinly rostered..." paragraphs under each heading). The heading + its
   honesty tag already say what matters; zero remaining emitters confirmed
   before deletion. */

/* RETIRED — the old position/tier segmented controls (`.td-segs`, `.td-seg`,
   `.td-seg--on`). Both tdTemplateSection and tdDifferentialsSection were
   rebuilt around a single fixed-formation pitch plus a full-pool accordion,
   so there is no view left for a segmented control to switch between. Zero
   remaining emitters confirmed by repo-wide grep before deletion. */

/* RETIRED — the old template table (`.td-table-wrap`, `.td-table` and its
   `.td-rank` / `.td-name` / `.td-num` / `.td-own` cells) and the old
   differentials card grid (`.td-group*`, `.td-cards`, `.td-card*`,
   `.td-fix*`, `.td-mean`, `.td-sub`). Both were replaced by gafRenderPitch
   (pitch_component.js, `.gaf-pitch*`) plus the new `.td-acc*` accordion
   rows below. Zero remaining emitters confirmed by repo-wide grep before
   deletion. `.td-foot` survives this cleanup — still emitted by the
   rebuilt sections (see PITCHES + accordions below) — and `.td-club-
   fallback` survives too: it is emitted by `tdJersey()`, kept byte-for-byte
   per this change's brief even though no caller in this file currently
   invokes it (deleting the CSS out from under a kept, still-live function
   would leave it silently unstyled if anything calls it again). `.td-chip
   --tight` ALSO survived that cleanup (it was still emitted then) but is
   RETIRED now: the ROW SIMPLIFY pass (2026-08-23) dropped the tier5 "≤5%"
   chip it styled in favor of the real ownership percentage every row
   already carries — zero remaining emitters confirmed before deletion. */
.td-foot { font-size: 0.75rem; color: var(--color-text-muted, #666); margin: 0; }

.td-club-fallback {
  display: inline-block;
  min-width: 34px;
  text-align: center;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--color-text-muted, #666);
}

/* ---- states -------------------------------------------------------------- */
.td-loading, .td-empty {
  font-size: 0.85rem;
  color: var(--color-text-muted, #666);
  padding: var(--space-3, 12px) 0;
}
.td-degrade {
  border: 1px dashed var(--color-border);
  border-radius: var(--panel-radius);
  padding: var(--space-5, 24px) var(--space-4, 16px);
  text-align: center;
  max-width: 46rem;
}
.td-degrade-mark { color: var(--color-text-muted, #666); opacity: 0.6; }
.td-degrade-mark svg { width: 30px; height: 30px; }
.td-degrade-reason {
  font-size: 0.92rem;
  line-height: 1.5;
  margin: var(--space-3, 12px) auto 0;
  max-width: 36rem;
  color: var(--color-text, #111);
}
.td-degrade-sub {
  font-size: 0.78rem;
  color: var(--color-text-muted, #666);
  margin: 8px auto 0;
  max-width: 32rem;
}

/* ---- night mode: only the tinted surfaces need reversing ----------------- */
body.night .td-meta { background: var(--color-surface, #12161c); }
body.night .td-asof strong,
body.night .td-degrade-reason { color: var(--color-text, #e8ecf1); }
body.night .td-chip--fallback { color: #e0af68; }
/* ---- narrow screens ------------------------------------------------------
   The binding widths are 375 and 390. */
@media (max-width: 420px) {
  .td-run { margin-left: 0; }
}

/* ============================================================================
   PITCHES + ACCORDIONS — added this gate, replacing the old table/card system
   above. `.td-pitch-grid` is the one responsive container: single column
   below 768px, two equal columns (no fixed px widths, so each pitch/accordion
   pair stays fluid) at/above it. Both `<section class="td-section">` grid
   items are fully self-contained (own pitch, own footnote, own accordion), so
   this single breakpoint carries the two accordions into visual columns too
   without a second grid needing to track the same boundary a second time.
   ========================================================================= */
.td-pitch-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--panel-gap);
  align-items: start;
}
@media (min-width: 768px) {
  .td-pitch-grid { grid-template-columns: 1fr 1fr; }
}

/* Both pitches here are 4-3-3 — DEF (4-across) is the widest row, never 5 —
   so on mobile they can afford a wider per-player cell than pitch_component
   .css's shared 62px default (tuned for the 5-across rows other surfaces
   render). Scoped to `#tab-templatediff` (an ID selector) specifically so
   it wins over pitch_component.css's bare `.gaf-pitch` rule regardless of
   load order (the exact class of bug already caught twice before this in
   this project — this same file's now-retired `.td-acc-turf`, and before
   that style.css's `.myteam-bench-wrap`) without touching the shared
   default every other pitch surface relies on.
   86px is near the actual ceiling here: at 390px, 4 DEF cells side by side
   in a nowrap flex row hit their OWN flex-shrink limit before this variable
   does — raising it past ~86-90px changed nothing in a real render (the row
   itself has no more space to give), so the remaining single-pixel clip on
   the widest real club codes (MUN, NEW — M/N/W run wider than most) was
   fixed on the font side instead (pitch_component.css: 5.5px + tighter
   letter-spacing), not by chasing this number higher. */
@media (max-width: 480px) {
  #tab-templatediff .gaf-pitch { --gaf-pitch-cell: 86px; }
}

/* pitch_component.css's own width breakpoints grow --gaf-pitch-cell up to
   104px at >=1280px -- exactly laptop width, exactly where there's the
   least vertical room, and exactly wrong for a page rendering TWO pitches
   side by side (each one's height compounds, not just its width). Scoped
   to >=768px, the same breakpoint .td-pitch-grid itself uses to switch to
   2 columns -- below that the mobile rule above already owns sizing, and
   this deliberately doesn't touch that (no width overlap = no source-
   order fight between two same-specificity ID-scoped rules). */
@media (min-width: 768px) {
  #tab-templatediff .gaf-pitch {
    /* Also caps + centers within its column -- a plain block otherwise
       stretches to fill it, and at two columns side by side on a wide
       monitor that's ~900px+ each, producing a wide, squat pitch instead
       of a narrower, taller, more readable one. */
    --gaf-pitch-cell: 80px;
    --gaf-pitch-jersey: 45px;
    /* Sized for the widest realistic row (5-across) at 80px cells -- see
       style.css's matching rule for the full calculation. */
    max-width: 440px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* Same visual treatment as `.rank-glance-provisional` (style.css) — reused
   convention, own class name (this file's `.td-` scoping rule), for the
   differentials pitch's "points aren't settled yet" note. */
.td-provisional {
  color: var(--color-warning, #e0af68);
  font-weight: 600;
  font-size: 0.8rem;
}

/* ---- accordions ------------------------------------------------------------
   Pattern copied from action_queue.css's `.aq-dismissed-block` (native
   <details>/<summary>, no JS open/close state) under this file's own `.td-`
   prefix — not a dependency on that file's classes.

   DECLUTTER PASS: this used to hold a "top 5 + Show all N" pattern
   (`.td-acc-showall` button) and each row embedded a whole `.gaf-pitch`
   formation-cell shell (`.td-acc-turf`, sized to 220px/62vw just to make
   gafPitchPlayerHtml's fixture-strip labels legible) — that per-row
   ceremony, at 120-160 rows, was the actual "huge and unreadable" bulk.
   Retired both: the accordion always shows its full ranked list now
   (template_diff_tab.js's tdAccordion no longer slices), and each row is a
   dedicated single line (`.td-acc-rank/-kit/-name/-stat/-fx/-run` below)
   built from the shared primitives directly, not the pitch-cell shell.
   Given a background/border/panel tokens here too — same box language as
   `.td-meta` and the pitches above it, one consistent grid rather than the
   only unboxed element on the page. */
.td-acc {
  margin-top: var(--panel-gap);
  padding: var(--panel-padding);
  border-radius: var(--panel-radius);
  border: 1px solid var(--color-border);
  background: var(--color-surface, #fff);
  font-size: 0.85rem;
}
.td-acc summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  color: var(--color-text, #111);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.td-acc-count {
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  color: var(--color-text-muted, #666);
}
.td-acc-list {
  list-style: none;
  margin: var(--space-2, 8px) 0 0;
  padding: 0;
  display: grid;
  gap: 2px;
}
/* One compact line: rank · kit · FULL name · ownership%-pill · points ·
   fixture boxes. ROW SIMPLIFY (2026-08-23) dropped the old tier5 "≤5%" chip
   and the "Run X.X" column — see template_diff_tab.js's tdAccordionRowHtml
   for why — freeing enough width that `.td-acc-name` no longer needs to
   ellipsize at all; every other column is still fixed/intrinsic width so
   the row never wraps mid-line regardless.
   `min-width: 0` is load-bearing, not decorative: `.td-acc-list` is a
   `display: grid` with no explicit column width, so its single implicit
   track auto-sizes to fit each `<li>`'s content — and a flex container's
   default automatic minimum size is the sum of its children's UNSHRUNK
   flex-basis, `.td-acc-name`'s own `min-width: 0` notwithstanding. This bit
   the row once already (2026-08-23, the tier5 chip pushing the track past
   the container's real width, silently clipped off narrow viewports with
   no scrollbar to reach it) and the fix stays — a name any row's content
   could still, in principle, out-grow its column for is exactly the case
   this guards against, tier5 chip or not. */
.td-acc-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0;
  border-bottom: 1px dashed var(--color-divider, var(--color-border));
  font-size: 0.8rem;
  min-width: 0;
}
.td-acc-rank {
  /* 1.8rem, not 1.4rem: both pools run past 100 (120/160 rows), so rank
     needs 3 digits of room, not 2 — measured "100"-"160" against the
     original width and it clipped by 3px every time. */
  flex: 0 0 auto;
  width: 1.8rem;
  color: var(--color-text-muted, #666);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.td-acc-kit { flex: 0 0 auto; line-height: 0; }
.td-acc-kit .jersey { width: 22px; height: 22px; }
/* .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. */
.td-acc-kit .gaf-crest { display: inline-block; width: 22px; height: 22px; }
/* No ellipsis, deliberately — this used to truncate ("De ...", "Hin...")
   because the row's other columns (the tier5 chip, the Run rating) left it
   no room; both are gone now and the freed width goes to the name in full,
   per spec. `min-width: 0` still lets it shrink below its own text's
   intrinsic width when the row genuinely runs out of space (a real edge
   case, not the common one), wrapping onto a second line rather than
   overflowing or clipping — never truncating a name silently either way. */
.td-acc-name {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 600;
}
/* The ownership percentage, as a plain pill — replaces the old tier5 "≤5%"
   threshold flag with the real number every row already carries, template
   and differentials alike. Reuses `.td-chip` (this page's one pill style)
   rather than a second badge system. */
.td-acc-own { flex: 0 0 auto; }
.td-acc-stat {
  flex: 0 0 auto;
  color: var(--color-text-muted, #666);
  font-variant-numeric: tabular-nums;
  font-size: 0.74rem;
  white-space: nowrap;
}
/* The fixture-run boxes — the SOLE fixture indicator on this page (the
   5-dot color row was retired, see pitch_component.css). Reuses the app's
   own fdr-bg-N palette so a box's color means the same thing here as it
   does on the pitches above: green good, grey neutral, red bad. */
.td-acc-fx { flex: 0 0 auto; display: flex; gap: 2px; }
.td-acc-fxbox {
  display: inline-block;
  min-width: 26px;
  padding: 1px 3px;
  text-align: center;
  font-size: 0.62rem;
  font-weight: 700;
  border-radius: 3px;
}
.td-acc-fxbox--none { opacity: 0.55; }

@media (max-width: 420px) {
  /* The fixture boxes stay VISIBLE at every width (they're the sole
     fixture indicator on this row) but get smaller — the rank number is
     what gives up its column here, since it's the one thing on this row a
     reader can do without on a narrow screen; name/own-pill/stat/boxes all
     survive. */
  .td-acc-rank { display: none; }
  .td-acc-kit .jersey,
  .td-acc-kit .gaf-crest { width: 18px; height: 18px; }
  .td-acc-own { font-size: 0.66rem; padding: 1px 6px; }
  .td-acc-stat { font-size: 0.68rem; }
  .td-acc-fx { gap: 1px; }
  .td-acc-fxbox { min-width: 18px; padding: 1px 2px; font-size: 0.56rem; }
}