/* ─────────────────────────────────────────────────────────────────────────────
   ui.css — the "Ledger" components (docs/design-system.md §4) and the screens
   that have JOINED the design system. Values come only from tokens.css.

   SCOPING — nothing here touches a screen that has not joined:
     .ui                 a joined region (a page body, a sheet, the login page)
     .ui-chrome          the shared chrome: sidebar, header, trial banner,
                         phone header and bottom bar — joined app-wide
     :root.ui-phone      set on <html> by mobile.html; the phone column of §2
   Component classes (.btn-primary, .chip …) are matched only under .ui or
   .ui-chrome, so the same class name on an unjoined screen is untouched.

   Batch 1 (v5.105.0): desktop POS, login, phone Home / Sell / Collect, chrome.
   ───────────────────────────────────────────────────────────────────────────── */

/* ── Base ─────────────────────────────────────────────────────────────────── */
.ui, .ui-chrome {
  font-family: var(--font-sans);
  font-feature-settings: 'tnum';
  line-height: var(--leading);
  color: var(--text);
}
.ui :is(button, input, select, textarea), .ui-chrome :is(button, input, select, textarea) { font: inherit; }

.icon {
  width: var(--icon); height: var(--icon); flex-shrink: 0;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  vertical-align: middle;
}
.icon.icon-sm { width: var(--icon-sm); height: var(--icon-sm); }
.icon.icon-nav { width: var(--icon-nav); height: var(--icon-nav); }
.icon.icon-sidebar { width: var(--icon-sidebar); height: var(--icon-sidebar); }
.ui .meta, .ui-chrome .meta { font-size: var(--text-meta); color: var(--muted); }
.ui .secondary, .ui-chrome .secondary { font-size: var(--text-secondary); color: var(--muted); }
.ui .num { font-feature-settings: 'tnum'; text-align: right; }
.ui .state-ok { color: var(--ok); }
.ui .state-warn { color: var(--warn); }
.ui .state-danger { color: var(--danger); }

/* ── §4 Buttons ───────────────────────────────────────────────────────────── */
:is(.ui, .ui-chrome) :is(.btn-primary, .btn-secondary, .btn-quiet, .btn-danger) {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--control-h); padding: 0 var(--space-3);
  border-radius: var(--radius-control); border: var(--border-width) solid transparent;
  font-size: var(--text-body); font-weight: var(--weight-medium); line-height: 1.2;
  cursor: pointer; white-space: nowrap; text-decoration: none;
}
:is(.ui, .ui-chrome) .btn-primary { background: var(--brand); color: var(--on-brand); }
:is(.ui, .ui-chrome) .btn-primary:hover { background: var(--brand-text); }
:is(.ui, .ui-chrome) .btn-secondary { background: var(--surface); border-color: var(--border); color: var(--text); }
:is(.ui, .ui-chrome) .btn-secondary:hover { background: var(--surface-2); }
:is(.ui, .ui-chrome) .btn-quiet { background: transparent; color: var(--brand-text); }
:is(.ui, .ui-chrome) .btn-quiet:hover { color: var(--brand-text-strong); background: var(--surface-2); }
:is(.ui, .ui-chrome) .btn-danger { background: var(--surface); border-color: var(--danger); color: var(--danger); }
:is(.ui, .ui-chrome) .btn-danger.confirm { background: var(--danger); color: var(--on-brand); }
:is(.ui, .ui-chrome) :is(.btn-primary, .btn-secondary, .btn-quiet, .btn-danger):disabled { opacity: .55; cursor: not-allowed; }
:is(.ui, .ui-chrome) :is(.btn-primary, .btn-secondary, .btn-quiet, .btn-danger):focus-visible,
.ui :is(input, select, textarea):focus-visible { outline: var(--focus-width) solid var(--brand); outline-offset: 1px; }
/* the money-carrying Collect / Submit bar */
.ui .btn-primary.btn-cta { min-height: var(--cta-h); font-size: var(--text-money-cta); font-weight: var(--weight-semibold); border-radius: var(--radius-card); }
.ui .btn-icon { min-width: var(--control-h); padding: 0; }

/* ── §4 Field ─────────────────────────────────────────────────────────────── */
.ui .field { display: flex; flex-direction: column; gap: 6px; }
.ui .field > label, .ui .field-label { font-size: var(--text-secondary); font-weight: var(--weight-medium); color: var(--text); }
.ui .input, .ui .field :is(input, select, textarea) {
  min-height: var(--control-h); padding: 0 var(--space-3);
  border: var(--border-width) solid var(--border); border-radius: var(--radius-control);
  background: var(--surface); color: var(--text); font-size: var(--text-body);
}
.ui .input:focus, .ui .field :is(input, select, textarea):focus { outline: none; border: var(--focus-width) solid var(--brand); }
.ui .field .help { font-size: var(--text-meta); color: var(--muted); }
.ui .field .error { font-size: var(--text-meta); color: var(--danger); }
.ui .field.has-error :is(input, select, textarea) { border-color: var(--danger); }

/* ── §4 Chip, badge, card, banner, empty, toast, dialog ───────────────────── */
.ui .chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 var(--space-3);
  border-radius: var(--radius-chip); border: var(--border-width) solid var(--border);
  background: var(--surface); color: var(--text); font-size: var(--text-body); white-space: nowrap; cursor: pointer;
}
.ui .chip.active, .ui .chip.selected { border-color: var(--brand); background: var(--brand-tint); color: var(--brand-text); font-weight: var(--weight-medium); }
:is(.ui, .ui-chrome) .badge { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: var(--radius-badge);
  font-size: var(--text-meta); font-weight: var(--weight-medium); background: var(--inset); color: var(--text); white-space: nowrap; }
