/* ===== Tokens ===== */
:root {
	--bg: #fbfbfd;
	--surface: #ffffff;
	--surface-sunken: #f5f5f7;
	--text: #1d1d1f;
	--text-dim: #6e6e73;
	--text-faint: #86868b;
	--line: rgba(0, 0, 0, 0.11);
	--line-strong: rgba(0, 0, 0, 0.22);
	--accent: #0071e3;
	--accent-text: #ffffff;
	--accent-ring: rgba(0, 113, 227, 0.16);
	--accent-tint: rgba(0, 113, 227, 0.07);
	--danger: #d02e2a;
	--shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 12px 32px rgba(0, 0, 0, 0.05);

	--ease-out: cubic-bezier(0.23, 1, 0.32, 1);
	--radius: 14px;
	--radius-card: 22px;
}

@media (prefers-color-scheme: dark) {
	:root {
		--bg: #000000;
		--surface: #141416;
		--surface-sunken: #1c1c1e;
		--text: #f5f5f7;
		--text-dim: #a1a1a6;
		--text-faint: #86868b;
		--line: rgba(255, 255, 255, 0.13);
		--line-strong: rgba(255, 255, 255, 0.28);
		--accent: #0a84ff;
		--accent-text: #ffffff;
		--accent-ring: rgba(10, 132, 255, 0.26);
		--accent-tint: rgba(10, 132, 255, 0.13);
		--danger: #ff6961;
		--shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 20px 48px rgba(0, 0, 0, 0.45);
	}
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", "Inter",
		"Segoe UI", Roboto, Arial, sans-serif;
	font-size: 17px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* ===== Layout ===== */
.page {
	min-height: 100svh;
	padding: clamp(40px, 9vw, 104px) 16px clamp(48px, 10vw, 112px);
}

.shell {
	width: 100%;
	max-width: 652px;
	margin: 0 auto;
}

/* ===== Hero ===== */
.hero {
	text-align: center;
	margin-bottom: clamp(32px, 5vw, 48px);
}

.eyebrow {
	margin: 0 0 14px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--text-faint);
}

.hero__title {
	margin: 0;
	font-size: clamp(34px, 7vw, 54px);
	line-height: 1.07;
	font-weight: 600;
	letter-spacing: -0.025em;
}

.hero__lede {
	margin: 16px auto 0;
	max-width: 30em;
	font-size: clamp(17px, 2.2vw, 20px);
	line-height: 1.47;
	color: var(--text-dim);
}

/* ===== Card ===== */
.card {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-card);
	box-shadow: var(--shadow);
	padding: clamp(22px, 4.5vw, 38px);
}

/* ===== Fields ===== */
.field {
	margin: 0 0 22px;
	padding: 0;
	border: 0;
	min-width: 0;
}

.grid {
	display: grid;
	gap: 0 18px;
	grid-template-columns: 1fr;
}

@media (min-width: 560px) {
	.grid {
		grid-template-columns: 1fr 1fr;
	}
}

.label {
	display: block;
	padding: 0;
	margin: 0 0 9px;
	font-size: 15px;
	font-weight: 500;
	letter-spacing: -0.01em;
	color: var(--text);
}

.label__hint {
	font-weight: 400;
	color: var(--text-faint);
}

.input {
	-webkit-appearance: none;
	appearance: none;
	display: block;
	width: 100%;
	min-height: 52px;
	padding: 14px 16px;
	font: inherit;
	font-size: 17px;
	color: var(--text);
	background: var(--surface-sunken);
	border: 1px solid transparent;
	border-radius: var(--radius);
	transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.input--area {
	min-height: auto;
	line-height: 1.5;
	resize: vertical;
}

.input::placeholder {
	color: var(--text-faint);
}

.input:hover {
	border-color: var(--line);
}

.input:focus {
	outline: none;
	background: var(--surface);
	border-color: var(--accent);
	box-shadow: 0 0 0 4px var(--accent-ring);
}

.input[aria-invalid="true"] {
	border-color: var(--danger);
}

/* ===== Select ===== */
.select {
	position: relative;
}

.select select {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	min-height: 52px;
	padding: 14px 44px 14px 16px;
	font: inherit;
	font-size: 17px;
	color: var(--text);
	background: var(--surface-sunken);
	border: 1px solid transparent;
	border-radius: var(--radius);
	cursor: pointer;
	transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.select select:invalid {
	color: var(--text-faint);
}

.select select:hover {
	border-color: var(--line);
}

.select select:focus {
	outline: none;
	background: var(--surface);
	border-color: var(--accent);
	box-shadow: 0 0 0 4px var(--accent-ring);
}

.select select[aria-invalid="true"] {
	border-color: var(--danger);
}

.select::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 19px;
	width: 7px;
	height: 7px;
	margin-top: -5px;
	border-right: 1.8px solid var(--text-dim);
	border-bottom: 1.8px solid var(--text-dim);
	transform: rotate(45deg);
	pointer-events: none;
}

.select option {
	color: var(--text);
	background: var(--surface);
}

/* ===== Role pills ===== */
.pills {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
}

.pill {
	position: relative;
}

.pill input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	margin: 0;
	pointer-events: none;
}

