/* POS & Inventory — design system: foundations, base and components.
   Colour tokens live in tokens.css (generated); icons in icons.js (generated).
   Every screen is assembled from these classes; a screen that needs a new part
   adds it here first. */

/* =====================================================================
   1. FOUNDATION TOKENS — type, space, radius, motion, layout
   ===================================================================== */
:root {
  --paper: #ffffff; --paper-ink: #111827; /* receipts and till reports: paper is white in either theme */
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --fs-xs: 12px;  --lh-xs: 16px;
  --fs-sm: 13px;  --lh-sm: 20px;
  --fs-md: 14px;  --lh-md: 20px;
  --fs-lg: 16px;  --lh-lg: 24px;
  --fs-xl: 18px;  --lh-xl: 28px;
  --fs-2xl: 20px; --lh-2xl: 28px;
  --fs-3xl: 24px; --lh-3xl: 32px;
  --fs-4xl: 30px; --lh-4xl: 36px;
  --fs-5xl: 36px; --lh-5xl: 44px;
  --fs-d1: 48px;  --lh-d1: 56px;
  --fs-d2: 72px;  --lh-d2: 80px;

  --sp-0-5: 2px; --sp-1: 4px; --sp-1-5: 6px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px;
  --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; --sp-20: 80px;

  --r-xs: 4px; --r-sm: 6px; --r-control: 8px; --r-card: 12px; --r-sheet: 16px; --r-full: 999px;

  --dur-fast: 100ms; --dur-base: 150ms; --dur-enter: 200ms; --dur-overlay: 250ms;
  --ease: cubic-bezier(.2, 0, 0, 1); --ease-out: cubic-bezier(.19, .91, .38, 1);

  --sidebar-w: 260px; --rail-w: 72px; --icon-nav: 20px; --topbar-h: 64px; --page-pad: 24px; --gutter: 24px; --cart-w: 400px;
  --pay-h: 72px; /* the Pay button; global, so the page can keep room for it on a phone */
  --dialog-w: 440px; --dialog-w-sm: 360px; --dialog-w-lg: 640px; --drawer-w: 360px; --toast-max: 560px; --chip-max: 280px;
  --settings-nav-w: 248px; --tip-grid: 520px; --shop-max: 1200px; --track-max: 880px; --qty-field: 160px;
  --cell-main-min: 200px; --loyalty-w: 340px; --barcode-w: 200px; --photo-max: 300px; --qr-w: 120px; --totals-w: 320px; --a4-w: 794px; /* A4 at 96 dpi */ --mail-w: 560px; --phone-w: 360px; --phone-r: 40px; --sms-min: 400px; --md-min: 560px; --note-min: 180px; --post-thumb: 112px; --wizard-w: 720px; --email-w: 640px; --email-h: 820px; --scroll-demo-h: 200px; --form-h-label: 200px; --icon-tile-h: 104px; --subnav-w: 240px; --boxed-w: 1320px; --auth-w: 420px; --art-w: 440px; --status-w: 560px; --kb-col-w: 272px; --kb-col-min: 240px; --field-min: 240px; --pinned-foot: 96px; --pinned-foot-sm: 160px; --search-max: 360px; --menu-min: 200px; --menu-max: 320px; --float-max-h: 520px; --tip-max: 240px; --chart-h: 280px;
}

/* Density — one set of components, two sizes */
:root, [data-density="desk"] {
  --body-fs: var(--fs-md); --body-lh: var(--lh-md);
  --control-h-sm: 32px; --control-h: 36px; --control-h-lg: 40px; --control-h-xl: 48px;
  --control-px: 14px; --control-fs: 14px; --icon: 18px;
  --check: 18px; --switch-w: 36px; --switch-h: 20px;
  --row-h: 48px; --card-pad: 20px; --badge-h: 22px; --badge-fs: 12px; --badge-px: 8px;
  --stepper: 32px; --gap-touch: 8px;
}
[data-density="counter"] {
  --body-fs: var(--fs-lg); --body-lh: var(--lh-lg);
  --control-h-sm: 48px; --control-h: 56px; --control-h-lg: 64px; --control-h-xl: 72px;
  --control-px: 20px; --control-fs: 16px; --icon: 24px;
  --check: 24px; --switch-w: 52px; --switch-h: 32px;
  --row-h: 56px; --card-pad: 16px; --badge-h: 28px; --badge-fs: 14px; --badge-px: 10px;
  --stepper: 48px; --gap-touch: 8px;
  --key-h: 72px; --tile-min: 136px;
}

/* =====================================================================
   2. BASE
   ===================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg-app); color: var(--text);
  font-family: var(--font-sans); font-size: var(--fs-md); line-height: var(--lh-md);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
.num, .money { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
svg.ti { width: 1em; height: 1em; font-size: var(--icon); flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -0.125em; }
[hidden] { display: none !important; }
/* Single-column grids: the column is the box's width, so long unbreakable content cannot push it wider */
:where(.register, .register-work, .payment, .cart, .lines, .line-tools, .totals, .totals-rows, .pay-foot, .drawer, .drawer-body, .dialog-body, .stack, .field, .stat, .change, .pin, .empty, .amount, .nav, .tile .meta, .toasts) { grid-template-columns: minmax(0, 1fr); }
/* Read by screen readers, not shown */
.sr-only { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
html:has(.register), html:has(.register) body { height: 100%; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
  *:not(.spin), *:not(.is-loading)::after { animation: none !important; }
}

/* =====================================================================
   3. COMPONENTS
   ===================================================================== */
/* Button */
.btn {
  --_bg: var(--bg-surface); --_fg: var(--text); --_bd: var(--border-control);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: var(--control-h); padding: 0 var(--control-px); min-width: var(--control-h);
  border-radius: var(--r-control); border: 1px solid var(--_bd); background: var(--_bg); color: var(--_fg);
  font: 500 var(--control-fs)/1 var(--font-sans); white-space: nowrap; cursor: pointer; user-select: none; text-decoration: none;
  -webkit-tap-highlight-color: transparent; box-shadow: var(--shadow-xs);
  transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.btn .ti { font-size: calc(var(--icon) - 2px); }
.btn:hover, .btn.is-hover { background: var(--bg-subtle); }
.btn:active, .btn.is-active { background: var(--bg-muted); transform: translateY(1px); }
.btn:focus-visible, .btn.is-focus { outline: 2px solid var(--focus); outline-offset: 2px; }
.btn[disabled], .btn.is-disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; }
.btn-primary { --_bg: var(--accent); --_fg: var(--on-accent); --_bd: transparent; }
.btn-primary:hover, .btn-primary.is-hover { background: var(--accent-hover); }
.btn-primary:active, .btn-primary.is-active { background: var(--accent-pressed); }
.btn-ghost { --_bg: transparent; --_bd: transparent; box-shadow: none; }
.btn-ghost:hover, .btn-ghost.is-hover { background: var(--bg-muted); }
.btn-danger { --_bg: var(--danger); --_fg: #fff; --_bd: transparent; }
.btn-danger:hover, .btn-danger.is-hover { background: var(--danger-hover); }
.btn-danger:active, .btn-danger.is-active { background: var(--danger-pressed); }
.btn-danger-soft { --_bg: var(--danger-subtle); --_fg: var(--danger-text); --_bd: transparent; box-shadow: none; }
.btn-danger-soft:hover, .btn-danger-soft.is-hover, .btn-danger-soft:active, .btn-danger-soft.is-active { background: var(--danger-muted); }
.btn-sm { height: var(--control-h-sm); padding: 0 calc(var(--control-px) - 4px); font-size: calc(var(--control-fs) - 1px); }
.btn-lg { height: var(--control-h-lg); padding: 0 calc(var(--control-px) + 4px); }
.btn-xl { height: var(--control-h-xl); padding: 0 calc(var(--control-px) + 8px); font-size: calc(var(--control-fs) + 2px); }
.btn-icon { padding: 0; width: var(--control-h); }
.btn.is-loading { color: transparent !important; position: relative; pointer-events: none; }
.btn.is-loading::after { content: ""; position: absolute; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid currentColor; border-color: var(--_fg) var(--_fg) var(--_fg) transparent; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Field / input */
.field { display: grid; gap: 6px; min-width: 0; }
.label { font-size: var(--fs-sm); line-height: var(--lh-sm); font-weight: 500; color: var(--text); }
.hint { font-size: var(--fs-xs); line-height: var(--lh-xs); color: var(--text-secondary); }
.error-msg { display: flex; gap: 6px; align-items: center; font-size: var(--fs-xs); line-height: var(--lh-xs); color: var(--danger-text); font-weight: 500; }
.error-msg .ti { font-size: 14px; color: var(--danger-icon); }
.input {
  display: flex; align-items: center; gap: 8px; height: var(--control-h); padding: 0 12px;
  border: 1px solid var(--border-strong); border-radius: var(--r-control); background: var(--bg-surface);
  color: var(--text); font: 400 var(--body-fs)/var(--body-lh) var(--font-sans); min-width: 0;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.input input { all: unset; flex: 1; min-width: 0; font: inherit; color: inherit; }
.input input::placeholder { color: var(--text-secondary); }
.input .ti { color: var(--text-secondary); font-size: calc(var(--icon) - 2px); }
.input .affix { color: var(--text-secondary); font-weight: 500; }
.input:hover { border-color: var(--text-secondary); }
.input.is-focus, .input:focus-within { outline: 2px solid var(--focus); outline-offset: 1px; border-color: var(--accent); }
.input.is-invalid { border-color: var(--danger); }
.input.is-disabled { background: var(--bg-muted); color: var(--text-disabled); border-color: var(--border); }
.kbd { font: 500 var(--fs-xs)/1 var(--font-mono); color: var(--text-secondary); border: 1px solid var(--border-control);
  border-bottom-width: 2px; border-radius: var(--r-xs); padding: 2px 6px; background: var(--bg-subtle); }
select.input { appearance: none; padding-inline-end: 40px; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
[dir="rtl"] select.input { background-position: 13px 50%, 18px 50%; }

/* Check / radio / switch */
.choice { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: max(24px, var(--check)); cursor: pointer; font-size: var(--body-fs); }
.choice > input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.choice > input:focus-visible + .box, .choice > input:focus-visible + .switch { outline: 2px solid var(--focus); outline-offset: 2px; }
.box { width: var(--check); height: var(--check); border: 1.5px solid var(--border-strong); border-radius: var(--r-sm); background: var(--bg-surface);
  display: grid; place-items: center; color: #fff; flex: none; }
.box.round { border-radius: 50%; }
.choice.on .box, .choice > input:checked + .box { background: var(--accent); border-color: var(--accent); }
.choice.on .box.round, .choice > input:checked + .box.round { background: var(--bg-surface); border: calc(var(--check) * .3) solid var(--accent); }
.box .ti { font-size: calc(var(--check) - 4px); visibility: hidden; } /* the tick shows only when ticked: on a dark surface a white tick would read as ticked */
.choice.on .box .ti, .choice > input:checked + .box .ti { visibility: visible; }
.choice > input:indeterminate + .box { background: var(--accent); border-color: var(--accent); } .choice > input:indeterminate + .box::after { content: ""; grid-area: 1 / 1; width: 12px; height: 2px; border-radius: var(--r-full); background: #fff; } /* some rows chosen: a dash */
.box .ti { grid-area: 1 / 1; }
.switch { width: var(--switch-w); height: var(--switch-h); border-radius: var(--r-full); background: var(--bg-muted);
  border: 1.5px solid var(--border-strong); position: relative; flex: none; transition: background var(--dur-base) var(--ease); }
.switch::after { content: ""; position: absolute; top: 50%; inset-inline-start: 2px; width: calc(var(--switch-h) - 7px); height: calc(var(--switch-h) - 7px);
  transform: translateY(-50%); border-radius: 50%; background: var(--border-strong); transition: left var(--dur-base) var(--ease), background var(--dur-base); }
.choice.on .switch, .choice > input:checked + .switch { background: var(--accent); border-color: var(--accent); }
.choice.on .switch::after, .choice > input:checked + .switch::after { inset-inline-start: calc(100% - var(--switch-h) + 5px); background: #fff; }

/* Badge */
.badge { flex: none; display: inline-flex; align-items: center; gap: 6px; height: var(--badge-h); padding: 0 var(--badge-px);
  border-radius: var(--r-full); font-size: var(--badge-fs); font-weight: 500; line-height: 1; white-space: nowrap;
  background: var(--neutral-subtle); color: var(--neutral-text); }
.badge .ti { font-size: calc(var(--badge-fs) + 2px); }
.badge-success { background: var(--success-subtle); color: var(--success-text); }
.badge-warning { background: var(--warning-subtle); color: var(--warning-text); }
.badge-danger  { background: var(--danger-subtle);  color: var(--danger-text); }
.badge-info    { background: var(--info-subtle);    color: var(--info-text); }
.badge-accent  { background: var(--accent-subtle);  color: var(--accent-text); }
.badge-solid-success { background: var(--success); color: #fff; }
.badge-solid-warning { background: var(--warning); color: var(--on-warning); }
.badge-solid-danger  { background: var(--danger);  color: #fff; }
.badge-count { min-width: var(--badge-h); justify-content: center; padding: 0 6px; background: var(--accent); color: var(--on-accent); font-weight: 600; font-variant-numeric: tabular-nums; }

/* Card */
.card { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-card); box-shadow: var(--shadow-xs); }
.card-pad { padding: var(--card-pad); }
.card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 16px var(--card-pad); border-bottom: 1px solid var(--border); }
.card-title { font-size: var(--fs-lg); line-height: var(--lh-lg); font-weight: 600; margin: 0; }

/* Stat card */
.stat { display: grid; gap: 12px; padding: var(--card-pad); container-type: inline-size; }
.stat-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.stat-label { font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--text-secondary); font-weight: 500; }
.stat-value { font-size: var(--fs-4xl); line-height: var(--lh-4xl); font-weight: 600; letter-spacing: -.01em; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* The figure always fits beside the icon: --fit is the figure's width in em (set by the page), so the size steps down only when the card is too narrow for it */
.stat[style*="--fit"] .stat-value { font-size: min(var(--fs-4xl), calc((100cqi - 2 * var(--card-pad) - 52px) / var(--fit))); }
.stats.five .stat-ico { display: none; }
.stats.five .stat[style*="--fit"] .stat-value { font-size: min(var(--fs-4xl), calc((100cqi - 2 * var(--card-pad)) / var(--fit))); }
.stat-ico { width: 40px; height: 40px; border-radius: var(--r-card); display: grid; place-items: center; background: var(--accent-subtle); color: var(--accent-text); }
.stat-ico .ti { font-size: calc(var(--icon) + 4px); }
.stat-foot { display: flex; align-items: center; gap: 8px; font-size: var(--fs-xs); color: var(--text-secondary); }
.stat.solid { background: var(--accent); border-color: transparent; color: var(--on-accent); }
.stat.solid .stat-label, .stat.solid .stat-foot { color: var(--on-accent); }
.stat.solid .stat-ico { background: rgb(255 255 255 / .16); color: #fff; }

/* Tabs / segmented */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); }
.tab { appearance: none; background: none; border: 0; border-bottom: 2px solid transparent; font: inherit; margin: 0 0 -1px;
  height: var(--control-h); padding: 0 12px; display: inline-flex; align-items: center; gap: 8px; color: var(--text-secondary);
  font-weight: 500; font-size: var(--control-fs); cursor: pointer; }
.tab.on, .tab[aria-selected="true"] { color: var(--accent-text); border-bottom-color: var(--accent); }
.tab .badge { height: 20px; font-size: var(--fs-xs); padding: 0 6px; }
/* Concentric corners: the track's radius is the button's radius plus the track's padding */
.segmented { display: inline-flex; padding: 4px; gap: 4px; background: var(--bg-muted); border-radius: var(--r-card); }
.segmented button { all: unset; height: calc(var(--control-h) - 8px); padding: 0 12px; border-radius: var(--r-control); cursor: pointer;
  font-weight: 500; font-size: var(--control-fs); color: var(--text-secondary); display: inline-flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
.segmented button.on { background: var(--bg-surface); color: var(--text); box-shadow: var(--shadow-sm); }
.segmented button:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
[data-density="counter"] .segmented { gap: var(--gap-touch); }

/* Table */
.table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--body-fs); }
.table th { text-align: start; font-size: var(--fs-sm); line-height: var(--lh-sm); font-weight: 600; color: var(--text-secondary);
  background: var(--bg-subtle); padding: 12px 16px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.table td { padding: 6px 16px; height: var(--row-h); border-bottom: 1px solid var(--border); vertical-align: middle; } /* 6 px: a cell that wraps keeps clear of its rules; a one-line row stays --row-h */
.table td .mono { white-space: nowrap; } /* PO-1060 never breaks at its hyphen */
.table tr:last-child td { border-bottom: 0; }
.table tbody tr:hover td { background: var(--bg-subtle); }
.table .r { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
.table .muted { color: var(--text-secondary); }
.who { display: flex; align-items: center; gap: 12px; }
.avatar { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 600;
  background: var(--accent-muted); color: var(--accent-text-strong); flex: none; }

/* Alert / toast */
.alert { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: start; padding: 12px 16px; border-radius: var(--r-card);
  background: var(--info-subtle); color: var(--info-text); border: 1px solid transparent; }
.alert .ti { font-size: 20px; color: var(--info-icon); margin-top: 1px; }
.alert b { display: block; font-weight: 600; }
.alert p { margin: 2px 0 0; }
.alert > .btn { align-self: center; }
.alert-warning { background: var(--warning-subtle); color: var(--warning-text); } .alert-warning .ti { color: var(--warning-icon); }
.alert-danger { background: var(--danger-subtle); color: var(--danger-text); } .alert-danger .ti { color: var(--danger-icon); }
.alert-success { background: var(--success-subtle); color: var(--success-text); } .alert-success .ti { color: var(--success-icon); }
.toast { display: inline-flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: var(--r-card);
  background: var(--bg-inverse); color: var(--text-inverse); box-shadow: var(--shadow-lg); font-weight: 500; }
.toast .ti { font-size: 20px; color: var(--green-400); }
.toast a { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* Dialog */
.dialog { width: 100%; max-width: var(--dialog-w); background: var(--bg-raised); border-radius: var(--r-sheet); box-shadow: var(--shadow-lg); border: 1px solid var(--border); }
.dialog-body { padding: 24px; display: grid; gap: 16px; }
.dialog-ico { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--danger-subtle); color: var(--danger-icon); }
.dialog-ico .ti { font-size: 24px; }
.dialog-ico.success { background: var(--success-subtle); color: var(--success-icon); } .dialog-ico.warning { background: var(--warning-subtle); color: var(--warning-icon); } .dialog-ico.info { background: var(--accent-subtle); color: var(--accent-text); }
.dialog-title { margin: 0; font-size: var(--fs-xl); line-height: var(--lh-xl); font-weight: 600; }
.dialog p { margin: 0; color: var(--text-secondary); }
.dialog-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 16px 24px; border-top: 1px solid var(--border); background: var(--bg-subtle); border-radius: 0 0 var(--r-sheet) var(--r-sheet); }

/* Sidebar nav item */
.nav { display: grid; gap: 2px; }
.nav-sec { font-size: var(--fs-xs); line-height: var(--lh-xs); font-weight: 600; color: var(--text-secondary); padding: 12px 12px 6px; letter-spacing: .02em; }
.nav-item { text-decoration: none; color: var(--text); display: flex; align-items: center; gap: 12px; min-height: max(40px, var(--control-h-sm)); padding: 0 12px; border-radius: var(--r-control); color: var(--text); font-weight: 500; }
.nav-item .ti { font-size: 20px; color: var(--text-secondary); }
.nav-item:hover { background: var(--bg-muted); }
.nav-item.on { background: var(--accent-subtle); color: var(--accent-text); }
.nav-item.on .ti { color: var(--accent-text); }
.nav-item .badge { margin-inline-start: auto; }

/* ---------- Counter components ---------- */
/* Category tabs */
.cats { display: flex; gap: var(--gap-touch); overflow: auto; padding: 4px; margin: -4px; scrollbar-width: none; }
.cat { font: inherit; flex: none; height: var(--control-h-sm); padding: 0 16px; border-radius: var(--r-full); display: inline-flex; align-items: center; gap: 8px;
  background: var(--bg-surface); border: 1px solid var(--border-control); font-weight: 500; font-size: var(--control-fs); color: var(--text); cursor: pointer; }
.cat .count { color: var(--text-secondary); font-variant-numeric: tabular-nums; font-weight: 400; }
.cat.on { background: var(--accent-subtle); border-color: var(--accent); color: var(--accent-text); }
.cat.on .count { color: var(--accent-text); }

/* Product tile */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(var(--tile-min), 100%), 1fr)); grid-auto-rows: 1fr; gap: var(--gap-touch); }
/* Product tile — kinds: photo (.tile.photo), colour (.tile.color), text (.tile.text).
   The colour cue and the "in the cart" ring are drawn inside the tile, so a scrolling grid never cuts them. */
.tile { --cue: 0 0 #0000; --ring: 0 0 #0000; --halo: var(--bg-surface);
  font: inherit; color: var(--text); margin: 0; padding: 0; position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 120px;
  border-radius: var(--r-card); background: var(--bg-surface); border: 1px solid var(--border); overflow: hidden; cursor: pointer; text-align: start;
  box-shadow: var(--ring), var(--cue);
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); -webkit-tap-highlight-color: transparent; }
.tile:active { transform: scale(.97); }
.tile.photo { --cue: inset 0 4px 0 var(--tile-strip, transparent); }
.tile .img { flex: none; position: relative; margin: 8px 8px 0; aspect-ratio: 4 / 3; border-radius: var(--r-control); overflow: hidden; background: var(--bg-muted); display: grid; place-items: center; color: var(--text-secondary); }
/* Taken out of flow, so a photo of any shape fills the 4:3 box and can never stretch the tile. */
.tile .img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.tile .img .ti { font-size: calc(var(--icon) * 1.667); }
.tile .meta { flex: 1; min-width: 0; padding: 8px 12px 12px; display: grid; gap: 2px; align-content: end; }
.tile .name { font-size: var(--fs-md); line-height: var(--lh-md); font-weight: 500; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tile .price { font-size: var(--fs-lg); line-height: var(--lh-lg); font-weight: 600; font-variant-numeric: tabular-nums; }
.tile .stock { font-size: var(--fs-xs); color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.tile.color { --halo: var(--tile-bg); background: var(--tile-bg); color: var(--tile-fg); border-color: transparent; }
.tile.color .initials { flex: none; font-size: var(--fs-4xl); line-height: 1; font-weight: 700; letter-spacing: -.02em; padding: 12px 12px 0; }
.tile.color .stock, .tile.color .price { color: var(--tile-fg); }
.tile.text { --cue: inset 4px 0 0 var(--tile-strip, transparent); min-height: 96px; }
.tile.text .meta { align-content: space-between; padding-block: 12px; padding-inline: 16px 12px; }
.tile .qty-badge { position: absolute; z-index: 1; top: 8px; inset-inline-end: 8px; min-width: 28px; height: 28px; padding: 0 8px; border-radius: var(--r-full);
  background: var(--accent); color: var(--on-accent); font-weight: 700; font-size: 14px; display: grid; place-items: center; font-variant-numeric: tabular-nums; box-shadow: 0 0 0 2px var(--halo); }
.tile.added { --ring: inset 0 0 0 1px var(--accent); border-color: var(--accent); }
.tile.out.photo { --cue: inset 0 4px 0 var(--border-control); }
.tile.out .img { opacity: .5; }
.tile.out .name, .tile.out .price { color: var(--text-secondary); }
.tile.out .stock { color: var(--danger-text); font-weight: 600; }

/* Cart */
.cart { display: grid; grid-template-rows: auto 1fr auto; background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-card); overflow: hidden; }
.cart-head { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.cust { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; height: var(--control-h); padding-block: 0; padding-inline: 8px 12px; border-radius: var(--r-control); background: var(--bg-subtle); border: 1px solid var(--border); }
.cust .avatar { width: 36px; height: 36px; font-size: 13px; }
.cust-meta { min-width: 0; }
.cust-meta b { display: block; font-size: var(--fs-md); line-height: var(--lh-sm); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cust-meta small { display: block; font-size: var(--fs-xs); line-height: var(--lh-xs); color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lines { display: grid; align-content: start; }
.line { border-bottom: 1px solid var(--border); }
/* The row that names the item. It is the button that opens the line; its tools sit beside it, never inside it.
   Quantity, name and amount share one baseline, so the quantity box centres on the name. */
.line-head { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: baseline; padding: 12px 16px; min-height: var(--row-h); }
.line-head[role="button"] { cursor: pointer; }
.line .q { height: 32px; min-width: 32px; padding: 0 6px; border-radius: 8px; background: var(--bg-muted); font-weight: 600; font-size: var(--fs-md);
  display: grid; place-items: center; font-variant-numeric: tabular-nums; }
.line .t { font-size: var(--fs-lg); line-height: var(--lh-lg); font-weight: 500; overflow-wrap: anywhere; }
.line .mods { font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--text-secondary); overflow-wrap: anywhere; }
.line .disc { font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--success-text); font-weight: 500; display: flex; align-items: center; gap: 4px; }
.line .amt { font-size: var(--fs-lg); line-height: var(--lh-lg); font-weight: 600; font-variant-numeric: tabular-nums; text-align: end; white-space: nowrap; }
.line .was { font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--text-secondary); text-decoration: line-through; text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
.line.open { background: var(--accent-subtle); box-shadow: inset 3px 0 0 var(--accent); } [dir="rtl"] .line.open { box-shadow: inset -3px 0 0 var(--accent); }
/* Line tools, in order of use: quantity first and full width (− and + far apart); then discount and note.
   Remove is the stepper's minus at quantity 1 (Shopify POS), so there is no loose red button beside the stepper. */
.line-tools { display: grid; gap: var(--gap-touch); padding: 0 16px 16px; }
.line-tools .stepper { display: flex; width: 100%; }
.line-tools .stepper output { flex: 1; }
.lt-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-touch); }
.stepper .remove { color: var(--danger-icon); }
.lt-row .btn { height: var(--control-h-sm); min-width: 0; padding: 0 8px; font-size: var(--fs-md); }
/* Quantity stepper: one control the height of its row; the frame is drawn inside, so each button keeps the full touch height */
.stepper { display: inline-flex; align-items: center; height: var(--stepper); border-radius: var(--r-control); background: var(--bg-surface); box-shadow: inset 0 0 0 1px var(--border-control); }
.stepper button { all: unset; box-sizing: border-box; width: var(--stepper); height: var(--stepper); border: 1px solid transparent; background-clip: padding-box; border-radius: var(--r-control); display: grid; place-items: center; cursor: pointer; color: var(--text); }
.stepper button:hover { background: var(--bg-muted); }
.stepper button:active { background: var(--bg-muted); transform: scale(.95); }
.stepper button:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.stepper button .ti { font-size: calc(var(--icon) - 2px); }
.stepper output { min-width: 40px; text-align: center; font-size: var(--fs-xl); font-weight: 600; font-variant-numeric: tabular-nums; }
.totals { padding: 12px 16px 16px; display: grid; gap: 6px; border-top: 1px solid var(--border); background: var(--bg-surface); }
.totals .row { display: flex; justify-content: space-between; font-size: var(--fs-md); color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.totals .row.save { color: var(--success-text); font-weight: 500; }
.totals .grand { display: flex; justify-content: space-between; align-items: baseline; margin-top: 4px; color: var(--text); }
.totals .grand span { font-size: var(--fs-lg); font-weight: 600; }
.totals .grand strong { font-size: var(--fs-4xl); line-height: var(--lh-4xl); font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.actions-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-touch); margin-top: 6px; }
.actions-row .btn { height: var(--control-h-sm); padding: 0 8px; font-size: var(--fs-md); }
/* On the narrowest phones each action stacks its icon over its word, as the receipt choices do */
@media (max-width: 359px) {
  .pay { padding: 0 16px; }
  .pay .lbl .ti { display: none; }
  .actions-row .btn, .lt-row .btn { flex-direction: column; gap: 2px; padding: 4px; font-size: var(--fs-sm); line-height: var(--lh-xs); }
  .cart-title .btn { width: var(--control-h-sm); padding: 0; }
  .cart-title .btn .btn-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
}

/* Pay button */
.pay { all: unset; box-sizing: border-box; width: 100%; min-height: var(--pay-h); border-radius: var(--r-card); padding: 8px 20px; /* grows with its words (text spacing, a long label) instead of letting them out */
  display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer;
  background: var(--accent); color: var(--on-accent); font-size: 20px; font-weight: 700; letter-spacing: -.01em;
  box-shadow: 0 1px 0 rgb(255 255 255 / .18) inset, 0 6px 16px -6px color-mix(in srgb, var(--accent) 55%, transparent);
  transition: background-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); -webkit-tap-highlight-color: transparent; }
.pay .lbl { display: inline-flex; align-items: center; gap: 12px; min-width: 0; }
.pay .lbl .ti { font-size: 24px; }
.pay .amt { font-variant-numeric: tabular-nums; font-size: 24px; }
.pay:hover { background: var(--accent-hover); }
.pay:active { background: var(--accent-pressed); transform: translateY(1px); }
.pay:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.pay[aria-disabled="true"] { background: var(--bg-muted); color: var(--text-disabled); box-shadow: none; cursor: not-allowed; }
.pay.busy { background: var(--accent-pressed); cursor: progress; }
.pay.busy .amt { display: none; }
/* A long amount steps the button's type down a size, so label and amount stay on one line */
.pay.long .lbl, .pay.long .amt { font-size: var(--fs-lg); }
.pay.busy .spin { width: 20px; height: 20px; border-radius: 50%; border: 2.5px solid rgb(255 255 255 / .35); border-top-color: #fff; animation: spin .8s linear infinite; }
.pay.done { background: var(--success); box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--success) 55%, transparent); }
.pay-foot { padding: 0 16px 16px; display: grid; gap: var(--gap-touch); }

/* Keypad */
.keypad { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap-touch); }
.key { all: unset; box-sizing: border-box; height: var(--key-h); border-radius: var(--r-card); background: var(--bg-surface); border: 1px solid var(--border-control);
  display: grid; place-items: center; font-size: var(--fs-4xl); font-weight: 500; font-variant-numeric: tabular-nums; cursor: pointer; color: var(--text);
  box-shadow: 0 1px 0 var(--border-control); transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); -webkit-tap-highlight-color: transparent; }
