/* food.css — the Food tab (js/tab_food.js) and the Log food sheet and its
 * screens (js/logfood.js, used by Today and Food). Every class starts with
 * `food-`; the log sheet's with `food-log-`. REVAMP-DESIGN §2.4, §4, §5.
 *
 * The board, the meter, the food rows, the capture tiles, the pills and the
 * tags are the kit's (base.css); this file only lays them out and draws what
 * the kit has no part for: the plan row, the Day screen's meals, the slot
 * sheet, the places and reviews, the week picker, the log sheet's search and
 * groups, the forms. Tokens only; the accent marks only what the person did
 * or plans (§4.1), red only past a ceiling (the kit's), and a width rule
 * answers to its column (`@container`), never to the viewport (§3.3). */

/* ------------------------------------------------------------- the face */

/* The face's own root (js/tab_food.js): `display: contents`, so the board,
 * the rows and the views are still the column's own items and gaps. */
.food-face { display: contents; }

.food-views-top:empty,
.food-views-bottom:empty { display: none; }

/* The face fits one 390 x 844 screen, Event meals and all: the board's rows
 * are 40px here (--board-row), not the kit's 44. Each cell's hit area still
 * reaches --tap (the kit's hit ::before), so nothing gets harder to press. */
.food-board { margin-top: 2px; --board-row: 40px; }

/* The plan row (§2.4 item 4): a title, the open slots in words, and the
 * face's one filled pill. */
.food-plan-row {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-height: 60px;
  /* No side inset: the title starts on the board's and the rows' left edge
   * and the pill ends on their right one, to the pixel. */
  padding: var(--s-2) 0;
  border-top: 1px solid var(--line);
}
.food-plan-main { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }
.food-plan-title { font: var(--t-row); overflow-wrap: anywhere; text-wrap: pretty; }
.food-plan-kicker { font-weight: 560; color: var(--ink); }
.food-plan-sub { font: var(--t-sub); color: var(--ink-2); text-wrap: pretty; }
.food-plan-go { flex: none; }
/* MEAL-PLANNING-SPEC §6.5: on wide the plan row that opened the pane is
 * washed, as a nav row is (base.css), and its pill has stepped down to quiet
 * (js/tab_food.js), the pane's Accept being the next action. */
.food-plan-row[data-pane-open] { position: relative; border-top-color: transparent; isolation: isolate; }
.food-plan-row[data-pane-open]::before {
  content: "";
  position: absolute;
  inset: 0 -12px;
  z-index: -1;
  border-radius: 12px;
  background: var(--accent-wash-bg);
}
.food-plan-row[data-pane-open] + .food-rows { border-top-color: transparent; }

.food-rows { border-top: 1px solid var(--line); }

/* ------------------------------------------------------- the Day screen */

.food-day { display: grid; gap: 4px; }
.food-day-why { font: var(--t-cap); color: var(--ink-2); text-wrap: pretty; }
.food-day .meter { margin: var(--s-2) 0 2px; }

/* The day's figure (the A pass): one number in the hero's condensed width,
 * its unit in words, and the verdict over the day's own line at the right —
 * the Today hero's grammar, a size down. The subtitle keeps the date only. */
.food-day-fig {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-3);
  padding-top: var(--s-1);
}
.food-day-cap-left { display: grid; gap: 2px; min-width: 0; }
.food-day-sub { display: flex; align-items: center; flex-wrap: wrap; gap: 4px var(--s-2); }
.food-day-big {
  font: var(--t-display);
  font-stretch: 85%;
  letter-spacing: -.02em;
}
.food-day-unit { font: 500 var(--t-sub-size)/1.2 var(--font); color: var(--ink-2); }
.food-day-fig.is-line .food-day-big { color: var(--ink-3); }
.food-day-verdict {
  display: grid;
  justify-items: end;
  gap: 2px;
  max-width: 58%;
  padding-bottom: 3px;
  text-align: right;
}
.food-day-cap-right { font: 560 var(--t-sub-size)/1.3 var(--font); color: var(--ink); text-wrap: balance; }
.food-day-line { font: var(--t-cap); color: var(--ink-2); }
.food-day-notes { display: grid; gap: 4px; padding-top: var(--s-2); }

