/* Haat light-theme values copied from Palette / StatusRamps / CurrentBrand for the mock only. */
:root {
  --brand: #ac022f;
  --brand-subtle: #f4dbe1;
  --bg: #fafafa;
  --surface: #ffffff;
  --subtle: #f7f6f8;
  --text: #1b1721;
  --text-2: #54536a;
  --text-3: #6f6d8b;
  --border: #ebebef;
  --amber-50: #fff6d7;
  --amber-500: #f88e34;
  --jade-50: #e8fcf4;
  --jade-200: #95f3cc;
  --jade-700: #008445;
  --blue-50: #edf1f9;
  --blue-400: #92b4fc;
  --blue-500: #4a6fc5;
  --jade-400: #2dd68a;
  --k: 1;
  --spring-placement: cubic-bezier(0.25, 0.9, 0.3, 1);
  --emph-accel: cubic-bezier(0.3, 0, 0.8, 0.15);
  --emph-decel: cubic-bezier(0.05, 0.7, 0.1, 1);
  --std: cubic-bezier(0.2, 0, 0, 1);
  --pop: cubic-bezier(0.34, 1.56, 0.64, 1);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: Inter, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: #ececef;
  color: var(--text);
}

.page { max-width: 1240px; margin: 0 auto; padding: 32px 24px 64px; }
.page h1 { font-size: 24px; margin: 0 0 6px; }
.page h2 { font-size: 18px; margin: 32px 0 10px; }
.page h3 { font-size: 15px; margin: 0 0 6px; }
.page p, .page li { font-size: 14px; line-height: 1.55; color: #3a3a3a; }
.page code { font-size: 12.5px; background: #fff; padding: 1px 5px; border-radius: 4px; border: 1px solid #ddd; }
.lede { max-width: 820px; color: #444; }

.controls {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  background: #fff; border: 1px solid #ddd; border-radius: 10px; padding: 10px 14px; margin: 18px 0;
  position: sticky; top: 8px; z-index: 50;
}
.controls button, .seg button {
  font: inherit; font-size: 13px; padding: 6px 12px; border-radius: 8px;
  border: 1px solid #ccc; background: #fff; cursor: pointer;
}
.controls button.primary { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 600; }
.seg { display: inline-flex; gap: 0; }
.seg button { border-radius: 0; margin-left: -1px; }
.seg button:first-child { border-radius: 8px 0 0 8px; margin-left: 0; }
.seg button:last-child { border-radius: 0 8px 8px 0; }
.seg button.on { background: #222; color: #fff; border-color: #222; }
.controls label { font-size: 13px; display: inline-flex; gap: 6px; align-items: center; }
.controls .sep { width: 1px; height: 22px; background: #ddd; }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 20px; }
.sample {
  background: #fff; border: 1px solid #ddd; border-radius: 12px; padding: 16px;
  display: flex; flex-direction: column; gap: 10px; align-items: center;
}
.sample.recommended { border: 2px solid var(--brand); }
.sample header { align-self: stretch; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.sample header a { font-size: 13px; color: var(--brand); }
.badge { font-size: 11px; font-weight: 700; color: #fff; background: var(--brand); padding: 2px 8px; border-radius: 10px; }
.sample .tag { align-self: stretch; font-size: 13px; color: #555; margin: 0; }

.haptic-log { height: 22px; font-size: 12px; color: var(--jade-700); font-weight: 600; opacity: 0; transition: opacity 120ms linear; }
.haptic-log.on { opacity: 1; }

.split { display: grid; grid-template-columns: auto 1fr; gap: 32px; align-items: start; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }
.beats { border-left: 2px solid #ddd; padding-left: 14px; margin: 0; list-style: none; }
.beats li { margin-bottom: 10px; }
.beats b { color: var(--brand); font-variant-numeric: tabular-nums; }
table.map { border-collapse: collapse; width: 100%; font-size: 13px; background: #fff; }
table.map th, table.map td { border: 1px solid #ddd; padding: 7px 10px; text-align: left; vertical-align: top; }
table.map th { background: #f3f3f5; }

/* ── Phone ─────────────────────────────────────────────────────────────── */

.phone-wrap { width: calc(376px * var(--scale, 0.82)); height: calc(776px * var(--scale, 0.82)); }
.phone {
  width: 376px; height: 776px; transform: scale(var(--scale, 0.82)); transform-origin: top left;
  border-radius: 34px; border: 8px solid #111; background: var(--bg);
  position: relative; overflow: hidden; font-size: 14px; color: var(--text);
}
.status-bar {
  height: 28px; display: flex; justify-content: space-between; align-items: center;
  padding: 0 18px; font-size: 12px; font-weight: 600; background: var(--surface);
}
/* TopBar: 16/12 padding around the status row, then the collapsing Spacer(12) + OrdersFilterBar. */
.topbar {
  background: var(--surface); padding: 12px 16px 0; display: flex; justify-content: space-between; align-items: center;
  position: relative; z-index: 3;
}
.topbar-end { height: 12px; background: var(--surface); position: relative; z-index: 2; }
.status-pill {
  display: flex; align-items: center; gap: 10px; padding: 6px 14px 6px 10px; border-radius: 22px; background: var(--subtle);
}
.status-pill .dot { width: 18px; height: 18px; border-radius: 9px; background: #cdf9e7; display: grid; place-items: center; }
.status-pill .dot::after { content: ""; width: 9px; height: 9px; border-radius: 5px; background: #2dd68a; }
.status-pill b { display: block; font-size: 16px; font-weight: 700; }
.status-pill small { display: block; font-size: 12px; font-weight: 500; color: var(--text-2); }
.top-icons { display: flex; gap: 18px; }
.top-icons svg { width: 24px; height: 24px; }

.filters {
  background: var(--surface); overflow: hidden; height: 99px; position: relative; z-index: 2;
  transition: height calc(var(--k) * 260ms) var(--std);
}
.phone.collapsed .filters { height: 0; }
/* OrdersFilterTab: 12dp outer shape, 5dp ring padding, 8dp inner shape with 16dp padding. */
.tabs { position: relative; display: flex; gap: 8px; padding: 12px 16px 0; }
.tab { flex: 1; min-width: 0; padding: 5px; border-radius: 12px; position: relative; }
.tab-inner {
  border-radius: 8px; padding: 16px 4px; display: flex; flex-direction: column; align-items: center; gap: 4px;
  transition: background calc(var(--k) * 260ms) linear, transform calc(var(--k) * 360ms) var(--pop);
}
.tab[data-tab="new"] .tab-inner { background: var(--amber-50); }
.tab[data-tab="preparing"] .tab-inner { background: var(--jade-50); }
.tab[data-tab="ready"] .tab-inner { background: var(--blue-50); }
.tab-label { font-size: 14px; line-height: 17px; font-weight: 500; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.tab.selected .tab-label { color: var(--brand); }
/* A fixed width, not shrink-to-fit: once a digit span is dynamically swapped (the count roll),
   some engines stop auto-sizing this box correctly for whichever span survives, in any direction. */
.tab-count { font-size: 18px; font-weight: 700; height: 24px; width: 24px; overflow: hidden; position: relative; text-align: center; }
.tab-count span { display: block; line-height: 24px; transition: transform calc(var(--k) * 300ms) var(--std); }
.tab-count .incoming { position: absolute; left: 0; right: 0; top: 0; }
.tab .ring { position: absolute; inset: 0; border: 2px solid var(--brand); border-radius: 12px; opacity: 0; }
.tab.selected .ring { opacity: 1; }
.tab.pulse .tab-inner { background: var(--jade-200) !important; transform: scale(1.07); }
.tab.catch .ring-catch { opacity: 1; }
.tab .ring-catch {
  position: absolute; inset: 0; border: 2px solid var(--jade-700); border-radius: 12px; opacity: 0;
  transition: opacity calc(var(--k) * 200ms) linear;
}

/* OrdersListColumn: 16dp content padding, 12dp between cards. */
.list { padding: 16px; display: flex; flex-direction: column; position: relative; }
/* elevatedCardShadow: radius 8, spread 2, y 4, effect.shadow (#3A44AF at 10%). */
.card {
  background: transparent; border-radius: 8px; margin-bottom: 12px; position: relative;
  box-shadow: 0 4px 8px 2px rgba(58, 68, 175, 0.1);
  transition:
    transform calc(var(--k) * 260ms) var(--emph-accel),
    opacity calc(var(--k) * 220ms) linear,
    max-height calc(var(--k) * 400ms) var(--spring-placement),
    margin-bottom calc(var(--k) * 400ms) var(--spring-placement);
}
.sec { background: var(--surface); border-radius: 8px; position: relative; }
/* OrderSectionDivider: a 2dp gap with an 8/8 dash in bg.surface, inset 8dp. */
.fold::before {
  content: ""; display: block; height: 2px; margin: 0 8px;
  background: repeating-linear-gradient(90deg, var(--surface) 0 8px, transparent 8px 16px);
}

.hdr { padding: 16px; display: flex; align-items: center; gap: 12px; }
.hdr .meta { white-space: nowrap; }
.hdr .date { font-size: 12px; font-weight: 500; line-height: 16px; }
.hdr .meta .id { color: var(--text-2); margin-top: 6px; display: flex; gap: 4px; align-items: center; font-size: 14px; line-height: 20px; }
.hdr .meta .id svg { width: 16px; height: 16px; }
.hdr .num { margin-inline-start: auto; font-size: 36px; line-height: 44px; font-weight: 700; }
.print { width: 36px; height: 36px; border-radius: 4px; background: var(--brand); display: grid; place-items: center; flex: none; }
.print svg { width: 24px; height: 24px; }

.timer { padding: 16px; position: relative; height: 86px; }
.timer .state { position: absolute; inset: 16px; transition: opacity calc(var(--k) * 180ms) linear, transform calc(var(--k) * 240ms) var(--std); }
.timer .row { display: flex; justify-content: space-between; align-items: center; min-height: 20px; }
.timer .row + .row { margin-top: 8px; }
.clock { display: flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 700; }
.clock svg { width: 16px; height: 16px; }
.clock.red { color: var(--brand); }
.clock.green { color: var(--jade-700); }
.left-chip { font-size: 11px; font-weight: 700; color: var(--jade-700); background: rgba(0, 132, 69, 0.08); padding: 2px 4px; border-radius: 4px; margin-inline-start: 8px; }
.timer .small { font-size: 12px; font-weight: 500; }
.timer .ready-at { font-size: 14px; font-weight: 500; }
.timer .ready-at b { font-size: 16px; font-weight: 700; }
.timer .big { font-size: 16px; font-weight: 700; }
.timer .prep { opacity: 0; transform: translateY(12px); }
.card.morphed .timer .new { opacity: 0; transform: translateY(-12px); }
.card.morphed .timer .prep { opacity: 1; transform: translateY(0); }

.chev { width: 24px; height: 24px; flex: none; }
.contact .chev { width: 20px; height: 20px; }
.items { padding: 16px; }
.items .btn {
  border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px; display: flex; align-items: center; gap: 4px; font-size: 14px;
}
.items .btn b { font-weight: 700; }
.items .btn span { font-weight: 500; }
.items .btn .chev { margin-inline-start: auto; }
.finance { padding: 16px; font-size: 14px; }
.finance .row { display: flex; justify-content: space-between; align-items: center; min-height: 20px; }
.finance .row + .row { margin-top: 8px; }
.finance .total { color: var(--brand); font-weight: 700; }
.finance .refund { width: 32px; height: 32px; border-radius: 8px; background: var(--subtle); display: grid; place-items: center; }
.finance .refund svg { width: 20px; height: 20px; }
.finance .pay { display: flex; align-items: center; gap: 4px; }
.actions { padding: 16px; }
.contacts { display: flex; gap: 8px; }
.contact {
  flex: 1; min-width: 0; border: 1px solid var(--border); background: var(--subtle); border-radius: 8px; padding: 8px;
  display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 500;
}
.contact .av { width: 32px; height: 32px; border-radius: 16px; background: var(--surface); display: grid; place-items: center; flex: none; }
.contact .av svg { width: 22px; height: 22px; }
.contact .contact-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* AppButton: 48dp, 8dp corners, labelLargeSemiBold. bg.warning → bg.success (Jade700). */
.cta {
  margin-top: 16px; height: 48px; border-radius: 8px; background: var(--amber-500); color: #fff; font-size: 14px; font-weight: 600;
  position: relative; overflow: hidden;
}
.cta span {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 8px;
  transition: opacity calc(var(--k) * 160ms) linear, transform calc(var(--k) * 240ms) var(--std);
}
.cta .after { opacity: 0; transform: translateY(14px); }
.card.is-prep .cta { background: var(--jade-700); }
.cta .cta-spin { opacity: 0; }
.cta .cta-spin i {
  width: 20px; height: 20px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.35); border-top-color: #fff;
  animation: spin 0.8s linear infinite;
}
.tab[data-tab="ready"] .ring-catch { border-color: var(--blue-500); }
.card.morphed .cta .before { opacity: 0; transform: translateY(-14px); }
.card.morphed .cta .after { opacity: 1; transform: translateY(0); }

.fold { overflow: hidden; transition: max-height calc(var(--k) * 126ms) linear; transition-delay: calc(var(--k) * var(--d, 0ms)); }
.fold > .sec {
  transform-origin: 50% 0; transition: transform calc(var(--k) * 126ms) linear, opacity calc(var(--k) * 126ms) linear;
  transition-delay: calc(var(--k) * var(--d, 0ms));
}
.card.folded .fold { max-height: 0 !important; }
.card.folded .fold > .sec { transform: perspective(500px) rotateX(-90deg); opacity: 0; }

.ghost {
  position: absolute; z-index: 20; display: none; align-items: center; justify-content: center;
  background: var(--surface); border: 2px solid var(--jade-700); color: var(--text); font-weight: 800; overflow: hidden;
}
.ghost.flying {
  transition:
    left calc(var(--k) * 520ms) cubic-bezier(0.25, 0.1, 0.25, 1),
    top calc(var(--k) * 520ms) cubic-bezier(0.55, 0, 0.85, 0.35),
    width calc(var(--k) * 520ms) var(--std),
    height calc(var(--k) * 520ms) var(--std),
    border-radius calc(var(--k) * 520ms) linear,
    font-size calc(var(--k) * 520ms) linear,
    background calc(var(--k) * 300ms) linear,
    opacity calc(var(--k) * 120ms) linear;
}

.nav {
  position: absolute; left: 0; right: 0; bottom: 0; height: 74px; background: var(--surface); z-index: 8;
  display: flex; justify-content: space-around; align-items: flex-start; padding-top: 10px; border-top: 1px solid #eee;
}
.nav div { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 12px; color: var(--text-2); }
.nav div.on { color: var(--brand); font-weight: 600; }
.nav svg { width: 24px; height: 24px; }

.scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.32); z-index: 30; transition: opacity calc(var(--k) * 280ms) linear; }
.sheet {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 31; background: var(--surface); border-radius: 24px 24px 0 0;
  padding: 10px 16px 24px; transition: transform calc(var(--k) * 280ms) var(--emph-accel);
}
.phone.sheet-closed .scrim { opacity: 0; pointer-events: none; }
.phone.sheet-closed .sheet { transform: translateY(105%); }
.sheet .handle { width: 32px; height: 4px; border-radius: 2px; background: #555; margin: 4px auto 14px; }
.sheet h4 { margin: 0 0 4px; font-size: 16px; }
.sheet p { margin: 0 0 14px; font-size: 13px; color: var(--text-2); }
.chips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 0 8px; }
.chips div { height: 32px; border-radius: 4px; border: 1px solid var(--border); background: var(--subtle); display: grid; place-items: center; font-size: 13px; color: var(--text-3); }
.chips div.sel { border-color: var(--brand); color: var(--brand); }
.sheet .confirm { margin-top: 20px; height: 48px; border-radius: 8px; background: var(--brand); display: grid; place-items: center; }
.spinner { width: 20px; height: 20px; border-radius: 50%; border: 2.5px solid rgba(255,255,255,0.35); border-top-color: #fff; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.phone[dir="rtl"] .hdr .num { margin-inline-start: auto; }