@layer components {
	@scope (.form) {
		:scope {
			display: grid;
			gap: var(--space-4);
			max-inline-size: 40rem;
		}

		:scope.form-centered {
			margin-inline: auto;
		}

		label {
			display: grid;
			gap: var(--space-1);
			font-weight: 600;
		}

		.hint {
			color: var(--color-muted);
			font-weight: 400;
			font-size: 0.85rem;
		}
	}

	@scope (.field-group) {
		:scope {
			display: grid;
			gap: var(--space-1);
		}

		label {
			font-weight: 600;
		}

		.field-error {
			color: var(--color-danger);
			font-size: 0.85rem;
		}
	}

	@scope (.field-grid) {
		:scope {
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
			gap: var(--space-4);
		}

		/* Option cards in a vertical pick-list — used where a 3-up row would
		   fight the form's single-column flow (survey type on the new page).
		   :scope + class outranks the bare :scope grid by one class. */
		:scope.field-grid-stacked {
			grid-template-columns: 1fr;
		}
	}

	@scope (.fieldset-option) {
		:scope {
			display: grid;
			gap: var(--space-2);
			border: 1px solid var(--color-border);
			border-radius: var(--radius-lg);
			padding: var(--space-4);
			/* The UA fieldset min-inline-size: min-content shrinks the grid
			   below the form's width — kill it so cards match the inputs. */
			min-inline-size: 0;
		}

		legend {
			padding-inline: var(--space-1);
			font-weight: 600;
		}

		label {
			display: grid;
			grid-template-columns: auto 1fr;
			align-items: start;
			gap: var(--space-3);
			border: 1px solid var(--color-border);
			border-radius: var(--radius-lg);
			padding: var(--space-4);
			background-color: var(--color-surface);
			cursor: pointer;
			font-weight: 400;
		}

		label:has(input:checked) {
			border-color: var(--color-accent);
			background-color: color-mix(in oklch, var(--color-accent) 6%, var(--color-surface));
		}

		label input[type="radio"] {
			margin-block-start: var(--space-1);
			accent-color: var(--color-accent);
		}

		.option-text {
			display: grid;
			gap: var(--space-1);
		}

		.option-title {
			font-weight: 600;
		}

		.option-body {
			color: var(--color-muted);
			font-size: 0.9rem;
		}
	}

	@scope (.form-inline) {
		:scope {
			display: flex;
			flex-wrap: wrap;
			align-items: flex-end;
			gap: var(--space-2);
			max-inline-size: none;
			margin-block-end: var(--space-6);
		}

		label {
			display: grid;
			gap: var(--space-1);
			font-weight: 600;
		}

		input[type="search"] {
			min-inline-size: 20rem;
		}
	}
}