/* =========================================================
 *
 *  alt — the reading experience
 *
 *  Styles the exact markup inc/render.php's ltl_render_chapter() emits
 *  (unchanged, reused as-is): bare <p>, <blockquote><p>, <h2 id> with a
 *  leading <a class="anchor">, <ul class="list">. Footnote markup
 *  (.notes/.note-ref) is intentionally NOT styled here — it comes free,
 *  correctly themed, from the reused root css/notes.css, which reads
 *  colour through the same --ink/--rule/--accent tokens tokens.css
 *  already defines.
 *
 * ========================================================= */

/* ---------- reading progress ---------- */

.reading-progress {
	position: sticky;
	top: 0;
	z-index: 41;
	height: 3px;
	background: transparent;
}

.reading-progress span {
	display: block;
	height: 100%;
	width: 0%;
	background: var(--accent);
	transition: width .1s linear;
}

/* ---------- chapter head ---------- */

.chapter-head { padding-block: var(--space-6) var(--space-5); }

.chapter-label {
	font-size: var(--text-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--accent);
	margin: 0 0 var(--space-3);
}

.chapter-title {
	font-size: var(--text-3xl);
	max-width: var(--measure);
}

.chapter-byline {
	color: var(--ink-faint);
	font-size: var(--text-sm);
	margin-top: var(--space-4);
}

.summary {
	font-size: var(--text-lg);
	color: var(--ink-soft);
	max-width: var(--measure);
	margin-top: var(--space-5);
	padding-inline-start: var(--space-4);
	border-inline-start: 3px solid var(--accent);
}

/* ---------- body layout: prose + optional TOC rail ---------- */

.chapter-body { padding-block: var(--space-6) var(--space-7); }

@media (min-width: 62em) {
	.chapter-body {
		display: grid;
		grid-template-columns: var(--measure) 1fr;
		gap: var(--space-7);
		align-items: start;
	}
}

.toc {
	background: var(--card);
	border: 1px solid var(--rule);
	border-radius: var(--radius-md);
	padding: var(--space-4) var(--space-5);
	margin-bottom: var(--space-6);
}

.toc__heading {
	font-size: var(--text-xs);
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--ink-faint);
	margin-bottom: var(--space-3);
}

.toc ol { display: grid; gap: var(--space-2); counter-reset: toc; }
.toc li { font-size: var(--text-sm); }
.toc a { color: var(--ink-soft); text-decoration: none; display: block; padding: .15em 0; }
.toc a:hover { color: var(--accent); }
.toc a[aria-current] { color: var(--accent); font-weight: 700; }

@media (min-width: 62em) {
	.toc {
		grid-column: 2;
		grid-row: 1 / span 2;
		position: sticky;
		top: calc(3px + var(--space-5));
		max-height: calc(100vh - var(--space-7));
		overflow-y: auto;
	}
}

/* Base .prose typography (h2/p/blockquote/ul.list) lives in main.css,
   not here: css/player.css's own .transcript rules on recording.php
   are explicitly "Set in .prose" too ("a transcript reads in whatever
   the active style uses for a chapter"), so that base has to be
   always loaded, not conditional on this chapter-only stylesheet. Only
   the chapter page's grid placement is chapter-specific. */
@media (min-width: 62em) { .prose { grid-column: 1; } }

/* ---------- chapter foot ---------- */

.chapter-foot {
	padding-block: var(--space-6) var(--space-8);
	color: var(--ink-soft);
	max-width: var(--measure);
}

.chapter-pager {
	display: grid;
	gap: var(--space-4);
	max-width: var(--measure);
	margin-bottom: var(--space-6);
}

@media (min-width: 36em) { .chapter-pager { grid-template-columns: 1fr 1fr; } }

.chapter-pager__link {
	display: block;
	background: var(--card);
	border: 1px solid var(--rule);
	border-radius: var(--radius-md);
	padding: var(--space-4) var(--space-5);
	text-decoration: none;
	color: inherit;
	transition: border-color .15s, box-shadow .15s;
}

.chapter-pager__link:hover { border-color: var(--accent); box-shadow: var(--shadow-sm); }
.chapter-pager__link--next { text-align: right; }

.chapter-pager__label {
	display: block;
	font-size: var(--text-xs);
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--ink-faint);
	margin-bottom: .3em;
}

.chapter-pager__title { font-weight: 600; }