/*
 * GravityStack Plugin Theming — SureForms section
 * ================================================
 *
 * Makes every SureForms form on a GravitySite wear the active theme's tokens,
 * with the Style tab overridden (Copy-to-Site Decision 129). The property
 * sweep this implements is *The form fields* under *Element styling
 * obligations* in `gravitysite-design-system-standards.md`; the rules in plain
 * words are section 4 of `gravitysite-form-standards.md`.
 *
 * LAST CONFIRMED AGAINST: SureForms 2.12.9 with SureForms Pro (Business)
 * 2.12.9, on WordPress 7.1.3. Read 2026-10-22 from the dev site's own copies
 * of frontend.min.css, common.min.css, form.min.css, and Pro's
 * custom-styles.min.css, and from a rendered form's per-form <style> block.
 * After a SureForms update, re-read those four files against the list below
 * before anything else. If forms show SureForms' own look again (a navy
 * button in Arial), a name below has changed or a rule now out-ranks this one.
 *
 * SUREFORMS VARIABLES THIS FILE RELIES ON
 *
 *   Colour scheme:  --srfm-color-scheme-primary, -text-on-primary, -text;
 *                   --srfm-quill-editor-color
 *   Fields:         --srfm-color-input-label, -description, -placeholder,
 *                   -text, -prefix, -background, -background-hover,
 *                   -background-disabled, -border, -border-hover,
 *                   -border-disabled, -border-focus-glow, -selected;
 *                   --srfm-color-multi-choice-svg;
 *                   --srfm-field-box-shadow-normal, -focus;
 *                   --srfm-field-border-width-top, -right, -bottom, -left;
 *                   --srfm-field-border-radius-top, -right, -bottom, -left;
 *                   --srfm-input-field-border-radius, -padding, -font-size,
 *                   -line-height, -font-weight; --srfm-input-height;
 *                   --srfm-expandable-menu-background
 *   Spacing:        --srfm-input-field-margin-top, -margin-bottom;
 *                   --srfm-row-gap-between-blocks
 *   Dropdowns:      --srfm-dropdown-font-size, -font-weight,
 *                   -input-background-hover, -option-background-hover,
 *                   -option-background-selected, -option-selected-icon,
 *                   -option-text-color, -option-selected-text,
 *                   -badge-background, -badge-background-hover,
 *                   -menu-border-color, -placeholder-color, -icon-color,
 *                   -icon-disabled
 *   Labels, help:   --srfm-label-font-size, -line-height, -font-weight;
 *                   --srfm-checkbox-label-font-size, -line-height;
 *                   --srfm-checkbox-description-font-size, -line-height;
 *                   --srfm-address-label-font-size, -line-height;
 *                   --srfm-address-description-font-size, -line-height;
 *                   --srfm-description-font-size, -line-height, -font-weight
 *   Errors:         --srfm-error-color, -color-border, -color-border-glow,
 *                   -font-size, -font-weight, -line-height
 *   Buttons:        --srfm-btn-padding, -font-size, -font-weight,
 *                   -line-height, -border-radius, -color-hover,
 *                   -color-disabled;
 *                   --srfm-button-padding-top, -right, -bottom, -left;
 *                   --srfm-button-border-radius-top, -right, -bottom, -left;
 *                   --srfm-button-border-width-top, -right, -bottom, -left;
 *                   --srfm-button-border-color, -border-hover-color,
 *                   -background-color-normal, -background-color-hover,
 *                   -background-gradient-normal, -background-gradient-hover,
 *                   -text-color-normal, -text-color-hover
 *   Multi-step:     --srfm-page-break-next-btn-bg-normal, -bg-hover,
 *                   -color-normal, -color-hover, -border-color-normal,
 *                   -border-color-hover;
 *                   --srfm-page-break-back-btn-bg-normal, -bg-hover,
 *                   -color-normal, -color-hover, -border-color-normal,
 *                   -border-color-hover, -text-color, -background
 *   Form panel:     --srfm-bg-color, --srfm-bg-image, --srfm-bg-gradient,
 *                   --srfm-bg-overlay-color, -overlay-image,
 *                   -overlay-gradient, -overlay-opacity;
 *                   --srfm-form-padding-top, -right, -bottom, -left;
 *                   --srfm-form-border-radius-top, -right, -bottom, -left
 *
 * WHAT IT READS FROM THE THEME, AND NOTHING ELSE
 *
 * Role and token custom properties only, never a hex value, so one file
 * serves every GravitySite. The guards (`includes/guards.php`) refuse to load
 * this file on a theme missing any of them.
 *
 *   Palette roles:  gravity-cta, gravity-cta-label, gravity-link,
 *                   gravity-text, gravity-text-muted, gravity-surface,
 *                   gravity-field-border, gravity-focus
 *   Custom channel: color.error-9, color.error-11 (the fleet status red,
 *                   which is a primitive and never a role, by *Status
 *                   colour*), rounded.sm, weight.normal, weight.strong
 *   Presets:        font size text-2, spacing 20 and 30
 *   Theme bridge:   --c-theming-* (`includes/theme-bridge.php`): the theme's
 *                   body type role and its primary button, read from
 *                   theme.json at request time, because theme.json emits
 *                   them as rules rather than properties.
 *
 * The small type role (help text and error messages, call D) emits no token:
 * `design-to-theme-json` writes nothing for `small`. This file reads font size
 * `text-2`, the step the patterns plugin already uses for small text.
 *
 * Every form sits on its own light panel (Decision 126, item 6), so every
 * colour here is the light-surface one. A form placed directly on the dark
 * band owes an inverse field border first, which `gravity-field-border` does
 * not have. Nothing here styles around that.
 *
 * TWO PARTS
 *
 *   1. The token mapping: SureForms' own variables pointed at role tokens.
 *   2. The workarounds: direct rules, only where SureForms exposes no
 *      variable. Each says what SureForms does instead and why it loses.
 *
 * SPECIFICITY
 *
 * SureForms writes each form's Style tab choices as variables on
 * `.srfm-form-container-{id}-{hash}` in a <style> block inside the page body,
 * which prints after every stylesheet in the head, and Pro's presets set them
 * on `.srfm-form-container.srfm-preset-*`. The mapping's selector,
 * `body .srfm-form-container[class]`, out-ranks both on specificity, so it
 * wins wherever it prints. The attribute selector is always true; it is there
 * only for the weight. Each workaround out-ranks the one SureForms rule it
 * replaces, and names it. No `!important` anywhere: Pro's own `!important`
 * rules all read a variable, so the mapping reaches them.
 */


