/* The public board: who has won the most, over a window and at one game or all of them. Its own
   stylesheet, pulled in per page the way the account pages pull in theirs, since it is one page and
   its CSS has no business on the rest. */

.leaderboard {
  display: grid;
  gap: 1.5rem;
}

.leaderboard-head h1 {
  margin: 0;
}

.leaderboard-head .lede {
  margin: 0.5rem 0 0;
}

/* The window's pills and the game's select share one row, the select at the far end, and it wraps
   under them on a phone. */
.leaderboard-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  margin-bottom: 1.25rem;
}

.leaderboard-filters .filters {
  margin-bottom: 0;
}

.leaderboard-game {
  display: flex;
  gap: 0.5rem;
}

.leaderboard-game select {
  min-width: 11rem;
  height: 2.125rem;
  padding-inline: 0.75rem;
  border: 0.0625rem solid var(--panel-edge);
  border-radius: var(--radius-control);
  background: var(--field);
  color: var(--ink);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
}

.leaderboard-game .button {
  height: 2.125rem;
  padding-inline: 1rem;
}

/* The filters and the list they filter are one thing, so they are one panel: the plain 1.75rem, and
   the table pulled out by a cell's own padding so its text starts where the filter row does. */
.leaderboard-table {
  width: calc(100% + 1.5rem);
  margin-inline: -0.75rem;
  border-collapse: separate;
  border-spacing: 0;
}

.leaderboard-table th,
.leaderboard-table td {
  padding: 0.5rem 0.75rem;
  text-align: left;
}

.leaderboard-table th {
  color: var(--ink-soft);
  font-size: 0.875rem;
}

/* Both numbers take the room they need and the names take what is left, so a place sits beside the
   player it belongs to and the tallies line up down the far edge rather than floating mid-row. */
.leaderboard-table th:first-child,
.leaderboard-table td:first-child,
.leaderboard-table th:last-child,
.leaderboard-table td:last-child {
  width: 0.1%;
  white-space: nowrap;
}

.leaderboard-table th:last-child,
.leaderboard-table td:last-child {
  text-align: right;
}

/* A rank and a tally are numbers to compare down a column, so they are read in the display face the
   profile's own readings use, and the names between them stay body copy. */
.leaderboard-table td:first-child,
.leaderboard-table td:last-child {
  font-family: var(--display);
  font-weight: 600;
}

/* Every place is set in the same disc-sized box, so the numbers centre on one line down the column
   whether or not the place they name is wearing a medal. */
.leaderboard-place {
  display: inline-grid;
  place-items: center;
  min-width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  line-height: 1;
}

/* The first three wear a medal. It is the place itself on a coloured disc rather than a mark beside
   it, so what the colour says the number says too and nothing here rests on the colour alone. */
.leaderboard-place--medal-1 {
  background: var(--medal-gold);
  color: var(--ink);
}

.leaderboard-place--medal-2 {
  background: var(--medal-silver);
  color: var(--ink);
}

.leaderboard-place--medal-3 {
  background: var(--medal-bronze);
  color: var(--ink);
}

.leaderboard-table tbody tr + tr td {
  border-top: 0.0625rem solid var(--panel-edge);
}

.leaderboard-row__player {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  overflow-wrap: anywhere;
}

.leaderboard-row__player .avatar {
  --avatar-size: 1.75rem;
  --avatar-face: 0.875rem;
}

/* The wash marks the reader's own row and this says so in words, since colour is never the only
   thing carrying a state. */
.leaderboard-you {
  padding: 0 0.5rem;
  border-radius: var(--radius-control);
  background: color-mix(in srgb, var(--accent) 45%, var(--panel));
  color: var(--accent-ink);
  font-size: 0.875rem;
  font-weight: 600;
}

/* The reader's own row, in the wash the settings sidebar uses to mark where you are. It takes the
   control radius that sidebar's marked section takes, which is also what keeps it from squaring off
   against the panel's curve. */
.leaderboard-row--caller td {
  background: color-mix(in srgb, var(--accent) 28%, var(--panel));
  color: var(--accent-ink);
}

.leaderboard-row--caller td:first-child {
  border-start-start-radius: var(--radius-control);
  border-end-start-radius: var(--radius-control);
}

.leaderboard-row--caller td:last-child {
  border-start-end-radius: var(--radius-control);
  border-end-end-radius: var(--radius-control);
}

/* An empty board still offers the way onto it. */
.leaderboard-empty {
  display: grid;
  justify-items: center;
  gap: 1rem;
  padding-block: 2rem 1rem;
  color: var(--ink-soft);
  text-align: center;
}

.leaderboard-empty p {
  margin: 0;
}

.leaderboard-note {
  margin: 0;
  color: var(--cream-soft);
}