/* Duaa's Cafe theme, from the Duaa's brand kit (tokens.css): toasted cream page, espresso
   blocks, orange for the loud moments only. Three kit colours; every other surface is mixed
   from them. Orange is for large type, shapes and icons, never small text (contrast 3.5–3.8:1).
   Fonts are self-hosted from /fonts under the SIL Open Font License (licences sit beside them). */
@font-face { font-family: "Mouse Memoirs"; src: url("/fonts/mousememoirs-400-normal-e27ce94.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Erica One"; src: url("/fonts/ericaone-400-normal-8366609.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist"; src: url("/fonts/geist-400-normal-f7530ad.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist"; src: url("/fonts/geist-500-normal-8766a2c.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist"; src: url("/fonts/geist-600-normal-21610cb.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist"; src: url("/fonts/geist-700-normal-d1bb941.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/fonts/inter-400-normal-5afd609.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }

:root {
  /* Brand kit colours */
  --brand-cream: #f5e6ce;
  --brand-orange: #d9470b;
  --brand-espresso: #2b1b14;

  /* App roles, mapped onto the kit */
  --color-espresso: var(--brand-espresso);   /* buttons, dark blocks */
  --color-mocha: #43332a;                    /* hover on dark (kit surface-dark-raised) */
  --color-roast: var(--brand-espresso);      /* text */
  --color-crema: var(--brand-cream);         /* page, text on dark */
  --color-bean: #57483d;                     /* muted text (kit ink-muted) */
  --color-oat: #e7d8c1;                      /* cards, pills, tracks (kit surface-card) */
  --color-warm: #f2d3b7;                     /* soft notes and badges (kit surface-warm) */
  --color-orange: var(--brand-orange);       /* large type, shapes, icons, rings */
  --color-orange-pressed: #bf400c;
  --color-card: #e7d8c1;
  --color-field: var(--brand-cream);         /* inputs sit cream on the card */
  --color-line: #d5c6b0;
  --color-on-dark-muted: #d8c4a8;            /* cream mixed toward espresso for secondary text on dark */
  --color-focus-ring: rgba(217, 71, 11, 0.4);

  /* Older role names the pages still use, kept on kit colours */
  --color-honey: var(--color-orange);
  --color-cta-hover: var(--color-orange-pressed);
  --color-ember: var(--color-orange);
  --color-terracotta: var(--color-orange);
  --color-sage: var(--color-espresso);
  --color-sage-mist: var(--color-warm);
  --color-error-bg: var(--color-warm);

  --font-display: "Mouse Memoirs", "Arial Black", sans-serif;
  --font-logo: "Erica One", "Arial Black", sans-serif;
  --font-sans: "Geist", Arial, sans-serif;
  --font-circle: "Inter", Arial, sans-serif;

  --text-caption: 12px;
  --text-body-sm: 14px;
  --text-body: 16px;
  --text-body-lg: 20px;
  --text-heading: 30px;
  --text-heading-lg: 52px;
  --text-display: 72px;
  --tracking-display: -0.02em;

  --radius-pill: 999px;
  --radius-cards: 32px;
  --radius-small: 4px;
  --radius-circle: 9999px;
  --radius-sticker: 12px;

  --shadow-card: 0 4px 24px rgba(43, 27, 20, 0.12);
  --shadow-float: 0 10px 30px rgba(43, 27, 20, 0.25);

  --duration-ui: 240ms;
  --easing-ui: cubic-bezier(0.2, 0, 0, 1);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--color-crema);
  color: var(--color-roast);
  font: 400 var(--text-body)/1.38 var(--font-sans);
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--color-espresso); }
:focus-visible { outline: 3px solid var(--color-honey); outline-offset: 2px; }

/* ---------- Layout ---------- */
.nav {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  height: 64px; padding: 0 20px;
  background: var(--color-crema);
  border-bottom: 1px solid var(--color-line);
}
.wordmark { font: 400 26px/1 var(--font-logo); letter-spacing: -0.03em; color: var(--color-espresso); text-decoration: none; }
@media (max-width: 560px) {
  .nav .btn { min-height: 36px !important; padding: 0 12px !important; font-size: 12px; }
  .nav .row { gap: 6px; flex-wrap: nowrap; }
  #staff-name, .wordmark small { display: none; }
  .wordmark { font-size: 22px; }
}
.wordmark small { font: 500 11px/1 var(--font-sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-bean); margin-left: 8px; }
.wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 32px 16px 80px; }
.wrap.narrow { max-width: 480px; }
.stack { display: grid; gap: 16px; }
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.spread { justify-content: space-between; }
.grid-2 { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .grid-2 { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } }
@media (min-width: 900px) { .wrap { padding: 40px 40px 100px; } }
[hidden] { display: none !important; }

/* ---------- Type ---------- */
.eyebrow { font: 500 var(--text-caption)/1.33 var(--font-sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-bean); margin: 0 0 10px; }
.display { font: 400 clamp(52px, 12vw, var(--text-display))/0.9 var(--font-display); letter-spacing: var(--tracking-display); margin: 0; }
.h1 { font: 400 clamp(40px, 9vw, var(--text-heading-lg))/0.92 var(--font-display); letter-spacing: var(--tracking-display); margin: 0; }
.h2 { font: 400 var(--text-heading)/0.95 var(--font-display); letter-spacing: -0.01em; margin: 0; }
.label { font: 500 var(--text-body-sm)/1.25 var(--font-sans); letter-spacing: 0.03em; text-transform: uppercase; }
.muted { color: var(--color-bean); }
.small { font-size: var(--text-body-sm); }
.num { font-variant-numeric: tabular-nums; }

/* ---------- Cards ---------- */
.card { background: var(--color-card); border-radius: var(--radius-cards); padding: 24px; border: 0; }
.card.dark { background: var(--color-espresso); color: var(--color-crema); border-color: transparent; }
.card.dark .muted, .card.dark .eyebrow { color: var(--color-on-dark-muted); }
.card.tint { background: var(--color-oat); border-color: transparent; }
.card.sage { background: var(--color-sage-mist); border-color: transparent; }
.card-pad-lg { padding: 32px; }

/* ---------- Buttons ---------- */
.btn {
  appearance: none; border: 1px solid transparent; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 24px; border-radius: var(--radius-pill); white-space: nowrap;
  font: 600 15px/1 var(--font-sans); letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none;
  background: var(--color-espresso); color: var(--color-crema);
  transition: background-color var(--duration-ui) var(--easing-ui), color var(--duration-ui) var(--easing-ui), box-shadow var(--duration-ui) var(--easing-ui), opacity var(--duration-ui);
}
.btn:hover { background: var(--color-mocha); box-shadow: 0 0 0 2px var(--color-orange); }
/* Main action on dark areas: cream ground, espresso label (small labels never sit on orange). */
.btn.cta { background: var(--color-crema); color: var(--color-espresso); }
.btn.cta:hover { background: var(--color-crema); box-shadow: 0 0 0 2px var(--color-orange); }
.btn.ghost { background: transparent; color: var(--color-espresso); border-color: var(--color-espresso); }
.btn.ghost:hover { background: var(--color-oat); }
.btn.light { background: var(--color-crema); color: var(--color-espresso); }
.btn.danger { background: transparent; color: var(--color-espresso); border-color: var(--color-orange); }
.btn.block { width: 100%; }
.btn.lg { min-height: 60px; font-size: var(--text-body); }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; }
.linkish { background: none; border: 0; padding: 0; color: var(--color-espresso); font: inherit; text-decoration: underline; cursor: pointer; }

/* ---------- Forms ---------- */
.field { display: grid; gap: 6px; }
.field > span:not(.pw) { font: 600 var(--text-caption)/1 var(--font-sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-bean); }
.input, select.input, textarea.input {
  width: 100%; min-height: 50px; padding: 12px 16px; border-radius: 14px;
  border: 1px solid var(--color-line); background: var(--color-field); color: var(--color-roast); font: inherit;
}
.input:focus { outline: none; border-color: var(--color-espresso); box-shadow: 0 0 0 3px var(--color-focus-ring); }
.check { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; font-size: var(--text-body-sm); color: var(--color-bean); }
.check input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--color-espresso); }
.tabs { display: inline-flex; justify-self: start; background: var(--color-crema); border-radius: var(--radius-pill); padding: 4px; gap: 4px;
  box-shadow: inset 0 2px 4px rgba(43, 24, 16, 0.14), inset 0 -1px 0 rgba(255, 255, 255, 0.6); }
.tabs button { border: 0; background: transparent; min-height: 40px; padding: 0 18px; border-radius: var(--radius-pill); font: 600 13px/1 var(--font-sans); letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-bean); cursor: pointer; }
.tabs button { transition: background 180ms, color 180ms, box-shadow 180ms; }
.tabs button[aria-selected="true"] { background: var(--color-espresso); color: var(--color-crema);
  box-shadow: 0 3px 8px rgba(43, 24, 16, 0.28), 0 1px 2px rgba(43, 24, 16, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.14); }

