/*
 * lab.css — lab write-up pages.
 *
 * Aim is a restrained technical report: hairline rules, small-caps section
 * labels, monospace for figure numbers and metadata, and figures that are
 * unmistakably figures. Distinctive through typographic discipline rather than
 * decoration.
 *
 * Everything is scoped to `article`, `#lab-toc` or `.lab-*`. Colours come from
 * the theme's custom properties, so light and dark both follow.
 */

body:has(#lab-toc) {
	--lab-toc-width: 15rem;
}

/* ------------------------------------------------------------ right rail ---- */

/* Three columns on lab pages: nav rail, content, contents rail. */
body:has(#docs-sidebar):has(#lab-toc) {
	grid-template-columns: var(--docs-sidebar-width) minmax(0, 1fr) var(--lab-toc-width);
	grid-template-areas:
		"nav nav nav"
		"sidebar main toc"
		"footer footer footer";
}

/* With the sidebar collapsed the content simply takes its space. */
html.sidebar-hidden body:has(#docs-sidebar):has(#lab-toc) {
	grid-template-columns: minmax(0, 1fr) var(--lab-toc-width);
	grid-template-areas:
		"nav nav"
		"main toc"
		"footer footer";
}

/* The content column no longer needs to be capped as tightly, since the rail
   now provides the right-hand margin. */
body:has(#docs-sidebar):has(#lab-toc) main {
	max-width: none;
	padding-inline-end: 1.5rem;
}

/* Duckquill styles a bare <aside> as a floated pull-quote (float: right,
   width: 30%, accent fill). Unset all of it — 30% of this column is 72px, which
   collapsed the rail to one character per line. */
#lab-toc {
	grid-area: toc;
	float: none;
	margin: 0;
	box-shadow: none;
	border-radius: 0;
	background-color: transparent;
	padding: 0 1.25rem 0 0;
	width: auto;
}

#lab-toc .lab-toc-inner {
	position: sticky;
	inset-block-start: var(--docs-nav-clearance, 5.5rem);
	max-height: calc(100vh - var(--docs-nav-clearance, 5.5rem));
	overflow-y: auto;
	border-inline-start: max(1px, 0.0625rem) solid var(--fg-muted-2);
	padding: 0.25rem 0 1rem 1rem;
}

#lab-toc .lab-toc-caption {
	margin: 0 0 0.625rem;
	color: var(--fg-muted-4);
	font-weight: 600;
	font-size: var(--font-size-x-small);
	font-family: var(--font-monospace, ui-monospace, monospace);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

#lab-toc ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

#lab-toc a {
	display: block;
	transition: var(--transition);
	border-inline-start: max(2px, 0.125rem) solid transparent;
	margin-inline-start: -1rem;
	padding: 0.25rem 0.5rem 0.25rem 1rem;
	color: var(--fg-muted-5);
	font-size: var(--font-size-small);
	line-height: 1.35;
	text-decoration: none;
}

#lab-toc a:hover {
	color: var(--fg-color);
}

/* Set by lab.js as you scroll. */
#lab-toc a.is-current {
	border-inline-start-color: var(--accent-color);
	color: var(--accent-color);
	font-weight: 600;
}

#lab-toc .lab-toc-sub a {
	padding-inline-start: 1.75rem;
	font-size: var(--font-size-x-small);
}

/* --------------------------------------------------------------- headings ---- */

/* Section openers get a hairline rule above them, which is what gives long
   write-ups a scannable rhythm without numbering every heading. */
article h2 {
	margin-block-start: 2.75rem;
	border-block-start: max(1px, 0.0625rem) solid var(--fg-muted-2);
	padding-block-start: 1.5rem;
}

article h3 {
	margin-block-start: 2rem;
	color: var(--fg-muted-5);
	font-size: var(--font-size-large);
	letter-spacing: 0.01em;
	text-transform: uppercase;
}

/* ---------------------------------------------------------------- figures ---- */

/* Numbering counts <figcaption>, not <figure>: several figures here are flex
   rows holding two or three captioned images side by side, and each of those
   deserves its own number. */
article {
	counter-reset: figure;
}

/* Figures sit at 75% of the measure and centre. Full-bleed screenshots and
   video swamp the prose otherwise, even with both rails expanded. */
article figure {
	margin-block: 1.75rem;
	margin-inline: auto;
	border: max(1px, 0.0625rem) solid var(--fg-muted-2);
	border-radius: var(--rounded-corner);
	background-color: var(--fg-muted-1);
	padding: 0.75rem;
	max-width: 75%;
}

