/**
 * WSX Forms appearance system.
 *
 * EVERY selector is scoped beneath .wsx-form-wrap. This stylesheet never styles
 * a bare input, select, textarea, button, label, or form, so it cannot reach an
 * Elementor form, WPForms, WooCommerce, the comment form, or a search box.
 *
 * TYPOGRAPHY: font-family is inherited. No font is loaded, registered, or
 * requested. The active theme owns the typeface.
 *
 * Design is driven by custom properties plus data attributes on the wrapper, so
 * one stylesheet covers every preset, mode, and field style combination. A theme
 * can override any token without fighting specificity.
 */

/* ============================================================
   BASE TOKENS  (light)
   ============================================================ */
.wsx-form-wrap {
	--wsxf-primary: #FF7B0B;
	--wsxf-primary-hover: #4595EC;
	--wsxf-on-primary: #192A3D;

	--wsxf-heading: #192A3D;
	--wsxf-text: #3A4F66;
	--wsxf-muted: #6B7075;   /* 5.0:1 on white. The brand #808084 is 3.93:1 and fails AA. */

	--wsxf-surface: transparent;
	--wsxf-surface-alt: #FAFBFC;
	--wsxf-input-bg: #FFFFFF;

	--wsxf-border: #8C8F94;
	--wsxf-border-hover: #646970;
	--wsxf-focus: #4595EC;

	--wsxf-error: #C70204;
	--wsxf-error-bg: #FDF0F0;
	--wsxf-success: #1F7A3D;
	--wsxf-success-bg: #F0F8F2;
	--wsxf-info-bg: #F5F0FF;
	--wsxf-warn-bg: #F9F8F2;
	--wsxf-warn-text: #7A4A00;

	--wsxf-radius: 8px;
	--wsxf-field-height: 44px;
	--wsxf-field-padding: 11px 14px;
	--wsxf-gap: 18px;
	--wsxf-shadow: none;
	--wsxf-transition: 160ms ease;
	--wsxf-border-width: 1px;
	--wsxf-label-size: 0.9375rem;
	--wsxf-card-padding: 0;

	font-family: inherit;
	color: var(--wsxf-text);
	max-width: 46rem;
}

/* ---------- Radius: field, surface, and button are INDEPENDENT ---------- */

/* The generic radius axis is retired. Each surface has its own token,
   seeded from the shipped default and overridden by its own attribute. */
.wsx-form-wrap { --wsxf-field-radius: 8px; --wsxf-surface-radius: 12px; --wsxf-button-radius: 8px; }

.wsx-form-wrap[data-wsxf-field-radius="none"]   { --wsxf-field-radius: 0; }
.wsx-form-wrap[data-wsxf-field-radius="small"]  { --wsxf-field-radius: 4px; }
.wsx-form-wrap[data-wsxf-field-radius="medium"] { --wsxf-field-radius: 8px; }
.wsx-form-wrap[data-wsxf-field-radius="large"]  { --wsxf-field-radius: 14px; }

.wsx-form-wrap[data-wsxf-surface-radius="none"]   { --wsxf-surface-radius: 0; }
.wsx-form-wrap[data-wsxf-surface-radius="small"]  { --wsxf-surface-radius: 6px; }
.wsx-form-wrap[data-wsxf-surface-radius="medium"] { --wsxf-surface-radius: 12px; }
.wsx-form-wrap[data-wsxf-surface-radius="large"]  { --wsxf-surface-radius: 20px; }

.wsx-form-wrap[data-wsxf-button-radius="none"]   { --wsxf-button-radius: 0; }
.wsx-form-wrap[data-wsxf-button-radius="small"]  { --wsxf-button-radius: 4px; }
.wsx-form-wrap[data-wsxf-button-radius="medium"] { --wsxf-button-radius: 8px; }
.wsx-form-wrap[data-wsxf-button-radius="pill"]   { --wsxf-button-radius: 999px; }

/* An underline field has NO box, so a radius on it is meaningless. This is
   forced rather than left to configuration, which is what produced the
   "rounded outline on a single-line field" report. */
.wsx-form-wrap[data-wsxf-field-style="underline"] { --wsxf-field-radius: 0; }

/* ---------- Elevation ---------- */
.wsx-form-wrap[data-wsxf-elevation="none"]   { --wsxf-shadow: none; }
.wsx-form-wrap[data-wsxf-elevation="subtle"] { --wsxf-shadow: 0 1px 2px rgba(15, 25, 40, .05), 0 2px 8px rgba(15, 25, 40, .05); }
.wsx-form-wrap[data-wsxf-elevation="medium"] { --wsxf-shadow: 0 1px 2px rgba(15, 25, 40, .06), 0 10px 28px rgba(15, 25, 40, .10); }
.wsx-form-wrap[data-wsxf-elevation="strong"] { --wsxf-shadow: 0 2px 4px rgba(15, 25, 40, .08), 0 20px 48px rgba(15, 25, 40, .18); }

/* ---------- Density ---------- */
.wsx-form-wrap[data-wsxf-density="compact"] {
	--wsxf-gap: 12px;
	--wsxf-field-height: 40px;
	--wsxf-field-padding: 8px 12px;
}

/* ---------- Motion ---------- */
.wsx-form-wrap[data-wsxf-motion="none"] { --wsxf-transition: 0s; }

/* ============================================================
   PRESETS  (light baselines)
   ============================================================ */
.wsx-form-wrap[data-wsxf-preset="native"] {
	--wsxf-border: #8C8F94;
	--wsxf-primary: #2C3338;
	--wsxf-primary-hover: #1D2327;
	--wsxf-on-primary: #FFFFFF;
	--wsxf-heading: inherit;
	--wsxf-text: inherit;
	--wsxf-surface: transparent;
	--wsxf-shadow: none;
}

.wsx-form-wrap[data-wsxf-preset="webseox-clean"] {
	--wsxf-surface: #FFFFFF;
	--wsxf-input-bg: #FFFFFF;
}

.wsx-form-wrap[data-wsxf-preset="webseox-soft"] {
	--wsxf-surface: #FAFBFC;
	--wsxf-input-bg: #F7F7F7;
	--wsxf-shadow: 0 1px 2px rgba(25, 42, 61, .06), 0 8px 24px rgba(25, 42, 61, .07);
	--wsxf-card-padding: 28px;
}

