/*
 * GPIPL form controls (Phase 3, conditional: enquiry/contact forms from Phase 11).
 *
 * Accessibility built in:
 * - Labels are always visible (no placeholder-as-label).
 * - Optional fields are marked "(optional)"; required ones carry no asterisk-only cue.
 * - Errors use text + icon + border, never colour alone; wire them with
 *   aria-invalid="true" and aria-describedby pointing at .field__error.
 * - Control borders use Instrument Steel (5.5:1), meeting the 3:1 UI rule.
 */
@layer components {
	.form { display: grid; gap: var(--space-m); max-width: 40rem; }
	.form__row { display: grid; gap: var(--space-m); }
	@media (min-width: 48em) {
		.form__row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	}

	.field { display: grid; gap: var(--space-2xs); align-content: start; }
	.field__label { font-weight: var(--wght-semibold); font-stretch: var(--wdth-ui); line-height: var(--lh-snug); }
	.field__optional { font-weight: var(--wght-body); color: var(--color-text-muted); }
	.field__hint { font-size: var(--step--1); color: var(--color-text-muted); }
	.field__error {
		display: flex;
		gap: 0.4em;
		align-items: flex-start;
		font-size: var(--step--1);
		font-weight: var(--wght-medium);
		color: var(--color-text);
	}
	.field__error .icon { color: var(--color-attention-strong); margin-top: 0.1em; }

	/* ------------------------------------------------------------ Text inputs */
	.input,
	.textarea,
	.select select {
		width: 100%;
		min-height: 3rem;
		padding: 0.7rem 0.875rem;
		border: 1px solid var(--color-control-border);
		border-radius: var(--radius-s);
		background-color: var(--color-bg);
		color: var(--color-text);
		font-size: max(1rem, var(--step-0)); /* >=16px prevents iOS zoom on focus */
		line-height: 1.4;
		transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
	}
	.textarea { min-height: 9rem; resize: vertical; }
	.input::placeholder,
	.textarea::placeholder { color: var(--color-text-muted); opacity: 1; }

	.input:hover,
	.textarea:hover,
	.select select:hover { border-color: var(--color-text); }

	.input:focus-visible,
	.textarea:focus-visible,
	.select select:focus-visible {
		outline: none;
		border-color: var(--color-focus);
		box-shadow: 0 0 0 1px var(--color-focus); /* 2px combined ring, stays inside the layout */
	}

	.input[aria-invalid="true"],
	.textarea[aria-invalid="true"],
	.select select[aria-invalid="true"] {
		border-color: var(--color-attention-strong);
		box-shadow: inset 3px 0 0 var(--color-attention);
	}

	.input:disabled,
	.textarea:disabled,
	.select select:disabled {
		background: var(--color-surface);
		color: var(--color-text-muted);
		cursor: not-allowed;
	}

	/* ------------------------------------------------------------ Select
	   Native <select> inside .select; chevron drawn with CSS so it follows the text colour. */
	.select { position: relative; }
	.select select { appearance: none; padding-right: 2.5rem; cursor: pointer; }
	.select::after {
		content: "";
		position: absolute;
		right: 1rem;
		top: 50%;
		width: 0.5rem;
		height: 0.5rem;
		border-right: 1.5px solid currentColor;
		border-bottom: 1.5px solid currentColor;
		transform: translateY(-70%) rotate(45deg);
		pointer-events: none;
	}

	/* ------------------------------------------------------------ Checkbox / radio */
	.choice {
		display: flex;
		gap: var(--space-xs);
		align-items: flex-start;
		min-height: var(--tap);
		padding-block: 0.6rem;
		line-height: var(--lh-snug);
		cursor: pointer;
	}
	.choice input {
		flex-shrink: 0;
		width: 1.25rem;
		height: 1.25rem;
		margin-top: 0.05rem;
		accent-color: var(--color-accent);
		cursor: pointer;
	}
	.choice__text { font-size: var(--step--1); color: var(--color-text-muted); }
	.choice__text a { position: relative; z-index: 1; }

	.fieldset { display: grid; gap: var(--space-2xs); }
	.fieldset > legend { margin-bottom: var(--space-2xs); font-weight: var(--wght-semibold); font-stretch: var(--wdth-ui); }

	/* ------------------------------------------------------------ Form-level notices */
	.form-notice {
		display: flex;
		gap: var(--space-xs);
		align-items: flex-start;
		padding: var(--space-s) var(--space-m);
		border-radius: var(--radius-m);
		background: var(--color-surface);
		color: var(--color-text);
	}
	.form-notice .icon { margin-top: 0.15em; }
	.form-notice--success { background: var(--color-accent-tint); }
	.form-notice--success .icon { color: var(--color-accent); }
	.form-notice--error { background: var(--color-attention-tint); box-shadow: inset 3px 0 0 var(--color-attention); }
	.form-notice--error .icon { color: var(--color-attention-strong); }

	/* Spam trap (Phase 11): off-screen for people, visible to bots. Not display:none, which bots skip. */
	.form-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
}