*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
:root{
  --ink:#1C1917;--ink-soft:#57534E;--ink-faint:#A8A29E;
  --cream:#EAF0E1;--white:#FFFFFF;
  --season-bg:#EAF0E1;
  --accent:#5C7A29;--accent-light:#EEF3E2;--accent-dark:#425A16;
  --olive:#3F4B3B;--olive-light:#E8ECE4;
  --berry:#8C3B58;--berry-light:#F5EAEF;
  --mustard:#D9A404;--mustard-light:#FBF0D9;
  --border:#E7E1D3;--border-soft:#F1EBDD;
  --green:#166534;--green-bg:#F0FDF4;
  --blue:#1D4ED8;--blue-bg:#EFF6FF;
  --purple:#7C3AED;--purple-bg:#F5F3FF;
  --font-display:'Fraunces',Georgia,serif;
  --font-dish:'Caveat',cursive;
  --font-body:'Inter',-apple-system,'Segoe UI',system-ui,sans-serif;
}
/* overflow-x:hidden is a deliberate safety net, not the fix itself (see
   app-bar markup comment for the actual cause found in the 2026-09-29
   audit) -- it stops any future wide element from blowing out the whole
   page horizontally the way the uncollapsed header did. */
html{overflow-x:hidden;}
body{font-family:var(--font-body);background:var(--season-bg);color:var(--ink);min-height:100vh;transition:background 1.2s ease;overflow-x:hidden;max-width:100vw;}

/* ── ONBOARDING ── */
#onboarding{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;padding:24px 16px;}
.ob-wrap{background:var(--white);border:1px solid var(--border);border-radius:20px;padding:32px 28px;max-width:500px;width:100%;box-shadow:0 4px 24px rgba(0,0,0,0.06);}
.ob-logo{font-family:var(--font-display);font-size:34px;font-weight:700;color:var(--accent);letter-spacing:-1px;margin-bottom:2px;}
.ob-tagline{font-size:13px;color:var(--ink-faint);margin-bottom:24px;}
.progress{display:flex;gap:5px;margin-bottom:28px;}
.prog-dot{height:4px;border-radius:2px;flex:1;background:var(--border);transition:background .3s;}
.prog-dot.done{background:var(--accent);}
.ob-step{display:none;}
.ob-step.active{display:block;}
.step-title{font-family:var(--font-display);font-size:20px;font-weight:600;margin-bottom:4px;}
.step-sub{font-size:13px;color:var(--ink-soft);margin-bottom:20px;line-height:1.5;}

.fl{display:block;font-size:11px;font-weight:700;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.06em;margin:16px 0 6px;}
.fl:first-child{margin-top:0;}
input[type=text],input[type=number],select,textarea{width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:10px;font-size:14px;font-family:inherit;color:var(--ink);background:var(--cream);outline:none;transition:border-color .2s;}
input:focus,select:focus,textarea:focus{border-color:var(--accent);background:#fff;}
textarea{resize:vertical;min-height:72px;line-height:1.5;}
.input-row{display:flex;gap:8px;align-items:center;}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.6;}}

.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px;}
.chip{padding:7px 14px;border:1px solid var(--border);border-radius:20px;font-size:13px;cursor:pointer;background:var(--white);color:var(--ink-soft);transition:all .15s;user-select:none;}
.chip.on{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600;}

.meal-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.meal-card{padding:12px;border:1.5px solid var(--border);border-radius:12px;cursor:pointer;background:var(--white);transition:all .15s;text-align:center;}
.meal-card .mc-icon{font-size:24px;display:block;margin-bottom:4px;}
.meal-card .mc-name{font-size:13px;font-weight:700;color:var(--ink);}
.meal-card .mc-desc{font-size:11px;color:var(--ink-faint);}
.meal-card.on{background:var(--accent-light);border-color:var(--accent);}
.meal-card.on .mc-name{color:var(--accent);}

