/* ── The side panel (0.46.0; docked directly since 0.47.1, the owner): a page's helper panel, folded by default (the
   main column takes the width), docked beside the main column by its toggle or the tab on the screen edge, per user;
   its card's fold button folds it again. ── */
.rooster-admin-split.is-docked {
	@apply grid items-start gap-(--ra-gap-card);
	grid-template-columns: minmax(0, 1fr) var(--ra-panel-w);
}

.rooster-admin-split__main {
	@apply min-w-0;
}

.rooster-admin-split__side {
	@apply hidden;
}

/* Its top and its height within the window (assets/panel.js: --ra-side-y, --ra-side-max-h; 0.68.7), else these. */
.rooster-admin-split.is-docked > .rooster-admin-split__side {
	@apply sticky m-0 flex min-w-0 flex-col outline-0;
	top: var(--ra-side-y, calc(var(--wp-admin--admin-bar--height, 32px) + 1rem));
	max-height: var(--ra-side-max-h, calc(100vh - var(--wp-admin--admin-bar--height, 32px) - 2rem));
}

/* A wide panel (0.68.0, panel_open()'s `width`; 0.68.1: the owner's measure, chosen on Rooster One's chat): 38 % of
   the split docked, of the window floating, between 20 and 40 rem. A floating panel the user resized keeps theirs.
   A wide window too, and a main window's first width when it floats (0.68.13). */
.rooster-admin-split.is-wide,
.rooster-admin-window:is(.is-wide, .is-main) {
	--ra-panel-w: clamp(20rem, 38%, 40rem);
}

/* A medium panel (0.68.8, `width` medium; the LMS's courses, the owner: "maybe make it a bit wider"): a step between,
   24 rem. A medium window too (0.68.13). */
.rooster-admin-split.is-medium,
.rooster-admin-window.is-medium {
	--ra-panel-w: 24rem;
}

/* The panel's tools in its card's head (0.68.8, the LMS's request; the owner: "on the top right, on the same height as
   the pin of the first card"): on the title's line, which F2 gives up in a narrow card (a panel is 20 rem), 4 px apart
   as on the panel's bar; each tip hangs from its button's end, inside the panel. A window's tools too (0.68.13). */
.rooster-admin-card__tools:has(> .rooster-admin-split__layouts, > .rooster-admin-window__layouts) {
	@apply ms-auto basis-auto gap-1;
	order: 0;
}

/* Docked at the start (0.67.0): the panel's column first. */
.rooster-admin-split.is-docked.is-left {
	grid-template-columns: var(--ra-panel-w) minmax(0, 1fr);
}

.rooster-admin-split.is-docked.is-left > .rooster-admin-split__side {
	@apply order-first;
}

/* Floating (0.67.0, Rooster One's request 46): the main column takes the width and the panel floats over the page,
   pinned at the window's end under the bars (assets/panel.js sets its top, and the place and size the user gave it,
   as --ra-side-x, -y, -w, -h and -max-h since 0.68.7); hidden until the script has placed a panel the user moved (no
   jump). A floating window is the same box (0.68.13), its rank among the floating windows in --ra-win-z (the one
   touched last on top, under the panel). */
.rooster-admin-split.is-floating > .rooster-admin-split__side,
.rooster-admin-window.is-floating {
	@apply fixed m-0 flex min-w-0 flex-col rounded-(--ra-shape-card) shadow-lg outline-0;
	z-index: calc(var(--ra-z-sticky) - 1);
	inset-inline-end: 1rem;
	top: var(--ra-side-y, calc(var(--wp-admin--admin-bar--height, 32px) + 1rem));
	width: var(--ra-side-w, var(--ra-panel-w));
	height: var(--ra-side-h, auto);
	max-width: calc(100vw - 1rem);
	max-height: var(--ra-side-max-h, calc(100vh - var(--wp-admin--admin-bar--height, 32px) - 2rem));
}

.rooster-admin-window.is-floating {
	z-index: calc(var(--ra-z-sticky) - 13 + var(--ra-win-z, 0));
}

.rooster-admin-split.is-floating.is-placed > .rooster-admin-split__side,
.rooster-admin-window.is-floating.is-placed {
	inset-inline-end: auto;
	left: var(--ra-side-x, auto);
}

.js .rooster-admin-split.is-placing > .rooster-admin-split__side,
.js .rooster-admin-window.is-placing {
	@apply invisible;
}

.rooster-admin-split.is-floating .rooster-admin-split__side :is(.rooster-admin-card__head, .rooster-admin-split__bar),
.rooster-admin-window.is-floating .rooster-admin-window__head {
	@apply cursor-move;
}