.key:hover { background: var(--bg-subtle); }
.key:active { background: var(--bg-muted); transform: translateY(1px); box-shadow: none; }
.key:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.key.fn { font-size: 18px; font-weight: 600; color: var(--text-secondary); background: var(--bg-subtle); }
.key.fn .ti { font-size: calc(var(--icon) + 4px); }
.key.cash { font-size: var(--fs-2xl); font-weight: 600; color: var(--accent-text); }
/* A long quick-cash amount steps down a size instead of spilling out of its key */
.key.cash.long { font-size: var(--fs-md); }
.key.cash.longer { font-size: var(--fs-xs); line-height: var(--lh-xs); padding: 0 4px; text-align: center; overflow-wrap: anywhere; }
.amount { display: grid; gap: 2px; padding: 12px 16px; border-radius: var(--r-card); background: var(--bg-surface); border: 2px solid var(--accent); }
.amount .lbl { font-size: var(--fs-sm); color: var(--text-secondary); font-weight: 500; display: flex; justify-content: space-between; }
.amount .val { font-size: var(--fs-d1); line-height: var(--lh-d1); font-weight: 600; letter-spacing: -.02em; text-align: end; font-variant-numeric: tabular-nums; }
.amount .val .cur { color: var(--text-secondary); font-weight: 500; margin-inline-end: 4px; }
/* A long amount steps down to the next display size, so it stays on one line */
.amount.long .val { font-size: var(--fs-4xl); line-height: var(--lh-4xl); }

/* Tender tiles */
.tenders { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-touch); }
.tender { all: unset; box-sizing: border-box; min-height: var(--control-h-xl); line-height: 1.2; border-radius: var(--r-card); border: 1px solid var(--border-control); background: var(--bg-surface);
  display: flex; align-items: center; gap: 12px; padding: 0 16px; font-weight: 600; font-size: var(--fs-lg); cursor: pointer; position: relative; }
.tender .ti { font-size: 24px; color: var(--text-secondary); }
.tender.on { background: var(--accent-subtle); border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); color: var(--accent-text); }
.tender.on .ti { color: var(--accent-text); }
.tender.on::after { content: ""; position: absolute; inset-inline-end: 16px; width: 20px; height: 20px; background: currentColor; -webkit-mask: var(--ico-check) center / contain no-repeat; mask: var(--ico-check) center / contain no-repeat; }

/* Change due */
.change { display: grid; gap: 4px; padding: 20px; border-radius: var(--r-card); background: var(--success-subtle); color: var(--success-text); text-align: center; }
.change .lbl { font-weight: 600; font-size: var(--fs-lg); }
.change .val { font-size: var(--fs-d1); line-height: var(--lh-d1); font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.change .sub { font-size: var(--fs-md); }
.receipts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap-touch); }
.receipts .btn { height: var(--control-h-lg); flex-direction: column; gap: 4px; font-size: var(--fs-md); }
.receipts .btn .ti { font-size: calc(var(--icon) - 2px); }

/* Offline banner */
.banner { display: flex; align-items: center; gap: 12px; padding: 8px 16px; min-height: calc(var(--control-h-sm) + 16px); border-radius: var(--r-card); background: var(--warning); color: var(--on-warning); font-weight: 600; }
.banner .ti { font-size: calc(var(--icon) - 2px); }
.banner .sp { flex: 1; }
.banner .btn { flex: none; height: var(--control-h-sm); background: rgb(0 0 0 / .12); border: 0; color: inherit; box-shadow: none; font-weight: 600; } /* the words beside it wrap; the button keeps its label */
.banner .btn:focus-visible { outline-color: var(--on-warning); } /* the blue ring is lost on the amber banner */

/* PIN */
.pin { display: grid; gap: 16px; justify-items: center; text-align: center; }
.pin .dots { display: flex; gap: 16px; }
.pin .dots i { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--border-strong); }
.pin .dots i.f { background: var(--text); border-color: var(--text); }

/* =====================================================================
   4. REGISTER PARTS — added for the register screen (3 Oct 2026)
   ===================================================================== */
/* Status dot inside a badge — connection, sync */
.badge .dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }

/* Register layout: one screen, work area beside the cart; data-hand="left" mirrors it */
.register { --cart-w: clamp(360px, 30vw, 460px); height: 100%; min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr);
  background: var(--bg-app); color: var(--text); font-size: var(--body-fs); line-height: var(--body-lh); }
.register-main { display: grid; grid-template-columns: minmax(0, 1fr) var(--cart-w); min-height: 0; }
.register-work { display: grid; grid-template-rows: auto auto minmax(0, 1fr); gap: 12px; padding: 16px; min-width: 0; min-height: 0; }
.register-side { min-width: 0; min-height: 0; border-inline-start: 1px solid var(--border); background: var(--bg-surface); }
.register[data-hand="left"] .register-main { grid-template-columns: var(--cart-w) minmax(0, 1fr); }
.register[data-hand="left"] .register-side { order: -1; border-inline-start: 0; border-inline-end: 1px solid var(--border); }
.scroll { overflow: auto; min-height: 0; overscroll-behavior: contain; padding: 4px; margin: -4px; }
.register-work { container: work / inline-size; }
.search-row { display: flex; gap: var(--gap-touch); min-width: 0; }
.search-row .input { flex: 1; }
@container work (max-width: 560px) {
  .search-row .btn { width: var(--control-h); padding: 0; flex: none; }
  .search-row .btn .btn-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
}
@media (max-width: 899px) {
  html:has(.register), html:has(.register) body { height: auto; }
  .register { height: auto; }
  .register-main, .register[data-hand="left"] .register-main { grid-template-columns: minmax(0, 1fr); }
  .register-side, .register[data-hand="left"] .register-side { order: 0; border: 0; border-top: 1px solid var(--border); }
  .regbar { flex-wrap: wrap; }
  .register { padding-bottom: calc(var(--pay-h) + 24px + env(safe-area-inset-bottom, 0px)); }
  html:has(.register) { scroll-padding-bottom: calc(var(--pay-h) + 40px); }
  .toasts { bottom: calc(var(--pay-h) + 40px + env(safe-area-inset-bottom, 0px)); }
  .cart.panel .pay-foot { position: fixed; z-index: 30; inset-inline: 0; bottom: 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); background: var(--bg-surface); border-top: 1px solid var(--border); }
}

