/* 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. */

/* ─── 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, shown one at a time inside the Leaders page's
   .stl-tabset pill tabs (static/css/stat_leaders.css) so the section
   stays short instead of stacking six boards. */
.ta-top3-pane .hl-empty {
  padding: var(--space-4);
}