.wsx-form-wrap[data-wsxf-preset="minimal-line"] {
	--wsxf-surface: transparent;
	--wsxf-input-bg: transparent;
	--wsxf-gap: 14px;
}

.wsx-form-wrap[data-wsxf-preset="floating-modern"] {
	--wsxf-surface: #FFFFFF;
	--wsxf-input-bg: #FFFFFF;
	--wsxf-shadow: 0 1px 2px rgba(25, 42, 61, .06), 0 10px 30px rgba(25, 42, 61, .08);
	--wsxf-card-padding: 28px;
	--wsxf-field-height: 56px;
}

.wsx-form-wrap[data-wsxf-preset="dark-contrast"] {
	/* Redesigned in 0.1.7. Navy, not black. Input surface is a distinctly
	   lighter blue-grey so a field reads as a field before it is focused.
	   Every value here remains overridable through the validated token system. */
	--wsxf-surface: #192A3D;
	--wsxf-surface-alt: #223449;
	--wsxf-input-bg: #21344A;
	--wsxf-heading: #F2F6FA;          /* 14.6:1 on the surface */
	--wsxf-text: #E4EBF2;             /* 12.4:1 */
	--wsxf-muted: #A9BACB;            /* 7.2:1  */
	--wsxf-border: #7590AC;      /* 3.83:1 on the input surface — passes the 3:1 non-text minimum */
	--wsxf-border-hover: #A3B8CE;
	--wsxf-focus: #4595EC;
	--wsxf-error: #FF9193;
	--wsxf-error-bg: #3B2126;
	--wsxf-success: #7FD9A0;
	--wsxf-success-bg: #16301F;
	--wsxf-info-bg: #22304A;
	--wsxf-warn-bg: #3A3220;
	--wsxf-warn-text: #F3D9A6;
	--wsxf-card-padding: 30px;
	color-scheme: dark;
}

/* ============================================================
   DARK MODE
   Explicit dark, and auto that follows the browser preference.
   Auto is CSS-only: no script reads the operating-system setting.
   ============================================================ */
.wsx-form-wrap[data-wsxf-mode="dark"] {
	--wsxf-surface: #192A3D;
	--wsxf-surface-alt: #22364d;
	--wsxf-input-bg: #22364d;
	--wsxf-heading: #FFFFFF;
	--wsxf-text: #E1E8ED;
	--wsxf-muted: #A9B6C4;
	--wsxf-border: #56697d;
	--wsxf-border-hover: #8fa3b8;
	--wsxf-error: #FF8A8B;
	--wsxf-error-bg: #3a1f22;
	--wsxf-success: #7BD69B;
	--wsxf-success-bg: #17301f;
	--wsxf-info-bg: #23304a;
	--wsxf-warn-bg: #3a3220;
	--wsxf-warn-text: #F3D9A6;
	color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
	.wsx-form-wrap[data-wsxf-mode="auto"] {
		--wsxf-surface: #192A3D;
		--wsxf-surface-alt: #22364d;
		--wsxf-input-bg: #22364d;
		--wsxf-heading: #FFFFFF;
		--wsxf-text: #E1E8ED;
		--wsxf-muted: #A9B6C4;
		--wsxf-border: #56697d;
		--wsxf-border-hover: #8fa3b8;
		--wsxf-error: #FF8A8B;
		--wsxf-error-bg: #3a1f22;
		--wsxf-success: #7BD69B;
		--wsxf-success-bg: #17301f;
		--wsxf-info-bg: #23304a;
		--wsxf-warn-bg: #3a3220;
		--wsxf-warn-text: #F3D9A6;
		color-scheme: dark;
	}
}

/* ============================================================
   SURFACE
   ============================================================ */
.wsx-form-wrap[data-wsxf-surface="card"] {
	background: var(--wsxf-surface);
	padding: var(--wsxf-card-padding, 28px);
	border-radius: var(--wsxf-surface-radius);
	box-shadow: var(--wsxf-shadow);
}
.wsx-form-wrap[data-wsxf-surface="card"][data-wsxf-preset="webseox-soft"] {
	border: 1px solid rgba(25, 42, 61, .08);
}

@media (max-width: 480px) {
	.wsx-form-wrap[data-wsxf-surface="card"] { padding: 18px; }
}

/* ============================================================
   LAYOUT
   ============================================================ */
.wsx-form-wrap .wsx-form { display: flex; flex-direction: column; gap: var(--wsxf-gap); }

.wsx-form-wrap .wsx-form-grid {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: var(--wsxf-gap);
}
.wsx-form-wrap .wsx-form-grid > .wsx-field { grid-column: span 12; }
.wsx-form-wrap .wsx-form-grid > .wsx-width-half { grid-column: span 6; }
.wsx-form-wrap .wsx-form-grid > .wsx-width-third { grid-column: span 4; }
.wsx-form-wrap .wsx-form-grid > .wsx-width-two-thirds { grid-column: span 8; }
.wsx-form-wrap .wsx-form-grid > .wsx-form-actions,
.wsx-form-wrap .wsx-form-grid > .wsx-form-errors { grid-column: span 12; }

/* Every width collapses on a narrow screen. */
@media (max-width: 640px) {
	.wsx-form-wrap .wsx-form-grid > .wsx-field { grid-column: span 12; }
}

.wsx-form-wrap .wsx-field { min-width: 0; }

/* ============================================================
   LABELS AND HELP
   ============================================================ */
.wsx-form-wrap .wsx-label {
	display: block;
	margin-bottom: 6px;
	font-size: var(--wsxf-label-size);
	font-weight: 600;
	line-height: 1.4;
	color: var(--wsxf-heading);
	overflow-wrap: break-word;
}
.wsx-form-wrap .wsx-required { color: var(--wsxf-error); margin-left: 2px; }
.wsx-form-wrap .wsx-help {
	display: block;
	margin-top: 6px;
	font-size: .8125rem;
	line-height: 1.5;
	color: var(--wsxf-muted);
	overflow-wrap: break-word;
}

/* ============================================================
   CONTROLS  —  shared
   ============================================================ */
