/* NFTN POS — one stylesheet, no build step.

   This file holds every component rule, once, for every brand pack. A brand
   pack (brand-<key>.css, chosen by NFTN_POS_BRAND and loaded after this
   file) sets only tokens: its font faces,
   its motif, and its colours for light and dark. No rule here names a brand
   colour, and no pack styles a component. tests/test_brands.py holds every
   pack to the same token list and every text pair to WCAG AA.

   Tokens live on :root in layers: warm neutrals and status colours (here), the
   brand ramps and brand semantics (the pack), and the semantic tokens every
   rule reads. The dark theme redefines only the semantic layer. Tap targets are
   at least 44 px everywhere and 48 px or more on the till. Layout is fluid from
   320 px up; nothing may scroll sideways.

   The look is formal (owner, 2026-10-16: "modern, clean … not animated"): flat
   surfaces on 1 px hairlines, one sans per pack, tabular figures throughout,
   and motion only where it tells the cashier something changed (focus, press,
   a dialog or the drawer arriving), never longer than 200 ms and never with a
   reduced-motion preference. No loops, no glows, no decorative motifs. */

:root {
  color-scheme: light;

  /* ---- warm neutrals ---- */
  --n-0: #ffffff;
  --n-50: #f6f4f1;
  --n-100: #efece7;
  --n-200: #e5e1da;
  --n-300: #d9d3ca;
  --n-400: #b5aea3;
  --n-500: #8c857a;
  --n-600: #5f5a52;
  --n-700: #45413b;
  --n-800: #2c2a26;
  --n-900: #1c1b19;
  --n-950: #141311;

  /* ---- semantic: light ---- */
  --bg: var(--n-50);
  --surface: var(--n-0);
  --surface-2: var(--n-100);
  --surface-3: var(--n-200);
  --text: var(--n-900);
  --muted: var(--n-600);
  --border: var(--n-200);
  --border-strong: var(--n-500);  /* inputs and outlined controls: 3.65:1 on white */

  --success: #1f8a4c;
  --danger: #b42318;
  --danger-hover: #971c13;
  --on-danger: #ffffff;
  --error-bg: #fdecea;
  --error-text: #8a1c12;
  --warn-bg: #fff1d6;
  --warn-text: #6b4300;
  --warn-border: #e3b65a;
  --ok-bg: #e5f3ea;
  --ok-text: #145c33;
  --ok-border: #b9dfc7;
  --wait-bg: #e6f0fb;     /* waiting / offline chips: blue in every pack */
  --wait-text: #164a85;

  /* Online is green in every pack; offline is the pack's (offline-* tokens). */
  --online-bg: var(--ok-bg);
  --online-text: var(--ok-text);
  --online-border: var(--ok-border);
  --online-dot: var(--success);

  /* Elevation: a shadow in light, an edge in dark. Never both. The pack tints
     the larger shadows with --shadow-tint (an "r g b" triplet). */
  --elev-1: 0 0 0 1px var(--border);
  --elev-2: 0 0 0 1px var(--border), 0 2px 6px rgb(28 27 25 / 0.06);
  --elev-3: 0 0 0 1px var(--border), 0 12px 32px rgb(28 27 25 / 0.16);
  --elev-cta: none;

  /* ---- type ---- */
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --fs-xs: 0.8125rem;   /* 13: tags, labels */
  --fs-sm: 0.875rem;    /* 14: help, meta */
  --fs-md: 1rem;        /* 16: body */
  --fs-lg: 1.125rem;    /* 18: h2, emphasis */
  --fs-xl: 1.375rem;    /* 22: h1 on phones, figures */
  --fs-2xl: 1.75rem;    /* 28: h1, the grand total */
  --fs-3xl: 2.25rem;    /* 36: the day's net sales */

  /* ---- shape and spacing (a 4 px grid) ---- */
  --radius-lg: 10px;
  --radius: 8px;
  --radius-sm: 6px;
  --tap: 48px;
  --tap-min: 44px;
  --gutter: 16px;
  --topbar-h: 60px;
  --demo-h: 28px;
  --ease: cubic-bezier(0.25, 1, 0.5, 1);   /* ease-out-quart: quick, no overshoot */

  /* Words on the sign-in panel: the page's own, unless a pack's panel is dark
     on a light page (uzaro's glass), when the pack sets both. */
  --auth-panel-text: var(--text);
  --auth-panel-muted: var(--muted);
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg: var(--n-950);
    --surface: var(--n-900);
    --surface-2: #252320;
    --surface-3: #302d29;
    --text: #eeebe6;
    --muted: #ada69b;
    --border: #3a3631;
    --border-strong: #766f64;

    --success: #4ade80;
    --danger: #f87171;
    --danger-hover: #fca5a5;
    --on-danger: #2a0706;
    --error-bg: #3a1512;
    --error-text: #fecaca;
    --warn-bg: #33270f;
    --warn-text: #fde68a;
    --warn-border: #7a5d17;
    --ok-bg: #15291d;
    --ok-text: #b7ebc8;
    --ok-border: #24472f;
    --wait-bg: #10263f;
    --wait-text: #b9d6f5;

    --elev-1: 0 0 0 1px var(--border);
    --elev-2: 0 0 0 1px var(--border-strong);
    --elev-3: 0 0 0 1px var(--border), 0 16px 40px rgb(0 0 0 / 0.5);
    --elev-cta: none;
  }
}

/* ---- base ------------------------------------------------------------- */

*,
*::before,
*::after { box-sizing: border-box; }
/* hidden means hidden, whatever display a class sets (.btn is inline-flex). */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--text);
  font: 400 var(--fs-md)/1.5 var(--font);
  /* Money, quantities, FTNs and times line up in every column. */
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 { line-height: 1.25; margin: 0 0 0.5em; text-wrap: balance; letter-spacing: -0.01em; }
h1 { font-size: var(--fs-2xl); font-weight: 650; }
h2 { font-size: var(--fs-lg); font-weight: 600; letter-spacing: 0; }
h3 { font-size: var(--fs-md); font-weight: 600; letter-spacing: 0; }
@media (max-width: 599px) { h1 { font-size: var(--fs-xl); } }
p { margin: 0 0 0.75em; }
a { color: var(--primary); text-underline-offset: 3px; text-decoration-thickness: 1px; font-weight: 500; }
a:hover { text-decoration-thickness: 2px; }
code, .mono { font-family: var(--mono); font-size: 0.9em; overflow-wrap: anywhere; }
img, svg { max-width: 100%; }
strong, b { font-weight: 600; }
.small { font-size: var(--fs-sm); }
.muted { color: var(--muted); font-weight: 400; }
h1 .muted { font-weight: 500; }
.lead { font-size: var(--fs-lg); color: var(--muted); max-width: 65ch; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.ftn { font-family: var(--mono); font-size: 0.88em; overflow-wrap: anywhere; }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; }
.skip-link:focus { left: var(--gutter); top: 8px; background: var(--surface); padding: 8px 12px; border-radius: var(--radius-sm); }

/* ---- the demo strip: on every screen ------------------------------------ */

.demo-strip {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 2px 8px;
  margin: 0;
  min-height: var(--demo-h);
  padding: 3px var(--gutter);
  background: var(--demo-bg);
  color: var(--demo-text);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.01em;
  text-align: center;
}
.demo-strip strong {
  padding: 0 6px; border-radius: 3px;
  background: var(--demo-chip-bg); color: var(--demo-chip-text);
  font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.6875rem;
}
/* Its own box, so on a phone the sentence wraps inside the gutter instead of
 * running to the screen's edge. */
.demo-strip span { min-width: 0; }

/* ---- top bar: the brand band ---------------------------------------------- */

.topbar {
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 16px;
  padding: 8px var(--gutter);
  background: var(--bar-bg);
  color: var(--bar-text);
  min-height: var(--topbar-h);
  overflow: hidden;
}
.topbar > * { position: relative; z-index: 1; }
.topbar :focus-visible { outline-color: var(--focus-on-brand); }
.brand {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 650; font-size: 1.0625rem; letter-spacing: -0.01em;
  color: var(--bar-text); text-decoration: none; min-height: var(--tap-min);
}
.brand-mark {
  display: block; width: 32px; height: 32px; flex: none;
  border-radius: 6px; background: var(--mark-bg);
}
.brand-name { display: inline-flex; align-items: baseline; gap: 6px; }
.brand-name small { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.08em; color: var(--bar-muted); text-transform: uppercase; }
.nav {
  display: flex; gap: 2px; flex: 1 1 auto; min-width: 0;
  overflow-x: auto; scrollbar-width: none;
}
.nav::-webkit-scrollbar { display: none; }
/* ⚠️ `flex: none`: a strip that scrolls sideways must not squeeze its tabs. With
 * the default shrink and a 44px min-width, a phone pressed six labels into one
 * another ("CounterSalesEnd of day") instead of letting the strip scroll. */
