/* ============================================================================ Universal Till — base stylesheet. Design tokens live in :root so themes (built-in or plugin) can re-skin the POS by overriding variables and/or the pos-container grid areas. ========================================================================== */ :root { --brand: #1e293b; /* nav / headings accent */ --accent: #2563eb; /* primary action */ --accent-contrast: #ffffff; --bg: #f1f5f9; /* page background */ --surface: #ffffff; /* cards, tables */ --surface-2: #f8fafc; /* subtle wells inside cards */ --border: #e2e8f0; --text: #0f172a; --muted: #64748b; /* ut-docs#305: --border alone is ~1.2:1 against --surface -- fine for decorative dividers/cards (WCAG 1.4.11 doesn't cover those), but a form control's own boundary is a UI component the spec DOES cover, and needs 3:1. --control-border reuses --muted (already >=3:1 against every curated theme's white --surface) rather than a one-off literal, so it tracks --muted automatically if a theme ever retunes it. */ --control-border: var(--muted); /* ut-docs#797: the focus-state border of a form control is a UI component boundary WCAG 1.4.11 covers, so it needs >=3:1 against --surface too. --accent clears that in default (5.17:1) and slate (6.70:1), so those keep using it via this token's default; amber/fresh/monarch override --focus-border with a darker same-hue shade (their raw --accent is only ~2.5-2.8:1) rather than darkening --accent itself, which paints ~15 other non-boundary spots (buttons, prices, tabs) that 1.4.11 doesn't govern. */ --focus-border: var(--accent); --success: #16a34a; --danger: #dc2626; --warning: #d97706; /* ut-docs#2192: semantic-tint BACKGROUND colours, split out from --success/--danger/--warning themselves (deliberately — a theme that retunes the ink/border colour above shouldn't silently move every tint background too). Every existing tint rule below now reads one of these three instead of a literal rgba(), so a theme can override the wash without touching the ink. Defaults are exactly the literal values every call site used before this token existed, so the four themes that never override these (amber/fresh/monarch/slate) and dark.css (overrides --danger only, not the tint) render pixel- identical to before; monochrome.css overrides all three to a neutral grayscale wash instead. */ --success-tint: rgba(22, 163, 74, .12); --danger-tint: rgba(220, 38, 38, .1); --warning-tint: rgba(217, 119, 6, .12); /* ut-docs#2207: same split as the tint BACKGROUNDS above, one step later — the notice/tag/block BORDER colours (.pos-notice.success/.error, .notice-block-warn/-success) were still a literal rgba() at .35 alpha, so Monochrome's tint fix left a colourless wash with a colored outline. Defaults are exactly the literal values every call site used before this token existed, so the four themes that never override these render pixel-identical to before; monochrome.css overrides all three to a neutral grayscale border instead, same alpha, same reasoning as its tint override just above. */ --success-tint-border: rgba(22, 163, 74, .35); --danger-tint-border: rgba(220, 38, 38, .35); --warning-tint-border: rgba(217, 119, 6, .35); --radius: 10px; --radius-lg: 14px; --shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 1px 3px rgba(15, 23, 42, .08); /* ut-docs#2308: sell-screen basket/products divider geometry. Read by BOTH sides of the feature so the numbers only live here: app.css's own `.pos-container` grid-template-columns (the real, foolproof clamp — the grid simply refuses to size either track past what these allow, regardless of what JS or a persisted setting asks for) and the drag handler's own live clamp (index.html, via getComputedStyle at drag time) that keeps the divider from visibly fighting that CSS floor mid-drag. Also mirrored (for the value the settings API accepts before it's ever persisted) in internal/pages/common/state.go's MinBasketPanelWidthRem/MaxBasketPanelWidthRem — keep all three in sync by hand if any of this ever changes. Never overridden by a built-in theme (web/public/themes/*.css) — this is layout, not palette — but nothing stops a theme plugin from doing so, same as any other custom property here. */ --pos-basket-min-w: 22rem; /* matches ut-docs#213's basket-column floor */ --pos-basket-max-w: 60rem; /* generous sanity ceiling; real day-to-day limit is whatever leaves --pos-products-min-w free */ --pos-products-min-w: 16.5rem; /* two 7rem .grid tiles + .5rem gap + .products' own .7rem/.8rem padding, plus a small margin */ --pos-divider-w: 1.5rem; /* >=24px hit area even though the visible grip is thinner (ut-docs#2308 AC2) */ /* ut-docs#2873: the ONE popup backdrop colour -- every modal dialog's native ::backdrop and the shared #ut-scrim behind every non-modal popup (base.html) read it. A theme retunes it here (dark.css does). */ --ut-scrim: rgba(15, 23, 42, .45); } /* ---------- Base ---------- */ * { box-sizing: border-box; } /* Fluid root size: 17px at a 1024px-wide till up to 20px at 1920px, so text/touch-targets (almost everything else is rem-based) scale with the viewport instead of the fixed 10-inch-only baseline from #144 (ut-docs#161). Two-point linear fit anchored at (1024px, 17px) and (1920px, 20px): slope = 3/896 ≈ .00335px per viewport px. min() with a matching vh-based curve so a WIDE-but-SHORT till (e.g. 1920x800) doesn't inflate every rem past the tender panel's fixed vertical budget (independent review of ut-docs#161 caught this live: width-only growth clipped the Cash/Card/Gift Card buttons on exactly that class of screen) — height, not just width, bounds the growth. Composed with --ui-scale (base.html, login.html, setup.html — from the operator's Settings > UI scale choice, default 1) so that existing manual scale-up still layers on top of the automatic viewport fit instead of replacing it. --ui-scale is still unset on the remaining standalone kiosk screens (self_order.html, self_order_shop.html, order_tracking.html — ut-docs#1126 found and fixed login/setup, ut-docs#1175 tracks these three) that still set an inline px font-size directly — that inline value always wins over this rule there, so the "1" fallback below is inert for them, not load-bearing. */ :root { --fluid-fs: clamp(17px, min(13.57px + 0.335vw, 13.25px + 0.625vh), 20px); } html { font-size: calc(var(--ui-scale, 1) * var(--fluid-fs)); } body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Segoe UI Symbol"; background: var(--bg); color: var(--text); line-height: 1.45; -webkit-font-smoothing: antialiased; } h1 { font-size: 1.45rem; font-weight: 700; letter-spacing: -0.01em; margin: 0; } h2 { font-size: 1.02rem; font-weight: 600; margin: 0 0 .6rem 0; color: var(--brand); text-transform: uppercase; letter-spacing: .04em; } h3 { font-size: 1rem; font-weight: 600; margin: .2rem 0; } a { color: var(--accent); } /* Column layout so the sale screen fills the viewport exactly below the nav, whatever height the nav ends up (one row or two). */ body { display: flex; flex-direction: column; min-height: 100dvh; margin: 0; } .container { max-width: 1500px; margin: 0 auto; padding: 1rem 1.25rem 2rem; width: 100%; } /* Sale screen fills the full viewport width — no dead side gutters on wide till displays (ut-docs#161). Admin/reports/settings pages keep the 1500px reading-width cap above. */ body.sale-screen .container { max-width: none; } /* ADR-0098: #ut-page (the boosted page region: rail + notices + main) is the body's flex child now; it is itself the same flex column, so main's own rules below read exactly as they did when main was body's child. */ #ut-page { display: flex; flex-direction: column; flex: 1 0 auto; min-height: 0; } /* Main grows to fill the viewport so the status bar never floats mid-screen on short pages (menu, settings, …). */ #ut-page > main.container { flex: 1 0 auto; } /* Sale screen gets a DEFINITE height (not just min-height) so the grid's 1fr rows resolve and the basket scrolls internally instead of growing and pushing the tender panel off-screen. */ body.sale-screen { height: 100dvh; overflow: hidden; } body.sale-screen #ut-page { flex: 1 1 auto; } body.sale-screen #ut-page > main.container { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding-top: .6rem; padding-bottom: 0; } /* ---------- Touch: the till is an operator surface, not a document ---------- ut-docs#1021 — root-caused on the physical Pi 5 till (WebKitGTK 2.52, labwc/Wayland), where the full input stack was verified healthy layer by layer (libinput: touch caps OK; compositor: native wl_touch confirmed with a raw client; plain pages: kinetic touch panning works in the SAME shell). The reported "cannot scroll anywhere, dragging highlights text" is a WebKit gesture-arbitration fall-through: when a touch drag has nothing to pan in its direction — most commonly a downward drag while already at the top of the page, which is many operators' first gesture — WebKit falls back to treating the drag as a mouse selection drag. Once a selection exists, subsequent drags EXTEND it instead of panning, so the whole page feels unscrollable (reproduced deterministically with synthetic evdev gestures: up-drag pans, down-drag-at-top selects). The cure is the one ut-docs#1170 already applied to .btn, widened to what a POS actually is: nothing outside editable fields is ever meant to be text-selected. With no selection to fall into, an unpannable drag simply does nothing (standard touch-UI feel) and panning is unaffected — verified on the same device: down-drag-at-top selects nothing, up-drag still pans. Editable/copyable content opts back in below; -webkit- prefix because WebKitGTK is the engine this was proven on. */ body { -webkit-user-select: none; user-select: none; } /* Editing surfaces always keep native selection — caret/selection inside a field is part of typing, on every input kind. */ input, textarea, [contenteditable] { -webkit-user-select: text; user-select: text; } /* Copyable ID-shaped values (/
: store/device IDs, audit JSON,
   translation keys, enrol codes) stay selectable ONLY where a precise
   pointer exists (independent review finding): on the touch till a 
   chip at the top of /settings would otherwise re-open the exact
   selection-drag fall-through this block exists to close — the canonical
   down-drag-at-top starting on it. A till has no clipboard destination
   anyway; desktops keep copyability. */
