/* POS engine base styles. Neutral defaults; a venue's skin/skin.css overrides the custom properties. */
:root{
  --bg:#141414; --bg-2:#1f1f1f; --fg:#f4f4f2; --fg-dim:rgba(244,244,242,.72);
  --panel:#f2f0ea; --panel-fg:#151515; --panel-dim:rgba(21,21,21,.7);
  --accent:#3d6fd9; --accent-strong:#5b86e3; --accent-on-panel:#284f9e; --on-accent:#ffffff;
  --cash:#2f6b45; --cdc:#2f6b45; --danger:#b3261e; --good:#2f6b45;
  --card:#3f4756;   /* 1.3.0: the Card button; white text on it is above 4.5:1 */
  --line:rgba(244,244,242,.18); --line-panel:rgba(21,21,21,.14);
  --radius:14px;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-display:var(--font);
  --font-alt:"PingFang SC","Hiragino Sans GB","Noto Sans CJK SC","Microsoft YaHei",sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --safe-t:env(safe-area-inset-top,0px); --safe-b:env(safe-area-inset-bottom,0px);
  --safe-l:env(safe-area-inset-left,0px); --safe-r:env(safe-area-inset-right,0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
html,body{height:100%;margin:0}
body{font-family:var(--font);background:var(--bg);color:var(--fg);-webkit-font-smoothing:antialiased}
body.till{overscroll-behavior:none;user-select:none;-webkit-user-select:none;touch-action:manipulation}
button,input,select{font:inherit;color:inherit}
button{border:0;background:none;cursor:pointer}
:focus-visible{outline:3px solid var(--accent-strong);outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- unsent banner: full width, red, while anything waits to be sent ---------- */
.banner{flex:0 0 auto;z-index:50;width:100%;padding:12px 16px;padding-top:calc(12px + var(--safe-t));
  background:var(--danger);color:#fff;font-weight:700;font-size:15px;line-height:1.4;text-align:center}

/* ---------- shell ---------- */
body.till{display:flex;flex-direction:column;height:100dvh}
.app{flex:1;min-height:0;display:grid;grid-template-rows:auto 1fr auto;padding:0 var(--safe-r) var(--safe-b) var(--safe-l)}
.bar{display:flex;align-items:center;gap:12px;padding:10px 16px;padding-top:calc(10px + var(--safe-t));border-bottom:1px solid var(--line);min-width:0}
.banner:not([hidden]) + .app .bar{padding-top:10px}
.mark{width:30px;height:30px;flex:0 0 auto}
.brand{display:flex;align-items:baseline;gap:9px;min-width:0;white-space:nowrap;overflow:hidden}
.brand .alt{font-family:var(--font-alt);font-size:18px;color:var(--accent-strong)}
.brand .name{font-family:var(--font-display);font-size:16px;font-weight:700;overflow:hidden;text-overflow:ellipsis}
.ref{font:600 12px/1 var(--mono);color:var(--fg-dim);padding:7px 9px;border:1px solid var(--line);border-radius:8px}
.hspace{flex:1}
.hbtn{min-height:44px;padding:0 18px;border:1px solid var(--line);border-radius:10px;font-size:14px;font-weight:650}
.sync{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border:1px solid var(--line);border-radius:999px;font-size:13.5px;font-weight:700;white-space:nowrap}
.sync .dot{width:10px;height:10px;border-radius:50%;background:#8a8a8a}
.sync.ok .dot{background:#7fbf7f}
.sync.wait .dot{background:#e0b341}
.sync.bad{border-color:#e8786e}
.sync.bad .dot{background:#e8786e}
main{display:grid;grid-template-columns:1fr 360px;min-height:0}

/* ---------- catalog ---------- */
.catalog{display:flex;flex-direction:column;min-height:0;min-width:0;padding:12px 14px 0}
.multi{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:0 2px 11px}
.multi .ml{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-dim);margin-right:2px}
.mchip{min-width:56px;min-height:44px;padding:0 16px;border-radius:999px;border:1px solid var(--line);font-size:15px;font-weight:750;color:var(--fg)}
.mchip[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.cards{flex:1;min-height:0;overflow-y:auto;padding-bottom:18px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:minmax(220px,1fr);gap:12px}
.card{position:relative;border-radius:var(--radius);overflow:hidden;background:var(--bg-2);border:1px solid var(--line);display:flex;flex-direction:column;min-height:210px}
.card .hit{flex:1;display:flex;flex-direction:column;text-align:left;padding:0;min-height:0}
.card .ph{flex:1;min-height:90px;background:var(--bg) center/cover no-repeat;display:flex;align-items:center;justify-content:center;font-size:40px;color:var(--fg-dim)}
.card .ph img{width:100%;height:100%;object-fit:cover;display:block}
.card .txt{padding:10px 14px 4px}
.card .alt{display:block;font-family:var(--font-alt);font-size:13px;color:var(--accent-strong);line-height:1.25}
.card .nm{display:block;font-family:var(--font-display);font-size:19px;font-weight:700;line-height:1.22}
.card .pr{display:block;margin-top:4px;font-size:15px;font-weight:650;color:var(--fg-dim);font-variant-numeric:tabular-nums}
.card.open .ph{font-size:52px}
.card.off{opacity:.45}
.cards-empty{grid-column:1 / -1;margin:0;padding:28px 10px;text-align:center;color:var(--fg-dim);line-height:1.5}

/* ---------- order ---------- */
.order{background:var(--panel);color:var(--panel-fg);display:flex;flex-direction:column;min-height:0}
.ohdr{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line-panel)}
.order h2{display:flex;align-items:center;gap:10px;margin:0;font-size:18px}
.sheeth{display:none}
.order .count{font-size:13px;font-weight:600;color:var(--panel-dim)}
.oclose{display:none;margin-left:auto;min-height:44px;padding:0 12px;border:1px solid var(--line-panel);border-radius:10px;font-size:14px}
.lines{flex:1;overflow-y:auto;min-height:0;padding:6px 12px}
.line{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:10px;padding:9px 4px;border-bottom:1px solid var(--line-panel)}
.line .ln{font-weight:650;overflow-wrap:anywhere}
.line .la{font-variant-numeric:tabular-nums;font-weight:700;min-width:70px;text-align:right}
.stepper{display:flex;align-items:center;gap:6px}
.stepper button{width:44px;height:44px;border-radius:10px;border:1px solid var(--line-panel);font-size:20px;font-weight:700}
.stepper .n{min-width:28px;text-align:center;font-weight:800;font-variant-numeric:tabular-nums}
.emptyline{padding:28px 10px;text-align:center;color:var(--panel-dim);line-height:1.5}
.totals{padding:10px 16px;border-top:1px solid var(--line-panel)}
.trow{display:flex;justify-content:space-between;padding:3px 0;font-variant-numeric:tabular-nums}
.trow.disc{color:var(--accent-on-panel)}
.trow.grand{font-size:22px;font-weight:800;padding-top:6px}
.actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:10px 12px calc(12px + var(--safe-b))}
.btn{min-height:52px;padding:0 14px;border-radius:12px;font-size:16px;font-weight:750;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;text-align:center}
.btn.wide{grid-column:1 / -1}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn-pay{background:var(--accent);color:var(--on-accent)}
.btn-cash{background:var(--cash);color:#fff}
.btn-cdc{background:var(--cdc);color:#fff}
.btn-card{background:var(--card);color:#fff}
.btn-ghost{border:1px solid currentColor;color:inherit;background:transparent}
.btn-danger{background:var(--danger);color:#fff}
.obar{display:none}

/* ---------- dialogs ---------- */
dialog{border:0;padding:0;border-radius:18px;background:var(--panel);color:var(--panel-fg);width:min(460px,calc(100vw - 24px));max-height:calc(100dvh - 24px);overflow:auto}
dialog.wide{width:min(860px,calc(100vw - 24px))}
dialog::backdrop{background:rgba(0,0,0,.6)}
dialog > header{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line-panel);position:sticky;top:0;background:var(--panel);z-index:1}
dialog h3{margin:0;font-size:19px;flex:1}
.x{width:44px;height:44px;border-radius:10px;font-size:26px;line-height:1}
.sbody{padding:14px 16px}
.sfoot{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:12px 16px 16px}
.sfoot.one{grid-template-columns:1fr}
.lbl{display:block;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--panel-dim);margin-top:8px}
.big{font-size:30px;font-weight:800;font-variant-numeric:tabular-nums;margin:2px 0 4px}
.note{color:var(--panel-dim);text-align:center;line-height:1.55}
.change{min-height:26px;font-size:18px;font-weight:750;color:var(--good)}
.change.short{color:var(--danger)}
.field{width:100%;min-height:48px;padding:10px 12px;border-radius:10px;border:1px solid var(--line-panel);background:#fff;color:#111;user-select:text;-webkit-user-select:text}
.pad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
.pad button{min-height:56px;border-radius:12px;border:1px solid var(--line-panel);font-size:22px;font-weight:700}
.quick{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:8px}
.quick button{min-height:48px;border-radius:12px;border:1px solid var(--line-panel);font-weight:700}
.pay{text-align:center}
.pay .amt{font-size:38px;font-weight:850;font-variant-numeric:tabular-nums}
.pay .meta{font:600 13px/1.4 var(--mono);color:var(--panel-dim)}
.qrwrap{display:flex;justify-content:center;margin:12px auto;max-width:100%}
.qrwrap canvas{max-width:min(320px,100%);height:auto!important;background:#fff;border-radius:8px;padding:6px}
.qrwrap.small canvas{max-width:min(240px,100%)}
.paylogo{font-weight:750}
.paysub{font-size:14px;color:var(--panel-dim);line-height:1.5}
.changebar{margin:8px auto;padding:10px 14px;border-radius:12px;background:var(--good);color:#fff;font-size:20px;font-weight:800;display:inline-block}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px;margin-bottom:12px}
.stat{padding:12px;border-radius:12px;border:1px solid var(--line-panel)}
.stat .sv{font-size:22px;font-weight:800;font-variant-numeric:tabular-nums}
.stat .sl{font-size:12px;color:var(--panel-dim);font-weight:700}
table.t{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;font-size:14px}
table.t th,table.t td{text-align:left;padding:8px 6px;border-bottom:1px solid var(--line-panel);vertical-align:middle}
table.t .n{text-align:right}
table.t tr.void td{text-decoration:line-through;color:var(--panel-dim)}
table.t button{min-height:44px;min-width:44px;padding:0 10px;border-radius:10px;border:1px solid var(--line-panel);font-weight:650;font-size:13px}
.tag{display:inline-block;padding:2px 8px;border-radius:999px;font-size:12px;font-weight:700;border:1px solid var(--line-panel)}
.tag.wait{background:#fff2c7;color:#5c4400}
.tag.bad{background:#ffd9d4;color:#7a1610}
.dtitle{font-weight:800;margin:14px 0 6px}
.credit{margin:0;padding:0 16px 14px;font-size:12.5px;color:var(--panel-dim);text-align:center}
.setrow{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 10px}
.setrow label{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 12px;border:1px solid var(--line-panel);border-radius:10px}
fieldset{border:0;padding:0;margin:10px 0}
legend{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--panel-dim);padding:0}
.pinview{font:800 30px/1 var(--mono);letter-spacing:.3em;text-align:center;min-height:40px;margin:8px 0}
.err{color:var(--danger);font-weight:700;min-height:22px}
.toast{position:fixed;left:50%;bottom:calc(24px + var(--safe-b));transform:translateX(-50%);background:#111;color:#fff;padding:12px 18px;border-radius:12px;font-weight:650;opacity:0;pointer-events:none;transition:opacity .2s;z-index:60;max-width:calc(100vw - 32px)}
.toast.on{opacity:1}

/* ---------- 1.1.0: Cash first, the lock screen, the Today sheet's periods ---------- */
.actions .btn-cash.first{min-height:64px;font-size:18px}
/* 1.3.0: the venue's non-cash methods follow Cash in its list order (pm1 to pm3, set by till.js); with three on,
   the third takes its own full row in portrait and on phones. */
body:not(.cats) .actions.m3 .pm3{grid-column:1 / -1}
.lockscr{position:fixed;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;padding:24px;padding-top:calc(24px + var(--safe-t));background:var(--bg);color:var(--fg);overflow-y:auto}
.lbox{width:min(420px,100%);text-align:center}
.lbox .mark{width:56px;height:56px;margin:0 auto 10px;display:block}
.lbox h2{margin:0 0 10px;font-size:22px}
.lbox p{margin:0 0 12px;line-height:1.5;color:var(--fg-dim)}
.lbox .btn{width:100%;margin-top:10px;border:1px solid var(--line)}
.lbox .field.pin{width:100%;min-height:56px;font-size:28px;letter-spacing:.5em;text-align:center;border-radius:12px;border:1px solid var(--line);background:var(--bg-2);color:var(--fg)}
.lbox .lbl{color:var(--fg-dim);text-align:left}
.lbox .lmsg{min-height:24px;margin:8px 0 0;font-weight:700;color:var(--fg)}
.lbox .lmsg.bad,.lbox .lnote{color:#ff9b91}
.dper{display:flex;flex-wrap:wrap;gap:6px;padding:10px 16px 0}
.dper button{min-height:44px;padding:0 14px;border-radius:999px;border:1px solid var(--line-panel);font-size:14px;font-weight:700}
.dper button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.pasof{margin:0 0 12px;font-weight:700}
.pasof.bad{color:var(--danger)}
.dmath{margin:0 0 10px;color:var(--panel-dim);line-height:1.5}
.ptag{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:999px;font-size:11.5px;font-weight:700;border:1px solid var(--line-panel);color:var(--panel-dim)}
.rekey{margin-top:6px}

@media (max-width:1100px){ main{grid-template-columns:1fr 330px} }
@media (max-width:760px){
  body:not(.cats) main{grid-template-columns:1fr}
  .ref,.brand .name{display:none}
  .bar{gap:8px;padding-left:10px;padding-right:10px}
  .hbtn{padding:0 12px}
  .cards{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:minmax(200px,auto);gap:10px}
  .card .nm{font-size:16px}
  body:not(.cats) .order{position:fixed;inset:0;z-index:30;transform:translateY(100%);transition:transform .22s ease;padding-top:var(--safe-t)}
  body:not(.cats) .order.open{transform:none}
  body:not(.cats) .oclose{display:inline-flex;align-items:center}
  body:not(.cats) .obar{display:flex;align-items:center;gap:12px;padding:10px 14px calc(10px + var(--safe-b));background:var(--panel);color:var(--panel-fg);border-top:1px solid var(--line-panel)}
  .obar b{margin-left:auto;font-size:19px;font-variant-numeric:tabular-nums}
  .obar button{min-height:48px;padding:0 20px;border-radius:12px;background:var(--accent);color:var(--on-accent);font-weight:800}
  .quick{grid-template-columns:repeat(3,1fr)}
}
@media (prefers-reduced-motion:reduce){ *{transition:none!important;animation:none!important} }

/* ---------- 1.4.0: the badge on every card (no minus on a card; quantities change on the order lines) ---------- */
.card .badge{position:absolute;top:8px;right:8px;min-width:28px;height:28px;padding:0 8px;border-radius:999px;background:var(--accent);color:var(--on-accent);
  font-size:15px;font-weight:800;display:grid;place-items:center;font-variant-numeric:tabular-nums;pointer-events:none}
.card .badge[hidden]{display:none!important}

/* ---------- 1.4.0: a venue with categories (body.cats). Layout A at 700 px and wider; C below. ---------- */
body.cats .catalog{padding:10px 12px 0}
body.cats .tabs{display:flex;flex-wrap:wrap;gap:6px;padding:0 0 8px}
body.cats .tab{min-height:44px;padding:0 12px;border-radius:10px;background:var(--bg-2);border:1px solid var(--line);font-size:15px;font-weight:650;white-space:nowrap;color:var(--fg)}
body.cats .tab[aria-selected="true"]{background:var(--fg);border-color:var(--fg);color:var(--bg)}
body.cats .cards{grid-template-columns:repeat(auto-fill,minmax(190px,1fr));grid-auto-rows:max-content;gap:8px;align-content:start;padding-bottom:12px}
body.cats .card{min-height:0;border-color:var(--card-edge,var(--line))}   /* 1.4.0 skin tokens: --card-edge, --font-dish, --dish-weight, --fg-alt */
body.cats .card .ph{flex:0 0 auto;height:90px;min-height:0}
body.cats .card .hit{position:relative}
body.cats .card .txt{display:flex;flex-direction:column;flex:1;padding:9px 11px 10px}
body.cats .card .nm{font-family:var(--font-dish,var(--font-display));font-weight:var(--dish-weight,700);font-size:19px;line-height:1.15;padding-right:30px}
body.cats .card .row2{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 10px;margin-top:4px}
body.cats .card .alt{flex:1 1 auto;margin:0;font-size:16px;line-height:1.3;color:var(--fg-alt,var(--fg-dim))}
body.cats .card .pr{margin:0 0 0 auto;font-size:19px;font-weight:800;color:var(--accent-strong)}
.openbtns{display:flex;gap:8px}
.obtn{min-height:44px;padding:0 16px;border-radius:10px;border:1.5px solid currentColor;font-size:14px;font-weight:650;white-space:nowrap}
body.cats .order{min-width:0}
body.cats .ohdr{padding:12px 16px 10px;gap:8px}
body.cats .order h2{font-family:var(--font-display);font-size:21px;align-items:baseline;white-space:nowrap}
body.cats .order h2 .count{font-family:var(--font);white-space:nowrap}
body.cats .ohead{display:flex;gap:6px;margin-left:auto}
body.cats .ohead .btn{min-height:44px;padding:0 10px;font-size:13.5px;font-weight:650;border-radius:10px;border-color:var(--line-panel);white-space:nowrap}
body.cats .line.l2{grid-template-columns:minmax(0,1fr) auto;gap:2px 10px;padding:10px 0}
body.cats .line.l2 .ln{font-size:16px}
body.cats .line.l2 .lalt{grid-column:1 / -1;font-family:var(--font-alt);font-size:15px;color:var(--panel-dim)}
body.cats .line.l2 .stepper{grid-column:1 / -1;margin-top:4px}
body.cats .line.l2 .ea{margin-left:auto;font-size:14px;color:var(--panel-dim);font-variant-numeric:tabular-nums}
body.cats .trow.grand{align-items:baseline}
body.cats .trow.grand b{font-family:var(--font-display);font-size:32px}
body.cats .actions{grid-template-columns:1fr 1fr;padding:4px 16px calc(16px + var(--safe-b))}
body.cats .actions .btn{min-height:64px;font-size:20px}
body.cats .actions .btn-cash.first{grid-column:auto}
body.cats .actions[data-methods="1"] .btn-cash.first,body.cats .actions[data-methods="3"] .btn-cash.first{grid-column:1 / -1}
body.cats .sheeth{display:none}
@media (max-width:1100px){ body.cats main{grid-template-columns:minmax(0,1fr) 340px} }
/* 700 to 899 wide (an 800 x 1280 portrait tablet): the 300 px order column cannot hold the title, Discount and Clear
   order on one line once the skin's own (wider) fonts load, so Discount and Clear order wrap to their own row under
   the title, sharing its width. */
@media (min-width:700px) and (max-width:899px){ body.cats main{grid-template-columns:minmax(0,1fr) 300px} body.cats .ohdr{flex-wrap:wrap;row-gap:8px}
  body.cats .ohead{margin-left:0;flex:1 1 100%} body.cats .ohead .btn{flex:1 1 0;padding:0 9px} }
/* 1.4.0: layout A on a large counter screen (1600 px and wider, for example 1920 x 1080). The same layout, sized up
   for reading at arm's length: bigger cards, type and buttons, a wider order. Cards stay at least 250 px wide, so
   the grid keeps 4 columns once the kitchen aside (left) is open beside it. */
@media (min-width:1600px){
  body.cats .bar{padding:12px 20px;gap:14px}
  body.cats .brand .name{font-size:22px}
  body.cats .ref{font-size:14px;padding:9px 11px}
  body.cats .hbtn,body.cats .sync,body.cats .obtn{min-height:52px;font-size:17px;padding:0 20px}
  body.cats main{grid-template-columns:minmax(0,1fr) 440px}
  body.cats .catalog{padding:14px 16px 0}
  body.cats .tabs{gap:6px;padding:0 0 12px}
  body.cats .tab{min-height:56px;padding:0 14px;font-size:18px;border-radius:12px}
  body.cats .cards{grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
  body.cats .card .txt{padding:14px 16px 14px}
  body.cats .card .nm{font-size:24px;line-height:1.15;padding-right:36px}
  body.cats .card .row2{margin-top:8px}
  body.cats .card .alt{font-size:20px}
  body.cats .card .pr{font-size:24px}
  body.cats .card .badge{top:10px;right:10px;min-width:34px;height:34px;font-size:18px}
  body.cats .ohdr{padding:16px 20px 12px}
  body.cats .order h2{font-size:27px}
  body.cats .order h2 .count{font-size:16px}
  body.cats .ohead .btn{min-height:52px;padding:0 14px;font-size:16px}
  body.cats .lines{padding:6px 20px}
  body.cats .line.l2{padding:14px 0}
  body.cats .line.l2 .ln,body.cats .line.l2 .la{font-size:20px}
  body.cats .line.l2 .lalt{font-size:18px}
  body.cats .line.l2 .ea{font-size:16px}
  body.cats .stepper button{width:52px;height:52px;font-size:24px}
  body.cats .stepper .n{min-width:36px;font-size:20px}
  body.cats .totals{padding:14px 20px}
  body.cats .trow{font-size:18px}
  body.cats .trow.grand{font-size:28px}
  body.cats .trow.grand b{font-size:44px}
  body.cats .actions{gap:12px;padding:6px 20px calc(20px + var(--safe-b))}
  body.cats .actions .btn{min-height:80px;font-size:26px;border-radius:14px}
}
/* 1.4.0: a short landscape screen (for example 1280 x 720): tighter cards, so a 20-dish tab fits without scrolling. */
@media (min-width:700px) and (max-height:760px){
  body.cats .cards{gap:6px}
  body.cats .card .txt{padding:7px 11px 8px}
}

/* Layout C: phones. Tabs in one sideways row, big tiles two across, the order as a bottom sheet with a handle that
   lowers it to one line (the handle shows the count and the total). */
@media (max-width:699px){
  body.cats main{grid-template-columns:minmax(0,1fr)}
  body.cats .ref,body.cats .brand .name{display:none}
  body.cats .catalog{padding:8px 0 0}
  body.cats .multi{padding:0 12px 8px}
  body.cats .tabs{flex-wrap:nowrap;overflow-x:auto;padding:0 12px 8px;scrollbar-width:none}
  body.cats .tab{min-height:48px;font-size:16px}
  body.cats .cards{grid-template-columns:repeat(2,minmax(0,1fr));padding:0 12px calc(84px + var(--safe-b))}
  body.cats .card .nm{font-size:18px}
  body.cats .card .pr{font-size:18px}
  body.cats .card .alt{font-size:15px}
  body.cats .order{position:fixed;left:0;right:0;bottom:0;top:auto;z-index:30;transform:none;max-height:62dvh;display:flex;flex-direction:column;border-radius:18px 18px 0 0;
    box-shadow:0 -10px 30px rgba(0,0,0,.45);padding:0 var(--safe-r) 0 var(--safe-l)}
  body.cats .sheeth{position:relative;display:flex;align-items:center;gap:10px;width:100%;min-height:60px;padding:14px 16px 6px;text-align:left;color:var(--panel-fg)}
  body.cats .sheeth .grip{position:absolute;left:50%;top:6px;width:44px;height:5px;border-radius:3px;background:var(--line-panel);transform:translateX(-50%)}
  body.cats .sheeth b{font-family:var(--font-display);font-size:20px}
  body.cats .sheeth .n{flex:1;font-size:14px;color:var(--panel-dim)}
  body.cats .sheeth .sv{min-height:36px;display:inline-flex;align-items:center;padding:0 14px;border-radius:999px;border:1.5px solid var(--line-panel);font-size:14px;font-weight:700;font-variant-numeric:tabular-nums}
  body.cats .ohdr{padding:0 12px 6px;border-bottom:0}
  body.cats .ohdr h2,body.cats .oclose{display:none}
  body.cats .ohead{margin-left:0;flex-wrap:wrap}
  body.cats .lines{padding:0 12px;min-height:0;overflow-y:auto}
  body.cats .line.l2{grid-template-columns:minmax(0,1fr) auto auto;align-items:center;padding:6px 0}
  body.cats .line.l2 .la{grid-column:2;grid-row:1 / span 2}
  body.cats .line.l2 .lalt{grid-column:1;font-size:14px}
  body.cats .line.l2 .stepper{grid-column:3;grid-row:1 / span 2;margin:0}
  body.cats .line.l2 .ea{display:none}
  body.cats .totals{padding:8px 12px 4px}
  body.cats .trow.grand{gap:10px}
  body.cats .trow.grand > span{flex:1}
  body.cats .trow.grand b{font-size:28px}
  body.cats .trow.grand .openbtns{order:3}
  body.cats .actions{padding:4px 12px calc(12px + var(--safe-b))}
  body.cats .actions .btn{min-height:56px;font-size:18px}
  body.cats .obar{display:none}
  body.cats .order:not(.open) .ohdr,body.cats .order:not(.open) .lines,body.cats .order:not(.open) .totals,body.cats .order:not(.open) .actions{display:none}
}

/* ---------- receipt page ---------- */
body.receipt{background:var(--panel);color:var(--panel-fg);user-select:text}
.r{max-width:440px;margin:0 auto;padding:28px 20px 40px}
.r .top{text-align:center;padding-bottom:14px;border-bottom:1px dashed var(--line-panel)}
.r .top img{width:56px;height:56px}
.r .top .alt{font-family:var(--font-alt);font-size:22px;color:var(--accent-on-panel)}
.r .top .name{font-family:var(--font-display);font-size:20px;font-weight:800;letter-spacing:.04em}
.r .top .where{font-size:13.5px;color:var(--panel-dim);margin-top:6px;line-height:1.5}
.r .meta{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px dashed var(--line-panel)}
.r .k{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--panel-dim)}
.r .v{font-weight:700;font-variant-numeric:tabular-nums}
.r .right{text-align:right}
.r .it{display:grid;grid-template-columns:auto 1fr auto;gap:10px;padding:10px 0;border-bottom:1px solid var(--line-panel)}
.r .it .nm b{display:block}
.r .it .nm i{display:block;font-style:normal;font-family:var(--font-alt);color:var(--panel-dim)}
.r .it .nm s{display:block;text-decoration:none;font-size:13px;color:var(--panel-dim)}
.r .amt,.r .qty{font-variant-numeric:tabular-nums;font-weight:700}
.r .sums{padding:10px 0}
.r .sum,.r .grand{display:flex;justify-content:space-between;padding:3px 0;font-variant-numeric:tabular-nums}
.r .grand{font-size:22px;font-weight:850}
.r .paid{display:flex;justify-content:space-between;padding:10px 0;border-top:1px dashed var(--line-panel);font-weight:700}
.r .foot{text-align:center;color:var(--panel-dim);font-size:14px;line-height:1.6;margin-top:14px}
.r .thanks{font-weight:800;color:var(--panel-fg);margin-bottom:6px}
.r .fine{margin-top:10px;font-size:12.5px}
.r .bad h1{font-size:20px}

/* ---------- owner screen ----------
   1.4.0: a header bar (name, venue, sections, Lock) over the page. The owner look comes from its own custom
   properties (--o-*), which default to the panel colours, so a venue's skin can give its owner pages a look apart
   from its till. The Menu tab fills the screen below the bar: a toolbar, the category rail and the dishes, and one
   save bar that never leaves the screen. */
body.owner{--o-bg:var(--panel);--o-bg-2:var(--panel);--o-surface:#fff;--o-ink:var(--panel-fg);--o-dim:var(--panel-dim);
  --o-line:var(--line-panel);--o-line-2:var(--panel-dim);--o-bar:var(--panel-fg);--o-bar-fg:var(--panel);--o-bar-line:rgba(255,255,255,.45);
  --o-red:var(--accent-on-panel);--o-red-bg:#fff4f1;--o-save:var(--accent);--o-check:#e9c46a;--o-check-edge:#b8901f;--o-check-bg:#fffbee;--o-on:var(--good);
  --o-bar-h:64px;background:var(--o-bg);color:var(--o-ink)}
.owner :focus-visible{outline:3px solid var(--o-red);outline-offset:2px}
.owner .top :focus-visible{outline-color:var(--o-bar-fg)}   /* the red ring is under 3:1 on the dark bar */
.owner .wrap{min-height:100dvh}
.owner .top{display:flex;align-items:center;gap:14px;min-height:var(--o-bar-h);padding:0 20px;background:var(--o-bar);color:var(--o-bar-fg)}
.owner .top .mark{width:30px;height:30px}
.owner .ob{min-width:0}
.owner .top h1{margin:0;font:700 20px/1.1 var(--font-display);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.owner .top .ob small{display:block;font-size:13px;font-weight:650;opacity:.82;margin-top:2px;white-space:nowrap}
.owner .top .sp{flex:1}
.owner .top nav{display:flex;gap:4px;margin-left:8px}
.owner .top nav button{min-height:44px;padding:0 14px;border-radius:10px;font-weight:650;font-size:15px;color:var(--o-bar-fg);border:0}
.owner .top nav button[aria-current="page"]{background:var(--o-bar-fg);color:var(--o-bar)}
.owner .top select{min-height:44px;border-radius:10px;padding:0 10px;background:var(--o-surface);color:var(--o-ink);border:0}
.owner #logout{min-height:44px;padding:0 16px;border-radius:10px;border:1px solid var(--o-bar-line);font-size:15px;font-weight:650;color:var(--o-bar-fg)}
.owner #app>section:not(#tMenu){max-width:1100px;margin:0 auto;padding:16px}
.owner .card2{border:1px solid var(--o-line);border-radius:14px;padding:14px;margin-bottom:14px;background:var(--o-surface)}
.owner .row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.owner input[type=date],.owner select,.owner input.money,.owner input.txt{min-height:44px;padding:6px 10px;border-radius:10px;border:1px solid var(--o-line);background:#fff;color:#111}
.owner input.money{width:110px}
.owner .login{max-width:380px;margin:40px auto;padding:0 16px}

/* ---------- 1.4.0: owner Menu ---------- */
body.owner.otab-menu .wrap{display:grid;grid-template-rows:auto minmax(0,1fr);height:100dvh;min-height:0}
body.owner.otab-menu #app{min-height:0}
.owner #tMenu{height:100%;min-height:0}
.om{display:grid;grid-template-rows:auto minmax(0,1fr) auto;height:100%;min-height:0}
.om .tool{display:flex;align-items:center;gap:12px;padding:12px 20px;border-bottom:1px solid var(--o-line)}
.om .tool h2{margin:0;font:700 26px/1 var(--font-display)}
.om .tool .meta{margin:0;font-size:14px;line-height:1.35;color:var(--o-dim);max-width:440px}
.om .tool .sp{flex:1}
.om .search{position:relative;width:300px;flex:0 1 300px}
.om .search input{width:100%;min-height:44px;padding:0 44px 0 40px;border-radius:10px;border:1.5px solid var(--o-line-2);background:var(--o-surface);color:var(--o-ink);font-size:16px}
.om .search input:not(:placeholder-shown){border-color:var(--o-ink)}
.om .search input:placeholder-shown{padding-right:10px}
.om .search input::-webkit-search-cancel-button{display:none}
.om .search svg{position:absolute;left:13px;top:13px;pointer-events:none}
.om .search .clear{position:absolute;right:0;top:0;width:44px;height:44px;display:grid;place-items:center;font-size:22px;color:var(--o-dim)}
.om .ob2{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 16px;border-radius:10px;font-weight:700;font-size:15px;white-space:nowrap;text-align:center}
.om .ob2.line{border:1.5px solid var(--o-line-2);background:var(--o-surface);color:var(--o-ink)}
.om .ob2.line[aria-pressed="true"]{background:var(--o-ink);color:var(--o-bg);border-color:var(--o-ink)}
.om .ob2.dark{background:var(--o-ink);color:var(--o-bg)}
.om .ob2.red{background:var(--o-save);color:#fff}
.om .ob2[disabled]{cursor:not-allowed}
.om .ob2.red[disabled]{background:var(--o-bg-2);color:var(--o-dim);border:1.5px dashed var(--o-line-2)}
.om .ob2.dark[disabled]{opacity:1;background:var(--o-ink);color:var(--o-bg)}
.om .cnt{display:inline-grid;place-items:center;min-width:24px;height:24px;padding:0 7px;border-radius:999px;background:var(--o-check);color:#221f18;font-size:13px;font-weight:800}
.om .ne{display:inline-block;font:700 11px/1 var(--font);letter-spacing:.04em;text-transform:uppercase;padding:4px 7px;border-radius:6px;border:1.5px dashed currentColor;opacity:.85;white-space:nowrap}
.om .body{display:grid;grid-template-columns:272px minmax(0,1fr);min-height:0}
.om .rail{border-right:1px solid var(--o-line);padding:12px 12px 12px 20px;display:flex;flex-direction:column;overflow:auto;background:var(--o-bg-2)}
.om .rail h3{margin:2px 0 6px;font:800 12px/20px var(--font);letter-spacing:.08em;text-transform:uppercase;color:var(--o-dim)}
.om .rail .hint{font-size:13px;color:var(--o-dim);padding:0 12px 8px}
.om .cat{display:flex;align-items:center;gap:8px;min-height:44px;padding:0 12px;border-radius:10px;font-weight:650;font-size:15px;color:var(--o-ink);text-align:left;flex:none}
.om .cat .n{margin-left:auto;font-size:13px;color:var(--o-dim);font-weight:600;font-variant-numeric:tabular-nums}
.om .cat .cnt{height:22px;min-width:22px;font-size:12px}
.om .cat[aria-current="true"]{background:var(--o-ink);color:var(--o-bg)}
.om .cat[aria-current="true"] .n{color:inherit;opacity:.8}
.om .cat .dot{width:9px;height:9px;border-radius:50%;background:var(--o-red);flex:none}
.om .cat[aria-current="true"] .dot{background:#f2a493}
.om .rail .edit{margin-top:auto;width:100%;justify-content:flex-start}
.om .rail .edit.top{margin-top:12px}
.om .main{overflow:auto;padding:14px 24px 24px;min-width:0}
.om .sec{display:flex;align-items:baseline;gap:10px;margin:0 0 8px}
.om .sec h3{margin:0;font:700 22px/1 var(--font-display)}
.om .sec span{font-size:14px;color:var(--o-dim)}
.om .found{font-size:14px;color:var(--o-dim);margin:0 0 6px}
.om .rows{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1.1fr) 112px 92px 196px;column-gap:12px}
.om .rows.stock{grid-template-columns:minmax(0,1.2fr) minmax(0,1.05fr) 104px 92px 180px 64px}
.om .rows+.sec{margin-top:22px}
.om .hd{display:contents}
.om .hd div{display:flex;align-items:center;gap:8px;min-height:34px;font:800 12px/1 var(--font);letter-spacing:.08em;text-transform:uppercase;color:var(--o-dim)}
.om .hd div.ra{justify-content:flex-end}
.om .r{display:contents}
.om .c{display:flex;align-items:center;gap:8px;padding:4px 0;border-top:1px solid var(--o-line);min-width:0}
.om .c.ra{justify-content:flex-end;font-variant-numeric:tabular-nums}
.om .fld{width:100%;min-width:0;min-height:44px;padding:0 12px;border-radius:10px;border:1.5px solid var(--o-line);background:var(--o-surface);color:var(--o-ink);font-size:16px}
.om .fld:hover{border-color:var(--o-line-2)}
.om .fld.alt{font-family:var(--font-alt);font-size:17px}
.om .fld.price{text-align:right;font-variant-numeric:tabular-nums;font-weight:700}
.om .fixed{font-size:14px;color:var(--o-dim);text-align:right;width:100%}
.om select.fld{padding-right:8px}
.om .flag{flex:none;display:inline-flex;align-items:center;min-height:44px;padding:0;background:none}
.om .flag b{display:inline-flex;align-items:center;min-height:28px;padding:0 9px;border-radius:999px;background:var(--o-check);color:#221f18;font-size:12.5px;font-weight:800;white-space:nowrap}
.om .c.chk .fld{border-color:var(--o-check-edge);background:var(--o-check-bg)}
.om .fld.chg,.om .c.chk .fld.chg{border:2px solid var(--o-red);background:var(--o-red-bg)}
.om .r.chg .c:first-child{box-shadow:inset 4px 0 0 var(--o-red);padding-left:8px}
.om .fld.clash{border:2px dashed var(--o-red)}
.om .sub{grid-column:1 / -1;font-size:13.5px;color:var(--o-red);font-weight:650;padding:0 0 6px 12px}
.om .sub.why{color:var(--o-ink);font-weight:500;display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:2px 0 8px 12px}
.om .sub.why .ob2{min-height:44px}
.om .sw{position:relative;display:inline-flex;align-items:center;min-height:44px;min-width:64px;cursor:pointer}
.om .sw input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer;width:100%;height:100%}
.om .sw i{width:52px;height:30px;border-radius:999px;background:var(--o-line-2);position:relative;flex:none}
.om .sw i::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;transition:transform .15s}
.om .sw input:checked+i{background:var(--o-on)}
.om .sw input:checked+i::after{transform:translateX(22px)}
.om .sw input:focus-visible+i{outline:3px solid var(--o-red);outline-offset:2px}
.om .sw span{margin-left:8px;font-size:14px;font-weight:650}
.om .sw input:not(:checked)~span{color:var(--o-dim)}
.om .sw.chg i{box-shadow:0 0 0 2px var(--o-bg),0 0 0 4px var(--o-red)}
.om .empty{padding:24px 0;color:var(--o-dim)}
.om .save{display:flex;align-items:center;gap:12px;padding:12px 20px;border-top:1px solid var(--o-line);background:var(--o-surface);box-shadow:0 -6px 18px rgba(0,0,0,.06)}
.om .save p{margin:0;flex:1;font-size:15px;color:var(--o-dim);min-width:0}
.om .save p b{color:var(--o-ink)}
.om .save .ob2{min-height:48px}
.om .save .ob2.red{min-width:180px;font-size:16px}
.om .save.dirty{background:var(--o-red-bg);border-top:2px solid var(--o-red)}
.om .save.dirty p{color:var(--o-ink)}
.om .save .note{display:block;margin-top:4px;color:var(--o-red);font-weight:700;text-align:left}
.om .save .note button{min-height:44px;padding:0 12px;margin-left:6px;border-radius:10px;border:1.5px solid var(--o-red);color:var(--o-red);font-weight:750;background:var(--o-surface)}
/* the category manager */
.om .mgr{grid-column:1 / -1;overflow:auto;padding:10px 24px 14px}
.om .mgr .in{max-width:940px;margin:0 auto}
.om .mgr .mtop{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:6px}
.om .mgr h3{margin:0;font:700 24px/1 var(--font-display);flex:1}
.om .mgr .note{font-size:14px;color:var(--o-dim);margin:0 0 4px}
.om .mgr .addc{display:flex;gap:8px}
.om .mgr .addc .fld{width:240px}
.om .crow{display:grid;grid-template-columns:36px minmax(0,1fr) 84px 44px 44px 104px;gap:8px;align-items:center;padding:1px 6px;border-top:1px solid var(--o-line);min-height:46px}
.om .crow .pos{font-weight:800;color:var(--o-dim);text-align:center;font-variant-numeric:tabular-nums}
.om .crow .ct{font-size:14px;color:var(--o-dim);text-align:right}
.om .crow.chg{background:var(--o-red-bg);border-radius:10px}
.om .ib{width:44px;height:44px;border-radius:10px;border:1.5px solid var(--o-line-2);background:var(--o-surface);display:grid;place-items:center;font-size:18px;font-weight:800;color:var(--o-ink)}
.om .ib[disabled]{border-style:dashed;opacity:.4;cursor:not-allowed}
.om .crow .rm{min-height:44px;border-radius:10px;border:1.5px solid var(--o-red);color:var(--o-red);font-weight:700;font-size:14px;text-align:center;background:var(--o-surface)}
.om .crow .keep{font-size:12.5px;color:var(--o-dim);text-align:center;line-height:1.2}
@media (max-width:600px){
  body.owner{--o-bar-h:56px}
  .owner .top{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:56px auto;padding:0;gap:0}
  .owner .top .ob{padding-left:16px}
  .owner .top h1{font-size:18px}
  .owner .top .sp,.owner .top .mark{display:none}
  .owner #logout{margin-right:12px}
  .owner .top nav{grid-column:1 / -1;grid-row:2;margin:0;padding:0 8px 8px;overflow-x:auto;scrollbar-width:none}
  .owner .top nav button{flex:none}
  .om .tool{flex-wrap:nowrap;padding:10px 16px;gap:8px}
  .om .tool h2,.om .tool .meta,.om .tool .sp,.om .xl{display:none}
  .om .search{width:auto;flex:1;min-width:0}
  .om .tool>.ob2{flex:none;padding:0 12px}
  .om .tool>.ob2 .ne{display:none}
  .om .body{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr)}
  .om .rail{flex-direction:row;overflow-x:auto;border-right:0;border-bottom:1px solid var(--o-line);padding:8px 12px;gap:6px;scrollbar-width:none}
  .om .rail h3,.om .rail .hint{display:none}
  .om .cat{border:1px solid var(--o-line);background:var(--o-surface)}
  .om .cat .n{margin-left:2px}
  .om .rail .edit,.om .rail .edit.top{margin:0;width:auto;flex:none}
  .om .main{padding:10px 16px 20px}
  .om .rows,.om .rows.stock{display:block}
  .om .hd{display:none}
  .om .r{display:grid;grid-template-columns:auto minmax(0,1fr) 96px;column-gap:8px;padding:8px 0 10px;border-top:1px solid var(--o-line)}
  .om .r .c{border-top:0;padding:3px 0}
  .om .r .c:nth-child(1){grid-column:1 / -1}
  .om .r .c:nth-child(2){grid-column:1 / 3}
  .om .r .c:nth-child(3){grid-column:3}
  .om .r .c:nth-child(4){grid-column:1}
  .om .r .c:nth-child(5){grid-column:2 / -1}
  .om .r .c:nth-child(6){grid-column:1 / -1;justify-content:flex-start}
  .om .r.chg .c:first-child{box-shadow:none;padding-left:0}
  .om .r.chg{box-shadow:inset 4px 0 0 var(--o-red);padding-left:10px}
  .om .save{flex-wrap:wrap;padding:10px 16px 14px;gap:8px}
  .om .save p{flex:1 1 100%;font-size:14px}
  .om .save .ob2{flex:1}
  .om .save .ob2.red{flex:2;min-width:0}
  .om .mgr{padding:10px 16px}
  .om .mgr .addc{width:100%}
  .om .mgr .addc .fld{flex:1;width:auto}
  .om .crow{grid-template-columns:28px minmax(0,1fr) 44px 44px;grid-template-areas:"pos name up down" ". ct ct rm";row-gap:4px;padding:6px 4px}
  .om .crow .pos{grid-area:pos}.om .crow .nm{grid-area:name}.om .crow .ct{grid-area:ct;text-align:left}
  .om .crow .up{grid-area:up}.om .crow .dn{grid-area:down}.om .crow .rmc{grid-area:rm}
}

/* ---------- 1.2.0: CDC vouchers, the Today day picker, the PIN void sheet ---------- */
.vouchers{display:grid;gap:8px;margin:8px 0}
.vrow{display:grid;grid-template-columns:56px 1fr auto;align-items:center;gap:10px}
.vrow button{min-height:56px;border-radius:12px;border:1px solid var(--line-panel);font-size:20px;font-weight:800}
.vrow .vadd{padding:0 18px;background:var(--cdc);color:#fff;border-color:var(--cdc)}
.vrow button:disabled{opacity:.35}
.vrow .vn{font-weight:750;font-variant-numeric:tabular-nums}
.dayswitch{display:flex;align-items:center;gap:10px;padding:10px 16px 0}
.dayswitch .lbl{margin:0}
.dayswitch input{min-height:44px;padding:6px 10px;border-radius:10px;border:1px solid var(--line-panel);background:#fff;color:#111}
.tscroll{overflow-x:auto;max-width:100%}
.ptag.bad{color:var(--danger);border-color:var(--danger)}
#dayFoot{grid-template-columns:1fr 1fr}
#dayFoot:has(#dayPrint[hidden]){grid-template-columns:1fr}
.pad.four{grid-template-columns:repeat(4,1fr)}
.pad.four button{min-height:64px}
.pad .w2{grid-column:span 2}
.btn.short{background:var(--danger)!important;color:#fff;opacity:1}
@media (max-width:600px){
  table.t.sales thead{display:none}
  table.t.sales tr{display:grid;grid-template-columns:auto 1fr auto;gap:2px 8px;padding:8px 0;border-bottom:1px solid var(--line-panel)}
  table.t.sales td{border:0;padding:2px 4px}
  table.t.sales td:nth-child(6),table.t.sales td:nth-child(7){grid-column:span 1}
  table.t.sales td button{width:100%}
}

/* ---------- 1.2.0: layout option B (landscape, at least 1000 px wide) ----------
   One primary slot: Cash's 420 x 84 rectangle, centred, 10 px from the bottom. Complete sale, Payment
   received, the CDC button, Apply, New order, Void (PIN) and Unlock take exactly that spot in turn. The
   busy sheets rise from the bar with their keys right above the slot. Portrait and phones are unchanged. */
@media (min-width:1000px) and (orientation:landscape){
  :root{--slot-w:420px;--slot-h:84px;--slot-b:10px;--bar-h:104px}
  body:not(.cats) .app{padding-bottom:calc(var(--bar-h) + var(--safe-b))}
  body:not(.cats) .actions{position:fixed;left:0;right:0;bottom:0;z-index:20;height:calc(var(--bar-h) + var(--safe-b));padding:10px 16px calc(10px + var(--safe-b));
    display:grid;grid-template-columns:1fr 1fr calc(var(--slot-w) + 24px) 1fr 1fr;gap:10px;align-items:center;background:var(--panel);border-top:1px solid var(--line-panel)}
  body:not(.cats) .actions .btn{min-height:64px;grid-row:1}
  body:not(.cats) .actions #btnDisc{grid-column:1}
  body:not(.cats) .actions #btnClear{grid-column:2}
  /* 1.3.0: the non-cash methods right of the slot in the venue's list order; with three on, a sixth column and the
     left pair widened (1.5fr each) so the bar stays symmetric and the slot column stays centred under Cash. */
  body:not(.cats) .actions .pm1{grid-column:4}
  body:not(.cats) .actions .pm2{grid-column:5}
  body:not(.cats) .actions.m3{grid-template-columns:1.5fr 1.5fr calc(var(--slot-w) + 24px) 1fr 1fr 1fr}
  body:not(.cats) .actions.m3 .pm3{grid-column:6}
  body:not(.cats) .actions .btn-cash.first,body:not(.cats) .slot{position:fixed!important;left:50%!important;bottom:calc(var(--slot-b) + var(--safe-b))!important;transform:translateX(-50%);
    width:var(--slot-w)!important;height:var(--slot-h)!important;min-height:var(--slot-h)!important;margin:0!important;font-size:21px;z-index:25;grid-column:auto}
  body:not(.cats) dialog:not(.wide):not(#dSetup){margin:auto auto 0;max-height:100dvh;border-radius:18px 18px 0 0;width:min(560px,100vw);padding-bottom:calc(var(--bar-h) + var(--safe-b))}
  body:not(.cats) dialog:not(.wide):not(#dSetup) .sfoot{grid-template-columns:1fr}
  body:not(.cats) dialog:not(.wide):not(#dSetup) .sfoot:has(> :nth-child(2)){grid-template-columns:1fr}
  #dPay .qrwrap canvas{max-width:300px}
  #dDone .qrwrap.small canvas{max-width:200px}
  .toast{left:16px;top:calc(12px + var(--safe-t));bottom:auto;transform:none}
  .lockscr{padding-bottom:calc(var(--bar-h) + 12px)}
  .lockpad{margin-top:10px}
  .lockpad button{background:var(--bg-2);color:var(--fg);border-color:var(--line)}
}
@media (min-width:1000px) and (orientation:landscape) and (max-height:640px){
  body:not(.cats) dialog:not(.wide):not(#dSetup){width:min(900px,100vw);height:100dvh}
  body:not(.cats) #dCash .sbody,body:not(.cats) #dCdc .sbody{display:grid;grid-template-columns:1fr 1fr;gap:0 18px;align-items:start}
  body:not(.cats) #dCash .sbody .pad,body:not(.cats) #dCash .sbody .quick{grid-column:2}
  body:not(.cats) #dCash .sbody .pad{grid-row:1 / span 6}
  #dPay .qrwrap canvas{max-width:256px}
}

/* ---------- 1.4.0: Cash, Card and Paid as panels on a venue with categories ----------
   Layout A: the panel fills the screen under the top bar; the order sits on the right at the order's own width,
   with the panel's buttons under it. Layout C: the panel fills the phone screen, buttons at the bottom. */
.pa{display:none}
body:not(.cats) .cashtop,body:not(.cats) .cashnums{display:contents}   /* the 1.3.0 sheet, as before */
body.cats{--orderw:360px;--give:#8fd18f;--give-edge:#5e9e62}
@media (max-width:1100px){ body.cats{--orderw:340px} }
@media (min-width:700px) and (max-width:899px){ body.cats{--orderw:300px} }
@media (min-width:1600px){ body.cats{--orderw:440px} }
body.cats dialog.ppanel[open]{position:fixed;inset:var(--barh,64px) 0 0 0;width:100vw;max-width:none;height:calc(100dvh - var(--barh,64px));max-height:none;margin:0;
  border-radius:0;padding:0;overflow:hidden;background:var(--bg);color:var(--fg);display:grid;grid-template-columns:minmax(0,1fr) var(--orderw);
  grid-template-rows:auto minmax(0,1fr) auto;grid-template-areas:"h p" "b p" "b f"}
body.cats dialog.ppanel::backdrop{background:rgba(0,0,0,.45)}
body.cats .ppanel .pa{display:revert}
body.cats .ppanel > header{grid-area:h;position:static;background:var(--bg);border-bottom:1px solid var(--line);padding:16px 20px;align-items:baseline}
body.cats .ppanel > header h3{flex:0 0 auto;font-family:var(--font-display);font-size:26px}
body.cats .ppanel > header .hsub{flex:1;font-size:16px;color:var(--fg-dim)}
body.cats .ppanel > header .x{align-self:center;color:var(--fg);border:1px solid var(--line)}
body.cats .ppanel .sbody{grid-area:b;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:10px;padding:18px 20px}
body.cats .ppanel .psum{grid-area:p;min-height:0;display:flex;flex-direction:column;background:var(--panel);color:var(--panel-fg);border-left:1px solid var(--line-panel)}
body.cats .ppanel .sfoot{grid-area:f;background:var(--panel);color:var(--panel-fg);padding:12px 16px calc(16px + var(--safe-b));border-left:1px solid var(--line-panel);display:grid;grid-template-columns:1fr 1fr;gap:10px}
body.cats .ppanel .sfoot.one{grid-template-columns:1fr}
body.cats .ppanel .sfoot .btn{min-height:72px;font-size:20px;flex-direction:column;line-height:1.15}
body.cats .ppanel .sfoot .btn small{display:block;font-size:13px;font-weight:650;opacity:.92}
body.cats .ppanel .sfoot .btn-ghost{color:var(--panel-fg)}
body.cats #dCash .sfoot .slot{order:-1}
body.cats .ppanel .btn.short{background:transparent;color:var(--panel-fg);border:2px dashed var(--panel-fg);opacity:1}
body.cats .plbl{font-size:12.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-dim);margin-top:6px}
/* the order beside the panel */
.psh{display:flex;align-items:baseline;gap:8px;padding:16px 16px 10px;border-bottom:1px solid var(--line-panel)}
.psh b{font-family:var(--font-display);font-size:22px}
.psh .n{flex:1;font-size:14px;color:var(--panel-dim)}
.psh .pill{font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:5px 10px;border-radius:999px;background:var(--cash);color:#fff;white-space:nowrap}
.psh .pill.paid{background:var(--good)}
.psl{flex:1;min-height:0;overflow-y:auto;padding:4px 16px}
.psr{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:8px;padding:9px 0;border-bottom:1px solid var(--line-panel);font-size:16px;font-variant-numeric:tabular-nums}
.psr .q{font-weight:800}
.psr .nm{font-weight:650}
.psr .nm i{display:block;font-style:normal;font-weight:400;font-family:var(--font-alt);font-size:14.5px;color:var(--panel-dim)}
.psr .a{font-weight:700}
.pst{display:flex;justify-content:space-between;align-items:baseline;padding:12px 16px;border-top:1px solid var(--line-panel);font-weight:800;font-size:18px}
.pst b{font-family:var(--font-display);font-size:30px}
/* Cash */
body.cats #dCash .cashtop{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:16px;align-items:stretch}
body.cats #dCash .cashnums .lbl{font-size:12.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-dim);margin:0}
body.cats #dCash .cashnums .big{font-family:var(--font-display);font-size:44px;font-weight:700;line-height:1.1;margin:0 0 8px;color:var(--fg)}
body.cats #dCash .how{font-size:14px;color:var(--fg-dim);margin-top:-6px}
body.cats #dCash .change{display:flex;flex-direction:column;justify-content:center;gap:6px;min-height:150px;margin:0;padding:16px 18px;border-radius:14px;background:var(--bg-2);border:1px solid var(--card-edge,var(--line));color:var(--fg);font-size:16px;font-weight:600;text-align:left}
body.cats #dCash .change .cl{font-size:12.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-dim)}
body.cats #dCash .change .ch{line-height:1.4}
body.cats #dCash .change.ok{border:2px solid var(--give-edge)}
body.cats #dCash .change.ok b{font-family:var(--font-display);font-size:72px;line-height:1;color:var(--give)}
body.cats #dCash .quick{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:0}
body.cats #dCash .quick button{min-height:72px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border-radius:12px;background:var(--bg-2);border:1px solid var(--card-edge,var(--line));color:var(--fg)}
body.cats #dCash .quick button b{font-family:var(--font-display);font-size:28px}
body.cats #dCash .quick button small{font-size:13px;font-weight:650;color:var(--fg-dim)}
body.cats #dCash .pad{flex:1;min-height:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:minmax(48px,1fr);gap:8px;margin:0}
body.cats #dCash .pad button{min-height:48px;background:var(--bg-2);border:1px solid var(--card-edge,var(--line));color:var(--fg);font-size:24px}
body.cats #dCash .note{color:var(--fg)}
/* Card */
body.cats #dCard .sbody{justify-content:center;padding:24px 32px;text-align:left}
body.cats #dCard .amt{font-family:var(--font-display);font-size:96px;line-height:1;margin:4px 0 6px;text-align:left;color:var(--fg)}
body.cats #dCard .meta{text-align:left;color:var(--fg-dim)}
body.cats #dCard .paysub{display:none}
body.cats .steps{margin:10px 0 0;padding:0;list-style:none;counter-reset:st;display:flex;flex-direction:column;gap:12px;font-size:18px}
body.cats .steps li{counter-increment:st;position:relative;padding-left:44px;line-height:30px}
body.cats .steps li::before{content:counter(st);position:absolute;left:0;top:0;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;border:1.5px solid var(--fg);font-size:15px;font-weight:800}
body.cats .pnote{margin:6px 0 0;color:var(--fg-dim);font-size:16px}
/* Paid */
body.cats #dDone .sbody{justify-content:center;padding:24px 32px;text-align:left}
body.cats #dDone #doneMethod,body.cats #dDone #doneAmt,body.cats #dDone #doneChange{display:none}
body.cats #dDone .hero{font-family:var(--font-display);font-size:128px;font-weight:700;line-height:1;color:var(--fg)}
body.cats #dDone .hero.give{color:var(--give)}
body.cats #dDone .pline{margin:6px 0 0;font-size:19px;color:var(--fg)}
body.cats #dDone .meta{text-align:left;color:var(--fg-dim);font-family:var(--mono)}
body.cats #dDone .showrc{align-self:flex-start;min-height:52px;color:var(--fg);border-color:var(--line);margin-top:8px}
body.cats #dDone .rcqr{display:none}
body.cats #dDone .rcqr.open{display:block}
body.cats #dDone .rcqr .paylogo,body.cats #dDone .rcqr .paysub{color:var(--fg-dim);text-align:left}
body.cats #dDone .sfoot .btn-pay{background:var(--accent);color:var(--on-accent)}
.guarded{animation:guardin .5s linear}
@keyframes guardin{from{opacity:.35}to{opacity:1}}
/* Layout C: the whole phone screen */
@media (max-width:699px){
  body.cats dialog.ppanel[open]{inset:0;height:100dvh;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;grid-template-areas:"h" "b" "f"}
  body.cats .ppanel .psum{display:none}
  body.cats .ppanel > header{padding:12px 14px;padding-top:calc(12px + var(--safe-t))}
  body.cats .ppanel > header h3{font-size:22px}
  body.cats .ppanel > header .hsub{font-size:14px}
  body.cats .ppanel .sbody{padding:12px 14px;gap:8px}
  body.cats .ppanel .sfoot{border-left:0;border-top:1px solid var(--line-panel)}
  body.cats .ppanel .sfoot .btn{min-height:64px;font-size:18px}
  body.cats #dCash .cashnums .big{font-size:32px}
  body.cats #dCash .change{min-height:110px;padding:12px}
  body.cats #dCash .change.ok b{font-size:52px}
  body.cats #dCash .quick{gap:8px}
  body.cats #dCash .quick button{min-height:60px}
  body.cats #dCash .quick button b{font-size:22px}
  body.cats #dCash .quick button small{font-size:11.5px}
  body.cats #dCard .sbody,body.cats #dDone .sbody{padding:18px 16px}
  body.cats #dCard .amt{font-size:64px}
  body.cats #dDone .hero{font-size:88px}
  body.cats .steps{font-size:16px}
}
/* Layout A on a large screen */
@media (min-width:1600px){
  body.cats .ppanel .sfoot .btn{min-height:84px;font-size:24px}
  body.cats #dCash .cashnums .big{font-size:56px}
  body.cats #dCash .change.ok b{font-size:96px}
  body.cats #dCash .quick button{min-height:84px}
  body.cats #dCash .quick button b{font-size:32px}
  body.cats #dCash .pad button{font-size:28px}
  body.cats #dCard .amt{font-size:128px}
  body.cats #dDone .hero{font-size:160px}
  body.cats .steps{font-size:21px}
  .psr{font-size:18px}
  .psr .nm i{font-size:16px}
}
/* A short landscape screen: the keypad gives way first */
@media (min-width:700px) and (max-height:760px){
  body.cats .ppanel .sbody{padding:12px 18px;gap:6px}
  body.cats #dCash .change{min-height:110px}
  body.cats #dCash .cashnums .big{font-size:36px}
  body.cats #dCash .quick button{min-height:58px}
  body.cats .ppanel .sfoot .btn{min-height:60px}
}
@media (prefers-reduced-motion:reduce){ .guarded{animation:none} }

/* ---------- 1.4.0 stage A3: the Kitchen aside (kitchen.js), only on a venue that turns it on (body.kon) ----------
   Left of the till at 1100 px and wider: open (400 px from 1600 wide, 340 below) or a 76 px rail; a drawer from the top
   bar on narrower screens. The skin's own tokens throughout; three kitchen tokens a skin may set: --k-done (crossed
   out, Bump), --k-done-bg and --k-late-bg. With the aside off, .work is display:contents and nothing here applies. */
.work{display:contents}
.kitchen{--k-done:var(--good);--k-done-ink:var(--good);--k-done-bg:#E3EEE5;--k-late-bg:#F9E3DF;--k-aside:var(--bg);--k-edge:var(--line);--kw:340px;
  background:var(--k-aside);color:var(--fg);border-right:1px solid var(--k-edge);display:grid;grid-template-rows:auto minmax(0,1fr) auto;min-height:0;min-width:0;width:var(--kw);flex:0 0 var(--kw)}
@supports (background:color-mix(in srgb,red,blue)){ .kitchen{--k-aside:color-mix(in srgb,var(--bg) 78%,#000);--k-late-bg:color-mix(in srgb,var(--accent) 12%,var(--panel));--k-done-bg:color-mix(in srgb,var(--k-done) 16%,var(--panel))} }
body.kon[data-kdrawer="0"] .work{display:flex;min-height:0;min-width:0}
body.kon[data-kdrawer="0"] main{flex:1 1 auto;min-width:0}
@media (min-width:1600px){ .kitchen{--kw:400px} }
body.kon[data-kitchen="closed"][data-kdrawer="0"] .kitchen{--kw:76px}
.kitchen svg{width:18px;height:18px;flex:none}
.kitchen h2{margin:0}
.kitchen .kcount{min-width:30px;height:30px;padding:0 9px;border-radius:999px;background:var(--accent);color:var(--on-accent);font:800 16px/1 var(--font);display:inline-grid;place-items:center;font-variant-numeric:tabular-nums}
.k-head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:2px 10px;padding:10px 12px 10px 16px;border-bottom:1px solid var(--line)}
.k-head h2{font:700 24px/1 var(--font-display);display:flex;align-items:center;gap:10px}
.k-head p{grid-column:1;margin:0;font-size:14px;color:var(--fg-dim)}
.khide,.kback{grid-row:1 / span 2;grid-column:2;min-height:44px;padding:0 14px 0 10px;border-radius:10px;border:1px solid var(--line);font-weight:700;font-size:15px;display:inline-flex;align-items:center;gap:6px;color:var(--fg)}
/* the list scrolls inside the aside: a visible scrollbar, faded edges, and "N above" and "N more below" strips that
   sit outside the list, so they never cover a ticket */
.k-scroll{min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr) auto}
.k-list{grid-row:2;overflow-y:auto;padding:10px 6px 12px 12px;display:flex;flex-direction:column;gap:10px;overscroll-behavior:contain;scrollbar-width:auto;scrollbar-color:var(--fg-dim) var(--bg-2);scrollbar-gutter:stable}
.k-list::-webkit-scrollbar{width:12px}
.k-list::-webkit-scrollbar-track{background:var(--bg-2)}
.k-list::-webkit-scrollbar-thumb{background:var(--fg-dim);border-radius:6px;border:2px solid var(--bg-2)}
.k-scroll.has-below .k-list{-webkit-mask-image:linear-gradient(#000 calc(100% - 56px),rgba(0,0,0,.15));mask-image:linear-gradient(#000 calc(100% - 56px),rgba(0,0,0,.15))}
.k-scroll.has-above .k-list{-webkit-mask-image:linear-gradient(rgba(0,0,0,.15),#000 56px);mask-image:linear-gradient(rgba(0,0,0,.15),#000 56px)}
.k-scroll.has-above.has-below .k-list{-webkit-mask-image:linear-gradient(rgba(0,0,0,.15),#000 56px,#000 calc(100% - 56px),rgba(0,0,0,.15));mask-image:linear-gradient(rgba(0,0,0,.15),#000 56px,#000 calc(100% - 56px),rgba(0,0,0,.15))}
.more-hint{display:none;align-items:center;justify-content:center;gap:8px;min-height:44px;margin:0 12px;border-radius:10px;font-weight:800;font-size:15px;white-space:nowrap}
.more-hint.above{grid-row:1;margin-top:8px;background:var(--bg-2);color:var(--fg);border:1px solid var(--line)}
.more-hint.below{grid-row:3;margin-top:6px;margin-bottom:8px;background:var(--fg);color:var(--bg)}
.k-scroll.has-below .more-hint.below,.k-scroll.has-above .more-hint.above{display:flex}
.kempty{margin:24px 8px;color:var(--fg-dim);font-size:16px;text-align:center}
/* a ticket */
.kitchen .tk{background:var(--panel);color:var(--panel-fg);border-radius:12px;border:3px solid transparent;overflow:hidden;flex:none}
.kitchen .tk header{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 10px;padding:9px 12px 8px;border-bottom:1px solid var(--line-panel)}
.kitchen .tk .pl{font:700 28px/1 var(--font-display);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kitchen .tk .wait{grid-row:1 / span 2;grid-column:2;align-self:center;text-align:right}
.kitchen .tk .wait b{display:block;font:800 24px/1 var(--font);font-variant-numeric:tabular-nums}
.kitchen .tk .wait span{display:block;font-size:12px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--panel-dim);margin-top:3px}
.kitchen .tk .meta{display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px;font-size:14px;color:var(--panel-dim)}
.kitchen .src{font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:2px 8px;border-radius:999px;border:1.5px solid currentColor;color:var(--panel-fg);white-space:nowrap}
.kitchen .src.unsent{color:var(--accent-on-panel)}
.kitchen .dishes{list-style:none;margin:0;padding:2px 6px 4px}
.kitchen .dl{width:100%;min-height:48px;display:grid;grid-template-columns:30px minmax(0,1fr) 28px;gap:0 8px;align-items:center;padding:6px;border-radius:8px;border-bottom:1px solid var(--line-panel);text-align:left;color:var(--panel-fg)}
.kitchen .dishes li:last-child .dl,.kitchen .dishes li:has(+ .div) .dl{border-bottom:0}
.kitchen .dl em{font-style:normal;font:800 20px/1 var(--font);font-variant-numeric:tabular-nums;align-self:baseline;padding-top:2px}
.kitchen .dl .en{display:block;font-weight:700;font-size:17px;line-height:1.2}
.kitchen .dl .kalt{display:block;font-family:var(--font-alt);font-size:15px;line-height:1.35;color:var(--panel-dim)}
.kitchen .dl .tick{width:26px;height:26px;border-radius:50%;border:2px solid var(--panel-dim);display:grid;place-items:center;color:#fff}
.kitchen .dl .tick svg{width:15px;height:15px;opacity:0}
.kitchen .dl[aria-pressed="true"] .en,.kitchen .dl[aria-pressed="true"] em{text-decoration:line-through;text-decoration-thickness:2px}
.kitchen .dl[aria-pressed="true"] em,.kitchen .dl[aria-pressed="true"] .en,.kitchen .dl[aria-pressed="true"] .kalt{opacity:.6}
.kitchen .dl[aria-pressed="true"] .tick{background:var(--k-done);border-color:var(--k-done)}
.kitchen .dl[aria-pressed="true"] .tick svg{opacity:1}
.kitchen .dl:focus-visible{outline-color:var(--accent-on-panel);outline-offset:-2px}
.kitchen .div{display:flex;align-items:center;gap:10px;margin:6px 6px 2px;font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--panel-dim)}
.kitchen .div::before,.kitchen .div::after{content:"";height:2px;background:var(--line-panel);flex:1}
.kitchen .div::before{flex:0 0 14px}
.kitchen .bump{display:flex;align-items:center;justify-content:center;gap:10px;width:calc(100% - 24px);margin:4px 12px 12px;min-height:56px;border-radius:10px;background:var(--k-done);color:#fff;font-weight:800;font-size:19px;text-align:center}
.kitchen .bump svg{width:22px;height:22px;display:none}
.kitchen .bump .all{display:none}
.kitchen .tk.late{border-color:var(--accent)}
.kitchen .tk.late header{background:var(--k-late-bg)}
.kitchen .tk.late .wait b,.kitchen .tk.late .wait span{color:var(--accent-on-panel)}
/* every line crossed out: the ticket says so and Bump grows, but nothing bumps by itself */
.kitchen .tk.ready{border-color:var(--k-done)}
.kitchen .readybar{display:none;align-items:center;gap:8px;padding:8px 12px;background:var(--k-done-bg);color:var(--k-done-ink);font-weight:800;font-size:14px;letter-spacing:.02em}
.kitchen .readybar svg{width:16px;height:16px}
.kitchen .tk.ready .readybar{display:flex}
.kitchen .tk.ready .bump{min-height:68px;font-size:21px;box-shadow:0 0 0 4px rgba(0,0,0,.18)}
.kitchen .tk.ready .bump svg{display:block}
.kitchen .tk.ready .bump .all{display:inline}
/* the footer: the last bumped, Undo, All 5 */
.k-foot{border-top:1px solid var(--line);padding:10px 12px 12px}
.kitchen .last{display:flex;align-items:center;gap:8px;min-height:56px;padding:4px 6px 4px 12px;border-radius:12px;background:var(--bg-2);border:1px solid var(--line)}
.kitchen .last .lb{display:block;font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-dim)}
.kitchen .last b{font:700 18px/1.1 var(--font-display);white-space:nowrap}
.kitchen .last b small{font:600 14px/1 var(--font);color:var(--fg-dim);margin-left:6px}
.kitchen .last > span{flex:1;min-width:0;overflow:hidden}
.kitchen .undo{flex:none;min-height:44px;min-width:72px;padding:0 12px;border-radius:10px;border:1.5px solid var(--fg);font-weight:750;font-size:15px;text-align:center;color:var(--fg)}
.kitchen .kmore{flex:none;min-height:44px;min-width:56px;padding:0 12px;border-radius:10px;background:var(--bg);border:1px solid var(--line);font-weight:700;font-size:14px;text-align:center;color:var(--fg)}
/* recently bumped: takes the list's place inside the aside */
.r-head,.k-recent{display:none}
body[data-kpanel="recent"] .kitchen .k-head,body[data-kpanel="recent"] .kitchen .k-scroll,body[data-kpanel="recent"] .kitchen .k-foot{display:none}
body[data-kpanel="recent"] .kitchen{grid-template-rows:auto minmax(0,1fr)}
body[data-kpanel="recent"] .kitchen .r-head{display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid var(--line)}
body[data-kpanel="recent"] .kitchen .k-recent{display:flex;flex-direction:column;gap:8px;overflow:auto;padding:10px 12px 12px}
.r-head h2{font:700 22px/1.1 var(--font-display);flex:1}
.r-head .kback{grid-row:auto;grid-column:auto}
.k-recent .r-note{margin:0;font-size:14px;color:var(--fg-dim);padding:0 2px 4px}
.k-recent .r-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:2px 10px;padding:10px 8px 10px 14px;border-radius:12px;background:var(--bg-2);border:1px solid var(--line)}
.k-recent .r-row b{font:700 22px/1.1 var(--font-display)}
.k-recent .r-row p{grid-column:1;margin:0;font-size:14px;color:var(--fg-dim)}
.k-recent .r-row .undo{grid-row:1 / span 2;grid-column:2}
.k-recent .r-src{font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:1px 7px;border-radius:999px;border:1.5px solid currentColor;margin-right:6px}
/* closed: a slim rail, one tap target top to bottom, with the count and how many are late */
.krail{display:none}
body.kon[data-kitchen="closed"][data-kdrawer="0"] .kitchen .k-head,body.kon[data-kitchen="closed"][data-kdrawer="0"] .kitchen .k-scroll,body.kon[data-kitchen="closed"][data-kdrawer="0"] .kitchen .k-foot,
body.kon[data-kitchen="closed"][data-kdrawer="0"] .kitchen .r-head,body.kon[data-kitchen="closed"][data-kdrawer="0"] .kitchen .k-recent{display:none}
body.kon[data-kitchen="closed"][data-kdrawer="0"] .kitchen{grid-template-rows:minmax(0,1fr)}
body.kon[data-kitchen="closed"][data-kdrawer="0"] .krail{display:flex;flex-direction:column;align-items:center;gap:14px;width:100%;height:100%;padding:14px 0;text-align:center;color:var(--fg)}
.krail .vl{writing-mode:vertical-rl;transform:rotate(180deg);font:700 20px/1 var(--font-display);letter-spacing:.02em}
.krail .kcount{min-width:44px;height:44px;font-size:20px}
.krail .klate{display:grid;gap:6px;justify-items:center;font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--accent-strong);line-height:1.1}
.krail .klate[hidden]{display:none}
.kdot{width:14px;height:14px;border-radius:50%;background:var(--accent);display:inline-block}
@media (prefers-reduced-motion:no-preference){
  .krail .kdot,.kbtn .kdot{animation:kpulse 1.6s ease-in-out infinite}
  @keyframes kpulse{50%{box-shadow:0 0 0 7px rgba(255,255,255,.18)}}
}
/* the top-bar Kitchen button and the drawer, below 1100 px */
.kbtn{display:none}
body.kon[data-kdrawer="1"] .kbtn:not([hidden]){display:inline-flex;align-items:center;gap:8px;flex:0 0 auto;min-height:44px;padding:0 8px 0 14px;border-radius:10px;border:1.5px solid var(--line);font-weight:800;font-size:16px;color:var(--fg)}
.kbtn .kdot{width:10px;height:10px}
.kbtn .kcount{min-width:28px;height:28px;padding:0 8px;border-radius:999px;background:var(--accent);color:var(--on-accent);font:800 15px/1 var(--font);display:inline-grid;place-items:center}
body.kon[data-kdrawer="1"] .kitchen{position:fixed;z-index:40;top:0;bottom:0;left:0;width:min(380px,92vw);--kw:min(380px,92vw);border-right:0;box-shadow:12px 0 30px rgba(0,0,0,.5);transform:translateX(-105%);visibility:hidden;padding-top:var(--safe-t);padding-bottom:var(--safe-b)}
body.kon[data-kdrawer="1"][data-kitchen="open"] .kitchen{transform:none;visibility:visible}
.kscrim{position:fixed;inset:0;z-index:39;background:rgba(0,0,0,.6)}
@media (prefers-reduced-motion:no-preference){ body.kon[data-kdrawer="1"] .kitchen{transition:transform .28s cubic-bezier(.32,.72,0,1),visibility 0s linear .28s} body.kon[data-kdrawer="1"][data-kitchen="open"] .kitchen{transition:transform .28s cubic-bezier(.32,.72,0,1),visibility 0s} }
/* a short landscape screen (1280 x 720): tighter heads and footer */
@media (min-width:700px) and (max-height:800px){
  .k-head{padding:8px 10px 8px 14px}
  .k-head h2{font-size:22px}
  .k-foot{padding:8px 10px 10px}
  .kitchen .last{min-height:52px}
}

/* ---------- 1.4.0 stage B: Today and Void (a venue with categories), design owner/04-till-today and 05-till-void ----------
   The whole screen: dark list of every till's sales on the left, the cream panel on the right (the chosen sale with Receipt
   at its foot and Void apart at its top, or Void with a PIN in its place). On a phone the panel covers the list. Colours are
   the skin's own tokens. */
dialog.tday[open]{position:fixed;inset:0;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;border-radius:0;overflow:hidden;
  background:var(--bg);color:var(--fg);display:grid;grid-template-rows:auto minmax(0,1fr);grid-template-columns:minmax(0,1fr)}
dialog.tday::backdrop{background:var(--bg)}
.tbar{display:flex;align-items:center;flex-wrap:wrap;gap:10px 12px;padding:10px 16px;padding-top:calc(10px + var(--safe-t));border-bottom:1px solid var(--line);background:var(--bg)}
.tback{min-height:44px;padding:0 16px 0 12px;border-radius:10px;border:1px solid var(--line);font-weight:700;font-size:15px;color:var(--fg)}
.tbar h3{flex:0 1 auto;margin:0;font:700 22px/1.1 var(--font-display);color:var(--fg);white-space:nowrap}
.tbar h3 small{font:600 15px/1 var(--font);color:var(--fg-dim);margin-left:10px}
.tper{flex:1;min-width:0;padding:0;justify-content:center}
.tper button{border-color:var(--line);color:var(--fg)}
.tprint{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border-radius:10px;border:1px solid var(--line);font-weight:700;font-size:14px;color:var(--fg);text-decoration:none}
.tsync{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border:1px solid var(--line);border-radius:999px;font-size:14px;font-weight:700;white-space:nowrap}
.tsync .dot{width:10px;height:10px;border-radius:50%;background:#8a8a8a}
.tsync.ok .dot{background:#7fbf7f}
.tsync.wait .dot{background:#e0b341}
.tsync.bad{border-color:#e8786e}
.tsync.bad .dot{background:#e8786e}
.tmain{display:grid;grid-template-columns:minmax(0,1fr) var(--tpw,420px);min-height:0}
.tlist{display:grid;grid-template-rows:auto auto minmax(0,1fr);min-height:0;min-width:0;padding:12px 14px 0 16px}
.tsum{display:grid;grid-template-columns:1.3fr repeat(var(--n,2),1fr) .8fr;gap:8px;margin-bottom:10px}
.tsum div{background:var(--bg-2);border:1px solid var(--line);border-radius:12px;padding:9px 12px;min-width:0}
.tsum b{display:block;font:700 24px/1.1 var(--font-display);font-variant-numeric:tabular-nums;color:var(--fg)}
.tsum span{display:block;font-size:13px;font-weight:650;color:var(--fg-dim);margin-top:3px}
.tsum div.big{background:var(--fg);border-color:var(--fg)}
.tsum div.big b{color:var(--bg)}
.tsum div.big span{color:var(--bg);opacity:.78}
.tlh{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;padding:0 4px 8px;font-size:13.5px;color:var(--fg-dim)}
.tlh b{color:var(--fg);font-size:15px}
.tlh .asof{margin-left:auto}
.tlh .asof.bad{color:var(--accent-strong);font-weight:700}
.trows{overflow:auto;padding-bottom:12px;display:flex;flex-direction:column;gap:6px;min-height:0}
.trows .sale{flex:none;display:grid;grid-template-columns:56px minmax(0,1fr) 92px 92px;align-items:center;gap:10px;min-height:56px;padding:6px 12px;border-radius:12px;
  background:var(--bg-2);border:1px solid var(--line);width:100%;text-align:left;color:var(--fg)}
.trows .sale .tm{font-variant-numeric:tabular-nums;font-weight:650}
.trows .sale .who{min-width:0}
.trows .sale .who b{display:flex;align-items:center;gap:6px;font-size:16px;font-weight:750;min-width:0}
.trows .sale .who .it{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.trows .sale .who small{display:block;font-size:13px;color:var(--fg-dim);font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.trows .sale .pd{font-size:14px;font-weight:650;color:var(--fg-dim)}
.trows .sale .am{text-align:right;font-weight:800;font-size:17px;font-variant-numeric:tabular-nums}
.trows .sale[aria-current="true"]{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.trows .sale[aria-current="true"] small,.trows .sale[aria-current="true"] .pd{color:var(--bg);opacity:.78}
.trows .sale.vd .am{text-decoration:line-through;color:var(--fg-dim)}
.vtag,.otag{flex:none;display:inline-block;font:800 11px/1 var(--font);letter-spacing:.05em;text-transform:uppercase;padding:4px 6px;border-radius:6px}
.vtag{background:var(--danger);color:#fff}
.otag{border:1.5px solid currentColor}
.otag.bad{color:var(--accent-strong)}
.tnone{color:var(--fg-dim);padding:24px 4px}
.tpanel{background:var(--panel);color:var(--panel-fg);display:grid;grid-template-rows:auto minmax(0,1fr) auto;min-height:0;min-width:0}
.tpanel .ph{display:flex;align-items:center;gap:8px;padding:12px 12px 10px 18px;border-bottom:1px solid var(--line-panel)}
.tpanel .ph h2{font:700 22px/1.1 var(--font-display);flex:1;margin:0;min-width:0}
.tpanel .ph h2 small{display:block;font:600 13.5px/1.3 var(--font);color:var(--panel-dim);font-variant-numeric:tabular-nums;margin-top:3px}
.tpanel .pb{overflow:auto;padding:6px 18px 10px}
.tpanel .ln{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:0 8px;padding:8px 0;border-bottom:1px solid var(--line-panel);align-items:baseline}
.tpanel .ln em{font-style:normal;font-weight:800;font-variant-numeric:tabular-nums}
.tpanel .ln .nm{font-weight:650;font-family:var(--font-dish,var(--font))}
.tpanel .ln .nm i{display:block;font-style:normal;font-weight:400;font-size:14px;color:var(--panel-dim);font-family:var(--font-alt)}
.tpanel .ln .am{font-weight:700;font-variant-numeric:tabular-nums}
.tpanel .kv{display:flex;justify-content:space-between;padding:6px 0;font-size:15px}
.tpanel .kv b{font-variant-numeric:tabular-nums}
.tpanel .kv.tot{border-top:2px solid var(--panel-fg);margin-top:6px;padding-top:10px}
.tpanel .kv.tot span{font-weight:700;font-size:17px}
.tpanel .kv.tot b{font:700 30px/1 var(--font-display)}
.tpanel .kv.tot.vd b{text-decoration:line-through;color:var(--panel-dim)}
.tpanel .meta{font-size:13.5px;color:var(--panel-dim);margin:8px 0 0;line-height:1.45}
.tpanel .vdline{margin:10px 0 0;padding:10px 12px;border-radius:10px;border:1.5px solid var(--accent-on-panel);color:var(--panel-fg);font-size:14.5px;line-height:1.45}
.tpanel .vdline b{color:var(--accent-on-panel)}
.tpanel .tsp{margin-top:14px}
.tpanel .pf{padding:12px 18px calc(16px + var(--safe-b));border-top:1px solid var(--line-panel);display:grid;gap:10px}
.tpanel .pf:empty{display:none}
.tpanel .receipt{min-height:60px;border-radius:12px;background:var(--panel-fg);color:var(--panel);font-weight:800;font-size:18px;text-align:center}
/* Void lives apart from Receipt: top right of the panel, outlined, never beside it */
.tpanel .voidbtn{min-height:44px;padding:0 14px;border-radius:10px;border:2px solid var(--accent-on-panel);color:var(--accent-on-panel);font-weight:800;font-size:15px;white-space:nowrap}
.tpanel .tclose,.tpanel .tbk{min-height:44px;min-width:44px;padding:0 14px;border-radius:10px;border:1px solid var(--line-panel);font-weight:700;font-size:15px;color:var(--panel-fg)}
.tpanel .tclose{font-size:22px;padding:0}
/* Void with a PIN: one layer */
.tpanel .vb{overflow:auto;padding:10px 18px 6px;display:grid;gap:10px;align-content:start}
.tpanel .vsale{background:#fff;border:1px solid var(--line-panel);border-radius:12px;padding:10px 12px;font-size:14.5px}
.tpanel .vsale b{font-variant-numeric:tabular-nums}
.tpanel .vsale p{color:var(--panel-dim);font-size:13.5px;margin:3px 0 0;line-height:1.45}
.tpanel .lbl{margin:0 0 6px}
.tpanel .sel{width:100%;min-height:48px;padding:0 12px;border-radius:10px;border:1.5px solid var(--panel-dim);background:#fff;color:var(--panel-fg);font-weight:650;font-size:16px}
.tpanel .dots{display:flex;align-items:center;gap:12px;min-height:44px;padding:0 4px}
.tpanel .dots i{width:18px;height:18px;border-radius:50%;background:var(--panel-fg)}
.tpanel .dots i.e{background:transparent;border:2px dashed var(--panel-dim)}
.tpanel .dots span{margin-left:auto;font-size:13.5px;color:var(--panel-dim)}
.tpanel .keys{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.tpanel .keys button{min-height:56px;border-radius:12px;border:1.5px solid var(--line-panel);background:#fff;color:var(--panel-fg);font-weight:700;font-size:24px;text-align:center}
.tpanel .keys button.fn{font-size:16px;background:transparent}
.tpanel .chips{display:flex;flex-wrap:wrap;gap:8px}
.tpanel .chip{min-height:44px;padding:0 14px;border-radius:999px;border:1.5px solid var(--panel-dim);font-weight:700;font-size:14.5px;background:#fff;color:var(--panel-fg)}
.tpanel .chip[aria-pressed="true"]{background:var(--panel-fg);color:var(--panel);border-color:var(--panel-fg)}
.tpanel .vmsg{margin:0;min-height:20px;font-size:14.5px;font-weight:650;color:var(--panel-dim)}
.tpanel .vmsg.bad{color:var(--accent-on-panel)}
.tpanel .vf{display:grid;grid-template-columns:1fr 1.5fr;gap:10px;padding:12px 18px calc(16px + var(--safe-b));border-top:1px solid var(--line-panel)}
.tpanel .vf button{min-height:60px;border-radius:12px;font-weight:800;font-size:18px;text-align:center}
.tpanel .vf .ghost{border:2px solid var(--panel-dim);color:var(--panel-fg)}
.tpanel .vf .go{background:var(--danger);color:#fff}
.tpanel .vf .go:disabled{background:transparent;color:var(--panel-dim);border:2px dashed var(--panel-dim);cursor:not-allowed}
.tperiod{overflow:auto;background:var(--panel);color:var(--panel-fg);padding:14px 20px 20px;min-height:0}
/* the device's own wide screen: a wider panel and bigger keys */
@media (min-width:1600px){
  .tmain{--tpw:560px}
  .tsum b{font-size:30px}
  .trows .sale{min-height:64px;grid-template-columns:64px minmax(0,1fr) 110px 110px}
  .trows .sale .who b{font-size:18px}
  .trows .sale .am{font-size:19px}
  .tpanel .ph h2{font-size:26px}
  .tpanel .keys button{min-height:72px;font-size:28px}
  .tpanel .chip{min-height:52px;font-size:16px;padding:0 18px}
  .tpanel .vf button{min-height:72px;font-size:20px}
  .tpanel .dots i{width:22px;height:22px}
}
@media (min-width:700px) and (max-width:1100px){ .tmain{--tpw:380px} .tper button{padding:0 10px} }
/* a short landscape screen: the void layer fits without scrolling */
@media (min-width:700px) and (max-height:800px){
  .tpanel .vb{gap:8px;padding-top:8px}
  .tpanel .keys{gap:6px}
  .tpanel .keys button{min-height:50px;font-size:22px}
  .tpanel .vf button{min-height:56px}
  .tpanel .vsale{padding:8px 12px}
}
/* phone: the list fills the screen; the chosen sale, or Void, covers it */
@media (max-width:699px){
  .tbar{padding:8px 10px;padding-top:calc(8px + var(--safe-t));gap:8px}
  .tbar h3{font-size:20px;flex:1}
  .tbar h3 small{display:none}
  .tper{order:5;flex:1 1 100%;justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  /* a sale or Void open: the header keeps only Back, the title and Synced, so the whole Void layer fits the phone */
  dialog.tday:has(.tmain.open) .tper,dialog.tday:has(.tmain.open) .tpick,dialog.tday:has(.tmain.open) .tprint{display:none!important}
  .tper button{flex:none}
  .tpick{order:6}
  .tprint{order:7}
  .tmain{grid-template-columns:minmax(0,1fr)}
  .tlist{padding:10px 10px 0}
  .tsum{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
  .tsum div{padding:7px 9px}
  .tsum div.big{grid-column:1 / -1;display:flex;align-items:baseline;justify-content:space-between}
  .tsum b{font-size:19px}
  .tsum div.big b{font-size:24px}
  .tsum div.cnt{display:none}
  .trows .sale{grid-template-columns:46px minmax(0,1fr) auto;padding:6px 10px}
  .trows .sale .pd{display:none}
  .tmain .tpanel{display:none}
  .tmain.open .tlist{display:none}
  .tmain.open .tpanel{display:grid}
  .tpanel .ph{padding:8px 8px 8px 14px}
  .tpanel .ph h2{font-size:20px}
  .tpanel .vb{padding:8px 14px 4px;gap:8px}
  .tpanel .keys{gap:6px}
  .tpanel .keys button{min-height:52px;font-size:22px}
  .tpanel .vf{padding:10px 14px calc(14px + var(--safe-b))}
  .tpanel .vf button{min-height:56px}
}
/* ---------- 1.4.0 stage B: the visible day on Today (the native picker sits under it, so a tap still opens it) ---------- */
.tpick{position:relative;display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border-radius:10px;border:1px solid var(--line);background:var(--bg-2);color:var(--fg);font-weight:700;font-size:14.5px;cursor:pointer}
.tpick input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;min-height:0;padding:0;border:0}
.tpick:focus-within{outline:3px solid var(--accent-strong);outline-offset:2px}
/* discount reasons: one tap, required */
.dwhy{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.dwhy .chip{min-height:44px;padding:0 14px;border-radius:999px;border:1.5px solid var(--panel-dim);font-weight:700;font-size:14.5px;background:#fff;color:var(--panel-fg)}
.dwhy .chip[aria-pressed="true"]{background:var(--panel-fg);color:var(--panel);border-color:var(--panel-fg)}
#discDone:disabled{opacity:.5;cursor:not-allowed}
/* a short landscape screen (1024 x 600): the pad on the left, why on the right, so Apply stays on screen */
@media (min-width:700px) and (max-height:760px){
  body.cats #dDisc[open]{width:min(780px,calc(100vw - 24px))}
  body.cats #dDisc .sbody{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:18px;align-content:start}
  body.cats #dDisc .sbody > *{grid-column:1}
  body.cats #dDisc #discWhyL{grid-column:2;grid-row:1}
  body.cats #dDisc #discWhy{grid-column:2;grid-row:2 / span 3;align-content:start}
  body.cats #dDisc #discMsg{grid-column:2;grid-row:5}
  body.cats #dDisc .pad{gap:6px;margin-top:6px}
  body.cats #dDisc .pad button{min-height:48px;font-size:20px}
  body.cats #dDisc .quick button{min-height:44px}
  body.cats #dDisc .big{margin:0}
  body.cats #dDisc .sfoot{position:sticky;bottom:0;background:var(--panel);z-index:1}
}
/* Fix the change: the link on Paid, and its panel (the Cash panel's look) */
.fixlink{align-self:flex-start;min-height:44px;padding:0 4px;margin-top:6px;font-weight:700;font-size:16px;text-decoration:underline;text-underline-offset:4px;color:inherit}
body.cats #dDone .fixlink{color:var(--fg)}
body:not(.cats) .fixlink{display:block;margin:8px auto 0}
.fixlink[hidden]{display:none}
.fixwas{margin:0;font-size:15px}
body.cats #dFix .fixwas{color:var(--fg-dim)}
body.cats #dFix .cashtop{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:16px;align-items:stretch}
body.cats #dFix .cashnums .lbl{font-size:12.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-dim);margin:0}
body.cats #dFix .cashnums .big{font-family:var(--font-display);font-size:44px;font-weight:700;line-height:1.1;margin:0 0 8px;color:var(--fg)}
body.cats #dFix .how{font-size:14px;color:var(--fg-dim);margin-top:-6px}
body.cats #dFix .change{display:flex;flex-direction:column;justify-content:center;gap:6px;min-height:150px;margin:0;padding:16px 18px;border-radius:14px;background:var(--bg-2);border:1px solid var(--card-edge,var(--line));color:var(--fg);font-size:16px;font-weight:600;text-align:left}
body.cats #dFix .change .cl{font-size:12.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-dim)}
body.cats #dFix .change.ok{border:2px solid var(--give-edge)}
body.cats #dFix .change.ok b{font-family:var(--font-display);font-size:72px;line-height:1;color:var(--give)}
body.cats #dFix .change.short .ch{color:var(--accent-strong);font-weight:800}
body.cats #dFix .quick{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:0}
body.cats #dFix .quick button{min-height:72px;border-radius:12px;background:var(--bg-2);border:1px solid var(--card-edge,var(--line));color:var(--fg);font-family:var(--font-display);font-size:28px}
body.cats #dFix .pad{flex:1;min-height:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:minmax(48px,1fr);gap:8px;margin:0}
body.cats #dFix .pad button{min-height:48px;background:var(--bg-2);border:1px solid var(--card-edge,var(--line));color:var(--fg);font-size:24px}
body.cats #dFix .psh .pill{background:var(--cash)}
body:not(.cats) #dFix .psum,body:not(.cats) #dFix .plbl{display:none}
body:not(.cats) #dFix .change.ok b{display:block;font-size:26px}
@media (max-width:699px){
  body.cats #dFix .cashtop{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
  body.cats #dFix .cashnums .big{font-size:28px}
  body.cats #dFix .change{min-height:96px;padding:10px 12px}
  body.cats #dFix .change.ok b{font-size:44px}
  body.cats #dFix .quick button{min-height:52px;font-size:22px}
}
/* ---------- 1.4.0 stage B2: owner Daily (design owner\02-daily.html) ----------
   A toolbar (Daily, the day, "All figures in SGD. Singapore time."), the tiles with Takings first, then the sales oldest
   first beside a column of voids and discounts (who, when, why), the refused attempts and the items, collapsed. On a phone
   the tiles come first and the sales list opens behind "Show all N sales". Everything reads the owner tokens (--o-*). */
.owner #app>section:is(#tDaily,#tDevices){max-width:none;margin:0;padding:0}
:is(#tDaily,#tDevices) .dtool{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 20px;border-bottom:1px solid var(--o-line)}
:is(#tDaily,#tDevices) .dtool h2{margin:0;font:700 26px/1 var(--font-display)}
:is(#tDaily,#tDevices) .dtool .meta{font-size:14px;color:var(--o-dim)}
:is(#tDaily,#tDevices) .dtool .sp{flex:1}
:is(#tDaily,#tDevices) .daynav{display:flex;align-items:center;gap:6px}
:is(#tDaily,#tDevices) .daynav .ib{min-width:44px;min-height:44px;border-radius:10px;border:1.5px solid var(--o-line-2);background:var(--o-surface);color:var(--o-ink);font-size:22px;line-height:1}
:is(#tDaily,#tDevices) .daynav .ib:disabled{opacity:.45;cursor:not-allowed}
:is(#tDaily,#tDevices) .daynav .day{position:relative;display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border-radius:10px;border:1.5px solid var(--o-line-2);background:var(--o-surface);color:var(--o-ink);font-weight:750;font-size:16px;cursor:pointer}
:is(#tDaily,#tDevices) .daynav .day input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;border:0;padding:0;min-height:0}
:is(#tDaily,#tDevices) .daynav .day:focus-within{outline:3px solid var(--o-red);outline-offset:2px}
:is(#tDaily,#tDevices) .btn{min-height:44px;padding:0 16px;border-radius:10px;font-size:15px;font-weight:700;white-space:nowrap}
:is(#tDaily,#tDevices) .btn.dark{background:var(--o-ink);color:var(--o-bg)}
:is(#tDaily,#tDevices) .btn.red{background:var(--o-save);color:#fff}
:is(#tDaily,#tDevices) .btn.line{border:1.5px solid var(--o-line-2);background:var(--o-surface);color:var(--o-ink)}
:is(#tDaily,#tDevices) .dmain{padding:16px 20px 24px}
:is(#tDaily,#tDevices) .stats{display:grid;grid-template-columns:1.4fr repeat(var(--n,5),minmax(0,1fr));gap:10px;margin:0 0 16px}
:is(#tDaily,#tDevices) .stat{background:var(--o-surface);border:1px solid var(--o-line);border-radius:12px;padding:12px 14px;min-width:0}
:is(#tDaily,#tDevices) .stat .sv{display:block;font:700 26px/1.1 var(--font-display);font-variant-numeric:tabular-nums}
:is(#tDaily,#tDevices) .stat .sl{display:block;font-size:13.5px;font-weight:650;color:var(--o-dim);margin-top:4px}
:is(#tDaily,#tDevices) .stat small{display:block;font-size:12.5px;color:var(--o-dim);margin-top:2px}
:is(#tDaily,#tDevices) .stat.big{background:var(--o-ink);border-color:var(--o-ink);color:var(--o-bg)}
:is(#tDaily,#tDevices) .stat.big .sv{font-size:32px}
:is(#tDaily,#tDevices) .stat.big .sl,:is(#tDaily,#tDevices) .stat.big small{color:var(--o-bg);opacity:.86}
:is(#tDaily,#tDevices) .showall{display:none}
:is(#tDaily,#tDevices) .cols{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:16px;align-items:start}
:is(#tDaily,#tDevices) .panel{background:var(--o-surface);border:1px solid var(--o-line);border-radius:12px;padding:14px 16px;margin:0 0 16px}
:is(#tDaily,#tDevices) .panel h2{margin:0 0 8px;font:700 20px/1.1 var(--font-display);display:flex;align-items:baseline;flex-wrap:wrap;gap:8px}
:is(#tDaily,#tDevices) .panel h2 span{font:600 14px/1.2 var(--font);color:var(--o-dim)}
:is(#tDaily,#tDevices) .sl{display:grid;grid-template-columns:48px 96px minmax(0,1fr) 72px 72px;column-gap:10px}
:is(#tDaily,#tDevices) .sl .h,:is(#tDaily,#tDevices) .sl .s{display:contents}
:is(#tDaily,#tDevices) .sl .h div{font:800 11.5px/1 var(--font);letter-spacing:.07em;text-transform:uppercase;color:var(--o-dim);padding:6px 0 8px;border-bottom:1px solid var(--o-line)}
:is(#tDaily,#tDevices) .sl .h div.n{text-align:right}
:is(#tDaily,#tDevices) .sl .s>div{padding:9px 0;border-bottom:1px solid var(--o-line);font-size:14.5px;min-width:0}
:is(#tDaily,#tDevices) .sl .tm,:is(#tDaily,#tDevices) .sl .am{font-variant-numeric:tabular-nums}
:is(#tDaily,#tDevices) .sl .am{text-align:right;font-weight:750}
:is(#tDaily,#tDevices) .sl .rf small,:is(#tDaily,#tDevices) .sl .it small{display:block;color:var(--o-dim);font-size:12.5px;margin-top:2px}
:is(#tDaily,#tDevices) .sl .s.vd>div{color:var(--o-dim)}
:is(#tDaily,#tDevices) .sl .s.vd .am{text-decoration:line-through}
:is(#tDaily,#tDevices) .refb{min-height:44px;min-width:44px;margin:-10px 0 -8px;padding:0 6px 0 0;font:750 14.5px/1 var(--font);font-variant-numeric:tabular-nums;color:var(--o-ink);text-decoration:underline;text-decoration-color:var(--o-line-2);text-underline-offset:4px;text-align:left}
:is(#tDaily,#tDevices) .refb[aria-expanded="true"]{text-decoration-color:var(--o-ink)}
:is(#tDaily,#tDevices) .sl .dt{grid-column:1 / -1;padding:10px 12px;margin:0 0 6px;border-radius:10px;background:var(--o-bg-2);font-size:14px}
:is(#tDaily,#tDevices) .sl .dt[hidden]{display:none}
:is(#tDaily,#tDevices) .dt p{margin:2px 0}
:is(#tDaily,#tDevices) .dt p span,:is(#tDaily,#tDevices) .ev p span{color:var(--o-dim)}
:is(#tDaily,#tDevices) .vw{margin-top:10px;padding-top:10px;border-top:1px solid var(--o-line)}
:is(#tDaily,#tDevices) .vwq{font-weight:700}
:is(#tDaily,#tDevices) .chips{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 4px}
:is(#tDaily,#tDevices) .chip{min-height:44px;padding:0 14px;border-radius:999px;border:1.5px solid var(--o-line-2);background:var(--o-surface);color:var(--o-ink);font-weight:700;font-size:14.5px}
:is(#tDaily,#tDevices) .chip[aria-checked="true"]{background:var(--o-ink);border-color:var(--o-ink);color:var(--o-bg)}
:is(#tDaily,#tDevices) .err{color:var(--o-red);min-height:0;margin:4px 0;font-size:14px}
:is(#tDaily,#tDevices) .tag{display:inline-block;font:800 11px/1 var(--font);letter-spacing:.05em;text-transform:uppercase;padding:4px 6px;border-radius:6px;border:1.5px solid currentColor;vertical-align:1px;white-space:nowrap;background:transparent;color:var(--o-ink)}
:is(#tDaily,#tDevices) .tag.vd{color:#fff;background:var(--o-red);border-color:var(--o-red)}
:is(#tDaily,#tDevices) .tag.ad{background:var(--o-check);border-color:var(--o-check);color:#221f18}
:is(#tDaily,#tDevices) .tag.fx{color:var(--o-ink)}
:is(#tDaily,#tDevices) .ev{border-top:1px solid var(--o-line);padding:10px 0}
:is(#tDaily,#tDevices) .ev-p h2+.ev,:is(#tDaily,#tDevices) .reflist .ev:first-child{border-top:0;padding-top:2px}
:is(#tDaily,#tDevices) .ev .l1{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:14.5px}
:is(#tDaily,#tDevices) .ev .l1 b{font-variant-numeric:tabular-nums}
:is(#tDaily,#tDevices) .ev .l1 .am{margin-left:auto;font-weight:800;font-variant-numeric:tabular-nums}
:is(#tDaily,#tDevices) .ev p{font-size:14px;margin:4px 0 0}
:is(#tDaily,#tDevices) .refx{width:100%;margin-top:10px}
:is(#tDaily,#tDevices) .reflist{margin-top:8px;padding:2px 12px;border-radius:10px;background:var(--o-bg-2)}
:is(#tDaily,#tDevices) .reflist[hidden]{display:none}
:is(#tDaily,#tDevices) .foot-note{font-size:13px;color:var(--o-dim);margin:8px 0 0}
:is(#tDaily,#tDevices) details.panel>summary{min-height:44px;display:flex;align-items:center;gap:8px;cursor:pointer;font:700 18px/1.1 var(--font-display)}
:is(#tDaily,#tDevices) details.panel>summary span{font:600 14px/1 var(--font);color:var(--o-dim)}
:is(#tDaily,#tDevices) details.panel[open]>summary{margin-bottom:8px}
:is(#tDaily,#tDevices) table.t th,:is(#tDaily,#tDevices) table.t td{border-bottom-color:var(--o-line)}
:is(#tDaily,#tDevices) .mform .lbl{color:var(--o-dim)}
:is(#tDaily,#tDevices) .mitems{max-height:360px;overflow:auto}
:is(#tDaily,#tDevices) .phonebar{display:none}
@media (max-width:600px){
  :is(#tDaily,#tDevices) .dtool{padding:10px 16px;gap:8px}
  :is(#tDaily,#tDevices) .dtool h2,:is(#tDaily,#tDevices) .dtool .sp,:is(#tDaily,#tDevices) .dtool .desk{display:none}
  :is(#tDaily,#tDevices) .dtool .meta{order:2;width:100%;font-size:13px}
  :is(#tDaily,#tDevices) .daynav{width:100%}
  :is(#tDaily,#tDevices) .daynav .day{flex:1;justify-content:center}
  :is(#tDaily,#tDevices) .dmain{padding:12px 16px 20px}
  :is(#tDaily,#tDevices) .stats{grid-template-columns:1fr 1fr;gap:8px}
  :is(#tDaily,#tDevices) .stat.big{grid-column:1 / -1}
  :is(#tDaily,#tDevices) .stat .sv{font-size:22px}
  :is(#tDaily,#tDevices) .showall{display:flex;width:100%;margin:0 0 12px;min-height:48px;font-size:16px}
  :is(#tDaily,#tDevices) .dmain:not(.open) .sales-p{display:none}
  :is(#tDaily,#tDevices) .cols{grid-template-columns:1fr;gap:0}
  :is(#tDaily,#tDevices) .panel{padding:12px 14px}
  /* on a phone each sale is its own small grid: time | ref and till | total, then the items and how it was paid */
  :is(#tDaily,#tDevices) .sl{display:block}
  :is(#tDaily,#tDevices) .sl .h{display:none}
  :is(#tDaily,#tDevices) .sl .s{display:grid;grid-template-columns:44px minmax(0,1fr) auto;column-gap:8px;border-top:1px solid var(--o-line);padding:10px 0}
  :is(#tDaily,#tDevices) .sl .s>div{border-bottom:0;padding:2px 0}
  :is(#tDaily,#tDevices) .sl .s>.tm{grid-column:1;grid-row:1}
  :is(#tDaily,#tDevices) .sl .s>.rf{grid-column:2;grid-row:1}
  :is(#tDaily,#tDevices) .sl .s>.am{grid-column:3;grid-row:1}
  :is(#tDaily,#tDevices) .sl .s>.it{grid-column:2 / -1;grid-row:2}
  :is(#tDaily,#tDevices) .sl .s>.pd{grid-column:2 / -1;grid-row:3;color:var(--o-dim);font-size:13.5px}
  :is(#tDaily,#tDevices) .phonebar{display:flex;position:sticky;bottom:0;padding:10px 16px 14px;border-top:1px solid var(--o-line);background:var(--o-surface)}
  :is(#tDaily,#tDevices) .phonebar .btn{flex:1;min-height:48px;font-size:16px}
}
/* 1.4.0 stage B2: owner Devices (design owner\03-devices.html): the tills with a name field each, last seen, Revoke; the
   cashier PIN and Pair a new till beside them. */
#tDevices .dgrid{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:16px;align-items:start}
#tDevices .dv{display:grid;grid-template-columns:minmax(0,1fr) 190px 110px;column-gap:14px;align-items:center}
#tDevices .dv .h,#tDevices .dv .d{display:contents}
#tDevices .dv .h div{font:800 11.5px/1 var(--font);letter-spacing:.07em;text-transform:uppercase;color:var(--o-dim);padding:6px 0 8px;border-bottom:1px solid var(--o-line)}
#tDevices .dv .d>div{padding:10px 0;border-bottom:1px solid var(--o-line);min-width:0;align-self:stretch;display:flex;flex-direction:column;justify-content:center}
#tDevices .dv .nm .fld{min-height:44px;width:100%;padding:0 12px;border-radius:10px;border:1.5px solid var(--o-line-2);background:var(--o-surface);color:var(--o-ink);font:700 16px var(--font)}
#tDevices .dv .nm small,#tDevices .dv .seen small{display:block;font-size:12.5px;color:var(--o-dim);margin-top:5px}
#tDevices .dv .seen{font-size:14.5px;font-weight:650;display:block!important;padding-top:14px!important}
#tDevices .dv .dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:7px;border:2px solid var(--o-dim);vertical-align:0}
#tDevices .dv .dot.on{background:var(--o-on);border-color:var(--o-on)}
#tDevices .dv .d.rv>div{color:var(--o-dim)}
#tDevices .revoke{color:var(--o-red);border-color:var(--o-red)}
#tDevices .act{align-items:flex-end}
#tDevices .panel p{margin:6px 0}
#tDevices .field{min-height:44px;width:100%;max-width:220px;padding:0 12px;border-radius:10px;border:1.5px solid var(--o-line-2);background:var(--o-surface);color:var(--o-ink);font-size:18px;letter-spacing:.2em}
#tDevices .lbl{color:var(--o-dim)}
#tDevices .steps{margin:4px 0 0;padding-left:22px;display:grid;gap:8px;font-size:14.5px}
#tDevices .code{font-family:var(--mono);font-weight:700}
#tDevices .err{color:var(--o-red);min-height:0;margin:4px 0;font-size:14px}
#tDevices .btn:disabled{opacity:1;background:var(--o-bg-2);color:var(--o-dim);border:1.5px dashed var(--o-line-2);cursor:not-allowed}
@media (max-width:600px){
  #tDevices .dtool h2,#tDevices .dtool .sp,#tDevices .dtool .desk{display:none}
  #tDevices .dtool .meta{width:100%}
  #tDevices .dgrid{grid-template-columns:1fr;gap:0}
  #tDevices .dv{display:block}
  #tDevices .dv .h{display:none}
  #tDevices .dv .d{display:grid;grid-template-columns:1fr 112px;column-gap:10px;border-bottom:1px solid var(--o-line);padding:8px 0}
  #tDevices .dv .d>div{border:0;padding:3px 0}
  #tDevices .dv .d .nm{grid-column:1 / -1}
  #tDevices .dv .seen{padding-top:3px!important}
  #tDevices .dv .d .act{grid-column:2;grid-row:2}
  #tDevices .phonebar{display:flex;position:sticky;bottom:0;padding:10px 16px 14px;border-top:1px solid var(--o-line);background:var(--o-surface)}
  #tDevices .phonebar .btn{flex:1;min-height:48px;font-size:16px}
}
/* 1.4.0 stage B2: owner Menu, Add a dish (design owner\01-menu-add.html): a side panel over the dimmed menu; a new dish
   waits in its category as "New" until Save. */
.om{position:relative}
.om .r.new{background:var(--o-check-bg)}
.om .r.new .ro{display:flex;align-items:center;gap:8px;min-height:44px;font-size:15px;font-weight:650}
.om .r.new .ro.alt{font-weight:500}
.om .r.new .c.ra .ro{justify-content:flex-end;font-variant-numeric:tabular-nums}
.om .tag.nw{display:inline-block;font:800 11px/1 var(--font);letter-spacing:.05em;text-transform:uppercase;padding:4px 6px;border-radius:6px;background:var(--o-check);color:#221f18;border:0}
.addwrap{position:fixed;inset:0;z-index:30;display:flex;justify-content:flex-end}
.addscrim{position:absolute;inset:0;background:rgba(34,31,24,.42)}
.addp{position:relative;display:grid;grid-template-rows:auto minmax(0,1fr) auto;width:min(420px,100%);height:100%;background:var(--o-surface);color:var(--o-ink);box-shadow:-12px 0 32px rgba(0,0,0,.18)}
.addp .addh{display:flex;align-items:center;gap:10px;padding:14px 16px 10px 20px;border-bottom:1px solid var(--o-line)}
.addp .addh h2{flex:1;margin:0;font:700 22px/1.1 var(--font-display)}
.addp .ib{width:44px;height:44px;border-radius:10px;font-size:26px;line-height:1;color:var(--o-ink)}
.addp .addb{overflow:auto;padding:6px 20px 16px}
.addp .lbl{display:block;margin:14px 0 6px;font:800 12px/1 var(--font);letter-spacing:.08em;text-transform:uppercase;color:var(--o-dim)}
.addp .fld{width:100%;min-height:44px;padding:0 12px;border-radius:10px;border:1.5px solid var(--o-line-2);background:var(--o-surface);color:var(--o-ink);font-size:16px}
.addp .fld.alt{font-family:var(--font-alt,var(--font))}
.addp .fld.price{text-align:right;font-variant-numeric:tabular-nums}
.addp .two{display:grid;grid-template-columns:120px minmax(0,1fr);gap:12px}
.addp .seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;border:1.5px solid var(--o-line-2);border-radius:10px;overflow:hidden}
.addp .seg button{min-height:44px;font-weight:700;font-size:15px;color:var(--o-ink);background:var(--o-surface)}
.addp .seg button+button{border-left:1.5px solid var(--o-line-2)}
.addp .seg button[aria-checked="true"]{background:var(--o-ink);color:var(--o-bg)}
.addp .hint{margin:16px 0 0;font-size:14px;color:var(--o-dim)}
.addp .err{color:var(--o-red);min-height:0;margin:8px 0 0;font-size:14px}
.addp .addf{display:grid;grid-template-columns:1fr 1.4fr;gap:10px;padding:12px 20px 16px;border-top:1px solid var(--o-line)}
:is(#tDaily) .mform input[type=time],:is(#tDaily) .mform input.txt,:is(#tDaily) .mform input.money{min-height:44px}