/**
 * Form guard styling.
 *
 * Two rules, both about not being seen. No fonts, no images, no external
 * resources of any kind — the stylesheet is part of the "nothing leaves this
 * server" promise as much as the PHP is.
 */

/*
 * Honeypot wrapper.
 *
 * Deliberately not `display: none`. That property is the first thing simple
 * automation checks for, and a trap it can identify is not a trap. Moving the
 * field out of the viewport keeps it in the layout tree — and therefore fillable
 * by anything that fills fields blindly — while remaining invisible on screen.
 *
 * The field is kept out of the accessibility tree by `aria-hidden` and off the
 * tab order by `tabindex="-1"` in the markup, so no screen-reader or keyboard
 * user can ever reach it. `position: absolute` also takes it out of flow, so it
 * cannot shift the form's layout.
 */
.ela-hp {
	position: absolute !important;
	left: -9999px !important;
	top: auto !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
	pointer-events: none !important;
}

/*
 * Live region for status announcements.
 *
 * Visually hidden but readable by assistive technology — the standard clip
 * pattern rather than `display: none`, which would remove it from the
 * accessibility tree and silence it entirely.
 */
.ela-sr-only {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/*
 * Adaptive task.
 *
 * Inherits the theme's own typography and colours rather than imposing any —
 * a question that looks foreign to the form reads as an error message, not as
 * something to answer. Nothing here communicates state through colour alone,
 * and there is no animation, so there is nothing for `prefers-reduced-motion`
 * to suppress.
 */
.ela-adaptive {
	margin: 0 0 1em;
}

.ela-adaptive__label {
	display: block;
	margin-bottom: 0.35em;
}

.ela-adaptive__input {
	max-width: 12em;
}

/*
 * Refusal notice (atomic forms only).
 *
 * The classic Form widget shows the server's message itself; the atomic one
 * ignores it, so this plugin renders the refusal here instead. The meaning is
 * carried by the text — a real sentence in a `role="alert"` region — never by
 * colour alone, so the styling only has to make it read as a notice rather than
 * as part of the form. No fonts, images or external resources, like the rest of
 * this file.
 */
.ela-notice {
	margin: 0 0 1em;
	padding: 0.6em 0.8em;
	border: 1px solid #b32d2e;
	border-left-width: 4px;
	border-radius: 2px;
	color: #8a2424;
	background: rgba(179, 45, 46, 0.06);
}