/*
 * The home page's interactive bands, below the first screen, in one file and one request (functions.php, handle
 * "mainland-home-bands"). On the home page it loads without blocking the first paint (media="print", switched to
 * "all" on load; a <noscript> link for no-JS), since nothing in it is on the first screen; elsewhere it is an ordinary
 * stylesheet. Three parts:
 *   A. mainland/band-how-it-works and mainland/band-port-routes (inc/explainers.php), §1–6; the driver hub's
 *      documents lookup and the "Sell your truck" stepper in the yard rows (inc/sections.php, 14 §4), §7–9.
 *      Behaviour: assets/js/home.js.
 *   B. The chassis selector (mainland-rentals), below: its own header.
 *   C. The payment estimator and the Blue Capital plate (mainland-inventory), below: its own header.
 * The chosen look of every choice chip here (the selector's chips, the term chips, the sell stepper's cards) is one
 * shared rule in theme.css §11.
 *
 * Everything is complete at rest: every connector filled, every route drawn, every ring lit. The script only adds
 * Web Animations that start from an earlier frame (fill: backwards), so if it never runs, nothing is missing
 * (10 §1 rule 2). Line art is 2 px and non-scaling (09 §8); the water scales with the map, the Fraser's band doesn't.
 *
 * Tokens only (02 §2.12): theme.json presets, --wp--custom--*, and the --mn-* surface properties. Motion per 10 §4.8,
 * §4.11 and §6 (theme.css §24 stops it under reduced motion).
 */

/* 1. How it works: head and tabs ------------------------------------------------------------------------------- */

.mn-how .mn-section-head--split { align-items: flex-end; }

/* The split head lays out any <div> aside as a grid; the tablist is a row in the shared segmented tray (.mn-seg,
   theme.css §11, as the new-arrivals tabs): the chosen tab in ink with the cyan bar under its label, as the chassis
   selector's chips (one family of choice controls, 02 §7.16). */
.mn-section-head--split > .mn-how__tabs,
.mn-how__tabs {
	display: inline-flex;
	max-inline-size: none;
}
.mn-how__tab {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	min-block-size: var(--wp--custom--target--button);
	padding: 0 20px;
	border: 0;
	border-radius: var(--wp--custom--radius--sm);
	background: transparent;
	color: var(--mn-text);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--custom--font-size--ui);
	font-weight: 600;
	line-height: 1;
	letter-spacing: var(--wp--custom--tracking--ui);
	white-space: nowrap;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition:
		color var(--wp--custom--motion--micro) var(--wp--custom--motion--ease),
		background-color var(--wp--custom--motion--micro) var(--wp--custom--motion--ease);
}
.mn-how__tab .mn-how__tab-icon { inline-size: 18px; block-size: 18px; color: var(--mn-text-muted); transition: color var(--wp--custom--motion--micro) var(--wp--custom--motion--ease); }
.mn-how__tab:hover { background: var(--wp--preset--color--paper); color: var(--mn-text-strong); }
.mn-how__tab[aria-selected="true"] { background: var(--wp--preset--color--ink-1); box-shadow: var(--wp--preset--shadow--ink); color: var(--wp--preset--color--white); }
.mn-how__tab[aria-selected="true"] .mn-how__tab-icon { color: var(--wp--preset--color--cyan-300); }
.mn-how__tab:focus-visible { outline-offset: -3px; }
.mn-how__tab[aria-selected="true"]:focus-visible { outline-color: var(--wp--preset--color--cyan); }
/* The 2 px cyan tab indicator (10 §4.8): the script slides it from the old tab (FLIP, translateX + scaleX). */
.mn-how__tab::after {
	content: "";
	position: absolute;
	inset-inline: 12px;
	inset-block-end: 4px;
	block-size: 2px;
	border-radius: 2px;
	background: var(--wp--preset--color--cyan);
	transform: scaleX(0);
	transform-origin: left;
}
.mn-how__tab[aria-selected="true"]::after { transform: none; }

@media (max-width: 599px) {
	.mn-how .mn-section-head--split { display: grid; }
	.mn-section-head--split > .mn-how__tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); inline-size: 100%; box-sizing: border-box; }
	.mn-how__tab { padding: 0 8px; }
}
@media (max-width: 419px) {
	.mn-how__tab { font-size: var(--wp--preset--font-size--small); }
	.mn-how__tab .mn-how__tab-icon { display: none; }
}

/* 2. How it works: the panel and its track ----------------------------------------------------------------------- */

.mn-how__panels {
	position: relative;
	padding: clamp(24px, 3.4vw, 48px);
	border: 1px solid var(--mn-rule);
	border-radius: var(--wp--custom--radius--lg);
	background: var(--mn-surface-raised);
	box-shadow: var(--mn-shadow-card);
}
.mn-how__panel { border-radius: var(--wp--custom--radius--md); }
/* The panels share one cell, so the band keeps the height of the tallest whichever tab is open (a hidden panel
   stays out of sight, the tab order and the accessibility tree). */
.mn-how__panels { display: grid; }
.mn-how__panel { grid-area: 1 / 1; display: flex; flex-direction: column; }
.mn-how__panel[hidden] { display: flex; visibility: hidden; }
.mn-how__panel .mn-how__actions { margin-block-start: auto; }
.mn-how__panel .mn-how__steps { margin-block-end: clamp(40px, 5vw, 60px); }
.mn-how__panel:focus-visible { outline-offset: 12px; }
/* The panel's own heading: for readers while the tabs work, shown when they don't (@media (scripting: none) below). */
.mn-how__ptitle {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	font-size: var(--wp--preset--font-size--x-large);
	color: var(--mn-text-strong);
}

.mn-how__steps {
	--mn-how-ring: 64px;
	--mn-how-gap: clamp(24px, 2.6vw, 40px);
	--mn-how-air: 10px; /* between a ring and its connector */
	display: grid;
	gap: var(--mn-how-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}
.mn-how__step { position: relative; min-inline-size: 0; }

.mn-how__mark {
	position: relative;
	z-index: var(--mn-z-over);
	display: grid;
	inline-size: var(--mn-how-ring);
	block-size: var(--mn-how-ring);
}
.mn-how__ring,
.mn-how__lit {
	box-sizing: border-box;
	grid-area: 1 / 1;
	border-radius: 50%;
}
.mn-how__ring {
	display: grid;
	place-items: center;
	border: 1px solid var(--mn-ring-border);
	background: radial-gradient(circle at 50% 35%, rgba(var(--wp--custom--cyan-rgb), 0.12), rgba(var(--wp--custom--cyan-rgb), 0.02) 70%), var(--mn-surface-raised);
	color: var(--mn-ring-fg);
}
.mn-how__ring .mn-icon { inline-size: 26px; block-size: 26px; }
/* The light a ring takes when the line reaches it (at rest: lit). */
.mn-how__lit {
	border: 1.5px solid var(--wp--preset--color--cyan);
	box-shadow: 0 0 0 5px rgba(var(--wp--custom--cyan-rgb), 0.08), 0 0 22px -6px rgba(var(--wp--custom--cyan-rgb), 0.6);
	pointer-events: none;
}
/* The destination: the last ring is solid cyan with the primary's glow. */
.mn-how__step--goal .mn-how__ring {
	border-color: var(--wp--preset--color--cyan);
	background: var(--wp--preset--color--cyan);
	color: var(--wp--preset--color--ink-1);
	box-shadow: var(--wp--preset--shadow--glow);
}
.mn-how__n {
	position: absolute;
	inset-block-start: -3px;
	inset-inline-end: -5px;
	box-sizing: border-box;
	display: grid;
	place-items: center;
	min-inline-size: 24px;
	block-size: 24px;
	padding: 0 6px;
	border: 1px solid rgba(var(--wp--custom--cyan-rgb), 0.5);
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--ink-1);
	color: var(--wp--preset--color--cyan-300);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--custom--font-size--micro);
	font-weight: 700;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

/* Connector: from just past this ring to just before the next one, a dashed base under the cyan fill. */
/* Painted under the rings: the link comes first in each step, and the ring's mark sits a layer up. */
.mn-how__link {
	position: absolute;
	pointer-events: none;
}
.mn-how__fill {
	position: absolute;
	inset: 0;
	border-radius: 2px;
	background: var(--wp--preset--color--cyan);
	box-shadow: 0 0 10px rgba(var(--wp--custom--cyan-rgb), 0.45);
}

.mn-how__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.1875rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.015em;
	color: var(--mn-text-strong);
}
.mn-how__text {
	max-inline-size: 30ch;
	margin: 8px 0 0;
	font-size: var(--wp--custom--font-size--ui);
	line-height: var(--wp--custom--line-height--lede);
	color: var(--mn-text);
}

/* Across, from 960 px: rings on one line, the connectors between their centres' height. */
@media (min-width: 960px) {
	.mn-how__steps { grid-template-columns: repeat(var(--mn-how-n, 4), minmax(0, 1fr)); }
	.mn-how__link {
		inset-block-start: calc(var(--mn-how-ring) / 2 - 1px);
		inset-inline: calc(var(--mn-how-ring) + var(--mn-how-air)) calc(var(--mn-how-air) - var(--mn-how-gap));
		block-size: 2px;
		background: repeating-linear-gradient(90deg, var(--mn-rule-2) 0 6px, transparent 6px 12px);
	}
	.mn-how__fill { transform-origin: left; }
	.mn-how__copy { margin-block-start: 26px; }
}

/* Two by two, 600–959 px: the rings head each cell and the copy hangs beside the line under its ring. The track runs
   in a U (1 → 2 across, 2 → 3 down, 3 → 4 back across), so every connector stays straight; the numbers keep the order
   and the list keeps it for readers. */
@media (min-width: 600px) and (max-width: 959px) {
	.mn-how__steps { --mn-how-ring: 60px; --mn-how-gap: 32px; --mn-how-row: 40px; grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--mn-how-row); }
	.mn-how__step:nth-child(3) { grid-area: 2 / 2; }
	.mn-how__step:nth-child(4) { grid-area: 2 / 1; }
	.mn-how__copy { margin: 14px 0 0 calc(var(--mn-how-ring) / 2 + 18px); }
	.mn-how__link { block-size: 2px; inset-block-start: calc(var(--mn-how-ring) / 2 - 1px); background: repeating-linear-gradient(90deg, var(--mn-rule-2) 0 6px, transparent 6px 12px); }
	.mn-how__step:nth-child(1) .mn-how__link { inset-inline: calc(var(--mn-how-ring) + var(--mn-how-air)) calc(var(--mn-how-air) - var(--mn-how-gap)); }
	.mn-how__step:nth-child(1) .mn-how__fill { transform-origin: left; }
	.mn-how__step:nth-child(2) .mn-how__link {
		inset-inline: calc(var(--mn-how-ring) / 2 - 1px) auto;
		inset-block: calc(var(--mn-how-ring) + var(--mn-how-air)) calc(var(--mn-how-air) - var(--mn-how-row));
		inline-size: 2px;
		block-size: auto;
		background: repeating-linear-gradient(180deg, var(--mn-rule-2) 0 6px, transparent 6px 12px);
	}
	.mn-how__step:nth-child(2) .mn-how__fill { transform-origin: top; }
	.mn-how__step:nth-child(3) .mn-how__link { inset-inline: calc(var(--mn-how-ring) + var(--mn-how-air) - 100% - var(--mn-how-gap)) calc(100% + var(--mn-how-air)); }
	.mn-how__step:nth-child(3) .mn-how__fill { transform-origin: right; }
	.mn-how__text { max-inline-size: 34ch; }
}

/* Down, below 600 px: ring on the left, text beside it, the connector running down to the next ring. */
@media (max-width: 599px) {
	.mn-how__steps { --mn-how-ring: 56px; --mn-how-gap: 30px; max-inline-size: 40rem; }
	.mn-how__step { display: grid; grid-template-columns: var(--mn-how-ring) minmax(0, 1fr); column-gap: 20px; align-items: start; }
	.mn-how__link {
		inset-inline-start: calc(var(--mn-how-ring) / 2 - 1px);
		inset-block: calc(var(--mn-how-ring) + var(--mn-how-air)) calc(var(--mn-how-air) - var(--mn-how-gap));
		inline-size: 2px;
		background: repeating-linear-gradient(180deg, var(--mn-rule-2) 0 6px, transparent 6px 12px);
	}
	.mn-how__fill { transform-origin: top; }
	.mn-how__copy { padding-block-start: 7px; }
	.mn-how__text { max-inline-size: 40ch; }
}

