/**
 * W2W Transfer Portal — design tokens and components.
 *
 * One stylesheet. Every colour, radius and spacing value used anywhere in
 * this plugin's templates is a custom property defined here — a hard-coded
 * hex or px value in a template is the defect the sabotage register checks
 * for (see tests/bin/sabotage-register.php, area "design").
 *
 * Direction: "Orbit Enterprise" (navy, no gradients, no drop shadows, cards
 * use a border only) — see docs/DESIGN-AUDIT.md, matching the wizsp-enterprise
 * theme this plugin's admin screens sit alongside. One change from the source
 * package, deliberate:
 *
 *   `--w2w-muted` is darker than the source's #94A3B8. That value reads at
 *   roughly 2.6:1 against white — a fifth of the way to the 4.5:1 AA floor
 *   for body text. #64748B clears 4.5:1 and is what every token pair
 *   actually used on a screen is checked against.
 *
 * Inter is self-hosted from assets/fonts/ (latin + latin-ext, weights 400,
 * 600, 700, 800) rather than loaded from Google Fonts — the source package's
 * own choice of typeface, without the external request. The system-font
 * fallback stack still runs first in the browser's own resolution only if a
 * weight fails to load; every screen's declared font-family lists Inter
 * first, matching the theme this plugin sits beside instead of visibly
 * standing apart in a different typeface. See DECISIONS #82.
 *
 * Checked directly against the client's own "WIZSP Design Language"
 * reference (colours, type scale, spacing, radii, components, hard rules)
 * in DECISIONS #83: every token here matched it except `--w2w-warning`,
 * which had drifted to an older amber (#A5650B) and is now #B45309 —
 * the reference's own value, and the live theme's.
 *
 * Scoped entirely under .w2w-ui — nothing here touches an element outside
 * it, because this stylesheet loads on pages this plugin does not own.
 * One deliberate, narrow exception: the small block of `body.w2w-shell`
 * rules in the app-shell section, which hide WordPress's own left admin
 * menu — necessarily reaching outside `.w2w-ui`, because what they hide
 * is WordPress's own chrome. `body.w2w-shell` is added by this plugin
 * only on this plugin's own registered admin screens (Support\Assets),
 * so the scoping is exactly as narrow as `.w2w-ui` is everywhere else in
 * this file — just keyed off a body class instead of a wrapper element.
 */

/* Paths are relative to this file's own URL, so they resolve under this
 * plugin's own directory wherever it is installed — never a third-party
 * origin. font-display: swap means unstyled text is never blocked on the
 * download; a slow connection sees the fallback stack first, then Inter. */
@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/inter-400-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/inter-400-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("../fonts/inter-600-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("../fonts/inter-600-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/inter-700-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/inter-700-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 800;
	font-display: swap;
	src: url("../fonts/inter-800-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 800;
	font-display: swap;
	src: url("../fonts/inter-800-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

.w2w-ui {
	/* ---------------------------------------------------------- colour */
	--w2w-primary: #002366;
	--w2w-primary-hover: #001a4d;
	--w2w-primary-active: #001338;
	--w2w-primary-tint: #e6e9f0;

	--w2w-text: #0f172a;
	--w2w-text-secondary: #475569;
	--w2w-muted: #64748b; /* AA-safe (~4.75:1 on white). Never the lighter #94a3b8 — see file header. */

	--w2w-border: #e2e8f0;
	--w2w-border-strong: #cbd5e1; /* Input outlines: a field must read as a field, not a faint box. */
	--w2w-page-bg: #f8fafc;
	--w2w-surface: #ffffff;

	--w2w-success: #15803d;
	--w2w-success-bg: #e3f3e9;
	--w2w-success-border: #bfe2cc;

	--w2w-warning: #b45309;
	--w2w-warning-bg: #fdf1e0;
	--w2w-warning-border: #f3d9a5;

	--w2w-danger: #b91c1c;
	--w2w-danger-bg: #fdeaea;
	--w2w-danger-border: #f3c6c6;

	--w2w-focus-ring: #1d4ed8;

	/* --------------------------------------------------------- spacing */
	--w2w-space-1: 4px;
	--w2w-space-2: 8px;
	--w2w-space-3: 12px;
	--w2w-space-4: 16px;
	--w2w-space-5: 20px;
	--w2w-space-6: 24px;
	--w2w-space-8: 32px;
	--w2w-space-10: 40px;

	/* ----------------------------------------------------------- radii */
	--w2w-radius-sm: 6px;
	--w2w-radius-md: 8px;
	--w2w-radius-lg: 12px;
	--w2w-radius-pill: 999px;

	/* ------------------------------------------------------ typography */
	--w2w-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--w2w-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

	--w2w-text-xs: 12px;
	--w2w-text-sm: 14px;
	--w2w-text-base: 16px;
	--w2w-text-lg: 18px;
	--w2w-text-xl: 22px;
	--w2w-text-2xl: 28px;

	/* Minimum touch target per the mobile requirement, and the input font
	 * size that stops iOS Safari zooming the viewport on focus. */
	--w2w-touch: 44px;
	--w2w-input-font: 16px;

	font-family: var(--w2w-font);
	color: var(--w2w-text);
	line-height: 1.55;
	font-size: var(--w2w-text-base);
}

.w2w-ui *,
.w2w-ui *::before,
.w2w-ui *::after {
	box-sizing: border-box;
}

.w2w-ui :focus-visible {
	outline: 3px solid var(--w2w-focus-ring);
	outline-offset: 2px;
	border-radius: var(--w2w-radius-sm);
}

@media (prefers-reduced-motion: reduce) {
	.w2w-ui * {
		transition: none !important;
		animation: none !important;
	}
}

/* ============================================================= headings */

.w2w-ui h1 {
	font-size: var(--w2w-text-2xl);
	font-weight: 800;
	margin: 0 0 var(--w2w-space-2);
	color: var(--w2w-text);
}

.w2w-ui h2 {
	font-size: var(--w2w-text-xl);
	font-weight: 700;
	margin: var(--w2w-space-8) 0 var(--w2w-space-3);
	color: var(--w2w-text);
}

.w2w-ui h3 {
	font-size: var(--w2w-text-lg);
	font-weight: 700;
	margin: 0 0 var(--w2w-space-2);
	color: var(--w2w-text);
}

.w2w-ui p {
	margin: 0 0 var(--w2w-space-3);
}

.w2w-ui .description,
.w2w-ui .w2w-hint {
	font-size: var(--w2w-text-sm);
	color: var(--w2w-muted);
}

.w2w-ui code {
	font-family: var(--w2w-font-mono);
	font-size: 0.9em;
	background: var(--w2w-primary-tint);
	color: var(--w2w-primary);
	padding: 1px 6px;
	border-radius: var(--w2w-radius-sm);
}

/* ================================================================ forms */

.w2w-ui fieldset {
	border: 1px solid var(--w2w-border);
	border-radius: var(--w2w-radius-lg);
	padding: var(--w2w-space-5);
	margin: 0 0 var(--w2w-space-5);
	min-width: 0;
}

.w2w-ui fieldset fieldset {
	margin-top: var(--w2w-space-4);
	margin-bottom: var(--w2w-space-4);
}

.w2w-ui legend {
	font-size: var(--w2w-text-lg);
	font-weight: 700;
	padding: 0 var(--w2w-space-2);
	color: var(--w2w-text);
}

.w2w-ui fieldset fieldset > legend {
	font-size: var(--w2w-text-base);
}

.w2w-ui label {
	display: block;
	font-size: var(--w2w-text-sm);
	font-weight: 600;
	color: var(--w2w-text-secondary);
	margin: var(--w2w-space-4) 0 var(--w2w-space-1);
}

.w2w-ui label:first-child {
	margin-top: 0;
}

.w2w-ui input[type="text"],
.w2w-ui input[type="email"],
.w2w-ui input[type="tel"],
.w2w-ui input[type="number"],
.w2w-ui input[type="date"],
.w2w-ui select,
.w2w-ui textarea {
	display: block;
	width: 100%;
	min-height: var(--w2w-touch);
	padding: var(--w2w-space-3) var(--w2w-space-3);
	font-family: inherit;
	font-size: var(--w2w-input-font);
	color: var(--w2w-text);
	background: var(--w2w-surface);
	border: 1px solid var(--w2w-border);
	border-radius: var(--w2w-radius-md);
}

.w2w-ui textarea {
	min-height: calc(var(--w2w-touch) * 2);
	resize: vertical;
}

.w2w-ui input[type="text"]:focus,
.w2w-ui input[type="email"]:focus,
.w2w-ui input[type="tel"]:focus,
.w2w-ui input[type="number"]:focus,
.w2w-ui input[type="date"]:focus,
.w2w-ui select:focus,
.w2w-ui textarea:focus {
	border-color: var(--w2w-primary);
}

/* Checkbox and radio rows: the whole row is the target, not the 16px box,
 * so the label itself carries the 44px minimum. */
.w2w-ui label:has(> input[type="checkbox"]),
.w2w-ui label:has(> input[type="radio"]) {
	display: flex;
	align-items: flex-start;
	gap: var(--w2w-space-3);
	font-weight: 400;
	color: var(--w2w-text);
	min-height: var(--w2w-touch);
	padding: var(--w2w-space-2) 0;
	cursor: pointer;
}

.w2w-ui input[type="checkbox"],
.w2w-ui input[type="radio"] {
	flex-shrink: 0;
	width: 22px;
	height: 22px;
	margin-top: 2px;
	accent-color: var(--w2w-primary);
}

.w2w-ui .w2w-hint {
	margin: var(--w2w-space-1) 0 0;
}

/* -------------------------------------------------------------- buttons */

.w2w-ui button[type="submit"],
.w2w-ui .w2w-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--w2w-touch);
	padding: var(--w2w-space-3) var(--w2w-space-6);
	font-family: inherit;
	font-size: var(--w2w-text-base);
	font-weight: 700;
	color: #ffffff;
	background: var(--w2w-primary);
	border: none;
	border-radius: var(--w2w-radius-md);
	text-decoration: none;
	cursor: pointer;
}

.w2w-ui button[type="submit"]:hover,
.w2w-ui .w2w-button:hover {
	background: var(--w2w-primary-hover);
}

.w2w-ui button[type="submit"]:active,
.w2w-ui .w2w-button:active {
	background: var(--w2w-primary-active);
}

/* -------------------------------------------------------- notice blocks */

.w2w-ui .w2w-errors,
.w2w-ui .w2w-notices {
	border-radius: var(--w2w-radius-md);
	padding: var(--w2w-space-4);
	margin: 0 0 var(--w2w-space-5);
	font-size: var(--w2w-text-sm);
}

.w2w-ui .w2w-errors {
	background: var(--w2w-danger-bg);
	border: 1px solid var(--w2w-danger-border);
	color: var(--w2w-danger);
}

.w2w-ui .w2w-notices {
	background: var(--w2w-primary-tint);
	border: 1px solid var(--w2w-border);
	color: var(--w2w-text);
}

.w2w-ui .w2w-errors p,
.w2w-ui .w2w-errors li,
.w2w-ui .w2w-notices p {
	margin: 0 0 var(--w2w-space-1);
}

.w2w-ui .w2w-errors p:last-child,
.w2w-ui .w2w-errors li:last-child,
.w2w-ui .w2w-notices p:last-child {
	margin-bottom: 0;
}

.w2w-ui .w2w-intro {
	color: var(--w2w-text-secondary);
}

.w2w-ui .w2w-rules {
	background: var(--w2w-page-bg);
	border: 1px solid var(--w2w-border);
	border-radius: var(--w2w-radius-md);
	padding: var(--w2w-space-4) var(--w2w-space-4) var(--w2w-space-4) var(--w2w-space-6);
	margin: 0 0 var(--w2w-space-5);
}

/* ---------------------------------------------------------------- tables */

.w2w-ui .w2w-table-wrap {
	overflow-x: auto;
	margin: 0 0 var(--w2w-space-4);
}

.w2w-ui table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--w2w-text-sm);
}

/*
 * `.w2w-table-wrap` on the booking form's own pricing breakdown is a
 * native `<details>` element, collapsed by default — the figures a
 * rider needs are one tap away, not forced onto the page before they
 * have even picked an option. No script: `<details>` is collapsible on
 * its own, the same reason Admin\Shell's sidebar groups use it.
 */
