/* Diary — compact mobile-first layout (the 2026-09 redesign).
   Everything sits on theme surfaces (var(--surface) / --surface-soft), so the night theme's navy
   page and the light cards both read well. Loaded after app.css: equal selectors win here. */
#tab-diary, #food-sheet, #entry-detail-sheet {
  --diary-line: color-mix(in srgb, var(--text-secondary) 18%, transparent);
  --diary-ink-coral: #8A3522; --diary-ink-sky: #1F5F86; --diary-ink-yellow: #6B4E00; --diary-ink-lavender: #43388C;
}
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
#tab-diary .muted, #food-sheet .muted { color: var(--text-secondary); font-weight: 600; }

/* ---- Sections: a tab bar of 5 equal parts (fits 320 px, no sideways scroll) ----
   One filled pill in the section's own colour slides under the active section (Food coral, Move
   sun, Sleep lavender, Water sky, More mint); the active icon and label turn the section's deep ink
   and a little bolder, the icon gives a small hop and a soft ring pulses once. Inactive sections stay
   quiet grey. No outline. Reduced motion (OS or html[data-motion]): the pill jumps, nothing moves.
   Contrast (AA, 12.5 px bold): each deep ink on its pill >= 4.8 : 1, the grey labels on the bar too.
   The fills are the section colours mixed with the cream surface (coral / sun / lavender 55 %, sky
   42 %, mint 70 %), written out as plain colours so the slide between them stays in sRGB. The active
   label takes its ink at once (no colour fade in), so it is never grey on the stronger pill. */
.diary-subtabs-wrap { padding-top: 0; margin-bottom: 12px; }
.diary-subtabs { --dst-i: 0; --dst-fill: #F8C3B4; --dst-ink: var(--diary-ink-coral);
  position: relative; isolation: isolate; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; padding: 4px; overflow: visible;
  background: var(--surface); border-radius: 18px; box-shadow: 0 1px 2px rgba(23, 34, 28, 0.05), var(--shadow-soft); }
.diary-subtabs[data-active="exercise"] { --dst-i: 1; --dst-fill: #F8DEA4; --dst-ink: var(--diary-ink-yellow); }
.diary-subtabs[data-active="sleep"] { --dst-i: 2; --dst-fill: #D0C9EE; --dst-ink: var(--diary-ink-lavender); }
.diary-subtabs[data-active="water"] { --dst-i: 3; --dst-fill: #C3DEEE; --dst-ink: var(--diary-ink-sky); }
.diary-subtabs[data-active="more"] { --dst-i: 4; --dst-fill: #BCDFCC; --dst-ink: var(--accent-strong); }
.diary-subtabs-pill { position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 24px) / 5); border-radius: 14px; pointer-events: none;
  background: var(--dst-fill);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--dst-ink) 14%, transparent), 0 4px 10px -4px color-mix(in srgb, var(--dst-ink) 45%, transparent);
  transform: translateX(calc(var(--dst-i) * (100% + 4px)));
  transition: transform 340ms cubic-bezier(.32, 1.25, .5, 1); } /* the colour changes at once, as it starts to slide */
.diary-subtabs button.diary-subtab-btn { position: relative; z-index: 1; flex-direction: column; justify-content: center; gap: 2px; min-width: 0; min-height: 46px; margin: 0; padding: 4px 2px; border-radius: 14px;
  background: transparent; box-shadow: none; color: var(--text-secondary); font-size: 12.5px; font-weight: 700; line-height: 1.2; white-space: nowrap; transition: color 200ms ease; }
