/* public/pos/pos-clean.css — THE POS CLEANUP (14 Oct 2026).
   One layer over the page's own rules, loaded after both of its <style>
   blocks so it wins on order at equal specificity. Every id, data-* hook,
   route and behaviour is the page's; this file only changes how it looks.

   The rules of the look:
   - Inter everywhere, names as written, sentence case. One small uppercase
     label style (.trail-h, .trail-group, .coursehd) and no other.
   - Cream ground, white surfaces, charcoal ink, ONE bronze (prices, the
     selected state). Charcoal for the act (Pay, Add). No gradients, no side
     stripes, no glow.
   - 12px cards, 10px buttons, 1px hairlines; a soft shadow on floating
     sheets only.
   Bronze as text is --accent-strong (#866332, 5:1 on white): the raw
   #A67A3E is 3.4:1, a fill, never small ink. */

/* ---------- tokens (light; dark keeps the shared set) ---------- */
html:not([data-theme="dark"]) {
  --text-primary: #1B1B1B;
  --text-secondary: #6B6B6B;
  --border-default: #E6DFD2;
  --border-subtle: #EEE8DD;
  --surface-sunken: #F1ECE2;
  --shadow: 0 1px 2px rgba(27, 27, 27, .05), 0 12px 32px rgba(27, 27, 27, .10);
  --shadow-tile: none;
}
:root {
  --pos-bar: #1B1B1B;           /* the header: charcoal in both themes */
  --pos-on-bar: #F6F1E7;
  --pos-on-bar-2: rgba(246, 241, 231, .62);
  --pos-hairline: var(--border-default);
  --pos-control: #D9D0C0;       /* an unticked box, a stepper rim */
  --r-card: 12px;
  --r-btn: 10px;
}
html[data-theme="dark"] { --pos-control: #6A645A; }
body { font-feature-settings: "cv11", "ss01"; }
.numeric, .price, .amt, .tt, .tc, #payTotal, .opt-chip-price, .opt-done, .hdr-clock { font-variant-numeric: tabular-nums; }

/* ---------- header: one charcoal bar ---------- */
#app > header { background: var(--pos-bar); color: var(--pos-on-bar); border-bottom: 0; gap: 14px; padding-left: 14px; padding-right: 12px; }
#app > header .h1mark .h { fill: var(--pos-on-bar); }
#app > header .h1mark .one { fill: #C9985A; }
.brand [data-brand-name] { font-size: 15px; font-weight: 600; color: var(--pos-on-bar); max-width: 36vw; }
.brand.menu-btn:hover, .brand.menu-btn:active { background: rgba(246, 241, 231, .08); }
.navbtn { color: var(--pos-on-bar); }
.navbtn:active { background: rgba(246, 241, 231, .12); }
.hdr-status { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 500; color: var(--pos-on-bar-2); white-space: nowrap; }
.hdr-status .dot { width: 7px; height: 7px; border-radius: 50%; background: #5FB37C; }
.hdr-status.off { color: #F2A99F; }
.hdr-status.off .dot { background: #E5675A; }
.hdr-clock { font-size: 15px; font-weight: 500; color: var(--pos-on-bar); min-width: 42px; text-align: right; }
.hdr-clock:empty { display: none; }

/* Alex is a quiet icon in the bar, not a disc floating over the tables
   rail. The page still drags and stores a position; the bar slot wins. */
.alex-avatar {
  left: auto !important; bottom: auto !important;
  right: calc(60px + env(safe-area-inset-right)) !important; top: calc(env(safe-area-inset-top) + 6px) !important;
  width: 36px; height: 36px; border-radius: var(--r-btn); background: transparent; color: var(--pos-on-bar); box-shadow: none; cursor: pointer; z-index: 39;
}
.alex-avatar:active { background: rgba(246, 241, 231, .12); }
.alex-avatar .ico { width: 18px; height: 18px; }
.alex-hide { display: none !important; }
.alex-show { top: calc(env(safe-area-inset-top) + 8px); right: calc(60px + env(safe-area-inset-right)); min-height: 32px; padding: 0 10px; border-radius: var(--r-btn); background: transparent; color: var(--pos-on-bar-2); box-shadow: none; letter-spacing: 0; font-weight: 500; z-index: 39; }
#navBtn { margin-left: 40px; }

/* ---------- search and the category tabs ---------- */
.menusearch { padding: 12px 16px 0; }
.menusearch input { min-height: 40px; border-radius: var(--r-btn); border-color: var(--pos-hairline); background: var(--surface); font-size: 16px; }
.menusearch input:focus { border-color: var(--text-secondary); background: var(--surface-raised); }
.menusearch .searchico { top: 22px; width: 18px; height: 18px; }
.searchclear { border-radius: var(--r-btn); border-color: var(--pos-hairline); }
.tabs { gap: 16px; padding: 4px 16px 0; border-bottom: 1px solid var(--pos-hairline); }
/* POS polish 2 (15 Oct 2026): the tabs centred over the menu. Auto margins,
   not justify-content: center — a row wider than the menu then still
   scrolls from "All" instead of cutting it off on the left. */
.tabs > .tab { flex: none; }
.tabs > .tab:first-child { margin-left: auto; }
.tabs > .tab:last-child { margin-right: auto; }
.tab {
  min-height: 44px; padding: 10px 0 8px; border: 0; border-bottom: 2px solid transparent; border-radius: 0;
  background: none; color: var(--text-secondary); font-size: 15px; font-weight: 500;
}
.tab.on { background: none; border-color: transparent; border-bottom-color: var(--accent); color: var(--text-primary); font-weight: 600; }
.tab:active { transform: none; color: var(--text-primary); }
.subtabs { gap: 6px; padding: 10px 16px 0; }
.subtab { min-height: 36px; padding: 6px 12px; border-radius: var(--r-btn); border-color: var(--pos-hairline); font-weight: 500; }
.subtab.on { background: var(--surface-sunken); color: var(--text-primary); border-color: var(--pos-hairline); font-weight: 600; }

/* ---------- the menu grid ---------- */
.grid { padding: 16px; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }
.tile {
  align-items: stretch; justify-content: space-between; text-align: left; gap: 10px;
  min-height: 112px; padding: 14px 14px 12px; border: 1px solid var(--pos-hairline); border-radius: var(--r-card);
  background: var(--surface-raised); box-shadow: none;
}
.tile:hover { border-color: var(--pos-control); }
.tile:active { transform: scale(.98); }
.tile.tinted, .cat-tile.tinted { border-left: 1px solid var(--pos-hairline); }
.tile .kind { display: flex; align-items: center; gap: 6px; min-height: 16px; font-size: 12px; line-height: 16px; font-weight: 500; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 4px; }
.cat-tile.tinted .cmeta::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--dot, var(--tint)); }
.tile .kind:empty { display: none; }
/* POS polish 2 (15 Oct 2026): a dish tile no longer names its section, so the
   category colour is the tile's own small dot, top right, level with the
   name's first line; the name keeps clear of it. */
.tile.tinted:not(.cat-tile)::after { content: ""; position: absolute; top: 21px; right: 14px; width: 8px; height: 8px; border-radius: 50%; background: var(--dot, var(--tint)); }
.tile.tinted:not(.cat-tile) .name { padding-right: 14px; }
.tile .name { font-size: 17px; font-weight: 600; line-height: 1.25; letter-spacing: -.005em; }
.tile .price { justify-content: flex-start; font-size: 15px; font-weight: 600; color: var(--accent-strong); margin-top: auto; }
/* "Not available" (and "check allergens") sit under the price, which keeps to the foot of the tile. */
.tile .na { font-size: 12px; font-weight: 500; color: var(--text-secondary); margin-top: -6px; }
.tile .price .sizes { display: none; }
.tile .where { font-size: 12px; margin-top: 2px; }
.tile .tag { font-size: 11px; font-weight: 500; margin-top: 2px; }
.tile.out { background: var(--surface-sunken); border-color: var(--border-subtle); }
.tile.out .name, .tile.out .price { color: var(--text-secondary); }
.tile .allergy-check { align-self: flex-start; padding: 0; background: none; font-size: 12px; font-weight: 600; }
.tile .badge { border-radius: 6px; }
/* Sections (folders) are shaped like the dish tiles (15 Oct 2026). A row with
   the count on the right left the name ~42px on the iPad, and the page's old
   `word-break: break-word` let it shrink to a letter a line ("Foo / d / Me /
   nu"). Now: the name across the tile's full width, wrapping only between
   words, at most two lines; the count small underneath with the colour dot
   beside it, as the dish tile's label carries it. */
.cat-tile {
  flex-direction: column; justify-content: space-between; align-items: stretch; text-align: left; gap: 10px;
  min-height: 112px; padding: 14px 14px 12px; border: 1px solid var(--pos-hairline); border-radius: var(--r-card);
  background: var(--surface-raised); box-shadow: none;
}
.cat-tile .cname {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-width: 0; font-size: 17px; font-weight: 600; line-height: 1.25; letter-spacing: -.005em;
  word-break: normal; overflow-wrap: break-word; hyphens: manual;
}
.cat-tile .cmeta { display: flex; align-items: center; gap: 6px; min-height: 16px; font-size: 12px; line-height: 16px; font-weight: 500; color: var(--text-secondary); white-space: nowrap; overflow: hidden; }
/* A level that shows folders gets wider columns, so "Iced and Blended Drinks" fits on two lines. */
.grid:has(> .cat-tile) { grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); }
/* Dish names wrap only between words too (a word longer than the tile still breaks rather than spill). */
.tile .name { word-break: normal; overflow-wrap: break-word; }
/* The way back: a quiet line, not a beige bar. */
.backbar { padding: 4px 0 6px; margin-bottom: 4px; border: 0; border-radius: 0; background: none; gap: 8px; font-size: 14px; font-weight: 500; }
.backbar:active { background: none; color: var(--text-secondary); }
.backbar .arrow { font-size: 18px; }
.backbar .here { font-weight: 500; font-size: 12px; }

/* ---------- the tables rail ---------- */
.trail { width: 156px; background: var(--surface); border-right: 1px solid var(--pos-hairline); }
.trail-h, .trail-group, .coursehd, .tsum-course {
  font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-secondary); font-variant-caps: normal;
}
.trail-h { padding: 14px 12px 8px; }
.trail-bk { font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--accent-strong); }
/* POS polish 2 (15 Oct 2026): one table a row again, as before #569 — two
   squares a row cut "Jargo" and "Window 2" at the rail's edge. The name on
   one line across the card; on a seated table "6 covers · £187.60" under it,
   then any "• unsent" / "• part paid". #569's colours stay. */
