/* Documentation pages (tutorials, quickstart, theory and reference): the article
rail and layout, guided steps, terminals, file trees, diagrams and
pagination. */

@layer components {
	.article-nav {
		view-transition-name: article-rail;
	}
}

@layer pages {
	/* Quickstart: a briefing hero beside a terminal, then numbered steps beside a
	sticky step rail. */
	.quickstart-hero {
		--split-side: minmax(0, 28rem);

		align-items: center;
	}

	.briefing {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-2);
		padding: 0;
		list-style: none;

		li {
			border: 1px solid var(--color-line-low);
			padding: var(--space-1) var(--space-3);
			background: rgb(var(--ch-ink) / 60%);
			--track: 0.1em;
			color: var(--color-text-dim);
			font-size: 0.66rem;
		}

		strong {
			color: var(--color-sand);
			font-weight: inherit;
		}
	}

	/* The step rail numbers its links and joins them with a faint line. */
	.step-rail ol {
		position: relative;
		counter-reset: step;

		&::before {
			content: "";
			position: absolute;
			inset-block: var(--space-3);
			inset-inline-start: calc(var(--space-3) + 0.55rem);
			border-inline-start: 1px solid var(--color-line-low);
		}

		a {
			display: grid;
			grid-template-columns: 1.6rem 1fr;
			align-items: center;
			gap: var(--space-2);

			&::before {
				counter-increment: step;
				content: counter(step);
				position: relative;
				display: grid;
				place-items: center;
				block-size: 1.2rem;
				inline-size: 1.2rem;
				border: 1px solid var(--color-line);
				background: var(--color-deep);
				color: var(--color-info);
				font-size: 0.62rem;
			}

			&:hover::before {
				border-color: var(--color-glow);
				box-shadow: 0 0 8px rgb(var(--ch-edge) / 45%);
			}
		}
	}

	.step-rail {
		.step-rail-home {
			border: 0;
			padding: 0;
			color: var(--color-info);
			font-size: 0.7rem;
		}

		a[aria-current="step"] {
			border-color: var(--color-glow);
			background: linear-gradient(90deg, rgb(var(--ch-edge) / 22%), transparent);
			color: var(--color-text-strong);

			&::before {
				border-color: var(--color-glow);
				background: rgb(var(--ch-edge) / 35%);
				box-shadow: 0 0 8px rgb(var(--ch-edge) / 55%);
				color: var(--color-text-strong);
			}
		}
	}

	/* The briefing's step list: numbered rows linking to each step page. */
	.step-list {
		display: grid;
		gap: var(--space-2);
		padding: 0;
		list-style: none;
		counter-reset: none;

		.row {
			grid-template-columns: 3rem minmax(0, 1fr) auto;
			align-items: center;
			color: inherit;
			text-decoration: none;

			&:hover {
				filter: brightness(1.2);
			}
		}

		.step-number {
			font-size: 1.8rem;
			text-align: center;
		}
	}

	.step-list-title {
		color: var(--color-sand);
		font-family: var(--font-display);
		font-size: 1rem;
	}

	.step-header {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		align-items: start;
		gap: var(--space-4);
		padding-block-start: var(--space-3);

		.article & h1 {
			margin: 0;
			font-size: 1.8rem;
		}
	}

	/* One segment per step: passed steps lit, the current one glowing. */
	.step-progress {
		display: grid;
		grid-auto-columns: minmax(0, 1fr);
		grid-auto-flow: column;
		gap: 4px;
		padding: 0;
		list-style: none;

		li {
			block-size: 4px;
			background: var(--color-track);
			box-shadow: inset 0 0 0 1px var(--color-line-low);
		}

		.done {
			background: var(--color-edge);
		}

		.current {
			background: var(--color-glow);
			box-shadow: 0 0 8px rgb(var(--ch-glow) / 60%);
		}

		/* Articles cap lists at a reading width; this spans the article. */
		.article & {
			max-inline-size: none;
		}

		.article & li + li {
			margin: 0;
		}
	}

	/* Outlined display numerals with the glow behind them. */
	.step-number {
		color: transparent;
		font-family: var(--font-display);
		font-size: 2.8rem;
		line-height: 1;
		-webkit-text-stroke: 1px var(--color-glow);
		text-shadow: 0 0 18px rgb(var(--ch-edge) / 40%);
	}


	/* A terminal is a shell session: "$" before each command, dim comments, and
	a live one ends in the .prompt cursor. */
	.terminal {
		position: relative;
		margin: 0;
		border: 1px solid var(--color-line-low);
		border-block-start: 2px solid rgb(var(--ch-prompt) / 55%);
		background:
			repeating-linear-gradient(to bottom, rgb(var(--ch-prompt) / 3%) 0 1px, transparent 1px 3px),
			rgb(var(--ch-ink) / 92%);
		box-shadow: 0 -6px 18px -12px rgb(var(--ch-prompt) / 60%);

		> figcaption {
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: var(--space-2);
			border-block-end: 1px solid var(--color-line-low);
			padding: var(--space-1) var(--space-2) var(--space-1) var(--space-3);
			font-family: var(--font-data);

			.label {
				font-family: var(--font-data);
				letter-spacing: 0;
				text-transform: none;
			}
		}
	}

	.terminal-screen {
		margin: 0;
		overflow-x: auto;
		padding: var(--space-3);
		color: var(--color-text);
		font-family: var(--font-data);
		font-size: 0.88rem;
		line-height: 1.6;
	}

	.terminal-command {
		color: var(--color-prompt);
		text-shadow: 0 0 6px rgb(var(--ch-prompt) / 35%);

		&::before {
			content: "$ ";
			color: var(--color-text-dim);
			text-shadow: none;
		}
	}

	.terminal-comment {
		color: var(--color-text-dim);
		font-style: italic;
	}


	/* File trees are code panels (pre.panel.tree, captioned with where they live): one line per
	entry with an indent guide per level, directories in info blue, entries a step
	added in success green with a "new" chip, and notes dim after an arrow. */
	.tree {
		--indent: 1.25rem;
	}

	/* The caption names where the tree lives, in action gold so it reads apart
	from the language captions of code panels. */
	.tree-label {
		color: var(--color-action);
	}

	.tree-line {
		display: flex;
		align-items: baseline;
		gap: var(--space-2);
		padding-inline-start: calc(var(--depth, 0) * var(--indent));
		background-image: repeating-linear-gradient(
			to right,
			var(--color-line-low) 0 1px,
			transparent 1px var(--indent)
		);
		background-position: 0.35rem 0;
		background-repeat: no-repeat;
		background-size: calc(var(--depth, 0) * var(--indent)) 100%;
		white-space: pre;
	}

	.tree-depth-1 { --depth: 1; }
	.tree-depth-2 { --depth: 2; }
	.tree-depth-3 { --depth: 3; }
	.tree-depth-4 { --depth: 4; }
	.tree-depth-5 { --depth: 5; }
	.tree-depth-6 { --depth: 6; }
	.tree-depth-7 { --depth: 7; }

	.tree-dir .tree-name {
		color: var(--color-info);
	}

	.tree-added .tree-name {
		color: var(--color-success);
		text-shadow: 0 0 6px rgb(var(--ch-prompt) / 30%);
	}

	.tree-badge {
		border: 1px solid rgb(var(--ch-prompt) / 45%);
		padding: 0 0.35em;
		color: var(--color-success);
		--track: 0.1em;
		font-size: 0.55rem;
	}

	.tree-note {
		color: var(--color-text-dim);

		&::before {
			content: "\2190\00A0";
		}
	}


	.featured {
		grid-template-columns: auto minmax(0, 1fr) auto;
		align-items: center;

		> .icon {
			inline-size: 2.5rem;
			block-size: 2.5rem;
			color: var(--color-action);
		}
	}

	/* Articles: the rail beside one article, stacked on narrow screens. The rail
	stays in view while the article scrolls. */
	.article-layout {
		--split-main: 14rem;

		align-items: start;
	}

	.article-nav {
		display: grid;
		gap: var(--space-3);

		@media (min-width: 60rem) {
			position: sticky;
			inset-block-start: calc(var(--topbar-height) + var(--space-5));
			max-block-size: calc(100dvh - var(--topbar-height) - 2 * var(--space-5));
			overflow-y: auto;
			scrollbar-color: rgb(var(--ch-glow) / 22%) transparent;
			scrollbar-width: thin;

			&::-webkit-scrollbar {
				inline-size: 3px;
			}

			&::-webkit-scrollbar-track {
				background: transparent;
			}

			&::-webkit-scrollbar-thumb {
				border-radius: 999px;
				background: rgb(var(--ch-glow) / 22%);
			}

			&::-webkit-scrollbar-thumb:hover {
				background: rgb(var(--ch-glow) / 48%);
			}
		}

		ol {
			display: grid;
			gap: 2px;
			padding: 0;
			list-style: none;
		}

		a,
		span {
			display: block;
			border-inline-start: 2px solid transparent;
			--track: 0.08em;
			padding: var(--space-1) var(--space-3);
			font-size: 0.72rem;
			text-decoration: none;
		}

		a {
			color: var(--color-text-dim);

			&:hover {
				border-color: var(--color-line);
				color: var(--color-text-strong);
			}

			&[aria-current="page"] {
				border-color: var(--color-glow);
				background: linear-gradient(90deg, rgb(var(--ch-edge) / 22%), transparent);
				color: var(--color-text-strong);
			}
		}

		span {
			color: var(--color-text-dim);
			opacity: 0.55;
		}
	}

	/* A category title above its pages in the rail. The first one sits under the
	   kicker; a later one leaves space after the pages above it. */
	.article-nav-category {
		margin-block: var(--space-2) calc(-1 * var(--space-2));
		border-inline-start: 2px solid transparent;
		padding-inline: var(--space-3);
		--track: 0.14em;
		color: var(--color-sand);
		font-size: 0.62rem;
		opacity: 0.8;
	}

	/* The current page's own sections, under its link in the rail. */
	.article-subnav {
		margin-block: 2px;
		margin-inline-start: var(--space-3);
		border-inline-start: 1px solid var(--color-line-low);

		a {
			padding-block: 1px;
			padding-inline: var(--space-3);
			border-inline-start: 2px solid transparent;
			color: var(--color-text-dim);
			font-family: var(--font-text);
			font-size: 0.78rem;
			letter-spacing: 0;
			text-transform: none;

			&:hover {
				border-color: var(--color-glow);
				color: var(--color-text-strong);
			}
		}
	}

	.article {
		min-inline-size: 0;
		max-inline-size: 52rem;
		padding: var(--space-4) var(--space-3);

		@media (min-width: 44rem) {
			padding: var(--space-4) var(--space-6);
		}

		/* .article-body holds the article in one document format. */
		:is(&, .article-body) > * + * {
			margin-block-start: var(--space-4);
		}

		/* A result belongs to the example above it, so it sits against that
		example and leaves more space before the next block. */
		.result {
			margin-block-start: var(--space-2);
			margin-block-end: var(--space-6);
		}

		/* A result or an error belongs to the example above it. Another alert
		after an example, such as a note or a checkpoint, keeps its own space. */
		:is(.code-block + .result, .code-block + .alert.danger) {
			margin-block-start: 0;
		}

		.code-block + .alert.danger {
			margin-block-end: var(--space-6);
		}

		:is(&, .article-body) > :where(p, ul, ol, blockquote) {
			max-inline-size: 65ch;
		}

		p,
		li {
			line-height: 1.7;
		}

		li + li {
			margin-block-start: var(--space-2);
		}

		h1 {
			margin-block-start: var(--space-5);
			font-size: clamp(1.375rem, 1rem + 1.6vw, 2.25rem);
			text-wrap: balance;
		}

		h2 {
			margin-block-start: var(--space-7);
			border-block-start: 1px solid var(--color-line-low);
			padding-block-start: var(--space-5);
			font-size: 1.3rem;
		}

		:not(pre) > code {
			border: 1px solid var(--color-line-low);
			padding: 0.05em 0.3em;
			background: rgb(var(--ch-info) / 8%);
			color: var(--color-info);
			overflow-wrap: anywhere;
		}

	}

	.option-cards {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-3);
	}

	.option-card {
		flex: 1 1 19rem;
		min-inline-size: 0;
		padding: var(--space-3);
		border: 1px solid var(--color-line-low);
		background: rgb(var(--ch-info) / 4%);
		overflow-wrap: anywhere;

		h3 {
			margin: 0;
			font-size: 1rem;
			font-family: var(--font-data);
			text-transform: none;
			letter-spacing: normal;
		}

		> * + * {
			margin-block-start: var(--space-2);
		}

		ul {
			padding: 0;
			list-style: none;
		}

		li + li {
			margin-block-start: 0;
		}
	}

	/* Mermaid diagrams, drawn without Mermaid's own colours, as blueprints on a
	grid. */
	.diagram {
		overflow-x: auto;
		border: 1px solid var(--color-line);
		border-block-end: 2px solid var(--color-glow);
		padding: var(--space-5);
		background:
			linear-gradient(var(--color-glow), var(--color-glow)) top left / 14px 2px no-repeat,
			linear-gradient(var(--color-glow), var(--color-glow)) top left / 2px 14px no-repeat,
			linear-gradient(var(--color-glow), var(--color-glow)) bottom right / 14px 2px no-repeat,
			linear-gradient(var(--color-glow), var(--color-glow)) bottom right / 2px 14px no-repeat,
			repeating-linear-gradient(transparent 0 3px, rgb(var(--ch-glow) / 4%) 3px 4px),
			radial-gradient(ellipse at 50% 100%, rgb(var(--ch-glow) / 18%), transparent 70%),
			repeating-linear-gradient(90deg, rgb(var(--ch-edge) / 9%) 0 1px, transparent 1px 24px),
			repeating-linear-gradient(rgb(var(--ch-edge) / 9%) 0 1px, transparent 1px 24px),
			rgb(var(--ch-ink) / 88%);
		box-shadow: 0 6px 18px -8px var(--color-glow);

		svg {
			display: block;
			margin-inline: auto;
			block-size: auto;
			font-family: var(--font-text);
		}

		.node :is(rect, polygon, circle, path) {
			fill: var(--color-deep);
			stroke: var(--color-edge);
			stroke-width: 1px;
		}

		/* Mermaid's label groups are not the theme's HUD .label. */
		.label {
			color: inherit;
			font: inherit;
			letter-spacing: normal;
			text-transform: none;
		}

		foreignObject {
			overflow: visible;
		}

		/* Mermaid measured labels in a wider fallback font, so a label can take
		fewer lines here than its box allows: center it (overriding inline styles). */
		foreignObject > div {
			display: flex !important;
			align-items: center;
			justify-content: center;
			block-size: 100%;
		}

		/* HTML labels were measured at Mermaid's 1.5 line height. */
		.nodeLabel {
			color: var(--color-text);

			p {
				margin: 0;
				line-height: 1.5;
			}
		}

		.edgeLabel,
		.edgeLabel p,
		.labelBkg {
			background: var(--color-void);
			color: var(--color-text-dim);
		}

		text {
			fill: var(--color-text);
		}

		.flowchart-link {
			fill: none;
			stroke: var(--color-glow);
			stroke-width: 1.5px;
			filter: drop-shadow(0 0 3px rgb(var(--ch-glow) / 55%));
		}

		marker path {
			fill: var(--color-glow);
			stroke: none;
		}

		.edgeLabel rect {
			fill: var(--color-void);
		}

		.edgeLabel text {
			fill: var(--color-text-dim);
		}
	}

	.heading-anchor {
		color: inherit;
		text-decoration: none;

		&:hover .heading-anchor-mark,
		&:focus-visible .heading-anchor-mark {
			opacity: 1;
		}
	}

	.heading-anchor-mark {
		margin-inline-start: 0.35em;
		color: var(--color-info);
		font-size: 0.6em;
		opacity: 0.4;
	}

	.article-pagination {
		display: flex;
		/* On a phone the two links take a line each rather than widening the
		page. */
		flex-wrap: wrap;
		justify-content: space-between;
		gap: var(--space-4);
		padding-block: var(--space-3);

		&:first-child {
			border-block-end: 1px solid var(--color-line-low);
		}

		&:last-child {
			margin-block-start: var(--space-7);
			border-block-start: 1px solid var(--color-line-low);
		}

		a,
		span[aria-disabled] {
			display: grid;
			min-inline-size: 0;
			--track: 0.06em;
			gap: var(--space-1);
			font-size: 0.8rem;
			text-decoration: none;
		}

		span[aria-disabled] {
			color: var(--color-text-dim);
			opacity: 0.55;
		}

		.article-next {
			margin-inline-start: auto;
			text-align: end;
		}

		.article-pagination-category {
			color: var(--color-sand);
		}
	}
}

