/* 1058 TOOLS·FOODROW — one food group as a read-only drop-down row.
 *
 * WHAT IT IS. A single row in the solids walkthrough's "what changes at this age" card: a small
 * round icon chip, the group's name, and a chevron saying there is more behind it. Tapping it
 * opens a bare, wrapping list of the usual types in that group. It is EDUCATIONAL and READ-ONLY —
 * it stores nothing, it edits nothing, and nothing in it is a control over the baby's record.
 *
 * SOURCE. `workbench/weaning/_bakeoffs/solids-education.html`, the `.bo-fgr` / `.bo-chips` /
 * `.bo-chip` block (lines 225-249 of that file's <style>) and the row branch of its `card()`
 * builder (:1099-1117). Copy-first, with the four deviations named below.
 *
 * ⚠️ THE BRIEF'S USAGE COUNT IS WRONG AND THE CODE WINS. Brief 708 says the row is "used 16×".
 * It is 19 — measured by evaluating the template's own MOMENTS array (4 row-bearing cards of 1,
 * 9, 7 and 2 rows), not by grepping the class, which appears once inside the builder. Of the 19,
 * 7 have a list behind them (Milk · Fruits · Vegetables · Starches · Meat·fish·egg · Added fats ·
 * Beans and pulses) and 12 do not (Herbs and spices · Ground nuts · Water · the 7 allergen rows ·
 * Bread · Baby cereals) — so the majority of this row's real uses are the `no-list` state, which
 * is why it is a first-class state and not an edge case. Both figures come from evaluating the
 * template's MOMENTS array against its GROUPS map; the command is in the report and in the note.
 *
 * ⚠️ NOT 449 SHARED·CONCERTINA. The concertina is an editable stored-value form row — it opens
 * onto inputs that change what is saved ("Need to correct the timing?"). This opens onto a list
 * of words. Same gesture, different object: one is a form control, this is a paragraph that
 * folds. They must not merge, and the reason is the thing behind the fold, not the fold.
 *
 * ── THE BOUNDARY (what this card does NOT own) ───────────────────────────────────────────────
 * · THE ICON CHIP is 429 SHARED·AREACHIP's shape. 429 is registered `designed` and has no
 *   stylesheet on disk (verified: `node -e` over cards.json — 429 has no `css` field, and
 *   `ls web/css/cards/shared/` has no areachip.css). So the chip is styled HERE, under this
 *   card's own root, as D-470's self-containment corollary requires — and it is styled as a
 *   PLACEHOLDER that 429 reclaims when it is built. Nothing here defines the chip family.
 * · THE CHIP'S FILL is not 1006 SHARED·KINDTRIPLE. 1006's families are read · do · track ·
 *   safety; a food group is none of those, and colouring "Fruits" with `--kind-read-fill`
 *   would assert a family membership that does not exist. So the fill is a plain TONE the
 *   CALLER chooses — five washes, named by their token, carrying no meaning of their own.
 *   The food-group → tone mapping stays with the caller, exactly as it does in the template
 *   (where the row's own data tuple carries the class: `['bo-g-fruit','🍐','Fruits','fruit']`).
 * · THE OPEN LIST is inline typography of this row (REPORT-534 #19), not a card of its own.
 *
 * ── THE SIX DEVIATIONS FROM THE TEMPLATE, ALL DELIBERATE, ALL DISCLOSED ─────────────────────
 * 1. THE ROW IS A <button> WHEN IT OPENS SOMETHING. The template draws every row as a <div>
 *    with `cursor: pointer` — unreachable by keyboard, invisible to a screen reader, and it
 *    says "tappable" on rows that have nothing to open. Here the affordance follows the fact:
 *    a row with a list is a real button with `aria-expanded`; a row with no list is a plain
 *    div with no pointer, no chevron and no promise. Same fix class as 450's bound labels.
 * 2. NAME TYPE 15px → `--text-body` (16px). D-463 re-anchored body 15→16 as the platform
 *    floor and check 25 admits only `--text-*` roles; there is no 15px role. The row's name is
 *    the primary content of the row, so it takes body.
 * 3. CHEVRON AND META COLOUR `--text-tertiary` → `--text-secondary`. Two reasons, and the
 *    first is a standing rule rather than a judgement: D-740 RETIRED `--text-tertiary` for app
 *    TEXT use outright — tokens.css:427 says so in the token's own comment ("zero web/ call
 *    sites — text is --ink-600, marks are --ink-400"), and the chevron sits in a span the
 *    check reads as text. Second, it is refused when tried: with the kept ink restored,
 *    `node scripts/contrast-audit.mjs --ratchet scripts/git-hooks/checks/_contrast-baseline.json`
 *    reports `FAIL .edrow-cv — body text (14px / 400) — 4.5:1 — ratio 2.97` as a NEW pair
 *    (run 2026-09-04 on this branch, with the one line changed and reverted). `--text-tertiary`
 *    is `--ink-400` #8a8a82 and measures 3.34:1 on `--surface-card` #fdfaf3; `--text-secondary`
 *    is `--ink-600` #5a5a55 and measures 6.65:1 (relative-luminance computation, both). Same fix
 *    class as 450's, though NOT the same figure — sleepwindowrow.css:34-37 records 4.23:1 for
 *    this pair and that number no longer reproduces; the measured one is 3.34:1.
 * 4. 🔴 THE CHIP GLYPH IS `font-style: normal`, AND IT IS THE LAST PIXEL OF DIFFERENCE.
 *    The kept chip is `<i class="bo-gl …">🍐</i>` and its CSS block never resets font-style, so
 *    every food glyph in the TEMPLATE renders in the user-agent's ITALIC for `<i>` — which on an
 *    emoji is a synthetic slant nobody chose. Relying on that is exactly what D-470's
 *    self-containment corollary forbids, so it is stated as `normal` here.
 *    THE EVIDENCE, and it is the whole fidelity proof for this pair: clipping the kept 4–6 month
 *    card and the card's own many-rows state at 2× gives two images of IDENTICAL size (660×664),
 *    and pixelmatch at threshold 0 reports 3.437% differing. Restore the three ink/type deviations
 *    in-page and it falls to 0.877% — every one of those pixels inside a chip circle, nothing
 *    else (tmp diff image inspected, not inferred). Add `font-style: italic` to the chip on top of
 *    that and it is **0 pixels — 0.000%**, against a same-page noise floor of 0.0000%. So this
 *    stylesheet reproduces the kept card EXACTLY, and the four things that differ are the four
 *    things named in this list. The runs are in the report.
 * 5. THE HEAD'S OWN FONT METRICS ARE STATED, because it is a <button> and a button takes the
 *    user-agent's 13.3333px / normal rather than the page's. Nothing inside reads them today, so
 *    the row measured 298×32 either way — a SILENT dependency, which is the kind that surfaces in
 *    an app shell rather than in a quiet WB page. The values are the kept row's own computed
 *    metrics, 16px / 24px, so this changes no pixel: with it in place `.edrow-hd` matches
 *    `.bo-fgr` on EVERY compared computed property, at 298×32 in both.
 * 6. `.bo-chip-open` IS NOT PORTED. The template still declares the dashed "and anything else
 *    of the kind" chip, and its own renderer never emits it — pin 2 removed it ("The 'and
 *    anything else of the kind' chip is gone too… the row no longer implies a finite list").
 *    Dead CSS in the source is not a state of the component.
 *
 * ⚠️ TAP-TARGET HEIGHT IS A REPORTED FINDING, NOT A SILENT FIX. The template's rhythm gives the
 * row 32px (24px chip + `--space-4` top and bottom), under the 44px `--control-min` floor. That
 * is an approved LOOK, and growing it 37% to clear the floor is a visual change Andrew has not
 * seen. The measurement is in the report; the row ships at the template's rhythm until he rules.
 *
 * STATES: closed · open · no-list. There is NO separate `allergen` state — the brief asked for
 * one "if the code marks allergen rows differently", and it does not: the allergen rows
 * (solids-education.html:977-981) carry group keys `allerg_egg`, `allerg_peanut`, … which are
 * absent from the template's own GROUPS map, so `GROUPS[key]` is `undefined` and they render
 * through the SAME branch as Water, Herbs and spices, and Finger foods — no chevron, nothing to
 * open. `grep -n "allerg_" solids-education.html` → 7 hits, all in row data, none in GROUPS.
 * "Allergen" is a fact about the food, not a state of the row.
 *
 * Self-contained under `.edrow` (D-470 corollary): every element this card renders is styled
 * here, with no reliance on app.css, on the page, or on user-agent defaults. */

