/* reset components, from the reset design system v2 (design/source/reset.css on the canvas, approved
   8 Nov 2026). Spec-only parts (device frame, spec loops, doc chrome) are left out. Changes from the
   canvas, each from the design review: meal names wrap to two lines instead of being cut at 390 px
   (one line on the compact card, so Today still fits 320 by 568); icon masks point at ../ui-icons/;
   the base resets sit inside :where(.rs) so they never outrank a component (a button.btn-primary
   lost its fill to .rs button on the first build). Colours come only from tokens.css. */
.i-apple{--ic:url(../ui-icons/apple.svg)}
.i-bell{--ic:url(../ui-icons/bell.svg)}
.i-book-open{--ic:url(../ui-icons/book-open.svg)}
.i-calendar-heart{--ic:url(../ui-icons/calendar-heart.svg)}
.i-calendar{--ic:url(../ui-icons/calendar.svg)}
.i-carrot{--ic:url(../ui-icons/carrot.svg)}
.i-chart-no-axes-column{--ic:url(../ui-icons/chart-no-axes-column.svg)}
.i-check{--ic:url(../ui-icons/check.svg)}
.i-chef-hat{--ic:url(../ui-icons/chef-hat.svg)}
.i-chevron-left{--ic:url(../ui-icons/chevron-left.svg)}
.i-chevron-right{--ic:url(../ui-icons/chevron-right.svg)}
.i-circle-help{--ic:url(../ui-icons/circle-help.svg)}
.i-clock{--ic:url(../ui-icons/clock.svg)}
.i-cloud-off{--ic:url(../ui-icons/cloud-off.svg)}
.i-cooking-pot{--ic:url(../ui-icons/cooking-pot.svg)}
.i-droplets{--ic:url(../ui-icons/droplets.svg)}
.i-drumstick{--ic:url(../ui-icons/drumstick.svg)}
.i-file-text{--ic:url(../ui-icons/file-text.svg)}
.i-flame{--ic:url(../ui-icons/flame.svg)}
.i-house{--ic:url(../ui-icons/house.svg)}
.i-info{--ic:url(../ui-icons/info.svg)}
.i-leaf{--ic:url(../ui-icons/leaf.svg)}
.i-list-checks{--ic:url(../ui-icons/list-checks.svg)}
.i-lock{--ic:url(../ui-icons/lock.svg)}
.i-milk{--ic:url(../ui-icons/milk.svg)}
.i-minus{--ic:url(../ui-icons/minus.svg)}
.i-moon{--ic:url(../ui-icons/moon.svg)}
.i-nut{--ic:url(../ui-icons/nut.svg)}
.i-party-popper{--ic:url(../ui-icons/party-popper.svg)}
.i-plate{--ic:url(../ui-icons/plate.svg)}
.i-plus{--ic:url(../ui-icons/plus.svg)}
.i-portion-cheese{--ic:url(../ui-icons/portion-cheese.svg)}
.i-portion-cup{--ic:url(../ui-icons/portion-cup.svg)}
.i-portion-half-cup{--ic:url(../ui-icons/portion-half-cup.svg)}
.i-portion-palm{--ic:url(../ui-icons/portion-palm.svg)}
.i-portion-teaspoon{--ic:url(../ui-icons/portion-teaspoon.svg)}
.i-refrigerator{--ic:url(../ui-icons/refrigerator.svg)}
.i-reset-mark{--ic:url(../ui-icons/reset-mark.svg)}
.i-rotate-ccw{--ic:url(../ui-icons/rotate-ccw.svg)}
.i-search{--ic:url(../ui-icons/search.svg)}
.i-settings{--ic:url(../ui-icons/settings.svg)}
.i-share-2{--ic:url(../ui-icons/share-2.svg)}
.i-shopping-basket{--ic:url(../ui-icons/shopping-basket.svg)}
.i-sparkles{--ic:url(../ui-icons/sparkles.svg)}
.i-sun-moon{--ic:url(../ui-icons/sun-moon.svg)}
.i-sun{--ic:url(../ui-icons/sun.svg)}
.i-thermometer{--ic:url(../ui-icons/thermometer.svg)}
.i-tick{--ic:url(../ui-icons/tick.svg)}
.i-timer{--ic:url(../ui-icons/timer.svg)}
.i-user{--ic:url(../ui-icons/user.svg)}
.i-users{--ic:url(../ui-icons/users.svg)}
.i-utensils{--ic:url(../ui-icons/utensils.svg)}
.i-wheat{--ic:url(../ui-icons/wheat.svg)}
.i-wifi-off{--ic:url(../ui-icons/wifi-off.svg)}
.i-glass-water{--ic:url(../ui-icons/glass-water.svg)}
.i-coffee{--ic:url(../ui-icons/coffee.svg)}
.i-cup-soda{--ic:url(../ui-icons/cup-soda.svg)}
.i-scale{--ic:url(../ui-icons/scale.svg)}
.i-target{--ic:url(../ui-icons/target.svg)}
.i-flask-conical{--ic:url(../ui-icons/flask-conical.svg)}
.i-circle-user-round{--ic:url(../ui-icons/circle-user-round.svg)}
.i-arrow-up-right{--ic:url(../ui-icons/arrow-up-right.svg)}
.i-x{--ic:url(../ui-icons/x.svg)}
.i-reset-icon-maskable{--ic:url(../brand/reset-icon-maskable.svg)}
.i-reset-icon-mono{--ic:url(../brand/reset-icon-mono.svg)}
.i-reset-icon-small{--ic:url(../brand/reset-icon-small.svg)}
.i-reset-icon{--ic:url(../brand/reset-icon.svg)}
.i-reset-lockup{--ic:url(../brand/reset-lockup.svg)}
.i-reset-splash-dark{--ic:url(../brand/reset-splash-dark.svg)}
.i-reset-splash{--ic:url(../brand/reset-splash.svg)}
.i-reset-wordmark-dark{--ic:url(../brand/reset-wordmark-dark.svg)}
.i-reset-wordmark{--ic:url(../brand/reset-wordmark.svg)}
.i-briefcase{--ic:url(../ui-icons/briefcase.svg)}
.i-footprints{--ic:url(../ui-icons/footprints.svg)}
.i-palette{--ic:url(../ui-icons/palette.svg)}
.i-sunrise{--ic:url(../ui-icons/sunrise.svg)}
/* ==========================================================================
   reset components. Plain CSS on top of reset-tokens.css. No framework.
   Theme: put .theme-light / .theme-dark (or data-theme) on any ancestor.
   State classes (.is-pressed, .is-focused, .is-done, .is-sample) mirror the
   real states (:active, :focus-visible, aria-pressed, data-sample) so specs
   can draw a state that a static frame cannot trigger.
   ========================================================================== */