@media (pointer: fine) {
  code, pre { -webkit-user-select: text; user-select: text; }
}
/* The customer order-tracking page is an anonymous customer's OWN PHONE,
   not an operator surface (order_tracking.html's own header, ut-docs#527)
   — a customer may legitimately select/copy their receipt number. The
   operator-surface rationale above deliberately does not apply there
   (independent review finding). */
body.tracking-screen { -webkit-user-select: text; user-select: text; }

.muted { color: var(--muted); }
.empty { text-align: center; color: var(--muted); padding: .75rem 0; }
.tag {
  display: inline-block; padding: .15rem .55rem; border-radius: 999px;
  font-size: .75rem; font-weight: 600; background: var(--surface-2);
  color: var(--muted); border: 1px solid var(--border);
}
/* A tag flagging something that needs attention (e.g. a failing bug-report
   upload, ut-docs#637) — same warn tint .sync-banner below uses, reused
   here rather than inventing a second warning color. */
.tag.warn { background: var(--warning-tint); color: var(--warning); border-color: var(--warning); }
/* A tag for a healthy live state (the Tills roster's "Linked", ut-docs#2742)
   — the success tint; the word itself carries the meaning. */
.tag.ok { background: var(--success-tint); color: var(--success); border-color: var(--success); }

/* ---------- Navigation: left icon rail (>480px), top bar (<=480px) ----------
   2026-08-30 (ut-docs#1332): converted from an always-horizontal top bar,
   after repeated product-owner feedback comparing directly against a
   competitor POS (SumUp) — a full-width row at the top of EVERY page (plus,
   on the sale screen specifically, a second row for New Sale/Inventory/
   Deposit refund) cost a fixed slice of vertical height nowhere else in the
   app needed, on the screen operators spend the most time looking at.

   Default (>480px, real tablet/kiosk/desktop widths): `.nav` is a fixed
   left rail, full viewport height, `--rail-width` wide. `.nav-primary`
   (Till/Menu/Inventory/+ the sale-screen-only New-Sale/Deposit-refund) sits
   at the top; `.nav-right` (help/bugreport/sync/fiscal/session chips) is
   pushed to the bottom via `margin-block-start: auto` in the same column.
   Logical properties throughout (`inset-inline-start`, `padding-inline-
   start`) so the rail sits on the RIGHT for RTL locales (fa/ar) with no
   separate rule — "left or right" was the product owner's own framing.

   <=480px (phone width): reverts to the previous horizontal top bar
   wholesale, including its own hard-fought wrapping-to-two-rows behavior
   (ut-docs#413) — a permanent ~8.5rem-wide side rail would eat too much of
   a 360px screen, and that width class already has its own settled,
   independently-tested layout not worth re-litigating here. */
