/*
 * The stepper, laid out as two panes inside the white card.
 *
 * A persistent rail on the left names every step and marks where you are; the pane on the
 * right carries one question at a time. That is what the card's width is for: a single centred
 * column in 1226px would be a lot of white around very little, and the rail turns "step 2 of 5"
 * from a number into something you can actually see the shape of.
 *
 * Default state, before any JavaScript, is every step stacked and usable with a single submit at
 * the end. .is-enhanced is what collapses it to one step at a time.
 */

.survey {
	display: grid;
	grid-template-columns: var(--rail-width) minmax(0, 1fr);
	min-height: inherit;
}

/* -- The rail ----------------------------------------------------------- */

.rail {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	padding: var(--space-6) var(--space-5);
	background-color: var(--color-bg-rail);
}

.rail__label {
	color: var(--color-text-muted);
}

.rail__steps {
	display: flex;
	flex-direction: column;
	gap: var(--space-15);
	margin: 0;
	counter-reset: rail;
}

.rail__step {
	display: flex;
	align-items: baseline;
	gap: var(--space-15);
	margin: 0;
	color: var(--color-text-muted);
	font-size: var(--font-3);
	line-height: var(--leading-snug);
	transition: color var(--duration) var(--ease);
}

/* The number is generated, so the markup carries no hardcoded ordinals to fall out of step with
   the definition in inc/forms.php. */
.rail__step::before {
	counter-increment: rail;
	content: counter(rail, decimal-leading-zero);
	flex: none;
	min-width: 1.6em;
	font-size: var(--font-2);
	font-variant-numeric: tabular-nums;
	letter-spacing: var(--tracking-label);
	opacity: 0.65;
}

.rail__step.is-current {
	color: var(--color-heading);
	font-weight: var(--weight-heading);
}

.rail__step.is-current::before {
	opacity: 1;
}

.rail__step.is-done {
	color: var(--color-accent);
}

/* The tick replaces the number once a step is behind you, so the rail reads as progress rather
   than as a table of contents. */
.rail__step.is-done::before {
	content: '\2713';
	letter-spacing: 0;
	opacity: 1;
}

.rail__foot {
	margin-block-start: auto;
	color: var(--color-text-muted);
	font-size: var(--font-2);
}

/* -- The pane ----------------------------------------------------------- */

.survey__pane {
	display: flex;
	flex-direction: column;
	padding: var(--space-6);
}

.survey__meta {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	margin-block-end: var(--space-4);
}

/* The rail carries the time note at this width; below 60rem the rail goes and the meta takes it. */
.survey__time {
	display: none;
	margin: 0;
}

/*
 * margin: 0 matters more than it looks. base.css gives every p a 24px bottom margin, and this one
 * never cleared it, so the meta row was 24px taller than its content and the bar sat below the
 * step note's centre rather than on it. That was the misalignment, not the flex rule.
 */
.survey__count {
	flex: none;
	margin: 0;
	color: var(--color-text-muted);
	font-size: var(--font-2);
	font-weight: var(--weight-medium);
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
	font-variant-numeric: tabular-nums;
}

.progress {
	flex: 1;
	height: var(--progress-height);
	background-color: rgb(var(--bnk-green-rgb) / 0.12);
	border-radius: var(--radius-pill);
	overflow: hidden;
}

.progress__fill {
	display: block;
	width: 14%;
	height: 100%;
	background-color: var(--color-accent);
	border-radius: var(--radius-pill);
	transition: width var(--duration-slow) var(--ease-out);
}

/* Only meaningful once the form is a stepper. */
.survey:not(.is-enhanced) .survey__meta,
.survey:not(.is-enhanced) [data-survey-next],
.survey:not(.is-enhanced) [data-survey-back] {
	display: none;
}

/* Without the script the rail is a summary of what is coming, not a position indicator. */
.survey:not(.is-enhanced) .rail__step.is-current {
	color: var(--color-text-muted);
	font-weight: var(--weight-regular);
}

/* -- Steps -------------------------------------------------------------- */

.step + .step {
	margin-block-start: var(--space-6);
	padding-block-start: var(--space-6);
	border-block-start: var(--border-hairline) solid var(--color-border);
}

.survey.is-enhanced .step {
	display: none;
	margin-block-start: 0;
	padding-block-start: 0;
	border-block-start: 0;
}

.survey.is-enhanced .step.is-current {
	display: flex;
	flex-direction: column;
	flex: 1;
	animation: bnk-step-in var(--duration-slow) var(--ease-out) both;
}