/* ---------- Status ---------- */
.notice { border-radius: 14px; padding: 12px 16px; font-size: var(--text-body-sm); }
.notice.error { background: var(--color-warm); color: var(--color-espresso); box-shadow: inset 4px 0 0 var(--color-orange); }
.notice.ok { background: var(--color-warm); color: var(--color-espresso); }
.notice.warn { background: var(--color-oat); color: var(--color-espresso); }
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 20px; font: 600 12px/1 var(--font-sans); letter-spacing: 0.05em; text-transform: uppercase; background: var(--color-oat); color: var(--color-espresso); }
.badge.honey { background: var(--color-warm); color: var(--color-espresso); }
.badge.sage { background: var(--color-warm); color: var(--color-espresso); }
.badge.rust { background: var(--color-warm); color: var(--color-espresso); box-shadow: inset 0 0 0 1.5px var(--color-orange); }
.skeleton { background: linear-gradient(90deg, var(--color-oat) 0%, var(--color-warm) 50%, var(--color-oat) 100%); background-size: 200% 100%; animation: shimmer 1.4s infinite linear; border-radius: 12px; min-height: 18px; }
@keyframes shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .skeleton { animation: none; } * { transition: none !important; } }

/* ---------- Punch card ---------- */
.punches { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; max-width: 380px; }
.punch {
  aspect-ratio: 1; border-radius: var(--radius-circle);
  border: 1.5px dashed rgba(246, 239, 227, 0.4);
  display: grid; place-items: center; color: transparent;
}
.punch.filled { background: var(--color-orange); border: 0; color: var(--color-crema); }
.punch svg { width: 52%; height: 52%; }
.card:not(.dark) .punch { border-color: var(--color-line); }
.reward-pill { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-radius: 20px; background: var(--color-warm); color: var(--color-espresso); }