:root { --rail-width: 4.5rem; }
/* ut-docs#2364: the <=480px top-bar fallback (see the big media block
   below) wraps to a variable number of rows depending on content/locale
   -- currently 3 at 360px -- so anything anchored below it needs the
   REAL rendered height, not a guessed rem value (a guessed 4.6rem, tuned
   for an old 2-row bar, is exactly what caused this bug). Same pattern as
   public/osk.js's --osk-reserved-height: a small IIFE in app.js measures
   .nav's real getBoundingClientRect().height and overwrites this via
   documentElement.style.setProperty. This fallback is a safe pre-JS
   guess (roughly the measured 3-row height) so there's no flash of
   overlap before that first measurement lands. */
:root { --topbar-h: 12rem; }
.nav {
  background: var(--brand); color: #fff;
  padding: .6rem .5rem;
  display: flex; flex-direction: column; align-items: stretch; gap: .4rem;
  position: fixed; inset-inline-start: 0; top: 0; bottom: 0;
  inline-size: var(--rail-width);
  overflow-y: auto;
  z-index: 100;
  box-shadow: 1px 0 4px rgba(0,0,0,.25);
}
/* Rail content pushes the page's own content (and the footer statusbar)
   over by the rail's width — .nav itself is `position: fixed`, so it's
   unaffected by this padding on its own ancestor. */
body { padding-inline-start: var(--rail-width); }
/* ...but only pages that actually RENDER the rail should pay for it. The
   rule above is on bare `body`, while `.nav` comes from base.html — and
   login.html / setup.html / order_tracking.html are standalone pages that
   load app.css WITHOUT base.html, so they have no rail at all. Independent
   review (2026-08-31) measured `padding-inline-start: 80.36px` with no
   `.nav` in the DOM on /login and /setup at 1280x800 and 1024x600: since
   `body.login-screen` centres its card with `justify-content: center`, the
   card was centred inside a content box shifted 4.5rem inward, i.e. drawn
   ~40px off true centre on the first screen a new shop owner ever sees.
   (self_order*.html escape this only by accident — their own `padding`
   shorthand happens to reset it — so they are not listed here.) */
