/* /leaderboards (redesigned 2026-10-14): the members-only board, given the
 * public-page treatment. Builds on site.css (page head, kicker, lede) and the
 * app.css components (btn, cluster). Tokens only; player colors and the BST
 * bar's width arrive through SL.applyDataStyles (data-color, data-hp), never
 * inline styles. Mobile-first, the same two breakpoints as app.css. */

/* ---- states: signed out, no runs, failed ------------------------------------ */
.lb-state {
  display: grid;
  justify-items: center;
  gap: var(--sp-3);
  max-width: 560px;
  margin: var(--sp-5) auto 0;
  padding: var(--sp-7) var(--sp-5);
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  text-align: center;
}
.lb-state[hidden] {
  display: none;
}
.lb-state-icon {
  width: 40px;
  height: 40px;
  color: var(--accent);
}
.lb-state p {
  color: var(--text-dim);
}
.lb-state-actions {
  justify-content: center;
  margin-top: var(--sp-2);
}

/* ---- the player: color dot, name, tags ---------------------------------------- */
.player {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
}
.player a {
  color: var(--text);
  font-weight: 700;
  text-decoration: none;
}
.player a:hover {
  text-decoration: underline;
}
.pdot {
  flex: none;
  width: 12px;
  height: 12px;
  background: var(--line-strong); /* replaced by the player's color (data-color) */
  border-radius: 50%;
}
.lb-tag {
  display: inline-flex;
  align-items: center;
  padding: 1px var(--sp-2);
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-full);
  color: var(--text-dim);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.lb-tag-you {
  background: var(--tint-ok);
  border-color: var(--line-ok);
  color: var(--ok);
}

/* ---- podium ------------------------------------------------------------------- */
.podium {
  display: grid;
  gap: var(--sp-4);
  margin: 0 0 var(--sp-6);
  padding: 0;
  list-style: none;
}
.podium[hidden] {
  display: none;
}
.podium-card {
  padding: var(--sp-5);
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-top: 3px solid var(--medal);
  border-radius: var(--r-lg);
}
.podium-gold {
  --medal: var(--medal-gold);
  background: linear-gradient(180deg, var(--tint-gold), var(--surface-1) 70%);
}
.podium-silver {
  --medal: var(--medal-silver);
}
.podium-bronze {
  --medal: var(--medal-bronze);
}
.podium-card.is-me {
  box-shadow: 0 0 0 1px var(--line-ok), var(--shadow-2);
}
.podium-place {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--medal);
  font: 700 var(--fs-sm) / 1 var(--font-mono);
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.podium-name {
  margin-top: var(--sp-3);
  font: 700 var(--fs-lg) / 1.3 var(--font-display);
}
.podium-name .lb-tag {
  font-family: var(--font-ui);
}
.podium-big {
  margin-top: var(--sp-3);
  color: var(--text-dim);
}
.podium-big b {
  margin-right: var(--sp-2);
  color: var(--text);
  font: 700 var(--fs-3xl) / 1 var(--font-display);
}
.podium-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-2);
  margin: var(--sp-4) 0 0;
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line);
}
.podium-stats dt {
  color: var(--text-dim);
  font-size: var(--fs-xs);
  letter-spacing: 1px;
  text-transform: uppercase;
}
.podium-stats dd {
  margin: 0;
  font: 700 var(--fs-md) / 1.4 var(--font-display);
}

/* ---- standings ---------------------------------------------------------------- */
.lb-card {
  overflow: hidden;
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.lb-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-2) var(--sp-4);
  padding: var(--sp-5) var(--sp-5) var(--sp-4);
}
.lb-card-head p {
  color: var(--text-dim);
  font-size: var(--fs-base);
}
.lb-scroll {
  overflow-x: auto; /* the table scrolls inside its card; the page never does */
}
.lb {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-md);
}
.lb th,
.lb td {
  padding: var(--sp-3) var(--sp-4);
  text-align: left;
  white-space: nowrap;
}
.lb thead th {
  background: var(--surface-2);
  border-bottom: 1px solid var(--line-strong);
  color: var(--text-dim);
  font: 700 var(--fs-xs) / 1.2 var(--font-ui);
  letter-spacing: 1px;
  text-transform: uppercase;
}
.lb tbody tr + tr td {
  border-top: 1px solid var(--line);
}
.lb tbody tr:hover td {
  background: var(--surface-2);
}
.lb tbody tr.me td {
  background: var(--tint-ok);
}
.lb .num,
.lb th.num {
  text-align: right;
}
.lb td.num {
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
}
.lb .rankcol {
  /* Exactly 64px, padding included: the pinned player column sits at
     left: 64px, and a narrower rank column would open a seam between them. */
  box-sizing: border-box;
  width: 64px;
  min-width: 64px;
  max-width: 64px;
  padding-inline: 0;
  text-align: center;
}
/* On narrow screens the stats scroll sideways under a pinned rank + player.
   Pinned cells need an opaque background, so they repeat the row's. */
