/* mise — meal planner */

/* ---------- fonts and tokens ---------- */
@font-face { font-family:"Newsreader"; font-style:normal; font-weight:400 700; font-display:swap; src:url(assets/fonts/newsreader-roman.woff2) format("woff2"); }
@font-face { font-family:"Newsreader"; font-style:italic; font-weight:400 600; font-display:swap; src:url(assets/fonts/newsreader-italic.woff2) format("woff2"); }
:root {
  --bg:#f4f0e7; --surface:#fffdf9; --surface-2:#ece6d9; --surface-3:#e2dac8; --plate:#f1ece1; --side-bg:#f9f6ee;
  --ink:#1e1b16; --ink-2:#4a453b; --muted:#675f51; --faint:#928a7a;
  --line:#e4ddd0; --line-strong:#d3cab8; --line-control:#8a8272; --hair:rgb(60 44 20 / .10);
  --accent:#2f5233; --accent-hover:#24402a; --accent-press:#1b3320; --accent-soft:#e1eadb; --accent-line:#b7cbae;
  --accent-wash:#e6ecdd; --accent-wash-line:#c8d6bd; --accent-ink:#fff; --accent-glow:rgb(47 82 51 / .22);
  --ok:#3c6a3f; --ok-soft:#e3eedd; --ok-glow:rgb(60 106 63 / .35); --warn:#9a4818; --warn-soft:#f3e8d3; --warn-line:#e3d3b3;
  --glass:#fffdf9ee; --scrim:#2a1f0f73; --shade:rgb(30 27 22 / .8); --shade-soft:rgb(30 27 22 / .4); --light-1:rgb(255 253 249 / .08); --light-2:rgb(255 253 249 / .16);
  --tint-0:#f3e3cf; --tint-0-ink:#8a5a2b; --tint-1:#e6e0f0; --tint-1-ink:#5b4a73; --tint-2:#e3eccf; --tint-2-ink:#4d6b25;
  --tint-3:#f6ecc4; --tint-3-ink:#7a6418; --tint-4:#f6dccf; --tint-4-ink:#9a4a2a;
  --sh-1:0 1px 1px rgb(60 44 20 / .04),0 1px 3px rgb(60 44 20 / .07);
  --sh-2:0 2px 4px rgb(60 44 20 / .05),0 10px 24px -8px rgb(60 44 20 / .16);
  --sh-3:0 6px 12px rgb(60 44 20 / .08),0 28px 64px -14px rgb(60 44 20 / .34);
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  --serif:"Newsreader","Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:40px; --s-8:48px;
  --r-xs:6px; --r-sm:8px; --r:12px; --r-lg:16px; --r-xl:20px;
  --ctl:40px; --ctl-sm:32px;
  --ease:cubic-bezier(.22,1,.36,1); --ease-in:cubic-bezier(.5,0,.75,0); --ease-io:cubic-bezier(.65,0,.35,1); --spring:cubic-bezier(.34,1.45,.64,1);
  --d-press:90ms; --d-hover:160ms; --d-state:220ms; --d-move:320ms;
  --t-ctl:background-color var(--d-hover) var(--ease),border-color var(--d-hover) var(--ease),color var(--d-hover) var(--ease),box-shadow var(--d-hover) var(--ease),transform var(--d-hover) var(--ease);
  --t-card:border-color var(--d-hover) var(--ease),box-shadow var(--d-hover) var(--ease),background-color var(--d-hover) var(--ease),color var(--d-hover) var(--ease),transform var(--d-press) var(--ease);
  --side:220px;
}
@media (pointer:coarse) { :root { --ctl:44px; --ctl-sm:36px; } }