:is(.ui, .ui-chrome) .badge.ok { background: var(--ok-tint); color: var(--ok); }
:is(.ui, .ui-chrome) .badge.warn { background: var(--warn-tint); color: var(--warn); }
:is(.ui, .ui-chrome) .badge.danger { background: var(--danger-tint); color: var(--danger); }
:is(.ui, .ui-chrome) .badge.info { background: var(--brand-tint); color: var(--brand-text); }
.ui .card { background: var(--surface); border: var(--border-width) solid var(--border); border-radius: var(--radius-card); }
.ui .card-title { font-size: var(--text-card-title); font-weight: var(--weight-semibold); }
.ui .banner, .ui-chrome.banner { display: flex; align-items: center; gap: var(--space-3); padding: 6px var(--space-5);
  font-size: var(--text-secondary); border-bottom: var(--border-width) solid var(--border); }
.ui .banner.info, .ui-chrome.banner.info { background: var(--brand-tint); color: var(--brand-text); }
.ui .banner.warn, .ui-chrome.banner.warn { background: var(--warn-tint); color: var(--warn); border-bottom-color: var(--warn-border); }
.ui .banner.ok { background: var(--ok-tint); color: var(--ok); }
.ui .banner.danger { background: var(--danger-tint); color: var(--danger); }
.ui .empty { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); color: var(--muted); text-align: center; padding: var(--space-6); }
.ui .dialog { background: var(--surface); border-radius: var(--radius-modal); box-shadow: var(--shadow-modal); }
.ui .dialog-foot { background: var(--surface-2); border-top: var(--border-width) solid var(--border); }
.ui .scrim { background: var(--scrim); }

/* ═════════════════════════════════════════════════════════════════════════════
   DESKTOP CHROME — sidebar, header, trial banner (index.html, every screen)
   ═════════════════════════════════════════════════════════════════════════════ */
.sidebar.ui-chrome { background: var(--sidebar); }
.sidebar.ui-chrome .sidebar-logo { border-bottom: 0; padding: var(--space-4) var(--space-3) var(--space-3) var(--space-4); }
.sidebar.ui-chrome .sidebar-logo .logo-mark { font-size: var(--text-card-title); font-weight: var(--weight-semibold); color: var(--on-brand); letter-spacing: 0; }
.sidebar.ui-chrome .sidebar-logo .logo-sub { font-family: var(--font-sans); font-size: var(--text-meta); color: var(--sidebar-muted); }
.sidebar.ui-chrome .sidebar-toggle-btn { color: var(--sidebar-muted); display: inline-flex; align-items: center; justify-content: center; }
.sidebar.ui-chrome .sidebar-toggle-btn:hover { color: var(--on-brand); background: var(--sidebar-border); }
.sidebar.ui-chrome .sidebar-nav { padding: var(--space-1) var(--space-3); }
.sidebar.ui-chrome .nav-item {
  gap: 10px; margin: 2px 0; padding: 9px 10px; border-left: 0; border-radius: var(--radius-control);
  color: var(--sidebar-text); font-size: var(--text-body); font-weight: var(--weight-regular);
}
.sidebar.ui-chrome .nav-item:hover { color: var(--on-brand); background: var(--sidebar-border); }
.sidebar.ui-chrome .nav-item.active { color: var(--on-brand); background: var(--brand); font-weight: var(--weight-medium); }
.sidebar.ui-chrome .nav-item .nav-icon { width: var(--icon-sidebar); display: inline-flex; }
.sidebar.ui-chrome.collapsed .nav-item { padding: 10px 0; }
.sidebar.ui-chrome.collapsed .nav-item:hover::after { background: var(--sidebar); color: var(--on-brand); font-size: var(--text-meta); }
.sidebar.ui-chrome .nav-section-label { font-size: var(--text-meta); font-weight: var(--weight-medium); letter-spacing: .04em; color: var(--sidebar-muted); padding: 10px 10px 4px; border-radius: var(--radius-control); }
.sidebar.ui-chrome .nav-section-toggle:hover { color: var(--sidebar-text); background: var(--sidebar-border); }
.sidebar.ui-chrome .nav-section.nav-section-active > .nav-section-toggle { color: var(--sidebar-text); box-shadow: none; }
.sidebar.ui-chrome .nav-chevron { display: inline-flex; }
.sidebar.ui-chrome .nav-badge { margin-left: auto; background: var(--danger); color: var(--on-brand); border-radius: var(--radius-badge); font-size: var(--text-meta); padding: 0 6px; }
.sidebar.ui-chrome .sidebar-footer { display: flex; align-items: center; gap: 10px; padding: 10px var(--space-4); border-top: var(--border-width) solid var(--sidebar-border);
  font-family: var(--font-sans); font-size: var(--text-meta); color: var(--sidebar-muted); }
.sidebar.ui-chrome .sidebar-avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--sidebar-avatar); color: var(--on-brand);
  display: flex; align-items: center; justify-content: center; font-weight: var(--weight-semibold); font-size: var(--text-meta); flex-shrink: 0; }
