/* ── Narrower screens ────────────────────────────────────────────────── */
/* stylelint-disable no-duplicate-selectors -- the responsive variants of recipes declared above, grouped here */

/* The section pills keep their icons on wide screens only (the menu bar stays on one line longer). */
.rooster-admin-pillgroup > .rooster-admin-pill > .rooster-admin-ico:not(.rooster-admin-icon),
.rooster-admin-pill.is-home > .rooster-admin-ico:not(.rooster-admin-icon) {
	@apply max-2xl:hidden;
}

/* On a phone the words leave the sight, not the page (0.70.1: sr-only, not hidden): the logo is decorative, so the brand
   link's name is the words', and axe's link-name failed at 390 px while they were display none. */
.rooster-admin-brandmark {
	@apply max-xl:text-[30px] max-sm:sr-only;
}

.rooster-admin-hero__side {
	@apply max-xl:basis-75 max-md:basis-auto;
}

.rooster-admin-dropdown.is-wide.is-cols-5 {
	@apply max-lg:[--ra-cols:3];
}

.rooster-admin-dropdown.is-wide.is-cols-3,
.rooster-admin-dropdown.is-wide.is-cols-4,
.rooster-admin-dropdown.is-wide.is-cols-5 {
	@apply max-md:[--ra-cols:2];
}

.rooster-admin-hero {
	@apply max-md:min-h-0 max-md:flex-col max-md:bg-top max-md:bg-size-[60%_auto];
}