/**
 * The assessment experience.
 *
 * One question at a time, with the page chrome stripped back so nothing
 * competes with the decision being made.
 *
 * Answers are selected, then confirmed. A single click that both chooses and
 * commits would make a mis-click permanently cost points, since a question
 * cannot be answered twice — and that is infuriating in a scored assessment.
 */

.d360-assess {
	max-width: 46rem;
	margin-inline: auto;
	padding-block: var(--d360-sp-12) var(--d360-sp-24);
}

/* -- Progress ------------------------------------------------------------ */

.d360-assess__progress {
	position: sticky;
	top: 4.5rem;
	z-index: 10;
	padding-block: var(--d360-sp-4);
	background: linear-gradient(var(--d360-paper) 70%, transparent);
}

.d360-assess__meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--d360-sp-4);
	margin-bottom: var(--d360-sp-2);
	font-size: var(--d360-fs-100);
	color: var(--d360-ink-3);
}

.d360-assess__count {
	font-family: var(--d360-font-mono);
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.02em;
}

.d360-assess__rail {
	height: 4px;
	border-radius: var(--d360-radius-pill);
	background: var(--d360-hairline);
	overflow: hidden;
}

.d360-assess__rail-fill {
	height: 100%;
	width: 0;
	border-radius: inherit;
	background: linear-gradient(90deg, var(--d360-ring-from), var(--d360-ring-to));
	transition: width 420ms var(--d360-ease);
}

/* -- Question ------------------------------------------------------------ */

.d360-q { margin-top: var(--d360-sp-8); }

/* Each question replaces the last; the shift forward reinforces progress. */
.d360-q.is-entering { animation: d360-q-in 300ms var(--d360-ease) both; }

@keyframes d360-q-in {
	from { opacity: 0; transform: translateX(14px); }
	to { opacity: 1; transform: none; }
}

.d360-q__prompt {
	margin: 0 0 var(--d360-sp-6);
	font-size: var(--d360-fs-600);
	font-weight: 620;
	line-height: 1.25;
	letter-spacing: -0.02em;
	text-wrap: balance;
}

/* -- Scenario data ------------------------------------------------------- */

.d360-q__scenario {
	margin-bottom: var(--d360-sp-6);
	padding: var(--d360-sp-4);
	border: 1px solid var(--d360-hairline);
	border-radius: var(--d360-radius-card);
	background: var(--d360-surface);
	overflow-x: auto;
}

.d360-q__scenario table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--d360-fs-200);
}

.d360-q__scenario th {
	padding: var(--d360-sp-2) var(--d360-sp-3);
	border-bottom: 1px solid var(--d360-border);
	color: var(--d360-ink-3);
	font-size: var(--d360-fs-100);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-align: left;
}

.d360-q__scenario td {
	padding: var(--d360-sp-2) var(--d360-sp-3);
	border-bottom: 1px solid var(--d360-hairline);
}

.d360-q__scenario tr:last-child td { border-bottom: 0; }

/* Numbers are the thing being compared, so they get the mono treatment. */
.d360-q__scenario td + td {
	font-family: var(--d360-font-mono);
	font-variant-numeric: tabular-nums;
	text-align: right;
}

/* -- Options ------------------------------------------------------------- */

.d360-q__options {
	display: grid;
	gap: var(--d360-sp-3);
	margin: 0 0 var(--d360-sp-6);
	padding: 0;
	border: 0;
}

.d360-opt { position: relative; display: block; }

/* The input stays in the DOM for keyboard and screen readers; the label is the
   visible control. Arrow keys move between options without committing. */
.d360-opt__input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.d360-opt__body {
	display: flex;
	align-items: flex-start;
	gap: var(--d360-sp-3);
	padding: var(--d360-sp-4);
	border: 1px solid var(--d360-border);
	border-radius: var(--d360-radius-card);
	background: var(--d360-surface);
	cursor: pointer;
	transition: border-color var(--d360-dur) var(--d360-ease),
		box-shadow var(--d360-dur) var(--d360-ease),
		transform var(--d360-dur) var(--d360-ease);
}

.d360-opt__body:hover {
	border-color: var(--d360-ink-3);
	transform: translateY(-1px);
	box-shadow: var(--d360-shadow-card);
}

.d360-opt__input:focus-visible + .d360-opt__body {
	outline: 2px solid var(--d360-action);
	outline-offset: 2px;
}

.d360-opt__key {
	flex: none;
	display: grid;
	place-items: center;
	width: 1.75rem;
	height: 1.75rem;
	border: 1px solid var(--d360-border);
	border-radius: 50%;
	background: var(--d360-paper);
	font-family: var(--d360-font-mono);
	font-size: var(--d360-fs-100);
	font-weight: 600;
	color: var(--d360-ink-3);
	transition: background-color var(--d360-dur) var(--d360-ease),
		border-color var(--d360-dur) var(--d360-ease),
		color var(--d360-dur) var(--d360-ease);
}

.d360-opt__text { padding-top: 2px; }

/* Selected, not yet confirmed. */
.d360-opt__input:checked + .d360-opt__body {
	border-color: var(--d360-action);
	box-shadow: inset 0 0 0 1px var(--d360-action);
}

.d360-opt__input:checked + .d360-opt__body .d360-opt__key {
	background: var(--d360-action);
	border-color: var(--d360-action);
	color: #fff;
}