.w2w-ui details.w2w-table-wrap summary {
	display: flex;
	align-items: center;
	gap: var(--w2w-space-2);
	font-size: var(--w2w-text-xs);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--w2w-muted);
	padding: var(--w2w-space-2) 0;
	cursor: pointer;
	list-style: none;
}

.w2w-ui details.w2w-table-wrap summary::-webkit-details-marker {
	display: none;
}

.w2w-ui details.w2w-table-wrap summary::before {
	content: "\276F";
	font-size: 9px;
	transition: transform 0.15s ease;
}

.w2w-ui details.w2w-table-wrap[open] summary::before {
	transform: rotate(90deg);
}

.w2w-ui th,
.w2w-ui td {
	text-align: left;
	padding: var(--w2w-space-2) var(--w2w-space-3);
	border-bottom: 1px solid var(--w2w-border);
	vertical-align: top;
}

.w2w-ui thead th {
	font-size: var(--w2w-text-xs);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--w2w-muted);
	white-space: nowrap;
}

/* ------------------------------------------------------- vehicle choice step */

.w2w-flow .w2w-vehicle-choice-options {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: var(--w2w-space-4);
	max-width: 880px;
}

.w2w-ui.w2w-flow .w2w-choice {
	display: grid;
	gap: var(--w2w-space-2);
	padding: var(--w2w-space-6);
	background: var(--w2w-surface);
	border: 1px solid var(--w2w-border);
	border-radius: var(--w2w-radius-lg);
	color: var(--w2w-text);
	text-decoration: none;
}

.w2w-ui.w2w-flow .w2w-choice:hover {
	border-color: var(--w2w-primary);
	background: var(--w2w-primary-tint);
}

.w2w-flow .w2w-choice__title {
	font-size: var(--w2w-text-lg);
	font-weight: 700;
	color: var(--w2w-primary);
}

.w2w-flow .w2w-choice__title::after {
	content: " \2192";
}

.w2w-flow .w2w-choice__text {
	font-size: var(--w2w-text-sm);
	color: var(--w2w-text-secondary);
}

/* -------------------------------------------- vehicle, consent, status pages */

.w2w-ui.w2w-flow.w2w-flow--narrow {
	max-width: 720px;
}

.w2w-ui.w2w-page {
	margin: 0;
	min-height: 100vh;
	background: var(--w2w-page-bg);
	padding: var(--w2w-space-8) var(--w2w-space-4);
}

.w2w-flow .w2w-flow__aside--static {
	display: block;
}

.w2w-flow .w2w-summary__docs {
	margin-top: var(--w2w-space-5);
	padding-top: var(--w2w-space-5);
	border-top: 1px solid var(--w2w-border);
}

.w2w-flow .w2w-step__nav .w2w-hint {
	flex: 1 1 16em;
	margin: 0;
}

.w2w-ui.w2w-flow .w2w-status-lookup {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: var(--w2w-space-3);
	padding: var(--w2w-space-5);
}

.w2w-flow .w2w-status-lookup .w2w-field {
	flex: 1 1 240px;
}

.w2w-flow .w2w-status-facts {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--w2w-space-2);
}

.w2w-flow .w2w-status-checklist,
.w2w-flow .w2w-status-accepted-clause {
	border-top: 1px solid var(--w2w-border);
	margin-top: var(--w2w-space-5);
	padding-top: var(--w2w-space-5);
}

.w2w-flow .w2w-status-checklist h2 {
	font-size: var(--w2w-text-base);
	margin: 0 0 var(--w2w-space-2);
}

/* A finished action: booked, registered, or nothing open to do. */
.w2w-flow .w2w-result {
	max-width: 720px;
}

.w2w-flow .w2w-result p:last-child {
	margin-bottom: 0;
}

.w2w-flow .w2w-result--success {
	background: var(--w2w-success-bg);
	border-color: var(--w2w-success-border);
}

.w2w-flow .w2w-result__title {
	font-size: var(--w2w-text-lg);
	font-weight: 700;
	margin: 0 0 var(--w2w-space-3);
}

.w2w-flow .w2w-result--success .w2w-result__title::before {
	content: "\2713";
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	margin-right: var(--w2w-space-2);
	border-radius: var(--w2w-radius-pill);
	background: var(--w2w-success);
	color: var(--w2w-surface);
	font-size: var(--w2w-text-sm);
}

.w2w-flow .w2w-result__ref strong {
	font-family: var(--w2w-font-mono);
	font-size: var(--w2w-text-lg);
}

/* ============================================== committee overview (admin) */

.w2w-overview.w2w-ui {
	background: var(--w2w-page-bg);
	padding: var(--w2w-space-6);
	border-radius: var(--w2w-radius-lg);
}

.w2w-overview.w2w-ui h1 {
	font-size: 26px;
}

.w2w-overview.w2w-ui .w2w-card {
	background: var(--w2w-surface);
	border: 1px solid var(--w2w-border);
	border-radius: var(--w2w-radius-lg);
	padding: var(--w2w-space-5);
	margin: 0 0 var(--w2w-space-4);
}

.w2w-overview.w2w-ui .w2w-card h3 {
	margin-top: 0;
}

.w2w-overview.w2w-ui .w2w-event-meta {
	font-weight: 400;
	font-size: var(--w2w-text-sm);
	color: var(--w2w-text-secondary);
}

.w2w-overview.w2w-ui .w2w-notice-danger {
	color: var(--w2w-danger);
}

.w2w-overview.w2w-ui .w2w-plain-list {
	list-style: disc;
	margin: 0 0 var(--w2w-space-4) var(--w2w-space-6);
	padding: 0;
}

.w2w-overview.w2w-ui .w2w-surface-label {
	width: 14em;
}

.w2w-overview.w2w-ui .w2w-surface-note {
	margin: var(--w2w-space-1) 0 0;
}

.w2w-overview.w2w-ui .w2w-sql-mode {
	font-size: 11px;
	word-break: break-word;
}

.w2w-overview.w2w-ui table {
	background: var(--w2w-surface);
	border: 1px solid var(--w2w-border);
	border-radius: var(--w2w-radius-lg);
	overflow: hidden;
}

.w2w-overview.w2w-ui table thead th {
	background: var(--w2w-page-bg);
}

.w2w-overview.w2w-ui .w2w-blockers {
	margin: 0 0 var(--w2w-space-3) var(--w2w-space-5);
	padding: 0;
}

.w2w-overview.w2w-ui .w2w-blockers li {
	margin-bottom: var(--w2w-space-3);
}

/* ----------------------------------------------------- status pills */

.w2w-ui .w2w-pill {
	display: inline-flex;
	align-items: center;
	font-family: var(--w2w-font);
	font-size: var(--w2w-text-xs);
	font-weight: 700;
	padding: 3px 10px;
	border-radius: var(--w2w-radius-sm);
	border: 1px solid transparent;
	white-space: nowrap;
}

.w2w-ui .w2w-pill--ok {
	color: var(--w2w-success);
	background: var(--w2w-success-bg);
	border-color: var(--w2w-success-border);
}

.w2w-ui .w2w-pill--warning {
	color: var(--w2w-warning);
	background: var(--w2w-warning-bg);
	border-color: var(--w2w-warning-border);
}

.w2w-ui .w2w-pill--danger {
	color: var(--w2w-danger);
	background: var(--w2w-danger-bg);
	border-color: var(--w2w-danger-border);
}

.w2w-ui .w2w-pill--muted {
	color: var(--w2w-muted);
	background: var(--w2w-page-bg);
	border-color: var(--w2w-border);
}

/* ------------------------------------------------------- technical panel */

.w2w-overview.w2w-ui .w2w-technical {
	margin-top: var(--w2w-space-8);
	border: 1px solid var(--w2w-border);
	border-radius: var(--w2w-radius-lg);
	padding: var(--w2w-space-4) var(--w2w-space-5);
	background: var(--w2w-surface);
}

.w2w-overview.w2w-ui .w2w-technical summary {
	cursor: pointer;
	font-weight: 700;
	font-size: var(--w2w-text-base);
	color: var(--w2w-text);
}

.w2w-overview.w2w-ui .w2w-technical[open] summary {
	margin-bottom: var(--w2w-space-3);
}

.w2w-overview.w2w-ui .w2w-technical table {
	margin-top: var(--w2w-space-3);
}

/* -------------------------------------------------- inventory ("what's in here") */

.w2w-inventory.w2w-ui .w2w-card {
	background: var(--w2w-surface);
	border: 1px solid var(--w2w-border);
	border-radius: var(--w2w-radius-lg);
	padding: var(--w2w-space-5);
	margin: 0 0 var(--w2w-space-4);
}

.w2w-inventory.w2w-ui .w2w-card h3 {
	margin-top: 0;
}

.w2w-inventory.w2w-ui .w2w-notice-danger {
	color: var(--w2w-danger);
}

.w2w-inventory.w2w-ui .w2w-plain-list {
	list-style: disc;
	margin: 0 0 var(--w2w-space-4) var(--w2w-space-6);
	padding: 0;
}

.w2w-inventory.w2w-ui table {
	background: var(--w2w-surface);
	border: 1px solid var(--w2w-border);
	border-radius: var(--w2w-radius-lg);
	overflow: hidden;
}

.w2w-inventory.w2w-ui table thead th {
	background: var(--w2w-page-bg);
}

.w2w-inventory.w2w-ui .w2w-technical {
	margin-top: var(--w2w-space-8);
	border: 1px solid var(--w2w-border);
	border-radius: var(--w2w-radius-lg);
	padding: var(--w2w-space-4) var(--w2w-space-5);
	background: var(--w2w-surface);
}

.w2w-inventory.w2w-ui .w2w-technical summary {
	cursor: pointer;
	font-weight: 700;
	font-size: var(--w2w-text-base);
	color: var(--w2w-text);
}

.w2w-inventory.w2w-ui .w2w-technical[open] summary {
	margin-bottom: var(--w2w-space-3);
}

.w2w-inventory.w2w-ui .w2w-technical table {
	margin-top: var(--w2w-space-3);
}

.w2w-inventory.w2w-ui .w2w-inventory-picker {
	display: flex;
	flex-wrap: wrap;
	gap: var(--w2w-space-3);
	margin-bottom: var(--w2w-space-5);
}

.w2w-inventory.w2w-ui .w2w-inventory-picker .w2w-button-large {
	width: auto;
	min-height: 56px;
	font-size: var(--w2w-text-lg);
	padding: var(--w2w-space-3) var(--w2w-space-5);
}

.w2w-inventory.w2w-ui .w2w-button--active {
	background: var(--w2w-primary-active);
}

/* -------------------------------------------------------------- app shell */

/*
 * The custom vertical navigation that replaces WordPress's own left-hand
 * admin menu on every one of this plugin's own screens (see Admin\Shell
 * and Support\Assets::maybe_add_shell_class) — not a curated subset. A
 * horizontal top bar with a fixed set of seven links previously stood
 * here, matching the client's own "WIZSP Dashboard Enterprise" reference;
 * it left more than half this plugin's own screens with no navigation at
 * all, since WordPress's own menu was still hidden underneath it. See
 * Admin\Shell's own doc comment.
 *
 * `.w2w-shell-sidebar` sits as a SIBLING of `.wrap.w2w-ui`, not a
 * descendant of it, so it carries its own `.w2w-ui` class to pick up the
 * design tokens.
 *
 * Deliberately kept: WordPress's own top admin bar (Howdy, site link,
 * update nag, logout) — hiding it too would strand a non-technical
 * volunteer with no way back to Plugins, Users or the rest of wp-admin.
 * Only the LEFT sidebar is replaced; the exit link at the bottom of the
 * new one is the same "back to the rest of wp-admin" escape hatch,
 * spelled out rather than assumed.
 *
 * Fixed to the left on a screen wide enough for it (900px, the same
 * breakpoint the previous top bar used for its own overflow). Below
 * that — the width Admin\RaceWeekDashboard is deliberately built for —
 * the list becomes a horizontally-scrollable row pinned above the
 * content instead, so a phone gets a full-width single column of
 * content rather than a squeezed sidebar.
 */
.w2w-ui.w2w-shell-sidebar {
	position: fixed;
	top: 32px;
	left: 0;
	bottom: 0;
	width: 220px;
	display: flex;
	flex-direction: column;
	overflow-y: auto;
	background: var(--w2w-surface);
	border-right: 1px solid var(--w2w-border);
	z-index: 10;
}

.w2w-shell-sidebar__brand {
	padding: var(--w2w-space-5) var(--w2w-space-5) var(--w2w-space-3);
	font-weight: 800;
	font-size: var(--w2w-text-xs);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--w2w-primary);
	flex-shrink: 0;
}

