/*
 * Form — the shell only. Field spacing is core's flow layout + block gap (the
 * <form> is the block wrapper), and every control's look is blocks/form-field.
 */

/* Fields share a Row or Grid evenly, and a Row wraps rather than crushing them
   on a narrow screen. Grid needs nothing — its minimum column width collapses it. */
.wage-form .is-layout-flex > .form-field {
	flex: 1 1 14rem;
	min-width: 0;
}

.wage-form .is-layout-flex.is-nowrap:has(> .form-field) {
	flex-wrap: wrap;
}

/* Layout blocks stretch their fields; a field's own margin would fight the gap. */
.wage-form .is-layout-grid > .form-field,
.wage-form .is-layout-flex > .form-field {
	margin-block: 0;
}

/* ── Outcome notice ────────────────────────────────── */

.wage-form__notice {
	--notice-color: var(--wp--preset--color--success);
	display: flex;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--xs);
	padding: var(--wp--preset--spacing--s);
	border: var(--wp--custom--border--width) solid color-mix(in oklch, var(--notice-color) 40%, transparent);
	border-radius: var(--wp--preset--border-radius--s);
	background: color-mix(in oklch, var(--notice-color) 10%, transparent);
}

.wage-form__notice--error {
	--notice-color: var(--wp--custom--danger);
}

.wage-form__notice svg {
	flex: none;
	margin-top: 0.15em;
	fill: var(--notice-color);
}

.wage-form__notice p {
	margin: 0;
}

.wage-form [type="submit"][aria-busy="true"] {
	cursor: progress;
	opacity: 0.7;
}

/* The success modal is a child of the form, where flow layout's `:first-child`
   margin reset would cancel the auto margins that centre a <dialog>. */
.wage-form > dialog {
	margin: auto;
}