@keyframes bnk-step-in {
	from {
		opacity: 0;
		transform: translateY(8px);
	}
}

.step__head {
	margin-block-end: var(--space-3);
}

/*
 * The question. A legend is not a heading element, so its face, size and colour are set here.
 * display:block and width:100% because a legend otherwise shrink-wraps and will not take
 * text-wrap: balance.
 */
.step__question {
	display: block;
	float: none;
	width: 100%;
	margin: 0;
	padding: 0;
	color: var(--color-heading);
	font-size: var(--font-7);
	font-weight: var(--weight-heading);
	line-height: var(--leading-snug);
	letter-spacing: var(--tracking-display);
	text-wrap: balance;
}

.step__sub {
	margin-block-start: var(--space-05);
	margin-block-end: 0;
	color: var(--color-text-muted);
	font-size: var(--font-3);
}

.step__body {
	flex: 1;
}

/* -- Navigation --------------------------------------------------------- */

.step__nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	margin-block-start: var(--space-5);
}

/* Back sits on the left as a quiet link, the primary action on the right. On the last step there
   is no Next, so the submit takes the same slot. */
.step__nav [data-survey-back] {
	order: 0;
}

.step__nav__end {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	margin-inline-start: auto;
}

.survey__consent {
	max-width: 34ch;
	margin: 0;
	color: var(--color-text-muted);
	font-size: var(--font-2);
	line-height: var(--leading-snug);
	text-align: end;
}

/* -- Messages ----------------------------------------------------------- */

.survey__notice {
	margin-block-end: var(--space-3);
	padding: var(--space-15) var(--space-2);
	background-color: rgb(var(--bnk-green-rgb) / 0.07);
	border-inline-start: var(--border-selected) solid var(--color-accent);
	border-radius: var(--radius-sm);
	font-size: var(--font-3);
}

/*
 * The honeypot. Off screen rather than display:none, because a bot that ignores hidden fields also
 * ignores display:none ones, and this one needs to look fillable.
 */
.survey__decoy {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.survey.is-sending {
	opacity: 0.6;
	pointer-events: none;
}

/* -- Narrow ------------------------------------------------------------- */

/*
 * Below 60rem the rail stops being a column and becomes a header strip: the numbered list would
 * eat half a phone screen before the question, so only the current step's name survives.
 */
@media (max-width: 60rem) {
	.survey {
		grid-template-columns: minmax(0, 1fr);
	}

	/*
	 * The rail goes entirely. With its numbered list already hidden it was a banded strip holding
	 * a decorative "The survey" label and the time note, about 90px of chrome above the first
	 * question on a phone, and the two labels sat at different heights because one is a tracked
	 * cap-height label and the other is body text. The time note is worth keeping, so the meta
	 * below takes it and the label goes: the card is plainly the survey without being told.
	 */
	.rail {
		display: none;
	}

	/*
	 * Two rows rather than one. The step note and the time note share the top line, and the bar
	 * takes the full width underneath, aligned to the note it belongs to. Side by side, the bar
	 * had only about half the card to work with and read as floating beside the label rather than
	 * measuring it.
	 */
	.survey__meta {
		display: grid;
		grid-template-columns: auto auto;
		justify-content: space-between;
		align-items: baseline;
		gap: var(--space-15) var(--space-2);
		margin-block-end: var(--space-4);
	}

	.survey__time {
		display: block;
		color: var(--color-text-muted);
		font-size: var(--font-2);
	}

	.progress {
		grid-column: 1 / -1;
	}

	.survey__pane {
		padding: var(--space-4);
	}

	/*
	 * Back goes below the primary action rather than above it. Stacked, whatever sits at the top of
	 * this block reads as the thing to press, and that should never be the one that goes backwards.
	 */
	.step__nav {
		flex-wrap: wrap;
		gap: var(--space-2);
		margin-block-start: var(--space-3);
	}

	.step__nav__end {
		order: -1;
		flex-direction: column;
		align-items: stretch;
		gap: var(--space-15);
		width: 100%;
	}

	/* margin-inline, not align-self: the nav is a row, so align-self moves it vertically. And the
	   row's justify-content is space-between, which would otherwise pin it to the left edge. */
	.step__nav [data-survey-back] {
		order: 1;
		margin-inline: auto;
	}

	/* The 44px tap target stays; it is the gaps around it that were loose, not the control. */
	.survey__consent {
		max-width: none;
		text-align: center;
	}
}

@media (max-width: 30rem) {
	.survey__pane {
		padding: var(--space-3);
	}
}