.rs { font-family: var(--font); font-feature-settings: var(--font-features); color: var(--ink); background: var(--bg); color-scheme: var(--color-scheme); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
:where(.rs) *, :where(.rs) *::before, :where(.rs) *::after { box-sizing: border-box; }
:where(.rs) button { font: inherit; color: inherit; border: 0; background: none; padding: 0; margin: 0; cursor: pointer; }
:where(.rs) :is(p, h1, h2, h3, h4, ul, ol) { margin: 0; padding: 0; }
:where(.rs) :is(ul, ol) { list-style: none; }
.num { font-feature-settings: var(--font-numeric); }

/* Type */
.t-display { font: var(--t-display); letter-spacing: var(--t-display-track); }
.t-large-title { font: var(--t-large-title); letter-spacing: var(--t-large-title-track); }
.t-title-1 { font: var(--t-title-1); letter-spacing: var(--t-title-1-track); }
.t-title-2 { font: var(--t-title-2); letter-spacing: var(--t-title-2-track); }
.t-title-3 { font: var(--t-title-3); letter-spacing: var(--t-title-3-track); }
.t-headline { font: var(--t-headline); letter-spacing: var(--t-headline-track); }
.t-body { font: var(--t-body); letter-spacing: var(--t-body-track); }
.t-callout { font: var(--t-callout); }
.t-subhead { font: var(--t-subhead); }
.t-footnote { font: var(--t-footnote); letter-spacing: var(--t-footnote-track); }
.t-source { font: var(--t-source); letter-spacing: var(--t-source-track); }
.t-num-xl { font: var(--t-num-xl); letter-spacing: var(--t-num-xl-track); font-feature-settings: var(--font-numeric); }
.t-num-lg { font: var(--t-num-lg); letter-spacing: var(--t-num-lg-track); font-feature-settings: var(--font-numeric); }
.t-num-md { font: var(--t-num-md); letter-spacing: var(--t-num-md-track); font-feature-settings: var(--font-numeric); }
.t-cook-step { font: var(--t-cook-step); letter-spacing: var(--t-cook-step-track); }
.ink { color: var(--ink); } .ink-2 { color: var(--ink-2); } .ink-3 { color: var(--ink-3); }
.c-primary { color: var(--primary); } .c-accent { color: var(--accent); }

/* Icons: Lucide (ISC) and reset's own, drawn by mask so they take currentColor in both themes */
.ic { display: inline-block; flex: none; width: 22px; height: 22px; background-color: currentColor; -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; }
.ic-14 { width: 14px; height: 14px; } .ic-16 { width: 16px; height: 16px; } .ic-18 { width: 18px; height: 18px; } .ic-20 { width: 20px; height: 20px; }
.ic-28 { width: 28px; height: 28px; } .ic-32 { width: 32px; height: 32px; } .ic-40 { width: 40px; height: 40px; } .ic-48 { width: 48px; height: 48px; } .ic-64 { width: 64px; height: 64px; } .ic-96 { width: 96px; height: 96px; }

/* Food groups: set the group, every child reads --g, --g-tint, --g-on */
.g-protein { --g: var(--protein); --g-tint: var(--protein-tint); --g-on: var(--on-protein); }
.g-dairy { --g: var(--dairy); --g-tint: var(--dairy-tint); --g-on: var(--on-dairy); }
.g-vegetables { --g: var(--vegetables); --g-tint: var(--vegetables-tint); --g-on: var(--on-vegetables); }
.g-fruits { --g: var(--fruits); --g-tint: var(--fruits-tint); --g-on: var(--on-fruits); }
.g-grains { --g: var(--grains); --g-tint: var(--grains-tint); --g-on: var(--on-grains); }
.g-fats { --g: var(--fats); --g-tint: var(--fats-tint); --g-on: var(--on-fats); }

.stack { display: flex; flex-direction: column; }
.row { display: flex; align-items: center; }
.spacer { flex: 1; }

/* Large-title header: collapses to .nav-bar (glass) on scroll */
.lt-header { padding: 4px 20px 12px; display: flex; align-items: flex-end; gap: 12px; }
.lt-header .t-large-title { flex: 1; }
.lt-eyebrow { font: var(--t-footnote); color: var(--ink-3); margin-bottom: 2px; }
.nav-bar { height: var(--size-header-compact); display: grid; grid-template-columns: 56px 1fr 56px; align-items: center; padding: 0 4px; border-bottom: 0.5px solid var(--glass-edge); }
.nav-bar .title { font: var(--t-headline); text-align: center; }
.icon-btn { width: 44px; height: 44px; border-radius: 22px; display: inline-grid; place-items: center; color: var(--primary); }
.icon-btn.filled { background: var(--surface-2); color: var(--ink-2); width: 32px; height: 32px; margin: 6px; }

/* Glass. Only for fixed chrome. Solid while anything beneath it moves. */
.glass { background: var(--glass-fill); -webkit-backdrop-filter: saturate(var(--glass-saturate)) blur(var(--glass-blur)); backdrop-filter: saturate(var(--glass-saturate)) blur(var(--glass-blur)); }
.glass.is-moving { background: var(--glass-solid); -webkit-backdrop-filter: none; backdrop-filter: none; }

/* Tab bar: four tabs, never more */
.tabbar { flex: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 4px 8px 34px; border-top: 0.5px solid var(--glass-edge); z-index: var(--z-tab-bar); }
.se .tabbar { padding-bottom: 4px; }
.tab { min-height: 48px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font: 500 10.5px/13px var(--font); letter-spacing: 0.01em; color: var(--ink-3); border-radius: 12px; }
.tab[aria-current="page"] { color: var(--primary); }
.se .tab { min-height: 48px; gap: 1px; font-size: 10px; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 50px; padding: 0 20px; border-radius: var(--r-md); font: var(--t-headline); letter-spacing: var(--t-headline-track); text-decoration: none; transition: transform var(--d-press) var(--ease-standard), background-color var(--d-fast) var(--ease-standard); }
.btn-primary { background: var(--primary); color: var(--on-primary); }
.btn-primary.is-pressed, .btn-primary:active { background: var(--primary-pressed); transform: scale(0.97); }
.btn-secondary { background: var(--surface-2); color: var(--ink); }
.btn-secondary.is-pressed, .btn-secondary:active { transform: scale(0.97); }
.btn-tertiary { background: transparent; color: var(--primary); padding: 0 12px; }
.btn-accent { background: var(--accent); color: var(--on-accent); }
.btn.is-disabled, .btn[disabled] { background: var(--surface-2); color: var(--ink-3); box-shadow: none; cursor: default; }
.btn-block { display: flex; width: 100%; }
.btn-sm { min-height: 48px; padding: 0 16px; font: var(--t-subhead); font-weight: 600; } .btn-sm.compact-h { min-height: 36px; }
.is-focused, .rs :focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* Inputs: 16px minimum so iOS never zooms */
.field { display: flex; flex-direction: column; gap: 6px; }
.field label, .field .label { font: var(--t-subhead); color: var(--ink-2); font-weight: 600; }
.input { height: 48px; border-radius: var(--r-md); border: 1px solid var(--control); background: var(--surface); color: var(--ink); font: var(--t-body); padding: 0 16px; width: 100%; }
.input.is-focused { border-color: var(--primary); outline: 3px solid color-mix(in srgb, var(--focus) 35%, transparent); outline-offset: 0; }
.input.is-disabled { background: var(--surface-2); color: var(--ink-3); border-style: dashed; }
.search { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 12px; border-radius: var(--r-md); background: var(--surface-2); color: var(--ink-3); font: var(--t-body); }

/* Surfaces */
.card { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--elev-1), var(--elev-rim); }
.group { background: var(--surface); border-radius: var(--r-lg); overflow: hidden; }
.list-row { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 8px 16px; border-bottom: 0.5px solid var(--line); font: var(--t-body); }
.list-row:last-child { border-bottom: 0; }
.list-row .val { margin-left: auto; color: var(--ink-3); font: var(--t-callout); display: flex; align-items: center; gap: 6px; }
.section-label { font: 400 13px/18px var(--font); color: var(--ink-3); padding: 18px 20px 6px; text-transform: uppercase; letter-spacing: 0.02em; }

