/* 1057 TOOLS·WHATSNEWCARD — "what changes at this age", as one labelled card.
 *
 * WHAT IT IS. The one content block on a moment screen of the solids walkthrough: a small
 * uppercase eyebrow LABEL saying what the list is ("WHAT SHE HAS NOW", "WHAT YOU CAN GIVE",
 * "THE COMMON ALLERGENS"), and under it a stack of 1058 TOOLS·FOODROW rows — the food groups
 * that arrive at this age, each one openable onto the app's own list of usual types.
 *
 * SOURCE. `workbench/weaning/_bakeoffs/solids-education.html`, the `.bo-fg` block (lines
 * 220-224 of that file's <style>) and the head + row loop of its `card()` builder (:1081,
 * :1099-1117). Copy-first, with the deviations named below.
 *
 * ⚠️ THE BRIEF'S USAGE COUNT IS WRONG AND THE CODE WINS. Brief 708 says the card is "used 9× on
 * the template". It is not: the template holds 4 moments and 6 card objects, of which 5 reach
 * `card()` (`c.head || c.steps`, :1190) and 4 carry rows — of 1, 9, 7 and 2. Measured by
 * evaluating the template's own MOMENTS array rather than grepping the class (the class appears
 * ONCE in the file, inside the builder, so `grep -c 'bo-fg bo-grow'` answers 1 and tells you
 * nothing about usage); the command is in the report and in the card's registry note.
 *
 * ── THE BOUNDARY (what this card does NOT own) ───────────────────────────────────────────────
 * · THE HEAD IS AN EYEBROW LABEL, NOT 1008 SHARED·BOXHEAD. `.bxh` is the box family's head — a
 *   title-weight line that opens a bordered, kind-coloured box (`--kind-ink`/`--kind-line`/
 *   `--kind-fill`, 1006). This is 11px uppercase `--font-label` at `--tracking-10` in
 *   `--text-secondary` (deviation 5 below; the kept ink was `--text-tertiary`), sitting on a
 *   plain cream card with no kind, no bar and no border: it
 *   names a list, it does not head a box. Reading it as a box head would pull this card into a
 *   family whose whole grammar (kind colour, the 4px bar, the title-weight head) it refuses —
 *   and D-435 is explicit that this screen has ONE level of carding, the card IS the section,
 *   and the rows sit bare inside it. Different job, different shape, correctly separate.
 * · THE ROWS ARE 1058 TOOLS·FOODROW. This card renders none of their markup and styles none of
 *   their classes; it calls `window.renderFoodRow` per row. Everything about the chip, the
 *   chevron, the open list and the open/closed/no-list states lives there.
 *
 * ── THE DEVIATIONS FROM THE TEMPLATE, DISCLOSED ─────────────────────────────────────────────
 * 1. `.bo-grow` IS NOT PORTED. It is `flex: 1 0 auto; display: flex; flex-direction: column` —
 *    the template PAGE's own column layout, applied to the card so it fills a phone frame in a
 *    side-by-side review grid. Rendered proof it is page furniture, not the card: clipping the
 *    one-row card at 2× gives 165px of card with ~140px of empty cream under the chips.
 * 2. THE TEXTURE-LADDER BRANCH IS NOT PORTED. `card()` has a second shape (`m.steps` — a period
 *    and what the spoon holds, `.bo-tx`) that returns early and renders no rows at all. That is
 *    a different component that happens to share a builder, and the template's own comment says
 *    so: "m4 adds no food group, so it gets rows of its own shape… Drawing it as 'what's new'
 *    was the error." A separate row for it is owed; it is not a state of this card.
 * 3. `.bo-flag` IS NOT PORTED. The builder has `if (m.flag)`, and `grep -n 'flag:'` over the
 *    template's whole data set returns ONE hit — the pass-through in `moment()` at line 1170.
 *    No moment sets it. Dead branch, not a state.
 * 4. EYEBROW TYPE 11px → `--text-label` (which IS `--size-11`, so this is a rename, not a
 *    resize; check 25 admits only `--text-*` roles). Verified: tokens.css:521.
 * 5. 🔴 ONE INK FIX, THE 1055 PRECEDENT. The kept label ink is `--text-tertiary`
 *    (solids-education.html:223), which D-740 RETIRED for app text use — tokens.css:427 says it
 *    in the token's own comment ("zero web/ call sites — text is --ink-600, marks are
 *    --ink-400"), and an 11px/600 eyebrow is text, not a mark. It is also refused when tried:
 *    `node scripts/contrast-audit.mjs --ratchet scripts/git-hooks/checks/_contrast-baseline.json`
 *    reports `FAIL .ednew-h — body text (11px / 600) — 4.5:1 — ratio 3.34` as a NEW pair (run
 *    2026-09-04 on this branch, before the fix). `--text-tertiary` is `--ink-400` #8a8a82,
 *    3.34:1 on `--surface-card` #fdfaf3; `--text-secondary` is `--ink-600` #5a5a55, 6.65:1
 *    (relative-luminance computation, both). The label darkens; nothing else moves.
 *
 * STATES: one-row · many-rows. There is NO empty state: every row-bearing card in the template
 * renders at least one row (the MOMENTS evaluation above — 4 row-bearing cards of 1, 9, 7 and 2
 * rows, and zero cards with `rows: []`; the remaining two carry `steps`/`spec`, the other shapes
 * named above). A card with no rows is a card with nothing to say, and the template never draws
 * one. The brief asked for `empty` "only if the template renders an empty card" — it does not.
 *
 * ── THE FIDELITY PROOF ───────────────────────────────────────────────────────────────────────
 * Clipping the kept 4–6 month card (`.afmount[data-opt="m2"] .bo-fg`) and this 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 ink and type deviations in-page and it falls
 * to 0.877%, every one of those pixels inside a chip circle; add the kept `<i>`'s user-agent
 * 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 the pair reproduces the kept card EXACTLY and the differences are only
 * the ones written down here and in foodrow.css. Separately, side-by-side getComputedStyle over
 * both pages: this card 330×332.09 and the kept card 330×332.09, `.edrow-hd` matching `.bo-fgr`
 * on EVERY compared property at 298×32. (⚠️ The head's leading is the one place that took a fix
 * to get there — `--leading-145` rendered 15.95px against the kept 12.09px and grew the whole
 * card by 3.85px; `--leading-110` is the kept value, stated rather than inherited.)
 *
 * Self-contained under `.ednew` (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. */