/* ==========================================================================
   Part 1. The token mapping
   ========================================================================== */

body .srfm-form-container[class] {

	/* Colour scheme. SureForms derives most of its other colours from these. */
	--srfm-color-scheme-primary: var(--wp--preset--color--gravity-cta);
	--srfm-color-scheme-text-on-primary: var(--wp--preset--color--gravity-cta-label);
	--srfm-color-scheme-text: var(--wp--preset--color--gravity-text);
	--srfm-quill-editor-color: var(--wp--preset--color--gravity-cta);

	/*
	 * Fields. The edge is the role made for it, at 3:1 on every light surface
	 * the panel can take. No fill: the field takes the panel's own surface
	 * (Decision 129, item 3). No hover change (call B). SureForms' focus glow
	 * goes; the ring in part 2 replaces it (item 5).
	 */
	--srfm-color-input-label: var(--wp--preset--color--gravity-text);
	--srfm-color-input-description: var(--wp--preset--color--gravity-text-muted);
	--srfm-color-input-placeholder: var(--wp--preset--color--gravity-text-muted);
	--srfm-color-input-text: var(--wp--preset--color--gravity-text);
	--srfm-color-input-prefix: var(--wp--preset--color--gravity-text-muted);
	--srfm-color-input-background: transparent;
	--srfm-color-input-background-hover: transparent;
	--srfm-color-input-border: var(--wp--preset--color--gravity-field-border);
	--srfm-color-input-border-hover: var(--wp--preset--color--gravity-field-border);
	--srfm-color-input-border-focus-glow: transparent;
	--srfm-field-box-shadow-normal: none;
	--srfm-field-box-shadow-focus: none;

	/*
	 * States the sweep does not rule keep SureForms' own formula, fed by the
	 * role instead of the Style tab's hex: disabled fields, a chosen
	 * multiple-choice card, and its icon.
	 */
	--srfm-color-input-background-disabled: hsl(from var(--wp--preset--color--gravity-text) h s l / 0.07);
	--srfm-color-input-border-disabled: hsl(from var(--wp--preset--color--gravity-text) h s l / 0.15);
	--srfm-color-input-selected: hsl(from var(--wp--preset--color--gravity-cta) h s l / 0.1);
	--srfm-color-multi-choice-svg: hsl(from var(--wp--preset--color--gravity-text) h s l / 0.7);

	/* Field shape. 1px at rest (call A), the theme's small corner, 44px tall. */
	--srfm-field-border-width-top: 1px;
	--srfm-field-border-width-right: 1px;
	--srfm-field-border-width-bottom: 1px;
	--srfm-field-border-width-left: 1px;
	--srfm-field-border-radius-top: var(--wp--custom--rounded--sm);
	--srfm-field-border-radius-right: var(--wp--custom--rounded--sm);
	--srfm-field-border-radius-bottom: var(--wp--custom--rounded--sm);
	--srfm-field-border-radius-left: var(--wp--custom--rounded--sm);
	--srfm-input-field-border-radius: var(--wp--custom--rounded--sm);
	/* 44px is the SC 2.5.5 exceedance in ops-accessibility-standards.md; it reads a target-size token once GR9-T26 adds one. */
	--srfm-input-height: 44px;
	/* spacing.30 across. Height is fixed, so a single-line field needs no vertical padding; long text adds it in part 2 (call B). */
	--srfm-input-field-padding: 0 var(--wp--preset--spacing--30);

	/*
	 * Space between fields (Decision 129, item 10): spacing.20 from a label to
	 * its field and spacing.30 from a field to the next label, so each label
	 * reads as belonging to the field below it. The field's own margins are
	 * SureForms' space above and below it, so the top carries the label gap and
	 * the bottom is zero, and the row gap carries the rest. The space held for an
	 * error message is released in part 2. Names read from the starter site's
	 * computed styles, SureForms 2.12.9, 2026-10-25.
	 */
	--srfm-input-field-margin-top: var(--wp--preset--spacing--20);
	--srfm-input-field-margin-bottom: 0px;
	--srfm-row-gap-between-blocks: var(--wp--preset--spacing--30);

	/* What she types: the body type role. */
	--srfm-input-field-font-size: var(--c-theming-body-font-size);
	--srfm-input-field-line-height: var(--c-theming-body-line-height);
	--srfm-input-field-font-weight: var(--wp--custom--weight--normal);
	--srfm-dropdown-font-size: var(--c-theming-body-font-size);
	--srfm-dropdown-font-weight: var(--wp--custom--weight--normal);

	/* Dropdowns. The arrow is the text colour; the open menu sits on the surface; its states keep SureForms' formulas on the text role. */
	--srfm-dropdown-icon-color: var(--wp--preset--color--gravity-text);
	--srfm-dropdown-icon-disabled: hsl(from var(--wp--preset--color--gravity-text) h s l / 0.25);
	--srfm-dropdown-placeholder-color: var(--wp--preset--color--gravity-text-muted);
	--srfm-dropdown-input-background-hover: transparent;
	--srfm-dropdown-option-text-color: hsl(from var(--wp--preset--color--gravity-text) h s l / 0.8);
	--srfm-dropdown-option-selected-text: var(--wp--preset--color--gravity-text);
	--srfm-dropdown-option-selected-icon: hsl(from var(--wp--preset--color--gravity-text) h s l / 0.65);
	--srfm-dropdown-option-background-hover: hsl(from var(--wp--preset--color--gravity-text) h s l / 0.1);
	--srfm-dropdown-option-background-selected: hsl(from var(--wp--preset--color--gravity-text) h s l / 0.05);
	--srfm-dropdown-badge-background: hsl(from var(--wp--preset--color--gravity-text) h s l / 0.05);
	--srfm-dropdown-badge-background-hover: hsl(from var(--wp--preset--color--gravity-text) h s l / 0.1);
	--srfm-dropdown-menu-border-color: hsl(from var(--wp--preset--color--gravity-text) h s l / 0.1);
	--srfm-expandable-menu-background: var(--wp--preset--color--gravity-surface);

	/* Labels: the body type role at weight 600 (Decision 129, item 4). */
	--srfm-label-font-size: var(--c-theming-body-font-size);
	--srfm-label-line-height: var(--c-theming-body-line-height);
	--srfm-label-font-weight: var(--wp--custom--weight--strong);
	--srfm-checkbox-label-font-size: var(--c-theming-body-font-size);
	--srfm-checkbox-label-line-height: var(--c-theming-body-line-height);
	--srfm-address-label-font-size: var(--c-theming-body-font-size);
	--srfm-address-label-line-height: var(--c-theming-body-line-height);

	/* Help text: the small step, in the muted text colour (call D). */
	--srfm-description-font-size: var(--wp--preset--font-size--text-2);
	--srfm-description-line-height: var(--c-theming-body-line-height);
	--srfm-description-font-weight: var(--wp--custom--weight--normal);
	--srfm-checkbox-description-font-size: var(--wp--preset--font-size--text-2);
	--srfm-checkbox-description-line-height: var(--c-theming-body-line-height);
	--srfm-address-description-font-size: var(--wp--preset--font-size--text-2);
	--srfm-address-description-line-height: var(--c-theming-body-line-height);

	/*
	 * Errors: the fleet status red, the edge at step 9 and the message at
	 * step 11 (Decision 129, item 5). Change the error red here and nowhere
	 * else. SureForms also uses its line height as the fixed height of the
	 * space under each field, so it is a length, not a ratio. Weight 400:
	 * SureForms asks for 500, which no fleet family ships, so it was already
	 * rendering at 400.
	 */
	--srfm-error-color: var(--wp--custom--color--error-11);
	--srfm-error-color-border: var(--wp--custom--color--error-9);
	--srfm-error-color-border-glow: transparent;
	--srfm-error-font-size: var(--wp--preset--font-size--text-2);
	--srfm-error-font-weight: var(--wp--custom--weight--normal);
	--srfm-error-line-height: calc(var(--c-theming-body-line-height) * var(--wp--preset--font-size--text-2));

	/* The submit, and Next on a multi-step form: the site's primary button exactly (Decision 129, item 6). */
	--srfm-btn-padding: var(--c-theming-button-padding-top) var(--c-theming-button-padding-right) var(--c-theming-button-padding-bottom) var(--c-theming-button-padding-left);
	--srfm-btn-font-size: var(--c-theming-button-font-size);
	--srfm-btn-font-weight: var(--c-theming-button-font-weight);
	--srfm-btn-line-height: var(--c-theming-button-line-height);
	--srfm-btn-border-radius: var(--c-theming-button-radius);
	--srfm-btn-color-hover: var(--c-theming-button-background-hover);
	--srfm-btn-color-disabled: hsl(from var(--c-theming-button-background) h s l / 0.25);
	--srfm-button-padding-top: var(--c-theming-button-padding-top);
	--srfm-button-padding-right: var(--c-theming-button-padding-right);
	--srfm-button-padding-bottom: var(--c-theming-button-padding-bottom);
	--srfm-button-padding-left: var(--c-theming-button-padding-left);
	--srfm-button-border-radius-top: var(--c-theming-button-radius);
	--srfm-button-border-radius-right: var(--c-theming-button-radius);
	--srfm-button-border-radius-bottom: var(--c-theming-button-radius);
	--srfm-button-border-radius-left: var(--c-theming-button-radius);
	/* No border: the theme's button has none (The button, `border.width` deliberately inherited at zero). */
	--srfm-button-border-width-top: 0;
	--srfm-button-border-width-right: 0;
	--srfm-button-border-width-bottom: 0;
	--srfm-button-border-width-left: 0;
	--srfm-button-border-color: var(--c-theming-button-background);
	--srfm-button-border-hover-color: var(--c-theming-button-background-hover);
	--srfm-button-background-color-normal: var(--c-theming-button-background);
	--srfm-button-background-color-hover: var(--c-theming-button-background-hover);
	/* A gradient picked in the Style tab resolves to the solid fill. */
	--srfm-button-background-gradient-normal: linear-gradient(var(--c-theming-button-background), var(--c-theming-button-background));
	--srfm-button-background-gradient-hover: linear-gradient(var(--c-theming-button-background-hover), var(--c-theming-button-background-hover));
	--srfm-button-text-color-normal: var(--c-theming-button-label);
	--srfm-button-text-color-hover: var(--c-theming-button-label-hover);
	--srfm-page-break-next-btn-bg-normal: var(--c-theming-button-background);
	--srfm-page-break-next-btn-bg-hover: var(--c-theming-button-background-hover);
	--srfm-page-break-next-btn-color-normal: var(--c-theming-button-label);
	--srfm-page-break-next-btn-color-hover: var(--c-theming-button-label-hover);
	--srfm-page-break-next-btn-border-color-normal: var(--c-theming-button-background);
	--srfm-page-break-next-btn-border-color-hover: var(--c-theming-button-background-hover);

	/* Back on a multi-step form: an outline in the action colour, quieter than Next (call F). Its 2px edge is in part 2. */
	--srfm-page-break-back-btn-bg-normal: transparent;
	--srfm-page-break-back-btn-bg-hover: transparent;
	--srfm-page-break-back-btn-background: transparent;
	--srfm-page-break-back-btn-color-normal: var(--wp--preset--color--gravity-link);
	--srfm-page-break-back-btn-text-color: var(--wp--preset--color--gravity-link);
	--srfm-page-break-back-btn-color-hover: var(--c-theming-button-background-hover);
	--srfm-page-break-back-btn-border-color-normal: var(--wp--preset--color--gravity-cta);
	--srfm-page-break-back-btn-border-color-hover: var(--c-theming-button-background-hover);

	/* The form's own panel: none. The pattern around the form supplies the light panel (Decision 126, item 6), so the Style tab's background, padding, and corner change nothing. */
	--srfm-bg-color: transparent;
	--srfm-bg-image: none;
	--srfm-bg-gradient: none;
	--srfm-bg-overlay-color: transparent;
	--srfm-bg-overlay-image: none;
	--srfm-bg-overlay-gradient: none;
	--srfm-bg-overlay-opacity: 0;
	--srfm-form-padding-top: 0;
	--srfm-form-padding-right: 0;
	--srfm-form-padding-bottom: 0;
	--srfm-form-padding-left: 0;
	--srfm-form-border-radius-top: 0;
	--srfm-form-border-radius-right: 0;
	--srfm-form-border-radius-bottom: 0;
	--srfm-form-border-radius-left: 0;
}

