/* Feast Mode in your browser. The visual language is the Nutrition Facts label: black ink on paper, heavy rules,
   compressed numerals (Sofia Sans Extra Condensed 900) and one red that only means "protein" or "do this".
   Tokens are the iOS app's (FeastMode/Design/Theme.swift). Motion: strong ease-out, 160–280 ms, transform/opacity only. */

:root{
  --paper:#fff;--surface:#f4f4f1;--raised:#fff;--ink:#0e0e0d;--ink2:#5f5f5b;--ink3:#9a9a95;--hair:#e2e2de;
  --red:#ee3a1c;--red-deep:#c72a10;--on-red:#fff;--switch-on:#121212;--scrim:rgba(0,0,0,.42);
  --disp:"Sofia Sans Extra Condensed",system-ui,sans-serif;--text:"Sofia Sans",system-ui,-apple-system,sans-serif;
  --ease:cubic-bezier(.23,1,.32,1);
  --spring:cubic-bezier(.34,1.45,.64,1);
  --sat:env(safe-area-inset-top,0px);--sab:env(safe-area-inset-bottom,0px);--sal:env(safe-area-inset-left,0px);--sar:env(safe-area-inset-right,0px);
  --tab-h:49px;--dock-h:0px;--gutter:16px;--col:600px;
  color-scheme:light;
}
@supports (transition-timing-function:linear(0,1)){
  :root{--spring:linear(0, 0.066, 0.218, 0.402, 0.581, 0.736, 0.858, 0.946, 1.004, 1.037, 1.052, 1.054, 1.049, 1.04, 1.03, 1.02, 1.012, 1.006, 1.002, 0.999, 0.998, 0.997, 0.997, 0.997, 1)}
}
@media (prefers-color-scheme:dark){
  :root{--paper:#0b0b0b;--surface:#171716;--raised:#1c1c1b;--ink:#f3f3f0;--ink2:#a5a5a0;--ink3:#6c6c68;--hair:#2b2b29;
    --red:#ff4b2b;--red-deep:#e8401f;--switch-on:#ff4b2b;--scrim:rgba(0,0,0,.6);color-scheme:dark}
}
@media (min-width:380px){:root{--gutter:20px}}
body.has-dock{--dock-h:56px}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--paper)}
html.fm-locked,html.fm-locked body{overflow:hidden}
body{margin:0;overflow-x:clip;min-height:100vh;min-height:100svh;background:var(--paper);color:var(--ink);font:400 16px/1.45 var(--text);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:transparent;overscroll-behavior-y:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
a{color:inherit;-webkit-tap-highlight-color:transparent}
img{display:block;max-width:100%}
p{margin:0}
h1,h2,h3{margin:0;font-weight:inherit}
ol,ul{margin:0;padding:0;list-style:none}
[hidden]{display:none!important}
:focus{outline:none}
:focus-visible{outline:2.5px solid var(--red);outline-offset:2px;border-radius:8px}
[tabindex="-1"]:focus-visible{outline:none}
/* text fields show focus with their own border or their container's ring, not a second outline */
input:not([type=checkbox]):not([type=range]):focus-visible,textarea:focus-visible{outline:none}
.sel:focus-visible,.sort:focus-visible{outline:none;box-shadow:inset 0 0 0 1.5px var(--ink)}
.range:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px var(--red)}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.center{text-align:center;justify-content:center}
.red:not(.btn):not(.fmpro-btn):not(.stat){color:var(--red)}
.ink2{color:var(--ink2)}
.sp{flex:1}
.muted{color:var(--ink2);font-size:15px;line-height:1.45}
.muted.sm,.sm{font-size:13.5px}
.fine{font-size:12.5px;line-height:1.45;color:var(--ink3);text-decoration:none}
.lede{font-size:16px;color:var(--ink2);margin-top:8px}
.b{font-weight:600}

/* -- type */
.display{font:900 clamp(50px,15.5vw,60px)/.9 var(--disp);letter-spacing:-.5px;margin-top:2px;overflow-wrap:anywhere}
.h-head{font:800 30px/.98 var(--disp);letter-spacing:-.2px}
.h-sub{font:800 22px/1.02 var(--disp)}
.h-sec{font:900 30px/1 var(--disp)}
.eyebrow{font:800 12.5px/1.2 var(--disp);letter-spacing:1.4px;text-transform:uppercase;color:var(--ink2)}
.eyebrow.red{color:var(--red)}
.eyebrow.ink{color:var(--ink)}
.eyebrow.with-ic{display:flex;align-items:center;gap:6px}
.mega{font:900 120px/.8 var(--disp);letter-spacing:-2px;margin:6px 0 4px}
.wordmark{font:900 30px/1 var(--disp);letter-spacing:.5px}.wordmark span{color:var(--red);margin-left:3px}

/* -- rules, bars */
.rule{background:var(--ink);flex:none}
.rule.heavy{height:8px}
.rule.mid{height:3px}
.rule.hair{height:1px;background:var(--hair)}
.pbar{position:relative;height:8px;border-radius:99px;background:var(--hair);overflow:hidden;flex:1}
.pbar i{position:absolute;inset:0;background:var(--red);border-radius:99px;transform-origin:left center;transition:transform .45s var(--ease)}

