/* ── The page around the chrome (0.24.0) ─────────────────────────────── */
/* The page keeps its scrollbar's room from the first paint (0.56.1): a screen that grows past the window as its
   scripts fill it (a list, a builder's panes) no longer moves sideways under the pointer. */
html:has(> body.rooster-admin-has-chrome) {
	scrollbar-gutter: stable;
}

/* The window's scrollbar follows the root element's color-scheme, not the body's: the dark schemes reach <html> too. */
html:has(> body.rooster-admin-has-chrome.rooster-admin-dark) {
	color-scheme: dark;
}

html:has(> body.rooster-admin-has-chrome.rooster-admin-scheme-auto) {
	color-scheme: light dark;
}

/* wp-admin's grey in light (its own value), the chrome's own in dark; in dark, core's text and links on the chrome's
   screens read too (the chrome's containers set their colours; a product's own screens follow in their phases). */
body.rooster-admin-has-chrome {
	@apply bg-page;

	@variant dark {
		@apply text-foreground;
	}
}

/* Core colours every heading itself (h1 to h6: #1d2327 in common.css), which the page head's title inherits; in dark
   the headings on the chrome's screens read in the foreground. :where() keeps this under any recipe of its own. */
body.rooster-admin-has-chrome :where(h1, h2, h3, h4, h5, h6) {
	@variant dark {
		@apply text-foreground;
	}
}

/* stylelint-disable-next-line selector-max-specificity -- core's id; the chrome's and the products' own links (their
   component classes) keep their recipes (0.45.2: the LMS's view pills turned link blue in the dark scheme) */
.rooster-admin-has-chrome #wpbody-content a:not([class*="rooster-admin-"], [class*="rooster-lms-"], [class*="aieo-"]) {
	@variant dark {
		@apply text-link;
	}
}

/* stylelint-disable-next-line selector-max-specificity -- core's id */
.rooster-admin-has-chrome #wpfooter {
	@variant dark {
		@apply text-secondary-foreground;
	}
}