/* pos-sell.css — v3 slot 1 (Counter/Shop POS · Sell) component styles.
 *
 * Ported from ai/prototype/slot-1-pos-sell/pos.proto.css, minus the prototype's
 * comparison-page chrome (.proto-*), which exists only to put three variants side
 * by side on a review page and has no place in the app.
 *
 * Rules held from the prototype: tokens only, ZERO hardcoded colours, no
 * third-party requests. Every custom property below was checked against the
 * shipped apps/mobile-app/ui2.tokens.css on 2026-08-02 — a missing custom property
 * fails silently, so this is verified rather than assumed.
 *
 * TOUCH SIZING: ai/POS_SPEC_DIRECTIVE_2026-07-27.md sets 44px as the FLOOR and says
 * POS should trend LARGER — "speed + one-handed, hundreds of taps/day". The stepper
 * and UoM controls therefore use 48px/56px, deliberately above --u2-touch-min.
 */

/* ── U2QtyStepper (NEW) ───────────────────────────────────────────────────── */
.ui2 .u2-qty { display: flex; align-items: center; gap: var(--u2-s2); }
.ui2 .u2-qty button {
  width: 48px; height: 48px; flex: 0 0 48px;
  border: var(--u2-bw) solid var(--u2-line); border-radius: var(--u2-r-md);
  background: var(--u2-card); color: var(--u2-ink);
  font: 600 var(--u2-fs-metric-sm) var(--u2-mono); line-height: 1; cursor: pointer;
}
.ui2 .u2-qty button:focus-visible { outline: var(--u2-focus-w) solid var(--u2-focus); outline-offset: var(--u2-focus-offset); }
.ui2 .u2-qty button[disabled] { opacity: .45; pointer-events: none; }
.ui2 .u2-qty input {
  width: 72px; min-height: 48px; text-align: center;
  border: var(--u2-bw) solid var(--u2-line); border-radius: var(--u2-r-md);
  background: var(--u2-card); color: var(--u2-ink);
  /* 16px is NOT a missing token — it is the iOS/Android focus-zoom floor
   * (DESIGN_SYSTEM §6.2). Any smaller and the browser zooms the page on focus,
   * which at counter speed is worse than an off-scale input. */
  font-family: var(--u2-mono); font-weight: 600; font-size: 16px;
  font-variant-numeric: tabular-nums;
}
.ui2 .u2-qty input:focus-visible { border-color: var(--u2-brand); outline: var(--u2-focus-w) solid var(--u2-focus); outline-offset: var(--u2-focus-offset); }
.ui2 .u2-qty .u2-qty-uom { font: 500 var(--u2-fs-caption-mono) var(--u2-mono); letter-spacing: var(--u2-ls-tag); text-transform: uppercase; color: var(--u2-muted); }

/* ── U2UomSelect (NEW) ────────────────────────────────────────────────────── */
.ui2 .u2-uom { display: flex; gap: var(--u2-s2); }
.ui2 .u2-uom button {
  flex: 1; min-height: 56px; cursor: pointer;
  border: var(--u2-bw) solid var(--u2-line); border-radius: var(--u2-r-lg);
  background: var(--u2-card); color: var(--u2-ink);
  padding: var(--u2-s2) var(--u2-s15); text-align: center;
}
.ui2 .u2-uom button.u2-on { border-color: var(--u2-brand); background: var(--u2-brand-bg); }
.ui2 .u2-uom button:focus-visible { outline: var(--u2-focus-w) solid var(--u2-focus); outline-offset: var(--u2-focus-offset); }
.ui2 .u2-uom .u2-uom-l { display: block; font: 600 var(--u2-fs-body-sm) var(--u2-body); }
.ui2 .u2-uom .u2-uom-p { display: block; margin-top: var(--u2-s05); font: 500 var(--u2-fs-caption-mono) var(--u2-mono); font-variant-numeric: tabular-nums; color: var(--u2-muted); }
.ui2 .u2-uom button.u2-on .u2-uom-p { color: var(--u2-brand); }

/* Carton-only (PHASE_B_DIRECTIVES §5.2): pack size is not recorded, so there is no
 * choice to offer. Renders as a STATIC labelled unit, never a one-option selector —
 * a single-option control lies about the availability of choice. */
.ui2 .u2-uom-static {
  border: var(--u2-bw) solid var(--u2-line); border-radius: var(--u2-r-lg);
  background: var(--u2-muted-bg); padding: var(--u2-s25) var(--u2-s3);
  display: flex; align-items: center; gap: var(--u2-s2); flex-wrap: wrap;
}
.ui2 .u2-uom-static .u2-uom-l { font: 600 var(--u2-fs-body-sm) var(--u2-body); }
.ui2 .u2-uom-static .u2-uom-p { font: 500 var(--u2-fs-caption-mono) var(--u2-mono); font-variant-numeric: tabular-nums; color: var(--u2-muted); margin-inline-start: auto; }
/* The cause line — honest-empty-state register: the tag says WHAT, this says WHY. */
.ui2 .u2-uom-why { flex-basis: 100%; font: 400 var(--u2-fs-body-sm) var(--u2-body); color: var(--u2-muted); }

