/*!
 * printix-ui 1.0.1 — the shared design tokens and base components of every Printix product (UI-UX D1–D33).
 * Source: printix3dc/UI-UX lib/printix-ui. Do not edit a copy inside a product: change it there and run tools/sync-ui.sh.
 *
 * 1. Tokens: CSS variables, one namespace --px-*, on :where(:root) (zero specificity: a product that defines the
 *    same variable on its own element or on :root wins). They never style anything by themselves.
 * 2. Components: class names px-*, active only inside an element with class "px-ui" (the product's app root,
 *    or the toast / sheet roots that printix-ui.js creates). A page without .px-ui is untouched.
 *    Specificity is two classes (.px-ui .px-btn) so the site theme's element rules (button:hover pink, input borders)
 *    don't win, while any product rule with its own root class + one more class still can.
 * 3. Global, but only on our own class names: .px-i (icons), .px-nudge (the idle pulse), html.px-ui-lock.
 *
 * Rules behind the values: colours D1–D7, type D8–D11, corners D12, inputs D13, sizes D14, spacing D15, shadow D16,
 * focus D17, sheets D18, toasts D19, loading D21, motion D24, centred labels D33. RTL first; LTR works (dir on the root).
 * Light theme only (D7). No emojis: icons come from PrintixUI.icon() (the UI-UX line set).
 * The site's theme CSS kills box-shadow and outline on buttons, so the nudge glow uses filter: drop-shadow.
 */

/* ───────────── 1. tokens ───────────── */

:where(:root) {
	/* colour (D1–D6) */
	--px-sand: #D5B398;          /* main buttons, selected choice */
	--px-on-sand: #F7F7F7;       /* text on sand (never #fff, never dark) */
	--px-sand-soft: #F0E3D8;     /* active tab pill, focus ring, empty-state circle, chart track */
	--px-sand-deep: #8A5A1F;     /* links, small labels, active tab icon, chart highlight */
	--px-link: #8A5A1F;
	--px-ink: #191512;           /* all text */
	--px-muted: #7A7166;         /* secondary text, hints */
	--px-hover: #111111;         /* button hover only, not a text colour */
	--px-white: #FFFFFF;
	--px-bg: #FBFAF7;            /* page background */
	--px-card: #FFFFFF;          /* cards always with the 1px line border */
	--px-line: #E6DFD6;          /* borders, dividers, grid lines */
	--px-ok: #2F7D4F;
	--px-ok-soft: #E5F2EA;
	--px-warn: #B4561F;
	--px-warn-soft: #FBEEE5;
	--px-error: #B42318;
	--px-error-soft: #FDE8E6;
	--px-skel: #F3EFEA;          /* skeleton fill (D21) */
	--px-skel-hi: #FBF8F4;       /* skeleton shimmer */
	--px-backdrop: rgba(25, 21, 18, .45);
	--px-chart-bar: #D5B398;
	--px-chart-hi: #8A5A1F;
	--px-chart-track: #F0E3D8;
	--px-chart-grid: #E6DFD6;

	/* type (D8–D11): Heebo only; 4 weights; 8 sizes; no half pixels */
	--px-font: "Heebo", "Noto Sans Hebrew", Arial, sans-serif;
	--px-fw-body: 400;
	--px-fw-label: 500;
	--px-fw-title: 700;
	--px-fw-big: 800;
	--px-fs-12: 12px;
	--px-fs-14: 14px;
	--px-fs-16: 16px;
	--px-fs-18: 18px;
	--px-fs-22: 22px;
	--px-fs-28: 28px;
	--px-fs-36: 36px;
	--px-fs-56: 56px;
	--px-lh: 1.6;
	--px-lh-title: 1.25;
	--px-lh-big: 1.05;

	/* shape and space (D12–D16) */
	--px-radius: 20px;           /* everything */
	--px-radius-pill: 999px;     /* chips, badges, counters, round icon buttons, avatars */
	--px-radius-check: 8px;      /* checkboxes only */
	--px-sp-4: 4px;
	--px-sp-8: 8px;
	--px-sp-12: 12px;
	--px-sp-16: 16px;
	--px-sp-20: 20px;            /* card padding */
	--px-sp-24: 24px;            /* modal padding, page padding on computers */
	--px-sp-32: 32px;
	--px-sp-48: 48px;
	--px-gap-pair: 10px;         /* the one exception: between paired buttons */
	--px-btn-h: 50px;            /* everything customers and workers tap */
	--px-btn-h-sm: 40px;         /* admin tables and toolbars only (D14) */
	--px-field-h: 50px;
	--px-icon: 20px;
	--px-ring: 0 0 0 3px #F0E3D8;
	--px-shadow-float: 0 12px 32px -8px rgba(25, 21, 18, .22), 0 2px 6px rgba(25, 21, 18, .06);
	--px-shadow-bar: 0 -8px 24px rgba(25, 21, 18, .08); /* the phone bottom bar (as on /pcode) */

	/* motion (D24) */
	--px-fast: .15s;
	--px-base: .3s;
	--px-ease: cubic-bezier(.2, .7, .2, 1);
	--px-glow: rgba(213, 179, 152, .95);

	/* layout of the floating parts (products may override) */
	--px-sheet-w: 460px;         /* the centred box on computers (D18) */
	--px-toast-bottom: 16px;     /* above the safe area (D19); raised automatically over the phone bar */
	--px-z-bar: 900;
	--px-z-sheet: 100000;
	--px-z-toast: 100001;
}

