/*
 * The quiz landing page at /testas/.
 *
 * Three bands: the hero, the dark questionnaire panel (WPS-065) and the
 * honesty-scale section. The panel was not here until WPS-065 - page-testas.php's
 * docblock has the reasoning, its own and the one it replaced - and the mockup's
 * closing guide link is still not transferred, because the page it points at is
 * undecided.
 *
 * THE SHARED 1100 px GRID, not a narrower band. Unlike duk.css this page has
 * no .duk-band-style override: the mockup itself caps both sections at
 * 1100 px, matching .container's own default, so nothing here needs to touch
 * it.
 *
 * THE TABLET CENTRING WAS MEASURED, NOT COPIED. Read at 800px: an auto-fit
 * grid put two tiers on the first row and stretched the third across the
 * whole second row, the exact defect the front page's own three-card rows
 * were fixed for on 2026-08-17. That fix is not reusable as a rule, only as a
 * pattern - its breakpoints are arithmetic specific to a 260px card - so this
 * grid's own numbers were worked out from ITS card's 250px floor and 14px
 * gap rather than carried over:
 *
 *   559px is where auto-fit itself would first turn two 250px cards plus the
 *   gap into two real columns on its own: at the gutter's un-clamped
 *   clamp(16px, 4vw, 32px), the two-column need (2 * 250 + 14 = 514px of
 *   content) is first met at viewport * 0.92 = 514, i.e. viewport = 558.7px.
 *   The flex override's own breakpoint is set to the next whole pixel rather
 *   than a rounder number chosen without checking: a rounder number a few
 *   pixels later would leave a narrow band where auto-fit has already gone
 *   to two columns on its own but left the odd third tier un-centred - the
 *   same stranded-card defect this whole rule exists to prevent, just
 *   narrower. Below 559px there are three cards in one column, which is the
 *   width auto-fit was already choosing correctly and this rule leaves alone.
 *
 *   842px is where three actually fit: 3 * 250 + 2 * 14 + 2 * 32 (the
 *   gutters at their clamped ceiling) = 842. Below that a grid stretches the
 *   odd tier the same way it did at 800px; from it, three columns are real
 *   columns rather than a coincidence.
 *
 * Confirmed empirically, not only computed, at 558 (still one column),
 * 559 / 700 / 800 / 841 (two-then-centred) and 842 / 900 / 1440 (three even
 * columns) - including the boundary itself, not just the middle of each
 * band.
 */

/* ---------------------------------------------------------------------------
 * Hero
 */

.ts-hero {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	padding-block: clamp( 28px, 5vw, 60px ) clamp( 24px, 3.5vw, 40px );
	text-align: center;
}

.ts-hero__title {
	max-width: 680px;
	margin: 0;
	font-size: clamp( 30px, 5vw, 46px );
}

.ts-hero__lead {
	max-width: 600px;
	margin: 0;
	color: var( --text-body );
	font-size: clamp( 16px, 2vw, 19px );
}

/* ---------------------------------------------------------------------------
 * Honesty scale
 *
 * Three tiers, deliberately equal in weight - page-testas.php's docblock has
 * the persona reasoning. The icon backgrounds and their ink colours are
 * tokens.css's --tint-leaf/--tint-ice/--tint-amber and their paired inks; the
 * "calm" and "routine" tiers reuse existing accents, and "urgent" is the one
 * WPS-019 added (see tokens.css for the measured contrast).
 */

/* ---------------------------------------------------------------------------
 * The questionnaire panel (WPS-065)
 *
 * The mockup's dark band. It borrows its shape from .kn-why rather than
 * inventing a second dark panel: same --surface-inverse, same --radius-2xl,
 * same clamped padding, same rgba(255,255,255,.7) for secondary copy on it.
 * The mockup draws a 32px radius here and 28px on the other one; matching the
 * panel this theme already ships is worth more than four pixels, and a third
 * radius value has no token to come from.
 *
 * ONE STEP IS VISIBLE AT A TIME and the rest are `hidden`, so the panel's
 * height follows whichever question is on screen. Nothing here animates that:
 * a height transition on a box whose content changes size is the kind of
 * effect that reads as a glitch on a slow phone.
 */

.ts-quiz-band {
	padding-block-end: clamp( 32px, 5vw, 52px );
}

.ts-quiz {
	display: flex;
	flex-direction: column;
	background: var( --surface-inverse );
	border-radius: var( --radius-2xl );
	padding: clamp( 24px, 4vw, 44px );
}