/* A field that needs fixing takes the firmer 2px edge (call A). Pro reads these through `!important` rules, so they are set where the error is. */
body .srfm-form-container .srfm-form .srfm-block.srfm-error,
body .srfm-form-container .srfm-form .srfm-block.srfm-valid-email-error {
	--srfm-field-border-width-top: 2px;
	--srfm-field-border-width-right: 2px;
	--srfm-field-border-width-bottom: 2px;
	--srfm-field-border-width-left: 2px;
}

/* Back's 2px edge. Pro sizes both multi-step buttons' edges from one shared set of variables, which the mapping sets to zero for Next. */
body .srfm-form-container .srfm-page-break-buttons .srfm-pre-btn {
	--srfm-button-border-width-top: 2px;
	--srfm-button-border-width-right: 2px;
	--srfm-button-border-width-bottom: 2px;
	--srfm-button-border-width-left: 2px;
}


/* ==========================================================================
   Part 2. The workarounds
   ========================================================================== */

/*
 * The button's typeface, letter spacing, case, edge, and shadow. SureForms
 * exposes no variable for the family, and its button carries no WordPress
 * button class, so without this it falls back to the browser's Arial
 * (Decision 129, item 1). Out-ranks `.srfm-form-container .srfm-button` in
 * common.min.css, whose 1px border in the primary colour would otherwise
 * survive where Pro's variable-driven border does not apply.
 */
