/* The customer-facing look, shared by the order-ahead site and the table QR screen.
   Lifted out of the online page so the two cannot drift: a customer who orders ahead one day and
   sits at a table the next should not feel like they are in two different shops.

   Generated from online/index.html — edit there and run scripts/sync-online.sh, which copies this
   file to both places.

   The palette is the reference's black-and-bone, and it STAYS: asked directly on 2026-08-25
   whether the brand should go back on, the owner answered "I want the exact honest greens
   styling". So the brand lives in the logo mark, not in the page. Every customer surface — this
   flow, the table screen, the homepage, the Halo card and the join page — wears it.
   Staff screens (cashier, kitchen, bar) keep the house oxblood: they are a tool, not the shop
   front, and telling the two apart at a glance is the point. */

/* =============================================================================
   The Honest Greens ordering flow, screen for screen, on our menu and our
   photographs. Their palette is used as it stands for now — black ink, bone
   ground, the spring green as the only accent, the acid yellow for a highlight —
   because the owner asked to see the structure before the brand goes back on.

   Everything here was measured off the reference screens rather than remembered:
   the single column of full-bleed dish cards, the stone panel over a white sheet,
   display caps ending in a full stop, the black capsule at the foot with its
   inset amount chip, the green capsule that rides inside it on the step that
   commits, and the mode tiles with the tick sitting proud of the corner.
   ========================================================================== */
