/* ── Cards (Metronic's kt-card anatomy: header with title and the toolbar's pin, content; the section's colour on
   top) ─────────────────────────────────────────────────────────────── */
/* 0.58.0 (the UI recommendations, R1): the one skin (ra-card); a flex column whose body grows, so the footers of cards
   stretched to one height line up (Metronic note F3); a size container, so its head and its field rows answer to the
   card's width, not the screen's. The card owns no outer spacing: its container spaces it (the board, a panel, a
   section); the margin below is kept, at zero specificity, for a card in a plain page flow until every page is on a
   board. */
.rooster-admin-card {
	@apply ra-card flex scroll-mt-[150px] flex-col;
	container-type: inline-size;
}

:where(.rooster-admin-card) {
	@apply mb-5;
}

/* A card the person hid (0.64.3, rooster_admin_card_open_html()'s `dismissible`): a flex box, so its `hidden` needs
   saying; the line with Undo that takes its place spaces as it did. Its dismiss button is the pin's twin. */
.rooster-admin-card[hidden] {
	@apply hidden;
}

.rooster-admin-notice.is-inline[data-ra-card-note] {
	@apply mb-5 self-start; /* the card's own spacing (0.64.4: the inline notice's 12 px won before); in a band of rows, a line, not stretched to its peers' height */
}

.rooster-admin-card__dismiss {
	@apply ms-auto inline-flex min-h-6 min-w-6 flex-none cursor-pointer items-center justify-center rounded-sm border-0 bg-transparent p-[3px] text-secondary-foreground hover:bg-muted hover:text-foreground focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-link;
}

.rooster-admin-card__head {
	@apply ra-card-head;
}

.rooster-admin-card__icon {
	color: var(--ra-sec-ink, var(--ra-screen-sec-ink, var(--ra-product-ink)));
}

.rooster-admin-card__title,
.rooster-admin-card__head h2.rooster-admin-card__title {
	@apply m-0 flex-auto p-0 text-md font-semibold text-foreground;
}

/* A narrow card (F2): the tools take a line of their own under the title; the pin keeps its place at the end of the
   first line, and a title in a third-width card stays on one line. */
@container (width < 30rem) {
	.rooster-admin-card__tools {
		@apply ms-0 basis-full;
		order: 9;
	}
}

.rooster-admin-card__body {
	@apply ra-card-body grow;
}

.rooster-admin-card__desc {
	@apply mt-0 mb-3 text-sm leading-normal text-secondary-foreground;
}

/* One rhythm between the blocks of a card body (UI-Final-Review FR14; Metronic note F5): 16 px, 12 under a fold, no
   block bringing its own; margins rather than a gap, so a hosted paragraph's own margin collapses into it. What is
   never seen (a hidden input, a script, a hidden block) neither takes the rhythm nor gives it to the first block. */
.rooster-admin-card > .rooster-admin-card__body > * {
	@apply my-0;
}

.rooster-admin-card > .rooster-admin-card__body > :where(:not(input[type="hidden"], script, template, [hidden])) ~ * {
	@apply mt-4;
}

.rooster-admin-card > .rooster-admin-card__body > .rooster-admin-fold + * {
	@apply mt-3;
}

/* A titled section of a card (F4, `rooster_admin_card_section_html()`): a second body under a hairline, its h3 title
   first; a topic of a long form at no cost in width, where a sub-card would box it. */
.rooster-admin-card__body + .rooster-admin-card__body {
	@apply border-t border-border;
}

.rooster-admin-card__subtitle {
	@apply m-0 text-sm font-semibold text-foreground;
}

/* The grip (0.58.0; the Home's since 0.10, on every board card): at the start of a movable card's head, a 24 px
   target at the pin's contrast (FR8: the muted grey read at 2.56:1, a control's icon needs 3:1). A click opens the
   Move menu; a drag or the arrow keys move the card. */
.rooster-admin-grip {
	@apply -ms-1 inline-flex size-6 flex-none cursor-grab items-center justify-center rounded-sm border-0 bg-transparent p-0 text-secondary-foreground hover:bg-muted hover:text-foreground focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-link;
}

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

[data-ra-key].is-dragging {
	@apply opacity-45;
}

/* A moved card (or row) flashes a ring where it landed. */
[data-ra-key].is-moved {
	box-shadow: 0 0 0 2px var(--ra-ring);
	transition: box-shadow var(--ra-dur-slow) var(--ra-ease);
}

/* A card or field reached by its deep link, or named by the request (`tab=`): a short ring. */
.rooster-admin-card:target,
.rooster-admin-card.is-focus,
.rooster-admin-field:target {
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--ra-sec-ink, var(--ra-product-ink)) 35%, transparent);
	animation: rooster-admin-ring 1.6s ease-out forwards;
}

@keyframes rooster-admin-ring {
	to {
		box-shadow: 0 0 0 0 transparent;
	}
}

@media (prefers-reduced-motion: reduce) {
	.rooster-admin-card:target,
	.rooster-admin-card.is-focus,
	.rooster-admin-field:target {
		animation: none;
	}
}