/* 06-components/_figures.css */
/* ── c-figures — a block of two-tier stat-figure groups (distinct from c-figure, the
   captioned still). Each group is a headline line of lit-amber figures over a dimmer note
   of related detail. Groups sit side by side and wrap to their own rows when the viewport
   narrows — deliberately not bordered stat boxes. Shared by the /stats corpus totals and
   the /replays run figures so a headline figure reads the same on every surface. */
.c-figures {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md) var(--space-2xl);
  margin: 0;
}

.c-figures__group { min-width: 0; }

/* The lede block (above the /replays video) reads one step larger than the detail block
   below it, keeping the primary shape dominant. */
.c-figures--lede .c-figures__line { font-size: var(--text-md); }

.c-figures--unit {
  gap: var(--space-xs) var(--space-lg);
}

.c-figures--unit .c-figures__line {
  gap: var(--space-3xs) var(--space-md);
  color: var(--text);
  font-size: var(--text-sm);
}

.c-figures__line {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-lg);
  margin: 0;
  color: var(--text-dim);
  line-height: var(--lh-copy);
}

.c-figures__value {
  color: var(--accent);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
}

.c-figures__note {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3xs) var(--space-md);
  margin: var(--space-3xs) 0 0;
  color: var(--text-muted);
  font-size: var(--text-xs);
}