/* ── The page board (0.58.0; ui-card-layout-optimization.md §2, Metronic note F6, UI-Final-Review FR8 and FR9): the
   Home's grid on every page. Bands of one to four column stacks in any of Board::LAYOUTS (1:1, 2:1, 1:3, 1:2:1, …; the
   person's own since 0.80.0), a band of equal-height rows, or one card across the board. A stack takes its cards one
   under another, so a tall card beside short ones leaves no hole. The board collapses by its own width, never the
   screen's: each band has the width under which its columns no longer fit (Board::threshold(): two need about 69 rem,
   three about 90, a card's `min` raises it) and then goes straight to one column, so three stacks never show as two.
   One gap across and down (--ra-gap-card). ── */
.rooster-admin-board {
	@apply flex flex-col gap-(--ra-gap-card);
	container: ra-board / inline-size;
}

.rooster-admin-band {
	@apply m-0 flex min-w-0 flex-col gap-2.5;
}

.rooster-admin-band__head {
	@apply mt-1.5 flex flex-col gap-0.5;
}

/* A band's title labels the cards under it (a group, not a heading: the cards stay h2, their sections h3). */
.rooster-admin-band__title {
	@apply m-0 text-xs font-semibold tracking-[0.06em] text-secondary-foreground uppercase;
}

.rooster-admin-band__desc {
	@apply m-0 text-sm leading-normal text-secondary-foreground;
}

.rooster-admin-band__grid {
	@apply grid items-start gap-(--ra-gap-card);
	grid-template-columns: minmax(0, 1fr);
}