.food-meals { display: grid; margin-top: var(--s-2); }
/* One line per meal: its mark, the slot and its clock, the meal, kcal over
 * protein, and one action. Eaten is solid in the person's mark colour,
 * planned an outline of it, open a plus in ink-3 — the board's grammar. */
.food-meal {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr) auto auto;
  align-items: center;
  column-gap: var(--s-3);
  min-height: 52px;
  padding: 4px 0;
}
.food-meal + .food-meal { border-top: 1px solid var(--line); }
.food-meal-mark { position: relative; width: 12px; height: 12px; border-radius: 999px; }
.food-meal.is-eaten .food-meal-mark { background: var(--accent-mark); }
.food-meal.is-planned .food-meal-mark { box-shadow: inset 0 0 0 1.75px var(--accent-mark); }
/* Planned on a day gone by and never logged: a small hollow ring in grey,
 * with its words ("Not logged: …"); not the person's colour, not counted. */
.food-meal.is-missed .food-meal-mark { width: 9px; height: 9px; margin-left: 1.5px; box-shadow: inset 0 0 0 1.5px var(--ink-3); }
/* A held slot (the Day screen and a draft day; the code's `kept`): room held
 * for the person's usual meal, nothing planned. A dotted ring, never the
 * accent, always with its word "held" (MEAL-PLANNING-SPEC §6.7). */
.food-meal.is-kept .food-meal-mark { box-sizing: border-box; box-shadow: none; border: 1.75px dotted var(--ink-3); }
.food-meal.is-kept .food-meal-name { color: var(--ink-2); }
.food-meal.is-kept .food-meal-num b { font-weight: 450; color: var(--ink-2); }
.food-meal.is-open .food-meal-mark { border-radius: 0; }
.food-meal.is-open .food-meal-mark::before,
.food-meal.is-open .food-meal-mark::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 0;
  width: 2px;
  height: 12px;
  border-radius: 1px;
  background: var(--ink-3);
}
.food-meal.is-open .food-meal-mark::after { transform: rotate(90deg); }
.food-meal-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1px;
  min-width: 0;
  min-height: var(--tap);
  align-content: center;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  text-align: left;
}
button.food-meal-main { cursor: pointer; }
.food-meal-slot { display: flex; align-items: baseline; gap: 6px; font: var(--t-cap); color: var(--ink-2); }
.food-meal-slot-name { font-weight: 560; color: var(--ink); }
.food-meal-name { font: 450 var(--t-body-size)/1.35 var(--font); overflow-wrap: anywhere; text-wrap: pretty; }
/* A shared dinner's line says the table ("Shared with Jordan", §6.3). */
.food-meal-shared { display: block; font: var(--t-cap); color: var(--ink-2); }
.food-meal.is-planned .food-meal-name,
.food-meal.is-missed .food-meal-name,
.food-meal.is-open .food-meal-name { color: var(--ink-2); }
.food-meal-num { text-align: right; white-space: nowrap; }
.food-meal-num b { font: 560 var(--t-body-size)/1.25 var(--font); }
.food-meal-u { font: var(--t-cap); color: var(--ink-2); }
.food-meal-p { display: block; font: var(--t-cap); color: var(--ink-2); }
/* "Dinner · Not logged": the state said once, on the slot's line. */
.food-meal-state { font-weight: 450; color: var(--ink-2); }
.food-meal-state::before { content: "\00B7"; margin-right: 6px; color: var(--ink-3); }
.food-meal-act:empty { display: none; }
/* One grid for the day's meals: an eaten line (no action) keeps its figure
 * in the same column as a planned line's, which sits left of its Log. */