.ts-quiz__intro,
.ts-quiz__step,
.ts-quiz__result {
	display: flex;
	flex-direction: column;
	gap: var( --space-3 );
}

/* A fieldset brings its own border, padding and margin; none of it is wanted. */
.ts-quiz__step {
	margin: 0;
	padding: 0;
	border: 0;
}

.ts-quiz__step[hidden],
.ts-quiz__result[hidden],
.ts-quiz__intro[hidden] {
	display: none;
}

.ts-quiz__badge,
.ts-quiz__counter {
	display: block;
	margin: 0;
	font-size: var( --fs-eyebrow );
	font-weight: var( --fw-bold );
	letter-spacing: var( --ls-eyebrow );
	text-transform: uppercase;
	color: var( --color-surface );
}

/*
 * The legend carries both the counter and the question, so it needs the gap
 * the flex column would otherwise have given them - a rendered legend is not a
 * flex item of its own fieldset, so the parent's `gap` never reaches it.
 */
.ts-quiz__legend {
	margin: 0 0 var( --space-3 );
	padding: 0;
}

.ts-quiz__legend .ts-quiz__question {
	margin-top: var( --space-2 );
}

.ts-quiz__meta {
	margin: 0;
	font-size: var( --fs-meta );
	letter-spacing: var( --ls-label );
	text-transform: uppercase;
	color: rgba( 255, 255, 255, 0.55 );
}

.ts-quiz__title,
.ts-quiz__question {
	display: block;
	margin: 0;
	padding: 0;
	font-size: clamp( 22px, 3.2vw, 30px );
	font-weight: var( --fw-black );
	line-height: var( --lh-heading );
	color: var( --color-surface );
	text-wrap: pretty;
}

.ts-quiz__lead {
	margin: 0;
	font-size: 15.5px;
	line-height: 1.65;
	color: rgba( 255, 255, 255, 0.7 );
}

/*
 * The intro's own button sits on a dark panel, so it is the light one: the
 * black --action-primary would disappear into the panel behind it.
 */
.ts-quiz__start {
	align-self: flex-start;
	margin-top: var( --space-2 );
	background: var( --color-surface );
	border-color: transparent;
	color: var( --color-ink );
}

.ts-quiz__start:hover {
	background: var( --tint-ice );
	border-color: transparent;
	color: var( --color-ink );
}

.ts-quiz__privacy {
	display: flex;
	align-items: center;
	gap: var( --space-2 );
	margin: 0;
	font-size: var( --fs-meta );
	color: rgba( 255, 255, 255, 0.55 );
}

.ts-quiz__privacy .material-symbols-outlined {
	flex-shrink: 0;
	font-size: 16px;
}

.ts-quiz__answers {
	display: flex;
	flex-direction: column;
	gap: var( --space-2 );
	margin-top: var( --space-1 );
}

/*
 * The answers are real radios, hidden with the standard clip technique and
 * drawn as rows - the same construction .dk-chip uses on the voucher page, and
 * for the same reason: a label wrapping a real input keeps the keyboard and
 * the screen reader working without a line of script.
 *
 * 44px minimum, against the mockup's measured 41px. Invariant I8.2's floor
 * applies to a control a finger has to hit, and three of these stacked on a
 * phone is exactly that case; the 11px/14px padding the mockup specifies is
 * kept and the floor does the rest.
 */
.ts-quiz__answer {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 44px;
	padding: 11px 14px;
	border-radius: var( --radius-sm );
	background: rgba( 255, 255, 255, 0.06 );
	color: var( --color-surface );
	font-size: var( --fs-caption );
	line-height: var( --lh-body );
	cursor: pointer;
}

.ts-quiz__answer:hover {
	background: rgba( 255, 255, 255, 0.12 );
}

.ts-quiz__answer input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect( 0, 0, 0, 0 );
	white-space: nowrap;
	border: 0;
}

/*
 * The mockup's selected fill, --color-accent at 18%. It is written out rather
 * than tokenised: the palette has no translucent accent, and one panel's
 * selected state is not enough to earn a token in the design system.
 */
.ts-quiz__answer:has( input:checked ) {
	background: rgba( 0, 149, 229, 0.18 );
	font-weight: var( --fw-bold );
}

.ts-quiz__answer:has( input:focus-visible ) {
	outline: 3px solid var( --focus-ring );
	outline-offset: 2px;
}