/* ───────────── 2. base (inside .px-ui only, zero specificity) ───────────── */

:where(.px-ui) {
	font-family: var(--px-font);
	color: var(--px-ink);
	font-size: var(--px-fs-16);
	line-height: var(--px-lh);
	-webkit-tap-highlight-color: transparent;
}
:where(.px-ui) :where(.px-btn, .px-card, .px-input, .px-field, .px-chip, .px-banner, .px-sheet, .px-sheet *, .px-bar, .px-pair, .px-skel),
:where(.px-toast, .px-sheet-wrap),
:where(.px-toast, .px-sheet-wrap) *,
:where(.px-toast, .px-sheet-wrap) *::before,
:where(.px-toast, .px-sheet-wrap) *::after {
	box-sizing: border-box;
}

/* icons: PrintixUI.icon() → <svg class="px-i"> (24 grid, stroke 1.75, currentColor; sizes 16 / 20 / 24) */
:where(.px-i) {
	display: inline-block;
	width: var(--px-icon);
	height: var(--px-icon);
	flex: none;
	vertical-align: middle;
}
:where(.px-i--16) { width: 16px; height: 16px; }
:where(.px-i--24) { width: 24px; height: 24px; }

/* ───────────── buttons (50px, corners 20, sand main, white secondary, hover #111, label centred) ───────────── */

.px-ui .px-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--px-sp-8);
	height: var(--px-btn-h);
	min-height: var(--px-btn-h);
	margin: 0;
	padding: 0 var(--px-sp-24);
	border: 1px solid var(--px-sand);
	border-radius: var(--px-radius);
	background: var(--px-sand);
	color: var(--px-on-sand);
	font-family: var(--px-font);
	font-size: var(--px-fs-16);
	font-weight: var(--px-fw-label);
	line-height: 1;
	letter-spacing: normal;
	text-align: center;
	text-decoration: none;
	text-transform: none;
	white-space: nowrap;
	vertical-align: middle;
	cursor: pointer;
	outline: none;
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
	transition: background-color var(--px-base) ease, color var(--px-base) ease, border-color var(--px-base) ease, transform var(--px-fast) var(--px-ease);
}
.px-ui .px-btn:focus,
.px-ui .px-btn:focus-visible,
.px-ui .px-btn:visited {
	outline: none;
	background: var(--px-sand);
	border-color: var(--px-sand);
	color: var(--px-on-sand);
}
.px-ui .px-btn .px-i { width: var(--px-icon); height: var(--px-icon); }