.wsx-form-wrap .wsx-input {
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	min-height: var(--wsxf-field-height);
	padding: var(--wsxf-field-padding);
	font-family: inherit;
	font-size: 1rem;
	line-height: 1.5;
	color: var(--wsxf-text);
	background-color: var(--wsxf-input-bg);
	border: var(--wsxf-border-width) solid var(--wsxf-border);
	border-radius: var(--wsxf-field-radius);
	transition: border-color var(--wsxf-transition), box-shadow var(--wsxf-transition), background-color var(--wsxf-transition);
}
.wsx-form-wrap textarea.wsx-input { min-height: 132px; resize: vertical; }

.wsx-form-wrap .wsx-input::placeholder { color: var(--wsxf-muted); opacity: 1; }

.wsx-form-wrap .wsx-input:hover:not(:disabled) { border-color: var(--wsxf-border-hover); }

.wsx-form-wrap .wsx-input:focus,
.wsx-form-wrap .wsx-input:focus-visible {
	outline: 2px solid var(--wsxf-focus);
	outline-offset: 1px;
	border-color: var(--wsxf-focus);
}

.wsx-form-wrap .wsx-input:disabled {
	background-color: var(--wsxf-surface-alt);
	color: var(--wsxf-muted);
	cursor: not-allowed;
	opacity: 1;
}

/* Select arrow, drawn with a gradient so no image is requested and it stays
   visible in both modes. */
.wsx-form-wrap select.wsx-input {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 40px;
	background-image:
		linear-gradient(45deg, transparent 50%, currentColor 50%),
		linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position: calc(100% - 20px) center, calc(100% - 14px) center;
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
}
.wsx-form-wrap select.wsx-input::-ms-expand { display: none; }

/* ============================================================
   FIELD STYLE — outline (default), underline, filled, floating
   ============================================================ */
.wsx-form-wrap[data-wsxf-field-style="underline"] .wsx-input {
	border-width: 0 0 2px 0;
	border-radius: 0;
	padding-left: 0;
	padding-right: 0;
	background-color: transparent;
}
.wsx-form-wrap[data-wsxf-field-style="underline"] select.wsx-input {
	padding-right: 26px;
	background-position: calc(100% - 6px) center, calc(100% - 0px) center;
}
/* The base rule sets an outline on BOTH :focus and :focus-visible, so
   overriding only :focus left a rounded box around a single-line field. Both
   are overridden here, and the keyboard indicator is expressed through the
   underline itself — thicker, recoloured, and paired with a text-colour change
   so it is never signalled by colour alone. */
.wsx-form-wrap[data-wsxf-field-style="underline"] .wsx-input:focus,
.wsx-form-wrap[data-wsxf-field-style="underline"] .wsx-input:focus-visible {
	outline: none;
	border-radius: 0;
	border-bottom-color: var(--wsxf-focus);
	box-shadow: 0 2px 0 0 var(--wsxf-focus);
}
.wsx-form-wrap[data-wsxf-field-style="underline"] .wsx-input:focus-visible {
	box-shadow: 0 3px 0 0 var(--wsxf-focus);
}
/* No box border of any kind on an underline field. */
.wsx-form-wrap[data-wsxf-field-style="underline"] .wsx-input {
	border-top: 0;
	border-left: 0;
	border-right: 0;
	border-radius: 0;
}

.wsx-form-wrap[data-wsxf-field-style="filled"] .wsx-input {
	background-color: var(--wsxf-surface-alt);
	border-color: transparent;
	border-bottom-color: var(--wsxf-border);
	border-bottom-width: 2px;
}
.wsx-form-wrap[data-wsxf-field-style="filled"] .wsx-input:hover:not(:disabled) {
	border-bottom-color: var(--wsxf-border-hover);
}
.wsx-form-wrap[data-wsxf-field-style="filled"] .wsx-input:focus {
	border-bottom-color: var(--wsxf-focus);
	background-color: var(--wsxf-input-bg);
}

/* ---------- Label placement ----------
   The control shell holds the input FIRST and the label second, so
   `input + label` matches. 0.1.5 emitted the label first and the selector
   never fired, which is why the label sat on top of the visitor's text. */
.wsx-form-wrap .wsx-control-shell {
	position: relative;
	display: block;
}

/* ABOVE (default): the label is a normal block that precedes the control
   visually, achieved with order rather than absolute positioning, so nothing
   can overlap. */
.wsx-form-wrap[data-wsxf-label-style="above"] .wsx-control-shell {
	display: flex;
	flex-direction: column;
}
.wsx-form-wrap[data-wsxf-label-style="above"] .wsx-control-shell > .wsx-label {
	order: -1;
	position: static;
	margin-bottom: 6px;
	background: none;
	padding: 0;
	transform: none;
	pointer-events: auto;
}

/* FLOATING: only for text-like controls. The real <label> is always present
   and associated; the placeholder is never the accessible name. */
.wsx-form-wrap[data-wsxf-label-style="floating"] .wsx-field-text > .wsx-control-shell > .wsx-label,
.wsx-form-wrap[data-wsxf-label-style="floating"] .wsx-field-email > .wsx-control-shell > .wsx-label,
.wsx-form-wrap[data-wsxf-label-style="floating"] .wsx-field-url > .wsx-control-shell > .wsx-label,
.wsx-form-wrap[data-wsxf-label-style="floating"] .wsx-field-tel > .wsx-control-shell > .wsx-label,
.wsx-form-wrap[data-wsxf-label-style="floating"] .wsx-field-number > .wsx-control-shell > .wsx-label,
.wsx-form-wrap[data-wsxf-label-style="floating"] .wsx-field-textarea > .wsx-control-shell > .wsx-label,
.wsx-form-wrap[data-wsxf-label-style="floating"] .wsx-field-select > .wsx-control-shell > .wsx-label {
	position: absolute;
	top: 0;
	left: 11px;
	margin: 0;
	padding: 0 5px;
	max-width: calc(100% - 24px);
	font-size: 1rem;
	font-weight: 400;
	line-height: 1;
	color: var(--wsxf-muted);
	background: var(--wsxf-input-bg);
	pointer-events: none;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	transform: translateY(calc(var(--wsxf-field-height) / 2 - .5em));
	transform-origin: left center;
	transition: transform var(--wsxf-transition), color var(--wsxf-transition), font-size var(--wsxf-transition);
}

/* Extra top padding so typed text starts BELOW the floated label rather than
   behind it. */
