/* KPI stat strip: eyebrows, tile groups, .dash-tile/.ps-tile and the collapsible kpiGroup. */
/* KPI stat strip — UNSCOPED, used by leaderboard/training/tournaments/topup and every FilterRail head. */
.dash-eyebrow,
.tn-eyebrow,
.hq-eyebrow,
.tr-eyebrow {
  font-size: 0.68rem; font-weight: 600;
  color: var(--bronze-2); font-family: var(--font-sans);
  text-transform: uppercase; letter-spacing: 0.16em;
}

/* One track PER GROUP, not a fixed pair: auto-fit collapses the empty track, so a screen with a
   single KPI group fills the row instead of sitting at half width with a hole beside it. */
.dash-tile-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}
.dash-group-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-bottom: 12px;
}
.dash-tiles,
.gameover-player-cards,
.sub-fs-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* THE 4-up KPI container. A selector LIST, not a copy per screen: each entry keeps its own
   ancestor so no specificity moves, and the four screens can no longer disagree about a track
   count nothing checks. Its 900px stack is directly below. */
.leaderboard-screen .lb-kpi-tiles,
.training-screen .tl-kpi-tiles,
.tournaments-screen .tn-kpi-tiles,
.companions-screen .cp-kpi-tiles { grid-template-columns: repeat(4, 1fr); }

/* The OTHER convention, stated once: many small counts, sized by content rather than counted. */
.fb-kpi-tiles,
.ra-kpi-tiles { grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); }

@media (max-width: 900px) {
  .leaderboard-screen .lb-kpi-tiles,
  .training-screen .tl-kpi-tiles,
  .tournaments-screen .tn-kpi-tiles,
  .companions-screen .cp-kpi-tiles { grid-template-columns: repeat(2, 1fr); }
}
/* A KPI group with MANY small counts (per-category, per-topic): auto-fit rather than a
   hand-counted column count, so adding a category needs no CSS. */
.nl-tiles-topics { grid-template-columns: repeat(auto-fit, minmax(116px, 1fr)); }

/* THE KPI tile, matched to Headquarters' .ps-tile (headquarters.css) so every KPI row in the
   app reads the same: centred, 14px 10px, a 0.7rem/0.06em label over a display-face value.
   HQ keeps its own class because .prof-stats is a fixed 6-up grid, not this auto-fit flow. */
.dash-tile,
.ps-tile {
  padding: 14px 10px;
  background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius-m);
  min-width: 0;
  text-align: center;
}
.dash-tile-top { display: flex; align-items: center; justify-content: center; gap: 8px; }
.dash-tile-label {
  font-size: 0.7rem; color: var(--ink-3);
  text-transform: uppercase; letter-spacing: 0.06em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* The display serif defaults to OLD-STYLE figures, so 4 and 7 drop below the baseline and 1
   sits at x-height. Every KPI tile in the app reads through this one rule. */
.dash-tile-value {
  margin-top: 6px;
  font-family: var(--font-display); font-size: 1.7rem; line-height: 1.1;
  color: var(--ink);
  font-variant-numeric: lining-nums tabular-nums;
  white-space: nowrap;
}
.dash-tile-spark { margin-top: 8px; height: 26px; }

/* Not admin-only (companions uses it); .dash-panel is the admin dashboard's name for it. */
.dash-panel,
.dash-group {
  background: transparent;
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-1);
  padding: 14px 16px;
}
/* The collapsible group keeps its frame; the plain panel does not. Same specificity, so this
   must stay AFTER the shared block to win. */
.dash-group { border: 1px solid var(--border); }

/* The collapsible KPI group (DataCard.kpiGroup) — UNSCOPED, joined by companions, newsletters,
   leaderboard and tournaments. Each screen that scoped a copy made the next one copy it again.
   Head is a toggle at ≤640 only; wider viewports always show the tiles. */
.nl-kpi-head {
  width: 100%; padding: 0; background: none; border: 0; font: inherit; text-align: left;
}
/* Focusable at every width even though it only toggles at or below the tablet breakpoint. */
.nl-kpi-head:focus-visible {
  outline: 2px solid var(--bronze-2); outline-offset: 3px; border-radius: var(--radius-s);
}
.nl-kpi-caret { display: none; }
/* A group's footnote (kpiGroup's noteHtml), pinned to the head row's right — the slot the
   caret leaves empty on desktop. `top` matches .dash-group's padding so it sits on the
   title's line; it is out of flow, so it cannot push the tiles down. */
.nl-kpi-group { position: relative; }
.nl-kpi-note {
  position: absolute; top: 14px; right: 16px; margin: 0;
  font-size: 0.8rem; color: var(--ink-3);
}
@media (max-width: 1024px) {
  /* The caret owns that corner here, so the note returns to flow under the tiles — where the
     collapse rule below hides it with them. */
  .nl-kpi-note { position: static; margin: 10px 0 0; }
}
/* Tablet and phone: the tiles are a summary, and the list is what the visitor came for — so
   the group collapses. Desktop has the room and keeps them open with no caret. */
@media (max-width: 1024px) {
  .nl-kpi-head { cursor: pointer; }
  .nl-kpi-caret { display: inline-block; }
  .nl-kpi-group.is-open .nl-kpi-caret { transform: rotate(90deg); color: var(--bronze-2); }
  .nl-kpi-group:not(.is-open) .dash-tiles,
  .nl-kpi-group:not(.is-open) .nl-kpi-note { display: none; }
  .nl-kpi-group:not(.is-open) .nl-kpi-head { margin-bottom: 0; }
}
@media (max-width: 640px) {
  /* Two tiles per row — a phone has the width for a pair and a single column wastes it. Three
     classes deliberately: it must out-rank both a screen's own auto-fit rule and the shared
     .nl-tiles-topics count above — at one class, which wins is decided by stylesheet link order. */
  .nl-kpis .nl-kpi-group .dash-tiles { grid-template-columns: repeat(2, 1fr); }
}