.w2w-shell-sidebar__links {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}

.w2w-shell-sidebar__links a {
	display: block;
	padding: var(--w2w-space-3) var(--w2w-space-5);
	font-size: var(--w2w-text-sm);
	font-weight: 600;
	color: var(--w2w-text-secondary);
	text-decoration: none;
	border-left: 3px solid transparent;
}

.w2w-shell-sidebar__links a.active {
	background: var(--w2w-primary-tint);
	color: var(--w2w-primary);
	border-left-color: var(--w2w-primary);
}

/*
 * A native `<details>`/`<summary>` disclosure, one per named section
 * (Day-to-day, Race day, Season wrap-up, Reference, Developer) —
 * collapsible with no JavaScript, and open by default only when it
 * contains the screen currently being viewed (Admin\Shell::render()
 * decides that server-side). `summary`'s own default disclosure
 * triangle is replaced with a chevron that rotates on `[open]`, since
 * the browser's own marker does not pick up this file's own tokens.
 */
.w2w-shell-sidebar__group summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--w2w-space-2);
	padding: var(--w2w-space-3) var(--w2w-space-5);
	font-size: var(--w2w-text-xs);
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--w2w-text-secondary);
	cursor: pointer;
	list-style: none;
}

.w2w-shell-sidebar__group summary::-webkit-details-marker {
	display: none;
}

.w2w-shell-sidebar__group summary::after {
	content: "\276F";
	font-size: 9px;
	color: var(--w2w-muted);
	transition: transform 0.15s ease;
}

.w2w-shell-sidebar__group[open] summary::after {
	transform: rotate(90deg);
}

.w2w-shell-sidebar__exit {
	flex-shrink: 0;
	padding: var(--w2w-space-4) var(--w2w-space-5);
	border-top: 1px solid var(--w2w-border);
	font-size: var(--w2w-text-sm);
	font-weight: 600;
	color: var(--w2w-text-secondary);
	text-decoration: none;
}

@media (max-width: 900px) {
	.w2w-ui.w2w-shell-sidebar {
		position: static;
		width: auto;
		height: auto;
		flex-direction: row;
		align-items: center;
		overflow-x: auto;
		overflow-y: visible;
		border-right: none;
		border-bottom: 1px solid var(--w2w-border);
		margin: 0 0 var(--w2w-space-6);
	}

	.w2w-shell-sidebar__brand {
		padding: var(--w2w-space-3) var(--w2w-space-4);
	}

	.w2w-shell-sidebar__links {
		flex-direction: row;
		flex: 0 0 auto;
		align-items: flex-start;
	}

	.w2w-shell-sidebar__links a {
		white-space: nowrap;
		border-left: none;
		border-bottom: 3px solid transparent;
	}

	.w2w-shell-sidebar__links a.active {
		border-left-color: transparent;
		border-bottom-color: var(--w2w-primary);
	}

	/*
	 * Each dropdown becomes one flex item in the horizontal strip —
	 * shrunk to its own summary width when closed, tall enough for its
	 * stacked links when the volunteer taps it open. Content still
	 * flows the same accordion way `<details>` always does; nothing
	 * here disables that, it only keeps a group from being squeezed by
	 * its neighbours.
	 */
	.w2w-shell-sidebar__group {
		flex-shrink: 0;
	}

	.w2w-shell-sidebar__group summary {
		white-space: nowrap;
	}

	.w2w-shell-sidebar__exit {
		border-top: none;
		border-left: 1px solid var(--w2w-border);
		white-space: nowrap;
	}
}

/*
 * WordPress's own left admin menu — hidden only on the body class
 * Support\Assets adds, and only on this plugin's own registered screens
 * (the same hook-suffix allowlist the stylesheet itself is gated on).
 * These selectors necessarily reach outside `.w2w-ui`: they target
 * WordPress's own chrome, not this plugin's, and `body.w2w-shell` is
 * exactly as narrowly scoped as `.w2w-ui` is everywhere else in this
 * file.
 */
body.w2w-shell #adminmenumain,
body.w2w-shell #adminmenuback,
body.w2w-shell #collapse-menu {
	display: none;
}

body.w2w-shell #wpcontent,
body.w2w-shell #wpfooter {
	margin-left: 220px;
}

@media (max-width: 900px) {
	body.w2w-shell #wpcontent,
	body.w2w-shell #wpfooter {
		margin-left: 0;
	}
}

/* --------------------------------------------------------- page header */

/*
 * Every admin screen's own title + one-line intro, laid out the way the
 * design language's "page header" pattern does — title and subtitle
 * stacked, room on the right for the one primary action a screen is
 * allowed per the hard rule "exactly one primary filled action per
 * screen". Screens with no such action (Setup, Docs, Overview) simply
 * render no `.w2w-page-header__action` and the header still reads right.
 */
.w2w-ui .w2w-page-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: var(--w2w-space-6);
	margin-bottom: var(--w2w-space-6);
	flex-wrap: wrap;
}

.w2w-ui .w2w-page-header__title {
	margin: 0 0 var(--w2w-space-1);
}

.w2w-ui .w2w-page-header__subtitle {
	margin: 0;
	color: var(--w2w-text-secondary);
	max-width: 60em;
}

.w2w-ui .w2w-page-header__action {
	flex-shrink: 0;
}

/* ------------------------------------------------------------- KPI strip */

/*
 * The dashboard's own top-line-numbers pattern: an icon chip, a big
 * value, a small label underneath. Used once, on Overview, for the
 * handful of counts a committee member actually wants at a glance
 * before reading the detail underneath — never a second source of
 * truth, only a different presentation of the same numbers already on
 * the page.
 */
.w2w-ui .w2w-kpi-strip {
	display: flex;
	flex-wrap: wrap;
	gap: var(--w2w-space-8);
	background: var(--w2w-surface);
	border: 1px solid var(--w2w-border);
	border-radius: var(--w2w-radius-lg);
	padding: var(--w2w-space-5) var(--w2w-space-6);
	margin: 0 0 var(--w2w-space-6);
}

.w2w-ui .w2w-kpi {
	display: flex;
	align-items: center;
	gap: var(--w2w-space-3);
}

.w2w-ui .w2w-kpi__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	flex-shrink: 0;
	border-radius: var(--w2w-radius-md);
	background: var(--w2w-primary-tint);
	color: var(--w2w-primary);
}

/*
 * !important here, and matching width/height/fill attributes on the <svg>
 * tags themselves in the templates: this site also runs a sibling WIZSP
 * plugin sharing the same design system on the same wp-admin screens, and an
 * unscoped `svg { width: 100% }`-style rule from it is enough to blow an
 * unconstrained icon up to the size of its container. Belt and braces.
 */
.w2w-ui .w2w-kpi__icon svg {
	width: 16px !important;
	height: 16px !important;
	stroke: currentColor;
	stroke-width: 1.8;
	fill: none;
}

.w2w-ui .w2w-kpi__value {
	font-size: var(--w2w-text-xl);
	font-weight: 800;
	color: var(--w2w-text);
	line-height: 1;
}

.w2w-ui .w2w-kpi__label {
	font-size: var(--w2w-text-xs);
	color: var(--w2w-text-secondary);
}

/* -------------------------------------------------------------- states */

/*
 * The four non-happy-path states a data view can be in: nothing has ever
 * been entered (empty), the filters the visitor picked matched nothing
 * (no-results), a fetch failed (error), and a fetch is in flight
 * (loading — not used on this plugin's own screens, which render fully
 * server-side and have nothing to be "in flight"). Same shape every
 * time — a plain sentence has no visual weight next to a card, and a
 * screen that only ever shows the happy path reads as broken the first
 * time it isn't.
 */
.w2w-ui .w2w-state {
	background: var(--w2w-surface);
	border: 1px solid var(--w2w-border);
	border-radius: var(--w2w-radius-lg);
	padding: var(--w2w-space-8) var(--w2w-space-6);
	text-align: center;
}

.w2w-ui .w2w-state__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin: 0 auto var(--w2w-space-3);
	border-radius: var(--w2w-radius-md);
	background: var(--w2w-primary-tint);
	color: var(--w2w-primary);
}

/* !important: see the .w2w-kpi__icon svg comment above — same collision risk. */
.w2w-ui .w2w-state__icon svg {
	width: 20px !important;
	height: 20px !important;
	stroke: currentColor;
	stroke-width: 1.8;
	fill: none;
}

.w2w-ui .w2w-state__icon--danger {
	background: var(--w2w-danger-bg);
	color: var(--w2w-danger);
}

.w2w-ui .w2w-state__icon--muted {
	background: var(--w2w-page-bg);
	border: 1px solid var(--w2w-border);
	color: var(--w2w-muted);
}

.w2w-ui .w2w-state__title {
	margin: 0 0 var(--w2w-space-1);
	font-weight: 700;
	color: var(--w2w-text);
}

.w2w-ui .w2w-state__text {
	margin: 0;
	color: var(--w2w-text-secondary);
	font-size: var(--w2w-text-sm);
}

.w2w-ui .w2w-state__action {
	margin-top: var(--w2w-space-4);
}

/* --------------------------------------------------------------- filters */

.w2w-ui .w2w-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: var(--w2w-space-4);
	background: var(--w2w-surface);
	border: 1px solid var(--w2w-border);
	border-radius: var(--w2w-radius-lg);
	padding: var(--w2w-space-4) var(--w2w-space-5);
	margin: 0 0 var(--w2w-space-5);
}

.w2w-ui .w2w-filters label {
	margin: 0 0 var(--w2w-space-1);
}

.w2w-ui .w2w-filters select {
	min-width: 12em;
}

.w2w-ui .w2w-filters .w2w-button {
	flex-shrink: 0;
}

/* --------------------------------------------- the shared toggle card */

/*
 * A collapsible <details> card, used everywhere this plugin needs a long
 * page to read as a short one: a Setup row, a "What happened" log, a
 * docs section. Native HTML, no JavaScript — the same reasoning Assets.php
 * gives for shipping no script file at all.
 */
.w2w-ui details.w2w-toggle {
	border: 1px solid var(--w2w-border);
	border-radius: var(--w2w-radius-lg);
	background: var(--w2w-surface);
	margin: 0 0 var(--w2w-space-3);
	overflow: hidden;
}

.w2w-ui details.w2w-toggle > summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--w2w-space-3);
	min-height: var(--w2w-touch);
	padding: var(--w2w-space-3) var(--w2w-space-5);
}

.w2w-ui details.w2w-toggle > summary::-webkit-details-marker {
	display: none;
}

.w2w-ui details.w2w-toggle > summary:hover {
	background: var(--w2w-page-bg);
}

.w2w-ui details.w2w-toggle > summary::after {
	content: "";
	flex-shrink: 0;
	width: 9px;
	height: 9px;
	border-right: 2px solid var(--w2w-muted);
	border-bottom: 2px solid var(--w2w-muted);
	transform: rotate(-45deg);
	transition: transform 0.15s ease;
}

.w2w-ui details.w2w-toggle[open] > summary::after {
	transform: rotate(45deg);
}

.w2w-ui details.w2w-toggle > summary .w2w-toggle-title {
	display: flex;
	align-items: center;
	gap: var(--w2w-space-3);
	font-weight: 700;
	font-size: var(--w2w-text-base);
	color: var(--w2w-text);
}

.w2w-ui details.w2w-toggle > .w2w-toggle-body {
	padding: 0 var(--w2w-space-5) var(--w2w-space-5);
	border-top: 1px solid var(--w2w-border);
	padding-top: var(--w2w-space-4);
}

/* -------------------------------------------------------- setup screen */

.w2w-setup.w2w-ui .w2w-setup-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--w2w-space-2);
	margin-top: var(--w2w-space-3);
}

.w2w-setup.w2w-ui form.w2w-setup-action {
	display: inline-flex;
	align-items: center;
	gap: var(--w2w-space-2);
	margin: 0;
}

.w2w-setup.w2w-ui select {
	min-height: var(--w2w-touch);
	border-radius: var(--w2w-radius-md);
	border: 1px solid var(--w2w-border);
	padding: 0 var(--w2w-space-2);
}

.w2w-setup.w2w-ui .w2w-config-box {
	display: block;
	width: 100%;
	max-width: 640px;
	font-family: var(--w2w-font-mono);
	font-size: var(--w2w-text-sm);
	background: var(--w2w-page-bg);
	border: 1px solid var(--w2w-border);
	border-radius: var(--w2w-radius-md);
	padding: var(--w2w-space-3);
	margin: var(--w2w-space-2) 0 var(--w2w-space-3);
}

