diff --git a/src/lib/components/PdfPageView.svelte b/src/lib/components/PdfPageView.svelte
index fa18c82..e7b467e 100644
--- a/src/lib/components/PdfPageView.svelte
+++ b/src/lib/components/PdfPageView.svelte
@@ -1,8 +1,14 @@
 <script lang="ts">
 	import { on } from 'svelte/events';
 	import { SvelteMap, SvelteSet } from 'svelte/reactivity';
+	import type { Snippet } from 'svelte';
 	import type { NormalizedDocument, SpeechSegment } from '$lib/domain/types';
-	import type { PageRect, SegmentPlacement } from '$lib/domain/pdf-layout';
+	import {
+		selectableWords,
+		type PageRect,
+		type SegmentPlacement,
+		type SelectableWord
+	} from '$lib/domain/pdf-layout';
 	import { openPdfRenderer } from '$lib/services/pdf-pages';
 	import { openPdfLayout } from '$lib/services/pdf-layout';
 	import { parseColor, type Rgb } from '$lib/domain/page-tone';
@@ -27,6 +33,27 @@
 		onPlaySegment: (segmentId: string) => void;
 		/** The reader scrolled by hand; whatever was following should stop. */
 		onManualScroll?: () => void;
+		/** A selection was made over the page, or cleared. Positions are in this
+		 * view's scroll space, which is why they are worked out here. */
+		onSelect?: (selection: PageSelection | undefined) => void;
+		/** What the reader lays over a selection — its actions, its explain
+		 * panel — rendered inside this view's scroll so it travels with the
+		 * page and is positioned in the same coordinates. */
+		overlay?: Snippet;
+	}
+
+	/** What a selection over the paper amounts to, in the terms the reader
+	 * already speaks: a passage and word to start from, one to stop at, and
+	 * where to put the actions. */
+	export interface PageSelection {
+		segmentId: string;
+		wordIndex: number;
+		endSegmentId: string;
+		endWordIndex: number;
+		excerpt: string;
+		left: number;
+		top: number;
+		placement: 'above' | 'below';
 	}
 
 	let {
@@ -40,7 +67,9 @@
 		assistantPointId,
 		follow = true,
 		onPlaySegment,
-		onManualScroll
+		onManualScroll,
+		onSelect,
+		overlay
 	}: Props = $props();
 
 	/** US Letter, for a document whose parse recorded no page sizes. */
@@ -66,6 +95,9 @@
 		{ width: number; tone: { paper: Rgb; ink: Rgb } | undefined }
 	>();
 	const placements = new SvelteMap<number, Map<string, SegmentPlacement>>();
