/* SHARED·SELECTIONPILL (430) — the one choice-pill row (single- or multi-select). (D-743 lap)
 *
 * Copy-first port off bottle.js's own `pills(name, list, cur)` function and
 * workbench/weaning/_shared/logger-surface.css's `.pills`/`.pill` block (lines 524-532 as of
 * 2026-08-28). Every property value below is unchanged from the kept source, including the
 * class names themselves — `.pills`/`.pill` stay bare, matching the kept file byte-for-byte, so
 * check 65's kept-fidelity gate can compare the SAME selector on both sides (the marker's
 * selector resolves identically on the candidate and the reference; a renamed class would break
 * that mechanism, not route around it). No collision risk in practice: this component's job is
 * to eventually REPLACE bottle.js's own local pills()/.pills — not sit alongside it — so sharing
 * the name is the end state, not a workaround. `cur` may be a string (single-select, one `.on`
 * at a time) or an array (multi-select, several `.on`) — same as the kept function; the
 * component does not choose which, the caller does, exactly as bottle.js's own CONTENTS row
 * (single) and CUES row (multi) already both call the same kept function today. */
/* ══════════════════════════════════════════════════════════════════════════════
 * 🔴 THE ONE ANSWER PILL (Andrew, 2026-09-09 — ruled twice in one sitting).
 *
 * Shown the same milestone question in two forms on one page: "For these all pill should
 * be the like the top not the bottom." Then, pointed at the *Has Caïa rolled from front
 * to back?* row a second time, at a large zoom: "All the small answer pills should looke
 * like this" — white-cream fill, FULLY ROUND, a hairline border, tight padding.
 *
 * That form is the block below, and it is now the app's ONLY answer-pill form. Five other
 * implementations of "a small row of mutually-exclusive text buttons answering a question"
 * were found and moved onto it (see REPORT-one-answer-pill-2026-09-09.md for the census):
 *   · the library gallery's inline copy of these very values — deleted, it renders this now
 *   · .tkq .ans button   (410, the week-read track question)
 *   · .mtl-btn/.mtl-no   (the milestone popover)     — its flex:1 stretch dropped with it
 *   · .fss-t             (1050, the solids reaction scale)
 *   · .wn-pill           (the solids sheet's own legacy pills — amount, when, texture)
 *
 * ⚠️ THE SHAPE IS SHARED; THE MEANING-COLOUR IS NOT. Each host keeps the colour its
 * chosen state has always worn, because that colour is doing work — slate reads as
 * "tracking", teal as the app's own voice, the milestone pebble carries its area's hue.
 * So the chosen state resolves `--pill-sel` (fill + border) and `--pill-sel-ink` (label),
 * which a host sets ON THE ROW. Unset, it falls back to --accent, exactly as before, so
 * every existing caller renders byte-identically.
 *
 *     .tkq .pills     { --pill-sel: var(--kind-ink); }
 *     .mtl-pop .pills { --pill-sel: var(--sel-col); --pill-sel-ink: var(--sel-on); }
 *     .wn-react .pills, .wn-field .pills { --pill-sel: var(--teal-700); }
 *
 * 🔴 ONE DEFECT FIXED IN THE LIFT, NOT COPIED FORWARD: the border width read
 * `var(--radius-2)` — a RADIUS token setting a border WIDTH. It happened to render, which
 * is why it survived: --radius-2 is 2px. It is now --nudge-2, which is also 2px, so the
 * rendered border is UNCHANGED — and it is the exact form check 23's own rule 4a names as
 * the intended one ("border: var(--nudge-2) solid …"). The same misuse sat on the focus
 * ring's width and offset; both move to the estate-standard --focus-ring / --focus-offset,
 * which resolve to `2px solid var(--accent)` and `2px` — again pixel-for-pixel identical.
 * ══════════════════════════════════════════════════════════════════════════════ */
.pills { display: flex; flex-wrap: wrap; gap: var(--space-8); }
.pill { border: var(--nudge-2) solid var(--border-hairline); background: var(--surface-card);
  border-radius: var(--radius-pill); padding: var(--space-8) var(--space-12);
  font-family: var(--font-body); font-size: var(--size-14); /* token-exception */ font-weight: var(--weight-500);
  color: var(--text-secondary); cursor: pointer; }
.pill.on { background: var(--pill-sel, var(--accent)); border-color: var(--pill-sel, var(--accent));
  color: var(--pill-sel-ink, var(--text-on-accent)); font-weight: var(--weight-600); }
.pill:active { border-color: var(--pill-sel, var(--accent)); }
.pill:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }