/* The order page: a flat paper ticket with the order number, and the order's
   steps as a vertical timeline below it. The ground turns green when the
   order is ready. Dark is the default look; light applies when the phone is
   set to light, or when the customer picks it with the theme button
   (data-theme). The iPhone App Clip copies these values (ios/Shared/Theme.swift). */
:root {
  --brand: #9a6440;
  --ready: #14b37d;

  --ground: #120e0b;
  --ground-ready: #04170f;
  --paper: #201a16;
  --hairline: rgba(255, 255, 255, 0.08);

  --ink: #ffffff;
  --ink-soft: rgba(255, 255, 255, 0.72);
  --label: rgba(255, 255, 255, 0.58);
  --ready-ink: #3ddc9e;

  --chip-bg: rgba(255, 255, 255, 0.08);
  --soft-fill: rgba(255, 255, 255, 0.1);
  --line-off: rgba(255, 255, 255, 0.18);

  --btn-bg: #ffffff;
  --btn-ink: #120e0b;
  --btn-ready-bg: #14b37d;
  --btn-ready-ink: #04170f;
  --ghost-bg: rgba(255, 255, 255, 0.08);
  --ghost-line: rgba(255, 255, 255, 0.2);

  --badge-bg: #14b37d;
  --badge-ink: #04170f;
  --pulse: rgba(20, 179, 125, 0.5);
  --focus: #ffffff;

  --icon-sun: block;
  --icon-moon: none;
  --flash-peak: 0.45;

  --tooth: 10px;
  color-scheme: dark;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --ground: #f3eee9;
    --ground-ready: #e2f3ea;
    --paper: #ffffff;
    --hairline: rgba(26, 20, 16, 0.08);
    --ink: #1a1410;
    --ink-soft: rgba(26, 20, 16, 0.72);
    --label: rgba(26, 20, 16, 0.56);
    --ready-ink: #0b7a52;
    --chip-bg: rgba(26, 20, 16, 0.06);
    --soft-fill: rgba(26, 20, 16, 0.06);
    --line-off: rgba(26, 20, 16, 0.16);
    --btn-bg: #1a1410;
    --btn-ink: #ffffff;
    --btn-ready-bg: #0b5e40;
    --btn-ready-ink: #ffffff;
    --ghost-bg: #ffffff;
    --ghost-line: rgba(26, 20, 16, 0.14);
    --badge-bg: #14b37d;
    --badge-ink: #ffffff;
    --pulse: rgba(20, 179, 125, 0.45);
    --focus: #1a1410;
    --icon-sun: none;
    --icon-moon: block;
    --flash-peak: 0.55;
    color-scheme: light;
  }
}

:root[data-theme="light"] {
  --ground: #f3eee9;
  --ground-ready: #e2f3ea;
  --paper: #ffffff;
  --hairline: rgba(26, 20, 16, 0.08);
  --ink: #1a1410;
  --ink-soft: rgba(26, 20, 16, 0.72);
  --label: rgba(26, 20, 16, 0.56);
  --ready-ink: #0b7a52;
  --chip-bg: rgba(26, 20, 16, 0.06);
  --soft-fill: rgba(26, 20, 16, 0.06);
  --line-off: rgba(26, 20, 16, 0.16);
  --btn-bg: #1a1410;
  --btn-ink: #ffffff;
  --btn-ready-bg: #0b5e40;
  --btn-ready-ink: #ffffff;
  --ghost-bg: #ffffff;
  --ghost-line: rgba(26, 20, 16, 0.14);
  --badge-bg: #14b37d;
  --badge-ink: #ffffff;
  --pulse: rgba(20, 179, 125, 0.45);
  --focus: #1a1410;
  --icon-sun: none;
  --icon-moon: block;
  --flash-peak: 0.55;
  color-scheme: light;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--ground);
  color: var(--ink);
  font: 16px/1.5 "Alan Sans", system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif;
  transition: background-color 0.6s ease;
}

[hidden] { display: none !important; }

body[data-stage="ready"], body[data-stage="done"] { background: var(--ground-ready); }

/* Visual alarm while the tone rings: the whole screen pulses in the ready
   colour about once a second (well under the 3 flashes/s seizure limit). */
