/* ============================================================
   StirlingOS — SERVICE FLOOR (POS + KDS + handheld)
   Toast-pattern functional. ZERO brand constraints (v3 directive
   tier 2a: docs/COWORK_TO_CODE_2026-06-11_DESIGN_V3_APPLE_A11Y.md).
   Neutral surfaces, light + dark first-class, color = state only:
     red = held · yellow = sent · green = paid/fulfilled ·
     blue = primary action / ownership · category palette = wayfinding.
   Scoped under .sfx so nothing leaks into the brand/admin surfaces.
   Reference grammar: research/toast_ui_reference/INDEX.md §DESIGN GRAMMAR
   ============================================================ */

/* ---------------- tokens: dark (default — bar ambiance) ---------------- */
.sfx{
  --sf-bg:#0f1115; --sf-panel:#191d24; --sf-panel-2:#222730; --sf-panel-3:#2c323d;
  --sf-text:#f2f4f7; --sf-text-2:#aab2bf; --sf-text-3:#7e8694;
  --sf-line:rgba(255,255,255,.10); --sf-line-soft:rgba(255,255,255,.06);
  --sf-action:#7da7e8; --sf-action-strong:#9db2e8; --sf-action-ink:#0d1322;
  --sf-ownership:#5b8def;
  --sf-held-bg:rgba(178,66,66,.20); --sf-held-line:#c05656;   /* Toast FOH-11: red = held (tint, not heavy fill) */
  --sf-sent-bg:rgba(176,150,52,.18); --sf-sent-line:#c2a23a;  /* Toast FOH-11: yellow = sent (tint) */
  --sf-ok:#4fbf78; --sf-ok-bg:rgba(79,191,120,.16);
  --sf-warn:#e8b13f; --sf-warn-bg:rgba(232,177,63,.16);
  --sf-danger:#e26b6b; --sf-danger-bg:rgba(226,107,107,.16);
  --sf-info:#6fa8dc; --sf-info-bg:rgba(111,168,220,.16);
  --sf-key:#3a414d; --sf-key-press:#4b5462;
  --sf-radius:10px; --sf-shadow:0 6px 20px rgba(0,0,0,.35);
  --sf-focus:0 0 0 3px rgba(125,167,232,.55);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,system-ui,sans-serif;
  color:var(--sf-text);
}
/* ---------------- tokens: light ---------------- */
.sfx[data-sf-theme="light"]{
  --sf-bg:#f2f3f5; --sf-panel:#ffffff; --sf-panel-2:#eceef1; --sf-panel-3:#dfe2e7;
  --sf-text:#1c1f24; --sf-text-2:#4f565f; --sf-text-3:#71787f;
  --sf-line:rgba(20,24,30,.14); --sf-line-soft:rgba(20,24,30,.07);
  --sf-action:#2f6fd0; --sf-action-strong:#2059b3; --sf-action-ink:#ffffff;
  --sf-ownership:#2f6fd0;
  --sf-held-bg:#f6d9d9; --sf-held-line:#c23b3b;
  --sf-sent-bg:#f3e9c4; --sf-sent-line:#9a7d12;
  --sf-ok:#1f8a4d; --sf-ok-bg:#e2f4e9;
  --sf-warn:#a36f06; --sf-warn-bg:#faf0d4;
  --sf-danger:#c23b3b; --sf-danger-bg:#fae3e3;
  --sf-info:#2563ab; --sf-info-bg:#e3eefa;
  --sf-key:#e4e6ea; --sf-key-press:#d2d6dc;
  --sf-shadow:0 2px 10px rgba(20,24,30,.12);
  --sf-focus:0 0 0 3px rgba(47,111,208,.45);
}
.sfx[data-sf-theme="light"] .sf-held-row{color:#5d1f1f}
.sfx[data-sf-theme="light"] .sf-sent-row{color:#574607}

.sfx, .sfx *{box-sizing:border-box}
/* :where() keeps this reset at specificity 0,0,1 so the .sf-* component bg/color rules (0,1,0) win.
   Plain `.sfx button` (0,1,1) would override every component background -> transparent buttons. */
:where(.sfx) button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.sfx :focus-visible{outline:none;box-shadow:var(--sf-focus);border-radius:8px}
.sfx .sf-mono{font-variant-numeric:tabular-nums}
.sfx .sf-muted{color:var(--sf-text-2)}

/* page fill behind the POS while .sfx is mounted in #view */
.sfx.sf-root{background:var(--sf-bg);border-radius:14px;padding:14px;min-height:calc(100vh - 130px)}
/* full-bleed POS: drop the card radius and fill the viewport (no app chrome wraps it now). */
.app[data-chrome="pos"] .sfx.sf-root{border-radius:0;min-height:100vh;padding:14px 18px}
/* ☰ back-office toggle in the POS top row (only rendered for staff with back-office access). */
.sf-menu-btn{font-size:17px;line-height:1;padding-left:12px;padding-right:12px}

/* ---------------- top action bar (FOH-1: All checks · Switch user · ⋮) ---------------- */
.sf-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.sf-top .sf-spacer{flex:1}
.sf-chip{min-height:44px;padding:10px 16px;border-radius:10px;background:var(--sf-panel-2);
  color:var(--sf-text);font-size:14px;font-weight:600;display:inline-flex;align-items:center;gap:8px;border:1px solid transparent}
.sf-chip:active{background:var(--sf-panel-3)}
.sf-chip.active{border-color:var(--sf-action);color:var(--sf-action)}
.sf-chip.sf-quiet{background:transparent;border:1px solid var(--sf-line);color:var(--sf-text-2)}

/* ---------------- main layout: check rail LEFT (Toast law), menu RIGHT ---------------- */
.sf-layout{display:grid;grid-template-columns:380px minmax(0,1fr);gap:14px;align-items:start}

/* ---------------- menu side ---------------- */
.sf-menu{min-width:0}
.sf-search-row{display:flex;gap:8px;margin-bottom:10px}
.sf-search{flex:1;min-height:48px;background:var(--sf-panel);border:1px solid var(--sf-line);border-radius:24px;
  padding:10px 20px;color:var(--sf-text);font-size:15px;font-family:inherit}
.sf-search::placeholder{color:var(--sf-text-3)}
.sf-search:focus{outline:none;box-shadow:var(--sf-focus)}

/* category tile grid (FOH-1: two rows of color-keyed tiles) */
.sf-cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:8px;margin-bottom:12px}
.sf-cat{min-height:56px;border-radius:8px;padding:8px 12px;font-size:14px;font-weight:700;text-align:left;
  color:#fff;display:flex;align-items:flex-end;line-height:1.15;border:2px solid transparent;
  text-shadow:0 1px 2px rgba(0,0,0,.35)}
.sf-cat.active{border-color:#fff;box-shadow:0 0 0 2px var(--sf-action)}
.sf-cat:active{filter:brightness(1.12)}
.sf-cat.sf-cat-speed{background:var(--sf-panel-3);color:var(--sf-text);text-shadow:none}
.sf-cat.sf-cat-speed.active{box-shadow:0 0 0 2px var(--sf-action)}
/* WAYFINDING palette (assigned by name hash in pos.js). Categories are color-coded for wayfinding ONLY —
   never state. The hues deliberately AVOID the state colors red(held)/yellow(sent)/green(done)/blue(primary)
   per the v3 grammar + hardware directive. Tint raised from .22 -> ~.5 (Josh audit: categories read too muted
   vs Toast) so each category has clear color identity, while staying a PASTEL tint (not a solid state fill) —
   the state-hue reservation is preserved. */
.sf-c0{background:rgba(124,108,168,.5)}.sf-c1{background:rgba(79,138,160,.5)}
.sf-c2{background:rgba(168,108,142,.5)}.sf-c3{background:rgba(108,123,168,.5)}
.sf-c4{background:rgba(168,139,108,.5)}.sf-c5{background:rgba(96,108,168,.5)}
.sf-c6{background:rgba(142,108,168,.5)}.sf-c7{background:rgba(120,124,132,.52)}
.sf-c8{background:rgba(168,128,108,.5)}.sf-c9{background:rgba(120,134,150,.5)}
.sf-c10{background:rgba(150,138,100,.5)}.sf-c11{background:rgba(168,108,154,.5)}
.sf-c12{background:rgba(168,108,116,.5)}.sf-c13{background:rgba(140,96,140,.5)}

/* ---- floor plan / table service (FOH-3): area tabs + spatial map of colored table tiles ---- */
.sf-floor{display:flex;flex-direction:column;gap:10px;flex:1;min-height:0}
.sf-floor-banner{background:rgba(214,69,69,.14);border:1px solid rgba(214,69,69,.4);color:#f0b3b3;
  border-radius:8px;padding:8px 12px;font-size:12.5px}
.sf-floor-areas{flex-wrap:wrap}
.sf-floor-canvas{position:relative;width:100%;margin:0 auto;flex:1;min-height:200px;border:1px solid var(--sf-line-soft);
  border-radius:12px;background:var(--sf-panel);background-image:radial-gradient(rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:32px 32px;overflow:hidden}
/* tiles live on a fixed 1000x640 virtual stage, scaled to fit -> circles stay round, no clip/scroll on PAR */
.sf-floor-stage{position:absolute;left:50%;top:50%;width:1000px;height:640px;transform-origin:center center}
.sf-tile{position:absolute;border:1.5px solid var(--sf-line);background:var(--sf-panel-2);color:var(--sf-ink);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:6px;
  font-size:12px;cursor:pointer;transition:transform .06s,box-shadow .06s}
.sf-tile:active{transform:scale(.97)}
.sf-tile-label{font-weight:700;font-size:15px;line-height:1}
.sf-tile-meta{font-size:10.5px;opacity:.8}
.sf-tile-amt{font-size:11px;font-weight:600}
.sf-tile.free{border-style:dashed;opacity:.78}
.sf-tile.free .sf-tile-meta{color:var(--sf-ink-dim)}
/* occupied tiles inherit the service-floor age ramp: fresh=green, old=amber, late=pink (color=state) */
.sf-tile.occ.fresh{background:rgba(76,160,92,.28);border-color:rgba(76,160,92,.9)}
.sf-tile.occ.old{background:rgba(206,140,42,.30);border-color:rgba(206,140,42,.95)}
.sf-tile.occ.late{background:rgba(190,84,120,.30);border-color:rgba(190,84,120,.95)}
/* ---- floor EDIT mode (v1.1 drag-and-drop editor) ---- */
.sf-floor{position:relative}
.sf-floor-actions{display:flex;gap:8px;align-items:center}
.sf-grow{flex:1}
.sf-edit-banner{background:rgba(74,124,196,.16);border-color:rgba(74,124,196,.5);color:#bcd4ef}
.sf-edit-tile{cursor:move;touch-action:none}
.sf-tile-sel{box-shadow:0 0 0 2px var(--sf-accent,#5b8def);z-index:6}
.sf-tile-handle{position:absolute;right:-7px;bottom:-7px;width:24px;height:24px;border-radius:50%;
  background:var(--sf-accent,#5b8def);border:2px solid #fff;cursor:nwse-resize;touch-action:none}
.sf-edit-save{background:var(--sf-accent,#5b8def);border-color:var(--sf-accent,#5b8def);color:#fff;font-weight:700}
.sf-edit-props{position:absolute;right:14px;bottom:14px;width:236px;background:var(--sf-panel-2);
  border:1px solid var(--sf-line);border-radius:12px;padding:12px;box-shadow:0 8px 28px rgba(0,0,0,.45);z-index:12}
.sf-ep-row{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.sf-ep-row label{width:48px;font-size:12px;color:var(--sf-ink-dim)}
.sf-ep-input{flex:1;background:var(--sf-panel);border:1px solid var(--sf-line);color:var(--sf-ink);border-radius:8px;padding:8px;font-size:14px}
.sf-ep-seats{min-width:30px;text-align:center;font-weight:700;font-size:15px}
.sf-ep-step{min-width:42px;justify-content:center}
.sf-ep-del{width:100%;justify-content:center;color:#e98080;border-color:rgba(214,69,69,.5)}
.sf-ep-kind{text-transform:capitalize;font-weight:700}
/* ---- floor decor objects (Phase B: the room shell) ---- */
.sf-obj{position:absolute;display:flex;align-items:center;justify-content:center;transform-origin:center center;
  color:var(--sf-ink-dim);pointer-events:none;z-index:0;overflow:hidden}
.sf-obj.sf-edit-tile{pointer-events:auto;cursor:move;touch-action:none}
.sf-obj-cap{font-weight:700;letter-spacing:.5px;font-size:12px;color:var(--sf-ink);opacity:.9}
.sf-obj-wall{background:#3a3f49;border-radius:3px}
.sf-obj-divider{background:repeating-linear-gradient(90deg,#3a3f49 0 11px,transparent 11px 19px)}
.sf-obj-bar{background:rgba(150,110,70,.30);border:1px solid rgba(196,150,90,.6);border-radius:8px}
.sf-obj-pool{background:rgba(70,140,200,.20);border:1px solid rgba(110,170,220,.6);border-radius:16px}
.sf-obj-plant{background:rgba(80,150,90,.35);border:1px solid rgba(110,180,110,.6);border-radius:50%}
.sf-obj-entry{background:transparent;border:2px dashed var(--sf-line);border-radius:4px}
.sf-obj-chair{background:rgba(160,166,176,.22);border:1px solid rgba(195,200,210,.5);border-radius:50%}
.sf-obj-lounge{background:rgba(110,140,172,.26);border:1px solid rgba(150,182,212,.55);border-radius:9px 9px 15px 15px}
.sf-obj-cabana{background:rgba(92,128,98,.24);border:1px solid rgba(132,176,138,.6);border-radius:10px}
/* searchable member picker (Open Tab) */
.sf-mp-wrap{position:relative}
.sf-mempick{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:20;max-height:260px;overflow:auto;border:1px solid var(--sf-line);border-radius:10px;background:var(--sf-panel-2,#222730);box-shadow:0 12px 30px rgba(0,0,0,.5);-webkit-overflow-scrolling:touch}
.sf-mempick[hidden]{display:none}
.sf-mp-row{display:flex;justify-content:space-between;align-items:center;gap:10px;width:100%;text-align:left;background:transparent;border:0;border-bottom:1px solid var(--sf-line-soft);color:var(--sf-text,#eef);padding:11px 14px;font-size:14px;cursor:pointer;min-height:46px}
.sf-mp-row:active{background:rgba(255,255,255,.05)}
.sf-mp-row.sel{background:var(--sf-action,#2f6fd0);color:#fff}
.sf-mp-tier{font-size:12px;opacity:.7;white-space:nowrap}
.sf-mp-row.sel .sf-mp-tier{opacity:.9}
.sf-mp-more{padding:10px 14px;font-size:12px;color:var(--sf-text-3,#8a92a0);text-align:center}
/* enable-table-service button in the floor "not enabled" banner */
.sf-floor-disabled{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.sf-floor-enable{margin-left:auto;background:#2e9c5a;border-color:#2e9c5a;color:#fff;font-weight:700}
.sf-obj-label{background:transparent;color:var(--sf-ink);font-weight:700;font-size:14px}
.sf-obj-sel{box-shadow:0 0 0 2px var(--sf-accent,#5b8def);z-index:5}
.sf-obj-handle{position:absolute;right:-7px;bottom:-7px;width:24px;height:24px;border-radius:50%;
  background:var(--sf-accent,#5b8def);border:2px solid #fff;cursor:nwse-resize;touch-action:none;pointer-events:auto}
.sf-floor-palette{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.sf-pal-lab{font-size:12px;color:var(--sf-ink-dim);margin-right:2px}
.sf-btn-danger{color:#e98080;border-color:rgba(214,69,69,.5)}
.sf-help{font-size:11.5px;color:var(--sf-ink-dim);margin-top:6px}
.sf-ep-head{display:flex;justify-content:flex-end;margin-bottom:8px}
.sf-ep-x{background:rgba(255,255,255,.06);border:1px solid var(--sf-line);color:var(--sf-text,#eef);border-radius:8px;padding:6px 16px;font-size:13px;font-weight:600;cursor:pointer}

/* dense item grid (FOH-1: compact dark buttons, name + price, 5-6 across) */
.sf-items{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.sf-item{min-height:64px;border-radius:8px;background:var(--sf-panel-2);border:1px solid var(--sf-line-soft);
  padding:8px 10px;text-align:left;display:flex;flex-direction:column;justify-content:space-between;gap:4px}
.sf-item:active{background:var(--sf-panel-3)}
.sf-item .nm{font-size:13.5px;font-weight:600;line-height:1.2;color:var(--sf-text)}
.sf-item .pr{font-size:12.5px;color:var(--sf-text-2);font-variant-numeric:tabular-nums}
.sf-item.sf-86{opacity:.38}
.sf-item .x86{font-size:10px;font-weight:800;letter-spacing:1px;color:var(--sf-danger)}
.sf-empty{padding:46px 16px;text-align:center;color:var(--sf-text-3);font-size:14px;grid-column:1/-1}

/* ---------------- check rail (FOH-1/FOH-1_06 anatomy) ---------------- */
.sf-check{background:var(--sf-panel);border:1px solid var(--sf-line-soft);border-radius:12px;display:flex;
  flex-direction:column;max-height:calc(100vh - 150px);overflow:hidden;box-shadow:var(--sf-shadow);position:sticky;top:84px}
.sf-ch-head{padding:12px 14px;border-bottom:1px solid var(--sf-line-soft);display:flex;flex-direction:column;gap:8px}
.sf-ch-id{display:flex;align-items:center;gap:8px;font-size:16px;font-weight:800}
.sf-ch-id .sf-tablechip{font-size:12px;font-weight:700;background:var(--sf-panel-3);border-radius:6px;padding:3px 8px;color:var(--sf-text-2)}
.sf-ch-meta{display:flex;gap:6px;flex-wrap:wrap}
.sf-pill{min-height:36px;padding:7px 12px;border-radius:8px;background:var(--sf-panel-2);font-size:12.5px;font-weight:600;
  color:var(--sf-text-2);display:inline-flex;align-items:center;gap:6px}
.sf-pill:active{background:var(--sf-panel-3)}
.sf-checktabs{display:flex;gap:6px;flex-wrap:wrap}
.sf-checktab{min-height:36px;padding:6px 12px;border-radius:8px;border:1px solid var(--sf-line);font-size:12px;color:var(--sf-text-2)}
.sf-checktab.active{border-color:var(--sf-action);color:var(--sf-action);font-weight:700}
.sf-ch-body{flex:1;overflow:auto;padding:2px 0}
/* ---- seat groups (Toast FOH-10): Share / Seat N headers + add-seat ---- */
.sf-seatgrp{border-bottom:1px solid var(--sf-line-soft)}
.sf-seathdr{display:flex;align-items:center;gap:6px;padding:6px 14px;background:var(--sf-panel-2);
  font-size:11.5px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--sf-text-3)}
.sf-seathdr.ro{opacity:.6}
.sf-seathdr.active{background:rgba(79,138,160,.28);color:var(--sf-ink)}
.sf-seatsel{flex:1;text-align:left;font:inherit;color:inherit;letter-spacing:inherit}
.sf-seatedit{font-size:13px;opacity:.7;padding:0 4px}
.sf-seatsub{margin-left:auto;font-size:12px;font-weight:700;color:var(--sf-text-2);letter-spacing:0;text-transform:none}
.sf-seat-empty{padding:8px 14px;color:var(--sf-text-3);font-size:12px;font-style:italic}
.sf-coursegrp{border-bottom:1px solid var(--sf-line-soft)}
.sf-coursehdr{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 14px;background:var(--sf-panel-2);
  font-size:11.5px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--sf-text-3)}
.sf-course-fire{font:inherit;letter-spacing:.3px;text-transform:none;color:var(--sf-action);border:1px solid var(--sf-action);
  background:transparent;border-radius:7px;padding:3px 10px;min-height:28px;cursor:pointer}
.sf-course-fire:active{background:var(--sf-action);color:var(--sf-action-ink)}
.sf-addseat{width:100%;padding:10px;background:var(--sf-panel-2);border:1px dashed var(--sf-line);
  border-radius:8px;color:var(--sf-action);font-size:13px;font-weight:600;margin:8px 0}
.sf-seatpick{display:flex;flex-wrap:wrap;gap:8px}
/* check lines + Toast item-state colors (FOH-11: red=held, yellow=sent) */
.sf-line{display:flex;flex-wrap:wrap;gap:8px;padding:10px 14px;border-bottom:1px solid var(--sf-line-soft);font-size:13.5px;align-items:flex-start}
.sf-line .q{min-width:26px;height:24px;background:var(--sf-panel-3);border-radius:6px;display:inline-flex;align-items:center;
  justify-content:center;font-size:12px;font-weight:700;flex:none}
.sf-line .sf-l-main{flex:1;min-width:0}
.sf-line .nm-txt{font-weight:600;line-height:1.25}
.sf-line .mods{font-size:11.5px;color:var(--sf-text-2);margin-top:2px}
/* item NOTE (pos_item_notes) — special request / ALLERGY. NOT muted like mods: amber warn callout so it reads at a
   glance on the check rail (mirrors the KDS .kds-note). Wraps a long note; never overflows the line. */
.sf-line .sf-l-note{flex-basis:100%;font-size:12px;font-weight:700;color:var(--sf-warn);background:var(--sf-warn-bg);
  border-radius:5px;padding:4px 8px;margin-top:2px;line-height:1.3;overflow-wrap:anywhere}
.sf-line .sf-l-amt{text-align:right;flex:none}
/* Count Bills denomination calculator (FOH-12_03) — drawer-close cash tally. One row per denomination: label · qty
   input · live subtotal. Touch-friendly (≥44px), fits the 360px PAR handheld. */
.dc-denom{display:flex;align-items:center;gap:10px;padding:5px 0}
.dc-denom .dc-denom-l{flex:0 0 56px;font-weight:600;color:var(--sf-text)}
.dc-denom .dc-denom-q{flex:1;min-width:0;text-align:center;min-height:44px}
.dc-denom .dc-denom-sub{flex:0 0 84px;text-align:right;color:var(--sf-text-2)}
.dc-denom.dc-denom-tot{border-top:1px solid var(--sf-line);margin-top:6px;padding-top:8px;font-size:15px}
.sf-line .sf-l-acts{display:flex;gap:4px;justify-content:flex-end;margin-top:4px}
.sf-line .sf-l-acts button{min-width:44px;min-height:32px;padding:4px 8px;border-radius:6px;font-size:11px;
  font-weight:700;color:var(--sf-text-2);background:var(--sf-panel-2)}
.sf-line .sf-l-acts button:active{background:var(--sf-panel-3)}
.sf-held-row{background:var(--sf-held-bg);border-left:3px solid var(--sf-held-line)}
.sf-sent-row{background:var(--sf-sent-bg);border-left:3px solid var(--sf-sent-line)}
.sf-line[data-line]{cursor:pointer}
.sf-line.sf-sel{box-shadow:inset 0 0 0 2px var(--sf-action)}   /* selected for Hold/Send (Toast firing) */
.sf-line.sf-active:not(.sf-sel){box-shadow:inset 0 0 0 1px var(--sf-line)}   /* tap-revealed action line (subtle) */
.sf-sent-note{font-size:10.5px;color:var(--sf-text-2);text-align:right;padding:3px 14px;border-bottom:1px solid var(--sf-line-soft)}
.sf-tag{font-size:9.5px;font-weight:800;letter-spacing:.6px;padding:2px 6px;border-radius:6px;margin-left:6px;vertical-align:1px}
.sf-tag-held{background:var(--sf-danger-bg);color:var(--sf-danger)}
.sf-tag-sent{background:var(--sf-warn-bg);color:var(--sf-warn)}
.sf-tag-void{background:var(--sf-danger-bg);color:var(--sf-danger);text-decoration:none}
.sf-tag-comp{background:var(--sf-ok-bg);color:var(--sf-ok)}
.sf-tag-paid{background:var(--sf-ok-bg);color:var(--sf-ok)}
.sf-ch-empty{padding:46px 18px;text-align:center;color:var(--sf-text-3);font-size:13.5px}

/* footer: Hold/Stay/Send verbs + totals + big Pay (FOH-1_08 orange-boxed anatomy) */
.sf-ch-foot{border-top:1px solid var(--sf-line);padding:10px 14px 12px;background:var(--sf-panel)}
.sf-verbs{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-bottom:10px}
.sf-verb{min-height:48px;border-radius:10px;background:var(--sf-panel-2);font-size:14px;font-weight:700;
  display:inline-flex;align-items:center;justify-content:center;gap:7px}
.sf-verb:active{background:var(--sf-panel-3)}
.sf-verb .ic{font-size:13px}
.sf-verb.sf-verb-hold .ic{color:var(--sf-danger)}
.sf-verb.sf-verb-stay .ic{color:var(--sf-warn)}
.sf-verb.sf-verb-send .ic{color:var(--sf-ok)}
.sf-totrow{display:flex;justify-content:space-between;font-size:13px;color:var(--sf-text-2);padding:3px 0}
.sf-totrow b{color:var(--sf-text);font-size:14px}
.sf-totrow.due{color:var(--sf-text);font-weight:700}
/* FOH-8 per-discount rail row with an inline remove (✕) affordance */
.sf-disc-row>span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:60%}
.sf-disc-amt{display:inline-flex;align-items:center;gap:8px}
/* per-discount removable DETAIL rows sit UNDER the effective aggregate "Discount –$X" line (D8: keep the rolled-up
   effective total; faces can sum higher under capping) — indent + mute so they read as subordinate detail. */
.sf-disc-detail{padding-left:14px}
.sf-disc-detail>span:first-child{color:var(--sf-text-2);font-size:12px}
.sf-disc-detail .sf-mono{font-size:12px;color:var(--sf-text-2)}
.sf-disc-x{min-width:32px;min-height:32px;border:0;border-radius:6px;background:transparent;color:var(--sf-text-2);font-size:13px;line-height:1;cursor:pointer;padding:0}
.sf-disc-x:hover,.sf-disc-x:active{background:var(--sf-danger,#c0162e);color:#fff}
.sf-payrow{display:grid;grid-template-columns:1fr 1.6fr;gap:8px;margin-top:10px}
.sf-payrow.single{grid-template-columns:1fr}
.sf-btn-line{min-height:52px;border-radius:10px;border:1.5px solid var(--sf-action);color:var(--sf-action);
  font-size:15px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;background:transparent}
.sf-btn-line:active{background:var(--sf-info-bg)}
.sf-btn-pay{min-height:52px;border-radius:10px;background:var(--sf-action);color:var(--sf-action-ink);
  font-size:16px;font-weight:800;display:inline-flex;align-items:center;justify-content:center}
.sf-btn-pay:active{background:var(--sf-action-strong)}
.sf-btn-pay:disabled{opacity:.45;pointer-events:none}
.sf-footnote-btn{width:100%;margin-top:8px;min-height:44px;border-radius:8px;color:var(--sf-text-3);font-size:12.5px;font-weight:600}
.sf-footnote-btn:active{background:var(--sf-panel-2)}
.sf-status-banner{margin:0 0 10px;border-radius:8px;padding:8px 12px;font-size:12px;font-weight:800;letter-spacing:.8px;text-align:center}
.sf-status-banner.paid{background:var(--sf-ok-bg);color:var(--sf-ok)}
.sf-status-banner.reopened{background:var(--sf-warn-bg);color:var(--sf-warn)}
.sf-status-banner.closed{background:var(--sf-panel-2);color:var(--sf-text-2)}

/* ---------------- All Checks view (FOH-2_08 / FOH-2_02) ---------------- */
.sf-ac-tabs{display:flex;gap:8px;align-items:center;margin-bottom:10px;flex-wrap:wrap}
.sf-ac-tab{min-height:44px;padding:9px 18px;border-radius:22px;background:var(--sf-panel-2);font-size:14px;font-weight:700;color:var(--sf-text-2)}
.sf-ac-tab.active{background:var(--sf-panel-3);color:var(--sf-text)}
.sf-ac-tab .n{display:inline-block;min-width:20px;padding:1px 6px;margin-left:6px;border-radius:10px;background:var(--sf-bg);font-size:11.5px}
.sf-ac-tools{display:flex;gap:8px;margin-bottom:10px;flex-wrap:wrap}
.sf-ac-tools .sf-search{min-width:200px}
.sf-select{min-height:48px;background:var(--sf-panel);border:1px solid var(--sf-line);border-radius:10px;
  color:var(--sf-text);font-size:14px;font-family:inherit;padding:8px 12px}
.sf-ac-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:8px}
.sf-ac-card{display:flex;gap:10px;background:var(--sf-panel);border:1px solid var(--sf-line-soft);border-radius:10px;
  padding:10px 12px;text-align:left;align-items:center;min-height:72px;position:relative;overflow:hidden}
.sf-ac-card:active{background:var(--sf-panel-2)}
.sf-ac-card.mine::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--sf-ownership)}
.sf-ac-num{flex:none;text-align:center;min-width:54px}
.sf-ac-num b{font-size:15px;display:block}
.sf-ac-num .sf-ac-dine{display:inline-block;margin-top:4px;font-size:9.5px;font-weight:800;letter-spacing:.5px;
  padding:2px 6px;border-radius:5px;background:#a25b2a;color:#fff}
.sf-ac-main{flex:1;min-width:0}
.sf-ac-main .t{font-size:13.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sf-ac-main .s{font-size:11.5px;color:var(--sf-text-2);margin-top:3px}
.sf-ac-amt{flex:none;text-align:right;font-size:14px;font-weight:700;font-variant-numeric:tabular-nums}
.sf-ac-amt .pm{display:block;font-size:10px;font-weight:800;margin-top:3px}
.sf-ac-amt .pm.paid{color:var(--sf-ok)} .sf-ac-amt .pm.due{color:var(--sf-warn)}

/* ---------------- payment screen (FOH-9 / FOH-2_07) ---------------- */
.sfx .modal-head,.sfx .modal-body,.sfx .modal-foot{font-family:inherit}
.sfx.sf-modal{background:var(--sf-bg);border-radius:18px;padding:0}
.sfx.sf-modal .modal-head{padding:16px 20px;border-bottom:1px solid var(--sf-line-soft);font-size:18px;font-weight:800;color:var(--sf-text)}
.sfx.sf-modal .modal-body{padding:16px 20px;color:var(--sf-text)}
.sfx.sf-modal .modal-foot{padding:12px 20px;border-top:1px solid var(--sf-line-soft);display:flex;gap:10px;justify-content:flex-end}
.sfx.sf-modal label.fld{display:block;margin:12px 0}
.sfx.sf-modal label.fld span{display:block;font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--sf-text-2);margin-bottom:6px;font-weight:700}
.sfx.sf-modal .input,.sfx.sf-modal select{width:100%;background:var(--sf-panel);border:1px solid var(--sf-line);border-radius:10px;
  padding:12px 14px;color:var(--sf-text);font-size:15px;min-height:48px;font-family:inherit}
.sfx.sf-modal .input:focus,.sfx.sf-modal select:focus{outline:none;box-shadow:var(--sf-focus)}
.sf-btn{min-height:48px;padding:10px 20px;border-radius:10px;font-size:14.5px;font-weight:700;display:inline-flex;align-items:center;justify-content:center}
.sf-btn-primary{background:var(--sf-action);color:var(--sf-action-ink)}
.sf-btn-primary:active{background:var(--sf-action-strong)}
.sf-btn-primary:disabled{opacity:.45;pointer-events:none}
.sf-btn-ghost{background:var(--sf-panel-2);color:var(--sf-text)}
.sf-btn-ghost:active{background:var(--sf-panel-3)}

#modal-box:has(.sfx.sf-modal){background:transparent;border:none;box-shadow:var(--sf-shadow)}
#modal-box:has(.sf-paywide){width:880px;max-width:96vw}

.sf-balance-line{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:12px}
.sf-balance-line .lbl{font-size:13px;color:var(--sf-text-2);font-weight:700}
.sf-balance-line .amt{font-size:24px;font-weight:800;font-variant-numeric:tabular-nums}
.sf-pay-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(180px,1fr);gap:14px}
.sf-amt-display{display:grid;grid-template-columns:1fr 1.6fr;gap:8px;margin-bottom:10px}
.sf-amt-cell{background:var(--sf-panel);border:1px solid var(--sf-line);border-radius:10px;padding:8px 12px}
.sf-amt-cell .l{font-size:10.5px;letter-spacing:.8px;text-transform:uppercase;color:var(--sf-text-2);font-weight:700}
.sf-amt-cell .v{font-size:22px;font-weight:800;font-variant-numeric:tabular-nums;margin-top:2px}
.sf-amt-cell.entry{border-color:var(--sf-action)}
.sf-keypad{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.sf-key{min-height:62px;border-radius:10px;background:var(--sf-key);font-size:22px;font-weight:700;color:var(--sf-text);
  display:inline-flex;align-items:center;justify-content:center}
.sf-key:active{background:var(--sf-key-press)}
.sf-key.sf-qc{background:var(--sf-panel-2);font-size:18px;font-weight:800}   /* quick-cash column (FOH-9) */
.sf-key.sf-qc:active{background:var(--sf-panel-3)}
.sf-tenders{display:flex;flex-direction:column;gap:8px}
.sf-tender{min-height:52px;border-radius:10px;background:var(--sf-panel-2);font-size:14.5px;font-weight:700;
  display:flex;align-items:center;gap:10px;padding:8px 14px;text-align:left;border:2px solid transparent}
.sf-tender:active{background:var(--sf-panel-3)}
.sf-tender.sel{background:var(--sf-action);color:var(--sf-action-ink);border-color:var(--sf-action)}
.sf-change-note{margin-top:8px;font-size:13px;font-weight:700;color:var(--sf-ok);min-height:18px}
.sf-tipline{display:flex;justify-content:space-between;align-items:center;background:var(--sf-panel);
  border:1px solid var(--sf-line-soft);border-radius:10px;padding:10px 14px;margin-bottom:10px}
.sf-tipline .v{font-weight:800;font-variant-numeric:tabular-nums}
.sf-tipline button{min-height:36px;padding:6px 12px;border-radius:8px;background:var(--sf-panel-2);font-size:12.5px;font-weight:700;color:var(--sf-action)}

/* ---------------- tip screen (FOH-2_05) ---------------- */
.sf-tip-title{text-align:center;font-size:22px;font-weight:700;margin:8px 0 2px}
.sf-tip-total{text-align:center;font-size:17px;color:var(--sf-text-2);margin-bottom:18px}
.sf-tip-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:10px}
.sf-tip-btn{min-height:84px;border-radius:10px;background:var(--sf-panel-2);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:4px;border:2px solid transparent}
.sf-tip-btn:active{background:var(--sf-panel-3)}
.sf-tip-btn.sel{border-color:var(--sf-action)}
.sf-tip-btn .p{font-size:24px;font-weight:800}
.sf-tip-btn .d{font-size:14px;color:var(--sf-text-2);font-variant-numeric:tabular-nums}
.sf-tip-row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.sf-tip-alt{min-height:56px;border-radius:10px;background:var(--sf-panel-2);font-size:16px;font-weight:700}
.sf-tip-alt:active{background:var(--sf-panel-3)}
.sf-tip-alt.sel{box-shadow:inset 0 0 0 2px var(--sf-action)}
.sf-custom-tip{margin-top:10px}

/* ---------------- receipt screen (FOH-2: No receipt / Print / Text / Email) ---------------- */
.sf-receipt-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:8px}
.sf-receipt-opt{min-height:84px;border-radius:10px;background:var(--sf-panel-2);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:6px;font-size:15px;font-weight:700}
.sf-receipt-opt .ic{font-size:22px}
.sf-receipt-opt:active{background:var(--sf-panel-3)}
.sf-receipt-opt:disabled{opacity:.4;pointer-events:none}
.sf-receipt-opt .soon{font-size:10px;font-weight:800;letter-spacing:.6px;color:var(--sf-text-3)}
/* FOH-2 guest Tip screen (plan pos_tip_receipt_screen): suggested-% buttons highest-first, Custom + No tip below. */
.sf-tip-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-top:10px}
.sf-tip-opt{min-height:92px;border-radius:10px;background:var(--sf-panel-2);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:3px;font-weight:700;color:var(--sf-text);border:1px solid transparent}
.sf-tip-opt b{font-size:22px;font-weight:800}
.sf-tip-opt .amt{font-size:15px}
.sf-tip-opt .tot{font-size:11px;color:var(--sf-text-3)}
.sf-tip-opt:first-child{border-color:var(--sf-accent,#c5a55a)}   /* highest % visually prioritized */
.sf-tip-opt:active{background:var(--sf-panel-3)}
.sf-tip-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.sf-tip-row .sf-receipt-opt{min-height:56px}

/* ---------------- tender grid used by split/even-split modals ---------------- */
.sfx .tender-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.sfx .tender{min-height:52px;padding:14px;border:1px solid var(--sf-line);border-radius:10px;text-align:center;
  font-size:14px;font-weight:700;color:var(--sf-text);background:var(--sf-panel-2)}
.sfx .tender:active,.sfx .tender.sel{border-color:var(--sf-action);color:var(--sf-action)}
.sfx .cp-row{display:flex;justify-content:space-between;font-size:13.5px;margin:6px 0;color:var(--sf-text-2)}
.sfx .eyebrow{font-size:11px;letter-spacing:1.4px;text-transform:uppercase;color:var(--sf-text-2);font-weight:800}
.sfx .muted{color:var(--sf-text-2)}
.sfx .mono{font-variant-numeric:tabular-nums}

/* ---------------- handheld (375–430px: Toast Go pattern, FOH-1_06/FOH-1_10) ---------------- */
@media(max-width:760px){
  .sf-layout{grid-template-columns:1fr}
  .sfx.sf-root{padding:10px;min-height:0}
  /* check stacks ON TOP, collapsible body, menu sheet below */
  .sf-check{position:static;max-height:none;order:-1}
  .sf-ch-body{max-height:32vh}
  .sf-cats{grid-template-columns:repeat(auto-fill,minmax(104px,1fr))}
  .sf-cat{min-height:52px;font-size:13px}
  .sf-items{grid-template-columns:repeat(auto-fill,minmax(124px,1fr))}
  .sf-pay-grid{grid-template-columns:1fr}
  .sf-key{min-height:54px}
  .sf-tenders{flex-direction:row;flex-wrap:wrap}
  .sf-tender{flex:1 1 44%}
  .sf-ac-grid{grid-template-columns:1fr}
  .sf-verbs .sf-verb{font-size:13px;min-height:52px}
  /* Handheld (V2s Plus) tap-target floor: every interactive control >= 48px (hardware directive). */
  .sf-top .sf-chip{padding:12px 14px;font-size:13px;min-height:48px}
  .sf-checktab{min-height:48px;padding:10px 14px}
  .sf-pill{min-height:48px;min-width:48px;justify-content:center}
  .sf-item{min-height:60px}
  .sf-line{padding:12px 14px}
  .sf-line .q{min-width:30px;height:30px}
  .sf-line .sf-l-acts button{min-width:48px;min-height:48px;font-size:12px}
  /* qty made the action row 6 buttons — at handheld width, wrap to a 3×2 grid so none (e.g. comp) is clipped. */
  .sf-line .sf-l-acts{flex-wrap:wrap;max-width:172px}
  .sf-btn,.sf-tender,.sf-key{min-height:52px}
}

/* ---------------- FILL the viewport on terminal/tablet (PAR 1024×768 floor + Sunmi 1280×800) ----------------
   Toast FOH-1 is full-bleed: both panes run 100% height, content scrolls INTERNALLY, no empty void.
   Scoped >=761px so the handheld stacked layout (above) is untouched. */
@media(min-width:761px){
  .app[data-chrome="pos"] .sfx.sf-root{height:100vh;min-height:0;display:flex;flex-direction:column;overflow:hidden}
  .app[data-chrome="pos"] .sf-top{flex:0 0 auto;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .app[data-chrome="pos"] .sf-top::-webkit-scrollbar{display:none}
  .app[data-chrome="pos"] .sf-top .sf-chip{white-space:nowrap}
  /* outlet tabs (the "Menus" tier) scroll; the action chips (Tables/All checks/New tab/EOD) stay pinned + visible */
  .app[data-chrome="pos"] .sf-outlets{flex:1 1 auto;min-width:0;display:flex;gap:8px;overflow-x:auto;scrollbar-width:none}
  .app[data-chrome="pos"] .sf-outlets::-webkit-scrollbar{display:none}
  .app[data-chrome="pos"] .sf-layout{flex:1 1 auto;min-height:0;align-items:stretch}
  .app[data-chrome="pos"] .sf-menu{display:flex;flex-direction:column;min-height:0}
  .app[data-chrome="pos"] .sf-items{flex:1 1 auto;overflow:auto;align-content:start;padding-bottom:8px}
  .app[data-chrome="pos"] .sf-check{position:static;max-height:none;height:100%}
  .app[data-chrome="pos"] .sf-check:has(.sf-ch-empty){justify-content:center}
}

@media(prefers-reduced-motion:reduce){.sfx *{transition:none!important;animation:none!important}}

/* ============================================================
   KDS — Toast Expediter pattern (S1/S3/S4/S5/S7).
   WHITE base is LOCKED (v3 directive) — age colors carry the signal:
   fresh gray → yellow 5m → orange 10m → pink 15m. Self-scoped on body.kds.
   ============================================================ */
body.kds{
  background:#e9eaec;color:#17191c;margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,system-ui,sans-serif;
}
body.kds .kds-topbar{display:flex;align-items:center;gap:10px;padding:10px 16px;background:#fff;
  border-bottom:1px solid #d6d8db;position:sticky;top:0;z-index:10;flex-wrap:wrap}
body.kds .kds-topbar h1{font-size:18px;font-weight:800;margin:0}
body.kds .kds-topbar .sub{font-size:11.5px;color:#6c7077}
body.kds .kds-spacer{flex:1}
body.kds .kds-tool{min-height:44px;padding:9px 14px;border-radius:9px;background:#f1f2f4;border:1px solid #d6d8db;
  font-size:13.5px;font-weight:700;color:#2c2f33;display:inline-flex;align-items:center;gap:7px;cursor:pointer;font-family:inherit}
body.kds .kds-tool.active{background:#2c2f33;color:#fff;border-color:#2c2f33}
body.kds .kds-tool:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(47,111,208,.5)}
body.kds select.kds-tool{appearance:none;-webkit-appearance:none;padding-right:26px}

body.kds .kds-wrap{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px;
  padding:14px 16px 64px;align-items:start}
body.kds .empty{grid-column:1/-1;padding:60px 20px;text-align:center;color:#8a8e94;font-size:15px}
body.kds .empty .e-ico{font-size:34px;opacity:.4;margin-bottom:10px}

/* ticket card; header color = AGE (S1: gray fresh → yellow 5m → orange 10m → pink 15m) */
body.kds .kt{background:#fff;border-radius:10px;box-shadow:0 1px 4px rgba(20,22,26,.14);overflow:hidden}
body.kds .kt-head{padding:8px 12px;background:#c9ccd1;color:#17191c}
body.kds .kt.age1 .kt-head{background:#f3d23e}
body.kds .kt.age2 .kt-head{background:#ef9b3b}
body.kds .kt.age3 .kt-head{background:#ee7e96}
body.kds .kt.recalled .kt-head{background:#c0162e;color:#fff}
body.kds .kt.fulfilled .kt-head{background:#bfe5cb}
/* header anatomy per S3: line1 = server · #order + age; line2 = table/tab + PAID badge */
body.kds .kt-h1{display:flex;justify-content:space-between;font-size:13.5px;font-weight:700}
body.kds .kt-h1 .age{font-variant-numeric:tabular-nums;font-weight:800}
body.kds .kt-h2{display:flex;justify-content:space-between;align-items:center;font-size:17px;font-weight:800;margin-top:2px}
body.kds .kt-paid{font-size:10.5px;font-weight:800;letter-spacing:.4px;border-radius:11px;padding:3px 9px;display:inline-flex;align-items:center;gap:4px}
body.kds .kt-paid.yes{background:#e2f4e9;color:#1f8a4d}
body.kds .kt-paid.no{background:#fbdfe3;color:#c0162e}
body.kds .kt-label{padding:6px 12px 0;text-align:center;font-size:14px;font-weight:800;letter-spacing:1px;color:#8c1322}
/* course section dividers (S7) */
body.kds .kt-course{margin:6px 8px 0;padding:4px 8px;background:#e7e8eb;border-radius:4px;font-size:12.5px;font-weight:700;color:#3c4046}
body.kds .kt-item{padding:9px 12px;border-bottom:1px solid #eceef0;font-size:15px}
body.kds .kt-item:last-child{border-bottom:none}
body.kds .kt-item .row1{display:flex;gap:8px;align-items:baseline}
body.kds .kt-item .row1 .q{font-weight:800;min-width:18px}
body.kds .kt-item .row1 .ok{color:#1f8a4d;font-weight:800}
body.kds .kt-item .mods{font-size:12.5px;color:#9c1f1f;margin:2px 0 0 26px;line-height:1.35}  /* modifier lines red per S1/S7 */
body.kds .kt-item.started{background:#fdf6df}
body.kds .kt-item.ready .row1{color:#1f8a4d}
body.kds .kt-acts{display:flex;gap:6px;margin-top:8px}
body.kds .kt-acts button{flex:1;min-height:44px;padding:8px;border:1px solid #d6d8db;border-radius:8px;font-size:13px;
  font-weight:700;color:#2c2f33;background:#f7f8f9;cursor:pointer;font-family:inherit}
body.kds .kt-acts button:active{background:#e7e8eb}
body.kds .kt-acts button:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(47,111,208,.5)}
body.kds .kt-acts button.primary{background:#2c2f33;color:#fff;border-color:#2c2f33}
body.kds .kt.fulfilled .kt-body{opacity:.75}

/* All Day view (S4: red count + item name list) */
body.kds .allday{padding:16px;display:flex;flex-direction:column;gap:8px;max-width:560px}
body.kds .allday .ad-row{display:flex;gap:12px;background:#fff;border-radius:9px;padding:11px 16px;
  box-shadow:0 1px 3px rgba(20,22,26,.12);font-size:16px;font-weight:700;align-items:baseline}
body.kds .allday .ad-row .n{color:#c0162e;font-weight:800;min-width:30px;font-variant-numeric:tabular-nums}
body.kds .allday .ad-row .m{font-size:12.5px;color:#6c7077;font-weight:600;margin-left:auto}

/* station tally bar (S1 bottom strip: Rice 7.5 · Chicken Wings 6 …) */
body.kds .kds-tally{position:fixed;bottom:0;left:0;right:0;display:flex;background:#fff;border-top:1px solid #d6d8db;
  z-index:9;overflow-x:auto}
body.kds .kds-tally .ty{flex:1;min-width:120px;padding:11px 14px;text-align:center;font-size:14px;font-weight:700;
  border-right:1px solid #eceef0;white-space:nowrap}
body.kds .kds-tally .ty b{color:#2563ab;margin-left:6px;font-variant-numeric:tabular-nums}
body.kds .kds-tally .ty.zero{color:#9a9ea5;font-style:italic}

@media(max-width:760px){
  body.kds .kds-wrap{grid-template-columns:repeat(auto-fill,minmax(190px,1fr));padding:10px 10px 64px}
}
@media(prefers-reduced-motion:reduce){body.kds *{transition:none!important;animation:none!important}}