.w2w-setup.w2w-ui .w2w-setup-log th,
.w2w-setup.w2w-ui .w2w-setup-log td {
	vertical-align: top;
}

/* --------------------------------------------------------- docs screens */

.w2w-docs.w2w-ui .w2w-docs-body {
	max-width: 720px;
}

.w2w-docs.w2w-ui .w2w-docs-body > p,
.w2w-docs.w2w-ui .w2w-docs-body > ul {
	margin-bottom: var(--w2w-space-6);
}

.w2w-docs.w2w-ui .w2w-docs-body ul {
	padding-left: var(--w2w-space-6);
}

.w2w-docs.w2w-ui details.w2w-toggle > summary .w2w-toggle-title {
	font-size: var(--w2w-text-lg);
}

.w2w-docs.w2w-ui details.w2w-toggle .w2w-toggle-body p:last-child {
	margin-bottom: 0;
}

/* ------------------------------------------------------- drivers screen */

.w2w-drivers.w2w-ui {
	background: var(--w2w-page-bg);
	padding: var(--w2w-space-6);
	border-radius: var(--w2w-radius-lg);
}

.w2w-drivers.w2w-ui .w2w-plain-list {
	list-style: disc;
	margin: 0 0 var(--w2w-space-4) var(--w2w-space-6);
	padding: 0;
}

.w2w-drivers.w2w-ui .w2w-driver-history {
	list-style: none;
	margin: 0 0 var(--w2w-space-4);
	color: var(--w2w-text-secondary);
	font-size: var(--w2w-text-sm);
}

.w2w-drivers.w2w-ui .w2w-drivers-cards {
	display: flex;
	flex-direction: column;
	gap: var(--w2w-space-3);
}

.w2w-drivers.w2w-ui .w2w-driver-card {
	background: var(--w2w-surface);
}

.w2w-drivers.w2w-ui .w2w-driver-select {
	display: inline-flex;
	align-items: center;
	gap: var(--w2w-space-2);
	margin-bottom: var(--w2w-space-4);
	font-weight: 700;
}

.w2w-drivers.w2w-ui .w2w-driver-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--w2w-space-3);
	border-top: 1px solid var(--w2w-border);
	padding-top: var(--w2w-space-4);
	margin-top: var(--w2w-space-4);
}

.w2w-drivers.w2w-ui .w2w-driver-actions form {
	display: flex;
	flex-direction: column;
	gap: var(--w2w-space-2);
	margin: 0;
}

.w2w-drivers.w2w-ui .w2w-driver-reject {
	flex: 1 1 220px;
}

.w2w-drivers.w2w-ui .w2w-driver-reject textarea {
	width: 100%;
	min-height: 4.5em;
}

/* -------------------------------------------------- registration desk */

.w2w-desk.w2w-ui {
	background: var(--w2w-page-bg);
	padding: var(--w2w-space-6);
	border-radius: var(--w2w-radius-lg);
	font-size: var(--w2w-text-lg);
}

/*
 * The shell around this screen is as wide as the others, for the same
 * reason a narrow content column under a full-width top bar reads as
 * unfinished rather than deliberate. The search bar, the results and the
 * booking card itself stay at a kiosk-comfortable reading width — a
 * 64px-tall touch target stretched to 1200px is not more usable, it is
 * just harder to find.
 */
.w2w-desk.w2w-ui .w2w-desk-search,
.w2w-desk.w2w-ui .w2w-desk-results,
.w2w-desk.w2w-ui .w2w-desk-card,
.w2w-desk.w2w-ui .w2w-toggle,
.w2w-desk.w2w-ui .w2w-state {
	max-width: 640px;
}

.w2w-desk.w2w-ui .w2w-button-large {
	min-height: 64px;
	font-size: var(--w2w-text-lg);
	padding: var(--w2w-space-4) var(--w2w-space-6);
	width: 100%;
}

.w2w-desk.w2w-ui .w2w-desk-search {
	display: flex;
	flex-wrap: wrap;
	gap: var(--w2w-space-3);
	align-items: flex-end;
	margin-bottom: var(--w2w-space-5);
}

.w2w-desk.w2w-ui .w2w-desk-search input[type="text"] {
	flex: 1 1 240px;
	min-height: 56px;
	font-size: var(--w2w-text-lg);
	padding: 0 var(--w2w-space-3);
	border: 1px solid var(--w2w-border);
	border-radius: var(--w2w-radius-md);
}

.w2w-desk.w2w-ui .w2w-desk-search .w2w-button-large {
	width: auto;
	flex: 0 0 auto;
}

.w2w-desk.w2w-ui .w2w-desk-results {
	list-style: none;
	margin: 0 0 var(--w2w-space-5);
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--w2w-space-2);
}

.w2w-desk.w2w-ui .w2w-desk-results .w2w-button-large {
	text-align: left;
	justify-content: flex-start;
}

.w2w-desk.w2w-ui .w2w-desk-card {
	background: var(--w2w-surface);
	margin-bottom: var(--w2w-space-3);
}

.w2w-desk.w2w-ui .w2w-desk-input,
.w2w-desk.w2w-ui select {
	display: block;
	width: 100%;
	min-height: 56px;
	font-size: var(--w2w-text-lg);
	padding: 0 var(--w2w-space-3);
	border: 1px solid var(--w2w-border);
	border-radius: var(--w2w-radius-md);
	margin: 0 0 var(--w2w-space-4);
}

.w2w-desk.w2w-ui label {
	font-weight: 700;
	margin-bottom: var(--w2w-space-1);
	display: block;
}

.w2w-desk.w2w-ui input[type="file"] {
	display: block;
	margin: 0 0 var(--w2w-space-4);
	font-size: var(--w2w-text-base);
}

/* ------------------------------------------------------------- substitution */

.w2w-substitution.w2w-ui {
	background: var(--w2w-page-bg);
	padding: var(--w2w-space-6);
	border-radius: var(--w2w-radius-lg);
	font-size: var(--w2w-text-lg);
}

.w2w-substitution.w2w-ui .w2w-substitution-search,
.w2w-substitution.w2w-ui .w2w-substitution-results,
.w2w-substitution.w2w-ui .w2w-substitution-entry,
.w2w-substitution.w2w-ui .w2w-state {
	max-width: 640px;
}

.w2w-substitution.w2w-ui .w2w-button-large {
	min-height: 64px;
	font-size: var(--w2w-text-lg);
	padding: var(--w2w-space-4) var(--w2w-space-6);
	width: 100%;
}

.w2w-substitution.w2w-ui .w2w-substitution-search {
	display: flex;
	flex-wrap: wrap;
	gap: var(--w2w-space-3);
	align-items: flex-end;
	margin-bottom: var(--w2w-space-5);
}

.w2w-substitution.w2w-ui .w2w-substitution-search input[type="text"] {
	flex: 1 1 240px;
	min-height: 56px;
	font-size: var(--w2w-text-lg);
	padding: 0 var(--w2w-space-3);
	border: 1px solid var(--w2w-border);
	border-radius: var(--w2w-radius-md);
}

.w2w-substitution.w2w-ui .w2w-substitution-search .w2w-button-large {
	width: auto;
	flex: 0 0 auto;
}

.w2w-substitution.w2w-ui .w2w-substitution-results {
	list-style: none;
	margin: 0 0 var(--w2w-space-5);
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--w2w-space-2);
}

.w2w-substitution.w2w-ui .w2w-substitution-results .w2w-button-large {
	text-align: left;
	justify-content: flex-start;
}

.w2w-substitution.w2w-ui label {
	font-weight: 700;
	margin-bottom: var(--w2w-space-1);
	display: block;
}

/* --------------------------------------------------------------- popia */

.w2w-popia.w2w-ui {
	background: var(--w2w-page-bg);
	padding: var(--w2w-space-6);
	border-radius: var(--w2w-radius-lg);
	font-size: var(--w2w-text-lg);
}

.w2w-popia.w2w-ui .w2w-popia-search,
.w2w-popia.w2w-ui .w2w-popia-results,
.w2w-popia.w2w-ui .w2w-popia-person,
.w2w-popia.w2w-ui .w2w-state {
	max-width: 640px;
}

.w2w-popia.w2w-ui .w2w-button-large {
	min-height: 64px;
	font-size: var(--w2w-text-lg);
	padding: var(--w2w-space-4) var(--w2w-space-6);
	width: 100%;
}

.w2w-popia.w2w-ui .w2w-popia-search {
	display: flex;
	flex-wrap: wrap;
	gap: var(--w2w-space-3);
	align-items: flex-end;
	margin-bottom: var(--w2w-space-5);
}

.w2w-popia.w2w-ui .w2w-popia-search input[type="text"] {
	flex: 1 1 240px;
	min-height: 56px;
	font-size: var(--w2w-text-lg);
	padding: 0 var(--w2w-space-3);
	border: 1px solid var(--w2w-border);
	border-radius: var(--w2w-radius-md);
}

.w2w-popia.w2w-ui .w2w-popia-search .w2w-button-large {
	width: auto;
	flex: 0 0 auto;
}

.w2w-popia.w2w-ui .w2w-popia-results {
	list-style: none;
	margin: 0 0 var(--w2w-space-5);
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--w2w-space-2);
}

.w2w-popia.w2w-ui .w2w-popia-results .w2w-button-large {
	text-align: left;
	justify-content: flex-start;
	gap: var(--w2w-space-2);
}

.w2w-popia.w2w-ui label {
	font-weight: 700;
	margin-bottom: var(--w2w-space-1);
	display: block;
}

.w2w-popia.w2w-ui .w2w-popia-section {
	max-width: 640px;
	margin-top: var(--w2w-space-6);
	padding-top: var(--w2w-space-5);
	border-top: 1px solid var(--w2w-border);
}

.w2w-popia.w2w-ui .w2w-popia-section--danger {
	border-top-color: var(--w2w-danger-border);
}

.w2w-popia.w2w-ui .w2w-popia-exports {
	list-style: none;
	margin: 0 0 var(--w2w-space-4);
	padding: 0;
}

.w2w-popia.w2w-ui .w2w-popia-exports li {
	margin-bottom: var(--w2w-space-1);
}

.w2w-popia.w2w-ui .w2w-popia-kept-table {
	width: 100%;
	max-width: 100%;
	border-collapse: collapse;
	margin-bottom: var(--w2w-space-5);
	font-size: var(--w2w-text-base);
}

.w2w-popia.w2w-ui .w2w-popia-kept-table th,
.w2w-popia.w2w-ui .w2w-popia-kept-table td {
	text-align: left;
	padding: var(--w2w-space-2) var(--w2w-space-3);
	border-bottom: 1px solid var(--w2w-border);
	vertical-align: top;
}

.w2w-popia.w2w-ui .w2w-button--danger {
	background: var(--w2w-danger);
	border-color: var(--w2w-danger);
	color: #fff;
}

.w2w-popia.w2w-ui .w2w-button--danger:hover {
	background: var(--w2w-danger-border);
}

/* --------------------------------------------------------- assignments */

.w2w-assignments.w2w-ui {
	background: var(--w2w-page-bg);
	padding: var(--w2w-space-6);
	border-radius: var(--w2w-radius-lg);
	font-size: var(--w2w-text-lg);
}

.w2w-assignments.w2w-ui .w2w-toggle,
.w2w-assignments.w2w-ui .w2w-state {
	max-width: 720px;
}

.w2w-assignments.w2w-ui .w2w-button-large {
	min-height: 64px;
	font-size: var(--w2w-text-lg);
	padding: var(--w2w-space-4) var(--w2w-space-6);
}

.w2w-assignments.w2w-ui .w2w-assignments-picker {
	display: flex;
	flex-wrap: wrap;
	gap: var(--w2w-space-3);
	margin-bottom: var(--w2w-space-5);
}

.w2w-assignments.w2w-ui .w2w-assignments-picker .w2w-button-large {
	width: auto;
}

.w2w-assignments.w2w-ui .w2w-button--active {
	background: var(--w2w-primary-active);
}

.w2w-assignments.w2w-ui .w2w-assignments-card {
	background: var(--w2w-surface);
	margin-bottom: var(--w2w-space-3);
	max-width: 720px;
}