.nav a {
  position: relative; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--tap-min); min-width: var(--tap-min);
  padding: 0 12px; border-radius: var(--radius-sm);
  color: var(--bar-muted); text-decoration: none; font-weight: 500; white-space: nowrap;
  transition: background-color 150ms var(--ease), color 150ms var(--ease);
}
.nav a:hover { background: var(--bar-hover); color: var(--bar-text); }
.nav a[aria-current="page"] { color: var(--bar-text); background: var(--bar-hover); }
/* The active page: weight, and a plain accent line under it. */
.nav a[aria-current="page"] { font-weight: 600; }
.nav a[aria-current="page"]::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 4px; height: 2px;
  border-radius: 1px; background: var(--bar-mark);
}
.who { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.who form { margin: 0; }
.who-name { font-size: var(--fs-sm); color: var(--bar-muted); white-space: nowrap; font-weight: 500; }
.topbar .btn-quiet { color: var(--bar-text); border-color: var(--bar-line); }
.topbar .btn-quiet:hover { background: var(--bar-hover); color: var(--bar-text); }

@media (max-width: 899px) {
  .who-till { display: none; }
}
@media (max-width: 719px) {
  .topbar { padding-top: 6px; padding-bottom: 4px; }
  .brand-name small { display: none; }
  .nav { order: 3; flex-basis: 100%; flex-wrap: wrap; overflow: visible; margin: 0 -6px; }
  .nav a { padding: 0 10px; }
}

/* ---- the phone drawer and the nav's icons --------------------------------------------
 * Owner: phones get a drawer, not a wrapped strip of tabs. Below 720px the bar
 * keeps the brand, a Menu button and Sign out; the links slide in from the
 * left over a scrim (app.js opens and closes it; Escape and the scrim close
 * it). Wider screens show the same links in the bar, as before. Every colour
 * is a token, so each pack's drawer is its own. */
.nav-toggle, .nav-drawer-head, .nav-drawer-version, .nav-scrim, .nav a.nav-drawer-only { display: none; }
.nav-ico { flex: none; display: block; }
.nav a .nav-ico { display: none; }
@media (min-width: 1280px) {
  .nav a { gap: 7px; }
  .nav a .nav-ico { display: block; width: 18px; height: 18px; opacity: 0.85; }
}
@media (max-width: 719px) {
  .topbar .nav-toggle {
    order: -1; display: inline-flex; align-items: center; gap: 6px;
    min-height: var(--tap-min); min-width: var(--tap-min); padding: 0 12px 0 10px; margin-left: -6px;
    border: 1px solid var(--bar-line, transparent); border-radius: var(--radius-sm);
    background: transparent; color: var(--bar-text); font: inherit; font-weight: 600; cursor: pointer;
  }
  .topbar .nav {
    position: fixed; z-index: 60; top: 0; bottom: 0; left: 0;
    display: flex; flex-direction: column; flex-wrap: nowrap; gap: 2px;
    width: min(86vw, 330px); max-width: none; margin: 0; padding: 0 12px 20px;
    overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
    background: var(--surface); color: var(--text);
    border-radius: 0; box-shadow: var(--elev-3);
    -webkit-backdrop-filter: none; backdrop-filter: none;
    transform: translateX(-105%); visibility: hidden;
    transition: transform 200ms var(--ease), visibility 0s linear 200ms;
  }
  .topbar.nav-open .nav { transform: none; visibility: visible; transition: transform 200ms var(--ease); }
  .topbar .nav .nav-drawer-head {
    display: flex; align-items: center; gap: 4px 10px; flex-wrap: wrap;
    margin: 0 -12px 8px; padding: 14px 8px 14px 18px; min-height: var(--topbar-h);
    background: var(--bar-bg); color: var(--bar-text);
  }
  .nav-drawer-name { font-weight: 600; }
  .nav-drawer-till { font-size: var(--fs-sm); color: var(--bar-muted); flex: 1 1 auto; }
  .topbar .nav .nav-close {
    display: inline-grid; place-items: center; width: var(--tap-min); height: var(--tap-min);
    border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--bar-text); cursor: pointer;
  }
  .topbar .nav a, .topbar .nav a.nav-drawer-only {
    display: flex; justify-content: flex-start; gap: 14px; width: 100%;
    min-height: var(--tap); padding: 0 14px; border-radius: var(--radius-sm);
    color: var(--text); background: none; box-shadow: none; font-size: var(--fs-md); font-weight: 500;
  }
  .topbar .nav a .nav-ico { display: block; width: 22px; height: 22px; color: var(--muted); }
  .topbar .nav a:hover { background: var(--surface-2); color: var(--text); }
  .topbar .nav a[aria-current="page"] {
    background: var(--primary-soft); color: var(--text); box-shadow: none; font-weight: 600;
  }
  .topbar .nav a[aria-current="page"] .nav-ico { color: var(--primary); }
  .topbar .nav a::before, .topbar .nav a::after { display: none !important; }
  .topbar .nav a.nav-drawer-only { margin-top: 8px; border-top: 1px solid var(--border); border-radius: 0 0 var(--radius-sm) var(--radius-sm); }
  .topbar .nav .nav-drawer-version { display: block; margin: auto 14px 0; padding-top: 16px; font-size: var(--fs-xs); color: var(--muted); font-weight: 500; }
  .topbar :focus-visible { outline-color: var(--focus-on-brand); }
  .topbar .nav :focus-visible { outline-color: var(--focus); }
  .nav-scrim:not([hidden]) {
    display: block; position: fixed; inset: 0; z-index: 55;
    background: rgb(10 10 12 / 0.45);
  }
  .topbar .who-name { display: none; }
  .topbar { flex-wrap: nowrap; }
  .topbar .brand { min-width: 0; }
  .topbar .brand-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
@media (max-width: 479px) {
  .topbar .nav-toggle > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .topbar .nav-toggle { padding: 0; justify-content: center; }
  .topbar .who .btn-quiet { padding-left: 12px; padding-right: 12px; white-space: nowrap; }
  .topbar { column-gap: 10px; }
  .topbar .brand { gap: 8px; }
  .topbar .brand-mark { width: 30px; height: 30px; }
}
@media (max-width: 719px) and (prefers-reduced-motion: reduce) {
  .topbar .nav, .topbar.nav-open .nav { transition: none; }
}

/* ---- the software's name and version (BIR Annex A item 10) ------------------------------ */
.app-foot { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 var(--gutter) 28px; }
.app-version {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; margin: 0;
  padding-top: 14px; border-top: 1px solid var(--border);
  color: var(--muted); font-size: var(--fs-sm);
}
.app-version .nav-ico { display: block; width: 18px; height: 18px; }
.app-version strong { color: var(--text); font-weight: 600; }
.app-version a { margin-left: auto; display: inline-flex; align-items: center; min-height: var(--tap-min); }
body.auth .app-foot { max-width: 1120px; }
body.auth .app-version { border-top-color: color-mix(in srgb, var(--auth-field-muted) 30%, transparent); color: var(--auth-field-muted); }
body.auth .app-version strong { color: var(--auth-field-text); }

/* ---- layout ----------------------------------------------------------------- */

.page { width: 100%; max-width: 1200px; margin: 0 auto; padding: 24px var(--gutter) 56px; }
.page-narrow { max-width: 680px; }
.page-head {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 12px 16px; margin: 4px 0 20px;
}
.page-head h1, .page-head h2 { margin: 0; }
.detail-grid { display: grid; gap: var(--gutter); grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); margin-bottom: 24px; align-items: start; }
section + section { margin-top: 28px; }
/* Side by side in a grid, two sections start on the same line. */
.detail-grid > section + section { margin-top: 0; }

.card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 20px 24px;
  box-shadow: var(--elev-1);
}
.card > h2:first-child { margin-bottom: 12px; }
@media (max-width: 479px) { .card { padding: 16px; } }

/* Empty states: the words, in a calm dashed frame. No art. */
.empty {
  color: var(--muted); text-align: center; padding: 24px 16px;
  border: 1px dashed var(--border-strong); border-radius: var(--radius-lg);
}
.empty.card { border-style: dashed; box-shadow: none; }
.empty p:last-child { margin-bottom: 0; }

/* The locked setup page: calm and centred (each pack frames it in auth-<key>.css). */
.setup-locked { text-align: center; }
.setup-locked .lead { margin-left: auto; margin-right: auto; }
.setup-locked .help { margin-top: 12px; }
.setup-locked .actions { justify-content: center; }

/* ---- buttons -------------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--tap-min); padding: 8px 18px;
  border: 1px solid transparent; border-radius: var(--radius-sm);
  font: inherit; font-weight: 600; line-height: 1.2; text-align: center; text-decoration: none;
  cursor: pointer; touch-action: manipulation; user-select: none;
  transition: background-color 120ms var(--ease), border-color 120ms var(--ease), color 120ms var(--ease);
}
.btn:disabled, .btn[aria-disabled="true"] {
  background: var(--surface-3); color: var(--muted); border-color: transparent;
  box-shadow: none; cursor: not-allowed; transform: none;
}
.btn-primary { background: var(--primary); color: var(--on-primary); }
.btn-primary:hover:not(:disabled) { background: var(--primary-hover); }
.btn-secondary { background: var(--surface); color: var(--text); border-color: var(--border-strong); }
.btn-secondary:hover:not(:disabled) { background: var(--surface-2); border-color: var(--primary); }
.btn-danger { background: var(--danger); color: var(--on-danger); }
.btn-danger:hover:not(:disabled) { background: var(--danger-hover); }
.btn-quiet { background: transparent; color: var(--muted); }
.btn-quiet:hover { background: var(--surface-2); color: var(--text); }
.btn-sm { min-height: var(--tap-min); padding: 6px 14px; font-size: var(--fs-sm); }
.btn-lg { min-height: 52px; padding: 10px 22px; font-size: 1.0625rem; }
.btn-xl { min-height: 60px; font-size: 1.1875rem; font-weight: 600; letter-spacing: 0; border-radius: var(--radius); }
.btn-block { width: 100%; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 20px; }
.actions form { margin: 0; }

/* ---- notices ---------------------------------------------------------------- */

.messages { max-width: 1200px; margin: 16px auto 0; padding: 0 var(--gutter); }
.notice {
  padding: 12px 16px; border-radius: var(--radius-sm);
  background: var(--info-bg); color: var(--info-text); margin: 0 0 12px;
}
.notice-success { background: var(--ok-bg); color: var(--ok-text); }
.notice-warning { background: var(--warn-bg); color: var(--warn-text); }
.notice-error { background: var(--error-bg); color: var(--error-text); }
.notice a { color: inherit; font-weight: 600; }
.notice p:last-child { margin: 0; }

.callout {
  border-radius: var(--radius-lg); padding: 16px 20px; margin: 0 0 20px;
  background: var(--surface); box-shadow: var(--elev-1);
}
.callout h2 { font-size: var(--fs-lg); }
.callout p:last-child { margin-bottom: 0; }
.callout-warn { background: var(--warn-bg); color: var(--warn-text); box-shadow: inset 0 0 0 1px var(--warn-border); }
.callout-error { background: var(--error-bg); color: var(--error-text); box-shadow: none; }
.callout details { margin-top: 8px; }
.callout summary { cursor: pointer; font-weight: 600; min-height: var(--tap-min); display: flex; align-items: center; }

.problem { margin-top: 8px; padding-top: 8px; border-top: 1px solid currentColor; opacity: 0.95; }
.problem-code { margin: 0 0 4px; }
.problem-detail { font-size: 0.92rem; overflow-wrap: anywhere; }
.problem-list { padding-left: 18px; font-size: 0.9rem; overflow-wrap: anywhere; }

.tag {
  display: inline-block; padding: 2px 8px; border-radius: 4px;
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.01em;
  background: var(--surface-2); color: var(--muted);
  white-space: nowrap;
}
.tag-ok { background: var(--ok-bg); color: var(--ok-text); }
.tag-warn, .tag-sample { background: var(--warn-bg); color: var(--warn-text); }
.tag-error { background: var(--error-bg); color: var(--error-text); }
.tag-void { background: var(--surface-3); color: var(--muted); text-decoration: line-through; }
.tag-offline { background: var(--offline-soft); color: var(--offline-soft-text); }

/* ---- forms ------------------------------------------------------------------ */

