/* Season standings (templates/standings/season_standings.html) -
   page-specific classes layered on static/css/base.css's shared .hl-*
   table components, same pattern as players.css/stat_leaders.css.

   10 columns (Team/Division/W/L/PCT/GP/PF/PA/DIFF/Streak) stay a real,
   horizontally-scrollable .hl-table on phones rather than switching to
   base.css's stacked-card layout (.hl-table--stack) - same call
   game_detail.css's box score table makes, for the same reason: stacking
   10 columns into label:value lines reads worse than a table you swipe
   through. The sticky Team column further down this file is what makes
   that swipe usable - without it, scrolling right to see PF/PA/DIFF would
   scroll the team name (the one thing you need to keep in sight) out of
   view too. */

/* Mirrors game_detail.css's `.gd-box-table th:first-child, td:first-child`
   sticky-column treatment - see that file's comment for the full
   reasoning (positioned layer needs an explicit per-state background so
   it doesn't go see-through against columns sliding past behind it).
   Not combined with base.css's .hl-table--row-link stretched-link overlay
   in this cell specifically for the same reason noted there: `position:
   sticky` would become the containing block and confine the overlay to
   just this column's width - the Team <a> here stays a plain inline link
   instead. */
.std-standings-table th:first-child,
.std-standings-table td:first-child {
  position: sticky;
  left: 0;
}

.std-standings-table th:first-child {
  z-index: 3;
}

.std-standings-table td:first-child {
  z-index: 2;
  background: var(--bg-card);
}

.std-standings-table tbody tr:hover td:first-child,
.std-standings-table tbody tr:focus-within td:first-child {
  background: var(--bg-raised);
}

/* Same JS-measured-overflow hint as game_detail.css's .gd-scroll-hint
   (static/js/scroll-table-hint.js toggles [data-visible] on whichever
   of the two based on which .hl-table-wrap(s) actually overflow) - a long
   team/division name can force real overflow above 640px, and a short
   one may not force it below, so a fixed breakpoint would guess wrong
   either way.

   Sits ABOVE the table (see the template) rather than below it: game_detail's
   version sits after its two box-score tables with a negative top margin
   pulling it snug against them, but with only one table here that put the
   hint right against std-standings-table's sticky-column bottom edge,
   easy to miss as just more table chrome. A pill with its own background/
   border, ahead of the table, reads as a distinct affordance you see
   before you start scrolling instead of something to notice after. */
.std-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);
}

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

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

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

/* User request: same dark/neutral placeholder as League Home's standings
   table (static/css/league_home.css's `.lh-standings-table
   .hl-avatar-placeholder`) - templates/standings/season_standings.html
   drops data-accent/team.primary_color from its markup so nothing can win
   over this by source order. */
.std-standings-table .hl-avatar-placeholder {
  background: var(--bg);
  color: var(--text);
  border-color: var(--border-strong);
}

/* ─── Scroll-reveal (static/js/league-home.js's generic [data-lh-reveal]
   IntersectionObserver, static/css/league_home.css's own base
   html.lh-anim-ready rules) - this page had none at all before, unlike
   every other public page in the shell. Reuses the exact same mechanism
   (both files already load unconditionally on every page - see
   base/league_public_base.html) rather than a second JS/CSS system: the
   table wrapper itself gets the shared container fade+rise for free from
   [data-lh-reveal] alone; only the per-row stagger below is page-specific,
   same split league_home.css's own .lh-standings-table tbody tr rules
   use for its teaser table. `--i` (row index, set inline per <tr> in the
   template) drives the delay instead of a hand-written nth-child list -
   this table's row count varies with the league (a handful of teams to
   several dozen), where a fixed nth-child(8) cutoff would leave later
   rows with no stagger at all. */
html.lh-anim-ready [data-lh-reveal] .std-standings-table tbody tr {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s ease, transform 0.4s ease, background-color 0.15s ease;
  transition-delay: calc(var(--i, 0) * 0.035s);
}

html.lh-anim-ready [data-lh-reveal].lh-is-visible .std-standings-table tbody tr {
  opacity: 1;
  transform: none;
}

/* ─── PCT win% fill-bar (view-computed `row.pct_number`, a 0-100 number
   alongside the ".750"-style `row.pct` display string) - same hard-stop
   gradient trick static/css/league_home.css's own .lh-standings-pct uses
   for the identical data in the League Home teaser table, so the full
   Standings table this links out to reads as a continuation of that
   preview rather than a plainer downgrade from it. */
.std-standings-pct {
  position: relative;
  background-image: linear-gradient(90deg, rgba(var(--primary-rgb), 0.14) var(--pct, 0%), transparent var(--pct, 0%));
}