/* Without JavaScript the tablist steps aside and every panel shows under its own heading. */
@media (scripting: none) {
	.mn-how .mn-how__tabs { display: none; }
	.mn-how__panels { display: block; }
	.mn-how__panel[hidden] { visibility: visible; }
	.mn-how__panel + .mn-how__panel { margin-block-start: 56px; }
	.mn-how .mn-how__ptitle { position: static; inline-size: auto; block-size: auto; margin: 0 0 28px; overflow: visible; clip-path: none; white-space: normal; }
}

.mn-how__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 28px;
	padding-block-start: clamp(24px, 3vw, 32px);
	border-block-start: 1px solid var(--mn-rule);
}

/* 3. From our yard to the port: the layout and the map plate ------------------------------------------------- */

/* No card round the band's content: the map is a matted white plate, and the route panel sits on the band beside it
   from 1224 px (under it below), so the band never reads as the chassis selector's white card and ink panel. */
.mn-port__card {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--60);
	align-items: start;
}
@media (min-width: 1224px) {
	.mn-port__card { grid-template-columns: minmax(0, 1fr) minmax(0, 21.5rem); gap: var(--wp--preset--spacing--80); }
}

/* The plate: white, the drawing in a hairline inner frame, the caption and a north arrow on the mat under it. The
   plate is the size container the drawing's own breakpoints read (§4). */
.mn-port__map {
	container: mn-port-map / inline-size;
	margin: 0;
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--20) 0;
	border: 1px solid var(--mn-rule);
	border-radius: var(--wp--custom--radius--lg);
	background: var(--wp--preset--color--white);
	box-shadow: var(--mn-shadow-card);
}
@media (min-width: 600px) {
	.mn-port__map { padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--30) 0; }
}
/* A faint drafting grid on the land, as on the chassis selector's stage; the water covers it. */
.mn-port__canvas {
	position: relative;
	overflow: clip;
	aspect-ratio: 1080 / 760;
	border-radius: var(--wp--custom--radius--md);
	background-color: var(--wp--preset--color--white);
	background-image: linear-gradient(var(--mn-grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--mn-grid-line) 1px, transparent 1px);
	background-position: -1px -1px;
	background-size: var(--wp--custom--grid--plate) var(--wp--custom--grid--plate);
}
.mn-port__canvas::after {
	content: "";
	position: absolute;
	inset: 0;
	border: 1px solid var(--mn-rule);
	border-radius: inherit;
	pointer-events: none;
}
/* Phones draw the same frame taller (the drawing stretches north to south; strokes and everything over it keep
   their size), so the stops and names have room at 12 px and up. */
@container mn-port-map (max-width: 559px) {
	.mn-port__canvas { aspect-ratio: 1080 / 920; }
}
.mn-port__svg { position: absolute; inset: 0; display: block; inline-size: 100%; block-size: 100%; }

.mn-port__note {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--40);
	min-block-size: 40px;
	padding-inline: var(--wp--preset--spacing--10);
	color: var(--mn-text-muted);
	font-size: var(--wp--custom--font-size--micro);
	line-height: 1.3;
}
.mn-port__north {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	color: var(--wp--preset--color--text-3);
	font-weight: 700;
	letter-spacing: var(--wp--custom--tracking--spec);
}
.mn-port__north svg {
	inline-size: 12px;
	block-size: 16px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Water: one pale tint and a 1 px shore. The shore is a 2 px line under the water, so only its outer pixel shows
   and shapes that meet (the river and the sea) join without a seam. The river is a band of a fixed width in pixels,
   as water is on a transit map, so its banks stay as fine as the coast at any size. */
.mn-port__shore,
.mn-port__water { stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.mn-port__shore { fill: none; stroke: var(--mn-shore); stroke-width: 2; }
.mn-port__water { fill: var(--mn-water); stroke: none; }
.mn-port__river,
.mn-port__bank {
	--mn-river: 20px;
	fill: none;
	stroke-linecap: round;
	stroke-linejoin: round;
	vector-effect: non-scaling-stroke;
}
.mn-port__river--arm,
.mn-port__bank--arm { --mn-river: 10px; }
.mn-port__river { stroke: var(--mn-water); stroke-width: var(--mn-river); }
.mn-port__bank { stroke: var(--mn-shore); stroke-width: calc(var(--mn-river) + 2px); }
@container mn-port-map (max-width: 699px) {
	.mn-port__river,
	.mn-port__bank { --mn-river: 16px; }
	.mn-port__river--arm,
	.mn-port__bank--arm { --mn-river: 8px; }
}
@container mn-port-map (max-width: 559px) {
	.mn-port__river,
	.mn-port__bank { --mn-river: 10px; }
	.mn-port__river--arm,
	.mn-port__bank--arm { --mn-river: 6px; }
}

/* Routes at rest: graphite, 2 px. One lit: the others step back to field and its copy turns cyan-700 over a soft
   cyan halo (colour transitions only, 10 §7). */
.mn-port__route,
.mn-port__halo,
.mn-port__glow {
	fill: none;
	stroke-linecap: round;
	stroke-linejoin: round;
	vector-effect: non-scaling-stroke;
}
.mn-port__route {
	stroke: var(--wp--preset--color--text-2);
	stroke-width: 2;
	transition: stroke var(--wp--custom--motion--micro) var(--wp--custom--motion--ease);
}
.mn-port.is-routing .mn-port__route { stroke: var(--wp--preset--color--field); }
.mn-port__halo { stroke: transparent; stroke-width: 10; transition: stroke var(--wp--custom--motion--micro) var(--wp--custom--motion--ease); }
.mn-port__glow { stroke: transparent; stroke-width: 3; transition: stroke var(--wp--custom--motion--micro) var(--wp--custom--motion--ease); }
.mn-port__hl.is-on .mn-port__halo { stroke: rgba(var(--wp--custom--cyan-rgb), 0.2); }
.mn-port__hl.is-on .mn-port__glow { stroke: var(--wp--preset--color--cyan-700); }

/* 4. From our yard to the port: names, stops and the yard over the drawing (HTML, fixed sizes) ------------------ */

.mn-port__labels { position: absolute; inset: 0; pointer-events: none; }
.mn-port__place,
.mn-port__hub,
.mn-port__pin {
	position: absolute;
	inset-inline-start: var(--x);
	inset-block-start: var(--y);
}

/* Place names: one style, 12 px caps at the spec tracking; water in cyan-700, land in text-3 with a white halo over
   the grid. The tracking's trailing space is balanced so each name centres on its point. */
.mn-port__place {
	padding-inline-start: 0.1em;
	transform: translate(-50%, -50%);
	color: var(--wp--preset--color--text-3);
	font-size: var(--wp--custom--font-size--micro);
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: var(--wp--custom--tracking--spec);
	text-align: center;
	text-transform: uppercase;
	white-space: nowrap;
	text-shadow: 0 0 2px var(--wp--preset--color--white), 0 0 4px var(--wp--preset--color--white);
}
.mn-port__place--water { color: var(--wp--preset--color--cyan-700); font-weight: 500; text-shadow: none; }
.mn-port__place--wrap .mn-port__line { display: block; }

/* The yard: a white ring with an ink centre (the hub every line leaves from) and its ink tag under it. */
.mn-port__hub { inline-size: 0; block-size: 0; }
.mn-port__hub-ring {
	position: absolute;
	inset-inline-start: -12px;
	inset-block-start: -12px;
	box-sizing: border-box;
	inline-size: 24px;
	block-size: 24px;
	border: 2px solid var(--wp--preset--color--cyan);
	border-radius: 50%;
	background: radial-gradient(circle, var(--wp--preset--color--ink-1) 0 4.5px, var(--wp--preset--color--white) 5px);
	box-shadow: 0 0 0 4px rgba(var(--wp--custom--cyan-rgb), 0.14);
}
.mn-port__yard {
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 20px;
	transform: translateX(-50%);
	padding: 4px 8px;
	border-radius: var(--wp--custom--radius--xs);
	background: var(--wp--preset--color--ink-1);
	color: var(--wp--preset--color--white);
	font-size: var(--wp--custom--font-size--micro);
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
}

/* Stops: a numbered badge on the point (the number matches the list), the name beside it where the map has room.
   With the script they preview on hover and pin on click; the list is the keyboard and screen-reader control. */
.mn-port__pin { inline-size: 0; block-size: 0; }
.mn-port__pin-n,
.mn-port__pin-name { position: absolute; pointer-events: auto; }
.mn-port__pin-n {
	inset-inline-start: -12px;
	inset-block-start: -12px;
	box-sizing: border-box;
	display: grid;
	place-items: center;
	inline-size: 24px;
	block-size: 24px;
	border-radius: 50%;
	background: var(--wp--preset--color--ink-1);
	box-shadow: 0 0 0 2px var(--wp--preset--color--white);
	color: var(--wp--preset--color--white);
	font-size: var(--wp--custom--font-size--micro);
	font-weight: 700;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	transition: background-color var(--wp--custom--motion--micro) var(--wp--custom--motion--ease), box-shadow var(--wp--custom--motion--micro) var(--wp--custom--motion--ease), transform var(--wp--custom--motion--micro) var(--wp--custom--motion--ease);
}
.mn-port__pin-name {
	padding: 3px 7px;
	border-radius: var(--wp--custom--radius--xs);
	color: var(--wp--preset--color--text);
	font-size: var(--wp--custom--font-size--meta);
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
	text-shadow: 0 0 2px var(--wp--preset--color--white), 0 0 4px var(--wp--preset--color--white), 0 0 6px var(--wp--preset--color--white);
	transition: background-color var(--wp--custom--motion--micro) var(--wp--custom--motion--ease), color var(--wp--custom--motion--micro) var(--wp--custom--motion--ease);
}
.mn-port__pin--below .mn-port__pin-name { inset-inline-start: 0; inset-block-start: 15px; transform: translateX(-50%); }
.mn-port__pin--left .mn-port__pin-name { inset-inline-end: 16px; inset-block-start: 0; transform: translateY(-50%); }
.mn-port__pin--right .mn-port__pin-name { inset-inline-start: 16px; inset-block-start: 0; transform: translateY(-50%); }
.mn-port__pin--wrap .mn-port__pin-name { text-align: center; }
.mn-port__pin--wrap .mn-port__line { display: block; }
/* Names only where the map is wide enough to hold them clear of each other; the list always carries them. */
@container mn-port-map (max-width: 639px) {
	.mn-port__pin-name { display: none; }
}
/* Phones: the long water names wrap to two lines, and names move to their phone points (--xs, --ys). */
@container mn-port-map (max-width: 559px) {
	.mn-port__place {
		padding-inline-start: 0.06em;
		inset-inline-start: var(--xs, var(--x));
		inset-block-start: var(--ys, var(--y));
		letter-spacing: 0.06em;
	}
	.mn-port__place--wrap-phone .mn-port__line { display: block; }
}
/* The narrowest phones (320 px): smaller badges and yard ring, so the two inlet stops keep clear of the shore. */
@container mn-port-map (max-width: 299px) {
	.mn-port__pin-n,
	.mn-port__hub-ring { inset-inline-start: -10px; inset-block-start: -10px; inline-size: 20px; block-size: 20px; }
	.mn-port__hub-ring { background: radial-gradient(circle, var(--wp--preset--color--ink-1) 0 3.5px, var(--wp--preset--color--white) 4px); }
	.mn-port__yard { inset-block-start: 16px; }
}

.mn-port.is-ready .mn-port__pin-n,
.mn-port.is-ready .mn-port__pin-name { cursor: pointer; }
/* A 44 px pointer target round each badge. */
.mn-port.is-ready .mn-port__pin-n::before { content: ""; position: absolute; inset: -10px; border-radius: 50%; }
.mn-port__pin.is-on .mn-port__pin-n { background: var(--wp--preset--color--cyan-700); transform: scale(1.12); }
.mn-port__pin.is-pinned .mn-port__pin-n { box-shadow: 0 0 0 2px var(--wp--preset--color--white), 0 0 0 4px var(--wp--preset--color--cyan-700); }
.mn-port__pin.is-on .mn-port__pin-name { background: var(--wp--preset--color--ink-1); color: var(--wp--preset--color--white); text-shadow: none; }

/* The pulse the script sends down a lit route (moved in pixels, so it stays round where phones stretch the map). */
.mn-port__pulse {
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 0;
	inline-size: 12px;
	block-size: 12px;
	margin: -6px 0 0 -6px;
	border-radius: 50%;
	background: var(--wp--preset--color--cyan);
	box-shadow: 0 0 0 2px var(--wp--preset--color--white), 0 0 0 8px rgba(var(--wp--custom--cyan-rgb), 0.28);
	visibility: hidden;
}

/* 5. From our yard to the port: the route panel (light, on the band) ------------------------------------------ */

.mn-port__panel { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--40); }

.mn-port__hint {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0;
	color: var(--mn-text);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.45;
}
/* Only true once the terminals are buttons: the script shows it; until then it keeps its room, so nothing moves.
   Room for two lines, so the list doesn't jump when the pinned wording replaces the resting one. */
.mn-port__hint:not(.is-ready) { visibility: hidden; }
.mn-port__hint > span { min-block-size: calc(2em * 1.45); }
.mn-port__hint { margin-block-end: calc(var(--wp--preset--spacing--20) - var(--wp--preset--spacing--40)); }
/* Without JavaScript nothing can be chosen, so the hint steps aside. */
@media (scripting: none) {
	.mn-port .mn-port__hint { display: none; }
}
.mn-port__hint .mn-icon { flex: none; inline-size: 18px; block-size: 18px; margin-block-start: 1px; color: var(--mn-ring-fg); }

/* The terminals: numbered rows, the same numbers as the stops on the map. */
.mn-port__stops { display: grid; gap: var(--wp--preset--spacing--20); margin: 0; padding: 0; list-style: none; }
.mn-port__stop-in {
	box-sizing: border-box;
	display: grid;
	grid-template-columns: 28px minmax(0, 1fr);
	column-gap: 14px;
	align-items: center;
	inline-size: 100%;
	min-block-size: 58px;
	margin: 0;
	padding: 8px 14px 8px 12px;
	border: 1px solid var(--mn-rule);
	border-radius: var(--wp--custom--radius--md);
	background: var(--mn-surface-raised);
	color: var(--mn-text-strong);
	font: inherit;
	text-align: start;
	-webkit-tap-highlight-color: transparent;
	transition: border-color var(--wp--custom--motion--micro) var(--wp--custom--motion--ease), box-shadow var(--wp--custom--motion--micro) var(--wp--custom--motion--ease), background-color var(--wp--custom--motion--micro) var(--wp--custom--motion--ease);
}
button.mn-port__stop-in { cursor: pointer; }
.mn-port__n {
	box-sizing: border-box;
	display: grid;
	place-items: center;
	inline-size: 28px;
	block-size: 28px;
	border-radius: 50%;
	background: var(--wp--preset--color--ink-1);
	color: var(--wp--preset--color--white);
	font-size: var(--wp--custom--font-size--micro);
	font-weight: 700;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	transition: background-color var(--wp--custom--motion--micro) var(--wp--custom--motion--ease);
}
.mn-port__stop-text { display: grid; gap: 2px; min-inline-size: 0; }
.mn-port__name { font-size: var(--wp--custom--font-size--ui); font-weight: 600; line-height: 1.25; }
.mn-port__area { color: var(--mn-text-muted); font-size: var(--wp--custom--font-size--meta); line-height: 1.3; }
/* Previewed (hover or focus): a cyan-700 edge and number. Pinned (aria-pressed): a 2 px edge and a tint as well. */
button.mn-port__stop-in:hover { border-color: var(--mn-rule-3); }
.mn-port__stop.is-on .mn-port__stop-in { border-color: var(--wp--preset--color--cyan-700); }
.mn-port__stop.is-on .mn-port__n,
.mn-port__stop-in[aria-pressed="true"] .mn-port__n { background: var(--wp--preset--color--cyan-700); }
.mn-port__stop-in[aria-pressed="true"] {
	border-color: var(--wp--preset--color--cyan-700);
	background: color-mix(in srgb, var(--wp--preset--color--cyan) 6%, var(--wp--preset--color--white));
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--cyan-700);
}

