/* "What to eat?" / "Ăn gì?" on Today (js/eatToday.js → #eat-today, words in js/eatStrings.js), and its notes inside
   the serving sheet. One heading row with two tabs; For you: the meal chips, "From your diary" (≤ 3 rows), "New for
   you" (about 12 rows in all: one column of compact 44 px rows on phones, a 3-column grid from 700 px),
   More dishes · Change suggestions, a live status line, a footer; explanations behind "Filters & why".
   Same cream card as the meals above it, mint accent, peach/sky/yellow icon chips.
   Contrast: text on --surface / --surface-soft uses --text-primary / --text-secondary (≥ 5.2:1),
   icon inks on their pastel (≥ 5:1). Nothing animates except the shared progress dot (off with
   reduced motion, css/app.css). */

.eat-today { margin: 0 0 12px; padding: 4px 10px 8px; border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-soft); color: var(--text-primary); }
.eat-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Heading row: title + the two tabs */
.eat-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; flex-wrap: wrap; }
.eat-title { display: flex; align-items: center; gap: 7px; margin: 0; font-family: var(--font-display); font-size: 16px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.2; }
.eat-title-icon { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 9px; background: var(--peach-light); color: var(--peach-strong); flex: 0 0 auto; }
.eat-title-icon svg { width: 16px; height: 16px; }
.eat-tabs { display: inline-flex; align-items: stretch; gap: 2px; padding: 0; border-radius: var(--radius-pill); background: var(--surface-soft); box-shadow: inset 0 0 0 1px var(--line-soft); }
.eat-tab { min-height: 44px; min-width: 44px; margin: 0; padding: 0 13px; border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--text-secondary); font-size: 13.5px; font-weight: 700; box-shadow: none; }
.eat-tab:hover { background: color-mix(in srgb, var(--accent-light) 60%, transparent); color: var(--text-primary); }
.eat-tab[aria-selected="true"] { background: var(--accent-light); color: var(--accent-strong); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent); }
.eat-tab:focus-visible { outline: 3px solid var(--accent-strong); outline-offset: 1px; }

.eat-panel { margin-top: 2px; }
.eat-sub { display: flex; align-items: center; gap: 6px; min-height: 18px; margin: 0 2px 4px; font-size: 12.5px; font-weight: 600; color: var(--text-secondary); line-height: 1.35; }

/* Rows: one button each (icon · name + why · kcal · chevron) */
.eat-list { display: grid; gap: 5px; margin: 0; padding: 0; list-style: none; }
/* (css/app.css gives every li a flex row, padding and a top line — not here.) */
.eat-list > li { display: block; min-width: 0; margin: 0; padding: 0; border: 0; font-size: inherit; }
.eat-list > li.eat-empty { display: flex; padding: 6px 10px; font-size: 13px; }
.eat-notes > li { display: list-item; margin: 0; padding: 0; border: 0; font-size: inherit; }
.eat-item { display: flex; align-items: center; gap: 10px; width: 100%; min-width: 0; min-height: 44px; margin: 0; padding: 3px 8px 3px 6px; border: 0; border-radius: 14px;
  background: var(--surface-soft); color: var(--text-primary); text-align: left; font-size: 14px; font-weight: 400; box-shadow: none; }
