/* Stat Leaders dashboard (templates/standings/season_stat_leaders.html) -
   page-specific classes layered on static/css/base.css's shared .hl-*
   components, same pattern as league_home.css/player_profile.css. Loads
   sitewide via templates/base/league_public_base.html (every public
   page's CSS loads unconditionally there - see that file's own comment),
   so templates/awards/league_awards.html's Double-Double/Triple-Double
   leaders section also reaches into this file for its own (unrelated,
   still a plain two-card grid, never redesigned) `.stl-card`/`.stl-grid`/
   `.stl-list` styles below - don't remove those thinking they're dead
   just because season_stat_leaders.html itself stopped using them.

   Design history (season_stat_leaders.html only): originally a 6-card
   grid, one bordered card per category with a colored left accent +
   colored title (direct user feedback: reads as a generic "AI stat card"
   grid). Replaced via a reviewed "top 20 designs" artifact gallery with a
   single tab-switched panel: one .stl-panel, category becomes a tap
   instead of a 6-way visual competition, and no colored-border-per-
   category treatment survives into the merged design - the podium's
   medal-tier colors (gold/silver/bronze) are the only per-item color
   left, and they signal RANK, not category. */

/* ─── Shared with templates/awards/league_awards.html's Double-Double /
   Triple-Double leaders cards - NOT part of season_stat_leaders.html's
   own redesign below, see the file header comment above. Two fixed
   cards, never six, so the "reads as a generic card grid" complaint that
   drove the tab-switcher redesign doesn't apply here the same way; left
   as its original card treatment rather than folded into a tab switcher
   built for a 6-way, not 2-way, choice. ──────────────────────────────── */
/* Same column sizing as Showcase's League Management member grid
   (.ls-member-grid in league_showcase.css) via the shared --hl-tile-min
   token, so the cards match in width across both pages. */
.stl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--hl-tile-min), 1fr));
  gap: var(--space-4);
}

.stl-card {
  padding: var(--space-4);
}

.stl-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
}

.stl-card-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 14px;
}

.stl-card-icon-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: rgba(179, 169, 156, 0.16);
}

.stl-card-icon {
  flex-shrink: 0;
}

.stl-list {
  display: flex;
  flex-direction: column;
}

.stl-list .stl-row {
  margin: 0 -6px;
  border-radius: 6px;
  padding: 5px 6px;
}

.stl-rank[data-tier="gold"] { background: rgba(245, 195, 75, 0.18); color: var(--gold); }
.stl-rank[data-tier="silver"] { background: rgba(179, 169, 156, 0.22); color: var(--text-secondary); }
.stl-rank[data-tier="bronze"] { background: rgba(156, 67, 16, 0.28); color: var(--orange-deep); }

/* .stl-header-row's own default is align-items: baseline, which reads
   oddly here since the left side is now a 3-line block (eyebrow/h1/
   updated caption) instead of a bare h1 - center the "Standings ›" link
   against that whole block. Scoped to the row layout only (min-width:481px,
   just above base.css's own 480px column-layout breakpoint) - overriding
   align-items at 480px and below would fight that breakpoint's
   align-items: stretch and center the link on its own line instead of
   leaving it flush left with the rest of the stacked mobile content. */
@media (min-width: 481px) {
  .stl-header-row {
    align-items: center;
  }
}

/* ─── Trust signal wrapper - just positions core/_live_updated_badge.html
   under the H1 (see standings/season_standings.html for the same badge
   used inline in a header row instead). ──────────────────────────────── */
.stl-updated {
  margin: 4px 0 0;
}

/* ─── Category tabs ──────────────────────────────────────────────────── */
/* Individually-bordered pills (not one shared background bar) - the same
   visual language as base.css's .hl-filter-tab, just <button>s driving a
   client-side pane switch (static/js/stat_leaders.js) instead of <a>s
   driving a page navigation. flex-wrap (not horizontal scroll) so all 6
   categories stay visible/discoverable at once even on a narrow phone,
   rather than hiding some off-screen behind a swipe a visitor has to
   discover first. */
/* Row pairing the real tab pills with the Hyped Leaderboards link below -
   space-between keeps the link flush right on one line with the tabs
   until it wraps to its own line at narrow widths, same flex-wrap
   fallback .stl-tabs already relies on for the tabs themselves. */
.stl-tabs-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: var(--space-4);
}

.stl-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* Styled as a pill to match .stl-tab (same row, same visual language) but
   an <a> driving a real navigation, not a role="tab" pane switch - the
   fire icon + filled/accent treatment (vs. .stl-tab's plain outline)
   signals "leaves this panel" rather than "another view of this data". */
.stl-leaderboards-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: rgba(var(--primary-rgb), 0.14);
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--primary);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.stl-leaderboards-link:hover {
  background: rgba(var(--primary-rgb), 0.22);
  border-color: var(--primary);
}

.stl-leaderboards-link .icon {
  flex-shrink: 0;
}

.stl-tab {
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: transparent;
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}

.stl-tab:hover {
  border-color: var(--primary);
  color: var(--text);
}

.stl-tab.is-active {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--on-primary);
}