.w2w-assignments.w2w-ui .w2w-assignments-input,
.w2w-assignments.w2w-ui select {
	display: block;
	width: 100%;
	min-height: 56px;
	font-size: var(--w2w-text-lg);
	padding: 0 var(--w2w-space-3);
	border: 1px solid var(--w2w-border);
	border-radius: var(--w2w-radius-md);
	margin: 0 0 var(--w2w-space-4);
}

.w2w-assignments.w2w-ui label {
	font-weight: 700;
	margin-bottom: var(--w2w-space-1);
	display: block;
}

/* ------------------------------------------------------------ payments */

.w2w-payments.w2w-ui {
	background: var(--w2w-page-bg);
	padding: var(--w2w-space-6);
	border-radius: var(--w2w-radius-lg);
	font-size: var(--w2w-text-lg);
}

.w2w-payments.w2w-ui .w2w-toggle {
	max-width: 720px;
}

.w2w-payments.w2w-ui .w2w-button-large {
	min-height: 64px;
	font-size: var(--w2w-text-lg);
	padding: var(--w2w-space-4) var(--w2w-space-6);
}

.w2w-payments.w2w-ui .w2w-payments-card {
	background: var(--w2w-surface);
	margin-bottom: var(--w2w-space-3);
	max-width: 720px;
}

.w2w-payments.w2w-ui .w2w-payments-candidate {
	border: 1px solid var(--w2w-border);
	border-radius: var(--w2w-radius-md);
	padding: var(--w2w-space-4);
	margin-bottom: var(--w2w-space-3);
}

.w2w-payments.w2w-ui .w2w-payments-input,
.w2w-payments.w2w-ui select {
	display: block;
	width: 100%;
	min-height: 56px;
	font-size: var(--w2w-text-lg);
	padding: 0 var(--w2w-space-3);
	border: 1px solid var(--w2w-border);
	border-radius: var(--w2w-radius-md);
	margin: 0 0 var(--w2w-space-4);
}

.w2w-payments.w2w-ui .w2w-payments-search {
	display: flex;
	flex-wrap: wrap;
	gap: var(--w2w-space-3);
	align-items: flex-end;
	margin-bottom: var(--w2w-space-5);
	max-width: 720px;
}

.w2w-payments.w2w-ui .w2w-payments-search input[type="text"] {
	flex: 1 1 240px;
	min-height: 56px;
	font-size: var(--w2w-text-lg);
	padding: 0 var(--w2w-space-3);
	border: 1px solid var(--w2w-border);
	border-radius: var(--w2w-radius-md);
}

.w2w-payments.w2w-ui .w2w-payments-search .w2w-button-large {
	width: auto;
	flex: 0 0 auto;
}

.w2w-payments.w2w-ui label {
	font-weight: 700;
	margin-bottom: var(--w2w-space-1);
	display: block;
}

/* ------------------------------------------------------ launch checklist */

.w2w-launch-checklist.w2w-ui {
	background: var(--w2w-page-bg);
	padding: var(--w2w-space-6);
	border-radius: var(--w2w-radius-lg);
	font-size: var(--w2w-text-lg);
}

.w2w-launch-checklist.w2w-ui .w2w-toggle {
	max-width: 720px;
}

.w2w-launch-checklist.w2w-ui .w2w-button-large {
	min-height: 64px;
	font-size: var(--w2w-text-lg);
	padding: var(--w2w-space-4) var(--w2w-space-6);
}

.w2w-launch-checklist.w2w-ui .w2w-checklist-card {
	background: var(--w2w-surface);
	margin-bottom: var(--w2w-space-3);
	max-width: 720px;
}

.w2w-launch-checklist.w2w-ui .w2w-checklist-input,
.w2w-launch-checklist.w2w-ui select {
	display: block;
	width: 100%;
	min-height: 56px;
	font-size: var(--w2w-text-lg);
	padding: 0 var(--w2w-space-3);
	border: 1px solid var(--w2w-border);
	border-radius: var(--w2w-radius-md);
	margin: 0 0 var(--w2w-space-4);
}

.w2w-launch-checklist.w2w-ui label {
	font-weight: 700;
	margin-bottom: var(--w2w-space-1);
	display: block;
}

.w2w-launch-checklist.w2w-ui .w2w-checklist-warning {
	color: var(--w2w-warning, #92400e);
	font-weight: 700;
}

/*
 * The dry run renders a real confirmation email's own HTML, which has its
 * own layout and is not meant to inherit this page's styles — an iframe
 * with srcdoc keeps the two isolated without fetching anything external.
 * A fixed height with its own scrollbar, not the page's, so a long email
 * does not push the download button off a phone screen.
 */
.w2w-launch-checklist.w2w-ui .w2w-dry-run-email {
	display: block;
	width: 100%;
	height: 480px;
	border: 1px solid var(--w2w-border);
	border-radius: var(--w2w-radius-md);
	background: #fff;
	margin-bottom: var(--w2w-space-4);
}

/* ---------------------------------------------------------- live view */

.w2w-live-view.w2w-ui {
	background: var(--w2w-page-bg);
	padding: var(--w2w-space-6);
	border-radius: var(--w2w-radius-lg);
}

/*
 * The one thing this screen adds that no other admin screen needs: a
 * standing, unmissable answer to "how current is this?" — a committee
 * member reading this on a phone must never mistake a stale page for a
 * live one. The dot is decorative reinforcement only; the text carries
 * the actual information.
 */
.w2w-live-view.w2w-ui .w2w-live-banner {
	display: flex;
	align-items: center;
	gap: var(--w2w-space-2);
	background: var(--w2w-surface);
	border: 1px solid var(--w2w-border);
	border-radius: var(--w2w-radius-md);
	padding: var(--w2w-space-3) var(--w2w-space-4);
	margin: 0 0 var(--w2w-space-5);
	font-size: var(--w2w-text-sm);
	color: var(--w2w-text-secondary);
	font-weight: 600;
}

.w2w-live-view.w2w-ui .w2w-live-banner__dot {
	flex-shrink: 0;
	width: 8px;
	height: 8px;
	border-radius: var(--w2w-radius-pill);
	background: var(--w2w-success);
}

.w2w-live-view.w2w-ui .w2w-live-cards,
.w2w-device-pairing.w2w-ui .w2w-live-cards {
	display: flex;
	flex-direction: column;
	gap: var(--w2w-space-3);
	margin: 0 0 var(--w2w-space-6);
}

/*
 * A device, a keyset or an incident, each with real visual weight —
 * deliberately not a row in a table, which is exactly the treatment
 * this screen exists to avoid: a table reflows badly under 768px and
 * gives every row the same weight regardless of what it says.
 */
.w2w-live-view.w2w-ui .w2w-live-card,
.w2w-device-pairing.w2w-ui .w2w-live-card {
	background: var(--w2w-surface);
	border: 1px solid var(--w2w-border);
	border-radius: var(--w2w-radius-lg);
	padding: var(--w2w-space-4) var(--w2w-space-5);
}

/*
 * Colour is reinforcement, never the only signal — every card that gets
 * one of these also carries a pill with its own text ("Quiet", "High")
 * inside it, checked directly in tests/bin/sabotage-register.php.
 */
.w2w-live-view.w2w-ui .w2w-live-card--warning,
.w2w-device-pairing.w2w-ui .w2w-live-card--warning {
	background: var(--w2w-warning-bg);
	border-color: var(--w2w-warning-border);
}

.w2w-live-view.w2w-ui .w2w-live-card--danger,
.w2w-device-pairing.w2w-ui .w2w-live-card--danger {
	background: var(--w2w-danger-bg);
	border-color: var(--w2w-danger-border);
}

.w2w-live-view.w2w-ui .w2w-live-card__row,
.w2w-device-pairing.w2w-ui .w2w-live-card__row {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: var(--w2w-space-3);
}

.w2w-live-view.w2w-ui .w2w-live-card__title,
.w2w-device-pairing.w2w-ui .w2w-live-card__title {
	font-weight: 700;
	font-size: var(--w2w-text-base);
	color: var(--w2w-text);
}

.w2w-live-view.w2w-ui .w2w-live-card__meta,
.w2w-device-pairing.w2w-ui .w2w-live-card__meta {
	font-size: var(--w2w-text-sm);
	color: var(--w2w-text-secondary);
	margin-top: 2px;
}

.w2w-live-view.w2w-ui .w2w-live-card__stats {
	display: flex;
	flex-wrap: wrap;
	gap: var(--w2w-space-5);
	margin-top: var(--w2w-space-3);
	padding-top: var(--w2w-space-3);
	border-top: 1px solid var(--w2w-border);
}

.w2w-live-view.w2w-ui .w2w-live-card__stat-value {
	display: block;
	font-weight: 700;
	font-size: var(--w2w-text-lg);
	color: var(--w2w-text);
}

.w2w-live-view.w2w-ui .w2w-live-card__stat-label {
	display: block;
	font-size: var(--w2w-text-xs);
	color: var(--w2w-muted);
}

.w2w-live-view.w2w-ui .w2w-live-resolve {
	margin-top: var(--w2w-space-3);
	padding-top: var(--w2w-space-3);
	border-top: 1px solid var(--w2w-border);
}

.w2w-live-view.w2w-ui .w2w-live-resolve label {
	display: block;
	font-size: var(--w2w-text-sm);
	margin-bottom: var(--w2w-space-1);
}

.w2w-live-view.w2w-ui .w2w-live-resolve input[type="text"] {
	display: block;
	width: 100%;
	min-height: 48px;
	font-size: var(--w2w-text-base);
	padding: 0 var(--w2w-space-3);
	border: 1px solid var(--w2w-border);
	border-radius: var(--w2w-radius-md);
	margin-bottom: var(--w2w-space-3);
}

.w2w-live-view.w2w-ui .w2w-live-resolve .w2w-button-large {
	min-height: 64px;
	font-size: var(--w2w-text-lg);
	padding: var(--w2w-space-4) var(--w2w-space-6);
	width: 100%;
}

/* -------------------------------------------------------------- fatigue */

.w2w-fatigue.w2w-ui {
	background: var(--w2w-page-bg);
	padding: var(--w2w-space-6);
	border-radius: var(--w2w-radius-lg);
}

.w2w-fatigue.w2w-ui .w2w-live-cards {
	display: flex;
	flex-direction: column;
	gap: var(--w2w-space-3);
	margin: 0 0 var(--w2w-space-6);
}

.w2w-fatigue.w2w-ui .w2w-live-card {
	background: var(--w2w-surface);
	border: 1px solid var(--w2w-border);
	border-radius: var(--w2w-radius-lg);
	padding: var(--w2w-space-4) var(--w2w-space-5);
}

.w2w-fatigue.w2w-ui .w2w-live-card--danger {
	background: var(--w2w-danger-bg);
	border-color: var(--w2w-danger-border);
}

.w2w-fatigue.w2w-ui .w2w-live-card__row {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: var(--w2w-space-3);
}

.w2w-fatigue.w2w-ui .w2w-live-card__title {
	font-weight: 700;
	font-size: var(--w2w-text-base);
	color: var(--w2w-text);
}

.w2w-fatigue.w2w-ui .w2w-live-card__meta {
	font-size: var(--w2w-text-sm);
	color: var(--w2w-text-secondary);
	margin-top: 2px;
}

.w2w-fatigue.w2w-ui .w2w-live-card__stats {
	display: flex;
	flex-wrap: wrap;
	gap: var(--w2w-space-5);
	margin-top: var(--w2w-space-3);
	padding-top: var(--w2w-space-3);
	border-top: 1px solid var(--w2w-border);
}

.w2w-fatigue.w2w-ui .w2w-live-card__stat-value {
	display: block;
	font-weight: 700;
	font-size: var(--w2w-text-lg);
	color: var(--w2w-text);
}

.w2w-fatigue.w2w-ui .w2w-live-card__stat-label {
	display: block;
	font-size: var(--w2w-text-xs);
	color: var(--w2w-muted);
}

/* ------------------------------------------------------ device pairing */

.w2w-device-pairing.w2w-ui .w2w-card {
	background: var(--w2w-surface);
	border: 1px solid var(--w2w-border);
	border-radius: var(--w2w-radius-lg);
	padding: var(--w2w-space-5);
	margin: 0 0 var(--w2w-space-4);
}

.w2w-device-pairing.w2w-ui .w2w-card h2 {
	margin-top: 0;
}

/* ------------------------------------------------- print queue / reconciliation */

.w2w-print-queue.w2w-ui .w2w-card,
.w2w-tag-reconciliation.w2w-ui .w2w-card {
	background: var(--w2w-surface);
	border: 1px solid var(--w2w-border);
	border-radius: var(--w2w-radius-lg);
	padding: var(--w2w-space-5);
	margin: 0 0 var(--w2w-space-4);
}

.w2w-print-queue.w2w-ui .w2w-card h2,
.w2w-tag-reconciliation.w2w-ui .w2w-card h2 {
	margin-top: 0;
}

/* ------------------------------------------------------------ system check */

.w2w-system-check.w2w-ui .w2w-card {
	background: var(--w2w-surface);
	border: 1px solid var(--w2w-border);
	border-radius: var(--w2w-radius-lg);
	padding: var(--w2w-space-5);
	margin: 0 0 var(--w2w-space-4);
}

.w2w-system-check.w2w-ui .w2w-card h2 {
	margin-top: 0;
}

.w2w-system-check.w2w-ui .w2w-config-box {
	display: block;
	width: 100%;
	max-width: 640px;
	font-family: var(--w2w-font-mono);
	font-size: var(--w2w-text-sm);
	background: var(--w2w-page-bg);
	border: 1px solid var(--w2w-border);
	border-radius: var(--w2w-radius-md);
	padding: var(--w2w-space-3);
	margin: var(--w2w-space-2) 0 var(--w2w-space-3);
}

.w2w-allocation-approvals.w2w-ui .w2w-card {
	background: var(--w2w-surface);
	border: 1px solid var(--w2w-border);
	border-radius: var(--w2w-radius-lg);
	padding: var(--w2w-space-5);
	margin: 0 0 var(--w2w-space-4);
}

.w2w-allocation-approvals.w2w-ui .w2w-card h2 {
	margin-top: 0;
}

.w2w-allocation-approvals.w2w-ui .w2w-allocation-approvals-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.w2w-allocation-approvals.w2w-ui .w2w-allocation-approvals-list li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--w2w-space-3);
	padding: var(--w2w-space-3) 0;
	border-top: 1px solid var(--w2w-border);
}