/* Agreements retain the site frame, with a quiet reading column and a
section index derived from the same Markdown as the agreement. */
@layer pages {
	.legal-page {
		.legal-header {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			gap: var(--space-3);
			color: var(--color-text-dim);
		}

		.legal-layout {
			display: grid;
			grid-template-columns: minmax(0, 1fr);
			gap: var(--space-5);
			align-items: start;
		}

		.legal-contents {
			min-inline-size: 0;
			summary { cursor: pointer; font-weight: 600; }
			ol { list-style: none; padding: 0; }
			> ol { display: none; }
			li { margin-block: var(--space-2); }
			a { display: block; padding-block: var(--space-1); }
		}

		.legal-document {
			min-inline-size: 0;
			max-inline-size: 78ch;
			> * + * { margin-block-start: var(--space-5); }
		}

		.article {
			max-inline-size: none;
			overflow-wrap: anywhere;
			h1, h2 {
				font-family: var(--font-text);
				text-transform: none;
				letter-spacing: normal;
				font-weight: 600;
				line-height: 1.35;
			}
			h1 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2.2rem); margin-block-start: 0; }
			h2 { scroll-margin-block-start: 7rem; }
			table { inline-size: 100%; }
		}

		#eula-acceptance {
			scroll-margin-block-start: 7rem;
			h2 { font-family: var(--font-text); text-transform: none; letter-spacing: normal; }
		}

		@media (min-width: 64rem) {
			.legal-layout { grid-template-columns: 15rem minmax(0, 1fr); }
			.legal-contents {
				position: sticky;
				inset-block-start: 7rem;
				details { display: none; }
				> ol { display: block; }
			}
		}
	}
}

@media print {
	.legal-page {
		background: white;
		color: black;
		.legal-contents, #eula-acceptance, .topbar, .heading-anchor-mark { display: none; }
		.content, .legal-layout, .legal-document, .article { display: block; max-inline-size: none; padding: 0; }
		.panel { border: 0; border-image: none; background: white; box-shadow: none; color: black; }
		* { color: black !important; text-shadow: none !important; }
		a { color: black; text-decoration: none; }
		h1, h2 { break-after: avoid; }
		p, li { orphans: 3; widows: 3; }
	}
}