/*
 * aieo/contact-form, variant `panel` (BRIEF-2026-11-01-FORMS-ON-ROOSTER-ONE.md): a Rooster One form instance (an
 * `aieo_form`: its fields, their widths and messages, its consent, button and success words are the instance's data)
 * drawn as a landing's form panel: the head (an eyebrow or a badge with its icon, the heading, the lede), the card with
 * the two-column field grid (each field full or half as the instance says; one column on a phone), the fields, the
 * choices, the single checks (a consent, a one-choice checkbox), the button, the inline field messages and the status
 * line (the success state). Two layouts, each the measured look of a landing it was carried from:
 *
 *   card  the head centred over a 600 px card in a 752 px column (the Optimizer's early-access form, the legacy
 *         landing.php's #interest): 34 px fields on Metronic's scale, two columns from 640 px;
 *   wash  a toned wash panel (the accent at 16 % to 12 %) with the head at the left and the form's card inside (the
 *         LANSA quote, the legacy landing-lansa.php's #quote): 43 px fields, two columns from 721 px.
 *
 * `tone` (a family's accent or a semantic tone) recolours the badge, the wash, the focus and the button. Without one
 * the button keeps its landing's blue (the card's Metronic primary #155dfc, 90 % on hover, accessible in the light
 * scheme at 92 %; the wash's LANSA blue #1e63ce, #164ea6 on hover; no theme token holds either). Field text is 16 px
 * on a phone (FE-F4). Compiled by build/blocks-css.mjs into variants/panel.css, loaded only where the variant renders.
 */

@import "../../../../../engine/blocks/theme.css";

/* ── Shared ───────────────────────────────────────────────────────────────────────────────────────────── */

.aieo-form--panel {
	box-sizing: border-box;
	max-width: none;
	margin-inline: auto;
	color: var(--wp--preset--color--fg);
	font-size: 1rem;
	line-height: 1.5;
}

.aieo-form--panel :where(h2, h3, h4, p, label, legend, fieldset) {
	margin: 0;
}

