/*
 * Forms (docs/DESIGN_SYSTEM.md section 8.5). The label sits above the control, never inside it. Controls
 * are 48 px high with a 1 px slate-500 border (so they meet the 3:1 rule for controls) and 16 px text,
 * which stops iOS from zooming in on focus.
 *
 * Field:     <div class="field"><label class="field__label" for="x">Name</label>
 *              <input class="field__control" id="x"> <p class="field__help" id="x-help">Help</p></div>
 * Error:     add .field--error and <p class="field__error" id="x-error">, and point aria-describedby at it.
 * Select:    <div class="select"><select class="field__control">...</select></div>
 * Check:     <label class="check"><input class="check__input" type="checkbox"><span class="check__box"></span>Text</label>
 */
@layer components {
	.field + .field {
		margin-block-start: var(--space-5);
	}

	.field__label {
		display: block;
		margin-block-end: var(--space-2);
		font-weight: 600;
	}

	.field__control {
		display: block;
		width: 100%;
		min-height: var(--size-control-md);
		padding: var(--space-3) var(--space-4);
		border: 1px solid var(--color-line-strong);
		border-radius: var(--radius-md);
		background: var(--color-surface);
		color: var(--color-text);
		font-size: var(--fs-body); /* never below 1rem, so iOS does not zoom in on focus */
		line-height: var(--lh-small);
		transition: border-color var(--dur-fast) var(--ease-out);
	}

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

	@media (hover: hover) {
		.field__control:hover {
			border-color: var(--color-primary);
		}
	}

	.field__control:focus-visible {
		outline: var(--focus-ring-width) solid var(--color-focus);
		outline-offset: var(--focus-ring-offset);
		border-color: var(--color-primary);
	}

	.field__control:disabled {
		border-color: var(--color-disabled-bg);
		background: var(--color-disabled-bg);
		color: var(--color-text-muted);
	}

	textarea.field__control {
		min-height: var(--size-textarea-min);
		resize: vertical;
	}

	.field__help {
		margin-block-start: var(--space-2);
		color: var(--color-text-muted);
		font-size: var(--fs-small);
		line-height: var(--lh-small);
	}

	/* Error: red border, an icon and words (never colour alone), tied to the control with aria-describedby. */
	.field--error .field__control {
		border-color: var(--color-error);
	}

	.field__error {
		display: flex;
		align-items: baseline;
		gap: var(--space-2);
		margin-block-start: var(--space-2);
		color: var(--color-error);
		font-size: var(--fs-small);
		font-weight: 600;
		line-height: var(--lh-small);
	}

	.field__error::before {
		content: "!";
		display: inline-grid;
		flex: none;
		place-items: center;
		width: 1.25em;
		height: 1.25em;
		border-radius: var(--radius-pill);
		background: var(--color-error);
		color: var(--color-text-inverse);
		font-size: var(--fs-caption);
		line-height: 1;
	}

	/* Native select with a custom chevron drawn from borders (no image, so it follows the text colour). */
	.select {
		position: relative;
	}

	.select .field__control {
		appearance: none;
		padding-inline-end: var(--space-8);
	}

	.select::after {
		content: "";
		position: absolute;
		inset-block-start: 50%;
		inset-inline-end: var(--space-4);
		width: var(--space-2);
		height: var(--space-2);
		border-right: 2px solid var(--color-text);
		border-bottom: 2px solid var(--color-text);
		transform: translateY(-75%) rotate(45deg);
		pointer-events: none;
	}

	/* Checkbox and radio: a 24 px custom control; the whole label is the target. */
	.check {
		display: flex;
		align-items: flex-start;
		gap: var(--space-3);
		min-height: var(--size-control-sm);
		padding-block: var(--space-2);
		cursor: pointer;
	}

	.check__input {
		position: absolute;
		opacity: 0;
		pointer-events: none;
	}

	.check__box {
		display: inline-grid;
		flex: none;
		place-items: center;
		width: var(--size-check);
		height: var(--size-check);
		border: 1px solid var(--color-line-strong);
		border-radius: var(--radius-xs);
		background: var(--color-surface);
		transition:
			background-color var(--dur-fast) var(--ease-out),
			border-color var(--dur-fast) var(--ease-out);
	}

	.check__box::after {
		content: "";
		width: 0.375rem;
		height: 0.75rem;
		border-right: 2px solid var(--color-text-inverse);
		border-bottom: 2px solid var(--color-text-inverse);
		opacity: 0;
		transform: translateY(-1px) rotate(45deg);
	}

	.check__input:checked + .check__box {
		border-color: var(--color-primary);
		background: var(--color-primary);
	}

	.check__input:checked + .check__box::after {
		opacity: 1;
	}

	.check__input:focus-visible + .check__box {
		outline: var(--focus-ring-width) solid var(--color-focus);
		outline-offset: var(--focus-ring-offset);
	}

	/* Radio: same control, round. */
	.check--radio .check__box {
		border-radius: var(--radius-pill);
	}

	.check--radio .check__box::after {
		width: 0.5rem;
		height: 0.5rem;
		border: 0;
		border-radius: var(--radius-pill);
		background: var(--color-text-inverse);
		transform: none;
	}

	@media (forced-colors: active) {
		.field__control,
		.check__box {
			border-color: ButtonText;
		}
	}
}