:root{
  --paper:#F2F2EE; --ink:#191B17; --surface:#FFFFFF; --edge:#D6D8D0; --muted:#6B7065;
  --ground:#0D0F0C; --type:#F4F5F2;
  --veg:#3C7A4A; --prot:#B03A2E; --grain:#D19A16;
  --focus:#1F5FBF;
  --radius:7px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--paper); color:var(--ink);
  font-family:"Fraunces",Georgia,"Times New Roman",serif;
  font-size:16px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-weight:700; line-height:1.1; margin:0}
button,input,select{font-family:inherit; color:inherit}
button{cursor:pointer}
.tnum{font-variant-numeric:tabular-nums}
img{max-width:100%; display:block}

a{color:inherit}

:focus-visible{outline:3px solid var(--focus); outline-offset:2px}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;}
}

/* ── header ── */
.app-header{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; gap:24px; flex-wrap:wrap;
  padding:14px 20px; border-bottom:2px solid var(--ink);
  background:var(--paper);
}
.app-header .brand{font-weight:700; font-size:18px; margin-right:auto}
.mainnav{display:flex; gap:4px}
.navlink{
  background:none; border:1px solid transparent; border-radius:var(--radius);
  padding:10px 14px; font-size:15px; font-weight:500; color:var(--muted);
  min-height:44px;
}
.navlink[aria-current="page"]{color:var(--ink); border-bottom:3px solid var(--grain); font-weight:600}
.navlink .badge{
  display:inline-block; margin-left:7px; background:var(--ink); color:var(--paper);
  border-radius:var(--radius); padding:1px 8px; font-size:12px; font-weight:600;
}
.navlink .badge[hidden]{display:none}
.unittoggle{display:flex; border:1px solid var(--ink); border-radius:var(--radius); overflow:hidden}
.unittoggle button{
  background:var(--surface); border:none; padding:8px 14px; font-size:13px; font-weight:600;
  min-height:44px;
}
.unittoggle button[aria-pressed="true"]{background:var(--ink); color:var(--paper)}
.unittoggle button + button{border-left:1px solid var(--ink)}

.app-main{max-width:980px; margin:0 auto; padding:24px 20px 80px}

/* ── browse: filters ──
   Sticks just below the header on scroll, so filtering/sorting stays at
   hand without needing to scroll back to the top of a 33-dish list. */
.filters{
  position:sticky; top:var(--header-h, 64px); z-index:40; background:var(--paper);
  display:flex; flex-wrap:wrap; gap:20px; align-items:flex-end;
  padding:14px 0 18px; margin-bottom:20px; border-bottom:1px solid var(--edge);
}
.field{display:flex; flex-direction:column; gap:6px}
.field label{font-size:13px; color:var(--muted); font-weight:500}
.field select{
  border:1px solid var(--edge); background:var(--surface); border-radius:var(--radius);
  padding:9px 10px; font-size:15px; min-height:44px;
}
.field input[type=range]{width:170px; accent-color:var(--ink)}
.chip-toggle{
  display:inline-flex; align-items:center; gap:8px; border:1px solid var(--edge);
  background:var(--surface); border-radius:var(--radius); padding:8px 14px; font-size:14px;
  min-height:44px;
}
.chip-toggle[aria-pressed="true"]{background:var(--ink); color:var(--paper); border-color:var(--ink)}
/* tied to readiness rather than a generic on/off, so it takes the same
   green as the "Ready to cook" tag and the plate bar's vegetable segment */