/* The ticket: From the yard, To the terminal, joined by a dashed leg; set off from the list by a hairline. */
.mn-port__ticket {
	display: grid;
	margin: var(--wp--preset--spacing--20) 0 0;
	padding: var(--wp--preset--spacing--50) 0 0;
	border-block-start: 1px solid var(--mn-rule);
	list-style: none;
}
.mn-port__leg {
	position: relative;
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr);
	column-gap: 14px;
	align-content: start;
	padding-block-end: 16px;
}
.mn-port__leg:last-child { padding-block-end: 0; }
.mn-port__leg > :not(.mn-port__leg-icon) { grid-column: 2; }
.mn-port__leg-icon {
	box-sizing: border-box;
	grid-row: 1 / span 3;
	display: grid;
	place-items: center;
	inline-size: 44px;
	block-size: 44px;
	border: 1px solid var(--mn-ring-border);
	border-radius: 50%;
	background: var(--mn-ring-bg);
	color: var(--mn-ring-fg);
}
.mn-port__leg-icon .mn-icon { inline-size: 20px; block-size: 20px; }
.mn-port__leg:not(:last-child)::before {
	content: "";
	position: absolute;
	inset-inline-start: 21px;
	inset-block: 50px 6px;
	inline-size: 2px;
	background: repeating-linear-gradient(180deg, var(--mn-ring-border) 0 5px, transparent 5px 10px);
}
.mn-port__leg .mn-label { margin-block: 3px 4px; font-size: var(--wp--custom--font-size--micro); }
.mn-port__leg-name {
	color: var(--mn-text-strong);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: var(--wp--custom--tracking--title);
}
.mn-port__leg-sub { margin-block-start: 4px; color: var(--mn-text-muted); font-size: var(--wp--preset--font-size--small); line-height: 1.4; }

.mn-port__help {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0;
	padding-block-start: 16px;
	border-block-start: 1px solid var(--mn-rule);
}
.mn-port__help > span:last-child { display: grid; gap: 2px; }
.mn-port__help strong { color: var(--mn-text-strong); font-size: var(--wp--preset--font-size--small); font-weight: 600; line-height: 1.35; }
.mn-port__help a {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-block-size: var(--wp--custom--target--min);
	margin-block: -10px -12px;
	color: var(--mn-link);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	text-decoration: none;
}
.mn-port__help a:hover { color: var(--mn-link-hover); }
.mn-port__help a .mn-icon { inline-size: 16px; block-size: 16px; }

/* Under the map (600–1223 px): the terminals on the left, the ticket and the action on the right. */
@media (min-width: 600px) and (max-width: 1223px) {
	.mn-port__panel {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		grid-template-areas: "hint ticket" "stops ticket" "stops cta" "stops help";
		grid-template-rows: auto auto auto minmax(0, 1fr);
		align-items: start;
		gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--70);
	}
	.mn-port__hint { grid-area: hint; }
	.mn-port__stops { grid-area: stops; }
	.mn-port__ticket { grid-area: ticket; margin: 0; padding: 0; border: 0; }
	.mn-port__panel .mn-btn { grid-area: cta; }
	.mn-port__help { grid-area: help; }
}

/* 6. Reduced motion: hover and focus change colour only; the script runs no animation (10 §6). ---------------- */

@media (prefers-reduced-motion: reduce) {
	.mn-port__pulse { display: none; }
	.mn-port__pin.is-on .mn-port__pin-n { transform: none; }
}

/* 7. Driver documents quick lookup ------------------------------------------------------------------------- */

/* The tile with the form holds its face: no ink invert and no lift while someone types in it (sections.css lays
   the hub out). The border lights instead. */
.mn-hub-tile.mn-doc-tool { container-type: inline-size; }
.mn-hub-tile.mn-doc-tool:is(:hover, :focus-within) {
	--mn-tile-border: rgba(var(--wp--custom--cyan-rgb), 0.55);
	box-shadow: var(--wp--preset--shadow--card);
}

/* The icon chip: the document's lines draw in once, a scan line passes as you type, and the lines turn into a
   tick when the number looks right. */
.mn-doc-tool__icon { position: relative; overflow: clip; }
.mn-doc-tool__scan {
	position: absolute;
	inset-block-start: 0;
	inset-inline: 9px;
	block-size: 2px;
	border-radius: 2px;
	background: var(--wp--preset--color--cyan);
	box-shadow: 0 0 8px rgba(var(--wp--custom--cyan-rgb), 0.9);
	opacity: 0;
	pointer-events: none;
}
.mn-doc-anim path { transition: opacity var(--wp--custom--motion--micro) var(--wp--custom--motion--ease), stroke-dashoffset var(--wp--custom--motion--panel) var(--wp--custom--motion--ease-out); }
.mn-doc-anim__doc path:nth-child(n+3) { stroke-dasharray: 8 8; stroke-dashoffset: 0; }
.mn-doc-anim__ok path:nth-child(-n+2) { display: none; }
.mn-doc-anim__ok path:nth-child(3) { stroke-dasharray: 9 9; stroke-dashoffset: 9; }
/* Armed by the script before the tile scrolls in; drawn left to right, one line after another. */
.mn-doc-tool.is-armed .mn-doc-anim__doc path:nth-child(n+3) { stroke-dashoffset: -8; }
.mn-doc-tool.is-armed.is-drawn .mn-doc-anim__doc path:nth-child(n+3) { stroke-dashoffset: 0; }
.mn-doc-tool.is-drawn .mn-doc-anim__doc path:nth-child(4) { transition-delay: var(--wp--custom--motion--stagger); }
.mn-doc-tool.is-drawn .mn-doc-anim__doc path:nth-child(5) { transition-delay: calc(2 * var(--wp--custom--motion--stagger)); }
.mn-doc-tool.is-ready .mn-hub-tile__icon { background: var(--wp--preset--color--cyan); color: var(--wp--preset--color--ink-1); }
.mn-doc-tool.is-ready .mn-doc-anim__doc path:nth-child(n+3) { opacity: 0; transition-delay: 0s; }
.mn-doc-tool.is-ready .mn-doc-anim__ok path:nth-child(3) { stroke-dashoffset: 0; }

.mn-doc-tool__form { display: grid; gap: 8px; margin-block-start: 4px; }
.mn-doc-tool__row { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--wp--preset--spacing--20); }
@container (min-width: 360px) {
	.mn-doc-tool__row { grid-template-columns: minmax(0, 1fr) auto; }
}
.mn-doc-tool__input {
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-variant-numeric: tabular-nums;
}
.mn-doc-tool__go { white-space: nowrap; }
.mn-doc-tool__hint { min-block-size: 1.45em; color: var(--mn-text); }
.mn-doc-tool__hint b { color: var(--mn-text-strong); font-weight: 600; letter-spacing: 0.04em; font-variant-numeric: tabular-nums; }
/* The error in a white notice with an error rule: 6.57:1 on white, and it still reads if the tile sits on ink. */
.mn-hub-tile .mn-doc-tool__error {
	padding: 8px 12px;
	border-inline-start: 3px solid var(--wp--preset--color--error);
	border-radius: var(--wp--custom--radius--xs);
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--error);
	animation: mn-tools-error var(--wp--custom--motion--micro) var(--wp--custom--motion--ease-out) both;
}
.mn-hub-tile .mn-doc-tool__error:empty { display: none; }
.mn-doc-tool .mn-hub-tile__link { margin-block-start: 0; }

/* 8. Sell your truck stepper ------------------------------------------------------------------------------ */

/* Without JavaScript the row keeps its link; the script swaps in the disclosure button (same label and box). */
.mn-sell .mn-sell__link[hidden],
.mn-sell .mn-sell__toggle[hidden],
.mn-sell .mn-sell__panel[hidden] { display: none; }
.mn-sell .mn-sell__toggle {
	padding: 0;
	border: 0;
	background-color: transparent;
	font-family: inherit;
	line-height: inherit;
	cursor: pointer;
}
.mn-sell .mn-sell__toggle .mn-icon { transition: transform var(--wp--custom--motion--micro) var(--wp--custom--motion--ease-out); }
.mn-sell .mn-sell__toggle:hover .mn-icon { transform: translateY(2px); }
.mn-sell .mn-sell__toggle[aria-expanded="true"] .mn-icon { transform: rotate(180deg); }

/* The panel opens under the row's text, across the row, above the row's stretched button. */
.mn-sell__panel {
	position: relative;
	z-index: var(--mn-z-raised);
	grid-column: 1 / -1;
	margin-block-start: 10px;
	padding: clamp(18px, 0.75rem + 1.5vw, 26px);
	border: 1px solid var(--mn-rule);
	border-radius: var(--wp--custom--radius--md);
	background: var(--wp--preset--color--white);
	box-shadow: var(--mn-shadow-card);
	cursor: auto;
	animation: mn-tools-open var(--wp--custom--motion--ui) var(--wp--custom--motion--ease-out) both;
}
.mn-sell__form { display: grid; gap: 18px; margin: 0; }