/* Register bar — the till's own top bar */
.regbar { display: flex; align-items: center; gap: 8px; min-height: 64px; padding: 8px 12px; background: var(--bg-surface); border-bottom: 1px solid var(--border); }
.regbar .sp { flex: 1; }
.regbar .vr { width: 1px; align-self: stretch; margin: 6px 4px; background: var(--border); }
.regbar .btn { height: var(--control-h-sm); }
.store { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 0 4px; }
.store-mark { width: 40px; height: 40px; border-radius: var(--r-card); flex: none; display: grid; place-items: center; background: var(--accent); color: var(--on-accent); font-weight: 700; font-size: 14px; letter-spacing: .02em; }
.store b { display: block; font-size: var(--fs-lg); line-height: 20px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.store > div { min-width: 0; }
.store small { display: block; font-size: var(--fs-sm); line-height: var(--lh-xs); color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cashier { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 12px; height: var(--control-h-sm); padding-block: 0; padding-inline: 6px 16px; min-width: 0; max-width: var(--chip-max); border-radius: var(--r-control); border: 1px solid var(--border-control); background: var(--bg-surface); cursor: pointer; text-align: start; }
.cashier:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.cashier .avatar { width: 36px; height: 36px; }
.cashier > span:last-child { min-width: 0; }
.cashier b { display: block; font-size: var(--fs-md); line-height: var(--lh-sm); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cashier small { display: block; font-size: var(--fs-xs); line-height: var(--lh-xs); color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Cart as the register's full-height side panel */
.cart.panel { height: 100%; min-height: 0; border: 0; border-radius: 0; box-shadow: none; }
.cart .lines { overflow: auto; min-height: 0; }
.cart-top { display: grid; gap: 12px; padding: 16px; border-bottom: 1px solid var(--border); }
.cart-title { display: flex; align-items: center; gap: 8px; min-height: var(--control-h-sm); min-width: 0; }
.cart-name { display: grid; min-width: 0; }
.cart-title h2 { margin: 0; font-size: var(--fs-xl); line-height: var(--lh-xl); font-weight: 600; overflow-wrap: anywhere; }
.cart-title .meta { color: var(--text-secondary); font-size: var(--fs-sm); line-height: var(--lh-xs); font-variant-numeric: tabular-nums; }
.cart-title .sp { flex: 1; }
.cart-title .btn { height: var(--control-h-sm); padding: 0 16px; flex: none; }
.cust:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.cust .chev { margin-inline-start: auto; color: var(--text-secondary); }
.cust.add { border-style: dashed; border-color: var(--border-control); background: transparent; color: var(--accent-text); font-weight: 600; }
.cust.add .avatar { background: var(--accent-subtle); color: var(--accent-text); }
.line-head:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.pay-status { display: flex; align-items: center; justify-content: space-between; height: var(--pay-h); padding: 0 20px; border-radius: var(--r-card);
  background: var(--bg-muted); color: var(--text-secondary); font-weight: 600; font-size: var(--fs-lg); }
.pay-status strong { color: var(--text); font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; }
/* A short screen (a phone on its side, a low window): the cart's fixed parts would leave no room for its lines,
   so the whole cart scrolls as one column and Pay stays pinned at its foot. */
@media (min-width: 900px) and (max-height: 639px) {
  .cart.panel { display: block; overflow: auto; overscroll-behavior: contain; scroll-padding-bottom: calc(var(--pay-h) + 28px); }
  .cart.panel .cart-foot { display: contents; }
  .cart.panel .lines { overflow: visible; }
  .cart.panel .pay-foot { position: sticky; bottom: 0; z-index: 1; padding-top: 12px; background: var(--bg-surface); }
}

/* Empty state */
.empty { display: grid; justify-items: center; align-content: center; gap: 8px; padding: 32px 24px; text-align: center; color: var(--text-secondary); }
.lines:has(> .empty) { align-content: stretch; }
.empty-ico { width: 64px; height: 64px; border-radius: var(--r-sheet); display: grid; place-items: center; background: var(--bg-muted); color: var(--text-secondary); margin-bottom: 4px; }
.empty-ico .ti { font-size: 30px; }
.empty b { color: var(--text); font-size: var(--fs-lg); line-height: var(--lh-lg); font-weight: 600; }
.empty p { margin: 0; max-width: 30ch; font-size: var(--fs-md); line-height: 20px; }

/* Section header with a way back */
.sheet-head { display: flex; align-items: center; gap: 12px; min-height: var(--control-h-sm); flex-wrap: wrap; }
.sheet-head h2 { margin: 0; font-size: var(--fs-2xl); line-height: var(--lh-2xl); font-weight: 600; }
.sheet-head .sp { flex: 1; }
.sheet-head .meta { color: var(--text-secondary); font-size: var(--fs-md); font-variant-numeric: tabular-nums; }
.sheet-head .meta b { color: var(--text); font-size: var(--fs-2xl); font-weight: 700; margin-inline-start: 6px; }

/* Payment panel — tenders, amount and keypad, the confirm action */
.payment { display: grid; grid-template-rows: auto auto minmax(0, 1fr); align-content: start; gap: 16px; padding: 16px; min-width: 0; min-height: 0; overflow: auto; }
.payment-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 16px; align-items: start; }
.payment-body > .stack { gap: var(--gap-touch); }
.tender-due { display: flex; justify-content: space-between; gap: 12px; padding: 12px 16px; border-radius: var(--r-card); background: var(--bg-surface); border: 1px solid var(--border);
  font-size: var(--fs-md); color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.tender-due b { color: var(--text); font-weight: 600; }
.tender-due.short b { color: var(--danger-text); }
@media (max-width: 1180px) { .payment-body { grid-template-columns: minmax(0, 1fr); } }

/* Dialog parts used by the register's flows */
.modal .dialog { max-height: calc(100dvh - 32px); display: flex; flex-direction: column; }
.dialog.dialog-lg { max-width: var(--dialog-w-lg); } .dialog.dialog-sm { max-width: var(--dialog-w-sm); text-align: center; } .dialog.dialog-sm .dialog-ico { margin-inline: auto; } .dialog.dialog-sm .dialog-foot { justify-content: center; }
.dialog-step { display: flex; flex-direction: column; min-height: 0; }
.modal .dialog-body { overflow: auto; min-height: 0; }
.dialog-foot { flex: none; }
/* A keypad of three columns, for a PIN or a price */
.keypad.pad-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* In a dialog the keys are one control tall (56 px at the counter, still above the 48 px target), so the dialog fits a till screen */
.dialog .keypad { --key-h: var(--control-h); }
/* Text area: a field that takes several lines */
textarea.input { display: block; width: 100%; height: auto; min-height: 96px; padding: 12px; resize: vertical; line-height: var(--body-lh); }
/* A note saved on a line or on the sale */
.line .note, .cart-note { display: flex; gap: 6px; align-items: flex-start; font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--text-secondary); overflow-wrap: anywhere; }
.line .note .ti, .cart-note .ti { flex: none; font-size: 16px; margin-top: 2px; }
/* Toasts: one live region at the foot of the screen, above the phone's Pay bar */
.toasts { position: fixed; z-index: 60; inset-inline: 16px; bottom: 24px; display: grid; justify-items: center; gap: 8px; pointer-events: none; }
.toasts .toast { pointer-events: auto; max-width: min(var(--toast-max), 100%); }
.toast.toast-info .ti { color: var(--sky-300); }

/* Overlays — scrim, drawer, modal layer */
.scrim { position: fixed; inset: 0; z-index: 40; background: var(--overlay); }
.drawer { position: fixed; z-index: 41; inset-block: 0; inset-inline-start: 0; width: min(var(--drawer-w), 88vw); display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
  background: var(--bg-raised); box-shadow: var(--shadow-lg); border-inline-end: 1px solid var(--border); }
.drawer.static { position: relative; inset: auto; z-index: auto; width: 100%; max-width: var(--drawer-w); border-radius: var(--r-card); border: 1px solid var(--border); overflow: hidden; }
.drawer-head, .drawer-foot { display: flex; align-items: center; gap: 12px; padding: 12px 16px; }
.drawer-head { border-bottom: 1px solid var(--border); }
.drawer-head .sp, .drawer-foot .sp { flex: 1; }
.drawer-foot { border-top: 1px solid var(--border); }
/* In the drawer, names wrap rather than lose words */
.drawer-foot .cust-meta b, .drawer-foot .cust-meta small, .drawer-head .store b, .drawer-head .store small { white-space: normal; }
.drawer-body { overflow: auto; padding: 8px 12px 16px; display: grid; align-content: start; gap: 2px; }
.drawer .nav-sec { padding-top: 8px; padding-bottom: 4px; }
.setting { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; min-height: var(--control-h-sm); padding: 4px 12px; border-radius: var(--r-control); }
.setting > .segmented { margin-inline-start: auto; }
.setting > span { display: flex; align-items: center; gap: 12px; font-weight: 500; }
.setting > span .ti { color: var(--text-secondary); font-size: 20px; }
.setting-hinted { display: grid; gap: 2px; } .setting-hinted > .hint { padding-inline: 12px; } .setting-hinted.has-ico > .hint { padding-inline-start: calc(12px + 20px + 12px); } /* under the words, past the icon */
.modal { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 16px; }
.totals-rows { display: grid; gap: 6px; }
.stack { display: grid; gap: 16px; align-content: start; min-width: 0; }
.stack.tight { gap: var(--gap-touch); }
.btn-block { width: 100%; }
/* The middle row never shrinks below its content, so on a short screen the area scrolls instead of overlapping */
.payment.finish { grid-template-rows: auto minmax(min-content, 1fr) auto; }
.payment.finish > .change { align-self: center; padding-block: 40px; }
@media (max-width: 640px) {
  .tenders, .receipts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tender { padding: 0 12px; gap: 8px; }
  .actions-row .btn, .receipts .btn { min-width: 0; padding: 0 6px; font-size: var(--fs-md); gap: 6px; }
}

/* =====================================================================
   5. DESK — base, layout utilities, the app frame (added for the back office, 4 Oct 2026)
   ===================================================================== */
/* Base: links and headings */
a { color: var(--accent-text); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
.link { color: var(--accent-text); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.link-quiet { color: inherit; text-decoration: none; }
.link-quiet:hover { color: var(--accent-text); text-decoration: underline; }
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 600; color: var(--text); }
p { margin: 0; }
.title-1 { font-size: var(--fs-3xl); line-height: var(--lh-3xl); font-weight: 600; letter-spacing: -.01em; }
.title-2 { font-size: var(--fs-xl); line-height: var(--lh-xl); font-weight: 600; }
.title-3 { font-size: var(--fs-lg); line-height: var(--lh-lg); font-weight: 600; }
.lead { font-size: var(--fs-lg); line-height: var(--lh-lg); color: var(--text-secondary); }
.muted, .text-secondary { color: var(--text-secondary); }
.text-success { color: var(--success-text); } .text-danger { color: var(--danger-text); } .text-warning { color: var(--warning-text); } .text-accent { color: var(--accent-text); }
.fs-xs { font-size: var(--fs-xs); line-height: var(--lh-xs); } .fs-sm { font-size: var(--fs-sm); line-height: var(--lh-sm); } .fs-md { font-size: var(--fs-md); line-height: var(--lh-md); } .fs-lg { font-size: var(--fs-lg); line-height: var(--lh-lg); } .fs-xl { font-size: var(--fs-xl); line-height: var(--lh-xl); } .fs-2xl { font-size: var(--fs-2xl); line-height: var(--lh-2xl); } .fs-3xl { font-size: var(--fs-3xl); line-height: var(--lh-3xl); } .fs-4xl { font-size: var(--fs-4xl); line-height: var(--lh-4xl); }
.fw-400 { font-weight: 400; } .fw-500 { font-weight: 500; } .fw-600 { font-weight: 600; } .fw-700 { font-weight: 700; }
.justify-center { justify-content: center; } .text-start { text-align: start; } .text-end { text-align: end; } .text-center { text-align: center; }
.nowrap { white-space: nowrap; } .truncate { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.break { overflow-wrap: anywhere; }

/* Layout utilities: a 12-column grid with the system's breakpoints (576 · 768 · 992 · 1200 · 1400) */
.row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gutter); }
.row > * { grid-column: span 12; min-width: 0; }
.row.gap-4 { gap: var(--sp-4); }
.col-1 { grid-column: span 1; } .col-2 { grid-column: span 2; } .col-3 { grid-column: span 3; } .col-4 { grid-column: span 4; } .col-5 { grid-column: span 5; } .col-6 { grid-column: span 6; }
.col-7 { grid-column: span 7; } .col-8 { grid-column: span 8; } .col-9 { grid-column: span 9; } .col-10 { grid-column: span 10; } .col-11 { grid-column: span 11; } .col-12 { grid-column: span 12; }
@media (min-width: 576px) { .col-sm-3 { grid-column: span 3; } .col-sm-4 { grid-column: span 4; } .col-sm-6 { grid-column: span 6; } .col-sm-8 { grid-column: span 8; } .col-sm-12 { grid-column: span 12; } }
@media (min-width: 768px) { .col-md-3 { grid-column: span 3; } .col-md-4 { grid-column: span 4; } .col-md-5 { grid-column: span 5; } .col-md-6 { grid-column: span 6; } .col-md-7 { grid-column: span 7; } .col-md-8 { grid-column: span 8; } .col-md-12 { grid-column: span 12; } }
@media (min-width: 992px) { .col-lg-3 { grid-column: span 3; } .col-lg-4 { grid-column: span 4; } .col-lg-5 { grid-column: span 5; } .col-lg-6 { grid-column: span 6; } .col-lg-7 { grid-column: span 7; } .col-lg-8 { grid-column: span 8; } .col-lg-9 { grid-column: span 9; } .col-lg-12 { grid-column: span 12; } }
@media (min-width: 1200px) { .col-xl-2 { grid-column: span 2; } .col-xl-3 { grid-column: span 3; } .col-xl-4 { grid-column: span 4; } .col-xl-5 { grid-column: span 5; } .col-xl-6 { grid-column: span 6; } .col-xl-7 { grid-column: span 7; } .col-xl-8 { grid-column: span 8; } .col-xl-9 { grid-column: span 9; } }
@media (min-width: 1400px) { .col-xxl-3 { grid-column: span 3; } .col-xxl-4 { grid-column: span 4; } .col-xxl-6 { grid-column: span 6; } .col-xxl-8 { grid-column: span 8; } }
.grid-auto { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(var(--min, 240px), 100%), 1fr)); gap: var(--sp-4); }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); min-width: 0; }
.spread { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); min-width: 0; }
.d-none { display: none !important; } .d-flex { display: flex; } .d-grid { display: grid; } .d-block { display: block; }
@media (max-width: 767px) { .hide-sm { display: none !important; } }
@media (max-width: 991px) { .hide-md { display: none !important; } }
@media (min-width: 992px) { .show-md { display: none !important; } }
.gap-0 { gap: 0; } .gap-1 { gap: var(--sp-1); } .gap-2 { gap: var(--sp-2); } .gap-3 { gap: var(--sp-3); } .gap-4 { gap: var(--sp-4); } .gap-6 { gap: var(--sp-6); } .gap-8 { gap: var(--sp-8); }
.mt-0 { margin-top: 0; } .mt-1 { margin-top: var(--sp-1); } .mt-2 { margin-top: var(--sp-2); } .mt-3 { margin-top: var(--sp-3); } .mt-4 { margin-top: var(--sp-4); } .mt-6 { margin-top: var(--sp-6); }
.mb-0 { margin-bottom: 0; } .mb-1 { margin-bottom: var(--sp-1); } .mb-2 { margin-bottom: var(--sp-2); } .mb-3 { margin-bottom: var(--sp-3); } .mb-4 { margin-bottom: var(--sp-4); } .mb-6 { margin-bottom: var(--sp-6); }
.p-3 { padding: var(--sp-3); } .pt-3 { padding-top: var(--sp-3); } .ms-auto { margin-inline-start: auto; } .me-auto { margin-inline-end: auto; } .ps-4 { padding-inline-start: var(--sp-4); }
.p-0 { padding: 0; } .p-4 { padding: var(--sp-4); } .p-6 { padding: var(--sp-6); }
.w-100 { width: 100%; } .w-auto { width: auto; } .minw-0 { min-width: 0; } .flex-1 { flex: 1; min-width: 0; } .flex-none { flex: none; }
.items-center { align-items: center; } .items-start { align-items: flex-start; } .items-end { align-items: flex-end; } .place-center { justify-items: center; text-align: center; } .justify-end { justify-content: flex-end; } .justify-between { justify-content: space-between; }
.ratio { position: relative; aspect-ratio: var(--ratio, 16 / 9); overflow: hidden; } .ratio > * { position: absolute; inset: 0; width: 100%; height: 100%; }
.ratio-1x1 { --ratio: 1; } .ratio-4x3 { --ratio: 4 / 3; } .ratio-16x9 { --ratio: 16 / 9; } .ratio-21x9 { --ratio: 21 / 9; }
.divider { border: 0; border-top: 1px solid var(--border); margin: 0; }

/* The app frame: sidebar, top bar, page. One configuration drives the sidebar (data-module on every item). */
.app { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); min-height: 100dvh; background: var(--bg-app); color: var(--text); }
.app-main { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-width: 0; }
.sidebar { position: sticky; top: 0; height: 100dvh; display: grid; grid-template-rows: auto minmax(0, 1fr); grid-template-columns: minmax(0, 1fr); background: var(--bg-surface); border-inline-end: 1px solid var(--border); z-index: 30; }
.brand { display: flex; align-items: center; gap: 12px; height: var(--topbar-h); padding: 0 16px; border-bottom: 1px solid var(--border); min-width: 0; text-decoration: none; color: var(--text); }
.brand-mark { width: 36px; height: 36px; border-radius: var(--r-control); flex: none; display: grid; place-items: center; background: var(--accent); color: var(--on-accent); }
.brand-mark .ti { font-size: 20px; }
.brand-name { display: grid; min-width: 0; }
.brand-name b { font-size: var(--fs-lg); line-height: var(--lh-sm); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand-name small { font-size: var(--fs-xs); line-height: var(--lh-xs); color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-nav { overflow: auto; overscroll-behavior: contain; padding: 8px 12px 16px; display: grid; align-content: start; gap: 2px; scrollbar-width: thin; }
/* Collapsible nav group: a native disclosure */
.nav-group > summary { list-style: none; display: flex; align-items: center; gap: 12px; min-height: 40px; padding: 0 12px; border-radius: var(--r-control); cursor: pointer; font-weight: 500; color: var(--text); user-select: none; }
.nav-group > summary::-webkit-details-marker { display: none; }
.nav-group > summary .ti { font-size: var(--icon-nav); color: var(--text-secondary); }
.nav-group > summary .chev { margin-inline-start: auto; font-size: 16px; transition: transform var(--dur-base) var(--ease); }
.nav-group[open] > summary .chev { transform: rotate(90deg); }
.nav-group > summary:hover { background: var(--bg-muted); }
.nav-group.on > summary { color: var(--accent-text); }
.nav-group.on > summary > .ti:first-child { color: var(--accent-text); }
.nav-sub { display: grid; gap: 2px; padding: 2px 0 6px; }
/* Sub-items line up with the group's label: padding + icon + gap */
.nav-sub .nav-item { min-height: 36px; padding-inline-start: calc(var(--sp-3) * 2 + var(--icon-nav)); font-weight: 400; color: var(--text-secondary); position: relative; }
.nav-sub .nav-item::before { content: ""; position: absolute; inset-inline-start: calc(var(--sp-3) + var(--icon-nav) / 2 - 3px); top: 50%; width: 6px; height: 6px; border-radius: 50%; background: var(--border-strong); transform: translateY(-50%); }
.nav-sub .nav-item:hover { color: var(--text); }
.nav-sub .nav-item.on { color: var(--accent-text); font-weight: 500; }
.nav-sub .nav-item.on::before { background: var(--accent); }
.nav-item[aria-current="page"] { background: var(--accent-subtle); color: var(--accent-text); }
.nav-sub .nav-item[aria-current="page"] { background: var(--accent-subtle); }
/* Top bar */
.topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 8px; min-height: var(--topbar-h); padding: 8px var(--page-pad); background: var(--bg-surface); border-bottom: 1px solid var(--border); min-width: 0; }
.topbar .sp { flex: 1; }
.topbar-search { flex: 0 1 380px; min-width: 0; margin: 0; }
.topbar-search .input { width: 100%; }
.avatar-btn { all: unset; box-sizing: border-box; display: grid; place-items: center; width: var(--control-h); height: var(--control-h); border-radius: 50%; cursor: pointer; flex: none; }
.avatar-btn:hover .avatar { box-shadow: 0 0 0 2px var(--border-strong); }
.topbar .avatar { width: 32px; height: 32px; }
.user-chip { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 8px; height: var(--control-h); padding-block: 0; padding-inline: 4px 8px; border-radius: var(--r-control); cursor: pointer; min-width: 0; max-width: var(--chip-max); }
.user-chip:hover { background: var(--bg-muted); }
.user-chip b { display: block; font-size: var(--fs-md); line-height: var(--lh-sm); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-chip small { display: block; font-size: var(--fs-xs); line-height: var(--lh-xs); color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-chip > span:last-child { min-width: 0; }
.dot-badge { position: relative; }
.dot-badge::after { content: ""; position: absolute; top: 6px; inset-inline-end: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--danger); box-shadow: 0 0 0 2px var(--bg-surface); }
/* Page */
.page { width: 100%; max-width: var(--page-max, none); margin-inline: auto; padding: 24px var(--page-pad) 40px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-content: start; min-width: 0; }
.page-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; }
.page-head nav + .title-1 { margin-top: 4px; }
.page-head .sub { color: var(--text-secondary); margin-top: 4px; }
.page-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 0; padding: 0; list-style: none; font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--text-secondary); }
.breadcrumb li { display: flex; align-items: center; gap: 6px; }
.breadcrumb li + li::before { content: "/"; color: var(--border-strong); }
.breadcrumb a { color: inherit; text-decoration: none; }
.breadcrumb a:hover { color: var(--accent-text); text-decoration: underline; }
.breadcrumb [aria-current] { color: var(--text); font-weight: 500; }
.page-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 16px var(--page-pad); border-top: 1px solid var(--border); font-size: var(--fs-sm); color: var(--text-secondary); }
.page-foot a { color: inherit; display: inline-flex; align-items: center; min-height: 24px; }
/* Sidebar collapsed to a rail (desktop toggle, and the hover-expand layout). Pointing at it or tabbing into it opens it over the page. */
@media (min-width: 992px) {
  .app[data-sidebar="rail"] { grid-template-columns: var(--rail-w) minmax(0, 1fr); }
  .app[data-sidebar="rail"] .sidebar { width: var(--rail-w); transition: width var(--dur-base) var(--ease); }
  .app[data-sidebar="rail"] .sidebar:is(:hover, :focus-within) { width: var(--sidebar-w); box-shadow: var(--shadow-lg); }
  .app[data-sidebar="rail"] .sidebar:not(:hover, :focus-within) :is(.nav-group > summary .chev, .nav-sub, .nav-sec) { display: none; }
  .app[data-sidebar="rail"] .sidebar:not(:hover, :focus-within) :is(.brand-name, .nav-group > summary span) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } /* folded: the names leave the screen, not the accessibility tree */
  .app[data-sidebar="rail"] .sidebar:not(:hover, :focus-within) :is(.nav-group > summary, .brand) { justify-content: center; padding: 0; }
}
/* Phones and small tablets: the sidebar is a drawer over the page */
.nav-toggle { display: none; }
@media (max-width: 991px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .nav-toggle { display: inline-flex; }
  .sidebar { position: fixed; inset-block: 0; inset-inline-start: 0; width: min(var(--sidebar-w), 86vw); height: 100dvh; z-index: 45; box-shadow: var(--shadow-lg); }
  .sidebar:not(.open) { display: none; }
  .topbar { padding-inline: 16px; }
  .page { padding: 16px 16px 32px; gap: 16px; }
  .page-foot { padding-inline: 16px; }
}
@media (max-width: 575px) { .topbar-search { display: none; } .user-chip > span:last-child { display: none; } }

/* Card additions: a card with a list or a table inside, a card's footer */
.card-body { padding: var(--card-pad); }
.card-foot { padding: 12px var(--card-pad); border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.card-sub { font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--text-secondary); }
/* Cards side by side in a row are the same height */
.row > * > .card:only-child { height: 100%; }
.card > .table-wrap { border: 0; border-radius: 0; }
.card > .table-wrap:last-child { border-end-start-radius: calc(var(--r-card) - 1px); border-end-end-radius: calc(var(--r-card) - 1px); }
.card > .list:last-child > :last-child, .card > [data-by-period]:last-child > .list > :last-child { border-end-start-radius: calc(var(--r-card) - 1px); border-end-end-radius: calc(var(--r-card) - 1px); }

