/*
 * 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 and on its 20 px
   lines (0.89.2: what Compact folds moves the page by whole device pixels; see .rooster-admin-card__desc). */
.rooster-admin-guidance {
	@apply m-0 text-sm text-secondary-foreground;
	line-height: 20px;
}

.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, 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;
}

/* No way back inside the texts (0.89.3, the owner, 9 Nov 2026: "the text is pushed as if with a tab to the right ...
   Please remove the identation", "you add an additional icon in the text. This is too much", "the description to start
   in line with the start of the input box"): since 0.89.0 the explanation's button beside a title or a label stays in
   Guided and folds the texts again, and the level is the whole application's, so the 0.68.22 button at each text's start
   and the 22 px first-line room 0.86.1 kept for it are gone. A text starts where its block starts: a field's help under
   its control's edge. */

/* 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. A toggle, so a
   pointer, not the help cursor; open, it keeps the muted ground of a pressed tip. */
.rooster-admin-tipbtn.is-compact {
	@apply text-(--ra-accent) hover:text-(--ra-accent);
}

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