/* Legal pages (/privacy/, /terms/). Loaded only on pages that list it in
   `extraCss`. A calm long-text layout: a short page
   head, a table of contents, and one readable column of prose. */

/* ---------- Page head (.page-head, layout.css) ---------- */
.legal-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s-2) var(--s-4);
	margin-top: var(--s-5);
	font-size: var(--fs-sm);
	color: var(--c-text-muted);
}

/* ---------- Body: contents + prose ---------- */
.legal-body {
	display: grid;
	gap: var(--s-7);
	padding-top: var(--section-y-tight);
	padding-bottom: var(--section-y);
}

@media (min-width: 961px) {
	.legal-body {
		grid-template-columns: 248px minmax(0, 1fr);
		gap: var(--s-8);
		align-items: start;
	}

	.legal-toc {
		position: sticky;
		top: calc(var(--header-h) + var(--s-4));
	}
}

.legal-toc {
	padding: var(--s-5);
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--r-lg);   /* as the About aside and press fact sheet */
}

.legal-toc__title { margin-bottom: var(--s-3); }

.legal-toc ol {
	list-style: decimal;
	/* Room for "10." to "12." inside the card's text edge. */
	padding-left: 1.8em;
	display: grid;
	gap: var(--s-2);
	font-size: var(--fs-sm);
	color: var(--c-text-muted);
}

.legal-toc a {
	color: var(--c-text);
	text-decoration-color: transparent;
}

.legal-toc a:hover {
	color: var(--c-heading);
	text-decoration-color: currentColor;
}

.legal-prose {
	max-width: 70ch;
	counter-reset: legal-section;
}

.legal-prose > section + section {
	margin-top: var(--s-7);
	padding-top: var(--s-7);
	border-top: 1px solid var(--c-line);
}

.legal-prose h2 {
	font-size: var(--fs-xl);
	margin-bottom: var(--s-4);
	counter-increment: legal-section;
}

.legal-prose h2::before {
	content: counter(legal-section) ". ";
	color: var(--c-text-muted);
}

.legal-prose h3 {
	font-size: var(--fs-base);
	margin: var(--s-5) 0 var(--s-2);
}

.legal-prose p,
.legal-prose ul,
.legal-prose ol,
.legal-prose dl,
.legal-prose address {
	margin-top: var(--s-4);
}

.legal-prose h2 + p,
.legal-prose h3 + p,
.legal-prose h3 + ul {
	margin-top: 0;
}

.legal-prose ul {
	list-style: disc;
	padding-left: 1.4em;
}

.legal-prose ol {
	list-style: decimal;
	padding-left: 1.4em;
}

.legal-prose li + li { margin-top: var(--s-2); }

.legal-prose li::marker { color: var(--c-text-muted); }

.legal-prose strong { color: var(--c-heading); }

.legal-prose address { font-style: normal; }

/* Who-does-what list (recipients, processors) */
.legal-parties {
	display: grid;
	gap: var(--s-3);
}

.legal-parties > div {
	padding: var(--s-4) var(--s-5);
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--r-md);
}

.legal-parties dt {
	font-family: var(--font-head);
	font-weight: 700;
	color: var(--c-heading);
}

.legal-parties dd { margin-top: var(--s-1); }

/* The short version, above the long one */
.legal-summary {
	margin-top: var(--s-6);
	padding: var(--s-5);
	max-width: 70ch;
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--r-md);
}

.legal-summary ul {
	list-style: disc;
	padding-left: 1.4em;
	display: grid;
	gap: var(--s-2);
}

.legal-summary li::marker { color: var(--c-earth-lit); }

/* ---------- Print / save as PDF (the terms must be storable) ---------- */
@page { margin: 18mm 16mm; }

@media print {
	.skip-link,
	.site-header,
	.site-footer,
	.legal-toc {
		display: none !important;
	}

	body,
	.page-head,
	.legal-summary,
	.legal-parties > div {
		background: #fff !important;
		color: #000 !important;
	}

	h1, h2, h3, dt, strong,
	.legal-prose h2::before,
	.legal-meta,
	.lede {
		color: #000 !important;
	}

	a { color: #000 !important; }

	/* Stand-in chips stay legible on a draft printed for approval. */
	.stand-in {
		color: #000 !important;
		border-color: #000 !important;
		background: none !important;
	}

	.legal-prose a[href^="http"]::after {
		content: " (" attr(href) ")";
		font-size: 0.85em;
		word-break: break-all;
	}

	/* The page margin is the only margin: head and body line up with it. */
	.container {
		max-width: none;
		padding-inline: 0;
	}

	.page-head,
	.legal-body {
		padding-block: 0 12pt;
		border: 0;
	}

	.legal-body { display: block; }

	.legal-prose,
	.legal-summary,
	.page-head .lede { max-width: none; }

	.legal-prose h2 { break-after: avoid; }
}