/* ==========================================================================
   Form fields
   Converted from design-reference/showroom-floor.css §6.

   The reference's hover border is a one-off hex between rule and ink with no
   token behind it; muted stands in. Recorded in design-reference/README.md.
   ========================================================================== */

.tfs-field {
	display: grid;
	gap: var(--wp--custom--step--8);
	min-width: 0;
}

.tfs-field__label {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--wp--custom--step--8);
	font-size: var(--wp--preset--font-size--utility);
	text-transform: uppercase;
	letter-spacing: var(--wp--custom--tracking--utility);
	line-height: 1.4;
	color: var(--wp--preset--color--ink);
}

.tfs-field__optional {
	color: var(--wp--preset--color--muted);
}

.tfs-field__control {
	width: 100%;
	min-height: var(--wp--custom--control--tap-target-minimum);
	padding: var(--wp--custom--step--12) var(--wp--custom--step--16);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	line-height: var(--wp--custom--line-height--body);
	color: var(--wp--preset--color--ink);
	background-color: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: var(--wp--custom--radius);
	transition: border-color var(--wp--custom--motion--duration) var(--wp--custom--motion--easing);
}

.tfs-field__control--textarea {
	resize: vertical;
	min-height: var(--wp--preset--spacing--80);
}

.tfs-field__control::placeholder {
	color: var(--wp--preset--color--muted);
}

.tfs-field__control:hover {
	border-color: var(--wp--preset--color--muted);
}

.tfs-field__control:focus-visible {
	border-color: var(--wp--preset--color--accent);
	outline: var(--wp--custom--focus--width) solid var(--wp--preset--color--accent);
	outline-offset: var(--wp--custom--focus--offset);
}

.tfs-field__control:disabled {
	background-color: var(--wp--preset--color--ground);
	color: var(--wp--preset--color--muted);
}

/*
 * A select carries the same box as every other control. The native arrow is
 * left alone: replacing it would mean drawing one, and a background-image
 * chevron is a hardcoded colour the token system cannot reach.
 */
.tfs-field__control--select {
	appearance: auto;
	cursor: pointer;
}

/* The error is carried by the message, not by the border colour — the border
   is the supporting signal, and aria-invalid is the one a screen reader hears. */
.tfs-field__control[aria-invalid="true"] {
	border-color: var(--wp--preset--color--ink);
}

.tfs-field__error {
	margin: 0;
	font-size: var(--wp--preset--font-size--caption);
	line-height: 1.5;
	color: var(--wp--preset--color--ink);
}