body .srfm-form-container .srfm-button,
body .srfm-form-container .srfm-nxt-btn,
body .srfm-form-container .srfm-pre-btn {
	font-family: var(--c-theming-button-font-family);
	letter-spacing: var(--c-theming-button-letter-spacing, normal);
	text-transform: var(--c-theming-button-text-transform, none);
	box-shadow: none;
}

body .srfm-form-container .srfm-button {
	border-width: 0;
}

/*
 * The submit sits left under the fields (Decision 129, item 6). SureForms
 * centres it with an inline `text-align: center` on its `.wp-block-button`
 * wrapper, which no stylesheet out-ranks without `!important`. As a flex
 * container the wrapper places the button by `justify-content` instead, and
 * the inline alignment then only centres the label inside a full-width button.
 *
 * The button goes full width when its own wrapper is narrower than about
 * 480px (item 7). The query sits on `.srfm-submit-container`, SureForms' own
 * wrapper round the submit, which holds no dropdown or picker and is no
 * WordPress layout wrapper, per constraints 2 and 4 of the container-query
 * rules in `gravitysite-css-standards.md`. 480px is confirmed at render.
 */
body .srfm-form-container .srfm-submit-container {
	container-type: inline-size;
}

body .srfm-form-container .srfm-submit-container .wp-block-button {
	display: flex;
	justify-content: flex-start;
}