/* ---------- base ---------- */
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; color:var(--ink); background:var(--bg); font:15px/1.5 var(--font); font-synthesis:none; -webkit-font-smoothing:antialiased; }
input { font:inherit; color:inherit; }
button { font:inherit; color:inherit; border:0; background:none; cursor:pointer; padding:0; -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
button:disabled,[aria-disabled="true"] { cursor:default; }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
h1 { margin:0; font:500 44px/1.04 var(--serif); letter-spacing:-.022em; text-wrap:balance; }
h2 { margin:0; font:500 28px/1.12 var(--serif); letter-spacing:-.012em; text-wrap:balance; }
h3 { margin:0; font:500 20px/1.2 var(--serif); letter-spacing:-.01em; }
p { margin:0; text-wrap:pretty; }
b,strong { font-weight:600; }
svg { width:18px; height:18px; flex:none; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
svg:not(.ring) :is(path,circle,rect,line) { vector-effect:non-scaling-stroke; }
img { display:block; max-width:100%; }
img.is-broken { visibility:hidden; }
::placeholder { color:var(--muted); opacity:1; }
[hidden] { display:none !important; }
::selection { background:var(--accent-soft); }
.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; }
.skip-link { position:fixed; top:var(--s-2); left:var(--s-2); z-index:500; padding:var(--s-3) var(--s-4); border-radius:var(--r-sm); background:var(--ink); color:var(--accent-ink); transform:translateY(-200%); }
.skip-link:focus { transform:none; }

/* ---------- buttons ---------- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:var(--s-2); min-height:var(--ctl); padding:0 var(--s-4); border:1px solid var(--line-strong); border-radius:var(--r-sm); background:var(--surface); font-size:14px; font-weight:500; white-space:nowrap; transition:var(--t-ctl); }
.btn svg { width:16px; height:16px; }
.btn-primary { background:var(--accent); border-color:var(--accent); color:var(--accent-ink); font-weight:600; box-shadow:inset 0 1px 0 var(--light-2),var(--sh-1); }
.btn-quiet { border-color:transparent; background:transparent; color:var(--ink-2); }
.btn-sm { min-height:var(--ctl-sm); padding:0 var(--s-3); font-size:13px; }
.btn.is-on { background:var(--accent-soft); border-color:var(--accent-line); color:var(--accent); font-weight:600; }
.btn.is-warn svg { color:var(--warn); }
.btn.is-warn .n { color:var(--warn); font-weight:600; font-variant-numeric:tabular-nums; }
.icon-btn { display:grid; place-items:center; width:var(--ctl-sm); height:var(--ctl-sm); border-radius:var(--r-sm); color:var(--ink-2); transition:var(--t-ctl); }
.count { font-size:14px; color:var(--muted); font-variant-numeric:tabular-nums; }
.kicker { margin-bottom:6px; font:italic 400 17px/1.25 var(--serif); color:var(--muted); }

.status { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; white-space:nowrap; }
.status::before { content:""; flex:none; width:6px; height:6px; border-radius:50%; background:currentColor; }
.status.ok { color:var(--ok); }
.status.miss { color:var(--ink-2); }
.status.miss::before { background:var(--warn); }
.meal-card .status.miss,.pc-sub .status.miss { color:var(--muted); font-weight:500; }

/* hover only where a pointer can hover; pressed and focus states below work everywhere */
@media (hover:hover) {
  .btn:hover { background:var(--surface-2); }
  .btn-primary:hover { background:var(--accent-hover); border-color:var(--accent-hover); }
  .btn-quiet:hover { background:var(--surface-2); }
  .btn.is-on:hover { background:var(--accent-soft); }
  .icon-btn:hover { background:var(--surface-2); color:var(--ink); }
}
.icon-btn:disabled { opacity:.35; background:none; }

/* pressed: controls shrink a little, cards a little less; every control carries --t-ctl and every card --t-card */
.btn:active,.tab:active,.filter:active,.need-chip:active,.timer-pill:active,.check-btn:active,.card-x:active,.pi-x:active,.toast-undo:active { transform:scale(.97); transition-duration:var(--d-press); }
.btn-primary:active { background:var(--accent-press); border-color:var(--accent-press); }
.icon-btn:active,.timer-reset:active,.detail-back:active { background:var(--surface-3); transform:scale(.97); transition-duration:var(--d-press); }
.recipe-card:active,.prep-item:active,.pop-cell:active,.ing-chip:not([aria-disabled="true"]):active,.empty-slot:active,.meal-card:active:not(.is-drag,.is-holding) { transform:scale(.985); }

/* ---------- ingredient avatars (size with --ia) ---------- */
.ia { position:relative; flex:none; display:block; width:var(--ia,28px); height:var(--ia,28px); border-radius:50%; background:var(--surface-3); overflow:hidden; }
.ia .ingredient-photo,.ia .ingredient-fallback { width:100%; height:100%; border-radius:50%; object-fit:cover; font-size:calc(var(--ia,28px) * .42); }
.ia img { transform:scale(1.2); filter:sepia(.15) saturate(.85); }
.ia::after { content:""; position:absolute; inset:0; border-radius:50%; box-shadow:inset 0 0 0 1px var(--hair); pointer-events:none; }
.ia.miss { outline:1.5px dashed var(--warn); outline-offset:2px; }
.ia-row { display:flex; flex-wrap:wrap; gap:7px; padding:2px; }
.ia-stack { display:flex; align-items:center; }
.ia-stack .ia { box-shadow:0 0 0 2px var(--surface); }
.ia-stack .ia + .ia { margin-left:calc(var(--ia,28px) * -.28); }

/* ---------- shell ---------- */
.app { min-height:100vh; }
.sidebar { position:fixed; inset:0 auto 0 0; display:flex; flex-direction:column; width:var(--side); padding:var(--s-6) var(--s-4) var(--s-5); border-right:1px solid var(--line); background:var(--side-bg); z-index:40; }
.brand { padding:0 var(--s-3); }
.brand-name { display:block; font:italic 500 32px/1 var(--serif); letter-spacing:-.02em; }
.tabs { position:relative; display:flex; flex-direction:column; gap:2px; margin-top:var(--s-6); }
.tab-pill { position:absolute; left:0; top:0; width:var(--tw,0); height:var(--th,0); border-radius:var(--r-sm); background:var(--surface); box-shadow:0 0 0 1px var(--hair),var(--sh-1); transform:translate(var(--tx,0),var(--ty,0)); transition:transform var(--d-move) var(--ease),width var(--d-move) var(--ease),height var(--d-move) var(--ease); pointer-events:none; }
.tab { position:relative; z-index:1; display:flex; align-items:center; gap:10px; width:100%; min-height:var(--ctl); padding:0 var(--s-3); border-radius:var(--r-sm); font-size:14px; font-weight:500; color:var(--ink-2); text-align:left; transition:var(--t-ctl); }
.tab.is-active { color:var(--ink); font-weight:600; }
.tab-ico { width:18px; height:18px; transition:background-color var(--d-hover) var(--ease); }
.tab.is-active .tab-ico { color:var(--accent); }
.nav-count { margin-left:auto; min-width:22px; padding:1px 6px; border:1px solid var(--hair); border-radius:99px; background:var(--surface); font-size:12px; font-weight:600; text-align:center; font-variant-numeric:tabular-nums; }
.nav-count.bump { animation:bump .36s var(--spring); }
@keyframes bump { from { transform:scale(1.4); } }
.side-stats { margin-top:auto; padding:var(--s-4) var(--s-3) 0; border-top:1px solid var(--line); }
.stat { display:grid; gap:var(--s-1); }
.stat-label { font-size:12px; font-weight:500; color:var(--muted); }
.stat-value { font-family:var(--serif); font-size:26px; line-height:1.1; font-weight:500; letter-spacing:-.01em; font-variant-numeric:tabular-nums; }
.stat-value small { font-family:var(--font); font-size:13px; font-weight:400; letter-spacing:0; color:var(--muted); }
.stat-bar { display:block; height:6px; margin-top:var(--s-2); background:var(--surface-3); overflow:hidden; -webkit-mask-image:repeating-linear-gradient(90deg,black 0 calc(100% / 21 - 2px),transparent 0 calc(100% / 21)); mask-image:repeating-linear-gradient(90deg,black 0 calc(100% / 21 - 2px),transparent 0 calc(100% / 21)); }
.stat-bar span { display:block; height:100%; background:var(--accent); transition:width var(--d-move) var(--ease); }
@media (hover:hover) {
  .tab:not(.is-active):hover { background:var(--surface-2); color:var(--ink); }
}

.stage { margin-left:var(--side); padding:var(--s-6) var(--s-7) 56px; min-width:0; }
.view { display:none; max-width:1480px; margin-inline:auto; }
.view.is-active { display:block; animation:viewIn .26s var(--ease); }
.vt .view.is-active { animation:none; }
@keyframes viewIn { from { opacity:0; transform:translateY(6px); } }
#view-fridge { max-width:1160px; }
.page-head { display:flex; align-items:flex-end; align-items:last baseline; justify-content:space-between; gap:var(--s-4); margin-bottom:var(--s-6); }
.head-actions { display:flex; gap:var(--s-2); }

/* ---------- today ---------- */
.today { margin-bottom:var(--s-7); }
.today-head { display:flex; align-items:baseline; gap:10px; margin-bottom:var(--s-3); }
.today-day { font:italic 400 17px/1.25 var(--serif); color:var(--muted); }
.today-total { margin-left:auto; font-size:13px; color:var(--muted); font-variant-numeric:tabular-nums; }
.today-slots { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface); box-shadow:var(--sh-1); overflow:hidden; }
.today-slot { display:flex; min-width:0; }
.today-slot + .today-slot { border-left:1px solid var(--line); }
.today-photo { position:relative; flex:none; display:block; width:clamp(112px,32%,148px); align-self:stretch; background:var(--surface-2); overflow:hidden; }
.today-photo img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.today-photo::after { content:""; position:absolute; inset:0; box-shadow:inset -1px 0 0 var(--hair); pointer-events:none; }
.today-photo:active img { transform:scale(1.03); transition-duration:var(--d-state); }
.today-info { display:flex; flex-direction:column; flex:1; min-width:0; padding:14px var(--s-4); }
.today-label { display:flex; align-items:center; gap:5px; font-size:12px; color:var(--muted); }
.today-label svg { width:13px; height:13px; }
.today-label b { font-weight:600; color:var(--ink-2); }
.today-info h3 { margin:var(--s-1) 0 var(--s-2); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; text-wrap:balance; }
.today-have { display:grid; gap:6px; --ia:24px; }
.today-lines { display:grid; gap:2px; }
.today-line,.today-ok { font-size:13px; line-height:1.4; }
.today-line { color:var(--muted); }
.today-line b { font-weight:600; color:var(--ink-2); }
.today-listed { white-space:nowrap; }
.today-ok { display:flex; align-items:center; gap:6px; color:var(--ok); }
.today-ok svg { width:14px; height:14px; stroke-width:2; }
.today-actions { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:auto; padding-top:var(--s-3); }
.today-onlist { display:inline-flex; align-items:center; gap:var(--s-1); font-size:12px; color:var(--muted); }
.today-onlist svg { width:14px; height:14px; }
.today-slot.is-empty { flex-direction:column; align-items:flex-start; gap:var(--s-1); padding:14px var(--s-4); }
.today-none { margin-bottom:auto; padding:var(--s-1) 0 var(--s-3); font:italic 400 17px/1.25 var(--serif); color:var(--muted); }
@media (hover:hover) {
  .today-photo:hover img { transform:scale(1.03); }
}