/* ---------- Desk components ---------- */
/* Table, full: a scrolling wrapper, sortable headers, row selection, a bulk-action bar, totals */
.table-wrap { position: relative; overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r-card); background: var(--bg-surface); } /* positioned, so hidden labels inside a wide table stay inside its scroll box */
.table-wrap:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.table td, .table th { vertical-align: middle; }
.table th.sel, .table td.sel { width: 48px; padding-inline-end: 0; }
.table th .sort { all: unset; display: inline-flex; align-items: center; gap: 4px; min-height: 24px; cursor: pointer; border-radius: var(--r-sm); color: inherit; font: inherit; }
.table th .sort:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.table th .sort .ti { font-size: 14px; color: var(--text-disabled); }
.table th[aria-sort="ascending"] .sort .ti, .table th[aria-sort="descending"] .sort .ti { color: var(--accent-text); }
.table th .sort:hover { color: var(--text); }
.table tbody tr[aria-selected="true"] td { background: var(--accent-subtle); }
.table tfoot td { font-weight: 600; background: var(--bg-subtle); border-top: 1px solid var(--border); border-bottom: 0; }
.table .group-row td { background: var(--bg-subtle); font-weight: 600; font-size: var(--fs-sm); color: var(--text-secondary); height: auto; padding-block: 8px; }
/* Product thumbnail: 4:3, the photos' own shape, so nothing is cropped */
.thumb { width: 48px; height: 36px; border-radius: var(--r-sm); object-fit: cover; flex: none; background: var(--bg-muted); }
.thumb-ico { display: grid; place-items: center; color: var(--text-secondary); }
.thumb-ico .ti { font-size: 18px; }
/* A link that stands alone (in a cell, a card's foot, a breadcrumb) is at least 24 px tall, the desk's smallest target */
.table td a:not(.btn), .card-foot > a, .popover-head > a, .breadcrumb a, .dl dd > a, .stat-foot a { display: inline-flex; align-items: center; min-height: 24px; }
.table .cell-main { display: flex; align-items: center; gap: 12px; min-width: var(--cell-main-min); }
@media (max-width: 767px) { .table.stack-sm .cell-main { min-width: 0; } }
.table .cell-main b { display: block; font-weight: 500; }
.table .cell-main small { display: block; font-size: var(--fs-xs); line-height: var(--lh-xs); color: var(--text-secondary); }
.table .cell-main > span { min-width: 0; }
.table .actions { text-align: end; white-space: nowrap; }
.table.compact td { height: 40px; }
.bulk-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 8px 12px; border: 1px solid var(--accent); border-radius: var(--r-card); background: var(--accent-subtle); color: var(--accent-text); font-weight: 500; }
.bulk-bar .sp { flex: 1; }
/* A data table inside a card: the controls keep the card's padding, the table runs edge to edge */
.card > [data-table-box] { padding-block: var(--card-pad); }
.card > [data-table-box] > :not(.table-wrap, [data-table-empty]) { margin-inline: var(--card-pad); }
.card > [data-table-box] > .table-wrap { border-inline: 0; border-radius: 0; }
.chips:empty { display: none; }
.filter-bar .sort-select { display: none; flex: 0 1 180px; }
/* Row actions: icon buttons at the end of a row */
.row-actions { display: inline-flex; gap: 4px; justify-content: flex-end; }
.row-action-gap { visibility: hidden; } /* the place of an action this row does not have, the size of one */
/* A form with a pinned action bar keeps the focused field clear of it (WCAG 2.4.11) */
html:has(.form-actions) { scroll-padding-bottom: var(--pinned-foot); }
@media (max-width: 575px) { html:has(.form-actions) { scroll-padding-bottom: var(--pinned-foot-sm); } .form-actions { padding: 8px 12px; } .form-actions .btn { flex: 1 1 auto; } .form-actions .ti { display: none; } }
/* On a phone a table can lay each row out as a card: label on the left, value on the right */
@media (max-width: 767px) {
  .table.stack-sm thead { display: none; } /* each value carries its label (data-label); sorting moves to the Sort select */
  .filter-bar .sort-select { display: block; }
  .table.stack-sm, .table.stack-sm tbody, .table.stack-sm tr, .table.stack-sm td { display: block; width: 100%; }
  .table.stack-sm tr { padding: 8px 0; border-bottom: 1px solid var(--border); }
  .table.stack-sm td { height: auto; padding: 6px 16px; border: 0; display: flex; justify-content: space-between; align-items: center; gap: 12px; text-align: end; }
  .table.stack-sm td::before { content: attr(data-label); color: var(--text-secondary); font-size: var(--fs-sm); text-align: start; }
  .table.stack-sm td.sel::before, .table.stack-sm td.actions::before { content: none; }
  .table.stack-sm td.sel { width: auto; }
  .table.stack-sm td > *, .table.stack-sm .cell-main > span { min-width: 0; overflow-wrap: anywhere; }
}
/* Filter bar: search, filters, removable chips of what is applied */
.filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.filter-bar .input { flex: 1 1 240px; max-width: var(--search-max); }
.filter-bar select.input { flex: 0 1 180px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding-block: 0; padding-inline: 12px 4px; border-radius: var(--r-full); background: var(--bg-muted); color: var(--text); font-size: var(--fs-sm); font-weight: 500; }
.chip button { all: unset; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; cursor: pointer; color: var(--text-secondary); }
.chip button:hover { background: var(--bg-subtle); color: var(--text); }
.chip button .ti { font-size: 14px; }
/* Pagination: a count, rows per page, pages */
.pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; font-size: var(--fs-sm); color: var(--text-secondary); }
.pager { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; list-style: none; }
.pager a, .pager button { all: unset; box-sizing: border-box; min-width: 32px; height: 32px; padding: 0 8px; border-radius: var(--r-control); display: inline-flex; align-items: center; justify-content: center; font-size: var(--fs-md); font-weight: 500; color: var(--text); cursor: pointer; font-variant-numeric: tabular-nums; }
.pager a:hover, .pager button:hover { background: var(--bg-muted); }
.pager [aria-current="page"], .pager [aria-current="page"]:hover { background: var(--accent); color: var(--on-accent); }
.pager li { display: flex; align-items: center; }
.pager li > span { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 32px; }
.pager [aria-disabled="true"] { color: var(--text-disabled); cursor: default; background: none; }
.pager .ti { font-size: 16px; }
.per-page { display: flex; align-items: center; gap: 8px; }
.per-page select.input { height: 32px; padding-block: 0; }
/* Menu (dropdown) — opened by a menu button; positioned by system.js */
.menu { position: fixed; z-index: 55; min-width: var(--menu-min); max-width: min(var(--menu-max), calc(100vw - 32px)); max-height: min(var(--float-max-h), calc(100dvh - 32px)); overflow: auto; padding: 4px; display: grid; gap: 2px; background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--r-card); box-shadow: var(--shadow-md); }
.menu-item { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 12px; border-radius: var(--r-sm); color: var(--text); font-size: var(--fs-md); cursor: pointer; white-space: nowrap; }
.menu-item:hover { background: var(--bg-muted); }
.menu-item:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; background: var(--bg-muted); }
.menu-item .ti { font-size: 18px; color: var(--text-secondary); }
.menu-item.danger { color: var(--danger-text); } .menu-item.danger .ti { color: var(--danger-icon); }
.menu-item .kbd { margin-inline-start: auto; }
.menu-sep { height: 1px; margin: 4px 0; background: var(--border); }
.menu-item[aria-checked="true"] { color: var(--accent-text); font-weight: 600; } .menu-item[aria-checked="true"] .ti { color: var(--accent-text); }
.menu-head { padding: 8px 12px 4px; font-size: var(--fs-xs); line-height: var(--lh-xs); font-weight: 600; color: var(--text-secondary); }
/* Tooltip — names an icon-only button; stays while hovered (WCAG 1.4.13) */
.tooltip { position: fixed; z-index: 70; max-width: var(--tip-max); padding: 6px 12px; border-radius: var(--r-sm); background: var(--bg-inverse); color: var(--text-inverse); font-size: var(--fs-sm); line-height: var(--lh-sm); font-weight: 500; box-shadow: var(--shadow-md); }
/* Popover — a small non-modal panel (notifications, quick filters) */
.popover { position: fixed; z-index: 55; width: min(var(--popover-w, 360px), calc(100vw - 32px)); max-height: min(var(--float-max-h), calc(100dvh - 32px)); overflow: auto; background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--r-card); box-shadow: var(--shadow-lg); }
.popover-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.popover-foot { padding: 8px 16px; border-top: 1px solid var(--border); text-align: center; }
/* Avatar sizes, shapes, status, groups */
.avatar.sm { width: 24px; height: 24px; font-size: var(--fs-xs); } .avatar.lg { width: 40px; height: 40px; font-size: var(--fs-md); } .avatar.xl { width: 56px; height: 56px; font-size: var(--fs-lg); } .avatar.xxl { width: 96px; height: 96px; font-size: var(--fs-3xl); }
.avatar.square { border-radius: var(--r-control); }
.avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.avatar { position: relative; overflow: visible; }
.avatar .status { position: absolute; bottom: 0; inset-inline-end: 0; width: 25%; height: 25%; min-width: 8px; min-height: 8px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 2px var(--bg-surface); }
.avatar-group { display: flex; } .avatar-group .avatar { box-shadow: 0 0 0 2px var(--bg-surface); } .avatar-group .avatar + .avatar { margin-inline-start: -8px; }
.avatar.tone-violet { background: var(--violet-100); color: var(--violet-800); } .avatar.tone-amber { background: var(--amber-100); color: var(--amber-800); } .avatar.tone-green { background: var(--green-100); color: var(--green-800); } .avatar.tone-pink { background: var(--pink-100); color: var(--pink-800); } .avatar.tone-gray { background: var(--gray-100); color: var(--gray-800); }
[data-theme="dark"] .avatar.tone-violet, [data-theme="dark"] .avatar.tone-amber, [data-theme="dark"] .avatar.tone-green, [data-theme="dark"] .avatar.tone-pink, [data-theme="dark"] .avatar.tone-gray { background: var(--bg-muted); color: var(--text); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .avatar[class*="tone-"] { background: var(--bg-muted); color: var(--text); } }
/* Forms: sections, a two-column grid, input groups, an action bar */
.form-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 768px) { .form-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); } .form-grid.two > .span-2, .form-grid.two > .setting { grid-column: 1 / -1; } }
@media (min-width: 768px) { .form-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); } .form-grid.three > .span-2 { grid-column: 1 / -1; } }
.form-section { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 1200px) { .form-section.annotated { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 24px; align-items: baseline; } }
.form-section .about h2 { font-size: var(--fs-lg); line-height: var(--lh-lg); font-weight: 600; }
.form-section .about p { color: var(--text-secondary); margin-top: 4px; }
.form-actions { position: sticky; bottom: 0; z-index: 10; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; padding: 12px 16px; background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-card); box-shadow: var(--shadow-md); }
.form-actions .sp { flex: 1; }
.input-group { display: flex; min-width: 0; }
.input-group > .input { flex: 1; border-start-end-radius: 0; border-end-end-radius: 0; }
.input-group > .btn { border-start-start-radius: 0; border-end-start-radius: 0; margin-inline-start: -1px; }
.input .btn-reveal { all: unset; display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--r-sm); cursor: pointer; color: var(--text-secondary); }
.input .btn-reveal:hover { background: var(--bg-muted); color: var(--text); }
.input .btn-reveal:focus-visible { outline: 2px solid var(--focus); outline-offset: 0; }
.required::after { content: " *"; color: var(--danger-text); }
.field .counter { font-size: var(--fs-xs); color: var(--text-secondary); text-align: end; }
/* Description list: label and value pairs */
.dl { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin: 0; container-type: inline-size; }
.dl > div { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 12px; align-items: baseline; }
.dl dt { color: var(--text-secondary); font-size: var(--fs-md); }
.dl dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }
.dl > div:has(> dd > svg, > dd > img, > dd > .badge:only-child) { align-items: center; }
@container (max-width: 300px) { .dl > div { grid-template-columns: minmax(0, 1fr); gap: 2px; } } /* too narrow for two columns: the name over its value */
/* Progress and meter */
.progress { height: 8px; border-radius: var(--r-full); background: var(--bg-muted); overflow: hidden; }
.progress > span { display: block; height: 100%; width: var(--value, 0%); border-radius: inherit; background: var(--accent); }
.progress.success > span { background: var(--success); } .progress.warning > span { background: var(--warning); } .progress.danger > span { background: var(--danger); }
.progress-row { display: grid; gap: 6px; } .progress-row .spread { font-size: var(--fs-sm); }
/* Change indicator: up / down against a period */
.delta { display: inline-flex; align-items: center; gap: 2px; font-size: var(--fs-sm); font-weight: 600; font-variant-numeric: tabular-nums; }
.delta.good { color: var(--success-text); } .delta.bad { color: var(--danger-text); } .delta .ti { font-size: 16px; }
/* List group and feed rows */
.list { display: grid; margin: 0; padding: 0; list-style: none; }
.list > li { display: flex; align-items: center; gap: 12px; padding: 12px var(--card-pad); border-bottom: 1px solid var(--border); min-width: 0; }
.list > li:last-child { border-bottom: 0; }
/* A row with one destination is one link, the whole row */
.list > li:has(> .list-link) { padding: 0; }
.list-link { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; padding: 12px var(--card-pad); color: inherit; text-decoration: none; border-radius: inherit; }
.list-link:hover { background: var(--bg-subtle); }
.list-link:hover .grow b { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }
.list-link:focus-visible { outline-offset: -2px; }
.list .grow { flex: 1; min-width: 0; }
.list .grow b { display: block; font-weight: 500; overflow-wrap: anywhere; }
.list .grow small { display: block; font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--text-secondary); }
.list .end { text-align: end; font-variant-numeric: tabular-nums; flex: 0 1 auto; min-width: 0; max-width: 50%; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 4px; }
.list-ico { width: 36px; height: 36px; border-radius: var(--r-control); display: grid; place-items: center; flex: none; background: var(--bg-muted); color: var(--text-secondary); }
.list-ico .ti { font-size: 18px; }
.list-ico.accent { background: var(--accent-subtle); color: var(--accent-text); } .list-ico.success { background: var(--success-subtle); color: var(--success-text); } .list-ico.warning { background: var(--warning-subtle); color: var(--warning-text); } .list-ico.danger { background: var(--danger-subtle); color: var(--danger-text); }
/* Timeline */
.timeline { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.timeline > li { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 12px; position: relative; padding-bottom: 20px; }
.timeline > li:last-child { padding-bottom: 0; }
.timeline > li::before { content: ""; position: absolute; inset-inline-start: calc(32px / 2 - 1px); top: 32px; bottom: 0; width: 2px; background: var(--border); }
.timeline > li:last-child::before { content: none; }
.timeline .t-ico { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--bg-muted); color: var(--text-secondary); }
.timeline .t-ico .ti { font-size: 16px; }
.timeline .t-ico.accent { background: var(--accent-subtle); color: var(--accent-text); } .timeline .t-ico.success { background: var(--success-subtle); color: var(--success-text); } .timeline .t-ico.danger { background: var(--danger-subtle); color: var(--danger-text); }
.timeline > li > div { padding-top: 6px; } /* the title's line centres on its 32 px icon */
.timeline b { display: block; font-weight: 500; }
.timeline small { display: block; color: var(--text-secondary); font-size: var(--fs-sm); line-height: var(--lh-sm); }
/* Steps: a wizard's or an order's progress */
.steps { display: flex; gap: 8px; margin: 0; padding: 0; list-style: none; counter-reset: step; }
.steps > li { flex: 1 1 0; min-width: 0; display: grid; gap: 8px; counter-increment: step; font-size: var(--fs-sm); color: var(--text-secondary); }
.steps > li::before { content: ""; height: 4px; border-radius: var(--r-full); background: var(--bg-muted); }
.steps > li.done::before, .steps > li[aria-current="step"]::before { background: var(--accent); }
.steps > li[aria-current="step"] { color: var(--text); font-weight: 600; }
.steps > li.done { color: var(--text); }
@media (max-width: 575px) { .steps { flex-wrap: wrap; row-gap: 12px; } .steps > li { flex: 1 1 calc(33.333% - 8px); } } /* six steps: two rows of three on a phone */
/* Spinner and skeleton */
.spinner.sm { width: 16px; height: 16px; border-width: 2px; }
.spinner { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--border-control); border-top-color: var(--accent); animation: spin .8s linear infinite; display: inline-block; }
.skeleton { border-radius: var(--r-sm); background: linear-gradient(90deg, var(--bg-muted) 25%, var(--bg-subtle) 50%, var(--bg-muted) 75%) 0 0 / 200% 100%; animation: shimmer 1.4s ease-in-out infinite; min-height: 12px; }
@keyframes shimmer { to { background-position: -200% 0; } } [dir="rtl"] .skeleton { animation-direction: reverse; } /* the shine travels the way the page reads */
@media (prefers-reduced-motion: reduce) { .skeleton { animation: none; } }
/* Chart frame: a chart and its legend in a card; the chart is drawn by ApexCharts (system.js gives it the tokens) */
.chart { position: relative; min-height: var(--chart-h); }
.chart-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: var(--fs-sm); color: var(--text-secondary); }
.chart-legend span { display: inline-flex; align-items: center; gap: 6px; }
.chart-legend i { width: 12px; height: 12px; border-radius: var(--r-xs); background: var(--c, var(--accent)); }
/* A chart's legend as a list: swatch, name, value, share */
.legend-list { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.legend-list li { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto minmax(40px, auto); align-items: center; gap: 8px; min-height: 28px; font-size: var(--fs-md); }
.legend-list i { width: 12px; height: 12px; border-radius: var(--r-xs); background: var(--c, var(--accent)); }
.legend-list b { font-weight: 600; text-align: end; }
.legend-list .muted { text-align: end; }
/* Sparkline cell */
.spark { width: 96px; height: 32px; }
/* Upload dropzone and file items */
.dropzone { display: grid; justify-items: center; gap: 8px; padding: 24px 16px; border: 2px dashed var(--border-strong); border-radius: var(--r-card); background: var(--bg-subtle); text-align: center; color: var(--text-secondary); cursor: pointer; }
.dropzone:hover, .dropzone.over { border-color: var(--accent); background: var(--accent-subtle); color: var(--accent-text); }
.dropzone:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }
.dropzone .ti { font-size: calc(var(--icon) + 14px); }
.dropzone b { color: var(--text); }
.dropzone input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.file-item { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--r-control); background: var(--bg-surface); }
.file-item .grow { flex: 1; min-width: 0; }
.file-item b { display: block; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-item small { color: var(--text-secondary); font-size: var(--fs-xs); }
/* Copy field: a value with a copy button */
.copy-field { display: flex; align-items: center; gap: 8px; min-width: 0; padding-block: 4px; padding-inline: 12px 4px; border: 1px solid var(--border-control); border-radius: var(--r-control); background: var(--bg-subtle); font-family: var(--font-mono); font-size: var(--fs-sm); }
.copy-field code { flex: 1; min-width: 0; overflow-wrap: anywhere; } /* the whole value stays visible; long ones wrap */
/* Option card: a selectable card (plans, payment methods, layouts) */
.option-card { position: relative; display: grid; gap: 4px; padding: 16px; border: 1px solid var(--border-control); border-radius: var(--r-card); background: var(--bg-surface); cursor: pointer; }
.option-card:has(input:checked) { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: var(--accent-subtle); }
.option-card:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.option-card input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.option-card b { font-weight: 600; }
.option-card small { color: var(--text-secondary); }
/* Accordion: native details */
.accordion { border: 1px solid var(--border); border-radius: var(--r-card); background: var(--bg-surface); overflow: hidden; }
.accordion details + details { border-top: 1px solid var(--border); }
.accordion summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 12px 16px; cursor: pointer; font-weight: 500; }
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary .ti { transition: transform var(--dur-base) var(--ease); color: var(--text-secondary); }
.accordion details[open] summary .ti { transform: rotate(180deg); }
.accordion summary:focus-visible { outline-offset: -2px; }
.accordion .acc-body { padding: 0 16px 16px; color: var(--text-secondary); }
/* Key figures row (stat cards in a grid) */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(var(--stat-min, 220px), 100%), 1fr)); gap: var(--sp-4); } /* a row of three fills the width, as a row of four does */
.stats.five { --stat-min: 180px; }
.stats:has(> :nth-child(4):last-child) { --m: var(--stat-min, 220px); --g: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(max(calc((100% - 3 * var(--g)) / 4 - .5px), min(calc((100% - var(--g)) / 2 - .5px), calc((4 * var(--m) + 3 * var(--g) - 100%) * 999)), min(100%, calc((2 * var(--m) + var(--g) - 100%) * 999))), 1fr)); } /* four stats: four across, two and two, or one under another; never three and one (the leaders' col-md-6 col-xl-3) */

/* A focused control is never hidden under the pinned top bar (WCAG 2.4.11) */
html:has(.app) { scroll-padding-top: calc(var(--topbar-h) + var(--hnav-h, 0px) + 16px); } /* --hnav-h: the horizontal layout's menu bar, measured by system.js */
/* Skip link: the first Tab stop on every page; it jumps past the sidebar to the content */
.skip { position: fixed; z-index: 80; top: 8px; inset-inline-start: 8px; padding: 8px 16px; border-radius: var(--r-control); background: var(--bg-raised); color: var(--accent-text); font-weight: 600; box-shadow: var(--shadow-md); transform: translateY(-200%); }
.skip:focus-visible { transform: none; }
.m-0 { margin: 0; }
.chart-figure { display: grid; gap: 12px; min-width: 0; }
/* A button whose word is read by screen readers but hidden on a phone, where it shows its icon only */
@media (max-width: 767px) { .btn-collapse { padding: 0; width: var(--control-h); } .btn-collapse .btn-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } }
/* Blank layout: one centred card (sign-in, errors, lock screen) */
.blank { min-height: 100dvh; display: grid; place-items: center; padding: 24px 16px; }

