:root {
	--font-main: geist variable, ui-sans-serif, system-ui, sans-serif;
	--font-mono: geist mono variable, ui-monospace, monospace, monospace;
	/* Font metrics differ from face to face. These are for Geist and Geist Mono. */
	--font-ex: 0.53;
	--font-cap: 0.71;
	--font-ascent: 1.005;
	--font-descent: 0.295;
	--baseline-shift: calc((1lh + 1em * (var(--font-ascent) - var(--font-descent))) / 2);
	--step: 1rlh;
	--ink: light-dark(oklch(21% 0.0104 268), oklch(96% 0.0104 268));
	--paper: light-dark(oklch(99% 0.004 91), oklch(21% 0.004 91));
	--border-color: light-dark(oklch(75% 0.01 268), oklch(50% 0.01 268));
	--shadow-color: light-dark(oklch(30% 0.01 268 / 0.18), oklch(80% 0.01 268 / 0.18));
	--alert-color: light-dark(oklch(48% 0.17 22), oklch(72% 0.17 22));

	line-height: 1.6;
	font-size: 1.25rem;
	font-family: var(--font-main);
	color: var(--ink);
	background-color: var(--paper);
	color-scheme: light dark;
}

body {
	margin: 0;
	padding-block-end: 9rlh;
}

h1 {
	font-size: 2rem;
	line-height: 1;
	margin-block: 0.5lh;
	text-wrap: balance;
}

h2 {
	--own-margin-start: 1rlh;
	--own-margin-end: 0.25rlh;
	--step-align: center;
	--bs-align: 0.5;

	margin-block: var(--own-margin-start) var(--own-margin-end);
	font-size: 1.55rem;
	line-height: 1.2;
	text-wrap: balance;
}

h3 {
	--own-margin-start: 1rlh;
	--own-margin-end: 0.25rlh;
	--step-align: center;
	--bs-align: 0.5;

	margin-block: var(--own-margin-start) var(--own-margin-end);
	font-size: 1.2rem;
	line-height: 1.3;
	text-wrap: balance;
}

p {
	margin-block: 0 1rlh;
	text-wrap: pretty;

	&:last-child {
		margin-block: 0;
	}
}

code {
	font-family: var(--font-mono);
}

figure {
	--own-margin-end: 0.65rlh;

	margin-block: 0 var(--own-margin-end);
	margin-inline: 0;

	img {
		display: block flow;
		inline-size: 100%;
	}
}

.columns {
	display: block grid;
	gap: 0 2rem;
	grid-template-columns: repeat(2, 1fr);
}

.card {
	> :first-child {
		--own-margin-start: 0;
		--step-align: start;
		--bs-align: 0;

		margin-block-start: 0;
	}
}

.on-baseline {
	--own-padding: calc(var(--baseline-shift) - 1cap);

	padding-block-start: var(--own-padding);

	img {
		block-size: calc(var(--lines, 4) * 1rlh + 1cap);
		object-fit: cover;
	}
}

.floated {
	--own-margin-end: 0.25rlh;

	float: inline-start;
	inline-size: 50%;
	margin-inline-end: 1rem;
}

blockquote {
	--own-margin-end: 0.55rlh;

	border-inline-start: 0.15em solid var(--border-color);
	font-style: italic;
	margin-block: 0 var(--own-margin-end);
	margin-inline: 0;
	padding-inline-start: 1em;
	text-wrap: pretty;

	> :last-child {
		margin-block-end: 0;
	}
}

/* Picking the technique for the rhythm breakers */

.block-step {
	:root:has([value="mode-native"]:checked) & {
		/* Native: the whole point of the exercise. */
		block-step: var(--step) margin-box var(--step-align, start);
	}

	:root:has([value="mode-js"]:checked) & {
		--block-step-size: var(--step);
		--block-step-insert: margin-box;
		--block-step-align: var(--step-align, start);
		--block-step-round: up;
	}

	:root:not(:has([value="mode-sda"]:checked)) & {
		animation: none;
		overflow: visible;
		/* The technique itself is verbose and lives in its own file. */
	}

	:root:has([value="mode-calc-size"]:checked) & {
		align-content: var(--step-align, start);
		block-size:
			calc-size(
				auto,
				round(
					up,
					size
					+ var(--own-padding, 0px)
					+ var(--own-margin-start, 0px)
					+ var(--own-margin-end, 0px),
					var(--step)
				)
				- var(--own-padding, 0px)
				- var(--own-margin-start, 0px)
				- var(--own-margin-end, 0px)
			);
	}
}

@property --block-step-size {
	syntax: "<length>";
	inherits: false;
	initial-value: 0px;
}

/* Supporting elements */

.intro {
	box-sizing: border-box;
	margin: 0 auto;
	max-inline-size: 62rem;
	padding: 1rlh 1rem;
}

.legend {
	box-sizing: border-box;
	font-size: 0.85em;
	margin: 0 auto;
	max-inline-size: 62rem;
	padding: 1rlh 1rem 0;

	dt {
		font-weight: bold;
	}

	dd {
		margin: 0 0 0.5rlh;
	}

	ul {
		margin: 0;
		padding-inline-start: 1.2rem;
	}
}

/* Switchers */

.panel {
	position: fixed;
	z-index: 1;
	inset-block-end: 1rem;
	box-sizing: border-box;
	padding: 1rem 1.25rem;
	max-inline-size: calc(100% - 2rem);
	line-height: 1.2;
	border: 1px solid var(--border-color);
	border-radius: 0.5rem;
	background-color: var(--paper);
	box-shadow: 0 0.25rem 1rem var(--shadow-color);
}

.modes {
	inset-inline-end: 1rem;
	display: block grid;
}

.grid-switch {
	inset-inline-start: 1rem;
	align-items: center;
	display: block flex;
	gap: 0.4rem;
}

.modes__heading {
	margin-block: unset;
	font-size: 1.25rem;
	font-weight: bold;
}

.modes__options {
	margin-block-start: 0.5rem;
	display: block grid;
	gap: 0.25rem;
}

.option {
	align-items: baseline;
	display: block grid;
	grid-template-columns: auto 1fr;
	column-gap: 0.4rem;
}

.option__control {
	align-self: center;
	font: inherit;
	block-size: 2ex;
	inline-size: 2ex;
	margin: 0;
	margin-block-end: -0.25ex;
}

.option__unsupported {
	grid-column: 2;
	color: var(--alert-color);

	@supports (block-step-size: 1rlh) {
		.option:has([value="mode-native"]) & {
			display: none;
		}
	}

	@supports (timeline-scope: --bs-y) {
		.option:has([value="mode-sda"]) & {
			display: none;
		}
	}

	@supports (block-size: calc-size(auto, size)) {
		.option:has([value="mode-calc-size"]) & {
			display: none;
		}
	}
}

/* Baseline grid */

.sheet {
	box-sizing: border-box;
	margin: 0 auto;
	padding: 1rlh 1rem;
	max-inline-size: 62rem;
	border-block: 1px solid var(--border-color);
	background: url("./line.svg") 0 var(--baseline-shift) / calc(var(--step) * var(--is-line-visible, 1));
}

:root:has([value="grid"]:not(:checked)) {
	--is-line-visible: 0;
}