/* ---------- board ---------- */
.week-head { display:flex; align-items:baseline; justify-content:space-between; gap:var(--s-3); margin-bottom:var(--s-5); }
.planned-text { font-size:13px; color:var(--muted); font-variant-numeric:tabular-nums; }
.board { display:grid; grid-template-columns:28px repeat(7,minmax(0,1fr)); gap:20px var(--s-3); }
.board-corner { grid-column:1; grid-row:1; }
.board-today { grid-column:calc(var(--d) + 2); grid-row:1 / span 4; margin:-10px calc(var(--s-2) * -1); border-radius:var(--r-lg); background:var(--accent-wash); box-shadow:inset 0 0 0 1px var(--accent-wash-line); pointer-events:none; }
.day-head { grid-column:calc(var(--d) + 2); grid-row:1; align-self:end; display:grid; grid-template-columns:auto 1fr; grid-template-areas:"name name" "date load"; align-items:center; margin-bottom:-6px; }
.day-name { grid-area:name; font-size:12px; font-weight:500; color:var(--muted); }
.day-date { grid-area:date; display:grid; align-items:center; min-height:30px; font:500 22px/1 var(--serif); font-variant-numeric:lining-nums; }
.day-load { grid-area:load; justify-self:end; font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums; white-space:nowrap; }
.day-head.is-past .day-date { color:var(--muted); }
.day-head.is-today .day-name { color:var(--accent); font-weight:600; }
.day-head.is-today .day-date { place-items:center; width:30px; border-radius:50%; background:var(--accent); color:var(--accent-ink); }
.day-head.is-today .day-load { color:var(--accent); font-weight:600; }
.slot-label { grid-column:1; grid-row:calc(var(--s) + 2); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--s-2); font-size:12px; font-weight:500; color:var(--ink-2); }
.slot-label svg { width:14px; height:14px; }
.slot-label span { writing-mode:vertical-rl; transform:rotate(180deg); white-space:nowrap; }
.slot { grid-column:calc(var(--d) + 2); grid-row:calc(var(--s) + 2); align-self:start; min-width:0; margin:calc(var(--s-1) * -1); padding:var(--s-1); border-radius:var(--r-lg); transition:box-shadow var(--d-hover) var(--ease),background-color var(--d-hover) var(--ease); }
.slot.is-over { background:var(--accent-soft); box-shadow:0 0 0 2px var(--accent); }
.slot.is-over .card-photo,.slot.is-over .card-body { opacity:.55; }
.meal-card { position:relative; display:flex; flex-direction:column; container-type:inline-size; border-radius:var(--r); cursor:grab; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; transition:var(--t-card); }
.meal-card:focus-visible { outline-offset:4px; }
.card-photo { position:relative; aspect-ratio:4/3; border-radius:var(--r); background:var(--surface-2); box-shadow:var(--sh-1); overflow:hidden; transition:box-shadow var(--d-hover) var(--ease),opacity var(--d-hover) var(--ease); }
.card-photo::after { content:""; position:absolute; inset:0; border-radius:inherit; box-shadow:inset 0 0 0 1px var(--hair); pointer-events:none; }
.meal-photo { width:100%; height:100%; object-fit:cover; pointer-events:none; transition:transform .5s var(--ease); }
.card-body { display:flex; flex-direction:column; gap:var(--s-1); min-width:0; padding:var(--s-2) 2px 0; transition:opacity var(--d-hover) var(--ease); }
.card-name { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font:500 16px/1.2 var(--serif); letter-spacing:-.01em; text-wrap:balance; }
.card-meta { display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-1) 10px; font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums; }
@container (max-width:123px) { .card-meta { flex-direction:column; align-items:flex-start; gap:2px; } }
@container (max-width:112px) { .card-name { -webkit-line-clamp:3; } }
.prep-tag { position:absolute; left:var(--s-2); bottom:var(--s-2); display:grid; place-items:center; width:26px; height:26px; border-radius:50%; background:var(--glass); box-shadow:var(--sh-1); color:var(--accent); }
.prep-tag svg { width:14px; height:14px; }
.card-x { position:absolute; top:var(--s-2); right:var(--s-2); display:grid; place-items:center; width:28px; height:28px; border-radius:var(--r-sm); background:var(--glass); box-shadow:var(--sh-1); color:var(--ink); opacity:0; transition:var(--t-ctl),opacity var(--d-hover) var(--ease); }
.card-x svg { width:15px; height:15px; }
.meal-card:focus-within .card-x,.card-x:focus-visible { opacity:1; }
.meal-card.is-holding { transform:scale(.97); transition:transform var(--d-move) var(--ease-io); }
.meal-card.is-holding .card-photo { box-shadow:var(--sh-2); }
.meal-card.is-drag { position:fixed; z-index:120; margin:0; overflow:hidden; background:var(--surface); box-shadow:var(--sh-3); transform:scale(1.035); transition:none; cursor:grabbing; pointer-events:none; animation:lift var(--d-state) var(--ease); }
.meal-card.is-drag .card-photo { border-radius:0; box-shadow:none; }
.meal-card.is-drag .card-body { padding:var(--s-2) 10px 10px; }
.meal-card.is-drag .card-x { display:none; }
body.dragging-active,body.dragging-active * { user-select:none; cursor:grabbing; }
.slot-ghost { border:1px dashed var(--line-strong); border-radius:var(--r); }
.empty-slot { display:flex; align-items:center; justify-content:center; gap:6px; width:100%; aspect-ratio:4/3; border:1px dashed var(--line-strong); border-radius:var(--r); color:var(--muted); font-size:13px; font-weight:500; transition:var(--t-card); }
.empty-slot svg { width:18px; height:18px; color:var(--faint); }
.slot.is-today .empty-slot { background:var(--surface); }
.slot.is-over .empty-slot { border-color:transparent; background:none; }
.board-help { margin-top:var(--s-5); font-size:13px; color:var(--muted); }
/* drag motion: a dropped card settles into its slot, a swapped card slides across, a prep drop shrinks into its chip, a removed card fades out */
.meal-card.is-settling { z-index:5; animation:settle var(--d-move) var(--ease); }
.meal-card.is-sliding { z-index:4; animation:slide var(--d-move) var(--ease); }
.meal-card.is-settling .card-body,.meal-card.is-sliding .card-body { animation:settle-body var(--d-move) var(--ease); }
.meal-card.is-settling .card-photo,.meal-card.is-sliding .card-photo { animation:settle-photo var(--d-move) var(--ease); }
.meal-card.is-absorbing { animation:absorb var(--d-move) var(--ease-in) forwards; }
body > .is-ghost { position:fixed; z-index:90; margin:0; pointer-events:none; animation:ghost-out var(--d-hover) var(--ease-io) forwards; }
body > .prep-item.is-ghost { z-index:1; }
.prep-item.is-gliding { z-index:2; animation:glide var(--d-move) var(--ease); }
.just-landed { animation:landed .9s ease-out; }
@keyframes lift { from { transform:scale(1); box-shadow:var(--sh-1); } }
@keyframes settle { from { transform:translate(var(--fx),var(--fy)) scale(1.035); background-color:var(--surface); box-shadow:var(--sh-3); } }
@keyframes settle-body { from { padding:var(--s-2) 10px 10px; } }
@keyframes settle-photo { from { border-radius:0; box-shadow:none; } }
@keyframes slide { 0% { transform:translate(var(--fx),var(--fy)); background-color:var(--surface); box-shadow:var(--sh-2); } 70% { background-color:var(--surface); box-shadow:var(--sh-2); } }
@keyframes absorb { to { transform:translate(var(--fx),var(--fy)) scale(var(--fs)); opacity:0; } }
@keyframes glide { from { transform:translate(var(--fx),var(--fy)); } }
@keyframes ghost-out { to { transform:scale(.94); opacity:0; } }
@keyframes landed { from { outline:4px solid var(--accent-glow); } to { outline:4px solid transparent; } }
@media (hover:hover) {
  body:not(.dragging-active) .meal-card:hover .card-photo { box-shadow:var(--sh-2); }
  body:not(.dragging-active) .meal-card:hover .meal-photo { transform:scale(1.03); }
  body:not(.dragging-active) .meal-card:hover .card-x { opacity:1; }
  .card-x:hover { background:var(--ink); color:var(--accent-ink); }
  .empty-slot:hover { color:var(--accent); border-color:var(--accent); background:var(--surface); }
  .empty-slot:hover svg { color:var(--accent); }
}

/* ---------- prep rail ---------- */
.prep-rail { margin-top:var(--s-7); padding-top:var(--s-5); border-top:1px solid var(--line); }
.prep-head { display:flex; align-items:baseline; flex-wrap:wrap; gap:var(--s-1) var(--s-3); margin-bottom:var(--s-4); }
.prep-hint { flex-basis:100%; font-size:13px; color:var(--muted); }
.prep-items { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s-4); }
.prep-item { position:relative; display:flex; align-items:center; gap:var(--s-3); min-width:0; padding:var(--s-3) 52px var(--s-3) var(--s-3); border:1px solid var(--line); border-radius:var(--r); background:var(--surface); box-shadow:var(--sh-1); cursor:pointer; transition:var(--t-card); }
.prep-photo { flex:none; width:56px; height:56px; border-radius:10px; object-fit:cover; background:var(--surface-2); outline:1px solid var(--hair); outline-offset:-1px; }
.pi-text { display:flex; flex-direction:column; gap:2px; min-width:0; }
.pi-name { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font:500 16px/1.2 var(--serif); letter-spacing:-.01em; text-wrap:balance; }
.pi-where { font-size:13px; line-height:1.4; color:var(--muted); }
.pi-miss,.pi-ok { display:flex; align-items:center; gap:var(--s-2); margin-top:var(--s-1); font-size:12px; font-weight:500; }
.pi-miss { color:var(--ink-2); --ia:18px; }
.pi-ok { gap:var(--s-1); color:var(--ok); }
.pi-ok svg { width:13px; height:13px; stroke-width:2; }
.pi-x { position:absolute; top:0; right:var(--s-2); bottom:0; display:grid; place-items:center; width:var(--ctl-sm); height:var(--ctl-sm); margin:auto 0; border-radius:var(--r-sm); color:var(--muted); transition:var(--t-ctl); }
.pi-x svg { width:15px; height:15px; }
.prep-drop { display:flex; align-items:center; justify-content:center; gap:6px; min-height:80px; border:1px dashed var(--line-strong); border-radius:var(--r); font-size:13px; font-weight:500; color:var(--muted); transition:border-color var(--d-hover) var(--ease),background-color var(--d-hover) var(--ease),color var(--d-hover) var(--ease); }
.prep-drop svg { width:18px; height:18px; color:var(--faint); }
.prep-rail.is-over .prep-drop { border-color:var(--accent); background:var(--accent-soft); color:var(--accent); }
.prep-rail.is-over .prep-drop svg { color:var(--accent); }
@media (hover:hover) {
  .prep-item:hover { border-color:var(--line-strong); box-shadow:var(--sh-2); }
  .pi-x:hover { background:var(--surface-2); color:var(--ink); }
}

