[data-form] {
	--_form-gap: var(--form-gap-md);
	--_form-padding: 0;
	--_form-border: transparent;
	--_form-bg: transparent;
	--_form-shadow: none;
	--_form-action-height: var(--form-action-height-md);
	--_form-action-padding-inline: var(--form-action-padding-inline-md);
	--_form-action-font-size: var(--form-action-font-size-md);

	display: flex;
	flex-direction: column;
	gap: var(--_form-gap);
	inline-size: 100%; /* literal: identity — a form IS its container's width */
	min-inline-size: 0;
	padding: var(--_form-padding);
	border: var(--form-border-width) solid var(--_form-border);
	border-radius: var(--form-radius);
	background: var(--_form-bg);
	box-shadow: var(--_form-shadow);
	color: var(--form-fg);
	font-family: var(--form-font-family);
}

[data-form][data-size='xs'] {
	--_form-gap: var(--form-gap-xs);
	--_form-action-height: var(--form-action-height-xs);
	--_form-action-padding-inline: var(--form-action-padding-inline-xs);
	--_form-action-font-size: var(--form-action-font-size-xs);
}

[data-form][data-size='sm'] {
	--_form-gap: var(--form-gap-sm);
	--_form-action-height: var(--form-action-height-sm);
	--_form-action-padding-inline: var(--form-action-padding-inline-sm);
	--_form-action-font-size: var(--form-action-font-size-sm);
}

[data-form][data-size='lg'] {
	--_form-gap: var(--form-gap-lg);
	--_form-action-height: var(--form-action-height-lg);
	--_form-action-padding-inline: var(--form-action-padding-inline-lg);
	--_form-action-font-size: var(--form-action-font-size-lg);
}

[data-form][data-size='xl'] {
	--_form-gap: var(--form-gap-xl);
	--_form-action-height: var(--form-action-height-xl);
	--_form-action-padding-inline: var(--form-action-padding-inline-xl);
	--_form-action-font-size: var(--form-action-font-size-xl);
}

[data-form][data-variant='panel'] {
	--_form-padding: var(--form-panel-padding);
	--_form-border: var(--form-panel-border);
	--_form-bg: var(--form-panel-bg);
	--_form-shadow: var(--form-panel-shadow);
}

[data-form][data-layout='grid'] {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--form-grid-min)), 1fr));
	align-items: start;
	column-gap: var(--form-grid-column-gap);
	row-gap: var(--_form-gap);
}

[data-form][data-pending] {
	cursor: progress;
}

/* Whole-form invalid signal: a thin top accent and the ErrorSummary
   bordering match the risk tone. Individual fields keep their own
   `[data-invalid]` styling via the Field recipe — the form-level
   indicator is a low-emphasis affordance so the page-level "errors
   present" state reads at a glance. */
[data-form][data-invalid] {
	--_form-invalid-accent: var(--form-invalid-accent);
}

[data-form][data-invalid] [data-form-error-summary] {
	border-color: var(--_form-invalid-accent);
}

/* The action chrome is the AutoFields array's, and ONLY its.
   `form-auto-fields.svelte` renders `array-add` / `array-remove` as bare
   `<button>`s composing nothing, so what follows is the only chrome those two
   nodes have — the size axis reaches them by INHERITING `--_form-action-*`
   from the provider above.
   `Form.Submit` / `Form.Reset` are deliberately absent: they compose the
   canonical `<Button>` through its `child` snippet, and
   `docs/guides/component-guide.md:126-146` names `Form.Submit` when it states
   consumer pattern rule 5 — the composer's recipe paints NO chrome on the
   composed node. They used to ride in every rule of this block and never won
   a pixel: `[data-button]` matches at the same specificity (0,1,0) and loads
   later. Signed 2026-08-24; ceding measured at ZERO diffs on both nodes over
   79,296 computed values across 16 scenarios. */