/* ─── Panel + panes ──────────────────────────────────────────────────── */
.stl-panel {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
}

.stl-pane {
  display: none;
  padding: var(--space-4);
}

.stl-pane.is-active {
  display: block;
}

.stl-pane .hl-empty {
  padding: var(--space-6) var(--space-4);
}

.stl-pane-head {
  display: flex;
  justify-content: flex-end;
  margin-bottom: var(--space-3);
}

/* Share button here is core/_share_button.html's shared default
   (static/css/share.css's merged-pill .hl-share-* rules) unscoped/
   unmodified - this pane header used to carry its own copy of that exact
   styling before the merged pill became the shared default, see that
   file's own comment for why. */

/* ─── Podium (top 3) ─────────────────────────────────────────────────── */
.stl-podium {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  align-items: end;
  margin-bottom: var(--space-3);
}

/* User request: "add animations to the podium" - each step pops in with
   a short rise+scale, staggered by VISUAL left-to-right position
   (silver/gold/bronze - the CSS `order` values above, not DOM order,
   which is rank order gold/silver/bronze) so the podium visibly
   assembles left-to-right instead of "middle, then left, then right".
   Scoped under .is-active (not a page-load-only reveal) so this replays
   every time a tab switch brings a pane back - the pane's own
   display:none -> block toggle re-triggers the animation each time, same
   mechanism static/js/stat_leaders.js's tab switching already relies on
   for .stl-pane itself. */
@media (prefers-reduced-motion: no-preference) {
  .stl-pane.is-active .stl-step {
    opacity: 0;
    animation: stl-step-in 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }
  .stl-pane.is-active .stl-step[data-tier="silver"] { animation-delay: 0s; }
  .stl-pane.is-active .stl-step[data-tier="gold"] { animation-delay: 0.08s; }
  .stl-pane.is-active .stl-step[data-tier="bronze"] { animation-delay: 0.16s; }
}

@keyframes stl-step-in {
  from { opacity: 0; transform: translateY(12px) scale(0.96); }
  to { opacity: 1; transform: none; }
}

/* Nested one level deeper than .stl-panel's own --bg-card surface, which
   has no lighter token of its own to reach for - a faint white wash
   instead of a new background token, same trick used for hover states
   elsewhere on the site (color-mix keeps it defined in one place). */
.stl-step {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  background: color-mix(in srgb, var(--text) 4%, var(--bg-card));
  border: 1px solid var(--border);
  padding: var(--space-3) var(--space-2);
  text-align: center;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.stl-step:hover {
  transform: translateY(-2px);
  border-color: var(--border-strong);
  box-shadow: 0 10px 20px -14px rgba(0, 0, 0, 0.5);
}

.stl-step[data-tier="gold"] {
  order: 2;
  padding-top: var(--space-4);
}

/* Quiet warmth behind the #1 step only - the same "one accent, not a
   border" corner-glow language already used on League Home's award/
   season cards, not a new pattern just for this page. */
.stl-step[data-tier="gold"]::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 90% at 50% 0%, rgba(var(--primary-rgb), 0.16), transparent 65%);
  pointer-events: none;
}

.stl-step[data-tier="silver"] { order: 1; }
.stl-step[data-tier="bronze"] { order: 3; }

.stl-step-icon-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin: 0 auto 8px;
  border-radius: 50%;
}

.stl-step[data-tier="gold"] .stl-step-icon-chip { background: rgba(245, 195, 75, 0.18); color: var(--gold); }
.stl-step[data-tier="silver"] .stl-step-icon-chip { background: rgba(179, 169, 156, 0.22); color: var(--text-secondary); }
.stl-step[data-tier="bronze"] .stl-step-icon-chip { background: rgba(156, 67, 16, 0.28); color: var(--orange-deep); }

.stl-step[data-tier="gold"] .stl-step-icon-chip { width: 36px; height: 36px; }

/* Fixed-height reservation (user request: podium steps weren't the same
   height after switching categories - a short 1-line name in one
   category vs. a wrapping 2-line name in another made the SAME tier's
   step a different height depending which category tab was active).
   min-height always reserves 2 lines' worth of space regardless of the
   actual name length, and -webkit-line-clamp caps a genuinely long name
   at 2 lines with an ellipsis instead of growing past that reservation -
   the podium's shape is now the same across every category, not just
   internally consistent within any one of them. */
.stl-step-name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  min-height: calc(1.25em * 2);
  font-weight: 700;
  font-size: 12.5px;
  line-height: 1.25;
  color: var(--text);
  text-decoration: none;
}

.stl-step-name:hover {
  color: var(--primary);
}

/* Stretched link over the WHOLE step (not just the name text) - matches
   .stl-row's own full-row click target below instead of only the name
   line being clickable. .stl-step is the positioned ancestor this
   resolves against (position: relative above), since .stl-step-name
   itself deliberately has no position of its own to intercept it.

   z-index: 1 is required, not decorative - .stl-step-icon-chip/-team/
   -value all carry their own `position: relative` (needed to paint
   above the gold step's ::before corner-glow, itself position:absolute -
   see that rule below) which makes them "positioned" too. Positioned
   siblings paint in DOM order ABOVE this ::after regardless of that
   order being before or after it, since browsers paint positioned
   content as a whole layer above non-positioned content - without an
   explicit stacking order between positioned siblings, .stl-step-team/
   -value (later in the DOM) would sit on top of this overlay and
   silently swallow clicks anywhere except directly over the name text.
   Confirmed by testing: clicking the team-name label alone didn't
   navigate until this was added. */