/* -- buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:0 22px;border:0;border-radius:999px;
  font:700 16.5px/1.1 var(--text);text-decoration:none;white-space:nowrap;transition:transform .16s var(--ease),opacity .16s var(--ease),background-color .2s var(--ease)}
.btn:active:not(:disabled){transform:scale(.97)}
.btn:disabled{opacity:.38;cursor:default}
.btn.ink{background:var(--ink);color:var(--paper)}
.btn.red{background:var(--red);color:var(--on-red)}
.btn.quiet{background:var(--surface);color:var(--ink)}
.btn.outline{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.btn.sm{min-height:44px;padding:0 16px;font-size:14.5px}
.btn.full{display:flex;width:100%}
.btn svg{flex:none}
.btn.one-line{min-width:0;max-width:100%}
.btn.one-line span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.tlink{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 6px;border:0;background:none;color:var(--ink);font:700 15px/1.2 var(--text);text-decoration:none;transition:opacity .16s var(--ease)}
.tlink:active{opacity:.55}
.tlink.center{display:flex;width:100%;justify-content:center}
.tlink.sm{font-size:14px;color:var(--ink2)}
.tlink.light{color:rgba(255,255,255,.66)}
.tlink.inline{display:inline;min-height:0;padding:0;text-decoration:underline;text-underline-offset:2px}
.tclose{min-height:44px;padding:0 10px;border:0;background:none;color:var(--red);font:600 17px var(--text)}
.ibtn{display:inline-grid;place-items:center;flex:none;width:44px;height:44px;border:0;border-radius:50%;background:var(--surface);color:var(--ink);
  transition:transform .16s var(--ease),opacity .16s}
.ibtn:active{transform:scale(.92)}
.ibtn.ghost{background:transparent;color:var(--ink2)}
.ibtn.sm{width:44px;height:44px;background:transparent}
.ibtn.on-photo{background:rgba(0,0,0,.42);color:#fff}
.ibtn.on-photo.filled{color:#fff}
.round{display:grid;place-items:center;width:46px;height:46px;border:0;border-radius:50%;background:var(--surface);color:var(--ink);transition:transform .16s var(--ease)}
.round:active{transform:scale(.92)}
.protag{display:inline-block;margin-left:8px;padding:3px 7px 2px;border-radius:99px;background:var(--red);color:#fff;font:800 10.5px/1.2 var(--disp);letter-spacing:.9px;text-transform:uppercase;vertical-align:middle}
.pill-red{display:inline-flex;align-items:center;height:24px;padding:0 9px;border-radius:99px;background:var(--red);color:#fff;font:800 11.5px/1 var(--disp);letter-spacing:1px;text-transform:uppercase}
.pill-red.sm{height:20px;padding:0 8px;font-size:10.5px}
.locktag{position:absolute;top:8px;right:8px;display:inline-flex;align-items:center;gap:4px;height:20px;padding:0 7px;border-radius:99px;background:rgba(0,0,0,.6);color:#fff;font:800 10.5px/1 var(--disp);letter-spacing:.8px}

/* -- shell */
#app{min-height:100vh;min-height:100svh}
#view{display:block;max-width:var(--col);margin:0 auto}
#view:focus{outline:none}
.scr{padding:calc(var(--sat) + 10px) calc(var(--gutter) + var(--sar)) calc(var(--tab-h) + var(--sab) + var(--dock-h) + 36px) calc(var(--gutter) + var(--sal))}
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:20;background:var(--paper);border-top:1px solid var(--hair);padding-bottom:var(--sab)}
.tabbar-in{display:flex;max-width:var(--col);margin:0 auto;height:var(--tab-h);padding:0 calc(4px + var(--sar)) 0 calc(4px + var(--sal))}
.tab{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;min-width:44px;color:var(--ink3);text-decoration:none;transition:color .16s var(--ease)}
.tab.on{color:var(--ink)}
.tab-ic{position:relative;display:grid;place-items:center;transition:transform .16s var(--ease)}
.tab:active .tab-ic{transform:scale(.9)}
.tab.on .ic-flame{fill:currentColor}
.tab-l{font:600 10.5px/1.1 var(--text);letter-spacing:.1px}
.tab-badge{position:absolute;top:-5px;left:15px;min-width:18px;height:18px;padding:0 5px;border-radius:99px;background:var(--red);color:#fff;font:700 11px/18px var(--text);text-align:center;font-variant-numeric:tabular-nums}
body.is-overlay .tabbar,body.is-overlay .dock{display:none}
.dock{position:fixed;left:0;right:0;bottom:calc(var(--tab-h) + var(--sab));z-index:19;height:var(--dock-h);background:var(--paper);border-top:1px solid var(--hair)}
.dock:not([hidden]){display:flex;gap:8px;align-items:center;max-width:var(--col);margin:0 auto;padding:0 var(--gutter);overflow-x:auto;scrollbar-width:none}
.dock::-webkit-scrollbar{display:none}
.dpill{flex:none;display:flex;align-items:center;height:44px;border-radius:99px;background:var(--ink);color:var(--paper)}
.dpill.done{background:var(--red);color:#fff;animation:pulse 1s var(--ease) infinite alternate}
.dpill-main{display:flex;align-items:center;gap:7px;min-height:44px;padding:0 4px 0 14px;border:0;background:none;color:inherit}
.dpill-main b{font:700 15px var(--text);font-variant-numeric:tabular-nums}
.dpill-main span{font:600 13px var(--text);opacity:.75}
.dpill-x{display:grid;place-items:center;width:44px;height:44px;border:0;background:none;color:inherit;opacity:.7}
@keyframes pulse{from{opacity:1}to{opacity:.72}}
#splash{position:fixed;inset:0;z-index:300;display:grid;place-items:center;background:var(--paper);transition:opacity .25s var(--ease)}
#splash.out{opacity:0;pointer-events:none}
#splash b{font:900 56px/.85 var(--disp);letter-spacing:-.5px;text-align:center}
#splash b span{display:block;color:var(--red)}
.offline-boot{min-height:100svh;display:grid;place-content:center;justify-items:center;gap:14px;padding:24px;text-align:center;max-width:460px;margin:0 auto}

/* -- headers */
.top-head{padding-top:6px}
.top-head.pad{padding-bottom:6px}
.top-head .rule.heavy{margin-top:14px}
.top-row{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px}
.top-acts{display:flex;align-items:center;gap:8px}
.subbar{display:flex;align-items:center;justify-content:space-between;min-height:44px;margin:0 -6px}
.subbar .ibtn{background:transparent}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.sec-title{font:800 25px/1 var(--disp)}
.sec-sub{margin-top:3px;font-size:14px;color:var(--ink2)}
.see-all{display:inline-flex;align-items:center;gap:3px;min-height:44px;padding-left:8px;font:600 14px var(--text);color:var(--ink);text-decoration:none;white-space:nowrap}

/* -- streak + popover */
.pop-wrap{position:relative}
.streak{display:inline-flex;align-items:center;gap:4px;height:44px;padding:0 13px;border:0;border-radius:99px;background:var(--surface);color:var(--ink3);transition:transform .16s var(--ease)}
.streak:active{transform:scale(.96)}
.streak.hot{color:var(--red)}
.streak b{font:900 21px/1 var(--disp);color:var(--ink)}
.pop{position:absolute;right:0;top:52px;z-index:30;width:min(290px,calc(100vw - 32px));padding:18px;border-radius:16px;background:var(--raised);border:1px solid var(--hair);
  box-shadow:0 14px 36px rgba(0,0,0,.18);transform-origin:top right;animation:popin .2s var(--ease)}
.pop-t{display:block;font:800 22px/1 var(--disp)}
.pop p{margin:8px 0;font-size:14px;color:var(--ink2)}
.pop small{font:800 12px var(--disp);letter-spacing:.8px;text-transform:uppercase;color:var(--red)}
@keyframes popin{from{opacity:0;transform:scale(.96)}}

/* -- cards */
.card-s{display:block;margin-top:14px;padding:18px;border-radius:20px;background:var(--surface)}
.card{display:block;min-width:0;color:var(--ink);text-decoration:none}
.card-ph{position:relative;aspect-ratio:4/5;border-radius:14px;overflow:hidden;background:var(--surface);transition:transform .16s var(--ease)}
.card:active .card-ph{transform:scale(.97)}
.ph{width:100%;height:100%;object-fit:cover;background:var(--surface)}
.ph-none{display:grid;place-items:center;color:color-mix(in srgb,var(--ink3) 55%,transparent)}
.ph-none .fork{width:16%;min-width:10px;max-width:30px;height:auto}
.card-ph .ptag{position:absolute;left:0;bottom:0;border-top-right-radius:8px}
.card-t{margin-top:9px;font:700 15px/1.25 var(--text);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.5em}
.facts{margin-top:4px;font:800 12px/1.2 var(--disp);letter-spacing:.6px;text-transform:uppercase;color:var(--ink2)}
.card.tile{flex:none;width:168px;scroll-snap-align:start}
.ptag{display:inline-flex;align-items:flex-end;gap:3px;padding:2px 7px 3px;background:#fff;color:#0e0e0d}
.ptag b{font:900 22px/.92 var(--disp);color:#ee3a1c}
.ptag i{font:800 9px/1 var(--disp);font-style:normal;letter-spacing:.3px;padding-bottom:1px}
.ptag.big{padding:3px 9px 4px;border-radius:6px}
.ptag.big b{font-size:28px}
.ptag.big i{font-size:10px}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 14px}
@media (min-width:600px){.grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.rail{margin-top:38px}
.rail-scroll{display:flex;gap:14px;margin:14px calc(-1 * var(--gutter)) 0;padding:0 var(--gutter) 4px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 var(--gutter);scrollbar-width:none;overscroll-behavior-x:contain}
.rail-scroll::-webkit-scrollbar{display:none}
.rrow{display:flex;align-items:center;gap:4px}
.rrow-main{flex:1;min-width:0;display:flex;align-items:center;gap:14px;min-height:72px;padding:0;border:0;background:none;color:var(--ink);text-align:left;text-decoration:none;transition:transform .16s var(--ease)}
.rrow-main:active{transform:scale(.98)}
.rrow-ph{position:relative;flex:none;width:72px;height:72px;border-radius:10px;overflow:hidden;background:var(--surface)}
.rrow-ph .locktag{top:4px;right:4px;height:17px;padding:0 5px;font-size:9px}
.rrow-tx{min-width:0;display:grid;gap:4px}
.rrow-t{font:700 16px/1.25 var(--text);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rrow-m{font:800 13.5px/1.2 var(--disp);letter-spacing:.3px;color:var(--ink2)}
.rrow-m b{color:var(--red);font-weight:800}
.rows{display:grid;gap:14px}

/* -- Feast Facts (the label) */
.ff{margin-top:24px;padding:16px;background:var(--raised);border:1.5px solid var(--ink)}
.ff-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.ff-head b{font:900 34px/1 var(--disp)}
.ff-head span{font:600 14px var(--text);color:var(--ink2)}
.ff .rule.heavy{margin:4px 0 0}
.ff-prot{display:flex;align-items:flex-end;justify-content:space-between;padding:6px 0}
.ff-prot small{display:block;font:800 12px/1.2 var(--disp);letter-spacing:1.4px;text-transform:uppercase}
.ff-prot b{font:900 30px/1 var(--disp)}
.ff-big{font:900 64px/.82 var(--disp);color:var(--red);font-variant-numeric:tabular-nums}
.ff-big i{font-style:normal;font-size:30px;margin-left:2px}
.ff-row{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:6px 0;border-bottom:1px solid var(--hair);font:600 15px/1.25 var(--text);font-variant-numeric:tabular-nums}
.ff-row.ind{padding-left:14px;font-weight:400}
.ff-row.cal{padding:4px 0;border-bottom:3px solid var(--ink);font:900 20px/1.1 var(--disp)}
.ff-row.cal span:last-child{font-size:26px}
.ff-row.last{border-bottom:0}
.ff-target{display:flex;align-items:center;gap:10px;margin-top:10px}
.ff-target span{flex:none;font:600 13px var(--text)}
.ff-foot{margin-top:6px;font-size:11.5px;color:var(--ink3)}
.ff-title{font:900 34px/1 var(--disp)}

/* -- Feast Mode switch */
.ftog{--s:1;position:relative;flex:none;width:calc(76px * var(--s));height:calc(44px * var(--s));padding:0;border:0;border-radius:99px;background:none;touch-action:pan-y;-webkit-user-select:none;user-select:none}
.ftog:focus-visible{outline-offset:3px;border-radius:99px}
.ft-track{position:absolute;inset:calc(1px * var(--s)) 0;border-radius:99px;background:var(--hair);overflow:hidden}
.ft-track::after{content:"";position:absolute;inset:0;background:var(--switch-on);opacity:var(--p,0);transition:opacity .22s var(--ease)}
.ftog.on .ft-track::after{opacity:1}
.ftog.dragging .ft-track::after{opacity:var(--p,0);transition:none}
.ft-knob{position:absolute;top:calc(5px * var(--s));left:calc(4px * var(--s));display:grid;place-items:center;width:calc(34px * var(--s));height:calc(34px * var(--s));border-radius:50%;
  background:#fff;box-shadow:0 2px 4px rgba(0,0,0,.24);transform:translateX(0);transition:transform .52s var(--spring),scale .16s var(--ease)}
.ftog.on .ft-knob{transform:translateX(calc(34px * var(--s)))}
.ftog.dragging .ft-knob{transform:translateX(var(--drag,0px));transition:scale .16s var(--ease)}
.ftog.press .ft-knob{scale:1.06}
.ft-knob .fork{width:calc(10px * var(--s));height:calc(21px * var(--s));color:#ee3a1c;opacity:.28;transform:scale(.75);transition:opacity .22s var(--ease),transform .3s var(--spring)}
.ftog.on .fork{opacity:1;transform:none}
.ftog:disabled{cursor:default}

/* before → after */
.sd{display:grid;gap:12px}
.sd.compact{gap:8px}
.sd-cols{display:flex;align-items:center;gap:10px}
.sd-cols>svg{flex:none;color:var(--red)}
.sd-col{flex:1;min-width:0;display:grid;color:var(--ink3);transition:color .2s var(--ease)}
.sd-col small{font:800 10.5px/1.2 var(--disp);letter-spacing:1.2px;text-transform:uppercase}
.sd-col b{font:900 48px/.92 var(--disp);font-variant-numeric:tabular-nums}
.sd-col b i{font-style:normal;font-size:24px;margin-left:1px}
.sd-col span{font:600 12.5px var(--text);font-variant-numeric:tabular-nums;color:var(--ink3)}
.sd.compact .sd-col b{font-size:34px}
.sd.compact .sd-col b i{font-size:18px}
.sd:not(.on) .sd-col.a{color:var(--ink)}
.sd:not(.on) .sd-col.a span{color:var(--ink2)}
.sd.on .sd-col.b{color:var(--red)}
.sd.on .sd-col.b span{color:var(--ink2)}
.sd-foot{display:flex;align-items:center;justify-content:space-between;gap:10px}
.sd-foot small{font:800 10.5px var(--disp);letter-spacing:1.1px;text-transform:uppercase;color:var(--ink3);white-space:nowrap}
.sd-badge{display:inline-flex;align-items:center;height:28px;padding:0 10px;border-radius:99px;box-shadow:inset 0 0 0 1.5px var(--red);color:var(--red);
  font:800 12.5px/1 var(--disp);letter-spacing:.6px;text-transform:uppercase;white-space:nowrap;transition:background-color .2s var(--ease),color .2s var(--ease)}
.sd.compact .sd-badge{height:24px;font-size:11.5px}
.sd.on .sd-badge{background:var(--red);color:#fff}

/* Today: the Feast switch card */
.fs-card .h-head{margin-top:8px}
.fs-card>.muted{margin-top:8px}
.fs-demo{margin-top:14px;padding:14px;border-radius:14px;background:var(--raised);box-shadow:inset 0 0 0 1px var(--hair);display:grid;gap:12px;transition:box-shadow .2s var(--ease)}
.fs-demo.on{box-shadow:inset 0 0 0 2px var(--red)}
.fs-demo-h{display:flex;align-items:center;justify-content:space-between;gap:10px}
.fs-demo-h .eyebrow{font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fs-acts{display:flex;align-items:center;gap:12px;margin-top:16px}
.fs-acts .btn{flex:1;min-height:48px}

/* Today: tonight */
.hero-card{position:relative;display:block;margin-top:14px;aspect-ratio:.86;border-radius:22px;overflow:hidden;color:#fff;text-decoration:none;background:#111;transition:transform .16s var(--ease)}
.hero-card:active{transform:scale(.98)}
.hero-card .ph{position:absolute;inset:0}
.hero-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 38%,rgba(0,0,0,.82))}
.hero-tx{position:absolute;left:0;right:0;bottom:0;display:grid;gap:10px;padding:20px}
.hero-tags{display:flex;align-items:center;gap:8px}
.hero-tags .locktag{position:static}
.hero-t{font:800 clamp(26px,8vw,31px)/1.04 var(--text);letter-spacing:-.6px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.hero-hook{font:500 15px/1.35 var(--text);color:rgba(255,255,255,.86);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hero-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin-top:4px}
.hero-facts{display:inline-flex;align-items:center;gap:6px;font:800 12.5px/1 var(--disp);letter-spacing:.5px;text-transform:uppercase}

/* Today: protein today, week */
.ptoday{display:block;margin-top:26px;color:var(--ink);text-decoration:none}
.ptoday-row{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin:8px 0}
.ptoday-n{flex:none;white-space:nowrap}
.ptoday-n b{font:900 40px/.9 var(--disp);font-variant-numeric:tabular-nums}
.ptoday-n span{font:900 22px var(--disp);color:var(--ink2)}
.week{display:flex;gap:10px;margin:22px calc(-1 * var(--gutter)) 0;padding:6px var(--gutter);overflow-x:auto;scrollbar-width:none}
.week::-webkit-scrollbar{display:none}
.wday{position:relative;flex:1 0 auto;display:flex;flex-direction:column;align-items:center;gap:6px;min-width:44px;padding:0;border:0;background:none;color:var(--ink);transition:transform .16s var(--ease)}
.wday:active{transform:scale(.96)}
.wday-w{font:800 11px/1 var(--disp);letter-spacing:.8px;text-transform:uppercase;color:var(--ink2)}
.wday.today .wday-w{color:var(--red)}
.wday-ph{position:relative;display:grid;place-items:center;width:clamp(40px,11.4vw,58px);aspect-ratio:1;border-radius:12px;background:var(--surface);color:var(--ink3);overflow:hidden}
.wday.today .wday-ph::after{content:"";position:absolute;inset:0;border-radius:12px;box-shadow:inset 0 0 0 2px var(--red)}
.wday-d{font:700 13px var(--text);font-variant-numeric:tabular-nums}
.wday-ck{position:absolute;top:12px;right:-6px;color:var(--red);background:var(--paper);border-radius:50%;line-height:0}
.planweek-wrap{margin-top:22px;display:grid;justify-items:center;gap:2px}
.planweek{display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;padding:18px;border:0;border-radius:18px;background:var(--ink);color:var(--paper);text-align:left;transition:transform .16s var(--ease)}
.planweek:active{transform:scale(.98)}
.planweek-tx{display:grid;gap:4px}
.planweek-t{font:800 24px/1 var(--disp)}
.planweek-s{font-size:14px;opacity:.75}
.planweek-ic{display:grid;place-items:center;flex:none;width:48px;height:48px;border-radius:50%;background:color-mix(in srgb,var(--paper) 10%,transparent);color:var(--red)}
.foot{display:grid;justify-items:center;gap:6px;margin-top:44px;text-align:center}
.foot .rule{width:36px}
.foot p{font-size:12px;color:var(--ink3)}
.foot a{display:inline-flex;align-items:center;min-height:44px;padding:0 6px;font:600 12.5px var(--text);color:var(--ink2);text-decoration:none}

/* A2HS */
.a2hs{position:relative}
.a2hs-h{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;margin:-6px -8px 8px 0}
.a2hs-h .h-sub{padding-top:6px}
.a2hs-steps{display:grid;gap:8px;margin:4px 0 0}
.a2hs-steps li{display:flex;align-items:center;gap:10px;font-size:15px}
.a2hs-n{display:grid;place-items:center;flex:none;width:24px;height:24px;border-radius:50%;background:var(--ink);color:var(--paper);font:900 14px/1 var(--disp)}
.a2hs-ic{display:inline-flex;vertical-align:-3px;color:var(--ink2)}
.a2hs-note{margin-top:10px;font-size:13px;color:var(--ink2)}
.a2hs-sheet{display:grid;gap:14px}
.a2hs-sheet .btn{margin-top:12px}

/* challenge strip + card */
.cstrip{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.cday{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0}
.csq{position:relative;display:grid;place-items:center;width:100%;aspect-ratio:1;border-radius:10px;overflow:hidden;background:var(--raised);color:var(--ink3)}
.csq .ph{position:absolute;inset:0}
.csq-n{font:900 20px/1 var(--disp)}
.csq.today{color:var(--red);box-shadow:inset 0 0 0 2px var(--red)}
.csq.upcoming{background:var(--raised);outline:1.2px dashed var(--hair);outline-offset:-1.2px}
.csq.missed{background:var(--hair)}
.csq.off{background:color-mix(in srgb,var(--hair) 55%,transparent);color:color-mix(in srgb,var(--ink3) 70%,transparent)}
.csq.done{background:var(--surface);color:var(--ink)}
.csq-check{position:absolute;right:2px;bottom:2px;color:var(--red);line-height:0;background:#fff;border-radius:50%}
.cday-w{font:800 10px/1 var(--disp);letter-spacing:.6px;text-transform:uppercase;color:var(--ink2);white-space:nowrap}
.cday.today .cday-w{color:var(--red)}
.cday.off .cday-w{color:var(--ink3)}
.cday-p{font:700 11px/1 var(--text);color:var(--red);font-variant-numeric:tabular-nums;white-space:nowrap}
.cc-open{display:grid;gap:14px;cursor:pointer;border-radius:12px}
.cc-head{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0}
.cc-head .eyebrow{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cc-day{flex:none;font:800 12.5px/1 var(--disp);letter-spacing:.6px;text-transform:uppercase}
.cc-line{font:600 15px/1.35 var(--text)}
.cc-acts{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-top:16px}
.cc-acts>.btn{flex:1;min-height:46px}
.cc-row{display:flex;justify-content:space-between;width:100%}
.cc-done{margin-top:22px;font:800 22px/1.1 var(--disp);text-align:center}

/* -- library */
.search-wrap{margin-top:12px}
.search{display:flex;align-items:center;gap:8px;height:48px;padding:0 4px 0 14px;border-radius:14px;background:var(--surface);color:var(--ink3)}
.search:focus-within{box-shadow:inset 0 0 0 1.5px var(--ink)}
.search-in{flex:1;min-width:0;height:100%;border:0;background:transparent;color:var(--ink);font:500 16px var(--text);-webkit-appearance:none;appearance:none}
.search-in::placeholder,.field::placeholder,.add-in::placeholder{color:var(--ink3);opacity:1}
.search-in::-webkit-search-cancel-button{display:none}
.search-x{display:grid;place-items:center;width:44px;height:44px;border:0;background:none;color:var(--ink3)}
.sugg{display:grid;gap:8px;padding:12px 0 2px}
.sugg-row{display:flex;flex-wrap:wrap;gap:8px}
.sugg-b{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;border:0;border-radius:99px;background:var(--surface);color:var(--ink);font:600 14px var(--text)}
.cats{display:flex;gap:22px;margin:12px calc(-1 * var(--gutter)) 0;padding:0 var(--gutter);overflow-x:auto;scrollbar-width:none}
.cats::-webkit-scrollbar{display:none}
.cat{position:relative;flex:none;display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0;border:0;background:none;color:var(--ink3);font:800 21px/1 var(--disp);white-space:nowrap;transition:color .16s var(--ease)}
.cat.on{color:var(--ink);font-weight:900}
.cat-l{position:relative;display:block;padding:12px 0}
.cat-l::after{content:"";position:absolute;left:0;right:0;bottom:4px;height:3px;background:var(--red);transform:scaleX(0);transition:transform .22s var(--ease)}
.cat.on .cat-l::after{transform:none}
.chips-row{display:flex;gap:8px;margin:10px calc(-1 * var(--gutter)) 0;padding:0 var(--gutter) 2px;overflow-x:auto;scrollbar-width:none}
.chips-row::-webkit-scrollbar{display:none}
.chip{flex:none;display:inline-flex;align-items:center;gap:6px;height:44px;padding:0 14px;border:0;border-radius:99px;background:var(--surface);color:var(--ink);
  font:600 14px var(--text);white-space:nowrap;transition:background-color .18s var(--ease),color .18s var(--ease),transform .16s var(--ease)}
.chip:active{transform:scale(.96)}
.chip.on{background:var(--ink);color:var(--paper)}
.chip-wrap{display:flex;flex-wrap:wrap;gap:10px}
.lib-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:14px 0 12px}
.count{font:600 14px var(--text);color:var(--ink2)}
.sort-wrap{position:relative;display:inline-flex;align-items:center;color:var(--ink)}
.sort{min-height:44px;padding:0 20px 0 6px;border:0;background:transparent;color:var(--ink);font:600 14px var(--text);text-align:right;-webkit-appearance:none;appearance:none;direction:rtl}
.sort option{direction:ltr}
.sort-wrap svg{position:absolute;right:0;pointer-events:none}

/* -- recipe */
.scr.recipe{padding-top:0}
.scr.recipe.has-bar{padding-bottom:calc(var(--tab-h) + var(--sab) + var(--dock-h) + 110px)}
.r-hero{position:relative;height:min(122vw,470px,64svh);margin:0 calc(-1 * var(--gutter));background:var(--surface);overflow:hidden}
@media (min-width:700px){.r-hero{margin:0;border-radius:0 0 22px 22px}}
.rtop{position:fixed;z-index:22;top:calc(var(--sat) + 8px);left:max(12px,calc(50% - var(--col) / 2 + var(--gutter) + 8px));right:max(12px,calc(50% - var(--col) / 2 + var(--gutter) + 8px));display:flex;justify-content:space-between;pointer-events:none}
.rtop>*,.rtop-r>*{pointer-events:auto}
.rtop{align-items:center;gap:10px;transition:background-color .2s var(--ease),box-shadow .2s var(--ease)}
.rtop-t{flex:1;min-width:0;font:700 15.5px/1.2 var(--text);text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;opacity:0;transition:opacity .2s var(--ease)}
.rtop.solid{top:0;left:0;right:0;padding:calc(var(--sat) + 6px) max(10px,calc(50% - var(--col) / 2 + 10px)) 6px;background:var(--paper);box-shadow:0 1px 0 var(--hair);pointer-events:auto}
.rtop.solid .rtop-t{opacity:1}
.rtop.solid .ibtn.on-photo{background:transparent;color:var(--ink)}
.r-hero.none{height:calc(var(--sat) + 56px);background:var(--paper)}
.nohero .r-body{padding-top:8px}
.rtop-r{display:flex;gap:8px}
.r-body{padding-top:22px}
.r-title{display:grid;gap:10px}
.r-h1{font:800 clamp(28px,8.6vw,33px)/1.06 var(--text);letter-spacing:-.9px;overflow-wrap:anywhere}
.r-hook{font:500 17px/1.4 var(--text);color:var(--ink2)}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:20px;padding:12px 0;border-top:3px solid var(--ink);border-bottom:1px solid var(--hair)}
.stats.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.scr.plan .stats{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:18px;border-top-width:8px}
.stat{display:grid;justify-items:center;gap:2px;min-width:0;padding:0 4px;text-align:center}
.stat+.stat{border-left:1px solid var(--hair)}
.stat small{font:800 10.5px/1.2 var(--disp);letter-spacing:1.2px;text-transform:uppercase;color:var(--ink2);white-space:nowrap}
.stat b{font:900 28px/1 var(--disp);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.stat b i{font-style:normal;font-size:16px;color:var(--ink2);margin-left:1px}
.stat.red b,.stat.red b i{color:var(--red)}
.r-desc{margin-top:20px;font:400 16.5px/1.6 var(--text);color:color-mix(in srgb,var(--ink) 88%,transparent)}
.fs-recipe{margin-top:24px;display:grid;gap:14px;box-shadow:inset 0 0 0 2px transparent;transition:box-shadow .2s var(--ease)}
.fs-recipe.on,.fs-imp.on{box-shadow:inset 0 0 0 2px var(--red)}
.fs-row{display:flex;align-items:center;justify-content:space-between;gap:14px}
.fs-row .muted{margin-top:3px}
.ingredients{margin-top:36px}
.ing-head{display:grid;gap:6px}
.ing-h-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.ing-head .rule.heavy{margin-top:8px}
.serv-l{font:600 14px var(--text);color:var(--ink2)}
.ing-group{margin:18px 0 4px;font:800 12.5px/1.2 var(--disp);letter-spacing:1.4px;text-transform:uppercase;color:var(--red)}
.ing{display:flex;align-items:flex-start;gap:12px;width:100%;padding:11px 0;border:0;border-bottom:1px solid var(--hair);background:none;color:var(--ink);text-align:left;font:400 16.5px/1.4 var(--text)}
.ing>svg{flex:none;margin-top:1px;color:var(--ink3);transition:color .16s}
.ing.done>svg{color:var(--red)}
.ing-tx b{font-weight:700}
.ing-tx .ink2{font-size:15px}
.ing.done .ing-tx{opacity:.45;text-decoration:line-through;text-decoration-color:var(--ink3)}
.ing.static{cursor:default}
.r-acts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:20px}
.r-acts .btn{flex-direction:column;gap:4px;min-height:66px;padding:8px 6px;border-radius:16px;font-size:13.5px;white-space:normal;text-align:center}
.method{margin-top:40px}
.method .rule.heavy{margin-top:12px}
.step{display:grid;grid-template-columns:44px minmax(0,1fr);gap:4px;padding:16px 0;border-bottom:1px solid var(--hair)}
.step-n{font:900 34px/.9 var(--disp);color:var(--red);font-variant-numeric:tabular-nums}
.step p{font:400 17px/1.55 var(--text)}
.tchips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.tchip{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 13px;border:0;border-radius:99px;background:color-mix(in srgb,var(--red) 11%,transparent);color:var(--red);font:700 14px var(--text);transition:transform .16s var(--ease)}
.tchip:active{transform:scale(.95)}
.step.teaser{border-bottom:0;padding-bottom:4px}
.skel{display:grid;gap:4px;filter:blur(3px);opacity:.75;-webkit-user-select:none;user-select:none}
.skel-step{display:grid;grid-template-columns:44px 1fr;gap:4px;padding:12px 0}
.skel-step div{display:grid;gap:8px;padding-top:6px}
.skel-step i{display:block;height:11px;border-radius:6px;background:var(--hair)}
.skel-step i.short{width:58%}
.lockcard{position:relative;margin-top:-70px;display:grid;justify-items:center;gap:10px;padding:22px;text-align:center;background:var(--paper);border:1.5px solid var(--ink)}
.lockcard>svg{color:var(--red)}
.lockcard h3{font:800 25px/1 var(--disp)}
.lockcard p{color:var(--ink2);font-size:15px;max-width:30ch}
.lockcard .btn{margin-top:4px;width:100%;max-width:280px}
.pending{padding:18px 0;color:var(--ink2)}
.tips{margin-top:30px;padding:20px;background:var(--ink);color:var(--paper)}
.tips .eyebrow{color:var(--paper)}
.tips ul{display:grid;gap:12px;margin-top:12px}
.tips li{position:relative;padding-left:18px;font-size:15.5px;line-height:1.5}
.tips li::before{content:"";position:absolute;left:0;top:.55em;width:8px;height:8px;background:var(--red)}
.keep{display:flex;gap:12px;margin-top:22px}
.keep>svg{flex:none;margin-top:1px}
.keep .eyebrow{margin-bottom:4px}
.attrib{display:grid;gap:10px;margin-top:30px}
.attrib .ext{display:inline-flex;align-items:center;gap:6px;min-height:44px;font:600 14px var(--text);text-decoration:none;overflow-wrap:anywhere}
.attrib a.fine{display:inline-flex;align-items:center;min-height:44px}
.cookbar{position:fixed;z-index:18;left:0;right:0;bottom:calc(var(--tab-h) + var(--sab) + var(--dock-h));padding:10px var(--gutter);background:var(--paper);border-top:1px solid var(--hair)}
.cookbar .btn{max-width:calc(var(--col) - 2 * var(--gutter));margin:0 auto}
.plan-sheet{display:grid;gap:16px}
.dpicks{display:flex;gap:8px;margin:0 -20px;padding:0 20px;overflow-x:auto;scrollbar-width:none}
.dpicks::-webkit-scrollbar{display:none}
.dpick{flex:none;display:grid;justify-items:center;align-content:center;gap:2px;width:62px;height:66px;border:0;border-radius:14px;background:var(--surface);color:var(--ink);transition:background-color .16s,color .16s,transform .16s var(--ease)}
.dpick:active{transform:scale(.95)}
.dpick small{font:800 12px/1 var(--disp);letter-spacing:.5px;text-transform:uppercase}
.dpick b{font:900 26px/1 var(--disp)}
.dpick.on{background:var(--ink);color:var(--paper)}
.row-between{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px}

/* steppers, segmented, selects, fields */
.stp{display:inline-flex;align-items:center;flex:none;border-radius:12px;background:var(--surface);overflow:hidden}
.stp-b{display:grid;place-items:center;width:44px;height:44px;border:0;background:none;color:var(--ink);transition:opacity .16s}
.stp-b:active:not(:disabled){opacity:.5}
.stp-b:disabled{opacity:.28;cursor:default}
.stp-v{min-width:46px;padding:0 2px;text-align:center;font:900 22px/1 var(--disp);font-variant-numeric:tabular-nums}
.stp.red-v .stp-v{color:var(--red)}
.sgroup .stp,.rv-meta .stp{background:var(--paper)}
.rv-meta .stp-v{min-width:92px;font:700 15px var(--text)}
.seg{--n:2;--i:0;position:relative;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);padding:0;border-radius:12px;background:var(--surface);flex:none}
.seg::before{content:"";position:absolute;top:3px;bottom:3px;left:3px;width:calc((100% - 6px) / var(--n));border-radius:9px;background:var(--raised);
  box-shadow:0 1px 3px rgba(0,0,0,.12),0 0 0 .5px rgba(0,0,0,.04);transform:translateX(calc(var(--i) * 100%));transition:transform .26s var(--ease)}
.seg-b{position:relative;z-index:1;min-height:44px;padding:0 10px;border:0;border-radius:9px;background:none;color:var(--ink2);font:600 14.5px var(--text);white-space:nowrap;transition:color .16s}
.seg-b[aria-checked=true]{color:var(--ink)}
.seg.sm .seg-b{min-height:44px;min-width:44px;padding:0 8px;font-size:13.5px}
.ing-h-row .seg{width:140px}
.sel-wrap{position:relative;display:inline-flex;align-items:center}
.sel{min-height:44px;padding:0 32px 0 12px;border:0;border-radius:10px;background:var(--surface);color:var(--ink);font:600 15px var(--text);-webkit-appearance:none;appearance:none}
.sgroup .sel{background:var(--paper)}
.sel-wrap svg{position:absolute;right:10px;pointer-events:none;color:var(--ink2)}
.field{display:block;width:100%;min-height:52px;padding:0 14px;border:1.5px solid transparent;border-radius:14px;background:var(--surface);color:var(--ink);font:500 16px var(--text);-webkit-appearance:none;appearance:none;transition:border-color .16s}
.field:focus{border-color:var(--ink)}
.field.ta{min-height:220px;padding:12px 14px;line-height:1.45;resize:vertical}
.num-in{width:84px;height:44px;padding:0 8px;border:1.5px solid var(--hair);border-radius:10px;background:var(--paper);color:var(--ink);font:700 16px var(--text);text-align:center;-moz-appearance:textfield;appearance:textfield}
.num-in::-webkit-outer-spin-button,.num-in::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.num-in:focus{border-color:var(--ink)}
.switch{position:relative;flex:none;width:51px;height:44px;padding:0;border:0;border-radius:99px;background:none}
.switch::before{content:"";position:absolute;left:0;right:0;top:6.5px;height:31px;border-radius:99px;background:var(--hair);transition:background-color .2s var(--ease)}
.switch i{position:absolute;top:8.5px;left:2px;width:27px;height:27px;border-radius:50%;background:#fff;box-shadow:0 2px 4px rgba(0,0,0,.2);transition:transform .32s var(--spring)}
.switch.on::before{background:var(--switch-on)}
.switch.on i{transform:translateX(20px)}

/* -- cook mode */
.scr.cook,.scr.import,.scr.onb{position:fixed;inset:0;z-index:40;padding:0;background:var(--paper)}
.scr.cook{display:flex;flex-direction:column;padding:var(--sat) var(--sar) 0 var(--sal)}
.cook-live{display:flex;flex-direction:column;width:100%;max-width:var(--col);height:100%;margin:0 auto;min-height:0}
.cook-top{display:flex;align-items:center;gap:10px;padding:6px 14px 0}
.cook-top .ibtn{background:var(--surface)}
.cook-title{flex:1;min-width:0;display:grid;justify-items:center;text-align:center}
.cook-rt{max-width:100%;font:600 14px/1.3 var(--text);color:var(--ink2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cook-prog{display:flex;gap:4px;padding:12px 20px 0}
.cook-prog i{flex:1;height:4px;border-radius:99px;background:var(--hair);transition:background-color .2s var(--ease)}
.cook-prog i.on{background:var(--red)}
.tray{display:flex;gap:8px;padding:10px 20px 0;overflow-x:auto;scrollbar-width:none;flex:none}
.tray::-webkit-scrollbar{display:none}
.tpill{flex:none;display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 14px;border:0;border-radius:99px;background:var(--ink);color:var(--paper);transition:transform .16s var(--ease)}
.tpill:active{transform:scale(.96)}
.tpill b{font:700 16px var(--text);font-variant-numeric:tabular-nums}
.tpill span{font:600 13px var(--text);opacity:.75}
.tpill>svg:last-child{opacity:.6}
.tpill.done{background:var(--red);color:#fff;animation:pulse 1s var(--ease) infinite alternate}
.cook-tip{display:flex;align-items:center;gap:8px;margin:10px 20px 0;padding:8px 6px 8px 12px;border-radius:12px;background:var(--surface);font-size:13.5px;color:var(--ink2)}
.cook-tip span{flex:1}
.tip-x{display:grid;place-items:center;flex:none;width:44px;height:44px;margin:-6px -4px -6px 0;border:0;border-radius:50%;background:none;color:var(--ink3)}
.pager{position:relative;flex:1;min-height:0;overflow:hidden;touch-action:pan-y}
.track{display:flex;height:100%;transition:transform .34s var(--ease);will-change:transform}
.track.instant{transition:none}
.page{flex:0 0 100%;min-width:0;height:100%;overflow-y:auto;overscroll-behavior:contain}
.page-in{padding:8px 24px 30px}
.page-n{margin:4px 0 14px;font:900 clamp(92px,30vw,124px)/.8 var(--disp);color:var(--red);font-variant-numeric:tabular-nums}
.page-t{font:600 clamp(22px,6.6vw,26px)/1.38 var(--text);letter-spacing:-.2px}
.page-timers{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.tstart{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 18px;border:0;border-radius:99px;background:var(--red);color:#fff;font:700 17px var(--text);transition:transform .16s var(--ease)}
.tstart:active{transform:scale(.96)}
.used{margin-top:28px;display:grid;gap:8px}
.used-row{display:flex;gap:12px;align-items:baseline;padding:4px 0;font-size:17px}
.used-row b{min-width:76px;font-weight:700}
.cook-ctl{display:flex;gap:12px;padding:10px 20px calc(10px + var(--sab))}
.cook-prev{display:grid;place-items:center;flex:none;width:64px;height:64px;border:0;border-radius:50%;background:var(--surface);color:var(--ink);transition:transform .16s var(--ease)}
.cook-prev:active{transform:scale(.94)}
.cook-next{flex:1;min-height:64px;font-size:17px}
.cook-msg{display:grid;justify-items:center;gap:12px;max-width:420px;margin:18vh auto 0;padding:0 24px;text-align:center}
.cook-msg>svg{color:var(--red)}
.cook-done{display:flex;flex-direction:column;align-items:center;width:100%;max-width:var(--col);height:100%;margin:0 auto;padding:24px 20px calc(12px + var(--sab));text-align:center;overflow-y:auto;opacity:0;transition:opacity .25s var(--ease)}
.cook-done.in{opacity:1}
.done-art{position:relative;margin-top:auto;padding:10px 40px 30px}
.done-ph{width:min(250px,62vw);aspect-ratio:250/310;border-radius:20px;overflow:hidden;transform:rotate(-3deg);background:var(--surface);box-shadow:0 14px 34px rgba(0,0,0,.16)}
.stamp{position:absolute;right:0;bottom:6px;padding:2px 16px 0;border:6px solid var(--red);border-radius:8px;background:color-mix(in srgb,var(--paper) 70%,transparent);color:var(--red);font:900 78px/1 var(--disp);letter-spacing:1px;transform:rotate(-12deg);opacity:0}
.cook-done.in .stamp{animation:stamp .5s var(--spring) .25s both}
@keyframes stamp{from{opacity:0;transform:rotate(-12deg) scale(1.8)}to{opacity:1;transform:rotate(-12deg) scale(1)}}
.done-t{margin-top:22px;max-width:16ch;font:800 32px/1.02 var(--disp)}
.cook-done .muted{margin-top:8px;font-size:16px}
.done-tag{display:inline-flex;align-items:center;gap:6px;height:28px;margin-top:14px;padding:0 12px;border-radius:99px;background:var(--red);color:#fff;font:800 12.5px/1 var(--disp);letter-spacing:.8px;text-transform:uppercase}
.done-acts{display:grid;gap:10px;width:100%;margin-top:auto;padding-top:28px}

/* -- import */
.scr.import{overflow-y:auto;overscroll-behavior:contain;padding:var(--sat) var(--sar) 0 var(--sal)}
.imp-top{display:flex;max-width:var(--col);margin:0 auto;padding:6px 10px 0}
.imp-body{max-width:var(--col);margin:0 auto;padding:0 var(--gutter) calc(40px + var(--sab))}
.imp-in{display:grid;gap:16px;padding-top:4px}
.imp-in .display{margin-top:-10px}
.how{display:flex;flex-wrap:wrap;gap:6px}
.how-p{display:inline-flex;align-items:center;gap:5px;height:30px;padding:0 10px;border-radius:99px;background:var(--surface);font:600 12.5px var(--text);white-space:nowrap}
.how-p b{font:900 16px/1 var(--disp);color:var(--red)}
.link-row{display:flex;gap:8px}
.link-row .field{flex:1;min-width:0}
.paste{min-height:52px;padding:0 16px;border-radius:14px}
.note{font-size:13px;color:var(--ink2);text-align:center}
.note.warn{color:var(--red)}
.working{display:grid;gap:16px;padding:16vh 8px 0}
.wk{display:flex;align-items:center;gap:12px;font:800 24px/1.08 var(--disp);color:var(--ink3);opacity:.45;transition:opacity .2s var(--ease),color .2s var(--ease)}
.wk.now{opacity:1}
.wk.done{color:var(--ink)}
.wk>svg{flex:none;color:var(--ink3)}
.wk.done>svg{color:var(--red)}
.review{display:grid;gap:4px;padding-top:4px}
.rv-photo{height:220px;margin-bottom:14px;border-radius:18px;overflow:hidden;background:var(--surface)}
.title-in{display:block;width:100%;margin-top:6px;padding:0;border:0;background:transparent;color:var(--ink);font:800 28px/1.12 var(--text);letter-spacing:-.6px;resize:none;overflow:hidden}
.title-in:focus{outline:none;box-shadow:0 2px 0 var(--ink)}
.rv-meta{display:grid;gap:2px;margin:14px 0 6px;padding:4px 16px;border-radius:16px;background:var(--surface)}
.rv-meta .row-between+.row-between{border-top:1px solid var(--hair)}
.rv-meta .sel{background:var(--paper)}
.rv-dyn{display:grid;gap:4px}
.fs-imp{display:grid;gap:12px;margin-top:14px;box-shadow:inset 0 0 0 2px transparent;transition:box-shadow .2s var(--ease)}
.fs-imp>.eyebrow{margin-top:4px}
.swaps{display:grid;gap:10px}
.swap-l{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 6px;font:600 15px/1.3 var(--text)}
.swap-l s{color:var(--ink3);text-decoration-color:var(--ink3)}
.swap-l svg{flex:none;align-self:center;color:var(--red)}
.swap-why{margin-top:3px;font-size:13px;color:var(--ink2)}
.fs-imp:not(.on) .swap-l s{text-decoration:none;color:var(--ink)}
.fs-imp:not(.on) .swap-l b{color:var(--ink3)}
.fs-imp:not(.on) .swap-why{color:var(--ink3)}
.rv-ings{margin-top:26px}
.rv-ings .rule.heavy{margin-top:8px}
.rl{display:flex;gap:10px;padding:9px 0;border-bottom:1px solid var(--hair)}
.rl>svg{flex:none;margin-top:1px;color:color-mix(in srgb,var(--ink) 70%,transparent)}
.rl.unsure>svg,.rl.swapped>svg{color:var(--red)}
.rl div{min-width:0;display:grid;gap:2px}
.rl p{font-size:15px;line-height:1.35;overflow-wrap:anywhere}
.rl .rl-was{font-size:12.5px;color:var(--ink3);text-decoration:line-through}
.rl .rl-m{font-size:12px;color:var(--ink3)}
.rl .rl-m.red{color:var(--red)}
.review>.btn{margin-top:18px}
.review .note{margin-top:14px}
.failed{display:grid;justify-items:center;gap:14px;max-width:420px;margin:0 auto;padding:12vh 8px 0;text-align:center}
.empty-ic{color:var(--ink3);line-height:0}

/* -- plan */
.plan-acts{display:grid;gap:4px;margin-top:18px}
.plan-acts-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.plan-acts-row .btn{padding:0 12px}
.protag.inv{margin-left:2px}
.day{margin-top:28px;display:grid;gap:10px}
.day-h{display:flex;align-items:baseline;gap:8px}
.day-name{font:800 24px/1 var(--disp)}
.day-d{font-weight:400;color:var(--ink3)}
.day-p{font:800 13.5px/1 var(--disp);letter-spacing:.3px;color:var(--ink2);white-space:nowrap}
.slot{display:grid;gap:6px}
.slot-m{display:flex;align-items:center;gap:6px}
.slot-s{font-size:12px;color:var(--ink3)}
.addmeal{display:flex;align-items:center;justify-content:center;gap:8px;min-height:46px;border:1.2px dashed var(--ink3);border-radius:12px;background:none;color:var(--ink2);font:600 14.5px var(--text);transition:transform .16s var(--ease)}
.addmeal:active{transform:scale(.98)}
.picker{display:grid;gap:12px}
.picker .field{min-height:46px}
.pick-list{display:grid;gap:12px;padding-bottom:12px}

/* -- groceries */
.add{display:flex;align-items:center;gap:10px;height:50px;margin-top:14px;padding:0 4px 0 16px;border-radius:14px;background:var(--surface);color:var(--ink2)}
.add:focus-within{box-shadow:inset 0 0 0 1.5px var(--ink)}
.add-in{flex:1;min-width:0;height:100%;border:0;background:transparent;color:var(--ink);font:500 16px var(--text)}
.add-b{min-height:44px;padding:0 12px;border:0;background:none;color:var(--red);font:700 15px var(--text)}
.gl .empty{margin-top:24px}
.aisle{margin-top:26px}
.aisle>.eyebrow{margin-bottom:6px}
.gi{display:flex;align-items:center;gap:14px;width:100%;min-height:52px;padding:10px 0;border:0;border-bottom:1px solid var(--hair);background:none;color:var(--ink);text-align:left}
.box{display:grid;place-items:center;flex:none;width:24px;height:24px;border-radius:6px;box-shadow:inset 0 0 0 1.6px color-mix(in srgb,var(--ink) 35%,transparent);color:#fff;transition:background-color .16s var(--ease),box-shadow .16s var(--ease)}
.box svg{opacity:0;transform:scale(.6);transition:opacity .14s var(--ease),transform .26s var(--spring)}
.gi.done .box{background:var(--red);box-shadow:none}
.gi.done .box svg{opacity:1;transform:none}
.gi-tx{flex:1;min-width:0;display:grid;gap:2px;transition:opacity .16s}
.gi-n{font:500 16.5px/1.3 var(--text)}
.gi-r{font-size:12px;color:var(--ink3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gi.done .gi-tx{opacity:.45}
.gi.done .gi-n{text-decoration:line-through;text-decoration-color:var(--ink3)}
.gi-a{flex:none;max-width:42%;font:600 15px var(--text);font-variant-numeric:tabular-nums;text-align:right}
.gi.done .gi-a{color:var(--ink3)}
.staples{margin-top:30px}
.stap-h{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:52px;padding:6px 0;border:0;background:none;color:var(--ink);text-align:left}
.stap-h>span{display:grid;gap:2px}
.stap-h>svg{transition:transform .22s var(--ease)}
.stap-h[aria-expanded=true]>svg{transform:rotate(180deg)}

/* -- cookbook */
.imp-card{display:flex;align-items:center;gap:14px;width:100%;margin-top:16px;padding:14px;border:0;border-radius:18px;background:var(--surface);color:var(--ink);text-align:left;transition:transform .16s var(--ease)}
.imp-card:active{transform:scale(.98)}
.imp-card>svg{flex:none;color:var(--ink3)}
.imp-card-ic{display:grid;place-items:center;flex:none;width:46px;height:46px;border-radius:50%;background:var(--red);color:#fff}
.imp-card-tx{flex:1;min-width:0;display:grid;gap:2px}
.imp-card-t{font:800 21px/1 var(--disp)}
.cb-seg{display:grid;margin-top:22px}
.cb-content{margin-top:18px}

/* -- challenge */
.scr.challenge .top-head{padding-top:0}
.scr.challenge .cstrip{margin-top:22px}
.scr.challenge>.btn{margin-top:22px}
.ch-acts{display:grid;gap:10px;margin-top:22px}
.daylist{margin-top:30px}
.dl-row{display:flex;align-items:center;gap:14px;padding:12px 0}
.dl-row.compact{padding:8px 0}
.dl-sq{flex:none;width:56px}
.dl-sq .csq{border-radius:12px}
.dl-sq .csq-n{font-size:22px}
.dl-sq.sm{width:56px}
.dl-sq.sm .csq{width:36px;border-radius:9px}
.dl-sq.sm .csq-n{font-size:15px}
.dl-tx{flex:1;min-width:0;display:grid;gap:3px}
.dl-h{display:flex;align-items:baseline;gap:8px}
.dl-h b{font:800 20px/1 var(--disp)}
.dl-h span{font-size:13px;color:var(--ink2);white-space:nowrap}
.dl-r{font:600 15px/1.3 var(--text);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.dl-p{flex:none;font:900 28px/1 var(--disp);color:var(--red)}
.dl-p i{font-style:normal;font-size:16px}
.dl-c{font:600 15px var(--text);color:var(--ink2)}
.dl-row.off .dl-c{color:var(--ink3)}
.rules{margin-top:44px}
.rules .rule.heavy{margin-top:10px}
.rule-row{display:grid;grid-template-columns:34px 1fr;gap:14px;align-items:baseline;padding:14px 0}
.rule-row .step-n{font-size:28px}
.rule-row p{font-size:16px}
.rules>.eyebrow{margin-top:12px}

/* -- settings */
.scr.settings .top-head{padding-top:0}
.sgroup{margin-top:28px}
.sg-t{margin:0 4px 8px;font:800 12.5px/1.2 var(--disp);letter-spacing:1.4px;text-transform:uppercase;color:var(--ink2)}
.sg-rows{padding:0 16px;border-radius:16px;background:var(--surface)}
.sgroup .sg-rows>*+*{border-top:1px solid var(--hair)}
.sgroup .chip:not(.on){background:var(--paper)}
.sgroup .seg{background:var(--hair)}
.lrow{display:flex;align-items:center;gap:12px;width:100%;min-height:52px;padding:10px 0;border:0;background:none;color:var(--ink);text-align:left;font:600 16px/1.3 var(--text);text-decoration:none}
button.lrow:active,a.lrow:active{opacity:.6}
.lrow>svg:last-child{flex:none;color:var(--ink3)}
.lrow-ic{flex:none;display:grid;place-items:center;color:var(--ink2)}
.lrow-ic.red,.lrow.redt .lrow-ic{color:var(--red)}
.lrow.redt .lrow-t{color:var(--red)}
.lrow-tx{flex:1;min-width:0;display:grid;gap:2px}
.lrow-t{font:600 16px/1.3 var(--text)}
.lrow-d{font:400 12.5px/1.35 var(--text);color:var(--ink2)}
.lrow-v{flex:none;font:400 15px var(--text);color:var(--ink2)}
.lrow.static{cursor:default}
.lrow.col{flex-direction:column;align-items:stretch;gap:8px;padding:12px 0}
.lrow.danger,.lrow.danger .lrow-ic{color:var(--red)}
.lrow .seg{flex:none}
.lrow.col .seg{width:100%}
.w-row{display:flex;align-items:center;gap:8px}
.email-row{display:flex;gap:8px}
.email-row .field{flex:1;min-width:0;min-height:44px;background:var(--paper)}
.email-row .btn{min-height:44px}
.consent{position:relative;display:flex;align-items:flex-start;gap:10px;font:400 13px/1.4 var(--text);color:var(--ink2);cursor:pointer}
.consent input{position:absolute;left:0;top:0;width:24px;height:24px;margin:0;opacity:0;cursor:pointer}
.consent .box{width:22px;height:22px;box-shadow:inset 0 0 0 1.5px var(--ink)}
.consent input:checked+.box{background:var(--red);box-shadow:none}
.consent input:checked+.box svg{opacity:1;transform:none}
.consent input:focus-visible+.box{outline:2.5px solid var(--red);outline-offset:2px}
.banner{margin:10px 0;padding:11px 14px;border-radius:12px;background:var(--paper);font-size:14px;box-shadow:inset 3px 0 0 var(--red)}
.sgroup .fmpro-member{padding-bottom:4px}
.sgroup .fmpro-row:first-of-type{border-top:0}

/* -- sources */
.scr.sources .top-head{padding-top:0}
.src{display:grid;gap:14px;margin-top:18px}
.src-b{display:grid;gap:8px}
.src-b .h-sub{margin-top:6px}
.src-b p{font-size:15.5px;line-height:1.55;color:color-mix(in srgb,var(--ink) 86%,transparent)}
.src-l{display:inline-flex;align-items:center;gap:6px;min-height:44px;font:600 14px/1.3 var(--text);color:var(--red);text-decoration:none}
.src-l svg{flex:none}

/* -- shared empty state */
.empty{display:grid;justify-items:center;gap:10px;padding:32px 16px;text-align:center}
.empty h3{font:800 24px/1.05 var(--disp)}
.empty p{max-width:34ch;font-size:15px;color:var(--ink2)}
.empty .btn{margin-top:6px;min-width:200px}

/* -- onboarding */
.scr.onb{overflow-y:auto;overscroll-behavior:contain}
.onb>*{animation:fade .28s var(--ease) both}
.onb>.enter-f .q-body,.onb>.enter-f .q-foot{animation:fromR .3s var(--ease) both}
.onb>.enter-b .q-body,.onb>.enter-b .q-foot{animation:fromL .3s var(--ease) both}
@keyframes fade{from{opacity:0}}
@keyframes fromR{from{opacity:0;transform:translateX(28px)}}
@keyframes fromL{from{opacity:0;transform:translateX(-28px)}}
.welcome{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:100vh;min-height:100svh;background:#000;color:#fff;overflow:hidden}
.wall{position:absolute;inset:0;display:flex;gap:8px;padding:0 8px;opacity:.92}
.wall-col{flex:1;min-width:0;overflow:hidden}
.wall-in{display:flex;flex-direction:column;gap:8px;animation:wallup 64s linear infinite}
.wall-col.c1 .wall-in{animation-duration:46s;animation-direction:reverse}
.wall-col.c2 .wall-in{animation-duration:58s}
.wall-in .ph{width:100%;height:auto;aspect-ratio:1/1.3;border-radius:12px;background:#1a1a1a}
@keyframes wallup{to{transform:translateY(calc(-50% - 4px))}}
.welcome-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 12%,rgba(0,0,0,.72) 42%,rgba(0,0,0,.96) 66%)}
.welcome-tx{position:relative;width:100%;max-width:var(--col);margin:0 auto;padding:0 22px calc(var(--sab) + 18px);animation:rise .9s var(--ease) .15s both}
@keyframes rise{from{opacity:0;transform:translateY(24px)}}
.wordmark-xl{display:grid;margin-top:4px;font:900 clamp(112px,37vw,156px)/.8 var(--disp);letter-spacing:-2px}
.wordmark-xl .red{color:#ff4b2b!important}
.welcome .eyebrow.red{color:#ff4b2b}
.welcome-sub{margin:10px 0 26px;font:600 21px/1.25 var(--text);color:rgba(255,255,255,.88)}
.welcome-ios{margin:-12px 0 18px;font-size:13.5px;line-height:1.45;color:rgba(255,255,255,.7)}
.welcome .btn.red{background:#ff4b2b;color:#fff}
.q{display:flex;flex-direction:column;min-height:100vh;min-height:100svh;max-width:var(--col);margin:0 auto;padding-top:var(--sat)}
.q-top{display:flex;align-items:center;gap:12px;padding:4px 12px 0}
.q-prog{flex:1;display:flex;gap:4px}
.q-prog i{flex:1;height:4px;border-radius:99px;background:var(--hair);transition:background-color .2s var(--ease)}
.q-prog i.on{background:var(--red)}
.q-n{width:34px;font:700 13px var(--text);color:var(--ink2);text-align:right;font-variant-numeric:tabular-nums}
.q-body{flex:1;padding:22px 20px 20px}
.q-title{margin-top:6px;font:900 clamp(40px,12.4vw,46px)/.92 var(--disp);letter-spacing:-.3px}
.q-title:focus{outline:none}
.q-sub{margin-top:8px;font-size:16px;color:var(--ink2)}
.q-content{margin-top:26px}
.q-foot{position:sticky;bottom:0;display:grid;gap:2px;padding:8px 20px calc(var(--sab) + 10px);background:var(--paper)}
.opts{display:grid;gap:10px}
.opt{display:flex;align-items:center;gap:14px;width:100%;padding:16px;border:0;border-radius:18px;background:var(--surface);color:var(--ink);text-align:left;
  box-shadow:inset 0 0 0 2px transparent;transition:box-shadow .2s var(--ease),transform .16s var(--ease)}
.opt:active{transform:scale(.98)}
.opt.on{box-shadow:inset 0 0 0 2px var(--red)}
.opt-ic{display:grid;place-items:center;flex:none;width:42px;height:42px;border-radius:50%;background:var(--paper);color:var(--ink);transition:background-color .2s,color .2s}
.opt.on .opt-ic{background:var(--red);color:#fff}
.opt-tx{flex:1;min-width:0;display:grid;gap:2px}
.opt-t{font:700 17px/1.2 var(--text)}
.opt-d{font-size:14px;color:var(--ink2)}
.opt-ck{flex:none;color:var(--hair);line-height:0}
.opt.on .opt-ck{color:var(--red)}
.weight{display:grid;justify-items:center;gap:22px}
.w-unit{width:160px}
.w-num{display:flex;align-items:center;gap:18px}
.w-val{display:flex;align-items:baseline;gap:4px;min-width:3.2ch;justify-content:center}
.w-big{font:900 96px/.85 var(--disp);font-variant-numeric:tabular-nums}
.w-val span{font:900 36px var(--disp);color:var(--ink2)}
.range{--fill:50%;width:100%;height:44px;margin:0;background:transparent;-webkit-appearance:none;appearance:none}
.range::-webkit-slider-runnable-track{height:6px;border-radius:99px;background:linear-gradient(90deg,var(--red) var(--fill),var(--hair) var(--fill))}
.range::-moz-range-track{height:6px;border-radius:99px;background:var(--hair)}
.range::-moz-range-progress{height:6px;border-radius:99px;background:var(--red)}
.range::-webkit-slider-thumb{width:28px;height:28px;margin-top:-11px;border-radius:50%;background:#fff;border:0;box-shadow:0 1px 5px rgba(0,0,0,.3);-webkit-appearance:none;appearance:none}
.range::-moz-range-thumb{width:28px;height:28px;border-radius:50%;background:#fff;border:0;box-shadow:0 1px 5px rgba(0,0,0,.3)}
.w-typed{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--ink2)}
.target{display:grid;gap:18px}
.t-row{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.t-val{display:flex;align-items:baseline;color:var(--red)}
.t-num{font:900 clamp(108px,34vw,132px)/.8 var(--disp);font-variant-numeric:tabular-nums}
.t-val i{font:900 54px/1 var(--disp);font-style:normal}
.t-btns{display:grid;gap:8px}
.t-exp{font-size:16px;line-height:1.45}
.crave{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.crave-t{position:relative;aspect-ratio:.78;padding:0;border:0;border-radius:14px;overflow:hidden;background:var(--surface);transition:transform .2s var(--spring)}
.crave-t .ph{position:absolute;inset:0}
.crave-t.on{transform:scale(.96)}
.crave-t::after{content:"";position:absolute;inset:0;border-radius:14px;box-shadow:inset 0 0 0 3px transparent;transition:box-shadow .18s var(--ease)}
.crave-t.on::after{box-shadow:inset 0 0 0 3px var(--red)}
.crave-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(0,0,0,.76))}
.crave-l{position:absolute;left:9px;right:9px;bottom:9px;font:800 16px/1 var(--disp);color:#fff;text-align:left}
.crave-ck{position:absolute;top:7px;right:7px;color:rgba(255,255,255,.92);line-height:0;border-radius:50%}
.crave-t.on .crave-ck{color:var(--red);background:#fff}
.building{display:flex;flex-direction:column;justify-content:center;gap:18px;min-height:100vh;min-height:100svh;max-width:var(--col);margin:0 auto;padding:24px}
.building .wk{font-size:25px}
.flip{position:relative;display:grid;place-items:center;min-height:100vh;min-height:100svh;overflow:hidden;background:var(--paper)}
.flood{position:fixed;left:50%;top:50%;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:var(--red);transform:scale(.01);transition:transform .55s cubic-bezier(.2,.7,.2,1)}
.flip.on .flood{transform:scale(var(--r,200))}
.flip-in{position:relative;display:grid;justify-items:center;gap:30px;padding:24px;text-align:center}
.flip-h{font:900 clamp(60px,20vw,78px)/.88 var(--disp);color:var(--ink);transition:color .3s var(--ease)}
.flip-s{font:600 18px var(--text);color:var(--ink2);transition:color .3s var(--ease)}
.flip.on .flip-h{color:#fff}
.flip.on .flip-s{color:rgba(255,255,255,.88)}
.flip.on .ft-track::after{background:#121212}

/* -- sheets */
.sheet-root{position:fixed;inset:0;z-index:100}
.sheet-backdrop{position:absolute;inset:0;background:var(--scrim);opacity:0;transition:opacity .24s var(--ease)}
.sheet{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;max-height:calc(100% - var(--sat) - 20px);border-radius:20px 20px 0 0;background:var(--paper);
  box-shadow:0 -10px 40px rgba(0,0,0,.14);transform:translateY(100%);transition:transform .34s var(--ease)}
.sheet.full{height:calc(100% - var(--sat) - 10px)}
.sheet-root.in .sheet-backdrop{opacity:1}
.sheet-root.in .sheet{transform:none}
.sheet-root.out .sheet{transform:translateY(100%);transition-duration:.22s}
.sheet-root.out .sheet-backdrop{opacity:0;transition-duration:.22s}
.sheet-root.dragging .sheet{transition:none}
.sheet-grab{flex:none;width:38px;height:5px;margin:8px auto 0;border-radius:99px;background:var(--hair)}
.sheet-head{flex:none;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 14px 4px 20px}
.sheet-title{font:900 28px/1 var(--disp);overflow-wrap:anywhere}
.sheet-x{display:grid;place-items:center;flex:none;width:44px;height:44px;border:0;border-radius:50%;background:var(--surface);color:var(--ink);transition:transform .16s var(--ease)}
.sheet-x:active{transform:scale(.92)}
.sheet-body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:10px 20px calc(20px + var(--sab))}
.sheet:focus{outline:none}
@media (min-width:700px){
  .sheet{left:50%;right:auto;top:50%;bottom:auto;width:min(560px,calc(100% - 48px));max-height:min(86vh,860px);border-radius:20px;opacity:0;transform:translate(-50%,-48%) scale(.97);transition:transform .26s var(--ease),opacity .2s var(--ease)}
  .sheet.full{height:min(86vh,860px)}
  .sheet-root.in .sheet{opacity:1;transform:translate(-50%,-50%)}
  .sheet-root.out .sheet{opacity:0;transform:translate(-50%,-49%) scale(.98)}
  .sheet-grab{visibility:hidden;height:0;margin:0}
  .sheet-head{padding-top:14px}
}
.acts{display:grid;margin:0 -4px}
.act{display:flex;align-items:center;gap:14px;width:100%;min-height:54px;padding:0 4px;border:0;border-bottom:1px solid var(--hair);background:none;color:var(--ink);font:600 17px var(--text);text-align:left}
.act:last-child{border-bottom:0}
.act:active{opacity:.55}
.act.danger{color:var(--red)}
.confirm-msg{margin-bottom:18px;font-size:15px;color:var(--ink2)}
.confirm-acts{display:grid;gap:10px}
.confirm-acts .btn{width:100%}
.sheet-ings{padding-bottom:8px}

/* -- toast */
#fm-toast{position:fixed;left:0;right:0;z-index:200;bottom:calc(var(--tab-h) + var(--sab) + var(--dock-h) + 16px);display:flex;justify-content:center;padding:0 16px;pointer-events:none}
body.is-overlay #fm-toast{bottom:calc(var(--sab) + 92px)}
body:has(.cookbar):not(.is-overlay) #fm-toast{bottom:calc(var(--tab-h) + var(--sab) + var(--dock-h) + 88px)}
.toast{display:inline-flex;align-items:center;gap:8px;max-width:100%;padding:12px 18px;border-radius:99px;background:var(--ink);color:var(--paper);font:600 15px/1.25 var(--text);
  box-shadow:0 8px 26px rgba(0,0,0,.2);opacity:0;transform:translateY(10px) scale(.98);transition:opacity .22s var(--ease),transform .26s var(--ease)}
.toast svg{flex:none;color:var(--red)}
.toast.in{opacity:1;transform:none}
.toast.out{opacity:0;transform:translateY(6px);transition-duration:.18s}

/* -- wide screens: a centred 600 px column */
@media (min-width:700px){
  :root{--gutter:24px}
  body{background:var(--paper)}
  .hero-card{aspect-ratio:1.05}
}

/* -- reduced motion: opacity only, nothing drifts or floods */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;animation-delay:0s!important;scroll-behavior:auto!important}
  .btn,.chip,.card-ph,.ibtn,.opt,.wday,.tchip,.tstart,.planweek,.hero-card,.rrow-main,.imp-card,.crave-t,.tpill,.dpick,.round,.cook-prev,.addmeal,.streak,.sheet-x,.tab-ic{transition:opacity .15s!important;transform:none!important}
  .wall-in{animation:none!important}
  .ft-knob,.fork,.switch i,.box svg,.cat-l::after,.seg::before,.track,.pbar i{transition:none!important}
  .sheet{transition:opacity .15s!important;transform:none!important;opacity:0}
  .sheet-root.in .sheet{opacity:1}
  @media (min-width:700px){.sheet,.sheet-root.in .sheet,.sheet-root.out .sheet{transform:translate(-50%,-50%)!important}}
  .flood{transform:scale(var(--r,200))!important;opacity:0;transition:opacity .15s!important}
  .flip.on .flood{opacity:1}
  .cook-done.in .stamp{animation:none;opacity:1}
  .toast{transform:none!important}
}

/* welcome: the two quiet links under "Let's eat" */
.welcome-alt{display:flex;flex-wrap:wrap;justify-content:center;column-gap:18px}