.edrow {
  border-top: 1px solid var(--border-hairline); /* token-exception */
}
.edrow:first-child { border-top: 0; }

/* ── the head: chip · name · chevron ─────────────────────────────────────────────────────── */
/* Reset first — the head is a <button> in the two openable states, so every user-agent default
 * it would otherwise inherit is named explicitly. */
.edrow-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  width: 100%;
  margin: 0;
  padding: var(--space-4) 0;
  border: 0;
  background: none;
  text-align: left;
  font-family: var(--font-body);
  /* ⚠️ THE SIZE AND LEADING ARE STATED BECAUSE THIS IS A <button>. A button does not inherit the
   * page's font metrics — it takes the user-agent's, which here is 13.3333px / normal, and that is
   * exactly the reliance on a UA default D-470's self-containment corollary forbids. Nothing
   * inside the head reads them today (chip, name and chevron all set their own), so the row
   * measured 298×32 either way — a silent dependency, which is the kind that surfaces later in an
   * app shell rather than in a quiet WB page. The values are the kept row's own computed metrics:
   * 16px / 24px (getComputedStyle on .bo-fgr in the TEMPLATE; the run is in the report). */
  font-size: var(--text-body);
  line-height: var(--leading-150);
  color: var(--text-primary);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
/* A row with nothing behind it is not a control, so it does not wear one. */
.edrow--flat .edrow-hd { cursor: default; }