.stl-step-name::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.stl-step-team {
  position: relative;
  display: block;
  font-size: 10.5px;
  color: var(--text-muted);
  margin: 2px 0 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stl-step-value {
  position: relative;
  display: block;
  font-family: var(--font-mono);
  font-weight: 800;
  font-size: 18px;
  color: var(--text);
}

.stl-step[data-tier="gold"] .stl-step-value {
  font-size: 24px;
  color: var(--primary);
}

/* Per-game average (PPG/RPG/APG/SPG/BPG - user request), shown under the
   season total rather than replacing it: the podium/list stay ranked by
   total, this is a second, smaller line of context. */
.stl-step-avg {
  position: relative;
  display: block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-muted);
  margin-top: 1px;
}

/* ─── Rest of the board (ranks 4+, or the whole list under 3 leaders) ─── */
.stl-rest {
  display: flex;
  flex-direction: column;
}

.stl-podium + .stl-rest {
  border-top: 1px solid var(--border-strong);
  padding-top: var(--space-2);
}

/* User request: "add animations... to the list" - each row slides in
   from the left, staggered by render order (--stl-ri, set inline per row
   - see templates/standings/_stat_leader_row.html's own comment). Starts
   after the podium's own stagger has mostly landed (0.2s base offset)
   so the two don't visually race each other. Same is-active-scoped
   replay-on-tab-switch reasoning as .stl-step's animation above. */
@media (prefers-reduced-motion: no-preference) {
  .stl-pane.is-active .stl-row {
    opacity: 0;
    animation: stl-row-in 0.3s calc(0.2s + var(--stl-ri, 0) * 0.035s) ease-out forwards;
  }
}

@keyframes stl-row-in {
  from { opacity: 0; transform: translateX(-6px); }
  to { opacity: 1; transform: none; }
}

.stl-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 7px 4px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.stl-row:last-child {
  border-bottom: none;
}

.stl-row:hover,
.stl-row:focus-within {
  background: var(--bg-raised);
}

/* Stretched link - the player name link (.stl-name a) is the only
   interactive thing in the row; rank/team/value were all dead space that
   still lit up on hover (same "hover implies clickable" gap
   static/css/players.css and base.css's .hl-table--row-link fixed
   elsewhere) despite this not being a <table> row that utility targets. */
.stl-name a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.stl-rank {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
  background: var(--bg-raised);
}

/* ─── Movement indicator (view-computed `row.trend`/`row.trend_amount`,
   backed by StatLeader.previous_rank - see apps.standings.views.
   season_stat_leaders_view) - the one thing on this page that answers
   "did anything change since I last checked" instead of just showing a
   snapshot, so it earns its own small flag of color rather than reusing
   the neutral --stl-rank treatment. "flat" (held rank) renders nothing -
   see the template's own comment for why. */
.stl-trend {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 2px 5px;
  border-radius: 5px;
  white-space: nowrap;
}

.stl-trend--up { background: rgba(182, 226, 74, 0.16); color: var(--lime); }
.stl-trend--down { background: rgba(255, 90, 77, 0.14); color: var(--alert); }
.stl-trend--new { background: rgba(var(--primary-rgb), 0.16); color: var(--primary); }

.stl-name {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.stl-name a {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stl-row:hover .stl-name a {
  color: var(--primary);
}

.stl-team {
  font-size: 10px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stl-value-wrap {
  flex-shrink: 0;
  min-width: 34px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.stl-value {
  text-align: right;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 13px;
  color: var(--text-secondary);
}

/* Same per-game average as .stl-step-avg above, for the ranks-4+ list. */
.stl-avg {
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--text-muted);
}

@media (max-width: 420px) {
  .stl-step-name { font-size: 11.5px; }
  .stl-step[data-tier="gold"] .stl-step-value { font-size: 20px; }
}

/* ─── Game Day Leaders (templates/standings/season_leaders_experimental.html,
   Commissioner-only experiment) - day picker + per-day breakdown, layered on
   the .stl-* leaderboard above. ─────────────────────────────────────────── */
.stl-x-days {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-3) 0;
}

.stl-x-day {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(179, 169, 156, 0.3);
  font-size: 13px;
  cursor: pointer;
}

.stl-x-day.is-selected {
  border-color: var(--primary);
  background: rgba(var(--primary-rgb), 0.14);
}

.stl-x-apply { margin-left: var(--space-2); }

.stl-x-breakdown {
  display: inline-flex;
  gap: 8px;
  font-size: 12px;
  opacity: 0.75;
  font-variant-numeric: tabular-nums;
}

.stl-x-breakdown span + span::before {
  content: "·";
  margin-right: 8px;
  opacity: 0.6;
}

.stl-step .stl-x-breakdown { justify-content: center; margin-top: 2px; }