/* Presentation layer for the approved MVP shell. Existing global styles remain the base. */
.icon{width:22px;height:22px;display:block;flex:0 0 auto}.brand-row{display:flex;align-items:center;gap:8px}.date-button{display:flex;align-items:center;gap:7px;border:0;background:transparent;color:var(--muted);padding:7px 0 0;font-weight:600}.date-button .icon{width:18px;height:18px}.calorie-hero{display:flex;align-items:center;gap:22px;padding:22px}.calorie-ring{width:150px;height:150px;border-radius:50%;display:grid;place-content:center;text-align:center;flex:0 0 auto;background:conic-gradient(var(--green,#159447) var(--progress),#e8eceb 0);position:relative}.calorie-ring::after{content:"";position:absolute;inset:12px;background:#fff;border-radius:50%}.calorie-ring strong,.calorie-ring span{position:relative;z-index:1}.calorie-ring strong{font-size:30px;color:var(--ink)}.calorie-ring span{font-size:13px;color:var(--muted)}.hero-side{min-width:0;flex:1}.remaining{display:block;color:#159447;font-size:27px;margin:3px 0 16px}.macro-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.macro{display:grid;gap:4px}.macro span{font-size:12px;color:var(--muted)}.macro strong{font-size:14px}.macro strong small{font-size:11px;color:var(--muted);font-weight:500}.macro-bar{height:7px;border-radius:8px;background:#e8eceb;overflow:hidden}.macro-bar b{display:block;height:100%;border-radius:8px}.macro-bar.protein b{background:#49a9eb}.macro-bar.fat b{background:#f3a229}.macro-bar.carbs b{background:#9850df}.navigator{display:flex;align-items:center;gap:12px;border-radius:18px;padding:14px 16px;margin:12px 0;background:#f3f8f2;border:1px solid #dcebdc}.navigator>.icon,.navigator>span .icon{color:var(--sage)}.navigator strong{color:var(--wine)}.navigator p{margin:3px 0 0;color:var(--muted);font-size:13px}.section-total{color:#159447;font-size:18px}.meal-list{border:1px solid var(--line);border-radius:18px;overflow:hidden;background:#fff}.meal-block{border-top:1px solid var(--line);padding:14px 16px 8px}.meal-block:first-child{border-top:0}.meal-title{display:flex;align-items:center;gap:10px}.meal-title>.icon{color:var(--sage)}.compact-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.compact-grid .card{margin:12px 0}.compact-card-head{display:flex;align-items:flex-start;gap:10px}.compact-card-head>.icon{color:#268fdb;margin-top:3px}.compact-card-head h2{margin:2px 0}.compact-card-head p{margin:0}.icon-action{width:34px;height:34px;padding:0;border-radius:50%;margin-left:auto;font-size:23px;background:#eaf5fd;color:#168dd6}.sheet{bottom:0;top:auto;margin:0 auto;border-radius:26px 26px 0 0;max-width:500px;width:100%}.sheet-inner{padding:16px 18px 22px}.sheet-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:8px 0 14px}.sheet-actions button{min-height:94px;display:grid;place-items:center;gap:7px;background:#f3f8f2;color:var(--wine)}.sheet-actions .icon{width:32px;height:32px;color:#159447}.sheet-inner>button.secondary{width:100%}.period-tabs{display:flex;gap:6px;margin-bottom:18px}.period-tabs button{background:#f1f3f4;color:var(--muted);padding:9px 12px;font-size:12px}.period-tabs button.active{background:#159447;color:#fff}.progress-weight{display:flex;justify-content:space-between;align-items:flex-end}.progress-weight small{color:var(--muted)}.progress-weight h2{font-size:32px;margin:5px 0 0}.progress-weight>strong{color:#159447;font-size:21px}.goal-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:20px}.goal-grid span{display:grid;gap:3px;font-size:12px;color:var(--muted)}.goal-grid strong{color:var(--ink);font-size:15px}.trend-list{display:flex;gap:8px;overflow:auto;padding:10px 0}.trend-point{min-width:92px;display:grid;gap:4px;padding:12px;background:#f3f8f2;border-radius:12px}.trend-point b{color:var(--wine)}.trend-point small{color:var(--muted)}.loading-card,.unavailable-card{text-align:center;padding:42px 18px}.unavailable-card h2{margin:8px 0}.metric-grid{grid-template-columns:repeat(2,1fr)}
.top-actions{display:flex;align-items:center;gap:8px}
.icon-button{width:40px;height:40px;padding:0;border-radius:50%;background:var(--paper);color:var(--wine);border:1px solid var(--line);font-size:20px}
.section-label,.eyebrow{letter-spacing:.08em;text-transform:uppercase}
.section-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:4px}
.section-heading h2{margin-bottom:0}
.hero-total{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.hero-total strong{font-size:32px}
.hero-total span{font-size:13px;color:#f1dfd7}
.hero .numbers{align-items:center}
.meals-card{padding-bottom:8px}
.meal-block{border-top:1px solid var(--line);padding:14px 0 4px}
.meal-block:first-of-type{border-top:0}
.meal-head h3{margin:0 0 3px;font-size:17px}
.meal-add{width:34px;height:34px;padding:0;border-radius:50%;font-size:22px;line-height:1}
.entry-actions{gap:2px;flex-wrap:wrap;justify-content:flex-end}
.entry>div:first-child{min-width:0;flex:1}
.entry-name{overflow-wrap:anywhere}
.entry-actions{flex-shrink:0}
.entry-actions .ghost{font-size:12px}
.quick{grid-template-columns:repeat(3,1fr);gap:8px}
.quick button{min-height:44px;padding:9px 8px}
.water-card .progress{margin-top:14px}
.weight-card{display:flex;align-items:center;justify-content:space-between;gap:16px}
.weight-card h2{margin:2px 0 0}
.bottom-nav{position:fixed;z-index:5;left:50%;bottom:env(safe-area-inset-bottom);transform:translateX(-50%);width:min(100% - 24px,628px);height:68px;padding:8px 20px;background:rgba(255,250,244,.96);border:1px solid var(--line);border-radius:24px;box-shadow:0 10px 35px #332a2733;display:grid;grid-template-columns:1fr 64px 1fr;align-items:center;gap:16px;backdrop-filter:blur(12px)}
.nav-item{background:transparent;color:var(--muted);padding:5px;display:grid;place-items:center;gap:1px;font-weight:600}
.nav-item span{font-size:22px;line-height:1}
.nav-item small{font-size:11px}
.nav-item.active{color:var(--wine)}
.nav-add{width:56px;height:56px;border-radius:50%;padding:0;font-size:32px;line-height:1;box-shadow:0 7px 18px #783d3555}
.sheet{max-width:360px;border-radius:26px;margin:auto}
.sheet-inner{display:grid;gap:10px;padding:18px;background:var(--paper)}
.sheet-inner h2{margin:2px 0 6px}
.sheet-inner button{min-height:48px}
.sheet-handle{width:42px;height:4px;border-radius:4px;background:var(--line);margin:0 auto 4px}
.quick-dialog{grid-template-columns:repeat(2,1fr)}
.danger-button{background:var(--danger)}
.progress-hero{background:var(--wine);color:#fff}
.progress-hero h2{color:#fff;font-size:32px;margin:8px 0}
.progress-hero p{margin:0;color:#f1dfd7}
.trend-placeholder{border:1px dashed #ffffff55;border-radius:16px;padding:20px;margin-top:18px;color:#f1dfd7}
.metric-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.metric-grid h2,.metric-grid p{grid-column:1/-1}
.metric{display:grid;gap:4px;padding:12px;background:#fff;border:1px solid var(--line);border-radius:14px}
.metric strong{font-size:20px;color:var(--wine)}
.inactive-block{background:#fbf5ed}
.profile-view .top{margin-bottom:26px}
.profile-card h2{overflow-wrap:anywhere}
.logout-button{width:100%;background:transparent;color:var(--danger);border:1px solid #d9aaa5}
.push-state{font-size:12px;color:var(--muted);text-align:right;max-width:150px}
.push-card button{margin-top:8px}
dialog:not(.sheet){width:min(calc(100vw - 24px),480px);max-width:480px}
dialog{max-height:calc(100vh - 32px)}
dialog form{margin:0}
@media(min-width:560px){.quick{grid-template-columns:repeat(6,1fr)}}
@media(max-width:480px){.top{align-items:center}.top-actions{flex-direction:column-reverse;align-items:flex-end}.status{max-width:150px;overflow:hidden;text-overflow:ellipsis}.entry{align-items:flex-start}.entry-actions{max-width:130px}.bottom-nav{width:calc(100% - 20px);padding-left:12px;padding-right:12px;gap:8px}.push-state{max-width:125px}}
.sheet{bottom:0;top:auto;margin:0 auto;border-radius:26px 26px 0 0;max-width:500px;width:100%}.sheet-inner{padding:16px 18px 22px}.sheet-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:8px 0 14px}.sheet-actions button{min-height:94px;display:grid;place-items:center;gap:7px;background:#f3f8f2;color:var(--wine)}.sheet-actions .icon{width:32px;height:32px;color:#159447}.compact-grid .quick{grid-template-columns:repeat(3,1fr)}
.trend-chart{height:190px;background:#f7faf8;border-radius:16px;padding:14px 12px 8px}.trend-chart svg{display:block;width:100%;height:150px}.trend-chart polyline{fill:none;stroke:#159447;stroke-width:2.5;vector-effect:non-scaling-stroke}.trend-chart circle{fill:#159447}.trend-gridline{fill:none;stroke:#dce9df;stroke-width:.7;vector-effect:non-scaling-stroke}.trend-labels{display:flex;justify-content:space-between;color:var(--muted);font-size:11px}
@media(max-width:560px){.calorie-hero{gap:14px;padding:16px}.calorie-ring{width:118px;height:118px}.calorie-ring strong{font-size:25px}.remaining{font-size:22px}.macro-grid{gap:6px}.macro strong{font-size:12px}.compact-grid{grid-template-columns:1fr}.goal-grid{grid-template-columns:repeat(2,1fr)}}
.progress-hero{background:#fff;color:var(--ink);border:1px solid var(--line)}.progress-hero h2{color:var(--wine)}.progress-hero p{color:var(--muted)}
.success-toast{background:#eaf7ed;border:1px solid #bfe5c8;color:#16743b;border-radius:16px;padding:13px 16px;margin:0 0 12px;font-weight:650;box-shadow:0 6px 20px #2c8b4a1a}
@media(max-width:360px){.calorie-hero{display:grid;grid-template-columns:1fr}.calorie-ring{margin:auto}.hero-side{width:100%}.macro-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.macro span,.macro strong{overflow-wrap:anywhere}.top-actions{flex-direction:row;align-items:center}.status{max-width:110px}}

/* R24.4.4 reliability: feedback overlays do not affect document flow. */
.success-toast{position:fixed;z-index:30;left:50%;bottom:calc(88px + env(safe-area-inset-bottom));transform:translateX(-50%);width:min(calc(100vw - 32px),420px);margin:0;pointer-events:none}
.scheduled-plan{display:grid;gap:4px;padding:12px;background:var(--color-primary-soft);border:1px solid #ccebd5;border-radius:12px;color:var(--color-primary-strong)}
.scheduled-plan span{color:var(--color-text)}
.recipe-nutrition-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:12px 0}
.recipe-nutrition-grid .recipe-nutrition-block{margin:0;padding:10px 12px;gap:5px}
.recipe-nutrition-grid .recipe-nutrition-kcal{font-size:20px}
@media(max-width:360px){.recipe-nutrition-grid{grid-template-columns:1fr}}

/* Final MVP onboarding: one focused question per screen. */
.onboarding-mvp{max-width:620px;margin:0 auto;padding:24px 16px 40px}.onboarding-mvp .onboarding-header{margin-bottom:18px}.onboarding-progress{height:6px;border-radius:8px;background:var(--color-border);overflow:hidden;margin:0 0 20px}.onboarding-progress span{display:block;height:100%;border-radius:8px;background:var(--color-primary);transition:width .2s ease}.onboarding-step-form{display:grid;gap:14px}.onboarding-step{margin:0;padding:24px}.onboarding-step h2{color:var(--color-text);margin:8px 0 10px;font-size:25px}.onboarding-step>p{line-height:1.55}.onboarding-start{padding:34px 26px}.onboarding-start h2{font-size:30px}.onboarding-start p:first-of-type{font-size:18px;color:var(--color-text)}.onboarding-choices{display:grid;gap:10px;margin-top:18px}.onboarding-choice{display:flex;align-items:flex-start;gap:12px;padding:15px;border:1px solid var(--color-border);border-radius:14px;background:var(--color-surface);cursor:pointer}.onboarding-choice:has(input:checked){border-color:var(--color-primary);background:var(--color-primary-soft)}.onboarding-choice input{width:auto;margin-top:3px;accent-color:var(--color-primary)}.onboarding-choice span{display:grid;gap:4px}.onboarding-choice small{color:var(--color-text-muted);line-height:1.35}.target-current{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;margin:18px 0;background:var(--color-primary-soft);border-radius:14px;color:var(--color-text-muted)}.target-current strong{color:var(--color-primary-strong);font-size:20px}.onboarding-actions{display:grid;gap:10px}.onboarding-actions .onboarding-back{background:transparent;color:var(--color-primary);border:1px solid var(--color-border)}.onboarding-actions .muted{margin:0;text-align:center;font-size:12px}.onboarding-plan{margin-top:0}.onboarding-plan h2{font-size:28px}.onboarding-plan .plan-grid{margin:18px 0}.plan-facts{display:flex;gap:10px}.plan-fact{display:grid;gap:3px;padding:12px 14px;background:#e8f4fd;border-radius:12px;color:var(--color-water)}.plan-fact span{font-size:12px;color:var(--color-text-muted)}.onboarding-reassurance{padding:14px 16px;background:var(--color-primary-soft);border-radius:14px;color:var(--color-primary-strong);font-weight:600}.onboarding-loading{text-align:center}.loading-dot{width:30px;height:30px;margin:22px auto 4px;border:4px solid var(--color-primary-soft);border-top-color:var(--color-primary);border-radius:50%;animation:onboarding-spin .8s linear infinite}@keyframes onboarding-spin{to{transform:rotate(360deg)}}
@media(max-width:420px){.onboarding-mvp{padding:16px 12px 28px}.onboarding-step{padding:20px 16px}.onboarding-start{padding:26px 18px}.onboarding-step h2{font-size:22px}}

/* R24.3 final visual cleanup: safe-area, shared controls, and compact surfaces. */
html{background:var(--color-bg)}
body{background:var(--color-bg);color:var(--color-text)}
body::before{content:"";position:fixed;z-index:20;inset:0 0 auto;height:env(safe-area-inset-top);background:var(--color-bg);pointer-events:none}
.brand-wordmark{display:block;width:clamp(128px,34vw,184px);height:auto;flex:0 1 auto}
.today-top-main{flex:1;min-width:0}.today-top-main .date{margin-left:auto;padding-top:0;white-space:nowrap}.date-button .icon{display:none}
.top .icon-button{color:var(--color-text-muted);background:var(--color-surface);border-color:var(--color-border)}
.profile-email{font-size:20px!important;font-weight:650}.profile-card .muted{font-size:13px}.push-state{font-size:11px;color:var(--color-text-muted)}
.build-meta,.food-catalog-count{margin:8px 0;color:var(--color-text-muted);font-size:12px;text-align:center}.build-meta{padding-bottom:4px}
.close-icon{width:44px;height:44px;display:grid;place-items:center;padding:0!important;border-radius:12px;font-size:24px;line-height:1;color:var(--color-text)!important;background:transparent!important}
.food-option-row{align-items:center;gap:4px}.food-option{background:var(--color-surface);border:1px solid var(--color-border);box-shadow:0 3px 12px var(--color-shadow);color:var(--color-text);text-align:left}.food-option strong{font-weight:600}.food-option>small{white-space:nowrap;color:var(--color-text-muted)}
.food-favorite,.bookmark-button{width:44px;height:44px;min-width:44px;padding:0!important;display:grid;place-items:center;background:transparent!important;color:var(--color-primary-strong)!important;border:0}.food-favorite .icon,.bookmark-button .icon{width:21px;height:21px}
.library-tabs{overflow-x:auto;flex-wrap:nowrap}.library-tabs button{white-space:nowrap;flex:0 0 auto}
.library-item strong{font-weight:600}.library-item small{color:var(--color-text-muted)}
.compact-card-head{position:relative;padding-bottom:30px}.compact-grid .icon-action{position:absolute;right:0;bottom:0;width:44px;height:44px;margin:0;border:0;border-radius:0;background:transparent;color:var(--color-water);font-weight:800;font-size:28px;line-height:1}
.meal-block{padding-inline:16px}.meal-add{width:44px;height:44px;border-radius:0;background:transparent!important;color:var(--color-primary-strong)!important;font-size:28px;font-weight:800}
.sheet-actions button{color:var(--color-primary-strong)}.loading-card,.unavailable-card{padding:24px 18px}
.bottom-nav{background:rgba(255,255,255,.97);border-color:var(--color-border);box-shadow:0 10px 35px var(--color-shadow)}.nav-add{color:#fff!important;background:var(--color-primary);box-shadow:0 7px 18px rgba(21,148,71,.28)}
.water-card .compact-card-head>.icon{color:var(--color-water)}.quick-dialog button{background:#e8f4fd;color:#176fa9}.quick-dialog button:first-child{background:#f1f3f4;color:var(--color-text-muted)}
@media(max-width:560px){.brand-wordmark{width:128px}.today-top-main{gap:5px}.today-top-main .date{font-size:12px}.profile-view .top{margin-bottom:12px}.meal-block{padding-inline:12px}}
@media(max-width:360px){.brand-wordmark{width:112px}.today-top-main .date{font-size:11px}}

/* R23 demo polish: separate recipe nutrition hierarchy and keep long meal dialogs usable. */
.recipe-nutrition-block{display:grid;gap:8px;margin:16px 0;padding:14px 16px;border:1px solid var(--color-border);border-radius:16px;background:var(--color-surface)}
.recipe-nutrition-block+.recipe-nutrition-block{margin-top:10px;background:var(--color-primary-soft);border-color:#ccebd5}
.recipe-nutrition-label{color:var(--color-text);font-size:14px}.recipe-nutrition-kcal{color:var(--color-primary-strong);font-size:24px;line-height:1.15}.recipe-nutrition-macros{display:flex;flex-wrap:wrap;gap:10px 18px;color:var(--color-text-muted);font-size:13px}
.dialog-form{display:grid;grid-template-rows:auto minmax(0,1fr) auto;max-height:min(88vh,720px);overflow:hidden;padding:0!important}
.dialog-header{padding:18px 18px 12px;background:var(--color-surface)}.dialog-header .row{margin:0}.dialog-body{min-height:0;overflow-y:auto;padding:0 18px 18px;overscroll-behavior:contain}.dialog-footer{border-top:1px solid var(--color-border);padding:12px 18px calc(12px + env(safe-area-inset-bottom));background:var(--color-surface);box-shadow:0 -4px 14px var(--color-shadow)}.dialog-footer .footer-actions{margin:0}
@media(max-width:420px){.dialog-header{padding:14px 14px 10px}.dialog-body{padding:0 14px 16px}.dialog-footer{padding-left:14px;padding-right:14px}.recipe-nutrition-macros{gap:8px 12px}}

/* R24.1 visual cleanup: stable header, collision-safe rows, and fixed-nav inset. */
@font-face{font-family:Manrope;src:url('/fonts/Manrope-Variable.ttf') format('truetype');font-style:normal;font-weight:200 800;font-display:swap}
:root{--font-brand:Georgia,serif;--font-display:Manrope,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;--font-ui:Manrope,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;--font-metric:Manrope,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;--font-weight-regular:400;--font-weight-medium:550;--font-weight-semibold:650;--font-weight-bold:750;--text-primary:var(--color-text);--text-secondary:var(--color-text-muted);--surface-subtle:#f7f9f8;--focus:#087f3f;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--bottom-nav-inset:calc(112px + env(safe-area-inset-bottom))}
body,button,input,select,textarea{font-family:var(--font-ui);font-synthesis:none}
.brand{font-family:var(--font-brand)}
.card h2,.progress-hero h2,.recipe-detail h2,.plan-preview h2,.onboarding-step h2,.onboarding-start h2,.onboarding-plan h2{font-family:var(--font-display)}
.calorie-ring strong,.remaining,.section-total,.meal-calories,.recipe-nutrition-kcal,.metric strong{font-family:var(--font-metric);font-variant-numeric:tabular-nums}
.calorie-ring strong,.remaining,.section-total,.meal-calories,.recipe-nutrition-kcal,.metric strong{font-weight:var(--font-weight-bold);letter-spacing:-.015em}
.calorie-ring span,.macro strong small,.recipe-nutrition-macros{font-variant-numeric:tabular-nums}
.plus-marker{font-family:var(--font-ui)}
button,input,select,textarea{font-weight:var(--font-weight-regular)}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid color-mix(in srgb,var(--focus) 35%,transparent);outline-offset:2px}
.shell{padding-bottom:var(--bottom-nav-inset)}
.profile-view .shell{padding-bottom:var(--bottom-nav-inset)}
.dialog-body,.library-modal{padding-bottom:calc(20px + env(safe-area-inset-bottom))}
.food-option-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:stretch}
.food-option-row .food-option{min-width:0}
.food-option-row .food-favorite{white-space:nowrap;padding-inline:8px}
.food-option span,.food-option strong,.food-option small{min-width:0;overflow-wrap:anywhere}
.draft-ingredient{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:10px}
.draft-ingredient>span{min-width:0;overflow-wrap:anywhere;line-height:1.3}
.draft-ingredient label{min-width:max-content}
.recipe-ingredients>div{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:start;padding:8px 0;border-bottom:1px solid var(--color-border)}
.recipe-ingredients>div>span{min-width:0;overflow-wrap:anywhere}
.library-list .library-recipe-item{width:100%;background:var(--color-surface);color:var(--color-text);text-align:left;border:1px solid var(--color-border);box-shadow:none}
.library-list .library-recipe-item .library-chevron{color:var(--color-primary-strong);white-space:nowrap;font-size:12px}
.navigator{padding:10px 12px;margin:8px 0;min-height:0}
.navigator p{font-size:12px}
.section-heading{margin-bottom:2px}
.progress-hero{padding:16px}
.progress-hero h2{font-size:27px;margin:4px 0}
.metric-grid h2{font-size:18px}
#library-dialog{box-sizing:border-box;width:min(calc(100vw - 24px),480px);max-width:480px}
.recipe-image{display:block;width:auto;max-width:100%;height:auto;object-fit:contain;margin-inline:auto}.recipe-image-empty{display:none!important}
@media(min-width:1120px){.recipe-image{max-height:40vh}}
.status{display:none!important}
@media(max-width:560px){
  .top-actions{flex-direction:row!important;align-items:center!important}
  .today-top-main{flex:1;min-width:0}
  .today-top-main .date{overflow:hidden;text-overflow:ellipsis}
  .draft-ingredient{grid-template-columns:minmax(0,1fr) auto;gap:6px 8px}
  .draft-ingredient>button{grid-column:2;grid-row:1}
  .draft-ingredient>label{grid-column:1/-1;justify-self:start}
  .food-option-row{grid-template-columns:minmax(0,1fr) auto}
  .library-modal{padding-bottom:calc(28px + env(safe-area-inset-bottom))}
}

@media(max-width:360px){.today-top-main .brand{font-size:16px}.today-top-main .date{font-size:12px}.bottom-nav{width:calc(100% - 16px)}}

/* R24 mobile polish: compact Today summaries, stable mobile forms, and calmer library actions. */
html,body{overscroll-behavior-y:none}body{min-width:0;overflow-x:hidden}.shell{min-height:100dvh}.meal-block>summary{list-style:none;cursor:pointer}.meal-block>summary::-webkit-details-marker{display:none}.meal-block[open] .meal-entries{padding-top:8px}.meal-calories{color:var(--color-primary-strong);white-space:nowrap}.meal-title>div,.meal-actions{min-width:0}.meal-title h3{overflow-wrap:anywhere}.water-card .quick{display:none}.library-item>span{display:grid;gap:4px;min-width:0}.library-item{align-items:center}.library-item strong,.library-item small{overflow-wrap:anywhere}.library-management{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.library-management button:last-child{grid-column:1/-1}.recipe-add-form>button{width:100%}.recipe-nutrition-block{min-width:0}.dialog-form{max-height:min(88dvh,720px)}input,select,textarea{font-size:16px!important;max-width:100%}button,.button{touch-action:manipulation}.dialog-body{scroll-padding-block:12px 20px}
@media(max-width:560px){.shell{padding-left:12px;padding-right:12px}.card{padding:14px;margin:8px 0}.meals-card{padding-bottom:4px}.meal-block{padding:10px 0 6px}.meal-head{gap:8px}.meal-actions{gap:6px}.meal-calories{font-size:14px}.compact-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.compact-grid .card{margin:8px 0;padding:12px 10px}.compact-card-head{gap:7px}.compact-card-head h2{font-size:17px}.compact-card-head p{font-size:12px}.bottom-nav{height:64px}.nav-add{width:64px;height:64px;margin-top:-8px}.library-tabs{scrollbar-width:none}.library-tabs::-webkit-scrollbar{display:none}}

.today-top{margin-bottom:10px}.today-top-main{display:flex;align-items:center;gap:12px;min-width:0}.today-top-main .date{margin:0}.today-top-main .brand{font-size:22px;white-space:nowrap}.today-top .top-actions{align-items:center}
@media(max-width:560px){.today-top{align-items:center;gap:8px}.today-top-main{gap:8px}.today-top-main .brand{font-size:17px;line-height:1}.today-top-main .date{font-size:13px;white-space:nowrap}.today-top-main .date .icon{width:16px;height:16px}.today-top .top-actions{flex-direction:row;gap:5px}.today-top .icon-button{width:34px;height:34px}.today-top .status{max-width:96px;padding:6px 8px;font-size:11px}}

.nutrient-guidance{display:grid;gap:8px;margin-top:10px;padding-top:10px;border-top:1px solid var(--color-border)}
.nutrient-guidance>p,.nutrient-guidance-metric h4,.nutrient-guidance-metric h5{margin:0}
.nutrient-guidance-options,.nutrient-guidance-metric{display:grid;gap:8px}
.nutrient-guidance-metric{padding-top:8px;border-top:1px solid var(--color-border)}
.nutrient-guidance-metric h4{font-size:14px}
.nutrient-guidance-metric h5{font-size:12px;color:var(--color-text-muted)}
.nutrient-guidance-metric ul{display:grid;gap:6px;list-style:none;padding:0;margin:0}
.nutrient-guidance-metric li button{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 8px;width:100%;min-height:44px;text-align:left}
.nutrient-guidance-metric li button>span:first-child,.nutrient-guidance-metric li button>small{min-width:0;overflow-wrap:anywhere}
.nutrient-guidance-metric li button>small{color:var(--color-text-muted)}
.nutrient-guidance-select{grid-column:2;grid-row:1 / span 2;align-self:center;color:var(--color-primary-strong);font-size:12px;font-weight:700}

/* QA palette convergence: active presentation tokens aligned to approved references. */
:root{--color-primary:#159447;--color-primary-strong:#087f3f;--color-primary-soft:#eaf7ed;--color-bg:#f7f9f8;--color-surface:#fff;--color-text:#15213b;--color-text-muted:#687386;--color-border:#e3e8ee;--color-protein:#159447;--color-fat:#f3a229;--color-carbs:#9850df;--color-water:#2f9fe8;--color-success:#159447;--color-danger:#c95345;--color-shadow:rgba(21,33,59,.10);--ink:var(--color-text);--muted:var(--color-text-muted);--paper:var(--color-surface);--bg:var(--color-bg);--wine:var(--color-primary);--wine2:var(--color-primary-strong);--sage:var(--color-primary);--line:var(--color-border);--danger:var(--color-danger)}
body{background:var(--color-bg);color:var(--color-text)}.brand,.card h2,button.ghost{color:var(--color-primary)}.card{background:var(--color-surface);border-color:var(--color-border);box-shadow:0 8px 30px var(--color-shadow)}.hero{background:var(--color-surface);color:var(--color-text);border:1px solid var(--color-border)}.hero h2{color:var(--color-text)}.calorie-ring{background:conic-gradient(var(--color-primary) var(--progress),#e8eceb 0)}.calorie-ring::after{background:var(--color-surface)}.remaining,.section-total,.progress-weight>strong{color:var(--color-primary)}.macro-bar.protein b{background:var(--color-protein)}.macro-bar.fat b{background:var(--color-fat)}.macro-bar.carbs b{background:var(--color-carbs)}.progress>i{background:var(--color-primary)}button,.button{background:var(--color-primary)}button.secondary,.button.secondary{background:var(--color-primary-soft);color:var(--color-primary-strong)}.navigator{background:var(--color-primary-soft);border-color:#ccebd5}.navigator>.icon,.navigator>span .icon,.meal-title>.icon{color:var(--color-primary)}.compact-card-head>.icon{color:var(--color-water)}.icon-action{background:#e8f4fd;color:var(--color-water)}.bottom-nav{background:rgba(255,255,255,.96);border-color:var(--color-border);box-shadow:0 10px 35px var(--color-shadow)}.nav-item{color:var(--color-text-muted)}.nav-item.active,.nav-add{color:var(--color-primary)}.nav-add{background:var(--color-primary);box-shadow:0 7px 18px rgba(21,148,71,.28)}.sheet-actions button{background:var(--color-primary-soft);color:var(--color-primary-strong)}.sheet-actions .icon{color:var(--color-primary)}.period-tabs button{background:#f1f4f6;color:var(--color-text-muted)}.period-tabs button.active{background:var(--color-primary)}.progress-hero{background:var(--color-surface);color:var(--color-text);border-color:var(--color-border)}.progress-hero h2{color:var(--color-text)}.progress-hero p{color:var(--color-text-muted)}.trend-chart{background:#f7faf8}.trend-chart polyline,.trend-chart circle{stroke:var(--color-primary);fill:var(--color-primary)}.trend-gridline{stroke:#dce9df}.success-toast{background:var(--color-primary-soft);border-color:#bfe5c8;color:var(--color-success);box-shadow:0 6px 20px rgba(21,148,71,.10)}.danger-button{background:var(--color-danger)}
.nav-add{color:#fff}.status{background:var(--color-surface);color:var(--color-text);border-color:var(--color-border)}.status.waiting,.status.offline{color:var(--color-primary-strong)}.status.conflict{color:var(--color-danger)}

/* R24.4 Mobile UX: safe areas, sticky Today controls, and compact affordances. */
body{padding-bottom:0}
.icon-image{background:currentColor;mask:var(--icon-url) center/contain no-repeat;-webkit-mask:var(--icon-url) center/contain no-repeat}
.app-loading{min-height:100dvh;display:grid;place-content:center;justify-items:center;gap:8px;color:var(--color-text-muted)}
.app-loading .loading-dot{margin:0;width:24px;height:24px}
.top{position:sticky;top:0;z-index:10;background:var(--color-bg);padding-top:env(safe-area-inset-top);padding-bottom:4px;margin-inline:-12px;padding-inline:12px;border-bottom:1px solid var(--color-border);min-height:calc(48px + env(safe-area-inset-top))}
.today-top{margin-bottom:10px}.today-top-main{min-width:0}.day-navigation{display:flex;align-items:center;gap:2px;min-width:0;margin-left:auto}.day-navigation .date{max-width:190px;overflow:hidden;text-overflow:ellipsis}.day-arrow{width:44px;height:44px;padding:0;display:grid;place-items:center;background:transparent!important;color:var(--color-text-muted)!important;border:0}.day-arrow:disabled{opacity:.3}.day-arrow .icon{width:20px;height:20px}.profile-avatar{width:24px;height:24px;display:block;color:currentColor}.icon-button{width:44px;height:44px}
.auth .form button:disabled{opacity:1}
.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.meal-head{display:grid;grid-template-columns:22px minmax(0,1fr) auto;align-items:center;gap:8px}.meal-chevron{display:grid;place-items:center;color:var(--color-text-muted)}.meal-chevron .icon{width:18px;height:18px}.meal-block[open] .meal-chevron .icon{transform:rotate(180deg)}.meal-add{min-width:44px;min-height:44px}.entry-actions .ghost{min-width:44px;min-height:44px;padding:8px 6px;color:var(--color-text-muted);background:transparent!important}.entry-name{font-weight:600}.entry small{color:var(--color-text-muted)}
.compact-grid{align-items:stretch}.compact-grid>.card{height:100%;min-height:132px}.compact-card-head{min-height:86px}.compact-card-head h2{font-size:18px}.compact-card-head p{line-height:1.35}.compact-grid .icon-action{bottom:0}.water-card .progress{margin-top:auto}.water-card,.weight-card{display:flex;flex-direction:column}.weight-card .compact-card-head{width:100%}
.offline-notice{background:#eef6ff;border-color:#c8def3;color:#2a5c84}.local-notice{background:var(--color-primary-soft);border-color:#ccebd5}.today-screen{padding-bottom:calc(96px + env(safe-area-inset-bottom))}.today-screen .meals-card .section-heading .eyebrow{display:none}.today-screen .water-card>.quick{display:none}.bottom-nav{bottom:calc(8px + env(safe-area-inset-bottom));padding-bottom:8px;height:64px}
.navigator.unavailable{display:none!important}.navigator-card{display:grid;gap:4px;padding:12px 14px;margin:8px 0;border:1px solid var(--color-border);border-radius:16px;background:var(--color-primary-soft);color:var(--color-text)}.navigator-card>.eyebrow,.navigator-card>.navigator-copy>strong{color:var(--color-primary-strong)}.navigator-card p{margin:0;color:var(--color-text-muted);font-size:13px}.navigator-basis,.navigator-caution{display:block;color:var(--color-text-muted);font-size:11px}.navigator-period{display:grid;gap:10px}.navigator-period h2{margin:0}.navigator-period.locked{border:1px solid var(--color-border)}.navigator-period.locked p{margin:0;color:var(--color-text-muted)}.navigator-period-controls{display:grid;gap:8px}.navigator-period-tabs{display:flex;gap:6px;overflow-x:auto;padding:2px 0 6px;scrollbar-width:thin}.navigator-period-tabs button{flex:0 0 auto;min-height:40px;padding:8px 11px;background:var(--color-primary-soft);color:var(--color-text-muted);white-space:nowrap}.navigator-period-tabs button.active{background:var(--color-primary);color:var(--on-accent)}.navigator-compare-toggle{display:flex;align-items:flex-start;gap:8px;color:var(--color-text-muted);font-size:13px}.navigator-compare-toggle input{flex:0 0 auto;min-width:18px;min-height:18px;margin:1px 0 0}.navigator-custom-range{display:grid;grid-template-columns:1fr 1fr;gap:8px}.navigator-custom-range label{display:grid;gap:4px;color:var(--color-text-muted);font-size:12px}.navigator-custom-range input{min-width:0;min-height:42px}.navigator-range,.navigator-coverage{margin:0;color:var(--color-text-muted)}.navigator-insufficient,.navigator-weight-trend,.navigator-comparison{display:grid;gap:6px;padding-top:10px;border-top:1px solid var(--color-border)}.navigator-insufficient p,.navigator-weight-trend small,.navigator-comparison p{margin:0;color:var(--color-text-muted)}.navigator-weight-trend span{font-size:20px;font-weight:700;color:var(--color-primary-strong)}.navigator-weight-points{display:flex;gap:8px;overflow-x:auto;list-style:none;padding:4px 0;margin:0}.navigator-weight-points li{display:grid;gap:4px;min-width:88px;padding:8px;border-radius:10px;background:var(--color-primary-soft)}.navigator-weight-points time{font-size:11px;color:var(--color-text-muted)}.navigator-comparison dl{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:0}.navigator-comparison dl>div{display:flex;justify-content:space-between;gap:8px}.navigator-comparison dt,.navigator-comparison dd{margin:0}.navigator-comparison dd{font-weight:700}.locked-metrics{display:grid;gap:4px}.locked-metrics h2,.locked-metrics p{margin:0}
.navigator-weight-data{display:grid;gap:4px}.icon-raster{object-fit:contain;background:none!important;mask:none!important;-webkit-mask:none!important}
.navigator-feedback{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}.navigator-feedback button{min-height:44px;flex:1 1 120px;background:var(--color-primary-soft);color:var(--color-primary-strong);border:1px solid var(--color-border);box-shadow:none}.navigator-feedback button:disabled{opacity:.65}.navigator-feedback-result{margin:6px 0 0;color:var(--color-text-muted);font-size:13px}
@media(max-width:560px){.top{padding-top:env(safe-area-inset-top);padding-bottom:0}.brand-wordmark{width:112px}.day-navigation .date{max-width:150px;font-size:12px}.compact-grid>.card{min-height:124px}.bottom-nav{bottom:env(safe-area-inset-bottom);height:64px;padding-bottom:8px}}
@media(max-width:360px){.brand-wordmark{width:80px}.day-navigation{flex:1}.day-navigation .date{max-width:72px;font-size:11px}.day-arrow{width:44px}}
.meals-card .section-heading .eyebrow{display:none}.nav-add{font-size:0}.desktop-nav-label{display:none}.desktop-nav-group,.desktop-nav-separator,.desktop-nav-account{display:none}.meal-macros{display:none}
.meal-actions{display:flex;align-items:center;gap:4px}.meal-menu{font-size:22px;line-height:1;padding:5px 8px}.library-modal{max-height:min(88vh,720px);overflow:auto}.library-tabs{display:flex;gap:6px;overflow:auto;padding:4px 0 14px;margin:0 -2px}.library-tabs button{flex:0 0 auto;padding:9px 11px;font-size:12px;background:#f1f4f6;color:var(--color-text-muted)}.library-tabs button.active{background:var(--color-primary);color:#fff}.library-list{display:grid;gap:8px}.library-item{display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid var(--color-border);border-radius:14px;padding:11px 12px}.library-item div{display:grid;gap:3px;min-width:0}.library-item strong{overflow-wrap:anywhere}.library-item small{color:var(--color-text-muted)}.library-empty{display:grid;gap:10px;border:1px dashed var(--color-border);border-radius:16px;padding:18px;color:var(--color-text-muted)}.library-empty strong{color:var(--color-text)}.library-empty p{margin:0}.plus-marker{display:inline-block;border-radius:999px;background:#f4e9ff;color:#7e38c5;padding:4px 7px;font:600 11px Inter,sans-serif;vertical-align:middle}.draft-ingredients{display:grid;gap:6px}.draft-ingredient{display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid var(--color-border);padding:8px 0}.calculation-modes{display:grid;gap:8px;border:1px solid var(--color-border);border-radius:14px;padding:12px}.calculation-modes label{display:flex;align-items:center;gap:8px;color:var(--color-text)}.calculation-modes input{width:auto}
.food-picker-library-menu{display:flex;gap:6px;overflow-x:auto;padding:4px 0 8px;margin:4px 0;scrollbar-width:thin}.food-picker-library-menu button{flex:0 0 auto;min-height:40px;padding:8px 10px;border:1px solid var(--color-border);border-radius:999px;background:var(--color-surface);color:var(--color-text-muted);font-size:12px;white-space:nowrap}.food-picker-library-menu button:active,.food-picker-library-menu button:focus-visible{background:var(--color-primary-soft);color:var(--color-primary-strong)}
.library-management{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.library-management button{padding:9px 6px;font-size:12px}.library-management button:last-child{grid-column:1/-1}.recipe-placeholder{border:1px solid var(--color-border);border-radius:14px;background:var(--color-bg);padding:24px 16px;color:var(--color-text-muted);line-height:1.5}.draft-ingredient label{display:flex;align-items:center;gap:5px;color:var(--color-text-muted);white-space:nowrap}.draft-ingredient input{width:78px;padding:7px}.draft-ingredient button{padding:5px 6px;font-size:12px}
.recipe-ingredients{padding-top:12px}.library-management{margin-top:16px;padding-top:12px;border-top:1px solid var(--color-border)}.library-management button:not(.danger-button){background:var(--color-surface);color:var(--color-primary-strong);border:1px solid var(--color-border)}.library-management .danger-button{background:transparent;color:var(--color-danger);border:1px solid #efc8c3}.entry-actions{align-items:center;max-width:150px}.entry-actions .ghost{min-width:44px;min-height:44px}
.entry-action-icon{width:18px;height:18px;display:block;color:currentColor}.recipe-add-form{margin-top:20px;display:grid;gap:12px}.recipe-add-form>button{min-height:52px;border-radius:14px}
.recipe-ingredients{padding-top:8px;margin-bottom:12px}.recipe-ingredients>h3{margin:0 0 4px}.recipe-ingredients>div{padding:6px 0}.recipe-add-form{margin-top:12px;gap:8px}.library-management{margin-top:10px;padding-top:8px}.draft-ingredient{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:8px;padding:6px 0}.draft-ingredient>span{min-width:0;overflow-wrap:anywhere}.draft-amount{display:flex!important;align-items:center;gap:4px;min-width:0!important;white-space:nowrap}.draft-amount input{width:72px;padding:7px}.draft-unit{color:var(--color-text-muted)}.draft-ingredient .field-error{grid-column:1/-1}.draft-ingredient>button{min-height:44px;padding:8px 8px;font-size:12px;white-space:nowrap}
@media(max-width:360px){.draft-ingredient{grid-template-columns:minmax(0,1fr) 68px auto;gap:5px}.draft-amount input{width:60px}.draft-ingredient>button{padding-inline:5px;font-size:11px}}

/* R24.4.3: let iOS open the native calendar from a real user tap and keep ingredient controls on one row. */
.date-button{position:relative;cursor:pointer}
.date-button .icon{display:block;width:18px;height:18px;color:var(--color-text-muted)}
@media(max-width:560px){.draft-ingredient{grid-template-columns:minmax(0,1fr) auto auto;gap:6px}.draft-ingredient>button{grid-column:auto;grid-row:auto}.draft-ingredient>label{grid-column:auto;grid-row:auto;justify-self:stretch}}
.bottom-nav{box-sizing:border-box;grid-template-columns:minmax(0,1fr) 64px minmax(0,1fr)}
.nav-add{justify-self:center;margin-inline:0}
.card-action{display:block;width:100%;margin:8px 0;text-align:left;color:var(--color-text);background:var(--color-surface);border:1px solid var(--color-border);box-shadow:0 8px 30px var(--color-shadow);cursor:pointer}
.card-action:focus-visible{outline:3px solid color-mix(in srgb,var(--focus) 35%,transparent);outline-offset:2px}
.card-action .compact-card-head{width:100%}
.plan-section{display:grid;gap:12px}.plan-section .section-heading{margin-bottom:0}.plan-calories{color:var(--color-primary-strong);white-space:nowrap}.plan-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.plan-facts span{display:grid;gap:3px;color:var(--color-text-muted);font-size:12px}.plan-facts strong{color:var(--color-text);font-size:14px}.plan-preview-inline{display:grid;gap:10px}.plan-preview-inline:empty{display:none}.plan-preview-inline>.plan-grid{margin:0}.plan-confirmation{margin:0;padding:12px;background:var(--color-primary-soft);border-radius:12px;color:var(--color-primary-strong);line-height:1.4}.plan-section button{width:100%}
@media(max-width:420px){.plan-facts{grid-template-columns:1fr}.plan-section .section-heading{align-items:flex-start}.plan-calories{font-size:15px}}

/* R24.5 semantic theme system. */
:root{--bg:#F4F7F5;--surface:#FBFCFB;--surface-raised:#FFFFFF;--surface-muted:#EDF2EF;--text-primary:#17221B;--text-secondary:#45544A;--text-muted:#59675E;--text-inverse:#FFFFFF;--text-disabled:#5F6D63;--border:#7E8E83;--divider:#DFE6E1;--accent:#087F3F;--accent-hover:#066A34;--accent-pressed:#05582D;--accent-muted:#E1F2E7;--on-accent:#FFFFFF;--success:#18703B;--success-muted:#E8F5EC;--warning:#7A5200;--warning-muted:#FFF4D6;--danger:#B42318;--danger-muted:#FDEAE8;--info:#245D7A;--info-muted:#E8F3FA;--input-bg:#FFFFFF;--input-border:#7E8E83;--input-focus:#087F3F;--input-error:#B42318;--overlay:rgba(16,25,20,.56);--shadow:rgba(18,31,22,.12);--nav-bg:#FBFCFB;--modal-bg:#FFFFFF;--data-protein:#087F3F;--data-fat:#8A5700;--data-carbs:#7337A8;--data-water:#126DAB;--color-bg:var(--bg);--color-surface:var(--surface-raised);--color-primary:#0B8F4A;--color-primary-strong:var(--accent);--color-primary-soft:var(--accent-muted);--color-text:var(--text-primary);--color-text-muted:var(--text-muted);--color-border:var(--divider);--color-protein:var(--data-protein);--color-fat:var(--data-fat);--color-carbs:var(--data-carbs);--color-water:var(--data-water);--color-success:var(--success);--color-danger:var(--danger);--color-shadow:var(--shadow);--ink:var(--text-primary);--muted:var(--text-muted);--paper:var(--surface-raised);--line:var(--divider)}
:root[data-theme="dark"]{--bg:#111815;--surface:#18211B;--surface-raised:#202B24;--surface-muted:#26332C;--text-primary:#EEF4F0;--text-secondary:#CBD6CE;--text-muted:#A5B2A9;--text-inverse:#17231B;--text-disabled:#9AA69D;--border:#758579;--divider:#2C3A32;--accent:#6BD08D;--accent-hover:#83DBA0;--accent-pressed:#50BC76;--accent-muted:#1E3B2A;--on-accent:#102018;--success:#82D99D;--success-muted:#1A3323;--warning:#F3C870;--warning-muted:#382D17;--danger:#FF928A;--danger-muted:#3B211F;--info:#86C9F0;--info-muted:#1B3040;--input-bg:#18211B;--input-border:#758579;--input-focus:#75D997;--input-error:#FF928A;--overlay:rgba(0,0,0,.68);--shadow:rgba(0,0,0,.42);--nav-bg:#18211B;--modal-bg:#202B24;--data-protein:#6BD08D;--data-fat:#F3C870;--data-carbs:#C698F1;--data-water:#69BDF0;--color-bg:var(--bg);--color-surface:var(--surface-raised);--color-primary:#6BD08D;--color-primary-strong:var(--accent);--color-primary-soft:var(--accent-muted);--color-text:var(--text-primary);--color-text-muted:var(--text-muted);--color-border:var(--divider);--color-protein:var(--data-protein);--color-fat:var(--data-fat);--color-carbs:var(--data-carbs);--color-water:var(--data-water);--color-success:var(--success);--color-danger:var(--danger);--color-shadow:var(--shadow);--ink:var(--text-primary);--muted:var(--text-muted);--paper:var(--surface-raised);--line:var(--divider)}
html,body,#app{background:var(--bg);color:var(--text-primary);color-scheme:light}html[data-theme="dark"]{color-scheme:dark}body::backdrop{background:var(--bg)}
input,select,textarea{background:var(--input-bg);color:var(--text-primary);border-color:var(--input-border)}input::placeholder,textarea::placeholder{color:var(--text-muted);opacity:1}input:focus,select:focus,textarea:focus{border-color:var(--input-focus);outline:3px solid color-mix(in srgb,var(--input-focus) 28%,transparent);outline-offset:1px}input:invalid:not(:placeholder-shown),select:invalid,textarea:invalid{border-color:var(--input-error)}input[type=radio],input[type=checkbox]{accent-color:var(--accent)}button,.button{color:var(--on-accent)}button.secondary,.button.secondary{background:var(--accent-muted);color:var(--accent)}button.ghost{color:var(--accent);background:transparent}.card,.hero,.meal-list,.metric,.food-option,.library-item,.recipe-nutrition-block{background:var(--surface-raised);border-color:var(--divider);box-shadow:0 8px 30px var(--shadow)}.top,.bottom-nav{background:var(--nav-bg)}.bottom-nav{box-shadow:0 10px 35px var(--shadow)}.sheet,dialog:not(.sheet),.modal,.dialog-header,.dialog-body,.dialog-footer{background:var(--modal-bg);color:var(--text-primary)}dialog::backdrop{background:var(--overlay)}.status,.offline-notice,.local-notice,.success-toast{background:var(--surface-muted);color:var(--text-secondary);border-color:var(--divider)}.offline-notice{background:var(--info-muted);color:var(--info)}.success-toast{background:var(--success-muted);color:var(--success)}.danger-button{background:var(--danger);color:var(--text-inverse)}.theme-settings{display:grid;gap:8px}.theme-settings h2{margin-bottom:0}.theme-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;border:0;padding:0;margin:4px 0 0}.theme-options label{display:flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:8px;border:1px solid var(--divider);border-radius:10px;background:var(--surface-muted);color:var(--text-secondary);cursor:pointer}.theme-options label:has(input:checked){background:var(--accent-muted);border-color:var(--accent);color:var(--accent)}.theme-options input{margin:0}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.profile-avatar{border-radius:50%;object-fit:cover}.macro-bar.protein b{background:var(--data-protein)}.macro-bar.fat b{background:var(--data-fat)}.macro-bar.carbs b{background:var(--data-carbs)}.compact-card-head>.icon{color:var(--data-water)}.navigator,.onboarding-reassurance{background:var(--accent-muted);border-color:var(--divider)}.navigator strong,.remaining,.section-total,.progress-weight>strong{color:var(--accent)}.trend-chart{background:var(--surface-muted)}.trend-gridline{stroke:var(--divider)}.progress-hero{background:var(--surface-raised);color:var(--text-primary)}.progress-hero h2{color:var(--accent)}
/* R24.5 chrome: controls keep their hit area while the approved artwork stays unframed. */
.top .icon-button{width:44px;height:44px;padding:0;background:transparent;border:0;border-radius:0;box-shadow:none;color:var(--text-primary);display:grid;place-items:center}
.top .icon-button .icon{width:24px;height:24px}
.top .icon-button .profile-avatar{width:32px;height:32px}
.nav-add{width:56px;height:56px;padding:0;margin:0;border:0;border-radius:0;background:transparent!important;box-shadow:none!important;color:var(--on-accent)!important;display:grid;place-items:center}
.fab-icon{display:block;width:56px;height:56px}
.success-toast,.library-toast{background:var(--surface-raised)!important;color:var(--text-primary)!important;border:1px solid var(--border)!important;box-shadow:0 8px 26px var(--shadow)!important;font-weight:650}
.close-icon .icon-image{width:20px;height:20px}.push-card h2{display:flex;align-items:center;gap:6px}.push-card h2 .icon-image{width:20px;height:20px}.library-tabs [data-library-view]{display:inline-flex;align-items:center;gap:5px}.library-tabs .icon-image{width:16px;height:16px}.food-favorite .icon-image{width:21px;height:21px}.meal-add .icon-image{width:22px;height:22px}
@media (max-width:560px) and (max-height:740px){.today-screen .top{margin-bottom:4px}.today-screen .hero{padding:12px}.today-screen .meals-card{margin-top:6px;padding-top:10px}.today-screen .meal-block{padding-top:8px;padding-bottom:2px}.today-screen .compact-grid .card{min-height:112px;padding-top:10px;padding-bottom:10px}.today-screen .compact-card-head{min-height:72px}.today-screen{padding-bottom:calc(88px + env(safe-area-inset-bottom))}.today-screen .bottom-nav{height:64px}}

/* R24.5.1 focused hotfix: final overrides for the approved presentation states. */
.theme-options input[type=radio]{position:absolute;opacity:0;width:1px;height:1px;margin:-1px;pointer-events:none}
.theme-options label:focus-within{outline:3px solid color-mix(in srgb,var(--input-focus) 35%,transparent);outline-offset:2px}
.calorie-ring.over-target{background:conic-gradient(var(--warning) var(--progress),#e8eceb 0)}
.calorie-ring.over-target strong,.remaining.over-target,.calorie-status.over-target,.macro-actual.over-target{color:var(--warning)}
.calorie-status{display:block}.macro-actual{font:inherit;color:inherit}
.top,.bottom-nav{box-sizing:border-box}.bottom-nav{bottom:env(safe-area-inset-bottom);padding-bottom:8px;overscroll-behavior:none}

/* Progress weight trend: only observed values, never an area fill or interpolated samples. */
.trend-chart{height:auto;min-height:0;padding:10px 8px 8px;background:var(--surface-muted);overflow:hidden}
.trend-chart svg{display:block;width:100%;height:clamp(142px,38vw,170px);overflow:visible}
.trend-chart svg .trend-line{fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.trend-chart svg .trend-point{fill:var(--accent);stroke:var(--surface-raised);stroke-width:1.5;vector-effect:non-scaling-stroke}
.trend-chart svg .trend-gridline{fill:none;stroke:var(--divider);stroke-width:1;vector-effect:non-scaling-stroke}
.trend-chart svg .trend-axis-label{fill:var(--text-muted);font-size:10px;font-family:inherit}
.trend-labels{display:flex;justify-content:space-between;gap:8px;padding:0 2px;color:var(--text-muted);font-size:11px}
.trend-labels small{min-width:0}.trend-labels small:nth-child(2):not(:last-child){text-align:center}.trend-labels small:last-child{text-align:right}
.profile-library-actions{display:flex;flex-wrap:wrap;align-items:stretch;gap:12px}
.profile-library-actions>button{flex:1 1 132px;min-width:0;min-height:44px}
@media(min-width:561px){.profile-library-actions{gap:16px}.profile-library-actions>button{flex-basis:160px}}
@media(max-width:560px){.top{padding-top:max(env(safe-area-inset-top),18px);min-height:calc(48px + max(env(safe-area-inset-top),18px))}}
/* R24.5.6 live QA follow-up: stable compact Today chrome and a desktop-first workspace. */
.top{box-sizing:border-box;position:sticky;top:0;align-self:start;min-height:calc(48px + env(safe-area-inset-top));padding-top:env(safe-area-inset-top);padding-bottom:0}
.today-screen>.top{z-index:20}
@media(min-width:900px){
  .shell:not(.today-screen){width:min(calc(100% - 48px),1040px);margin-inline:auto}
  .today-screen{width:min(calc(100% - 64px),1280px);margin-inline:auto;display:grid;grid-template-columns:minmax(0,1.55fr) minmax(300px,.85fr);grid-template-areas:"top top" "notices notices" "hero quick" "meals quick";column-gap:24px;row-gap:12px;align-content:start;padding-bottom:calc(120px + env(safe-area-inset-bottom))}
  .today-screen>.top{grid-area:top;margin-inline:0}
  .today-screen>.today-notices{grid-area:notices}
  .today-screen>.hero{grid-area:hero;min-width:0}
  .today-screen>.meals-card{grid-area:meals;min-width:0}
  .today-screen>.compact-grid{grid-area:quick;display:grid;grid-template-columns:minmax(0,1fr);align-content:start;min-width:0}
  .today-screen>.compact-grid>.card{min-height:144px}
  .bottom-nav{width:min(calc(100% - 64px),720px)}
}
.food-picker-library-menu{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,140px),1fr));gap:6px;overflow:visible;padding:4px 0 8px;margin:4px 0}
.food-picker-library-menu button{min-width:0;min-height:44px;white-space:normal;overflow-wrap:anywhere;line-height:1.25;text-align:center}
.food-picker-library-panel[hidden]{display:none}
.shell>.card:has(> .period-tabs + h2 + .unavailable-card){padding:8px 12px}
.shell>.card:has(> .period-tabs + h2 + .unavailable-card)>.period-tabs{margin-bottom:3px}
.shell>.card:has(> .period-tabs + h2 + .unavailable-card)>h2{margin:1px 0 2px}
.shell>.card:has(> .period-tabs + h2 + .unavailable-card)>.unavailable-card{padding:8px 6px}
.shell>.card:has(> .period-tabs + h2 + .unavailable-card)>.unavailable-card h2{margin:1px 0}
.shell>.card:has(> .period-tabs + h2 + .unavailable-card)>.unavailable-card p{margin:2px 0}
.nav-add{width:64px;height:64px;margin-top:-8px}.fab-icon{display:block;width:64px;height:64px}.plan-safety{padding:12px;background:var(--accent-muted);border:1px solid var(--divider);border-radius:12px}.plan-safety summary{cursor:pointer;font-weight:700;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:8px}.plan-safety summary::-webkit-details-marker{display:none}.plan-safety summary::after{content:'⌄';font-size:1.25em}.plan-safety[open] summary::after{transform:rotate(180deg)}.plan-safety-content{display:grid;gap:8px;padding-top:12px}.plan-safety label{display:grid;gap:5px}.plan-safety label[hidden]{display:none!important}
.meals-card>.section-heading{align-items:center}.meals-card .section-heading h2{margin:2px 0 0}.meals-card .section-total{white-space:nowrap;font-variant-numeric:tabular-nums}.meal-empty{margin:0 0 0 34px;padding:8px 0 4px;color:var(--color-text-muted)}.period-tabs{width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.period-tabs button{min-width:0;white-space:nowrap;padding-inline:6px}.trend-chart{height:138px;padding:10px 12px 6px}.trend-chart svg{height:94px}.metric-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.metric{position:relative;min-width:0;min-height:72px;padding:10px;display:grid;grid-template-columns:30px minmax(0,1fr);grid-template-rows:auto auto;align-content:center;gap:2px 8px}.metric-mark{grid-row:1/3;width:30px;height:30px;display:grid;place-items:center;border-radius:10px;background:var(--surface-muted);color:var(--color-primary-strong);font-size:13px;font-weight:750}.metric strong{min-width:0;font-size:17px;line-height:1.15;font-variant-numeric:tabular-nums}.metric-protein .metric-mark{color:var(--color-protein);background:color-mix(in srgb,var(--color-protein) 12%,var(--color-surface))}.metric-fat .metric-mark,.metric-calories .metric-mark{color:var(--color-fat);background:color-mix(in srgb,var(--color-fat) 12%,var(--color-surface))}.metric-carbs .metric-mark{color:var(--color-carbs);background:color-mix(in srgb,var(--color-carbs) 12%,var(--color-surface))}.metric-water .metric-mark{color:var(--color-water);background:color-mix(in srgb,var(--color-water) 12%,var(--color-surface))}.library-search-field{display:grid;gap:6px;margin:12px 0;color:var(--color-text-muted);font-size:13px}.library-search-field input{width:100%;min-height:44px}.library-product-result{width:100%;text-align:left}.library-product-result>span:first-child{min-width:0}.library-product-result strong{overflow-wrap:anywhere}.library-product-result small{display:block}.device-data-divider{border:0;border-top:1px solid var(--color-border);margin:14px 0}.profile-email{overflow-wrap:anywhere}

/* R24.5.6 desktop workspace: a wider, task-oriented layout that keeps the
   existing mobile experience intact and uses the EiH green visual language. */
@media (min-width: 1121px) {
  body {
    background:
      radial-gradient(ellipse at 82% 0%, color-mix(in srgb, var(--color-primary-soft) 54%, transparent), transparent 35rem),
      var(--color-bg);
  }

  .bottom-nav {
    position: fixed;
    inset: 22px auto 22px 22px;
    z-index: 40;
    width: 220px;
    height: auto;
    max-height: none;
    padding: 22px 14px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 8px;
    transform: none;
    border-radius: 24px;
    background: var(--surface-raised);
    border: 1px solid var(--divider);
    box-shadow: 0 16px 44px var(--shadow);
    backdrop-filter: none;
    overflow-y: auto;
  }

  .bottom-nav::before {
    content: "";
    display: block;
    flex: 0 0 46px;
    margin: 0 8px 24px;
    background: url('/brand-wordmark-r24-6-light.png') left center / contain no-repeat;
  }

  html[data-theme="dark"] .bottom-nav::before {
    background-image: url('/brand-wordmark-r24-6-dark.png');
  }

  .bottom-nav .nav-item {
    min-height: 48px;
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: 24px minmax(0, 1fr);
    justify-content: start;
    justify-items: start;
    align-content: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 13px;
    color: var(--text-secondary);
    text-align: left;
  }

  .bottom-nav .nav-item .icon {
    width: 21px;
    height: 21px;
  }

  .bottom-nav .nav-item small {
    font-size: 14px;
    line-height: 1.25;
  }

  .bottom-nav .nav-item.active {
    color: var(--accent);
    background: var(--accent-muted);
  }

  .bottom-nav .desktop-nav-separator {
    display: block;
    flex: 0 0 1px;
    margin: 10px 8px 2px;
    background: var(--divider);
  }

  .bottom-nav .desktop-nav-group {
    display: grid;
    gap: 5px;
    min-height: 0;
  }

  .bottom-nav .desktop-nav-caption {
    padding: 6px 12px 4px;
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 750;
    letter-spacing: .1em;
  }

  .bottom-nav .nav-library-link {
    min-height: 42px;
    padding: 8px 12px;
  }

  .bottom-nav .nav-library-link .icon {
    width: 19px;
    height: 19px;
  }

  .bottom-nav .desktop-nav-account {
    display: grid;
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid var(--divider);
    border-radius: 0;
  }

  .bottom-nav .desktop-nav-account .profile-avatar {
    width: 22px;
    height: 22px;
  }

  .bottom-nav .nav-add {
    width: 100%;
    height: 48px;
    min-height: 48px;
    margin: 12px 0 8px;
    padding: 0 12px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    border-radius: 13px;
    color: var(--on-accent);
    background: var(--accent) !important;
    box-shadow: none !important;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
  }

  .bottom-nav .desktop-nav-label {
    display: inline;
    font-size: 14px;
    line-height: 1.25;
    color: var(--on-accent);
  }

  .bottom-nav .fab-icon {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
  }

  .shell,
  .today-screen,
  .profile-view,
  .desktop-library-screen {
    width: auto !important;
    max-width: 1480px !important;
    margin: 0 32px 0 274px !important;
    padding-top: 14px;
    padding-bottom: 36px;
  }

  .shell > .top {
    position: sticky;
    top: 0;
    z-index: 30;
    min-height: 70px;
    margin: 0 0 18px;
    padding: 10px 0 12px;
    border-bottom: 1px solid var(--divider);
    background: color-mix(in srgb, var(--color-bg) 92%, transparent);
    backdrop-filter: blur(16px);
  }

  .today-screen {
    display: grid;
    grid-template-columns: minmax(320px, 1.4fr) minmax(190px, .72fr) minmax(190px, .72fr);
    grid-template-areas:
      "top top top"
      "notices notices notices"
      "hero water weight"
      "meals meals meals";
    align-items: start;
    column-gap: 18px;
    row-gap: 14px;
  }

  .today-screen > .top {
    grid-area: top;
    margin: 0;
  }

  .today-top-main {
    gap: 18px;
  }

  .today-top-main .brand-wordmark {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }

  .today-top-main .day-navigation {
    margin-left: 0;
  }

  .day-navigation .date {
    max-width: 260px;
    font-size: 15px;
  }

  .top-actions {
    margin-left: auto;
  }

  .today-screen > .today-notices {
    grid-area: notices;
  }

  .today-screen > .hero {
    grid-area: hero;
    min-width: 0;
    min-height: 168px;
    padding: 20px;
    gap: 16px;
    border-radius: 24px;
    box-shadow: 0 12px 38px var(--shadow);
  }

  .today-screen .calorie-ring {
    width: 128px;
    height: 128px;
  }

  .today-screen .calorie-ring::after {
    inset: 12px;
  }

  .today-screen .remaining {
    font-size: 26px;
    margin-bottom: 12px;
  }

  .today-screen .macro-grid {
    gap: 10px;
  }

  .today-screen .macro span {
    font-size: 13px;
  }

  .today-screen .macro strong {
    font-size: 15px;
  }

  .today-screen > .meals-card {
    grid-area: meals;
    grid-column: 1 / -1;
    min-width: 0;
    padding: 18px 22px;
    border-radius: 24px;
  }

  .meals-card > .section-heading {
    margin-bottom: 8px;
  }

  .meals-card .section-heading h2 {
    font-size: 24px;
  }

  .meals-card .section-total {
    font-size: 19px;
  }

  .today-screen .meal-list {
    overflow: visible;
    background: transparent;
    border: 0;
    box-shadow: none;
  }

  .today-screen .meal-block {
    margin: 0 0 6px;
    padding: 7px 12px 6px;
    border: 1px solid var(--divider);
    border-radius: 13px;
    background: var(--surface-raised);
  }

  .today-screen .meal-block[open] {
    background: color-mix(in srgb, var(--surface-muted) 48%, var(--surface-raised));
  }

  .today-screen .meal-head {
    grid-template-columns: 24px minmax(0, 1fr) auto;
    gap: 8px;
    min-height: 38px;
  }

  .today-screen .meal-head h3 {
    margin-bottom: 1px;
    font-size: 15px;
  }

  .today-screen .meal-title .muted {
    font-size: 11px;
  }

  .today-screen .meal-calories {
    font-size: 14px;
    font-variant-numeric: tabular-nums;
  }

  .today-screen .meal-macros {
    display: inline-flex;
    color: var(--text-muted);
    font-size: 12px;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
  }

  .today-screen .meal-actions {
    gap: 9px;
  }

  .today-screen .meal-entries {
    padding-top: 3px;
  }

  .today-screen .entry {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    margin: 4px 0 0;
    padding: 5px 10px;
    border: 1px solid var(--divider);
    border-radius: 12px;
    background: var(--surface-raised);
  }

  .today-screen .entry > div:first-child {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(130px, auto);
    align-items: center;
    gap: 16px;
  }

  .today-screen .entry-name {
    overflow-wrap: anywhere;
  }

  .today-screen .entry small {
    text-align: right;
    white-space: nowrap;
  }

  .today-screen .entry-macros {
    margin-left: 6px;
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
  }

  .today-screen .entry-actions {
    max-width: none;
    flex-wrap: nowrap;
  }

  .today-screen .entry-actions .ghost {
    min-width: 34px;
    min-height: 34px;
    padding: 4px;
  }

  .today-screen .entry-action-icon {
    width: 16px;
    height: 16px;
  }

  .today-screen > .compact-grid {
    display: contents;
    min-width: 0;
  }

  .today-screen > .compact-grid > .water-card {
    grid-area: water;
  }

  .today-screen > .compact-grid > .weight-card {
    grid-area: weight;
  }

  .today-screen > .compact-grid > .card {
    height: auto;
    min-height: 160px;
    margin: 0;
    padding: 16px;
    border-radius: 20px;
    align-self: start;
  }

  .today-screen .compact-card-head {
    min-height: 0;
    padding-bottom: 0;
    align-items: center;
  }

  .today-screen .compact-card-head h2 {
    margin: 3px 0 0;
    font-size: 17px;
  }

  .today-screen .water-card .progress {
    margin-top: auto;
    padding-top: 12px;
  }

  .today-screen .weight-card .compact-card-head {
    align-items: flex-start;
  }

  .today-screen .weight-card .compact-card-head p {
    margin-top: 3px;
    font-size: 12px;
  }

  .today-screen .quick {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .profile-view {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 18px;
  }

  .profile-view > .top,
  .profile-view > .profile-card,
  .profile-view > .plan-section,
  .profile-view > .build-meta {
    grid-column: 1 / -1;
  }

  .profile-view > .card {
    margin: 0;
    padding: 24px;
    border-radius: 20px;
  }

  .profile-view .top {
    margin-bottom: 0;
  }

  .profile-view > .plan-section {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }

  .desktop-library-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    align-items: start;
  }

  .desktop-library-card {
    min-width: 0;
    min-height: min(680px, calc(100vh - 150px));
    margin: 0;
    padding: 28px;
  }

  .desktop-library-rail {
    display: grid;
    gap: 16px;
    align-content: start;
  }

  .desktop-library-rail > .card {
    min-height: 144px;
    margin: 0;
  }

  .desktop-library-screen .library-search-field {
    margin: 18px 0 10px;
    font-size: 14px;
  }

  .desktop-library-screen .library-search-field input {
    min-height: 52px;
    padding-inline: 16px;
    font-size: 16px;
  }

  .desktop-library-screen .library-product-result {
    min-height: 72px;
    padding: 16px 18px;
  }

  .profile-view > .plan-section > .section-heading {
    grid-column: 1 / -1;
  }

  dialog:not(.sheet) {
    width: min(calc(100vw - 96px), 640px);
    max-width: 640px;
  }
}

.library-my-meals-heading .library-create-action{width:auto;min-height:44px;margin:0;flex:0 0 auto;white-space:nowrap}
@media(max-width:420px){.library-my-meals-heading{gap:8px}.library-my-meals-heading h2{font-size:19px}.library-my-meals-heading .library-create-action{padding-inline:10px;font-size:13px}}
@media(min-width:1121px){
  .profile-view{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
  .profile-view>.top,.profile-view>.profile-card,.profile-view>.plus-entry-card,.profile-view>.plus-access-card,.profile-view>.push-card,.profile-view>.promo-consent-card,.profile-view>.device-data-actions,.profile-view>.build-meta{grid-column:1/-1}
  .profile-view>.plan-section{grid-column:1;align-self:start}
  .profile-view>.theme-settings{grid-column:2;align-self:start}
}
@media(max-width:1120px){.profile-view>.plan-section,.profile-view>.theme-settings{grid-column:1/-1}}

/* R24.6.1 FIX-05: keep diary labels inset on narrow phones only. */
@media (max-width: 560px) {
  .today-screen .entry > div:first-child {
    padding-inline: 8px;
  }
}

/* R24.6.1 FIX-08: keep the separate Push consent control legible in dark mode. */
html[data-theme="dark"] .promo-consent-card .consent-check {
  background: var(--surface-muted);
  border-color: var(--border);
}
html[data-theme="dark"] .promo-consent-card .consent-check span {
  color: var(--text-secondary);
}
html[data-theme="dark"] .promo-consent-card .consent-check strong {
  color: var(--text-primary);
}

@media (min-width: 1121px) and (max-width: 1320px) {
  .shell,
  .today-screen,
  .profile-view,
  .desktop-library-screen {
    margin-right: 24px !important;
    margin-left: 260px !important;
  }

  .today-screen {
    grid-template-columns: minmax(320px, 1.4fr) minmax(190px, .72fr) minmax(190px, .72fr);
    column-gap: 16px;
  }

  .desktop-library-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .today-screen > .hero {
    gap: 14px;
    padding: 18px;
  }

  .today-screen .calorie-ring {
    width: 118px;
    height: 118px;
  }

  .today-screen .macro-grid {
    gap: 9px;
  }
}

/* Desktop polish: align the dashboard row and give progress/library views room. */
.food-picker-library-menu {
  align-items: stretch;
  margin: 0 0 14px;
}
.food-picker-library-menu button {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 2px;
  color: var(--text-secondary);
  overflow-wrap: normal;
}
.food-picker-library-menu .food-picker-brand {
  white-space: nowrap;
}
.food-picker-library-menu button[aria-pressed="true"] {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-muted);
}
.food-catalog-count {
  margin: 2px 0 10px;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 600;
}
.food-favorite {
  color: var(--text-secondary);
}
.food-favorite.is-active,
.food-favorite[aria-pressed="true"] {
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 12%, var(--surface-raised));
}
.favorite-icon {
  color: currentColor;
}
.library-product-result {
  color: var(--text-primary);
}
.library-product-result strong {
  color: var(--text-primary);
}
.library-product-result .library-chevron {
  color: var(--accent);
}
.library-item-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.unfavorite-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 40px;
  padding: 8px 13px;
  border: 1px solid var(--divider);
  border-radius: 999px;
  background: var(--surface-muted);
  color: var(--text-secondary);
  white-space: nowrap;
}
.unfavorite-button .icon-image {
  width: 17px;
  height: 17px;
  color: var(--danger);
}
.macro-bar {
  background: var(--surface-muted);
}
.calorie-ring {
  background: conic-gradient(var(--color-primary) var(--progress), var(--divider) 0);
}
@media (min-width: 1121px) {
  .profile-view {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
  }

  .profile-view > .profile-card,
  .profile-view > .plus-entry-card,
  .profile-view > .plus-access-card,
  .profile-view > .theme-settings {
    grid-column: auto;
    align-self: stretch;
    min-height: 0;
    min-width: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
  }

  .profile-view > .profile-card > *,
  .profile-view > .plus-entry-card > *,
  .profile-view > .plus-access-card > *,
  .profile-view > .theme-settings > * {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .profile-view .profile-library-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .profile-view .profile-library-actions > button {
    flex: 1 1 112px;
    min-width: 0;
    white-space: normal;
  }

  .profile-view > .theme-settings .theme-options {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }

  .profile-view > .theme-settings .theme-options label {
    justify-content: flex-start;
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .profile-view:not(:has(> .plus-entry-card, > .plus-access-card)) > .profile-card {
    grid-column: span 2;
  }

  .profile-view > .plan-section,
  .profile-view > .device-data-actions,
  .profile-view > .build-meta {
    grid-column: 1 / -1;
  }

  .profile-view > .push-card,
  .profile-view > .promo-consent-card {
    grid-column: span 2;
  }

  .profile-view > .theme-settings .theme-options,
  .profile-view > .plus-entry-card .plus-entry-link {
    margin-top: auto;
  }

  .today-screen {
    grid-template-columns: minmax(320px, 1.4fr) minmax(190px, .72fr) minmax(190px, .72fr);
    grid-template-areas:
      "top top top"
      "notices notices notices"
      "hero water weight"
      "meals meals meals";
    align-items: stretch;
  }
  .today-screen > .hero {
    margin: 0;
    align-self: stretch;
  }
  .today-screen > .compact-grid > .card {
    height: 100%;
    margin: 0;
    align-self: stretch;
    box-sizing: border-box;
  }
  .today-screen .entry small.entry-nutrition {
    text-align: left;
    white-space: normal;
  }
  .today-screen .entry-macros {
    display: inline-flex;
    margin-left: 6px;
    gap: 3px;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
  }
  .today-screen .entry > div:first-child {
    grid-template-columns: minmax(0, 1fr) minmax(250px, auto);
  }

  .shell:has(> .progress-hero) {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-items: start;
    gap: 18px;
  }
  .shell:has(> .progress-hero) > .top {
    grid-column: 1 / -1;
  }
  .shell:has(> .progress-hero) > .progress-hero {
    grid-column: span 4;
    margin: 0;
    min-height: 0;
    padding: 22px;
  }
  .shell:has(> .progress-hero) > .progress-hero + .progress-trend {
    grid-column: span 8;
    grid-row: auto;
    margin: 0;
    padding: 22px;
  }
  .shell:has(> .progress-hero) > .metric-grid {
    grid-column: 1 / -1;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    margin: 0;
    padding: 18px 22px;
  }
  .shell:has(> .progress-hero) > .bmi-card {
    grid-column: span 6;
    margin: 0;
    padding: 20px 22px;
  }
  .shell:has(> .progress-hero) > .coverage-card {
    grid-column: 1 / -1;
    margin: 0;
    padding: 20px 22px;
  }
  .shell:has(> .progress-hero) > .inactive-block {
    display: none;
  }
  .bmi-card {
    display: grid;
    align-content: center;
    gap: 8px;
  }
  .bmi-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }
  .bmi-heading h2 {
    margin: 4px 0 0;
  }
  .bmi-value {
    color: var(--accent);
    font-size: 30px;
    font-variant-numeric: tabular-nums;
  }
  .bmi-change {
    margin: 0;
    color: var(--accent);
    font-weight: 700;
  }
}

@media (min-width: 1321px) {
  .profile-view > .theme-settings .theme-options {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }

  .profile-view > .theme-settings .theme-options label {
    justify-content: center;
    padding-inline: 5px;
    font-size: 12px;
  }
}
.food-catalog-count {
  margin: 0;
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 650;
  text-align: left;
}
.food-favorite {
  color: var(--text-secondary) !important;
}
.food-favorite.is-active,
.food-favorite[aria-pressed="true"] {
  color: var(--danger) !important;
  background: transparent !important;
}

/* R24.5.6 feedback: fixed date controls, readable recipe nutrition, and calm water emphasis. */
.day-navigation{display:grid;grid-template-columns:44px minmax(112px,auto) 44px;align-items:center;gap:2px;flex:0 0 auto;margin-left:auto}
.day-navigation .date{justify-content:center;max-width:none;min-width:112px;overflow:visible;text-overflow:clip;white-space:nowrap}
.day-navigation .day-arrow{width:44px;flex:0 0 44px}
.date-button{min-height:44px;padding:0 4px;border-radius:12px;color:var(--text-secondary);font-size:14px;font-weight:700}
.date-button:hover{background:var(--surface-muted)}
.calendar-dialog{width:min(calc(100vw - 24px),380px)!important;max-width:380px!important;padding:0;border:1px solid var(--divider);border-radius:22px;background:var(--surface-raised);color:var(--text-primary);box-shadow:0 22px 70px var(--shadow)}
.calendar-dialog-backdrop{position:fixed;inset:0;z-index:1000;background:var(--overlay)}
.calendar-dialog.calendar-dialog-fallback[open]{position:fixed;z-index:1001;top:50%;left:50%;right:auto;bottom:auto;transform:translate(-50%,-50%);margin:0;max-height:calc(100dvh - 24px);overflow:auto}
.calendar-modal{padding:18px}
.calendar-heading,.calendar-month-nav{display:flex;align-items:center;justify-content:space-between;gap:10px}
.calendar-heading h2,.calendar-month-label{margin:0;color:var(--text-primary)}
.calendar-heading h2{font-size:18px}
.calendar-month-nav{margin:14px 0 10px}
.calendar-month-label{font-size:16px;text-align:center;text-transform:none}
.calendar-month-button{display:grid;place-items:center;width:44px;height:44px;min-width:44px;padding:0;border:1px solid var(--divider);border-radius:12px;background:var(--surface-raised);color:var(--text-primary)}
.calendar-month-button:disabled{opacity:.35}
.calendar-weekdays,.calendar-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;text-align:center}
.calendar-weekdays{margin-bottom:4px;color:var(--text-secondary);font-size:12px;font-weight:650}
.calendar-weekdays span{display:grid;place-items:center;min-height:32px}
.calendar-day{display:grid;place-items:center;min-width:0;min-height:42px;padding:0;border:1px solid transparent;border-radius:12px;background:transparent;color:var(--text-primary);font-size:14px;font-variant-numeric:tabular-nums}
.calendar-day:hover:not(:disabled){background:var(--surface-muted)}
.calendar-day.is-selected{background:var(--accent);color:var(--on-accent);font-weight:750}
.calendar-day.is-today:not(.is-selected){border-color:var(--accent);color:var(--accent);font-weight:750}
.calendar-day:disabled{color:var(--text-secondary);opacity:.38}
.calendar-day-empty{min-height:42px}
.calendar-dialog :focus-visible{outline:3px solid color-mix(in srgb,var(--accent) 50%,transparent);outline-offset:2px}
.recipe-nutrition-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:8px;margin:12px 0}
.recipe-nutrition-grid>.recipe-nutrition-block{box-sizing:border-box;display:grid;grid-template-rows:auto auto auto;align-content:start;gap:5px;width:100%;height:auto;min-width:0;min-height:0;margin:0;padding:10px 12px;border:1px solid var(--divider);border-radius:18px;background:var(--surface-raised)}
.recipe-nutrition-grid>.recipe-nutrition-block+.recipe-nutrition-block{margin:0;border-color:color-mix(in srgb,var(--accent) 34%,var(--divider));background:color-mix(in srgb,var(--accent-muted) 52%,var(--surface-raised))}
.recipe-nutrition-grid .recipe-nutrition-label{font-size:14px;line-height:1.25}
.recipe-nutrition-grid .recipe-nutrition-kcal{font-size:22px;line-height:1.2;white-space:nowrap}
.recipe-nutrition-grid .recipe-nutrition-macros{display:flex;align-items:flex-end;gap:6px 12px;font-size:12px;line-height:1.35}
.recipe-description{white-space:pre-line;line-height:1.6}
.recipe-ingredient-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:3px 12px;padding:9px 0!important;border-bottom:1px solid var(--divider)}
.recipe-ingredient-name{min-width:0;overflow-wrap:anywhere}
.recipe-ingredient-row>strong{white-space:nowrap}
.recipe-ingredient-macros{grid-column:1/-1;color:var(--text-secondary);font-size:12px;line-height:1.35;font-variant-numeric:tabular-nums}
.recipe-composition-status{grid-column:1/-1;color:var(--text-secondary);font-size:12px;line-height:1.35}
.water-card{background:color-mix(in srgb,var(--data-water) 9%,var(--surface-raised))!important;border-color:color-mix(in srgb,var(--data-water) 27%,var(--divider))!important}
.water-card .compact-card-head>.icon,.water-card .eyebrow,.water-card .compact-card-head h2{color:color-mix(in srgb,var(--data-water) 82%,var(--text-primary))}
.water-card .progress{background:color-mix(in srgb,var(--data-water) 17%,var(--surface-muted))}
.water-card .progress>i{background:var(--data-water)}
.profile-view>.top{position:sticky;top:0;z-index:40;align-self:start;grid-column:1/-1;min-height:70px;margin:0 0 18px;padding:10px 0 12px;background:color-mix(in srgb,var(--nav-bg) 92%,transparent);backdrop-filter:blur(16px)}
.profile-name{margin:5px 0 0;color:var(--accent);font-size:24px;overflow-wrap:anywhere}
.profile-email{margin:2px 0 8px;color:var(--text-secondary);font-size:16px;font-weight:550;overflow-wrap:anywhere}
.profile-name-edit{min-height:36px;padding:4px 0!important;font-size:13px}
#profile-name-dialog{padding:0;border:1px solid var(--divider);border-radius:20px;box-shadow:0 20px 70px var(--shadow)}
#profile-name-dialog .modal{padding:22px;border-radius:20px}
#profile-name-dialog .row{display:flex;align-items:center;justify-content:space-between;gap:12px}
#profile-name-dialog h2{margin:0;font-size:20px}
@media(min-width:900px){.today-screen>.top{position:sticky;top:0;z-index:40}.today-top-main .day-navigation{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);grid-template-columns:44px 200px 44px;margin:0}.today-top-main .day-navigation .date{min-width:200px}.today-top-main .brand-wordmark{clip:rect(0,0,0,0)}}
@media(max-width:560px){.day-navigation{grid-template-columns:36px minmax(96px,auto) 36px;gap:0}.day-navigation .day-arrow{width:36px;flex-basis:36px}.day-navigation .date{min-width:96px;font-size:13px}.date-button{padding-inline:2px}.calendar-dialog{width:min(calc(100vw - 20px),380px)!important}.calendar-modal{padding:14px}.calendar-grid,.calendar-weekdays{gap:2px}.calendar-day{min-height:40px;border-radius:10px}.calendar-day-empty{min-height:40px}.recipe-nutrition-grid{gap:8px}.recipe-nutrition-grid>.recipe-nutrition-block{min-height:0;padding:9px 10px}.recipe-nutrition-grid .recipe-nutrition-kcal{font-size:19px}.recipe-nutrition-grid .recipe-nutrition-macros{gap:5px 8px;font-size:11px}.profile-view>.top{margin-bottom:12px}}
@media(max-width:360px){.day-navigation{grid-template-columns:32px minmax(86px,auto) 32px}.day-navigation .day-arrow{width:32px;flex-basis:32px}.day-navigation .date{min-width:86px;font-size:12px}.recipe-nutrition-grid{grid-template-columns:1fr}.recipe-nutrition-grid>.recipe-nutrition-block{min-height:0}}
.personal-food-create{margin-top:22px;border-top:1px solid var(--line);padding-top:14px}.personal-food-create>summary{cursor:pointer;color:var(--accent);font-weight:700}.personal-food-create>.muted{line-height:1.55}.personal-food-create .form{margin-top:12px}.personal-food-macros{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;border:1px solid var(--line);border-radius:14px;padding:12px}.personal-food-macros legend{padding:0 5px;color:var(--muted);font-size:13px}.personal-food-macros label{display:grid;gap:5px;color:var(--muted);font-size:13px}

.food-brand{display:block;color:var(--muted);font-size:12px}.consent-check{display:grid;grid-template-columns:20px minmax(0,1fr);align-items:start;gap:10px;margin:14px 0;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--surface-subtle,#f7faf8);line-height:1.5}.consent-check input{width:18px;height:18px;margin:2px 0 0;accent-color:var(--accent)}.consent-check span{color:var(--text-secondary,#526159);font-size:13px}
.personal-data-info{display:grid;gap:6px;margin:14px 0;padding:12px 14px;border:1px solid var(--border);border-radius:12px;background:var(--surface-muted);color:var(--text-primary);font-size:13px;line-height:1.5}.personal-data-info strong{color:var(--text-primary)}.personal-data-info nav{display:flex;flex-wrap:wrap;gap:8px}.personal-data-info a{color:var(--accent);font-weight:650;text-decoration:underline;text-underline-offset:2px}
.metric-sample{grid-column:2;color:var(--text-secondary);font-size:11px;line-height:1.25}
@media(min-width:1121px){
  .shell,.today-screen,.profile-view,.desktop-library-screen{width:min(calc(100% - 284px),1480px)!important;margin-inline:260px 24px!important;box-sizing:border-box;}
  .today-screen{grid-template-columns:minmax(0,1.4fr) minmax(280px,.85fr);grid-template-areas:"top top" "notices notices" "hero quick" "meals quick";}
  .today-screen>.hero{grid-area:hero;min-width:0;}
  .today-screen>.meals-card{grid-area:meals;min-width:0;}
  .today-screen>.compact-grid{grid-area:quick;grid-template-columns:minmax(0,1fr);min-width:0;}
  .shell:has(> .progress-hero){grid-template-columns:repeat(12,minmax(0,1fr));}
  .shell:has(> .progress-hero)>.progress-hero{grid-column:span 5;min-width:0;}
  .shell:has(> .progress-hero)>.progress-hero+.progress-trend{grid-column:span 7;min-width:0;}
  .shell:has(> .progress-hero)>.metric-grid{grid-column:1/-1;grid-template-columns:repeat(5,minmax(0,1fr));min-width:0;}
  .shell:has(> .progress-hero)>.metric-grid>*{min-width:0;overflow-wrap:anywhere;}
  .shell:has(> .progress-hero)>.bmi-card,.shell:has(> .progress-hero)>.coverage-card{grid-column:span 6;min-width:0;}
  .shell:has(> .progress-hero)>.navigator-period{grid-column:1/-1;min-width:0;}
  .shell:has(> .progress-hero) .navigator-period-controls,.shell:has(> .progress-hero) .navigator-period-tabs{min-width:0;}
  .today-screen .hero-side,.today-screen .macro-grid,.today-screen .macro{min-width:0;}
  .today-screen .macro-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
  .today-screen .macro strong{overflow-wrap:anywhere;}
}
.plus-entry-card,.plus-access-card{border-color:color-mix(in srgb,var(--accent) 28%,var(--divider));}
.plus-access-card h2{margin:5px 0 10px;}
.plus-access-card p{margin:5px 0;}

/* Desktop layout correction: keep nested Today cards in the declared grid and
   give Progress semantic columns instead of twelve narrow tracks beside rail. */
@media (min-width: 1121px) {
  .today-screen > .compact-grid {
    display: grid;
    grid-area: quick;
    grid-template-columns: minmax(0, 1fr);
    grid-auto-flow: row;
    align-content: start;
    min-width: 0;
  }
  .today-screen > .compact-grid > .water-card,
  .today-screen > .compact-grid > .weight-card {
    grid-area: auto;
    min-width: 0;
  }
  .shell:has(> .progress-hero) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "top top"
      "hero trend"
      "coverage trend"
      "metrics metrics"
      "navigator navigator";
    grid-auto-flow: row;
    align-items: stretch;
  }
  .shell:has(> .progress-hero) > .top { grid-area: top; }
  .shell:has(> .progress-hero) > .progress-hero { grid-area: hero; }
  .shell:has(> .progress-hero) > .coverage-card {
    grid-area: coverage;
    min-width: 0;
    margin: 0;
    align-self: stretch;
    display: grid;
    align-content: center;
    gap: 6px;
  }
  .coverage-card p { margin: 0; color: var(--color-text-muted); }
  .coverage-count { font-size: 28px; line-height: 1.15; font-variant-numeric: tabular-nums; }
  .shell:has(> .progress-hero) > .progress-hero + .progress-trend { grid-area: trend; }
  .shell:has(> .progress-hero) > .metric-grid,
  .shell:has(> .progress-hero) > .locked-metrics {
    grid-area: metrics;
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .shell:has(> .progress-hero) > .navigator-period { grid-area: navigator; }
  .shell:has(> .progress-hero) > * { min-width: 0; }
}

/* R24.6.6: recipe detail actions stack on compact screens and use the approved
   70/30 primary-to-secondary split once the desktop layout begins at 1120px. */
.recipe-detail-actions{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;margin-top:12px;min-width:0}
.recipe-primary-action,.recipe-secondary-actions{min-width:0}
.recipe-primary-action .recipe-add-form{margin:0}
.recipe-secondary-actions>.library-management{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0;padding:0;border:0}
.recipe-secondary-actions>.library-management button:last-child{grid-column:1/-1}
.recipe-detail-actions.is-archived .recipe-secondary-actions>.library-management{grid-template-columns:minmax(0,1fr)}
.recipe-detail-actions.is-archived .recipe-secondary-actions>.library-management button:last-child{grid-column:auto}
@media(min-width:1120px){
  .recipe-detail-actions:not(.is-archived){grid-template-columns:minmax(0,7fr) minmax(0,3fr);align-items:start;gap:18px}
  .recipe-secondary-actions>.library-management{grid-template-columns:minmax(0,1fr)}
  .recipe-secondary-actions>.library-management button:last-child{grid-column:auto}
}

/* Adult BMI band is explicitly age-gated; minors and unknown age stay neutral. */
.metric-bmi{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto;align-content:center;gap:3px}
.metric-bmi strong{color:var(--color-text)}
.metric-bmi .bmi-status{font-size:11px;line-height:1.25;color:var(--color-text-muted)}
.metric-bmi.bmi-band-very-low strong,.metric-bmi.bmi-band-high strong{color:var(--color-danger)}
.metric-bmi.bmi-band-low strong,.metric-bmi.bmi-band-elevated strong{color:var(--color-fat)}
.metric-bmi.bmi-band-normal strong{color:var(--color-primary-strong)}
.library-section-search{margin:10px 0}
.library-create-action{display:block;width:100%;margin-top:12px}

/* R24.7 post-deploy UX fixes: predictable card rhythm and compact profile layout. */
.navigator-history-note{display:grid;gap:5px;margin:0;padding:12px 16px;border:1px solid var(--color-border);border-radius:16px;background:var(--color-surface);color:var(--color-text-muted)}
.navigator-history-note .eyebrow{color:var(--color-text-muted)}
.navigator-history-note p{margin:0;font-size:13px;line-height:1.4}
.today-screen,.profile-view,.shell:has(> .progress-hero),.desktop-library-screen{row-gap:16px}
.today-screen>.card,.profile-view>.card,.shell:has(> .progress-hero)>.card,.desktop-library-screen>.card{margin-block:0}
.profile-view{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
.profile-view>.top,.profile-view>.build-meta,.profile-view>.profile-plan-theme{grid-column:1/-1}
.profile-plan-theme{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start;min-width:0}
.profile-plan-theme>.card{min-width:0;margin:0;align-self:start}
.progress-bmi-change{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:4px 12px;margin-top:12px;padding:12px 14px;border:1px solid var(--color-border);border-radius:14px;background:var(--color-surface)}
.progress-bmi-change>span{color:var(--color-text-muted);font-size:13px}
.progress-bmi-change>strong{font-variant-numeric:tabular-nums}
.progress-bmi-change>small{grid-column:1/-1;color:var(--color-text-muted);font-size:11px;line-height:1.4}
.progress-screen .progress-trend,.progress-screen .progress-hero,.progress-screen .coverage-card,.progress-screen .metric-grid,.progress-screen .locked-metrics,.progress-screen .navigator-period{align-self:start;min-width:0}
@media(max-width:1120px){.profile-view{grid-template-columns:minmax(0,1fr)}.profile-plan-theme{grid-template-columns:minmax(0,1fr)}}
@media(min-width:1121px){
  .profile-view{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
  .profile-view>.profile-card{grid-column:1;align-self:start}
  .profile-view>.plus-entry-card,.profile-view>.plus-access-card{grid-column:2;align-self:start}
  .profile-view:not(:has(>.plus-entry-card,>.plus-access-card))>.profile-card{grid-column:1/-1}
  .profile-view>.push-card,.profile-view>.promo-consent-card,.profile-view>.device-data-actions{grid-column:auto;align-self:start;min-width:0}
  .profile-plan-theme{grid-template-columns:repeat(2,minmax(0,1fr))}
  .shell:has(> .progress-hero){grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"top top" "hero coverage" "trend trend" "metrics metrics" "navigator navigator";grid-auto-flow:row;align-items:start;row-gap:16px}
  .shell:has(> .progress-hero)>.top{grid-area:top}
  .shell:has(> .progress-hero)>.progress-hero{grid-area:hero}
  .shell:has(> .progress-hero)>.coverage-card{grid-area:coverage;align-self:start;display:grid;align-content:center;gap:6px}
  .shell:has(> .progress-hero)>.progress-hero+.progress-trend{grid-area:trend}
  .shell:has(> .progress-hero)>.metric-grid,.shell:has(> .progress-hero)>.locked-metrics{grid-area:metrics;grid-template-columns:repeat(5,minmax(0,1fr))}
  .shell:has(> .progress-hero)>.navigator-period{grid-area:navigator}
  .shell:has(> .progress-hero)>*{min-width:0}
}
@media(max-width:560px){.today-screen,.profile-view,.shell:has(> .progress-hero),.desktop-library-screen{row-gap:12px}.profile-plan-theme{gap:12px}}
/* Owner-issued Plus is activated only by the account holder's own verified-email OTP. */
.manual-plus-pending{margin:12px auto;max-width:760px;padding:18px}.manual-plus-pending h2{margin:0 0 8px;color:var(--color-text)}.manual-plus-pending>p{line-height:1.5}.manual-plus-pending-item{margin-top:12px;padding:14px;border:1px solid var(--border,#dfe8e2);border-radius:14px;background:var(--surface,#fff)}.manual-plus-pending-item p{margin:4px 0 8px}.manual-plus-pending-item small{display:block;margin-top:7px}.manual-plus-confirm-form{display:flex;align-items:end;gap:10px;flex-wrap:wrap;margin:12px 0 8px}.manual-plus-confirm-form label{display:grid;gap:6px;min-width:min(220px,100%);font-weight:650}.manual-plus-confirm-form input{min-height:44px;width:180px;max-width:100%;padding:10px 12px;border:1px solid var(--border,#dfe8e2);border-radius:10px;font:inherit;letter-spacing:.16em}.manual-plus-confirm-form button,.manual-plus-resend{min-height:44px}.manual-plus-message{padding:10px 12px;border-radius:10px;background:var(--primary-soft,#eaf5ed);color:var(--primary-strong,#176b3b)}
/* Progress weight chart: time-proportional dates, quiet axes, and an honest single-measurement state. */
.progress-trend{min-width:0}.progress-trend .trend-chart{height:auto;min-height:0;padding:12px 10px 10px;overflow:hidden;background:var(--surface-muted);border:1px solid var(--divider);border-radius:16px}
.progress-trend .trend-chart svg{display:block;width:min(100%,576px);height:auto;aspect-ratio:12/5;margin-inline:auto;overflow:visible}
.progress-trend .trend-chart svg .trend-line{fill:none;stroke:var(--accent);stroke-width:2.25;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.progress-trend .trend-chart svg .trend-point{fill:var(--accent);stroke:var(--surface-raised);stroke-width:2;vector-effect:non-scaling-stroke}
.progress-trend .trend-chart svg .trend-gridline{fill:none;stroke:var(--divider);stroke-width:.8;vector-effect:non-scaling-stroke}
.progress-trend .trend-chart svg .trend-axis-label{fill:var(--text-muted);font-size:10px;font-family:inherit}
.progress-trend .trend-labels{position:relative;width:min(100%,576px);height:20px;margin:1px auto 0;padding:0;color:var(--text-muted);font-size:11px;font-variant-numeric:tabular-nums}
.progress-trend .trend-labels small{position:absolute;top:0;max-width:34%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.progress-trend .trend-labels small.is-first{transform:none;text-align:left}.progress-trend .trend-labels small.is-middle{transform:translateX(-50%);text-align:center}.progress-trend .trend-labels small.is-last{transform:translateX(-100%);text-align:right}
.progress-trend .trend-chart-note{margin:4px 2px 0;color:var(--text-muted);font-size:12px;line-height:1.4;text-align:center}
.progress-trend .trend-empty{padding:20px 12px;text-align:center}
@media (min-width: 1121px) {
  .shell:has(> .progress-hero) > .progress-trend {
    align-self: stretch;
    min-height: 100%;
    box-sizing: border-box;
  }
}
.nav-library-link .library-icon-raster{width:19px;height:19px;flex:0 0 19px;object-fit:contain}
.library-tabs .library-icon-raster{width:18px;height:18px;flex:0 0 18px;object-fit:contain}
.food-picker-library-menu .library-icon-raster{width:20px;height:20px;vertical-align:middle;object-fit:contain}
.system-recipe-search{margin:14px 0 8px}.system-recipe-search input{min-height:46px}.system-recipe-more{display:block;width:100%;min-height:44px;margin:12px 0 4px}.system-recipe-search+ .muted{min-height:18px}
.food-search[hidden],.food-search-status[hidden],.food-list[hidden]{display:none!important}

/* R24.6 approved single-leaf wordmark, theme-aware in the existing header slot. */
.brand-wordmark{aspect-ratio:560/162;background-image:url('/brand-wordmark-r24-6-light.png');background-position:left center;background-repeat:no-repeat;background-size:contain}
html[data-theme="dark"] .brand-wordmark{background-image:url('/brand-wordmark-r24-6-dark.png')}

/* R24.6 desktop12.6: keep Progress controls distinct and readable on phones. */
.progress-period-help,.navigator-period-help{margin:0;color:var(--color-text-muted);font-size:13px}
.navigator-period-help{font-size:14px}
.navigator-comparison dl{grid-template-columns:minmax(0,1fr)}
.navigator-comparison dl>div{display:grid;grid-template-columns:minmax(100px,.4fr) minmax(0,1.6fr);align-items:start;padding:9px 0;border-top:1px solid var(--color-border)}
.navigator-comparison dd{min-width:0;overflow-wrap:anywhere}
.navigator-comparison dd small{display:block;margin-top:3px;color:var(--color-text-muted);font-weight:400}
.navigator-delta{font-weight:500;color:var(--color-text-muted)}
.navigator-weight-points{display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));overflow:visible}
@media(max-width:560px){
  .navigator-comparison dl>div{grid-template-columns:minmax(0,1fr);gap:3px}
  .navigator-period-tabs{flex-wrap:wrap;overflow:visible}
  .navigator-period-tabs button{flex:1 1 auto}
}

/* R24.6.1 FIX-03/04: use the compact flow at medium widths and pair Today
   summaries with their matching Water/Weight cards on wide desktop. */
@media (min-width: 900px) and (max-width: 1120px) {
  .today-screen {
    display: block;
    grid-template-columns: none;
    grid-template-areas: none;
    column-gap: normal;
    row-gap: normal;
    align-content: normal;
  }
  .today-screen > .compact-grid {
    display: grid;
    grid-area: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-width: 0;
  }
  .today-screen > .compact-grid > .card { min-height: 0; }
}

@media (min-width: 1121px) {
  .today-screen {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(280px, .85fr);
    grid-template-areas:
      "top top"
      "notices notices"
      "hero water"
      "navigator weight"
      "meals meals";
    align-items: stretch;
    align-content: start;
    column-gap: 24px;
    row-gap: 12px;
  }
  .today-screen > .top { grid-area: top; }
  .today-screen > .today-notices { grid-area: notices; }
  .today-screen > .hero { grid-area: hero; }
  .today-screen > .navigator-card { grid-area: navigator; margin: 0; }
  .today-screen > .meals-card { grid-area: meals; }
  .today-screen > .compact-grid { display: contents; }
  .today-screen > .compact-grid > .water-card {
    grid-area: water;
    min-width: 0;
    height: 100%;
    margin: 0;
    align-self: stretch;
    box-sizing: border-box;
  }
  .today-screen > .compact-grid > .weight-card {
    grid-area: weight;
    min-width: 0;
    height: 100%;
    margin: 0;
    align-self: stretch;
    box-sizing: border-box;
  }
}

/* R24.7 FIX-03: keep outer card spacing even across the main screens. */
@media (min-width: 1121px) {
  .today-screen,
  .profile-view,
  .shell:has(> .progress-hero),
  .desktop-library-screen {
    gap: 16px;
  }
  .today-screen > .compact-grid,
  .profile-plan-theme {
    gap: 16px;
  }
}
@media (min-width: 561px) and (max-width: 1120px) {
  .today-screen,
  .profile-view,
  .shell:has(> .progress-hero),
  .desktop-library-screen {
    gap: 16px;
  }
  .today-screen > .compact-grid,
  .profile-plan-theme {
    gap: 16px;
  }
}
@media (min-width: 900px) and (max-width: 1120px) {
  /* Today uses block flow at this width, so reproduce the same outer rhythm. */
  .today-screen > :is(.today-notices,.hero,.navigator-card,.navigator-history-note,.compact-grid,.meals-card) {
    margin-block-start: 16px;
  }
}
@media (max-width: 560px) {
  .today-screen,
  .profile-view,
  .shell:has(> .progress-hero),
  .desktop-library-screen {
    gap: 12px;
  }
  .today-screen > .compact-grid,
  .profile-plan-theme {
    gap: 12px;
  }
}

/* R24.7 compact mobile controls: keep labels and library actions inside the viewport. */
.navigator-compare-toggle{display:grid;grid-template-columns:18px minmax(0,1fr);align-items:start;column-gap:8px;min-width:0;line-height:1.4}
.navigator-compare-toggle input{width:18px;min-width:18px;min-height:18px;margin:1px 0 0}
.navigator-compare-toggle span{min-width:0;overflow-wrap:anywhere}
.library-my-meals-heading{align-items:center;flex-wrap:nowrap;min-width:0;gap:8px}
.library-my-meals-heading>div{min-width:0}
.library-my-meals-heading h2{overflow-wrap:anywhere}
.library-my-meals-heading .library-create-action{width:auto;min-width:0;min-height:44px;margin:0;flex:0 0 auto;white-space:nowrap}
@media(max-width:420px){.library-my-meals-heading{gap:6px}.library-my-meals-heading h2{font-size:18px}.library-my-meals-heading .library-create-action{padding-inline:8px;font-size:12px}}