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

   The palette comes from the G8 mark: G8 Orange (#F57F01) and G8 Deep Teal
   (#094E69), on warm greys. Teal carries primary actions and text accents;
   brand orange is for the mark, active states, focus and key figures, and is
   never used for body or small text on a light surface (2.65:1 on white). The
   darker orange-700 (#A65300, 5.44:1 on white) is the orange that may carry text.

   Tokens live on :root in three layers: the brand ramps, the warm neutrals, 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. */

/* Manrope: a geometric grotesk with the G8 mark's construction. Self-hosted,
   because the CSP allows fonts from this origin only. OFL-1.1, see
   ../fonts/OFL-Manrope.txt. Latin-ext carries the peso sign. */
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url("../fonts/manrope-latin-wght-normal.woff2") format("woff2-variations"),
       url("../fonts/manrope-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url("../fonts/manrope-latin-ext-wght-normal.woff2") format("woff2-variations"),
       url("../fonts/manrope-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  color-scheme: light;

  /* ---- brand ramps ---- */
  --g8-orange-50: #fff5ea;
  --g8-orange-100: #ffe6cc;
  --g8-orange-200: #ffcb94;
  --g8-orange-300: #ffa94d;
  --g8-orange-400: #ff9a2e;
  --g8-orange: #f57f01;          /* the mark */
  --g8-orange-600: #c46500;
  --g8-orange-700: #a65300;
  --g8-orange-800: #7a3d00;
  --g8-orange-900: #3d2200;

  --g8-teal-50: #e9f3f6;
  --g8-teal-100: #cde4ec;
  --g8-teal-200: #9ad8ee;
  --g8-teal-300: #6cc4e4;
  --g8-teal-400: #2c86aa;
  --g8-teal-500: #0f6a8c;
  --g8-teal: #094e69;            /* the mark */
  --g8-teal-700: #073e54;
  --g8-teal-800: #0c2c39;
  --g8-teal-900: #04222e;

  /* ---- 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 */

  --primary: var(--g8-teal);
  --primary-hover: var(--g8-teal-700);
  --on-primary: #ffffff;
  --primary-soft: var(--g8-teal-50);
  --primary-soft-border: var(--g8-teal-100);

  --accent: var(--g8-orange);            /* fills and marks only, never small text */
  --on-accent: var(--n-900);
  --accent-ink: var(--g8-orange-700);    /* orange that may carry text */
  --accent-soft: var(--g8-orange-50);
  --figure: var(--g8-orange-700);        /* key figures: totals, net sales */

  --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;
  --info-bg: var(--g8-teal-50);
  --info-text: var(--g8-teal-700);

  --focus: var(--g8-orange-600);         /* 4.03:1 on white, 3.67:1 on the page */
  --focus-on-brand: var(--g8-orange-300);

  /* The top bar is the brand's band: deep teal in both themes. */
  --bar-bg: var(--g8-teal);
  --bar-text: #ffffff;
  --bar-muted: #c9dce3;
  --bar-hover: rgb(255 255 255 / 0.1);
  --bar-mark: var(--g8-orange-400);

  --demo-bg: var(--n-900);
  --demo-text: #f3efe8;
  --demo-chip-bg: var(--g8-orange);
  --demo-chip-text: var(--n-900);

  /* Offline inverts the bar: ink in light, pale orange in dark. */
  --online-bg: var(--ok-bg);
  --online-text: var(--ok-text);
  --online-border: var(--ok-border);
  --online-dot: var(--success);
  --offline-bg: var(--n-900);
  --offline-text: #ffffff;
  --offline-dot: var(--g8-orange-400);
  --offline-soft: var(--g8-orange-50);
  --offline-soft-text: var(--g8-orange-800);

  --stage-bg: #e9eef0;                    /* the receipt card's counter-top */
  --motif: var(--g8-teal-100);            /* the circuit traces in empty states */
  --hero-bg: var(--g8-teal);
  --hero-text: #ffffff;
  --hero-muted: #c9dce3;
  --hero-figure: var(--g8-orange-300);    /* 4.79:1 on teal, large text */
  --hero-motif: rgb(255 255 255 / 0.12);

  /* Elevation: a shadow in light, an edge in dark. Never both. */
  --elev-1: 0 1px 2px rgb(28 27 25 / 0.06), 0 2px 8px rgb(28 27 25 / 0.05);
  --elev-2: 0 2px 4px rgb(28 27 25 / 0.06), 0 10px 28px rgb(9 78 105 / 0.12);
  --elev-3: 0 4px 12px rgb(28 27 25 / 0.12), 0 24px 64px rgb(9 78 105 / 0.22);
  --elev-cta: 0 2px 4px rgb(9 78 105 / 0.2), 0 8px 20px rgb(9 78 105 / 0.22);

  /* ---- type ---- */
  --font: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --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.5rem;      /* 24: h1 on phones, figures */
  --fs-2xl: 1.875rem;   /* 30: h1, stat values */
  --fs-3xl: 2.75rem;    /* 44: the hero figure */

  /* ---- shape and spacing ---- */
  --radius-lg: 16px;
  --radius: 12px;
  --radius-sm: 10px;
  --tap: 48px;
  --tap-min: 44px;
  --gutter: 16px;
  --topbar-h: 60px;
  --demo-h: 28px;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

@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;

    --primary: var(--g8-teal-300);
    --primary-hover: var(--g8-teal-200);
    --on-primary: var(--g8-teal-900);
    --primary-soft: #12303c;
    --primary-soft-border: #1d4a5c;

    --accent: var(--g8-orange);
    --on-accent: var(--n-900);
    --accent-ink: var(--g8-orange-400);
    --accent-soft: #2e1f0d;
    --figure: var(--g8-orange-400);

    --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;
    --info-bg: #12303c;
    --info-text: #cde4ec;

    --focus: var(--g8-orange-400);
    --focus-on-brand: var(--g8-orange-400);

    --bar-bg: var(--g8-teal-800);
    --bar-muted: #b3c8d0;

    --demo-bg: var(--g8-orange);
    --demo-text: var(--n-900);
    --demo-chip-bg: var(--n-900);
    --demo-chip-text: var(--g8-orange-200);

    --offline-bg: var(--g8-orange-100);
    --offline-text: var(--g8-orange-900);
    --offline-dot: var(--g8-orange-600);
    --offline-soft: #2e1f0d;
    --offline-soft-text: var(--g8-orange-200);

    --stage-bg: #0f1a1e;
    --motif: #1d4a5c;
    --hero-bg: var(--g8-teal-800);
    --hero-muted: #b3c8d0;
    --hero-figure: var(--g8-orange-400);
    --hero-motif: rgb(108 196 228 / 0.14);

    --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 24px 64px rgb(0 0 0 / 0.6);
    --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: 500 var(--fs-md)/1.5 var(--font);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 { line-height: 1.2; margin: 0 0 0.5em; text-wrap: balance; letter-spacing: -0.02em; }
h1 { font-size: var(--fs-2xl); font-weight: 800; }
h2 { font-size: var(--fs-lg); font-weight: 750; letter-spacing: -0.01em; }
h3 { font-size: var(--fs-md); font-weight: 700; }
@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: 600; }
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: 750; }
.small { font-size: var(--fs-sm); }
.muted { color: var(--muted); font-weight: 500; }
h1 .muted { font-weight: 600; }
.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: 600;
  letter-spacing: 0.01em;
  text-align: center;
}
.demo-strip strong {
  padding: 1px 8px; border-radius: 999px;
  background: var(--demo-chip-bg); color: var(--demo-chip-text);
  font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.75rem;
}

/* ---- 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;
}
/* One trace and ring at the bar's right edge: the mark's circuit, quietly. */
.topbar::after {
  content: ""; position: absolute; right: -40px; top: -18px; width: 320px; height: 120px; pointer-events: none;
  background: var(--bar-hover);
  -webkit-mask: url("../brand/circuit.svg") no-repeat right top / 320px 120px;
          mask: url("../brand/circuit.svg") no-repeat right top / 320px 120px;
}
.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: 800; 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: 34px; height: 34px; flex: none;
  border-radius: 9px; background: #ffffff;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.25);
}
.brand-name { display: inline-flex; align-items: baseline; gap: 6px; }
.brand-name small { font-size: 0.6875rem; font-weight: 700; 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; }
.nav a {
  position: relative;
  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: 650; 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: an orange trace that ends in a ring, as on the mark. */
.nav a[aria-current="page"]::after {
  content: ""; position: absolute; left: 12px; right: 20px; bottom: 5px; height: 2px;
  border-radius: 2px; background: var(--bar-mark);
}
.nav a[aria-current="page"]::before {
  content: ""; position: absolute; right: 10px; bottom: 2px; width: 8px; height: 8px;
  border-radius: 50%; border: 2px solid 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: 600; }
.topbar .btn-quiet { color: var(--bar-text); border-color: rgb(255 255 255 / 0.28); }
.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; }
}

/* ---- 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; }

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

/* Empty states carry the mark's traces above the words. */
.empty { color: var(--muted); text-align: center; padding: 24px 16px; }
.empty::before {
  content: ""; display: block; width: 160px; height: 60px; margin: 0 auto 12px;
  background: var(--motif);
  -webkit-mask: url("../brand/circuit.svg") no-repeat center / contain;
          mask: url("../brand/circuit.svg") no-repeat center / contain;
}
.empty p:last-child { margin-bottom: 0; }

/* ---- 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: 700; line-height: 1.2; text-align: center; text-decoration: none;
  cursor: pointer; touch-action: manipulation; user-select: none;
  transition: background-color 150ms var(--ease), border-color 150ms var(--ease), box-shadow 150ms var(--ease), transform 80ms var(--ease);
}
.btn:active { transform: translateY(1px); }
.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: 64px; font-size: 1.25rem; font-weight: 800; letter-spacing: -0.01em; border-radius: var(--radius); }
.btn-block { width: 100%; }
.btn-primary.btn-lg:not(:disabled), .btn-primary.btn-xl:not(:disabled) { box-shadow: var(--elev-cta); }
.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: 700; }
.notice p:last-child { margin: 0; }

.callout {
  border-radius: var(--radius-lg); padding: 18px 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: 700; 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 9px; border-radius: 999px;
  font-size: 0.75rem; font-weight: 700; 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: 700; 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: 700; }
.check { display: flex; align-items: center; gap: 12px; min-height: var(--tap); font-weight: 650; 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: 600 !important;
  transition: border-color 150ms var(--ease), background-color 150ms 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: 8px;
  background: var(--surface-2); color: var(--text); font: inherit; font-weight: 700;
}
.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; }
.search-form { margin-bottom: 16px; max-width: 520px; }

/* Setup steps: numbered rings on one trace. Done steps fill orange. */
.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: 650; 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: 2px solid var(--border-strong); color: var(--muted); font-size: var(--fs-xs); font-weight: 800;
}
.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 PIN pad ------------------------------------------------------ */

.sign-in-head { margin: 8px 0 20px; }
.sign-in-head h1 { margin: 0; }
.sign-in-head p { margin: 4px 0 0; color: var(--muted); font-weight: 600; }
.sign-in { position: relative; overflow: hidden; }
.person-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.person {
  display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 8px 12px;
  border: 1px solid var(--border-strong); border-radius: var(--radius); cursor: pointer;
  background: var(--surface); font-weight: 700 !important; line-height: 1.25;
  transition: border-color 150ms var(--ease), background-color 150ms var(--ease);
}
.person:hover { border-color: var(--primary); }
.person small { display: block; font-weight: 600; color: var(--muted); font-size: var(--fs-xs); }
.person:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); box-shadow: inset 0 0 0 1px var(--primary); }
.person:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.pin-input { font-size: 1.75rem; letter-spacing: 0.4em; text-align: center; font-family: var(--mono); min-height: 60px; }
.pinpad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; max-width: 340px; margin: 4px auto 0; }
.key {
  display: grid; place-items: center;
  min-height: 64px; border-radius: var(--radius); border: 1px solid var(--border);
  background: var(--surface-2); color: var(--text); font: 700 1.625rem var(--font); cursor: pointer;
  font-variant-numeric: tabular-nums; touch-action: manipulation;
  transition: background-color 120ms var(--ease), transform 80ms var(--ease);
}
.key:hover { background: var(--surface-3); }
.key:active { background: var(--primary-soft); transform: scale(0.97); }
.key-fn { font-size: var(--fs-md); font-weight: 700; color: var(--muted); background: transparent; }
.key svg { width: 28px; height: 28px; }