/* Totals: label and amount rows; the last is the grand total */
.totals-list { display: grid; gap: 8px; margin: 0; }
.totals-list > div { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.totals-list dt { color: var(--text-secondary); }
.totals-list dd { margin: 0; font-variant-numeric: tabular-nums; font-weight: 500; }
.totals-list .grand { padding-top: 12px; border-top: 1px solid var(--border); font-size: var(--fs-lg); line-height: var(--lh-lg); }
.totals-list .grand:first-child { padding-top: 0; border-top: 0; }
.totals-list .grand dt, .totals-list .grand dd { color: var(--text); font-weight: 700; }
/* Line items editor: a table of inputs, a way to add a line, the totals */
.line-editor { display: grid; gap: 16px; }
.line-editor .table td { padding-block: 8px; height: auto; }
.line-editor .table .input { width: 100%; }
.line-editor .table td:first-child .input { min-width: var(--field-min); }
.line-editor .qty, .line-editor .disc { width: 96px; } .line-editor .price { width: 120px; }
.line-editor .foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; }
.line-editor .totals-list { width: min(100%, var(--totals-w)); margin-inline-start: auto; }
/* A document (invoice, quote, receipt on A4): what is printed, as it will look */
.doc { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-card); padding: 40px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; box-shadow: var(--shadow-xs); }
.doc-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 24px; }
.doc-brand { display: flex; align-items: center; gap: 12px; }
.doc-title { text-align: end; }
.doc-title h2 { font-size: var(--fs-4xl); line-height: var(--lh-4xl); font-weight: 700; letter-spacing: -.01em; }
.doc-parties { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 24px; }
.doc-parties h3 { font-size: var(--fs-xs); line-height: var(--lh-xs); font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 8px; }
.doc-parties p { color: var(--text-secondary); }
.doc-parties b { color: var(--text); }
.doc .table-wrap { border-radius: var(--r-control); }
.doc-sum { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px; }
.doc-sum .totals-list { width: min(100%, var(--totals-w)); margin-inline-start: auto; }
.doc-note { color: var(--text-secondary); font-size: var(--fs-sm); line-height: var(--lh-sm); max-width: 48ch; }
@media (max-width: 575px) { .doc { padding: 20px; gap: 24px; } .doc-title { text-align: start; } }
/* Print: the document alone, no frame around it */
@media print {
  .sidebar, .topbar, .page-foot, .page-actions, .form-actions, .skip, .toasts, .no-print { display: none !important; }
  .app { display: block; } .page { padding: 0; max-width: none; } body { background: #fff; }
  .doc { border: 0; box-shadow: none; padding: 0; }
  .card { break-inside: avoid; box-shadow: none; }
}

/* Barcode (EAN-13) drawn as SVG; the digits under it use the mono face */
.barcode { display: block; width: 100%; max-width: var(--barcode-w); height: auto; color: var(--text); background: #fff; }
.barcode-digits { font-family: var(--font-mono); font-weight: 500; fill: currentColor; }
[data-theme="dark"] .barcode { color: #000; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .barcode { color: #000; } }
.qr { width: var(--qr-w); aspect-ratio: 1; background: #fff; color: #000; padding: 8px; border-radius: var(--r-sm); }
.qr svg { display: block; width: 100%; height: 100%; }
/* Product cards in a grid: the photo at its own 4:3, the name, the price and the stock */
.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(var(--card-min, 200px), 100%), 1fr)); gap: 16px; }
@media (max-width: 575px) { .product-grid { --card-min: 150px; gap: 12px; } .pc-body { padding: 8px 12px 12px; } }
.product-card { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; border: 1px solid var(--border); border-radius: var(--r-card); background: var(--bg-surface); color: inherit; text-decoration: none; overflow: hidden; box-shadow: var(--shadow-xs); }
.product-card:hover { border-color: var(--border-strong); }
.product-card:hover .pc-name { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }
.product-card:focus-visible { outline-offset: 2px; }
.product-card img, .product-card .pc-ph { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; display: block; background: var(--bg-muted); }
.product-card .pc-ph { display: grid; place-items: center; color: var(--text-secondary); }
.product-card .pc-ph .ti { font-size: var(--fs-4xl); }
.pc-body { display: grid; gap: 4px; padding: 12px 16px 16px; align-content: start; overflow-wrap: anywhere; } /* the card's width, whatever the spacing of its words */
.pc-name { font-weight: 600; overflow-wrap: anywhere; }
.pc-meta { font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--text-secondary); }
.pc-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; }
.pc-price { font-size: var(--fs-lg); line-height: var(--lh-lg); font-weight: 700; font-variant-numeric: tabular-nums; }
/* Small parts: a colour swatch, a range slider, a short number field, a rounded photo */
.swatch { width: 12px; height: 12px; border-radius: var(--r-xs); background: var(--c, var(--accent)); flex: none; }
.range { width: 100%; height: 24px; accent-color: var(--accent); }
.input.qty-sm { width: 96px; }
.count-search { max-width: var(--search-max); }
img.w-100 { height: auto; } .rounded { border-radius: var(--r-card); }
.product-photo { max-width: var(--photo-max); }
/* A read-only value in a field's place (a live margin); not a control, so no control edge */
.readout { display: flex; align-items: center; min-height: var(--control-h); padding: 0 12px; border-radius: var(--r-control); background: var(--bg-subtle); color: var(--text); font-variant-numeric: tabular-nums; }
/* Labels: printed on white stock whatever the theme; sizes are the real label sizes (Avery L7159, L7163) */
.label-sheet { --label-w: 63.5mm; --label-h: 33.9mm; display: grid; grid-template-columns: repeat(auto-fill, var(--label-w)); gap: 8px; }
.label-sheet.size-99, .print-label.size-99 { --label-w: 99.1mm; --label-h: 38.1mm; }
.print-label { --label-w: 63.5mm; --label-h: 33.9mm; width: var(--label-w); height: var(--label-h); padding: 2mm 3mm; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center; background: #fff; color: #000; border: 1px dashed var(--gray-400); border-radius: var(--r-xs); overflow: hidden; font-size: var(--fs-xs); line-height: var(--lh-xs); }
.label-sheet .print-label { width: auto; height: var(--label-h); }
.print-label b { font-weight: 600; }
.print-label .ld-name { font-size: var(--name-size, var(--fs-md)); line-height: 1.25; }
.print-label .label-price { font-size: var(--fs-lg); line-height: var(--lh-lg); font-weight: 700; font-variant-numeric: tabular-nums; }
.print-label .barcode, .print-label [data-part="barcode"] { flex: 1 1 0; min-height: 0; width: 100%; max-width: none; background: transparent; color: #000; }
.print-label [data-part="barcode"] { display: flex; } .print-label [data-part="barcode"] .barcode { height: 100%; }
.label-stage { display: grid; place-items: center; padding: 32px 16px; background: var(--bg-muted); border-radius: var(--r-control); overflow-x: auto; }
.shelf-sheet { display: grid; grid-template-columns: repeat(auto-fill, 60mm); gap: 8px; }
.shelf-label { position: relative; width: 60mm; height: 40mm; padding: 2mm 3mm; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto 1fr auto; column-gap: 8px; background: #fff; color: #000; border: 1px dashed var(--gray-400); border-radius: var(--r-xs); overflow: hidden; }
.shelf-label .sl-name { grid-column: 1 / -1; font-weight: 600; font-size: var(--fs-sm); line-height: var(--lh-sm); }
.shelf-label .sl-price { grid-column: 1; font-size: var(--fs-4xl); line-height: var(--lh-4xl); font-weight: 700; font-variant-numeric: tabular-nums; }
.shelf-label .sl-was { grid-column: 2; align-self: center; font-size: var(--fs-xs); text-decoration: line-through; }
.shelf-label .sl-unit { grid-column: 1 / -1; font-size: var(--fs-xs); line-height: var(--lh-xs); }
.shelf-label .barcode { grid-column: 1; grid-row: 4; width: 100%; height: 6mm; max-width: none; background: transparent; color: #000; }
.shelf-label .sl-sku { grid-column: 2; grid-row: 4; align-self: center; font-size: var(--fs-xs); line-height: var(--lh-xs); }
.shelf-label.promo { background: var(--amber-100); }
.promo-tag { position: absolute; top: 0; inset-inline-end: 0; padding: 2px 8px; background: #000; color: #fff; font-size: var(--fs-xs); line-height: var(--lh-xs); font-weight: 700; border-end-start-radius: var(--r-xs); }
.qr-sheet { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(160px, 100%), 1fr)); gap: 16px; }
.qr-card { display: grid; justify-items: center; gap: 8px; padding: 16px; border: 1px dashed var(--border-strong); border-radius: var(--r-card); text-align: center; }
.qr-card figcaption { display: grid; gap: 2px; }
/* Loyalty card: the card's real shape (ID-1, 85.6 × 54 mm), white type on the brand's dark blue */
.loyalty-card { width: min(100%, var(--loyalty-w)); aspect-ratio: 85.6 / 54; padding: 20px; border-radius: var(--r-sheet); display: grid; align-content: space-between; gap: 8px; color: #fff; background: linear-gradient(135deg, var(--blue-800), var(--violet-800)); box-shadow: var(--shadow-md); }
.loyalty-card .ti { font-size: var(--fs-3xl); }
.lc-num { font-size: var(--fs-xl); line-height: var(--lh-xl); letter-spacing: .08em; }
/* A shift in the roster: its times on a soft chip */
.shift-chip { display: inline-flex; align-items: center; height: var(--badge-h); padding: 0 var(--badge-px); border-radius: var(--r-sm); background: var(--accent-subtle); color: var(--accent-text); font-size: var(--fs-xs); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Gift card face: the card's shape, the balance large */
.gift-card-art { width: min(100%, var(--loyalty-w)); aspect-ratio: 85.6 / 54; padding: 20px; border-radius: var(--r-sheet); display: grid; align-content: space-between; color: #fff; background: linear-gradient(135deg, var(--green-800), var(--teal-800)); box-shadow: var(--shadow-md); }
.gift-card-art .ti { font-size: var(--fs-3xl); }
.gc-amount { font-size: var(--fs-5xl); line-height: var(--lh-5xl); font-weight: 700; }
/* A list of what is included: a check before each line */
.check-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.check-list li { display: flex; gap: 8px; align-items: flex-start; }
.check-list .ti { color: var(--success-icon); margin-top: 2px; }
/* A financial statement: sections of accounts, each with its total, and the statement's total */
.report-doc { gap: 24px; padding: 32px; }
.stmt h3 { font-size: var(--fs-sm); line-height: var(--lh-sm); font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 12px; }
.stmt-total { display: flex; justify-content: space-between; gap: 16px; padding-top: 16px; border-top: 2px solid var(--text); font-size: var(--fs-lg); line-height: var(--lh-lg); }
@media (max-width: 575px) { .report-doc { padding: 20px; } }
/* The shop the customer sees: its own header and footer, no back-office frame */
.shop { min-height: 100dvh; display: grid; grid-template-rows: auto 1fr auto; background: var(--bg-app); }
.shop-head { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap; min-height: var(--topbar-h); padding: 8px var(--page-pad); background: var(--bg-surface); border-bottom: 1px solid var(--border); }
.shop-head .brand { height: auto; padding: 0; border: 0; }
.shop-head .sp { flex: 1; }
.shop-nav { display: flex; flex-wrap: wrap; gap: 4px; }
.shop-nav a { display: inline-flex; align-items: center; min-height: var(--control-h); padding: 0 12px; border-radius: var(--r-control); color: var(--text); text-decoration: none; font-weight: 500; }
.shop-nav a:hover { background: var(--bg-muted); }
.shop-nav a[aria-current="page"] { color: var(--accent-text); background: var(--accent-subtle); }
.shop-main { width: 100%; max-width: var(--shop-max); margin-inline: auto; padding: 24px var(--page-pad) 48px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-content: start; }
.shop-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 16px; padding: 16px var(--page-pad); border-top: 1px solid var(--border); font-size: var(--fs-sm); color: var(--text-secondary); background: var(--bg-surface); }
.shop-foot a { color: inherit; display: inline-flex; align-items: center; min-height: 24px; }
html:has(.shop) { scroll-padding-top: calc(var(--topbar-h) + 16px); }
@media (max-width: 767px) { .shop-head { position: static; } .shop-head, .shop-main, .shop-foot { padding-inline: 16px; } .shop-nav { order: 3; width: 100%; } html:has(.shop) { scroll-padding-top: 16px; } } /* on a phone the shop's two-row header scrolls away instead of covering the page */
/* Product page: the picture beside the buying panel */
.pdp { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
@media (min-width: 992px) { .pdp { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } }
.pdp-hero { aspect-ratio: 4 / 3; border-radius: var(--r-sheet); display: grid; place-content: center; justify-items: center; gap: 12px; text-align: center; color: #fff; background: linear-gradient(160deg, var(--amber-800), var(--orange-900)); }
.pdp-hero .ti { font-size: var(--fs-d1); }
.pdp-hero b { font-size: var(--fs-4xl); line-height: var(--lh-4xl); }
.pdp-price { font-size: var(--fs-4xl); line-height: var(--lh-4xl); font-weight: 700; }
.option-set { border: 0; margin: 0; padding: 0; display: grid; gap: 8px; min-width: 0; }
.option-chip { position: relative; display: inline-flex; }
.option-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.option-chip span { display: inline-flex; align-items: center; min-height: var(--control-h); padding: 0 16px; border: 1px solid var(--border-control); border-radius: var(--r-full); cursor: pointer; font-weight: 500; }
.option-chip input:checked + span { border-color: var(--accent); background: var(--accent-subtle); color: var(--accent-text); box-shadow: inset 0 0 0 1px var(--accent); }
.option-chip input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
.qty-field { max-width: var(--qty-field); }
.stars { display: inline-flex; gap: 2px; color: var(--amber-500); }
.stars .ti { font-size: 16px; color: var(--border-strong); }
.stars .ti.on { color: var(--amber-500); fill: currentColor; }
.track { max-width: var(--track-max); margin-inline: auto; width: 100%; }
/* The plan most companies choose stands out */
.plan-featured { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
/* Settings: the list of settings pages beside the page's own sections; on a narrow screen the list folds away */
.settings { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; }
@media (min-width: 992px) { .settings { grid-template-columns: var(--settings-nav-w) minmax(0, 1fr); } .settings-mobile { display: none; } }
.settings-nav { position: sticky; top: calc(var(--topbar-h) + var(--hnav-h, 0px) + 24px); padding: 12px; display: grid; gap: 16px; max-height: calc(100dvh - var(--topbar-h) - var(--hnav-h, 0px) - 48px); overflow: auto; overscroll-behavior: contain; }
@media (max-width: 991px) { .settings-nav { display: none; } }
.settings-group { display: grid; gap: 2px; }
.settings-group h2 { padding: 0 12px 4px; font-size: var(--fs-xs); line-height: var(--lh-xs); font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .04em; }
.settings-group a { display: flex; align-items: center; min-height: 36px; padding: 0 12px; border-radius: var(--r-control); color: var(--text); text-decoration: none; }
.settings-group a:hover { background: var(--bg-muted); }
.settings-group a:is([aria-current="page"], [aria-current="location"]) { background: var(--accent-subtle); color: var(--accent-text); font-weight: 600; }
.settings-mobile { border: 1px solid var(--border); border-radius: var(--r-card); background: var(--bg-surface); }
.settings-mobile > summary { list-style: none; display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 16px; cursor: pointer; font-weight: 600; }
.settings-mobile > summary::-webkit-details-marker { display: none; }
.settings-mobile .chev { margin-inline-start: auto; transition: transform var(--dur-base) var(--ease); }
.settings-mobile[open] .chev { transform: rotate(180deg); }
.settings-mobile nav { display: grid; gap: 12px; padding: 8px; border-top: 1px solid var(--border); }
/* A document template, drawn small: header, lines, total */
.tpl-thumb { display: grid; gap: 6px; padding: 12px; aspect-ratio: 4 / 3; border-radius: var(--r-sm); background: var(--bg-subtle); border: 1px solid var(--border); }
.tpl-thumb i { display: block; height: 8px; border-radius: var(--r-xs); background: var(--border-strong); }
.tpl-thumb i:first-child { width: 50%; height: 12px; }
.tpl-thumb i:last-child { width: 35%; margin-inline-start: auto; }
.tpl-modern i:first-child { width: 100%; height: 16px; background: var(--accent); }
.tpl-minimal i { height: 4px; background: var(--border); }
/* ---------- Counter screens (the till's other flows) ---------- */
html:has(.till-page), .till-page { height: 100%; }
.till-page .register { height: 100%; min-height: 100dvh; }
.register-main.solo { grid-template-columns: minmax(0, 1fr); }
.solo-work { grid-template-rows: auto auto minmax(auto, 1fr); align-content: start; overflow: auto; } /* the list is never shorter than its rows: on a short screen the whole area scrolls instead of the list running under the buttons */
.seg-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-touch); }
.seg-row .btn[aria-checked="true"] { --_bg: var(--accent); --_fg: var(--on-accent); --_bd: transparent; } .seg-row .btn[aria-checked="true"]:hover { background: var(--accent-hover); } .seg-row .btn[aria-checked="true"]:active { background: var(--accent-pressed); } /* the chosen order type looks like the primary button */
/* Quick-service keys: text tiles, two lines, big targets */
.qs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(var(--tile-min), 100%), 1fr)); gap: var(--gap-touch); align-content: start; }
.qs-key { all: unset; box-sizing: border-box; display: grid; align-content: space-between; gap: 8px; min-height: 96px; padding: 12px 16px; border-radius: var(--r-card); border: 1px solid var(--border-control); background: var(--bg-surface); cursor: pointer; font-weight: 600; }
.qs-key b { font-size: var(--fs-lg); }
.qs-key:hover { background: var(--bg-subtle); }
.qs-key.on, .qs-key[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-subtle); color: var(--accent-text); box-shadow: inset 0 0 0 1px var(--accent); }
.qs-key:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* Floor plan: a tile for each table, coloured by where the table is in its meal */
.floor-work { grid-template-rows: auto minmax(0, 1fr); }
.floor { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); gap: var(--gap-touch); align-content: start; overflow: auto; padding: 4px; margin: -4px; }
.table-tile { display: grid; gap: 2px; align-content: start; min-height: 120px; padding: 12px 16px; border-radius: var(--r-card); border: 2px solid var(--border-control); background: var(--bg-surface); color: var(--text); text-decoration: none; }
.table-tile.big { grid-column: span 2; }
.table-tile b { font-size: var(--fs-xl); line-height: var(--lh-xl); }
.table-tile span { font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--text-secondary); }
.table-tile .tt-state { font-weight: 600; color: var(--text); }
.table-tile .tt-amt { font-size: var(--fs-lg); line-height: var(--lh-lg); font-weight: 700; color: var(--text); margin-top: auto; }
.table-tile.seated { border-color: var(--sky-500); background: var(--info-subtle); }
.table-tile.ordered { border-color: var(--accent); background: var(--accent-subtle); }
.table-tile.bill { border-color: var(--amber-500); background: var(--warning-subtle); }
.table-tile.clean { border-style: dashed; }
.legend-row { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 0; padding: 0; list-style: none; font-size: var(--fs-sm); color: var(--text-secondary); }
.legend-row li { display: inline-flex; align-items: center; gap: 6px; }
.tbl-dot { width: 12px; height: 12px; border-radius: var(--r-xs); border: 2px solid var(--border-control); }
.tbl-dot.seated { border-color: var(--sky-500); background: var(--info-subtle); } .tbl-dot.ordered { border-color: var(--accent); background: var(--accent-subtle); } .tbl-dot.bill { border-color: var(--amber-500); background: var(--warning-subtle); } .tbl-dot.clean { border-style: dashed; }
/* Kitchen display: tickets in order of age, the late ones marked */
.kds { min-height: 100dvh; display: grid; grid-template-rows: auto 1fr; background: var(--bg-app); color: var(--text); }
.kds-board { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 16px; padding: 16px; align-content: start; }
.ticket { display: grid; grid-template-rows: auto 1fr auto; border-radius: var(--r-card); background: var(--bg-surface); border: 1px solid var(--border); border-top: 6px solid var(--border-strong); }
.ticket.new { border-top-color: var(--accent); } .ticket.cooking { border-top-color: var(--amber-400); } .ticket.late { border-top-color: var(--danger); } .ticket.ready { border-top-color: var(--success); }
.ticket header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.ticket header > span:not(.tk-time) { order: 3; flex-basis: 100%; } /* the order type on its own line under the number and the time */
.ticket header b { font-size: var(--fs-2xl); line-height: var(--lh-2xl); }
.ticket header span { color: var(--text-secondary); font-size: var(--fs-sm); }
.ticket .tk-time { margin-inline-start: auto; font-weight: 700; color: var(--text); font-size: var(--fs-lg); }
.ticket.late .tk-time { color: var(--danger-text); }
.ticket ul { margin: 0; padding: 8px 16px; list-style: none; display: grid; gap: 8px; }
.ticket li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 8px; align-items: baseline; }
.ticket .tk-q { font-weight: 700; font-size: var(--fs-lg); }
.ticket li b { display: block; font-size: var(--fs-lg); line-height: var(--lh-lg); font-weight: 600; }
.ticket li small { display: block; color: var(--text-secondary); font-size: var(--fs-sm); }
.ticket footer { padding: 12px 16px 16px; }
/* Bar tabs */
.tab-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); gap: var(--gap-touch); align-content: start; }
.tab-card { display: grid; gap: 4px; padding: 16px; border-radius: var(--r-card); border: 1px solid var(--border-control); background: var(--bg-surface); color: var(--text); text-decoration: none; }
.tab-card span, .tab-card small { color: var(--text-secondary); font-size: var(--fs-sm); }
.tab-card .tc-amt { font-size: var(--fs-2xl); line-height: var(--lh-2xl); font-weight: 700; color: var(--text); }
.tab-card.on { border-color: var(--accent); background: var(--accent-subtle); box-shadow: inset 0 0 0 1px var(--accent); }
/* Scale panel: the live weight, its price, zero and tare */
.scale-panel { display: grid; gap: 16px; padding: 16px; border-radius: var(--r-card); background: var(--bg-surface); border: 1px solid var(--border); }
.scale-read { display: grid; gap: 4px; padding: 16px; border-radius: var(--r-control); background: var(--bg-inverse); color: var(--text-inverse); text-align: center; }
.scale-read .lbl { font-size: var(--fs-sm); }
.scale-read b { font-size: var(--fs-d1); line-height: var(--lh-d1); font-weight: 700; }
.size-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--gap-touch); }
.option-chip.size span { display: grid; place-items: center; gap: 2px; width: 100%; min-height: var(--control-h-lg); padding: 8px; border-radius: var(--r-control); }
.option-chip.size small { font-size: var(--fs-xs); color: var(--text-secondary); font-weight: 400; }
.option-chip input:disabled + span { opacity: .5; text-decoration: line-through; cursor: not-allowed; }
.option-chip .swatch { width: 16px; height: 16px; margin-inline-end: 8px; border: 1px solid var(--border-strong); }
/* A day of bookings, one row an hour */
.day-plan { display: grid; margin: 0; padding: 0; list-style: none; }
.day-plan li { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; align-items: center; min-height: 80px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.dp-time { color: var(--text-secondary); font-weight: 600; }
.dp-booking { display: grid; gap: 2px; padding: 8px 12px; border-radius: var(--r-control); background: var(--accent-subtle); color: var(--accent-text); text-decoration: none; border-inline-start: 4px solid var(--accent); }
.dp-booking span { font-size: var(--fs-sm); color: var(--text); }
.dp-free { color: var(--text-secondary); font-size: var(--fs-sm); }
/* Self-checkout kiosk */
.kiosk-screen { min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1fr) var(--cart-w, 400px); grid-template-rows: auto minmax(0, 1fr); background: var(--bg-app); color: var(--text); }
.kiosk-head { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 12px 24px; background: var(--bg-surface); border-bottom: 1px solid var(--border); font-size: var(--fs-2xl); }
.kiosk-head .sp { flex: 1; }
.kiosk-main { display: grid; gap: 16px; align-content: start; padding: 24px; min-width: 0; }
.kiosk-cart { display: grid; gap: 12px; align-content: start; padding: 24px; background: var(--bg-surface); border-inline-start: 1px solid var(--border); }
.kc-total { padding-top: 12px; border-top: 1px solid var(--border); font-size: var(--fs-xl); }
@media (max-width: 899px) { .kiosk-screen { grid-template-columns: minmax(0, 1fr); } .kiosk-cart { border: 0; border-top: 1px solid var(--border); } }
/* A device frame around the live register */
.device-stage { display: grid; place-items: center; padding: 24px 0; }
.device { border: 12px solid var(--gray-900); border-radius: calc(var(--r-sheet) * 2 + 4px); background: var(--gray-900); box-shadow: var(--shadow-lg); overflow: hidden; }
.device iframe { display: block; border: 0; background: var(--bg-app); }
.device.tablet iframe { zoom: .62; } /* the iframe's own width and height are the device's */
.device.phone iframe { zoom: .8; }
@media (max-width: 575px) { .device.tablet iframe { zoom: .3; } .device.phone iframe { zoom: .62; } }
.device iframe:focus-visible { outline: 4px solid var(--focus); outline-offset: -4px; }
/* Held sales */
.held-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: var(--gap-touch); align-content: start; }
.held-card { display: grid; gap: 8px; padding: 16px; border-radius: var(--r-card); border: 1px solid var(--border); background: var(--bg-surface); }
.actions-row.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mod-total { padding-top: 12px; border-top: 1px solid var(--border); }
/* Payments made and to make */
.split-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.split-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: center; min-height: var(--control-h); padding: 8px 16px; border-radius: var(--r-card); border: 1px solid var(--border); background: var(--bg-surface); }
.split-list .sl-what { display: flex; align-items: center; gap: 8px; min-width: 0; } .split-list .sl-what > span { min-width: 0; } .split-list .sl-what > .num { flex: none; }
@media (max-width: 575px) { .split-list li { grid-template-columns: minmax(0, 1fr) auto; } .split-list li > .badge { grid-column: 1 / -1; justify-self: start; } }
.split-list li.done { background: var(--success-subtle); border-color: transparent; }
.split-list li.now { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.dl-box { padding: 16px; border-radius: var(--r-card); background: var(--bg-surface); border: 1px solid var(--border); }
/* Refund: the receipt's lines, ticked to refund */
.refund-lines { display: grid; gap: var(--gap-touch); }
.refund-line { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; min-height: var(--control-h-lg); padding: 8px 16px; border-radius: var(--r-card); border: 1px solid var(--border); background: var(--bg-surface); cursor: pointer; }
.refund-line:has(input:checked) { border-color: var(--accent); background: var(--accent-subtle); }
.rl-name b { display: block; } .rl-name small { display: block; color: var(--text-secondary); font-size: var(--fs-sm); }
.tender-chip { display: grid; } .tender-chip span { display: grid; justify-items: center; gap: 4px; min-height: var(--control-h-xl); padding: 8px; border-radius: var(--r-card); text-align: center; }
/* Exchange: what came back beside what went out */
.xchg { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 16px; align-items: center; }
.xchg-arrow { display: grid; place-items: center; width: var(--control-h); height: var(--control-h); border-radius: 50%; background: var(--bg-muted); }
@media (max-width: 899px) { .xchg { grid-template-columns: minmax(0, 1fr); } .xchg-arrow { justify-self: center; transform: rotate(90deg); } }
.xchg-foot { display: grid; gap: 12px; padding-top: 16px; border-top: 1px solid var(--border); }
.quick-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap-touch); }
/* Customer search results at the till */
.cust-results { display: grid; gap: var(--gap-touch); margin: 0; padding: 0; list-style: none; }
.cust-results .cust { width: 100%; }
.cust.on { border-color: var(--accent); background: var(--accent-subtle); }
.sync-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.sync-list li { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; min-height: var(--control-h); padding: 8px 16px; border-radius: var(--r-card); border: 1px solid var(--border); background: var(--bg-surface); }
@media (max-width: 575px) { .kiosk-head .btn .btn-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .kiosk-head .btn { width: var(--control-h); padding: 0; } }
.sync-list li b.num { margin-inline-start: auto; }
/* In a dialog a segmented choice spans the dialog, like the rows below it */
.dialog .segmented { display: flex; } .dialog .segmented button { flex: 1; justify-content: center; }
/* Customer-facing screen: the order on the left, the question on the right */
.cfd { min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); background: var(--bg-app); color: var(--text); }
.cfd-order { display: grid; grid-template-rows: auto 1fr auto; gap: 16px; padding: 32px; background: var(--bg-surface); border-inline-end: 1px solid var(--border); }
.cfd-brand { display: flex; align-items: center; gap: 12px; font-size: var(--fs-2xl); }
.cfd-lines { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; align-content: start; }
.cfd-lines li { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 12px; font-size: var(--fs-xl); line-height: var(--lh-xl); }
.cfd-lines small { display: block; font-size: var(--fs-md); color: var(--text-secondary); }
.cfd-total { display: grid; gap: 8px; padding-top: 16px; border-top: 1px solid var(--border); font-size: var(--fs-lg); }
.cfd-grand { font-size: var(--fs-4xl); line-height: var(--lh-4xl); }
.cfd-ask { display: grid; gap: 16px; align-content: center; justify-items: center; padding: 32px; text-align: center; }
.tip-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; width: min(100%, var(--tip-grid)); }
.tip { all: unset; box-sizing: border-box; display: grid; gap: 4px; justify-items: center; padding: 24px 16px; border-radius: var(--r-sheet); border: 2px solid var(--border-control); background: var(--bg-surface); cursor: pointer; }
.tip b { font-size: var(--fs-4xl); line-height: var(--lh-4xl); }
.tip span { color: var(--text-secondary); font-size: var(--fs-lg); }
.tip:hover { border-color: var(--accent); }
.tip:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
@media (max-width: 899px) { .cfd { grid-template-columns: minmax(0, 1fr); } .cfd-order { border: 0; border-bottom: 1px solid var(--border); } }
.batch-row.is-disabled { opacity: .6; cursor: not-allowed; }

