/* Prose — the text column of a textbook page.
   The page already sets white paper, black ink and a margin column. This file
   dresses the writing: a measure of about 66 characters, a clear step between
   heading levels, and enough space before a heading that a section reads as a
   section rather than a paragraph that got bold.

   Margin notes are produced by src/lib/margin-notes.ts, which wraps a block and
   its note in `.annot`. That wrapper is `display: contents`, so the block and
   the note become grid items of `.prose` itself and share a row. */

.prose {
	display: grid;
	grid-template-columns: var(--measure) var(--margin-col);
	column-gap: var(--margin-gap);
	align-items: start;
}

/* Everything that is writing goes in column 1 by default. */
.prose > * {
	grid-column: 1;
	min-width: 0;
}

.prose > .annot {
	display: contents;
}

.prose .annot > .note {
	grid-column: 2;
	grid-row: auto;
	align-self: start;
}

/* The note must share the row of the block it annotates. `display: contents`
   makes the wrapper's children grid items in source order, so the block takes
   row N and the note, coming immediately after, takes row N column 2. */

.prose > *:first-child { margin-top: 0; }

/* ── Headings ────────────────────────────────────────────────────────────── */

.prose h2,
.prose h3,
.prose h4,
.prose h5 {
	font-family: var(--display);
	font-weight: 500;
	line-height: 1.16;
	letter-spacing: -0.012em;
	text-wrap: balance;
	scroll-margin-top: 2rem;
}

.prose h2 {
	font-size: clamp(1.45rem, 1.2rem + 1vw, 1.95rem);
	margin: 3rem 0 1rem;
	padding-bottom: 0.4rem;
	border-bottom: 1px solid var(--rule);
}

.prose h3 {
	font-size: clamp(1.18rem, 1.05rem + 0.5vw, 1.4rem);
	margin: 2.25rem 0 0.7rem;
}

.prose h4 {
	font-size: 1.06rem;
	margin: 1.8rem 0 0.5rem;
}

.prose h5 {
	font-family: var(--serif);
	font-size: 0.82rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ink-faint);
	margin: 1.5rem 0 0.45rem;
}

.prose h2 + *,
.prose h3 + *,
.prose h4 + *,
.prose h5 + * { margin-top: 0; }

/* ── Body ──────────────────────────────────────────────────────────────── */

.prose p {
	margin: 0 0 1.15rem;
	text-wrap: pretty;
}

.prose strong { font-weight: 500; }

.prose em { font-style: italic; color: var(--ink-soft); }

.prose hr {
	border: 0;
	height: 1px;
	background: var(--rule);
	margin: 2.5rem 0;
}

/* ── Lists ─────────────────────────────────────────────────────────────── */

.prose ul,
.prose ol {
	margin: 0 0 1.25rem;
	padding-left: 1.35rem;
}

.prose li { margin-bottom: 0.4rem; text-wrap: pretty; }

.prose li::marker { color: var(--ink-faint); }

.prose li > ul,
.prose li > ol { margin: 0.4rem 0 0; }

.prose ul.contains-task-list { list-style: none; padding-left: 0.15rem; }

.prose .task-list-item { display: flex; gap: 0.5rem; align-items: baseline; }

.prose .task-list-item-checkbox {
	appearance: none;
	width: 0.7em;
	height: 0.7em;
	border: 1.5px solid var(--rule-strong);
	flex: none;
	transform: translateY(0.06em);
}

.prose .task-list-item-checkbox:checked {
	background: var(--ink);
	border-color: var(--ink);
}

/* ── Quotes ────────────────────────────────────────────────────────────── */

.prose blockquote {
	margin: 1.6rem 0;
	padding-left: 1.1rem;
	border-left: 2px solid var(--rule-strong);
	color: var(--ink-soft);
}

.prose blockquote p:last-child { margin-bottom: 0; }

/* ── Tables ────────────────────────────────────────────────────────────── */

.prose .table-wrap,
.prose table {
	overflow-x: auto;
}

.prose table {
	border-collapse: collapse;
	width: 100%;
	margin: 1.6rem 0;
	font-size: 0.93em;
	font-variant-numeric: tabular-nums;
}

.prose th,
.prose td {
	text-align: left;
	padding: 0.45rem 0.8rem 0.45rem 0;
	border-bottom: 1px solid var(--rule);
	vertical-align: top;
}

.prose th {
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ink-faint);
	border-bottom-color: var(--rule-strong);
	white-space: nowrap;
}

/* ── Code ──────────────────────────────────────────────────────────────── */

.prose code {
	font-family: var(--mono);
	font-size: 0.87em;
	background: var(--paper-tint);
	padding: 0.1em 0.32em;
}

.prose pre {
	margin: 1.5rem 0;
	padding: 0.9rem 1.05rem;
	overflow-x: auto;
	background: var(--paper-tint);
	border: 1px solid var(--rule);
	line-height: 1.55;
}

.prose pre code {
	background: none;
	padding: 0;
	font-size: 0.84em;
}

/* ── Diagrams ──────────────────────────────────────────────────────────── */

.prose svg[id^="mermaid"] {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 1.8rem 0;
}

/* ── Mathematics ───────────────────────────────────────────────────────── */

.prose .katex-display {
	margin: 1.6rem 0;
	overflow-x: auto;
	overflow-y: hidden;
	padding: 0.1rem 0;
}

.prose .katex { font-size: 1.02em; }

/* Display math is centred in the text column, not in the page. */
.prose .katex-display > .katex { white-space: normal; }

/* ── Figures ───────────────────────────────────────────────────────────── */

.prose figure { margin: 1.8rem 0; }

.prose figure img { max-width: 100%; height: auto; display: block; }

.prose figcaption {
	margin-top: 0.45rem;
	font-size: 0.85rem;
	color: var(--ink-soft);
}

/* ── Footnotes ─────────────────────────────────────────────────────────── */

.prose .footnotes {
	margin-top: 2.5rem;
	padding-top: 1rem;
	border-top: 1px solid var(--rule);
	font-size: 0.88em;
	color: var(--ink-soft);
}

.prose .footnotes-list { padding-left: 1.1rem; }

/* ── Definition lists ──────────────────────────────────────────────────── */

.prose dl { margin: 0 0 1.25rem; }

.prose dt { font-weight: 500; margin-top: 0.8rem; }

.prose dd { margin: 0.15rem 0 0 1.3rem; color: var(--ink-soft); }

/* ── Orphan notes ──────────────────────────────────────────────────────── */

.prose .note-orphan {
	font-size: 0.88rem;
	color: var(--ink-faint);
	font-style: italic;
}

/* ── Anchors on headings ───────────────────────────────────────────────── */

.prose .header-anchor {
	color: var(--rule-strong);
	text-decoration: none;
	opacity: 0;
	margin-left: 0.3em;
	transition: opacity 120ms ease;
}

.prose h2:hover .header-anchor,
.prose h3:hover .header-anchor,
.prose .header-anchor:focus-visible { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
	.prose .header-anchor { transition: none; }
}

/* ── Narrow: notes move under their block ──────────────────────────────── */

@media (max-width: 52rem) {
	.prose {
		grid-template-columns: minmax(0, 1fr);
		column-gap: 0;
	}

	.prose > .annot {
		display: block;
	}

	.prose .annot > .note,
	.prose > .note {
		grid-column: 1;
		display: block;
		margin-top: 0.9rem;
		padding-left: 0.9rem;
		border-left: 1px solid var(--rule);
	}
}