.range-row{display:flex;gap:8px;align-items:center;margin-top:4px;}
.range-val{font-size:14px;font-weight:700;color:var(--accent);min-width:48px;}
input[type=range]{
  flex:1;-webkit-appearance:none;appearance:none;
  height:8px;border-radius:4px;
  background:linear-gradient(to right, var(--accent) 0%, var(--accent) var(--range-progress,33%), var(--border) var(--range-progress,33%), var(--border) 100%);
  cursor:pointer;outline:none;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:26px;height:26px;border-radius:50%;
  background:var(--white);border:3px solid var(--accent);
  box-shadow:0 2px 6px rgba(0,0,0,0.2);cursor:grab;
}
input[type=range]::-webkit-slider-thumb:active{cursor:grabbing;transform:scale(1.1);}
input[type=range]::-moz-range-thumb{
  width:26px;height:26px;border-radius:50%;
  background:var(--white);border:3px solid var(--accent);
  box-shadow:0 2px 6px rgba(0,0,0,0.2);cursor:grab;
}
input[type=range]::-moz-range-track{height:8px;border-radius:4px;background:var(--border);}
input[type=range]::-moz-range-progress{height:8px;border-radius:4px;background:var(--accent);}
@keyframes slider-pulse{
  0%{box-shadow:0 2px 6px rgba(0,0,0,0.2), 0 0 0 0 rgba(194,65,12,0.4);}
  70%{box-shadow:0 2px 6px rgba(0,0,0,0.2), 0 0 0 10px rgba(194,65,12,0);}
  100%{box-shadow:0 2px 6px rgba(0,0,0,0.2), 0 0 0 0 rgba(194,65,12,0);}
}
.pulse-once::-webkit-slider-thumb{animation:slider-pulse 1.2s ease-out 2;}
.pulse-once::-moz-range-thumb{animation:slider-pulse 1.2s ease-out 2;}