/* Photo and placeholder. Placeholder = the lead food group's tint, a drawn plate and the group icon. */
.photo { position: relative; overflow: hidden; border-radius: var(--r-md); flex: none; }
.photo::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--photo-frame); pointer-events: none; }
.ph { background: var(--g-tint); display: grid; place-items: center; color: var(--g); }
.ph::before { content: ""; position: absolute; width: 84%; aspect-ratio: 1; background: currentColor; opacity: 0.30; -webkit-mask: url(../ui-icons/plate.svg) center / contain no-repeat; mask: url(../ui-icons/plate.svg) center / contain no-repeat; }
.ph .ic { position: relative; }
.ph-cap { position: absolute; left: 0; right: 0; bottom: 10px; text-align: center; font: var(--t-source); letter-spacing: var(--t-source-track); color: var(--g-on); }

/* Tags */
.tag { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 7px; border-radius: 5px; font: 600 11px/14px var(--font); letter-spacing: 0.03em; white-space: nowrap; }
.tag-sample { background: var(--sample-bg); color: var(--sample-fg); }
.tag-estimate { border: 0.5px solid var(--control); color: var(--estimate); font-weight: 600; }
.tag-cook { background: var(--cook-tint); color: var(--on-accent-tint); }
.tag-done { background: var(--done-tint); color: var(--on-primary-tint); }
.tag-keep { background: var(--keep-by-tint); color: var(--keep-by); }
.tag-soon { border: 1px dashed var(--control); color: var(--ink-2); }