/* ---------- recipe library ---------- */
.lib-toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-3); margin-bottom:var(--s-5); }
.search { position:relative; display:flex; align-items:center; flex:1 1 260px; max-width:380px; }
.search svg { position:absolute; left:var(--s-3); width:16px; height:16px; color:var(--muted); pointer-events:none; }
.search input { -webkit-appearance:none; appearance:none; width:100%; height:var(--ctl); padding:0 var(--s-3) 0 36px; border:1px solid var(--line-control); border-radius:var(--r-sm); background:var(--surface); font-size:14px; transition:border-color var(--d-hover) var(--ease),box-shadow var(--d-hover) var(--ease); }
.search input::-webkit-search-decoration { -webkit-appearance:none; }
.search input::-webkit-search-cancel-button { -webkit-appearance:none; width:16px; height:16px; margin:0 0 0 var(--s-2); background:var(--muted); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7 7 17'/%3E%3C/svg%3E") center / 16px no-repeat; cursor:pointer; }
.search input:focus { outline:2px solid transparent; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-glow); }
.filters { display:flex; flex-wrap:wrap; gap:6px; }
.filter { position:relative; min-height:36px; padding:0 14px; border:1px solid var(--line); border-radius:99px; background:var(--surface); font-size:13px; font-weight:500; color:var(--ink-2); transition:var(--t-ctl); }
.filter.is-on { background:var(--accent-soft); border-color:var(--accent-line); color:var(--accent); font-weight:600; }
.lib-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:36px var(--s-5); }
.lib-empty,.list-empty { display:flex; flex-direction:column; align-items:center; gap:var(--s-1); padding:var(--s-8) var(--s-4); border:1px dashed var(--line-strong); border-radius:var(--r); text-align:center; }
.lib-empty { grid-column:1/-1; }
.list-empty { padding-block:var(--s-7); }
.le-ico { display:grid; place-items:center; width:36px; height:36px; margin-bottom:var(--s-2); border-radius:50%; background:var(--surface-2); color:var(--ink-2); }
.le-ico svg { width:18px; height:18px; }
.le-title { font:italic 400 20px/1.25 var(--serif); color:var(--ink-2); }
.le-hint { font-size:13px; color:var(--muted); }
.recipe-card { display:flex; flex-direction:column; min-width:0; border-radius:var(--r-lg); text-align:left; transition:var(--t-card); }
.recipe-card:focus-visible { outline-offset:4px; }
.rc-art { position:relative; display:block; aspect-ratio:4/3; border-radius:var(--r-lg); background:var(--surface-2); box-shadow:var(--sh-1); overflow:hidden; transition:box-shadow var(--d-hover) var(--ease); }
.rc-art::after { content:""; position:absolute; inset:0; border-radius:inherit; box-shadow:inset 0 0 0 1px var(--hair); pointer-events:none; }
.rc-photo { display:block; width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.rc-planned { position:absolute; top:var(--s-3); left:var(--s-3); display:inline-flex; align-items:center; gap:var(--s-1); max-width:calc(100% - var(--s-5)); padding:3px 10px 3px var(--s-2); border-radius:var(--r); background:var(--glass); box-shadow:var(--sh-1); font-size:12px; font-weight:600; line-height:16px; color:var(--accent); font-variant-numeric:tabular-nums; }
.rc-planned svg { width:12px; height:12px; }
.rc-body { display:flex; flex-direction:column; gap:var(--s-1); flex:1; padding:var(--s-3) 2px 0; }
.rc-name { font:500 21px/1.2 var(--serif); letter-spacing:-.01em; text-wrap:balance; }
.rc-meta { font-size:13px; color:var(--muted); font-variant-numeric:tabular-nums; }
.rc-have { display:grid; gap:var(--s-2); padding-top:var(--s-2); --ia:30px; }
.rc-miss,.rc-ok { font-size:13px; line-height:1.4; }
.rc-miss { color:var(--ink-2); }
.rc-ok { display:flex; align-items:flex-start; gap:6px; color:var(--ok); }
.rc-ok svg { flex:none; width:14px; height:14px; margin-top:2px; stroke-width:2; }
@media (hover:hover) {
  .search input:hover:not(:focus) { border-color:var(--muted); }
  .filter:hover { background:var(--surface-2); border-color:var(--line-strong); }
  .filter.is-on:hover { background:var(--accent-soft); border-color:var(--accent-line); }
  .recipe-card:hover .rc-art { box-shadow:var(--sh-2); }
  .recipe-card:hover .rc-photo { transform:scale(1.03); }
}

/* ---------- recipe detail ---------- */
.detail { max-width:1160px; margin-inline:auto; }
.detail-back { display:inline-flex; align-items:center; gap:6px; min-height:36px; margin:-6px 0 var(--s-3) -6px; padding:0 var(--s-3) 0 var(--s-2); border-radius:var(--r-sm); font-size:14px; font-weight:500; color:var(--ink-2); transition:var(--t-ctl); }
.detail-back svg { width:16px; height:16px; }
.recipe-heading { display:grid; grid-template-columns:360px minmax(0,1fr); gap:var(--s-8); align-items:center; margin-bottom:var(--s-7); }
.recipe-hero { position:relative; aspect-ratio:1; border-radius:var(--r-xl); background:var(--surface-2); box-shadow:var(--sh-2); overflow:hidden; }
.recipe-hero::after { content:""; position:absolute; inset:0; border-radius:inherit; box-shadow:inset 0 0 0 1px var(--hair); pointer-events:none; }
.hero-photo { width:100%; height:100%; object-fit:cover; }
.recipe-title { min-width:0; }
.recipe-title h1 { font-size:56px; line-height:1.02; letter-spacing:-.025em; }
.hero-facts { display:flex; max-width:520px; margin:var(--s-5) 0 0; padding:0; border-top:1px solid var(--hair); border-bottom:1px solid var(--hair); }
.hero-facts > div { flex:1 1 auto; padding:var(--s-3) 0; }
.hero-facts > div + div { padding-left:var(--s-5); border-left:1px solid var(--hair); }
.hero-facts dt { font-size:12px; font-weight:500; color:var(--muted); }
.hero-facts dd { margin:2px 0 0; font:500 28px/1.1 var(--serif); font-variant-numeric:lining-nums; white-space:nowrap; }
.hero-facts small { font:500 13px/1 var(--font); letter-spacing:0; color:var(--muted); }
.hero-plan { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:var(--s-4); font-size:13px; color:var(--muted); }
.hp-label { margin-right:var(--s-1); }
.plan-chip { padding:3px var(--s-3); border-radius:99px; background:var(--accent-soft); font-weight:600; color:var(--accent); }
.hp-none { font:italic 400 17px/1.25 var(--serif); }
.hero-actions { display:flex; flex-wrap:wrap; gap:var(--s-2); margin-top:var(--s-5); }
::view-transition-group(root) { animation-duration:var(--d-state); animation-timing-function:var(--ease); }
::view-transition-group(recipe-photo) { animation-name:-ua-view-transition-group-anim-recipe-photo,vt-round; animation-duration:.46s; animation-timing-function:var(--ease); overflow:clip; }
@keyframes vt-round { from { border-radius:var(--vt-from,0px); } to { border-radius:var(--vt-to,0px); } }
::view-transition-old(recipe-photo),::view-transition-new(recipe-photo) { width:100%; height:100%; object-fit:cover; }

.recipe-guide { display:grid; gap:var(--s-7); }
.section-head { display:flex; align-items:center; justify-content:space-between; gap:var(--s-3); margin-bottom:var(--s-3); }
.method-panel .section-head { align-items:baseline; }
.servings { display:flex; align-items:center; gap:2px; padding:3px; border:1px solid var(--line-strong); border-radius:var(--r-sm); background:var(--surface); }
.servings .icon-btn svg { width:16px; height:16px; }
.serv-value { min-width:96px; text-align:center; font-size:13px; color:var(--ink-2); font-variant-numeric:tabular-nums; }
.serv-value strong { color:var(--ink); font-size:15px; }
.ing-summary { display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-2) var(--s-3); margin-bottom:var(--s-4); font-size:14px; color:var(--ink-2); }
.scale-note { font-size:12px; color:var(--ink-2); padding:2px var(--s-2); border-radius:99px; background:var(--surface-2); }
.ing-groups { display:grid; gap:var(--s-5); }
.ing-group-title { margin-bottom:var(--s-2); font:600 14px/1.3 var(--font); letter-spacing:0; color:var(--ink-2); }
.ing-group-title .count { margin-left:var(--s-1); font-weight:400; }
.ing-row { display:grid; grid-auto-flow:column; grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:repeat(var(--rows,2),auto); column-gap:var(--s-6); margin-inline:calc(var(--s-3) * -1); }
.ing-chip { position:relative; display:grid; grid-template-columns:52px minmax(0,1fr) auto 76px; align-items:center; column-gap:14px; padding:var(--s-3); border-radius:var(--r); text-align:left; transition:var(--t-card); }
.ing-chip::before { content:""; position:absolute; top:0; left:var(--s-3); right:var(--s-3); height:1px; background:var(--line); }
.ing-art { --ia:52px; }
.ing-art.miss { outline-offset:3px; }
.ing-text { display:flex; flex-direction:column; justify-content:center; gap:2px; min-width:0; }
.ing-name { font:500 19px/1.15 var(--serif); letter-spacing:-.005em; }
.ing-name::first-letter { text-transform:uppercase; }
.ing-chip .q { font-size:13px; line-height:1.35; color:var(--muted); }
.q-basis { font:italic 400 14px/1 var(--serif); }
.gram-target { grid-column:3; font-size:16px; font-weight:600; font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap; }
.unit { font-weight:400; color:var(--muted); }
.ing-state { grid-column:4; display:inline-flex; align-items:center; justify-content:flex-end; gap:var(--s-1); font-size:12px; font-weight:600; color:var(--muted); }
.ing-state svg { width:12px; height:12px; stroke-width:2; }
.ing-chip.has .ing-state { color:var(--ok); }
.ing-chip.missing:not(.in-list) .ing-state { color:var(--warn); }
.ing-chip.just-landed { animation:ing-in .9s ease-out; }
.ing-chip.just-landed .ing-state svg { animation:mark-pop .38s var(--spring); }
@keyframes ing-in { from { background:var(--accent-soft); } }
@keyframes mark-pop { from { transform:scale(.4); } }

