/* ============================================================================
   Tablespread PWA — Tabitha's marble / quiet-luxury system.
   Ported faithfully from tab_pantry.html, tab_scan.html, tab_manual.html
   (+ her two flagged fixes: steel SVG scan glyph, no emoji zone icons).
   ============================================================================ */
:root{
  --marble:#EDEAE4; --vein:#C9C3B8; --vein2:#B4ADA0;
  --cashmere:#F4F1EB; --greige:#E7E2D9; --mushroom:#D8D1C5; --mineral:#CFCAC0;
  --ink:#2C2A26; --ink-soft:#5A554C; --taupe:#8A8275;
  --steel:#9BA1A3; --steel-deep:#6E7477; --brass:#B08D57; --brass-soft:#C9A875; --olive:#5E6B4F;
  --aubergine:#4A2F52; /* "out" — calm jewel tone, never red */
  --r-card:26px;
  --shadow:0 30px 70px -32px rgba(44,42,38,.36);
  --ease:cubic-bezier(.22,.61,.36,1);
  /* ACCESSIBILITY (a11y) — readable defaults the recipe view + reading surfaces
     use. --read-ink is a genuinely legible dark ink (≈11.6:1 on cashmere, well
     above WCAG AA) for cooking instructions; --read-soft is the legible secondary
     (lifted from the too-light taupe). High-contrast mode pushes both to full ink.
     --ts-scale multiplies reading text size (S/M/L/XL). */
  --read-ink:#34302A;   /* recipe steps / primary reading text */
  --read-soft:#56514A;  /* secondary reading text (was taupe — too faint) */
  --ts-scale:1;         /* text-size multiplier; overridden by [data-textsize] */
}
/* text-size presets (per-device, persisted) */
html[data-textsize="s"]{ --ts-scale:.92; }
html[data-textsize="m"]{ --ts-scale:1; }
html[data-textsize="l"]{ --ts-scale:1.14; }
html[data-textsize="xl"]{ --ts-scale:1.3; }
/* high-contrast mode — darken the reading inks AND the global muted text tokens
   so it visibly strengthens text APP-WIDE, not just the few recipe elements.
   Most faint reading text uses --ink-soft / --taupe directly; overriding them
   here is what makes the toggle actually change what the user sees. */
