/* Customer app: phone first. Bottom navigation on phones, top tabs from 768px, menu + live order panel side by side from 1024px. */
body[data-role='customer'] { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
.hero { padding: 28px var(--gutter) 8px; max-width: 520px; margin: 0 auto; }
.hero .logo { width: 56px; height: 56px; font-size: 26px; border-radius: 16px; margin-bottom: 14px; }
.hero h1 { font-size: 28px; } .join-status { display: flex; gap: 8px; align-items: center; margin: 10px 0 18px; flex-wrap: wrap; }
.join-card { max-width: 520px; margin: 0 auto 24px; padding-inline: var(--gutter); } .join-card .card { padding: 20px; }
.otp { letter-spacing: .5em; text-align: center; font-size: 26px !important; font-weight: 700; font-family: var(--mono); min-height: 60px !important; }
.devbox { background: var(--info-soft); color: var(--info); border-radius: var(--radius-sm); padding: 10px 12px; margin: 10px 0; font-size: 14px; }
.scan-list { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }

.topbar { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); padding-top: env(safe-area-inset-top, 0px); }
.topbar .in { display: flex; align-items: center; gap: 10px; min-height: 58px; }
.topbar .logo { width: 36px; height: 36px; font-size: 17px; border-radius: 10px; flex: none; } .topbar .who { line-height: 1.2; overflow: hidden; } .topbar .who strong { display: block; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 99px; background: var(--accent-soft); color: var(--accent); font-weight: 700; font-size: 13px; white-space: nowrap; }

.nav { position: fixed; z-index: 60; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(5, 1fr); background: var(--card); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom, 0px); }
.nav button { position: relative; border: 0; background: transparent; min-height: 62px; padding: 6px 2px; display: grid; justify-items: center; align-content: center; gap: 2px; font-size: 11.5px; font-weight: 700; color: var(--mute); cursor: pointer; }
.nav button .ic { font-size: 21px; line-height: 1; } .nav button[aria-current='page'] { color: var(--accent); } .nav button[aria-current='page'] .ic { transform: scale(1.1); }
.nav .count { position: absolute; top: 6px; left: calc(50% + 6px); min-width: 18px; height: 18px; border-radius: 9px; background: var(--accent); color: var(--accent-ink); font-size: 11px; display: grid; place-items: center; padding-inline: 4px; }

