/**
 * Innovation Lab + utilities — tap-to-choose buttons.
 * Visual system mirrors .cn-rental-finder__option (style.css); tokens from :root --cn-*.
 */

.cn-lab-tool,
.cn-utility-tool {
	--cn-lab-choice-bg: var(--cn-color-bg-light, #f0ebe3);
	--cn-lab-choice-text: var(--cn-color-text-heading, #1c2836);
	--cn-lab-choice-border: var(--cn-color-border-subtle, #d4cfc4);
	--cn-lab-choice-hover-bg: var(--cn-color-accent-wash, #e9f0f6);
	--cn-lab-choice-hover-border: var(--cn-color-accent, #046bd2);
	--cn-lab-choice-picked-bg: var(--cn-color-sea-wash, #e3ecf4);
	--cn-lab-choice-picked-border: var(--cn-color-accent, #046bd2);
	--cn-lab-choice-picked-text: var(--cn-color-accent-hover, #045cb4);
	max-width: 100%;
}

.cn-lab-field,
.cn-utility-field {
	display: block;
	margin-top: 1rem;
}

.cn-lab-label,
.cn-utility-label {
	display: block;
	font-weight: 600;
	font-size: 0.95rem;
	margin-bottom: 0.5rem;
	color: var(--cn-color-text-heading, #1c2836);
}

.cn-lab-choices,
.cn-utility-choices {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

/* Choice buttons — explicit colors beat inherited / theme button defaults */
.cn-lab-tool .cn-lab-choice,
.cn-utility-tool .cn-utility-choice {
	display: block;
	width: 100%;
	min-height: var(--cn-touch-target-min, 48px);
	padding: 0.75rem 0.85rem;
	font-family: inherit;
	font-size: var(--cn-font-size-ui-min, 0.95rem);
	font-weight: 600;
	line-height: 1.35;
	text-align: left;
	color: var(--cn-lab-choice-text) !important;
	background-color: var(--cn-lab-choice-bg) !important;
	border: 2px solid var(--cn-lab-choice-border) !important;
	border-radius: var(--cn-radius-medium, 10px);
	box-shadow: var(--cn-shadow-rest, 0 1px 3px rgba(28, 40, 54, 0.08));
	cursor: pointer;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	transition:
		border-color var(--cn-duration-base, 0.15s) var(--cn-easing-standard, ease),
		background-color var(--cn-duration-base, 0.15s) var(--cn-easing-standard, ease),
		box-shadow var(--cn-duration-base, 0.15s) var(--cn-easing-standard, ease),
		color var(--cn-duration-base, 0.15s) var(--cn-easing-standard, ease),
		transform var(--cn-duration-base, 0.15s) var(--cn-easing-standard, ease);
}

@media (hover: hover) and (pointer: fine) {
	.cn-lab-tool .cn-lab-choice:not(.cn-lab-picked):hover,
	.cn-utility-tool .cn-utility-choice:not(.cn-utility-picked):hover {
		border-color: var(--cn-lab-choice-hover-border) !important;
		background-color: var(--cn-lab-choice-hover-bg) !important;
		transform: translateY(-1px);
	}
}

.cn-lab-tool .cn-lab-choice:focus-visible,
.cn-utility-tool .cn-utility-choice:focus-visible {
	outline: none;
	box-shadow: var(--cn-shadow-focus-ring, 0 0 0 2px #f6f4f0, 0 0 0 4px rgba(4, 107, 210, 0.4)) !important;
}

.cn-lab-tool .cn-lab-choice:active:not(.cn-lab-picked),
.cn-utility-tool .cn-utility-choice:active:not(.cn-utility-picked) {
	transform: translateY(0);
	background-color: var(--cn-color-bg-light, #f3f1ed) !important;
}

/* Selected — stronger than label + hover */
.cn-lab-tool .cn-lab-choice.cn-lab-picked,
.cn-utility-tool .cn-utility-choice.cn-utility-picked {
	color: var(--cn-lab-choice-picked-text) !important;
	background-color: var(--cn-lab-choice-picked-bg) !important;
	border-color: var(--cn-lab-choice-picked-border) !important;
	font-weight: 700;
	box-shadow:
		0 0 0 1px rgba(var(--cn-color-accent-rgb, 4, 107, 210), 0.2),
		var(--cn-shadow-rest, 0 2px 8px rgba(0, 0, 0, 0.03));
}

.cn-lab-tool .cn-lab-choice.cn-lab-picked:focus-visible,
.cn-utility-tool .cn-utility-choice.cn-utility-picked:focus-visible {
	box-shadow: var(--cn-shadow-focus-ring), 0 0 0 1px rgba(var(--cn-color-accent-rgb, 4, 107, 210), 0.25) !important;
}

.cn-lab-result,
.cn-utility-result {
	padding: 1rem 1.1rem;
	border-radius: var(--cn-radius-medium, 10px);
	background: rgba(0, 0, 0, 0.04);
}

.cn-lab-result-text,
.cn-utility-result-text {
	font-size: 1.05rem;
	font-weight: 600;
	line-height: 1.45;
	margin: 0;
	color: var(--cn-color-text-heading, #1c2836);
}

@media (min-width: 480px) {
	.cn-lab-choices,
	.cn-utility-choices {
		flex-direction: row;
		flex-wrap: wrap;
	}

	.cn-lab-tool .cn-lab-choice,
	.cn-utility-tool .cn-utility-choice {
		flex: 1 1 calc(50% - 0.5rem);
	}
}