.rooster-admin-band.is-cols-2 > .rooster-admin-band__grid {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.rooster-admin-band.is-cols-3 > .rooster-admin-band__grid {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.rooster-admin-band.is-ratio-2-1 > .rooster-admin-band__grid {
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
}

.rooster-admin-band.is-ratio-1-2 > .rooster-admin-band__grid {
	grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
}

/* The person's layouts (0.80.0, Board::LAYOUTS): four columns, and the ratios beyond 2:1 and 1:2. */
.rooster-admin-band.is-cols-4 > .rooster-admin-band__grid {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.rooster-admin-band.is-ratio-1-3 > .rooster-admin-band__grid {
	grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
}

.rooster-admin-band.is-ratio-3-1 > .rooster-admin-band__grid {
	grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
}

.rooster-admin-band.is-ratio-1-2-1 > .rooster-admin-band__grid {
	grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr);
}

.rooster-admin-band.is-ratio-2-1-1 > .rooster-admin-band__grid {
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
}

.rooster-admin-band.is-ratio-1-1-2 > .rooster-admin-band__grid {
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 2fr);
}

/* A band of rows: its cards are the grid's items, stretched to one height, so their footers line up (F3, F6). */
.rooster-admin-band.is-rows > .rooster-admin-band__grid {
	@apply items-stretch;
}

.rooster-admin-band__col {
	@apply flex min-h-10 min-w-0 flex-col gap-(--ra-gap-card) rounded-md;
}

.rooster-admin-band__col.is-drop {
	@apply outline-2 outline-offset-4 outline-ring outline-dashed;
}

/* The board spaces its cards: none keeps a margin of its own there. */
.rooster-admin-band__col > .rooster-admin-card,
.rooster-admin-band__grid > .rooster-admin-card,
.rooster-admin-band__full > .rooster-admin-card {
	@apply m-0;
}

/* One rule per width a band may need (Board::THRESHOLDS): below it the band is one column. */
@container ra-board (width < 45rem) {
	.rooster-admin-band.is-at-45 > .rooster-admin-band__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

@container ra-board (width < 50rem) {
	.rooster-admin-band.is-at-50 > .rooster-admin-band__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

@container ra-board (width < 55rem) {
	.rooster-admin-band.is-at-55 > .rooster-admin-band__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

@container ra-board (width < 60rem) {
	.rooster-admin-band.is-at-60 > .rooster-admin-band__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

@container ra-board (width < 65rem) {
	.rooster-admin-band.is-at-65 > .rooster-admin-band__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

@container ra-board (width < 69rem) {
	.rooster-admin-band.is-at-69 > .rooster-admin-band__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

@container ra-board (width < 75rem) {
	.rooster-admin-band.is-at-75 > .rooster-admin-band__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

@container ra-board (width < 80rem) {
	.rooster-admin-band.is-at-80 > .rooster-admin-band__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

@container ra-board (width < 90rem) {
	.rooster-admin-band.is-at-90 > .rooster-admin-band__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

@container ra-board (width < 100rem) {
	.rooster-admin-band.is-at-100 > .rooster-admin-band__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

@container ra-board (width < 120rem) {
	.rooster-admin-band.is-at-120 > .rooster-admin-band__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* The board's Edit layout and Reset layout when the page head has no room for them (a page that prints its own head). */
.rooster-admin-board__bar {
	@apply flex flex-wrap justify-end gap-2;
}

/* ── The edit mode (0.80.0, Board::tools(), assets/board.js): the person's rows of columns, each with its tools (its
   layout, up, down, remove), Add a row at the top, every column a place to drop a card. A row the person emptied, or
   added and left empty, shows nothing outside it. ── */
.rooster-admin-board:not(.is-editing) > .rooster-admin-band.is-empty {
	@apply hidden;
}

.rooster-admin-board.is-editing > .rooster-admin-band[data-ra-flex] {
	@apply rounded-lg border border-dashed border-border p-3;
}

/* The context in :where() (0.80.3): a column's own weight, so the drop target's ring (.is-drop) still shows over the
   edit mode's outline while a card is dragged, and the recipe stays within the specificity it is allowed. */
:where(.rooster-admin-board.is-editing > .rooster-admin-band[data-ra-flex] > .rooster-admin-band__grid)
	> .rooster-admin-band__col {
	@apply min-h-24 outline-1 outline-offset-2 outline-border outline-dashed;
}

:where(.rooster-admin-board.is-editing)
	.rooster-admin-band__col:where([data-ra-empty]:not(:has(> [data-ra-key])))::before {
	@apply flex flex-1 items-center justify-center p-3 text-center text-sm text-secondary-foreground;
	content: attr(data-ra-empty);
}

.rooster-admin-board__add {
	@apply flex flex-wrap items-center gap-3 rounded-lg border border-dashed border-border p-3;
}

.rooster-admin-board__hint {
	@apply m-0 min-w-0 flex-1 basis-64 text-sm leading-normal text-secondary-foreground;
}

.rooster-admin-band__tools {
	@apply flex flex-wrap items-center gap-1.5;
}

.rooster-admin-band__label {
	@apply me-auto text-xs font-semibold tracking-[0.06em] text-secondary-foreground uppercase;
}

.rooster-admin-layoutbtn {
	@apply gap-2;
}

/* A layout's picture: its columns as bars in their widths (the button's and the menu's). */
.rooster-admin-layoutpic {
	@apply inline-flex h-4 w-8 shrink-0 gap-0.5;
}

.rooster-admin-layoutpic > span {
	@apply rounded-xs bg-current opacity-45;
}

.rooster-admin-layoutpic > .is-w1 {
	flex: 1 1 0;
}

.rooster-admin-layoutpic > .is-w2 {
	flex: 2 1 0;
}

.rooster-admin-layoutpic > .is-w3 {
	flex: 3 1 0;
}

/* The layout menu: a popover in the top layer under its button, as the Move menu; each choice its picture, its ratio
   and its name, the row's own marked. */
.rooster-admin-layoutmenu {
	@apply m-0 max-h-[calc(100vh-1rem)] w-96 max-w-[calc(100vw-1rem)] gap-0.5 overflow-y-auto rounded-md border border-border bg-card p-1 text-card-foreground shadow-pop;
	inset: auto;
}

/* A grid only while open: a display of its own would override the browser's display none for a closed popover, and the
   closed menu would stay painted where it last opened. */
.rooster-admin-layoutmenu:popover-open {
	@apply grid;
}

.rooster-admin-layoutmenu__item {
	@apply grid w-full cursor-pointer grid-cols-[2.75rem_3.5rem_minmax(0,1fr)] items-center gap-2 rounded-sm border-0 bg-transparent px-2.5 py-1.5 text-start font-[inherit] text-sm text-foreground hover:bg-muted focus-visible:bg-muted focus-visible:outline-0;
}

.rooster-admin-layoutmenu__item > .rooster-admin-layoutpic {
	@apply h-5 w-11;
}

.rooster-admin-layoutmenu__item[aria-checked="true"] {
	@apply bg-muted font-semibold;
}

.rooster-admin-layoutmenu__item[aria-checked="true"] > .rooster-admin-layoutpic > span {
	@apply bg-primary opacity-100;
}

.rooster-admin-layoutmenu__ratio {
	@apply font-mono text-xs text-secondary-foreground;
}

/* The Move menu (FR8): a click on a grip opens it, for touch and screen readers; a popover in the top layer, placed
   under its grip by the script (above it where the room below is short, 0.80.0), never taller than the window. */
.rooster-admin-movemenu {
	@apply m-0 max-h-[calc(100vh-1rem)] min-w-52 overflow-y-auto rounded-md border border-border bg-card p-1 text-card-foreground shadow-pop;
	inset: auto;
}

.rooster-admin-movemenu__item {
	@apply block w-full cursor-pointer rounded-sm border-0 bg-transparent px-2.5 py-1.5 text-start font-[inherit] text-sm text-foreground hover:bg-muted focus-visible:bg-muted focus-visible:outline-0;
}

.rooster-admin-movemenu__item[aria-disabled="true"] {
	@apply cursor-default text-secondary-foreground hover:bg-transparent;
}