/* ---------- Cash at the till: counting a drawer, the panel that sums it up ---------- */
/* A row for each bill and coin: its face, how many, what they come to (Lightspeed's denomination count) */
.cash-count { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 16px 32px; align-content: start; }
.denoms { display: grid; gap: 8px; align-content: start; min-width: 0; margin: 0; padding: 0; border: 0; }
.denoms legend { padding: 0 0 4px; font-size: var(--fs-sm); line-height: var(--lh-sm); font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .04em; }
.denom { display: grid; grid-template-columns: 72px minmax(80px, 1fr) minmax(88px, auto); gap: 12px; align-items: center; }
.denom-face { display: grid; place-items: center; height: 40px; border-radius: var(--r-sm); border: 1px solid color-mix(in srgb, var(--success) 35%, transparent); background: var(--success-subtle); color: var(--success-text); font-weight: 700; font-variant-numeric: tabular-nums; cursor: pointer; }
.denom-face.coin { width: 40px; justify-self: center; border-radius: 50%; border-color: var(--border-strong); background: var(--bg-muted); color: var(--text); font-size: var(--fs-sm); }
.denom .input input { text-align: end; font-variant-numeric: tabular-nums; }
.denom [data-denom-total] { text-align: end; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.count-work { grid-template-rows: auto; align-content: start; gap: 16px; overflow: auto; }
.count-work > p { margin: 0; max-width: 64ch; }
/* The side panel: the figures that matter, and the one action at the foot (pinned at the bottom on a phone, like Pay) */
.count-panel { display: grid; grid-template-rows: minmax(0, 1fr) auto; height: 100%; min-height: 0; }
.count-panel .pay-foot { padding-top: 12px; border-top: 1px solid var(--border); } /* keys scrolled to the edge stay clear of the pay button */
.count-body { display: grid; gap: 16px; align-content: start; padding: 16px; overflow: auto; overscroll-behavior: contain; }
.count-body h2 { font-size: var(--fs-xl); line-height: var(--lh-xl); font-weight: 600; }
.count-figure { display: grid; gap: 4px; padding: 16px; border-radius: var(--r-card); background: var(--bg-subtle); border: 1px solid var(--border); }
.count-figure .lbl { font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--text-secondary); font-weight: 500; }
.count-figure b { font-size: var(--fs-4xl); line-height: var(--lh-4xl); font-weight: 700; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.count-figure .verdict { font-size: var(--fs-md); line-height: var(--lh-md); color: var(--text-secondary); }
.blind-note { display: flex; gap: 12px; align-items: flex-start; padding: 12px 16px; border-radius: var(--r-card); background: var(--bg-subtle); color: var(--text-secondary); }
.blind-note .ti { flex: none; margin-top: calc((1lh - var(--icon)) / 2); } /* on the first line's centre */
.count-panel .totals-list .grand dd, .count-panel .totals-list .grand dt { font-size: var(--fs-lg); line-height: var(--lh-lg); }
@media (max-width: 899px) {
  .count-panel { height: auto; display: block; }
  .count-body { overflow: visible; }
  .count-panel .pay-foot { position: fixed; z-index: 30; inset-inline: 0; bottom: 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); background: var(--bg-surface); border-top: 1px solid var(--border); }
}
/* Who hands the till to whom */
.handover { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 16px; align-items: center; }
.handover .person { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 12px 16px; border-radius: var(--r-card); border: 1px solid var(--border); background: var(--bg-surface); }
.handover .person > span { min-width: 0; } .handover .person small { display: block; color: var(--text-secondary); font-size: var(--fs-sm); line-height: var(--lh-sm); }
@media (max-width: 575px) { .handover { grid-template-columns: minmax(0, 1fr); } .handover .xchg-arrow { justify-self: center; transform: rotate(90deg); } }
.steps-row { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 0; padding: 0; list-style: none; color: var(--text-secondary); font-size: var(--fs-md); line-height: var(--lh-md); }
.steps-row li { display: inline-flex; align-items: center; gap: 8px; }
.steps-row .n { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--border-strong); font-size: var(--fs-sm); font-weight: 700; }
.steps-row .done .n { border-color: var(--success); background: var(--success); color: var(--on-accent); }
.steps-row [aria-current="step"] { color: var(--text); font-weight: 600; } .steps-row [aria-current="step"] .n { border-color: var(--accent); color: var(--accent-text); }

/* ---------- Paper: a receipt or a till report as the printer makes it ----------
   ESC/POS printers at 203 dpi print 48 characters a line on 80 mm paper and 32 on 58 mm (576 and 384 dots). The paper stays
   white in the dark theme, as paper does; the type is the mono face, one character a column. */
.paper-stage { display: grid; justify-items: center; gap: 16px; padding: 24px 16px; border-radius: var(--r-card); background: var(--bg-muted); container-type: inline-size; }
.paper { --cols: 48; box-sizing: content-box; width: min(calc(var(--cols) * 1ch), calc(100cqi - 32px)); padding: 24px 16px 32px; background: var(--paper); color: var(--paper-ink); font-family: var(--font-mono); font-size: min(var(--fs-sm), calc((100cqi - 32px - 32px) / var(--cols) / 0.6)); line-height: 1.45; box-shadow: var(--shadow-md); position: relative; }
.paper.w58 { --cols: 32; }
.paper::after { content: ""; position: absolute; inset-inline: 0; bottom: -8px; height: 8px; background: linear-gradient(-45deg, transparent 6px, var(--paper) 0) 0 0 / 12px 8px repeat-x, linear-gradient(45deg, transparent 6px, var(--paper) 0) 0 0 / 12px 8px repeat-x; }
.paper .pl { display: flex; justify-content: space-between; gap: 1ch; }
.paper .pl > :not(:first-child) { flex: none; text-align: end; white-space: nowrap; }
.paper .pl > :first-child { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.paper .pc { text-align: center; }
.paper .pr { border: 0; border-top: 1px dashed currentColor; margin: 8px 0; height: 0; }
.paper .pr.double { border-top-style: double; border-top-width: 3px; }
.paper .big { font-size: 2em; line-height: 1.25; font-weight: 600; }
.paper .wide { font-size: 1.5em; line-height: 1.3; font-weight: 600; }
.paper b, .paper strong { font-weight: 700; }
.paper .ind { padding-inline-start: 2ch; }
.paper .logo { display: grid; place-items: center; width: 48px; height: 48px; margin: 0 auto 8px; border-radius: 12px; background: var(--paper-ink); color: var(--paper); }
.paper .logo .ti { font-size: 24px; }
.paper .barcode { display: block; width: min(100%, 26ch); height: auto; margin: 8px auto 0; color: var(--paper-ink); }
.paper .barcode-digits { fill: currentColor; font-family: var(--font-mono); }
.paper .qr { width: 14ch; margin: 8px auto 0; }
.paper .qr svg { display: block; width: 100%; height: auto; }
.paper .stamp { display: block; margin: 8px auto; padding: 4px 1ch; border: 2px solid currentColor; text-align: center; font-weight: 700; letter-spacing: .3em; }
@media print { .paper-stage { background: none; padding: 0; } .paper { box-shadow: none; } .paper::after { display: none; } }
.paper [data-text] { white-space: pre-line; }
.paper .head::first-line { font-size: 1.5em; font-weight: 700; } /* the store's name, the header's first line */
.paper .pl > .tc { min-width: 1ch; } /* the tax code, a column after the amount: A 8%, B 5.5%, blank exempt */
.paper .big > .tc { min-width: 0; } /* at the total's double size the gap alone is the same two columns */
/* An A4 page: the document at the page's proportions, growing if it has more to say */
.a4-stage { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; padding: 24px 16px; border-radius: var(--r-card); background: var(--bg-muted); }
.a4-stage .doc { width: min(100%, var(--a4-w)); aspect-ratio: 210 / 297; align-content: start; box-shadow: var(--shadow-md); }
@media print { .a4-stage { background: none; padding: 0; } .a4-stage .doc { aspect-ratio: auto; box-shadow: none; } }
/* A receipt by email: the message as the customer's mail app shows it. The email itself is always light, as emails are. */
.mail-view { display: grid; border: 1px solid var(--border); border-radius: var(--r-card); overflow: hidden; background: var(--bg-surface); }
.mail-meta { display: grid; gap: 4px; padding: 16px 20px; border-bottom: 1px solid var(--border); font-size: var(--fs-sm); line-height: var(--lh-sm); }
.mail-meta h2 { margin-bottom: 4px; font-size: var(--fs-lg); line-height: var(--lh-lg); font-weight: 600; }
.mail-meta dl { display: grid; gap: 4px; margin: 0; } .mail-meta dl div { display: flex; flex-wrap: wrap; gap: 4px 8px; } .mail-meta dt { min-width: 48px; color: var(--text-secondary); } .mail-meta dd { min-width: 0; overflow-wrap: anywhere; }
.mail-canvas { padding: 32px 16px; background: var(--bg-app); color: var(--text); }
.mail-card { display: grid; max-width: var(--mail-w); margin: 0 auto; border: 1px solid var(--border); border-radius: var(--r-card); background: var(--bg-surface); overflow: hidden; }
.mail-hero { display: grid; justify-items: center; gap: 8px; padding: 32px 24px; text-align: center; }
.mail-hero .brand-mark { width: 48px; height: 48px; }
.mail-total { font-size: var(--fs-d1); line-height: var(--lh-d1); font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.mail-sec { display: grid; gap: 8px; padding: 20px 24px; border-top: 1px solid var(--border); }
.mail-sec h3 { font-size: var(--fs-xs); line-height: var(--lh-xs); font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .04em; }
.mail-line { display: flex; justify-content: space-between; gap: 16px; } .mail-line > :last-child { flex: none; font-variant-numeric: tabular-nums; }
.mail-line small { display: block; color: var(--text-secondary); font-size: var(--fs-sm); line-height: var(--lh-sm); }
.mail-line.grand { padding-top: 8px; border-top: 1px solid var(--border); font-size: var(--fs-lg); line-height: var(--lh-lg); font-weight: 700; }
.mail-rate { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.mail-rate a { display: inline-grid; place-items: center; min-width: 48px; min-height: 48px; padding: 0 12px; border-radius: var(--r-control); border: 1px solid var(--border-control); color: var(--text); text-decoration: none; font-weight: 600; }
.mail-rate a:hover { background: var(--bg-subtle); }
.mail-foot { display: grid; gap: 4px; padding: 20px 24px; border-top: 1px solid var(--border); text-align: center; color: var(--text-secondary); font-size: var(--fs-xs); line-height: var(--lh-xs); }
.mail-foot a { color: inherit; }
/* An email template's preview: the file itself in a frame, at a desktop or a phone's width */
.email-stage { display: grid; justify-items: center; padding: 24px 16px; background: var(--bg-muted); border-radius: 0 0 var(--r-card) var(--r-card); overflow-x: auto; }
.email-frame { width: 100%; max-width: var(--email-w); transition: max-width var(--dur-base) var(--ease); }
.email-frame.wd-phone { max-width: var(--phone-w); }
.email-frame iframe { display: block; width: 100%; height: var(--email-h); border: 0; border-radius: var(--r-control); background: var(--bg-surface); box-shadow: var(--shadow-sm); }
.list-link[aria-current="page"] { background: var(--accent-subtle); } .list-link[aria-current="page"] .grow b { color: var(--accent-text); }
/* A receipt by text: the message thread on the customer's phone */
.phone-frame { width: min(100%, var(--phone-w)); margin: 0 auto; border: 12px solid var(--gray-900); border-radius: var(--phone-r); background: var(--bg-app); overflow: hidden; box-shadow: var(--shadow-md); }
.sms-head { display: grid; justify-items: center; gap: 4px; padding: 16px; border-bottom: 1px solid var(--border); background: var(--bg-surface); text-align: center; }
.sms-head small { color: var(--text-secondary); font-size: var(--fs-xs); line-height: var(--lh-xs); }
.sms-thread { display: grid; gap: 8px; align-content: start; min-height: var(--sms-min); padding: 16px; }
.sms-time { text-align: center; color: var(--text-secondary); font-size: var(--fs-xs); line-height: var(--lh-xs); }
.sms-bubble { justify-self: start; max-width: 85%; padding: 8px 12px; border-radius: 16px; border-end-start-radius: 4px; background: var(--bg-muted); color: var(--text); overflow-wrap: anywhere; }
.sms-bubble a { color: var(--accent-text); }
.sms-bubble.me { justify-self: end; border-radius: 16px; border-end-end-radius: 4px; background: var(--accent); color: var(--on-accent); }

/* ---------- Workspace apps ---------- */
/* Calendar: a month as a table (Google Calendar, Square Appointments), a week, a list; each calendar has its colour */
.cal-app { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; }
@media (min-width: 1200px) { .cal-app { grid-template-columns: 260px minmax(0, 1fr); } }
.cal-side { display: grid; gap: 16px; }
.cal-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.cal-head h2 { font-size: var(--fs-xl); line-height: var(--lh-xl); font-weight: 600; margin-inline-end: auto; }
.cal { width: 100%; border-collapse: collapse; table-layout: fixed; }
.cal th abbr { text-decoration: none; }
.cal th { padding: 8px; font-size: var(--fs-xs); line-height: var(--lh-xs); font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .04em; text-align: start; border-bottom: 1px solid var(--border); }
.cal td { height: 120px; padding: 4px; vertical-align: top; border: 1px solid var(--border); }
.cal td.out .cal-day { color: var(--text-secondary); font-weight: 400; } /* the days around the month: quieter, still readable */
.cal-day { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 4px; border-radius: var(--r-full); font-size: var(--fs-sm); font-weight: 600; font-variant-numeric: tabular-nums; }
.cal td.today .cal-day { background: var(--accent); color: var(--on-accent); }
.cal-evs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; margin: 4px 0 0; padding: 0; list-style: none; }
.cal-ev { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 4px; width: 100%; min-height: 24px; padding: 2px 6px; border-radius: var(--r-xs); font-size: var(--fs-xs); line-height: var(--lh-xs); background: color-mix(in srgb, var(--c) 14%, var(--bg-surface)); color: var(--text); border-inline-start: 3px solid var(--c); cursor: pointer; } /* the title wraps in its day: all of it shows */
.cal-ev > span { min-width: 0; overflow-wrap: anywhere; }
.cal-ev:hover { background: color-mix(in srgb, var(--c) 24%, var(--bg-surface)); }
.cal .cal-ev:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; } /* inside: the next event sits 2 px below */
.cal-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--c); flex: none; }
@media (max-width: 767px) { .cal td { height: 64px; } .cal-ev { justify-content: center; width: 24px; min-width: 24px; padding: 0; border-inline-start: 0; border-radius: 50%; background: var(--c); } .cal-ev > span { display: none; } /* the button's label names the event */ .cal-evs { display: flex; flex-wrap: wrap; gap: 4px; } .cal th { padding: 8px 4px; } }
.cal-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.cal-week > section { display: grid; gap: 8px; align-content: start; min-width: 0; }
.cal-week h3 { padding-bottom: 8px; border-bottom: 1px solid var(--border); font-size: var(--fs-sm); line-height: var(--lh-sm); font-weight: 600; color: var(--text-secondary); }
.cal-week h3.today { color: var(--accent-text); border-bottom-color: var(--accent); }
@media (max-width: 991px) { .cal-week { grid-template-columns: minmax(0, 1fr); } }
.agenda-ev { display: grid; gap: 2px; padding: 8px 12px; border-radius: var(--r-control); border-inline-start: 3px solid var(--c); background: color-mix(in srgb, var(--c) 10%, var(--bg-surface)); }
.agenda-ev small { color: var(--text-secondary); font-size: var(--fs-sm); line-height: var(--lh-sm); }
.cal-list { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
.cal-list > li { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 16px; }
.cal-list .date { font-weight: 600; } .cal-list .date small { display: block; color: var(--text-secondary); font-weight: 400; font-size: var(--fs-sm); }
.cal-list ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
@media (max-width: 575px) { .cal-list > li { grid-template-columns: minmax(0, 1fr); gap: 8px; } }
.cal-key { display: grid; gap: 4px; }
.cal-key .choice { gap: 8px; }
.cal-key .swatch-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--c); flex: none; }
/* Master and detail (mail, chat): a list on the left, the open item on the right; one column on a phone */
.md-app { display: grid; grid-template-columns: minmax(0, 1fr); min-height: 0; border: 1px solid var(--border); border-radius: var(--r-card); background: var(--bg-surface); overflow: hidden; }
@media (min-width: 992px) { .md-app { grid-template-columns: 220px 340px minmax(0, 1fr); height: calc(100dvh - var(--topbar-h) - 220px); min-height: var(--md-min); } .md-app.two { grid-template-columns: 320px minmax(0, 1fr); } }
.md-col { display: grid; align-content: start; min-height: 0; min-width: 0; overflow: auto; border-bottom: 1px solid var(--border); }
@media (min-width: 992px) { .md-col { border-bottom: 0; border-inline-end: 1px solid var(--border); } .md-col:last-child { border-inline-end: 0; } }
.md-app > [role="tabpanel"] { display: contents; } .md-app > [role="tabpanel"][hidden] { display: none; } /* a folder's panel puts its list and its reading pane in the grid's columns */
.md-pane { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-height: 0; min-width: 0; }
.md-col:has(> .md-pane) { align-content: stretch; } /* the open item fills its column: the reply box sits at the foot */
.md-pane[hidden] { display: none; }
.md-pane-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 16px 20px; border-bottom: 1px solid var(--border); }
.md-pane-head h2 { font-size: var(--fs-lg); line-height: var(--lh-lg); font-weight: 600; margin-inline-end: auto; min-width: 0; overflow-wrap: anywhere; }
.md-pane-body { padding: 20px; overflow: auto; min-height: 0; }
.md-pane-foot { padding: 12px 20px; border-top: 1px solid var(--border); }
.folder-nav { display: grid; gap: 2px; padding: 12px; }
.folder-nav [role="tab"] { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 12px; min-height: 40px; padding: 0 12px; border-radius: var(--r-control); cursor: pointer; color: var(--text); }
.folder-nav [role="tab"]:hover { background: var(--bg-muted); }
.folder-nav [role="tab"][aria-selected="true"] { background: var(--accent-subtle); color: var(--accent-text); font-weight: 600; }
.folder-nav [role="tab"] .n { margin-inline-start: auto; font-size: var(--fs-sm); color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.folder-nav [role="tab"][aria-selected="true"] .n { color: var(--accent-text); }
.folder-nav [role="tab"]:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.item-list { display: grid; align-content: start; }
.item-list [role="tab"] { all: unset; box-sizing: border-box; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--border); cursor: pointer; }
.item-list [role="tab"]:hover { background: var(--bg-subtle); }
.item-list [role="tab"][aria-selected="true"] { background: var(--accent-subtle); box-shadow: inset 3px 0 0 var(--accent); } [dir="rtl"] .item-list [role="tab"][aria-selected="true"] { box-shadow: inset -3px 0 0 var(--accent); }
.item-list [role="tab"]:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.item-list .who { font-weight: 500; min-width: 0; overflow-wrap: anywhere; }
.item-list .unread .who, .item-list .unread .subj { font-weight: 700; }
.item-list .when { font-size: var(--fs-xs); line-height: var(--lh-xs); color: var(--text-secondary); font-variant-numeric: tabular-nums; align-self: center; }
.item-list .subj, .item-list .snip { grid-column: 2 / -1; min-width: 0; overflow-wrap: anywhere; font-size: var(--fs-sm); line-height: var(--lh-sm); } /* previews are cut to a sentence in the markup, never clipped */
.item-list .snip { color: var(--text-secondary); }
.item-list .avatar { grid-row: 1; } /* beside the sender's name; the subject and preview sit under the name */
.mail-attach { display: inline-flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: var(--r-control); border: 1px solid var(--border); }
.mail-attach small { display: block; color: var(--text-secondary); font-size: var(--fs-xs); line-height: var(--lh-xs); }
.msg-body { display: grid; gap: 12px; max-width: 72ch; }
.msg-from { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; } .msg-from > div { min-width: 0; } .msg-from small { display: block; color: var(--text-secondary); font-size: var(--fs-sm); line-height: var(--lh-sm); overflow-wrap: anywhere; }
/* Chat */
.chat-thread { display: grid; gap: 12px; align-content: start; }
.chat-msg { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 12px; max-width: 80%; }
.chat-msg .bubble { padding: 8px 12px; border-radius: 16px; border-start-start-radius: 4px; background: var(--bg-muted); overflow-wrap: anywhere; }
.chat-msg .meta { grid-column: 2; font-size: var(--fs-xs); line-height: var(--lh-xs); color: var(--text-secondary); }
.chat-msg.me { justify-self: end; grid-template-columns: minmax(0, 1fr); }
.chat-msg.me .bubble { border-radius: 16px; border-start-end-radius: 4px; background: var(--accent); color: var(--on-accent); }
.chat-msg.me .meta { grid-column: 1; text-align: end; }
.chat-day { justify-self: center; padding: 2px 12px; border-radius: var(--r-full); background: var(--bg-muted); color: var(--text-secondary); font-size: var(--fs-xs); line-height: var(--lh-xs); }
.composer { display: flex; gap: 8px; align-items: center; }
.composer .input { flex: 1; }
/* To-do */
.todo-list { display: grid; margin: 0; padding: 0; list-style: none; }
.todo-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; padding: 12px var(--card-pad); border-bottom: 1px solid var(--border); }
.todo-item:last-child { border-bottom: 0; }
.todo-item .t { min-width: 0; overflow-wrap: anywhere; }
.todo-item .meta { grid-column: 2 / -1; display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--text-secondary); }
.todo-item.done .t { text-decoration: line-through; color: var(--text-secondary); }
.todo-item > .choice { grid-area: 1 / 1; } .todo-item > .t { grid-area: 1 / 2; } .todo-item > .btn { grid-area: 1 / 3; } /* placed by name: an item given only a row is placed before the rest */
/* Contact lines: a phone and an email, each a 24 px target; a long address wraps */
.contact-lines { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; font-size: var(--fs-sm); line-height: var(--lh-sm); }
.contact-lines a { display: inline-flex; align-items: center; min-height: 24px; max-width: 100%; } .contact-lines a > span { min-width: 0; overflow-wrap: anywhere; }
/* Notes */
.note-card { display: grid; gap: 8px; align-content: start; min-height: var(--note-min); padding: 16px; border-radius: var(--r-card); border: 1px solid color-mix(in srgb, var(--c) 40%, var(--border)); background: color-mix(in srgb, var(--c) 10%, var(--bg-surface)); }
.note-card h2 { font-size: var(--fs-lg); line-height: var(--lh-lg); font-weight: 600; }
.note-card p { color: var(--text); white-space: pre-line; }
.note-card footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; font-size: var(--fs-xs); line-height: var(--lh-xs); color: var(--text-secondary); }
/* Files */
.folder-card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; align-items: center; padding: 16px; border-radius: var(--r-card); border: 1px solid var(--border); background: var(--bg-surface); color: var(--text); text-decoration: none; }
.folder-card:hover { background: var(--bg-subtle); }
.folder-card .list-ico { grid-row: 1; } .folder-card small { grid-column: 2; }
.folder-card small { color: var(--text-secondary); font-size: var(--fs-sm); line-height: var(--lh-sm); }
.storage-bar { display: flex; height: 12px; border-radius: var(--r-full); overflow: hidden; background: var(--bg-muted); }
.storage-bar span { background: var(--c); }
.storage-bar span + span { box-shadow: inset 2px 0 0 var(--bg-surface); } [dir="rtl"] .storage-bar span + span { box-shadow: inset -2px 0 0 var(--bg-surface); }
.legend-list.inline { display: flex; flex-wrap: wrap; gap: 8px 16px; }
/* Projects */
.project-card { display: grid; gap: 12px; padding: var(--card-pad); }
.project-card h2 { font-size: var(--fs-lg); line-height: var(--lh-lg); font-weight: 600; }
.project-card h2 a { display: inline-flex; align-items: center; min-height: 28px; color: inherit; text-decoration: none; } .project-card h2 a:hover { color: var(--accent-text); text-decoration: underline; }
.project-card .foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.milestones { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.milestones li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.milestones .ti { color: var(--text-secondary); } .milestones .done .ti { color: var(--success-icon); }
.milestones .done span:not(.num) { color: var(--text-secondary); }
/* Kanban: columns of cards; a card moves by dragging, or from its menu */
.kanban { position: relative; /* hidden labels inside scroll with it, not past the page */ display: grid; grid-auto-flow: column; grid-auto-columns: minmax(var(--kb-col-w), 1fr); gap: 16px; width: calc(100% + 8px); min-width: 0; overflow-x: auto; padding: 4px 4px 8px; margin: -4px; scroll-padding-inline: 8px; align-items: start; } /* room for the cards' focus rings, also when a card scrolls into view */
.kb-col { display: grid; gap: 12px; align-content: start; min-height: var(--kb-col-min); padding: 12px; border-radius: var(--r-card); background: var(--bg-muted); }
.kb-col.drop { box-shadow: inset 0 0 0 2px var(--accent); }
.kb-col-head { display: flex; align-items: center; gap: 8px; padding: 4px; }
.kb-col-head h2 { font-size: var(--fs-md); line-height: var(--lh-md); font-weight: 600; }
.kb-col-head .count { min-width: 24px; height: 24px; padding: 0 8px; display: inline-grid; place-items: center; border-radius: var(--r-full); background: var(--bg-surface); font-size: var(--fs-xs); font-weight: 600; font-variant-numeric: tabular-nums; }
.kb-list { display: grid; gap: 8px; min-height: 48px; margin: 0; padding: 0; list-style: none; }
.kb-card { display: grid; gap: 8px; padding: 12px; border-radius: var(--r-control); background: var(--bg-surface); border: 1px solid var(--border); box-shadow: var(--shadow-xs); cursor: grab; }
.kb-card.dragging { opacity: .5; }
.kb-card .top { display: flex; align-items: center; gap: 8px; } .kb-card > .badge { justify-self: start; } .kb-card .top b { flex: 1; min-width: 0; font-weight: 500; overflow-wrap: anywhere; }
.kb-card .foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: var(--fs-xs); line-height: var(--lh-xs); color: var(--text-secondary); } .kb-card .foot > span { display: inline-flex; align-items: center; gap: 4px; }
.kb-empty { padding: 16px; border: 1px dashed var(--border-strong); border-radius: var(--r-control); text-align: center; color: var(--text-secondary); font-size: var(--fs-sm); }
/* Calls: the video call's tiles and the round controls; the audio call's card */
.call-stage { display: grid; gap: 12px; padding: 12px; border-radius: var(--r-card); background: var(--gray-900); }
.call-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 575px) { .call-grid { grid-template-columns: minmax(0, 1fr); } }
.call-tile { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 10; border-radius: var(--r-control); background: var(--gray-800); color: var(--gray-50); }
.call-tile.speaking { box-shadow: 0 0 0 3px var(--green-500); }
.call-tile .name { position: absolute; inset-inline-start: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border-radius: var(--r-full); background: rgb(0 0 0 / .55); color: #fff; font-size: var(--fs-sm); line-height: var(--lh-sm); }
.call-tile .avatar { width: 72px; height: 72px; font-size: var(--fs-2xl); }
.call-bar { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; padding: 8px; }
.call-btn { all: unset; box-sizing: border-box; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--gray-700); color: #fff; cursor: pointer; }
.call-btn:hover { background: var(--gray-600); }
.call-btn[aria-pressed="true"] { background: #fff; color: var(--gray-900); }
.call-btn.end { width: 72px; border-radius: var(--r-full); background: var(--red-600); }
.call-btn.end:hover { background: var(--red-700); }
:is(.call-stage, .call-card) .call-btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; } /* white on the dark stage: the blue ring is too faint there */
.call-btn .ti { font-size: 24px; }
.call-card { display: grid; justify-items: center; gap: 16px; padding: 40px 24px; border-radius: var(--r-sheet); background: var(--gray-900); color: var(--gray-50); text-align: center; }
.call-card .avatar { width: 96px; height: 96px; font-size: var(--fs-3xl); }
.call-card .sub { color: var(--gray-300); }
.call-card .timer { font-size: var(--fs-2xl); line-height: var(--lh-2xl); font-weight: 600; font-variant-numeric: tabular-nums; }
.dial { display: grid; grid-template-columns: repeat(3, 72px); gap: 12px; }
.dial .call-btn { width: 72px; height: 56px; border-radius: var(--r-card); font-size: var(--fs-xl); }
/* Feed */
.post { display: grid; gap: 12px; padding: var(--card-pad); }
.post-head { display: flex; align-items: center; gap: 12px; } .post-head small { display: block; color: var(--text-secondary); font-size: var(--fs-sm); line-height: var(--lh-sm); }
.post-img { width: min(100%, var(--photo-max)); height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-control); background: var(--bg-muted); }
.post-actions { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 12px; border-top: 1px solid var(--border); }
.post-actions .btn[aria-pressed="true"] { color: var(--accent-text); border-color: var(--accent); background: var(--accent-subtle); }
.comments { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.comments li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; }
.comments .bubble { padding: 8px 12px; border-radius: var(--r-card); background: var(--bg-muted); font-size: var(--fs-sm); line-height: var(--lh-sm); }
.comments .bubble b { display: block; }
/* Blog posts: a cover photo, then the post */
.post-card { display: grid; grid-template-rows: auto 1fr auto; overflow: hidden; }
.post-cover { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; background: var(--bg-muted); }
.empty-cover { display: grid; place-items: center; color: var(--text-secondary); } .empty-cover .ti { font-size: 36px; }
.post-card .card-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.post-card .badge { flex: 0 1 auto; min-width: 0; height: auto; min-height: var(--badge-h); white-space: normal; } /* a long category wraps in a narrow column */
/* a phone lists the posts: a square photo beside the words (the 600 px photos stay sharp at that size) */
@media (max-width: 575px) { .post-card { grid-template-columns: var(--post-thumb) minmax(0, 1fr); grid-template-rows: auto auto; align-items: start; } .post-cover { width: var(--post-thumb); margin-block: 16px 0; margin-inline: 16px 0; border-radius: var(--r-sm); } .post-card .card-body { padding-inline-start: 12px; } .post-card .card-foot { grid-column: 1 / -1; flex-wrap: wrap; } }
.accordion.flush { border: 0; border-radius: 0; }
/* Search results */
.result-list { display: grid; margin: 0; padding: 0; list-style: none; }
.result-list > li > a { display: flex; align-items: center; gap: 12px; padding: 12px var(--card-pad); border-bottom: 1px solid var(--border); color: inherit; text-decoration: none; }
.result-list > li > a:hover { background: var(--bg-subtle); }
.result-list > li > a:focus-visible { outline-offset: -2px; }
.result-list .grow { flex: 1; min-width: 0; } .result-list .grow b { display: block; font-weight: 500; overflow-wrap: anywhere; } .result-list .grow small { display: block; color: var(--text-secondary); font-size: var(--fs-sm); line-height: var(--lh-sm); }
.result-list > li:last-child > a { border-bottom: 0; }

