/* Brew Blossoms ordering — the shared look for the phone, kitchen, counter and staff pages.
   Every page loads the three brand fonts in its <head> (same families as the café website):
     <link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Fraunces:ital,opsz,wght@0,9..144,400..700;1,9..144,400..700&family=Instrument+Sans:wght@400;500;600;700&display=swap">
   Fraunces = headings and anything with warmth; Instrument Sans = everything you read or tap; DM Mono = codes, bill numbers, clocks. */
:root {
  --night: #180a10; --berry: #2f121d; --berry-2: #411a29; --berry-3: #57243a;
  --rose: #ff4d8d; --rose-deep: #e0306f; --rose-soft: #ffa3c2; --blush: #ffd9e4; --cream: #fffaf4; --ink: #2e160f;
  --text: var(--cream); --text-2: #ecccd4; --text-3: #b8929d;
  --line: rgba(255, 255, 255, .12); --line-2: rgba(255, 255, 255, .24);
  --ok: #3ecf8e; --ok-ink: #06301e; --warn: #ffc93c; --warn-ink: #3b2c00; --bad: #ff5a5a;
  --serif: "Fraunces", Georgia, "Iowan Old Style", serif;
  --sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "DM Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --r-s: .6rem; --r-m: 1rem; --r-l: 1.4rem; --r-pill: 99px;
  --shadow: 0 10px 30px rgba(0, 0, 0, .35); --glow: 0 8px 26px rgba(255, 77, 141, .38);
  --ease: cubic-bezier(.2, .8, .2, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; min-height: 100dvh; color: var(--text); font: 400 16px/1.5 var(--sans); -webkit-font-smoothing: antialiased;
  background: radial-gradient(120% 55% at 50% -12%, #4c1a30 0%, rgba(76, 26, 48, 0) 62%) fixed, var(--night); }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
a { color: var(--rose-soft); }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--rose-soft); outline-offset: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }

/* the wordmark, cut from the café logo */
.mark { display: block; aspect-ratio: 2036 / 488; background: linear-gradient(#ff7fac, var(--rose)); -webkit-mask: url("img/wordmark.webp") center / contain no-repeat; mask: url("img/wordmark.webp") center / contain no-repeat; }

/* type helpers */
.eyebrow { font: 600 .75rem/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--rose-soft); }
.title { font: 500 1.6rem/1.15 var(--serif); letter-spacing: -.01em; }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.muted { color: var(--text-2); } .faint { color: var(--text-3); } .rose { color: var(--rose-soft); }

/* buttons: .btn is the rose call to action. Add --ghost / --quiet / --ok / --warn / --bad for meaning, --s / --big for size, --block for full width. */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; min-height: 2.75rem; padding: .7em 1.3em; border-radius: var(--r-pill); font-weight: 600; line-height: 1.15; text-align: center; text-decoration: none;
  background: linear-gradient(#ff5e99, var(--rose)); color: #fff; box-shadow: var(--glow); transition: transform .12s var(--ease), box-shadow .2s, opacity .2s, background-color .2s, border-color .2s; }
.btn:active { transform: scale(.97); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .45; cursor: default; box-shadow: none; }
.btn--ghost { background: transparent; border: 1.5px solid var(--line-2); color: var(--text); box-shadow: none; }
.btn--quiet { background: rgba(255, 255, 255, .08); color: var(--text); box-shadow: none; }
.btn--ok { background: var(--ok); color: var(--ok-ink); box-shadow: 0 8px 24px rgba(62, 207, 142, .28); }
.btn--warn { background: var(--warn); color: var(--warn-ink); box-shadow: 0 8px 24px rgba(255, 201, 60, .25); }
.btn--bad { background: transparent; border: 1.5px solid rgba(255, 90, 90, .6); color: #ff9c9c; box-shadow: none; }
.btn--s { min-height: 2.25rem; padding: .45em .95em; font-size: .9rem; }
.btn--big { min-height: 3.4rem; font-size: 1.12rem; padding: .9em 1.6em; }
.btn--block { display: flex; width: 100%; }
@media (hover: hover) { .btn:not(:disabled):hover { filter: brightness(1.08); } .btn--ghost:not(:disabled):hover, .btn--quiet:not(:disabled):hover { background: rgba(255, 255, 255, .12); filter: none; } }

/* surfaces */
.card { background: linear-gradient(rgba(255, 255, 255, .035), rgba(255, 255, 255, 0)) var(--berry); border: 1px solid var(--line); border-radius: var(--r-l); }
.card--lift { box-shadow: var(--shadow); }
.rule { height: 1px; background: var(--line); border: 0; margin: 0; }

/* small labels: .pill is neutral; add --rose / --ok / --warn / --bad */
.pill { display: inline-flex; align-items: center; gap: .35em; padding: .22em .7em; border-radius: var(--r-pill); font: 600 .72rem/1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; background: rgba(255, 255, 255, .1); color: var(--text-2); }
.pill--rose { background: rgba(255, 77, 141, .2); color: var(--rose-soft); }
.pill--ok { background: rgba(62, 207, 142, .18); color: #8ff0c2; }
.pill--warn { background: rgba(255, 201, 60, .18); color: #ffdf8a; }
.pill--bad { background: rgba(255, 90, 90, .18); color: #ffb0b0; }

/* choice chips (category tabs, table picker): <button class="chip" aria-pressed="true"> */
.chip { display: inline-flex; align-items: center; gap: .45em; min-height: 2.5rem; padding: .5em 1em; border-radius: var(--r-pill); border: 1.5px solid var(--line-2); font-weight: 500; white-space: nowrap; color: var(--text); background: transparent; text-decoration: none; transition: background-color .2s, border-color .2s, color .2s; }
.chip[aria-pressed="true"], .chip[aria-current="true"], .chip.on { background: var(--rose); border-color: var(--rose); color: #fff; font-weight: 600; }

/* the Indian veg / non-veg mark */
.veg { display: inline-block; width: .85em; height: .85em; border: 2px solid #2fbf71; border-radius: 3px; position: relative; flex: none; }
.veg::after { content: ""; position: absolute; inset: 20%; border-radius: 50%; background: #2fbf71; }
.veg--non { border-color: #e2574c; } .veg--non::after { background: #e2574c; }

/* form fields */
.field, input[type="text"], input[type="tel"], input[type="password"], input[type="number"], input[type="search"], input:not([type]), select, textarea {
  width: 100%; min-height: 3rem; padding: .8rem 1rem; border-radius: var(--r-m); border: 1.5px solid var(--line-2); background: rgba(0, 0, 0, .28); color: var(--text); transition: border-color .2s, box-shadow .2s; appearance: none; }
.field:focus, input:focus, select:focus, textarea:focus { outline: none; border-color: var(--rose); box-shadow: 0 0 0 4px rgba(255, 77, 141, .22); }
input::placeholder, textarea::placeholder { color: var(--text-3); }
label.check { display: flex; align-items: flex-start; gap: .7rem; cursor: pointer; }
input[type="checkbox"], input[type="radio"] { appearance: none; flex: none; width: 1.4rem; height: 1.4rem; min-height: 0; margin: .05rem 0 0; padding: 0; border: 1.5px solid var(--line-2); border-radius: .4rem; background: rgba(0, 0, 0, .28); display: grid; place-content: center; cursor: pointer; }
input[type="radio"] { border-radius: 50%; }
input[type="checkbox"]:checked, input[type="radio"]:checked { background: var(--rose); border-color: var(--rose); }
input[type="checkbox"]:checked::after { content: ""; width: .7rem; height: .4rem; border: solid #fff; border-width: 0 0 2.5px 2.5px; transform: translateY(-1px) rotate(-45deg); }
input[type="radio"]:checked::after { content: ""; width: .55rem; height: .55rem; border-radius: 50%; background: #fff; }
/* an on/off switch: <input type="checkbox" class="switch"> */
input[type="checkbox"].switch { width: 2.9rem; height: 1.7rem; border-radius: 99px; background: rgba(255, 255, 255, .16); border: 0; position: relative; transition: background-color .2s; }
input[type="checkbox"].switch::after { content: ""; position: absolute; left: .2rem; top: .2rem; width: 1.3rem; height: 1.3rem; border: 0; border-radius: 50%; background: #fff; transform: none; transition: translate .2s var(--ease); }
input[type="checkbox"].switch:checked { background: var(--ok); }
input[type="checkbox"].switch:checked::after { translate: 1.2rem 0; width: 1.3rem; height: 1.3rem; }

/* quantity stepper: <div class="qty"><button aria-label="One less">−</button><b>2</b><button aria-label="One more">+</button></div> */
.qty { display: inline-flex; align-items: center; border-radius: var(--r-pill); background: var(--rose); color: #fff; font-weight: 700; box-shadow: var(--glow); }
.qty button { width: 2.5rem; height: 2.5rem; font-size: 1.25rem; line-height: 1; display: grid; place-items: center; border-radius: 50%; }
.qty b { min-width: 1.4rem; text-align: center; font-variant-numeric: tabular-nums; }

/* messages */
.toast { position: fixed; left: 50%; bottom: calc(5.5rem + env(safe-area-inset-bottom)); translate: -50% 0; z-index: 60; width: max-content; max-width: min(92vw, 30rem); padding: .8rem 1.1rem; border-radius: var(--r-m); background: var(--cream); color: var(--ink); font-weight: 600; text-align: center; box-shadow: 0 12px 40px rgba(0, 0, 0, .5); animation: toast-in .3s var(--ease); }
@keyframes toast-in { from { opacity: 0; translate: -50% 12px; } }
.empty { padding: 2rem 1.2rem; text-align: center; color: var(--text-3); border: 1.5px dashed var(--line-2); border-radius: var(--r-l); }
.note { padding: .7rem .9rem; border-radius: var(--r-m); background: rgba(255, 201, 60, .12); color: #ffe09a; border: 1px solid rgba(255, 201, 60, .3); }

/* who is signed in (common.js whoChip): a quiet chip with a small menu behind it */
.who { position: relative; flex: none; }
.who__btn { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.5rem; max-width: 12rem; padding: .25rem .8rem .25rem .3rem; border-radius: var(--r-pill); border: 1px solid var(--line-2); background: rgba(255, 255, 255, .05); color: var(--text); font-weight: 600; font-size: .92rem; transition: background-color .2s, border-color .2s; }
.who__btn i { flex: none; width: 1.9rem; height: 1.9rem; border-radius: 50%; display: grid; place-items: center; background: var(--rose); color: #fff; font: 700 .78rem/1 var(--sans); font-style: normal; letter-spacing: .02em; }
.who__btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.who__btn[aria-expanded="true"] { background: rgba(255, 255, 255, .12); border-color: var(--rose-soft); }
.who__menu { position: absolute; right: 0; top: calc(100% + .5rem); z-index: 70; min-width: 14rem; padding: .5rem; border-radius: var(--r-m); background: var(--berry-2); border: 1px solid var(--line-2); box-shadow: var(--shadow); animation: toast-in .18s var(--ease); translate: 0 0; }
.who__menu p { padding: .5rem .7rem .7rem; margin-bottom: .3rem; border-bottom: 1px solid var(--line); display: grid; gap: .1rem; }
.who__menu p span { font-size: .82rem; color: var(--text-3); }
.who__menu a, .who__menu button { display: flex; align-items: center; width: 100%; min-height: 2.75rem; padding: .5rem .7rem; border-radius: var(--r-s); color: var(--text); text-decoration: none; text-align: left; font-weight: 500; }
.who__menu a:hover, .who__menu button:hover, .who__menu a:focus-visible, .who__menu button:focus-visible { background: rgba(255, 255, 255, .1); }
.who__menu [data-out] { color: #ff9c9c; }
@media (max-width: 480px) { .who__btn { padding-right: .3rem; } .who__btn span { display: none; } }