/* ===================== DHUT visual system (tokens) =====================
   "Milk" look: warm cream surfaces, one mint accent (+ a peach highlight), soft layered depth,
   hairlines instead of outlines. Every area stylesheet uses these names; the time-of-day themes
   below only tint the page and the hero, and keep the same mint accent all day (fewer competing
   colours). Contrast (WCAG AA, checked): --text-secondary ≥ 5.2:1 on every surface and pastel
   tint below; white on --accent 5.0:1, on --accent-strong 7.4:1; --accent-strong on
   --accent-light 6.4:1; each --*-ink on its --*-light ≥ 5:1. */
:root {
  /* Brand accents */
  --accent: #2F7D5C;           /* filled buttons, active states (white text 5.0:1) */
  --accent-strong: #235F46;    /* links, text on mint tints, hover of --accent */
  --accent-2: #9FD2B8;         /* soft decorative mint (bars, rings, dividers) */
  --accent-light: #E3F1E8;     /* mint milk: chips, selected rows */
  --mint: #2F7D5C;
  --mint-light: #E3F1E8;
  --peach: #EE9A74;            /* the warm highlight — decoration and bars, never small text */
  --peach-strong: #9A4A28;     /* text / icons on --peach-light (5.4:1) */
  --peach-light: #FDECE1;
  --bg-cream: #F7F2EA;

  /* Area tints (Diary sections, icon chips, charts): soft pastels + an ink for text/icons on them */
  --coral: #F2937A;   --coral-light: #FDEDE6;   --coral-ink: #A0452A;
  --yellow: #F2C35C;  --yellow-light: #FCF3DD;  --yellow-ink: #845C00;
  --sky: #6FB1DC;     --sky-light: #E8F2F8;     --sky-ink: #276A96;
  --lavender: #A99DE3; --lavender-light: #F0EDF8; --lavender-ink: #54469F;

  /* Text */
  --text-primary: #1E2722;
  --text-secondary: #58615B;
  --text-on-accent: #FFFFFF;

  /* Lines and depth: hairlines and soft shadows, no heavy borders */
  --line: rgba(74, 58, 36, 0.10);
  --line-soft: rgba(74, 58, 36, 0.065); /* card edges */
  --line-strong: rgba(74, 58, 36, 0.18);
  --shadow-1: 0 1px 2px rgba(64, 48, 24, 0.05), 0 2px 8px rgba(64, 48, 24, 0.045);
  --shadow-2: 0 1px 3px rgba(64, 48, 24, 0.05), 0 8px 22px rgba(64, 48, 24, 0.07);
  --shadow-3: 0 4px 10px rgba(40, 32, 20, 0.08), 0 18px 40px rgba(40, 32, 20, 0.14);
  --shadow-soft: var(--shadow-2);
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--accent) 38%, transparent);

  /* Shape */
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 26px;
  --radius-pill: 999px;

  /* Spacing scale (4 px steps) */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px;

  /* Type scale */
  --font-display: "Plus Jakarta Sans", Arial, sans-serif;
  --font-body: "Plus Jakarta Sans", Arial, sans-serif;
  --text-2xs: 11.5px; --text-xs: 12.5px; --text-sm: 13.5px; --text-md: 14.5px; --text-base: 16px; --text-lg: 18px; --text-xl: 22px;
  --lh-tight: 1.25; --lh-body: 1.5;
  --tracking-display: -0.015em;

  /* Icons: one stroke style everywhere (inline SVG, 24 px box, round caps) */
  --icon-sm: 16px; --icon-md: 20px; --icon-lg: 24px; --icon-stroke: 2;

  /* Tap target */
  --tap: 44px;
}
* { box-sizing: border-box; }
html { height: 100%; }
body { min-height: 100%; }
/* hidden always wins (several components set display on classes that also toggle [hidden]) */
[hidden] { display: none !important; }
body { font-family: var(--font-body); font-size: var(--text-base); line-height: var(--lh-body); max-width: 680px; margin: 0 auto; background-color: var(--app-bg-bottom); background-image: linear-gradient(180deg, var(--app-bg-top) 0, var(--app-bg-bottom) 900px); background-repeat: no-repeat; color: var(--text-primary); padding: 16px; padding-top: calc(16px + env(safe-area-inset-top, 0px)); padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; -webkit-tap-highlight-color: transparent; }
h1 { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 800; letter-spacing: var(--tracking-display); line-height: var(--lh-tight); margin: 0 0 4px; }
/* Reduced motion — the phone setting AND DHUT's own Motion setting (Profile › Preferences):
   nothing moves (no transitions, no looping or one-off animations). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}
html[data-motion="reduced"] *, html[data-motion="reduced"] *::before, html[data-motion="reduced"] *::after,
html[data-motion="off"] *, html[data-motion="off"] *::before, html[data-motion="off"] *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
h2 { font-family: var(--font-display); font-size: 19px; font-weight: 800; letter-spacing: var(--tracking-display); line-height: var(--lh-tight); margin: 0 0 10px; color: var(--text-primary); }
h3 { font-size: 15px; font-weight: 700; line-height: 1.3; margin: 12px 0 6px; color: var(--text-secondary); }
.note { font-size: var(--text-sm); color: var(--text-secondary); margin-bottom: 16px; line-height: var(--lh-body); }
/* The card: warm white on cream, a hairline and two soft shadows — never a heavy border. */
.section { background: var(--surface); border-radius: var(--radius-lg); padding: 14px; margin-bottom: 12px; box-shadow: 0 0 0 1px var(--line-soft), var(--shadow-1); }
/* One focus ring for every control (area rules may set their own). */
:where(button, a, summary, [role="button"], [tabindex]):focus-visible { outline: 3px solid var(--accent-strong); outline-offset: 2px; }
/* Night: the page is navy, where a dark ring alone is ~1.6:1 — a light halo around it keeps focus
   visible there and changes nothing on the light cards. */
html[data-time-theme="night"]:not([data-period]) :where(button, a, summary, [role="button"], [tabindex]):focus-visible { box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.92); }
:where(input, select, textarea):focus-visible { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); }
/* Top toolbar: the brand mark (a small leaf glyph + the DHUT wordmark — not a character, so it
   never reads as a second plant next to the one mascot), the date and today's weight. */
.toolbar-row { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.brand-mini { font-family: var(--font-display); font-weight: 800; font-size: 14px; letter-spacing: 0.08em; color: var(--brand-color); display: flex; align-items: center; gap: 6px; margin-right: 2px; line-height: 1; }
.brand-mark { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--brand-mark-bg); color: var(--brand-mark-ink); box-shadow: 0 0 0 1px var(--line); }
.brand-mark svg { width: 16px; height: 16px; display: block; }
.brand-word { display: inline-block; }
.date-pill { display: flex; align-items: center; background: var(--surface); border-radius: var(--radius-pill); padding: 3px 4px; box-shadow: 0 0 0 1px var(--line), var(--shadow-1); }
.date-pill input[type="date"] { border: none; background: none; box-shadow: none; font-size: 12px; padding: 2px 2px; width: 104px; color: var(--text-primary); font-weight: 600; font-variant-numeric: tabular-nums; }
.date-pill .ghost-btn { color: var(--accent-strong); }
.weight-pill { margin-left: auto; display: flex; align-items: center; gap: 5px; background: var(--surface); border-radius: var(--radius-pill); padding: 6px 12px; box-shadow: 0 0 0 1px var(--line), var(--shadow-1); color: var(--text-secondary); }
.weight-pill input { border: none; background: none; box-shadow: none; width: 38px; font-size: 13px; padding: 0; color: var(--text-primary); font-weight: 600; font-variant-numeric: tabular-nums; }
.weight-pill input:focus-visible { box-shadow: none; }
.weight-pill:has(input:focus-visible), .date-pill:has(input:focus-visible) { box-shadow: 0 0 0 1px var(--accent), var(--focus-ring); }

/* Tab pages */
.tab-page { display: none; }
.tab-page.active { display: block; }

/* Small icon-only / text buttons on light surfaces (the date arrows, onboarding's top actions). */
.ghost-btn { background: none; border: none; color: var(--accent-strong); font-size: 20px; padding: 4px 8px; line-height: 1; box-shadow: none; }
.ghost-btn:hover { background: var(--accent-light); border-radius: var(--radius-sm); }
@keyframes hero-float { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(-6px); } }
@keyframes hero-drift { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(10px); } }
@keyframes hero-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } }

/* ---- Time-of-day themes (fallback) ----
   Round 5: the look now follows html[data-period] (css/living.css, js/livingTheme.js), which the
   pre-paint script always sets; these band palettes only apply if that attribute is missing. ----
   Each time of day tints the page and the hero (peach morning, fresh-mint midday, blush
   afternoon, lavender evening, navy night); the accent stays DHUT's one mint all day, and every
   card stays a warm, light "milk" surface. Registered colour properties so a change fades. */