/* ---------- Account pages: sign in and the rest, in three frames (Vuexy, Metronic: basic, cover, illustration) ---------- */
.auth { min-height: 100dvh; display: grid; place-items: center; padding: 32px 16px; background: var(--bg-app); color: var(--text); }
.auth-card.wide { width: min(100%, var(--wizard-w)); }
.btn-link { all: unset; display: inline-flex; align-items: center; min-height: 24px; color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } .btn-link:hover { text-decoration-thickness: 2px; } .btn-link:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--r-xs); }
.auth-card { display: grid; gap: 24px; width: min(100%, var(--auth-w)); padding: 32px; border-radius: var(--r-sheet); background: var(--bg-surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm); }
@media (max-width: 575px) { .auth-card { padding: 24px 20px; } }
.auth-brand { display: inline-flex; align-items: center; gap: 12px; color: var(--text); text-decoration: none; font-weight: 600; font-size: var(--fs-lg); line-height: var(--lh-lg); }
.auth-head { display: grid; gap: 4px; } .auth-head p { color: var(--text-secondary); }
.auth-foot { text-align: center; color: var(--text-secondary); font-size: var(--fs-sm); line-height: var(--lh-sm); }
.auth-foot a { display: inline-flex; align-items: center; min-height: 24px; }
.auth-or { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; color: var(--text-secondary); font-size: var(--fs-sm); line-height: var(--lh-sm); }
.auth-or::before, .auth-or::after { content: ""; height: 1px; background: var(--border); }
.auth-split { min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1fr); background: var(--bg-surface); color: var(--text); }
@media (min-width: 992px) { .auth-split { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); } }
.auth-side { display: none; position: relative; overflow: hidden; }
@media (min-width: 992px) { .auth-side { display: grid; } }
.auth-main { display: grid; place-items: center; padding: 40px 16px; }
.auth-main .auth-card { border: 0; box-shadow: none; padding: 0; }
/* the cover: a wall of the café's photos (each small enough to stay sharp), the store's line over a dark band */
.mosaic { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-content: start; gap: 4px; background: var(--gray-900); } /* out of the flow: the photos never make the page taller */
.mosaic img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; } /* the photos' own shape: nothing cropped */
.auth-caption { position: absolute; inset-inline: 0; bottom: 0; display: grid; gap: 4px; padding: 32px 40px; background: linear-gradient(to top, rgb(10 12 16 / .92), rgb(10 12 16 / .72) 65%, transparent); color: #fff; }
.auth-caption b { font-size: var(--fs-2xl); line-height: var(--lh-2xl); }
.auth-caption span { color: rgb(255 255 255 / .86); }
/* the illustration: a till, its receipt and a coffee, drawn in the system's colours */
.auth-art { place-items: center; padding: 48px; background: var(--accent-subtle); }
.auth-art svg { width: min(100%, var(--art-w)); height: auto; }
.art .bg { fill: color-mix(in srgb, var(--accent) 12%, var(--bg-surface)); } .art .card { fill: var(--bg-surface); stroke: var(--border); stroke-width: 2; }
.art .acc { fill: var(--accent); } .art .acc-soft { fill: color-mix(in srgb, var(--accent) 30%, var(--bg-surface)); } .art .ink { fill: var(--text); } .art .mute { fill: var(--border-strong); }
.art .paper { fill: #fff; stroke: var(--border-strong); stroke-width: 2; } .art .line { stroke: var(--border-strong); stroke-width: 4; stroke-linecap: round; }
.art .green { fill: var(--green-500); } .art .amber { fill: var(--amber-400); } .art .steam { fill: none; stroke: var(--border-strong); stroke-width: 4; stroke-linecap: round; }
/* a one-time code */
.otp { display: flex; gap: 8px; justify-content: space-between; }
.otp input { width: 100%; min-width: 0; height: var(--control-h-xl); padding: 0; border: 1px solid var(--border-control); border-radius: var(--r-control); background: var(--bg-surface); color: var(--text); text-align: center; font: 600 var(--fs-2xl)/1 var(--font-mono); }
.otp input:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-color: var(--accent); }
/* error and status pages */
.status-page { display: grid; justify-items: center; gap: 16px; width: min(100%, var(--status-w)); text-align: center; }
.status-code { font-size: var(--fs-d2); line-height: var(--lh-d2); font-weight: 700; letter-spacing: -.03em; color: var(--accent-text); font-variant-numeric: tabular-nums; }
.status-page .lead { color: var(--text-secondary); font-size: var(--fs-lg); line-height: var(--lh-lg); }
.status-ico { width: 80px; height: 80px; border-radius: var(--r-sheet); display: grid; place-items: center; background: var(--accent-subtle); color: var(--accent-text); }
.status-ico .ti { font-size: 36px; }
/* the profile's header */
.profile-head { display: grid; gap: 16px; padding: 0 var(--card-pad) var(--card-pad); }
.profile-cover { height: 120px; margin: 0 calc(var(--card-pad) * -1); border-radius: var(--r-card) var(--r-card) 0 0; background: linear-gradient(120deg, var(--accent), color-mix(in srgb, var(--accent) 45%, var(--violet-500))); }
.profile-id { display: grid; gap: 12px; margin-top: -48px; } .profile-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.profile-id .avatar { width: 96px; height: 96px; font-size: var(--fs-3xl); box-shadow: 0 0 0 4px var(--bg-surface); }
.profile-id .who { display: grid; gap: 2px; margin-inline-end: auto; } .profile-id h1 { font-size: var(--fs-2xl); line-height: var(--lh-2xl); font-weight: 600; }
.profile-id .who span { color: var(--text-secondary); }
/* notifications */
.note-list { display: grid; margin: 0; padding: 0; list-style: none; }
.note-list > li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; padding: 12px var(--card-pad); border-bottom: 1px solid var(--border); }
.note-list > li:last-child { border-bottom: 0; }
.note-list > li.unread { background: color-mix(in srgb, var(--accent) 6%, var(--bg-surface)); }
.note-list .grow b { display: block; font-weight: 500; overflow-wrap: anywhere; } .note-list .unread .grow b { font-weight: 700; }
.note-list .grow small { display: block; color: var(--text-secondary); font-size: var(--fs-sm); line-height: var(--lh-sm); }
.note-list .grow a { display: inline-flex; align-items: center; min-height: 24px; color: inherit; text-decoration: none; } .note-list .grow a:hover b { color: var(--accent-text); text-decoration: underline; }
.note-day { padding: 8px var(--card-pad); background: var(--bg-subtle); border-bottom: 1px solid var(--border); font-size: var(--fs-xs); line-height: var(--lh-xs); font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .04em; }
/* pricing */
.price-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 16px; align-items: stretch; }
.price-card { display: grid; grid-template-rows: auto auto 1fr auto; gap: 16px; padding: 24px; }
.price { display: flex; align-items: baseline; gap: 4px; } .price b { font-size: var(--fs-4xl); line-height: var(--lh-4xl); font-weight: 700; letter-spacing: -.02em; } .price span { color: var(--text-secondary); }

