@layer components {
  /* A row of headline numbers, each with what it counts above it and what it
   * is out of below it — the first thing a report says, before its tables.
   *
   * Not .key-values, which is a record's terms read down a column: there the
   * term is what you scan for and the value is small. Here the number is the
   * point, and four of them read across in one glance or they are not a
   * summary. Not .panel either: a panel holds a section, and these are four
   * facts standing on one row, so each is a tile of its own off the same
   * surface tokens rather than a box inside a box.
   *
   * A <dl>, each figure a <div> around its term and its values, so a screen
   * reader hears "Sent as drafted, 62%, 31 of 50 you answered" as one fact. The
   * columns are filled rather than fitted, so two figures under four on the
   * same screen are the same width as the four, not stretched to the edge; a
   * phone takes them two by two without a breakpoint of their own. */
  .figures {
    --figures-min-width: 12rem;

    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--figures-min-width), 1fr));
    gap: var(--space);
    margin: 0;
  }

  .figures__figure {
    display: grid;
    align-content: start;
    gap: var(--space-quarter);
    padding: var(--space) var(--space-and-quarter);
    border-radius: var(--radius-large);
    background: var(--color-canvas);
    box-shadow: var(--shadow-card);

    dd {
      margin: 0;
    }
  }

  .figures__label {
    color: var(--color-ink-soft);
    font-size: var(--text-small);
    font-weight: var(--weight-medium);
  }

  /* Tabular figures, so a row of numbers does not shimmer as one of them
     changes width under the next Turbo visit. */
  .figures__value {
    font-size: var(--text-x-large);
    font-weight: var(--weight-semibold);
    font-variant-numeric: tabular-nums;
    letter-spacing: var(--tracking-tight);
    line-height: var(--leading-none);
  }

  .figures__detail {
    color: var(--color-ink-soft);
    font-size: var(--text-small);
  }
}