.mn-sell__head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.mn-sell__head .mn-eyebrow { margin: 0; white-space: nowrap; }
.mn-sell__close { margin-inline-start: auto; }

/* Progress: three dots joined by a rule; done dots fill ink, the current one cyan with a soft ring. */
.mn-sell__dots { display: flex; align-items: center; margin: 0; padding: 0; list-style: none; }
.mn-sell__dots li {
	position: relative;
	inline-size: 10px;
	block-size: 10px;
	border-radius: 50%;
	box-shadow: inset 0 0 0 1.5px var(--mn-rule-2);
	transition: box-shadow var(--wp--custom--motion--micro) var(--wp--custom--motion--ease);
}
.mn-sell__dots li + li { margin-inline-start: 22px; }
.mn-sell__dots li + li::before {
	content: "";
	position: absolute;
	inset-block-start: 4px;
	inset-inline-end: calc(100% + 4px);
	inline-size: 14px;
	block-size: 2px;
	border-radius: 2px;
	background: var(--mn-rule-2);
	transform-origin: left;
}
.mn-sell__dots li::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: var(--wp--preset--color--ink-1);
	transform: scale(0);
	transition: transform var(--wp--custom--motion--panel) var(--wp--custom--motion--ease-out), background-color var(--wp--custom--motion--micro) var(--wp--custom--motion--ease);
}
.mn-sell__dots li.is-done::after { transform: scale(1); }
.mn-sell__dots li.is-done + li::before,
.mn-sell__dots li.is-done + li.is-current::before { background: var(--wp--preset--color--ink-1); }
.mn-sell__dots li.is-current { box-shadow: inset 0 0 0 1.5px var(--wp--preset--color--cyan), 0 0 0 4px rgba(var(--wp--custom--cyan-rgb), 0.2); }
.mn-sell__dots li.is-current::after { transform: scale(1); background: var(--wp--preset--color--cyan); }

/* The current step sets the stage's height; the outgoing one fades out on top of it, out of the flow. The
   incoming step slides 16 px and fades in (10 §4.11). */
.mn-sell__stage { position: relative; }
.mn-sell__step {
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	display: grid;
	align-content: start;
	gap: 16px;
	min-inline-size: 0;
	margin: 0;
	padding: 0;
	border: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--wp--custom--motion--tap) var(--wp--custom--motion--ease-in), visibility 0s linear var(--wp--custom--motion--tap);
}
.mn-sell__step.is-current {
	position: relative;
	opacity: 1;
	visibility: visible;
	transition: none;
	animation: mn-tools-step var(--wp--custom--motion--ui) var(--wp--custom--motion--ease-out) both;
}
.mn-sell__form[data-dir="back"] .mn-sell__step { --mn-step-from: -16px; }
/* A rendered legend is not a grid item, so it carries its own space. */
.mn-sell__legend { display: grid; gap: 8px; float: none; inline-size: 100%; margin: 0 0 18px; padding: 0; }
.mn-sell__legend .mn-label { color: var(--mn-text-muted); }
.mn-sell__q {
	margin: 0;
	color: var(--mn-text-strong);
	font-size: var(--wp--preset--font-size--x-large);
	line-height: var(--wp--custom--line-height--title);
	letter-spacing: var(--wp--custom--tracking--title);
}
.mn-sell__q:focus { outline: none; }
.mn-sell__q:focus-visible { outline: var(--wp--custom--focus--width) solid var(--mn-focus); outline-offset: var(--wp--custom--focus--offset); }

/* Step 1: three choice cards (02 §7.16 choice chips, with the unit's line icon). The radio is the control. */
.mn-sell__chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--wp--preset--spacing--20); }
.mn-sell__chip { position: relative; display: block; cursor: pointer; }
.mn-sell__chip input { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; margin: 0; opacity: 0; cursor: pointer; }
.mn-sell__chip-face {
	box-sizing: border-box;
	display: grid;
	justify-items: center;
	align-content: center;
	gap: 8px;
	min-block-size: 92px;
	padding: 14px 8px 12px;
	border: 1px solid var(--mn-field-border);
	border-radius: var(--wp--custom--radius--sm);
	background: var(--wp--preset--color--white);
	color: var(--mn-text-strong);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	transition:
		background-color var(--wp--custom--motion--micro) var(--wp--custom--motion--ease),
		border-color var(--wp--custom--motion--micro) var(--wp--custom--motion--ease),
		color var(--wp--custom--motion--micro) var(--wp--custom--motion--ease);
}
.mn-sell__chip-face .mn-icon { inline-size: 30px; block-size: 30px; color: var(--mn-text); transition: color var(--wp--custom--motion--micro) var(--wp--custom--motion--ease), transform var(--wp--custom--motion--ui) var(--wp--custom--motion--ease-out); }
.mn-sell__chip-tick {
	position: absolute;
	inset-block-start: 7px;
	inset-inline-end: 7px;
	display: grid;
	place-items: center;
	inline-size: 18px;
	block-size: 18px;
	border-radius: 50%;
	background: var(--wp--preset--color--cyan);
	color: var(--wp--preset--color--ink-1);
	opacity: 0;
	transform: scale(0.6);
	transition: opacity var(--wp--custom--motion--micro) var(--wp--custom--motion--ease), transform var(--wp--custom--motion--micro) var(--wp--custom--motion--ease-out);
}
.mn-sell__chip-tick .mn-icon { inline-size: 12px; block-size: 12px; stroke-width: 2.4; }
.mn-sell__chip:hover .mn-sell__chip-face { border-color: var(--mn-text-strong); }
.mn-sell__chip input:checked + .mn-sell__chip-face .mn-icon { color: var(--wp--preset--color--cyan); }
.mn-sell__chip input:checked + .mn-sell__chip-face .mn-sell__chip-tick { opacity: 1; transform: none; }
.mn-sell__chip input:checked + .mn-sell__chip-face .mn-sell__chip-tick .mn-icon { color: var(--wp--preset--color--ink-1); }
.mn-sell__chip input:focus-visible + .mn-sell__chip-face { outline: var(--wp--custom--focus--width) solid var(--mn-focus); outline-offset: var(--wp--custom--focus--offset); }
.mn-sell__chips[aria-invalid="true"] .mn-sell__chip-face { border-color: var(--wp--preset--color--error); }
@media (hover: hover) and (pointer: fine) {
	.mn-sell__chip:hover .mn-sell__chip-face > .mn-icon { transform: translateX(3px); }
}

/* Steps 2 and 3: the fields (02 §7.9). */
.mn-sell__fields { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px var(--wp--preset--spacing--40); }
@media (min-width: 600px) {
	.mn-sell__fields { grid-template-columns: minmax(0, 10rem) minmax(0, 1fr); }
}
.mn-sell__km { max-inline-size: 16rem; }
.mn-sell__unit { position: relative; }
.mn-sell__unit .mn-form__control { padding-inline-end: 3rem; font-variant-numeric: tabular-nums; }
.mn-sell__unit > span {
	position: absolute;
	inset-block: 0;
	inset-inline-end: 0.875rem;
	display: grid;
	place-items: center;
	color: var(--mn-text-muted);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	pointer-events: none;
}

/* Your answers, as chips that step back to change them. */
.mn-sell__summary { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--20); margin: 0; padding: 0; list-style: none; }
.mn-sell__summary:empty { display: none; }
.mn-sell__answer {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-block-size: var(--wp--custom--target--min);
	padding: 0 12px;
	border: 1px solid var(--wp--preset--color--line-strong);
	border-radius: var(--wp--custom--radius--sm);
	background: var(--wp--preset--color--paper);
	color: var(--mn-text-strong);
	font: inherit;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	cursor: pointer;
	transition: border-color var(--wp--custom--motion--micro) var(--wp--custom--motion--ease);
}
.mn-sell__answer .mn-icon { inline-size: 16px; block-size: 16px; color: var(--mn-link); }
.mn-sell__answer:hover { border-color: var(--mn-text-strong); }

.mn-sell__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding-block-start: 2px; }
.mn-sell__actions .mn-arrow-link { margin-inline-start: auto; }
.mn-sell__note { margin: 0; color: var(--mn-text-muted); font-size: var(--wp--preset--font-size--small); line-height: 1.45; }
/* Phones: Back and the step's button share one row, the button taking the rest; the last step's button reads
   "Continue" (its name keeps the whole label, "Continue to my valuation request"). */
@media (max-width: 599px) {
	.mn-sell__dots { flex-basis: 100%; order: 3; padding-inline-start: 2px; }
	.mn-sell__chip-face { min-block-size: 84px; }
	.mn-sell__actions { flex-wrap: nowrap; gap: 10px; }
	.mn-sell__actions > .mn-btn:not([data-back]) { flex: 1 1 auto; }
	.mn-sell__actions .mn-arrow-link { margin-inline-start: 0; white-space: nowrap; }
	.mn-sell__go-more {
		position: absolute;
		inline-size: 1px;
		block-size: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}
}

/* 9. Inline tools: motion -------------------------------------------------------------------------------------------------- */

@keyframes mn-tools-open { from { opacity: 0; transform: translateY(-8px); } }
@keyframes mn-tools-step { from { opacity: 0; transform: translateX(var(--mn-step-from, 16px)); } }
@keyframes mn-tools-error { from { opacity: 0; transform: translateY(-4px); } }

@media (prefers-reduced-motion: reduce) {
	.mn-sell .mn-sell__toggle:hover .mn-icon,
	.mn-sell__chip:hover .mn-sell__chip-face > .mn-icon { transform: none; }
	.mn-sell .mn-sell__toggle[aria-expanded="true"] .mn-icon { transform: rotate(180deg); }
	.mn-doc-tool__scan { display: none; }
}

/* ================================================================================================================
   B. Chassis selector
   ================================================================================================================ */

/*
 * Chassis selector: mainland/chassis-selector and its home band mainland/band-chassis-selector (markup in the
 * mainland-rentals plugin, includes/chassis-selector.php). Spec: docs/02-DESIGN-SYSTEM.md §7.16 (choice chips) and
 * §7.28, 10-MOTION.md §4.9, 09-ART-DIRECTION.md §8. Part B of home-bands.css (functions.php).
 *
 * How it works: the length and type chips are radio buttons, and the drawing, the chips' reasons and the result panel
 * are driven from the checked pair with :has(), so everything works without JavaScript. Each state sets four
 * registered custom properties on the block (the container's length in feet, the chassis frame's closed length in
 * feet, gooseneck 0/1, third axle 0/1); the properties animate with the motion tokens and every part of the drawing is
 * computed from them, frame by frame. A transition that changes target mid-flight carries on from where it is, so
 * fast clicking never queues. Reduced motion: theme.css §24 stops every transition, so the drawing and the panel
 * switch at once (and §8 below drops the one hover nudge).
 *
 * Drawing geometry (mirrors mainland_chassis_selector_drawing(); keep the two in step): viewBox 0 0 1200 320; the
 * front of the frame at x = 96; 19 units a foot (40 ft ends at 856, 53 ft at 1103); every part is drawn at 53 ft.
 * The frame is drawn at max(container, closed) feet: the rails scale from x = 96 to the closed length, the extension
 * opens out from there, and the rear and the axles translate to the frame's end (.mn-csel__tail). The container (the
 * load: outline, dimension line, label, locks) is drawn from x = 96 at its own length, its rear end translating
 * (.mn-csel__end), and the whole load shifts (frame − container) × 9.5 to sit centred on the frame. Wheels, lights and
 * locks are never scaled, and every stroke is non-scaling, so no line fattens or thins (10 §4.9).
 *
 * Tokens only (02 §2.12): theme.json presets, --wp--custom--*, and the --mn-* surface properties.
 */

/* 1. Animated state ---------------------------------------------------------------------------------------------- */