.flash { position: fixed; inset: 0; pointer-events: none; background: var(--ready); opacity: 0; }
body.alarm .flash { animation: flash 1s ease-in-out infinite; }
@keyframes flash {
  0%, 100% { opacity: 0; }
  50% { opacity: var(--flash-peak); }
}

.page {
  position: relative;
  max-width: 440px;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0 auto;
  padding-block: max(20px, env(safe-area-inset-top, 0px)) max(24px, env(safe-area-inset-bottom, 0px));
  padding-left: max(20px, env(safe-area-inset-left, 0px));
  padding-right: max(20px, env(safe-area-inset-right, 0px));
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.spacer { flex-grow: 1; }
.muted { color: var(--ink-soft); font-size: 14px; }

.topbar { display: flex; align-items: center; gap: 8px; }
.topbar .muted { flex-grow: 1; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--chip-bg);
  font-size: 14px;
  font-weight: 500;
}
.chip.offline { font-size: 12px; }
.center { align-self: center; }

.theme-toggle {
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 50%;
  border: 0;
  background: var(--chip-bg);
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.theme-toggle:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.icon-sun { display: var(--icon-sun); }
.icon-moon { display: var(--icon-moon); }

/* A flat surface for the smaller blocks (messages, sound check). */
.card { background: var(--paper); border: 1px solid var(--hairline); }

/* Ticket: a sheet of paper whose bottom edge is torn into teeth. */
.ticket { display: flex; flex-direction: column; gap: 26px; }

.paper {
  background: var(--paper);
  border-radius: 24px 24px 0 0;
  padding-bottom: calc(var(--tooth) + 8px);
  display: flex;
  flex-direction: column;
  -webkit-mask:
    linear-gradient(#000 0 0) top / 100% calc(100% - var(--tooth)) no-repeat,
    conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / calc(2 * var(--tooth)) var(--tooth) repeat-x;
  mask:
    linear-gradient(#000 0 0) top / 100% calc(100% - var(--tooth)) no-repeat,
    conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / calc(2 * var(--tooth)) var(--tooth) repeat-x;
}

.merchant { padding: 18px 20px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--hairline); }
.logo {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  flex: none;
  object-fit: cover;
  background: var(--soft-fill);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}
.merchant-name { flex-grow: 1; font-size: 17px; font-weight: 600; overflow-wrap: anywhere; }
/* The ticket's titles: the headings' Arabic alternates (css/fonts.css). */
.merchant-name, .status-label { font-feature-settings: "ss06"; }

.field { display: flex; flex-direction: column; gap: 4px; }
.field.branch { align-items: flex-end; font-size: 14px; font-weight: 500; }
.label { font-size: 12px; font-weight: 400; color: var(--label); }

.number-row { padding: 18px 20px 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.number { font-size: 120px; font-weight: 700; line-height: 0.95; letter-spacing: -3px; }

.badge {
  width: 64px;
  height: 64px;
  flex: none;
  border-radius: 50%;
  background: var(--badge-bg);
  color: var(--badge-ink);
  display: flex;
  align-items: center;
  justify-content: center;
}
.badge.ringing { animation: pulse 1.6s ease-out infinite; }
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 var(--pulse); }
  100% { box-shadow: 0 0 0 20px transparent; }
}

.status { padding: 0 20px 16px; align-items: flex-start; }
.status-label {
  display: inline-flex;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--chip-bg);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.4;
}
body[data-stage="ready"] .status-label { background: var(--btn-ready-bg); color: var(--btn-ready-ink); font-size: 20px; }
body[data-stage="done"] .status-label { color: var(--ready-ink); }

.pickup { padding: 0 20px 14px; }
.pickup-note { font-size: 16px; font-weight: 600; }

/* The steps, top to bottom: a dot per step joined by a line, green up to
   where the order is. */
