/* =====================================================================
   OneBuzz Food — customer PWA screens
   ===================================================================== */

body.is-customer {
  background:
    radial-gradient(700px 420px at 50% -120px, #FFE3D3 0%, rgba(255, 227, 211, 0) 70%),
    radial-gradient(520px 380px at 110% 20%, #FFE0EA 0%, rgba(255, 224, 234, 0) 70%),
    #F6F6F9;
  min-height: 100vh;
  min-height: 100dvh;
}

.cx { max-width: 480px; margin: 0 auto; padding: calc(12px + env(safe-area-inset-top)) 16px calc(24px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
.cx-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 2px 14px; }
.cx-top .brand-mark { width: 32px; height: 32px; }
.cx-top .brand-text { font-size: 17px; }

.conn { display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border-radius: 999px; background: rgba(255, 255, 255, .85); border: 1px solid var(--line); font-size: 12.5px; font-weight: 650; color: var(--ready); }
.conn i { width: 8px; height: 8px; border-radius: 50%; background: var(--ready-dot); animation: pulse-dot 2s infinite; }
.conn[data-state="reconnecting"] { color: #B54708; }
.conn[data-state="reconnecting"] i { background: #F79009; animation: none; }
.conn[data-state="lost"] { color: var(--danger); }
.conn[data-state="lost"] i { background: #F04438; animation: none; }
.conn-banner { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; background: #FEF3F2; color: var(--danger); font-weight: 600; font-size: 14px; margin-bottom: 12px; border: 1px solid #FECDCA; }

.cx-main { display: grid; gap: 14px; flex: 1; align-content: start; }
.cx-venue { display: flex; align-items: center; gap: 12px; padding: 0 4px; }
.cx-logo { width: 46px; height: 46px; border-radius: 14px; object-fit: cover; background: #fff; border: 1px solid var(--line); flex: none; display: grid; place-items: center; font-weight: 800; color: var(--ink-2); box-shadow: var(--shadow-xs); }
.cx-venue strong { display: block; font-size: 17px; font-weight: 800; letter-spacing: -.01em; line-height: 1.2; }
.cx-venue div > span { display: block; color: var(--muted); font-size: 14px; }
.cx-venue .cx-logo { display: grid; place-items: center; font-size: 15px; }

.cx-hero {
  position: relative; background: var(--surface); border-radius: 30px; padding: 26px 22px 22px; text-align: center;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 18px 40px -18px rgba(16, 24, 40, .22); border: 1px solid rgba(230, 233, 240, .8); overflow: hidden;
}
.cx-hero::before { content: ""; position: absolute; inset: 0 0 auto; height: 6px; background: var(--waiting-dot); }
.cx-hero[data-status="PREPARING"]::before { background: var(--preparing-dot); }
.cx-hero[data-status="READY"]::before { background: var(--ready-dot); }
.cx-hero[data-status="DELIVERED"]::before { background: var(--violet); }
.cx-hero[data-status="CANCELLED"]::before, .cx-hero[data-status="GONE"]::before { background: var(--faint); }
.cx-label { font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.cx-num { font-family: var(--font-display); font-size: clamp(88px, 30vw, 124px); font-weight: 900; letter-spacing: -.055em; line-height: .95; margin: 8px 0 12px; font-variant-numeric: tabular-nums; color: var(--ink); }
.pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px; font-weight: 800; font-size: 14px; letter-spacing: .1em; text-transform: uppercase; }
.pill i { width: 10px; height: 10px; border-radius: 50%; background: currentColor; }
.pill-waiting { background: var(--waiting-bg); color: var(--waiting); }
.pill-waiting i { background: var(--waiting-dot); animation: breathe 2s ease-in-out infinite; }
.pill-preparing { background: var(--preparing-bg); color: var(--preparing); }
.pill-preparing i { background: var(--preparing-dot); animation: breathe 1.4s ease-in-out infinite; }
.pill-ready { background: var(--ready-bg); color: var(--ready); }
.pill-ready i { background: var(--ready-dot); animation: pulse-dot 1.4s infinite; }
.pill-done { background: var(--violet-bg); color: var(--violet); }
.pill-gone { background: var(--slate-bg); color: var(--slate); }
@keyframes breathe { 50% { opacity: .35; transform: scale(.8); } }
.cx-msg { margin-top: 14px; font-size: 17px; font-weight: 600; color: var(--ink-2); line-height: 1.45; }
.cx-sub { margin-top: 6px; color: var(--muted); font-size: 14.5px; }


.cx-card { background: var(--surface); border-radius: 22px; padding: 18px; border: 1px solid rgba(230, 233, 240, .9); box-shadow: 0 1px 2px rgba(16, 24, 40, .04); }
.cx-card-row { display: flex; gap: 14px; align-items: flex-start; }
.cx-card-ic { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; flex: none; background: var(--violet-bg); color: var(--violet); }
.cx-card-ic.ok { background: var(--ready-bg); color: var(--ready); }
.cx-card-ic.bad { background: var(--danger-bg); color: var(--danger); }
.cx-card-ic.warn { background: var(--waiting-bg); color: var(--waiting); }
.cx-card h2 { font-size: 16.5px; font-weight: 800; letter-spacing: -.01em; }
.cx-card h3 { font-size: 15.5px; font-weight: 800; letter-spacing: -.01em; }
.cx-card > h2 > .ic { display: inline-block; vertical-align: -2px; margin-right: 6px; color: var(--muted); }
.cx-card p { color: var(--muted); font-size: 14.5px; margin-top: 3px; }
.cx-card .btn { margin-top: 14px; }
.cx-card .btn + .btn { margin-top: 8px; }
.cx-mini { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.toggle { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); font-size: 13.5px; font-weight: 650; color: var(--ink-2); cursor: pointer; }
.toggle .ic { width: 16px; height: 16px; }
.toggle[aria-pressed="true"] { background: var(--ready-bg); color: var(--ready); border-color: #B7EBCD; }

.cx-response { text-align: center; }
.cx-response .big-ic { width: 64px; height: 64px; border-radius: 22px; display: grid; place-items: center; margin: 0 auto 10px; }
.cx-response .big-ic .ic { width: 30px; height: 30px; }
.cx-response h2 { font-size: 22px; font-weight: 900; letter-spacing: .02em; text-transform: uppercase; }
.cx-response p { font-size: 15.5px; margin-top: 4px; }
.cx-response.is-stopped .big-ic { background: #EAECF0; color: #344054; }
.cx-response.is-coming .big-ic { background: var(--ready-bg); color: var(--ready); }
.cx-response.is-coming { border-color: #A6E9C4; background: linear-gradient(180deg, #F2FCF6, #fff); }
.cx-note { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 13.5px; color: var(--muted); font-weight: 600; }
.cx-note .spinner { width: 14px; height: 14px; border-width: 2px; }

.cx-final .big-ic { width: 76px; height: 76px; border-radius: 26px; display: grid; place-items: center; margin: 4px auto 12px; background: var(--violet-bg); color: var(--violet); }
.cx-final .big-ic .ic { width: 38px; height: 38px; }
.cx-final h1 { font-size: 26px; font-weight: 900; letter-spacing: .01em; }

.cx-foot { text-align: center; color: var(--faint); font-size: 12.5px; padding: 22px 0 4px; display: grid; gap: 6px; }
.cx-foot a { color: var(--muted); font-weight: 600; }

.btn-huge { min-height: 60px; font-size: 17px; border-radius: 18px; width: 100%; }

/* ------------------------------------------------------------ READY takeover */
.ready-screen {
  position: fixed; inset: 0; z-index: 800; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: calc(24px + env(safe-area-inset-top)) 22px calc(24px + env(safe-area-inset-bottom)); text-align: center; color: #fff; overflow: hidden;
  background: radial-gradient(900px 700px at 50% 30%, #2EE08A 0%, #12B76A 45%, #07804A 100%);
  animation: ready-bg 1.4s ease-in-out infinite;
}
@keyframes ready-bg { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.12) saturate(1.1); } }
.rs-rings { position: absolute; left: 50%; top: 30%; width: 0; height: 0; pointer-events: none; }
.rs-rings span { position: absolute; left: -110px; top: -110px; width: 220px; height: 220px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .55); animation: rs-ring 2.4s ease-out infinite; }
.rs-rings span:nth-child(2) { animation-delay: .8s; }
.rs-rings span:nth-child(3) { animation-delay: 1.6s; }
@keyframes rs-ring { 0% { transform: scale(.5); opacity: .9; } 100% { transform: scale(2.6); opacity: 0; } }
.rs-bell { position: relative; width: 108px; height: 108px; border-radius: 34px; display: grid; place-items: center; background: rgba(255, 255, 255, .18); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .35); margin-bottom: 16px; }
.rs-bell .ic { width: 58px; height: 58px; stroke-width: 2.2; animation: bell-swing 1s ease-in-out infinite; transform-origin: 50% 10%; }
@keyframes bell-swing { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(18deg); } 30% { transform: rotate(-16deg); } 45% { transform: rotate(12deg); } 60% { transform: rotate(-8deg); } 75% { transform: rotate(4deg); } }
.ready-screen h1 { position: relative; font-size: clamp(28px, 8.4vw, 40px); font-weight: 900; letter-spacing: .01em; line-height: 1.05; text-transform: uppercase; }
.rs-num { position: relative; font-family: var(--font-display); font-size: clamp(96px, 34vw, 150px); font-weight: 900; letter-spacing: -.05em; line-height: .95; margin: 8px 0 4px; text-shadow: 0 8px 30px rgba(0, 0, 0, .18); font-variant-numeric: tabular-nums; }
.rs-venue { position: relative; font-size: 18px; font-weight: 750; }
.rs-msg { position: relative; font-size: 16px; opacity: .92; margin-top: 4px; }
.rs-buzz { position: relative; margin-top: 12px; font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; padding: 6px 12px; border-radius: 999px; background: rgba(0, 0, 0, .14); }
.rs-actions { position: relative; display: grid; gap: 12px; width: min(100%, 400px); margin-top: 28px; }
.rs-btn { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 64px; border-radius: 20px; border: 0; font-size: 18px; font-weight: 850; letter-spacing: .04em; text-transform: uppercase; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform .1s; }
.rs-btn:active { transform: scale(.97); }
.rs-btn .ic { width: 24px; height: 24px; stroke-width: 2.4; }
.rs-stop { background: #fff; color: #0B1220; box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .45); }
.rs-coming { background: #0B1220; color: #fff; box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .55); }
.rs-sound { position: relative; margin-top: 16px; font-size: 14px; font-weight: 700; background: rgba(0, 0, 0, .18); padding: 8px 14px; border-radius: 999px; }
body.is-alerting { overflow: hidden; }

/* ------------------------------------------------------------ bottom sheet (install guide) */
dialog.sheet { max-width: min(100vw, 520px); width: 100%; margin: auto auto 0; }
dialog.sheet .modal-card { border-radius: 28px 28px 0 0; padding: 26px 22px calc(22px + env(safe-area-inset-bottom)); }
@media (min-width: 560px) { dialog.sheet { margin: auto; } dialog.sheet .modal-card { border-radius: 28px; } }
.platform-tabs { display: flex; gap: 6px; margin-top: 16px; }
.platform-tabs button { flex: 1; min-height: 40px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); font-weight: 700; cursor: pointer; }
.platform-tabs button.is-active { background: var(--ink); color: #fff; border-color: var(--ink); }

/* ------------------------------------------------------------ customer home */
.home-hero { text-align: center; padding: 12px 8px 4px; }
.home-hero h1 { font-size: 30px; font-weight: 900; letter-spacing: -.03em; }
.home-hero p { color: var(--muted); margin-top: 6px; font-size: 15.5px; }
.bz-list { display: grid; gap: 12px; }
.bz-item { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; background: var(--surface); border-radius: 22px; padding: 16px 16px; border: 1px solid rgba(230, 233, 240, .9); box-shadow: 0 1px 2px rgba(16, 24, 40, .04); text-decoration: none; color: inherit; position: relative; }
.bz-item-num { font-family: var(--font-display); font-size: 34px; font-weight: 900; letter-spacing: -.04em; min-width: 76px; text-align: center; padding: 8px 10px; border-radius: 16px; background: var(--surface-2); font-variant-numeric: tabular-nums; }
.bz-item strong { display: block; font-size: 16px; }
.bz-item span.sub { display: block; font-size: 13.5px; color: var(--muted); }
.bz-item.is-ready { border-color: #A6E9C4; background: linear-gradient(180deg, #EFFCF4, #fff); animation: glow-ready 1.6s ease-in-out infinite; }
.bz-item.is-ready .bz-item-num { background: #12B76A; color: #fff; }
@keyframes glow-ready { 50% { box-shadow: 0 0 0 5px rgba(18, 183, 106, .18); } }
.bz-item.is-done { opacity: .7; }
.join-form { display: flex; gap: 8px; margin-top: 12px; }
.join-form input { flex: 1; min-height: 52px; border-radius: 14px; border: 1px solid var(--line); padding: 10px 14px; font-size: 20px; font-weight: 800; letter-spacing: .3em; text-transform: uppercase; text-align: center; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.join-form input:focus { outline: none; border-color: var(--focus); box-shadow: var(--ring); }
.how { display: grid; gap: 10px; margin-top: 8px; }
.how div { display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: center; font-size: 14.5px; }
.how i { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--surface-2); font-style: normal; font-weight: 900; color: var(--brand); border: 1px solid var(--line-2); }

/* ------------------------------------------------------------ landing */
.landing { max-width: 1180px; margin: 0 auto; padding: calc(10px + env(safe-area-inset-top)) 24px 40px; }
.landing-top { display: flex; align-items: center; justify-content: space-between; padding: 4px 0 6px; }
/* The hero always fits the first screen: the phone is sized from the window height,
   so the headline and the phone sit near the top even on short laptop screens. */
.landing-hero {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 40px; align-items: start;
  padding: clamp(4px, 2.5vh, 28px) 0 16px;
}
.landing-copy { padding-top: clamp(8px, 7vh, 72px); }
.landing-hero h1 { font-size: clamp(40px, 6vw, 76px); font-size: clamp(40px, min(6vw, 11.5vh), 78px); font-weight: 900; letter-spacing: -.045em; line-height: .98; }
.landing-hero h1 span { background: var(--brand-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.landing-hero .eyebrow { font-size: clamp(11px, 1.7vh, 13px); }
.landing-hero p { font-size: clamp(16px, 2.6vh, 19px); color: var(--muted); margin-top: clamp(10px, 2.2vh, 20px); max-width: 520px; }
.landing-ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: clamp(16px, 3.4vh, 30px); }
.phone-mock {
  justify-self: center; aspect-ratio: 9 / 18.5; width: auto;
  height: clamp(360px, calc(100vh - 130px), 620px);
  height: clamp(360px, calc(100svh - 130px), 620px);
  border-radius: 46px; background: #0B1220; padding: 11px; box-shadow: 0 40px 80px -30px rgba(16, 24, 40, .55);
  container-type: size;
}
.phone-screen { width: 100%; height: 100%; border-radius: 36px; overflow: hidden; background: radial-gradient(600px 500px at 50% 30%, #2EE08A 0%, #12B76A 45%, #07804A 100%); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 20px; padding: 4cqh 7cqw; gap: 6px; gap: 1cqh; }
.phone-screen .ic { width: 48px; height: 48px; width: 8.5cqh; height: 8.5cqh; margin-bottom: 8px; margin-bottom: 1.4cqh; }
.phone-screen b { font-size: 20px; font-size: 3.5cqh; font-weight: 900; text-transform: uppercase; line-height: 1.15; }
.phone-screen .n { font-size: 84px; font-size: 15cqh; font-weight: 900; letter-spacing: -.05em; line-height: 1; font-family: var(--font-display); }
.phone-screen .venue { font-weight: 700; font-size: 15px; font-size: 2.6cqh; }
.phone-screen .fake-btn { width: 100%; margin-top: 14px; margin-top: 2.6cqh; padding: 14px; padding: 2.3cqh; border-radius: 16px; background: #fff; color: #0B1220; font-weight: 850; font-size: 14px; font-size: 2.3cqh; letter-spacing: .05em; }
.phone-screen .fake-btn.dark { background: #0B1220; color: #fff; margin-top: 8px; margin-top: 1.4cqh; }
.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 40px; }
.feature { background: var(--surface); border: 1px solid var(--line); border-radius: 22px; padding: 22px; }
.feature .ic-wrap { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--brand-grad); color: #fff; margin-bottom: 14px; }
.feature h3 { font-size: 17px; font-weight: 800; }
.feature p { color: var(--muted); margin-top: 6px; font-size: 14.5px; }
@media (max-width: 860px) {
  .landing-hero { grid-template-columns: 1fr; padding-top: 10px; gap: 28px; }
  .landing-copy { padding-top: 0; }
  .landing-hero h1 { font-size: clamp(40px, 11vw, 60px); }
  .features { grid-template-columns: 1fr; }
  .phone-mock { height: auto; width: min(260px, 70vw); }
}

.gate-icon { width: 76px; height: 76px; border-radius: 24px; margin: 4px auto 14px; display: grid; place-items: center; color: #fff; background: var(--brand-grad); box-shadow: 0 14px 30px -12px rgba(255, 46, 99, .65); }
.gate-icon .ic { width: 38px; height: 38px; animation: bell-swing 1.6s ease-in-out infinite; transform-origin: 50% 10%; }
.cx-card small { display: block; margin-top: 8px; font-size: 13px; line-height: 1.45; }

.show-sm { display: none; }
@media (max-width: 480px) {
  .hide-sm { display: none; }
  .show-sm { display: inline; }
  .landing { padding-left: 16px; padding-right: 16px; }
  .landing-ctas .btn { flex: 1 1 auto; }
}