/* Food-group chip: tint ground, group icon, label. Never colour alone. */
.chip { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px 0 7px; border-radius: var(--r-pill); background: var(--g-tint); color: var(--g-on); font: 500 13px/16px var(--font); white-space: nowrap; }
.chip .ic { color: var(--g); width: 15px; height: 15px; }
.chip.lg { height: 34px; padding: 0 14px 0 9px; font-size: 15px; }
.chip.lg .ic { width: 18px; height: 18px; }
button.chip { height: 34px; position: relative; } button.chip::after { content: ""; position: absolute; inset: -7px 0; }

/* Source line: always one tap from the number it explains */
.source { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; font: var(--t-source); letter-spacing: var(--t-source-track); color: var(--ink-3); text-align: left; }
.source .ic { width: 14px; height: 14px; }
button.source { min-height: 48px; }
.source b { color: var(--ink-2); font-weight: 650; }

/* Portion line: one or two people. Initial disc + amount in kitchen units, tabular. */
.por { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.por .who { flex: none; width: 16px; height: 16px; border-radius: 8px; display: inline-grid; place-items: center; font: 600 9px/1 var(--font); align-self: center; }
.por .who.p1 { background: var(--ink); color: var(--bg); }
.por .who.p2 { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink-2); }
.por .amt { font: 500 14px/19px var(--font); font-feature-settings: var(--font-numeric); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.por .amt span { color: var(--ink-3); font-weight: 400; }

/* The tick: the one action in the app. 48 px hit area, 28 px drawn circle, hairline edge. */
.tick { position: relative; flex: none; width: var(--size-tick); height: var(--size-tick); border-radius: 50%; display: grid; place-items: center; color: transparent; --tv: var(--size-tick-visual); }
.tick::before { content: ""; position: absolute; width: var(--tv); height: var(--tv); border-radius: 50%; background: var(--surface); box-shadow: inset 0 0 0 1.25px var(--control); transition: background-color var(--d-fast) var(--ease-standard), box-shadow var(--d-fast) var(--ease-standard); }
.tick .ic { position: relative; --ic: url(../ui-icons/tick.svg); width: calc(var(--tv) * 0.62); height: calc(var(--tv) * 0.62); }
.tick.is-pressed::before { transform: scale(0.9); box-shadow: inset 0 0 0 1.25px var(--primary); }
.tick.is-done::before, .tick[aria-pressed="true"]::before { background: var(--done); box-shadow: none; }
.tick.is-done, .tick[aria-pressed="true"] { color: var(--on-primary); }
.tick:not(.is-done):not([aria-pressed="true"]) .ic { visibility: hidden; }
.tick.is-done::after, .tick[aria-pressed="true"]::after { content: ""; position: absolute; width: var(--tv); height: var(--tv); border-radius: 50%; background: var(--gloss); opacity: 0.6; pointer-events: none; }
.tick.is-partly::before { box-shadow: inset 0 0 0 1.25px var(--partly); background: linear-gradient(135deg, var(--surface) 50%, color-mix(in srgb, var(--partly) 35%, var(--surface)) 50%); }
.tick.is-disabled::before, .tick[disabled]::before { box-shadow: inset 0 0 0 1px var(--line); background: var(--surface-2); }
.tick.compact { width: 48px; height: 48px; --tv: 26px; }
.tick.lg { --tv: 56px; width: 64px; height: 64px; }
.tick.sm { --tv: 22px; width: 24px; height: 24px; }

/* Meal card */
.meal { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 8px 6px 8px 8px; background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--elev-1), var(--elev-rim); transition: transform var(--spring-lift-ms) var(--spring-lift), box-shadow var(--d-base) var(--ease-standard); }
.meal .photo { width: 76px; height: 76px; border-radius: 10px; }
.meal .ph .ic { width: 26px; height: 26px; }
.meal-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.meal-kicker { font: 400 12px/15px var(--font); color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.03em; display: flex; align-items: center; gap: 6px; }
.meal-name { font: 600 16px/21px var(--font); letter-spacing: -0.01em; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 2px; }
.meal.is-pressed { transform: scale(0.985); box-shadow: var(--elev-2), var(--elev-rim); }
.meal.is-focused { outline: 3px solid var(--focus); outline-offset: 2px; }
.meal.is-done .meal-name { color: var(--ink-2); }
.meal.is-done { background: var(--surface); }
.meal.is-sample { box-shadow: none; background: var(--surface); }
.meal.is-sample::before { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 1px dashed var(--control); pointer-events: none; }
.meal.is-disabled { box-shadow: none; background: var(--surface-2); }
.meal .tag-sample { position: absolute; top: 12px; left: 12px; z-index: 1; }
.meal.compact { gap: 10px; padding: 6px 4px 6px 6px; border-radius: 13px; }
.meal.compact .photo { width: 54px; height: 54px; border-radius: 9px; }
.meal.compact .ph .ic { width: 20px; height: 20px; }
.meal.compact .meal-kicker { font-size: 10.5px; line-height: 13px; }
.meal.compact .meal-name { font-size: 15px; line-height: 19px; margin-bottom: 1px; }
.meal.compact .por .amt { font-size: 12.5px; line-height: 16px; }
.meal.compact .por .who { width: 14px; height: 14px; font-size: 8px; }

