/*
 * pm-consult-form — the consultation form (WO-38, frame 90:4211's right
 * panel; the fields and validation carry ticket 42's AC 1–7) and the
 * success panel that replaces it (WO-42, frame 98:1060).
 *
 * Compiled to assets/css/components/consult-form.css by
 * src/build-tokens.mjs, which substitutes the breakpoint markers (a comment
 * holding `@bp <name>`) with the pixel value from tokens/tokens.json. Never
 * type a breakpoint width here.
 *
 * Every colour is a --pm-color-* token. No hex value and no literal
 * breakpoint width may appear in this file. Values the token file does not
 * hold (the 1.5px border, the 140px textarea, the 11px footnote, the
 * success text's 400px measure) are typed with a comment citing the
 * extract key they come from.
 *
 * The markup is written by poortman-core's ConsultForm (called by the
 * pm-contact widget); this stylesheet styles only.
 */

.pm-consult-form {
	display: flex;
	flex-direction: column;
}

/* The measured fields gap, 48 (38-contact.json#measured.right_panel.fields
   .gap) — between fields, and between the last field and the actions row.
   Margins, not a form-wide gap, so the footnote can sit closer to the
   buttons than the fields sit to each other. */
.pm-consult-form__field + .pm-consult-form__field,
.pm-consult-form__actions {
	margin-top: var(--pm-space-12);
}

.pm-consult-form__field {
	display: flex;
	flex-direction: column;
	gap: var(--pm-space-2); /* label to input — not measured; developer judgement (MISTAKES.md §C7) */
}

/*
 * The label: Caption Meta 12px uppercase in body-text
 * (38-contact.json#measured.right_panel.fields.label). The required marker
 * is a span in the error role colour, aria-hidden — `required` and
 * `aria-required` on the control are the real signal (WO-38 AC 6).
 */
.pm-consult-form__label {
	font-size: var(--pm-font-size-caption);
	font-weight: var(--pm-font-weight-400);
	line-height: var(--pm-leading-normal);
	letter-spacing: var(--pm-tracking-caption);
	text-transform: uppercase;
	color: var(--pm-color-body-text);
}

.pm-consult-form__required {
	color: var(--pm-color-error);
}

/*
 * The input: no box — a 1.5px bottom border only, padding 8 0, Roboto Light
 * 16 (38-contact.json#measured.right_panel.fields.input). The border is the
 * input-border role (the texte palette colour) while empty and ink once
 * filled; :placeholder-shown is what distinguishes them, so every control
 * ships a placeholder.
 */
.pm-consult-form__input {
	box-sizing: border-box;
	width: 100%;
	padding: var(--pm-space-2) 0;
	border: 0;
	border-bottom: 1.5px solid var(--pm-color-input-border);
	border-radius: 0;
	background-color: transparent;
	font-family: var(--pm-font-family-base), system-ui, sans-serif;
	font-size: 1rem;
	font-weight: var(--pm-font-weight-300);
	line-height: var(--pm-leading-body);
	color: var(--pm-color-ink);
}

.pm-consult-form__input:not(:placeholder-shown) {
	border-bottom-color: var(--pm-color-ink);
}

/* The frame specifies no placeholder colour (WO-38 AC 4) — body-text is the
   developer judgement, the label's own muted tone (MISTAKES.md §C12).
   opacity 1: the browser's faded default would be lighter than the frame. */
.pm-consult-form__input::placeholder {
	opacity: 1;
	color: var(--pm-color-body-text);
}

/* The brief: 140px high (38-contact.json#measured.right_panel.fields.list —
   "textarea, 140px"), typed like the button's 48px reference height. */
textarea.pm-consult-form__input {
	min-height: 140px;
	resize: vertical;
}

/*
 * Focus (WO-38 AC 6, developer judgement — no focus state is drawn,
 * MISTAKES.md §C12): the bottom border turns the accent and thickens to 2px;
 * the padding gives back the half pixel so nothing shifts.
 */
.pm-consult-form__input:focus-visible {
	outline: none;
	border-bottom: 2px solid var(--pm-color-accent);
	padding-bottom: calc(var(--pm-space-2) - 0.5px);
}

/*
 * The consent row (ticket 42 AC 3 — added below the brief; the frame lacks
 * it): checkbox then label, in the label style per the extract's
 * contradiction note. The link to the privacy policy keeps the site's link
 * colour so it stays findable on the Blush Linen panel.
 */
.pm-consult-form__consent {
	display: flex;
	align-items: flex-start;
	gap: var(--pm-space-2);
}

.pm-consult-form__checkbox {
	flex: none;
	margin: 0;
	accent-color: var(--pm-color-ink);
}

