/* Shell, type, buttons, the floating bottom bar, cards/rows, sheet, toast. Every value comes from css/tokens.css. */
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;background:var(--bg)}
body{font-family:var(--font);color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums;font-synthesis:none;min-height:100vh;min-height:100dvh;overflow-x:hidden}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent;text-align:inherit}
button:disabled{cursor:default}
a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
img{display:block;max-width:100%}
input{font:inherit;color:inherit}
:focus-visible{outline:2.5px solid var(--accent);outline-offset:2px;border-radius:8px}
[hidden]{display:none!important}
#shell{width:min(100%,var(--col));margin:0 auto;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;position:relative;padding-bottom:var(--pad-b,24px)}
/* content never ends behind the floating bar: bar height (64) + its bottom gap (18) + 16 */
body[data-nav=on] #shell{--pad-b:calc(98px + var(--safe-b))}
body[data-cta=on] #shell{--pad-b:calc(102px + var(--safe-b))}
#view{flex:1;display:flex;flex-direction:column;outline:none;animation:rise .45s var(--ease)}
@keyframes rise{from{opacity:0}}
.page{flex:1;display:flex;flex-direction:column;padding-bottom:12px}
.boot{padding:120px 24px;color:var(--muted);text-align:center}
#offline{margin:4px 18px 10px;padding:8px 14px;border-radius:14px;background:var(--little-bg);color:var(--little-t);font-size:12.5px;font-weight:500}

/* ---------- type ---------- */
.eyebrow{font-size:var(--fs-eyebrow);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--atext)}
.h1{font-size:var(--fs-h1);font-weight:600;letter-spacing:-.2px;line-height:1.25}
.h2{font-size:var(--fs-h2);font-weight:600;letter-spacing:-.1px}
.muted{color:var(--muted)}
.fine{font-size:var(--fs-fine);color:var(--muted);line-height:1.45}
.te .eyebrow{letter-spacing:.02em;text-transform:none}
.te .h1,.te .h2,.te .ttl,.te .btn,.te .nm,.te .eyebrow,.te .tag{-webkit-text-stroke:var(--tes,.4px) currentColor}
.te .h1{line-height:1.4;letter-spacing:0}
.te .h2{line-height:1.45}
.te .fine,.te .note{line-height:1.55}