.wsx-form-wrap[data-wsxf-label-style="floating"] .wsx-field-text .wsx-input,
.wsx-form-wrap[data-wsxf-label-style="floating"] .wsx-field-email .wsx-input,
.wsx-form-wrap[data-wsxf-label-style="floating"] .wsx-field-url .wsx-input,
.wsx-form-wrap[data-wsxf-label-style="floating"] .wsx-field-tel .wsx-input,
.wsx-form-wrap[data-wsxf-label-style="floating"] .wsx-field-number .wsx-input,
.wsx-form-wrap[data-wsxf-label-style="floating"] .wsx-field-select .wsx-input {
	padding-top: 20px;
	padding-bottom: 6px;
}
.wsx-form-wrap[data-wsxf-label-style="floating"] .wsx-field-textarea .wsx-input {
	padding-top: 24px;
}

/* Floated state: focus, filled, autofill, or a server-redisplayed value. */
/* FLOATED STATE — a TRUE notch for an outlined field.
   0.1.6 used translateY(7px), which parked the label near the top INSIDE the
   control: half floated, half sitting in the placeholder area, with the border
   still running behind it. The label now sits centred ON the top border, and a
   background chip the width of the label interrupts only that section of it. */
.wsx-form-wrap[data-wsxf-label-style="floating"] .wsx-input:focus + .wsx-label,
.wsx-form-wrap[data-wsxf-label-style="floating"] .wsx-input:not(:placeholder-shown) + .wsx-label,
.wsx-form-wrap[data-wsxf-label-style="floating"] .wsx-input:-webkit-autofill + .wsx-label,
.wsx-form-wrap[data-wsxf-label-style="floating"] .wsx-select + .wsx-label {
	top: 0;
	transform: translateY(-50%) scale(.82);
	color: var(--wsxf-heading);
	z-index: 2;
}

/* The chip that hides the border beneath the label. It is the LABEL'S OWN
   background, so it is exactly as wide as the text plus its padding — the rest
   of the border stays visible, which is what makes it read as a notch rather
   than a gap. */
.wsx-form-wrap[data-wsxf-field-style="outline"][data-wsxf-label-style="floating"] .wsx-control-shell > .wsx-label {
	background: var(--wsxf-input-bg);
	padding-inline: 5px;
}

/* A FILLED field has no border to notch, so the label insets instead and typed
   text starts beneath it. No chip, because a chip on a filled surface would
   read as a patch. */
.wsx-form-wrap[data-wsxf-field-style="filled"][data-wsxf-label-style="floating"] .wsx-control-shell > .wsx-label {
	background: transparent;
	padding-inline: 0;
	left: 14px;
}
.wsx-form-wrap[data-wsxf-field-style="filled"][data-wsxf-label-style="floating"] .wsx-input:focus + .wsx-label,
.wsx-form-wrap[data-wsxf-field-style="filled"][data-wsxf-label-style="floating"] .wsx-input:not(:placeholder-shown) + .wsx-label,
.wsx-form-wrap[data-wsxf-field-style="filled"][data-wsxf-label-style="floating"] .wsx-input:-webkit-autofill + .wsx-label,
.wsx-form-wrap[data-wsxf-field-style="filled"][data-wsxf-label-style="floating"] .wsx-select + .wsx-label {
	top: 0;
	transform: translateY(8px) scale(.8);
	z-index: 2;
}

/* While the label RESTS inside the control, any real placeholder text is
   hidden — otherwise the two overlap. It reappears once the label floats, where
   it is genuinely useful as a format hint. The real <label> is always present
   and associated; the placeholder is never the accessible name. */
.wsx-form-wrap[data-wsxf-label-style="floating"] .wsx-input:placeholder-shown:not(:focus)::placeholder {
	color: transparent;
	-webkit-text-fill-color: transparent;
}
.wsx-form-wrap[data-wsxf-label-style="floating"] .wsx-input:focus::placeholder {
	color: var(--wsxf-muted);
	-webkit-text-fill-color: var(--wsxf-muted);
}

/* A textarea's label anchors to the top edge, never the vertical centre. */
.wsx-form-wrap[data-wsxf-label-style="floating"] .wsx-field-textarea > .wsx-control-shell > .wsx-label {
	transform: translateY(14px);
}
.wsx-form-wrap[data-wsxf-label-style="floating"] .wsx-field-textarea .wsx-input:focus + .wsx-label,
.wsx-form-wrap[data-wsxf-label-style="floating"] .wsx-field-textarea .wsx-input:not(:placeholder-shown) + .wsx-label {
	transform: translateY(-50%) scale(.82);
}

/* A select has no empty-text state to detect, so its label is PERMANENTLY
   floated rather than resting inside the control. */
.wsx-form-wrap[data-wsxf-label-style="floating"] .wsx-field-select > .wsx-control-shell > .wsx-label {
	transform: translateY(-50%) scale(.82);
	color: var(--wsxf-heading);
	z-index: 2;
}

/* Underline has no box for a label to sit inside, so labels stay above. */
.wsx-form-wrap[data-wsxf-field-style="underline"] .wsx-control-shell {
	display: flex;
	flex-direction: column;
}
.wsx-form-wrap[data-wsxf-field-style="underline"] .wsx-control-shell > .wsx-label {
	order: -1;
	position: static;
	transform: none;
	background: none;
	padding: 0;
	margin-bottom: 6px;
	font-size: var(--wsxf-label-size);
	font-weight: 600;
	color: var(--wsxf-heading);
}

/* Types that must NEVER float, whatever the label style. */
.wsx-form-wrap .wsx-field-radio > .wsx-label,
.wsx-form-wrap .wsx-field-checkbox_group > .wsx-label,
.wsx-form-wrap .wsx-field-checkbox > .wsx-label,
.wsx-form-wrap .wsx-field-consent > .wsx-label,
.wsx-form-wrap .wsx-field-range > .wsx-label {
	position: static;
	transform: none;
	background: none;
	padding: 0;
	pointer-events: auto;
}

/* ============================================================
   CHOICE CONTROLS
   Never forced into text-input visuals.
   ============================================================ */
.wsx-form-wrap .wsx-check,
.wsx-form-wrap .wsx-choice {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-bottom: 8px;
	font-size: .9375rem;
	line-height: 1.55;
	color: var(--wsxf-text);
	cursor: pointer;
	overflow-wrap: break-word;
}
.wsx-form-wrap .wsx-check input,
.wsx-form-wrap .wsx-choice input {
	flex: 0 0 auto;
	margin-top: 3px;
	width: 18px;
	height: 18px;
	accent-color: var(--wsxf-primary);
}
.wsx-form-wrap .wsx-check input:focus-visible,
.wsx-form-wrap .wsx-choice input:focus-visible {
	outline: 2px solid var(--wsxf-focus);
	outline-offset: 2px;
}

