/* CALL-2-0926 (D-CALL-0926, Pat 2026-09-26 call: "get rid of the one two
   three four five red numbers"): the `.lr-rank` ordinal badge is removed
   from both Heisman and Top Performers rows (index.html no longer ships the
   `<span class="lr-rank">` node; the rule that styled it and the grid track
   that reserved space for it are both deleted below). Row height is also
   tightened per the same call ("we can squeeze the north-south of it down
   too because there's a lot of dead space above and below") — see
   `--leader-row-min` (tokens.css) and `padding-block` below, both reduced
   from the W3 baseline (72px / 10px) now that there's one less element
   fighting for vertical room. `.hw-school`/`.perf-school:empty` now
   collapses instead of leaving a blank text line + gap when a player
   record's school truly cannot be resolved (CALL-2 item (c), "Geo Lopez"
   report) — see script.js le2()/re() for the fetch-side fallback chain.

   leader-rows.css — EDGE-TO-EDGE-0926 W3 (E2E-W3-0926).
   Spec: docs/Features/EDGE_TO_EDGE_0926.md §3 "Leader rows: Heisman Watch
   (3 rows) and Top Performers (rows)". Benchmark: ESPN app leaders list,
   Apple Sports standings/leader rows, The Athletic's ranked lists — rank at
   the left, a small headshot, name over a context line, one big number at
   the right, thin dividers, the whole row is the tap target.

   ONE shared component, `.leader-row`, deliberately written WITHOUT a
   `html[data-route="/"]` prefix (unlike the rest of this dashboard's CSS in
   route.css) so `/heisman` and `/players` can adopt the exact same rows
   later (§3: "so /heisman and /players can reuse it later") without a
   fork. It is loaded after route.css (see index.html `<link>` order), so
   its equal-specificity class selectors still win by source order against
   any base `.perf-row`/`.hw-row` tile-grid rules left in core.css.

   Ownership note: the two ROW-LIST containers (`.hw-row`, `.perf-row`) are
   dashboard-only markup today, so their layout (single column vs the
   Top Performers 1/2-column tier ladder) also lives in this file rather
   than being duplicated with a route prefix — there is nothing else on
   the site yet that uses those two container classes.

   Hooks preserved from the old tile markup (index.html, script.js):
   `.hw-row`, `.hw-card`, `.hw-avatar`, `.hw-name`, `.hw-school`, `.hw-score`,
   `.perf-row`, `.perf-card`, `.perf-avatar`, `.perf-name`, `.perf-school`,
   `.perf-pos`, `.perf-ppg`, `.perf-total`, and the `data-id="t_hw_1..3"` /
   `t_fp_1..10"` analytics ids. New elements added (`.leader-row`,
   `.lr-avatar`, `.lr-logo`, `.lr-main`, `.lr-meta`, `.lr-value`, `.hw-stats`)
   carry the row's structural/layout role; the old classes stay purely
   semantic (JS hydration + exp-card quick-look reads them, see script.js
   `re()`/`le2()`/`Ae()`/`he()` and the `.perf-card, .hw-card` click router).
*/