.progress-count { font-size:13px; color:var(--muted); font-variant-numeric:tabular-nums; transition:color var(--d-state) var(--ease); }
.progress-count.is-complete { color:var(--ok); font-weight:600; }
.progress-track { height:3px; margin-bottom:var(--s-4); border-radius:2px; background:var(--surface-3); overflow:hidden; }
.progress-fill { height:100%; background:var(--accent); transition:width var(--d-move) var(--ease),background-color var(--d-state) var(--ease); }
.progress-fill.is-complete { background:var(--ok); }
.steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s-4); }
.recipe-guide .steps-count-3 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.steps-count-4 .serve-card { grid-column:span 2; }
.step { position:relative; display:flex; flex-direction:column; min-width:0; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface); box-shadow:var(--sh-1); cursor:pointer; overflow:hidden; transition:border-color var(--d-state) var(--ease),background-color var(--d-state) var(--ease),box-shadow var(--d-state) var(--ease); }
.step.is-current { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent),var(--sh-2); }
.step.is-done { background:var(--surface-2); }
.step-visual { display:flex; align-items:center; justify-content:center; isolation:isolate; height:236px; background:var(--plate); border-bottom:1px solid var(--hair); }
.step-art { width:228px; max-width:100%; aspect-ratio:1; background-size:calc(300% * var(--z,1)) calc(200% * var(--z,1)); background-repeat:no-repeat; mix-blend-mode:darken; opacity:0; transition:opacity .4s var(--ease),filter var(--d-state) var(--ease); }
.step-art.is-in { opacity:1; }
.step.is-done .step-art.is-in { opacity:.45; filter:grayscale(.6); }
.step-body { display:grid; grid-template-columns:32px minmax(0,1fr); grid-template-areas:"check text" ". amounts" ". controls"; align-content:start; gap:var(--s-2) var(--s-3); flex:1; padding:var(--s-4) 18px 18px; }
.step-check { grid-area:check; position:relative; display:grid; place-items:center; width:32px; height:32px; border-radius:50%; border:1.5px solid var(--line-control); color:var(--ink-2); transition:background-color var(--d-state) var(--ease),border-color var(--d-state) var(--ease),color var(--d-state) var(--ease),transform .34s var(--spring); }
.step-index { font:600 15px/1 var(--serif); font-variant-numeric:lining-nums; transition:opacity .12s; }
.step-check svg { position:absolute; width:16px; height:16px; stroke-width:2; }
.step-check svg path { stroke-dasharray:20; stroke-dashoffset:20; transition:stroke-dashoffset .12s var(--ease-in); }
.step.is-current .step-check { border-color:var(--accent); color:var(--accent); }
.step.is-done .step-check { background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
.step.is-done .step-check svg path { stroke-dashoffset:0; transition:stroke-dashoffset .28s var(--ease) .05s; }
.step.is-done .step-index { opacity:0; }
.step:active:not(:has(.timer-wrap:active)) .step-check { transform:scale(.9); transition-duration:var(--d-press); }
.step-text { grid-area:text; align-self:start; padding-top:3px; line-height:1.25; text-wrap:balance; transition:color var(--d-state) var(--ease); }
.step.is-done .step-text { color:var(--muted); }
.step-amounts { grid-area:amounts; display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-1) 6px; }
.step-amount { display:inline-flex; align-items:center; gap:6px; padding:3px 10px 3px 3px; border-radius:14px; background:var(--surface-2); font-size:13px; color:var(--ink-2); --ia:22px; }
.step-amount.is-text { padding-left:10px; }
.step-amount strong { color:var(--ink); font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap; }
.step.is-done .step-amount { background:var(--surface-3); }
.amount-source { font-size:12px; color:var(--muted); margin-right:2px; }
.step-controls { grid-area:controls; }
.step-controls:empty { display:none; }
.timer-wrap { display:flex; align-items:center; gap:var(--s-1); }
.timer-pill { position:relative; display:inline-flex; align-items:center; gap:var(--s-2); height:var(--ctl); padding:0 var(--s-4) 0 9px; border:1px solid var(--line-strong); border-radius:99px; background:var(--surface); font-size:14px; font-weight:600; --glyph:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 10'%3E%3Cpath d='M1 .5v9L8 5z'/%3E%3C/svg%3E"); transition:var(--t-ctl); }
.timer-pill::before { content:""; position:absolute; left:9px; top:50%; width:20px; height:20px; transform:translateY(-50%); background:var(--accent); -webkit-mask:var(--glyph) center / 8px 10px no-repeat; mask:var(--glyph) center / 8px 10px no-repeat; }
.t-label { min-width:38px; font-variant-numeric:tabular-nums; }
.ring { width:20px; height:20px; transform:rotate(-90deg); }
.ring-bg { fill:none; stroke:var(--line-strong); stroke-width:4; }
.ring-fg { fill:none; stroke:var(--accent); stroke-width:4; stroke-dasharray:94.25; transition:stroke-dashoffset 1s linear,stroke var(--d-state) var(--ease); }
.timer-pill:not(.is-running) .ring-fg { transition-duration:.4s,var(--d-state); transition-timing-function:var(--ease); }
.timer-pill.is-running { background:var(--accent); border-color:var(--accent); color:var(--accent-ink); --glyph:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 10'%3E%3Cpath d='M0 0h3v10H0zM5 0h3v10H5z'/%3E%3C/svg%3E"); }
.timer-pill.is-running::before { background:var(--accent-ink); }
.timer-pill.is-running .ring-bg { stroke:var(--accent-ink); stroke-opacity:.25; }
.timer-pill.is-running .ring-fg { stroke:var(--accent-ink); }
.timer-pill.is-finished { background:var(--ok-soft); border-color:var(--ok); color:var(--ok); animation:ripple 2.4s var(--ease-io) 12; --glyph:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
.timer-pill.is-finished::before { background:var(--ok); -webkit-mask-size:12px; mask-size:12px; }
.timer-pill.is-finished .ring-bg { stroke:var(--ok); stroke-opacity:.2; }
.timer-pill.is-finished .ring-fg { stroke:var(--ok); }
@keyframes ripple { from { box-shadow:0 0 0 0 var(--ok-glow); } 70%,to { box-shadow:0 0 0 10px transparent; } }
.timer-reset { display:grid; place-items:center; width:var(--ctl-sm); height:var(--ctl-sm); border-radius:50%; color:var(--muted); transition:var(--t-ctl); }
.timer-reset svg { width:16px; height:16px; }
.serve-card { position:relative; min-height:240px; margin:0; border-radius:var(--r-lg); background:var(--surface-3); box-shadow:var(--sh-1); overflow:hidden; }
.serve-card::after { content:""; position:absolute; inset:auto 0 0; height:60%; background:linear-gradient(to top,var(--shade) 28px,var(--shade-soft) 45%,transparent); pointer-events:none; }
.serve-photo { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.serve-card figcaption { position:absolute; z-index:1; left:var(--s-5); right:var(--s-5); bottom:var(--s-4); display:flex; align-items:baseline; justify-content:space-between; gap:var(--s-3); color:var(--surface); }
.serve-card figcaption span { font:italic 500 24px/1.1 var(--serif); }
.serve-card figcaption small { font-size:13px; font-variant-numeric:tabular-nums; opacity:.85; }
.reset-steps { margin:var(--s-3) 0 0 calc(var(--s-3) * -1); }
.is-scaled :is(.gram-target,.step-amount strong,.serv-value strong,.scale-note,.serve-card small) { animation:num-in .26s var(--ease); }
@keyframes num-in { from { opacity:.3; } }
@media (hover:hover) {
  .detail-back:hover { background:var(--surface-2); color:var(--ink); }
  .ing-chip.missing:not(.in-list):hover { background:var(--warn-soft); }
  .step:hover { border-color:var(--line-strong); }
  .step.is-current:hover { border-color:var(--accent); }
  .step:not(.is-done):hover:not(:has(.timer-wrap:hover)) .step-check { border-color:var(--accent); background:var(--accent-soft); }
  .timer-pill:hover { background:var(--surface-2); }
  .timer-pill.is-running:hover { background:var(--accent-hover); }
  .timer-pill.is-finished:hover { background:var(--ok-soft); }
  .timer-reset:hover { background:var(--surface-2); color:var(--ink); }
}

/* ---------- shopping & fridge ---------- */
.kitchen-layout { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s-7) 56px; align-items:start; }
.panel { min-width:0; }
.panel-head { display:flex; align-items:baseline; gap:var(--s-2); min-height:calc(var(--ctl-sm) + var(--s-3) + 1px); margin-bottom:var(--s-4); padding-bottom:var(--s-3); border-bottom:1px solid var(--line); }
.panel-head .btn { align-self:center; margin:0 calc(var(--s-3) * -1) 0 auto; }
.needs { container-type:inline-size; margin-bottom:var(--s-4); }
.needs-banner { padding:14px var(--s-4); border-radius:var(--r); background:var(--warn-soft); box-shadow:inset 0 0 0 1px var(--warn-line); }
.needs-top { display:flex; align-items:center; justify-content:space-between; gap:var(--s-3); margin-bottom:var(--s-3); font-size:14px; line-height:1.35; }
.needs-top strong { font-weight:600; color:var(--warn); font-variant-numeric:tabular-nums; }
.needs-top .btn { flex:none; }
.needs-chips { display:flex; flex-wrap:wrap; gap:6px; }
.need-chip { --chip:34px; --ia:26px; display:inline-flex; align-items:center; gap:var(--s-2); min-height:var(--chip); padding:0 var(--s-3) 0 calc((var(--chip) - 2px - var(--ia)) / 2); border:1px solid var(--warn-line); border-radius:99px; background:var(--surface); font-size:13px; font-weight:500; white-space:nowrap; transition:var(--t-ctl); }
.need-text::first-letter { text-transform:uppercase; }
.need-amt { font-weight:400; color:var(--muted); font-variant-numeric:tabular-nums; }
.need-chip > svg { width:13px; height:13px; color:var(--warn); }
.needs-ok { display:flex; align-items:flex-start; gap:6px; font-size:14px; font-weight:500; line-height:1.4; color:var(--ok); }
.needs-ok svg { width:16px; height:16px; margin-top:2px; stroke-width:2; }
/* a narrow column keeps the chips in one row that scrolls sideways, fading out at the right edge */
@container (max-width:440px) {
  .needs-chips { flex-wrap:nowrap; margin-inline:calc(var(--s-4) * -1); padding:var(--s-1) calc(var(--s-4) + 36px) var(--s-1) var(--s-4); overflow-x:auto; overscroll-behavior-x:contain; scroll-padding-inline:var(--s-4) calc(var(--s-4) + 36px); scrollbar-width:thin; scrollbar-color:var(--warn-line) transparent; -webkit-mask-image:linear-gradient(90deg,black calc(100% - 36px),transparent); mask-image:linear-gradient(90deg,black calc(100% - 36px),transparent); }
  .need-chip { flex:none; }
}
.add-row { display:flex; gap:var(--s-2); margin-bottom:var(--s-2); }
.add-row .btn { padding:0 14px; }
.add-row input { flex:1; min-width:0; height:var(--ctl); padding:0 var(--s-3); border:1px solid var(--line-control); border-radius:var(--r-sm); background:var(--surface); font-size:14px; text-overflow:ellipsis; transition:border-color var(--d-hover) var(--ease),box-shadow var(--d-hover) var(--ease); }
.add-row input:focus { outline:2px solid transparent; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-glow); }
.add-row input:not(:placeholder-shown) ~ .btn { background:var(--accent); border-color:var(--accent); color:var(--accent-ink); font-weight:600; box-shadow:inset 0 1px 0 var(--light-2),var(--sh-1); }
.add-row input:not(:placeholder-shown) ~ .btn:active { background:var(--accent-press); border-color:var(--accent-press); }
.item-list { display:flex; flex-direction:column; }
.item { position:relative; display:flex; align-items:center; gap:var(--s-3); min-width:0; min-height:64px; margin-inline:calc(var(--s-2) * -1); padding:var(--s-2); border-radius:var(--r); }
.item::after { content:""; position:absolute; left:var(--s-2); right:var(--s-2); bottom:0; height:1px; background:var(--line); pointer-events:none; }
.item:last-child::after { display:none; }
.item-thumb { --ia:44px; }
.ingredient-photo { width:100%; height:100%; object-fit:cover; }
.ingredient-fallback { display:grid; place-items:center; width:100%; height:100%; background:var(--tint,var(--surface-3)); color:var(--tint-ink,var(--ink-2)); font:italic 500 15px/1 var(--serif); }
.ingredient-fallback[data-t="0"] { --tint:var(--tint-0); --tint-ink:var(--tint-0-ink); }
.ingredient-fallback[data-t="1"] { --tint:var(--tint-1); --tint-ink:var(--tint-1-ink); }
.ingredient-fallback[data-t="2"] { --tint:var(--tint-2); --tint-ink:var(--tint-2-ink); }
.ingredient-fallback[data-t="3"] { --tint:var(--tint-3); --tint-ink:var(--tint-3-ink); }
.ingredient-fallback[data-t="4"] { --tint:var(--tint-4); --tint-ink:var(--tint-4-ink); }
.item-info { display:flex; flex-direction:column; gap:2px; flex:1; min-width:0; }
.item-name { font:500 17px/1.25 var(--serif); letter-spacing:-.005em; overflow-wrap:anywhere; }
.item-sub { display:flex; flex-wrap:wrap; align-items:center; gap:2px var(--s-3); font-size:13px; line-height:1.4; color:var(--muted); }
.item-sub:empty { display:none; }
.item-qty { font-variant-numeric:tabular-nums; }
.item-for { display:inline-flex; align-items:center; gap:6px; }
.dish-stack { display:inline-flex; }
.dish-stack img { width:20px; height:20px; border-radius:50%; object-fit:cover; background:var(--surface-3); box-shadow:0 0 0 2px var(--bg); }
.dish-stack img + img { margin-left:-6px; }
.item-actions { display:flex; flex:none; gap:2px; }
.x-btn,.move-btn { color:var(--muted); }
.x-btn svg,.move-btn svg { width:16px; height:16px; }
.check-btn { position:relative; flex:none; display:grid; place-items:center; width:24px; height:24px; border:1.5px solid var(--line-control); border-radius:50%; color:var(--accent-ink); transition:var(--t-ctl); }
.check-btn::after { content:""; position:absolute; top:50%; left:50%; width:44px; height:44px; transform:translate(-50%,-50%); }
.check-btn svg { width:14px; height:14px; stroke-width:2; }
.check-btn svg path { stroke-dasharray:20; stroke-dashoffset:20; }
.item.is-checking .check-btn { background:var(--accent); border-color:var(--accent); }
.item.is-checking .check-btn svg path { stroke-dashoffset:0; transition:stroke-dashoffset .26s var(--ease) .04s; }
.item.is-checking .item-name { color:var(--muted); }
.item.is-leaving { overflow:hidden; pointer-events:none; animation:row-out var(--d-state) var(--ease-io) forwards; }
.item.just-landed { animation:row-in .9s ease-out; }
@keyframes row-out { from { max-height:var(--h,64px); } to { max-height:0; min-height:0; padding-block:0; opacity:0; } }
@keyframes row-in { from { background:var(--accent-soft); } }
@media (hover:hover) {
  .need-chip:hover { border-color:var(--warn); }
  .add-row input:hover:not(:focus) { border-color:var(--muted); }
  .add-row input:not(:placeholder-shown) ~ .btn:hover { background:var(--accent-hover); border-color:var(--accent-hover); }
  .check-btn:hover { border-color:var(--accent); background:var(--accent-soft); }
  .x-btn:hover { color:var(--warn); background:var(--warn-soft); }
}

/* ---------- popover ---------- */
.popover { position:fixed; inset:0; z-index:200; display:grid; place-items:center; padding:var(--s-5); background:var(--scrim); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); opacity:0; transition:opacity var(--d-hover) ease-out; }
.popover.is-open { opacity:1; transition:opacity .3s var(--ease); }
.pop-card { display:flex; flex-direction:column; width:min(720px,100%); max-height:86vh; max-height:86dvh; padding:26px 28px 0; border-radius:var(--r-xl); background:var(--surface); box-shadow:var(--sh-3); overflow:hidden; transform:translateY(14px) scale(.985); transition:transform var(--d-hover) var(--ease-in); }
.pop-card.is-week { width:min(960px,100%); }
.popover.is-open .pop-card { transform:none; transition:transform .3s var(--ease); }
.pop-head { --pt:28px; display:flex; justify-content:space-between; align-items:flex-start; gap:var(--s-3); margin-bottom:var(--s-4); }
.pop-head h3 { font-size:var(--pt); line-height:1.1; text-wrap:balance; }
.pop-sub { margin-top:6px; font-size:14px; color:var(--muted); }
.pop-close { flex:none; margin:calc((var(--pt) * 1.1 - var(--ctl-sm)) / 2 - 1.5px) calc(var(--ctl-sm) / -2 + 3px) 0 0; }
.pop-close:focus-visible { outline-offset:-2px; }
.pop-search { max-width:none; flex:none; margin-bottom:var(--s-4); }
.pop-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(136px,1fr)); grid-auto-rows:max-content; align-content:start; gap:var(--s-5) 14px; margin:-6px calc(var(--s-2) * -1) 0; padding:6px var(--s-2) 28px; overflow:auto; overscroll-behavior:contain; scroll-padding:var(--s-3) 0; scrollbar-width:thin; scrollbar-color:var(--line-strong) transparent; }
.pop-cell { position:relative; display:flex; flex-direction:column; min-width:0; border-radius:var(--r); text-align:left; transition:var(--t-card); }
.pop-cell:focus-visible { outline-offset:4px; }
.pc-photo,.pc-empty { display:block; width:100%; aspect-ratio:4/3; border-radius:var(--r); transition:box-shadow var(--d-hover) var(--ease),color var(--d-hover) var(--ease); }
.pc-photo { object-fit:cover; background:var(--surface-2); outline:1px solid var(--hair); outline-offset:-1px; }
.pc-empty { display:grid; place-items:center; border:1px dashed var(--line-strong); color:var(--faint); }
.pc-badge { position:absolute; top:6px; right:6px; display:grid; place-items:center; width:22px; height:22px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 2px var(--surface); color:var(--accent-ink); }
.pc-badge svg { width:13px; height:13px; stroke-width:2; }
.pc-text { display:flex; flex-direction:column; gap:2px; min-width:0; padding:var(--s-2) 2px 0; }
.pc-name { font:500 16px/1.2 var(--serif); letter-spacing:-.01em; text-wrap:balance; }
.pc-sub { display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-1) 10px; font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums; }
.pop-empty { grid-column:1/-1; padding:var(--s-5) 0 var(--s-2); font:italic 400 17px/1.3 var(--serif); color:var(--muted); }
.pop-week { --ph:72px; grid-template-columns:88px repeat(7,minmax(0,1fr)); gap:var(--s-2) 6px; margin-top:0; padding-top:0; scroll-padding-top:48px; }
.pw-day { grid-column:calc(var(--d) + 2); grid-row:1; position:sticky; top:0; z-index:2; display:flex; flex-direction:column; gap:1px; padding-bottom:var(--s-1); background:var(--surface); font-size:13px; font-weight:600; line-height:1.3; }
.pw-day.is-today { color:var(--accent); }
.pw-load { font-size:12px; font-weight:400; color:var(--muted); font-variant-numeric:tabular-nums; white-space:nowrap; }
.pw-day.is-today .pw-load { font-weight:600; color:var(--accent); }
.pw-slot { grid-column:1; grid-row:calc(var(--s) + 2); align-self:start; display:flex; align-items:center; gap:6px; height:var(--ph); font-size:12px; font-weight:500; color:var(--ink-2); }
.pw-slot svg { width:14px; height:14px; }
.pop-week .pop-cell { grid-column:calc(var(--d) + 2); grid-row:calc(var(--s) + 2); }
.pop-week .pc-photo,.pop-week .pc-empty { aspect-ratio:auto; height:var(--ph); }
.pop-week .pc-name { min-height:2.4em; font-size:14px; line-height:1.2; }
.pop-week .pop-cell:not(.occupied) .pc-name { min-height:0; font:400 12px/1.4 var(--font); letter-spacing:0; color:var(--muted); }
.pop-cell:focus-visible .pc-photo,.pop-cell.is-current .pc-photo { box-shadow:0 0 0 2px var(--accent); }
.pop-cell:focus-visible .pc-empty { border-color:transparent; box-shadow:0 0 0 2px var(--accent); color:var(--accent); }
@media (hover:hover) {
  .pop-cell:hover .pc-photo { box-shadow:0 0 0 2px var(--accent); }
  .pop-cell:hover .pc-empty { border-color:transparent; box-shadow:0 0 0 2px var(--accent); color:var(--accent); }
}

