/* ============================================================
   data-list.css — unified div-grid component for all data tables.
   Replaces .premium-table, .premium-data-table, .fs-table, and
   the inline <style> blocks on per-template tables.

   Markup contract:
     <div class="data-list" role="table" style="--data-list-cols: 32px 1fr ...">
       <div class="data-row data-row--header" role="row">
         <span class="data-cell data-cell--head" role="columnheader">…</span>
       </div>
       <div class="data-row" role="row">
         <span class="data-cell …" role="cell">…</span>
       </div>
     </div>

   Tokens: theme.css is the source of truth. No hex values here.
   ============================================================ */

/* ----- Wrapper ----- */
.data-list {
  display: flex;
  flex-direction: column;
  width: 100%;
  background: var(--surface);
  border-radius: var(--te-radius-md);
  overflow: hidden;
}

.data-list-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ----- Row base ----- */
.data-row {
  position: relative;
  display: grid;
  grid-template-columns: var(--data-list-cols, 1fr);
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  color: var(--on-surface);
  background: var(--surface);
  text-decoration: none;
  transition: background 140ms ease;
}

/* Anchor variant — entire row is a link */
.data-row--link { cursor: pointer; }
.data-row--link:hover { color: var(--on-surface); }

/* ----- Row striping (surface ↔ surface-container-lowest) -----
   Match-list striping has moved to tactical-match-row.css so the matches
   component is self-contained. */
.data-list > .data-row:nth-child(even) {
  background: var(--surface-container-lowest);
}

.data-row:hover {
  background: var(--surface-container-high);
}

/* ----- Header row ----- */
.data-row--header {
  background: var(--surface-container-low);
  cursor: default;
}
.data-row--header:hover { background: var(--surface-container-low); }
.data-list > .data-row--header:nth-child(even) { background: var(--surface-container-low); }

.data-list--sticky-header .data-row--header {
  position: sticky;
  top: 0;
  z-index: 2;
}

/* ----- Compact density ----- */
.data-list--compact .data-row { padding: 8px 12px; gap: 6px; }
.data-list--compact .data-cell { font-size: 0.75rem; }

/* ----- Cell base ----- */
.data-cell {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--on-surface);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Header cells — Label-MD / SM scale per DESIGN.md §3 */
.data-cell--head {
  font-size: var(--te-label-size);
  font-weight: var(--te-label-weight);
  letter-spacing: var(--te-label-spacing);
  text-transform: uppercase;
  color: var(--on-surface-variant);
}

/* Alignment atoms (replace Bootstrap text-center/text-end inside .data-list) */
.data-cell--center { justify-content: center; text-align: center; }
.data-cell--end    { justify-content: flex-end; text-align: right; }

/* Secondary / meta text */
.data-cell--meta { color: var(--on-surface-variant); font-weight: 500; }

/* Inline link inside a cell (keeps the surrounding cell typography) */
.data-cell a,
.data-cell--player.data-row__link,
.data-cell--team.data-row__link { color: inherit; text-decoration: none; }
.data-cell a:hover { color: var(--primary-container); }

/* ----- Stat cell ----- */
.data-cell--stat {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

/* ----- Rank cell + badge ----- */
.data-cell--rank {
  justify-content: center;
}
.data-cell__rank-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 8px;
  border-radius: var(--te-radius-full);
  background: color-mix(in srgb, var(--on-surface) 6%, transparent);
  font-size: 0.8125rem;
  font-weight: 800;
  color: var(--on-surface);
  font-variant-numeric: tabular-nums;
}

/* Top-3 medal tints — full-row background + badge accent.
   Tokens: gold = --te-caution, silver = --outline, bronze = --te-win.
   (Caution mustard reads more like gold than the live-red --error.) */