.layout { display: block; padding-block: 14px; } .side { display: none; }
.cats { position: sticky; top: 58px; z-index: 40; display: flex; gap: 8px; overflow-x: auto; padding: 10px var(--gutter); margin-inline: calc(var(--gutter) * -1); background: var(--bg); scrollbar-width: none; } .cats::-webkit-scrollbar { display: none; }
.menu-sec { padding-top: 6px; scroll-margin-top: 120px; } .menu-sec > h2 { margin: 14px 0 10px; font-size: 19px; }
.items { display: grid; gap: 10px; grid-template-columns: 1fr; }
.item { display: grid; grid-template-columns: 64px 1fr auto; gap: 12px; align-items: center; padding: 12px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
.item .art img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; } .item .art { overflow: hidden; width: 64px; height: 64px; border-radius: 12px; background: var(--accent-soft); display: grid; place-items: center; font-size: 32px; } .item h3 { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.item .desc { color: var(--mute); font-size: 13px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 2px 0 4px; } .item .price { font-weight: 800; } .item .price s { color: var(--mute); font-weight: 500; margin-right: 4px; } .item .gst { font-size: 11.5px; color: var(--mute); }
.item .act { display: grid; gap: 4px; justify-items: end; }
.item.has-photo { grid-template-columns: 92px 1fr auto; } .item.has-photo .art { width: 92px; height: 92px; border-radius: 14px; } .item.has-photo .art img { border-radius: 14px; }
.stepper { display: inline-flex; align-items: center; background: var(--accent); color: var(--accent-ink); border-radius: 99px; overflow: hidden; } .stepper button { width: 42px; height: 42px; border: 0; background: transparent; color: inherit; font-size: 20px; font-weight: 700; cursor: pointer; } .stepper span { min-width: 22px; text-align: center; font-weight: 800; }
.stepper.light { background: var(--line); color: var(--ink); }
.cartbar { position: fixed; z-index: 55; left: var(--gutter); right: var(--gutter); bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
.line { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; padding: 10px 0; border-bottom: 1px dashed var(--line-strong); } .line:last-child { border-bottom: 0; } .line .nm { font-weight: 700; } .line .dt { color: var(--mute); font-size: 13px; }
.opt { display: flex; align-items: center; gap: 10px; min-height: var(--tap); padding: 6px 10px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); margin-bottom: 8px; cursor: pointer; } .opt input { width: 22px; min-height: 22px; height: 22px; flex: none; accent-color: var(--accent); } .opt .grow { font-weight: 600; }
.person { border-left: 4px solid var(--accent); } .person.me { background: color-mix(in srgb, var(--accent-soft) 45%, var(--card)); }
.share-row { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; padding: 10px 0; border-bottom: 1px solid var(--line); align-items: center; } .share-row:last-child { border-bottom: 0; }
.alloc-input { display: grid; grid-template-columns: 1fr 120px; gap: 10px; align-items: center; margin-bottom: 8px; }
.meter { height: 10px; background: var(--line); border-radius: 6px; overflow: hidden; margin: 6px 0; } .meter i { display: block; height: 100%; background: var(--ok); } .meter.over i { background: var(--bad); }
.success { text-align: center; padding: 8px 0 4px; } .success .tick { width: 64px; height: 64px; border-radius: 50%; background: var(--ok-soft); color: var(--ok); display: grid; place-items: center; font-size: 34px; margin: 0 auto 10px; }
.receipt { border: 1px dashed var(--line-strong); border-radius: var(--radius-sm); padding: 14px; background: var(--card); }
.bank { border: 2px solid var(--info); border-radius: var(--radius); padding: 14px; background: var(--info-soft); }

/* tablet: top tabs, two-column menu */
@media (min-width: 768px) {
  body[data-role='customer'] { padding-bottom: 24px; }
  .nav { position: sticky; top: 58px; bottom: auto; z-index: 45; display: flex; justify-content: center; gap: 6px; border: 0; border-bottom: 1px solid var(--line); background: var(--bg); padding: 8px var(--gutter); }
  .nav button { flex-direction: row; display: inline-flex; min-height: 44px; padding: 6px 16px; border-radius: 99px; font-size: 14px; gap: 8px; } .nav button .ic { font-size: 17px; } .nav button[aria-current='page'] { background: var(--accent-soft); }
  .nav .count { position: static; }
  .cats { top: 116px; } .items { grid-template-columns: repeat(2, 1fr); } .cartbar { left: auto; right: 24px; bottom: 24px; width: 320px; }
  .toasts { bottom: 24px; }
}
/* laptop / desktop: menu and the live order side by side */
@media (min-width: 1024px) {
  .layout.two { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 22px; align-items: start; } .side { display: block; position: sticky; top: 130px; max-height: calc(100dvh - 150px); overflow: auto; }
  .nav button.tab-cart { display: none; } .cartbar { display: none; } .items { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1280px) { .items { grid-template-columns: repeat(3, 1fr); } .layout.two { grid-template-columns: minmax(0, 1fr) 420px; } }
@media (max-width: 359px) { .item { grid-template-columns: 52px 1fr auto; gap: 8px; padding: 10px; } .item .art { width: 52px; height: 52px; font-size: 26px; } .nav button { font-size: 10.5px; } .alloc-input { grid-template-columns: 1fr 96px; } }
@media (min-width: 768px) { .bill-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; } }

/* An item the restaurant has marked unavailable: dimmed, with the word under it. Available items look exactly as before. */
.item.unavailable { opacity: .55; } .item.unavailable .unavail { font-size: 12.5px; font-weight: 700; color: var(--mute); margin-top: 2px; }
.cash-wait { padding: 12px; border-radius: var(--radius); background: var(--warn-soft); border: 1px solid var(--line); }
.people-count { font-size: 15px; } .people-count b { font-size: 26px; }

/* split the bill: Guest 1 … Guest N (Equally / By Items / Custom) */
.guests-pick { display: flex; align-items: center; gap: 10px; margin-top: 6px; } .guests-pick .btn { min-width: 48px; font-size: 22px; padding: 4px 0; }
.guests-pick .gcount { width: 92px; text-align: center; font-size: 22px; font-weight: 800; }
.split-item { border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 10px 12px; background: var(--card); } .split-item.done { border-color: var(--ok); background: color-mix(in srgb, var(--ok-soft) 35%, var(--card)); }
.gchips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.gcells { display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 8px; margin-top: 8px; }
.gcell { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px; border: 1px solid var(--line); border-radius: var(--radius-sm); } .gcell .gl { font-size: 12.5px; color: var(--mute); font-weight: 600; }
.unassigned { border: 2px dashed var(--bad); border-radius: var(--radius-sm); padding: 10px 12px; background: var(--bad-soft); } .unassigned.ok { border-color: var(--ok); background: var(--ok-soft); }
/* By Items: the pool of what is left, and one card per guest */
.pool { border: 1.5px solid color-mix(in srgb, var(--accent) 40%, var(--line)); border-radius: var(--radius); padding: 12px; background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 9%, var(--card)), var(--card)); display: grid; gap: 10px; }
.pool.ok { border-color: var(--ok); background: var(--ok-soft); }
.pool-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; } .pool-head h3 { margin: 0; font-size: 16px; } .pool-hint { font-size: 12.5px; color: var(--mute); font-weight: 600; }
.pool-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pool-chip { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 8px 14px; min-height: var(--tap); border: 1.5px solid color-mix(in srgb, var(--accent) 45%, var(--line)); border-radius: 14px; background: var(--card); color: var(--ink); cursor: pointer; text-align: left; box-shadow: 0 1px 2px rgb(0 0 0 / 8%); transition: transform .12s, box-shadow .12s, background .12s; }
.pool-chip:hover { background: color-mix(in srgb, var(--accent) 10%, var(--card)); box-shadow: 0 3px 8px rgb(0 0 0 / 12%); } .pool-chip:active { transform: scale(.96); }
.pool-chip .pc-name { font-weight: 800; } .pool-chip .pc-price, .pool-chip .pc-order { font-size: 12px; color: var(--mute); }
.guest-card { border: 1.5px solid var(--line-strong); border-radius: var(--radius); padding: 10px 12px 12px; background: var(--card); display: grid; gap: 8px; transition: border-color .12s, box-shadow .12s; } .guest-card.empty { border-style: dashed; }
.guest-card.active { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.gc-head { display: flex; align-items: center; gap: 10px; width: 100%; padding: 2px 0; border: 0; background: transparent; text-align: left; cursor: pointer; min-height: 40px; }
.gc-avatar { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--line); font-weight: 800; flex: none; } .guest-card.active .gc-avatar { background: var(--accent); color: var(--accent-ink); }
.gc-name { font-weight: 800; font-size: 16px; flex: 1; min-width: 0; } .gc-tag { font-size: 11.5px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; color: var(--accent); }
.gc-lines { display: flex; flex-wrap: wrap; gap: 6px; }
.line-chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px 6px 12px; min-height: 38px; border: 1px solid var(--line-strong); border-radius: 99px; background: color-mix(in srgb, var(--ok-soft) 55%, var(--card)); color: var(--ink); cursor: pointer; font-size: 14px; transition: background .12s, border-color .12s; }
.line-chip:hover { background: var(--bad-soft); border-color: var(--bad); } .line-chip .lc-name { font-weight: 700; } .line-chip .lc-price { color: var(--mute); font-variant-numeric: tabular-nums; } .line-chip .lc-x { font-size: 12px; color: var(--mute); }
.guest-card .gpick { width: 100%; }
.review-guest .total-line { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 8px; }
.review-guest { border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 10px 12px; background: var(--card); }
.review-guest .guest-total { font-size: 20px; white-space: nowrap; }
.guest-name { border: 0; border-bottom: 1px dashed var(--line-strong); border-radius: 0; background: transparent; font-weight: 800; font-size: 16px; min-height: 40px; padding: 4px 0; }
.check { border-radius: var(--radius-sm); padding: 10px 12px; border: 1px solid var(--line-strong); } .check.ok { border-color: var(--ok); background: var(--ok-soft); } .check.bad { border-color: var(--bad); background: var(--bad-soft); }
.alloc-input .guest-name { min-width: 0; }

/* ── polish (2026-09-23) ── the restaurant name and "Table 12 · Browsing" stack in two lines (the shell's .who is a one-line row) */
.topbar .who { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; white-space: normal; }
.topbar .who > strong, .topbar .who > span { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar .pill, .topbar .conn { flex: none; }
@media (max-width: 480px) { .topbar .conn > span { display: none; } } /* phones: the dot alone says live / auto-refresh */
/* welcome after a scan: number and name, both optional */
.welcome-form label .optional { font-weight: 500; font-size: 12px; }
.welcome-form .skip { margin-top: 8px; }
@media (prefers-reduced-motion: no-preference) { .hero.welcome, .hero.welcome + .join-card { animation: welcome-in .35s cubic-bezier(.2, .8, .2, 1) both; } .hero.welcome + .join-card { animation-delay: .06s; } }
@keyframes welcome-in { from { opacity: 0; transform: translateY(12px); } }