@supports (grid-template-columns: subgrid) {
  .food-meals { grid-template-columns: 14px minmax(0, 1fr) auto auto; column-gap: var(--s-3); }
  .food-meal { grid-column: 1 / -1; grid-template-columns: subgrid; }
  .food-meals > :not(.food-meal) { grid-column: 1 / -1; }
  .food-meal-act:empty { display: block; }
  /* A day with no action on any line (one still to come): no empty action
   * column, so the figures end on the pane's right edge, not a gap short. */
  .food-meals:not(:has(.food-meal-act:not(:empty))) { grid-template-columns: 14px minmax(0, 1fr) auto; }
  .food-meals:not(:has(.food-meal-act:not(:empty))) .food-meal-act { display: none; }
}

/* Wider than a phone (the pane): the slot and the meal share the line, as
 * the mockup's pane has them. */
@container (min-width: 520px) {
  .food-meal-main { grid-template-columns: 110px minmax(0, 1fr); column-gap: var(--s-3); align-items: center; }
  .food-meal-slot { display: grid; gap: 0; }
  .food-meal-slot-name { font: 560 var(--t-body-size)/1.2 var(--font); }
  .food-meal-state::before { content: none; }
  /* A shared dinner's table line sits under the meal, the slot beside both. */
  .food-meal-slot { grid-row: span 2; }
  .food-meal-shared { grid-column: 2; }
}

/* "Log something else": the day's own way into Log food (today, days gone). */
.food-day-more { display: flex; padding: var(--s-2) 0 2px; border-top: 1px solid var(--line); }

.food-day-prep { display: grid; gap: 4px; }
.food-day-prep .sec-head { padding-top: var(--s-4); }
.food-day-prep-line { font: var(--t-sub); color: var(--ink-2); text-wrap: pretty; }

.food-day-dup {
  display: grid;
  gap: 4px;
  margin: var(--s-2) 0;
  padding: var(--s-3);
  border-radius: var(--r-tile);
  background: var(--surface-2);
  font: var(--t-sub);
  color: var(--ink);
  overflow-wrap: anywhere;
}
.food-day-dup-line { color: var(--ink-2); }

/* The default pane's own head: no back link, the corner pill on the right. */
.food-pane-head { justify-content: space-between; }

/* ------------------------------------------------------- the slot sheet */

.food-slot { display: grid; gap: var(--s-2); }
.food-slot-item {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-height: 52px;
}
.food-slot-item + .food-slot-item { border-top: 1px solid var(--line); }
.food-slot-main { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }
.food-slot-name { font: var(--t-row); overflow-wrap: anywhere; }
.food-slot-sub { font: var(--t-sub); color: var(--ink-2); }
.food-slot-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-2); }

/* ------------------------------------------------------ the week picker */

.food-weeks { display: grid; }
.food-week {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  min-height: 52px;
  padding: 0 var(--s-3);
  border: 0;
  border-radius: var(--r-field);
  background: none;
  color: var(--ink);
  font: var(--t-row);
  text-align: left;
  cursor: pointer;
}
.food-week + .food-week { margin-top: 2px; }
.food-week.is-on { background: var(--accent-wash); }
.food-week-here,
.food-week-near { font: var(--t-cap); color: var(--ink-2); }

/* ------------------------------------------------ prep, shared, events */

.food-prep,
.food-shared { display: grid; }
.food-prep-item,
.food-shared-item {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-height: 48px;
  padding: 6px 0;
}
.food-prep-item + .food-prep-item,
.food-shared-item + .food-shared-item { border-top: 1px solid var(--line); }
.food-prep-item { flex-wrap: wrap; }
.food-prep-line { flex: 1 1 100%; font: var(--t-body); text-wrap: pretty; }
.food-prep-note { font: var(--t-sub); color: var(--ink-2); }
.food-shared-item { flex-wrap: wrap; }
.food-shared-day { flex: 0 0 100%; font: var(--t-cap); color: var(--ink-2); }
.food-shared-line { flex: 1 1 auto; min-width: 0; font: var(--t-body); text-wrap: pretty; }
.food-shared-num { flex: none; font: var(--t-sub); color: var(--ink-2); }