[data-form-auto-fields-array-add],
[data-form-auto-fields-array-remove] {
	--_form-action-bg: var(--color-neutral-element);
	--_form-action-bg-hover: var(--color-neutral-hover);
	--_form-action-border: var(--color-neutral-border);
	--_form-action-color: var(--color-neutral-text);
	--_form-action-shadow: none;

	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--form-action-gap);
	min-block-size: var(--_form-action-height);
	padding-inline: var(--_form-action-padding-inline);
	border: var(--form-action-border-width) solid var(--_form-action-border);
	border-radius: var(--form-action-radius);
	background: var(--_form-action-bg);
	box-shadow: var(--_form-action-shadow);
	color: var(--_form-action-color);
	font-family: var(--form-font-family);
	font-size: var(--_form-action-font-size);
	font-weight: var(--form-action-font-weight);
	line-height: var(--form-action-line-height);
	text-decoration: none;
	transition:
		background var(--form-transition-duration) var(--form-transition-ease),
		border-color var(--form-transition-duration) var(--form-transition-ease),
		box-shadow var(--form-transition-duration) var(--form-transition-ease),
		color var(--form-transition-duration) var(--form-transition-ease);
}

/* The remove button is the quiet one of the pair. */
[data-form-auto-fields-array-remove] {
	--_form-action-bg: transparent;
	--_form-action-bg-hover: color-mix(in srgb, var(--color-neutral-track) 70%, transparent);
	--_form-action-border: transparent;
	--_form-action-color: var(--color-content-subtle);
}

[data-form-auto-fields-array-add]:not(:disabled):hover,
[data-form-auto-fields-array-remove]:not(:disabled):hover {
	background: var(--_form-action-bg-hover);
}

[data-form-auto-fields-array-add]:focus-visible,
[data-form-auto-fields-array-remove]:focus-visible {
	outline: var(--focus-ring-width) solid var(--focus-ring-color);
	outline-offset: var(--focus-ring-offset);
}

[data-form-auto-fields-array-add]:disabled,
[data-form-auto-fields-array-remove]:disabled {
	cursor: not-allowed;
	opacity: var(--form-disabled-opacity);
}

[data-form-error-summary] {
	padding: var(--form-error-summary-padding);
	border: var(--form-error-summary-border-width) solid var(--form-error-summary-border);
	border-radius: var(--form-error-summary-radius);
	background: var(--form-error-summary-bg);
	color: var(--form-error-summary-fg);
	font-size: var(--form-error-summary-font-size);
	line-height: var(--form-error-summary-line-height);
}

[data-form-error-summary][data-hidden],
[data-form-error-summary][hidden] {
	display: none;
}

[data-form-error-summary] ul {
	margin: 0;
	padding-inline-start: var(--form-error-summary-list-indent);
}

[data-form-error-summary] a {
	color: inherit;
	text-decoration-color: var(--form-link-underline-fg);
	text-underline-offset: var(--form-link-underline-offset);
}

[data-form-auto-fields-group],
[data-form-auto-fields-array],
[data-form-auto-fields-discriminated],
[data-form-auto-fields-field],
[data-form-auto-fields-placeholder] {
	display: grid;
	gap: var(--form-auto-fields-gap);
	min-inline-size: 0;
}

[data-form-auto-fields-array] {
	padding: var(--form-auto-fields-array-padding);
	border: var(--form-auto-fields-border-width) solid var(--form-auto-fields-border);
	border-radius: var(--form-auto-fields-radius);
	background: var(--form-auto-fields-array-bg);
}

[data-form-auto-fields-array-toolbar],
[data-form-auto-fields-item-toolbar] {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--form-action-gap);
}

[data-form-auto-fields-item] {
	display: grid;
	gap: var(--form-auto-fields-item-gap);
	padding: var(--form-auto-fields-item-padding);
	border-radius: var(--form-auto-fields-radius);
	background: var(--form-auto-fields-item-bg);
}

[data-form-auto-fields-widget] {
	min-block-size: var(--_form-action-height);
	padding-inline: var(--form-widget-padding-inline);
	border: var(--form-widget-border-width) solid var(--form-widget-border);
	border-radius: var(--form-widget-radius);
	background: var(--form-widget-bg);
	color: var(--form-fg);
	font: inherit;
}