/* ── Brand bar ───────────────────────────────────────────────────────── */
.rooster-admin-topbar {
	@apply -ms-5 me-0 mt-0 mb-(--ra-page-gap) flex flex-wrap items-center justify-between gap-x-6 gap-y-2 bg-background px-5 py-4.5 text-foreground shadow-sm;
}

.rooster-admin-topbar__brand {
	@apply inline-flex min-w-0 items-center gap-3 no-underline;
}

.rooster-admin-topbar__brand img {
	@apply block h-10 w-auto;
}

.rooster-admin-brandmark {
	@apply inline-block origin-[50%_70%] scale-y-[0.82] text-[40px] leading-none font-bold tracking-[0.15em] whitespace-nowrap uppercase;
}

.rooster-admin-brandmark__word {
	@apply text-brand-dark;
}

/* The product's word in the product's colour (Rooster LMS: green, Rooster One: blue, Rooster Zero: orange). */
.rooster-admin-brandmark__word.is-product {
	@apply text-product-ink;
}

/* The product word in a gradient (0.17.0: `word.gradient`): the text is the window onto it. */
.rooster-admin-brandmark__word.is-gradient {
	background-image: linear-gradient(
		90deg,
		var(--ra-word-from, var(--ra-product)),
		var(--ra-word-to, var(--ra-product-ink))
	);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* Hollow letters stroked in the gradient (`word.style` outline: Rooster Zero's ZERO, as its logo kit draws it):
   the stroke is transparent and shows the gradient through the clip, the fill is the bar's own colour, so only
   the outline reads. The wordmark is squeezed to 0.82 of its height, which rasterises a stroked letter's top edge
   on a half pixel and fades it (the owner, 25 Oct 2026: "the top has to appear as the bottom lines"); so the word
   is set at 0.82 of the size and scaled back up evenly, which lands it at the same height and width as the others
   with no squeeze of its own, and the margin at the end makes room for the scaled width. */
.rooster-admin-brandmark__word.is-outline {
	@apply inline-block px-0.5 py-[0.08em] -my-[0.08em] me-[0.6em];
	font-size: 0.82em;
	transform: scale(1.2195);
	transform-origin: 0 70%;
	-webkit-text-stroke: 4px transparent; /* 4: the outer half of the stroke then fills the pixel row above a letter's top, where 3 left the join of R's bar and bowl pale (owner, 25 Oct 2026) */
	color: var(--ra-card);
}

/* A product with a lockup of its own (`wordmark`: Rooster Zero's mark, ROOSTER and the outlined ZERO in one SVG)
   shows it instead of the logo and the words; the dark one takes over with the dark set. */
.rooster-admin-lockup {
	@apply inline-flex items-center;
}

.rooster-admin-lockup__img {
	@apply block h-9 w-auto max-xl:h-7 max-sm:h-6;

	@variant dark {
		@apply hidden;
	}
}

.rooster-admin-lockup__img.is-dark {
	@apply hidden;

	@variant dark {
		@apply block;
	}
}

.rooster-admin-topbar__info {
	@apply m-0 flex list-none flex-wrap items-center p-0;
}

.rooster-admin-topbar__item {
	@apply relative m-0 flex min-h-[18px] items-center px-2.5 leading-none;
}

.rooster-admin-topbar__item + .rooster-admin-topbar__item::before {
	@apply absolute start-0 top-1/2 h-[17px] -translate-y-1/2 border-s border-border content-[''];
}

.rooster-admin-site-pill,
.rooster-admin-tierpill__pill {
	@apply m-0 inline-flex cursor-pointer items-center gap-1.5 rounded-full border border-input bg-background py-[3px] ps-2 pe-2.5 font-[inherit] text-2xs leading-[1.6] font-semibold whitespace-nowrap text-secondary-foreground no-underline;
}

.rooster-admin-site-pill {
	@apply border-primary-soft bg-primary-soft text-primary-soft-foreground;
}

.rooster-admin-site-pill__dot,
.rooster-admin-tierpill__dot,
.rooster-admin-eco__dot {
	@apply size-[7px] flex-none rounded-full bg-muted-foreground;
}

.rooster-admin-site-pill__dot {
	@apply bg-link;
}

/* The Site pill as the kind of site (0.15.0): a button with a panel under it, at the start of the bar. */
.rooster-admin-sitekind {
	@apply relative;
}

.rooster-admin-site-pill.is-kind {
	@apply cursor-pointer;
}

.rooster-admin-site-pill.is-kind[aria-expanded="true"] {
	@apply border-link;
}

.rooster-admin-sitekind__panel {
	@apply start-0 end-auto;
}

.rooster-admin-sitekind__title {
	@apply mt-0 mb-1 font-semibold text-foreground;
}

.rooster-admin-sitekind__panel .rooster-admin-tierpill__action {
	@apply inline-flex items-center gap-1; /* the external icon stays on the line */
}

.rooster-admin-iconlink {
	@apply inline-flex cursor-pointer items-center rounded-sm border-0 bg-transparent p-0.5 leading-[0] no-underline; /* a link, or a product's button (rooster/admin/topbar_items) */
}

/* The hover tips (0.19.0): any control with data-ra-tip, in the brand bar, the menu bar, the Home and a product's
   adopted page, says what it does in a bubble under it, on hover and on keyboard focus; `is-tip-end` hangs the
   bubble from the control's end for a control at the edge (the Home's reset button, a card's pin). An open
   popover's button keeps its tip away (aria-expanded). A hidden tip is not laid out at all (0.28.1: a transparent
   bubble still took room, and a pin at a card's right edge made the page scroll sideways); the fade stays through a
   discrete display transition and @starting-style. */
.rooster-admin [data-ra-tip] {
	@apply relative;
}

.rooster-admin [data-ra-tip]::after {
	content: attr(data-ra-tip);

	@apply pointer-events-none absolute start-1/2 top-[calc(100%+8px)] z-(--ra-z-tip) hidden w-max max-w-64 -translate-x-1/2 rounded-md bg-foreground px-2.5 py-1.5 text-start text-xs leading-snug font-medium whitespace-normal text-background normal-case tracking-normal opacity-0 shadow-pop;
	transition:
		opacity var(--ra-dur) var(--ra-ease),
		display var(--ra-dur) allow-discrete;
}

.rooster-admin [data-ra-tip]::before {
	content: "";

	@apply pointer-events-none absolute start-1/2 top-[calc(100%-2px)] z-(--ra-z-tip) hidden -translate-x-1/2 border-[5px] border-transparent border-b-foreground opacity-0;
	transition:
		opacity var(--ra-dur) var(--ra-ease),
		display var(--ra-dur) allow-discrete;
}

.rooster-admin [data-ra-tip].is-tip-end::after {
	@apply start-auto end-0 translate-x-0;
}

.rooster-admin [data-ra-tip].is-tip-end::before {
	@apply start-auto end-2 translate-x-0;
}

/* `is-tip-start` (0.45.5): the bubble beside the control's start, level with it, for a control in a list (the "For:"
   options: a bubble under one would cover the next). */
.rooster-admin [data-ra-tip].is-tip-start::after {
	@apply start-auto end-[calc(100%+10px)] top-1/2 translate-x-0 -translate-y-1/2;
}

.rooster-admin [data-ra-tip].is-tip-start::before {
	@apply start-auto end-full top-1/2 translate-x-0 -translate-y-1/2 border-b-transparent border-s-foreground;
}

/* A tip in the side panel (0.68.8, the LMS's request; the owner: "not to be cut by the dimensions of the sidebar"): the
   panel's body scrolls, and a scroll box clips what hangs out of it, so assets/panel.js fixes the tip to the window
   where it measured its control (`is-tip-fixed`; --ra-tip-x the bubble's, -ax the arrow's, -y the control's bottom,
   -shift how far each hangs back): the same place as before, over the page. */
.rooster-admin [data-ra-tip].is-tip-fixed::after,
.rooster-admin [data-ra-tip].is-tip-fixed::before {
	position: fixed;
	inset: auto;
	translate: var(--ra-tip-shift, 0) 0;
}

.rooster-admin [data-ra-tip].is-tip-fixed::after {
	left: var(--ra-tip-x);
	top: calc(var(--ra-tip-y) + 8px);
}

.rooster-admin [data-ra-tip].is-tip-fixed::before {
	left: var(--ra-tip-ax);
	top: calc(var(--ra-tip-y) - 2px);
}

.rooster-admin [data-ra-tip]:hover::after,
.rooster-admin [data-ra-tip]:hover::before,
.rooster-admin [data-ra-tip]:focus-visible::after,
.rooster-admin [data-ra-tip]:focus-visible::before {
	@apply block opacity-100;

	@starting-style {
		@apply opacity-0;
	}
}

.rooster-admin [data-ra-tip][aria-expanded="true"]::after,
.rooster-admin [data-ra-tip][aria-expanded="true"]::before {
	@apply hidden opacity-0;
}

.rooster-admin-iconlink.is-manual {
	@apply text-icon-manual;
}

.rooster-admin-iconlink.is-help {
	@apply text-icon-help;
}

.rooster-admin-iconlink.is-feedback {
	@apply text-icon-feedback;
}

.rooster-admin-iconlink.is-chat {
	@apply text-icon-chat;
}

.rooster-admin-iconlink.is-welcome {
	@apply text-icon-welcome;
}

.rooster-admin-iconlink.is-survey {
	@apply text-icon-survey;
}

/* A mouse click on a link in the chrome kept core's focus box (a:focus { box-shadow … }, 0,1,1) and its blue ink
   until the next page or the focus moved (the owner, 26 Oct 2026: tabs, link buttons, chips). The keyboard's ring
   stays (:focus-visible). */
.rooster-admin-has-chrome a:focus:not(:focus-visible) {
	box-shadow: none;
}

.rooster-admin-topbar a:focus,
.rooster-admin-topbar button:focus {
	@apply shadow-none;
	outline: 0;
}

.rooster-admin-topbar a:focus-visible,
.rooster-admin-topbar button:focus-visible,
.rooster-admin-stickytop a:focus-visible,
.rooster-admin-stickytop button:focus-visible,
.rooster-admin-home a:focus-visible,
.rooster-admin-home button:focus-visible,
.rooster-admin-settings a:focus-visible,
.rooster-admin-settings button:focus-visible {
	@apply shadow-none outline-2 outline-offset-2 outline-link;
}

.rooster-admin-tierpill__pill {
	@apply border-warning-border bg-warning-soft text-warning-soft-foreground;
}

.rooster-admin-tierpill.is-on .rooster-admin-tierpill__pill {
	@apply border-success-soft bg-success-wash text-success-foreground;
}

.rooster-admin-tierpill.is-on .rooster-admin-tierpill__dot,
.rooster-admin-status__row.is-on .rooster-admin-status__dot {
	@apply bg-success;
}

.rooster-admin-status__row.is-hold .rooster-admin-status__dot {
	@apply bg-warning;
}

.rooster-admin-status__row.is-error .rooster-admin-status__dot {
	@apply bg-destructive;
}

.rooster-admin-status__row.is-error .rooster-admin-status__text {
	@apply text-destructive-foreground;
}

/* A popover (0.27.0): the browser's top layer, light dismiss and Escape; its end edge on its button's (anchor
   positioning), else where the script put it (--ra-top, --ra-right). The margin resets the user agent's. */
.rooster-admin-tierpill__panel {
	@apply fixed inset-auto z-(--ra-z-pop) m-0 mt-2.5 w-100 max-w-[calc(100vw-40px)] rounded-[10px] border border-border bg-card px-4 py-3.5 text-sm leading-normal whitespace-normal text-card-foreground shadow-pop;
	top: var(--ra-top, 0);
	right: var(--ra-right, 0);
}

.rooster-admin-tierpill__detail {
	@apply mt-0 mb-2.5 text-secondary-foreground;
}

.rooster-admin-status {
	@apply mt-0 mb-1.5;
}

.rooster-admin-status__row {
	@apply grid grid-cols-[minmax(110px,auto)_1fr] gap-3 border-t border-border py-1.5;
}

.rooster-admin-status__row dt {
	@apply font-semibold;
}

.rooster-admin-status__row dd {
	@apply m-0 flex flex-wrap items-center justify-end gap-x-1.5 gap-y-0.5 text-end text-secondary-foreground;
}

.rooster-admin-status__dot {
	@apply size-[7px] flex-none rounded-full bg-muted-foreground;
}

.rooster-admin-status__fix {
	@apply font-semibold whitespace-nowrap text-link no-underline hover:underline;
}

.rooster-admin-tierpill__action {
	@apply mt-2 me-3.5 inline-block font-semibold text-link no-underline;
}

/* The version and the product's link wear the product's own colour (0.45.5, the owner: LRS purple, One blue, Zero
   orange), not the link blue. */
.rooster-admin-version,
.rooster-admin-product {
	@apply inline-flex items-center gap-1 text-sm font-semibold text-product-ink no-underline;
}

/* The external-link glyph sits on the line box, which includes the descender space, so it reads low beside
   capitals: lifted to the text's visual centre (owner, 25 Oct 2026: 2 px). */
.rooster-admin-product .rooster-admin-icon--external,
.rooster-admin-tierpill__action .rooster-admin-icon--external {
	@apply relative -top-[2px];
}

/* The other products of the ecosystem: small links with their product dot. */
.rooster-admin-eco {
	@apply gap-2.5;
}

.rooster-admin-eco__link {
	@apply inline-flex items-center gap-1.25 text-xs font-semibold text-secondary-foreground no-underline hover:text-product-ink;
}

.rooster-admin-eco__link .rooster-admin-eco__dot {
	@apply bg-product;
}