.sidebar.ui-chrome .sidebar-user-name { color: var(--on-brand); font-weight: var(--weight-medium); font-size: var(--text-body); }
/* training mode keeps its amber meaning, now from the warn token */
.sidebar.ui-chrome.sandbox-mode { border-right-color: var(--warn-border); }
.sidebar.ui-chrome.sandbox-mode .nav-item.active { background: var(--warn); }

.app-header.ui-chrome { height: 56px; padding: 0 var(--space-5); gap: var(--space-4); background: var(--surface); border-bottom: var(--border-width) solid var(--border); }
.app-header.ui-chrome .breadcrumb { font-size: var(--text-emphasis); font-weight: var(--weight-semibold); color: var(--text); }
.app-header.ui-chrome .header-date { color: var(--muted); font-size: var(--text-body); white-space: nowrap; }
.app-header.ui-chrome .global-search-input-wrap { border: var(--border-width) solid var(--border); border-radius: var(--radius-control); background: var(--surface); }
.app-header.ui-chrome .global-search-input-wrap:focus-within { border: var(--focus-width) solid var(--brand); }
.app-header.ui-chrome .gs-icon { display: inline-flex; color: var(--muted); }
.app-header.ui-chrome #global-search-input { font-size: var(--text-body); color: var(--text); }
.app-header.ui-chrome .gs-hint { font-family: var(--font-sans); font-size: var(--text-meta); color: var(--muted); border: var(--border-width) solid var(--border); border-radius: var(--radius-sm); background: var(--surface); }
.app-header.ui-chrome .header-user-inner { display: flex; align-items: center; gap: var(--space-3); }
.app-header.ui-chrome .header-username { font-size: var(--text-body); font-weight: var(--weight-medium); color: var(--text); }
.app-header.ui-chrome .header-loc { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 var(--space-3); border-radius: var(--radius-chip);
  border: var(--border-width) solid var(--border); background: var(--surface); color: var(--text); font-size: var(--text-secondary); cursor: pointer; }
.app-header.ui-chrome .header-role { font-size: var(--text-meta); }
.app-header.ui-chrome .header-dev { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: var(--radius-badge);
  background: var(--warn-tint); color: var(--warn); font-size: var(--text-meta); font-weight: var(--weight-medium); cursor: pointer; }
.app-header.ui-chrome .btn-logout { min-height: 34px; }

#license-banner.ui-chrome { flex-shrink: 0; }
#license-banner.ui-chrome a { color: var(--brand-text); font-weight: var(--weight-medium); }
#license-banner.ui-chrome a:hover { color: var(--brand-text-strong); }
#license-banner.ui-chrome .banner-dismiss { margin-left: auto; min-height: 28px; min-width: 28px; color: var(--warn); }

/* ═════════════════════════════════════════════════════════════════════════════
   DESKTOP POS (pos.js) — Pos.html board
   ═════════════════════════════════════════════════════════════════════════════ */
/* The POS fills the main area exactly, so a trial banner above it can never push
   Collect off the bottom (audit #1, 1366×768) — it shrinks the cart instead. */
#main-content:has(> #pos-root.ui) { padding: 0; overflow: hidden; }
#pos-root.ui { height: 100%; margin: 0; background: var(--bg); }
#pos-root.ui .pos-left { background: var(--bg); }
/* the grid keeps its v5.104.0 rhythm (14px gutters, 8px gaps): four 140px tiles to a row at 1280, so no tile moves */
#pos-root.ui .pos-topbar { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) 14px var(--space-2); }
#pos-root.ui .pos-search { flex: 1; display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 var(--space-3);
  background: var(--surface); border: var(--border-width) solid var(--border); border-radius: var(--radius-control); color: var(--muted); }
#pos-root.ui .pos-search:focus-within { border: var(--focus-width) solid var(--brand); }
#pos-root.ui .pos-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text); font-size: var(--text-body); }
#pos-root.ui .pos-pill { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 var(--space-3); white-space: nowrap;
  border-radius: var(--radius-chip); border: var(--border-width) solid var(--border); background: var(--surface); color: var(--text); font-size: var(--text-secondary); }
#pos-root.ui .pos-pill.clickable { cursor: pointer; }
#pos-root.ui .pos-cats { display: flex; gap: 6px; padding: 0 14px var(--space-2); overflow-x: auto; flex-shrink: 0; }
#pos-root.ui .pos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--space-2); padding: var(--space-1) 14px var(--space-3); overflow-y: auto; flex: 1; align-content: start; }
#pos-root.ui .pos-prod-card { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-3); text-align: left;
  background: var(--surface); border: var(--border-width) solid var(--border); border-radius: var(--radius-card); cursor: pointer; }