body.login-screen, body.tracking-screen { padding-inline-start: 0; }
.statusbar { padding-inline-start: calc(var(--rail-width) + 1rem); }

/* ============================================================================
   ut-docs#2223 — page & menu transitions "like an app".

   Cross-document CSS View Transitions, as a progressive enhancement only:
   an engine without support (`@view-transition` unknown) keeps today's
   instant full-document swap. Every real target has it — pilot tablet
   Android WebView 151/Chrome 153, Pi 5 `unitill-desktop` = WebKitGTK 2.52
   (probed on the device; NOT the Chromium 152 that merely sits installed
   there), Windows shell WebView2 153.

   The OPT-IN (`@view-transition { navigation: auto }`) lives ONLY in
   base.html's inline  block, not here, for two reasons found on
   real targets: (1) Chrome on the pilot tablet read the incoming page's
   opt-in before this 244K stylesheet had arrived and aborted every
   transition INTO a till page ("ViewTransition opt-in disabled"); (2) the
   pages that load this file WITHOUT base.html (login, setup, self-order,
   order tracking) have none of the script's guards -- reduced-motion
   skip, watchdog, settled promises -- so an opt-in here gave them
   transitions that surfaced as uncaught "Transition was skipped" errors
   and, in headless Chromium, never revealed at all. The rules below are
   inert on a page that has not opted in.

   WHAT MOVES (ADR-0122, superseding ADR-0118 §2's push — ut-docs#2939,
   #2942): the ROOT snapshot — the whole document MINUS the two named
   groups below — as an iOS zoom from the tapped element, over
   --ut-motion-ms (400ms Full / 200ms Balanced, eased
   cubic-bezier(.32,.72,0,1): fast start, long soft landing). FORWARD: the
   incoming page grows out of the tapped tile/link/button — uniform scale
   --ut-zoom-s (source width / viewport width, clamped .1–1) about its
   centre, translated so that centre starts on the source's centre
   (--ut-zoom-x/--ut-zoom-y, viewport px), from opacity .4 (never blank) —
   while the outgoing page recedes underneath (scales to .92, drops 3%,
   dims to .55) on the black backdrop. BACK: the page being left shrinks
   into the box it grew from and fades out ON TOP; the previous page
   comes back up from the receded state underneath. The three properties
   are set on  by base.html's shell script (htmx:beforeTransition
   for the boosted hop, pagereveal for a full load) from the origin
   recorder / the sessionStorage back store; with no origin they default
   to the bottom centre below. Custom properties on  are consumed
   only by these keyframes, so setting them changes no layout and the
   ADR-0118 §1 snapshot-before-swap still holds. The same rules drive the
   boosted same-document transition and the cross-document fallback, on
   every engine.
   `.nav` (rail) and `.statusbar` are named view-transition groups pinned
   to "no animation, always drawn from the new page, above the zooming
   root", so the rail reads as fixed furniture (ut-docs#1830).

   Deliberately NOT named: 
, or anything else that hosts a
   `position: fixed` dialog. A `view-transition-name` makes its element a
   stacking context with layout containment, which turns it into the
   containing block for every fixed-position descendant — the payment
   overlay, #hold-modal, #elevation-modal, .item-form-modal
   all live inside 
 and every one of them stopped being reachable
   the moment 
 carried a name (found by e2e bugreport-panel.spec.ts,
   confirmed by toggling the single declaration; the property has this
   effect with NO transition running). The rail and statusbar host no
   fixed descendants (checked), which is why they can be named.

   Direction (forward vs back) is decided by the inline `pagereveal`
   script in base.html's  (must run before first paint, so it can't
   live in app.js, which is `defer`) and, for a boosted hop, by the shell's
   htmx:beforeSwap — it sets `data-nav-dir` on  and, where
   supported, `vt.types.add('back')` so `:active-view-transition-type(back)`
   flips the animation; the `html[data-nav-dir="pop"]` selectors are the
   same flip via a plain attribute, belt-and-braces for an engine with
   View Transitions but not the newer `types` API. NB: written with NO
   descendant combinator — every ::view-transition-* pseudo originates on
    itself, so `:root ::view-transition-new(x)` can never match.
   RTL needs nothing: the zoom has no side, it starts from the tapped
   element's own (already mirrored) box — no left/right literal anywhere. */