.lb .rankcol,
.lb .playercol {
  position: sticky;
  z-index: 1;
  background: var(--surface-1);
}
.lb .rankcol {
  left: 0;
}
.lb .playercol {
  left: 64px;
}
.lb thead .rankcol,
.lb thead .playercol {
  background: var(--surface-2);
}
.lb .player {
  flex-wrap: nowrap; /* the dot, name, and tags stay on one line in the table */
}
.sort {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  min-height: 32px;
  padding: 0;
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
}
.sort:hover,
.lb th[aria-sort='ascending'],
.lb th[aria-sort='descending'] {
  color: var(--text);
}
.lb th[aria-sort='descending'] .sort-arrow::after {
  content: '▼';
}
.lb th[aria-sort='ascending'] .sort-arrow::after {
  content: '▲';
}
.sort-arrow {
  font-size: 9px;
}
.medal {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  background: var(--medal);
  border-radius: 50%;
  color: var(--surface-0);
  font: 700 var(--fs-base) / 1 var(--font-display);
}
.medal-gold {
  --medal: var(--medal-gold);
}
.medal-silver {
  --medal: var(--medal-silver);
}
.medal-bronze {
  --medal: var(--medal-bronze);
}
.rank-plain {
  color: var(--text-dim);
  font: 700 var(--fs-md) / 1 var(--font-display);
}
.lb-note {
  padding: var(--sp-4) var(--sp-5) var(--sp-5);
  border-top: 1px solid var(--line);
  color: var(--text-dim);
  font-size: var(--fs-base);
}

/* ---- best pulls --------------------------------------------------------------- */
.lb-section {
  margin-top: var(--sp-7);
}
.lb-section > .dim {
  margin-top: var(--sp-2);
}
.pulls {
  display: grid;
  gap: var(--sp-4);
  margin: var(--sp-5) 0 0;
  padding: 0;
  list-style: none;
}
.pull {
  padding: var(--sp-5);
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.pull-who {
  color: var(--text-dim);
  font-size: var(--fs-base);
}
.pull-mon {
  margin-top: var(--sp-2);
  font: 700 var(--fs-xl) / 1.2 var(--font-display);
}
.pull-bar {
  height: 8px;
  margin-top: var(--sp-3);
  overflow: hidden;
  background: var(--surface-sunken);
  border-radius: var(--r-full);
}
.pull-bar span {
  display: block;
  width: 0; /* set from data-hp */
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  border-radius: inherit;
}
.pull-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2) var(--sp-3);
  margin-top: var(--sp-3);
  font-size: var(--fs-base);
}
.pull-bst {
  color: var(--text-dim);
  font-family: var(--font-mono);
}
.pull-meta a {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  color: var(--accent);
  font-weight: 700;
  text-decoration: none;
}
.pull-meta a:hover {
  text-decoration: underline;
}
.pull-empty {
  padding: var(--sp-5);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-lg);
  color: var(--text-dim);
  text-align: center;
}
.lb-scope {
  margin-top: var(--sp-6);
  color: var(--text-dim);
  font-size: var(--fs-base);
}

/* ---- breakpoints: the ONLY two -------------------------------------------------- */
@media (min-width: 768px) {
  /* The classic podium: second, first, third, with first raised. DOM order
     stays 1-2-3 for screen readers. */
  .podium {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: end;
  }
  .podium-silver {
    order: 1;
  }
  .podium-gold {
    order: 2;
    padding-block: var(--sp-6);
  }
  .podium-bronze {
    order: 3;
  }
  .pulls {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1280px) {
  .pulls {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}