/* stylelint-disable no-duplicate-selectors -- the responsive variants of recipes declared above, grouped here */
.rooster-admin-field {
	@apply max-md:grid-cols-[minmax(0,1fr)_auto];
}

@media (max-width: 960px) {
	.rooster-admin-field {
		grid-template-areas: "label pin" "control control";
	}
}

.rooster-admin-field__help {
	@apply max-md:ps-0;
}

/* A card narrower than 40 rem puts each row's label over its control (FR9, 0.58.0): by the card's width, not the
   screen's, so a half-width card on a board stops squeezing its controls beside a 16 rem label column. The nearest
   container is the card's body. */
@container (width < 40rem) {
	.rooster-admin-fields:not(.rooster-admin-fields--grid) > .rooster-admin-field {
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas: "label pin" "control control";
	}

	.rooster-admin-fields:not(.rooster-admin-fields--grid) > .rooster-admin-field > .rooster-admin-field__label {
		@apply pt-0;
	}

	.rooster-admin-fields:not(.rooster-admin-fields--grid)
		> .rooster-admin-field
		> :is(.rooster-admin-field__help, .rooster-admin-field__error) {
		@apply ps-0;
	}
}