/* --match-height and gap must match constants in Elimination.tsx */
.bracket {
	--match-width: 140px;
	--match-height: 55px;
	overflow-x: auto;
	display: flex;
	flex-direction: column;
	gap: var(--s-8);
	padding-block-end: var(--s-6);
}

.scrollingBracket {
	padding: var(--s-4) var(--s-6);
	max-width: 100%;
	max-height: min(1200px, 82dvh);
	scrollbar-width: none;
	border: var(--border-style);
	border-radius: var(--radius-box);
	overflow: scroll;
	user-select: none;

	/* In a breakout wrapper (see `mainBreakout`): as wide as needed between the normal page width and
	   the content area (then it scrolls), centered. Height fills down to the viewport bottom using the
	   JS-published `--bracket-fill-top`, floored so it never collapses. */
	:global([data-main-breakout]) & {
		width: fit-content;
		min-width: min(72rem, 100%);
		margin-inline: auto;
		max-height: max(
			300px,
			calc(100dvh - var(--bracket-fill-top, 30dvh) - var(--s-6))
		);

		/* The mobile bottom nav is fixed below 600px; keep clear of it. */
		@media screen and (max-width: 599.98px) {
			max-height: max(
				300px,
				calc(
					100dvh -
					var(--bracket-fill-top, 30dvh) -
					var(--layout-nav-height) -
					env(safe-area-inset-bottom) -
					var(--s-3)
				)
			);
		}
	}
}

/* Sizes against the full content area: cqw resolves to <main>, which spans it in breakout mode. */
.breakoutWrapper {
	:global([data-main-breakout]) & {
		width: 100cqw;
		margin-inline: calc(50% - 50cqw);
	}
}