.diary-subtabs .dst-icon { display: block; width: 19px; height: 19px; transition: transform 220ms ease; }
.diary-subtabs .dst-icon svg { display: block; width: 19px; height: 19px; }
.diary-subtabs button.diary-subtab-btn:hover { background: color-mix(in srgb, var(--surface-soft) 70%, transparent); color: var(--text-primary); transform: none; }
.diary-subtabs button.diary-subtab-btn.active, .diary-subtabs button.diary-subtab-btn.active:hover { background: transparent; color: var(--dst-ink); font-weight: 800; transition: none; }
.diary-subtabs button.diary-subtab-btn.active .dst-icon { transform: translateY(-1px); }
.diary-subtabs button.diary-subtab-btn.active .dst-icon svg { stroke-width: 2.4; }
.diary-subtabs button.diary-subtab-btn.is-hop .dst-icon { animation: dst-hop 460ms cubic-bezier(.3, 1.5, .5, 1); }
@keyframes dst-hop { 0% { transform: translateY(0) scale(1); } 38% { transform: translateY(-5px) scale(1.14); } 70% { transform: translateY(0) scale(0.97); } 100% { transform: translateY(-1px) scale(1); } }
/* The soft ring: once, as the pill arrives (it ends before the icon's hop, which clears .is-hop). */
.diary-subtabs button.diary-subtab-btn::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--dst-ink) 38%, transparent); }
.diary-subtabs button.diary-subtab-btn.is-hop::after { animation: dst-ring 380ms ease-out; }
@keyframes dst-ring { 0% { opacity: 0; transform: scale(0.9); } 35% { opacity: 1; } 100% { opacity: 0; transform: scale(1.07); } }
.diary-subtabs button.diary-subtab-btn:focus-visible { outline: 3px solid var(--accent-strong); outline-offset: -1px; }

/* ---- Cards and headings ----
   Each panel heading is a compact rounded band. Its right end (64 px) is kept free for the ONE
   mascot (js/companion.js puts it in the .mascot-slot; css/companion.css sizes the slot): no text
   or control ever sits under it. The slot is centred on the band's right end; a ~52 px mascot
   stands a few px above and below the 44 px band, inside the card's padding. */
#tab-diary .section { background: var(--surface); padding: 14px; margin-bottom: 12px; }
#tab-diary .dh-sec-head { --dh-tone: var(--accent-light); position: relative; min-height: 44px; margin: 0 0 12px; padding: 5px 64px 5px 14px; border-radius: 16px;
  background: linear-gradient(100deg, var(--dh-tone) 0%, color-mix(in srgb, var(--dh-tone) 52%, var(--surface)) 100%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text-primary) 4%, transparent); font-size: 16.5px; letter-spacing: -0.01em; line-height: 1.25; }
#tab-diary .dh-sec-head.tone-coral { --dh-tone: var(--coral-light); }
#tab-diary .dh-sec-head.tone-yellow { --dh-tone: var(--yellow-light); }
#tab-diary .dh-sec-head.tone-lavender { --dh-tone: var(--lavender-light); }
#tab-diary .dh-sec-head.tone-sky { --dh-tone: var(--sky-light); }
#tab-diary .dh-sec-head > span:first-child { flex: 1; min-width: 0; }
#tab-diary .dh-sec-head > .mascot-slot { position: absolute; right: 6px; top: 0; bottom: 0; margin: auto 0; }
.log-day { flex: none; padding: 2px 10px; border-radius: 999px; background: var(--surface); color: var(--text-primary); font-family: var(--font-body); font-size: 12.5px; font-weight: 700; }
#tab-diary .totals-row { margin-top: 8px; font-size: 13.5px; color: var(--text-secondary); gap: 6px 14px; }
#tab-diary .totals-row b { color: var(--text-primary); }
#tab-diary li { border-top-color: var(--diary-line); }
#tab-diary li.list-empty { border-top: none; color: var(--text-secondary); font-size: 13.5px; font-style: italic; }
#tab-diary li button.del, #food-sheet li button.del { min-width: 44px; min-height: 44px; justify-content: center; }

