/*
 * Survey choices: pills and icon tiles, on the white card.
 *
 * The input is a real radio or checkbox, visually hidden, and the label is the tappable control.
 * Every state below is driven by :checked or :disabled on that input, so selection needs no
 * JavaScript and no ARIA, and the form still works with the script absent.
 */

.choice-set {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-15);
	margin: 0;
	margin-block-start: var(--space-3);
}

.choice {
	display: flex;
	margin: 0;
}

.choice__label {
	display: flex;
	align-items: center;
	gap: var(--space-1);
	position: relative;
	width: 100%;
	min-height: var(--tap-min);
	padding: var(--space-15) var(--space-3) var(--space-15) var(--space-2);
	background-color: var(--color-bg-quiet);
	border: var(--border-control) solid transparent;
	border-radius: var(--radius-pill);
	color: var(--color-text);
	font-size: var(--font-3);
	font-weight: var(--weight-medium);
	line-height: var(--leading-snug);
	cursor: pointer;
	transition:
		background-color var(--duration) var(--ease),
		border-color var(--duration) var(--ease),
		color var(--duration) var(--ease),
		transform var(--duration) var(--ease);
}

@media (hover: hover) {
	.choice__input:not(:checked):not(:disabled) + .choice__label:hover {
		background-color: var(--bnk-highlight);
		border-color: var(--bnk-highlight);
	}
}

.choice__input:checked + .choice__label {
	background-color: var(--color-accent);
	border-color: var(--color-accent);
	color: var(--color-on-accent);
}

/*
 * The outline traces the label, because the input it belongs to is off screen and would otherwise
 * draw a 1px ring in the corner of the card.
 */
.choice__input:focus-visible + .choice__label {
	outline: var(--focus-width) solid var(--focus-color);
	outline-offset: var(--focus-offset);
}

/*
 * Once the pick-up-to-three cap is reached, ten of the thirteen tiles carry this at once. At the
 * 0.4 a single disabled control wants, a whole grid of them reads as a broken screen rather than
 * as a limit that has been met, so it is deliberately shallow.
 */
.choice__input:disabled + .choice__label {
	opacity: 0.55;
	cursor: not-allowed;
}

.choice__icon {
	flex: none;
	width: var(--icon-md);
	height: var(--icon-md);
	color: var(--color-accent);
	transition: color var(--duration) var(--ease);
}

.choice__input:checked + .choice__label .choice__icon {
	color: var(--color-on-accent);
}

/*
 * The selection indicator. An empty ring that fills with a tick when its input is checked.
 *
 * Selection was previously carried by the fill colour alone, which reads as a hover state until you
 * have already clicked something. A ring says "this is choosable" before anything is chosen, and it
 * is the second, non-colour signal WCAG 1.4.1 wants for a state.
 */
.choice__mark {
	display: grid;
	place-items: center;
	flex: none;
	order: -1;
	width: 1.375rem;
	height: 1.375rem;
	border: var(--border-control) solid var(--color-border-control);
	border-radius: var(--radius-pill);
	background-color: transparent;
	color: var(--color-accent);
	transition:
		background-color var(--duration) var(--ease),
		border-color var(--duration) var(--ease);
}

.choice__check {
	width: 0.75rem;
	height: 0.75rem;
	opacity: 0;
	transform: scale(0.5);
	transition:
		opacity var(--duration) var(--ease),
		transform var(--duration) var(--ease-out);
}

/* Filled with the label's own text colour, so the tick reads as a hole punched in the ring rather
   than as a third colour arriving. */
.choice__input:checked + .choice__label .choice__mark {
	background-color: var(--color-on-accent);
	border-color: var(--color-on-accent);
}

.choice__input:checked + .choice__label .choice__check {
	opacity: 1;
	transform: none;
}

@media (hover: hover) {
	.choice__input:not(:checked):not(:disabled) + .choice__label:hover .choice__mark {
		border-color: var(--color-accent);
	}
}

/* -- Tiles -------------------------------------------------------------- */

/*
 * Four across on the wide card. Flex-wrap with a fixed basis rather than a grid, because thirteen
 * options leave one over: a grid drops it into column one as an orphan, and centring the short last
 * row reads as deliberate.
 */
.choice-set--tile {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-15);
	--tile-cols: 4;
}

.choice-set--tile .choice {
	flex: 0 1 calc((100% - (var(--tile-cols) - 1) * var(--space-15)) / var(--tile-cols));
}

/* Four options, so the row is full and there is nothing to centre. */
.choice-set--tile[data-columns='2'] {
	--tile-cols: 4;
}

.choice-set--tile .choice__label {
	flex-direction: column;
	justify-content: center;
	gap: var(--space-1);
	min-height: 5.75rem;
	padding: var(--space-2) var(--space-15);
	border-radius: var(--radius-md);
	text-align: center;
}

.choice-set--tile .choice__text {
	font-size: var(--font-2);
	text-wrap: balance;
}

/* On a tile the ring sits in the corner, because the icon owns the middle and a ring stacked above
   it would push the label off the vertical centre of the box. */
.choice-set--tile .choice__mark {
	position: absolute;
	inset-block-start: var(--space-1);
	inset-inline-start: var(--space-1);
	order: 0;
	width: 1.25rem;
	height: 1.25rem;
}

.choice-set--tile .choice__check {
	width: 0.6875rem;
	height: 0.6875rem;
}

@media (max-width: 60rem) {
	.choice-set--tile {
		--tile-cols: 3;
	}

	.choice-set--tile[data-columns='2'] {
		--tile-cols: 2;
	}
}

/*
 * Full width on a phone. A two-up grid of squares puts two truncated labels side by side in about
 * 150px each, and a stacked list of full-width rows is both easier to read and a bigger target.
 * The tile stops being a square and becomes a row: ring, icon, label.
 */
@media (max-width: 34rem) {
	.choice-set {
		flex-direction: column;
	}

	.choice-set .choice {
		width: 100%;
	}

	.choice-set--tile,
	.choice-set--tile[data-columns='2'] {
		--tile-cols: 1;
	}

	.choice-set--tile .choice__label {
		flex-direction: row;
		justify-content: flex-start;
		gap: var(--space-2);
		min-height: var(--tap-min);
		padding: var(--space-15) var(--space-2);
		text-align: start;
	}

	.choice-set--tile .choice__mark {
		position: static;
		order: -1;
		width: 1.375rem;
		height: 1.375rem;
	}

	.choice-set--tile .choice__check {
		width: 0.75rem;
		height: 0.75rem;
	}

	.choice-set--tile .choice__text {
		font-size: var(--font-3);
	}
}

/* -- The pick-up-to-three counter -------------------------------------- */

/*
 * Above the grid, not below it. Thirteen tiles put the bottom of the grid a screen away from the
 * question, and a limit explained down there is read after the visitor has already wondered why
 * the tiles stopped responding.
 */
.choice-counter {
	margin-block-start: var(--space-1);
	margin-block-end: 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;
}

.choice-counter.is-full {
	color: var(--color-accent);
}