/* ============================================================
   SUBMIT
   ============================================================ */
.wsx-form-wrap .wsx-form-actions { margin-top: 4px; }

.wsx-form-wrap .wsx-form-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	min-height: var(--wsxf-field-height);
	padding: 12px 28px;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.2;
	/* NAVY on orange, about 5.6:1. White on this orange is about 2.6:1 and
	   would fail, so it is never used. */
	color: var(--wsxf-on-primary);
	background-color: var(--wsxf-primary);
	border: 2px solid transparent;
	border-radius: var(--wsxf-button-radius);
	cursor: pointer;
	transition: background-color var(--wsxf-transition), transform var(--wsxf-transition), box-shadow var(--wsxf-transition);
}
.wsx-form-wrap .wsx-form-submit:hover:not(:disabled) { background-color: var(--wsxf-primary-hover); }
.wsx-form-wrap .wsx-form-submit:active:not(:disabled) { transform: translateY(1px); }
.wsx-form-wrap .wsx-form-submit:focus-visible { outline: 3px solid var(--wsxf-focus); outline-offset: 2px; }
.wsx-form-wrap .wsx-form-submit:disabled,
.wsx-form-wrap .wsx-form-submit[aria-disabled="true"] { opacity: .65; cursor: not-allowed; }

.wsx-form-wrap[data-wsxf-button-width="full"] .wsx-form-submit { width: 100%; }
@media (max-width: 480px) {
	.wsx-form-wrap .wsx-form-submit { width: 100%; }
}

/* Submitting spinner, drawn in CSS. */
.wsx-form-wrap .wsx-spinner {
	display: none;
	width: 16px;
	height: 16px;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: wsxf-spin .6s linear infinite;
}
.wsx-form-wrap .wsx-form-submit[aria-busy="true"] .wsx-spinner,
.wsx-form-wrap .wsx-form[aria-busy="true"] .wsx-spinner { display: inline-block; }
@keyframes wsxf-spin { to { transform: rotate(360deg); } }

/* ============================================================
   VALIDATION AND RESULT STATES
   Never colour alone: every state carries a marker and text.
   ============================================================ */
.wsx-form-wrap .wsx-field-error .wsx-input {
	border-color: var(--wsxf-error);
	box-shadow: inset 0 0 0 1px var(--wsxf-error);
}
.wsx-form-wrap[data-wsxf-field-style="underline"] .wsx-field-error .wsx-input,
.wsx-form-wrap[data-wsxf-field-style="filled"] .wsx-field-error .wsx-input {
	box-shadow: 0 2px 0 0 var(--wsxf-error);
}
.wsx-form-wrap .wsx-field-error .wsx-label { color: var(--wsxf-error); }

.wsx-form-wrap .wsx-error {
	display: flex;
	align-items: flex-start;
	gap: 6px;
	margin-top: 6px;
	font-size: .8125rem;
	font-weight: 600;
	line-height: 1.5;
	color: var(--wsxf-error);
	overflow-wrap: break-word;
}
.wsx-form-wrap .wsx-error::before {
	content: "!";
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 15px;
	height: 15px;
	margin-top: 2px;
	font-size: 11px;
	font-weight: 700;
	color: var(--wsxf-input-bg);
	background: var(--wsxf-error);
	border-radius: 50%;
}

.wsx-form-wrap .wsx-form-errors,
.wsx-form-wrap .wsx-form-success,
.wsx-form-wrap .wsx-form-notice {
	padding: 14px 16px;
	border-radius: var(--wsxf-radius);
	border-left: 4px solid;
	font-size: .9375rem;
	line-height: 1.55;
}
.wsx-form-wrap .wsx-form-errors {
	background: var(--wsxf-error-bg);
	border-left-color: var(--wsxf-error);
	color: var(--wsxf-error);
}
.wsx-form-wrap .wsx-form-errors ul { margin: 8px 0 0; padding-left: 20px; }
.wsx-form-wrap .wsx-form-errors a { color: inherit; font-weight: 600; }

.wsx-form-wrap .wsx-form-success {
	background: var(--wsxf-success-bg);
	border-left-color: var(--wsxf-success);
	color: var(--wsxf-success);
	font-weight: 600;
}
.wsx-form-wrap .wsx-form-success::before {
	content: "\2713";
	margin-right: 8px;
	font-weight: 700;
}

.wsx-form-wrap .wsx-form-notice { background: var(--wsxf-info-bg); border-left-color: var(--wsxf-focus); color: var(--wsxf-text); }
.wsx-form-wrap .wsx-form-unavailable {
	padding: 14px 16px;
	border-radius: var(--wsxf-radius);
	border-left: 4px solid var(--wsxf-warn-text);
	background: var(--wsxf-warn-bg);
	color: var(--wsxf-warn-text);
	font-size: .9375rem;
}

/* Anti-spam widget states. */
.wsx-form-wrap .wsx-turnstile { min-height: 65px; }

/* 0.1.8: verification and runtime status text. Additive only: it reuses the
   existing tokens, and an empty status line takes no space. */
.wsx-form-wrap .wsx-form-verify__status,
.wsx-form-wrap .wsx-form-runtime-status {
	margin: 6px 0 0;
	font-size: .8125rem;
	color: var(--wsxf-muted);
}
.wsx-form-wrap .wsx-form-runtime-status:empty { margin: 0; }
.wsx-form-wrap .wsx-form-verify__status.is-error,
.wsx-form-wrap .wsx-form-runtime-status.is-error {
	font-weight: 600;
	color: var(--wsxf-error);
}
.wsx-form-wrap .wsx-turnstile-error {
	margin-top: 8px;
	font-size: .8125rem;
	font-weight: 600;
	color: var(--wsxf-error);
}

/* ============================================================
   MOTION
   ============================================================ */