.trail-list { display: flex; flex-direction: column; gap: 8px; padding: 0 10px 14px; }
/* The list scrolls: a card keeps its height rather than squeezing its lines out. */
.trail-list > * { flex: none; }
.tcardx {
  display: block; width: 100%; min-width: 0; min-height: 44px;
  padding: 10px 12px; border: 1px solid var(--pos-hairline); border-radius: var(--r-btn);
  background: transparent; color: var(--text-primary); text-align: left;
}
.tcardx .tn { font-size: 16px; font-weight: 600; line-height: 22px; letter-spacing: -.005em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tcardx .tc, .tcardx .tt { display: inline; font-size: 12px; line-height: 16px; color: var(--text-secondary); margin: 0; }
.tcardx .tc::after { content: " · "; }
.tcardx .tt span { display: block; white-space: nowrap; }
.tcardx:not(.busy) .tn { color: var(--text-secondary); font-weight: 500; }
/* "Free" says nothing a quiet square does not: kept for a screen reader. */
.tcardx:not(.busy):not(.takeaway) .tt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tcardx.busy { background: var(--surface-raised); border-color: var(--pos-hairline); }
.tcardx.busy .tt { color: var(--text-primary); font-weight: 500; }
.tcardx .unsent, .tcardx .paying, .tcardx .partpaid { font-weight: 600; color: var(--accent-strong); }
.tcardx .bk { font-size: 10px; line-height: 13px; color: var(--accent-strong); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tcardx.on { background: var(--text-primary); border-color: var(--text-primary); color: var(--surface); outline: none; }
.tcardx.on .tn, .tcardx.on .tc, .tcardx.on .tt, .tcardx.on .bk, .tcardx.on .unsent, .tcardx.on .paying, .tcardx.on .partpaid { color: var(--surface); }
.tcardx.on .tc { opacity: .75; }
.tcardx.takeaway .tn { font-size: 14px; }
.tcardx.takeaway .tt { display: block; }
.trail-group { padding: 12px 2px 0; }
.trail-new { border: 1px dashed var(--pos-control); border-radius: var(--r-btn); background: transparent; font-weight: 500; }
.trail-wait { border: 1px solid var(--pos-hairline); border-radius: var(--r-btn); background: var(--surface-raised); }
.trail-wait .tw { color: var(--accent-strong); }

/* ---------- the order panel ---------- */
.ticket { background: var(--surface-raised); border-left: 1px solid var(--pos-hairline); }
.ticket-head { padding: 16px 16px 12px; border-bottom: 1px solid var(--pos-hairline); }
.ticket-head .t { font-size: 20px; font-weight: 600; letter-spacing: -.01em; }
.ticket-head .sub { font-size: 13px; }
.ticket-head .sub-covers, .ticket-head .sub-ticket, .ticket-head .sub-party { color: var(--text-secondary); font-weight: 500; text-decoration: underline dotted; text-decoration-color: var(--pos-control); }
.ticket-head .link, .ticket-more { width: 40px; height: 40px; min-height: 40px; border: 1px solid var(--pos-hairline); border-radius: var(--r-btn); background: var(--surface-raised); color: var(--text-primary); }
.ticket-head .link .ico { width: 18px; height: 18px; }
.ticket-more { font-size: 20px; }
.chip { min-height: 36px; padding: 6px 12px; border-radius: var(--r-btn); border-color: var(--pos-hairline); font-weight: 500; }
.allergy-chip { min-height: 36px; padding: 6px 12px; border-radius: var(--r-btn); }
/* Course 1 · 2 · 3: one compact segmented control. */
.course-seg { gap: 2px; margin: 12px 16px 0; padding: 3px; border-radius: var(--r-btn); background: var(--surface-sunken); }
.course-seg button { min-height: 36px; padding: 6px 0; border: 0; border-radius: 8px; background: transparent; color: var(--text-secondary); font-size: 13px; font-weight: 500; }
.course-seg button.on { background: var(--surface-raised); color: var(--text-primary); border: 0; font-weight: 600; box-shadow: 0 1px 2px rgba(27, 27, 27, .08), 0 0 0 1px var(--pos-hairline); }
/* A line: "1 × Diavola … £14.00". No side stripes: a small dot before the
   quantity says where a sent line is (bronze in the kitchen, green ready). */
.ticket .lines { padding: 4px 16px 8px; }
.coursehd, .grouphd { background: none; padding: 14px 0 4px; margin: 0; border-bottom: 1px solid var(--pos-hairline); }
.coursehd:first-child, .grouphd:first-child { padding-top: 8px; }
.grouphd { font-size: 13px; font-weight: 600; letter-spacing: 0; font-variant-caps: normal; color: var(--text-secondary); }
.line, .line.newitem, .line.sent, .line.preparing, .line.served, .line.voided { border-left: 0; padding: 6px 0; border-bottom: 1px solid var(--pos-hairline); }
.line { column-gap: 10px; }
.line .qty { min-width: 0; display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 500; color: var(--text-secondary); white-space: nowrap; }
.line .qty::after { content: "\00d7"; }
.line.sent .qty::before, .line.preparing .qty::before, .line.served .qty::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.line.served .qty::before { background: var(--success); }
.line .nm, .ticket .line .nm { font-size: 15px; font-weight: 500; }
.line .amt { min-width: 60px; font-size: 15px; font-weight: 500; }
.line .unit, .line .mods, .line .mod, .line.voided .vrz { padding-left: 26px; font-size: 12px; }
.line.newitem .unit, .line.newitem .mods, .line.newitem .mod { padding-left: 0; }
.line .mod.note { font-style: normal; }
.line .bin.void { text-transform: none; letter-spacing: 0; font-weight: 600; }
.stepper { gap: 2px; }
.stepper button { width: 36px; height: 36px; border-radius: 8px; border: 1px solid var(--pos-hairline); background: var(--surface-raised); font-size: 17px; font-weight: 500; }
.stepper button:active { background: var(--surface-sunken); }
.stepper .q { min-width: 22px; font-size: 15px; font-weight: 500; }
.kitchen-note { font-style: normal; }
/* Subtotal · service · total. */
.totals { padding: 12px 16px 6px; border-top: 1px solid var(--pos-hairline); background: var(--surface-raised); }
.totals .row.sub, .totals .sub, .totals .muted, .row.svc { font-size: 13px; color: var(--text-secondary); }
.totals .row.sub > :last-child, .totals .svc-line .amt { color: var(--text-primary); }
.row.total { font-size: 17px; font-weight: 600; padding-top: 8px; margin-top: 4px; border-top: 1px solid var(--pos-hairline); }
/* Send order (outline) beside Pay (charcoal). */
.actions { padding: 8px 16px 16px; border-top: 0; }
.actions .minor { height: 48px; gap: 10px; }
.actions .minor > button { min-height: 48px; border-radius: var(--r-btn); border: 1px solid var(--pos-hairline); font-size: 15px; font-weight: 600; }
.actions .minor > button:disabled { opacity: .38; }
.actions .minor .send { border: 1px solid var(--text-primary); font-weight: 600; }
.actions .minor .btn-pay { flex: 1.4 1 0; flex-direction: row; gap: 8px; height: 48px; border: 1px solid var(--text-primary); background: var(--text-primary); color: var(--surface); }
.actions .minor .btn-pay:active:enabled { background: var(--text-primary); filter: none; opacity: .9; }
.btn-pay #payTotal { font-size: 15px; font-weight: 500; opacity: .75; }

/* ---------- the bottom bar: thin, icons and small words ---------- */
:root { --bar-h: 58px; }
.bottombar { padding: 0 6px env(safe-area-inset-bottom); gap: 2px; border-top: 1px solid var(--pos-hairline); }
.bottombar button { gap: 3px; padding: 4px; font-size: 11px; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--text-secondary); }
.bottombar button .ico { width: 20px; height: 20px; }
.bottombar button.on { color: var(--text-primary); font-weight: 600; }
.bottombar button.on .ico { color: var(--accent); }
.bottombar button:disabled { opacity: .35; }
.bottombar .logout { border-left: 1px solid var(--pos-hairline); }

/* ---------- sheets ---------- */
.sheet { border-radius: var(--r-card); }
.sheet h2 { font-size: 18px; letter-spacing: -.005em; }
.opt { border-radius: var(--r-btn); border-color: var(--pos-hairline); font-weight: 500; }
.opt.on { border-color: var(--text-primary); box-shadow: inset 0 0 0 1px var(--text-primary); }
.pay-opt { border-radius: var(--r-btn); border-color: var(--pos-hairline); }
.pay-opt.quiet { border-color: var(--pos-hairline); }
.sheet.covers .pay-opt, .sheet.cancelbill .pay-opts .pay-opt { border: 1px solid var(--pos-hairline); border-radius: var(--r-btn); }
.sheet.covers .pay-opts .pay-opt { font-weight: 500; }
.ordermenu .opt { border-color: var(--pos-hairline); }
.voidbtn { text-transform: none; letter-spacing: 0; border-radius: var(--r-btn); }
.stat { text-transform: none; letter-spacing: 0; border-radius: 6px; }
.tsum-row, .pair-row, .bkrow { border-color: var(--pos-hairline); }

/* ---------- the payment page ---------- */
.paypage { padding: 32px 16px 24px; }
.paypage .paybody { width: min(600px, 100%); gap: 12px; }
.paypage .amount { font-size: 40px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.paypage .sub { font-size: 14px; margin: -6px 0 8px; }
.paypage .tender { gap: 10px; }
.paypage .tender .pay-opt { min-height: 64px; border: 1px solid var(--pos-hairline); border-radius: var(--r-card); background: var(--surface-raised); color: var(--text-primary); font-size: 16px; font-weight: 600; }
.paypage .tender .pay-opt .a { font-size: 13px; font-weight: 500; color: var(--text-secondary); opacity: 1; }
.paypage .tender .pay-opt[aria-pressed="true"] { background: var(--text-primary); border-color: var(--text-primary); color: var(--surface); }
.paypage .tender .pay-opt[aria-pressed="true"] .a { color: var(--surface); opacity: .72; }
.paypage #chargeBtn { min-height: 56px; border-radius: var(--r-btn); font-size: 17px; font-weight: 600; }
.paypage .back { border-radius: var(--r-btn); border-color: var(--pos-hairline); }
.paypage .split .ways .pay-opt[aria-pressed="true"], .tender .pay-opt[aria-pressed="true"] { border-color: var(--text-primary); }

/* ---------- the modifier sheet ---------- */
.opt-panel {
  width: min(600px, calc(100vw - 32px)); border-radius: var(--r-card); background: var(--surface-raised);
  box-shadow: 0 1px 2px rgba(27, 27, 27, .06), 0 16px 48px rgba(27, 27, 27, .18); font-size: 15px; line-height: 1.4;
}
.opt-panel .opt-head { padding: 18px 20px 12px; border-bottom: 0; background: var(--surface-raised); gap: 12px; }
.opt-panel .opt-title { font-size: 18px; line-height: 1.3; font-weight: 600; letter-spacing: -.005em; }
.opt-panel .opt-sub { display: block; font-size: 13px; color: var(--text-secondary); }
.opt-panel .opt-sub::first-letter { text-transform: uppercase; }
.opt-panel .opt-sub:empty { display: none; }
.opt-panel .opt-x { min-width: 40px; min-height: 40px; border: 0; border-radius: var(--r-btn); background: var(--surface-sunken); color: var(--text-secondary); font-size: 20px; }
/* Extra · No · Light · Side: one compact segmented control. */
.opt-panel .opt-tabs { gap: 2px; margin: 0 20px 14px; padding: 3px; border: 0; border-radius: var(--r-btn); background: var(--surface-sunken); }
.opt-panel .opt-tab, .dish-card .opt-tab {
  display: block; min-height: 34px; padding: 0 8px; border: 0; border-radius: 8px; background: transparent; box-shadow: none;
  color: var(--text-secondary); font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: lowercase;
}
.opt-panel .opt-tab::first-letter, .dish-card .opt-tab::first-letter { text-transform: uppercase; }
.opt-panel .opt-tab[aria-selected="true"], .dish-card .opt-tab[aria-selected="true"] {
  background: var(--surface-raised); color: var(--text-primary); border: 0; font-weight: 600;
  box-shadow: 0 1px 2px rgba(27, 27, 27, .08), 0 0 0 1px var(--pos-hairline);
}
.dish-card .opt-tabs { gap: 2px; padding: 3px; border-radius: var(--r-btn); background: var(--surface-sunken); }
.dish-card .opt-tab { flex: 1 1 0; text-transform: none; }
/* The options: a list, the name left, the price and a tick right. */
.opt-panel .opt-body { padding: 0 20px 12px; gap: 6px; border-top: 1px solid var(--pos-hairline); }
.opt-panel .opt-group { gap: 0; }
.opt-panel .opt-group-head { justify-content: space-between; align-items: baseline; padding: 16px 0 6px; }
.opt-panel .opt-group-title { font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--text-primary); }
.opt-panel .opt-group-rule, .opt-panel .opt-group-flag { display: inline-block; font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--text-secondary); }
.opt-panel .opt-group-rule::first-letter, .opt-panel .opt-group-flag::first-letter { text-transform: uppercase; }
.opt-panel .opt-group-flag { color: var(--warning); font-weight: 600; }
.opt-panel .opt-group-kitchen .opt-group-rule { display: none; }
.opt-panel .opt-chips { flex-direction: column; flex-wrap: nowrap; gap: 0; border-top: 1px solid var(--pos-hairline); }
.opt-panel .opt-chip, .opt-panel .opt-group-ingredients .opt-chip {
  flex: none; display: flex; align-items: center; gap: 12px; width: 100%; min-width: 0; min-height: 48px; padding: 0 2px;
  border: 0; border-bottom: 1px solid var(--pos-hairline); border-radius: 0; background: transparent; color: var(--text-primary);
  font-size: 15px; font-weight: 400; text-align: left;
}
.opt-panel .opt-chip.is-pressing { transform: none; background: var(--surface-sunken); }
.opt-panel .opt-chip-name { flex: 1 1 auto; min-width: 0; font-weight: 500; }
.opt-panel .opt-chip-price { margin-left: auto; font-size: 14px; color: var(--text-secondary); opacity: 1; }
.opt-panel .opt-chip::after {
  content: ""; position: static; inset: auto; flex: none; width: 22px; height: 22px; box-sizing: border-box;
  border: 1.5px solid var(--pos-control); border-radius: 6px; background: var(--surface-raised) center / 14px 14px no-repeat;
}
.opt-panel .opt-chip.is-on, .opt-panel .opt-chip.is-note.is-on { background: transparent; color: var(--text-primary); border-color: var(--pos-hairline); }
.opt-panel .opt-chip.is-on .opt-chip-name { font-weight: 600; }
.opt-panel .opt-chip.is-on .opt-chip-price { color: var(--text-primary); }
.opt-panel .opt-chip.is-on::after {
  border-color: var(--accent); background-color: var(--accent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E");
}
.opt-panel .opt-chip.is-note { color: var(--text-primary); border-color: var(--pos-hairline); }
.opt-panel .opt-chip.is-out { opacity: .5; background: transparent; border-style: solid; border-color: var(--pos-hairline); }
.opt-panel .opt-chip.is-out.is-override { opacity: 1; }
.opt-panel .opt-chip.is-remove, .opt-panel .opt-chip.is-light, .opt-panel .opt-chip.is-side, .opt-panel .opt-chip.is-extra { border-width: 0 0 1px; border-color: var(--pos-hairline); background: transparent; font-weight: 500; }
.opt-panel .opt-chip.is-remove::after { border-color: var(--danger); background-color: var(--danger); }
.opt-panel .opt-more { align-self: stretch; min-height: 44px; border: 0; border-bottom: 1px solid var(--pos-hairline); border-radius: 0; text-align: left; padding: 0 2px; color: var(--text-secondary); font-size: 14px; }
.opt-panel .opt-note { min-height: 44px; border-radius: var(--r-btn); border-color: var(--pos-hairline); font-size: 15px; margin-top: 6px; }
.opt-panel .opt-hint { font-size: 13px; }
.opt-panel .opt-note-add { min-height: 44px; border-radius: var(--r-btn); border-color: var(--text-primary); color: var(--text-primary); font-weight: 600; }
.opt-panel .opt-group.is-nested { border-left: 1px solid var(--pos-hairline); }
.opt-panel .opt-half { border-color: var(--pos-hairline); border-radius: var(--r-btn); background: var(--surface); }
.opt-panel .opt-status, .opt-panel .opt-notice { padding: 0 20px; font-size: 13px; }
.opt-panel .opt-foot { padding: 12px 20px 16px; padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--pos-hairline); background: var(--surface-raised); }
.opt-panel .opt-spacer { display: none; }
.opt-panel .opt-same { min-height: 52px; border-radius: var(--r-btn); border-color: var(--pos-hairline); background: var(--surface-raised); font-size: 15px; }
.opt-panel .opt-done { flex: 1 1 auto; min-width: 0; min-height: 52px; border-radius: var(--r-btn); background: var(--text-primary); color: var(--surface); font-size: 16px; font-weight: 600; }
.opt-panel .opt-done:disabled, .opt-panel .opt-done.is-blocked { background: var(--surface-sunken); color: var(--text-secondary); border: 0; }