/* secondary: white with a sand border and ink text */
.px-ui .px-btn--sec,
.px-ui .px-btn--sec:focus,
.px-ui .px-btn--sec:focus-visible,
.px-ui .px-btn--sec:visited {
	background: var(--px-white);
	border-color: var(--px-sand);
	color: var(--px-ink);
}
/* text button: a link-looking action that still has a 50px tap area */
.px-ui .px-btn--text,
.px-ui .px-btn--text:focus,
.px-ui .px-btn--text:focus-visible,
.px-ui .px-btn--text:visited {
	padding: 0 var(--px-sp-8);
	background: transparent;
	border-color: transparent;
	color: var(--px-link);
}
/* choice buttons (D2 rules): unselected white, selected sand */
.px-ui .px-btn[aria-pressed="true"],
.px-ui .px-btn--sec[aria-pressed="true"] {
	background: var(--px-sand);
	border-color: var(--px-sand);
	color: var(--px-on-sand);
}
.px-ui .px-btn--sm { height: var(--px-btn-h-sm); min-height: var(--px-btn-h-sm); padding: 0 var(--px-sp-16); font-size: var(--px-fs-14); }
.px-ui .px-btn--block { display: flex; width: 100%; }
.px-ui .px-btn--icon { width: var(--px-btn-h); padding: 0; }
.px-ui .px-btn--icon.px-btn--sm { width: var(--px-btn-h-sm); }
.px-ui .px-btn:active { transform: scale(.98); }

