/* ============================================================
   Tikharo — The Home of Indian Street Food
   Shared design system · site / order app / operator desk
   Maroon #6E1B1B–#8A2A22 · saffron #F2A93C · cream paper
   Fraunces display · Inter body · JetBrains Mono labels
   ============================================================ */

/* ---- fonts (self-hosted, no CDN) --------------------------- */
@font-face { font-family:'Fraunces'; font-style:normal; font-weight:400; font-display:swap; src:url('../fonts/fraunces-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family:'Fraunces'; font-style:italic; font-weight:400; font-display:swap; src:url('../fonts/fraunces-latin-400-italic.woff2') format('woff2'); }
@font-face { font-family:'Fraunces'; font-style:normal; font-weight:600; font-display:swap; src:url('../fonts/fraunces-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family:'Fraunces'; font-style:normal; font-weight:700; font-display:swap; src:url('../fonts/fraunces-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family:'Fraunces'; font-style:normal; font-weight:900; font-display:swap; src:url('../fonts/fraunces-latin-900-normal.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:400; font-display:swap; src:url('../fonts/inter-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:500; font-display:swap; src:url('../fonts/inter-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:600; font-display:swap; src:url('../fonts/inter-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:700; font-display:swap; src:url('../fonts/inter-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:500; font-display:swap; src:url('../fonts/jetbrains-mono-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:600; font-display:swap; src:url('../fonts/jetbrains-mono-latin-600-normal.woff2') format('woff2'); }

/* ---- theme tokens ------------------------------------------ */
:root {
  --font-display:'Fraunces', Georgia, serif;
  --font-body:'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:'JetBrains Mono', ui-monospace, monospace;

  --maroon-deep:#6E1B1B;
  --maroon:#8A2A22;
  --saffron:#F2A93C;
  --saffron-deep:#D98A1F;
  --chutney:#3E7A45;

  --z-nav:50; --z-buddy:80; --z-sheet:90; --z-modal:96; --z-toast:99;

  --radius:14px; --radius-sm:9px;
  --wrap:1160px;
  --ease:cubic-bezier(.22,.61,.36,1);
}
:root, :root[data-theme="light"] {
  --bg:#F7F0E2;
  --bg-raise:#FFFDF6;
  --bg-sink:#EFE5D2;
  --ink:#241412;
  --ink-soft:#5C4038;
  --ink-faint:#8A6A5E;
  --line:rgba(110,27,27,.16);
  --line-strong:rgba(110,27,27,.32);
  --accent:var(--maroon);
  --accent-deep:var(--maroon-deep);
  --accent-ink:#FFF8EC;
  --gold:var(--saffron-deep);
  --card-shadow:0 1px 2px rgba(60,20,10,.06), 0 12px 32px -18px rgba(60,20,10,.25);
  --scrim:rgba(36,20,18,.55);
  color-scheme:light;
}
:root[data-theme="dark"] {
  --bg:#150C0A;
  --bg-raise:#211311;
  --bg-sink:#0F0807;
  --ink:#F2E7D6;
  --ink-soft:#CBAF9E;
  --ink-faint:#96796C;
  --line:rgba(242,169,60,.15);
  --line-strong:rgba(242,169,60,.32);
  --accent:#B0402F;
  --accent-deep:#8A2A22;
  --accent-ink:#FFF3E2;
  --gold:var(--saffron);
  --card-shadow:0 1px 2px rgba(0,0,0,.4), 0 14px 36px -16px rgba(0,0,0,.55);
  --scrim:rgba(8,4,3,.66);
  color-scheme:dark;
}

/* ---- reset & base ------------------------------------------ */
*, *::before, *::after { box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font-body); font-size:16px; line-height:1.6;
  overflow-x:clip; /* clip, NEVER hidden — hidden creates a nested scroll trap */
  min-height:100dvh;
}
[hidden] { display:none !important; }
img, svg, video { max-width:100%; height:auto; }
a { color:var(--accent); text-decoration-thickness:1px; text-underline-offset:3px; }
a:hover { color:var(--accent-deep); }
h1,h2,h3,h4 { font-family:var(--font-display); line-height:1.12; margin:0 0 .5em; font-weight:700; letter-spacing:-.01em; }
h1 { font-size:clamp(2.1rem,5.4vw,3.6rem); font-weight:900; }
h2 { font-size:clamp(1.6rem,3.6vw,2.4rem); }
h3 { font-size:1.22rem; }
p { margin:0 0 1em; }
button { font-family:inherit; }
input, select, textarea {
  font-family:inherit; font-size:16px; /* 16px stops iOS zoom */
  color:var(--ink); background:var(--bg-raise);
  border:1px solid var(--line-strong); border-radius:var(--radius-sm);
  padding:11px 13px; width:100%;
}
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible, a:focus-visible {
  outline:2px solid var(--gold); outline-offset:2px;
}
label { font-weight:600; font-size:.9rem; display:block; margin-bottom:5px; }
::placeholder { color:var(--ink-faint); }

.wrap { max-width:var(--wrap); margin:0 auto; padding:0 clamp(16px, 4vw, 32px); }
.skip-link { position:absolute; left:-9999px; top:0; z-index:100; background:var(--accent); color:var(--accent-ink); padding:10px 16px; border-radius:0 0 10px 0; }
.skip-link:focus { left:0; }

/* kicker — mono label, no decorative dashes */
.kicker {
  font-family:var(--font-mono); font-weight:600; font-size:.74rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--gold);
  display:block; margin-bottom:10px;
}

/* ---- buttons ----------------------------------------------- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-weight:600; font-size:.98rem; line-height:1.2;
  padding:13px 22px; border-radius:999px; border:1px solid transparent;
  cursor:pointer; text-decoration:none; transition:background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease), transform .12s var(--ease);
  min-height:44px;
}
.btn:active { transform:translateY(1px); }
.btn-primary { background:var(--accent); color:var(--accent-ink); }
.btn-primary:hover { background:var(--accent-deep); color:var(--accent-ink); }
.btn-ghost { background:transparent; color:var(--ink); border-color:var(--line-strong); }
.btn-ghost:hover { border-color:var(--accent); color:var(--accent); }
.btn-gold { background:var(--gold); color:#2A1606; }
.btn-gold:hover { filter:brightness(1.06); }
.btn-sm { padding:8px 14px; min-height:36px; font-size:.88rem; }
.btn[disabled] { opacity:.45; cursor:not-allowed; }

/* ---- header ------------------------------------------------ */
.hdr {
  position:sticky; top:0; z-index:var(--z-nav);
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.hdr-in { display:flex; align-items:center; gap:18px; min-height:64px; }
.brand { display:inline-flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); }
.brand-mark { width:34px; height:34px; flex:none; }
.brand-name { font-family:var(--font-display); font-weight:900; font-size:1.42rem; letter-spacing:-.01em; }
.brand-name .dot { color:var(--gold); }
.hdr-nav { display:flex; align-items:center; gap:4px; margin-left:auto; }
.hdr-nav a {
  text-decoration:none; color:var(--ink-soft); font-weight:600; font-size:.94rem;
  padding:9px 13px; border-radius:999px;
}
.hdr-nav a:hover, .hdr-nav a[aria-current="page"] { color:var(--accent); background:color-mix(in srgb, var(--accent) 9%, transparent); }
.hdr-cta { margin-left:6px; }
.theme-btn, .nav-burger {
  background:transparent; border:1px solid var(--line-strong); color:var(--ink);
  border-radius:999px; width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer; flex:none;
}
.theme-btn:hover, .nav-burger:hover { border-color:var(--accent); color:var(--accent); }
.theme-btn .ico-moon, :root[data-theme="dark"] .theme-btn .ico-sun { display:none; }
:root[data-theme="dark"] .theme-btn .ico-moon { display:block; }
.nav-burger { display:none; }

/* order-app header: many controls — compress and shed on phones */
.hdr-app .hdr-ctl { margin-left:auto; display:flex; align-items:center; gap:8px; min-width:0; }
.hdr-app #account-btn { max-width:110px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:inline-block; line-height:20px; }
@media (max-width:640px) {
  .hdr-app .brand-name { font-size:1.12rem; }
  .hdr-app .brand-mark { width:28px; height:28px; }
  .hdr-app #orders-btn { display:none; }   /* still reachable: Account → My orders */
  .hdr-app .btn-sm { padding:8px 11px; font-size:.82rem; }
  .hdr-app .hdr-ctl { gap:5px; }
  .hdr-app #account-btn { max-width:84px; }
}
@media (max-width:360px) {
  .hdr-app .brand-name { display:none; }   /* the mark alone identifies us */
}

@media (max-width:860px) {
  .nav-burger { display:inline-flex; }
  .hdr-nav {
    display:none; position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:2px;
    background:var(--bg-raise); border-bottom:1px solid var(--line);
    padding:10px clamp(16px,4vw,32px) 16px; box-shadow:var(--card-shadow);
  }
  .hdr-nav.open { display:flex; }
  .hdr-nav a { padding:12px 14px; }
  .hdr-cta { margin:8px 0 0; }
}

/* ---- hero -------------------------------------------------- */
.hero { position:relative; padding:clamp(56px,9vw,110px) 0 clamp(44px,7vw,84px); overflow:clip; }
.hero-grid { display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(28px,5vw,64px); align-items:center; }
@media (max-width:900px) { .hero-grid { grid-template-columns:1fr; } }
.hero h1 .em { font-style:italic; font-weight:400; color:var(--accent); }
.hero-lede { font-size:1.12rem; color:var(--ink-soft); max-width:34em; }
.hero-ctas { display:flex; flex-wrap:wrap; gap:12px; margin-top:22px; }
.hero-facts { display:flex; flex-wrap:wrap; gap:10px 22px; margin-top:26px; font-size:.9rem; color:var(--ink-soft); }
.hero-facts strong { color:var(--ink); }

/* thali panel — pure CSS food board, no stock photography */
.thali { position:relative; aspect-ratio:1/1; max-width:440px; margin-inline:auto; width:100%; }
.thali-plate {
  position:absolute; inset:0; border-radius:50%;
  background:radial-gradient(circle at 32% 28%, color-mix(in srgb, var(--gold) 26%, var(--bg-raise)), var(--bg-raise) 58%);
  border:1px solid var(--line-strong); box-shadow:var(--card-shadow);
}
.thali-item {
  position:absolute; display:grid; place-items:center; text-align:center;
  border-radius:50%; border:1px solid var(--line-strong);
  background:var(--bg); font-family:var(--font-mono); font-size:.64rem; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft); padding:8px;
}
.thali-item b { display:block; font-family:var(--font-display); font-size:1.5rem; color:var(--accent); letter-spacing:0; text-transform:none; }

/* ---- sections ---------------------------------------------- */
.sec { padding:clamp(48px,7vw,92px) 0; }
.sec-tint { background:var(--bg-sink); border-block:1px solid var(--line); }
.sec-ink { background:var(--maroon-deep); color:#F7EBDD; }
.sec-ink .kicker { color:var(--saffron); }
.sec-ink h2, .sec-ink h3 { color:#FFF6E9; }
.sec-head { max-width:640px; margin-bottom:clamp(26px,4vw,44px); }
.sec-head p { color:var(--ink-soft); }
.sec-ink .sec-head p { color:#E4CDB4; }

.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.grid-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
@media (max-width:900px) { .grid-3 { grid-template-columns:repeat(2,1fr); } .grid-2 { grid-template-columns:1fr; } }
@media (max-width:600px) { .grid-3 { grid-template-columns:1fr; } }

.card {
  background:var(--bg-raise); border:1px solid var(--line); border-radius:var(--radius);
  padding:24px; box-shadow:var(--card-shadow);
}
.card h3 { margin-top:2px; }
.card p:last-child { margin-bottom:0; }
.card .kicker { margin-bottom:6px; }

/* ---- badges & chips ---------------------------------------- */
.veg-dot {
  display:inline-grid; place-items:center; width:16px; height:16px; flex:none;
  border:1.5px solid var(--chutney); border-radius:4px; vertical-align:-2px;
}
.veg-dot::after { content:""; width:7px; height:7px; border-radius:50%; background:var(--chutney); }
.chip {
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--font-mono); font-size:.68rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  border:1px solid var(--line-strong); border-radius:999px; padding:3px 10px; color:var(--ink-soft);
}
.chip-jain { color:var(--chutney); border-color:color-mix(in srgb, var(--chutney) 55%, transparent); }
.chip-gold { color:var(--saffron-deep); border-color:color-mix(in srgb, var(--saffron) 65%, transparent); }
:root[data-theme="dark"] .chip-gold { color:var(--saffron); }
.chip-spice { color:var(--maroon); border-color:color-mix(in srgb, var(--maroon) 45%, transparent); }
:root[data-theme="dark"] .chip-spice { color:#E27B5A; }

.promise-band {
  display:flex; flex-wrap:wrap; gap:10px 14px; align-items:center;
  border:1px solid var(--line-strong); border-radius:var(--radius); padding:14px 18px;
  background:color-mix(in srgb, var(--chutney) 7%, var(--bg-raise));
}
.promise-band strong { font-family:var(--font-display); }

/* ---- menu cards -------------------------------------------- */
.menu-toolbar { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:22px; }
.menu-toolbar .menu-search { max-width:280px; }
.cat-rail { display:flex; gap:8px; overflow-x:auto; padding-bottom:6px; scrollbar-width:thin; touch-action:pan-x; }
.cat-pill {
  flex:none; border:1px solid var(--line-strong); background:var(--bg-raise); color:var(--ink-soft);
  border-radius:999px; padding:8px 16px; font-weight:600; font-size:.9rem; cursor:pointer; white-space:nowrap;
}
.cat-pill[aria-pressed="true"] { background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
.menu-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:16px; }
.mcard {
  display:flex; flex-direction:column; gap:8px;
  background:var(--bg-raise); border:1px solid var(--line); border-radius:var(--radius);
  padding:18px; box-shadow:var(--card-shadow); position:relative;
}
.mcard-top { display:flex; align-items:flex-start; gap:10px; }
.mcard h3 { font-size:1.06rem; margin:0; flex:1; }
.mcard-price { font-family:var(--font-mono); font-weight:600; color:var(--accent); white-space:nowrap; }
.mcard-desc { font-size:.88rem; color:var(--ink-soft); margin:0; flex:1; }
.mcard-meta { display:flex; flex-wrap:wrap; gap:6px; }
.mcard-cta { display:flex; gap:8px; align-items:center; margin-top:4px; }
.mcard .qty { display:inline-flex; align-items:center; gap:2px; border:1px solid var(--line-strong); border-radius:999px; }
.qty button { background:none; border:0; width:34px; height:34px; font-size:1.05rem; cursor:pointer; color:var(--accent); border-radius:50%; }
.qty .qty-n { min-width:26px; text-align:center; font-weight:700; font-family:var(--font-mono); }

/* ---- item detail / ordering richness ----------------------- */
.mcard { overflow:hidden; }
.mcard-art { position:absolute; right:-6px; bottom:-8px; width:74px; height:74px; opacity:.10; pointer-events:none; color:var(--accent); }
.mcard-art svg { width:100%; height:100%; stroke:currentColor; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.mcard.clickable { cursor:pointer; transition:transform .16s var(--ease), border-color .16s var(--ease); }
.mcard.clickable:hover { transform:translateY(-3px); border-color:var(--accent); }
.spice-meter { display:inline-flex; gap:3px; align-items:center; }
.spice-meter i { width:8px; height:8px; border-radius:50%; border:1.4px solid color-mix(in srgb, var(--maroon) 50%, transparent); }
.spice-meter i.on { background:var(--maroon); border-color:var(--maroon); }
:root[data-theme="dark"] .spice-meter i.on { background:#E27B5A; border-color:#E27B5A; }
:root[data-theme="dark"] .spice-meter i { border-color:rgba(226,123,90,.5); }
.item-hero { display:flex; align-items:center; gap:16px; margin-bottom:12px; }
.item-hero .cat-ico { width:72px; height:72px; flex:none; display:grid; place-items:center; background:color-mix(in srgb, var(--gold) 14%, var(--bg-sink)); border:1px solid var(--line-strong); border-radius:18px; padding:12px; }
.item-hero h3 { margin:0 0 2px; font-size:1.35rem; }
.item-hero .mcard-price { font-size:1.05rem; }

/* your usuals — one-tap reorder rail */
.usuals-rail { display:flex; gap:10px; overflow-x:auto; padding-bottom:6px; touch-action:pan-x; scrollbar-width:thin; }
.usual-card {
  flex:none; display:flex; align-items:center; gap:10px; cursor:pointer;
  background:var(--bg-raise); border:1px solid var(--line-strong); border-radius:999px;
  padding:8px 16px 8px 10px; font:inherit; color:inherit; min-height:48px;
}
.usual-card:hover { border-color:var(--accent); color:var(--accent); }
.usual-card .cat-ico { width:30px; height:30px; }
.usual-card b { font-size:.92rem; white-space:nowrap; }
.usual-card small { display:block; font-family:var(--font-mono); font-size:.7rem; color:var(--ink-faint); }

/* order status stepper */
.status-steps { display:flex; align-items:center; gap:0; margin:10px 0 4px; }
.status-steps .st { display:flex; align-items:center; flex:1; min-width:0; }
.status-steps .st .dot {
  width:22px; height:22px; border-radius:50%; flex:none; display:grid; place-items:center;
  border:2px solid var(--line-strong); background:var(--bg-raise); color:transparent; font-size:.7rem;
}
.status-steps .st .bar { flex:1; height:2px; background:var(--line-strong); }
.status-steps .st:last-child .bar { display:none; }
.status-steps .st.done .dot { background:var(--chutney); border-color:var(--chutney); color:#fff; }
.status-steps .st.done .bar { background:var(--chutney); }
.status-steps .st.now .dot { border-color:var(--gold); background:var(--gold); color:#2A1606; }
html.anim .status-steps .st.now .dot { animation:pulse 1.8s var(--ease) infinite; }
.status-labels { display:flex; justify-content:space-between; font-family:var(--font-mono); font-size:.62rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:8px; }
.order-card.s-cancelled .status-steps { display:none; }

/* ---- footer ------------------------------------------------ */
.ftr { background:var(--maroon-deep); color:#E9D3BC; margin-top:clamp(48px,7vw,90px); }
.ftr a { color:#F7E7CF; }
.ftr-grid { display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:26px; padding:clamp(36px,5vw,56px) 0; }
@media (max-width:860px) { .ftr-grid { grid-template-columns:1fr 1fr; } }
@media (max-width:520px) { .ftr-grid { grid-template-columns:1fr; } }
.ftr h4 { color:#FFF4E4; font-size:1rem; margin-bottom:10px; }
.ftr ul { list-style:none; margin:0; padding:0; display:grid; gap:8px; font-size:.92rem; }
.ftr .brand-name { color:#FFF4E4; }
.ftr-legal {
  border-top:1px solid rgba(242,169,60,.25); padding:18px 0 26px;
  font-size:.8rem; color:#C9A98B; display:flex; flex-wrap:wrap; gap:8px 20px; justify-content:space-between;
  padding-bottom:calc(26px + env(safe-area-inset-bottom));
}
.ftr-legal a { color:#E4C9A6; }

/* ---- sheets / modals / toasts (portaled to body) ----------- */
.sheet-veil {
  position:fixed; inset:0; z-index:var(--z-sheet); background:var(--scrim);
  opacity:0; pointer-events:none; transition:opacity .22s var(--ease);
}
.sheet-veil.on { opacity:1; pointer-events:auto; }
.sheet {
  position:fixed; z-index:var(--z-modal); inset-inline:0; bottom:0;
  max-height:88dvh; overflow:auto; -webkit-overflow-scrolling:touch;
  background:var(--bg-raise); border-radius:18px 18px 0 0; border:1px solid var(--line);
  transform:translateY(105%); transition:transform .26s var(--ease);
  padding:22px clamp(16px,4vw,28px) calc(24px + env(safe-area-inset-bottom));
  box-shadow:0 -18px 50px -20px rgba(0,0,0,.4);
}
.sheet.on { transform:translateY(0); }
@media (min-width:720px) {
  .sheet { inset:0; margin:auto; max-width:560px; max-height:min(86dvh,720px); height:max-content; border-radius:18px; transform:translateY(12px); opacity:0; pointer-events:none; }
  .sheet.on { transform:none; opacity:1; pointer-events:auto; }
}
.sheet-head { display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.sheet-head h3 { margin:0; flex:1; }
.sheet-x { background:none; border:1px solid var(--line-strong); border-radius:50%; width:36px; height:36px; cursor:pointer; color:var(--ink); font-size:1rem; }
.toast-rack { position:fixed; z-index:var(--z-toast); bottom:calc(18px + env(safe-area-inset-bottom)); left:50%; transform:translateX(-50%); display:grid; gap:8px; width:min(92vw,420px); }
.toast {
  background:var(--ink); color:var(--bg); border-radius:12px; padding:12px 16px;
  font-size:.92rem; font-weight:500; box-shadow:var(--card-shadow); text-align:center;
}

/* ---- Buddy (deterministic concierge) ----------------------- */
.buddy-fab {
  position:fixed; z-index:var(--z-buddy); right:18px; bottom:calc(18px + env(safe-area-inset-bottom));
  width:56px; height:56px; border-radius:50%; border:0; cursor:pointer;
  background:var(--accent); color:var(--accent-ink); box-shadow:var(--card-shadow);
  display:grid; place-items:center;
}
.buddy-fab:hover { background:var(--accent-deep); }
.buddy-fab .n {
  position:absolute; top:-4px; right:-4px; background:var(--gold); color:#2A1606;
  font-size:.7rem; font-weight:700; border-radius:999px; min-width:20px; height:20px;
  display:grid; place-items:center; padding:0 5px; font-family:var(--font-mono);
}
.buddy-panel {
  position:fixed; z-index:var(--z-modal); right:14px; bottom:calc(84px + env(safe-area-inset-bottom));
  width:min(94vw,380px); height:min(72dvh,560px);
  background:var(--bg-raise); border:1px solid var(--line-strong); border-radius:16px;
  box-shadow:var(--card-shadow); display:flex; flex-direction:column; overflow:hidden;
  opacity:0; pointer-events:none; transform:translateY(10px); transition:opacity .2s var(--ease), transform .2s var(--ease);
}
.buddy-panel.on { opacity:1; pointer-events:auto; transform:none; }
@media (max-width:480px) { .buddy-panel { right:3vw; left:3vw; width:auto; } }
.buddy-head { display:flex; align-items:center; gap:10px; padding:13px 16px; background:var(--maroon-deep); color:#FFF4E4; }
.buddy-head .tt { font-family:var(--font-display); font-weight:700; }
.buddy-head .st { font-size:.72rem; color:#E4C9A6; font-family:var(--font-mono); letter-spacing:.06em; }
.buddy-head button { margin-left:auto; background:none; border:0; color:#F7E7CF; cursor:pointer; font-size:1.1rem; padding:4px 8px; min-width:40px; min-height:40px; }
.buddy-log { flex:1; overflow-y:auto; padding:14px; display:grid; gap:10px; align-content:start; }
.bmsg { max-width:86%; padding:10px 13px; border-radius:14px; font-size:.9rem; line-height:1.5; }
.bmsg.bot { background:var(--bg-sink); border:1px solid var(--line); border-bottom-left-radius:4px; justify-self:start; white-space:pre-line; }
.bmsg.me { background:var(--accent); color:var(--accent-ink); border-bottom-right-radius:4px; justify-self:end; }
.bmsg .bq { display:inline-block; margin:6px 6px 0 0; }
.buddy-quick { display:flex; flex-wrap:wrap; gap:6px; padding:0 14px 10px; }
.buddy-quick button, .bmsg .bq {
  background:none; border:1px solid var(--line-strong); color:var(--accent);
  border-radius:999px; padding:7px 13px; font-size:.8rem; font-weight:600; cursor:pointer;
  min-height:34px;
}
.buddy-quick button:hover, .bmsg .bq:hover { border-color:var(--accent); }
.buddy-form { display:flex; gap:8px; padding:10px 12px calc(12px + env(safe-area-inset-bottom)); border-top:1px solid var(--line); }
.buddy-form input { flex:1; }
.buddy-form button { flex:none; }

/* ---- topbar ------------------------------------------------ */
.topbar { background:var(--maroon-deep); color:#F7E7CF; font-size:.85rem; }
.topbar a { color:#FFD9A0; text-decoration:none; font-weight:600; }
.topbar a:hover { color:#FFF4E4; text-decoration:underline; }
.topbar-in { display:flex; align-items:center; gap:16px; min-height:38px; padding-block:4px; }
.topbar .tel { margin-left:auto; display:flex; gap:14px; flex:none; }
@media (max-width:760px) {
  .topbar .tel { display:none; }
  /* one tidy line on phones, never a tall wrapped band */
  .topbar-in a { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; flex:1; }
}

/* ---- ticker (menu marquee; pauses for reduced motion) ------ */
.ticker { overflow:hidden; border-block:1px solid var(--line-strong); background:var(--bg-raise); }
.ticker-track { display:flex; gap:0; width:max-content; }
.ticker-seq { display:flex; align-items:center; gap:34px; padding:11px 17px; white-space:nowrap; }
.ticker-seq span { font-family:var(--font-mono); font-size:.78rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); display:inline-flex; align-items:center; gap:34px; }
.ticker-seq span::after { content:"·"; color:var(--gold); font-size:1.1rem; }
html.anim .ticker-track { animation:tick 36s linear infinite; }
@keyframes tick { to { transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce) { .ticker-track { animation:none !important; } }

/* ---- seven panis rail (the signature) ---------------------- */
.pani-rail { display:grid; grid-template-columns:repeat(7,1fr); gap:12px; }
@media (max-width:860px) { .pani-rail { grid-template-columns:repeat(4,1fr); } }
@media (max-width:560px) { .pani-rail { grid-template-columns:repeat(2,1fr); } }
.pani-cup {
  background:var(--bg-raise); border:1px solid var(--line); border-radius:var(--radius);
  padding:16px 12px 14px; text-align:center; cursor:pointer; position:relative;
  transition:transform .18s var(--ease), border-color .18s var(--ease);
}
.pani-cup:hover, .pani-cup[aria-pressed="true"] { transform:translateY(-3px); border-color:var(--pani, var(--gold)); }
.pani-cup .cup {
  width:44px; height:40px; margin:0 auto 10px; position:relative;
  border:2px solid var(--line-strong); border-top:0; border-radius:0 0 14px 14px;
  background:linear-gradient(to top, var(--pani, var(--gold)) 78%, transparent 78%);
}
.pani-cup .cup::after { /* floating boondi */
  content:""; position:absolute; left:50%; top:26%; width:7px; height:7px; border-radius:50%;
  background:color-mix(in srgb, var(--pani, var(--gold)) 55%, #fff); transform:translateX(-50%);
}
.pani-cup b { display:block; font-family:var(--font-display); font-size:.98rem; line-height:1.2; }
.pani-cup small { font-family:var(--font-mono); font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); }
.pani-note { min-height:54px; margin-top:16px; }
.pani-note .note-strip { border-style:solid; }

/* ---- scalloped divider (a row of puris) -------------------- */
.scallop { height:16px; background:radial-gradient(circle at 12px -4px, var(--bg-sink) 13px, transparent 14px) repeat-x; background-size:24px 16px; }
.scallop-flip { transform:scaleY(-1); }

/* ---- category line-art icons ------------------------------- */
.cat-ico { width:46px; height:46px; color:var(--accent); flex:none; }
.cat-ico svg { width:100%; height:100%; stroke:currentColor; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.cat-card { display:flex; gap:16px; align-items:flex-start; text-decoration:none; color:inherit; }
.mh-ico { display:inline-flex; vertical-align:-10px; margin-right:10px; }

/* ---- live counter band ------------------------------------- */
.live-dot { display:inline-block; width:10px; height:10px; border-radius:50%; background:var(--saffron); box-shadow:0 0 0 0 rgba(242,169,60,.5); }
html.anim .live-dot { animation:pulse 1.8s var(--ease) infinite; }
@keyframes pulse { 70% { box-shadow:0 0 0 12px rgba(242,169,60,0); } 100% { box-shadow:0 0 0 0 rgba(242,169,60,0); } }
@media (prefers-reduced-motion:reduce) { .live-dot { animation:none !important; } }

/* ---- hero scene float (gated, additive) -------------------- */
html.anim .hero-scene { animation:heroFloat 7s ease-in-out infinite alternate; }
@keyframes heroFloat { from { transform:translateY(0); } to { transform:translateY(-10px); } }
@media (prefers-reduced-motion:reduce) { .hero-scene { animation:none !important; } }
.hero-grain { position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:radial-gradient(rgba(110,27,27,.05) 1px, transparent 1.4px);
  background-size:22px 22px; }
:root[data-theme="dark"] .hero-grain { background-image:radial-gradient(rgba(242,169,60,.05) 1px, transparent 1.4px); }

/* ---- rating / proof band ----------------------------------- */
.proof-band { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
@media (max-width:860px) { .proof-band { grid-template-columns:1fr; } }
.proof-band .v { font-family:var(--font-display); font-weight:900; font-size:2rem; color:var(--accent); }
.proof-band .stars { color:var(--saffron-deep); letter-spacing:2px; font-size:1.05rem; }
:root[data-theme="dark"] .proof-band .stars { color:var(--saffron); }

/* ---- social buttons ---------------------------------------- */
.soc-row { display:flex; gap:10px; }
.soc-btn { display:inline-grid; place-items:center; width:38px; height:38px; border-radius:50%;
  border:1px solid var(--line-strong); color:var(--ink); }
.soc-btn:hover { border-color:var(--accent); color:var(--accent); }
.ftr .soc-btn { border-color:rgba(242,169,60,.35); color:#F7E7CF; }
.ftr .soc-btn:hover { border-color:var(--saffron); color:#FFF4E4; }

/* ---- reveals: visible by default; JS opts in --------------- */
.reveal { opacity:1; transform:none; }
html.reveal-ready .reveal { opacity:0; transform:translateY(16px); transition:opacity .5s var(--ease), transform .5s var(--ease); }
html.reveal-ready .reveal.in { opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  html.reveal-ready .reveal { opacity:1; transform:none; transition:none; }
  *, *::before, *::after { animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

/* ---- desk (operator console) ------------------------------- */
.desk-body { background:var(--bg-sink); }
/* gate-first: only a valid session reveals. One owned visibility channel —
   :not(.authed) + !important so no later display rule can defeat the gate. */
body:not(.authed) .authhide { display:none !important; }
body.authed .gate-only { display:none !important; }
.gate-card { max-width:420px; margin:clamp(40px,10vh,110px) auto; }
.desk-shell { display:grid; grid-template-columns:230px 1fr; min-height:100dvh; }
@media (max-width:900px) { .desk-shell { grid-template-columns:1fr; } }
.desk-side {
  background:var(--maroon-deep); color:#E9D3BC; padding:20px 14px;
  display:flex; flex-direction:column; gap:4px;
}
@media (max-width:900px) {
  .desk-side { flex-direction:row; overflow-x:auto; align-items:center; position:sticky; top:0; z-index:var(--z-nav); padding:10px 12px; }
}
.desk-side .brand { color:#FFF4E4; margin-bottom:14px; }
@media (max-width:900px) { .desk-side .brand { margin:0 10px 0 0; } .desk-side .brand-name { font-size:1.1rem; } }
.desk-tab {
  display:flex; align-items:center; gap:10px; text-align:left;
  background:none; border:0; color:#E4C9A6; font:inherit; font-weight:600; font-size:.94rem;
  padding:11px 13px; border-radius:10px; cursor:pointer; white-space:nowrap;
}
.desk-tab:hover { background:rgba(242,169,60,.12); color:#FFF4E4; }
.desk-tab[aria-current="true"] { background:var(--saffron); color:#2A1606; }
.desk-tab .n { margin-left:auto; background:var(--saffron); color:#2A1606; font-family:var(--font-mono); font-size:.7rem; font-weight:700; min-width:20px; height:20px; border-radius:999px; display:grid; place-items:center; padding:0 5px; }
.desk-tab[aria-current="true"] .n { background:var(--maroon-deep); color:#FFF4E4; }
.desk-main { padding:clamp(18px,3vw,34px); min-width:0; }
.desk-bar { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-bottom:20px; }
.desk-bar h2 { margin:0; font-size:1.5rem; flex:1; }
.stat-tiles { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin-bottom:22px; }
.stat-tile { background:var(--bg-raise); border:1px solid var(--line); border-radius:var(--radius-sm); padding:14px 16px; }
.stat-tile .v { font-family:var(--font-display); font-weight:900; font-size:1.7rem; color:var(--accent); line-height:1.1; }
.stat-tile .l { font-family:var(--font-mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); }
.desk-table { width:100%; border-collapse:collapse; background:var(--bg-raise); border:1px solid var(--line); border-radius:var(--radius-sm); overflow:hidden; font-size:.92rem; }
.desk-table th { font-family:var(--font-mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); text-align:left; padding:10px 12px; border-bottom:1px solid var(--line-strong); }
.desk-table td { padding:11px 12px; border-bottom:1px solid var(--line); vertical-align:top; }
.desk-table tr:last-child td { border-bottom:0; }
.table-scroll { overflow-x:auto; border-radius:var(--radius-sm); }
.pill { display:inline-block; font-family:var(--font-mono); font-size:.7rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; border-radius:999px; padding:3px 10px; }
.pill-new { background:color-mix(in srgb, var(--saffron) 25%, transparent); color:var(--saffron-deep); }
:root[data-theme="dark"] .pill-new { color:var(--saffron); }
.pill-preparing { background:color-mix(in srgb, #4FA3D9 22%, transparent); color:#2C6E9E; }
:root[data-theme="dark"] .pill-preparing { color:#7FC3EE; }
.pill-ready { background:color-mix(in srgb, var(--chutney) 22%, transparent); color:var(--chutney); }
:root[data-theme="dark"] .pill-ready { color:#7FBF88; }
.pill-completed, .pill-booked { background:color-mix(in srgb, var(--ink) 10%, transparent); color:var(--ink-soft); }
.pill-cancelled, .pill-declined { background:color-mix(in srgb, var(--maroon) 16%, transparent); color:var(--maroon); }
:root[data-theme="dark"] .pill-cancelled, :root[data-theme="dark"] .pill-declined { color:#E27B5A; }
.pill-quoted { background:color-mix(in srgb, #4FA3D9 22%, transparent); color:#2C6E9E; }
:root[data-theme="dark"] .pill-quoted { color:#7FC3EE; }
.order-card { background:var(--bg-raise); border:1px solid var(--line); border-left:4px solid var(--gold); border-radius:var(--radius-sm); padding:14px 16px; margin-bottom:12px; }
.order-card.s-preparing { border-left-color:#4FA3D9; }
.order-card.s-ready { border-left-color:var(--chutney); }
.order-card.s-completed, .order-card.s-cancelled { border-left-color:var(--line-strong); opacity:.75; }
.order-card .oc-top { display:flex; flex-wrap:wrap; gap:8px 14px; align-items:center; }
.order-card .oc-code { font-family:var(--font-mono); font-weight:700; color:var(--accent); }
.order-card ul { margin:8px 0; padding-left:18px; font-size:.9rem; }
.order-card .oc-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.chat-split { display:grid; grid-template-columns:280px 1fr; gap:16px; min-height:420px; }
@media (max-width:900px) { .chat-split { grid-template-columns:1fr; } }
.chat-list { background:var(--bg-raise); border:1px solid var(--line); border-radius:var(--radius-sm); overflow:auto; max-height:60dvh; }
.chat-list button { display:block; width:100%; text-align:left; background:none; border:0; border-bottom:1px solid var(--line); padding:12px 14px; cursor:pointer; color:var(--ink); font:inherit; }
.chat-list button.sel { background:color-mix(in srgb, var(--accent) 10%, transparent); }
.chat-pane { display:flex; flex-direction:column; background:var(--bg-raise); border:1px solid var(--line); border-radius:var(--radius-sm); min-height:420px; }
.chat-msgs { flex:1; overflow-y:auto; padding:14px; display:grid; gap:8px; align-content:start; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.form-grid .full { grid-column:1 / -1; }
@media (max-width:640px) { .form-grid { grid-template-columns:1fr; } }
.note-strip { border:1px dashed var(--line-strong); border-radius:var(--radius-sm); padding:12px 16px; font-size:.88rem; color:var(--ink-soft); background:color-mix(in srgb, var(--gold) 6%, transparent); }
.demo-flag { font-family:var(--font-mono); font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:var(--saffron-deep); border:1px solid color-mix(in srgb, var(--saffron) 60%, transparent); border-radius:999px; padding:3px 10px; }
:root[data-theme="dark"] .demo-flag { color:var(--saffron); }