/*
 * Guidance (0.61.0, the UI recommendations' R4; includes/Guidance.php, assets/guidance.js; CONTRACT §8.5): the tip
 * button and its bubble (FR6), the text roles (essential, guidance, reference), the "Learn more" link, and Compact
 * (FR5): each guidance text hidden, an info icon in its place. Imported by chrome.css after the kit.
 */

/* The tip button (FR6): an info icon after what it explains, a 24 px target that keeps its line's height. Its text is
   what its aria-describedby names; guidance.js shows it in the bubble below. */
.rooster-admin-tipbtn {
	@apply ms-1 -my-1 inline-flex size-6 flex-none cursor-help items-center justify-center rounded-full border-0 bg-transparent p-0 align-middle font-[inherit] text-secondary-foreground hover:bg-muted hover:text-foreground focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-link;
}

.rooster-admin-tipbtn[aria-expanded="true"] {
	@apply bg-muted text-foreground;
}

/* "Why?" (a guidance text's place in Compact, or a description with no title near): the icon and the word. */
.rooster-admin-tipbtn.is-why {
	@apply ms-0 w-auto gap-1 rounded-md px-1.5 text-xs font-medium;
}

/* The bubble: one for the page, a manual popover in the top layer, placed by the script under its button inside the
   window. */
.rooster-admin-tipbubble {
	@apply fixed z-(--ra-z-tip) m-0 w-max max-w-[min(22rem,calc(100vw-16px))] rounded-md border-0 bg-foreground px-2.5 py-1.5 text-start text-xs leading-snug font-medium whitespace-normal text-background shadow-pop;
	inset: auto;
}

/* A tip after a title: the title takes its words' width, so the icon sits beside them and the tools keep the end. */
.rooster-admin-card__head > .rooster-admin-card__title:has(+ .rooster-admin-tipbtn) {
	@apply flex-initial;
}

.rooster-admin-card__title + .rooster-admin-tipbtn {
	@apply ms-0 me-auto;
}

.rooster-admin-pagehead__title + .rooster-admin-tipbtn {
	@apply ms-0; /* the version and the actions keep their places after it */
}

/* After a section's title, on its line: the body's rhythm gives the icon no margin of its own. */
.rooster-admin-card__subtitle:has(+ .rooster-admin-tipbtn) {
	@apply inline;
}

.rooster-admin-card > .rooster-admin-card__body > .rooster-admin-card__subtitle + .rooster-admin-tipbtn {
	@apply -my-1;
}

/* The text roles (Guidance::text()): one block of the card body's rhythm, in the description's ink. */
.rooster-admin-guidance {
	@apply m-0 text-sm leading-normal text-secondary-foreground;
}

.rooster-admin-guidance > .rooster-admin-tipbtn.is-why {
	@apply hidden;
}

/* "Learn more" (a reference text's link to the manual, in both levels). */
.rooster-admin-learnmore {
	@apply inline-flex items-center gap-0.5 font-medium whitespace-nowrap text-link no-underline hover:underline;
}

.rooster-admin-field__label > .rooster-admin-learnmore {
	@apply ms-2 text-xs;
}

/* Compact (the person's level: the body class, under WordPress's `js` class, so nothing is lost without the script).
   Hidden: a field's help (unless essential, or it holds a link or a control: then it stays, FR5), a description that is
   not essential, a guidance text; guidance.js puts an info icon in each one's place. The same rules are the script's.
   The level's classes weigh nothing (:where), so each rule keeps a recipe's weight. */
:where(.js.rooster-admin-guidance-compact .rooster-admin-field:not([data-ra-role="essential"]))
	> .rooster-admin-field__help:not(
		.is-essential,
		:has(a:not(.rooster-admin-learnmore), button:not(.rooster-admin-foldbtn), input, select, textarea)
	),
:where(.js.rooster-admin-guidance-compact) .rooster-admin-card__desc:not(.is-essential),
:where(.js.rooster-admin-guidance-compact) .rooster-admin-guidance:not(.is-essential) > .rooster-admin-guidance__text,
:where(.js.rooster-admin-guidance-compact) .rooster-admin-guidance.is-reference:not(:has(.rooster-admin-learnmore)) {
	@apply hidden;
}

:where(.js.rooster-admin-guidance-compact) .rooster-admin-guidance > .rooster-admin-tipbtn.is-why {
	@apply -ms-1.5 inline-flex; /* its icon on the text's edge */
}

/* A hidden description first in a body gives no rhythm to the block after it (a section's, after its title, keeps
   it); a page head's body that held only it goes with it. */
