/* Favourite players, one block per player like the teams': the last 5 games as a table in a tinted box, then the
   totals over those games and the season. */

.players article {
  padding-block: var(--space-s);
  border-bottom: var(--border-width) solid var(--color-border);
}

.players h3 {
  margin-block: 0 var(--space-xs);
}

/* Team and position after the name: content, so regular weight and muted. */
.players h3 .details {
  margin-inline-start: var(--space-s);
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-normal);
}

/* The "Last 5 games" group stands out by one cue, as the teams' does: a tinted background. */
.players .player-group {
  margin-block: var(--space-s);
  padding: var(--space-s) var(--space-m);
  border-radius: var(--radius);
  background: var(--color-surface);
  overflow-x: auto;
}

.players .player-group h4 {
  margin: 0 0 var(--space-xs);
  color: var(--color-accent);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-caps);
  text-transform: uppercase;
}

/* Numbers right-aligned so they scan like a box score; the totals rows below a thin line. */
.players table {
  width: auto;
  margin: 0;
  font-variant-numeric: tabular-nums;
}

.players td,
.players th {
  padding: 0 var(--space-m) 0 0;
  text-align: start;
  font-weight: var(--font-weight-normal);
  white-space: nowrap;
}

.players thead th {
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
  text-align: end;
}

.players .score,
.players .stat {
  text-align: end;
}

.players .marker {
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
}

.players tfoot tr:first-child > * {
  border-top: var(--border-width) solid var(--color-border);
}

.players tfoot th {
  color: var(--color-text-muted);
}

.players .note {
  margin-block: var(--space-xs) 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
}

/* Favourite players without a game stored yet: one muted line each. */
.players .without-games {
  list-style: none;
  margin: var(--space-s) 0 0;
  padding: 0;
}

.players .without-games .note {
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
}

/* "(yesterday)" under the date, so the table stays narrow enough for a phone. */
.players .relative-day {
  display: block;
  line-height: var(--line-height-tight);
}