/* Breakfast Host — iPad stand + admin. System font, grouped light surfaces. */

:root {
  color-scheme: light;
  --bg: #f2f2f7;
  --card: #ffffff;
  --ink: #1c1c1e;
  --ink-2: #3a3a3c;
  --muted: #5e5e63;
  --faint: #6f6f74;
  --hair: rgba(60, 60, 67, 0.16);
  --fill: rgba(118, 118, 128, 0.12);
  --fill-2: rgba(118, 118, 128, 0.2);
  --gold: #7a5a1e;
  --gold-soft: #f5eddd;
  --ok: #1f7a46;
  --ok-soft: #e3f3e8;
  --warn: #8a5a00;
  --warn-soft: #fff1d1;
  --danger: #c0352b;
  --danger-soft: #fdeceb;
  --blue: #0057b0;
  --focus: #0057b0;
  --radius: 14px;
  --radius-sm: 10px;
  --shadow: 0 10px 40px rgba(0, 0, 0, 0.18);
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  --mono: "SF Mono", ui-monospace, Menlo, Consolas, monospace;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --gutter: 20px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

/* Accessibility (WCAG 2.2 AA): visible keyboard focus everywhere; focused items never hide behind the sticky header. */
html { scroll-padding-top: 180px; scroll-padding-bottom: 90px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.row-field input:focus-visible, .row-field select:focus-visible, .search-box input:focus-visible, .admin textarea:focus-visible { outline: none; }
.row-field:focus-within { box-shadow: inset 0 0 0 2px var(--focus); }
/* Headings that receive focus when a dialog or sheet opens (for screen readers) are not controls: no ring. */
[tabindex="-1"]:focus { outline: none; }
.search-box:focus-within { box-shadow: 0 0 0 3px var(--focus); }
.admin .group:focus-within { box-shadow: 0 0 0 3px var(--focus); }
.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.35;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; touch-action: manipulation; }
input, textarea, select { -webkit-appearance: none; appearance: none; }
input[type="checkbox"] { -webkit-appearance: auto; appearance: auto; }

/* ── Buttons ── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 12px;
  border: 0;
  background: var(--fill);
  color: var(--ink);
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
  transition: transform 0.08s ease, background 0.15s ease;
}
.btn:active { transform: scale(0.98); }
.btn.primary { background: var(--ink); color: #fff; }
.btn.gold { background: var(--gold); color: #fff; }
.btn.danger { background: var(--danger-soft); color: var(--danger); }
.btn.link { background: transparent; color: var(--muted); font-weight: 500; min-height: 40px; }
.btn.large { min-height: 54px; font-size: 18px; border-radius: 14px; }
.btn.full { width: 100%; }
.btn:disabled { opacity: 0.45; pointer-events: none; }

.icon-btn {
  width: 44px;
  height: 44px;
  border-radius: 22px;
  border: 0;
  background: var(--fill);
  display: inline-grid;
  place-items: center;
  color: var(--ink-2);
}
.icon-btn svg { width: 22px; height: 22px; }

/* ── Gates (setup / unlock / login) ── */
.gate {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(24px + var(--safe-top)) 16px calc(24px + var(--safe-bottom));
}
.gate-card {
  width: min(440px, 100%);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
  text-align: center;
}
.gate-card.wide { width: min(560px, 100%); }
.gate-logo {
  width: 64px;
  height: 64px;
  object-fit: contain;
  border-radius: 16px;
  align-self: center;
}
.eyebrow {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
}
.gate-card h1 { margin: -6px 0 0; font-size: 30px; font-weight: 700; letter-spacing: -0.01em; }
.gate-lead { margin: -4px 0 4px; color: var(--muted); font-size: 16px; }
.gate-lead.small { font-size: 14px; margin: 0; }
.demo-split { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 14px; }
.demo-split::before, .demo-split::after { content: ""; flex: 1; height: 1px; background: var(--hair); }

.group {
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--card);
  border-radius: var(--radius);
  overflow: hidden;
  text-align: left;
}
.group legend {
  float: left;
  width: 100%;
  padding: 14px 16px 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.group legend + * { clear: both; }
.row-field {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 0 16px;
  border-top: 1px solid var(--hair);
}
.group .row-field:first-child,
.group legend + .row-field { border-top: 0; }
.row-field > span { flex: 0 0 148px; color: var(--ink-2); font-size: 16px; text-align: left; }
.row-field input,
.row-field select {
  flex: 1;
  min-width: 0;
  height: 50px;
  border: 0;
  background: transparent;
  outline: none;
  font-size: 17px;
  text-align: right;
}
.row-field input::placeholder { color: var(--faint); }
.row-field input[type="checkbox"] { flex: none; margin-left: auto; }
.row-field.solo { background: var(--card); border-radius: var(--radius); border: 0; }
.group-foot { margin: 0; padding: 8px 16px 14px; font-size: 13px; color: var(--muted); border-top: 1px solid var(--hair); }

.check-row {
  display: flex;
  gap: 10px;
  align-items: center;
  text-align: left;
  font-size: 15px;
  color: var(--ink-2);
  padding: 0 4px;
}
.check-row input { width: 20px; height: 20px; flex: none; }

.form-error { margin: 0; min-height: 20px; color: var(--danger); font-size: 15px; font-weight: 500; text-align: left; }
.form-error.center { text-align: center; }

/* User chips (login) */
.user-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.user-chip {
  min-height: 44px;
  padding: 0 16px;
  border-radius: 22px;
  border: 1.5px solid transparent;
  background: var(--card);
  font-weight: 600;
  font-size: 16px;
}
.user-chip.on { border-color: var(--ink); }
.user-chip.other { color: var(--muted); font-weight: 500; }

.pin-dots { display: flex; justify-content: center; gap: 16px; margin: 6px 0 0; }
.pin-dot { width: 15px; height: 15px; border-radius: 50%; border: 1.5px solid var(--ink-2); }
.pin-dot.filled { background: var(--ink); border-color: var(--ink); }
.pin-dots.shake { animation: shake 0.32s ease; }
@keyframes shake { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }

.pin-pad {
  display: grid;
  grid-template-columns: repeat(3, 84px);
  justify-content: center;
  gap: 14px 22px;
  margin-top: 4px;
}
.pin-pad button {
  height: 84px;
  border-radius: 42px;
  border: 0;
  background: var(--card);
  font-size: 30px;
  font-weight: 400;
}
.pin-pad button:active { background: var(--fill-2); }
.pin-pad button[data-key="del"] { background: transparent; font-size: 26px; color: var(--muted); }

/* ── Stand ── */
.stand {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding-bottom: calc(24px + var(--safe-bottom));
}
.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: calc(12px + var(--safe-top)) var(--gutter) 10px;
  /* Opaque, no backdrop blur: a blur behind a bar over a scrolling list is redrawn every frame
     (2.7x the compositor's work per frame, measured with scripts/perf-stand.js --trace). */
  background: var(--bg);
}
.brand { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1; }
.brand-logo { width: 44px; height: 44px; border-radius: 11px; object-fit: contain; background: var(--card); flex: none; }
.brand-text { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.brand-name { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.data-chip {
  border: 0;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--fill);
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.data-chip.ok { background: var(--ok-soft); color: var(--ok); }
.data-chip.warn { background: var(--warn-soft); color: var(--warn); }
.data-chip.demo { background: var(--gold-soft); color: var(--gold); }

.covers { display: flex; gap: 6px; }
.cover {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 78px;
  padding: 6px 10px;
  border-radius: 12px;
  background: var(--card);
}
.cover-n { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; }
.cover-l { font-size: 12px; color: var(--muted); font-weight: 500; }
.account {
  width: 44px;
  height: 44px;
  border-radius: 22px;
  border: 0;
  background: var(--ink);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  flex: none;
}

.search-bar { padding: 6px var(--gutter) 12px; position: sticky; top: calc(76px + var(--safe-top)); z-index: 9; background: var(--bg); }
.search-box {
  position: relative;
  display: flex;
  align-items: center;
  background: var(--card);
  border-radius: 16px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03);
}
.search-icon { width: 24px; height: 24px; margin-left: 18px; color: var(--muted); flex: none; }
.search-box input {
  flex: 1;
  min-width: 0;
  height: 64px;
  padding: 0 14px;
  border: 0;
  outline: none;
  background: transparent;
  font-size: 24px;
  font-weight: 500;
}
.search-box input::placeholder { color: var(--faint); font-weight: 400; }
.search-box input::-webkit-search-cancel-button { display: none; }
.search-clear {
  width: 36px;
  height: 36px;
  margin-right: 14px;
  border-radius: 18px;
  border: 0;
  background: var(--fill-2);
  color: #fff;
  font-size: 22px;
  line-height: 1;
  flex: none;
}

.filters {
  display: flex;
  gap: 4px;
  margin: 0 var(--gutter) 12px;
  padding: 3px;
  background: var(--fill);
  border-radius: 11px;
}
.filters button {
  flex: 1;
  min-height: 40px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-2);
}
.filters button.on { background: var(--card); color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); }
.filters .count { color: var(--muted); font-weight: 500; margin-left: 4px; font-variant-numeric: tabular-nums; }