.btn-row{display:flex;gap:8px;margin-top:24px;}
.btn-p{flex:1;padding:13px;background:var(--accent);color:#fff;border:none;border-radius:12px;font-size:14px;font-weight:700;cursor:pointer;transition:opacity .15s;}
.btn-p:hover{opacity:.9;}
.btn-g{padding:13px 16px;background:transparent;color:var(--ink-soft);border:1px solid var(--border);border-radius:12px;font-size:14px;cursor:pointer;}

/* ── APP ── */
#app{display:none;max-width:880px;margin:0 auto;padding:20px 16px 60px;}
.app-bar{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;}
.app-logo{font-size:24px;font-weight:900;color:var(--accent);letter-spacing:-1px;}
.app-user{font-size:13px;color:var(--ink-faint);cursor:pointer;}
.app-user:hover{color:var(--accent);}

.tabs-wrap{position:relative;margin-bottom:20px;}
.tabs-scroll-btn{
  position:absolute;top:50%;right:2px;transform:translateY(-50%);
  width:32px;height:32px;border-radius:50%;
  background:var(--accent);color:#fff;border:2px solid var(--white);
  box-shadow:0 2px 6px rgba(0,0,0,0.25);
  font-size:13px;cursor:pointer;display:flex;align-items:center;justify-content:center;
  z-index:2;animation:arrow-nudge 1.4s ease-in-out 3;
}
.tabs-scroll-btn.hidden{display:none;}
@keyframes arrow-nudge{
  0%,100%{transform:translateY(-50%) translateX(0);}
  50%{transform:translateY(-50%) translateX(4px);}
}
.tabs{display:flex;gap:4px;background:var(--border);border-radius:12px;padding:3px;padding-right:42px;margin-bottom:0;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;}
.tabs::-webkit-scrollbar{display:none;}
.tab{flex:0 0 auto;padding:9px 14px;text-align:center;font-size:13px;font-weight:600;color:var(--ink-soft);border-radius:10px;cursor:pointer;transition:all .15s;white-space:nowrap;}
.tab.on{background:var(--white);color:var(--ink);box-shadow:0 1px 4px rgba(0,0,0,0.08);}

.tc{display:none;}
.tc.on{display:block;}

/* PLAN */
.week-bar{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}
.wk-label{font-size:14px;font-weight:700;}
.nav-btn{width:30px;height:30px;border-radius:8px;border:1px solid var(--border);background:var(--white);cursor:pointer;font-size:15px;color:var(--ink-soft);}
.season-row{font-size:12px;color:var(--ink-faint);margin-bottom:14px;line-height:1.6;}
.season-row b{color:var(--ink-soft);}
.season-pill{font-size:10px;font-weight:700;letter-spacing:.06em;padding:2px 8px;border-radius:10px;display:inline-block;margin-left:4px;}

.gen-btn{width:100%;padding:14px;background:var(--accent);color:#fff;border:none;border-radius:12px;font-size:14px;font-weight:700;cursor:pointer;margin-bottom:14px;letter-spacing:.01em;transition:opacity .15s;}
.gen-btn:hover{opacity:.9;}

.card{background:var(--white);border:1px solid var(--border);border-radius:14px;padding:16px 18px;margin-bottom:10px;}
.card.locked{border-color:#D97706;background:#FFFBEB;}
.card-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
.day-name{font-family:var(--font-display);font-size:18px;font-weight:600;}
.day-dt{font-size:12px;color:var(--ink-faint);margin-left:6px;}
.card-acts{display:flex;gap:6px;}
.ic{width:30px;height:30px;border-radius:8px;border:1px solid var(--border);background:var(--white);cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center;}

.meals{display:flex;flex-direction:column;gap:12px;}
.mb{border-bottom:1px solid var(--border-soft);padding-bottom:10px;}
.mb:last-child{border-bottom:none;padding-bottom:0;}
.mt{font-size:10px;font-weight:700;color:var(--ink-faint);text-transform:uppercase;letter-spacing:.08em;margin-bottom:4px;}
.mv{font-family:var(--font-dish);font-size:20px;font-weight:700;color:var(--ink);cursor:pointer;line-height:1.4;padding:4px 6px;border-radius:6px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;}
.mv:hover{background:var(--border-soft);}
.er{display:flex;gap:4px;}
.ei{flex:1;font-size:13px;padding:4px 8px;border:1px solid var(--accent);border-radius:7px;outline:none;font-family:inherit;background:#fff;}
.eo{padding:4px 10px;background:var(--accent);color:#fff;border:none;border-radius:7px;font-size:12px;cursor:pointer;font-weight:700;}

.ptags{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px;padding-top:12px;border-top:1px solid var(--border-soft);}
.ptag{font-size:11px;background:var(--green-bg);color:var(--green);padding:3px 10px;border-radius:10px 3px 10px 3px;font-weight:600;}
.pbar{margin-top:8px;}
.pbar-label{font-size:10px;color:var(--ink-faint);margin-bottom:3px;}
.pbar-track{height:4px;background:var(--border);border-radius:2px;}
.pbar-fill{height:4px;background:var(--green);border-radius:2px;transition:width .4s;}

/* SHOPPING */
.shop-card{background:var(--white);border:1px solid var(--border);border-radius:14px;padding:16px;margin-bottom:12px;}
.shop-head{font-size:14px;font-weight:700;margin-bottom:14px;}
.shop-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
@media(max-width:430px){.shop-grid{grid-template-columns:1fr;}}
.shop-cat{font-size:11px;font-weight:700;color:var(--ink-faint);text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px;}
.si{display:flex;align-items:center;justify-content:space-between;padding:5px 0;border-bottom:1px solid var(--border-soft);font-size:13px;}
.si:last-child{border-bottom:none;}
.si-left{display:flex;align-items:center;gap:7px;cursor:pointer;flex:1;}
.si-left input{accent-color:var(--accent);cursor:pointer;flex-shrink:0;}
.si-name{transition:color .2s;}
.si-name.done{text-decoration:line-through;color:var(--ink-faint);}
.si-right{display:flex;gap:5px;align-items:center;flex-shrink:0;}
.si-qty{font-size:11px;color:var(--ink-faint);background:var(--border-soft);padding:1px 6px;border-radius:6px;}
.si-local{font-size:10px;color:var(--ink-faint);background:var(--border-soft);padding:1px 6px;border-radius:6px;}
.bb-link{font-size:10px;color:var(--accent);text-decoration:none;font-weight:700;margin-left:6px;}
.shop-links{display:flex;align-items:center;}
@media(max-width:600px){
  /* 2026-10-07 audit: tap targets were 8-15px tall (meal icons, video/add links, shopping links). Raised to ~36px+ on phones without changing desktop. */
  .tap{display:inline-flex;align-items:center;justify-content:center;min-width:36px;min-height:36px;box-sizing:border-box;padding:0 6px;}
  .tap.tap-text{min-width:0;}
  .tap:not(.tap-text){font-size:16px !important;}
  .ic,.nav-btn{width:38px;height:38px;}
  .bb-link{display:inline-flex;align-items:center;min-height:36px;padding:0 6px;margin-left:0;}
  .si-left{min-height:40px;}
  .app-user{padding:10px 0;}
  .chip{padding:9px 14px;}
}
.shop-note{font-size:12px;color:var(--ink-faint);text-align:center;padding:8px 0;}

/* COOK */
.cook-card{background:var(--white);border:1px solid var(--border);border-radius:14px;padding:20px;margin-bottom:12px;}
.cook-title{font-family:var(--font-display);font-size:17px;font-weight:600;margin-bottom:4px;}
.cook-sub{font-size:13px;color:var(--ink-soft);margin-bottom:16px;line-height:1.5;}
.lang-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:16px;}
.lang-btn{padding:10px 4px;border:1.5px solid var(--border);border-radius:10px;background:var(--white);cursor:pointer;font-size:13px;font-weight:600;text-align:center;transition:all .15s;color:var(--ink-soft);}
.lang-btn.on{background:var(--accent-light);border-color:var(--accent);color:var(--accent);}
.cook-output{background:var(--cream);border:1px solid var(--border);border-radius:10px;padding:14px;font-size:13px;line-height:1.8;white-space:pre-wrap;min-height:100px;margin-bottom:12px;color:var(--ink);}
.copy-btn{width:100%;padding:12px;background:var(--ink);color:#fff;border:none;border-radius:10px;font-size:13px;font-weight:700;cursor:pointer;transition:opacity .15s;}
.copy-btn:hover{opacity:.85;}
.copy-btn.copied{background:var(--green);}

/* LEFTOVERS */
.lf-head{font-size:15px;font-weight:700;margin-bottom:3px;}
.lf-sub{font-size:13px;color:var(--ink-soft);margin-bottom:14px;}
.lf-search-row{display:flex;gap:8px;margin-bottom:14px;}
.lf-search{flex:1;padding:10px 14px;border:1px solid var(--border);border-radius:10px;font-size:14px;font-family:inherit;outline:none;}
.lf-search:focus{border-color:var(--accent);}
.lf-cards{display:grid;gap:10px;}
.lc{background:var(--white);border:1px solid var(--border);border-radius:12px;padding:14px;}
.lc-ing{font-size:10px;font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:.06em;margin-bottom:5px;}
.lc-dish{font-size:14px;font-weight:700;margin-bottom:4px;}
.lc-meth{font-size:13px;color:var(--ink-soft);line-height:1.55;}
.lc-protein{font-size:10px;background:var(--green-bg);color:var(--green);padding:2px 7px;border-radius:8px;font-weight:600;display:inline-block;margin-top:6px;}

.empty{text-align:center;padding:48px 16px;color:var(--ink-faint);}
.empty-icon{font-size:40px;margin-bottom:12px;}

/* TOAST */
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;padding:10px 20px;border-radius:20px;font-size:13px;font-weight:600;z-index:999;opacity:0;transition:opacity .3s;pointer-events:none;}
.toast.show{opacity:1;}