:where(.js.rooster-admin-guidance-compact)
	.rooster-admin-card__body
	> .rooster-admin-card__desc:first-child:not(.is-essential)
	+ * {
	@apply mt-0;
}

/* In a flush body there is no top padding to make up for it: the block after the folded description is the first one
   seen, so it starts off the head (0.68.21, the owner: a notice set against a flush card's head). After the rule above,
   at its weight. */
:where(.js.rooster-admin-guidance-compact .rooster-admin-card.is-flush)
	> .rooster-admin-card__body
	> .rooster-admin-card__desc:first-child:not(.is-essential)
	+ :where(:not(.rooster-admin-table, .rooster-admin-result, table, .tablenav)) {
	@apply mt-3.5;
}

:where(.js.rooster-admin-guidance-compact .rooster-admin-pagehead)
	> .rooster-admin-card__body:has(> .rooster-admin-card__desc:only-child:not(.is-essential)) {
	@apply hidden;
}

/* Guided's way back (0.68.22, guidance.js): at the start of each text Compact folds, the brand bar's switch again, its
   icon and its tip; a 24 px target on the text's first line. Gone in Compact.
   0.86.1 (rooster-admin-66's measure: Rooster One's home moved 0.014 when the script put the buttons in; each first
   line went 22 px further in, a text near its width took a line more, and the button's box made the line 0.3 px
   taller): the room is kept from the first paint, in Guided with the script, on the texts guidance.js folds (a
   description that is not essential, a field's first help that Compact hides, a guidance text: its box, the text being
   a span) and on any it marks; the first line starts where the button left it, 22 px in, and the button sits in that
   room out of the flow, on the first line's middle, so putting it in moves nothing. */
:where(.js.rooster-admin-has-chrome:not(.rooster-admin-guidance-compact))
	:is(
		.rooster-admin-card__desc:where(:not(.is-essential)),
		.rooster-admin-field__help:where(
				:nth-child(
					1
						of
						.rooster-admin-field__help:not(
							.is-essential,
							:empty,
							:has(
								a:not(.rooster-admin-learnmore),
								button:not(.rooster-admin-foldbtn),
								input,
								select,
								textarea
							)
						)
				)
			):where(:not([data-ra-role="essential"] > *, [data-ra-role="reference"] > *)),
		.rooster-admin-guidance:where(.is-guidance, :has(> [data-ra-folds])),
		[data-ra-folds]:where(:not(.rooster-admin-guidance__text))
	) {
	@apply relative indent-5.5;
}

:where(.js.rooster-admin-has-chrome:not(.rooster-admin-guidance-compact))
	:is(.rooster-admin-card__desc, .rooster-admin-field__help, .rooster-admin-guidance)
	> :where(:not(.rooster-admin-guidance__text)) {
	@apply indent-0;
}

.rooster-admin-foldbtn {
	@apply absolute -start-1 inline-flex size-6 cursor-pointer items-center justify-center rounded-sm border-0 bg-transparent p-0 text-secondary-foreground hover:bg-muted hover:text-foreground;
	top: calc((1lh - 1.5rem) / 2);
	font-size: inherit;
	line-height: inherit;
}

/* Out of the flow inside a chrome wrapper too: the tips' anchor (`.rooster-admin [data-ra-tip]`, relative) would put it
   back in the line; its tip is drawn off the button either way. */
.rooster-admin .rooster-admin-foldbtn[data-ra-tip] {
	@apply absolute;
}

:where(.rooster-admin-guidance-compact) .rooster-admin-foldbtn {
	@apply hidden;
}

/* The explanation's button (the script's, beside a title or a label) stays in Guided, where it folds the texts again
   (0.89.0); Compact's copies of a "Learn more" link and a "Why?" with no title near are gone in Guided, where the text
   stands in their place. */
:where(body:not(.rooster-admin-guidance-compact)) :is(.rooster-admin-learnmore.is-compact, .rooster-admin-tipbtn.is-compact.is-why) {
	@apply hidden;
}

/* The explanations' own icon, the comment cloud, in the accent of the menu section the screen belongs to (0.89.0, the
   owner: "Use the accent colour of the current main category"): the button beside a title or a label and the way back
   at a text's start. A toggle, so a pointer, not the help cursor; open, it keeps the muted ground of a pressed tip. */
.rooster-admin-tipbtn.is-compact,
.rooster-admin-foldbtn {
	@apply text-(--ra-accent) hover:text-(--ra-accent);
}

.rooster-admin-tipbtn.is-compact:not(.is-why) {
	@apply cursor-pointer;
}