/* Cook card: sits above the meals on cook days */
.cook-card { display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 12px; border-radius: var(--r-lg); background: var(--cook-tint); color: var(--ink); }
.cook-card .badge { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: var(--cook); color: var(--on-accent); flex: none; }
.cook-card .t { font: 600 15px/20px var(--font); }
.cook-card .s { font: var(--t-footnote); color: var(--ink-2); }
.cook-card.compact { padding: 6px 8px 6px 10px; gap: 10px; border-radius: 14px; }
.cook-card.compact .badge { width: 28px; height: 28px; border-radius: 8px; }

/* Day header counter */
.counter { display: inline-flex; align-items: baseline; gap: 4px; font-feature-settings: var(--font-numeric); }
.counter b { font: var(--t-num-lg); letter-spacing: var(--t-num-lg-track); color: var(--ink); }
.counter span { font: var(--t-subhead); color: var(--ink-3); }
.pips { display: flex; gap: 4px; }
.pips i { width: 14px; height: 3px; border-radius: 2px; background: var(--line); }
.pips i.on { background: var(--done); }

/* Segmented control */
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); padding: 2px; gap: 2px; border-radius: 10px; background: var(--surface-2); }
.seg button { height: 32px; border-radius: 8px; font: 500 13px/18px var(--font); color: var(--ink-2); position: relative; } .seg button::after { content: ""; position: absolute; inset: -8px 0; }
.seg button[aria-pressed="true"] { background: var(--surface-raised); color: var(--ink); font-weight: 600; box-shadow: 0 0 0 0.5px rgba(0,0,0,0.06), 0 2px 6px rgba(0,0,0,0.10); }