/* Folded to its head (0.67.0): the head of its card, or its bar, alone. */
.rooster-admin-split.is-collapsed .rooster-admin-split__body > * > :not(.rooster-admin-card__head),
.rooster-admin-split.is-collapsed .rooster-admin-split__bar ~ .rooster-admin-split__body {
	@apply hidden;
}

/* The panel's tools (0.67.0): the layouts always; the grip, Fold to its head and Reset while it floats. A window's the
   same (0.68.13; its grip shows docked too where it has others to pass). */
.rooster-admin-split__float-tools,
.rooster-admin-split__layouts,
.rooster-admin-window__float-tools,
.rooster-admin-window__layouts {
	@apply contents;
}

.rooster-admin-split:not(.is-floating) .rooster-admin-split__float-tools,
.rooster-admin-window:not(.is-floating) .rooster-admin-window__float-tools {
	@apply hidden;
}

/* Its corner resizes a floating panel (assets/panel.js adds it), or window (assets/windows.js). */
.rooster-admin-split__corner,
.rooster-admin-window__corner {
	@apply hidden;
}

.rooster-admin-split.is-floating:not(.is-collapsed) .rooster-admin-split__corner,
.rooster-admin-window.is-floating:not(.is-collapsed) > .rooster-admin-window__corner {
	@apply absolute right-1 bottom-1 block size-2.5 cursor-nwse-resize border-r-2 border-b-2 border-control;
}

/* The open button in the main card's head (0.47.1): gone while the panel shows (its card's fold button folds it). */
.rooster-admin-split:is(.is-docked, .is-floating) .rooster-admin-split__open {
	@apply hidden;
}

.rooster-admin-split__bar {
	@apply flex shrink-0 items-center justify-end gap-1 pb-1;
}

.rooster-admin-split__body {
	@apply min-h-0 flex-1 overflow-y-auto;
	scrollbar-gutter: stable; /* its content arrives after load: no shift when it grows past the panel (0.56.1) */
}

/* Floating, the card meets the panel's edges (0.68.15, as a floating window's). */
.rooster-admin-split.is-floating .rooster-admin-split__body {
	scrollbar-gutter: auto;
}

/* The panel's card: the column's card, its body scrolling with the panel. */
.rooster-admin-split__body > .rooster-admin-card:only-child {
	@apply mb-0;
}

/* A narrow screen: a docked panel goes under the main column. */
@media (width < 960px) {
	.rooster-admin-split.is-docked {
		@apply block;
	}

	.rooster-admin-split.is-docked > .rooster-admin-split__side {
		@apply static mt-4.5 max-h-none;
	}

	/* Under the main column it never scrolls: no gutter kept, its card on the page's edges (0.68.16). */
	.rooster-admin-split.is-docked .rooster-admin-split__body {
		scrollbar-gutter: auto;
	}
}

/* Docked at the end, the gutter kept for the panel's scroll bar sits between the columns (0.68.16, the owner, the LMS's
   courses: "when the card is on the left the space is on the right, when on the right on the left"), so its card
   meets the page's end edge as the cards above it do. A scroll box's bar follows its direction: the body's is turned
   and its content turned back. Docked at the start, it is between them already. */
@media (width >= 960px) {
	.rooster-admin-split.is-docked:not(.is-left) .rooster-admin-split__body {
		direction: rtl;
	}

	.rooster-admin-split.is-docked:not(.is-left) .rooster-admin-split__body > * {
		direction: ltr;
	}

	:where([dir="rtl"]) .rooster-admin-split.is-docked:not(.is-left) .rooster-admin-split__body {
		direction: ltr;
	}

	:where([dir="rtl"]) .rooster-admin-split.is-docked:not(.is-left) .rooster-admin-split__body > * {
		direction: rtl;
	}
}

/* A phone (0.67.0, under wp-admin's 782 px): a floating panel sits in the page above the main column. */
@media (width < 782px) {
	.rooster-admin-split.is-floating {
		@apply flex flex-col;
	}

	.rooster-admin-split.is-floating > .rooster-admin-split__side {
		@apply visible static order-first mb-4.5 h-auto w-auto max-w-none max-h-none shadow-none;
	}

	/* The corner at the specificity that draws it (0.68.13: it showed on a phone). */
	.rooster-admin-split.is-floating .rooster-admin-split__float-tools,
	.rooster-admin-split.is-floating:not(.is-collapsed) .rooster-admin-split__corner {
		@apply hidden;
	}

	.rooster-admin-split.is-floating
		.rooster-admin-split__side
		:is(.rooster-admin-card__head, .rooster-admin-split__bar) {
		@apply cursor-auto;
	}
}