/*
Form controls only.

- input
- textarea
- select
- label
- fieldset
- form states (error, success, disabled)

Handle accessibility states carefully. Focus styles are sacred. Don’t remove outlines unless you replace them properly.
*/

.field {
	display: grid;
	gap: var(--s-2);
}

.label {
	font-weight: 600;
}

.control {
	inline-size: 100%;
	padding: 0.65em 0.8em;
	border-radius: var(--r-1);
	border: var(--b-1) solid var(--c-border);
	background: var(--c-bg);
	color: var(--c-text);
	transition:
		box-shadow var(--dur-1) var(--ease),
		border-color var(--dur-1) var(--ease);
}

.control::placeholder {
	color: color-mix(in oklab, var(--c-muted) 70%, transparent);
}

.control:focus-visible {
	outline: none;
	border-color: color-mix(in oklab, var(--c-accent) 70%, var(--c-border));
	box-shadow: var(--focus-ring);
}

.control[disabled] {
	opacity: 0.6;
	cursor: not-allowed;
}

.help {
	font-size: var(--fs-0);
	color: var(--c-muted);
}

.field--error .control {
	border-color: var(--c-danger);
}
.field--error .help {
	color: var(--c-danger);
}