/*
 * Chrome of the /blocks section — the shell only: topbar, rail and content
 * column. The CONTROLS inside it are canon components (ToggleGroup, Button,
 * Link…), like the rest of the site; this file just places the three regions
 * and paints their edges with foundation tokens.
 *
 * (The B contract's «no CSS» rule is about `src/uix/blocks/`, the tier itself.
 * This is app-land chrome for the demo site, the same role `uix.css` plays for
 * the component docs.)
 */

[data-blocks-shell] {
	min-block-size: 100dvh;
	background: var(--color-surface-default);
	color: var(--color-content-primary);
}

/* NOT sticky: a demo page whose star is a block that pins would have its own
   chrome fighting it — the block's header would slide under this bar and the
   `offset` you set would read as something else. The section's chrome scrolls
   away; the block owns the top of the viewport. */
[data-blocks-topbar] {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	padding-inline: var(--space-4);
	padding-block: var(--space-2);
	background: color-mix(in srgb, var(--color-surface-default) 88%, transparent);
	backdrop-filter: blur(8px);
	border-block-end: var(--border-width) solid var(--color-border-subtle);
}

[data-blocks-body] {
	display: flex;
	align-items: stretch;
	min-block-size: 0;
}

[data-blocks-rail] {
	flex: none;
	inline-size: 15rem;
	padding: var(--space-4);
	border-inline-end: var(--border-width) solid var(--color-border-subtle);
	position: sticky;
	inset-block-start: 0;
	align-self: start;
	max-block-size: 100dvh;
	overflow-y: auto;
	overscroll-behavior: contain;
}

/* Below `lg` the rail folds away: the topbar keeps the axes, and the gallery
   is one tap away. A demo section does not need a drawer of its own. */
@media (width < 64rem) {
	[data-blocks-rail] {
		display: none;
	}
}

[data-blocks-content] {
	flex: 1 1 auto;
	min-inline-size: 0;
}

/*
 * The stage — a page in miniature with its own scroll host, so a block that
 * pins (site-header) pins against THIS box and not the viewport.
 *
 * It is a bare frame on purpose: a `Card` would bring its own padding (its
 * recipe paints with `--card-padding-*`, which a `padding={0}` on the Box
 * layer does not override), and that padding pushed a header with
 * `offset: 0` twenty-one pixels away from the edge it was supposed to touch.
 * A stage has to be flush.
 */
[data-blocks-stage] {
	block-size: var(--blocks-stage-height, 520px);
	display: flex;
	justify-content: center;
	overflow: hidden;
	border: var(--border-width) solid var(--color-border-subtle);
	border-radius: var(--radius-lg);
	background: var(--color-surface-muted);
}

/* The preview IS a page: its own document, its own viewport scroll. Resizing
   this element resizes that viewport, which is how the narrow branch of a
   responsive block can be seen honestly. */
[data-blocks-preview] {
	border: 0;
	block-size: 100%;
	max-inline-size: 100%;
	background: var(--color-surface-default);
	transition: inline-size var(--duration-fast) var(--ease-default);
}