.form .field { margin-bottom: 18px; }
.field label, .field legend { display: block; font-weight: 600; margin-bottom: 6px; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
input[type="text"], input[type="password"], input[type="number"], input[type="search"],
input[type="date"], input[type="email"], select, textarea {
  width: 100%; min-height: var(--tap); padding: 10px 14px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text); font: inherit;
  transition: border-color 150ms var(--ease), box-shadow 150ms var(--ease);
}
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
textarea { min-height: 96px; }
input:focus, select:focus, textarea:focus { border-color: var(--primary); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--danger); }
.help { color: var(--muted); font-size: var(--fs-sm); margin: 6px 0 0; }
.error { color: var(--danger); font-size: 0.9rem; margin: 6px 0 0; font-weight: 600; }
.check { display: flex; align-items: center; gap: 12px; min-height: var(--tap); font-weight: 500; cursor: pointer; }
.check input, .choice input, .person input, .seg input { width: 22px; height: 22px; accent-color: var(--primary); flex: none; }
.choice-row { display: flex; flex-wrap: wrap; gap: 8px; }
.choice {
  display: flex; align-items: center; gap: 10px; min-height: var(--tap); padding: 8px 16px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm); cursor: pointer;
  background: var(--surface); font-weight: 500 !important;
  transition: border-color 120ms var(--ease), background-color 120ms var(--ease);
}
.choice:hover { border-color: var(--primary); }
.choice:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); box-shadow: inset 0 0 0 1px var(--primary); }
input[type="file"] {
  width: 100%; max-width: 100%; min-height: var(--tap); padding: 6px;
  border: 1px dashed var(--border-strong); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text); font: inherit; font-size: 0.95rem;
}
input[type="file"]::file-selector-button {
  min-height: 36px; margin-right: 12px; padding: 6px 14px; cursor: pointer;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  background: var(--surface-2); color: var(--text); font: inherit; font-weight: 600;
}
.inline-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0; }
.inline-form input, .inline-form select { width: auto; flex: 1 1 140px; }
@media (min-width: 900px) {
  .page-head .inline-form { flex-wrap: nowrap; }
  .page-head .inline-form input, .page-head .inline-form select { flex: 0 1 auto; }
}
.search-form { margin-bottom: 16px; max-width: 520px; }

/* Setup steps: numbered rings on one line. Done steps fill with the accent. */
.steps { display: flex; flex-wrap: wrap; gap: 8px 0; list-style: none; padding: 0; margin: 0 0 20px; counter-reset: step; }
.steps li {
  position: relative; counter-increment: step; display: flex; align-items: center; gap: 8px;
  min-height: 32px; font-size: var(--fs-sm); font-weight: 500; color: var(--muted);
}
.steps li + li { padding-left: 44px; }
.steps li::before {
  content: counter(step); display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%;
  border: 1px solid var(--border-strong); color: var(--muted); font-size: var(--fs-xs); font-weight: 600;
}
.steps li + li::after {
  content: ""; position: absolute; left: 8px; top: 50%; width: 28px; height: 2px; margin-top: -1px;
  border-radius: 2px; background: var(--border-strong);
}
@media (max-width: 479px) {
  .steps li { gap: 6px; }
  .steps li + li { padding-left: 26px; }
  .steps li + li::after { left: 6px; width: 14px; }
}
.steps li[aria-current="step"] { color: var(--text); }
.steps li[aria-current="step"]::before { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.steps li:has(~ li[aria-current="step"])::before { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.steps li[aria-current="step"]::after, .steps li:has(~ li[aria-current="step"])::after { background: var(--accent); }
.tin-list { columns: 2 180px; padding-left: 18px; }

/* ---- sign in and setup: the shared auth shell ----------------------------------------
   The sign-in and setup screens share this markup and these rules; each pack
   lays them out its own way in auth-<key>.css (loaded after the pack). Every
   colour is a token. The radio behind each person covers its row, so a tap
   anywhere picks the person and the arrow keys still move between people. */

body.auth { background: var(--auth-field); }
.auth-main { width: 100%; max-width: 1120px; margin: 0 auto; padding: 20px var(--gutter) 48px; }
.auth-main-narrow { max-width: 760px; }
.auth-shell { display: grid; gap: 20px; min-width: 0; }
.auth-head { display: flex; align-items: center; gap: 16px; min-width: 0; color: var(--auth-field-text); }
.auth-head h1 { margin: 0; color: var(--auth-field-text); }
.auth-mark { display: none; width: 64px; height: 64px; flex: none; }
/* The context line under the tagline: what this screen is, and today's date. */
.auth-eyebrow { margin: 4px 0 0; font-size: var(--fs-sm); font-weight: 400; color: var(--auth-field-muted); }
.auth-date { display: inline; }
.auth-tagline { margin: 6px 0 0; color: var(--auth-field-muted); font-weight: 500; }
.auth-form { margin: 0; min-width: 0; }
.auth-error { margin-bottom: 16px; }
.auth-counter { margin-bottom: 16px; }
.auth-counter legend { color: var(--auth-field-text); }
.auth-grid { display: grid; gap: 20px; min-width: 0; }
@media (min-width: 900px) {
  .auth-grid { grid-template-columns: minmax(0, 1.1fr) minmax(340px, 0.9fr); align-items: start; }
}
.auth-people, .auth-pin { min-width: 0; }
/* A floated legend sits inside its fieldset like any heading, so a pack's
   border or rule on the fieldset is never broken by it. */
.auth-people > legend { float: left; width: 100%; }
.auth-people > :not(legend) { clear: both; }
.auth-form .auth-step { display: flex; align-items: center; gap: 10px; font-weight: 600; margin: 0 0 12px; padding: 0; }
.auth-step-no {
  display: inline-grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%;
  font-size: var(--fs-xs); font-weight: 600; background: transparent; color: inherit; box-shadow: inset 0 0 0 1px currentColor;
}

.person-head { display: none; }
.person-list { display: grid; gap: 8px; }
.person {
  position: relative; display: flex; align-items: center; gap: 12px; min-height: 56px; min-width: 0;
  padding: 8px 14px; cursor: pointer; line-height: 1.25;
  transition: background-color 120ms var(--ease), border-color 120ms var(--ease), box-shadow 120ms var(--ease);
}
.person input {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0;
  opacity: 0; cursor: pointer; z-index: 1;
}
.person:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.person-no, .person-avatar { display: none; }
.person-text { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.person-name { font-weight: 600; overflow-wrap: anywhere; }
.person-role { font-weight: 400; color: var(--muted); font-size: var(--fs-xs); }
.person-tick { display: none; }

.auth input.pin-input {
  font: 600 1.5rem/1 var(--mono); letter-spacing: 0.4em; text-align: center; min-height: 56px;
  background: var(--display-bg); color: var(--display-text); border-color: var(--key-edge);
}
.auth input.pin-input:focus { border-color: var(--auth-focus); }
.auth input.pin-input:focus-visible { outline-color: var(--auth-focus); }
.pinpad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; max-width: 360px; margin: 12px auto 0; }
.key {
  display: grid; place-items: center; min-height: 60px; min-width: 0; padding: 0;
  border: 1px solid var(--key-edge); border-radius: var(--radius);
  background: var(--key-bg); color: var(--key-text); font: 500 1.5rem var(--font); cursor: pointer;
  font-variant-numeric: tabular-nums; touch-action: manipulation; user-select: none;
  transition: background-color 100ms var(--ease);
}
.key:hover { background: var(--key-hover); }
.key:active { background: var(--key-hover); }
.key-fn { font-size: var(--fs-sm); font-weight: 500; background: var(--key-fn-bg); color: var(--key-fn-text); }
.key-fn:hover { background: var(--key-hover); }
.key svg { width: 28px; height: 28px; }
.auth-actions { margin-top: 16px; }
.auth-submit { background: var(--submit-bg); color: var(--submit-text); }
.auth-submit:hover:not(:disabled) { background: var(--submit-hover); }

.auth-note {
  display: flex; align-items: flex-start; gap: 8px; margin: 0;
  color: var(--auth-field-muted); font-size: var(--fs-sm); font-weight: 400;
}
.auth-note-icon { flex: none; margin-top: 1px; }
.auth-strip { display: none; }

/* The setup screens: one frame around the step's content. */
.auth-frame { min-width: 0; }
.auth-frame > h1 { margin-top: 4px; }
.auth-lock { display: inline-grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 16px; border-radius: 50%; background: var(--primary-soft); color: var(--primary); }

/* ---- tables that become cards on narrow screens ------------------------------------ */

.table {
  width: 100%; border-collapse: separate; border-spacing: 0;
  background: var(--surface); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--elev-1);
}
.table th, .table td { padding: 12px 14px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: middle; }
.table th { font-size: var(--fs-xs); font-weight: 600; text-transform: none; letter-spacing: 0.01em; color: var(--muted); background: var(--surface-2); white-space: nowrap; }
.table th.num, .table td.num { text-align: right; }
.table td.num { font-weight: 500; font-variant-numeric: tabular-nums; }
.table tbody tr:hover { background: var(--surface-2); }
.table tr:last-child td { border-bottom: 0; }
.table .row-action { text-align: right; white-space: nowrap; }
.table .row-action form { display: inline; margin: 0; }
.table tr.is-off td { color: var(--muted); }

@media (max-width: 767px) {
  .table.stack, .table.stack tbody { display: block; border: 0; background: none; box-shadow: none; border-radius: 0; overflow: visible; }
  .table.stack thead { display: none; }
  .table.stack tr {
    display: block; margin-bottom: 12px; padding: 8px 14px;
    background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--elev-1);
  }
  .table.stack tbody tr:hover { background: var(--surface); }
  .table.stack td {
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    padding: 8px 0; border-bottom: 1px solid var(--border); text-align: right; min-width: 0;
  }
  .table.stack td > * { min-width: 0; }
  .table.stack td::before {
    content: attr(data-label); flex: none; text-align: left;
    font-size: var(--fs-xs); font-weight: 600; color: var(--muted);
  }
  .table.stack td.row-action { border-bottom: 0; justify-content: flex-end; flex-wrap: wrap; padding-top: 10px; }
  .table.stack td.row-action::before { content: none; }
  .table.stack td.ftn { font-size: 0.8rem; }
}

/* ---- the phone list (`table.applist`, below 768px) -------------------------------
 * Owner, 2026-10-07: "make a list like for mobile … colour coding for status …
 * icons". One sale per row, hairlines between, no card per row:
 *   [icon]  ₱265.00                  [✓ Issued]  ›
 *           FTN-A2026-TETQ-3J6G-7DH0-TKCX-M
 *           Counter 1 · S-000123 · Oct 7, 14:03
 * The icon is how it was paid, tinted per method; the chip carries an icon as
 * well as its colour; the FTN is whole and wraps only at a hyphen. The receipt
 * number is the row's one link, stretched over the row. Counter screens and
 * laptops keep the table: every piece here is hidden at 768px and up. */