.wsx-form-wrap[data-wsxf-motion="subtle"][data-wsxf-surface="card"]:focus-within {
	box-shadow: 0 2px 4px rgba(25, 42, 61, .08), 0 14px 36px rgba(25, 42, 61, .10);
}
.wsx-form-wrap[data-wsxf-motion="subtle"] .wsx-form-success,
.wsx-form-wrap[data-wsxf-motion="subtle"] .wsx-form-errors {
	animation: wsxf-enter 220ms ease both;
}
@keyframes wsxf-enter {
	from { opacity: 0; transform: translateY(-4px); }
	to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.wsx-form-wrap,
	.wsx-form-wrap * {
		transition-duration: 0s !important;
		animation-duration: 0s !important;
		animation-iteration-count: 1 !important;
	}
	.wsx-form-wrap .wsx-form-submit:active:not(:disabled) { transform: none; }
	.wsx-form-wrap[data-wsxf-field-style="floating"] .wsx-label { transition: none; }
	.wsx-form-wrap .wsx-spinner { animation: none; border-right-color: currentColor; opacity: .5; }
}

/* ============================================================
   FORCED COLORS
   ============================================================ */
@media (forced-colors: active) {
	.wsx-form-wrap .wsx-input { border: 1px solid ButtonBorder; }
	.wsx-form-wrap .wsx-input:focus { outline: 2px solid Highlight; }
	.wsx-form-wrap .wsx-form-submit { border: 2px solid ButtonBorder; forced-color-adjust: none; background: ButtonFace; color: ButtonText; }
	.wsx-form-wrap .wsx-field-error .wsx-input { border: 2px dashed ButtonBorder; }
	.wsx-form-wrap .wsx-error::before { forced-color-adjust: none; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 380px) {
	.wsx-form-wrap { --wsxf-field-padding: 9px 11px; }
	.wsx-form-wrap[data-wsxf-surface="card"] { padding: 14px; }
}


/* ============================================================
   TEXT COLOUR IN EVERY BROWSER STATE
   Dark mode showed dark text WHILE TYPING and light text after blur, because
   only the resting colour was set. A theme rule, the UA default, or Chrome's
   autofill styling filled the gap. Every state is now stated explicitly, and
   the colour is NEVER transitioned, so it cannot animate between two values.
   ============================================================ */
.wsx-form-wrap .wsx-input,
.wsx-form-wrap .wsx-input:hover,
.wsx-form-wrap .wsx-input:focus,
.wsx-form-wrap .wsx-input:active,
.wsx-form-wrap .wsx-input:focus-visible,
.wsx-form-wrap textarea.wsx-input,
.wsx-form-wrap select.wsx-input,
.wsx-form-wrap input.wsx-input {
	color: var(--wsxf-text);
	-webkit-text-fill-color: var(--wsxf-text);
	caret-color: var(--wsxf-text);
	transition-property: border-color, box-shadow, background-color;
}
.wsx-form-wrap .wsx-input::placeholder {
	color: var(--wsxf-muted);
	-webkit-text-fill-color: var(--wsxf-muted);
	opacity: 1;
}
.wsx-form-wrap select.wsx-input option {
	color: var(--wsxf-text);
	background-color: var(--wsxf-input-bg);
}
.wsx-form-wrap .wsx-input:disabled,
.wsx-form-wrap .wsx-input[readonly] {
	color: var(--wsxf-muted);
	-webkit-text-fill-color: var(--wsxf-muted);
}
/* Chrome paints autofill with its own background and text colour. The inset
   shadow repaints the surface and text-fill-color repaints the glyphs; there
   is no other way to reach it. */
.wsx-form-wrap .wsx-input:-webkit-autofill,
.wsx-form-wrap .wsx-input:-webkit-autofill:hover,
.wsx-form-wrap .wsx-input:-webkit-autofill:focus,
.wsx-form-wrap .wsx-input:-webkit-autofill:active {
	-webkit-text-fill-color: var(--wsxf-text);
	caret-color: var(--wsxf-text);
	-webkit-box-shadow: 0 0 0 1000px var(--wsxf-input-bg) inset;
	box-shadow: 0 0 0 1000px var(--wsxf-input-bg) inset;
	transition: background-color 6000000s 0s;
}
.wsx-form-wrap .wsx-range-output,
.wsx-form-wrap .wsx-legend,
.wsx-form-wrap .wsx-choice-label,
.wsx-form-wrap .wsx-consent-text {
	color: var(--wsxf-text);
	-webkit-text-fill-color: var(--wsxf-text);
}

/* ============================================================
   CHOICE TEXT VISIBILITY
   Consent wording was a bare <span> inheriting whatever the preset produced,
   so it disappeared on some surfaces. Every choice text node now has an
   explicit colour on every surface and mode.
   ============================================================ */
.wsx-form-wrap .wsx-choice-group,
.wsx-form-wrap .wsx-radio,
.wsx-form-wrap .wsx-checkbox-group {
	border: 0;
	margin: 0;
	padding: 0;
	min-width: 0;
}
.wsx-form-wrap .wsx-legend {
	display: block;
	padding: 0;
	margin-bottom: 6px;
	font-size: var(--wsxf-label-size);
	font-weight: 600;
	line-height: 1.4;
	color: var(--wsxf-heading);
	-webkit-text-fill-color: var(--wsxf-heading);
	overflow-wrap: break-word;
}
.wsx-form-wrap .wsx-choice-hint {
	margin: 0 0 8px;
	font-size: .8125rem;
	color: var(--wsxf-muted);
	-webkit-text-fill-color: var(--wsxf-muted);
}
.wsx-form-wrap .wsx-choice-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.wsx-form-wrap .wsx-choice,
.wsx-form-wrap .wsx-check,
.wsx-form-wrap .wsx-consent {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0;
	font-size: .9375rem;
	line-height: 1.55;
	cursor: pointer;
	overflow-wrap: anywhere;
}
.wsx-form-wrap .wsx-choice-control {
	flex: 0 0 auto;
	margin-top: 2px;
	width: 18px;
	height: 18px;
	accent-color: var(--wsxf-primary);
}
.wsx-form-wrap .wsx-choice-control:focus-visible {
	outline: 2px solid var(--wsxf-focus);
	outline-offset: 2px;
}
.wsx-form-wrap .wsx-choice-label,
.wsx-form-wrap .wsx-consent-text {
	display: block;
	min-width: 0;
	/* Never hidden by opacity, overflow, or an inherited transparent colour. */
	opacity: 1;
	visibility: visible;
	overflow: visible;
	overflow-wrap: anywhere;
}
.wsx-form-wrap .wsx-consent-text a,
.wsx-form-wrap .wsx-choice-label a {
	color: var(--wsxf-primary-hover);
	-webkit-text-fill-color: var(--wsxf-primary-hover);
	text-decoration: underline;
}
.wsx-form-wrap .wsx-field-error .wsx-consent-text,
.wsx-form-wrap .wsx-field-error .wsx-choice-label {
	/* An error must not make the wording disappear. */
	color: var(--wsxf-text);
	-webkit-text-fill-color: var(--wsxf-text);
}
.wsx-form-wrap .wsx-choice-control:disabled + .wsx-choice-label {
	color: var(--wsxf-muted);
	-webkit-text-fill-color: var(--wsxf-muted);
}

/* ============================================================
   CHOICE LAYOUT
   ============================================================ */
.wsx-form-wrap[data-wsxf-choice-layout="inline"] .wsx-choice-list {
	flex-direction: row;
	flex-wrap: wrap;
	gap: 10px 16px;
}
.wsx-form-wrap[data-wsxf-choice-layout="responsive-inline"] .wsx-choice-list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 10px;
}
@media (max-width: 480px) {
	.wsx-form-wrap[data-wsxf-choice-layout="inline"] .wsx-choice-list,
	.wsx-form-wrap[data-wsxf-choice-layout="responsive-inline"] .wsx-choice-list {
		display: flex;
		flex-direction: column;
	}
}