.data-row--rank-1 { background: color-mix(in srgb, var(--te-caution) 8%, var(--surface)); }
.data-row--rank-2 { background: color-mix(in srgb, var(--outline) 10%, var(--surface)); }
.data-row--rank-3 { background: color-mix(in srgb, var(--te-win) 7%, var(--surface)); }
.data-list > .data-row--rank-1:nth-child(even) { background: color-mix(in srgb, var(--te-caution) 11%, var(--surface)); }
.data-list > .data-row--rank-2:nth-child(even) { background: color-mix(in srgb, var(--outline) 13%, var(--surface)); }
.data-list > .data-row--rank-3:nth-child(even) { background: color-mix(in srgb, var(--te-win) 10%, var(--surface)); }
.data-row--rank-1 .data-cell__rank-badge { background: var(--te-caution); color: var(--surface-lowest); }
.data-row--rank-2 .data-cell__rank-badge { background: color-mix(in srgb, var(--outline) 70%, var(--on-surface) 30%); color: var(--surface-lowest); }
.data-row--rank-3 .data-cell__rank-badge { background: var(--te-win); color: var(--surface-lowest); }

/* Rank change arrow (up / down / same) — also retained class `.standings-rank-delta`
   for live_standings.js compatibility (queried via `.querySelector('.standings-rank-delta')`) */
.data-cell__rank-change,
.standings-rank-delta {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 0.6875rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--on-surface-variant);
}
.data-cell__rank-change--up   { color: var(--te-win); }
.data-cell__rank-change--down { color: var(--error); }
.data-cell__rank-change--same { color: var(--on-surface-variant); }
.standings-rank-num { font-weight: 800; font-variant-numeric: tabular-nums; }

/* ----- Team cell ----- */
.data-cell--team {
  gap: 10px;
  font-weight: 700;
}
.data-cell__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* ----- Fixture cell — two teams stacked (home over away), each a link ----- */
.data-cell--fixture {
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 4px;
  overflow: visible;
}
.dl-team {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: var(--on-surface-variant);
  font-weight: 600;
  text-decoration: none;
}
.dl-team:hover { color: var(--primary-container); }
/* Normalise crest size AND alignment. Source crests have different CANVAS aspect
   ratios — most are 150×150 but some (e.g. Valencia 240×150, badge centred with
   equal transparent padding both sides) are wide. The shared crest box fits by
   WIDTH (object-fit:contain on a 1:1 box), so a wide canvas renders its badge
   short/small. Here every crest is a fixed SQUARE box (uniform footprint → the
   team name starts at the same x on every row) and the image is sized by HEIGHT
   then centred and clipped to the box: the badge fills the box height (uniform
   size) and the wide canvas's symmetric transparent padding is trimmed equally on
   both sides, so the badge stays centred on the same centreline as every other —
   nothing looks shifted. The badge is narrower than the box, so centring never
   crops real artwork. Scoped to .dl-team so the shared primitive (and badge
   emblems elsewhere) is untouched. */
.dl-team .tactical-crest {
  width: var(--_height) !important;     /* square footprint = box height */
  aspect-ratio: 1 / 1 !important;
  overflow: hidden !important;
  justify-content: center !important;
}
.dl-team .tactical-crest__img {
  height: 100% !important;
  width: auto !important;
  max-width: none !important;
  object-fit: contain !important;
  object-position: center !important;
}
.dl-team__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
/* The side the player actually played for, emphasised. */
.dl-team--mine {
  color: var(--on-surface);
  font-weight: 800;
}

/* ----- Inline expand toggle (replaces whole-row click-to-expand) ----- */
.dl-expand-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--on-surface-variant);
  font-size: 0.75rem;
  line-height: 1;
  cursor: pointer;
  border-radius: var(--te-radius-full);
  transition: background 140ms ease, color 140ms ease, transform 140ms ease;
}
.dl-expand-btn:hover { background: var(--surface-container-high); color: var(--on-surface); }
.dl-expand-btn.is-open { transform: rotate(180deg); color: var(--on-surface); }