.al-ico, .al-chip, .al-meta { display: none; }
@media (max-width: 767px) {
  .table.stack.applist {
    background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--elev-1); overflow: hidden;
  }
  .table.stack.applist tr {
    position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto 10px;
    grid-template-areas: "ico amt state chev" "ico id id chev";
    align-items: center; column-gap: 12px; row-gap: 2px;
    min-height: 76px; margin: 0; padding: 10px 14px 10px 16px;
    background: none; border-radius: 0; box-shadow: none; border-bottom: 1px solid var(--border);
  }
  .table.stack.applist tr:last-child { border-bottom: 0; }
  .table.stack.applist tbody tr:hover, .table.stack.applist tr:focus-within { background: var(--surface-2); }
  .table.stack.applist tr::after {
    content: ""; grid-area: chev; width: 8px; height: 8px;
    border-top: 2px solid var(--muted); border-right: 2px solid var(--muted); transform: rotate(45deg);
  }
  .table.stack.applist td { display: none; padding: 0; border: 0; text-align: left; min-width: 0; }
  .table.stack.applist td::before { content: none; }

  .table.stack.applist td.al-num { display: block; position: static; width: 0; height: 0; overflow: visible; }
  .table.stack.applist .al-target { font-size: 0; position: static; }
  .table.stack.applist .al-target::after { content: ""; position: absolute; inset: 0; z-index: 1; }
  .table.stack.applist .al-target:focus-visible { outline: none; }
  .table.stack.applist tr:has(.al-target:focus-visible) { outline: 3px solid var(--primary); outline-offset: -3px; }

  .table.stack.applist td.al-icon { display: block; grid-area: ico; align-self: start; font-size: 0; line-height: 0; }
  .table.stack.applist td.al-icon > :not(.al-ico) { display: none; }
  /* How it was paid: a line icon on a neutral tile. The status chip carries the colour. */
  .al-ico {
    display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius);
    background: var(--surface-2); color: var(--muted); box-shadow: none;
  }

  .table.stack.applist td.al-amt {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    grid-area: amt; font-size: 1rem; font-weight: 600; color: var(--text); white-space: nowrap;
  }
  .table.stack.applist tr:not(:has(.al-state)) td.al-amt { grid-column: 2 / 4; }
  .table.stack.applist td.al-state { display: block; grid-area: state; justify-self: end; }
  .table.stack.applist td.al-state > :not(.al-chip) { display: none; }
  .al-chip {
    display: inline-flex; align-items: center; gap: 3px; padding: 3px 8px 3px 6px;
    border-radius: 4px; font-size: 0.6875rem; font-weight: 600; line-height: 1.2; white-space: nowrap;
    background: var(--offline-soft); color: var(--offline-soft-text);
  }
  .al-chip-ok   { background: var(--ok-bg);    color: var(--ok-text); }
  .al-chip-void { background: var(--error-bg); color: var(--error-text); }
  .al-chip-warn { background: var(--warn-bg);  color: var(--warn-text); }
  /* Waiting and offline are blue in every pack (owner: "Offline/pending blue"),
   * and not `--info-*`, which one pack paints green. */
  .al-chip-wait { background: var(--wait-bg); color: var(--wait-text); }

  .table.stack.applist td.al-id { display: block; grid-area: id; font-size: 0.75rem; }
  .table.stack.applist td.al-id > span:first-child {
    display: block; font-family: var(--mono); line-height: 1.35; color: var(--text);
    overflow-wrap: normal; word-break: normal; white-space: normal;
  }
  .al-meta {
    display: block; margin-top: 2px; font-size: 0.75rem; line-height: 1.35; color: var(--muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
}

/* ---- facts and totals ------------------------------------------------------------ */

.facts-list, .totals, .facts { margin: 0; }
.facts-list > div, .totals > div {
  display: flex; justify-content: space-between; gap: 12px; padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.facts-list > div:last-child, .totals > div:last-child { border-bottom: 0; }
.facts-list dt, .totals dt { color: var(--muted); }
.facts-list dd, .totals dd { margin: 0; text-align: right; font-weight: 500; font-variant-numeric: tabular-nums; min-width: 0; overflow-wrap: anywhere; }
.totals .minor { font-size: var(--fs-sm); padding: 4px 0; }
.totals .minor dd { font-weight: 400; }
.totals .grand {
  align-items: baseline; padding-top: 12px; margin-top: 4px;
  border-top: 1px solid var(--text); border-bottom: 0;
}
.totals .grand dt { color: var(--text); font-weight: 600; font-size: var(--fs-lg); }
.totals .grand dd { font-size: var(--fs-2xl); font-weight: 650; letter-spacing: -0.01em; color: var(--figure); }
.facts { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.facts div { display: flex; gap: 6px; font-size: 0.9rem; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; font-weight: 600; }

/* ---- samples ------------------------------------------------------------------ */

.sample-grid { display: grid; gap: var(--gutter); grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.sample-card { display: flex; flex-direction: column; gap: 10px; }
.sample-card h2 { margin: 0; }
.sample-card p { margin: 0; color: var(--muted); }
.sample-card .btn { margin-top: auto; }
.sample-card details summary { cursor: pointer; min-height: var(--tap-min); display: flex; align-items: center; font-weight: 600; color: var(--primary); }
.sample-items { list-style: none; padding: 0; margin: 0; max-height: 280px; overflow-y: auto; font-size: 0.9rem; }
.sample-items li { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; border-bottom: 1px solid var(--border); }
.sample-skip { background: var(--surface-2); box-shadow: none; }

/* ---- end of day: a dashboard ------------------------------------------------------- */

.stat-group-title {
  display: flex; align-items: center; gap: 10px; margin: 28px 0 12px;
  font-size: var(--fs-sm); font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--text);
}
.stat-group-title::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--border); }
.stat-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr)); margin: 16px 0 24px; }
.stat-group-title + .stat-grid { margin-top: 0; }
.stat {
  display: flex; flex-direction: column; gap: 2px;
  background: var(--surface); border-radius: var(--radius-lg); padding: 16px 18px; box-shadow: var(--elev-1);
}
.stat p { margin: 0; }
.stat-label { font-size: var(--fs-sm); color: var(--muted); font-weight: 500; }
.stat-value { font-size: var(--fs-xl); font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; margin-top: 4px !important; }
.stat-note { font-size: var(--fs-sm); color: var(--muted); margin-top: auto !important; padding-top: 4px; }
.stat-note a { color: inherit; }
/* The day's net sales: the same card, the figure larger. No band, no art. */
.stat-hero { grid-column: 1 / -1; padding: 20px 24px; }
.stat-hero .stat-label { font-size: var(--fs-md); color: var(--text); font-weight: 600; }
.stat-hero .stat-value { font-size: var(--fs-3xl); font-weight: 650; color: var(--figure); }
@media (max-width: 479px) { .stat-hero .stat-value { font-size: 2rem; } }
.stat-warn { background: var(--warn-bg); color: var(--warn-text); box-shadow: inset 0 0 0 1px var(--warn-border); }
.stat-error { background: var(--error-bg); color: var(--error-text); box-shadow: none; }
.stat-warn .stat-label, .stat-warn .stat-note, .stat-error .stat-label, .stat-error .stat-note { color: inherit; }
.pager { display: flex; justify-content: center; align-items: center; gap: 12px; margin: 20px 0; flex-wrap: wrap; font-weight: 600; }
.plain-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.list-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px; }

/* ---- chips ------------------------------------------------------------------------ */

.chips { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 6px; scrollbar-width: thin; }
.chip {
  flex: none; display: inline-flex; align-items: center; min-height: var(--tap-min); padding: 0 16px;
  border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface);
  color: var(--text); font: 500 var(--fs-sm) var(--font); text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color 120ms var(--ease), border-color 120ms var(--ease), color 120ms var(--ease);
}
.chip:hover { border-color: var(--border-strong); }
.chip[aria-pressed="true"], .chip[aria-current="true"] {
  background: var(--primary-soft); color: var(--text); border-color: var(--primary);
  box-shadow: inset 0 0 0 1px var(--primary); font-weight: 600;
}

/* ---- the till ------------------------------------------------------------------------- */

.till {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(330px, 410px);
  gap: 0;
  height: calc(100dvh - var(--topbar-h) - var(--demo-h));
  min-height: 480px;
}
.till-catalogue { min-width: 0; overflow-y: auto; padding: 14px var(--gutter) 24px; }
.till-tools { margin-bottom: 10px; }
.till-tools input[type="search"] {
  min-height: 52px; padding-left: 44px; border-radius: var(--radius);
  background: var(--surface) url("../img/search.svg") no-repeat 14px center / 20px 20px;
}
.till-cart {
  display: flex; flex-direction: column; gap: 14px; min-width: 0; overflow-y: auto;
  padding: 16px var(--gutter) 18px; background: var(--surface);
  box-shadow: -1px 0 0 var(--border);
}
.cart-head { display: flex; align-items: center; justify-content: space-between; min-height: var(--tap); }
.cart-head h2 { margin: 0; font-size: var(--fs-xl); font-weight: 600; }
.till-cart .empty { padding: 20px 8px; }

.item-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(156px, 1fr)); margin-top: 10px; }
.item {
  position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 8px;
  min-height: 104px; padding: 14px; text-align: left;
  border: 0; border-radius: var(--radius); background: var(--surface);
  color: var(--text); font: inherit; cursor: pointer; touch-action: manipulation; box-shadow: var(--elev-1);
  transition: box-shadow 120ms var(--ease), background-color 100ms var(--ease);
}
.item:hover { box-shadow: inset 0 0 0 1px var(--border-strong); }
.item:active { background: var(--surface-2); }
/* In the sale: a primary edge, and the count in a small badge inside the tile. */
.item:has(.item-count) { box-shadow: inset 0 0 0 2px var(--primary); }
.item-name { font-weight: 500; line-height: 1.3; overflow-wrap: break-word; hyphens: auto; }
.item:has(.item-count) .item-name { padding-right: 30px; }
.item-price { font-variant-numeric: tabular-nums; color: var(--text); font-weight: 600; font-size: 1.0625rem; }
.item-flags { display: flex; flex-wrap: wrap; gap: 4px; }
.item-flags .tag { font-size: 0.6875rem; padding: 1px 6px; }
.item-count {
  position: absolute; top: 8px; right: 8px; min-width: 26px; height: 26px; padding: 0 7px;
  border-radius: 4px; background: var(--primary); color: var(--on-primary);
  display: grid; place-items: center; font-weight: 600; font-size: var(--fs-sm); font-variant-numeric: tabular-nums;
}