/* Stepper */
.stepper { display: inline-flex; align-items: center; border-radius: var(--r-pill); background: var(--surface-2); }
.stepper button { width: 44px; height: 44px; border-radius: 22px; display: grid; place-items: center; color: var(--primary); }
.stepper button[disabled] { color: var(--ink-3); }
.stepper .val { min-width: 76px; text-align: center; font: 600 17px/22px var(--font); font-feature-settings: var(--font-numeric); }

/* Checklist row (Shop) */
.check-row { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 6px 16px; border-bottom: 0.5px solid var(--line); }
.check-row:last-child { border-bottom: 0; }
.box { width: 22px; height: 22px; border-radius: 11px; flex: none; box-shadow: inset 0 0 0 1.25px var(--control); display: grid; place-items: center; color: transparent; }
.box .ic { width: 14px; height: 14px; }
.check-row.is-on .box { background: var(--primary); box-shadow: none; color: var(--on-primary); }
.check-row .name { font: 400 16px/21px var(--font); flex: 1; min-width: 0; }
.check-row .qty { font: 400 15px/20px var(--font); font-feature-settings: var(--font-numeric); color: var(--ink-2); white-space: nowrap; }
.check-row.is-on .name { color: var(--ink-3); text-decoration: line-through; text-decoration-thickness: 1px; }