/* ---- 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: 0.75rem; font-weight: 750; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); background: var(--surface-2); }
.table th.num, .table td.num { text-align: right; }
.table td.num { font-weight: 700; }
.table tbody tr { transition: background-color 120ms var(--ease); }
.table tbody tr:hover { background: color-mix(in srgb, var(--primary-soft) 55%, transparent); }
.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: 0.75rem; font-weight: 750; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em;
  }
  .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; }
}

/* ---- 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: 650; font-variant-numeric: tabular-nums; min-width: 0; overflow-wrap: anywhere; }
.totals .minor { font-size: var(--fs-sm); padding: 5px 0; }
.totals .minor dd { font-weight: 550; }
.totals .grand {
  align-items: baseline; padding-top: 12px; margin-top: 4px;
  border-top: 2px solid var(--text); border-bottom: 0;
}
.totals .grand dt { color: var(--text); font-weight: 750; font-size: var(--fs-lg); }
.totals .grand dd { font-size: var(--fs-2xl); font-weight: 800; letter-spacing: -0.02em; 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: 700; }

/* ---- 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: 700; 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: 750; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted);
}
.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-xs); color: var(--muted); font-weight: 700; }
.stat-value { font-size: var(--fs-2xl); font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; margin-top: 2px !important; }
.stat-note { font-size: var(--fs-sm); color: var(--muted); margin-top: auto !important; padding-top: 4px; }
.stat-note a { color: inherit; }
.stat-hero {
  position: relative; overflow: hidden; grid-column: 1 / -1;
  padding: 22px 24px; background: var(--hero-bg); color: var(--hero-text); box-shadow: var(--elev-2);
}
.stat-hero::after {
  content: ""; position: absolute; right: -20px; bottom: -14px; width: 420px; height: 158px; pointer-events: none;
  background: var(--hero-motif);
  -webkit-mask: url("../brand/circuit.svg") no-repeat right bottom / contain;
          mask: url("../brand/circuit.svg") no-repeat right bottom / contain;
}
.stat-hero > * { position: relative; z-index: 1; }
.stat-hero .stat-label { color: var(--hero-muted); font-size: var(--fs-sm); }
.stat-hero .stat-note { color: var(--hero-muted); }
.stat-hero .stat-value { font-size: var(--fs-3xl); letter-spacing: -0.03em; }
.stat-hero .stat-value::first-letter { color: var(--hero-figure); font-weight: 700; }
@media (max-width: 479px) { .stat-hero .stat-value { font-size: 2.25rem; } }
.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 18px;
  border-radius: 999px; border: 1px solid var(--border-strong); background: var(--surface);
  color: var(--text); font: 700 var(--fs-sm) var(--font); text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color 150ms var(--ease), border-color 150ms var(--ease), color 150ms var(--ease);
}
.chip:hover { border-color: var(--primary); }
.chip[aria-pressed="true"], .chip[aria-current="true"] { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }

/* ---- 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("../brand/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; }
.cart-head h2 { margin: 0; font-size: var(--fs-xl); font-weight: 800; }
.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: 108px; 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 150ms var(--ease), transform 80ms var(--ease), background-color 120ms var(--ease);
}
.item:hover { box-shadow: var(--elev-2); }
.item:active { transform: scale(0.98); background: var(--surface-2); }
/* In the sale: a teal edge, and the count in an orange ring. */
.item:has(.item-count) { box-shadow: inset 0 0 0 2px var(--primary), var(--elev-1); }
.item-name { font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.item-price { font-variant-numeric: tabular-nums; color: var(--primary); font-weight: 800; font-size: 1.0625rem; letter-spacing: -0.01em; }
.item-flags { display: flex; flex-wrap: wrap; gap: 4px; }
.item-flags .tag { font-size: 0.6875rem; padding: 1px 7px; }
.item-count {
  position: absolute; top: -8px; right: -8px; min-width: 30px; height: 30px; padding: 0 7px;
  border-radius: 999px; background: var(--accent); color: var(--on-accent);
  box-shadow: 0 0 0 3px var(--bg);
  display: grid; place-items: center; font-weight: 800; font-size: var(--fs-sm); font-variant-numeric: tabular-nums;
}

.cart-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.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: 700; overflow-wrap: anywhere; }
.cart-line-total { text-align: right; font-weight: 800; 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: 700; }
.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: 700 1.25rem var(--font); cursor: pointer; touch-action: manipulation;
  transition: background-color 120ms var(--ease), border-color 120ms var(--ease);
}
.qty button:hover { background: var(--surface-2); border-color: var(--primary); }
.qty input { width: 88px; min-height: var(--tap); text-align: center; font-variant-numeric: tabular-nums; font-weight: 700; }
.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; border-radius: var(--radius); background: var(--surface-2); }
.discount legend { float: left; width: 100%; font-weight: 750; 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: 700; font-size: var(--fs-sm); line-height: 1.2;
  transition: background-color 150ms var(--ease), border-color 150ms var(--ease), color 150ms var(--ease);
}
.segmented .seg:hover { border-color: var(--primary); }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg:has(input:checked) { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
.seg:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.id-field { margin-top: 12px; }
.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; }
.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: color-mix(in srgb, var(--bg) 90%, transparent);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    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(104px, 1fr)); gap: 8px; }
  .item { min-height: 96px; padding: 10px; font-size: 0.92rem; }
  .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)); }
}

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