/* ============================================================
   CHOICE STYLE
   Selection is NEVER communicated by colour alone: the native control stays
   visible in every style, and the card/pill border weight changes too.
   ============================================================ */
.wsx-form-wrap[data-wsxf-choice-style="cards"] .wsx-choice {
	padding: 12px 14px;
	border: 1px solid var(--wsxf-border);
	border-radius: var(--wsxf-field-radius);
	background: var(--wsxf-input-bg);
	transition: border-color var(--wsxf-transition), box-shadow var(--wsxf-transition), background-color var(--wsxf-transition);
}
.wsx-form-wrap[data-wsxf-choice-style="cards"] .wsx-choice:hover {
	border-color: var(--wsxf-border-hover);
}
.wsx-form-wrap[data-wsxf-choice-style="cards"] .wsx-choice:has(.wsx-choice-control:checked) {
	border-color: var(--wsxf-primary);
	box-shadow: inset 0 0 0 1px var(--wsxf-primary);
}
.wsx-form-wrap[data-wsxf-choice-style="cards"] .wsx-choice:has(.wsx-choice-control:focus-visible) {
	outline: 2px solid var(--wsxf-focus);
	outline-offset: 2px;
}

.wsx-form-wrap[data-wsxf-choice-style="pills"] .wsx-choice-list {
	flex-direction: row;
	flex-wrap: wrap;
	gap: 8px;
}
.wsx-form-wrap[data-wsxf-choice-style="pills"] .wsx-choice {
	align-items: center;
	gap: 7px;
	padding: 7px 14px;
	border: 1px solid var(--wsxf-border);
	border-radius: 999px;
	background: var(--wsxf-input-bg);
	font-size: .875rem;
	transition: border-color var(--wsxf-transition), background-color var(--wsxf-transition);
}
.wsx-form-wrap[data-wsxf-choice-style="pills"] .wsx-choice-control {
	margin-top: 0;
	width: 15px;
	height: 15px;
}
.wsx-form-wrap[data-wsxf-choice-style="pills"] .wsx-choice:has(.wsx-choice-control:checked) {
	border-color: var(--wsxf-primary);
	box-shadow: inset 0 0 0 1px var(--wsxf-primary);
}
.wsx-form-wrap[data-wsxf-choice-style="pills"] .wsx-choice:has(.wsx-choice-control:focus-visible) {
	outline: 2px solid var(--wsxf-focus);
	outline-offset: 2px;
}

/* `:has()` is unsupported in a few older engines. Without it the card and pill
   SHAPES still render and the native checked control is still visible, so the
   selected state is never lost — only the border emphasis is. */

/* ============================================================
   RANGE SLIDER
   ============================================================ */
.wsx-form-wrap .wsx-range-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 4px;
}
.wsx-form-wrap .wsx-range-output {
	font-size: .9375rem;
	font-weight: 700;
	color: var(--wsxf-heading);
	-webkit-text-fill-color: var(--wsxf-heading);
}
.wsx-form-wrap .wsx-range-scale {
	display: flex;
	justify-content: space-between;
	margin-top: 4px;
	font-size: .75rem;
	color: var(--wsxf-muted);
}
.wsx-form-wrap input.wsx-range {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	min-height: 26px;
	padding: 0;
	background: transparent;
	border: 0;
	box-shadow: none;
	cursor: pointer;
}
.wsx-form-wrap input.wsx-range:focus { outline: none; }
.wsx-form-wrap input.wsx-range:focus-visible { outline: 2px solid var(--wsxf-focus); outline-offset: 4px; border-radius: 999px; }

.wsx-form-wrap input.wsx-range::-webkit-slider-runnable-track {
	height: 6px;
	border-radius: 999px;
	background: var(--wsxf-border);
}
.wsx-form-wrap input.wsx-range::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	margin-top: -7px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--wsxf-primary);
	border: 2px solid var(--wsxf-input-bg);
	box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
}
.wsx-form-wrap input.wsx-range::-moz-range-track {
	height: 6px;
	border-radius: 999px;
	background: var(--wsxf-border);
}
.wsx-form-wrap input.wsx-range::-moz-range-thumb {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--wsxf-primary);
	border: 2px solid var(--wsxf-input-bg);
}
.wsx-form-wrap input.wsx-range:disabled { opacity: .55; cursor: not-allowed; }


/* ============================================================
   INTERACTION EFFECTS
   Every effect is interaction-triggered, short, and bounded. None loops.
   Only opacity, transform, border-color, and box-shadow are animated — never a
   layout dimension — so nothing forces a reflow while the visitor types.
   ============================================================ */

/* ---- Focus Lift: the card rises by 2px maximum ---- */
.wsx-form-wrap[data-wsxf-effect="focus-lift"][data-wsxf-surface="card"] {
	transition: transform var(--wsxf-transition), box-shadow var(--wsxf-transition);
}
.wsx-form-wrap[data-wsxf-effect="focus-lift"][data-wsxf-surface="card"]:hover,
.wsx-form-wrap[data-wsxf-effect="focus-lift"][data-wsxf-surface="card"]:focus-within {
	transform: translateY(-2px);
	box-shadow: 0 4px 10px rgba(15, 25, 40, .08), 0 18px 40px rgba(15, 25, 40, .14);
}