.timeline { padding: 0 4px; display: flex; flex-direction: column; gap: 14px; }
.section-title { margin: 0; font-size: 15px; font-weight: 600; color: var(--ink-soft); }
.steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.steps li {
  position: relative;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  column-gap: 14px;
  padding-bottom: 22px;
  color: var(--label);
}
.steps li:last-child { padding-bottom: 0; }
.steps li::before {
  content: "";
  position: absolute;
  inset-inline-start: 10px;
  top: 20px;
  bottom: 0;
  width: 2px;
  border-radius: 1px;
  background: var(--line-off);
}
.steps li:last-child::before { display: none; }
.steps li[data-state="done"]::before { background: var(--ready); }
.steps .bar {
  grid-row: 1 / span 2;
  position: relative;
  width: 18px;
  height: 18px;
  margin: 3px 2px 0;
  border-radius: 50%;
  border: 2px solid var(--line-off);
  background: var(--ground);
}
body[data-stage="ready"] .steps .bar, body[data-stage="done"] .steps .bar { background: var(--ground-ready); }
.steps li[data-state="done"] .bar { border-color: var(--ready); background: var(--ready); }
.steps li[data-state="done"] .bar::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 2px;
  width: 4px;
  height: 8px;
  border: solid var(--badge-ink);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.steps li[data-state="current"] .bar { border-color: var(--ready); background: var(--ready); box-shadow: 0 0 0 5px var(--pulse); }
.step-label { font-size: 16px; font-weight: 600; }
.steps li[data-state="done"] .step-label, .steps li[data-state="current"] .step-label { color: var(--ink); }
.step-time { font-size: 13px; color: var(--label); font-variant-numeric: tabular-nums; }
.step-time:empty { display: none; }

.message { border-radius: 24px; padding: 28px 24px; text-align: center; }
.message h1 { margin: 0 0 8px; font-size: 24px; }
.message p { margin: 0; color: var(--ink-soft); }

.actions { display: flex; flex-direction: column; gap: 12px; }
.actions.done { align-items: center; text-align: center; }
.actions.done h2 { margin: 0; font-size: 28px; }