+	/** Each page's words, tagged with the passage they belong to — the layer
+	 * that makes the paper selectable. */
+	const words = new SvelteMap<number, SelectableWord[]>();
 	let hovered = $state<{ page: number; segmentId: string }>();
 
 	let sizes = $derived.by(() => {
@@ -175,7 +207,57 @@
 			owedFollow = undefined;
 			onManualScroll?.();
 		};
+		// Watched on the document, not on the stack: a click that lands anywhere
+		// else — the sidebar, the player, the header — drops the selection, and
+		// the actions have to go with it. Listening only here left them stranded
+		// on the page with nothing that would dismiss them.
+		//
+		// A drag, though, is one gesture and not a stream of selections. The
+		// browser reports a new one on every frame of it, and offering each one
+		// back sent the actions chasing the pointer across the page, flashing
+		// as they went. Nothing is offered while a pointer is down; the whole
+		// gesture is read once, when it ends.
+		let selecting = false;
+		let queued = false;
+		const afterSelection = () => {
+			if (selecting || queued) return;
+			queued = true;
+			requestAnimationFrame(() => {
+				queued = false;
+				readSelection();
+			});
+		};
+		const startPress = (event: PointerEvent) => {
+			const target = event.target as HTMLElement | null;
+			// A press on the actions themselves is aimed at a button, and taking
+			// them away underneath it would mean the button was never clicked.
+			if (target?.closest('.selection-actions, .explain-box')) return;
+			selecting = true;
+			// Whatever is selected now is about to be replaced, so the actions
+			// go with the press rather than hovering over a selection that is
+			// being redrawn beneath them.
+			onSelect?.(undefined);
+			// Pressing on a blank part of the page — a margin, a figure, the gap
+			// between paragraphs — puts no caret anywhere, because there is no
+			// text node under the pointer to put one in. The browser therefore
+			// leaves the old selection standing, which is what made it feel
+			// impossible to dismiss. Clearing it by hand is what clicking off a
+			// selection does everywhere else.
+			if (target?.closest('.page-text span')) return;
+			window.getSelection()?.removeAllRanges();
+		};
+		// On the document, not the stack: a drag that starts on the page often
+		// ends off it, and the release is what the actions are waiting for.
+		const endPress = () => {
+			if (!selecting) return;
+			selecting = false;
+			afterSelection();
+		};
 		const removeListeners = [
+			on(node, 'pointerdown', startPress),
+			on(document, 'pointerup', endPress),
+			on(document, 'pointercancel', endPress),
+			on(document, 'selectionchange', afterSelection),
 			on(node, 'scroll', measureFocus, { passive: true }),
 			on(node, 'wheel', stopFollowing, { passive: true }),
 			on(node, 'touchmove', stopFollowing, { passive: true })
@@ -369,13 +451,19 @@
 		if (placedAgainst !== currentSegments) {
 			placedAgainst = currentSegments;
 			placements.clear();
+			words.clear();
 		}
 		const layout = openPdfLayout(book);
 		let cancelled = false;
 		for (const page of pages) {
 			if (placements.has(page)) continue;
-			void layout.placements(page, pageCount, currentSegments, blockText).then((placed) => {
-				if (!cancelled && placedAgainst === currentSegments) placements.set(page, placed);
+			void Promise.all([
+				layout.placements(page, pageCount, currentSegments, blockText),
+				layout.pageLayout(page, pageCount)
+			]).then(([placed, geometry]) => {
+				if (cancelled || placedAgainst !== currentSegments) return;
+				placements.set(page, placed);
+				words.set(page, selectableWords(geometry?.boxes ?? [], [...placed.values()]));
 			});
 		}
 		return () => {
@@ -383,6 +471,24 @@
 		};
 	});
 
+	/**
+	 * The invisible words have to sit exactly on top of the printed ones, or the
+	 * selection the browser paints lands beside the text it is selecting. Their
+	 * boxes are known; what is not is how wide the same string renders in the
+	 * font this view can actually use, so each is measured once and squeezed to
+	 * fit — which is what pdf.js's own text layer does, and for the same reason.
+	 */
+	const MEASURE_FONT = 'sans-serif';
+	let measurer: CanvasRenderingContext2D | null | undefined;
+
+	function widthScale(word: SelectableWord): number {
+		if (measurer === undefined) measurer = document.createElement('canvas').getContext('2d');
+		if (!measurer || !word.width || !word.height) return 1;
+		measurer.font = `${word.height}px ${MEASURE_FONT}`;
+		const natural = measurer.measureText(word.text).width;
+		return natural > 0 ? word.width / natural : 1;
+	}
+
 	function pageWidth(page: number): number {
 		return sizes[page - 1]?.width || FALLBACK_WIDTH;
 	}
@@ -462,6 +568,66 @@
 		hovered = segmentId ? { page, segmentId } : undefined;
 	}
 
+	/**
+	 * Read the browser's selection back as passages.
+	 *
+	 * Every word carries the passage it belongs to, so this is a matter of
+	 * asking the endpoints of the range what they are rather than working it
+	 * out from geometry. A selection that starts or ends on a word no passage
+	 * claimed — an axis label, part of an equation — falls back to the nearest
+	 * claimed word inside the range, and if there is none there is nothing to
+	 * play or annotate.
+	 */
+	function readSelection(): void {
+		if (!scroller) return;
+		const selection = window.getSelection();
+		if (!selection || selection.isCollapsed || selection.rangeCount === 0) {
+			onSelect?.(undefined);
+			return;
+		}
+		const range = selection.getRangeAt(0);
+		// A selection made elsewhere — the sidebar, the player's label — leaves
+		// nothing here to act on, and the actions must go with it. Returning
+		// quietly left them stranded on the page with no way to dismiss them.
+		if (!scroller.contains(range.commonAncestorContainer)) {
+			onSelect?.(undefined);
+			return;
+		}
+		const claimed = [...scroller.querySelectorAll<HTMLElement>('.page-text span[data-segment-id]')]
+			.filter((span) => range.intersectsNode(span))
+			.map((span) => ({
+				segmentId: span.dataset.segmentId ?? '',
+				wordIndex: Number(span.dataset.wordIndex ?? 0)
+			}));
+		if (!claimed.length) {
+			onSelect?.(undefined);
+			return;
+		}
+		const first = claimed[0];
+		const last = claimed[claimed.length - 1];
+		const bounds = range.getBoundingClientRect();
+		const stack = scroller.getBoundingClientRect();
+		const placement = bounds.top - stack.top >= 54 ? 'above' : 'below';
+		onSelect?.({
+			segmentId: first.segmentId,
+			wordIndex: first.wordIndex,
+			endSegmentId: last.segmentId,
+			endWordIndex: last.wordIndex,
+			excerpt: selection.toString().replace(/\s+/g, ' ').trim(),
+			left: Math.max(
+				120,
+				Math.min(
+					scroller.clientWidth - 120,
+					scroller.scrollLeft + bounds.left + bounds.width / 2 - stack.left
+				)
+			),
+			top:
+				scroller.scrollTop +
+				(placement === 'above' ? bounds.top - stack.top - 8 : bounds.bottom - stack.top + 8),
+			placement
+		});
+	}
+
 	function handleActivate(event: MouseEvent, page: number): void {
 		const { x, y } = pointerPoint(event, page);
 		const segmentId = segmentAt(page, x, y);
@@ -577,6 +743,18 @@
 				<canvas {@attach trackCanvas(size.page)} aria-label={`Page ${size.page} of ${book.title}`}
 				></canvas>
 				{#if live.has(size.page)}
+					<!-- The words, invisible, over the picture of them: this is what
+					     the browser selects, and each one already knows the passage
+					     it belongs to. Laid out in PDF points and scaled with the
+					     sheet, so zooming moves it without rebuilding it. -->
+					<div class="page-text" style:transform={`scale(${scale})`}>
+						{#each words.get(size.page) ?? [] as word, index (index)}<span
+								data-segment-id={word.segmentId}
+								data-word-index={word.wordIndex}
+								style={`left:${word.x}px;top:${word.y}px;font-size:${word.height}px;transform:scaleX(${widthScale(word)})`}
+								>{word.text}</span
+							>{word.endsLine ? '\n' : ' '}{/each}
+					</div>
 					<div class="page-marks" aria-hidden="true">
 						{#each marksFor(size.page, placed) as mark (mark.key)}
 							<span class="mark {mark.kind}" style={styleFor(mark.rect, size.page)}></span>
@@ -589,10 +767,14 @@
 			</div>
 		</div>
 	{/each}
+	{@render overlay?.()}
 </div>
 
 <style>
 	.page-stack {
+		/* The selection actions are absolutely positioned against this, and it
+		   is this scroll their coordinates are measured in. */
+		position: relative;
 		display: flex;
 		flex: 1;
 		flex-direction: column;
@@ -660,6 +842,45 @@
 		height: 100%;
 	}
 
+	/* Positioned in PDF points and scaled as a whole, so a zoom is a transform
+	   rather than a thousand style recalculations. The text is invisible and
+	   sized to its own box: what matters is that the browser's selection lands
+	   exactly on the word the page prints there. */
+	.page-text {
+		position: absolute;
+		top: 0;
+		left: 0;
+		/* Pinned: each word is squeezed to its box by a measurement taken in
+		   this same family. */
+		font-family: sans-serif;
+		/* The spaces and newlines between words are there so a copied selection
+		   reads properly, but they are the only children in normal flow — at any
+		   inherited size they stack up as a visible column of blank lines down
+		   the corner of the page. The words set their own size. */
+		font-size: 0;
+		line-height: 1;
+		white-space: pre;
+		transform-origin: 0 0;
+		color: transparent;
+		cursor: text;
+		user-select: text;
+	}
+
+	.page-text span {
+		position: absolute;
+		white-space: pre;
+		transform-origin: 0 0;
+	}
+
+	/* A selection paints its text in the browser's own colour, which overrides
+	   `color: transparent` and prints a second copy of every selected word over
+	   the picture of it. The highlight is wanted; the ghost text is not. */
+	.page-text ::selection {
+		background: color-mix(in srgb, var(--primary) 34%, transparent);
+		color: transparent;
+		-webkit-text-fill-color: transparent;
+	}
+
 	/* Multiply keeps the marks under the ink: a highlighted line stays as
 	   readable as an unhighlighted one, which is the whole point of reading
 	   the original. */
@@ -667,6 +888,9 @@
 		position: absolute;
 		mix-blend-mode: multiply;
 		inset: 0;
+		/* Painted over the words, so it must not stand between them and the
+		   pointer that is trying to select them. */
+		pointer-events: none;
 	}
 
 	.mark {
diff --git a/src/lib/domain/pdf-layout.spec.ts b/src/lib/domain/pdf-layout.spec.ts
index 29fac74..d9fe14d 100644
--- a/src/lib/domain/pdf-layout.spec.ts
+++ b/src/lib/domain/pdf-layout.spec.ts
@@ -7,6 +7,7 @@ import {
 	pageWordBoxes,
 	placeSegments,
 	readingOrder,
+	selectableWords,
 	segmentsForPage,
 	type PageWordBox,
 	type PlaceableSegment
@@ -399,3 +400,82 @@ describe('segmentsForPage', () => {
 		expect(placeables[0].matchText).toBeUndefined();
 	});
 });
+
+describe('selectableWords', () => {
+	const page = [
+		...line('The harbour master kept a ledger', 100),
+		...line('of every tide that entered', 120)
+	];
+
+	it('tags each word with the passage it belongs to', () => {
+		const [placement] = placeSegments(page, [placeable('s1', 'The harbour master')], 1);
+		const words = selectableWords(page, [placement]);
+		expect(words.slice(0, 3).map((word) => [word.text, word.segmentId, word.wordIndex])).toEqual([
+			['The', 's1', 0],
+			['harbour', 's1', 1],
+			['master', 's1', 2]
+		]);
+	});
+
+	it('keeps words no passage claimed, so they still select and copy', () => {
+		const [placement] = placeSegments(page, [placeable('s1', 'The harbour master')], 1);
+		const words = selectableWords(page, [placement]);
+		const orphan = words.find((word) => word.text === 'ledger');
+		expect(orphan).toBeDefined();
+		expect(orphan?.segmentId).toBeUndefined();
+	});
+
+	it('marks where a line ends, so copied text breaks where the page does', () => {
+		const words = selectableWords(page, []);
+		expect(words.find((word) => word.text === 'ledger')?.endsLine).toBe(true);
+		expect(words.find((word) => word.text === 'harbour')?.endsLine).toBeUndefined();
+		expect(words[words.length - 1].endsLine).toBe(true);
+	});
+
+	it('gives the earlier passage the word where two placements overlap', () => {
+		// Placement itself is monotonic and cannot produce this, but a table row
+		// and the paragraph it interrupts can end up claiming the same ground.
+		const shared = { x: 0, y: 100, width: 400, height: 12 };
+		const claim = (segmentId: string) => ({
+			segmentId,
+			page: 1,
+			rects: [shared],
+			wordRects: [shared],
+			coverage: 1
+		});
+		const words = selectableWords(line('one', 100), [claim('first'), claim('second')]);
+		expect(words[0].segmentId).toBe('first');
+	});
+
+	it('attributes the words of a passage placed only as a region', () => {
+		// A table row is placed by its cells, not by the words of its reading,
+		// so it carries rectangles but no per-word boxes.
+		const table = line('Self-Attention Onnd Restricted', 200);
+		const [placement] = placeSegments(
+			table,
+			[
+				placeable('row', 'Layer Type: Self-Attention.', {
+					matchText: 'Self-Attention Onnd Restricted'
+				})
+			],
+			1
+		);
+		expect(placement.wordRects.every((rect) => rect === undefined)).toBe(true);
+		const words = selectableWords(table, [placement]);
+		expect(words.map((word) => word.segmentId)).toEqual(['row', 'row', 'row']);
+		expect(words.map((word) => word.wordIndex)).toEqual([0, 0, 0]);
+	});
+
+	it('prefers a word’s own box to a region that also covers it', () => {
+		const rect = { x: 0, y: 100, width: 400, height: 12 };
+		const words = selectableWords(line('one', 100), [
+			{ segmentId: 'region', page: 1, rects: [rect], wordRects: [undefined], coverage: 1 },
+			{ segmentId: 'exact', page: 1, rects: [rect], wordRects: [rect], coverage: 1 }
+		]);
+		expect(words[0].segmentId).toBe('exact');
+	});
+
+	it('has nothing to offer for a page with no words', () => {
+		expect(selectableWords([], [])).toEqual([]);
+	});
+});
diff --git a/src/lib/domain/pdf-layout.ts b/src/lib/domain/pdf-layout.ts
index ce3a663..1d054ba 100644
--- a/src/lib/domain/pdf-layout.ts
+++ b/src/lib/domain/pdf-layout.ts
@@ -680,6 +680,82 @@ export function placeSegments(
  * to find the sentences that actually landed on it. */
 const SPILL_WORDS = 400;
 
+/** One word of a page, ready to be laid out as selectable text over it. */
+export interface SelectableWord extends PageRect {
+	text: string;
+	/** The passage this word belongs to, when placement found one. Words with
+	 * no passage — an axis label, an equation's characters, a running head —
+	 * are still selectable and still copy; they simply have nothing to play. */
+	segmentId?: string;
+	wordIndex?: number;
+	/** True when the next word begins a new line, so copied text breaks where
+	 * the page breaks. */
+	endsLine?: boolean;
+}
+
+/**
+ * The page's words, tagged with the passage each belongs to.
+ *
+ * This is what makes an original page selectable. Rather than laying pdf.js's
+ * own text layer over the canvas and then working out what a selection means,
+ * the layer is built from the same boxes the placement used — so a selected
+ * word already knows its passage and its position within it, and the reader's
+ * existing "play from here", "highlight" and "explain" paths take it exactly
+ * as they take a selection made in the reflowed view.
+ *
+ * A word is attributed to whichever placed passage's box contains its centre.
+ * Passages are considered in document order, so where two placements overlap —
+ * a table row and the paragraph it interrupts — the earlier one wins, which is
+ * the order a reader would read them in.
+ */
+export function selectableWords(
+	boxes: PageWordBox[],
+	placements: SegmentPlacement[]
+): SelectableWord[] {
+	const contains = (rect: PageRect, x: number, y: number) =>
+		x >= rect.x && x <= rect.x + rect.width && y >= rect.y && y <= rect.y + rect.height;
+	const targets: Array<{ rect: PageRect; segmentId: string; wordIndex: number }> = [];
+	// Region claims stand in where a passage has no per-word boxes at all: a
+	// table row is placed by its cells rather than by the words of its reading,
+	// so its words know their passage but not their position within it. Without
+	// this they would be the one part of the page that cannot be selected into
+	// a passage — and on a paper's title page that is most of it.
+	const regions: Array<{ rect: PageRect; segmentId: string }> = [];
+	for (const placement of placements) {
+		let placed = false;
+		placement.wordRects.forEach((rect, wordIndex) => {
+			if (!rect) return;
+			placed = true;
+			targets.push({ rect, segmentId: placement.segmentId, wordIndex });
+		});
+		if (placed) continue;
+		for (const rect of placement.rects) regions.push({ rect, segmentId: placement.segmentId });
+	}
+	return boxes.map((box, index) => {
+		const centerX = box.x + box.width / 2;
+		const centerY = box.y + box.height / 2;
+		const target =
+			targets.find(({ rect }) => contains(rect, centerX, centerY)) ??
+			regions
+				.filter(({ rect }) => contains(rect, centerX, centerY))
+				.map(({ segmentId }) => ({ segmentId, wordIndex: 0 }))[0];
+		const next = boxes[index + 1];
+		const endsLine =
+			!next ||
+			Math.abs(next.y + next.height / 2 - centerY) >= Math.max(box.height, next.height) / 2 ||
+			next.x + next.width < box.x;
+		return {
+			text: box.text,
+			x: box.x,
+			y: box.y,
+			width: box.width,
+			height: box.height,
+			...(target ? { segmentId: target.segmentId, wordIndex: target.wordIndex } : {}),
+			...(endsLine ? { endsLine: true } : {})
+		};
+	});
+}
+
 /** The passages to align against one page: everything anchored to it, plus a
  * stretch of each neighbour so a paragraph straddling the page break is placed
  * from whichever side is looking.
diff --git a/src/routes/read/+page.svelte b/src/routes/read/+page.svelte
index 00238ee..e330322 100644
--- a/src/routes/read/+page.svelte
+++ b/src/routes/read/+page.svelte
@@ -1404,6 +1404,141 @@
 	</div>
 {/snippet}
 
+<!-- The explain panel, defined here so both views can render it inside
+     their own scroll — its coordinates belong to whichever is showing. -->
+{#snippet explainPanel()}
+	{#if explainBox}
+		<div
+			class="explain-box"
+			class:below={explainBox.placement === 'below'}
+			style:left={`${explainBox.left}px`}
+			style:top={`${explainBox.top}px`}
+			role="dialog"
+			aria-label="Explain the selected passage"
+		>
+			<div class="explain-head">
+				<Icon icon={Sparkles} size={12} aria-hidden="true" />
+				<span class="explain-excerpt">{explainBox.selection}</span>
+				<button
+					class="explain-close"
+					type="button"
+					aria-label="Close the explain panel"
+					onclick={closeExplainBox}
+				>
+					<Icon icon={X} size={13} />
+				</button>
+			</div>
+			<div class="explain-row">
+				<textarea
+					rows="1"
+					placeholder="What are you wondering? (optional)"
+					aria-label="Your question about the selection"
+					disabled={explainStatus !== 'idle'}
+					bind:value={explainQuestion}
+					onkeydown={handleExplainKeydown}
+					{@attach focusExplainInput}></textarea>
+				{#if explainStatus === 'idle'}
+					<button
+						class="explain-run"
+						type="button"
+						aria-label="Explain aloud"
+						title="Explain aloud"
+						onclick={() => void runExplain()}
+					>
+						<Icon icon={Sparkles} size={13} />
+					</button>
+				{:else}
+					<button
+						class="explain-run thinking"
+						type="button"
+						aria-label="Cancel"
+						title="Cancel"
+						onclick={closeExplainBox}
+					>
+						<Icon icon={LoaderCircle} class="spin" size={13} />
+					</button>
+				{/if}
+			</div>
+			{#if explainError}
+				<p class="explain-error" role="alert">{explainError}</p>
+			{/if}
+		</div>
+	{/if}
+{/snippet}
+
+<!-- What the page view renders inside its own scroll: the same selection
+     actions and explain panel the reflowed canvas shows, positioned in that
+     view's coordinates. -->
+{#snippet pageOverlay()}
+	{@render selectionActions()}
+	{@render explainPanel()}
+{/snippet}
+
+<!-- The bar that appears over a selection. Defined here rather than inline
+     because both views need it: the reflowed canvas renders it directly, and
+     the page view is handed it to render inside its own scroll. -->
+{#snippet selectionActions()}
+	{#if narrationStartAction}
+		{@const selectedSegment = book?.segments.find(
+			(segment) => segment.id === narrationStartAction?.segmentId
+		)}
+		{#if selectedSegment}
+			<div
+				class="selection-actions"
+				class:below={narrationStartAction.placement === 'below'}
+				style:left={`${narrationStartAction.left}px`}
+				style:top={`${narrationStartAction.top}px`}
+				role="group"
+				aria-label="Actions for the selected text"
+			>
+				<button
+					class="selection-action"
+					type="button"
+					aria-label={`Play the selected text: ${narrationStartAction.excerpt}`}
+					onpointerdown={(event) => event.preventDefault()}
+					onclick={playSelectedPassage}
+				>
+					<Icon icon={Play} size={12} fill="currentColor" />
+					Play selection
+				</button>
+				<span class="selection-actions-divider" aria-hidden="true"></span>
+				<button
+					class="selection-action"
+					type="button"
+					aria-label={`Explain the selected text: ${narrationStartAction.excerpt}`}
+					onpointerdown={(event) => event.preventDefault()}
+					onclick={openExplainBox}
+				>
+					<Icon icon={Sparkles} size={12} />
+					Explain
+				</button>
+				<span class="selection-actions-divider" aria-hidden="true"></span>
+				<button
+					class="selection-action"
+					type="button"
+					aria-label={`Highlight the selected text: ${narrationStartAction.excerpt}`}
+					onpointerdown={(event) => event.preventDefault()}
+					onclick={() => annotateSelection(false)}
+				>
+					<Icon icon={Highlighter} size={12} />
+					Highlight
+				</button>
+				<span class="selection-actions-divider" aria-hidden="true"></span>
+				<button
+					class="selection-action"
+					type="button"
+					aria-label={`Add a margin note to the selected text: ${narrationStartAction.excerpt}`}
+					onpointerdown={(event) => event.preventDefault()}
+					onclick={() => annotateSelection(true)}
+				>
+					<Icon icon={StickyNote} size={12} />
+					Note
+				</button>
+			</div>
+		{/if}
+	{/if}
+{/snippet}
+
 {#snippet renderSegment(block: DocumentBlock, segment: SpeechSegment)}
 	{@const isActive = activeSegmentId === segment.id}
 	<span
@@ -2102,6 +2237,8 @@
 					follow={player.autoFollow}
 					onPlaySegment={playPlacedSegment}
 					onManualScroll={() => (player.autoFollow = false)}
+					onSelect={(selection) => (narrationStartAction = selection)}
+					overlay={pageOverlay}
 				/>
 			{:else}
 				<article
@@ -2145,65 +2282,7 @@
 						{/each}
 					</div>
 
-					{#if narrationStartAction}
-						{@const selectedSegment = book.segments.find(
-							(segment) => segment.id === narrationStartAction?.segmentId
-						)}
-						{#if selectedSegment}
-							<div
-								class="selection-actions"
-								class:below={narrationStartAction.placement === 'below'}
-								style:left={`${narrationStartAction.left}px`}
-								style:top={`${narrationStartAction.top}px`}
-								role="group"
-								aria-label="Actions for the selected text"
-							>
-								<button
-									class="selection-action"
-									type="button"
-									aria-label={`Play the selected text: ${narrationStartAction.excerpt}`}
-									onpointerdown={(event) => event.preventDefault()}
-									onclick={playSelectedPassage}
-								>
-									<Icon icon={Play} size={12} fill="currentColor" />
-									Play selection
-								</button>
-								<span class="selection-actions-divider" aria-hidden="true"></span>
-								<button
-									class="selection-action"
-									type="button"
-									aria-label={`Explain the selected text: ${narrationStartAction.excerpt}`}
-									onpointerdown={(event) => event.preventDefault()}
-									onclick={openExplainBox}
-								>
-									<Icon icon={Sparkles} size={12} />
-									Explain
-								</button>
-								<span class="selection-actions-divider" aria-hidden="true"></span>
-								<button
-									class="selection-action"
-									type="button"
-									aria-label={`Highlight the selected text: ${narrationStartAction.excerpt}`}
-									onpointerdown={(event) => event.preventDefault()}
-									onclick={() => annotateSelection(false)}
-								>
-									<Icon icon={Highlighter} size={12} />
-									Highlight
-								</button>
-								<span class="selection-actions-divider" aria-hidden="true"></span>
-								<button
-									class="selection-action"
-									type="button"
-									aria-label={`Add a margin note to the selected text: ${narrationStartAction.excerpt}`}
-									onpointerdown={(event) => event.preventDefault()}
-									onclick={() => annotateSelection(true)}
-								>
-									<Icon icon={StickyNote} size={12} />
-									Note
-								</button>
-							</div>
-						{/if}
-					{/if}
+					{@render selectionActions()}
 
 					{#each annotationMarkers as marker (marker.id)}
 						<button
@@ -2273,63 +2352,7 @@
 						</div>
 					{/if}
 
-					{#if explainBox}
-						<div
-							class="explain-box"
-							class:below={explainBox.placement === 'below'}
-							style:left={`${explainBox.left}px`}
-							style:top={`${explainBox.top}px`}
-							role="dialog"
-							aria-label="Explain the selected passage"
-						>
-							<div class="explain-head">
-								<Icon icon={Sparkles} size={12} aria-hidden="true" />
-								<span class="explain-excerpt">{explainBox.selection}</span>
-								<button
-									class="explain-close"
-									type="button"
-									aria-label="Close the explain panel"
-									onclick={closeExplainBox}
-								>
-									<Icon icon={X} size={13} />
-								</button>
-							</div>
-							<div class="explain-row">
-								<textarea
-									rows="1"
-									placeholder="What are you wondering? (optional)"
-									aria-label="Your question about the selection"
-									disabled={explainStatus !== 'idle'}
-									bind:value={explainQuestion}
-									onkeydown={handleExplainKeydown}
-									{@attach focusExplainInput}></textarea>
-								{#if explainStatus === 'idle'}
-									<button
-										class="explain-run"
-										type="button"
-										aria-label="Explain aloud"
-										title="Explain aloud"
-										onclick={() => void runExplain()}
-									>
-										<Icon icon={Sparkles} size={13} />
-									</button>
-								{:else}
-									<button
-										class="explain-run thinking"
-										type="button"
-										aria-label="Cancel"
-										title="Cancel"
-										onclick={closeExplainBox}
-									>
-										<Icon icon={LoaderCircle} class="spin" size={13} />
-									</button>
-								{/if}
-							</div>
-							{#if explainError}
-								<p class="explain-error" role="alert">{explainError}</p>
-							{/if}
-						</div>
-					{/if}
+					{@render explainPanel()}
 				</article>
 			{/if}
 			<p class="sr-only" aria-live="polite">{narrationAnnouncement}</p>
diff --git a/tests/reader.e2e.ts b/tests/reader.e2e.ts
index 329ee74..92f4e11 100644
--- a/tests/reader.e2e.ts
+++ b/tests/reader.e2e.ts
@@ -1903,6 +1903,185 @@ test('reads a PDF as its own pages, with the spoken passage painted on', async (
  * other — it steps through them one at a time. */
 const THEME_COUNT = 12;
 
+test('selects text on an original page and acts on it', async ({ page }) => {
+	await openReadyLibrary(page);
+	const pdf = await PDFDocument.create();
+	const font = await pdf.embedFont(StandardFonts.Helvetica);
+	const sheet = pdf.addPage([612, 792]);
+	sheet.drawText('Ledgers of the Coast', { x: 72, y: 720, size: 22, font });
+	sheet.drawText('The harbour master kept a ledger of every tide.', {
+		x: 72,
+		y: 660,
+		size: 12,
+		font
+	});
+	sheet.drawText('Each entry recorded the hour and the weather.', {
+		x: 72,
+		y: 640,
+		size: 12,
+		font
+	});
+	await page.locator('#document-upload').setInputFiles({
+		name: 'ledgers.pdf',
+		mimeType: 'application/pdf',
+		buffer: Buffer.from(await pdf.save())
+	});
+	await expect(page.locator('.reading-canvas')).toBeVisible({ timeout: 60_000 });
+	await page.getByRole('button', { name: /Switch view/ }).click();
+	const slot = page.locator('.page-slot[data-page="1"]');
+	await expect
+		.poll(async () => slot.locator('canvas').evaluate((node: HTMLCanvasElement) => node.width), {
+			timeout: 30_000
+		})
+		.toBeGreaterThan(400);
+
+	// The paper carries a word for every word printed on it, and almost all of
+	// them know which passage they belong to.
+	const spans = slot.locator('.page-text span');
+	await expect.poll(async () => spans.count()).toBeGreaterThan(10);
+	expect(await slot.locator('.page-text span[data-segment-id]').count()).toBeGreaterThan(
+		(await spans.count()) * 0.8
+	);
+
+	// Drag across part of the first body line.
+	const drag = await page.evaluate(() => {
+		const words = [
+			...document.querySelectorAll<HTMLElement>('.page-slot[data-page="1"] .page-text span')
+		];
+		const start = words.find((word) => word.textContent === 'harbour');
+		const end = words.find((word) => word.textContent === 'ledger');
+		if (!start || !end) return null;
+		const a = start.getBoundingClientRect();
+		const b = end.getBoundingClientRect();
+		return { x1: a.x + 1, y1: a.y + a.height / 2, x2: b.right - 1, y2: b.y + b.height / 2 };
+	});
+	expect(drag).not.toBeNull();
+	await page.mouse.move(drag!.x1, drag!.y1);
+	await page.mouse.down();
+	await page.mouse.move(drag!.x2, drag!.y2, { steps: 10 });
+	// Mid-drag the selection is still being drawn, and the actions must not be
+	// chasing the pointer across the page. They wait for the release.
+	await page.evaluate(
+		() => new Promise((resolve) => requestAnimationFrame(() => requestAnimationFrame(resolve)))
+	);
+	expect(await page.locator('.selection-actions').count()).toBe(0);
+	await page.mouse.up();
+	expect(await page.evaluate(() => getSelection()?.toString() ?? '')).toContain('harbour');
+
+	// The actions travel with the page, in its own scroll.
+	const actions = page.getByRole('group', { name: 'Actions for the selected text' });
+	await expect(actions).toBeVisible();
+	expect(await page.locator('.page-stack .selection-actions').count()).toBe(1);
+
+	// Highlighting from the paper leaves a mark on the paper.
+	await actions.getByRole('button', { name: /^Highlight/ }).click();
+	await expect.poll(async () => page.locator('.mark.annotated').count()).toBeGreaterThan(0);
+
+	// Clicking away puts the actions away — whether the click lands on the page
+	// or anywhere else. The selection is watched on the document for exactly
+	// this: a click on the sidebar drops it, and used to leave them stranded.
+	const select = async () => {
+		await page.mouse.move(drag!.x1, drag!.y1);
+		await page.mouse.down();
+		await page.mouse.move(drag!.x2, drag!.y2, { steps: 10 });
+		await page.mouse.up();
+		await expect(actions).toBeVisible();
+	};
+	await select();
+	await page.mouse.click(drag!.x1 + 20, drag!.y1 + 120);
+	await expect(actions).toHaveCount(0);
+
+	await select();
+	// Pressed on the header rather than on a link: the point is that a press
+	// outside the page drops the selection, not that navigating away does.
+	const bar = await page.locator('.reader-commandbar').boundingBox();
+	await page.mouse.click(bar!.x + 6, bar!.y + bar!.height / 2);
+	await expect(actions).toHaveCount(0);
+
+	// And a selection can be played from where it was printed. Last, because
+	// playing scrolls the page and moves everything measured above.
+	await select();
+	await actions.getByRole('button', { name: /^Play the selected/ }).click();
+	await expect(page.getByRole('button', { name: 'Pause' })).toBeVisible({ timeout: 20_000 });
+});
+
+test('selecting an original page does not print the words twice', async ({ page }) => {
+	await openReadyLibrary(page);
+	const pdf = await PDFDocument.create();
+	const font = await pdf.embedFont(StandardFonts.Helvetica);
+	const sheet = pdf.addPage([612, 792]);
+	sheet.drawText('Ledgers of the Coast', { x: 72, y: 720, size: 22, font });
+	sheet.drawText('The harbour master kept a ledger of every tide.', {
+		x: 72,
+		y: 660,
+		size: 12,
+		font
+	});
+	await page.locator('#document-upload').setInputFiles({
+		name: 'ledgers.pdf',
+		mimeType: 'application/pdf',
+		buffer: Buffer.from(await pdf.save())
+	});
+	await expect(page.locator('.reading-canvas')).toBeVisible({ timeout: 60_000 });
+	await page.getByRole('button', { name: /Switch view/ }).click();
+	const slot = page.locator('.page-slot[data-page="1"]');
+	await expect
+		.poll(async () => slot.locator('canvas').evaluate((node: HTMLCanvasElement) => node.width), {
+			timeout: 30_000
+		})
+		.toBeGreaterThan(400);
+	await expect.poll(async () => slot.locator('.page-text span').count()).toBeGreaterThan(5);
+
+	// A selection paints its text in the browser's own colour unless told not
+	// to, which prints a second copy of every selected word over the picture of
+	// it. Ink is the lightest thing on a dark page, so a ghost shows up as new
+	// light pixels appearing where there were none.
+	const region = await page.evaluate(() => {
+		const words = [
+			...document.querySelectorAll<HTMLElement>('.page-slot[data-page="1"] .page-text span')
+		];
+		const start = words.find((word) => word.textContent === 'harbour');
+		const end = words.find((word) => word.textContent === 'ledger');
+		if (!start || !end) return null;
+		const a = start.getBoundingClientRect();
+		const b = end.getBoundingClientRect();
+		return {
+			x1: a.x + 1,
+			y1: a.y + a.height / 2,
+			x2: b.right - 1,
+			y2: b.y + b.height / 2,
+			clip: { x: a.x - 8, y: a.y - 8, width: b.right - a.x + 16, height: a.height + 16 }
+		};
+	});
+	expect(region).not.toBeNull();
+	const inkPixels = async () => {
+		const shot = await page.screenshot({ clip: region!.clip });
+		const { createCanvas, loadImage } = await import('@napi-rs/canvas');
+		const image = await loadImage(shot);
+		const canvas = createCanvas(image.width, image.height);
+		const context = canvas.getContext('2d');
+		context.drawImage(image, 0, 0);
+		const { data } = context.getImageData(0, 0, image.width, image.height);
+		let light = 0;
+		for (let index = 0; index < data.length; index += 4) {
+			if (0.2126 * data[index] + 0.7152 * data[index + 1] + 0.0722 * data[index + 2] > 200) {
+				light += 1;
+			}
+		}
+		return light;
+	};
+	const before = await inkPixels();
+	await page.mouse.move(region!.x1, region!.y1);
+	await page.mouse.down();
+	await page.mouse.move(region!.x2, region!.y2, { steps: 10 });
+	await page.mouse.up();
+	await expect(page.getByRole('group', { name: 'Actions for the selected text' })).toBeVisible();
+	const after = await inkPixels();
+	// The highlight is a wash well below ink brightness, so selecting should not
+	// add light pixels at all; a ghost copy of the words would add thousands.
+	expect(after).toBeLessThan(before * 1.15 + 50);
+});
+
 test('draws each original page once while the reader scrolls back and forth', async ({ page }) => {
 	await openReadyLibrary(page);
 	const pdf = await PDFDocument.create();