.pm-consult-form__consent .pm-consult-form__label {
	text-transform: none;
	letter-spacing: 0;
	line-height: var(--pm-leading-body);
}

.pm-consult-form__consent .pm-consult-form__label a {
	color: var(--pm-color-accent);
}

/*
 * The error message (ticket 42 AC 5): a role=alert paragraph under the
 * field, filled by consult-form.js from the widget's controls. No error
 * state is designed (MISTAKES.md §C12) — the caption size in the error role
 * colour is the developer judgement.
 */
.pm-consult-form__error {
	margin: 0;
	font-size: var(--pm-font-size-caption);
	line-height: var(--pm-leading-body);
	color: var(--pm-color-error);
}

/*
 * The actions row (38-contact.json#measured.right_panel.buttons.layout —
 * space-between). The primary is the form's FIRST submit button in DOM
 * order, so Enter in a field submits the consultation request (WO-38 AC 5);
 * the soft button is placed second and moved left with flex order.
 */
.pm-consult-form__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--pm-space-4);
}

.pm-consult-form__actions .pm-button--soft {
	order: -1;
}

/*
 * The footnote (38-contact.json#measured.right_panel.footnote): 11px in
 * body-text, the leading star in the error colour. No token holds 11px (the
 * caption is 12) — typed, citing the extract.
 */
.pm-consult-form__footnote {
	margin-top: var(--pm-space-7);
	font-size: 11px;
	line-height: var(--pm-leading-body);
	color: var(--pm-color-body-text);
}

/*
 * The honeypot (WO-42 AC 6): visually hidden with the clip technique —
 * never display:none alone, which a naive bot's filler skips. The input
 * itself carries tabindex="-1" and autocomplete="off".
 */
.pm-consult-form__hp {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/*
 * The form-level error (WO-42 AC 5): the whole submission was rejected —
 * spam, an unreachable network — or the server answered something the
 * field errors cannot express. Same treatment as the field errors: the
 * caption size in the error role colour (no error state is designed,
 * MISTAKES.md §C12). Rendered hidden between the fields and the actions;
 * consult-form.js fills and unhides it.
 */
.pm-consult-form__form-error {
	margin: 0;
	font-size: var(--pm-font-size-caption);
	line-height: var(--pm-leading-body);
	color: var(--pm-color-error);
}

/*
 * The success panel (WO-42 AC 5, 44-success.json#measured): column
 * centred, gap 28, filling the form panel's box — the panel is a column
 * flex itself, so flex:1 stretches the panel over the space the form
 * gave up. The panel's own Blush Linen background and 48px padding are
 * contact.css's; nothing is restated here.
 */
.pm-consult-form__success {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--pm-space-7); /* 28 — 44-success.json#measured.panel.layout */
	text-align: center;
	flex: 1 1 auto;
}

/* The hidden attribute must beat the display:flex above while the panel
   waits for a successful submit. */
.pm-consult-form__success[hidden] {
	display: none;
}

/*
 * The icon: a 72px Terra Sienna circle (the accent role) with the white
 * check inside. Radius 36 is half the circle — 50% is the same circle
 * without inventing a token (44-success.json#measured.icon).
 */
.pm-consult-form__success-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: var(--pm-space-18); /* 72px */
	height: var(--pm-space-18);
	border-radius: 50%;
	background-color: var(--pm-color-accent);
}

/* The 32px check (44-success.json#measured.icon.glyph). Specificity above
   Elementor's .elementor img reset (MISTAKES.md §C15). */
.pm-consult-form .pm-consult-form__success-icon img {
	display: block;
	width: var(--pm-space-8); /* 32px */
	height: auto;
}

/*
 * The title: the frame's 22px is off-scale (44-success.json#contradictions
 * [0]) — built with the H3 Subtitle token (24, Light, -1), the recorded
 * delta. Colour #1F1F1F is undocumented — built as ink.
 */
.pm-consult-form__success-title {
	margin: 0;
	font-size: var(--pm-font-size-h3);
	font-weight: var(--pm-font-weight-300);
	line-height: var(--pm-leading-tight);
	letter-spacing: var(--pm-tracking-h3);
	color: var(--pm-color-ink);
}

/*
 * The text: the frame's 15px Inter is the design system's stale Inter
 * (44-success.json#contradictions[0]) — built as Body (16 / 1.6), the
 * recorded delta. Colour #666 is undocumented — built as body-text. The
 * 400px measure is the extract's, typed (no token holds 400).
 */
.pm-consult-form__success-text {
	margin: 0;
	max-width: 400px;
	font-size: 1rem;
	font-weight: var(--pm-font-weight-300);
	line-height: var(--pm-leading-body);
	color: var(--pm-color-body-text);
}