@layer components {
  /* A list of terms and their values — the summary block that says what a
     record currently holds.
   *
   * It was .review__list, named for the wizard's review step, and was already
   * being rendered on two screens that are not that step. A block named after
   * one screen cannot be found by anyone working on another, so the third one
   * gets written by hand.
   */
  .key-values {
    --key-values-term-min: 8rem;
    --key-values-term-max: 12rem;

    display: grid;
    grid-template-columns: minmax(var(--key-values-term-min), var(--key-values-term-max)) 1fr;
    column-gap: var(--space);
    row-gap: var(--space-half);
    margin: 0;

    /* A pair may be wrapped in a div or written bare, and both come out on the
       same two columns.
     *
     * The two columns used to live on the `div` alone, so a `<dl>` written the
     * obvious way — `<dt>`, `<dd>`, `<dt>`, `<dd>` — got the outer single-column
     * grid and stacked every term above its value. That is what the organization
     * overview was: six facts down a column half a screen tall, and nothing in
     * the markup to say it was wrong.
     *
     * `subgrid` is what lets both work. The columns are the list's now, and a
     * wrapped pair borrows them rather than computing its own — which also means
     * pairs in separate divs finally line up with each other, where before each
     * div measured its own term against its own value. */
    > div {
      display: grid;
      grid-column: 1 / -1;
      grid-template-columns: subgrid;
    }

    dt {
      color: var(--color-ink-soft);
      font-size: var(--text-normal);
    }

    dd {
      margin: 0;

      small {
        display: block;
        color: var(--color-ink-soft);
      }
    }
  }

  /* For a list standing in a pane rather than on a page. The term column is what
     gives way, because a term is a word we chose and can be read narrow, while a
     value is whatever the record happens to hold. */
  .key-values--tight {
    --key-values-term-min: 4.5rem;
    --key-values-term-max: 6rem;

    column-gap: var(--space-half);
    row-gap: var(--space-quarter);
    font-size: var(--text-small);

    dt {
      font-size: var(--text-small);
    }
  }
}