---
/**
 * A `<dl>` of term/description pairs on an auto-fitting grid.
 *
 * EXTRACTED AT STEP 4 ON `adversarial-reviewer`'S FINDING, and the finding was
 * that `/mediation/`'s `.formats` and `/arbitration/`'s `.cols` were the same
 * component under two names — identical markup, near-identical CSS, and
 * `.cols` was already serving two different content types on one page.
 * `/practice/*` at step 5 wants it a fourth time. Same argument that extracted
 * `ContactBand`: two call sites, one already divergent, pages to come.
 *
 * `<dl>` RATHER THAN A DIV GRID, for `CredentialRow`'s reason: each pair is a
 * term and its description, so a screen reader gets them as an associated pair
 * rather than as a visual arrangement. Wrapping each `<dt>`/`<dd>` in a `<div>`
 * inside the `<dl>` is valid HTML and is what makes the grid tractable.
 *
 * A `<dt>` IS NOT A HEADING and must not become one. These sit under the
 * section's `<h2>`; promoting them to `<h3>` would be a heading level that adds
 * nothing to the outline, and `docs/02` forbids skipped levels either way.
 */
interface Props {
  items: ReadonlyArray<{ name: string; body: string }>;
  /** The grid's per-column floor, passed to `.grid-autofit` as `--grid-min`.
   *  The `min(N, 100%)` guard lives there, in one place. */
  minColumn?: string;
}
const { items, minColumn = '17rem' } = Astro.props;
---

<dl class="grid-autofit defs" style={`--grid-min: ${minColumn}`}>
  {
    items.map((item) => (
      <div class="def">
        <dt class="def-name">{item.name}</dt>
        <dd class="def-body">{item.body}</dd>
      </div>
    ))
  }
</dl>

<style>
  /* Columns and the `min()` guard come from `.grid-autofit` (global.css); this
     sets only the gap. It re-implemented them for one pass — a second copy of
     the guard, inside the extraction made to remove copies of the guard.
     `--grid-min` is passed inline by the caller because a parent cannot style
     this component's root, and a custom property is the one mechanism that
     crosses that boundary. */
  .defs {
    gap: var(--space-7);
  }
  /* ⚠️ `--def-name-fg`, NOT `--text-meta` DIRECTLY. `--text-meta` is `--muted`,
     and `tokens.css` states the constraint on that token in terms: "metadata —
     ON CREAM ONLY (3.07:1 on ink)". `/practice/` is the first page to put this
     component on an inverse ground, and it shipped these labels at **3.07:1 at
     12px** against a 4.5:1 AA floor — measured three ways by
     `adversarial-reviewer` (token arithmetic, `getComputedStyle` against the
     served build, and a screenshot), all agreeing.

     A custom property is the fix rather than a `:global()` rule because it is
     the one mechanism that crosses Astro's component-scope boundary — the same
     route `Pill` already uses, and `global.css` sets this alongside `--pill-fg`
     on `.section-inverse, .section-accent`. The fallback keeps cream correct. */
  .def-name {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--def-name-fg, var(--text-meta));
  }
  .def-body {
    margin-block-start: var(--space-2);
    line-height: var(--leading-body);
  }
</style>