/* Shared shell for every public page (doc 10 surfaces).
   Tokens + the header, so a customer moving business page → menu → advance orders →
   pay never sees the chrome change under them. Page-specific layout stays local
   to each page; only what must match lives here. Paper & Ink per docs/DESIGN.md. */

:root{
  --paper:#F7F6F3; --card:#FFFFFF; --hair:#E7E5E0;
  --ink:#1C1B19; --ink2:#5F5D57;
  /* ⚠️ NOT the doc's #8F8C85. That measures ~3.1:1 on paper — below AA — and
     iOS darkened it to ~4.9:1 on 12 Jul. The web kept shipping the failing
     value for a month because the fix was made in one token file, not two. */
  --ink3:#6F6C63;
  --accent:#4C51E0;                 /* Indigo — shell accent, never the tenant's */
  /* ⚠️ Semantic state, DESIGN.md §Colour. These existed on iOS only, so the web
     scattered five different reds, two greens and two ambers as bare hexes for
     the same three ideas. Same values as DS.success / DS.warning / DS.danger. */
  --success:#0A7A4B; --warning:#B45309; --danger:#B42318;
  /* ⚠️ TWO brand tokens, and the difference is the whole rule (DESIGN.md §Colour).
     --brand is the venue's RAW hex and belongs on canvases only: heroes, banner
     rows, tile art. --brand-ink is that hex pulled into the legible band
     (L 0.40–0.62 light / 0.62–0.75 dark, chroma capped) and is what every
     control, border, focus ring, badge and brand-coloured word must use.
     Both are set by P360.applyBrand() in shared/brand.js; the -l/-d pair below
     lets CSS pick the band, so a customer who flips dark mode mid-order gets the
     right ink without reloading. The fallbacks keep the page sane before the
     business loads — and identical to the old behaviour if the script is gone. */
  --brand:#111111; --on-brand:#ffffff;   /* set per business at runtime */
  --brand-ink:var(--brand-ink-l,var(--brand));
  --on-brand-ink:var(--on-brand-ink-l,var(--on-brand));
  /* ONE measure for every surface. The business page and the order page used to
     set their own (1000 vs 760) with differently-contained heroes, so the two
     read as separate sites on a wide screen. Everything centres on this. */
  --shell:100%; --gutter:20px;
}
/* --shell is the CHROME width: the hero on every surface, and the content of
   the order surfaces (item grids want the room). It must never be overridden
   per page — that is exactly how the two headers drifted apart on 5 Aug.
   A page whose FEED wants to be narrower says so with its own variable and
   leaves the header alone (see --feed in biz/index.html). */
@media (min-width:720px){ :root{ --shell:880px; --gutter:40px } }
@media (min-width:1100px){ :root{ --shell:1000px } }

/* The shared content measure: same width and gutters as the header's inner box,
   so body text lines up with the business name above it on every page. */
