/* KleanPlate — styles (extracted from index.html). 12 themes + layout. */
/* ============ THEME TOKENS (12 themes) ============ */
:root{
  --r:14px; --r-sm:9px; --shadow:0 10px 30px -12px rgba(20,30,25,.28);
  --shadow-sm:0 4px 14px -6px rgba(20,30,25,.22);
  --font-d:"Fraunces",Georgia,serif; --font-b:"Hanken Grotesk",system-ui,sans-serif;
  --maxw:1180px; --ease:cubic-bezier(.2,.8,.25,1);
}
[data-theme="harvest"]{--bg:#f3ede1;--bg2:#ece3d2;--surface:#fffdf7;--ink:#2a2620;--ink-soft:#6b6357;--line:#e0d6c2;--brand:#2f4a3c;--brand-ink:#fbfaf5;--accent:#c1622d;--accent2:#d99a2b;--ok:#3f7d50;--warn:#bb4a2e;--chip:#eadfc9;}
[data-theme="midnight"]{--bg:#14171c;--bg2:#1b1f26;--surface:#21262f;--ink:#eef1f4;--ink-soft:#9aa3af;--line:#323945;--brand:#7bb88f;--brand-ink:#10130f;--accent:#e08a4b;--accent2:#e4c15c;--ok:#6fbf86;--warn:#e0795f;--chip:#2a3039;}
[data-theme="forest"]{--bg:#eef2e6;--bg2:#e3ead4;--surface:#fbfdf6;--ink:#23301f;--ink-soft:#5c6b51;--line:#d3ddc0;--brand:#33572f;--brand-ink:#f6faef;--accent:#b5611f;--accent2:#7a9a3a;--ok:#4a7e3c;--warn:#a8492a;--chip:#dfe8cd;}
[data-theme="ocean"]{--bg:#eaf1f4;--bg2:#dceaef;--surface:#fbfdfe;--ink:#152832;--ink-soft:#536872;--line:#cadbe2;--brand:#1f5d72;--brand-ink:#f3fafc;--accent:#d97742;--accent2:#3f9ab0;--ok:#2f8a82;--warn:#bb5638;--chip:#d6e6ec;}
[data-theme="sunset"]{--bg:#fbeee6;--bg2:#f7e0d2;--surface:#fffaf6;--ink:#3a241b;--ink-soft:#7d5f51;--line:#f0d4c2;--brand:#a8432b;--brand-ink:#fff6f1;--accent:#e0892f;--accent2:#cf5a52;--ok:#9a6b2f;--warn:#9c3a26;--chip:#f5ddcc;}
[data-theme="lavender"]{--bg:#f1edf6;--bg2:#e8e0f1;--surface:#fdfbff;--ink:#2b2336;--ink-soft:#6a6079;--line:#ddd2ea;--brand:#5b4a86;--brand-ink:#f9f6ff;--accent:#c06aa0;--accent2:#8b76c4;--ok:#5e8a6a;--warn:#b0506e;--chip:#e6dcf2;}
[data-theme="autumn"]{--bg:#f5ece0;--bg2:#eedfca;--surface:#fffaf2;--ink:#33271b;--ink-soft:#766150;--line:#e6d4ba;--brand:#7a3f1f;--brand-ink:#fdf7ef;--accent:#c87a23;--accent2:#9a7d2c;--ok:#7a7a30;--warn:#a3441f;--chip:#ecdbc0;}
[data-theme="mono"]{--bg:#f4f4f2;--bg2:#e9e9e6;--surface:#ffffff;--ink:#1c1c1a;--ink-soft:#6e6e6a;--line:#dcdcd8;--brand:#222220;--brand-ink:#fafaf8;--accent:#7a7a76;--accent2:#a3a39e;--ok:#4a4a48;--warn:#86332a;--chip:#e6e6e2;}
[data-theme="berry"]{--bg:#f6ebef;--bg2:#efdce3;--surface:#fffafc;--ink:#33202a;--ink-soft:#7a5c67;--line:#e8cdd7;--brand:#7d2347;--brand-ink:#fdf3f7;--accent:#c5546f;--accent2:#9e5e85;--ok:#6a8a4a;--warn:#a83a4e;--chip:#eed3dd;}
[data-theme="fiesta"]{--bg:#fdf3e3;--bg2:#fbe6c8;--surface:#fffbf3;--ink:#3a2410;--ink-soft:#7e5e3a;--line:#f3d9af;--brand:#d4391f;--brand-ink:#fff7ee;--accent:#f29400;--accent2:#1f9e6b;--ok:#1f9e6b;--warn:#d4391f;--chip:#fadcb0;}
[data-theme="patriotic"]{--bg:#f1f3f8;--bg2:#e3e8f2;--surface:#ffffff;--ink:#1a2238;--ink-soft:#5a647d;--line:#d3dbeb;--brand:#1f3a73;--brand-ink:#f5f8ff;--accent:#c8323e;--accent2:#3a64b0;--ok:#2f6f8a;--warn:#c8323e;--chip:#dde4f2;}
[data-theme="winter"]{--bg:#eef3f6;--bg2:#e0eaf0;--surface:#fbfdff;--ink:#1c2c34;--ink-soft:#5c6e78;--line:#cfdde6;--brand:#2d5f7a;--brand-ink:#f4fafd;--accent:#6aa3c4;--accent2:#8fb8cc;--ok:#3f8a86;--warn:#9a5340;--chip:#d8e6ee;}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font-b);background:var(--bg);color:var(--ink);line-height:1.5;-webkit-font-smoothing:antialiased;transition:background .4s var(--ease),color .4s var(--ease);overflow-x:hidden}
body.modal-open{overflow:hidden}
h1,h2,h3,h4{font-family:var(--font-d);font-weight:600;line-height:1.1;letter-spacing:-.01em}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,select,textarea{font-family:inherit;font-size:1rem;color:var(--ink)}
a{color:var(--brand);text-decoration:none}
::selection{background:var(--accent);color:#fff}

/* atmospheric background */
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(120% 80% at 100% 0%,color-mix(in srgb,var(--accent2) 14%,transparent),transparent 60%),
  radial-gradient(90% 70% at 0% 100%,color-mix(in srgb,var(--brand) 12%,transparent),transparent 55%);
  opacity:.7;transition:opacity .4s}

#particle-canvas{position:fixed;inset:0;z-index:60;pointer-events:none}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px;position:relative;z-index:1}

/* ============ HEADER ============ */
header.app{position:fixed;top:0;left:0;right:0;z-index:40;backdrop-filter:blur(14px);
  background:color-mix(in srgb,var(--brand) 94%,transparent);
  border-bottom:1px solid rgba(255,255,255,.1);
  box-shadow:0 2px 16px -4px rgba(20,30,25,.22)}

/* ── SINGLE NAV ROW — three-zone grid ───────────────────────
   brand | nav | actions on a grid of minmax(0,1fr) auto minmax(0,1fr).
   The center column is sized to the nav's natural width and is ALWAYS
   truly centered. The side columns share the leftover space equally and
   are allowed to shrink to zero (minmax(0,1fr)), so the brand tagline
   truncates with an ellipsis instead of shoving the nav into the action
   buttons. Nothing can clip or overlap at any viewport width — when
   space genuinely runs out, breakpoints drop labels, never pixels.   */
.hd-inner{
  display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;column-gap:16px;padding:0 20px;height:58px}
.brand{justify-self:start;min-width:0}
.hd-inner nav.tabs{justify-self:center}
.hd-actions{justify-self:end;display:flex;align-items:center;gap:6px;min-width:0}
.hd{display:flex;align-items:center;gap:12px;padding:10px 0;min-width:0}

/* Scripture ticker — slim strip under the single row */
.hd-scripture{
  display:flex;align-items:center;justify-content:center;
  gap:8px;font-size:.66rem;
  background:rgba(0,0,0,.18);
  border-top:1px solid rgba(255,255,255,.08);
  padding:3px 16px;line-height:1.4;flex-wrap:wrap;overflow:hidden}
body.view-dash .hd-scripture{display:none}
.hd-scripture-cross{color:rgba(255,255,255,.45);font-size:.76rem;flex-shrink:0}
.hd-scripture-text{font-style:italic;color:rgba(255,255,255,.7);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:60vw}
.hd-scripture-ref{font-weight:700;color:rgba(255,255,255,.55);white-space:nowrap;flex-shrink:0}

/* Page-content spacer */
.hd-spacer{height:84px}          /* 58px nav row + 26px scripture ticker */
body.view-dash .hd-spacer{height:58px} /* no ticker on dash */

/* Brand block */
.brand{display:flex;flex-direction:column;gap:2px;flex-shrink:0;min-width:0}
/* white-space:nowrap prevents KleanPlate ever splitting across lines */
.logo{display:flex;align-items:center;gap:10px;min-width:0}
.logo .mark{width:36px;height:36px;border-radius:10px;
  background:rgba(255,255,255,.15);color:#fff;
  display:grid;place-items:center;font-size:1.15rem;flex-shrink:0;
  border:1px solid rgba(255,255,255,.28)}
/* Plate in warm gold so it pops on every theme header color */
.logo em{color:#ffd87a;font-style:normal}
.logo-stack{display:flex;flex-direction:column;gap:1px;min-width:0}
.logo-name{font-family:var(--font-d);font-weight:700;font-size:1.15rem;
  letter-spacing:-.02em;color:#fff;line-height:1;white-space:nowrap}
.logo-name em{color:#ffd87a;font-style:normal}
.logo-sub1{font-size:.58rem;color:rgba(255,255,255,.62);line-height:1.3;
  font-style:italic;font-family:var(--font-d);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.logo-sub2{font-size:.52rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:rgba(255,255,255,.48);line-height:1.1}
/* text-shadow gives contrast on every theme - dark, light, all of them */
.motto{font-size:.73rem;font-weight:700;
  color:#fff;
  text-shadow:0 1px 4px rgba(0,0,0,.65),0 0 14px rgba(0,0,0,.35);
  letter-spacing:.01em;line-height:1.4;padding-left:46px;white-space:nowrap}
.motto2{display:none}

/* Nav — one segmented control: a single recessed track holding all six
   tabs reads as ONE element instead of six competing bordered pills.
   The active tab is the only filled (white) segment, so the eye finds
   "where am I" instantly. */
nav.tabs{
  display:flex;gap:2px;align-items:center;flex-wrap:nowrap;
  background:rgba(0,0,0,.16);
  border:1px solid rgba(255,255,255,.10);
  border-radius:12px;padding:4px}
nav.tabs button{
  flex:none; /* never stretch — natural segment width */
  padding:7px 14px;border-radius:9px;font-weight:600;font-size:.84rem;
  color:rgba(255,255,255,.78);
  transition:.16s var(--ease);white-space:nowrap;
  border:1px solid transparent;background:transparent;
  display:flex;align-items:center;justify-content:center;gap:6px}
nav.tabs button:hover{
  color:#fff;
  background:rgba(255,255,255,.12)}
nav.tabs button.active{
  background:rgba(255,255,255,.96);
  color:var(--brand);
  box-shadow:0 1px 6px rgba(0,0,0,.22)}

/* Responsive: graceful degradation by dropping LABELS, never clipping pixels.
   ≤1240  brand tagline + Grace/Help labels go icon-only
   ≤1100  tab padding tightens
   ≤1010  tab labels drop → roomy icon segments (tooltips still explain)
   ≤760   the mobile block below converts nav.tabs into the bottom bar  */
@media(max-width:1240px){
  .logo-sub1{display:none}
  .logo-sub2{display:none}
  .hd-pill .hd-pill-lbl{display:none}
  .hd-pill{width:36px;padding:0;justify-content:center}
}
@media(max-width:1100px){
  nav.tabs button{padding:7px 10px;font-size:.8rem;gap:5px}
}
@media(max-width:1010px){
  nav.tabs .tl{display:none}
  nav.tabs button{padding:8px 12px;font-size:1rem}
  .hd-sep{display:none}
}

.tab-badge{display:inline-flex;align-items:center;justify-content:center;
  background:var(--accent);color:#fff;font-size:.6rem;font-weight:700;
  border-radius:99px;padding:1px 5px;margin-left:5px;line-height:1.4;
  min-width:16px;font-family:var(--font-b)}
@media(max-width:760px){
  .tab-badge{position:absolute;top:4px;right:calc(50% - 18px);margin:0;font-size:.55rem;padding:1px 4px}
  nav.tabs button{position:relative}
}

/* Header action buttons — ONE visual language for all of them.
   Previously: labeled pills + square buttons styled with brand-INK colors
   (meant for light page surfaces, near-invisible on the dark header).
   Now every action shares the same 36px ghost treatment; a hairline
   separator groups feature actions (Grace · Help) apart from app
   utilities (Install · Sync · Theme). */
.hd-pill,.theme-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  height:36px;border-radius:10px;
  color:#fff;background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.16);
  cursor:pointer;text-decoration:none;flex-shrink:0;
  transition:background .15s var(--ease),transform .15s var(--ease)}
.hd-pill{padding:0 12px;font-size:.78rem;font-weight:700}
.theme-btn{width:36px;padding:0;font-size:1rem}
.hd-pill:hover,.theme-btn:hover{background:rgba(255,255,255,.22);transform:translateY(-1px)}
.hd-sep{width:1px;height:20px;background:rgba(255,255,255,.18);margin:0 3px;flex-shrink:0}

/* Allergen notice — subtle footer ribbon instead of aggressive header bar.
   Shown only once per session; user already consented on the splash screen. */
.allergen-ribbon{
  background:color-mix(in srgb,var(--warn) 8%,transparent);
  border-top:1px solid color-mix(in srgb,var(--warn) 22%,transparent);
  color:var(--ink-soft);font-size:.72rem;padding:8px 20px;
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;line-height:1.5;
  transition:opacity .3s}
.allergen-ribbon strong{color:var(--warn)}
.allergen-ribbon .ar-close{margin-left:auto;background:none;border:none;cursor:pointer;
  font-size:.95rem;color:var(--ink-soft);opacity:.6;padding:2px 6px;border-radius:4px}
.allergen-ribbon .ar-close:hover{opacity:1;background:var(--chip)}

main{padding:30px 0 calc(var(--bottom-bar-h,64px) + 24px);position:relative;z-index:1}
.view{display:none;animation:fade .4s var(--ease)}
.view.active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:22px;flex-wrap:wrap}
.page-head h2{font-size:clamp(1.8rem,4vw,2.6rem)}
.page-head .sub{color:var(--ink-soft);font-size:.95rem;margin-top:4px}

.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-sm)}
.btn{display:inline-flex;align-items:center;gap:7px;padding:10px 17px;border-radius:99px;font-weight:600;font-size:.9rem;
  background:var(--brand);color:var(--brand-ink);transition:.18s var(--ease);border:1px solid transparent}
.btn:hover{transform:translateY(-1px);box-shadow:var(--shadow)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn.ghost:hover{background:var(--chip)}
.btn.accent{background:var(--accent)}
.btn.sm{padding:6px 12px;font-size:.82rem}
.field{display:block;margin-bottom:13px}
.field label{display:block;font-size:.8rem;font-weight:600;color:var(--ink-soft);margin-bottom:5px;letter-spacing:.02em}
.field input,.field select,.field textarea{width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--bg);transition:.15s}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--brand);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 40%,transparent);background:var(--surface)}
.field textarea{resize:vertical;min-height:90px;line-height:1.55}
.plan-note-input{width:100%;padding:5px 7px;border:1px solid var(--line);border-radius:6px;font-size:.76rem;resize:none;height:52px;background:var(--surface);color:var(--ink);line-height:1.45;font-family:var(--font-b)}
.plan-note-input:focus{outline:2px solid var(--brand);outline-offset:-1px}

.chip{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:99px;font-size:.78rem;font-weight:600;
  background:var(--chip);color:var(--ink-soft);border:1px solid transparent;cursor:pointer;transition:.15s;user-select:none;flex-shrink:0;white-space:nowrap}
.chip:hover{border-color:var(--line)}
.chip.on{background:var(--brand);color:var(--brand-ink)}
.tag{display:inline-block;padding:3px 9px;border-radius:99px;font-size:.7rem;font-weight:600;background:var(--chip);color:var(--ink-soft);text-transform:capitalize}

/* ============ DASHBOARD ============ */
.dash-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:20px;align-items:start}
@media(max-width:820px){.dash-grid{grid-template-columns:1fr}}
.scripture{padding:26px;background:linear-gradient(135deg,var(--brand),color-mix(in srgb,var(--brand) 70%,#000));
  color:var(--brand-ink);border-radius:var(--r);position:relative;overflow:hidden;min-height:150px;display:flex;flex-direction:column;justify-content:center}
.scripture::before{content:"\201C";position:absolute;top:-30px;right:14px;font-family:var(--font-d);font-size:11rem;opacity:.12;line-height:1}
.scripture .verse{font-family:var(--font-d);font-size:1.3rem;font-style:italic;line-height:1.4;position:relative;transition:opacity .35s}
.scripture .ref{margin-top:12px;font-weight:700;font-size:.85rem;letter-spacing:.05em;opacity:.85;text-transform:uppercase}
.verse-select-row{display:flex;align-items:center;gap:8px;margin-top:16px;
  border-top:1px solid rgba(255,255,255,.15);padding-top:12px}
.verse-select-label{font-size:.72rem;font-weight:600;opacity:.7;white-space:nowrap;flex-shrink:0}
.verse-select{flex:1;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);
  color:inherit;border-radius:8px;padding:6px 10px;font-size:.78rem;font-weight:600;
  cursor:pointer;appearance:none;-webkit-appearance:none;outline:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='rgba(255,255,255,0.6)'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;padding-right:26px;
  transition:background .15s,border-color .15s;min-width:0}
.verse-select:focus{border-color:rgba(255,255,255,.55);background-color:rgba(255,255,255,.18)}
.verse-select option{background:#2d5a3d;color:#fff}
.verse-refresh-btn{flex-shrink:0;width:34px;height:34px;border-radius:50%;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.25);
  color:inherit;cursor:pointer;display:grid;place-items:center;font-size:1.1rem;
  transition:background .15s,transform .3s}
.verse-refresh-btn:hover{background:rgba(255,255,255,.26)}
.verse-refresh-btn:active{transform:rotate(200deg)}
.stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:18px}
.stat{padding:16px;text-align:center}
.quick-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:6px}
.quick-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:6px;padding:14px 6px;border-radius:12px;
  background:var(--surface);border:1.5px solid var(--line);
  cursor:pointer;min-height:68px;transition:.18s var(--ease)}
.quick-tile:hover,.quick-tile:active{border-color:var(--brand);
  background:color-mix(in srgb,var(--brand) 6%,var(--surface))}
.qt-icon{font-size:1.5rem;line-height:1}
.qt-label{font-size:.7rem;font-weight:700;color:var(--ink);text-align:center;line-height:1.2}
.stat .n{font-family:var(--font-d);font-size:1.9rem;font-weight:600;color:var(--brand)}
.stat .l{font-size:.74rem;color:var(--ink-soft);font-weight:600;text-transform:uppercase;letter-spacing:.04em;margin-top:2px}

/* ============ RECIPE CARDS ============ */
.toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:14px;overflow-x:auto;padding-bottom:4px}
/* Recipe controls — stacked rows on all screen sizes */
.recipe-controls{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
.search{position:relative;width:100%}
.pantry-row{display:flex;align-items:center;justify-content:space-between;gap:8px}
.pantry-toggle-label{display:flex;align-items:center;gap:8px;font-size:.84rem;
  font-weight:600;color:var(--ink);cursor:pointer;user-select:none}
.pantry-toggle-label input{width:16px;height:16px;accent-color:var(--brand);flex-shrink:0}
.search input{width:100%;padding:11px 13px 11px 38px;border:1px solid var(--line);border-radius:99px;background:var(--surface)}
.search input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 40%,transparent)}
/* ============ RECIPE FILTER PANEL (structured, labeled) ============ */
.filter-panel{display:flex;flex-direction:column;gap:0;margin-bottom:14px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.filter-section{border-bottom:1px solid var(--line)}
.filter-section:last-child{border-bottom:none}
.filter-section-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:8px 14px;cursor:pointer;user-select:none;
  background:transparent;transition:background .15s}
.filter-section-head:hover{background:var(--chip)}
.filter-section-label{
  font-size:.72rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.07em;color:var(--ink-soft);display:flex;align-items:center;gap:6px}
.filter-section-label .fs-active{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--brand);color:var(--brand-ink);
  border-radius:99px;padding:1px 7px;font-size:.62rem;font-weight:700;line-height:1.5}
.filter-section-toggle{color:var(--ink-soft);font-size:.75rem;transition:transform .2s}
.filter-section-toggle.open{transform:rotate(180deg)}
.filter-section-body{
  padding:8px 14px 10px;
  display:none}
.filter-section-body.open{display:block}
/* Collections row — always visible, horizontal scroll on mobile */
.filter-collections{
  display:flex;gap:6px;flex-wrap:nowrap;overflow-x:auto;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
  padding:8px 14px}
.filter-collections::-webkit-scrollbar{display:none}
/* chip wraps inside filter body */
.filter-chips{display:flex;flex-wrap:wrap;gap:6px;padding-top:4px}
.filter-clear{
  display:inline-flex;align-items:center;gap:4px;
  padding:5px 11px;border-radius:99px;font-size:.78rem;font-weight:700;
  background:var(--warn);color:#fff;cursor:pointer;border:none;
  margin-left:auto;flex-shrink:0;white-space:nowrap}
.search svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);opacity:.5}
/* legacy .filters class kept for any other usage */
.filters{display:flex;gap:7px;flex-wrap:nowrap;overflow-x:auto;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
  padding-bottom:6px;margin-bottom:14px}
.filters::-webkit-scrollbar{display:none}
.diet-row{display:flex;gap:5px;flex-wrap:wrap}
.recipe-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(155px,1fr));gap:10px}
.recipe-card{overflow:hidden;display:flex;flex-direction:column;transition:.2s var(--ease)}
.recipe-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.recipe-card .top{height:100px;background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 35%,var(--surface)),color-mix(in srgb,var(--accent2) 30%,var(--surface)));
  display:grid;place-items:center;font-size:2.2rem;position:relative;overflow:hidden;cursor:pointer}