/* Calendar */
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); row-gap: 2px; }
.cal .dow { text-align: center; font: 600 12px/16px var(--font); color: var(--ink-3); padding-bottom: 6px; }
.day { position: relative; isolation: isolate; height: 44px; display: grid; place-items: center; font: 400 16px/20px var(--font); font-feature-settings: var(--font-numeric); color: var(--ink); }
.day.out { color: var(--ink-3); }
.day.in-reset { background: var(--primary-tint); color: var(--on-primary-tint); font-weight: 650; }
.day.start { border-radius: 23px 0 0 23px; } .day.end { border-radius: 0 23px 23px 0; }
.day.today::after { content: ""; position: absolute; width: 34px; height: 34px; border-radius: 17px; box-shadow: inset 0 0 0 1.5px var(--primary); }
.day.moment { color: var(--on-accent-tint); font-weight: 700; }
.day.moment::before { content: ""; position: absolute; width: 38px; height: 38px; border-radius: 19px; background: var(--accent-tint); z-index: -1; }
.day.moment::after { content: ""; position: absolute; bottom: 4px; width: 5px; height: 5px; border-radius: 3px; background: var(--accent); }
.moment-chip { display: flex; align-items: center; gap: 12px; padding: 10px 12px; min-height: 56px; border-radius: 14px; background: var(--surface); box-shadow: var(--elev-1), var(--elev-rim); }
.moment-chip .mi { width: 32px; height: 32px; border-radius: 8px; background: var(--accent-tint); color: var(--accent); display: grid; place-items: center; flex: none; }
.moment-chip .mt { font: 600 15px/20px var(--font); }
.moment-chip .ms { font: var(--t-footnote); color: var(--ink-3); font-feature-settings: var(--font-numeric); }
.pill-moment { display: inline-flex; align-items: center; gap: 5px; min-height: 34px; padding: 0 14px; border-radius: var(--r-pill); background: var(--surface); box-shadow: inset 0 0 0 0.5px var(--control); font: 500 14px/18px var(--font); position: relative; } .pill-moment::after { content: ""; position: absolute; inset: -7px 0; }
.pill-moment[aria-pressed="true"] { background: var(--ink); color: var(--bg); box-shadow: none; }

/* Progress: days as cells. Followed, partly, elapsed, ahead. No streaks, no red. */
.days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.dcell { aspect-ratio: 1; border-radius: 9px; display: grid; place-items: center; font: 500 13px/1 var(--font); font-feature-settings: var(--font-numeric); position: relative; overflow: hidden; }
.dcell.followed { background: var(--done); color: var(--on-primary); }
.dcell.partly { background: linear-gradient(135deg, color-mix(in srgb, var(--partly) 75%, var(--surface)) 50%, var(--surface) 50%); color: var(--ink); box-shadow: inset 0 0 0 1px var(--partly); }
.dcell.elapsed { background: var(--surface); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line); }
.dcell.today { background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--primary); }
.dcell.ahead { background: transparent; color: var(--ink-3); box-shadow: inset 0 0 0 1px var(--line); border: 0; }
.legend { display: flex; flex-wrap: wrap; gap: 14px; font: var(--t-footnote); color: var(--ink-2); }
.legend i { display: inline-block; width: 14px; height: 14px; border-radius: 4px; vertical-align: -2px; margin-right: 6px; }
.stat { display: flex; flex-direction: column; gap: 2px; }
.stat b { font: var(--t-num-lg); font-weight: 600; letter-spacing: var(--t-num-lg-track); font-feature-settings: var(--font-numeric); }
.stat span { font: var(--t-footnote); color: var(--ink-3); }
.bar { height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; display: flex; }
.bar i { display: block; height: 100%; }