/* Over the allowance is arithmetic, not misconduct: ink, never red. */
.food-events { display: grid; gap: var(--s-2); }
.food-events-hero { display: grid; gap: var(--s-2); padding: var(--s-1) 0 2px; }
.food-events-n { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px var(--s-2); min-width: 0; }
.food-events-big { font: var(--t-display); font-stretch: 85%; letter-spacing: -.02em; }
.food-events-unit { font: 500 var(--t-sub-size)/1.2 var(--font); color: var(--ink-2); }
.food-events-pips { display: flex; gap: 6px; }
.food-events-pip { width: 14px; height: 14px; border-radius: 999px; box-shadow: inset 0 0 0 1.75px var(--ink-2); }
.food-events-pip.is-used { background: var(--accent-mark); box-shadow: none; }
.food-events-figure { font: var(--t-sub); color: var(--ink-2); }
.food-events-law,
.food-events-note,
p.food-events-last { font: var(--t-sub); color: var(--ink-2); text-wrap: pretty; }
.food-events-group { display: grid; }
.food-events-list { display: grid; }
.food-event { display: grid; gap: 2px; min-height: 52px; align-content: center; padding: var(--s-2) 0; }
.food-event + .food-event { border-top: 1px solid var(--line); }
.food-event-name { font: var(--t-row); overflow-wrap: anywhere; }
.food-event-meta { font: var(--t-sub); color: var(--ink-2); }

/* -------------------------------------------------- places and reviews */

.food-places { display: grid; gap: var(--s-4); }
.food-venue { display: grid; gap: var(--s-2); }
.food-venue-review { display: grid; gap: 4px; }
.food-venue-review-meta { font: var(--t-sub); color: var(--ink-2); }
.food-venue-verdict { font: var(--t-body); text-wrap: pretty; overflow-wrap: anywhere; }
.food-venue-group { display: grid; }
.food-venue-group-title {
  padding: var(--s-4) 0 2px;
  font: 600 var(--t-sub-size)/1.2 var(--font);
  color: var(--ink-2);
}
.food-note { font: var(--t-cap); color: var(--ink-2); text-wrap: pretty; }

.food-reviews { display: grid; gap: var(--s-2); }
.food-review { display: grid; gap: 4px; padding: var(--s-3) 0; }
.food-review + .food-review { border-top: 1px solid var(--line); }
.food-review-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 2px var(--s-3); }
.food-review-venue { font: var(--t-row); overflow-wrap: anywhere; }
.food-review-meta { font: var(--t-cap); color: var(--ink-2); }
.food-review-text { font: var(--t-body); overflow-wrap: anywhere; text-wrap: pretty; }
.food-review-text.is-empty { color: var(--ink-2); }
.food-review-actions { display: flex; gap: var(--s-2); }
.food-review-form { display: grid; gap: var(--s-3); }
.food-review-verdict { min-height: 120px; }
.food-review-problem,
.food-log-problem { font: var(--t-sub); color: var(--ink); }
.food-review-problem:empty,
.food-log-problem:empty { display: none; }

.food-library { display: grid; gap: var(--s-2); }

/* A long list's find field (Places, the library): the Log food search box's
 * shape, a size quieter; it narrows the rows in place. */