/* ---------- History ---------- */
.history { list-style: none; margin: 0; padding: 0; }
.history li { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 14px 0; border-top: 1px solid var(--color-line); }
.history li:first-child { border-top: 0; }
.history .meta { font-size: var(--text-caption); letter-spacing: 0.03em; color: var(--color-bean); }

/* ---------- Staff counter ---------- */
.menu-grid { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 1100px) { .menu-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.menu-btn {
  min-height: 76px; border-radius: 20px; border: 1px solid var(--color-line); background: var(--color-field);
  text-align: left; padding: 12px 14px; cursor: pointer; display: grid; align-content: space-between; justify-items: start; gap: 8px; font: inherit; color: inherit;
  transition: background-color var(--duration-ui) var(--easing-ui), border-color var(--duration-ui), transform 120ms ease;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
/* hover only where there is a mouse: on phones a tapped item stayed highlighted */
@media (hover: hover) { .menu-btn:hover { background: var(--color-warm); border-color: var(--color-espresso); } }
.menu-btn:active { transform: scale(0.96); background: var(--color-warm); }
.menu-btn .name { font: 600 15px/1.2 var(--font-sans); letter-spacing: 0.02em; text-transform: uppercase; overflow-wrap: anywhere; }
/* does this item add a punch? solid tag = yes, outlined = no */
.tag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 20px; font: 600 11px/1 var(--font-sans); letter-spacing: 0.06em; text-transform: uppercase; }
.tag--yes { background: var(--color-orange); color: var(--color-crema); }
.tag--yes::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.tag--no { color: var(--color-bean); box-shadow: inset 0 0 0 1.5px var(--color-line); }
.qty { display: inline-flex; gap: 6px; align-items: center; justify-self: start; }
.qty button { width: 46px; height: 46px; border-radius: var(--radius-circle); border: 1px solid var(--color-line); background: var(--color-field); font: 600 15px/1 var(--font-sans); cursor: pointer; color: var(--color-espresso); }
.qty button[aria-pressed="true"] { background: var(--color-espresso); color: var(--color-crema); border-color: var(--color-espresso); }
.cart-line { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; padding: 12px 0; border-top: 1px solid rgba(246, 239, 227, 0.18); }
.icon-btn { width: 40px; height: 40px; border-radius: var(--radius-circle); border: 1px solid rgba(246, 239, 227, 0.35); background: transparent; color: inherit; cursor: pointer; font-size: 18px; }
video.scanner { width: 100%; border-radius: 16px; background: var(--color-roast); aspect-ratio: 4 / 3; object-fit: cover; display: block; }
/* aiming square: where the code reads best */
.scanner-wrap { position: relative; }
.scanner-frame { position: absolute; inset: 50% auto auto 50%; width: 58%; aspect-ratio: 1; transform: translate(-50%, -50%); border: 3px solid rgba(246, 239, 227, .9); border-radius: 18px; box-shadow: 0 0 0 999px rgba(0, 0, 0, .28); pointer-events: none; }
.scanner-wrap { overflow: hidden; border-radius: 16px; }
/* after a scan: staff confirm the coffee before it is added */
.scan-confirm { background: rgba(246, 239, 227, .1); border: 1px solid rgba(246, 239, 227, .28); border-radius: 18px; padding: 16px; gap: 12px; }

/* ---------- Tables (owner) ---------- */
.stats { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .stats { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.stat .value { font: 400 44px/0.9 var(--font-display); letter-spacing: -0.02em; }
.table { width: 100%; border-collapse: collapse; font-size: var(--text-body-sm); }
.table th { text-align: left; font: 500 11px/1 var(--font-sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-bean); padding: 10px 8px; border-bottom: 1px solid var(--color-line); }
.table td { padding: 12px 8px; border-bottom: 1px solid var(--color-line); vertical-align: middle; }
.scroll-x { overflow-x: auto; }

.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); max-width: calc(100% - 32px); z-index: 50; }

@media print {
  .nav, .no-print { display: none !important; }
  body { background: #fff; }
}

/* ---------- Customer app shell: floating bottom tab bar ---------- */
body.app .app-main { padding-bottom: 140px; }
body.app .toast { bottom: 112px; }
.tabbar {
  position: fixed; z-index: 20;
  left: 50%; transform: translateX(-50%);
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  width: min(440px, calc(100% - 32px)); height: 64px;
  display: grid; grid-template-columns: repeat(5, 1fr); align-items: center; justify-items: center;
  background: var(--color-roast); border-radius: 22px;
  box-shadow: 0 10px 30px rgba(31, 20, 13, 0.25);
}
.tabbar a {
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: 16px;
  color: var(--color-on-dark-muted); transition: color var(--duration-ui) var(--easing-ui), background var(--duration-ui) var(--easing-ui);
}
.tabbar svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tabbar a:hover { color: var(--color-crema); }
.tabbar a[aria-current="page"] { color: var(--color-honey); }
.tabbar a[aria-current="page"]:not(.tab-plus)::after {
  content: ''; position: absolute; bottom: 8px; width: 4px; height: 4px; border-radius: 50%; background: var(--color-honey);
}
.tabbar a { position: relative; }
.tabbar .tab-plus {
  width: 64px; height: 64px; border-radius: 50%; margin-top: -30px;
  background: var(--color-honey); color: var(--color-roast);
  border: 5px solid var(--color-crema); box-shadow: 0 6px 16px rgba(31, 20, 13, 0.2);
}
.tabbar .tab-plus svg { width: 26px; height: 26px; stroke-width: 2.2; }
.tabbar .tab-plus { color: var(--color-crema); }
.tabbar .tab-plus:hover, .tabbar .tab-plus[aria-current="page"] { background: var(--color-orange-pressed); color: var(--color-crema); }

.stat-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.stat { display: grid; gap: 4px; padding: 18px 20px; }
.stat .num { font: 400 44px/0.9 var(--font-display); letter-spacing: -0.02em; color: var(--color-espresso); }
.message { display: grid; gap: 4px; padding: 16px 20px; }
.message.accent { background: var(--color-espresso); color: var(--color-crema); box-shadow: inset 5px 0 0 var(--color-orange); }
.message.accent .muted { color: var(--color-on-dark-muted); }
.details { display: grid; gap: 14px; margin: 0; }
.details div { display: grid; grid-template-columns: 9em 1fr; gap: 12px; }
.details dt { color: var(--color-bean); font-size: var(--text-body-sm); }
.details dd { margin: 0; overflow-wrap: anywhere; }

/* Coffee-cup tab: steam drifts gently; a tap squashes and springs the button. */
.tabbar .tab-plus .steam path { animation: steam 2.4s ease-in-out infinite; }
.tabbar .tab-plus .steam path + path { animation-delay: 0.6s; }
@keyframes steam {
  0%, 100% { opacity: 0.35; transform: translateY(1px); }
  50% { opacity: 1; transform: translateY(-1px); }
}
.tabbar .tab-plus.bounce { animation: cup-bounce 700ms cubic-bezier(0.28, 0.84, 0.42, 1); }
.tabbar .tab-plus.bounce svg { animation: cup-tilt 700ms ease-out; }
.tabbar .tab-plus.bounce .steam path { animation: steam-puff 700ms ease-out; }
@keyframes cup-bounce {
  0%   { transform: translateY(0) scale(1, 1); }
  15%  { transform: translateY(2px) scale(1.18, 0.82); }
  40%  { transform: translateY(-16px) scale(0.92, 1.1); }
  60%  { transform: translateY(0) scale(1.08, 0.92); }
  78%  { transform: translateY(-4px) scale(0.98, 1.03); }
  100% { transform: translateY(0) scale(1, 1); }
}
@keyframes cup-tilt {
  0%, 100% { transform: rotate(0); }
  30% { transform: rotate(-12deg); }
  55% { transform: rotate(9deg); }
  75% { transform: rotate(-4deg); }
}
@keyframes steam-puff {
  0% { opacity: 1; transform: translateY(0); }
  60% { opacity: 0; transform: translateY(-5px); }
  100% { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .tabbar .tab-plus .steam path, .tabbar .tab-plus.bounce, .tabbar .tab-plus.bounce svg { animation: none; }
}

/* ---------- Card-complete celebration ---------- */
#confetti { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; pointer-events: none; z-index: 60; }
.celebrate {
  width: min(400px, calc(100% - 32px)); padding: 32px 28px 24px; border: 0; border-radius: var(--radius-cards);
  background: var(--color-card); color: var(--color-roast); text-align: center;
  box-shadow: 0 24px 60px rgba(31, 20, 13, 0.3); overflow: visible;
}
.celebrate::backdrop { background: rgba(31, 20, 13, 0.45); }
.celebrate[open] { animation: pop-in 520ms cubic-bezier(0.34, 1.56, 0.64, 1); }
.celebrate .h1 { margin: 4px 0 12px; }
.celebrate p { margin: 0 0 12px; }
.celebrate form { margin-top: 20px; }
.celebrate-cup {
  display: grid; place-items: center; width: 76px; height: 76px; margin: -70px auto 14px; border-radius: 50%;
  background: var(--color-orange); border: 6px solid var(--color-card); font-size: 34px;
  animation: cup-bounce 900ms 300ms cubic-bezier(0.28, 0.84, 0.42, 1) both;
}
@keyframes pop-in {
  0% { opacity: 0; transform: scale(0.6) translateY(30px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .celebrate[open], .celebrate-cup { animation: none; }
}

/* Customer app without the top bar: content starts at the safe area. */
body.app .app-main { padding-top: calc(28px + env(safe-area-inset-top, 0px)); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 380px) { .field-row { grid-template-columns: 1fr; } .details div { grid-template-columns: 1fr; gap: 2px; } }

/* No zoom or jump while typing on phones: 16px inputs stop iOS focus-zoom, and the floating
   tab bar steps aside while the keyboard is up so it can't ride up over the form. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
.input, select.input, textarea.input { font-size: 16px; }
body.app { overscroll-behavior-y: none; }
body.app:has(.app-main input:focus, .app-main textarea:focus, .app-main select:focus) .tabbar { display: none; }
body.app .input { scroll-margin-block: 96px; }
.reward-icon { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--color-espresso); color: var(--color-orange); }
.reward-icon svg { width: 22px; height: 22px; }

/* ---------- Password fields: show/hide eye, forgot link beside the label ---------- */
.field-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.field-head .linkish { font: 500 13px/1 var(--font-sans); letter-spacing: 0; text-transform: none; text-underline-offset: 3px; }
.pw { position: relative; display: block; }
.pw .input { width: 100%; padding-right: 52px; }
.pw-toggle {
  position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
  display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%;
  background: transparent; color: var(--color-bean); cursor: pointer;
}
.pw-toggle:hover { background: var(--color-oat); color: var(--color-espresso); }
.pw-toggle:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--color-focus-ring); }
.pw-toggle svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pw-toggle[aria-pressed="true"] .slash { display: none; }

/* ---------- Join page hero: dark band, two-tone headline, cup, wavy edge that drops into the login card ---------- */
.join-hero {
  --wave: clamp(70px, 13vw, 180px);
  position: relative; overflow-x: clip; display: grid; justify-items: center; text-align: center;
  background: var(--color-espresso); color: var(--color-crema);
  /* Bottom space keeps the saucer above the badge, which hangs over the wave. */
  padding: calc(40px + env(safe-area-inset-top)) 16px max(var(--wave), 84px);
}
.hero-brand { margin: 0 0 14px; font: 400 clamp(46px, 13vw, 76px)/1 var(--font-logo); letter-spacing: -0.03em; color: var(--color-crema); }
.hero-title {
  position: relative; z-index: 1; margin: 0; max-width: 11ch;
  font: 400 clamp(72px, 21vw, 148px)/0.88 var(--font-display); letter-spacing: -0.02em; text-transform: uppercase;
}
.hero-title em { font-style: normal; color: var(--color-ember); }
.hero-cup { position: relative; z-index: 1; width: min(380px, 88vw); margin: 4px 0 0; }
.hero-cup .steam path { opacity: 0; animation: steam-rise 3.2s ease-in-out infinite; }
.hero-cup .steam path:nth-child(2) { animation-delay: 1s; }
.hero-cup .steam path:nth-child(3) { animation-delay: 2s; }
@keyframes steam-rise { 0% { opacity: 0; transform: translateY(10px); } 40% { opacity: .55; } 100% { opacity: 0; transform: translateY(-18px); } }

/* Faint line drawings at the edges, like the bakery reference. */
.hero-doodle { position: absolute; width: clamp(110px, 22vw, 230px); fill: none; stroke: var(--color-crema); opacity: 0.09; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.hero-doodle.left { left: -34px; top: 46%; transform: rotate(-12deg); }
.hero-doodle.right { right: -30px; top: 16%; transform: rotate(14deg); }
.hero-doodle.bean { width: clamp(44px, 8vw, 80px); right: 12%; bottom: 30%; transform: rotate(-20deg); }

/* Cream corners over the bottom of the dark band: the sides lift away and the middle drops toward the card. */
.hero-wave { position: absolute; z-index: 0; left: 0; bottom: -1px; width: 100%; max-width: none; height: var(--wave); fill: var(--color-crema); }

.hero-badge {
  position: absolute; z-index: 2; left: 50%; bottom: 0; transform: translate(-50%, 46%);
  display: grid; place-items: center; width: 108px; height: 108px; border-radius: 50%;
  background: var(--color-crema); color: var(--color-espresso); text-decoration: none;
  box-shadow: 0 6px 18px rgba(31, 20, 13, 0.25);
}
.badge-ring { position: absolute; inset: 0; width: 100%; height: 100%; animation: badge-spin 18s linear infinite; }
.badge-ring text { font: 400 12.5px/1 var(--font-circle); letter-spacing: 0.14em; fill: var(--color-espresso); }
.badge-arrow { width: 30px; height: 30px; fill: none; stroke: var(--color-orange); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; animation: badge-nudge 1.8s ease-in-out infinite; }
@keyframes badge-spin { to { transform: rotate(360deg); } }
@keyframes badge-nudge { 50% { transform: translateY(4px); } }

/* The login card starts right under the badge, so the hero drops into it. */
.join-main { padding-top: 76px !important; }
@media (prefers-reduced-motion: reduce) {
  .badge-ring, .badge-arrow, .hero-cup .steam path { animation: none; }
  .hero-cup .steam path { opacity: .4; }
}
@media (min-width: 760px) {
  .hero-title { max-width: none; }
  .hero-cup { width: 440px; }
}

/* ---------- Birthday ---------- */
.birthday-field { border: 0; padding: 0; margin: 0; min-width: 0; }
.birthday-field legend { padding: 0; margin-bottom: 6px; font: 500 var(--text-caption)/1 var(--font-sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-bean); }
.birthday-field legend em { font-style: normal; text-transform: none; letter-spacing: 0; color: var(--color-bean); }
.birthday-field .field-row { grid-template-columns: 1.4fr 1fr; }
.birthday-field select:disabled { opacity: 0.7; }
.birthday-pill { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-radius: 24px; background: var(--color-espresso); color: var(--color-crema); box-shadow: inset 5px 0 0 var(--color-orange); }
.birthday-pill .cake { font-size: 26px; line-height: 1; }

/* ---------- Sticker (brand kit): tilted orange tag above a title ---------- */
.sticker {
  display: inline-block; justify-self: start; margin: 0 0 10px; padding: 4px 14px 2px;
  font: 400 28px/1 var(--font-display); text-transform: lowercase;
  background: var(--color-orange); color: var(--color-crema); border-radius: var(--radius-sticker);
  transform: rotate(-4deg); transform-origin: left center;
}

/* Back to the cafe website */
.home-link {
  position: absolute; z-index: 5; top: calc(16px + env(safe-area-inset-top)); left: 16px;
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px 9px 12px; border-radius: 999px;
  background: rgba(245, 230, 206, .1); box-shadow: inset 0 0 0 1.5px rgba(245, 230, 206, .4);
  color: var(--color-crema); font: 600 14px/1 var(--font-body, "Geist", Arial, sans-serif); text-transform: uppercase; text-decoration: none;
  transition: background-color .3s ease, color .3s ease, transform .3s ease;
}
.home-link svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s ease; }
.home-link:hover, .home-link:focus-visible { background: var(--color-crema); color: var(--color-espresso); }
.home-link:hover svg { transform: translateX(-3px); }
.home-link:focus-visible { outline: 3px solid var(--color-focus-ring); outline-offset: 2px; }
.home-link--light { position: static; align-self: flex-start; background: var(--color-oat); box-shadow: inset 0 0 0 1.5px var(--color-line); color: var(--color-espresso); }
.home-link--light:hover, .home-link--light:focus-visible { background: var(--color-espresso); color: var(--color-crema); }
@media (max-width: 560px) {
  .join-hero { padding-top: calc(76px + env(safe-area-inset-top)); }
  .home-link { font-size: 13px; padding: 8px 14px 8px 10px; }
}

/* ---------- Staff login: the join page's dark hero above the login card (logged out only) ---------- */
.staff-hero { display: none; padding-bottom: var(--wave); }
.staff-hero .hero-title { max-width: none; font-size: clamp(64px, 17vw, 132px); }
body:has(#login-view:not([hidden])) .staff-hero { display: grid; }
body:has(#login-view:not([hidden])) > .nav { display: none; }
.staff-login-main { position: relative; z-index: 1; margin-top: clamp(40px, 6vw, 72px); padding-bottom: 48px; }
.is-embedded .staff-hero { display: none !important; }
.is-embedded body:has(#login-view:not([hidden])) > .nav { display: flex; }
.is-embedded .staff-login-main { margin-top: 0; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.invite-result { padding: 16px; border-radius: 18px; background: var(--color-oat); }

/* Staff login: Sign in / Create an account switch, centred over the card */
.auth-tabs { display: flex; justify-self: center; width: fit-content; margin: 0 auto 16px; background: var(--color-oat); }
.auth-tabs[hidden] { display: none; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Counter columns: cards keep their own height instead of stretching to match the taller
   column (that left big empty gaps inside Find member and Add items) */
.counter-grid { align-items: start; }
.counter-col, #counter-view .card.stack { align-content: start; }

/* ---------- Staff counter on phones ----------
   One column in working order: find the customer, confirm on their card, add items, history.
   The two column wrappers step aside (display: contents) so the sections can be reordered. */
@media (max-width: 719px) {
  .counter-grid { gap: 14px; }
  .counter-grid > .counter-col { display: contents; }
  #find-card { order: 1; }
  #empty-member, #member-card { order: 2; }
  #menu-card { order: 3; }
  #member-history-card { order: 4; }
  #counter-view.wrap { padding-top: 16px; }
  #counter-view .card { padding: 20px 18px; border-radius: 26px; }
  #counter-view .h2 { font-size: 30px; }
  #counter-view #member-name { font-size: 44px; }
  #member-card { gap: 14px !important; }
  .punches { gap: 8px; max-width: 300px; }
  .cart-line { padding: 10px 0; }
  #menu-card .row.spread { align-items: baseline; }
  .qty button { width: 42px; height: 42px; }
}

/* ---------- Owner → Blog ---------- */
.bposts { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }
.bpost { display: grid; grid-template-columns: 112px 1fr; gap: 16px; align-items: center; text-align: left; padding: 14px; border: 1px solid transparent; font: inherit; color: inherit; cursor: pointer; transition: border-color var(--duration-ui), transform 160ms ease; }
@media (hover: hover) { .bpost:hover { border-color: var(--color-espresso); } }
.bpost:active { transform: scale(0.99); }
.bpost__img { width: 112px; aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden; background: var(--color-warm); }
.bpost__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bpost__body { display: grid; gap: 6px; justify-items: start; min-width: 0; }
.bpost__title { font: 400 26px/1 var(--font-display); text-transform: uppercase; letter-spacing: -0.01em; overflow-wrap: anywhere; }

.beditor { display: grid; gap: 18px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 980px) { .beditor { grid-template-columns: minmax(0, 1fr) 360px; } .beditor__side { position: sticky; top: 18px; } }
.bed-title { font: 400 34px/1.05 var(--font-display) !important; text-transform: uppercase; }
.slugbox { display: flex; align-items: center; gap: 6px; }
.slugbox .input { flex: 1; }

.rte { border: 1px solid var(--color-line); border-radius: 16px; background: var(--color-field); overflow: hidden; }
.rte:focus-within { border-color: var(--color-espresso); box-shadow: 0 0 0 3px var(--color-focus-ring); }
.rte__bar { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px; border-bottom: 1px solid var(--color-line); background: var(--color-oat); }
.rte__bar button, .rte__style { min-height: 34px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--color-line); background: var(--color-field); color: var(--color-espresso); font: 600 13px/1 var(--font-sans); cursor: pointer; }
.rte__bar button:hover { border-color: var(--color-espresso); }
.rte__area { min-height: 260px; padding: 16px 18px; outline: none; font: 400 17px/1.6 var(--font-sans); color: var(--color-espresso); }
.rte--small .rte__area { min-height: 80px; font-size: 15px; }
.rte__area h2 { font: 400 32px/0.95 var(--font-display); text-transform: uppercase; margin: 18px 0 6px; }
.rte__area h3 { font: 400 24px/1 var(--font-display); text-transform: uppercase; margin: 14px 0 4px; }
.rte__area p { margin: 0 0 12px; }
.rte__area a { color: var(--color-espresso); text-decoration: underline; text-decoration-color: var(--color-orange); text-decoration-thickness: 2px; }
.rte__area ul { margin: 0 0 12px; padding-left: 22px; }
.bfaq { padding: 14px; border-radius: 16px; background: var(--color-oat); }

.bphoto { aspect-ratio: 16 / 10; border-radius: 16px; background: var(--color-oat); display: grid; place-items: center; overflow: hidden; }
.bphoto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.counter { justify-self: end; }

.bpreview { margin-top: 28px; }
.bpreview__page { background: var(--brand-cream); border-radius: 28px; padding: clamp(22px, 4vw, 48px); color: var(--color-espresso); border: 1px solid var(--color-line); box-shadow: 0 18px 40px rgba(43, 27, 20, .08); }
.bdialog { padding: 0; border: 0; background: transparent; width: min(420px, calc(100vw - 32px)); }
.bdialog::backdrop { background: rgba(43, 27, 20, .45); }
.bpreview__meta { margin: 0 0 12px; font: 600 13px/1 var(--font-sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-bean); }
.bpreview__meta i { display: inline-block; width: 5px; height: 5px; margin: 0 8px 2px; border-radius: 50%; background: var(--color-orange); vertical-align: middle; }
.bpreview__title { margin: 0; font: 400 clamp(40px, 6vw, 76px)/0.92 var(--font-display); text-transform: uppercase; }
.bpreview__intro { max-width: 640px; margin: 16px 0 0; font: 400 19px/1.55 var(--font-sans); color: var(--color-bean); }
.bpreview__img img { width: 100%; max-height: 460px; object-fit: cover; border-radius: 22px; margin-top: 22px; display: block; }
.bpreview__body { max-width: 680px; margin-top: 26px; }
.bpreview__body h2 { margin: 1.4em 0 0; font: 400 clamp(30px, 3vw, 42px)/0.95 var(--font-display); text-transform: uppercase; }
.bpreview__body h3 { margin: 1.2em 0 0; font: 400 26px/1 var(--font-display); text-transform: uppercase; }
.bpreview__body p, .bpreview__body li { margin: 12px 0 0; font: 400 18px/1.6 var(--font-sans); color: var(--color-bean); }
.bpreview__body a { color: var(--color-espresso); font-weight: 600; text-decoration: underline; text-decoration-color: var(--color-orange); text-decoration-thickness: 2px; }

/* ---------- Owner dashboard: clickable numbers, tighter corners ---------- */
#owner .card { border-radius: 20px; }
.ostat { position: relative; text-align: left; font: inherit; color: inherit; border: 1.5px solid transparent; cursor: pointer; transition: border-color var(--duration-ui), transform 160ms ease, background-color var(--duration-ui); }
@media (hover: hover) { .ostat:hover { border-color: var(--color-espresso); } }
.ostat:active { transform: scale(0.98); }
.ostat:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--color-focus-ring); }
.ostat.is-open { background: var(--color-espresso); color: var(--color-crema); }
.ostat.is-open .eyebrow, .ostat.is-open .value { color: var(--color-crema); }
.ostat__more { font: 600 12px/1 var(--font-sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-orange); }
.ostat.is-open .ostat__more { color: var(--color-crema); }
.odetail .table td { vertical-align: top; }
.odetail__close { flex: none; }
/* phones: rows stay on one line and the table scrolls sideways instead of squeezing every word */
@media (max-width: 719px) { .odetail .table th, .odetail .table td { white-space: nowrap; } }

/* ---------- Owner area: menu + one section at a time ---------- */
.oshell { display: grid; gap: 22px; align-items: start; }
.ocontent { min-width: 0; }
.opanel { gap: 24px; }
.onav { display: flex; gap: 6px; }
.onav__link { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 16px; border-radius: 14px; font: 600 14px/1.1 var(--font-sans); color: var(--color-espresso); text-decoration: none; white-space: nowrap; transition: background-color var(--duration-ui); }
.onav__link:hover { background: var(--color-oat); }
.onav__link[aria-current="page"] { background: var(--color-espresso); color: var(--color-crema); }
.onav__count { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; display: inline-grid; place-items: center; background: var(--color-orange); color: var(--color-crema); font: 700 12px/1 var(--font-sans); }
.onav__count[hidden] { display: none; }
@media (min-width: 900px) {
  .oshell { grid-template-columns: 210px minmax(0, 1fr); gap: 32px; }
  .onav { flex-direction: column; position: sticky; top: 18px; padding: 10px; border-radius: 20px; background: var(--color-card); }
}
@media (max-width: 899px) {
  /* phones and tablets: a row of tabs that scrolls sideways and stays under the header */
  .onav { position: sticky; top: 0; z-index: 5; margin: -8px -16px 0; padding: 10px 16px; overflow-x: auto; scrollbar-width: none; background: var(--brand-cream); border-bottom: 1px solid var(--color-line); }
  .onav::-webkit-scrollbar { display: none; }
  .onav__link { padding: 9px 14px; background: var(--color-oat); }
}
@media print { .onav { display: none; } }
#staff select.input { min-width: 108px; }
@media (max-width: 719px) { .opanel .table th, .opanel .table td { white-space: nowrap; } }
/* phones: each account request is a small card with Approve / Decline underneath (no sideways scrolling to find them) */
@media (max-width: 719px) {
  #requests thead { display: none; }
  #requests table, #requests tbody, #requests tr, #requests td { display: block; white-space: normal; }
  #requests tr { padding: 12px 0; border-top: 1px solid var(--color-line); }
  #requests td { padding: 2px 0; border: 0; }
  #requests td:first-child { font-weight: 600; }
  #requests td:last-child { padding-top: 10px; }
  #requests td:last-child .row { justify-content: flex-start !important; }
}