/*
 * rooster-docs/chapters (the brief of 31 Oct 2026, package 3): the filter box, the chapter toggles and the hidden
 * pages on the theme's tokens; the tree's own look (rooster-docs__tree, __manual) is the theme's base sheet.
 * Compiled by build/blocks-css.mjs to style.css.
 */

@import "../theme.css";

.rooster-docs__filter {
	@apply m-0 mb-s3;
}

.rooster-docs__filter-input {
	@apply w-full text-sm text-fg bg-bg rounded-control px-s3;
	border: 1px solid var(--wp--preset--color--line);
	min-height: 2.75rem;
	font-size: max(1rem, var(--wp--preset--font-size--sm));
}

.rooster-docs__filter-input:focus-visible {
	outline: none;
	border-color: var(--wp--preset--color--accent);
	box-shadow: var(--wp--custom--rooster--focus-ring);
}

.rooster-docs__tree > li[data-chapter] {
	@apply flex flex-wrap items-center;
}

.rooster-docs__tree > li[data-chapter] > a {
	flex: 1 1 auto;
}

.rooster-docs__tree > li[data-chapter] > ul {
	flex-basis: 100%;
}

.rooster-docs__tree > li:not(.is-open) > ul {
	display: none;
}

.rooster-docs__toggle {
	@apply inline-flex items-center justify-center text-muted bg-bg rounded-chip;
	border: 0;
	width: 2rem;
	height: 2rem;
	padding: 0;
	cursor: pointer;
}

.rooster-docs__toggle:hover,
.rooster-docs__toggle:focus-visible {
	color: var(--wp--preset--color--accent-text);
}

.rooster-docs__toggle:focus-visible {
	outline: none;
	box-shadow: var(--wp--custom--rooster--focus-ring);
}

.rooster-docs__toggle[aria-expanded="true"] .rooster-icon {
	rotate: 180deg;
}

.rooster-docs__empty {
	@apply m-0 text-sm text-muted;
}

/*
 * On a phone (the block's compact variant): the bar where the tree stood, the chapter you are in on one button, and
 * the bottom sheet it opens, the navigator's on a phone: a panel from the bottom edge, a handle, the manual's name and
 * the close button at the top, the filter box and the tree under them, the backdrop over the page.
 */
.rooster-docs__open {
	@apply flex w-full items-center gap-s3 px-s3 py-s2 text-fg bg-bg rounded-control;
	border: 1px solid var(--wp--preset--color--line);
	min-height: 3rem;
	font: inherit;
	text-align: start;
	cursor: pointer;
}

.rooster-docs__open:focus-visible {
	outline: none;
	box-shadow: var(--wp--custom--rooster--focus-ring);
}

.rooster-docs__open-text {
	@apply flex flex-col;
	flex: 1 1 auto;
	min-width: 0;
}

.rooster-docs__open-label {
	@apply text-xs text-muted;
}

.rooster-docs__open-current {
	@apply text-sm;
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

:root.rooster-docs-sheet-open {
	overflow: hidden;
}

.rooster-docs__sheet {
	@apply text-fg bg-bg;
	position: fixed;
	inset: auto 0 0;
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	max-height: 82dvh;
	margin: 0;
	padding: 0;
	border: 0;
	border-top: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--rooster--shape--panel) var(--wp--custom--rooster--shape--panel) 0 0;
	box-shadow: var(--wp--custom--rooster--shadow--lg);
	transition: transform 0.2s ease;
}

.rooster-docs__sheet[open] {
	display: flex;
	flex-direction: column;
}

@starting-style {
	.rooster-docs__sheet[open] {
		transform: translateY(100%);
	}
}

/* The page dimmed by the scheme's dark end: contrast in the light scheme, the page's own colour in the dark one. */
.rooster-docs__sheet::backdrop {
	background: color-mix(in srgb, var(--wp--preset--color--contrast) 45%, transparent);
}

:root[data-rooster-scheme="dark"] .rooster-docs__sheet::backdrop {
	background: color-mix(in srgb, var(--wp--preset--color--bg) 75%, transparent);
}

.rooster-docs__sheet-head {
	@apply flex items-center gap-s3 pt-s4 pb-s2 px-s4;
	position: relative;
	flex: 0 0 auto;
	touch-action: none;
}

/* The handle: a phone's sign that the sheet goes away downwards. */
.rooster-docs__sheet-head::before {
	content: "";
	position: absolute;
	top: 0.4rem;
	left: 50%;
	width: 2.5rem;
	height: 0.25rem;
	border-radius: var(--wp--custom--rooster--shape--chip);
	background: var(--wp--preset--color--line);
	translate: -50% 0;
}

.rooster-docs__sheet .rooster-docs__manual {
	@apply m-0;
	flex: 1 1 auto;
	min-width: 0;
}

.rooster-docs__sheet-close {
	@apply inline-flex items-center justify-center text-fg bg-bg rounded-chip;
	flex: 0 0 auto;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 1px solid var(--wp--preset--color--line);
	cursor: pointer;
}

.rooster-docs__sheet-close:focus-visible {
	outline: none;
	box-shadow: var(--wp--custom--rooster--focus-ring);
}

.rooster-docs__sheet-body {
	@apply px-s4;
	position: relative;
	flex: 1 1 auto;
	min-height: 0;
	padding-bottom: calc(var(--wp--preset--spacing--4) + env(safe-area-inset-bottom, 0px));
	overflow: auto;
	overscroll-behavior: contain;
}

/* The filter box between the head and the list, outside the list's scroll, as the navigator's finder: always at hand. */
.rooster-docs__sheet > .rooster-docs__filter {
	@apply m-0 px-s4 pb-s2;
	flex: 0 0 auto;
}

/* Fingers, not pointers: the sheet's rows and buttons at 44 px. */
.rooster-docs__sheet .rooster-docs__tree a {
	padding-block: 0.7em;
}

.rooster-docs__sheet .rooster-docs__toggle {
	width: 2.75rem;
	height: 2.75rem;
}