/* ---------- iPad portrait: a narrower order panel, three tiles a row ---------- */
@media (min-width: 721px) and (max-width: 1024px) {
  .ticket { width: 340px; flex-basis: 340px; }
  /* The toast centres over the menu side by this token (#520): keep it the panel's width. */
  :root { --ticket-w: 340px; }
}

/* ---------- 11" iPad Pro landscape (1194pt): the 1180 panel width ----------
   The page narrows the order panel to 380px up to 1180 and leaves it 440px
   above. At 1194 that left the menu 598px for a 638px tab row, which then
   scrolled. POS polish 2 (15 Oct 2026): 380px up to 1279 as well, so the
   tabs sit centred at their full size; 1366 and wider keep 440. */
@media (min-width: 1181px) and (max-width: 1279px) {
  .ticket { width: 380px; flex-basis: 380px; }
  /* The toast centres over the menu side by this token (#520): keep it the panel's width. */
  :root { --ticket-w: 380px; }
}

/* ---------- phone ---------- */
@media (max-width: 720px) {
  #app > header { padding: 6px 10px; padding-top: calc(6px + env(safe-area-inset-top)); gap: 10px; }
  .hdr-status #hdrStatusText { display: none; }
  #navBtn { margin-left: 0; }
  .tabs { gap: 18px; padding: 2px 12px 0; }
  .tab { padding: 10px 0 8px; font-size: 14px; }
  .menusearch { padding: 10px 12px 0; }
  .menusearch .searchico { left: 24px; top: 20px; }
  .grid { grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 12px 12px 84px; }
  .tile, .cat-tile { min-height: 100px; padding: 12px; }
  .tile .name, .cat-tile .cname { font-size: 16px; }
  .grid:has(> .cat-tile) { grid-template-columns: repeat(2, 1fr); }
  .ticket { border-radius: var(--r-card) var(--r-card) 0 0; }
  .ticket-bar { font-size: 16px; font-weight: 600; }
  .bottombar button { font-size: 10px; }
  .opt-panel { width: calc(100vw - 24px); }
  .opt-panel .opt-head, .opt-panel .opt-foot { padding-left: 16px; padding-right: 16px; }
  .opt-panel .opt-tabs { margin: 0 16px 12px; }
  .opt-panel .opt-body { padding: 0 16px 12px; }
  .paypage .amount { font-size: 34px; }
}