.food-find { display: grid; gap: var(--s-2); }
.food-find-box {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 14px;
  background: var(--surface-2);
  cursor: text;
}
.food-find-mark { flex: none; width: 18px; height: 18px; color: var(--ink-2); }
.food-find-box .food-find-input,
.food-find-box .food-find-input:focus {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 42px;
  padding: 0;
  border: 0;
  outline: none;
  box-shadow: none;
  background: transparent;
  color: var(--ink);
  font: 400 var(--t-row-size)/1.2 var(--font);
}
.food-find-box:focus-within { box-shadow: inset 0 0 0 2px var(--accent-ink); }
.food-find-input::placeholder { color: var(--ink-3); }
.food-find-input::-webkit-search-cancel-button { -webkit-appearance: none; }
.food-find-none { font: var(--t-sub); color: var(--ink-2); }
.food-find-none[hidden],
[data-find][hidden],
[data-find-group][hidden],
[data-find-note][hidden] { display: none; }
.food-library-group { display: grid; }

/* ------------------------------------------------ the Log food sheet */

/* The sheet keeps one height while results come and go under the search,
 * so its top edge never moves under the finger as a person types. */
.food-log-sheet { min-height: min(80dvh, 720px); }
.food-log { display: grid; gap: var(--s-3); align-content: start; }
.food-log-lead { margin-top: -6px; font: var(--t-sub); color: var(--ink-2); text-wrap: pretty; }
/* "Change": a word in the person's ink, with the full tap height. */
.food-log-change {
  position: relative;
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent-ink);
  font: 560 var(--t-sub-size)/1.4 var(--font);
  cursor: pointer;
}
.food-log-change::before { content: ""; position: absolute; inset: -14px -8px; }
.food-log-slots[hidden] { display: none; }

.food-log-searchbox {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 14px;
  border-radius: 14px;
  background: var(--surface-2);
  cursor: text;
}
.food-log-search-mark { flex: none; width: 20px; height: 20px; color: var(--ink-2); }
/* The field inside the box carries no box of its own. 17px: iOS zooms under
 * 16 (§4.5). */
.food-log-searchbox .food-log-search,
.food-log-searchbox .food-log-search:focus {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 44px;
  padding: 0;
  border: 0;
  outline: none;
  box-shadow: none;
  background: transparent;
  color: var(--ink);
  font: 400 var(--t-row-size)/1.2 var(--font);
}
.food-log-searchbox:focus-within { box-shadow: inset 0 0 0 2px var(--accent-ink); }
.food-log-search::placeholder { color: var(--ink-3); }

.food-log-results { display: grid; }
.food-log-group { display: grid; }
.food-log-group-title {
  padding: var(--s-4) 0 2px;
  font: 600 var(--t-sub-size)/1.2 var(--font);
  color: var(--ink-2);
}
.food-log-empty { padding: var(--s-4) 0 0; font: var(--t-sub); color: var(--ink-2); text-wrap: pretty; }

.food-log-create {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  width: 100%;
  min-height: 60px;
  margin-top: var(--s-2);
  padding: var(--s-2) 0;
  border: 0;
  border-top: 1px solid var(--line);
  background: none;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.food-log-create-main { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }
.food-log-create-name { font: 560 16px/1.3 var(--font); overflow-wrap: anywhere; }
.food-log-create-sub { font: var(--t-sub); color: var(--ink-2); }
.food-log-create-mark {
  flex: none;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--quiet-bg);
  box-shadow: var(--lift);
}

/* The duplicate question's two lines. */
.food-log-dup-line { font: var(--t-sub); color: var(--ink-2); overflow-wrap: anywhere; }

/* --------------------------------------- Portion, New food, Details */