:root{
  --ink:#111111; --ink-2:#6E6A63; --ink-3:#9B968E;
  --ground:#F5F4EF; --white:#FFFFFF; --stone:#E8E7DE;
  --line:rgba(17,17,17,.10); --line-2:rgba(17,17,17,.18);
  --green:#6FE38A; --green-ink:#0C3A19; --green-soft:#E7FAEC;
  --acid:#E9F87C; --acid-ink:#26300A;
  /* Referenced by .field.bad and .tiny.err since the start, defined nowhere — so the red that
     tells a customer which field is wrong was silently the text colour. Found in the 2026-08-25
     component audit by grepping for tokens used but never declared. */
  --danger:#C0392B;
  /* Same audit, same disease: the "choose your sweetness first" nudge coloured itself with an
     undeclared --warn and came out plain black — a warning that did not look like one. */
  --warn:#B7791F;
  --f:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,monospace;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{background:var(--ground);color:var(--ink);font:400 16px/1.5 var(--f);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
img:not([src]),img[src=""]{visibility:hidden}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
input{font:inherit;color:inherit}
.app{max-width:480px;margin:0 auto;min-height:100dvh;position:relative;background:var(--ground);
     overflow-x:clip}

.d1{font:800 clamp(2rem,9vw,2.6rem)/1.02 var(--f);letter-spacing:-.03em;text-transform:uppercase;margin:0;text-wrap:balance}
.d2{font:800 clamp(1.5rem,6.5vw,1.9rem)/1.05 var(--f);letter-spacing:-.025em;text-transform:uppercase;margin:0;text-wrap:balance}
.d3{font:800 1.15rem/1.12 var(--f);letter-spacing:-.02em;text-transform:uppercase;margin:0}
.dot::after{content:"."}
.muted{color:var(--ink-2)}
.tiny{font:400 13px/1.45 var(--f);color:var(--ink-3)}

.bar{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:62px;
     padding:0 10px 0 26px;border-radius:999px;background:var(--ink);color:#fff;font:600 1.0625rem/1 var(--f)}
.bar .amt{padding:12px 18px;border-radius:999px;background:rgba(255,255,255,.15);font-variant-numeric:tabular-nums}
.bar .go{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.16);font-size:19px}
.bar[disabled]{background:#E4E2DC;color:#A9A49C}
.bar[disabled] .amt{background:rgba(17,17,17,.06)}
.bar.split{padding-left:8px}
.bar.split .lead{display:grid;place-items:center;min-width:124px;height:46px;border-radius:999px;
                 background:var(--green);color:var(--green-ink);font-weight:600}
.round{display:grid;place-items:center;width:62px;height:62px;border-radius:50%;background:var(--white);
       box-shadow:0 2px 10px rgba(17,17,17,.12);font-size:20px;flex:none}
.pill{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:999px;
      background:rgba(17,17,17,.06);font:600 13px/1 var(--f)}
.pill.ok{background:var(--green-soft);color:var(--green-ink)}
.outline{display:inline-flex;align-items:center;gap:12px;padding:16px 30px;border-radius:999px;
         border:1.5px solid var(--ink);font:600 1rem/1 var(--f);background:transparent}
.tick{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--green);
      color:#fff;font-size:14px;font-weight:700}
.foot{position:fixed;left:0;right:0;bottom:0;z-index:60;
      padding:12px 20px calc(20px + env(safe-area-inset-bottom));
      background:linear-gradient(to top,var(--ground) 62%,transparent);pointer-events:none}
.foot .row{display:flex;align-items:center;gap:12px;max-width:440px;margin:0 auto;pointer-events:auto}
.pad{height:112px}
.screen{display:none}.screen.on{display:block}

/* ---- splash, onboarding, landing: everything before the home screen ---- */
.splash{position:fixed;inset:0;z-index:200;background:#000;display:grid;place-items:center;
        transition:opacity .5s ease}
.splash{background:var(--ink)}
.splash img{width:174px;filter:brightness(0) invert(1)}
/* Coming back from another tab: no logo screen, no fade, nothing. */
html.warm .splash{display:none}
.wordmark{height:20px;width:auto}
.wordmark.light{filter:brightness(0) invert(1)}
.splash.gone{opacity:0;pointer-events:none}

.onb-wrap{min-height:100dvh;display:flex;flex-direction:column;background:var(--stone)}
.onb-x{position:absolute;top:calc(20px + env(safe-area-inset-top));right:20px;z-index:5;font-size:26px}
.onb-slides{flex:1;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.onb-slides::-webkit-scrollbar{display:none}
.onb-slide{flex:0 0 100%;scroll-snap-align:center;display:flex;flex-direction:column}
/* Full bleed, edge to edge. The reference never crops a photograph into a circle — the room is
   rectangular and so is the frame; a disc turns a place into a sticker. (Owner, 2026-08-25.) */
.onb-art{flex:1;min-height:52dvh;position:relative;overflow:hidden;background:var(--ink)}
.onb-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:0}
.onb-art::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(17,17,17,.28) 0%,rgba(17,17,17,0) 38%,rgba(17,17,17,.35) 100%)}
.onb-copy{padding:26px 26px 0;text-align:center}
.onb-copy .s{color:var(--ink-2);margin-top:14px;max-width:30ch;margin-left:auto;margin-right:auto}
.dots{display:flex;gap:9px;justify-content:center;padding:26px 0 calc(26px + env(safe-area-inset-bottom))}
.dots i{width:9px;height:9px;border-radius:50%;background:rgba(17,17,17,.22)}
.dots i.on{background:var(--ink)}
/* The acid card keeps its colour but the photograph inside it is a plate, not a badge. */
.onb-acid{background:#DDF07E;display:grid;place-items:center;padding:0;overflow:hidden;position:relative}
.onb-acid img{width:100%;height:100%;object-fit:cover;border-radius:0;mix-blend-mode:multiply;opacity:.92}

.vibes{position:fixed;inset:0;z-index:150;display:none}
.vibes.on{display:block}
.vibes img{width:100%;height:100%;object-fit:cover}
.vibes::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.1),rgba(0,0,0,.5))}
.vibes .in{position:absolute;left:0;right:0;bottom:calc(52px + env(safe-area-inset-bottom));z-index:2;
           text-align:center;color:#fff;padding:0 26px}
.vibes .in .s{margin-top:12px}
.vibes .x{position:absolute;top:calc(20px + env(safe-area-inset-top));right:22px;z-index:3;color:#fff;font-size:26px}
.white-pill{display:inline-block;background:#fff;color:#6B2118;border-radius:999px;padding:18px 40px;
            font:700 1.0625rem/1 var(--f);margin-top:26px}

.acct{background:var(--white)}
.acct .fold{padding:26px 20px}
.acct .fold .ic{font-size:20px}
.sso{display:flex;align-items:center;gap:16px;width:100%;padding:16px 20px;text-align:left;font:500 1.0625rem/1 var(--f)}
.sso .ic{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--ground);font-size:20px;flex:none}
.sso .ar{margin-left:auto;color:var(--ink-3)}

.form-lbl{color:var(--ink-2);font:400 14px/1 var(--f);margin-top:26px}
.boxes{display:flex;gap:10px;margin-top:26px;justify-content:space-between}
.boxes input{flex:1;min-width:0;aspect-ratio:3/4;border:1.5px solid var(--line-2);border-radius:14px;
             background:var(--white);text-align:center;font:700 1.6rem/1 var(--f);
             font-variant-numeric:tabular-nums}
.boxes input:focus{outline:0;border-color:var(--ink);box-shadow:0 0 0 3px rgba(17,17,17,.08)}
.form-in{width:100%;border:0;border-bottom:1px solid var(--line-2);background:none;padding:12px 0;font:400 1.0625rem/1.3 var(--f)}
.human{background:rgba(17,17,17,.05);border-radius:14px;padding:16px;margin-top:28px}
.human .q{display:inline-block;background:#D8CCF2;border-radius:6px;padding:8px 18px;font:600 1rem/1 var(--f)}
.consent{display:flex;gap:14px;padding:16px 0;align-items:flex-start}
.consent .box{width:26px;height:26px;border-radius:6px;border:1.5px solid var(--ink);flex:none;position:relative}
.consent.on .box{background:#7BE38C;border-color:#7BE38C}
.consent.on .box::after{content:"✓";position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:15px}
.consent .t{font:400 14.5px/1.45 var(--f)}
.consent .t b{font-weight:700}
.rewardrow{display:flex;align-items:center;gap:12px;padding:20px;background:var(--white);
           border-bottom:1px solid var(--line)}
.rewardrow .t{flex:1;font:600 1.0625rem/1 var(--f)}
.rewardrow .tier{background:#EFF3D9;border-radius:10px;padding:10px 18px;font:600 1rem/1 var(--f);
                 display:flex;align-items:center;gap:8px}
.prep{display:flex;align-items:center;gap:14px;padding:20px;background:var(--stone)}
.prep .t{flex:1}
.prep .t b{display:block;font:600 1.0625rem/1.25 var(--f)}
.prep .t span{color:var(--ink-2)}
.sub-act{display:block;width:100%;text-align:center;padding:16px 0 0;font:600 1.0625rem/1 var(--f)}

/* ---- home ---- */
/* Tall enough that the room is the first thing, short enough that Pick up / At a table /
   Delivery still clear the commit bar at rest — the tabs took 58px and the picture has to give
   it back, or a primary control sits under a black capsule. */
.hero{position:relative;height:46dvh;min-height:320px;overflow:hidden;background:var(--ink)}
.hero img{width:100%;height:100%;object-fit:cover}
.hero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.28) 34%,rgba(0,0,0,0) 62%)}
.hero .top{position:absolute;top:0;left:0;right:0;z-index:2;display:flex;align-items:center;justify-content:space-between;
           padding:calc(16px + env(safe-area-inset-top)) 20px 0}
