/**
 * Customer finder styles (Phase 3b).
 *
 * Matches the vacuumsrus.com palette via vru-theme tokens with literal fallbacks:
 * blue #0170B9 actions and links, green #1A7F37 positive, orange #D97706 helpful
 * callouts, red #CF2E2E warnings, slate #4B4F58 text, warm gold star fill. No dash
 * punctuation in any customer facing copy.
 */

.vru-finder {
	--vru-f-blue: var(--vru-color-primary, #0170B9);
	--vru-f-green: #1A7F37;
	--vru-f-orange: #D97706;
	--vru-f-red: #CF2E2E;
	--vru-f-text: var(--vru-color-text, #4B4F58);
	--vru-f-muted: var(--vru-color-muted, #62666c);
	--vru-f-border: var(--vru-color-border, #e2e8ed);
	--vru-f-surface: var(--vru-color-surface, #F2F5F7);
	--vru-f-star: #E8A33D;
	--vru-f-star-track: #E6E1D6;
	color: var(--vru-f-text);
	font-family: var(--vru-font-body, inherit);
	line-height: 1.5;
	max-width: 900px;
	margin: 0 auto;
}

/* Round 58 Fix 2: the tight density for [vru_finder_embed size="small"]. One modifier on
   the ONE finder root (render_shell adds vru-finder--embed-small only for the small embed);
   the question interface the app builds inside inherits these two reduction tokens. Every
   question-interface font drops 2 points and the buttons reduce their padding 25%, so the
   card sits smaller where space is tight. The reductions are folded into the base rules as
   var() with neutral defaults (0px drop, x1 scale), so the default embed and the full finder
   render byte for byte as before; only these tokens diverge here (the round 21 compact
   precedent: parameters diverge, structure never). No element reaches the plugin's 7px
   legibility floor: the smallest question font is 0.85rem, about 11.6px after the drop. */
.vru-finder--embed-small {
	--vru-f-embed-fs-drop: 2px;
	--vru-f-embed-pad-scale: 0.75;
}

.vru-finder-page-inner {
	max-width: 900px;
	margin: 0 auto;
	padding: 24px 16px 48px;
}

.vru-finder-header {
	text-align: center;
	margin-bottom: 24px;
}

.vru-finder-title {
	font-family: var(--vru-font-heading, inherit);
	margin: 0 0 8px;
}

.vru-finder-lead {
	color: var(--vru-f-muted);
	margin: 0 auto;
	max-width: 60ch;
}

.vru-finder-loading,
.vru-finder-error {
	padding: 40px 20px;
	text-align: center;
	color: var(--vru-f-muted);
}

.vru-finder-error {
	color: var(--vru-f-red);
}

.vru-finder-noscript {
	padding: 16px;
	background: var(--vru-f-surface);
	border-radius: 6px;
}

/* --------------------------------------------------------------- quiz. */

.vru-finder-quiz {
	background: #fff;
	border: 1px solid var(--vru-f-border);
	border-radius: 10px;
	padding: 24px;
}

.vru-finder-progress {
	height: 6px;
	background: var(--vru-f-surface);
	border-radius: 999px;
	overflow: hidden;
}

.vru-finder-progress-bar {
	height: 100%;
	background: var(--vru-f-blue);
	transition: width 0.3s ease;
}

.vru-finder-step-count {
	color: var(--vru-f-muted);
	font-size: calc( 0.85rem - var( --vru-f-embed-fs-drop, 0px ) );
	margin: 10px 0 4px;
}

.vru-finder-field {
	border: 0;
	padding: 0;
	margin: 0 0 20px;
}

.vru-finder-q {
	font-size: calc( 1.35rem - var( --vru-f-embed-fs-drop, 0px ) );
	font-family: var(--vru-font-heading, inherit);
	font-weight: 600;
	margin: 0 0 16px;
	padding: 0;
}

.vru-finder-opts {
	display: grid;
	gap: 10px;
}

.vru-finder-opt {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 16px;
	border: 2px solid var(--vru-f-border);
	border-radius: 8px;
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease;
}

.vru-finder-opt:hover {
	border-color: var(--vru-f-blue);
}

.vru-finder-opt.is-selected {
	border-color: var(--vru-f-blue);
	background: rgba( 1, 112, 185, 0.06 );
}

.vru-finder-opt input {
	accent-color: var(--vru-f-blue);
	width: 20px;
	height: 20px;
	flex: 0 0 auto;
}

.vru-finder-opt-label {
	font-size: calc( 1.05rem - var( --vru-f-embed-fs-drop, 0px ) );
}

/* sliders. */

.vru-finder-slider {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 8px 0;
}

.vru-finder-range {
	width: 100%;
	accent-color: var(--vru-f-blue);
	height: 28px;
}

.vru-finder-slider-out {
	font-size: calc( 1.6rem - var( --vru-f-embed-fs-drop, 0px ) );
	font-weight: 700;
	color: var(--vru-f-blue);
	text-align: center;
}

/* option scale (round 19 Fix 8): a slider whose stops are the options, each stop
   optionally showing its image, the selected stop and its image emphasised. */
.vru-finder-optscale {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 8px 0;
}
.vru-finder-scale-stops {
	display: flex;
	justify-content: space-between;
	gap: 6px;
	margin-top: -2px;
}
.vru-finder-scale-stop {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	font-size: calc( 0.85rem - var( --vru-f-embed-fs-drop, 0px ) );
	color: var(--vru-f-muted, #555b62);
	text-align: center;
}
.vru-finder-scale-stop:first-child { align-items: flex-start; text-align: left; }
.vru-finder-scale-stop:last-child { align-items: flex-end; text-align: right; }
.vru-finder-scale-stop.is-selected { color: var(--vru-f-blue); font-weight: 700; }
/* Round 22 Fix 4: the stop images shrink 20 percent (calc keeps the ratio
   literal); their labels beneath are untouched. Width and height stay declared so
   nothing shifts as the image loads or the selection changes. */
.vru-finder-scale-stop-img {
	width: calc( 48px * 0.8 );
	height: calc( 48px * 0.8 );
	object-fit: cover;
	border-radius: 6px;
	background: var(--vru-f-star-track, #eee);
	opacity: 0.6;
	transition: opacity 0.15s ease, transform 0.15s ease;
}
.vru-finder-scale-stop.is-selected .vru-finder-scale-stop-img { opacity: 1; transform: scale( 1.08 ); }
/* Round 22 Fix 4: the current selection echo stacks the word UNDER the image
   (column), and it renders above the slider by DOM order in this column layout. */
.vru-finder-scale-out { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
/* Round 24 (Josh): the selected image echoed above the slider grew 40% (56 to about
   78px). Round 28 Fix 3 compounds another 50% on top of that (x1.4 then x1.5, about
   117px) so the current choice reads even more clearly above the stops. The stacked
   layout and declared dimensions are unchanged, so nothing jumps as the selection moves. */
.vru-finder-scale-out-img { width: calc( 56px * 1.4 * 1.5 ); height: calc( 56px * 1.4 * 1.5 ); object-fit: cover; border-radius: 8px; flex: 0 0 auto; }
.vru-finder-scale-out-label { font-size: calc( 1.5rem - var( --vru-f-embed-fs-drop, 0px ) ); font-weight: 700; color: var(--vru-f-blue); }

/* An option's image beside its radio in the pick one fallback (and any choice). */
.vru-finder-opt-img { width: 40px; height: 40px; object-fit: cover; border-radius: 6px; flex: 0 0 auto; background: var(--vru-f-star-track, #eee); }

/* Round 28 Fix 1: the percentage split, two poles with their live shares over one slider.
   The poles sit side by side (a left pole and a right pole read as the two ends of the
   slider); on a narrow screen the images shrink so nothing crowds the control, and the
   shares and slider stay full width. Declared image dimensions so nothing jumps.
   Round 29 Fix 2: the pole images render 50% larger (the * 1.5 on the round 28 base),
   both poles equally and both dimensions declared, and the narrow-width token grows in
   step so the poles still do not crowd the control on a small screen. */
.vru-finder-split { margin-top: 8px; }
.vru-finder-split-poles { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 12px; }
.vru-finder-split-pole { display: flex; flex-direction: column; align-items: center; text-align: center; flex: 1 1 0; min-width: 0; gap: 4px; }
.vru-finder-split-img { width: calc( 96px * 1.5 ); height: calc( 96px * 1.5 ); object-fit: cover; border-radius: 8px; background: var(--vru-f-star-track, #eee); }
.vru-finder-split-label { font-weight: 600; }
.vru-finder-split-pct { font-size: calc( 1.4rem - var( --vru-f-embed-fs-drop, 0px ) ); font-weight: 700; color: var(--vru-f-blue); }
.vru-finder-split-range { width: 100%; }
@media ( max-width: 480px ) {
	.vru-finder-split-img { width: calc( 64px * 1.5 ); height: calc( 64px * 1.5 ); }
	.vru-finder-split-pct { font-size: calc( 1.2rem - var( --vru-f-embed-fs-drop, 0px ) ); }
}

/* nav. */

.vru-finder-nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: calc( 12px * var( --vru-f-embed-pad-scale, 1 ) );
}

.vru-finder-nav-right {
	display: flex;
	align-items: center;
	gap: calc( 8px * var( --vru-f-embed-pad-scale, 1 ) );
}

.vru-finder-btn {
	display: inline-block;
	font: inherit;
	font-size: calc( 1em - var( --vru-f-embed-fs-drop, 0px ) );
	font-weight: 600;
	border-radius: 8px;
	padding: calc( 11px * var( --vru-f-embed-pad-scale, 1 ) ) calc( 20px * var( --vru-f-embed-pad-scale, 1 ) );
	border: 2px solid transparent;
	cursor: pointer;
	text-decoration: none;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.vru-finder-btn-sm {
	padding: calc( 8px * var( --vru-f-embed-pad-scale, 1 ) ) calc( 14px * var( --vru-f-embed-pad-scale, 1 ) );
	font-size: calc( 0.9rem - var( --vru-f-embed-fs-drop, 0px ) );
}

.vru-finder-btn-primary {
	background: var(--vru-f-blue);
	color: #fff;
}

.vru-finder-btn-primary:hover {
	background: #015a94;
}

.vru-finder-btn-ghost {
	background: #fff;
	border-color: var(--vru-f-border);
	color: var(--vru-f-text);
}

.vru-finder-btn-ghost:hover {
	border-color: var(--vru-f-blue);
	color: var(--vru-f-blue);
}

.vru-finder-btn-link {
	background: transparent;
	color: var(--vru-f-muted);
	padding: calc( 11px * var( --vru-f-embed-pad-scale, 1 ) ) calc( 8px * var( --vru-f-embed-pad-scale, 1 ) );
}

.vru-finder-btn-link:hover {
	color: var(--vru-f-blue);
	text-decoration: underline;
}

.vru-finder-btn:focus-visible {
	outline: 3px solid rgba( 1, 112, 185, 0.4 );
	outline-offset: 2px;
}

/* --------------------------------------------------------------- results. */

.vru-finder-results-head {
	margin-bottom: 16px;
}

.vru-finder-results-title {
	font-family: var(--vru-font-heading, inherit);
	margin: 0 0 6px;
}

.vru-finder-results-intro {
	color: var(--vru-f-muted);
	margin: 0;
}

.vru-finder-gotcha {
	background: rgba( 217, 119, 6, 0.08 );
	border-left: 4px solid var(--vru-f-orange);
	border-radius: 6px;
	padding: 14px 16px;
	margin: 12px 0;
}

.vru-finder-compromise {
	background: rgba( 217, 119, 6, 0.08 );
	border: 1px solid var(--vru-f-orange);
	border-radius: 8px;
	padding: 16px;
	margin: 16px 0;
}

.vru-finder-compromise-head {
	font-weight: 600;
	margin: 0;
}

/* Round 32 Fix 1: as the divider between the two groups the banner takes more room
   above than below, so the machines that meet everything read as a finished group
   and the banner reads as the introduction to the close options under it. */
.vru-finder-compromise.is-divider {
	margin: 28px 0 4px;
}

/* Round 54 follow-up 2 (Josh 2026-08-11): the clear divider that introduces the close
   options when plenty of machines already meet everything (so the compromise banner is
   not present to mark the boundary). A strong top rule and a tinted panel with a heading
   weight line, set apart so the meets-everything group reads as finished above it and the
   close options as an optional, cheaper look below. */
.vru-finder-close-divider {
	margin: 28px 0 12px;
	padding: 14px 16px;
	border-top: 3px solid var(--vru-f-border);
	background: rgba( 1, 112, 185, 0.05 );
	border-radius: 8px;
}

.vru-finder-close-divider-text {
	margin: 0;
	font-weight: 600;
	color: var(--vru-f-text);
}

/* Round 54 Fix 1: the one-click budget raise offer, restored to the top of the
   results inside the compromise banner (superseding the round 53 above-budget bands).
   A tinted panel holding the server-authored sentence and the "Show me those" button
   that re-runs the finder at the raised budget. Rendered inside .vru-finder, so its
   button reads the in-scope --vru-f-* tokens and needs no out-of-scope literal base. */
.vru-finder-raise {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	background: rgba( 1, 112, 185, 0.06 );
	border-radius: 8px;
	padding: 12px 14px;
	margin: 12px 0;
}

.vru-finder-raise-text {
	font-weight: 600;
}

/* cards. */

.vru-finder-cards {
	display: grid;
	gap: 16px;
	margin-top: 16px;
}

.vru-finder-card {
	border: 1px solid var(--vru-f-border);
	border-radius: 10px;
	padding: 18px 20px;
	background: #fff;
	/* Round 22 Fix 6: the card content on the left, the machine thumbnail on the
	   right. The body takes the room; the media holds a fixed box. Round 26 Fix 4:
	   the body stretches to the card height so its buy area can sit at the foot. */
	display: flex;
	gap: 18px;
	align-items: stretch;
}
.vru-finder-card-body {
	flex: 1 1 auto;
	min-width: 0;
	/* Round 26 Fix 4: a flex column so the buy area's auto top margin drops it to
	   the bottom of the card, the same bottom-anchor the comparison boxes carry. */
	display: flex;
	flex-direction: column;
}
.vru-finder-card-media {
	flex: 0 0 auto;
}
/* The thumbnail and its honest placeholder hold the very same fixed box (sized to
   the machine card standard, 112px), so nothing reflows as the image loads and a
   machine with no picture never shows a broken image. */
.vru-finder-card-img,
.vru-finder-card-noimg {
	width: 112px;
	height: 112px;
	border-radius: 10px;
	object-fit: cover;
	display: block;
	background: var(--vru-f-star-track, #eee);
	border: 1px solid var(--vru-f-border);
}
.vru-finder-card-noimg {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 6px;
	font-size: 0.72rem;
	color: var(--vru-f-muted, #555b62);
}
/* Narrow widths stack the thumbnail beneath the card body (it follows the body in
   the markup), so the why is never pushed down by an image above it. */
@media ( max-width: 640px ) {
	.vru-finder-card { flex-direction: column; }
	.vru-finder-card-media { align-self: flex-start; }
}

.vru-finder-card.is-full {
	border-color: rgba( 26, 127, 55, 0.5 );
}

.vru-finder-card-head {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}

.vru-finder-rank {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--vru-f-blue);
	color: #fff;
	font-weight: 700;
	flex: 0 0 auto;
}

.vru-finder-card-title {
	font-size: 1.2rem;
	margin: 0;
	flex: 1 1 auto;
}

.vru-finder-badge {
	font-size: 0.78rem;
	font-weight: 700;
	padding: 4px 10px;
	border-radius: 999px;
	white-space: nowrap;
}

.vru-finder-badge-full {
	background: rgba( 26, 127, 55, 0.12 );
	color: #146c30; /* darkened for AA contrast on the tint */
}

.vru-finder-badge-close {
	background: rgba( 217, 119, 6, 0.14 );
	color: #8a5308; /* darkened amber for AA contrast (D97706 fails) */
}

.vru-finder-badge-icon { font-weight: 700; }

.vru-finder-gotcha-label {
	display: inline-block;
	font-weight: 700;
	color: #8a5308;
	margin-right: 4px;
}
.vru-finder-gotcha-icon {
	display: inline-block;
	width: 1.1em;
	height: 1.1em;
	line-height: 1.1em;
	text-align: center;
	border-radius: 50%;
	background: var(--vru-f-orange);
	color: #fff;
	font-weight: 700;
	font-size: 0.85em;
}

.vru-finder-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	margin: 12px 0;
	color: var(--vru-f-text);
}

.vru-finder-price {
	font-weight: 700;
	font-size: 1.1rem;
}

.vru-finder-price-unknown,
.vru-finder-life {
	color: var(--vru-f-muted);
	font-size: 0.95rem;
}

.vru-finder-stars {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.vru-finder-stars-track {
	position: relative;
	display: inline-block;
	width: 92px;
	height: 12px;
	border-radius: 999px;
	background: var(--vru-f-star-track);
	overflow: hidden;
}

.vru-finder-stars-fill {
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	background: var(--vru-f-star);
}

.vru-finder-stars-num {
	font-weight: 700;
	font-size: 0.95rem;
}

.vru-finder-stars-none {
	color: var(--vru-f-muted);
	font-size: 0.9rem;
}

.vru-finder-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 8px;
}

.vru-finder-chip {
	background: var(--vru-f-surface);
	border-radius: 999px;
	padding: 3px 10px;
	font-size: 0.82rem;
	color: var(--vru-f-text);
}

.vru-finder-why-label,
.vru-finder-honest-label {
	font-weight: 700;
	font-size: 0.82rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin: 10px 0 4px;
	color: var(--vru-f-muted);
}

.vru-finder-reasons,
.vru-finder-caveats {
	margin: 0;
	padding-left: 0;
	list-style: none;
}

.vru-finder-reason,
.vru-finder-caveat {
	position: relative;
	padding-left: 24px;
	margin: 4px 0;
}

.vru-finder-reason::before {
	content: "";
	position: absolute;
	left: 4px;
	top: 0.5em;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--vru-f-green);
}

.vru-finder-caveat::before {
	content: "";
	position: absolute;
	left: 4px;
	top: 0.5em;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--vru-f-orange);
}

.vru-finder-honest {
	background: var(--vru-f-surface);
	border-radius: 8px;
	padding: 8px 14px 12px;
	margin-top: 10px;
}

/* Round 24 (Josh): the "Starting at" commerce line above the Shop button, the same
   quiet-label/weighted-amount treatment as the comparison. */
.vru-finder-starting { font-size: 0.9rem; line-height: 1.3; margin: 10px 0 0; }
.vru-finder-starting-lbl { color: var(--vru-f-muted); }
.vru-finder-starting-amt { font-weight: 700; color: var(--vru-f-text); }
.vru-finder-starting-amt .amount { color: inherit; }

/* Round 52 Fix 2: the "Not Available from Vacuums R Us" notice, beside the average
   price on a machine we do not sell. Declared colours (the amber the finder uses for
   its honest caveats), so it reads as a plain fact, not an error. */
.vru-finder-unavailable {
	margin: 6px 0 0;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--vru-f-orange);
}
.vru-finder-card-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 14px;
}
/* Round 26 Fix 4: the buy area (the Starting at line and the Shop button) rides
   at the BOTTOM of the card body, the same bottom-anchor the comparison's machine
   boxes carry, so it sits at the foot however tall the reasons above it run. The
   card body is a flex column, so this auto margin pushes the group down; a card
   with no buy area is simply unchanged. */
.vru-finder-buyarea { margin-top: auto; }

.vru-finder-results-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin-top: 24px;
	padding-top: 16px;
	border-top: 1px solid var(--vru-f-border);
}

.vru-finder-share-note {
	color: var(--vru-f-green);
	font-size: 0.9rem;
}

.vru-finder-empty {
	padding: 24px;
	background: var(--vru-f-surface);
	border-radius: 8px;
	text-align: center;
	color: var(--vru-f-muted);
}

/* Round 52 Fix 1: the numbered pager beneath the ranked list. */

.vru-finder-pager {
	margin-top: 24px;
	padding-top: 16px;
	border-top: 1px solid var(--vru-f-border);
}

.vru-finder-pager-status {
	margin: 0 0 10px;
	font-size: 0.9rem;
	color: var(--vru-f-muted);
}

.vru-finder-pager-controls {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.vru-finder-pager-list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* The page number reuses the ghost button's declared base colours; the current
   page is the filled blue, so the page a shopper is on reads at a glance. */
.vru-finder-pager-num.is-current {
	background: var(--vru-f-blue);
	border-color: var(--vru-f-blue);
	color: #fff;
	cursor: default;
}

.vru-finder-pager-num {
	min-width: 40px;
	text-align: center;
}

.vru-finder-pager-gap {
	color: var(--vru-f-muted);
	padding: 0 4px;
}

.vru-finder-btn[disabled] {
	opacity: 0.45;
	cursor: default;
}

/* Product page "back to results" control.
   Round 53 Fix 2: this banner is injected onto product pages by finder-return.js,
   mounted into .single-product .summary, OUTSIDE the .vru-finder element where the
   --vru-f-* tokens are declared. Its surface and control therefore declare LITERAL
   colours (the round 23 out-of-scope rule): an opaque near-white surface (the same
   tint the old translucent fill produced over white, now self-contained), a declared
   slate text, and a declared border, so nothing here relies on a token that collapses
   to transparent outside its scope. */

.vru-finder-return {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	background: #F0F6FB;
	border: 1px solid #e2e8ed;
	color: #4B4F58;
	border-radius: 8px;
	padding: 12px 16px;
	margin: 16px 0;
}

.vru-finder-return-text {
	font-weight: 600;
}

/* Round 53 Fix 2: the "Back to your results" action rides outside the
   .vru-finder token scope (see above), so it declares its blue base as a
   literal rather than var(--vru-f-blue), which collapsed to transparent and
   showed a white label on the near-white banner until hover. White on #0170B9
   clears WCAG AA (5.2:1); hover deepens it; keyboard focus is a visible outline,
   not a hover-only reveal. */
.vru-finder-return .vru-finder-btn-primary {
	background: #0170B9;
	border-color: #0170B9;
	color: #fff;
}
.vru-finder-return .vru-finder-btn-primary:hover {
	background: #015a94;
	border-color: #015a94;
}
.vru-finder-return .vru-finder-btn-primary:focus-visible {
	outline: 2px solid #0A3D62;
	outline-offset: 2px;
}

/* Round 25 Fix 4 (Josh): the shared mobile token rose from 600 to 782px (WordPress
   core's admin breakpoint); the finder's own narrow tweaks move with it. The card
   stacking below keeps its separate 640px breakpoint, which is the card grid's own
   line, not the shared mobile token. */
@media ( max-width: 782px ) {
	.vru-finder-quiz {
		padding: 18px;
	}
	.vru-finder-nav {
		flex-wrap: wrap;
	}
}

/* ------------------------------------------------------ accessibility. */
/* Visible keyboard focus on the option label (the native radio also shows a ring). */
.vru-finder-opt:focus-within {
	border-color: var(--vru-f-blue);
	outline: 2px solid var(--vru-f-blue);
	outline-offset: 2px;
}
.vru-finder-range:focus-visible,
.vru-finder-results-title:focus-visible,
.vru-finder-results-title:focus {
	outline: 2px solid var(--vru-f-blue);
	outline-offset: 3px;
}
/* The is-selected tint is reinforced by the checked radio itself, but add a
   left marker so selection does not read by background colour alone. */
.vru-finder-opt.is-selected { box-shadow: inset 3px 0 0 var(--vru-f-blue); }

@media (prefers-reduced-motion: reduce) {
	.vru-finder-opt,
	.vru-finder-progress-bar,
	.vru-finder-btn { transition: none; }
	.vru-finder-scale-stop-img { transition: none; }
	.vru-finder-scale-stop.is-selected .vru-finder-scale-stop-img { transform: none; }
}