#pos-root.ui .pos-prod-card:hover { border-color: var(--brand); }
#pos-root.ui .pos-prod-card.out { cursor: not-allowed; }
#pos-root.ui .pos-prod-card.out .pos-tile-name, #pos-root.ui .pos-prod-card.out .pos-tile-price { color: var(--disabled-text); }
#pos-root.ui .pos-tile-name { font-weight: var(--weight-medium); color: var(--text); font-size: var(--text-body); line-height: 1.35; }
#pos-root.ui .pos-tile-price { font-weight: var(--weight-semibold); font-size: var(--text-card-title); color: var(--text); }
#pos-root.ui .pos-bill { background: var(--surface); border-left: var(--border-width) solid var(--border); }
#pos-root.ui .pos-bill-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: 10px var(--space-4); }
#pos-root.ui .pos-cust-name { font-weight: var(--weight-semibold); color: var(--text); font-size: var(--text-body); }
#pos-root.ui .pos-row { padding: 6px var(--space-4); border-bottom: var(--border-width) solid var(--border); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
#pos-root.ui .pos-label { font-size: var(--text-meta); font-weight: var(--weight-medium); color: var(--muted); }
#pos-root.ui .pos-date { min-height: 32px; padding: 0 var(--space-2); border: var(--border-width) solid var(--border); border-radius: var(--radius-control); background: var(--surface); color: var(--text); font-size: var(--text-secondary); font-weight: var(--weight-medium); }
#pos-root.ui .pos-date.backdated { border: var(--focus-width) solid var(--warn); background: var(--warn-tint); }
#pos-root.ui .pos-line { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-2) var(--space-4); border-bottom: var(--border-width) solid var(--inset); }
#pos-root.ui .pos-line.stock-err { background: var(--danger-tint); box-shadow: inset 3px 0 0 var(--danger); }
#pos-root.ui .pos-line-name { font-weight: var(--weight-medium); color: var(--text); font-size: var(--text-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#pos-root.ui .pos-line-total { font-weight: var(--weight-medium); color: var(--text); min-width: 84px; text-align: right; font-size: var(--text-body); }
#pos-root.ui .pos-stepper { display: flex; align-items: center; height: 28px; border: var(--border-width) solid var(--border); border-radius: var(--radius-control); background: var(--surface); }
#pos-root.ui .pos-stepper button { width: 28px; height: 26px; border: 0; background: transparent; color: var(--text); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
#pos-root.ui .pos-stepper input { width: 40px; height: 26px; border: 0; border-left: var(--border-width) solid var(--inset); border-right: var(--border-width) solid var(--inset);
  text-align: center; font-weight: var(--weight-medium); color: var(--text); background: transparent; font-size: var(--text-body); }
#pos-root.ui .pos-small-input { width: 56px; min-height: 26px; padding: 0 6px; border: var(--border-width) solid var(--border); border-radius: var(--radius-control); background: var(--surface); color: var(--text); font-size: var(--text-meta); }
#pos-root.ui .pos-x { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 0; border-radius: var(--radius-control); background: transparent; color: var(--muted); cursor: pointer; }
#pos-root.ui .pos-x:hover { color: var(--danger); background: var(--danger-tint); }
#pos-root.ui .pos-empty { color: var(--muted); font-size: var(--text-secondary); }
#pos-root.ui .pos-seg { display: flex; border: var(--border-width) solid var(--border); border-radius: var(--radius-control); overflow: hidden; }
#pos-root.ui .pos-seg button { min-height: 28px; padding: 0 10px; border: 0; cursor: pointer; font-size: var(--text-meta); font-weight: var(--weight-semibold); background: var(--surface); color: var(--muted); }
#pos-root.ui .pos-seg button + button { border-left: var(--border-width) solid var(--border); }
#pos-root.ui .pos-seg button.on { background: var(--brand-tint); color: var(--brand-text); }
#pos-root.ui .pos-summary { padding: var(--space-2) var(--space-4); border-top: var(--border-width) solid var(--border); display: flex; flex-direction: column; gap: 2px; font-size: var(--text-secondary); color: var(--muted); }
#pos-root.ui .pos-sum-row { display: flex; justify-content: space-between; }
#pos-root.ui .pos-sum-row > span:last-child { color: var(--text); }
#pos-root.ui .pos-sum-row.neg > span:last-child { color: var(--ok); }
#pos-root.ui .pos-sum-total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 4px; color: var(--text); }
#pos-root.ui .pos-sum-total > span:first-child { font-weight: var(--weight-semibold); font-size: var(--text-emphasis); }
#pos-root.ui .pos-sum-total > span:last-child { font-weight: var(--weight-semibold); font-size: var(--text-total); }
#pos-root.ui .pos-tenders { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 0 var(--space-4) 6px; }
#pos-root.ui .pos-pay-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: var(--control-h); padding: 0 var(--space-2);
  border-radius: var(--radius-control); border: var(--border-width) solid var(--border); background: var(--surface); color: var(--text); font-size: var(--text-body); cursor: pointer; }
#pos-root.ui .pos-pay-btn:hover { border-color: var(--brand); background: var(--brand-tint); color: var(--brand-text); }
#pos-root.ui .pos-final { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 0 var(--space-4) var(--space-3); }
#pos-root.ui .pos-final .btn-cta { width: 100%; }

/* POS overlays: customer panel, pay modal, variant picker, post-sale popup */
.ui.pos-panel { position: fixed; top: 0; right: 0; width: 380px; height: 100vh; z-index: 200; flex-direction: column; overflow: hidden;
  background: var(--surface); border-left: var(--border-width) solid var(--border); box-shadow: var(--shadow-modal); }
.ui.pos-panel .pos-panel-head { padding: var(--space-3) var(--space-4); border-bottom: var(--border-width) solid var(--border); display: flex; align-items: center; justify-content: space-between; }
.ui.pos-panel .pos-panel-title, .ui .pos-modal-title { font-size: var(--text-card-title); font-weight: var(--weight-semibold); color: var(--text); }
.ui .pos-cust-row { display: flex; align-items: center; gap: 10px; padding: 10px var(--space-4); border-bottom: var(--border-width) solid var(--inset); cursor: pointer; }
.ui .pos-cust-row:hover { background: var(--surface-2); }
.ui .pos-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--inset); color: var(--muted); display: flex; align-items: center; justify-content: center;
  font-size: var(--text-meta); font-weight: var(--weight-semibold); flex-shrink: 0; }