.cart-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; align-content: start; }
.cart-line {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; align-items: center;
  padding: 12px 0; border-bottom: 1px solid var(--border);
}
.cart-line-name { font-weight: 500; overflow-wrap: anywhere; }
.cart-line-total { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.cart-line-sub { grid-column: 1 / -1; font-size: var(--fs-sm); color: var(--muted); }
.cart-line-sub .disc { color: var(--primary); font-weight: 600; }
.qty { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; }
.qty button {
  width: var(--tap); height: var(--tap); border-radius: var(--radius-sm); flex: none;
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--text);
  font: 500 1.25rem var(--font); cursor: pointer; touch-action: manipulation;
  transition: background-color 100ms var(--ease), border-color 100ms var(--ease);
}
.qty button:hover { background: var(--surface-2); }
.qty button:active { background: var(--surface-3); }
.qty input { width: 80px; min-height: var(--tap); text-align: center; font-variant-numeric: tabular-nums; font-weight: 600; }
.qty .remove { margin-left: auto; width: auto; padding: 0 14px; font-size: var(--fs-sm); color: var(--danger); border-color: transparent; background: transparent; }
.qty .remove:hover { background: var(--error-bg); border-color: transparent; }

.discount { padding: 14px 0 0; border-top: 1px solid var(--border); border-radius: 0; background: none; }
.discount legend { float: left; width: 100%; font-weight: 600; margin-bottom: 8px; font-size: var(--fs-sm); }
.discount .segmented { clear: both; }
.segmented { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.segmented-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.segmented-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
/* A payment reference: a large target, read back in a monospace face. */
.ref-input { min-height: 56px; font-family: var(--mono); font-size: 1.15rem; letter-spacing: 0.02em; }
.last4-input { max-width: 10ch; }
.ref-input[aria-invalid="true"] { border-color: var(--danger); }
.co-need { margin-top: 12px; }
.dialog-body > .field { margin-top: 18px; }
/* .segmented .seg outranks ".field label", which would make it a block. */
.segmented .seg {
  position: relative; margin: 0;
  display: flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--tap);
  padding: 6px 8px; text-align: center;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm); cursor: pointer;
  background: var(--surface); font-weight: 500; font-size: var(--fs-sm); line-height: 1.2;
  transition: background-color 120ms var(--ease), border-color 120ms var(--ease), color 120ms var(--ease);
}
.segmented .seg:hover { background: var(--surface-2); }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
/* The chosen one: the pack's soft tint, a 2 px primary edge and a heavier word. */
.seg:has(input:checked) { background: var(--primary-soft); color: var(--text); border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); font-weight: 600; }
.seg:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.id-field { margin-top: 12px; }
.id-field .field { margin-bottom: 10px; }
.id-field .field label { font-size: var(--fs-sm); }
.id-field textarea { min-height: 64px; }
/* The discount cards: "No discount" across the top, then the four cards two by
 * two, each with its line icon and its name (an icon and words, never colour
 * alone). The chosen card takes the pack's tint and a primary edge. */
.discount-cards .seg-disc { justify-content: flex-start; text-align: left; padding: 6px 10px 6px 8px; }
.discount-cards .seg-none { grid-column: 1 / -1; justify-content: center; }
.disc-ico {
  display: inline-grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: var(--radius-sm);
  background: none; color: var(--muted);
}
.seg:has(input:checked) .disc-ico { color: var(--primary); }
.disc-row dt { display: inline-flex; align-items: center; gap: 10px; }
.disc-row .disc-ico { width: 24px; height: 24px; }
.seg-none .disc-ico { width: 24px; height: 24px; }
.cart-notes p { font-size: var(--fs-sm); margin: 0 0 6px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--warn-bg); color: var(--warn-text); }
.cart-notes p.error { background: var(--error-bg); color: var(--error-text); font-weight: 500; }
.cart-notes:empty { display: none; }
.till-cart #charge { margin-top: auto; flex: none; }
/* A counter screen: the head, the discount, the totals and Charge stay in
   view; the sale's lines take what is left and scroll on their own. */
@media (min-width: 900px) {
  .till-cart > * { flex: none; }
  .till-cart > .cart-lines { flex: 0 1 auto; min-height: 104px; overflow-y: auto; overscroll-behavior: contain; margin-right: -8px; padding-right: 8px; }
  .till-cart { gap: 12px; padding-bottom: 16px; }
  .till-cart .totals > div { padding: 6px 0; }
  .till-cart .totals .minor { padding: 2px 0; }
  .till-cart .discount { padding-top: 12px; }
  .till-cart .discount-cards { gap: 6px; }
  .till-cart .cart-line { padding: 10px 0; }
}
.cart-bar { display: none; }

/* A phone, or a tablet in portrait: the cart goes below the grid. */
@media (max-width: 899px) {
  .till { display: block; height: auto; min-height: 0; }
  .till-catalogue { overflow: visible; padding-bottom: 12px; }
  .till-cart { overflow: visible; box-shadow: 0 -1px 0 var(--border); padding-bottom: 104px; scroll-margin-top: 8px; }
  .till-cart #charge { margin-top: 4px; }
  .item-grid { grid-template-columns: repeat(auto-fill, minmax(144px, 1fr)); }
  .cart-bar {
    display: block; position: sticky; bottom: 0; z-index: 10;
    padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
    background: var(--bg);
    box-shadow: 0 -1px 0 var(--border);
  }
  .cart-bar .btn { min-height: 56px; }
  .cart-bar.is-empty { display: none; }
}
@media (max-width: 479px) {
  .item-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
  .item { min-height: 96px; padding: 12px; font-size: 0.9375rem; }
  .item-price { font-size: var(--fs-md); }
  .segmented-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .segmented-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---- the quick-service counter (Settings → Counter layout) --------------------------
   A fast-food menu, laid out like a ledger: a text list of categories down the
   left (a scrolling row on a phone), the category's name and the search on one
   line, then tiles with the item's picture on a neutral plate, its name and its
   price, and the order on the right (below, with the sticky bar, under 900 px).
   The pictures are the menu's own product shots (static/pos/illustrations); an
   item without one shows no placeholder art, only its words. Choices open a
   dialog; a suggestion sits at the foot of the menu and never blocks it. One
   tap adds; nothing here adds a step, and nothing moves for show. */

.qs-menu { display: grid; grid-template-columns: 184px minmax(0, 1fr); gap: 20px; align-items: start; margin-top: 12px; }
.qs-rail { position: sticky; top: 0; z-index: 2; min-width: 0; }
.qs-cats { list-style: none; margin: 0; padding: 4px; display: grid; gap: 2px; background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--elev-1); }
.qs-cat {
  display: flex; align-items: center; gap: 10px;
  width: 100%; min-height: var(--tap); padding: 8px 12px;
  border: 0; border-radius: var(--radius-sm); background: transparent;
  color: var(--text); font: 500 var(--fs-sm)/1.25 var(--font); text-align: left; cursor: pointer;
  touch-action: manipulation; overflow-wrap: anywhere;
  transition: background-color 120ms var(--ease), color 120ms var(--ease);
}
/* The category pictures stay in the markup (the counter reads them) but the
   list is words only. */
.qs-cat-art { display: none; }
.qs-cat:hover { background: var(--surface-2); }
.qs-cat[aria-pressed="true"] { background: var(--primary-soft); color: var(--text); font-weight: 600; box-shadow: inset 0 0 0 1px var(--primary); }
.qs-panel { min-width: 0; }

/* The category's name, its count and the search: one plain line. */
.qs-hero {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(200px, 320px); align-items: center; gap: 8px 20px;
  margin-bottom: 14px; padding: 0 0 12px; border-bottom: 1px solid var(--border);
  background: none; color: var(--text);
}
.qs-hero-art { display: none; }
.qs-hero-text { min-width: 0; }
.qs-heading { margin: 0; color: var(--text); font-size: var(--fs-xl); font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; overflow-wrap: anywhere; }
.qs-hero-count { margin: 2px 0 0; color: var(--muted); font-size: var(--fs-sm); font-weight: 400; }
.qs-search { min-width: 0; }
.qs-search input[type="search"] {
  min-height: var(--tap); padding-left: 42px;
  background: var(--surface) url("../img/search.svg") no-repeat 14px center / 18px 18px;
}

/* The tiles: the product picture on a neutral plate, then the name and the price. */
.qs-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; margin-top: 0; }
.qs-tile { justify-content: flex-start; gap: 8px; min-height: 0; padding: 8px 8px 12px; border-radius: var(--radius-lg); }
.qs-tile:active { background: var(--surface-2); }
.qs-tile-art {
  display: grid; place-items: center; aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden;
  background: var(--surface-2);
}
.qs-tile-img { width: 72%; height: 100%; object-fit: contain; }
/* No picture: no placeholder art, only the words. */
.qs-tile.no-art .qs-tile-art { display: none; }
.qs-tile.no-art { min-height: 112px; padding-top: 14px; }
/* The badge stays inside the tile and clear of the count in its top right
   corner: a long one wraps, never clips. */