@property --mn-csel-len { syntax: "<number>"; inherits: true; initial-value: 40; }
@property --mn-csel-closed { syntax: "<number>"; inherits: true; initial-value: 40; }
@property --mn-csel-goose { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --mn-csel-ax3 { syntax: "<number>"; inherits: true; initial-value: 1; }

.mn-csel {
	--mn-csel-len: 40;
	--mn-csel-closed: 40;
	--mn-csel-goose: 0;
	--mn-csel-ax3: 1;
	/* The third axle comes in after the length change has started (ui, easeOut, 120 ms late); it leaves at micro, easeIn. */
	--mn-csel-ax3-move: var(--wp--custom--motion--ui) var(--wp--custom--motion--ease-out) var(--wp--custom--motion--tap);
	transition:
		--mn-csel-len var(--wp--custom--motion--panel) var(--wp--custom--motion--ease),
		--mn-csel-closed var(--wp--custom--motion--panel) var(--wp--custom--motion--ease),
		--mn-csel-goose var(--wp--custom--motion--panel) var(--wp--custom--motion--ease),
		--mn-csel-ax3 var(--mn-csel-ax3-move);
}
/* The frame's closed length comes from the data, never from this file: the plugin prints it on the block for each
   type and length a chassis takes, as --mn-csel-c-{type}-{length} (derived from the names, 14 §9.1 item 3). The
   checked type picks its row into --mn-csel-c{length}, the checked length its column. A pair the data doesn't have
   (only reachable without the script, and dimmed then) draws the frame at the container's length. */
.mn-csel:has(input[data-cfg="tandem"]:checked) {
	--mn-csel-c20: var(--mn-csel-c-tandem-20);
	--mn-csel-c40: var(--mn-csel-c-tandem-40);
	--mn-csel-c45: var(--mn-csel-c-tandem-45);
	--mn-csel-c53: var(--mn-csel-c-tandem-53);
	--mn-csel-goose: 1;
	--mn-csel-ax3: 0;
	--mn-csel-ax3-move: var(--wp--custom--motion--micro) var(--wp--custom--motion--ease-in) 0s;
}
.mn-csel:has(input[data-cfg="tridem"]:checked) {
	--mn-csel-c20: var(--mn-csel-c-tridem-20);
	--mn-csel-c40: var(--mn-csel-c-tridem-40);
	--mn-csel-c45: var(--mn-csel-c-tridem-45);
	--mn-csel-c53: var(--mn-csel-c-tridem-53);
}
.mn-csel:has(input[data-cfg="extendable"]:checked) {
	--mn-csel-c20: var(--mn-csel-c-extendable-20);
	--mn-csel-c40: var(--mn-csel-c-extendable-40);
	--mn-csel-c45: var(--mn-csel-c-extendable-45);
	--mn-csel-c53: var(--mn-csel-c-extendable-53);
}
.mn-csel:has(input[data-len="20"]:checked) { --mn-csel-len: 20; --mn-csel-closed: var(--mn-csel-c20, 20); }
.mn-csel:has(input[data-len="40"]:checked) { --mn-csel-len: 40; --mn-csel-closed: var(--mn-csel-c40, 40); }
.mn-csel:has(input[data-len="45"]:checked) { --mn-csel-len: 45; --mn-csel-closed: var(--mn-csel-c45, 45); }
.mn-csel:has(input[data-len="53"]:checked) { --mn-csel-len: 53; --mn-csel-closed: var(--mn-csel-c53, 53); }

/* 2. Band and block layout --------------------------------------------------------------------------------------- */

.mn-csel {
	--mn-csel-pad: clamp(20px, 3vw, 40px);
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	overflow: clip;
	border: 1px solid var(--mn-rule);
	border-radius: var(--wp--custom--radius--lg);
	background: var(--mn-surface-raised);
	box-shadow: var(--mn-shadow-lift);
	color: var(--mn-text);
}
@media (min-width: 960px) {
	.mn-csel { grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); }
}

.mn-csel__stage {
	display: grid;
	grid-template-rows: auto minmax(0, 1fr);
	gap: clamp(16px, 2vw, 24px);
	padding: var(--mn-csel-pad) var(--mn-csel-pad) calc(var(--mn-csel-pad) * 0.75);
}

/* 3. Choice chips (02 §7.16: a radio group, white, 1 px field, Inter 600 small, ≥ 44 px; selected ink-1 and white) */

.mn-csel__controls {
	display: flex;
	flex-wrap: wrap;
	gap: 18px clamp(20px, 3vw, 36px);
}
.mn-csel__group {
	flex: 4 1 16rem;
	min-inline-size: 0;
	margin: 0;
	padding: 0;
	border: 0;
}
.mn-csel__group--cfg { flex: 5 1 20rem; }
.mn-csel__legend {
	float: left; /* Lets the legend sit in the flow like a block, above the chips. */
	inline-size: 100%;
	margin: 0 0 10px;
	padding: 0;
}
.mn-csel__chips {
	clear: both;
	display: grid;
	grid-auto-columns: minmax(0, 1fr);
	grid-auto-flow: column;
	gap: 8px;
}

.mn-csel .mn-choice {
	position: relative;
	box-sizing: border-box;
	display: grid;
	align-content: center;
	justify-items: center;
	gap: 3px;
	min-block-size: 60px; /* Room for a name and two short lines, so no state changes a chip's height. */
	padding: 6px 8px;
	border: 1px solid var(--mn-field-border);
	border-radius: var(--wp--custom--radius--sm);
	background: var(--mn-field-bg);
	color: var(--mn-text-strong);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	line-height: 1.1;
	text-align: center;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition:
		background-color var(--wp--custom--motion--micro) var(--wp--custom--motion--ease),
		border-color var(--wp--custom--motion--micro) var(--wp--custom--motion--ease),
		color var(--wp--custom--motion--micro) var(--wp--custom--motion--ease),
		box-shadow var(--wp--custom--motion--micro) var(--wp--custom--motion--ease),
		opacity var(--wp--custom--motion--micro) var(--wp--custom--motion--ease);
}
/* The radio covers its chip: the whole chip is the target, and touch screen readers find it where it is drawn. */
.mn-csel .mn-choice__input {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	margin: 0;
	opacity: 0;
	cursor: inherit;
}
.mn-csel .mn-choice__main { white-space: nowrap; }
.mn-csel .mn-choice__num {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.375rem;
	font-weight: 800;
	letter-spacing: var(--wp--custom--tracking--title);
	font-variant-numeric: tabular-nums;
}
.mn-csel .mn-choice--len .mn-choice__main { display: inline-flex; align-items: baseline; gap: 3px; color: var(--mn-text-muted); }
.mn-csel .mn-choice--len .mn-choice__num { color: var(--mn-text-strong); }
/* The type's line (what each kind of that type takes: "40′ or 20/40/45′") and its reasons. Both may wrap, between
   the kinds or between words, never inside a length ("20/40/45′" holds together). */
.mn-csel .mn-choice__sub,
.mn-csel .mn-choice__why {
	max-inline-size: 100%;
	font-size: var(--wp--custom--font-size--micro);
	font-weight: 500;
	line-height: 1.15;
	color: var(--mn-text-muted);
	font-variant-numeric: tabular-nums;
	text-wrap: balance;
}
/* A reason shows only for the chosen length (from the radios, so without the script too), in place of the line, and
   is then the end of the radio's accessible name ("Tandem, Takes 40 ft only"). */
.mn-csel .mn-choice__why { display: none; }
.mn-csel:has(input[data-len="20"]:checked) .mn-choice__why[data-len="20"],
.mn-csel:has(input[data-len="40"]:checked) .mn-choice__why[data-len="40"],
.mn-csel:has(input[data-len="45"]:checked) .mn-choice__why[data-len="45"],
.mn-csel:has(input[data-len="53"]:checked) .mn-choice__why[data-len="53"] { display: block; }
.mn-csel:has(input[data-len="20"]:checked) .mn-choice:has(.mn-choice__why[data-len="20"]) :is(.mn-choice__sub, .mn-choice__sr),
.mn-csel:has(input[data-len="40"]:checked) .mn-choice:has(.mn-choice__why[data-len="40"]) :is(.mn-choice__sub, .mn-choice__sr),
.mn-csel:has(input[data-len="45"]:checked) .mn-choice:has(.mn-choice__why[data-len="45"]) :is(.mn-choice__sub, .mn-choice__sr),
.mn-csel:has(input[data-len="53"]:checked) .mn-choice:has(.mn-choice__why[data-len="53"]) :is(.mn-choice__sub, .mn-choice__sr) { display: none; }

.mn-csel .mn-choice:hover { border-color: var(--mn-text-strong); }
/* The chosen chip's fill, bar and shadow: theme.css §11 (.mn-chosen family). */
.mn-csel .mn-choice:has(:checked) :is(.mn-choice__main, .mn-choice__num) { color: var(--wp--preset--color--white); }
.mn-csel .mn-choice:has(:checked) :is(.mn-choice__sub, .mn-choice__why) { color: var(--wp--preset--color--on-dark-2); }
.mn-csel .mn-choice:has(:focus-visible) {
	outline: var(--wp--custom--focus--width) solid var(--mn-focus);
	outline-offset: var(--wp--custom--focus--offset);
}
/* A chip that doesn't take the chosen length: dashed, its name muted, its reason at full strength (text-muted,
   ≥ 4.5:1). The CSS shows it so from the reasons the plugin printed (no combination data lives in this file), so it
   reads as unavailable without the script too, where it is still a live choice and keeps AA contrast. The script
   disables it, and only then does its name drop to 45 % (an inactive control). A chosen chip keeps its chosen look
   (only reachable without the script: its reason and the panel say why). */
.mn-csel .mn-choice:has(:disabled),
.mn-csel:has(input[data-len="20"]:checked) .mn-choice:has(input:not(:checked)):has(.mn-choice__why[data-len="20"]),
.mn-csel:has(input[data-len="40"]:checked) .mn-choice:has(input:not(:checked)):has(.mn-choice__why[data-len="40"]),
.mn-csel:has(input[data-len="45"]:checked) .mn-choice:has(input:not(:checked)):has(.mn-choice__why[data-len="45"]),
.mn-csel:has(input[data-len="53"]:checked) .mn-choice:has(input:not(:checked)):has(.mn-choice__why[data-len="53"]) {
	border-style: dashed;
	border-color: var(--mn-rule-3);
	background: transparent;
	box-shadow: none;
	color: var(--mn-text-muted);
}
.mn-csel .mn-choice:has(:disabled) { --mn-csel-dim: 0.45; cursor: not-allowed; }
.mn-csel .mn-choice__main { opacity: var(--mn-csel-dim, 1); }

/* 4. The drawing ------------------------------------------------------------------------------------------------- */

.mn-csel__figure {
	display: grid;
	grid-template-rows: minmax(0, 1fr) auto;
	gap: 10px;
	margin: 0;
}
/* The drafting area takes the stage's spare height (a taller result plate beside it sets the row), the drawing at
   its top, so a plate that grows or shrinks with the result never moves the drawing, and bleeding to the card's
   edges. */