.ui .pos-create { padding: var(--space-3) var(--space-4); border-bottom: var(--border-width) solid var(--border); background: var(--surface-2); display: flex; flex-direction: column; gap: 6px; }
.ui.pos-overlay { position: fixed; inset: 0; z-index: 300; align-items: center; justify-content: center; background: var(--scrim); }
.ui .pos-modal { width: 360px; overflow: hidden; background: var(--surface); border-radius: var(--radius-modal); box-shadow: var(--shadow-modal); }
.ui .pos-modal-head { padding: var(--space-4) var(--space-5); border-bottom: var(--border-width) solid var(--border); display: flex; justify-content: space-between; align-items: center; }
.ui .pos-modal-body { padding: var(--space-4) var(--space-5) var(--space-5); }
.ui .pos-amount { font-size: var(--text-total); font-weight: var(--weight-semibold); color: var(--text); text-align: center; margin: var(--space-2) 0 var(--space-3); }
.ui .pos-state { font-size: var(--text-secondary); padding: var(--space-2) 10px; border-radius: var(--radius-control); }
.ui .pos-state-danger { background: var(--danger-tint); color: var(--danger); }
.ui .pos-state-warn { background: var(--warn-tint); color: var(--warn); }
.ui .pos-state-info { background: var(--brand-tint); color: var(--brand-text); }
.ui .pos-state-ok { background: var(--ok-tint); color: var(--ok); }
.ui .pos-hint { font-size: var(--text-meta); color: var(--muted); }
.ui .pos-status { min-height: 16px; margin-top: var(--space-2); font-size: var(--text-meta); line-height: 1.35; text-align: center; color: var(--muted); }
.ui .pos-status.danger { color: var(--danger); }
.ui .pos-modal .btn-cta { width: 100%; margin-top: var(--space-4); }

/* ═════════════════════════════════════════════════════════════════════════════
   LOGIN (login.html) — Login.html board
   ═════════════════════════════════════════════════════════════════════════════ */
body.ui.login { min-height: 100vh; display: flex; margin: 0; background: var(--bg); font-size: var(--text-body); }
body.ui.login .left { width: 520px; flex-shrink: 0; background: var(--sidebar); color: var(--sidebar-text); padding: 48px; display: flex; flex-direction: column; }
body.ui.login .brand-row { display: flex; align-items: center; gap: var(--space-3); }
body.ui.login .brand-logo { width: 36px; height: 36px; border-radius: var(--radius-card); background: var(--brand); display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; }
body.ui.login .brand-logo img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
body.ui.login .brand-name { font-weight: var(--weight-semibold); font-size: var(--text-page-title); color: var(--on-brand); }
body.ui.login .headline { font-size: var(--text-headline); font-weight: var(--weight-semibold); color: var(--on-brand); line-height: 1.25; max-width: 380px; }
body.ui.login .brand-tagline { margin-top: var(--space-3); max-width: 380px; color: var(--sidebar-muted); }
body.ui.login .left-foot { font-size: var(--text-meta); color: var(--sidebar-muted); }
body.ui.login .grow { flex: 1; }
body.ui.login .right { flex: 1; display: flex; align-items: center; justify-content: center; padding: 48px var(--space-6); }
body.ui.login .login-card { width: 400px; background: var(--surface); border: var(--border-width) solid var(--border); border-radius: var(--radius-modal); padding: 32px; display: flex; flex-direction: column; gap: 18px; }
body.ui.login .login-title { font-size: var(--text-page-title); font-weight: var(--weight-semibold); color: var(--text); }
body.ui.login .login-sub { color: var(--muted); margin-top: 2px; }
body.ui.login .form-group { display: flex; flex-direction: column; gap: 6px; }
body.ui.login label { font-size: var(--text-secondary); font-weight: var(--weight-medium); color: var(--text); }
body.ui.login input { height: 40px; padding: 0 var(--space-3); border: var(--border-width) solid var(--border); border-radius: var(--radius-control);
  background: var(--surface); color: var(--text); font-size: var(--text-emphasis); width: 100%; box-sizing: border-box; }
body.ui.login input:focus { outline: none; border: var(--focus-width) solid var(--brand); padding: 0 11px; }
body.ui.login input::placeholder { color: var(--muted); }
body.ui.login .pw-wrap { position: relative; }
body.ui.login .pw-wrap input { padding-right: 44px; }
body.ui.login .pw-toggle { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 36px; height: 32px; border: 0; background: transparent;
  color: var(--muted); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; border-radius: var(--radius-control); }