.w2w-allocation-approvals.w2w-ui .w2w-allocation-approvals-list li:first-child {
	border-top: none;
}

/*
 * The one screen this plugin ever shows a secret on: the claim code
 * exists in this one response and nowhere this page will render again.
 * The warning line is text, not colour, the same rule Live View's own
 * staleness counter already follows.
 */
.w2w-device-pairing.w2w-ui .w2w-pairing-issued {
	border-color: var(--w2w-warning-border);
	background: var(--w2w-warning-bg);
}

.w2w-device-pairing.w2w-ui .w2w-pairing-issued__warning {
	font-weight: 700;
}

.w2w-device-pairing.w2w-ui .w2w-pairing-issued__code {
	font-family: monospace;
	font-size: var(--w2w-text-lg);
	letter-spacing: 0.08em;
	margin: var(--w2w-space-3) 0;
}

.w2w-device-pairing.w2w-ui .w2w-pairing-issued__qr {
	max-width: 220px;
}

.w2w-device-pairing.w2w-ui .w2w-pairing-issued__qr svg {
	width: 100%;
	height: auto;
}

.w2w-device-pairing.w2w-ui .w2w-pairing-revoke {
	margin-top: var(--w2w-space-3);
	padding-top: var(--w2w-space-3);
	border-top: 1px solid var(--w2w-border);
}

/* ------------------------------------------------------- print sheets */

.w2w-print-sheets.w2w-ui {
	background: var(--w2w-page-bg);
	padding: var(--w2w-space-6);
	border-radius: var(--w2w-radius-lg);
}

.w2w-print-sheets.w2w-ui .w2w-sheet-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--w2w-space-2);
}

/* -------------------------------------------------- hero band (public) */

/*
 * The rider-facing counterpart to the admin app shell: a solid navy intro
 * band above the form itself, matching the design reference's own
 * marketing/auth pattern ("solid primary_base full-bleed band, no
 * gradient"). Scoped to the width of this plugin's own form container,
 * not the browser viewport — the site's own theme owns its header, nav
 * and page width, and this plugin does not reach outside its own markup
 * to override them.
 */
.w2w-ui .w2w-hero {
	background: var(--w2w-primary);
	color: #ffffff;
	text-align: center;
	padding: var(--w2w-space-8) var(--w2w-space-6);
	border-radius: var(--w2w-radius-lg);
	margin: 0 0 var(--w2w-space-6);
}

.w2w-ui .w2w-hero__eyebrow {
	display: inline-block;
	background: rgba(255, 255, 255, 0.14);
	border-radius: var(--w2w-radius-pill);
	padding: var(--w2w-space-1) var(--w2w-space-4);
	font-size: var(--w2w-text-xs);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	margin: 0 0 var(--w2w-space-3);
}

.w2w-ui .w2w-hero h1,
.w2w-ui .w2w-hero h2 {
	color: #ffffff;
	font-size: var(--w2w-text-2xl);
	margin: 0 0 var(--w2w-space-2);
}

.w2w-ui .w2w-hero__text {
	color: rgba(255, 255, 255, 0.82);
	max-width: 44em;
	margin: 0 auto;
}

/* ========================================================= public forms: the flow */

/*
 * Every rider- and volunteer-facing form shares this layout: a heading, the
 * form in bordered step cards, and — when there is room — a summary card
 * beside it that stays in view. The booking form and the driver
 * registration form are split into steps by assets/js/w2w-flow.js; the
 * shorter pages (vehicle, consent, status) use the same cards without steps.
 *
 * Sized by container queries against the form itself, not the viewport:
 * this markup sits inside whatever content column the site's theme gives
 * it, and a 1440px screen with a 720px column is still a narrow layout.
 *
 * Without the script, `.w2w-js-only` controls never show and every step is
 * open, one under the other — the form works exactly as a plain form.
 */

.w2w-ui.w2w-flow {
	container-type: inline-size;
	container-name: w2w-flow;
	max-width: 1200px;
	margin: 0 auto;
}

.w2w-ui.w2w-flow [hidden] {
	display: none;
}

.w2w-flow:not(.is-enhanced) .w2w-js-only {
	display: none;
}

.w2w-flow.is-enhanced .w2w-nojs-only {
	display: none;
}

.w2w-ui.w2w-flow .w2w-visually-hidden {
	position: absolute;
	min-height: 0;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ------------------------------------------------------------------ head */

.w2w-flow .w2w-flow__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--w2w-space-3) var(--w2w-space-6);
	margin: 0 0 var(--w2w-space-6);
}

.w2w-flow .w2w-flow__eyebrow {
	display: block;
	font-size: var(--w2w-text-xs);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--w2w-muted);
	margin: 0 0 var(--w2w-space-1);
}

.w2w-flow .w2w-flow__title {
	font-size: var(--w2w-text-2xl);
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.01em;
	margin: 0;
}

.w2w-flow .w2w-flow__lead {
	color: var(--w2w-text-secondary);
	max-width: 44em;
	margin: var(--w2w-space-2) 0 0;
}

.w2w-flow .w2w-chip {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--w2w-space-1) var(--w2w-space-2);
	font-size: var(--w2w-text-sm);
	font-weight: 500;
	color: var(--w2w-primary);
	background: var(--w2w-primary-tint);
	border-radius: var(--w2w-radius-pill);
	padding: var(--w2w-space-1) var(--w2w-space-4);
	margin: 0;
}

.w2w-flow .w2w-chip a {
	color: var(--w2w-primary);
	font-weight: 600;
}

/* ---------------------------------------------------------- progress bar */

.w2w-flow .w2w-flow__bar {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
	gap: var(--w2w-space-2);
	list-style: none;
	margin: 0 0 var(--w2w-space-4);
	padding: 0;
}

.w2w-flow .w2w-flow__bar li {
	font-size: var(--w2w-text-xs);
	font-weight: 500;
	color: var(--w2w-muted);
}

.w2w-flow .w2w-flow__bar li::before {
	content: "";
	display: block;
	height: 4px;
	border-radius: var(--w2w-radius-pill);
	background: var(--w2w-border);
	margin: 0 0 var(--w2w-space-2);
}

.w2w-flow .w2w-flow__bar li.is-done {
	color: var(--w2w-text);
}

.w2w-flow .w2w-flow__bar li.is-done::before {
	background: var(--w2w-success);
}

.w2w-flow .w2w-flow__bar li.is-current {
	color: var(--w2w-primary);
	font-weight: 700;
}

.w2w-flow .w2w-flow__bar li.is-current::before {
	background: var(--w2w-primary);
}

/* ---------------------------------------------------------------- layout */

.w2w-flow .w2w-flow__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--w2w-space-6) var(--w2w-space-8);
	align-items: start;
}

.w2w-flow .w2w-flow__aside {
	display: none;
}

/* ----------------------------------------------------------------- steps */

.w2w-flow .w2w-step,
.w2w-flow .w2w-card {
	background: var(--w2w-surface);
	border: 1px solid var(--w2w-border);
	border-radius: var(--w2w-radius-lg);
	margin: 0 0 var(--w2w-space-3);
}

.w2w-flow .w2w-card {
	padding: var(--w2w-space-6);
}

.w2w-flow .w2w-card > h2,
.w2w-flow .w2w-card > h3 {
	font-size: var(--w2w-text-lg);
	font-weight: 600;
	margin: 0 0 var(--w2w-space-4);
}

.w2w-flow.is-enhanced .w2w-step.is-current {
	border-color: var(--w2w-primary);
}

.w2w-flow .w2w-step__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--w2w-space-2) var(--w2w-space-3);
	padding: var(--w2w-space-4) var(--w2w-space-6);
}

.w2w-flow .w2w-step__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 28px;
	height: 28px;
	border-radius: var(--w2w-radius-pill);
	background: var(--w2w-primary-tint);
	color: var(--w2w-primary);
	font-size: var(--w2w-text-sm);
	font-weight: 700;
}

.w2w-flow.is-enhanced .w2w-step.is-done .w2w-step__num {
	background: var(--w2w-success);
	color: var(--w2w-surface);
	font-size: 0;
}

.w2w-flow.is-enhanced .w2w-step.is-done .w2w-step__num::after {
	content: "\2713";
	font-size: var(--w2w-text-sm);
}

.w2w-flow .w2w-step__title {
	font-size: var(--w2w-text-lg);
	font-weight: 600;
	line-height: 1.4;
	margin: 0;
}

.w2w-flow.is-enhanced .w2w-step.is-later .w2w-step__title {
	color: var(--w2w-muted);
}

.w2w-flow .w2w-step__summary {
	flex: 1 1 12em;
	text-align: right;
	font-size: var(--w2w-text-sm);
	color: var(--w2w-text-secondary);
	margin: 0;
	overflow-wrap: anywhere;
}

.w2w-flow .w2w-step:not(.is-done):not(.is-incomplete) .w2w-step__summary,
.w2w-flow .w2w-step:not(.is-done):not(.is-incomplete) .w2w-step__edit {
	display: none;
}

/* Every step can be opened from its header, in any order. */
.w2w-flow.is-enhanced .w2w-step:not(.is-current) .w2w-step__head,
.w2w-flow.is-enhanced .w2w-flow__bar li,
.w2w-flow.is-enhanced .w2w-progress li {
	cursor: pointer;
}

/* A step the rider left with something still missing. */
.w2w-flow.is-enhanced .w2w-step.is-incomplete {
	border-color: var(--w2w-danger-border);
}

.w2w-flow.is-enhanced .w2w-step.is-incomplete .w2w-step__num {
	background: var(--w2w-danger);
	color: var(--w2w-surface);
	font-size: 0;
}

.w2w-flow.is-enhanced .w2w-step.is-incomplete .w2w-step__num::after {
	content: "!";
	font-size: var(--w2w-text-sm);
}

.w2w-flow.is-enhanced .w2w-step.is-incomplete .w2w-step__summary {
	color: var(--w2w-danger);
}

.w2w-flow .w2w-flow__bar li.is-incomplete {
	color: var(--w2w-danger);
}

.w2w-flow .w2w-flow__bar li.is-incomplete::before {
	background: var(--w2w-danger);
}

.w2w-flow .w2w-progress li.is-incomplete {
	color: var(--w2w-danger);
}

.w2w-flow .w2w-progress li.is-incomplete::before {
	content: "!";
	background: var(--w2w-danger);
	border-color: var(--w2w-danger);
}

/* A required field left empty, or filled in wrong: a red outline, and red
 * label text, until it is right. */
.w2w-ui.w2w-flow input.is-invalid,
.w2w-ui.w2w-flow select.is-invalid,
.w2w-ui.w2w-flow textarea.is-invalid {
	border-color: var(--w2w-danger);
	background: var(--w2w-danger-bg);
}

