/* Layout & components. Colors, fonts and sizes come from theme.css ("Eucalyptus & Wheat"). Sizes in rem so text scales to 200%. */
* { box-sizing:border-box; }
html { font-size:100%; -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body { margin:0; font-family:var(--font-body); font-size:var(--fs-body); line-height:var(--lh-body); font-weight:400; color:var(--text); background:var(--bg); -webkit-font-smoothing:antialiased; overflow-wrap:break-word; }
h1, h2, h3, .brand { font-family:var(--font-head); font-weight:800; color:var(--green); letter-spacing:-.01em; }
a { color:var(--green); font-weight:600; text-underline-offset:.15em; }
:focus-visible { outline:3px solid var(--focus); outline-offset:2px; border-radius:.5rem; }
b, strong { font-weight:700; }

/* ---------- header, tabs, notices ---------- */
.topbar { display:flex; justify-content:space-between; align-items:center; gap:var(--gap); flex-wrap:wrap; padding:.75rem 1rem .5rem; background:var(--bg); }
.brand-wrap { display:flex; align-items:center; gap:.75rem; min-width:0; }
.av { width:3rem; height:3rem; border-radius:50%; background:var(--green); color:#fff; display:grid; place-items:center; font-family:var(--font-head); font-weight:800; font-size:1.125rem; border:3px solid var(--gold); flex:none; }
.brand { font-size:var(--fs-h1); line-height:1.15; margin:0; }
.brand span { color:var(--gold-ink); }
.brand a { color:inherit; text-decoration:none; font-weight:inherit; display:inline-flex; align-items:center; min-height:var(--tap); }
.brand-text { display:flex; flex-direction:column; align-items:flex-start; gap:.25rem; min-width:0; }
.brand-logo { line-height:0; }
.brand-logo img { display:block; height:3.25rem; width:auto; max-width:100%; }
@media (min-width:48em){ .brand-logo img { height:4rem; } }
.badge { font-size:var(--fs-secondary); font-weight:700; padding:.25rem .75rem; border-radius:var(--radius-pill); background:var(--tint); color:var(--green); border:1.5px solid var(--green); white-space:nowrap; }
.badge.demo { background:var(--gold-tint); color:var(--gold-ink); border-color:var(--gold-ink); }
.badge.live { background:var(--tint); color:var(--green); }
.badge.live::before { content:"● "; }
/* Top tab bar: Me / Meals / Groceries / My day / MiMi. Five equal tabs (emoji over a short label) fit a 390px phone;
   with big text settings the bar scrolls sideways instead of wrapping (scrollbar hidden). */
.tabs { position:sticky; top:0; z-index:6; display:flex; overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:none; -webkit-overflow-scrolling:touch;
  background:var(--surface); border-bottom:1px solid var(--line); box-shadow:0 2px 6px #0000000a; padding:0 env(safe-area-inset-right, 0px) 0 env(safe-area-inset-left, 0px); }
.tabs::-webkit-scrollbar { display:none; }
.tabs [role="tab"] { flex:1 0 auto; min-width:4.25rem; min-height:3.5rem; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.125rem;
  border:0; border-radius:0; padding:.375rem .25rem .25rem; font-size:.875rem; line-height:1.15; font-weight:600; color:var(--muted); background:none; border-bottom:4px solid transparent; white-space:nowrap; }
.tabs [role="tab"]:active { background:var(--tint); }
.tabs [role="tab"].active { color:var(--green); font-weight:800; border-bottom-color:var(--green); background:var(--tint); }
.tabs [role="tab"]:focus-visible { outline:3px solid var(--focus); outline-offset:-3px; border-radius:.5rem; }
.tab-ico { position:relative; font-size:1.375rem; line-height:1; font-family:"Noto Color Emoji","Apple Color Emoji","Segoe UI Emoji",sans-serif; }
.tabs [role="tab"]:not(.active) .tab-ico { filter:saturate(.75); }
.tab-ico .dot { position:absolute; top:-.125rem; right:-.5rem; margin:0; }
@media (min-width:48em){ .tabs [role="tab"] { flex-direction:row; gap:.375rem; font-size:var(--fs-body); } .tab-ico { font-size:1.25rem; } }
.dot { display:inline-block; width:.625rem; height:.625rem; border-radius:50%; background:var(--gold); border:2px solid var(--gold-ink); vertical-align:middle; margin-left:.25rem; }
html { scroll-padding-top:4.5rem; }
.next-row { display:flex; justify-content:flex-end; margin:.25rem 0 1rem; }
.next-btn { min-height:var(--tap); padding:.5rem 1.125rem; border-radius:var(--radius-pill); background:var(--surface); font-weight:700; }
.empty-note h2 { margin-bottom:.5rem; }
.empty-note button.primary { width:100%; margin-top:.5rem; }
/* tagline: a line in the new-user welcome card (Me) */
.tagline { margin:.5rem 0 0; font-weight:700; color:var(--green); font-size:var(--fs-secondary); }
/* "Not medical advice": a quiet, readable note at the bottom of every tab (not MiMi's chat, which has its own) */
.disclaimer { margin:1.25rem .25rem .5rem; padding:.75rem 0 0; border-top:1px solid var(--line); color:var(--muted); font-size:var(--fs-secondary); line-height:1.45; }
.disclaimer strong { color:var(--text); }
/* demo: one compact line on Groceries, only with the Kroger flow (that's where sample stores and prices show) */
.demo-banner { margin:0 0 .75rem; padding:.375rem .75rem; border-radius:.625rem; background:var(--gold-tint); border:1px dashed var(--gold-ink); font-size:var(--fs-secondary); line-height:1.35; }
#panel-groceries:not([data-shop="kroger"]) #demoBanner { display:none; }
/* reminders: one slim line under the tabs, with an action and a dismiss */
.nudge { margin:.5rem .75rem 0; padding:.25rem .25rem .25rem .875rem; border-radius:var(--radius-pill); background:var(--gold-tint); border:1px solid var(--gold); display:flex; align-items:center; gap:.375rem; font-size:var(--fs-secondary); font-weight:600; }
.nudge .nudge-text { flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.nudge .nudge-text::before { content:"🔔 "; }
.next-step { background:var(--tint); border-color:var(--green); }
.nudge.next-step .nudge-text::before { content:none; }
.next-step .step-n { font-weight:700; color:var(--muted, inherit); margin-right:.25rem; }
.nudge.next-step .nudge-go { background:var(--green); color:#fff; border-color:var(--green); font-weight:800; }
.tabs [role="tab"].tab-pulse { animation:tabPulse 1s ease-in-out 2; }
@keyframes tabPulse { 50% { background:var(--gold-tint); box-shadow:inset 0 -3px 0 var(--gold); } }
@media (prefers-reduced-motion: reduce) { .tabs [role="tab"].tab-pulse { animation:none; outline:3px solid var(--gold); outline-offset:-3px; } }
.nudge .nudge-go { flex:none; min-height:2.25rem; padding:.25rem .875rem; background:var(--gold); color:var(--text); border:1px solid var(--gold-ink); border-radius:var(--radius-pill); font-size:var(--fs-secondary); }
.nudge .nudge-go:active { background:#DDB865; }
.nudge .nudge-x { flex:none; min-width:var(--tap); min-height:var(--tap); margin:-.25rem 0; padding:0; border:0; background:none; color:var(--muted); font-size:1.25rem; line-height:1; }

/* ---------- layout ---------- */
main { max-width:47.5rem; margin:0 auto; padding:0 .75rem 2.5rem; }
.card { background:var(--surface); border-radius:var(--radius-card); padding:1.125rem; margin:.875rem 0; box-shadow:var(--shadow); }
h2 { margin:0 0 .75rem; font-size:var(--fs-h2); line-height:1.25; display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
h3 { margin:1.25rem 0 .5rem; font-size:var(--fs-h3); line-height:1.25; }
.step { display:inline-grid; place-items:center; min-width:2rem; height:2rem; border-radius:50%; background:var(--gold); color:var(--text); font-family:var(--font-head); font-size:1rem; font-weight:800; flex:none; }
.hidden { display:none !important; }
.muted { color:var(--muted); } .small { font-size:var(--fs-secondary); } .error { color:var(--danger); font-weight:600; }
.error:not(:empty)::before { content:"⚠ "; }
.ok { color:var(--green); font-weight:600; } .bad { color:var(--danger); font-weight:600; }
.row { display:flex; gap:var(--gap); flex-wrap:wrap; align-items:center; margin-bottom:.625rem; } .row input { width:auto; flex:1 1 6rem; margin:0; }
.grid2, .grid3 { display:grid; gap:0 .75rem; grid-template-columns:minmax(0,1fr); }
@media (min-width:35em){ .grid2{grid-template-columns:repeat(2,minmax(0,1fr));} .grid3{grid-template-columns:repeat(3,minmax(0,1fr));} }

/* ---------- forms ---------- */
label { display:block; margin:.625rem 0; font-size:1rem; font-weight:600; color:var(--text); }
input, select { display:block; width:100%; min-width:0; max-width:100%; min-height:3rem; margin-top:.25rem; padding:.625rem .75rem; font:inherit; font-size:var(--fs-body); font-weight:400; border:1.5px solid var(--field-border); border-radius:.75rem; background:var(--surface); color:var(--text); }
/* iOS Safari draws date/time inputs at their intrinsic width (ignoring width:100%) and centers the value: reset the
   native look so they size and align like every other field. */
input[type=time], input[type=date], input[type=datetime-local], input[type=month], input[type=week] { -webkit-appearance:none; appearance:none; width:100%; max-width:100%; min-width:0; box-sizing:border-box; text-align:left; line-height:1.4; }
input[type=time]::-webkit-date-and-time-value, input[type=date]::-webkit-date-and-time-value { text-align:left; margin:0; }
input[type=time]::-webkit-datetime-edit, input[type=date]::-webkit-datetime-edit { padding:0; }
input::placeholder { color:var(--muted); opacity:1; }
input:focus, select:focus { border-color:var(--green); outline:3px solid var(--tint); outline-offset:0; }
fieldset { border:0; padding:0; margin:.75rem 0; min-width:0; } legend { font-size:1rem; font-weight:700; color:var(--green); margin-bottom:.375rem; padding:0; }
.chips { display:flex; flex-wrap:wrap; gap:var(--gap); }
.chips label, label.check { display:inline-flex; align-items:center; gap:.5rem; margin:0; min-height:var(--tap); padding:.375rem .875rem; border:1.5px solid var(--field-border); border-radius:var(--radius-pill); background:var(--surface); font-weight:400; cursor:pointer; }
label.check { margin:.5rem 0; }
.chips label:has(input:checked), label.check:has(input:checked) { background:var(--tint); border-color:var(--green); font-weight:700; }
.chips input, label.check input { width:1.25rem; height:1.25rem; min-height:0; margin:0; accent-color:var(--green); flex:none; }
.myday-fields { border:1.5px dashed var(--field-border); border-radius:1rem; padding:.75rem .875rem; background:var(--tint); }
/* Legend inside the dashed box (floated legends render inside the fieldset in every engine, incl. iOS Safari). */
.myday-fields legend { float:left; width:100%; padding:0; margin:0 0 .25rem; line-height:1.35; }
.myday-fields legend + * { clear:both; }
.act-hint { margin:.25rem 0 .5rem; }
.act-chips { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.5rem; }
.act-chips label { font-size:.9375rem; line-height:1.2; padding:.375rem .625rem; gap:.375rem; border-radius:1rem; min-width:0; }
@media (min-width:35em){ .act-chips { grid-template-columns:repeat(3,minmax(0,1fr)); } }
.act-row { border:1px solid var(--line); border-radius:.875rem; background:var(--surface); padding:.5rem .75rem .25rem; margin:.5rem 0; }
.act-row .act-title { margin:.125rem 0 0; font-weight:700; }
.act-row label { margin:.375rem 0; }
.act-grid { display:grid; grid-template-columns:minmax(0,3fr) minmax(0,2fr); gap:0 .5rem; }
.act-grid input { padding-left:.625rem; padding-right:.5rem; }

/* ---------- buttons ---------- */
button { min-height:var(--tap); padding:.5rem 1.125rem; font-family:var(--font-body); font-size:var(--fs-button); font-weight:600; line-height:1.25; border-radius:var(--radius-control); border:2px solid var(--green); background:transparent; color:var(--green); cursor:pointer; }
button:active { background:var(--tint); }
button.primary { min-height:var(--btn-h); padding:.625rem 1.375rem; background:var(--primary); color:var(--primary-ink); border:1.5px solid var(--primary-border); font-weight:700; font-size:1.125rem; }
button.primary:hover { background:#A0BDB0; } button.primary:active { background:var(--primary-pressed); }
button.big { display:flex; align-items:center; justify-content:center; width:100%; margin:.5rem 0; }
button:disabled { opacity:.6; cursor:not-allowed; border-style:dashed; }
button.link { background:none; border:0; color:var(--green); padding:.25rem .5rem; text-decoration:underline; }
#profileForm > button.primary, #mydayCoach { width:100%; margin-top:.5rem; }
/* Save on the Me tab: pinned to the bottom of the screen (fixed, so it is on screen while the
   top of the long form — weight, height — is in view). Same filled eucalyptus and white text
   as "Save or share my plan". Hidden until there is something to save or a result to show. */
.profile-savebar { position:fixed; z-index:8; left:0; right:0; bottom:0; display:flex; flex-direction:column; align-items:stretch; gap:.375rem;
  margin:0; padding:.625rem .75rem calc(.625rem + env(safe-area-inset-bottom, 0px));
  background:var(--surface); border-top:2px solid var(--line); box-shadow:0 -4px 12px #0000000f; }
.profile-savebar[hidden] { display:none !important; }
button.save-changes { display:flex; align-items:center; justify-content:center; width:min(47.5rem, 100%); margin:0 auto; min-height:var(--btn-h);
  padding:.625rem 1.375rem; background:var(--green); color:#fff; border:1.5px solid var(--green); font-weight:700; font-size:1.125rem; }
button.save-changes:hover { background:#3A574F; color:#fff; }
button.save-changes:active { background:#324C45; color:#fff; }
button.save-changes:focus-visible { outline:3px solid var(--focus); outline-offset:2px; }
button.save-changes:disabled { opacity:.6; color:#fff; border-style:solid; background:var(--green); }
.profile-save-status { margin:0; text-align:center; font-weight:800; font-size:1.0625rem; line-height:1.3; }
.profile-save-status:empty { display:none; }
.profile-save-status.is-saved { color:var(--green); }
.profile-save-status.is-error { color:var(--danger); }
body[data-tab="me"].profile-save-open main { padding-bottom:calc(8.75rem + env(safe-area-inset-bottom, 0px)); }

/* ---------- targets, stores, plan ---------- */
.stats { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); gap:var(--gap); }
.stat { background:var(--tint); border-radius:1rem; padding:.75rem; }
.stat b { display:block; font-family:var(--font-head); font-size:1.5rem; font-weight:800; color:var(--green); line-height:1.2; }
.stat span { font-size:var(--fs-secondary); color:var(--muted); }
.warn { background:var(--gold-tint); border-left:4px solid var(--gold); padding:.625rem .875rem; border-radius:.75rem; margin:.5rem 0; font-size:var(--fs-secondary); color:var(--text); }
.warn.success { background:var(--tint); border-left-color:var(--green); }
.store { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:.625rem; padding:.75rem .5rem; border-bottom:1px solid var(--line); border-radius:.75rem; }
.store > div { flex:1 1 12rem; min-width:0; }
.store.selected { background:var(--tint); box-shadow:inset 4px 0 0 var(--green); }
/* Plan days: a solid eucalyptus band at the top of each day's card (day + date, Today pill, Hide meals, totals line).
   A normal static header: it scrolls with its card, never sticks, slides or covers anything.
   White on --green is 6.2:1, cream totals 5.8:1 (WCAG AA). */
details.day { border:1px solid var(--line); border-radius:1rem; margin:1.125rem 0; padding:0 .875rem .25rem; background:var(--surface); }
details.day:not([open]) { padding-bottom:0; }
details.day[open] { background:#FDFCF8; }
details.day > summary.day-band { position:static; margin:0 -.875rem; padding:.625rem .875rem .5rem; background:var(--green); color:#fff;
  border-radius:calc(1rem - 1px) calc(1rem - 1px) 0 0; cursor:pointer; display:flex; flex-wrap:wrap; align-items:center; gap:.125rem .5rem; min-height:var(--tap); list-style:none; overflow:visible; }
details.day:not([open]) > summary.day-band { border-radius:calc(1rem - 1px); }
details.day[open] > summary.day-band { margin-bottom:.375rem; }
details.day summary::-webkit-details-marker { display:none; }
details.day summary::marker { content:""; }
details.day .day-title { display:flex; align-items:baseline; flex-wrap:wrap; gap:0 .375rem; min-width:0; }
details.day .day-name { font-family:var(--font-head); font-size:1.375rem; font-weight:900; line-height:1.2; letter-spacing:-.01em; }
details.day .day-date { font-size:1rem; font-weight:700; color:var(--bg); }
details.day .today-pill { align-self:center; margin-left:.125rem; padding:.0625rem .5rem; border-radius:var(--radius-pill); background:var(--gold); color:var(--text); font-size:.8125rem; font-weight:800; letter-spacing:.02em; text-transform:uppercase; }
details.day.is-today { border-color:var(--gold); box-shadow:0 0 0 2px var(--gold); }
details.day .day-toggle { display:inline-flex; align-items:center; gap:.375rem; margin-left:auto; color:#fff; font-weight:700; white-space:nowrap; text-decoration:underline; text-underline-offset:.15em; }
details.day .day-nut { flex:1 0 100%; order:3; font-size:var(--fs-secondary); font-weight:600; color:var(--bg); }
details.day .chev { width:.55rem; height:.55rem; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg); margin:0 .25rem .2rem; transition:transform .15s; }
details.day[open] > summary .chev { transform:rotate(-135deg); margin-bottom:-.2rem; }
details.day .when-open { display:none; } details.day[open] .when-open { display:inline; } details.day[open] .when-closed { display:none; }
details.day summary:focus-visible { outline:3px solid var(--gold); outline-offset:2px; }
.days-bar { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:.25rem .75rem; margin:.75rem 0 .25rem; }
.gf-note { background:var(--tint); border-radius:.75rem; padding:.5rem .75rem; }
details summary { cursor:pointer; min-height:var(--tap); padding:.375rem 0; }
.meal { padding:.625rem 0; border-top:1px solid var(--line); }
.meal:first-of-type { border-top:0; }
.meal details summary { color:var(--green); font-weight:600; }
/* Recipe toggle: same chevron as the day's Show/Hide meals (down when closed, up when open); the whole 44px row stays tappable */
.meal details.recipe > summary { cursor:pointer; min-height:var(--tap); flex-wrap:wrap; display:flex; justify-content:flex-start; align-items:center; gap:.375rem; list-style:none; }
.meal details.recipe > summary::-webkit-details-marker { display:none; }
.meal details.recipe > summary::marker { content:""; }
.meal details.recipe[open] > summary .chev { transform:rotate(-135deg); margin-bottom:-.2rem; }
.meal details.recipe > summary:focus-visible { outline:3px solid var(--focus); outline-offset:2px; border-radius:.5rem; }
/* Meal header: name + numbers on the left, a quiet "↻ Swap" (a different recipe, one tap) on the right */
.meal-head { display:flex; align-items:flex-start; gap:.25rem .5rem; }
.meal-info { flex:1 1 auto; min-width:0; }
button.meal-swap { flex:none; min-height:var(--tap); margin:-.5rem -.375rem -.5rem 0; padding:0 .5rem; border:0; background:none; color:var(--green); font-size:var(--fs-secondary); font-weight:600; white-space:nowrap; border-radius:.75rem; }
button.meal-swap:hover { text-decoration:underline; text-underline-offset:.15em; }
button.meal-swap:active { background:var(--tint); }
button.meal-swap:disabled { opacity:.7; border-style:none; }
button.meal-swap:focus-visible { outline:3px solid var(--focus); outline-offset:1px; }
.meal.just-swapped { animation:swapGlow 2.4s ease-out 1; border-radius:.5rem; }
@keyframes swapGlow { 0%, 35% { background:var(--gold-tint); box-shadow:0 0 0 .5rem var(--gold-tint); } 100% { background:transparent; box-shadow:0 0 0 .5rem transparent; } }
@media (prefers-reduced-motion: reduce) { .meal.just-swapped { animation:none; background:var(--gold-tint); box-shadow:0 0 0 .5rem var(--gold-tint); } }
.swap-undo { display:flex; align-items:center; flex-wrap:wrap; gap:0 .25rem; margin:.25rem 0 0; font-size:var(--fs-secondary); color:var(--muted); }
.swap-undo button.link { min-height:var(--tap); padding:0 .375rem; font-size:inherit; }
.swap-err { margin:.25rem 0 0; }
/* "Download my week" / "Save or share my plan": a solid filled button in the Your week header, never a link to the PDF.
   Same eucalyptus as the day bands, white text (6.2:1 on --green). On a phone it takes its own row. */
.plan-head { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:.5rem .75rem; }
.plan-head h2 { margin-right:auto; margin-bottom:0; }
.season-cue { display:inline-block; margin-left:.375rem; font-family:var(--font-body, inherit); font-size:var(--fs-secondary); font-weight:600; color:var(--green); vertical-align:middle; white-space:nowrap; }
.season-note { margin-top:0; }
.meal-quip { display:block; margin-top:.125rem; font-size:var(--fs-secondary); font-style:italic; font-weight:600; line-height:1.3; color:var(--gold-ink); }
button.pdf-link { display:inline-flex; align-items:center; justify-content:center; max-width:100%; margin:0; text-align:center; white-space:normal; line-height:1.25; background:var(--green); color:#fff; border-color:var(--green); font-weight:700; }
button.pdf-link:hover { background:#3A574F; color:#fff; text-decoration:none; }
button.pdf-link:active { background:#324C45; color:#fff; }
button.pdf-link:focus-visible { outline:3px solid var(--focus); outline-offset:2px; }
button.pdf-link:disabled { opacity:.6; color:#fff; }
@media (max-width:40rem) { button.pdf-link { flex:1 1 100%; } }
.pdf-note { margin:0 0 .5rem; font-size:var(--fs-secondary); color:var(--muted); }
.pdf-note:empty { display:none; margin:0; }
.pdf-note.is-error { color:var(--danger); }
/* In-app PDF viewer: full screen so Back to MiMi is always on screen. The app window never follows the file. */
dialog.pdf-viewer { position:fixed; inset:0; width:100%; height:100%; max-width:none; max-height:none; margin:0; padding:calc(.75rem + env(safe-area-inset-top, 0px)) .75rem calc(.75rem + env(safe-area-inset-bottom, 0px)); border:0; background:var(--bg); color:var(--text); }
dialog.pdf-viewer[open] { display:flex; flex-direction:column; gap:.75rem; }
dialog.pdf-viewer::backdrop { background:rgba(28,40,36,.55); }
dialog.pdf-viewer h2 { margin:0; }
.pdf-viewer-lead { margin:0; }
.pdf-viewer-actions { display:flex; flex-direction:column; gap:.5rem; }
.pdf-viewer-actions button { width:100%; }
.pdf-viewer-frame { flex:1 1 auto; width:100%; min-height:40dvh; border:1px solid var(--line); border-radius:var(--radius-control); background:var(--surface); }
.tag { display:inline-block; font-size:var(--fs-secondary); font-weight:600; padding:.0625rem .5rem; border-radius:.375rem; background:var(--tint); margin:.125rem .25rem .125rem 0; color:var(--green); }
.promo { background:var(--gold-tint); color:var(--gold-ink); }
.promo::before { content:"🏷 "; }
.tag.stock-low { background:var(--gold-tint); color:var(--gold-ink); }

/* ---------- grocery ---------- */
.line { padding:.75rem 0; border-bottom:1px solid var(--line); }
.line .top { display:flex; justify-content:space-between; flex-wrap:wrap; gap:.25rem .5rem; }
.line .top > div:last-child { font-weight:700; font-variant-numeric:tabular-nums; }
.line select { margin-top:.5rem; font-size:var(--fs-secondary); }
/* Sticky total bar with the one "Send to my Kroger cart" button. It spans the card's width, stays short, and sits above
   iOS's home indicator / Safari's bottom toolbar (env(safe-area-inset-bottom); needs viewport-fit=cover). */
.totalbar { position:sticky; bottom:0; z-index:4; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:.25rem .75rem;
  margin:.75rem -1.125rem -1.125rem; padding:.5rem 1.125rem calc(.5rem + env(safe-area-inset-bottom, 0px));
  background:var(--surface); border-top:2px solid var(--line); border-radius:0 0 var(--radius-card) var(--radius-card); box-shadow:0 -4px 12px #0000000f; }
.tb-sum { display:flex; flex-direction:column; min-width:0; line-height:1.2; }
.tb-amt { font-size:var(--fs-body); } .tb-amt b { font-size:1.1875rem; }
.tb-fees { display:block; margin-top:.2rem; font-size:var(--fs-secondary); font-weight:600; line-height:1.3; }
.tb-label { font-size:var(--fs-label); color:var(--muted); }
.tb-status { font-weight:700; font-size:var(--fs-secondary); }
.totalbar button.tb-send { min-height:var(--tap); margin:0; padding:.5rem .875rem; font-size:1rem; line-height:1.2; max-width:9.75rem; white-space:normal; }
.tb-hint { grid-column:1 / -1; margin:0; }
@media (max-width:21rem) { .totalbar { grid-template-columns:1fr; } .totalbar button.tb-send { max-width:none; width:100%; } }
/* the list ends with some room, so the bar never sits on the last item's details or Swap menu */
#groceryBody .lines { padding-bottom:.75rem; }
html { scroll-padding-bottom:6rem; }
body { padding-left:env(safe-area-inset-left, 0px); padding-right:env(safe-area-inset-right, 0px); }
.nomatch { display:flex; flex-direction:column; align-items:flex-start; gap:.25rem; margin-top:.25rem; }
.nomatch button.choose { min-height:var(--tap); padding:.375rem .875rem; font-size:var(--fs-secondary); border-style:dashed; }
.finder { margin:.5rem 0 .25rem; padding:.625rem .75rem; border:1.5px solid var(--line); border-radius:.875rem; background:var(--bg); }
.finder .row { margin-top:.5rem; }
.finder-list { list-style:none; margin:.5rem 0 0; padding:0; display:grid; gap:.375rem; }
.finder-list button { width:100%; text-align:left; font-weight:400; font-size:var(--fs-secondary); background:var(--surface); color:var(--text); border:1.5px solid var(--field-border); }
.meter { height:.75rem; background:var(--tint); border:1px solid var(--field-border); border-radius:var(--radius-pill); overflow:hidden; }
.meter > div { height:100%; background:var(--green); }
.meter.over > div { background:repeating-linear-gradient(135deg, var(--danger) 0 .5rem, #B85A43 .5rem 1rem); }
pre { white-space:pre-wrap; word-break:break-word; background:var(--bg); padding:.625rem; border-radius:.75rem; font-size:.9375rem; max-height:15rem; overflow:auto; }
footer { text-align:center; font-size:var(--fs-secondary); color:var(--muted); padding:1.25rem .75rem 2.5rem; max-width:47.5rem; margin:0 auto; }

/* ---------- quick workout ---------- */
.workout-card { background:var(--tint); }
.workout-card > h2 { font-size:1.5rem; }
.wo-buttons { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); gap:.625rem; margin:.75rem 0; }
.wo-buttons button { min-height:3.5rem; font-size:1.125rem; border-radius:var(--radius-control); }
.seg { display:flex; flex-wrap:wrap; border:1.5px solid var(--green); border-radius:var(--radius-control); overflow:hidden; margin:.625rem 0; background:var(--surface); }
.seg label { flex:1 1 5.5rem; margin:0; display:flex; align-items:center; justify-content:center; min-height:var(--tap); text-align:center; padding:.375rem .25rem; font-weight:600; cursor:pointer; border-right:1px solid var(--line); }
.seg label:last-child { border-right:0; }
.seg input { position:absolute; opacity:0; width:1px; height:1px; min-height:0; }
.seg label:has(input:checked) { background:var(--primary); color:var(--primary-ink); font-weight:800; box-shadow:inset 0 0 0 2px var(--green); }
.seg label:has(input:checked)::before { content:"✓ "; white-space:pre; }
.seg label:has(input:focus-visible) { outline:3px solid var(--focus); outline-offset:-3px; }
.wo-opts { margin:.5rem 0; }
.wo-today { margin:.5rem 0; font-weight:700; color:var(--green); }
.wo-summary { display:flex; justify-content:space-between; align-items:baseline; flex-wrap:wrap; gap:.5rem; margin:.75rem 0 .25rem; font-size:var(--fs-h3); }
.wo-summary b { font-family:var(--font-head); color:var(--green); }
.wo-list { list-style:none; padding:0; margin:0; background:var(--surface); border-radius:1rem; padding:0 .875rem; }
.wo-list li { padding:.375rem 0; border-top:1px solid var(--line); }
.wo-list li:first-child { border-top:0; }
.wo-list .t { float:right; font-variant-numeric:tabular-nums; color:var(--muted); font-size:var(--fs-secondary); margin-left:.5rem; }
.wo-list .rest { color:var(--muted); font-size:var(--fs-secondary); padding:.25rem 0; }
.wo-list details summary { font-weight:700; }
.wo-list details p { margin:.25rem 0 .5rem; font-size:var(--fs-body); }
.safety { background:var(--gold-tint); padding:.625rem .875rem; border-radius:.75rem; border-left:4px solid var(--gold); }

/* timer: bolder, still in palette */
.wo-timer { position:fixed; inset:0; z-index:20; background:linear-gradient(180deg, var(--timer-bg), #2A3D37); color:var(--timer-ink); overflow:auto; }
.wo-timer-inner { max-width:32.5rem; margin:0 auto; padding:1rem 1.25rem 1.75rem; display:flex; flex-direction:column; min-height:100%; }
.wo-top { display:flex; justify-content:space-between; align-items:center; gap:.5rem; }
.wo-timer button.link { color:var(--timer-ink); font-size:var(--fs-body); min-height:var(--tap); }
.wo-progress { height:.625rem; background:#FAF7F026; border-radius:var(--radius-pill); overflow:hidden; margin:.5rem 0 1rem; }
.wo-progress div { height:100%; background:var(--timer-accent); width:0; transition:width .3s; }
.wo-phase { display:inline-block; align-self:flex-start; text-transform:uppercase; letter-spacing:.08em; font-size:var(--fs-secondary); font-weight:800; color:var(--text); background:var(--timer-accent); padding:.125rem .75rem; border-radius:var(--radius-pill); }
.wo-phase.rest { background:var(--timer-rest); }
.wo-name { font-family:var(--font-head); font-size:1.875rem; font-weight:800; margin:.5rem 0 .25rem; line-height:1.2; color:var(--timer-ink); }
.wo-count { font-family:var(--font-head); font-size:5.5rem; font-weight:900; text-align:center; font-variant-numeric:tabular-nums; margin:.625rem 0; line-height:1; color:var(--timer-accent); }
.wo-how { font-size:1.125rem; margin:.375rem 0; }
.wo-easy { color:#C9D9D1; }
.wo-next { margin:.75rem 0; padding:.75rem .875rem; border-radius:1rem; background:#FAF7F014; border:1px solid #FAF7F033; }
.wo-controls { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 6rem), 1fr)); gap:var(--gap); margin-top:auto; padding-top:.75rem; }
.wo-controls button { min-height:var(--btn-h); font-weight:700; color:var(--timer-ink); border:2px solid var(--timer-accent); background:transparent; }
.wo-controls button.primary { background:var(--timer-accent); color:var(--text); border-color:var(--timer-accent); }
.wo-controls button:active { background:#FAF7F01f; } .wo-controls button.primary:active { background:var(--primary-pressed); }
.wo-result { margin:.75rem 0 0; font-size:1.125rem; font-weight:700; color:var(--timer-rest); text-align:center; }
.wo-timer .muted { color:#C9D9D1; }

/* ---------- MiMi coach ---------- */
/* The MiMi tab is one screen: 100vh where 100dvh is missing, 100dvh for the iOS toolbar, and --vv-height
   (visualViewport) once JS is running so the on-screen keyboard shrinks the column instead of covering it.
   Header and tabs stay put; the chat fills whatever is left. The page itself does not scroll. */
body.coach-mode {
  position:fixed; left:0; right:0; top:var(--vv-offset-top, 0px); width:100%;
  height:100vh; height:100dvh; height:var(--vv-height, 100dvh);
  display:flex; flex-direction:column; overflow:hidden;
}
html:has(body.coach-mode) { background:var(--bg); height:100%; overflow:hidden; }
body.coach-mode .topbar, body.coach-mode .tabs { flex:none; }
body.coach-mode footer { display:none; }
.coach { max-width:47.5rem; width:100%; margin:0 auto; padding:0 .75rem; display:flex; flex-direction:column; min-height:0; min-width:0; }
body.coach-mode .coach { flex:1 1 auto; overflow:hidden; }
.coach-head { flex:none; display:flex; gap:.75rem; align-items:center; padding:.875rem .125rem; }
.coach-head b { font-family:var(--font-head); font-size:var(--fs-h3); color:var(--green); }
.avatar { width:2.75rem; height:2.75rem; border-radius:50%; background:var(--bg); border:2px solid var(--gold); padding:.125rem; box-sizing:border-box; object-fit:contain; flex:none; display:block; }
.chat-log { flex:1 1 auto; min-height:0; overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; display:flex; flex-direction:column; gap:.5rem; padding:.375rem 0 .5rem; }
.bubble { max-width:88%; padding:.75rem 1rem; border-radius:1.25rem; white-space:pre-line; line-height:1.45; font-size:var(--fs-body); }
.bubble.mimi { align-self:flex-start; background:var(--tint); color:var(--text); border-bottom-left-radius:.375rem; }
.bubble.user { align-self:flex-end; background:var(--surface); color:var(--text); border:1.5px solid var(--primary-border); border-bottom-right-radius:.375rem; }
.bubble.muted { color:var(--muted); font-style:italic; }
/* One row, scrolled sideways, so the suggestions never push the input down or off the screen. */
.chat-chips { flex:none; display:flex; flex-wrap:nowrap; align-items:center; gap:var(--gap); overflow-x:auto; overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch; scrollbar-width:thin; padding:.375rem .125rem; background:var(--bg); }
.chat-chips:empty { display:none; }
.chat-chips button { flex:0 0 auto; white-space:nowrap; border-radius:var(--radius-pill); padding:.375rem 1rem; font-size:var(--fs-body); border:1.5px solid var(--green); color:var(--green); background:var(--surface); font-weight:700; }
.chat-chips button:active { background:var(--tint); }
.chat-chips button.primary { background:var(--gold); color:var(--text); border-color:var(--gold-ink); min-height:var(--tap); }
.chat-form { flex:none; display:flex; gap:var(--gap); padding:.5rem 0 .25rem; background:var(--bg); }
.chat-form input { margin:0; border-radius:var(--radius-pill); padding:.625rem 1rem; min-width:0; flex:1; }
.chat-form button { flex:none; border-radius:var(--radius-pill); min-height:3rem; padding:.5rem 1.25rem; }
.coach-foot { flex:none; text-align:center; margin:0; padding:.125rem 0 calc(.5rem + env(safe-area-inset-bottom, 0px)); background:var(--bg); }
/* Keyboard open: the home indicator is covered, and the header would shove the input off screen. */
body.coach-mode.kb-open .coach-foot { padding-bottom:.35rem; }
body.coach-mode.kb-open .topbar,
body.coach-mode.kb-open .tabs,
body.coach-mode.kb-open .coach-head,
body.coach-mode.kb-open .coach-foot,
body.coach-mode.kb-open .nudge,
body.coach-mode.kb-open .offline-line,
body.coach-mode.kb-open .push-optin,
body.coach-mode.kb-open .walk-ask { display:none !important; }

/* ---------- My Day ---------- */
.myday-card { background:var(--tint); }
.myday-card h3 { font-size:1.125rem; margin:1rem 0 .25rem; }
.myday-card ul { padding-left:1.25rem; margin:.375rem 0; } .myday-card li { margin:.5rem 0; }
.myday-card details { background:var(--surface); border-radius:1rem; padding:.25rem .875rem; margin:.75rem 0; }

.coach-mode .disclaimer, .coach-mode .tagline, .coach-mode #demoBanner { display:none; }
@media (prefers-reduced-motion:reduce){ * { transition:none !important; scroll-behavior:auto !important; } }

/* ---------- grocery quality tiers (Standard / Organic produce / Full quality) ---------- */
.tag.q { background:var(--tint); color:var(--green); border:1px solid var(--green); }
/* MiMi's pick: positive certification badge (wheat accent) */
.tag.pick { background:var(--gold-tint); color:var(--gold-ink); border:1px solid var(--gold); font-weight:700; }
.qnote { margin-top:.25rem; font-size:var(--fs-secondary); color:var(--muted); }
.qnote.warn-q { color:var(--danger); font-weight:600; }
.mimi-note { display:flex; gap:.625rem; align-items:flex-start; background:var(--surface); border:1.5px solid var(--primary-border); border-radius:1rem; padding:.625rem .75rem; margin:.5rem 0; font-size:var(--fs-secondary); }
.mimi-note .avatar-sm, .sg-head .avatar-sm { width:2.25rem; height:2.25rem; border-radius:50%; background:var(--bg); border:1.5px solid var(--gold); padding:.125rem; box-sizing:border-box; object-fit:contain; flex:none; display:block; }
.confirm-box { background:var(--gold-tint); border-left:4px solid var(--gold); border-radius:.75rem; padding:.625rem .875rem; margin:.5rem 0; font-size:var(--fs-secondary); }
/* Cart sent: unmissable banner (eucalyptus = done, wheat/amber = some items didn't make it) */
.cart-banner { position:relative; margin:.75rem 0; padding:1.125rem 1.125rem 1.125rem 4.25rem; border-radius:var(--radius-card); box-shadow:var(--shadow); outline:none; animation:cb-in .45s cubic-bezier(.2,.8,.3,1) both; scroll-margin-top:4.5rem; }
.cart-banner:focus-visible { box-shadow:0 0 0 3px var(--bg), 0 0 0 5px var(--primary-border); }
.cart-banner.done { background:var(--green); color:#FFFFFF; }
.cart-banner.partial { background:var(--gold-tint); color:var(--text); border:2px solid var(--gold); }
.cb-icon { position:absolute; left:1rem; top:1.125rem; width:2.5rem; height:2.5rem; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.5rem; font-weight:800; line-height:1; }
.done .cb-icon { background:#FFFFFF; color:var(--green); }
.partial .cb-icon { background:var(--gold-ink); color:#FFFFFF; }
.cb-head { margin:0; font-family:var(--font-head); font-size:1.5rem; line-height:1.2; color:inherit; }
.cb-line { margin:.25rem 0 0; font-size:1.125rem; font-weight:600; }
.cb-sub { margin:.5rem 0 0; font-size:var(--fs-secondary); }
.cb-missed { margin:.25rem 0 0; padding-left:1.125rem; font-size:var(--fs-secondary); }
.cb-missed span { color:inherit; }
.pantry-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:.5rem; margin:.5rem 0 .75rem; }
@media (min-width: 40rem) { .pantry-grid { grid-template-columns:repeat(3, minmax(0, 1fr)); } }
.pantry-grid button { display:flex; flex-direction:column; align-items:flex-start; gap:.125rem; min-height:3.25rem; margin:0; padding:.4rem .7rem; text-align:left; border-radius:.75rem; border:1.5px solid var(--field-border); background:var(--surface); font-weight:700; line-height:1.2; }
.pantry-grid button .st { font-size:.8rem; font-weight:700; }
.pantry-grid button.need { border-color:var(--gold-ink); background:var(--gold-tint); }
.pantry-grid button.have { border-color:var(--green); background:var(--tint); }
.starter-note { margin:.25rem 0 .5rem; }
.tb-amt { white-space:normal; }
.cb-open { display:flex; align-items:center; justify-content:center; min-height:var(--btn-h); margin:.875rem 0 0 -3.25rem; padding:.625rem 1.25rem; border-radius:var(--radius-control); font-weight:700; font-size:1.125rem; text-decoration:none; }
.done .cb-open { background:#FFFFFF; color:var(--green); }
.partial .cb-open { background:var(--primary); color:var(--primary-ink); border:1.5px solid var(--primary-border); }
@keyframes cb-in { from { opacity:0; transform:translateY(.75rem) scale(.98); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){ .cart-banner { animation:none; } }
.totalbar button.tb-send.sent { background:var(--green); color:#FFFFFF; border-color:var(--green); }
.totalbar button.tb-send.sent.partial { background:var(--gold); color:var(--text); border-color:var(--gold-ink); }
.soon-note { margin:1rem 0 0; }
.confirm-box ol { margin:.375rem 0; padding-left:1.25rem; }

.tiers { border:2px solid var(--primary-border); background:var(--tint); border-radius:var(--radius-card); padding:.875rem .625rem; margin:.75rem 0; }
.tiers h3 { margin:0 0 .25rem; color:var(--green); }
.tiers > p { margin:.25rem 0 .5rem; }
.tier-grid { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:.375rem; }
.tier { position:relative; display:flex; flex-direction:column; align-items:stretch; gap:.375rem; text-align:left; padding:1.875rem .4375rem .625rem; min-height:var(--tap); border:2px solid var(--line); border-radius:var(--radius-control); background:var(--surface); color:var(--text); font-weight:400; font-size:var(--fs-secondary); line-height:1.3; cursor:pointer; }
.tier:hover { border-color:var(--primary-border); }
.tier.on { border:3px solid var(--primary-border); background:var(--surface); box-shadow:0 0 0 3px var(--primary); }
.tier.suggested { border-style:dashed; box-shadow:none; }
.tier .badge { position:absolute; top:.375rem; left:.375rem; padding:.0625rem .5rem; font-size:.8125rem; }
.tier.on:not(.suggested) .badge { background:var(--primary); color:var(--primary-ink); border-color:var(--primary-border); }
.tier.suggested .badge { background:var(--gold-tint); color:var(--gold-ink); border-color:var(--gold-ink); }
.tier .tname { font-family:var(--font-head); font-weight:800; color:var(--green); font-size:1rem; line-height:1.2; }
.tier .ttotal { font-family:var(--font-head); font-weight:800; font-size:clamp(1.0625rem, 5vw, 1.375rem); white-space:nowrap; letter-spacing:-.01em; color:var(--text); font-variant-numeric:tabular-nums; }
.tier .fit { font-weight:700; }
.tier .fit.ok { color:var(--green); }
.tier .fit.over { color:var(--danger); }
.tier .tmatch { color:var(--muted); }
.tier-blurb { margin:.625rem 0 .25rem; }
.over-ok { color:var(--gold-ink); font-weight:700; }
#sendCart:disabled { opacity:.55; cursor:not-allowed; }
@media (max-width: 21rem) { .tier-grid { grid-template-columns:1fr; } }
.totalbar .approved { color:var(--gold-ink); font-weight:700; }

/* Household */
.welcome .welcome-btns { gap:.5rem; flex-wrap:wrap; }
/* first-run gate: one question, two buttons, nothing else on screen (no step line, no walk-or-explore card) */
.gate .gate-q { font-size:1.125rem; margin:0 0 .75rem; line-height:1.35; }
.gate .welcome-btns button { flex:1 1 12rem; }
body.gate-open #nextStep, body.gate-open #walkAsk, body.gate-open #nudgeBanner, body.gate-open #groceryDock, body.gate-open #panel-me > :not(#welcome) { display:none !important; }
.hh-list { display:grid; gap:.5rem; margin:.5rem 0; }
.hh-member { border:1.5px solid var(--line); border-radius:var(--radius-control); background:var(--surface); padding:.5rem .75rem; }
.hh-member[open] { border-color:var(--primary-border); }
.hh-member summary { display:flex; gap:.625rem; align-items:center; cursor:pointer; min-height:var(--tap); list-style:none; }
.hh-member summary::-webkit-details-marker { display:none; }
.hh-ico { font-size:1.375rem; line-height:1; flex:none; }
.hh-remove { color:var(--danger); margin-top:.25rem; }
.hh-add { gap:.5rem; flex-wrap:wrap; }
.hh-summary { border-top:1.5px solid var(--line); margin-top:.75rem; padding-top:.5rem; }
.hh-summary h3 { color:var(--green); margin:.25rem 0; }
.hh-people { list-style:none; padding:0; margin:.5rem 0; display:grid; gap:.5rem; }
.hh-people li { display:flex; gap:.625rem; align-items:flex-start; background:var(--tint); border-radius:.75rem; padding:.5rem .625rem; }
.hh-meal { margin:.125rem 0 .25rem; padding:.25rem .5rem; border-left:3px solid var(--primary); background:var(--tint); border-radius:0 .5rem .5rem 0; }
.hh-meal .skipnote { color:var(--gold-ink); }
.tag.addon { background:var(--gold-tint); color:var(--gold-ink); }
.tag.allergy { background:var(--gold-tint); color:var(--gold-ink); border:1px solid var(--gold-ink); }
.allergy-note { background:var(--gold-tint); border-left:4px solid var(--gold); border-radius:.5rem; padding:.375rem .625rem; }
.hh-everyday { background:var(--tint); border-radius:.75rem; padding:.5rem .75rem; margin:.5rem 0; }
.hh-everyday ul { margin:.25rem 0 0; padding-left:1.1rem; }

/* ---------- accounts, landing, auth pages ---------- */
.acct { display:flex; flex-wrap:wrap; align-items:center; gap:.25rem .75rem; font-size:var(--fs-secondary); }
.acct .link, button.link { background:none; border:0; color:var(--green); font-weight:600; text-decoration:underline; text-underline-offset:.15em; min-height:var(--tap); padding:0 .25rem; cursor:pointer; font-size:inherit; }
.acct-delete { max-width:47.5rem; margin:.75rem auto; border:2px solid var(--danger); }
.danger-btn { background:var(--danger); color:#fff; border:1.5px solid var(--danger); border-radius:var(--radius-pill); min-height:var(--tap); padding:0 1.25rem; font-weight:700; }
.auth-wrap { max-width:28rem; margin:1.5rem auto 3rem; padding:0 .75rem; }
.auth-wrap label { display:block; margin:.75rem 0; font-weight:600; }
.auth-wrap input[type=email], .auth-wrap input[type=password] { display:block; width:100%; margin-top:.25rem; min-height:var(--btn-h); padding:0 .875rem; font:inherit; border:1.5px solid var(--field-border); border-radius:var(--radius-control); background:var(--surface); color:var(--text); }
.auth-wrap .check { display:flex; gap:.5rem; align-items:flex-start; font-weight:400; }
.auth-wrap .check input { width:1.25rem; height:1.25rem; margin-top:.2rem; flex:none; }
.auth-wrap button.primary { width:100%; margin-top:.5rem; }
.auth-links { margin-top:1rem; display:flex; flex-wrap:wrap; justify-content:space-between; gap:.5rem; }
.ok-msg { color:var(--green); font-weight:700; }
.hero { max-width:47.5rem; margin:1rem auto 0; padding:1.5rem 1rem 0; text-align:center; }
.hero h1 { font-size:2.25rem; line-height:1.15; margin:.5rem 0 .75rem; }
.hero .lead { font-size:1.1875rem; max-width:36rem; margin:0 auto 1.25rem; }
.cta { display:flex; flex-wrap:wrap; justify-content:center; gap:.75rem; margin:1rem 0 .5rem; }
a.btn { display:inline-flex; align-items:center; justify-content:center; min-height:var(--btn-h); padding:0 1.5rem; border-radius:var(--radius-pill); text-decoration:none; font-weight:700; font-size:var(--fs-button); border:1.5px solid var(--primary-border); color:var(--primary-ink); background:var(--surface); }
a.btn.primary { background:var(--primary); }
a.btn.primary:active { background:var(--primary-pressed); }
.hero-mark { display:block; width:5rem; height:5rem; margin:0 auto; }
.how-it-works { max-width:47.5rem; margin:1.5rem auto 0; padding:0 .75rem; }
.how-it-works h2 { justify-content:center; text-align:center; color:var(--green); }
.how-steps { list-style:none; margin:0; padding:0; display:grid; gap:.875rem; grid-template-columns:1fr; }
@media (min-width:35em){ .how-steps { grid-template-columns:repeat(2, minmax(0, 1fr)); } }
.how-steps .card { margin:0; display:flex; align-items:flex-start; gap:.75rem; }
.how-steps p { margin:.375rem 0 0; }
.step-emoji { width:2.5rem; height:2.5rem; min-width:2.5rem; background:var(--gold-tint); border:2px solid var(--gold); font-size:1.25rem; line-height:1; font-family:"Noto Color Emoji","Apple Color Emoji","Segoe UI Emoji",sans-serif; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.trial-pill { display:inline-block; margin:.5rem auto 0; padding:.375rem 1rem; border-radius:var(--radius-pill); background:var(--gold-tint); border:1.5px solid var(--gold); color:var(--text); font-weight:700; font-size:var(--fs-secondary); }
.pricing { max-width:47.5rem; margin:1.5rem auto 1rem; padding:0 .75rem; scroll-margin-top:1rem; }
.pricing h2 { justify-content:center; text-align:center; color:var(--green); }
.pricing-lead { text-align:center; max-width:36rem; margin:0 auto 1rem; }
.price-grid { display:grid; gap:.875rem; grid-template-columns:1fr; }
@media (min-width:35em){ .price-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); } }
.price-card { margin:0; display:flex; flex-direction:column; align-items:flex-start; position:relative; border:2px solid transparent; }
.price-card.best { border-color:var(--gold); }
.price-card h3 { margin:0 0 .25rem; }
.price-card .price { margin:0; color:var(--text); }
.price-card .price b { font-family:var(--font-head); font-size:2.25rem; font-weight:900; color:var(--green); line-height:1.1; }
.price-card .price span { color:var(--muted); font-weight:600; }
.price-note { margin:.125rem 0 .5rem; font-weight:700; color:var(--gold-ink); min-height:1.5em; }
.price-card:not(.best) .price-note { color:var(--muted); font-weight:600; }
.price-incl { margin:0 0 1rem; padding-left:1.25rem; flex:1; }
.price-incl li { margin:.25rem 0; }
.price-card .btn { align-self:stretch; }
.price-card .small { margin:.5rem 0 0; align-self:center; }
.best-badge { position:absolute; top:-.875rem; right:1rem; background:var(--gold); color:var(--text); border-color:var(--gold-ink); }
.pricing-giving { text-align:center; margin:1rem 0 0; }
.pricing-fine { text-align:center; max-width:36rem; margin:1rem auto 0; }
.price-card button.primary { align-self:stretch; }
.billing-hero h1 { margin-bottom:1rem; }
.bill-status { text-align:left; max-width:36rem; margin:0 auto 1rem; }
.bill-status p { margin:.25rem 0; }
.center { text-align:center; }
.features { display:grid; gap:.875rem; grid-template-columns:repeat(auto-fit, minmax(13rem, 1fr)); max-width:47.5rem; margin:1.5rem auto; padding:0 .75rem; }
.features .card { margin:0; }
.features h3 { margin-top:0; }
.legal-draft { background:var(--gold-tint); border:2px dashed var(--gold-ink); border-radius:.75rem; padding:.75rem 1rem; font-weight:700; }
.ph { background:var(--gold-tint); padding:0 .25rem; border-radius:.25rem; font-weight:700; }

/* high-protein swaps (e.g. regular pasta -> Banza chickpea pasta) */
.swap-row { display:flex; flex-wrap:wrap; gap:.375rem; align-items:center; margin:.5rem 0; }
.swap-btn { font-size:var(--fs-secondary); padding:.25rem .75rem; }
.swap-tip .swap-btn { margin-left:.375rem; }

/* landing: MiMi's picks + giving back; /giving page */
.landing-note { max-width:47.5rem; margin:0 auto 1rem; padding:0 .75rem; }
.landing-note .card { margin:0; }
.landing-note h2 { margin-top:0; color:var(--green); font-size:var(--fs-h2); }
.giving-card { border-left:5px solid var(--gold); }
.giving-total { background:var(--gold-tint); border:1.5px dashed var(--gold-ink); border-radius:.75rem; padding:.75rem 1rem; font-weight:700; color:var(--text); }
/* Day header: name + Show/Hide on the first line, the day's numbers on their own line */
details.day .day-name { flex:1 1 auto; }
details.day .day-toggle { order:2; }
details.day .day-nut { order:3; flex-basis:100%; margin-top:-.375rem; }

/* Shop somewhere else */
#shopElsewhere #copyList { margin:.25rem 0; }
.copy-banner { display:flex; flex-direction:column; gap:.25rem; margin:.75rem 0; padding:1rem 1.125rem; border-radius:var(--radius-card); background:var(--green); color:#FFFFFF; font-size:1.125rem; line-height:1.3; box-shadow:var(--shadow); outline:none; animation:cb-in .45s cubic-bezier(.2,.8,.3,1) both; }
.copy-banner .small { color:#FFFFFF; opacity:.92; font-size:var(--fs-secondary); }
@media (prefers-reduced-motion:reduce){ .copy-banner { animation:none; } }
.copy-fallback { width:100%; font-size:16px; font-family:inherit; border:1.5px solid var(--field-border); border-radius:.75rem; padding:.5rem; }
.store-links { display:flex; flex-wrap:wrap; gap:.25rem 1.25rem; margin:.5rem 0 .25rem; }
a.store-link { display:inline-flex; align-items:center; gap:.25rem; min-height:var(--tap); font-weight:600; color:var(--green); text-decoration:underline; text-underline-offset:.2em; text-decoration-thickness:1.5px; }
a.store-link:focus-visible { outline:3px solid var(--focus); outline-offset:2px; border-radius:.5rem; }
.checklist { margin-top:.5rem; border-top:1px solid var(--field-border); padding-top:.25rem; }
.checklist summary { min-height:var(--tap); display:flex; align-items:center; gap:.375rem; flex-wrap:wrap; cursor:pointer; font-weight:600; color:var(--green); }
.checklist h3 { margin:.75rem 0 .25rem; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }
.check-items { list-style:none; margin:0; padding:0; }
.check-items label { display:flex; gap:.625rem; align-items:flex-start; min-height:var(--tap); margin:0; padding:.625rem 0 .25rem; font-weight:400; line-height:1.35; cursor:pointer; }
.check-items input { width:1.25rem; height:1.25rem; min-height:0; margin:0; padding:0; flex:none; accent-color:var(--green); }
.check-items li + li { border-top:1px solid var(--tint); }
.check-items input:checked + span { text-decoration:line-through; opacity:.6; }

/* Where do you shop? (top of Groceries). data-shop on the panel: none | kroger | other */
.shop-options { display:grid; grid-template-columns:1fr 1fr; gap:.5rem; margin-top:.5rem; }
.shop-option { position:relative; display:flex; flex-direction:column; gap:.125rem; margin:0; padding:.75rem .75rem; min-height:var(--tap); border:1.5px solid var(--field-border); border-radius:1rem; background:var(--surface); cursor:pointer; font-weight:400; }
.shop-option input { position:absolute; opacity:0; width:1px; height:1px; min-height:0; margin:0; padding:0; }
.shop-option .so-title { font-weight:800; color:var(--text); line-height:1.25; }
.shop-option .so-sub { color:var(--muted); line-height:1.3; }
.shop-option:has(input:checked) { border-color:var(--green); background:var(--tint); box-shadow:inset 0 0 0 1.5px var(--green); }
.shop-option:has(input:checked) .so-title::before { content:"✓ "; color:var(--green); }
.shop-option:has(input:focus-visible) { outline:3px solid var(--focus); outline-offset:2px; }
/* no choice yet: the chooser is the first thing, with a gold accent; the Kroger flow and the copy card wait */
#panel-groceries[data-shop="none"] .shop-chooser { border:2px solid var(--gold); }
#panel-groceries[data-shop="none"] #store, #panel-groceries[data-shop="none"] #grocery, #panel-groceries[data-shop="none"] #cart, #panel-groceries[data-shop="none"] #shopElsewhere { display:none; }
/* chosen: a compact switch at the top */
#panel-groceries:not([data-shop="none"]) .shop-chooser { padding:.75rem 1.125rem; }
#panel-groceries:not([data-shop="none"]) .shop-chooser h2 { font-size:var(--fs-secondary); color:var(--muted); margin:0; }
#panel-groceries:not([data-shop="none"]) .chooser-intro, #panel-groceries:not([data-shop="none"]) .so-eg { display:none; }
#panel-groceries:not([data-shop="none"]) .shop-option { padding:.5rem .75rem; }
/* Kroger: no copy card. Other store: no Kroger store picker, pricing, check-out or sticky Send bar */
#panel-groceries[data-shop="kroger"] #shopElsewhere { display:none; }
#panel-groceries[data-shop="other"] #store, #panel-groceries[data-shop="other"] #grocery, #panel-groceries[data-shop="other"] #cart { display:none; }

/* "How to get my list into…" overlay: a bottom sheet on phones, a centered card on wider screens */
.store-guide { width:100%; max-width:100%; max-height:92vh; max-height:92dvh; margin:auto 0 0; padding:1rem 1.125rem calc(1rem + env(safe-area-inset-bottom)); border:0; border-radius:var(--radius-card) var(--radius-card) 0 0; background:var(--surface); color:var(--text); box-shadow:0 -6px 30px rgba(0,0,0,.18); overflow:auto; overscroll-behavior:contain; }
.store-guide[open] { display:flex; flex-direction:column; gap:.5rem; animation:sg-up .28s cubic-bezier(.2,.8,.3,1) both; }
.store-guide::backdrop { background:rgba(28,40,36,.5); }
@keyframes sg-up { from { transform:translateY(24px); opacity:0; } to { transform:none; opacity:1; } }
@media (prefers-reduced-motion:reduce){ .store-guide[open] { animation:none; } }
@media (min-width:40em){ .store-guide { max-width:30rem; margin:auto; border-radius:var(--radius-card); } }
.sg-head { display:flex; align-items:center; gap:.625rem; }
.sg-head h2 { flex:1; margin:0; font-size:1.25rem; line-height:1.25; }
.sg-x { flex:none; min-width:var(--tap); min-height:var(--tap); margin:-.25rem -.5rem -.25rem 0; padding:0; border:0; background:none; color:var(--muted); font-size:1.75rem; line-height:1; border-radius:50%; }
.sg-intro { margin:0; }
.mimi-pop .mimi-line { margin:0; font-size:1.125rem; font-weight:700; line-height:1.35; }
.mimi-pop .row { margin:0; }
.mimi-pop .row button { flex:1 1 8rem; }
.mimi-pop > .primary { width:100%; }
.sg-steps { margin:0; padding-left:1.5rem; display:flex; flex-direction:column; gap:.25rem; line-height:1.4; }
.sg-steps li::marker { font-weight:700; color:var(--green); }
.sg-copy { width:100%; min-height:var(--btn-h); font-weight:700; font-size:1.0625rem; }
.store-guide .copy-banner { margin:0; }
.sg-note { margin:0; }
a.sg-go { display:flex; justify-content:center; align-items:center; gap:.375rem; min-height:var(--btn-h); padding:.625rem 1.375rem; border-radius:var(--radius-pill); background:var(--primary); color:var(--primary-ink); border:1.5px solid var(--primary-border); font-weight:700; font-size:1.125rem; text-decoration:none; }
a.sg-go:active { background:var(--primary-pressed); }
a.sg-go:focus-visible, .sg-x:focus-visible { outline:3px solid var(--focus); outline-offset:2px; }
.sg-skip { display:flex; align-items:center; gap:.625rem; min-height:var(--tap); margin:0; font-weight:400; cursor:pointer; }
.sg-skip input { width:1.25rem; height:1.25rem; min-height:0; margin:0; padding:0; flex:none; accent-color:var(--green); }
.sg-foot { margin:0; }

/* Installable app: offline line, install tip (same slim line as reminders), Me tab entry, iPhone steps, update toast */
.offline-line { margin:.5rem .75rem 0; padding:.375rem .875rem; border-radius:var(--radius-pill); background:var(--surface); border:1px dashed var(--muted); color:var(--text); font-size:var(--fs-secondary); text-align:center; }
.install-tip .nudge-text { white-space:normal; line-height:1.3; }
.install-tip .nudge-text::before { content:"📲 "; }
.acct .install-entry { white-space:nowrap; }
.is-icon { width:2.5rem; height:2.5rem; border-radius:.625rem; flex:none; }
.share-glyph { vertical-align:-.2em; color:#0A7AFF; }
.install-sheet .primary { width:100%; }
.update-toast { position:fixed; left:50%; transform:translateX(-50%); bottom:calc(5.5rem + env(safe-area-inset-bottom)); z-index:30; width:min(24rem, calc(100% - 1.5rem)); display:flex; align-items:center; gap:.375rem; padding:.375rem .375rem .375rem 1rem; border-radius:var(--radius-pill); background:var(--green); color:#FFFFFF; font-weight:700; font-size:var(--fs-secondary); box-shadow:var(--shadow); }
.update-toast span { flex:1; }
.update-toast .update-go { min-height:2.5rem; padding:.25rem 1rem; border:0; border-radius:var(--radius-pill); background:var(--gold); color:var(--text); font-size:var(--fs-secondary); }
.update-toast .update-x { min-width:var(--tap); min-height:var(--tap); padding:0; border:0; background:none; color:#FFFFFF; font-size:1.25rem; }
.offline-page { display:grid; place-items:center; min-height:100vh; min-height:100dvh; padding:1rem; }
.offline-card { max-width:24rem; text-align:center; display:flex; flex-direction:column; align-items:center; gap:.5rem; }
.offline-card h1 { margin:.25rem 0 0; color:var(--green); }
.offline-card p { margin:0; }
@media (display-mode: standalone) { .install-entry, .install-tip { display:none !important; } }
.offline-card .offline-logo { width:min(15rem, 80%); height:auto; margin-bottom:.25rem; }

/* MiMi's mark next to her lines (.avatar, .avatar-sm): the basket-with-heart from the logo (public/brand/logo-mark.svg) */
img.is-icon.mimi-mark { border-radius:.625rem; }

/* Push notifications: MiMi's opt-in card and the Me tab's Notifications settings */
.push-optin { margin:.5rem .75rem 0; padding:.75rem .875rem; border-radius:var(--radius-card); background:var(--gold-tint); border:1px solid var(--gold); display:flex; gap:.625rem; align-items:flex-start; }
.push-optin p { margin:0 0 .5rem; font-weight:600; }
.push-optin-main { flex:1 1 auto; min-width:0; }
.push-optin .row { gap:.5rem; margin:0; }
.notif-card summary { cursor:pointer; list-style:none; display:flex; align-items:center; justify-content:space-between; gap:.5rem; min-height:var(--tap); }
.notif-card summary::-webkit-details-marker { display:none; }
.notif-card summary::after { content:"›"; font-size:1.25rem; color:var(--muted); transition:transform .15s; }
.notif-card[open] summary::after { transform:rotate(90deg); }
.notif-title { font-weight:700; flex:1 1 auto; }
.notif-card .switch-row { display:flex; gap:.625rem; align-items:flex-start; margin:.75rem 0; }
.notif-card .switch-row input { width:1.375rem; height:1.375rem; margin-top:.125rem; flex:none; }
.notif-card .quiet-hours { border:0; padding:0; margin:0 0 .75rem; }
.notif-card .quiet-hours legend { font-weight:600; padding:0; margin-bottom:.25rem; }
.notif-card .quiet-hours[disabled] { opacity:.55; }
.notif-card .row { align-items:center; gap:.75rem; }
.notif-card .mimi-say { margin:.75rem 0; }
.notif-title { white-space:nowrap; }
.notif-card summary #notifStatus { text-align:right; }
.notif-card .quiet-hours .grid2 { grid-template-columns:1fr 1fr; gap:.75rem; }

/* "What I'll send to Kroger": packages per product, before sending */
.cart-preview { border:1px solid var(--line); border-radius:var(--radius-control); padding:.25rem .75rem; margin:.5rem 0; background:var(--surface); }
.cart-preview > summary { cursor:pointer; min-height:var(--tap); display:flex; align-items:center; justify-content:space-between; gap:.5rem; font-weight:700; color:var(--green); }
.cart-pv { list-style:none; margin:0; padding:0; }
.cart-pv li { display:grid; grid-template-columns:auto 1fr auto; gap:.125rem .625rem; align-items:baseline; padding:.5rem 0; border-top:1px solid var(--line); font-size:var(--fs-secondary); }
.cart-pv .pv-q { white-space:nowrap; color:var(--text); }
.cart-pv .pv-name { min-width:0; }
.cart-pv .pv-price { white-space:nowrap; font-weight:600; }
.cart-pv .pv-warn { display:block; color:var(--gold-ink); font-weight:700; }
.cart-pv li.over .pv-q { color:var(--gold-ink); }
.cart-ask ul { margin:.375rem 0; padding-left:1.25rem; }
.cart-ask .row { margin-top:.5rem; gap:.5rem; }

/* First run, step 2 -> 3: MiMi's "set up your grocery cart" card, at the end of the week and docked at the bottom */
.mimi-next { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:.5rem .625rem; border:1.5px solid var(--gold); background:var(--gold-tint); }
.mimi-next.hidden { display:none; }
.mimi-next .avatar-sm { width:2.25rem; height:2.25rem; border-radius:50%; background:var(--bg); border:1.5px solid var(--gold); padding:.125rem; box-sizing:border-box; object-fit:contain; }
.mimi-next .mn-text { margin:0; font-weight:600; line-height:1.35; grid-column:2 / -1; }
.mimi-next .mn-go { grid-column:1 / -1; width:100%; }
.grocery-dock { position:fixed; z-index:30; left:50%; transform:translateX(-50%); bottom:calc(.5rem + env(safe-area-inset-bottom, 0px)); width:min(46rem, calc(100% - 1rem)); box-sizing:border-box; padding:.5rem .625rem .625rem; border-radius:1rem; box-shadow:0 -2px 18px rgba(0,0,0,.14); }
.grocery-dock .mn-text { grid-column:2; font-size:var(--fs-secondary); }
.grocery-dock .mn-go { min-height:2.75rem; padding:.375rem 1rem; font-size:1.0625rem; }
.grocery-dock .mn-x { grid-column:3; grid-row:1; min-width:2.75rem; min-height:2.75rem; padding:0; border:0; background:transparent; font-size:1.5rem; line-height:1; color:var(--text); }
.grocery-dock { transition:opacity .2s, transform .2s; }
.grocery-dock.dock-away { opacity:0; pointer-events:none; transform:translateX(-50%) translateY(1rem); visibility:hidden; }
@media (prefers-reduced-motion: reduce) { .grocery-dock { transition:none; } }
body.has-dock main { padding-bottom:10rem; } /* the end of the week scrolls clear of the dock */
body.onb-groceries #mealsNext { display:none; } /* the MiMi card says it */

/* MiMi's one-time "walk you through it?" question (under the tabs, like the Next line) */
.walk-ask { margin:.5rem .75rem 0; padding:.625rem .75rem; border-radius:1rem; max-width:46rem; box-sizing:border-box; }
@media (min-width:48em){ .walk-ask { margin-left:auto; margin-right:auto; } }
.walk-ask .mn-text { font-size:var(--fs-secondary); }
.walk-btns { grid-column:1 / -1; display:grid; grid-template-columns:1fr 1fr; gap:.5rem; }
.walk-btns button { width:100%; min-height:2.75rem; padding:.375rem .75rem; font-size:1rem; }
.around-row { display:flex; justify-content:flex-end; margin:.5rem 0 0; }
.show-around { white-space:nowrap; }
.nudge.next-step { border-radius:1rem; }
.nudge.next-step .nudge-text { white-space:normal; overflow:visible; line-height:1.3; padding:.125rem 0; }
.walk-btns button { padding:.375rem .5rem; font-size:.9375rem; white-space:nowrap; }

/* ---------------- My recipes (recipes.js) ---------------- */
.link-btn { background:none; border:0; padding:.375rem 0; min-height:2.75rem; color:var(--green); font-weight:700; text-decoration:underline; cursor:pointer; font-size:var(--fs-secondary); }
.rc-top { margin:-.25rem 0 .25rem; }
#myRecipes .plan-head { display:flex; align-items:center; justify-content:space-between; gap:.5rem; flex-wrap:wrap; }
.rc-chooser { background:var(--tint); border-radius:1rem; padding:.75rem; margin:.5rem 0; }
.rc-choices { display:grid; grid-template-columns:repeat(3, 1fr); gap:.5rem; }
.rc-choices button { display:flex; flex-direction:column; align-items:center; gap:.25rem; padding:.75rem .375rem; min-height:4.5rem; font-weight:700; text-align:center; }
.rc-choices button span { font-size:1.5rem; }
.rc-status:empty { display:none; }
.rc-status { margin:.5rem 0; font-weight:700; color:var(--green); }
.rc-review { border:1.5px solid var(--primary-border); border-radius:1rem; padding:.75rem; margin:.5rem 0; background:var(--surface); }
.rc-review h3 { margin:0 0 .5rem; }
.rc-review h4 { margin:.75rem 0 .25rem; }
.rc-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:.5rem; }
.rc-grid label { display:flex; flex-direction:column; font-size:var(--fs-secondary); font-weight:700; gap:.125rem; min-width:0; }
.rc-grid input, .rc-grid select { width:100%; box-sizing:border-box; }
.rc-grid .rc-name { grid-column:1 / -1; }
.rc-nutri { margin:.5rem 0; padding:.5rem .625rem; background:var(--tint); border-radius:.75rem; font-size:var(--fs-secondary); }
.rc-warn { margin:.375rem 0; padding:.5rem .625rem; background:var(--gold-tint); border-radius:.75rem; font-size:var(--fs-secondary); }
.rc-conflict { color:var(--danger); font-weight:700; }
.rc-lines { display:grid; gap:.375rem; }
.rc-line { display:grid; grid-template-columns:minmax(0, 1.4fr) minmax(0, 1fr) 3.25rem 2.75rem; gap:.375rem; align-items:center; }
.rc-line input, .rc-line select { width:100%; box-sizing:border-box; min-width:0; }
.rc-line.unmatched .rc-match { border-color:var(--gold-ink); background:var(--gold-tint); }
.rc-g { font-size:var(--fs-secondary); color:var(--muted); text-align:right; }
.rc-x { min-width:2.75rem; min-height:2.75rem; padding:0; }
.rc-steps { margin:0; padding-left:1.25rem; display:grid; gap:.375rem; }
.rc-steps li { display:grid; grid-template-columns:1fr 2.75rem; gap:.375rem; align-items:start; }
.rc-steps textarea { width:100%; box-sizing:border-box; resize:vertical; }
.rc-include { display:flex; gap:.5rem; align-items:center; margin:.5rem 0; }
.rc-item { border-top:1px solid var(--line); padding:.625rem 0; }
.rc-item-head { display:flex; justify-content:space-between; gap:.5rem; flex-wrap:wrap; }
.rc-item-actions { display:flex; flex-wrap:wrap; gap:.375rem; margin-top:.375rem; align-items:center; }
.rc-warn-inline { color:var(--gold-ink); }
@media (max-width: 480px) {
  .rc-grid { grid-template-columns:repeat(2, 1fr); }
  .rc-line { grid-template-columns:minmax(0, 1fr) 3.5rem 2.75rem; row-gap:.25rem; padding-bottom:.375rem; border-bottom:1px solid var(--line); }
  .rc-line .rc-text { grid-column:1 / 3; grid-row:1; }
  .rc-line .rc-x { grid-column:3; grid-row:1; }
  .rc-line .rc-match { grid-column:1 / 2; grid-row:2; }
  .rc-line .rc-g { grid-column:2 / 4; grid-row:2; text-align:left; }
}
.rc-include input[type="checkbox"] { width:1.375rem; height:1.375rem; min-height:0; flex:none; margin:0; }
.rc-include { justify-content:flex-start; }
.rc-item-actions .rc-day { width:auto; flex:1 1 8rem; max-width:11rem; }
/* Terms / Privacy pages */
.legal table { width:100%; border-collapse:collapse; font-size:var(--fs-secondary); margin:.5rem 0; }
.legal th, .legal td { border:1px solid var(--line); padding:.375rem .5rem; text-align:left; vertical-align:top; }
.legal h4 { margin:1rem 0 .25rem; }
.legal code { font-size:.9em; }
#signupForm label.check { border-radius:1rem; align-items:flex-start; padding:.625rem .875rem; }
#signupForm label.check input { margin-top:.2rem; }

/* Plan & billing: a clear pill in the header and a card at the top of the Me tab */
.acct a.acct-billing { display:inline-flex; align-items:center; min-height:var(--tap); padding:0 1rem; border-radius:var(--radius-pill); background:var(--primary); color:var(--primary-ink); border:1.5px solid var(--primary-border); font-weight:700; text-decoration:none; white-space:nowrap; }
.acct a.acct-billing:active { background:var(--primary-pressed); }
.plan-card { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.75rem 1rem; border:2px solid var(--primary-border); }
.plan-card h2 { margin:0 0 .25rem; }
.plan-card-status { margin:0; font-weight:600; }
.plan-card-btn { flex:none; }
@media (max-width:30em) { .plan-card-btn { width:100%; } }

/* Footer: contact line, feedback link and social icons (shared on every page) */
footer .footer-contact { margin:.5rem 0; }
footer .footer-feedback { display:inline-block; padding:.5rem .25rem; font-weight:700; color:var(--green, inherit); min-height:44px; line-height:1.6; }
footer .footer-social { list-style:none; display:flex; justify-content:center; gap:.75rem; margin:.25rem 0 .5rem; padding:0; }
footer .footer-social a { display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:50%; color:var(--text); background:var(--surface); border:1.5px solid var(--field-border); }
footer .footer-social a:hover, footer .footer-social a:focus-visible { color:var(--green, var(--text)); border-color:var(--green, var(--text)); }

/* /feedback */
.feedback-title { font-size:1.5rem; margin:.25rem 0 .5rem; }
.fb-kinds { border:0; padding:0; margin:.75rem 0; display:grid; gap:.5rem; }
.fb-kinds legend { font-weight:700; margin-bottom:.5rem; padding:0; }
label.fb-kind { display:flex; align-items:center; gap:.75rem; min-height:3.25rem; margin:0; padding:.5rem .875rem; border:1.5px solid var(--field-border); border-radius:.875rem; background:var(--surface); cursor:pointer; }
label.fb-kind input { width:1.375rem; height:1.375rem; min-height:0; margin:0; flex:none; accent-color:var(--green, auto); }
label.fb-kind:has(input:checked) { border-color:var(--green, var(--text)); background:var(--tint); }
#fbMessage { display:block; width:100%; box-sizing:border-box; min-height:9rem; margin-top:.25rem; padding:.75rem; font:inherit; font-size:var(--fs-body); border:1.5px solid var(--field-border); border-radius:.75rem; background:var(--surface); color:var(--text); resize:vertical; }
#fbMessage:focus { border-color:var(--green); outline:3px solid var(--tint); }
.fb-count { text-align:right; font-size:var(--fs-secondary); color:var(--muted); margin:.25rem 0 0; }
.fb-optional { font-weight:400; color:var(--muted); }
.fb-hp { position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; }
.fb-attached { font-size:var(--fs-secondary); color:var(--muted); }
.fb-error { color:#9b2c2c; font-weight:600; }
button.fb-send { width:100%; min-height:3.25rem; }
.feedback-thanks { text-align:center; }
.feedback-thanks .fb-mark { display:block; margin:.5rem auto; }

/* "Meals I cook": compact 7-day x 3-meal grid */
.cook-grid { border-collapse: collapse; width: 100%; max-width: 420px; table-layout: fixed; }
.cook-grid th, .cook-grid td { padding: 1px 0; line-height: 1.6; text-align: center; font-size: .85rem; font-weight: 600; }
.cook-grid th[scope="row"] { text-align: left; width: 5.8em; font-weight: 500; white-space: nowrap; }
.cook-grid thead th:first-child { width: 6.2em; }
.cook-grid input { width: 1.1rem; height: 1.1rem; min-height: 0; margin: 0; padding: 0; }
.cook-presets { margin-top: 4px; }
.cook-presets .link { padding: 0; font-size: inherit; }
/* plan: quick-fill (no cooking) meal marker */
.quick-pill { display: inline-block; font-size: .7rem; font-weight: 600; padding: 0 6px; border-radius: 999px; background: #eef4ee; color: #4b6b4f; vertical-align: 1px; }
.easy-pill { display: inline-block; font-size: .7rem; font-weight: 700; padding: 0 6px; border-radius: 999px; background: #f4ead0; color: #7a5a16; vertical-align: 1px; letter-spacing: .01em; }
.cook-line { display:block; margin:.35rem 0 .65rem; color: var(--green); font-weight: 700; }
.meal-note { display: block; margin-top: .15rem; font-size: var(--fs-secondary); color: var(--green); font-weight: 600; }
.ing-head { margin: .35rem 0 .15rem; font-weight: 700; color: var(--green); }

/* /admin: one compact search and a short results table */
.admin-wrap { max-width: 64rem; margin: 0 auto; padding: 0 .75rem 1rem; }
.admin-wrap h1 { font-size: 1.5rem; margin: .5rem 0 .25rem; }
.admin-lead { margin: 0 0 .75rem; }
.admin-search { display: flex; gap: .5rem; align-items: flex-end; margin: 0; }
.admin-search label { flex: 1 1 auto; margin: 0; }
.admin-search button.primary { min-height: 3rem; margin: 0; white-space: nowrap; padding: .4rem 1.1rem; }
.admin-card { margin: .5rem 0; padding: .5rem .75rem; }
.admin-scroll { overflow-x: auto; }
.admin-table { width: 100%; border-collapse: collapse; font-size: var(--fs-secondary); }
.admin-table th, .admin-table td { text-align: left; padding: .3rem .4rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
.admin-table th { font-size: var(--fs-label); color: var(--muted); font-weight: 700; }
.admin-table button { min-height: 2.5rem; padding: .2rem .55rem; font-size: var(--fs-label); line-height: 1.2; white-space: normal; }
.admin-sum { margin: .2rem 0 0; }