.shell{max-width:var(--shell);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
/* The eyebrow. NINE independent versions of this existed across five pages —
   10.5–12px, tracking .05–.12em, weight 700–800 — so the same idea whispered
   on the venue page and shouted on the tap page. DESIGN.md §Typography: SF Pro
   caps, tracking +0.04–0.08em, weight 700–800.
   ⚠️ No COLOUR here on purpose. An eyebrow is ink3 over paper, Indigo over an
   announcement, brand over a voucher — the caller owns that and only that. */
.caps{font-size:11px;font-weight:800;letter-spacing:.07em;text-transform:uppercase}
@media (prefers-color-scheme: dark){
  :root{ --paper:#161512; --card:#1E1C18; --hair:#2A2722;
         --ink:#ECEAE4; --ink2:#A8A499; --ink3:#8A867B;   /* see the note above */
         --success:#3DBE84; --warning:#E0A34A; --danger:#F2837A;
         --brand-ink:var(--brand-ink-d,var(--brand));
         --on-brand-ink:var(--on-brand-ink-d,var(--on-brand)); }
}

*{box-sizing:border-box;margin:0}
body{font:16px/1.5 -apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,sans-serif;
  background:var(--paper);color:var(--ink);-webkit-font-smoothing:antialiased}
.serif{font-family:ui-serif,"New York",Georgia,serif}
button{font:inherit;border:0;cursor:pointer;background:none;color:inherit}

/* ── the header every surface shares ── */
/* Flat brand (..099): the venue asked for no ramp. Set by the page adding
   `flat` to <html>. The photo scrim over a header image is NOT affected —
   that is legibility, not branding. */
html.flat .hero{background:var(--brand) !important}
.hero{background:linear-gradient(150deg,color-mix(in srgb,var(--brand) 82%,#fff 0%),var(--brand));
  color:var(--on-brand);padding:34px 0 24px}
/* position:relative so .back can float in the hero's top padding without
   occupying flow — the logo/name/blurb start at the SAME y on every surface,
   so hopping business page ↔ menu no longer jolts the header (Vlad, 5 Aug). */
.hero .in{max-width:var(--shell);margin:0 auto;padding:0 var(--gutter);position:relative}
.hero .logo{width:56px;height:56px;border-radius:16px;background:rgba(255,255,255,.22);
  display:flex;align-items:center;justify-content:center;font-size:25px;font-weight:800;
  margin-bottom:12px;overflow:hidden}
.hero .logo img{width:100%;height:100%;object-fit:cover}
.hero h1{font-size:28px;font-weight:700;letter-spacing:-.01em}
.hero p{opacity:.92;font-size:14.5px;margin-top:4px}
/* The tag sits in the hero's BOTTOM slot now (same slot the business page
   fills with its CTA chips), not between logo and name — the two layouts
   used to disagree about where the name started. */
.hero .tag{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.07em;
  text-transform:uppercase;background:rgba(255,255,255,.22);padding:4px 10px;
  border-radius:8px;margin-top:14px}
/* Back to the business page — the way out that the order surfaces were missing. */
.hero .back{position:absolute;top:-26px;left:var(--gutter);display:inline-flex;align-items:center;
  gap:6px;color:inherit;text-decoration:none;font-size:13.5px;font-weight:600;opacity:.9}
/* The account affordance sits opposite the back link, in the same floating
   band — chrome above the business's own name, on every surface. */
.hero .acct{position:absolute;top:-28px;right:var(--gutter);display:inline-flex;align-items:center;
  gap:8px;font-size:13px;font-weight:700}
.hero .acct button{font:inherit;cursor:pointer;border:0;border-radius:9px;padding:6px 12px;
  background:color-mix(in srgb,var(--on-brand) 18%,transparent);color:var(--on-brand)}
.hero .acct .who{opacity:.9;font-weight:600;max-width:38vw;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.hero .back:hover{opacity:1}

@media (min-width:720px){
  .hero{padding:48px 0 34px}
  .hero h1{font-size:38px}
  .hero p{font-size:16px;margin-top:6px}
  .hero .logo{width:70px;height:70px;font-size:31px;border-radius:19px}
}

/* ── the footer every surface shares ── */
.foot{border-top:1px solid var(--hair);margin-top:36px;padding:26px 0 34px;
  background:var(--paper)}
.foot .in{max-width:var(--shell);margin:0 auto;padding:0 var(--gutter);
  display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;
  font-size:13px;color:var(--ink3)}
.foot a{color:var(--ink2);text-decoration:none}
.foot a:hover{text-decoration:underline}
.foot .sep{flex:1}
.foot .pb{white-space:nowrap}
.foot .pb a{font-weight:700;color:var(--ink2)}
@media (max-width:520px){ .foot .in{flex-direction:column;align-items:flex-start;gap:8px}
  .foot .sep{display:none} }

/* Platform notice — one bar at the very top; never covers page content. */
.p360notice{width:100%;color:#fff;font-size:13px;line-height:1.35}
.p360notice .in{max-width:var(--shell);margin:0 auto;padding:9px var(--gutter);
  display:flex;align-items:center;gap:10px}
.p360notice .t{flex:1;font-weight:600}
.p360notice button{background:rgba(255,255,255,.22);color:#fff;border:0;cursor:pointer;
  font:inherit;font-size:12px;font-weight:700;padding:5px 9px;border-radius:8px}
.p360notice .x{background:none;padding:4px 6px;font-size:13px}
.p360noticedlg{border:0;border-radius:14px;padding:22px;max-width:440px;width:calc(100% - 40px);
  color:var(--ink,#1c1b19);background:var(--card,#fff);box-shadow:0 18px 50px rgba(0,0,0,.25)}
.p360noticedlg::backdrop{background:rgba(0,0,0,.35)}
.p360noticedlg h3{margin:0 0 10px;font-size:17px}
.p360noticedlg p{margin:0 0 12px;font-size:14.5px;line-height:1.5;white-space:pre-wrap}
.p360noticedlg .until{color:#6e6e73;font-size:13px}
.p360noticedlg button{width:100%;border:0;cursor:pointer;font:inherit;font-weight:700;
  padding:11px;border-radius:11px;background:var(--brand,#4C51E0);color:var(--on-brand,#fff)}