/*
 * The streak cards on the Head to Head tab (StreakList.js).
 *
 * The card is the app's own — the surface, the hairline, the shadow and the
 * centred heading `.stat-card` and `.form-card` already carry. What is new is
 * the row, and only because a streak is not a comparison: the other cards on
 * this tab put a figure in *both* side columns and let the reader weigh them
 * against each other, while a streak belongs to one side and the other column
 * would have nothing true to put in it.
 *
 * So the row is crest, sentence, figure — and the figure stays in one column
 * down the whole card rather than moving to the side it belongs to. That is
 * what makes a card of interleaved clubs scannable: the eye reads a single
 * column of numbers, and the crest at the far end says who each one is about.
 *
 * Nothing here is tinted by side. The crest does that job, and colouring the
 * figure as well would say it twice while making one club's numbers harder to
 * read than the other's.
 */

.streak-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

/* Heading and window as one block, so the --space-3 above separates them from
   the rows rather than sitting between the two halves of one title. */
.streak-card__head {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Centred, for the reason `.stat-card__heading` is: the rows under it are
   symmetrical about the card's midline, and a leading heading over them reads
   as a heading for the left-hand column. */
.streak-card__heading {
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  color: var(--text);
  text-align: center;
}

/*
 * What the figures are counted over. Quiet, because it is the same sentence for
 * every row on the card and the reader only has to be told once — but present,
 * because "4/5" does not say what the five are, and on the head-to-head card
 * the number changes when a filter chip is pressed.
 */
.streak-card__caption {
  font-size: var(--text-2xs);
  color: var(--text-muted);
  text-align: center;
}

.streak-card__rows {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/*
 * Crest, sentence, figure.
 *
 * `1fr auto 1fr` rather than three content-sized tracks: the two outer columns
 * share what the label does not need, which is what keeps the sentence centred
 * on the card's midline however wide the figure beside it is. `9/10` and `4`
 * are different widths and the labels above and below them must not shift to
 * accommodate that.
 */
.streak-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-3);
}

/*
 * One crest, or two overlapped for a run that belongs to the fixture rather
 * than to a side. The overlap is negative margin on the second rather than a
 * gap, so a `both` row stays inside roughly one crest's width and the labels
 * down the card keep their centre line.
 *
 * The white disc under each is what a transparent crest needs to read against
 * the card — the same framing `.filter-chip .logo` gives its own, and the
 * reason the second mark can sit on top of the first without the two merging
 * into one shape.
 */
.streak-row__crests {
  display: flex;
  align-items: center;
  justify-self: start;
}

.streak-row__crests .logo {
  flex-shrink: 0;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--border);
}

.streak-row__crests .logo + .logo {
  margin-left: -8px;
}

.streak-row__label {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  text-align: center;
}

/*
 * The figure, at the row's other end and in one column down the card.
 *
 * Tabular figures so `9/10` and `4/5` stack on the same digit positions —
 * without them a column of ratios wanders, which is exactly the wander this
 * layout was chosen to avoid.
 */
.streak-row__value {
  justify-self: end;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}