:root {
  --ut-motion-ms: 400ms; --ut-motion-ease: cubic-bezier(.32,.72,0,1);
  --ut-zoom-x: 50vw; --ut-zoom-y: 100vh; --ut-zoom-s: .3;
}
.nav        { view-transition-name: ut-rail; }
.statusbar  { view-transition-name: ut-statusbar; }
/* Fixed furniture: no cross-fade at all, new image simply covers the old.
   `mix-blend-mode: normal` matters as much as `animation: none`: the UA
   stylesheet blends old+new with `plus-lighter` (right for a cross-fade
   whose opacities sum to 1, wrong for two opaque images -- they ADD and
   the bar flashes brighter); and the OLD image is hidden outright (the
   images are `inline-size: 100%; block-size: auto`, so at phone width --
   sticky top bar -- an old bar taller than the new one would otherwise
   peek out below it for the whole transition). */
::view-transition-old(ut-rail), ::view-transition-new(ut-rail),
::view-transition-old(ut-statusbar), ::view-transition-new(ut-statusbar) { animation: none; mix-blend-mode: normal; }
::view-transition-old(ut-rail), ::view-transition-old(ut-statusbar) { opacity: 0; }
/* `.nav` precedes 
 in DOM order, so without an explicit stacking
   order the zooming root snapshot paints OVER the rail/statusbar for the
   400ms it animates -- confirmed live, this is the fix. */
::view-transition-group(ut-rail), ::view-transition-group(ut-statusbar) { animation-duration: 0s; z-index: 2; }
/* Never block input (ADR-0118 §3, kept by ADR-0122): the transition
   overlay sits on top of the real, already-swapped DOM for the whole
   400ms; without this a tap during the motion hits the overlay
   (retargeted to ) and is lost. */
::view-transition { pointer-events: none; }
/* Content = the root pair (ADR-0122). Uniform scale + translate and
   opacity only (compositor-only, no layout, no clipping mask — not
   compositor-only on every engine we ship). `mix-blend-mode: normal`: the
   UA blends the pair with plus-lighter (right for a cross-fade whose
   opacities sum to 1), but here an opaque page grows OVER a dimmed one —
   additive blending would flash the overlap brighter, worst on dark
   themes. The dim reads against the black ::view-transition backdrop
   (ADR-0118 §2, kept), which is only ever visible around the receded
   (scaled) page. */