@container (width < 480px) {
	body .srfm-form-container .srfm-submit-container .srfm-submit-button {
		inline-size: 100%;
	}
}

/*
 * The focus ring: the pinned `gravity-focus` outline at the button's width and
 * offset, on every field and every button (Decision 129, item 5; call E). An
 * outline rather than SureForms' box-shadow glow, so it survives
 * forced-colours mode. SureForms sets `outline: 0` on its fields at
 * `.srfm-form-container .srfm-form .srfm-block:not(.srfm-number-block)
 * .srfm-input-common` in frontend.min.css; each selector here out-ranks the
 * SureForms rule for the same element.
 *
 * Checkboxes and multiple-choice options hide the real input and draw a
 * stand-in beside it, so the ring goes on the stand-in when the hidden input
 * has focus. A dropdown's focus sits on an input inside its control, so the
 * ring goes on the control.
 */
body .srfm-form-container .srfm-form .srfm-block .srfm-input-common:focus-visible,
body .srfm-form-container .srfm-form .srfm-block .srfm-dropdown-common-wrap .srfm-dropdown-common .ts-control:focus-within,
body .srfm-form-container .srfm-form .srfm-checkbox-block .srfm-input-checkbox:focus-visible + .srfm-cbx > span:first-child,
body .srfm-form-container .srfm-form .srfm-checkbox-block .srfm-input-gdpr:focus-visible + .srfm-cbx > span:first-child,
body .srfm-form-container .srfm-form .srfm-gdpr-block .srfm-input-checkbox:focus-visible + .srfm-cbx > span:first-child,
body .srfm-form-container .srfm-form .srfm-gdpr-block .srfm-input-gdpr:focus-visible + .srfm-cbx > span:first-child,
body .srfm-form-container .srfm-form .srfm-multi-choice-block .srfm-block-wrap .srfm-multi-choice-single input:focus-visible + .srfm-block-content-wrap,
body .srfm-form-container .srfm-button:focus-visible,
body .srfm-form-container .srfm-nxt-btn:focus-visible,
body .srfm-form-container .srfm-pre-btn:focus-visible {
	outline: var(--c-theming-focus-width) solid var(--wp--preset--color--gravity-focus);
	outline-offset: var(--c-theming-focus-offset);
}

