/* Form controls are full width on phones and never smaller than the tap minimum. */

.field {
	margin-bottom: var(--s-4);
}

.field__label {
	display: block;
	font-weight: 600;
	margin-bottom: var(--s-1);
}

.field__hint {
	display: block;
	font-size: var(--fs-sm);
	color: var(--c-text-muted);
	margin-top: var(--s-1);
}

.field__errors {
	margin-top: var(--s-1);
	color: var(--c-danger);
	font-size: var(--fs-sm);
	font-weight: 600;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="search"],
input[type="tel"],
select,
textarea {
	display: block;
	width: 100%;
	min-height: var(--tap-min);
	padding: var(--s-2) var(--s-3);
	border: 1px solid var(--c-border-strong);
	border-radius: var(--radius);
	background: var(--c-surface);
	color: var(--c-text);
}

/* iOS gives a date input an intrinsic width of its own and centres the value inside
   it, so it grows past every other field in the form however wide the container is.
   Dropping the native appearance and the minimum width puts it back in line. */
input[type="date"] {
	-webkit-appearance: none;
	appearance: none;
	min-width: 0;
	max-width: 100%;
}

input[type="date"]::-webkit-date-and-time-value {
	text-align: left;
	margin: 0;
}

/* A field that cannot be changed must look like one. The reference forms freeze a
   code once anything points at it, and without this the input looks editable and the
   page looks broken when typing does nothing. */
input:disabled,
select:disabled,
textarea:disabled {
	background: var(--c-surface-sunken);
	color: var(--c-text-muted);
	border-style: dashed;
	cursor: not-allowed;
}

input:focus,
select:focus,
textarea:focus {
	border-color: var(--c-primary);
}

/* Focused, not wrong. The global ring is a strong orange, picked to be visible on a
   mountain in full sun, and on a select or a textarea it reads as an error — it is
   very nearly the colour the invalid state uses in the rules below. Form controls
   get the primary colour instead. The ring itself stays: a keyboard user has to see
   where they are, and this is the field they are typing into (18 Aug 2026). */
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: 2px solid var(--c-primary);
	outline-offset: 1px;
}

input[aria-invalid="true"],
.field--error input,
.field--error select,
.field--error textarea {
	border-color: var(--c-danger);
	border-width: 2px;
}

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

/* Checkboxes and radios keep a real tap target without stretching the box. */
input[type="checkbox"],
input[type="radio"] {
	width: 1.25rem;
	height: 1.25rem;
	accent-color: var(--c-primary);
}

.field--check {
	display: flex;
	align-items: center;
	gap: var(--s-3);
	min-height: var(--tap-min);
}

.field--check .field__label {
	margin-bottom: 0;
	font-weight: 400;
}

.form-actions {
	display: flex;
	flex-direction: column;
	gap: var(--s-3);
	margin-top: var(--s-5);
}

.form-errors {
	margin-bottom: var(--s-4);
}

@media (min-width: 48rem) {
	.form-actions {
		flex-direction: row;
		align-items: center;
	}

	.form-actions .btn--block {
		width: auto;
	}
}