/* ----- Player cell (avatar + name + meta) ----- */
.data-cell--player {
  gap: 10px;
}
.data-cell__player-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.data-cell__meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--on-surface-variant);
  letter-spacing: 0.02em;
}
.data-cell__flag {
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  padding: 1px 4px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--on-surface) 6%, transparent);
  color: var(--on-surface-variant);
  letter-spacing: 0.04em;
}

/* ----- Position pill ----- */
.data-cell__position {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 18px;
  padding: 0 6px;
  font-size: 0.625rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-radius: var(--te-radius-sm);
  background: color-mix(in srgb, var(--on-surface) 8%, transparent);
  color: var(--on-surface-variant);
}
.data-cell__position--gk  { background: color-mix(in srgb, var(--te-caution) 18%, transparent); color: var(--te-caution); }
.data-cell__position--def { background: color-mix(in srgb, var(--primary-container) 14%, transparent); color: var(--primary-container); }
.data-cell__position--mid { background: color-mix(in srgb, var(--te-win) 14%, transparent); color: var(--te-win); }
.data-cell__position--fwd { background: color-mix(in srgb, var(--error) 14%, transparent); color: var(--error); }

/* ----- Score pill (W/D/L outcome — used by standings live SCR column) -----
   Both vocabularies are styled: `.data-cell__score-pill--*` for new templates,
   and `.standings-mc-score--*` because live_standings.js writes those classes
   into the DOM. Keep the rules unified so there's a single source of truth. */
.data-cell--score { justify-content: center; }
.data-cell__score-pill,
.standings-mc-score {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  padding: 3px 8px;
  border-radius: var(--te-radius-sm);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  background: var(--surface-container-high);
  color: var(--on-surface);
}
.data-cell__score-pill--win,  .standings-mc-score--win  { background: var(--live-score-pill-win-bg);  color: var(--live-score-pill-win-fg); }
.data-cell__score-pill--lose, .standings-mc-score--lose { background: var(--live-score-pill-lose-bg); color: var(--live-score-pill-lose-fg); }
.data-cell__score-pill--draw, .standings-mc-score--draw { background: var(--live-score-pill-draw-bg); color: var(--live-score-pill-draw-fg); }
.data-cell__score-pill--empty { color: var(--on-surface-variant); background: transparent; font-weight: 500; }

/* Standings score-pill wrappers (JS writes these — no-underline anchor + dash placeholder) */
.standings-mc-score-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: inherit;
  text-decoration: none;
}
.standings-mc-score-link:hover { color: inherit; }
.standings-mc-score-empty {
  color: var(--on-surface-variant);
  font-weight: 500;
  opacity: 0.5;
}
.standings-mc-score-sep {
  display: inline-block;
  width: 4px;
}

/* ----- Form cell (W/D/L last-5) — uses existing .form-badge classes -----
   overflow: visible overrides the .data-cell base so .form-badge--fixture-tip
   tooltips aren't clipped at the cell boundary. Pills are flush-right so a
   short row (<5 pills) hugs the column's right edge, lining up with the
   right-aligned FORM header instead of drifting left under max-content. */
.data-cell--form { justify-content: flex-end; text-align: right; overflow: visible; }

/* ----- Tier pill (Power Rankings: Elite / Strong / Average / Below) ----- */
.data-cell__tier-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 8px;
  border-radius: var(--te-radius-full);
  font-size: 0.625rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  background: color-mix(in srgb, var(--on-surface) 7%, transparent);
  color: var(--on-surface-variant);
}
.data-cell__tier-pill--elite   { background: color-mix(in srgb, var(--te-win) 16%, transparent);          color: var(--te-win); }
.data-cell__tier-pill--strong  { background: color-mix(in srgb, var(--primary-container) 14%, transparent); color: var(--primary-container); }
.data-cell__tier-pill--average { background: color-mix(in srgb, var(--on-surface) 8%, transparent);         color: var(--on-surface-variant); }
.data-cell__tier-pill--below   { background: color-mix(in srgb, var(--error) 14%, transparent);             color: var(--error); }