/* -- Revealed state ------------------------------------------------------ */

.d360-q.is-revealed .d360-opt__body { cursor: default; transform: none; box-shadow: none; }
.d360-q.is-revealed .d360-opt__body:hover { border-color: var(--d360-border); }

/* Options that were neither chosen nor correct recede rather than vanish —
   the alternatives are part of what the explanation is about. */
.d360-q.is-revealed .d360-opt:not(.is-correct):not(.is-chosen) .d360-opt__body { opacity: 0.55; }

.d360-q.is-revealed .d360-opt.is-correct .d360-opt__body {
	border-color: var(--d360-success);
	box-shadow: inset 0 0 0 1px var(--d360-success);
	background: var(--d360-success-tint);
}

.d360-q.is-revealed .d360-opt.is-correct .d360-opt__key {
	background: var(--d360-success);
	border-color: var(--d360-success);
	color: #fff;
}

.d360-q.is-revealed .d360-opt.is-chosen:not(.is-correct) .d360-opt__body {
	border-color: var(--d360-danger);
	box-shadow: inset 0 0 0 1px var(--d360-danger);
	background: var(--d360-danger-tint);
}

.d360-q.is-revealed .d360-opt.is-chosen:not(.is-correct) .d360-opt__key {
	background: var(--d360-danger);
	border-color: var(--d360-danger);
	color: #fff;
}

/* -- Explanation --------------------------------------------------------- */

.d360-q__result {
	margin-bottom: var(--d360-sp-6);
	animation: d360-reveal 320ms var(--d360-ease) both;
}

@keyframes d360-reveal {
	from { opacity: 0; transform: translateY(-6px); }
	to { opacity: 1; transform: none; }
}

.d360-q__verdict {
	display: inline-flex;
	align-items: center;
	gap: var(--d360-sp-2);
	margin-bottom: var(--d360-sp-3);
	font-size: var(--d360-fs-200);
	font-weight: 640;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.d360-q__verdict--right { color: var(--d360-success); }
.d360-q__verdict--wrong { color: var(--d360-danger); }

.d360-q__explanation {
	padding: var(--d360-sp-6);
	border: 1px solid var(--d360-hairline);
	border-left: 3px solid var(--d360-action);
	border-radius: var(--d360-radius-card);
	background: var(--d360-surface);
}

.d360-q__explanation p { margin: 0 0 var(--d360-sp-3); }
.d360-q__explanation p:last-child { margin-bottom: 0; }

.d360-q__feedback {
	margin: 0 0 var(--d360-sp-3);
	padding-bottom: var(--d360-sp-3);
	border-bottom: 1px solid var(--d360-hairline);
	font-weight: 560;
}

/* -- Actions ------------------------------------------------------------- */

.d360-q__actions { display: flex; align-items: center; gap: var(--d360-sp-4); }

.d360-q__hint {
	font-size: var(--d360-fs-100);
	color: var(--d360-ink-3);
}

@media (max-width: 30rem) {
	.d360-q__actions { flex-direction: column; align-items: stretch; }
	.d360-q__hint { text-align: center; }
}

/* -- Intro and result ---------------------------------------------------- */

.d360-assess__intro { text-align: center; padding-block: var(--d360-sp-8); }
.d360-assess__intro h1 { margin-bottom: var(--d360-sp-4); }

.d360-assess__lede {
	max-width: 34rem;
	margin: 0 auto var(--d360-sp-6);
	font-size: var(--d360-fs-400);
	color: var(--d360-ink-2);
}

.d360-assess__facts {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--d360-sp-2) var(--d360-sp-4);
	margin-bottom: var(--d360-sp-8);
	font-family: var(--d360-font-mono);
	font-size: var(--d360-fs-100);
	color: var(--d360-ink-3);
}

.d360-assess__chips {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--d360-sp-3);
	margin-bottom: var(--d360-sp-8);
}

/* The header is sticky, so a scrolled-to result would sit underneath it. */
.d360-result {
	text-align: center;
	scroll-margin-top: 7rem;
}
.d360-result__head { display: grid; justify-items: center; gap: var(--d360-sp-3); margin-bottom: var(--d360-sp-8); }

.d360-result__bars {
	display: grid;
	gap: var(--d360-sp-4);
	margin-bottom: var(--d360-sp-8);
	text-align: start;
}

.d360-result__split {
	display: grid;
	gap: var(--d360-sp-4);
	margin-bottom: var(--d360-sp-8);
	text-align: start;
}

@media (min-width: 40rem) {
	.d360-result__split { grid-template-columns: 1fr 1fr; }
}

.d360-result__panel {
	padding: var(--d360-sp-4);
	border: 1px solid var(--d360-hairline);
	border-radius: var(--d360-radius-card);
	background: var(--d360-surface);
}

.d360-result__panel h3 {
	margin-bottom: var(--d360-sp-2);
	font-size: var(--d360-fs-100);
	font-weight: 640;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--d360-ink-3);
}

.d360-result__panel p { margin: 0; font-size: var(--d360-fs-500); font-weight: 600; }

.d360-assess__error {
	padding: var(--d360-sp-4);
	border-radius: var(--d360-radius-card);
	background: var(--d360-danger-tint);
	color: var(--d360-danger);
}

.is-hidden { display: none !important; }