/*
 * The club's full leaderboards (ClubLeaders.js) — the page "All" opens under
 * the Overview's three boards. The takeover shell the club page uses
 * (club-details.css): a fixed page that fades while its sheet rises, its own
 * scroller, the app bar scrolling away and the tab row sticking. The identity
 * block borrows `.club-identity` outright, since it is the same club drawn
 * the same way one page down; the rows are the Overview card's rows with a
 * rank in front and the club line swapped for position and appearances.
 */

.club-leaders {
  --enter-y: calc(12px * var(--scale));

  position: fixed;
  inset: 0;
  /*
   * Just above the club page's 95, which it opens from, and under the
   * competition page's 97 and the player page's 98 — a player tapped here
   * opens over it. The sheets at 96 (bet builder, match-player sheet) open
   * over the fixture page only, which never shares the screen with this.
   */
  z-index: 96;
  display: flex;
  max-width: var(--app-max-width);
  margin-inline: auto;
  background: var(--bg);
  opacity: 0;
  transition: opacity var(--duration) var(--easing);
}

.club-leaders[hidden] {
  display: none;
}

.club-leaders[data-open="true"] {
  --enter-y: 0px;

  opacity: 1;
}

.club-leaders__sheet {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding-top: var(--safe-top);
  transform: translateY(var(--enter-y));
  transition: transform var(--duration) var(--easing);
}

.club-leaders__bar {
  flex: none;
  margin-top: var(--space-4);
}

.club-leaders__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 0 0 var(--space-6);
}

.club-leaders__list {
  display: flex;
  flex-direction: column;
}

/* The one card, inset like every card on the club page. */
.club-leaders__card {
  margin-inline: var(--space-4);
}

.club-leaders__row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding-block: var(--space-3);
  text-align: left;
}

.club-leaders__rank {
  flex: none;
  width: calc(20px * var(--scale));
  text-align: center;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}

.club-leaders__info {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-05);
  min-width: 0;
}

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

.club-leaders__meta {
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
  color: var(--text-muted);
}

.club-leaders__value {
  flex: none;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

/* The first row's figure in the accent pill, as on the Overview's cards
   (leaderboard.css `.leaderboard__value--top`). */
.club-leaders__row[data-leader="true"] .club-leaders__value {
  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);
}

/* Whatever is under this must not scroll — its own attribute, for the reason
   club-details.css gives for `data-club-open`. */
body[data-leaders-open] {
  overflow: hidden;
}