.food-log-portion-screen,
.food-log-form { display: grid; gap: var(--s-4); }
.food-log-field { display: grid; gap: var(--s-2); }
.food-log-field-k { font: 600 var(--t-sub-size)/1.2 var(--font); color: var(--ink-2); }
.food-log-field .stepper { justify-self: start; }
.food-log-total { font: var(--t-sub); color: var(--ink-2); }
.food-log-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
/* A number is typed, never spun: no spinner arrows on Calories and the rest. */
.food-log-input[type="number"] { appearance: textfield; -moz-appearance: textfield; }
.food-log-input[type="number"]::-webkit-inner-spin-button,
.food-log-input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* A switch: a checkbox drawn as one, with the full row as its tap target. */
.food-log-toggle {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-height: 56px;
  cursor: pointer;
}
.food-log-toggle-main { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }
.food-log-toggle-label { font: var(--t-row); }
.food-log-toggle-hint { font: var(--t-sub); color: var(--ink-2); text-wrap: pretty; }
.food-log-switch {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  flex: none;
  width: 51px;
  height: 31px;
  margin: 0;
  border-radius: 999px;
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--edge);
  cursor: pointer;
  transition: background .14s var(--ease);
}
/* The thumb is `--raised` in both states (§4.2: "the switch's thumb"), edged
 * against the track, as the segmented control's selected segment is. */
.food-log-switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 25px;
  height: 25px;
  border-radius: 999px;
  background: var(--raised);
  /* A ring, not a --lift (dark mode's --lift is `none`, no member of a
   * shadow list), in --ink-3: --edge measures under 3:1 on dark --raised. */
  box-shadow: inset 0 0 0 1px var(--ink-3);
  transition: transform .14s var(--ease);
}
.food-log-switch:checked { background: var(--accent); box-shadow: none; }
/* On, the thumb is the light disc on the person's fill in both modes (a
 * dark thumb on the fill read as a hole in dark mode). */
.food-log-switch:checked::after {
  transform: translateX(20px);
  box-shadow: none;
  background: var(--thumb);
  background: light-dark(var(--thumb), var(--ink));
}
.food-log-switch:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }

.food-log-portion { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.food-log-portion[hidden] { display: none; }
.food-log-portion-k { font: var(--t-sub); color: var(--ink-2); }
.food-log-shared-block { display: grid; gap: var(--s-2); }

.food-log-sodium-block { display: grid; gap: var(--s-2); }
.food-log-sodium-block[hidden] { display: none; }
.food-log-sodium.is-picked { background: var(--accent-wash); border-color: var(--accent-ink); color: var(--ink); }

.food-log-plan-days { display: grid; gap: var(--s-2); }
.food-log-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.food-log-day {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 2px;
  min-height: 56px;
  padding: 4px 0;
  border: 1px solid var(--edge);
  border-radius: var(--r-field);
  background: none;
  color: var(--ink);
  cursor: pointer;
}
/* Today is washed as today's row is on the board (§4.1 "today's row or
 * column in week views"), never edged: an accent edge is a done or picked
 * chip, and this day is neither until it is tapped. A day gone by steps back. */
.food-log-day.is-today { background: var(--accent-wash); }
.food-log-day.is-today .food-log-day-name { font-weight: 650; }
.food-log-day.is-past { border-color: var(--line); color: var(--ink-2); }
.food-log-day-name { font: 560 var(--t-cap-size)/1.2 var(--font); }
.food-log-day-date { font: var(--t-cap); color: var(--ink-2); }

/* The model's fields, pushed as a screen: the block shows whole there. */
.food-log-details-screen .meal-fields-body[hidden] { display: grid; }

/* ------------------------------------------------------------ the barcode */

.food-log-scan { display: grid; gap: var(--s-3); }
.food-log-scan-stage[hidden] { display: none; }
.food-log-scan-video {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--r-tile);
  background: var(--surface-2);
}
.food-log-scan-status { font: var(--t-sub); color: var(--ink-2); text-wrap: pretty; }
.food-log-scan-manual { display: grid; gap: var(--s-3); }
.food-log-scan-controls:empty { display: none; }

/* A narrow sheet (a 320 phone): the numbers stack one to a line. */
@container (max-width: 340px) {
  .food-log-grid { grid-template-columns: minmax(0, 1fr); }
  .food-log-days { gap: 4px; }
}