/* ---------- UI kit: the components shown one by one, each with its markup to copy ---------- */
.demo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; } /* a long line of code scrolls in its box, never widens the page */
.demo-show { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.demo-show.col { flex-direction: column; align-items: stretch; } .demo-show > * { min-width: 0; max-width: 100%; }
.demo-code { border: 1px solid var(--border); border-radius: var(--r-control); background: var(--bg-subtle); }
.demo-code > summary { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px; cursor: pointer; list-style: none; font-size: var(--fs-sm); font-weight: 500; color: var(--text-secondary); }
.demo-code > summary::-webkit-details-marker { display: none; }
.demo-code[open] > summary { border-bottom: 1px solid var(--border); }
.demo-code > summary:focus-visible { outline-offset: -2px; }
.demo-code .copy-row { display: flex; justify-content: flex-end; padding: 8px 12px 0; }
pre.code { margin: 0; padding: 12px 16px 16px; overflow: auto; font: 400 var(--fs-sm)/var(--lh-sm) var(--font-mono); color: var(--text); white-space: pre; tab-size: 2; }
/* button groups: buttons joined into one control */
.btn-group { display: inline-flex; }
.btn-group > .btn { border-radius: 0; }
.btn-group > .btn:first-child { border-start-start-radius: var(--r-control); border-end-start-radius: var(--r-control); }
.btn-group > .btn:last-child { border-start-end-radius: var(--r-control); border-end-end-radius: var(--r-control); }
.btn-group > .btn + .btn { margin-inline-start: -1px; }
.btn-group > .btn:focus-visible { position: relative; z-index: 1; }
.btn-group > .btn[aria-pressed="true"] { background: var(--accent-subtle); color: var(--accent-text); border-color: var(--accent); position: relative; z-index: 1; }
.btn-toolbar { display: flex; flex-wrap: wrap; gap: 8px; }
/* carousel */
.carousel { position: relative; display: grid; gap: 12px; width: min(100%, var(--photo-max)); margin-inline: auto; } /* the 600 px photos stay sharp */
.carousel-slides { position: relative; border-radius: var(--r-card); overflow: hidden; background: var(--bg-muted); }
.carousel-slides figure { margin: 0; }
.carousel-slides img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.carousel-slides figcaption { padding: 12px 16px; background: var(--bg-surface); border-top: 1px solid var(--border); }
.carousel-controls { display: flex; align-items: center; justify-content: center; gap: 12px; }
.carousel-dots { display: flex; gap: 4px; }
.carousel-dots button { all: unset; box-sizing: border-box; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; cursor: pointer; }
.carousel-dots button::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--border-strong); }
.carousel-dots button[aria-current="true"]::before { width: 12px; height: 12px; background: var(--accent); }
.carousel-dots button:focus-visible { outline: 2px solid var(--focus); outline-offset: 0; }
/* lightbox */
.thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(140px, 100%), 1fr)); gap: 8px; }
.thumb-grid button { all: unset; box-sizing: border-box; display: block; border-radius: var(--r-control); overflow: hidden; cursor: zoom-in; }
.thumb-grid img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; transition: transform var(--dur-base) var(--ease); }
.thumb-grid button:hover img { transform: scale(1.03); }
.thumb-grid button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.lb-figure { margin: 0; display: grid; gap: 8px; }
.lb-figure img { display: block; width: 100%; height: auto; max-height: 60vh; object-fit: contain; border-radius: var(--r-control); background: var(--bg-muted); }
/* a list in order: drag, or move with the buttons */
.sort-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.sort-list li { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: var(--r-control); border: 1px solid var(--border); background: var(--bg-surface); cursor: grab; }
.sort-list li.dragging { opacity: .5; }
.sort-list .grip { color: var(--text-secondary); }
.sort-list .grow { flex: 1; min-width: 0; }
/* rating: five stars to choose from (radio buttons), or shown */
.rate { position: relative; display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 4px; border: 0; margin: 0; padding: 0; }
.rate input { position: absolute; inset-inline-start: 0; top: 0; opacity: 0; width: 1px; height: 1px; }
.rate label { display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--r-control); cursor: pointer; color: var(--border-strong); }
.rate label .ti { font-size: 24px; }
.rate input:checked ~ label, .rate label:hover, .rate label:hover ~ label { color: var(--amber-500); }
.rate input:checked ~ label .ti { fill: currentColor; }
.rate input:focus-visible + label { outline: 2px solid var(--focus); outline-offset: 0; }
/* a ring that shows progress */
.ring { --value: 0; position: relative; display: inline-grid; place-items: center; width: 96px; height: 96px; border-radius: 50%; background: conic-gradient(var(--c, var(--accent)) calc(var(--value) * 1%), var(--bg-muted) 0); }
.ring::before { content: ""; position: absolute; inset: 12px; border-radius: 50%; background: var(--bg-surface); }
.ring b { position: relative; font-size: var(--fs-xl); line-height: var(--lh-xl); font-variant-numeric: tabular-nums; }
/* typography specimens and colour swatches */
.type-row { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 16px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--border); }
.type-row:last-child { border-bottom: 0; }
.type-row small { color: var(--text-secondary); font-family: var(--font-mono); font-size: var(--fs-xs); line-height: var(--lh-xs); }
@media (max-width: 575px) { .type-row { grid-template-columns: minmax(0, 1fr); gap: 4px; } }
blockquote.quote { margin: 0; padding-block: 8px; padding-inline: 16px 0; border-inline-start: 4px solid var(--accent); color: var(--text); font-size: var(--fs-lg); line-height: var(--lh-lg); }
blockquote.quote footer { margin-top: 8px; color: var(--text-secondary); font-size: var(--fs-sm); line-height: var(--lh-sm); }
.scroll-demo { max-height: var(--scroll-demo-h); overflow: auto; padding: 12px 16px; border: 1px solid var(--border); border-radius: var(--r-control); scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
.scroll-demo.x { max-height: none; white-space: nowrap; }
.grid-box { padding: 12px; border-radius: var(--r-sm); background: var(--accent-subtle); color: var(--accent-text); font-size: var(--fs-sm); text-align: center; font-family: var(--font-mono); }

/* ---------- UI kit: forms ---------- */
/* floating labels: the label sits in the field and moves up when the field has a value or the focus */
.field.float { position: relative; gap: 0; }
.field.float .input { height: calc(var(--control-h) + 16px); align-items: flex-end; padding-bottom: 8px; }
.field.float .label { position: absolute; inset-inline-start: calc(var(--control-px) + 1px); top: 50%; transform: translateY(-50%); transform-origin: left top; color: var(--text-secondary); font-weight: 400; font-size: var(--fs-md); transition: top var(--dur-base) var(--ease), font-size var(--dur-base) var(--ease); z-index: 1; }
.field.float:focus-within .label, .field.float .input:has(input:not(:placeholder-shown)) + .label, .field.float:has(input:not(:placeholder-shown)) .label { top: 16px; font-size: var(--fs-xs); line-height: var(--lh-xs); color: var(--text-secondary); font-weight: 500; }
/* a form with the labels beside the fields (on a wide screen) */
.form-h { display: grid; gap: 16px; }
.form-h .field { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) { .form-h .field { grid-template-columns: var(--form-h-label) minmax(0, 1fr); align-items: center; column-gap: 24px; } .form-h .field > .hint, .form-h .field > .error-msg { grid-column: 2; } .form-h .field > .label { align-self: center; } .form-h .actions { padding-inline-start: calc(var(--form-h-label) + 24px); } }
/* sizes */
.input.sm { height: var(--control-h-sm); } .input.lg { height: var(--control-h-lg); font-size: var(--fs-lg); }
/* a valid field, said in words and colour */
.input.is-valid { border-color: var(--success); }
.ok-msg { display: flex; gap: 6px; align-items: center; font-size: var(--fs-xs); line-height: var(--lh-xs); color: var(--success-text); font-weight: 500; }
/* the searchable select */
.combo { position: relative; }
.combo [role="listbox"] { position: absolute; z-index: 30; inset-inline: 0; top: calc(100% + 4px); max-height: var(--float-max-h); overflow: auto; margin: 0; padding: 4px; list-style: none; border-radius: var(--r-card); border: 1px solid var(--border); background: var(--bg-raised); box-shadow: var(--shadow-md); }
.combo [role="option"] { display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 12px; border-radius: var(--r-control); cursor: pointer; }
.combo [role="option"] small { margin-inline-start: auto; color: var(--text-secondary); font-size: var(--fs-xs); }
.combo [role="option"].active { background: var(--accent-subtle); color: var(--accent-text); }
.combo [role="option"][aria-selected="true"] { font-weight: 600; }
.combo [role="option"][aria-selected="true"]::after { content: "✓"; margin-inline-start: 8px; color: var(--accent-text); }
.combo .combo-empty { padding: 8px 12px; color: var(--text-secondary); font-size: var(--fs-sm); }
.combo .btn-reveal[aria-expanded="true"] .ti { transform: rotate(180deg); }
/* pickers */
.input input[type="color"] { flex: none; width: 40px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; }
.range-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.range-row output { min-width: 56px; text-align: end; font-variant-numeric: tabular-nums; font-weight: 600; }

/* ---------- The other chart libraries, in the system's colours ---------- */
.lib-chart { position: relative; height: var(--chart-h); }
.c3 text, .c3-legend-item text { fill: var(--text-secondary); font-family: var(--font-sans); }
.c3 path.domain, .c3 .tick line, .c3-grid line { stroke: var(--border); }
.c3-tooltip { background: var(--bg-raised); color: var(--text); box-shadow: var(--shadow-md); border-radius: var(--r-control); }
.c3-tooltip th { background: var(--bg-muted); color: var(--text); } .c3-tooltip td { background: var(--bg-raised); border-color: var(--border); }
.c3-chart-arc text { fill: var(--on-accent); } .c3-chart-arcs-title { fill: var(--text-secondary); }
.morris-hover.morris-default-style { background: var(--bg-raised); color: var(--text); border: 1px solid var(--border); border-radius: var(--r-control); box-shadow: var(--shadow-md); font-family: var(--font-sans); }
.morris-hover.morris-default-style .morris-hover-row-label { color: var(--text); }
.lib-chart .legend table { color: var(--text); } .lib-chart .legend > div { background: none !important; }
.lib-chart .flot-overlay, .lib-chart .flot-text > div { pointer-events: none; } .lib-chart .flot-text > div > div { pointer-events: auto; } /* Flot's see-through layers (its top canvas, each axis's full-size box) let the labels under them be reached */

/* ---------- Icon sets: a tile for each icon, its name under it; a press copies its markup ---------- */
.icon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(132px, 100%), 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.icon-tile { all: unset; box-sizing: border-box; display: grid; justify-items: center; align-content: center; gap: 8px; width: 100%; min-height: var(--icon-tile-h); padding: 12px 8px; border-radius: var(--r-control); border: 1px solid var(--border); background: var(--bg-surface); color: var(--text); cursor: pointer; text-align: center; } /* the tile keeps a square-ish shape whatever the name */
.icon-tile:hover { border-color: var(--accent); background: var(--accent-subtle); }
.icon-tile:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.icon-tile .glyph { display: grid; place-items: center; width: 32px; height: 32px; font-size: 24px; line-height: 1; color: var(--text); }
.icon-tile .glyph svg { width: 24px; height: 24px; }
.icon-tile .glyph .fi { width: 32px; height: 24px; line-height: 24px; border-radius: var(--r-xs); box-shadow: 0 0 0 1px var(--border); }
.icon-tile .name { max-width: 100%; font-family: var(--font-mono); font-size: var(--fs-xs); line-height: var(--lh-xs); color: var(--text-secondary); overflow-wrap: anywhere; }
.icon-tile ion-icon { font-size: 24px; }

/* ---------- Layouts: the same frame arranged eight ways (data-layout on .app; dir="rtl" and the dark theme on <html>) ---------- */
.hnav, .twocol { display: none; }
@media (min-width: 992px) {
  /* horizontal: the sections across the top, under the top bar; each opens its groups and pages */
  .app[data-layout="horizontal"] { grid-template-columns: minmax(0, 1fr); }
  .app[data-layout="horizontal"] > .sidebar, .app[data-layout="horizontal"] [data-rail-toggle] { display: none; }
  .hnav { display: block; position: sticky; top: var(--topbar-h); z-index: 19; padding: 4px var(--page-pad); background: var(--bg-surface); border-bottom: 1px solid var(--border); }
  .hnav ul { display: flex; flex-wrap: wrap; gap: 2px; margin: 0; padding: 0; list-style: none; }
  .hnav-btn { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px; border-radius: var(--r-control); cursor: pointer; font-weight: 500; color: var(--text); }
  .hnav-btn .ti { font-size: var(--icon-nav); color: var(--text-secondary); } .hnav-btn .chev { font-size: 16px; }
  .hnav-btn:hover, .hnav-btn[aria-expanded="true"] { background: var(--bg-muted); }
  .hnav-btn.on { color: var(--accent-text); } .hnav-btn.on .ti { color: var(--accent-text); }
  .hnav-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
  /* two columns: a rail of the sections, the current section's pages beside it */
  .app[data-layout="two-column"] { grid-template-columns: var(--rail-w) var(--subnav-w) minmax(0, 1fr); }
  .app[data-layout="two-column"] > .sidebar, .app[data-layout="two-column"] [data-rail-toggle] { display: none; }
  .twocol { display: contents; }
  .tc-rail { position: sticky; top: 0; height: 100dvh; display: grid; align-content: start; justify-items: center; gap: 4px; padding: calc((var(--topbar-h) - 36px) / 2) 0; background: var(--bg-surface); border-inline-end: 1px solid var(--border); overflow: auto; } /* the mark lines up with the top bar's middle */
  .tc-brand { margin-bottom: 12px; }
  .tc-sec { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-control); color: var(--text-secondary); }
  .tc-sec:hover { background: var(--bg-muted); color: var(--text); }
  .tc-sec.on { background: var(--accent-subtle); color: var(--accent-text); }
  .tc-sec .ti { font-size: var(--icon-nav); }
  .tc-sub { position: sticky; top: 0; height: 100dvh; overflow: auto; padding: 16px 12px; background: var(--bg-surface); border-inline-end: 1px solid var(--border); }
  .tc-title { padding: 4px 12px 8px; font-size: var(--fs-lg); line-height: var(--lh-lg); font-weight: 600; }
  .tc-sub .nav-item { min-height: 36px; font-weight: 400; color: var(--text-secondary); }
  .tc-sub .nav-item[aria-current="page"] { color: var(--accent-text); font-weight: 500; }
  /* detached: the sidebar as a card floating beside the page */
  .app[data-layout="detached"] { grid-template-columns: calc(var(--sidebar-w) + 16px) minmax(0, 1fr); }
  .app[data-layout="detached"] > .sidebar { top: 16px; height: calc(100dvh - 32px); margin-block: 16px; margin-inline: 16px 0; border: 1px solid var(--border); border-radius: var(--r-sheet); box-shadow: var(--shadow-sm); }
  .app[data-layout="detached"] > .sidebar .sidebar-nav { border-end-start-radius: var(--r-sheet); border-end-end-radius: var(--r-sheet); }
  /* boxed: the whole app in a centred box on a wide screen */
  .app[data-layout="boxed"] { max-width: var(--boxed-w); margin-inline: auto; box-shadow: var(--shadow-lg); }
  body:has(.app[data-layout="boxed"]) { background: var(--bg-muted); }
}
.mega { --popover-w: 920px; }
.mega-cols { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); gap: 16px 24px; padding: 16px; }
.mega-col { display: grid; align-content: start; gap: 2px; }
.mega-col h3 { padding: 0 8px 4px; font-size: var(--fs-xs); line-height: var(--lh-xs); font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .04em; }
.mega-link { display: flex; align-items: center; min-height: 32px; padding: 0 8px; border-radius: var(--r-control); color: var(--text); text-decoration: none; font-size: var(--fs-md); }
.mega-link:hover { background: var(--bg-muted); color: var(--accent-text); }
.mega-link[aria-current="page"] { background: var(--accent-subtle); color: var(--accent-text); font-weight: 500; }
.mega-link:focus-visible { outline-offset: -2px; }
/* right to left: arrows and chevrons that mean a direction point the other way */
[dir="rtl"] :is(.ti-chevron-right, .ti-chevron-left, .ti-arrow-left, .ti-arrow-right, .ti-arrow-back-up, .ti-arrow-forward-up, .ti-chevrons-left, .ti-chevrons-right, .ti-logout, .ti-login, .ti-send, .ti-external-link, .ti-arrow-narrow-left, .ti-arrow-narrow-right, .ti-layout-sidebar-left-collapse, .ti-layout-sidebar-left-expand) { transform: scaleX(-1); }
[dir="rtl"] .nav-group[open] > summary .chev { transform: rotate(90deg); }
/* text in a right-to-left page takes its direction from its own words (an English line keeps its full stop at its end, "5 left"
   stays "5 left") and lines up with the page, on the right; codes, figures and changes read left to right. Every start becomes
   right and every end becomes left, as RTLCSS (the leaders' right-to-left builds) turns them. Charts keep their own drawing. */
:where([dir="rtl"]) :where(:not(svg, svg *)) { unicode-bidi: plaintext; }
:where([dir="rtl"]) :where(:not(svg, svg *, button)) { text-align: -webkit-match-parent; text-align: match-parent; }
:where([dir="rtl"]) :where(code, kbd, samp, pre) { direction: ltr; unicode-bidi: isolate; }
[dir="rtl"] pre { text-align: left; }
[dir="rtl"] .otp { direction: ltr; } /* a code is typed and read left to right, box by box */ /* a code block keeps its indents: it reads left to right whatever the page */
[dir="rtl"] :is(.table th, .cal th, .text-start, .tile, .cashier) { text-align: right; }
[dir="rtl"] .table.stack-sm td::before { text-align: right; }
[dir="rtl"] :is(.table .r, .table .actions, .text-end, .list .end, .legend-list b, .legend-list .muted, .line .amt, .line .was, .amount .val, .field .counter, .denom .input input, .denom [data-denom-total], .paper .pl > :not(:first-child), .chat-msg.me .meta, .range-row output) { text-align: left; }
@media (max-width: 767px) { [dir="rtl"] .table.stack-sm td { text-align: left; } }
@media (max-width: 767px) { .table.stack-sm td .mono { white-space: normal; } } /* a row laid out as label and value has the phone's width only: there a code may wrap */
[dir="rtl"] .doc-title { text-align: left; }
@media (max-width: 575px) { [dir="rtl"] .doc-title { text-align: right; } }

/* Print: when a page has a print area (labels, a sheet), only that is printed */
@media print { body:has(.print-area) .app * { visibility: hidden; } body:has(.print-area) .print-area, body:has(.print-area) .print-area * { visibility: visible; } body:has(.print-area) .print-area { position: absolute; inset: 0 auto auto 0; width: 100%; } }

code, kbd, samp, pre { font-family: var(--font-mono); }
/* A link standing alone in a row or a paragraph is a 24 px target; links inside a sentence follow the text (WCAG 2.5.8, inline) */
.cluster > a.link, .spread > a.link, :where(p, div) > a.link:only-child { display: inline-flex; align-items: center; min-height: 24px; }
/* A file picker styled as a button shows the button's ring when its hidden input has the focus */
label.btn:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Focus — every interactive element shows the same 2 px ring (WCAG 2.4.7, 2.4.13). It comes after the components'
   resets (all: unset), so it wins over them, and weighs no more than one class, so a component's own focus rule (a ring
   drawn inside a row that a scroll box clips) wins over it. */
:where(button, a, [tabindex], select, textarea, summary, input[type="range"], input[type="file"]):focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.chip button:focus-visible, .pager :is(a, button):focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; } /* their resets weigh more than one class */
.input input:focus-visible { outline: none; }
.line-head:focus-visible { outline-offset: -2px; }
/* A scrolling area with nothing focusable inside becomes a Tab stop in Chrome; it gets the same ring, drawn inside */
:is(.lines, .scroll, .payment, .cart.panel, .drawer-body, .count-body):focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
/* Rings drawn inside where the box clips its content (an accordion's rows); after the shared rule so it wins */
.accordion > details > summary:focus-visible { outline-offset: -2px; }

/* Documentation: prose in a card at a readable measure, code with its copy button, steps and lists */
.doc-text { display: grid; gap: 12px; min-width: 0; }
.doc-text > :is(p, ul, ol, h3) { max-width: 72ch; }
.doc-text h3 { font-size: var(--fs-md); line-height: var(--lh-md); font-weight: 600; margin-top: 4px; }
.doc-text :not(pre) > code { padding: 1px 4px; border-radius: var(--r-xs); background: var(--bg-muted); font-size: .9em; overflow-wrap: anywhere; }
.doc-steps, .doc-list { display: grid; gap: 6px; margin: 0; padding-inline-start: 20px; }
.doc-steps { list-style: decimal; } .doc-list { list-style: disc; }
.doc-code { min-width: 0; border: 1px solid var(--border); border-radius: var(--r-control); background: var(--bg-subtle); }
.doc-code-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 40px; padding-block: 4px; padding-inline: 12px 4px; border-bottom: 1px solid var(--border); font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--text-secondary); }
.doc-text .table td { padding-block: 8px; }
.doc-text td a { display: inline-block; min-width: 24px; min-height: 24px; } /* a short name (C3) is still a 24 px target */ /* prose in a cell keeps clear of the rules above and below it */

/* Forced colours (Windows High Contrast): the system's colours replace the theme's, so a state shown only by a tint or a
   shadow would vanish. Each state takes the system's Highlight instead, and data keeps its own colours (Microsoft's
   guidance for forced colours; CSS Color Adjustment 1). Nothing here applies outside that mode. */
@media (forced-colors: active) {
  :is(.nav-item.on, .nav-item[aria-current="page"], .mega-link[aria-current="page"], .segmented button.on, .pager [aria-current="page"],
      .shop-nav a[aria-current="page"], .list-link[aria-current="page"], .item-list [role="tab"][aria-selected="true"],
      .folder-nav [role="tab"][aria-selected="true"], .call-btn[aria-pressed="true"], .combo [role="option"].active, .tc-sec.on,
      .cat.on, .tender.on, .hnav-btn.on, .seg-row .btn[aria-checked="true"], .settings-group a:is([aria-current="page"], [aria-current="location"]), .table tbody tr[aria-selected="true"] td) {
    forced-color-adjust: none; background: Highlight; color: HighlightText; }
  :is(.nav-item.on, .nav-item[aria-current="page"], .mega-link[aria-current="page"], .segmented button.on, .pager [aria-current="page"], .shop-nav a[aria-current="page"], .list-link[aria-current="page"], .item-list [role="tab"][aria-selected="true"], .folder-nav [role="tab"][aria-selected="true"], .call-btn[aria-pressed="true"], .combo [role="option"].active, .tc-sec.on, .cat.on, .tender.on, .hnav-btn.on, .table tbody tr[aria-selected="true"] td) * { color: inherit; } /* a count or a second line in it reads on the Highlight too */
  .pay { border: 1px solid; } /* the pay button is drawn by its fill alone: in this mode it takes an edge */
  .tile.added { outline: 3px solid Highlight; outline-offset: -3px; }
  .switch { forced-color-adjust: none; background: Canvas; border-color: CanvasText; }
  .switch::after { background: CanvasText; }
  .choice.on .switch, .choice > input:checked + .switch { background: Highlight; border-color: Highlight; }
  .choice.on .switch::after, .choice > input:checked + .switch::after { background: HighlightText; }
  .progress { forced-color-adjust: none; background: Canvas; outline: 1px solid CanvasText; }
  :is(.progress > span, .storage-bar span, .steps > li.done::before, .steps > li[aria-current="step"]::before, .carousel-dots button[aria-current="true"]::before, .nav-sub .nav-item.on::before) { forced-color-adjust: none; background: Highlight; }
  .rate label, .stars .ti { forced-color-adjust: none; color: CanvasText; }
  .rate input:checked ~ label, .rate label:hover, .rate label:hover ~ label, .stars .ti.on { color: Highlight; }
  .badge { border: 1px solid; }
  :is(.chart, .lib-chart, .storage-bar, .ring) { forced-color-adjust: none; } /* a chart's series and a ring's arc keep their colours: they are the data */
}
[data-module-off] { display: none !important; } /* a module that is off stays gone, whatever a filter or a script shows again */