/* ----- Momentum (Power Rankings: 🔥 / ❄️) ----- */
.data-cell__momentum {
  display: inline-flex;
  align-items: center;
  font-size: 0.875rem;
  line-height: 1;
}
.data-cell__momentum--hot  { color: var(--error); }
.data-cell__momentum--cold { color: var(--primary-container); }

/* ----- Confidence dot ----- */
.data-cell__confidence-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--on-surface) 20%, transparent);
}
.data-cell__confidence-dot--high { background: var(--te-win); }
.data-cell__confidence-dot--med  { background: var(--te-caution); }
.data-cell__confidence-dot--low  { background: color-mix(in srgb, var(--on-surface) 22%, transparent); }
.data-cell__confidence-label {
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--on-surface-variant);
}

/* ----- Sortable header ----- */
.data-cell--sortable {
  cursor: pointer;
  user-select: none;
  transition: color 140ms ease;
}
.data-cell--sortable:hover { color: var(--on-surface); }
.data-cell--sortable.is-sorted { color: var(--primary-container); }
.data-cell__sort-arrow {
  display: inline-block;
  margin-left: 4px;
  font-size: 0.6875rem;
  opacity: 0.5;
  transition: opacity 140ms ease;
}
.data-cell--sortable.is-sorted .data-cell__sort-arrow { opacity: 1; }

/* ----- Section divider row (standings transition between qualification zones) ----- */
.data-row--divider {
  padding: 4px 14px;
  background: transparent;
  cursor: default;
}
.data-row--divider:hover { background: transparent; }
.data-list > .data-row--divider:nth-child(even) { background: transparent; }
.data-row--divider .data-cell {
  grid-column: 1 / -1;
  justify-content: center;
  color: var(--on-surface-variant);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
}

/* Expandable row — summary row toggles a full-width detail panel beneath its cells.
   The panel is a grid child spanning every column so it stacks under the summary. */
.data-row--expandable { cursor: pointer; }
.data-list__detail {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
  margin-top: 10px;
  padding: 12px;
  background: var(--surface-container-low);
  border-radius: var(--te-radius-sm);
}
.data-list__detail[hidden] { display: none; }
.data-list__detail-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.data-list__detail-label {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--on-surface-variant);
}
.data-list__detail-value {
  font-size: 0.875rem;
  font-weight: 800;
  color: var(--on-surface);
}

/* Missing-stat hyphen — single value, inside an otherwise-populated stat cell. */
.data-cell__empty {
  color: var(--on-surface-variant);
  font-weight: 500;
  opacity: 0.5;
}

/* Qualification zone tints (standings) — left-edge accent via inset box-shadow,
   per the "No-Line" rule. Tokens live in theme.css:177-220. */
.data-row--zone-cl                 { background: var(--standings-zone-cl-bg);                box-shadow: inset 3px 0 0 var(--standings-zone-cl-bar); }
.data-row--zone-cl-playoff         { background: var(--standings-zone-cl-playoff-bg);        box-shadow: inset 3px 0 0 var(--standings-zone-cl-playoff-bar); }
.data-row--zone-cl-eliminated      { background: var(--standings-zone-cl-eliminated-bg);     box-shadow: inset 3px 0 0 var(--standings-zone-cl-eliminated-bar); }
.data-row--zone-el                 { background: var(--standings-zone-el-bg);                box-shadow: inset 3px 0 0 var(--standings-zone-el-bar); }
.data-row--zone-ecl                { background: var(--standings-zone-ecl-bg);               box-shadow: inset 3px 0 0 var(--standings-zone-ecl-bar); }
.data-row--zone-relegation         { background: var(--standings-zone-relegation-bg);        box-shadow: inset 3px 0 0 var(--standings-zone-relegation-bar); }
.data-row--zone-playoff            { background: var(--standings-zone-playoff-bg);           box-shadow: inset 3px 0 0 var(--standings-zone-playoff-bar); }
.data-row--zone-promoted           { background: var(--standings-zone-promoted-bg);          box-shadow: inset 3px 0 0 var(--standings-zone-promoted-bar); }
.data-row--zone-promoted-playoff   { background: var(--standings-zone-promoted-playoff-bg);  box-shadow: inset 3px 0 0 var(--standings-zone-promoted-playoff-bar); }

