/* 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"],
input[type="url"],
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);
}

/* A <select> is the one control a browser will not size like the others. It is given
   the same box as the input beside it — same padding, same border, same 44px
   min-height — and then paints the native widget inside that box at whatever height it
   likes. Safari is the worst of it; Chrome happens to agree with us, which is how this
   survived being looked at (alpdest, 5 Sep 2026: "the dropdown for season, geplant für
   and the number field for anzahl are not the same height").

   Dropping the native appearance makes the border box the painted box, so a select and
   a number input are the same height in every browser rather than only in one. The
   arrow has to come back by hand: a <select> cannot carry a pseudo-element, so it is a
   background image, and `img-src` allows `data:` (config/settings.py).

   `[multiple]` and `[size]` are list boxes rather than dropdowns — no arrow, and their
   height is the number of rows. */
select:not([multiple]):not([size]) {
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2355606b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right var(--s-3) center;
	background-size: 0.625rem auto;
	padding-right: calc(var(--s-3) * 2 + 0.625rem);
}

/* 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-color`, not the `background` shorthand: the shorthand resets
	   `background-image` and took the select's arrow with it. */
	background-color: 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;
	}
}