.pill__face {
	display: block;
	padding: 11px 18px;
	font-size: 15.5px;
	letter-spacing: -0.01em;
	color: var(--text);
	background: var(--surface-sunken);
	border: 1px solid transparent;
	border-radius: 980px;
	cursor: pointer;
	user-select: none;
	transition: transform 140ms var(--ease-out), background 160ms ease, border-color 160ms ease, color 160ms ease,
		box-shadow 160ms ease;
}

@media (hover: hover) and (pointer: fine) {
	.pill__face:hover {
		border-color: var(--line-strong);
	}
}

.pill__face:active {
	transform: scale(0.97);
}

.pill input:checked+.pill__face {
	color: var(--accent);
	background: var(--accent-tint);
	border-color: var(--accent);
}

.pill input:focus-visible+.pill__face {
	box-shadow: 0 0 0 4px var(--accent-ring);
}

/* ===== Honeypot ===== */
.decoy {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ===== Errors ===== */
.error {
	margin: 0;
	font-size: 13.5px;
	color: var(--danger);
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	transition: max-height 180ms var(--ease-out), opacity 180ms var(--ease-out), margin-top 180ms var(--ease-out);
}

.error[data-shown] {
	max-height: 4.5em;
	margin-top: 7px;
	opacity: 1;
}

.form-error {
	margin: 14px 0 0;
	font-size: 14.5px;
	color: var(--danger);
	opacity: 0;
	transition: opacity 180ms ease;
}

.form-error[data-shown] {
	opacity: 1;
}

/* ===== Actions ===== */
.actions {
	margin-top: 30px;
	padding-top: 26px;
	border-top: 1px solid var(--line);
	text-align: center;
}

.btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	min-height: 54px;
	padding: 15px 30px;
	font: inherit;
	font-size: 17px;
	font-weight: 500;
	letter-spacing: -0.01em;
	color: var(--accent-text);
	background: var(--accent);
	border: 0;
	border-radius: 980px;
	cursor: pointer;
	text-decoration: none;
	transition: transform 140ms var(--ease-out), opacity 160ms ease, filter 160ms ease;
}

@media (min-width: 560px) {
	.btn {
		width: auto;
		min-width: 260px;
	}
}

@media (hover: hover) and (pointer: fine) {
	.btn:hover {
		filter: brightness(1.08);
	}
}

.btn:active {
	transform: scale(0.97);
}

.btn:focus-visible {
	outline: none;
	box-shadow: 0 0 0 4px var(--accent-ring);
}

.btn[data-busy],
.btn:disabled {
	cursor: default;
	pointer-events: none;
}

.btn[data-busy] {
	opacity: 0.72;
}

.btn__label {
	transition: opacity 160ms ease, filter 160ms ease;
}

.btn[data-busy] .btn__label {
	opacity: 0.6;
	filter: blur(2px);
}

.btn__spinner {
	position: absolute;
	right: 22px;
	width: 17px;
	height: 17px;
	border: 2px solid rgba(255, 255, 255, 0.35);
	border-top-color: #fff;
	border-radius: 50%;
	opacity: 0;
	transition: opacity 160ms ease;
}

.btn[data-busy] .btn__spinner {
	opacity: 1;
	animation: spin 620ms linear infinite;
}

.btn--quiet {
	width: auto;
	min-width: 0;
	min-height: 46px;
	padding: 12px 24px;
	font-size: 16px;
	color: var(--accent);
	background: var(--accent-tint);
}

@keyframes spin {
	to {
		transform: rotate(360deg);
	}
}

.footnote {
	margin: 16px auto 0;
	max-width: 34em;
	font-size: 13px;
	line-height: 1.45;
	color: var(--text-faint);
}

/* ===== Result ===== */
.result {
	text-align: center;
}

.result__mark {
	color: var(--accent);
	width: 52px;
	height: 52px;
	margin: 6px auto 20px;
}

.result__mark svg {
	width: 100%;
	height: 100%;
	display: block;
}

.result__title {
	margin: 0;
	font-size: clamp(25px, 4.5vw, 32px);
	font-weight: 600;
	letter-spacing: -0.02em;
}

.result__text {
	margin: 12px auto 26px;
	max-width: 26em;
	color: var(--text-dim);
}

/* ===== Footer ===== */
.foot {
	display: flex;
	justify-content: center;
	gap: 10px;
	margin-top: 28px;
	font-size: 13.5px;
	color: var(--text-faint);
}

.foot a {
	color: inherit;
	text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
	.foot a:hover {
		color: var(--text-dim);
	}
}

/* ===== Entrance ===== */
.reveal {
	opacity: 0;
	transform: translateY(10px);
	animation: rise 520ms var(--ease-out) forwards;
}

/* Staggered, not inline-styled — the CSP forbids style attributes. */
.card.reveal {
	animation-delay: 70ms;
}

.foot.reveal {
	animation-delay: 140ms;
}

.result.reveal {
	animation-delay: 0ms;
}

@keyframes rise {
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.reveal {
		opacity: 1;
		transform: none;
		animation: none;
	}

	.pill__face:active,
	.btn:active {
		transform: none;
	}

	.btn[data-busy] .btn__spinner {
		animation-duration: 1.4s;
	}

	.error,
	.btn,
	.btn__label {
		transition-duration: 0ms;
	}
}