/* ── Sell screen chrome ───────────────────────────────────────────────────── */
.ui2 .pos-search { display: flex; gap: var(--u2-s2); margin: 0 var(--u2-gutter); }
.ui2 .pos-search input {
  flex: 1; min-height: 48px; padding: var(--u2-s3) var(--u2-s35);
  border: var(--u2-bw) solid var(--u2-line); border-radius: var(--u2-r-lg);
  background: var(--u2-card); color: var(--u2-ink);
  /* 16px: focus-zoom floor, as above. */
  font-family: var(--u2-body); font-size: 16px;
}
.ui2 .pos-search input:focus-visible { border-color: var(--u2-brand); outline: var(--u2-focus-w) solid var(--u2-focus); outline-offset: var(--u2-focus-offset); }
.ui2 .pos-search .pos-scan {
  flex: 0 0 56px; min-height: 48px; cursor: pointer;
  border: var(--u2-bw) solid var(--u2-line); border-radius: var(--u2-r-lg);
  background: var(--u2-card); font-size: 20px; line-height: 1;
}
.ui2 .pos-search .pos-scan:focus-visible { outline: var(--u2-focus-w) solid var(--u2-focus); outline-offset: var(--u2-focus-offset); }

.ui2 .pos-add { margin: 0 var(--u2-gutter); background: var(--u2-card); border: var(--u2-bw) solid var(--u2-line); border-radius: var(--u2-r-xl); padding: var(--u2-s35); }
.ui2 .pos-add .pos-add-nm { font: 700 var(--u2-fs-row-title) var(--u2-display); }
.ui2 .pos-add .pos-add-br { font: 400 var(--u2-fs-body-sm) var(--u2-body); color: var(--u2-muted); margin-bottom: var(--u2-s25); }
.ui2 .pos-add .pos-add-lbl { font: 600 var(--u2-fs-caption) var(--u2-display); letter-spacing: var(--u2-ls-sect); text-transform: uppercase; color: var(--u2-muted); margin: var(--u2-s3) 0 var(--u2-s15); }

/* ── Totals block ─────────────────────────────────────────────────────────── */
.ui2 .pos-totals { margin: var(--u2-s25) var(--u2-gutter) 0; background: var(--u2-card); border: var(--u2-bw) solid var(--u2-line); border-radius: var(--u2-r-xl); padding: var(--u2-s35); }
.ui2 .pos-totals .r { display: flex; justify-content: space-between; align-items: baseline; gap: var(--u2-s3); padding: var(--u2-s1) 0; }
.ui2 .pos-totals .r .k { font: 400 var(--u2-fs-body-sm) var(--u2-body); color: var(--u2-muted); }
.ui2 .pos-totals .r .v { font: 600 var(--u2-fs-metric-sm) var(--u2-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ui2 .pos-totals .r.is-total { border-top: var(--u2-bw) solid var(--u2-line); margin-top: var(--u2-s2); padding-top: var(--u2-s25); }
.ui2 .pos-totals .r.is-total .k { font: 700 var(--u2-fs-row-title) var(--u2-display); color: var(--u2-ink); }
.ui2 .pos-totals .r.is-total .v { font-size: var(--u2-fs-metric); }
.ui2 .pos-totals .u2-kpi-u { font: 500 var(--u2-fs-micro) var(--u2-mono); color: var(--u2-muted); }
/* VAT is derived, never typed — stated on the row itself (review test). */
.ui2 .pos-totals .r .k .pos-derived { display: block; font: 500 var(--u2-fs-micro) var(--u2-mono); letter-spacing: var(--u2-ls-tag); text-transform: uppercase; opacity: .8; }

/* ── Sticky charge bar ────────────────────────────────────────────────────────
 * MANDATORY under DEC-025 — the thumb-anchored primary is the ratified position of
 * Charge, not a styling preference. It stays reachable however long the cart grows,
 * which is the whole point at hundreds of taps a day.
 * bottom is offset by the app's bottom-nav height so the bar sits above it rather
 * than under it; env(safe-area-inset-bottom) keeps it clear of the home indicator. */
.ui2 .pos-chargebar {
  position: sticky; z-index: 5;
  bottom: calc(var(--u2-s8) + env(safe-area-inset-bottom, 0px));
  background: var(--u2-card); border-top: var(--u2-bw) solid var(--u2-line);
  padding: var(--u2-s25) var(--u2-gutter);
  margin-top: var(--u2-s3);
}