/* leaderboard.css - the standings page's own styles, layered on
 * assets/ssbz.css. Four views share one document:
 *   the overview  (?room= absent)      the "Leaderboard" landing: open
 *                                     rooms, the players recently
 *                                     racing, the tracks grid
 *   the room view (?room=<room id>)   one room: records board, charts,
 *                                     players
 *   the racer page (?user=<id>)       one racer: rooms, tracks, heatmap
 *   the track board (?env=&difficulty=) one combo's gathered ranking
 * Every view wears the same hero band; its stat cards overlap the
 * band's bottom edge (the 2015 panel-over-hero look).
 */

/* The hero band: tall, the stat cards overlap its bottom edge. */
.hero { padding: 30px 0 46px; }
.hero h1 { font-size: 30px; }
.badges { margin: 12px 0 0; }

/* The hero's mark slot: one identity mark beside the title, semantic
 * per view. The leaderboard pages (landing, room, track) wear the
 * site logo at the auth hero's 44px treatment; the user page swaps
 * the slot to the racer's avatar at its natural square shape. */
.hero .who { display: flex; align-items: center; gap: 14px; }
.hero .who img.hero-logo { width: 44px; height: 44px; }
.hero .who img:not(.hero-logo) { width: 52px; height: 52px; }

/* Poll status line: fetch errors. */
.status {
  margin: 10px 0 0; font-size: 12.5px;
  display: flex; gap: 14px; flex-wrap: wrap; align-items: baseline;
}
.hero .status { opacity: .92; }
.status .error {
  background: var(--error-bg); padding: 2px 10px; border-radius: 999px; font-weight: 600;
}

/* Stat cards: they overlap the hero band's bottom edge. */
.cards {
  display: grid; gap: 14px; margin-top: -26px;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: 4px;
  box-shadow: 0 1px 2px rgba(0,0,0,.08); padding: 13px 16px;
}
.card .label {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .11em; color: var(--muted);
}
.card .value { font-size: 23px; font-weight: 700; margin-top: 3px; font-variant-numeric: tabular-nums; }
.card .by { font-size: 12px; font-weight: 500; color: var(--muted); }

/* Records board cells. */
td.rank { font-weight: 700; width: 2.2em; color: var(--muted); }
td.player { font-weight: 600; }
td.finish { font-weight: 700; }
td.date, .axis { white-space: nowrap; }
tr.claim td { opacity: .6; }

/* Player avatars: the small heads beside names in tables and legends
 * (registered players only; guests render no image). The picture keeps
 * its uploaded square shape: no crop mask, no ring, no fill. */
.pav {
  width: 20px; height: 20px; vertical-align: -5px;
  margin-right: 7px;
}
.legend .pav { margin-right: 0; }

/* In-page view links (player names, room names): quiet, clearly
 * clickable - the discovery path between the views. */
a.plink { color: inherit; text-decoration: none; border-bottom: 1px dotted var(--muted); }
a.plink:hover { color: var(--chip-ink); border-bottom-color: var(--chip-ink); }

/* The landing's Tracks section: one chip per env/difficulty combo,
 * each opening that track's gathered board (the boards themselves
 * reuse the records table's row styles above). The pill recipe is the
 * shared .chip (ssbz.css), composed with a size-up modifier: same
 * geometry, but the card fill and line border the table rows wear. */
.trackgrid { display: flex; flex-wrap: wrap; gap: 10px; padding: 4px 16px 16px; }
a.track-chip {
  padding: 7px 13px; font-size: 13px; color: inherit;
  background: var(--card); border: 1px solid var(--line);
}
a.track-chip:hover { filter: none; border-color: var(--chip-ink); color: var(--chip-ink); }

/* Charts grid + SVG styling (theme-aware via custom properties). */
.charts { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(430px, 1fr)); }
@media (max-width: 980px) { .charts { grid-template-columns: 1fr; } }
svg.chart { display: block; width: 100%; height: auto; padding: 6px 10px 10px; }
svg.chart .grid { stroke: var(--grid); stroke-width: 1; }
svg.chart .axis { fill: var(--axis); font-size: 10.5px; font-family: inherit; }
svg.chart .axis-caption { font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.legend { display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 12px 16px 14px; }
.legend-item { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; }
.legend-item .dot { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.legendpanel h2 { border-bottom: 0; }

/* The GitHub-style activity heatmap: a 7-row day grid flowing into
 * week columns, cells tinted by the day's race count. Levels use the
 * accent tint ladder, dimmed for the empty level so dark mode stays
 * readable; the whole strip scrolls sideways on narrow screens. The
 * ladder tokens (--hm0..3) and the chart's --grid/--axis live in
 * ssbz.css's :root beside the rest of the palette. */
.hm-scroll { overflow-x: auto; padding: 14px 16px 4px; }
.hm-wrap { display: inline-flex; gap: 4px; align-items: flex-start; }
.hm-days { display: grid; grid-template-rows: repeat(7, 11px); gap: 3px; margin-top: 16px; }
.hm-days span { font-size: 9px; line-height: 11px; color: var(--muted); height: 11px; }
.hm-cols { display: flex; flex-direction: column; gap: 3px; }
.hm-months { display: flex; gap: 3px; height: 13px; margin-bottom: 3px; }
.hm-months span { font-size: 9.5px; color: var(--muted); white-space: nowrap; }
.hm-grid { display: grid; grid-auto-flow: column; grid-template-rows: repeat(7, 11px); grid-auto-columns: 11px; gap: 3px; }
.hm-cell { width: 11px; height: 11px; border-radius: 2px; background: var(--hm0); }
.hm-cell.hm-l1 { background: var(--hm1); }
.hm-cell.hm-l2 { background: var(--hm2); }
.hm-cell.hm-l3 { background: var(--hm3); }
.hm-legend { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--muted); padding: 10px 16px 12px; }
.hm-legend .hm-cell { display: inline-block; }