.edrow-nm {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  min-width: 0;
}
.edrow-name {
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--weight-600);
  line-height: var(--leading-145);
  color: var(--text-primary);
}

/* ── the icon chip — 429 SHARED·AREACHIP's shape, held here until 429 is built ───────────── */
.edrow-chip {
  flex: 0 0 var(--dim-24);
  width: var(--dim-24);
  height: var(--dim-24);
  border-radius: var(--radius-round);
  display: grid;
  place-items: center;
  font-size: var(--text-body-sm);
  font-style: normal;
  line-height: 1;
}
/* Five washes, named by the token they spend. No food taxonomy lives in this stylesheet. */
.edrow-chip--neutral { background: var(--surface-well); }
.edrow-chip--gold    { background: var(--gold-50); }
.edrow-chip--teal    { background: var(--teal-100); }
.edrow-chip--clay    { background: var(--clay-100); }
.edrow-chip--slate   { background: var(--slate-100); }

.edrow-ct {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  font-size: var(--text-meta);
  color: var(--text-secondary);
  white-space: nowrap;
}
.edrow-cv {
  font-style: normal;
  font-size: var(--text-body-sm);
  line-height: 1;
  color: var(--text-secondary);
}
.edrow.is-open .edrow-cv { color: var(--accent); }

/* D-422 motion floor — press and focus feedback on the one thing that is pressed. */
.edrow-hd:active .edrow-name { opacity: 0.6; }
.edrow-hd:focus-visible {
  outline: var(--radius-2) solid var(--accent);
  outline-offset: var(--radius-2);
  border-radius: var(--radius-4);
}
.edrow--flat .edrow-hd:active .edrow-name { opacity: 1; }

/* ── the open list — bare chips, no card (D-435: one level of carding) ───────────────────── */
.edrow-panel {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  padding: 0 0 var(--space-12);
  margin: 0;
  list-style: none;
}
.edrow-panel[hidden] { display: none; }
.edrow-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  font-family: var(--font-body);
  font-size: var(--text-meta);
  line-height: var(--leading-145);
  background: var(--surface-well);
  border-radius: var(--radius-pill);
  padding: var(--space-4) var(--space-8);
  color: var(--text-secondary);
  white-space: nowrap;
}
.edrow-item-ic { font-style: normal; line-height: 1; }