.qs-badge {
  position: absolute; top: 14px; left: 14px; max-width: calc(100% - 14px - 44px);
  padding: 2px 8px; border-radius: 4px;
  background: var(--surface); color: var(--text); font-size: var(--fs-xs); font-weight: 600; line-height: 1.35;
  box-shadow: inset 0 0 0 1px var(--border-strong);
  overflow-wrap: anywhere; text-wrap: balance;
}
.qs-tile.no-art .qs-badge { position: static; align-self: flex-start; max-width: calc(100% - 36px); margin: 0 6px; }
.qs-tile-text { display: flex; flex-direction: column; gap: 2px; padding: 0 6px; }
.qs-tile .item-name { font-size: var(--fs-md); font-weight: 600; line-height: 1.3; padding-right: 0; }
.qs-tile.no-art:has(.item-count) .item-name { padding-right: 32px; }
.qs-desc {
  color: var(--muted); font-size: var(--fs-sm); font-weight: 400; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.qs-tile-foot { display: flex; align-items: center; gap: 8px; margin-top: auto; padding: 0 2px 0 6px; }
.qs-price-wrap { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.qs-tile .item-price { font-size: var(--fs-lg); font-weight: 600; color: var(--text); }
.qs-choices { order: -1; font-size: var(--fs-xs); font-weight: 400; color: var(--muted); }
/* The add mark: a quiet square with a plus. The whole tile is the button. */
.qs-add {
  position: relative; flex: none; width: 32px; height: 32px; margin-left: auto; border-radius: var(--radius-sm);
  background: var(--primary-soft); box-shadow: inset 0 0 0 1px var(--primary);
}
.qs-add::before, .qs-add::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; border-radius: 1px; background: var(--primary); transform: translate(-50%, -50%); }
.qs-add::after { transform: translate(-50%, -50%) rotate(90deg); }
.qs-tile .item-count { top: 14px; right: 14px; }

/* The order: a small product picture per line, each priced choice set in under
   its item, the total and the pay button. */
.cart-count {
  display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 7px; margin-left: 8px;
  border-radius: 4px; background: var(--surface-2); color: var(--text); box-shadow: inset 0 0 0 1px var(--border);
  font-size: var(--fs-sm); font-weight: 600; vertical-align: 3px; font-variant-numeric: tabular-nums;
}
.cart-count:empty { display: none; }
.cart-line.has-thumb { grid-template-columns: 44px minmax(0, 1fr) auto; column-gap: 12px; }
.cart-thumb { grid-row: 1 / span 2; align-self: start; width: 44px; height: 44px; padding: 3px; border-radius: var(--radius-sm); background: var(--surface-2); }
.cart-line.has-thumb > .cart-line-sub, .cart-line.has-thumb > .cart-options, .cart-line.has-thumb > .qty { grid-column: 2 / -1; }
.cart-line.has-thumb .cart-line-name { font-size: var(--fs-md); }
.cart-line-choices { color: var(--text); font-weight: 400; }
.cart-options { grid-column: 1 / -1; list-style: none; margin: 0; padding: 0 0 0 12px; border-left: 1px solid var(--border-strong); display: grid; gap: 2px; }
.cart-option { display: flex; justify-content: space-between; gap: 12px; font-size: var(--fs-sm); color: var(--muted); font-weight: 400; }
.cart-option-name { min-width: 0; overflow-wrap: anywhere; }
.cart-option-total { font-variant-numeric: tabular-nums; color: var(--text); font-weight: 500; flex: none; }
.till-qs .cart-head h2 { display: flex; align-items: center; }

/* The suggestion: an offer at the foot of the menu, one tap to take. */
.qs-suggest {
  position: sticky; bottom: 12px; z-index: 5; margin: 16px 0 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 14px 14px 16px;
  border-radius: var(--radius-lg); background: var(--surface); color: var(--text);
  box-shadow: var(--elev-3);
}
.qs-suggest-title { flex: 1 1 auto; margin: 0; font-size: var(--fs-md); font-weight: 600; }
.qs-suggest-close { min-height: var(--tap-min); flex: none; order: 1; }
.qs-suggest-actions { order: 2; flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.qs-offer { flex: 0 1 auto; justify-content: flex-start; gap: 10px; min-height: 60px; min-width: 150px; padding: 6px 16px 6px 6px; text-align: left; }
.qs-offer-art { flex: none; width: 46px; height: 46px; padding: 3px; border-radius: var(--radius-sm); background: var(--surface-2); }
.qs-offer-text { display: flex; flex-direction: column; align-items: flex-start; }
.qs-offer-price { font-variant-numeric: tabular-nums; color: var(--text); font-weight: 600; }

/* The choice dialog: the item's picture at the head, pictures on the choices
   that have them (a drink, a cup size). */
.choice-dialog { width: min(680px, calc(100vw - 2 * var(--gutter))); }
.choice-dialog .dialog-body { display: flex; flex-direction: column; max-height: calc(100dvh - 32px); }
.ch-head { display: flex; align-items: center; gap: 16px; }
.ch-art { flex: none; width: 72px; height: 72px; padding: 6px; border-radius: var(--radius); background: var(--surface-2); }
.ch-head-text { min-width: 0; }
.ch-head h2 { margin: 0; font-size: var(--fs-xl); font-weight: 600; }
.ch-meta { color: var(--muted); font-weight: 400; margin: 4px 0 0; }
.ch-groups { display: grid; gap: 18px; margin-top: 16px; }
.ch-legend { display: flex; align-items: center; gap: 10px; width: 100%; margin-bottom: 8px; font-weight: 600; font-size: var(--fs-md); }
.ch-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)); gap: 8px; }
.ch-option {
  position: relative; display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 14px; margin: 0;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface);
  font-weight: 500; cursor: pointer; touch-action: manipulation;
  transition: background-color 120ms var(--ease), border-color 120ms var(--ease);
}
.ch-option:hover { background: var(--surface-2); }
.ch-option input { width: 22px; height: 22px; flex: none; margin: 0; accent-color: var(--primary); }
.ch-option:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); box-shadow: inset 0 0 0 1px var(--primary); }
.ch-option:has(input:disabled) { opacity: 0.55; cursor: not-allowed; }
.ch-option:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.ch-option input:focus-visible { outline: none; }
.ch-option-name { min-width: 0; overflow-wrap: anywhere; line-height: 1.25; }
.ch-extra { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--text); font-weight: 600; white-space: nowrap; }
/* Pictured choices: cards, the picture above the name. */
.ch-options-art { grid-template-columns: repeat(auto-fill, minmax(min(100%, 132px), 1fr)); gap: 8px; }
.ch-options-art .ch-option { flex-direction: column; justify-content: flex-start; gap: 4px; padding: 10px 8px 12px; text-align: center; border-radius: var(--radius); }
.ch-options-art .ch-option input { position: absolute; top: 10px; left: 10px; }
.ch-option-art { width: 64px; height: 64px; padding: 4px; border-radius: var(--radius-sm); background: var(--surface-2); }
.ch-options-art .ch-extra { margin-left: 0; }
.choice-dialog #ch-error { margin-top: 14px; }
/* "Add to order" stays in reach however long the choices run. */
.choice-dialog .dialog-body { padding-bottom: 0; }
.choice-dialog .actions {
  position: sticky; bottom: 0; z-index: 1; margin: 16px -24px 0; padding: 12px 24px 20px;
  background: var(--surface); box-shadow: 0 -1px 0 var(--border);
}

/* A wide screen: a roomier list, four tiles across. */
@media (min-width: 1400px) {
  .qs-menu { grid-template-columns: 200px minmax(0, 1fr); }
  .qs-grid { grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); }
}
/* The counter tablet in landscape, or a small laptop: the order takes its
   column, so the list narrows and the tiles keep three across. */
