/* Long-form document pages. Loaded after /style.css, which owns the palette, the grid unit
   and the base link styles — everything here is layout and prose. */

:root {
	/* Headings, nav and metadata stay in the site's mono. Body prose does not: these pages run
	   to ~3000 words and mono at that length is tiring to read. */
	--sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--measure: 42rem;
	--rule: #1c212c;
}

body.doc {
	height: auto;
	min-height: 100%;
	display: flex;
	flex-direction: column;
	font-family: var(--sans);
	font-size: 1.0625rem;
	line-height: 1.7;
}

@media (max-width: 640px) {
	body.doc { font-size: 1rem; }
}

::selection {
	background: var(--accent);
	color: #fff;
}

/* The sticky bar sits over the top of a scrolled heading, so anchored jumps need clearance. */
html { scroll-behavior: smooth; }
:target { scroll-margin-top: 5rem; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}

/* ── masthead ─────────────────────────────────────────────────────────────────────────── */

/* The cascade runs behind the masthead only. Behind 3000 words it would fight the text, and
   the veil below fades it into the solid page so there is no seam where the band ends. */

.hero {
	position: relative;
	overflow: hidden;
	border-bottom: 1px solid var(--rule);
}

.hero #field {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
}

.hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background:
		linear-gradient(to bottom,
			rgba(13, 15, 20, 0.1) 0%,
			rgba(13, 15, 20, 0.45) 62%,
			var(--bg) 100%),
		radial-gradient(ellipse 66% 95% at 32% 46%,
			rgba(13, 15, 20, 0.9) 0%,
			rgba(13, 15, 20, 0.6) 44%,
			rgba(13, 15, 20, 0) 84%);
}

.hero-inner {
	position: relative;
	z-index: 2;
	max-width: var(--measure);
	margin: 0 auto;
	padding: 3.5rem 1.5rem 2.75rem;
}

@media (max-width: 640px) {
	.hero-inner { padding: 2.5rem 1.25rem 2rem; }
}

.brand {
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	font-size: 0.75rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--muted);
	text-decoration: none;
}

.brand:hover { color: var(--fg); }

.brand .mark {
	width: 0.75rem;
	height: 0.75rem;
	margin: 0;
	animation: none;
	flex: none;
}

.eyebrow {
	margin: 2.25rem 0 0.5rem;
	font-family: var(--mono);
	font-size: 0.75rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--accent);
}

.hero h1 {
	margin: 0;
	font-family: var(--mono);
	font-size: clamp(1.625rem, 5.5vw, 2.375rem);
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1.15;
}

.hero .meta {
	margin: 0.875rem 0 0;
	font-family: var(--mono);
	font-size: 0.8125rem;
	color: var(--muted);
}

/* ── sticky document nav ──────────────────────────────────────────────────────────────── */

.doc-nav {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem 1.5rem;
	max-width: var(--measure);
	margin: 0 auto;
	padding: 0.75rem 1.5rem;
	font-family: var(--mono);
	font-size: 0.8125rem;
}

/* The bar is full-bleed even though its contents align to the measure. */
.doc-nav-wrap {
	position: sticky;
	top: 0;
	z-index: 10;
	background: rgba(13, 15, 20, 0.92);
	border-bottom: 1px solid var(--rule);
	backdrop-filter: blur(8px);
}

.doc-nav ul {
	display: flex;
	gap: 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.doc-nav a {
	color: var(--muted);
	text-decoration: none;
	padding-bottom: 2px;
	border-bottom: 1px solid transparent;
}

.doc-nav a:hover { color: var(--fg); }

.doc-nav a[aria-current="page"] {
	color: var(--fg);
	border-bottom-color: var(--accent);
}

.doc-nav .app {
	color: var(--muted);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	font-size: 0.6875rem;
}

@media (max-width: 520px) {
	.doc-nav .app { display: none; }
	.doc-nav { padding: 0.75rem 1.25rem; }
}

/* ── document body ────────────────────────────────────────────────────────────────────── */

/* /style.css centres the landing page's single card through `main`; a document is a column. */
main.doc-body {
	display: block;
	min-height: 0;
	text-align: left;
	z-index: auto;
}

.doc-body {
	flex: 1;
	width: 100%;
	max-width: var(--measure);
	margin: 0 auto;
	padding: 3rem 1.5rem 4rem;
}

@media (max-width: 640px) {
	.doc-body { padding: 2.25rem 1.25rem 3rem; }
}

.lede-para {
	color: var(--fg);
	font-size: 1.125em;
	margin: 0 0 2.5rem;
}

/* Contents */

.contents {
	margin: 0 0 3.5rem;
	padding: 1.5rem 1.75rem;
	border: 1px solid var(--rule);
	background: rgba(23, 27, 35, 0.35);
}

.contents h2 {
	margin: 0 0 1rem;
	font-family: var(--mono);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--muted);
}

.contents ol {
	counter-reset: toc;
	margin: 0;
	padding: 0;
	list-style: none;
	columns: 2;
	column-gap: 2rem;
	font-family: var(--mono);
	font-size: 0.8125rem;
	line-height: 1.5;
}