/* hover: black with white text (0.3s) — only with a mouse; on touch black only while pressed (no sticky hover) */
@media (hover: hover) {
	.px-ui .px-btn:hover {
		background: var(--px-hover);
		border-color: var(--px-hover);
		color: #FFFFFF;
	}
	.px-ui .px-btn--text:hover {
		background: transparent;
		border-color: transparent;
		color: var(--px-hover);
	}
}
@media (hover: none) {
	.px-ui .px-btn:hover { background: var(--px-sand); border-color: var(--px-sand); color: var(--px-on-sand); }
	.px-ui .px-btn--sec:hover:not([aria-pressed="true"]) { background: var(--px-white); border-color: var(--px-sand); color: var(--px-ink); }
	.px-ui .px-btn--text:hover { background: transparent; border-color: transparent; color: var(--px-link); }
	.px-ui .px-btn:active:not(:disabled) { background: var(--px-hover); border-color: var(--px-hover); color: #FFFFFF; }
	.px-ui .px-btn--text:active:not(:disabled) { background: transparent; border-color: transparent; color: var(--px-hover); }
}
.px-ui .px-btn:disabled,
.px-ui .px-btn[aria-disabled="true"] {
	opacity: .5;
	cursor: default;
	pointer-events: none;
}
/* busy (D21): an 18px spinner in the button's own text colour before the short label; can't be tapped twice */
.px-ui .px-btn.is-busy { pointer-events: none; }
.px-ui .px-btn.is-busy::before {
	content: "";
	width: 18px;
	height: 18px;
	flex: none;
	border: 2px solid currentColor;
	border-top-color: transparent;
	border-radius: var(--px-radius-pill);
	animation: px-ui-spin .7s linear infinite;
}
.px-ui .px-btn.is-busy .px-i { display: none; }

/* pairs: secondary ⅓ first in the DOM (right in RTL), main ⅔, gap 10 — on phone and computer */
.px-ui .px-pair {
	display: grid;
	grid-template-columns: 1fr 2fr;
	gap: var(--px-gap-pair);
	width: 100%;
}
.px-ui .px-pair > .px-btn { width: 100%; padding: 0 var(--px-sp-12); }
.px-ui .px-pair > .px-btn:only-child { grid-column: 1 / -1; }

/* ───────────── cards (white, 1px line, corners 20, padding 20, no shadow; text centred D33) ───────────── */

.px-ui .px-card {
	background: var(--px-card);
	border: 1px solid var(--px-line);
	border-radius: var(--px-radius);
	padding: var(--px-sp-20);
	box-shadow: none;
	text-align: center;
}
.px-ui .px-card--start { text-align: start; }
.px-ui .px-card-title { margin: 0 0 var(--px-sp-8); font-size: var(--px-fs-22); font-weight: var(--px-fw-title); line-height: var(--px-lh-title); color: var(--px-ink); }
.px-ui .px-card-text { margin: 0; font-size: var(--px-fs-16); color: var(--px-muted); }
.px-ui .px-muted { color: var(--px-muted); }

/* ───────────── inputs (D13: 50px, white, 1px line, corners 20, text 16; focus sand + 3px soft ring) ───────────── */

.px-ui .px-field {
	display: flex;
	flex-direction: column;
	gap: var(--px-sp-4);
	text-align: start;
}
.px-ui .px-label { font-size: var(--px-fs-14); font-weight: var(--px-fw-label); color: var(--px-ink); }
.px-ui .px-hint { font-size: var(--px-fs-14); color: var(--px-muted); }
.px-ui .px-err { display: flex; align-items: center; gap: var(--px-sp-4); font-size: var(--px-fs-14); color: var(--px-error); }
.px-ui .px-err .px-i { width: 16px; height: 16px; }
.px-ui .px-input {
	display: block;
	width: 100%;
	height: var(--px-field-h);
	min-height: var(--px-field-h);
	margin: 0;
	padding: 0 var(--px-sp-16);
	border: 1px solid var(--px-line);
	border-radius: var(--px-radius);
	background: var(--px-white);
	color: var(--px-ink);
	font-family: var(--px-font);
	font-size: var(--px-fs-16);
	font-weight: var(--px-fw-body);
	line-height: normal;
	outline: none;
	box-shadow: none;
	transition: border-color var(--px-fast) var(--px-ease), box-shadow var(--px-fast) var(--px-ease);
}
.px-ui textarea.px-input {
	height: auto;
	min-height: 100px;
	padding: var(--px-sp-12) var(--px-sp-16);
	line-height: var(--px-lh);
	resize: vertical;
}
.px-ui .px-input::placeholder { color: var(--px-muted); opacity: 1; }
.px-ui .px-input:focus {
	outline: none;
	border-color: var(--px-sand);
	box-shadow: var(--px-ring);
}
.px-ui .px-input:disabled { background: var(--px-bg); color: var(--px-muted); }
.px-ui .px-field.is-error .px-input,
.px-ui .px-input[aria-invalid="true"] { border-color: var(--px-error); }
.px-ui .px-field.is-error .px-input:focus,
.px-ui .px-input[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px var(--px-error-soft); }
.px-ui .px-input--sm { height: var(--px-btn-h-sm); min-height: var(--px-btn-h-sm); font-size: var(--px-fs-14); }

/* ───────────── chips (pills: labels, badges, status tags) ───────────── */

.px-ui .px-chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--px-sp-4);
	height: 28px;
	margin: 0;
	padding: 0 var(--px-sp-12);
	border: 1px solid transparent;
	border-radius: var(--px-radius-pill);
	background: var(--px-sand-soft);
	color: var(--px-ink);
	font-family: var(--px-font);
	font-size: var(--px-fs-12);
	font-weight: var(--px-fw-label);
	line-height: 1;
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
}
.px-ui .px-chip .px-i { width: 16px; height: 16px; }
.px-ui .px-chip--line { background: var(--px-white); border-color: var(--px-line); color: var(--px-muted); }
.px-ui .px-chip--ok { background: var(--px-ok-soft); color: var(--px-ok); }
.px-ui .px-chip--warn { background: var(--px-warn-soft); color: var(--px-warn); }
.px-ui .px-chip--error { background: var(--px-error-soft); color: var(--px-error); }
.px-ui button.px-chip { cursor: pointer; outline: none; box-shadow: none; transition: background-color var(--px-fast) var(--px-ease), color var(--px-fast) var(--px-ease); }
.px-ui button.px-chip:hover,
.px-ui button.px-chip:focus { background: var(--px-sand-soft); color: var(--px-ink); border-color: transparent; }
.px-ui button.px-chip[aria-pressed="true"],
.px-ui button.px-chip[aria-pressed="true"]:hover,
.px-ui button.px-chip[aria-pressed="true"]:focus { background: var(--px-sand); border-color: var(--px-sand); color: var(--px-on-sand); }

/* ───────────── status banner (D19: page problems that need action, never a toast) ───────────── */