@property --app-bg-top { syntax: "<color>"; inherits: true; initial-value: #FAF6EF; }
@property --app-bg-bottom { syntax: "<color>"; inherits: true; initial-value: #F6F1E8; }
@property --hero-top { syntax: "<color>"; inherits: true; initial-value: #E6F2EA; }
@property --hero-bottom { syntax: "<color>"; inherits: true; initial-value: #FBF4EA; }
@property --accent { syntax: "<color>"; inherits: true; initial-value: #2F7D5C; }
@property --accent-strong { syntax: "<color>"; inherits: true; initial-value: #235F46; }
@property --accent-2 { syntax: "<color>"; inherits: true; initial-value: #9FD2B8; }
@property --accent-light { syntax: "<color>"; inherits: true; initial-value: #E3F1E8; }
:root {
  --app-bg-top: #FAF6EF; --app-bg-bottom: #F6F1E8;
  --hero-top: #E6F2EA; --hero-bottom: #FBF4EA;
  --hero-text: var(--text-primary); --hero-text-muted: var(--text-secondary); --hero-chip: rgba(255,255,255,0.72);
  --surface: #FFFEFB; --surface-soft: #F7F2EA; --surface-muted: #EFE9DF;
  --surface-glass: rgba(255,254,251,0.82); --surface-glass-strong: rgba(255,254,251,0.96);
  --brand-color: var(--accent-strong); --brand-mark-bg: var(--accent-light); --brand-mark-ink: var(--accent-strong);
  --nav-bg: rgba(255,254,251,0.97); --nav-ink: var(--text-secondary); --nav-active-bg: var(--accent-light);
  --page-text-muted: var(--text-secondary);
  --deco-a: #FFC94D; --deco-b: #FFFFFF; --deco-c: #FF8C74;
  /* Semantic nutrition colours — the same in every theme */
  --macro-kcal: #EE7B52; --macro-protein: #1C9E86; --macro-carbs: #E9A23B; --macro-fat: #5B8DEF;
  transition: --app-bg-top 800ms ease, --app-bg-bottom 800ms ease, --hero-top 800ms ease, --hero-bottom 800ms ease,
    --accent 500ms ease, --accent-strong 500ms ease, --accent-2 500ms ease, --accent-light 500ms ease;
}
html[data-time-theme="morning"] {
  --app-bg-top: #FDF2E7; --app-bg-bottom: #F7F1E7; --hero-top: #FFE6D4; --hero-bottom: #FFF5EA;
  --surface-soft: #FAF1E7; --deco-a: #FFC94D; --deco-b: #FFFFFF; --deco-c: #FF9E86;
}
html[data-time-theme="midday"] {
  --app-bg-top: #EFF6EE; --app-bg-bottom: #F6F2E9; --hero-top: #DFF0E6; --hero-bottom: #F4F5E9;
  --surface-soft: #F3F3EB; --deco-a: #FFE08A; --deco-b: #FFFFFF; --deco-c: #7CCB8A;
}
html[data-time-theme="afternoon"] {
  --app-bg-top: #FBEFEB; --app-bg-bottom: #F6F1E9; --hero-top: #FBE3DE; --hero-bottom: #FFF1E7;
  --surface-soft: #F9F0EA; --deco-a: #FFB8A1; --deco-b: #FFFFFF; --deco-c: #FF8FB1;
}
html[data-time-theme="evening"] {
  --app-bg-top: #F0EDF8; --app-bg-bottom: #E9E6F1; --hero-top: #E6E2F7; --hero-bottom: #F5EEF5;
  --surface-soft: #F3F0F6; --deco-a: #FFD98A; --deco-b: #FFFFFF; --deco-c: #B7AEF2;
}
html[data-time-theme="night"] {
  --app-bg-top: #ECEBF6; --app-bg-bottom: #E3E2F0; --hero-top: #1E2B55; --hero-bottom: #34427A;
  --hero-text: #F4F2FF; --hero-text-muted: #C9CEF3; --hero-chip: rgba(255,255,255,0.14);
  --surface: #FAF9FD; --surface-soft: #F0EFF7; --surface-muted: #E7E5F0; --surface-glass: rgba(250,249,253,0.95); --surface-glass-strong: #FFFFFF;
  --nav-bg: rgba(250,249,253,0.97);
  --deco-a: #FFE08F; --deco-b: #C8CEFF; --deco-c: #8E99E6;
}
/* The deep navy page only behind the signed-in app — login/onboarding text sits directly on the
   page background, so those screens keep the light night palette above. On navy, the brand,
   the page-level text (the estimates note) and the nav keep ≥ 4.5:1. */
html[data-time-theme="night"]:not([data-period]):has(#app-content:not([style*="none"])) {
  --app-bg-top: #182447; --app-bg-bottom: #27345D; --brand-color: #D6DCFF;
  --brand-mark-bg: rgba(255,255,255,0.12); --brand-mark-ink: #D6DCFF; --page-text-muted: #C9CEF3;
}

/* ---- Today hero: compact time-of-day scene ---- */
@keyframes mascot-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes leaf-sway-l { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(4deg); } }
@keyframes leaf-sway-r { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(-4deg); } }
@keyframes mascot-blink { 0%, 93%, 100% { transform: scaleY(1); } 96% { transform: scaleY(0.12); } }
@keyframes deco-twinkle { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
.m-sway-l, .m-sway-r { transform-box: view-box; transform-origin: 60px 25px; }
.m-blink { transform-box: view-box; transform-origin: 60px 59px; }
.mascot-live .m-sway-l { animation: leaf-sway-l 4.4s ease-in-out infinite; }
.mascot-live .m-sway-r { animation: leaf-sway-r 4.4s ease-in-out infinite; }
.mascot-live .m-blink { animation: mascot-blink 5.5s ease-in-out infinite; }
.world-hero { position: relative; overflow: hidden; border-radius: var(--radius-xl); background: linear-gradient(160deg, var(--hero-top) 0%, var(--hero-bottom) 100%); padding: 12px 12px 22px; margin-bottom: 14px; display: flex; flex-direction: column; gap: 10px; color: var(--hero-text); }
.world-hero-bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.hero-main { position: relative; z-index: 2; display: flex; align-items: center; gap: 10px; }
.world-mascot { width: 100px; height: 100px; flex-shrink: 0; position: relative; animation: mascot-float 3.6s ease-in-out infinite; }
.world-mascot svg { width: 100%; height: 100%; display: block; overflow: visible; }
.hero-copy { min-width: 0; flex: 1; }
.hero-date { display: inline-block; font-size: 12px; font-weight: 700; color: var(--hero-text-muted); background: var(--hero-chip); padding: 3px 10px; border-radius: 999px; margin-bottom: 6px; }
.greeting { font-family: var(--font-display); font-size: clamp(24px, 6.6vw, 46px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.08; color: var(--hero-text); overflow-wrap: anywhere; }
.greeting-sub { font-size: 14px; color: var(--hero-text-muted); margin-top: 4px; line-height: 1.45; }
.meal-prompt { position: relative; z-index: 2; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 50px; padding: 7px 12px 7px 8px; border-radius: 18px; background: var(--surface-glass); color: var(--text-primary); text-align: left; font-size: 14px; font-weight: 400; box-shadow: 0 4px 14px rgba(23,34,28,0.06); transition: transform 150ms ease, background 200ms ease; }
.meal-prompt:hover { background: var(--surface-glass-strong); transform: translateY(-1px); }
.meal-prompt:focus-visible, .log-tile:focus-visible { outline: 3px solid var(--accent-2); outline-offset: 2px; }
.meal-prompt-icon { width: 36px; height: 36px; border-radius: 12px; background: var(--accent-light); display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; }
.meal-prompt-text { min-width: 0; }
.meal-prompt-title { display: block; font-weight: 800; font-size: 15px; }
.meal-prompt-sub { display: block; font-size: 12.5px; color: var(--text-secondary); }
.meal-prompt-go { margin-left: auto; color: var(--accent-strong); font-weight: 800; font-size: 20px; line-height: 1; flex-shrink: 0; }
.world-stats-glass { position: relative; z-index: 2; background: var(--surface-glass); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border-radius: var(--radius-lg); padding: 10px 12px; display: flex; align-items: center; gap: 14px; box-shadow: 0 6px 20px rgba(23,34,28,0.08); color: var(--text-primary); }
.hero-context-msg { position: relative; z-index: 2; margin-top: -2px; font-size: 13px; font-weight: 600; color: var(--hero-text-muted); }
.world-hero-wave { position: absolute; left: 0; right: 0; bottom: -2px; line-height: 0; z-index: 1; }
.world-hero-wave svg { width: 100%; height: 20px; display: block; }
.hero-ring { width: 80px; height: 80px; border-radius: 50%; background: conic-gradient(var(--macro-kcal) var(--pct, 0%), #eef1f5 0); flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.hero-ring-center { width: 62px; height: 62px; border-radius: 50%; background: white; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.hero-big { font-family: var(--font-display); font-size: 21px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.05; }
.hero-label { font-size: 10px; font-weight: 500; color: var(--text-secondary); margin-top: 2px; }
.hero-substats { display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: var(--text-secondary); min-width: 0; flex: 1; }
.hero-substats-row { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.hero-substats-row .hs-icon { font-size: 13px; flex-shrink: 0; }
.hero-substats-row .hs-label { flex-shrink: 0; }
.hero-substats-row .hs-value { color: var(--text-primary); font-weight: 700; margin-left: auto; padding-left: 8px; }
/* Decorations (from theme.decorations) — small CSS shapes, never over the text */
.deco { position: absolute; display: block; }
.deco-sun { top: 12px; right: 14px; width: 30px; height: 30px; border-radius: 50%; background: var(--deco-a); box-shadow: 0 0 0 8px color-mix(in srgb, var(--deco-a) 35%, transparent); }
.deco-sun-high { top: -14px; right: 18%; width: 46px; height: 46px; border-radius: 50%; background: var(--deco-a); opacity: 0.55; box-shadow: 0 0 0 14px color-mix(in srgb, var(--deco-a) 25%, transparent); }
.deco-sun-low { bottom: -34px; right: -22px; width: 110px; height: 110px; border-radius: 50%; background: var(--deco-a); opacity: 0.35; }
.deco-cloud { top: 20px; right: 58px; width: 52px; height: 18px; border-radius: 20px; background: var(--deco-b); opacity: 0.85; animation: hero-drift 9s ease-in-out infinite; }
.deco-cloud-small { top: 56px; right: 12px; width: 32px; height: 12px; border-radius: 12px; background: var(--deco-b); opacity: 0.8; animation: hero-drift 11s ease-in-out infinite reverse; }
.deco-sparkle { bottom: 8px; left: 14px; font-size: 12px; line-height: 1; color: var(--deco-a); animation: deco-twinkle 3s ease-in-out infinite; }
.deco-flower { bottom: 26px; right: 14px; width: 18px; height: 18px; }
.deco-leaf { bottom: 30px; right: 12px; width: 26px; height: 26px; opacity: 0.7; transform: rotate(20deg); }
.deco-leaf-small { top: 58px; right: 10px; width: 16px; height: 16px; opacity: 0.55; transform: rotate(-30deg); }
.deco-heart { top: 12px; right: 16px; font-size: 18px; line-height: 1; color: var(--deco-c); opacity: 0.85; animation: deco-twinkle 3.4s ease-in-out infinite; }
.deco-heart-small { top: 48px; right: 44px; font-size: 11px; line-height: 1; color: var(--deco-c); opacity: 0.65; }
.deco-moon { top: 12px; right: 18px; width: 28px; height: 28px; border-radius: 50%; box-shadow: 7px -3px 0 0 var(--deco-a); transform: rotate(-12deg); }
.deco-star { top: 18px; right: 66px; font-size: 11px; line-height: 1; color: var(--deco-a); animation: deco-twinkle 2.6s ease-in-out infinite; }
.deco-star-small { top: 52px; right: 28px; font-size: 8px; line-height: 1; color: var(--deco-a); animation: deco-twinkle 3.3s ease-in-out infinite 0.6s; }
.deco-star-tiny { top: 36px; right: 44%; font-size: 7px; line-height: 1; color: var(--deco-b); animation: deco-twinkle 4s ease-in-out infinite 1.2s; }
.deco-star-far { top: 14px; right: 18px; font-size: 14px; line-height: 1; color: var(--deco-a); animation: deco-twinkle 3.8s ease-in-out infinite 0.3s; }
.deco-lamp-glow { bottom: -60px; left: -40px; width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(circle, rgba(255,214,150,0.5), rgba(255,214,150,0) 70%); }
@media (min-width: 700px) {
  .world-hero { padding: 24px 28px 38px; gap: 14px; }
  .hero-main { gap: 22px; }
  .world-mascot { width: 168px; height: 168px; }
  .greeting-sub { font-size: 17px; }
  .world-stats-glass { max-width: 460px; }
  .hero-ring { width: 104px; height: 104px; }
  .hero-ring-center { width: 80px; height: 80px; }
  .hero-big { font-size: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .world-mascot, .deco, .mascot-live .m-sway-l, .mascot-live .m-sway-r, .mascot-live .m-blink { animation: none !important; }
}

/* Login-screen illustration (positions/sizes are inline on its elements) */
.world-sun { position: absolute; border-radius: 50%; background: var(--yellow); animation: hero-pulse 3.2s ease-in-out infinite; }
.world-cloud { position: absolute; background: white; border-radius: 30px; opacity: 0.85; }
.world-cloud.c1 { animation: hero-drift 8s ease-in-out infinite; }
.world-cloud.c2 { animation: hero-drift 10s ease-in-out infinite reverse; }

/* ---- Motivation card (Today › More for today) ---- */
.motivation-card { display: flex; align-items: center; gap: 12px; background: linear-gradient(135deg, var(--accent-light), var(--surface) 80%); border-radius: var(--radius-lg); padding: 10px 14px; margin-bottom: 12px; box-shadow: 0 0 0 1px var(--line), var(--shadow-1); }
.motivation-text { margin: 0; font-size: var(--text-md); font-weight: 600; line-height: 1.45; color: var(--text-primary); }

/* ---- Onboarding base (css/onboarding.css refines it; Profile and Today reuse .ob-label) ---- */
.ob-progress-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.ob-progress-label { font-size: 14px; font-weight: 700; color: var(--text-secondary); }
.ob-progress-track { background: var(--surface-muted); border-radius: var(--radius-pill); height: 8px; overflow: hidden; margin-bottom: 22px; }
.ob-progress-fill { background: var(--accent); height: 100%; border-radius: var(--radius-pill); transition: width 300ms ease; width: 16.6%; }
.ob-step { display: none; }
.ob-step.active { display: block; animation: hero-pulse 1ms; }
.ob-heading { font-family: var(--font-display); font-size: 26px; font-weight: 800; letter-spacing: var(--tracking-display); margin-bottom: 6px; }
.ob-label { display: block; font-size: 13px; font-weight: 600; color: var(--text-secondary); margin: 14px 0 6px; }
.ob-step input[type="text"], .ob-step input[type="number"], .ob-step input[type="date"], .ob-step input[type="time"], .ob-step select { width: 100%; }
.ob-chip-group { display: flex; flex-wrap: wrap; gap: 8px; }
.ob-chip { background: var(--surface); color: var(--text-primary); border: 0; box-shadow: inset 0 0 0 1px var(--line-strong); padding: 9px 16px; border-radius: var(--radius-pill); font-size: 14px; font-weight: 600; }
.ob-chip:hover { background: var(--accent-light); }
.ob-chip.active { background: var(--accent); color: var(--text-on-accent); box-shadow: none; }
.ob-choice-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.ob-choice-card { background: var(--surface); border: 0; box-shadow: inset 0 0 0 1px var(--line-strong); border-radius: var(--radius-lg); padding: 16px 10px; text-align: center; font-weight: 700; font-size: 14px; cursor: pointer; }
.ob-choice-card.active { background: var(--accent-light); color: var(--accent-strong); box-shadow: inset 0 0 0 2px var(--accent); }
.ob-choice-icon { font-size: 26px; margin-bottom: 6px; }
.ob-bmi-preview { margin-top: 14px; background: var(--accent-light); border-radius: var(--radius-lg); padding: 12px 16px; font-size: 14px; color: var(--text-primary); }
.ob-bmi-preview b { font-size: 20px; font-weight: 800; }
.ob-nav-row { display: flex; align-items: center; gap: 10px; margin-top: 24px; }

/* ---- Sign-in: a two-column illustration on desktop ---- */
.auth-illustration { display: none; }
.auth-form-panel { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 20px 0; }
@media (min-width: 900px) {
  .auth-illustration { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 32px; flex: 1.5; min-height: 100vh; background: linear-gradient(160deg, var(--accent-light), var(--peach-light)); position: relative; overflow: hidden; padding: 40px; }
  .auth-form-panel { flex: 1; }
}
.auth-illustration-scene { position: relative; width: 320px; height: 320px; }
.auth-illustration-ground { position: absolute; left: -20%; right: -20%; bottom: -30px; height: 100px; border-radius: 50%; background: var(--accent-2); opacity: 0.5; }
.auth-illustration-mascot { position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); width: 190px; height: 190px; animation: hero-float 3.6s ease-in-out infinite; }
.auth-illustration-mascot svg { width: 100%; height: 100%; }
.auth-illustration-copy { text-align: center; max-width: 420px; }
.auth-illustration-kicker { font-family: var(--font-display); font-size: 15px; font-weight: 800; color: var(--accent-strong); letter-spacing: 0.12em; margin-bottom: 8px; }
.auth-illustration-title { font-family: var(--font-display); font-size: 36px; font-weight: 800; letter-spacing: -0.02em; color: var(--text-primary); line-height: 1.2; }
.auth-illustration-tagline { font-size: 16px; color: var(--text-secondary); margin-top: 10px; }
@media (min-width: 900px) { .auth-form-logo { display: none; } }

@media (max-width: 380px) { .world-mascot { width: 92px; height: 92px; } }

/* ---- Plan rows (Today › Details) ---- */
.plan-card-badge { font-size: 11px; font-weight: 700; color: var(--accent-strong); background: var(--accent-light); padding: 3px 9px; border-radius: var(--radius-pill); }
.plan-card-source { font-size: 11px; color: var(--text-secondary); white-space: nowrap; display: flex; align-items: center; gap: 4px; }
.plan-card-source-link { color: var(--accent-strong); cursor: pointer; font-weight: 700; }
.plan-card-warning { background: var(--yellow-light); color: var(--yellow-ink); font-size: 12px; border-radius: var(--radius-sm); padding: 8px 10px; margin-bottom: 10px; line-height: 1.5; }
.plan-rows { display: flex; flex-direction: column; gap: 10px; }
.plan-row { display: flex; align-items: center; gap: 10px; }
.plan-row-icon { width: 30px; height: 30px; border-radius: var(--radius-sm); flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 15px; }
.plan-row[data-group="nutrition"] .plan-row-icon { background: var(--coral-light); }
.plan-row[data-group="water"] .plan-row-icon { background: var(--sky-light); }
.plan-row[data-group="activity"] .plan-row-icon { background: var(--yellow-light); }
.plan-row[data-group="sleep"] .plan-row-icon { background: var(--lavender-light); }
.plan-row-main { flex: 1; min-width: 0; }
.plan-row-top { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; margin-bottom: 4px; }
.plan-row-label { font-weight: 600; color: var(--text-secondary); }
.plan-row-value { font-weight: 700; color: var(--text-primary); white-space: nowrap; }
.plan-row-value.empty { font-weight: 500; color: var(--text-secondary); font-size: 12px; }
.plan-row-track { background: var(--surface-muted); border-radius: 6px; height: 6px; overflow: hidden; }
.plan-row-fill { height: 100%; border-radius: 6px; transition: width 400ms ease; background: var(--accent); }
.plan-row[data-group="nutrition"] .plan-row-fill { background: var(--coral); }
.plan-row[data-group="water"] .plan-row-fill { background: var(--sky); }
.plan-row[data-group="activity"] .plan-row-fill { background: var(--yellow); }
.plan-row[data-group="sleep"] .plan-row-fill { background: var(--lavender); }
.plan-row-check { width: 20px; height: 20px; flex-shrink: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; color: white; background: #D9D4CA; transition: background 200ms ease; }
.plan-row-check.done { background: var(--accent); }
.plan-next { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line-strong); }
.plan-next-title { font-size: 12px; font-weight: 700; color: var(--text-secondary); margin-bottom: 6px; }
.plan-next-list { display: flex; flex-direction: column; gap: 6px; }
.plan-next-item { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--text-primary); background: var(--surface-soft); border-radius: var(--radius-md); padding: 8px 10px; }
.plan-next-item .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
.plan-empty { font-size: 13px; color: var(--text-secondary); text-align: center; padding: 4px; }

.note-preview-text { color: var(--text-secondary); }

/* Goals (Profile › Health goals › Custom targets) */
.goals-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.goals-grid label { font-size: 12px; color: var(--text-secondary); display: block; margin-bottom: 3px; }
.goals-grid input { width: 100%; }
.toggle-row { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 13px; }

/* ---- Form controls: a white field, a warm hairline, a mint focus ring ---- */
form { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
select, input, textarea { padding: 8px 10px; border: 1px solid var(--line-strong); border-radius: 12px; background-color: #FFFFFF; color: var(--text-primary); font-size: 16px; font-family: inherit; transition: border-color 150ms ease, box-shadow 150ms ease; }
input::placeholder, textarea::placeholder { color: #857E74; opacity: 1; }
select:hover, input:hover, textarea:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--line-strong)); }
select { flex: 2; min-width: 130px; }
input[type="number"] { flex: 1; min-width: 60px; }
input[type="text"] { flex: 2; min-width: 120px; }
input[type="time"] { flex: 1; min-width: 100px; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); }
input:disabled, select:disabled, textarea:disabled { background-color: var(--surface-soft); color: var(--text-secondary); }

/* ---- Buttons: primary (mint), secondary (warm soft), small; each area may style its own ---- */
button { padding: 9px 16px; border: none; border-radius: 12px; background: var(--accent); color: var(--text-on-accent); cursor: pointer; font-family: inherit; font-size: 16px; font-weight: 700; transition: background-color 150ms ease, box-shadow 150ms ease, color 150ms ease; }
button:hover { background: var(--accent-strong); }
button:active { filter: brightness(0.97); }
button:disabled { cursor: default; }
button.secondary { background: var(--surface-muted); color: var(--text-primary); box-shadow: inset 0 0 0 1px var(--line); }
button.secondary:hover { background: color-mix(in srgb, var(--surface-muted) 70%, var(--accent-light)); color: var(--text-primary); }
button.small { padding: 5px 10px; font-size: 13px; border-radius: 10px; }

ul { list-style: none; padding: 0; margin: 8px 0 0; }
li { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); font-size: 15px; gap: 8px; }
li .del { color: #B3261E; cursor: pointer; font-weight: bold; flex-shrink: 0; }
.totals-row { display: flex; gap: 16px; margin-top: 10px; font-size: 13px; color: var(--text-secondary); flex-wrap: wrap; }
.totals-row b { color: var(--text-primary); }

.meal-block { margin-bottom: 10px; }
.meal-block-header { display: flex; justify-content: space-between; font-size: 13px; font-weight: bold; color: var(--text-primary); border-bottom: 1px solid var(--line); padding-bottom: 6px; cursor: pointer; }
.meal-block-header:hover { color: var(--accent-strong); }

.sleep-mode-toggle { display: flex; gap: 8px; margin-bottom: 8px; }
.sleep-mode-toggle button { flex: 1; background: var(--surface-muted); color: var(--text-primary); }
.sleep-mode-toggle button.active { background: var(--accent); color: var(--text-on-accent); }
.sleep-inputs { display: none; }
.sleep-inputs.active { display: flex; }

.quick-add-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.quick-add-row button { background: var(--accent-light); color: var(--accent-strong); }
.quick-add-row button:hover { background: color-mix(in srgb, var(--accent-light) 70%, var(--accent-2)); }

textarea#daily-note { width: 100%; min-height: 90px; resize: vertical; }

.weight-summary-row { display: flex; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.weight-summary-row .box { flex: 1; min-width: 90px; background: var(--surface-soft); border-radius: var(--radius-md); padding: 8px; text-align: center; }
.weight-summary-row .box .val { font-family: var(--font-display); font-weight: 800; font-size: 20px; letter-spacing: var(--tracking-display); }
.weight-summary-row .box .lbl { font-size: 11.5px; color: var(--text-secondary); }

.progress-banner { background: var(--yellow-light); color: var(--yellow-ink); font-size: 13px; border-radius: var(--radius-md); padding: 10px 12px; line-height: 1.5; }
.progress-banner button { margin-top: 8px; }

.goal-mode-toggle { display: flex; gap: 8px; margin-top: 8px; }
.goal-mode-btn { flex: 1; padding: 10px; border-radius: var(--radius-md); border: 0; box-shadow: inset 0 0 0 1px var(--line-strong); background: var(--surface); color: var(--text-primary); font-weight: 700; font-size: 13px; cursor: pointer; }
.goal-mode-btn.active { background: var(--accent-light); color: var(--accent-strong); box-shadow: inset 0 0 0 2px var(--accent); }
.goals-grid input:disabled { background: var(--surface-soft); color: var(--text-secondary); }

.exercise-back-toggle { display: flex; gap: 8px; margin-top: 6px; }
.eb-btn { flex: 1; padding: 8px; border-radius: var(--radius-sm); border: 0; box-shadow: inset 0 0 0 1px var(--line-strong); background: var(--surface); color: var(--text-primary); font-weight: 600; font-size: 12px; cursor: pointer; }
.eb-btn.active { background: var(--accent-light); color: var(--accent-strong); box-shadow: inset 0 0 0 2px var(--accent); }

.plan-history-item { background: var(--surface-soft); border-radius: var(--radius-sm); padding: 8px 10px; margin-bottom: 6px; font-size: 12px; display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.plan-history-item.is-active { box-shadow: inset 0 0 0 1px var(--accent); background: var(--accent-light); }

/* The estimates note at the bottom of every tab (on the page background, navy at night). */
.disclaimer { text-align: center; margin: 16px 0 10px; }
.disclaimer-toggle { font-size: 12px; font-weight: 600; color: var(--page-text-muted); background: none; box-shadow: none; padding: 4px 12px; border-radius: var(--radius-pill); }
.disclaimer-toggle:hover { background: color-mix(in srgb, var(--page-text-muted) 12%, transparent); color: var(--page-text-muted); }
.disclaimer-detail { font-size: 12px; color: var(--page-text-muted); line-height: 1.5; max-width: 560px; margin: 6px auto 0; }

/* Search rows */
.search-row { padding: 10px 12px; cursor: pointer; border-top: 1px solid var(--line); min-height: 44px; display: flex; align-items: center; gap: 10px; }
.search-row:hover { background: var(--surface-soft); }
.sr-icon { font-size: 22px; width: 32px; text-align: center; flex-shrink: 0; }
.search-row .sr-name { font-weight: 700; font-size: 16px; }
.search-row .sr-sub { font-size: 13px; color: var(--text-secondary); margin-top: 2px; }
.search-empty { padding: 16px; text-align: center; }
.search-empty .actions { display: flex; gap: 8px; justify-content: center; margin-top: 10px; flex-wrap: wrap; }

/* Food editor card */
.food-editor-card { border: 0; box-shadow: 0 0 0 1px var(--line); border-radius: var(--radius-lg); padding: 14px; margin-bottom: 10px; background: var(--surface); }
.editor-title-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.editor-title-row b { font-size: 15px; }
.badge { font-size: 11px; padding: 2px 8px; border-radius: var(--radius-pill); background: var(--accent-light); color: var(--accent-strong); }
.badge.internal { background: #FFF1DE; color: #8A5100; }
.badge.custom { background: var(--surface-muted); color: var(--text-secondary); }
.editor-label { font-size: 12px; color: var(--text-secondary); margin-bottom: 6px; }
.qty-stepper { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.qty-btn { width: 36px; height: 36px; border-radius: var(--radius-sm); background: var(--accent-light); color: var(--accent-strong); font-size: 18px; font-weight: bold; padding: 0; flex-shrink: 0; }
.qty-btn:hover { background: color-mix(in srgb, var(--accent-light) 70%, var(--accent-2)); }
.qty-stepper input { width: 80px; text-align: center; height: 36px; }
.unit-label { font-size: 13px; color: var(--text-secondary); }
.nutrition-preview { background: var(--surface-soft); border-radius: var(--radius-md); padding: 10px 12px; margin-bottom: 12px; }
.kcal-big { font-family: var(--font-display); font-size: 26px; font-weight: 800; letter-spacing: var(--tracking-display); }
.macro-line { font-size: 13px; color: var(--text-secondary); margin-top: 2px; }
.editor-actions { display: flex; gap: 8px; }
.editor-actions button { flex: 1; height: 44px; border-radius: 12px; font-weight: bold; }

/* AI Scanner */
.scanner-modal { max-width: 480px; }
.scanner-modal [hidden] { display: none !important; }
#scan-preview { width: 100%; max-height: 220px; object-fit: cover; border-radius: var(--radius-md); margin: 8px 0; }
.scan-source-actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin: 6px 0 4px; }
.scan-source-actions button { min-height: 44px; padding: 0 18px; border-radius: var(--radius-pill); }
.choose-label-touch { display: none; }
@media (pointer: coarse) { .dz-desktop-hint, .choose-label-desktop { display: none; } .choose-label-touch { display: inline; } }
.scan-camera-frame { position: relative; background: #111; border-radius: 16px; overflow: hidden; aspect-ratio: 3 / 4; max-height: 56vh; margin: 0 auto; }
.scan-camera-frame video, .scan-camera-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.scan-camera-status { text-align: center; margin: 8px 0 4px; min-height: 1.2em; }
.scan-camera-actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 6px; }
.scan-camera-actions button { min-height: 44px; padding: 0 16px; border-radius: var(--radius-pill); }
.scan-camera-error { background: #FFF4E0; box-shadow: inset 0 0 0 1px #F3D9A8; color: #6B4200; border-radius: var(--radius-md); padding: 12px; margin: 8px 0; font-size: 14px; text-align: center; }
.scan-source-line { font-size: 12px; color: var(--text-secondary); margin: 2px 0 4px; }
.scan-prep-note { font-size: 12px; color: #8A4E00; margin: 2px 0 4px; }
.scan-food-card { border: 0; box-shadow: 0 0 0 1px var(--line); border-radius: 18px; padding: 10px 12px; margin-bottom: 8px; background: var(--surface); }
.confidence-high { background: #E4F4EA; color: #1A6B3E; }
.confidence-medium { background: #FFF1DE; color: #8A4E00; }
.confidence-low { background: #FDE9E7; color: #A4231B; }
.scan-not-found { font-size: 12px; color: #A4231B; margin-top: 6px; }

.scan-dropzone { border: 1.5px dashed color-mix(in srgb, var(--coral) 70%, transparent); background: var(--coral-light); border-radius: var(--radius-lg); padding: 26px 16px; text-align: center; color: var(--text-secondary); cursor: default; transition: background 150ms, border-color 150ms; }
@media (pointer: fine) and (hover: hover) { .scan-dropzone { cursor: pointer; } } /* click-to-upload only with a mouse */
.scan-dropzone.dragover { background: #FCE0D6; border-color: var(--coral); }
.scan-dropzone .dz-icon { width: 40px; height: 40px; margin: 0 auto 8px; color: var(--coral-ink); }
.scan-dropzone .dz-icon svg { width: 100%; height: 100%; }
.scan-dropzone .dz-hint { font-size: 12px; color: var(--text-secondary); margin-top: 8px; }
.scan-preview-wrap { position: relative; }
.scan-preview-wrap.scanning img { filter: brightness(0.92); }
.scan-preview-wrap.scanning::after {
  content: ""; position: absolute; left: 0; right: 0; height: 3px; top: 0;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  box-shadow: 0 0 12px 2px var(--accent);
  animation: scan-line 1.6s ease-in-out infinite;
}
@keyframes scan-line { 0% { top: 0; } 50% { top: 96%; } 100% { top: 0; } }
.scan-preview-wrap { display: none; text-align: center; }
.scan-preview-wrap img { max-width: 100%; max-height: 240px; border-radius: var(--radius-md); }
.scan-preview-filename { font-size: 12px; color: var(--text-secondary); margin: 6px 0; }
.scan-preview-actions { display: flex; gap: 8px; justify-content: center; margin-bottom: 10px; }
/* Toast: a deep ink pill with one light action */
.toast { position: fixed; left: 50%; bottom: 90px; transform: translateX(-50%); max-width: calc(100vw - 32px); background: #1E2722; color: #FFFFFF; padding: 10px 18px; border-radius: var(--radius-pill); font-size: 13.5px; font-weight: 600; line-height: 1.35; z-index: 99; opacity: 0; transition: opacity 200ms; pointer-events: none; box-shadow: var(--shadow-3); }
.toast.show { opacity: 1; }

.boot-error-banner { position: fixed; left: 16px; right: 16px; bottom: 16px; max-width: 420px; margin: 0 auto; z-index: 999; background: var(--surface); border-radius: var(--radius-lg); box-shadow: 0 0 0 1px var(--line), var(--shadow-3); padding: 14px 16px; }
.boot-error-banner #boot-error-message { font-size: 14px; color: var(--text-primary); margin-bottom: 10px; line-height: 1.5; }
.boot-error-banner #boot-error-retry-btn { width: 100%; }

.diary-food-header { display: flex; justify-content: space-between; align-items: center; }
.diary-food-header h2 { margin: 0; }

/* Diary subtabs */
.diary-subtabs-wrap { position: relative; margin-bottom: 14px; padding-top: 26px; }
.diary-subtabs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; }
.diary-subtabs button { display: flex; align-items: center; gap: 6px; background: var(--surface); color: var(--text-secondary); padding: 8px 16px; font-size: 14px; font-weight: 700; white-space: nowrap; border-radius: var(--radius-pill); box-shadow: 0 0 0 1px var(--line), var(--shadow-1); }
.diary-subtabs button svg { width: 15px; height: 15px; flex-shrink: 0; }
.diary-subtabs button.active { background: var(--accent); color: var(--text-on-accent); }
.diary-panel { display: none; }
.diary-panel.active { display: block; }

/* Dialog titles with a small tinted icon chip (the Scan / Photo / Describe dialogs) */
.diary-panel .section.theme-food { background: linear-gradient(180deg, var(--coral-light), var(--surface) 55%); }
.theme-title { display: flex; align-items: center; gap: 8px; }
.theme-title .theme-icon { width: 30px; height: 30px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.theme-title .theme-icon svg { width: 16px; height: 16px; }
.theme-food .theme-icon { background: var(--coral-light); color: var(--coral-ink); }

/* Meal cards */
.meal-block { margin-bottom: 10px; background: var(--surface); border-radius: var(--radius-lg); padding: 12px 14px; box-shadow: 0 0 0 1px var(--line), var(--shadow-1); }
.meal-block-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 15px; font-weight: 700; color: var(--text-primary); border-bottom: none; padding-bottom: 0; cursor: pointer; }
.meal-block-header .meal-name { display: flex; align-items: center; gap: 8px; }
.meal-icon-badge { width: 26px; height: 26px; border-radius: 9px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.meal-icon-badge svg { width: 14px; height: 14px; }
.meal-block-header[data-meal="Sáng"] .meal-icon-badge { background: var(--yellow-light); color: var(--yellow-ink); }
.meal-block-header[data-meal="Trưa"] .meal-icon-badge { background: var(--coral-light); color: var(--coral-ink); }
.meal-block-header[data-meal="Tối"] .meal-icon-badge { background: var(--lavender-light); color: var(--lavender-ink); }
.meal-block-header[data-meal="Ăn vặt"] .meal-icon-badge { background: var(--sky-light); color: var(--sky-ink); }
.meal-block .meal-list { margin-top: 8px; }
.meal-block .meal-list li { border-top: 1px solid var(--line); }
.meal-block .meal-list li:first-child { border-top: none; }

/* Hydration River — bình nước minh hoạ đổ đầy theo dữ liệu thật */
.river-fill { position: absolute; left: 0; right: 0; bottom: 0; height: var(--fill-pct, 0%); background: linear-gradient(180deg, var(--sky), #4F98C8); transition: height 500ms ease; }

/* ---- Bottom nav (phones) / sidebar (desktop) ----
   A milk-white bar with a hairline and a soft lift; the active tab gets a mint pill behind its
   stroke icon (one icon style: 24 px box, 2 px round strokes, drawn at 20 / 24 px). */
.bottom-nav { position: fixed; left: 0; right: 0; bottom: 0; height: 68px; background: var(--nav-bg); border-top: 0; box-shadow: 0 -1px 0 var(--line), 0 -6px 20px rgba(64, 48, 24, 0.06); display: flex; align-items: center; justify-content: space-around; z-index: 50; padding-bottom: env(safe-area-inset-bottom); max-width: 680px; margin: 0 auto; -webkit-backdrop-filter: saturate(1.2) blur(10px); backdrop-filter: saturate(1.2) blur(10px); }
.nav-btn { background: none; border: none; box-shadow: none; color: var(--nav-ink); font-size: 11px; font-weight: 700; letter-spacing: 0.01em; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 6px; min-width: 56px; min-height: 48px; transition: background 200ms ease, color 200ms ease; }
.nav-btn:hover { background: none; color: var(--text-primary); }
.nav-btn .icon { font-size: 18px; display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 28px; border-radius: var(--radius-pill); transition: background 200ms ease; }
.nav-btn .icon svg { width: var(--icon-md); height: var(--icon-md); }
.nav-btn.active { color: var(--accent-strong); font-weight: 800; }
.nav-btn.active .icon { background: var(--nav-active-bg); }
.fab { width: 54px; height: 54px; border-radius: 50%; background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 82%, #FFFFFF), var(--accent) 70%); color: var(--text-on-accent); display: flex; align-items: center; justify-content: center; font-size: 26px; font-weight: 700; margin-top: -20px; border: 0; box-shadow: 0 0 0 4px var(--surface), 0 6px 16px color-mix(in srgb, var(--accent-strong) 35%, transparent); transition: transform 180ms ease; }
.fab:hover { transform: translateY(-2px); background: linear-gradient(160deg, var(--accent), var(--accent-strong)); }
.fab:active { transform: scale(0.97); }

/* Desktop: a sidebar on the left, the content on the right (sidebar ~270 px, items ~50 px, 17 px
   labels, the active item a mint pill). */
@media (min-width: 880px) {
  body { max-width: 1100px; padding-bottom: 16px; }
  #app-content { display: flex; align-items: flex-start; gap: 28px; }
  #app-main { flex: 1; min-width: 0; }
  .bottom-nav {
    position: sticky; top: 16px; left: auto; right: auto; bottom: auto; order: -1;
    flex: 0 0 270px; height: fit-content; max-width: none; margin: 0;
    flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 6px;
    border-top: none; border-radius: var(--radius-xl); padding: 16px 14px;
    background: var(--surface); box-shadow: 0 0 0 1px var(--line), var(--shadow-2); -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .nav-btn { flex-direction: row; justify-content: flex-start; gap: 12px; font-size: 16.5px; font-weight: 700; padding: 12px 14px; min-height: 50px; border-radius: var(--radius-md); width: 100%; color: var(--text-secondary); }
  .nav-btn .icon { width: auto; height: auto; background: none !important; border-radius: 0; }
  .nav-btn .icon svg { width: var(--icon-lg); height: var(--icon-lg); }
  .nav-btn:hover { background: var(--surface-soft); color: var(--text-primary); }
  .nav-btn.active { background: var(--accent-light); color: var(--accent-strong); box-shadow: none; }
  .fab { order: 2; width: 100%; height: 48px; border-radius: var(--radius-md); font-size: 20px; margin: 6px 0 0; border: none; box-shadow: var(--shadow-1); gap: 8px; }
  /* The sidebar has room for a word: "+ Quick add" (the button's name stays aria-label="Quick add"). */
  .fab::after { content: "Quick add"; font-size: 15px; font-weight: 700; letter-spacing: .01em; }
}

/* ---- Bottom sheet / modal ---- */
.sheet-backdrop { position: fixed; inset: 0; background: rgba(30, 26, 20, 0.38); display: none; z-index: 90; }
.sheet-backdrop.active { display: block; }
.sheet { position: fixed; left: 0; right: 0; bottom: 0; background: var(--surface); border-radius: 24px 24px 0 0; padding: 14px 16px calc(16px + env(safe-area-inset-bottom)); z-index: 91; transform: translateY(110%); visibility: hidden; transition: transform 220ms ease, visibility 0s linear 220ms; max-height: 85vh; overflow-y: auto; overscroll-behavior: contain; max-width: 680px; margin: 0 auto; box-shadow: var(--shadow-3); }
.sheet.active { transform: translateY(0); visibility: visible; transition: transform 220ms ease; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.sheet-head h3 { margin: 0; font-family: var(--font-display); font-size: 17px; font-weight: 800; color: var(--text-primary); }
.sheet-close { min-height: 44px; }
.sheet-option { display: flex; align-items: center; gap: 12px; padding: 13px 4px; font-size: 15px; cursor: pointer; border-bottom: 1px solid var(--line); }
.sheet-option:hover { background: var(--surface-soft); }
/* Quick add: tiles in two columns and one row of water chips — fits a 360x640 phone without scrolling. */
.qa-group { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0 0 8px; }
button.sheet-option.qa-tile { margin: 0; width: 100%; min-height: 52px; padding: 8px 10px; border: 0; border-radius: 16px; background: var(--surface-soft); color: var(--text-primary); font-size: 14.5px; font-weight: 700; justify-content: flex-start; box-shadow: none; }
button.sheet-option.qa-tile:hover { background: var(--accent-light); transform: none; }
button.sheet-option.qa-tile .qa-icon { width: 34px; height: 34px; flex: 0 0 34px; }
/* Quick add › Log again: the first few Recent & saved foods (same chips as the Diary's rail). */
.qa-recent { margin: 0 0 10px; }
.qa-recent-label { margin: 0 2px 6px; color: var(--text-secondary); font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.qa-recent-rail button.rs-chip { border: 1px solid var(--line, #E8E3DA); background: var(--surface-soft, #FFFBF4); }
.qa-water { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; padding: 6px 8px; border-radius: 16px; background: var(--sky-light); }
.qa-water-label { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14.5px; margin-right: auto; }
.qa-water-label .qa-icon { width: 30px; height: 30px; }
button.sheet-option.qa-chip { margin: 0; width: auto; min-height: 44px; padding: 0 14px; border: 0; border-radius: var(--radius-pill); background: var(--surface); color: var(--sky-ink); font-weight: 800; font-size: 14px; white-space: nowrap; box-shadow: var(--shadow-1); }
@media (max-width: 380px) { .qa-water { gap: 6px; } button.sheet-option.qa-chip { padding: 0 10px; } }
button.sheet-option:focus-visible { outline: 3px solid var(--accent-strong); outline-offset: 2px; }
/* Rounded section headings (used selectively: the Diary panels). A soft tinted band with the
   title on the left; the right end is kept free for the one mascot's ~52 px slot. */
.dh-sec-head { display: flex; align-items: center; gap: 8px; min-height: 40px; margin: 0 0 10px; padding: 6px 12px; border-radius: var(--radius-md); background: var(--accent-light); color: var(--text-primary); font-family: var(--font-display); font-size: 16px; font-weight: 800; letter-spacing: var(--tracking-display); line-height: var(--lh-tight); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 10%, transparent); }
.dh-sec-head.tone-coral { background: var(--coral-light); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--coral) 16%, transparent); }
.dh-sec-head.tone-sky { background: var(--sky-light); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sky) 16%, transparent); }
.dh-sec-head.tone-lavender { background: var(--lavender-light); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lavender) 16%, transparent); }
.dh-sec-head.tone-yellow { background: var(--yellow-light); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--yellow) 22%, transparent); }
/* Disclosure: a labelled button that shows/hides the next region (aria-expanded + aria-controls).
   The chevron is drawn (2 px strokes, like the icons), not a text glyph. */
.dh-disclosure { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 44px; margin: 0; padding: 8px 12px; border: 0; border-radius: var(--radius-md); background: var(--surface-soft); color: var(--text-primary); font-size: 14.5px; font-weight: 700; text-align: left; box-shadow: none; }
.dh-disclosure:hover { background: var(--accent-light); color: var(--text-primary); transform: none; }
.dh-disclosure::after { content: ""; flex: 0 0 auto; width: 7px; height: 7px; margin: -3px 4px 0 8px; border-right: 2px solid var(--text-secondary); border-bottom: 2px solid var(--text-secondary); border-radius: 1px; transform: rotate(45deg); transition: transform 150ms ease; }
html[data-motion="reduced"] .dh-disclosure::after, html[data-motion="off"] .dh-disclosure::after { transition: none !important; }
.dh-disclosure[aria-expanded="true"]::after { transform: translateY(3px) rotate(-135deg); }
.dh-disclosure:focus-visible { outline: 3px solid var(--accent-strong); outline-offset: 2px; }
/* Sleep: which night */
.sleep-night { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.sleep-night-btn.active { background: var(--lavender-light); border-color: var(--lavender); color: var(--lavender-ink); }
.sleep-night-label { font-size: 13px; color: var(--text-secondary); }
.sleep-field { display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; color: var(--text-secondary); flex: 1; }
/* Icon chips: a tinted rounded square with a stroke icon in the area's ink. */
.qa-icon { width: 34px; height: 34px; border-radius: 11px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.qa-icon svg { width: 17px; height: 17px; }
.qa-icon.qa-coral { background: var(--coral-light); color: var(--coral-ink); }
.qa-icon.qa-sky { background: var(--sky-light); color: var(--sky-ink); }
.qa-icon.qa-yellow { background: var(--yellow-light); color: var(--yellow-ink); }
.qa-icon.qa-lavender { background: var(--lavender-light); color: var(--lavender-ink); }
.qa-icon.qa-mint { background: var(--accent-light); color: var(--accent-strong); }
.modal { position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); background: var(--surface); border-radius: 22px; padding: 16px; z-index: 91; width: 90%; max-width: 420px; display: none; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain; box-shadow: var(--shadow-3); }
.modal h3 { margin-top: 0; }

/* ---------- Food search v2 (results, AI progress, preparation choice, source details) ---------- */
.search-section-label { padding: 8px 12px; font-size: 11px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.04em; }
.search-row .sr-alt { font-size: 12px; color: var(--text-secondary); font-style: italic; }
.search-row .sr-text { min-width: 0; overflow-wrap: anywhere; }
.search-hint { padding: 10px 12px; font-size: 14px; background: var(--accent-light); color: var(--text-primary); display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.search-footer { padding: 10px 12px; font-size: 13px; color: var(--text-secondary); border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.search-footer.strong { color: var(--text-primary); background: var(--peach-light); }
.link-btn { background: none; color: var(--accent-strong); padding: 0 2px; min-height: 32px; font-size: inherit; font-weight: 700; text-decoration: underline; text-decoration-thickness: 1.5px; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); text-underline-offset: 3px; border-radius: 6px; box-shadow: none; }
.link-btn:hover { background: var(--accent-light); color: var(--accent-strong); text-decoration-color: currentColor; }
button.small { min-height: 36px; }
@media (pointer: coarse) { button.small, .link-btn, .chip { min-height: 44px; } }
.search-progress { padding: 16px; font-size: 14px; color: var(--text-primary); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; text-align: center; }
.search-progress .note { flex-basis: 100%; }
.progress-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); animation: dhutPulse 1s ease-in-out infinite; flex: none; }
@keyframes dhutPulse { 50% { opacity: 0.25; transform: scale(0.8); } }
@media (prefers-reduced-motion: reduce) { .progress-dot { animation: none; } }
.ai-found { padding: 10px 12px; font-size: 14px; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.food-editor-card .ai-found { padding: 0 0 10px; margin-bottom: 10px; }
.prep-options { display: grid; gap: 8px; margin-bottom: 12px; }
.prep-option { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; min-height: 44px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--surface); cursor: pointer; }
.prep-option input { margin-top: 3px; width: 20px; height: 20px; flex: none; }
.prep-option:has(input:checked) { border-color: var(--accent); background: var(--accent-light); }
.prep-option b { display: block; font-size: 15px; }
.prep-sub { display: block; font-size: 12px; color: var(--text-secondary); font-weight: 400; }
.prep-line { font-size: 13px; margin: -2px 0 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.estimate-note { font-size: 12.5px; color: #7E4600; background: #FFF1DE; border-radius: 10px; padding: 8px 10px; margin-bottom: 10px; }
.per100-line { font-size: 13px; color: var(--text-secondary); margin-bottom: 10px; overflow-wrap: anywhere; }
.per100-line b { color: var(--text-primary); }
.serving-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: -4px 0 12px; }
/* Chips: a white pill with a warm hairline; hover / selected tint mint. */
.chip { background: var(--surface); color: var(--text-primary); border: 1px solid var(--line-strong); border-radius: var(--radius-pill); padding: 4px 12px; min-height: 36px; font-size: 13px; font-weight: 600; box-shadow: none; }
.chip:hover { border-color: color-mix(in srgb, var(--accent) 55%, transparent); background: var(--accent-light); color: var(--text-primary); }
.chip[aria-pressed="true"], .chip.active { background: var(--accent-light); border-color: var(--accent); color: var(--accent-strong); }
.source-details, .recipe-parts { margin-bottom: 12px; font-size: 13px; }
.source-details summary, .recipe-parts summary { cursor: pointer; font-weight: 700; min-height: 32px; display: flex; align-items: center; color: var(--accent-strong); }
.source-details dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; margin: 6px 0 0; }
.source-details dt { color: var(--text-secondary); }
.source-details dd { margin: 0; overflow-wrap: anywhere; }
.source-details ul { margin: 0; padding-left: 18px; }
@media (max-width: 420px) { .source-details dl { grid-template-columns: 1fr; } .source-details dd { margin-bottom: 6px; } }
.component-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.component-row > span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.component-row input { width: 76px; height: 36px; text-align: right; }
.manual-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.manual-grid label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-secondary); }
.manual-grid input, .manual-grid select { width: 100%; min-height: 44px; }
.manual-grid .span-2 { grid-column: 1 / -1; }
.form-error { color: #A4231B; font-size: 13px; font-weight: 600; }

/* ---------- What to eat next (meal recommendations) ---------- */
.rec-cards { display: grid; gap: 10px; margin: 10px 0 6px; }
@media (min-width: 900px) { .rec-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.rec-card { border: 0; box-shadow: 0 0 0 1px var(--line), var(--shadow-1); border-radius: 16px; padding: 12px 14px; background: var(--surface); display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.rec-kind { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; align-self: flex-start; padding: 2px 8px; border-radius: 999px; }
.rec-kind-best { background: var(--accent-light); color: var(--accent-strong); }
.rec-kind-quick { background: var(--yellow-light); color: var(--yellow-ink); }
.rec-kind-budget { background: var(--sky-light); color: var(--sky-ink); }
.rec-name { font-weight: 800; font-size: 16px; overflow-wrap: anywhere; }
.rec-nutrition { font-size: 13px; color: var(--text-secondary); }
.rec-nutrition b { color: var(--text-primary); }
.rec-portion { white-space: nowrap; }
.rec-reasons { margin: 0; padding-left: 18px; font-size: 13px; color: var(--text-primary); display: grid; gap: 2px; }
.rec-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; flex-wrap: wrap; }
.rec-more { margin: 6px 0 0; padding-left: 18px; font-size: 14px; display: grid; gap: 4px; }
.rec-notes { margin-top: 6px; }

/* ---------- Zero-calorie fix: toast Undo, manual entry extras ---------- */
.toast.has-action { pointer-events: auto; display: flex; align-items: center; gap: 12px; }
.toast-action { background: transparent; border: none; box-shadow: none; color: #A8E0C4; font-weight: 800; font-size: 13.5px; padding: 2px 4px; margin: 0; cursor: pointer; min-height: 0; width: auto; }
.toast-action:hover { background: transparent; color: #D2F1E1; }
.toast-action:focus-visible { outline: 2px solid #A8E0C4; outline-offset: 2px; border-radius: 4px; }
.manual-more { margin-top: 2px; }
.manual-more > summary { cursor: pointer; font-size: 13px; color: var(--text-secondary); padding: 4px 0; }
.manual-more .manual-grid { margin-top: 8px; }
#food-mini-editor .form-error, #save-meal-error { margin: 6px 0; }

/* ---------- Food AI V3: automatic AI lookup, AI estimates ---------- */
.ai-pending { color: var(--accent-strong); font-size: 13px; font-weight: 600; }
.search-empty .ai-pending { margin: 6px 0 2px; }
.search-progress .link-btn { margin-left: auto; }
.need-info-form { display: flex; gap: 8px; margin: 8px 0; }
.need-info-form input { flex: 1; min-width: 0; margin: 0; }
.need-info-form button { width: auto; margin: 0; }
.ai-basis { font-size: 13px; color: var(--text-secondary); margin: 4px 0; }
.assumption-list { margin: 4px 0 8px; padding-left: 18px; font-size: 12px; color: var(--text-secondary); }
.assumption-list li { margin: 2px 0; }
.estimate-range { font-size: 13px; color: var(--text-secondary); margin-top: 2px; }
.warn-note { color: #8a5a00; }
.badge.internal.ai { background: #F1E8FF; color: #5E3A99; } /* AI estimates look different from calculated values */
.badge.label { background: #E6F0FF; color: #1F4E99; }
.badge.warn { background: #FFE8E3; color: #9B2C1D; }
.badge.incomplete { background: #F2F2EE; color: #555A52; border: 1px dashed #B9BDB4; }
.entry-open { all: unset; cursor: pointer; display: inline; flex: 1; min-width: 0; line-height: 1.5; border-radius: 6px; }
.entry-open:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.entry-detail-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 8px; }
.entry-detail-kcal { font-size: 20px; font-weight: 800; margin-bottom: 6px; }
.entry-detail-kcal .macro-line { display: block; font-size: 12px; font-weight: 500; }
.entry-detail-list { display: grid; grid-template-columns: max-content 1fr; gap: 6px 12px; font-size: 13px; margin: 10px 0; }
.entry-detail-list dt { color: var(--text-secondary); font-weight: 600; }
.entry-detail-list dd { margin: 0; overflow-wrap: anywhere; }
.entry-detail-warn { display: block; margin: 8px 0; }
.entry-detail-warn button { margin-top: 6px; }
@media (max-width: 380px) { .entry-detail-list { grid-template-columns: 1fr; } .entry-detail-list dd { margin-bottom: 4px; } }
#manual-zero-note.warn { color: #9B2C1D; background: #FFF1EE; border-radius: 10px; padding: 6px 10px; }
.confirm-yes { margin-top: 6px; }

/* Exercise form: activity, then speed / incline (walking & running), minutes, the live estimate. */
.exercise-form { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; align-items: end; }
.exercise-form .ex-wide { grid-column: 1 / -1; }
.exercise-form .ex-speed { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.exercise-form .ex-speed[hidden], .exercise-form [hidden] { display: none; }
.ex-field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; color: var(--text-secondary); min-width: 0; }
.ex-field input, .ex-field select { margin: 0; width: 100%; }
.ex-estimate { grid-column: 1 / -1; font-size: 13px; line-height: 1.45; color: var(--text-primary); background: var(--surface-soft); border-radius: 12px; padding: 8px 10px; }
.ex-estimate:empty { display: none; }
.ex-estimate.pending { color: #7A4600; background: #FFF1DE; }
@media (max-width: 420px) { .exercise-form .ex-speed { grid-template-columns: 1fr 1fr; } }

/* Offline banner + install row (js/nativeShell.js) */
.offline-banner { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 60; margin: 0 0 10px; padding: 8px 12px; border-radius: 12px; background: #FFF1DE; color: #744300; box-shadow: var(--shadow-1); font-size: 13px; font-weight: 600; text-align: center; }
.offline-banner[hidden] { display: none; }
.install-app-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px; margin: 0 0 12px; border-radius: 16px; background: var(--accent-light); }
.install-app-row[hidden] { display: none; }
.install-app-row button { width: auto; margin: 0; white-space: nowrap; }

/* ---------- Phones: 44 px touch targets, 16 px inputs (no iOS zoom), safe areas, keyboard ---------- */
/* The home indicator gets its own space below the nav (the 68 px nav used to shrink into it). */
.bottom-nav { box-sizing: border-box; height: calc(68px + env(safe-area-inset-bottom, 0px)); }
/* …but the desktop sidebar is as tall as its items (the phone height above cut its card off). */
@media (min-width: 880px) { .bottom-nav { height: fit-content; padding-bottom: 20px; } }
@media (pointer: coarse) {
  #date-prev-btn, #date-next-btn { box-sizing: border-box; width: 40px; min-width: 40px; min-height: 44px; padding: 0; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; }
  /* Top bar: 16 px text (no iOS zoom) in a row that still fits a 360 px phone. */
  .toolbar-row { gap: 6px; flex-wrap: nowrap; }
  .date-pill { padding: 0 2px; min-width: 0; flex: 1 1 auto; justify-content: space-between; }
  #date-picker { font-size: 16px; min-height: 44px; width: 100%; min-width: 0; max-width: 150px; padding: 0 2px; text-align: center; }
  .weight-pill { padding: 0 8px; gap: 3px; flex: 0 0 auto; }
  .weight-pill svg { flex: 0 0 auto; }
  #weight { font-size: 16px; min-height: 44px; width: 42px; min-width: 0; flex: 0 0 42px; }
  .date-pill input[type="date"]::-webkit-calendar-picker-indicator { margin: 0 0 0 2px; padding: 0; width: 14px; }
}
/* Phones: the leaf mark alone stands for the brand (the wordmark stays for screen readers) so the date
   keeps its full width — "09/30/2026" was cut at 412–450 px (common Android widths) with the word shown. */
@media (pointer: coarse) and (max-width: 480px) {
  .brand-mini { gap: 0; margin-right: 0; }
  .brand-word { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (pointer: coarse) {
  button, select, input[type="text"], input[type="number"], input[type="search"], input[type="email"], input[type="password"],
  input[type="date"], input[type="time"], input[type="tel"] { min-height: 44px; }
  input, select, textarea { font-size: 16px; }
  .meal-summary-add, .range-btn, .diary-subtab-btn, .meal-block-header, #disclaimer-toggle, #plan-card-source,
  .chip, #fe-minus, #fe-plus, .link-btn, .qty-btn { min-height: 44px; }
  .meal-summary-add { display: inline-flex; align-items: center; padding: 0 14px; }
  #note-preview-edit, li .del { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  #fe-minus, #fe-plus, .qty-btn { min-width: 44px; }
  .adp-check input[type="checkbox"], #adp-performance, #adp-birthday-effects { width: 22px; height: 22px; }
  .adaptive-debug > summary, .manual-more > summary, details > summary { min-height: 40px; display: flex; align-items: center; }
  .entry-open { min-height: 40px; display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px; }
}
/* The on-screen keyboard is open (a field is focused and the visual viewport shrank): the bottom
   nav and the + button would sit on top of the form — hide them until it closes. */
html.kb-open .bottom-nav, html.kb-open .fab { display: none !important; }
html.kb-open body { padding-bottom: 16px; }
/* Narrow phones: the diary header wraps instead of squeezing "− Close" onto two lines. */
@media (max-width: 420px) {
  .diary-food-header { flex-wrap: wrap; gap: 6px; }
  #diary-food-total { display: block; font-size: 15px; }
  #diary-food-total .macro-line { display: block !important; white-space: normal; }
}
.offline-card { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 24px; }
.offline-card button { width: auto; min-height: 48px; padding: 0 28px; }
li button.del { width: auto; margin: 0; padding: 0 10px; min-height: 36px; background: none; color: #A4231B; font-weight: 800; box-shadow: none; flex-shrink: 0; }
li button.del:hover { background: #FDECEA; color: #A4231B; transform: none; }

/* "Server waking up" status (js/apiWake.js): a small chip above the bottom bar, never blocking. */
.api-wake-chip { position: fixed; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 98; display: flex; align-items: center; gap: 10px; max-width: min(calc(100vw - 32px), 520px); padding: 10px 12px 10px 14px; border-radius: 16px; background: var(--surface); color: var(--text-primary); box-shadow: 0 0 0 1px var(--line), var(--shadow-3); font-size: 13px; font-weight: 600; line-height: 1.35; }
.api-wake-chip[hidden] { display: none; }
.api-wake-dot { flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); animation: api-wake-pulse 1.4s ease-in-out infinite; }
.api-wake-chip[data-state="down"] .api-wake-dot { background: #D98B3C; animation: none; }
.api-wake-text { flex: 1 1 auto; }
.api-wake-retry { flex: 0 0 auto; margin: 0; min-height: 34px; padding: 0 12px; font-size: 13px; }
.api-wake-close { flex: 0 0 auto; margin: 0; width: 32px; min-height: 32px; padding: 0; border-radius: 50%; background: transparent; color: var(--text-secondary); font-size: 18px; line-height: 1; box-shadow: none; }
.api-wake-close:hover { background: var(--accent-light); }
@keyframes api-wake-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.45; transform: scale(0.8); } }
@media (prefers-reduced-motion: reduce) { .api-wake-dot { animation: none; } }
html[data-motion="reduced"] .api-wake-dot, html[data-motion="off"] .api-wake-dot { animation: none; }
@media (min-width: 900px) { .api-wake-chip { bottom: 24px; } }