/* Two surfaces draw their headline numbers with this, /stats writing the markup itself and
   /replays going through replays/_figure_groups, so a figure reads the same on both. The variant
   below is that partial's `variant` local. */
.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 sits above the /replays screencast and the task block below it, so the lede
   takes the larger step and stays the first figure read. */
.c-figures--lede .c-figures__line { font-size: var(--text-md); }

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

.c-figures--task .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);
}