.px-ui .px-banner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--px-sp-8);
	padding: var(--px-sp-12) var(--px-sp-16);
	border-radius: var(--px-radius);
	font-size: var(--px-fs-14);
	font-weight: var(--px-fw-label);
	text-align: center;
}
.px-ui .px-banner--ok { background: var(--px-ok-soft); color: var(--px-ok); }
.px-ui .px-banner--warn { background: var(--px-warn-soft); color: var(--px-warn); }
.px-ui .px-banner--error { background: var(--px-error-soft); color: var(--px-error); }

/* ───────────── skeleton (D21) ───────────── */

.px-ui .px-skel {
	display: block;
	min-height: 16px;
	border-radius: var(--px-radius);
	background: linear-gradient(90deg, var(--px-skel) 25%, var(--px-skel-hi) 50%, var(--px-skel) 75%);
	background-size: 200% 100%;
	animation: px-ui-shimmer 1.3s linear infinite;
}
.px-ui .px-skel--line { height: 12px; min-height: 0; border-radius: var(--px-radius-pill); }

/* ───────────── toast (D19: ink, bottom centre, 3s, one at a time) — PrintixUI.toast() ───────────── */

.px-toast.px-ui {
	position: fixed;
	left: 50%;
	bottom: calc(var(--px-toast-bottom) + env(safe-area-inset-bottom, 0px));
	z-index: var(--px-z-toast);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--px-sp-8);
	width: max-content;
	max-width: min(420px, calc(100vw - 32px));
	margin: 0;
	padding: var(--px-sp-12) var(--px-sp-16);
	border-radius: var(--px-radius);
	background: var(--px-ink);
	color: var(--px-on-sand);
	font-family: var(--px-font);
	font-size: var(--px-fs-14);
	font-weight: var(--px-fw-label);
	line-height: 1.4;
	text-align: center;
	box-shadow: var(--px-shadow-float);
	opacity: 0;
	transform: translate(-50%, 12px);
	pointer-events: none;
	transition: opacity var(--px-base) var(--px-ease), transform var(--px-base) var(--px-ease);
}
.px-toast.px-ui.is-on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.px-toast.px-ui.is-bad { background: var(--px-error); }
.px-toast.px-ui .px-toast-i { display: inline-flex; flex: none; }
.px-toast.px-ui .px-i { width: 20px; height: 20px; color: var(--px-sand); }
.px-toast.px-ui.is-bad .px-i { color: var(--px-on-sand); }
.px-toast.px-ui .px-toast-m { min-width: 0; overflow-wrap: anywhere; }
.px-ui .px-toast-act,
.px-ui .px-toast-act:hover,
.px-ui .px-toast-act:focus {
	flex: none;
	height: auto;
	margin: 0;
	margin-inline-start: var(--px-sp-4);
	padding: 0 var(--px-sp-4);
	border: 0;
	background: none;
	color: var(--px-sand);
	font: inherit;
	font-weight: var(--px-fw-title);
	cursor: pointer;
	outline: none;
	box-shadow: none;
}
.px-toast.px-ui.is-bad .px-toast-act { color: var(--px-on-sand); text-decoration: underline; }

/* ───────────── sheet / modal (D18: bottom sheet on phones, centred box on computers) — PrintixUI.sheet() ───────────── */