.list-wrap { padding: 0 var(--gutter); }
.list-label { margin: 0 4px 8px; font-size: 13px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.guest-list { background: var(--card); border-radius: var(--radius); overflow: hidden; }
.guest-list:empty { display: none; }

.row {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 68px;
  padding: 10px 16px;
  border: 0;
  background: transparent;
  text-align: left;
  position: relative;
}
.row + .row::before {
  content: "";
  position: absolute;
  top: 0;
  left: 96px;
  right: 0;
  height: 1px;
  background: var(--hair);
}
.row:active, .row.kbd { background: rgba(118, 118, 128, 0.08); }
.row-room {
  flex: 0 0 66px;
  font-size: 22px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.row-main { flex: 1; min-width: 0; }
.row-name, .row-meta, .row-room, .row-main { display: block; }
.row-name { font-size: 18px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-meta { font-size: 14px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.row-tags { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; max-width: 46%; }
.row-chev { width: 9px; height: 15px; color: var(--faint); flex: none; }
.row.seated .row-name, .row.seated .row-room { color: var(--muted); }
/* A big hotel lists 800 rows: rows off screen skip layout and paint (still in the page, still focusable). */
/* A big hotel lists 800 rows. Rows come in chunks (one per slice the stand adds); chunks off screen
   skip style, layout and paint. Per chunk, not per row: Chrome checks every content-visibility
   element on every frame, which at 800 rows cost up to 34 ms a frame (traced on the CI runner). */
.row-chunk { content-visibility: auto; }
.row + .row-chunk > .row:first-child::before, .row-chunk + .row-chunk > .row:first-child::before { content: ""; position: absolute; top: 0; left: 96px; right: 0; height: 1px; background: var(--hair); }

.tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 24px;
  padding: 0 9px;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  background: var(--fill);
  color: var(--ink-2);
}
.tag.vip { background: var(--ink); color: #fff; }
.tag.allergy { background: var(--danger); color: #fff; }
.tag.bf { background: var(--ok-soft); color: var(--ok); }
.tag.nobf { background: var(--warn-soft); color: var(--warn); }
.tag.cout { background: #ece3f6; color: #5b3a8a; }
.tag.seated { background: #e3eefb; color: var(--blue); }
.tag.occasion { background: var(--gold-soft); color: var(--gold); }
.tag.walkin { background: var(--fill-2); }

.empty {
  padding: 40px 24px;
  text-align: center;
  background: var(--card);
  border-radius: var(--radius);
}
.empty h3 { margin: 0 0 6px; font-size: 20px; }
.empty p { margin: 0 auto 16px; color: var(--muted); max-width: 440px; }
.empty .btn + .btn { margin-left: 8px; }

/* ── Overlays ── */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(16px + var(--safe-top)) 16px calc(16px + var(--safe-bottom));
  background: rgba(0, 0, 0, 0.32);
  animation: fade 0.15s ease;
}
@keyframes fade { from { opacity: 0; } }
@keyframes rise { from { transform: translateY(16px); opacity: 0.6; } }

.sheet {
  width: min(760px, 100%);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border-radius: 20px;
  box-shadow: var(--shadow);
  overflow: hidden;
  animation: rise 0.18s ease;
}
.sheet-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 18px 14px 20px;
  background: var(--card);
  border-bottom: 1px solid var(--hair);
}
.sheet-title { display: flex; align-items: center; gap: 16px; min-width: 0; }
.sheet-room {
  flex: none;
  min-width: 86px;
  padding: 8px 12px;
  border-radius: 14px;
  background: var(--ink);
  color: #fff;
  font-size: 30px;
  font-weight: 700;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.sheet-head h2 { margin: 0; font-size: 26px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.15; }
.sheet-sub { margin-top: 4px; color: var(--muted); font-size: 15px; }
.sheet-head-actions { display: flex; gap: 8px; flex: none; }
.sheet-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 14px 16px 18px; display: flex; flex-direction: column; gap: 12px; }
.sheet-foot { background: var(--card); border-top: 1px solid var(--hair); padding: 14px 16px calc(14px + var(--safe-bottom)); }
.sheet-foot:empty { display: none; }

.tags-line { display: flex; flex-wrap: wrap; gap: 6px; }

.alert-box {
  border-radius: var(--radius);
  padding: 12px 16px;
  background: var(--danger);
  color: #fff;
}
.alert-box .alert-k { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.alert-box .alert-v { font-size: 19px; font-weight: 600; margin-top: 2px; }
.alert-box.soft { background: var(--warn-soft); color: var(--warn); }
.alert-box.ask { background: #b45309; color: #fff; }

/* Persistent stand warnings (not dismissible) */
.safety-banners { padding: 0 var(--gutter); display: flex; flex-direction: column; gap: 8px; }
.safety-banners:not(:has(.safety-banner:not([hidden]))) { display: none; }
.safety-banner { margin-bottom: 12px; padding: 12px 16px; border-radius: var(--radius); font-size: 15px; line-height: 1.35; }
.safety-banner strong { font-weight: 700; }
.safety-banner.ask { background: #b45309; color: #fff; }
.safety-banner.warn { background: var(--warn-soft); color: var(--warn); }
.safety-banner.note { background: var(--ok-soft); color: var(--ok); }

.bf-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: var(--radius);
  padding: 12px 16px;
  font-size: 18px;
  font-weight: 700;
}
.bf-banner.yes { background: var(--ok-soft); color: var(--ok); }
.bf-banner.no { background: var(--warn-soft); color: var(--warn); }
.bf-banner small { font-weight: 500; font-size: 14px; margin-left: auto; }

.seated-banner {
  border-radius: var(--radius);
  padding: 12px 16px;
  background: #e3eefb;
  color: #0b4f96;
  font-weight: 600;
}

.facts { background: var(--card); border-radius: var(--radius); overflow: hidden; }
.fact { display: flex; gap: 16px; padding: 11px 16px; border-top: 1px solid var(--hair); }
.fact:first-child { border-top: 0; }
.fact-k { flex: 0 0 120px; color: var(--muted); font-size: 15px; }
.fact-v { flex: 1; min-width: 0; font-size: 16px; overflow-wrap: anywhere; }
.fact-v.pre { white-space: pre-wrap; font-size: 15px; }
.section-k { margin: 6px 4px -4px; font-size: 13px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }

details.notes { background: var(--card); border-radius: var(--radius); }
details.notes summary {
  list-style: none;
  padding: 12px 16px;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
details.notes summary::-webkit-details-marker { display: none; }
details.notes summary .preview { color: var(--muted); font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
details.notes[open] summary .preview { display: none; }
details.notes .notes-body { padding: 0 16px 14px; white-space: pre-wrap; font-size: 15px; color: var(--ink-2); }

/* Seat controls */
.party-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 15px; color: var(--muted); }
.party-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px 4px 10px; border-radius: 999px; background: var(--fill); color: var(--ink); font-weight: 600; }
.party-chip button { border: 0; background: var(--fill-2); border-radius: 50%; width: 24px; height: 24px; line-height: 1; font-size: 15px; }
.pax-label { font-size: 13px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; margin: 0 2px 8px; display: flex; justify-content: space-between; }
.pax-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.pax-row button {
  min-height: 60px;
  border-radius: 14px;
  border: 0;
  background: var(--ink);
  color: #fff;
  font-size: 22px;
  font-weight: 700;
}
.pax-row button.suggest { box-shadow: 0 0 0 3px var(--gold); }
.pax-row button.more { background: var(--fill); color: var(--ink); font-size: 18px; }
.pax-more { display: flex; gap: 8px; margin-top: 10px; }
.pax-more input { flex: 1; height: 52px; border-radius: 12px; border: 0; background: var(--fill); padding: 0 14px; font-size: 20px; }
.foot-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.foot-actions .btn { flex: 1; min-width: 140px; }
.add-room { margin-top: 10px; }
.add-room input { width: 100%; height: 48px; border-radius: 12px; border: 0; background: var(--fill); padding: 0 14px; font-size: 18px; }
.add-room .hits { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.add-room .hits button { border: 0; border-radius: 10px; background: var(--card); box-shadow: inset 0 0 0 1px var(--hair); padding: 8px 12px; font-weight: 600; }

/* Return entry (table, drinks, notes) */
.edit-grid { display: grid; grid-template-columns: 140px 1fr; gap: 10px; align-items: center; }
.edit-grid input, .edit-grid textarea {
  width: 100%;
  border: 0;
  border-radius: 10px;
  background: var(--fill);
  padding: 10px 12px;
  font-size: 17px;
}
.edit-grid textarea { min-height: 70px; resize: vertical; }
.edit-card { background: var(--card); border-radius: var(--radius); padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; }
.person-seg { display: flex; flex-wrap: wrap; gap: 6px; }
.person-seg button { border: 0; border-radius: 999px; padding: 7px 14px; background: var(--fill); font-weight: 600; font-size: 15px; }
.person-seg button.on { background: var(--ink); color: #fff; }
.drink-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.drink-chip { border: 0; border-radius: 10px; padding: 10px 14px; background: var(--fill); font-size: 15px; font-weight: 500; }
.drink-chip.on { background: var(--gold); color: #fff; }
.drink-summary { font-size: 15px; color: var(--ink-2); }

/* Menu */
.scrim { position: fixed; inset: 0; z-index: 40; background: rgba(0, 0, 0, 0.12); }
.menu {
  position: fixed;
  z-index: 45;
  top: calc(70px + var(--safe-top));
  right: 16px;
  width: min(340px, calc(100vw - 32px));
  max-height: calc(100vh - 100px);
  overflow-y: auto;
  background: var(--card);
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding: 6px 0;
  animation: rise 0.14s ease;
}
.menu-user { padding: 12px 16px 10px; border-bottom: 1px solid var(--hair); }
.menu-user-name { font-weight: 700; font-size: 18px; }
.menu-user-role { color: var(--muted); font-size: 14px; }
.menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 50px;
  padding: 8px 16px;
  border: 0;
  background: transparent;
  text-align: left;
  font-size: 16px;
  font-weight: 500;
}
.menu-item small { display: block; color: var(--muted); font-size: 13px; font-weight: 400; }
.menu-item:active { background: var(--fill); }
.menu-item.danger { color: var(--danger); }
.menu-item.toggle input { width: 22px; height: 22px; flex: none; }
.menu-sep { height: 1px; background: var(--hair); margin: 6px 0; }

/* Dialog */
.dialog {
  width: min(460px, 100%);
  background: var(--card);
  border-radius: 18px;
  padding: 22px 22px 18px;
  box-shadow: var(--shadow);
  animation: rise 0.16s ease;
}
.dialog h2 { margin: 0 0 8px; font-size: 21px; }
.dialog p { margin: 0 0 10px; color: var(--ink-2); }
.dialog ul { margin: 0 0 10px; padding-left: 20px; color: var(--ink-2); }
.dialog .warn { color: var(--warn); font-weight: 600; }
.dialog-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; flex-wrap: wrap; }
.dialog { max-height: calc(100dvh - 32px - var(--safe-top) - var(--safe-bottom)); overflow-y: auto; }
.dialog details.unread { margin: 0 0 12px; background: var(--fill); border-radius: 12px; padding: 10px 12px; }
.dialog details.unread summary { font-weight: 600; cursor: pointer; }
.unread-lines { margin: 8px 0 0; padding-left: 0; list-style: none; max-height: 40vh; overflow-y: auto; font-size: 14px; }
.unread-lines li { padding: 6px 0; border-top: 1px solid var(--hair); }
.unread-lines .unread-where { display: block; color: var(--muted); font-size: 13px; }
.unread-lines code { white-space: pre-wrap; word-break: break-word; font-size: 13px; }
.manager-check { margin: 4px 0 8px; padding: 12px; border-radius: 12px; background: var(--warn-soft); display: grid; gap: 10px; }
.manager-check p { margin: 0; color: var(--warn); }
.manager-check .row-field { background: var(--card); }
.manager-check .form-error { color: var(--danger); min-height: 0; }
.spinner { width: 28px; height: 28px; border-radius: 50%; border: 3px solid var(--fill-2); border-top-color: var(--ink); animation: spin 0.8s linear infinite; margin: 8px auto; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Setup guide (first run at a new property) */
.guide {
  width: min(620px, 100%);
  max-height: calc(100dvh - 32px - var(--safe-top) - var(--safe-bottom));
  overflow-y: auto;
  background: var(--bg);
  border-radius: 18px;
  padding: 20px 18px 18px;
  box-shadow: var(--shadow);
  animation: rise 0.16s ease;
}
.guide-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.guide-head h2 { margin: 0; font-size: 22px; }
.guide-sub { margin: 2px 0 0; color: var(--muted); font-size: 15px; }
.guide-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.guide-step { display: flex; gap: 12px; background: var(--card); border-radius: var(--radius); padding: 14px; }
.guide-step.current { box-shadow: 0 0 0 2px var(--ink) inset; }
.guide-n {
  flex: none; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 700; font-size: 15px;
  background: var(--fill); color: var(--ink-2);
}
.guide-step.done .guide-n { background: var(--ok-soft); color: var(--ok); }
.guide-body { flex: 1; min-width: 0; }
.guide-body h3 { margin: 3px 0 6px; font-size: 17px; }
.guide-body p { margin: 0 0 8px; color: var(--ink-2); font-size: 15px; }
.guide-step:not(.current):not(.done) .guide-body > :not(h3) { display: none; }
.guide-note { color: var(--warn) !important; }
.guide-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.guide-help { margin: 0 0 10px; padding-left: 20px; color: var(--ink-2); font-size: 15px; display: grid; gap: 4px; }
.guide-check { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 8px; }
.guide-check li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; }
.guide-check li > span { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 13px; }
.guide-check li.ok > span { background: var(--ok-soft); color: var(--ok); }
.guide-check li.todo > span { background: var(--warn-soft); color: var(--warn); }
.guide-check small { display: block; color: var(--muted); font-size: 14px; }

/* Floor plan and tables */
.floor-view { display: grid; gap: 12px; }
.floor-sum { margin: 0; color: var(--ink-2); font-size: 15px; font-weight: 600; }
.floor-section h2 { margin: 0 0 6px; font-size: 16px; }
.floor-area { position: relative; aspect-ratio: 16 / 9; background: var(--card); border-radius: var(--radius); border: 1px solid var(--hair); overflow: hidden; touch-action: none; }
.ftable {
  position: absolute; transform: translate(-50%, -50%);
  width: 60px; height: 60px; padding: 0;
  display: grid; place-content: center; gap: 0;
  border: 2px solid var(--ok); background: var(--ok-soft); color: var(--ink);
  font-weight: 700; line-height: 1.05; cursor: pointer;
}
.ftable.round { border-radius: 50%; }
.ftable.square { border-radius: 10px; }
.ftable .ft-num { font-size: 17px; }
.ftable .ft-sub { font-size: 12px; font-weight: 600; color: var(--ink-2); }
.ftable.seated { background: var(--ink); border-color: var(--ink); color: #fff; }
.ftable.seated .ft-sub { color: #fff; }
.ftable.selected { box-shadow: 0 0 0 3px var(--card), 0 0 0 6px var(--focus, #0a64d8); }
.fp-area .ftable { cursor: grab; touch-action: none; }
/* Phones: a wide plan would be too short for its tables to stay apart. Square it and shrink the tables a little; positions are in %, so the iPad layout carries over. */
@media (max-width: 640px) {
  .floor-area { aspect-ratio: 1 / 1; }
  .ftable { width: 48px; height: 48px; }
  .ftable .ft-num { font-size: 15px; }
  .ftable .ft-sub { font-size: 11px; }
}
.fp-section { margin-bottom: 12px; }
.fp-section-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 6px; }
.fp-section-head .row-field { flex: 1 1 240px; }
.fp-move .btn { min-width: 44px; }
.floor-seated { list-style: none; margin: 0; padding: 0; background: var(--card); border-radius: var(--radius); }
.floor-seated li { padding: 10px 14px; border-top: 1px solid var(--hair); font-size: 15px; }
.floor-seated li:first-child { border-top: 0; }
.est { color: var(--ink-2); font-style: italic; }
.floor-note { margin: 6px 0 0; color: var(--muted); font-size: 13px; }
.table-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 10px; }
.table-pick-k { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.table-pick small { width: 100%; color: var(--muted); font-size: 13px; }
.table-choices { display: flex; flex-wrap: wrap; gap: 8px; }
.table-choice { min-width: 72px; display: inline-grid; justify-items: center; }
.table-choice small { display: block; font-weight: 500; font-size: 12px; color: var(--ink-2); }
.table-choice.on { box-shadow: 0 0 0 2px var(--ink) inset; }

/* End-of-service summary */
.guide.summary { width: min(860px, 100%); }

/* Service radar (js/service-radar.js): a strip above the lists, a card on the Tables view, a panel */
.guide.radar-panel { width: min(760px, 100%); }
.radar-strip { display: flex; align-items: center; gap: 10px; width: calc(100% - 2 * var(--gutter)); margin: 0 var(--gutter) 12px; padding: 10px 14px; border: 0; border-radius: var(--radius); background: var(--card); color: var(--ink); font: inherit; font-size: 15px; text-align: left; cursor: pointer; flex-wrap: wrap; }
.radar-strip .rs-main { flex: 1 1 auto; }
.radar-strip .rs-side { color: var(--ink-2); font-weight: 600; }
.radar-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--muted); flex: none; }
.radar-strip.calm .radar-dot { background: var(--ok); }
.radar-strip.busy { background: var(--warn-soft); }
.radar-strip.busy .radar-dot { background: var(--warn); }
.radar-strip.busy .rs-side { color: var(--warn); }
.radar-strip.queue { background: var(--danger-soft); }
.radar-strip.queue .radar-dot { background: var(--danger); }
.radar-strip.queue .rs-side { color: var(--danger); }
.radar { margin: 0 0 16px; padding: 14px 16px; background: var(--card); border-radius: var(--radius); }
.radar h2 { margin: 0 0 6px; font-size: 18px; }
.radar-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.radar-pill { padding: 4px 10px; border-radius: 999px; font-weight: 700; font-size: 14px; }
.radar-pill.calm { background: var(--ok-soft); color: var(--ok); }
.radar-pill.busy { background: var(--warn-soft); color: var(--warn); }
.radar-pill.queue { background: var(--danger-soft); color: var(--danger); }
.radar-basis { color: var(--muted); font-size: 13px; }
.radar-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin-bottom: 10px; }
.radar-tile { padding: 10px 12px; background: var(--fill); border-radius: 12px; }
.radar-tile .rt-v { font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; }
.radar-tile .rt-k { color: var(--ink-2); font-size: 13px; }
.radar-chart { display: block; width: 100%; height: auto; max-height: 170px; }
.radar-chart text { font-size: 11px; fill: var(--muted); }
.radar-chart .rc-now-t { fill: var(--ink); font-weight: 700; }
.radar-chart .rc-seat { fill: var(--ink); }
.radar-chart .rc-exp { fill: none; stroke: var(--muted); stroke-width: 1.5; stroke-dasharray: 4 3; }
.radar-chart .rc-now { stroke: var(--focus, #0a64d8); stroke-width: 2; }
.radar-legend { margin: 4px 0 0; color: var(--muted); font-size: 12px; }
.radar-legend span { display: inline-block; width: 12px; height: 10px; margin: 0 4px 0 8px; vertical-align: middle; border-radius: 2px; }
.radar-legend .lg-seat { background: var(--ink); margin-left: 0; }
.radar-legend .lg-exp { border: 1.5px dashed var(--muted); }
.radar-h3 { margin: 14px 0 6px; font-size: 15px; }
.radar-todo, .radar-soon { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.radar-todo li, .radar-soon li { display: flex; align-items: center; gap: 10px; justify-content: space-between; padding: 8px 12px; background: var(--fill); border-radius: 10px; }
.radar-todo .radar-todo-check { background: var(--warn-soft); }
.radar-todo .radar-todo-queue { background: var(--danger-soft); }
.radar-none { margin: 0; color: var(--ink-2); }
.ftable.held { border-style: dashed; border-width: 3px; }
.ftable.held::after { content: "kept"; position: absolute; bottom: -18px; font-size: 11px; font-weight: 700; color: var(--ink-2); }
.summary-days { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.sum-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; margin-bottom: 14px; }
.sum-tile { background: var(--card); border-radius: var(--radius); padding: 12px 14px; }
.sum-v { font-size: 24px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.sum-k { font-size: 14px; color: var(--ink-2); margin-top: 4px; }
.sum-k small { display: block; color: var(--muted); font-size: 13px; }
.sum-h { font-size: 17px; margin: 16px 0 6px; }
.sum-h small { display: block; font-weight: 400; color: var(--muted); font-size: 14px; }
.sum-table { width: 100%; border-collapse: collapse; background: var(--card); border-radius: var(--radius); overflow: hidden; font-size: 15px; }
.sum-table th, .sum-table td { text-align: left; padding: 8px 12px; border-top: 1px solid var(--hair); vertical-align: top; }
.sum-table thead th { border-top: 0; color: var(--muted); font-weight: 600; font-size: 13px; }
.sum-table td { font-variant-numeric: tabular-nums; }
.sum-bars td:last-child { width: 55%; }
.sum-bar { display: block; height: 12px; border-radius: 6px; background: var(--fill-2); min-width: 4px; }
.sum-bars tr.peak .sum-bar { background: var(--ink); }
.sum-bars tr.peak td { font-weight: 700; }
.sum-none { color: var(--muted); font-size: 15px; margin: 0 0 8px; }
.sum-note { font-size: 15px; margin: 0 0 8px; }
.summary-actions { margin-top: 14px; justify-content: flex-end; }

/* Toast */
.toast {
  position: fixed;
  z-index: 60;
  left: 50%;
  bottom: calc(24px + var(--safe-bottom));
  transform: translate(-50%, 140%);
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: calc(100vw - 32px);
  padding: 12px 14px 12px 18px;
  border-radius: 14px;
  background: rgba(28, 28, 30, 0.94);
  color: #fff;
  font-weight: 500;
  opacity: 0;
  visibility: hidden;
  transition: transform 0.22s ease, opacity 0.22s ease, visibility 0.22s;
}
.toast.show { transform: translate(-50%, 0); opacity: 1; visibility: visible; }
.toast button { border: 0; background: rgba(255, 255, 255, 0.16); color: #fff; border-radius: 9px; padding: 7px 12px; font-weight: 600; }

/* Phone / narrow */
@media (max-width: 640px) {
  :root { --gutter: 12px; }
  .covers .cover { min-width: 62px; padding: 5px 6px; }
  .cover-n { font-size: 18px; }
  .brand-logo { display: none; }
  .brand-name { font-size: 17px; }
  .search-bar { top: calc(70px + var(--safe-top)); }
  .search-box input { height: 54px; font-size: 20px; }
  .row-room { flex-basis: 54px; font-size: 18px; }
  .row + .row::before, .row + .row-chunk > .row:first-child::before, .row-chunk + .row-chunk > .row:first-child::before { left: 84px; }
  .row-tags { max-width: 34%; }
  .row-tags .tag:not(.allergy):not(.vip):not(.seated) { display: none; }
  .overlay { padding: 0; align-items: flex-end; }
  .sheet { border-radius: 18px 18px 0 0; max-height: 96vh; }
  .sheet-room { min-width: 64px; font-size: 22px; }
  .sheet-head h2 { font-size: 21px; }
  .pax-row { grid-template-columns: repeat(3, 1fr); }
  .fact-k { flex-basis: 96px; }
  .row-field > span { flex-basis: 118px; font-size: 15px; }
  .edit-grid { grid-template-columns: 1fr; }
  .pin-pad { grid-template-columns: repeat(3, 76px); gap: 12px 18px; }
  .pin-pad button { height: 76px; }
}

/* ── Admin ── */
.admin { max-width: 820px; margin: 0 auto; padding: calc(16px + var(--safe-top)) 16px calc(100px + var(--safe-bottom)); }
.admin-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.admin-top h1 { margin: 0; font-size: 30px; }
.admin-top p { margin: 2px 0 0; color: var(--muted); }
.admin section { margin-bottom: 22px; }
.admin h2 { margin: 0 4px 8px; font-size: 13px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.admin .group { margin-bottom: 6px; }
.admin .hint { margin: 6px 6px 0; font-size: 13px; color: var(--muted); }
.admin textarea {
  width: 100%;
  min-height: 140px;
  border: 0;
  outline: none;
  padding: 12px 16px;
  font-family: var(--mono);
  font-size: 14px;
  background: transparent;
  resize: vertical;
}
.admin .row-field select { text-align-last: right; }
.user-row { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-top: 1px solid var(--hair); }
.user-row:first-child { border-top: 0; }
.user-row .who { flex: 1; min-width: 0; }
.user-row .who strong { display: block; }
.user-row .who span { color: var(--muted); font-size: 14px; }
.user-row .btn { min-height: 36px; padding: 0 12px; font-size: 14px; }
.logo-row { display: flex; align-items: center; gap: 16px; padding: 12px 16px; }
.logo-row img { width: 64px; height: 64px; object-fit: contain; border-radius: 12px; background: var(--bg); }
.save-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  padding: 12px 16px calc(12px + var(--safe-bottom));
  background: var(--bg);
  border-top: 1px solid var(--hair);
}
.save-msg { color: var(--muted); font-size: 15px; }
.save-msg.ok { color: var(--ok); }
.save-msg.err { color: var(--danger); }

/* ── Printed docket (AirPrint, 80 mm roll or A4) ── */
#print-root { display: none; }
/* Encrypted backups for iCloud (Settings): the recovery key, shown once, and its printed sheet */
.cb-state { flex: 1; text-align: right; color: var(--muted); }
.ck-dialog { border: 0; border-radius: var(--radius); padding: 20px 22px; width: min(560px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow-y: auto; background: var(--card); color: var(--ink); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25); }
.ck-dialog::backdrop { background: rgba(0, 0, 0, 0.35); }
.ck-dialog h2 { margin: 0 0 8px; font-size: 21px; }
.ck-dialog p { margin: 0 0 10px; color: var(--ink-2); }
.ck-sheet { margin: 12px 0; padding: 14px; border: 1px solid var(--hair); border-radius: 12px; background: #fff; text-align: center; }
.ck-dialog .ck-head, .ck-dialog .ck-meta { margin: 0; color: #333; font-size: 13px; }
.ck-qr svg { display: block; width: 184px; height: 184px; margin: 8px auto; }
.ck-dialog .ck-key { margin: 6px 0; color: #000; font: 600 17px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.03em; word-spacing: 0.15em; overflow-wrap: anywhere; }

@media print {
  @page { margin: 4mm; }
  html, body { background: #fff !important; }
  body > *:not(#print-root) { display: none !important; }
  #print-root { display: block !important; color: #000; font-family: var(--font); width: 72mm; }
  .pd-head { font-size: 9pt; border-bottom: 1px solid #000; padding-bottom: 2mm; margin-bottom: 2mm; }
  .pd-guest { border-bottom: 1px dashed #000; padding-bottom: 2mm; margin-bottom: 2mm; }
  .pd-room { font-size: 22pt; font-weight: 800; line-height: 1; }
  .pd-name { font-size: 15pt; font-weight: 700; margin-top: 1mm; }
  .pd-opera { font-size: 9pt; }
  .pd-alert { background: #000; color: #fff; font-weight: 700; font-size: 11pt; padding: 1.5mm 2mm; margin: 2mm 0; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .pd-tags { font-weight: 700; font-size: 10pt; margin: 1mm 0; }
  .pd-line { font-size: 10pt; margin: 0.6mm 0; }
  /* one guest in a list (briefing, close report): room in bold, then the details */
  .pd-item { font-size: 10pt; line-height: 1.25; margin: 1.2mm 0; }
  .pd-item b { font-weight: 800; }
  .pd-allergy { font-weight: 800; text-transform: uppercase; }
  .pd-count { font-size: 12.5pt; font-weight: 800; margin: 0.5mm 0 1mm; }
  .pd-remarks { margin-top: 3mm; font-size: 9pt; }
  .pd-remarks div { border-bottom: 1px solid #000; height: 7mm; }
  /* Settings → Print the recovery key: only its sheet, large enough to scan and read */
  body.printing-key > #ck-dialog { display: block !important; position: static; width: auto; max-height: none; box-shadow: none; padding: 0; }
  body.printing-key #ck-dialog > :not(.ck-sheet) { display: none !important; }
  body.printing-key #ck-dialog::backdrop { background: #fff; }
  body.printing-key .ck-sheet { border: 1px solid #000; padding: 8mm; }
  body.printing-key .ck-qr svg { width: 60mm; height: 60mm; }
  body.printing-key .ck-key { font-size: 14pt; }
}

/* Walk-ins in today's report: suggested links the host confirms */
.dialog ul.wm-list { list-style: none; padding: 0; margin: 0 0 6px; display: grid; gap: 10px; }
.wm-item { background: var(--fill); border-radius: 12px; padding: 10px 12px; }
.dialog .wm-item p { margin: 0 0 4px; }
.dialog .wm-walkin, .dialog .wm-guest { color: var(--ink); }
.dialog .wm-basis { color: var(--muted); font-size: 14px; }
.dialog .wm-allergy { color: var(--danger); font-weight: 600; }
.dialog .wm-done { color: var(--ok); font-weight: 600; }
.wm-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.wm-note { margin: -4px 0 12px; color: var(--ink-2); font-size: 14px; }
.wm-note .btn.link { min-height: 0; padding: 0 4px; }