/* Banners and states */
.banner { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 12px; background: var(--notice-tint); color: var(--ink); }
.banner .ic { color: var(--notice); margin-top: 1px; }
.banner .bt { font: 600 15px/20px var(--font); }
.banner .bs { font: var(--t-footnote); color: var(--ink-2); margin-top: 2px; }
.banner.keep { background: var(--keep-by-tint); } .banner.keep .ic { color: var(--keep-by); }
.banner.cook { background: var(--cook-tint); } .banner.cook .ic { color: var(--cook); }
.banner.done { background: var(--done-tint); } .banner.done .ic { color: var(--done); }
.banner.offline { background: var(--surface-2); } .banner.offline .ic { color: var(--ink-2); }
.planned { border: 1px dashed var(--control); border-radius: var(--r-lg); padding: 14px; display: flex; gap: 14px; align-items: flex-start; background: transparent; }
.planned .pi { width: 34px; height: 34px; border-radius: 9px; background: var(--surface-2); color: var(--ink-2); display: grid; place-items: center; flex: none; }
.empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 28px 24px; }
.empty .ei { width: 56px; height: 56px; border-radius: 16px; background: var(--surface-2); display: grid; place-items: center; color: var(--ink-2); }

/* Sheet */
.scrim { position: absolute; inset: 0; background: var(--scrim); z-index: var(--z-scrim); }
.sheet { position: absolute; left: 0; right: 0; bottom: 0; z-index: var(--z-sheet); background: var(--surface); border-radius: var(--r-sheet) var(--r-sheet) 0 0; box-shadow: var(--elev-3), var(--elev-rim); display: flex; flex-direction: column; overflow: hidden; }
.grabber { width: 36px; height: 5px; border-radius: 3px; background: var(--control); margin: 6px auto 4px; flex: none; opacity: 0.5; }

/* Celebration: food-group confetti as soft discs, settles to a still frame */
.confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.confetti i { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--g); opacity: 0.9; }
.confetti i.sq { border-radius: 3px; }
.halo { position: absolute; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--done) 26%, transparent), transparent); pointer-events: none; }

/* Portion illustration tile */
.portion-tile { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 8px 12px; border-radius: 14px; background: var(--surface); box-shadow: var(--elev-1), var(--elev-rim); }
.portion-tile .ic { width: 44px; height: 44px; color: var(--ink); }
.portion-tile b { font: 600 14px/18px var(--font); }
.portion-tile span { font: var(--t-footnote); color: var(--ink-3); text-align: center; }

/* Share card */
.share { position: relative; width: 270px; height: 480px; border-radius: 22px; overflow: hidden; display: flex; flex-direction: column; background: var(--bg); box-shadow: var(--elev-2); }

/* ---------------- Motion ---------------- */
@keyframes rs-tick-pop { from { transform: scale(0.82); } to { transform: scale(1); } }
@keyframes rs-check-draw { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes rs-sheen { from { transform: translateX(-120%) rotate(20deg); } to { transform: translateX(160%) rotate(20deg); } }
@keyframes rs-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes rs-settle { from { opacity: 0; transform: scale(1.04); filter: saturate(0.6); } to { opacity: 1; transform: scale(1); filter: saturate(1); } }
.tick.just-done::before { animation: rs-tick-pop var(--spring-tick-ms) var(--spring-tick) both; }
.tick.just-done .ic { animation: rs-check-draw var(--d-base) var(--ease-enter) 60ms both; }
.photo img.settle { animation: rs-settle var(--d-settle) var(--ease-enter) both; }
@media (prefers-reduced-motion: reduce) {
  .tick.just-done::before { animation: rs-fade-in 120ms linear both; }
  .tick.just-done .ic { animation: none; }
  .meal, .btn { transition: none; }
  .photo img.settle { animation: rs-fade-in 120ms linear both; }
}