/* ---- Accent Edge: a static brand edge that strengthens on focus ---- */
.wsx-form-wrap[data-wsxf-effect="accent-edge"] {
	position: relative;
}
.wsx-form-wrap[data-wsxf-effect="accent-edge"][data-wsxf-surface="card"]::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: 4px;
	border-radius: var(--wsxf-surface-radius) 0 0 var(--wsxf-surface-radius);
	background: linear-gradient(180deg, var(--wsxf-primary), var(--wsxf-primary-hover));
	opacity: .85;
	transition: opacity var(--wsxf-transition), width var(--wsxf-transition);
	pointer-events: none;
}
.wsx-form-wrap[data-wsxf-effect="accent-edge"][data-wsxf-surface="card"]:focus-within::before {
	opacity: 1;
	width: 5px;
}
/* Without a card there is nothing to edge, so the accent moves to the focused
   field instead of being silently dropped. */
.wsx-form-wrap[data-wsxf-effect="accent-edge"] .wsx-input:focus {
	border-color: var(--wsxf-primary);
	box-shadow: inset 3px 0 0 0 var(--wsxf-primary);
}

/* ---- Focus Glow: a restrained ring around the ACTIVE FIELD ----
   The field boundary keeps its own contrast; the glow sits outside it. */
.wsx-form-wrap[data-wsxf-effect="focus-glow"] .wsx-input:focus {
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--wsxf-focus) 22%, transparent);
}
@supports not (color: color-mix(in srgb, red 50%, blue)) {
	.wsx-form-wrap[data-wsxf-effect="focus-glow"] .wsx-input:focus {
		box-shadow: 0 0 0 4px rgba(69, 149, 236, .22);
	}
}
.wsx-form-wrap[data-wsxf-effect="focus-glow"][data-wsxf-surface="card"]:focus-within {
	box-shadow: var(--wsxf-shadow), 0 0 0 1px color-mix(in srgb, var(--wsxf-focus) 30%, transparent);
}

/* ---- Reduced motion neutralises every decorative effect ---- */
@media (prefers-reduced-motion: reduce) {
	.wsx-form-wrap[data-wsxf-effect="focus-lift"][data-wsxf-surface="card"]:hover,
	.wsx-form-wrap[data-wsxf-effect="focus-lift"][data-wsxf-surface="card"]:focus-within {
		transform: none;
	}
	.wsx-form-wrap[data-wsxf-effect="accent-edge"][data-wsxf-surface="card"]::before {
		transition: none;
	}
}


/* ============================================================
   BORDER TRACE
   Replaces the removed Bento Cards effect.

   A normal visible border ALWAYS exists — the trace is an accent that travels
   once along it, then stops. It never loops, never pulses, never rotates
   continuously, and never moves or resizes anything: only a pseudo-element's
   clip and opacity change, so layout is untouched and the compositor does the
   work. Nothing runs while the form is idle.
   ============================================================ */
.wsx-form-wrap[data-wsxf-effect="border-trace"][data-wsxf-surface="card"] {
	position: relative;
}
.wsx-form-wrap[data-wsxf-effect="border-trace"][data-wsxf-surface="card"]::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	padding: 2px;
	background: linear-gradient(90deg,
		var(--wsxf-primary) 0%,
		var(--wsxf-focus) 45%,
		transparent 70%);
	/* Paint only the ring, never the interior. */
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	mask-composite: exclude;
	opacity: 0;
	pointer-events: none;
	transition: opacity 220ms ease;
}
.wsx-form-wrap[data-wsxf-effect="border-trace"][data-wsxf-surface="card"]:hover::after,
.wsx-form-wrap[data-wsxf-effect="border-trace"][data-wsxf-surface="card"]:focus-within::after {
	opacity: 1;
	/* ONE pass. `forwards` holds the finished state; there is no iteration
	   count above 1 anywhere in this stylesheet except the submit spinner. */
	animation: wsxf-trace 700ms ease-out 1 forwards;
}
@keyframes wsxf-trace {
	from { clip-path: inset(0 100% 0 0); }
	to   { clip-path: inset(0 0 0 0); }
}

/* The active FIELD gets a matching, quieter emphasis, so the effect reads on a
   flat surface too rather than being silently dropped. */
.wsx-form-wrap[data-wsxf-effect="border-trace"] .wsx-input:focus {
	border-color: var(--wsxf-primary);
	box-shadow: inset 0 0 0 1px var(--wsxf-primary);
}

/* Reduced motion: the finished highlighted state, immediately and statically. */
@media (prefers-reduced-motion: reduce) {
	.wsx-form-wrap[data-wsxf-effect="border-trace"][data-wsxf-surface="card"]:hover::after,
	.wsx-form-wrap[data-wsxf-effect="border-trace"][data-wsxf-surface="card"]:focus-within::after {
		animation: none;
		clip-path: none;
		opacity: 1;
	}
}

/* Where mask-composite is unsupported the ring simply does not paint. The
   static border underneath is untouched, so nothing is lost but the accent. */
@supports not ((mask-composite: exclude) or (-webkit-mask-composite: xor)) {
	.wsx-form-wrap[data-wsxf-effect="border-trace"][data-wsxf-surface="card"]::after {
		display: none;
	}
}

/* ============================================================
   ELEVATION IS TRUTHFUL
   An interaction effect may ADD a focus shadow, but the resting elevation the
   administrator chose is always still present in the stack.
   ============================================================ */
.wsx-form-wrap[data-wsxf-surface="card"] { box-shadow: var(--wsxf-shadow); }
.wsx-form-wrap[data-wsxf-effect="focus-glow"][data-wsxf-surface="card"]:focus-within {
	box-shadow: var(--wsxf-shadow), 0 0 0 3px color-mix(in srgb, var(--wsxf-focus) 25%, transparent);
}
@supports not (color: color-mix(in srgb, red 50%, blue)) {
	.wsx-form-wrap[data-wsxf-effect="focus-glow"][data-wsxf-surface="card"]:focus-within {
		box-shadow: var(--wsxf-shadow), 0 0 0 3px rgba(69, 149, 236, .25);
	}
}