/* ---- Log food: meal chips, search, Scan / Describe / Barcode, Recent & saved ---- */
.meal-chips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
button.meal-chip { min-width: 0; min-height: 40px; margin: 0; padding: 0 2px; border: 1px solid var(--diary-line); border-radius: 999px; background: var(--surface); color: var(--text-primary); font-size: 13.5px; font-weight: 700; white-space: nowrap; box-shadow: none; }
button.meal-chip:hover { background: var(--accent-light); transform: none; }
button.meal-chip.active, button.meal-chip[aria-pressed="true"] { background: var(--accent-strong); border-color: var(--accent-strong); color: #fff; }
button.meal-chip:focus-visible, .rs-chip:focus-visible, .food-tool:focus-visible, .fsf-go:focus-visible, .meal-add:focus-visible, #tab-diary .entry-open:focus-visible { outline: 3px solid var(--accent-strong); outline-offset: 2px; }
.food-search-form { display: flex; gap: 8px; margin: 10px 0 8px; flex-wrap: nowrap; }
.food-search-form input[type="search"] { flex: 1; min-width: 0; margin: 0; border-radius: 14px; border-color: var(--diary-line); background: var(--surface); color: var(--text-primary); }
button.fsf-go { flex: none; width: 48px; min-height: 44px; padding: 0; margin: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 14px; background: var(--accent-strong); }
button.fsf-go svg { width: 20px; height: 20px; }
.food-tools { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
button.food-tool { display: flex; align-items: center; justify-content: center; gap: 6px; min-width: 0; min-height: 44px; margin: 0; padding: 0 6px; border-radius: 14px; background: var(--coral-light); color: var(--diary-ink-coral); font-size: 14px; font-weight: 700; box-shadow: none; }
button.food-tool:hover { background: color-mix(in srgb, var(--coral) 22%, var(--surface)); transform: none; }
button.food-tool svg { width: 18px; height: 18px; flex: none; }
.food-search-panel { margin-top: 8px; border: 1px solid var(--diary-line); border-radius: 14px; background: var(--surface); color: var(--text-primary); max-height: min(62vh, 480px); overflow-y: auto; overscroll-behavior: contain; }
.food-search-panel .search-row { border-top-color: var(--diary-line); }
.food-search-panel .search-row:first-child, .food-search-panel .search-section-label + .search-row { border-top: none; }
.food-search-panel .search-row:hover { background: var(--surface-soft); }
.food-search-panel .search-row.is-before .sr-name::after { content: "  ↺"; color: var(--text-secondary); font-weight: 600; }
.food-search-panel .search-footer { border-top-color: var(--diary-line); }
.food-search-panel .search-footer.strong { background: var(--surface-soft); }
.food-search-panel .search-hint.ai-note { background: #FFF4E5; color: #6B3F00; font-size: 13.5px; }
.recent-saved { margin-top: 12px; }
.rs-label { margin: 0 0 6px; color: var(--text-secondary); font-size: 12px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
.rs-rail { display: flex; gap: 8px; overflow-x: auto; overscroll-behavior-x: contain; padding: 2px 2px 6px; scroll-snap-type: x proximity; scrollbar-width: thin; }
.rs-rail.is-empty { display: block; overflow: visible; }
button.rs-chip { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 1px; max-width: 190px; min-height: 52px; margin: 0; padding: 7px 12px; border: 1px solid var(--diary-line); border-radius: 14px; background: var(--surface-soft); color: var(--text-primary); text-align: left; font-size: 14px; font-weight: 700; box-shadow: none; scroll-snap-align: start; }
button.rs-chip:hover { background: var(--accent-light); transform: none; }
button.rs-chip .sr-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 800; }
.rs-sub { color: var(--text-secondary); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.rs-glyph { display: inline-block; min-width: 18px; margin-left: 2px; padding: 0 5px; border-radius: 999px; font-size: 11.5px; font-weight: 800; line-height: 17px; text-align: center; vertical-align: 1px; }
button.rs-chip.rs-saved { background: var(--yellow-light); }
.rs-empty { margin: 0; color: var(--text-secondary); font-size: 13.5px; }

/* ---- The day's food, by meal ----
   Each meal is a soft rounded block. Folded: name, kcal (≈ when part is estimated), item count and a
   "+" to add to it. Open: up to 3 compact rows ("View all N" when there are 5 or more), the meal's
   P / C / F, "+ Add to <meal>" and "Save as meal". A row is one button: it opens the food's sheet
   (amount, meal, source, Delete with Undo) — there is no delete button in the list. */
.diary-day .diary-food-header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin-bottom: 4px; }
.diary-day .diary-food-header h2 { margin: 0; font-size: 18px; letter-spacing: -0.01em; }
.day-total { flex: 1 1 100%; color: var(--text-secondary); font-size: 14px; }
@media (min-width: 560px) { .day-total { flex: 0 1 auto; margin-left: auto; text-align: right; } }
.day-total b { color: var(--text-primary); font-size: 16px; }
.day-est { display: block; font-size: 13px; }
.day-macros { display: block; font-size: 12.5px; }
#tab-diary .dh-disclosure.legend-toggle { min-height: 44px; margin: 4px 0 0; padding: 6px 12px; border-radius: 12px; font-size: 13.5px; }
#tab-diary .diary-day .meal-block { margin: 4px 0 0; padding: 0 10px; border: 0; border-radius: 16px;
  background: color-mix(in srgb, var(--surface-soft) 85%, var(--surface)); box-shadow: inset 0 0 0 1px var(--diary-line); }
#tab-diary .diary-day #food-by-meal > .meal-block:first-child { margin-top: 6px; }
#tab-diary .meal-block.is-empty .meal-block-header { padding: 2px 0; }
.meal-head { display: flex; align-items: center; gap: 6px; }
#tab-diary .meal-block-header { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 48px; margin: 0; padding: 4px 0; border-radius: 10px; background: none; color: var(--text-primary); font-size: 15px; font-weight: 700; text-align: left; box-shadow: none; cursor: default; }
.meal-head > button.meal-block-header { flex: 1; min-width: 0; }
#tab-diary button.meal-block-header { cursor: pointer; }
#tab-diary button.meal-block-header:hover { color: var(--text-primary); background: transparent; transform: none; }
#tab-diary button.meal-block-header:hover .meal-name { text-decoration: underline; text-decoration-color: var(--diary-line); text-underline-offset: 3px; }
#tab-diary button.meal-block-header:focus-visible { outline: 3px solid var(--accent-strong); outline-offset: 2px; }
.meal-block-header .meal-name { display: flex; flex: 1; align-items: center; gap: 8px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.meal-sum { flex: none; font-size: 14.5px; font-weight: 800; white-space: nowrap; }
.meal-title { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.meal-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.meal-count { color: var(--text-secondary); font-size: 12px; font-weight: 600; }
.meal-caret { flex: none; width: 14px; text-align: center; }
/* Drawn chevrons, the same as every other disclosure (css/app.css .dh-disclosure): down = open, right = folded. */
.meal-caret::after { content: ""; display: inline-block; width: 7px; height: 7px; margin: -3px 2px 0; border-right: 2px solid var(--text-secondary); border-bottom: 2px solid var(--text-secondary); border-radius: 1px; transform: rotate(45deg); transition: transform 150ms ease; }
button.meal-block-header[aria-expanded="false"] .meal-caret::after { transform: rotate(-45deg); }
button.meal-add { flex: none; min-height: 36px; margin: 0; padding: 0 12px; border-radius: 999px; background: var(--accent-light); color: var(--accent-strong); font-size: 13.5px; font-weight: 800; box-shadow: none; }
button.meal-add:hover { background: var(--accent-2); color: var(--text-primary); transform: none; }
button.meal-add.meal-add-icon { width: 36px; min-width: 36px; padding: 0; font-size: 20px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; }
#tab-diary .meal-block .meal-list { margin: 0; }
#tab-diary .food-entry-row { gap: 4px; padding: 0; border-top: 1px solid var(--diary-line); }
#tab-diary .food-entry-row.is-busy { opacity: 0.45; pointer-events: none; }
#tab-diary .food-entry-row .entry-open, #tab-diary .item-open { display: flex; flex: 1; align-items: center; gap: 10px; width: 100%; min-width: 0; min-height: 48px; margin: 0; padding: 4px 2px;
  flex-wrap: nowrap; border-radius: 10px; background: none; box-shadow: none; color: var(--text-primary); font-size: 15px; font-weight: 400; text-align: left; cursor: pointer; }
#tab-diary .food-entry-row .entry-open:hover, #tab-diary .item-open:hover { background: color-mix(in srgb, var(--surface) 70%, transparent); transform: none; }
#tab-diary .item-open:focus-visible { outline: 3px solid var(--accent-strong); outline-offset: 2px; }
.fr-icon { flex: none; width: 24px; font-size: 18px; text-align: center; }
.fr-main { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.fr-top { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.fr-name { flex: 1; min-width: 0; overflow: hidden; font-size: 14.5px; font-weight: 700; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.fr-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 1px 4px; color: var(--text-secondary); font-size: 12px; line-height: 1.35; }
.fr-kcal { flex: none; font-size: 14px; font-weight: 800; white-space: nowrap; }
/* A quiet "⋯": the row opens its actions. */
.fr-more { flex: none; width: 16px; height: 16px; border-radius: 999px; opacity: 0.55;
  background: radial-gradient(circle, currentColor 1.5px, transparent 1.9px) 0 50% / 5.33px 100% repeat-x; color: var(--text-secondary); }
.badge.badge-mini { padding: 1px 7px; font-size: 11px; font-weight: 700; }
/* Source badges at AA contrast in the Diary and its sheets (the shared colours are a little light for 11 px text). */
:is(#tab-diary, #food-sheet, #entry-detail-sheet) .badge:not(.internal, .label, .custom, .warn, .incomplete) { color: var(--accent-strong); }
:is(#tab-diary, #food-sheet, #entry-detail-sheet) .badge.internal:not(.ai) { color: #7A4A00; }
button.meal-more { display: block; width: 100%; min-height: 44px; margin: 0; padding: 0 4px; border: 0; border-top: 1px dashed var(--diary-line); border-radius: 0; background: none; box-shadow: none;
  color: var(--accent-strong); font-size: 13.5px; font-weight: 800; text-align: left; }
button.meal-more::after { content: ""; display: inline-block; width: 6px; height: 6px; margin: -3px 0 0 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; border-radius: 1px; transform: rotate(45deg); }
button.meal-more[aria-expanded="true"]::after { transform: translateY(3px) rotate(-135deg); }
button.meal-more:hover { background: none; color: var(--text-primary); transform: none; }
button.meal-more:focus-visible { outline: 3px solid var(--accent-strong); outline-offset: 2px; }
.meal-actions { display: flex; justify-content: space-between; gap: 12px; padding: 0 0 4px; }
.meal-actions .link-btn { font-size: 13.5px; }
.source-legend { padding: 2px 4px 0; }
.source-legend ul { margin: 6px 0 2px; padding: 0; }
#tab-diary .source-legend li { display: block; padding: 3px 0; border: none; font-size: 13px; line-height: 1.45; }
.source-legend .note { margin: 2px 0 0; font-size: 12.5px; }

/* ---- Exercise ---- */
#tab-diary .exercise-suggest { margin: 10px 0 0; }
/* Activity and minutes share one row (the speed / incline fields, when needed, go below). */
#exercise-form { grid-template-columns: minmax(0, 1fr) 96px; }
#exercise-form .ex-activity { grid-column: 1; grid-row: 1; }
#exercise-form .ex-minutes { grid-column: 2; grid-row: 1; }
#exercise-form .ex-speed { grid-row: 2; }
#tab-diary .ex-estimate { background: var(--surface-soft); }
#tab-diary .ex-estimate.pending { color: #7a4d00; background: #fff4e5; }
.ex-flags { display: block; margin-top: 4px; color: #7a4d00; }
#met-info-toggle { margin-top: 10px; }
.ex-method { padding: 8px 2px 0; font-size: 13px; }
.ex-method-line { margin: 0 0 6px; font-weight: 700; overflow-wrap: anywhere; }
.ex-method .note { margin-bottom: 4px; }
.ex-row, .sl-row { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.sl-row { display: block; line-height: 1.4; }
#tab-diary li.item-row { padding: 0; border-top: 1px solid var(--diary-line); }
.ex-row-name { font-weight: 700; overflow-wrap: anywhere; }
.ex-row-sub { color: var(--text-secondary); font-size: 12.5px; }
.ex-row-kcal { flex: none; font-weight: 800; white-space: nowrap; }

/* ---- Sleep ---- */
.diary-sleep .sleep-mode-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin: 0 0 10px; padding: 4px; border-radius: 14px; background: var(--surface-soft); }
.diary-sleep .sleep-mode-toggle button { min-height: 44px; margin: 0; padding: 0 6px; border-radius: 11px; background: transparent; color: var(--text-secondary); font-size: 14px; white-space: nowrap; box-shadow: none; }
.diary-sleep .sleep-mode-toggle button:hover { background: var(--surface); transform: none; }
.diary-sleep .sleep-mode-toggle button.active { background: var(--surface); color: var(--diary-ink-lavender); box-shadow: 0 1px 3px rgba(23, 34, 28, 0.12); }
#sleep-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin-bottom: 4px; }
#sleep-form .sleep-night { margin: 0; }
#sleep-form .sleep-inputs.active { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
#sleep-form .sleep-field input { width: 100%; min-width: 0; margin: 0; }
#sleep-form input[name="note"] { width: 100%; min-width: 0; margin: 0; }
.sleep-live { font-size: 15px; font-weight: 800; }
.sleep-live:empty { display: none; }
.sleep-submit-row { display: flex; align-items: center; gap: 12px; }
.sleep-submit-row button[type="submit"] { flex: 1; margin: 0; }
.sleep-submit-row .link-btn { flex: none; margin: 0; font-size: 14px; }

/* ---- Water ---- */
.water-meter { margin-bottom: 10px; }
.water-meter-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.water-meter-top b { font-size: 20px; font-weight: 800; letter-spacing: -0.01em; }
.water-meter-top span { color: var(--text-secondary); font-size: 13.5px; font-weight: 700; }
.water-bar { position: relative; height: 12px; margin-top: 6px; overflow: hidden; border-radius: 999px; background: var(--sky-light); }
.water-bar .river-fill { position: absolute; top: 0; bottom: 0; left: 0; right: auto; width: var(--fill-pct, 0%); height: auto; border-radius: inherit; transition: width 400ms ease; }
.quick-add-row.water-chips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-bottom: 0; }
.water-chips button.water-quick { min-width: 0; min-height: 44px; margin: 0; padding: 0 4px; border-radius: 12px; background: var(--sky-light); color: var(--diary-ink-sky); font-size: 14px; white-space: nowrap; box-shadow: none; }
.water-chips button.water-quick:hover { background: color-mix(in srgb, var(--sky) 25%, var(--surface)); transform: none; }
.water-form { display: flex; flex-wrap: nowrap; gap: 8px; margin: 10px 0 0; }
.water-form input { flex: 1; min-width: 0; margin: 0; }
.water-form button { flex: none; margin: 0; }
/* The day's water: one small chip per drink (amount · time); a chip opens its sheet. */
#tab-diary #water-list { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; }
#tab-diary #water-list li { display: block; padding: 0; border: 0; }
#tab-diary #water-list li.list-empty { flex: 1 1 100%; }
#tab-diary .water-chip { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; width: auto; min-width: 64px; min-height: 44px; padding: 3px 12px; border-radius: 12px; line-height: 1.2;
  background: var(--surface); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sky) 45%, transparent); color: var(--text-primary); font-size: 13.5px; }
#tab-diary .water-chip b { font-weight: 800; font-size: 13.5px; }
#tab-diary .water-chip .muted { font-size: 12px; }
#tab-diary .water-item.is-pending .water-chip { opacity: 0.7; }

/* ---- More: steps, weight, note ---- */
.more-form { display: block; margin: 0 0 14px; }
.more-form:last-child { margin-bottom: 0; }
.more-label { display: block; margin-bottom: 6px; font-size: 14.5px; font-weight: 800; }
.more-row { display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; }
.more-row input { flex: 1 1 auto; min-width: 0; max-width: 220px; margin: 0; }
.more-row button { flex: none; margin: 0; }
.saved-mark { color: var(--accent-strong); font-size: 14px; font-weight: 800; }
.more-note { margin: 6px 0 0; }
#diary-note-input { width: 100%; min-height: 84px; margin: 0 0 8px; resize: vertical; }
.weight-history { margin: 6px 0 0; }
#tab-diary .weight-history li { padding: 6px 0; font-size: 13.5px; }
#tab-diary .dh-disclosure.weight-history-toggle { min-height: 44px; margin-top: 8px; font-size: 13.5px; }

/* ---- The serving sheet (#food-sheet) and the entry details sheet ---- */
#food-sheet, #entry-detail-sheet { background: var(--surface); color: var(--text-primary); }
#food-sheet { padding: 0 16px; overscroll-behavior: contain; }
#food-sheet .fs-card { margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; }
.fs-head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 0 4px; background: var(--surface); }
.fs-head h3 { display: flex; align-items: center; gap: 8px; min-width: 0; margin: 0; color: var(--text-primary); font-size: 18px; font-weight: 800; }
.fs-icon { flex: none; font-size: 22px; }
.fs-title-text { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow-wrap: anywhere; }
.fs-head .sheet-close { flex: none; }
.fs-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 8px; }
.fs-alt { color: var(--text-secondary); font-size: 12.5px; }
.fs-uncert { margin: 0 0 10px; padding: 8px 10px; border-radius: 12px; background: var(--surface-soft); color: var(--text-primary); font-size: 13.5px; font-weight: 700; line-height: 1.4; }
.fs-uncert:empty { display: none; }
.fs-uncert[data-kind="ai"] { background: #F1E8FF; color: #3F2672; }
.fs-uncert[data-kind="calculated"], .fs-uncert[data-kind="unknown"] { background: #FFF4E5; color: #6B3F00; }
.fs-uncert[data-kind="database"] { background: var(--accent-light); color: var(--accent-strong); }
.fs-uncert[data-kind="label"] { background: #E6F0FF; color: #1F4E99; }
#food-sheet .serving-chips .chip { min-width: 48px; }
#entry-detail-title { color: var(--text-primary); font-size: 18px; font-weight: 800; }
#food-sheet .fs-note { margin: -4px 0 10px; }
.fs-label { display: block; margin: 0 0 4px; color: var(--text-secondary); font-size: 12.5px; font-weight: 700; }
.fs-amount .qty-stepper { margin-bottom: 8px; }
#food-sheet .qty-stepper input { width: 96px; flex: none; margin: 0; background: var(--surface); color: var(--text-primary); }
#food-sheet .serving-chips { margin: 0 0 6px; }
#food-sheet .chip[aria-pressed="true"] { border-color: var(--accent-strong); background: var(--accent-light); color: var(--accent-strong); }
.fs-hint { margin: 0 0 8px; color: var(--text-secondary); font-size: 13px; }
.fs-row { margin: 10px 0; }
.fs-result { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; margin: 10px 0; padding: 8px 12px; border-radius: 14px; background: var(--surface-soft); }
.fs-result .kcal-big { font-size: 24px; }
.fs-result .macro-line { margin: 0; }
.fs-more-btn { margin: 2px 0; }
.fs-more { padding: 8px 2px 4px; font-size: 13px; }
.fs-more .estimate-note, .fs-more .per100-line { margin-bottom: 8px; }
.fs-sub-title { margin: 8px 0 4px; color: var(--text-secondary); font-weight: 800; }
.fs-foot { position: sticky; bottom: 0; z-index: 2; margin-top: 8px; padding: 10px 0 calc(12px + env(safe-area-inset-bottom, 0px)); background: var(--surface); box-shadow: 0 -10px 14px -12px rgba(0, 0, 0, 0.35); }
.fs-foot .form-error { margin: 0 0 8px; }
.fs-foot .editor-actions button { height: auto; min-height: 48px; margin: 0; }
.fs-foot .editor-actions .fs-add { flex: 2; }
.fs-prep-note { margin: 0 0 10px; }
#food-sheet .manual-grid .fs-foot { margin-top: 0; }
#food-sheet .manual-grid .fs-row { margin: 0; }
/* Saved meal: a checklist with an amount per item */
.sm-list { margin: 4px 0 8px; }
#food-sheet li.sm-item { flex-wrap: wrap; justify-content: flex-start; gap: 4px 8px; padding: 6px 0; border-top: 1px solid var(--diary-line); font-size: 14.5px; }
#food-sheet li.sm-item:first-child { border-top: none; }
#food-sheet li.sm-item.is-off .sm-name, #food-sheet li.sm-item.is-off .sm-kcal { opacity: 0.5; text-decoration: line-through; }
.sm-check { display: flex; flex: 1 1 55%; align-items: center; gap: 8px; min-width: 0; min-height: 44px; cursor: pointer; }
.sm-check input { flex: none; width: 22px; height: 22px; margin: 0; }
.sm-name { min-width: 0; font-weight: 700; overflow-wrap: anywhere; }
.sm-list.is-static .sm-name { flex: 1 1 55%; }
.sm-amt { display: flex; align-items: center; gap: 6px; }
.sm-amt input { width: 84px; min-width: 0; flex: none; margin: 0; }
.sm-kcal { margin-left: auto; font-weight: 800; white-space: nowrap; }
.sm-manage { display: flex; justify-content: space-between; gap: 16px; margin: 4px 0; }
.sm-manage .sm-delete, #entry-detail-sheet .ed-delete { color: #B3261E; }
.sm-rename-row { margin: 6px 0; }
.sm-rename-row input { flex: 1 1 auto; max-width: none; }
.save-meal-form { display: block; margin: 0; }
.save-meal-form input[name="mealName"] { width: 100%; min-width: 0; margin: 0 0 8px; }
/* Entry details: edit amount, move to meal, delete — then where the numbers came from */
.entry-detail-kcal .badge { font-size: 11.5px; font-weight: 700; vertical-align: middle; }
.ed-edit { margin: 10px 0; padding: 10px 12px; border-radius: 14px; background: var(--surface-soft); }
.ed-edit .qty-stepper { margin-bottom: 6px; }
.ed-edit .qty-stepper input { width: 96px; flex: none; margin: 0; }
.ed-edit .editor-label { margin: 6px 0 4px; color: var(--text-secondary); font-size: 12.5px; font-weight: 700; }
.ed-preview { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 6px; font-weight: 800; }
.ed-preview button { margin: 0; }
#entry-detail-sheet .dh-disclosure.ed-source-toggle { min-height: 44px; margin: 4px 0 0; font-size: 14px; }
#entry-detail-sheet .ed-source .entry-detail-list { margin-top: 8px; }
#entry-detail-sheet .item-lead { font-size: 19px; }
#entry-detail-sheet .item-lead .muted { color: var(--text-secondary); font-size: 14px; font-weight: 600; }
#entry-detail-sheet .editor-actions { margin-top: 12px; }
/* A toast shows at the top while these sheets are open, so it never covers their rows or buttons. */
body:has(#food-sheet.active) .toast, body:has(#entry-detail-sheet.active) .toast { top: calc(12px + env(safe-area-inset-top, 0px)); bottom: auto; }

/* ---- Touch: 44 px targets ---- */
@media (pointer: coarse) {
  button.meal-chip, button.meal-add, #tab-diary .meal-actions .link-btn, #food-sheet .link-btn, #entry-detail-sheet .link-btn,
  #food-sheet .chip, #entry-detail-sheet .meal-chip, #entry-detail-sheet button.small, #food-sheet button.small { min-height: 44px; }
  button.meal-add.meal-add-icon { width: 44px; min-width: 44px; }
}
/* Narrow phones (360 px): a little tighter so four meals and four water chips fit on one line. */
@media (max-width: 380px) {
  button.meal-chip { font-size: 13px; }
  .diary-subtabs button.diary-subtab-btn { font-size: 12px; }
  button.food-tool { gap: 4px; font-size: 13.5px; }
  .water-chips button.water-quick { font-size: 13px; }
}

/* ---- Motion: the app setting (reduced / off) and the OS setting ---- */
html[data-motion="reduced"] #tab-diary *, html[data-motion="off"] #tab-diary *,
html[data-motion="reduced"] #food-sheet *, html[data-motion="off"] #food-sheet *,
html[data-motion="reduced"] #entry-detail-sheet *, html[data-motion="off"] #entry-detail-sheet * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
html[data-motion="reduced"] #food-sheet, html[data-motion="off"] #food-sheet,
html[data-motion="reduced"] #entry-detail-sheet, html[data-motion="off"] #entry-detail-sheet { transition: none !important; }
/* "*" never matches ::after, where the carets are drawn. */
html[data-motion="reduced"] .meal-caret::after, html[data-motion="off"] .meal-caret::after { transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  .water-bar .river-fill, .meal-caret::after, .diary-subtabs-pill, .diary-subtabs .dst-icon, .diary-subtabs button.diary-subtab-btn { transition: none; }
  .diary-subtabs button.diary-subtab-btn.is-hop .dst-icon, .diary-subtabs button.diary-subtab-btn.is-hop::after { animation: none; }
}
/* No hop and no slide with Motion set to Reduced / Off (the "*" rule above covers the pill too). */
html[data-motion="reduced"] .diary-subtabs-pill, html[data-motion="off"] .diary-subtabs-pill { transition: none !important; }
html[data-motion="reduced"] .diary-subtab-btn::after, html[data-motion="off"] .diary-subtab-btn::after { animation: none !important; }

/* Per-meal protein / carbs / fat, inside an open meal (missing macros read "—", never 0). */
.meal-macros { margin: 2px 0 0; padding: 0 2px; font-size: 12.5px; }
.day-save-row { justify-content: flex-end; margin-top: 4px; }