@media (max-width: 640px) {
	.contents { padding: 1.25rem 1.25rem; }
	/* One column of 18 jump links is a lot of scroll before the document starts, so tighten it. */
	.contents ol { columns: 1; }
	.contents li { margin-bottom: 0.375rem; }
	.lede-para { font-size: 1.03125em; }
}

.contents li {
	counter-increment: toc;
	break-inside: avoid;
	margin-bottom: 0.625rem;
	padding-left: 2.25rem;
	text-indent: -2.25rem;
}

.contents li::before {
	content: counter(toc, decimal-leading-zero);
	display: inline-block;
	width: 2.25rem;
	color: var(--accent);
	text-indent: 0;
}

.contents a {
	color: var(--muted);
	text-decoration: none;
}

.contents a:hover {
	color: var(--fg);
	text-decoration: underline;
	text-decoration-color: var(--accent);
}

/* Sections */

.doc-body article { counter-reset: sec; }

.doc-body article h2 {
	counter-increment: sec;
	margin: 3.5rem 0 1rem;
	padding-top: 1.75rem;
	border-top: 1px solid var(--rule);
	font-family: var(--mono);
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: -0.01em;
	scroll-margin-top: 4.75rem;
}

.doc-body article h2::before {
	content: counter(sec, decimal-leading-zero);
	display: block;
	margin-bottom: 0.5rem;
	font-size: 0.75rem;
	font-weight: 400;
	letter-spacing: 0.16em;
	color: var(--accent);
}

.doc-body p {
	margin: 0 0 1.125rem;
	color: #c9cedb;
}

.doc-body article h2 + p { margin-top: 0; }

.doc-body ul {
	margin: 0 0 1.25rem;
	padding: 0;
	list-style: none;
	color: #c9cedb;
}

.doc-body li {
	position: relative;
	margin-bottom: 0.5rem;
	padding-left: 1.5rem;
}

/* One pixel, in the accent — the same mark the rest of the site is built from. */
.doc-body article li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.7em;
	width: 5px;
	height: 5px;
	background: var(--accent);
	opacity: 0.65;
}

.doc-body article a {
	color: var(--fg);
	text-decoration: underline;
	text-decoration-color: var(--accent);
	text-underline-offset: 3px;
}

.doc-body article a:hover { text-decoration-color: var(--fg); }

/* Effective-date line closing the document. */
.effective {
	margin-top: 2rem;
	font-family: var(--mono);
	font-size: 0.8125rem;
	color: var(--muted) !important;
}

/* ── footer ───────────────────────────────────────────────────────────────────────────── */

.doc-footer {
	border-top: 1px solid var(--rule);
}

.doc-footer .inner {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 2rem;
	justify-content: space-between;
	max-width: var(--measure);
	margin: 0 auto;
	padding: 2rem 1.5rem 3rem;
	font-family: var(--mono);
	font-size: 0.75rem;
	color: var(--muted);
}

.doc-footer p { margin: 0; }

.doc-footer a { color: var(--muted); }

.doc-footer a:hover { color: var(--fg); }

@media (max-width: 640px) {
	.doc-footer .inner { padding: 1.75rem 1.25rem 2.5rem; }
}

/* ── index ────────────────────────────────────────────────────────────────────────────── */

.doc-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.doc-list li {
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--rule);
}

.doc-list li:last-child { border-bottom: 1px solid var(--rule); }

.doc-list a {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.5rem 0.25rem;
	font-family: var(--mono);
	color: var(--fg);
	text-decoration: none;
}

.doc-list a:hover { background: rgba(23, 27, 35, 0.45); }

.doc-list .arrow {
	color: var(--accent);
	font-size: 0.875rem;
}

.doc-list .sub {
	display: block;
	margin-top: 0.375rem;
	font-family: var(--sans);
	font-size: 0.875rem;
	color: var(--muted);
}

/* ── print ────────────────────────────────────────────────────────────────────────────── */

@media print {
	body.doc {
		background: #fff;
		color: #000;
		font-size: 11pt;
	}

	.hero #field,
	.hero::after,
	.doc-nav-wrap,
	.contents,
	.brand .mark { display: none; }

	.hero { border-bottom: 1px solid #ccc; }

	/* The dark-theme rule colour is near-black, which prints as a heavy bar. */
	.doc-body article h2,
	.doc-footer,
	.doc-list li { border-color: #ccc; }

	/* The list marker is a background square, not a colour. */
	.doc-body article li::before { background: #000; }
	.hero .meta { color: #000; }
	.hero-inner,
	.doc-body,
	.doc-footer .inner { padding-left: 0; padding-right: 0; max-width: none; }
	.eyebrow, .doc-body article h2::before, .doc-body article li::before { color: #000; }
	.doc-body p, .doc-body ul { color: #000; }
	.doc-body article h2 { break-after: avoid; }
	.doc-body article a { color: #000; text-decoration: underline; }
	.doc-body article a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 8pt; }
}