.mn-csel__art {
	position: relative;
	isolation: isolate;
	display: grid;
	align-content: start;
	margin-inline: calc(var(--mn-csel-pad) * -1);
	padding-block: clamp(8px, 2vw, 24px);
	color: var(--mn-text-strong);
}
/* Drafting-paper grid behind the drawing, fading out to the edges. */
.mn-csel__art::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: var(--mn-z-under);
	background-image:
		linear-gradient(var(--mn-grid-line) 1px, transparent 1px),
		linear-gradient(90deg, var(--mn-grid-line) 1px, transparent 1px);
	background-position: center center;
	background-size: calc(var(--wp--custom--grid--plate) / 2) calc(var(--wp--custom--grid--plate) / 2);
	-webkit-mask-image: radial-gradient(62% 70% at 50% 50%, #000 35%, transparent 100%);
	mask-image: radial-gradient(62% 70% at 50% 50%, #000 35%, transparent 100%);
	pointer-events: none;
}
.mn-csel__svg {
	display: block;
	inline-size: 100%;
	block-size: auto;
	overflow: visible;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.mn-csel__svg :is(path, line, rect, circle) { vector-effect: non-scaling-stroke; }
.mn-csel__svg { transition: opacity var(--wp--custom--motion--ui) var(--wp--custom--motion--ease); }
/* A pair that doesn't exist (only reachable without the script): the drawing steps back, the panel says why. */
.mn-csel:has(input[data-len="20"]:checked):has(input[data-cfg]:checked:not([data-fits~="20"])) .mn-csel__svg,
.mn-csel:has(input[data-len="40"]:checked):has(input[data-cfg]:checked:not([data-fits~="40"])) .mn-csel__svg,
.mn-csel:has(input[data-len="45"]:checked):has(input[data-cfg]:checked:not([data-fits~="45"])) .mn-csel__svg,
.mn-csel:has(input[data-len="53"]:checked):has(input[data-cfg]:checked:not([data-fits~="53"])) .mn-csel__svg { opacity: 0.28; }
/* :where() keeps this at zero specificity, so each part's own transform-origin below wins. */
:where(.mn-csel__svg) :where(g, path, line, rect, text) { transform-box: view-box; transform-origin: 0 0; }
.mn-csel__note {
	margin: 0;
	color: var(--mn-text-muted);
	font-size: var(--wp--custom--font-size--micro);
	line-height: 1.4;
}

/* Moves, all computed from the animated state (geometry in the header). The frame is max(container, closed) feet. */
.mn-csel__tail { transform: translateX(calc((max(var(--mn-csel-len), var(--mn-csel-closed)) - 53) * 19px)); }
.mn-csel__load { transform: translateX(calc(max(0, var(--mn-csel-closed) - var(--mn-csel-len)) * 9.5px)); }
.mn-csel__end { transform: translateX(calc((var(--mn-csel-len) - 53) * 19px)); }
.mn-csel__scale { transform-origin: 96px 0; transform: scaleX(calc(var(--mn-csel-len) / 53)); }
.mn-csel__rails { transform-origin: 96px 0; transform: scaleX(calc(var(--mn-csel-closed) / 53)); }
/* The opened-out section (the 20-40-45 at 45 ft, the extendable at 45 and 53): drawn from 40 to 53 ft, moved to the
   closed length and stretched to the container's, revealed as it opens. */
.mn-csel__extension {
	transform-origin: 856px 0;
	transform:
		translateX(calc((var(--mn-csel-closed) - 40) * 19px))
		scaleX(max(0.001, calc(max(0, var(--mn-csel-len) - var(--mn-csel-closed)) / 13)));
	opacity: clamp(0, calc(var(--mn-csel-len) - var(--mn-csel-closed)), 1);
}
.mn-csel__bolster { opacity: calc(1 - var(--mn-csel-goose)); }
.mn-csel__neck { opacity: var(--mn-csel-goose); }
.mn-csel__axle-3 {
	opacity: var(--mn-csel-ax3);
	transform: translateX(calc((1 - var(--mn-csel-ax3)) * 24px));
}
/* A rib shows only while it is inside the container, clear of the doors. */
.mn-csel__rib { opacity: clamp(0, calc((var(--mn-csel-len) * 19 + 96 - var(--x) - 48) / 10), 1); }

/* Paint: the chassis in the surface's strong text colour; the container in the link colour (cyan-700 on light,
   cyan-300 on dark), dashed; the twist-locks cyan; measuring lines muted. */
.mn-csel__box-outline { stroke: var(--mn-link); stroke-dasharray: 10 7; }
.mn-csel__castings { stroke: var(--mn-link); }
.mn-csel__doors { stroke: var(--mn-link); opacity: 0.7; }
.mn-csel__rib { stroke: rgba(var(--wp--custom--cyan-rgb), 0.32); }
.mn-csel__locks { stroke: var(--wp--preset--color--cyan); stroke-width: 3; }
.mn-csel__light { fill: var(--wp--preset--color--led-amber); stroke: none; }
.mn-csel__fine { opacity: 0.35; } /* The rail's web line and the tyres' sidewalls. */
.mn-csel__dim { stroke: var(--mn-text-muted); }
.mn-csel__ruler { stroke: var(--mn-rule-3); }
.mn-csel__ground { color: var(--mn-rule-3); }
.mn-csel__svg text { stroke: none; fill: currentColor; }
.mn-csel__svg .mn-csel__ruler-text {
	fill: var(--mn-text-muted);
	font-family: var(--wp--preset--font-family--body);
	font-size: 21px;
	font-weight: 500;
	text-anchor: middle;
	font-variant-numeric: tabular-nums;
}
@media (max-width: 599px) {
	.mn-csel__ruler-text { display: none; }
}

/* The length label: a stencil on the container's side, centred on it, crossfading (out tap easeIn, in micro
   easeOut). Its halo in the stage colour clears the ribs behind it. */
.mn-csel__label { transform: translateX(calc(var(--mn-csel-len) * 9.5px)); }
.mn-csel__label text {
	opacity: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: 92px;
	font-weight: 800;
	letter-spacing: -0.03em;
	text-anchor: middle;
	paint-order: stroke;
	stroke: var(--mn-surface-raised);
	stroke-width: 14px;
	stroke-linejoin: round;
	transition: opacity var(--wp--custom--motion--tap) var(--wp--custom--motion--ease-in);
}
.mn-csel__label text[data-len="40"] { opacity: 1; }

/* 5. The result plate -------------------------------------------------------------------------------------------- */

/* The plate is as tall as the chosen panel and its links, never the tallest panel: Rent · Lease · Buy follow the rows
   directly. Beside the drawing (from 960 px) the plate also spans the drawing's height; any height left over falls
   below the links, never between the result and its links. */
.mn-csel__result {
	position: relative;
	isolation: isolate;
	overflow: clip;
	display: grid;
	grid-template-rows: auto auto;
	align-content: start;
	gap: 28px;
	padding: var(--mn-csel-pad);
	background: var(--wp--preset--gradient--stage);
}
.mn-csel__glow { --mn-glow-strength: 0.18; inset-inline-end: -30%; inset-block-start: -35%; }

.mn-csel__panels { position: relative; display: grid; align-content: start; }
.mn-csel__panel > * { margin: 0; }
.mn-csel__fit {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--mn-eyebrow);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}
.mn-csel__fit .mn-icon { inline-size: 18px; block-size: 18px; }
.mn-csel__panel--none .mn-csel__fit { color: var(--mn-text-muted); }
.mn-csel__title {
	margin-block: 8px 18px;
	color: var(--mn-text-strong);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 800;
	line-height: var(--wp--custom--line-height--title);
	letter-spacing: var(--wp--custom--tracking--title);
}
.mn-csel__why { max-inline-size: 34ch; color: var(--mn-text); line-height: var(--wp--custom--line-height--lede); }
.mn-csel__list + .mn-csel__list { margin-block-start: 20px; }
.mn-csel__list-label { margin: 0 0 8px; }
.mn-csel__rows { margin: 0; padding: 0; list-style: none; border-block-start: 1px solid var(--mn-rule-2); }
.mn-csel__rows > li { border-block-end: 1px solid var(--mn-rule-2); }
.mn-csel__row {
	display: flex;
	align-items: center;
	gap: 12px;
	min-block-size: 48px;
	padding-block: 6px;
	color: var(--mn-text-strong);
	font-size: var(--wp--custom--font-size--ui);
	font-weight: 500;
	line-height: 1.3;
	text-decoration: none;
}
.mn-csel__row:hover { color: var(--mn-link-hover); }
.mn-csel__row-label { flex: 1 1 auto; min-inline-size: 0; }
.mn-csel__row > .mn-icon--arrow-right {
	flex: none;
	inline-size: 18px;
	block-size: 18px;
	color: var(--mn-link);
	transition: transform var(--wp--custom--motion--micro) var(--wp--custom--motion--ease);
}
@media (hover: hover) and (pointer: fine) {
	.mn-csel__row:hover > .mn-icon--arrow-right { transform: translateX(3px); }
}
.mn-csel__status {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	flex: none;
	color: var(--mn-text-muted);
	font-size: var(--wp--custom--font-size--micro);
	font-weight: 500;
}
.mn-csel__status .mn-led-dot--pending { background: var(--wp--preset--color--led-amber); box-shadow: none; }

.mn-csel__row--model { gap: 14px; }
.mn-csel__thumb {
	flex: none;
	inline-size: 88px;
	aspect-ratio: 16 / 10;
	border-radius: var(--wp--custom--radius--xs);
}
.mn-csel__thumb > img { padding: 4% 2% 6%; }
.mn-csel__thumb-art { inline-size: 92%; block-size: auto; color: var(--wp--preset--color--ink-1); }
.mn-csel__model-size {
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	letter-spacing: var(--wp--custom--tracking--title);
}
.mn-csel__model-name { display: block; color: var(--mn-text-muted); font-size: var(--wp--custom--font-size--meta); }

.mn-csel__get {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
}
.mn-csel__get .mn-btn { padding-inline: 0.75rem; }
.mn-csel__get .mn-btn--glass .mn-icon { display: none; }

/* 6. Switching (with :has(); without it the panels print as a plain list) --------------------------------------- */

@supports selector(:has(*)) {
	/* Only the chosen panel takes space: the others are hidden and lifted out of the flow (still laid out, so their
	   lazy thumbnails load ahead). The outgoing one fades out (tap, easeIn) and keeps its place in the shared cell
	   until it has gone (a discrete `position` transition), so it never overlaps the links; then the incoming one fades
	   in (micro, easeOut) and the plate takes its height. Browsers without discrete transitions lift it out at once. */
	.mn-csel__panel {
		grid-area: 1 / 1;
		transition:
			opacity var(--wp--custom--motion--micro) var(--wp--custom--motion--ease-out) var(--wp--custom--motion--tap),
			visibility 0s linear var(--wp--custom--motion--tap);
	}
	.mn-csel:has(input[data-len="20"]:checked) .mn-csel__panel:not([data-len="20"]),
	.mn-csel:has(input[data-len="40"]:checked) .mn-csel__panel:not([data-len="40"]),
	.mn-csel:has(input[data-len="45"]:checked) .mn-csel__panel:not([data-len="45"]),
	.mn-csel:has(input[data-len="53"]:checked) .mn-csel__panel:not([data-len="53"]),
	.mn-csel:has(input[data-cfg="tandem"]:checked) .mn-csel__panel:not([data-cfg="tandem"]),
	.mn-csel:has(input[data-cfg="tridem"]:checked) .mn-csel__panel:not([data-cfg="tridem"]),
	.mn-csel:has(input[data-cfg="extendable"]:checked) .mn-csel__panel:not([data-cfg="extendable"]) {
		position: absolute;
		inset-block-start: 0;
		inset-inline: 0;
		visibility: hidden;
		opacity: 0;
		transition:
			opacity var(--wp--custom--motion--tap) var(--wp--custom--motion--ease-in),
			visibility 0s linear var(--wp--custom--motion--tap),
			position 0s linear var(--wp--custom--motion--tap);
		transition-behavior: allow-discrete;
	}

	.mn-csel__label text[data-len="40"] { opacity: 0; }
	.mn-csel:has(input[data-len="20"]:checked) .mn-csel__label text[data-len="20"],
	.mn-csel:has(input[data-len="40"]:checked) .mn-csel__label text[data-len="40"],
	.mn-csel:has(input[data-len="45"]:checked) .mn-csel__label text[data-len="45"],
	.mn-csel:has(input[data-len="53"]:checked) .mn-csel__label text[data-len="53"] {
		opacity: 1;
		transition: opacity var(--wp--custom--motion--micro) var(--wp--custom--motion--ease-out) var(--wp--custom--motion--tap);
	}
}
@supports not selector(:has(*)) {
	.mn-csel__panel--none,
	.mn-csel__controls { display: none; }
	.mn-csel__panel + .mn-csel__panel { margin-block-start: 28px; }
}

/* 7. Phones -------------------------------------------------------------------------------------------------------- */

@media (max-width: 599px) {
	.mn-csel__controls { gap: 16px; }
	.mn-csel .mn-choice { padding-inline: 4px; }
	.mn-csel .mn-choice__num { font-size: 1.25rem; }
	/* No crop here: the drawing stays at the card's full width (the art bleeds to the card's edges), so the frame and
	   the container (x 88–1109 of the 1200 viewBox) keep about 7 % clear at each end and a 53 ft box never touches
	   the card's edge. */
}
@media (max-width: 359px) {
	/* The narrowest phones: the type names keep their line ("Extendable" in a 77 px chip). */
	.mn-csel .mn-choice--cfg .mn-choice__main { font-size: var(--wp--preset--font-size--x-small); }
	.mn-csel .mn-choice { padding-inline: 2px; }
}

/* 8. Reduced motion (theme.css §24 already stops the transitions) ------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	.mn-csel__row:hover > .mn-icon--arrow-right { transform: none; }
}

/* ================================================================================================================
   C. Payment estimator and the Blue Capital plate
   ================================================================================================================ */

/*
 * Payment estimator and the Blue Capital hand-off (mainland-inventory: mainland/payment-estimator,
 * mainland/finance-handoff; docs/13-TOOLS.md §5, §6, §9; 02 §7.28), and how the home financing band holds the
 * estimator on the Blue Capital plate. Part C of home-bands.css (functions.php, handle "mainland-home-bands").
 *
 * Tokens only: theme.json presets and the --mn-* surface properties from theme.css, so the estimator reads on the
 * navy plate (.mn-on-ink) and on a light card alike. On the plate every small text is on-dark-2 or lighter
 * (7.07:1 at the gradient's top stop #0E3150; on-dark-3 is 4.20:1 there and is kept for field borders only).
 * Motion (10-MOTION.md): the figure counts to its new value in JavaScript (≤ 360 ms), the principal/interest bar
 * moves by transform; neither under reduced motion. Grids use minmax(0, 1fr).
 * No layout shift while typing: the result panel is the same size in every state (a figure or "—", the "financed"
 * line or the message in the same slot), and the figure's line breaks depend on the panel's width, never on the
 * number (§2, "The result").
 */

/* 1. The financing band with the estimator --------------------------------------------------------------------- */
/* The plate runs the band's width under the head. It reads its own room (container queries on the band's
   container, so 600–1223 px and phones all get a layout that fits rather than a breakpoint guess):
     narrow   (phones)        logo, C3, the facts, then the estimator, all in one column;
     ≥ 44 rem (tablets, 1024) the Blue Capital side as two columns over the estimator;
     ≥ 70 rem (1224 px up)    the Blue Capital side as a column beside the estimator, a hairline between.
   The estimator itself puts its inputs beside its result once its column is 42 rem wide (§2). */

.mn-finance--estimator > .mn-container { container: mn-finance / inline-size; }
.mn-bc--wide { display: grid; grid-template-columns: minmax(0, 1fr); padding: clamp(24px, 3.4vw, 48px); }
.mn-bc--wide :where(.mn-bc__claim, .mn-bc__about) > p { margin: 0; }
.mn-bc--wide .mn-bc__big { margin-block-start: 24px; font-size: var(--wp--preset--font-size--xx-large); }
.mn-bc--wide .mn-bc__sub { margin-block-start: 14px; }
.mn-bc--wide .mn-bc__list { margin-block-start: 22px; }
.mn-bc__tool { container: mn-bc-tool / inline-size; min-inline-size: 0; }
.mn-bc--wide .mn-bc__foot { margin-block-start: 18px; }

@container mn-finance (min-width: 44rem) {
	.mn-bc__brand { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: start; column-gap: clamp(28px, 4vw, 56px); }
	.mn-bc__about > .mn-bc__sub { margin: 0; }
}
@container mn-finance (min-width: 70rem) {
	.mn-bc--wide { grid-template-columns: minmax(0, 18rem) minmax(0, 1fr); }
	.mn-bc__brand { display: block; padding-inline-end: clamp(28px, 3.4vw, 48px); }
	.mn-bc__about > .mn-bc__sub { margin-block-start: 14px; }
	.mn-bc__tool { padding-inline-start: clamp(28px, 3.4vw, 48px); border-inline-start: 1px solid rgba(255, 255, 255, 0.12); }
	.mn-bc__tool > .mn-est { margin-block-start: 0; }
	.mn-bc__tool .mn-est__head { padding-block-start: 0; border-block-start: 0; }
}

/* 2. Estimator ------------------------------------------------------------------------------------------------ */

.mn-est {
	--mn-est-track: var(--mn-rule-2);
	--mn-est-interest: var(--mn-text);
	--mn-est-screen: var(--wp--preset--color--paper);
	--mn-est-screen-edge: var(--mn-rule);
	--mn-est-error: var(--wp--preset--color--error);
	--mn-est-fig: clamp(2.5rem, 1.9rem + 1.9vw, 3.25rem);
	container: mn-est / inline-size;
	margin-block-start: 30px;
}
.mn-est [hidden] { display: none !important; }
.mn-est__form { display: block; margin: 0; }
.mn-est__form p { margin: 0; }

.mn-est__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px 16px;
	padding-block-start: 24px;
	border-block-start: 1px solid var(--mn-rule-2);
}
.mn-est__assume { color: var(--mn-text); font-size: var(--wp--custom--font-size--meta); font-weight: 500; }