body.ui.login .pw-toggle:hover { color: var(--text); }
body.ui.login .btn-primary { height: 44px; width: 100%; font-size: var(--text-emphasis); font-weight: var(--weight-semibold); }
body.ui.login .note { padding: 10px var(--space-3); border-radius: var(--radius-card); font-size: var(--text-secondary); line-height: 1.5; }
body.ui.login .note.info { background: var(--brand-tint); color: var(--brand-text); }
body.ui.login .note.danger { background: var(--danger-tint); color: var(--danger); }
body.ui.login a { color: var(--brand-text); }
body.ui.login a:hover { color: var(--brand-text-strong); }
body.ui.login .forgot-panel { padding: var(--space-3) 14px; border: var(--border-width) solid var(--border); border-radius: var(--radius-modal); font-size: var(--text-secondary); line-height: 1.55; color: var(--muted); }
body.ui.login .forgot-panel .title { font-weight: var(--weight-semibold); color: var(--text); margin-bottom: var(--space-2); }
body.ui.login .forgot-panel .btn-secondary { width: 100%; }
body.ui.login .forgot-offline { margin-top: var(--space-3); padding-top: 10px; border-top: var(--border-width) dashed var(--border); }
body.ui.login .msg-ok { color: var(--ok); }
body.ui.login .msg-error { color: var(--danger); }
body.ui.login .right-foot { font-size: var(--text-meta); color: var(--muted); text-align: center; line-height: 1.6; }
@media (max-width: 820px) {
  body.ui.login { flex-direction: column; background: var(--surface); }
  body.ui.login .left { display: none; }
  body.ui.login .right { padding: var(--space-6) var(--space-4); }
  body.ui.login .login-card { width: 100%; border: 0; padding: var(--space-2) 0; }
}

/* ═════════════════════════════════════════════════════════════════════════════
   PHONE CHROME (mobile.html) — header and bottom bar, every tab
   ═════════════════════════════════════════════════════════════════════════════ */
:root.ui-phone body { font-family: var(--font-sans); font-feature-settings: 'tnum'; background: var(--bg); color: var(--text); }
:root.ui-phone #m-header.ui-chrome { background: var(--sidebar); }
:root.ui-phone #m-header.ui-chrome #m-header-inner { padding: 14px var(--space-4) var(--space-2); gap: 10px; }
:root.ui-phone #m-header.ui-chrome #m-store-name { color: var(--on-brand); font-size: var(--text-card-title); font-weight: var(--weight-semibold); letter-spacing: 0; }
:root.ui-phone #m-header.ui-chrome #m-greeting { color: var(--sidebar-text); font-size: var(--text-secondary); font-weight: var(--weight-regular); margin-top: 0; }
:root.ui-phone #m-header.ui-chrome #m-date { color: var(--sidebar-muted); font-size: var(--text-meta); }
:root.ui-phone #m-header.ui-chrome #m-refresh-btn { width: var(--target-min); height: var(--target-min); border-radius: var(--radius-card); background: transparent; color: var(--sidebar-text); }
:root.ui-phone #m-header.ui-chrome #m-avatar { width: var(--target-min); height: var(--target-min); background: var(--sidebar-avatar); color: var(--on-brand); font-size: var(--text-body); font-weight: var(--weight-semibold); }
:root.ui-phone #m-header.ui-chrome #m-refresh-status { color: var(--sidebar-muted); font-size: var(--text-meta); padding: 0 var(--space-4) 10px; }
:root.ui-phone #m-header.ui-chrome #m-live-dot { background: var(--toast-ok-icon); }
:root.ui-phone #m-nav.ui-chrome { background: var(--surface); border-top: var(--border-width) solid var(--border); min-height: 64px; padding-left: var(--space-1); padding-right: var(--space-1); }
:root.ui-phone #m-nav.ui-chrome .m-nav-item { justify-content: center; padding: 6px 1px 8px; gap: 2px; color: var(--muted); }
:root.ui-phone #m-nav.ui-chrome .m-nav-icon { display: inline-flex; }
:root.ui-phone #m-nav.ui-chrome .m-nav-item.active .m-nav-icon { transform: none; }
/* Not scoped to #m-nav on purpose: mNavLabelWidth() measures a detached
   .m-nav-label probe on <body>, and the bar is planned from that number — the
   probe must wear the same type as the label it stands for. */
:root.ui-phone .m-nav-label { font-size: var(--text-nav); font-weight: var(--weight-medium); letter-spacing: 0; }
:root.ui-phone #m-nav.ui-chrome .m-nav-label { color: var(--muted); }
:root.ui-phone #m-nav.ui-chrome .m-nav-item.active, :root.ui-phone #m-nav.ui-chrome .m-nav-item.active .m-nav-label { color: var(--brand-text); }
:root.ui-phone #m-nav.ui-chrome .m-nav-dot { display: none; }
:root.ui-phone #m-nav.ui-chrome .m-nav-badge { top: 2px; background: var(--brand); color: var(--on-brand); font-size: var(--text-meta); font-weight: var(--weight-semibold);
  border-radius: var(--radius-badge); min-width: 20px; padding: 0 5px; line-height: 18px; }
/* the shared bottom sheet and toast (opened from every tab) */
:root.ui-phone #m-modal-overlay { background: var(--scrim); }
:root.ui-phone #m-modal.ui { border-radius: var(--radius-modal) var(--radius-modal) 0 0; color: var(--text); }
:root.ui-phone #m-modal.ui .m-modal-handle { background: var(--border); }
:root.ui-phone #m-toast { background: var(--toast-bg); color: var(--toast-text); font-size: var(--text-secondary); border-radius: var(--radius-modal);
  white-space: normal; max-width: calc(100vw - 32px); width: max-content; text-align: center; }

/* THE PHONE TARGET RULE — one selector. Every interactive element in a joined
   phone region, the phone header and the bottom bar is at least 44 × 44. */
