/* WellRun POS on a handheld. The register's material: an orange page, navy
   panels and keys with a continuous cream rim, a thin reflected-blue light
   along the top edge, a navy side that gives thickness and a soft contact
   shadow — the same construction the Mac draws. Selected things are orange
   with navy ink. Green is go/pay, red is destructive or late.
   Three bands like the register: the system bar, the middle, the line. */
:root {
  --ground: #F3E7D3; --ground-top: #F8EFDF; --panel: #0D2244; --panel2: #163A6E; --border: rgba(247,243,232,.32);
  --text: #F7F3E8; --muted: #C6D0E2; --faint: #8FA3C4; --ink: #0D2244;
  --dash: #FF5500; --dine: #8EBCFF; --good: #2DBE6C; --bad: #E8564A; --warning: #FFB020;
  --peach: #FFB27A; --orange-light: #FF7A33; --orange-deep: #E04600; --orange-shade: #C23C00;
  --navy-deep: #071224; --navy-ink: #040B18; --blue-deep: #4F86D8; --cream-shade: #D8D0BC; --green-deep: #137A41; --red-deep: #9E2A22;
  --f-ground: #F3E7D3; --f-card: #0D2244; --f-panel: #0D2244; --f-well: #071224; --f-selected: #FF5500;
  --f-chip: #163A6E; --f-empty: #0D2244; --f-border: rgba(247,243,232,.32); --f-wellborder: rgba(247,243,232,.32); --f-chipborder: rgba(247,243,232,.32);
  --f-emptyborder: rgba(247,243,232,.32); --f-textsoft: #F7F3E8; --f-subtle: #C6D0E2; --f-muted: #C6D0E2; --f-faint: #8FA3C4;
  --f-dash: #FF5500; --f-dashtext: #FF7A33; --f-dashheading: #FF7A33; --f-dine: #8EBCFF; --f-dineheading: #8EBCFF;
  --f-staged: #E8564A; --f-ready: #FFB020; --f-alert: #E8564A;
  --tap: 48px; --mono: ui-monospace, Menlo, "Roboto Mono", "Droid Sans Mono", monospace;
  /* The material. A raised surface is face + rim + top light + side + shadow;
     the rim is an inset cream line, the top light a reflected blue just
     inside it, the side a hard shadow the depth of the key, the drop soft.
     A rule sets --top-c, --side-c and --depth for its tone; :active sinks. */
  --rim-c: rgba(247,243,232,.92);
  --rim: inset 0 0 0 1.5px var(--rim-c);
  --top-c: rgba(142,188,255,.55);
  --side-c: #071224;
  --depth: 4px;
  --drop: 0 6px 14px rgba(4,11,24,.45);
  --raise: var(--rim), inset 0 2.5px 0 var(--top-c), 0 var(--depth) 0 var(--side-c), var(--drop);
  --raise-bordered: inset 0 2px 0 var(--top-c), 0 var(--depth) 0 var(--side-c), var(--drop);
  --sunk: var(--rim), inset 0 2.5px 0 var(--top-c), 0 1px 0 var(--side-c), 0 2px 5px rgba(4,11,24,.4);
  --sunk-bordered: inset 0 2px 0 var(--top-c), 0 1px 0 var(--side-c), 0 2px 5px rgba(4,11,24,.4);
  --face-navy: linear-gradient(160deg, #163A6E 0%, #0D2244 100%);
  --face-navy-dim: linear-gradient(160deg, #0D2244 0%, #071224 100%);
  --face-orange: linear-gradient(160deg, #FFB27A 0%, #FF7A33 42%, #FF5500 100%);
  --face-green: linear-gradient(180deg, #2DBE6C 0%, #137A41 100%);
  --face-red: linear-gradient(180deg, #E8564A 0%, #9E2A22 100%);
  --face-cream: linear-gradient(180deg, #F7F3E8 0%, #D8D0BC 100%);
  --face-well: linear-gradient(180deg, #071224 0%, #0D2244 100%);
  --page: linear-gradient(180deg, #F8EFDF 0%, #F3E7D3 30%, #E4D3B5 100%);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--f-ground); color: var(--text); font: 14px/1.3 -apple-system, Roboto, "Segoe UI", sans-serif; overflow: hidden; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; }
button:disabled { cursor: default; }
/* Pinned to the viewport rather than sized by the body: an Android WebView
   gave the body a height and this element none. */
.app { position: fixed; inset: 0; display: flex; flex-direction: column; background: var(--page); transform: translateZ(0); }
.scroll { overflow-y: auto; -webkit-overflow-scrolling: touch; min-height: 0; scrollbar-width: none; }
.scroll::-webkit-scrollbar { display: none; }
.scroll-x { overflow-x: auto; overflow-y: hidden; white-space: nowrap; scrollbar-width: none; }
.scroll-x::-webkit-scrollbar { display: none; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.money { font-family: var(--mono); font-weight: 600; font-variant-numeric: tabular-nums; }
.row { display: flex; align-items: center; gap: 8px; }
.grow { flex: 1; min-width: 0; }
.muted { color: var(--muted); } .faint { color: var(--faint); } .bad { color: var(--bad); } .good { color: var(--good); }
.small { font-size: 12px; } .tiny { font-size: 11px; }
.ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tag { display: inline-block; font-size: 10px; font-weight: 900; padding: 1px 5px; border-radius: 4px; letter-spacing: .3px; }
.pill { --depth: 2px; display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 10px; border-radius: 10px; background: var(--face-navy); border: 1px solid var(--rim-c); box-shadow: var(--raise-bordered); color: var(--f-textsoft); font-size: 12px; font-weight: 600; white-space: nowrap; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--good); }
.dot.stale { background: var(--bad); }
.badge { display: inline-block; min-width: 16px; padding: 1px 5px; border-radius: 9px; background: var(--bad); color: var(--text); font-size: 10px; font-weight: 900; text-align: center; }
.checkno { font-family: var(--mono); font-size: 12px; font-weight: 700; color: var(--f-subtle); }
.empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center; padding: 22px 12px; color: var(--f-muted); }
.empty b { color: var(--text); font-size: 15px; }
.seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 11px; background: var(--face-well); border: 1px solid rgba(247,243,232,.28); flex: none; }
.seg button { padding: 5px 10px; border-radius: 8px; font-size: 12px; font-weight: 500; color: var(--f-muted); }
.seg button.on { --top-c: #FFB27A; --side-c: #C23C00; --depth: 2px; background: var(--face-orange); box-shadow: var(--raise); color: var(--ink); font-weight: 700; }
.section-title { font-size: 11px; font-weight: 900; letter-spacing: 1.4px; color: var(--dine); }

/* ── The system bar ─────────────────────────────────────────────────── */
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px 7px; border-bottom: 1px solid var(--rim-c); background: var(--face-navy); box-shadow: inset 0 2px 0 var(--top-c), 0 4px 0 var(--side-c), var(--drop); flex: none; position: relative; z-index: 1; }
.mark { width: 24px; height: 24px; border-radius: 7px; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; flex: none; box-shadow: inset 0 0 0 1.5px rgba(247,243,232,.9), 0 2px 0 #071224; background: #FF5500; }
.mark img { width: 100%; height: 100%; display: block; }
.brand { display: flex; align-items: center; gap: 7px; min-width: 0; }
.brand b { font-size: 18px; font-weight: 900; color: var(--text); white-space: nowrap; }
.brand small { font-size: 12px; color: var(--f-subtle); }
.sos { --top-c: rgba(255,255,255,.55); --side-c: #6E1A15; --depth: 3px; height: 32px; padding: 0 12px; border-radius: 10px; background: var(--face-red); box-shadow: var(--raise-bordered); border: 1px solid var(--rim-c); color: var(--text); font-weight: 900; font-size: 12px; white-space: nowrap; }
.sos:active { transform: translateY(2px); box-shadow: var(--sunk-bordered); }

/* ── The middle: pages a thumb swipes between ───────────────────────── */
.middle { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.pagedots { display: flex; justify-content: center; gap: 6px; padding: 7px 0 1px; flex: none; }
.pagedots .dot { width: 6px; height: 6px; border-radius: 3px; background: var(--ink); opacity: .35; transition: width .2s, opacity .2s; }
.pagedots .dot.on { width: 16px; background: var(--ink); opacity: 1; }
.pages { flex: 1; min-height: 0; overflow: hidden; position: relative; touch-action: pan-y; }
/* The same five nodes reflow; their count comes from the page list. */
.strip { display: flex; height: 100%; width: var(--strip-width); transform: translateX(var(--page-offset)); transition: transform .28s cubic-bezier(.2,.8,.2,1); will-change: transform; }
.page { flex: none; width: calc(100% / var(--page-count)); height: 100%; padding: 6px 10px 0; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
/* Available width can change while an order is being answered. Keep the
   existing check and selected pane mounted and move only their layout. */
.middle.wide .pagedots { display: none; }
/* Keep the receipt readable at the first two-column width; extra room
   belongs to the floor/reference. Match handheldLayout's 40/60 widths. */
.middle.wide .strip { display: grid; grid-template-columns: var(--check-width) var(--reference-width); width: 100%; transform: none; transition: none; will-change: auto; }
.middle.wide .page { display: none; width: auto; grid-row: 1; }
.middle.wide .page-check { display: flex; grid-column: 1 / -1; }
/* The check keeps the left, the pane beside it (owner, 2026-09-17). */
.middle.wide.with-pane .page-check { grid-column: 1; padding-right: 5px; }
.middle.wide .page-current.page-reference { display: flex; grid-column: 2; padding-left: 5px; }
@media (prefers-reduced-motion: reduce) { .strip { transition: none; } }
.pane, .checkcard { --depth: 5px; border-radius: 14px; background: var(--face-navy); border: 1px solid var(--rim-c); box-shadow: var(--raise-bordered); display: flex; flex-direction: column; min-height: 0; overflow: hidden; flex: 1 1 0; }
.checkchip { --depth: 2px; height: 32px; padding: 0 10px 0 8px; border-radius: 9px; background: var(--face-navy); border: 1px solid var(--rim-c); box-shadow: var(--raise-bordered); color: var(--f-textsoft); display: inline-flex; align-items: center; gap: 5px; flex: none; font-size: 13px; }
.checkchip > span:first-child { color: var(--f-subtle); font-size: 16px; font-weight: 700; line-height: 1; }
/* The guide: families, sections and items as small reference cards,
   three across, the way the Mac's pane draws them. */
.refgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.refcard { --depth: 3px; position: relative; min-height: 56px; border-radius: 8px; background: var(--face-navy); box-shadow: var(--raise); padding: 7px 8px; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; text-align: left; }
.refcard:active { transform: translateY(2px); box-shadow: var(--sunk); }
.refcard b { font-size: 12px; font-weight: 600; color: var(--text); line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.refcard .price { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 11px; color: var(--muted); }
.refcard .sub { font-size: 11px; color: var(--muted); }
.refcard.off { opacity: .4; }
.refcard .eighty { position: absolute; top: 4px; right: 4px; font-size: 9px; font-weight: 900; color: var(--text); background: var(--bad); border-radius: 8px; padding: 1px 5px; }
/* Catered to a guest: the verdict on every card and the recipe. */
.refcard.blocked { opacity: .4; }
.fit { font-size: 10px; font-weight: 900; }
.fit-safe { color: var(--good); } .fit-changes { color: var(--warning); } .fit-blocked { color: var(--bad); } .fit-unknown { color: var(--muted); }
.capsule { display: inline-flex; align-items: center; gap: 7px; height: 24px; padding: 0 9px; border-radius: 12px; background: var(--face-green); box-shadow: var(--rim); color: var(--text); font-size: 11px; font-weight: 900; flex: none; }
.recipe .verdict { font-size: 13px; font-weight: 900; }
.recipe .out { text-decoration: line-through; color: var(--muted); }
.refgrid.two { grid-template-columns: repeat(2, 1fr); }
.badge86 { display: inline-block; font-size: 10px; font-weight: 900; color: var(--text); background: var(--bad); border-radius: 8px; padding: 1px 6px; vertical-align: middle; }
.stockrows { display: flex; flex-direction: column; gap: 6px; }
.stockrow { --depth: 3px; display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; background: var(--face-navy); border: 1px solid var(--rim-c); box-shadow: var(--raise-bordered); }
.stockrow .n { font-size: 15px; font-weight: 600; }
.stockrow.off .n { color: var(--bad); }
.stockrow.reference-match.off .n { color: var(--text); background: var(--red-deep); border-radius: 6px; padding: 0 6px; }
.stockkey { --depth: 2px; height: 30px; padding: 0 12px; border-radius: 15px; font-size: 12px; font-weight: 800; flex: none; }
.stockkey.on { --top-c: rgba(255,255,255,.55); --side-c: #0B5A2F; background: var(--face-green); box-shadow: var(--raise); color: var(--text); }
.stockkey.off { --top-c: rgba(255,255,255,.55); --side-c: #6E1A15; background: var(--face-red); box-shadow: var(--raise); color: var(--text); }
.stockkey:active { transform: translateY(2px); box-shadow: var(--sunk); }
.pane-back { --depth: 2px; height: 32px; padding: 0 9px 0 6px; border-radius: 9px; background: var(--face-navy); border: 1px solid var(--rim-c); box-shadow: var(--raise-bordered); color: var(--f-textsoft); font-size: 13px; font-weight: 700; display: inline-flex; align-items: center; gap: 3px; flex: none; max-width: 40%; }
.pane-back:active { transform: translateY(2px); box-shadow: var(--sunk-bordered); }
.pane-back span:first-child { font-size: 18px; line-height: 1; }
.recipe { display: flex; flex-direction: column; gap: 8px; padding: 2px 2px 8px; }
.recipe .title { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.recipe .title b { font-size: 20px; font-weight: 900; color: var(--text); }
.recipe .title .money { font-size: 18px; }
.recipe .lab { font-size: 11px; font-weight: 900; letter-spacing: 1.2px; color: var(--f-subtle); margin-top: 4px; }
.recipe .comp { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 15px; font-weight: 500; padding: 3px 0; border-bottom: 1px solid var(--f-border); }
.recipe .comp .tag { color: var(--muted); font-size: 11px; font-weight: 700; }
.pane-head { display: flex; align-items: center; gap: 8px; padding: 8px 8px 6px 12px; border-bottom: 1px solid var(--f-border); }
.pane-head > b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 14px; font-weight: 800; color: var(--f-textsoft); white-space: nowrap; }
.pane-head .pane-back { flex-shrink: 1; min-width: 44px; }
.pane-head .lenses:empty { display: none; }
.pane-head .check-context { min-height: 44px; height: auto; min-width: 96px; max-width: 58%; padding-block: 5px; text-align: left; }
.check-context-copy { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
.check-context-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.check-context-detail { display: flex; flex-wrap: wrap; gap: 3px 8px; font-size: 12px; color: var(--f-textsoft); }
.check-context:focus-visible, .cand:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.pane-head .seg { padding: 2px; }
.pane-head .seg button { padding: 4px 8px; font-size: 11px; }
.lenses { flex: 1; min-width: 0; display: flex; gap: 6px; }
.pane-body { padding: 8px 10px 10px; display: flex; flex-direction: column; gap: 8px; container-type: inline-size; container-name: reference-pane; }
/* A row that scrolls sideways has no minimum height of its own in a
   column that overflows, and vanished; nothing in the pane gives way. */
.pane-body > * { flex: none; }
.pane-body .field { width: 100%; flex: none; }
.reference-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 4px 0 8px; color: var(--f-subtle); }
.reference-heading h2 { margin: 0; font-size: 14px; font-weight: 650; color: var(--f-textsoft); }
.reference-heading > span { font-size: 12px; font-variant-numeric: tabular-nums; }
.reference-empty, .reference-focus-note { color: var(--f-subtle); font-size: 13px; padding: 8px 0; }
.stock-overview { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
.reference-section, .reference-context { min-width: 0; }
.reference-sections { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 20px; align-items: start; }
.menu-items { grid-template-columns: repeat(auto-fit, minmax(min(100%, 145px), 1fr)); align-items: start; }
.menu-items .refcard { min-height: 52px; border: 1px solid transparent; }
.menu-items .refcard b { font-size: 13px; display: block; overflow-wrap: anywhere; }
.menu-items .refcard.off, .menu-items .refcard.blocked { opacity: 1; }
.menu-items .refcard.off b, .menu-items .refcard.blocked b { color: var(--f-subtle); }
.overview-search { display: flex; flex-direction: column; gap: 5px; padding: 4px 0 8px; color: var(--f-textsoft); }
/* The match a typed word brings forward: an orange card with navy ink. */
.reference-match { --top-c: #FFB27A; --side-c: #C23C00; border-color: var(--rim-c) !important; background: var(--face-orange) !important; color: var(--ink); }
.reference-match b, .reference-match .n, .reference-match .money, .reference-match .muted, .reference-match .tiny, .reference-match .price, .reference-match .sub, .reference-match .checkno, .reference-match .clock-fine { color: var(--ink); }
.reference-match .clock-late { color: var(--text); background: var(--red-deep); border-radius: 6px; padding: 0 4px; }
.reference-muted { background: transparent !important; box-shadow: none !important; border-color: var(--f-border) !important; }
.reference-muted b, .reference-muted .n { color: var(--f-subtle); }
.match-reading { color: var(--f-textsoft); }
.reference-detail-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-items: start; }
.reference-detail { min-width: 0; padding: 12px; border: 1px solid rgba(247,243,232,.28); border-radius: 12px; background: var(--face-well); }
.reference-detail.entering { animation: reference-detail-in .18s ease-out; }
.reference-detail .recipe .title { flex-wrap: wrap; }
.reference-context { display: flex; flex-direction: column; gap: 8px; }
@keyframes reference-detail-in { from { opacity: .7; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@container reference-pane (min-width: 720px) { .pane-body > .orders-overview, .stock-overview { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .pane-body > .orders-overview { grid-template-rows: minmax(0, 1fr); } }
@container reference-pane (min-width: 920px) { .reference-detail-layout { grid-template-columns: minmax(270px, .8fr) minmax(0, 1.6fr); } }
@media (prefers-reduced-motion: reduce) { .reference-detail.entering { animation: none; } }
.cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.tabcard { --depth: 3px; text-align: left; border-radius: 12px; background: var(--face-navy); border: 1px solid var(--rim-c); box-shadow: var(--raise-bordered); padding: 12px; display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.tabcard:active { transform: translateY(2px); box-shadow: var(--sunk-bordered); }
.tabcard.ready { border-color: var(--f-ready); } .tabcard.allergy { border-color: var(--f-alert); }
.tabcard.lit { border-color: var(--dash); }
.tabcard:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.stock-overview .stockrow { padding: 5px 8px; min-height: 54px; }
.stock-overview .stockrow .n { overflow-wrap: anywhere; font-size: 14px; }
.stock-overview .stockkey { min-height: 44px; height: auto; border-radius: 8px; }
@media (max-width: 531px) { .tabcard { grid-column: 1 / -1; } }
.closed { text-align: left; width: 100%; border-radius: 10px; background: var(--face-well); border: 1px solid rgba(247,243,232,.28); padding: 9px 10px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.room { border-radius: 12px; background: var(--face-well); border: 1px solid rgba(247,243,232,.28); padding: 9px; display: flex; flex-direction: column; gap: 8px; }
.room-head { display: flex; justify-content: space-between; font-size: 11px; font-weight: 900; letter-spacing: 1.4px; }
.room-head span:last-child { color: var(--f-muted); font-weight: 500; letter-spacing: 0; }
.tiles { display: grid; gap: 7px; }
.tiles.bar { grid-template-columns: repeat(4, 1fr); } .tiles.tables { grid-template-columns: repeat(3, 1fr); } .tiles.tabs { grid-template-columns: repeat(2, 1fr); }
.tile { --depth: 3px; text-align: left; border-radius: 11px; padding: 8px; display: flex; flex-direction: column; justify-content: space-between; height: 66px; border: 1.5px solid var(--rim-c); background: var(--face-navy); box-shadow: var(--raise-bordered); min-width: 0; }
.tile:active { transform: translateY(2px); box-shadow: var(--sunk-bordered); }
.tiles.bar .tile { height: 58px; }
.tile b { font-size: 15px; color: var(--text); }
.tile .sub { font-size: 11px; font-weight: 600; display: flex; gap: 4px; white-space: nowrap; }
.tile .sub .t { opacity: .85; font-weight: 500; }
.tiles.bar .tile .sub { flex-direction: column; gap: 0; font-size: 10px; line-height: 1.2; }
.tile.vacant { background: var(--face-well); border: 1.2px dashed var(--f-emptyborder); box-shadow: none; }
.tile.vacant:active { transform: none; box-shadow: none; }
.tile.vacant b { color: var(--f-muted); } .tile.vacant .sub { color: var(--f-faint); font-weight: 400; }
.tile.dash .sub { color: var(--f-dashtext); }
.tile.dine .sub { color: var(--f-dine); }
.tile.staged { border-color: var(--f-staged); }
.tile.lit { --top-c: #FFB27A; --side-c: #C23C00; background: var(--face-orange); border: 2px solid var(--rim-c); padding: 7.5px; } .tile.lit b, .tile.lit .sub { color: var(--ink); }
/* Red cannot be read on orange: on the lit tile the clock is ink when fine and cream on a red chip when late. */
.tile.lit .clock-fine { color: var(--ink); } .tile.lit .clock-late { color: var(--text); background: var(--red-deep); border-radius: 6px; padding: 0 4px; }
.floor-filters { display: flex; gap: 2px; }
.floor-filters button { min-height: 44px; padding: 0 8px; color: var(--f-subtle); font-size: 12px; border-bottom: 2px solid transparent; }
.floor-filters button.on { color: var(--text); border-bottom-color: var(--dash); }
.floor-filters button:focus-visible { outline: 2px solid var(--text); outline-offset: -2px; }
.floor-overview { display: flex; flex-direction: column; gap: 12px; padding: 2px 0 12px; min-width: 0; }
.floor-summary, .floor-area-title { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.floor-summary { color: var(--f-textsoft); font-size: 12px; }
.floor-plan-note, .floor-command-hint, .floor-roster p { margin: 0; color: var(--f-subtle); font-size: 12px; line-height: 1.45; }
.floor-plan-note { color: var(--f-textsoft); }
.floor-legend { display: flex; flex-wrap: wrap; column-gap: 12px; row-gap: 6px; padding-bottom: 4px; color: var(--f-textsoft); font-size: 10px; }
.floor-legend span { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.floor-legend i { width: 7px; height: 7px; border-radius: 50%; background: var(--floor-state); }
.floor-legend-allergy { color: var(--warning); }
.status-open { --floor-state: #C6D0E2; }
.status-seated { --floor-state: #8EBCFF; }
.status-toSend { --floor-state: #FFB020; }
.status-sent { --floor-state: #2DBE6C; }
.status-needsClearing { --floor-state: #FFB27A; }
.status-held { --floor-state: #D8D0BC; }
.floor-area { padding-top: 6px; min-width: 0; }
.floor-area + .floor-area { padding-top: 12px; border-top: 1px solid var(--f-border); }
.floor-words { transition: opacity .15s linear; }
/* The floor itself is the orange page; tables are navy with a cream
   stroke, the selected one peach with navy ink, walls navy. */
.floor-seats { pointer-events: none; }
.floor-seat-card rect { fill: var(--panel); stroke: rgba(247,243,232,.85); stroke-width: 1; vector-effect: non-scaling-stroke; }
.floor-seat-card.empty rect { stroke: var(--f-border); opacity: .7; }
.floor-seat-card.empty text { opacity: .7; }
.floor-seat-dot { fill: var(--text); }
.floor-seat-card.empty .floor-seat-dot { fill: var(--panel2); }
.floor-seat-number { fill: var(--ink); font-weight: 800; }
.floor-seat-card.empty .floor-seat-number { fill: var(--f-subtle); }
.floor-seat-title { fill: var(--text); font-weight: 700; }
.floor-seat-line { fill: var(--text); font-weight: 500; }
.floor-inside-label { fill: var(--text); font-weight: 800; }
.floor-inside-line { fill: var(--text); font-weight: 500; }
.floor-inside-muted { fill: var(--f-textsoft); font-weight: 600; }
.floor-area-title { margin-bottom: 4px; }
.floor-area-title h3 { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.floor-zoom { min-height: 44px; min-width: 44px; padding: 0 4px; color: var(--dash); font-size: 11px; }
.floor-zoom:focus-visible { outline: 2px solid var(--text); outline-offset: -2px; }
.floor-area h3, .floor-roster h3 { margin: 0; font-size: 14px; font-weight: 600; color: var(--text); }
.floor-area-title span { color: var(--f-subtle); font-size: 11px; white-space: nowrap; }
.floor-map-scroll { width: 100%; min-width: 0; overflow: auto; touch-action: pan-x pan-y; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: var(--f-border) transparent; }
.floor-map { display: block; width: 100%; max-width: none; height: auto; background: linear-gradient(180deg, #FF7A33 0%, #FF5500 100%); border-radius: 10px; box-shadow: inset 0 0 0 1.5px rgba(247,243,232,.6), inset 0 3px 8px rgba(4,11,24,.35); }
.floor-room-outline { fill: var(--orange-light); stroke: var(--panel); stroke-width: 1; vector-effect: non-scaling-stroke; }
.floor-wall { stroke: var(--panel); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.floor-wall.incomplete { stroke-dasharray: 5 5; }
.floor-wall.edge-door, .floor-wall.edge-doorway, .floor-wall.edge-opening { stroke: var(--orange-light); stroke-width: 4; }
.floor-fixture { fill: var(--panel2); stroke: rgba(247,243,232,.6); stroke-width: 1; vector-effect: non-scaling-stroke; }
.floor-fixture-label { fill: var(--text); text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.floor-destination { cursor: pointer; color: var(--floor-state); outline: none; }
.floor-table-shape { fill: var(--panel); stroke: var(--text); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.status-open .floor-table-shape { fill: var(--panel2); stroke-dasharray: 3 3; }
.floor-hit { fill: transparent; stroke: transparent; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.floor-destination.selected .floor-hit { stroke: var(--ink); }
.floor-destination.typed .floor-hit, .floor-destination:focus-visible .floor-hit { stroke: var(--peach); stroke-width: 2; }
.floor-destination:hover .floor-table-shape { stroke-width: 2.5; }
.floor-destination.selected .floor-table-shape { fill: var(--peach); stroke: var(--ink); stroke-dasharray: none; }
.floor-destination.typed .floor-table-shape, .floor-destination:focus-visible .floor-table-shape { stroke: var(--peach); stroke-width: 2; }
.floor-status-dot { fill: var(--floor-state); stroke: var(--ink); stroke-width: 1; vector-effect: non-scaling-stroke; pointer-events: none; }
.floor-run { fill: none; vector-effect: none; stroke-linejoin: round; stroke-linecap: butt; }
.floor-fixture.floor-run { stroke: var(--panel2); }
.status-open .floor-run { fill: none; stroke-dasharray: none; }
.floor-place-label, .floor-place-detail, .floor-place-age { text-anchor: middle; fill: var(--f-textsoft); paint-order: stroke; stroke: var(--panel); stroke-width: 3px; vector-effect: non-scaling-stroke; stroke-linejoin: round; pointer-events: none; }
.floor-place-label { fill: var(--text); font-weight: 650; }
.floor-destination.selected .floor-place-label { fill: var(--ink); stroke: var(--peach); }
.floor-allergy { fill: var(--warning); font-weight: 800; text-anchor: middle; paint-order: stroke; stroke: var(--panel); stroke-width: 3px; pointer-events: none; }
.floor-roster { display: flex; flex-direction: column; gap: 6px; padding-top: 12px; border-top: 1px solid var(--f-border); }
.floor-room-roster { padding-top: 0; border-top: none; gap: 0; }
.floor-roster-dot { display: inline-block; width: 6px; height: 6px; margin-right: 7px; border-radius: 50%; background: var(--floor-state); vertical-align: middle; }
.floor-roster-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 4px 6px; border-bottom: 1px solid var(--f-border); text-align: left; }
.floor-roster-row strong { color: var(--text); font-size: 14px; font-weight: 600; }
.floor-roster-row span { color: var(--f-textsoft); font-size: 11px; }
.floor-roster-row.selected { outline: 1px solid var(--peach); outline-offset: -1px; }
.floor-roster-row:focus-visible { outline: 2px solid var(--text); outline-offset: -2px; }
/* The register's clock on a check, wherever its age is drawn: green while
   fine, red once late; a late card wears a red edge. */
.clock-fine { color: var(--good); } .clock-late { color: var(--bad); }
text.clock-fine { fill: var(--good); } text.clock-late { fill: var(--bad); }
.tabcard.clock-late { border-color: var(--bad); box-shadow: inset 0 0 0 1px var(--bad), 0 var(--depth) 0 var(--side-c), var(--drop); }
/* The Tabs page: one check is one row — where it sits, what is on it in
   words, how much — the rows in navy panels, one panel per group, under
   the group's name, count and subtotal. Typing a name brings its row
   forward in orange with navy ink and the rest recede — no size change.
   A late row carries a red rule down its left edge; on the orange row the
   late clock rides a red chip in cream, never red on orange. */
.tabs-page { display: flex; flex-direction: column; gap: 12px; }
.tabgroup { --depth: 3px; border-radius: 12px; background: var(--face-navy); border: 1px solid var(--rim-c); box-shadow: var(--raise-bordered); padding: 8px 0 2px; display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.tabgroup-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 2px 12px 6px; font-size: 10px; font-weight: 600; letter-spacing: 1.1px; color: var(--muted); }
.tabgroup-head h2 { margin: 0; font: inherit; letter-spacing: inherit; color: inherit; }
.tabgroup-head .money { font-size: 11px; font-weight: 700; letter-spacing: 0; }
.tabrow { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 6px 12px; text-align: left; color: var(--text); transition: opacity .2s, background-color .2s; }
.tabrow + .tabrow { border-top: 1px solid var(--f-border); }
.tabrow:active { background: rgba(247,243,232,.08); }
.tabrow:focus-visible { outline: 2px solid var(--text); outline-offset: -2px; }
.tabrow-where { flex: none; width: 56px; display: flex; flex-direction: column; min-width: 0; }
.tabrow-where b { font-size: 15px; font-weight: 800; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tabrow-where small { font-family: var(--mono); font-size: 10px; font-weight: 700; color: var(--f-subtle); }
.tabrow-what { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tabrow-line { display: block; font-size: 14px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tabrow-line b { font-weight: 800; }
.tabrow-line.small { font-size: 12px; font-weight: 500; color: var(--f-subtle); }
.tabrow-line .muted { color: var(--muted); font-weight: 500; }
.tabrow-amount { flex: none; display: flex; flex-direction: column; align-items: flex-end; }
.tabrow-amount .money { font-size: 15px; font-weight: 800; color: var(--text); white-space: nowrap; }
.tabrow-paid { font-family: var(--mono); font-size: 10px; font-weight: 700; color: var(--good); white-space: nowrap; }
.tabrow .mark-allergy { color: var(--bad); font-weight: 900; } .tabrow .mark-staged { color: var(--warning); font-weight: 600; } .tabrow .mark-card { color: var(--good); font-weight: 600; }
.tabrow.closed .tabrow-where b, .tabrow.closed .tabrow-line, .tabrow.closed .tabrow-amount .money { color: var(--muted); }
.tabrow.lit .tabrow-where b { color: var(--dine); }
.tabrow.clock-late { box-shadow: inset 3px 0 0 var(--bad); }
.tabrow.focused, .tabrow.reference-match { --top-c: #FFB27A; --side-c: #C23C00; background: var(--face-orange); color: var(--ink); }
.tabrow.focused b, .tabrow.focused small, .tabrow.focused .tabrow-line, .tabrow.focused .muted, .tabrow.focused .money, .tabrow.focused .clock-fine, .tabrow.focused .tabrow-paid, .tabrow.focused .mark-allergy, .tabrow.focused .mark-staged, .tabrow.focused .mark-card,
.tabrow.reference-match b, .tabrow.reference-match small, .tabrow.reference-match .tabrow-line, .tabrow.reference-match .muted, .tabrow.reference-match .money, .tabrow.reference-match .clock-fine, .tabrow.reference-match .tabrow-paid, .tabrow.reference-match .mark-allergy, .tabrow.reference-match .mark-staged, .tabrow.reference-match .mark-card, .tabrow.reference-match .match-reading { color: var(--ink); }
.tabrow.focused .clock-late, .tabrow.reference-match .clock-late { color: var(--text); background: var(--red-deep); border-radius: 6px; padding: 0 4px; }
.tabrow.focused.clock-late, .tabrow.reference-match.clock-late { box-shadow: inset 3px 0 0 var(--red-deep); }
.tabrow.focused.lit .tabrow-where b, .tabrow.reference-match.lit .tabrow-where b { color: var(--ink); }
.tabrow.receded, .tabrow.reference-muted { opacity: .35; }
.tabrow-empty { padding: 4px 12px 10px; font-size: 13px; color: var(--muted); }
.tabfoot { --depth: 3px; width: 100%; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; min-height: 44px; padding: 12px; border-radius: 12px; background: var(--face-navy); border: 1px solid var(--rim-c); box-shadow: var(--raise-bordered); text-align: left; font-size: 10px; font-weight: 600; letter-spacing: 1.1px; color: var(--muted); }
.tabfoot .money { font-size: 11px; font-weight: 700; letter-spacing: 0; }
.tabfoot:active { transform: translateY(2px); box-shadow: var(--sunk-bordered); }
/* The combine preview: what is being folded in, the merge mark, where it goes. */
.combine-preview { display: grid; grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr); gap: 6px; align-items: start; }
.combine-side { --depth: 3px; min-width: 0; border-radius: 10px; background: var(--face-navy); border: 1px solid var(--rim-c); box-shadow: var(--raise-bordered); padding: 9px 10px; display: flex; flex-direction: column; gap: 6px; }
.combine-side > .row b { font-size: 14px; }
.combine-lines { display: flex; flex-direction: column; gap: 3px; font-size: 12px; }
.combine-line { display: flex; gap: 6px; align-items: baseline; }
.combine-line .money { font-size: 11px; color: var(--f-subtle); }
.combine-total { display: flex; flex-direction: column; gap: 2px; padding-top: 6px; border-top: 1px solid var(--f-border); }
.combine-total .money { font-size: 16px; }
.combine-mark { display: flex; flex-direction: column; align-items: center; gap: 4px; padding-top: 18px; color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: 1px; }
.combine-mark svg { width: 26px; height: 26px; fill: none; stroke: var(--dash); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
@media (prefers-reduced-motion: reduce) { .tabrow { transition: none; } }
.catpills { display: flex; gap: 6px; }
.catpill { --depth: 3px; flex: none; height: 32px; padding: 0 11px; border-radius: 8px; background: var(--face-navy); box-shadow: var(--raise); font-size: 12px; font-weight: 600; }
.catpill:active { transform: translateY(2px); box-shadow: var(--sunk); }
.catpill.on { --top-c: #FFB27A; --side-c: #C23C00; background: var(--face-orange); color: var(--ink); }
.mitems { display: flex; flex-direction: column; gap: 6px; }
.mitem { --depth: 3px; width: 100%; text-align: left; border-radius: 10px; background: var(--face-navy); border: 1px solid var(--rim-c); box-shadow: var(--raise-bordered); padding: 10px 12px; display: flex; align-items: center; gap: 10px; }
.mitem:active { transform: translateY(2px); box-shadow: var(--sunk-bordered); }
.mitem .n { font-size: 15px; font-weight: 600; }
.mitem.off .n, .mitem.off .money { color: var(--bad); }
.mitem.on { --top-c: #FFB27A; --side-c: #C23C00; background: var(--face-orange); color: var(--ink); }
.mitem.on .n, .mitem.on .muted, .mitem.on .tiny, .mitem.on .good, .mitem.on .money { color: var(--ink); }
.build { font-size: 12px; font-weight: 600; color: var(--muted); background: var(--panel2); border-radius: 6px; padding: 5px 8px; box-shadow: var(--rim); }

/* ── Notice ─────────────────────────────────────────────────────────── */
.notice { margin: 6px 10px 0; padding: 9px 12px; border-radius: 10px; background: var(--face-navy); color: var(--text); display: flex; align-items: center; gap: 10px; border: 1.5px solid var(--dine); box-shadow: 0 4px 0 var(--side-c), var(--drop); }
.notice.attention { border-color: var(--dash); --side-c: var(--orange-shade); }
.notice.urgent { border-color: var(--bad); --side-c: var(--red-deep); }
.notice.urgent span:first-child, .notice.urgent b { color: var(--bad); }
.notice b { display: block; font-size: 13px; } .notice small { opacity: .85; font-size: 11px; }
.notice-acts { display: flex; flex-direction: column; gap: 4px; }
.notice button { background: var(--face-cream); color: var(--ink); border-radius: 8px; padding: 6px 10px; font-size: 12px; font-weight: 700; white-space: nowrap; box-shadow: 0 2px 0 #B8AF9B; }
.notice button:active { transform: translateY(1px); box-shadow: 0 1px 0 #B8AF9B; }

/* ── The check ──────────────────────────────────────────────────────── */
.check-head { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-bottom: 1px solid var(--f-border); }
.namechip, .placechip { --depth: 2px; height: 34px; padding: 0 12px; border-radius: 10px; background: var(--face-navy-dim); border: 1px solid var(--rim-c); box-shadow: var(--raise-bordered); color: var(--f-textsoft); font-size: 14px; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; max-width: 55%; }
.namechip span:first-child { font-size: 12px; }
.namechip.new { --top-c: #FFB27A; --side-c: #C23C00; background: var(--face-orange); border-color: var(--rim-c); color: var(--ink); }
.placechip.none { color: var(--f-subtle); font-weight: 500; }
.lines { flex: 1; }
.group-head { display: flex; justify-content: space-between; padding: 6px 12px; background: rgba(7,18,36,.6); font-size: 12px; font-weight: 700; color: var(--muted); }
.lineitem { padding: 9px 12px; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 6px; }
.lineitem .top { display: flex; gap: 8px; align-items: flex-start; }
.lineitem .name { font-size: 15px; font-weight: 600; }
.lineitem.dead .name, .lineitem.dead .qty { color: var(--muted); }
.lineitem.voided .name { text-decoration: line-through; }
.lineitem .qty { font-family: var(--mono); font-weight: 600; color: var(--dash); }
.lineitem .right { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.lineacts { display: flex; gap: 8px; }
.act { --depth: 3px; height: 34px; padding: 0 14px; border-radius: 8px; background: var(--face-navy); border: 1px solid var(--rim-c); box-shadow: var(--raise-bordered); font-size: 13px; font-weight: 700; }
.act:active { transform: translateY(2px); box-shadow: var(--sunk-bordered); }
.totals { padding: 8px 12px 4px; display: flex; align-items: center; gap: 8px; border-top: 1px solid var(--f-border); }
.priced { color: rgba(198,208,226,.7); padding: 0 12px 8px; }
.pay {
  --top-c: rgba(255,255,255,.55);
  --side-c: #0B5A2F;
  --depth: 4px;
  height: 38px;
  padding: 0 16px;
  border-radius: 12px;
  background: var(--face-green);
  border: 1px solid var(--rim-c);
  box-shadow: var(--raise-bordered);
  color: var(--text);
  font-weight: 800;
  font-size: 14px;
  font-family: var(--mono);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: none;
  transition: transform .12s ease, box-shadow .12s ease;
}
.pay:active { transform: translateY(3px); box-shadow: var(--sunk-bordered); }
.pay span { font-family: -apple-system, Roboto, "Segoe UI", sans-serif; font-weight: 800; }
.pay:disabled { --top-c: rgba(142,188,255,.55); --side-c: #071224; background: var(--face-navy); border-color: var(--rim-c); color: var(--muted); opacity: .5; box-shadow: var(--raise-bordered); }
.staged { background: rgba(255,85,0,.12); border-top: 1px solid rgba(255,85,0,.3); padding: 8px 12px; display: flex; flex-direction: column; gap: 6px; }
.staged .row { justify-content: space-between; }
.fire { --top-c: rgba(255,255,255,.55); --side-c: #0B5A2F; --depth: 3px; width: 84px; height: 36px; border-radius: 10px; background: var(--face-green); box-shadow: var(--raise); color: var(--text); font-weight: 900; letter-spacing: 1px; }
.fire:active { transform: translateY(2px); box-shadow: var(--sunk); }
.firec { --top-c: #FFB27A; --side-c: #C23C00; --depth: 2px; height: 26px; padding: 0 10px; border-radius: 13px; background: var(--face-orange); box-shadow: var(--raise); color: var(--ink); font-size: 11px; font-weight: 900; }
.firec:active { transform: translateY(1px); box-shadow: var(--sunk); }
.refusal { background: rgba(232,86,74,.14); padding: 8px 12px; display: flex; gap: 8px; align-items: center; }
.refusal b { color: var(--bad); font-size: 13px; }

/* ── The line: four-square, field, mode key, send ────────────────────── */
.dock { background: var(--ground); border-top: 1px solid rgba(13,34,68,.35); margin-top: 8px; flex: none; }
.seatbar { display: flex; gap: 6px; align-items: center; padding: 6px 10px 0; }
.seatbar .lab { font-size: 10px; font-weight: 900; letter-spacing: 1px; color: var(--ink); }
.seatchip { --depth: 2px; height: 28px; padding: 0 10px; border-radius: 14px; background: var(--face-navy); border: 1px solid var(--rim-c); box-shadow: var(--raise-bordered); font-size: 11px; font-weight: 600; color: var(--muted); flex: none; }
.seatchip:active { transform: translateY(1px); box-shadow: var(--sunk-bordered); }
.seatchip.on { --top-c: rgba(255,255,255,.7); --side-c: #B8AF9B; background: var(--face-cream); border-color: var(--rim-c); color: var(--ink); font-weight: 700; }
.composer { display: flex; align-items: center; gap: 8px; padding: 8px 10px; }
.typing-context, .keyboard-dismiss, .short-status, .search-health { display: none; }
.search-input { display: flex; align-items: center; gap: 8px; }
.search-input .field { flex: 1; min-width: 0; }
.square { --depth: 4px; width: var(--tap); height: var(--tap); border-radius: 12px; background: var(--face-navy); border: 1px solid var(--rim-c); box-shadow: var(--raise-bordered); font-size: 20px; flex: none; transition: transform .12s ease, box-shadow .12s ease; }
.square:active { transform: translateY(3px); box-shadow: var(--sunk-bordered); }
.field { flex: 1; min-width: 0; height: var(--tap); border-radius: 12px; background: var(--face-well); border: 1px solid rgba(247,243,232,.45); box-shadow: inset 0 2px 6px rgba(4,11,24,.5); padding: 0 12px; display: flex; align-items: center; text-align: left; }
/* The line as the page draws it: the text either side of the caret keeps
   its spaces, so the caret sits after "titos " and not before the space. */
.line-display { display: flex; align-items: center; width: 100%; font-size: 16px; }
.line-text { font-weight: 500; white-space: pre; flex: none; } .line-placeholder { color: rgba(198,208,226,.6); font-size: 14px; }
.command-marker { display: inline-flex; align-items: center; gap: 3px; flex: none; height: 28px; padding: 0 6px; border: 1px solid currentColor; border-radius: 7px; font-size: 12px; font-weight: 650; white-space: nowrap; }
.command-marker svg { width: 12px; height: 12px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.marker-seat, .marker-table, .marker-bar, .marker-check { color: var(--dine); background: var(--panel2); }
.marker-command { color: var(--text); background: var(--panel2); }
.marker-course { color: var(--peach); background: var(--panel2); }
.order-item-main { min-width: 0; }
.order-destination { font-size: 14px; font-weight: 650; overflow-wrap: anywhere; }
.order-disposition { margin-top: 3px; color: var(--text); }
.order-subtotal { justify-content: space-between; }
.order-placement { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 4px; font-size: 14px; color: var(--dine); }
.order-question { display: flex; flex-direction: column; gap: 4px; }
.order-question > b { color: var(--warning); font-size: 14px; overflow-wrap: anywhere; }
.order-pending { display: flex; flex-direction: column; gap: 3px; font-size: 14px; overflow-wrap: anywhere; }
.order-pending .order-placement { margin-top: 0; }
.order-item-heading { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.order-item-description { display: inline-flex; align-items: flex-start; gap: 6px; max-width: 100%; padding: 5px 8px; border-radius: 6px; color: var(--text); background: var(--panel2); box-shadow: var(--rim); font-size: 14px; font-weight: 550; line-height: 1.4; overflow-wrap: anywhere; }
.order-item-description svg, .cand > svg { width: 16px; height: 16px; flex: none; margin-top: 2px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.order-item-description.unavailable { color: var(--bad); }
.selected-text { background: rgba(79,134,216,.55); }
.command-marker.selected-text { outline: 2px solid var(--text); outline-offset: -2px; }
.cursor { display: inline-block; flex: none; width: 2px; height: 18px; margin: 0 1px; border-radius: 1px; animation: blink 1.04s infinite; }
/* The mode key: Dash is the orange key with navy ink, Dine the navy key
   with blue lettering. The page sets the class; nothing inline. */
.modekey {
  --depth: 4px;
  width: 68px;
  height: var(--tap);
  border-radius: 12px;
  background: var(--face-navy);
  color: var(--text);
  font-weight: 900;
  font-size: 14px;
  flex: none;
  white-space: nowrap;
  border: 1px solid var(--rim-c);
  box-shadow: var(--raise-bordered);
  transition: transform .12s ease, box-shadow .12s ease;
}
.modekey.dash { --top-c: #FFB27A; --side-c: #C23C00; background: var(--face-orange); color: var(--ink); }
.modekey.dine { --top-c: rgba(255,255,255,.6); --side-c: #2F5FA8; background: linear-gradient(160deg, #B9D6FF 0%, #8EBCFF 45%, #4F86D8 100%); color: var(--ink); }
.modekey:active { transform: translateY(3px); box-shadow: var(--sunk-bordered); }
.sendkey {
  --depth: 4px;
  width: var(--tap);
  height: var(--tap);
  border-radius: 12px;
  background: var(--face-navy);
  color: var(--ink);
  font-size: 20px;
  font-weight: 700;
  flex: none;
  border: 1px solid var(--rim-c);
  box-shadow: var(--raise-bordered);
  transition: transform .12s ease, box-shadow .12s ease;
}
.sendkey:active { transform: translateY(3px); box-shadow: var(--sunk-bordered); }
/* A key that can send is the orange key with navy ink, whatever the mode; the command line's key is cream. */
.sendkey.dash:not(:disabled), .sendkey.dine:not(:disabled) { --top-c: #FFB27A; --side-c: #C23C00; background: var(--face-orange); color: var(--ink); }
.sendkey.command:not(:disabled) { --top-c: rgba(255,255,255,.7); --side-c: #B8AF9B; background: var(--face-cream); color: var(--ink); }
/* A key that cannot send sits flat and dim; opacity on the orange page would turn it muddy. */
.sendkey:disabled { --depth: 1px; background: var(--face-navy-dim); border: 1px solid rgba(247,243,232,.45); color: rgba(247,243,232,.4); box-shadow: 0 var(--depth) 0 var(--side-c); }
.sendkey.done {
  width: 72px;
  font-size: 14px;
  font-weight: 800;
  background: var(--face-navy) !important;
  color: var(--text);
  border: 1.5px solid var(--peach) !important;
  box-shadow: var(--raise-bordered);
  border-radius: 12px;
  transition: transform .12s ease, border-color .12s ease;
}
.sendkey.done:active { transform: translateY(3px); box-shadow: var(--sunk-bordered); }
/* The reader: five short rows, numbers first, then letters and the arrow. */
.keyboard { padding: 3px 3px 6px; background: var(--ground); display: flex; flex-direction: column; gap: 3px; }
.krow { display: flex; gap: 3px; }
.key { --depth: 3px; flex: 1; height: 40px; border-radius: 7px; background: var(--face-navy); border: 1px solid var(--rim-c); box-shadow: var(--raise-bordered); color: var(--text); font-family: var(--mono); font-size: 18px; font-weight: 600; }
.key.muted { background: var(--face-navy-dim); color: var(--muted); }
.key.wide { flex: 1.5; } .key.space { flex: 4; font-size: 12px; } .key.send { flex: 2; font-family: inherit; font-size: 20px; font-weight: 700; color: var(--muted); }
.key.send:not(:disabled) { --top-c: #FFB27A; --side-c: #C23C00; background: var(--face-orange); color: var(--ink); }
.kgap { flex: .5; }
.key:active { transform: translateY(2px); box-shadow: var(--sunk-bordered); }

/* The iPhone app: Apple's familiar keyboard geometry, owned by the page so
   there is no emoji/microphone key or accessory strip to remove; the keys
   are the register's navy keycaps on the orange page. */
.iphone-keyboard {
  padding: 8px 3px max(8px, env(safe-area-inset-bottom));
  gap: 8px;
  background: var(--ground);
  -webkit-user-select: none;
  user-select: none;
}
.iphone-keyboard .krow { gap: 6px; }
.iphone-keyboard .key {
  --depth: 3px;
  position: relative;
  min-width: 0;
  height: 42px;
  border: 0;
  border-radius: 5px;
  background: var(--face-navy);
  color: var(--text);
  box-shadow: var(--raise);
  font: 400 22px/1 -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  text-transform: none;
  touch-action: manipulation;
}
.iphone-keyboard .iphone-home-row { padding: 0 18px; }
.iphone-keyboard .iphone-third-row { align-items: center; }
.iphone-keyboard .iphone-modifier {
  flex: 0 0 42px;
  background: var(--face-navy-dim);
  font-size: 17px;
  font-weight: 500;
}
.iphone-keyboard .iphone-shift,
.iphone-keyboard .iphone-delete { margin-right: 12px; }
.iphone-keyboard .iphone-delete { margin: 0 0 0 12px; }
.iphone-keyboard .iphone-modifier.active { --top-c: #FFB27A; --side-c: #C23C00; background: var(--face-orange); color: var(--ink); }
.iphone-keyboard .iphone-bottom-row { gap: 6px; }
.iphone-keyboard .iphone-switch {
  flex-basis: 72px;
  margin: 0;
  font-size: 16px;
}
.iphone-keyboard .iphone-space {
  flex: 1;
  background: var(--face-navy);
  font-size: 16px;
}
.iphone-keyboard .iphone-return {
  flex: 0 0 88px;
  background: var(--face-navy-dim);
  font-size: 15px;
  font-weight: 500;
}
.iphone-keyboard .iphone-return:not(:disabled) { --top-c: #FFB27A; --side-c: #C23C00; background: var(--face-orange); color: var(--ink); }
.iphone-keyboard .iphone-return:disabled { color: rgba(247,243,232,.44); }
.iphone-keyboard .iphone-letter:active {
  filter: none;
  z-index: 4;
}
.iphone-keyboard .iphone-letter:active::after {
  content: attr(data-key);
  position: absolute;
  left: 50%;
  bottom: 8px;
  width: 46px;
  height: 58px;
  border-radius: 7px 7px 5px 5px;
  background: var(--face-cream);
  color: var(--ink);
  box-shadow: var(--rim), 0 3px 0 #B8AF9B, var(--drop);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 9px;
  font-size: 30px;
  transform: translateX(-50%);
  pointer-events: none;
}
.iphone-keyboard .key:active { transform: translateY(2px); box-shadow: var(--sunk); }
@media (max-width: 350px) {
  .iphone-keyboard .krow { gap: 4px; }
  .iphone-keyboard .iphone-home-row { padding: 0 13px; }
  .iphone-keyboard .iphone-shift,
  .iphone-keyboard .iphone-delete { margin: 0; }
  .iphone-keyboard .iphone-switch { flex-basis: 64px; }
  .iphone-keyboard .iphone-return { flex-basis: 78px; }
}
@keyframes blink { 0%, 45% { opacity: 1; } 55%, 100% { opacity: 0; } }

/* ── What the line read ─────────────────────────────────────────────── */
.card { --depth: 4px; margin: 8px 10px 0; padding: 10px 12px; border-radius: 12px; background: var(--face-navy); border: 1px solid; box-shadow: var(--raise-bordered); display: flex; flex-direction: column; gap: 8px; max-height: 200px; overflow-y: auto; }
/* When the native keyboard leaves a short viewport, reserve enough
   height for a complete check line. The question stays first and the
   rest of the same order card remains available by scrolling. */
@media (max-height: 560px) {
  .dock .card[data-scroll="card"] { max-height: 160px; }
  /* The narrower receipt can wrap its heading. Keep a line visible above
     the keyboard while the complete prepared order remains scrollable. */
  .middle.wide + .dock .card[data-scroll="card"] { max-height: 130px; }
}
.slot { display: flex; gap: 8px; align-items: flex-start; }
.slot .qty { font-family: var(--mono); font-weight: 600; }
.cands { display: flex; flex-wrap: wrap; gap: 8px; }
.guest-count-card { border-color: var(--rim-c); }
.guest-counts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.guest-count { --depth: 3px; min-width: 44px; min-height: 44px; border-radius: 8px; border: 1px solid var(--rim-c); background: var(--face-navy); box-shadow: var(--raise-bordered); color: var(--text); font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; }
.guest-count:hover, .guest-count:active { --top-c: #FFB27A; --side-c: #C23C00; border-color: var(--rim-c); background: var(--face-orange); color: var(--ink); }
.guest-count:active { transform: translateY(2px); box-shadow: var(--sunk-bordered); }
.guest-count:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.guest-count:disabled { opacity: .45; }
.guest-count.selected { --top-c: #FFB27A; --side-c: #C23C00; border-color: var(--rim-c); background: var(--face-orange); color: var(--ink); }
.guest-count-chip { --depth: 2px; flex: none; min-height: 44px; padding: 0 8px; border: 1px solid var(--rim-c); border-radius: 10px; background: var(--face-navy-dim); box-shadow: var(--raise-bordered); color: var(--f-textsoft); font-size: 12px; font-weight: 600; white-space: nowrap; }
.guest-count-cancel { min-height: 44px; padding: 0 8px; color: var(--dash); }
.guest-count-chip:focus-visible, .guest-count-cancel:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.cand { --depth: 3px; min-height: 44px; min-width: 44px; height: auto; max-width: 100%; padding: 8px 10px; border-radius: 8px; background: var(--face-navy); border: 1px solid var(--rim-c); box-shadow: var(--raise-bordered); font-size: 13px; display: inline-flex; align-items: center; gap: 6px; }
.cand:disabled { opacity: .5; }
.cand:active { transform: translateY(2px); box-shadow: var(--sunk-bordered); }
.reading { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 10px 0; }
.spinner { width: 18px; height: 18px; border: 2px solid transparent; border-top-color: var(--dash); border-radius: 50%; animation: spin .8s linear infinite; flex: none; }
/* On the orange page an orange arc vanishes: the linking, reading and busy spinners turn in ink. */
.linking .spinner, .reading .spinner, .busy.spinner { border-top-color: var(--ink); }
@keyframes spin { to { transform: rotate(360deg); } }
.promise { --depth: 3px; margin: 8px 10px 0; padding: 8px 12px; border-radius: 10px; background: var(--face-navy); border: 1px solid var(--rim-c); box-shadow: var(--raise-bordered); display: flex; align-items: center; gap: 8px; font-weight: 600; }
.promise .tiny { margin-left: auto; }
.outcome { --depth: 3px; margin: 8px 10px 0; padding: 8px 12px; border-radius: 10px; display: flex; flex-direction: column; gap: 2px; border: 1px solid; box-shadow: var(--raise-bordered); }
.outcome.ok { background: var(--face-navy); border-color: var(--good); } .outcome.ok b { color: var(--good); font-size: 13px; }
.outcome.no { background: var(--face-navy); border-color: var(--bad); } .outcome.no b { color: var(--bad); font-size: 13px; }
.failed { --depth: 3px; margin: 8px 10px 0; padding: 8px 12px; border-radius: 10px; background: var(--face-navy); border: 1px solid var(--bad); box-shadow: var(--raise-bordered); color: var(--bad); font-size: 12px; font-weight: 600; }

/* ── Sheets ─────────────────────────────────────────────────────────── */
.scrim { position: fixed; inset: 0; background: rgba(4,11,24,.6); display: flex; align-items: flex-end; z-index: 10; }
.sheet { width: 100%; max-height: 92%; overflow-y: auto; background: var(--face-navy); border: 1px solid var(--rim-c); box-shadow: inset 0 2px 0 var(--top-c), 0 -8px 24px rgba(4,11,24,.5); border-radius: 16px 16px 0 0; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.sheet.tall { height: 90%; }
.sheet .field { flex: none; width: 100%; }
.sheet-head { display: flex; justify-content: space-between; align-items: center; }
.sheet-head b { font-size: 18px; }
.link { color: var(--dash); font-weight: 700; font-size: 14px; padding: 6px; }
.opt { --depth: 3px; height: 36px; padding: 0 12px; border-radius: 8px; background: var(--face-navy); border: 1px solid var(--rim-c); box-shadow: var(--raise-bordered); font-size: 13px; font-weight: 500; margin: 0 8px 8px 0; }
.opt:active { transform: translateY(2px); box-shadow: var(--sunk-bordered); }
.opt.on { --top-c: #FFB27A; --side-c: #C23C00; background: var(--face-orange); border-color: var(--rim-c); color: var(--ink); }
.stepper { --depth: 3px; width: 36px; height: 36px; border-radius: 8px; background: var(--face-navy); border: 1px solid var(--rim-c); box-shadow: var(--raise-bordered); font-size: 18px; font-weight: 700; }
.stepper:active { transform: translateY(2px); box-shadow: var(--sunk-bordered); }
.big { --depth: 4px; width: 100%; height: var(--tap); border-radius: 12px; font-size: 15px; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--rim-c); box-shadow: var(--raise-bordered); }
.big:active { transform: translateY(3px); box-shadow: var(--sunk-bordered); }
.big.orange { --top-c: #FFB27A; --side-c: #C23C00; background: var(--face-orange); border-color: var(--rim-c); color: var(--ink); }
.big.green { --top-c: rgba(255,255,255,.55); --side-c: #0B5A2F; background: var(--face-green); border-color: var(--rim-c); color: var(--text); }
.big.plain { background: var(--face-navy); border-color: var(--rim-c); color: var(--text); }
.big:disabled { --top-c: rgba(142,188,255,.55); --side-c: #071224; background: var(--face-navy); border-color: var(--rim-c); color: var(--muted); opacity: .6; }
.quote { text-align: center; } .quote .amt { font-family: var(--mono); font-size: 40px; font-weight: 600; }
.cash { --depth: 3px; height: 40px; padding: 0 12px; border-radius: 10px; background: var(--face-navy); border: 1px solid var(--rim-c); box-shadow: var(--raise-bordered); font-family: var(--mono); font-size: 13px; }
.cash:active { transform: translateY(2px); box-shadow: var(--sunk-bordered); }
.cash.on { --top-c: #FFB27A; --side-c: #C23C00; background: var(--face-orange); border-color: var(--rim-c); color: var(--ink); }
.splitrow { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .splitrow .cash { min-width: 44px; padding: 0 10px; }
.handoff { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; padding: 12px; border-radius: 14px; background: var(--face-well); border: 1px dashed var(--border); } .handoff b { font-size: 17px; }
.tips { flex-wrap: wrap; } .tips .cash { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; height: 46px; min-width: 64px; line-height: 1.1; } .tips .cash .tiny { font-weight: 600; opacity: .8; }
.tips .cash.tipbig { height: 64px; min-width: 76px; font-size: 17px; font-weight: 700; }
/* Payments §4: one row, dearest first; PIN-gate shape for Other. */
.tiptiles { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 5px; }
.tiptile { --depth: 4px; --side-c: var(--orange-shade); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-width: 0; min-height: 78px; padding: 6px 2px; border-radius: 12px; background: var(--dash); box-shadow: var(--raise); color: var(--ground); }
.tiptile:active { transform: translateY(2px); box-shadow: var(--sunk); }
.tiptile b { font-size: clamp(14px, 4vw, 22px); }
.tiptile span { font-size: clamp(10px, 2.8vw, 15px); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.tip-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pad-key { min-height: 78px; border-radius: 12px; background: var(--face-navy); box-shadow: var(--raise); font-size: 24px; color: var(--ground); }
.pad-key.enter { background: var(--dash); --side-c: var(--orange-shade); font-size: 20px; }
.pad-key:disabled { background: var(--navy-deep); color: var(--faint); }
.pad-key:active { transform: translateY(2px); box-shadow: var(--sunk); }
.pay-tap { position: relative; display: flex; align-items: center; justify-content: center; gap: 20px; min-height: 100px; background: transparent; color: var(--ground); font-size: 22px; font-weight: 700; }
.pay-tap > :not(.pay-field) { position: relative; }
.pay-mark { display: block; width: 72px; height: 72px; border-radius: 16px; object-fit: contain; }
.pay-field { position: absolute; width: 160px; height: 86px; border-radius: 24px; background: var(--panel2); }
/* Source: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion
   and https://developer.mozilla.org/en-US/docs/Web/CSS/animation-direction */
@media (prefers-reduced-motion: no-preference) {
  .pay-tap.waiting .pay-mark { animation: pay-breathe 1.5s ease-in-out infinite alternate; }
  .pay-tap.waiting .pay-field { animation: pay-swell 1.5s ease-in-out infinite alternate; }
}
@keyframes pay-breathe { from { opacity: 1; } to { opacity: .55; } }
@keyframes pay-swell { from { transform: scale(1); } to { transform: scale(1.06); } }
.receipt-question { display: flex; flex-direction: column; gap: 12px; }
.receipt-question h2 { text-align: center; font-size: 20px; margin: 8px 0; }
.receipt-channels { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.receipt-channel { min-height: 78px; border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; background: var(--face-navy); box-shadow: var(--raise); font-size: 14px; color: var(--ground); }
.receipt-channel svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.authorize { --top-c: rgba(255,255,255,.55); --side-c: #0B5A2F; --depth: 4px; width: 100%; border-radius: 14px; font-weight: 800; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border: 1px solid var(--rim-c); background: var(--face-green); box-shadow: var(--raise-bordered); color: var(--text); transition: height .2s, font-size .2s, filter .2s, opacity .2s; }
.authorize:active { transform: translateY(3px); box-shadow: var(--sunk-bordered); }
.authorize span { font-size: 12px; font-weight: 600; opacity: .85; }
.authorize.blurred { height: 46px; font-size: 15px; filter: blur(1.6px); opacity: .4; pointer-events: none; }
.authorize.armed { height: 72px; font-size: 22px; }
.cofchip { font-size: 11px; font-weight: 700; color: var(--good); background: transparent; border: 1px solid rgba(45,190,108,.55); border-radius: 8px; padding: 3px 7px; white-space: nowrap; flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; height: 28px; }
.check-head .placechip { white-space: nowrap; flex: none; }
.paid { text-align: center; display: flex; flex-direction: column; gap: 8px; align-items: center; padding: 10px 0; }
.paid .check { width: 44px; height: 44px; border-radius: 50%; background: var(--face-green); box-shadow: var(--rim), 0 3px 0 #0B5A2F, var(--drop); color: var(--text); font-size: 26px; font-weight: 900; display: flex; align-items: center; justify-content: center; }
.paid .amt { font-size: 22px; font-weight: 900; color: var(--good); }
.paid .change { font-family: var(--mono); font-size: 30px; }
.refbox { --depth: 3px; border-radius: 10px; background: var(--face-navy); border: 1px solid var(--bad); box-shadow: var(--raise-bordered); padding: 12px; }
.seats { display: flex; flex-wrap: wrap; gap: 8px; }
.seatn { --depth: 4px; width: 52px; height: 52px; border-radius: 12px; background: var(--face-navy); border: 1px solid var(--rim-c); box-shadow: var(--raise-bordered); font-size: 18px; font-weight: 700; }
.seatn:active { transform: translateY(3px); box-shadow: var(--sunk-bordered); }
.dialog { position: fixed; inset: 0; background: rgba(4,11,24,.6); display: flex; align-items: center; justify-content: center; padding: 24px; z-index: 20; }
.dialog .box { --depth: 5px; width: 100%; border-radius: 14px; background: var(--face-navy); border: 1px solid var(--rim-c); box-shadow: var(--raise-bordered); padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.reason { --depth: 3px; width: 100%; text-align: left; border-radius: 9px; background: var(--face-navy); box-shadow: var(--raise); padding: 12px; font-size: 14px; }
.reason:active { transform: translateY(2px); box-shadow: var(--sunk); }
.busy { position: fixed; top: 10px; right: 10px; z-index: 30; }
.search-actions .link { min-height: 44px; padding: 0 12px; }
.search-actions h2 { font-size: 18px; margin: 0; }
.linking { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 24px; text-align: center; color: var(--ink); }

/* The pay sheet's check: what they are buying, then the total before tip. */
.receipt { max-height: 132px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; padding: 6px 2px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.rline { display: flex; align-items: baseline; gap: 8px; font-size: 14px; }
.rline .qty { color: var(--dash); font-weight: 800; font-family: var(--mono); min-width: 26px; }
.rline .mono { font-family: var(--mono); }
.rtotals { display: flex; align-items: baseline; gap: 8px; padding: 2px 2px 0; }
.rtotal { font-family: var(--mono); font-size: 22px; font-weight: 700; }
.readerbig { text-align: center; padding: 6px 0 0; } .readerbig .amt { font-family: var(--mono); font-size: 44px; font-weight: 700; }
/* The signature pad: paper on the navy sheet, a baseline, and Done only once there is ink. */
.sigwrap { position: relative; }
.sigpad { display: block; width: 100%; height: 170px; border-radius: 12px; background: #f6f2e9; box-shadow: var(--rim), 0 3px 0 #B8AF9B, var(--drop); touch-action: none; }
.sigline { position: absolute; left: 14px; right: 14px; bottom: 26px; display: flex; align-items: center; gap: 8px; color: rgba(13,34,68,.5); border-bottom: 1px solid rgba(13,34,68,.35); padding-bottom: 4px; pointer-events: none; }
.sigline .link { pointer-events: auto; margin-left: auto; color: rgba(13,34,68,.7); }
.sigline .link:disabled { opacity: .35; }
.shift-log-text { white-space: pre-wrap; overflow-wrap: anywhere; padding-top: 8px; }

/* Keep the exact payment check readable without hiding tender controls. */
.payment-items { overflow-y: auto; max-height: 28vh; min-height: 48px; flex: 0 1 auto; border-bottom: 1px solid var(--border); }
.payment-items .lineitem { cursor: default; }
.payment-items .grow { min-width: 0; overflow-wrap: anywhere; }
.sheet:has(.payment-items) { overflow-y: auto; }

/* Compact handheld: one primary action at the line; the receipt retains
   its total. The wide canvas uses the existing floor/reference and check. */
.compact-total { font-size: 22px; white-space: nowrap; }
.sendkey.pay-ready { background: var(--face-green); color: var(--text); }
@media (max-width: 599px) {
  .composer .sendkey { min-width: 58px; font-size: 14px; }
}
.middle.wide .check-head { flex-wrap: wrap; }
.middle.wide .totals { flex-wrap: wrap; }
.middle.wide .totals > .small { flex: 1 1 100%; }
@media (max-height: 440px) {
  .dock .above { max-height: max(40px, calc(100dvh - 350px)); overflow-y: auto; flex-shrink: 1; }
  .middle.wide .check-head { padding: 4px 10px; }
  .middle.wide .totals { padding: 4px 10px; flex-wrap: nowrap; }
  .middle.wide .totals > .small { flex: 1 1 0; }
  .middle.wide .priced { padding-bottom: 4px; }
}

/* A native landscape keyboard may leave only a short strip of page. Keep
   the check context, scrollable reading, and command reachable together;
   hiding the keyboard restores the full room and the seat controls. */
@media (max-height: 260px) {
  .app:has(> .dock.native-typing) > .topbar,
  .app:has(> .dock.native-typing) > .middle,
  .app:has(> .dock.native-typing) > .notices,
  .app:has(> .dock.native-search) > .topbar,
  .app:has(> .dock.native-search) > .notices,
  .dock.native-search { display: none; }
  .dock.native-typing { flex: 1; min-height: 0; margin-top: 0; display: flex; flex-direction: column; }
  .dock.native-typing .typing-context { display: flex; flex: none; justify-content: space-between; gap: 12px; padding: 4px 12px; color: var(--ink); font-size: 13px; font-weight: 700; }
  .dock.native-typing .typing-context > span:first-child { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .dock.native-typing .typing-context .money { flex: none; }
  .dock.native-typing .typing-health { flex: none; }
  .dock.native-typing .above { flex: 1; min-height: 0; max-height: none; overflow-y: auto; }
  .dock.native-typing .card[data-scroll="card"] { max-height: none; overflow: visible; margin-top: 0; }
  .dock.native-typing .seatbar { display: none; }
  .dock.native-typing .composer { flex: none; }
  .dock.native-typing .keyboard-dismiss { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 44px; height: var(--tap); color: var(--ink); }
  .dock.native-typing .short-status,
  .app:has(> .dock.native-search) .pane-body .short-status { display: block; }
  .short-status .notice button { min-height: 44px; }
  .app:has(> .dock.native-search) .middle .pagedots,
  .app:has(> .dock.native-search) .middle .page,
  .app:has(> .dock.native-search) .pane-head { display: none; }
  .app:has(> .dock.native-search) .middle .strip { display: block; width: 100%; transform: none; transition: none; }
  .app:has(> .dock.native-search) .middle .page-current.page-reference { display: flex; width: 100%; padding: 0; }
  .app:has(> .dock.native-search) .pane-body { padding: 4px 10px; }
  .app:has(> .dock.native-search) .search-input { position: sticky; top: -4px; z-index: 1; background: var(--panel); }
  .app:has(> .dock.native-search) .search-input .keyboard-dismiss { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 44px; height: var(--tap); color: var(--text); }
  .app:has(> .dock.native-search) .search-health { display: inline; flex: none; font-size: 12px; color: var(--text); }
  .keyboard-dismiss svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
}

/* Keep the bill as one complete receipt column, without a nested line scroller. */
.payment-bill { max-height: none; overflow: visible; flex: none; }
.payment-bill .rline { flex: none; }
.payment-bill .grow { min-width: 0; overflow-wrap: anywhere; }
.payment-bill .dead { text-decoration: line-through; color: var(--muted); }