/* ── the component ─────────────────────────────────────────────────────── */
.leader-row{
  display:grid;
  grid-template-columns:48px minmax(0,1fr) auto;
  align-items:center;
  column-gap:8px;
  min-height:var(--leader-row-min,64px);
  min-width:0;
  padding-block:8px;
  padding-inline:10px;
  border:0;
  border-radius:0;
  border-bottom:1px solid #000;
  background:var(--band-bg,#0A0A0C);
  color:inherit;
  text-decoration:none;
  cursor:pointer;
  box-sizing:border-box;
  /* .hw-card/.perf-card (core.css, the OLD centred-tile design) both set
     text-align:center as a base rule. Kept for hooks, this element is STILL
     that class, and text-align inherits — .lr-main's flex children
     (.hw-name/.perf-name are plain block text, not flex containers) rendered
     their TEXT centred inside their own (correctly, fully stretched) box,
     reading as "the name floats mid-row" even though its box position was
     always correct (.lr-meta looked fine only because flex justify-content,
     not text-align, positions flex children). Reset once here so every
     descendant text node inherits left, not the old tile's centre. */
  text-align:left;
}
.leader-row:last-child{ border-bottom:0; }
/* Team-colour wash: a left-anchored gradient, not a card fill — §1.1 "Team
   colour is a stripe, not a card". `--team` is set by script.js re()/le2()
   the same way the old tiles did; `.is-school-colored` gates it so a row
   with no confirmed school colour stays plain `--band-bg`. */
.leader-row.is-school-colored{
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--team,#8A8A8A) 30%, transparent) 0, transparent 65%),
    var(--band-bg,#0A0A0C);
}
@media (hover:hover){
  .leader-row:hover{ background-color:rgba(255,255,255,.03); }
  .leader-row.is-school-colored:hover{
    background:
      linear-gradient(90deg, color-mix(in srgb, var(--team,#8A8A8A) 40%, transparent) 0, transparent 70%),
      var(--band-bg,#0A0A0C);
  }
}
/* No lift transform on hover (spec §3 Row slot) + honor reduced motion. */
.leader-row{ transition:background-color .15s ease; }
@media (prefers-reduced-motion: reduce){ .leader-row{ transition:none; } }

/* Headshot — 48px circle, 2px ring in school colour, school-logo badge
   bottom-right (20px). Falls back to script.js's fbAv() school-colour
   silhouette / DEF initials exactly like the old tiles (setAvatar()
   unchanged) when there is no real headshot. */
.leader-row .lr-avatar{
  position:relative;
  width:48px; height:48px;
  flex:0 0 48px;
}
.leader-row .lr-avatar img.slot-img{
  width:48px!important; height:48px!important;
  aspect-ratio:1/1;
  border-radius:50%!important;
  border:2px solid var(--team,var(--gray-border,#2A2A2A))!important;
  object-fit:cover; object-position:50% 20%;
  background:radial-gradient(circle at 50% 35%,#241414,#0d0505);
  -webkit-mask-image:none!important; mask-image:none!important;
  filter:none!important;
  margin:0;
}
.leader-row .lr-logo{
  position:absolute;
  right:-2px; bottom:-2px;
  width:20px; height:20px;
  border-radius:50%;
  background:#0a0a0a;
  border:1px solid #000;
  object-fit:contain;
  padding:2px;
  box-sizing:border-box;
}
.leader-row .lr-logo[hidden]{ display:none; }

/* Main column — name / meta / (optional) stat line. flex column so a
   missing third line (Top Performers has none; an empty Heisman stat line,
   accept (c)) never leaves a gap. */
.leader-row .lr-main{
  display:flex;
  flex-direction:column;
  justify-content:center;
  justify-self:stretch;
  width:100%;
  gap:2px;
  min-width:0;
  overflow:hidden;
}
/* Line 1 — full name. Inter 700 18px, one line, ellipsis (no more the old
   tile's "L. KIENH…" truncated initial+surname — accept (b): full names at
   >=390 must not truncate for the live top 3). */
.leader-row .hw-name,
.leader-row .perf-name{
  font-family:var(--f-body,"Inter",sans-serif);
  font-weight:700;
  font-size:18px;
  line-height:1.25;
  color:var(--white-bright,#F5F5F5);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  min-width:0;
}
/* Line 2 — Heisman: "School · Position" as one plain muted string (set by
   script.js le2()). Performers: school text plus a separate position CHIP
   (reuses the existing sitewide `.pos-qb`/`.pos-rb`/... palette — core.css —
   instead of inventing a second token set), grouped in `.lr-meta`. */
.leader-row .hw-school{
  font-family:var(--f-body,"Inter",sans-serif);
  font-weight:500;
  font-size:16px;
  color:var(--text-muted,#C2C2C2);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  min-width:0;
}
/* CALL-2 (c): when a player record's school truly cannot be resolved, an
   empty text node in a `flex-direction:column` stack still reserves a full
   line-height + `gap` — a dead blank line between name and stats/value,
   exactly the "wasted vertical dead space" complaint. Collapse it instead,
   same treatment `.hw-stats:empty` already got. */
.leader-row .hw-school:empty{ display:none; }
.leader-row .lr-meta{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
}
.leader-row .lr-meta .perf-school{
  font-family:var(--f-body,"Inter",sans-serif);
  font-weight:500;
  font-size:16px;
  color:var(--text-muted,#C2C2C2);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  min-width:0;
}
/* The old tile's absolute top-left badge becomes an inline chip next to the
   school name — core.css's `.perf-pos{...}` base + `.pos-*` colour rules
   still apply, this just cancels the absolute positioning. */
.leader-row .lr-meta .perf-pos{
  position:static;
  top:auto; left:auto;
  flex:0 0 auto;
  font-size:16px;
  line-height:1.3;
}
/* CALL-2 (c): same empty-collapse as `.hw-school` above — an unresolved
   school leaves `.perf-pos` sitting alone in `.lr-meta` instead of a stray
   gap next to a blank string. */
.leader-row .lr-meta .perf-school:empty{ display:none; }
/* Line 3 — Heisman stat line only ("2,140 PASS YDS · 18 PASS TD · 3 INT"),
   JetBrains Mono. Ellipsis backstop; script.js le2() also pre-truncates to
   the first 2 pairs below 360px so the ellipsis rarely has to bite. Empty
   `stEl.textContent` (no stats — accept (c)) collapses to nothing and the
   row still measures >=72px off `.leader-row`'s own min-height. */
.leader-row .hw-stats{
  display:block;
  font-family:var(--f-mono,"JetBrains Mono",monospace);
  font-size:16px;
  color:var(--text-muted,#C2C2C2);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  min-width:0;
}
.leader-row .hw-stats:empty{ display:none; }

/* Value column — right-aligned, tabular. Heisman: bare score number, no
   per-row "HEISMAN SCORE" label (the band subhead says it once — §3 value
   slot). Performers: PPG on top, TOTAL beneath (16px mono muted). */
.leader-row .lr-value{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  justify-content:center;
  text-align:right;
  min-width:0;
  gap:2px;
}
.leader-row .hw-score{
  font-family:var(--f-display,"Graduate",sans-serif);
  font-size:26px;
  line-height:1;
  color:var(--white-bright,#F5F5F5);
  font-variant-numeric:tabular-nums;
}
.leader-row .perf-ppg{
  font-family:var(--f-display,"Graduate",sans-serif);
  font-size:26px;
  font-weight:400;
  line-height:1;
  color:var(--white-bright,#F5F5F5);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.leader-row .perf-ppg .perf-unit{
  font-size:.55em;
  color:var(--text-muted,#C2C2C2);
  font-family:var(--f-mono,monospace);
  letter-spacing:.08em;
}
.leader-row .perf-total{
  font-family:var(--f-mono,monospace);
  font-size:16px;
  color:var(--text-muted,#C2C2C2);
  white-space:nowrap;
}

/* Long-name overflow floor (accept b): at the two narrowest phones an
   ellipsis is allowed, but the text itself must stay >=16px — never shrink
   below the legibility floor to "make it fit" the way the old tile clamps
   did. */
@media (max-width:359px){
  .leader-row{ column-gap:8px; padding-inline:8px; }
  .leader-row .lr-avatar{ width:40px; height:40px; flex-basis:40px; }
  .leader-row .lr-avatar img.slot-img{ width:40px!important; height:40px!important; }
  .leader-row .lr-logo{ width:16px; height:16px; }
  .leader-row .hw-name, .leader-row .perf-name{ font-size:16px; }
  .leader-row .hw-score{ font-size:22px; }
  .leader-row .perf-ppg{ font-size:22px; }
}

/* ── Heisman row list — always exactly 3 rows, always 1 column (accept a):
   `.hw-row`'s own `left` is identical for every child by construction (a
   single-column flex stack), and DOM order (rank 1,2,3) gives strictly
   increasing `top`. No container-query fan-out here — Heisman never grows
   past 3. */
.hw-row{
  display:flex;
  flex-direction:column;
}
/* heisman-gate.js swaps `.hw-row`'s className to `.hw-dormant` and rewrites
   its innerHTML wholesale for the pre-Week-3 state (route.css owns that
   card's look, unchanged by this file) — this selector only ever matches
   the live 3-row state, so it never fights that swap. */

/* ── Top Performers row list — 5 rows under 720px of container width, 8
   (2x4, column-major) from 45rem (720px), 10 (2x5) from 68.75rem (1100px)
   — §2 breakpoint table, keyed to `.sn--c_fantasy`'s own container
   (container-name:snscard, core.css; this band is never split into two
   page-level columns, so the card's own inline-size already tracks the
   content-area width these thresholds are defined against). */
.perf-row{
  display:flex;
  flex-direction:column;
}
.perf-row .leader-row[data-id="t_fp_6"],
.perf-row .leader-row[data-id="t_fp_7"],
.perf-row .leader-row[data-id="t_fp_8"],
.perf-row .leader-row[data-id="t_fp_9"],
.perf-row .leader-row[data-id="t_fp_10"]{
  display:none;
}
@container snscard (min-width:45rem){
  .perf-row{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-auto-flow:column;
    grid-template-rows:repeat(4,auto);
    column-gap:24px;
  }
  .perf-row .leader-row[data-id="t_fp_6"],
  .perf-row .leader-row[data-id="t_fp_7"],
  .perf-row .leader-row[data-id="t_fp_8"]{
    display:grid; /* re-assert `.leader-row`'s own internal grid */
  }
}
@container snscard (min-width:68.75rem){
  .perf-row{ grid-template-rows:repeat(5,auto); }
  .perf-row .leader-row[data-id="t_fp_9"],
  .perf-row .leader-row[data-id="t_fp_10"]{
    display:grid;
  }
}