/* Craftfiti BKK staff page. Mobile first (390px), centred column up to 560px on tablets.
   Brand tokens copied from css/site.css :root. This page never loads the customer stylesheet. */

:root {
  --ink: #15110D;
  --ink-2: #1E1812;
  --ink-3: #0E0B08;
  --paper: #EDE8DD;
  --cream: #F6F2EA;
  --yellow: #F5D547;
  --accent: #F5D547;          /* yellow used as TEXT / outline (a darker gold on the light theme) */
  --on-yellow: #15110D;       /* text on a yellow fill, in both themes */
  --red: #A3232B;
  --red-soft: #E5646B;
  --green: #2F6B3A;
  --green-soft: #7FD08F;
  --muted: #CFC6B6;
  --line: #3A3128;
  --sel-bg: #2a2214;
  --taken-bg: #3a1a1c;
  --picked-bg: #2e2610;
  --tabs-h: 64px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  color-scheme: dark;
}
/* Light theme (B6): same names, light values. Chosen with the sun / moon button; remembered on this phone. */
:root[data-theme="light"] {
  --ink: #F6F2EA;
  --ink-2: #FFFFFF;
  --ink-3: #ECE6D8;
  --cream: #15110D;
  --accent: #7A5D00;
  --red-soft: #A3232B;
  --green-soft: #2F6B3A;
  --muted: #5B5347;
  --line: #CFC6B6;
  --sel-bg: #FFF3C2;
  --taken-bg: #F6DADB;
  --picked-bg: #FFF3C2;
  color-scheme: light;
}
/* Floor plan colours (ported from the old page's tokens: dark = night mood, light = atelier) */
.plan {
  --pl-paper: #0A0908; --pl-paper-2: #15120F; --pl-paper-3: #1F1A14;
  --pl-ink: #F5F0E6; --pl-ink-2: #A8A29E; --pl-ink-3: #6B6358;
  --pl-rule: #2A241D; --pl-rule-strong: #3A3328;
  --pl-marker: #C8821F; --pl-marker-deep: #E6A040;
  --pl-wood: #7A4F2B; --pl-wood-edge: #5A371D; --pl-wood-grain: #A06D3F;
  --pl-sofa: #6B2C2C; --pl-sofa-edge: #4A1A1A; --pl-sofa-grain: #8A4040;
  --pl-table-dark: #1F1A14; --pl-table-edge: #3A2E1F;
  --pl-ok: #6BA572; --pl-pick: #5BB8DF; --pl-stage: #0d0c0a; --pl-stage-text: #F5F0E6;
}
:root[data-theme="light"] .plan {
  --pl-paper: #FAF8F3; --pl-paper-2: #F2EEE4; --pl-paper-3: #E9E3D2;
  --pl-ink: #15110C; --pl-ink-2: #4A443B; --pl-ink-3: #8C8579;
  --pl-rule: #E5DFD1; --pl-rule-strong: #C9C1AC;
  --pl-marker: #F5C518; --pl-marker-deep: #B88A00;
  --pl-ok: #3F7A33; --pl-pick: #2F7FB0; --pl-stage-text: #FAF8F3;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--ink-3); -webkit-text-size-adjust: 100%; font-variant-numeric: lining-nums; }
html.no-scroll { overflow: hidden; }
body {
  margin: 0;
  background: var(--ink-3);
  color: var(--cream);
  font-family: 'Poppins', 'Prompt', sans-serif;
  font-size: 15px;
  line-height: 1.4;
}
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--accent); }
h1, h2, h3, p, dl, dd, ol { margin: 0; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.muted { color: var(--muted); }
.pad { padding: 24px 16px; }

/* ---- first paint ---- */
.boot { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; }
.boot__text { color: var(--muted); padding: 24px; }

/* ---- login ---- */
.login { max-width: 420px; margin: 0 auto; padding: calc(40px + var(--safe-t)) 20px 40px; display: flex; flex-direction: column; gap: 20px; }
.login__logo { display: block; width: 200px; height: auto; margin: 0 auto; }
.login__title { font-size: 24px; font-weight: 700; text-align: center; }

/* ---- shell ---- */
.app { max-width: 560px; margin: 0 auto; min-height: 100vh; min-height: 100dvh; background: var(--ink); padding-bottom: calc(var(--tabs-h) + var(--safe-b) + 96px); /* room for the + button */ }
.app--notabs { padding-bottom: 24px; }
.topwrap { position: sticky; top: 0; z-index: 20; }
.top { position: relative; display: flex; align-items: center; gap: 10px; padding: calc(8px + var(--safe-t)) 12px 8px; background: var(--ink-3); border-bottom: 1px solid var(--line); }
.top__logo { width: 78px; height: auto; flex: none; }
.top__date { flex: 1; min-width: 0; font-weight: 700; letter-spacing: .04em; font-size: 14px; text-align: center; color: var(--accent); }
.top__user { min-height: 44px; max-width: 45%; padding: 0 14px; border-radius: 22px; border: 1px solid var(--line); background: var(--ink-2); font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.statusline { display: flex; align-items: center; gap: 8px; padding: 2px 12px 2px 16px; font-size: 12px; color: var(--muted); min-height: 48px; }
.statusline__text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.sync { min-height: 44px; padding: 0 12px; border-radius: 22px; border: 1px solid var(--line); background: var(--ink-2); color: var(--cream); font-size: 12px; font-weight: 600; white-space: nowrap; cursor: pointer; }
.themebtn { width: 44px; height: 44px; flex: none; border-radius: 50%; border: 1px solid var(--line); background: var(--ink-2); color: var(--cream); font-size: 18px; line-height: 1; cursor: pointer; }
.view { padding: 0 12px 16px; display: flex; flex-direction: column; gap: 16px; }
.view-wrap { display: block; }

/* ---- tabs + fab ---- */
.tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; max-width: 560px; margin: 0 auto; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; background: var(--ink-3); border-top: 1px solid var(--line); padding-bottom: var(--safe-b); }
.tabs__btn { position: relative; min-height: var(--tabs-h); background: none; border: 0; font-weight: 600; font-size: 14px; letter-spacing: .02em; color: var(--muted); cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; }
.tabs__btn.is-active { color: var(--accent); box-shadow: inset 0 3px 0 var(--accent); }
.tabs__badge { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--yellow); color: var(--on-yellow); font-size: 12px; font-weight: 700; display: inline-grid; place-items: center; }
.fab { position: fixed; z-index: 25; bottom: calc(var(--tabs-h) + var(--safe-b) + 14px); right: max(14px, calc(50% - 280px + 14px)); width: 56px; height: 56px; border-radius: 50%; border: 0; background: var(--yellow); color: var(--on-yellow); font-size: 32px; font-weight: 700; line-height: 1; box-shadow: 0 6px 18px rgba(0,0,0,.5); cursor: pointer; }