article figure img,
article figure iframe,
article figure video {
	display: block;
	margin-inline: auto;
	border-radius: var(--rounded-corner-small);
	max-width: 100%;
}

/* The theme forces `iframe { width: 100% }`, which overrides the width="450"
   on these embeds while the height="315" attribute stays put — leaving video
   stretched to a wrong aspect ratio. Restore 16:9. */
article figure iframe[src*="youtube"],
article figure iframe[src*="youtu.be"],
article figure iframe[src*="vimeo"] {
	aspect-ratio: 16 / 9;
	width: 100%;
	height: auto;
}

article figure img {
	cursor: zoom-in;
	height: auto;
}

article figcaption {
	counter-increment: figure;
	margin-block-start: 0.625rem;
	color: var(--fg-muted-5);
	font-size: var(--font-size-small);
	line-height: 1.45;
	text-align: start;
}

article figcaption::before {
	margin-inline-end: 0.5rem;
	color: var(--accent-color);
	font-weight: 700;
	font-size: var(--font-size-x-small);
	font-family: var(--font-monospace, ui-monospace, monospace);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	white-space: nowrap;
	content: "Fig. " counter(figure);
}

/* Comparison rows: keep the flex layout their markup asks for, but let each
   caption sit under its own image. */
article figure[style*="flex"] {
	gap: 0.75rem;
}

article figure[style*="flex"] figcaption {
	text-align: center;
}

/* ------------------------------------------------------------ code blocks ---- */

/* Deliberately NOT capped at 75% like figures. An image scales down gracefully;
   code does not — it just moves behind a horizontal scrollbar. Measured across
   the labs, narrowing to 75% pushes 24 of 41 blocks into scrolling, against 2
   today. So code keeps the full measure and instead borrows the figures' flat
   frame, so the two read as one system at content-appropriate widths. */
article .pre-container {
	box-shadow: none;
	border: max(1px, 0.0625rem) solid var(--fg-muted-2);
	overflow: hidden; /* clip the header's fill to the rounded corners */
}

/* --------------------------------------------------------------- lightbox ---- */

.lab-lightbox {
	display: none;
	position: fixed;
	z-index: 1000;
	inset: 0;
	backdrop-filter: blur(0.5rem);
	-webkit-backdrop-filter: blur(0.5rem);
	background-color: rgb(0 0 0 / 0.82);
	padding: 2rem;
	cursor: zoom-out;
}

.lab-lightbox.is-open {
	display: grid;
	place-items: center;
}

.lab-lightbox img {
	box-shadow: 0 1.5rem 3rem rgb(0 0 0 / 0.5);
	border-radius: var(--rounded-corner);
	max-width: 100%;
	max-height: 88vh;
}

.lab-lightbox-caption {
	position: absolute;
	inset-block-end: 1.25rem;
	inset-inline: 2rem;
	color: rgb(255 255 255 / 0.85);
	font-size: var(--font-size-small);
	text-align: center;
}

.lab-lightbox-close {
	position: absolute;
	inset-block-start: 1rem;
	inset-inline-end: 1.25rem;
	cursor: pointer;
	border: none;
	border-radius: 999px;
	background-color: rgb(255 255 255 / 0.14);
	padding: 0.375rem 0.75rem;
	color: rgb(255 255 255 / 0.9);
	font-size: var(--font-size-medium);
	line-height: 1;
}

.lab-lightbox-close:hover {
	background-color: rgb(255 255 255 / 0.26);
}

/* ------------------------------------------------------------- responsive ---- */

/* Below this the rail costs more than it gives; the left sidebar already lists
   the current lab's headings. */
@media only screen and (max-width: 1300px) {
	#lab-toc {
		display: none;
	}

	body:has(#docs-sidebar):has(#lab-toc) {
		grid-template-columns: var(--docs-sidebar-width) minmax(0, 1fr);
		grid-template-areas:
			"nav nav"
			"sidebar main"
			"footer footer";
	}

	html.sidebar-hidden body:has(#docs-sidebar):has(#lab-toc) {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"nav"
			"main"
			"footer";
	}

	body:has(#docs-sidebar):has(#lab-toc) main {
		max-width: var(--docs-content-width);
		padding-inline-end: 2.5rem;
	}
}

/* Below the wide breakpoints the measure is already narrow; holding figures at
   75% would just make them small. */
@media only screen and (max-width: 1000px) {
	article figure {
		max-width: 100%;
	}
}

@media only screen and (max-width: 1100px) {
	body:has(#docs-sidebar):has(#lab-toc) {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"nav"
			"sidebar"
			"main"
			"footer";
	}
}

@media (prefers-reduced-motion: reduce) {
	.lab-lightbox {
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
	}
}