.dialog {
  width: min(560px, calc(100vw - 2 * var(--gutter)));
  max-height: calc(100dvh - 32px);
  padding: 0; border: 0; border-radius: 20px;
  background: var(--surface); color: var(--text); box-shadow: var(--elev-3);
}
.dialog::backdrop { background: rgb(4 34 46 / 0.55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.dialog[open] { animation: dialog-in 220ms var(--ease); }
@keyframes dialog-in { from { opacity: 0; transform: translateY(12px) scale(0.98); } }
.dialog-body { padding: 24px; overflow-y: auto; }
.dialog-body > h2:first-child { font-size: var(--fs-xl); font-weight: 800; }
@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(--accent-soft); font-size: var(--fs-md); font-weight: 700; color: var(--text);
}
.dialog .due strong { font-size: 2.125rem; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--figure); }
.dialog .actions { justify-content: flex-end; }
.dialog .actions .btn { flex: 1 1 160px; }
.change { font-weight: 800; 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 green; offline inverts the whole bar (ink in light, pale orange in
   dark) and its dot pulses, so the change is unmistakable, not just a dot. */
.till-status {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px;
  min-height: var(--tap-min); padding: 6px 8px 6px 14px; margin: 0 0 12px;
  border-radius: var(--radius); box-shadow: inset 0 0 0 1px var(--online-border);
  background: var(--online-bg); color: var(--online-text); font-size: var(--fs-sm);
  transition: background-color 200ms var(--ease), color 200ms var(--ease);
}
.till-status .status-dot {
  position: relative; width: 10px; height: 10px; border-radius: 50%; background: var(--online-dot); flex: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--online-dot) 25%, transparent);
}
.till-status .status-text { flex: 1 1 180px; min-width: 0; overflow-wrap: anywhere; }
.till-status .status-text strong { font-weight: 800; }
.till-status .status-reason { font-weight: 500; }
.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: 700; }
.till-status .status-link {
  display: inline-flex; align-items: center; min-height: var(--tap-min); padding: 0 6px;
  color: inherit; font-weight: 700;
}
.till-status[data-mode="offline"] {
  background: var(--offline-bg); color: var(--offline-text); box-shadow: none;
}
.till-status[data-mode="offline"] .status-dot {
  background: var(--offline-dot);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--offline-dot) 35%, transparent);
  animation: status-pulse 1.8s var(--ease) infinite;
}
@keyframes status-pulse { 50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--offline-dot) 0%, transparent); } }
.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: 700; }
.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 14px;
  border: 1px solid currentColor; border-radius: 999px; background: transparent; color: inherit;
  font: inherit; font-weight: 700; cursor: pointer; max-width: 100%; text-align: left;
  transition: background-color 150ms 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: 600;
}
.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: 500; 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: 750; padding: 0 4px; }
.pp-options .field { margin-top: 10px; }
.pp-label { display: block; font-weight: 700; 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: 800; 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: 800; 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 1px 3px rgb(0 0 0 / 0.08);
}
.rc-demo {
  margin: 0; padding: 6px 12px; text-align: center; font-weight: 800; 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 1px 2px rgb(0 0 0 / 0.12), 0 6px 18px rgb(0 0 0 / 0.14);
  /* A torn-off edge at the bottom. */
  -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - 6px) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 12px 6px repeat-x;
          mask: linear-gradient(#000 0 0) top / 100% calc(100% - 6px) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 12px 6px repeat-x;
}
.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; }
.rc-paper.is-feeding { animation: rc-feed 700ms cubic-bezier(0.2, 0.7, 0.2, 1) both; }
@keyframes rc-feed {
  from { transform: translateY(-24px); clip-path: inset(0 0 100% 0); }
  to { transform: none; clip-path: inset(0 0 0 0); }
}
.rc-print { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0; min-height: var(--tap-min); font-weight: 700; }
.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 800ms 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.15rem; }
@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::after, .empty::before { display: none; }
  .stat-hero .stat-label, .stat-hero .stat-note, .stat-hero .stat-value::first-letter { color: #000; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  .dialog[open] { animation: none; }
  .rc-paper.is-feeding { animation: none; }
  .rc-print[data-state="busy"] .rc-print-text::before { animation: none; }
  .till-status[data-mode="offline"] .status-dot { animation: none; }
}

/* ---- 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: 700; 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; }