/* Zone rows keep their tint even on even-stripe and hover */
.data-list > .data-row--zone-cl:nth-child(even),
.data-list > .data-row--zone-cl:hover                { background: var(--standings-zone-cl-bg); }
.data-list > .data-row--zone-cl-playoff:nth-child(even),
.data-list > .data-row--zone-cl-playoff:hover        { background: var(--standings-zone-cl-playoff-bg); }
.data-list > .data-row--zone-cl-eliminated:nth-child(even),
.data-list > .data-row--zone-cl-eliminated:hover     { background: var(--standings-zone-cl-eliminated-bg); }
.data-list > .data-row--zone-el:nth-child(even),
.data-list > .data-row--zone-el:hover                { background: var(--standings-zone-el-bg); }
.data-list > .data-row--zone-ecl:nth-child(even),
.data-list > .data-row--zone-ecl:hover               { background: var(--standings-zone-ecl-bg); }
.data-list > .data-row--zone-relegation:nth-child(even),
.data-list > .data-row--zone-relegation:hover        { background: var(--standings-zone-relegation-bg); }
.data-list > .data-row--zone-playoff:nth-child(even),
.data-list > .data-row--zone-playoff:hover           { background: var(--standings-zone-playoff-bg); }
.data-list > .data-row--zone-promoted:nth-child(even),
.data-list > .data-row--zone-promoted:hover          { background: var(--standings-zone-promoted-bg); }
.data-list > .data-row--zone-promoted-playoff:nth-child(even),
.data-list > .data-row--zone-promoted-playoff:hover  { background: var(--standings-zone-promoted-playoff-bg); }

/* ----- Live provisional pulse (standings while a match is in progress) -----
   Both classes styled: `.data-row--live-provisional` for new templates and
   `.standings-row--live-provisional` is set on rows server-side when a team
   has a live provisional rank. */
.data-row--live-provisional,
.standings-row--live-provisional {
  animation: data-row-live-pulse 2.2s ease-in-out infinite;
}
@keyframes data-row-live-pulse {
  0%, 100% { background: var(--te-live-provisional-bg); }
  50%      { background: var(--te-live-provisional-bg-strong); }
}

/* Highlight-row: the focus team in a standings list (server-set via ?highlight=
   deep links or the team page). One row-level gradient strip with rounded ends —
   no per-cell borders (the row is align-items:center, so per-cell top/bottom lines
   staggered). The gradient's translucent left end keeps any zone tint visible. */
.data-list .data-row.highlight-row {
  border-radius: 10px;
  background-image: var(--standings-focus-active-gradient);
}
.data-list .data-row.highlight-row .data-cell:nth-child(2) {
  font-weight: 800;
}

/* Match-team focus: the two playing teams in a match-page standings list.
   Unified with .highlight-row — same row-level gradient strip. */
.data-list .data-row.standings-mc-playing {
  border-radius: 10px;
  background-image: var(--standings-focus-active-gradient);
}
.data-list .data-row.standings-mc-playing .data-cell:nth-child(2) .standings-mc-team-name {
  color: var(--on-surface);
  font-weight: 900;
  letter-spacing: -0.01em;
}

/* ----- Sticky-left first cell (match player stats) ----- */
.data-row .data-cell.is-sticky-left {
  position: sticky;
  left: 0;
  z-index: 1;
  background: inherit;
}
.data-row--header .data-cell.is-sticky-left { z-index: 3; }

/* ----- Variant: "rankings" (Power Rankings) — visual parity helpers ----- */
.data-list--rankings .data-row { padding: 14px 14px; }