:root.ui-phone :is(#m-content.ui, #m-modal.ui, #m-header.ui-chrome, #m-nav.ui-chrome) :is(button, a[href], [role="button"], [onclick], select, textarea, input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"])) { min-height: var(--target-min); min-width: var(--target-min); }

/* ═════════════════════════════════════════════════════════════════════════════
   PHONE JOINED TABS — Home (mLoadDashboard), Sell + Collect (mSell*), and the
   sheets they open. #m-content / #m-modal carry .ui only while one is showing.
   ═════════════════════════════════════════════════════════════════════════════ */
:root.ui-phone .ui { font-size: var(--text-body); }
:root.ui-phone .ui .meta, :root.ui-phone .ui .secondary { font-size: var(--text-meta); color: var(--muted); }
:root.ui-phone .ui .m-card, :root.ui-phone .ui .m-kpi { background: var(--surface); border: var(--border-width) solid var(--border); border-radius: var(--radius-modal); }
:root.ui-phone .ui .m-section-title { font-size: var(--text-meta); font-weight: var(--weight-semibold); color: var(--muted); letter-spacing: .04em; }
:root.ui-phone .ui .m-kpi-label { font-size: var(--text-meta); color: var(--muted); }
:root.ui-phone .ui .m-kpi-val { font-size: var(--text-page-title); font-weight: var(--weight-semibold); color: var(--text); line-height: 1.2; }
:root.ui-phone .ui .m-kpi-sub { font-size: var(--text-meta); color: var(--muted); }
:root.ui-phone .ui .m-kpi-sub.up { color: var(--ok); }
:root.ui-phone .ui .m-kpi-sub.down { color: var(--danger); }
:root.ui-phone .ui .m-kpi-sub.warn { color: var(--warn); }
:root.ui-phone .ui .m-inv-row, :root.ui-phone .ui .m-alert-row { border-bottom-color: var(--inset); min-height: var(--target-min); }
:root.ui-phone .ui .m-inv-name, :root.ui-phone .ui .m-alert-title { font-size: var(--text-body); font-weight: var(--weight-medium); color: var(--text); }
:root.ui-phone .ui .m-inv-meta, :root.ui-phone .ui .m-alert-detail, :root.ui-phone .ui .m-alert-time { font-size: var(--text-meta); color: var(--muted); }
:root.ui-phone .ui .m-inv-amount { font-size: var(--text-body); font-weight: var(--weight-semibold); color: var(--text); }
:root.ui-phone .ui .m-badge { font-size: var(--text-meta); font-weight: var(--weight-medium); border-radius: var(--radius-badge); padding: 1px 8px; }
:root.ui-phone .ui .m-badge.paid { background: var(--ok-tint); color: var(--ok); }
:root.ui-phone .ui :is(.m-badge.pending, .m-badge.warning) { background: var(--warn-tint); color: var(--warn); }
:root.ui-phone .ui .m-badge.draft { background: var(--inset); color: var(--text); }
:root.ui-phone .ui .m-badge.critical { background: var(--danger-tint); color: var(--danger); }
:root.ui-phone .ui .m-badge.info { background: var(--brand-tint); color: var(--brand-text); }
:root.ui-phone .ui .m-bar { background: var(--inset); }
:root.ui-phone .ui .m-bar.current { background: var(--chart-1); }
:root.ui-phone .ui .m-bar-label { font-size: var(--text-meta); color: var(--muted); }
:root.ui-phone .ui .m-tile { display: flex; align-items: center; gap: var(--space-3); padding: 14px; text-align: left;
  background: var(--surface); border: var(--border-width) solid var(--border); border-radius: var(--radius-modal); color: var(--text); cursor: pointer; }
:root.ui-phone .ui .m-tile .m-tile-icon { color: var(--brand-text); display: inline-flex; }
:root.ui-phone .ui .m-tile .m-tile-title { font-weight: var(--weight-semibold); font-size: var(--text-body); color: var(--text); }
:root.ui-phone .ui .m-banner { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) 14px; border-radius: var(--radius-modal); border: var(--border-width) solid var(--border); }
:root.ui-phone .ui .m-banner.warn { background: var(--warn-tint); color: var(--warn); border-color: var(--warn-border); }
:root.ui-phone .ui .m-banner.danger { background: var(--danger-tint); color: var(--danger); border-color: var(--danger); }
:root.ui-phone .ui .m-banner.ok { background: var(--ok-tint); color: var(--ok); border-color: var(--ok-tint); }
:root.ui-phone .ui .m-banner.info { background: var(--brand-tint); color: var(--brand-text); border-color: var(--brand-tint); }

/* Sell — step 1 (scan + cart + Next) */
:root.ui-phone .ui .m-scan-row input { min-height: var(--target-min); border: var(--border-width) solid var(--border); border-radius: var(--radius-card); background: var(--surface);
  color: var(--text); font-size: var(--text-body); padding: 0 var(--space-3); }