.ednew {
  background: var(--surface-card);
  border-radius: var(--radius-12);
  padding: var(--space-12) var(--space-16) var(--space-8);
  margin-bottom: var(--space-16);
}

.ednew-h {
  font-family: var(--font-label);
  font-size: var(--text-label);
  font-weight: var(--weight-600);
  /* --leading-110 = 1.1, which is what the kept h3 computes to (12.09px at 11px) because the
   * TEMPLATE declares no line-height there at all and takes the user-agent's `normal`. Stating it
   * is not optional — D-470's corollary is that every element a card renders is styled explicitly,
   * with zero reliance on user-agent defaults — so the only question is WHICH value, and the
   * answer is the kept one. Measured: with --leading-145 the head rendered 15.95px and grew the
   * whole card 332.09 → 335.94px against the kept card; at --leading-110 both are 12.09px and the
   * card heights agree. (Side-by-side getComputedStyle run over both pages; commands in the
   * report.) */
  line-height: var(--leading-110);
  letter-spacing: var(--tracking-10);
  text-transform: uppercase;
  color: var(--text-secondary);
  margin: 0 0 var(--space-4);
}

/* The rows stack bare — D-435: one level of carding, the card IS the section. The separators
 * belong to the row (1058 draws its own top hairline and suppresses the first), so there is
 * deliberately nothing here reaching into `.edrow`. */
.ednew-rows { display: block; }