/* The checkbox tick in the CTA label colour (call C). SureForms draws it with an inline SVG and exposes no variable for its stroke. */
body .srfm-form-container .srfm-checkbox-block .srfm-cbx > span:first-child svg *,
body .srfm-form-container .srfm-gdpr-block .srfm-cbx > span:first-child svg * {
	stroke: var(--wp--preset--color--gravity-cta-label);
}

/* The required asterisk in the label's own colour; the fleet keeps red for errors (Decision 129, item 4). SureForms writes `color: #dc2626` on `.srfm-form-container .srfm-form .srfm-required` in form.min.css, with no variable. */
body .srfm-form-container .srfm-form .srfm-required {
	color: inherit;
}

/* The firmer error edge where Pro is not active: SureForms' own field rule writes a 1px border with no width variable. */
body .srfm-form-container .srfm-form .srfm-block.srfm-error .srfm-block-wrap .srfm-input-common,
body .srfm-form-container .srfm-form .srfm-block.srfm-valid-email-error .srfm-block-wrap .srfm-input-common,
body .srfm-form-container .srfm-form .srfm-block.srfm-error .srfm-dropdown-common-wrap .srfm-dropdown-common .ts-control {
	border-width: 2px;
}

/*
 * An icon beside every field error message, in the message colour, so colour
 * is never the only signal (SC 1.4.1; Decision 129, item 5). SureForms' field
 * messages carry none. The glyph is Lucide's circle-alert, the fleet's icon
 * library. Scoped to `.srfm-error-wrap` so the form-level banner, which has
 * its own icon, is untouched.
 */