.recipe-card .body{padding:9px;flex:1;display:flex;flex-direction:column;gap:4px}
.recipe-card h3{font-size:.85rem;cursor:pointer;line-height:1.25;}
.recipe-card h3:hover{color:var(--brand)}
.recipe-card .meta{font-size:.68rem;color:var(--ink-soft);display:flex;gap:6px;flex-wrap:nowrap;overflow:hidden}
.own-badge-wrap{position:absolute;top:8px;left:8px;z-index:2;pointer-events:none}
.own-badge{display:inline-block;font-size:.68rem;font-weight:700;padding:3px 8px;border-radius:99px;
  background:color-mix(in srgb,var(--ok) 18%,transparent);color:var(--ok);border:1px solid var(--ok);letter-spacing:.02em}
.own-badge.make-now{background:var(--ok);color:#fff;border-color:var(--ok)}
.recipe-card{position:relative}
.recipe-card .tags{display:flex;gap:5px;flex-wrap:wrap;margin-top:auto;padding-top:6px}
.recipe-card .acts{display:flex;gap:7px;margin-top:10px}
.card-plan-btn{width:100%;padding:5px;border-radius:7px;font-size:.7rem;
  font-weight:700;background:var(--brand);color:var(--brand-ink);
  border:none;cursor:pointer;margin-top:5px;display:flex;
  align-items:center;justify-content:center;gap:4px}
.empty{text-align:center;padding:60px 20px;color:var(--ink-soft)}
.empty .ico{font-size:3rem;margin-bottom:10px;opacity:.5}

/* ============ PLANNER ============ */
.planner{overflow-x:auto;padding-bottom:8px}
.planner-grid{display:grid;grid-template-columns:88px repeat(7,minmax(132px,1fr));gap:8px;min-width:920px}
.ph{font-weight:700;font-size:.8rem;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-soft);padding:8px;text-align:center}
.ph.meal{display:flex;align-items:center;justify-content:flex-end;padding-right:10px;text-align:right}
.slot{background:var(--surface);border:1px dashed var(--line);border-radius:var(--r-sm);min-height:78px;padding:8px;
  font-size:.8rem;position:relative;transition:.15s;cursor:pointer;display:flex;flex-direction:column;gap:4px}