.w2w-ui.w2w-flow .w2w-field.is-invalid > label {
	color: var(--w2w-danger);
}

.w2w-ui.w2w-flow label:has(> input[type="checkbox"].is-invalid) {
	color: var(--w2w-danger);
}

.w2w-ui.w2w-flow input[type="checkbox"].is-invalid {
	outline: 2px solid var(--w2w-danger);
	outline-offset: 1px;
}

.w2w-ui.w2w-flow [data-w2w-rule].is-invalid .w2w-event-option,
.w2w-ui.w2w-flow [data-w2w-rule].is-invalid .w2w-options label {
	border-color: var(--w2w-danger);
}

.w2w-flow .w2w-tab.is-incomplete {
	color: var(--w2w-danger);
}

.w2w-flow .w2w-tab.is-incomplete::after {
	content: " !";
}

.w2w-flow .w2w-step__body {
	container-type: inline-size;
	padding: 0 var(--w2w-space-6) var(--w2w-space-6);
}

.w2w-flow.is-enhanced .w2w-step:not(.is-current) .w2w-step__body {
	display: none;
}

.w2w-flow .w2w-step__lead {
	color: var(--w2w-text-secondary);
	font-size: var(--w2w-text-sm);
	margin: 0 0 var(--w2w-space-4);
}

.w2w-flow .w2w-subhead {
	font-size: var(--w2w-text-sm);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--w2w-muted);
	margin: 0 0 var(--w2w-space-2);
	padding: 0;
}

.w2w-flow [tabindex="-1"]:focus {
	outline: none;
}

.w2w-ui.w2w-flow .w2w-acknowledgements > legend {
	float: left;
	width: 100%;
	margin: 0 0 var(--w2w-space-2);
}

.w2w-flow .w2w-acknowledgements > legend + * {
	clear: both;
}

.w2w-flow .w2w-step__error {
	margin: var(--w2w-space-4) 0 0;
}

.w2w-flow .w2w-step__nav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--w2w-space-3);
	margin: var(--w2w-space-6) 0 0;
}

.w2w-flow:not(.is-enhanced) .w2w-step__nav {
	justify-content: flex-end;
}

.w2w-flow .w2w-link-button,
.w2w-flow .w2w-step__edit {
	background: none;
	border: 0;
	padding: var(--w2w-space-2) 0;
	min-height: var(--w2w-touch);
	font-family: inherit;
	font-size: var(--w2w-text-base);
	font-weight: 600;
	color: var(--w2w-primary);
	cursor: pointer;
}

.w2w-flow .w2w-step__edit {
	font-size: var(--w2w-text-sm);
	text-decoration: underline;
}

/* ---------------------------------------------------------------- fields */

.w2w-ui.w2w-flow fieldset {
	border: 0;
	border-radius: 0;
	padding: 0;
	margin: 0;
}

.w2w-ui.w2w-flow legend {
	padding: 0;
}

.w2w-flow .w2w-fields {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--w2w-space-4);
}

.w2w-ui.w2w-flow .w2w-field > label:not(:has(> input)) {
	display: block;
	font-size: var(--w2w-text-sm);
	font-weight: 600;
	color: var(--w2w-text);
	margin: 0 0 var(--w2w-space-2);
}

.w2w-ui.w2w-flow label:has(> input[type="checkbox"]),
.w2w-ui.w2w-flow label:has(> input[type="radio"]) {
	margin: 0;
}

.w2w-flow .w2w-optional {
	font-weight: 400;
	color: var(--w2w-muted);
}

.w2w-ui.w2w-flow input[type="text"],
.w2w-ui.w2w-flow input[type="email"],
.w2w-ui.w2w-flow input[type="tel"],
.w2w-ui.w2w-flow input[type="number"],
.w2w-ui.w2w-flow input[type="date"],
.w2w-ui.w2w-flow select,
.w2w-ui.w2w-flow textarea {
	border-color: var(--w2w-border-strong);
}

.w2w-ui.w2w-flow textarea {
	min-height: calc(var(--w2w-touch) * 2);
}

.w2w-flow .w2w-field--end {
	align-self: end;
}

.w2w-flow .w2w-keys {
	margin-top: var(--w2w-space-4);
}

.w2w-flow .w2w-checks,
.w2w-ui.w2w-flow .w2w-acknowledgements,
.w2w-ui.w2w-flow .w2w-rider + .w2w-rider {
	margin-top: var(--w2w-space-5);
	padding-top: var(--w2w-space-5);
	border-top: 1px solid var(--w2w-border);
}

.w2w-ui.w2w-flow .w2w-rider {
	margin-top: var(--w2w-space-5);
}

.w2w-flow .w2w-rider > legend {
	font-size: var(--w2w-text-sm);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--w2w-muted);
	margin: 0 0 var(--w2w-space-3);
}

.w2w-flow.is-enhanced .w2w-rider > legend {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
}

.w2w-ui.w2w-flow.is-enhanced .w2w-rider + .w2w-rider {
	border-top: 0;
	padding-top: 0;
}

.w2w-flow.is-enhanced [data-w2w-panel]:not(.is-active) {
	display: none;
}

.w2w-flow .w2w-callout {
	font-size: var(--w2w-text-sm);
	color: var(--w2w-text-secondary);
	background: var(--w2w-page-bg);
	border: 1px solid var(--w2w-border);
	border-radius: var(--w2w-radius-md);
	padding: var(--w2w-space-3) var(--w2w-space-4);
	margin: 0 0 var(--w2w-space-4);
}

.w2w-flow .w2w-callout .w2w-intro {
	font-weight: 600;
	color: var(--w2w-text);
	margin: 0 0 var(--w2w-space-1);
}

.w2w-ui.w2w-flow .w2w-callout .w2w-rules {
	background: none;
	border: 0;
	margin: 0;
	padding: 0 0 0 var(--w2w-space-5);
}

.w2w-ui.w2w-flow .w2w-codes,
.w2w-ui.w2w-flow .w2w-event-days {
	margin-top: var(--w2w-space-5);
}

.w2w-ui.w2w-flow .w2w-event-days:first-child {
	margin-top: 0;
}

/* Short choices — licence codes, days — as a wrap of bordered chips
 * rather than one long column of rows. */
.w2w-flow .w2w-options {
	display: flex;
	flex-wrap: wrap;
	gap: var(--w2w-space-2);
}

.w2w-ui.w2w-flow .w2w-options label {
	align-items: center;
	gap: var(--w2w-space-2);
	border: 1px solid var(--w2w-border-strong);
	border-radius: var(--w2w-radius-md);
	padding: var(--w2w-space-2) var(--w2w-space-3);
	background: var(--w2w-surface);
}

.w2w-ui.w2w-flow .w2w-options label:has(input:checked) {
	border-color: var(--w2w-primary);
	background: var(--w2w-primary-tint);
}

.w2w-flow .w2w-options input[type="checkbox"] {
	margin-top: 0;
}

.w2w-flow .w2w-consents {
	display: grid;
	gap: 0;
	margin-top: var(--w2w-space-2);
}

/* ------------------------------------------------------------------ tabs */

.w2w-flow .w2w-tabs {
	display: flex;
	gap: var(--w2w-space-2);
	border-bottom: 1px solid var(--w2w-border);
	margin: var(--w2w-space-5) 0 0;
}

.w2w-flow .w2w-tab {
	background: none;
	border: 0;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
	padding: var(--w2w-space-2) var(--w2w-space-4);
	min-height: var(--w2w-touch);
	font-family: inherit;
	font-size: var(--w2w-text-sm);
	font-weight: 700;
	color: var(--w2w-muted);
	cursor: pointer;
}

.w2w-flow .w2w-tab[aria-selected="true"] {
	color: var(--w2w-primary);
	border-bottom-color: var(--w2w-primary);
}

.w2w-flow .w2w-tab.is-complete:not(.is-incomplete)::after {
	content: " \2713";
	color: var(--w2w-success);
}

/* ------------------------------------------------------- events & routes */

.w2w-flow .w2w-event-option {
	border: 1px solid var(--w2w-border);
	border-radius: var(--w2w-radius-md);
	margin: 0 0 var(--w2w-space-3);
	background: var(--w2w-surface);
}

.w2w-flow .w2w-event-option:has(> label > input:checked) {
	border-color: var(--w2w-primary);
}

.w2w-ui.w2w-flow .w2w-event-option > label {
	align-items: center;
	margin: 0;
	padding: var(--w2w-space-3) var(--w2w-space-4);
	font-weight: 600;
	font-size: var(--w2w-text-base);
}

.w2w-flow .w2w-event-option__name {
	flex: 1 1 0;
	min-width: 0;
}

.w2w-flow .w2w-event-option__dates {
	font-size: var(--w2w-text-sm);
	font-weight: 400;
	color: var(--w2w-muted);
}

.w2w-flow .w2w-event-routes {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--w2w-space-3);
	padding: 0 var(--w2w-space-4) var(--w2w-space-4);
}

/* An event not ticked is one line; its transfers appear once it is. A
 * browser without :has() shows every transfer, as before. */
@supports selector(:has(*)) {
	.w2w-flow .w2w-event-option:not(:has(> label > input:checked)) .w2w-event-routes {
		display: none;
	}
}

.w2w-flow .w2w-route-option {
	border: 1px solid var(--w2w-border);
	border-radius: var(--w2w-radius-md);
	padding: var(--w2w-space-3) var(--w2w-space-4);
	background: var(--w2w-surface);
}

.w2w-flow .w2w-route-option:has(input:checked) {
	border-color: var(--w2w-primary);
	background: var(--w2w-primary-tint);
}

.w2w-ui.w2w-flow .w2w-route-option > label {
	margin: 0;
	padding: 0;
	font-weight: 600;
	line-height: 1.4;
}

.w2w-flow .w2w-route-option__from,
.w2w-flow .w2w-route-option details {
	margin: var(--w2w-space-1) 0 0 34px;
	font-size: var(--w2w-text-sm);
	color: var(--w2w-text-secondary);
}

.w2w-flow .w2w-route-option details .w2w-scenarios {
	margin-top: var(--w2w-space-2);
	background: var(--w2w-surface);
	border: 1px solid var(--w2w-border);
	border-radius: var(--w2w-radius-md);
}

/* The three figures, one row each, inside a card too narrow for a
 * three-column table: scenario and amount on a line, the condition under. */
.w2w-flow .w2w-route-option .w2w-scenarios thead {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
}

.w2w-flow .w2w-route-option .w2w-scenarios tr {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 0 var(--w2w-space-3);
	padding: var(--w2w-space-2) var(--w2w-space-3);
	border-bottom: 1px solid var(--w2w-border);
}

.w2w-flow .w2w-route-option .w2w-scenarios tr:last-child {
	border-bottom: 0;
}

.w2w-flow .w2w-route-option .w2w-scenarios th,
.w2w-flow .w2w-route-option .w2w-scenarios td {
	padding: 0;
	border: 0;
}

.w2w-flow .w2w-route-option .w2w-scenarios td {
	font-weight: 600;
	color: var(--w2w-text);
	white-space: nowrap;
}

.w2w-flow .w2w-route-option .w2w-scenarios td:last-child {
	grid-column: 1 / -1;
	font-size: var(--w2w-text-xs);
	font-weight: 400;
	color: var(--w2w-muted);
	white-space: normal;
}

/* --------------------------------------------------------------- summary */

.w2w-flow .w2w-summary {
	background: var(--w2w-surface);
	border: 1px solid var(--w2w-border);
	border-radius: var(--w2w-radius-lg);
	padding: var(--w2w-space-6);
}

.w2w-flow .w2w-summary__title {
	font-size: var(--w2w-text-base);
	font-weight: 700;
	margin: 0 0 var(--w2w-space-3);
}

.w2w-flow .w2w-summary__line {
	display: grid;
	gap: var(--w2w-space-1);
	font-size: var(--w2w-text-sm);
	padding: var(--w2w-space-2) 0;
	border-top: 1px solid var(--w2w-border);
	margin: 0;
}

.w2w-flow .w2w-summary__line span {
	color: var(--w2w-text);
	font-weight: 600;
}

.w2w-flow .w2w-summary__line small {
	display: block;
	font-size: var(--w2w-text-xs);
	font-weight: 400;
	color: var(--w2w-muted);
}

.w2w-flow .w2w-summary__line strong {
	white-space: nowrap;
}