/* ---------- toast ---------- */
.toast-host { position:fixed; bottom:var(--s-5); left:calc(50% + var(--side) / 2); transform:translateX(-50%); z-index:300; display:flex; flex-direction:column; align-items:center; gap:var(--s-2); max-width:calc(100% - 32px); pointer-events:none; }
.toast { position:relative; overflow:hidden; display:flex; align-items:center; gap:var(--s-3); min-height:44px; padding:var(--s-2) var(--s-4); border-radius:var(--r); background:var(--ink); color:var(--bg); font-size:14px; box-shadow:var(--sh-3),inset 0 0 0 1px var(--light-1); pointer-events:auto; animation:toastIn var(--d-state) var(--ease); transition:transform var(--d-move) var(--ease),opacity var(--d-hover) ease-out; }
.toast.has-undo { padding:6px 6px 6px var(--s-4); }
.toast.has-photo { padding-left:var(--s-2); }
.toast-msg { flex:1; }
.toast-photo { flex:none; width:34px; height:34px; border-radius:var(--r-sm); object-fit:cover; box-shadow:0 0 0 1px var(--light-2); }
.toast-undo { min-height:var(--ctl-sm); padding:0 10px; border-radius:var(--r-xs); color:var(--accent-line); font-weight:600; transition:var(--t-ctl); }
.toast-undo:focus-visible { outline-color:var(--accent-line); }
.toast.has-undo::after { content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--accent-line); opacity:.5; transform-origin:left; animation:toastLife 5s linear forwards; }
.toast.out { opacity:0; transform:translateY(var(--s-1)) scale(.98); transition:opacity var(--d-hover) ease-out,transform var(--d-hover) var(--ease-in); }
@keyframes toastIn { from { opacity:0; transform:translateY(10px) scale(.98); } }
@keyframes toastLife { to { transform:scaleX(0); } }
@media (hover:hover) {
  .toast-undo:hover { background:var(--light-2); }
}