.mn-est__fields { display: grid; gap: 18px; margin-block-start: 22px; }
.mn-est__field { display: grid; gap: 8px; min-inline-size: 0; margin: 0; padding: 0; border: 0; }
.mn-est__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-block-size: 44px; }
.mn-est__labels { display: grid; gap: 3px; min-inline-size: 0; }
.mn-est__label {
	padding: 0;
	color: var(--mn-text-strong);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--custom--font-size--ui);
	font-weight: 600;
	line-height: 1.3;
}
.mn-est__hint { color: var(--mn-text); font-size: var(--wp--custom--font-size--meta); line-height: 1.3; }
.mn-est__note:empty { display: none; }
.mn-est__note { color: var(--mn-text-strong); font-size: var(--wp--custom--font-size--meta); }

/* Fields: a box with its unit and right-aligned tabular figures. The price is grouped text ("120,000", parsed the
   BCEF way); the percent is a number field without spinners (arrow keys still step). */
.mn-est__box {
	box-sizing: border-box;
	display: inline-flex;
	flex: none;
	align-items: center;
	inline-size: 9.25rem;
	block-size: var(--wp--custom--target--min);
	padding-inline: 12px;
	border-radius: var(--wp--custom--radius--sm);
	background: var(--mn-field-bg);
	box-shadow: inset 0 0 0 1px var(--mn-field-border); /* drawn inside, so the field itself is the full 44 px */
	color: var(--mn-text);
	cursor: text;
	transition: box-shadow var(--wp--custom--motion--micro) var(--wp--custom--motion--ease);
}
.mn-est__box--pct { inline-size: 5.75rem; }
.mn-est__box:hover { box-shadow: inset 0 0 0 1px var(--mn-text-strong); }
.mn-est__box:focus-within {
	box-shadow: inset 0 0 0 1px var(--mn-text-strong);
	outline: var(--wp--custom--focus--width) solid var(--mn-focus);
	outline-offset: 2px;
}
.mn-est__affix { flex: none; font-weight: 500; pointer-events: none; }
.mn-est__input {
	flex: 1 1 auto;
	box-sizing: border-box;
	inline-size: 100%;
	min-inline-size: 0;
	block-size: 100%;
	margin: 0;
	padding: 0 0 0 6px;
	border: 0;
	background: none;
	color: var(--mn-field-text);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	text-align: end;
	-moz-appearance: textfield;
	appearance: textfield;
}
.mn-est__box--pct .mn-est__input { padding: 0 6px 0 0; }
.mn-est__input:focus,
.mn-est__input:focus-visible { outline: none; }
.mn-est__input::-webkit-outer-spin-button,
.mn-est__input::-webkit-inner-spin-button { margin: 0; -webkit-appearance: none; appearance: none; }
.mn-est__input[aria-invalid="true"] { color: var(--mn-text-strong); }
/* Invalid (02 §7.9): the box's edge and the message below take the error colour; the message starts with a
   visually hidden "Error:" and is tied to the field by aria-describedby (the script fills it on blur, then live). */
.mn-est__box:has(> .mn-est__input[aria-invalid="true"]),
.mn-est__box:has(> .mn-est__input[aria-invalid="true"]):hover { box-shadow: inset 0 0 0 2px var(--mn-est-error); }
.mn-est__error {
	display: flex;
	align-items: flex-start;
	gap: 6px;
	color: var(--mn-est-error);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	line-height: 1.4;
}
.mn-est__error::before {
	content: "";
	flex: none;
	inline-size: 1.05em;
	block-size: 1.05em;
	margin-block-start: 0.1em;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Range sliders (shown once the script runs): a 6 px track filled to the value, a 24 px thumb, a 44 px target. */
.mn-est__range {
	--mn-fill: 50%;
	display: block;
	box-sizing: border-box;
	inline-size: 100%;
	block-size: var(--wp--custom--target--min);
	margin: -6px 0 -8px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	touch-action: pan-y;
}
.mn-est__range:focus { outline: none; }
.mn-est__range::-webkit-slider-runnable-track {
	block-size: 6px;
	border-radius: var(--wp--custom--radius--pill);
	background: linear-gradient(90deg, var(--wp--preset--color--cyan) 0 var(--mn-fill), var(--mn-est-track) var(--mn-fill) 100%);
}
.mn-est__range::-moz-range-track { block-size: 6px; border-radius: var(--wp--custom--radius--pill); background: var(--mn-est-track); }
.mn-est__range::-moz-range-progress { block-size: 6px; border-radius: var(--wp--custom--radius--pill); background: var(--wp--preset--color--cyan); }
.mn-est__range::-webkit-slider-thumb {
	inline-size: 24px;
	block-size: 24px;
	margin-block-start: -9px;
	border: 0;
	border-radius: 50%;
	background: var(--wp--preset--color--white);
	box-shadow: 0 0 0 5px rgba(var(--wp--custom--cyan-rgb), 0.3), 0 4px 12px rgba(var(--wp--custom--ink-rgb), 0.55);
	-webkit-appearance: none;
	appearance: none;
	transition: transform var(--wp--custom--motion--micro) var(--wp--custom--motion--ease), box-shadow var(--wp--custom--motion--micro) var(--wp--custom--motion--ease);
}
.mn-est__range::-moz-range-thumb {
	inline-size: 24px;
	block-size: 24px;
	border: 0;
	border-radius: 50%;
	background: var(--wp--preset--color--white);
	box-shadow: 0 0 0 5px rgba(var(--wp--custom--cyan-rgb), 0.3), 0 4px 12px rgba(var(--wp--custom--ink-rgb), 0.55);
}
.mn-est__range:active::-webkit-slider-thumb { transform: scale(1.12); }
.mn-est__range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--wp--preset--color--bc-navy), 0 0 0 5px var(--mn-focus), 0 4px 12px rgba(var(--wp--custom--ink-rgb), 0.55); }
.mn-est__range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px var(--wp--preset--color--bc-navy), 0 0 0 5px var(--mn-focus), 0 4px 12px rgba(var(--wp--custom--ink-rgb), 0.55); }

/* Term chips: native radios over the chip, so clicks, arrow keys and the form all work without the script. Every
   chip is at least 44 px wide: five share one row down to a 236 px estimator (a 320 px phone), the gap narrowing
   to 4 px there; any narrower, or with more terms, they wrap to a second row instead of shrinking. */
.mn-est__terms { display: block; }
.mn-est__terms > legend { float: left; inline-size: 100%; margin-block-end: 10px; }
.mn-est__chips {
	clear: both;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(var(--wp--custom--target--min), 1fr));
	gap: 6px;
}
@container mn-est (max-width: 15.5rem) {
	.mn-est__chips { gap: var(--wp--preset--spacing--10); }
}
.mn-est__chip { position: relative; display: grid; }
.mn-est__chip input {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}
.mn-est__chip span {
	display: grid;
	place-items: center;
	min-block-size: var(--wp--custom--target--min);
	border: 1px solid var(--mn-field-border);
	border-radius: var(--wp--custom--radius--sm);
	color: var(--mn-text-strong);
	font-size: var(--wp--custom--font-size--ui);
	font-weight: 600;
	pointer-events: none;
	transition:
		background-color var(--wp--custom--motion--micro) var(--wp--custom--motion--ease),
		border-color var(--wp--custom--motion--micro) var(--wp--custom--motion--ease),
		color var(--wp--custom--motion--micro) var(--wp--custom--motion--ease);
}
.mn-est__chip:hover span { border-color: var(--mn-text-strong); }
/* Chosen: the choice-chip family (02 §7.16; one rule in theme.css §11): ink on a light surface, white on the plate,
   so it never reads as a second cyan button beside the hand-off. */
.mn-est--plate .mn-est__chip input:checked + span { color: var(--wp--preset--color--ink-1); }
.mn-est__chip input:focus-visible + span { outline: var(--wp--custom--focus--width) solid var(--mn-focus); outline-offset: var(--wp--custom--focus--offset); }

.mn-est__calc { padding-block-start: 4px; }

/* The result: a recessed screen with the figure, what it is made of, and the principal/interest bar. */
.mn-est__out {
	container: mn-est-out / inline-size;
	margin-block-start: 26px;
	padding: 20px 22px;
	border-radius: var(--wp--custom--radius--md);
	background: var(--mn-est-screen);
	box-shadow: inset 0 0 0 1px var(--mn-est-screen-edge);
}
.mn-est__out-label {
	color: var(--mn-text);
	font-size: 0.6875rem;
	font-weight: 600;
	line-height: 1;
	letter-spacing: var(--wp--custom--tracking--spec);
	text-transform: uppercase;
}
.mn-est__figure {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 8px;
	margin-block-start: 12px !important;
	color: var(--mn-text-strong);
	line-height: 1;
}
/* "≈" sits on the amount's baseline but adds no height (line-height 0), so the line is the amount's, always. */
.mn-est__approx {
	color: var(--mn-link);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--xx-large);
	font-weight: 700;
	line-height: 0;
}
.mn-est__amount {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--mn-est-fig);
	font-weight: 800;
	line-height: 0.95;
	letter-spacing: var(--wp--custom--tracking--heading);
	font-variant-numeric: tabular-nums;
	font-synthesis: none;
}
.mn-est__per { flex-basis: 100%; color: var(--mn-text); font-size: var(--wp--preset--font-size--medium); font-weight: 600; white-space: nowrap; }
/* The figure's lines depend on the panel, never on the number: in a narrow panel "/mo OAC*" always takes the second
   line; from 20.5rem the widest five-figure payment ("≈ $99,999/mo OAC*" at the largest size, 323 px) fits on one
   line, a six-figure one (.is-long, from a price in the millions) at 85% size, and the line keeps its height. */
@container mn-est-out (min-width: 20.5rem) {
	.mn-est__figure { flex-wrap: nowrap; min-block-size: calc(var(--mn-est-fig) * 0.95); }
	.mn-est__per { flex-basis: auto; }
	.mn-est__amount.is-long { font-size: calc(var(--mn-est-fig) * 0.85); }
}
.mn-est__per abbr { text-decoration: none; }
/* The footnote marker rides on "OAC" like a superscript; padding makes it a 44 px target without moving the line. */
.mn-est__mark {
	display: inline-block;
	margin: -14px -32px -14px 0;
	padding: 14px 32px 14px 3px;
	color: var(--mn-link);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	vertical-align: 0.4em;
}
.mn-est__mark:hover { color: var(--mn-link-hover); }
/* The "financed" line and the message that replaces it share one grid cell, so swapping them never moves the bar. */
.mn-est__line {
	display: grid;
	margin-block-start: 10px;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
}
.mn-est__line > p { grid-area: 1 / 1; }
.mn-est__meta { color: var(--mn-text); }
.mn-est__msg { visibility: hidden; color: var(--mn-text-strong); font-weight: 600; }

.mn-est__split { margin-block-start: 18px; }
.mn-est__bar {
	position: relative;
	overflow: hidden;
	block-size: 10px;
	border-radius: var(--wp--custom--radius--pill);
	background: linear-gradient(90deg, var(--wp--preset--color--cyan-700), var(--wp--preset--color--cyan));
}
.mn-est__bar-int {
	position: absolute;
	inset: 0;
	transform-origin: 100% 50%;
	background: var(--mn-est-interest);
	will-change: transform;
}
.mn-est.is-live .mn-est__bar-int { transition: transform var(--wp--custom--motion--ui) var(--wp--custom--motion--ease-out); }
.mn-est__legend {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.25fr);
	gap: 12px;
	margin: 14px 0 0;
}
.mn-est__key { display: grid; align-content: start; gap: 5px; min-inline-size: 0; }
.mn-est__key dt {
	display: flex;
	align-items: center;
	gap: 6px;
	color: var(--mn-text);
	font-size: 0.6875rem;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: var(--wp--custom--tracking--spec);
	text-transform: uppercase;
}
.mn-est__key--principal dt::before,
.mn-est__key--interest dt::before {
	content: "";
	flex: none;
	inline-size: 8px;
	block-size: 8px;
	border-radius: 2px;
	background: var(--wp--preset--color--cyan);
}
.mn-est__key--interest dt::before { background: var(--mn-est-interest); }
.mn-est__key dd { margin: 0; color: var(--mn-text-strong); font-size: var(--wp--custom--font-size--ui); font-weight: 600; font-variant-numeric: tabular-nums; }
.mn-est__key--total { text-align: end; }
.mn-est__key--total dt { justify-content: flex-end; }

/* No figure (13 §4.1, §5.2): no usable price, a down payment outside 0–50%, or paid in full. Every figure reads
   "—" (set by the script), the bar is an empty track, and the message takes the "financed" line's place, saying
   why. Nothing changes size: the parts are hidden by visibility, not removed. */
.mn-est__out:not([data-state="ok"]) :is(.mn-est__per, .mn-est__meta) { visibility: hidden; }
.mn-est__out:not([data-state="ok"]) .mn-est__approx { display: none; } /* "—" starts at the label's edge; the amount sets the line's height. */
.mn-est__out:not([data-state="ok"]) .mn-est__msg { visibility: visible; }
.mn-est__out:not([data-state="ok"]) .mn-est__amount { color: var(--mn-text); }
.mn-est__out:not([data-state="ok"]) .mn-est__bar { background: var(--mn-est-track); }
.mn-est__out:not([data-state="ok"]) .mn-est__bar-int { opacity: 0; }

/* The footnote sits directly under the result, small but never smaller than the small body size (13 §3.3). Its
   hidden twin (the widest figures, aria-hidden) shares its grid cell, so the box is always the twin's height and
   "$4,999" or "—" in place of "$120,000" never moves the hand-off below it. */
.mn-est__fnbox { display: grid; margin-block-start: 14px; }
.mn-est__fnbox > .mn-est__fn { grid-area: 1 / 1; }
.mn-est__fn--twin { visibility: hidden; }
.mn-est__fn {
	color: var(--mn-text);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
	text-wrap: pretty;
}
.mn-est__fn-mark { color: var(--mn-link); font-weight: 700; }
.mn-est__fn:target { color: var(--mn-text-strong); }

.mn-est__actions { margin-block-start: 22px; }
.mn-est__actions .mn-handoff { justify-items: stretch; }
.mn-est__actions .mn-handoff__link { inline-size: 100%; }

/* On the Blue Capital plate: darker recessed screen with a cyan edge; light-on-navy track and interest colour. The
   error colour is the amber light: 5.8:1 or more against the plate pixels behind the message (measured 5 Oct 2026,
   320–1440 px); the red `error` is 2.0–2.6:1 on the navy. */
.mn-est--plate,
.mn-on-ink .mn-est {
	--mn-est-error: var(--wp--preset--color--led-amber);
}
.mn-est--plate {
	--mn-est-track: rgba(255, 255, 255, 0.16);
	--mn-est-interest: var(--wp--preset--color--on-dark-2);
	--mn-est-screen: rgba(var(--wp--custom--ink-rgb), 0.34);
	--mn-est-screen-edge: rgba(var(--wp--custom--cyan-rgb), 0.26);
}
.mn-est--plate .mn-est__out { box-shadow: inset 0 0 0 1px var(--mn-est-screen-edge), inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 18px 40px -24px rgba(var(--wp--custom--ink-rgb), 0.8); }

/* A narrow screen (the plate at 960–1223 px and on phones): the total gets its own ruled row. */
@container mn-est-out (max-width: 25rem) {
	.mn-est__legend { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	.mn-est__key--total {
		display: flex;
		grid-column: 1 / -1;
		align-items: baseline;
		justify-content: space-between;
		padding-block-start: 10px;
		border-block-start: 1px solid var(--mn-rule-2);
		text-align: start;
	}
	.mn-est__line { font-size: var(--wp--custom--font-size--meta); }
}
/* The narrowest screen (a 320 px phone): the longest "financed" line or message (254 px at 13 px) can take two lines,
   so two are always kept; "Total of payments" sits over its figure, so a seven-figure total never wraps the label. */
@container mn-est-out (max-width: 16rem) {
	.mn-est__line { min-block-size: 3em; }
	.mn-est__key--total { display: grid; justify-content: start; }
}

@media (max-width: 599px) {
	.mn-est__out { padding: 18px 16px; }
	.mn-est__box { inline-size: 7.5rem; }
	.mn-est__box--pct { inline-size: 5.25rem; }
}

/* Inputs beside the result (the home plate from 42 rem of estimator width): the hand-off sits under the figure it
   carries, and the footnote runs across the foot. */
@container mn-bc-tool (min-width: 42rem) {
	.mn-est--plate .mn-est__form {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
		grid-template-areas: "head head" "fields out" "fields actions" "fn fn";
		grid-template-rows: auto auto minmax(0, 1fr) auto;
		column-gap: clamp(28px, 3vw, 44px);
	}
	.mn-est--plate .mn-est__head { grid-area: head; }
	.mn-est--plate .mn-est__fields { grid-area: fields; }
	.mn-est--plate .mn-est__out { grid-area: out; margin-block-start: 22px; }
	.mn-est--plate .mn-est__actions { grid-area: actions; margin-block-start: 16px; }
	.mn-est--plate .mn-est__fnbox { grid-area: fn; margin-block-start: 20px; padding-block-start: 16px; border-block-start: 1px solid var(--mn-rule); }
}

/* 3. Hand-off -------------------------------------------------------------------------------------------------- */

.mn-handoff { display: grid; justify-items: start; gap: 10px; }
.mn-handoff__line { max-inline-size: var(--mn-measure); margin: 0; color: var(--mn-text-muted); font-size: var(--wp--preset--font-size--small); }

/* 4. Motion and forced colours ---------------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.mn-est.is-live .mn-est__bar-int,
	.mn-est__chip span,
	.mn-est__box,
	.mn-est__range::-webkit-slider-thumb { transition: none; }
	.mn-est__range:active::-webkit-slider-thumb { transform: none; }
}

@media (forced-colors: active) {
	.mn-est__box { border: 1px solid CanvasText; }
	.mn-est__box:has(> .mn-est__input[aria-invalid="true"]) { border-width: 3px; }
	.mn-est__chip input:checked + span { border-width: 3px; border-color: Highlight; }
	.mn-est__bar { border: 1px solid CanvasText; }
}

/* Makes ribbon (02 §7.3b, 10 §4.17, decision #60) ------------------------------------------------------------------
   The trailer-maker logos after Shop by type, printed twice so the loop is seamless (translateX(-50%)); the copy is
   aria-hidden. It holds on hover, while focus is inside and while its pause checkbox is checked (WCAG 2.2.2); it never
   moves under reduced motion, where the logos wrap into a centred grid. Off screen the browser skips the band. */
.mn-ribbon-band { content-visibility: auto; contain-intrinsic-size: auto 180px; }
.mn-ribbon-band .mn-eyebrow { margin-block-end: var(--wp--preset--spacing--30); }
.mn-ribbon { display: flex; align-items: center; gap: var(--wp--preset--spacing--20); }
.mn-ribbon__viewport {
	flex: 1 1 auto;
	min-inline-size: 0;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
}
.mn-ribbon__viewport:focus-visible { outline: 2px solid var(--mn-focus, var(--wp--preset--color--cyan-700)); outline-offset: 2px; }
.mn-ribbon__track { display: flex; inline-size: max-content; align-items: center; margin: 0; padding: 0; list-style: none; }
.mn-ribbon__item { display: flex; flex: none; align-items: center; padding-inline: 24px; }
.mn-ribbon__logo { display: block; inline-size: auto; max-inline-size: 200px; block-size: 56px; object-fit: contain; }
@media (min-width: 782px) { .mn-ribbon__logo { block-size: 72px; } }
.mn-ribbon__ctl {
	position: relative;
	display: grid;
	flex: none;
	place-items: center;
	inline-size: var(--wp--custom--target--min);
	block-size: var(--wp--custom--target--min);
	border-radius: var(--wp--custom--radius--sm);
	color: var(--mn-text-muted);
	cursor: pointer;
}
.mn-ribbon__ctl:hover { color: var(--mn-text-strong); } /* a plain icon: no box, no fill (Avi: "remove the background") */
.mn-ribbon__toggle { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.mn-ribbon__ctl:has(.mn-ribbon__toggle:focus-visible) { outline: 2px solid var(--mn-focus, var(--wp--preset--color--cyan-700)); outline-offset: 2px; }
.mn-ribbon__icon { inline-size: 16px; block-size: 16px; }
.mn-ribbon__icon--play,
.mn-ribbon:has(.mn-ribbon__toggle:checked) .mn-ribbon__icon--pause { display: none; }
.mn-ribbon:has(.mn-ribbon__toggle:checked) .mn-ribbon__icon--play { display: block; }
@media (prefers-reduced-motion: no-preference) {
	.mn-ribbon__track { will-change: transform; animation: mn-ribbon var(--wp--custom--motion--ribbon) linear infinite; }
	.mn-ribbon:is(:hover, :focus-within) .mn-ribbon__track,
	.mn-ribbon:has(.mn-ribbon__toggle:checked) .mn-ribbon__track { animation-play-state: paused; }
}
@keyframes mn-ribbon { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
	.mn-ribbon__viewport { -webkit-mask-image: none; mask-image: none; }
	.mn-ribbon__track { inline-size: auto; flex-wrap: wrap; justify-content: center; row-gap: var(--wp--preset--spacing--30); }
	.mn-ribbon__item[aria-hidden="true"],
	.mn-ribbon__ctl { display: none; }
}