.eat-item:hover { background: var(--accent-light); color: var(--text-primary); transform: none; }
.eat-item:focus-visible { outline: 3px solid var(--accent-strong); outline-offset: 2px; }
.eat-item.is-compact { min-height: 44px; background: var(--surface); }
.eat-ico { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 32px; height: 32px; border-radius: 10px; }
.eat-ico svg { width: 17px; height: 17px; }
.eat-ico-history { background: var(--accent-light); color: var(--accent-strong); }
.eat-ico-saved { background: var(--yellow-light); color: var(--yellow-ink); }
.eat-ico-catalog { background: var(--peach-light); color: var(--peach-strong); }
.eat-ico-place { background: var(--sky-light); color: var(--sky-ink); }
.eat-txt { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; line-height: 1.25; }
.eat-name { font-size: 14.5px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eat-why { font-size: 12.5px; font-weight: 500; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eat-kcal { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; font-size: 14px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.eat-kcal small { font-size: 11px; font-weight: 600; color: var(--text-secondary); }
.eat-chev { flex: 0 0 auto; display: inline-flex; width: 14px; color: var(--text-secondary); }
.eat-chev svg { width: 14px; height: 14px; }
.eat-empty { display: flex; align-items: center; gap: 8px; min-height: 48px; margin: 0; padding: 6px 10px; border-radius: 14px; background: var(--surface-soft); font-size: 13px; color: var(--text-secondary); line-height: 1.4; }
/* The second line of a row: the reason (cut when long) and, for a new idea, where its numbers come from
   (never cut: "≈ recipe estimate" / "✓ VN FCT" / "✓ USDA"). */
.eat-why-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 1px 6px; min-width: 0; }
.eat-why-row .eat-why { flex: 0 1 auto; min-width: 0; }
/* Phones: an idea's name may take two lines (two ideas never look the same, e.g. "Bánh mì nướng bơ đậu phộng
   chuối" / "Bánh mì nướng bơ dầm"), and the source tag moves under the reason when the two don't fit on one
   line, so the reason keeps the row's whole width. */
#eat-panel-foryou .eat-name { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.eat-src { flex: 0 0 auto; padding: 0 5px; border-radius: 6px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-soft); font-size: 11px; font-weight: 700; line-height: 1.5; color: var(--text-secondary); white-space: nowrap; }
.eat-src-database { color: var(--accent-strong); }
/* Up to 430 px (every phone) the tag says "≈ recipe" (the tooltip and the spoken label say it in full). */
@media (max-width: 430px) { .eat-src-x { display: none; } }
/* On every phone (up to 430 px) the reason may take two lines too: one line cut 4 of 12 reasons at 375 / 390 px
   and 1 at 414 px (round 12); it is never longer than two. */
@media (max-width: 430px) { #eat-panel-foryou .eat-why { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } }

/* For you: the meal chips (always visible), the two groups, the actions and the live line */
.eat-slots { margin: 2px 0 6px; }
.eat-slots .eat-chip { flex: 1 1 auto; min-width: 0; padding: 0 10px; }
.eat-label.eat-group { display: flex; align-items: baseline; gap: 4px; margin: 6px 2px 4px; }
.eat-count { font-weight: 700; letter-spacing: 0; text-transform: none; }
.eat-list-ideas { margin-bottom: 2px; }
.eat-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.eat-actions .eat-act { flex: 1 1 0; min-width: 0; }
.eat-status { margin: 4px 2px 0; font-size: 12.5px; font-weight: 600; line-height: 1.4; color: var(--text-secondary); }
/* Empty, the live line stays rendered — in the accessibility tree before its first message, so that message is
   announced — but takes no space (never display: none). */
.eat-status:empty { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* Footer: Try something new + Filters & why */
.eat-foot { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.eat-chip { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; margin: 0; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-pill);
  background: var(--surface); color: var(--text-primary); font-size: 13px; font-weight: 700; box-shadow: none; line-height: 1.2; text-align: center; }
.eat-chip:hover { background: var(--accent-light); border-color: color-mix(in srgb, var(--accent) 55%, transparent); color: var(--text-primary); }
.eat-chip[aria-pressed="true"] { background: var(--accent-light); border-color: var(--accent); color: var(--accent-strong); }
.eat-chip:focus-visible { outline: 3px solid var(--accent-strong); outline-offset: 2px; }
.eat-chip-icon { display: inline-flex; color: var(--peach-strong); }
.eat-chip-icon svg { width: 15px; height: 15px; }
.eat-new { flex: 0 0 auto; color: var(--accent-strong); }
.dh-disclosure.eat-more-btn { flex: 1 1 auto; width: auto; min-width: 0; min-height: 44px; padding: 0 12px; border-radius: var(--radius-pill); font-size: 13.5px; }

/* Details */
.eat-more { margin-top: 8px; padding: 8px 10px 4px; border-radius: 14px; background: var(--surface-soft); }
.eat-row { display: grid; gap: 4px; margin-bottom: 8px; }
.eat-label { margin: 2px 0 0; font-size: 11.5px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-secondary); }
.eat-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.eat-note { margin: 0 0 6px; font-size: 13px; line-height: 1.45; color: var(--text-secondary); }
.eat-notes { margin: 4px 0 6px; padding-left: 18px; display: grid; gap: 3px; font-size: 12.5px; line-height: 1.45; color: var(--text-secondary); }
.link-btn.eat-inline-btn { min-height: 44px; margin: -12px 0; padding: 0 4px; vertical-align: middle; font-size: 13px; }
.eat-list-more { margin: 4px 0 8px; }
.eat-alts .eat-chip { max-width: 100%; white-space: normal; text-align: left; justify-content: flex-start; }

/* Nearby: the search row, location button, progress, messages, attribution */
.eat-nb-start { display: grid; gap: 6px; }
.eat-search { display: flex; gap: 6px; margin: 0; }
.eat-search input { flex: 1 1 auto; min-width: 0; min-height: 44px; margin: 0; padding: 8px 12px; border-radius: 12px; font-size: 16px; }
.eat-go { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 44px; min-height: 44px; margin: 0; padding: 0; border-radius: 12px; background: var(--accent-strong); color: #fff; }
.eat-go svg { width: 18px; height: 18px; }
.eat-go:hover { background: color-mix(in srgb, var(--accent-strong) 86%, #000); }
.eat-loc { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 44px; margin: 0; padding: 0 12px; border: 0; border-radius: 12px;
  background: var(--surface-soft); color: var(--accent-strong); font-size: 14px; font-weight: 700; box-shadow: none; }
.eat-loc:hover { background: var(--accent-light); color: var(--accent-strong); }
.eat-loc-icon { display: inline-flex; }
.eat-loc-icon svg { width: 18px; height: 18px; }
.eat-nb-body:empty { display: none; }
.eat-nb-body { margin-top: 6px; }
.eat-nb-start[hidden] + .eat-nb-body { margin-top: 0; }
.eat-nb-where { justify-content: space-between; margin-bottom: 4px; }
.eat-nb-where-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eat-progress { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 4px 0 10px; border-radius: 14px; background: var(--surface-soft); font-size: 13.5px; font-weight: 600; }
.eat-progress > span:nth-child(2) { flex: 1 1 auto; min-width: 0; }
.eat-msg { padding: 8px 10px; border-radius: 14px; background: var(--peach-light); color: var(--text-primary); }
.eat-msg p { margin: 0 0 6px; font-size: 13.5px; line-height: 1.45; }
.eat-msg-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.eat-attrib { display: flex; align-items: center; min-height: 44px; margin: 2px 0 -6px; padding: 0 2px; font-size: 11.5px; line-height: 1.3; color: var(--text-secondary); text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: 2px; }
.eat-attrib:hover { color: var(--text-primary); }
/* The address search matched poorly: which place is used, and the other answers. */
.eat-weak { margin: 0 0 6px; padding: 6px 8px; border-radius: 12px; background: var(--yellow-light); }
.eat-weak .eat-note { margin: 0 0 4px; color: var(--text-primary); }
.eat-weak .eat-chip { max-width: 100%; white-space: normal; text-align: left; }
/* Nearby rows: three short lines (dish · portion / restaurant · distance / street · listed price). */
.eat-portion { font-weight: 600; color: var(--text-secondary); }
.eat-place-item { padding-top: 5px; padding-bottom: 5px; }
.eat-why-3 { font-size: 12px; }

/* Inside the serving sheet (#food-sheet): why it was suggested / the place */
#food-sheet .eat-ctx { margin: 0 0 10px; padding: 8px 10px; border-radius: 12px; background: var(--surface-soft); font-size: 13px; line-height: 1.45; }
#food-sheet .eat-ctx p { margin: 0 0 4px; }
#food-sheet .eat-ctx p:last-child { margin-bottom: 0; }
#food-sheet .eat-ctx-place { display: flex; align-items: flex-start; gap: 6px; color: var(--text-primary); }
#food-sheet .eat-ctx-ico { display: inline-flex; flex: 0 0 auto; margin-top: 1px; color: var(--sky-ink); }
#food-sheet .eat-ctx-ico svg { width: 15px; height: 15px; }
#food-sheet .eat-ctx-note { color: var(--text-secondary); }
#food-sheet .dh-disclosure.eat-ctx-btn { min-height: 44px; margin: 4px 0 0; padding: 0 10px; background: var(--surface); font-size: 13.5px; }
#food-sheet .eat-ctx-more { margin-top: 6px; }
#food-sheet .eat-dl { display: grid; grid-template-columns: max-content 1fr; gap: 3px 12px; margin: 0 0 6px; font-size: 13px; }
#food-sheet .eat-dl dt { color: var(--text-secondary); }
#food-sheet .eat-dl dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 420px) { #food-sheet .eat-dl { grid-template-columns: 1fr; } #food-sheet .eat-dl dd { margin-bottom: 4px; } }
#food-sheet .eat-links { display: flex; flex-wrap: wrap; gap: 4px 14px; }
#food-sheet .eat-link { display: inline-flex; align-items: center; min-height: 44px; font-size: 13.5px; font-weight: 700; color: var(--accent-strong); }
#food-sheet .eat-place-card .eat-dl { margin-top: 6px; }
#food-sheet .eat-attrib { margin: 0; }

/* Narrow phones: a little tighter so the title and both tabs share one row at 360 px */
@media (max-width: 380px) {
  .eat-today { padding: 4px 8px 8px; }
  .eat-tab { padding: 0 11px; font-size: 13px; }
  .eat-title { gap: 6px; font-size: 15.5px; }
  .eat-item { gap: 8px; }
  .eat-slots .eat-chip { padding: 0 8px; font-size: 12.5px; }
}
@media (min-width: 700px) {
  .eat-today { padding: 8px 14px 12px; }
  /* Wide screens: rows sit three side by side (the diary block one row, the 12 ideas four rows). */
  .eat-panel > .eat-list:not(.eat-list-more) { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .eat-panel > .eat-list:not(.eat-list-more) .eat-why { white-space: normal; overflow: visible; text-overflow: clip; }
  /* For you tiles: the name (2 lines), the reason (2 lines), then the source tag and the kcal. */
  #eat-panel-foryou > .eat-list .eat-item { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; grid-template-areas: "ico name name" "ico why why" "ico src kcal";
    align-items: start; align-content: start; column-gap: 8px; row-gap: 2px; height: 100%; padding: 8px 10px 8px 8px; }
  #eat-panel-foryou > .eat-list .eat-txt, #eat-panel-foryou > .eat-list .eat-why-row { display: contents; }
  #eat-panel-foryou > .eat-list .eat-ico { grid-area: ico; }
  #eat-panel-foryou > .eat-list .eat-name { grid-area: name; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  #eat-panel-foryou > .eat-list .eat-why { grid-area: why; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  #eat-panel-foryou > .eat-list .eat-src { grid-area: src; justify-self: start; align-self: center; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
  #eat-panel-foryou > .eat-list .eat-kcal { grid-area: kcal; flex-direction: row; align-items: baseline; gap: 2px; align-self: center; }
  #eat-panel-foryou > .eat-list .eat-chev { display: none; }
  #eat-panel-foryou > .eat-list .eat-src-x { display: none; } /* a tile is ~200 px wide: "≈ recipe" (the tooltip and the spoken label say it in full) */
  .eat-slots .eat-chip { flex: 0 0 auto; min-width: 96px; }
  .eat-actions .eat-act { flex: 0 0 auto; min-width: 160px; }
}
html[data-motion="reduced"] .eat-today *, html[data-motion="off"] .eat-today * { transition: none !important; }
@media (prefers-reduced-motion: reduce) { .eat-today * { transition: none !important; } }