.aieo-form--panel .aieo-form__set {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.aieo-form--panel .aieo-form__set > legend {
	float: none;
	width: 100%;
	padding: 0;
}

.aieo-form--panel .aieo-form__full {
	grid-column: 1 / -1;
}

.aieo-form--panel .aieo-form__hp {
	position: absolute;
	top: auto;
	left: -10000px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.aieo-form--panel .aieo-form__control::placeholder {
	color: var(--wp--preset--color--muted);
	opacity: 1;
}

.aieo-form--panel :is(input:not([type="checkbox"], [type="radio"]), select, textarea):focus {
	outline: none;
	border-color: var(--wp--preset--color--accent);
	box-shadow: var(--wp--custom--rooster--focus-ring);
}

.aieo-form--panel :is(input, select, textarea)[aria-invalid="true"] {
	border-color: var(--wp--preset--color--danger);
}

.aieo-form--panel select {
	-webkit-appearance: none;
	appearance: none;
	padding-right: 32px;
	background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%;
	background-size: 5px 5px;
	background-repeat: no-repeat;
	line-height: normal;
	cursor: pointer;
}

.aieo-form--panel textarea {
	resize: vertical;
}

.aieo-form--panel .aieo-form__button {
	box-sizing: border-box;
	width: 100%;
	margin: 0;
	border: 0;
	background: var(--aieo-form-button);
	color: var(--aieo-form-button-ink);
	font-family: inherit;
	cursor: pointer;
}

.aieo-form--panel .aieo-form__button:hover {
	background: var(--aieo-form-button-hover);
}

.aieo-form--panel .aieo-form__button:focus-visible {
	outline: none;
	box-shadow: var(--wp--custom--rooster--focus-ring);
}

.aieo-form--panel .aieo-form__button[aria-busy="true"] {
	opacity: 0.65;
	cursor: wait;
}

.aieo-form--panel .aieo-form__error {
	color: var(--wp--preset--color--danger);
}

.aieo-form--panel .aieo-form__help {
	color: var(--wp--preset--color--muted);
}

.aieo-form--panel .aieo-form__status:empty {
	margin: 0;
	padding: 0;
	border: 0;
}

.aieo-form--panel .aieo-form__status.is-ok {
	color: var(--wp--preset--color--success);
}

.aieo-form--panel .aieo-form__status.is-error {
	color: var(--wp--preset--color--danger);
}

/* ── card: the head centred over a card (the Optimizer's early-access form) ─────────────────────────── */

/* The legacy column: 800 px with 24 px sides (752 px of content), or the page less 24 px a side; the section's gutter counts towards the 24. */
.aieo-form--panel.aieo-form--card {
	--aieo-form-button: #155dfc;
	--aieo-form-button-hover: light-dark(#155dfceb, #155dfce6);
	--aieo-form-button-ink: #ffffff;
	--wp--custom--rooster--field--check: 18px;
	width: min(752px, calc(100% - 2 * max(0px, calc(24px - var(--wp--style--root--padding-left, 16px)))));
	padding: 0;
}

.aieo-form--card .aieo-form__head {
	margin-bottom: 48px;
	text-align: center;
}

.aieo-form--card .aieo-form__eyebrow {
	margin: 0 0 12px;
	color: var(--wp--preset--color--accent-text);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.aieo-form--card .aieo-form__badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0 0 16px;
	padding: 6px 14px;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--accent) 30%, transparent);
	border-radius: 9999px;
	background: color-mix(in srgb, var(--wp--preset--color--accent) 6%, transparent);
	color: var(--wp--preset--color--accent-text);
	font-size: 13px;
	font-weight: 500;
	line-height: 1.5;
}

.aieo-form--card .aieo-form__badge .rooster-icon {
	flex: none;
	width: 14px;
	height: 14px;
}

.aieo-form--card .aieo-form__title {
	margin: 16px 0 12px;
	color: var(--wp--preset--color--contrast-2);
	font-size: 2rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: normal;
}

@media (min-width: 768px) {
	.aieo-form--card .aieo-form__title {
		font-size: 2.5rem;
	}
}

.aieo-form--card .aieo-form__lede {
	max-width: 480px;
	margin: 0 auto;
	color: var(--wp--preset--color--fg);
	font-size: 1rem;
	line-height: 1.5;
}

.aieo-form--card .aieo-form__card {
	box-sizing: border-box;
	max-width: 600px;
	margin: 0 auto;
	padding: 40px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 12px;
	background: var(--wp--preset--color--bg);
}

@media (max-width: 639px) {
	.aieo-form--card .aieo-form__card {
		padding: 40px 12px;
	}
}

/* Bare: a form inside a frame of its own (the form button's window, 11.3.6): the frame is the card, so none around the
   fields (no double rule, FE-L1). */
.aieo-form--panel.aieo-form--bare {
	/* The send button in the theme's button colour (the owner, 5 Nov 2026: "the colour of the theme's button, not blue
	   but orange"): Rooster Zero's button tokens, else the accent, the card's blue only under a theme with neither. */
	--aieo-form-button: var(--wp--custom--rooster--button--background, var(--wp--preset--color--accent, #155dfc));
	--aieo-form-button-hover: color-mix(in srgb, var(--aieo-form-button) 85%, var(--wp--custom--rooster--button--away, #000000));
	--aieo-form-button-ink: var(--wp--custom--rooster--button--text, var(--wp--preset--color--on-accent, #ffffff));
	width: 100%;
}

.aieo-form--bare .aieo-form__card,
.aieo-form--card.aieo-form--bare .aieo-form__card {
	max-width: none;
	padding: 0;
	border: 0;
	background: none;
}

.aieo-form--card .aieo-form__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 16px;
}

@media (min-width: 640px) {
	.aieo-form--card .aieo-form__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.aieo-form--card .aieo-form__field {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.aieo-form--card .aieo-form__label {
	display: block;
	color: var(--wp--preset--color--contrast-2);
	font-size: 14px;
	font-weight: 500;
	line-height: 14px;
}

.aieo-form--card :where(input:not([type="checkbox"], [type="radio"]), select, textarea) {
	box-sizing: border-box;
	width: 100%;
	height: 34px;
	min-height: 0;
	margin: 0;
	padding: 0 12px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 6px;
	background-color: var(--wp--preset--color--bg);
	box-shadow: none;
	color: var(--wp--preset--color--fg);
	font-family: inherit;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.4286;
}

@media (max-width: 782px) {
	.aieo-form--card :where(input:not([type="checkbox"], [type="radio"]), select, textarea) {
		font-size: 16px;
	}
}

.aieo-form--card select {
	border-radius: 8px;
}

.aieo-form--card textarea {
	height: 160px;
	padding: 6px 12px;
}

.aieo-form--card .aieo-form__choices {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 6px 16px;
}

.aieo-form--card :is(.aieo-form__choice, .aieo-form__check) {
	display: flex;
	align-items: flex-start;
	gap: 8px;
}

.aieo-form--card .aieo-form__check {
	margin-top: 4px;
}

.aieo-form--card :is(.aieo-form__choice, .aieo-form__check) input {
	margin: 3px 0 0;
}

.aieo-form--card :is(.aieo-form__choice, .aieo-form__check > label) {
	color: var(--wp--preset--color--fg);
	font-size: 14px;
	line-height: 20px;
	cursor: pointer;
}

.aieo-form--card .aieo-form__check a {
	color: inherit;
}

.aieo-form--card .aieo-form__actions {
	margin-top: 24px;
}

.aieo-form--card .aieo-form__button {
	display: flex;
	height: 34px;
	align-items: center;
	justify-content: center;
	padding: 0 12px;
	border-radius: 6px;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.4286;
}

.aieo-form--card :is(.aieo-form__error, .aieo-form__help) {
	margin: 2px 0 0;
	font-size: 13px;
	line-height: 18px;
}

.aieo-form--card .aieo-form__status {
	margin: 16px 0 0;
	padding: 14px;
	border-radius: 8px;
	font-size: 14px;
	line-height: 20px;
}

.aieo-form--card .aieo-form__status.is-ok {
	background: color-mix(in srgb, var(--wp--preset--color--success) 10%, transparent);
}

.aieo-form--card .aieo-form__status.is-error {
	background: color-mix(in srgb, var(--wp--preset--color--danger) 8%, transparent);
}

@media (max-width: 639px) {
	.aieo-form--card .aieo-form__choices {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ── wash: a toned wash panel with the form's card inside (the LANSA quote) ─────────────────────────── */

/* The legacy page's column: 1132 px, or the page less 24 px a side; the section's gutter counts towards the 24. */
.aieo-form--panel.aieo-form--wash {
	--aieo-form-button: #1e63ce;
	--aieo-form-button-hover: #164ea6;
	--aieo-form-button-ink: #ffffff;
	--wp--custom--rooster--field--check: 13px;
	width: min(1132px, calc(100% - 2 * max(0px, calc(24px - var(--wp--style--root--padding-left, 16px)))));
	padding: 36px 32px;
	border-radius: 16px;
	background: linear-gradient(135deg, color-mix(in srgb, var(--wp--preset--color--accent) 16%, transparent) 0%, color-mix(in srgb, var(--wp--preset--color--accent) 12%, transparent) 100%);
}

.aieo-form--wash .aieo-form__eyebrow {
	margin: 0 0 10px;
	color: var(--wp--preset--color--contrast-2);
	font-size: 11px;
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.aieo-form--wash .aieo-form__badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0 0 10px;
	padding: 4px 12px;
	border-radius: 9999px;
	background: color-mix(in srgb, var(--wp--preset--color--accent) 14%, transparent);
	color: var(--wp--preset--color--accent-text);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.5;
}

.aieo-form--wash .aieo-form__badge .rooster-icon {
	flex: none;
	width: 14px;
	height: 14px;
}

.aieo-form--wash .aieo-form__title {
	margin: 0 0 12px;
	color: var(--wp--preset--color--contrast);
	font-size: clamp(24px, 3.2vw, 34px);
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: -0.022em;
}

.aieo-form--wash .aieo-form__lede {
	max-width: 70ch;
	margin: 0 0 14px;
	font-size: 1rem;
	line-height: 1.6;
}

.aieo-form--wash .aieo-form__card {
	margin-top: 8px;
	padding: 26px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 14px;
	background: color-mix(in srgb, var(--wp--preset--color--contrast) 4%, transparent);
}

.aieo-form--wash .aieo-form__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px 18px;
}

.aieo-form--wash .aieo-form__label {
	display: block;
	margin: 0 0 5px;
	padding: 0;
	color: var(--wp--preset--color--contrast);
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.5;
}

.aieo-form--wash :where(input:not([type="checkbox"], [type="radio"]), select, textarea) {
	box-sizing: border-box;
	width: 100%;
	height: 43px;
	min-height: 0;
	margin: 0;
	padding: 0 12px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 8px;
	background-color: color-mix(in srgb, var(--wp--preset--color--contrast) 4%, transparent);
	box-shadow: none;
	color: var(--wp--preset--color--contrast);
	font-family: inherit;
	font-size: 14px;
	font-weight: 400;
	line-height: 21px;
}

@media (max-width: 782px) {
	.aieo-form--wash :where(input:not([type="checkbox"], [type="radio"]), select, textarea) {
		font-size: 16px;
	}
}

.aieo-form--wash select option {
	background: var(--wp--preset--color--bg);
	color: var(--wp--preset--color--fg);
}

.aieo-form--wash textarea {
	height: 140px;
	padding: 10px 12px;
}

.aieo-form--wash .aieo-form__req {
	color: var(--wp--preset--color--danger);
}

.aieo-form--wash .aieo-form__choices {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 6px 18px;
}

.aieo-form--wash :is(.aieo-form__choice, .aieo-form__check) {
	display: flex;
	align-items: flex-start;
	gap: 8px;
}

/* The words of a choice and of a single check, the row's (the legacy's label held its box: the box is set in the words' type). */
.aieo-form--wash :is(.aieo-form__choice, .aieo-form__check) {
	margin: 0;
	color: var(--wp--preset--color--fg);
	font-size: 13.5px;
	font-weight: 500;
	line-height: 1.5;
}

.aieo-form--wash :is(.aieo-form__choice, .aieo-form__check > label) {
	cursor: pointer;
}

.aieo-form--wash :is(.aieo-form__choice, .aieo-form__check) input {
	margin: 3px 0 0;
}

.aieo-form--wash :is(.aieo-form__choice, .aieo-form__check) input::before {
	width: 0.5rem;
	height: 0.5rem;
}

.aieo-form--wash .aieo-form__check a {
	color: inherit;
}

.aieo-form--wash .aieo-form__actions {
	margin-top: 18px;
}

.aieo-form--wash .aieo-form__button {
	display: block;
	padding: 14px;
	border-radius: 10px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.5;
}

.aieo-form--wash :is(.aieo-form__error, .aieo-form__help) {
	margin: 4px 0 0;
	font-size: 12.5px;
	line-height: 1.5;
}

.aieo-form--wash .aieo-form__status {
	margin: 14px 0 0;
	padding: 12px 14px;
	border: 1px solid transparent;
	border-radius: 10px;
	font-size: 13.5px;
	line-height: 1.5;
}

.aieo-form--wash .aieo-form__status.is-ok {
	border-color: color-mix(in srgb, var(--wp--preset--color--success) 45%, transparent);
	background: color-mix(in srgb, var(--wp--preset--color--success) 16%, transparent);
}

.aieo-form--wash .aieo-form__status.is-error {
	border-color: color-mix(in srgb, var(--wp--preset--color--danger) 45%, transparent);
	background: color-mix(in srgb, var(--wp--preset--color--danger) 16%, transparent);
}

@media (max-width: 720px) {
	.aieo-form--wash :is(.aieo-form__grid, .aieo-form__choices) {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ── tone: a family's accent (the theme's is-style-accent-<slug> re-maps the presets) or a semantic tone ── */

.aieo-form--panel:is(.is-tone-success, .is-tone-warning, .is-tone-danger, .is-tone-neutral) {
	--wp--preset--color--accent: var(--aieo-form-tone);
	--wp--preset--color--accent-text: var(--aieo-form-tone-text);
}

.aieo-form--panel.is-tone-success {
	--aieo-form-tone: var(--wp--preset--color--success, light-dark(#15803d, #4ade80));
	--aieo-form-tone-text: var(--aieo-form-tone);
}

.aieo-form--panel.is-tone-warning {
	--aieo-form-tone: var(--wp--preset--color--warning, light-dark(#b45309, #fbbf24));
	--aieo-form-tone-text: var(--wp--preset--color--warning-ink, light-dark(#896610, #fbbf24));
}

.aieo-form--panel.is-tone-danger {
	--aieo-form-tone: var(--wp--preset--color--danger, light-dark(#b91c1c, #f87171));
	--aieo-form-tone-text: var(--aieo-form-tone);
}

.aieo-form--panel.is-tone-neutral {
	--aieo-form-tone: var(--wp--preset--color--muted, light-dark(#525252, #a3a3a3));
	--aieo-form-tone-text: var(--aieo-form-tone);
}

/* A toned form's button: the family's accent with its on-accent words; a semantic tone's, its text shade with the page's ground. */
.aieo-form--panel[class*="is-style-accent-"] {
	--aieo-form-button: var(--wp--preset--color--accent);
	--aieo-form-button-hover: color-mix(in srgb, var(--wp--preset--color--accent) 85%, #000000);
	--aieo-form-button-ink: var(--wp--preset--color--on-accent);
}

.aieo-form--panel:is(.is-tone-success, .is-tone-warning, .is-tone-danger, .is-tone-neutral) {
	--aieo-form-button: var(--aieo-form-tone-text);
	--aieo-form-button-hover: color-mix(in srgb, var(--aieo-form-tone-text) 85%, #000000);
	--aieo-form-button-ink: var(--wp--preset--color--bg);
}