@media (min-width: 900px) and (max-width: 1199px) {
  .qs-menu { grid-template-columns: 148px minmax(0, 1fr); gap: 14px; }
  .qs-cat { padding: 8px 10px; }
  .qs-hero { grid-template-columns: minmax(0, 1fr) minmax(160px, 220px); gap: 8px 12px; }
  .qs-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: 10px; }
  .qs-tile .item-price { font-size: var(--fs-md); }
  .qs-desc { display: none; }
}
@media (max-width: 899px) {
  .till-qs .till-catalogue { padding-bottom: 16px; }
  /* Clear the sticky order bar. */
  .qs-suggest { bottom: calc(86px + env(safe-area-inset-bottom)); }
}
@media (min-width: 600px) and (max-width: 899px) {
  .qs-menu { grid-template-columns: 156px minmax(0, 1fr); gap: 14px; }
  .qs-hero { grid-template-columns: minmax(0, 1fr) minmax(170px, 240px); gap: 8px 14px; }
  .qs-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 160px), 1fr)); gap: 10px; }
}
/* A phone: the list becomes one row of words that scrolls and stays at the top. */
@media (max-width: 599px) {
  .qs-menu { display: block; margin-top: 8px; }
  .qs-rail { margin: 0 calc(-1 * var(--gutter)) 12px; padding: 8px var(--gutter); background: var(--bg); box-shadow: 0 1px 0 var(--border); }
  .qs-cats { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 0; background: none; box-shadow: none; border-radius: 0; }
  .qs-cats::-webkit-scrollbar { display: none; }
  .qs-cats li { flex: none; }
  .qs-cat {
    width: auto; min-height: var(--tap-min); padding: 0 14px; white-space: nowrap;
    background: var(--surface); box-shadow: inset 0 0 0 1px var(--border);
  }
  .qs-hero { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .qs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .qs-tile { padding: 6px 6px 10px; gap: 6px; }
  .qs-badge { top: 10px; left: 10px; max-width: calc(100% - 10px - 40px); padding: 1px 6px; }
  .qs-tile .item-count { top: 10px; right: 10px; }
  .qs-tile-text { padding: 0 4px; }
  .qs-desc { display: none; }
  .qs-tile .item-price { font-size: var(--fs-md); }
  .qs-tile-foot { padding: 0 0 0 4px; }
  .ch-art { width: 56px; height: 56px; }
  .ch-options { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .ch-options-art { grid-template-columns: repeat(auto-fill, minmax(min(100%, 96px), 1fr)); }
  .ch-option-art { width: 52px; height: 52px; }
  .ch-option { min-height: 50px; }
  .ch-groups { gap: 14px; }
  .choice-dialog .actions { margin: 12px -18px 0; padding: 10px 18px 16px; }
  /* The offer stays short on a phone: one row that scrolls sideways. */
  .qs-suggest { padding: 8px 12px 12px 14px; }
  .qs-suggest-actions { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .qs-suggest-actions::-webkit-scrollbar { display: none; }
  .qs-offer { flex: none; min-height: 56px; min-width: 0; padding: 4px 14px 4px 4px; }
  .qs-offer-art { width: 42px; height: 42px; }
}

/* ---- dialogs ---------------------------------------------------------------------- */

.dialog {
  width: min(560px, calc(100vw - 2 * var(--gutter)));
  max-height: calc(100dvh - 32px);
  padding: 0; border: 0; border-radius: var(--radius-lg);
  background: var(--surface); color: var(--text); box-shadow: var(--elev-3);
}
.dialog::backdrop { background: var(--backdrop); }
/* The one entrance: a dialog fades in over 160 ms, 4 px of travel. */
.dialog[open] { animation: dialog-in 160ms var(--ease); }
@keyframes dialog-in { from { opacity: 0; transform: translateY(4px); } }
.dialog-body { padding: 24px; overflow-y: auto; }
.dialog-body > h2:first-child { font-size: var(--fs-xl); font-weight: 600; }
@media (max-width: 479px) { .dialog-body { padding: 18px; } }
/* The amount due: the one figure the cashier reads aloud. */
.dialog .due {
  display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px;
  margin: 4px 0 18px; padding: 14px 16px; border-radius: var(--radius);
  background: var(--surface-2); font-size: var(--fs-md); font-weight: 500; color: var(--text);
}
.dialog .due strong { font-size: 2rem; font-weight: 650; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; color: var(--figure); }
.dialog .actions { justify-content: flex-end; }
.dialog .actions .btn { flex: 1 1 160px; }
.change { font-weight: 600; font-size: var(--fs-lg); margin: 10px 0 0; min-height: 1.5em; color: var(--ok-text); font-variant-numeric: tabular-nums; }
.result-ftn { font-family: var(--mono); font-size: 1.05rem; background: var(--surface-2); padding: 12px 14px; border-radius: var(--radius-sm); overflow-wrap: anywhere; }

/* ---- offline mode ------------------------------------------------------------------------ */

/* The till's status bar: online or offline, the pool, and what waits to sync.
   Online is a quiet bar on the surface: a green dot, the Wi-Fi icon and the
   word. Offline inverts the whole bar (ink in light, the pale accent in dark),
   swaps the icon and the word, so the change is unmistakable without any
   motion: colour, an icon and words, never colour alone. */
.till-status {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px;
  min-height: var(--tap-min); padding: 4px 6px 4px 12px; margin: 0 0 12px;
  border-radius: var(--radius); box-shadow: inset 0 0 0 1px var(--border);
  background: var(--surface); color: var(--text); font-size: var(--fs-sm);
  transition: background-color 160ms var(--ease), color 160ms var(--ease);
}
.till-status .status-dot {
  position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--online-dot); flex: none;
}
.till-status .status-icon { color: var(--online-text); }
.till-status .status-text strong { color: var(--online-text); }
.till-status .status-icon { display: inline-grid; place-items: center; flex: none; margin-left: -4px; }
.till-status .status-icon .si-offline { display: none; }
.till-status[data-mode="offline"] .status-icon .si-online { display: none; }
.till-status[data-mode="offline"] .status-icon .si-offline { display: block; }
.till-status .status-version {
  display: inline-flex; align-items: center; min-height: var(--tap-min); padding: 0 6px;
  color: inherit; font-weight: 400; font-size: var(--fs-xs); white-space: nowrap;
}
.till-status .status-version .sv-short { display: none; }
@media (max-width: 1199px) {
  .till-status .status-version .sv-full { display: none; }
  .till-status .status-version .sv-short { display: inline; }
}
.till-status .status-text { flex: 1 1 180px; min-width: 0; overflow-wrap: anywhere; }
.till-status .status-text strong { font-weight: 600; }
.till-status .status-reason { font-weight: 400; }
.till-status .status-figures { display: inline-flex; flex-wrap: wrap; gap: 4px 12px; font-variant-numeric: tabular-nums; }
.till-status .status-pool.is-low strong { color: var(--danger); }
.till-status .status-sync { font-weight: 600; }
.till-status .status-link {
  display: inline-flex; align-items: center; min-height: var(--tap-min); padding: 0 6px;
  color: inherit; font-weight: 500;
}
.till-status[data-mode="offline"] {
  background: var(--offline-bg); color: var(--offline-text); box-shadow: none;
}
.till-status[data-mode="offline"] .status-icon,
.till-status[data-mode="offline"] .status-text strong { color: inherit; }
/* Offline: a steady dot, no pulse. The bar's colour, icon and word say it. */
.till-status[data-mode="offline"] .status-dot { background: var(--offline-dot); }
.till-status[data-mode="offline"] .status-pool.is-low strong { color: inherit; text-decoration: underline; }
.notice-info-quiet { background: var(--surface-2); color: var(--muted); }

.pool-actions { margin-bottom: 28px; }
/* The receipt prints from here; it is never seen. */
.print-frame { position: absolute; width: 1px; height: 1px; border: 0; opacity: 0; pointer-events: none; left: -9999px; }
.danger-zone { border-top: 1px solid var(--border); padding-top: 16px; }
.step-list { padding-left: 22px; margin: 0 0 16px; }
.step-list li + li { margin-top: 6px; }
.ftn-list { list-style: none; padding: 0; margin: 8px 0 0; font-size: 0.9rem; display: grid; gap: 4px; }
.recon { margin: 16px 0 8px; }
.recon details summary { cursor: pointer; min-height: var(--tap-min); display: flex; align-items: center; font-weight: 600; }
.offline-panel { margin: 0 0 20px; }
.offline-panel h2 { font-size: var(--fs-lg); }
.offline-panel .form { margin-top: 12px; }

/* ---- the printer: status chip, and the connect panel ------------------------------------- */

.till-status .status-printer {
  display: inline-flex; align-items: center; gap: 8px; min-height: var(--tap-min); padding: 0 12px;
  border: 1px solid color-mix(in srgb, currentColor 35%, transparent); border-radius: var(--radius-sm); background: transparent; color: inherit;
  font: inherit; font-weight: 500; cursor: pointer; max-width: 100%; text-align: left;
  transition: background-color 120ms var(--ease);
}
.till-status .status-printer:hover { background: color-mix(in srgb, currentColor 10%, transparent); }
.till-status .status-printer .printer-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none; }
.till-status .status-printer[data-connected="1"] .printer-dot { background: var(--online-dot); }
.till-status[data-mode="offline"] .status-printer[data-connected="1"] .printer-dot { background: var(--offline-text); }

.printer-panel { margin-top: 12px; }
.pp-status {
  display: flex; align-items: center; gap: 10px; margin: 0 0 14px; padding: 12px 14px;
  border-radius: var(--radius-sm); background: var(--surface-2); font-weight: 500;
}
.pp-status.is-on { background: var(--ok-bg); color: var(--ok-text); }
.pp-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); flex: none; }
.pp-status.is-on .pp-dot { background: var(--success); }
.pp-connect { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin: 0 0 16px; }
.pp-way { flex-direction: column; align-items: flex-start; text-align: left; min-height: 72px; gap: 2px; padding: 12px 16px; border-radius: var(--radius); }
.pp-way-help { font-weight: 400; font-size: var(--fs-sm); color: var(--muted); }
.pp-options { border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; margin: 0; min-width: 0; }
.pp-options legend { font-weight: 600; padding: 0 4px; }
.pp-options .field { margin-top: 10px; }
.pp-label { display: block; font-weight: 600; margin-bottom: 6px; }
.pp-check { display: flex; align-items: center; gap: 10px; min-height: var(--tap-min); }
.pp-check input { width: 22px; height: 22px; flex: none; accent-color: var(--primary); }
.pp-result { min-height: 1.4em; margin: 8px 0 0; }

/* ---- the receipt card, after each sale ------------------------------------------------------
   The receipt as a paper strip: always white paper and black ink, in both
   themes; the card around it follows the theme. The strip keeps the printer's
   grid (48 or 32 characters) and scales its type to fit, so a 390 px phone
   never scrolls sideways. */

.receipt-card { width: min(600px, calc(100vw - 2 * var(--gutter))); }
.receipt-card .dialog-body { display: flex; flex-direction: column; gap: 12px; max-height: calc(100dvh - 32px); }
.rc-head h2 { margin: 0; font-size: var(--fs-xl); font-weight: 600; font-variant-numeric: tabular-nums; }
.rc-meta { margin: 4px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; color: var(--muted); font-family: var(--mono); font-size: 0.85rem; overflow-wrap: anywhere; }
.rc-meta .tag { font-family: var(--font); }
.rc-change { margin: 8px 0 0; font-size: var(--fs-xl); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ok-text); }
.rc-stage {
  border-radius: var(--radius); background: var(--stage-bg); overflow: hidden;
  display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto;
  box-shadow: inset 0 0 0 1px var(--border);
}
.rc-demo {
  margin: 0; padding: 6px 12px; text-align: center; font-weight: 600; letter-spacing: 0.06em; font-size: 0.75rem;
  background: var(--demo-bg); color: var(--demo-text);
}
.rc-scroll { overflow: auto; overflow-x: hidden; padding: 16px 10px 20px; max-height: min(52dvh, 560px); min-height: 160px; }
.rc-scroll:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
.rc-paper {
  --cols: 48;
  /* 0.6 em is a monospace advance; the paper's padding is 2 x 12 px. */
  font: min(12.5px, calc((min(600px, 100vw - 2 * var(--gutter)) - 40px - 20px - 24px) / (var(--cols) * 0.61)))/1.35 var(--mono);
  /* 1ch is exactly 0.6 em in any monospace face, as on the printed receipt. */
  font-size-adjust: ch-width 0.6;
  font-variant-ligatures: none;
  width: fit-content; max-width: 100%; margin: 0 auto; padding: 12px;
  background: #ffffff; color: #000000; border-radius: 2px;
  box-shadow: 0 0 0 1px rgb(0 0 0 / 0.12), 0 2px 6px rgb(0 0 0 / 0.08);
}
.rc-paper.paper-58 { --cols: 32; }
.rc-paper .rl { white-space: pre; min-height: 1.35em; overflow: hidden; width: calc(var(--cols) * 1ch); max-width: 100%; }
.rc-paper .rl-bold, .rc-paper .rl-big { font-weight: 800; }
.rc-paper .rl-big { transform: scaleY(2); transform-origin: center; margin: 0.65em 0; /* double height, as GS ! 1 prints it */ }
.rc-paper .rl-qr { white-space: normal; padding: 6px 0; }
.rc-paper .rl-qr svg { display: block; width: 58%; max-width: 180px; height: auto; margin: 0 auto; }
.rc-paper .qr-dark { stroke: #000000; }
.rc-paper .rl-logo { white-space: normal; padding: 6px 0 8px; }
.rc-paper .rl-logo img { display: block; width: auto; max-width: 40%; max-height: 72px; height: auto; margin: 0 auto; }
/* .is-feeding (set by till.js as the receipt prints) no longer animates. */
.rc-print { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0; min-height: var(--tap-min); font-weight: 500; }
.rc-print[data-state="ok"] { color: var(--ok-text); }
.rc-print[data-state="warn"] { color: var(--warn-text); }
.rc-print[data-state="error"] { color: var(--error-text); }
.rc-print[data-state="busy"] .rc-print-text::before {
  content: ""; display: inline-block; width: 0.8em; height: 0.8em; margin-right: 8px; vertical-align: -0.1em;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: rc-spin 900ms linear infinite;
}
@keyframes rc-spin { to { transform: rotate(360deg); } }
.receipt-card .rc-actions { margin-top: 0; }
.receipt-card .rc-actions .btn { flex: 1 1 180px; min-height: 56px; }
.receipt-card #rc-new { font-size: 1.0625rem; }
@media (max-width: 479px) {
  .receipt-card .dialog-body { padding: 16px; }
  .rc-scroll { max-height: 46dvh; }
  .receipt-card .rc-actions { flex-direction: column-reverse; }
  .receipt-card .rc-actions .btn { flex: none; width: 100%; }
}

/* ---- print: the end-of-day summary prints plainly ---------------------------------------- */

@media print {
  .demo-strip, .topbar, .actions, .inline-form, .messages, .cart-bar { display: none !important; }
  body { background: #fff; color: #000; }
  .card, .stat, .table { box-shadow: none; border: 1px solid #999; }
  .stat-hero { background: #fff; color: #000; }
  .stat-hero .stat-label, .stat-hero .stat-note, .stat-hero .stat-value { color: #000; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---- settings: the receipt logo -------------------------------------------------- */

.logo-settings { margin-bottom: 24px; }
.logo-settings h2 { margin-top: 0; }
.logo-previews {
  display: grid; gap: var(--gutter); margin: 16px 0;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
.logo-preview, .logo-chosen { margin: 0; min-width: 0; }
.logo-preview figcaption, .logo-chosen figcaption { font-weight: 600; margin-bottom: 8px; font-size: 0.95rem; }
.logo-screen, .logo-paper, .logo-chosen img {
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); border-radius: var(--radius); padding: 16px;
}
.logo-screen { background: var(--surface-2); min-height: 160px; }
.logo-screen img { display: block; max-width: 100%; max-height: 160px; width: auto; height: auto; }
/* The paper is white in both themes, as it is in the printer. The strip is the
   printable width; the logo takes its share of it, dot for dot. */
.logo-paper { background: #ffffff; border-color: var(--border-strong); }
.logo-paper img { display: block; width: 50%; height: auto; image-rendering: pixelated; }
.logo-chosen { margin: 0 0 16px; }
.logo-chosen img { max-width: 100%; max-height: 160px; background: var(--surface-2); }
.logo-none { color: var(--muted); margin: 12px 0; }
.logo-form { max-width: 640px; }
.logo-remove { margin-top: 12px; }

/* ---- the item form: the picture picker -------------------------------------------- */

.art-picker {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 104px), 1fr)); gap: 8px;
  max-height: 392px; overflow-y: auto; padding: 4px; margin-top: 8px;
  border-radius: var(--radius); background: var(--surface-2);
}
.art-picker .art-choice {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 0;
  min-height: var(--tap); padding: 8px 6px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text); font-size: var(--fs-xs); font-weight: 500; line-height: 1.25;
  text-align: center; cursor: pointer; transition: border-color 120ms var(--ease), background-color 120ms var(--ease);
}
.art-choice input { position: absolute; opacity: 0; pointer-events: none; }
.art-choice img { width: 64px; height: 64px; padding: 3px; border-radius: var(--radius-sm); background: var(--surface-2); }
.art-choice:hover { border-color: var(--primary); }
.art-choice:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); box-shadow: inset 0 0 0 2px var(--primary); }
.art-choice:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }

/* ---- kiosk orders at the counter ------------------------------------------------ */

/* "Kiosk orders" in the cart's head, with a live count; the loaded order's
   number under it; the queue as a dialog of big rows. */
.cart-head { gap: 8px; }
.cart-head h2 { margin-right: auto; }
.kiosk-orders { gap: 8px; min-height: var(--tap); padding: 6px 12px; font-weight: 500; white-space: nowrap; }
.kiosk-orders-icon { display: inline-grid; color: var(--muted); }
.kiosk-orders.has-orders { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
.kiosk-count {
  display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 7px;
  border-radius: 4px; background: var(--primary); color: var(--on-primary);
  font-size: var(--fs-sm); font-weight: 600; font-variant-numeric: tabular-nums;
}
.kiosk-loaded {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 10px 0 0; padding: 10px 14px;
  border-radius: var(--radius); background: var(--surface-2); color: var(--text);
}
.kiosk-loaded-label { font-size: var(--fs-sm); font-weight: 500; color: var(--muted); }
.kiosk-loaded-number { font-size: var(--fs-xl); font-weight: 600; color: var(--figure); }
.kiosk-loaded-meta { font-weight: 500; }

.kiosk-queue { width: min(760px, calc(100vw - 2 * var(--gutter))); }
.kq-list { display: grid; gap: 10px; margin: 16px 0 0; padding: 0; list-style: none; }
.kq-order {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 8px 16px;
  padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface);
}
.kq-number { font-size: var(--fs-2xl); font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.kq-main { display: grid; gap: 4px; min-width: 0; }
.kq-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.kq-name { font-weight: 600; overflow-wrap: anywhere; }
.kq-meta { color: var(--muted); font-size: var(--fs-sm); }
.kq-total { font-size: var(--fs-lg); font-weight: 600; color: var(--figure); font-variant-numeric: tabular-nums; white-space: nowrap; }
.kq-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.kq-paid { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--border); }
.kq-head { margin: 0 0 4px; }
.kq-order-paid.is-review { border-color: var(--warn-border); background: var(--warn-bg); }
.kq-note { font-size: var(--fs-sm); font-weight: 600; overflow-wrap: anywhere; }
.kq-actions .btn-lg { min-width: 96px; }
@media (max-width: 560px) {
  .kq-order { grid-template-columns: auto minmax(0, 1fr); }
  .kq-total { grid-column: 2; }
  .kq-actions { grid-column: 1 / -1; }
  .kq-actions .btn { flex: 1; }
  .kiosk-orders > span:not([class]) { display: none; }
}

/* Settings → Kiosks: the pairing code, shown once. */
.kiosk-code {
  margin: 12px 0; font-family: var(--mono); font-size: clamp(2rem, 7vw, 3rem); font-weight: 600;
  letter-spacing: 0.12em; color: var(--primary); overflow-wrap: anywhere;
}
.kiosk-pairing input[readonly] { width: 100%; font-family: var(--mono); font-size: var(--fs-sm); }
.kiosk-add { margin-top: 12px; max-width: 520px; }

/* ---- reports (BIR Annex A items 10, 13 and 17) -------------------------------------------- */

/* The way back to the reports list, above a report's heading: a breadcrumb. */
.eyebrow { margin: 0 0 4px; font-size: var(--fs-sm); font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--muted); }
.eyebrow a { color: inherit; }
.btn .nav-ico { width: 18px; height: 18px; }

/* The reports list: one row per report, the whole row a link, an icon in a
 * tinted chip, a chevron. Hairlines between rows, one card around them. */
.report-list {
  list-style: none; margin: 0 0 28px; padding: 0;
  background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--elev-1); overflow: hidden;
}
.report-list li + li { border-top: 1px solid var(--border); }
.report-row {
  position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr) 10px; align-items: center;
  column-gap: 14px; min-height: 72px; padding: 12px 18px 12px 16px;
  color: var(--text); text-decoration: none; font-weight: 500;
  transition: background-color 120ms var(--ease);
}
.report-row:hover, .report-row:focus-visible { background: var(--surface-2); }
.report-row:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
.report-row::after {
  content: ""; width: 8px; height: 8px; border-top: 2px solid var(--muted); border-right: 2px solid var(--muted);
  transform: rotate(45deg);
}
.report-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.report-text strong { font-size: var(--fs-md); font-weight: 600; }
.report-text span { font-size: var(--fs-sm); color: var(--muted); }
/* One quiet icon tile for every report: the words tell them apart. */
.report-ico, .report-row .disc-ico {
  display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius);
  background: var(--surface-2); color: var(--muted);
}
.report-ico .nav-ico { width: 22px; height: 22px; }

.report-actions { margin-top: 0; }
.report-chips { margin: 0 0 12px; }
.period-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 12px; margin: 0 0 18px; }
.period-field { display: flex; flex-direction: column; gap: 4px; flex: 1 1 160px; max-width: 220px; }
.period-field label { font-size: var(--fs-sm); font-weight: 600; }
.period-form .btn { min-height: var(--tap); }
@media (max-width: 479px) { .period-field { max-width: none; } .period-form .btn { flex: 1 1 100%; } }
.report-head { margin-bottom: 16px; }
.report-head p { margin: 0 0 4px; }
.report-head .help { margin-top: 8px; }
@media (min-width: 768px) and (max-width: 1199px) { .book-table .col-wide { display: none; } }
/* A tablet: the date and the children move under the name. */
@media (min-width: 768px) and (max-width: 1023px) {
  .book-table .col-mid { display: none; }
  .book-table .al-meta { display: block; font-size: var(--fs-xs); color: var(--muted); }
}
.book-table td.num, .book-table th.num, .summary-table td.num { white-space: nowrap; }
.book-table tfoot th { background: var(--surface-2); font-size: var(--fs-sm); text-transform: none; letter-spacing: 0; color: var(--text); }
.book-table .al-ico-book, .al-only { display: none; }
.book-table td.al-icon .disc-ico { width: 28px; height: 28px; border-radius: 8px; vertical-align: middle; margin-right: 8px; }
@media (max-width: 599px) {
  .report-head ~ .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .report-head ~ .stat-grid .stat-hero, .book-stats .stat:nth-child(3), .summary-stats .stat:last-child { grid-column: 1 / -1; }
  .report-head ~ .stat-grid .stat-value { font-size: var(--fs-xl); }
  .report-head ~ .stat-grid .stat-hero .stat-value { font-size: 2rem; }
}
@media (max-width: 767px) {
  .table.stack.applist.book-table td.al-id > span:first-child { font-family: inherit; font-size: 0.9375rem; font-weight: 600; }
  .book-table tfoot { display: none; }
  .table.stack.applist .al-ico-book { display: inline-grid; background: none; box-shadow: none; }
  .table.stack.applist .al-ico-book .disc-ico { width: 40px; height: 40px; border-radius: var(--radius); margin: 0; background: var(--surface-2); }
  .table.stack.applist td.al-only { display: block; }
}

/* The audit trail: an app list at every width, newest first. */
.audit-list {
  list-style: none; margin: 0 0 20px; padding: 0;
  background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--elev-1); overflow: hidden;
}
.audit-row { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: start; padding: 12px 16px; }
.audit-row + .audit-row { border-top: 1px solid var(--border); }
/* Each kind of event has its own line icon on a neutral tile; voids and
   warnings alone take the error colour, so they stand out in the trail. */
.audit-ico { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: var(--radius); background: var(--surface-2); color: var(--muted); }
.audit-ico-void, .audit-ico-warn { background: var(--error-bg); color: var(--error-text); }
.audit-text { min-width: 0; }
.audit-what { margin: 0; overflow-wrap: anywhere; }
.audit-what strong { margin-right: 4px; }
.audit-meta { margin: 2px 0 0; font-size: var(--fs-sm); color: var(--muted); }

.export-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.export-list li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; }
.export-list .nav-ico { color: var(--primary); margin-top: 2px; }
.export-list strong { display: block; font-family: var(--mono); font-size: var(--fs-sm); overflow-wrap: anywhere; }

.about-hero { display: flex; align-items: center; gap: 18px; margin-bottom: var(--gutter); }
.about-mark { width: 56px; height: 56px; border-radius: var(--radius); background: var(--mark-bg); flex: none; object-fit: contain; box-shadow: inset 0 0 0 1px var(--border); }
.about-version { margin: 0; font-size: var(--fs-xl); font-weight: 600; }
.about-hero .muted { margin: 4px 0 0; }

@media print {
  .app-foot { padding: 0; }
  .report-chips, .period-form, .nav-scrim, .nav-toggle { display: none !important; }
  .book-table, .summary-table { font-size: 11px; }
}