/* ---------- top bar ---------- */
.top{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:calc(58px + var(--safe-t));padding:var(--safe-t) 16px 0 18px;flex:none}
.top .grow{flex:1;min-width:0}
.top.bare{align-items:flex-start;padding-top:calc(var(--safe-t) + 6px)}
.brand{display:flex;align-items:center;gap:8px;font-size:17px;font-weight:500;letter-spacing:-.015em;white-space:nowrap}
.brand img{width:30px;height:30px;object-fit:contain}
.brand b{font-weight:500;color:var(--green)}
.tr{display:flex;gap:8px;align-items:center;flex:none}
.lang{height:34px;padding:0 13px;border-radius:17px;background:#fff;display:flex;align-items:center;font-size:13px;font-weight:500;box-shadow:var(--sh);white-space:nowrap}
.sq{width:34px;height:34px;border-radius:12px;background:#fff;display:flex;align-items:center;justify-content:center;box-shadow:var(--sh);flex:none}
.sq img{width:22px;height:22px;object-fit:contain}
.chev{width:9px;height:9px;border-top:2.5px solid var(--atext);border-right:2.5px solid var(--atext);transform:rotate(-135deg);margin-right:-3px;flex:none}
.chev.r{transform:rotate(45deg);margin:0 3px 0 -3px;border-width:2px}
.ttl-row{display:flex;align-items:center;gap:12px;min-width:0}
.ttl-row .h1{font-size:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html.te .ttl-row .h1{font-size:19px}

/* ---------- buttons ---------- */
.btn{height:46px;border-radius:var(--r-btn);display:flex;align-items:center;justify-content:center;gap:8px;color:#fff;font-size:var(--fs-btn);font-weight:600;letter-spacing:0;padding:0 18px;
  background:linear-gradient(180deg,var(--btn-from),var(--btn-to));box-shadow:var(--sh-btn);transition:transform .3s var(--ease),opacity .2s;text-align:center}
.btn:active,.btn.is-pressed{transform:scale(.97)}
.btn.sm{height:34px;border-radius:17px;font-size:13px;font-weight:500;padding:0 14px;background:var(--strong);box-shadow:0 8px 14px -8px rgba(166,62,7,.8)}
.btn.out{background:#fff;color:var(--atext);box-shadow:0 0 0 1.5px rgba(226,87,15,.55) inset}
.btn.danger{background:var(--avoid-bg);color:var(--avoid-t);box-shadow:none}
.btn:disabled,.btn.disabled{opacity:1;pointer-events:none;background:var(--disabled-bg);color:var(--disabled-t);box-shadow:inset 0 0 0 1.5px var(--disabled-line)}
.btn .tk{width:6px;height:11px;border-right:2.3px solid #fff;border-bottom:2.3px solid #fff;transform:rotate(40deg) translate(-1px,-2px);margin-right:7px;flex:none}
.btn.wide{width:100%}
.te .btn{font-size:15px}
.te .btn.sm{font-size:12.5px}
.cta{margin:18px 22px 0}
.cta+.cta{margin-top:10px}
.btn-link{font-size:14px;font-weight:500;color:var(--atext);padding:6px 4px}

/* ---------- note + source ---------- */
.note{display:flex;gap:8px;align-items:flex-start;font-size:var(--fs-fine);line-height:1.45;color:var(--muted)}
.note img{width:20px;height:20px;object-fit:contain;flex:none;margin-top:-1px}
#safety{margin:0;padding:12px 22px 0;flex:none;position:relative;z-index:46}
/* the area behind the floating bar / fixed button fades to cream, so scrolling content never shows through */
body::after{content:"";position:fixed;left:0;right:0;bottom:0;height:calc(96px + var(--safe-b));pointer-events:none;z-index:45;opacity:0;
  background:linear-gradient(to top,var(--bg) 0,var(--bg) 58%,rgba(255,255,255,0) 100%);transition:opacity .2s}
body[data-nav=on]::after,body[data-cta=on]::after,body[data-screen^=start]::after{opacity:1}
.src{font-size:var(--fs-fine);color:var(--muted);display:flex;align-items:center;gap:4px;padding:0;text-align:left}
.src i{width:7px;height:7px;border-top:2px solid var(--muted);border-right:2px solid var(--muted);transform:rotate(45deg);margin-left:2px;flex:none}
.src.pad{margin:14px 22px 0}

/* ---------- floating bottom bar ---------- */
.bar-nav{position:fixed;left:50%;transform:translateX(-50%);width:min(calc(100% - 28px),calc(var(--col) - 28px));bottom:calc(18px + var(--safe-b));height:64px;border-radius:32px;background:rgba(255,255,255,.96);z-index:50;
  box-shadow:var(--sh-nav);display:flex;align-items:center;justify-content:space-around;padding:0 6px}
.nv{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:11px;font-weight:400;color:var(--muted);min-width:54px;height:50px;border-radius:25px;transition:background .25s var(--ease),transform .3s var(--ease)}
.nv img{width:23px;height:23px;object-fit:contain}
.nv.on{flex-direction:row;gap:6px;background:var(--tint);color:var(--atext);padding:0 12px;font-size:11.5px;font-weight:500}
.nv .dots{width:26px;height:26px;display:grid;grid-template-columns:repeat(2,6px);gap:3.5px;align-content:center;justify-content:center}
.nv .dots i{width:6px;height:6px;border-radius:2px;background:var(--text)}
.nv:active,.nv.is-pressed{transform:scale(.94)}
.centre{position:relative;width:56px;height:56px;border-radius:50%;margin-top:-30px;background:#fff;display:flex;align-items:center;justify-content:center;flex:none;box-shadow:0 0 0 3.5px var(--accent),0 16px 22px -8px rgba(194,65,12,.6);transition:transform .3s var(--ease)}
.centre img{width:38px;height:38px;object-fit:contain}
.centre .clab{position:absolute;left:50%;top:calc(100% + 5px);transform:translateX(-50%);font-size:11px;font-weight:600;color:#A12F06;white-space:nowrap;background:#fff;padding:1px 6px;border-radius:8px}
html.te .centre .clab{font-size:13px}
.bar-nav{position:fixed}
.plate-hint{position:absolute;left:50%;bottom:calc(100% + 22px);transform:translateX(-50%);background:#2E1507;color:#fff;font-size:13px;font-weight:600;line-height:1.3;padding:9px 14px;border-radius:14px;max-width:220px;text-align:center;box-shadow:0 12px 22px -10px rgba(46,21,7,.7);animation:hintin .4s var(--ease)}
.plate-hint::after{content:"";position:absolute;left:50%;top:100%;margin-left:-7px;border:7px solid transparent;border-top-color:#2E1507}
@keyframes hintin{from{opacity:0;transform:translateX(-50%) translateY(6px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}
@media (prefers-reduced-motion:reduce){.plate-hint{animation:none}}
.centre:active,.centre.is-pressed{transform:scale(.94)}
body[data-nav=off] .bar-nav{display:none}

/* ---------- cards, tiles, bars ---------- */
.cardw{background:#fff;border-radius:var(--r-card);box-shadow:var(--sh)}
.tiles4{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin:0 14px}
.tile{background:#fff;border-radius:var(--r-tile);padding:11px 10px 12px;box-shadow:var(--sh);min-width:0}
.tile .lbl{font-size:11px;font-weight:400;color:var(--muted);white-space:nowrap;display:flex;align-items:center;gap:5px}
.tile .lbl i{width:7px;height:7px;border-radius:2.5px;background:var(--c);flex:none}
.tile .val{margin-top:4px;font-size:18px;font-weight:600;letter-spacing:-.2px;line-height:1.15}
.tile .of{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar{height:4px;border-radius:2px;background:var(--track);margin-top:8px;overflow:hidden}
.bar b{display:block;height:100%;border-radius:2px;background:var(--c);transform-origin:left;transition:transform .8s var(--ease)}
.te .tile .lbl{font-size:10.5px}
.tiles4.empty .val{color:var(--muted)}

/* ---------- rows (settings-style lists) ---------- */
.grp{margin:0 14px;background:#fff;border-radius:var(--r-card);box-shadow:var(--sh);overflow:hidden}
.grp+.grp,.grp+.cap,.cap+.grp{margin-top:16px}
.row{width:100%;min-height:56px;display:flex;align-items:center;gap:13px;padding:8px 16px 8px 14px;position:relative;text-align:left}
.row+.row::before{content:"";position:absolute;left:62px;right:0;top:0;height:1px;background:var(--border)}
.row.no-ic+.row::before,.row.no-ic::before{left:16px}
.row>img{width:32px;height:32px;object-fit:contain;flex:none}
.row .lb{flex:1;font-size:14.5px;font-weight:400;line-height:1.3;min-width:0}
.row .lb small{display:block;font-size:11.5px;color:var(--muted);margin-top:1px}
.row .vl{font-size:13px;color:var(--muted);font-weight:400;display:flex;align-items:center;gap:8px;text-align:right;max-width:46%}
.row .vl span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row.dg2 .lb{color:var(--danger);font-weight:500}
.row .mk{width:34px;height:34px;border-radius:11px;background:var(--avoid-bg);flex:none;position:relative}
.row.sel .vl::after{content:"";width:6px;height:11px;border-right:2.4px solid var(--accent);border-bottom:2.4px solid var(--accent);transform:rotate(40deg) translate(-1px,-2px)}
.cap{margin:22px 22px 8px;font-size:12.5px;font-weight:500;color:var(--muted)}
.row.is-pressed{background:var(--tint)}

.rk{width:34px;height:34px;border-radius:11px;flex:none;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:18px;line-height:1}
.rk.box{background:#fff;box-shadow:0 0 0 2px var(--border-in) inset}
.rk.good{background:var(--good-bg);color:var(--good-t)}.rk.avoid{background:var(--avoid-bg);color:var(--avoid-t)}.rk.little{background:var(--little-bg);color:var(--little-t)}

/* ---------- veg marks ---------- */
.vmark{width:15px;height:15px;border-radius:3px;background:#fff;box-shadow:0 0 0 1.5px var(--c,var(--veg)) inset;display:inline-flex;align-items:center;justify-content:center;flex:none;vertical-align:-2px}
.vmark::after{content:"";width:7px;height:7px;border-radius:50%;background:var(--c,var(--veg))}
.vmark.egg{--c:var(--egg)} .vmark.nonveg{--c:var(--nonveg)}

/* ---------- tags + states ---------- */
.tag{display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:11px;background:var(--sunk);font-size:11.5px;font-weight:500;color:var(--muted);vertical-align:2px}
.tag.soon{background:var(--little-bg);color:var(--little-t)}
.tag.sample,.tag.draft{background:var(--avoid-bg);color:var(--avoid-t)}
.empty{margin:48px 28px;text-align:center}
.empty-ic{width:64px;height:64px;margin:0 auto 14px;border-radius:22px;background:var(--tint);display:flex;align-items:center;justify-content:center}
.empty-ic img{width:40px;height:40px}
.empty-t{font-size:16px;font-weight:600;line-height:1.35}
.empty-h{margin-top:6px;font-size:13.5px;color:var(--muted);line-height:1.45}
.empty .btn{margin-top:18px}
.pic{background:var(--tint);overflow:hidden;display:flex;align-items:center;justify-content:center}
.pic img{width:100%;height:100%;object-fit:cover}
.pic-soon{flex-direction:column;gap:4px;color:var(--muted);font-size:11.5px}
.legal-card{margin:0 14px;padding:16px 18px;background:#fff;border-radius:var(--r-card);box-shadow:var(--sh)}
.legal-card p{font-size:14px;line-height:1.55;margin:0 0 10px}
.legal-card p:last-child{margin-bottom:0}
.tags{display:flex;gap:8px;flex-wrap:wrap;margin:6px 22px 0}
.lead{margin:6px 22px 0;font-size:13.5px;color:var(--muted);line-height:1.45}

/* ---------- search ---------- */
.search{position:relative;margin:12px 18px 0}
.search-in{width:100%;height:44px;border-radius:22px;border:0;background:#fff;box-shadow:var(--sh);padding:0 44px 0 18px;font-size:14.5px;outline:none}
.search-in:focus{box-shadow:0 0 0 2px var(--accent)}
.search-x{position:absolute;right:6px;top:5px;width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:20px}

/* ---------- segmented chips (filters, meal switch) ---------- */
.fl{display:flex;gap:8px;margin:12px 18px 0;overflow-x:auto;scrollbar-width:none}
.fl::-webkit-scrollbar{display:none}
.fc{height:32px;border-radius:16px;padding:0 14px;display:flex;align-items:center;font-size:13px;font-weight:500;background:#fff;color:var(--muted);box-shadow:0 0 0 1px var(--border) inset;white-space:nowrap;flex:none}
.fc.on{background:var(--strong);color:#fff;box-shadow:none}
.msw{display:flex;background:#fff;border-radius:17px;padding:3px;box-shadow:var(--sh);gap:2px}
.msw button{height:28px;border-radius:14px;padding:0 12px;font-size:12.5px;font-weight:500;color:var(--muted);white-space:nowrap}
.msw button.on{background:var(--strong);color:#fff}

/* ---------- sheet (grabber, drag to dismiss, see js/ui.js) ---------- */
.sheet-back{position:fixed;inset:0;background:var(--scrim);z-index:70;opacity:0}
.sheet{position:fixed;left:50%;bottom:0;transform:translate(-50%,100%);width:min(100%,var(--col));max-height:88vh;max-height:88dvh;background:#fff;border-radius:28px 28px 0 0;z-index:80;padding:10px 20px 0;
  box-shadow:0 -20px 50px -10px rgba(20,10,5,.35);display:flex;flex-direction:column}
.sheet-head{flex:none;touch-action:none}
.sheet-grip{width:44px;height:5px;border-radius:3px;background:#E4D7CC;margin:0 auto 12px}
.sheet-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:22px}
.sheet-title{font-size:var(--fs-h2);font-weight:600;letter-spacing:-.1px;flex:1}
.sheet-bar .btn-link{font-size:14px}
.sheet.tall{min-height:min(612px,88dvh)}
.sheet-body{overflow-y:auto;overscroll-behavior:contain;padding:0 0 calc(26px + var(--safe-b));flex:1;display:flex;flex-direction:column}
.sheet-body>div{flex:1;display:flex;flex-direction:column}
.sheet-body>div>.btn.wide:last-child{margin-top:auto}
.sheet-body .btn{margin-top:14px}
.sheet .lab{margin-top:16px;font-size:12.5px;font-weight:500;color:var(--muted)}
.sheet p.body{font-size:14px;line-height:1.5;margin:0 0 10px}
.src-block{padding:10px 0;border-top:1px solid var(--border)}
.src-block:first-child{border-top:0}
.src-title{font-size:13.5px;line-height:1.4;font-weight:500}
.src-printed{font-size:12.5px;color:var(--muted);margin-top:3px;line-height:1.4}
.src-link{display:inline-flex;align-items:center;gap:5px;margin-top:6px;margin-right:12px;font-size:12.5px;color:var(--atext);font-weight:500;word-break:break-all}
.src-none{font-size:12.5px;color:var(--muted)}
.disclose{display:none;padding:4px 16px 8px}.disclose.open{display:block}
.toast{position:fixed;left:50%;bottom:calc(100px + var(--safe-b));transform:translate(-50%,16px);max-width:min(88%,380px);background:var(--text);color:#fff;font-size:13px;padding:10px 16px;border-radius:18px;z-index:90;opacity:0;transition:opacity .3s,transform .3s var(--ease);text-align:center}
.toast.show{opacity:1;transform:translate(-50%,0)}
.is-pressed{transition:transform .12s}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}
body[data-cta=on]::after{height:calc(96px + var(--safe-b))}
.row.sel .chev{display:none}