:root.ui-phone .ui .m-scan-row input:focus { outline: none; border: var(--focus-width) solid var(--brand); }
:root.ui-phone .ui .m-cam-btn { border: var(--border-width) solid var(--border); border-radius: var(--radius-card); background: var(--surface); color: var(--brand-text); display: inline-flex; align-items: center; justify-content: center; }
:root.ui-phone .ui .m-cart-line { background: var(--surface); border: var(--border-width) solid var(--border); border-radius: var(--radius-modal); }
:root.ui-phone .ui .m-line-name { font-size: var(--text-body); font-weight: var(--weight-medium); color: var(--text); }
:root.ui-phone .ui .m-line-price { font-size: var(--text-meta); color: var(--muted); }
:root.ui-phone .ui .m-line-stock { font-size: var(--text-meta); color: var(--muted); }
:root.ui-phone .ui .m-line-total { font-size: var(--text-body); font-weight: var(--weight-semibold); color: var(--text); min-width: 92px; }
:root.ui-phone .ui .m-line-strike { font-size: var(--text-meta); font-weight: var(--weight-regular); color: var(--muted); }
:root.ui-phone .ui .m-line-qty { min-width: 28px; text-align: center; font-weight: var(--weight-semibold); text-decoration: underline dotted; text-underline-offset: 3px; cursor: pointer; }
:root.ui-phone .ui .m-disc-badge { background: var(--ok-tint); color: var(--ok); font-size: var(--text-meta); font-weight: var(--weight-medium); border-radius: var(--radius-badge); }
:root.ui-phone .ui .m-variant-pill { background: var(--brand-tint); color: var(--brand-text); border-color: var(--brand-tint); font-size: var(--text-meta); font-weight: var(--weight-medium); }
:root.ui-phone .ui .m-stepper { width: var(--target-min); height: var(--target-min); border: var(--border-width) solid var(--border); border-radius: var(--radius-modal);
  background: var(--surface); color: var(--text); display: inline-flex; align-items: center; justify-content: center; }
:root.ui-phone .ui .m-tender-dock { background: var(--surface); border: var(--border-width) solid var(--border); border-radius: var(--radius-modal); }
:root.ui-phone .ui .m-dock-sticky { box-shadow: 0 -6px 18px rgba(27, 39, 51, .08); }
:root.ui-phone .ui .m-dock-total { font-size: var(--text-total); font-weight: var(--weight-semibold); color: var(--text); }
:root.ui-phone .ui .m-tender-btn { height: var(--cta-h); border-radius: var(--radius-modal); font-size: var(--text-body); font-weight: var(--weight-medium); display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); }
:root.ui-phone .ui .m-tender-primary { background: var(--brand); border: 0; color: var(--on-brand); font-weight: var(--weight-semibold); }
:root.ui-phone .ui .m-tender-outline { background: var(--surface); border: var(--border-width) solid var(--border); color: var(--text); }
:root.ui-phone .ui #msell-next { font-size: var(--text-money-cta); }
:root.ui-phone .ui #msell-results { border: var(--border-width) solid var(--border); border-radius: var(--radius-modal); }
:root.ui-phone .ui .m-result-row { border-bottom-color: var(--inset); min-height: var(--target-min); }
:root.ui-phone .ui .m-empty-cart { color: var(--muted); text-align: center; padding: 40px var(--space-3); }

/* Sell — step 2 (Collect: customer, discount, tenders) and its sheets */
:root.ui-phone .ui .m-step-head { background: var(--bg); }
:root.ui-phone .ui .m-step-back { border: var(--border-width) solid var(--border); border-radius: var(--radius-modal); background: var(--surface); color: var(--text); display: inline-flex; align-items: center; justify-content: center; }
:root.ui-phone .ui .m-pick-card { background: var(--surface); border: var(--border-width) solid var(--border); border-radius: var(--radius-modal); }
:root.ui-phone .ui .m-error-box { background: var(--danger-tint); border: var(--border-width) solid var(--danger); color: var(--danger); border-radius: var(--radius-modal); }
:root.ui-phone .ui .m-link { display: inline-flex; align-items: center; color: var(--brand-text); font-weight: var(--weight-medium); text-decoration: none; cursor: pointer; }
:root.ui-phone .ui .m-save-primary { background: var(--brand); color: var(--on-brand); border-radius: var(--radius-modal); font-size: var(--text-money-cta); font-weight: var(--weight-semibold);
  min-height: 56px; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); }
:root.ui-phone .ui .m-btn-secondary { width: 100%; min-height: var(--cta-h); border-radius: var(--radius-modal); border: var(--border-width) solid var(--border); background: var(--surface);
  color: var(--text); font-size: var(--text-body); font-weight: var(--weight-medium); display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); cursor: pointer; }
:root.ui-phone .ui .m-tender-cancel { border: var(--border-width) solid var(--border); background: var(--surface); color: var(--text); font-size: var(--text-body); font-weight: var(--weight-medium); border-radius: var(--radius-modal); }
:root.ui-phone .ui .m-toggle { border: var(--border-width) solid var(--border); border-radius: var(--radius-modal); background: var(--surface); color: var(--muted); font-size: var(--text-body); font-weight: var(--weight-semibold); }
:root.ui-phone .ui .m-toggle.on { background: var(--brand-tint); border-color: var(--brand); color: var(--brand-text); }
:root.ui-phone .ui .m-input { min-height: var(--control-h); border: var(--border-width) solid var(--border); border-radius: var(--radius-modal); background: var(--surface); color: var(--text);
  font-size: var(--text-body); padding: 0 var(--space-3); width: 100%; }
:root.ui-phone .ui .m-input:focus { outline: none; border: var(--focus-width) solid var(--brand); }
:root.ui-phone .ui .m-sheet-title { font-size: var(--text-card-title); font-weight: var(--weight-semibold); color: var(--text); }
:root.ui-phone .ui .m-pick-row { display: flex; align-items: center; gap: 10px; border-bottom: var(--border-width) solid var(--inset); cursor: pointer; }
:root.ui-phone .ui .m-success-icon { color: var(--ok); display: inline-flex; }
:root.ui-phone .ui .m-success-icon .icon { width: 52px; height: 52px; stroke-width: 1.75; }
:root.ui-phone .ui .m-amount-hero { border-color: var(--brand); border-radius: var(--radius-modal); }