/* ---- buttons ---- */
.btn { min-height: 44px; padding: 0 16px; border-radius: 12px; border: 2px solid transparent; font-weight: 600; font-size: 14px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; text-align: center; line-height: 1.2; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn--block { display: flex; width: 100%; }
.btn--primary { background: var(--yellow); color: var(--on-yellow); }
.btn--ghost { background: transparent; border-color: var(--line); color: var(--cream); }
.btn--ok { background: var(--green); color: #fff; }
.btn--danger { background: var(--red); color: #fff; }
.btn--ghost-danger { background: transparent; border-color: var(--red); color: var(--red-soft); }
.stack { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }

/* ---- booking card ---- */
.group { display: flex; flex-direction: column; gap: 10px; }
.group__title { font-size: 13px; font-weight: 700; letter-spacing: .08em; color: var(--accent); padding-top: 6px; }
.group--late .group__title { color: var(--red-soft); }
.card { background: var(--ink-2); border: 1px solid var(--line); border-left: 4px solid var(--line); border-radius: 14px; overflow: hidden; }
.card--pending { border-left-color: var(--yellow); }
.card--approved { border-left-color: var(--muted); }
.card--arrived { border-left-color: var(--green-soft); }
.card--late { border-left-color: var(--red-soft); }
.card--cancelled, .card--no_show { opacity: .8; border-left-color: var(--red); }
.card__main { display: flex; flex-direction: column; gap: 6px; width: 100%; min-height: 44px; padding: 12px 14px 6px; background: none; border: 0; text-align: left; cursor: pointer; }
.card__l1 { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.card__time { font-weight: 700; font-size: 17px; }
.card__name { font-weight: 600; font-size: 17px; overflow-wrap: anywhere; min-width: 0; }
.card__party { font-weight: 700; color: var(--accent); }
.card__l2 { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-size: 12px; }
.card__code { color: var(--muted); font-size: 12px; }
.card__l3 { display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.card__tables { font-weight: 600; color: var(--green-soft); }
.card__notes { color: var(--muted); overflow-wrap: anywhere; font-family: 'Prompt', 'Poppins', sans-serif; }
.card__row { padding: 0 14px; }
.card__phone { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; text-decoration: none; letter-spacing: .02em; }
.card__actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 6px 14px 14px; }
.card__actions .btn { flex: 1 1 auto; min-width: 88px; }
.card__actions .btn--primary { flex: 2 1 160px; }

.pill, .chip-tag { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 700; letter-spacing: .05em; border: 1px solid var(--line); color: var(--muted); }
.pill--pending { background: var(--yellow); color: var(--on-yellow); border-color: var(--yellow); }
.pill--approved { border-color: var(--muted); color: var(--cream); }
.pill--arrived { background: var(--green); color: #fff; border-color: var(--green); }
.pill--cancelled, .pill--no_show { background: var(--red); color: #fff; border-color: var(--red); }
.chip-tag--late { background: var(--red); color: #fff; border-color: var(--red); }
.chip-tag--web { color: var(--accent); border-color: var(--accent); }
.chip-tag--event { color: var(--cream); }
.chip-tag--role { color: var(--cream); }
.chip-tag--ok { color: var(--green-soft); border-color: var(--green); }
.chip-tag--bad { color: var(--red-soft); border-color: var(--red); }

.empty { padding: 32px 12px; text-align: center; color: var(--muted); }

/* ---- nights ---- */
.strip { display: flex; gap: 8px; overflow-x: auto; padding: 4px 0 8px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
.strip__day { position: relative; flex: none; width: 76px; min-height: 76px; padding: 6px 4px; border-radius: 12px; border: 1px solid var(--line); background: var(--ink-2); cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; scroll-snap-align: start; }
.strip__day.is-sel { border-color: var(--accent); background: var(--sel-bg); }
.strip__day.is-closed { opacity: .7; }
.strip__wd { font-size: 11px; font-weight: 600; letter-spacing: .06em; color: var(--muted); }
.strip__d { font-size: 22px; font-weight: 700; line-height: 1.1; }
.strip__n { font-size: 11px; color: var(--muted); }
.is-closed .strip__n { color: var(--red-soft); font-weight: 700; }
.strip__dot { position: absolute; top: 6px; right: 8px; width: 10px; height: 10px; border-radius: 50%; background: var(--yellow); }
.night { display: flex; flex-direction: column; gap: 2px; }
.night__date { font-size: 20px; font-weight: 700; }
.night__seats { font-size: 17px; font-weight: 600; }
.night__pending { color: var(--accent); font-weight: 600; }
.banner { padding: 12px 14px; border-radius: 12px; font-weight: 500; }
.banner--closed { background: rgba(163, 35, 43, .25); border: 1px solid var(--red); }
.fold { min-height: 44px; width: 100%; text-align: left; padding: 0 14px; border-radius: 12px; background: var(--ink-2); border: 1px solid var(--line); font-weight: 600; cursor: pointer; }
.fold::after { content: '▾'; float: right; line-height: 42px; }
.fold[aria-expanded="true"]::after { content: '▴'; }
.tables__floor { margin-top: 10px; font-size: 12px; font-weight: 700; letter-spacing: .08em; color: var(--muted); }
.tables__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 8px; margin-top: 6px; }
.tcell { min-height: 48px; border-radius: 10px; border: 1px solid var(--line); background: var(--ink-2); cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2px; }
.tcell__id { font-weight: 700; }
.tcell__st { font-size: 11px; color: var(--green-soft); }
.tcell--taken { background: var(--taken-bg); border-color: var(--red); }
.tcell--taken .tcell__st { color: var(--red-soft); }
.tcell[aria-pressed="true"] { outline: 2px solid var(--accent); }
.tables__info { margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: var(--ink-2); border: 1px solid var(--line); overflow-wrap: anywhere; }

/* ---- search ---- */
.searchbar { position: sticky; top: calc(60px + var(--safe-t) + var(--quota-h, 0px)); z-index: 10; background: var(--ink); padding: 4px 0 8px; }
.results { display: flex; flex-direction: column; gap: 10px; }

/* ---- forms ---- */
.form { display: flex; flex-direction: column; gap: 14px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field__label { font-size: 13px; font-weight: 600; color: var(--muted); }
.field__hint { font-size: 12px; color: var(--muted); }
.field__error, .form__msg { color: var(--red-soft); font-size: 13px; min-height: 0; overflow-wrap: anywhere; }
.form__msg:empty, .field__error:empty { display: none; }
.input { width: 100%; min-height: 48px; padding: 8px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--ink-3); font-size: 16px; /* 16px stops iOS zoom */ }
textarea.input { min-height: 84px; resize: vertical; font-family: 'Prompt', 'Poppins', sans-serif; }
.input[aria-invalid] { border-color: var(--red-soft); }
.input--pin { letter-spacing: .4em; text-align: center; font-size: 20px; }
.input--search { font-size: 16px; }
.stepper { display: grid; grid-template-columns: 52px 1fr 52px; gap: 8px; }
.stepper__btn { font-size: 24px; padding: 0; }
.stepper__input { text-align: center; font-weight: 700; font-size: 20px; -moz-appearance: textfield; }
.stepper__input::-webkit-outer-spin-button, .stepper__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.check { display: flex; align-items: center; gap: 12px; min-height: 44px; }
.check input { width: 24px; height: 24px; accent-color: var(--accent); }
select.input { appearance: auto; }

/* ---- sheets ---- */
.sheet-overlay { position: fixed; inset: 0; z-index: 60; background: rgba(0, 0, 0, .62); display: flex; align-items: flex-end; justify-content: center; }
.sheet { width: 100%; max-width: 560px; max-height: 92vh; max-height: 92dvh; display: flex; flex-direction: column; background: var(--ink-2); border-radius: 18px 18px 0 0; border: 1px solid var(--line); border-bottom: 0; animation: sheet-up .18s ease-out; }
.sheet--full { height: 92vh; height: 92dvh; }
.sheet__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px 6px 16px; border-bottom: 1px solid var(--line); flex: none; }
.sheet__title { font-size: 17px; font-weight: 700; overflow-wrap: anywhere; }
.sheet__close { width: 48px; height: 48px; flex: none; background: none; border: 0; font-size: 30px; line-height: 1; cursor: pointer; }
.sheet__body { padding: 16px; overflow-y: auto; flex: 1 1 auto; -webkit-overflow-scrolling: touch; padding-bottom: calc(16px + var(--safe-b)); }
.sheet__text { font-size: 16px; }
.sheet__foot { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px calc(10px + var(--safe-b)); border-top: 1px solid var(--line); background: var(--ink-2); }
@keyframes sheet-up { from { transform: translateY(24px); opacity: .6; } to { transform: none; opacity: 1; } }

.kvs { display: flex; flex-direction: column; }
.kv { display: grid; grid-template-columns: 90px 1fr; gap: 8px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.kv dt { color: var(--muted); font-size: 13px; }
.kv dd { overflow-wrap: anywhere; font-family: 'Prompt', 'Poppins', sans-serif; }
.kv a { display: inline-flex; align-items: center; min-height: 44px; }
.history { margin-top: 12px; }
.history__list { padding-left: 18px; display: flex; flex-direction: column; gap: 10px; font-size: 13px; }

/* ---- picker ---- */
.picker__who { font-weight: 600; margin-bottom: 10px; overflow-wrap: anywhere; }
.picker__msg { color: var(--red-soft); min-height: 0; margin: 8px 0; overflow-wrap: anywhere; }
.picker__msg:empty { display: none; }
.picker__sec { margin-top: 14px; }
.picker__sec-title { font-size: 13px; font-weight: 700; letter-spacing: .08em; color: var(--accent); margin-bottom: 8px; }
.picker__chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 8px; }
.chip { min-height: 64px; padding: 6px 8px; border-radius: 12px; border: 2px solid var(--line); background: var(--ink-3); cursor: pointer; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; text-align: left; }
.chip__id { font-weight: 700; font-size: 16px; }
.chip__name { font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.chip__seats { font-size: 12px; color: var(--cream); }
.chip__tag { font-size: 10px; font-weight: 700; letter-spacing: .05em; color: var(--accent); }
.chip__tag:empty { display: none; }
.chip:disabled { opacity: .4; cursor: not-allowed; }
.chip--taken { border-style: dashed; border-color: var(--red); }
.chip--taken .chip__tag { color: var(--red-soft); }
.chip--picked { border-color: var(--accent); background: var(--picked-bg); opacity: 1 !important; }
.picker__count { font-weight: 700; font-size: 17px; color: var(--red-soft); }
.picker__count--ok { color: var(--green-soft); }
.switch { display: flex; align-items: center; gap: 12px; min-height: 48px; width: 100%; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }
.switch__knob { position: relative; flex: none; width: 48px; height: 28px; border-radius: 14px; background: var(--line); transition: background .15s; }
.switch__knob::after { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--ink-2); transition: transform .15s; }
.switch--on .switch__knob { background: var(--yellow); }
.switch--on .switch__knob::after { transform: translateX(20px); background: var(--on-yellow); }
.switch__label { font-weight: 600; }

/* ---- accounts ---- */
.accounts { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
.accounts__add { margin-top: 14px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; }
.account { padding: 12px; border: 1px solid var(--line); border-radius: 12px; display: flex; flex-direction: column; gap: 8px; background: var(--ink-3); }
.account__top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.account__name { font-size: 16px; margin-right: 4px; overflow-wrap: anywhere; }
.account__meta { font-size: 12px; color: var(--muted); }
.account__btns { display: flex; flex-wrap: wrap; gap: 8px; }
.account__btns .btn { flex: 1 1 auto; }

/* ---- notice (content role) ---- */
.notice { margin: 24px 12px; padding: 20px; border: 1px solid var(--line); border-radius: 14px; background: var(--ink-2); display: flex; flex-direction: column; gap: 8px; }
.notice__title { font-size: 18px; }

/* ---- segmented buttons (floor, view, picker view) ---- */
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; align-self: flex-start; }
.seg__btn { min-height: 44px; min-width: 56px; padding: 0 14px; background: var(--ink-2); border: 0; font-weight: 600; font-size: 14px; color: var(--muted); cursor: pointer; }
.seg__btn + .seg__btn { border-left: 1px solid var(--line); }
.seg__btn[aria-pressed="true"] { background: var(--yellow); color: var(--on-yellow); }

/* ---- nights navigation (any date, history) ---- */
.nav { display: flex; flex-direction: column; gap: 10px; }
.navrow { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.jumprow { display: flex; flex-direction: column; gap: 6px; }
.jumpline { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.jumpline .btn { white-space: nowrap; }
:root[data-theme="light"] .top__logo, :root[data-theme="light"] .login__logo { filter: invert(1); }
.datestep { display: grid; grid-template-columns: 52px 1fr 52px; gap: 8px; }
.datestep .btn { padding: 0; font-size: 22px; }

/* ---- floor plan ---- */
.floor { display: flex; flex-direction: column; gap: 10px; }
.floorhead { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; }
.plan { width: 100%; max-width: 420px; margin: 0 auto; border: 1px solid var(--line); border-radius: 14px; background: var(--pl-paper-2); padding: 6px; }
.plan[data-floor="2F"] { max-width: 360px; }
.plan__svg { display: block; width: 100%; height: auto; }
.plan g[role="button"]:focus-visible { outline: none; }
.plan g[role="button"]:focus-visible rect:last-of-type { stroke: var(--pl-pick); stroke-width: 4; }
.picker__legend { font-size: 12px; color: var(--muted); }
.picker__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.picker__bar .switch { width: auto; }
.picker__planwrap { display: flex; flex-direction: column; gap: 8px; }
.picker__plan { display: block; }
.currently { margin-top: 6px; }
.currently__list { list-style: none; padding: 0; margin: 6px 0 0; display: flex; flex-direction: column; gap: 6px; }
.currently__row { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 10px 12px; border: 1px solid var(--line); border-left: 4px solid var(--green-soft); border-radius: 12px; background: var(--ink-2); }
.currently__name { font-weight: 600; overflow-wrap: anywhere; }
.currently__tables { font-weight: 700; color: var(--green-soft); }
.currently__meta { grid-column: 1 / -1; font-size: 12px; color: var(--muted); }

/* ---- hours ---- */
.hourscard { padding: 14px; display: flex; flex-direction: column; gap: 10px; background: var(--ink-2); border: 1px solid var(--line); border-radius: 14px; }
.hourscard__date { font-weight: 700; font-size: 17px; }
.hourscard__state { color: var(--muted); overflow-wrap: anywhere; }
.closedlist { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.closedlist__btn { width: 100%; min-height: 48px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 8px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--ink-2); text-align: left; cursor: pointer; }
.closedlist__date { font-weight: 700; }
.closedlist__reason { color: var(--muted); flex: 1; min-width: 0; overflow-wrap: anywhere; }
.weekly { padding: 6px 14px; background: var(--ink-2); border: 1px solid var(--line); border-radius: 14px; }
.weekly__row { display: flex; align-items: center; gap: 10px; min-height: 44px; border-bottom: 1px solid var(--line); }
.weekly__row:last-child { border-bottom: 0; }
.weekly__day { width: 44px; font-weight: 700; color: var(--muted); }
.weekly__hours { margin-left: auto; font-variant-numeric: tabular-nums; }
.outbox { padding: 10px 12px; border-radius: 10px; border: 1px solid var(--accent); overflow-wrap: anywhere; }
.field__hint--warn { color: var(--accent); font-weight: 600; }

/* ---- toasts ---- */
.toasts { position: fixed; z-index: 100; left: 12px; right: 12px; bottom: calc(var(--tabs-h) + var(--safe-b) + 84px); max-width: 536px; margin: 0 auto; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.toast { padding: 12px 16px; border-radius: 12px; background: var(--cream); color: var(--ink); font-weight: 600; box-shadow: 0 8px 24px rgba(0,0,0,.5); overflow-wrap: anywhere; animation: sheet-up .18s ease-out; }
.toast--error { background: var(--red); color: #fff; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media (min-width: 600px) {
  .sheet-overlay { align-items: center; }
  .sheet { border-radius: 18px; border-bottom: 1px solid var(--line); }
}

/* ====================================================================================================
   Content tab (Phase 3): events, promotions, pictures, storage warning
   ==================================================================================================== */

/* the red banner on every screen when storage / database is >= 85 % full (owner + content) */
.quota { padding: 10px 14px; background: var(--red); color: #fff; font-family: 'Prompt', 'Poppins', sans-serif; font-size: 13px; font-weight: 500; line-height: 1.4; overflow-wrap: anywhere; }
.tabs__btn { font-size: 13px; }

.cview { display: flex; flex-direction: column; gap: 12px; padding: 0 12px 24px; }
.usage { background: var(--ink-2); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; font-size: 12px; }
.usage__l { display: flex; justify-content: space-between; gap: 8px; font-weight: 600; margin-bottom: 5px; }
.bar { height: 6px; background: var(--line); border-radius: 3px; overflow: hidden; margin-bottom: 8px; }
.bar i { display: block; height: 100%; background: var(--green); border-radius: 3px; }
.bar i.y { background: #B8860B; }
.bar i.r { background: var(--red); }
.cnote { font-family: 'Prompt', 'Poppins', sans-serif; font-size: 12px; line-height: 1.45; color: var(--muted); overflow-wrap: anywhere; }
.usage .cnote { margin-top: 2px; padding: 8px 10px; border-radius: 10px; color: var(--cream); }
.cnote--warn { background: rgba(184, 134, 11, .22); border: 1px solid #B8860B; }
.cnote--red { background: var(--red); color: #fff !important; border: 1px solid var(--red); }
.cnote--block { background: transparent; border: 1.5px dashed var(--red); color: var(--red-soft) !important; text-align: center; font-weight: 500; }
.cseg { align-self: stretch; display: flex; }
.cseg .seg__btn { flex: 1; min-width: 0; padding: 0 6px; font-size: 12px; letter-spacing: .04em; }
.clist, .cedit { display: flex; flex-direction: column; gap: 12px; }
.chd { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.chd__t { font-size: 20px; font-weight: 800; letter-spacing: .08em; }
.btn--sm { min-height: 44px; padding: 0 14px; font-size: 12px; letter-spacing: .06em; font-weight: 800; border-radius: 999px; }
.clist__cards { display: flex; flex-direction: column; gap: 10px; }
.ccard { display: flex; align-items: stretch; background: var(--ink-2); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.ccard__main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; min-height: 76px; padding: 10px; background: none; border: 0; text-align: left; cursor: pointer; }
.ccard__t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ccard__d { font-size: 11px; font-weight: 600; letter-spacing: .08em; color: var(--muted); }
.ccard__n { font-size: 14px; font-weight: 700; line-height: 1.2; overflow-wrap: anywhere; }
.ccard__chips { display: flex; flex-wrap: wrap; gap: 4px; }
.ccard__go { font-size: 11px; font-weight: 800; letter-spacing: .06em; color: var(--red-soft); white-space: nowrap; }
.ccard__act { flex: none; min-width: 84px; padding: 0 12px; background: transparent; border: 0; border-left: 1px solid var(--line); font-size: 11px; font-weight: 800; letter-spacing: .06em; color: var(--accent); cursor: pointer; }
.ccard__act:disabled { opacity: .45; cursor: not-allowed; }
.ccard--past .cthumb { filter: grayscale(1); opacity: .7; }
.ccard__order { flex: none; display: flex; flex-direction: column; border-right: 1px solid var(--line); }
.ccard__mv { flex: 1; min-width: 44px; min-height: 44px; background: none; border: 0; font-size: 14px; font-weight: 800; color: var(--muted); cursor: pointer; }
.ccard__mv:disabled { opacity: .25; cursor: default; }
.cthumb { flex: none; width: 54px; height: 54px; border-radius: 10px; object-fit: cover; background: linear-gradient(135deg, #A3232B, #F5D547); }
.cthumb--empty { display: block; opacity: .35; }
.cchip { display: inline-block; padding: 2px 7px; border-radius: 999px; font-size: 9px; font-weight: 700; letter-spacing: .08em; background: var(--line); color: var(--cream); border: 0; }
.cchip--live { background: var(--green); color: #fff; }
.cchip--draft { background: #B8860B; color: #fff; }
.cchip--archived, .cchip--past { background: #6b6358; color: #fff; }
.cchip--book { background: var(--yellow); color: var(--on-yellow); }
.cchip--pick { font-size: 11px; padding: 6px 10px; cursor: pointer; min-height: 44px; }
.serieschips { display: flex; flex-wrap: wrap; gap: 6px; }

.chead { display: flex; align-items: center; gap: 8px; padding: 4px 0; position: sticky; top: calc(60px + var(--safe-t) + var(--quota-h, 0px)); z-index: 12; background: var(--ink); }
.chead__back { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: var(--ink-2); font-size: 26px; line-height: 1; cursor: pointer; }
.chead__t { flex: 1; min-width: 0; font-size: 16px; font-weight: 800; letter-spacing: .06em; overflow-wrap: anywhere; }
.cform { gap: 16px; }
.two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.two > .field { min-width: 0; }
.two .input { min-width: 0; padding-inline: 8px; }
.cform .input { min-width: 0; }
.pic .upl { display: flex; gap: 12px; align-items: center; }
.pic__holder { flex: none; }
.pic__img { display: block; width: 72px; height: 72px; border-radius: 10px; object-fit: cover; background: linear-gradient(135deg, #A3232B, #F5D547); }
.pic__img--empty { opacity: .3; }
.pic__img--round { border-radius: 50%; }
.upl__side { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.upl__btns { display: flex; flex-wrap: wrap; gap: 8px; }
.pic__btn { min-height: 44px; padding: 0 14px; font-size: 12px; font-weight: 800; letter-spacing: .06em; border-radius: 999px; }
.pic__status { font-size: 12px; color: var(--green-soft); min-height: 0; overflow-wrap: anywhere; }
.pic__status:empty { display: none; }
.hl { display: flex; gap: 6px; }
.hlbtn { flex: 1; min-height: 44px; padding: 0 4px; border: 1.5px solid var(--cream); border-radius: 10px; background: transparent; font-size: 11px; font-weight: 700; letter-spacing: .02em; cursor: pointer; }
.hlbtn[aria-pressed="true"] { background: var(--cream); color: var(--ink); }
.hl-edit { display: flex; flex-direction: column; gap: 8px; }
.hl-edit__row { display: grid; grid-template-columns: 54px 1fr; gap: 8px; align-items: center; }
.hl-edit__tag { font-size: 11px; font-weight: 800; letter-spacing: .06em; color: var(--muted); }
.cview__link { align-self: flex-start; display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; }
.cview__link--off { color: var(--muted); font-weight: 500; font-size: 12px; }
.acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.acts .btn { font-size: 12px; font-weight: 800; letter-spacing: .06em; }
.cfoot { font-size: 11px; color: var(--muted); text-align: center; overflow-wrap: anywhere; }

/* preview of the calendar cell + the event card (same look as the website; cut-out = whole, on the tile colour) */
.pv { display: flex; gap: 10px; align-items: stretch; }
.pv__cell { flex: none; position: relative; width: 62px; height: 62px; padding: 4px; background: #F1E2A0; color: #15110D; border: 1.5px solid #3A3128; overflow: hidden; }
.pv__num { display: block; font-family: 'Playfair Display', serif; font-weight: 900; font-size: 13px; line-height: 1; }
.pv__lbl { display: block; margin-top: 2px; font-size: 7px; font-weight: 700; line-height: 1.15; color: #A3232B; white-space: pre-line; }
.pv__img { position: absolute; right: 2px; bottom: 2px; width: 24px; height: 24px; border-radius: 50%; object-fit: cover; border: 0; }
.pv__img.is-cutout { object-fit: contain; border-radius: 0; background: transparent; width: auto; height: 60px; max-width: 55%; right: -2px; bottom: 0; }
.pv__cell:has(.is-cutout) { overflow: visible; }
.pv__lbl { position: relative; z-index: 1; }
.pv__art.is-cutout { object-fit: contain; border: 0; border-radius: 0; background: transparent; width: auto; height: 56px; max-width: 80px; }
.pv__card { flex: 1; min-width: 0; display: flex; align-items: stretch; min-height: 62px; border: 2px solid rgba(246, 242, 234, .85); border-radius: 16px; background: #15110D; color: #F6F2EA; overflow: hidden; }
.pv__date { width: 54px; flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; border-right: 2px solid rgba(246, 242, 234, .85); line-height: 1.05; }
.pv__day { font-size: 18px; font-weight: 800; }
.pv__mon { font-size: 12px; font-weight: 800; letter-spacing: 1px; }
.pv__body { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; padding: 6px 8px; gap: 2px; }
.pv__title { font-size: 11px; font-weight: 500; letter-spacing: .06em; line-height: 1.2; overflow-wrap: anywhere; }
.pv__when { font-size: 9px; font-weight: 300; color: #CFC6B6; }
.pv__art { align-self: center; flex: none; width: 36px; height: 36px; margin-right: 8px; border-radius: 50%; object-fit: cover; border: 1.5px solid rgba(246, 242, 234, .85); }
.export__img { display: block; width: 100%; height: auto; max-height: 56vh; object-fit: contain; border-radius: 10px; background: #000; }

/* P3D: top segment + the EXPORT screen (two identical blocks) */
.seg--top { display: flex; width: 100%; align-self: stretch; }
.seg--top .seg__btn { flex: 1; min-height: 48px; font-size: 14px; letter-spacing: .06em; }
.seg--sub .seg__btn { min-height: 44px; font-size: 13px; background: transparent; }
.seg--sub .seg__btn[aria-pressed="true"] { background: var(--cream); color: var(--ink); }
.clist--export { gap: 16px; }
.xhead { display: flex; flex-direction: column; gap: 2px; padding: 4px 0 2px; }
.xhead__t { font-size: 22px; font-weight: 800; letter-spacing: .08em; }
.xhead__s { font-size: 12px; color: var(--muted); }
.xblock { display: flex; flex-direction: column; gap: 10px; padding: 14px; background: var(--ink-2); border: 1px solid var(--line); border-left: 4px solid var(--yellow); border-radius: 14px; }
.xblock__head { display: flex; align-items: center; gap: 10px; }
.xblock__num { flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--yellow); color: var(--on-yellow); font-weight: 800; font-size: 14px; display: grid; place-items: center; }
.xblock__t { font-size: 16px; font-weight: 800; }
.xblock__e { font-size: 11px; letter-spacing: .1em; color: var(--muted); }
.xlabel { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-top: 2px; }
.xblock__pick { display: flex; gap: 6px; align-items: stretch; }
.xblock__pick .input { flex: 1; min-width: 0; text-align: center; text-align-last: center; appearance: none; -webkit-appearance: none; }
.xblock__pick select.input { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xblock__step { flex: none; width: 48px; min-height: 48px; padding: 0; font-size: 22px; }
.xblock__meta { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px dashed var(--line); border-radius: 10px; }
.xblock__thumb { width: 40px; height: 40px; }

/* ---- R2C: LIVE card + GALLERY albums ---- */
/* five tabs on 390 px: the segment scrolls sideways (snap) instead of wrapping if they do not all fit */
.seg--top { overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; }
.seg--top::-webkit-scrollbar { display: none; }
.seg--top .seg__btn { flex: 1 0 auto; scroll-snap-align: start; }
.cseg.seg--top .seg__btn { padding: 0 8px; }
.lcard { display: flex; flex-direction: column; gap: 12px; }
.lcard__h { margin: 6px 0 0; font-size: 12px; font-weight: 800; letter-spacing: .1em; color: var(--accent); }
.lday-list { display: flex; flex-direction: column; gap: 8px; }
.lday { background: var(--ink-2); border: 1px solid var(--line); border-radius: 12px; padding: 8px 10px 10px; display: flex; flex-direction: column; gap: 8px; }
.lday--off { padding-bottom: 8px; }
.lday__hd { display: grid; grid-template-columns: 52px minmax(0, 1fr); align-items: center; gap: 8px; }
.lday__k { font-size: 14px; font-weight: 800; letter-spacing: .08em; }
.lday__body { display: flex; flex-direction: column; gap: 8px; }
.lday__body:empty { display: none; }
.lover-list { display: flex; flex-direction: column; gap: 6px; }
.lover { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 48px; padding: 0 4px 0 12px; background: var(--ink-2); border: 1px solid var(--line); border-radius: 12px; }
.lover__t { font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.lover__x { flex: none; width: 48px; height: 48px; background: none; border: 0; font-size: 18px; font-weight: 800; color: var(--red-soft); cursor: pointer; }
.lover-add { display: flex; flex-direction: column; gap: 10px; padding: 12px; border: 1px dashed var(--line); border-radius: 12px; }
.lover-name { display: flex; flex-direction: column; gap: 10px; }
.lover-name[hidden] { display: none; }
.empty--sm { padding: 12px; font-size: 13px; }
.cthumb--album { width: 72px; height: 72px; }
.ccard--album .ccard__main { min-height: 92px; }
.photos { display: flex; flex-direction: column; gap: 10px; }
.photos__hd { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.ph__count { font-size: 12px; color: var(--muted); }
.ph__status { font-weight: 600; }
.ph__fails { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.ph__fails:empty { display: none; }
.ph__fail { color: var(--red-soft); font-size: 12px; overflow-wrap: anywhere; }
.phgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.phgrid--empty { display: block; }
.ph { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 4px; background: var(--ink-2); border: 1px solid var(--line); border-radius: 10px; }
.ph--cover { border-color: var(--yellow); }
.ph__imgbox { position: relative; }
.ph__img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 6px; background: linear-gradient(135deg, #A3232B, #F5D547); }
.ph__badge { position: absolute; left: 4px; top: 4px; padding: 1px 5px; border-radius: 4px; background: var(--yellow); color: var(--on-yellow); font-size: 9px; font-weight: 800; letter-spacing: .06em; }
.ph__btns { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.ph__b { min-height: 44px; min-width: 0; padding: 0; border: 1px solid var(--line); border-radius: 8px; background: transparent; font-size: 15px; font-weight: 800; color: var(--cream); cursor: pointer; }
.ph__b:disabled { opacity: .25; cursor: default; }
.ph__cover[aria-pressed="true"] { background: var(--yellow); color: var(--on-yellow); border-color: var(--yellow); }
.ph__del { color: var(--red-soft); }
.ph__cap { min-height: 44px; padding: 0 6px; font-size: 12px; }

/* ---- R3 (community): the guest's club on booking cards, the MEMBER card copy, the album "HOME" chip ---- */
.tbadge { display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; flex: none; }
.tbadge__img { display: block; object-fit: contain; }
.tbadge__abbr { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--cream); color: var(--ink); font-weight: 800; line-height: 1; letter-spacing: 0; }
.card__team { display: inline-flex; align-self: center; }
.kv__team { display: inline-flex; align-items: center; gap: 6px; }
.cchip--home { background: var(--yellow); color: var(--on-yellow); }
.mshared { display: flex; flex-direction: column; gap: 6px; }
.mshared__row { display: grid; grid-template-columns: minmax(0, 1fr) 48px; gap: 8px; align-items: end; }
.mshared__rm { min-width: 48px; padding: 0; }
.mtier { display: flex; flex-direction: column; gap: 10px; padding: 12px; border: 1px solid var(--line); border-left-width: 6px; border-radius: 12px; }
.mtier--blue { border-left-color: #4a90c8; }
.mtier--green { border-left-color: #6ba85a; }
.mtier--red { border-left-color: #c8564a; }
.mpreview { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; padding: 14px; background: var(--ink-2); border: 1px dashed var(--line); border-radius: 12px; font-size: 14px; }
.mpreview__k { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .1em; color: var(--accent); }
.mpreview__line { margin: 0; font-weight: 600; }
.mpreview__th, .mpreview__how, .mpreview__link { margin: 0; color: var(--muted); font-family: 'Prompt', 'Poppins', sans-serif; overflow-wrap: anywhere; }
.mpreview__tier { display: flex; flex-direction: column; gap: 1px; padding-left: 10px; border-left: 4px solid var(--line); }
.mpreview__tier--blue { border-left-color: #4a90c8; }
.mpreview__tier--green { border-left-color: #6ba85a; }
.mpreview__tier--red { border-left-color: #c8564a; }
.mpreview__name { font-size: 12px; font-weight: 800; letter-spacing: .12em; }
.mpreview__perk { overflow-wrap: anywhere; }
.mpreview__shared { margin: 0; padding: 0; list-style: none; color: var(--muted); overflow-wrap: anywhere; }

/* ---------- R6: Queue tab - seats / NO FIT on pending cards, "Approved & later" list, pager ---------- */
.card__sug { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 0 14px; font-size: 12px; }
.card__sugl { color: var(--muted); font-weight: 700; letter-spacing: .08em; font-size: 11px; }
.card__sugt { font-size: 12px; overflow-wrap: anywhere; }
.card__seats { color: var(--muted); font-weight: 600; }
.card__nofit { font-size: 12px; }
.qhead { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; padding-top: 6px; }
.qhead__title { margin: 0; font-size: 15px; font-weight: 800; letter-spacing: .06em; color: var(--accent); }
.qhead__n { font-size: 12px; font-weight: 700; letter-spacing: .08em; color: var(--muted); }
.later { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; min-width: 0; }
.pager { display: grid; grid-template-columns: 56px minmax(0, 1fr) 56px; gap: 8px; align-items: center; }
.pager .btn { padding: 0; font-size: 30px; line-height: 1; }
.pager__range { text-align: center; font-size: 13px; font-weight: 700; letter-spacing: .06em; color: var(--cream); }
.qlist { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.qday { margin: 8px 0 0; font-size: 13px; font-weight: 700; letter-spacing: .08em; color: var(--accent); }
.qrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px; min-width: 0; background: var(--ink-2); border: 1px solid var(--line); border-left: 4px solid var(--line); border-radius: 12px; overflow: hidden; }
.qrow--approved { border-left-color: var(--muted); }
.qrow--arrived { border-left-color: var(--green-soft); }
.qrow--late { border-left-color: var(--red-soft); }
.qrow--cancelled, .qrow--no_show { opacity: .8; border-left-color: var(--red); }
.qrow__main { display: flex; flex-direction: column; gap: 3px; min-width: 0; min-height: 44px; padding: 8px 4px 8px 12px; background: none; border: 0; text-align: left; cursor: pointer; }
.qrow__l1 { display: flex; gap: 8px; align-items: baseline; min-width: 0; }
.qrow__time { font-weight: 700; font-size: 16px; flex: none; }
.qrow__name { font-weight: 600; font-size: 15px; overflow-wrap: anywhere; min-width: 0; }
.qrow__party { font-weight: 700; color: var(--accent); flex: none; }
.qrow__l2 { display: flex; flex-wrap: wrap; gap: 2px 8px; font-size: 12px; min-width: 0; }
.qrow__code { color: var(--muted); }
.qrow__tables { font-weight: 600; color: var(--green-soft); overflow-wrap: anywhere; }
.qrow__notes { color: var(--muted); overflow-wrap: anywhere; font-family: 'Prompt', 'Poppins', sans-serif; flex-basis: 100%; }
.qrow__side { display: flex; flex-direction: column; align-items: flex-end; gap: 0; padding: 4px 12px 4px 0; }
.qrow__phone { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; font-size: 13px; text-decoration: none; letter-spacing: .02em; }
.later__toggle { display: flex; }
.later__toggle .btn { flex: 1 1 auto; }

/* R8: big-group SMS (BIG chip, tonight's 📲 / SMS ✓ chip, the SMS sheet) */
.chip-tag--big { color: var(--accent); border-color: var(--accent); }
button.chip-tag--sms { font: inherit; font-size: 13px; font-weight: 700; min-height: 36px; min-width: 44px; padding: 4px 12px; cursor: pointer; background: transparent; }
.chip-tag--sms-todo { color: #15110D; background: var(--accent); border-color: var(--accent); }
.chip-tag--sms-done { color: var(--green-soft); border-color: var(--green); }
.card__row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.qrow__side .chip-tag--sms { margin-top: 4px; }
.gsms { margin-top: 16px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; }
.gsms__title { font-size: 14px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.gsms__status { font-size: 14px; margin: 0 0 10px; overflow-wrap: anywhere; }
.gsms__status[hidden] { display: none; }
.gsms__row { display: flex; gap: 10px; flex-wrap: wrap; margin: 10px 0; }
.gsms__row .btn { flex: 1 1 140px; }
.gsms__phone { margin: 10px 0; font-size: 16px; font-weight: 600; }
.gsms__scan { margin: 10px 0; }
.gsms__scan[hidden] { display: none; }
.gsms__video { width: 100%; max-height: 50vh; border-radius: 12px; background: #000; margin-bottom: 8px; }
#sms-open { margin: 4px 0 0; text-decoration: none; text-align: center; justify-content: center; align-items: center; min-height: 56px; font-size: 18px; }
#sms-open.is-disabled { opacity: .45; pointer-events: none; }
#sms-done { margin-top: 12px; min-height: 52px; }
.sr-only { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* R9: the big-group promotion (🎉 chip next to BIG, the line inside the SMS box) */
.chip-tag--promo { border-color: var(--accent); }
.gsms__promo { font-size: 14px; font-weight: 600; margin: 0 0 8px; overflow-wrap: anywhere; }
/* R10: the dishes the customer picked (detail sheet row, SMS box, edit form) */
.menu__line { margin: 0 0 4px; font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.gsms__menu { margin: 0 0 8px; }
.kv__menu .menu__line:last-child { margin-bottom: 0; }
.form__menu { display: flex; flex-direction: column; gap: 2px; padding: 4px 0 8px; }

/* Tap login (migration 021): name buttons in front of the old name + PIN form */
.tapl { display: flex; flex-direction: column; gap: 12px; }
.tapl__title { margin: 0; font-size: 16px; font-weight: 600; text-align: center; color: var(--muted); }
.tapl__grid { display: flex; flex-direction: column; gap: 10px; }
.tapl__btn { min-height: 60px; font-size: 18px; border-radius: 14px; gap: 10px; overflow-wrap: anywhere; }
.tapl__btn--busy:disabled { opacity: 1; border-color: var(--yellow); }
.tapl__loading { margin: 0; text-align: center; color: var(--muted); font-size: 14px; }
.tapl__msg { text-align: center; }
.tapl__link { align-self: center; min-height: 44px; padding: 0 12px; background: none; border: 0; color: var(--muted); font-size: 13px; text-decoration: underline; cursor: pointer; }
.tapl__spin { width: 18px; height: 18px; border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--yellow); animation: tapl-spin .8s linear infinite; flex: none; }
@keyframes tapl-spin { to { transform: rotate(360deg); } }
/* the old PIN form stays in the page while the names show: collapsed to nothing visible, still reachable by script */
.login__pin--off { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.tapl[hidden], .tapl__retry[hidden], .tapl__link[hidden] { display: none; }