/* ── A page's windows (0.68.13, Rooster One's request 52; Ui::windows(), assets/windows.js). Docked windows are the
   row's columns in the user's order: the main one takes the rest of the width and the others keep theirs, sticking
   under the bars with their own scroll as the side panel does; with the main one away, the docked ones share the
   width. A floating window is the side panel's floating box (above). A folded one waits on the line above the row.
   Below 960 px the docked windows stack in their order, below 782 px the floating ones join them. These rules decide
   the first paint, so they are chrome.css's, not a stylesheet loaded with the script. ── */
.rooster-admin-windows {
	@apply relative;
}

.rooster-admin-windows__tray {
	@apply mb-3 flex flex-wrap items-center gap-2;
}

.rooster-admin-windows__tray[hidden],
.rooster-admin-windows__show[hidden],
.rooster-admin-window.is-folded {
	@apply hidden;
}

.rooster-admin-windows__row {
	@apply flex flex-col gap-(--ra-gap-card);
}

.rooster-admin-window {
	@apply relative flex min-w-0 flex-col outline-0;
}

.rooster-admin-window__body {
	@apply min-h-0 flex-1;
}

/* The card a window holds: the window's own edges. */
.rooster-admin-window__body > .rooster-admin-card {
	@apply mb-0;
}

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

.rooster-admin-window__title {
	@apply me-auto text-sm font-semibold;
}

/* A floating window scrolls in its body; one whose content marks a part to fill it (rooster-admin-window__fill, a
   transcript, a direct child of a card's body) gives that part the free height, the card's head, its footer and the
   part's siblings (a form) staying in view. No gutter kept for a scroll bar (0.68.15, the owner: an empty strip of
   the window's shadow beside the card, the resize corner in it): the card meets the window's edges. A docked one
   keeps its gutter, so nothing shifts when a bar appears. */
.rooster-admin-window:where(.is-floating) > .rooster-admin-window__body {
	@apply overflow-y-auto;
}

.rooster-admin-window.has-fill:where(.is-floating) > .rooster-admin-window__body {
	@apply flex flex-col overflow-hidden;
}

.rooster-admin-window.has-fill:where(.is-floating) > .rooster-admin-window__body > .rooster-admin-card {
	@apply flex min-h-0 flex-1 flex-col;
}

:where(.rooster-admin-window.has-fill) .rooster-admin-card > * {
	@apply shrink-0;
}

:where(.rooster-admin-window.has-fill)
	.rooster-admin-card
	> .rooster-admin-card__body:has(> .rooster-admin-window__fill) {
	@apply flex min-h-0 flex-1 flex-col;
}

:where(.rooster-admin-window.has-fill) .rooster-admin-card__body > .rooster-admin-window__fill {
	@apply min-h-0 flex-1 overflow-y-auto;
}

/* A floating window resizes from its left, right and bottom edges and its bottom corners too (0.68.15, the owner): 8 px
   strips on its border (assets/windows.js adds them), the bottom-right corner the one drawn. */
.rooster-admin-window__edge {
	@apply hidden;
}

.rooster-admin-window.is-floating:not(.is-collapsed) > .rooster-admin-window__edge {
	@apply absolute block touch-none;
}

.rooster-admin-window__edge.is-w,
.rooster-admin-window__edge.is-e {
	@apply top-0 bottom-3 w-2 cursor-ew-resize;
}

.rooster-admin-window__edge.is-w {
	@apply -left-1;
}

.rooster-admin-window__edge.is-e {
	@apply -right-1;
}

.rooster-admin-window__edge.is-s {
	@apply right-3 -bottom-1 left-3 h-2 cursor-ns-resize;
}

.rooster-admin-window__edge.is-sw {
	@apply -bottom-1 -left-1 size-3 cursor-nesw-resize;
}

.rooster-admin-window__edge.is-se {
	@apply -right-1 -bottom-1 size-3 cursor-nwse-resize;
}

/* Dragged into its place among the docked windows: a line where it goes. */
.rooster-admin-window.is-dragging {
	@apply opacity-60;
}

.rooster-admin-windows__drop {
	@apply pointer-events-none absolute z-1 rounded-full;
	top: var(--ra-drop-y, 0);
	left: var(--ra-drop-x, 0);
	width: var(--ra-drop-w, 3px);
	height: var(--ra-drop-h, 3px);
	background: var(--ra-accent);
}

@media (width >= 782px) {
	/* A head that drags its window (moved floating, put in its place docked; assets/windows.js marks it) takes the
	   pointer from the page. */
	.rooster-admin-window.is-floating .rooster-admin-window__head,
	:where(.rooster-admin-windows.is-many) .rooster-admin-window.is-docked .rooster-admin-window__head {
		touch-action: none;
	}

	:where(.rooster-admin-windows.is-many) .rooster-admin-window.is-docked .rooster-admin-window__head {
		@apply cursor-grab;
	}
}

@media (width >= 960px) {
	.rooster-admin-windows__row {
		@apply flex-row items-start;
	}

	.rooster-admin-window.is-docked {
		flex: 0 0 var(--ra-panel-w);
	}

	.rooster-admin-windows.has-main .rooster-admin-window.is-main,
	.rooster-admin-windows:not(.has-main) .rooster-admin-window.is-docked {
		flex: 1 1 0;
	}

	/* Beside the main one, a docked window sticks under the bars, its body scrolling (assets/windows.js: --ra-side-y,
	   --ra-side-max-h), as the side panel's. */
	.rooster-admin-window.is-docked:not(.is-main) {
		@apply sticky;
		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));
	}

	.rooster-admin-window:where(.is-docked:not(.is-main)) > .rooster-admin-window__body {
		@apply overflow-y-auto;
		scrollbar-gutter: stable;
	}

	.rooster-admin-window.has-fill:where(.is-docked:not(.is-main)) > .rooster-admin-window__body {
		@apply flex flex-col overflow-hidden;
	}

	.rooster-admin-window.has-fill:where(.is-docked:not(.is-main)) > .rooster-admin-window__body > .rooster-admin-card {
		@apply flex min-h-0 flex-1 flex-col;
	}

	/* The last docked window, at the row's end, keeps its gutter on its start side, between the columns (0.68.16), as a
	   panel docked at the end. */
	.rooster-admin-window.is-end:not(.is-main) > .rooster-admin-window__body {
		direction: rtl;
	}

	.rooster-admin-window.is-end:not(.is-main) > .rooster-admin-window__body > * {
		direction: ltr;
	}

	:where([dir="rtl"]) .rooster-admin-window.is-end:not(.is-main) > .rooster-admin-window__body {
		direction: ltr;
	}

	:where([dir="rtl"]) .rooster-admin-window.is-end:not(.is-main) > .rooster-admin-window__body > * {
		direction: rtl;
	}
}

/* A phone: a floating window sits in the page, in its place in the order. */
@media (width < 782px) {
	.rooster-admin-window.is-floating {
		@apply visible static h-auto w-auto max-w-none max-h-none shadow-none;
	}

	.rooster-admin-window.is-floating > .rooster-admin-window__body {
		@apply block overflow-visible;
	}

	.rooster-admin-window.is-floating .rooster-admin-window__float-tools,
	.rooster-admin-window.is-floating:not(.is-collapsed) > .rooster-admin-window__corner,
	.rooster-admin-window.is-floating:not(.is-collapsed) > .rooster-admin-window__edge {
		@apply hidden;
	}

	.rooster-admin-window.is-floating .rooster-admin-window__head {
		@apply cursor-auto;
	}
}