@layer components {
	.form-page-layout { max-width: 40rem; }

	.form-note {
		margin-top: 1.5rem;
		padding: 1rem 1.25rem;
		border: 1px solid var(--color-border);
		border-left: 3px solid var(--color-accent);
		background-color: var(--color-muted);
		border-radius: var(--radius-sm);
		font-size: 0.875rem;
		color: var(--color-muted-foreground);
	}

	.transactional-form {
		margin-top: 2rem;
		display: flex;
		flex-direction: column;
		gap: 1.5rem;
	}

	.form-field { display: flex; flex-direction: column; gap: 0.5rem; }
	.form-field label {
		font-size: 0.875rem;
		font-weight: 600;
		color: var(--color-foreground);
	}
	.form-field input,
	.form-field textarea {
		font: inherit;
		font-size: 0.9375rem;
		padding: 0.625rem 0.875rem;
		border: 1px solid var(--color-border);
		border-radius: var(--radius-sm);
		background-color: var(--color-background);
		color: var(--color-foreground);
	}
	.form-field input:focus-visible,
	.form-field textarea:focus-visible {
		outline: 2px solid var(--color-ring);
		outline-offset: 1px;
		border-color: var(--color-ring);
	}
	.form-field textarea { resize: vertical; min-height: 8rem; }

	.form-field--error input,
	.form-field--error textarea { border-color: var(--color-destructive); }
	.form-error {
		font-size: 0.8125rem;
		color: var(--color-destructive);
		font-weight: 500;
	}
	.form-error--general {
		padding: 0.875rem 1rem;
		border: 1px solid var(--color-destructive);
		border-radius: var(--radius-sm);
		background-color: color-mix(in srgb, var(--color-destructive) 8%, transparent);
	}

	.form-success {
		margin-top: 2rem;
		padding: 1.5rem;
		border: 1px solid var(--color-success);
		border-radius: var(--radius-lg);
		background-color: color-mix(in srgb, var(--color-success) 8%, transparent);
		color: var(--color-foreground);
		font-size: 0.9375rem;
	}

	/* Honeypot: visually hidden from sighted users and excluded from the tab order, but present
	   in the DOM (not display:none/type=hidden, which some automated submitters skip entirely) -
	   a real visitor never sees or reaches this field via keyboard or screen reader. */
	.form-honeypot {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}
}