/*
 * The confirmation, filling the whole card once the survey is answered. The rail goes with the
 * form it was tracking, so this is a single centred column with room around it.
 */

.done {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	min-height: inherit;
	padding: var(--space-8) var(--space-4);
	text-align: center;
}

.done:focus {
	outline: none;   /* focus is moved here programmatically, so a ring would be noise */
}

.done__mark {
	display: grid;
	place-items: center;
	width: var(--space-8);
	height: var(--space-8);
	background-color: var(--color-accent);
	border-radius: var(--radius-pill);
	color: var(--color-on-accent);
	animation: bnk-mark-in var(--duration-slow) var(--ease-out) both;
}

@keyframes bnk-mark-in {
	from {
		opacity: 0;
		transform: scale(0.7);
	}
}

.done__icon {
	width: var(--icon-lg);
	height: var(--icon-lg);
}

.done__heading {
	font-size: var(--font-8);
}

.done__body {
	max-width: 40ch;
	color: var(--color-text-muted);
}

.done__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-15);
	margin: 0;
	margin-block-start: var(--space-2);
}

.done__actions li {
	display: flex;
	margin: 0;
}