/* ============================================================================
 * 1051 TOOLS·FOODPICKER — the food picker
 * ============================================================================
 * WHAT IT IS. A search field, and under it the food catalogue laid out in groups
 * (Vegetables · Fruit · Starches …), each food a tappable chip. Typing filters to
 * one flat row of hits; nothing matching says so. Tapping a food reports the tap
 * to the caller — the picker never owns what has been chosen.
 *
 * ── THE BOUNDARY, WHICH IS THE POINT OF THIS CARD ───────────────────────────
 * Three private implementations of this job existed and none was a card, so the
 * first thing built here is the line between what the picker owns and what the
 * caller does. INSIDE: the field (`.fpk-f`), the group blocks (`.fpk-g`), the
 * group headings (`.fpk-gh`), the flat hit list, the nothing-matched state
 * (`.fpk-none`) and its optional "add what you typed" affordance (`.fpk-add`).
 * OUTSIDE, and deliberately: the chosen list (the caller's own row of removable
 * chips), the door that opens the picker, whether the picker is mounted at all,
 * the catalogue's contents, and any control a caller parks inside the dropdown
 * (the solids logger's water tick is one — it is the logger's question, not the
 * picker's).
 *
 * ── THE CHIPS ARE NOT THIS CARD'S ───────────────────────────────────────────
 * By default each food renders through 430 SHARED·SELECTIONPILL (`.pills`/`.pill`),
 * which already is the repo's multi-select choice chip: hairline pill, accent fill
 * when on, and its own press/focus feedback. NOTHING BELOW STYLES `.pill` OR
 * `.pills` — not even a margin — so there is exactly one place a choice chip is
 * described. A caller whose chip is a DIFFERENT card hands that card's renderer in
 * through the `chips` prop and this stylesheet still describes none of it; the
 * picker owns the field, the groups, the headings, the hit list and the empty
 * state in every case, and the chip in none of them.
 * (1041 SHARED·BROWCHIP's `.bc--food` was the brief's first choice and is not in
 * this tree at build time — `git log --all --oneline | grep -i browchip` returns
 * nothing. It is the glyph-carrying shared chip, so when it lands both live
 * callers pass IT through the same hook and hand back their private copies.)
 *
 * ── THE INK, AND THE ONE PLACE THIS CARD DOES NOT COPY ──────────────────────
 * 🔴 FOUR DISCLOSED INK FIXES, the 1055 precedent. The template writes its picker
 * ink as `var(--text-tertiary)` (= --ink-400 #8a8a82), which tokens.css itself
 * marks RETIRED FOR APP USE under D-740 — "zero web/ call sites — text is
 * --ink-600, marks are --ink-400 … NEVER on --surface-ground (2.69)". Copying it
 * forward into web/ is precisely the debt check 56 exists to stop, and it refused
 * all four as new pairs. Computed live (relative luminance, worst-case ground
 * #e9e2ce · well #f0ebe1 · card #fdfaf3):
 *   .fpk-gh  11px/700 label  --text-tertiary 2.69/2.93/3.34  →  --text-secondary
 *                                            5.36/5.84/6.65   (owes 4.5)
 *   .fpk-mag icon             --text-tertiary 2.69/2.93/3.34  →  --text-secondary
 *   .fpk-x   icon             --text-tertiary 2.69/2.93/3.34  →  --text-secondary
 *                                            (both owe the 3:1 non-text floor)
 *   .fpk-add 14px/600 link   --accent(teal-600) 3.41/3.71/4.23 → --teal-700
 *                                            4.69/5.10/5.82   (owes 4.5)
 * teal-700 is the TEXT-ink teal ruled 2026-08-28; --accent stays the interactive
 * ink everywhere it is a control surface. The placeholder moves with the label for
 * the same D-740 reason, though the checker did not reach it. GEOMETRY IS
 * UNTOUCHED — every box, gap and size below is still the template's own.
 *
 * ── VALUES ──────────────────────────────────────────────────────────────────
 * Every value below is the logger-10 template's own `.pk*` block (approved
 * picture: workbench/weaning/_bakeoffs/logger-10/logger-01-form-perfected.html,
 * lines 233-250 at build time), unchanged. The close × is that same page's
 * `.fd-x` (lines 131-136), which the template's own picker reuses for its
 * dismiss control.
 *
 * Self-contained per D-475: every element this card renders is styled here,
 * under this card's own root class, relying on no page or user-agent default.
 * ============================================================================ */

.fpk { margin-top: var(--space-12); }

/* ── the field ─────────────────────────────────────────────────────────────── */
.fpk-f { display: flex; align-items: center; gap: var(--space-8); min-height: var(--h-input);
  background: var(--surface-well); border-radius: var(--radius-control); padding: 0 var(--space-12); }
.fpk-mag { display: flex; flex: 0 0 auto; color: var(--text-secondary); }
.fpk-mag svg { width: var(--dim-16); height: var(--dim-16); }
.fpk-q { flex: 1; min-width: 0; border: 0; background: 0; padding: 0;
  font-family: var(--font-body); font-size: var(--text-body); color: var(--text-primary); }
.fpk-q::placeholder { color: var(--text-secondary); }
.fpk-q:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
/* 🔴 THE USER AGENT'S OWN CLEAR ✕, SUPPRESSED. `type="search"` makes WebKit draw its own
   round ✕ inside the field the moment anything is typed — seen live in the app's add-sheet
   before this rule existed, sitting where the card's OWN dismiss control (.fpk-x) goes, so a
   dismissible picker showed two crosses in one field and a non-dismissible one grew a control
   the card never rendered. D-475: every element a card renders is styled here, relying on no
   user-agent default — and that includes the ones the user agent adds uninvited. */
.fpk-q::-webkit-search-cancel-button,
.fpk-q::-webkit-search-decoration { -webkit-appearance: none; appearance: none; display: none; }

/* the dismiss ×, rendered only when the caller asks for one */
.fpk-x { display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: var(--dim-24); height: var(--dim-24); border: 0; background: 0; padding: 0;
  color: var(--text-secondary); cursor: pointer; }
.fpk-x svg { width: var(--dim-16); height: var(--dim-16); }
.fpk-x:active { color: var(--text-primary); }
.fpk-x:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset);
  border-radius: var(--radius-round); }

/* ── the groups ────────────────────────────────────────────────────────────── */
.fpk-g { margin-top: var(--space-16); }
.fpk-gh { font-family: var(--font-label); font-size: var(--text-label); font-weight: var(--weight-700);
  letter-spacing: var(--tracking-05); text-transform: uppercase; color: var(--text-secondary);
  margin-bottom: var(--space-8); }

/* ── nothing matched ───────────────────────────────────────────────────────── */
/* The words take `.fpk-gh` exactly as the template does — one type treatment for
   "this is what you are looking at", whether that is a group name or the absence
   of one. `.fpk-add` only renders when the caller allows a typed-in food. */
.fpk-add { border: 0; background: 0; padding: 0; cursor: pointer;
  font-family: var(--font-body); font-size: var(--text-body-sm); font-weight: var(--weight-600);
  color: var(--teal-700); text-align: left; }
.fpk-add:active { color: var(--text-primary); }
.fpk-add:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }