/**
 * PWP intake quiz — mobile-first styles.
 *
 * All colors/spacing/type come from var(--pwp-*) design tokens
 * (tokens/dist/variables.css) with graceful fallbacks so the quiz
 * remains usable before the token build runs.
 *
 * @package PWP
 */

/* Single owner of the quiz frame: the theme's .pwp-quiz-root only adds the
 * page-level top gap. Small-viewport-height units keep the frame honest
 * inside the Instagram in-app browser chrome. */
.pwp-quiz {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	font-family: var(--pwp-typography-family-body, ui-sans-serif, system-ui, -apple-system, sans-serif);
	margin: 0 auto;
	max-width: 34rem;
	min-height: 60vh;
	min-height: 60svh;
	padding: var(--pwp-spacing-md, 1rem);
}

.pwp-quiz *,
.pwp-quiz *::before,
.pwp-quiz *::after {
	box-sizing: inherit;
}

/* Visually hidden, screen-reader available. */
.pwp-quiz__sr-only {
	border: 0;
	clip: rect(0, 0, 0, 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

/* Progress region (appears after step 1): count, bar, encouragement. */
.pwp-quiz__progress-wrap {
	margin-bottom: var(--pwp-spacing-lg, 1.5rem);
}

.pwp-quiz__progress {
	background: var(--pwp-color-neutral-200, #eae1d3);
	border-radius: var(--pwp-radius-pill, 9999px);
	height: 0.5rem;
	overflow: hidden;
	width: 100%;
}

/* The fill animates transform (compositor-only), never width/layout.
 * Gentle ease-out settle instead of a linear glide. */
.pwp-quiz__progress-fill {
	background: var(--pwp-color-brand-primary, #2e4636);
	border-radius: inherit;
	height: 100%;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
	width: 100%;
}

/* Milestone pulse (B5): one calm 400ms brightness/scaleY beat on the bar
 * when a new part opens. Rides the track (not the fill) so the beat is not
 * swallowed by the track's overflow clip. Plays once on mount. */
.pwp-quiz__progress--pulse {
	animation: pwp-quiz-bar-pulse 400ms ease-out;
}

@keyframes pwp-quiz-bar-pulse {
	0% {
		filter: brightness(1);
		transform: scaleY(1);
	}

	45% {
		filter: brightness(1.2);
		transform: scaleY(1.5);
	}

	100% {
		filter: brightness(1);
		transform: scaleY(1);
	}
}

/* Quiet momentum note under the bar at ~50% / ~80%. */
.pwp-quiz__progress-boost {
	color: var(--pwp-color-brand-primary, #2e4636);
	font-size: var(--pwp-typography-scale-sm, 0.875rem);
	font-weight: 600;
	margin: 0.375rem 0 0;
}

/* Screen. */
.pwp-quiz__screen {
	animation: pwp-quiz-screen-in 220ms ease-out;
	display: flex;
	flex-direction: column;
	gap: var(--pwp-spacing-md, 1rem);
}

/* Forward advance slides subtly in from the right (with the fade). */
@keyframes pwp-quiz-screen-in {
	from {
		opacity: 0;
		transform: translateX(0.625rem);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

/* Back navigation (B9): the same entrance, mirrored — the screen slides
 * in from the left so direction reads without any exit animation. Only
 * animation-name changes; duration/easing come from the base rule. */
.pwp-quiz__screen--back {
	animation-name: pwp-quiz-screen-in-back;
}

@keyframes pwp-quiz-screen-in-back {
	from {
		opacity: 0;
		transform: translateX(-0.625rem);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

/* Staggered option entrance: rows rise 8px into place one after another.
 * The JS sets per-row animation-delay and only ever adds this class on
 * reward-eligible screens with motion allowed; 'backwards' keeps delayed
 * rows invisible until their turn. */
.pwp-quiz__stagger {
	animation: pwp-quiz-option-in 200ms ease-out backwards;
}

@keyframes pwp-quiz-option-in {
	from {
		opacity: 0;
		transform: translateY(0.5rem);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

/* Interstitial body settles in a beat after the title. */
.pwp-quiz__body--interstitial {
	animation: pwp-quiz-fade-up 200ms ease-out 80ms backwards;
}

@keyframes pwp-quiz-fade-up {
	from {
		opacity: 0;
		transform: translateY(0.25rem);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

.pwp-quiz__title {
	color: var(--pwp-color-neutral-900, #211c16);
	font-family: var(--pwp-typography-family-display, inherit);
	font-size: var(--pwp-typography-scale-2xl, 1.75rem);
	line-height: var(--pwp-typography-lineHeight-tight, 1.2);
	margin: 0;
	outline: none;
	overflow-wrap: anywhere;
}

.pwp-quiz__body {
	color: var(--pwp-color-neutral-700, #4e453a);
	font-size: var(--pwp-typography-scale-base, 1rem);
	line-height: var(--pwp-typography-lineHeight-base, 1.6);
	margin: 0;
	overflow-wrap: anywhere;
}

.pwp-quiz__microcopy {
	color: var(--pwp-color-neutral-600, #675d4e);
	font-size: var(--pwp-typography-scale-sm, 0.875rem);
	line-height: var(--pwp-typography-lineHeight-base, 1.6);
	margin: 0;
	overflow-wrap: anywhere;
}

.pwp-quiz__microcopy--privacy {
	background: var(--pwp-color-surface-card, #fff);
	border-left: 3px solid var(--pwp-color-brand-primary, #2e4636);
	border-radius: var(--pwp-radius-sm, 0.375rem);
	padding: var(--pwp-spacing-sm, 0.75rem);
}

.pwp-quiz__error {
	background: var(--pwp-color-semantic-danger-soft, #f7e5e0);
	border-radius: var(--pwp-radius-sm, 0.375rem);
	color: var(--pwp-color-semantic-danger, #a63a2e);
	font-size: var(--pwp-typography-scale-sm, 0.875rem);
	overflow-wrap: anywhere;
	padding: var(--pwp-spacing-sm, 0.75rem);
}

/* Inline field error: updates in place so the typed value survives;
 * empty when there is nothing to say. */
.pwp-quiz__inline-error {
	color: var(--pwp-color-semantic-danger, #a63a2e);
	font-size: var(--pwp-typography-scale-sm, 0.875rem);
	margin: 0;
	overflow-wrap: anywhere;
}

.pwp-quiz__inline-error:empty {
	display: none;
}

/* Section kicker above the question count (B3): "Part 2 of 4 · Your health".
 * Same calm register as the plan-card kicker. */
.pwp-quiz__progress-kicker {
	color: var(--pwp-color-brand-primary, #2e4636);
	font-size: var(--pwp-typography-scale-sm, 0.875rem);
	font-weight: 600;
	letter-spacing: 0.04em;
	margin: 0 0 0.125rem;
	text-transform: uppercase;
}

/* Visible step counter above the progress bar. */
.pwp-quiz__progress-count {
	color: var(--pwp-color-text-muted, #675d4e);
	font-size: var(--pwp-typography-scale-sm, 0.875rem);
	margin: 0 0 0.375rem;
}

/* Informational banner: resume welcome-back, account hints. Dismissible. */
.pwp-quiz__notice {
	align-items: flex-start;
	background: var(--pwp-color-surface, #f4eee4);
	border-radius: var(--pwp-radius-sm, 0.375rem);
	color: var(--pwp-color-brand-primary, #2e4636);
	display: flex;
	flex-direction: column;
	font-size: var(--pwp-typography-scale-sm, 0.875rem);
	gap: 0.25rem;
	padding: var(--pwp-spacing-sm, 0.75rem);
}

.pwp-quiz__notice-text {
	margin: 0;
	overflow-wrap: anywhere;
}

.pwp-quiz__notice-dismiss {
	background: none;
	border: 0;
	color: var(--pwp-color-brand-primary, #2e4636);
	cursor: pointer;
	font-family: inherit;
	font-size: var(--pwp-typography-scale-sm, 0.875rem);
	font-weight: 600;
	min-height: 2.75rem;
	padding: 0.375rem 0;
	text-decoration: underline;
}

/* Buttons: big tap targets everywhere. */
.pwp-quiz__btn {
	appearance: none;
	border: 1px solid transparent;
	border-radius: var(--pwp-radius-pill, 9999px);
	cursor: pointer;
	font-family: inherit;
	font-size: var(--pwp-typography-scale-base, 1rem);
	font-weight: 600;
	min-height: 3.5rem;
	padding: var(--pwp-spacing-sm, 0.75rem) var(--pwp-spacing-lg, 1.5rem);
	touch-action: manipulation;
	transition: transform 120ms ease;
	-webkit-tap-highlight-color: transparent;
	width: 100%;
}

/* Subtle press feedback so every tap feels acknowledged. */
.pwp-quiz__btn:active {
	transform: scale(0.985);
}

.pwp-quiz__btn:focus-visible {
	outline: 3px solid var(--pwp-color-brand-primary, #2e4636);
	outline-offset: 2px;
}

.pwp-quiz__btn--primary {
	background: var(--pwp-color-brand-primary, #2e4636);
	color: var(--pwp-color-neutral-50, #faf7f2);
}

.pwp-quiz__btn--primary:hover {
	background: var(--pwp-color-brand-primary-strong, #22362a);
}

.pwp-quiz__btn--ghost {
	background: transparent;
	border-color: var(--pwp-color-neutral-300, #d8ccba);
	color: var(--pwp-color-neutral-700, #4e453a);
}

.pwp-quiz__btn--option {
	background: var(--pwp-color-surface-card, #fff);
	border-color: var(--pwp-color-neutral-500, #8a7e6c);
	color: var(--pwp-color-neutral-900, #211c16);
	text-align: left;
}

.pwp-quiz__btn--option:hover {
	border-color: var(--pwp-color-brand-primary, #2e4636);
}

/* Selected state for confirm-required (hard-stop) options. Declared after
 * the base/option rules so its border-color actually wins the cascade. */
.pwp-quiz__btn--selected {
	border-color: var(--pwp-color-brand-primary, #2e4636);
	box-shadow: inset 0 0 0 2px var(--pwp-color-brand-primary, #2e4636);
}

/* Selection-confirm beat on auto-advance choices (B1): brand fill + a small
 * check glyph for the ~180ms before the screen moves. Reward-only — the JS
 * eligibility guard keeps this class off safety/crisis screens. */
.pwp-quiz__btn--option.pwp-quiz__btn--confirm {
	background: var(--pwp-color-brand-primary, #2e4636);
	border-color: var(--pwp-color-brand-primary, #2e4636);
	color: var(--pwp-color-neutral-50, #faf7f2);
	position: relative;
	transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}

/* The confirm check draws itself: a JS-appended SVG stroke animating
 * dashoffset over the beat. Appended only on the reward-eligible,
 * motion-allowed path, so it never appears on safety screens. */
.pwp-quiz__confirm-check {
	position: absolute;
	right: var(--pwp-spacing-lg, 1.5rem);
	top: 50%;
	transform: translateY(-50%);
}

.pwp-quiz__confirm-check svg {
	display: block;
	height: 1.25rem;
	width: 1.25rem;
}

.pwp-quiz__confirm-path {
	animation: pwp-quiz-check-draw 180ms ease-out forwards;
	stroke-dasharray: 21;
	stroke-dashoffset: 21;
}

@keyframes pwp-quiz-check-draw {
	to {
		stroke-dashoffset: 0;
	}
}

/* Decorated option rows (sex, goal): a 40px sage circle carries a
 * thin-stroke glyph left of the label. Decorative only (aria-hidden). */
.pwp-quiz__btn--option.pwp-quiz__btn--iconed {
	align-items: center;
	display: flex;
	gap: var(--pwp-spacing-sm, 0.75rem);
}

.pwp-quiz__option-icon {
	align-items: center;
	background: var(--pwp-color-neutral-200, #eae1d3);
	border-radius: 50%;
	color: var(--pwp-color-brand-primary, #2e4636);
	display: flex;
	flex-shrink: 0;
	height: 2.5rem;
	justify-content: center;
	transition: background-color 150ms ease, color 150ms ease;
	width: 2.5rem;
}

.pwp-quiz__option-icon svg {
	display: block;
	height: 1.5rem;
	width: 1.5rem;
}

/* On selection the circle fills brand green and the glyph goes white
 * (against the confirm beat's brand pill the circle simply merges in). */
.pwp-quiz__btn--selected .pwp-quiz__option-icon,
.pwp-quiz__btn--confirm .pwp-quiz__option-icon {
	background: var(--pwp-color-brand-primary, #2e4636);
	color: var(--pwp-color-neutral-50, #faf7f2);
}

/* One tiny scale pop with the beat — never past 1.06 (calm register). */
.pwp-quiz__btn--option.pwp-quiz__btn--confirm .pwp-quiz__option-icon {
	animation: pwp-quiz-icon-pop 180ms ease-out;
}

@keyframes pwp-quiz-icon-pop {
	0% {
		transform: scale(1);
	}

	50% {
		transform: scale(1.06);
	}

	100% {
		transform: scale(1);
	}
}

/* Back control: quiet ghost, bottom-left after the primary action. The
 * margin gap keeps a hurried Continue tap from ever landing on Back.
 * Declared after the base rule so width:auto beats width:100%. */
.pwp-quiz__btn--back {
	align-self: flex-start;
	margin-top: var(--pwp-spacing-sm, 0.75rem);
	min-height: 3rem;
	padding: 0.625rem var(--pwp-spacing-lg, 1.5rem);
	width: auto;
}

.pwp-quiz__options {
	border: 0;
	display: flex;
	flex-direction: column;
	gap: var(--pwp-spacing-sm, 0.75rem);
	margin: 0;
	padding: 0;
}

/* Inputs. */
.pwp-quiz__label {
	color: var(--pwp-color-neutral-900, #211c16);
	font-size: var(--pwp-typography-scale-base, 1rem);
	font-weight: 600;
}

/* White field on the warm page surface, ≥3:1 border, and a 16px floor so
 * iOS never zooms the page on focus. */
.pwp-quiz__input {
	background: var(--pwp-color-surface-card, #fff);
	border: 1px solid var(--pwp-color-neutral-500, #8a7e6c);
	border-radius: var(--pwp-radius-md, 0.75rem);
	color: var(--pwp-color-neutral-900, #211c16);
	font-family: inherit;
	font-size: max(var(--pwp-typography-scale-base, 1rem), 16px);
	min-height: 3.25rem;
	padding: var(--pwp-spacing-sm, 0.75rem);
	width: 100%;
}

.pwp-quiz__input:focus-visible {
	border-color: var(--pwp-color-brand-primary, #2e4636);
	outline: 2px solid var(--pwp-color-brand-primary, #2e4636);
	outline-offset: 1px;
}

.pwp-quiz__input--area {
	min-height: 7rem;
	resize: vertical;
}

/* ID photo picker: the native input stays for keyboards/screen readers
 * (visually hidden); the label renders as the one big obvious action. */
.pwp-quiz__file-btn {
	align-items: center;
	border-style: dashed;
	display: flex;
	justify-content: center;
	text-align: center;
}

.pwp-quiz__file-input:focus-visible + .pwp-quiz__file-btn {
	outline: 3px solid var(--pwp-color-brand-primary, #2e4636);
	outline-offset: 2px;
}

/* Chosen-photo confirmation: thumbnail + file name. */
.pwp-quiz__file-preview {
	align-items: center;
	display: flex;
	gap: var(--pwp-spacing-sm, 0.75rem);
}

.pwp-quiz__file-preview[hidden] {
	display: none;
}

.pwp-quiz__file-thumb {
	border: 1px solid var(--pwp-color-neutral-300, #d8ccba);
	border-radius: var(--pwp-radius-sm, 0.375rem);
	height: 3.5rem;
	object-fit: cover;
	width: 3.5rem;
}

.pwp-quiz__file-status:empty {
	display: none;
}

.pwp-quiz__btn--waiting {
	cursor: wait;
}

/* Typed-input form: field, inline message, Continue in one stack. */
.pwp-quiz__form {
	display: flex;
	flex-direction: column;
	gap: var(--pwp-spacing-sm, 0.75rem);
}

/* Composite fields (height ft/in, birth date MM DD YYYY). */
.pwp-quiz__composite {
	display: flex;
	gap: var(--pwp-spacing-sm, 0.75rem);
}

.pwp-quiz__composite-part {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	gap: 0.25rem;
}

.pwp-quiz__composite-label {
	color: var(--pwp-color-text-muted, #675d4e);
	font-size: var(--pwp-typography-scale-sm, 0.875rem);
	font-weight: 600;
}

/* Height pill selector: tap-only feet/inches radiogroups, no keyboard.
 * Every pill is a ≥44px target; the rows wrap naturally at 320px. */
.pwp-quiz__height-block {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
}

.pwp-quiz__pillgroup {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.pwp-quiz__pill {
	appearance: none;
	background: var(--pwp-color-surface-card, #fff);
	border: 1px solid var(--pwp-color-neutral-500, #8a7e6c);
	border-radius: var(--pwp-radius-pill, 9999px);
	color: var(--pwp-color-neutral-900, #211c16);
	cursor: pointer;
	font-family: inherit;
	font-size: var(--pwp-typography-scale-base, 1rem);
	font-weight: 600;
	min-height: 2.75rem;
	min-width: 3.25rem;
	padding: 0.375rem 0.75rem;
	touch-action: manipulation;
	transition: transform 120ms ease;
	-webkit-tap-highlight-color: transparent;
}

.pwp-quiz__pill:active {
	transform: scale(0.985);
}

.pwp-quiz__pill:focus-visible {
	outline: 3px solid var(--pwp-color-brand-primary, #2e4636);
	outline-offset: 2px;
}

.pwp-quiz__pill--selected {
	background: var(--pwp-color-brand-primary, #2e4636);
	border-color: var(--pwp-color-brand-primary, #2e4636);
	color: var(--pwp-color-neutral-50, #faf7f2);
}

/* The completing pill pops once with the confirm beat (reward path only —
 * the JS skips this class on safety surfaces and under reduced motion). */
.pwp-quiz__pill--confirm {
	animation: pwp-quiz-icon-pop 180ms ease-out;
}

/* Inches wait quietly until feet is picked: lower-key border, still
 * ≥4.5:1 text (no washed-out opacity blends). */
.pwp-quiz__height-block--waiting .pwp-quiz__pill {
	border-color: var(--pwp-color-neutral-300, #d8ccba);
	color: var(--pwp-color-neutral-600, #675d4e);
}

/* Single input with a fixed unit suffix (weight in lbs). */
.pwp-quiz__input-unit {
	align-items: center;
	display: flex;
	gap: var(--pwp-spacing-sm, 0.75rem);
}

.pwp-quiz__input-unit .pwp-quiz__input {
	flex: 1;
	min-width: 0;
}

.pwp-quiz__unit {
	color: var(--pwp-color-text-muted, #675d4e);
	font-weight: 600;
}

/* Gentle informational tone for restored-answer notes (not an error). */
.pwp-quiz__inline-error--gentle {
	color: var(--pwp-color-text-muted, #675d4e);
}

/* Checkboxes: the whole row is the label — every pixel toggles (A15). */
.pwp-quiz__check-row {
	align-items: flex-start;
	background: var(--pwp-color-surface-card, #fff);
	border: 1px solid var(--pwp-color-neutral-500, #8a7e6c);
	border-radius: var(--pwp-radius-md, 0.75rem);
	cursor: pointer;
	display: flex;
	gap: var(--pwp-spacing-sm, 0.75rem);
	padding: var(--pwp-spacing-sm, 0.75rem);
	-webkit-tap-highlight-color: transparent;
}

.pwp-quiz__check-row input[type="checkbox"] {
	accent-color: var(--pwp-color-brand-primary, #2e4636);
	flex-shrink: 0;
	height: 1.5rem;
	margin-top: 0.125rem;
	width: 1.5rem;
}

/* Selected card state, mirrored via a class (no :has() dependency). */
.pwp-quiz__check-row--checked {
	background: var(--pwp-color-brand-primary-soft, #e9ede2);
	border-color: var(--pwp-color-brand-primary, #2e4636);
}

.pwp-quiz__check-label {
	color: var(--pwp-color-neutral-900, #211c16);
	font-size: var(--pwp-typography-scale-base, 1rem);
	line-height: var(--pwp-typography-lineHeight-base, 1.6);
}

.pwp-quiz__check-row--consent {
	background: var(--pwp-color-surface-card, #fff);
}

/* Links / notify form. Inline links keep a ≥44px tap target via padding. */
.pwp-quiz__link {
	color: var(--pwp-color-brand-primary, #2e4636);
	display: inline-block;
	font-weight: 600;
	padding: 0.625rem 0;
	text-decoration: underline;
}

.pwp-quiz__notify {
	display: flex;
	flex-direction: column;
	gap: var(--pwp-spacing-sm, 0.75rem);
}

/* Full-contrast waiting text (no washed-out opacity blend). */
.pwp-quiz__busy {
	color: var(--pwp-color-neutral-700, #4e453a);
}

/* Submit payoff staging (B2): calm message beat + subtle indeterminate
 * shimmer while the real submit runs in parallel. */
.pwp-quiz__staging {
	display: flex;
	flex-direction: column;
	gap: var(--pwp-spacing-sm, 0.75rem);
	padding: var(--pwp-spacing-md, 1rem) 0;
}

.pwp-quiz__staging-msg {
	color: var(--pwp-color-neutral-700, #4e453a);
	font-weight: 600;
}

.pwp-quiz__staging-indicator {
	background: var(--pwp-color-neutral-200, #eae1d3);
	border-radius: var(--pwp-radius-pill, 9999px);
	height: 0.25rem;
	overflow: hidden;
	position: relative;
	width: 100%;
}

.pwp-quiz__staging-indicator::after {
	animation: pwp-quiz-indeterminate 1.4s ease-in-out infinite;
	background: var(--pwp-color-brand-primary, #2e4636);
	border-radius: inherit;
	content: "";
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	transform: translateX(-100%);
	width: 40%;
}

@keyframes pwp-quiz-indeterminate {
	to {
		transform: translateX(350%);
	}
}

/* While staging, the fill glides the last stretch to 100% (B2). */
.pwp-quiz__progress-fill--complete {
	transition: transform 2200ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Availability heads-up on the state step: informational only, never a block.
 * A calm brand-accented card, distinct from the red error style. */
.pwp-quiz__state-notice {
	background: var(--pwp-color-surface-card, #fff);
	border: 1px solid var(--pwp-color-neutral-300, #d8ccba);
	border-left: 3px solid var(--pwp-color-brand-primary, #2e4636);
	border-radius: var(--pwp-radius-sm, 0.375rem);
	display: flex;
	flex-direction: column;
	gap: var(--pwp-spacing-sm, 0.75rem);
	padding: var(--pwp-spacing-sm, 0.75rem);
}

/* display:flex above would defeat the [hidden] attribute; re-hide explicitly. */
.pwp-quiz__state-notice[hidden] {
	display: none;
}

/* Acute red-flag crisis card: prominent and urgent, distinct from the calm
 * state notice. Uses the danger-soft surface with a strong left rule. */
.pwp-quiz__crisis {
	background: var(--pwp-color-semantic-danger-soft, #f7e5e0);
	border: 1px solid var(--pwp-color-semantic-danger, #a63a2e);
	border-left: 4px solid var(--pwp-color-semantic-danger, #a63a2e);
	border-radius: var(--pwp-radius-sm, 0.375rem);
	display: flex;
	flex-direction: column;
	gap: var(--pwp-spacing-sm, 0.75rem);
	padding: var(--pwp-spacing-md, 1rem);
}

/* display:flex above would defeat the [hidden] attribute; re-hide explicitly. */
.pwp-quiz__crisis[hidden] {
	display: none;
}

.pwp-quiz__crisis-title {
	color: var(--pwp-color-semantic-danger, #a63a2e);
	font-size: var(--pwp-typography-scale-md, 1rem);
	font-weight: 700;
	margin: 0;
}

.pwp-quiz__crisis-call {
	text-align: center;
	text-decoration: none;
}

/* Quiet "Need help?" disclosure at the foot of each question screen. */
.pwp-quiz__help {
	border-top: 1px solid var(--pwp-color-neutral-200, #eae1d3);
	margin-top: var(--pwp-spacing-md, 1rem);
	padding-top: var(--pwp-spacing-sm, 0.75rem);
}

.pwp-quiz__help > summary {
	align-items: center;
	color: var(--pwp-color-text-muted, #675d4e);
	cursor: pointer;
	display: flex;
	font-size: var(--pwp-typography-scale-sm, 0.875rem);
	font-weight: 600;
	list-style: none;
	min-height: 2.75rem;
}

.pwp-quiz__help > summary::-webkit-details-marker {
	display: none;
}

.pwp-quiz__help > summary:focus-visible {
	outline: 2px solid var(--pwp-color-brand-primary, #2e4636);
	outline-offset: 2px;
}

.pwp-quiz__help[open] > summary {
	margin-bottom: var(--pwp-spacing-sm, 0.75rem);
}

.pwp-quiz__help > *:not(summary) {
	margin-bottom: var(--pwp-spacing-sm, 0.75rem);
}

/* Read-only answer recap above the consent row (A17). */
.pwp-quiz__summary {
	border: 1px solid var(--pwp-color-neutral-200, #eae1d3);
	border-radius: var(--pwp-radius-md, 0.75rem);
	display: flex;
	flex-direction: column;
}

.pwp-quiz__summary-row {
	align-items: center;
	border-bottom: 1px solid var(--pwp-color-neutral-200, #eae1d3);
	display: flex;
	gap: var(--pwp-spacing-sm, 0.75rem);
	justify-content: space-between;
	padding: var(--pwp-spacing-sm, 0.75rem);
}

.pwp-quiz__summary-row:last-child {
	border-bottom: 0;
}

.pwp-quiz__summary-text {
	min-width: 0;
}

.pwp-quiz__summary-q {
	color: var(--pwp-color-text-muted, #675d4e);
	font-size: var(--pwp-typography-scale-sm, 0.875rem);
	margin: 0;
}

.pwp-quiz__summary-a {
	color: var(--pwp-color-neutral-900, #211c16);
	font-weight: 600;
	margin: 0;
	overflow-wrap: anywhere;
}

/* Small Edit affordance per row; still a comfortable tap target. */
.pwp-quiz__summary-edit {
	flex-shrink: 0;
	min-height: 2.75rem;
	padding: 0.375rem 0.875rem;
	width: auto;
}

/* Inline consent reader: expandable, never navigates away. */
.pwp-quiz__consent-toggle {
	background: none;
	border: 0;
	cursor: pointer;
	font-family: inherit;
	font-size: var(--pwp-typography-scale-base, 1rem);
	min-height: 2.75rem;
	padding: 0.375rem 0;
	text-align: left;
}

.pwp-quiz__consent-panel[hidden] {
	display: none;
}

.pwp-quiz__consent-frame {
	background: var(--pwp-color-surface-card, #fff);
	border: 1px solid var(--pwp-color-neutral-300, #d8ccba);
	border-radius: var(--pwp-radius-sm, 0.375rem);
	height: 20rem;
	width: 100%;
}

/* Plan reveal card (completion screen): the goal-matched program with its
 * standard monthly price and, when present, the highlighted first-month
 * price. Calm and premium, not a sales banner. */
.pwp-quiz__plan-card {
	background: var(--pwp-color-surface-card, #fff);
	border: 1px solid var(--pwp-color-neutral-300, #d8ccba);
	border-radius: var(--pwp-radius-md, 0.75rem);
	display: flex;
	flex-direction: column;
	gap: var(--pwp-spacing-sm, 0.75rem);
	padding: var(--pwp-spacing-md, 1rem);
}

.pwp-quiz__plan-kicker {
	color: var(--pwp-color-text-muted, #675d4e);
	font-size: var(--pwp-typography-scale-sm, 0.875rem);
	font-weight: 600;
	letter-spacing: 0.04em;
	margin: 0;
	text-transform: uppercase;
}

.pwp-quiz__plan-name {
	color: var(--pwp-color-neutral-900, #211c16);
	font-family: var(--pwp-typography-family-display, inherit);
	font-size: var(--pwp-typography-scale-lg, 1.125rem);
	line-height: var(--pwp-typography-lineHeight-tight, 1.2);
	margin: 0;
}

/* Highlighted first-month price (renders only when the payload carries it). */
.pwp-quiz__plan-intro {
	color: var(--pwp-color-brand-primary, #2e4636);
	font-size: var(--pwp-typography-scale-xl, 1.25rem);
	font-weight: 700;
	margin: 0;
}

.pwp-quiz__plan-price {
	color: var(--pwp-color-neutral-700, #4e453a);
	font-weight: 600;
	margin: 0;
}

.pwp-quiz__plan-included {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.pwp-quiz__plan-included li {
	padding-left: 1.375rem;
	position: relative;
}

.pwp-quiz__plan-included li::before {
	color: var(--pwp-color-brand-primary, #2e4636);
	content: "\2713";
	left: 0;
	position: absolute;
}

/* Program-class reveal (GLP-1 umbrella): the goal maps to a class of
 * programs, so the card lists each priced option as its own quiet row.
 * Static presentation only, no motion. */
.pwp-quiz__class-options {
	display: flex;
	flex-direction: column;
	list-style: none;
	margin: 0;
	padding: 0;
}

.pwp-quiz__class-option {
	border-top: 1px solid var(--pwp-color-neutral-300, #d8ccba);
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	padding: var(--pwp-spacing-sm, 0.75rem) 0;
}

.pwp-quiz__class-option:last-child {
	padding-bottom: 0;
}

.pwp-quiz__class-option-name {
	color: var(--pwp-color-neutral-900, #211c16);
	font-weight: 600;
	margin: 0;
}

/* Inside a class-option row the highlighted first-month price sits inline
 * in the price line, so it keeps the brand color and weight but drops to
 * the row's type size. */
.pwp-quiz__class-option .pwp-quiz__plan-intro {
	font-size: var(--pwp-typography-scale-md, 1rem);
}

/* Goal-echo sub under the completion heading: the plan is built around the
 * visitor's goal. Never an eligibility affirmation. */
.pwp-quiz__goal-echo {
	color: var(--pwp-color-text-muted, #675d4e);
	margin: 0;
}

/* Journey timeline on the completion screen (health-momentum pass): four
 * static moments that future-pace the arc, today through ongoing monthly
 * care. Sage dots on a soft connecting thread; calm, not celebratory.
 * Items rise in one after another; the JS sets per-item delays and skips
 * them under reduced motion, and the opt-out at the end of this file
 * stills the animation itself. */
.pwp-quiz__journey {
	display: flex;
	flex-direction: column;
	gap: var(--pwp-spacing-sm, 0.75rem);
	list-style: none;
	margin: 0;
	padding: 0;
}

.pwp-quiz__journey-item {
	animation: pwp-quiz-option-in 200ms ease-out backwards;
	color: var(--pwp-color-neutral-700, #4e453a);
	line-height: var(--pwp-typography-lineHeight-base, 1.6);
	padding-left: 1.375rem;
	position: relative;
}

/* The moment dot. */
.pwp-quiz__journey-item::before {
	background: var(--pwp-color-brand-primary, #2e4636);
	border-radius: 50%;
	content: "";
	height: 0.5rem;
	left: 0;
	position: absolute;
	top: 0.55rem;
	width: 0.5rem;
}

/* The thread connecting one moment to the next (none after the last). */
.pwp-quiz__journey-item:not(:last-child)::after {
	background: var(--pwp-color-neutral-300, #d8ccba);
	bottom: -0.875rem;
	content: "";
	left: calc(0.25rem - 0.5px);
	position: absolute;
	top: 1.1875rem;
	width: 1px;
}

.pwp-quiz__journey-when {
	color: var(--pwp-color-neutral-900, #211c16);
	font-weight: 600;
}

/* Program price list: the completion screen's fallback when no single
 * program matches the visitor's goal. Calm card, not a sales banner. */
.pwp-quiz__pricing {
	margin-top: var(--pwp-spacing-md, 1rem);
	padding: var(--pwp-spacing-md, 1rem);
	border: 1px solid var(--pwp-color-border, #d8ccba);
	border-radius: var(--pwp-radius-md, 0.75rem);
	background: var(--pwp-color-surface, #f4eee4);
	text-align: left;
}

.pwp-quiz__pricing-title {
	margin: 0 0 var(--pwp-spacing-sm, 0.75rem);
	font-size: var(--pwp-typography-scale-md, 1rem);
	font-weight: 600;
}

.pwp-quiz__pricing-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Comfortable rows: each pricing line is a ≥44px target. */
.pwp-quiz__pricing-item {
	padding: 0.625rem 0;
	border-bottom: 1px solid var(--pwp-color-border, #d8ccba);
	font-size: var(--pwp-typography-scale-sm, 0.875rem);
}

.pwp-quiz__pricing-link,
.pwp-quiz__pricing-row {
	display: flex;
	justify-content: space-between;
	gap: var(--pwp-spacing-sm, 0.75rem);
	color: inherit;
	text-decoration: none;
}

.pwp-quiz__pricing-link .pwp-quiz__pricing-name {
	text-decoration: underline;
	text-underline-offset: 2px;
}

.pwp-quiz__pricing-item:last-child {
	border-bottom: 0;
}

.pwp-quiz__pricing-amount {
	white-space: nowrap;
	font-weight: 600;
}

.pwp-quiz__pricing-today {
	margin: var(--pwp-spacing-sm, 0.75rem) 0 0;
	font-size: var(--pwp-typography-scale-sm, 0.875rem);
	font-weight: 600;
}

/* Desktop: the quiz becomes a calm card on the page surface; it stays a
 * single 34rem column. */
@media (min-width: 48rem) {
	.pwp-quiz {
		background: var(--pwp-color-surface-card, #fff);
		border-radius: var(--pwp-radius-lg, 1.25rem);
		box-shadow: var(--pwp-shadow-sm, 0 1px 2px rgba(33, 28, 22, 0.05), 0 1px 3px rgba(33, 28, 22, 0.07));
		padding: var(--pwp-spacing-xl, 2rem);
	}

	/* Welcome step only: the short intro left ~240px of dead space at the foot
	 * of the min-height card. Center it vertically so the card reads composed.
	 * Question screens keep the default top anchor (body.pwp-quiz-started, set by
	 * quiz.js), so the min-height still stops step-to-step jump. */
	body:not(.pwp-quiz-started) .pwp-quiz {
		justify-content: center;
	}
}

/* Reward-layer reduced-motion opt-outs. This block sits LAST so it wins the
 * cascade over the reward rules above; text staging stays (content, not
 * motion), everything animated goes still. */
@media (prefers-reduced-motion: reduce) {
	.pwp-quiz__staging-indicator {
		display: none;
	}

	.pwp-quiz__progress-fill--complete {
		transition: none;
	}

	.pwp-quiz__progress--pulse {
		animation: none;
	}

	.pwp-quiz__screen--back {
		animation: none;
	}
}

/* Reduced-motion neutralization lives at the END of the file on purpose:
 * these overrides share specificity with the base rules above, so source
 * order is what makes them win the cascade. Add new motion opt-outs HERE,
 * never above the base rules they neutralize. */
@media (prefers-reduced-motion: reduce) {
	.pwp-quiz__progress-fill {
		transition: none;
	}

	.pwp-quiz__screen {
		animation: none;
	}

	.pwp-quiz__btn {
		transition: none;
	}

	.pwp-quiz__btn:active {
		transform: none;
	}

	/* Reward-layer opt-outs: the confirm beat swaps color instantly (the JS
	 * also skips its advance delay under reduced motion). */
	.pwp-quiz__btn--option.pwp-quiz__btn--confirm {
		transition: none;
	}

	/* Icon circles swap color instantly; the pop and the check draw never
	 * play (the JS confirm path is skipped entirely under reduced motion —
	 * these rules are the belt to that suspender). */
	.pwp-quiz__option-icon {
		transition: none;
	}

	.pwp-quiz__btn--option.pwp-quiz__btn--confirm .pwp-quiz__option-icon {
		animation: none;
	}

	.pwp-quiz__confirm-path {
		animation: none;
		stroke-dashoffset: 0;
	}

	.pwp-quiz__pill {
		transition: none;
	}

	.pwp-quiz__pill:active {
		transform: none;
	}

	.pwp-quiz__pill--confirm {
		animation: none;
	}

	/* Entrance choreography goes still (the JS also never adds these
	 * classes under reduced motion). */
	.pwp-quiz__stagger {
		animation: none;
	}

	.pwp-quiz__body--interstitial {
		animation: none;
	}

	/* Confirmation journey items appear in place, no rise (the JS also
	 * skips their stagger delays under reduced motion). */
	.pwp-quiz__journey-item {
		animation: none;
	}
}