/**
 * insta/field-input — "Underline darkens on focus".
 *
 * The visible focus state for a field drawn as a single bottom rule: the rule takes the focus
 * colour while focused, and returns to its resting colour on blur. Colour only — the border WIDTH
 * is untouched, so the control's box never changes size and the field cannot shift the layout as
 * the visitor tabs through the form.
 *
 * The colour resolves through the same chain as the default focus treatment in the form
 * stylesheet: the block's own `focusBorderColor` attribute (inline `--insta-field-focus-border`),
 * then theme.json `settings.custom.instaFieldFocusBorder`, then the theme's contrast preset, then
 * `currentColor`. One knob re-points both treatments.
 *
 * `!important` is required, not stylistic: the resting border colour is a block attribute, so it is
 * either inline on the control or delivered as WordPress's own `.has-<slug>-border-color { …
 * !important }` utility, and both outrank a plain stylesheet rule. See field-input-styles.php.
 *
 * The selector is listed twice — bare, and scoped under `.insta-form` — so it also outranks the
 * form stylesheet's own `.insta-form .insta-field__input:focus` rule regardless of which sheet the
 * browser loads second. This style opts OUT of the default outline ring, which is only safe because
 * the rule below is guaranteed to render a visible change.
 *
 * `:focus` rather than `:focus-visible` — a text field should show its state for pointer users too,
 * which is what `:focus` gives and what the source design does.
 */
.wp-block-insta-field-input.is-style-underline-focus:focus,
.insta-form .wp-block-insta-field-input.is-style-underline-focus:focus {
	border-bottom-color: var(
		--insta-field-focus-border,
		var( --wp--custom--insta-field-focus-border, var( --wp--preset--color--contrast, currentColor ) )
	) !important;
	outline: none;
}

@media ( prefers-reduced-motion: no-preference ) {
	.wp-block-insta-field-input.is-style-underline-focus {
		transition: border-color 0.15s ease;
	}
}