::view-transition { background: #000; }
::view-transition-old(root), ::view-transition-new(root) {
  mix-blend-mode: normal;
  animation-duration: var(--ut-motion-ms);
  animation-timing-function: var(--ut-motion-ease);
  animation-fill-mode: both;
  transform-origin: 50% 50%;
}
/* Forward: old recedes underneath, new grows out of the origin on top (DOM
   order of the pair already paints new above old). `translate(... - 50%)`
   is relative to the snapshot image's own box, so the image's centre lands
   exactly on the source centre at scale --ut-zoom-s. */
::view-transition-old(root) { animation-name: ut-page-recede; }
::view-transition-new(root) { animation-name: ut-page-zoom-in; }
@keyframes ut-page-zoom-in  { from { transform: translate(calc(var(--ut-zoom-x) - 50%), calc(var(--ut-zoom-y) - 50%)) scale(var(--ut-zoom-s)); opacity: .4; } to { transform: none; opacity: 1; } }
@keyframes ut-page-recede   { from { transform: none; opacity: 1; } to { transform: translateY(3%) scale(.92); opacity: .55; } }
/* Back: the page being left (old) shrinks into the box it came from and
   fades out ON TOP; the previous page (new) comes back up from the receded
   state underneath it. */
:root:active-view-transition-type(back)::view-transition-old(root) { animation-name: ut-page-zoom-out; z-index: 1; }
:root:active-view-transition-type(back)::view-transition-new(root) { animation-name: ut-page-return; }
html[data-nav-dir="pop"]::view-transition-old(root) { animation-name: ut-page-zoom-out; z-index: 1; }
html[data-nav-dir="pop"]::view-transition-new(root) { animation-name: ut-page-return; }
@keyframes ut-page-zoom-out { from { transform: none; opacity: 1; } to { transform: translate(calc(var(--ut-zoom-x) - 50%), calc(var(--ut-zoom-y) - 50%)) scale(var(--ut-zoom-s)); opacity: 0; } }
@keyframes ut-page-return   { from { transform: translateY(3%) scale(.92); opacity: .55; } to { transform: none; opacity: 1; } }

/* In-page htmx swaps ease instead of blinking -- zero latency: no swap
   delay, no settle-timing dependency (ut-docs#239's defaultSettleDelay:0
   stays untouched). app.js's htmx:afterSettle listener (re)applies this
   class to the swapped-in element for OPERATOR-caused swaps only; starts
   from .55 (not 0) so a cashier scanning fast is never left waiting for
   content that's already there. */
.ut-swap-fx { animation: ut-swap-in 150ms ease-out both; }
@keyframes ut-swap-in { from { opacity: .55; } to { opacity: 1; } }

/* ADR-0122 §4 (ut-docs#2943): the rail-driven tree panes (#items-panel,
   #admin-panel, #manual-panel) zoom out of the tapped tree item -- a
   TRANSIENT Web Animations transform in app.js (zoomPane), never a CSS
   rule here: a persistent transform on a pane would make it the containing
   block of its position:fixed dialogs (#2338's hazard, which
   TestAppCSSNamesOnlyTheFixedRailAndStatusbar still guards). Panes and
   popups use the shorter small-zoom duration (ADR-0122 §1). The
   CLOSE alone uses --ut-zoom-close-ms, not this one (ADR-0123, #2987): the
   open and close eased on the same fast duration left the popup 2/3 shrunk
   and 2/3 transparent after 60ms, so the shrink needed a longer duration of
   its own -- the open is unchanged. */
:root { --ut-zoom-small-ms: 300ms; --ut-zoom-close-ms: 400ms; }

/* ADR-0122 §5 (ut-docs#2944): every popup (, sheet, picker) grows
   from the tapped element and shrinks back into it -- base.html's ONE
   shared popup motion, a transient Web Animations transform, never a CSS
   rule here. After the native close (the page already takes input) the
   SAME element is painted again for at most --ut-zoom-close-ms (ADR-0123,
   #2987 -- its own, slower duration/ease than the open) with
   data-ut-closing, inert and aria-hidden while it shrinks: fixed at the box
   it last had open (the custom properties base.html sets), in its open
   display type, no pointer events, above the rail (100) and the on-screen
   keyboard (#osk, 1000). !important because it must beat every popup's own
   closed-state rule (the UA's dialog:not([open]), .record-dialog:not([open]),
   .bugreport-panel) and id-keyed frame (#hold-modal, #pfand-modal, ...).
   `transform` is deliberately NOT important: the shrink animates it (an
   important declaration would beat the animation); this only drops the
   popup's own transform (e.g. .shrinkage-sheet's centring), which the
   recorded box already includes. Logical properties, so RTL needs nothing
   more (base.html measures the inline-start offset per direction). */
html [data-ut-closing] {
  display: var(--ut-closing-display, block) !important;
  position: fixed !important;
  inset: auto !important;
  inset-block-start: var(--ut-closing-t) !important;
  inset-inline-start: var(--ut-closing-is) !important;
  inline-size: var(--ut-closing-w) !important;
  block-size: var(--ut-closing-h) !important;
  min-inline-size: 0 !important; min-block-size: 0 !important;
  max-inline-size: none !important; max-block-size: none !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  pointer-events: none !important;
  z-index: 1500 !important;
  translate: none !important; rotate: none !important; scale: none !important;
  transform: none;
  transition: none !important;
}

/* Reduced motion: ONE block, kills everything -- the new view-transition
   rules above AND every pre-existing `transition:`/`animation:` rule
   already in this file (.menu-tile, .tab/.tab-active, etc.), via the
   wildcard rather than an enumerated list, so a future motion rule added
   anywhere in app.css is automatically covered too. */
@media (prefers-reduced-motion: reduce) {
  /* (the `@view-transition { navigation: none }` half of this lives next
     to the opt-in in base.html) */
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; scroll-behavior: auto !important; }
  /* Progress spinners are essential motion (WCAG 2.3.3 exempts them):
     frozen at 0s they read as "hung". Keep them turning. */
  #refresh-indicator, .animate-spin { animation-duration: 1s !important; }
  /* ADR-0122 §6 backstop: base.html never re-shows a closing popup under
     reduced motion; should one ever be marked, it is not painted. */
  html:root [data-ut-closing] { display: none !important; }
}

/* ADR-0119 (ut-docs#2859): the per-till visual effects level. base.html
   renders exactly one fx-full | fx-balanced | fx-light class on 
   (Auto is resolved on the server, never rendered). Only paint and motion
   change between levels -- never layout, sizes, touch targets or theme
   colours. prefers-reduced-motion (above) stays the floor at every level.
   Theme/layout plugins gate their own costly effects on the same class
   (html:not(.fx-light), .fx-balanced); the Light wildcard below covers
   motion, shadow, blur and filter even for a plugin that ignores it.

   LIGHT ("super light", for a Raspberry Pi or a weak/old machine): no
   animation or transition at all -- the same wildcard shape as the
   reduced-motion block, and JS (UT.motionOff) never even creates the View
   Transition; no shadow, blur or filter; flat colours instead of the
   gradients below (explicit selectors, never a universal
   background-image: none -- icons can be background images); press
   feedback is a colour change, not a scale. */