.btn {
  font: inherit;
  border-radius: 16px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.btn.primary {
  height: 58px;
  border: 0;
  background: var(--btn-bg);
  color: var(--btn-ink);
  font-size: 17px;
  font-weight: 600;
}
.btn.primary.ready {
  height: 60px;
  background: var(--btn-ready-bg);
  color: var(--btn-ready-ink);
  font-size: 19px;
  font-weight: 700;
}
.btn.ghost-btn {
  border: 1px solid var(--ghost-line);
  background: var(--ghost-bg);
  color: var(--ink);
}
.btn.small { min-height: 44px; padding: 0 16px; border-radius: 999px; font-size: 14px; font-weight: 500; }

.hint { margin: 0; font-size: 13px; line-height: 1.7; color: var(--ink-soft); text-align: center; }
.volume-hint { margin: 0; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 15px; font-weight: 600; }

.tone-on { display: flex; align-items: center; gap: 12px; padding: 12px 16px 12px 12px; border-radius: 20px; }
.tick { width: 40px; height: 40px; flex: none; border-radius: 50%; background: var(--soft-fill); display: flex; align-items: center; justify-content: center; }
.tone-on-text { flex-grow: 1; display: flex; flex-direction: column; gap: 2px; }
.tone-on-text strong { font-size: 15px; font-weight: 600; }
.tone-on-text .muted { font-size: 12px; }

/* The Wallet pass offer. The buttons stand in for Apple's and Google's
   official "Add to Wallet" badges, which must replace them before launch. */
.wallet { display: flex; flex-direction: column; gap: 12px; padding: 14px 16px; border-radius: 20px; }
.wallet-text { display: flex; flex-direction: column; gap: 2px; }
.wallet-text strong { font-size: 15px; font-weight: 600; }
.wallet-text .muted { font-size: 12px; }
.wallet-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.wallet-btn {
  flex: 1 1 200px;
  min-height: 48px;
  padding: 0 16px;
  border-radius: 12px;
  background: #000;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.25);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}
.wallet-btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

/* The full-page Wallet offer, before the sound page. It slides up over the
   page, which stays still behind it. */
.wallet-prompt {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  padding: max(40px, env(safe-area-inset-top, 0px)) 24px max(28px, env(safe-area-inset-bottom, 0px));
  background: var(--ground);
  animation: prompt-in 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
body.prompting { overflow: hidden; }
.wallet-prompt-body { flex-grow: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; }
.wallet-prompt-body h1 { margin: 12px 0 0; font-size: 26px; line-height: 1.35; }
.wallet-prompt-body p { margin: 0; max-width: 32ch; color: var(--ink-soft); line-height: 1.8; }
.wallet-art { max-width: 70vw; height: auto; }
.wallet-prompt-actions { display: flex; flex-direction: column; align-items: stretch; gap: 10px; max-width: 440px; width: 100%; margin: 0 auto; }
.wallet-btn.big { flex: none; min-height: 56px; font-size: 17px; }
.wallet-prompt-actions .link-btn { align-self: center; }
@keyframes prompt-in { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }

/* Sound check: "did you hear it?", then how to turn the volume up. */
.sound-check, .sound-help { border-radius: 20px; padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.check-question { margin: 0; font-size: 17px; font-weight: 600; text-align: center; }
.check-buttons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.check-buttons .btn { height: 52px; font-size: 16px; }
.help-row { display: flex; align-items: center; gap: 16px; }
.help-text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.help-text strong { font-size: 15px; font-weight: 600; line-height: 1.6; }
.help-text .muted { font-size: 13px; line-height: 1.6; }
.phone { flex: none; color: var(--ink); }
.phone .vol-up { fill: var(--ready); animation: press 1.4s ease-in-out infinite; }
.phone .arrow { color: var(--ready); animation: nudge 1.4s ease-in-out infinite; }
.phone .wave { animation: wave 1.4s ease-out infinite; }
.phone .w2 { animation-delay: 0.2s; }
@keyframes press { 0%, 100% { transform: translateX(0); } 40%, 60% { transform: translateX(2px); } }
@keyframes nudge { 0%, 100% { transform: translateY(2px); opacity: 0.5; } 50% { transform: translateY(-3px); opacity: 1; } }
@keyframes wave { 0% { opacity: 0.15; } 50% { opacity: 1; } 100% { opacity: 0.15; } }

/* The sound page: a full page before the ticket, until the customer has
   turned the volume up and heard the tone (soundGate in order-state.js). */
.sound-gate { flex-grow: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 12px 8px; text-align: center; }
.sound-gate h1 { margin: 8px 0 0; font-size: 26px; line-height: 1.35; }
.sound-gate p { margin: 0; max-width: 32ch; color: var(--ink-soft); line-height: 1.8; }
.phone.big { width: 120px; height: 187px; }
/* On the sound page the big phone already shows how; the help card keeps
   only its retry button. */
body.gated .sound-help .help-row { display: none; }
body.gated .spacer { display: none; }
body.gated .volume-hint { display: none; }
.link-btn { font: inherit; font-size: 14px; font-weight: 500; color: var(--ink-soft); background: none; border: 0; padding: 10px; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.link-btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 8px; }

.demo { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px dashed var(--ghost-line); border-radius: 16px; }
.demo-title { font-size: 12px; color: var(--ink-soft); }
.demo-buttons { display: flex; flex-wrap: wrap; gap: 8px; }

@media (max-width: 360px) {
  .number { font-size: 96px; }
}

@media (prefers-reduced-motion: reduce) {
  .wallet-prompt { animation: none; }
  body { transition: none; }
  .badge.ringing { animation: none; }
  body.alarm .flash { animation: none; opacity: calc(var(--flash-peak) / 2); }
  .phone .vol-up, .phone .arrow, .phone .wave { animation: none; }
}

/* The Nida logo. Its mark is still while the order is prepared. When it
   is ready the noon's dot turns red and its waves ripple outward, one after
   another. */
.brand-logo { height: 30px; width: 71px; flex: none; color: var(--ink); }
.brand-mark { flex: none; }
.brand-mark .call-wave { fill: none; stroke: #14b37d; stroke-linecap: round; }
.brand-mark .arc1 { opacity: 0.45; }
.brand-mark .arc2 { stroke: #00ffa3; opacity: 0.45; }
.brand-mark .call-dot { fill: #ffffff; }
body[data-stage="ready"] .brand-mark .call-wave { stroke: #f04438; opacity: 0; animation: call-wave 1.5s ease-out infinite; }
body[data-stage="ready"] .brand-mark .arc1 { animation-delay: 0.25s; }
body[data-stage="ready"] .brand-mark .arc2 { stroke: #ff7a6e; animation-delay: 0.5s; }
body[data-stage="ready"] .brand-mark .call-dot { fill: #f04438; }
@keyframes call-wave {
  0% { opacity: 0; }
  25% { opacity: 1; }
  70%, 100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  body[data-stage="ready"] .brand-mark .call-wave { animation: none; opacity: 1; }
  body[data-stage="ready"] .brand-mark .arc2 { opacity: 0.6; }
}