.ts-quiz__back,
.ts-quiz__restart {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var( --space-2 );
	align-self: flex-start;
	min-height: 44px;
	padding: 10px 4px;
	background: none;
	border: 0;
	color: rgba( 255, 255, 255, 0.7 );
	font-family: inherit;
	font-size: var( --fs-caption );
	font-weight: 600;
	cursor: pointer;
}

.ts-quiz__back:hover,
.ts-quiz__restart:hover {
	color: var( --color-surface );
}

.ts-quiz__back .material-symbols-outlined,
.ts-quiz__restart .material-symbols-outlined {
	font-size: 18px;
}

.ts-quiz__result-title {
	margin: 0;
	font-size: clamp( 22px, 3.2vw, 30px );
	font-weight: var( --fw-black );
	line-height: var( --lh-heading );
	color: var( --color-surface );
}

.ts-quiz__result-text {
	margin: 0;
	font-size: 15.5px;
	line-height: 1.65;
	color: rgba( 255, 255, 255, 0.7 );
}

/*
 * The result names a tier; it does not diagnose one. The line saying so is
 * quieter than the outcome above it but not hidden - AGENTS.md's rule about
 * health claims cuts both ways, and a recommendation a visitor might act on
 * has to say what it is not.
 */
.ts-quiz__disclaimer {
	margin: 0;
	font-size: var( --fs-meta );
	line-height: var( --lh-body );
	color: rgba( 255, 255, 255, 0.55 );
}

.ts-quiz__result-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var( --space-3 );
	margin-top: var( --space-2 );
}

.ts-quiz__result-actions .btn--primary {
	background: var( --color-surface );
	border-color: transparent;
	color: var( --color-ink );
}

.ts-quiz__result-actions .btn--primary:hover {
	background: var( --tint-ice );
	border-color: transparent;
	color: var( --color-ink );
}

.ts-scale {
	padding-block-end: clamp( 40px, 6vw, 64px );
}

.ts-scale__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	max-width: 560px;
	margin: 0 auto clamp( 18px, 3vw, 28px );
	text-align: center;
}

.ts-scale__title {
	margin: 0;
}

.ts-scale__lead {
	margin: 0;
	color: var( --text-body );
	font-size: var( --fs-body );
}

.ts-scale__grid {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( min( 100%, 250px ), 1fr ) );
	gap: 14px;
}

@media ( min-width: 559px ) {

	.ts-scale__grid {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}

	.ts-scale__grid > * {
		flex: 0 0 calc( 50% - 7px );
		min-width: 0;
	}
}

@media ( min-width: 842px ) {

	.ts-scale__grid {
		display: grid;
		grid-template-columns: repeat( auto-fit, minmax( min( 100%, 250px ), 1fr ) );
	}

	.ts-scale__grid > * {
		flex: initial;
	}
}

.ts-tier {
	display: flex;
	flex-direction: column;
	gap: 9px;
	padding: 22px;
	border: 1px solid var( --color-border );
	border-radius: var( --radius-lg );
	background: var( --color-surface );
}

.ts-tier__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: var( --radius-sm );
}

.ts-tier__icon .material-symbols-outlined {
	font-family: var( --font-icon );
	font-size: 22px;
}

.ts-tier__icon--calm {
	background: var( --tint-leaf );
}

.ts-tier__icon--calm .material-symbols-outlined {
	color: var( --color-green-ink );
}

.ts-tier__icon--routine {
	background: var( --tint-ice );
}

.ts-tier__icon--routine .material-symbols-outlined {
	color: var( --color-accent-text );
}

.ts-tier__icon--urgent {
	background: var( --tint-amber );
}

.ts-tier__icon--urgent .material-symbols-outlined {
	color: var( --color-amber-ink );
}

.ts-tier__title {
	margin: 0;
	color: var( --text-heading );
	font-size: 16.5px;
	font-weight: var( --fw-black );
}

.ts-tier__text {
	margin: 0;
	color: var( --text-meta );
	font-size: var( --fs-caption );
	line-height: var( --lh-relaxed );
}

/* The calm-visit guide pointer under the scale (Storybook, 2026-09-27). */
.ts-scale__calm {
	margin: 18px 0 0;
	color: var( --text-body );
	font-size: var( --fs-sm );
	line-height: var( --lh-body );
	text-align: center;
}

.ts-scale__calm a {
	display: inline-block;
	padding: 10px 0;
	margin: -10px 0;
	color: var( --text-link );
	font-weight: var( --fw-bold );
	text-decoration: none;
}

.ts-scale__calm a:hover {
	text-decoration: underline;
}