.slot:hover{border-color:var(--brand);border-style:solid}
.slot.filled{border-style:solid;border-color:var(--line);background:var(--chip)}
.slot.leftover{background:repeating-linear-gradient(45deg,var(--chip),var(--chip) 7px,color-mix(in srgb,var(--accent2) 22%,var(--chip)) 7px,color-mix(in srgb,var(--accent2) 22%,var(--chip)) 14px)}
.slot .nm{font-weight:600;line-height:1.2}
.slot .lo-badge{display:inline-block;font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  background:var(--accent2);color:#fff;padding:1px 6px;border-radius:99px;align-self:flex-start}
.slot .x{position:absolute;top:4px;right:5px;width:18px;height:18px;border-radius:50%;background:var(--warn);color:#fff;
  font-size:.7rem;display:none;place-items:center}
.slot.filled:hover .x{display:grid}
.slot .serv{font-size:.68rem;color:var(--ink-soft)}

/* ============ GROCERY ============ */
.grocery-layout{display:grid;grid-template-columns:1fr 300px;gap:20px;align-items:start}
@media(max-width:780px){.grocery-layout{grid-template-columns:1fr}}
.aisle{margin-bottom:18px}
.aisle h4{font-size:.85rem;text-transform:uppercase;letter-spacing:.06em;color:var(--accent);margin-bottom:8px;
  padding-bottom:5px;border-bottom:2px solid var(--line)}
.gitem{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:var(--r-sm);transition:.13s;cursor:pointer}
.gitem:hover{background:var(--chip)}
.gitem.done{opacity:.45}
.gitem.done .gname{text-decoration:line-through}
.gitem .box{width:21px;height:21px;border-radius:6px;border:2px solid var(--line);flex-shrink:0;display:grid;place-items:center;transition:.13s}
.gitem.done .box{background:var(--ok);border-color:var(--ok);color:#fff}
.gitem.pantry{opacity:.5}
.gitem .gname{flex:1;font-weight:500}
.gitem .gqty{font-size:.82rem;color:var(--ink-soft);font-weight:600}
.gitem .pantry-tag{font-size:.65rem;font-weight:700;background:var(--ok);color:#fff;padding:1px 6px;border-radius:99px}

/* ============ STORE HANDOFF BUTTONS ============ */
/* Deep-link store buttons — live below the grocery tools row.
   Styled to feel like a natural extension of the app, not an ad. */
.store-handoff{
  margin-top:14px;padding:14px 16px;
  background:color-mix(in srgb,var(--brand) 5%,var(--surface));
  border:1px solid var(--line);border-radius:var(--r);
  display:flex;flex-direction:column;gap:10px}
.store-handoff-label{
  font-size:.72rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.07em;color:var(--ink-soft)}
.store-handoff-btns{display:flex;gap:8px;flex-wrap:wrap}
.store-btn{
  display:inline-flex;align-items:center;gap:7px;
  padding:9px 16px;border-radius:99px;font-weight:700;font-size:.84rem;
  border:1.5px solid var(--line);background:var(--surface);
  color:var(--ink);transition:.18s var(--ease);cursor:pointer;white-space:nowrap}
.store-btn:hover{transform:translateY(-1px);box-shadow:var(--shadow-sm);border-color:var(--brand)}
.store-btn.walmart{border-color:#0071ce;color:#0071ce}
.store-btn.walmart:hover{background:#0071ce;color:#fff}
.store-btn.instacart{border-color:#43b02a;color:#43b02a}
.store-btn.instacart:hover{background:#43b02a;color:#fff}
/* Review modal ingredient list */
.review-list{list-style:none;max-height:340px;overflow-y:auto;
  border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--bg);padding:4px 0;margin:10px 0}
.review-list li{
  display:flex;align-items:center;justify-content:space-between;
  gap:10px;padding:8px 12px;border-bottom:1px solid var(--line);
  font-size:.88rem}
.review-list li:last-child{border-bottom:none}
.review-list .ri-name{flex:1;font-weight:600}
.review-list .ri-qty{color:var(--ink-soft);font-size:.8rem;font-weight:600}
.review-list .ri-remove{
  color:var(--warn);font-size:.85rem;font-weight:700;
  background:none;border:none;cursor:pointer;padding:2px 6px;
  border-radius:4px;line-height:1;flex-shrink:0}
.review-list .ri-remove:hover{background:color-mix(in srgb,var(--warn) 12%,transparent)}
/* Disclaimer strip in the review modal */
.handoff-disclaimer{
  font-size:.74rem;color:var(--ink-soft);
  background:color-mix(in srgb,var(--warn) 7%,transparent);
  border:1px solid color-mix(in srgb,var(--warn) 20%,transparent);
  border-radius:var(--r-sm);padding:10px 12px;line-height:1.5;margin-top:8px}
.handoff-disclaimer strong{color:var(--warn)}

/* Shopping mode */
body.shopping .view:not(#view-grocery),body.shopping header.app,body.shopping .allergen-ribbon,
body.shopping .grocery-side,body.shopping .grocery-head-actions{display:none!important}
body.shopping .grocery-layout{grid-template-columns:1fr;max-width:560px;margin:0 auto}
body.shopping main{padding-top:18px}
/* Shopping mode top bar — always visible */
.shop-topbar{
  display:none;
  position:sticky;top:0;z-index:30;
  background:var(--brand);
  color:var(--brand-ink);
  padding:10px 16px;
  gap:10px;align-items:center;
  border-bottom:1px solid rgba(255,255,255,.12);
  box-shadow:0 2px 8px rgba(0,0,0,.18)}
body.shopping .shop-topbar{display:flex}
.shop-topbar h4{font-family:var(--font-d);font-size:1rem;font-weight:700;color:#fff;margin-right:auto}
.shop-progress{background:var(--bg);padding:10px 0 8px;z-index:5}
.shop-progress .bar{height:9px;border-radius:99px;background:var(--chip);overflow:hidden}
.shop-progress .fill{height:100%;background:var(--ok);transition:width .4s var(--ease)}
/* Old floating exit button — hide it (replaced by shop-topbar) */
.shop-exit{display:none!important}

/* ============ PANTRY ============ */
.pantry-list{margin-top:8px}
/* Category section */
.pantry-cat{margin-bottom:20px}
.pantry-cat-head{
  display:flex;align-items:center;gap:10px;
  margin-bottom:10px;padding-bottom:6px;
  border-bottom:2px solid var(--line)}
.pantry-cat-icon{font-size:1.2rem;line-height:1}
.pantry-cat-label{font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-soft)}
.pantry-cat-count{font-size:.72rem;color:var(--ink-soft);margin-left:auto;background:var(--chip);padding:2px 8px;border-radius:99px}
.pantry-chips{display:flex;flex-wrap:wrap;gap:7px}
.pchip{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:99px;
  background:var(--chip);font-weight:600;font-size:.83rem;border:1px solid transparent;
  transition:border-color .15s}
.pchip:hover{border-color:var(--line)}
.pchip button{color:var(--warn);font-weight:700;font-size:1rem;line-height:1;padding:0 2px}
/* Quick-add strip */
.pantry-quickadd{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px}
.pantry-qa-btn{display:inline-flex;align-items:center;gap:5px;padding:6px 12px;border-radius:99px;
  font-size:.78rem;font-weight:600;border:1.5px dashed var(--line);background:transparent;
  color:var(--ink-soft);cursor:pointer;transition:.15s}
.pantry-qa-btn:hover{border-color:var(--brand);color:var(--brand);background:color-mix(in srgb,var(--brand) 6%,transparent)}
/* Search row */
.pantry-search-row{display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap}
/* Empty category placeholder */
.pantry-cat-empty{font-size:.8rem;color:var(--ink-soft);font-style:italic;padding:4px 0}

/* ============ NUTRITION ============ */
.macro{margin-bottom:16px}
.macro .top{display:flex;justify-content:space-between;font-size:.88rem;font-weight:600;margin-bottom:6px}
.macro .top .v{color:var(--ink-soft)}
.macro .bar{height:13px;border-radius:99px;background:var(--chip);overflow:hidden}
.macro .fill{height:100%;border-radius:99px;transition:width .5s var(--ease);max-width:100%}

/* ============ MODAL ============ */
/* z-index:250 ensures modals always sit above the bottom-bar (z-index:200) */
.modal-bg{position:fixed;inset:0;z-index:250;background:rgba(20,24,20,.55);backdrop-filter:blur(4px);
  display:none;align-items:flex-start;justify-content:center;padding:24px 12px;overflow-y:auto}
.modal-bg.show{display:flex;animation:fade .25s}
/* Use dvh (dynamic viewport height) so virtual keyboard shrink doesn't cut off modals */
.modal{background:var(--surface);border-radius:var(--r);width:calc(100% - 24px);max-width:600px;box-shadow:var(--shadow);
  border:1px solid var(--line);animation:pop .3s var(--ease);position:relative;
  display:flex;flex-direction:column;max-height:90dvh}
@keyframes pop{from{transform:scale(.95) translateY(10px);opacity:0}to{transform:none;opacity:1}}
.modal-h{padding:20px 24px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
.modal-h h3{font-size:1.5rem}
/* flex:1 + overflow-y:auto allows body to scroll while header/footer stay pinned */
.modal-b{padding:20px;overflow-y:auto;flex:1;overflow-x:hidden;
  padding-bottom:calc(20px + env(safe-area-inset-bottom,0px))}
.modal-close{width:34px;height:34px;border-radius:50%;background:var(--chip);display:grid;place-items:center;font-size:1.2rem}
.modal-close:hover{background:var(--warn);color:#fff}

/* substitution drawer */
.ing-list li{list-style:none;padding:10px 12px;border-radius:var(--r-sm);display:flex;justify-content:space-between;
  align-items:center;gap:10px;cursor:default;transition:.13s}
.ing-list li.sub-able{cursor:pointer}
.ing-list li.sub-able:hover{background:var(--chip)}
.ing-list li.sub-able::after{content:"\21C4 sub";font-size:.68rem;color:var(--accent);font-weight:700;opacity:.7}
.sub-box{margin-top:8px;padding:12px;background:var(--bg);border-radius:var(--r-sm);border-left:3px solid var(--accent);font-size:.86rem}
.sub-box .so{padding:5px 0;border-bottom:1px dashed var(--line)}
.sub-box .so:last-child{border:none}

/* toast */
#toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(120px);z-index:80;
  background:var(--ink);color:var(--bg);padding:13px 22px;border-radius:99px;font-weight:600;font-size:.9rem;
  box-shadow:var(--shadow);transition:transform .35s var(--ease);max-width:90vw;text-align:center}
#toast.show{transform:translateX(-50%) translateY(0)}
#toast.err{background:var(--warn);color:#fff}
/* toast mobile offset handled inside the main mobile block */

/* ============ ONBOARDING WIZARD ============ */
.onboard-bg{position:fixed;inset:0;z-index:95;background:rgba(20,24,20,.62);
  backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;padding:16px}
.onboard-bg.show{display:flex;animation:fade .3s var(--ease)}
.onboard-card{background:var(--surface);border-radius:var(--r);width:100%;max-width:520px;
  max-height:92dvh;display:flex;flex-direction:column;box-shadow:0 24px 60px -12px rgba(20,30,25,.4);
  border:1px solid var(--line);overflow:hidden}
.onboard-prog{display:flex;gap:6px;padding:20px 24px 0}
.onboard-prog-dot{flex:1;height:4px;border-radius:99px;background:var(--line);transition:.4s var(--ease)}
.onboard-prog-dot.done{background:var(--brand)}
.onboard-prog-dot.active{background:var(--accent)}
.onboard-body{padding:24px;overflow-y:auto;flex:1}
.onboard-step{display:none}
.onboard-step.active{display:block;animation:fade .3s var(--ease)}
.onboard-icon{font-size:2.6rem;margin-bottom:14px;line-height:1}
.onboard-title{font-family:var(--font-d);font-size:1.55rem;font-weight:600;
  margin-bottom:6px;line-height:1.15}
.onboard-sub{color:var(--ink-soft);font-size:.9rem;line-height:1.55;margin-bottom:20px}
/* Step 1 — household size tiles */
.onboard-tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:4px}
.onboard-tile{padding:14px 12px;border-radius:var(--r-sm);border:2px solid var(--line);
  background:var(--bg);cursor:pointer;text-align:center;transition:.18s var(--ease);user-select:none}
.onboard-tile:hover{border-color:var(--brand);background:color-mix(in srgb,var(--brand) 5%,var(--bg))}
.onboard-tile.selected{border-color:var(--brand);
  background:color-mix(in srgb,var(--brand) 10%,var(--surface));
  box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 25%,transparent)}
.onboard-tile .ot-icon{font-size:1.6rem;margin-bottom:6px;line-height:1}
.onboard-tile .ot-label{font-weight:700;font-size:.88rem;color:var(--ink)}
.onboard-tile .ot-sub{font-size:.74rem;color:var(--ink-soft);margin-top:2px}
/* Step 2 — diet preference chips */
.onboard-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:4px}
.onboard-chip{padding:9px 15px;border-radius:99px;border:2px solid var(--line);
  background:var(--bg);cursor:pointer;font-size:.84rem;font-weight:600;
  color:var(--ink-soft);transition:.15s var(--ease);user-select:none;white-space:nowrap}
.onboard-chip:hover{border-color:var(--brand);color:var(--ink)}
.onboard-chip.selected{background:var(--brand);color:var(--brand-ink);border-color:var(--brand)}
/* Step 3 — summary receipt */
.onboard-receipt{background:color-mix(in srgb,var(--brand) 6%,var(--bg));
  border:1px solid color-mix(in srgb,var(--brand) 20%,transparent);
  border-radius:var(--r-sm);padding:16px;margin-bottom:16px}
.onboard-receipt-row{display:flex;align-items:flex-start;gap:10px;
  padding:9px 0;border-bottom:1px solid var(--line);font-size:.88rem;line-height:1.5}
.onboard-receipt-row:last-child{border-bottom:none}
.onboard-receipt-row .or-icon{font-size:1.1rem;flex-shrink:0;margin-top:1px}
.onboard-receipt-row .or-label{font-weight:700;color:var(--ink-soft);font-size:.75rem;
  text-transform:uppercase;letter-spacing:.05em;margin-bottom:2px}
.onboard-receipt-row .or-val{color:var(--ink);font-weight:600}
.onboard-receipt-row .or-where{font-size:.74rem;color:var(--ink-soft);margin-top:2px}
/* Step 4 — pantry quick-select */
.onboard-pantry-grid{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:4px}
.onboard-pantry-chip{padding:7px 13px;border-radius:99px;border:2px solid var(--line);
  background:var(--bg);cursor:pointer;font-size:.82rem;font-weight:600;
  color:var(--ink-soft);transition:.15s var(--ease);user-select:none}
.onboard-pantry-chip:hover{border-color:var(--ok);color:var(--ink)}
.onboard-pantry-chip.selected{background:var(--ok);color:#fff;border-color:var(--ok)}
/* Footer nav */
.onboard-foot{padding:16px 24px;border-top:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;gap:10px;flex-shrink:0}
.onboard-step-label{font-size:.78rem;font-weight:700;color:var(--ink-soft);
  text-transform:uppercase;letter-spacing:.06em}

/* consent + action word */
.action-word{position:fixed;top:45%;left:50%;transform:translate(-50%,-50%) scale(.5);z-index:65;
  font-family:var(--font-d);font-weight:700;font-size:3.5rem;color:var(--accent);pointer-events:none;
  text-shadow:0 4px 18px rgba(0,0,0,.2);opacity:0}
.action-word.go{animation:aw 1.1s var(--ease) forwards}
@keyframes aw{15%{opacity:1;transform:translate(-50%,-50%) scale(1.15) rotate(-3deg)}
  30%{transform:translate(-50%,-50%) scale(1) rotate(2deg)}
  100%{opacity:0;transform:translate(-50%,-150%) scale(.9)}}

.sec-divider{display:flex;align-items:center;gap:12px;margin:26px 0 16px;color:var(--ink-soft);font-size:.8rem;
  font-weight:700;text-transform:uppercase;letter-spacing:.08em}
.sec-divider::before,.sec-divider::after{content:"";flex:1;height:1px;background:var(--line)}

.sync-dot{display:inline-flex;align-items:center;gap:6px;font-size:.75rem;font-weight:600;color:var(--ink-soft)}
.sync-dot i{width:8px;height:8px;border-radius:50%;background:var(--ink-soft);display:inline-block}
.sync-dot.live i{background:var(--ok);box-shadow:0 0 0 0 var(--ok);animation:pulse 2s infinite}
.sync-dot.err i{background:var(--warn)}
@keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--ok) 60%,transparent)}70%{box-shadow:0 0 0 7px transparent}}

@media(max-width:560px){
  .stat-row{grid-template-columns:1fr 1fr}
}
/* ---- photos, favorites, ratings, collections (added) ---- */
.recipe-card .top .emoji-fallback{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:6px;font-size:2.8rem;
  background:linear-gradient(145deg,color-mix(in srgb,var(--chip) 80%,transparent),color-mix(in srgb,var(--bg2) 90%,transparent))}
.emoji-fallback-note{font-family:var(--font-b);font-size:.65rem;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);opacity:.7}
.rimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.fav{position:absolute;top:8px;left:8px;width:32px;height:32px;border-radius:50%;background:rgba(0,0,0,.32);
  color:#fff;font-size:1.05rem;display:grid;place-items:center;backdrop-filter:blur(2px);z-index:2;line-height:1}
.fav.on{color:#ff5d73}
.fav:hover{background:rgba(0,0,0,.5)}
.kid-badge{position:absolute;top:8px;right:8px;font-size:.66rem;font-weight:700;background:var(--accent2);color:#fff;
  padding:2px 8px;border-radius:99px;z-index:2}
.pantry-pct{position:absolute;bottom:8px;right:8px;font-size:.66rem;font-weight:700;background:var(--brand);color:var(--brand-ink);
  padding:2px 8px;border-radius:99px;z-index:2}
.stars{display:inline-flex;gap:2px}
.star{color:color-mix(in srgb,var(--ink-soft) 40%,transparent);font-size:1.05rem;background:none;line-height:1}
.star.on{color:#f5a623}
button.star{cursor:pointer;padding:0 1px}
button.star:hover{transform:scale(1.15)}
.rate-row{display:flex;align-items:center;gap:8px;background:var(--bg);border:1px solid var(--line);
  border-radius:99px;padding:8px 14px;margin-bottom:14px}
.detail-photo{position:relative;height:200px;border-radius:var(--r);overflow:hidden;margin-bottom:14px;
  background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 35%,var(--surface)),color-mix(in srgb,var(--accent2) 30%,var(--surface)));
  display:grid;place-items:center}
.emoji-fallback.big{position:absolute;inset:0;display:grid;place-items:center;font-size:4.5rem}
.collections{display:flex;gap:7px;flex-wrap:nowrap;overflow-x:auto;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
  padding-bottom:6px;margin-bottom:4px}
.collections::-webkit-scrollbar{display:none}
.ctab{padding:7px 13px;border-radius:99px;font-weight:600;font-size:.82rem;background:var(--surface);
  border:1px solid var(--line);color:var(--ink-soft);transition:.15s var(--ease);flex-shrink:0;white-space:nowrap}
.ctab:hover{color:var(--ink);border-color:var(--brand)}
.ctab.on{background:var(--brand);color:var(--brand-ink);border-color:var(--brand)}
.ctab.surprise{background:transparent;border-style:dashed;color:var(--accent);margin-left:auto}
.ctab.surprise:hover{background:color-mix(in srgb,var(--accent) 14%,transparent)}
.diet-row{display:flex;gap:5px;flex-wrap:wrap}
#recipeCount{font-size:.8rem;color:var(--ink-soft);font-weight:600}
/* multi-dish planner slots */
.slot{align-items:stretch;justify-content:flex-start}
.slot .dish{display:flex;align-items:center;gap:5px;background:var(--surface);border:1px solid var(--line);
  border-radius:7px;padding:4px 6px;position:relative}
.slot .dish.leftover{background:repeating-linear-gradient(45deg,var(--surface),var(--surface) 6px,color-mix(in srgb,var(--accent2) 20%,var(--surface)) 6px,color-mix(in srgb,var(--accent2) 20%,var(--surface)) 12px)}
.slot .dish .dn{font-weight:600;line-height:1.15;font-size:.76rem;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.slot .dish .dish-link:hover{text-decoration:underline;color:var(--brand-ink);opacity:.85}
.slot .dish .sv{font-size:.64rem;color:var(--ink-soft);font-weight:700;background:var(--chip);border-radius:99px;padding:1px 6px}
.slot .dish .lo-badge{font-size:.58rem}
.dx{width:16px;height:16px;border-radius:50%;background:var(--warn);color:#fff;font-size:.6rem;display:grid;place-items:center;flex:none;line-height:1}
.addmore{font-size:.72rem;font-weight:600;color:var(--brand);border:1px dashed var(--line);border-radius:7px;
  padding:5px;background:transparent;transition:.15s}
.addmore:hover{border-color:var(--brand);background:color-mix(in srgb,var(--brand) 8%,transparent)}
.slot:not(.filled){border-style:dashed}
.slot.filled{background:var(--bg)}
/* ===================== RESPONSIVE NAV / MOTTO / FOOTER / COOKING / DRAG ===================== */
.brand{display:flex;flex-direction:column;gap:1px}
.motto{font-family:var(--font-d);font-style:italic;font-size:.82rem;color:var(--ink-soft);line-height:1.1}
/* (legacy .hd-actions override removed — the grid header rules above own this) */
nav.tabs button{display:flex;align-items:center}
.foot{margin-top:40px;border-top:1px solid var(--line);background:color-mix(in srgb,var(--bg) 60%,transparent)}
.foot .wrap{padding:22px 0 30px;text-align:center}
.motto-foot{font-family:var(--font-d);font-style:italic;font-size:1.05rem;color:var(--ink);margin-bottom:8px}
.foot-links{font-size:.82rem;color:var(--ink-soft)}
.foot-links a{color:var(--ink-soft)}
.foot-links a:hover{color:var(--brand)}

/* ---- touch device: suppress drag cursor since HTML5 DnD doesn't fire on iOS/Android ---- */
@media(hover:none){
  [draggable="true"]{cursor:pointer}
  .recipe-card.dragging,.dish.dragging{opacity:1}
}
.slot.drop-hot{border-style:solid !important;border-color:var(--brand) !important;background:color-mix(in srgb,var(--brand) 12%,transparent) !important;box-shadow:inset 0 0 0 2px var(--brand)}
.drag-hint{font-size:.74rem;color:var(--ink-soft);margin-top:6px}
@media(hover:none){.drag-hint-dnd{display:none}.drag-hint-touch{display:inline !important}}
@media(hover:hover){.drag-hint-touch{display:none !important}}

/* cooking mode */
.cook{position:fixed;inset:0;z-index:120;background:var(--bg);display:none;flex-direction:column;
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:calc(env(safe-area-inset-top) + 16px) 18px calc(env(safe-area-inset-bottom) + 18px)}
.cook.show{display:flex}
.cook-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.cook-top h3{font-size:1.15rem;line-height:1.15}
.cook-x{width:40px;height:40px;border-radius:12px;border:1px solid var(--line);background:var(--surface);font-size:1.1rem;flex:none}
.cook-prog{height:6px;border-radius:99px;background:var(--chip);overflow:hidden;margin-bottom:18px}
.cook-prog i{display:block;height:100%;background:var(--brand);transition:width .3s var(--ease)}
.cook-stepwrap{flex:1;display:flex;flex-direction:column;justify-content:flex-start;padding-top:8px;max-width:680px;margin:0 auto;width:100%}
.cook-num{font-size:.8rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-bottom:12px}
.cook-step{font-family:var(--font-d);font-size:clamp(1.5rem,4.5vw,2.4rem);line-height:1.25;font-weight:500}
.cook-ings{margin-top:22px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;max-height:34vh;overflow:auto}
.cook-ings h4{font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-soft);margin-bottom:8px}
/* Kitchen timer widget inside cook mode */
.cook-timer{display:inline-flex;align-items:center;gap:10px;margin-top:16px;padding:12px 18px;
  border-radius:var(--r);border:2px solid var(--accent);background:color-mix(in srgb,var(--accent) 8%,transparent);
  cursor:pointer;user-select:none;transition:background .2s}
.cook-timer:hover{background:color-mix(in srgb,var(--accent) 16%,transparent)}
.cook-timer.running{border-color:var(--ok);background:color-mix(in srgb,var(--ok) 8%,transparent)}
.cook-timer.done{border-color:var(--ok);background:var(--ok);color:#fff}
.cook-timer-icon{font-size:1.4rem;line-height:1}
.cook-timer-display{font-family:var(--font-d);font-size:1.6rem;font-weight:600;min-width:60px;letter-spacing:.02em}
.cook-timer-label{font-size:.76rem;color:var(--ink-soft);font-weight:600;text-transform:uppercase;letter-spacing:.06em}
.cook-timer.running .cook-timer-label{color:var(--ok)}
.cook-timer.done .cook-timer-label,.cook-timer.done .cook-timer-display{color:#fff}
.cook-ings li{padding:4px 0;border-bottom:1px solid var(--line);font-size:.95rem;list-style:none}
.cook-nav{display:flex;gap:10px;max-width:680px;margin:18px auto 0;width:100%}
.cook-nav .btn{flex:1;justify-content:center;padding:16px;font-size:1rem}

/* ===== mobile: bottom tab bar + app-like polish (<=760px) ===== */

/* --bottom-bar-h drives both the bar height and all page padding calculations.
   Defined here so one change updates everything.  */
:root{ --bottom-bar-h: 64px; }

/* ── STANDALONE BOTTOM NAV (outside header — no stacking context issues) ── */
.bottom-bar{display:none} /* hidden on desktop */

@media(max-width:760px){
  /* On mobile: hide the top-nav tabs (bottom-bar handles navigation) */
  .hd-row1-inner nav.tabs{display:none !important}
  /* Show the standalone bottom bar instead */
  .bottom-bar{
    display:flex !important;
    position:fixed;
    left:0;right:0;bottom:0;
    z-index:200;
    background:var(--brand);
    border-top:1px solid rgba(255,255,255,.12);
    box-shadow:0 -2px 16px rgba(0,0,0,.2);
    padding:6px 0;
    padding-bottom:calc(6px + env(safe-area-inset-bottom,0px));
    min-height:var(--bottom-bar-h);
    justify-content:space-around;
    align-items:stretch;
  }
  .bb-btn{
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    flex:1;gap:3px;padding:4px 2px;
    background:none;border:none;cursor:pointer;
    color:rgba(255,255,255,.6);
    border-radius:10px;
    min-height:48px;min-width:44px;
    transition:color .15s,background .15s;
  }
  .bb-btn:hover,.bb-btn:active{color:#fff;background:rgba(255,255,255,.12)}
  .bb-btn.active{color:#fff;background:rgba(255,255,255,.18)}
  .bb-icon{font-size:1.3rem;line-height:1;display:block}
  .bb-label{font-size:.58rem;font-weight:700;display:block;letter-spacing:.01em}
  .bb-btn.active .bb-icon{transform:translateY(-1px) scale(1.1)}
}

@media(max-width:760px){
  .hd-top{padding:8px 0;gap:8px}
  .hd-actions{margin-left:auto}
  /* Mobile: scripture bar adds height on non-dash views */
  .hd-spacer{height:72px}
  body.view-dash .hd-spacer{height:52px}
  .hd-spacer{height:52px} /* mobile: only row1 + row2 scripture ticker visible */
  .logo-sub1{display:none}
  .page-head{flex-direction:column;align-items:flex-start;gap:10px}
  .page-head > div:last-child{width:100%}

  /* Push page content above the fixed bar, accounting for iPhone notch/home indicator */
  main.wrap{padding-bottom:calc(var(--bottom-bar-h) + env(safe-area-inset-bottom,0px) + 16px)}
  body.cooking main.wrap{padding-bottom:0}

  /* === THE BOTTOM NAV BAR ===
     position:fixed + bottom:0 + env(safe-area-inset-bottom) is the correct recipe
     for both Android Chrome and iOS Safari (both browser and installed PWA).
     background uses color-mix for frosted glass; backdrop-filter for blur on supporting browsers. */
  nav.tabs{
    position:fixed;
    left:0;right:0;bottom:0;
    z-index:60;
    margin:0;
    width:100%;
    gap:0;
    display:flex;
    justify-content:space-around;
    flex-wrap:nowrap;
    background:var(--brand);
    border:0;                /* reset the desktop segmented-track border  */
    border-radius:0;         /* …and its rounding — this is a full-width bar */
    border-top:1px solid rgba(255,255,255,.12);
    box-shadow:0 -2px 12px rgba(0,0,0,.18);
    padding:6px 4px;
    padding-bottom:calc(6px + env(safe-area-inset-bottom,0px));
    min-height:var(--bottom-bar-h);
  }

  nav.tabs button{
    flex-direction:column;
    gap:3px;
    flex:1;
    padding:6px 4px;
    border-radius:12px;
    font-size:.62rem;
    color:rgba(255,255,255,.6);
    min-height:48px;
    min-width:44px;
    justify-content:center;
    align-items:center;
    transition:color .15s,background .15s;
    /* Prevent text wrapping on very narrow phones */
    white-space:nowrap;
    overflow:hidden;
  }
  /* Active tab: colored icon + label, subtle pill background */
  nav.tabs button.active{
    background:rgba(255,255,255,.18);
    color:#fff;
  }
  nav.tabs button.active .ti{
    transform:translateY(-1px) scale(1.1);
    transition:transform .2s var(--ease);
  }
  nav.tabs .ti{display:block;font-size:1.28rem;line-height:1}
  nav.tabs .tl{font-weight:700;letter-spacing:.01em}

  .foot{margin-bottom:calc(var(--bottom-bar-h) + 12px)}
  .modal{max-height:90dvh}
  .toolbar{flex-direction:row;align-items:center;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch}
  #recipeCount{margin-left:0 !important}

  /* Push content far enough above bottom nav so last items aren't hidden */
  main.wrap{padding-bottom:calc(var(--bottom-bar-h) + env(safe-area-inset-bottom,0px) + 30px)}

  /* Toast clears the bar */
  #toast{bottom:calc(var(--bottom-bar-h) + env(safe-area-inset-bottom,0px) + 12px) !important}
}

/* ===== Responsive form grid utilities (replaces hardcoded inline grids) ===== */
/* Stack single-column on mobile; expand to 3-col on wider screens */
.rf-grid-3{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
}
/* 2-col on mobile for compact macro inputs; 4-col on desktop */
.rf-grid-4{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}
/* 2-col layout that stays 2-col at all sizes (cuisine/difficulty) */
.rf-grid-2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-top:4px;
}
@media(min-width:520px){
  .rf-grid-3{grid-template-columns:1fr 1fr 1fr;}
  .rf-grid-4{grid-template-columns:repeat(4,1fr);}
}
@media(max-width:420px){
  .recipe-grid{grid-template-columns:1fr 1fr}
  .stat-row{grid-template-columns:1fr 1fr 1fr}
}

/* planner phone day-view */
.planner-grid.dayview{display:block;min-width:0}
.pday-chips{display:flex;gap:6px;overflow-x:auto;padding-bottom:10px;margin-bottom:6px;-webkit-overflow-scrolling:touch}
.pday-chips .ctab{flex:none;padding:8px 16px}
.pmeal{padding:14px;margin-bottom:12px}
.pmeal-h{font-weight:700;text-transform:uppercase;letter-spacing:.05em;font-size:.78rem;color:var(--ink-soft);margin-bottom:10px}
.pmeal .slot{min-height:0;gap:8px}
.pmeal .dish{padding:8px 10px}
.pmeal .dish .dn{font-size:.95rem}
.pmeal .addmore{padding:12px}

@media print{
  body{background:#fff;color:#000}
  header,nav,#tabs,.tabbar,.theme-btn,.allergen-ribbon,#particle-canvas,.no-print,.btn,.fav,.addmore,.dx,
  .scripture,footer,.consent,#shopProgress{display:none !important}
  .view{display:none !important}
  .view.active{display:block !important}
  .card,.aisle,.slot,.dish{box-shadow:none !important;border-color:#ccc !important}
  .gitem{break-inside:avoid}
  a{color:#000}
}