html.fx-light::view-transition-group(*), html.fx-light::view-transition-old(*), html.fx-light::view-transition-new(*) { animation: none !important; }
html.fx-light *, html.fx-light *::before, html.fx-light *::after {
  transition-duration: 0s !important; transition-delay: 0s !important;
  animation: none !important;
  scroll-behavior: auto !important;
  box-shadow: none !important; text-shadow: none !important;
  filter: none !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
/* ADR-0122 §6 backstop: no closing popup is ever re-shown under Light. */
html.fx-light [data-ut-closing] { display: none !important; }
/* Essential motion stays (WCAG 2.3.3, as under reduced motion). */
html.fx-light #refresh-indicator, html.fx-light .animate-spin { animation: spin 1s linear infinite !important; }
/* Function stays: these state rings are drawn with an inset/spread
   box-shadow (a border, not a shadow), so they come back after the
   wildcard -- selected category, pressed picker tile, checked colour, the
   suggested icon, the caps-lock key, a row being dragged. */
html.fx-light .osk-caps { box-shadow: inset 0 0 0 2px var(--accent-contrast) !important; }
html.fx-light .category-overflow-tile.active { box-shadow: 0 0 0 2px var(--cat-color, var(--accent)) inset !important; }
html.fx-light .picker-tile[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--accent) !important; }
/* Its own rule: an engine without :has() drops only this one. */
html.fx-light .designer-cat-colors .item-color-tile:has(input:checked) { box-shadow: inset 0 0 0 2px var(--accent) !important; }
html.fx-light .builtin-icon-tile.builtin-icon-suggested { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent) !important; }
html.fx-light .category-row.is-dragging > td { box-shadow: inset 0 2px 0 var(--accent), inset 0 -2px 0 var(--accent) !important; }
html.fx-light .designer-cat.is-dragging { box-shadow: inset 0 0 0 1px var(--accent) !important; }
/* Gradients and textures -> flat. */
html.fx-light .pos-container > .products { background-image: none; }
/* (The item editor's tab-bar scroll fades, ut-docs#2024, stay: they are the
   only cue that tabs sit off-screen -- an affordance, not decoration.) */