/* ----- Variant: "standings" — denser rows for full league table -----
   min-width: 100% keeps the table filling its wrap on desktop (1fr Team column
   absorbs slack). width: max-content lets the grid grow to its intrinsic row
   width on narrow viewports so .data-list-wrap's overflow-x: auto engages
   instead of .data-list { overflow: hidden } clipping the rightmost cells.

   Grid tracks (FORM = 128px = 5 × 22px pill + 4 × 4px gap + 2px headroom).
   The SCR track is only added in Live mode: in Official mode the SCR cells
   are display:none (match_center.css), so leaving its 56px track in the grid
   template would auto-flow trailing cells one slot left — pushing FORM into
   the 40px PTS track and overflowing pills leftward over PTS/GD. */
.data-list--standings .data-row { padding: 10px 12px; }
.data-list--standings { min-width: 100%; width: max-content; }

.standings-live-root[data-mode="live"] .data-list--standings:not(.data-list--compact) {
  --data-list-cols: 32px 1fr 56px 36px 36px 36px 36px 36px 36px 40px 40px 128px !important;
}
.standings-live-root[data-mode="live"] .data-list--standings.data-list--compact {
  --data-list-cols: 32px 1fr 56px 40px 128px !important;
}

/* ----- Variant: "stats" — for narrow stat cells, center alignment -----
   min-width: 100% fills the wrap on wide viewports; width: max-content lets the
   grid grow to its intrinsic row width when the stat columns exceed the wrap, so
   .data-list-wrap's overflow-x: auto engages instead of .data-list's
   overflow: hidden clipping the rightmost stat cells. */
.data-list--stats { min-width: 100%; width: max-content; }
.data-list--stats .data-cell--stat { justify-content: center; }

/* ----- Pagination (moved from .fs-pagination / .fs-page-btn) ----- */
.data-list-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 12px 14px;
  background: var(--surface-container-low);
  border-radius: 0 0 var(--te-radius-md) var(--te-radius-md);
}
.data-list-pagination__info {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--on-surface-variant);
}
.data-list-pagination__controls {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.data-list-page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  border-radius: var(--te-radius-sm);
  background: transparent;
  border: none;
  color: var(--on-surface-variant);
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
}
.data-list-page-btn:hover { background: var(--surface-container-high); color: var(--on-surface); }
.data-list-page-btn.is-active { background: var(--primary-container); color: var(--surface-lowest); }
.data-list-page-btn:disabled { opacity: 0.4; cursor: default; }
.data-list-page-ellipsis {
  padding: 0 4px;
  color: var(--on-surface-variant);
  font-weight: 700;
}

/* ----- Responsive helpers: drop optional columns via grid-template swap ----- */
@media (max-width: 768px) {
  .data-row {
    grid-template-columns: var(--data-list-cols-md, var(--data-list-cols, 1fr));
    padding: 10px 12px;
    gap: 6px;
  }
  .data-cell {
    font-size: 0.75rem;
  }
}

@media (max-width: 480px) {
  .data-row {
    grid-template-columns: var(--data-list-cols-sm, var(--data-list-cols-md, var(--data-list-cols, 1fr)));
  }
}

/* Current-user highlight on a ranking row — accent rail, composes with rank tints */
.data-row--you { box-shadow: inset 3px 0 0 var(--primary-container); }

/* Kick recent-form strip: a row of result-tier dots (newest first) */
.kick-form { display: inline-flex; gap: 4px; align-items: center; }
.kick-form-dot {
  width: 9px;
  height: 9px;
  border-radius: var(--te-radius-full);
  background: var(--surface-container-high);
}
.kick-form-dot--exact { background: var(--te-win); }
.kick-form-dot--goal_diff { background: var(--te-caution); }
.kick-form-dot--winner { background: var(--primary-container); }
.kick-form-dot--wrong { background: var(--te-loss); }