.px-sheet-wrap.px-ui {
	position: fixed;
	inset: 0;
	z-index: var(--px-z-sheet);
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: var(--px-sp-16);
	background: var(--px-backdrop);
	animation: px-ui-fade var(--px-fast) var(--px-ease);
}
.px-sheet-wrap.px-ui.is-out { opacity: 0; pointer-events: none; transition: opacity var(--px-fast) ease; }
.px-ui .px-sheet {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: var(--px-sheet-w);
	max-height: calc(100vh - 32px);
	overflow: hidden;
	margin: 0;
	padding: 0;
	border-radius: var(--px-radius);
	background: var(--px-white);
	color: var(--px-ink);
	text-align: center;
	box-shadow: var(--px-shadow-float);
	animation: px-ui-rise var(--px-base) var(--px-ease);
}
.px-ui .px-sheet--wide { max-width: 620px; }
.px-ui .px-sheet-h {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	min-height: 40px;
	margin: 0;
	padding: var(--px-sp-24) 64px var(--px-sp-12);
}
.px-ui .px-sheet-h:empty { display: none; }
.px-ui .px-sheet-title {
	margin: 0;
	padding: 0;
	font-family: var(--px-font);
	font-size: var(--px-fs-22);
	font-weight: var(--px-fw-title);
	line-height: var(--px-lh-title);
	color: var(--px-ink);
	text-align: center;
}
.px-ui .px-sheet-x,
.px-ui .px-sheet-x:focus {
	position: absolute;
	top: 20px;
	inset-inline-end: 20px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin: 0;
	padding: 0;
	border: 1px solid var(--px-line);
	border-radius: var(--px-radius-pill);
	background: var(--px-white);
	color: var(--px-ink);
	cursor: pointer;
	outline: none;
	box-shadow: none;
	transition: background-color var(--px-base) ease, color var(--px-base) ease, border-color var(--px-base) ease;
}
@media (hover: hover) {
	.px-ui .px-sheet-x:hover { background: var(--px-hover); border-color: var(--px-hover); color: #FFFFFF; }
}
@media (hover: none) {
	.px-ui .px-sheet-x:hover { background: var(--px-white); border-color: var(--px-line); color: var(--px-ink); }
}
.px-ui .px-sheet-x .px-i { width: 16px; height: 16px; }
.px-ui .px-sheet-b {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 0 var(--px-sp-24) var(--px-sp-24);
	font-size: var(--px-fs-16);
}
.px-ui .px-sheet-h:empty + .px-sheet-b { padding-top: var(--px-sp-24); }
.px-ui .px-sheet-text { margin: 0 0 var(--px-sp-12); color: var(--px-muted); font-size: var(--px-fs-16); }
.px-ui .px-sheet-text:last-child { margin-bottom: 0; }
.px-ui .px-sheet-f { flex: none; padding: var(--px-sp-12) var(--px-sp-24) var(--px-sp-24); }
.px-ui .px-sheet-b:has(+ .px-sheet-f) { padding-bottom: var(--px-sp-8); }
.px-ui .px-sheet::before { content: none; }
html.px-ui-lock,
html.px-ui-lock body { overflow: hidden; }

@media (max-width: 640px) {
	.px-sheet-wrap.px-ui { align-items: flex-end; padding: 0; }
	.px-ui .px-sheet,
	.px-ui .px-sheet--wide {
		max-width: none;
		max-height: 92vh;
		border-radius: var(--px-radius) var(--px-radius) 0 0;
		animation-name: px-ui-up;
	}
	/* grab handle */
	.px-ui .px-sheet::before {
		content: "";
		flex: none;
		width: 40px;
		height: 4px;
		margin: var(--px-sp-8) auto 0;
		border-radius: var(--px-radius-pill);
		background: var(--px-line);
	}
	.px-ui .px-sheet-h { padding-top: var(--px-sp-16); }
	.px-ui .px-sheet-x,
	.px-ui .px-sheet-x:focus { top: 16px; inset-inline-end: 16px; }
	.px-ui .px-sheet-b:last-child,
	.px-ui .px-sheet-f { padding-bottom: calc(var(--px-sp-24) + env(safe-area-inset-bottom, 0px)); }
}

/* ───────────── nudge: the idle pulse on the continue button — PrintixUI.nudge() / .nudgeIdle() ───────────── */
/* Same as /pcode, /plink, /pwork, /pmember, /pmarketing (Tomer 15.10): scale + sand glow, plays twice, then stops.
   The glow is a filter (the site's CSS kills box-shadow on buttons). Reduced motion: no movement, a still glow. */

@keyframes px-ui-nudge {
	0%, 100% { transform: none; filter: none; }
	30% { transform: scale(1.05); filter: drop-shadow(0 0 10px var(--px-glow)); }
	60% { transform: scale(.98); filter: drop-shadow(0 0 4px rgba(213, 179, 152, .5)); }
}
.px-nudge { animation: px-ui-nudge 1s ease 2; }

/* ───────────── phone first screen (≤640): the fixed bottom bar, keyboard, short lines ───────────── */
/* .px-bar      the step buttons (secondary ⅓ first, main ⅔). On phones it is a fixed bar at the bottom (as /pcode .wbNav).
                .px-bar--inline keeps it in the page (e.g. on a payment or done step).
   .px-kb-open  set on the root by PrintixUI.watchKeyboard(): typing on a phone hides the bar (and the site's
                help / accessibility bubbles), it comes back when the keyboard closes.
   --px-bar-left / --px-bar-right  side padding of the bar (76 / 72 when the site's "?" and accessibility buttons share the line).
   .px-lead-lg / .px-lead-sm       the long / short version of a sentence (short one on phones).
   .px-hide-phone / .px-only-phone */

.px-ui .px-bar {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--px-gap-pair);
}
.px-ui .px-bar > .px-btn { flex: 2 1 0; min-width: 0; }
.px-ui .px-bar > .px-btn--sec,
.px-ui .px-bar > .px-btn--text { flex: 1 1 0; }
.px-ui .px-lead-sm,
.px-ui .px-only-phone { display: none; }

