/*
 * The Overview tab's three leaderboard cards — Top rated, Top scorers, Top
 * assists (LeaderboardCard.js). Shares `.club-overview__card` chrome, its
 * `.club-overview__header` / `__title` header classes, and its
 * `.club-overview__divider` / `__footer` row divider and "All" link with the
 * Next match card — all visually identical roles, so no leaderboard-specific
 * rule duplicates them. Everything below is new: the ranked row itself.
 */

.leaderboard__rows {
  display: flex;
  flex-direction: column;
}

.leaderboard__row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding-block: var(--space-3);
  /* Buttons default to centre-aligned text (the UA stylesheet's own rule);
     without this, the name — the one piece of text here that stretches to
     fill its flex column rather than shrinking to its own content — visibly
     drifts to the middle while the club row under it stays put. */
  text-align: left;
}

.leaderboard__info {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.leaderboard__name {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text);
}

.leaderboard__club {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  min-width: 0;
}

.leaderboard__club-name {
  min-width: 0;
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
  color: var(--text-muted);
}

/* Plain text for ranks 2 and 3. */
.leaderboard__value {
  flex: none;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

/*
 * Rank 1 only — a solid filled pill, not the soft tint `.pill--gold-active`
 * (primitives.css) uses elsewhere: this is the one number on the card meant
 * to read as *the* leader at a glance, not a status label, so it gets the
 * same solid --accent fill every other "this one is the active/primary
 * thing" mark in the app uses (the tab indicator, the selected filter chip,
 * the nav dot). Font size and weight are untouched — both classes land on
 * the same span, so the pill only ever adds paint, never a size change.
 *
 * The padding this adds would otherwise push the digits themselves — not
 * just the pill's box — this many px left of where the plain rows' digits
 * sit: box edges lined up at the same x either way, but a plain "7.9" has no
 * inset, so its glyphs touch that edge while the pill's own padding holds
 * "8.2" back from it. Equal-and-opposite negative margin cancels that: the
 * pill's *content* right-aligns exactly where an unpadded span's would, and
 * the padding instead bleeds the visible pill shape symmetrically past that
 * point, into the card's own edge padding rather than into the column the
 * numbers share.
 */
.leaderboard__value--top {
  padding: var(--space-1) var(--space-2);
  margin-inline: calc(var(--space-2) * -1);
  border-radius: var(--radius-full);
  background: var(--accent);
  color: var(--accent-text);
}