.ready-toggle[aria-pressed="true"]{background:var(--veg); border-color:var(--veg); color:#fff}

.resultcount{font-size:13px; color:var(--muted); margin-bottom:14px}
.hint{font-size:13.5px; color:var(--muted); margin:6px 0 14px; max-width:60ch}

/* ── pantry: "what's in your kitchen" ── */
.pantry-panel{
  border:1px solid var(--edge); background:var(--surface); border-radius:var(--radius);
  padding:14px 16px; margin-bottom:20px;
}
.pantry-panel summary{
  cursor:pointer; font-weight:600; font-size:15px; min-height:44px; display:flex; align-items:center;
  list-style:revert;
}
.pantry-count{font-size:12.5px; color:var(--muted); font-weight:500; margin-left:8px}
.pantry-group{margin-top:14px}
.pantry-group h4{font-size:12.5px; color:var(--muted); font-weight:600; margin-bottom:8px}
.pantry-group .chips{display:flex; flex-wrap:wrap; gap:7px}
.pantry-group .chip{
  border:1px solid var(--edge); background:var(--paper); color:var(--ink); border-radius:var(--radius);
  padding:8px 13px; font-size:13.5px; min-height:40px;
}
.pantry-group .chip[aria-pressed="true"]{background:var(--veg); border-color:var(--veg); color:#fff}
#pantryClear{margin-top:16px}

/* ── dish cards ── */
.dishlist{display:flex; flex-direction:column; gap:14px}
.dishcard{
  background:var(--surface); border:1px solid var(--edge); border-radius:var(--radius);
  padding:18px; scroll-margin:90px;
}
/* "Surprise me" lands here and pulses a ring outward once */
.dishcard.surprise-hit{border-color:var(--grain); animation:surprisePulse 1s ease-in-out 1}
@keyframes surprisePulse{
  0%{box-shadow:0 0 0 0 rgba(209,154,22,.55)}
  100%{box-shadow:0 0 0 16px rgba(209,154,22,0)}
}
.dishcard-top{display:flex; justify-content:space-between; gap:16px; align-items:flex-start; flex-wrap:wrap}
.dishcard h3{font-size:20px}
.dishcard .blurb{font-size:14.5px; color:var(--muted); margin:8px 0 0; max-width:66ch; line-height:1.5}
.tags{display:flex; flex-wrap:wrap; gap:6px; margin-top:12px}
.tag{
  font-size:12px; border:1px solid var(--edge); border-radius:var(--radius); padding:3px 8px;
  color:var(--muted); background:var(--paper);
}
.tag.diet-nonveg{border-color:var(--prot); color:var(--prot)}
.tag.diet-egg{border-color:var(--grain); color:#8a6300}
.tag.diet-veg{border-color:var(--veg); color:var(--veg)}
.tag.season{border-color:var(--veg); background:var(--veg); color:#fff}
.tag.ready{border-color:var(--veg); color:var(--veg); font-weight:600}
.tag.missing{border-color:var(--muted); color:var(--muted)}
.missingline{font-size:13px; color:var(--muted); margin-top:8px}
.missingline strong{color:var(--ink); font-weight:600}

.platebar{margin-top:14px}
.platebar .bar{display:flex; height:14px; border-radius:2px; overflow:hidden; border:1px solid var(--edge)}
.platebar .seg-veg{background:var(--veg)}
.platebar .seg-prot{background:var(--prot)}
.platebar .seg-grain{background:var(--grain)}
.platebar .key{display:flex; gap:16px; flex-wrap:wrap; font-size:12.5px; color:var(--muted); margin-top:6px}
.platebar .key i{display:inline-block; width:9px; height:9px; border-radius:2px; margin-right:5px; vertical-align:-1px}

.nutriline{font-size:13px; color:var(--muted); margin-top:10px; display:flex; flex-wrap:wrap; gap:10px 16px}
.nutriline .tnum{color:var(--ink); font-weight:600}
.estnote{font-size:11.5px; color:var(--muted); margin-top:6px; font-style:italic}

.dishacts{display:flex; gap:10px; margin-top:16px; flex-wrap:wrap; align-items:flex-end}
/* Its own row, flush with the card's right edge, rather than trailing
   after the buttons wherever they happen to wrap. */
/* Sits on the same row as the three buttons, in the space they leave
   unused, rather than forced onto its own line below — that just left a
   band of empty white space under the buttons for no reason. Only wraps
   if the row genuinely doesn't have room (narrow screens), same as the
   buttons do. */
.dishacts .mini-rating{margin-left:auto}
.btn{
  border:none; border-radius:var(--radius); padding:11px 16px; font-size:14.5px; font-weight:600;
  min-height:44px;
}
.btn-primary{background:var(--ink); color:var(--paper)}
.btn-primary.on{background:var(--veg)}
.btn-secondary{background:var(--surface); color:var(--ink); border:1px solid var(--edge)}
/* "In this week" gets the same on-state treatment as "Add to session" —
   a visible colour change is the whole point of the toggle. */
.btn-secondary.on{background:var(--veg); color:#fff; border-color:var(--veg)}

/* a small red bin icon used everywhere something gets removed */
.icon-btn{
  background:none; border:none; color:var(--prot); padding:8px; border-radius:var(--radius);
  min-height:44px; min-width:44px; display:inline-flex; align-items:center; justify-content:center;
}
.icon-btn:hover{background:var(--paper)}
.icon-btn.small{min-height:28px; min-width:28px; padding:4px; margin-left:6px; vertical-align:middle}

/* the little dot that flies from "Add to session" toward the Cook tab */
.fly-dot{
  position:fixed; width:14px; height:14px; border-radius:50%; background:var(--grain);
  z-index:200; pointer-events:none; transform:translate(-50%,-50%); opacity:1;
  transition:transform .55s cubic-bezier(.2,.8,.3,1), opacity .55s ease;
}
.fly-dot.fly{transform:translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(.35); opacity:0}

.mini-servings{display:inline-flex; align-items:center; gap:6px}
.mini-servings-row{display:inline-flex; align-items:center; gap:6px}
/* In the card's top-right corner rather than crowding the action row below,
   which now also carries the rating stars. */
.dishcard-top .mini-servings{flex-direction:column; align-items:flex-end; gap:4px; flex:0 0 auto}
.mini-rating{display:inline-flex; align-items:center; gap:6px}
.mini-servings-label{font-size:12px; color:var(--muted)}
.mini-serv-btn{
  width:32px; height:32px; border:1px solid var(--edge); background:var(--paper);
  border-radius:var(--radius); font-size:15px; font-weight:700; min-height:32px;
}
.rating-mood{font-size:13px}
.star-row{display:inline-flex; gap:1px}
.star-btn{
  background:none; border:none; padding:2px; font-size:16px; line-height:1;
  color:var(--edge); min-width:22px; min-height:32px;
}
.star-btn.filled{color:var(--grain)}
.approx{color:var(--muted); font-weight:400; font-size:.9em}

.empty{
  background:var(--surface); border:1px dashed var(--edge); border-radius:var(--radius);
  padding:26px 20px;
}
.empty h3{font-size:17px; margin-bottom:6px}
.empty p{margin:0; color:var(--muted); font-size:14.5px; max-width:56ch}

/* ── ingredient rows (used in cook mode + shopping list) ── */
.ing-row{display:flex; align-items:center; gap:12px; padding:8px 0}
.ing-thumb{
  flex:0 0 40px; width:40px; height:40px; border-radius:var(--radius); overflow:hidden;
  background:var(--edge); display:flex; align-items:center; justify-content:center;
  font-size:14px; font-weight:700; color:var(--muted);
}
.ing-thumb img{width:100%; height:100%; object-fit:cover}
.ing-name{flex:1 1 auto; min-width:0}
.ing-name .main{font-size:15px}
.ing-name .alt{font-size:12.5px; color:var(--muted); font-style:italic}
.ing-qty{font-size:14px; color:var(--muted); white-space:nowrap}

/* ── recipe sheet: read-only preview, separate from cook mode ── */
.sheet{position:fixed; inset:0; background:rgba(13,15,12,.5); z-index:60}
.sheet[hidden]{display:none}
.sheet-inner{
  position:absolute; right:0; top:0; bottom:0; width:min(560px,100%);
  background:var(--surface); overflow-y:auto; padding:26px 22px 60px;
}
.sheet-inner h2{font-size:24px; max-width:22ch}
.sheet-close{
  position:sticky; top:0; float:right; background:var(--ink); color:var(--paper);
  border:none; border-radius:var(--radius); width:40px; height:40px; font-size:18px;
}
.sheet-blurb{font-size:15px; color:var(--muted); margin:16px 0 0; max-width:60ch}
h3.section{font-size:13px; color:var(--muted); text-transform:uppercase; letter-spacing:.03em; margin:26px 0 10px}
.sheet-ing-list .ing-row{border-bottom:1px solid var(--paper)}
.ing-status{font-size:12.5px; color:var(--muted); white-space:nowrap; margin-left:8px}
.ing-row.have .ing-status{color:var(--veg); font-weight:600}
.stepslist{padding-left:20px; margin:0}
.stepslist li{margin-bottom:10px; font-size:15px; line-height:1.5}
.stepmin{color:var(--muted); font-size:13px}
.bars{margin-top:4px; display:grid; gap:9px}
.bar2{display:grid; grid-template-columns:88px 1fr 60px; align-items:center; gap:10px; font-size:12.5px}
.bar2 .name{color:var(--muted)}
.bar2 .track{height:8px; background:var(--paper); border-radius:2px; overflow:hidden}
.bar2 .fill{height:100%; background:var(--ink)}
.bar2 .val{text-align:right; color:var(--ink); font-weight:600}
.sheetacts{display:flex; gap:10px; margin-top:22px; flex-wrap:wrap}

/* ── This week ── */
.weeklist{display:flex; flex-direction:column; gap:10px; margin-bottom:28px}
.weekitem{
  display:flex; align-items:center; gap:14px; background:var(--surface);
  border:1px solid var(--edge); border-radius:var(--radius); padding:12px 16px; flex-wrap:wrap;
}
.weekitem .wname{font-weight:600; font-size:15.5px; flex:1 1 auto; min-width:120px}
.servings{display:flex; align-items:center; gap:8px}
.servings button{
  width:36px; height:36px; border:1px solid var(--edge); background:var(--paper);
  border-radius:var(--radius); font-size:16px; font-weight:700;
}
.servings .n{min-width:24px; text-align:center; font-weight:600}

/* ── shopping list: minimal — a name, a small estimate, a blank input ── */
.aisle-group{margin-bottom:26px}
.aisle-group h3{font-size:15px; color:var(--muted); border-bottom:1px solid var(--edge); padding-bottom:8px; margin-bottom:10px}
.shop-row{padding:10px 6px; border-bottom:1px solid var(--paper); border-radius:var(--radius)}
/* Marked "have it" in the pantry — tinted, not removed, since the same
   ingredient might be needed again later in the week than what's on hand
   covers. */
.shop-row.have{background:#FBF3D9}
.shop-havenote{font-size:11px; color:#8a6300; font-weight:600; margin-left:8px}
.shop-note{font-size:11.5px; color:var(--muted); margin-left:2px}
.shop-today-est{font-size:11.5px; color:var(--muted); margin-left:8px}
.shop-row-main{display:flex; align-items:center; gap:8px}
/* Deliberately empty until typed into — the computed estimate only shows
   as the greyed placeholder, never a value, since only the cook knows
   what's already at home. */
.shop-qty-input{
  display:block; width:100%; margin-top:6px;
  font-size:14px; color:var(--ink); border:1px solid var(--edge); border-radius:var(--radius);
  padding:8px 10px; min-height:40px; background:var(--surface);
}
.occ-badge{font-size:11.5px; color:var(--muted); font-weight:500; margin-left:8px}

.listactions{display:flex; gap:10px; margin:20px 0 30px; flex-wrap:wrap}

/* ── cook tab: session staging list ── */
.sessionlist{display:flex; flex-direction:column; gap:12px; margin-top:16px}
.session-item{background:var(--surface); border:1px solid var(--edge); border-radius:var(--radius); padding:16px}
.session-item-top{display:flex; justify-content:space-between; gap:14px; align-items:flex-start}
.session-item h3{font-size:17px}
.pairing{margin-top:12px; padding-top:12px; border-top:1px solid var(--paper); display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:13px; color:var(--muted)}
.sessiontotal{font-size:13.5px; color:var(--muted); margin:16px 0}

/* ── cook mode: all steps visible, any number of dishes side by side ── */
.cook-topbar{display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:8px}
.cook-topbtn{
  background:var(--surface); border:1px solid var(--edge); color:var(--ink);
  border-radius:var(--radius); padding:9px 14px; font-size:13.5px; min-height:44px;
}
.cook-lanes{display:grid; grid-template-columns:1fr; gap:20px; margin-top:16px}
/* Fixed 2 columns rather than auto-fit — a 3rd (or 4th) lane wraps to its
   own row below instead of all of them being squeezed narrower to fit. */
.cook-lanes.multi-lane{grid-template-columns:repeat(2, 1fr)}
@media (max-width:760px){.cook-lanes.multi-lane{grid-template-columns:1fr}}

.cook-lane{
  background:var(--surface); border:1px solid var(--edge);
  border-radius:var(--radius); padding:20px; transition:opacity .2s, background .3s;
}
.cook-lane.idle{opacity:.45}
.cook-lane.finished{opacity:.75}
/* A running timer hitting zero briefly tints its lane — a non-audio cue
   alongside the beep, since the beep can be muted and hands may be elsewhere. */
.cook-lane.flash{animation:flashLane 0.6s ease-in-out 2}
@keyframes flashLane{0%,100%{background:var(--surface)} 50%{background:#FBEBB8}}

/* the one purely celebratory moment in the app, when every lane finishes */
.confetti-burst{position:fixed; top:18%; left:0; width:100%; height:0; z-index:300; pointer-events:none}
.confetti-dot{position:absolute; top:0; width:8px; height:8px; border-radius:2px; animation:confettiFall 1.2s ease-out forwards}
@keyframes confettiFall{
  0%{transform:translate(0,0) rotate(0); opacity:1}
  100%{transform:translate(var(--x), calc(var(--y) + 220px)) rotate(var(--rot)); opacity:0}
}

.lane-head{display:flex; justify-content:space-between; align-items:flex-start; gap:10px}
.lane-title{font-size:21px}
.lane-progress{font-size:13px; color:var(--muted); margin-top:4px}
.lane-servings{margin-top:10px}
.lane-idle-note{font-size:13px; color:#8a6300; margin-top:12px; font-style:italic}
.lane-done-note{color:var(--veg)}

.lane-ing{margin-top:16px; font-size:14px}
.lane-ing summary{cursor:pointer; font-weight:600; padding:8px 0; min-height:44px; display:flex; align-items:center; color:var(--muted)}
.lane-ing .ing-row{border-bottom:1px solid var(--paper)}

.steplist{list-style:none; margin:16px 0 0; padding:0}
.step-row{
  display:flex; flex-wrap:wrap; align-items:flex-start; gap:8px 12px;
  padding:12px 0; border-top:1px solid var(--paper); transition:opacity .2s;
}
.step-row:first-child{border-top:none}
.step-dot{flex:0 0 14px; width:14px; height:14px; border-radius:50%; margin-top:5px; background:var(--edge); border:2px solid var(--muted)}
.step-row.status-yellow .step-dot{background:var(--grain); border-color:var(--grain)}
.step-row.status-green .step-dot{background:var(--veg); border-color:var(--veg)}
/* A quick pop on the marker when a step is marked done, so finishing one
   registers as an event, not just a colour change. */
@keyframes stepPop{0%{transform:scale(1)} 45%{transform:scale(1.7)} 100%{transform:scale(1)}}
.step-row.just-done .step-dot{animation:stepPop .4s ease-out}
.step-text{flex:1 1 220px; font-size:16.5px; line-height:1.45; min-width:140px}
.step-row.status-green .step-text{color:var(--muted); text-decoration:line-through}
.step-control{flex:0 0 auto; display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.step-timer{font-size:16px; font-weight:700; color:#8a6300}
.step-action{
  background:var(--ink); color:var(--paper); border:none; border-radius:var(--radius);
  padding:10px 14px; font-size:13px; font-weight:600; min-height:44px;
}
.step-action.minor{background:none; border:1px solid var(--edge); color:var(--ink); font-size:12px; min-height:40px}

/* ── this week: today / full-week calendar ── */
.subnav{display:flex; gap:4px; border-bottom:1px solid var(--edge); margin:24px 0 16px}
.subnavlink{
  background:none; border:none; border-bottom:3px solid transparent; padding:10px 4px; margin-right:20px;
  font-size:14.5px; font-weight:500; color:var(--muted); min-height:44px;
}
.subnavlink[aria-current="page"]{color:var(--ink); border-bottom-color:var(--grain); font-weight:600}

.dayplan h3{font-size:18px; margin-bottom:10px}
.meal-row{display:flex; gap:14px; align-items:flex-start; padding:10px 0; border-top:1px solid var(--edge)}
.meal-row:first-of-type{border-top:none}
.meal-row h4{font-size:13px; color:var(--muted); font-weight:600; flex:0 0 90px; padding-top:8px}

.weekgrid-wrap{overflow-x:auto; margin-top:4px}
.weekgrid{border-collapse:collapse; width:100%; min-width:640px}
.weekgrid th, .weekgrid td{border:1px solid var(--edge); padding:8px; vertical-align:top; text-align:left}
.weekgrid thead th{font-size:12.5px; color:var(--muted); font-weight:600; background:var(--surface)}
.weekgrid tbody th{font-size:12.5px; color:var(--muted); font-weight:600; white-space:nowrap; background:var(--surface)}
.mealrow-label{display:flex; align-items:center}
.weekgrid td{min-width:110px}

.meal-cell{display:flex; flex-wrap:wrap; gap:6px; align-items:center}
.plan-chip{
  display:inline-flex; align-items:center; gap:5px; background:var(--paper); border:1px solid var(--edge);
  border-radius:var(--radius); padding:4px 6px 4px 10px; font-size:12.5px;
}
.plan-chip button{background:none; border:none; color:var(--muted); font-size:14px; line-height:1; padding:2px 4px}
.plan-add{
  width:32px; height:32px; border:1px dashed var(--edge); background:none; border-radius:var(--radius);
  font-size:16px; color:var(--muted); min-height:32px;
}
.plan-picker{display:flex; flex-wrap:wrap; gap:6px; align-items:center}
.plan-picker select{border:1px solid var(--edge); border-radius:var(--radius); padding:6px; font-size:13px; min-height:36px}

.weekrange{font-size:13px; color:var(--muted); margin-top:2px}

.today-item{display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:8px 0}
.today-name{font-weight:600; font-size:14.5px; flex:1 1 auto; min-width:120px}

/* ── shopping list extras ── */
.shop-buynote{font-size:12px; color:#8a6300; margin-top:6px}
.linklike{background:none; border:none; color:var(--ink); text-decoration:underline; font-size:inherit; padding:0}
.shoplisthead{margin-top:32px}

/* ══════════════════════════════════════════════════════════════
   Phone layout (≤620px)
   The desktop design is unchanged. On a phone the three tabs move out
   of the header into a fixed bottom bar — a thumb reaches the bottom of
   a phone, not the top, and it keeps the sticky header short enough that
   the filter row and the first dish card are both still on screen.
   ══════════════════════════════════════════════════════════════ */
@media (max-width:620px){
  body{padding-bottom:calc(66px + env(safe-area-inset-bottom))}

  .app-header{gap:10px; padding:10px 14px; flex-wrap:nowrap}
  .app-header .brand{font-size:16px; line-height:1.2}
  .unittoggle button{padding:8px 12px}

  /* the tabs, as a bottom bar: three equal thumb-sized targets */
  .mainnav{
    position:fixed; left:0; right:0; bottom:0; z-index:55;
    gap:0; background:var(--paper); border-top:2px solid var(--ink);
    padding-bottom:env(safe-area-inset-bottom);
  }
  .navlink{
    flex:1 1 0; min-width:0; border-radius:0; padding:8px 6px;
    min-height:60px; font-size:13.5px; display:flex; align-items:center;
    justify-content:center; gap:6px; border:none; border-top:3px solid transparent;
  }
  .navlink[aria-current="page"]{border-bottom:none; border-top-color:var(--grain)}
  .navlink .badge{margin-left:0}

  .app-main{padding:16px 14px 28px}

  /* filters: one control per row, full width — no half-width selects
     squeezed against a range slider */
  .filters{gap:12px; padding:12px 0 14px; margin-bottom:16px; align-items:stretch}
  .filters .field{flex:1 1 100%}
  .field select{width:100%}
  .field input[type=range]{width:100%}
  .filters .chip-toggle{flex:1 1 calc(50% - 6px); justify-content:center}

  .pantry-panel{padding:12px 14px}
  .pantry-group .chip{padding:8px 11px}

  .dishcard{padding:14px}
  .dishcard h3{font-size:18.5px}
  .dishcard-top{gap:10px; flex-wrap:nowrap}
  .dishcard-top .mini-servings{gap:2px}
  .dishcard .blurb{font-size:14px}
  .platebar .key{gap:6px 12px; font-size:12px}
  .nutriline{gap:6px 12px}

  /* actions stack to two full-width rows: the buttons, then the stars —
     ten star targets and three buttons will not share a 360px line */
  .dishacts{gap:8px}
  .dishacts .btn{flex:1 1 40%}
  .dishacts .mini-rating{
    flex:1 1 100%; margin-left:0; justify-content:space-between;
    border-top:1px solid var(--paper); padding-top:8px;
  }
  .star-row{gap:0}
  .star-btn{flex:1 1 auto; min-width:26px; font-size:18px}

  .sheet-inner{width:100%; padding:18px 14px 56px}
  .sheet-inner h2{font-size:21px}
  .bar2{grid-template-columns:76px 1fr 54px}

  .weekitem{padding:12px 14px; gap:10px}
  .cook-lane{padding:14px}
  .lane-title{font-size:19px}
  .step-text{flex:1 1 100%; font-size:16px}
  .step-control{width:100%}
  .step-action{flex:1 1 auto}

  .subnavlink{margin-right:14px}
  .meal-row{flex-direction:column; gap:6px}
  .meal-row h4{flex:none; padding-top:0}
  .shop-row{padding:10px 2px}

  /* transposed full-week grid: days down, meal slots across */
  .weekgrid.transposed{min-width:0; width:100%}
  .weekgrid.transposed tbody th{width:96px; font-size:12px; white-space:normal}
  .weekgrid.transposed td{min-width:0}
  .weekgrid.transposed thead th{font-size:12px}
  .weekgrid.transposed .plan-chip{font-size:12px; padding:4px 4px 4px 8px}
  .weekgrid.transposed .plan-picker select{max-width:100%}
}

@media (max-width:370px){
  .app-header{padding:8px 12px; gap:8px}
  .app-header .brand{font-size:15px}
  .unittoggle button{padding:8px 10px; font-size:12.5px}
  .app-main{padding:14px 12px 24px}
  .navlink{font-size:12.5px}
  .dishacts .btn{flex:1 1 100%}
}