@media (max-width: 640px) {
	.px-ui .px-bar:not(.px-bar--inline) {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: var(--px-z-bar);
		margin: 0;
		padding: var(--px-sp-12) var(--px-bar-right, 16px) max(17px, env(safe-area-inset-bottom, 0px)) var(--px-bar-left, 16px);
		background: var(--px-white);
		border: 0;
		border-top: 1px solid var(--px-line);
		box-shadow: var(--px-shadow-bar);
	}
	.px-ui .px-bar:not(.px-bar--inline) > .px-btn { padding: 0 10px; }
	.px-ui:has(.px-bar:not(.px-bar--inline)),
	.px-ui.px-with-bar { padding-bottom: 110px; }
	body:has(.px-ui .px-bar:not(.px-bar--inline)) { --px-toast-bottom: 96px; }
	.px-kb-open .px-bar { display: none !important; }
	body:has(.px-kb-open .px-bar:not(.px-bar--inline)) { --px-toast-bottom: 16px; }
	body:has(.px-kb-open) #pxh,
	body:has(.px-kb-open) #ea11y-root { display: none !important; }
	body:has(.px-ui .px-bar:not(.px-bar--inline)) #pxh { bottom: 18px !important; right: 16px !important; left: auto !important; }
	body:has(.px-ui .px-bar:not(.px-bar--inline)) #pxh .pxh-tip { display: none !important; }
	body:has(.px-ui .px-bar:not(.px-bar--inline)) #pxst-cookie { bottom: 90px !important; }
	.px-ui .px-lead-lg,
	.px-ui .px-hide-phone { display: none !important; }
	.px-ui .px-lead-sm { display: inline; }
	.px-ui .px-only-phone { display: revert; }
}

/* ───────────── motion ───────────── */

@keyframes px-ui-fade { from { opacity: 0; } }
@keyframes px-ui-rise { from { opacity: 0; transform: translateY(12px); } }
@keyframes px-ui-up { from { transform: translateY(40px); opacity: 0; } }
@keyframes px-ui-spin { to { transform: rotate(360deg); } }
@keyframes px-ui-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* reduced motion (D24): every movement becomes an instant change; colour changes stay */
@media (prefers-reduced-motion: reduce) {
	.px-ui .px-btn { transition: background-color var(--px-base) ease, color var(--px-base) ease, border-color var(--px-base) ease; }
	.px-ui .px-btn:active { transform: none; }
	.px-toast.px-ui,
	.px-sheet-wrap.px-ui,
	.px-ui .px-sheet { transition: none; animation: none; }
	.px-toast.px-ui { transform: translate(-50%, 0); }
	.px-ui .px-skel { animation: none; }
	.px-ui .px-btn.is-busy::before { animation: none; border-top-color: currentColor; opacity: .6; }
	.px-nudge { animation: none !important; filter: drop-shadow(0 0 6px var(--px-glow)); }
}