html.fx-light .busy-bar { background: var(--accent, #2563eb); }
html.fx-light .trust-official { background: #fbbf24; }
/* Press feedback: a colour change only, no scale. */
html.fx-light .btn-tile:not(.tile-colored):active,
html.fx-light .category-tile:active,
html.fx-light .category-overflow-tile:active,
html.fx-light .picker-tile:active { transform: none; background-color: var(--surface-2); }
/* A coloured tile keeps its white label legible: darken its own colour. */
html.fx-light .btn-tile.tile-colored:active { transform: none; background: color-mix(in srgb, var(--tile-color) 80%, #000); }
html.fx-light .designer-cat.is-dragging { transform: none; }
/* No lift on the dragged tile (the drag's own inline translate still wins). */
html.fx-light .jiggle-mode .tile-cell > .btn-tile.dragging { transform: none; }

/* BALANCED: the short opacity swap fade (.ut-swap-fx 150ms) stays; the
   tree-pane and popup zooms (ADR-0122) are cut to 200ms; the ADR-0122 page
   zoom stays but is cut to ADR-0097's original 200ms budget (ADR-0122 amends
   ADR-0119 §3); no backdrop blur;
   one small shadow instead of large or layered ones; no drag lift or
   jiggle (the one decorative looping animation). `filter` itself is left
   alone: core uses it only for the hidden-tile grayscale and hover
   brightness, neither of them a blur. */
html.fx-balanced { --ut-motion-ms: 200ms; --ut-zoom-small-ms: 200ms; --ut-zoom-close-ms: 240ms; --shadow: 0 1px 2px rgba(15, 23, 42, .08); }
html.fx-balanced *, html.fx-balanced *::before, html.fx-balanced *::after {
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
html.fx-balanced .nav,
html.fx-balanced #osk,
html.fx-balanced .toast,
html.fx-balanced .payment-overlay,
html.fx-balanced .login-card,
html.fx-balanced .bugreport-panel,
html.fx-balanced .btn-tile:hover,
html.fx-balanced .category-tile:hover,
html.fx-balanced .category-overflow-tile:hover { box-shadow: 0 1px 3px rgba(15, 23, 42, .18); }
html.fx-balanced .jiggle-mode .tile-cell > .btn-tile { animation: none; }
html.fx-balanced .jiggle-mode .tile-cell > .btn-tile.dragging { transform: none; box-shadow: 0 1px 3px rgba(15, 23, 42, .18); }
html.fx-balanced .designer-cat.is-dragging { transform: none; box-shadow: inset 0 0 0 1px var(--accent); }
/* ============================================================================ */

/* ut-docs#2873: every till popup gets a full-screen dimmed backdrop that
   blocks taps behind it. Two families, one colour (--ut-scrim, :root):
   - a showModal() dialog: its native ::backdrop (top layer; the rest of
     the page is already inert). Since ut-docs#2097 that is only the
     self-order kiosk's #selforder-modal -- every till dialog is non-modal
     (guard-no-showmodal.sh). The fallback is for an engine whose
     ::backdrop does not inherit custom properties yet.
   - a non-modal .show() dialog (the #1385 on-screen-keyboard family, z
     500/550) or a UT.popupOpened() panel: the ONE shared #ut-scrim
     (base.html), shown by base.html's popup hooks while any such popup is
     open. z 450: above the page and the nav rail (100), below every
     non-modal popup (>=500), the on-screen keyboard (#osk, 1000) and
     toasts. No blur, no fade (ADR-0119: the cheapest possible paint).
   The status bar stays reachable (CLAUDE.md "Offline-first", ut-docs#1999):
   while the scrim is up it is lifted to 460 -- above the scrim, still
   below every popup. So does Lock: the nav rail is lifted to 460 too,
   dimmed by its own ::after and click-through (pointer-events: none, so
   a tap on it lands on the scrim) -- except the Lock form, which stays
   live (ut-docs#1999/#2873; exit-to-OS lives in Settings, not the rail;
   self-order kiosk pages have no rail). Tap rule: a tap on the scrim does nothing unless the
   topmost popup opts in with data-ut-scrim-dismiss; a popup the cashier
   keeps working beside opts out with data-ut-no-scrim. */
/* An engine whose ::backdrop does not inherit custom properties
   (Chromium < 122, WebKit < 17.4) gets the light fallback in every theme. */
dialog::backdrop { background: var(--ut-scrim, rgba(15, 23, 42, .45)); }
#ut-scrim { position: fixed; inset: 0; z-index: 450; background: var(--ut-scrim); touch-action: none; }
#ut-scrim[hidden] { display: none; }
html.ut-scrim-on .statusbar { z-index: 460; }
/* The docked payment panel opts out (data-ut-no-scrim) so the cashier works
   beside it -- but a popup opened FROM it (its Hold button) must block it
   too: while the scrim is up it drops just under it (review, ut-docs#2873).
   Its own content holds no dialog, so nothing nested is pushed under. */
html.ut-scrim-on #payment-overlay[data-ut-no-scrim] { z-index: 449; }
html.ut-scrim-on .nav { z-index: 460; pointer-events: none; }
html.ut-scrim-on .nav::after { content: ""; position: absolute; inset: 0; background: var(--ut-scrim); pointer-events: none; }
html.ut-scrim-on .nav .session-lock { position: relative; z-index: 1; pointer-events: auto; }

/* ut-docs#298: .nav's background is always var(--brand) — dark in every
   shipped theme (fresh/slate/amber/monarch all set it near-black/navy) — so
   the light-glyph mark (unitill-logo-light.svg, transparent background)
   sits directly on it with no backing plate. */
.logo { display: flex; flex-direction: column; align-items: center; gap: .3rem;
        padding: .3rem .35rem .5rem; }
/* rem, not px: the logo must follow --ui-scale / the fluid baseline like
   everything else (ut-docs#213 — it was the nav's last fixed-px sizing,
   illegibly small on a 10-inch high-density till). */
.logo img { height: 1.6rem; display: block; }
/* App name: visible in the horizontal phone-width bar (space for it there),
   visually-hidden in the rail — SumUp's own reference rail carries no
   brand text either, and the logo mark alone (always on screen) already
   carries the brand at this width. NOT display:none: independent review
   (2026-08-30) caught that hiding it outright leaves the brand name
   announced by nothing in the nav for assistive tech — same
   .visually-hidden pattern this file already uses for basket.html's
   item-count label, just applied unconditionally by default now instead
   of only below 480px. */
.app-name {
  font-size: 1.1rem; font-weight: 700; white-space: nowrap;
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip-path: inset(50%); border: 0;
}
.nav-primary { display: flex; flex-direction: column; gap: .3rem; }
.nav-right { display: flex; flex-direction: column; align-items: stretch; gap: .3rem;
             margin-block-start: auto; padding-block-start: .4rem;
             border-block-start: 1px solid rgba(255,255,255,.15); }
.nav-toggle {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .15rem; background: rgba(255,255,255,.12);
  color: #fff; border: 0; text-decoration: none;
  border-radius: 10px; padding: .5rem; min-height: 48px; min-width: 48px;
  font-weight: 600; cursor: pointer; text-align: center;
}
.nav-toggle:hover, .nav-toggle:active { background: rgba(255,255,255,.22); }
/* ut-docs#3000: instant tap feedback (base.html's shell script). .ut-pressed
   is set synchronously on pointerdown -- a touch :active can lag or never
   show on a quick tap -- and .ut-nav-pending holds the tapped item while its
   boosted page loads. Colour only, no transform/animation, so it is the
   same under Light effects and reduced motion (ADR-0119). */
.nav-toggle.ut-pressed, .nav-toggle.ut-nav-pending { background: rgba(255,255,255,.22); }
/* 2026-09-02 (ut-docs#1423, seen on the tablet next to the icon-size
   report): the two rail items that are