/**
 * Global form controls.
 */

fieldset {
	min-width: 0;
	padding: 0;
	margin: 0;
	border: 0;
}

legend,
label {
	color: var(--color-heading);
	font-size: var(--font-size-sm);
	font-weight: 700;
}

.form-field {
	display: grid;
	gap: var(--space-2xs);
}

:where(
	input:not(
		[type="checkbox"],
		[type="radio"],
		[type="button"],
		[type="submit"],
		[type="reset"]
	),
	select,
	textarea
) {
	width: 100%;
	min-height: 3rem;
	padding: 0.75rem 1rem;
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-sm);
	color: var(--color-text);
	background-color: var(--color-surface);
	line-height: 1.4;
	transition:
		border-color var(--transition-fast),
		box-shadow var(--transition-fast);
}

textarea {
	min-height: 10rem;
	resize: vertical;
}

::placeholder {
	color: var(--color-muted);
	opacity: 1;
}

select {
	cursor: pointer;
}

input[type="checkbox"],
input[type="radio"] {
	width: 1.125rem;
	height: 1.125rem;
	margin: 0;
	accent-color: var(--color-accent-strong);
}

:where(input, select, textarea)[aria-invalid="true"] {
	border-color: var(--color-accent-strong);
}

:where(input, select, textarea):disabled {
	color: var(--color-muted);
	background-color: var(--color-gray-200);
	cursor: not-allowed;
}

.form-help,
.form-error {
	font-size: var(--font-size-sm);
	line-height: 1.4;
}

.form-help {
	color: var(--color-muted);
}

.form-error {
	color: var(--color-accent-strong);
	font-weight: 600;
}

.form-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm);
	align-items: center;
}