feat(nav): make book title in chapter header a link back to the book page

Adds a PageLines preference (Few/Normal/Many) that adjusts the paginated
container height via a rem offset on the existing calc(). The setting row
appears in Reader Settings → Layout only when Pages mode is active, matching
the style of all other setting rows. Persisted in localStorage (reader_layout_v1).

ui/src/lib/components/ListeningMode.svelte

@@ -34,6 +34,14 @@
 
 	// ── Chapter search ────────────────────────────────────────────────────────
 	let chapterSearch = $state('');
+
+	// Scroll the current chapter into view instantly (no animation) when the
+	// chapter modal opens. Applied to every chapter button; only scrolls when
+	// the chapter number matches the currently playing one. Runs once on mount
+	// before the browser paints so no scroll animation is ever visible.
+	function scrollIfActive(node: HTMLElement, isActive: boolean) {
+		if (isActive) node.scrollIntoView({ block: 'center', behavior: 'instant' });
+	}
 	const filteredChapters = $derived(
 		chapterSearch.trim() === ''
 			? audioStore.chapters
@@ -386,11 +394,12 @@
 			</div>
 			<!-- Chapter list -->
 			<div class="flex-1 overflow-y-auto">
-				{#each filteredChapters as ch (ch.number)}
-					<button
-						type="button"
-						onclick={() => playChapter(ch.number)}
-						class={cn(
+			{#each filteredChapters as ch (ch.number)}
+				<button
+					type="button"
+					onclick={() => playChapter(ch.number)}
+					use:scrollIfActive={ch.number === audioStore.chapter}
+					class={cn(
 							'w-full flex items-center gap-3 px-4 py-3 border-b border-(--color-border)/40 transition-colors text-left',
 							ch.number === audioStore.chapter ? 'bg-(--color-brand)/8' : 'hover:bg-(--color-surface-2)'
 						)}

ui/src/routes/+layout.svelte

@@ -2,7 +2,7 @@
 	import '../app.css';
 	import { page, navigating } from '$app/state';
 	import { goto } from '$app/navigation';
-	import { setContext } from 'svelte';
+	import { setContext, untrack } from 'svelte';
 	import type { Snippet } from 'svelte';
 	import type { LayoutData } from './$types';
 	import { audioStore } from '$lib/audio.svelte';
@@ -156,15 +156,23 @@
 	});
 
 	// Handle toggle requests from AudioPlayer controller.
+	// IMPORTANT: isPlaying must be read inside untrack() so the effect only
+	// re-runs when toggleRequest increments, not every time isPlaying changes.
+	// Without untrack the effect subscribes to both toggleRequest AND isPlaying,
+	// causing an infinite play/pause loop: play() fires onplay → isPlaying=true
+	// → effect re-runs → sees isPlaying=true → calls pause() → onpause fires
+	// → isPlaying=false → effect re-runs → calls play() → …
 	$effect(() => {
 		// Read toggleRequest to subscribe; ignore value 0 (initial).
 		const _req = audioStore.toggleRequest;
 		if (!audioEl || _req === 0) return;
-		if (audioStore.isPlaying) {
-			audioEl.pause();
-		} else {
-			audioEl.play().catch(() => {});
-		}
+		untrack(() => {
+			if (audioStore.isPlaying) {
+				audioEl!.pause();
+			} else {
+				audioEl!.play().catch(() => {});
+			}
+		});
 	});
 
 	// Handle seek requests from AudioPlayer controller.
@@ -381,9 +389,12 @@
 			</a>
 
 			{#if page.data.book?.title && /\/books\/[^/]+\/chapters\//.test(page.url.pathname)}
-				<span class="text-(--color-muted) text-sm truncate min-w-0 flex-1 sm:flex-none sm:max-w-xs">
+				<a
+					href="/books/{page.data.book.slug}"
+					class="text-(--color-muted) hover:text-(--color-text) text-sm truncate min-w-0 flex-1 sm:flex-none sm:max-w-xs transition-colors"
+				>
 					{page.data.book.title}
-				</span>
+				</a>
 			{/if}
 
 			{#if data.user}

ui/src/routes/books/[slug]/chapters/[n]/+page.svelte

@@ -53,6 +53,8 @@
 	type ReadWidth   = 'narrow' | 'normal' | 'wide';
 	type ParaStyle   = 'spaced' | 'indented';
 	type PlayerStyle = 'standard' | 'compact';
+	/** Controls how many lines fit on a page by adjusting the container height offset. */
+	type PageLines   = 'less' | 'normal' | 'more';
 
 	interface LayoutPrefs {
 		readMode:    ReadMode;
@@ -61,12 +63,19 @@
 		paraStyle:   ParaStyle;
 		focusMode:   boolean;
 		playerStyle: PlayerStyle;
+		pageLines:   PageLines;
 	}
 
 	const LAYOUT_KEY = 'reader_layout_v1';
-	const LINE_HEIGHTS: Record<LineSpacing, number> = { compact: 1.55, normal: 1.85, relaxed: 2.2 };
-	const READ_WIDTHS:  Record<ReadWidth,   string>  = { narrow: '58ch', normal: '72ch', wide: 'min(90ch, 100%)' };
-	const DEFAULT_LAYOUT: LayoutPrefs = { readMode: 'scroll', lineSpacing: 'normal', readWidth: 'normal', paraStyle: 'spaced', focusMode: false, playerStyle: 'standard' };
+	const LINE_HEIGHTS:    Record<LineSpacing, number> = { compact: 1.55, normal: 1.85, relaxed: 2.2 };
+	const READ_WIDTHS:     Record<ReadWidth,   string> = { narrow: '58ch', normal: '72ch', wide: 'min(90ch, 100%)' };
+	/**
+	 * Extra rem subtracted from (or added to) the paginated container height.
+	 * Normal (0rem) keeps the existing calc(); Less (-4rem) makes the container
+	 * shorter so fewer lines fit per page; More (+4rem) grows it for more lines.
+	 */
+	const PAGE_LINES_OFFSET: Record<PageLines, string> = { less: '4rem', normal: '0rem', more: '-4rem' };
+	const DEFAULT_LAYOUT: LayoutPrefs = { readMode: 'scroll', lineSpacing: 'normal', readWidth: 'normal', paraStyle: 'spaced', focusMode: false, playerStyle: 'standard', pageLines: 'normal' };
 
 	function loadLayout(): LayoutPrefs {
 		if (!browser) return DEFAULT_LAYOUT;
@@ -114,8 +123,10 @@
 
 	$effect(() => {
 		if (layout.readMode !== 'paginated') { pageIndex = 0; totalPages = 1; return; }
-		// Re-run when html changes or container is bound
+		// Re-run when html, container refs, or mini-player visibility changes
+		// (mini-player adds pb-24 which reduces the available viewport height)
 		void html; void paginatedContainerEl; void paginatedContentEl;
+		void audioStore.active; void audioExpanded;
 		requestAnimationFrame(() => {
 			if (!paginatedContainerEl || !paginatedContentEl) return;
 			const h = paginatedContainerEl.clientHeight;
@@ -542,7 +553,9 @@
 		role="none"
 		bind:this={paginatedContainerEl}
 		class="paginated-container mt-8"
-		style="height: {layout.focusMode ? 'calc(100svh - 8rem)' : 'calc(100svh - 26rem)'};"
+		style="height: {layout.focusMode
+			? 'calc(100svh - 8rem)'
+			: `calc(100svh - 26rem - ${PAGE_LINES_OFFSET[layout.pageLines]})`};"
 		onclick={handlePaginatedClick}
 	>
 		<div
@@ -783,6 +796,25 @@
 					</div>
 				</div>
 
+				{#if layout.readMode === 'paginated'}
+				<div class="flex items-center gap-3 px-3 py-2.5">
+					<span class="text-xs text-(--color-muted) w-16 shrink-0">Lines</span>
+					<div class="flex gap-1.5 flex-1">
+						{#each ([['less', 'Few'], ['normal', 'Normal'], ['more', 'Many']] as const) as [v, lbl]}
+							<button
+								type="button"
+								onclick={() => setLayout('pageLines', v)}
+								class="flex-1 py-1.5 rounded-lg border text-xs font-medium transition-colors
+									{layout.pageLines === v
+										? 'border-(--color-brand) bg-(--color-brand)/10 text-(--color-brand)'
+										: 'border-(--color-border) bg-(--color-surface-2) text-(--color-muted) hover:border-(--color-brand)/50 hover:text-(--color-text)'}"
+								aria-pressed={layout.pageLines === v}
+							>{lbl}</button>
+						{/each}
+					</div>
+				</div>
+				{/if}
+
 				<div class="flex items-center gap-3 px-3 py-2.5">
 					<span class="text-xs text-(--color-muted) w-16 shrink-0">Spacing</span>
 					<div class="flex gap-1.5 flex-1">