.burger{display:grid;gap:5px}.burger i{display:block;width:26px;height:2.5px;background:#fff;border-radius:2px}
.hero .hi{position:absolute;z-index:2;left:20px;top:calc(74px + env(safe-area-inset-top));color:#fff}
.hero .hi .sub{font:400 1rem/1.35 var(--f);margin-top:14px;max-width:17ch}
.sheet-top{background:var(--white);padding:30px 20px 26px}
.locate{display:flex;align-items:center;gap:9px;color:var(--green-ink);font:600 1rem/1 var(--f);padding:0;margin-top:10px}
.locate .ar{color:#37B35C}
.modes{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:24px}
.mode{position:relative;border-radius:16px;background:var(--white);box-shadow:0 0 0 1px var(--line);padding:16px 8px 14px;text-align:center}
.mode.on{background:var(--ground);box-shadow:0 0 0 1px var(--line-2)}
.mode .ic{font-size:30px;line-height:1}
.mode .lb{font:600 .9375rem/1.2 var(--f);margin-top:8px}
.mode .tick{position:absolute;top:-9px;right:-9px}
.mode-note{color:var(--ink-2);margin-top:20px}

/* ---- map ---- */
.mapwrap{position:relative;height:100dvh}
.mapwrap iframe{width:100%;height:100%;border:0;filter:saturate(.92)}
.map-x{position:absolute;top:calc(18px + env(safe-area-inset-top));right:18px;z-index:3;display:grid;gap:1px;
       border-radius:14px;overflow:hidden;box-shadow:0 2px 10px rgba(17,17,17,.18)}
.map-x button{width:52px;height:48px;background:var(--white);display:grid;place-items:center;font-size:19px}
.mapcards{position:absolute;left:0;right:0;bottom:26px;z-index:3;display:flex;gap:14px;overflow-x:auto;
          padding:52px 18px 0;scroll-snap-type:x mandatory;scrollbar-width:none}
.mapcards::-webkit-scrollbar{display:none}
.shop{position:relative;flex:0 0 90%;scroll-snap-align:center;background:var(--white);border-radius:20px;
      padding:22px 20px 84px;box-shadow:0 6px 26px rgba(17,17,17,.16)}
.shop .far{position:absolute;top:-42px;left:0;background:var(--white)}
.shop .hours{display:flex;align-items:center;gap:8px;color:var(--ink-2);font:400 14px/1 var(--f);margin-top:8px}
.dotg{width:9px;height:9px;border-radius:50%;background:#37B35C;flex:none}
.shop .row{display:flex;align-items:flex-start;gap:14px;padding:14px 0 0}
.shop .row .ic{display:grid;place-items:center;width:44px;height:44px;border-radius:13px;background:var(--ground);font-size:19px;flex:none}
.shop .row .t{font:600 1rem/1.25 var(--f);display:block}
.shop .row .s{color:var(--ink-2);font:400 14px/1.4 var(--f);margin-top:2px;display:block}
.shop .next{position:absolute;right:18px;bottom:18px;display:grid;place-items:center;width:64px;height:64px;
            border-radius:50%;background:var(--ink);color:#fff;font-size:22px}

/* ---- onboarding ---- */
.scrim{position:fixed;inset:0;z-index:80;background:rgba(17,17,17,.42);display:none}
.scrim.on{display:block}
.card-sheet{position:absolute;left:0;right:0;bottom:0;max-height:94dvh;overflow-y:auto;background:var(--ground);
            border-radius:26px 26px 0 0;padding:34px 24px calc(30px + env(safe-area-inset-bottom))}
@media(min-width:520px){.card-sheet{max-width:480px;margin:0 auto}}
.steps{display:grid;gap:32px;margin:32px 0 28px;text-align:center;justify-items:center}
.steps .ic{font-size:32px}
.steps .t{font:700 1.125rem/1.2 var(--f);margin-top:12px}
.steps .s{color:var(--ink-2);margin-top:6px;max-width:27ch}

/* ---- menu ---- */
.stickhead{position:sticky;top:0;z-index:40}
.topbar{background:var(--ink);color:#fff;padding:calc(14px + env(safe-area-inset-top)) 16px 14px}
.mode-pill{display:flex;align-items:center;gap:10px;margin:0 auto;width:max-content;background:var(--white);
           color:var(--ink);border-radius:999px;padding:10px 18px;font:600 1rem/1 var(--f)}
.topbar .line2{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px}
.topbar .where{flex:1;text-align:center;font:600 .9375rem/1.25 var(--f)}
.tabs{display:flex;gap:26px;overflow-x:auto;background:var(--ground);
      padding:14px 20px 0;border-bottom:1px solid var(--line);scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs button{flex:none;padding:0 0 13px;font:600 1.0625rem/1 var(--f);color:var(--ink-3);border-bottom:3px solid transparent}
.tabs button.on{color:var(--ink);border-bottom-color:var(--ink)}
.sect{padding:28px 20px 4px;scroll-margin-top:var(--stick,150px)}
.rail{display:flex;gap:16px;overflow-x:auto;padding:18px 20px 8px;align-items:flex-start;
      scroll-padding-left:20px;scrollbar-width:none;scroll-snap-type:x mandatory}
.rail::-webkit-scrollbar{display:none}
.rail .r{flex:0 0 84%;scroll-snap-align:start;text-align:left}
.rail .r .shot{border-radius:14px;aspect-ratio:16/11;overflow:hidden;background:var(--stone)}
.rail .r .shot img{width:100%;height:100%;object-fit:cover}
.rail .r .nm{font:700 1rem/1.2 var(--f);text-transform:uppercase;letter-spacing:-.012em;margin-top:12px;display:block}
.rail .r .ds{color:var(--ink-2);font:400 15px/1.4 var(--f);margin-top:5px;display:block}
.rail .r .pr{font:700 1.0625rem/1 var(--f);margin-top:9px;display:block;font-variant-numeric:tabular-nums}
.hr{height:1px;background:var(--line);margin:26px 20px 0}
.dishes{display:flex;flex-direction:column;gap:26px;padding:18px 20px 0}
.dish{border-radius:20px;overflow:hidden;background:var(--white);box-shadow:0 1px 3px rgba(17,17,17,.06);
      text-align:left;width:100%;display:block;padding:0}
.dish:active{transform:scale(.99);transition:transform 90ms}
.dish .shot{position:relative;aspect-ratio:16/10;background:var(--stone);overflow:hidden}
.dish .shot img{width:100%;height:100%;object-fit:cover}
.noshot{display:grid;place-items:center;width:100%;height:100%;background:var(--stone);padding:0 26px;text-align:center}
.noshot b{font:800 clamp(1.05rem,5.4vw,1.55rem)/1.14 var(--f);text-transform:uppercase;letter-spacing:-.02em;text-wrap:balance}
.dish .bd{padding:22px 22px 24px}
.dish .nm{font:800 clamp(1.1rem,4.6vw,1.4rem)/1.14 var(--f);text-transform:uppercase;letter-spacing:-.022em;
          text-wrap:balance;display:block}
.dish .ds{color:var(--ink-2);font:400 15.5px/1.45 var(--f);margin-top:8px;display:block}
.dish .ft{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:22px}
.dish .pr{font:700 1.1875rem/1 var(--f);font-variant-numeric:tabular-nums}
/* A dish with no photograph is a card of WORDS, not a card with a hole in it. Its name carries the
   card, so it is set a little larger and the whole thing sits tighter — three of them in a row
   should read as a list, not as three failed images.
   These live HERE, in the page the design system is lifted out of, and not appended to the built
   customer-look.css: scripts/sync-online.sh REGENERATES that file from this style block, so an
   edit made there is erased the next time anything syncs. It was, once. (2026-08-26.) */
.dish.nopic .bd{padding:20px 22px 22px}
.dish.nopic .nm{font-size:clamp(1.15rem,4.8vw,1.5rem)}
.rail .r.nopic{display:flex;flex-direction:column;justify-content:center;
               background:var(--white);padding:18px 16px}
.badge{display:grid;place-items:center;min-width:44px;height:44px;padding:0 10px;border-radius:11px;
       border:1.5px solid var(--line-2);color:var(--ink-3);font:600 13px/1 var(--f)}
.dish.off .shot img,.dish.off .nm,.dish.off .ds,.dish.off .pr,.dish.off .noshot b{opacity:.4}
.dish.off{pointer-events:none}

/* ---- item ---- */
.item-hero{position:relative;background:var(--stone);aspect-ratio:1/1;overflow:hidden}
/* The photograph fills the square. Left alone the wrapper is an auto-height div and the photograph
   inside asks for 100% of it — 100% of nothing — so the hero came out empty and, on an item with no
   photograph, the typeset panel collapsed and spilled its name out of the top. */
.item-hero>:last-child{position:absolute;inset:0}
.item-hero .shot{display:block}
.item-hero .shot,.item-hero .shot img{width:100%;height:100%;object-fit:cover}
.item-nav{z-index:2}
.item-nav{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;
          padding:calc(14px + env(safe-area-inset-top)) 18px 0;z-index:2}
.item-nav button{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;
                 background:rgba(255,255,255,.92);font-size:19px}
.item-body{background:var(--white);padding:26px 22px 8px}
.item-body .pr{font:700 1.375rem/1 var(--f);margin-top:12px;font-variant-numeric:tabular-nums}
.item-body .ds{color:var(--ink-2);margin-top:16px}
.item-body .al{color:var(--ink-3);font:400 14.5px/1.5 var(--f);margin-top:14px}
.item-foot{display:flex;align-items:center;justify-content:space-between;padding:20px 0 24px}
.extras{background:var(--ground);padding:30px 20px 0}
.mods{display:grid;grid-template-columns:repeat(3,1fr);gap:24px 12px;margin:20px 0 36px}
.extras h2+.tiny{margin:2px 0 0}
.extras h2{margin-top:6px}
.mod{text-align:center;padding:0}
.mod .ph{height:88px;border-radius:12px;overflow:hidden;background:var(--stone);display:block}
.mod{min-width:0}
.mod .nm{overflow-wrap:anywhere}
.mod .ph img{width:100%;height:100%;object-fit:cover}
.mod .nm{font:400 15px/1.25 var(--f);margin-top:10px;display:block}
.mod .rule{width:22px;height:1.5px;background:var(--line-2);margin:8px auto;display:block}
.mod .pr{font:700 15px/1 var(--f);font-variant-numeric:tabular-nums;display:block}
.mod.on .ph{box-shadow:0 0 0 2.5px var(--green)}
/* Options nobody will ever photograph — sweetness, milk — as filled chips instead of a grid of
   empty tiles. Selection is a solid fill, the same as everywhere else in this system. */
.chips{display:flex;flex-wrap:wrap;gap:10px;margin:20px 0 36px}
.chip{background:var(--white);border-radius:14px;padding:15px 20px;font:600 1rem/1.2 var(--f);
      box-shadow:0 1px 3px rgba(17,17,17,.07);text-align:left}
.chip .d{display:block;font:400 13.5px/1 var(--f);color:var(--ink-3);margin-top:6px;
         font-variant-numeric:tabular-nums}
.chip.on{background:var(--ink);color:#fff;box-shadow:none}
.chip.on .d{color:rgba(255,255,255,.7)}
.tiny.needed{color:var(--warn);font-weight:600}
/* The bar names what it is waiting for; it stays live so that tapping it can take you there. */
.bar.waiting{background:#3A3733}
@keyframes flashgrp{0%,100%{box-shadow:0 0 0 0 rgba(184,121,28,0)}
                    30%{box-shadow:0 0 0 4px rgba(184,121,28,.35)}}
.mods.flash,.chips.flash{animation:flashgrp 1.1s ease 2;border-radius:16px}
@media (prefers-reduced-motion:reduce){.mods.flash,.chips.flash{animation:none;outline:2px solid var(--warn);outline-offset:6px}}
.mod.on .nm,.mod.on .pr{color:var(--green-ink);font-weight:600}
.totalrow{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;padding:30px 0 0;
          border-top:1px solid var(--line);margin-top:30px}
.stepper{display:flex;align-items:center;gap:16px}
.stepper button{width:42px;height:42px;border-radius:50%;border:1.5px solid var(--line-2);display:grid;place-items:center;font-size:20px}
.stepper .n{min-width:58px;padding:9px 12px;border:1.5px solid var(--ink);border-radius:12px;
            font:600 1.0625rem/1 var(--f);text-align:center;font-variant-numeric:tabular-nums}

/* ---- bag ---- */
.nav{display:flex;align-items:center;gap:14px;padding:calc(14px + env(safe-area-inset-top)) 16px 12px;background:var(--ink);color:#fff}
.nav button{display:grid;place-items:center;width:40px;height:40px;font-size:20px}
.nav .t{font:600 1.0625rem/1 var(--f);flex:1;text-align:center;padding-right:40px}
.plain{padding:24px 20px 0}
.lines{list-style:none;margin:0;padding:0 20px}
.lines li{display:flex;gap:14px;padding:20px 0;border-bottom:1px solid var(--line);align-items:flex-start}
.lines .ph{width:74px;height:74px;border-radius:12px;background:var(--stone);overflow:hidden;flex:none}
.lines .ph img{width:100%;height:100%;object-fit:cover}
.lines .g{flex:1;min-width:0}
.lines .n{font:700 1rem/1.25 var(--f);display:block}
.lines .m{color:var(--ink-2);font:400 14px/1.4 var(--f);margin-top:3px;display:block}
.lines .p{font:700 1rem/1 var(--f);font-variant-numeric:tabular-nums;white-space:nowrap}
.qty{display:flex;align-items:center;gap:14px;margin-top:12px}
.qty button{width:30px;height:30px;border-radius:50%;border:1.5px solid var(--line-2);display:grid;place-items:center;font-size:15px}
.qty .n2{font:600 15px/1 var(--f);font-variant-numeric:tabular-nums;min-width:22px;text-align:center}
.tipbox{padding:28px 20px 0}
.tipbox .head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.tipbox .expl{color:var(--ink-2);font:400 15px/1.45 var(--f);margin-top:12px}
.tipbox .expl b{color:var(--ink)}
.tips{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:20px}
.tips button{background:var(--white);border-radius:14px;padding:18px 6px;font:700 1rem/1 var(--f);
             box-shadow:0 1px 3px rgba(17,17,17,.07);font-variant-numeric:tabular-nums}
.tips button.on{background:var(--ink);color:#fff;box-shadow:none}
.notip{width:100%;background:var(--white);border-radius:14px;padding:17px;margin-top:12px;font:600 1rem/1 var(--f);
       box-shadow:0 1px 3px rgba(17,17,17,.07)}
.totline{display:flex;align-items:center;justify-content:space-between;padding:26px 20px;
         border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:26px}
.totline .l{font:700 1.0625rem/1 var(--f)}
.totline .v{font:700 1.25rem/1 var(--f);font-variant-numeric:tabular-nums}
.fold,.check{display:flex;align-items:center;gap:14px;width:100%;padding:22px 20px;
             border-bottom:1px solid var(--line);text-align:left}
.fold .t,.check .t{flex:1;font:600 1rem/1 var(--f)}
.check .box{width:26px;height:26px;border-radius:50%;border:1.5px solid var(--line-2);position:relative;flex:none}
.check.on .box{background:var(--ink);border-color:var(--ink)}
.check.on .box::after{content:"✓";position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:14px}
.foldbody{padding:0 20px 20px}
.field{width:100%;background:var(--white);border:1px solid var(--line);border-radius:14px;padding:16px;margin-top:10px}
.field:focus{outline:0;border-color:var(--ink);box-shadow:0 0 0 3px rgba(17,17,17,.08)}
/* A field that is wrong says so where it is wrong, rather than in a dialog that is dismissed
   before it is read. */
.field.bad{border-color:var(--danger);box-shadow:0 0 0 3px rgba(192,57,43,.10)}
.tiny.err{color:var(--danger);min-height:18px;margin-top:10px;font-weight:600}

/* ---- the tab bar ----------------------------------------------------------
   The site is the app now, so it gets the app convention: a fixed bar of three
   destinations — Order, Halo Points, The cafe. It shows only on TOP-LEVEL screens; the
   moment a flow starts (menu, bag, pay) it yields to that screen's own commit
   bar, because two stacked bottom bars is how a thumb pays for the wrong thing.
   Which screen is current is stamped on <body> by show(). */
/* The bar belongs to the app COLUMN, not the window. Painting it across a wide desktop left a
   white strip floating under a 480px column with the three items adrift in it — so the white is
   the column's width and the rest of the screen keeps the ground. */
.appnav{position:fixed;left:0;right:0;bottom:0;z-index:90;display:none;pointer-events:none}
.appnav .in{
  display:flex;max-width:480px;margin:0 auto;pointer-events:auto;
  background:var(--white);border-top:1px solid var(--line);
  padding:8px 10px calc(8px + env(safe-area-inset-bottom));
}
@media(min-width:520px){
  .appnav .in{border:1px solid var(--line);border-radius:18px 18px 0 0}
}
.appnav a{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;
        text-decoration:none;color:var(--ink-3);font:600 11px/1 var(--f);padding:4px 0;
        border-radius:12px}
/* Line icons, not emoji. Emoji arrive in whatever colour and weight the phone feels like, so
   the selected tab could not actually look selected. */
.appnav a .ic{display:block;width:24px;height:24px}
.appnav a .ic svg{width:100%;height:100%;display:block}
.appnav a.on{color:var(--ink)}
body[data-screen="s-home"] .appnav,
body[data-screen="s-orders"] .appnav{display:block}
/* the screen's own fixed foot steps up out of the tab bar's way */
body[data-screen="s-home"] .foot,
body[data-screen="s-orders"] .foot{bottom:calc(58px + env(safe-area-inset-bottom))}
body[data-screen="s-home"] .pad,
body[data-screen="s-orders"] .pad{height:calc(190px + env(safe-area-inset-bottom))}

/* ---- order tracking, my orders, drawer, scheduling ---- */
.ticketcard{background:var(--white);margin:0 20px;padding:34px 24px 26px;text-align:center;
  /* The torn-receipt edge is theirs, and it is what makes this read as a ticket rather than a card.
     TWO mask layers, and the second one is not optional: the scallop layer is `repeat-x` at 14px
     tall pinned to the bottom, so it covers a 14px strip and NOTHING ELSE — with it alone, every
     pixel above that strip has no mask, which means alpha 0, which means the entire card is
     invisible. It was. The QR payment screen at the table rendered as an empty bone rectangle: no
     amount, no code, no buttons, just the scalloped edge floating where the card should be. Found
     2026-08-26 while adding the save button, and confirmed by removing the mask in the browser and
     watching the whole card appear. The linear-gradient layer paints the rest of the card solid. */
  -webkit-mask:radial-gradient(7px at 7px 100%,#0000 98%,#000) repeat-x 0 100%/16px 14px,
               linear-gradient(#000,#000) no-repeat 0 0/100% calc(100% - 14px);
          mask:radial-gradient(7px at 7px 100%,#0000 98%,#000) repeat-x 0 100%/16px 14px,
               linear-gradient(#000,#000) no-repeat 0 0/100% calc(100% - 14px);
  padding-bottom:40px}
.ticketcard .qrimg{width:min(230px,58vw);height:min(230px,58vw);margin:22px auto 0;image-rendering:pixelated}
.ticketcard .cap{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:14px;
                 font:600 1rem/1 var(--f)}
.chatbtn{display:inline-flex;align-items:center;gap:10px;margin-top:20px;background:rgba(17,17,17,.05);
         border-radius:999px;padding:14px 22px;font:600 1rem/1 var(--f)}
.tl{list-style:none;margin:0;padding:8px 20px 0}
.tl li{display:flex;gap:18px;padding-bottom:30px;position:relative}
.tl li:last-child{padding-bottom:8px}
.tl .bul{width:20px;height:20px;border-radius:50%;border:3px solid var(--line-2);background:var(--white);
         flex:none;margin-top:3px;z-index:1}
.tl li:not(:last-child)::before{content:"";position:absolute;left:9px;top:22px;bottom:0;width:3px;
                                background:var(--line-2)}
.tl li.done .bul{border-color:var(--green);background:var(--green)}
.tl li.done:not(:last-child)::before{background:var(--green)}
.tl .t{font:700 1.0625rem/1.25 var(--f);display:block}
.tl .s{color:var(--ink-2);font:400 15px/1.4 var(--f);margin-top:3px;display:block}
.tl li:not(.done) .t,.tl li:not(.done) .s{color:var(--ink-3)}
.kv{display:flex;gap:16px;padding:20px 20px;border-bottom:1px solid var(--line);align-items:flex-start}
.kv .ic{font-size:20px;width:30px;flex:none}
.kv .k{font:700 1rem/1.25 var(--f);display:block}
.kv .v{color:var(--ink-2);margin-top:3px;display:block}
.sumrow{display:flex;justify-content:space-between;gap:16px;padding:16px 20px;font:400 1rem/1.4 var(--f)}
.sumrow.b{font-weight:700}
.sumrow .mods{display:block;color:var(--ink-3);font-size:14.5px;margin-top:4px}

.ordercard{display:flex;gap:0;background:var(--white);border-radius:16px;overflow:hidden;
           margin:0 20px 16px;box-shadow:0 1px 3px rgba(17,17,17,.06);text-align:left;width:calc(100% - 40px)}
.ordercard .ph{width:42%;background:var(--stone);flex:none}
.ordercard .ph img{width:100%;height:100%;object-fit:cover}
.ordercard .bd{padding:18px 18px;flex:1;min-width:0}
.ordercard .k{font:700 1.0625rem/1.2 var(--f);display:flex;align-items:center;gap:8px}
.ordercard .m{color:var(--ink-3);font:400 14.5px/1.4 var(--f);margin-top:6px;display:block}
.ordercard .w{font:600 1rem/1.35 var(--f);margin-top:8px;display:block}
.state{display:inline-flex;align-items:center;gap:8px;margin-top:12px;border-radius:10px;
       padding:10px 14px;font:700 .9375rem/1 var(--f)}
.state.prog{background:#FDF3D6;color:#8A6212}
.state.done{background:var(--green-soft);color:var(--green-ink)}
.empty{display:grid;justify-items:center;gap:14px;padding:22dvh 30px;text-align:center}
.empty .ic{font-size:34px}
.empty .t{font:700 1.125rem/1.4 var(--f);max-width:22ch}
.empty a{color:#1FA85A;font:700 1.0625rem/1 var(--f);text-decoration:none}

.drawer{position:fixed;inset:0;z-index:120;display:none}
.drawer.on{display:block}
.drawer .sc{position:absolute;inset:0;background:rgba(17,17,17,.42)}
.drawer .pane{position:absolute;left:0;top:0;bottom:0;width:78%;max-width:340px;background:var(--white);
              display:flex;flex-direction:column;overflow-y:auto}
.drawer .who{background:var(--ink);color:#fff;padding:calc(22px + env(safe-area-inset-top)) 20px 22px;
             display:flex;align-items:center;gap:16px}
.drawer .av{width:56px;height:56px;border-radius:50%;background:var(--acid);display:grid;place-items:center;
            font-size:26px;flex:none}
.drawer .who .n{font:800 1.25rem/1 var(--f);text-transform:uppercase;letter-spacing:-.01em}
.drawer .who .s{color:rgba(255,255,255,.7);font:400 14px/1 var(--f);margin-top:5px}
.drawer a,.drawer .mi{display:flex;align-items:center;gap:16px;padding:22px 20px;
                      border-bottom:1px solid var(--line);font:600 1.0625rem/1 var(--f);
                      color:inherit;text-decoration:none;width:100%;text-align:left}
.drawer .mi .ic{font-size:19px;width:26px}
.drawer .x{position:absolute;top:calc(24px + env(safe-area-inset-top));left:calc(78% + 18px);color:#fff;font-size:26px;z-index:2}

.times{max-height:44dvh;overflow-y:auto;scroll-snap-type:y mandatory;padding:8px 0;
       -webkit-mask:linear-gradient(180deg,#0000,#000 22%,#000 78%,#0000);
               mask:linear-gradient(180deg,#0000,#000 22%,#000 78%,#0000)}
.times button{display:block;width:100%;padding:16px 0;text-align:center;scroll-snap-align:center;
              font:400 1.375rem/1 var(--f);color:var(--ink-3);font-variant-numeric:tabular-nums}
.times button.on{background:rgba(17,17,17,.05);border-radius:14px;color:var(--ink);font-weight:600}

.dlg{position:fixed;inset:0;z-index:130;display:none}
.dlg.on{display:block}
.dlg .sc{position:absolute;inset:0;background:rgba(17,17,17,.35)}
.dlg .card{position:absolute;left:0;right:0;bottom:0;background:var(--ground);border-radius:26px 26px 0 0;
           padding:30px 24px calc(28px + env(safe-area-inset-bottom))}
@media(min-width:520px){.dlg .card{max-width:480px;margin:0 auto}}
.dlg .btns{display:flex;gap:12px;margin-top:28px}
.dlg .btns button{flex:1;border-radius:999px;padding:18px 0;font:600 1.0625rem/1 var(--f)}
.dlg .btns .no{border:1.5px solid var(--ink)}
.dlg .btns .yes{background:var(--ink);color:#fff}

/* ---- pickup / payment / done ---- */
.rows{list-style:none;margin:0;padding:0 20px;border-top:1px solid var(--line)}
.rows li{display:flex;gap:16px;padding:20px 0;border-bottom:1px solid var(--line);align-items:flex-start}
.rows .ic{display:grid;place-items:center;width:44px;height:44px;border-radius:13px;background:var(--ground);font-size:19px;flex:none}
.rows .t{font:700 1.0625rem/1.25 var(--f);display:block}
.rows .s{color:var(--ink-2);font:400 15px/1.45 var(--f);margin-top:4px;display:block}
.edit{display:flex;align-items:center;gap:12px;padding:22px 20px;border-top:1px solid var(--line);
      border-bottom:1px solid var(--line);width:100%;font:600 1.0625rem/1 var(--f);text-align:left;margin-top:26px}
.paymethod{display:flex;align-items:center;gap:16px;padding:20px;background:var(--green-soft);
           border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:14px}
.paymethod .lg{display:grid;place-items:center;width:82px;height:50px;border-radius:10px;
               border:1.5px solid var(--line-2);flex:none;background:#fff;overflow:hidden;padding:6px}
.paymethod .lg img{width:100%;height:100%;object-fit:contain}
.addpay{display:block;width:100%;text-align:center;padding:26px 20px;font:700 1.0625rem/1 var(--f)}
.centre{display:grid;justify-items:center;text-align:center;gap:14px;padding:calc(60px + env(safe-area-inset-top)) 24px 60px}
.qr{width:min(320px,72vw);height:min(320px,72vw);background:#fff;padding:16px;border-radius:20px;
    image-rendering:pixelated;box-shadow:0 1px 3px rgba(17,17,17,.08)}
.code{font:800 2.9rem/1 var(--mono);letter-spacing:.14em}