/*
 * The responsive system and layout primitives.
 * SSOT: owner
 * 1. Mobile first: `width >= …` only, never max-width.
 * 2. Fluid before breakpoint: no query to grow text.
 * 3. Intrinsic before breakpoint: .l-grid/.l-cluster/.l-sidebar.
 * 4. Container before viewport: `@container` for component shape.
 * 5. Viewport breakpoint last, page-level only. One: 48em (--bp-md); a new one edits tokens.css + this file.
 */

/* ----------------------------------------------------------------- reset */

*, *::before, *::after { box-sizing: border-box; }

/* A class setting `display` would otherwise beat [hidden]. */
[hidden] { display: none !important; }

img, picture, svg, video { max-inline-size: 100%; }

/* ------------------------------------------------------------- primitives */

/* Space between children only, so it composes. */
.l-stack > * { margin-block: 0; }
.l-stack > * + * { margin-block-start: var(--stack-gap, var(--s-2)); }

/* Wrapping row. */
.l-cluster {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--cluster-gap, var(--s-2));
}

/* Columns from width; --grid-min sets the minimum column. */
.l-grid {
	display: grid;
	gap: var(--grid-gap, var(--s-3));
	grid-template-columns: repeat(auto-fit, minmax(min(var(--grid-min, 18rem), 100%), 1fr));
}

/* Stacks on its own. --sidebar-width ideal; --sidebar-min content minimum before wrap. */
.l-sidebar {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sidebar-gap, var(--s-3));
}
.l-sidebar > :first-child { flex-basis: var(--sidebar-width, 18rem); flex-grow: 1; }
.l-sidebar > :last-child {
	flex-basis: 0;
	flex-grow: 999;
	min-inline-size: var(--sidebar-min, 50%);
}

/* Centred measure: --wrap or --wrap-text. */
.l-center {
	inline-size: min(100% - 2 * var(--gutter), var(--center-max, var(--wrap)));
	margin-inline: auto;
}

/* Tables, code, wide embeds scroll here, never the body. */
.l-scroll { overflow-x: auto; overscroll-behavior-x: contain; }

.l-container { container-type: inline-size; }

/* --------------------------------------------------- the one media query */

/* Phone nav becomes a bar. */
@media (width >= 48em) {
	:root { --gutter: var(--s-3); }
}