/* Tonight's ladder: one row per person on a shuffled night, where the teams
   last a round and the person is the only thing that runs the whole evening.

   Deliberately denser than the roster rows above it. Those are read one at a
   time while somebody is picked; this one is read as a shape — who is at the
   top, and how far the column of deltas leans mint or coral. */

/* **The list owns the columns, not the row.** Each row was its own grid, so
   every one of them sized its own tracks to its own contents: "1 game" and
   "2 games" are not the same width, nor are "2\u20130" and "\u2014", and the figures
   stepped left and right all the way down the page. The row subgrids the
   list's tracks instead, which is the only way to keep the card — its border,
   its tint, its hover — and still have fifteen of them line up. */
.mix-ladder__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr) auto auto auto auto;
  column-gap: var(--space-smd);
  row-gap: var(--space-2xs);
}

.mix-ladder__row {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  align-items: center;
  padding: var(--space-sm) var(--space-md);
  background: var(--surface-card);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
  transition: var(--transition-control);
}

.mix-ladder__row:hover {
  border-color: var(--border-strong);
}

/* Mint for the leader, which is one of the three things mint is allowed to
   mean. A hairline on the leading edge rather than a tinted row: the deltas
   down the right are already mint and coral, and a mint row behind them would
   read as a fourth result.

   **Drawn as an inset shadow, not a thicker border.** A 3px border where the
   other rows have 1px insets this row's contents by two pixels, which is the
   leader being the one row that does not line up with the rest. */
.mix-ladder__row--leader {
  box-shadow: inset 3px 0 0 var(--mint-500), var(--shadow-xs);
}

.mix-ladder__position {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  text-align: right;
}

.mix-ladder__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
  color: inherit;
  text-decoration: none;
}

.mix-ladder__name:hover {
  text-decoration: underline;
}

/* The figure the row exists for, so it carries the display face and the size
   of one. */
.mix-ladder__record {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-base);
  white-space: nowrap;
}

.mix-ladder__record--none {
  color: var(--text-tertiary);
}

.mix-ladder__won {
  color: var(--text-win);
  font-weight: var(--weight-semibold);
}

.mix-ladder__separator {
  color: var(--text-tertiary);
  padding: 0 1px;
}

.mix-ladder__lost {
  color: var(--text-loss);
}

.mix-ladder__games,
.mix-ladder__streak {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--text-tertiary);
}

/* Right-aligned so each column reads down its own right edge. The widths
   themselves come from the list's tracks, which are as wide as the widest row
   needs and therefore the same on every row. */
.mix-ladder__games,
.mix-ladder__streak {
  text-align: right;
}

.mix-ladder__delta {
  justify-self: end;
}

.mix-ladder__note {
  margin: var(--space-sm) 0 0;
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

/* On a phone there is no room for six columns, and the one that has to survive
   is the record. Position and name on the first line with the record and the
   delta, the two micro-labels on a second — the order somebody reads them in
   anyway. */
@media (max-width: 640px) {
  .mix-ladder__list {
    grid-template-columns: 1.75rem minmax(0, 1fr) auto auto;
  }

  .mix-ladder__row {
    row-gap: var(--space-2xs);
  }

  .mix-ladder__position {
    grid-column: 1;
    grid-row: 1;
  }

  .mix-ladder__name {
    grid-column: 2;
    grid-row: 1;
  }

  .mix-ladder__record {
    grid-column: 3;
    grid-row: 1;
  }

  .mix-ladder__delta {
    grid-column: 4;
    grid-row: 1;
  }

  .mix-ladder__games {
    grid-column: 2;
    grid-row: 2;
    text-align: left;
  }

  .mix-ladder__streak {
    grid-column: 3 / span 2;
    grid-row: 2;
  }
}