/* ---------- responsive ---------- */
@media (max-width:1280px) {
  .stage { padding:28px 28px var(--s-8); }
  .today-photo { width:clamp(104px,32%,148px); }
  .today-info { padding-inline:14px; }
  .lib-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:1200px) {
  .today-slot:not(.is-empty) { flex-direction:column; }
  .today-photo { width:100%; aspect-ratio:16/9; }
  .today-photo::after { box-shadow:inset 0 -1px 0 var(--hair); }
}
@media (max-width:1100px) {
  :root { --side:84px; }
  .sidebar { align-items:center; width:calc(var(--side) + env(safe-area-inset-left)); padding:var(--s-5) var(--s-2) var(--s-5) calc(var(--s-2) + env(safe-area-inset-left)); }
  .brand { padding:0; }
  .brand-name { font-size:30px; }
  .brand-name .ise,.side-stats { display:none; }
  .tabs { align-items:center; gap:var(--s-1); margin-top:var(--s-5); }
  .tab { flex-direction:column; justify-content:flex-start; gap:var(--s-1); width:60px; min-height:58px; padding:6px 0 var(--s-1); font-size:12px; font-weight:600; color:var(--muted); text-align:center; }
  .tab.is-active { color:var(--accent); }
  .tab-ico { box-sizing:border-box; width:44px; height:28px; padding:var(--s-1) 11px; }
  .tab-txt { line-height:14px; }
  .tab-pill { width:44px; height:28px; border-radius:99px; background:var(--accent-soft); box-shadow:none; transform:translate(calc(var(--tx,0px) + (var(--tw,0px) - 44px) / 2),calc(var(--ty,0px) + 6px)); }
  .nav-count { position:absolute; top:2px; left:calc(50% + var(--s-3)); min-width:18px; padding:0 5px; border:0; background:var(--accent); box-shadow:0 0 0 2px var(--side-bg); color:var(--accent-ink); line-height:18px; }
  .stage { margin-left:calc(var(--side) + env(safe-area-inset-left)); padding-right:calc(28px + env(safe-area-inset-right)); }
  .toast-host { left:calc(50% + (var(--side) + env(safe-area-inset-left)) / 2); }
  .kitchen-layout { column-gap:var(--s-6); }
  .recipe-heading { grid-template-columns:minmax(0,5fr) minmax(0,6fr); gap:var(--s-6); }
  .recipe-hero { aspect-ratio:4/3; }
  .recipe-title h1 { font-size:46px; }
}
@media (max-width:1100px) and (hover:hover) {
  .tab:not(.is-active):hover { background:none; }
  .tab:not(.is-active):hover .tab-ico { border-radius:99px; background:var(--surface-2); }
}
@media (max-width:1000px) {
  .board { grid-template-columns:52px repeat(3,minmax(0,1fr)); grid-template-rows:34px; gap:var(--s-4) var(--s-3); }
  .board-corner { grid-column:1 / -1; grid-row:1 / span 8; align-self:start; position:sticky; top:env(safe-area-inset-top); z-index:7; height:34px; margin:0 -28px; background:linear-gradient(var(--bg) calc(100% - 10px),transparent); pointer-events:none; }
  .board-today { grid-column:1 / -1; grid-row:calc(var(--d) + 2); margin:calc(var(--s-2) * -1) -10px; }
  .day-head { grid-column:1; grid-row:calc(var(--d) + 2); align-self:start; grid-template-columns:1fr; grid-template-areas:"name" "date" "load"; justify-items:start; margin-bottom:0; }
  .day-load { justify-self:start; }
  .slot-label { grid-column:calc(var(--s) + 2); grid-row:1 / span 8; align-self:start; position:sticky; top:env(safe-area-inset-top); z-index:8; height:34px; padding-left:2px; flex-direction:row; justify-content:flex-start; gap:6px; pointer-events:none; }
  .slot-label span { writing-mode:horizontal-tb; transform:none; }
  .slot { grid-column:calc(var(--s) + 2); grid-row:calc(var(--d) + 2); }
  .meal-card,.empty-slot,.card-x { scroll-margin-top:calc(34px + var(--s-4) + env(safe-area-inset-top)); }
  .prep-items { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .prep-drop:nth-child(odd):last-child { grid-column:1 / -1; }
  .steps { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .steps-count-4 .serve-card { min-height:0; aspect-ratio:21 / 9; }
  .ing-row { column-gap:var(--s-3); }
  .ing-chip { grid-template-columns:44px minmax(0,1fr) auto 70px; column-gap:var(--s-3); }
  .ing-art { --ia:44px; }
  .ing-name { font-size:18px; }
}
@media (max-width:809px) {
  .ing-row { grid-auto-flow:row; grid-template-rows:none; grid-template-columns:minmax(0,1fr); }
}
@media (max-width:760px) {
  :root { --side:0px; }
  body { padding-bottom:calc(80px + env(safe-area-inset-bottom)); }
  .sidebar { inset:auto 0 0 0; flex-direction:row; align-items:stretch; width:auto; height:auto; padding:6px calc(var(--s-3) + env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) calc(var(--s-3) + env(safe-area-inset-left)); border-right:0; border-top:1px solid var(--line); background:var(--glass); -webkit-backdrop-filter:saturate(1.5) blur(16px); backdrop-filter:saturate(1.5) blur(16px); }
  .brand { display:none; }
  .tabs { flex:1; flex-direction:row; align-items:stretch; gap:0; margin:0; }
  .tab { flex:1; width:auto; }
  .tab-ico { width:56px; height:30px; padding:5px 19px; }
  .tab-pill { width:56px; height:30px; transform:translate(calc(var(--tx,0px) + (var(--tw,0px) - 56px) / 2),calc(var(--ty,0px) + 6px)); }
  .nav-count { left:calc(50% + 14px); }
  .stage { margin:0; padding:calc(20px + env(safe-area-inset-top)) calc(var(--s-4) + env(safe-area-inset-right)) var(--s-6) calc(var(--s-4) + env(safe-area-inset-left)); }
  h1 { font-size:34px; }
  h2 { font-size:24px; }
  h3 { font-size:18px; }
  .kicker { font-size:16px; }
  .page-head { margin-bottom:var(--s-5); }
  .today { margin-bottom:var(--s-5); }
  .today-slots { grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:min(84%,420px); gap:var(--s-3); margin:0 calc(var(--s-4) * -1); padding:var(--s-1) var(--s-4) var(--s-2); border:0; border-radius:0; background:none; box-shadow:none; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scroll-padding:0 var(--s-4); scrollbar-width:none; }
  .today-slot { scroll-snap-align:start; border-radius:var(--r-lg); background:var(--surface); box-shadow:0 0 0 1px var(--line),var(--sh-1); overflow:hidden; }
  .today-slot + .today-slot { border-left:0; }
  .today-slot:not(.is-empty) { flex-direction:row; }
  .today-photo { width:104px; aspect-ratio:auto; }
  .today-photo::after { box-shadow:inset -1px 0 0 var(--hair); }
  .today-info { padding:var(--s-3) var(--s-3) var(--s-3) 14px; }
  .week-head { flex-direction:column; gap:2px; margin-bottom:var(--s-4); }
  .board { grid-template-columns:44px repeat(3,minmax(0,1fr)); gap:var(--s-4) var(--s-2); }
  .board-corner { margin:0 calc(var(--s-4) * -1); }
  .board-today { margin:-6px calc(var(--s-2) * -1); }
  .day-date { font-size:18px; min-height:26px; }
  .day-head.is-today .day-date { width:26px; }
  .card-body { padding:6px 1px 0; gap:2px; }
  .card-name { font-size:13px; }
  .card-meta > span:first-child { display:none; }
  .card-x { display:none; }
  @container (min-width:150px) { .card-body { padding:var(--s-2) 2px 0; gap:var(--s-1); } .card-name { font-size:16px; } .card-meta > span:first-child { display:inline; } }
  .lib-grid { gap:var(--s-6) var(--s-4); }
  .rc-name { font-size:18px; }
  .rc-have { --ia:24px; }
  .search { max-width:none; flex-basis:100%; }
  .filters { flex-wrap:nowrap; overflow-x:auto; margin:calc(var(--s-1) * -1) calc(var(--s-4) * -1); padding:var(--s-1) var(--s-4); scroll-padding-inline:var(--s-4); scrollbar-width:none; }
  .filter { flex:none; }
  /* the hero bleeds past the stage padding (20px above, 16px at the sides); the pill sits 10px inside its top left corner */
  #detailView { position:relative; }
  .detail-back { position:absolute; z-index:3; top:-10px; left:-6px; min-height:44px; margin:0; padding:0 var(--s-4) 0 var(--s-3); border-radius:99px; background:var(--glass); -webkit-backdrop-filter:saturate(1.5) blur(12px); backdrop-filter:saturate(1.5) blur(12px); box-shadow:0 0 0 1px var(--hair),var(--sh-2); font-weight:600; color:var(--ink); }
  .recipe-heading { grid-template-columns:1fr; gap:0; margin-bottom:var(--s-6); }
  .recipe-hero { aspect-ratio:auto; height:min(75vw,60vh); height:min(75vw,60dvh); margin:calc(-20px - env(safe-area-inset-top)) calc(var(--s-4) * -1 - env(safe-area-inset-right)) 0 calc(var(--s-4) * -1 - env(safe-area-inset-left)); border-radius:0 0 28px 28px; }
  .vt .detail-back { view-transition-name:recipe-back; }
  .recipe-title { padding-top:var(--s-5); }
  .recipe-title h1 { font-size:38px; }
  .hero-facts { max-width:none; }
  .hero-facts > div + div { padding-left:var(--s-4); }
  .hero-actions .btn { flex:1 1 0; }
  .section-head { flex-wrap:wrap; }
  .popover { padding:0; align-items:end; }
  .pop-card,.pop-card.is-week { width:100%; max-height:92vh; max-height:92dvh; padding:20px var(--s-4) 0; border-radius:22px 22px 0 0; transform:translateY(100%); }
  .pop-head { --pt:24px; margin-bottom:var(--s-3); }
  .pop-grid { gap:var(--s-5) var(--s-3); padding-bottom:calc(var(--s-4) + env(safe-area-inset-bottom)); }
  .pop-week { --ph:clamp(52px,12vw,72px); grid-template-columns:48px repeat(3,minmax(0,1fr)); scroll-padding-top:36px; }
  .pw-day { grid-column:1; grid-row:calc(var(--d) + 2); position:static; align-self:start; justify-content:center; height:var(--ph); padding-bottom:0; }
  .pw-slot { grid-row:1; grid-column:calc(var(--s) + 2); position:sticky; top:0; z-index:2; height:auto; padding-bottom:var(--s-2); background:var(--surface); }
  .pop-week .pop-cell { grid-column:calc(var(--s) + 2); grid-row:calc(var(--d) + 2); }
  .toast-host { bottom:calc(84px + env(safe-area-inset-bottom)); }
}
@media (max-width:699px) {
  .kitchen-layout { grid-template-columns:minmax(0,1fr); }
}
/* below 600 the phone layout is complete: stacked head, one column of prep chips, two recipe columns, step rows, a full width toast */
@media (max-width:599px) {
  .page-head { align-items:flex-start; flex-direction:column; gap:var(--s-3); }
  .head-actions { width:100%; }
  .head-actions #goShop { flex:1; min-width:0; white-space:normal; line-height:1.2; }
  .prep-items { grid-template-columns:1fr; }
  .lib-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .steps,.recipe-guide .steps-count-3 { grid-template-columns:1fr; }
  .step { flex-direction:row; align-items:stretch; }
  .step-visual { flex:none; width:clamp(96px,30vw,168px); height:auto; border-bottom:0; border-right:1px solid var(--hair); }
  .step-art { width:100%; }
  .step-body { padding:var(--s-3) var(--s-4) var(--s-3) var(--s-3); }
  .serve-card,.steps-count-4 .serve-card { grid-column:auto; min-height:0; aspect-ratio:2 / 1; }
  .toast-host { left:calc(var(--s-4) + env(safe-area-inset-left)); right:calc(var(--s-4) + env(safe-area-inset-right)); align-items:stretch; max-width:none; transform:none; }
  .toast { min-height:52px; }
}
@media (max-width:389px) {
  .today-slots { grid-auto-columns:88%; }
  .today-photo { width:88px; }
  .head-actions .btn-quiet { padding:0 10px; }
  .step-body { grid-template-areas:"check text" "amounts amounts" "controls controls"; }
}
@media (max-width:359px) {
  .today-photo { width:72px; }
  .today-info { padding:var(--s-3) 10px var(--s-3) var(--s-3); }
  .today-actions .btn-sm { padding:0 10px; }
  .slot-label svg,.pw-slot svg,.dish-stack { display:none; }
  .rc-have { --ia:20px; }
  .rc-have .ia-row { gap:var(--s-1); }
  .add-row { gap:6px; }
  .add-row .btn { padding:0 var(--s-3); }
  .add-row input::placeholder { font-size:14px; }
  .head-actions #goShop svg { display:none; }
}
@media (min-width:1001px) {
  /* the prep drop cell takes what is left of its last row, so it never stands alone at the width of one chip */
  .prep-drop:nth-child(3n+1):last-child { grid-column:1 / -1; }
  .prep-drop:nth-child(3n+2):last-child { grid-column:span 2; }
}
@media (min-width:1800px) {
  .lib-grid { grid-template-columns:repeat(6,minmax(0,1fr)); }
}
@media (pointer:coarse) {
  .card-x { top:6px; right:6px; width:24px; height:24px; border-radius:var(--r-xs); background:var(--ink); background:color-mix(in srgb,var(--ink) 72%,transparent); box-shadow:none; color:var(--accent-ink); opacity:1; }
  /* controls drawn smaller than a finger keep their look and get an invisible --ctl square (44px) centred on them */
  .btn-sm,.icon-btn,.timer-reset { position:relative; }
  :is(.btn-sm,.icon-btn,.timer-reset,.step-check,.filter,.card-x,.pi-x)::after { content:""; position:absolute; top:50%; left:50%; width:max(100%,var(--ctl)); height:max(100%,var(--ctl)); transform:translate(-50%,-50%); }
  .item-actions .move-btn::after { transform:translate(calc(-50% - 3px),-50%); }
  .item-actions .x-btn::after { transform:translate(calc(-50% + 3px),-50%); }
  .card-x svg { width:13px; height:13px; }
  .detail-back { min-height:44px; }
  .search input { font-size:16px; }
  .add-row input { height:48px; font-size:16px; }
  .need-chip { --chip:44px; --ia:32px; }
  .needs-chips { scrollbar-width:none; }
  .toast-undo { min-height:44px; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; }
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*) { animation:none !important; }
  .toast::after { display:none; }
  :is(.btn,.icon-btn,.tab,.filter,.need-chip,.timer-pill,.timer-reset,.detail-back,.check-btn,.toast-undo,.card-x,.pi-x,.recipe-card,.prep-item,.pop-cell,.ing-chip,.empty-slot,.meal-card):active,.meal-card.is-holding,.step:active .step-check { transform:none !important; }
}