/* ACSS 4 tokens only. Button styling comes from ACSS .btn--tertiary. */

.ac-form {
	display: flex;
	flex-direction: column;
	gap: var(--space-s);
	inline-size: 100%;
}

.ac-form__field {
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
}

.ac-form__label {
	font-size: var(--text-s);
	color: var(--text-dark);
}

.ac-form__input {
	font: inherit;
	font-size: var(--text-m);
	color: var(--text-dark);
	background: var(--white);
	border: 1px solid var(--border-color-dark);
	border-radius: var(--radius);
	padding: var(--space-xs) var(--space-s);
	inline-size: 100%;
}

.ac-form__input:focus-visible {
	outline: 2px solid var(--focus-color);
	outline-offset: 2px;
}

.ac-form__button {
	align-self: flex-start;
}

.ac-form__message {
	padding: var(--space-xs) var(--space-s);
	border-inline-start: 3px solid currentColor;
}

.ac-form__message--success {
	color: var(--success);
}

.ac-form__message--error {
	color: var(--danger);
}

.ac-form__hp {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}