.w2w-flow .w2w-summary__empty {
	font-size: var(--w2w-text-sm);
	color: var(--w2w-muted);
	padding: var(--w2w-space-2) 0;
	border-top: 1px solid var(--w2w-border);
	margin: 0;
}

.w2w-flow .w2w-summary__total {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--w2w-space-1) var(--w2w-space-3);
	padding-top: var(--w2w-space-3);
	margin-top: var(--w2w-space-1);
	border-top: 1px solid var(--w2w-text);
	font-size: var(--w2w-text-sm);
}

.w2w-flow .w2w-summary__total strong {
	font-size: var(--w2w-text-lg);
}

.w2w-flow .w2w-summary__note {
	font-size: var(--w2w-text-xs);
	color: var(--w2w-muted);
	margin: var(--w2w-space-2) 0 0;
}

.w2w-flow .w2w-summary dl {
	margin: 0;
	font-size: var(--w2w-text-sm);
}

.w2w-flow .w2w-summary dt {
	color: var(--w2w-muted);
	font-size: var(--w2w-text-xs);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin: var(--w2w-space-3) 0 0;
}

.w2w-flow .w2w-summary dd {
	margin: var(--w2w-space-1) 0 0;
	font-weight: 600;
}

.w2w-flow .w2w-progress {
	display: grid;
	gap: var(--w2w-space-2);
	list-style: none;
	margin: var(--w2w-space-5) 0 0;
	padding: var(--w2w-space-5) 0 0;
	border-top: 1px solid var(--w2w-border);
	font-size: var(--w2w-text-sm);
	color: var(--w2w-muted);
}

.w2w-flow .w2w-progress li {
	display: flex;
	align-items: center;
	gap: var(--w2w-space-2);
}

.w2w-flow .w2w-progress li::before {
	content: "";
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 18px;
	height: 18px;
	border-radius: var(--w2w-radius-pill);
	border: 1px solid var(--w2w-border-strong);
	font-size: 11px;
	color: var(--w2w-surface);
}

.w2w-flow .w2w-progress li.is-done {
	color: var(--w2w-text);
}

.w2w-flow .w2w-progress li.is-done::before {
	content: "\2713";
	background: var(--w2w-success);
	border-color: var(--w2w-success);
}

.w2w-flow .w2w-progress li.is-current {
	color: var(--w2w-primary);
	font-weight: 700;
}

.w2w-flow .w2w-progress li.is-current::before {
	border: 2px solid var(--w2w-primary);
}

.w2w-ui.w2w-flow .w2w-summary button[type="submit"] {
	width: 100%;
	margin-top: var(--w2w-space-5);
}

.w2w-ui.w2w-flow button:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

.w2w-flow .w2w-summary ul {
	margin: var(--w2w-space-2) 0 0;
	padding: 0 0 0 var(--w2w-space-5);
	font-size: var(--w2w-text-sm);
}


/* --------------------------------------------- saving a form for later */

.w2w-ui.w2w-flow .w2w-save-button {
	background: none;
	border: 0;
	min-height: var(--w2w-touch);
	padding: var(--w2w-space-2) 0;
	font-family: inherit;
	font-size: var(--w2w-text-sm);
	font-weight: 600;
	color: var(--w2w-primary);
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.w2w-ui.w2w-flow .w2w-save-button:hover {
	background: none;
	color: var(--w2w-primary-hover);
}

.w2w-flow .w2w-flow__head-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: var(--w2w-space-1) var(--w2w-space-4);
}

.w2w-flow .w2w-flow__head > .w2w-save-button {
	margin-left: auto;
}

.w2w-ui.w2w-flow .w2w-summary .w2w-save-button {
	display: block;
	width: 100%;
	text-align: center;
	margin-top: var(--w2w-space-2);
}

.w2w-flow .w2w-step__nav .w2w-save-button {
	margin-left: auto;
}

.w2w-flow .w2w-draft-notices {
	margin-bottom: var(--w2w-space-4);
}

.w2w-flow .w2w-draft-notices:empty {
	display: none;
}

.w2w-ui .w2w-notices.w2w-notices--success {
	background: var(--w2w-success-bg);
	border-color: var(--w2w-success-border);
}

.w2w-flow .w2w-draft-link {
	overflow-wrap: anywhere;
	font-size: var(--w2w-text-sm);
}

/* The dialog after a refusal. Without the script it is simply open, in the
 * page, above the form; with it, a modal. */
.w2w-flow .w2w-dialog {
	position: relative;
	max-width: 560px;
	width: 100%;
	margin: 0 0 var(--w2w-space-4);
	padding: var(--w2w-space-6);
	background: var(--w2w-surface);
	color: var(--w2w-text);
	border: 1px solid var(--w2w-danger-border);
	border-radius: var(--w2w-radius-lg);
	font-family: var(--w2w-font);
}

.w2w-flow .w2w-dialog:modal {
	position: fixed;
	margin: auto;
	width: calc(100% - var(--w2w-space-8));
	max-height: calc(100% - var(--w2w-space-8));
	overflow: auto;
}

.w2w-flow .w2w-dialog::backdrop {
	background: rgba(15, 23, 42, 0.5);
}

.w2w-flow .w2w-dialog__title {
	font-size: var(--w2w-text-lg);
	font-weight: 700;
	margin: 0 0 var(--w2w-space-3);
}

.w2w-flow .w2w-dialog__save {
	margin-top: var(--w2w-space-4);
	padding-top: var(--w2w-space-4);
	border-top: 1px solid var(--w2w-border);
}

.w2w-ui.w2w-flow .w2w-dialog__save label {
	display: block;
	margin: 0 0 var(--w2w-space-2);
	font-weight: 600;
	color: var(--w2w-text);
}

.w2w-flow .w2w-dialog__row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--w2w-space-2);
}

.w2w-flow .w2w-dialog__row input {
	flex: 1 1 14em;
}

.w2w-ui.w2w-flow .w2w-dialog__row button[type="submit"] {
	background: var(--w2w-surface);
	color: var(--w2w-primary);
	border: 1px solid var(--w2w-primary);
}

.w2w-ui.w2w-flow .w2w-dialog__row button[type="submit"]:hover {
	background: var(--w2w-primary-tint);
}

.w2w-flow .w2w-dialog__actions {
	display: flex;
	justify-content: flex-end;
	margin-top: var(--w2w-space-4);
}

/* ------------------------------------------------------------ mobile bar */

.w2w-flow .w2w-flow__mbar {
	position: sticky;
	bottom: 0;
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--w2w-space-4);
	margin: var(--w2w-space-4) 0 0;
	padding: var(--w2w-space-3) var(--w2w-space-4);
	background: var(--w2w-surface);
	border: 1px solid var(--w2w-border);
	border-radius: var(--w2w-radius-lg) var(--w2w-radius-lg) 0 0;
}

.w2w-flow .w2w-flow__mbar-text {
	min-width: 0;
	margin: 0;
	font-size: var(--w2w-text-xs);
	color: var(--w2w-muted);
	line-height: 1.4;
}

.w2w-flow .w2w-flow__mbar-text span {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.w2w-flow .w2w-flow__mbar-text strong {
	display: block;
	font-size: var(--w2w-text-base);
	color: var(--w2w-text);
	white-space: nowrap;
}

.w2w-flow .w2w-flow__mbar .w2w-button {
	flex: none;
}

/* ------------------------------------------------- the widths that change */

@container (min-width: 520px) {
	.w2w-flow .w2w-fields {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.w2w-flow .w2w-fields--3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.w2w-flow .w2w-field--full {
		grid-column: 1 / -1;
	}

	.w2w-flow .w2w-event-routes {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@container w2w-flow (max-width: 519px) {
	.w2w-flow .w2w-flow__bar li {
		font-size: 0;
	}

	.w2w-flow .w2w-step__head {
		padding: var(--w2w-space-4);
	}

	.w2w-flow .w2w-step__body,
	.w2w-flow .w2w-card {
		padding: 0 var(--w2w-space-4) var(--w2w-space-4);
	}

	.w2w-flow .w2w-card {
		padding-top: var(--w2w-space-4);
	}

	.w2w-flow .w2w-step__title {
		flex: 1 1 0;
	}

	.w2w-flow .w2w-step__summary {
		order: 2;
		flex-basis: 100%;
		text-align: left;
		padding-left: 40px;
	}

	.w2w-flow .w2w-flow__title {
		font-size: var(--w2w-text-xl);
	}

	.w2w-flow .w2w-event-option__dates {
		display: none;
	}
}

/* Below the two-column width the bar along the bottom carries "Continue",
 * so the same button inside the step would only be a second copy of it. */
@container w2w-flow (max-width: 959px) {
	.w2w-flow.is-enhanced .w2w-step__nav [data-w2w-next] {
		display: none;
	}
}

@container w2w-flow (min-width: 960px) {
	.w2w-flow .w2w-flow__layout {
		grid-template-columns: minmax(0, 1fr) 320px;
	}

	.w2w-flow .w2w-flow__aside {
		display: block;
		position: sticky;
		top: var(--w2w-space-6);
	}

	.w2w-flow:not(.is-enhanced) .w2w-flow__aside.w2w-js-only {
		display: none;
	}

	.w2w-flow:not(.is-enhanced) .w2w-flow__layout:has(> .w2w-flow__aside.w2w-js-only) {
		grid-template-columns: minmax(0, 1fr);
	}

	.w2w-flow .w2w-flow__mbar {
		display: none;
	}
}

/* ===================================================== mobile (<768px) */

@media (max-width: 767px) {
	.w2w-overview.w2w-ui,
	.w2w-drivers.w2w-ui,
	.w2w-desk.w2w-ui,
	.w2w-live-view.w2w-ui,
	.w2w-print-sheets.w2w-ui,
	.w2w-assignments.w2w-ui {
		padding: var(--w2w-space-4);
		border-radius: 0;
	}

	.w2w-ui fieldset {
		padding: var(--w2w-space-4);
	}

	/*
	 * Live View specifically: no horizontal scroll at any width down to
	 * 320px. The card layout above already reflows on its own — this
	 * only tightens the card's own row so a long device label and its
	 * status pill never force the row wider than the viewport.
	 */
	.w2w-live-view.w2w-ui .w2w-live-card__row {
		flex-wrap: wrap;
	}
}

@media (max-width: 480px) {
	.w2w-ui h1 {
		font-size: 24px;
	}

	.w2w-overview.w2w-ui h1 {
		font-size: 22px;
	}

	.w2w-ui h2 {
		font-size: var(--w2w-text-lg);
	}
}

/* ------------------------------------------------------------------
 * Attachments on a record (Admin\DocumentViewer): a thumbnail each,
 * opening full size in a new tab.
 * ------------------------------------------------------------------ */
.w2w-doc-thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 8px 0 12px;
	padding: 0;
	list-style: none;
}

.w2w-doc-thumbs li {
	margin: 0;
}

.w2w-doc-thumb {
	display: grid;
	gap: 4px;
	width: 168px;
	padding: 4px 4px 8px;
	border: 1px solid #cbd5e1;
	border-radius: 8px;
	background: #fff;
	color: #0f172a;
	text-decoration: none;
}

.w2w-doc-thumb:hover,
.w2w-doc-thumb:focus-visible {
	border-color: #1e3a8a;
	box-shadow: 0 0 0 1px #1e3a8a;
}

.w2w-doc-thumb__image,
.w2w-doc-thumb__file {
	display: block;
	width: 160px;
	height: 104px;
	border-radius: 5px;
	background: #f1f5f9;
	object-fit: cover;
}

.w2w-doc-thumb__file {
	position: relative;
	/* A page seen small: a margin, a heading, lines of text. */
	background:
		linear-gradient(#94a3b8, #94a3b8) 22px 18px / 70px 6px no-repeat,
		repeating-linear-gradient(#f8fafc 0 9px, #cbd5e1 9px 11px) 22px 34px / 116px 58px no-repeat,
		#f8fafc;
	box-shadow: inset 0 0 0 1px #e2e8f0;
	color: transparent;
	font-size: 0;
}

.w2w-doc-thumb__file::after {
	content: "PDF";
	position: absolute;
	right: 8px;
	bottom: 8px;
	padding: 2px 6px;
	border-radius: 4px;
	background: #b91c1c;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
}

.w2w-doc-thumb__label {
	padding: 0 4px;
	font-size: 13px;
	font-weight: 600;
}

.w2w-doc-thumb__hint {
	padding: 0 4px;
	color: #475569;
	font-size: 12px;
}