/*
 * 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 that adds nothing to its height. Gone in Compact. */
.rooster-admin-foldbtn {
	@apply -my-1 -ms-1 me-0.5 inline-flex size-6 cursor-pointer items-center justify-center rounded-sm border-0 bg-transparent p-0 align-middle text-secondary-foreground hover:bg-muted hover:text-foreground;
}

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

/* Compact's own icons and links (the script's) are gone again in Guided. */
:where(body:not(.rooster-admin-guidance-compact)) :is(.rooster-admin-tipbtn, .rooster-admin-learnmore).is-compact {
	@apply hidden;
}