/* Public team analytics page (templates/teams/team_analytics.html) -
   page-specific classes layered on static/css/base.css's shared .hl-*
   components (.hl-stat-grid/.hl-stat-tile/.hl-table), same pattern as
   game_detail.css/standings.css. Covers the "By player" table's
   phone-width treatment: it deliberately stays a real, horizontally-
   scrollable table (like the box score/standings tables) instead of
   switching to base.css's stacked-card layout - an 8-column stat line
   reads better as a table you swipe through than as 8 stacked
   label:value lines per player, and a sticky Player column keeps the
   name in view while everything else (including # and Position - user
   request: only the name stays put) scrolls past. */

/* ─── Scroll hint pill - same shape/behavior as standings.css's
   .std-scroll-hint and game_detail.css's .gd-scroll-hint (all three
   driven by the one shared static/js/scroll-table-hint.js, which only
   shows this when the table wrapper actually overflows - a long player
   name can force real overflow above 640px, a short one may not overflow
   even below it, so a fixed breakpoint would guess wrong either way). */
.ta-scroll-hint {
  display: none;
  align-items: center;
  gap: 6px;
  width: fit-content;
  margin: 0 0 var(--space-3);
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-raised);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
}

.ta-scroll-hint[data-visible] {
  display: inline-flex;
}

/* No-JS fallback: same 640px breakpoint base.css's .hl-table--stack uses
   for its own responsive switch. */
.no-js .ta-scroll-hint {
  display: none;
}

@media (max-width: 640px) {
  .no-js .ta-scroll-hint {
    display: inline-flex;
  }
}

/* ─── Column alignment - every header lines up with its own column's
   values (user request), all of them centered (a second, later user
   request - this table used to right-align its numeric columns, matching
   .hl-table .num elsewhere on the site, until asked to center instead).
   Every numeric column's `<th>` carries the SAME `class="num"` its `<td>`
   does (#, GP, PTS, REB, AST, FG%) so both read from one shared rule
   below rather than drifting independently. `.num` keeps
   static/css/base.css's tabular-nums monospace - only the alignment
   itself is overridden here, at equal (2-class) specificity to
   `.hl-table .num`'s own right-align, winning on this file's later load
   order (base/league_public_base.html loads every page stylesheet after
   base.css). Player/Position are unclassed th/td, same (1-class + type)
   specificity tie against `.hl-table th`'s left-align default, won the
   same way. */
.ta-player-table th,
.ta-player-table td {
  text-align: center;
}

.ta-player-table .num {
  text-align: center;
}

/* Sortable stat headers (static/js/box-score-sort.js, extended to also
   cover this table) - the ↕ affordance is independent of alignment, so
   it applies to any `th[data-sort]` regardless of the `.num` class. */
.ta-player-table th[data-sort] {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

.ta-player-table th[data-sort]:hover,
.ta-player-table th[data-sort]:focus-visible {
  color: var(--text);
}

.ta-player-table th[data-sort]::after {
  content: "\2195";
  display: inline-block;
  width: 8px;
  margin-left: 3px;
  font-size: 9px;
  opacity: 0.4;
}

.ta-player-table th[data-sort][aria-sort="ascending"]::after {
  content: "\2191";
  opacity: 1;
  color: var(--primary);
}

.ta-player-table th[data-sort][aria-sort="descending"]::after {
  content: "\2193";
  opacity: 1;
  color: var(--primary);
}

/* Perf hint for box-score-sort.js's FLIP transform - rows only pay for
   their own compositor layer while a sort is actually in flight. */
.ta-player-table tbody tr {
  will-change: transform;
}

/* ─── Sticky Player column ONLY (2nd column: # comes first and scrolls
   away normally, Position comes after and also scrolls away normally -
   user request: name is the one thing that stays in view while swiping
   through the stat columns, not jersey number or position). Not
   combined with base.css's .hl-table--row-link (same reason
   game_detail.css's box score skips it on its own sticky column:
   `position: sticky` becomes the containing block for anything inside
   this cell, confining a stretched-link overlay to just this column's
   width instead of the full row) - the player name stays a plain inline
   link instead. */
.ta-player-table td:nth-child(2) {
  white-space: nowrap;
}

.ta-player-table th:nth-child(2),
.ta-player-table td:nth-child(2) {
  position: sticky;
  left: 0;
}

.ta-player-table th:nth-child(2) {
  z-index: 3;
}

.ta-player-table td:nth-child(2) {
  z-index: 2;
  background: var(--bg-card);
}

.ta-player-table tbody tr:hover td:nth-child(2),
.ta-player-table tbody tr:focus-within td:nth-child(2) {
  background: var(--bg-raised);
}

/* Team's leading scorer gets the same accent-stripe treatment
   game_detail.css's .gd-table-leader gives a game's own top performer -
   on the sticky Player cell specifically (position: sticky already makes
   it a positioned element, a valid containing block for the ::before
   without adding `relative`), so the stripe stays anchored to the name
   even while # scrolls out of view to its left. */
.ta-top-scorer td:nth-child(2)::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 3px;
  background: var(--primary);
}

/* FG% cell - percentage as the primary (sortable) figure, the raw
   makes/attempts fraction underneath as a secondary, muted line, same
   value/label split .hl-stat-tile already uses in the Shooting splits
   section above this table. Both stay right-aligned (inherited from the
   cell's own .num), so they line up with the FG% header and every other
   numeric column above/below them. */
.ta-fg {
  display: block;
  font-weight: 700;
  color: var(--text);
}

.ta-fg-detail {
  display: block;
  margin-top: 1px;
  font-size: 10px;
  color: var(--text-muted);
}

/* ─── Top 3 - one .lb-board (static/css/league_leaderboards.css) per
   stat category, laid out as a responsive card grid rather than the
   leaderboards page's single stacked column, since this page shows
   several categories side by side at once. */
.ta-top3-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-4);
}

.ta-top3-title {
  margin: 0 0 var(--space-2);
  font-size: 13px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.ta-top3-board .hl-empty {
  padding: var(--space-4);
}