html[data-contrast="high"]{
  --read-ink:#1f1d1a; --read-soft:#3a362f;
  --ink:#1a1816;        /* near-black headings/body */
  --ink-soft:#33302A;   /* was #5A554C — secondary text, now clearly darker */
  --taupe:#4E4A42;      /* was #8A8275 — meta/captions, lifted to legible */
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:'Archivo',sans-serif;color:var(--ink);-webkit-font-smoothing:antialiased;
  background-color:var(--marble);
  background-image:
    radial-gradient(120% 80% at 18% 10%, rgba(255,255,255,.5) 0%, transparent 42%),
    radial-gradient(90% 70% at 85% 92%, rgba(180,173,160,.30) 0%, transparent 46%),
    linear-gradient(118deg, transparent 0 47%, rgba(201,195,184,.38) 47.4%, transparent 48.4%),
    linear-gradient(124deg, transparent 0 64%, rgba(180,173,160,.26) 64.3%, transparent 65.1%),
    linear-gradient(135deg, var(--marble), #E4E0D8 55%, var(--marble));
  background-attachment:fixed;
  min-height:100dvh;
}

/* one phone-width column, centered on desktop, full-bleed on phone */
.screen{
  background:var(--cashmere);
  max-width:430px;margin:0 auto;min-height:100dvh;
  display:flex;flex-direction:column;position:relative;
  box-shadow:var(--shadow);
}
@media (min-width:480px){
  body{padding:32px 0;}
  .screen{min-height:auto;border-radius:var(--r-card);overflow:hidden;
    border:1px solid rgba(110,116,119,.18);min-height:calc(100dvh - 64px);}
}
[hidden]{display:none !important;}

/* ===================== APPBAR (pantry) ===================== */
.appbar{
  display:flex;align-items:center;justify-content:space-between;padding:26px 24px 18px;
  background:
    radial-gradient(120% 90% at 88% 8%, rgba(255,255,255,.55), transparent 55%),
    linear-gradient(150deg,#F1EEE8,#E7E2D9 75%,#E2DCD2);
  border-bottom:1px solid rgba(110,116,119,.13);
}
.appbar .brand{display:flex;align-items:center;gap:9px;}
.appbar .tmark{
  width:22px;height:22px;border-radius:6px;background:linear-gradient(150deg,#fbf9f5,#e7e2d9);
  border:1px solid rgba(110,116,119,.3);display:flex;align-items:center;justify-content:center;
  font-family:'Fraunces',serif;font-weight:500;font-size:14px;}
.appbar .tmark span{background:linear-gradient(160deg,#b8b3a6,#6E7477);-webkit-background-clip:text;background-clip:text;color:transparent;}
.appbar .eyebrow{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--taupe);font-weight:700;}
.hh{width:30px;height:30px;border-radius:50%;position:relative;
  background:radial-gradient(70% 70% at 40% 30%, #fbf9f5, #efece5 70%, #e7e2d9);
  border:1px solid rgba(110,116,119,.32);box-shadow:inset 0 1px 2px rgba(255,255,255,.9);}
.hh .r{position:absolute;inset:3px;border-radius:50%;border:1px solid var(--steel);}
.hh .m{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:'Fraunces',serif;font-weight:400;font-size:15px;
  background:linear-gradient(160deg,#b8b3a6,#6E7477 55%,#565b5d);-webkit-background-clip:text;background-clip:text;color:transparent;}

.titleblock{padding:24px 24px 8px;}
.titleblock h1{font-family:'Fraunces',serif;font-weight:400;font-size:33px;line-height:1.04;letter-spacing:-.01em;}
.titleblock .sub{color:var(--ink-soft);font-size:14px;margin-top:8px;line-height:1.5;max-width:300px;}
.titleblock .meta{color:var(--taupe);font-size:12.5px;letter-spacing:.02em;}
/* meta line + "How it works" link + "See all" toggle on one row */
.metarow{display:flex;align-items:center;gap:10px;margin-top:7px;}
.metarow .meta{flex:1;min-width:0;}        /* meta takes the slack, pushes the rest right */
/* quiet, secondary "How your pantry works" link */
.pantry-howto{flex:none;display:inline-flex;align-items:center;gap:5px;padding:6px 9px;border-radius:999px;cursor:pointer;
  background:none;border:none;font-family:'Archivo';font-size:12px;font-weight:600;color:var(--taupe);white-space:nowrap;}
.pantry-howto svg{width:14px;height:14px;stroke:currentColor;stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round;}
.pantry-howto:active{color:var(--ink-soft);}
.seeall{flex:none;display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;cursor:pointer;
  background:var(--cashmere);border:1px solid rgba(110,116,119,.2);font-family:'Archivo';font-size:12px;font-weight:600;
  color:var(--ink-soft);letter-spacing:.01em;}
.seeall svg{width:14px;height:14px;stroke:currentColor;stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round;}
.seeall[aria-pressed="true"]{background:linear-gradient(150deg,#EFE9E6,#E9E1DC);border-color:rgba(74,47,82,.4);color:var(--aubergine);}

/* ===================== PANTRY CONTROLS (search + segmented filter) ===================== */
.controls{padding:14px 20px 4px;}
.search-pantry{display:flex;align-items:center;gap:10px;padding:11px 14px;border-radius:14px;
  background:var(--cashmere);border:1px solid rgba(110,116,119,.2);}
.search-pantry svg{width:16px;height:16px;color:var(--taupe);stroke:currentColor;stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round;flex:none;}
.ps-input{flex:1;min-width:0;border:none;outline:none;background:transparent;
  font-family:'Archivo';font-size:14px;color:var(--ink);}
.ps-input::placeholder{color:var(--taupe);}
.ps-input::-webkit-search-cancel-button{-webkit-appearance:none;}
.segment{display:flex;gap:5px;margin-top:11px;overflow-x:auto;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;padding-bottom:2px;}
.segment::-webkit-scrollbar{display:none;}
.seg{flex:none;padding:7px 11px;border-radius:999px;font-size:12px;font-weight:600;color:var(--ink-soft);
  background:var(--cashmere);border:1px solid rgba(110,116,119,.18);font-family:'Archivo';cursor:pointer;
  min-height:34px;white-space:nowrap;transition:background .18s var(--ease),border-color .18s var(--ease),color .18s var(--ease);}
.seg.on{background:linear-gradient(150deg,#EFE9E6,#E9E1DC);border-color:rgba(74,47,82,.4);color:var(--aubergine);}
.seg .n{margin-left:4px;color:var(--taupe);font-weight:600;}
.seg.on .n{color:var(--aubergine);opacity:.72;}
.seg:disabled{opacity:.42;cursor:default;}

/* ===================== NUDGE BAND ===================== */
.nudge{margin:18px 20px 6px;padding:18px 18px 16px;border-radius:18px;
  background:linear-gradient(150deg,#EFF0EA,#E9EBE2);border:1px solid rgba(94,107,79,.22);position:relative;}
.nudge .nlabel{font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--olive);font-weight:700;display:flex;align-items:center;gap:8px;}
.nudge .nlabel .leaf{width:14px;height:14px;border-radius:50% 0 50% 50%;background:var(--olive);transform:rotate(45deg);opacity:.9;flex:none;}
.nudge .ntext{font-size:13.5px;color:var(--ink-soft);margin-top:6px;line-height:1.45;}
.nchips{display:flex;flex-wrap:wrap;gap:8px;margin-top:13px;}
.nchip{display:flex;align-items:center;gap:7px;padding:8px 13px 8px 11px;border-radius:999px;
  background:var(--cashmere);border:1px solid rgba(94,107,79,.28);font-size:13.5px;color:var(--ink);cursor:pointer;}
.nchip .lo{width:7px;height:7px;border-radius:50%;background:var(--brass);box-shadow:0 0 0 3px rgba(176,141,87,.16);}
.nchip .add{margin-left:2px;color:var(--steel-deep);font-weight:700;font-size:15px;line-height:1;}

/* ===================== ZONES (Direction B — collapsible two-column shelf) ===================== */
.zone{padding:14px 20px 2px;}
.zone:first-child{padding-top:10px;}
/* collapsible header: chevron · NAME · count · "X low" flag · hairline */
.zonehead{display:flex;align-items:center;gap:10px;margin-bottom:9px;cursor:pointer;
  -webkit-tap-highlight-color:transparent;user-select:none;min-height:28px;}
.zonehead .chev{width:14px;height:14px;flex:none;color:var(--steel-deep);transition:transform .28s var(--ease);
  stroke:currentColor;stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round;}
.zonehead.collapsed .chev{transform:rotate(-90deg);}
.zonehead .nm{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);font-weight:700;flex:none;}
.zonehead .ct{flex:none;font-size:11.5px;color:var(--taupe);font-weight:600;letter-spacing:.04em;}
.zonehead .flag{flex:none;display:inline-flex;align-items:center;gap:5px;font-size:11px;color:var(--brass);font-weight:700;letter-spacing:.02em;}
.zonehead .flag .fd{width:6px;height:6px;border-radius:50%;background:var(--brass);flex:none;}
.zonehead::after{content:"";order:3;flex:1;height:1px;background:linear-gradient(90deg,var(--mineral),transparent);}
/* keep the flag to the far right, after the hairline */
.zonehead .flag{order:4;}
.zonehead .nm{order:1;} .zonehead .chev{order:0;} .zonehead .ct{order:2;}
.zone .grid.collapsed{display:none;}

/* two-column shelf grid */
.grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;}

/* compact, DENSE 2-up cell — swipe-to-remove still wired (face/ghost layers) */
.item{position:relative;border-radius:11px;overflow:hidden;min-height:47px;
  background:var(--greige);border:1px solid rgba(110,116,119,.11);cursor:pointer;
  transition:background .2s var(--ease),box-shadow .2s var(--ease),border-color .2s var(--ease);}
.item .pillface{display:flex;align-items:flex-start;gap:8px;padding:9px 11px;position:relative;z-index:2;
  background:transparent;transition:transform .26s var(--ease);min-height:47px;}
.item .lvl{width:7px;height:7px;border-radius:50%;flex:none;margin-top:3px;}
.item .lvl.ok{background:var(--olive);}
.item .lvl.low{background:var(--brass);box-shadow:0 0 0 3px rgba(176,141,87,.15);}
.item .lvl.out{background:var(--aubergine);box-shadow:0 0 0 3px rgba(74,47,82,.13);}
.item .txt{min-width:0;flex:1;display:flex;flex-direction:column;}
/* name: one clean line, ellipsis — never wraps/squishes on iPhone */
.item .nm{font-size:calc(13px * var(--ts-scale));color:var(--ink);font-weight:500;line-height:1.16;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.item .br{font-size:calc(10.5px * var(--ts-scale));color:var(--read-soft);margin-top:1px;line-height:1.18;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.item .amt{color:var(--taupe);font-weight:600;}
.item .tag{display:inline-block;margin-top:3px;font-size:9px;letter-spacing:.07em;text-transform:uppercase;font-weight:700;}
.item .fav{position:absolute;top:7px;right:7px;width:11px;height:11px;color:var(--brass);z-index:3;pointer-events:none;}
/* low = brass border accent; out = aubergine wash (calm, never red) */
.item.low{border-color:rgba(176,141,87,.32);}
.item.low .tag{color:var(--brass);}
.item.out{background:linear-gradient(150deg,#ECE8EA,#E7E1E4);border-color:rgba(74,47,82,.24);}
.item.out .nm{color:var(--ink-soft);}
.item.out .tag{color:var(--aubergine);}
/* just-added glow */
.item.fresh{box-shadow:0 0 0 4px rgba(94,107,79,.12);border-color:var(--olive);}
.item.fresh .lvl{box-shadow:0 0 0 3px rgba(94,107,79,.22);}

/* Low/Out tap-actions: an inline two-button row revealed under the pill face on a
   plain tap. "Add to list" (brass — the restock action) + "Remove" (aubergine —
   matches the calm "out" jewel tone, never red). Buttons are ≥44px for thumbs. */
.item .itemacts{position:relative;z-index:2;display:flex;gap:6px;
  padding:0 9px 9px;border-top:1px solid rgba(110,116,119,.12);margin-top:1px;padding-top:8px;}
.item .iact{flex:1;min-height:44px;border-radius:9px;cursor:pointer;
  font-family:'Archivo',sans-serif;font-size:12.5px;font-weight:600;letter-spacing:.01em;
  display:inline-flex;align-items:center;justify-content:center;padding:0 8px;line-height:1.1;
  border:1px solid transparent;transition:background .18s var(--ease),border-color .18s var(--ease);}
.item .iact.add{background:linear-gradient(150deg,#F1E8D9,#E9DCC6);border-color:rgba(176,141,87,.4);color:#7A5C2E;}
.item .iact.add:active{background:linear-gradient(150deg,#ECE0CB,#E0CFB2);}
.item .iact.rm{background:linear-gradient(150deg,#ECE8EA,#E5DEE2);border-color:rgba(74,47,82,.3);color:var(--aubergine);}
.item .iact.rm:active{background:linear-gradient(150deg,#E5DEE2,#DBD0D6);}

/* iPhone-cramping guard: at the narrowest widths tighten the gap/padding so the
   two dense columns still hold one-line name + brand without squishing. */
@media (max-width:360px){
  .zone{padding:14px 14px 2px;}
  .grid{gap:6px;}
  .item .pillface{padding:7px 9px;gap:6px;}
  .item .nm{font-size:12.5px;}
  .item .br{font-size:10px;}
}

.emptystate{padding:40px 24px;text-align:center;color:var(--taupe);}
.emptystate .emptymark{font-size:34px;color:var(--mineral);font-weight:300;}
.emptystate .emptytext{font-size:14px;line-height:1.6;margin-top:10px;}

/* ===================== HOOK + ADD BAR ===================== */
/* ===================== PANTRY: fixed header / scroll body / fixed footer =====
   Only the pantry uses this self-scrolling layout. The screen is capped to the
   viewport (a flex column that does NOT grow); the appbar + title + controls
   pin at the top, .pantry-scroll is the only scroller, and .pantry-foot (Sous
   Chef CTA + add bar) stays anchored above the fixed tab nav. */
#screen-pantry{
  height:100dvh;max-height:100dvh;overflow:hidden;
  padding-bottom:0; /* override .tab-screen's 104px — the foot handles clearance */
}
@media (min-width:480px){
  #screen-pantry{height:calc(100dvh - 64px);max-height:calc(100dvh - 64px);}
}
/* appbar / titleblock / controls are flex children that keep their size (don't
   shrink) so they stay pinned while the list scrolls underneath. */
#screen-pantry > .appbar,
#screen-pantry > .titleblock,
#screen-pantry > .controls{flex:none;}
/* trim the pinned header on the pantry so more height goes to the scrolling list
   (the title is a known item; it doesn't need to be hero-sized here). */
#screen-pantry > .appbar{padding-top:18px;padding-bottom:12px;}
#screen-pantry > .titleblock{padding:12px 24px 4px;}
#screen-pantry > .titleblock h1{font-size:26px;}
#screen-pantry > .controls{padding-top:8px;}
.pantry-scroll{
  flex:1 1 auto;min-height:0;            /* min-height:0 = the flexbox scroll fix */
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
}
/* anchored footer: SLIM Sous Chef CTA + add bar, lifted to clear the fixed tab
   nav. Kept compact so the scroll list gets the height (was crushing it to ~2
   rows). The CTA is a short single bar; its caption is dropped here (it lives in
   the Plan screen). Tighter tab-nav clearance too. */
.pantry-foot{flex:none;background:var(--cashmere);
  border-top:1px solid rgba(110,116,119,.10);
  box-shadow:0 -14px 30px -26px rgba(44,42,38,.32);
  /* Clear the FIXED tab nav (height 104px + safe-area). The "Snap a receipt"
     button is the LAST foot element, so the clearance must exceed the tabbar
     height + a small gap or it tucks behind the nav. 112px = 104px tabbar + 8px
     gap; only ~20px more than the slim 92px, so the scroll list keeps its room. */
  padding-bottom:calc(112px + env(safe-area-inset-bottom));}

.hook{margin:9px 20px 0;padding:0;}
.makecta{width:100%;border:none;font-family:'Archivo';font-weight:600;font-size:14.5px;letter-spacing:.01em;color:#fff;
  background:linear-gradient(145deg,#7d8285,var(--steel-deep) 60%,#565b5d);padding:11px 16px;border-radius:999px;cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 12px 22px -14px rgba(86,91,93,.72);
  display:flex;align-items:center;justify-content:center;gap:9px;}
.makecta .pot{font-size:15px;}
/* the "From what you've got · Sous Chef" caption is hidden in the pinned pantry
   footer to reclaim vertical room — the action is self-explanatory here. */
.pantry-foot .hooksub{display:none;}

/* inside .pantry-foot the bottom clearance comes from the foot; keep the addbar
   padding slim so the footer block isn't oversized. */
.addbar{display:flex;gap:10px;padding:10px 20px 10px;}
/* slim "Snap a receipt" bulk-add button under the add bar */
.receiptbtn{display:flex;align-items:center;justify-content:center;gap:9px;width:calc(100% - 40px);margin:0 20px;
  padding:9px 14px;border-radius:13px;cursor:pointer;font-family:'Archivo';font-size:13px;font-weight:600;color:var(--ink-soft);
  background:linear-gradient(150deg,#F0EDE6,#E7E2D9);border:1px solid rgba(176,141,87,.3);}
.receiptbtn svg{width:16px;height:16px;stroke:var(--brass);stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round;}
.receiptbtn .rb-sub2{color:var(--taupe);font-weight:500;font-size:11.5px;}

/* ---- Spice Rack ----------------------------------------------------------
   Quiet entry link in the pantry footer + a SEPARATE seasoning inventory view
   (Maya's request). Reuses the pantry's marble tokens, segment, and .item pill
   so the rack reads as a sibling shelf, not a new surface. */
.spicelink{display:flex;align-items:center;justify-content:center;gap:9px;width:calc(100% - 40px);margin:8px 20px 0;
  min-height:44px;padding:9px 14px;border-radius:13px;cursor:pointer;font-family:'Archivo';font-size:13px;font-weight:600;color:var(--ink-soft);
  background:linear-gradient(150deg,#F0EDE6,#E7E2D9);border:1px solid rgba(176,141,87,.3);}
.spicelink svg{width:16px;height:16px;stroke:var(--brass);stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round;}
.spicelink .sl-sub2{color:var(--taupe);font-weight:500;font-size:11.5px;}
.spicelink:active{background:linear-gradient(150deg,#ECE7DE,#E0D9CC);}
/* slim list button in the spice rack's appbar2 */
.listbtn.slim{position:relative;border:none;background:transparent;cursor:pointer;padding:6px;color:var(--ink);}
.listbtn.slim svg{width:22px;height:22px;stroke:currentColor;stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round;}
.spice-lede{color:var(--ink-soft);font-size:13.5px;line-height:1.5;margin:6px 0 0;max-width:340px;}
.spice-lede b{color:var(--ink);}
/* the custom-add row sits in the rack footer, mirrors the pantry add bar */
.spice-addbar{display:flex;gap:10px;padding:10px 20px 8px;align-items:center;}
.spice-addbar .ps-input.wide{flex:1;min-height:44px;padding:10px 12px;border-radius:12px;
  background:var(--cashmere);border:1px solid rgba(110,116,119,.22);font-family:'Archivo';font-size:14px;color:var(--ink);}
.spice-addbar .addbtn{flex:none;padding:11px 18px;}
.spice-foot-note{color:var(--taupe);font-size:11.5px;line-height:1.45;margin:0 20px;}
.spice-foot-note b{color:var(--ink-soft);}
/* the rack uses the SAME two-column shelf grid as a pantry zone */
#spice-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:12px 20px 2px;}
#spice-grid:empty{padding:0;}
.addbtn{flex:1;display:flex;align-items:center;justify-content:center;gap:9px;padding:11px;border-radius:14px;cursor:pointer;
  background:var(--cashmere);border:1px solid rgba(110,116,119,.22);font-size:14px;font-weight:600;color:var(--ink);font-family:'Archivo';}
.addbtn.scan{background:linear-gradient(150deg,#F0EDE6,#E7E2D9);border-color:rgba(94,107,79,.3);}
.addbtn .gl{font-size:16px;display:flex;align-items:center;}

/* ===================== SCAN SCREEN ===================== */
.scanscreen{background:#23231f;padding:0;}
.cam{position:relative;flex:1;min-height:100dvh;
  background:linear-gradient(165deg,#2b2b2a,#37372f 45%,#23231f);overflow:hidden;}
@media (min-width:480px){.cam{min-height:calc(100dvh - 64px);}}
.cam::before{content:"";position:absolute;inset:0;z-index:1;
  background:
    radial-gradient(60% 40% at 50% 62%, rgba(176,141,87,.16), transparent 70%),
    radial-gradient(50% 30% at 30% 20%, rgba(255,255,255,.06), transparent 60%);}
#cam-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;opacity:.85;}
.camtop{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;
  padding:24px 22px;color:#EDEAE4;z-index:3;}
.camtop .x{width:34px;height:34px;border-radius:50%;background:rgba(237,234,228,.14);border:1px solid rgba(237,234,228,.2);
  display:flex;align-items:center;justify-content:center;font-size:15px;color:#EDEAE4;cursor:pointer;}
.camtop .ttl{font-family:'Fraunces',serif;font-size:17px;font-weight:400;letter-spacing:.01em;}
.camtop .flash{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(237,234,228,.7);font-weight:700;}

.reticle{position:absolute;top:46%;left:50%;transform:translate(-50%,-54%);width:236px;height:152px;z-index:3;}
.reticle .corner{position:absolute;width:30px;height:30px;border:2.5px solid var(--brass-soft);border-radius:5px;}
.reticle .tl{top:0;left:0;border-right:none;border-bottom:none;}
.reticle .tr{top:0;right:0;border-left:none;border-bottom:none;}
.reticle .bl{bottom:0;left:0;border-right:none;border-top:none;}
.reticle .br{bottom:0;right:0;border-left:none;border-top:none;}
.reticle .laser{position:absolute;left:8px;right:8px;top:50%;height:2px;border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--brass-soft),transparent);
  box-shadow:0 0 12px 1px rgba(201,168,117,.6);animation:sweep 2.6s var(--ease) infinite;}
@keyframes sweep{0%,100%{transform:translateY(-58px)}50%{transform:translateY(58px)}}
.reticle .bc{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:140px;height:54px;opacity:.42;
  background:repeating-linear-gradient(90deg,#EDEAE4 0 2px,transparent 2px 4px,#EDEAE4 4px 7px,transparent 7px 9px,#EDEAE4 9px 11px,transparent 11px 16px);}
.camhint{position:absolute;bottom:128px;left:0;right:0;text-align:center;z-index:3;color:rgba(237,234,228,.82);font-size:14px;}
.camhint b{color:var(--brass-soft);font-weight:600;}
.pulse{position:absolute;bottom:170px;left:50%;transform:translateX(-50%);z-index:3;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:rgba(237,234,228,.6);}

/* SCAN MODE TOGGLE — confirm-each ⇄ batch-a-bag, top-center over the camera. */
.scanmode{position:absolute;top:54px;left:50%;transform:translateX(-50%);z-index:4;display:flex;gap:4px;
  background:rgba(35,35,31,.42);border:1px solid rgba(237,234,228,.18);border-radius:999px;padding:4px;backdrop-filter:blur(8px);}
.smbtn{border:none;background:transparent;color:rgba(237,234,228,.72);font-family:'Archivo';font-size:12.5px;font-weight:600;
  letter-spacing:.01em;padding:7px 15px;border-radius:999px;cursor:pointer;transition:background .15s,color .15s;}
.smbtn.sel{background:var(--brass);color:#fff;box-shadow:0 1px 4px rgba(0,0,0,.25);}

/* BATCH TRAY — pinned above the manual bar; live count + names + Done. */
.batchtray{position:absolute;bottom:calc(92px + env(safe-area-inset-bottom));left:14px;right:14px;z-index:5;
  background:rgba(244,241,235,.97);border-radius:18px;padding:13px 15px;box-shadow:0 12px 36px -10px rgba(0,0,0,.55);
  animation:rise .28s var(--ease);}
.bt-head{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.bt-count{font-family:'Fraunces',serif;font-size:16px;color:var(--ink);}
.bt-count #bt-num{font-weight:600;color:var(--olive);}
.bt-done{flex:none;border:none;border-radius:11px;padding:9px 20px;cursor:pointer;
  background:var(--olive);color:#fff;font-family:'Archivo';font-size:14px;font-weight:700;letter-spacing:.02em;}
.bt-names{margin-top:9px;max-height:88px;overflow-y:auto;display:flex;flex-wrap:wrap;gap:6px;}
.bt-names:empty{display:none;}
.bt-names .bn{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--ink-soft);
  background:rgba(94,107,79,.10);border:1px solid rgba(94,107,79,.20);border-radius:999px;padding:4px 10px;}
.bt-names .bn::before{content:"✓";color:var(--olive);font-size:10px;font-weight:700;}

/* per-decode tick toast — brief confirmation each successful batch scan. */
.scantick{position:absolute;top:104px;left:50%;transform:translateX(-50%);z-index:6;display:flex;align-items:center;gap:8px;
  background:rgba(94,107,79,.96);color:#fff;border-radius:999px;padding:8px 16px 8px 12px;font-size:13.5px;font-weight:600;
  box-shadow:0 6px 20px -6px rgba(0,0,0,.5);animation:tickpop .2s var(--ease);}
.scantick .tk{width:20px;height:20px;border-radius:50%;background:rgba(255,255,255,.22);display:flex;align-items:center;justify-content:center;font-size:12px;}
/* miss/neutral variant — not-recognized or lookup-failed (no green "added"). */
.scantick.miss{background:rgba(35,35,31,.92);}
.scantick.miss .tk{background:rgba(237,234,228,.2);}
@keyframes tickpop{from{opacity:0;transform:translateX(-50%) translateY(-6px) scale(.94)}to{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}}

/* always-works manual barcode entry (desktop-friendly) */
.manualbar{position:absolute;bottom:calc(34px + env(safe-area-inset-bottom));left:18px;right:18px;z-index:4;
  display:flex;gap:9px;align-items:center;background:rgba(237,234,228,.10);border:1px solid rgba(237,234,228,.22);
  border-radius:16px;padding:8px 8px 8px 16px;backdrop-filter:blur(8px);}
.manualbar input{flex:1;background:transparent;border:none;outline:none;color:#EDEAE4;font-family:'Archivo';font-size:14.5px;}
.manualbar input::placeholder{color:rgba(237,234,228,.5);}
.mb-go{width:38px;height:38px;flex:none;border:none;border-radius:11px;cursor:pointer;
  background:linear-gradient(150deg,#9ba1a3,#6E7477);color:#fff;font-size:17px;font-weight:700;}

/* confirm sheet overlay */
.confirm-overlay{position:absolute;inset:0;z-index:6;}
.confirm-overlay .dimwash{position:absolute;inset:0;background:rgba(35,35,31,.45);}
.sheet{position:absolute;left:0;right:0;bottom:0;background:var(--cashmere);border-radius:28px 28px 0 0;
  padding:14px 24px calc(28px + env(safe-area-inset-bottom));box-shadow:0 -24px 60px -20px rgba(0,0,0,.5);
  animation:rise .34s var(--ease);}
@keyframes rise{from{transform:translateY(100%)}to{transform:translateY(0)}}
.grab{width:42px;height:5px;border-radius:3px;background:var(--mineral);margin:0 auto 20px;}
.scanok{display:flex;align-items:center;gap:8px;font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--olive);font-weight:700;margin-bottom:16px;}
.scanok .dot{width:18px;height:18px;border-radius:50%;background:var(--olive);position:relative;flex:none;}
.scanok .dot::after{content:"";position:absolute;left:6px;top:4px;width:5px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(42deg);}
.scanok.nf{color:var(--brass);}
.scanok.nf .qd{width:18px;height:18px;border-radius:50%;background:var(--brass);color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex:none;}

.product{display:flex;align-items:center;gap:16px;padding:4px 2px 20px;}
.thumb{width:62px;height:62px;border-radius:15px;flex:none;position:relative;overflow:hidden;
  background:linear-gradient(150deg,#C24B3A,#9c3a2c);box-shadow:inset 0 1px 2px rgba(255,255,255,.2);}
.thumb .lbl{position:absolute;inset:10px 8px;border-radius:5px;background:rgba(244,241,235,.92);}
.thumb .lbl::before{content:"";position:absolute;top:7px;left:7px;right:7px;height:3px;border-radius:2px;background:#9c3a2c;}
.thumb .lbl::after{content:"";position:absolute;top:15px;left:7px;width:60%;height:2px;border-radius:2px;background:rgba(156,58,44,.5);}
.prodtext h2{font-family:'Fraunces',serif;font-weight:400;font-size:23px;line-height:1.1;letter-spacing:-.01em;}
.prodtext .brandline{font-size:13px;color:var(--ink-soft);margin-top:5px;}
.prodtext .cat{display:inline-flex;align-items:center;gap:6px;margin-top:10px;font-size:12px;color:var(--taupe);background:var(--greige);padding:5px 11px;border-radius:999px;}
.prodtext .cat .d{width:6px;height:6px;border-radius:50%;background:var(--steel);}

.confirmrow{display:flex;gap:11px;margin-top:4px;}
.btn-add{flex:1;border:none;font-family:'Archivo';font-weight:600;font-size:15.5px;color:#fff;cursor:pointer;
  background:linear-gradient(145deg,#6f7d5c,var(--olive) 60%,#4a553f);padding:17px;border-radius:999px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 14px 26px -13px rgba(94,107,79,.7);
  display:flex;align-items:center;justify-content:center;gap:10px;}
.btn-add .ck{font-size:15px;}
.btn-add.alt{background:linear-gradient(145deg,#7d8285,var(--steel-deep) 60%,#565b5d);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 14px 26px -13px rgba(86,91,93,.6);}
.btn-edit{flex:none;width:120px;background:var(--cashmere);border:1px solid rgba(110,116,119,.28);cursor:pointer;
  font-family:'Archivo';font-weight:600;font-size:14.5px;color:var(--ink-soft);border-radius:999px;}
.keepgoing{text-align:center;font-size:12.5px;color:var(--ink-soft);margin-top:16px;}
.keepgoing b{color:var(--olive);font-weight:600;}
.nf-body{font-size:14px;color:var(--ink-soft);line-height:1.55;padding:0 2px 20px;}
.mono{font-family:ui-monospace,Menlo,monospace;font-size:13px;color:var(--ink);}

/* ===================== MANUAL SCREEN ===================== */
/* The add-item sheet is a FOCUSED FULL-SCREEN flow: the bottom nav is hidden
   while it's open (see NAV_HIDDEN_ON in app.js), so its sticky footer pins to
   the true viewport bottom with nothing occluding the green Add button.
   `.screen` is already display:flex;flex-direction:column — fix the HEIGHT to
   the viewport (not just min-height) so #qty-step{flex:1} + the sticky footer
   anchor correctly even on a short qty step. */
.manualscreen{background:var(--cashmere);height:100dvh;}
@media (min-width:480px){.manualscreen{height:calc(100dvh - 64px);}}
/* Each step fills the sheet; its body scrolls, its action bar stays pinned.
   min-height:0 lets the scroll area actually scroll. */
#pick-step,#qty-step{display:flex;flex-direction:column;flex:1;min-height:0;}
/* the picker results scroll; the foot stays put */
#pick-step .results{overflow-y:auto;}
.appbar2{display:flex;align-items:center;justify-content:space-between;padding:24px 22px 16px;
  background:linear-gradient(150deg,#F1EEE8,#E7E2D9 75%,#E2DCD2);border-bottom:1px solid rgba(110,116,119,.13);}
.appbar2 .x2{width:32px;height:32px;border-radius:50%;background:var(--cashmere);border:1px solid rgba(110,116,119,.2);
  display:flex;align-items:center;justify-content:center;font-size:13px;color:var(--ink-soft);cursor:pointer;}
.appbar2 .ttl2{font-family:'Fraunces',serif;font-size:18px;font-weight:400;}
.appbar2 .sp2{width:32px;}
.intro{padding:22px 24px 4px;}
.intro h1{font-family:'Fraunces',serif;font-weight:400;font-size:27px;line-height:1.08;}
.intro p{font-size:13.5px;color:var(--ink-soft);margin-top:8px;line-height:1.5;max-width:300px;}
.search{margin:20px 24px 4px;display:flex;align-items:center;gap:11px;padding:14px 16px;border-radius:15px;
  background:var(--cashmere);border:1px solid rgba(110,116,119,.24);}
.search .mag{width:15px;height:15px;border-radius:50%;border:2px solid var(--steel-deep);position:relative;flex:none;}
.search .mag::after{content:"";position:absolute;right:-5px;bottom:-4px;width:6px;height:2px;background:var(--steel-deep);transform:rotate(45deg);border-radius:2px;}
.search .m-input{flex:1;border:none;outline:none;background:transparent;font-family:'Archivo';font-size:14.5px;color:var(--ink);}
.search .m-input::placeholder{color:var(--taupe);}
.zoneopts{margin:24px 24px 0;}
.zoneopts .ttl{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--taupe);font-weight:700;margin-bottom:13px;}
.opt{display:flex;align-items:center;gap:13px;padding:15px 16px;border-radius:15px;margin-bottom:10px;width:100%;text-align:left;cursor:pointer;
  background:var(--greige);border:1px solid rgba(110,116,119,.14);font-size:15px;color:var(--ink);font-family:'Archivo';}
.opt .ring{width:20px;height:20px;border-radius:50%;border:2px solid var(--mineral);flex:none;}
.opt.sel{background:linear-gradient(150deg,#EEF0E8,#E5E9DC);border:1px solid var(--olive);}
.opt.sel .ring{border-color:var(--olive);position:relative;}
.opt.sel .ring::after{content:"";position:absolute;left:4px;top:4px;width:8px;height:8px;border-radius:50%;background:var(--olive);}
.opt .sub{margin-left:auto;font-size:12.5px;color:var(--taupe);}
.softnote{margin:18px 24px 0;font-size:12.5px;color:var(--taupe);text-align:center;line-height:1.5;}
.softnote b{color:var(--ink-soft);font-weight:600;}
/* Action bar: sticky footer so the primary Add/confirm stays reachable no
   matter the content height or an open mobile keyboard. */
.addbar2{display:flex;gap:11px;padding:18px 22px calc(24px + env(safe-area-inset-bottom));margin-top:auto;
  position:sticky;bottom:0;z-index:5;
  background:linear-gradient(0deg,var(--cashmere) 78%,rgba(244,241,235,.85) 92%,transparent);
  backdrop-filter:blur(2px);}
.btn-add2{flex:1;border:none;font-family:'Archivo';font-weight:600;font-size:15.5px;color:#fff;cursor:pointer;
  background:linear-gradient(145deg,#6f7d5c,var(--olive) 60%,#4a553f);padding:17px;border-radius:999px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 14px 26px -13px rgba(94,107,79,.7);
  display:flex;align-items:center;justify-content:center;gap:9px;}
.btn-scan2{flex:none;width:130px;background:var(--cashmere);border:1px solid rgba(110,116,119,.28);cursor:pointer;
  font-family:'Archivo';font-weight:600;font-size:14px;color:var(--ink-soft);border-radius:999px;}

/* ===================== RECEIPT CONFIRM (bulk add) ===================== */
/* flex column so the checklist scrolls and the Add bar stays pinned. */
#screen-receipt{display:flex;flex-direction:column;}
#screen-receipt .appbar2,#screen-receipt .intro,#screen-receipt .rcp-allrow,#screen-receipt .addbar2{flex:none;}
.rcp-sub{font-size:13.5px;color:var(--ink-soft);margin-top:8px;line-height:1.5;}
.rcp-allrow{padding:10px 24px 2px;display:flex;}
.rcp-scroll{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:8px 20px 4px;}
.rcp-line{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:13px;margin-bottom:7px;
  background:var(--greige);border:1px solid rgba(110,116,119,.12);transition:opacity .15s var(--ease);}
.rcp-line:not(.on){opacity:.5;}
.rcp-box{flex:none;width:26px;height:26px;border-radius:8px;cursor:pointer;color:transparent;
  background:var(--cashmere);border:1.5px solid rgba(110,116,119,.34);display:flex;align-items:center;justify-content:center;padding:0;}
.rcp-box svg{width:15px;height:15px;stroke:#fff;stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round;}
.rcp-line.on .rcp-box{background:linear-gradient(150deg,#6c7a59,var(--olive) 60%,#52603f);border-color:var(--olive);color:#fff;}
.rcp-name{flex:1;min-width:0;border:none;background:transparent;outline:none;font-family:'Archivo';font-size:14.5px;color:var(--ink);padding:2px 0;}
.rcp-name:focus{border-bottom:1px solid var(--olive);}
.rcp-qty{flex:none;font-size:12px;color:var(--taupe);font-weight:600;}
#receipt-add:disabled{opacity:.5;cursor:default;}

/* ===================== TOAST + BOOT ===================== */
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(96px + env(safe-area-inset-bottom));z-index:50;
  width:min(394px,calc(100vw - 36px));
  display:flex;align-items:center;gap:13px;padding:15px 18px;border-radius:18px;
  background:linear-gradient(150deg,#2f3a28,#3a4631);box-shadow:0 20px 44px -18px rgba(44,55,40,.7);color:#EDEAE4;
  animation:rise .34s var(--ease);}
.toast .seal{width:38px;height:38px;border-radius:50%;flex:none;position:relative;
  background:radial-gradient(60% 55% at 38% 32%, #88976d, #6f7d5c 55%, #54603f);
  box-shadow:inset 0 2px 4px rgba(255,255,255,.2), inset 0 -5px 9px rgba(0,0,0,.35);}
.toast .seal::after{content:"";position:absolute;left:14px;top:11px;width:7px;height:12px;border:solid #EDEAE4;border-width:0 2.5px 2.5px 0;transform:rotate(42deg);}
.toast .tt{font-size:14.5px;line-height:1.35;}
.toast .tt b{font-weight:600;}
.toast .tt span{color:rgba(237,234,228,.7);font-size:12.5px;}

.boot{position:fixed;left:50%;top:18px;transform:translateX(-50%);z-index:60;
  font-size:12px;letter-spacing:.04em;color:var(--ink-soft);background:var(--cashmere);
  border:1px solid rgba(110,116,119,.2);border-radius:999px;padding:8px 16px;box-shadow:var(--shadow);
  transition:opacity .4s var(--ease);}
.boot.err{color:#6B3A34;border-color:rgba(107,58,52,.4);}
.boot.gone{opacity:0;pointer-events:none;}

/* ===================== APPBAR — LIST SHORTCUT (basket + brass badge) ======= */
.appbar .right{display:flex;align-items:center;gap:14px;}
.listbtn{position:relative;width:30px;height:30px;display:flex;align-items:center;justify-content:center;
  color:var(--ink-soft);background:none;border:none;cursor:pointer;padding:0;}
.listbtn svg{width:21px;height:21px;}
.listbtn .cnt{position:absolute;top:-4px;right:-5px;min-width:16px;height:16px;padding:0 4px;border-radius:999px;
  background:var(--brass);color:#fff;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 0 2px var(--cashmere);}
.li{stroke:currentColor;stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round;}

/* ===================== PERSISTENT BOTTOM NAV (Pattern One) ================= */
/* leave room so the fixed nav never covers the last content of a screen */
.tab-screen{padding-bottom:104px;}
.tabbar{
  position:fixed;left:50%;transform:translateX(-50%);bottom:0;z-index:40;
  width:min(430px,100vw);height:calc(104px + env(safe-area-inset-bottom));
  padding:16px 16px env(safe-area-inset-bottom);
  background:
    radial-gradient(120% 160% at 50% 0%, rgba(255,255,255,.55), transparent 62%),
    linear-gradient(0deg,#EEEAE3,#F4F1EB);
  border-top:1px solid rgba(110,116,119,.16);
  display:flex;align-items:flex-start;justify-content:space-around;
  box-shadow:0 -18px 40px -28px rgba(44,42,38,.4);
}
@media (min-width:480px){
  .tabbar{border-radius:0 0 var(--r-card) var(--r-card);
    box-shadow:0 -18px 40px -28px rgba(44,42,38,.4), var(--shadow);}
}
.tabbar[hidden]{display:none !important;}
.tab{display:flex;flex-direction:column;align-items:center;gap:8px;width:62px;padding-top:6px;position:relative;
  background:none;border:none;cursor:pointer;font-family:'Archivo';}
.tab .ic{width:23px;height:23px;color:var(--taupe);}
.tab .lb{font-size:10.5px;letter-spacing:.05em;color:var(--taupe);font-weight:600;}
.tab.on .ic{color:var(--ink);}
.tab.on .lb{color:var(--ink);font-weight:700;}
/* active indicator: brushed-brass underline */
.tab.on::before{content:"";position:absolute;top:-16px;width:20px;height:3px;border-radius:3px;
  background:linear-gradient(90deg,var(--brass-soft),var(--brass));opacity:.95;}

/* center capture — the one rich gesture */
.fabwrap{width:76px;display:flex;flex-direction:column;align-items:center;}
.fab{width:58px;height:58px;border-radius:50%;margin-top:-24px;border:none;cursor:pointer;
  background:linear-gradient(150deg,#7d8285,var(--steel-deep) 58%,#565b5d);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.32), 0 16px 26px -12px rgba(86,91,93,.7), 0 0 0 5px var(--cashmere);
  display:flex;align-items:center;justify-content:center;color:#fff;
  transition:transform .2s var(--ease);}
.fab:active{transform:scale(.94);}
.fab svg{width:25px;height:25px;}
.fabwrap .cap{font-size:10.5px;letter-spacing:.05em;color:var(--ink-soft);font-weight:600;margin-top:9px;}

/* ===================== ITEM PICKER (Fix #2) =============================== */
.results{margin:8px 24px 0;border-radius:16px;background:#fff;border:1px solid rgba(110,116,119,.16);overflow:hidden;
  box-shadow:0 18px 40px -24px rgba(44,42,38,.3);}
.rgrouplbl{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--taupe);font-weight:700;
  padding:13px 16px 7px;display:flex;align-items:center;gap:8px;background:#FBFAF7;}
.rgrouplbl .star{color:var(--brass);}
.ritem{display:flex;align-items:center;gap:13px;padding:13px 16px;border-top:1px solid rgba(110,116,119,.08);
  width:100%;text-align:left;background:none;border-left:none;border-right:none;border-bottom:none;cursor:pointer;font-family:'Archivo';}
.ritem:first-of-type{border-top:none;}
.ritem .zic{width:30px;height:30px;border-radius:9px;background:var(--greige);display:flex;align-items:center;justify-content:center;font-size:15px;flex:none;}
.ritem .nm{font-size:15px;color:var(--ink);font-weight:500;}
.ritem .meta{font-size:11.5px;color:var(--taupe);margin-top:2px;}
.ritem .typetag{margin-left:auto;font-size:10.5px;letter-spacing:.04em;color:var(--ink-soft);font-weight:600;
  background:var(--greige);padding:4px 9px;border-radius:999px;border:1px solid rgba(110,116,119,.12);}
.ritem.hist{background:linear-gradient(150deg,#FBFAF7,#F5F2EC);}
.ritem.free{background:#F7F5F0;}
.ritem.free .zic{background:transparent;border:1px dashed var(--mineral);color:var(--taupe);}
.ritem.free .nm{color:var(--ink-soft);}
.ritem.free .nm b{color:var(--ink);}
.picknote{margin:14px 24px 0;font-size:12px;color:var(--taupe);text-align:center;line-height:1.5;}
.picknote b{color:var(--ink-soft);font-weight:600;}
.picker-foot{margin-top:auto;}
.btn-scan2.wide{width:100%;padding:15px;}

/* ===================== ADAPTIVE QUANTITY STEP (Fix #1) ==================== */
.qstep{padding:24px 24px 16px;flex:1;overflow-y:auto;min-height:0;}
.qstep .picked{display:flex;align-items:center;gap:13px;margin-bottom:6px;}
.qstep .picked .zic{width:42px;height:42px;border-radius:12px;background:linear-gradient(150deg,#EEF0E8,#E5E9DC);
  border:1px solid rgba(94,107,79,.25);display:flex;align-items:center;justify-content:center;font-size:20px;flex:none;}
.qstep .picked .nm{font-family:'Fraunces',serif;font-size:24px;font-weight:400;}
.qstep .picked .auto{font-size:12px;color:var(--olive);font-weight:600;margin-top:3px;letter-spacing:.02em;}
.qlabel{font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--taupe);font-weight:700;margin:26px 0 14px;display:flex;align-items:center;gap:9px;}
.qlabel .opt{margin-left:auto;color:var(--taupe);font-weight:600;letter-spacing:.04em;font-size:10px;text-transform:none;}
.weigh{display:flex;align-items:center;justify-content:center;gap:18px;margin-bottom:6px;}
.stepbtn{width:52px;height:52px;border-radius:16px;background:var(--cashmere);border:1px solid rgba(110,116,119,.22);
  display:flex;align-items:center;justify-content:center;font-size:24px;color:var(--ink-soft);font-weight:400;cursor:pointer;}
.stepbtn:active{background:var(--greige);}
.amount{text-align:center;min-width:120px;}
.amount .n{font-family:'Fraunces',serif;font-size:46px;font-weight:400;line-height:1;}
.amount .u{font-size:13px;color:var(--taupe);font-weight:600;letter-spacing:.06em;text-transform:uppercase;margin-top:4px;}
.presets{display:flex;gap:9px;justify-content:center;margin-top:20px;flex-wrap:wrap;}
.preset{padding:9px 16px;border-radius:999px;background:var(--greige);border:1px solid rgba(110,116,119,.14);
  font-size:13.5px;color:var(--ink-soft);font-weight:600;cursor:pointer;font-family:'Archivo';}
.preset.on{background:linear-gradient(150deg,#EEF0E8,#E5E9DC);border:1px solid var(--olive);color:var(--ink);}

/* ===================== SWIPE-TO-REMOVE + UNDO ============================= */
/* a pill that can be swiped to reveal an oxblood Remove behind it */
.item.swipeable{position:relative;touch-action:pan-y;overflow:hidden;}
.item .removeghost{position:absolute;right:0;top:0;bottom:0;width:0;border-radius:13px;
  background:linear-gradient(150deg,#7c5450,#6B3A34);display:flex;align-items:center;justify-content:center;
  color:#fff;overflow:hidden;pointer-events:none;}
.item .removeghost svg{width:16px;height:16px;flex:none;}
/* .item .pillface base layout lives in the ZONES section (2-up cell) */
.item.swiping .pillface{transition:none;}
.item.removing{transition:opacity .26s var(--ease),transform .26s var(--ease),max-width .26s var(--ease),margin .26s var(--ease),padding .26s var(--ease);
  opacity:0;transform:scale(.85);max-width:0;padding-left:0;padding-right:0;margin:0;border-width:0;}

.undotoast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(120px + env(safe-area-inset-bottom));z-index:56;
  width:min(394px,calc(100vw - 36px));display:flex;align-items:center;gap:12px;padding:15px 18px;border-radius:16px;
  background:linear-gradient(150deg,#34322E,#2C2A26);color:#F4F1EB;
  box-shadow:0 22px 44px -20px rgba(44,42,38,.7);animation:rise .3s var(--ease);}
.undotoast .dot{width:9px;height:9px;border-radius:50%;background:var(--brass);flex:none;box-shadow:0 0 0 3px rgba(176,141,87,.2);}
.undotoast .tx{font-size:13.5px;}
.undotoast .tx b{font-weight:600;}
.undotoast .undo{margin-left:auto;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--brass-soft);background:none;border:none;cursor:pointer;padding:4px;font-family:'Archivo';}

/* .item .amt styling lives in the ZONES section (inline in the brand line) */

/* multiple-listbtn badge helper (Plan/Menu/Library bars reuse the basket) */
.cnt.list-count-badge{position:absolute;top:-4px;right:-5px;min-width:16px;height:16px;padding:0 4px;border-radius:999px;
  background:var(--brass);color:#fff;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 2px var(--cashmere);}
.backbtn{width:30px;height:30px;border-radius:50%;background:var(--greige);border:1px solid rgba(110,116,119,.18);
  display:flex;align-items:center;justify-content:center;color:var(--ink-soft);cursor:pointer;font-size:18px;}

/* ===================== PLAN — Sous Chef ================================== */
.moods{padding:18px 20px 0;display:flex;flex-direction:column;gap:13px;}
.mood{padding:20px;border-radius:20px;border:1px solid rgba(110,116,119,.16);position:relative;overflow:hidden;}
.mood.reactive{background:linear-gradient(150deg,#EFF0EA,#E9EBE2);border-color:rgba(94,107,79,.28);}
.mood.leftovers{background:linear-gradient(150deg,#F0EEE7,#E8E3D9);border-color:rgba(176,141,87,.3);}
.mood.proactive{background:var(--greige);}
.mood .mlabel{font-size:11px;letter-spacing:.15em;text-transform:uppercase;font-weight:700;color:var(--taupe);}
.mood.reactive .mlabel{color:var(--olive);}
.mood.leftovers .mlabel{color:var(--brass);}
/* free-text leftovers field inside its mood card */
.lo-field{width:100%;margin-top:14px;}
.mood h2{font-family:'Fraunces',serif;font-weight:400;font-size:23px;line-height:1.1;margin-top:9px;letter-spacing:-.01em;}
.mood .md{font-size:13.5px;color:var(--ink-soft);margin-top:7px;line-height:1.5;max-width:280px;}
.mgo{margin-top:16px;display:inline-flex;align-items:center;gap:9px;padding:13px 20px;border-radius:999px;font-size:14.5px;font-weight:600;border:none;cursor:pointer;font-family:'Archivo';}
.mgo.olive{color:#fff;background:linear-gradient(145deg,#6c7a59,var(--olive) 60%,#52603f);box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 14px 26px -13px rgba(94,107,79,.6);}
.mgo.steel{color:#fff;background:linear-gradient(145deg,#7d8285,var(--steel-deep) 60%,#565b5d);box-shadow:inset 0 1px 0 rgba(255,255,255,.24), 0 14px 26px -13px rgba(86,91,93,.55);}
.mgo svg{width:17px;height:17px;}

.formwrap{padding:8px 24px 0;}
.fblock{margin-top:22px;}
.fq{font-family:'Fraunces',serif;font-size:19px;line-height:1.2;color:var(--ink);margin-bottom:13px;}
.fq .accent{color:var(--brass);}
.chips{display:flex;flex-wrap:wrap;gap:9px;}
.chip{padding:10px 15px;border-radius:999px;background:var(--greige);border:1px solid rgba(110,116,119,.16);font-size:14px;color:var(--ink);cursor:pointer;font-family:'Archivo';}
/* role picker — stacked, clearly-labeled access levels (Full access / Shopping / View) */
.hh-rolepick{display:flex;flex-direction:column;gap:9px;}
.rolecard{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;width:100%;
  padding:13px 16px;border-radius:15px;cursor:pointer;font-family:'Archivo';
  background:var(--greige);border:1.5px solid rgba(110,116,119,.18);}
.rolecard .rl{font-size:14.5px;font-weight:600;color:var(--ink);}
.rolecard .rh{font-size:12px;color:var(--taupe);}
.rolecard.sel{background:rgba(94,107,79,.1);border-color:var(--olive);}
.rolecard.sel .rl{color:var(--olive);}
.rolecard.sel .rh{color:var(--ink-soft);}
.chip.sel{background:rgba(94,107,79,.12);border:1.5px solid var(--olive);color:var(--olive);font-weight:600;}
.chip.protein.sel{background:rgba(176,141,87,.12);border-color:var(--brass);color:#8a6a35;}
/* fanciness toggle — Everyday ⇄ Make it special (compact 2-option segmented) */
.styletoggle{display:inline-flex;gap:4px;padding:4px;border-radius:999px;background:var(--greige);border:1px solid rgba(110,116,119,.16);}
.stybtn{padding:9px 16px;border-radius:999px;cursor:pointer;background:none;border:none;font-family:'Archivo';font-size:13px;font-weight:600;color:var(--ink-soft);white-space:nowrap;}
.stybtn.on{background:var(--cashmere);color:var(--ink);box-shadow:0 2px 8px -4px rgba(44,42,38,.4);}
.stybtn[data-style="special"].on{background:linear-gradient(150deg,#EFE9E6,#E9E1DC);color:var(--aubergine);}
/* "+ type your own" cuisine — inline text input drops to its own full row */
.customcuisine{flex-basis:100%;margin-top:2px;}
.cc-input{width:100%;padding:11px 15px;border-radius:14px;background:var(--cashmere);
  border:1px solid rgba(94,107,79,.32);font-family:'Archivo';font-size:14px;color:var(--ink);outline:none;
  transition:border-color .18s var(--ease);}
.cc-input:focus{border-color:var(--olive);}
.cc-input::placeholder{color:var(--taupe);}
.stepper{display:inline-flex;align-items:center;gap:18px;padding:8px 10px;border-radius:999px;background:var(--cashmere);border:1px solid rgba(110,116,119,.22);}
.stepper .pm{width:38px;height:38px;border-radius:50%;background:var(--greige);border:1px solid rgba(110,116,119,.2);display:flex;align-items:center;justify-content:center;font-size:20px;color:var(--ink-soft);cursor:pointer;font-family:'Archivo';}
.stepper .pv{font-family:'Fraunces',serif;font-size:24px;min-width:30px;text-align:center;}
.dislikes{margin-top:13px;display:flex;align-items:center;gap:10px;padding:13px 16px;border-radius:14px;background:#EDEAE3;border:1px solid rgba(110,116,119,.12);}
.dislikes .lf{width:14px;height:14px;border-radius:50% 0 50% 50%;background:var(--olive);transform:rotate(45deg);flex:none;opacity:.85;}
.dislikes .dt{font-size:12.5px;color:var(--ink-soft);line-height:1.45;}
.dislikes .dt b{color:var(--ink);font-weight:600;}
.genbar{padding:24px 24px 28px;}
.genbtn{width:100%;border:none;font-weight:600;font-size:16px;color:#fff;background:linear-gradient(145deg,#6c7a59,var(--olive) 60%,#52603f);
  padding:18px;border-radius:999px;box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 16px 28px -13px rgba(94,107,79,.62);
  display:flex;align-items:center;justify-content:center;gap:11px;cursor:pointer;font-family:'Archivo';}
.genbtn svg{width:19px;height:19px;}
.genbtn:disabled{opacity:.5;cursor:default;}
.gencount{text-align:center;font-size:12.5px;color:var(--taupe);margin-top:13px;}
.gencount b{color:var(--brass);font-weight:600;}

/* ===================== GENERATION held-breath (shared orbit) ============= */
.genscreen{background-color:var(--cashmere);}
.gen{flex:1;min-height:100dvh;background:radial-gradient(120% 70% at 50% 24%, rgba(255,255,255,.5), transparent 55%),linear-gradient(160deg,#F1EEE8,#E7E2D9 70%,#E2DCD2);
  display:flex;flex-direction:column;align-items:center;justify-content:center;padding:42px;}
@media (min-width:480px){.gen{min-height:calc(100dvh - 64px);}}
.orbit{width:118px;height:118px;border-radius:50%;position:relative;margin-bottom:34px;
  background:radial-gradient(60% 60% at 42% 34%, #fbf9f5, #efece5 70%, #e3ded4);
  border:1px solid rgba(110,116,119,.22);box-shadow:inset 0 2px 4px rgba(255,255,255,.8), var(--shadow);
  display:flex;align-items:center;justify-content:center;}
.orbit.big{width:128px;height:128px;}
.orbit .ring{position:absolute;inset:14px;border-radius:50%;border:1.5px solid transparent;
  border-top-color:var(--brass);border-right-color:rgba(176,141,87,.3);animation:spin 2.4s linear infinite;}
.orbit .ring2{position:absolute;inset:26px;border-radius:50%;border:1px solid rgba(155,161,163,.5);border-bottom-color:var(--steel);animation:spin 3.4s linear infinite reverse;}
@keyframes spin{to{transform:rotate(360deg);}}
.orbit .orbit-glyph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--steel-deep);font-size:40px;filter:saturate(.7);}
.orbit .orbit-glyph svg{width:34px;height:34px;}
.gen h2,.parse h2{font-family:'Fraunces',serif;font-weight:400;font-size:27px;line-height:1.12;text-align:center;letter-spacing:-.01em;}
.gen .care{margin-top:20px;display:flex;flex-direction:column;gap:12px;align-items:flex-start;}
.cstep{display:flex;align-items:center;gap:12px;font-size:14px;color:var(--ink-soft);}
.cstep .dot{width:18px;height:18px;border-radius:50%;border:1.5px solid var(--olive);display:flex;align-items:center;justify-content:center;color:var(--olive);font-size:11px;flex:none;}
.cstep.done .dot{background:var(--olive);border-color:var(--olive);color:#fff;}
.cstep.now{color:var(--ink);font-weight:600;}
.cstep.now .dot{border-color:var(--brass);color:var(--brass);}
.cstep.pend{color:var(--taupe);}
.cstep.pend .dot{border-color:var(--mineral);}
.cstep .skip{color:var(--brass);font-weight:600;}

/* ===================== MENU =============================================== */
.menuhead{padding:22px 24px 4px;}
.menuhead .kick{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--olive);font-weight:700;}
.menuhead h1{font-family:'Fraunces',serif;font-weight:400;font-size:31px;line-height:1.06;letter-spacing:-.01em;margin-top:7px;}
.menuhead .sub{color:var(--ink-soft);font-size:13.5px;margin-top:8px;line-height:1.5;max-width:300px;}
.menuhead .sub b{color:var(--steel-deep);font-weight:600;}
.seg{display:inline-flex;margin:16px 24px 0;padding:4px;border-radius:999px;background:var(--greige);border:1px solid rgba(110,116,119,.16);}
.seg .s{padding:8px 18px;border-radius:999px;font-size:13px;font-weight:600;color:var(--taupe);border:none;background:none;cursor:pointer;font-family:'Archivo';}
.seg .s.on{background:var(--cashmere);color:var(--ink);box-shadow:0 1px 3px rgba(44,42,38,.1);border:1px solid rgba(110,116,119,.12);}
.seg .s .opt{color:var(--taupe);font-weight:500;}

/* Lane switcher — "This Week" | "Tonight". A prominent segmented control at the
   top of the Menu screen so the standing week and one-off dinners are two
   reachable lanes (a one-off never hides the week). */
.menu-switch{display:flex;gap:6px;margin:18px 24px 2px;padding:5px;border-radius:999px;
  background:var(--greige);border:1px solid rgba(110,116,119,.18);}
.menu-switch .msw{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:10px 14px;border-radius:999px;font-size:13.5px;font-weight:700;color:var(--taupe);
  border:none;background:none;cursor:pointer;font-family:'Archivo';letter-spacing:.01em;transition:background .15s,color .15s;}
.menu-switch .msw.on{background:var(--cashmere);color:var(--ink);
  box-shadow:0 1px 3px rgba(44,42,38,.12);border:1px solid rgba(110,116,119,.12);}
.menu-switch .msw.empty:not(.on){opacity:.6;}
.menu-switch .msw .swc{min-width:18px;height:18px;padding:0 5px;border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;
  background:rgba(176,141,87,.16);color:#8a6a35;border:1px solid rgba(176,141,87,.3);}

/* Per-lane picker — prior weeks (Week lane) or recent one-off meals (Tonight). */
.lanepick{display:flex;gap:8px;overflow-x:auto;padding:14px 24px 2px;margin:0;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;}
.lanepick::-webkit-scrollbar{display:none;}
.lanepick .lanechip{flex:none;min-height:44px;padding:7px 16px;border-radius:999px;font-size:12.5px;font-weight:600;
  display:inline-flex;align-items:center;
  color:var(--ink-soft);background:var(--cashmere);border:1px solid rgba(110,116,119,.2);
  cursor:pointer;font-family:'Archivo';white-space:nowrap;}
.lanepick .lanechip.on{background:rgba(94,107,79,.12);color:var(--olive);border-color:rgba(94,107,79,.4);font-weight:700;}

.pool{padding:18px 20px 0;display:flex;flex-direction:column;gap:13px;}
.meal{display:flex;align-items:stretch;border-radius:20px;background:var(--cashmere);border:1px solid rgba(110,116,119,.16);
  overflow:hidden;box-shadow:0 14px 30px -26px rgba(44,42,38,.4);position:relative;}
/* "shopping this" select toggle (phased shopping) — top-left checkmark chip */
.shopsel{position:absolute;top:9px;left:9px;z-index:3;width:24px;height:24px;border-radius:50%;cursor:pointer;
  background:var(--cashmere);border:1.5px solid rgba(110,116,119,.34);display:flex;align-items:center;justify-content:center;color:transparent;padding:0;}
.shopsel svg{width:14px;height:14px;stroke:currentColor;stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round;}
.shopsel.on{background:linear-gradient(150deg,#6c7a59,var(--olive) 60%,#52603f);border-color:var(--olive);color:#fff;}
.meal.unshopped{opacity:.62;}
.meal.unshopped .rail{filter:grayscale(.4);}
.meal .rail{width:62px;flex:none;background:linear-gradient(150deg,#EFECE5,#E7E2D9);border-right:1px solid rgba(110,116,119,.13);
  display:flex;align-items:center;justify-content:center;}
.mono{width:38px;height:38px;border-radius:50%;position:relative;background:radial-gradient(70% 70% at 40% 30%, #fbf9f5, #efece5 70%, #e7e2d9);
  border:1px solid rgba(110,116,119,.3);box-shadow:inset 0 1px 2px rgba(255,255,255,.9);}
.mono .r{position:absolute;inset:4px;border-radius:50%;border:1px solid var(--steel);}
.mono .d1,.mono .d2{position:absolute;top:50%;width:2.6px;height:2.6px;border-radius:50%;background:var(--brass);transform:translateY(-50%);}
.mono .d1{left:2px;} .mono .d2{right:2px;}
.mono .l{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:'Fraunces',serif;font-weight:400;font-size:17px;
  background:linear-gradient(160deg,#b8b3a6,#6E7477 55%,#565b5d);-webkit-background-clip:text;background-clip:text;color:transparent;}
.mealbody{flex:1;padding:15px 16px 14px;display:flex;flex-direction:column;cursor:pointer;}
.mealbody .ck{font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--taupe);font-weight:700;}
.mealbody h3{font-family:'Fraunces',serif;font-weight:400;font-size:calc(19px * var(--ts-scale));line-height:1.12;margin-top:5px;letter-spacing:-.01em;}
.mealmeta{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap;}
.mealmeta .t{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;color:var(--ink-soft);}
.mealmeta .t .pr{padding:2px 9px;border-radius:999px;background:rgba(94,107,79,.1);color:var(--olive);font-weight:600;font-size:10.5px;}
.mealmeta .daytag{padding:3px 11px;border-radius:999px;background:rgba(176,141,87,.12);border:1px solid rgba(176,141,87,.32);color:#8a6a35;font-weight:700;font-size:10.5px;letter-spacing:.04em;}
/* 2 OPTIONS — the "or: <other dish>" picker on a dinner card. The chosen recipe
   is the title above; this row surfaces the alternate one tap away. Marble/brass
   palette, ≥44px tap target on the alternate button. */
.mealopts{display:flex;align-items:center;gap:9px;margin-top:11px;flex-wrap:wrap;}
.mealopts .mo-badge{flex:none;padding:3px 10px;border-radius:999px;background:rgba(176,141,87,.12);border:1px solid rgba(176,141,87,.32);color:#8a6a35;font-weight:700;font-size:10px;letter-spacing:.07em;text-transform:uppercase;}
.mealopts .mo-alt{flex:1 1 auto;min-width:0;min-height:44px;display:flex;align-items:center;gap:6px;text-align:left;padding:7px 13px;border-radius:13px;background:var(--greige);border:1px solid rgba(110,116,119,.16);color:var(--ink);cursor:pointer;font-size:12.5px;}
.mealopts .mo-alt:hover{border-color:rgba(176,141,87,.4);background:#F2EEE6;}
.mealopts .mo-alt .mo-or{flex:none;color:var(--taupe);font-weight:700;letter-spacing:.02em;}
.mealopts .mo-alt .mo-at{font-family:'Fraunces',serif;font-weight:400;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
/* 2 OPTIONS — "Use this one" promote bar in the recipe sheet (preview of the
   other option). Sits in the sheet footer; matches the qt-foot border rhythm. */
.optionpick-foot{flex:none;padding-top:14px;margin-top:4px;border-top:1px solid rgba(44,42,38,.08);display:flex;align-items:center;justify-content:space-between;gap:12px;}
.optionpick-foot[hidden]{display:none;}
.optionpick-foot .op-note{font-size:12.5px;color:var(--ink-soft);}
.optionpick-foot .op-use{flex:none;min-height:44px;padding:13px 22px;border-radius:999px;border:none;cursor:pointer;font-size:14.5px;font-weight:600;color:#fff;background:linear-gradient(145deg,#c19a63,var(--brass) 60%,#9a7846);}
.optionpick-foot .op-use:active{transform:translateY(1px);}
.mealact{display:flex;flex-direction:column;justify-content:center;gap:10px;padding:0 14px 0 4px;border-left:1px solid rgba(110,116,119,.1);}
.actbtn{width:34px;height:34px;border-radius:50%;background:var(--greige);border:1px solid rgba(110,116,119,.14);display:flex;align-items:center;justify-content:center;color:var(--ink-soft);cursor:pointer;}
.actbtn svg{width:16px;height:16px;}
.meal.assigned .rail{background:linear-gradient(150deg,#F0ECE3,#EAE2D4);}
.menufoot{padding:20px 20px 28px;display:flex;flex-direction:column;gap:12px;}
.regenrow{display:flex;align-items:center;justify-content:center;gap:9px;padding:14px;border-radius:999px;background:var(--cashmere);
  border:1px solid rgba(110,116,119,.2);font-size:14px;font-weight:600;color:var(--ink);cursor:pointer;font-family:'Archivo';}
.regenrow svg{width:17px;height:17px;color:var(--steel-deep);}
.tolist{border:none;font-weight:600;font-size:16px;color:#fff;background:linear-gradient(145deg,#6c7a59,var(--olive) 60%,#52603f);
  padding:18px;border-radius:999px;box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 16px 28px -13px rgba(94,107,79,.62);
  display:flex;align-items:center;justify-content:center;gap:11px;cursor:pointer;font-family:'Archivo';}
.tolist svg{width:19px;height:19px;}
.tolist .cnt{padding:2px 9px;border-radius:999px;background:rgba(255,255,255,.18);font-size:12px;}
.tolist:disabled{opacity:.55;cursor:default;}
/* ADDITIONAL "shop everything scheduled" — secondary to the primary build button:
   a quiet marble/cashmere pill (outlined), so it reads as an extra option, not a
   replacement. min 48px tall keeps a comfortable ≥44px tap target. */
.buildall{min-height:48px;display:flex;align-items:center;justify-content:center;gap:10px;padding:13px 18px;
  border-radius:999px;background:var(--cashmere);border:1px solid rgba(110,116,119,.28);
  font-family:'Archivo';font-size:15px;font-weight:600;color:var(--ink);cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5);}
.buildall svg{width:18px;height:18px;color:var(--steel-deep);}
.buildall:disabled{opacity:.55;cursor:default;}
.menu-empty .sub b{color:var(--olive);}

/* ---- "By day" week view (7 days × 2 options, pick one per day) ---------- */
.dayblock{margin-bottom:22px;}
.dayhead{display:flex;align-items:baseline;justify-content:space-between;margin:2px 2px 10px;}
.dayhead .dn{font-family:'Fraunces',serif;font-size:16px;color:var(--ink);letter-spacing:-.01em;}
.dayhead .dh{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--taupe);font-weight:700;}
/* the two option cards on a day sit a touch tighter than the flat pool */
.dayblock .meal.opt{margin-bottom:9px;}
.dayblock .meal.opt:last-child{margin-bottom:0;}
/* the unpicked option reads quieter; the picked one gets an olive ring */
.meal.opt:not(.picked){opacity:.78;}
.meal.opt.picked{opacity:1;border-color:rgba(94,107,79,.5);box-shadow:0 14px 30px -24px rgba(94,107,79,.6), 0 0 0 1.5px rgba(94,107,79,.32) inset;}
.meal.opt.picked .rail{background:linear-gradient(150deg,#EFF1EA,#E4E9DA);}
.picktag{display:inline-flex;align-items:center;gap:4px;padding:3px 11px;border-radius:999px;font-size:10.5px;font-weight:700;letter-spacing:.03em;
  background:var(--greige);border:1px solid rgba(110,116,119,.2);color:var(--taupe);cursor:pointer;}
.picktag.on{background:rgba(94,107,79,.12);border-color:rgba(94,107,79,.4);color:var(--olive);cursor:default;}

/* ---- TRUE WEEK CALENDAR (MON–SUN, driven by meal.assignedDay) ----------- */
/* A vertical stack of 7 day cells (mobile-first). Planned days carry a marble
   recipe row; empty days carry a calm placeholder. The whole recipe row is a
   ≥44px tap target that opens the recipe. */
.weekcal{display:flex;flex-direction:column;gap:11px;padding-top:4px;}
.daycell{border-radius:18px;background:var(--cashmere);border:1px solid rgba(110,116,119,.16);
  padding:13px 14px 14px;box-shadow:0 14px 30px -28px rgba(44,42,38,.4);}
.daycell.empty{background:rgba(244,241,235,.55);border-style:dashed;border-color:rgba(110,116,119,.28);box-shadow:none;}
.dch{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:10px;}
.daycell.empty .dch{margin-bottom:8px;}
.dch .dcd{font-family:'Fraunces',serif;font-size:17px;color:var(--ink);letter-spacing:-.01em;}
.dch .dcc{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--taupe);font-weight:700;}
.daycell.has .dch .dcd{color:var(--ink);}
/* the empty-day placeholder — quiet, with a subtle assign affordance */
.dcempty{display:flex;flex-direction:column;gap:2px;padding:6px 2px 4px;}
.dcempty .dce-t{font-size:13px;color:var(--taupe);font-weight:600;}
.dcempty .dce-s{font-size:11px;color:var(--taupe);opacity:.78;}
/* compact recipe row in a day cell (stacks if two meals share a day) */
.calrx{display:flex;align-items:center;gap:11px;min-height:48px;cursor:pointer;border-radius:13px;
  padding:6px;margin:0 -6px;transition:background .15s var(--ease);}
.calrx + .calrx{margin-top:7px;border-top:1px solid rgba(110,116,119,.1);padding-top:13px;}
.calrx:active{background:rgba(231,226,217,.6);}
.calrx:focus-visible{outline:2px solid var(--olive);outline-offset:1px;}
.calrx .rail{width:46px;height:46px;flex:none;border-radius:12px;background:linear-gradient(150deg,#EFECE5,#E7E2D9);
  border:1px solid rgba(110,116,119,.14);display:flex;align-items:center;justify-content:center;}
.calrx .mono{width:30px;height:30px;}
.calrx .mono .l{font-size:13px;}
.calbody{flex:1;min-width:0;}
.calbody h4{font-family:'Fraunces',serif;font-weight:400;font-size:calc(16.5px * var(--ts-scale));line-height:1.12;
  letter-spacing:-.01em;margin:0;color:var(--ink);}
.calmeta{display:flex;gap:9px;margin-top:5px;flex-wrap:wrap;}
.calmeta .t{display:inline-flex;align-items:center;gap:4px;font-size:11px;color:var(--ink-soft);}
.calchev{width:18px;height:18px;flex:none;stroke:var(--steel-deep);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;opacity:.7;}
/* "Unplanned" pool below the 7 days — reuses the flat .meal cards */
.unplanned{margin-top:22px;padding-top:18px;border-top:1px solid rgba(110,116,119,.16);}
.unplanned .dayhead{margin:0 2px 12px;}
.unplanned .meal{margin-bottom:13px;}
.unplanned .meal:last-child{margin-bottom:0;}

/* interactive calendar — the whole day cell is a tap target */
.daycell{cursor:pointer;transition:transform .12s var(--ease),box-shadow .12s var(--ease);}
.daycell:active{transform:scale(.992);}
.daycell:focus-visible{outline:2px solid var(--olive);outline-offset:2px;}
.daycell.empty:active{background:rgba(231,226,217,.6);}

/* ---- DAY PLANNER sheet (picker + edit) — mirrors .rdetail-overlay -------- */
#dayplan-scroll{padding-bottom:8px;}
.dp-grouplabel{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--olive);font-weight:700;
  padding:18px 2px 10px;}
.dp-grouplabel:first-child{padding-top:6px;}
.dp-empty{font-size:13px;color:var(--taupe);padding:4px 2px 8px;}
/* a tappable recipe card in the picker */
.dp-pick{display:flex;align-items:center;gap:12px;width:100%;text-align:left;margin:0 0 11px;padding:11px 13px;
  border-radius:18px;background:var(--cashmere);border:1px solid rgba(110,116,119,.16);cursor:pointer;
  box-shadow:0 14px 30px -28px rgba(44,42,38,.4);font-family:'Archivo';}
.dp-pick:active{background:var(--greige);}
.dp-pick:focus-visible{outline:2px solid var(--olive);outline-offset:1px;}
.dp-pick .rail{width:44px;height:44px;flex:none;border-radius:12px;background:linear-gradient(150deg,#EFECE5,#E7E2D9);
  border:1px solid rgba(110,116,119,.14);display:flex;align-items:center;justify-content:center;}
.dp-pick .mono{width:29px;height:29px;}
.dp-pick .mono .l{font-size:13px;}
.dp-pick-body{flex:1;min-width:0;}
.dp-pick-body h4{font-family:'Fraunces',serif;font-weight:400;font-size:calc(16.5px * var(--ts-scale));line-height:1.12;
  letter-spacing:-.01em;margin:0;color:var(--ink);}
.dp-fav{color:var(--brass);font-size:13px;}
.dp-add{flex:none;align-self:center;padding:7px 15px;border-radius:999px;font-size:12.5px;font-weight:700;letter-spacing:.02em;
  background:rgba(94,107,79,.12);border:1px solid rgba(94,107,79,.34);color:var(--olive);}
/* filled-day edit block */
.dp-current{padding-top:4px;}
.dp-meal{padding:14px 0;border-bottom:1px solid rgba(110,116,119,.12);}
.dp-meal:last-child{border-bottom:none;}
.dp-meal-body h4{font-family:'Fraunces',serif;font-weight:400;font-size:calc(20px * var(--ts-scale));line-height:1.12;
  letter-spacing:-.01em;margin:0;color:var(--ink);}
.dp-acts{display:flex;gap:9px;margin-top:14px;flex-wrap:wrap;}
.dp-act{flex:1;min-width:96px;min-height:46px;border-radius:14px;font-family:'Archivo';font-size:14px;font-weight:600;
  cursor:pointer;border:1px solid rgba(110,116,119,.2);background:var(--cashmere);color:var(--ink);}
.dp-act:active{background:var(--greige);}
.dp-act:focus-visible{outline:2px solid var(--olive);outline-offset:1px;}
.dp-open{background:linear-gradient(145deg,#6c7a59,var(--olive) 60%,#52603f);border:none;color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2);}
.dp-clear{color:var(--aubergine);border-color:rgba(74,47,82,.3);}

/* STACKING — "add another", whole-day clear, and "Done" in the day planner */
.dp-addmore{display:block;width:100%;min-height:48px;margin:14px 0 4px;border-radius:14px;cursor:pointer;
  font-family:'Archivo';font-size:14px;font-weight:700;letter-spacing:.02em;color:var(--olive);
  background:rgba(94,107,79,.10);border:1px dashed rgba(94,107,79,.42);}
.dp-addmore:active{background:rgba(94,107,79,.18);}
.dp-addmore:focus-visible{outline:2px solid var(--olive);outline-offset:1px;}
.dp-clearall{display:block;width:100%;min-height:46px;margin:8px 0 2px;border-radius:14px;cursor:pointer;
  font-family:'Archivo';font-size:13px;font-weight:600;color:var(--aubergine);
  background:transparent;border:1px solid rgba(74,47,82,.28);}
.dp-clearall:active{background:rgba(74,47,82,.06);}
.dp-clearall:focus-visible{outline:2px solid var(--olive);outline-offset:1px;}
.dp-done{display:block;width:100%;min-height:50px;margin:18px 0 6px;border-radius:16px;cursor:pointer;
  font-family:'Archivo';font-size:15px;font-weight:700;letter-spacing:.02em;color:#fff;border:none;
  background:linear-gradient(145deg,#6c7a59,var(--olive) 60%,#52603f);box-shadow:inset 0 1px 0 rgba(255,255,255,.2);}
.dp-done:active{filter:brightness(.96);}
.dp-done:focus-visible{outline:2px solid var(--olive);outline-offset:2px;}

/* "Add to a day" affordance on the recipe detail sheet */
.rd-addday{display:inline-flex;align-items:center;gap:8px;margin:14px 24px 2px;min-height:44px;padding:0 16px;
  border-radius:999px;cursor:pointer;font-family:'Archivo';font-size:13.5px;font-weight:700;letter-spacing:.02em;
  color:var(--olive);background:rgba(94,107,79,.12);border:1px solid rgba(94,107,79,.34);}
.rd-addday svg{width:17px;height:17px;stroke:var(--olive);stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round;}
.rd-addday:active{background:rgba(94,107,79,.2);}
.rd-addday:focus-visible{outline:2px solid var(--olive);outline-offset:1px;}

/* "Add to a day" affordance on a Library card */
.rcard-addday{display:inline-flex;align-items:center;gap:7px;margin:10px 0 0;min-height:44px;padding:0 14px;
  border-radius:999px;cursor:pointer;font-family:'Archivo';font-size:12.5px;font-weight:700;letter-spacing:.02em;
  color:var(--olive);background:rgba(94,107,79,.10);border:1px solid rgba(94,107,79,.30);}
.rcard-addday svg{width:16px;height:16px;stroke:var(--olive);stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round;}
.rcard-addday:active{background:rgba(94,107,79,.18);}
.rcard-addday:focus-visible{outline:2px solid var(--olive);outline-offset:1px;}

/* RECIPE-FIRST add-to-day picker — scrollable Mon–Sun list */
.addday-sub{padding:2px 24px 6px;font-size:13.5px;line-height:1.4;color:var(--taupe);}
.addday-sub b{color:var(--ink);font-weight:600;}
.addday-row{display:flex;align-items:center;gap:12px;width:100%;text-align:left;margin:0 0 11px;padding:13px 15px;
  border-radius:18px;background:var(--cashmere);border:1px solid rgba(110,116,119,.16);cursor:pointer;
  box-shadow:0 14px 30px -28px rgba(44,42,38,.4);font-family:'Archivo';min-height:60px;}
.addday-row:active{background:var(--greige);}
.addday-row:focus-visible{outline:2px solid var(--olive);outline-offset:1px;}
.addday-row-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;}
.addday-day{font-family:'Fraunces',serif;font-weight:400;font-size:calc(18px * var(--ts-scale));line-height:1.1;
  letter-spacing:-.01em;color:var(--ink);}
.addday-stack{font-size:12.5px;line-height:1.3;color:var(--taupe);overflow:hidden;text-overflow:ellipsis;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
.addday-noweek{text-align:center;padding:24px 12px;}
.addday-noweek-t{font-family:'Fraunces',serif;font-weight:400;font-size:21px;color:var(--ink);margin-bottom:8px;}
.addday-noweek-s{font-size:13.5px;line-height:1.45;color:var(--taupe);margin-bottom:18px;}

/* ===================== LIBRARY ========================================== */
.libhead{padding:22px 24px 4px;}
.libhead h1{font-family:'Fraunces',serif;font-weight:400;font-size:31px;line-height:1.06;letter-spacing:-.01em;}
.searchrow{display:flex;align-items:center;gap:11px;margin:16px 24px 0;padding:13px 16px;border-radius:14px;background:var(--cashmere);
  border:1px solid rgba(110,116,119,.22);box-shadow:inset 0 1px 2px rgba(44,42,38,.04);}
.searchrow svg{width:17px;height:17px;color:var(--steel-deep);}
.searchrow .lib-input{flex:1;border:none;outline:none;background:transparent;font-family:'Archivo';font-size:14px;color:var(--ink);}
.searchrow .lib-input::placeholder{color:var(--taupe);}
.views{display:flex;gap:9px;padding:16px 24px 4px;flex-wrap:wrap;}
.view{padding:9px 15px;border-radius:999px;background:var(--greige);border:1px solid rgba(110,116,119,.16);font-size:13px;font-weight:600;color:var(--ink-soft);cursor:pointer;font-family:'Archivo';}
.view.on{background:rgba(94,107,79,.12);border:1.5px solid var(--olive);color:var(--olive);}
.smalllabel{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--taupe);font-weight:700;padding:22px 24px 0;display:flex;align-items:center;gap:10px;}
.smalllabel::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--mineral),transparent);}
.cards{padding:14px 20px 0;display:flex;flex-direction:column;gap:13px;}
/* in select mode the fixed Build-list bar overlays the bottom — give the last
   card room so it isn't hidden behind the bar. */
.cards.selectmode{padding-bottom:64px;}
/* select row: "Your recipes" label + a "Select" toggle on the right */
.libselectrow{display:flex;align-items:center;gap:12px;padding-right:24px;}
.libselectrow #lib-section{flex:1;}
.libselbtn{flex:none;display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;cursor:pointer;
  background:var(--greige);border:1px solid rgba(110,116,119,.2);font-family:'Archivo';font-size:12px;font-weight:600;color:var(--ink-soft);}
.libselbtn svg{width:14px;height:14px;stroke:currentColor;stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round;}
.libselbtn.on{background:rgba(94,107,79,.12);border-color:var(--olive);color:var(--olive);font-weight:700;}
.rcard{position:relative;display:flex;align-items:stretch;border-radius:20px;background:var(--cashmere);border:1px solid rgba(110,116,119,.16);
  overflow:hidden;box-shadow:0 14px 30px -26px rgba(44,42,38,.4);}
/* select mode: card is tappable; picked = olive ring + checkmark badge */
.rcard.selectable{cursor:pointer;}
.rcard.selectable .rbody .signal{opacity:.4;pointer-events:none;}
.rcard.picked{border-color:var(--olive);box-shadow:0 0 0 1.5px var(--olive) inset, 0 14px 30px -26px rgba(44,42,38,.4);}
.rcard-check{position:absolute;top:9px;right:9px;z-index:4;width:24px;height:24px;border-radius:50%;
  background:var(--cashmere);border:1.5px solid rgba(110,116,119,.34);display:flex;align-items:center;justify-content:center;color:transparent;}
.rcard-check svg{width:14px;height:14px;stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round;}
.rcard.picked .rcard-check{background:linear-gradient(150deg,#6c7a59,var(--olive) 60%,#52603f);border-color:var(--olive);color:#fff;}
/* the picked-state pushes the fav heart left so it doesn't sit under the check */
.rcard.selectable .rtop .fav{margin-right:30px;}
/* pinned "Build list (N)" bar — sits above the fixed tab nav (104px + safe-area) */
.libbuildbar{position:fixed;left:50%;transform:translateX(-50%);
  bottom:calc(104px + env(safe-area-inset-bottom));z-index:35;
  width:min(430px,100vw);padding:12px 20px;
  background:linear-gradient(0deg,var(--cashmere) 80%,rgba(244,241,235,.85) 95%,transparent);}
@media (min-width:480px){.libbuildbar{bottom:calc(104px + env(safe-area-inset-bottom) + 32px);}}
.libbuildbar .mgo{width:100%;justify-content:center;margin-top:0;padding:15px;font-size:15.5px;}
.rcard .rail{width:66px;flex:none;background:linear-gradient(150deg,#EFECE5,#E7E2D9);border-right:1px solid rgba(110,116,119,.13);
  display:flex;align-items:center;justify-content:center;}
.rcard .mono{width:42px;height:42px;}
.rcard .mono .l{font-size:19px;}
.rbody{flex:1;padding:15px 16px 14px;}
.rtop{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;}
.rbody h3{font-family:'Fraunces',serif;font-weight:400;font-size:calc(19px * var(--ts-scale));line-height:1.12;letter-spacing:-.01em;flex:1;cursor:pointer;}
.fav{width:26px;height:26px;flex:none;display:flex;align-items:center;justify-content:center;color:var(--mineral);background:none;border:none;cursor:pointer;}
.fav svg{width:19px;height:19px;}
.fav.on{color:var(--brass);}
.fav.on svg{fill:var(--brass);}
.rcard .rmeta{display:flex;gap:8px;margin-top:11px;flex-wrap:wrap;align-items:center;}
.rcard .rmeta .t{font-size:11.5px;color:var(--ink-soft);}
.rcard .rmeta .dot{width:3px;height:3px;border-radius:50%;background:var(--mineral);}
.cooked{font-size:11px;color:var(--taupe);}
.cooked b{color:var(--ink-soft);font-weight:600;}
.signal{display:flex;gap:9px;margin-top:13px;padding-top:12px;border-top:1px solid rgba(110,116,119,.1);}
.sbtn{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:999px;background:var(--greige);border:1px solid rgba(110,116,119,.14);font-size:12px;font-weight:600;color:var(--ink-soft);cursor:pointer;font-family:'Archivo';}
.sbtn svg{width:14px;height:14px;}
.sbtn.made.on{background:rgba(94,107,79,.12);border-color:rgba(94,107,79,.34);color:var(--olive);}
.sbtn.like{margin-left:auto;}
.sbtn.like.on{background:rgba(176,141,87,.12);border-color:rgba(176,141,87,.36);color:#8a6a35;}
.sbtn.dislike.on{background:rgba(107,58,52,.1);border-color:rgba(107,58,52,.3);color:#6B3A34;}
.sbtn.icon{padding:7px;width:32px;justify-content:center;}
.rcard.buried{opacity:.55;}
.rcard.buried .rail{filter:saturate(.6);}
.buriednote{font-size:11px;color:var(--taupe);margin-top:11px;padding-top:11px;border-top:1px solid rgba(110,116,119,.1);display:flex;align-items:center;gap:7px;}
.buriednote svg{width:13px;height:13px;color:var(--taupe);}

/* ===================== SHOPPING LIST (full) ============================= */
/* Focused flow (own back button; bottom nav hidden) → fixed viewport height so
   .list-scroll{flex:1} scrolls and .listfoot pins to the true bottom. */
.listscreen{background:var(--cashmere);display:flex;flex-direction:column;height:100dvh;}
@media (min-width:480px){.listscreen{height:calc(100dvh - 64px);}}
.listhead{padding:22px 24px 4px;}
.listhead h1{font-family:'Fraunces',serif;font-weight:400;font-size:31px;line-height:1.06;letter-spacing:-.01em;}
.prog{margin-top:14px;display:flex;align-items:center;gap:12px;}
.prog .track{flex:1;height:5px;border-radius:999px;background:var(--mushroom);overflow:hidden;}
.prog .fill{height:100%;width:0%;border-radius:999px;background:linear-gradient(90deg,var(--brass-soft),var(--brass));transition:width .3s var(--ease);}
.prog .pc{font-size:12px;color:var(--ink-soft);font-weight:600;flex:none;}
.fromrow{margin-top:11px;font-size:12px;color:var(--taupe);}
.fromrow b{color:var(--steel-deep);font-weight:600;}
/* trip switcher (multiple coexisting lists) */
.list-switch{display:flex;gap:7px;margin-top:13px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:2px;}
.list-switch::-webkit-scrollbar{display:none;}
.tripchip{flex:none;display:inline-flex;align-items:center;gap:6px;padding:8px 13px;border-radius:999px;cursor:pointer;white-space:nowrap;
  background:var(--cashmere);border:1px solid rgba(110,116,119,.2);font-family:'Archivo';font-size:12.5px;font-weight:600;color:var(--ink-soft);}
.tripchip.on{background:rgba(94,107,79,.12);border-color:rgba(94,107,79,.42);color:var(--olive);font-weight:700;}
.tripchip .tc{min-width:16px;height:16px;padding:0 4px;border-radius:999px;background:var(--brass);color:#fff;font-size:10px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;}
/* view toggle + manage-all share one controls row */
.list-controls{display:flex;align-items:center;gap:10px;margin-top:14px;flex-wrap:wrap;}
.list-viewtoggle{display:inline-flex;gap:4px;padding:3px;border-radius:999px;background:var(--greige);border:1px solid rgba(110,116,119,.16);}
.vtbtn{padding:7px 13px;border-radius:999px;cursor:pointer;background:none;border:none;font-family:'Archivo';font-size:12px;font-weight:600;color:var(--ink-soft);}
.vtbtn.on{background:var(--cashmere);color:var(--ink);box-shadow:0 2px 8px -4px rgba(44,42,38,.4);}
/* manage-all bar (Check all / Clear all) */
.list-allbar{display:flex;gap:9px;margin-left:auto;}
/* "Do I have this at home?" quick pantry lookup (secondary, glance-while-shopping) */
.pantrycheck{margin-top:12px;}
.pc-input{display:flex;align-items:center;gap:9px;padding:10px 13px;border-radius:13px;
  background:var(--greige);border:1px solid rgba(110,116,119,.18);}
.pc-input svg{width:15px;height:15px;color:var(--taupe);stroke:currentColor;stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round;flex:none;}
.pc-input input{flex:1;min-width:0;border:none;outline:none;background:transparent;font-family:'Archivo';font-size:13.5px;color:var(--ink);}
.pc-input input::placeholder{color:var(--taupe);}
.pc-input input::-webkit-search-cancel-button{-webkit-appearance:none;}
.pc-result{display:flex;align-items:center;gap:8px;margin-top:9px;padding:9px 13px;border-radius:11px;
  font-size:12.5px;line-height:1.4;font-family:'Archivo';}
.pc-result b{font-weight:600;}
.pc-result .pc-dot{width:8px;height:8px;border-radius:50%;flex:none;}
.pc-result.have{background:rgba(94,107,79,.09);color:var(--olive);}
.pc-result.have .pc-dot{background:var(--olive);}
.pc-result.have b{color:var(--ink);}
.pc-result.low{background:rgba(176,141,87,.1);color:#8a6a35;}
.pc-result.low .pc-dot{background:var(--brass);}
.pc-result.out{background:rgba(74,47,82,.09);color:var(--aubergine);}
.pc-result.out .pc-dot{background:var(--aubergine);}
.pc-result.miss{background:var(--cashmere);color:var(--ink-soft);border:1px solid rgba(110,116,119,.16);}
.pc-result.miss .pc-dot{background:var(--mineral);}
.allbtn{display:inline-flex;align-items:center;gap:7px;padding:9px 14px;border-radius:999px;cursor:pointer;
  background:var(--cashmere);border:1px solid rgba(110,116,119,.22);font-family:'Archivo';font-size:12.5px;font-weight:600;color:var(--ink-soft);}
.allbtn svg{width:15px;height:15px;stroke:currentColor;stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round;}
.allbtn:active{background:var(--greige);}
.allbtn.danger{color:#6B3A34;border-color:rgba(107,58,52,.3);}
.allbtn.danger svg{stroke:#6B3A34;}
.allbtn.armed{background:linear-gradient(150deg,#ECE0DE,#E6D6D2);border-color:#6B3A34;color:#6B3A34;font-weight:700;}
/* scrollable middle so the manual add-line + store panel are always reachable
   (Fix #4) and never clipped under the sticky footer. */
.list-scroll{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;}
.aisle{padding:22px 24px 0;}
.aislehead{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--taupe);font-weight:700;margin-bottom:12px;display:flex;align-items:center;gap:10px;}
.aislehead .ic{font-size:14px;}
.aislehead::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--mineral),transparent);}
.aislehead .ct{flex:none;color:var(--taupe);font-weight:600;letter-spacing:.04em;}
.line{display:flex;align-items:center;gap:14px;padding:13px 4px;border-bottom:1px solid rgba(110,116,119,.09);cursor:pointer;}
.line:last-child{border-bottom:none;}
.box{width:24px;height:24px;border-radius:8px;border:1.6px solid var(--steel);flex:none;display:flex;align-items:center;justify-content:center;color:transparent;}
.line.done .box{background:var(--olive);border-color:var(--olive);color:#fff;}
.line.done .box svg{width:14px;height:14px;}
.qty{font-family:'Fraunces',serif;font-size:16px;color:var(--ink);min-width:62px;flex:none;}
.qty .u{font-size:12px;color:var(--ink-soft);font-family:'Archivo';font-weight:600;}
.line .nm{flex:1;font-size:calc(15px * var(--ts-scale));color:var(--ink);line-height:1.35;}
.line .nm .src{display:block;font-size:calc(11px * var(--ts-scale));color:var(--read-soft);margin-top:2px;}
.merged{flex:none;display:inline-flex;align-items:center;gap:5px;padding:4px 9px;border-radius:999px;background:rgba(94,107,79,.1);border:1px solid rgba(94,107,79,.24);font-size:10.5px;font-weight:700;color:var(--olive);letter-spacing:.03em;}
.line.done .qty,.line.done .nm{color:var(--taupe);text-decoration:line-through;text-decoration-color:rgba(138,130,117,.5);}
.line.done .qty .u{color:var(--taupe);}
.line.nudge .nm .src{color:#8a6a35;}
/* STRONG "you have this staple — check you have enough" flag (live pantry). A
   confident olive tag, distinct from the soft brass low/out nudge — having SOME
   ≠ having ENOUGH, so we keep it on the buy list but clearly marked. */
.line .nm .src.strong{color:var(--olive);font-weight:600;}
.line.havestaple{background:rgba(94,107,79,.05);}
.line.havestaple .nm{font-weight:500;}
.nudgedot{width:7px;height:7px;border-radius:50%;background:var(--brass);box-shadow:0 0 0 3px rgba(176,141,87,.15);flex:none;margin-left:2px;}
/* "In pantry" trailing-edge control (Fix #5) — actionable, separate from the
   passive nudgedot. Sits at the row's trailing edge; never overlaps box/qty. */
.inpantry{flex:none;margin-left:6px;padding:6px 11px;border-radius:999px;cursor:pointer;font-family:'Archivo';
  font-size:11px;font-weight:700;letter-spacing:.02em;white-space:nowrap;
  background:var(--greige);border:1px solid rgba(110,116,119,.2);color:var(--ink-soft);}
.inpantry.suggested{background:rgba(176,141,87,.12);border-color:rgba(176,141,87,.4);color:#8a6a35;}
.inpantry.on{background:rgba(94,107,79,.12);border-color:rgba(94,107,79,.34);color:var(--olive);}
.inpantry:active{transform:scale(.96);}
/* set-aside line + group: quietly de-emphasised, still legible */
.line.aside{cursor:default;}
.line.aside .qty,.line.aside .nm{color:var(--taupe);}
.aisle.setaside{opacity:.82;}
.aisle.setaside .aislehead{color:var(--olive);}
.addline{display:flex;align-items:center;gap:14px;padding:14px 24px;color:var(--taupe);cursor:text;}
.addline.standalone{border-top:1px solid rgba(110,116,119,.09);margin-top:8px;}
.addline .plus{width:24px;height:24px;border-radius:8px;border:1.6px dashed rgba(110,116,119,.4);display:flex;align-items:center;justify-content:center;font-size:16px;color:var(--steel-deep);flex:none;}
.addline .addline-input{flex:1;border:none;outline:none;background:transparent;font-family:'Archivo';font-size:14px;color:var(--ink);}
.addline .addline-input::placeholder{color:var(--taupe);}
/* Discoverable top "Add item" affordance — pinned in the list head so testers
   find it without scrolling past every aisle. Same handler as the bottom line. */
.list-addtop{margin-top:14px;}
.addtop-btn{display:inline-flex;align-items:center;gap:9px;padding:9px 16px 9px 12px;border-radius:999px;
  border:1.4px solid rgba(110,116,119,.32);background:var(--cashmere);color:var(--ink);
  font-family:'Archivo';font-size:14px;font-weight:600;letter-spacing:.01em;cursor:pointer;
  box-shadow:0 1px 2px rgba(44,42,38,.05);transition:border-color .15s,box-shadow .15s;}
.addtop-btn:hover,.addtop-btn:focus-visible{border-color:var(--steel-deep);box-shadow:0 2px 6px rgba(44,42,38,.08);}
.addtop-btn .plus{width:22px;height:22px;border-radius:7px;background:var(--brass);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:600;flex:none;}
.addtop-field{display:flex;align-items:center;gap:10px;margin-top:2px;
  padding:5px 6px 5px 14px;border-radius:14px;border:1.4px solid var(--steel-deep);background:var(--cashmere);
  box-shadow:0 2px 8px rgba(44,42,38,.07);}
.addtop-input{flex:1;border:none;outline:none;background:transparent;font-family:'Archivo';font-size:15px;color:var(--ink);}
.addtop-input::placeholder{color:var(--taupe);}
.addtop-done{flex:none;padding:8px 16px;border:none;border-radius:10px;background:var(--brass);color:#fff;
  font-family:'Archivo';font-size:13px;font-weight:700;letter-spacing:.02em;cursor:pointer;}
.listfoot{position:sticky;bottom:0;padding:16px 20px calc(24px + env(safe-area-inset-bottom));display:flex;gap:11px;margin-top:auto;
  background:linear-gradient(0deg,var(--cashmere) 72%,rgba(244,241,235,0));}
/* the list footer now holds a single full-width Share/export action */
.storebtn{flex:1;display:flex;align-items:center;justify-content:center;gap:9px;padding:15px;border-radius:999px;background:var(--cashmere);
  border:1px solid rgba(110,116,119,.22);font-size:14px;font-weight:600;color:var(--ink);cursor:pointer;font-family:'Archivo';}
.storebtn svg{width:17px;height:17px;color:var(--steel-deep);}
.storebtn.share-wide{width:100%;}

/* ===================== CAPTURE (modal flow) ============================= */
.capturescreen{background:var(--cashmere);display:flex;flex-direction:column;height:100dvh;}
@media (min-width:480px){.capturescreen{height:calc(100dvh - 64px);}}
.sheethead{display:flex;align-items:center;justify-content:space-between;padding:24px 24px 6px;}
.sheethead .x{width:30px;height:30px;border-radius:50%;background:var(--greige);border:1px solid rgba(110,116,119,.18);display:flex;align-items:center;justify-content:center;color:var(--ink-soft);font-size:15px;cursor:pointer;}
.sheethead .ttl{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--taupe);font-weight:700;}
.sheethead .step{font-size:11px;color:var(--taupe);font-weight:600;letter-spacing:.04em;}
.inwrap{padding:6px 24px 0;}
.urlfield{display:flex;align-items:center;gap:11px;padding:14px 16px;border-radius:16px;background:var(--cashmere);
  border:1px solid rgba(110,116,119,.26);margin-bottom:10px;box-shadow:inset 0 1px 2px rgba(44,42,38,.04);}
.urlfield svg{width:18px;height:18px;color:var(--steel-deep);flex:none;}
.urlfield .urlinput{flex:1;border:none;outline:none;background:transparent;font-family:'Archivo';font-size:14.5px;color:var(--ink);}
.urlfield .urlinput::placeholder{color:var(--taupe);}
.pastebtn{padding:9px 16px;border-radius:999px;background:linear-gradient(150deg,#F0EDE6,#E7E2D9);
  border:1px solid rgba(94,107,79,.3);font-size:13px;font-weight:600;color:var(--ink);flex:none;cursor:pointer;font-family:'Archivo';}
.orrow{display:flex;align-items:center;gap:14px;margin:20px 2px;}
.orrow .ln{flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--mineral),transparent);}
.orrow .w{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--taupe);font-weight:700;}
.ways{display:flex;flex-direction:column;gap:11px;}
.way{display:flex;align-items:center;gap:15px;padding:17px 18px;border-radius:18px;background:var(--greige);
  border:1px solid rgba(110,116,119,.13);width:100%;text-align:left;cursor:pointer;font-family:'Archivo';}
.way.hero{background:linear-gradient(150deg,#EFF0EA,#E9EBE2);border-color:rgba(94,107,79,.26);}
.way .wic{width:42px;height:42px;border-radius:12px;background:var(--cashmere);border:1px solid rgba(110,116,119,.18);
  display:flex;align-items:center;justify-content:center;color:var(--steel-deep);flex:none;}
.way.hero .wic{color:var(--olive);border-color:rgba(94,107,79,.3);}
.way .wic svg{width:21px;height:21px;}
.way .wt{font-size:15.5px;font-weight:600;color:var(--ink);}
.way .wl{font-size:12.5px;color:var(--ink-soft);margin-top:2px;}
.way .arr{margin-left:auto;color:var(--taupe);font-size:18px;}
.capta{width:100%;margin-top:10px;border-radius:16px;border:1px solid rgba(110,116,119,.26);background:var(--cashmere);
  padding:14px 16px;font-family:'Archivo';font-size:14px;color:var(--ink);resize:vertical;outline:none;}
#cap-text-step .genbtn{margin-top:12px;}
/* parse beat */
.parse{flex:1;background:radial-gradient(120% 70% at 50% 22%, rgba(255,255,255,.5), transparent 55%),linear-gradient(160deg,#F1EEE8,#E7E2D9 70%,#E2DCD2);
  display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px;}
.parse .narrate{margin-top:18px;display:flex;flex-direction:column;gap:11px;align-items:flex-start;}
.nstep{display:flex;align-items:center;gap:11px;font-size:14px;color:var(--ink-soft);}
.nstep .dot{width:18px;height:18px;border-radius:50%;border:1.5px solid var(--olive);display:flex;align-items:center;justify-content:center;color:var(--olive);font-size:11px;flex:none;}
.nstep.done{color:var(--ink-soft);}
.nstep.done .dot{background:var(--olive);border-color:var(--olive);color:#fff;}
.nstep.now{color:var(--ink);font-weight:600;}
.nstep.now .dot{background:var(--olive);border-color:var(--olive);color:#fff;}
.nstep.pending{color:var(--taupe);}
.nstep.pending .dot{border-color:var(--mineral);color:transparent;}
/* beat 3 confirm + measurement spotlight */
#cap-beat3{flex:1;display:flex;flex-direction:column;}
.scroll{flex:1;overflow-y:auto;padding:0 0 16px;}
.foundpill{margin:10px 24px 4px;display:inline-flex;align-items:center;gap:9px;padding:7px 14px;border-radius:999px;
  background:rgba(94,107,79,.12);border:1px solid rgba(94,107,79,.3);font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--olive);}
.foundpill .ck{width:15px;height:15px;border-radius:50%;background:var(--olive);display:flex;align-items:center;justify-content:center;color:#fff;font-size:9px;}
.rtitle{padding:14px 24px 4px;}
.rtitle h1{font-family:'Fraunces',serif;font-weight:400;font-size:30px;line-height:1.06;letter-spacing:-.01em;}
.rmeta{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap;padding:0 24px;}
.rtitle .rmeta{padding:0;}
.rmeta .m{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;background:var(--greige);border:1px solid rgba(110,116,119,.14);font-size:calc(12.5px * var(--ts-scale));color:var(--read-soft);}
.rmeta .m b{color:var(--ink);font-weight:600;}
/* Per-serving macro strip (AI-estimated nutrition). Hidden unless the recipe carries
   a complete nutrition object — newly-designed recipes only. Marble/greige aesthetic. */
.macro-strip{margin:14px 24px 0;}
.macro-strip[hidden]{display:none;}
.macro-row{display:flex;gap:8px;padding:12px 10px;border-radius:16px;background:var(--cashmere);border:1px solid rgba(110,116,119,.16);box-shadow:inset 0 1px 2px rgba(255,255,255,.7);}
.macro-cell{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center;position:relative;}
.macro-cell + .macro-cell::before{content:"";position:absolute;left:0;top:14%;height:72%;width:1px;background:rgba(110,116,119,.16);}
.macro-val{font-family:'Fraunces',serif;font-size:calc(18px * var(--ts-scale));font-weight:600;color:var(--ink);line-height:1;}
.macro-unit{font-family:'Archivo',sans-serif;font-size:calc(11px * var(--ts-scale));font-weight:600;color:var(--ink-soft);margin-left:1px;}
.macro-lab{font-size:calc(10.5px * var(--ts-scale));letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);font-weight:600;}
.macro-note{margin-top:8px;padding:0 4px;font-size:calc(11px * var(--ts-scale));line-height:1.45;color:var(--taupe);font-style:italic;text-align:center;}
.cap-allergen{margin:12px 24px 0;padding:12px 16px;border-radius:14px;background:rgba(107,58,52,.08);border:1px solid rgba(107,58,52,.3);font-size:13px;color:#6B3A34;line-height:1.45;}
.cap-allergen b{font-weight:700;}
.spotnote{margin:10px 24px 0;font-size:13px;color:var(--ink-soft);line-height:1.5;}
.spotnote b{color:var(--brass);font-weight:700;}
.ingt{padding:12px 18px 6px;margin:14px 20px 0;border-radius:20px;background:var(--cashmere);border:1px solid rgba(110,116,119,.16);box-shadow:inset 0 1px 2px rgba(255,255,255,.7);}
.irow{display:flex;align-items:center;gap:14px;padding:13px 4px;border-bottom:1px solid rgba(110,116,119,.1);}
.irow:last-child{border-bottom:none;}
.amt-cell{display:flex;align-items:center;gap:0;flex:none;}
.amtchip{min-width:86px;display:flex;align-items:center;justify-content:center;gap:6px;padding:10px 12px;border-radius:12px;
  background:var(--greige);border:1px solid rgba(110,116,119,.2);cursor:pointer;}
.amtchip .num{font-family:'Fraunces',serif;font-size:19px;color:var(--ink);line-height:1;}
.amtchip .unit{font-size:12.5px;color:var(--ink-soft);font-weight:600;}
.amtchip.flag{background:rgba(176,141,87,.1);border:1.5px solid var(--brass);}
.amtchip.flag .num{color:#8a6a35;}
.amtchip.empty{min-width:64px;color:var(--taupe);font-size:12px;}
.iname{font-size:calc(15px * var(--ts-scale));color:var(--ink);flex:1;line-height:1.4;}
.iname .as{display:block;font-size:calc(12px * var(--ts-scale));color:var(--read-soft);margin-top:2px;}
.checktag{flex:none;display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border-radius:999px;
  background:rgba(176,141,87,.14);border:1px solid rgba(176,141,87,.4);font-size:11px;font-weight:700;color:#8a6a35;letter-spacing:.03em;}
.checktag .e{width:5px;height:5px;border-radius:50%;background:var(--brass);}
/* QUICK-TRIP "grab this" ingredient row — on the UPGRADED view, the NEW (store)
   ingredients get a brass left-accent + a per-row add pill so the difference from
   the original is obvious in context. The ORIGINAL view renders rows plain. */
.irow.grab{position:relative;background:rgba(176,141,87,.07);border-radius:12px;padding:11px 8px 11px 16px;
  gap:10px;min-height:60px;align-items:center;border-bottom-color:transparent;
  box-shadow:inset 0 0 0 1px rgba(176,141,87,.22);margin:6px 0;}
.irow.grab::before{content:"";position:absolute;left:5px;top:10px;bottom:10px;width:3px;border-radius:999px;
  background:linear-gradient(180deg,var(--brass-soft),var(--brass));}
/* On a flagged row the amount chip shrinks a touch to leave room; the name keeps a
   real min-width (never collapses to 0) and the add pill is flex:none. flex-wrap on
   the row lets the pill drop to its own line on a tight phone instead of overlapping. */
.irow.grab .amtchip{min-width:64px;padding:8px 10px;}
.irow.grab .amtchip .num{font-size:18px;}
.irow.grab .iname{color:var(--ink);font-weight:500;flex:1 1 auto;min-width:80px;}
/* inline "🛒 new" marker — reads even before the pill, and survives a button wrap. */
.newtag{display:inline-flex;align-items:center;gap:4px;margin-left:8px;padding:2px 8px;border-radius:999px;
  vertical-align:1px;font-size:11px;font-weight:700;letter-spacing:.02em;white-space:nowrap;
  color:#8a6a35;background:rgba(176,141,87,.16);border:1px solid rgba(176,141,87,.4);}
.grabadd{flex:none;min-height:44px;margin-left:auto;display:inline-flex;align-items:center;justify-content:center;gap:5px;
  padding:9px 16px;border-radius:999px;font-family:'Archivo';font-size:12.5px;font-weight:700;letter-spacing:.01em;
  cursor:pointer;white-space:nowrap;color:#fff;border:none;
  background:linear-gradient(145deg,#c19a63,var(--brass) 60%,#9a7846);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 8px 16px -10px rgba(176,141,87,.7);}
.grabadd::before{content:"🛒";font-size:13px;}
.grabadd.added{color:var(--olive);background:rgba(94,107,79,.1);box-shadow:none;cursor:default;}
.grabadd.added::before{content:"";}
.grabadd:disabled{cursor:default;}
.steps{margin:14px 24px 0;}
/* RECIPE INSTRUCTIONS — readability priority (Jessica): genuinely legible dark
   ink (was the too-light --ink-soft), slightly heavier, scales with --ts-scale. */
.step{display:flex;gap:14px;padding:12px 0;font-size:calc(14.5px * var(--ts-scale));color:var(--read-ink);line-height:1.55;
  font-weight:450;border-bottom:1px solid rgba(110,116,119,.1);}
.step:last-child{border-bottom:none;}
.step .n{font-family:'Fraunces',serif;font-size:calc(16px * var(--ts-scale));color:var(--brass);flex:none;width:18px;font-weight:600;}
.confirmbar{position:sticky;bottom:0;display:flex;gap:11px;padding:16px 20px calc(22px + env(safe-area-inset-bottom));
  background:linear-gradient(0deg,var(--cashmere) 70%,rgba(244,241,235,0));}
.save{flex:1;border:none;font-family:'Archivo';font-weight:600;font-size:15.5px;color:#fff;
  background:linear-gradient(145deg,#6c7a59,var(--olive) 60%,#52603f);padding:17px;border-radius:999px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 14px 26px -13px rgba(94,107,79,.6);display:flex;align-items:center;justify-content:center;gap:10px;cursor:pointer;}
.save svg{width:18px;height:18px;}
.save:disabled{opacity:.55;cursor:default;}
.editraw{flex:none;padding:17px 22px;border-radius:999px;background:var(--cashmere);border:1px solid rgba(110,116,119,.24);
  font-size:14px;font-weight:600;color:var(--ink);cursor:pointer;font-family:'Archivo';}

/* ===================== RECIPE DETAIL MODAL ============================== */
.rdetail-overlay{position:fixed;inset:0;z-index:70;display:flex;align-items:flex-end;justify-content:center;}
.rdetail-dim{position:absolute;inset:0;background:rgba(35,35,31,.45);}
.rdetail-sheet{position:relative;width:min(430px,100vw);max-height:88dvh;background:var(--cashmere);border-radius:28px 28px 0 0;
  padding:14px 24px calc(24px + env(safe-area-inset-bottom));box-shadow:0 -24px 60px -20px rgba(0,0,0,.5);animation:rise .34s var(--ease);
  display:flex;flex-direction:column;}
.rdetail-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;}
.rdetail-head h2{font-family:'Fraunces',serif;font-weight:400;font-size:calc(25px * var(--ts-scale));line-height:1.12;}
.rd-x{width:30px;height:30px;border-radius:50%;background:var(--greige);border:1px solid rgba(110,116,119,.18);color:var(--ink-soft);cursor:pointer;flex:none;}
.rdetail-scroll{overflow-y:auto;margin-top:6px;}
.rdetail-scroll .ingt{margin:14px 0 0;}
.rdetail-scroll .steps{margin:14px 0 0;}
.rdetail-scroll .sectlabel{padding:18px 0 0;}

/* ===================== QUICK TRIP TO THE STORE ========================== */
/* The "Grab these on your quick trip" buy list — a distinct brass-edged card so
   the FEW new items read as separate from what she already has. */
.qt-grab{margin:14px 0 2px;padding:15px 16px;border-radius:16px;background:rgba(176,141,87,.08);
  border:1px solid rgba(176,141,87,.32);}
.qt-grab[hidden]{display:none;}
.qt-grab .qt-h{display:flex;align-items:center;gap:8px;font-family:'Fraunces',serif;font-weight:500;
  font-size:16px;color:var(--ink);letter-spacing:.005em;}
.qt-grab .qt-h .qt-emoji{font-size:16px;}
.qt-grab .qt-sub{font-family:'Archivo';font-size:12.5px;color:var(--ink-soft);margin-top:4px;line-height:1.45;}
.qt-grab ul{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:9px;}
.qt-grab li{position:relative;padding-left:20px;font-family:'Archivo';font-size:14.5px;color:var(--ink);line-height:1.4;}
.qt-grab li::before{content:"";position:absolute;left:4px;top:8px;width:7px;height:7px;border-radius:50%;background:var(--brass);}
.qt-grab li .qt-amt{color:var(--taupe);font-size:13px;margin-left:4px;}
.qt-grab .qt-add{margin-top:14px;width:100%;justify-content:center;}
.qt-grab .qt-add.brass{color:#fff;background:linear-gradient(145deg,#c19a63,var(--brass) 60%,#9a7846);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 12px 24px -13px rgba(176,141,87,.6);}
.qt-grab .qt-add.added{color:var(--olive);background:rgba(94,107,79,.1);box-shadow:none;}

/* The footer button(s): "Quick trip to the store" → after upgrade, an
   Original ⇄ Quick-trip switch (the original is preserved). */
.qt-foot{flex:none;padding-top:14px;margin-top:4px;border-top:1px solid rgba(44,42,38,.08);}
.qt-foot[hidden]{display:none;}
.qt-foot .qt-trip{width:100%;justify-content:center;margin-top:0;font-size:15.5px;padding:15px;min-height:44px;}
.qt-foot .qt-trip.brass{color:#fff;background:linear-gradient(145deg,#c19a63,var(--brass) 60%,#9a7846);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 14px 26px -13px rgba(176,141,87,.6);}
.qt-foot .qt-trip:disabled{opacity:.6;cursor:default;}
.qt-switch{display:flex;gap:8px;}
.qt-switch button{flex:1;min-height:44px;padding:12px;border-radius:999px;font-family:'Archivo';font-size:14px;font-weight:600;
  cursor:pointer;border:1px solid rgba(110,116,119,.24);background:var(--cashmere);color:var(--ink-soft);}
.qt-switch button.on{background:linear-gradient(145deg,#6c7a59,var(--olive) 60%,#52603f);color:#fff;border-color:transparent;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2);}
.qt-hint{font-family:'Archivo';font-size:12px;color:var(--taupe);text-align:center;margin-top:9px;line-height:1.4;}

/* "How your pantry works" explainer body — calm, scannable */
.howto-body{padding-bottom:8px;}
.howto-body p{font-family:'Archivo';font-size:14.5px;line-height:1.6;color:var(--ink-soft);margin-top:14px;}
.howto-body ul{list-style:none;margin:16px 0 4px;padding:0;display:flex;flex-direction:column;gap:13px;}
.howto-body li{position:relative;padding-left:18px;font-size:14px;line-height:1.55;color:var(--ink-soft);}
.howto-body li::before{content:"";position:absolute;left:2px;top:9px;width:6px;height:6px;border-radius:50%;background:var(--brass);}
.howto-body li b{color:var(--ink);font-weight:600;}
.howto-loop{font-weight:600;color:var(--ink) !important;margin-top:18px !important;}
.howto-install{margin-top:22px;padding-top:18px;border-top:1px solid rgba(44,42,38,.10);}
.howto-install h3{font-family:'Fraunces',serif;font-weight:500;font-size:17px;color:var(--ink);margin:0;letter-spacing:.005em;}
.howto-sub{font-size:13px !important;color:var(--ink) !important;margin-top:16px !important;}
.howto-sub b{font-weight:700;}
.howto-steps{list-style:none;counter-reset:step;margin:10px 0 4px;padding:0;display:flex;flex-direction:column;gap:11px;}
.howto-steps li{counter-increment:step;position:relative;padding-left:30px;font-size:14px;line-height:1.5;color:var(--ink-soft);}
.howto-steps li::before{content:counter(step);position:absolute;left:0;top:-1px;width:20px;height:20px;border-radius:50%;
  background:var(--brass);color:#FFF;font-family:'Archivo';font-size:11.5px;font-weight:700;
  display:flex;align-items:center;justify-content:center;}
.howto-steps li b{color:var(--ink);font-weight:600;}
.ios-share{display:inline-flex;vertical-align:-4px;margin:0 1px;}
.ios-share svg{width:16px;height:16px;stroke:var(--brass);stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round;}
/* the have it · running low · out pills */
.lvlpill{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:999px;font-size:12px;font-weight:600;
  white-space:nowrap;margin:0 2px;}
.lvlpill::before{content:"";width:7px;height:7px;border-radius:50%;}
.lvlpill.have{background:rgba(94,107,79,.1);color:var(--olive);}
.lvlpill.have::before{background:var(--olive);}
.lvlpill.low{background:rgba(176,141,87,.12);color:#8a6a35;}
.lvlpill.low::before{background:var(--brass);}
.lvlpill.out{background:rgba(74,47,82,.1);color:var(--aubergine);}
.lvlpill.out::before{background:var(--aubergine);}

/* ===================== REACTIVE BRIEF SHEET ============================== */
.rb-sub{font-size:13px;color:var(--ink-soft);margin:2px 0 4px;line-height:1.45;}
.rb-sub b{color:var(--olive);font-weight:600;}
#reactive-brief .rdetail-scroll .fblock{margin-top:16px;}
#reactive-brief .rdetail-scroll .fblock:first-child{margin-top:8px;}
#reactive-brief .fq{font-size:16px;margin-bottom:10px;}
.rb-foot{padding-top:16px;}
.rb-foot .mgo{width:100%;justify-content:center;margin-top:0;font-size:16px;padding:16px;}

/* ===================== PANTRY EDIT SHEET ===================== */
#edit-overlay .fblock{margin-top:18px;}
#edit-overlay .fblock:first-child{margin-top:6px;}
#edit-overlay .fq{font-size:16px;margin-bottom:10px;}
#edit-overlay .cc-input{width:100%;}
/* the remove action lives inside the sheet — quiet oxblood, not alarming */
.edit-delete{display:inline-flex;align-items:center;gap:9px;margin-top:24px;padding:12px 16px;border-radius:14px;cursor:pointer;
  background:none;border:1px solid rgba(107,58,52,.3);color:#6B3A34;font-family:'Archivo';font-size:13.5px;font-weight:600;}
.edit-delete svg{width:16px;height:16px;stroke:#6B3A34;stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round;}
.edit-delete:active{background:rgba(107,58,52,.06);}
/* two-button foot: Cancel (ghost) + Save (steel) side by side */
.edit-foot{display:flex;gap:11px;}
.edit-foot .mgo{flex:1;}
.mgo.ghost{background:var(--cashmere);border:1px solid rgba(110,116,119,.24);color:var(--ink-soft);
  box-shadow:none;font-weight:600;}
/* level chips: when selected, Low = brass, Out = aubergine (match the shelf) */
#edit-level-chips .chip.lvl-low.sel{background:rgba(176,141,87,.14);border-color:var(--brass);color:#8a6a35;}
#edit-level-chips .chip.lvl-out.sel{background:rgba(74,47,82,.12);border-color:var(--aubergine);color:var(--aubergine);}

/* ============================================================================
   ACCESS GATE — sign-in + invite-only bounce (private beta).
   Marble / quiet-luxury, labels-not-subtitles. Sits above the whole app.
============================================================================ */
.gate{
  position:fixed;inset:0;z-index:200;
  display:flex;align-items:center;justify-content:center;padding:28px;
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(176,141,87,.10), transparent 60%),
    linear-gradient(135deg, var(--marble), #E4E0D8 55%, var(--marble));
}
.gatecard{
  width:100%;max-width:380px;text-align:center;
  background:rgba(255,255,255,.55);border:1px solid var(--vein);
  border-radius:var(--r-card,22px);padding:34px 28px 26px;
  box-shadow:0 30px 60px -32px rgba(44,42,38,.4);backdrop-filter:blur(6px);
}
.gatecard .tmark.big{
  width:54px;height:54px;margin:0 auto 18px;border-radius:14px;
  background:linear-gradient(150deg,#67625a,var(--ink-soft) 60%,#46423b);
  display:flex;align-items:center;justify-content:center;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 14px 26px -14px rgba(44,42,38,.6);
}
.gatecard .tmark.big span{font-family:'Fraunces',serif;color:#F2EFE9;font-size:26px;font-weight:500;}
.gate-eyebrow{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--taupe);font-weight:700;}
.gate-h1{font-family:'Fraunces',serif;font-weight:400;font-size:30px;line-height:1.06;letter-spacing:-.01em;margin-top:12px;color:var(--ink);}
.gate-sub{color:var(--ink-soft);font-size:14px;line-height:1.55;margin:12px auto 22px;max-width:300px;}
.gate-google{
  width:100%;display:flex;align-items:center;justify-content:center;gap:10px;
  border:1px solid var(--vein2);background:#fff;color:var(--ink);
  font-family:'Archivo';font-weight:600;font-size:15px;padding:14px;border-radius:999px;cursor:pointer;
  box-shadow:0 10px 22px -16px rgba(44,42,38,.5);
}
.gate-google:hover{background:#FBFAF8;}
.gate-google .g-logo{display:flex;flex:none;}
.gate-dev{
  width:100%;margin-top:12px;background:transparent;border:1px dashed var(--steel);
  color:var(--steel-deep);font-family:'Archivo';font-weight:600;font-size:13px;
  padding:11px;border-radius:999px;cursor:pointer;
}
.gate-foot{margin-top:22px;font-size:12px;color:var(--taupe);}
.gate-foot b{color:var(--ink-soft);font-weight:600;}

/* bounce-specific */
.gate-asfield{text-align:left;margin:4px 0 18px;}
.gate-aslabel{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--taupe);font-weight:700;margin-bottom:8px;}
.gate-asnote{
  width:100%;border:1px solid var(--vein2);border-radius:14px;background:#fff;
  padding:12px;font-family:'Archivo';font-size:14px;color:var(--ink);resize:vertical;outline:none;
}
.gate-asnote::placeholder{color:var(--taupe);}
.gate-request{
  width:100%;display:flex;align-items:center;justify-content:center;gap:8px;border:none;
  font-family:'Archivo';font-weight:600;font-size:15px;color:#fff;cursor:pointer;
  background:linear-gradient(145deg,#6f7d5c,var(--olive) 60%,#4a553f);padding:15px;border-radius:999px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 14px 26px -14px rgba(74,85,63,.6);
}
.gate-request:disabled{opacity:.6;cursor:default;}
.gate-request .li{width:18px;height:18px;fill:none;stroke-width:1.8;}
.gate-asok{
  display:flex;align-items:center;justify-content:center;gap:9px;margin-top:16px;
  font-size:13.5px;color:var(--olive);font-weight:600;
}
.gate-asok .dot{width:16px;height:16px;border-radius:50%;background:var(--olive);flex:none;}
.gate-signout{
  width:100%;margin-top:18px;background:transparent;border:none;
  color:var(--steel-deep);font-family:'Archivo';font-weight:600;font-size:13.5px;cursor:pointer;text-decoration:underline;
}
.gate-asemail{margin-top:14px;font-size:12px;color:var(--taupe);}
.gate-asemail b{color:var(--ink-soft);font-weight:600;}

/* ---- CONSENT clickwrap (ToS + Privacy acceptance gate) ------------------- */
.consent-check{
  display:flex;align-items:flex-start;gap:12px;text-align:left;cursor:pointer;
  background:rgba(255,255,255,.55);border:1px solid var(--vein2);border-radius:16px;
  padding:14px 15px;margin:4px 0 18px;-webkit-tap-highlight-color:transparent;
}
/* visually-hidden native checkbox (keeps it focusable/operable for a11y) */
.consent-box{position:absolute;opacity:0;width:1px;height:1px;margin:-1px;}
.consent-box-ui{
  flex:none;width:24px;height:24px;margin-top:1px;border-radius:7px;
  border:2px solid var(--steel);background:#fff;position:relative;transition:all .15s var(--ease,ease);
}
.consent-box:checked + .consent-box-ui{
  background:var(--olive);border-color:var(--olive);
  box-shadow:0 0 0 3px rgba(94,107,79,.16);
}
.consent-box:checked + .consent-box-ui::after{
  content:"";position:absolute;left:7px;top:3px;width:6px;height:11px;
  border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(42deg);
}
.consent-box:focus-visible + .consent-box-ui{box-shadow:0 0 0 3px rgba(176,141,87,.4);}
.consent-check-text{font-size:13.5px;line-height:1.5;color:var(--ink-soft);}
.consent-check-text a{color:var(--brass);font-weight:600;text-decoration:underline;}
.consent-version{margin-top:12px;font-size:11px;color:var(--taupe);}
#consent-signout-btn{margin-top:14px;}

/* ---- ALLERGEN safety acknowledgment (rdetail-overlay sheet variant) ------ */
.allergen-ack-sheet{padding-top:18px;}
.allergen-ack-mark{
  width:54px;height:54px;margin:2px auto 14px;border-radius:16px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(150deg,#c79a5d,var(--brass) 60%,#8c6a36);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 14px 26px -14px rgba(140,106,54,.6);
}
.allergen-ack-mark svg{width:28px;height:28px;fill:none;stroke:#fff;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round;}
.allergen-ack-head{justify-content:center;text-align:center;}
.allergen-ack-head h2{text-align:center;}
.allergen-ack-body{margin:14px 2px 20px;color:var(--ink-soft);font-size:15px;line-height:1.6;}
.allergen-ack-body p{margin:0 0 12px;}
.allergen-ack-body p:last-child{margin-bottom:0;}
.allergen-ack-body b{color:var(--ink);font-weight:600;}
.allergen-ack-em{
  font-weight:600;color:var(--ink) !important;background:rgba(176,141,87,.1);
  border-left:3px solid var(--brass);border-radius:0 10px 10px 0;padding:11px 13px;
}
.allergen-ack-btn{margin-top:4px;}

/* ---- per-recipe standing safety disclaimer (recipe detail sheet) --------- */
/* Calm, marble-toned; mirrors .allergen-ack-em's brass left-border treatment.
   Shown on every AI-generated recipe — best-effort, NOT a guarantee. */
.rd-safetynote{
  display:flex;align-items:flex-start;gap:9px;margin:2px 0 16px;
  padding:11px 13px;border-radius:0 10px 10px 0;
  background:rgba(176,141,87,.1);border-left:3px solid var(--brass);
  color:var(--ink-soft);font-size:12.5px;line-height:1.5;
}
.rd-safetynote-ic{flex:none;font-size:13px;line-height:1.4;}
.rd-safetynote-tx b,.rd-safetynote-tx{color:var(--ink-soft);}

/* ===================== HOUSEHOLD (members + invite) ===================== */
/* makes the household monogram avatar feel tappable (it opens this screen) */
.hh.tappable{cursor:pointer;}
.hh.tappable:active{transform:scale(.94);transition:transform .12s var(--ease);}

.hh-members{padding:14px 20px 0;display:flex;flex-direction:column;gap:11px;}
.hh-member{display:flex;align-items:center;gap:13px;padding:14px 16px;border-radius:18px;
  background:var(--cashmere);border:1px solid rgba(110,116,119,.16);
  box-shadow:0 14px 30px -28px rgba(44,42,38,.4);}
.hh-member .av{width:40px;height:40px;border-radius:50%;flex:none;position:relative;
  background:radial-gradient(70% 70% at 40% 30%, #fbf9f5, #efece5 70%, #e7e2d9);
  border:1px solid rgba(110,116,119,.3);}
.hh-member .av span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:'Fraunces',serif;font-size:17px;
  background:linear-gradient(160deg,#b8b3a6,#6E7477 55%,#565b5d);-webkit-background-clip:text;background-clip:text;color:transparent;}
.hh-member .who{flex:1;min-width:0;}
.hh-member .who .nm{font-family:'Fraunces',serif;font-size:16px;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.hh-member .who .em{font-size:12px;color:var(--taupe);margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.hh-member .roletag{flex:none;padding:6px 11px;border-radius:999px;font-size:11.5px;font-weight:600;
  letter-spacing:.02em;background:var(--greige);color:var(--ink-soft);border:1px solid rgba(110,116,119,.16);}
.hh-member .roletag.owner{background:rgba(176,141,87,.14);color:#8a6a35;border-color:rgba(176,141,87,.4);}
.hh-member .roletag.you{background:rgba(94,107,79,.12);color:var(--olive);border-color:rgba(94,107,79,.4);}

.hh-invite{padding-top:14px;}
/* rename + monogram editor */
.hh-rename{display:flex;align-items:center;gap:13px;padding-top:14px;}
.hh-mono-edit{flex:none;width:48px;height:48px;border-radius:50%;position:relative;
  background:radial-gradient(70% 70% at 40% 30%, #fbf9f5, #efece5 70%, #e7e2d9);
  border:1px solid rgba(110,116,119,.32);box-shadow:inset 0 1px 2px rgba(255,255,255,.9);}
.hh-mono-edit .m{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:'Fraunces',serif;font-weight:400;font-size:20px;
  background:linear-gradient(160deg,#b8b3a6,#6E7477 55%,#565b5d);-webkit-background-clip:text;background-clip:text;color:transparent;}
.hh-rename-fields{flex:1;display:flex;gap:10px;min-width:0;}
.hh-rename-fields .hh-input{flex:1;min-width:0;}
.hh-mono-field{flex:none;width:64px;text-align:center;text-transform:uppercase;}
.hh-input{width:100%;padding:14px 16px;border-radius:14px;background:var(--cashmere);
  border:1px solid rgba(110,116,119,.22);font-family:'Archivo';font-size:15px;color:var(--ink);outline:none;}
.hh-input::placeholder{color:var(--taupe);}
.hh-input:focus{border-color:var(--olive);}
.hh-invite-note{margin-top:13px;font-size:12.5px;color:var(--ink-soft);line-height:1.5;}
.hh-invite-note.err{color:#9a4a3c;}
.hh-invite-note.ok{color:var(--olive);}

/* allergies / dietary goals / dislikes editors */
.safetag{font-size:9px;letter-spacing:.1em;padding:2px 8px;border-radius:999px;color:#fff;font-weight:700;
  background:linear-gradient(150deg,#7c5450,#6B3A34);text-transform:uppercase;letter-spacing:.08em;}
.hh-safetynote{font-size:12.5px;color:var(--ink-soft);line-height:1.5;margin:14px 0 12px;}
.hh-safetynote b{color:var(--ink);font-weight:600;}
.hh-addrow{display:flex;gap:9px;margin-top:11px;}
.hh-addrow .hh-input{flex:1;}
.hh-addbtn{flex:none;width:48px;border-radius:14px;cursor:pointer;font-size:22px;line-height:1;color:var(--ink-soft);
  background:var(--greige);border:1px solid rgba(110,116,119,.22);font-family:'Archivo';}
.hh-addbtn:active{background:var(--mushroom);}
.chip.custom{display:inline-flex;align-items:center;gap:6px;}
.chip.custom .x{font-size:15px;line-height:1;color:var(--taupe);font-weight:700;}
.chip.sel .x{color:var(--olive);}
.hh-emptychip{font-size:13px;color:var(--taupe);font-style:italic;padding:4px 2px;}

/* DISPLAY / ACCESSIBILITY controls */
.disp-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;flex-wrap:wrap;}
.disp-lbl{font-size:14px;font-weight:600;color:var(--ink);}
/* text-size buttons reuse .styletoggle/.stybtn; keep S/M/L/XL compact */
#disp-textsize .stybtn{padding:8px 13px;min-width:34px;text-align:center;}
/* high-contrast on/off switch */
.disp-switch{flex:none;width:52px;height:30px;border-radius:999px;cursor:pointer;position:relative;padding:0;
  background:var(--greige);border:1px solid rgba(110,116,119,.28);transition:background .18s var(--ease),border-color .18s var(--ease);}
.disp-switch .disp-knob{position:absolute;top:2px;left:2px;width:24px;height:24px;border-radius:50%;background:#fff;
  box-shadow:0 1px 3px rgba(44,42,38,.35);transition:transform .2s var(--ease);}
.disp-switch.on{background:var(--olive);border-color:var(--olive);}
.disp-switch.on .disp-knob{transform:translateX(22px);}
/* live preview — renders a sample step at the chosen size/contrast */
.disp-preview{margin-top:16px;padding:14px 16px;border-radius:14px;background:var(--cashmere);border:1px solid rgba(110,116,119,.16);}
.disp-preview .dp-step{display:flex;gap:12px;font-size:calc(14.5px * var(--ts-scale));line-height:1.55;color:var(--read-ink);font-weight:450;}
.disp-preview .dp-n{font-family:'Fraunces',serif;font-size:calc(16px * var(--ts-scale));color:var(--brass);font-weight:600;flex:none;}

.hh-pending{padding:10px 20px 0;display:flex;flex-direction:column;gap:9px;}
.hh-pending .pend{display:flex;align-items:center;gap:11px;padding:12px 16px;border-radius:16px;
  background:#EDEAE3;border:1px dashed rgba(110,116,119,.3);}
.hh-pending .pend .em{flex:1;min-width:0;font-size:13.5px;color:var(--ink-soft);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.hh-pending .pend .st{flex:none;font-size:11px;letter-spacing:.04em;color:var(--taupe);font-weight:600;text-transform:uppercase;}