/*!
 * LMCU Eligibility Wizard — frontend styles.
 *
 * Anchored to docs/visual-contract.md (locked 2026-05-26), which in turn
 * mirrors the lmcu-assessments plugin's design system. Single elevated
 * white shell, tinted-panel inner structure, lime primary CTA with a dark
 * label (UX-01 / ADR-043 — LMCU brand inversion: --primary is danger,
 * --secondary is a supporting action colour, --accent/lime is the CTA), lime
 * focus rings everywhere EXCEPT the lime CTA itself (which takes a navy ring so
 * focus stays visible), ACSS-flat radius fallbacks.
 *
 * Variable namespace: --lmcu-ewiz-* mapped to ACSS variables with
 * hardcoded fallbacks. ACSS-loaded production picks up LMCU's real
 * palette; fallbacks keep the wizard visually sane on a vanilla install.
 *
 * Native CSS nesting + BEM. No SCSS, no PostCSS.
 */

.lmcu-wizard {
	/* ---- Typography ----
	 * Type goes through ACSS's fluid `--text-*` scale (acss-frames doctrine:
	 * never set a fixed font-size), via the same token pattern as spacing. On
	 * ACSS-loaded production the wizard's type tracks the site's fluid scale and
	 * the steps follow a clean ratio; a vanilla install uses the px fallback.
	 * The wizard maps onto `--text-*` (not the larger page-heading `--h*`): its
	 * headings are widget-level, not page sections, so they stay compact. */
	--lmcu-ewiz-font-family: inherit;
	--lmcu-ewiz-font-size:   var(--text-m, 16px);
	--lmcu-ewiz-text-xs:     var(--text-xs, 13px);
	--lmcu-ewiz-text-s:      var(--text-s,  14px);
	--lmcu-ewiz-text-m:      var(--text-m,  16px);
	--lmcu-ewiz-text-l:      var(--text-l,  18px);
	--lmcu-ewiz-text-xl:     var(--text-xl, 22px);

	/* ---- Surfaces ---- */
	--lmcu-ewiz-surface:        var(--white,             #ffffff);
	--lmcu-ewiz-surface-muted:  var(--tertiary-trans-30, #f8fafc);
	--lmcu-ewiz-surface-inset:  var(--tertiary-trans-50, #f1f5f9);

	/* ---- Text ---- */
	--lmcu-ewiz-text:        inherit;
	--lmcu-ewiz-text-muted:  var(--base-semi-dark, #2d3748);
	--lmcu-ewiz-text-faint:  var(--base-trans-80,  #475569);

	/* ---- Borders ---- */
	--lmcu-ewiz-border:        var(--border-color-light, #cbd5e1);
	--lmcu-ewiz-border-strong: var(--border-color-dark,  #94a3b8);
	/* GDS-style form input border: 2px in the near-black text colour
	 * (GOV.UK Design System uses the text colour for input borders). */
	--lmcu-ewiz-border-input:  var(--base,               #0b0c0c);

	/* ---- Layout ---- */
	--lmcu-ewiz-max-width: min(100%, 720px);

	/* ---- Semantic palette (LMCU brand inversion) ----
	 * --primary (LMCU pink) is danger. --secondary (LMCU navy) is the
	 * primary action colour. --accent (LMCU lime) is the focus colour. */
	--lmcu-ewiz-primary:          var(--secondary,       #0b3954);
	--lmcu-ewiz-primary-hover:    var(--secondary-hover, #0d4463);
	--lmcu-ewiz-primary-contrast: var(--white,           #ffffff);
	/* Translucent navy — the slider's unfilled track (session 23 #3, the live
	 * calculator's `--secondary-trans-20`) + the selected loan-card ring (#5). */
	--lmcu-ewiz-primary-trans-20: var(--secondary-trans-20, rgba(11, 57, 84, 0.2));
	--lmcu-ewiz-primary-trans-40: var(--secondary-trans-40, rgba(11, 57, 84, 0.4));

	--lmcu-ewiz-danger:    var(--primary,             #b91c1c);
	/* Error/validation TEXT (session 26, F1, ADR-073). `--lmcu-ewiz-danger`
	 * (LMCU `--primary` = pink #ff0055 on the ACSS site) is only ~3.9:1 on white,
	 * which FAILS WCAG AA 1.4.3 for body text — fine for the 3px border/accent
	 * (clears the 3:1 UI bar) but not for the message itself. Error copy uses this
	 * darker on-brand crimson (`--primary-semi-dark` #b3003b, ~7.05:1) instead. */
	--lmcu-ewiz-danger-text: var(--primary-semi-dark, #b3003b);
	--lmcu-ewiz-danger-bg: var(--primary-ultra-light, #fef2f2);

	--lmcu-ewiz-info:    var(--tertiary-semi-dark,   #0891b2);
	--lmcu-ewiz-info-bg: var(--tertiary-ultra-light, #ecfeff);

	--lmcu-ewiz-focus:      var(--accent, #ffdd00);
	--lmcu-ewiz-focus-text: var(--base,   #0b0c0c);

	/* ---- Primary CTA (UX-01 / ADR-043) ----
	 * Lime (--accent) background with a dark (--base) label. Lime+base ≈ 12:1,
	 * passes WCAG AA; white-on-pink (the old --btn--primary) measured 3.9:1 and
	 * failed. Deliberate LMCU deviation: the acss-frames convention reserves
	 * --accent for focus/highlights, not button backgrounds — Ben's documented
	 * decision (session 15). The CTA's own focus ring is NAVY (--secondary), not
	 * the global lime ring, so focus stays visible on the lime fill (WCAG 2.4.7). */
	--lmcu-ewiz-cta-bg:         var(--accent,       #e0ff4f);
	/* Hover LIGHTENS the lime (matches ACSS's own `.btn--accent`, which lightens on
	 * hover) so the dark `--base` label keeps its contrast. Darkening (`--accent-dark`)
	 * pushed it toward a deep green that the charcoal text washed out against. */
	--lmcu-ewiz-cta-bg-hover:   var(--accent-light, #ebff85);
	--lmcu-ewiz-cta-text:       var(--base,         #272d37);
	--lmcu-ewiz-cta-focus-ring: var(--secondary,    #0b3954);

	/* ---- Radii (ACSS-flat fallback) ---- */
	--lmcu-ewiz-radius-sm: var(--radius-xs, 0);
	--lmcu-ewiz-radius-md: var(--radius,    0);
	--lmcu-ewiz-radius-lg: var(--radius-l,  0);

	/* ---- Spacing ----
	 * The wizard's margins / paddings / gaps go through ACSS's `--space-*`
	 * scale (acss-frames doctrine: never hard-code spacing). On ACSS-loaded
	 * production they pick up LMCU's fluid spacing rhythm; on a vanilla install
	 * the px fallback holds. Component spacing snaps to this 6-step scale;
	 * sub-token micro-positioning (1–2px indicator offsets, the `-1px` SR clip,
	 * the safe-area `calc()`s, and the fixed-nav reservation) stays in px as a
	 * documented exception — those are precision offsets, not spacing decisions. */
	--lmcu-ewiz-space-2xs: var(--space-2xs, 4px);
	--lmcu-ewiz-space-xs:  var(--space-xs,  8px);
	--lmcu-ewiz-space-s:   var(--space-s,   12px);
	--lmcu-ewiz-space-m:   var(--space-m,   16px);
	--lmcu-ewiz-space-l:   var(--space-l,   20px);
	--lmcu-ewiz-space-xl:  var(--space-xl,  24px);

	/* ---- Elevation ---- */
	--lmcu-ewiz-shadow-card: var(
		--box-shadow-m,
		0 4px 12px rgba(15, 23, 42, .08),
		0 1px 3px rgba(15, 23, 42, .04)
	);

	/* ---- Motion ---- */
	--lmcu-ewiz-transition: 150ms ease;

	/* ---- Outer shell ---- */
	font-family: var(--lmcu-ewiz-font-family);
	font-size:   var(--lmcu-ewiz-font-size);
	color:       var(--lmcu-ewiz-text);
	background:  var(--lmcu-ewiz-surface);
	border-radius: var(--lmcu-ewiz-radius-lg);
	box-shadow:    var(--lmcu-ewiz-shadow-card);
	max-width:     var(--lmcu-ewiz-max-width);
	margin:        0 auto;
	overflow:      hidden;
	line-height:   1.55;
	position:      relative; /* anchor for the absolute __restart button */
}

/* Box-sizing scoped under the wizard so inputs at width:100% don't
 * overflow their containers. Lower specificity via :where(). */
:where(.lmcu-wizard) *,
:where(.lmcu-wizard) *::before,
:where(.lmcu-wizard) *::after {
	box-sizing: border-box;
}
:where(.lmcu-wizard) button { font: inherit; cursor: pointer; color: inherit; }
:where(.lmcu-wizard) input,
:where(.lmcu-wizard) select,
:where(.lmcu-wizard) textarea { font: inherit; color: inherit; }

/* Mobile: break out of the ACSS section gutter and drop the card chrome
 * so the wizard uses the full viewport width. Mirrors the assessments
 * plugin's Bricks-aware :has() pattern — pushes every Bricks wrapper
 * between the section and the wizard to grid-column: full, strips their
 * horizontal padding, and zeroes the shell's own corners/shadow. */
@media (max-width: 478px) {
	/* Scoped to :not(--minimal):not(--lead): the full wizard goes full-bleed on
	 * phones, but the lead-capture box modes are layout-neutral and sit in their
	 * parent container's flow, so the parent (not this Bricks-aware breakout) owns
	 * the width + chrome at every width. */
	.brxe-section:has(.lmcu-wizard:not(.lmcu-wizard--minimal):not(.lmcu-wizard--lead)) {
		overflow-x: clip;
	}
	.brxe-section:has(.lmcu-wizard:not(.lmcu-wizard--minimal):not(.lmcu-wizard--lead)) > .brxe-container,
	.brxe-section:has(.lmcu-wizard:not(.lmcu-wizard--minimal):not(.lmcu-wizard--lead)) > .brxe-block,
	.brxe-section:has(.lmcu-wizard:not(.lmcu-wizard--minimal):not(.lmcu-wizard--lead)) > .brxe-shortcode,
	.brxe-section:has(.lmcu-wizard:not(.lmcu-wizard--minimal):not(.lmcu-wizard--lead)) > .brxe-div {
		grid-column: full;
	}
	.brxe-section:has(.lmcu-wizard:not(.lmcu-wizard--minimal):not(.lmcu-wizard--lead)) .brxe-container,
	.brxe-section:has(.lmcu-wizard:not(.lmcu-wizard--minimal):not(.lmcu-wizard--lead)) .brxe-block,
	.brxe-section:has(.lmcu-wizard:not(.lmcu-wizard--minimal):not(.lmcu-wizard--lead)) .brxe-shortcode,
	.brxe-section:has(.lmcu-wizard:not(.lmcu-wizard--minimal):not(.lmcu-wizard--lead)) .brxe-div {
		display: block;
		padding-inline: 0;
		min-width: 0;
		max-width: 100%;
	}
	.lmcu-wizard:not(.lmcu-wizard--minimal):not(.lmcu-wizard--lead) {
		border-radius: 0;
		box-shadow: none;
		min-width: 0;
		max-width: 100%;
	}
}

/* =============================================================
 * Shell structure: header band (optional), main content, noscript,
 * live region. The header band is rendered selectively per the
 * visual contract's locked decision 4.
 * ============================================================= */

.lmcu-wizard__header {
	background: var(--lmcu-ewiz-surface);
}
.lmcu-wizard__header:has(.lmcu-wizard__stage-label) {
	padding: var(--lmcu-ewiz-space-m) var(--lmcu-ewiz-space-l) var(--lmcu-ewiz-space-s);
	background: var(--lmcu-ewiz-surface-muted);
}
.lmcu-wizard__header:empty {
	display: none;
}

.lmcu-wizard__content {
	padding: var(--lmcu-ewiz-space-l);
	outline: none;
}
@media (max-width: 478px) {
	.lmcu-wizard__content {
		padding: var(--lmcu-ewiz-space-m);
	}
}

.lmcu-wizard__noscript {
	padding: var(--lmcu-ewiz-space-m) var(--lmcu-ewiz-space-l);
	border-left: 3px solid var(--lmcu-ewiz-danger);
	background: var(--lmcu-ewiz-danger-bg);
}

/* =============================================================
 * Restart icon — subtle circle button in the top-right corner.
 * Persistent across screens; resets state to entry-step defaults.
 * ============================================================= */

.lmcu-wizard__restart {
	position: absolute;
	top: 8px;
	inset-inline-end: 8px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 50%;
	color: var(--lmcu-ewiz-text-muted);
	cursor: pointer;
	transition: background var(--lmcu-ewiz-transition),
	            color var(--lmcu-ewiz-transition);
	z-index: 5;
}
/* The base rule sets `display`, which beats the UA `[hidden]{display:none}`
 * (author > UA), so `button.hidden = true` alone wouldn't hide it — re-assert
 * the hide here so the entry-step hide (session 22 #4) actually takes effect
 * (the same author-vs-UA trap as the slice-3d `__detail[hidden]` fix). */
.lmcu-wizard__restart[hidden] {
	display: none;
}
.lmcu-wizard__restart:hover {
	background: var(--lmcu-ewiz-surface-inset);
	color: var(--lmcu-ewiz-text);
}
.lmcu-wizard__restart:focus-visible {
	outline: 3px solid var(--lmcu-ewiz-focus);
	outline-offset: 2px;
}
.lmcu-wizard__restart:active {
	transform: scale(0.95);
}
.lmcu-wizard__restart svg {
	display: block;
}

/* When the stage-label header band renders, vertically centre the 32px restart
 * on the stage-label text (session 23 #11). The band's top padding is the fluid
 * `--space-m` (≈30px on the ACSS site), so a fixed `top` left the icon ~13px
 * above the label; tracking the same token keeps them centred at any scale.
 * top = padding-top + (label line-height ≈19px)/2 − (restart 32px)/2 ≈ space-m − 6px. */
.lmcu-wizard__header:has(.lmcu-wizard__stage-label) + main + .lmcu-wizard__restart,
.lmcu-wizard__header:has(.lmcu-wizard__stage-label) ~ .lmcu-wizard__restart {
	top: calc(var(--lmcu-ewiz-space-m) - 6px);
}

/* Screen-reader-only live region — visually hidden but read aloud. */
.lmcu-wizard__live-region {
	position: absolute;
	inline-size: 1px;
	block-size:  1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* =============================================================
 * Typography
 * ============================================================= */

.lmcu-wizard__stage-label {
	display: block;
	font-size: var(--lmcu-ewiz-text-xs);
	font-weight: 600;
	/* Sentence case, not all-caps (LMCU brand: sentence case throughout). The
	 * label is a brand "category label" above the heading, so no uppercasing
	 * and only a hair of tracking. */
	letter-spacing: 0.01em;
	color: var(--lmcu-ewiz-text-muted);
}

.lmcu-wizard__heading {
	margin: 0 0 var(--lmcu-ewiz-space-xs);
	font-size: var(--lmcu-ewiz-text-xl);
	line-height: 1.25;
	font-weight: 700;
}
.lmcu-wizard__heading:focus,
.lmcu-wizard__heading:focus-visible {
	outline: none !important;
	box-shadow: none !important;
}

.lmcu-wizard__h2 {
	margin: var(--lmcu-ewiz-space-l) 0 var(--lmcu-ewiz-space-xs);
	font-size: var(--lmcu-ewiz-text-l);
	line-height: 1.3;
	font-weight: 700;
}

.lmcu-wizard__intro {
	margin: 0 0 var(--lmcu-ewiz-space-m);
	font-size: var(--lmcu-ewiz-text-m);
	line-height: 1.55;
	/* Cap the measure so body copy doesn't run the full card width (~90ch is
	 * past the comfortable 45-75ch reading range and reads as "a lot of text"). */
	max-width: 64ch;
}

.lmcu-wizard__helper {
	margin: var(--lmcu-ewiz-space-2xs) 0 0;
	font-size: var(--lmcu-ewiz-text-s);
	line-height: 1.55;
	max-width: 64ch;
	color: var(--lmcu-ewiz-text-muted);
}
/* Support signpost below the welcome options (session 15) — a bit more space so
 * it reads as a separate, quiet offer rather than part of the last card. */
.lmcu-wizard__helper--support {
	margin-top: var(--lmcu-ewiz-space-l);
}

/* Wellbeing helper (postcode screens, ADR-025): same shape as __helper but
 * sits below the field as its own paragraph rather than under the input.
 * Mail link uses the wizard's text colour to keep visual weight low. */
.lmcu-wizard__helper--wellbeing {
	margin: var(--lmcu-ewiz-space-s) 0 0;
}
.lmcu-wizard__helper--wellbeing a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}
.lmcu-wizard__helper--wellbeing a:hover {
	text-decoration-thickness: 2px;
}

/* Inline format-validity feedback below an input (postcode auto-progress
 * pattern, ADR-026). Muted while format-invalid, primary colour with a
 * leading checkmark glyph once the format regex passes. */
.lmcu-wizard__validity {
	margin: var(--lmcu-ewiz-space-2xs) 0 0;
	font-size: var(--lmcu-ewiz-text-xs);
	line-height: 1.55;
	color: var(--lmcu-ewiz-text-muted);
	min-height: 1.55em;
}
.lmcu-wizard__validity[hidden] { display: none; }
.lmcu-wizard__validity--valid {
	color: var(--lmcu-ewiz-primary);
	font-weight: 500;
}
.lmcu-wizard__validity--valid::before {
	content: '✓';
	display: inline-block;
	margin-inline-end: var(--lmcu-ewiz-space-xs);
	font-weight: 700;
}

.lmcu-wizard__error {
	margin: var(--lmcu-ewiz-space-2xs) 0 0;
	font-size: var(--lmcu-ewiz-text-s);
	line-height: 1.55;
	color: var(--lmcu-ewiz-danger-text); /* AA on white (F1) */
}
.lmcu-wizard__error[hidden] { display: none; }

/* Banner variant — for server failures and other non-field-specific errors.
 * Visual contract: full-width tinted block above the field with a 3px
 * danger-coloured border-left accent. */
.lmcu-wizard__error--banner {
	margin: 0 0 var(--lmcu-ewiz-space-m);
	padding: var(--lmcu-ewiz-space-s) var(--lmcu-ewiz-space-m);
	background: var(--lmcu-ewiz-danger-bg);
	border-left: 3px solid var(--lmcu-ewiz-danger);
	border-radius: var(--lmcu-ewiz-radius-sm);
}

.lmcu-wizard__fineprint {
	margin: var(--lmcu-ewiz-space-xs) 0 0;
	font-size: var(--lmcu-ewiz-text-xs);
	line-height: 1.55;
	color: var(--lmcu-ewiz-text-muted);
}

/* =============================================================
 * Form fields
 * ============================================================= */

.lmcu-wizard__field {
	display: flex;
	flex-direction: column;
	gap: var(--lmcu-ewiz-space-2xs);
	margin: var(--lmcu-ewiz-space-xs) 0;
}

.lmcu-wizard__label {
	/* Weight 600 (not 500) so the field label reads clearly as a UI label, not
	 * a second line of body prose. The intro paragraph above is 15px/400; a
	 * bold 14px label is unambiguously "the field's name", which stops the two
	 * blurring together. Spacing is handled by the `__field` flex gap, so no
	 * margin here. */
	font-size: var(--lmcu-ewiz-text-s);
	font-weight: 600;
	color: var(--lmcu-ewiz-text);
}

.lmcu-wizard__input {
	height: 48px;
	padding: 0 var(--lmcu-ewiz-space-m);
	background: var(--lmcu-ewiz-surface);
	border: 2px solid var(--lmcu-ewiz-border-input);
	border-radius: var(--lmcu-ewiz-radius-sm);
	width: 100%;
	transition: border-color var(--lmcu-ewiz-transition),
	            box-shadow var(--lmcu-ewiz-transition);
}
.lmcu-wizard__input::placeholder { color: var(--lmcu-ewiz-text-faint); }
.lmcu-wizard__input:focus {
	outline: 3px solid var(--lmcu-ewiz-focus);
	outline-offset: 0;
	box-shadow: inset 0 0 0 2px var(--lmcu-ewiz-focus-text);
}
/* GDS-style error state: the 2px border turns danger-red whenever the field
 * shows a visible inline validation error. Keyed on the error element's hidden
 * state so it tracks every field uniformly; the module also sets aria-invalid
 * on the input. Banner/server errors live outside a `__field` and so don't
 * trigger this. */
.lmcu-wizard__field:has(.lmcu-wizard__error:not([hidden])) .lmcu-wizard__input {
	border-color: var(--lmcu-ewiz-danger);
}
/* Postcode inputs are sized to imply the expected (short) length rather than
 * stretching full-width — a fixed-format field reads as "a short answer goes
 * here" (GOV.UK Design System: size text inputs to their content). `max-width`
 * + `ch` keys the box to character count and never overflows the sub-768
 * breakout; only the input narrows (label / validity / error stay full-width).
 * Covers the home + work postcode screens and the SOC inline work-postcode
 * prompt; job title / employer / email stay full-width by content type. The
 * input is border-box, so the `ch` value includes the 14px padding + 2px
 * border — sized so the "e.g. …" placeholder doesn't clip. */
.lmcu-wizard__field--postcode .lmcu-wizard__input,
.lmcu-wizard__field--soc-work-postcode .lmcu-wizard__input {
	max-width: 18ch;
}

/* =============================================================
 * Autocomplete primitive
 * ============================================================= */

.lmcu-wizard__autocomplete {
	position: relative;
}

.lmcu-wizard__autocomplete-input-wrap {
	position: relative;
	display: flex;
	align-items: center;
}

.lmcu-wizard__autocomplete-dropdown {
	position: absolute;
	top: 100%;
	inset-inline: 0;
	margin-top: var(--lmcu-ewiz-space-2xs);
	background: var(--lmcu-ewiz-surface);
	border: 1px solid var(--lmcu-ewiz-border);
	border-radius: var(--lmcu-ewiz-radius-md);
	box-shadow: var(--lmcu-ewiz-shadow-card);
	max-height: 16rem;
	overflow-y: auto;
	z-index: 5;
}
.lmcu-wizard__autocomplete-dropdown[hidden] { display: none; }

/* Reserve right-side padding inside the autocomplete input for the
 * inline spinner so the search text doesn't run under it. */
.lmcu-wizard__autocomplete .lmcu-wizard__input {
	padding-inline-end: calc(var(--lmcu-ewiz-space-m) + 1.5em);
}

.lmcu-wizard__autocomplete-option {
	padding: var(--lmcu-ewiz-space-s) var(--lmcu-ewiz-space-m);
	cursor: pointer;
	font-size: var(--lmcu-ewiz-text-m);
	line-height: 1.4;
	color: var(--lmcu-ewiz-text);
	transition: background var(--lmcu-ewiz-transition);
}
.lmcu-wizard__autocomplete-option:hover,
.lmcu-wizard__autocomplete-option--active {
	background: var(--lmcu-ewiz-surface-inset);
}

.lmcu-wizard__autocomplete-empty {
	padding: var(--lmcu-ewiz-space-s) var(--lmcu-ewiz-space-m);
	font-size: var(--lmcu-ewiz-text-s);
	color: var(--lmcu-ewiz-text-muted);
	font-style: italic;
}

/* =============================================================
 * Spinner (inline + button-loading)
 * ============================================================= */

.lmcu-wizard__spinner {
	display: inline-block;
	inline-size: 16px;
	block-size: 16px;
	border: 2px solid currentColor;
	border-block-end-color: transparent;
	border-radius: 50%;
	animation: lmcu-wizard-spin 0.8s linear infinite;
}
.lmcu-wizard__spinner--inline {
	position: absolute;
	inset-inline-end: 12px;
	inset-block-start: 50%;
	color: var(--lmcu-ewiz-primary);
	margin-block-start: -8px; /* half of size; centers vertically */
}
/* Button-loading variant — sits inline next to the button label, picks up
 * the button's text colour via currentColor on the border. */
.lmcu-wizard__spinner--button {
	vertical-align: middle;
	margin-inline-start: var(--lmcu-ewiz-space-xs);
}
/* Block variant — larger + centred, for whole-region waits (boot + the loan
 * calculator feed, session 23 #1). Same ring as the others (currentColor), just
 * scaled up with a slightly thicker stroke; navy via the wizard primary. */
.lmcu-wizard__spinner--block {
	inline-size: 36px;
	block-size: 36px;
	border-width: 3px;
	color: var(--lmcu-ewiz-primary);
}
.lmcu-wizard__spinner[hidden] { display: none; }

@keyframes lmcu-wizard-spin {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}

/* Centred loading panel (block spinner + muted label), used by the boot
 * placeholder and the loan-calculator wait. */
.lmcu-wizard__loading {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--lmcu-ewiz-space-s);
	padding-block: var(--lmcu-ewiz-space-xl);
	padding-inline: var(--lmcu-ewiz-space-m);
	text-align: center;
}
/* Boot placeholder reserves height so the shell isn't a thin sliver before the
 * first screen mounts. */
.lmcu-wizard__loading--boot { min-block-size: 200px; }
.lmcu-wizard__loading-text {
	margin: 0;
	font-size: var(--lmcu-ewiz-text-s, 14px);
	color: var(--lmcu-ewiz-text-muted);
}

/* =============================================================
 * Option cards (tinted row + indicator) — used by chooser screens.
 * Session 7b's other-routes chooser and session 8's product chooser
 * mount these. Documented here so the contract is on file.
 * ============================================================= */

.lmcu-wizard__options {
	list-style: none;
	/* Same list rhythm as the product-chooser CTAs (`__product-ctas`) so the two
	 * selection styles feel like one family. */
	margin: var(--lmcu-ewiz-space-m) 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--lmcu-ewiz-space-s);
}

.lmcu-wizard__option {
	display: flex;
	align-items: center;
	gap: var(--lmcu-ewiz-space-s);
	width: 100%;
	text-align: left;
	font-size: var(--lmcu-ewiz-text-m);
	/* Tight vertical padding + a shared 48px control height (below) so a
	 * single-line option sits at the same height as the product CTAs and the
	 * inputs. Two-line hub cards grow past it with their content. */
	padding: var(--lmcu-ewiz-space-xs) var(--lmcu-ewiz-space-m);
	background: var(--lmcu-ewiz-surface-muted);
	border: 0;
	/* Match the product-CTA corners + the wizard's 48px control height (the same
	 * height the inputs use) so every interactive row reads as one family. */
	border-radius: var(--btn-radius, var(--lmcu-ewiz-radius-md));
	color: var(--lmcu-ewiz-text);
	min-height: 48px;
	transition: background var(--lmcu-ewiz-transition),
	            box-shadow var(--lmcu-ewiz-transition);
}
.lmcu-wizard__option:hover { background: var(--lmcu-ewiz-surface-inset); }
.lmcu-wizard__option:active { transform: scale(.99); }
.lmcu-wizard__option:focus-visible {
	outline: 3px solid var(--lmcu-ewiz-focus);
	outline-offset: 2px;
}
.lmcu-wizard__option.is-selected {
	background: var(--lmcu-ewiz-info-bg);
	box-shadow: inset 0 0 0 2px var(--lmcu-ewiz-primary);
}
.lmcu-wizard__option--tertiary {
	background: transparent;
	color: var(--lmcu-ewiz-text-muted);
}
.lmcu-wizard__option--tertiary .lmcu-wizard__option-indicator {
	border-color: var(--lmcu-ewiz-border);
}

.lmcu-wizard__option-indicator {
	width: 22px;
	height: 22px;
	border: 2px solid var(--lmcu-ewiz-border-strong);
	border-radius: 50%;
	flex-shrink: 0;
	position: relative;
	background: var(--lmcu-ewiz-surface);
}
.lmcu-wizard__option[role="checkbox"] .lmcu-wizard__option-indicator {
	border-radius: 4px;
}
.lmcu-wizard__option.is-selected .lmcu-wizard__option-indicator {
	background: var(--lmcu-ewiz-primary);
	border-color: var(--lmcu-ewiz-primary);
}
.lmcu-wizard__option.is-selected .lmcu-wizard__option-indicator::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 12px;
	height: 7px;
	border-left: 2.5px solid var(--lmcu-ewiz-primary-contrast);
	border-bottom: 2.5px solid var(--lmcu-ewiz-primary-contrast);
	transform: translate(-55%, -65%) rotate(-45deg);
}
.lmcu-wizard__option-label { flex: 1; line-height: 1.4; }

/* Two-line option cards (the welcome junction + route hub): a heading +
 * description stacked beside the indicator (vs the single-line label the other
 * option lists use). Both card titles share the same size — the dominant
 * welcome card's prominence comes from its tinted fill + border ring
 * (`--primary`), not a larger title. Top-align the indicator so it lines up
 * with the title on a two-line card. (The product chooser no longer uses this
 * pattern — ADR-048 made it bare CTAs.) */
.lmcu-wizard__option--product { align-items: flex-start; }
.lmcu-wizard__option--product .lmcu-wizard__option-indicator { margin-top: 1px; }

/* SOC disambiguation cards (Q19 / ADR-036): the unit-group job title leads as
 * the headline with a muted line of sibling unit titles beneath it — same
 * two-line body shape as the product cards. Top-align the indicator so it sits
 * with the headline rather than centring on the two-line block. */
.lmcu-wizard__option--soc { align-items: flex-start; }
.lmcu-wizard__option--soc .lmcu-wizard__option-indicator { margin-top: 1px; }
.lmcu-wizard__option-body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	flex: 1;
}
.lmcu-wizard__option-title { font-weight: 600; line-height: 1.3; }
.lmcu-wizard__option-description {
	font-size: var(--lmcu-ewiz-text-xs);
	line-height: 1.4;
	color: var(--lmcu-ewiz-text-muted);
}
/* A single-unit minor group has no siblings, so its card renders headline-only
 * via __option-label rather than the two-line __option-title. Match the headline
 * weight so it reads as a peer of the two-line cards in the same picker — scoped
 * to the disambiguation screen and excluding the muted "None of these" tertiary
 * option, so other screens' single-line option lists are unaffected. */
.lmcu-wizard__screen--soc-disambiguation
	.lmcu-wizard__option:not(.lmcu-wizard__option--tertiary)
	.lmcu-wizard__option-label {
	font-weight: 600;
}

/* Welcome junction (ADR-032): the guided card is the dominant affordance —
 * a resting primary-tinted emphasis (not a selected state) so the unsure
 * median visitor falls into it. The self-directed card is deliberately quiet
 * and recedes. */
.lmcu-wizard__option--primary {
	background: var(--lmcu-ewiz-info-bg);
	box-shadow: inset 0 0 0 2px var(--lmcu-ewiz-primary);
}
.lmcu-wizard__option--primary:hover { background: var(--lmcu-ewiz-info-bg); }
.lmcu-wizard__option--quiet {
	background: transparent;
	box-shadow: inset 0 0 0 1px var(--lmcu-ewiz-border);
}
.lmcu-wizard__option--quiet:hover { background: var(--lmcu-ewiz-surface-muted); }

/* Route hub (ADR-032 / Q15): a tried-and-failed route stays fully visible and
 * tappable (the "I mistyped my postcode" recovery case is real). Dimming the
 * whole card read as "disabled" (Q15 / B9), so instead the card keeps full
 * opacity and is re-styled as a quiet outlined row — distinct from the filled,
 * tinted untried cards — and carries an explicit "tried, tap to try again"
 * chip with a retry glyph. Already-attempted, not switched off. */
.lmcu-wizard__option.is-tried {
	background: var(--lmcu-ewiz-surface);
	box-shadow: inset 0 0 0 1px var(--lmcu-ewiz-border);
}
.lmcu-wizard__option.is-tried:hover { background: var(--lmcu-ewiz-surface-inset); }
.lmcu-wizard__option-tried {
	display: inline-flex;
	align-items: center;
	gap: var(--lmcu-ewiz-space-xs);
	align-self: flex-start;
	margin-top: var(--lmcu-ewiz-space-xs);
	padding: 2px var(--lmcu-ewiz-space-xs);
	border-radius: var(--lmcu-ewiz-radius-sm);
	background: var(--lmcu-ewiz-surface-inset);
	font-size: var(--lmcu-ewiz-text-xs);
	font-weight: 600;
	color: var(--lmcu-ewiz-text-muted);
}
.lmcu-wizard__option-tried::before {
	content: '↻';
	font-size: var(--lmcu-ewiz-text-xs);
	line-height: 1;
}
/* UX-14: fixed-fact routes (family, armed-forces) drop the retry glyph — the
 * "already answered" marker doesn't invite a re-answer. */
.lmcu-wizard__option-tried--fixed::before {
	content: none;
}

/* =============================================================
 * Buttons — the primary CTA is the lime `.btn--accent` (UX-01 / ADR-043),
 * with the wizard fixing the label colour, hover, and focus ring explicitly
 * (rather than relying on ACSS's accent-button internals) so contrast and the
 * navy focus ring hold on a vanilla install too. The wizard also adds tactile
 * press and a consistent disabled state. Ghost variant is bespoke (named to
 * avoid ACSS's substring match `[class*="btn--"]` so it stays under our control).
 * ============================================================= */

.lmcu-wizard .btn:active { transform: scale(.98); }
.lmcu-wizard .btn[disabled],
.lmcu-wizard .btn:disabled { opacity: .5; cursor: not-allowed; }

/* Primary CTA: lime fill + dark label (≈ 12:1). Specificity (0,2,0) beats the
 * ACSS modifier so this wins regardless of `.btn--accent`'s own colours. */
.lmcu-wizard__nav-primary.btn {
	background: var(--lmcu-ewiz-cta-bg);
	border-color: var(--lmcu-ewiz-cta-bg);
	color: var(--lmcu-ewiz-cta-text);
}
.lmcu-wizard__nav-primary.btn:hover:not(:disabled) {
	background: var(--lmcu-ewiz-cta-bg-hover);
	border-color: var(--lmcu-ewiz-cta-bg-hover);
}
/* Navy focus ring (not the global lime ring) — a lime ring on the lime fill
 * would be near-invisible (WCAG 2.4.7). */
.lmcu-wizard__nav-primary.btn:focus-visible {
	outline: 3px solid var(--lmcu-ewiz-cta-focus-ring);
	outline-offset: 2px;
}

/* Ghost button (Back, Skip-as-button, Cancel, Save-later, terminal secondaries).
 * Composes ACSS `.btn .btn--m` IN THE MARKUP so it shares the PRIMARY CTA's exact
 * sizing — font, height, padding, radius — and overrides ONLY the appearance:
 * transparent fill + translucent border + body-text colour. The `.btn` qualifier
 * keeps those overrides above ACSS's own `.btn` rules (the same trick
 * `.lmcu-wizard__nav-primary.btn` uses). Sizing is owned by ACSS, so the ghost and
 * the primary always match; on a vanilla install (no ACSS) both fall back to the
 * browser button box. */
.lmcu-wizard__ghost-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--lmcu-ewiz-space-xs);
}
.lmcu-wizard__ghost-btn.btn {
	background: transparent;
	border: var(--btn-border-width, 1px) solid var(--neutral-trans-20, var(--lmcu-ewiz-border));
	color: var(--lmcu-ewiz-text, currentColor);
}
.lmcu-wizard__ghost-btn.btn:hover:not(:disabled) {
	background: var(--neutral-trans-10, var(--lmcu-ewiz-surface-muted));
	border-color: var(--neutral-trans-30, var(--lmcu-ewiz-border-strong));
}
.lmcu-wizard__ghost-btn:focus-visible {
	outline: 3px solid var(--focus-color, var(--lmcu-ewiz-focus));
	outline-offset: 2px;
}
.lmcu-wizard__ghost-btn:active { transform: scale(.98); }
.lmcu-wizard__ghost-btn[disabled],
.lmcu-wizard__ghost-btn:disabled { opacity: .5; cursor: not-allowed; }

/* =============================================================
 * Skip affordance — quiet text link between content and nav.
 * ============================================================= */

.lmcu-wizard__skip {
	display: block;
	/* Left-aligned, not centred (LMCU brand: left-align body and links). Aligns
	 * the escape link to the field/content edge rather than floating it centre. */
	margin: var(--lmcu-ewiz-space-s) 0 0;
	padding: var(--lmcu-ewiz-space-s) var(--lmcu-ewiz-space-s) var(--lmcu-ewiz-space-s) 0;
	background: transparent;
	border: 0;
	font-family: inherit;
	font-size: var(--lmcu-ewiz-text-s);
	color: var(--lmcu-ewiz-text-muted);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
	cursor: pointer;
	border-radius: var(--lmcu-ewiz-radius-sm);
}
.lmcu-wizard__skip:hover {
	color: var(--lmcu-ewiz-text);
	text-decoration-thickness: 2px;
}
.lmcu-wizard__skip:focus-visible {
	outline: 3px solid var(--focus-color, var(--lmcu-ewiz-focus));
	outline-offset: 2px;
	text-decoration: none;
}

/* =============================================================
 * Nav (Back / Continue). In-flow on desktop, fixed-bottom on mobile.
 * ============================================================= */

.lmcu-wizard__nav {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gutter, 8px);
	align-items: center;
	margin-top: var(--lmcu-ewiz-space-m);
}
.lmcu-wizard__nav-spacer { flex: 1; }
.lmcu-wizard__nav .btn,
.lmcu-wizard__nav .lmcu-wizard__ghost-btn { min-width: 110px; }

@media (max-width: 478px) {
	/* Phones: stack the nav buttons full-width (§11 walkthrough, Ben). Two
	 * buttons sharing one row (the old `flex: 1` + `min-width: 0`) crushed long
	 * labels — e.g. the GL-waitlist secondary "Find a credit union I can join
	 * now". Full-width stacked CTAs are predictable, never squeezed, and
	 * thumb-friendly; the bar stays anchored to the bottom of the viewport. */
	.lmcu-wizard__nav {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		margin: 0;
		flex-direction: column;
		align-items: stretch;
		padding: var(--lmcu-ewiz-space-s) var(--lmcu-ewiz-space-m) calc(var(--lmcu-ewiz-space-s) + env(safe-area-inset-bottom, 0px));
		background: var(--lmcu-ewiz-surface);
		border-top: 1px solid var(--neutral-trans-15, rgba(0, 0, 0, 0.08));
		box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.04);
		z-index: 10;
	}
	.lmcu-wizard__nav .btn,
	.lmcu-wizard__nav .lmcu-wizard__ghost-btn {
		min-width: 0;
		width: 100%;
	}
	/* Primary action (Continue / Apply) on TOP of the stack, Back beneath it
	 * (session 23 #15). `order` (not DOM reorder / column-reverse) pulls the primary
	 * up regardless of source order, so resolution screens (Back-first DOM) flip to
	 * primary-on-top while terminals (already primary-first) are unaffected. */
	.lmcu-wizard__nav .lmcu-wizard__nav-primary { order: -1; }
	.lmcu-wizard__nav-spacer { display: none; }
	/* Reserve bottom padding for the tallest case — two stacked buttons + the
	 * bar's own padding + safe area — so the last interactive element always
	 * clears the fixed nav. */
	.lmcu-wizard__screen {
		padding-bottom: calc(140px + env(safe-area-inset-bottom, 0px));
	}
}

/* =============================================================
 * Terminal screens (visual contract locked decision 2: plain, no dark
 * hero). Handoff fallback link, family-pending contact block, GL-waitlist
 * confirmation notice.
 * ============================================================= */

/* Inline text links inside terminal prose (handoff fallback "click here",
 * contact email/phone). Low-weight: inherit colour, underline only. */
.lmcu-wizard__textlink,
.lmcu-wizard__contact-value[href],
.lmcu-wizard__handoff-fallback a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}
.lmcu-wizard__textlink:hover,
.lmcu-wizard__contact-value[href]:hover,
.lmcu-wizard__handoff-fallback a:hover {
	text-decoration-thickness: 2px;
}

.lmcu-wizard__handoff-fallback {
	margin-top: var(--lmcu-ewiz-space-s);
}

/* Family-pending member-services contact lines. */
.lmcu-wizard__contact {
	display: flex;
	flex-direction: column;
	gap: var(--lmcu-ewiz-space-xs);
	margin: var(--lmcu-ewiz-space-m) 0;
	padding: var(--lmcu-ewiz-space-m) var(--lmcu-ewiz-space-m);
	background: var(--lmcu-ewiz-surface-muted);
	border-radius: var(--lmcu-ewiz-radius-md);
}
.lmcu-wizard__contact-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--lmcu-ewiz-space-xs);
	margin: 0;
}
.lmcu-wizard__contact-label {
	font-weight: 600;
	min-width: 56px;
}
.lmcu-wizard__contact-hours {
	margin: 0;
	font-size: var(--lmcu-ewiz-text-s);
	color: var(--lmcu-ewiz-text-muted);
}

/* Positive confirmation block (GL-waitlist success). Tinted info surface
 * with a left accent — the affirmative counterpart to __error--banner. */
.lmcu-wizard__notice {
	margin: var(--lmcu-ewiz-space-m) 0 0;
	padding: var(--lmcu-ewiz-space-s) var(--lmcu-ewiz-space-m);
	background: var(--lmcu-ewiz-info-bg);
	border-left: 3px solid var(--lmcu-ewiz-info);
	border-radius: var(--lmcu-ewiz-radius-sm);
}
.lmcu-wizard__notice[hidden] { display: none; }
.lmcu-wizard__notice .lmcu-wizard__h2 { margin-top: 0; }

/* Reason callout (B4 / UX-06, session 15b). The "why you (did/didn't) qualify"
 * emphasis on every terminal and the work-status pre-echo. Signpost shape — a
 * tinted block with a 3px left accent — toned by outcome. This is the
 * left-border treatment session 15 deliberately kept off __intro so it could
 * land here as the reason emphasis. Sits directly under the screen heading. */
.lmcu-wizard__callout {
	margin: 0 0 var(--lmcu-ewiz-space-m);
	padding: var(--lmcu-ewiz-space-s) var(--lmcu-ewiz-space-m);
	border-left: 3px solid var(--lmcu-ewiz-primary);
	border-radius: var(--lmcu-ewiz-radius-sm);
	background: var(--lmcu-ewiz-surface-muted);
	font-size: var(--lmcu-ewiz-text-m);
	line-height: 1.5;
	font-weight: 600;
}
.lmcu-wizard__callout--positive {
	border-left-color: var(--lmcu-ewiz-primary);
	background: var(--lmcu-ewiz-info-bg);
}
.lmcu-wizard__callout--negative {
	border-left-color: var(--lmcu-ewiz-danger);
	background: var(--lmcu-ewiz-danger-bg);
}
.lmcu-wizard__callout--neutral {
	border-left-color: var(--lmcu-ewiz-border-strong);
	background: var(--lmcu-ewiz-surface-muted);
}

/* Product chooser CTAs (ADR-048). By this screen the visitor already knows their
 * intent, so the three eligible products are equal lime CTAs (routing, not
 * marketing) — no per-option sell copy, no tinted-card treatment. Stacked
 * full-width; same lime fill + dark label + navy focus ring as the primary CTA
 * so it holds on a vanilla install too. */
.lmcu-wizard__product-ctas {
	display: flex;
	flex-direction: column;
	gap: var(--lmcu-ewiz-space-s);
	margin: var(--lmcu-ewiz-space-m) 0;
}
.lmcu-wizard__product-cta.btn {
	width: 100%;
	/* Label left, forward arrow right (signals "this starts a new process").
	 * Set display explicitly — `justify-content` needs a flex container and we
	 * can't rely on ACSS `.btn` resolving to flex in this cascade. */
	display: flex;
	align-items: center;
	justify-content: space-between;
	text-align: left;
	gap: var(--lmcu-ewiz-space-s);
	/* Shared 48px control height, matching the option rows + inputs. */
	min-height: 48px;
	/* Horizontal padding pinned to `--space-m` so the trailing arrow sits the
	 * same distance from the right edge as the option rows' radio indicator sits
	 * from the left — the two icons read as one mirrored column across screens. */
	padding-inline: var(--lmcu-ewiz-space-m);
	background: var(--lmcu-ewiz-cta-bg);
	border-color: var(--lmcu-ewiz-cta-bg);
	color: var(--lmcu-ewiz-cta-text);
}
.lmcu-wizard__product-cta-arrow {
	flex: none;
	display: inline-flex;
	align-items: center;
}
.lmcu-wizard__product-cta-arrow svg {
	display: block;
	width: 18px;
	height: 18px;
}
/* Hover is left to ACSS `.btn--accent` (it darkens the lime for us). */
.lmcu-wizard__product-cta.btn:focus-visible {
	outline: 3px solid var(--lmcu-ewiz-cta-focus-ring);
	outline-offset: 2px;
}
/* Preselect (the `product=` shortcode attr): a quiet navy "recommended" ring. */
.lmcu-wizard__product-cta.is-selected {
	box-shadow: inset 0 0 0 2px var(--lmcu-ewiz-cta-focus-ring);
}

/* =============================================================
 * Loan result cards (slice 3a, ADR-055). A neutral, browsable list of the
 * eligible products in the `lmcu-card-basic` shape, re-expressed on the
 * wizard's ACSS tokens (ADR-049). Equal cards, no "recommended" — the engine's
 * lowest-monthly order is the only ranking (ADR-048 / project_advisory_triage).
 * ============================================================= */

.lmcu-wizard__loan-cards {
	list-style: none;
	margin: var(--lmcu-ewiz-space-m) 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--lmcu-ewiz-space-s);
}
/* `display:flex` beats the UA `[hidden]{display:none}` (author > UA — the session-22
 * #4 trap), so re-assert the hide for the single-product case (session 25, ADR-059):
 * one offer → the card list is hidden, the output block is the result. */
.lmcu-wizard__loan-cards[hidden] {
	display: none;
}

/* Selectable card (slice 3e, ADR-059): a tinted panel (tonal-shift, not a nested
 * white card) whose summary is a role=radio control; the disclosure + detail are
 * siblings. Selecting feeds the output block + the single nav Apply. */
.lmcu-wizard__loan-card {
	background: var(--lmcu-ewiz-surface-muted);
	border-radius: var(--lmcu-ewiz-radius-md);
	overflow: hidden;
}
/* Selected state (session 23 #5): a SINGLE 2px translucent-navy ring on the info
 * tint — was a solid 2px inset ring PLUS a 1px solid navy border (doubled, too
 * heavy). The tint + the filled radio indicator carry the state; the lighter ring
 * keeps it clear without the heavy outline. The base card has no border now. */
.lmcu-wizard__loan-card.is-selected {
	background: var(--lmcu-ewiz-info-bg);
	box-shadow: inset 0 0 0 2px var(--lmcu-ewiz-primary-trans-40);
}

/* The selectable summary row (role=radio) — phrasing-only spans inside. */
.lmcu-wizard__loan-card__select {
	display: flex;
	align-items: center;
	gap: var(--lmcu-ewiz-space-s);
	inline-size: 100%;
	min-block-size: 44px;
	padding: var(--lmcu-ewiz-space-s) var(--lmcu-ewiz-space-m);
	background: none;
	border: 0;
	text-align: start;
	cursor: pointer;
	color: inherit;
	font: inherit;
}
.lmcu-wizard__loan-card__select:focus-visible {
	outline: 3px solid var(--lmcu-ewiz-focus);
	outline-offset: -3px;
}

/* Radio indicator (matches the assessments option dot). */
.lmcu-wizard__loan-card__indicator {
	flex: none;
	inline-size: 22px;
	block-size: 22px;
	border-radius: 50%;
	border: 2px solid var(--lmcu-ewiz-border-strong);
	background: var(--lmcu-ewiz-surface);
}
.lmcu-wizard__loan-card.is-selected .lmcu-wizard__loan-card__indicator {
	border-color: var(--lmcu-ewiz-primary);
	background: var(--lmcu-ewiz-primary);
	box-shadow: inset 0 0 0 3px var(--lmcu-ewiz-surface);
}

/* Card body (name + chips) takes the middle; monthly sits at the end. */
.lmcu-wizard__loan-card__main {
	display: flex;
	flex-direction: column;
	gap: var(--lmcu-ewiz-space-2xs);
	flex: 1;
	min-inline-size: 0;
}

.lmcu-wizard__loan-card__head {
	display: flex;
	align-items: center;
	gap: var(--lmcu-ewiz-space-xs);
}

/* Generic shared icon via an alpha mask tinted with the brand colour. The
 * per-product seam (ADR-055) overrides `mask-image` inline from feed data. */
.lmcu-wizard__loan-card__icon {
	flex: none;
	inline-size: 24px;
	block-size: 24px;
	background-color: var(--lmcu-ewiz-primary);
	-webkit-mask: url(../icons/loan.svg) center / contain no-repeat;
	mask: url(../icons/loan.svg) center / contain no-repeat;
}

.lmcu-wizard__loan-card__name {
	font-size: var(--lmcu-ewiz-text-l);
	font-weight: 700;
	line-height: 1.3;
}

/* Chips row (slice 3d, ADR-058) — the live site's pill language re-expressed on
 * the wizard tokens. Fully-rounded, dense, weight 600+. APR is a NAVY pill (white
 * text, ~13:1, FCA-prominent); amount-range a quiet neutral pill. Lime stays
 * reserved for the Apply CTA (ADR-043/048). */
.lmcu-wizard__loan-card__chips {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--lmcu-ewiz-space-2xs);
}
.lmcu-wizard__loan-card__apr {
	flex: none;
	/* Compact pills (session 23 #6): tight 3px/6px + line-height 1 so the chips
	 * read denser and leave the row more room. */
	padding: 3px 6px;
	background: var(--lmcu-ewiz-primary);
	color: var(--lmcu-ewiz-primary-contrast);
	border-radius: 999px;
	font-size: var(--lmcu-ewiz-text-xs);
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
}
.lmcu-wizard__loan-card__range {
	margin: 0;
	flex: none;
	padding: 3px 6px;
	background: var(--lmcu-ewiz-surface);
	color: var(--lmcu-ewiz-text-muted);
	border: 1px solid var(--lmcu-ewiz-border);
	border-radius: 999px;
	font-size: var(--lmcu-ewiz-text-xs);
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
}

/* Headline monthly — kept on the card for at-a-glance comparison (the output block
 * owns the full personalised illustration). Sits at the end of the select row. */
.lmcu-wizard__loan-card__monthly {
	flex: none;
	margin: 0;
	line-height: 1.2;
	text-align: end;
	white-space: nowrap;
}
.lmcu-wizard__loan-card__monthly-value {
	font-size: var(--lmcu-ewiz-text-l);
	font-weight: 800;
}
.lmcu-wizard__loan-card__monthly-label {
	font-size: var(--lmcu-ewiz-text-xs);
	color: var(--lmcu-ewiz-text-muted);
}
/* Per-card derived term (monthly mode, session 24b, ADR-069) — "over 36 months",
 * shown beneath the headline monthly. In monthly mode the term is the ANSWER the
 * visitor is solving for (it differs per product), so it reads as meaningful navy
 * text, not faint footnote grey (session 25, #3). */
.lmcu-wizard__loan-card__term {
	display: block;
	font-size: var(--lmcu-ewiz-text-s);
	font-weight: 600;
	color: var(--lmcu-ewiz-primary);
}
.lmcu-wizard__loan-card__term[hidden] {
	display: none;
}

.lmcu-wizard__loan-card__oneliner {
	margin: 0;
	font-size: var(--lmcu-ewiz-text-s);
	color: var(--lmcu-ewiz-text-muted);
	line-height: 1.4;
}

/* Small screens (session 23 #6): the select row's main (name + chips) and the
 * headline monthly collide when the card is narrow. Wrap the row so the monthly
 * drops onto its own line beneath the name, aligned under the main column (past
 * the indicator + gap) and reading left-to-right. */
@media (max-width: 478px) {
	.lmcu-wizard__loan-card__select {
		flex-wrap: wrap;
	}
	.lmcu-wizard__loan-card__monthly {
		flex-basis: 100%;
		text-align: start;
		padding-inline-start: calc(22px + var(--lmcu-ewiz-space-s));
	}
}

/* Per-card disclosure (ADR-058/059): a quiet chevron bar below the select row,
 * opened on demand. Reveal + chevron gated by the global reduced-motion guard. */
.lmcu-wizard__loan-card__toggle {
	display: inline-flex;
	align-items: center;
	gap: var(--lmcu-ewiz-space-2xs);
	min-height: 44px;
	padding: 0 var(--lmcu-ewiz-space-m) var(--lmcu-ewiz-space-2xs);
	background: none;
	border: 0;
	color: var(--lmcu-ewiz-primary);
	font-size: var(--lmcu-ewiz-text-s);
	font-weight: 600;
	cursor: pointer;
}
.lmcu-wizard__loan-card__toggle-label {
	text-decoration: underline;
	text-underline-offset: 3px;
}
.lmcu-wizard__loan-card__toggle::after {
	content: '';
	inline-size: 0;
	block-size: 0;
	border-inline: 5px solid transparent;
	border-block-start: 6px solid currentColor;
	transition: transform var(--lmcu-ewiz-transition);
}
.lmcu-wizard__loan-card__toggle[aria-expanded='true']::after {
	transform: rotate(180deg);
}
.lmcu-wizard__loan-card__toggle:focus-visible {
	outline: 3px solid var(--lmcu-ewiz-focus);
	outline-offset: 2px;
}
.lmcu-wizard__loan-card__detail {
	display: flex;
	flex-direction: column;
	/* Roomier rhythm so the lead, body copy + links don't read ragged (session 23
	 * #16); a little top padding separates it from the disclosure row. */
	gap: var(--lmcu-ewiz-space-s);
	padding: var(--lmcu-ewiz-space-2xs) var(--lmcu-ewiz-space-m) var(--lmcu-ewiz-space-m);
	font-size: var(--lmcu-ewiz-text-s);
	color: var(--lmcu-ewiz-text-muted);
	line-height: 1.55;
}
/* The one-liner is the detail's lead — navy + semibold so it sits above the muted
 * body copy in the hierarchy (session 23 #16). `--lmcu-ewiz-text` is `inherit`,
 * which in the muted detail just re-inherits muted, so use the brand primary. */
.lmcu-wizard__loan-card__detail .lmcu-wizard__loan-card__oneliner {
	color: var(--lmcu-ewiz-primary);
	font-weight: 600;
}
/* `display:flex` would defeat the UA `[hidden]{display:none}` (author beats UA);
 * restore the collapse so `hidden` stays the JS source of truth (collapsed default). */
.lmcu-wizard__loan-card__detail[hidden] {
	display: none;
}
.lmcu-wizard__loan-card__detail:not([hidden]) {
	animation: lmcu-wizard-loan-detail-reveal 180ms ease both;
}
.lmcu-wizard__loan-card__detail p { margin: 0; }
.lmcu-wizard__loan-card__detail ul {
	margin: 0;
	padding-inline-start: var(--lmcu-ewiz-space-l);
}
.lmcu-wizard__loan-card__links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--lmcu-ewiz-space-m);
}
.lmcu-wizard__loan-card__link {
	font-size: var(--lmcu-ewiz-text-s);
	color: var(--lmcu-ewiz-primary);
	/* ≥24px hit-area (session 26, F5) — WCAG 2.5.8 Target Size (Minimum). The
	 * label text is ~20px tall; inline-flex + a fixed 24px min pads the target
	 * without changing the visual baseline. A control dimension (not spacing), so
	 * a literal px like the 48px control height — NOT a fluid `--space-*` token,
	 * which balloons at wide viewports on the ACSS site. */
	display: inline-flex;
	align-items: center;
	min-height: 24px;
}

@keyframes lmcu-wizard-loan-detail-reveal {
	from {
		opacity: 0;
		transform: translateY(-4px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

/* =============================================================
 * "You're applying for" output block (slice 3e, ADR-059) — the navy illustration
 * panel above the nav, modelled on lmcu-interactive-helpers' `__output`. Carries
 * the selected loan's personalised figures + T&Cs + an FCA summary, by the Apply.
 * ============================================================= */
.lmcu-wizard__loan-output {
	margin: var(--lmcu-ewiz-space-m) 0;
	padding: var(--lmcu-ewiz-space-m);
	background: var(--lmcu-ewiz-primary);
	color: var(--lmcu-ewiz-primary-contrast);
	border-radius: var(--lmcu-ewiz-radius-md);
}
.lmcu-wizard__loan-output[hidden] {
	display: none;
}
@media (max-width: 478px) {
	/* Full-bleed the navy output to the content edges on phones to use the width
	 * (session 23 #14): cancel the content padding with negative inline margins,
	 * square the corners for a clean edge-to-edge band. */
	.lmcu-wizard__loan-output {
		margin-inline: calc(-1 * var(--lmcu-ewiz-space-m));
		border-radius: 0;
	}
}
.lmcu-wizard__loan-output__eyebrow {
	margin: 0;
	font-size: var(--lmcu-ewiz-text-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	opacity: 0.85;
}
.lmcu-wizard__loan-output__name {
	margin: var(--lmcu-ewiz-space-2xs) 0 0;
	font-size: var(--lmcu-ewiz-text-l);
	font-weight: 700;
}
.lmcu-wizard__loan-output__monthly {
	margin: var(--lmcu-ewiz-space-2xs) 0 0;
	line-height: 1.1;
}
.lmcu-wizard__loan-output__monthly-value {
	font-size: var(--lmcu-ewiz-text-xl);
	font-weight: 800;
}
.lmcu-wizard__loan-output__monthly-label {
	font-size: var(--lmcu-ewiz-text-s);
	opacity: 0.85;
}
.lmcu-wizard__loan-output__rows {
	margin: var(--lmcu-ewiz-space-s) 0 0;
}
.lmcu-wizard__loan-output__row {
	display: flex;
	justify-content: space-between;
	gap: var(--lmcu-ewiz-space-s);
	padding: var(--lmcu-ewiz-space-2xs) 0;
	border-block-start: 1px solid rgba(255, 255, 255, 0.2);
}
.lmcu-wizard__loan-output__row dt,
.lmcu-wizard__loan-output__row dd {
	margin: 0;
	font-size: var(--lmcu-ewiz-text-s);
}
.lmcu-wizard__loan-output__row dt {
	opacity: 0.85;
}
.lmcu-wizard__loan-output__row dd {
	font-weight: 700;
	text-align: end;
}
.lmcu-wizard__loan-output__links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--lmcu-ewiz-space-m);
	margin: var(--lmcu-ewiz-space-s) 0 0;
}
.lmcu-wizard__loan-output__links a {
	color: var(--lmcu-ewiz-primary-contrast);
	font-size: var(--lmcu-ewiz-text-s);
	/* ≥24px hit-area (session 26, F5) — WCAG 2.5.8. Fixed px (control dimension). */
	display: inline-flex;
	align-items: center;
	min-height: 24px;
}
/* On the navy block the links rest white; a site/ACSS `a:hover` would flip them
 * to charcoal (invisible here). Force a light, on-brand hover/focus (session 23
 * #10): lime, which reads clearly against navy. */
.lmcu-wizard__loan-output__links a:hover,
.lmcu-wizard__loan-output__links a:focus-visible {
	color: var(--lmcu-ewiz-focus);
}
.lmcu-wizard__loan-output__fca {
	margin: var(--lmcu-ewiz-space-s) 0 0;
	font-size: var(--lmcu-ewiz-text-xs);
	line-height: 1.5;
	opacity: 0.85;
}

/* =============================================================
 * Live loan calculator (slice 3b, ADR-056; chrome aligned to the sibling
 * lmcu-interactive-helpers in slice 3d, ADR-058 — re-expressed on ACSS tokens,
 * NOT imported, per ADR-049). Shared amount + term sliders that re-price the
 * eligible list. Native range + number + steppers: **navy fill + navy thumb**
 * (matching IH `_range-slider` + the live site; supersedes the slice-3b lime
 * slider — navy = the structural control colour, so lime is now the Apply CTA
 * only) with a **lime focus halo on the thumb**; **circular steppers** that fill
 * navy on hover/focus (IH `_number-toggler`); a **2px dark-bordered value box**
 * at --text-xl (IH `lmcu-control`). No drag transition — reduced-motion-safe.
 * ============================================================= */

/* No panel chrome (slice 3d): the calculator reads as live controls on the shell,
 * leaving the tinted-panel treatment to the result cards so the two don't blend. */
.lmcu-wizard__loan-calc {
	display: flex;
	flex-direction: column;
	gap: var(--lmcu-ewiz-space-m);
	margin: var(--lmcu-ewiz-space-m) 0;
}
/* `display:flex` beats the UA `[hidden]{display:none}` (author > UA — the
 * session-22 #4 trap), so re-assert the hide for the collapsible panel
 * (session 23 #9). */
.lmcu-wizard__loan-calc[hidden] {
	display: none;
}

/* `[ Months | Monthly ]` segmented toggle (session 24b, ADR-069) — a two-button
 * radiogroup; the selected frame fills navy. Shared by the loan-term step + the
 * result calculator (variant i). */
.lmcu-wizard__loan-calc__mode {
	display: inline-flex;
	align-self: flex-start;
	gap: 0;
	border: 1px solid var(--lmcu-ewiz-border);
	border-radius: var(--lmcu-ewiz-radius-md);
	overflow: hidden;
}
.lmcu-wizard__loan-calc__mode-btn {
	appearance: none;
	min-block-size: 44px;
	padding: 0 var(--lmcu-ewiz-space-m);
	font-size: var(--lmcu-ewiz-text-s);
	font-weight: 600;
	color: var(--lmcu-ewiz-primary);
	background: var(--lmcu-ewiz-surface);
	border: 0;
	cursor: pointer;
	transition:
		background-color var(--lmcu-ewiz-transition),
		color var(--lmcu-ewiz-transition);
}
.lmcu-wizard__loan-calc__mode-btn + .lmcu-wizard__loan-calc__mode-btn {
	border-inline-start: 1px solid var(--lmcu-ewiz-border);
}
.lmcu-wizard__loan-calc__mode-btn.is-selected {
	background: var(--lmcu-ewiz-primary);
	color: var(--lmcu-ewiz-primary-contrast);
}
.lmcu-wizard__loan-calc__mode-btn:focus-visible {
	outline: 3px solid var(--lmcu-ewiz-focus);
	outline-offset: -3px;
}

/* The swappable second control (term box / monthly box) + the loan-term step's
 * control slot — plain blocks; the inner control carries its own structure. */
.lmcu-wizard__loan-calc__second,
.lmcu-wizard__loan-term-control {
	display: block;
}
.lmcu-wizard__loan-term-control {
	margin-block: var(--lmcu-ewiz-space-m);
}
/* The loan-term step stacks the toggle above the control with rhythm. */
.lmcu-wizard__screen--loan-term .lmcu-wizard__loan-calc__mode {
	margin-block-start: var(--lmcu-ewiz-space-s);
}

/* Collapsed-calculator summary (session 23 #9, ADR-067): a tinted row showing the
 * current inputs ("Applying for £X over Y months") with an Edit affordance that
 * reveals the full calculator. */
.lmcu-wizard__loan-calc-summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--lmcu-ewiz-space-s);
	margin: var(--lmcu-ewiz-space-m) 0;
	padding: var(--lmcu-ewiz-space-s) var(--lmcu-ewiz-space-m);
	background: var(--lmcu-ewiz-surface-muted);
	border-radius: var(--lmcu-ewiz-radius-md);
}
.lmcu-wizard__loan-calc-summary[hidden] {
	display: none;
}
.lmcu-wizard__loan-calc-summary__text {
	font-weight: 600;
	color: var(--lmcu-ewiz-primary);
}
.lmcu-wizard__loan-calc-summary__edit {
	flex: none;
	min-block-size: 44px;
	padding: 0 var(--lmcu-ewiz-space-2xs);
	background: none;
	border: 0;
	color: var(--lmcu-ewiz-primary);
	font-size: var(--lmcu-ewiz-text-s);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}
.lmcu-wizard__loan-calc-summary__edit:focus-visible {
	outline: 3px solid var(--lmcu-ewiz-focus);
	outline-offset: 2px;
}
/* Accordion chevron (ADR-080) — points down when collapsed, flips up when expanded.
 * `inline-block` keeps the button's underline off the glyph. */
.lmcu-wizard__loan-calc-summary__edit::after {
	content: '\25BE';
	display: inline-block;
	margin-inline-start: 0.4em;
	transition: transform 0.15s ease;
}
.lmcu-wizard__loan-calc-summary__edit[aria-expanded='true']::after {
	transform: rotate(180deg);
}
@media (prefers-reduced-motion: reduce) {
	.lmcu-wizard__loan-calc-summary__edit::after {
		transition: none;
	}
}

.lmcu-wizard__loan-calc__control {
	display: flex;
	flex-direction: column;
	gap: var(--lmcu-ewiz-space-2xs);
}

/* Prominent question-style labels mirroring the live matcher calculator
 * ("How much would you like to borrow?" / "Over how long?"). */
.lmcu-wizard__loan-calc__label {
	font-size: var(--lmcu-ewiz-text-m);
	font-weight: 700;
	color: var(--lmcu-ewiz-primary);
}

.lmcu-wizard__loan-calc__inputs {
	display: flex;
	align-items: center;
	/* Content-width [- value +] cluster, aligned to the start so it sits under the
	 * label and over the slider's left edge (not floating centred). */
	justify-content: flex-start;
	gap: var(--lmcu-ewiz-space-2xs);
}

/* Circular +/- steppers (IH `_number-toggler`): 44px touch target, transparent at
 * rest, filling navy with a white glyph on hover/focus; lime focus ring. */
.lmcu-wizard__loan-calc__stepper {
	flex: none;
	inline-size: 44px;
	min-block-size: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: var(--lmcu-ewiz-text-l);
	line-height: 1;
	background: transparent;
	color: var(--lmcu-ewiz-primary);
	border: 1px solid var(--lmcu-ewiz-border);
	border-radius: 50%;
	cursor: pointer;
	transition:
		background-color var(--lmcu-ewiz-transition),
		color var(--lmcu-ewiz-transition),
		border-color var(--lmcu-ewiz-transition);
}
.lmcu-wizard__loan-calc__stepper:hover {
	background: var(--lmcu-ewiz-primary);
	border-color: var(--lmcu-ewiz-primary);
	color: var(--lmcu-ewiz-primary-contrast);
}
.lmcu-wizard__loan-calc__stepper:focus-visible {
	outline: 3px solid var(--lmcu-ewiz-focus);
	outline-offset: 2px;
}

/* Value box (IH `lmcu-control`): a 2px dark-bordered, large, bold number display.
 * Content-sized (not full-width) — a numeric entry sized to ~5 digits (IH's
 * `width:auto` toggler input), so the steppers hug it. */
.lmcu-wizard__loan-calc__number {
	flex: 0 1 auto;
	inline-size: 8ch;
	min-block-size: 44px;
	padding: 0 var(--lmcu-ewiz-space-xs);
	font-size: var(--lmcu-ewiz-text-xl);
	font-weight: 700;
	text-align: center;
	color: var(--lmcu-ewiz-text);
	background: var(--lmcu-ewiz-surface);
	border: 2px solid var(--lmcu-ewiz-border-input);
	border-radius: var(--lmcu-ewiz-radius-sm);
}
.lmcu-wizard__loan-calc__number:focus-visible {
	outline: 3px solid var(--lmcu-ewiz-focus);
	outline-offset: 2px;
}

/* Unit + breakdown beside the value (session 23 #8) — an emphasised "months" with
 * a muted "(1 year 6 months)" that tracks the term. */
.lmcu-wizard__loan-calc__unit {
	display: inline-flex;
	align-items: baseline;
	/* Keep the word + breakdown on ONE line so the text changing (e.g. "(2 years)"
	 * → "(1 year 6 months)" → "") never reflows to a new line and jumps the layout
	 * (session 23 #8 follow-up). It fits the content width down to ~320px. */
	flex-wrap: nowrap;
	white-space: nowrap;
	gap: var(--lmcu-ewiz-space-2xs);
	margin-inline-start: var(--lmcu-ewiz-space-xs);
}
.lmcu-wizard__loan-calc__unit-word {
	font-weight: 700;
	color: var(--lmcu-ewiz-primary);
}
.lmcu-wizard__loan-calc__unit-detail {
	font-size: var(--lmcu-ewiz-text-s);
	color: var(--lmcu-ewiz-text-muted);
}
@media (max-width: 478px) {
	/* On phones the unit drops onto its own line beneath the [− value +] cluster,
	 * so a value change never jostles the controls; it stays one line (above), so
	 * no vertical jump (session 23 #8 follow-up). */
	.lmcu-wizard__loan-calc__inputs {
		flex-wrap: wrap;
	}
	.lmcu-wizard__loan-calc__unit {
		flex-basis: 100%;
		margin-inline-start: 0;
	}
}

/* Breach validity line beneath the boxed control (ADR-078) — replaces the always-on
 * min/max bound labels. Hidden until the visitor tries to pass a limit, then states
 * what the limit is (the value clamps regardless). Understated: a small note in the
 * AA-safe danger-text colour, not an alarm. */
.lmcu-wizard__loan-calc__validity {
	margin-block-start: var(--lmcu-ewiz-space-2xs);
	margin-block-end: 0;
	font-size: var(--lmcu-ewiz-text-xs);
	font-weight: 500;
	color: var(--lmcu-ewiz-danger-text);
}
.lmcu-wizard__loan-calc__validity[hidden] { display: none; }

/* Amount-cap notice (ADR-056 "announce, don't dead-end", upgraded slice 3c /
 * ADR-057 to acknowledge the stated intent). Surfaced prominently — a left accent
 * bar + medium weight on the AA-contrast info tint — because it now answers an
 * explicit ask ("you asked for £X"); still advisory, never a decline. */
.lmcu-wizard__loan-calc__cap {
	margin: 0;
	padding: var(--lmcu-ewiz-space-s);
	font-size: var(--lmcu-ewiz-text-s);
	font-weight: 500;
	line-height: 1.4;
	color: var(--lmcu-ewiz-info);
	background: var(--lmcu-ewiz-info-bg);
	border-inline-start: 4px solid var(--lmcu-ewiz-info);
	border-radius: var(--lmcu-ewiz-radius-sm);
}

/* In-screen empty state (ADR-056) — a within-bounds amount no product fits.
 * Reserved separately from the no-match terminal (genuine-empty only). */
.lmcu-wizard__loan-empty {
	margin: var(--lmcu-ewiz-space-m) 0;
	padding: var(--lmcu-ewiz-space-s);
	font-size: var(--lmcu-ewiz-text-s);
	color: var(--lmcu-ewiz-text-muted);
	background: var(--lmcu-ewiz-surface-muted);
	border: 1px dashed var(--lmcu-ewiz-border);
	border-radius: var(--lmcu-ewiz-radius-sm);
}

/* Unmeetable-monthly advisory (monthly mode, session 24b, ADR-069) — the target
 * £/month is below the interest, so no product can repay the amount. Surfaced like
 * the amount-cap notice (info tint + accent bar): it answers an explicit ask and is
 * advisory, never a decline (project_advisory_triage). */
.lmcu-wizard__loan-unmeetable {
	margin: var(--lmcu-ewiz-space-m) 0;
	padding: var(--lmcu-ewiz-space-s);
	font-size: var(--lmcu-ewiz-text-s);
	font-weight: 500;
	line-height: 1.4;
	color: var(--lmcu-ewiz-info);
	background: var(--lmcu-ewiz-info-bg);
	border-inline-start: 4px solid var(--lmcu-ewiz-info);
	border-radius: var(--lmcu-ewiz-radius-sm);
}

/* Amount-first step (slice 3c, ADR-057; brand-aligned to IH in slice 3d, ADR-058)
 * — a 2px dark-bordered value box flanked by circular £250 +/− steppers, matching
 * the calculator chrome + IH `_number-toggler`/`lmcu-control`. */
.lmcu-wizard__loan-amount-inputs {
	display: flex;
	align-items: center;
	justify-content: flex-start; /* start-aligned under the label (not floating centred) */
	gap: var(--lmcu-ewiz-space-2xs);
}
.lmcu-wizard__loan-amount-stepper {
	flex: none;
	inline-size: 48px;
	min-block-size: 48px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: var(--lmcu-ewiz-text-l);
	line-height: 1;
	background: transparent;
	color: var(--lmcu-ewiz-primary);
	border: 1px solid var(--lmcu-ewiz-border);
	border-radius: 50%;
	cursor: pointer;
	transition:
		background-color var(--lmcu-ewiz-transition),
		color var(--lmcu-ewiz-transition),
		border-color var(--lmcu-ewiz-transition);
}
.lmcu-wizard__loan-amount-stepper:hover {
	background: var(--lmcu-ewiz-primary);
	border-color: var(--lmcu-ewiz-primary);
	color: var(--lmcu-ewiz-primary-contrast);
}
.lmcu-wizard__loan-amount-stepper:focus-visible {
	outline: 3px solid var(--lmcu-ewiz-focus);
	outline-offset: 2px;
}
.lmcu-wizard__loan-amount-input {
	flex: 0 1 auto;
	inline-size: 10ch; /* content-sized for "£25,000" — not full-width */
	height: 48px;
	padding: 0 var(--lmcu-ewiz-space-s);
	font-size: var(--lmcu-ewiz-text-xl);
	font-weight: 700;
	text-align: center;
	color: var(--lmcu-ewiz-text);
	background: var(--lmcu-ewiz-surface);
	border: 2px solid var(--lmcu-ewiz-border-input);
	border-radius: var(--lmcu-ewiz-radius-sm);
}
.lmcu-wizard__loan-amount-input:focus {
	outline: 3px solid var(--lmcu-ewiz-focus);
	outline-offset: 0;
	box-shadow: inset 0 0 0 2px var(--lmcu-ewiz-focus-text);
}
.lmcu-wizard__loan-amount-input[aria-invalid='true'] {
	border-color: var(--lmcu-ewiz-danger);
}
/* Inline validation text — danger-red, below the input. */
.lmcu-wizard__field-error {
	margin: 0;
	font-size: var(--lmcu-ewiz-text-s);
	font-weight: 500;
	color: var(--lmcu-ewiz-danger-text); /* AA on white (F1) */
}
/* Continue shared by the amount-first step and the saver step — both now sit in
 * the nav bar (session 23 #12), so the bar owns spacing. */
.lmcu-wizard__nav .lmcu-wizard__loan-continue {
	margin-top: 0;
}
/* The saver Continue is hidden until "Yes". ACSS's `.btn` sets `display`, which
 * beats the UA `[hidden]{display:none}` (author > UA — the session-22 #4 trap),
 * so re-assert the hide here. */
.lmcu-wizard__loan-continue[hidden] {
	display: none;
}

/* =============================================================
 * Screen-entry transition (session 14, cluster d). A quiet fade + small
 * rise as each step mounts. The screen mounter adds `is-animated` to the
 * fresh `.lmcu-wizard__screen` root only when motion is allowed, so a
 * reduced-motion visitor never sees it (the block below is the second
 * guard). Transform + opacity only — compositor-friendly, no reflow, no
 * layout shift, and the screen is interactive throughout.
 * ============================================================= */

.lmcu-wizard__screen.is-animated {
	animation: lmcu-wizard-screen-fade 200ms ease both;
}

/* Fade only by default. A `transform` on the screen root would make it the
 * containing block for the ≤478px fixed-bottom nav (a DESCENDANT of the screen),
 * which breaks `position: fixed` — the bar anchors to the screen instead of the
 * viewport. So phones get the fade alone. */
@keyframes lmcu-wizard-screen-fade {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* The subtle rise is desktop-only (≥479px), where the nav is in-flow and a
 * transform on the screen root is harmless. */
@media (min-width: 479px) {
	.lmcu-wizard__screen.is-animated {
		animation-name: lmcu-wizard-screen-rise;
	}
}

@keyframes lmcu-wizard-screen-rise {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: none; }
}

/* =============================================================
 * Reduced motion — verbatim shape from the assessments plugin.
 * ============================================================= */

@media (prefers-reduced-motion: reduce) {
	.lmcu-wizard *,
	.lmcu-wizard *::before,
	.lmcu-wizard *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
	.lmcu-wizard .btn:active,
	.lmcu-wizard__ghost-btn:active,
	.lmcu-wizard__option:active { transform: none; }
}

/* =============================================================
 * Lead-capture box modes — compact postcode/email box
 * (`mode="minimal"` single-step + `mode="lead"` two-step, ADR-082; the
 * container carries `.lmcu-wizard--minimal` or `.lmcu-wizard--lead`). Both
 * share these shell rules (matched together via `:is()`); deliberately
 * distinct from the full wizard: a narrower, subtly-tinted contained box with
 * an inline input-group (input + button on one row), no fixed-bottom nav, no
 * wizard chrome. They reuse the base __heading / __intro / __input / __error /
 * __notice / .btn--accent rules — only the box shape is new here.
 * ============================================================= */

:is(.lmcu-wizard--minimal, .lmcu-wizard--lead) {
	/* Layout-neutral for flexible embedding (Ben): no max-width, background,
	 * shadow, radius, or content padding — the PARENT container owns those
	 * decisions so the box drops into any page layout. These override the base
	 * `.lmcu-wizard` card chrome (white fill / 720px / shadow / radius). */
	max-width: none;
	background: none;
	box-shadow: none;
	border-radius: 0;
	/* The base `.lmcu-wizard` sets `overflow: hidden` to clip inner regions to the
	 * card's corner radius. The leadbox has no radius/chrome, so that clip serves no
	 * purpose here and instead crops the employer combobox dropdown (which is
	 * absolutely positioned BELOW the input, i.e. outside the shell's box). Restore
	 * `overflow: visible` so the dropdown can escape the shell. */
	overflow: visible;
}

/* No wizard chrome in the box: the restart icon (the box's own "Check another
 * postcode" / reset is the reset path) and the stage band are both dropped. */
:is(.lmcu-wizard--minimal, .lmcu-wizard--lead) .lmcu-wizard__restart { display: none; }
:is(.lmcu-wizard--minimal, .lmcu-wizard--lead) .lmcu-wizard__header { display: none; }

:is(.lmcu-wizard--minimal, .lmcu-wizard--lead) .lmcu-wizard__content {
	padding: 0;
}

/* The lead box's rhythm — heading, one line of copy, then the form. */
.lmcu-wizard__leadbox .lmcu-wizard__intro { margin-bottom: var(--lmcu-ewiz-space-m); }
.lmcu-wizard__inline-form { margin: 0; }
.lmcu-wizard__leadbox .lmcu-wizard__error { margin-top: var(--lmcu-ewiz-space-xs); }
.lmcu-wizard__leadbox .lmcu-wizard__fineprint { margin-top: var(--lmcu-ewiz-space-s); }

/* Embedded lead box: drop the base 64ch readability cap on the intro so it flows
 * to the container width and sits on one line when there's room (the box is meant
 * to be compact, and the parent owns the width — it still wraps on a narrow parent).
 * Scoped to --lead; minimal mode keeps the 64ch cap. */
.lmcu-wizard--lead .lmcu-wizard__intro { max-width: none; }

/* Keep the entry box's "Check" button beside the input through its loading state.
 * The button hugs its content (no flex grow/shrink), so the label growing
 * "Check" (~78px) → "Checking…" + spinner (~148px) tips the row past the 340px cap;
 * at the default 220px input flex-basis, flex-wrap then drops the button to a second
 * line mid-check. Lowering the postcode input's flex-basis drops the wrap threshold
 * below (input-basis + loading-button + gap), so both stay on one row. flex-grow
 * still fills the input to its full rest width, so the placeholder is unaffected. */
.lmcu-wizard--lead .lmcu-wizard__input-group--postcode .lmcu-wizard__input {
	flex-basis: 150px;
}

/* The lead-capture box's quiet secondary ("Join now" / "check another way") is a
 * <button> rendered as a tight inline text-anchor link (the `__textlink` style),
 * NOT the padded `__skip` touch-target — it sits directly below the input with just
 * a small top gap, so the box stays compact. Scoped to the button so the privacy
 * `<a class="__textlink">` is untouched. */
.lmcu-wizard__leadbox button.lmcu-wizard__leadbox-secondary {
	display: inline-block;
	margin-top: var(--lmcu-ewiz-space-xs);
	padding: 0;
	background: none;
	border: 0;
	font-family: inherit;
	font-size: var(--lmcu-ewiz-text-s);
	color: var(--lmcu-ewiz-text-muted);
	cursor: pointer;
}
.lmcu-wizard__leadbox button.lmcu-wizard__leadbox-secondary:hover {
	color: var(--lmcu-ewiz-text);
}
.lmcu-wizard__leadbox button.lmcu-wizard__leadbox-secondary:focus-visible {
	outline: 3px solid var(--lmcu-ewiz-focus);
	outline-offset: 2px;
}

/* Input-group — the signature lead-capture row: the input grows, the submit
 * button sits beside it at the shared 48px control height, and the button drops
 * to its own full-width row on a narrow box. Capped so the row stays a tidy
 * lead-capture control on a wide desktop parent rather than stretching edge to
 * edge (the box itself is layout-neutral — the parent owns the OUTER width — but
 * a single input + button reads better bounded). The cap only bites above its
 * width; on a narrow parent the group is already smaller, so it's inert there. */
.lmcu-wizard__input-group {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: var(--lmcu-ewiz-space-xs);
	/* px, NOT rem. The box embeds on hosts that set a 62.5% root font-size (ACSS /
	 * Automatic.css → 1rem = 10px), so rem widths rendered at ~62% of intent — the
	 * field came out ~149px and clipped its "Enter your postcode" placeholder. px is
	 * host-root-independent, matching the wizard's other dimensions (the card's
	 * --lmcu-ewiz-max-width is 720px); the wizard sets its own 16px font-size, so px
	 * here reads against a known scale. */
	max-width: 480px;
}
/* A postcode is short, so the entry box's row is tighter than the email box's. 340px
 * leaves the field itself at ~250px on a wide parent — enough to show the
 * "Enter your postcode" placeholder (it needs ~222px incl. its 30px side padding)
 * and read as the main CTA, while staying a single short field, not a full-width box. */
.lmcu-wizard__input-group--postcode {
	max-width: 340px;
}
.lmcu-wizard__input-group .lmcu-wizard__input {
	/* 220px basis (px, per the note above): the binding minimum in a narrow parent;
	 * it still grows to fill the capped group. */
	flex: 1 1 220px;
	min-width: 0;
	/* Override the postcode 18ch cap — the box input fills the group. */
	max-width: none;
}
/* The email/waitlist box's CTA is a long label ("Tell me when I can join"), so
 * beside the shared 220px basis the field was squeezed to a tight ~220–250px in
 * the one-row band — cramped for an email address. Give the non-postcode box a
 * roomier 280px basis: on a wide parent the field reads wider while the button
 * still sits beside it; on a tighter box the longer basis lets the button drop to
 * its own row sooner so the email field takes the full box width. The postcode
 * box keeps the short 220px basis (it wants a tight field + inline Check). */
.lmcu-wizard__input-group:not(.lmcu-wizard__input-group--postcode) .lmcu-wizard__input {
	flex-basis: 280px;
}
.lmcu-wizard__input-group .lmcu-wizard__nav-primary {
	flex: 0 0 auto;
	min-height: 48px; /* align with the 48px input */
}
@media (max-width: 420px) {
	.lmcu-wizard__input-group .lmcu-wizard__nav-primary { flex: 1 1 100%; }
}

/* The signpost box's actions row is in-flow, never the wizard's fixed-bottom nav.
 * Specificity (0,2,0) beats the global `.lmcu-wizard__nav` fixed rule at ≤478px. */
:is(.lmcu-wizard--minimal, .lmcu-wizard--lead) .lmcu-wizard__nav {
	position: static;
	margin: var(--lmcu-ewiz-space-m) 0 0;
	padding: 0;
	background: none;
	border-top: 0;
	box-shadow: none;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
}

/* On mobile the box is excluded from the full-bleed breakout (scoped to
 * :not(--minimal):not(--lead)) and stays in its parent's flow. The box nav is
 * static (never the fixed-bottom bar), so drop the 140px reservation the full
 * wizard adds for it. */
@media (max-width: 478px) {
	:is(.lmcu-wizard--minimal, .lmcu-wizard--lead) .lmcu-wizard__screen { padding-bottom: 0; }
}

/* Visually-hidden utility for the box's input labels — a clean input-only look
 * that's still programmatically labelled. Same clip shape as the live region. */
.lmcu-wizard__sr-only {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}