body .srfm-form-container .srfm-error-wrap .srfm-error-message::before {
	content: "";
	display: inline-block;
	inline-size: 1em;
	block-size: 1em;
	margin-inline-end: var(--wp--preset--spacing--20);
	vertical-align: -0.125em;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' x2='12' y1='8' y2='12'/%3E%3Cline x1='12' x2='12.01' y1='16' y2='16'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' x2='12' y1='8' y2='12'/%3E%3Cline x1='12' x2='12.01' y1='16' y2='16'/%3E%3C/svg%3E") center / contain no-repeat;
}

@media (forced-colors: active) {
	body .srfm-form-container .srfm-error-wrap .srfm-error-message::before {
		forced-color-adjust: none;
		background-color: CanvasText;
	}
}

/*
 * The form-level banner: the message SureForms prints above or below the whole
 * form when a submit fails, not a field's own message. SureForms draws it in
 * hex with no variable, in `.srfm-form-container .srfm-form
 * p:not([hidden]).srfm-error-message` in form.min.css (a #fef2f2 fill, a #fecaca
 * edge, #111827 text), and colours its icon #dc2626 on the `.srfm-icon` rule
 * under it, so the mapping above cannot reach it. It takes the field error's
 * treatment, so one form speaks about an error in one voice (call H): the 2px
 * error edge, the message colour, no tint, and the icon in the message colour.
 * Only the banner carries `srfm-common-error-message`, which tells it from a
 * field's message. It keeps SureForms' own icon, which is why the `::before`
 * above is scoped away from it. Padding, gap, and width stay SureForms' own.
 */
body .srfm-form-container[class] .srfm-form p:not([hidden]).srfm-common-error-message {
	border: 2px solid var(--srfm-error-color-border);
	border-radius: var(--wp--custom--rounded--sm);
	background-color: transparent;
	color: var(--srfm-error-color);
	font-size: var(--srfm-error-font-size);
	font-weight: var(--srfm-error-font-weight);
	line-height: var(--srfm-error-line-height);
}

body .srfm-form-container[class] .srfm-form p:not([hidden]).srfm-common-error-message .srfm-icon {
	color: inherit;
}

/*
 * The space SureForms holds under every field for an error message. It sets
 * `height: var(--srfm-error-line-height)` on `.srfm-form-container .srfm-block
 * .srfm-error-wrap`, so a field with no error still takes one line of empty
 * space, 24px on GravityStack, and no spacing variable reaches it. Auto height
 * gives the space back, and an error then pushes the fields below it down when
 * it shows (Decision 129, item 10). Checked on the starter site's contact form,
 * where an error grew its field by 24px with nothing overlapping. SureForms'
 * own rules also put a long-text field's character counter in this wrapper;
 * not checked on a form that has one.
 */
body .srfm-form-container[class] .srfm-error-wrap {
	height: auto;
}

/* Long text: spacing.20 top and bottom (call B). Out-ranks the shared field rule that sets `--srfm-input-field-padding` on every field. */
body .srfm-form-container .srfm-form .srfm-textarea-block .srfm-block-wrap .srfm-input-textarea {
	padding-block: var(--wp--preset--spacing--20);
}

/* Rich-text long text: the theme's small corner and no white toolbar fill. SureForms writes `border-radius: 6px` and `background-color: #fff` on these in frontend.min.css, with no variable. */
body .srfm-form-container .srfm-form .srfm-textarea-block.srfm-richtext .srfm-block-wrap {
	border-radius: var(--wp--custom--rounded--sm);
}

body .srfm-form-container .srfm-form .srfm-textarea-block.srfm-richtext .quill-editor-container .ql-toolbar {
	background-color: transparent;
}