Harden sync and security; add IQ Bible, templates, password reset, backups

Sync and data safety
- Autosave flushes on leaving a study or the tab; storage-full errors are reported
- Unsynced studies, deletes and ink are queued and retried when back online
- Deletes propagate across devices (with a "Keep it" undo) and no longer resurrect
- Server assigns study versions (no client-clock conflicts); "Combine both"
  merges a conflicted study chunk by chunk
- Reading-plan progress made offline is merged, not overwritten; plans, ink and
  marks are cleared from the device on sign-out

Security
- Block SSRF through the ntfy reminder URL; failure-only rate limiting per IP and
  account; constant-time login; TOTP replay protection; input validation;
  SESSION_SECRET required in production; admin user delete fixed
- Forgot password: one-time code sent to the account's ntfy topic

Features
- IQ Bible proxy (route allow-list, text-only caching per its terms): more
  commentaries, lexicons, study aids, daily verse and devotional, plan calendar
  export, narrations, podcast background
- Study templates, reading-plan catch-up, account export, daily database snapshots

Tests and tooling
- ESLint config; App tests split into src/test; tests for sync queues, library
  hook, merge, templates, IQ Bible UI and reset form

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

.gitignore

@@ -10,3 +10,4 @@ coverage/
 .api.pid
 .api.log
 .DS_Store
+.env

README.md

@@ -42,6 +42,18 @@ http://localhost:5173. Dev mode is much slower, so don't use it for real users.
 
 ---
 
+## Optional keys (set in `.env` or the environment)
+
+| Variable | What it turns on |
+| --- | --- |
+| `SESSION_SECRET` | **Required in production.** A long random string; the server refuses to start without it. |
+| `ADMIN_EMAIL` | The one admin account. |
+| `ESV_API_KEY`, `API_BIBLE_KEY` | ESV, NLT, CSB and NASB in the Reader. |
+| `IQBIBLE_API_KEY` | IQ Bible: more commentaries, lexicons (BDB, LSJ, Abbott-Smith), places, topics, people, textual notes, Gospel parallels, daily verse and Spurgeon devotional, plan calendar export, more audio narrations, and background for podcast prompts. Hidden when unset. |
+| `IQBIBLE_CACHE_HOURS` | Leave unset unless IQ Bible has given written permission to cache non-verse data; only verse/chapter text is cached by default (24h), as their terms require. |
+| `BACKUP_KEEP`, `BACKUP_DISABLED=1` | The server saves a snapshot of the whole database once a day to `DATA_DIR/backups` (default: keep 7). Restore with `scripts/restore-data.sh`. |
+| `ALLOW_PRIVATE_NTFY=1` | Lets reading reminders use an ntfy server on your own network (blocked by default). |
+
 ## Production Install (Ubuntu / systemd)
 
 Installs the app as a persistent systemd service under `/opt/study-app`.
@@ -134,3 +146,13 @@ See [scripts/backup-data.sh](scripts/backup-data.sh) and [scripts/restore-data.s
 ## License
 
 Private / personal use.
+
+
+## Development
+
+```bash
+npm run test:run   # all tests
+npm run lint       # ESLint (errors fail; warnings are advice)
+```
+
+Forgotten passwords: the sign-in page's "Forgot your password?" sends a one-time code to the account's ntfy topic (the one used for reading reminders). Accounts without a topic still ask the administrator for a temporary password.

eslint.config.js

@@ -0,0 +1,33 @@
+import js from '@eslint/js';
+import globals from 'globals';
+import reactHooks from 'eslint-plugin-react-hooks';
+
+export default [
+  { ignores: ['dist/**', 'coverage/**', 'node_modules/**', 'server/data/**', 'public/**'] },
+  js.configs.recommended,
+  {
+    files: ['src/**/*.{js,jsx}'],
+    languageOptions: {
+      ecmaVersion: 'latest',
+      sourceType: 'module',
+      globals: { ...globals.browser },
+      parserOptions: { ecmaFeatures: { jsx: true } },
+    },
+    plugins: { 'react-hooks': reactHooks },
+    rules: {
+      'react-hooks/rules-of-hooks': 'error',
+      'react-hooks/exhaustive-deps': 'warn',
+      'no-unused-vars': ['warn', { varsIgnorePattern: '^_|^[A-Z]', argsIgnorePattern: '^_', caughtErrors: 'none' }],
+      'no-empty': ['error', { allowEmptyCatch: true }],
+    },
+  },
+  {
+    files: ['server/**/*.js', 'scripts/**/*.mjs', 'vite.config.js', 'eslint.config.js', 'postcss.config.js', 'tailwind.config.js'],
+    languageOptions: { ecmaVersion: 'latest', sourceType: 'module', globals: { ...globals.node } },
+    rules: { 'no-unused-vars': ['warn', { argsIgnorePattern: '^_', caughtErrors: 'none' }], 'no-empty': ['error', { allowEmptyCatch: true }] },
+  },
+  {
+    files: ['**/*.test.{js,jsx}', 'src/setupTests.js', 'src/test/**'],
+    languageOptions: { globals: { ...globals.browser, ...globals.node, vi: 'readonly' } },
+  },
+];

index.html

@@ -2,14 +2,14 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Bible Study Project</title>
 
     <!-- PWA manifest -->
     <link rel="manifest" href="/manifest.json" />
 
     <!-- Theme / status bar -->
-    <meta name="theme-color" content="#0f172a" />
+    <meta name="theme-color" content="#f1ece0" />
 
     <!-- iOS PWA -->
     <meta name="apple-mobile-web-app-capable" content="yes" />
@@ -20,7 +20,7 @@
     <!-- Fallback icon for browsers -->
     <link rel="icon" type="image/png" sizes="192x192" href="/icon-192.png" />
   </head>
-  <body class="bg-slate-50 text-slate-900">
+  <body>
     <div id="root"></div>
     <script type="module" src="/src/main.jsx"></script>
   </body>

package.json

@@ -14,7 +14,8 @@
     "test:run": "vitest run",
     "coverage": "vitest run --coverage",
     "backup": "bash scripts/backup-data.sh",
-    "restore": "bash scripts/restore-data.sh"
+    "restore": "bash scripts/restore-data.sh",
+    "lint": "eslint ."
   },
   "dependencies": {
     "bcryptjs": "^3.0.3",
@@ -33,6 +34,7 @@
     "react-dom": "^19.0.0"
   },
   "devDependencies": {
+    "@eslint/js": "^10.0.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.6.1",
@@ -40,6 +42,10 @@
     "@vitest/coverage-v8": "^4.1.7",
     "autoprefixer": "^10.4.19",
     "csv-parse": "^6.2.1",
+    "eslint": "^10.12.0",
+    "eslint-plugin-react-hooks": "^7.1.1",
+    "eslint-plugin-react-refresh": "^0.5.7",
+    "globals": "^17.13.0",
     "jsdom": "^29.1.1",
     "postcss": "^8.4.35",
     "tailwindcss": "^3.4.4",

public/logo.svg

@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" role="img" aria-label="Bible Study Project">
+  <defs>
+    <radialGradient id="glow" cx="50%" cy="34%" r="45%">
+      <stop offset="0" stop-color="#fbbf24" stop-opacity=".35"/>
+      <stop offset="1" stop-color="#fbbf24" stop-opacity="0"/>
+    </radialGradient>
+  </defs>
+  <rect width="512" height="512" rx="112" fill="#0f172a"/>
+  <rect width="512" height="512" rx="112" fill="url(#glow)"/>
+  <!-- cross -->
+  <rect x="238" y="82" width="36" height="170" rx="6" fill="#fbbf24"/>
+  <rect x="200" y="122" width="112" height="34" rx="6" fill="#fbbf24"/>
+  <!-- open book -->
+  <path d="M256 392 C206 356 146 350 80 366 L80 262 C146 246 206 252 256 286 Z" fill="#f8fafc"/>
+  <path d="M256 392 C306 356 366 350 432 366 L432 262 C366 246 306 252 256 286 Z" fill="#e2e8f0"/>
+  <path d="M60 384 C136 366 206 374 256 414 C306 374 376 366 452 384" fill="none" stroke="#fbbf24" stroke-width="14" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M256 286 V392" stroke="#0f172a" stroke-width="6" opacity=".35"/>
+</svg>

public/manifest.json

@@ -6,8 +6,8 @@
   "scope": "/",
   "display": "standalone",
   "orientation": "any",
-  "background_color": "#f8fafc",
+  "background_color": "#faf7f0",
-  "theme_color": "#0f172a",
+  "theme_color": "#f1ece0",
   "icons": [
     {
       "src": "/icon-192.png",
@@ -19,7 +19,13 @@
       "src": "/icon-512.png",
       "sizes": "512x512",
       "type": "image/png",
-      "purpose": "any maskable"
+      "purpose": "any"
+    },
+    {
+      "src": "/icon-maskable-512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "maskable"
     }
   ]
 }

public/plan-covers/README.txt

@@ -0,0 +1,18 @@
+Drop a cover photo here for each built-in reading plan, named exactly:
+
+  bible-year.jpg      Whole Bible in a Year
+  bible-90.jpg        Whole Bible in 90 Days
+  nt-90.jpg           New Testament in 90 Days
+  nt-30.jpg           New Testament in 30 Days
+  gospels-30.jpg      The Gospels in 30 Days
+  psalms-30.jpg       Psalms in 30 Days
+  proverbs-31.jpg     Proverbs in 31 Days
+  pentateuch-60.jpg   The Pentateuch in 60 Days
+  wisdom-40.jpg       Wisdom Literature in 40 Days
+
+Landscape orientation, ~1200px wide, works best (cards crop to a 16:9 box).
+Any plan without a matching file just shows its colorful gradient + icon —
+nothing breaks if some are missing.
+
+See src/utils/readingPlans.js -> PIXABAY_SEARCH_LINKS for a Pixabay search
+link per plan to help pick one.

public/sw.js

@@ -1,6 +1,9 @@
-const SHELL = 'bible-shell-v1';
+const SHELL = 'bible-shell-v2';
 const API   = 'bible-api-v1';
-const BIBLE_ORIGINS = ['https://bible.helloao.org', 'https://bolls.life'];
+// Chapter text, interlinear cross-refs, and (BSB) chapter audio all come from
+// these origins — cache them so the reader, reading plans, and audio all keep
+// working offline once you've visited a passage before.
+const BIBLE_ORIGINS = ['https://bible.helloao.org', 'https://bolls.life', 'https://audio.bible.helloao.org'];
 
 self.addEventListener('install', (e) => {
   e.waitUntil(
@@ -24,15 +27,23 @@ self.addEventListener('fetch', (e) => {
   const { request } = e;
   const url = request.url;
 
-  // Never intercept API routes — let Express handle them
+  // Never intercept this app's own API routes — let Express handle them. (Only same-origin ones: the
-  if (new URL(url).pathname.startsWith('/api/')) return;
+  // Bible text at bible.helloao.org/api/... must pass through to the offline cache below.)
+  const { origin, pathname } = new URL(url);
+  if (origin === self.location.origin && pathname.startsWith('/api/')) return;
 
-  // External Bible API: network-first, fall back to cache
+  // External Bible API (text, cross-refs, audio): network-first, fall back to cache.
+  // Audio elements often issue Range requests, which come back as 206 Partial
+  // Content — the Cache API throws on those, so only cache full (200) responses.
   if (BIBLE_ORIGINS.some(o => url.startsWith(o))) {
     e.respondWith(
       fetch(request)
         .then(res => {
-          if (res.ok) caches.open(API).then(c => c.put(request, res.clone()));
+          // Clone *now*: once the page starts reading the body a later clone() throws and nothing is saved.
+          if (res.status === 200) {
+            const copy = res.clone();
+            e.waitUntil(caches.open(API).then(c => c.put(request, copy)).catch(() => {}));
+          }
           return res;
         })
         .catch(() =>
@@ -51,7 +62,10 @@ self.addEventListener('fetch', (e) => {
     e.respondWith(
       fetch(request)
         .then(res => {
-          if (res.ok) caches.open(SHELL).then(c => c.put(request, res.clone()));
+          if (res.ok) {
+            const copy = res.clone();
+            e.waitUntil(caches.open(SHELL).then(c => c.put(request, copy)).catch(() => {}));
+          }
           return res;
         })
         .catch(() =>
@@ -70,7 +84,10 @@ self.addEventListener('fetch', (e) => {
         c.match(request).then(hit => {
           if (hit) return hit;
           return fetch(request).then(res => {
-            if (res.ok) c.put(request, res.clone());
+            if (res.ok) {
+              const copy = res.clone();
+              e.waitUntil(c.put(request, copy).catch(() => {}));
+            }
             return res;
           });
         })

server/accountExport.js

@@ -0,0 +1,32 @@
+// Everything one account holds on the server, in the same file format the app's own "Download backup"
+// makes, so it can be restored from Settings on any device.
+export const BACKUP_APP = 'bible-study-project';
+export const BACKUP_VERSION = 1;
+
+// `store` supplies the account's data: { projects(), prefs(), marks(), ink(), plans() }.
+export function buildAccountExport(user, store, now = new Date()) {
+  const prefs = store.prefs() ?? {};
+  const marks = store.marks() ?? {};
+  const plans = store.plans() ?? {};
+  return {
+    app: BACKUP_APP,
+    version: BACKUP_VERSION,
+    exportedAt: now.toISOString(),
+    account: user.email,
+    source: 'server',
+    projects: store.projects(),
+    reader: {
+      bookmarks: marks.bookmarks ?? {},
+      highlights: marks.highlights ?? [],
+      colorLabels: prefs.colorLabels?.v ?? {},
+      ink: store.ink() ?? {},
+    },
+    readingPlans: {
+      progress: plans.progress ?? [],
+      customPlans: plans.customPlans ?? [],
+      activity: plans.activity ?? [],
+    },
+  };
+}
+
+export const accountExportName = (now = new Date()) => `bible-study-account-${now.toISOString().slice(0, 10)}.json`;

server/accountExport.test.js

@@ -0,0 +1,33 @@
+// @vitest-environment node
+import { test, expect } from 'vitest';
+import { buildAccountExport, accountExportName, BACKUP_APP } from './accountExport.js';
+import { listSnapshots, pruneSnapshots } from './backups.js';
+import { mkdtempSync, writeFileSync, readdirSync } from 'fs';
+import { tmpdir } from 'os';
+import { join } from 'path';
+
+test('the account export has the same shape as the in-app backup', () => {
+  const out = buildAccountExport({ email: 'a@b.co' }, {
+    projects: () => [{ id: 'p', title: 'T', chapters: [] }],
+    prefs: () => ({ colorLabels: { v: { '#fef08a': 'Promises' }, at: 1 } }),
+    marks: () => ({ bookmarks: { 'JHN-3-16': '#fff' }, highlights: [{ id: 'h' }] }),
+    ink: () => ({ JHN_3: [[1, 2]] }),
+    plans: () => ({ progress: [{ id: 'x' }] }),
+  }, new Date('2026-10-06T10:00:00Z'));
+  expect(out.app).toBe(BACKUP_APP);
+  expect(out.account).toBe('a@b.co');
+  expect(out.reader.colorLabels).toEqual({ '#fef08a': 'Promises' });
+  expect(out.reader.bookmarks['JHN-3-16']).toBe('#fff');
+  expect(out.readingPlans).toEqual({ progress: [{ id: 'x' }], customPlans: [], activity: [] });
+  expect(accountExportName(new Date('2026-10-06T10:00:00Z'))).toBe('bible-study-account-2026-10-06.json');
+});
+
+test('only the newest snapshots are kept, and always at least one', () => {
+  const dir = mkdtempSync(join(tmpdir(), 'snap-'));
+  ['2026-10-01-03-00', '2026-10-02-03-00', '2026-10-03-03-00', '2026-10-04-03-00'].forEach((d) => writeFileSync(join(dir, `projects-${d}.db`), 'x'));
+  writeFileSync(join(dir, 'notes.txt'), 'not a snapshot');
+  expect(listSnapshots(dir).map((s) => s.name)[0]).toBe('projects-2026-10-04-03-00.db');
+  expect(pruneSnapshots(2, dir)).toEqual(['projects-2026-10-02-03-00.db', 'projects-2026-10-01-03-00.db']);
+  expect(pruneSnapshots(0, dir)).toHaveLength(1); // keep at least the newest
+  expect(readdirSync(dir).sort()).toEqual(['notes.txt', 'projects-2026-10-04-03-00.db']);
+});

server/auth.js

@@ -92,3 +92,10 @@ export async function consumeBackupCode(submitted, hashes) {
 export function generateTemporaryPassword() {
   return randomBytes(6).toString('hex');
 }
+
+// A one-time password-reset code: 8 characters from an alphabet without look-alikes (no 0/O, 1/I/L).
+const RESET_ALPHABET = 'ABCDEFGHJKMNPQRSTUVWXYZ23456789';
+export function generateResetCode() {
+  return Array.from(randomBytes(8), (b) => RESET_ALPHABET[b % RESET_ALPHABET.length]).join('');
+}
+export const normalizeResetCode = (code) => String(code ?? '').toUpperCase().replace(/[^A-Z0-9]/g, '');

server/backups.js

@@ -0,0 +1,45 @@
+// Automatic daily snapshots of the whole database (every account), kept next to it in DATA_DIR/backups.
+// A snapshot is a complete, consistent copy made while the app keeps running, and is restored with
+// scripts/restore-data.sh. BACKUP_KEEP sets how many to keep (default 7); BACKUP_DISABLED=1 turns it off.
+import { existsSync, mkdirSync, readdirSync, statSync, unlinkSync } from 'fs';
+import { join } from 'path';
+import { backupDatabase, dataDir } from './db.js';
+
+const DAY = 24 * 60 * 60 * 1000;
+export const backupDir = () => join(dataDir(), 'backups');
+const stamp = (d) => d.toISOString().replace(/[:T]/g, '-').slice(0, 16);
+const isSnapshot = (name) => /^projects-\d{4}-\d{2}-\d{2}-\d{2}-\d{2}\.db$/.test(name);
+
+export function listSnapshots(dir = backupDir()) {
+  if (!existsSync(dir)) return [];
+  return readdirSync(dir).filter(isSnapshot).sort().reverse()
+    .map((name) => ({ name, bytes: statSync(join(dir, name)).size, at: statSync(join(dir, name)).mtimeMs }));
+}
+
+// Deletes all but the newest `keep` snapshots; returns the names removed.
+export function pruneSnapshots(keep = 7, dir = backupDir()) {
+  const old = listSnapshots(dir).slice(Math.max(1, keep));
+  old.forEach((s) => unlinkSync(join(dir, s.name)));
+  return old.map((s) => s.name);
+}
+
+export async function runBackup(now = new Date()) {
+  const dir = backupDir();
+  mkdirSync(dir, { recursive: true });
+  const file = join(dir, `projects-${stamp(now)}.db`);
+  await backupDatabase(file);
+  pruneSnapshots(Number(process.env.BACKUP_KEEP) || 7, dir);
+  return file;
+}
+
+// Takes a snapshot when the newest is more than a day old (checked hourly, and once at start-up).
+export function startBackupScheduler() {
+  if (process.env.BACKUP_DISABLED === '1') return;
+  const tick = () => {
+    const latest = listSnapshots()[0];
+    if (latest && Date.now() - latest.at < DAY) return;
+    runBackup().then((f) => console.log(`Database snapshot saved: ${f}`)).catch((err) => console.error('Database snapshot failed:', err.message));
+  };
+  setTimeout(tick, 30_000).unref();
+  setInterval(tick, 60 * 60 * 1000).unref();
+}

server/bibleApi.js

@@ -0,0 +1,206 @@
+// Proxy for licensed translations (NLT, CSB, NASB) served by api.bible.
+// The API key stays on the server (API_BIBLE_KEY, loaded from .env if present);
+// the browser only ever talks to /api/bible/...
+import { existsSync, readFileSync } from 'fs';
+import { fileURLToPath } from 'url';
+import { dirname, join } from 'path';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+
+// Minimal .env loader so the key doesn't have to be exported in every launcher
+// (setup.sh, systemd, docker). Real environment variables win.
+const envPath = join(__dirname, '..', '.env');
+if (existsSync(envPath)) {
+  for (const line of readFileSync(envPath, 'utf8').split('\n')) {
+    const m = line.match(/^\s*([A-Za-z_][A-Za-z0-9_]*)\s*=\s*(.*?)\s*$/);
+    if (m && process.env[m[1]] === undefined) process.env[m[1]] = m[2].replace(/^(['"])(.*)\1$/, '$2');
+  }
+}
+
+const API_BASE = 'https://rest.api.bible/v1';
+
+// Canonical book order (index + 1 = the book number the ESV API uses in ranges).
+const BOOK_ORDER = ['GEN','EXO','LEV','NUM','DEU','JOS','JDG','RUT','1SA','2SA','1KI','2KI','1CH','2CH','EZR','NEH','EST','JOB','PSA','PRO','ECC','SNG','ISA','JER','LAM','EZK','DAN','HOS','JOL','AMO','OBA','JON','MIC','NAM','HAB','ZEP','HAG','ZEC','MAL','MAT','MRK','LUK','JHN','ACT','ROM','1CO','2CO','GAL','EPH','PHP','COL','1TH','2TH','1TI','2TI','TIT','PHM','HEB','JAS','1PE','2PE','1JN','2JN','3JN','JUD','REV'];
+
+// ESV search returns "Psalm 23:1"-style references; map the names back to abbreviations.
+const ESV_NAMES = ['Genesis','Exodus','Leviticus','Numbers','Deuteronomy','Joshua','Judges','Ruth','1 Samuel','2 Samuel','1 Kings','2 Kings','1 Chronicles','2 Chronicles','Ezra','Nehemiah','Esther','Job','Psalm','Proverbs','Ecclesiastes','Song of Solomon','Isaiah','Jeremiah','Lamentations','Ezekiel','Daniel','Hosea','Joel','Amos','Obadiah','Jonah','Micah','Nahum','Habakkuk','Zephaniah','Haggai','Zechariah','Malachi','Matthew','Mark','Luke','John','Acts','Romans','1 Corinthians','2 Corinthians','Galatians','Ephesians','Philippians','Colossians','1 Thessalonians','2 Thessalonians','1 Timothy','2 Timothy','Titus','Philemon','Hebrews','James','1 Peter','2 Peter','1 John','2 John','3 John','Jude','Revelation'];
+const ABBREV_BY_NAME = new Map(ESV_NAMES.map((n, i) => [n.toLowerCase(), BOOK_ORDER[i]]));
+ABBREV_BY_NAME.set('psalms', 'PSA');
+ABBREV_BY_NAME.set('song of songs', 'SNG');
+
+export function parseEsvReference(ref) {
+  const m = String(ref).match(/^(.+?)\s+(\d+):(\d+)/);
+  const bookAbbrev = m && ABBREV_BY_NAME.get(m[1].toLowerCase());
+  return bookAbbrev ? { bookAbbrev, chapter: Number(m[2]), verse: Number(m[3]) } : null;
+}
+
+export const LICENSED_TRANSLATIONS = {
+  ESV: { provider: 'esv', name: 'English Standard Version' },
+  NLT: { provider: 'api.bible', bibleId: 'd6e14a625393b4da-01', name: 'New Living Translation' },
+  CSB: { provider: 'api.bible', bibleId: 'a556c5305ee15c3f-01', name: 'Christian Standard Bible' },
+  NASB: { provider: 'api.bible', bibleId: 'b8ee27bcd1cae43a-01', name: 'New American Standard Bible (1995)' },
+};
+
+const CACHE_TTL = 24 * 60 * 60 * 1000;
+const CACHE_MAX = 1000;
+// Crossway limits how much ESV text an app may store, so ESV chapters are only
+// held briefly and in small numbers (enough to absorb repeat loads).
+const ESV_CACHE_TTL = 60 * 60 * 1000;
+const ESV_CACHE_MAX = 20;
+const cache = new Map(); // "NLT/PSA/23" -> { at, payload }
+
+// api.bible returns plain text with inline "[12]" verse markers, poetry line
+// breaks, and stray "#" / nbsp characters. Split it back into { number, text }.
+export function parseChapterText(content) {
+  const clean = String(content ?? '')
+    .replace(/\u00a0/g, ' ')
+    .replace(/#/g, '');
+  const parts = clean.split(/\[(\d+)\]/);
+  const verses = [];
+  for (let i = 1; i < parts.length; i += 2) {
+    const text = parts[i + 1].replace(/\s+/g, ' ').trim().replace(/\s+,$/, '');
+    if (text) verses.push({ number: Number(parts[i]), text });
+  }
+  return verses;
+}
+
+export function registerBibleRoutes(app, requireAuth) {
+  app.get('/api/bible/translations', requireAuth, (_req, res) => {
+    res.json(Object.entries(LICENSED_TRANSLATIONS).map(([id, t]) => ({
+      id, name: t.name, available: Boolean(t.provider === 'esv' ? process.env.ESV_API_KEY : process.env.API_BIBLE_KEY),
+    })));
+  });
+
+  // Whole-Bible search for the licensed translations, proxied so the keys stay
+  // server-side. Results are { bookAbbrev, chapter, verse, text }; nothing is cached.
+  const SEARCH_PAGE_SIZE = 25;
+  app.get('/api/bible/:translation/search', requireAuth, async (req, res) => {
+    const id = req.params.translation.toUpperCase();
+    const translation = LICENSED_TRANSLATIONS[id];
+    const q = String(req.query.q ?? '').trim();
+    const page = Math.max(1, Math.min(200, parseInt(req.query.page, 10) || 1));
+    if (!translation) return res.status(404).json({ error: 'Unknown translation.' });
+    if (q.length < 2 || q.length > 100) return res.status(400).json({ error: 'Search must be 2 to 100 characters.' });
+    const isEsv = translation.provider === 'esv';
+    const apiKey = isEsv ? process.env.ESV_API_KEY : process.env.API_BIBLE_KEY;
+    if (!apiKey) return res.status(503).json({ error: `${isEsv ? 'ESV_API_KEY' : 'API_BIBLE_KEY'} is not configured on the server.` });
+
+    try {
+      let results;
+      let total;
+      if (isEsv) {
+        const qs = new URLSearchParams({ q, 'page-size': String(SEARCH_PAGE_SIZE), page: String(page) });
+        const upstream = await fetch(`https://api.esv.org/v3/passage/search/?${qs}`, { headers: { Authorization: `Token ${apiKey}` } });
+        if (upstream.status === 429) return res.status(429).json({ error: 'ESV rate limit reached. Try again in a minute.' });
+        if (!upstream.ok) return res.status(502).json({ error: `Bible provider returned ${upstream.status}.` });
+        const body = await upstream.json();
+        total = body.total_results ?? 0;
+        results = (body.results ?? []).map((r) => {
+          const ref = parseEsvReference(r.reference);
+          return ref && { ...ref, text: String(r.content ?? '').replace(/<[^>]+>/g, '').trim() };
+        }).filter(Boolean);
+      } else {
+        const qs = new URLSearchParams({ query: q, limit: String(SEARCH_PAGE_SIZE), offset: String((page - 1) * SEARCH_PAGE_SIZE), sort: 'canonical' });
+        const upstream = await fetch(`${API_BASE}/bibles/${translation.bibleId}/search?${qs}`, { headers: { 'api-key': apiKey } });
+        if (!upstream.ok) return res.status(502).json({ error: `Bible provider returned ${upstream.status}.` });
+        const body = await upstream.json();
+        total = body.data?.total ?? 0;
+        results = (body.data?.verses ?? []).map((v) => ({
+          bookAbbrev: v.bookId,
+          chapter: Number(String(v.chapterId).split('.')[1]),
+          verse: Number(String(v.id).split('.')[2]),
+          text: String(v.text ?? '').replace(/<[^>]+>/g, '').replace(/\s+/g, ' ').trim(),
+        })).filter((r) => r.bookAbbrev && r.chapter && r.verse);
+      }
+      res.json({ translation: id, query: q, page, total, hasMore: page * SEARCH_PAGE_SIZE < total, results });
+    } catch {
+      res.status(502).json({ error: 'Could not reach the Bible provider.' });
+    }
+  });
+
+  // ESV chapter audio (read by David Cochran Heath). The ESV API answers with a
+  // redirect to a public mp3; hand that URL to the browser's <audio> element.
+  app.get('/api/bible/ESV/audio/:book/:chapter', requireAuth, async (req, res) => {
+    const { book, chapter } = req.params;
+    const bookNum = BOOK_ORDER.indexOf(book.toUpperCase()) + 1;
+    if (!bookNum || !/^\d{1,3}$/.test(chapter)) return res.status(400).json({ error: 'Invalid book or chapter.' });
+    if (!process.env.ESV_API_KEY) return res.status(503).json({ error: 'ESV_API_KEY is not configured on the server.' });
+    const prefix = String(bookNum).padStart(2, '0') + String(Number(chapter)).padStart(3, '0');
+    try {
+      const upstream = await fetch(`https://api.esv.org/v3/passage/audio/?q=${prefix}001-${prefix}999`, {
+        headers: { Authorization: `Token ${process.env.ESV_API_KEY}` }, redirect: 'manual',
+      });
+      const url = upstream.headers.get('location');
+      if (upstream.status === 429) return res.status(429).json({ error: 'ESV rate limit reached. Try again in a minute.' });
+      if (!url) return res.status(502).json({ error: 'ESV audio is not available for this chapter.' });
+      res.json({ url });
+    } catch {
+      res.status(502).json({ error: 'Could not reach the ESV audio service.' });
+    }
+  });
+
+  app.get('/api/bible/:translation/:book/:chapter', requireAuth, async (req, res) => {
+    const translation = LICENSED_TRANSLATIONS[req.params.translation.toUpperCase()];
+    const { book, chapter } = req.params;
+    if (!translation) return res.status(404).json({ error: 'Unknown translation.' });
+    if (!/^[1-3A-Z]{3}$/i.test(book) || !/^\d{1,3}$/.test(chapter)) {
+      return res.status(400).json({ error: 'Invalid book or chapter.' });
+    }
+    const id = req.params.translation.toUpperCase();
+    const isEsv = translation.provider === 'esv';
+    const apiKey = isEsv ? process.env.ESV_API_KEY : process.env.API_BIBLE_KEY;
+    if (!apiKey) return res.status(503).json({ error: `${isEsv ? 'ESV_API_KEY' : 'API_BIBLE_KEY'} is not configured on the server.` });
+
+    const key = `${id}/${book.toUpperCase()}/${chapter}`;
+    const ttl = isEsv ? ESV_CACHE_TTL : CACHE_TTL;
+    const hit = cache.get(key);
+    if (hit && Date.now() - hit.at < ttl) return res.json(hit.payload);
+
+    try {
+      let payload;
+      if (isEsv) {
+        const bookNum = BOOK_ORDER.indexOf(book.toUpperCase()) + 1;
+        if (!bookNum) return res.status(400).json({ error: 'Invalid book.' });
+        const prefix = String(bookNum).padStart(2, '0') + String(Number(chapter)).padStart(3, '0');
+        const qs = new URLSearchParams({
+          q: `${prefix}001-${prefix}999`,
+          'include-passage-references': 'false', 'include-verse-numbers': 'true', 'include-first-verse-numbers': 'true',
+          'include-footnotes': 'false', 'include-headings': 'false', 'include-short-copyright': 'false',
+          'include-passage-horizontal-lines': 'false', 'include-heading-horizontal-lines': 'false',
+        });
+        const upstream = await fetch(`https://api.esv.org/v3/passage/text/?${qs}`, { headers: { Authorization: `Token ${apiKey}` } });
+        if (upstream.status === 429) return res.status(429).json({ error: 'ESV rate limit reached. Try again in a minute.' });
+        if (!upstream.ok) return res.status(502).json({ error: `Bible provider returned ${upstream.status}.` });
+        const body = await upstream.json();
+        const verses = parseChapterText(body.passages?.[0]);
+        if (verses.length === 0) return res.status(404).json({ error: 'Chapter not found.' });
+        payload = { translation: id, verses, copyright: '', fumsToken: null };
+      } else {
+        const qs = new URLSearchParams({
+          'content-type': 'text', 'include-notes': 'false', 'include-titles': 'false',
+          'include-chapter-numbers': 'false', 'include-verse-numbers': 'true', 'include-verse-spans': 'false',
+        });
+        const upstream = await fetch(
+          `${API_BASE}/bibles/${translation.bibleId}/chapters/${book.toUpperCase()}.${chapter}?${qs}`,
+          { headers: { 'api-key': apiKey } },
+        );
+        if (upstream.status === 404) return res.status(404).json({ error: 'Chapter not found.' });
+        if (!upstream.ok) return res.status(502).json({ error: `Bible provider returned ${upstream.status}.` });
+        const body = await upstream.json();
+        const verses = parseChapterText(body.data?.content);
+        if (verses.length === 0) return res.status(502).json({ error: 'Bible provider returned no verses.' });
+        payload = { translation: id, verses, copyright: body.data?.copyright ?? '', fumsToken: body.meta?.fumsToken ?? null };
+      }
+      const max = isEsv ? ESV_CACHE_MAX : CACHE_MAX;
+      if (cache.size >= CACHE_MAX + ESV_CACHE_MAX) cache.delete(cache.keys().next().value);
+      if (isEsv) {
+        const esvKeys = [...cache.keys()].filter((k) => k.startsWith('ESV/'));
+        if (esvKeys.length >= max) cache.delete(esvKeys[0]);
+      }
+      cache.set(key, { at: Date.now(), payload });
+      res.json(payload);
+    } catch {
+      res.status(502).json({ error: 'Could not reach the Bible provider.' });
+    }
+  });
+}

server/bibleApi.test.js

@@ -0,0 +1,23 @@
+import { test, expect } from 'vitest';
+import { parseChapterText, parseEsvReference } from './bibleApi.js';
+
+test('parseChapterText splits inline verse markers and cleans provider artifacts', () => {
+  const text = '   [1] The Lord is my shepherd;\n  I have what I need.\n   [2] He lets me lie down #— in pastures, ,\n';
+  expect(parseChapterText(text)).toEqual([
+    { number: 1, text: 'The Lord is my shepherd; I have what I need.' },
+    { number: 2, text: 'He lets me lie down — in pastures,' },
+  ]);
+});
+
+test('parseChapterText ignores headings before the first verse', () => {
+  expect(parseChapterText('Psalm 23\n\nA Psalm of David.\n\n[1] The LORD is my shepherd;')).toEqual([
+    { number: 1, text: 'The LORD is my shepherd;' },
+  ]);
+});
+
+test('parseEsvReference maps ESV book names back to abbreviations', () => {
+  expect(parseEsvReference('Psalm 23:1')).toEqual({ bookAbbrev: 'PSA', chapter: 23, verse: 1 });
+  expect(parseEsvReference('1 John 3:16-18')).toEqual({ bookAbbrev: '1JN', chapter: 3, verse: 16 });
+  expect(parseEsvReference('Song of Solomon 2:4')).toEqual({ bookAbbrev: 'SNG', chapter: 2, verse: 4 });
+  expect(parseEsvReference('Not a book 1:1')).toBeNull();
+});

server/db.js

@@ -9,6 +9,13 @@ const DB_PATH = join(DATA_DIR, 'projects.db');
 
 let db;
 
+export const dataDir = () => DATA_DIR;
+
+/** A consistent copy of the whole database, made while it is in use. */
+export function backupDatabase(destPath) {
+  return db.backup(destPath);
+}
+
 // ---------------------------------------------------------------------------
 // Init — create tables if they don't exist, migrate older schemas
 // ---------------------------------------------------------------------------
@@ -63,12 +70,42 @@ export function initDb() {
     db.exec('ALTER TABLE users ADD COLUMN podcast_name TEXT');
   }
 
+  // Older databases predate ntfy.sh daily reading reminders.
+  if (!userCols.some((c) => c.name === 'ntfy_url')) {
+    db.exec(`
+      ALTER TABLE users ADD COLUMN ntfy_url TEXT;
+      ALTER TABLE users ADD COLUMN ntfy_topic TEXT;
+      ALTER TABLE users ADD COLUMN reminder_time TEXT;
+      ALTER TABLE users ADD COLUMN reminder_enabled INTEGER NOT NULL DEFAULT 0;
+      ALTER TABLE users ADD COLUMN last_reminder_date TEXT;
+    `);
+  }
+
+  // Reminders fire at the user's own local time, so remember their timezone.
+  if (!userCols.some((c) => c.name === 'reminder_tz')) {
+    db.exec('ALTER TABLE users ADD COLUMN reminder_tz TEXT');
+  }
+
   // Older databases predate shareable read-only links.
   if (!projectCols.some((c) => c.name === 'share_token')) {
     db.exec('ALTER TABLE projects ADD COLUMN share_token TEXT');
   }
+  if (!projectCols.some((c) => c.name === 'outline_share_token')) {
+    db.exec('ALTER TABLE projects ADD COLUMN outline_share_token TEXT');
+  }
+  db.exec('CREATE UNIQUE INDEX IF NOT EXISTS idx_projects_outline_share_token ON projects(outline_share_token) WHERE outline_share_token IS NOT NULL');
   db.exec('CREATE UNIQUE INDEX IF NOT EXISTS idx_projects_share_token ON projects(share_token) WHERE share_token IS NOT NULL');
 
+  // One-time codes for "forgot password": hashed, short-lived, limited tries.
+  db.exec(`
+    CREATE TABLE IF NOT EXISTS password_resets (
+      user_id   TEXT PRIMARY KEY REFERENCES users(id) ON DELETE CASCADE,
+      code_hash TEXT NOT NULL,
+      expires   INTEGER NOT NULL,
+      attempts  INTEGER NOT NULL DEFAULT 0
+    );
+  `);
+
   // Reader ink — one row per user + book + chapter, stored as JSON
   db.exec(`
     CREATE TABLE IF NOT EXISTS reader_ink (
@@ -81,6 +118,35 @@ export function initDb() {
     );
   `);
 
+  // Display preferences (theme, default translation, layout, ...) — one row per user.
+  db.exec(`
+    CREATE TABLE IF NOT EXISTS user_prefs (
+      user_id    TEXT PRIMARY KEY REFERENCES users(id) ON DELETE CASCADE,
+      data       TEXT NOT NULL,
+      updated_at INTEGER NOT NULL
+    );
+  `);
+
+  // Reader bookmarks + text highlights — one row per user (small JSON), so they follow the
+  // user across devices. updated_at lets a device tell whether the server copy is newer.
+  db.exec(`
+    CREATE TABLE IF NOT EXISTS reader_marks (
+      user_id    TEXT PRIMARY KEY REFERENCES users(id) ON DELETE CASCADE,
+      data       TEXT NOT NULL,
+      updated_at INTEGER NOT NULL
+    );
+  `);
+
+  // Reading plan progress — one row per user, holding the whole list of
+  // in-progress/completed plans as JSON (small; no need to normalize).
+  db.exec(`
+    CREATE TABLE IF NOT EXISTS reading_progress (
+      user_id    TEXT PRIMARY KEY REFERENCES users(id) ON DELETE CASCADE,
+      data       TEXT NOT NULL,
+      updated_at INTEGER NOT NULL
+    );
+  `);
+
   console.log(`SQLite database ready at ${DB_PATH}`);
 }
 
@@ -115,6 +181,7 @@ function parseUserRow(row) {
   return {
     ...row,
     totpEnabled: !!row.totpEnabled,
+    reminderEnabled: !!row.reminderEnabled,
     backupCodeHashes: row.backupCodesRaw ? JSON.parse(row.backupCodesRaw) : [],
   };
 }
@@ -122,7 +189,9 @@ function parseUserRow(row) {
 const USER_SELECT = `
   SELECT id, email, password_hash AS passwordHash, created_at AS createdAt,
          totp_secret AS totpSecret, totp_enabled AS totpEnabled, backup_codes AS backupCodesRaw,
-         podcast_name AS podcastName
+         podcast_name AS podcastName,
+         ntfy_url AS ntfyUrl, ntfy_topic AS ntfyTopic, reminder_time AS reminderTime,
+         reminder_enabled AS reminderEnabled, last_reminder_date AS lastReminderDate, reminder_tz AS reminderTz
   FROM users
 `;
 
@@ -153,6 +222,57 @@ export function setPodcastName(userId, podcastName) {
   db.prepare('UPDATE users SET podcast_name = ? WHERE id = ?').run(podcastName || null, userId);
 }
 
+// ---------------------------------------------------------------------------
+// Daily reading reminders (sent via ntfy.sh — see server/reminders.js)
+// ---------------------------------------------------------------------------
+
+/** Saves a user's ntfy reminder settings ({ ntfyUrl, ntfyTopic, reminderTime, reminderEnabled }). */
+export function setReminderSettings(userId, { ntfyUrl, ntfyTopic, reminderTime, reminderEnabled, reminderTz }) {
+  db.prepare(`
+    UPDATE users SET ntfy_url = ?, ntfy_topic = ?, reminder_time = ?, reminder_enabled = ?, reminder_tz = ?
+    WHERE id = ?
+  `).run(ntfyUrl || null, ntfyTopic || null, reminderTime || null, reminderEnabled ? 1 : 0, reminderTz || null, userId);
+}
+
+/** Every account with reminders turned on and a topic configured — checked once a minute. */
+export function getUsersWithRemindersEnabled() {
+  return db.prepare(`
+    SELECT id, email, ntfy_url AS ntfyUrl, ntfy_topic AS ntfyTopic, reminder_time AS reminderTime,
+           last_reminder_date AS lastReminderDate, reminder_tz AS reminderTz
+    FROM users
+    WHERE reminder_enabled = 1 AND ntfy_topic IS NOT NULL AND reminder_time IS NOT NULL
+  `).all();
+}
+
+/** Marks that a user's reminder was sent today, so it isn't sent twice. */
+export function setLastReminderDate(userId, dateString) {
+  db.prepare('UPDATE users SET last_reminder_date = ? WHERE id = ?').run(dateString, userId);
+}
+
+// ---------------------------------------------------------------------------
+// Password reset codes
+// ---------------------------------------------------------------------------
+
+export function setPasswordReset(userId, codeHash, expires) {
+  db.prepare(`
+    INSERT INTO password_resets (user_id, code_hash, expires, attempts) VALUES (?, ?, ?, 0)
+    ON CONFLICT(user_id) DO UPDATE SET code_hash = excluded.code_hash, expires = excluded.expires, attempts = 0
+  `).run(userId, codeHash, expires);
+}
+
+export function getPasswordReset(userId) {
+  const row = db.prepare('SELECT code_hash AS codeHash, expires, attempts FROM password_resets WHERE user_id = ?').get(userId);
+  return row && row.expires > Date.now() ? row : null;
+}
+
+export function bumpPasswordResetAttempts(userId) {
+  db.prepare('UPDATE password_resets SET attempts = attempts + 1 WHERE user_id = ?').run(userId);
+}
+
+export function clearPasswordReset(userId) {
+  db.prepare('DELETE FROM password_resets WHERE user_id = ?').run(userId);
+}
+
 /** Rewrites the remaining backup-code hashes after one is used (single-use codes). */
 export function setBackupCodeHashes(userId, backupCodeHashes) {
   db.prepare('UPDATE users SET backup_codes = ? WHERE id = ?').run(JSON.stringify(backupCodeHashes), userId);
@@ -172,6 +292,39 @@ export function getAllReaderInk(userId) {
   );
 }
 
+/** The user's synced preferences: { key: { v, at } } (empty when none saved yet). */
+export function getUserPrefs(userId) {
+  const row = db.prepare('SELECT data FROM user_prefs WHERE user_id = ?').get(userId);
+  return row ? JSON.parse(row.data) : {};
+}
+
+/** Replaces the user's stored preferences with `prefs` ({ key: { v, at } }). */
+export function setUserPrefs(userId, prefs) {
+  db.prepare(`
+    INSERT INTO user_prefs (user_id, data, updated_at) VALUES (?, ?, ?)
+    ON CONFLICT(user_id) DO UPDATE SET data = excluded.data, updated_at = excluded.updated_at
+  `).run(userId, JSON.stringify(prefs), Date.now());
+}
+
+/** The user's bookmarks + highlights: { bookmarks, highlights, updatedAt } (updatedAt 0 = never saved). */
+export function getReaderMarks(userId) {
+  const row = db.prepare('SELECT data, updated_at AS updatedAt FROM reader_marks WHERE user_id = ?').get(userId);
+  if (!row) return { bookmarks: {}, highlights: [], updatedAt: 0 };
+  const data = JSON.parse(row.data);
+  return { bookmarks: data.bookmarks ?? {}, highlights: data.highlights ?? [], updatedAt: row.updatedAt };
+}
+
+/** Replaces the user's bookmarks + highlights; returns the new updatedAt (always moves forward). */
+export function setReaderMarks(userId, { bookmarks, highlights }) {
+  const prev = db.prepare('SELECT updated_at AS updatedAt FROM reader_marks WHERE user_id = ?').get(userId);
+  const updatedAt = Math.max(Date.now(), (prev?.updatedAt ?? 0) + 1);
+  db.prepare(`
+    INSERT INTO reader_marks (user_id, data, updated_at) VALUES (?, ?, ?)
+    ON CONFLICT(user_id) DO UPDATE SET data = excluded.data, updated_at = excluded.updated_at
+  `).run(userId, JSON.stringify({ bookmarks, highlights }), updatedAt);
+  return updatedAt;
+}
+
 /** Upserts the ink strokes for one reader page. */
 export function setReaderInkPage(userId, bookAbbrev, chapter, strokes) {
   db.prepare(`
@@ -182,6 +335,30 @@ export function setReaderInkPage(userId, bookAbbrev, chapter, strokes) {
   `).run(userId, bookAbbrev, Number(chapter), JSON.stringify(strokes), Date.now());
 }
 
+// ---------------------------------------------------------------------------
+// Reading plan progress — cross-device sync for started/completed reading plans
+// ---------------------------------------------------------------------------
+
+/** Returns the user's reading-plan data ({ progress, customPlans }, parsed JSON), or an empty shell. */
+export function getReadingProgress(userId) {
+  const row = db.prepare('SELECT data FROM reading_progress WHERE user_id = ?').get(userId);
+  if (!row) return { progress: [], customPlans: [] };
+  try {
+    return JSON.parse(row.data);
+  } catch {
+    return { progress: [], customPlans: [] };
+  }
+}
+
+/** Overwrites the user's whole reading-plan progress list. */
+export function setReadingProgress(userId, progress) {
+  db.prepare(`
+    INSERT INTO reading_progress (user_id, data, updated_at)
+    VALUES (?, ?, ?)
+    ON CONFLICT(user_id) DO UPDATE SET data = excluded.data, updated_at = excluded.updated_at
+  `).run(userId, JSON.stringify(progress), Date.now());
+}
+
 /**
  * Assigns any pre-existing, unowned projects (from before multi-user support)
  * to the given user. Intended to run once, right after the first account is created.
@@ -221,6 +398,12 @@ export function getProject(id, userId) {
   }
 }
 
+/** The server copy's lastEdited for a project owned by userId, or null when there isn't one. */
+export function getProjectEdited(id, userId) {
+  const row = db.prepare('SELECT last_edited AS lastEdited FROM projects WHERE id = ? AND user_id = ?').get(id, userId);
+  return row ? row.lastEdited : null;
+}
+
 /**
  * Insert or replace a project owned by userId.
  * Returns the summary, or null if the id already belongs to a different user.
@@ -231,7 +414,9 @@ export function upsertProject(project, userId) {
     return null;
   }
 
-  const lastEdited = project.lastEdited ?? Date.now();
+  // The server's clock decides the version, so a device with a wrong clock can't hide or fake changes.
+  const prev = db.prepare('SELECT last_edited AS lastEdited FROM projects WHERE id = ?').get(project.id);
+  const lastEdited = Math.max(Date.now(), (prev?.lastEdited ?? 0) + 1);
   const chapterSummary = buildSummary(project);
   const updated = { ...project, lastEdited };
 
@@ -276,6 +461,28 @@ export function clearShareToken(id, userId) {
   db.prepare('UPDATE projects SET share_token = NULL WHERE id = ? AND user_id = ?').run(id, userId);
 }
 
+// ---- read-only outline links: a separate token, so sharing an outline never shares the whole study ----
+
+export function getOutlineShareToken(id, userId) {
+  const row = db.prepare('SELECT outline_share_token AS t FROM projects WHERE id = ? AND user_id = ?').get(id, userId);
+  return row?.t ?? null;
+}
+
+export function setOutlineShareToken(id, userId, token) {
+  return db.prepare('UPDATE projects SET outline_share_token = ? WHERE id = ? AND user_id = ?').run(token, id, userId).changes > 0;
+}
+
+export function clearOutlineShareToken(id, userId) {
+  db.prepare('UPDATE projects SET outline_share_token = NULL WHERE id = ? AND user_id = ?').run(id, userId);
+}
+
+/** Public lookup: the project data behind an outline link (callers must only ever send the outlines on). */
+export function getProjectByOutlineToken(token) {
+  const row = db.prepare('SELECT data FROM projects WHERE outline_share_token = ?').get(token);
+  if (!row) return null;
+  try { return JSON.parse(row.data); } catch { return null; }
+}
+
 /** Public lookup: returns the full project data for a valid share token, or null. No ownership check — this is the point. */
 export function getProjectByShareToken(token) {
   const row = db.prepare('SELECT data FROM projects WHERE share_token = ?').get(token);
@@ -304,7 +511,11 @@ export function adminGetAllUsers() {
 
 /** Deletes a user account. Their projects are left in place (orphaned, not cascade-deleted) so data isn't lost by accident. */
 export function adminDeleteUser(userId) {
+  // projects.user_id is a foreign key, so release the projects first (they stay as unowned rows).
+  db.transaction(() => {
+    db.prepare('UPDATE projects SET user_id = NULL, share_token = NULL, outline_share_token = NULL WHERE user_id = ?').run(userId);
     db.prepare('DELETE FROM users WHERE id = ?').run(userId);
+  })();
 }
 
 /** Every project across every user, with the owner's email, for the admin projects list. */

server/index.js

@@ -6,20 +6,44 @@ import { randomUUID } from 'crypto';
 import { fileURLToPath } from 'url';
 import { dirname, join } from 'path';
 import {
-  initDb, getAllProjects, getProject, upsertProject, deleteProject,
+  initDb, getAllProjects, getProject, getProjectEdited, upsertProject, deleteProject,
   countUsers, createUser, getUserByEmail, getUserById, claimOrphanProjects,
   enableTotp, disableTotp, setBackupCodeHashes, setPodcastName,
   getShareToken, setShareToken, clearShareToken, getProjectByShareToken,
+  getOutlineShareToken, setOutlineShareToken, clearOutlineShareToken, getProjectByOutlineToken,
   adminGetAllUsers, adminDeleteUser, adminGetAllProjects, adminGetProject, adminDeleteProject,
   setUserPassword, destroyAllSessionsForUser,
-  getAllReaderInk, setReaderInkPage,
+  getAllReaderInk, setReaderInkPage, getReaderMarks, setReaderMarks, getUserPrefs, setUserPrefs,
+  getReadingProgress, setReadingProgress,
+  setReminderSettings,
+  setPasswordReset, getPasswordReset, bumpPasswordResetAttempts, clearPasswordReset,
 } from './db.js';
 import { SqliteSessionStore } from './sessionStore.js';
 import {
   isValidEmail, isValidPassword, hashPassword, verifyPassword, requireAuth, requireAdmin, isAdminEmail,
   generateTotpSecret, totpKeyUri, verifyTotpToken,
   generateBackupCodes, hashBackupCodes, consumeBackupCode, generateTemporaryPassword,
+  generateResetCode, normalizeResetCode,
 } from './auth.js';
+import { startReminderScheduler, sendTestReminder, isValidTimeZone, assertPublicUrl, sendNtfy } from './reminders.js';
+import { registerBibleRoutes } from './bibleApi.js';
+import { registerIqBibleRoutes } from './iqbible.js';
+import { buildAccountExport, accountExportName } from './accountExport.js';
+import { startBackupScheduler } from './backups.js';
+import { cleanMarks } from './readerMarks.js';
+import { cleanPrefsPatch, mergePrefs } from './prefs.js';
+import { isSaveConflict, parseBase } from './projectSync.js';
+import { buildOutlinePayload } from './outlineShare.js';
+
+// Shape returned to the client for the signed-in user (login, MFA verify, /auth/me).
+function userPayload(user) {
+  return {
+    id: user.id, email: user.email, totpEnabled: user.totpEnabled, podcastName: user.podcastName ?? null,
+    isAdmin: isAdminEmail(user.email),
+    reminderEnabled: user.reminderEnabled, ntfyUrl: user.ntfyUrl ?? null, ntfyTopic: user.ntfyTopic ?? null,
+    reminderTime: user.reminderTime ?? null,
+  };
+}
 
 const __dirname = dirname(fileURLToPath(import.meta.url));
 const app = express();
@@ -27,26 +51,46 @@ const PORT = process.env.PORT || 3001;
 const isProd = process.env.NODE_ENV === 'production';
 
 if (isProd && !process.env.SESSION_SECRET) {
-  console.warn('WARNING: SESSION_SECRET is not set. Set it to a long random string in production.');
+  console.error('SESSION_SECRET is not set. Set it to a long random string before running in production.');
+  process.exit(1);
 }
 
 // Trust the reverse proxy (needed for secure cookies to work behind nginx/etc).
 app.set('trust proxy', 1);
 
-// Simple in-memory rate limiter for auth endpoints — 10 attempts per 15 min per IP.
+// In-memory limiter for sign-in style endpoints: 10 FAILED attempts per 15 min, tracked per IP and per
-const _authAttempts = new Map();
+// account (key). Successful sign-ins don't count, so a shared IP doesn't lock everyone out.
+const _failures = new Map();
+const FAIL_WINDOW = 15 * 60 * 1000;
+const FAIL_MAX = 10;
 setInterval(() => {
   const now = Date.now();
-  for (const [ip, e] of _authAttempts) if (now > e.resetAt) _authAttempts.delete(ip);
+  for (const [k, e] of _failures) if (now > e.resetAt) _failures.delete(k);
-}, 60 * 60 * 1000);
+}, 60 * 60 * 1000).unref();
-function checkAuthRateLimit(ip) {
+function isLimited(...keys) {
   const now = Date.now();
-  const window = 15 * 60 * 1000;
+  return keys.some((k) => { const e = _failures.get(k); return e && now <= e.resetAt && e.count >= FAIL_MAX; });
-  const e = _authAttempts.get(ip) ?? { count: 0, resetAt: now + window };
+}
-  if (now > e.resetAt) { e.count = 0; e.resetAt = now + window; }
+function recordFailure(...keys) {
-  e.count += 1;
+  const now = Date.now();
-  _authAttempts.set(ip, e);
+  for (const k of keys) {
-  return e.count > 10;
+    const e = _failures.get(k);
+    if (!e || now > e.resetAt) _failures.set(k, { count: 1, resetAt: now + FAIL_WINDOW });
+    else e.count += 1;
+  }
+}
+function clearFailures(...keys) { keys.forEach((k) => _failures.delete(k)); }
+const TOO_MANY = { error: 'Too many attempts. Please wait 15 minutes.' };
+
+// Compared against when an email isn't registered, so a login takes the same time either way.
+const DUMMY_HASH = '$2b$10$UbGSJvxosy5oInS6zfvqM.gWOUv9ypVg81ou.jWOswHyYgUjpkhJK';
+
+// TOTP codes already used (userId -> code), so a captured code can't be replayed inside its time window.
+const _usedTotp = new Map();
+function totpAlreadyUsed(userId, token) { return _usedTotp.get(userId) === token; }
+function markTotpUsed(userId, token) {
+  _usedTotp.set(userId, token);
+  setTimeout(() => { if (_usedTotp.get(userId) === token) _usedTotp.delete(userId); }, 90 * 1000).unref();
 }
 
 // Gzip responses — the interlinear JSON files shrink ~10x, and JS/CSS/API payloads too.
@@ -82,7 +126,8 @@ app.get('/api/health', (_req, res) => {
 
 app.post('/api/auth/register', async (req, res) => {
   try {
-    if (checkAuthRateLimit(req.ip)) return res.status(429).json({ error: 'Too many attempts. Please wait 15 minutes.' });
+    if (isLimited(`ip:${req.ip}`)) return res.status(429).json(TOO_MANY);
+    recordFailure(`ip:${req.ip}`); // every registration attempt counts
     const email = String(req.body?.email ?? '').trim().toLowerCase();
     const password = String(req.body?.password ?? '');
 
@@ -107,7 +152,10 @@ app.post('/api/auth/register', async (req, res) => {
     req.session.regenerate((err) => {
       if (err) return res.status(500).json({ error: 'Could not create session.' });
       req.session.userId = user.id;
-      res.json({ id: user.id, email: user.email, totpEnabled: false, podcastName: null, isAdmin: isAdminEmail(user.email) });
+      res.json({
+        id: user.id, email: user.email, totpEnabled: false, podcastName: null, isAdmin: isAdminEmail(user.email),
+        reminderEnabled: false, ntfyUrl: null, ntfyTopic: null, reminderTime: null,
+      });
     });
   } catch (err) {
     console.error('POST /api/auth/register error:', err);
@@ -117,15 +165,18 @@ app.post('/api/auth/register', async (req, res) => {
 
 app.post('/api/auth/login', async (req, res) => {
   try {
-    if (checkAuthRateLimit(req.ip)) return res.status(429).json({ error: 'Too many attempts. Please wait 15 minutes.' });
     const email = String(req.body?.email ?? '').trim().toLowerCase();
     const password = String(req.body?.password ?? '');
+    const keys = [`ip:${req.ip}`, `acct:${email}`];
+    if (isLimited(...keys)) return res.status(429).json(TOO_MANY);
 
     const user = getUserByEmail(email);
-    const valid = user && await verifyPassword(password, user.passwordHash);
+    const valid = await verifyPassword(password, user?.passwordHash ?? DUMMY_HASH) && !!user;
     if (!valid) {
+      recordFailure(...keys);
       return res.status(401).json({ error: 'Incorrect email or password.' });
     }
+    clearFailures(`acct:${email}`);
 
     req.session.regenerate((err) => {
       if (err) return res.status(500).json({ error: 'Could not create session.' });
@@ -136,7 +187,7 @@ app.post('/api/auth/login', async (req, res) => {
         return res.json({ mfaRequired: true });
       }
       req.session.userId = user.id;
-      res.json({ id: user.id, email: user.email, totpEnabled: false, podcastName: user.podcastName ?? null, isAdmin: isAdminEmail(user.email) });
+      res.json(userPayload(user));
     });
   } catch (err) {
     console.error('POST /api/auth/login error:', err);
@@ -146,11 +197,12 @@ app.post('/api/auth/login', async (req, res) => {
 
 app.post('/api/auth/mfa/verify', async (req, res) => {
   try {
-    if (checkAuthRateLimit(req.ip)) return res.status(429).json({ error: 'Too many attempts. Please wait 15 minutes.' });
     const pendingUserId = req.session?.pendingUserId;
     if (!pendingUserId) {
       return res.status(400).json({ error: 'No sign-in in progress.' });
     }
+    const keys = [`ip:${req.ip}`, `mfa:${pendingUserId}`];
+    if (isLimited(...keys)) return res.status(429).json(TOO_MANY);
     const user = getUserById(pendingUserId);
     if (!user || !user.totpEnabled) {
       return res.status(400).json({ error: 'No sign-in in progress.' });
@@ -158,7 +210,8 @@ app.post('/api/auth/mfa/verify', async (req, res) => {
 
     const token = req.body?.token;
     const backupCode = req.body?.backupCode;
-    let ok = token ? verifyTotpToken(String(token), user.totpSecret) : false;
+    let ok = token ? verifyTotpToken(String(token), user.totpSecret) && !totpAlreadyUsed(user.id, String(token)) : false;
+    if (ok) markTotpUsed(user.id, String(token));
 
     if (!ok && backupCode) {
       const remaining = await consumeBackupCode(String(backupCode), user.backupCodeHashes);
@@ -169,13 +222,15 @@ app.post('/api/auth/mfa/verify', async (req, res) => {
     }
 
     if (!ok) {
+      recordFailure(...keys);
       return res.status(401).json({ error: 'Invalid code.' });
     }
+    clearFailures(`mfa:${pendingUserId}`);
 
     req.session.regenerate((err) => {
       if (err) return res.status(500).json({ error: 'Could not create session.' });
       req.session.userId = user.id;
-      res.json({ id: user.id, email: user.email, totpEnabled: true, podcastName: user.podcastName ?? null, isAdmin: isAdminEmail(user.email) });
+      res.json(userPayload(user));
     });
   } catch (err) {
     console.error('POST /api/auth/mfa/verify error:', err);
@@ -183,6 +238,66 @@ app.post('/api/auth/mfa/verify', async (req, res) => {
   }
 });
 
+// ---------------------------------------------------------------------------
+// Forgot password. There is no email here, so the one-time code goes to the account's ntfy topic (the same
+// one used for reading reminders). Accounts without a topic still go through the admin. The answer is the
+// same whether or not the account exists, so this can't be used to find out who has one.
+// ---------------------------------------------------------------------------
+const RESET_MINUTES = 15;
+const RESET_REPLY = { ok: true, message: 'If that account has a notification topic set up, a reset code was just sent to it. Codes last 15 minutes. No topic? Ask the administrator for a temporary password.' };
+
+app.post('/api/auth/forgot', async (req, res) => {
+  try {
+    const email = String(req.body?.email ?? '').trim().toLowerCase();
+    const keys = [`ip:${req.ip}`, `forgot:${email}`];
+    if (isLimited(...keys)) return res.status(429).json(TOO_MANY);
+    recordFailure(...keys); // every request counts
+    const user = isValidEmail(email) ? getUserByEmail(email) : null;
+    if (user?.ntfyTopic) {
+      const code = generateResetCode();
+      setPasswordReset(user.id, await hashPassword(code), Date.now() + RESET_MINUTES * 60 * 1000);
+      sendNtfy(user, { title: 'Password reset code', body: `Your Bible Study reset code is ${code}. It works for ${RESET_MINUTES} minutes. If you didn't ask for it, ignore this.`, tags: 'key' })
+        .catch((err) => console.error('Password reset notification failed:', err.message));
+    }
+    res.json(RESET_REPLY);
+  } catch (err) {
+    console.error('POST /api/auth/forgot error:', err);
+    res.status(500).json({ error: 'Failed to start the reset.' });
+  }
+});
+
+app.post('/api/auth/reset', async (req, res) => {
+  try {
+    const email = String(req.body?.email ?? '').trim().toLowerCase();
+    const keys = [`ip:${req.ip}`, `reset:${email}`];
+    if (isLimited(...keys)) return res.status(429).json(TOO_MANY);
+    const fail = (error) => { recordFailure(...keys); return res.status(400).json({ error }); };
+    const newPassword = String(req.body?.newPassword ?? '');
+    if (!isValidPassword(newPassword)) return res.status(400).json({ error: 'New password must be at least 8 characters.' });
+
+    const user = getUserByEmail(email);
+    const reset = user ? getPasswordReset(user.id) : null;
+    const code = normalizeResetCode(req.body?.code);
+    // Always spend one bcrypt compare, so timing doesn't show whether a code was issued
+    const codeOk = await verifyPassword(code, reset?.codeHash ?? DUMMY_HASH) && !!reset && reset.attempts < 5;
+    if (reset && !codeOk) bumpPasswordResetAttempts(user.id);
+    if (!codeOk) return fail('That code is wrong or has expired. Ask for a new one.');
+    if (user.totpEnabled) {
+      const token = String(req.body?.token ?? '');
+      if (!verifyTotpToken(token, user.totpSecret) || totpAlreadyUsed(user.id, token)) return fail('Enter the current 6-digit code from your authenticator app too.');
+      markTotpUsed(user.id, token);
+    }
+    setUserPassword(user.id, await hashPassword(newPassword));
+    clearPasswordReset(user.id);
+    destroyAllSessionsForUser(user.id);
+    clearFailures(...keys);
+    res.json({ ok: true });
+  } catch (err) {
+    console.error('POST /api/auth/reset error:', err);
+    res.status(500).json({ error: 'Failed to reset the password.' });
+  }
+});
+
 app.post('/api/auth/logout', (req, res) => {
   req.session.destroy(() => {
     res.clearCookie('connect.sid');
@@ -193,10 +308,7 @@ app.post('/api/auth/logout', (req, res) => {
 app.get('/api/auth/me', (req, res) => {
   const user = req.session?.userId ? getUserById(req.session.userId) : null;
   if (!user) return res.status(401).json({ error: 'Not signed in.' });
-  res.json({
+  res.json(userPayload(user));
-    id: user.id, email: user.email, totpEnabled: user.totpEnabled,
-    podcastName: user.podcastName ?? null, isAdmin: isAdminEmail(user.email),
-  });
 });
 
 // ---------------------------------------------------------------------------
@@ -213,6 +325,49 @@ app.patch('/api/auth/profile', requireAuth, (req, res) => {
   }
 });
 
+// ---------------------------------------------------------------------------
+// PATCH /api/auth/reminder-settings — daily reading reminder via ntfy.sh
+// ---------------------------------------------------------------------------
+app.patch('/api/auth/reminder-settings', requireAuth, async (req, res) => {
+  try {
+    const reminderEnabled = !!req.body?.reminderEnabled;
+    const ntfyTopic = String(req.body?.ntfyTopic ?? '').trim();
+    const ntfyUrl = String(req.body?.ntfyUrl ?? '').trim();
+    const reminderTime = String(req.body?.reminderTime ?? '').trim();
+    const reminderTz = isValidTimeZone(req.body?.reminderTz) ? String(req.body.reminderTz) : null;
+
+    if (ntfyTopic && !/^[A-Za-z0-9_-]{1,64}$/.test(ntfyTopic)) {
+      return res.status(400).json({ error: 'Topic can only contain letters, numbers, "-" and "_".' });
+    }
+    if (ntfyUrl && !/^https?:\/\/.{1,200}$/.test(ntfyUrl)) {
+      return res.status(400).json({ error: 'Server URL must start with http:// or https://.' });
+    }
+    if (ntfyUrl) {
+      try { await assertPublicUrl(ntfyUrl); } catch (err) { return res.status(400).json({ error: err.message }); }
+    }
+    if (reminderEnabled) {
+      if (!ntfyTopic) return res.status(400).json({ error: 'A topic is required to enable reminders.' });
+      if (!/^([01]\d|2[0-3]):[0-5]\d$/.test(reminderTime)) {
+        return res.status(400).json({ error: 'Reminder time must be in HH:MM format.' });
+      }
+    }
+
+    setReminderSettings(req.session.userId, {
+      ntfyUrl: ntfyUrl || null,
+      ntfyTopic: ntfyTopic || null,
+      reminderTime: reminderTime || null,
+      reminderEnabled,
+      reminderTz,
+    });
+    res.json({
+      reminderEnabled, ntfyUrl: ntfyUrl || null, ntfyTopic: ntfyTopic || null, reminderTime: reminderTime || null,
+    });
+  } catch (err) {
+    console.error('PATCH /api/auth/reminder-settings error:', err);
+    res.status(500).json({ error: 'Failed to save reminder settings.' });
+  }
+});
+
 // ---------------------------------------------------------------------------
 // POST /api/auth/change-password — self-service password change (Account Settings)
 // ---------------------------------------------------------------------------
@@ -222,14 +377,17 @@ app.post('/api/auth/change-password', requireAuth, async (req, res) => {
     const currentPassword = String(req.body?.currentPassword ?? '');
     const newPassword = String(req.body?.newPassword ?? '');
 
+    if (isLimited(`pw:${user.id}`)) return res.status(429).json(TOO_MANY);
     const valid = await verifyPassword(currentPassword, user.passwordHash);
     if (!valid) {
+      recordFailure(`pw:${user.id}`);
       return res.status(401).json({ error: 'Current password is incorrect.' });
     }
     if (!isValidPassword(newPassword)) {
       return res.status(400).json({ error: 'New password must be at least 8 characters.' });
     }
 
+    clearFailures(`pw:${user.id}`);
     const passwordHash = await hashPassword(newPassword);
     setUserPassword(user.id, passwordHash);
     // Sign out every other session (e.g. a stolen one) but keep this one logged in.
@@ -268,7 +426,9 @@ app.post('/api/auth/mfa/enable', requireAuth, async (req, res) => {
     if (!secret) {
       return res.status(400).json({ error: 'Start 2FA setup first.' });
     }
+    if (isLimited(`mfaset:${req.session.userId}`)) return res.status(429).json(TOO_MANY);
     if (!verifyTotpToken(String(req.body?.token ?? ''), secret)) {
+      recordFailure(`mfaset:${req.session.userId}`);
       return res.status(401).json({ error: 'That code didn\'t match. Check your authenticator app and try again.' });
     }
 
@@ -286,8 +446,10 @@ app.post('/api/auth/mfa/enable', requireAuth, async (req, res) => {
 app.post('/api/auth/mfa/disable', requireAuth, async (req, res) => {
   try {
     const user = getUserById(req.session.userId);
+    if (isLimited(`pw:${user.id}`)) return res.status(429).json(TOO_MANY);
     const valid = await verifyPassword(String(req.body?.password ?? ''), user.passwordHash);
     if (!valid) {
+      recordFailure(`pw:${user.id}`);
       return res.status(401).json({ error: 'Incorrect password.' });
     }
     disableTotp(user.id);
@@ -299,6 +461,28 @@ app.post('/api/auth/mfa/disable', requireAuth, async (req, res) => {
 });
 
 // ---------------------------------------------------------------------------
+// ---------------------------------------------------------------------------
+// GET /api/account/export — everything this account holds, as one restorable file
+// ---------------------------------------------------------------------------
+app.get('/api/account/export', requireAuth, (req, res) => {
+  try {
+    const userId = req.session.userId;
+    const user = getUserById(userId);
+    const backup = buildAccountExport(user, {
+      projects: () => getAllProjects(userId).map((p) => getProject(p.id, userId)).filter(Boolean),
+      prefs: () => getUserPrefs(userId),
+      marks: () => getReaderMarks(userId),
+      ink: () => getAllReaderInk(userId),
+      plans: () => getReadingProgress(userId),
+    });
+    res.set('Content-Disposition', `attachment; filename="${accountExportName()}"`);
+    res.json(backup);
+  } catch (err) {
+    console.error('GET /api/account/export error:', err);
+    res.status(500).json({ error: 'Failed to export your data.' });
+  }
+});
+
 // GET /api/projects — list all project summaries owned by the current user
 // ---------------------------------------------------------------------------
 app.get('/api/projects', requireAuth, (req, res) => {
@@ -342,6 +526,11 @@ app.put('/api/projects/:id', requireAuth, (req, res) => {
     }
     if (body.id.length > 100) return res.status(400).json({ error: 'Invalid project id.' });
     if (body.title.length > 500) return res.status(400).json({ error: 'Project title is too long.' });
+    // Refuse to overwrite a copy another device saved after the one this device last saw
+    const stored = getProjectEdited(body.id, req.session.userId);
+    if (isSaveConflict({ stored, base: parseBase(req.get('X-Base-Edited')), force: req.query.force === '1' })) {
+      return res.status(409).json({ error: 'This study was changed on another device.', code: 'conflict', serverEdited: stored });
+    }
     const saved = upsertProject(body, req.session.userId);
     if (!saved) {
       return res.status(403).json({ error: 'That project belongs to a different account.' });
@@ -384,8 +573,10 @@ app.get('/api/reader/ink', requireAuth, (req, res) => {
 app.put('/api/reader/ink/:book/:chapter', requireAuth, (req, res) => {
   try {
     const { book, chapter } = req.params;
-    const { strokes } = req.body;
+    const { strokes } = req.body ?? {};
+    if (!/^[1-3A-Za-z]{3}$/.test(book) || !/^\d{1,3}$/.test(chapter)) return res.status(400).json({ error: 'Invalid book or chapter.' });
     if (!Array.isArray(strokes)) return res.status(400).json({ error: 'strokes must be an array.' });
+    if (strokes.length > 20000) return res.status(413).json({ error: 'Too much ink on one page.' });
     setReaderInkPage(req.session.userId, book, chapter, strokes);
     res.json({ ok: true });
   } catch (err) {
@@ -394,6 +585,114 @@ app.put('/api/reader/ink/:book/:chapter', requireAuth, (req, res) => {
   }
 });
 
+// GET /api/prefs — the user's synced display preferences ({ prefs: { key: { v, at } } })
+app.get('/api/prefs', requireAuth, (req, res) => {
+  try {
+    res.json({ prefs: getUserPrefs(req.session.userId) });
+  } catch (err) {
+    console.error('GET /api/prefs error:', err);
+    res.status(500).json({ error: 'Failed to load preferences.' });
+  }
+});
+
+// PUT /api/prefs — merge changed preferences in (newest change per key wins); returns the result
+app.put('/api/prefs', requireAuth, (req, res) => {
+  try {
+    const merged = mergePrefs(getUserPrefs(req.session.userId), cleanPrefsPatch(req.body));
+    setUserPrefs(req.session.userId, merged);
+    res.json({ prefs: merged });
+  } catch (err) {
+    console.error('PUT /api/prefs error:', err);
+    res.status(500).json({ error: 'Failed to save preferences.' });
+  }
+});
+
+// GET /api/reader/marks — the user's bookmarks + highlights, with an updatedAt to compare against
+app.get('/api/reader/marks', requireAuth, (req, res) => {
+  try {
+    res.json(getReaderMarks(req.session.userId));
+  } catch (err) {
+    console.error('GET /api/reader/marks error:', err);
+    res.status(500).json({ error: 'Failed to load bookmarks and highlights.' });
+  }
+});
+
+// PUT /api/reader/marks — replace the user's bookmarks + highlights ({ bookmarks, highlights })
+app.put('/api/reader/marks', requireAuth, (req, res) => {
+  try {
+    const marks = cleanMarks(req.body);
+    if (!marks) return res.status(400).json({ error: 'Body must be an object.' });
+    res.json({ ok: true, updatedAt: setReaderMarks(req.session.userId, marks) });
+  } catch (err) {
+    console.error('PUT /api/reader/marks error:', err);
+    res.status(500).json({ error: 'Failed to save bookmarks and highlights.' });
+  }
+});
+
+// ---------------------------------------------------------------------------
+// Reading plan progress — cross-device sync for started/completed reading plans
+// ---------------------------------------------------------------------------
+
+// GET /api/reading-plans — the current user's whole progress list
+registerBibleRoutes(app, requireAuth);
+registerIqBibleRoutes(app, requireAuth);
+
+app.get('/api/reading-plans', requireAuth, (req, res) => {
+  try {
+    res.json(getReadingProgress(req.session.userId));
+  } catch (err) {
+    console.error('GET /api/reading-plans error:', err);
+    res.status(500).json({ error: 'Failed to load reading plan progress.' });
+  }
+});
+
+// PUT /api/reading-plans — overwrite the current user's whole progress list
+// (an object: { progress: [...], customPlans: [...] })
+app.put('/api/reading-plans', requireAuth, (req, res) => {
+  try {
+    if (!req.body || typeof req.body !== 'object' || Array.isArray(req.body)) {
+      return res.status(400).json({ error: 'Body must be an object.' });
+    }
+    const { progress, customPlans, activity } = req.body;
+    if ([progress, customPlans, activity].some((v) => v !== undefined && !Array.isArray(v))
+      || (progress?.length ?? 0) > 500 || (customPlans?.length ?? 0) > 200 || (activity?.length ?? 0) > 20000) {
+      return res.status(400).json({ error: 'progress, customPlans and activity must be reasonably sized lists.' });
+    }
+    setReadingProgress(req.session.userId, { progress: progress ?? [], customPlans: customPlans ?? [], activity: activity ?? [] });
+    res.json({ ok: true });
+  } catch (err) {
+    console.error('PUT /api/reading-plans error:', err);
+    res.status(500).json({ error: 'Failed to save reading plan progress.' });
+  }
+});
+
+// POST /api/auth/reminder-test — sends a test notification to the topic in the request
+// body (so it can be tried before saving), or to the saved settings.
+const _lastReminderTest = new Map(); // userId -> timestamp, to keep test sends from being spammed
+app.post('/api/auth/reminder-test', requireAuth, async (req, res) => {
+  const userId = req.session.userId;
+  if (Date.now() - (_lastReminderTest.get(userId) ?? 0) < 5000) {
+    return res.status(429).json({ error: 'Wait a few seconds before sending another test.' });
+  }
+  _lastReminderTest.set(userId, Date.now());
+  const saved = getUserById(userId);
+  const ntfyTopic = String(req.body?.ntfyTopic ?? saved?.ntfyTopic ?? '').trim();
+  const ntfyUrl = String(req.body?.ntfyUrl ?? saved?.ntfyUrl ?? '').trim();
+  if (!ntfyTopic) return res.status(400).json({ error: 'Enter a topic first.' });
+  if (!/^[A-Za-z0-9_-]{1,64}$/.test(ntfyTopic)) {
+    return res.status(400).json({ error: 'Topic can only contain letters, numbers, "-" and "_".' });
+  }
+  if (ntfyUrl && !/^https?:\/\/.{1,200}$/.test(ntfyUrl)) {
+    return res.status(400).json({ error: 'Server URL must start with http:// or https://.' });
+  }
+  try {
+    await sendTestReminder({ ntfyTopic, ntfyUrl });
+    res.json({ ok: true });
+  } catch (err) {
+    res.status(502).json({ error: err.message });
+  }
+});
+
 // ---------------------------------------------------------------------------
 // Read-only share links
 // ---------------------------------------------------------------------------
@@ -435,6 +734,50 @@ app.delete('/api/projects/:id/share', requireAuth, (req, res) => {
   }
 });
 
+// Read-only outline links. A separate token from the study share link, and the public endpoint returns
+// only the outlines (see outlineShare.js), never the notes or scripts.
+app.get('/api/projects/:id/outline-share', requireAuth, (req, res) => {
+  try {
+    res.json({ shareToken: getOutlineShareToken(req.params.id, req.session.userId) });
+  } catch (err) {
+    console.error('GET /api/projects/:id/outline-share error:', err);
+    res.status(500).json({ error: 'Failed to load share status.' });
+  }
+});
+
+app.post('/api/projects/:id/outline-share', requireAuth, (req, res) => {
+  try {
+    const token = getOutlineShareToken(req.params.id, req.session.userId) || randomUUID().replace(/-/g, '');
+    if (!setOutlineShareToken(req.params.id, req.session.userId, token)) return res.status(404).json({ error: 'Project not found.' });
+    res.json({ shareToken: token });
+  } catch (err) {
+    console.error('POST /api/projects/:id/outline-share error:', err);
+    res.status(500).json({ error: 'Failed to enable sharing.' });
+  }
+});
+
+app.delete('/api/projects/:id/outline-share', requireAuth, (req, res) => {
+  try {
+    clearOutlineShareToken(req.params.id, req.session.userId);
+    res.json({ ok: true });
+  } catch (err) {
+    console.error('DELETE /api/projects/:id/outline-share error:', err);
+    res.status(500).json({ error: 'Failed to revoke sharing.' });
+  }
+});
+
+// GET /api/share-outline/:token — PUBLIC, no login required
+app.get('/api/share-outline/:token', (req, res) => {
+  try {
+    const project = getProjectByOutlineToken(req.params.token);
+    if (!project) return res.status(404).json({ error: 'This outline link is invalid or has been turned off.' });
+    res.json(buildOutlinePayload(project));
+  } catch (err) {
+    console.error('GET /api/share-outline/:token error:', err);
+    res.status(500).json({ error: 'Failed to load the shared outline.' });
+  }
+});
+
 // GET /api/share/:token — PUBLIC, no login required: fetch a shared project read-only
 app.get('/api/share/:token', (req, res) => {
   try {
@@ -467,6 +810,7 @@ app.delete('/api/admin/users/:id', requireAuth, requireAdmin, (req, res) => {
       return res.status(400).json({ error: "Can't delete your own admin account." });
     }
     adminDeleteUser(req.params.id);
+    destroyAllSessionsForUser(req.params.id);
     res.json({ ok: true });
   } catch (err) {
     console.error('DELETE /api/admin/users/:id error:', err);
@@ -545,6 +889,8 @@ if (isProd) {
 // Start
 // ---------------------------------------------------------------------------
 initDb();
+startReminderScheduler();
+startBackupScheduler();
 app.listen(PORT, () => {
   console.log(`Bible Study API running on http://localhost:${PORT}`);
   if (isProd) {

server/iqbible.js

@@ -0,0 +1,143 @@
+// Proxy for the IQ Bible API (https://api.iqbible.com): commentaries, lexicons, original-language text,
+// places, topics, devotionals, narrations and more. The API key stays on the server (IQBIBLE_API_KEY,
+// from the environment or .env); the browser only talks to /api/iq/... and only to the routes listed here.
+// Only verse/chapter text is cached (up to 24h, as the API's terms require); see isTextPath.
+import { existsSync, readFileSync } from 'fs';
+import { fileURLToPath } from 'url';
+import { dirname, join } from 'path';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const envPath = join(__dirname, '..', '.env');
+if (existsSync(envPath)) {
+  for (const line of readFileSync(envPath, 'utf8').split('\n')) {
+    const m = line.match(/^\s*([A-Za-z_][A-Za-z0-9_]*)\s*=\s*(.*?)\s*$/);
+    if (m && process.env[m[1]] === undefined) process.env[m[1]] = m[2].replace(/^(['"])(.*)\1$/, '$2');
+  }
+}
+
+const BASE = () => (process.env.IQBIBLE_API_BASE || 'https://api.iqbible.com/api/v2').replace(/\/+$/, '');
+const S = '[\\w.~%-]+'; // one path segment
+const route = (pattern, opts = {}) => ({ re: new RegExp(`^${pattern.replace(/@/g, S)}/?$`), ...opts });
+
+// Every upstream route the app may reach. Anything else is a 404 here, whatever the browser asks for.
+export const ROUTES = [
+  route('/commentaries'), route('/commentaries/@/@/@'), route('/commentaries/@/@/@/@'),
+  route('/books/@/info'), route('/books/@/chapters/@/info'), route('/books/@/commentaries'), route('/books/abbreviations'),
+  route('/lexicon/sources'), route('/lexicon/crosswalk/@'),
+  route('/lexicon/(?:greek|hebrew)/(?:strongs|bdb|lsj|abbott-smith)/@'), route('/lexicon/greek/lsj/word/@'),
+  route('/original-language/@/@'), route('/original-language/@/@/@'), route('/morphology/@'),
+  route('/geo/@/@'), route('/geo/@/@/@'), route('/geo/places/@'),
+  route('/topics'), route('/topics/@'), route('/topics/@/@'), route('/topics/@/@/@'),
+  route('/genealogies/@'), route('/bible-characters/@'), route('/bible-people/@'), route('/bible-people/@/@'),
+  route('/harmony'), route('/harmony/@'), route('/textual-variants/@/@'), route('/textual-variants/@/@/@'),
+  route('/chronology/for/@/@'), route('/reference/weights-measures'),
+  route('/cross-references/@/@'), route('/cross-references/@/@/@'),
+  route('/dictionaries'), route('/dictionaries/@'),
+  route('/devotionals/today'), route('/devotionals/@/@'),
+  route('/bibles'), route('/bibles/languages'), route('/bibles/parallel'), route('/bibles/@'), route('/bibles/@/@'), route('/bibles/@/verse-of-the-day'), route('/bibles/@/reading-plan'),
+  route('/bibles/@/@/@/@'), route('/bibles/@/@/@'),
+  route('/audio'), route('/audio/@/@/@', { cache: false }),
+  route('/ai/context', { heavy: true }), route('/bibles/@/search', { heavy: true }), route('/parse/citations'),
+];
+
+// Verse and chapter text is the one thing the API's terms let (and require) a client to cache, for up to 24h.
+// Everything else caps at 1 hour and needs written permission, so it is only cached when IQBIBLE_CACHE_HOURS
+// is set (do that only once permission is on file).
+const TEXT_PATH = /^\/bibles\/[\w]+\/(?!random\/|search|reading-plan|verse-of-the-day|verses|books|word-count)[\w.~%-]+\/\d+(?:\/[\d-]+)?$/;
+export const isTextPath = (p) => TEXT_PATH.test(p.split('?')[0]);
+
+const QUERY_KEY = /^[\w-]{1,40}$/;
+
+// Maps an incoming sub-path + query onto an upstream URL, or null when it isn't an allowed route.
+// The API key can never be supplied by the browser (apikey is dropped).
+export function resolveIqPath(path, query = {}) {
+  const clean = `/${String(path ?? '').replace(/^\/+/, '')}`;
+  if (clean.includes('..') || clean.includes('//') || clean.length > 300) return null;
+  const hit = ROUTES.find((r) => r.re.test(clean));
+  if (!hit) return null;
+  const qs = new URLSearchParams();
+  for (const [k, v] of Object.entries(query).sort(([a], [b]) => a.localeCompare(b))) {
+    if (!QUERY_KEY.test(k) || k.toLowerCase() === 'apikey' || typeof v !== 'string' || v.length > 200) continue;
+    qs.append(k, v);
+  }
+  const q = qs.toString();
+  const key = `${clean}${q ? `?${q}` : ''}`;
+  return { key, cache: hit.cache !== false, heavy: !!hit.heavy, text: isTextPath(clean) };
+}
+
+// ---- caching, bounded by the API's own licensing summary ----
+let policy = null; // { textMs, otherMs }
+let policyAt = 0;
+async function cacheTtl(headers, isText) {
+  if (!policy || Date.now() - policyAt > 6 * 3600_000) {
+    try {
+      const res = await fetch(`${BASE()}/licensing`, { headers, signal: AbortSignal.timeout(8000) });
+      const s = (await res.json())?.summary;
+      const allowed = s?.caching_allowed !== false;
+      const textHours = allowed ? Math.min(Number(s?.caching_verse_chapter_hours) || 24, 24) : 0;
+      const optIn = Number(process.env.IQBIBLE_CACHE_HOURS) || 0; // only with the API owner's written permission
+      const otherHours = allowed ? Math.min(optIn, Number(s?.caching_max_hours) || 1) : 0;
+      policy = { textMs: textHours * 3600_000, otherMs: otherHours * 3600_000 };
+    } catch {
+      policy = { textMs: 0, otherMs: 0 };
+    }
+    policyAt = Date.now();
+  }
+  return isText ? policy.textMs : policy.otherMs;
+}
+
+const cache = new Map(); // key -> { at, status, type, body }
+const CACHE_MAX = 1500;
+
+const hits = new Map(); // `${userId}:${bucket}` -> { n, resetAt }
+function overLimit(userId, heavy) {
+  const bucket = heavy ? 'h' : 'n';
+  const max = heavy ? 10 : 120; // per minute, per signed-in user (the API budget is shared by everyone)
+  const k = `${userId}:${bucket}`;
+  const now = Date.now();
+  const e = hits.get(k);
+  if (!e || now > e.resetAt) { hits.set(k, { n: 1, resetAt: now + 60_000 }); return false; }
+  e.n += 1;
+  return e.n > max;
+}
+
+export function registerIqBibleRoutes(app, requireAuth) {
+  const apiKey = () => process.env.IQBIBLE_API_KEY;
+
+  app.get('/api/iq/status', requireAuth, (_req, res) => res.json({ available: Boolean(apiKey()) }));
+
+  app.get('/api/iq/*', requireAuth, async (req, res) => {
+    const target = resolveIqPath(req.params[0], req.query);
+    if (!target) return res.status(404).json({ error: 'Unknown IQ Bible route.' });
+    if (!apiKey()) return res.status(503).json({ error: 'IQBIBLE_API_KEY is not configured on the server.' });
+    if (overLimit(req.session.userId, target.heavy)) return res.status(429).json({ error: 'Slow down a little and try again in a minute.' });
+
+    const headers = { 'X-IQBible-API-Key': apiKey(), Accept: '*/*' };
+    const hit = target.cache && (target.text || process.env.IQBIBLE_CACHE_HOURS) ? cache.get(target.key) : null;
+    if (hit && Date.now() - hit.at < hit.ttl) {
+      res.status(hit.status).type(hit.type).send(hit.body);
+      return;
+    }
+    try {
+      const upstream = await fetch(`${BASE()}${target.key}`, { headers, signal: AbortSignal.timeout(20_000) });
+      const body = Buffer.from(await upstream.arrayBuffer());
+      const type = upstream.headers.get('content-type') || 'application/json';
+      if (upstream.status === 401) return res.status(502).json({ error: 'The IQ Bible key was rejected. Check IQBIBLE_API_KEY.' });
+      if (upstream.status === 429) {
+        const retry = upstream.headers.get('retry-after');
+        if (retry) res.set('Retry-After', retry);
+        return res.status(429).json({ error: 'The IQ Bible allowance is used up for now. Try again later.' });
+      }
+      if (upstream.ok && target.cache && (target.text || process.env.IQBIBLE_CACHE_HOURS)) {
+        const ttl = await cacheTtl(headers, target.text);
+        if (ttl > 0) {
+          if (cache.size >= CACHE_MAX) cache.delete(cache.keys().next().value);
+          cache.set(target.key, { at: Date.now(), ttl, status: upstream.status, type, body });
+        }
+      }
+      res.status(upstream.status).type(type).send(body);
+    } catch {
+      res.status(502).json({ error: 'Could not reach the IQ Bible service.' });
+    }
+  });
+}

server/iqbible.test.js

@@ -0,0 +1,34 @@
+// @vitest-environment node
+import { test, expect } from 'vitest';
+import { resolveIqPath } from './iqbible.js';
+
+test('only listed IQ Bible routes are reachable', () => {
+  expect(resolveIqPath('commentaries/gill/JHN/3/16')?.key).toBe('/commentaries/gill/JHN/3/16');
+  expect(resolveIqPath('/geo/JHN/3')?.cache).toBe(true);
+  expect(resolveIqPath('/me')).toBeNull();
+  expect(resolveIqPath('/licensing')).toBeNull();
+  expect(resolveIqPath('/commentaries/gill/../me')).toBeNull();
+  expect(resolveIqPath('/lexicon/greek/strongs/G26')).not.toBeNull();
+});
+
+test('lexicon sources and audio routes', () => {
+  expect(resolveIqPath('/lexicon/greek/lsj/G0026')).not.toBeNull();
+  expect(resolveIqPath('/lexicon/hebrew/bdb/BDB1005')).not.toBeNull();
+  expect(resolveIqPath('/audio/eng_kjv/JHN/3')?.cache).toBe(false);
+  expect(resolveIqPath('/ai/context', { ref: 'JHN.3.16' })?.heavy).toBe(true);
+});
+
+test('the browser cannot send its own key and the query is normalised', () => {
+  const r = resolveIqPath('/bibles/eng_kjv/reading-plan', { days: '30', apikey: 'x', 'bad key': '1', format: 'ical' });
+  expect(r.key).toBe('/bibles/eng_kjv/reading-plan?days=30&format=ical');
+});
+
+test('only verse and chapter text counts as cacheable text', async () => {
+  const { isTextPath } = await import('./iqbible.js');
+  expect(isTextPath('/bibles/eng_kjv/JHN/3')).toBe(true);
+  expect(isTextPath('/bibles/eng_kjv/JHN/3/16')).toBe(true);
+  expect(isTextPath('/bibles/eng_kjv/random/verse')).toBe(false);
+  expect(isTextPath('/bibles/eng_kjv/verse-of-the-day')).toBe(false);
+  expect(isTextPath('/commentaries/gill/JHN/3')).toBe(false);
+  expect(resolveIqPath('/bibles/parallel', { v: 'eng_kjv,spa_rv' })).not.toBeNull();
+});

server/outlineShare.js

@@ -0,0 +1,59 @@
+// What a read-only outline link shows: the outlines of a study (the whole-study one and each chunk's)
+// and nothing else — no observations, interpretations, applications, scripts or word notes. The
+// outline data comes from the browser, so it is rebuilt field by field instead of passed through.
+const MAX_NODES = 2000;
+const MAX_DEPTH = 8;
+const KINDS = new Set(['', 'illustration', 'application', 'quote', 'question', 'transition']);
+
+const str = (v, max) => (typeof v === 'string' ? v.slice(0, max) : '');
+
+function cleanTree(nodes, depth, counter) {
+  if (!Array.isArray(nodes) || depth > MAX_DEPTH) return [];
+  const out = [];
+  for (const n of nodes) {
+    if (!n || typeof n !== 'object' || counter.n >= MAX_NODES) continue;
+    counter.n += 1;
+    const minutes = Number.isFinite(n.minutes) && n.minutes >= 0 && n.minutes <= 600 ? n.minutes : null;
+    out.push({
+      id: str(n.id, 64) || `n${counter.n}`,
+      text: str(n.text, 2000),
+      ref: str(n.ref, 200),
+      kind: KINDS.has(n.kind) ? n.kind : '',
+      minutes,
+      note: str(n.note, 8000),
+      scripture: n.scripture && typeof n.scripture.text === 'string'
+        ? { ref: str(n.scripture.ref, 200), text: str(n.scripture.text, 6000), translation: str(n.scripture.translation, 12) }
+        : null,
+      attachments: (Array.isArray(n.attachments) ? n.attachments : []).slice(0, 50)
+        .filter((a) => a && typeof a === 'object')
+        .map((a) => ({ id: str(a.id, 100), type: a.type === 'word' ? 'word' : 'xref', label: str(a.label, 200), ...(a.detail ? { detail: str(a.detail, 500) } : {}) })),
+      children: cleanTree(n.children, depth + 1, counter),
+    });
+  }
+  return out;
+}
+
+const chunkLabel = (chapters, chapterIndex, chunk) => {
+  const ch = chapters[chapterIndex];
+  const next = chapters[chapterIndex + 1];
+  if (Number.isInteger(chunk.spilloverEndVerse) && next && next.bookAbbrev === ch.bookAbbrev) {
+    return `${ch.book} ${ch.chapter}:${chunk.startVerse}–${next.chapter}:${chunk.spilloverEndVerse}`;
+  }
+  return chunk.startVerse === chunk.endVerse ? `${ch.book} ${ch.chapter}:${chunk.startVerse}` : `${ch.book} ${ch.chapter}:${chunk.startVerse}–${chunk.endVerse}`;
+};
+
+// -> { title, translation, outlines: [{ scope, label, tree }] } with only the outlines that have points
+export function buildOutlinePayload(project) {
+  const counter = { n: 0 };
+  const outlines = [];
+  const whole = cleanTree(project?.outline, 0, counter);
+  if (whole.length > 0) outlines.push({ scope: 'study', label: 'Whole study', tree: whole });
+  const chapters = Array.isArray(project?.chapters) ? project.chapters : [];
+  chapters.forEach((ch, chapterIndex) => {
+    for (const chunk of Array.isArray(ch?.chunks) ? ch.chunks : []) {
+      const tree = cleanTree(chunk?.outline, 0, counter);
+      if (tree.length > 0) outlines.push({ scope: str(chunk.id, 64), label: str(chunkLabel(chapters, chapterIndex, chunk), 200), tree });
+    }
+  });
+  return { title: str(project?.title, 500), translation: str(project?.translation, 12) || 'BSB', outlines };
+}

server/outlineShare.test.js

@@ -0,0 +1,42 @@
+import { expect, test } from 'vitest';
+import { buildOutlinePayload } from './outlineShare.js';
+
+const node = (id, extra = {}) => ({ id, text: id, ref: '', kind: '', minutes: null, note: '', scripture: null, attachments: [], children: [], ...extra });
+const project = {
+  title: 'Titus', translation: 'BSB',
+  outline: [node('a', { minutes: 5, kind: 'illustration', children: [node('a1')] })],
+  chapters: [{
+    book: 'Titus', bookAbbrev: 'TIT', chapter: '1', verses: [{ number: 1, text: 'secret verse text' }],
+    chunks: [
+      { id: 'c1', startVerse: 1, endVerse: 4, observation: 'PRIVATE OBSERVATION', finalScript: 'PRIVATE SCRIPT', greekWords: [{ lexeme: 'x' }], outline: [node('b')] },
+      { id: 'c2', startVerse: 5, endVerse: 5, observation: 'more private', outline: [] },
+    ],
+  }],
+};
+
+test('shares the outlines only, with each chunk labelled by its passage', () => {
+  const p = buildOutlinePayload(project);
+  expect(p.title).toBe('Titus');
+  expect(p.outlines.map((o) => [o.scope, o.label])).toEqual([['study', 'Whole study'], ['c1', 'Titus 1:1–4']]);
+  expect(p.outlines[0].tree[0]).toMatchObject({ text: 'a', minutes: 5, kind: 'illustration' });
+  expect(p.outlines[0].tree[0].children[0].text).toBe('a1');
+});
+
+test('nothing from the rest of the study leaks into what is shared', () => {
+  const json = JSON.stringify(buildOutlinePayload(project));
+  for (const secret of ['PRIVATE OBSERVATION', 'PRIVATE SCRIPT', 'secret verse text', 'more private', 'greekWords']) expect(json).not.toContain(secret);
+});
+
+test('unknown fields on a point are dropped, and bad values are cleaned', () => {
+  const p = buildOutlinePayload({ title: 'T', outline: [{ id: 'x', text: 'hi', evil: '<script>', kind: 'bogus', minutes: -4, scripture: { text: 5 }, attachments: [{ type: 'word', label: 'L' }, null], children: 'nope' }], chapters: [] });
+  expect(p.outlines[0].tree[0]).toEqual({
+    id: 'x', text: 'hi', ref: '', kind: '', minutes: null, note: '', scripture: null,
+    attachments: [{ id: '', type: 'word', label: 'L' }], children: [],
+  });
+});
+
+test('a study with no outlines shares none, and a huge outline is capped', () => {
+  expect(buildOutlinePayload({ title: 'T', chapters: [] }).outlines).toEqual([]);
+  const big = { title: 'T', outline: Array.from({ length: 3000 }, (_, i) => node(`n${i}`)), chapters: [] };
+  expect(buildOutlinePayload(big).outlines[0].tree).toHaveLength(2000);
+});

server/prefs.js

@@ -0,0 +1,57 @@
+// A user's synced display preferences: theme, default Reader translation, verse layout, the
+// commentary they last chose, and where they left off in the Reader. Each preference carries
+// its own timestamp ({ v, at }) so the most recent change to each one wins, device by device.
+const ENUMS = {
+  theme: ['paper', 'sepia', 'dark'],
+  translation: ['BSB', 'ESV', 'NLT', 'CSB', 'NASB', 'NET'],
+  layout: ['flow', 'verses'],
+  startPage: ['studies', 'reader', 'plans'], // where the app opens and where Home buttons go
+  planTranslation: ['same', 'BSB', 'ESV', 'NLT', 'CSB', 'NASB', 'NET'], // which Bible new reading plans start in
+  commentarySource: ['matthew-henry', 'john-gill', 'jamieson-fausset-brown', 'tyndale', 'adam-clarke', 'john-calvin', 'keil-delitzsch'],
+};
+const DAY_MS = 86_400_000;
+const COLOR = /^#[0-9a-fA-F]{3,8}$/;
+
+// A cleaned value, or undefined when it isn't acceptable for that preference.
+export function cleanPrefValue(key, value) {
+  if (ENUMS[key]) return ENUMS[key].includes(value) ? value : undefined;
+  if (key === 'colorLabels') {
+    // What each highlight colour means to the reader: { "#fef08a": "Promises", ... }
+    if (!value || typeof value !== 'object' || Array.isArray(value)) return undefined;
+    const out = {};
+    for (const [color, label] of Object.entries(value).slice(0, 12)) {
+      if (COLOR.test(color) && typeof label === 'string' && label.trim()) out[color] = label.trim().slice(0, 30);
+    }
+    return out;
+  }
+  if (key === 'position') {
+    if (!value || typeof value !== 'object') return undefined;
+    const book = String(value.book ?? '').toUpperCase();
+    if (!/^[1-3A-Z]{3}$/.test(book) || !Number.isInteger(value.chapter) || value.chapter < 1 || value.chapter > 200) return undefined;
+    return { book, chapter: value.chapter };
+  }
+  return undefined;
+}
+
+// Body -> { key: { v, at } } with only known keys, valid values and sane timestamps.
+export function cleanPrefsPatch(body, now = Date.now()) {
+  const out = {};
+  const prefs = body?.prefs;
+  if (!prefs || typeof prefs !== 'object' || Array.isArray(prefs)) return out;
+  for (const [key, entry] of Object.entries(prefs)) {
+    const v = cleanPrefValue(key, entry?.v);
+    const at = entry?.at;
+    if (v === undefined || !Number.isFinite(at) || at < 0 || at > now + DAY_MS) continue;
+    out[key] = { v, at };
+  }
+  return out;
+}
+
+// Per key, the entry with the newer timestamp wins (the stored one on a tie).
+export function mergePrefs(existing = {}, patch = {}) {
+  const merged = { ...existing };
+  for (const [key, entry] of Object.entries(patch)) {
+    if (!merged[key] || entry.at > merged[key].at) merged[key] = entry;
+  }
+  return merged;
+}

server/prefs.test.js

@@ -0,0 +1,69 @@
+// @vitest-environment node
+import { mkdtempSync } from 'node:fs';
+import { tmpdir } from 'node:os';
+import { join } from 'node:path';
+import { test, expect } from 'vitest';
+import { cleanPrefValue, cleanPrefsPatch, mergePrefs } from './prefs.js';
+
+const NOW = 1_800_000_000_000;
+
+test('only known preferences with valid values are accepted', () => {
+  expect(cleanPrefValue('theme', 'dark')).toBe('dark');
+  expect(cleanPrefValue('theme', 'neon')).toBeUndefined();
+  expect(cleanPrefValue('translation', 'ESV')).toBe('ESV');
+  expect(cleanPrefValue('translation', 'KJV')).toBeUndefined();
+  expect(cleanPrefValue('layout', 'flow')).toBe('flow');
+  expect(cleanPrefValue('commentarySource', 'tyndale')).toBe('tyndale');
+  expect(cleanPrefValue('startPage', 'reader')).toBe('reader');
+  expect(cleanPrefValue('startPage', 'admin')).toBeUndefined();
+  expect(cleanPrefValue('planTranslation', 'same')).toBe('same');
+  expect(cleanPrefValue('planTranslation', 'NASB')).toBe('NASB');
+  expect(cleanPrefValue('planTranslation', 'KJV')).toBeUndefined();
+  expect(cleanPrefValue('fontSize', 2)).toBeUndefined(); // not a synced preference
+});
+
+test('position needs a real book and chapter, and the book is normalised', () => {
+  expect(cleanPrefValue('position', { book: 'jhn', chapter: 3 })).toEqual({ book: 'JHN', chapter: 3 });
+  expect(cleanPrefValue('position', { book: 'JOHN', chapter: 3 })).toBeUndefined();
+  expect(cleanPrefValue('position', { book: 'JHN', chapter: 0 })).toBeUndefined();
+  expect(cleanPrefValue('position', { book: 'JHN', chapter: '3' })).toBeUndefined();
+  expect(cleanPrefValue('position', null)).toBeUndefined();
+});
+
+test('cleanPrefsPatch drops unknown keys, bad values and silly timestamps', () => {
+  const patch = cleanPrefsPatch({ prefs: {
+    theme: { v: 'sepia', at: NOW },
+    layout: { v: 'nope', at: NOW },
+    evil: { v: 'x', at: NOW },
+    translation: { v: 'NLT', at: 'yesterday' },
+    commentarySource: { v: 'tyndale', at: NOW + 5 * 86_400_000 }, // far in the future
+    position: { v: { book: 'GEN', chapter: 2 }, at: NOW - 10 },
+  } }, NOW);
+  expect(patch).toEqual({ theme: { v: 'sepia', at: NOW }, position: { v: { book: 'GEN', chapter: 2 }, at: NOW - 10 } });
+  expect(cleanPrefsPatch(null)).toEqual({});
+  expect(cleanPrefsPatch({ prefs: [] })).toEqual({});
+});
+
+test('the newest change to each preference wins, independently', () => {
+  const existing = { theme: { v: 'dark', at: 100 }, layout: { v: 'flow', at: 500 } };
+  const patch = { theme: { v: 'paper', at: 200 }, layout: { v: 'verses', at: 300 }, translation: { v: 'ESV', at: 50 } };
+  expect(mergePrefs(existing, patch)).toEqual({
+    theme: { v: 'paper', at: 200 }, // patch is newer
+    layout: { v: 'flow', at: 500 }, // stored is newer
+    translation: { v: 'ESV', at: 50 }, // new key
+  });
+  expect(mergePrefs({ theme: { v: 'dark', at: 100 } }, { theme: { v: 'paper', at: 100 } }).theme.v).toBe('dark'); // tie keeps stored
+});
+
+test('the database keeps one row per user', async () => {
+  process.env.DATA_DIR = mkdtempSync(join(tmpdir(), 'prefs-'));
+  const db = await import('./db.js');
+  db.initDb();
+  db.createUser({ id: 'u1', email: 'a@example.test', passwordHash: 'x' });
+  db.createUser({ id: 'u2', email: 'b@example.test', passwordHash: 'x' });
+  expect(db.getUserPrefs('u1')).toEqual({});
+  db.setUserPrefs('u1', { theme: { v: 'dark', at: 1 } });
+  db.setUserPrefs('u1', { theme: { v: 'sepia', at: 2 } });
+  expect(db.getUserPrefs('u1')).toEqual({ theme: { v: 'sepia', at: 2 } });
+  expect(db.getUserPrefs('u2')).toEqual({});
+});

server/projectSync.js

@@ -0,0 +1,18 @@
+// Stops one device from silently overwriting a study another device has saved since. The browser sends
+// the `lastEdited` of the server copy it last saw (X-Base-Edited); if the server's copy has moved past
+// that, the save is refused with 409 and the person chooses whose version to keep.
+
+// stored: the server copy's lastEdited (null when there is none); base: what the client last saw
+// (null/undefined when it never synced this study); force: the person chose "keep mine".
+export function isSaveConflict({ stored, base, force = false }) {
+  if (force || stored == null) return false;
+  if (!Number.isFinite(base)) return false; // a device that never saw the server's copy has nothing to compare
+  return stored > base;
+}
+
+// Reads the base header; anything that isn't a plain number is treated as "unknown".
+export function parseBase(header) {
+  if (header == null || header === '') return null;
+  const n = Number(header);
+  return Number.isFinite(n) ? n : null;
+}

server/projectSync.test.js

@@ -0,0 +1,24 @@
+import { expect, test } from 'vitest';
+import { isSaveConflict, parseBase } from './projectSync.js';
+
+test('a save is fine when the server copy is no newer than what the device last saw', () => {
+  expect(isSaveConflict({ stored: 100, base: 100 })).toBe(false);
+  expect(isSaveConflict({ stored: 90, base: 100 })).toBe(false);
+});
+
+test('a save conflicts when another device saved after the one this device last saw', () => {
+  expect(isSaveConflict({ stored: 200, base: 100 })).toBe(true);
+});
+
+test('first saves, unknown bases and "keep mine" never conflict', () => {
+  expect(isSaveConflict({ stored: null, base: 100 })).toBe(false);
+  expect(isSaveConflict({ stored: 200, base: null })).toBe(false);
+  expect(isSaveConflict({ stored: 200, base: 100, force: true })).toBe(false);
+});
+
+test('reads the base header', () => {
+  expect(parseBase('1700000000000')).toBe(1700000000000);
+  expect(parseBase('')).toBeNull();
+  expect(parseBase(undefined)).toBeNull();
+  expect(parseBase('abc')).toBeNull();
+});

server/readerMarks.js

@@ -0,0 +1,43 @@
+// Validation for a user's synced Reader bookmarks and text highlights. The data comes
+// from the browser, so everything is checked and malformed entries are dropped.
+const COLOR = /^#[0-9a-fA-F]{3,8}$/;
+const BOOKMARK_KEY = /^[1-3]?[A-Za-z]{2,3}-\d{1,3}-\d{1,3}$/; // e.g. "JHN-3-16", "1SA-3-5"
+const BOOK = /^[1-3A-Za-z]{3}$/;
+const MAX_BOOKMARKS = 5000;
+const MAX_HIGHLIGHTS = 20000;
+
+const int = (v, min, max) => Number.isInteger(v) && v >= min && v <= max;
+
+// Returns { bookmarks, highlights } with only well-formed entries, or null when the body is
+// not an object at all.
+export function cleanMarks(body) {
+  if (!body || typeof body !== 'object' || Array.isArray(body)) return null;
+
+  const bookmarks = {};
+  if (body.bookmarks && typeof body.bookmarks === 'object' && !Array.isArray(body.bookmarks)) {
+    for (const [key, color] of Object.entries(body.bookmarks).slice(0, MAX_BOOKMARKS)) {
+      if (BOOKMARK_KEY.test(key) && typeof color === 'string' && COLOR.test(color)) bookmarks[key] = color;
+    }
+  }
+
+  const highlights = [];
+  if (Array.isArray(body.highlights)) {
+    const seen = new Set();
+    for (const h of body.highlights.slice(0, MAX_HIGHLIGHTS)) {
+      if (!h || typeof h !== 'object') continue;
+      if (typeof h.id !== 'string' || h.id.length === 0 || h.id.length > 64 || seen.has(h.id)) continue;
+      if (!BOOK.test(String(h.book)) || !int(h.chapter, 1, 200) || !int(h.verse, 1, 200)) continue;
+      if (!int(h.startOffset, 0, 5000) || !int(h.endOffset, 1, 5000) || h.endOffset <= h.startOffset) continue;
+      if (typeof h.color !== 'string' || !COLOR.test(h.color)) continue;
+      seen.add(h.id);
+      const entry = {
+        id: h.id, book: String(h.book).toUpperCase(), chapter: h.chapter, verse: h.verse,
+        startOffset: h.startOffset, endOffset: h.endOffset, color: h.color,
+      };
+      // The highlighted words, kept so lists of highlights can show them without loading the chapter
+      if (typeof h.text === 'string' && h.text.length > 0) entry.text = h.text.slice(0, 500);
+      highlights.push(entry);
+    }
+  }
+  return { bookmarks, highlights };
+}

server/readerMarks.test.js

@@ -0,0 +1,60 @@
+// @vitest-environment node
+import { mkdtempSync } from 'node:fs';
+import { tmpdir } from 'node:os';
+import { join } from 'node:path';
+import { test, expect } from 'vitest';
+import { cleanMarks } from './readerMarks.js';
+
+const hl = (over = {}) => ({ id: 'h1', book: 'JHN', chapter: 3, verse: 16, startOffset: 4, endOffset: 20, color: '#fef08a', ...over });
+
+test('a non-object body is rejected', () => {
+  expect(cleanMarks(null)).toBeNull();
+  expect(cleanMarks([])).toBeNull();
+  expect(cleanMarks('x')).toBeNull();
+});
+
+test('good bookmarks and highlights pass through unchanged', () => {
+  const body = { bookmarks: { 'JHN-3-16': '#fef08a', '1SA-3-5': '#bbf7d0' }, highlights: [hl()] };
+  expect(cleanMarks(body)).toEqual(body);
+});
+
+test('malformed bookmarks are dropped, good ones kept', () => {
+  const out = cleanMarks({ bookmarks: { 'JHN-3-16': '#fef08a', 'bad key': '#fef08a', 'GEN-1-1': 'red', 'GEN-1-2': 5, '../x-1-1': '#fff' } });
+  expect(out.bookmarks).toEqual({ 'JHN-3-16': '#fef08a' });
+});
+
+test('highlights are validated field by field and de-duplicated by id', () => {
+  const out = cleanMarks({ highlights: [
+    hl(),
+    hl({ id: 'h1', verse: 17 }), // duplicate id
+    hl({ id: '' }), hl({ id: 'x'.repeat(65) }),
+    hl({ id: 'a', book: 'JOHN' }), hl({ id: 'b', chapter: 0 }), hl({ id: 'c', verse: 201 }),
+    hl({ id: 'd', startOffset: 10, endOffset: 10 }), hl({ id: 'e', startOffset: -1 }), hl({ id: 'f', color: 'yellow' }),
+    'nope', null,
+    hl({ id: 'ok', book: 'gen' }),
+  ] });
+  expect(out.highlights.map((h) => h.id)).toEqual(['h1', 'ok']);
+  expect(out.highlights[1].book).toBe('GEN'); // normalised
+});
+
+test('missing sections become empty ones, and unknown fields are not stored', () => {
+  expect(cleanMarks({})).toEqual({ bookmarks: {}, highlights: [] });
+  expect(cleanMarks({ highlights: [{ ...hl(), evil: '<script>' }] }).highlights[0]).not.toHaveProperty('evil');
+});
+
+test('the database keeps one row per user and updatedAt only moves forward', async () => {
+  process.env.DATA_DIR = mkdtempSync(join(tmpdir(), 'marks-'));
+  const db = await import('./db.js');
+  db.initDb();
+  db.createUser({ id: 'u1', email: 'a@example.test', passwordHash: 'x' });
+  db.createUser({ id: 'u2', email: 'b@example.test', passwordHash: 'x' });
+  expect(db.getReaderMarks('u1')).toEqual({ bookmarks: {}, highlights: [], updatedAt: 0 });
+  const t1 = db.setReaderMarks('u1', { bookmarks: { 'JHN-3-16': '#fef08a' }, highlights: [] });
+  const t2 = db.setReaderMarks('u1', { bookmarks: {}, highlights: [hl()] });
+  expect(t2).toBeGreaterThan(t1);
+  const saved = db.getReaderMarks('u1');
+  expect(saved.updatedAt).toBe(t2);
+  expect(saved.bookmarks).toEqual({});
+  expect(saved.highlights).toHaveLength(1);
+  expect(db.getReaderMarks('u2').updatedAt).toBe(0); // other users are untouched
+});

server/reminders.js

@@ -0,0 +1,129 @@
+// Daily "don't forget to read" reminders, sent via ntfy.sh (https://ntfy.sh) —
+// a free pub/sub push service: POST a message to a topic URL, anyone
+// subscribed to that topic (via the ntfy app or a browser) gets notified.
+// No API keys or push-subscription plumbing needed.
+import { lookup } from 'dns/promises';
+import { isIP } from 'net';
+import { getUsersWithRemindersEnabled, setLastReminderDate, getReadingProgress } from './db.js';
+
+// A reminder still goes out if the server was briefly down (or restarting) at the
+// exact minute — as long as it's within this window after the chosen time.
+const GRACE_MINUTES = 180;
+const SEND_TIMEOUT_MS = 10_000;
+// A failed send is retried at most this often, so a dead ntfy server isn't hit every minute for hours.
+const RETRY_AFTER_MS = 15 * 60 * 1000;
+const _lastAttempt = new Map(); // userId -> timestamp of the last failed send
+
+// True for loopback, private, link-local and other non-public addresses (IPv4 and IPv6).
+export function isPrivateAddress(addr) {
+  const v = isIP(addr);
+  if (v === 4) {
+    const [a, b] = addr.split('.').map(Number);
+    return a === 0 || a === 10 || a === 127 || (a === 169 && b === 254) || (a === 172 && b >= 16 && b <= 31)
+      || (a === 192 && b === 168) || (a === 100 && b >= 64 && b <= 127) || a >= 224;
+  }
+  if (v === 6) {
+    const l = addr.toLowerCase();
+    if (l === '::' || l === '::1') return true;
+    if (l.startsWith('::ffff:')) return isPrivateAddress(l.slice(7));
+    return /^f[cd]/.test(l) || /^fe[89ab]/.test(l);
+  }
+  return true;
+}
+
+// Rejects server URLs that would make this server call itself or its private network.
+// A self-hosted ntfy on the LAN can be allowed by the server's admin with ALLOW_PRIVATE_NTFY=1.
+export async function assertPublicUrl(raw) {
+  if (process.env.ALLOW_PRIVATE_NTFY === '1') return;
+  let u;
+  try { u = new URL(raw); } catch { throw new Error('Server URL is not valid.'); }
+  if (!/^https?:$/.test(u.protocol)) throw new Error('Server URL must start with http:// or https://.');
+  const host = u.hostname.replace(/^\[|\]$/g, '');
+  if (/^localhost$|\.localhost$|\.local$|\.internal$/i.test(host)) throw new Error('Server URL must be a public address.');
+  const addrs = isIP(host) ? [host] : (await lookup(host, { all: true }).catch(() => [])).map((a) => a.address);
+  if (addrs.length === 0) throw new Error(`Could not find ${host}.`);
+  if (addrs.some(isPrivateAddress)) throw new Error('Server URL must be a public address.');
+}
+
+export function isValidTimeZone(tz) {
+  if (!tz) return false;
+  try { new Intl.DateTimeFormat('en-US', { timeZone: tz }); return true; } catch { return false; }
+}
+
+// The calendar date ("YYYY-MM-DD") and minutes-since-midnight in a timezone; the
+// server's own timezone when none (or an invalid one) is saved.
+export function zonedNow(date = new Date(), tz) {
+  const timeZone = isValidTimeZone(tz) ? tz : undefined;
+  const parts = Object.fromEntries(
+    new Intl.DateTimeFormat('en-CA', {
+      timeZone, hourCycle: 'h23', year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit',
+    }).formatToParts(date).map((p) => [p.type, p.value]),
+  );
+  return { date: `${parts.year}-${parts.month}-${parts.day}`, minutes: Number(parts.hour) * 60 + Number(parts.minute) };
+}
+
+// Is this user's reminder due right now (and not already sent today)?
+export function isDue(user, now = new Date()) {
+  const match = /^([01]\d|2[0-3]):([0-5]\d)$/.exec(user.reminderTime ?? '');
+  if (!match) return false;
+  const target = Number(match[1]) * 60 + Number(match[2]);
+  const local = zonedNow(now, user.reminderTz);
+  if (user.lastReminderDate === local.date) return false;
+  return local.minutes >= target && local.minutes < target + GRACE_MINUTES;
+}
+
+// POSTs one notification to the user's ntfy topic. Throws with a readable message on failure.
+export async function sendNtfy(user, { title, body, tags = 'open_book' }) {
+  const base = (user.ntfyUrl || 'https://ntfy.sh').replace(/\/+$/, '');
+  const url = `${base}/${encodeURIComponent(user.ntfyTopic)}`;
+  await assertPublicUrl(url);
+  const headers = { Title: title, Tags: tags };
+  if (process.env.APP_URL) headers.Click = process.env.APP_URL; // tapping the notification opens the app
+  let res;
+  try {
+    res = await fetch(url, { method: 'POST', headers, body, redirect: 'error', signal: AbortSignal.timeout(SEND_TIMEOUT_MS) });
+  } catch (err) {
+    throw new Error(err.name === 'TimeoutError' ? `Timed out reaching ${base}` : `Could not reach ${base} (${err.cause?.code ?? err.message})`, { cause: err });
+  }
+  if (!res.ok) throw new Error(`ntfy responded ${res.status}`);
+}
+
+// Has the user already finished a reading day on `date` ("YYYY-MM-DD", in their timezone)?
+export function readToday(progress, date) {
+  return Array.isArray(progress?.activity) && progress.activity.includes(date);
+}
+
+export function reminderBody(progress) {
+  const active = (Array.isArray(progress?.progress) ? progress.progress : []).filter((p) => !p.completedAt).length;
+  return active > 1 ? `Don't forget today's reading! You have ${active} plans in progress.` : "Don't forget today's reading!";
+}
+
+/** Sends a one-off notification so the user can confirm their topic/server work. */
+export function sendTestReminder(user) {
+  return sendNtfy(user, { title: 'Reading reminders are working', body: 'This is a test from Bible Study Project. Your daily reminder will arrive like this.', tags: 'white_check_mark' });
+}
+
+export async function checkReminders(now = new Date()) {
+  for (const user of getUsersWithRemindersEnabled().filter((u) => isDue(u, now))) {
+    try {
+      const progress = getReadingProgress(user.id);
+      const hasActivePlan = Array.isArray(progress?.progress) && progress.progress.some((p) => !p.completedAt);
+      if (!hasActivePlan) continue; // nothing to nudge them about
+      if (readToday(progress, zonedNow(now, user.reminderTz).date)) continue; // already read today: no nudge
+      if (now.getTime() - (_lastAttempt.get(user.id) ?? 0) < RETRY_AFTER_MS) continue;
+      _lastAttempt.set(user.id, now.getTime());
+      await sendNtfy(user, { title: 'Reading Plan Reminder', body: reminderBody(progress) });
+      _lastAttempt.delete(user.id);
+      setLastReminderDate(user.id, zonedNow(now, user.reminderTz).date);
+    } catch (err) {
+      console.error(`Reading reminder failed for user ${user.id}:`, err.message);
+    }
+  }
+}
+
+/** Checks once a minute whether any user's reminder time has arrived. */
+export function startReminderScheduler() {
+  setInterval(() => {
+    checkReminders().catch((err) => console.error('Reminder scheduler error:', err));
+  }, 60 * 1000);
+}

server/reminders.test.js

@@ -0,0 +1,101 @@
+// @vitest-environment node
+import http from 'node:http';
+import { test, expect, afterEach } from 'vitest';
+process.env.ALLOW_PRIVATE_NTFY = '1'; // the tests talk to a local server
+import { isDue, isValidTimeZone, reminderBody, sendNtfy, sendTestReminder, zonedNow } from './reminders.js';
+
+const at = (iso) => new Date(iso);
+
+test('zonedNow reads the date and time in the user\'s timezone, not the server\'s', () => {
+  // 2026-09-30T03:30Z is 23:30 the day before in New York, and 12:30 the same day in Tokyo
+  const d = at('2026-09-30T03:30:00Z');
+  expect(zonedNow(d, 'America/New_York')).toEqual({ date: '2026-09-29', minutes: 23 * 60 + 30 });
+  expect(zonedNow(d, 'Asia/Tokyo')).toEqual({ date: '2026-09-30', minutes: 12 * 60 + 30 });
+  expect(zonedNow(d, 'Not/AZone')).toEqual(zonedNow(d)); // bad timezone falls back to the server's
+});
+
+test('timezone validation', () => {
+  expect(isValidTimeZone('America/Chicago')).toBe(true);
+  expect(isValidTimeZone('Mars/Base')).toBe(false);
+  expect(isValidTimeZone('')).toBe(false);
+});
+
+test('a reminder is due at its time in the user\'s timezone', () => {
+  const user = { reminderTime: '07:00', reminderTz: 'America/Chicago', lastReminderDate: null };
+  expect(isDue(user, at('2026-09-29T11:59:00Z'))).toBe(false); // 06:59 in Chicago (CDT)
+  expect(isDue(user, at('2026-09-29T12:00:00Z'))).toBe(true); // 07:00
+});
+
+test('a late server still sends today\'s reminder, but only within the grace window', () => {
+  const user = { reminderTime: '07:00', reminderTz: 'America/Chicago', lastReminderDate: null };
+  expect(isDue(user, at('2026-09-29T12:40:00Z'))).toBe(true); // 07:40 — server was down at 07:00
+  expect(isDue(user, at('2026-09-29T15:30:00Z'))).toBe(false); // 10:30 — too late to be useful
+});
+
+test('it is not sent twice on the same local day', () => {
+  const user = { reminderTime: '07:00', reminderTz: 'America/Chicago', lastReminderDate: '2026-09-29' };
+  expect(isDue(user, at('2026-09-29T12:05:00Z'))).toBe(false);
+  expect(isDue({ ...user, lastReminderDate: '2026-09-28' }, at('2026-09-29T12:05:00Z'))).toBe(true);
+});
+
+test('a missing or malformed time is never due', () => {
+  expect(isDue({ reminderTime: null }, new Date())).toBe(false);
+  expect(isDue({ reminderTime: '7am' }, new Date())).toBe(false);
+});
+
+test('the message mentions how many plans are in progress', () => {
+  expect(reminderBody({ progress: [{ completedAt: null }] })).toBe("Don't forget today's reading!");
+  expect(reminderBody({ progress: [{ completedAt: null }, { completedAt: null }, { completedAt: 1 }] })).toContain('2 plans');
+});
+
+// --- delivery, against a local stand-in for an ntfy server ------------------------
+let server;
+afterEach(() => new Promise((resolve) => (server ? server.close(resolve) : resolve())));
+
+const startNtfy = (handler) => new Promise((resolve) => {
+  const seen = [];
+  server = http.createServer((req, res) => {
+    let body = '';
+    req.on('data', (c) => { body += c; });
+    req.on('end', () => { seen.push({ method: req.method, url: req.url, headers: req.headers, body }); handler(res); });
+  });
+  server.listen(0, '127.0.0.1', () => resolve({ url: `http://127.0.0.1:${server.address().port}`, seen }));
+});
+
+test('sendNtfy POSTs the message to <server>/<topic> with a title', async () => {
+  const ntfy = await startNtfy((res) => res.end('{}'));
+  await sendNtfy({ ntfyUrl: `${ntfy.url}/`, ntfyTopic: 'my-topic_1' }, { title: 'Hello', body: 'Body text' });
+  expect(ntfy.seen).toHaveLength(1);
+  expect(ntfy.seen[0]).toMatchObject({ method: 'POST', url: '/my-topic_1', body: 'Body text' });
+  expect(ntfy.seen[0].headers.title).toBe('Hello');
+});
+
+test('the test notification reaches the topic', async () => {
+  const ntfy = await startNtfy((res) => res.end('{}'));
+  await sendTestReminder({ ntfyUrl: ntfy.url, ntfyTopic: 'abc' });
+  expect(ntfy.seen[0].url).toBe('/abc');
+  expect(ntfy.seen[0].headers.title).toMatch(/working/i);
+});
+
+test('an ntfy error response becomes a readable failure', async () => {
+  const ntfy = await startNtfy((res) => { res.statusCode = 403; res.end('nope'); });
+  await expect(sendNtfy({ ntfyUrl: ntfy.url, ntfyTopic: 'abc' }, { title: 't', body: 'b' })).rejects.toThrow('ntfy responded 403');
+});
+
+test('an unreachable server says so instead of hanging', async () => {
+  await expect(sendNtfy({ ntfyUrl: 'http://127.0.0.1:9', ntfyTopic: 'abc' }, { title: 't', body: 'b' })).rejects.toThrow(/Could not reach/);
+});
+
+test('private and loopback addresses are rejected as reminder servers', async () => {
+  const { isPrivateAddress, assertPublicUrl, readToday } = await import('./reminders.js');
+  for (const a of ['127.0.0.1', '10.1.2.3', '192.168.0.5', '172.16.0.1', '169.254.169.254', '::1', 'fd00::1', '::ffff:10.0.0.1']) expect(isPrivateAddress(a)).toBe(true);
+  expect(isPrivateAddress('8.8.8.8')).toBe(false);
+  const prev = process.env.ALLOW_PRIVATE_NTFY;
+  delete process.env.ALLOW_PRIVATE_NTFY;
+  await expect(assertPublicUrl('http://localhost:3001')).rejects.toThrow();
+  await expect(assertPublicUrl('http://169.254.169.254/latest')).rejects.toThrow();
+  await expect(assertPublicUrl('ftp://example.com')).rejects.toThrow();
+  process.env.ALLOW_PRIVATE_NTFY = prev;
+  expect(readToday({ activity: ['2026-09-29'] }, '2026-09-29')).toBe(true);
+  expect(readToday({ activity: [] }, '2026-09-29')).toBe(false);
+});

src/App.flow.test.jsx

@@ -0,0 +1,443 @@
+// How the app moves and recovers: the Back button, the ⌘K palette, Undo, sync conflicts, backups.
+import { render, screen, waitFor, within, fireEvent } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { vi, beforeEach, afterEach, describe, test, expect } from 'vitest';
+import App from './App';
+import { resetLexiconCaches } from './utils/wordStudy.js';
+import { switchStorageUser } from './utils/bibleUtils.jsx';
+import { resetSyncBases } from './utils/syncBase.js';
+
+const chapterData = {
+  chapter: { content: [
+    { type: 'verse', number: 1, content: ['In the beginning God created.'] },
+    { type: 'verse', number: 2, content: ['The earth was without form.'] },
+  ] },
+};
+const json = (status, data) => Promise.resolve({ ok: status < 400, status, json: () => Promise.resolve(data) });
+
+// A fake server: signed in as `user`, a settable answer for saving studies, and a log of every call.
+function stubServer({ user = null, putStatus = 200 } = {}) {
+  const calls = [];
+  const state = { putStatus, outlineToken: null };
+  vi.stubGlobal('fetch', vi.fn((url, opts = {}) => {
+    const route = `${opts.method ?? 'GET'} ${url.split('?')[0]}`;
+    calls.push({ route, url, opts });
+    if (url.includes('bible.helloao.org')) return json(200, chapterData);
+    if (!url.startsWith('/api/')) return Promise.resolve({ ok: false });
+    if (route === 'GET /api/auth/me') return user ? json(200, user) : json(401, { error: 'Not signed in' });
+    if (route === 'GET /api/projects') return json(200, []);
+    if (route === 'GET /api/reader/ink') return json(200, {});
+    if (route.endsWith('/outline-share')) {
+      if (opts.method === 'POST') state.outlineToken = 'abc123';
+      if (opts.method === 'DELETE') state.outlineToken = null;
+      return json(200, opts.method === 'DELETE' ? { ok: true } : { shareToken: state.outlineToken ?? null });
+    }
+    if (route === 'GET /api/share-outline/abc123') {
+      return json(200, { title: 'Titus', translation: 'BSB', outlines: [
+        { scope: 'study', label: 'Whole study', tree: [{ id: 'a', text: 'Appoint elders', ref: '', kind: '', minutes: null, note: '', scripture: null, attachments: [], children: [] }] },
+        { scope: 'c1', label: 'Titus 1:1–4', tree: [{ id: 'b', text: 'Greeting', ref: '', kind: '', minutes: null, note: '', scripture: null, attachments: [], children: [] }] },
+      ] });
+    }
+    if (route === 'GET /api/share-outline/nope') return json(404, { error: 'This outline link is invalid or has been turned off.' });
+    if (route.startsWith('PUT /api/projects/')) {
+      return state.putStatus === 409
+        ? json(409, { error: 'This study was changed on another device.', code: 'conflict', serverEdited: 999 })
+        : json(200, { id: url.split('/').pop().split('?')[0], title: 'x', lastEdited: 12345, chapterSummary: '' });
+    }
+    return json(404, { error: 'not mocked' });
+  }));
+  return { calls, state };
+}
+
+beforeEach(() => {
+  localStorage.clear();
+  resetLexiconCaches();
+  resetSyncBases();
+  switchStorageUser(null);
+  vi.stubGlobal('fetch', vi.fn(() => Promise.resolve({ ok: false })));
+  vi.spyOn(URL, 'createObjectURL').mockReturnValue('blob:mock');
+  vi.spyOn(URL, 'revokeObjectURL').mockImplementation(() => {});
+});
+afterEach(() => { vi.unstubAllGlobals(); vi.restoreAllMocks(); });
+
+async function renderApp() {
+  render(<App />);
+  await waitFor(() => expect(screen.queryByText('Loading…')).not.toBeInTheDocument());
+}
+
+function seedProject({ id = 'p1', title = 'Titus Notes', observation = 'Grace abounds to all.' } = {}) {
+  const project = {
+    id, title, translation: 'BSB', lastEdited: Date.now(), selectedChunkId: null,
+    chapters: [{
+      book: 'Titus', bookAbbrev: 'TIT', chapter: '1', verses: [{ number: 1, text: 'Paul, a servant of God.' }],
+      chunks: [{ id: 'c1', startVerse: 1, endVerse: 1, observation, interpretation: '', application: '', crossReferences: [], greekWords: [], tags: [] }],
+    }],
+  };
+  const index = JSON.parse(localStorage.getItem('bible-study-index') || '[]');
+  index.push({ id, title, lastEdited: project.lastEdited, chapterSummary: 'Titus 1', tags: [] });
+  localStorage.setItem(`bible-study-project-${id}`, JSON.stringify(project));
+  localStorage.setItem('bible-study-index', JSON.stringify(index));
+}
+
+describe('Back button', () => {
+  test('moves back through the pages you visited instead of leaving the app', async () => {
+    const user = userEvent.setup();
+    await renderApp();
+    expect(await screen.findByRole('heading', { name: 'My Studies' })).toBeInTheDocument();
+    await user.click(screen.getByRole('button', { name: /reading plans/i }));
+    expect(await screen.findByRole('heading', { name: /reading plans/i })).toBeInTheDocument();
+    window.history.back();
+    expect(await screen.findByRole('heading', { name: 'My Studies' })).toBeInTheDocument();
+    window.history.forward();
+    expect(await screen.findByRole('heading', { name: /reading plans/i })).toBeInTheDocument();
+  });
+});
+
+const paletteBox = async () => within(await screen.findByRole('dialog', { name: /search and go to/i })).getByRole('combobox');
+
+describe('Search palette (⌘K)', () => {
+  test('a typed passage goes straight to the Bible reader', async () => {
+    const user = userEvent.setup();
+    await renderApp();
+    await user.keyboard('{Control>}k{/Control}');
+    await user.type(await paletteBox(), 'john 3:16');
+    expect(await screen.findByRole('option', { name: /John 3:16/ })).toBeInTheDocument();
+    await user.keyboard('{Enter}');
+    expect(await screen.findByRole('heading', { name: /John 3/ })).toBeInTheDocument();
+    expect(screen.queryByRole('dialog', { name: /search and go to/i })).not.toBeInTheDocument();
+  });
+
+  test('finds a note you wrote and opens that study', async () => {
+    seedProject({ observation: 'Grace abounds to all.' });
+    const user = userEvent.setup();
+    await renderApp();
+    await user.keyboard('{Control>}k{/Control}');
+    await user.type(await paletteBox(), 'abounds');
+    const hit = await screen.findByRole('option', { name: /Titus 1:1/ });
+    await user.click(hit);
+    expect(await screen.findByText(/Your notes/i)).toBeInTheDocument();
+  });
+
+  test('Escape closes it', async () => {
+    const user = userEvent.setup();
+    await renderApp();
+    await user.keyboard('{Control>}k{/Control}');
+    await paletteBox();
+    await user.keyboard('{Escape}');
+    expect(screen.queryByRole('dialog', { name: /search and go to/i })).not.toBeInTheDocument();
+  });
+
+  test('? lists the keyboard shortcuts', async () => {
+    const user = userEvent.setup();
+    await renderApp();
+    await user.keyboard('?');
+    expect(await screen.findByRole('dialog', { name: /keyboard shortcuts/i })).toBeInTheDocument();
+  });
+});
+
+describe('Undo', () => {
+  test('deleting a project, then Undo, keeps its notes', async () => {
+    seedProject();
+    const user = userEvent.setup();
+    await renderApp();
+    await user.click(screen.getByRole('button', { name: /^delete$/i }));
+    expect(await screen.findByRole('status')).toHaveTextContent(/deleted/i);
+    await user.click(screen.getByRole('button', { name: /undo/i }));
+    expect(await screen.findByText('Titus Notes')).toBeInTheDocument();
+    expect(JSON.parse(localStorage.getItem('bible-study-project-p1')).chapters[0].chunks[0].observation).toBe('Grace abounds to all.');
+  });
+});
+
+describe('Sync conflict', () => {
+  const user = { id: 'u1', email: 'reader@example.com', totpEnabled: false, podcastName: '', isAdmin: false };
+
+  async function startStudy(u) {
+    await renderApp();
+    await u.click((await screen.findAllByRole('button', { name: /new project/i }))[0]);
+    await u.click(await screen.findByRole('button', { name: /load chapter/i }));
+    await screen.findByText(/Scripture & Chunks/i);
+  }
+
+  test('a save the server refuses shows the choice instead of overwriting', async () => {
+    const server = stubServer({ user, putStatus: 409 });
+    const u = userEvent.setup();
+    await startStudy(u);
+    const banner = await screen.findByRole('alert', {}, { timeout: 4000 });
+    expect(banner).toHaveTextContent(/changed on another device/i);
+    expect(within(banner).getByRole('button', { name: /keep this version/i })).toBeInTheDocument();
+    expect(within(banner).getByRole('button', { name: /use the other version/i })).toBeInTheDocument();
+
+    // "Keep this version" sends the save again, this time as an overwrite
+    server.state.putStatus = 200;
+    await u.click(within(banner).getByRole('button', { name: /keep this version/i }));
+    await waitFor(() => expect(server.calls.some((c) => c.url.includes('?force=1'))).toBe(true));
+    await waitFor(() => expect(screen.queryByText(/changed on another device/i)).not.toBeInTheDocument());
+  }, 15000);
+
+  test('opening a study without editing it does not touch the server', async () => {
+    seedProject();
+    const server = stubServer({ user });
+    const u = userEvent.setup();
+    await renderApp();
+    // signed in: the namespaced storage starts empty, so seed under the user's keys by resuming nothing
+    expect(server.calls.filter((c) => c.route.startsWith('PUT')).length).toBe(0);
+    await u.click(await screen.findByRole('button', { name: /read bible/i }));
+    expect(server.calls.filter((c) => c.route.startsWith('PUT /api/projects')).length).toBe(0);
+  });
+});
+
+describe('Outline stage', () => {
+  async function openOutline() {
+    // local-only mode (the account server is unreachable), with chapter text available
+    vi.stubGlobal('fetch', vi.fn((url) => (url.includes('bible.helloao.org') ? json(200, chapterData) : Promise.resolve({ ok: false }))));
+    const user = userEvent.setup();
+    await renderApp();
+    await user.click((await screen.findAllByRole('button', { name: /new project/i }))[0]);
+    await user.click(await screen.findByRole('button', { name: /load chapter/i }));
+    await screen.findByText(/Scripture & Chunks/i);
+    // one chunk covering verses 1-2
+    const verses = within(screen.getByTestId('verse-list'));
+    fireEvent.click(verses.getByRole('button', { name: /In the beginning/ }));
+    fireEvent.click(verses.getByRole('button', { name: /without form/ }), { shiftKey: true });
+    await screen.findByText('1 created');
+    await user.click(screen.getByRole('button', { name: /^outline$/i }));
+    await screen.findByRole('heading', { name: 'Outline' });
+    return user;
+  }
+
+  test('starts empty, and "Start from my chunks" makes a main point for each chunk', async () => {
+    const user = await openOutline();
+    expect(screen.getByText(/no outline yet/i)).toBeInTheDocument();
+    await user.click(screen.getByRole('button', { name: /start from my chunks/i }));
+    const list = await screen.findByRole('list', { name: 'Outline' });
+    expect(within(list).getAllByRole('textbox')).toHaveLength(1);
+    expect(within(list).getByText(/Open chunk in Study/i)).toBeInTheDocument();
+  });
+
+  test('Enter adds a point, Tab makes it a sub-point, and they are numbered I. and A.', async () => {
+    const user = await openOutline();
+    await user.click(screen.getByRole('button', { name: /start blank/i }));
+    const first = await screen.findByRole('textbox', { name: 'Point I.' });
+    await user.type(first, 'Creation{Enter}');
+    const second = await screen.findByRole('textbox', { name: 'Point II.' });
+    await user.type(second, 'Light{Tab}');
+    expect(await screen.findByRole('textbox', { name: 'Point A.' })).toHaveValue('Light');
+    expect(screen.getByRole('textbox', { name: 'Point I.' })).toHaveValue('Creation');
+  });
+
+  test('deleting a point can be undone', async () => {
+    const user = await openOutline();
+    await user.click(screen.getByRole('button', { name: /start blank/i }));
+    await user.type(await screen.findByRole('textbox', { name: 'Point I.' }), 'Keep me');
+    await user.click(screen.getByRole('button', { name: /delete i\./i }));
+    expect(screen.queryByRole('textbox', { name: 'Point I.' })).not.toBeInTheDocument();
+    await user.click(await screen.findByRole('button', { name: /undo/i }));
+    expect(await screen.findByRole('textbox', { name: 'Point I.' })).toHaveValue('Keep me');
+  });
+});
+
+describe('Outline: per chunk, details, print and share', () => {
+  async function openOutline() {
+    vi.stubGlobal('fetch', vi.fn((url) => (url.includes('bible.helloao.org') ? json(200, chapterData) : Promise.resolve({ ok: false }))));
+    const user = userEvent.setup();
+    await renderApp();
+    await user.click((await screen.findAllByRole('button', { name: /new project/i }))[0]);
+    await user.click(await screen.findByRole('button', { name: /load chapter/i }));
+    await screen.findByText(/Scripture & Chunks/i);
+    const verses = within(screen.getByTestId('verse-list'));
+    fireEvent.click(verses.getByRole('button', { name: /In the beginning/ }));
+    fireEvent.click(verses.getByRole('button', { name: /without form/ }), { shiftKey: true });
+    await screen.findByText('1 created');
+    await user.click(screen.getByRole('button', { name: /^outline$/i }));
+    await screen.findByRole('heading', { name: 'Outline' });
+    return user;
+  }
+
+  test('each chunk has its own outline, separate from the whole study\'s', async () => {
+    const user = await openOutline();
+    const picker = screen.getByRole('combobox', { name: 'Outline for' });
+    await user.selectOptions(picker, picker.querySelectorAll('option')[1]); // the chunk
+    expect(await screen.findByText(/no outline yet for/i)).toBeInTheDocument();
+    await user.click(screen.getByRole('button', { name: /start from the verses/i }));
+    const list = await screen.findByRole('list', { name: 'Outline' });
+    expect(within(list).getAllByRole('textbox')).toHaveLength(2); // one point per verse
+    expect(within(list).getByText(/In the beginning God created/)).toBeInTheDocument(); // with its words
+    await user.selectOptions(screen.getByRole('combobox', { name: 'Outline for' }), 'study');
+    expect(await screen.findByText(/^No outline yet$/)).toBeInTheDocument(); // the whole study is untouched
+    expect(screen.getByRole('option', { name: /· 2/ })).toBeInTheDocument(); // the chunk shows its count
+  });
+
+  test('a point can be given a type and minutes, and the total shows', async () => {
+    const user = await openOutline();
+    await user.click(screen.getByRole('button', { name: /start blank/i }));
+    await user.type(await screen.findByRole('textbox', { name: 'Point I.' }), 'The story');
+    await user.click(screen.getByRole('button', { name: /details for i\./i }));
+    await user.selectOptions(screen.getByLabelText('Type'), 'illustration');
+    await user.type(screen.getByLabelText('Minutes'), '5');
+    expect(await screen.findByText('About 5 minutes')).toBeInTheDocument();
+    await user.type(screen.getByRole('textbox', { name: 'Notes for I.' }), 'Tell it slowly');
+    await user.click(screen.getByRole('button', { name: /details for i\./i })); // close: the note shows as a line
+    expect(await screen.findByText('Tell it slowly')).toBeInTheDocument();
+    expect(screen.getByText('Illustration')).toBeInTheDocument();
+  });
+
+  test('"Add verse text" puts the passage\'s words into the point', async () => {
+    const user = await openOutline();
+    await user.click(screen.getByRole('button', { name: /start blank/i }));
+    await user.click(await screen.findByRole('button', { name: /details for i\./i }));
+    await user.type(screen.getByLabelText('Passage'), 'Titus 1:1');
+    await user.click(screen.getByRole('button', { name: /add verse text/i }));
+    expect(await screen.findByText(/In the beginning God created/)).toBeInTheDocument();
+    await user.clear(screen.getByLabelText('Passage'));
+    await user.type(screen.getByLabelText('Passage'), 'nonsense');
+    await user.click(screen.getByRole('button', { name: /replace verse text/i }));
+    expect(await screen.findByRole('alert')).toHaveTextContent(/type a passage/i);
+  });
+
+  test('Share opens a sheet; with no account it offers the text, which is copied', async () => {
+    const user = await openOutline();
+    await user.click(screen.getByRole('button', { name: /start from my chunks/i }));
+    await screen.findByRole('list', { name: 'Outline' });
+    await user.click(screen.getByRole('button', { name: /^share$/i }));
+    const sheet = await screen.findByRole('dialog', { name: /share this outline/i });
+    expect(await within(sheet).findByText(/links need your account/i)).toBeInTheDocument();
+    await user.click(within(sheet).getByRole('button', { name: /share as text/i }));
+    expect(await screen.findByText(/outline copied/i)).toBeInTheDocument();
+  });
+
+  test('Print opens a page of just the outline', async () => {
+    const user = await openOutline();
+    await user.click(screen.getByRole('button', { name: /start from my chunks/i }));
+    await screen.findByRole('list', { name: 'Outline' });
+    const doc = { write: vi.fn(), close: vi.fn() };
+    vi.spyOn(window, 'open').mockReturnValue({ document: doc, focus: vi.fn(), print: vi.fn() });
+    await user.click(screen.getByRole('button', { name: /print \/ pdf/i }));
+    expect(doc.write.mock.calls[0][0]).toContain('class="outline"');
+  });
+});
+
+describe('Read-only outline link', () => {
+  const user = { id: 'u1', email: 'reader@example.com', totpEnabled: false, podcastName: '', isAdmin: false };
+
+  test('create the link, see it, and turn it off', async () => {
+    const server = stubServer({ user });
+    const u = userEvent.setup();
+    await renderApp();
+    await u.click((await screen.findAllByRole('button', { name: /new project/i }))[0]);
+    await u.click(await screen.findByRole('button', { name: /load chapter/i }));
+    await screen.findByText(/Scripture & Chunks/i);
+    const verses = within(screen.getByTestId('verse-list'));
+    fireEvent.click(verses.getByRole('button', { name: /In the beginning/ }));
+    fireEvent.click(verses.getByRole('button', { name: /without form/ }), { shiftKey: true });
+    await screen.findByText('1 created');
+    await u.click(screen.getByRole('button', { name: /^outline$/i }));
+    await u.click(await screen.findByRole('button', { name: /start from my chunks/i }));
+    await u.click(await screen.findByRole('button', { name: /^share$/i }));
+    const sheet = await screen.findByRole('dialog', { name: /share this outline/i });
+    await u.click(await within(sheet).findByRole('button', { name: /create read-only link/i }));
+    const box = await within(sheet).findByLabelText('Outline link');
+    expect(box.value).toMatch(/\?outline=abc123$/);
+    expect(server.calls.some((c) => c.route === 'POST /api/projects/' + c.url.split('/')[3] + '/outline-share')).toBe(true);
+    await u.click(within(sheet).getByRole('button', { name: /turn off link/i }));
+    expect(await within(sheet).findByRole('button', { name: /create read-only link/i })).toBeInTheDocument();
+  }, 15000);
+});
+
+describe('Opening a read-only outline link', () => {
+  afterEach(() => window.history.replaceState({}, '', '/'));
+
+  test('shows the outline with no sign-in and a way to switch between outlines', async () => {
+    stubServer({ user: null });
+    window.history.replaceState({}, '', '/?outline=abc123');
+    render(<App />);
+    expect(await screen.findByRole('heading', { name: 'Titus' })).toBeInTheDocument();
+    expect(screen.getByText('Appoint elders')).toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: /sign in/i })).not.toBeInTheDocument();
+    expect(screen.queryByRole('textbox')).not.toBeInTheDocument(); // nothing to edit
+    await userEvent.setup().click(screen.getByRole('button', { name: 'Titus 1:1–4' }));
+    expect(await screen.findByRole('heading', { name: 'Titus — Titus 1:1–4' })).toBeInTheDocument();
+    expect(screen.getByText('Greeting')).toBeInTheDocument();
+    expect(screen.queryByText('Appoint elders')).not.toBeInTheDocument();
+  });
+
+  test('a turned-off or wrong link says so', async () => {
+    stubServer({ user: null });
+    window.history.replaceState({}, '', '/?outline=nope');
+    render(<App />);
+    expect(await screen.findByText(/invalid or has been turned off/i)).toBeInTheDocument();
+  });
+});
+
+describe('Study cards on Home', () => {
+  test('a long run of chapters and many tags stay short', async () => {
+    const chapters = Array.from({ length: 24 }, (_, i) => `Luke ${i + 1}`).join(', ');
+    const tags = ['A', 'B', 'C', 'D', 'E', 'F'];
+    localStorage.setItem('bible-study-index', JSON.stringify([{ id: 'p', title: 'Luke', lastEdited: Date.now(), chapterSummary: chapters, tags }]));
+    await renderApp();
+    expect(await screen.findByText('Luke 1\u201324')).toBeInTheDocument();
+    expect(screen.getByText('+3 more')).toBeInTheDocument();
+    expect(screen.queryByText('F', { selector: 'span' })).not.toBeInTheDocument(); // only in the Tag filter
+  });
+});
+
+describe('Window title', () => {
+  test('names the page you are on, including the chapter in the reader', async () => {
+    const user = userEvent.setup();
+    await renderApp();
+    expect(document.title).toBe('My Studies · Bible Study');
+    await user.click(screen.getByRole('button', { name: /reading plans/i }));
+    await waitFor(() => expect(document.title).toBe('Reading Plans · Bible Study'));
+    await user.click(screen.getByRole('button', { name: /read bible/i }));
+    await waitFor(() => expect(document.title).toMatch(/^[A-Za-z0-9 ]+ \d+ · Bible Study$/));
+  });
+});
+
+describe('Login page', () => {
+  async function openLogin() {
+    stubServer({ user: null });
+    render(<App />);
+    return screen.findByRole('button', { name: /^sign in$/i });
+  }
+
+  test('tells you what the app can do, in groups', async () => {
+    await openLogin();
+    expect(screen.getByRole('heading', { level: 1, name: /read it\. study it\./i })).toBeInTheDocument();
+    for (const group of ['Read', 'Study', 'Teach', 'Everywhere']) expect(screen.getByRole('region', { name: group })).toBeInTheDocument();
+    expect(screen.getByText('A real outline')).toBeInTheDocument();
+    expect(screen.getByText('Compare them')).toBeInTheDocument();
+  });
+
+  test('switches between signing in and creating an account', async () => {
+    const user = userEvent.setup();
+    await openLogin();
+    expect(screen.getByRole('heading', { name: 'Sign in' })).toBeInTheDocument();
+    await user.click(screen.getByRole('button', { name: /need an account/i }));
+    expect(screen.getByRole('heading', { name: 'Create an account' })).toBeInTheDocument();
+    expect(screen.getByText(/at least 8 characters/i)).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /^create account$/i })).toBeInTheDocument();
+    await user.click(screen.getByRole('button', { name: /already have an account/i }));
+    expect(screen.getByRole('heading', { name: 'Sign in' })).toBeInTheDocument();
+  });
+
+  test('a theme can be picked before signing in', async () => {
+    const user = userEvent.setup();
+    await openLogin();
+    await user.click(screen.getByRole('button', { name: 'Dark' }));
+    expect(screen.getByRole('button', { name: 'Dark' })).toHaveAttribute('aria-pressed', 'true');
+    expect(localStorage.getItem('reader-theme')).toBe('dark');
+  });
+
+  test('a wrong password shows the error', async () => {
+    const user = userEvent.setup();
+    vi.stubGlobal('fetch', vi.fn((url, opts = {}) => {
+      if (url === '/api/auth/me') return json(401, {});
+      if (url === '/api/auth/login') return json(401, { error: 'Incorrect email or password.' });
+      return Promise.resolve({ ok: false });
+    }));
+    render(<App />);
+    await user.type(await screen.findByLabelText(/email/i), 'a@b.co');
+    await user.type(screen.getByLabelText(/^password/i), 'wrong-password');
+    await user.click(screen.getByRole('button', { name: /^sign in$/i }));
+    expect(await screen.findByRole('alert')).toHaveTextContent(/incorrect email or password/i);
+  });
+});

src/App.jsx

@@ -1,15 +1,30 @@
 import { lazy, Suspense, useEffect, useRef, useState } from 'react';
+import { getPlanSchedule, nearestReadingDay } from './utils/readingPlans.js';
+import { applySystemChrome } from './utils/systemChrome.js';
 import { AppContext, useApp } from './context/AppContext.js';
+import { ToastProvider, useToast } from './components/Toasts.jsx';
+import CommandPalette from './components/CommandPalette.jsx';
+import ShortcutsHelp from './components/ShortcutsHelp.jsx';
+import SharedOutlineView from './components/SharedOutlineView.jsx';
+import Tooltips from './components/Tooltips.jsx';
 import { useAudio } from './hooks/useAudio.js';
 import { useAuth } from './hooks/useAuth.js';
 import { useBibleReader } from './hooks/useBibleReader.js';
 import { useProjectLibrary } from './hooks/useProjectLibrary.js';
-import { useReadingPlan } from './hooks/useReadingPlan.js';
+import { useHistoryNav } from './hooks/useHistoryNav.js';
+import { useReadingPlans } from './hooks/useReadingPlans.js';
 import { useSharedView } from './hooks/useSharedView.js';
 import HomePage from './pages/HomePage.jsx';
-import { saveRemoteProject } from './syncService.js';
+import { themeVars } from './components/reader/readerThemes.js';
-import { buildExportHtml, loadProjectIndex, switchStorageUser } from './utils/bibleUtils.jsx';
+import { loadRemoteProject, saveRemoteProject } from './syncService.js';
-import { migrateOldStorageKeys, saveProjectToStorage } from './utils/projectStorage.js';
+import { getSyncBase, setSyncBase } from './utils/syncBase.js';
+import {
+  bookOptions, buildExportHtml, loadProjectIndex, makeId, parseBibleChapter, switchStorageUser,
+} from './utils/bibleUtils.jsx';
+import { loadProjectById, migrateOldStorageKeys, saveProjectToStorage } from './utils/projectStorage.js';
+import { knownOnServer, unsyncedStudies } from './utils/syncQueue.js';
+import { fetchStudyChapter } from './utils/studyText.js';
+import { mergeStudies } from './utils/mergeStudies.js';
 
 // Less-common pages are split into their own chunks so the first load only
 // downloads what's needed to show the home screen.
@@ -20,23 +35,54 @@ const ReaderPage = lazy(() => import('./pages/ReaderPage.jsx'));
 const SettingsPage = lazy(() => import('./pages/SettingsPage.jsx'));
 const SetupPage = lazy(() => import('./pages/SetupPage.jsx'));
 const StudyPage = lazy(() => import('./pages/StudyPage.jsx'));
+const OutlinePage = lazy(() => import('./pages/OutlinePage.jsx'));
+const ScriptPage = lazy(() => import('./pages/ScriptPage.jsx'));
+const ExportPage = lazy(() => import('./pages/ExportPage.jsx'));
 const PronunciationPage = lazy(() => import('./pages/PronunciationPage.jsx'));
+const ReadingPlansPage = lazy(() => import('./pages/ReadingPlansPage.jsx'));
 
 // ---------------------------------------------------------------------------
 // App component
 // ---------------------------------------------------------------------------
 
-const App = () => {
+// The page each "Home page" choice in Settings opens.
+const START_PAGES = { studies: 'home', reader: 'reader', plans: 'reading-plans' };
+
+// The user's chosen home page, read straight from this device's saved preference so the app
+// starts on it from the very first render (no flash of another page first).
+function savedStartPage() {
+  try { return START_PAGES[localStorage.getItem('start-page')] ?? 'home'; } catch { return 'home'; }
+}
+
+const AppInner = () => {
+  const { toast, setTheme: setToastTheme } = useToast();
   const [project, setProject] = useState(null);
-  // 'home' | 'setup' | 'study' | 'reader' | 'import' | 'pronunciation' | 'settings' | 'admin'
+  // 'home' | 'setup' | 'study' | 'outline' | 'script' | 'export' | 'reader' | 'import' | 'pronunciation' | 'settings' | 'admin' | 'reading-plans'
-  const [currentPage, setCurrentPage] = useState('home');
+  const [currentPage, setCurrentPage] = useState(savedStartPage);
+  const currentPageRef = useRef(currentPage);
+  currentPageRef.current = currentPage;
   const [projectIndex, setProjectIndex] = useState([]);
   const [saveStatus, setSaveStatus] = useState('');
   const saveTimerRef = useRef(null);
   const [syncStatus, setSyncStatus] = useState('');   // '' | 'syncing' | 'synced' | 'error'
-  const reader = useBibleReader(currentPage);
+  const [studyBuildBusy, setStudyBuildBusy] = useState(false);
-  const audio = useAudio(reader.readerBookAbbrev, reader.readerChapter);
+  const readingPlans = useReadingPlans();
-  const readingPlan = useReadingPlan();
+  // The plan day currently open in the Reader ({ progressId, dayIndex }) — set when
+  // you read from a plan, cleared when you leave the Reader. While set, the Reader
+  // uses that plan's own translation.
+  const [readerPlan, setReaderPlan] = useState(null);
+  const readerPlanProgress = readerPlan ? readingPlans.planProgress.find((p) => p.id === readerPlan.progressId) ?? null : null;
+  const reader = useBibleReader(currentPage, readerPlanProgress?.translation ?? null);
+  const audio = useAudio(reader.readerBookAbbrev, reader.readerChapter, reader.readerTranslation);
+  useEffect(() => { if (currentPage !== 'reader') setReaderPlan(null); }, [currentPage]);
+  // A new page starts at the top. Without this the scroll position of the previous page carries over, and on
+  // iPad content scrolled under the top edge makes the system blur the app bar.
+  useEffect(() => {
+    const scroller = document.scrollingElement ?? document.documentElement;
+    if (scroller) scroller.scrollTop = 0;
+  }, [currentPage]);
+  // Keep the browser/OS chrome (status bar area, overscroll, scrollbars) in the chosen theme
+  useEffect(() => { applySystemChrome(reader.readerTheme); setToastTheme(reader.readerTheme); }, [reader.readerTheme, setToastTheme]);
   const { authUser, setAuthUser, authServerDown, signIn, logout } = useAuth({
     onSignIn: (user) => {
       setProjectIndex(switchStorageUser(user.id));
@@ -45,10 +91,22 @@ const App = () => {
         .then((r) => r.ok ? r.json() : null)
         .then((serverInk) => { if (serverInk) reader.mergeServerInk(serverInk); })
         .catch(() => {});
+      // Same for reading plan progress — pullServerReadingProgress surfaces
+      // a failed GET via the same error banner a failed push uses, instead
+      // of silently leaving stale/empty local state in place.
+      readingPlans.pullServerReadingProgress();
+      // Bookmarks and highlights: reconcile this device's copy with the account's.
+      reader.pullServerMarks();
+      // Theme, default translation, layout, commentary and reading position.
+      reader.pullServerPrefs();
     },
     onSignOut: () => {
+      reader.stopMarksSync();
+      reader.stopPrefsSync();
+      reader.stopInkSync();
+      readingPlans.stopReadingPlansSync();
       setProjectIndex(switchStorageUser(null));
-      goHome();
+      goStudies();
     },
   });
   const library = useProjectLibrary({
@@ -59,6 +117,49 @@ const App = () => {
     setCurrentPage,
   });
 
+  // ⌘K search/go-to, the "?" shortcut list, and requests other pages make of the Reader.
+  const [paletteOpen, setPaletteOpen] = useState(false);
+  const [helpOpen, setHelpOpen] = useState(false);
+  const [readerRequest, setReaderRequest] = useState(null); // { search: 'text' } from the palette
+  const [settingsFocus, setSettingsFocus] = useState(null); // section Settings should scroll to
+  useEffect(() => {
+    const onKey = (e) => {
+      if ((e.metaKey || e.ctrlKey) && !e.altKey && e.key.toLowerCase() === 'k') { e.preventDefault(); setHelpOpen(false); setPaletteOpen((o) => !o); return; }
+      if (e.metaKey || e.ctrlKey || e.altKey) return;
+      const t = e.target;
+      if (t?.tagName === 'INPUT' || t?.tagName === 'TEXTAREA' || t?.tagName === 'SELECT' || t?.isContentEditable) return;
+      if (e.key === '?') { e.preventDefault(); setPaletteOpen(false); setHelpOpen((o) => !o); }
+      else if (e.key === '/' && currentPageRef.current !== 'reader') { e.preventDefault(); setPaletteOpen(true); }
+    };
+    window.addEventListener('keydown', onKey);
+    return () => window.removeEventListener('keydown', onKey);
+  }, []);
+
+  // The browser tab and history show where you are ("Romans 8 · Bible Study", "Luke — Outline · Bible Study")
+  useEffect(() => {
+    const names = {
+      home: 'My Studies', setup: 'Chunks', study: 'Study', outline: 'Outline', script: 'Script', export: 'Export',
+      import: 'Import', pronunciation: 'Pronunciation Guide', settings: 'Settings', admin: 'Admin', 'reading-plans': 'Reading Plans',
+    };
+    let page = names[currentPage] ?? '';
+    if (currentPage === 'reader') {
+      const book = bookOptions.find((b) => b.abbrev === reader.readerBookAbbrev)?.name ?? '';
+      page = `${book} ${reader.readerChapter}`.trim();
+    } else if (project?.title && ['setup', 'study', 'outline', 'script', 'export', 'pronunciation'].includes(currentPage)) {
+      page = `${project.title} — ${page}`;
+    }
+    document.title = page ? `${page} · Bible Study` : 'Bible Study';
+  }, [currentPage, project?.title, reader.readerBookAbbrev, reader.readerChapter]);
+
+  // Back/Forward move between pages instead of leaving the app. (Not for ?share= links: that page is separate.)
+  useHistoryNav({
+    page: currentPage,
+    setPage: setCurrentPage,
+    hasProject: !!project,
+    enabled: !new URLSearchParams(window.location.search).has('share') && !new URLSearchParams(window.location.search).has('outline'),
+    onArrive: (page) => { if (page === 'home') setProjectIndex(loadProjectIndex()); },
+  });
+
   // Startup: migrate old keys and load index
   useEffect(() => {
     migrateOldStorageKeys();
@@ -67,31 +168,139 @@ const App = () => {
 
   const allChunks = project ? project.chapters.flatMap((ch) => ch.chunks) : [];
 
-  // Autosave: 1s after the last edit, save locally, then sync to the server.
+  // Autosave: 1s after the last edit, save locally, then sync to the server. A save still waiting out
-  useEffect(() => {
+  // that second is written straight away when you leave the study or the tab, so nothing typed is lost.
-    if (!project) return;
+  // Opening a study doesn't count as editing it — saving then would stamp the server's copy as "newer"
-    if (saveTimerRef.current) window.clearTimeout(saveTimerRef.current);
+  // and make your other devices think it changed.
-    saveTimerRef.current = window.setTimeout(async () => {
+  const savedSignatureRef = useRef({ id: null, signature: '' });
-      // Stamp lastEdited once so localStorage and server receive the same value
+  const pendingSaveRef = useRef(null); // { project, signature } waiting for the debounce
-      const toSave = { ...project, lastEdited: Date.now() };
+  const [syncConflict, setSyncConflict] = useState(null); // { id, serverEdited } when the server has a newer copy
+  const conflictRef = useRef(null);
+  conflictRef.current = syncConflict;
+  const signatureOf = (p) => JSON.stringify({ ...p, lastEdited: 0 });
 
-      // 1. Save locally
+  // Sends a study to the server, checked against the copy this device last saw.
+  const pushProject = async (toSave, { force = false } = {}) => {
+    setSyncStatus('syncing');
+    const result = await saveRemoteProject(toSave, { baseEdited: getSyncBase(toSave.id), force });
+    if (result.ok) {
+      // The server's clock decides the version; keep this device's copy on the same number
+      const serverEdited = result.data?.lastEdited ?? toSave.lastEdited;
+      setSyncBase(toSave.id, serverEdited);
+      unsyncedStudies.remove(toSave.id);
+      knownOnServer.add(toSave.id);
+      const stored = loadProjectById(toSave.id);
+      if (stored && stored.lastEdited === toSave.lastEdited && serverEdited !== toSave.lastEdited) {
+        try { saveProjectToStorage({ ...stored, lastEdited: serverEdited }); setProjectIndex(loadProjectIndex()); } catch { /* the copy is already saved */ }
+      }
+      setSyncConflict((c) => (c?.id === toSave.id ? null : c));
+      setSyncStatus('synced');
+      window.setTimeout(() => setSyncStatus(''), 2500);
+    } else if (result.status === 409) {
+      setSyncConflict({ id: toSave.id, serverEdited: result.data?.serverEdited ?? null });
+      setSyncStatus('conflict');
+    } else {
+      setSyncStatus('error'); // kept visible until the next successful sync
+    }
+    return result;
+  };
+
+  const commitSave = async (toEdit) => {
+    // Stamp lastEdited once so localStorage and server receive the same value
+    const toSave = { ...toEdit, lastEdited: Date.now() };
+
+    // 1. Save locally (can fail when the device is out of storage)
+    try {
       saveProjectToStorage(toSave);
+    } catch (err) {
+      console.error('Local save failed:', err);
+      setSaveStatus('');
+      toast("Couldn't save on this device — storage is full. Free some space or export a backup.", { tone: 'error' });
+    }
+    unsyncedStudies.add(toSave.id);
     setProjectIndex(loadProjectIndex());
     setSaveStatus('Saved');
     window.setTimeout(() => setSaveStatus(''), 1400);
 
-      // 2. Sync to server with the same timestamped object
+    // 2. Sync to server with the same timestamped object (not while a conflict is waiting on a choice)
-      setSyncStatus('syncing');
+    if (conflictRef.current?.id === toSave.id) return;
-      const result = await saveRemoteProject(toSave);
+    await pushProject(toSave);
-      setSyncStatus(result.ok ? 'synced' : 'error');
+  };
-      // On success clear after 2.5s; on error keep visible until next successful sync
+
-      if (result.ok) window.setTimeout(() => setSyncStatus(''), 2500);
+  const flushPendingSave = () => {
-    }, 1000);
+    const pending = pendingSaveRef.current;
-    return () => {
+    if (!pending) return;
-      if (saveTimerRef.current) window.clearTimeout(saveTimerRef.current);
+    window.clearTimeout(saveTimerRef.current);
+    pendingSaveRef.current = null;
+    savedSignatureRef.current = { id: pending.project.id, signature: pending.signature };
+    commitSave(pending.project);
+  };
+  const flushRef = useRef(flushPendingSave);
+  flushRef.current = flushPendingSave;
+
+  useEffect(() => {
+    const flush = () => { if (document.visibilityState !== 'visible') flushRef.current(); };
+    window.addEventListener('pagehide', flush);
+    document.addEventListener('visibilitychange', flush);
+    return () => { window.removeEventListener('pagehide', flush); document.removeEventListener('visibilitychange', flush); };
+  }, []);
+
+  useEffect(() => {
+    if (!project) { flushPendingSave(); return undefined; }
+    if (pendingSaveRef.current && pendingSaveRef.current.project.id !== project.id) flushPendingSave();
+    const signature = signatureOf(project);
+    const last = savedSignatureRef.current;
+    if (last.id !== project.id) {
+      savedSignatureRef.current = { id: project.id, signature };
+      if (loadProjectById(project.id)) return undefined; // just opened an existing study: nothing to save yet
+    } else if (last.signature === signature) {
+      return undefined;
+    }
+    pendingSaveRef.current = { project, signature };
+    window.clearTimeout(saveTimerRef.current);
+    saveTimerRef.current = window.setTimeout(() => flushRef.current(), 1000);
+    return undefined;
+  }, [project]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  // The two ways out of a conflict: keep this device's version, or take the server's.
+  const keepMyVersion = async () => {
+    if (!project) return;
+    await pushProject({ ...project, lastEdited: Date.now() }, { force: true });
+  };
+  const useServerVersion = async () => {
+    if (!syncConflict) return;
+    const result = await loadRemoteProject(syncConflict.id);
+    if (!result.ok) { toast("Couldn't load the other version. Check your connection and try again.", { tone: 'error' }); return; }
+    saveProjectToStorage(result.data);
+    setSyncBase(syncConflict.id, result.data.lastEdited);
+    unsyncedStudies.remove(syncConflict.id);
+    const loaded = loadProjectById(syncConflict.id);
+    savedSignatureRef.current = { id: syncConflict.id, signature: signatureOf(loaded) };
+    setProject(loaded);
+    setProjectIndex(loadProjectIndex());
+    setSyncConflict(null);
+    setSyncStatus('');
+    toast('Switched to the version from your other device');
+  };
+
+  // Third way out of a conflict: combine both copies chunk by chunk, then save the result as the new version.
+  const mergeBothVersions = async () => {
+    if (!project || !syncConflict) return;
+    const result = await loadRemoteProject(syncConflict.id);
+    if (!result.ok) { toast("Couldn't load the other version. Check your connection and try again.", { tone: 'error' }); return; }
+    const { project: merged, stats } = mergeStudies(project, result.data);
+    setSyncBase(syncConflict.id, result.data.lastEdited);
+    savedSignatureRef.current = { id: merged.id, signature: signatureOf(merged) };
+    setProject(merged);
+    const toSave = { ...merged, lastEdited: Date.now() };
+    try { saveProjectToStorage(toSave); } catch { /* storage full: the server copy below still holds it */ }
+    unsyncedStudies.add(toSave.id);
+    setProjectIndex(loadProjectIndex());
+    const saved = await pushProject(toSave);
+    if (saved.ok) {
+      toast(`Combined both versions: ${stats.added} chunk${stats.added === 1 ? '' : 's'} added from the other device, ${stats.merged} merged`);
+    }
   };
-  }, [project]);
 
   const updateProject = (updater) => {
     setProject((current) => (current ? updater(current) : current));
@@ -102,7 +311,7 @@ const App = () => {
       ...current,
       chapters: current.chapters.map((ch) => ({
         ...ch,
-        chunks: ch.chunks.map((c) => (c.id === chunkId ? { ...c, ...patch } : c)),
+        chunks: ch.chunks.map((c) => (c.id === chunkId ? { ...c, ...patch, editedAt: Date.now() } : c)),
       })),
     }));
   };
@@ -110,6 +319,89 @@ const App = () => {
   // Navigation
   const openBibleReader = () => setCurrentPage('reader');
 
+  const openReadingPlans = () => setCurrentPage('reading-plans');
+
+  // Jumps straight into a specific chapter and opens the reader (no plan context).
+  const readReadingPlanDay = (bookAbbrev, chapter) => {
+    reader.jumpToReaderVerse(bookAbbrev, chapter, 1);
+    setCurrentPage('reader');
+  };
+
+  // Opens the Reader inside a plan: on `ref` (or the day's first unread chapter),
+  // in the plan's own translation, with the plan strip and end-of-day card active.
+  const openPlanReading = (progressId, dayIndex, ref) => {
+    const progress = readingPlans.planProgress.find((p) => p.id === progressId);
+    if (!progress) return;
+    const schedule = getPlanSchedule(progress.planId);
+    // A day with nothing scheduled would leave the Reader where it was — use the nearest real day.
+    const day = schedule[dayIndex]?.length ? dayIndex : Math.max(0, nearestReadingDay(schedule, dayIndex));
+    const refs = schedule[day] ?? [];
+    const done = progress.completedDays.includes(day);
+    const read = new Set(done ? [] : progress.chaptersRead?.[day] ?? []);
+    const target = ref ?? refs.find((r) => !read.has(`${r.book}.${r.chapter}`)) ?? refs[0];
+    setReaderPlan({ progressId, dayIndex: day });
+    if (target) {
+      reader.setReaderBookAbbrev(target.book);
+      reader.setReaderChapter(target.chapter);
+      reader.setReaderSelectedVerse(null);
+      reader.setReaderCrossRefs(null);
+    }
+    setCurrentPage('reader');
+  };
+
+  // Changing the translation while a plan is open changes that plan's translation.
+  const setReaderTranslation = (id) => {
+    if (readerPlan) readingPlans.setPlanTranslation(readerPlan.progressId, id);
+    else reader.setReaderTranslation(id);
+  };
+
+  // Starts book-mode audio playback at a specific plan day's chapter, then
+  // shows the Home audio player. Uses handlePlayBookAudioFrom (not the reader
+  // player) so this works even without opening the reader first.
+  const listenReadingPlanDay = (bookAbbrev, chapter) => {
+    audio.handlePlayBookAudioFrom(bookAbbrev, chapter);
+    goStudies();
+  };
+
+  // Builds a new chunk-builder project seeded with a reading-plan day's
+  // passage — one whole-chapter chunk per chapter in the day — and jumps
+  // straight into the Study page, skipping the manual chapter/chunk setup.
+  const studyReadingPlanDay = async (dayRefs, title) => {
+    setStudyBuildBusy(true);
+    try {
+      const chapters = await Promise.all(dayRefs.map(async ({ book, chapter }) => {
+        const data = await fetchStudyChapter('BSB', book, chapter);
+        const verses = parseBibleChapter(data);
+        const bookName = bookOptions.find((b) => b.abbrev === book)?.name ?? book;
+        const chunk = {
+          id: makeId(),
+          startVerse: verses[0]?.number ?? 1,
+          endVerse: verses.at(-1)?.number ?? 1,
+          spilloverEndVerse: null,
+          observation: '', interpretation: '', application: '',
+          crossReferences: [], greekWords: [], generalNotes: '',
+          episodeNumber: '', episodeTitle: '', finalScript: '', tags: [],
+        };
+        return { book: bookName, bookAbbrev: book, chapter: String(chapter), verses, chunks: [chunk] };
+      }));
+      const newProject = {
+        id: makeId(),
+        title: title || 'Reading Plan Study',
+        translation: 'BSB',
+        lastEdited: Date.now(),
+        selectedChunkId: chapters[0]?.chunks[0]?.id ?? null,
+        chapters,
+      };
+      setProject(newProject);
+      setCurrentPage('study');
+    } catch (err) {
+      console.error('studyReadingPlanDay error:', err);
+      toast(err?.message?.startsWith("You're offline") ? err.message : "Couldn't load today's passage. Please try again.", { tone: 'error' });
+    } finally {
+      setStudyBuildBusy(false);
+    }
+  };
+
   const openNewProject = () => {
     setProject(null);
     setCurrentPage('setup');
@@ -120,21 +412,30 @@ const App = () => {
     setCurrentPage('import');
   };
 
-  const goHome = () => {
+  // The My Studies page.
+  const goStudies = () => {
     setProjectIndex(loadProjectIndex());
     setCurrentPage('home');
     setProject(null);
   };
 
+  // "Home": the page the user chose in Settings (My Studies, the Bible Reader, or Reading
+  // Plans). If they're already on it, Home means My Studies, so there is always somewhere to go.
+  const goHome = () => {
+    const target = START_PAGES[reader.startPagePref] ?? 'home';
+    if (target === 'home' || target === currentPage) { goStudies(); return; }
+    setProjectIndex(loadProjectIndex());
+    setProject(null);
+    setCurrentPage(target);
+  };
+
   // Manual retry after a failed background sync (shown in the project header).
   const retrySync = async () => {
     if (!project) return;
-    setSyncStatus('syncing');
     const toSave = { ...project, lastEdited: Date.now() };
-    saveProjectToStorage(toSave);
+    try { saveProjectToStorage(toSave); } catch { /* storage full: still try the server */ }
-    const result = await saveRemoteProject(toSave);
+    unsyncedStudies.add(toSave.id);
-    setSyncStatus(result.ok ? 'synced' : 'error');
+    await pushProject(toSave);
-    if (result.ok) window.setTimeout(() => setSyncStatus(''), 2500);
   };
 
   // Shared with every page via useApp(). Page-specific state lives in the
@@ -143,26 +444,45 @@ const App = () => {
     // Navigation
     currentPage, setCurrentPage,
     goHome,
+    goStudies,
     authServerDown,
     // Auth (login/2FA/settings form state lives in AuthPage and SettingsPage)
     authUser, setAuthUser,
     signIn,
-    logout,
+    // Save any pending bookmarks/highlights to the account before signing out
-    // Save / sync status (shown in ProjectHeader)
+    logout: async () => { await reader.flushMarks(); await reader.flushPrefs(); await logout(); },
+    // Save / sync status (shown in the stage bar)
     saveStatus, setSaveStatus,
     syncStatus,
     retrySync,
+    syncConflict, keepMyVersion, useServerVersion, mergeBothVersions,
     // Home
     projectIndex,
     ...library,
-    ...readingPlan,
+    ...readingPlans,
     openBibleReader,
+    openReadingPlans,
+    readReadingPlanDay,
+    listenReadingPlanDay,
+    studyReadingPlanDay,
+    studyBuildBusy,
     openImportProject,
     openNewProject,
+    // ⌘K palette, shortcut list, and hand-offs to the Reader / Settings
+    paletteOpen, openPalette: () => setPaletteOpen(true),
+    readerRequest, clearReaderRequest: () => setReaderRequest(null),
+    requestReaderSearch: (text) => setReaderRequest({ search: text }),
+    settingsFocus, clearSettingsFocus: () => setSettingsFocus(null),
+    refreshProjectIndex: () => setProjectIndex(loadProjectIndex()),
+    openBackup: () => { setSettingsFocus('backup'); setCurrentPage('settings'); },
     // Audio (book player on Home + chapter player in the Reader)
     ...audio,
     // Reader
     ...reader,
+    readerPlan, setReaderPlan,
+    readerPlanActive: !!readerPlanProgress,
+    openPlanReading,
+    setReaderTranslation,
     // Setup (chunk-builder state lives in SetupPage via useChunkBuilder)
     project, setProject,
     allChunks,
@@ -176,14 +496,27 @@ const App = () => {
       <Suspense fallback={<PageLoading />}>
         <AppRouter />
       </Suspense>
+      {paletteOpen && <CommandPalette onClose={() => setPaletteOpen(false)} />}
+      {helpOpen && <ShortcutsHelp onClose={() => setHelpOpen(false)} />}
+      <Tooltips theme={reader.readerTheme} />
     </AppContext.Provider>
   );
 };
 
+// Shown while a page's code downloads: the app bar's outline and a few resting blocks in the
+// reading theme, so the screen doesn't flash a different colour before the page appears.
 function PageLoading() {
+  const { readerTheme } = useApp();
   return (
-    <div className="flex min-h-screen items-center justify-center bg-slate-900">
+    <div className="min-h-dvh bg-[var(--r-bg)]" style={themeVars(readerTheme)} role="status" aria-label="Loading">
-      <p className="text-sm text-slate-400">Loading…</p>
+      <div className="safe-top border-b border-[var(--r-line)] bg-[var(--r-bar)]"><div className="h-12" /></div>
+      <div className="mx-auto max-w-3xl animate-pulse motion-reduce:animate-none space-y-3 px-5 pt-10" aria-hidden="true">
+        <div className="mx-auto h-7 w-1/3 rounded bg-[var(--r-line)]" />
+        <div className="h-4 rounded bg-[var(--r-line)]" />
+        <div className="h-4 w-11/12 rounded bg-[var(--r-line)]" />
+        <div className="h-4 w-10/12 rounded bg-[var(--r-line)]" />
+      </div>
+      <span className="sr-only">Loading…</span>
     </div>
   );
 }
@@ -191,11 +524,15 @@ function PageLoading() {
 function AppRouter() {
   const { currentPage, authUser, authServerDown } = useApp();
   const { token: sharedViewToken, project: sharedProject, error: sharedError } = useSharedView();
+  const sharedOutlineToken = new URLSearchParams(window.location.search).get('outline');
+
+  // A read-only outline link: no sign-in, nothing editable
+  if (sharedOutlineToken) return <SharedOutlineView token={sharedOutlineToken} />;
 
   if (sharedViewToken) {
     if (sharedError) {
       return (
-        <div className="flex min-h-screen items-center justify-center bg-slate-900 px-4">
+        <div className="flex min-h-dvh items-center justify-center bg-slate-900 px-4">
           <div className="w-full max-w-sm rounded-3xl border border-white/10 bg-white p-8 text-center shadow-panel">
             <p className="text-sm uppercase tracking-[0.24em] text-slate-400">Bible Study Project</p>
             <p className="mt-4 text-sm text-rose-600">{sharedError}</p>
@@ -205,13 +542,13 @@ function AppRouter() {
     }
     if (!sharedProject) {
       return (
-        <div className="flex min-h-screen items-center justify-center bg-slate-900">
+        <div className="flex min-h-dvh items-center justify-center bg-slate-900">
           <p className="text-sm text-slate-400">Loading shared study…</p>
         </div>
       );
     }
     return (
-      <div className="min-h-screen bg-slate-100">
+      <div className="min-h-dvh bg-slate-100">
         <div className="border-b border-slate-200 bg-slate-900 px-4 py-3 text-center text-xs text-slate-300">
           🔗 Read-only shared view —{' '}
           <a href="/" className="underline hover:text-white">go to Bible Study Project</a>
@@ -220,30 +557,35 @@ function AppRouter() {
           title="Shared study"
           srcDoc={buildExportHtml(sharedProject)}
           sandbox="allow-popups"
-          className="h-[calc(100vh-2.5rem)] w-full border-0"
+          className="h-[calc(100dvh-2.5rem)] w-full border-0"
         />
       </div>
     );
   }
 
-  if (authUser === undefined && !authServerDown) {
+  if (authUser === undefined && !authServerDown) return <PageLoading />;
-    return (
-      <div className="flex min-h-screen items-center justify-center bg-slate-900">
-        <p className="text-sm text-slate-400">Loading…</p>
-      </div>
-    );
-  }
 
   if (authUser === null && !authServerDown) return <AuthPage />;
 
   if (currentPage === 'admin') return <AdminPage />;
   if (currentPage === 'settings') return <SettingsPage />;
+  if (currentPage === 'reading-plans') return <ReadingPlansPage />;
   if (currentPage === 'reader') return <ReaderPage />;
   if (currentPage === 'import') return <ImportPage />;
   if (currentPage === 'study') return <StudyPage />;
+  if (currentPage === 'outline') return <OutlinePage />;
+  if (currentPage === 'script') return <ScriptPage />;
+  if (currentPage === 'export') return <ExportPage />;
   if (currentPage === 'setup') return <SetupPage />;
   if (currentPage === 'pronunciation') return <PronunciationPage />;
   return <HomePage />;
 }
 
+// The toast provider sits outside so every page (and App itself) can show toasts.
+const App = () => (
+  <ToastProvider>
+    <AppInner />
+  </ToastProvider>
+);
+
 export default App;

src/App.test.jsx

@@ -1,736 +0,0 @@
-import { render, screen, fireEvent, waitFor, within } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { vi, beforeEach, afterEach, describe, test, expect } from 'vitest';
-import App from './App';
-import { resetLexiconCaches } from './utils/wordStudy.js';
-import { switchStorageUser } from './utils/bibleUtils.jsx';
-
-// ---------------------------------------------------------------------------
-// Shared mock data
-// ---------------------------------------------------------------------------
-const mockChapterData = {
-  chapter: {
-    content: [
-      { type: 'verse', number: 1, content: ['Paul, a servant of God.'] },
-      { type: 'verse', number: 2, content: ['In hope of eternal life.'] },
-      { type: 'verse', number: 3, content: ['Grace and peace from God.'] },
-    ],
-  },
-};
-
-// Mirrors the OpenScriptures Strong's Greek dictionary format loaded from jsdelivr.
-const mockGreekDict = {
-  G4102: {
-    lemma: 'πίστις',
-    translit: 'pistis',
-    kjv_def: 'faith, belief',
-    strongs_def: 'persuasion, i.e. credence; moral conviction',
-  },
-};
-
-function buildFetchMock({ chapterData = mockChapterData, greekData = null } = {}) {
-  return vi.fn((url) => {
-    if (url.includes('available_translations')) {
-      return Promise.resolve({ ok: true, json: () => Promise.resolve(['BSB', 'KJV']) });
-    }
-    if (url.includes('bible.helloao.org')) {
-      return Promise.resolve({ ok: true, json: () => Promise.resolve(chapterData) });
-    }
-    if (url.includes('strongs-greek-dictionary') && greekData !== null) {
-      return Promise.resolve({
-        ok: true,
-        text: () => Promise.resolve(`var strongsGreekDictionary = ${JSON.stringify(greekData)};`),
-      });
-    }
-    return Promise.resolve({ ok: false });
-  });
-}
-
-// ---------------------------------------------------------------------------
-// Test lifecycle
-// ---------------------------------------------------------------------------
-beforeEach(() => {
-  localStorage.clear();
-  resetLexiconCaches();
-  switchStorageUser(null); // a signed-in test leaves the storage namespace switched
-  vi.stubGlobal('fetch', buildFetchMock());
-  vi.spyOn(URL, 'createObjectURL').mockReturnValue('blob:mock');
-  vi.spyOn(URL, 'revokeObjectURL').mockImplementation(() => {});
-  vi.spyOn(window, 'confirm').mockReturnValue(false);
-});
-
-afterEach(() => {
-  vi.unstubAllGlobals();
-  vi.restoreAllMocks();
-});
-
-// ---------------------------------------------------------------------------
-// Helpers
-// ---------------------------------------------------------------------------
-
-// App checks /api/auth/me on mount before deciding whether to show the app or
-// a login gate. In tests the mock fetch reports the server as unreachable, so
-// it falls back to local-only mode — but that still takes a tick to resolve.
-async function renderApp() {
-  render(<App />);
-  await waitFor(() => expect(screen.queryByText('Loading…')).not.toBeInTheDocument());
-}
-
-async function loadChapter() {
-  const user = userEvent.setup();
-  await renderApp();
-  await user.click(screen.getAllByRole('button', { name: /new project/i })[0]);
-  // SetupPage is lazy-loaded, so wait for it on first open
-  await user.click(await screen.findByRole('button', { name: /load chapter/i }));
-  await screen.findByText(/Scripture & Chunks/i);
-  return user;
-}
-
-function getVerseList() {
-  return screen.getByTestId('verse-list');
-}
-
-function clickVerse(textFragment) {
-  fireEvent.click(
-    within(getVerseList()).getByRole('button', { name: new RegExp(textFragment) }),
-  );
-}
-
-function shiftClickVerse(textFragment) {
-  fireEvent.click(
-    within(getVerseList()).getByRole('button', { name: new RegExp(textFragment) }),
-    { shiftKey: true },
-  );
-}
-
-function addChunk(startFragment, endFragment) {
-  clickVerse(startFragment);
-  shiftClickVerse(endFragment);
-}
-
-function findChunkCounter(n, total) {
-  return screen.findByText((_, el) => el?.textContent === `Chunk ${n} of ${total}`);
-}
-
-// ---------------------------------------------------------------------------
-// Initial render
-// ---------------------------------------------------------------------------
-describe('Initial render', () => {
-  test('shows the home page with "My Studies" heading', async () => {
-    await renderApp();
-    expect(screen.getByText('My Studies')).toBeInTheDocument();
-  });
-
-  test('shows "No projects yet" when storage is empty', async () => {
-    await renderApp();
-    expect(screen.getByText(/no projects yet/i)).toBeInTheDocument();
-  });
-
-  test('shows "New Project" button on home page', async () => {
-    await renderApp();
-    expect(screen.getAllByRole('button', { name: /new project/i }).length).toBeGreaterThan(0);
-  });
-
-  test('clicking "New Project" shows the project setup form', async () => {
-    const user = userEvent.setup();
-    await renderApp();
-    await user.click(screen.getAllByRole('button', { name: /new project/i })[0]);
-    expect(await screen.findByText('Project Setup')).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: /load chapter/i })).toBeInTheDocument();
-  });
-
-  test('setup form shows translation, book, and chapter inputs', async () => {
-    const user = userEvent.setup();
-    await renderApp();
-    await user.click(screen.getAllByRole('button', { name: /new project/i })[0]);
-    expect(screen.getByText('Translation')).toBeInTheDocument();
-    expect(screen.getByText('Book')).toBeInTheDocument();
-    expect(screen.getByText('Chapter')).toBeInTheDocument();
-  });
-});
-
-// ---------------------------------------------------------------------------
-// Loading a chapter
-// ---------------------------------------------------------------------------
-describe('Loading a chapter', () => {
-  test('transitions to the chunk setup view on success', async () => {
-    await loadChapter();
-    expect(screen.getByText(/Scripture & Chunks/i)).toBeInTheDocument();
-  });
-
-  test('renders verse text after loading', async () => {
-    await loadChapter();
-    expect(screen.getByText(/Paul, a servant of God/i)).toBeInTheDocument();
-  });
-
-  test('shows "0 created" initially', async () => {
-    await loadChapter();
-    expect(screen.getByText('0 created')).toBeInTheDocument();
-  });
-
-  test('shows an error message when the API returns a non-ok response', async () => {
-    vi.stubGlobal('fetch', vi.fn((url) => {
-      if (url.includes('available_translations')) {
-        return Promise.resolve({ ok: true, json: () => Promise.resolve(['BSB']) });
-      }
-      return Promise.resolve({ ok: false });
-    }));
-    const user = userEvent.setup();
-    await renderApp();
-    await user.click(screen.getAllByRole('button', { name: /new project/i })[0]);
-    await user.click(screen.getByRole('button', { name: /load chapter/i }));
-    await screen.findByText(/unable to load chapter/i);
-  });
-
-  test('shows an error message when chapter data contains no verses', async () => {
-    vi.stubGlobal('fetch', buildFetchMock({ chapterData: { chapter: { content: [] } } }));
-    const user = userEvent.setup();
-    await renderApp();
-    await user.click(screen.getAllByRole('button', { name: /new project/i })[0]);
-    await user.click(screen.getByRole('button', { name: /load chapter/i }));
-    await screen.findByText(/invalid bible data/i);
-
-  });
-});
-
-// ---------------------------------------------------------------------------
-// Chunk management
-// ---------------------------------------------------------------------------
-describe('Chunk management', () => {
-  test('creates a chunk by clicking a verse range', async () => {
-    await loadChapter();
-    addChunk('Paul, a servant', 'Grace and peace');
-    await screen.findByText(/1[-–]3/);
-  });
-
-  test('chunk count increments after each addition', async () => {
-    await loadChapter();
-    addChunk('Paul, a servant', 'Paul, a servant');
-    await screen.findByText('1 created');
-    addChunk('In hope of eternal', 'Grace and peace');
-    await screen.findByText('2 created');
-  });
-
-  test('prevents adding a duplicate chunk range', async () => {
-    await loadChapter();
-    addChunk('Paul, a servant', 'In hope of eternal');
-    await screen.findByText('1 created');
-    addChunk('Paul, a servant', 'In hope of eternal');
-    await screen.findByText(/That chunk already exists/i);
-  });
-
-  test('deletes a chunk', async () => {
-    await loadChapter();
-    addChunk('Paul, a servant', 'In hope of eternal');
-    await screen.findByText('1 created');
-    fireEvent.click(screen.getByRole('button', { name: /delete/i }));
-    await screen.findByText('0 created');
-  });
-
-  test('"Begin Studying" is disabled when no chunks exist', async () => {
-    await loadChapter();
-    expect(screen.getByRole('button', { name: /begin studying/i })).toBeDisabled();
-  });
-
-  test('"Begin Studying" is enabled once a chunk exists', async () => {
-    await loadChapter();
-    addChunk('Paul, a servant', 'In hope of eternal');
-    await screen.findByText('1 created');
-    expect(screen.getByRole('button', { name: /begin studying/i })).not.toBeDisabled();
-  });
-});
-
-// ---------------------------------------------------------------------------
-// Study view navigation
-// ---------------------------------------------------------------------------
-async function goToStudyWith3Chunks() {
-  await loadChapter();
-  addChunk('Paul, a servant', 'Paul, a servant');
-  addChunk('In hope of eternal', 'In hope of eternal');
-  addChunk('Grace and peace', 'Grace and peace');
-  await screen.findByText('3 created');
-  fireEvent.click(screen.getByRole('button', { name: /begin studying/i }));
-  await screen.findByText(/chunk editor/i);
-  // addChunk always selects the newest chunk; navigate back to chunk 1
-  // so navigation tests start from a known position.
-  fireEvent.click(screen.getByRole('button', { name: /previous chunk/i }));
-  fireEvent.click(screen.getByRole('button', { name: /previous chunk/i }));
-  expect(await findChunkCounter(1, 3)).toBeInTheDocument();
-}
-
-describe('Study view navigation', () => {
-  test('transitions to study view when "Begin Studying" is clicked', async () => {
-    await loadChapter();
-    addChunk('Paul, a servant', 'In hope of eternal');
-    await screen.findByText('1 created');
-    fireEvent.click(screen.getByRole('button', { name: /begin studying/i }));
-    await screen.findByText(/chunk editor/i);
-  });
-
-  test('"Previous Chunk" is disabled on the first chunk', async () => {
-    await goToStudyWith3Chunks();
-    expect(screen.getByRole('button', { name: /previous chunk/i })).toBeDisabled();
-  });
-
-  test('"Next Chunk" advances to the second chunk', async () => {
-    await goToStudyWith3Chunks();
-    expect(await findChunkCounter(1, 3)).toBeInTheDocument();
-    fireEvent.click(screen.getByRole('button', { name: /next chunk/i }));
-    expect(await findChunkCounter(2, 3)).toBeInTheDocument();
-  });
-
-  test('"Next Chunk" is disabled on the last chunk', async () => {
-    await goToStudyWith3Chunks();
-    fireEvent.click(screen.getByRole('button', { name: /next chunk/i }));
-    fireEvent.click(screen.getByRole('button', { name: /next chunk/i }));
-    expect(await findChunkCounter(3, 3)).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: /next chunk/i })).toBeDisabled();
-  });
-
-  test('"Previous Chunk" returns to prior chunk after advancing', async () => {
-    await goToStudyWith3Chunks();
-    fireEvent.click(screen.getByRole('button', { name: /next chunk/i }));
-    expect(await findChunkCounter(2, 3)).toBeInTheDocument();
-    fireEvent.click(screen.getByRole('button', { name: /previous chunk/i }));
-    expect(await findChunkCounter(1, 3)).toBeInTheDocument();
-  });
-});
-
-// ---------------------------------------------------------------------------
-// Greek word lookup
-// ---------------------------------------------------------------------------
-async function goToStudyAndAddGreekWord(fetchMock) {
-  if (fetchMock) vi.stubGlobal('fetch', fetchMock);
-  await loadChapter();
-  addChunk('Paul, a servant', 'In hope of eternal');
-  await screen.findByText('1 created');
-  fireEvent.click(screen.getByRole('button', { name: /begin studying/i }));
-  await screen.findByText(/chunk editor/i);
-  fireEvent.click(screen.getByRole('button', { name: /add greek word/i }));
-  await screen.findByPlaceholderText(/G4102, H7225, 4102/i);
-}
-
-describe('Greek word lookup', () => {
-  test('adds a Greek word entry form', async () => {
-    await goToStudyAndAddGreekWord();
-    expect(screen.getByPlaceholderText(/G4102, H7225, 4102/i)).toBeInTheDocument();
-  });
-
-  test('populates fields after a successful lookup', async () => {
-    await goToStudyAndAddGreekWord(buildFetchMock({ greekData: mockGreekDict }));
-    fireEvent.change(screen.getByPlaceholderText(/G4102, H7225, 4102/i), { target: { value: 'G4102' } });
-    fireEvent.click(screen.getByRole('button', { name: /look up greek/i }));
-    await screen.findByDisplayValue('πίστις');
-    expect(screen.getByDisplayValue('pistis')).toBeInTheDocument();
-    // With no gloss-map entry, the English gloss falls back to the KJV
-    // definition, so it matches the Short Definition field.
-    expect(screen.getAllByDisplayValue('faith, belief')).toHaveLength(2);
-  });
-
-  test('shows "No definition found." when the API returns an empty array', async () => {
-    await goToStudyAndAddGreekWord(buildFetchMock({ greekData: {} }));
-    fireEvent.change(screen.getByPlaceholderText(/G4102, H7225, 4102/i), { target: { value: 'G4102' } });
-    fireEvent.click(screen.getByRole('button', { name: /look up greek/i }));
-    await screen.findByDisplayValue('No definition found.');
-  });
-
-  test('shows "Lookup failed." on network error', async () => {
-    await goToStudyAndAddGreekWord(
-      vi.fn((url) => {
-        if (url.includes('available_translations')) {
-          return Promise.resolve({ ok: true, json: () => Promise.resolve(['BSB']) });
-        }
-        if (url.includes('bible.helloao.org')) {
-          return Promise.resolve({ ok: true, json: () => Promise.resolve(mockChapterData) });
-        }
-        return Promise.reject(new Error('Network error'));
-      }),
-    );
-    fireEvent.change(screen.getByPlaceholderText(/G4102, H7225, 4102/i), { target: { value: 'G4102' } });
-    fireEvent.click(screen.getByRole('button', { name: /look up greek/i }));
-    await screen.findByDisplayValue('Lookup failed.');
-  });
-
-  test('lookup is skipped when query is empty', async () => {
-    const fetchSpy = buildFetchMock();
-    await goToStudyAndAddGreekWord(fetchSpy);
-    const callCountBefore = fetchSpy.mock.calls.length;
-    fireEvent.click(screen.getByRole('button', { name: /look up greek/i }));
-    await waitFor(() => {
-      expect(fetchSpy.mock.calls.length).toBe(callCountBefore);
-    });
-  });
-
-  test('removes a Greek word entry', async () => {
-    await goToStudyAndAddGreekWord();
-    expect(screen.getByPlaceholderText(/G4102, H7225, 4102/i)).toBeInTheDocument();
-    fireEvent.click(screen.getByRole('button', { name: /^delete$/i }));
-    await waitFor(() => {
-      expect(screen.queryByPlaceholderText(/G4102, H7225, 4102/i)).not.toBeInTheDocument();
-    });
-  });
-});
-
-// ---------------------------------------------------------------------------
-// Authentication (useAuth + AuthPage/SettingsPage local form state)
-// ---------------------------------------------------------------------------
-describe('Authentication', () => {
-  const user = { id: 'u1', email: 'reader@example.com', totpEnabled: false, podcastName: 'My Show', isAdmin: false };
-  const json = (status, data) => Promise.resolve({ ok: status < 400, status, json: () => Promise.resolve(data) });
-
-  // A tiny fake API: `session` decides what /api/auth/me returns; login can
-  // optionally require a 2FA code first.
-  function stubApi({ session = null, mfaRequired = false } = {}) {
-    const fallback = buildFetchMock();
-    const fetchMock = vi.fn((url, opts = {}) => {
-      if (!url.startsWith('/api/')) return fallback(url, opts);
-      const route = `${opts.method ?? 'GET'} ${url}`;
-      if (route === 'GET /api/auth/me') return session ? json(200, session) : json(401, { error: 'Not signed in' });
-      if (route === 'POST /api/auth/login') return json(200, mfaRequired ? { mfaRequired: true } : user);
-      if (route === 'POST /api/auth/mfa/verify') return json(200, user);
-      if (route === 'POST /api/auth/logout') return json(200, { ok: true });
-      if (route === 'GET /api/projects') return json(200, []);
-      if (route === 'GET /api/reader/ink') return json(200, {});
-      return json(404, { error: 'not mocked' });
-    });
-    vi.stubGlobal('fetch', fetchMock);
-    return fetchMock;
-  }
-  const calledWith = (fetchMock, method, url) =>
-    fetchMock.mock.calls.some(([u, o = {}]) => u === url && (o.method ?? 'GET') === method);
-
-  async function signInWithForm(u) {
-    await u.type(await screen.findByLabelText(/email/i), user.email);
-    await u.type(screen.getByLabelText(/password/i), 'correct-horse');
-    await u.click(screen.getByRole('button', { name: /^sign in$/i }));
-  }
-
-  test('signing in with the form shows the app and loads reader ink', async () => {
-    const fetchMock = stubApi();
-    const u = userEvent.setup();
-    render(<App />);
-    await signInWithForm(u);
-    expect(await screen.findByText(user.email)).toBeInTheDocument();
-    expect(calledWith(fetchMock, 'POST', '/api/auth/login')).toBe(true);
-    await waitFor(() => expect(calledWith(fetchMock, 'GET', '/api/reader/ink')).toBe(true));
-  });
-
-  test('2FA: a correct code after the password signs the user in', async () => {
-    const fetchMock = stubApi({ mfaRequired: true });
-    const u = userEvent.setup();
-    render(<App />);
-    await signInWithForm(u);
-    await u.type(await screen.findByPlaceholderText('123456'), '123456');
-    await u.click(screen.getByRole('button', { name: /verify/i }));
-    expect(await screen.findByText(user.email)).toBeInTheDocument();
-    expect(calledWith(fetchMock, 'POST', '/api/auth/mfa/verify')).toBe(true);
-  });
-
-  test('an existing session skips the login screen, and Log out returns to it', async () => {
-    const fetchMock = stubApi({ session: user });
-    const u = userEvent.setup();
-    render(<App />);
-    expect(await screen.findByText(user.email)).toBeInTheDocument();
-    await u.click(screen.getByRole('button', { name: /log out/i }));
-    expect(await screen.findByRole('button', { name: /^sign in$/i })).toBeInTheDocument();
-    expect(calledWith(fetchMock, 'POST', '/api/auth/logout')).toBe(true);
-  });
-
-  test('Settings pre-fills the podcast name from the signed-in account', async () => {
-    stubApi({ session: user });
-    const u = userEvent.setup();
-    render(<App />);
-    await u.click(await screen.findByRole('button', { name: /settings/i }));
-    expect(await screen.findByDisplayValue('My Show')).toBeInTheDocument();
-  });
-});
-
-// ---------------------------------------------------------------------------
-// Admin page (state is local to AdminPage)
-// ---------------------------------------------------------------------------
-describe('Admin page', () => {
-  const admin = { id: 'a1', email: 'owner@example.com', totpEnabled: true, podcastName: null, isAdmin: true };
-  const json = (status, data) => Promise.resolve({ ok: status < 400, status, json: () => Promise.resolve(data) });
-
-  function stubAdminApi(sessionUser) {
-    let users = [
-      { id: 'a1', email: 'owner@example.com', totpEnabled: true, projectCount: 1 },
-      { id: 'u2', email: 'student@example.com', totpEnabled: false, projectCount: 0 },
-    ];
-    const fallback = buildFetchMock();
-    const fetchMock = vi.fn((url, opts = {}) => {
-      if (!url.startsWith('/api/')) return fallback(url, opts);
-      const route = `${opts.method ?? 'GET'} ${url}`;
-      if (route === 'GET /api/auth/me') return json(200, sessionUser);
-      if (route === 'GET /api/admin/users') return json(200, users);
-      if (route === 'GET /api/admin/projects') return json(200, [{ id: 'p1', title: 'Romans Study', ownerEmail: 'owner@example.com', chapterSummary: 'Romans 1' }]);
-      if (route === 'DELETE /api/admin/users/u2') { users = users.filter((u) => u.id !== 'u2'); return json(200, { ok: true }); }
-      if (route === 'GET /api/projects') return json(200, []);
-      if (route === 'GET /api/reader/ink') return json(200, {});
-      return json(404, { error: 'not mocked' });
-    });
-    vi.stubGlobal('fetch', fetchMock);
-    return fetchMock;
-  }
-
-  test('an admin can open the page and see users and projects', async () => {
-    stubAdminApi(admin);
-    const u = userEvent.setup();
-    render(<App />);
-    await u.click(await screen.findByRole('button', { name: /admin/i }));
-    expect(await screen.findByText('student@example.com')).toBeInTheDocument();
-    await u.click(screen.getByRole('button', { name: /projects \(1\)/i }));
-    expect(await screen.findByText('Romans Study')).toBeInTheDocument();
-  });
-
-  test('deleting a user removes them after the list reloads', async () => {
-    const fetchMock = stubAdminApi(admin);
-    window.confirm.mockReturnValue(true);
-    const u = userEvent.setup();
-    render(<App />);
-    await u.click(await screen.findByRole('button', { name: /admin/i }));
-    const row = (await screen.findByText('student@example.com')).closest('tr');
-    await u.click(within(row).getByRole('button', { name: /delete/i }));
-    await waitFor(() => expect(screen.queryByText('student@example.com')).not.toBeInTheDocument());
-    expect(fetchMock.mock.calls.some(([url, o = {}]) => url === '/api/admin/users/u2' && o.method === 'DELETE')).toBe(true);
-  });
-
-  test('non-admins get no Admin button', async () => {
-    stubAdminApi({ ...admin, isAdmin: false });
-    render(<App />);
-    expect(await screen.findByText(admin.email)).toBeInTheDocument();
-    expect(screen.queryByRole('button', { name: /admin/i })).not.toBeInTheDocument();
-  });
-});
-
-// ---------------------------------------------------------------------------
-// Import page (state is local to ImportPage)
-// ---------------------------------------------------------------------------
-describe('Import page', () => {
-  test('opens from Home, lists fetched translations, and goes back', async () => {
-    const user = userEvent.setup();
-    await renderApp();
-    await user.click(screen.getByRole('button', { name: /import session list/i }));
-    expect(await screen.findByRole('heading', { name: /import session list/i })).toBeInTheDocument();
-    expect(await screen.findByRole('option', { name: 'KJV' })).toBeInTheDocument();
-    await user.click(screen.getByRole('button', { name: /back/i }));
-    expect(await screen.findByRole('button', { name: /import session list/i })).toBeInTheDocument();
-  });
-});
-
-// ---------------------------------------------------------------------------
-// Home page (search/sort/rename local to HomePage; library + reading plan hooks)
-// ---------------------------------------------------------------------------
-describe('Home page', () => {
-  // Tests run in local-only mode (the mock API is unreachable), which uses the
-  // pre-account localStorage keys.
-  function seedProject({ id = 'p1', title = 'Titus Notes', observation = 'Grace abounds to all.' } = {}) {
-    const project = {
-      id, title, translation: 'BSB', lastEdited: Date.now(), selectedChunkId: null,
-      chapters: [{
-        book: 'Titus', bookAbbrev: 'TIT', chapter: '1', verses: [{ number: 1, text: 'Paul, a servant of God.' }],
-        chunks: [{ id: 'c1', startVerse: 1, endVerse: 1, observation, interpretation: '', application: '',
-          crossReferences: [], greekWords: [], tags: [] }],
-      }],
-    };
-    const index = JSON.parse(localStorage.getItem('bible-study-index') || '[]');
-    index.push({ id, title, lastEdited: project.lastEdited, chapterSummary: 'Titus 1', tags: [] });
-    localStorage.setItem(`bible-study-project-${id}`, JSON.stringify(project));
-    localStorage.setItem('bible-study-index', JSON.stringify(index));
-  }
-
-  test('searching 3+ characters finds matches inside study notes', async () => {
-    seedProject();
-    const user = userEvent.setup();
-    await renderApp();
-    await user.type(screen.getByPlaceholderText(/search projects/i), 'grace');
-    expect(await screen.findByText(/notes matching "grace"/i)).toBeInTheDocument();
-  });
-
-  test('renaming a project updates its title and saved index', async () => {
-    seedProject();
-    const user = userEvent.setup();
-    await renderApp();
-    await user.click(screen.getByRole('button', { name: /rename/i }));
-    const input = screen.getByDisplayValue('Titus Notes');
-    await user.clear(input);
-    await user.type(input, 'Titus Deep Dive');
-    await user.click(screen.getByRole('button', { name: /^save$/i }));
-    expect(await screen.findByText('Titus Deep Dive')).toBeInTheDocument();
-    expect(JSON.parse(localStorage.getItem('bible-study-index'))[0].title).toBe('Titus Deep Dive');
-  });
-
-  test('deleting a project removes it after confirmation', async () => {
-    seedProject();
-    window.confirm.mockReturnValue(true);
-    const user = userEvent.setup();
-    await renderApp();
-    await user.click(screen.getByRole('button', { name: /^delete$/i }));
-    await waitFor(() => expect(screen.queryByText('Titus Notes')).not.toBeInTheDocument());
-    expect(localStorage.getItem('bible-study-project-p1')).toBeNull();
-  });
-
-  test('sort choice is remembered after leaving Home', async () => {
-    seedProject();
-    const user = userEvent.setup();
-    await renderApp();
-    await user.selectOptions(screen.getByDisplayValue('Last edited'), 'title');
-    await user.click(screen.getByRole('button', { name: /read bible/i }));
-    await user.click(await screen.findByRole('button', { name: /back to studies/i }));
-    expect(await screen.findByDisplayValue('Title')).toBeInTheDocument();
-  });
-
-  test('a reading plan can be started from Home', async () => {
-    seedProject(); // the plan card shows once there's at least one project
-    const user = userEvent.setup();
-    await renderApp();
-    await user.click(screen.getByRole('button', { name: /set goal/i }));
-    await user.click(screen.getByRole('button', { name: /start plan/i }));
-    await waitFor(() => expect(JSON.parse(localStorage.getItem('readingPlan'))?.bookAbbrev).toBe('GEN'));
-  });
-});
-
-// ---------------------------------------------------------------------------
-// Project header (ProjectHeader + useShareLink) and the shared read-only view
-// ---------------------------------------------------------------------------
-describe('Project header and sharing', () => {
-  const json = (status, data) => Promise.resolve({ ok: status < 400, status, json: () => Promise.resolve(data) });
-
-  test('Export → Markdown downloads a file', async () => {
-    const user = await loadChapter();
-    await user.click(screen.getByRole('button', { name: /export/i }));
-    await user.click(screen.getByRole('button', { name: /export markdown/i }));
-    expect(URL.createObjectURL).toHaveBeenCalled();
-  });
-
-  test('enabling sharing shows a copyable link', async () => {
-    const fallback = buildFetchMock();
-    const fetchMock = vi.fn((url, opts = {}) => {
-      if (url.startsWith('/api/projects/') && url.endsWith('/share')) {
-        return (opts.method ?? 'GET') === 'POST' ? json(200, { shareToken: 'tok123' }) : json(200, { shareToken: null });
-      }
-      return fallback(url, opts);
-    });
-    vi.stubGlobal('fetch', fetchMock);
-    const user = await loadChapter();
-    await user.click(screen.getByRole('button', { name: /share/i }));
-    await user.click(screen.getByRole('button', { name: /enable sharing/i }));
-    expect(await screen.findByDisplayValue(/\?share=tok123$/)).toBeInTheDocument();
-  });
-
-  test('a ?share= link shows the read-only view without signing in', async () => {
-    window.history.pushState({}, '', '/?share=abc');
-    const fallback = buildFetchMock();
-    vi.stubGlobal('fetch', vi.fn((url, opts) => (url === '/api/share/abc'
-      ? json(200, { id: 's1', title: 'Shared Titus', translation: 'BSB', chapters: [] })
-      : fallback(url, opts))));
-    try {
-      render(<App />);
-      expect(await screen.findByText(/read-only shared view/i)).toBeInTheDocument();
-      expect(screen.getByTitle('Shared study')).toBeInTheDocument();
-    } finally {
-      window.history.pushState({}, '', '/');
-    }
-  });
-});
-
-// ---------------------------------------------------------------------------
-// Study editor (StudyPage local state + useCrossRefs / useWordStudy hooks)
-// ---------------------------------------------------------------------------
-describe('Study editor', () => {
-  test('study-page messages now show as a status toast', async () => {
-    await goToStudyWith3Chunks();
-    // Titus is a New Testament book, so the Hebrew picker explains why it can't help.
-    fireEvent.click(screen.getByRole('button', { name: /suggest hebrew/i }));
-    expect(await screen.findByRole('status')).toHaveTextContent(/old testament/i);
-  });
-
-  test('arrow keys move between chunks', async () => {
-    await goToStudyWith3Chunks();
-    fireEvent.keyDown(window, { key: 'ArrowRight' });
-    expect(await findChunkCounter(2, 3)).toBeInTheDocument();
-    fireEvent.keyDown(window, { key: 'ArrowLeft' });
-    expect(await findChunkCounter(1, 3)).toBeInTheDocument();
-  });
-
-  test('a typed cross-reference is added, and the input clears on chunk change', async () => {
-    await goToStudyWith3Chunks();
-    const input = screen.getByPlaceholderText(/john 1:1 or rom 3:23/i);
-    fireEvent.change(input, { target: { value: 'Rom 3:23' } });
-    fireEvent.keyDown(input, { key: 'Enter' });
-    expect(await screen.findByText('Rom 3:23')).toBeInTheDocument();
-    fireEvent.change(input, { target: { value: 'half typed' } });
-    fireEvent.click(screen.getByRole('button', { name: /next chunk/i }));
-    await waitFor(() => expect(input).toHaveValue(''));
-  });
-
-  test('a tag can be added with Enter', async () => {
-    await goToStudyWith3Chunks();
-    const input = screen.getByPlaceholderText(/add a tag/i);
-    fireEvent.change(input, { target: { value: 'grace' } });
-    fireEvent.keyDown(input, { key: 'Enter' });
-    expect(await screen.findByText(/#?grace/)).toBeInTheDocument();
-    expect(input).toHaveValue('');
-  });
-});
-
-// ---------------------------------------------------------------------------
-// Chunk builder (useChunkBuilder, local to SetupPage)
-// ---------------------------------------------------------------------------
-describe('Chunk builder', () => {
-  async function addSecondChapter(user) {
-    await user.click(screen.getByRole('button', { name: /add chapter/i }));
-    // The add-chapter form starts on the chapter after the project's last one.
-    expect(screen.getByDisplayValue('2')).toBeInTheDocument();
-    await user.click(screen.getByRole('button', { name: /load chapter/i }));
-    return screen.findByRole('button', { name: 'Titus 2' });
-  }
-
-  test('"Add Chapter" starts on the next chapter and adds it as a tab', async () => {
-    const user = await loadChapter();
-    expect(await addSecondChapter(user)).toHaveClass('bg-slate-900');
-  });
-
-  test('"Back to Chunks" reopens the chapter of the chunk being studied', async () => {
-    const user = await loadChapter();
-    await addSecondChapter(user);
-    addChunk('Paul, a servant', 'In hope of eternal'); // chunk in Titus 2 (now selected)
-    await user.click(screen.getByRole('button', { name: 'Titus 1' }));
-    await user.click(screen.getByRole('button', { name: /begin studying/i }));
-    await screen.findByText(/chunk editor/i);
-    await user.click(screen.getByRole('button', { name: /back to chunks/i }));
-    expect(await screen.findByRole('button', { name: 'Titus 2' })).toHaveClass('bg-slate-900');
-  });
-});
-
-// ---------------------------------------------------------------------------
-// Header redesign: Tools menu + one-dropdown-at-a-time
-// ---------------------------------------------------------------------------
-describe('Header menus', () => {
-  test('Tools is disabled until a chunk exists, then opens the Pronunciation Guide', async () => {
-    const user = await loadChapter();
-    expect(screen.getByRole('button', { name: /tools/i })).toBeDisabled();
-    addChunk('Paul, a servant', 'Paul, a servant');
-    await screen.findByText('1 created');
-    await user.click(screen.getByRole('button', { name: /tools/i }));
-    await user.click(screen.getByRole('button', { name: /pronunciation guide/i }));
-    expect(await screen.findByRole('heading', { name: /pronunciation guide/i })).toBeInTheDocument();
-  });
-
-  test('opening one dropdown closes the other; Escape and outside clicks close it', async () => {
-    const user = await loadChapter();
-    await user.click(screen.getByRole('button', { name: /export/i }));
-    expect(screen.getByRole('button', { name: /export markdown/i })).toBeInTheDocument();
-
-    await user.click(screen.getByRole('button', { name: /share/i }));
-    expect(screen.queryByRole('button', { name: /export markdown/i })).not.toBeInTheDocument();
-    expect(screen.getByText(/read-only share link/i)).toBeInTheDocument();
-
-    await user.keyboard('{Escape}');
-    expect(screen.queryByText(/read-only share link/i)).not.toBeInTheDocument();
-
-    await user.click(screen.getByRole('button', { name: /export/i }));
-    await user.click(screen.getByText(/scripture & chunks/i));
-    expect(screen.queryByRole('button', { name: /export markdown/i })).not.toBeInTheDocument();
-  });
-});

src/components/AudioPlayer.jsx

@@ -77,11 +77,11 @@ export default function AudioPlayer({
   const progressPct = duration > 0 ? Math.min(100, (currentTime / duration) * 100) : 0;
 
   return (
-    <div className="rounded-3xl border border-slate-200 bg-white p-4 shadow-panel sm:p-5">
+    <div className="rounded-3xl border border-[var(--r-line,#e2e8f0)] bg-[var(--r-bar,#ffffff)] p-4 sm:p-5">
       <div className="flex flex-wrap items-start justify-between gap-3">
-        <div className="min-w-0 flex-1">
+        <div className="min-w-[10rem] flex-1">
-          <h3 className="truncate text-sm font-semibold text-slate-900 sm:text-base">{title}</h3>
+          <h3 className="truncate text-sm font-semibold text-[var(--r-text,#0f172a)] sm:text-base">{title}</h3>
-          <p className="mt-0.5 truncate text-xs text-slate-500 sm:text-sm">{subtitle}</p>
+          <p className="mt-0.5 truncate text-xs text-[var(--r-sub,#64748b)] sm:text-sm">{subtitle}</p>
           {status === 'error' && errorMessage && (
             <p className="mt-1 text-xs text-rose-600">{errorMessage}</p>
           )}
@@ -99,11 +99,11 @@ export default function AudioPlayer({
             value={Math.min(currentTime, duration || 0)}
             onChange={(e) => onSeekTo?.(Number(e.target.value))}
             disabled={!duration}
-            className="h-1.5 w-full cursor-pointer appearance-none rounded-full bg-slate-200 accent-sky-600 disabled:cursor-default"
+            className="h-1.5 w-full cursor-pointer appearance-none rounded-full bg-[var(--r-line,#e2e8f0)] accent-[var(--r-accent,#0284c7)] disabled:cursor-default"
-            style={{ background: `linear-gradient(to right, rgb(2 132 199) ${progressPct}%, rgb(226 232 240) ${progressPct}%)` }}
+            style={{ background: `linear-gradient(to right, var(--r-accent, rgb(2 132 199)) ${progressPct}%, var(--r-line, rgb(226 232 240)) ${progressPct}%)` }}
             aria-label="Seek"
           />
-          <div className="mt-1 flex justify-between text-xs tabular-nums text-slate-400">
+          <div className="mt-1 flex justify-between text-xs tabular-nums text-[var(--r-sub,#64748b)]">
             <span>{formatTime(currentTime)}</span>
             <span>{formatTime(duration)}</span>
           </div>
@@ -118,7 +118,7 @@ export default function AudioPlayer({
               onClick={onSeekBack}
               title="Rewind 10 seconds"
               aria-label="Rewind 10 seconds"
-              className="flex h-9 w-9 items-center justify-center rounded-full text-slate-600 hover:bg-slate-100"
+              className="flex h-9 w-9 items-center justify-center rounded-full text-[var(--r-sub,#64748b)] hover:bg-black/5"
             >
               <Seek10Icon direction="back" />
             </button>
@@ -126,7 +126,7 @@ export default function AudioPlayer({
               type="button"
               onClick={onTogglePause}
               aria-label={status === 'paused' ? 'Resume' : 'Pause'}
-              className="flex h-12 w-12 items-center justify-center rounded-full bg-sky-600 text-white shadow-sm hover:bg-sky-500"
+              className="flex h-12 w-12 items-center justify-center rounded-full bg-[var(--r-accent,#0284c7)] text-[var(--r-on,#ffffff)] hover:opacity-90"
             >
               {status === 'paused' ? <PlayIcon /> : <PauseIcon />}
             </button>
@@ -135,7 +135,7 @@ export default function AudioPlayer({
               onClick={onSeekForward}
               title="Fast-forward 10 seconds"
               aria-label="Fast-forward 10 seconds"
-              className="flex h-9 w-9 items-center justify-center rounded-full text-slate-600 hover:bg-slate-100"
+              className="flex h-9 w-9 items-center justify-center rounded-full text-[var(--r-sub,#64748b)] hover:bg-black/5"
             >
               <Seek10Icon direction="forward" />
             </button>
@@ -146,7 +146,7 @@ export default function AudioPlayer({
                 disabled={nextDisabled}
                 title="Next chapter"
                 aria-label="Next chapter"
-                className="flex h-9 w-9 items-center justify-center rounded-full text-slate-600 hover:bg-slate-100 disabled:opacity-30 disabled:hover:bg-transparent"
+                className="flex h-9 w-9 items-center justify-center rounded-full text-[var(--r-sub,#64748b)] hover:bg-black/5 disabled:opacity-30 disabled:hover:bg-transparent"
               >
                 <NextTrackIcon />
               </button>
@@ -156,7 +156,7 @@ export default function AudioPlayer({
               onClick={onStop}
               title="Stop"
               aria-label="Stop"
-              className="flex h-9 w-9 items-center justify-center rounded-full text-slate-600 hover:bg-slate-100"
+              className="flex h-9 w-9 items-center justify-center rounded-full text-[var(--r-sub,#64748b)] hover:bg-black/5"
             >
               <StopIcon />
             </button>
@@ -165,7 +165,7 @@ export default function AudioPlayer({
           <button
             type="button"
             onClick={onPlay}
-            className="flex h-12 w-12 items-center justify-center rounded-full bg-sky-600 text-white shadow-sm hover:bg-sky-500"
+            className="flex h-12 w-12 items-center justify-center rounded-full bg-[var(--r-accent,#0284c7)] text-[var(--r-on,#ffffff)] hover:opacity-90"
             aria-label="Play"
           >
             <PlayIcon />

src/components/AuthStatus.jsx

@@ -1,35 +0,0 @@
-// Signed-in email plus Admin / Settings / Log out buttons for page headers.
-import { useApp } from '../context/AppContext.js';
-
-export default function AuthStatus() {
-  const { authUser, setCurrentPage, logout } = useApp();
-  if (!authUser) return null;
-  return (
-    <div className="flex items-center gap-2 text-sm text-slate-300">
-      <span className="hidden sm:inline">{authUser.email}</span>
-      {authUser.isAdmin && (
-        <button
-          type="button"
-          onClick={() => setCurrentPage('admin')}
-          className="rounded-xl border border-white/15 bg-white/10 px-3 py-1.5 text-xs text-white transition hover:bg-white/15"
-        >
-          🛡 Admin
-        </button>
-      )}
-      <button
-        type="button"
-        onClick={() => setCurrentPage('settings')}
-        className="rounded-xl border border-white/15 bg-white/10 px-3 py-1.5 text-xs text-white transition hover:bg-white/15"
-      >
-        ⚙ Settings
-      </button>
-      <button
-        type="button"
-        onClick={logout}
-        className="rounded-xl border border-white/15 bg-white/10 px-3 py-1.5 text-xs text-white transition hover:bg-white/15"
-      >
-        Log out
-      </button>
-    </div>
-  );
-}

src/components/CommandPalette.jsx

@@ -0,0 +1,132 @@
+// Press ⌘K (Ctrl+K) anywhere: type a passage ("john 3:16") to go straight to it, or a few letters to
+// find a study, a note you wrote, a bookmark or highlight, a page, or to search the Bible's text.
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { useApp } from '../context/AppContext.js';
+import { themeVars } from './reader/readerThemes.js';
+import { SearchIcon } from './reader/icons.jsx';
+import { formatPassage, parsePassageRef } from '../utils/passageRef.js';
+import { searchMarks, searchNotes, searchProjects } from '../utils/personalSearch.js';
+import { loadProjectIndex } from '../utils/bibleUtils.jsx';
+import { loadProjectById } from '../utils/projectStorage.js';
+
+export default function CommandPalette({ onClose }) {
+  const {
+    readerTheme, authUser, authServerDown, projectIndex, readerBookmarks, readerTextHighlights, readerColorLabels,
+    jumpToReaderVerse, setCurrentPage, setProject, resumeProject, openNewProject, goStudies, openReadingPlans,
+    openBibleReader, requestReaderSearch, openBackup,
+  } = useApp();
+  const [query, setQuery] = useState('');
+  const [active, setActive] = useState(0);
+  const listRef = useRef(null);
+  const inputRef = useRef(null);
+  const opener = useRef(document.activeElement);
+
+  useEffect(() => {
+    inputRef.current?.focus();
+    const from = opener.current;
+    return () => { if (from instanceof HTMLElement && document.contains(from)) from.focus({ preventScroll: true }); };
+  }, []);
+
+  const items = useMemo(() => {
+    const out = [];
+    const q = query.trim();
+    const go = (fn) => () => { onClose(); fn(); };
+
+    // 1. A passage typed in
+    for (const r of parsePassageRef(q)) {
+      out.push({ group: 'Go to', label: formatPassage(r), hint: 'Open in the Bible', run: go(() => { jumpToReaderVerse(r.book, r.chapter, r.verse ?? 1); openBibleReader(); }) });
+    }
+
+    // 2. Pages and actions
+    const pages = [
+      ['Studies', 'My Studies', goStudies], ['Read Bible', 'The Bible reader', openBibleReader], ['Reading Plans', 'Plans and today’s reading', openReadingPlans],
+      ['New project', 'Start a Bible study', openNewProject], ['Settings', 'Account and preferences', () => setCurrentPage('settings')],
+      ['Back up my data', 'Download everything as a file', openBackup],
+    ];
+    const lower = q.toLowerCase();
+    for (const [label, hint, fn] of pages) {
+      if (!lower || label.toLowerCase().includes(lower)) out.push({ group: lower ? 'Pages' : 'Go to', label, hint, run: go(fn) });
+    }
+
+    if (q.length >= 2) {
+      // 3. Studies
+      for (const e of searchProjects(projectIndex, q)) {
+        out.push({ group: 'Studies', label: e.title, hint: e.chapterSummary, run: go(() => resumeProject(e.id)) });
+      }
+      // 4. Notes you wrote
+      const projects = loadProjectIndex().map((e) => loadProjectById(e.id)).filter(Boolean);
+      for (const h of searchNotes(projects, q)) {
+        out.push({
+          group: 'Your notes', label: `${h.ref} — ${h.projectTitle}`, hint: h.snippet,
+          run: go(() => {
+            const full = loadProjectById(h.projectId);
+            if (!full) return;
+            setProject({ ...full, selectedChunkId: h.chunkId });
+            setCurrentPage('study');
+          }),
+        });
+      }
+      // 5. Bookmarks and highlights
+      for (const m of searchMarks({ bookmarks: readerBookmarks, highlights: readerTextHighlights, labels: readerColorLabels ?? {} }, q)) {
+        out.push({
+          group: 'Bookmarks & highlights', label: `${m.bookName} ${m.chapter}:${m.verse}`, color: m.color,
+          hint: m.kind === 'highlight' ? `${m.label ? `${m.label}: ` : ''}${m.text ?? 'Highlight'}` : 'Bookmark',
+          run: go(() => { jumpToReaderVerse(m.book, m.chapter, m.verse); openBibleReader(); }),
+        });
+      }
+      // 6. The Bible's own text
+      out.push({ group: 'Search', label: `Search the Bible for “${q}”`, hint: 'Whole-Bible search in the reader', run: go(() => { requestReaderSearch(q); openBibleReader(); }) });
+    }
+    return out;
+  }, [query]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  useEffect(() => { setActive(0); }, [query]);
+  useEffect(() => { listRef.current?.querySelector('[aria-selected="true"]')?.scrollIntoView?.({ block: 'nearest' }); }, [active]);
+
+  const onKeyDown = (e) => {
+    if (e.key === 'ArrowDown') { e.preventDefault(); setActive((a) => Math.min(a + 1, items.length - 1)); }
+    else if (e.key === 'ArrowUp') { e.preventDefault(); setActive((a) => Math.max(a - 1, 0)); }
+    else if (e.key === 'Enter') { e.preventDefault(); items[active]?.run(); }
+    else if (e.key === 'Escape') { e.preventDefault(); e.stopPropagation(); onClose(); }
+    else if (e.key === 'Tab') { e.preventDefault(); } // the box and the list are one control
+  };
+
+  if (authUser === null && !authServerDown) return null; // the sign-in screen has nothing to search
+  let lastGroup = null;
+  return (
+    <div style={themeVars(readerTheme)} className="fixed inset-0 z-[90] flex items-start justify-center bg-black/40 px-3 pt-[12vh] font-sans" onMouseDown={(e) => { if (e.target === e.currentTarget) onClose(); }}>
+      <div role="dialog" aria-modal="true" aria-label="Search and go to" className="w-full max-w-xl overflow-hidden rounded-2xl border border-[var(--r-line)] bg-[var(--r-bar)] text-[var(--r-text)] shadow-2xl">
+        <div className="flex items-center gap-2 border-b border-[var(--r-line)] px-4 py-3">
+          <span className="text-[var(--r-sub)]"><SearchIcon /></span>
+          <input
+            ref={inputRef} value={query} onChange={(e) => setQuery(e.target.value)} onKeyDown={onKeyDown}
+            role="combobox" aria-expanded="true" aria-controls="palette-list" aria-autocomplete="list"
+            aria-activedescendant={items[active] ? `palette-item-${active}` : undefined}
+            placeholder="Go to a passage, or search your studies and notes…"
+            className="min-w-0 flex-1 bg-transparent text-base outline-none placeholder:text-[var(--r-sub)]"
+          />
+          <kbd className="hidden rounded border border-[var(--r-line)] px-1.5 py-0.5 text-[10px] text-[var(--r-sub)] sm:block">esc</kbd>
+        </div>
+        <ul id="palette-list" role="listbox" ref={listRef} className="max-h-[50vh] overflow-y-auto p-2">
+          {items.length === 0 && <li className="px-3 py-6 text-center text-sm text-[var(--r-sub)]">Nothing found. Try a book and chapter, like “romans 8”.</li>}
+          {items.map((item, i) => {
+            const header = item.group !== lastGroup ? item.group : null;
+            lastGroup = item.group;
+            return (
+              <li key={i} role="presentation">
+                {header && <p className="px-3 pb-1 pt-2 text-[11px] uppercase tracking-wide text-[var(--r-sub)]">{header}</p>}
+                <div id={`palette-item-${i}`} role="option" aria-selected={i === active} onMouseMove={() => setActive(i)} onClick={item.run}
+                  className={`flex cursor-pointer items-baseline gap-2 rounded-lg px-3 py-2 text-sm ${i === active ? 'bg-[var(--r-text)] text-[var(--r-bg)]' : ''}`}>
+                  {item.color && <span className="h-2.5 w-2.5 shrink-0 translate-y-px rounded-full border border-black/10" style={{ backgroundColor: item.color }} />}
+                  <span className="shrink-0 font-medium">{item.label}</span>
+                  {item.hint && <span className={`min-w-0 truncate text-xs ${i === active ? 'opacity-80' : 'text-[var(--r-sub)]'}`}>{item.hint}</span>}
+                </div>
+              </li>
+            );
+          })}
+        </ul>
+        <p className="border-t border-[var(--r-line)] px-4 py-2 text-[11px] text-[var(--r-sub)]">↑↓ to move · Enter to open · Esc to close</p>
+      </div>
+    </div>
+  );
+}

src/components/OfflineSave.jsx

@@ -0,0 +1,32 @@
+// The "Save for offline" control: a button, or progress with a Stop button while a download runs.
+import { canSaveOffline } from '../utils/offline.js';
+
+export function DownloadProgress({ job, onCancel }) {
+  const pct = job.total ? Math.round((job.done / job.total) * 100) : 0;
+  return (
+    <div role="status" className="rounded-xl border border-[var(--r-line)] px-3 py-2 text-xs">
+      <div className="mb-1.5 flex items-center justify-between gap-2">
+        <span>Saving {job.label}… {job.done} of {job.total}</span>
+        <button type="button" onClick={onCancel} className="text-[var(--r-accent)] hover:underline">Stop</button>
+      </div>
+      <div className="h-1 overflow-hidden rounded-full bg-[var(--r-line)]"><div className="h-full bg-[var(--r-accent)] transition-[width]" style={{ width: `${pct}%` }} /></div>
+    </div>
+  );
+}
+
+// One book of a translation.
+export function SaveBookOffline({ offline, translation, book, name }) {
+  if (!canSaveOffline(translation)) {
+    return <p className="mt-4 text-[11px] text-[var(--r-sub)]">Saving for offline works with the BSB and NET. The {translation}’s licence doesn’t allow it.</p>;
+  }
+  if (offline.job) return <div className="mt-4"><DownloadProgress job={offline.job} onCancel={offline.cancel} /></div>;
+  const saved = offline.isSaved(translation, book);
+  return (
+    <div className="mt-4 flex items-center justify-between gap-3 rounded-xl border border-[var(--r-line)] px-3 py-2 text-sm">
+      <span className={saved ? '' : 'text-[var(--r-sub)]'}>{saved ? `✓ ${name} (${translation}) is saved for offline` : `Read ${name} without a connection`}</span>
+      {!saved && (
+        <button type="button" onClick={() => offline.saveBook(translation, book, name)} className="shrink-0 rounded-full border border-[var(--r-line)] px-3 py-1 text-xs font-medium hover:bg-black/5">Save for offline</button>
+      )}
+    </div>
+  );
+}

src/components/OutlineDocument.jsx

@@ -0,0 +1,55 @@
+// An outline laid out for reading (not editing): numbered points, small type tags, notes, verse text. Used
+// by the read-only share page. Styled to match the printed / PDF page.
+import { labelFor } from '../utils/outlineLabels.js';
+import { kindLabel } from '../utils/outlineLabels.js';
+
+function Points({ nodes, depth }) {
+  return (
+    <ul className={depth === 0 ? '' : 'ml-6 sm:ml-10'}>
+      {nodes.map((n, i) => {
+        const main = depth === 0;
+        const mins = Number.isFinite(n.minutes) && n.minutes > 0;
+        return (
+          <li key={n.id} className={main ? 'mt-7 first:mt-5' : 'mt-2.5'}>
+            <div className="flex gap-3">
+              <span className={`shrink-0 font-semibold tabular-nums text-[var(--r-accent)] ${main ? 'w-9 text-lg' : 'w-8'}`}>{labelFor(depth, i)}</span>
+              <div className="min-w-0 flex-1">
+                <p className={`leading-snug ${main ? 'text-xl font-semibold' : 'text-[1.05rem]'}`}>
+                  {n.kind && <span className="mr-2 inline-block -translate-y-px rounded-full border border-[#e4b9a3] px-2 py-0.5 align-middle font-sans text-[10px] font-semibold uppercase tracking-widest text-[var(--r-accent)]">{kindLabel(n.kind)}</span>}
+                  {n.text.trim() || <span className="text-[var(--r-sub)]">(untitled)</span>}
+                  {n.ref && <span className="ml-2 whitespace-nowrap font-sans text-[0.8rem] font-normal text-[var(--r-sub)]">{n.ref}</span>}
+                  {mins && <span className="ml-2 whitespace-nowrap font-sans text-[0.8rem] font-normal text-[var(--r-sub)]">{n.minutes} min</span>}
+                </p>
+                {n.note.trim() && <p className="mt-1 whitespace-pre-line text-[0.95rem] italic leading-relaxed text-[var(--r-sub)]">{n.note.trim()}</p>}
+                {n.scripture?.text && (
+                  <blockquote className="mt-2 border-l-[3px] border-[#e4b9a3] pl-4 italic leading-relaxed">
+                    “{n.scripture.text}” <span className="whitespace-nowrap font-sans text-[0.8rem] not-italic text-[var(--r-sub)]">— {n.scripture.ref}</span>
+                  </blockquote>
+                )}
+                {n.attachments.length > 0 && (
+                  <p className="mt-1.5 font-sans text-[0.8rem] leading-relaxed text-[var(--r-sub)]">
+                    {n.attachments.map((a, k) => <span key={a.id || k}>{k > 0 && '  ·  '}{a.type === 'word' ? 'Word' : 'See'}: {a.label}{a.detail ? ` — ${a.detail}` : ''}</span>)}
+                  </p>
+                )}
+                {n.children.length > 0 && <Points nodes={n.children} depth={depth + 1} />}
+              </div>
+            </div>
+          </li>
+        );
+      })}
+    </ul>
+  );
+}
+
+export default function OutlineDocument({ title, meta, tree }) {
+  return (
+    <article className="mx-auto max-w-[44rem] px-5 pb-20 pt-10 font-serif text-[var(--r-text)] sm:px-8 sm:pt-14">
+      <p className="font-sans text-[11px] font-semibold uppercase tracking-[0.18em] text-[var(--r-accent)]">Outline</p>
+      <h1 className="mt-3 text-3xl font-semibold leading-tight tracking-tight sm:text-[2.1rem]">{title}</h1>
+      {meta && <p className="mt-2 font-sans text-sm text-[var(--r-sub)]">{meta}</p>}
+      <hr className="mb-1 mt-6 border-[var(--r-line)]" />
+      {tree.length > 0 ? <Points nodes={tree} depth={0} /> : <p className="mt-8 text-[var(--r-sub)]">Nothing in this outline yet.</p>}
+      <p className="mt-14 border-t border-[var(--r-line)] pt-4 text-center font-sans text-[11px] tracking-wide text-[var(--r-sub)]">Bible Study Project</p>
+    </article>
+  );
+}

src/components/ProjectHeader.jsx

@@ -1,228 +0,0 @@
-// Header for an open project (Setup and Study pages): navigation, Claude
-// prompts, pronunciation guide, export menu, share link, and save/sync status.
-import { useEffect, useRef, useState } from 'react';
-import { useApp } from '../context/AppContext.js';
-import { useShareLink } from '../hooks/useShareLink.js';
-import { buildClaudePrompt, buildPodcastPrompt } from '../utils/exportBuilders.js';
-import {
-  exportProjectDocx,
-  exportProjectHtml,
-  exportProjectMarkdown,
-  printProjectPdf,
-} from '../utils/projectExport.js';
-import AuthStatus from './AuthStatus.jsx';
-
-// loading: true while the Setup page is fetching a chapter.
-export default function ProjectHeader({ loading = false }) {
-  const {
-    authUser,
-    currentPage, setCurrentPage,
-    goHome,
-    project,
-    allChunks,
-    saveStatus, setSaveStatus,
-    syncStatus,
-    retrySync,
-  } = useApp();
-  // Only one dropdown open at a time: 'tools' | 'export' | 'share' | null
-  const [openMenu, setOpenMenu] = useState(null);
-  const toggleMenu = (name) => setOpenMenu((current) => (current === name ? null : name));
-  const closeMenu = () => setOpenMenu(null);
-  const menusRef = useRef(null);
-
-  // Close the open dropdown on an outside click or Escape.
-  useEffect(() => {
-    if (!openMenu) return;
-    const onPointerDown = (e) => {
-      if (!menusRef.current?.contains(e.target)) setOpenMenu(null);
-    };
-    const onKeyDown = (e) => { if (e.key === 'Escape') setOpenMenu(null); };
-    document.addEventListener('mousedown', onPointerDown);
-    document.addEventListener('keydown', onKeyDown);
-    return () => {
-      document.removeEventListener('mousedown', onPointerDown);
-      document.removeEventListener('keydown', onKeyDown);
-    };
-  }, [openMenu]);
-  const share = useShareLink(project?.id);
-
-  // Copies a prompt, then opens claude.ai so it can be pasted straight in.
-  const copyPrompt = (prompt) => {
-    navigator.clipboard.writeText(prompt).then(() => {
-      setSaveStatus('Copied! Opening Claude…');
-      window.setTimeout(() => setSaveStatus(''), 3000);
-      window.open('https://claude.ai/new', '_blank', 'noopener,noreferrer');
-    });
-  };
-
-  return (
-    <div className="flex flex-wrap items-center gap-3">
-      {currentPage !== 'home' && (
-        <div className="flex flex-wrap items-center gap-2">
-          {currentPage !== 'home' && (
-            <button
-              type="button"
-              onClick={goHome}
-              className="rounded-xl border border-white/15 bg-white/10 px-4 py-2 text-sm text-white transition hover:bg-white/15"
-            >
-              ← Home
-            </button>
-          )}
-          {project && currentPage === 'study' && (
-            <button
-              type="button"
-              onClick={() => setCurrentPage('setup')}
-              className="rounded-xl border border-white/15 bg-white/10 px-4 py-2 text-sm text-white transition hover:bg-white/15"
-            >
-              ← Back to Chunks
-            </button>
-          )}
-        </div>
-      )}
-      {project && (
-        <div ref={menusRef} className="flex flex-wrap items-center gap-3 border-white/10 sm:border-l sm:pl-3">
-          <div className="relative">
-            <button
-              type="button"
-              onClick={() => toggleMenu('tools')}
-              aria-expanded={openMenu === 'tools'}
-              disabled={allChunks.length === 0}
-              title={allChunks.length === 0 ? 'Add a chunk first to use these tools' : undefined}
-              className="flex items-center gap-1.5 rounded-md bg-violet-500 px-4 py-2 text-sm font-medium text-white shadow-sm transition hover:bg-violet-400 disabled:cursor-not-allowed disabled:bg-slate-500 disabled:opacity-60 disabled:shadow-none"
-            >
-              🧰 Tools
-            </button>
-            {openMenu === 'tools' && allChunks.length > 0 && (
-              <div className="absolute left-0 top-full z-20 mt-2 w-64 overflow-hidden rounded-2xl border border-slate-200 bg-white py-1.5 text-left shadow-lg">
-                <button
-                  type="button"
-                  onClick={() => { copyPrompt(buildClaudePrompt(project)); closeMenu(); }}
-                  title="Copies your study notes as a Claude prompt, then opens claude.ai so you can paste and go"
-                  className="block w-full px-4 py-2 text-left text-sm text-slate-700 hover:bg-slate-50"
-                >
-                  Study Guide → Claude ↗
-                </button>
-                <button
-                  type="button"
-                  onClick={() => { copyPrompt(buildPodcastPrompt(project, authUser?.podcastName)); closeMenu(); }}
-                  title="Copies a podcast script prompt for Claude, then opens claude.ai — set your show name in Account Settings first"
-                  className="block w-full px-4 py-2 text-left text-sm text-slate-700 hover:bg-slate-50"
-                >
-                  🎙 Podcast → Claude ↗
-                </button>
-                <button
-                  type="button"
-                  onClick={() => { setCurrentPage('pronunciation'); closeMenu(); }}
-                  title="Open the pronunciation guide — all Greek & Hebrew words with transliterations"
-                  className="block w-full px-4 py-2 text-left text-sm text-slate-700 hover:bg-slate-50"
-                >
-                  🗣 Pronunciation Guide
-                </button>
-              </div>
-            )}
-          </div>
-          <div className="relative">
-            <button
-              type="button"
-              onClick={() => toggleMenu('export')}
-              aria-expanded={openMenu === 'export'}
-              className="flex items-center gap-1.5 rounded-md bg-sky-500 px-4 py-2 text-sm font-medium text-white shadow-sm transition hover:bg-sky-400"
-            >
-              ⬇ Export
-            </button>
-            {openMenu === 'export' && (
-              <div className="absolute left-0 top-full z-20 mt-2 w-56 overflow-hidden rounded-2xl border border-slate-200 bg-white py-1.5 text-left shadow-lg">
-                <button type="button" onClick={() => { exportProjectHtml(project); closeMenu(); }}
-                  className="block w-full px-4 py-2 text-left text-sm text-slate-700 hover:bg-slate-50">
-                  Export HTML
-                </button>
-                <button type="button" onClick={() => { exportProjectDocx(project); closeMenu(); }}
-                  className="block w-full px-4 py-2 text-left text-sm text-slate-700 hover:bg-slate-50">
-                  Export DOCX
-                </button>
-                <button type="button" onClick={() => { exportProjectMarkdown(project); closeMenu(); }}
-                  title="Handy for Obsidian, Notion, or any Markdown-based notes app"
-                  className="block w-full px-4 py-2 text-left text-sm text-slate-700 hover:bg-slate-50">
-                  Export Markdown
-                </button>
-                <button type="button" onClick={() => { printProjectPdf(project); closeMenu(); }}
-                  title="Opens a print-friendly version in a new tab — choose 'Save as PDF' in the print dialog"
-                  className="block w-full px-4 py-2 text-left text-sm text-slate-700 hover:bg-slate-50">
-                  🖨 Print / Save PDF
-                </button>
-              </div>
-            )}
-          </div>
-          <div className="relative">
-            <button
-              type="button"
-              onClick={() => toggleMenu('share')}
-              aria-expanded={openMenu === 'share'}
-              className={`rounded-md px-4 py-2 text-sm font-medium shadow-sm transition ${share.shareToken ? 'bg-teal-600 text-white hover:bg-teal-500' : 'border border-slate-300 bg-white text-slate-700 hover:bg-slate-50'}`}
-            >
-              🔗 {share.shareToken ? 'Shared' : 'Share'}
-            </button>
-            {openMenu === 'share' && (
-              <div className="absolute right-0 top-full z-20 mt-2 w-80 rounded-2xl border border-slate-200 bg-white p-4 text-left shadow-lg">
-                <h3 className="text-sm font-semibold text-slate-900">Read-only share link</h3>
-                <p className="mt-1 text-xs text-slate-500">
-                  Anyone with this link can view (not edit) this study — no account needed. Good for a co-teacher
-                  or a listener who wants to follow along.
-                </p>
-                {share.shareToken ? (
-                  <div className="mt-3 space-y-2">
-                    <div className="flex items-center gap-2">
-                      <input
-                        readOnly
-                        value={share.shareUrl}
-                        onFocus={(e) => e.target.select()}
-                        className="w-full flex-1 truncate rounded-lg border border-slate-300 bg-slate-50 px-2 py-1.5 text-xs text-slate-600"
-                      />
-                      <button type="button" onClick={share.copy}
-                        className="shrink-0 rounded-lg bg-sky-500 px-3 py-1.5 text-xs font-semibold text-white hover:bg-sky-400">
-                        {share.shareCopied ? 'Copied!' : 'Copy'}
-                      </button>
-                    </div>
-                    <button type="button" onClick={share.revoke} disabled={share.shareBusy}
-                      className="w-full rounded-lg border border-rose-200 px-3 py-1.5 text-xs font-semibold text-rose-600 hover:bg-rose-50 disabled:cursor-not-allowed disabled:opacity-50">
-                      {share.shareBusy ? 'Revoking…' : 'Revoke link'}
-                    </button>
-                  </div>
-                ) : (
-                  <button type="button" onClick={share.enable} disabled={share.shareBusy}
-                    className="mt-3 w-full rounded-lg bg-teal-600 px-3 py-1.5 text-sm font-semibold text-white hover:bg-teal-500 disabled:cursor-not-allowed disabled:opacity-50">
-                    {share.shareBusy ? 'Enabling…' : 'Enable sharing'}
-                  </button>
-                )}
-              </div>
-            )}
-          </div>
-        </div>
-      )}
-      <div className="text-right text-sm text-slate-300 space-y-0.5">
-        {loading ? (
-          <span>Loading…</span>
-        ) : saveStatus ? (
-          <span className="text-emerald-300">{saveStatus}</span>
-        ) : (
-          <span>&nbsp;</span>
-        )}
-        {syncStatus === 'syncing' && <div className="text-xs text-slate-400">Syncing…</div>}
-        {syncStatus === 'synced' && <div className="text-xs text-emerald-400">Synced ✓</div>}
-        {syncStatus === 'error' && (
-          <div className="flex items-center gap-2">
-            <span className="text-xs text-rose-400">⚠ Sync failed</span>
-            <button
-              type="button"
-              onClick={retrySync}
-              className="text-xs text-slate-300 underline hover:text-white"
-            >
-              Retry
-            </button>
-          </div>
-        )}
-      </div>
-      <AuthStatus />
-    </div>
-  );
-}

src/components/ResetPasswordForm.jsx

@@ -0,0 +1,82 @@
+// "Forgot password": ask for a code (it is sent to the account's notification topic), then choose a new
+// password with it. Shown on the sign-in page in place of the sign-in form.
+import { useState } from 'react';
+import { requestPasswordReset, resetPassword } from '../syncService.js';
+
+const input = 'mt-1 block w-full rounded-xl border border-[var(--r-line)] bg-[var(--r-bg)] px-3 py-2.5 text-sm text-[var(--r-text)]';
+const primary = 'w-full rounded-full bg-[var(--r-accent)] px-4 py-2.5 text-sm font-medium text-[var(--r-on)] transition hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-50';
+
+export default function ResetPasswordForm({ initialEmail = '', onDone, onBack }) {
+  const [step, setStep] = useState('ask'); // 'ask' | 'code' | 'done'
+  const [email, setEmail] = useState(initialEmail);
+  const [form, setForm] = useState({ code: '', password: '', token: '' });
+  const [message, setMessage] = useState('');
+  const [error, setError] = useState('');
+  const [busy, setBusy] = useState(false);
+
+  const ask = async (e) => {
+    e.preventDefault();
+    setError(''); setBusy(true);
+    const result = await requestPasswordReset(email.trim());
+    setBusy(false);
+    if (!result.ok) { setError(result.error ?? 'Something went wrong.'); return; }
+    setMessage(result.data?.message ?? 'If that account has a notification topic, a code was sent.');
+    setStep('code');
+  };
+
+  const reset = async (e) => {
+    e.preventDefault();
+    setError(''); setBusy(true);
+    const result = await resetPassword({ email: email.trim(), code: form.code, newPassword: form.password, token: form.token.trim() || undefined });
+    setBusy(false);
+    if (!result.ok) { setError(result.error ?? 'Something went wrong.'); return; }
+    setStep('done');
+  };
+
+  if (step === 'done') {
+    return (
+      <div>
+        <h2 className="text-xl font-medium">Password changed</h2>
+        <p className="mt-2 text-sm text-[var(--r-sub)]">You’ve been signed out everywhere. Sign in with your new password.</p>
+        <button type="button" onClick={onDone} className={`mt-6 ${primary}`}>Back to sign in</button>
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      <h2 className="text-xl font-medium">Reset your password</h2>
+      {step === 'ask' ? (
+        <form onSubmit={ask} className="mt-4 space-y-4">
+          <p className="text-sm text-[var(--r-sub)]">We’ll send a one-time code to the notification topic you set up for reading reminders (ntfy).</p>
+          <label className="block text-sm">Email
+            <input type="email" required autoComplete="email" value={email} onChange={(e) => setEmail(e.target.value)} className={input} />
+          </label>
+          {error && <p role="alert" className="text-sm text-[var(--r-danger,#b42318)]">{error}</p>}
+          <button type="submit" disabled={busy} className={primary}>{busy ? 'Please wait…' : 'Send me a code'}</button>
+          <button type="button" onClick={() => { setStep('code'); setMessage(''); }} className="block w-full text-center text-sm text-[var(--r-sub)] underline hover:text-[var(--r-text)]">I already have a code</button>
+        </form>
+      ) : (
+        <form onSubmit={reset} className="mt-4 space-y-4">
+          {message && <p role="status" className="text-sm text-[var(--r-sub)]">{message}</p>}
+          <label className="block text-sm">Email
+            <input type="email" required value={email} onChange={(e) => setEmail(e.target.value)} className={input} />
+          </label>
+          <label className="block text-sm">Code
+            <input type="text" required autoFocus autoComplete="one-time-code" value={form.code} onChange={(e) => setForm((f) => ({ ...f, code: e.target.value }))} className={`${input} text-center font-mono tracking-widest`} placeholder="ABCD2345" />
+          </label>
+          <label className="block text-sm">New password
+            <input type="password" required minLength={8} autoComplete="new-password" value={form.password} onChange={(e) => setForm((f) => ({ ...f, password: e.target.value }))} className={input} />
+            <span className="mt-1 block text-xs text-[var(--r-sub)]">At least 8 characters.</span>
+          </label>
+          <label className="block text-sm">Authenticator code <span className="text-xs text-[var(--r-sub)]">(only if you use two-factor sign-in)</span>
+            <input type="text" inputMode="numeric" value={form.token} onChange={(e) => setForm((f) => ({ ...f, token: e.target.value }))} className={input} placeholder="123456" />
+          </label>
+          {error && <p role="alert" className="text-sm text-[var(--r-danger,#b42318)]">{error}</p>}
+          <button type="submit" disabled={busy} className={primary}>{busy ? 'Please wait…' : 'Change password'}</button>
+        </form>
+      )}
+      <button type="button" onClick={onBack} className="mt-4 w-full text-center text-sm text-[var(--r-sub)] underline hover:text-[var(--r-text)]">Back to sign in</button>
+    </div>
+  );
+}

src/components/ResetPasswordForm.test.jsx

@@ -0,0 +1,51 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { vi, test, expect, beforeEach } from 'vitest';
+
+vi.mock('../syncService.js', () => ({ requestPasswordReset: vi.fn(), resetPassword: vi.fn() }));
+import ResetPasswordForm from './ResetPasswordForm.jsx';
+import { requestPasswordReset, resetPassword } from '../syncService.js';
+
+beforeEach(() => {
+  vi.clearAllMocks();
+  requestPasswordReset.mockResolvedValue({ ok: true, data: { message: 'A code was sent if you have a topic.' } });
+  resetPassword.mockResolvedValue({ ok: true, data: { ok: true } });
+});
+
+test('asks for a code, then sets the new password with it', async () => {
+  const user = userEvent.setup();
+  const onDone = vi.fn();
+  render(<ResetPasswordForm initialEmail="me@x.co" onDone={onDone} onBack={() => {}} />);
+  await user.click(screen.getByRole('button', { name: /send me a code/i }));
+  expect(requestPasswordReset).toHaveBeenCalledWith('me@x.co');
+  expect(await screen.findByText(/A code was sent/)).toBeInTheDocument();
+
+  await user.type(screen.getByLabelText(/^Code/), 'ABCD2345');
+  await user.type(screen.getByLabelText(/^New password/), 'brand-new-pass');
+  await user.click(screen.getByRole('button', { name: /change password/i }));
+  expect(resetPassword).toHaveBeenCalledWith({ email: 'me@x.co', code: 'ABCD2345', newPassword: 'brand-new-pass', token: undefined });
+  await user.click(await screen.findByRole('button', { name: /back to sign in/i }));
+  expect(onDone).toHaveBeenCalled();
+});
+
+test('a wrong code shows the server\'s message and stays on the form', async () => {
+  resetPassword.mockResolvedValue({ ok: false, error: 'That code is wrong or has expired. Ask for a new one.' });
+  const user = userEvent.setup();
+  render(<ResetPasswordForm initialEmail="me@x.co" onDone={() => {}} onBack={() => {}} />);
+  await user.click(screen.getByRole('button', { name: /i already have a code/i }));
+  await user.type(screen.getByLabelText(/^Code/), 'WRONG123');
+  await user.type(screen.getByLabelText(/^New password/), 'brand-new-pass');
+  await user.click(screen.getByRole('button', { name: /change password/i }));
+  expect(await screen.findByRole('alert')).toHaveTextContent(/wrong or has expired/);
+});
+
+test('an authenticator code is passed along when one is typed', async () => {
+  const user = userEvent.setup();
+  render(<ResetPasswordForm initialEmail="me@x.co" onDone={() => {}} onBack={() => {}} />);
+  await user.click(screen.getByRole('button', { name: /i already have a code/i }));
+  await user.type(screen.getByLabelText(/^Code/), 'ABCD2345');
+  await user.type(screen.getByLabelText(/^New password/), 'brand-new-pass');
+  await user.type(screen.getByLabelText(/Authenticator code/), '123456');
+  await user.click(screen.getByRole('button', { name: /change password/i }));
+  expect(resetPassword).toHaveBeenCalledWith(expect.objectContaining({ token: '123456' }));
+});

src/components/ShareOutlineSheet.jsx

@@ -0,0 +1,66 @@
+// Share an outline: a read-only link anyone can open (no account), or the plain text.
+import { useState } from 'react';
+import Sheet from './reader/Sheet.jsx';
+import { useToast } from './Toasts.jsx';
+import { useOutlineShareLink } from '../hooks/useOutlineShareLink.js';
+import { shareOutline } from '../utils/outlineExport.js';
+
+const btn = 'rounded-xl border border-[var(--r-line)] px-3.5 py-2 text-sm hover:bg-black/5 disabled:opacity-50';
+
+export default function ShareOutlineSheet({ open, onClose, projectId, outline }) {
+  const { toast } = useToast();
+  const link = useOutlineShareLink(projectId, open);
+  const [copied, setCopied] = useState(false);
+
+  const copyLink = async () => {
+    try { await navigator.clipboard.writeText(link.url); setCopied(true); window.setTimeout(() => setCopied(false), 2000); } catch { toast('Couldn’t copy. Select the link and copy it.', { tone: 'error' }); }
+  };
+  // The phone/computer share sheet, with the link (falls back to copying it)
+  const shareLink = async () => {
+    if (navigator.share) {
+      try { await navigator.share({ title: `${outline.title} — Outline`, url: link.url }); return; } catch (err) { if (err?.name === 'AbortError') return; }
+    }
+    copyLink();
+  };
+  const shareText = async () => {
+    const result = await shareOutline(outline);
+    if (result === 'copied') toast('Outline copied. Paste it into a message or email.');
+    else if (result === 'failed') toast('Couldn’t share or copy the outline.', { tone: 'error' });
+  };
+
+  return (
+    <Sheet open={open} onClose={onClose} title="Share this outline">
+      <h3 className="text-sm font-medium">Read-only link</h3>
+      <p className="mb-3 mt-1 text-xs text-[var(--r-sub)]">
+        Anyone with the link can read this study’s outlines (the whole-study one and each chunk’s), and print them. They can’t edit anything, and they can’t see your notes or scripts. No account needed.
+      </p>
+      {link.state === 'loading' && <p className="text-sm text-[var(--r-sub)]">Checking…</p>}
+      {link.state === 'unavailable' && (
+        <p className="rounded-xl border border-[var(--r-line)] px-3 py-2 text-sm text-[var(--r-sub)]">Links need your account and a connection to the server. You can still share the text below.</p>
+      )}
+      {link.state === 'ready' && (link.token ? (
+        <div className="space-y-2">
+          <div className="flex items-center gap-2">
+            <input readOnly aria-label="Outline link" value={link.url} onFocus={(e) => e.target.select()}
+              className="min-w-0 flex-1 truncate rounded-lg border border-[var(--r-line)] bg-[var(--r-bg)] px-3 py-2 text-xs text-[var(--r-sub)]" />
+            <button type="button" onClick={copyLink} className="shrink-0 rounded-lg bg-[var(--r-accent)] px-4 py-2 text-xs font-medium text-[var(--r-on)]">{copied ? 'Copied!' : 'Copy'}</button>
+          </div>
+          <div className="flex flex-wrap items-center gap-3">
+            <button type="button" onClick={shareLink} className={btn}>Share link…</button>
+            <button type="button" onClick={link.turnOff} disabled={link.busy} className="text-xs text-[var(--r-danger,#b42318)] hover:underline">{link.busy ? 'Turning off…' : 'Turn off link'}</button>
+          </div>
+          <p className="text-[11px] text-[var(--r-sub)]">People see the version that last synced to your account, and it updates as you edit. Turning the link off stops it working right away.</p>
+        </div>
+      ) : (
+        <button type="button" onClick={link.create} disabled={link.busy} className="rounded-xl bg-[var(--r-accent)] px-4 py-2 text-sm font-medium text-[var(--r-on)] hover:opacity-90 disabled:opacity-50">{link.busy ? 'Creating…' : 'Create read-only link'}</button>
+      ))}
+      {link.error && <p role="alert" className="mt-2 text-xs text-[var(--r-danger,#b42318)]">{link.error}</p>}
+
+      <div className="mt-5 border-t border-[var(--r-line)] pt-4">
+        <h3 className="text-sm font-medium">Or send the text</h3>
+        <p className="mb-2 mt-1 text-xs text-[var(--r-sub)]">The outline you’re looking at, as plain text, to paste into a message or email.</p>
+        <button type="button" onClick={shareText} className={btn}>Share as text</button>
+      </div>
+    </Sheet>
+  );
+}

src/components/SharedOutlineView.jsx

@@ -0,0 +1,70 @@
+// What someone sees when they open a read-only outline link: a calm page with the outline, a switcher
+// when there is more than one, and Print / PDF. Nothing is editable.
+import { useEffect, useState } from 'react';
+import { getSharedOutline } from '../syncService.js';
+import { themeVars } from './reader/readerThemes.js';
+import OutlineDocument from './OutlineDocument.jsx';
+import { printOutline } from '../utils/outlineExport.js';
+import { flatten } from '../utils/outline.js';
+
+const pill = (active) => `shrink-0 rounded-full px-3.5 py-1.5 text-sm transition ${active ? 'bg-[var(--r-text)] text-[var(--r-bg)]' : 'text-[var(--r-sub)] hover:bg-black/5'}`;
+
+function Frame({ children }) {
+  return <div className="min-h-dvh bg-[var(--r-bg)] font-sans text-[var(--r-text)]" style={themeVars('paper')}>{children}</div>;
+}
+
+export default function SharedOutlineView({ token }) {
+  const [data, setData] = useState(null);
+  const [error, setError] = useState('');
+  const [scope, setScope] = useState('study');
+
+  useEffect(() => {
+    let active = true;
+    getSharedOutline(token).then((result) => {
+      if (!active) return;
+      if (result.ok) { setData(result.data); setScope(result.data.outlines[0]?.scope ?? 'study'); } else setError(result.error ?? 'This outline link is invalid or has been turned off.');
+    });
+    return () => { active = false; };
+  }, [token]);
+
+  useEffect(() => { if (data?.title) document.title = `${data.title} — Outline`; }, [data]);
+
+  if (error) {
+    return (
+      <Frame>
+        <div className="flex min-h-dvh items-center justify-center px-5">
+          <div className="max-w-sm text-center">
+            <p className="text-[11px] font-semibold uppercase tracking-[0.18em] text-[var(--r-accent)]">Bible Study Project</p>
+            <p className="mt-4 text-base">{error}</p>
+          </div>
+        </div>
+      </Frame>
+    );
+  }
+  if (!data) return <Frame><p className="flex min-h-dvh items-center justify-center text-sm text-[var(--r-sub)]">Loading outline…</p></Frame>;
+
+  const current = data.outlines.find((o) => o.scope === scope) ?? data.outlines[0];
+  const title = current && current.scope !== 'study' ? `${data.title} — ${current.label}` : data.title;
+  const minutes = current ? flatten(current.tree).reduce((sum, { node }) => sum + (Number.isFinite(node.minutes) ? node.minutes : 0), 0) : 0;
+  const meta = current ? [current.scope === 'study' ? data.translation : `${current.label} · ${data.translation}`, minutes > 0 ? `About ${minutes} minute${minutes === 1 ? '' : 's'}` : ''].filter(Boolean).join('  ·  ') : '';
+  const outline = current ? { title, subtitle: current.scope === 'study' ? data.translation : `${current.label} · ${data.translation}`, tree: current.tree } : null;
+
+  return (
+    <Frame>
+      <header className="sticky top-0 z-10 border-b border-[var(--r-line)] bg-[var(--r-bar)]/95 backdrop-blur">
+        <div className="mx-auto flex max-w-[44rem] flex-wrap items-center gap-x-3 gap-y-2 px-5 py-2.5 sm:px-8">
+          <span className="shrink-0 text-sm font-medium">Bible Study</span>
+          {data.outlines.length > 1 ? (
+            <nav aria-label="Outline" className="order-last flex w-full min-w-0 gap-1 overflow-x-auto sm:order-none sm:w-auto sm:flex-1">
+              {data.outlines.map((o) => (
+                <button key={o.scope} type="button" onClick={() => setScope(o.scope)} aria-current={current?.scope === o.scope ? 'true' : undefined} className={pill(current?.scope === o.scope)}>{o.label}</button>
+              ))}
+            </nav>
+          ) : <span className="flex-1" />}
+          {outline && <button type="button" onClick={() => printOutline(outline)} className="ml-auto shrink-0 sm:ml-0 rounded-full border border-[var(--r-line)] px-3.5 py-1.5 text-sm hover:bg-black/5">Print / PDF</button>}
+        </div>
+      </header>
+      {current ? <OutlineDocument title={title} meta={meta} tree={current.tree} /> : <p className="p-10 text-center text-sm text-[var(--r-sub)]">This study doesn’t have an outline yet.</p>}
+    </Frame>
+  );
+}

src/components/ShortcutsHelp.jsx

@@ -0,0 +1,65 @@
+// The "?" cheat sheet: every keyboard shortcut for the page you are on, plus the ones that work everywhere.
+import { useEffect, useRef } from 'react';
+import { useApp } from '../context/AppContext.js';
+import { themeVars } from './reader/readerThemes.js';
+
+const GLOBAL = [
+  ['⌘K  /  Ctrl K', 'Search and go to a passage'],
+  ['?', 'Show this list'],
+  ['Esc', 'Close whatever is open'],
+];
+const BY_PAGE = {
+  reader: [
+    ['← →', 'Previous / next chapter'],
+    ['/', 'Search this chapter or the whole Bible'],
+    ['G', 'Pick a book and chapter'],
+    ['B', 'Bookmark the selected verse'],
+    ['C', 'Compare translations'],
+    ['H', 'Your highlights'],
+    [',', 'Reading settings'],
+    ['F', 'Hide or show the controls'],
+  ],
+  study: [
+    ['← →', 'Previous / next chunk'],
+  ],
+};
+
+export default function ShortcutsHelp({ onClose }) {
+  const { readerTheme, currentPage } = useApp();
+  const closeRef = useRef(null);
+  useEffect(() => {
+    const from = document.activeElement;
+    closeRef.current?.focus();
+    const onKey = (e) => { if (e.key === 'Escape' || e.key === '?') { e.preventDefault(); e.stopPropagation(); onClose(); } };
+    document.addEventListener('keydown', onKey, true);
+    return () => { document.removeEventListener('keydown', onKey, true); if (from instanceof HTMLElement && document.contains(from)) from.focus({ preventScroll: true }); };
+  }, [onClose]);
+
+  const page = BY_PAGE[currentPage] ?? [];
+  const section = (title, rows) => (
+    <div className="mb-4 last:mb-0">
+      <h3 className="mb-1.5 text-[11px] uppercase tracking-wide text-[var(--r-sub)]">{title}</h3>
+      <dl className="space-y-1.5">
+        {rows.map(([keys, what]) => (
+          <div key={keys} className="flex items-center justify-between gap-4 text-sm">
+            <dt><kbd className="rounded-md border border-[var(--r-line)] bg-[var(--r-bg)] px-2 py-0.5 font-mono text-xs">{keys}</kbd></dt>
+            <dd className="text-right text-[var(--r-sub)]">{what}</dd>
+          </div>
+        ))}
+      </dl>
+    </div>
+  );
+
+  return (
+    <div style={themeVars(readerTheme)} className="fixed inset-0 z-[90] flex items-center justify-center bg-black/40 px-3 font-sans" onMouseDown={(e) => { if (e.target === e.currentTarget) onClose(); }}>
+      <div role="dialog" aria-modal="true" aria-label="Keyboard shortcuts" className="max-h-[80vh] w-full max-w-sm overflow-y-auto rounded-2xl border border-[var(--r-line)] bg-[var(--r-bar)] p-5 text-[var(--r-text)] shadow-2xl">
+        <div className="mb-3 flex items-center justify-between">
+          <h2 className="text-base font-medium">Keyboard shortcuts</h2>
+          <button ref={closeRef} type="button" onClick={onClose} className="rounded-lg px-2 py-1 text-sm text-[var(--r-sub)] hover:bg-black/5">Close</button>
+        </div>
+        {page.length > 0 && section(currentPage === 'reader' ? 'In the Bible' : 'In this study', page)}
+        {section('Everywhere', GLOBAL)}
+      </div>
+    </div>
+  );
+}

src/components/StudyPanel.jsx

@@ -0,0 +1,174 @@
+// Inline study panel shown under a verse in the Reader: commentary from several
+// public-domain / open sources, plus the people, places and events tied to the verse.
+import { useState } from 'react';
+import { useApp } from '../context/AppContext.js';
+import { useIqAvailable } from '../hooks/useIq.js';
+import IqCommentary from './iq/IqCommentary.jsx';
+import {
+  COMMENTARIES, loadCommentary, loadTheographic, loadPerson, pickCommentaryEntry, useAsync,
+} from '../hooks/useVerseStudy.js';
+
+export function CommentaryTab({ book, chapter, verse }) {
+  const iq = useIqAvailable();
+  const [more, setMore] = useState(() => { try { return localStorage.getItem('iq-commentary-mode') === '1'; } catch { return false; } });
+  const setMode = (on) => { setMore(on); try { localStorage.setItem('iq-commentary-mode', on ? '1' : '0'); } catch { /* storage unavailable */ } };
+  const chip = (on) => `rounded-full border px-2.5 py-0.5 text-[11px] ${on ? 'border-[var(--r-text,#334155)] bg-[var(--r-text,#334155)] text-[var(--r-bg,#ffffff)]' : 'border-[var(--r-line,#cbd5e1)] text-[var(--r-sub,#64748b)]'}`;
+  return (
+    <div>
+      {iq && (
+        <div className="mb-2 flex gap-1.5" role="group" aria-label="Commentary library">
+          <button type="button" onClick={() => setMode(false)} aria-pressed={!more} className={chip(!more)}>Classic</button>
+          <button type="button" onClick={() => setMode(true)} aria-pressed={more} className={chip(more)}>More sources</button>
+        </div>
+      )}
+      {iq && more ? <IqCommentary book={book} chapter={chapter} verse={verse} /> : <ClassicCommentary book={book} chapter={chapter} verse={verse} />}
+    </div>
+  );
+}
+
+function ClassicCommentary({ book, chapter, verse }) {
+  // The chosen commentary is a synced preference, shared with the Study stage
+  const { readerCommentary: sourceId, setReaderCommentary: changeSource } = useApp();
+  const source = COMMENTARIES.find((c) => c.id === sourceId) ?? COMMENTARIES[0];
+  const { status, data } = useAsync(() => loadCommentary(source.id, book, chapter), [source.id, book, chapter]);
+  const entry = pickCommentaryEntry(data, verse);
+
+  return (
+    <div>
+      <label className="text-xs text-[var(--r-sub,#64748b)]">
+        Commentary{' '}
+        <select value={source.id} onChange={(e) => changeSource(e.target.value)}
+          className="rounded-lg border border-[var(--r-line,#cbd5e1)] bg-[var(--r-bg,#ffffff)] px-2 py-1 text-xs">
+          {COMMENTARIES.map((c) => <option key={c.id} value={c.id}>{c.name}</option>)}
+        </select>
+      </label>
+      <div className="mt-2">
+        {status === 'loading' && <p className="text-xs text-[var(--r-sub,#64748b)]">Loading…</p>}
+        {status === 'empty' && <p className="text-xs text-[var(--r-sub,#64748b)]">{source.name} has no notes for this chapter.</p>}
+        {status === 'ready' && !entry && <p className="text-xs text-[var(--r-sub,#64748b)]">No notes at or before this verse in {source.name}.</p>}
+        {status === 'ready' && entry && (
+          <>
+            {entry.number !== verse && (
+              <p className="mb-1 text-[11px] text-[var(--r-sub,#64748b)]">Notes on the passage starting at verse {entry.number}.</p>
+            )}
+            <div className="max-h-96 overflow-y-auto whitespace-pre-line rounded-xl bg-[var(--r-bg,#ffffff)] p-3 text-[13px] leading-relaxed text-[var(--r-text,#334155)]">
+              {entry.text}
+            </div>
+          </>
+        )}
+      </div>
+      <p className="mt-2 text-[10px] text-[var(--r-sub,#64748b)]">{source.credit}</p>
+    </div>
+  );
+}
+
+function PersonDetails({ id }) {
+  const { status, data } = useAsync(() => loadPerson(id), [id]);
+  if (status === 'loading') return <p className="mt-1 text-xs text-[var(--r-sub,#64748b)]">Loading…</p>;
+  if (status === 'empty') return <p className="mt-1 text-xs text-[var(--r-sub,#64748b)]">No details available.</p>;
+  const era = (y) => `${Math.abs(y)}${y < 0 ? ' BC' : ' AD'}`;
+  return (
+    <div className="mt-1 space-y-1 text-xs leading-relaxed text-[var(--r-sub,#64748b)]">
+      {(data.description ?? []).map((d, i) => <p key={i}>{d}</p>)}
+      {!data.description?.length && <p>No description available.</p>}
+      {data.minYear != null && (
+        <p className="text-[var(--r-sub,#64748b)]">
+          Lived approx. {era(data.minYear)}{data.maxYear != null && data.maxYear !== data.minYear ? ` – ${era(data.maxYear)}` : ''}
+        </p>
+      )}
+    </div>
+  );
+}
+
+export function PersonCard({ person }) {
+  const [open, setOpen] = useState(false);
+  return (
+    <li className="rounded-xl bg-[var(--r-bg,#ffffff)] px-3 py-2">
+      <button type="button" onClick={() => setOpen((o) => !o)} className="w-full text-left text-sm font-semibold text-[var(--r-text,#334155)]">
+        {person.name} <span className="text-xs font-normal text-[var(--r-sub,#64748b)]">{open ? '▾' : '▸'}</span>
+      </button>
+      {open && <PersonDetails id={person.id} />}
+    </li>
+  );
+}
+
+export function PeoplePlacesTab({ book, chapter, verse }) {
+  const { status, data } = useAsync(() => loadTheographic(book, chapter), [book, chapter]);
+  if (status === 'loading') return <p className="text-xs text-[var(--r-sub,#64748b)]">Loading…</p>;
+  if (status === 'empty') return <p className="text-xs text-[var(--r-sub,#64748b)]">No people or places data for this chapter.</p>;
+  const here = (list) => list.filter((x) => x.verses?.includes(verse));
+  // Theographic lists some places twice (variant spellings) — collapse by name.
+  const places = [...new Map(here(data.places).map((p) => [p.name, p])).values()];
+  const people = here(data.people);
+  const events = here(data.events);
+  if (!people.length && !places.length && !events.length) {
+    return <p className="text-xs text-[var(--r-sub,#64748b)]">Nothing tagged on verse {verse}.</p>;
+  }
+  return (
+    <div className="space-y-3">
+      {people.length > 0 && (
+        <div>
+          <p className="mb-1 text-xs font-semibold uppercase tracking-wide text-[var(--r-sub,#64748b)]">People</p>
+          <ul className="space-y-1">{people.map((p) => <PersonCard key={p.id} person={p} />)}</ul>
+        </div>
+      )}
+      {places.length > 0 && (
+        <div>
+          <p className="mb-1 text-xs font-semibold uppercase tracking-wide text-[var(--r-sub,#64748b)]">Places</p>
+          <ul className="space-y-1">
+            {places.map((p) => (
+              <li key={p.id} className="flex items-center justify-between gap-2 rounded-xl bg-[var(--r-bg,#ffffff)] px-3 py-2 text-sm text-[var(--r-text,#334155)]">
+                <span>{p.name}{p.featureType && <span className="ml-1 text-xs text-[var(--r-sub,#64748b)]">{p.featureType}</span>}</span>
+                {p.latitude != null && p.longitude != null && (
+                  <a href={`https://www.openstreetmap.org/?mlat=${p.latitude}&mlon=${p.longitude}#map=8/${p.latitude}/${p.longitude}`}
+                    target="_blank" rel="noopener noreferrer" className="text-xs font-semibold text-sky-600 hover:underline">
+                    Map ↗
+                  </a>
+                )}
+              </li>
+            ))}
+          </ul>
+        </div>
+      )}
+      {events.length > 0 && (
+        <div>
+          <p className="mb-1 text-xs font-semibold uppercase tracking-wide text-[var(--r-sub,#64748b)]">Events</p>
+          <ul className="space-y-1">
+            {events.map((e) => (
+              <li key={e.id} className="rounded-xl bg-[var(--r-bg,#ffffff)] px-3 py-2 text-sm text-[var(--r-text,#334155)]">
+                {e.name}{e.startDate && <span className="ml-1 text-xs text-[var(--r-sub,#64748b)]">approx. AD {e.startDate}</span>}
+              </li>
+            ))}
+          </ul>
+        </div>
+      )}
+      <p className="text-[10px] text-[var(--r-sub,#64748b)]">
+        People, places and events: Theographic Bible Metadata, licensed CC BY-SA 4.0.
+      </p>
+    </div>
+  );
+}
+
+export default function StudyPanel({ book, chapter, verse, onClose }) {
+  const [tab, setTab] = useState('commentary');
+  const tabBtn = (id, label) => (
+    <button type="button" onClick={() => setTab(id)}
+      className={`rounded-lg px-3 py-1 text-xs font-semibold ${tab === id ? 'bg-slate-900 text-white' : 'bg-[var(--r-bg,#ffffff)] text-[var(--r-sub,#64748b)] hover:bg-slate-100'}`}>
+      {label}
+    </button>
+  );
+  return (
+    <div className="mt-2 mb-1 ml-6 rounded-2xl border border-indigo-100 bg-indigo-50 p-3">
+      <div className="mb-2 flex items-center justify-between gap-2">
+        <div className="flex gap-1">
+          {tabBtn('commentary', 'Commentary')}
+          {tabBtn('people', 'People & Places')}
+        </div>
+        <button type="button" onClick={onClose} className="rounded p-1 text-xs text-[var(--r-sub,#64748b)] hover:bg-[var(--r-bg,#ffffff)]" title="Close">✕</button>
+      </div>
+      {tab === 'commentary'
+        ? <CommentaryTab book={book} chapter={chapter} verse={verse} />
+        : <PeoplePlacesTab book={book} chapter={chapter} verse={verse} />}
+    </div>
+  );
+}

src/components/Toasts.jsx

@@ -0,0 +1,62 @@
+// App-wide toasts: short messages at the bottom of the screen, optionally with one
+// action button (usually "Undo"). Used instead of alert()/confirm() so a slip is
+// reversible and nothing blocks the page.
+import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
+import { themeVars } from './reader/readerThemes.js';
+
+const ToastContext = createContext(null);
+
+// toast(message, { action: { label, onClick }, ms, tone: 'info' | 'error' }) -> id
+// Outside a provider (a page rendered on its own in a test) it quietly does nothing.
+const NOOP = { toast: () => 0, dismiss: () => {}, setTheme: () => {} };
+export const useToast = () => useContext(ToastContext) ?? NOOP;
+
+let nextId = 1;
+
+export function ToastProvider({ children }) {
+  const [toasts, setToasts] = useState([]);
+  const [theme, setTheme] = useState('paper'); // set by the app so toasts match the reading theme
+  const timers = useRef(new Map());
+
+  const dismiss = useCallback((id) => {
+    window.clearTimeout(timers.current.get(id));
+    timers.current.delete(id);
+    setToasts((list) => list.filter((t) => t.id !== id));
+  }, []);
+
+  const toast = useCallback((message, { action, ms, tone = 'info' } = {}) => {
+    const id = nextId++;
+    // Messages with an action stay long enough to read and react to.
+    const duration = ms ?? (action ? 8000 : tone === 'error' ? 6000 : 3500);
+    setToasts((list) => [...list.slice(-2), { id, message, action, tone }]);
+    timers.current.set(id, window.setTimeout(() => dismiss(id), duration));
+    return id;
+  }, [dismiss]);
+
+  useEffect(() => {
+    const live = timers.current;
+    return () => live.forEach((t) => window.clearTimeout(t));
+  }, []);
+
+  const value = useMemo(() => ({ toast, dismiss, setTheme }), [toast, dismiss]);
+
+  return (
+    <ToastContext.Provider value={value}>
+      {children}
+      <div style={themeVars(theme)} className="pointer-events-none fixed inset-x-0 bottom-0 z-[100] flex flex-col items-center gap-2 px-4 pb-[calc(1rem+env(safe-area-inset-bottom,0px))] font-sans">
+        {toasts.map((t) => (
+          <div key={t.id} role={t.tone === 'error' ? 'alert' : 'status'}
+            className={`pointer-events-auto flex max-w-md items-center gap-3 rounded-full px-4 py-2.5 text-sm shadow-lg ${t.tone === 'error' ? 'bg-[var(--r-danger)] text-[var(--r-bg)]' : 'bg-[var(--r-text)] text-[var(--r-bg)]'}`}>
+            <span>{t.message}</span>
+            {t.action && (
+              <button type="button" onClick={() => { t.action.onClick(); dismiss(t.id); }}
+                className="shrink-0 rounded-full px-2 py-0.5 text-sm font-semibold underline underline-offset-2 hover:opacity-80">
+                {t.action.label}
+              </button>
+            )}
+          </div>
+        ))}
+      </div>
+    </ToastContext.Provider>
+  );
+}

src/components/Tooltips.jsx

@@ -0,0 +1,112 @@
+// Hover (and keyboard-focus) tooltips for the whole app, without touching every button:
+//  - anything with data-tip="…" shows that text (used for shortcut hints like "Search (/)")
+//  - anything with title="…" shows it too, in the app's style and without the browser's long delay
+//  - an icon-only button (no visible words) shows its aria-label
+// Touch screens have no hover, so nothing appears there.
+import { useEffect, useRef, useState } from 'react';
+import { themeVars } from './reader/readerThemes.js';
+
+const SHOW_DELAY = 450;
+const SELECTOR = '[data-tip], [title], button[aria-label], a[aria-label], [role="button"][aria-label], [role="tab"][aria-label]';
+
+const canHover = () => (typeof window.matchMedia === 'function' ? window.matchMedia('(hover: hover)').matches : true);
+
+// The words a tooltip should show for an element, or '' for none. A title is moved to data-tip the first
+// time (so the browser's own tooltip doesn't also appear); a title on a button with no other name becomes
+// its aria-label so screen readers keep it.
+export function tipFor(el) {
+  if (!(el instanceof HTMLElement)) return '';
+  if (el.hasAttribute('title')) {
+    const title = el.getAttribute('title').trim();
+    if (title) {
+      if (!el.getAttribute('aria-label') && el.textContent.replace(/\s+/g, '').length <= 2) el.setAttribute('aria-label', title);
+      if (!el.hasAttribute('data-tip')) el.setAttribute('data-tip', title);
+    }
+    el.removeAttribute('title');
+  }
+  const tip = el.getAttribute('data-tip');
+  if (tip) return tip;
+  // Icon-only controls (little or no text of their own) explain themselves with their label
+  const label = el.getAttribute('aria-label');
+  const visible = el.textContent.replace(/\s+/g, '').length;
+  return label && visible <= 2 ? label : '';
+}
+
+export default function Tooltips({ theme }) {
+  const [tip, setTip] = useState(null); // { text, x, y, below }
+  const timer = useRef(null);
+  const current = useRef(null);
+  const box = useRef(null);
+
+  useEffect(() => {
+    const hide = () => {
+      window.clearTimeout(timer.current);
+      if (current.current) current.current.removeAttribute('aria-describedby');
+      current.current = null;
+      setTip(null);
+    };
+    const show = (el, text) => {
+      const r = el.getBoundingClientRect();
+      current.current = el;
+      el.setAttribute('aria-describedby', 'app-tooltip');
+      setTip({ text, x: r.left + r.width / 2, y: r.top, bottom: r.bottom });
+    };
+    const find = (node) => (node instanceof Element ? node.closest(SELECTOR) : null);
+
+    const onOver = (e) => {
+      if (!canHover()) return;
+      const el = find(e.target);
+      if (!el || el === current.current) return;
+      hide();
+      const text = tipFor(el);
+      if (!text || el.disabled) return;
+      timer.current = window.setTimeout(() => show(el, text), SHOW_DELAY);
+    };
+    const onOut = (e) => {
+      const el = find(e.target);
+      if (!el || (e.relatedTarget instanceof Node && el.contains(e.relatedTarget))) return;
+      hide();
+    };
+    const onFocus = (e) => {
+      const el = find(e.target);
+      if (!el || !el.matches(':focus-visible')) return; // only keyboard focus, not a mouse click
+      const text = tipFor(el);
+      if (text) { window.clearTimeout(timer.current); show(el, text); }
+    };
+    const onKey = (e) => { if (e.key === 'Escape') hide(); };
+
+    document.addEventListener('pointerover', onOver);
+    document.addEventListener('pointerout', onOut);
+    document.addEventListener('pointerdown', hide, true);
+    document.addEventListener('focusin', onFocus);
+    document.addEventListener('focusout', hide);
+    document.addEventListener('keydown', onKey);
+    window.addEventListener('scroll', hide, true);
+    window.addEventListener('resize', hide);
+    return () => {
+      window.clearTimeout(timer.current);
+      document.removeEventListener('pointerover', onOver);
+      document.removeEventListener('pointerout', onOut);
+      document.removeEventListener('pointerdown', hide, true);
+      document.removeEventListener('focusin', onFocus);
+      document.removeEventListener('focusout', hide);
+      document.removeEventListener('keydown', onKey);
+      window.removeEventListener('scroll', hide, true);
+      window.removeEventListener('resize', hide);
+    };
+  }, []);
+
+  if (!tip) return null;
+  // Centred over the control, kept inside the window, and flipped below it when there's no room above
+  const width = box.current?.offsetWidth ?? 0;
+  const left = Math.max(8, Math.min(tip.x - width / 2, window.innerWidth - width - 8));
+  const flip = tip.y < 40;
+  return (
+    <div
+      ref={box} id="app-tooltip" role="tooltip" style={{ ...themeVars(theme), left, top: flip ? tip.bottom + 8 : tip.y - 8, transform: flip ? 'none' : 'translateY(-100%)' }}
+      className="pointer-events-none fixed z-[120] max-w-[16rem] rounded-lg bg-[var(--r-text)] px-2.5 py-1.5 font-sans text-xs leading-snug text-[var(--r-bg)] shadow-lg"
+    >
+      {tip.text}
+    </div>
+  );
+}

src/components/Tooltips.test.jsx

@@ -0,0 +1,88 @@
+import { render, screen, fireEvent, act } from '@testing-library/react';
+import { vi, beforeEach, afterEach, test, expect } from 'vitest';
+import Tooltips, { tipFor } from './Tooltips.jsx';
+
+beforeEach(() => vi.useFakeTimers());
+afterEach(() => vi.useRealTimers());
+
+const over = (el) => act(() => { fireEvent.pointerOver(el); vi.advanceTimersByTime(600); });
+
+function setup() {
+  render(
+    <>
+      <button aria-label="Search" data-tip="Search (/)">🔍</button>
+      <button aria-label="Close">×</button>
+      <button title="Out a level (Shift+Tab)">←</button>
+      <button aria-label="Save changes">Save changes</button>
+      <button disabled aria-label="Nothing">·</button>
+      <Tooltips theme="paper" />
+    </>,
+  );
+}
+
+test('shows a data-tip after a short pause, and hides when the pointer leaves', () => {
+  setup();
+  const btn = screen.getByLabelText('Search');
+  over(btn);
+  expect(screen.getByRole('tooltip')).toHaveTextContent('Search (/)');
+  expect(btn).toHaveAttribute('aria-describedby', 'app-tooltip');
+  act(() => { fireEvent.pointerOut(btn); });
+  expect(screen.queryByRole('tooltip')).not.toBeInTheDocument();
+  expect(btn).not.toHaveAttribute('aria-describedby');
+});
+
+test('does not appear before the pause', () => {
+  setup();
+  act(() => { fireEvent.pointerOver(screen.getByLabelText('Search')); vi.advanceTimersByTime(100); });
+  expect(screen.queryByRole('tooltip')).not.toBeInTheDocument();
+});
+
+test('an icon-only button shows its label', () => {
+  setup();
+  over(screen.getByLabelText('Close'));
+  expect(screen.getByRole('tooltip')).toHaveTextContent('Close');
+});
+
+test('a title is shown in the app style and the browser\'s own tooltip is turned off', () => {
+  setup();
+  const btn = screen.getByText('←');
+  over(btn);
+  expect(screen.getByRole('tooltip')).toHaveTextContent('Out a level (Shift+Tab)');
+  expect(btn).not.toHaveAttribute('title');
+  expect(btn).toHaveAttribute('aria-label', 'Out a level (Shift+Tab)'); // a screen reader still gets its name
+});
+
+test('a button that already says what it is gets no tooltip, and neither does a disabled one', () => {
+  setup();
+  over(screen.getByText('Save changes'));
+  expect(screen.queryByRole('tooltip')).not.toBeInTheDocument();
+  over(screen.getByLabelText('Nothing'));
+  expect(screen.queryByRole('tooltip')).not.toBeInTheDocument();
+});
+
+test('clicking, scrolling or Escape dismisses it', () => {
+  setup();
+  const btn = screen.getByLabelText('Search');
+  over(btn);
+  act(() => { fireEvent.pointerDown(btn); });
+  expect(screen.queryByRole('tooltip')).not.toBeInTheDocument();
+  over(btn);
+  act(() => { fireEvent.keyDown(document, { key: 'Escape' }); });
+  expect(screen.queryByRole('tooltip')).not.toBeInTheDocument();
+  over(btn);
+  act(() => { fireEvent.scroll(window); });
+  expect(screen.queryByRole('tooltip')).not.toBeInTheDocument();
+});
+
+test('nothing shows on a device without hover (touch)', () => {
+  vi.stubGlobal('matchMedia', () => ({ matches: false }));
+  setup();
+  over(screen.getByLabelText('Search'));
+  expect(screen.queryByRole('tooltip')).not.toBeInTheDocument();
+  vi.unstubAllGlobals();
+});
+
+test('tipFor ignores things that are not elements', () => {
+  expect(tipFor(null)).toBe('');
+  expect(tipFor(document.createTextNode('x'))).toBe('');
+});

src/components/iq/IqCommentary.jsx

@@ -0,0 +1,56 @@
+// More commentaries from IQ Bible: Gill and Matthew Henry plus hundreds of church-history sources.
+// Only sources that actually have notes on the chapter being read are offered.
+import { useState } from 'react';
+import { useIq } from '../../hooks/useIq.js';
+import { listOf, pickIqEntries } from '../../utils/iqbible.js';
+
+const KEY = 'iq-commentary';
+const muted = 'text-xs text-[var(--r-sub,#64748b)]';
+
+export default function IqCommentary({ book, chapter, verse }) {
+  const [chosen, setChosen] = useState(() => { try { return localStorage.getItem(KEY) || 'mhenry'; } catch { return 'mhenry'; } });
+  const sources = useIq(`books/${book}/commentaries`, { chapter });
+  const list = listOf(sources.data);
+  const source = list.find((s) => s.name === chosen) ?? list.find((s) => s.name === 'mhenry') ?? list[0];
+  const notes = useIq(source ? `commentaries/${source.name}/${book}/${chapter}` : null);
+  const entries = pickIqEntries(notes.data?.entries, chapter, verse);
+
+  const pick = (name) => { setChosen(name); try { localStorage.setItem(KEY, name); } catch { /* storage unavailable */ } };
+  const groups = list.reduce((acc, s) => { (acc[s.category || 'Other'] ??= []).push(s); return acc; }, {});
+
+  if (sources.status === 'loading') return <p className={muted}>Loading…</p>;
+  if (sources.status === 'error') return <p className={muted}>{sources.error}</p>;
+  if (!list.length) return <p className={muted}>No IQ Bible commentaries cover this chapter.</p>;
+
+  return (
+    <div>
+      <label className={muted}>
+        Source ({list.length}){' '}
+        <select value={source?.name ?? ''} onChange={(e) => pick(e.target.value)} className="max-w-[16rem] rounded-lg border border-[var(--r-line,#cbd5e1)] bg-[var(--r-bg,#ffffff)] px-2 py-1 text-xs">
+          {Object.entries(groups).map(([cat, items]) => (
+            <optgroup key={cat} label={cat}>
+              {items.map((s) => <option key={s.name} value={s.name}>{s.author_name}{s.year ? ` (${s.year})` : ''}</option>)}
+            </optgroup>
+          ))}
+        </select>
+      </label>
+      <div className="mt-2 space-y-2">
+        {notes.status === 'loading' && <p className={muted}>Loading…</p>}
+        {notes.status === 'error' && <p className={muted}>{notes.error}</p>}
+        {(notes.status === 'empty' || (notes.status === 'ready' && entries.length === 0)) && (
+          <p className={muted}>{source?.author_name} has no notes at or before verse {verse} in this chapter.</p>
+        )}
+        {entries.map((e, i) => (
+          <div key={i}>
+            <p className="mb-1 text-[11px] text-[var(--r-sub,#64748b)]">
+              {e.verse !== verse || e.verse_end ? `Notes on verse${e.verse_end && e.verse_end !== e.verse ? `s ${e.verse}–${e.verse_end}` : ` ${e.verse}`}` : ''}
+              {e.source_title ? ` · ${e.source_title}` : ''}
+            </p>
+            <div className="max-h-96 overflow-y-auto whitespace-pre-line rounded-xl bg-[var(--r-bg,#ffffff)] p-3 text-[13px] leading-relaxed text-[var(--r-text,#334155)]">{e.text}</div>
+          </div>
+        ))}
+      </div>
+      {source && <p className="mt-2 text-[10px] text-[var(--r-sub,#64748b)]">{source.author_name}{source.year ? `, ${source.year}` : ''} · via IQ Bible{source.license ? ` · ${source.license}` : ''}</p>}
+    </div>
+  );
+}

src/components/iq/IqDailyCard.jsx

@@ -0,0 +1,48 @@
+// Home card: today's verse and Spurgeon's Morning & Evening reading, both from IQ Bible.
+import { useState } from 'react';
+import { useApp } from '../../context/AppContext.js';
+import { useIq, useIqAvailable } from '../../hooks/useIq.js';
+import { bookOptions } from '../../utils/bibleUtils.jsx';
+
+export default function IqDailyCard() {
+  const on = useIqAvailable();
+  if (!on) return null;
+  return <Card />;
+}
+
+function Card() {
+  const { jumpToReaderVerse, openBibleReader } = useApp();
+  const votd = useIq('bibles/eng_kjv/verse-of-the-day');
+  const dev = useIq('devotionals/today');
+  const [part, setPart] = useState(() => (new Date().getHours() < 15 ? 'morning' : 'evening'));
+  const verse = votd.data?.data;
+  const reading = dev.data?.data?.[part];
+  const name = (abbrev) => bookOptions.find((b) => b.abbrev === abbrev)?.name ?? abbrev;
+  if (!verse && !reading) return null;
+  return (
+    <section className="mb-4 rounded-2xl border border-[var(--r-line)] bg-[var(--r-bar)] p-5" aria-label="Daily verse and devotional">
+      {verse && (
+        <div>
+          <p className="text-[11px] uppercase tracking-wide text-[var(--r-sub)]">Verse of the day · KJV</p>
+          <p className="mt-1 font-serif text-[15px] leading-relaxed">{verse.text}</p>
+          <button type="button" onClick={() => { jumpToReaderVerse(verse.book_usfm, verse.chapter_number, verse.verse_number); openBibleReader(); }}
+            className="mt-1 text-xs font-medium text-[var(--r-accent)] hover:underline">{name(verse.book_usfm)} {verse.chapter_number}:{verse.verse_number} — read in context</button>
+        </div>
+      )}
+      {reading && (
+        <details className="mt-3 border-t border-[var(--r-line)] pt-3">
+          <summary className="cursor-pointer text-sm font-medium">Spurgeon, {part === 'morning' ? 'Morning' : 'Evening'}: “{reading.heading_text}”</summary>
+          <div className="mt-2 flex gap-1.5">
+            {['morning', 'evening'].map((p) => (
+              <button key={p} type="button" onClick={() => setPart(p)} aria-pressed={part === p}
+                className={`rounded-full border px-2.5 py-0.5 text-[11px] ${part === p ? 'border-[var(--r-text)] bg-[var(--r-text)] text-[var(--r-bg)]' : 'border-[var(--r-line)] text-[var(--r-sub)]'}`}>{p === 'morning' ? 'Morning' : 'Evening'}</button>
+            ))}
+          </div>
+          <p className="mt-1 text-xs text-[var(--r-sub)]">{reading.heading_citation}</p>
+          <div className="mt-2 max-h-72 overflow-y-auto whitespace-pre-line font-serif text-[15px] leading-relaxed">{reading.body}</div>
+          <p className="mt-2 text-[10px] text-[var(--r-sub)]">Charles Spurgeon, Morning and Evening (1866), via IQ Bible.</p>
+        </details>
+      )}
+    </section>
+  );
+}

src/components/iq/IqLexicon.jsx

@@ -0,0 +1,87 @@
+// A word's entry in the original-language lexicons: Strong's, then Brown-Driver-Briggs (Hebrew) or
+// Liddell-Scott-Jones and Abbott-Smith (Greek), found through IQ Bible's Strong's crosswalk.
+import { useState } from 'react';
+import DOMPurify from 'dompurify';
+import { useIq } from '../../hooks/useIq.js';
+import { listOf, normalizeStrongs } from '../../utils/iqbible.js';
+
+const muted = 'text-xs text-[var(--r-sub,#64748b)]';
+const SOURCES = { bdb: 'Brown-Driver-Briggs', lsj: 'Liddell-Scott-Jones', 'abbott-smith': 'Abbott-Smith' };
+const html = (s) => DOMPurify.sanitize(String(s ?? ''), { ALLOWED_TAGS: ['b', 'i', 'em', 'strong', 'br', 'p', 'span', 'ul', 'ol', 'li', 'sup', 'sub'], ALLOWED_ATTR: [] });
+
+function SourceEntry({ lang, source, nativeKey }) {
+  const { status, data, error } = useIq(`lexicon/${lang}/${source}/${encodeURIComponent(nativeKey)}`);
+  const entry = listOf(data)[0];
+  return (
+    <details className="rounded-xl bg-[var(--r-bg,#ffffff)] px-3 py-2">
+      <summary className="cursor-pointer text-sm font-medium">{SOURCES[source] ?? source}</summary>
+      <div className="mt-2 text-[13px] leading-relaxed">
+        {status === 'loading' && <p className={muted}>Loading…</p>}
+        {status === 'error' && <p className={muted}>{error}</p>}
+        {status === 'empty' && <p className={muted}>No entry.</p>}
+        {entry && source === 'bdb' && (
+          <>
+            <p><span className="font-serif text-base" dir="rtl">{entry.head_word}</span> <span className={muted}>{entry.pos}</span></p>
+            {entry.primary_gloss && <p className="font-medium">{entry.primary_gloss}</p>}
+            <div className="whitespace-pre-line" dangerouslySetInnerHTML={{ __html: html(entry.description) }} />
+          </>
+        )}
+        {entry && source !== 'bdb' && (
+          <>
+            <p><span className="font-serif text-base">{entry.greek}</span> <span className={muted}>{entry.transliteration}{entry.morph ? ` · ${entry.morph}` : ''}</span></p>
+            {entry.gloss && <p className="font-medium">{entry.gloss}</p>}
+            <div className="max-h-64 overflow-y-auto" dangerouslySetInnerHTML={{ __html: html(entry.meaning) }} />
+          </>
+        )}
+      </div>
+    </details>
+  );
+}
+
+function Occurrences({ strongs }) {
+  const { status, data, error } = useIq('original-language/search', { strongs, limit: 20 });
+  if (status === 'loading') return <p className={muted}>Loading…</p>;
+  if (status === 'error') return <p className={muted}>{error}</p>;
+  const list = data?.occurrences ?? [];
+  if (!list.length) return <p className={muted}>No occurrences found.</p>;
+  return (
+    <p className="text-[13px] leading-relaxed">
+      {list.map((o) => `${o.name_en} ${o.chapter}:${o.verse}`).join(' · ')}
+      {data.count >= 20 && <span className={muted}> … first 20 shown</span>}
+    </p>
+  );
+}
+
+export default function IqLexicon({ strongs: raw, onClose }) {
+  const strongs = normalizeStrongs(raw);
+  const lang = strongs?.startsWith('H') ? 'hebrew' : 'greek';
+  const basic = useIq(strongs ? `lexicon/${lang}/strongs/${strongs}` : null);
+  const cross = useIq(strongs ? `lexicon/crosswalk/${strongs}` : null);
+  const [showOcc, setShowOcc] = useState(false);
+  if (!strongs) return null;
+  const strong = listOf(basic.data)[0];
+  const sources = listOf(cross.data).filter((c) => SOURCES[c.source] && c.native_key && (lang === 'hebrew' ? c.source === 'bdb' : c.source !== 'bdb'));
+  const seen = new Set();
+  const unique = sources.filter((c) => { const k = `${c.source}/${c.native_key}`; if (seen.has(k)) return false; seen.add(k); return true; }).slice(0, 4);
+
+  return (
+    <div className="mt-3 rounded-xl border border-[var(--r-line,#cbd5e1)] p-3" role="region" aria-label={`Lexicon entry for ${strongs}`}>
+      <div className="mb-2 flex items-center justify-between">
+        <p className="text-sm font-semibold">{strongs}{strong?.occurences ? <span className="ml-2 text-xs font-normal text-[var(--r-sub,#64748b)]">{strong.occurences}× in the Bible</span> : null}</p>
+        <button type="button" onClick={onClose} aria-label="Close lexicon entry" className="rounded p-1 text-[var(--r-sub,#64748b)] hover:bg-black/5">×</button>
+      </div>
+      {basic.status === 'loading' && <p className={muted}>Loading…</p>}
+      {basic.status === 'error' && <p className={muted}>{basic.error}</p>}
+      {strong && <p className="mb-2 whitespace-pre-line text-[13px] leading-relaxed">{strong.glossary}</p>}
+      <div className="space-y-1.5">
+        {cross.status === 'loading' && <p className={muted}>Finding other lexicons…</p>}
+        {unique.map((c) => <SourceEntry key={`${c.source}/${c.native_key}`} lang={lang} source={c.source} nativeKey={c.native_key} />)}
+      </div>
+      <button type="button" onClick={() => setShowOcc((o) => !o)} className="mt-2 text-xs font-medium text-[var(--r-accent,#0369a1)] hover:underline">
+        {showOcc ? 'Hide' : 'Where this word appears'}
+      </button>
+      {showOcc && <div className="mt-1"><Occurrences strongs={strongs} /></div>}
+      <p className="mt-2 text-[10px] text-[var(--r-sub,#64748b)]">Lexicons via IQ Bible (Strong's, BDB, LSJ, Abbott-Smith; see credits there).</p>
+    </div>
+  );
+}

src/components/iq/IqNarratorOptions.jsx

@@ -0,0 +1,16 @@
+// <option>s for IQ Bible's narrated Bibles, to add inside an audio narrator <select>. Playing a
+// chapter this way uses one of the account's monthly audio streams, so the group says so.
+import { useIq, useIqAvailable } from '../../hooks/useIq.js';
+import { listOf } from '../../utils/iqbible.js';
+
+export default function IqNarratorOptions() {
+  const on = useIqAvailable();
+  const { data } = useIq(on ? 'audio' : null);
+  const sets = listOf(data).filter((s) => s.active !== false);
+  if (!on || sets.length === 0) return null;
+  return (
+    <optgroup label="IQ Bible narrations (uses monthly streams)">
+      {sets.map((s) => <option key={s.audio_id} value={`iq:${s.audio_id}`}>{s.audio_id}{s.narrator ? ` · ${s.narrator}` : ''}</option>)}
+    </optgroup>
+  );
+}

src/components/iq/IqPlanExport.jsx

@@ -0,0 +1,24 @@
+// Calendar (.ics) and spreadsheet (.csv) downloads of a reading plan, generated by IQ Bible so the
+// readings show up as daily all-day events in any calendar app.
+import { useIqAvailable } from '../../hooks/useIq.js';
+import { iqUrl } from '../../utils/iqbible.js';
+
+const link = 'text-[var(--r-sub)] hover:text-[var(--r-text)] underline-offset-2 hover:underline';
+
+export default function IqPlanExport({ plan, mcheyne = false }) {
+  const on = useIqAvailable();
+  if (!on) return null;
+  const query = mcheyne
+    ? { plan: 'mcheyne' }
+    : Array.isArray(plan?.books) && plan.books.length > 0 ? { days: plan.days, books: plan.books.join(',') } : null;
+  if (!query) return null;
+  const href = (format) => iqUrl('bibles/eng_kjv/reading-plan', { ...query, format });
+  return (
+    <p className="flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-[var(--r-sub)]">
+      <span>{mcheyne ? 'M’Cheyne’s 365-day calendar' : 'Take this plan with you'}:</span>
+      <a href={href('ical')} download className={link}>Add to calendar (.ics)</a>
+      <a href={href('csv')} download className={link}>Spreadsheet (.csv)</a>
+      {!mcheyne && <span>Starts today, in the order of the Bible.</span>}
+    </p>
+  );
+}

src/components/iq/IqStudyAids.jsx

@@ -0,0 +1,142 @@
+// A verse's "study aids" from IQ Bible: chapter overview, topics, places, people, textual notes, Gospel
+// parallels and timeline. Each section loads only when opened, so nothing is spent on what isn't read.
+import { useState } from 'react';
+import { useIq } from '../../hooks/useIq.js';
+import { listOf } from '../../utils/iqbible.js';
+
+const muted = 'text-xs text-[var(--r-sub,#64748b)]';
+const GOSPELS = ['MAT', 'MRK', 'LUK', 'JHN'];
+
+function Aid({ title, path, query, children, empty = 'Nothing recorded here.' }) {
+  const [open, setOpen] = useState(false);
+  const { status, data, error } = useIq(open ? path : null, query);
+  return (
+    <details onToggle={(e) => setOpen(e.currentTarget.open)} className="rounded-xl bg-[var(--r-bg,#ffffff)] px-3 py-2">
+      <summary className="cursor-pointer text-sm font-medium">{title}</summary>
+      <div className="mt-2 text-[13px] leading-relaxed">
+        {status === 'loading' && <p className={muted}>Loading…</p>}
+        {status === 'error' && <p className={muted}>{error}</p>}
+        {status === 'empty' && <p className={muted}>{empty}</p>}
+        {status === 'ready' && children(data)}
+      </div>
+    </details>
+  );
+}
+
+function PersonProfile({ ustrong }) {
+  const { status, data } = useIq(`bible-characters/by-ustrong/${ustrong}`);
+  const p = data?.data;
+  if (status === 'loading') return <p className={muted}>Loading…</p>;
+  if (!p) return <p className={muted}>No profile.</p>;
+  return (
+    <div className="mt-1 space-y-1">
+      <p>{p.brief || p.briefest || p.description}</p>
+      {p.tribe_nation && <p className={muted}>{p.tribe_nation}</p>}
+      {p.first_appearance && <p className={muted}>First appears {p.first_appearance.book} {p.first_appearance.chapter}:{p.first_appearance.verse}</p>}
+    </div>
+  );
+}
+
+function People({ data, verse }) {
+  const [open, setOpen] = useState(null);
+  const people = listOf(data);
+  return (
+    <ul className="space-y-1">
+      {people.map((p) => (
+        <li key={p.ustrong}>
+          <button type="button" onClick={() => setOpen(open === p.ustrong ? null : p.ustrong)} className="text-left font-medium">
+            {p.name} <span className={muted}>{p.first_verse === verse ? 'this verse' : `v${p.first_verse}`} {open === p.ustrong ? '▾' : '▸'}</span>
+          </button>
+          {open === p.ustrong && <PersonProfile ustrong={p.ustrong} />}
+        </li>
+      ))}
+    </ul>
+  );
+}
+
+function Places({ data }) {
+  const places = listOf(data);
+  return (
+    <ul className="space-y-1.5">
+      {places.map((p) => (
+        <li key={p.id} className="flex items-baseline justify-between gap-2">
+          <span>{p.name}<span className={muted}> {p.place_type}{p.modern_name && p.modern_name !== p.name ? ` · today: ${p.modern_name}` : ''}{p.special ? ` · ${p.special.replace(/_/g, ' ')}` : ''}</span></span>
+          {p.lat != null && p.lon != null && (
+            <a href={`https://www.openstreetmap.org/?mlat=${p.lat}&mlon=${p.lon}#map=8/${p.lat}/${p.lon}`} target="_blank" rel="noopener noreferrer" className="shrink-0 text-xs font-semibold text-sky-600 hover:underline">Map ↗</a>
+          )}
+        </li>
+      ))}
+    </ul>
+  );
+}
+
+function Variants({ data }) {
+  const items = listOf(data);
+  return (
+    <ul className="space-y-3">
+      {items.map((v, i) => (
+        <li key={v.slug ?? i}>
+          <p className="font-medium">{v.title}</p>
+          {v.traditional_reading && <p><span className={muted}>Traditional (KJV/TR): </span>{v.traditional_reading}</p>}
+          {v.critical_reading && <p><span className={muted}>Critical text: </span>{v.critical_reading}</p>}
+          {v.explanation && <p className="mt-1">{v.explanation}</p>}
+        </li>
+      ))}
+    </ul>
+  );
+}
+
+function Harmony({ data, book, chapter }) {
+  const items = listOf(data);
+  return (
+    <ul className="space-y-2">
+      {items.map((s) => (
+        <li key={s.number}>
+          <p className="font-medium">§{s.number} {String(s.title ?? '').toLowerCase().replace(/(^|[.\s])([a-z])/g, (m, a, b) => a + b.toUpperCase())}</p>
+          <p className={muted}>{(s.references ?? []).map((r) => r.citation ?? r).join(' · ')}</p>
+        </li>
+      ))}
+      <li className={muted} aria-hidden="true">{book} {chapter}</li>
+    </ul>
+  );
+}
+
+export default function IqStudyAids({ book, chapter, verse }) {
+  return (
+    <div className="space-y-1.5">
+      <Aid title="About this chapter" path={`books/${book}/chapters/${chapter}/info`} empty="No chapter overview is available.">
+        {(d) => (
+          <>
+            <p className="whitespace-pre-line">{d.summary}</p>
+            {d.source_author && <p className={`mt-1 ${muted}`}>{d.source_author}{d.source_year ? `, ${d.source_year}` : ''}</p>}
+          </>
+        )}
+      </Aid>
+      <Aid title="Topics on this verse" path={`topics/${book}/${chapter}/${verse}`} empty="No topics are tagged on this verse.">
+        {(d) => (
+          <div className="flex flex-wrap gap-1.5">
+            {listOf(d).slice(0, 40).map((t, i) => (
+              <span key={i} className="rounded-full border border-[var(--r-line,#cbd5e1)] px-2 py-0.5 text-xs" title={t.label || t.edition}>{t.name}</span>
+            ))}
+          </div>
+        )}
+      </Aid>
+      <Aid title="Places on this verse" path={`geo/${book}/${chapter}/${verse}`} empty="No places are mentioned on this verse.">{(d) => <Places data={d} />}</Aid>
+      <Aid title="People in this chapter" path={`bible-people/${book}/${chapter}`} empty="No named people in this chapter.">{(d) => <People data={d} verse={verse} />}</Aid>
+      <Aid title="Textual notes" path={`textual-variants/${book}/${chapter}/${verse}`} empty="No known manuscript differences on this verse.">{(d) => <Variants data={d} />}</Aid>
+      {GOSPELS.includes(book) && (
+        <Aid title="Parallel accounts in the Gospels" path="harmony" query={{ book, chapter }} empty="No Gospel parallels recorded for this chapter.">{(d) => <Harmony data={d} book={book} chapter={chapter} />}</Aid>
+      )}
+      <Aid title="Where this sits in the timeline" path={`chronology/for/${book}/${chapter}`}>
+        {(d) => (
+          <>
+            <p>{d.placement ?? `${d.date ?? ''}`}</p>
+            {d.preceding?.length > 0 && <p className={muted}>Before: {d.preceding.map((e) => `${e.event} (${e.date})`).join('; ')}</p>}
+            {d.following?.length > 0 && <p className={muted}>After: {d.following.map((e) => `${e.event} (${e.date})`).join('; ')}</p>}
+          </>
+        )}
+      </Aid>
+      <p className="pt-1 text-[10px] text-[var(--r-sub,#64748b)]">Study aids via IQ Bible.</p>
+    </div>
+  );
+}

src/components/iq/iq.test.jsx

@@ -0,0 +1,141 @@
+import { render, screen, waitFor, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { vi, describe, test, expect, beforeEach, afterEach } from 'vitest';
+import IqCommentary from './IqCommentary.jsx';
+import IqLexicon from './IqLexicon.jsx';
+import IqStudyAids from './IqStudyAids.jsx';
+import IqPlanExport from './IqPlanExport.jsx';
+import { resetIq } from '../../utils/iqbible.js';
+
+// Answers /api/iq/... from a table of path -> JSON (or { status }), and records what was asked.
+let routes;
+let asked;
+const reply = (body, status = 200) => Promise.resolve({ ok: status < 400, status, json: () => Promise.resolve(body), text: () => Promise.resolve('') });
+
+beforeEach(() => {
+  resetIq();
+  asked = [];
+  routes = { '/api/iq/status': { available: true } };
+  vi.stubGlobal('fetch', vi.fn((url) => {
+    const path = String(url);
+    asked.push(path);
+    const hit = routes[path] ?? routes[path.split('?')[0]];
+    return hit === undefined ? reply({ error: 'not found' }, 404) : hit.status ? reply(hit.body ?? { error: 'x' }, hit.status) : reply(hit);
+  }));
+  localStorage.clear();
+});
+afterEach(() => vi.unstubAllGlobals());
+
+describe('IqCommentary', () => {
+  const sources = { data: [
+    { name: 'mhenry', author_name: 'Matthew Henry', category: 'Puritan', year: '1706' },
+    { name: 'thomas-aquinas', author_name: 'Thomas Aquinas', category: 'Western & Medieval Theology', year: '1274' },
+  ] };
+
+  test('offers the commentators on this chapter and shows their notes for the verse', async () => {
+    routes['/api/iq/books/JHN/commentaries?chapter=3'] = sources;
+    routes['/api/iq/commentaries/mhenry/JHN/3'] = { entries: [
+      { chapter: 3, verse: 0, text: 'intro' },
+      { chapter: 3, verse: 14, verse_end: 21, text: 'God so loved the world.' },
+    ] };
+    render(<IqCommentary book="JHN" chapter={3} verse={16} />);
+    expect(await screen.findByText('God so loved the world.')).toBeInTheDocument();
+    expect(screen.getByText(/Notes on verses 14–21/)).toBeInTheDocument();
+    const options = within(screen.getByRole('combobox')).getAllByRole('option').map((o) => o.textContent);
+    expect(options).toEqual(['Matthew Henry (1706)', 'Thomas Aquinas (1274)']);
+  });
+
+  test('choosing another commentator loads theirs and remembers the choice', async () => {
+    routes['/api/iq/books/JHN/commentaries?chapter=3'] = sources;
+    routes['/api/iq/commentaries/mhenry/JHN/3'] = { entries: [{ chapter: 3, verse: 16, text: 'Henry on 16' }] };
+    routes['/api/iq/commentaries/thomas-aquinas/JHN/3'] = { entries: [{ chapter: 3, verse: 16, text: 'Aquinas on 16' }] };
+    render(<IqCommentary book="JHN" chapter={3} verse={16} />);
+    await screen.findByText('Henry on 16');
+    await userEvent.setup().selectOptions(screen.getByRole('combobox'), 'thomas-aquinas');
+    expect(await screen.findByText('Aquinas on 16')).toBeInTheDocument();
+    expect(localStorage.getItem('iq-commentary')).toBe('thomas-aquinas');
+  });
+
+  test('says so when nobody wrote on the chapter', async () => {
+    routes['/api/iq/books/JHN/commentaries?chapter=3'] = { data: [] };
+    render(<IqCommentary book="JHN" chapter={3} verse={16} />);
+    expect(await screen.findByText(/No IQ Bible commentaries cover this chapter/)).toBeInTheDocument();
+  });
+});
+
+describe('IqLexicon', () => {
+  test('shows Strong\'s and the Greek lexicons the crosswalk points to', async () => {
+    routes['/api/iq/lexicon/greek/strongs/G26'] = { data: [{ glossary: 'agape: love', occurences: 116 }] };
+    routes['/api/iq/lexicon/crosswalk/G26'] = { data: [
+      { strongs_id: 'G26', source: 'lsj', native_key: 'G0026' },
+      { strongs_id: 'G26', source: 'abbott-smith', native_key: 'G0026' },
+    ] };
+    routes['/api/iq/lexicon/greek/lsj/G0026'] = { data: [{ greek: 'ἀγάπη', transliteration: 'agapē', gloss: 'love', meaning: '<b>love</b><script>alert(1)</script>' }] };
+    const { container } = render(<IqLexicon strongs="G0026" onClose={() => {}} />);
+    expect(await screen.findByText(/agape: love/)).toBeInTheDocument();
+    expect(screen.getByText('116× in the Bible')).toBeInTheDocument();
+    await userEvent.setup().click(await screen.findByText('Liddell-Scott-Jones'));
+    await screen.findByText('love', { selector: 'p.font-medium' });
+    expect(container.querySelector('script')).toBeNull(); // lexicon HTML is sanitised
+    expect(screen.getByText('Abbott-Smith')).toBeInTheDocument();
+  });
+
+  test('Hebrew words use BDB', async () => {
+    routes['/api/iq/lexicon/hebrew/strongs/H430'] = { data: [{ glossary: 'elohim' }] };
+    routes['/api/iq/lexicon/crosswalk/H430'] = { data: [{ source: 'bdb', native_key: 'BDB65' }, { source: 'lsj', native_key: 'x' }] };
+    render(<IqLexicon strongs="H430" onClose={() => {}} />);
+    expect(await screen.findByText('Brown-Driver-Briggs')).toBeInTheDocument();
+    expect(screen.queryByText('Liddell-Scott-Jones')).toBeNull();
+  });
+});
+
+describe('IqStudyAids', () => {
+  test('each section loads only when opened', async () => {
+    routes['/api/iq/topics/JHN/3/16'] = { data: [{ name: 'faith', edition: 'iqbible' }, { name: 'eternal life', edition: 'nave-torrey' }] };
+    render(<IqStudyAids book="JHN" chapter={3} verse={16} />);
+    expect(asked.filter((u) => u.startsWith('/api/iq/') && !u.includes('status'))).toEqual([]);
+    await userEvent.setup().click(screen.getByText('Topics on this verse'));
+    expect(await screen.findByText('faith')).toBeInTheDocument();
+    expect(screen.getByText('eternal life')).toBeInTheDocument();
+    expect(asked.some((u) => u.includes('/geo/'))).toBe(false);
+  });
+
+  test('a section with nothing says so, and the Gospel parallels appear only in the Gospels', async () => {
+    const { rerender } = render(<IqStudyAids book="ROM" chapter={8} verse={1} />);
+    expect(screen.queryByText('Parallel accounts in the Gospels')).toBeNull();
+    await userEvent.setup().click(screen.getByText('Textual notes'));
+    expect(await screen.findByText(/No known manuscript differences/)).toBeInTheDocument();
+    rerender(<IqStudyAids book="MAT" chapter={14} verse={1} />);
+    expect(screen.getByText('Parallel accounts in the Gospels')).toBeInTheDocument();
+  });
+
+  test('places link to a map when they have coordinates', async () => {
+    routes['/api/iq/geo/2KI/5/12'] = { data: [{ id: 1, name: 'Abana', place_type: 'river', modern_name: 'Barada River', lat: 33.5, lon: 36.3 }, { id: 2, name: 'Somewhere', place_type: 'region', special: 'unknown_place' }] };
+    render(<IqStudyAids book="2KI" chapter={5} verse={12} />);
+    await userEvent.setup().click(screen.getByText('Places on this verse'));
+    const link = await screen.findByRole('link', { name: /Map/ });
+    expect(link.href).toContain('mlat=33.5');
+    expect(screen.getAllByRole('link')).toHaveLength(1);
+  });
+});
+
+describe('IqPlanExport', () => {
+  test('links a plan to calendar and spreadsheet files, only when IQ Bible is on', async () => {
+    const plan = { id: 'p', days: 30, books: ['MAT', 'MRK'] };
+    const { container, rerender } = render(<IqPlanExport plan={plan} />);
+    await waitFor(() => expect(screen.getByRole('link', { name: /calendar/i })).toBeInTheDocument());
+    const href = screen.getByRole('link', { name: /calendar/i }).getAttribute('href');
+    expect(href).toContain('/api/iq/bibles/eng_kjv/reading-plan?');
+    expect(href).toContain('format=ical');
+    expect(href).toContain('days=30');
+    rerender(<IqPlanExport plan={{ id: 'q', days: 5 }} />); // a plan with no book list can't be exported
+    expect(container.querySelector('a')).toBeNull();
+  });
+
+  test('shows nothing without a key on the server', async () => {
+    routes['/api/iq/status'] = { available: false };
+    const { container } = render(<IqPlanExport plan={{ days: 30, books: ['MAT'] }} />);
+    await new Promise((r) => setTimeout(r, 20));
+    expect(container).toBeEmptyDOMElement();
+  });
+});

src/components/plans/CustomPlanBuilder.jsx

@@ -0,0 +1,275 @@
+// Form for creating or editing a custom reading plan (title, days, cover photo,
+// books and chapter ranges). Themed with the reader's --r-* colour variables.
+import { useRef, useState } from 'react';
+import { bookOptions, CHAPTER_COUNTS } from '../../utils/bibleUtils.jsx';
+import {
+  bookChapterCount, clampPlanDays, ALL_BOOKS, OT_BOOKS, NT_BOOKS, GOSPELS, PENTATEUCH, WISDOM_BOOKS,
+} from '../../utils/readingPlans.js';
+
+// Downscales a picked image file to a reasonable cover-photo size and returns
+// a data URL — no server upload endpoint needed, it's stored right on the plan.
+export function resizeImageToDataUrl(file, maxWidth = 960, quality = 0.82) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onerror = () => reject(new Error('Could not read file.'));
+    reader.onload = () => {
+      const img = new Image();
+      img.onerror = () => reject(new Error('Could not decode image.'));
+      img.onload = () => {
+        const scale = Math.min(1, maxWidth / img.width);
+        const canvas = document.createElement('canvas');
+        canvas.width = Math.round(img.width * scale);
+        canvas.height = Math.round(img.height * scale);
+        canvas.getContext('2d').drawImage(img, 0, 0, canvas.width, canvas.height);
+        resolve(canvas.toDataURL('image/jpeg', quality));
+      };
+      img.src = reader.result;
+    };
+    reader.readAsDataURL(file);
+  });
+}
+
+const BOOK_PRESETS = [
+  ['All', ALL_BOOKS],
+  ['None', []],
+  ['Old Testament', OT_BOOKS],
+  ['New Testament', NT_BOOKS],
+  ['Gospels', GOSPELS],
+  ['Pentateuch', PENTATEUCH],
+  ['Psalms', ['PSA']],
+  ['Proverbs', ['PRO']],
+  ['Wisdom', WISDOM_BOOKS],
+];
+
+export default function CustomPlanBuilder({ initialValues, onSubmit, onCancel }) {
+  const [title, setTitle] = useState(initialValues?.title ?? '');
+  const [description, setDescription] = useState(initialValues?.description ?? '');
+  const [days, setDays] = useState(initialValues?.days ?? 30);
+  const [books, setBooks] = useState(initialValues?.books ?? []);
+  const [chapterRanges, setChapterRanges] = useState(initialValues?.chapterRanges ?? {});
+  const [image, setImage] = useState(initialValues?.image ?? null);
+  const [imageError, setImageError] = useState('');
+  const fileInputRef = useRef(null);
+  const isEditing = !!initialValues;
+
+  const toggleBook = (abbrev) => {
+    const isOn = books.includes(abbrev);
+    setBooks((prev) => (isOn ? prev.filter((b) => b !== abbrev) : [...prev, abbrev]));
+    if (isOn) {
+      setChapterRanges((prev) => {
+        if (!(abbrev in prev)) return prev;
+        const next = { ...prev };
+        delete next[abbrev];
+        return next;
+      });
+    }
+  };
+
+  const setChapterRange = (abbrev, key, value) => {
+    const total = CHAPTER_COUNTS[abbrev] ?? 1;
+    const clamped = Math.min(total, Math.max(1, Math.round(value) || 1));
+    setChapterRanges((prev) => ({
+      ...prev,
+      [abbrev]: { start: prev[abbrev]?.start ?? 1, end: prev[abbrev]?.end ?? total, [key]: clamped },
+    }));
+  };
+
+  const applyPreset = (list) => {
+    setBooks(list);
+    setChapterRanges({});
+  };
+
+  const pickImage = async (e) => {
+    const file = e.target.files?.[0];
+    e.target.value = '';
+    if (!file) return;
+    try {
+      setImageError('');
+      setImage(await resizeImageToDataUrl(file));
+    } catch {
+      setImageError("Couldn't use that image.");
+    }
+  };
+
+  const totalChapters = books.reduce((sum, b) => sum + bookChapterCount(b, chapterRanges), 0);
+  const canCreate = title.trim().length > 0 && totalChapters > 0 && days >= 1;
+
+  return (
+    <div className="rounded-2xl border border-[var(--r-line)] bg-[var(--r-bar)] p-5">
+      <h3 className="mb-3 text-sm font-semibold text-[var(--r-text)]">{isEditing ? 'Edit reading plan' : 'New reading plan'}</h3>
+      <div className="grid gap-3 sm:grid-cols-2">
+        <label className="text-sm text-[var(--r-text)]">
+          Title
+          <input
+            value={title}
+            onChange={(e) => setTitle(e.target.value)}
+            placeholder="e.g. Advent Readings"
+            className="mt-1 w-full rounded-xl border border-[var(--r-line)] bg-[var(--r-bg)] text-[var(--r-text)] px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-[var(--r-line)]"
+          />
+        </label>
+        <label className="text-sm text-[var(--r-text)]">
+          Days
+          <input
+            type="number"
+            min="1"
+            max="365"
+            value={days}
+            onChange={(e) => setDays(Number(e.target.value))}
+            className="mt-1 w-full rounded-xl border border-[var(--r-line)] bg-[var(--r-bg)] text-[var(--r-text)] px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-[var(--r-line)]"
+          />
+        </label>
+      </div>
+      <label className="mt-3 block text-sm text-[var(--r-text)]">
+        Description <span className="text-[var(--r-sub)]">(optional)</span>
+        <textarea
+          value={description}
+          onChange={(e) => setDescription(e.target.value)}
+          rows={2}
+          className="mt-1 w-full rounded-xl border border-[var(--r-line)] bg-[var(--r-bg)] text-[var(--r-text)] px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-[var(--r-line)]"
+        />
+      </label>
+
+      <div className="mt-3">
+        <span className="text-sm text-[var(--r-text)]">Cover photo <span className="text-[var(--r-sub)]">(optional)</span></span>
+        <div className="mt-1 flex items-center gap-3">
+          {image ? (
+            <img src={image} alt="" className="h-16 w-28 rounded-lg object-cover" />
+          ) : (
+            <div className="flex h-16 w-28 items-center justify-center rounded-lg bg-[var(--r-bg)] text-2xl">🖼️</div>
+          )}
+          <button
+            type="button"
+            onClick={() => fileInputRef.current?.click()}
+            className="rounded-xl border border-[var(--r-line)] bg-[var(--r-bg)] text-[var(--r-text)] px-3 py-1.5 text-sm font-semibold text-[var(--r-text)] hover:bg-black/5"
+          >
+            {image ? 'Change photo' : 'Choose photo'}
+          </button>
+          {image && (
+            <button type="button" onClick={() => setImage(null)} className="text-sm text-[var(--r-sub)] hover:text-rose-500">
+              Remove
+            </button>
+          )}
+          <input ref={fileInputRef} type="file" accept="image/*" onChange={pickImage} className="hidden" />
+        </div>
+        {imageError && <p className="mt-1 text-xs text-rose-500">{imageError}</p>}
+      </div>
+
+      <div className="mt-4">
+        <div className="mb-2 flex flex-wrap items-center gap-2">
+          <span className="text-sm font-semibold text-[var(--r-text)]">Books</span>
+          {BOOK_PRESETS.map(([label, list]) => (
+            <button
+              key={label}
+              type="button"
+              onClick={() => applyPreset(list)}
+              className="rounded-full border border-[var(--r-line)] bg-[var(--r-bg)] text-[var(--r-text)] px-2.5 py-1 text-xs font-semibold text-[var(--r-text)] hover:bg-black/5"
+            >
+              {label}
+            </button>
+          ))}
+        </div>
+        <p className="mb-2 text-xs text-[var(--r-sub)]">
+          Check a book to include the whole thing, or narrow it to a chapter range with the fields that appear.
+        </p>
+        <div className="grid gap-3 sm:grid-cols-2">
+          <div className="max-h-56 overflow-y-auto rounded-xl border border-[var(--r-line)] p-2">
+            <p className="mb-1 px-1 text-xs font-semibold uppercase tracking-wide text-[var(--r-sub)]">Old Testament</p>
+            {bookOptions.filter((b) => OT_BOOKS.includes(b.abbrev)).map((b) => (
+              <BookRow
+                key={b.abbrev}
+                book={b}
+                checked={books.includes(b.abbrev)}
+                range={chapterRanges[b.abbrev]}
+                onToggle={() => toggleBook(b.abbrev)}
+                onRangeChange={(key, value) => setChapterRange(b.abbrev, key, value)}
+              />
+            ))}
+          </div>
+          <div className="max-h-56 overflow-y-auto rounded-xl border border-[var(--r-line)] p-2">
+            <p className="mb-1 px-1 text-xs font-semibold uppercase tracking-wide text-[var(--r-sub)]">New Testament</p>
+            {bookOptions.filter((b) => NT_BOOKS.includes(b.abbrev)).map((b) => (
+              <BookRow
+                key={b.abbrev}
+                book={b}
+                checked={books.includes(b.abbrev)}
+                range={chapterRanges[b.abbrev]}
+                onToggle={() => toggleBook(b.abbrev)}
+                onRangeChange={(key, value) => setChapterRange(b.abbrev, key, value)}
+              />
+            ))}
+          </div>
+        </div>
+        <p className="mt-2 text-xs text-[var(--r-sub)]">
+          {books.length} book{books.length !== 1 ? 's' : ''} selected · {totalChapters} chapters
+          {days > 0 && totalChapters > 0 && ` · ~${(totalChapters / Math.min(days, totalChapters)).toFixed(1)} ch/day`}
+        </p>
+        {totalChapters > 0 && Number(days) > totalChapters && (
+          <p className="mt-1 text-xs text-[var(--r-accent)]">
+            That’s more days than chapters, so the plan will be {totalChapters} days, one chapter a day.
+          </p>
+        )}
+        {isEditing && (
+          books.join() !== initialValues.books.join()
+          || Number(days) !== initialValues.days
+          || JSON.stringify(chapterRanges) !== JSON.stringify(initialValues.chapterRanges ?? {})
+        ) && (
+          <p className="mt-2 text-xs text-amber-600">
+            Changing the books, chapters, or day count restarts progress for any run of this plan already in your list.
+          </p>
+        )}
+      </div>
+
+      <div className="mt-4 flex items-center gap-3">
+        <button
+          type="button"
+          disabled={!canCreate}
+          onClick={() => onSubmit({ title, description, days: clampPlanDays(books, chapterRanges, days), books, chapterRanges, image })}
+          className="rounded-xl bg-[var(--r-accent)] px-4 py-2 text-sm font-semibold text-[var(--r-on)] transition hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-50"
+        >
+          {isEditing ? 'Save changes' : 'Create plan'}
+        </button>
+        <button type="button" onClick={onCancel} className="text-sm text-[var(--r-sub)] hover:text-[var(--r-text)]">Cancel</button>
+      </div>
+    </div>
+  );
+}
+
+// One book row in the custom-plan builder: a checkbox, and — once checked — a
+// "ch. X–Y" chapter-range pair that defaults to the whole book.
+function BookRow({ book, checked, range, onToggle, onRangeChange }) {
+  const total = CHAPTER_COUNTS[book.abbrev] ?? 1;
+  return (
+    <label className="flex items-center gap-2 rounded-lg px-1 py-1 text-sm hover:bg-black/5">
+      <input
+        type="checkbox"
+        checked={checked}
+        onChange={onToggle}
+        className="h-4 w-4 shrink-0 rounded border-[var(--r-line)] bg-[var(--r-bg)] text-[var(--r-text)] accent-[var(--r-accent)]"
+      />
+      <span className="flex-1">{book.name}</span>
+      {checked && total > 1 && (
+        <span className="flex shrink-0 items-center gap-1 text-xs text-[var(--r-sub)]" onClick={(e) => e.preventDefault()}>
+          ch.
+          <input
+            type="number"
+            min={1}
+            max={total}
+            value={range?.start ?? 1}
+            onChange={(e) => onRangeChange('start', e.target.value)}
+            className="w-11 rounded border border-[var(--r-line)] bg-[var(--r-bg)] text-[var(--r-text)] px-1 py-0.5 text-center"
+          />
+          –
+          <input
+            type="number"
+            min={1}
+            max={total}
+            value={range?.end ?? total}
+            onChange={(e) => onRangeChange('end', e.target.value)}
+            className="w-11 rounded border border-[var(--r-line)] bg-[var(--r-bg)] text-[var(--r-text)] px-1 py-0.5 text-center"
+          />
+          <span className="text-[var(--r-sub)]">/{total}</span>
+        </span>
+      )}
+    </label>
+  );
+}

src/components/plans/PlanDetailSheet.jsx

@@ -0,0 +1,141 @@
+// Detail for one plan. Two modes: an in-progress plan (days to tick or jump into,
+// its translation, catch-up / restart / remove) and a catalog plan (preview of the
+// first days, pick a translation, start it).
+import { useRef, useState } from 'react';
+import Sheet from '../reader/Sheet.jsx';
+import TranslationSelect from './TranslationSelect.jsx';
+import { resizeImageToDataUrl } from './CustomPlanBuilder.jsx';
+import { formatDayReadings, getPlanSchedule, daysBehindPace, nextUnreadDayIndex } from '../../utils/readingPlans.js';
+import { useOfflineSave } from '../../hooks/useOfflineSave.js';
+import { DownloadProgress } from '../OfflineSave.jsx';
+import { canSaveOffline } from '../../utils/offline.js';
+import IqPlanExport from '../iq/IqPlanExport.jsx';
+
+const btn = 'rounded-xl border border-[var(--r-line)] px-3 py-2 text-sm hover:bg-black/5';
+const primary = 'w-full rounded-xl bg-[var(--r-accent)] py-2.5 text-sm font-medium text-[var(--r-on)] hover:opacity-90 disabled:opacity-50';
+
+function ActiveBody({ plan, progress, onClose, actions }) {
+  const schedule = getPlanSchedule(plan.id);
+  const behind = daysBehindPace(plan, progress);
+  const pct = plan.days > 0 ? Math.round((progress.completedDays.length / plan.days) * 100) : 0;
+  const offline = useOfflineSave();
+  const translation = progress.translation ?? actions.defaultTranslation;
+  // The next week of readings, so a trip or a bad connection doesn't interrupt the plan
+  const upcoming = (() => {
+    const from = nextUnreadDayIndex(plan, progress.completedDays);
+    return from == null ? [] : schedule.slice(from, from + 7).flat();
+  })();
+  return (
+    <>
+      <div className="mb-3 flex items-center justify-between text-sm">
+        <span>{progress.completedDays.length} of {plan.days} days · {pct}%</span>
+        <span className="flex items-center gap-2">
+          <span className="text-xs text-[var(--r-sub)]">Read in</span>
+          <TranslationSelect value={progress.translation ?? actions.defaultTranslation} onChange={(t) => actions.setTranslation(progress.id, t)} />
+        </span>
+      </div>
+      <div className="mb-3 h-1.5 overflow-hidden rounded-full bg-[var(--r-line)]"><div className="h-full bg-[var(--r-accent)]" style={{ width: `${pct}%` }} /></div>
+      {behind >= 1 && (
+        <div className="mb-3 rounded-xl border border-[var(--r-line)] px-3 py-2 text-xs">
+          <p className="text-[var(--r-sub)]">{behind} {behind === 1 ? 'day' : 'days'} behind pace. Catch up without losing the days you've read:</p>
+          <div className="mt-2 flex flex-wrap items-center gap-3">
+            <button type="button" onClick={() => actions.recalibrate(progress.id)} className="font-medium text-[var(--r-accent)] hover:underline">Catch me up (pace starts today)</button>
+            <button type="button" onClick={() => { actions.restart(progress.id); onClose(); }} className="text-[var(--r-sub)] hover:text-[var(--r-text)]">Redo the plan from Day 1</button>
+          </div>
+        </div>
+      )}
+      <div className="max-h-[38vh] overflow-y-auto rounded-xl border border-[var(--r-line)]">
+        {schedule.map((refs, i) => {
+          const done = progress.completedDays.includes(i);
+          return (
+            <div key={i} className="flex items-center gap-3 border-b border-[var(--r-line)] px-3 py-2 last:border-0">
+              <input type="checkbox" checked={done} onChange={() => actions.toggleDay(progress.id, i, plan.days)} className="h-4 w-4 shrink-0 accent-[var(--r-accent)]" aria-label={`Day ${i + 1} read`} />
+              <span className={`flex-1 text-sm ${done ? 'text-[var(--r-sub)] line-through' : ''}`}>Day {i + 1} · {formatDayReadings(refs)}</span>
+              <button type="button" onClick={() => { onClose(); actions.read(progress.id, i); }} className="shrink-0 text-xs font-medium text-[var(--r-accent)] hover:underline">Read</button>
+            </div>
+          );
+        })}
+      </div>
+      {upcoming.length > 0 && canSaveOffline(translation) && (
+        <div className="mt-3">
+          {offline.job
+            ? <DownloadProgress job={offline.job} onCancel={offline.cancel} />
+            : (
+              <button type="button" onClick={() => offline.saveRefs('the next 7 days', translation, upcoming)}
+                className="w-full rounded-xl border border-[var(--r-line)] px-3 py-2 text-xs text-[var(--r-sub)] hover:bg-black/5">
+                Save the next 7 days for offline ({translation})
+              </button>
+            )}
+        </div>
+      )}
+      <div className="mt-3"><IqPlanExport plan={plan} /></div>
+      <div className="mt-4 flex items-center justify-between text-xs">
+        <button type="button" onClick={() => { actions.restart(progress.id); onClose(); }} className="text-[var(--r-sub)] hover:text-[var(--r-text)]">Restart</button>
+        <button type="button" onClick={() => { actions.remove(progress.id); onClose(); }} className="text-[var(--r-danger,#b42318)] hover:underline">Remove</button>
+      </div>
+    </>
+  );
+}
+
+function CatalogBody({ plan, active, completedCount, onClose, actions }) {
+  const [translation, setTranslation] = useState(actions.defaultTranslation);
+  const [imageError, setImageError] = useState('');
+  const fileRef = useRef(null);
+  const schedule = getPlanSchedule(plan.id);
+  const chapters = schedule.reduce((n, d) => n + d.length, 0);
+  const pickImage = async (e) => {
+    const file = e.target.files?.[0];
+    e.target.value = '';
+    if (!file) return;
+    try { setImageError(''); actions.updateCover(plan.id, await resizeImageToDataUrl(file)); } catch { setImageError('Couldn’t use that image.'); }
+  };
+  return (
+    <>
+      {plan.image && <img src={plan.image} alt="" onError={(e) => { e.currentTarget.style.display = 'none'; }} className="mb-3 h-32 w-full rounded-xl object-cover" style={{ objectPosition: plan.imageFocus ?? 'center' }} />}
+      <p className="text-sm text-[var(--r-sub)]">{plan.description || 'A custom reading plan.'}</p>
+      <p className="mt-2 text-xs text-[var(--r-sub)]">{plan.days} days · {chapters} chapters · about {(chapters / plan.days).toFixed(1)} a day{completedCount > 0 ? ` · completed ${completedCount}×` : ''}</p>
+
+      <p className="mb-1 mt-4 text-[11px] uppercase tracking-wide text-[var(--r-sub)]">First days</p>
+      <div className="rounded-xl border border-[var(--r-line)]">
+        {schedule.slice(0, 5).map((refs, i) => (
+          <div key={i} className="border-b border-[var(--r-line)] px-3 py-1.5 text-sm last:border-0">Day {i + 1} · {formatDayReadings(refs)}</div>
+        ))}
+      </div>
+
+      {!active && (
+        <div className="mt-4 flex items-center justify-between text-sm">
+          <span>Read in</span>
+          <TranslationSelect value={translation} onChange={setTranslation} />
+        </div>
+      )}
+      <div className="mt-3">
+        {active
+          ? <button type="button" className={primary} onClick={() => { onClose(); actions.read(active.id, actions.nextDay(plan, active)); }}>Continue reading</button>
+          : <button type="button" className={primary} onClick={() => { actions.start(plan.id, translation); onClose(); }}>{completedCount > 0 ? 'Start again' : 'Start plan'}</button>}
+      </div>
+
+      <div className="mt-3"><IqPlanExport plan={plan} /></div>
+      {plan.custom && (
+        <div className="mt-4 flex flex-wrap items-center gap-3 border-t border-[var(--r-line)] pt-3 text-xs">
+          <button type="button" onClick={() => { onClose(); actions.edit(plan.id); }} className="text-[var(--r-sub)] hover:text-[var(--r-text)]">Edit plan</button>
+          <button type="button" onClick={() => fileRef.current?.click()} className="text-[var(--r-sub)] hover:text-[var(--r-text)]">{plan.image ? 'Change cover' : 'Add cover photo'}</button>
+          {plan.image && <button type="button" onClick={() => actions.updateCover(plan.id, null)} className="text-[var(--r-sub)] hover:text-[var(--r-danger,#b42318)]">Remove cover</button>}
+          <button type="button" onClick={() => { actions.delete(plan.id); onClose(); }} className="ml-auto text-[var(--r-danger,#b42318)] hover:underline">Delete</button>
+          <input ref={fileRef} type="file" accept="image/*" onChange={pickImage} className="hidden" />
+          {imageError && <p className="w-full text-[var(--r-danger,#b42318)]">{imageError}</p>}
+        </div>
+      )}
+    </>
+  );
+}
+
+export default function PlanDetailSheet({ plan, progress, active, completedCount, onClose, actions }) {
+  if (!plan) return null;
+  return (
+    <Sheet open onClose={onClose} title={<span>{plan.icon ? `${plan.icon} ` : ''}{plan.title}</span>}>
+      {progress
+        ? <ActiveBody plan={plan} progress={progress} onClose={onClose} actions={actions} />
+        : <CatalogBody plan={plan} active={active} completedCount={completedCount} onClose={onClose} actions={actions} />}
+    </Sheet>
+  );
+}

src/components/plans/TranslationSelect.jsx

@@ -0,0 +1,11 @@
+import { READER_TRANSLATIONS } from '../../hooks/useBibleReader.js';
+
+// Every Bible the app can read in — used for a plan's own translation.
+export default function TranslationSelect({ value, onChange, className = '' }) {
+  return (
+    <select value={value} onChange={(e) => onChange(e.target.value)}
+      className={`rounded-lg border border-[var(--r-line)] bg-[var(--r-bg)] px-2 py-1 text-sm text-[var(--r-text)] ${className}`}>
+      {READER_TRANSLATIONS.map((t) => <option key={t.id} value={t.id}>{t.id} · {t.name}</option>)}
+    </select>
+  );
+}

src/components/reader/AudioSheet.jsx

@@ -0,0 +1,39 @@
+import Sheet from './Sheet.jsx';
+import AudioPlayer from '../AudioPlayer.jsx';
+
+// Wraps the existing player. Audio is BSB-only, so licensed translations get a note.
+export default function AudioSheet({ open, onClose, translation, bookName, chapter, audio, narrator, onNarrator, onNext, nextDisabled }) {
+  return (
+    <Sheet open={open} onClose={onClose} title="Listen">
+      <AudioPlayer
+        title={`${bookName} ${chapter}`}
+        subtitle={audio.state.status === 'error'
+          ? "Couldn't load audio for this chapter/narrator."
+          : translation === 'ESV'
+            ? 'ESV audio, read by David Cochran Heath. It follows the chapter as you browse.'
+            : translation !== 'BSB'
+            ? `Audio is BSB only — no ${translation} audio is available, so it won't match the ${translation} text on screen.`
+            : 'Audio follows the chapter as you browse.'}
+        status={audio.state.status}
+        currentTime={audio.progress.currentTime}
+        duration={audio.progress.duration}
+        onPlay={audio.play}
+        onTogglePause={audio.togglePause}
+        onSeekBack={() => audio.seek(-10)}
+        onSeekForward={() => audio.seek(10)}
+        onSeekTo={audio.seekTo}
+        onNext={onNext}
+        nextDisabled={nextDisabled}
+        onStop={audio.stop}
+        controls={translation === 'ESV' ? null : (
+          <select value={narrator} onChange={(e) => onNarrator(e.target.value)}
+            className="rounded-xl border border-[var(--r-line)] bg-[var(--r-bg)] px-2 py-1.5 text-sm text-[var(--r-text)]">
+            <option value="david">David</option>
+            <option value="hays">Hays</option>
+            <option value="souer">Souer</option>
+          </select>
+        )}
+      />
+    </Sheet>
+  );
+}

src/components/reader/CompareSheet.jsx

@@ -0,0 +1,35 @@
+// Compare translations: pick a second Bible to read beside the one you're reading, and whether the
+// words that differ are highlighted. The chapter shows how different the two are.
+import Sheet from './Sheet.jsx';
+import { READER_TRANSLATIONS } from '../../utils/bibleText.js';
+
+export default function CompareSheet({ open, onClose, translation, parallel, onParallel, showDiff, onShowDiff }) {
+  const chip = (active) => `rounded-full border px-3 py-1.5 text-sm font-medium ${active ? 'border-[var(--r-text)] bg-[var(--r-text)] text-[var(--r-bg)]' : 'border-[var(--r-line)] text-[var(--r-sub)] hover:bg-black/5'}`;
+  const options = READER_TRANSLATIONS.filter((t) => t.id !== translation);
+  return (
+    <Sheet open={open} onClose={onClose} title="Compare translations">
+      <p className="mb-3 text-sm text-[var(--r-sub)]">
+        Read another Bible beside the {translation}. You’ll see how different its wording is for the whole chapter and for each verse.
+      </p>
+      <span className="mb-1.5 block text-xs text-[var(--r-sub)]">Compare {translation} with</span>
+      <div role="group" aria-label="Translation to compare with" className="mb-4 flex flex-wrap gap-1.5">
+        {options.map((t) => (
+          <button key={t.id} type="button" title={t.name} aria-pressed={parallel === t.id} onClick={() => { onParallel(parallel === t.id ? '' : t.id); if (parallel !== t.id) onClose(); }} className={chip(parallel === t.id)}>{t.id}</button>
+        ))}
+        <button type="button" aria-pressed={!parallel} onClick={() => onParallel('')} className={chip(!parallel)}>Off</button>
+      </div>
+      {parallel && (
+        <>
+          <span className="mb-1.5 block text-xs text-[var(--r-sub)]">Highlight the words that differ</span>
+          <div role="group" aria-label="Highlight differences" className="flex overflow-hidden rounded-xl border border-[var(--r-line)]">
+            {[[true, 'Show'], [false, 'Hide']].map(([id, text]) => (
+              <button key={String(id)} type="button" aria-pressed={showDiff === id} onClick={() => onShowDiff(id)}
+                className={`flex-1 px-3 py-2 text-sm ${showDiff === id ? 'bg-[var(--r-text)] text-[var(--r-bg)]' : 'text-[var(--r-sub)] hover:bg-black/5'}`}>{text}</button>
+            ))}
+          </div>
+        </>
+      )}
+      <p className="mt-4 text-[11px] text-[var(--r-sub)]">The wording is compared word by word, ignoring capitals and punctuation. It shows how the wording differs, not which translation is more accurate. Tap any verse and open Compare to see all six translations of it.</p>
+    </Sheet>
+  );
+}

src/components/reader/DiffText.jsx

@@ -0,0 +1,13 @@
+// Text with the words that differ from the other translation marked.
+export function DiffText({ text, ranges = [] }) {
+  if (!ranges.length) return text;
+  const parts = [];
+  let cursor = 0;
+  ranges.forEach((r, i) => {
+    if (r.start > cursor) parts.push(text.slice(cursor, r.start));
+    parts.push(<span key={i} className="diff-hl">{text.slice(r.start, r.end)}</span>);
+    cursor = r.end;
+  });
+  if (cursor < text.length) parts.push(text.slice(cursor));
+  return <>{parts}</>;
+}

src/components/reader/MarksSheet.jsx

@@ -0,0 +1,96 @@
+// Everything you have marked in the Bible: highlights (grouped and filtered by colour, each colour
+// named by you — "Promises", "Commands") and bookmarks. Opens from the bookmark button in the top bar.
+import { useEffect, useState } from 'react';
+import Sheet from './Sheet.jsx';
+import { CloseIcon } from './icons.jsx';
+import { COLOR_NAMES, COLOR_SUGGESTIONS, HIGHLIGHT_COLORS, colorTitle } from '../../utils/highlightColors.js';
+
+const tabBtn = (active) => `rounded-full border px-3 py-1 text-xs font-medium ${active ? 'border-[var(--r-text)] bg-[var(--r-text)] text-[var(--r-bg)]' : 'border-[var(--r-line)] text-[var(--r-sub)] hover:bg-black/5'}`;
+
+export default function MarksSheet({
+  open, onClose, initialTab = 'highlights', bookmarks, highlights, colorLabels, onSetLabel, onJump, onRemoveBookmark, onRemoveHighlight,
+}) {
+  const [tab, setTab] = useState(initialTab);
+  // Opening from the Highlights button shows highlights; from the Bookmarks button, bookmarks
+  useEffect(() => { if (open) setTab(initialTab); }, [open, initialTab]);
+  const [filter, setFilter] = useState(null); // a highlight colour, or null for all
+  const [editing, setEditing] = useState(false);
+
+  const counts = Object.fromEntries(HIGHLIGHT_COLORS.map((c) => [c, highlights.filter((h) => h.color === c).length]));
+  const shown = filter ? highlights.filter((h) => h.color === filter) : highlights;
+  // Colours in use that aren't one of the picker's (older data) still get listed
+  const total = highlights.length + bookmarks.length;
+
+  return (
+    <Sheet open={open} onClose={onClose} label="Bookmarks and highlights" title={`Bookmarks & highlights${total ? ` (${total})` : ''}`}>
+      <div role="tablist" aria-label="What to show" className="mb-3 flex gap-1.5">
+        <button type="button" role="tab" aria-selected={tab === 'highlights'} onClick={() => setTab('highlights')} className={tabBtn(tab === 'highlights')}>Highlights ({highlights.length})</button>
+        <button type="button" role="tab" aria-selected={tab === 'bookmarks'} onClick={() => setTab('bookmarks')} className={tabBtn(tab === 'bookmarks')}>Bookmarks ({bookmarks.length})</button>
+      </div>
+
+      {tab === 'highlights' && (
+        <>
+          {/* Colour key: tap a colour to show only that one; "Name colours" lets you say what each means */}
+          <div className="mb-3 flex flex-wrap items-center gap-1.5" role="group" aria-label="Filter by colour">
+            <button type="button" onClick={() => setFilter(null)} aria-pressed={filter === null} className={tabBtn(filter === null)}>All</button>
+            {HIGHLIGHT_COLORS.map((c) => (
+              <button key={c} type="button" onClick={() => setFilter(filter === c ? null : c)} aria-pressed={filter === c}
+                title={colorTitle(c, colorLabels)}
+                className={`flex items-center gap-1.5 rounded-full border px-2.5 py-1 text-xs ${filter === c ? 'border-[var(--r-text)]' : 'border-[var(--r-line)] hover:bg-black/5'}`}>
+                <span className="h-3 w-3 rounded-full border border-black/10" style={{ backgroundColor: c }} />
+                <span>{colorLabels[c] || COLOR_NAMES[c]}</span>
+                <span className="text-[var(--r-sub)]">{counts[c]}</span>
+              </button>
+            ))}
+            <button type="button" onClick={() => setEditing((e) => !e)} className="ml-auto text-xs text-[var(--r-accent)] hover:underline">{editing ? 'Done' : 'Name colours'}</button>
+          </div>
+
+          {editing && (
+            <div className="mb-3 grid gap-2 rounded-xl border border-[var(--r-line)] bg-[var(--r-bg)] p-3 sm:grid-cols-2">
+              {HIGHLIGHT_COLORS.map((c) => (
+                <label key={c} className="flex items-center gap-2 text-xs text-[var(--r-sub)]">
+                  <span className="h-4 w-4 shrink-0 rounded-full border border-black/10" style={{ backgroundColor: c }} />
+                  <span className="sr-only">{COLOR_NAMES[c]} means</span>
+                  <input value={colorLabels[c] ?? ''} maxLength={30} onChange={(e) => onSetLabel(c, e.target.value)} placeholder={COLOR_SUGGESTIONS[c]}
+                    className="min-w-0 flex-1 rounded-lg border border-[var(--r-line)] bg-transparent px-2 py-1 text-sm text-[var(--r-text)] outline-none focus:border-[var(--r-accent)]" />
+                </label>
+              ))}
+            </div>
+          )}
+
+          {highlights.length === 0 ? (
+            <p className="text-sm text-[var(--r-sub)]">No highlights yet. Select some words in a verse and pick a colour to save them here.</p>
+          ) : shown.length === 0 ? (
+            <p className="text-sm text-[var(--r-sub)]">Nothing highlighted in that colour yet.</p>
+          ) : shown.map((h) => (
+            <div key={h.id} className="flex items-start gap-2 rounded-lg px-1 py-1.5 hover:bg-black/5">
+              <span className="mt-1 h-3 w-3 shrink-0 rounded-full border border-black/10" style={{ backgroundColor: h.color }} title={colorTitle(h.color, colorLabels)} />
+              <button type="button" onClick={() => onJump(h.book, h.chapter, h.verse)} className="min-w-0 flex-1 text-left text-sm">
+                <span className="font-medium">{h.bookName} {h.chapter}:{h.verse}</span>
+                {colorLabels[h.color] && <span className="ml-1.5 text-[11px] text-[var(--r-sub)]">{colorLabels[h.color]}</span>}
+                {h.text && <span className="mt-0.5 block font-serif text-[var(--r-sub)]">“{h.text}”</span>}
+              </button>
+              <button type="button" onClick={() => onRemoveHighlight(h)} aria-label={`Remove highlight on ${h.bookName} ${h.chapter}:${h.verse}`}
+                className="rounded p-1 text-[var(--r-sub)] hover:text-[var(--r-danger,#b42318)]"><CloseIcon /></button>
+            </div>
+          ))}
+        </>
+      )}
+
+      {tab === 'bookmarks' && (
+        bookmarks.length === 0 ? (
+          <p className="text-sm text-[var(--r-sub)]">No bookmarks yet. Tap a verse, then the bookmark icon, to save it here.</p>
+        ) : bookmarks.map((e) => (
+          <div key={e.key} className="flex items-center gap-2 rounded-lg px-1 py-1.5 hover:bg-black/5">
+            <span className="h-3 w-3 shrink-0 rounded-full" style={{ backgroundColor: e.color }} />
+            <button type="button" onClick={() => onJump(e.bookAbbrev, e.chapter, e.verse)} className="flex-1 truncate text-left text-sm">
+              {e.bookName} {e.chapter}:{e.verse}
+            </button>
+            <button type="button" onClick={() => onRemoveBookmark(e)} aria-label={`Remove bookmark on ${e.bookName} ${e.chapter}:${e.verse}`}
+              className="rounded p-1 text-[var(--r-sub)] hover:text-[var(--r-danger,#b42318)]"><CloseIcon /></button>
+          </div>
+        ))
+      )}
+    </Sheet>
+  );
+}

src/components/reader/NavigatorSheet.jsx

@@ -0,0 +1,59 @@
+// One place to pick translation, book and chapter (replaces three dropdowns).
+import { useState } from 'react';
+import Sheet from './Sheet.jsx';
+import { bookOptions, CHAPTER_COUNTS } from '../../utils/bibleUtils.jsx';
+import { READER_TRANSLATIONS } from '../../utils/bibleText.js';
+import { SaveBookOffline } from '../OfflineSave.jsx';
+
+const NT_START = bookOptions.findIndex((b) => b.abbrev === 'MAT');
+const chip = 'rounded-lg border px-2 py-2 text-center text-sm transition';
+
+export default function NavigatorSheet({ open, onClose, bookAbbrev, chapter, translation, onTranslation, translationNote, onGo, offline }) {
+  const [pickedBook, setPickedBook] = useState(null); // book abbrev whose chapters are showing
+  const close = () => { setPickedBook(null); onClose(); };
+  const book = pickedBook ? bookOptions.find((b) => b.abbrev === pickedBook) : null;
+
+  const bookButton = (b) => (
+    <button key={b.abbrev} type="button" onClick={() => setPickedBook(b.abbrev)}
+      className={`${chip} truncate ${b.abbrev === bookAbbrev ? 'border-[var(--r-accent)] text-[var(--r-accent)]' : 'border-[var(--r-line)] hover:bg-black/5'}`}>
+      {b.name}
+    </button>
+  );
+
+  return (
+    <Sheet open={open} onClose={close} label="Go to" title={book ? (
+      <button type="button" onClick={() => setPickedBook(null)} className="text-[var(--r-sub)] hover:text-[var(--r-text)]">‹ All books · <span className="text-[var(--r-text)]">{book.name}</span></button>
+    ) : 'Go to'}>
+      {!book && (
+        <>
+          <div className="mb-3 flex flex-wrap gap-1.5">
+            {READER_TRANSLATIONS.map((t) => (
+              <button key={t.id} type="button" onClick={() => onTranslation(t.id)} title={t.name}
+                className={`rounded-full border px-3 py-1 text-xs font-medium ${t.id === translation ? 'border-[var(--r-text)] bg-[var(--r-text)] text-[var(--r-bg)]' : 'border-[var(--r-line)] text-[var(--r-sub)] hover:bg-black/5'}`}>
+                {t.id}
+              </button>
+            ))}
+          </div>
+          {translationNote && <p className="-mt-1 mb-3 text-[11px] text-[var(--r-sub)]">{translationNote}</p>}
+          <p className="mb-1.5 text-[11px] uppercase tracking-wide text-[var(--r-sub)]">Old Testament</p>
+          <div className="mb-4 grid grid-cols-3 gap-1.5 sm:grid-cols-4">{bookOptions.slice(0, NT_START).map(bookButton)}</div>
+          <p className="mb-1.5 text-[11px] uppercase tracking-wide text-[var(--r-sub)]">New Testament</p>
+          <div className="grid grid-cols-3 gap-1.5 sm:grid-cols-4">{bookOptions.slice(NT_START).map(bookButton)}</div>
+        </>
+      )}
+      {book && (
+        <>
+        <div className="grid grid-cols-6 gap-1.5 sm:grid-cols-8">
+          {Array.from({ length: CHAPTER_COUNTS[book.abbrev] ?? 1 }, (_, i) => i + 1).map((n) => (
+            <button key={n} type="button" onClick={() => { onGo(book.abbrev, n); close(); }}
+              className={`${chip} ${book.abbrev === bookAbbrev && n === chapter ? 'border-[var(--r-accent)] bg-[var(--r-accent)] text-[var(--r-on)]' : 'border-[var(--r-line)] hover:bg-black/5'}`}>
+              {n}
+            </button>
+          ))}
+        </div>
+        {offline && <SaveBookOffline offline={offline} translation={translation} book={book.abbrev} name={book.name} />}
+        </>
+      )}
+    </Sheet>
+  );
+}

src/components/reader/PlanFooter.jsx

@@ -0,0 +1,32 @@
+// Card at the end of the chapter while reading a plan: step to the next chapter of
+// today's reading, or finish the day and roll into the next one.
+export default function PlanFooter({ info, label, onNext, onNextDay, onFinish }) {
+  if (!info || info.position === 0) return null;
+  const last = info.position === info.total;
+  const nextRef = !last ? info.refs[info.position] : null;
+  const btn = 'rounded-full bg-[var(--r-accent)] px-5 py-2 text-sm font-medium text-[var(--r-on)]';
+  return (
+    <div className="mx-auto mt-10 max-w-md rounded-2xl border border-[var(--r-line)] bg-[var(--r-bar)] p-4 text-center font-sans">
+      <p className="text-xs text-[var(--r-sub)]">{info.plan.title} · Day {info.dayIndex + 1}</p>
+      {!last && (
+        <>
+          <p className="mb-3 mt-1 text-sm font-medium text-[var(--r-text)]">{info.total - info.position} more chapter{info.total - info.position === 1 ? '' : 's'} today</p>
+          <button type="button" onClick={onNext} className={btn}>Next: {label(nextRef)}</button>
+        </>
+      )}
+      {last && info.nextDayRefs?.length > 0 && (
+        <>
+          <p className="mb-3 mt-1 text-sm font-medium text-[var(--r-text)]">That’s Day {info.dayIndex + 1}</p>
+          <button type="button" onClick={onNextDay} className={btn}>Mark read · Day {info.dayIndex + 2}: {label(info.nextDayRefs[0])}</button>
+          <div><button type="button" onClick={onFinish} className="mt-2 text-xs text-[var(--r-sub)] underline">Mark read and stop for today</button></div>
+        </>
+      )}
+      {last && !info.nextDayRefs?.length && (
+        <>
+          <p className="mb-3 mt-1 text-sm font-medium text-[var(--r-text)]">Last day of the plan</p>
+          <button type="button" onClick={onFinish} className={btn}>{info.done ? 'Plan complete' : 'Finish plan'}</button>
+        </>
+      )}
+    </div>
+  );
+}

src/components/reader/PlanSheet.jsx

@@ -0,0 +1,75 @@
+// The plan's control room, one tap from the reader: pick the day, tick chapters,
+// choose the Bible this plan is read in, and jump to another active plan.
+import Sheet from './Sheet.jsx';
+import { ChevronLeft, ChevronRight, CheckIcon } from './icons.jsx';
+import { READER_TRANSLATIONS } from '../../hooks/useBibleReader.js';
+import { formatDayReadings } from '../../utils/readingPlans.js';
+
+export default function PlanSheet({
+  open, onClose, info, translation, currentKey, streak, otherPlans, studyBusy,
+  onDay, onToggleChapter, onGoChapter, onTranslation, onToggleDay, onSwitchPlan, onListen, onStudy, onLeave,
+}) {
+  if (!info) return null;
+  const label = (r) => formatDayReadings([r]);
+  return (
+    <Sheet open={open} onClose={onClose} title={info.plan.title}>
+      <div className="mb-1 flex items-center justify-between">
+        <button type="button" onClick={() => onDay(-1)} disabled={info.dayIndex <= 0} aria-label="Previous day"
+          className="rounded-lg p-1.5 text-[var(--r-sub)] hover:bg-black/5 disabled:opacity-30"><ChevronLeft /></button>
+        <span className="text-sm font-medium">Day {info.dayIndex + 1} of {info.plan.days}{info.done ? ' · read' : ''}</span>
+        <button type="button" onClick={() => onDay(1)} disabled={info.dayIndex >= info.plan.days - 1} aria-label="Next day"
+          className="rounded-lg p-1.5 text-[var(--r-sub)] hover:bg-black/5 disabled:opacity-30"><ChevronRight /></button>
+      </div>
+
+      <p className="mb-1 mt-3 text-[11px] uppercase tracking-wide text-[var(--r-sub)]">Reading</p>
+      {info.refs.map((r) => {
+        const key = `${r.book}.${r.chapter}`;
+        const read = info.readSet.has(key);
+        return (
+          <div key={key} className="flex items-center gap-3 border-b border-[var(--r-line)] py-2">
+            <button type="button" onClick={() => onToggleChapter(key)} aria-label={read ? 'Mark unread' : 'Mark read'}
+              className={`flex h-5 w-5 shrink-0 items-center justify-center rounded-full border-[1.5px] ${read ? 'border-[var(--r-accent)] bg-[var(--r-accent)] text-[var(--r-on)]' : 'border-[var(--r-sub)] text-transparent'}`}>
+              <span className="scale-75"><CheckIcon /></span>
+            </button>
+            <button type="button" onClick={() => onGoChapter(r)} className={`flex-1 text-left text-sm ${key === currentKey ? 'font-medium' : ''}`}>{label(r)}</button>
+            {key === currentKey && <span className="rounded-full border border-[var(--r-line)] px-2 py-0.5 text-[10px] text-[var(--r-sub)]">reading</span>}
+          </div>
+        );
+      })}
+      <button type="button" onClick={onToggleDay}
+        className="mt-3 w-full rounded-xl border border-[var(--r-line)] py-2 text-sm hover:bg-black/5">
+        {info.done ? 'Mark this day unread' : 'Mark the whole day read'}
+      </button>
+
+      <p className="mb-1 mt-4 text-[11px] uppercase tracking-wide text-[var(--r-sub)]">This plan</p>
+      <div className="flex items-center justify-between py-1.5 text-sm">
+        <span>Read in</span>
+        <select value={translation} onChange={(e) => onTranslation(e.target.value)}
+          className="rounded-lg border border-[var(--r-line)] bg-[var(--r-bg)] px-2 py-1 text-sm text-[var(--r-text)]">
+          {READER_TRANSLATIONS.map((t) => <option key={t.id} value={t.id}>{t.id} · {t.name}</option>)}
+        </select>
+      </div>
+      <div className="flex items-center justify-between py-1.5 text-sm">
+        <span>Streak</span><span className="text-[var(--r-sub)]">{streak.current} day{streak.current === 1 ? '' : 's'}</span>
+      </div>
+      <div className="mt-2 flex gap-2">
+        <button type="button" onClick={onListen} className="flex-1 rounded-xl border border-[var(--r-line)] py-2 text-sm hover:bg-black/5">Listen</button>
+        <button type="button" onClick={onStudy} disabled={studyBusy} className="flex-1 rounded-xl border border-[var(--r-line)] py-2 text-sm hover:bg-black/5 disabled:opacity-50">{studyBusy ? 'Building…' : 'Study this day'}</button>
+      </div>
+
+      {otherPlans.length > 0 && (
+        <>
+          <p className="mb-1 mt-4 text-[11px] uppercase tracking-wide text-[var(--r-sub)]">Other plans</p>
+          {otherPlans.map((o) => (
+            <button key={o.progress.id} type="button" onClick={() => onSwitchPlan(o)}
+              className="flex w-full items-center justify-between rounded-lg px-1 py-2 text-left text-sm hover:bg-black/5">
+              <span className="truncate">{o.plan.title}</span>
+              <span className="ml-3 shrink-0 text-xs text-[var(--r-sub)]">Day {o.dayIndex + 1}</span>
+            </button>
+          ))}
+        </>
+      )}
+      <button type="button" onClick={onLeave} className="mt-4 w-full text-center text-xs text-[var(--r-sub)] underline">Leave plan (keep reading on my own)</button>
+    </Sheet>
+  );
+}

src/components/reader/PlanStrip.jsx

@@ -0,0 +1,39 @@
+// Thin strip under the top bar while reading a plan: which plan and day, one dot
+// per chapter of today's reading (filled = read, ringed = the chapter on screen),
+// and the translation. Tapping it opens the plan sheet. When you've wandered off
+// today's chapters (e.g. following a cross-reference) it offers a way back.
+export default function PlanStrip({ info, translation, inPlan, notice, onOpen, onJoin, onDot, onBackToDay }) {
+  if (!info && !notice) return null;
+  return (
+    <div className="mx-auto flex max-w-2xl flex-col gap-1 px-3 pt-2 font-sans">
+      {notice && <p className="rounded-lg bg-[var(--r-bar)] px-3 py-1.5 text-xs text-[var(--r-accent)]">{notice}</p>}
+      {info && (
+        <div className="rounded-xl bg-[var(--r-bar)] px-3 py-2 text-xs text-[var(--r-sub)]">
+          <button type="button" onClick={inPlan ? onOpen : onJoin} className="flex w-full items-center justify-between gap-3 text-left">
+            <span className="truncate font-medium text-[var(--r-text)]">{info.plan.title} · Day {info.dayIndex + 1}</span>
+            <span className="shrink-0">{inPlan ? translation : 'Open plan'}</span>
+          </button>
+          {inPlan && info.position === 0 && (
+            <button type="button" onClick={onBackToDay} className="mt-1.5 rounded-full border border-[var(--r-line)] px-3 py-1 text-[11px] text-[var(--r-accent)] hover:bg-black/5">
+              Back to today’s reading
+            </button>
+          )}
+          {inPlan && info.position > 0 && (
+            <div className="mt-1.5 flex items-center gap-1.5">
+              {info.refs.map((r, i) => {
+                const key = `${r.book}.${r.chapter}`;
+                const read = info.readSet.has(key);
+                const current = i + 1 === info.position;
+                return (
+                  <button key={key} type="button" onClick={() => onDot(r)} aria-label={`Go to chapter ${r.chapter}`}
+                    className={`h-2.5 w-2.5 rounded-full border-[1.5px] ${read ? 'border-[var(--r-accent)] bg-[var(--r-accent)]' : 'border-[var(--r-sub)]'} ${current ? 'ring-2 ring-[var(--r-line)]' : ''}`} />
+                );
+              })}
+              <span className="ml-auto">{info.done ? 'Day read' : `${info.position} of ${info.total}`}</span>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

src/components/reader/ReaderBars.jsx

@@ -0,0 +1,64 @@
+// Top and bottom chrome for the reader. Everything stays one tap away; focus
+// mode hides both.
+import { ChevronLeft, ChevronRight, ChevronDown, SearchIcon, LinkIcon, PenIcon, HeadphonesIcon, FocusIcon, CheckIcon, CompareIcon, HighlighterIcon } from './icons.jsx';
+import { BookmarkIcon } from '../../utils/bibleUtils.jsx';
+
+const iconBtn = 'flex h-9 w-9 items-center justify-center rounded-lg text-[var(--r-sub)] transition hover:bg-black/5 disabled:opacity-30 disabled:hover:bg-transparent';
+
+export function TopBar({ title, onBack, onOpenNavigator, onSearch, onBookmarks, bookmarkCount, onHighlights, highlightCount, onCompare, compareActive, onSettings, onDoneDrawing }) {
+  return (
+    <div className="safe-top sticky top-0 z-30 border-b border-[var(--r-line)] bg-[var(--r-bar)] font-sans">
+      <div className="mx-auto flex h-12 max-w-4xl items-center gap-1 px-2">
+        <button type="button" onClick={onBack} className="flex h-9 items-center gap-0.5 rounded-lg pl-1 pr-2 text-[var(--r-sub)] transition hover:bg-black/5" aria-label="Back to home" data-tip="Back to home"><ChevronLeft /><span className="hidden text-xs sm:inline">Home</span></button>
+        <button type="button" onClick={onOpenNavigator}
+          className="mx-auto flex min-w-0 items-center gap-1.5 rounded-lg px-3 py-1.5 text-sm font-medium text-[var(--r-text)] hover:bg-black/5" data-tip="Go to a book and chapter (G)">
+          <span className="truncate">{title}</span><ChevronDown />
+        </button>
+        {onDoneDrawing ? (
+          <button type="button" onClick={onDoneDrawing}
+            className="mr-1 flex items-center gap-1.5 rounded-full bg-[var(--r-accent)] px-4 py-1.5 text-xs font-medium text-[var(--r-on)]">
+            <CheckIcon />Done drawing
+          </button>
+        ) : (
+          <>
+            <button type="button" onClick={onSearch} className={iconBtn} aria-label="Search" data-tip="Search (/)"><SearchIcon /></button>
+            <button type="button" onClick={onHighlights} className={`${iconBtn} ${highlightCount ? 'text-[var(--r-accent)]' : ''}`} aria-label="Highlights" data-tip="Your highlights, by colour (H)">
+              <HighlighterIcon />
+            </button>
+            <button type="button" onClick={onBookmarks} className={`${iconBtn} relative ${bookmarkCount ? 'text-[var(--r-accent)]' : ''}`} aria-label="Bookmarks" data-tip="Your bookmarks">
+              <BookmarkIcon filled={bookmarkCount > 0} />
+            </button>
+            <button type="button" onClick={onCompare} className={`${iconBtn} ${compareActive ? 'text-[var(--r-accent)]' : ''}`} aria-label="Compare translations" aria-pressed={!!compareActive} data-tip="Compare translations (C)"><CompareIcon /></button>
+            <button type="button" onClick={onSettings} className={`${iconBtn} w-10 text-sm font-medium`} aria-label="Reading settings" data-tip="Text size, typeface and theme (,)">Aa</button>
+          </>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export function BottomBar({
+  onPrev, onNext, prevDisabled, nextDisabled,
+  onAudio, audioActive, onPen, onCrossRefs, crossRefsOn, onFocus, primary,
+}) {
+  const active = 'text-[var(--r-accent)]';
+  return (
+    <div className="fixed inset-x-0 bottom-0 z-30 border-t border-[var(--r-line)] bg-[var(--r-bar)] pb-[env(safe-area-inset-bottom)] font-sans">
+      <div className="mx-auto flex h-14 max-w-4xl items-center gap-0.5 px-2">
+        <button type="button" onClick={onPrev} disabled={prevDisabled} className={iconBtn} aria-label="Previous chapter" data-tip="Previous chapter (←)"><ChevronLeft /></button>
+        <button type="button" onClick={onAudio} className={`${iconBtn} ${audioActive ? active : ''}`} aria-label="Listen" data-tip="Listen to this chapter"><HeadphonesIcon /></button>
+        <button type="button" onClick={onPen} className={iconBtn} aria-label="Draw notes" data-tip="Draw notes on this page"><PenIcon /></button>
+        <button type="button" onClick={onCrossRefs} className={`${iconBtn} ${crossRefsOn ? active : ''}`} aria-label="Show cross-references under verses" data-tip="Show cross-references under each verse"><LinkIcon /></button>
+        <button type="button" onClick={onFocus} className={iconBtn} aria-label="Hide controls" data-tip="Hide the controls (F)"><FocusIcon /></button>
+        <div className="mx-auto" />
+        {primary && (
+          <button type="button" onClick={primary.onClick}
+            className="mr-1 flex items-center gap-1.5 rounded-full bg-[var(--r-accent)] px-4 py-2 text-xs font-medium text-[var(--r-on)]">
+            {primary.done ? null : <CheckIcon />}{primary.label}
+          </button>
+        )}
+        <button type="button" onClick={onNext} disabled={nextDisabled} className={iconBtn} aria-label="Next chapter" data-tip="Next chapter (→)"><ChevronRight /></button>
+      </div>
+    </div>
+  );
+}

src/components/reader/ReaderText.jsx

@@ -0,0 +1,187 @@
+// The page itself: chapter heading, translation notice, and verses set in a
+// serif face. Tap a verse to open the verse sheet; select text to highlight.
+import { useMemo } from 'react';
+import { formatCrossRef } from '../../utils/wordStudy.js';
+import { diffChapter, differenceLabel } from '../../utils/textDiff.js';
+import { DiffText } from './DiffText.jsx';
+
+// How each typeface choice is set. "Easy to read" is a sans face with extra letter and word spacing.
+const FONT_STYLES = {
+  serif: { fontFamily: undefined },
+  sans: { fontFamily: "ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif" },
+  easy: { fontFamily: "'Atkinson Hyperlegible', Verdana, 'Trebuchet MS', ui-sans-serif, sans-serif", letterSpacing: '0.02em', wordSpacing: '0.12em' },
+};
+const LINE_HEIGHTS = { snug: 1.6, normal: 1.85, airy: 2.15 };
+
+// `parallel` ({ translation, name, notice, verses, loading, error }) shows a second Bible beside the first.
+export default function ReaderText({
+  title, translation, translationId, notice, verses, loading, error, layout, fontSize, wide,
+  font = 'serif', spacing = 'normal', showVerseNumbers = true, parallel = null, showDiff = true,
+  bookmarks, bookKey, chapter, selectedVerse, onSelectVerse, renderVerseText, searchLower,
+  crossRefs, showCrossRefs, onOpenCrossRef, onSelectionEnd, footer,
+}) {
+  // How much the second Bible's wording differs from the first, over the chapter and verse by verse
+  const diff = useMemo(
+    () => (parallel && showDiff && !parallel.loading && !parallel.error && parallel.verses?.length ? diffChapter(verses, parallel.verses) : null),
+    [parallel, showDiff, verses],
+  );
+  const diffByVerse = useMemo(() => new Map((diff?.verses ?? []).map((d) => [d.number, d])), [diff]);
+  const jumpToVerse = (n) => document.getElementById(`reader-verse-${n}`)?.scrollIntoView?.({ block: 'center', behavior: window.matchMedia?.('(prefers-reduced-motion: reduce)').matches ? 'auto' : 'smooth' });
+
+  const handleTap = (n) => {
+    const sel = window.getSelection();
+    if (sel && !sel.isCollapsed && sel.toString().trim()) return; // user is selecting text, not tapping
+    onSelectVerse(selectedVerse === n ? null : n);
+  };
+
+  const verseProps = (v) => {
+    const bm = bookmarks[`${bookKey}-${chapter}-${v.number}`];
+    const selected = selectedVerse === v.number;
+    return {
+      id: `reader-verse-${v.number}`,
+      'data-verse-num': v.number,
+      onClick: () => handleTap(v.number),
+      // Verses can be reached and chosen from the keyboard too
+      role: 'button',
+      tabIndex: 0,
+      'aria-pressed': selected,
+      onKeyDown: (e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); handleTap(v.number); } },
+      className: 'cursor-pointer rounded-sm transition-colors focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-[var(--r-accent)]',
+      style: selected
+        ? { backgroundColor: 'var(--r-hl)' }
+        : bm ? { backgroundColor: `${bm}66`, boxShadow: `0 0 0 2px ${bm}66` } : undefined,
+    };
+  };
+
+  const chips = (v) => showCrossRefs && crossRefs?.[v.number]?.length > 0 && (
+    <span className="ml-1 inline-flex flex-wrap gap-1 align-baseline font-sans">
+      {crossRefs[v.number].slice(0, 4).map((ref, i) => (
+        // Opens that passage in the side panel; stopPropagation so the verse itself isn't also toggled
+        <button key={i} type="button" onClick={(e) => { e.stopPropagation(); onOpenCrossRef?.(v.number, ref); }}
+          onKeyDown={(e) => e.stopPropagation()}
+          className="rounded-full border border-[var(--r-line)] px-1.5 py-px text-[10px] text-[var(--r-sub)] hover:border-[var(--r-accent)] hover:text-[var(--r-accent)]"
+          data-tip={`Read ${formatCrossRef(ref)} in the side panel`}>{formatCrossRef(ref)}</button>
+      ))}
+    </span>
+  );
+
+  const num = (n) => (showVerseNumbers ? <sup className="mr-1 select-none font-sans text-[0.6em] text-[var(--r-sub)]">{n}</sup> : null);
+
+  // Both Bibles by verse number, so a verse one translation leaves out still lines up with the other.
+  const parallelRows = parallel && !parallel.error ? (() => {
+    const second = new Map(parallel.verses.map((v) => [v.number, v]));
+    const first = new Map(verses.map((v) => [v.number, v]));
+    return [...new Set([...first.keys(), ...second.keys()])].sort((a, b) => a - b)
+      .map((n) => ({ number: n, first: first.get(n), second: second.get(n) }));
+  })() : null;
+  const sideBySide = !!parallel;
+  const bodyStyle = {
+    ...FONT_STYLES[font],
+    lineHeight: LINE_HEIGHTS[spacing] ?? LINE_HEIGHTS.normal,
+  };
+  // The page grows with the screen: type is 18px on a phone, ~20px on an iPad and ~24px on a big
+  // monitor (times your text-size choice), and the column is measured in the type's own width (em), so
+  // the line length stays comfortable (~70 characters) instead of becoming a narrow strip on a wide
+  // screen. Two columns / side-by-side take more room.
+  const pageStyle = {
+    fontSize: `calc(clamp(1.125rem, 0.9rem + 0.7vw, 1.55rem) * ${fontSize})`,
+    maxWidth: wide || sideBySide ? 'min(100%, 72em)' : 'min(100%, 40em)',
+  };
+
+  return (
+    <article
+      className="mx-auto px-5 pb-32 pt-6 text-[var(--r-text)] md:px-8"
+      style={pageStyle}
+      onPointerUp={onSelectionEnd}
+    >
+      <header className="mb-5 text-center">
+        <h1 className="font-serif text-3xl font-normal tracking-tight">{title}</h1>
+        <p className="mt-1 font-sans text-xs text-[var(--r-sub)]">{translation}{parallel ? ` · beside ${parallel.name}` : ''}</p>
+      </header>
+
+      {loading && <ChapterSkeleton />}
+      {error && <p role="alert" className="text-center font-sans text-sm text-[var(--r-danger,#b42318)]">{error}</p>}
+      {!loading && !error && parallel?.error && (
+        <p role="alert" className="mb-4 text-center font-sans text-sm text-[var(--r-danger,#b42318)]">Couldn’t load {parallel.name}: {parallel.error}</p>
+      )}
+
+      {!loading && !error && sideBySide && !parallel.error && (
+        <div style={bodyStyle} className="font-serif">
+          {diff && (
+            <div className="mb-4 rounded-xl border border-[var(--r-line)] bg-[var(--r-bar)] px-4 py-3 font-sans text-sm" style={{ fontSize: '0.875rem' }}>
+              <p>
+                <strong>{parallel.translation}</strong>{diff.similarity === 1 ? ' uses the same words as ' : <> is <strong>{differenceLabel(diff.similarity)}</strong> from </>}{translationId} in this chapter
+                {diff.total > 0 && <span className="text-[var(--r-sub)]"> · {diff.differing} of {diff.total} verses differ</span>}
+              </p>
+              {diff.mostDifferent.length > 0 && (
+                <p className="mt-1 text-xs text-[var(--r-sub)]">
+                  Most different:{' '}
+                  {diff.mostDifferent.map((v, i) => (
+                    <span key={v.number}>{i > 0 && ', '}<button type="button" onClick={() => jumpToVerse(v.number)} className="font-medium text-[var(--r-accent)] hover:underline">verse {v.number}</button> ({Math.round((1 - v.similarity) * 100)}%)</span>
+                  ))}
+                </p>
+              )}
+              <p className="mt-1 text-xs text-[var(--r-sub)]"><span className="diff-hl">Marked words</span> aren’t in the other wording.</p>
+            </div>
+          )}
+          <div className="mb-3 hidden grid-cols-2 gap-x-10 border-b border-[var(--r-line)] pb-1 font-sans text-[11px] uppercase tracking-wide text-[var(--r-sub)] md:grid">
+            <span>{translationId}</span><span>{parallel.translation}</span>
+          </div>
+          {parallelRows.map((row) => (
+            <div key={row.number} className="mb-4 grid gap-x-10 gap-y-1 md:grid-cols-2">
+              <p>
+                {row.first
+                  ? <span {...verseProps(row.first)}>{num(row.first.number)}{renderVerseText(row.first.number, row.first.text, searchLower, diffByVerse.get(row.number)?.a)}{chips(row.first)}</span>
+                  : <span className="text-[var(--r-sub)]">{num(row.number)}—</span>}
+              </p>
+              <p className="border-l-2 border-[var(--r-line)] pl-3 text-[0.95em] text-[var(--r-sub)] md:border-l-0 md:pl-0 md:text-[var(--r-text)]">
+                <span className="mr-1.5 font-sans text-[10px] uppercase tracking-wide md:hidden">{parallel.translation}</span>
+                {row.second ? <>{num(row.second.number)}<DiffText text={row.second.text} ranges={diffByVerse.get(row.number)?.b} />{diffByVerse.get(row.number) && !diffByVerse.get(row.number).same && (
+                  <span className="ml-2 whitespace-nowrap font-sans text-[10px] text-[var(--r-sub)]">{differenceLabel(diffByVerse.get(row.number).similarity)}</span>
+                )}</> : parallel.loading ? <span className="font-sans text-xs" aria-label="Loading">…</span> : '—'}
+              </p>
+            </div>
+          ))}
+        </div>
+      )}
+
+      {!loading && !error && !sideBySide && (
+        <div
+          className={`font-serif ${wide ? 'md:columns-2 md:gap-x-12' : ''}`}
+          style={bodyStyle}
+        >
+          {layout === 'flow' ? (
+            <p className="text-pretty">
+              {verses.map((v) => (
+                <span key={v.number} {...verseProps(v)}>
+                  {num(v.number)}{renderVerseText(v.number, v.text, searchLower)}{chips(v)}{' '}
+                </span>
+              ))}
+            </p>
+          ) : (
+            verses.map((v) => (
+              <p key={v.number} className="mb-3 break-inside-avoid">
+                <span {...verseProps(v)}>{num(v.number)}{renderVerseText(v.number, v.text, searchLower)}{chips(v)}</span>
+              </p>
+            ))
+          )}
+        </div>
+      )}
+
+      {!loading && !error && <div style={{ fontSize: '1rem' }}>{footer}</div>}
+
+      {notice && !loading && <p className="mt-10 border-t border-[var(--r-line)] pt-3 font-sans text-[11px] leading-snug text-[var(--r-sub)]">{notice}</p>}
+      {parallel?.notice && !loading && !parallel.loading && <p className="mt-2 font-sans text-[11px] leading-snug text-[var(--r-sub)]">{parallel.notice}</p>}
+    </article>
+  );
+}
+
+// Grey bars the shape of a page, so a slow chapter load doesn't just show the word "Loading".
+function ChapterSkeleton() {
+  return (
+    <div role="status" aria-label="Loading chapter" className="animate-pulse motion-reduce:animate-none space-y-3 pt-2">
+      {[100, 96, 92, 98, 84, 100, 90, 70].map((w, i) => <div key={i} className="h-4 rounded bg-[var(--r-line)]" style={{ width: `${w}%` }} />)}
+      <span className="sr-only">Loading…</span>
+    </div>
+  );
+}

src/components/reader/ReaderText.test.jsx

@@ -0,0 +1,53 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import { vi, test, expect } from 'vitest';
+import ReaderText from './ReaderText.jsx';
+
+const verses = [
+  { number: 1, text: 'In the beginning God created the heavens and the earth.' },
+  { number: 2, text: 'Now the earth was formless and void.' },
+];
+const second = [
+  { number: 1, text: 'In the beginning God created the heavens and the earth.' },
+  { number: 2, text: 'Now the earth was without shape and empty.' },
+];
+const base = {
+  title: 'Genesis 1', translation: 'Berean Standard Bible', translationId: 'BSB', notice: '', verses, loading: false, error: '',
+  layout: 'flow', fontSize: 1, wide: false, bookmarks: {}, bookKey: 'GEN', chapter: 1, selectedVerse: null,
+  onSelectVerse: vi.fn(), renderVerseText: (_n, text) => text, searchLower: '', crossRefs: null, showCrossRefs: false, onSelectionEnd: vi.fn(),
+};
+const parallel = (over = {}) => ({ translation: 'NET', name: 'NET Bible', notice: '', verses: second, loading: false, error: '', ...over });
+
+test('side by side, it says how different the other Bible is and marks the differing words', () => {
+  const { container } = render(<ReaderText {...base} parallel={parallel()} showDiff />);
+  expect(screen.getByText(/is/, { selector: 'p' })).toHaveTextContent(/NET is \d+% different from BSB in this chapter/);
+  expect(screen.getByText(/1 of 2 verses differ/)).toBeInTheDocument();
+  const marked = [...container.querySelectorAll('.diff-hl')].map((n) => n.textContent);
+  expect(marked).toContain('without shape'); // the other Bible's side
+  expect(screen.getByRole('button', { name: /verse 2/i })).toBeInTheDocument(); // the most different verse
+  expect(screen.getByText(/% different/, { selector: 'span.ml-2' })).toBeInTheDocument(); // per-verse figure
+});
+
+test('identical wording is reported as the same words', () => {
+  render(<ReaderText {...base} parallel={parallel({ verses })} showDiff />);
+  expect(screen.getByText(/uses the same words as/)).toBeInTheDocument();
+});
+
+test('with highlighting off there is no summary and no marks', () => {
+  const { container } = render(<ReaderText {...base} parallel={parallel()} showDiff={false} />);
+  expect(screen.queryByText(/different from BSB/)).not.toBeInTheDocument();
+  expect(container.querySelectorAll('.diff-hl')).toHaveLength(0);
+});
+
+test('while the other Bible loads there is no comparison yet, and the first Bible still shows', () => {
+  render(<ReaderText {...base} parallel={parallel({ verses: [], loading: true })} showDiff />);
+  expect(screen.queryByText(/different from BSB/)).not.toBeInTheDocument();
+  expect(screen.getAllByText(/In the beginning God created/).length).toBeGreaterThan(0);
+});
+
+test('the left Bible gets its own differing words passed to the verse renderer', () => {
+  const renderVerseText = vi.fn((_n, text) => text);
+  render(<ReaderText {...base} renderVerseText={renderVerseText} parallel={parallel()} showDiff />);
+  const call = renderVerseText.mock.calls.find(([n]) => n === 2);
+  expect(call[3].map((r) => verses[1].text.slice(r.start, r.end))).toEqual(['formless', 'void']);
+  fireEvent.click(screen.getByRole('button', { name: /verse 2/i })); // jumping must not throw even if the element is absent
+});

src/components/reader/SearchSheet.jsx

@@ -0,0 +1,111 @@
+// Search this chapter, or the whole Bible in the translation being read.
+// BSB and NET are downloaded once and searched in the browser; ESV, NLT, CSB and
+// NASB are searched through the server (their licences don't allow a bulk copy).
+import { useMemo } from 'react';
+import Sheet from './Sheet.jsx';
+import { SearchIcon } from './icons.jsx';
+import { bookOptions } from '../../utils/bibleUtils.jsx';
+
+const nameFor = (abbrev) => bookOptions.find((b) => b.abbrev === abbrev)?.name ?? abbrev;
+const escapeRegExp = (s) => s.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+
+// Wraps each searched word (quotes ignored) in <mark>.
+function highlight(text, query) {
+  const words = [...new Set(query.toLowerCase().replace(/["“”]/g, ' ').split(/\s+/).filter((w) => w.length > 1))];
+  if (!words.length) return text;
+  const re = new RegExp(`(${words.map(escapeRegExp).join('|')})`, 'gi');
+  return text.split(re).map((part, i) => (i % 2 === 1
+    ? <mark key={i} className="rounded bg-[var(--r-hl)] px-0.5 text-[var(--r-text)]">{part}</mark>
+    : part));
+}
+
+export default function SearchSheet({
+  open, onClose, query, onQuery, scope, onScope, verses, bookName, chapter, currentBook, translation,
+  isLocal, indexStatus, onLoadIndex, bibleMatches, deferredBibleQuery, remote, onJump,
+}) {
+  const q = query.trim().toLowerCase();
+  const chapterMatches = useMemo(
+    () => (scope === 'chapter' && q ? verses.filter((v) => v.text.toLowerCase().includes(q)) : []),
+    [scope, q, verses],
+  );
+
+  const scopeBtn = (id, label, onClick) => (
+    <button type="button" onClick={onClick}
+      className={`px-3 py-1.5 text-xs ${scope === id ? 'bg-[var(--r-text)] text-[var(--r-bg)]' : 'text-[var(--r-sub)] hover:bg-black/5'}`}>{label}</button>
+  );
+  const note = (text) => <p className="text-sm text-[var(--r-sub)]">{text}</p>;
+  const resultRow = (r) => (
+    <button key={`${r.bookAbbrev}-${r.chapter}-${r.verse}`} type="button" onClick={() => onJump(r.bookAbbrev, r.chapter, r.verse)}
+      className="block w-full rounded-lg px-2 py-2 text-left text-sm hover:bg-black/5">
+      <span className="mr-1.5 font-medium">{nameFor(r.bookAbbrev)} {r.chapter}:{r.verse}</span>{highlight(r.text, query)}
+    </button>
+  );
+
+  return (
+    <Sheet open={open} onClose={onClose} title="Search">
+      <div className="mb-3 flex items-center gap-2 rounded-xl border border-[var(--r-line)] bg-[var(--r-bg)] px-3 py-2">
+        <span className="text-[var(--r-sub)]"><SearchIcon /></span>
+        <input autoFocus value={query} onChange={(e) => onQuery(e.target.value)}
+          placeholder={scope === 'bible' ? `Search the whole Bible (${translation})…` : `Search ${bookName} ${chapter}…`}
+          className="min-w-0 flex-1 bg-transparent text-sm text-[var(--r-text)] outline-none placeholder:text-[var(--r-sub)]" />
+      </div>
+      <div className="mb-3 inline-flex overflow-hidden rounded-lg border border-[var(--r-line)]">
+        {scopeBtn('chapter', 'This chapter', () => onScope('chapter'))}
+        {scopeBtn('bible', `Whole Bible (${translation})`, () => { onScope('bible'); if (isLocal && indexStatus === 'idle') onLoadIndex(); })}
+      </div>
+
+      {scope === 'chapter' && (
+        !q ? note('Type a word to find it in this chapter.')
+          : chapterMatches.length === 0 ? note(`No verses match “${query}”.`)
+            : chapterMatches.map((v) => (
+              <button key={v.number} type="button" onClick={() => onJump(currentBook, chapter, v.number)}
+                className="block w-full rounded-lg px-2 py-2 text-left text-sm hover:bg-black/5">
+                <span className="mr-1.5 font-medium">{v.number}</span>{highlight(v.text, query)}
+              </button>
+            ))
+      )}
+
+      {scope === 'bible' && isLocal && (
+        <>
+          {indexStatus === 'loading' && note('Loading the full Bible for search. This happens once per visit (about 7 MB).')}
+          {indexStatus === 'error' && <p className="text-sm text-[var(--r-danger,#b42318)]">Couldn’t load the full Bible. <button type="button" onClick={onLoadIndex} className="underline">Try again</button></p>}
+          {indexStatus === 'ready' && (!deferredBibleQuery
+            ? note('Type a word to search all 66 books.')
+            : bibleMatches.length === 0
+              ? note(`No verses match “${query}”.`)
+              : (
+                <>
+                  <p className="mb-2 text-[11px] uppercase tracking-wide text-[var(--r-sub)]">
+                    {bibleMatches.length} match{bibleMatches.length === 1 ? '' : 'es'}{bibleMatches.length > 100 ? ' (showing first 100)' : ''}
+                  </p>
+                  {bibleMatches.slice(0, 100).map(resultRow)}
+                </>
+              ))}
+        </>
+      )}
+
+      {scope === 'bible' && !isLocal && (
+        <>
+          {remote.tooShort && note('Type at least two letters. Use quotes for an exact phrase, like “good shepherd”.')}
+          {!remote.tooShort && remote.error && <p className="text-sm text-[var(--r-danger,#b42318)]">{remote.error}</p>}
+          {!remote.tooShort && !remote.error && remote.loading && remote.results.length === 0 && note('Searching…')}
+          {!remote.tooShort && !remote.error && !remote.loading && remote.total === 0 && remote.page > 0 && note(`No verses match “${query}”.`)}
+          {remote.results.length > 0 && (
+            <>
+              <p className="mb-2 text-[11px] uppercase tracking-wide text-[var(--r-sub)]">
+                {remote.total} match{remote.total === 1 ? '' : 'es'} in {translation}
+              </p>
+              {remote.results.map(resultRow)}
+              {remote.hasMore && (
+                <button type="button" onClick={remote.loadMore} disabled={remote.loading}
+                  className="mt-2 w-full rounded-lg border border-[var(--r-line)] py-2 text-sm text-[var(--r-sub)] hover:bg-black/5 disabled:opacity-50">
+                  {remote.loading ? 'Loading…' : 'Show more'}
+                </button>
+              )}
+            </>
+          )}
+        </>
+      )}
+    </Sheet>
+  );
+}

src/components/reader/SearchSheet.test.jsx

@@ -0,0 +1,30 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import { test, expect, vi } from 'vitest';
+import SearchSheet from './SearchSheet.jsx';
+
+const base = {
+  open: true, onClose: () => {}, query: 'shepherd', onQuery: () => {}, scope: 'bible', onScope: () => {},
+  verses: [], bookName: 'John', chapter: 3, currentBook: 'JHN', translation: 'NLT', isLocal: false,
+  indexStatus: 'idle', onLoadIndex: () => {}, bibleMatches: [], deferredBibleQuery: '',
+};
+
+test('server-searched translations list results with highlights and jump on tap', () => {
+  const onJump = vi.fn();
+  const remote = {
+    tooShort: false, loading: false, error: '', page: 1, total: 2, hasMore: true, loadMore: vi.fn(),
+    results: [{ bookAbbrev: 'GEN', chapter: 4, verse: 2, text: 'Abel became a shepherd.' }, { bookAbbrev: 'PSA', chapter: 23, verse: 1, text: 'The Lord is my shepherd.' }],
+  };
+  render(<SearchSheet {...base} remote={remote} onJump={onJump} />);
+  expect(screen.getByText('2 matches in NLT')).toBeTruthy();
+  expect(screen.getAllByText('shepherd')[0].tagName).toBe('MARK');
+  fireEvent.click(screen.getByText(/Genesis 4:2/));
+  expect(onJump).toHaveBeenCalledWith('GEN', 4, 2);
+  fireEvent.click(screen.getByText('Show more'));
+  expect(remote.loadMore).toHaveBeenCalled();
+});
+
+test('shows the server error, e.g. a rate limit', () => {
+  const remote = { tooShort: false, loading: false, error: 'ESV rate limit reached. Try again in a minute.', page: 0, total: 0, hasMore: false, loadMore: () => {}, results: [] };
+  render(<SearchSheet {...base} translation="ESV" remote={remote} onJump={() => {}} />);
+  expect(screen.getByText(/rate limit/)).toBeTruthy();
+});

src/components/reader/SettingsSheet.jsx

@@ -0,0 +1,59 @@
+// "Aa" sheet: text size, typeface, spacing, theme, how verses are laid out, and a second Bible
+// to read beside the first.
+import Sheet from './Sheet.jsx';
+import { READER_THEMES } from './readerThemes.js';
+
+const SIZES = [['S', 0.875], ['M', 1], ['L', 1.125], ['XL', 1.25], ['XXL', 1.5]];
+
+function Segmented({ options, value, onChange, label }) {
+  return (
+    <div role="group" aria-label={label} className="flex overflow-hidden rounded-xl border border-[var(--r-line)]">
+      {options.map(([id, text]) => (
+        <button key={String(id)} type="button" onClick={() => onChange(id)} aria-pressed={value === id}
+          className={`flex-1 px-3 py-2 text-sm ${value === id ? 'bg-[var(--r-text)] text-[var(--r-bg)]' : 'text-[var(--r-sub)] hover:bg-black/5'}`}>
+          {text}
+        </button>
+      ))}
+    </div>
+  );
+}
+
+export default function SettingsSheet({
+  open, onClose, fontSize, onFontSize, theme, onTheme, layout, onLayout, wide, onWide,
+  font, onFont, spacing, onSpacing, verseNumbers, onVerseNumbers,
+}) {
+  const row = 'mb-4';
+  const label = 'mb-1.5 block text-xs text-[var(--r-sub)]';
+  return (
+    <Sheet open={open} onClose={onClose} title="Reading settings">
+      <div className={row}>
+        <span className={label}>Text size</span>
+        <Segmented label="Text size" options={SIZES.map(([l, s]) => [s, l])} value={fontSize} onChange={onFontSize} />
+      </div>
+      <div className={row}>
+        <span className={label}>Typeface</span>
+        <Segmented label="Typeface" options={[['serif', 'Serif'], ['sans', 'Sans'], ['easy', 'Easy to read']]} value={font} onChange={onFont} />
+      </div>
+      <div className={row}>
+        <span className={label}>Line spacing</span>
+        <Segmented label="Line spacing" options={[['snug', 'Snug'], ['normal', 'Normal'], ['airy', 'Airy']]} value={spacing} onChange={onSpacing} />
+      </div>
+      <div className={row}>
+        <span className={label}>Theme</span>
+        <Segmented label="Theme" options={Object.entries(READER_THEMES).map(([id, t]) => [id, t.label])} value={theme} onChange={onTheme} />
+      </div>
+      <div className={row}>
+        <span className={label}>Verses</span>
+        <Segmented label="Verse layout" options={[['flow', 'Flowing'], ['verses', 'One per line']]} value={layout} onChange={onLayout} />
+      </div>
+      <div className={row}>
+        <span className={label}>Verse numbers</span>
+        <Segmented label="Verse numbers" options={[[true, 'Show'], [false, 'Hide']]} value={verseNumbers} onChange={onVerseNumbers} />
+      </div>
+      <div className={row}>
+        <span className={label}>Width</span>
+        <Segmented label="Reading width" options={[[false, 'Column'], [true, 'Two columns']]} value={wide} onChange={onWide} />
+      </div>
+    </Sheet>
+  );
+}

src/components/reader/Sheet.jsx

@@ -0,0 +1,68 @@
+// Slide-up sheet used for every reader tool. `modal` sheets dim the page and
+// close on outside tap; non-modal ones (the verse sheet) leave the text
+// tappable. With `pane`, screens >= lg show it as a right-hand side pane
+// instead of a bottom sheet (tablet landscape / desktop).
+import { useEffect, useRef } from 'react';
+import { CloseIcon } from './icons.jsx';
+
+const FOCUSABLE = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+
+export default function Sheet({ open, onClose, title, label, headerRight, modal = true, pane = false, panelRef, edge, children }) {
+  const dialogRef = useRef(null);
+  const onCloseRef = useRef(onClose);
+  onCloseRef.current = onClose;
+
+  // Modal sheets behave like dialogs: focus moves in, Tab stays inside, Escape closes, and focus
+  // returns to whatever opened the sheet. (The verse pane is not modal, so it leaves focus alone.)
+  useEffect(() => {
+    if (!open || !modal) return undefined;
+    const opener = document.activeElement;
+    const dialog = dialogRef.current;
+    if (dialog && !dialog.contains(document.activeElement)) dialog.focus({ preventScroll: true });
+    const onKey = (e) => {
+      if (e.key === 'Escape') { e.stopPropagation(); onCloseRef.current?.(); return; }
+      if (e.key !== 'Tab' || !dialog) return;
+      const items = [...dialog.querySelectorAll(FOCUSABLE)].filter((el) => el.offsetParent !== null || el === document.activeElement);
+      if (items.length === 0) { e.preventDefault(); return; }
+      const first = items[0];
+      const last = items[items.length - 1];
+      if (e.shiftKey && (document.activeElement === first || document.activeElement === dialog)) { e.preventDefault(); last.focus(); }
+      else if (!e.shiftKey && document.activeElement === last) { e.preventDefault(); first.focus(); }
+    };
+    document.addEventListener('keydown', onKey);
+    return () => {
+      document.removeEventListener('keydown', onKey);
+      if (opener instanceof HTMLElement && document.contains(opener)) opener.focus({ preventScroll: true });
+    };
+  }, [open, modal]);
+
+  if (!open) return null;
+  return (
+    <>
+      {modal && <div className="fixed inset-0 z-40 bg-black/30" onClick={onClose} aria-hidden="true" />}
+      <div
+        ref={(el) => { dialogRef.current = el; if (panelRef) panelRef.current = el; }}
+        role="dialog"
+        aria-modal={modal ? 'true' : undefined}
+        aria-label={typeof title === 'string' ? title : label}
+        tabIndex={-1}
+        className={`fixed inset-x-0 bottom-0 z-50 flex max-h-[72vh] flex-col rounded-t-2xl focus:outline-none border-t border-[var(--r-line)] bg-[var(--r-bar)] text-[var(--r-text)] font-sans ${
+          pane ? 'lg:inset-x-auto lg:bottom-0 lg:right-0 lg:top-12 lg:max-h-none lg:w-[var(--reader-pane,24rem)] lg:rounded-none lg:border-l lg:border-t-0' : 'sm:left-1/2 sm:right-auto sm:w-[36rem] sm:-translate-x-1/2'
+        }`}
+      >
+        {edge}
+        <div className="mx-auto mt-2 h-1 w-9 shrink-0 rounded-full bg-[var(--r-line)] lg:hidden" />
+        <div className="flex items-center justify-between gap-2 px-4 pb-2 pt-2">
+          <div className="min-w-0 truncate text-sm font-medium">{title}</div>
+          <div className="flex items-center gap-1 text-[var(--r-sub)]">
+            {headerRight}
+            <button type="button" onClick={onClose} aria-label="Close" className="rounded-lg p-1.5 hover:bg-black/5">
+              <CloseIcon />
+            </button>
+          </div>
+        </div>
+        <div className="min-h-0 flex-1 overflow-y-auto px-4 pb-6">{children}</div>
+      </div>
+    </>
+  );
+}

src/components/reader/VerseSheet.jsx

@@ -0,0 +1,250 @@
+// The single home for per-verse tools: original words, cross-references,
+// commentary, and people & places, plus bookmark / copy.
+import { useEffect, useRef, useState } from 'react';
+import Sheet from './Sheet.jsx';
+import { CommentaryTab, PeoplePlacesTab } from '../StudyPanel.jsx';
+import { BookmarkIcon, CopyIcon } from '../../utils/bibleUtils.jsx';
+import { formatCrossRef, speakOriginalWord } from '../../utils/wordStudy.js';
+import { READER_TRANSLATIONS, fetchChapter } from '../../utils/bibleText.js';
+import { diffVerses, differenceLabel } from '../../utils/textDiff.js';
+import { DiffText } from './DiffText.jsx';
+import { HIGHLIGHT_COLORS, colorTitle } from '../../utils/highlightColors.js';
+import { useIqAvailable } from '../../hooks/useIq.js';
+import IqLexicon from '../iq/IqLexicon.jsx';
+import IqStudyAids from '../iq/IqStudyAids.jsx';
+
+const BASE_TABS = [['commentary', 'Commentary'], ['compare', 'Compare'], ['original', 'Original'], ['refs', 'Cross-refs'], ['people', 'People & places']];
+
+function OriginalTab({ words }) {
+  const iq = useIqAvailable();
+  const [lookup, setLookup] = useState(null); // the Strong's number open in the lexicon panel
+  if (!words) return <p className="text-sm text-[var(--r-sub)]">No original-language data for this verse.</p>;
+  return (
+    <>
+    <div className="flex flex-wrap gap-2">
+      {words.map((w, i) => {
+        const isHebrew = w.s?.startsWith('H');
+        const canSpeak = isHebrew || w.s?.startsWith('G');
+        return (
+          <div key={i} className="rounded-xl border border-[var(--r-line)] bg-[var(--r-bg)] p-2 text-center" style={{ minWidth: '4.5rem', maxWidth: '9rem' }}>
+            <div className={`text-lg leading-tight ${isHebrew ? 'font-serif' : ''}`} dir={isHebrew ? 'rtl' : 'ltr'}>{w.o}</div>
+            <div className="mt-0.5 text-xs italic text-[var(--r-sub)]">{w.t}</div>
+            <div className="mt-1 text-xs font-medium">{w.g}</div>
+            {w.p && <div className="mt-0.5 text-[10px] leading-tight text-[var(--r-sub)]">{w.p}</div>}
+            {w.s && <div className="mt-0.5 text-[10px] text-[var(--r-sub)]">{w.s}</div>}
+            {canSpeak && (
+              <button type="button" onClick={() => speakOriginalWord(w.o, w.s)}
+                className="mt-1.5 rounded-lg bg-[var(--r-bar)] px-2 py-0.5 text-[11px] hover:bg-black/5"
+                title={`Pronounce in ${isHebrew ? 'Hebrew' : 'Greek'}`}>Speak</button>
+            )}
+            {iq && w.s && (
+              <button type="button" onClick={() => setLookup((cur) => (cur === w.s ? null : w.s))} aria-pressed={lookup === w.s}
+                className="mt-1.5 ml-1 rounded-lg bg-[var(--r-bar)] px-2 py-0.5 text-[11px] hover:bg-black/5" title="Look this word up in the lexicons">Lexicon</button>
+            )}
+          </div>
+        );
+      })}
+    </div>
+    {lookup && <IqLexicon strongs={lookup} onClose={() => setLookup(null)} />}
+    </>
+  );
+}
+
+// A cross-referenced passage shown in the panel: its words in the translation being read, without
+// leaving the chapter. "Open chapter" goes there when you want more.
+function RefPreview({ refItem, translation, onOpen, onClose }) {
+  const [state, setState] = useState({ key: '', verses: [], error: '' });
+  const key = `${translation}/${refItem.book}/${refItem.chapter}`;
+  useEffect(() => {
+    const controller = new AbortController();
+    fetchChapter(translation, refItem.book, refItem.chapter, { signal: controller.signal })
+      .then(({ verses }) => setState({ key, verses, error: '' }))
+      .catch((err) => { if (!controller.signal.aborted) setState({ key, verses: [], error: err.message || 'Unable to load that passage.' }); });
+    return () => controller.abort();
+  }, [key]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const end = refItem.endVerse && refItem.endVerse > refItem.verse ? refItem.endVerse : refItem.verse;
+  const picked = state.key === key ? state.verses.filter((v) => v.number >= refItem.verse && v.number <= end) : [];
+  const loading = state.key !== key;
+  return (
+    <div className="mb-3 rounded-xl border border-[var(--r-line)] bg-[var(--r-bg)] p-3" role="region" aria-label={`Cross-reference ${formatCrossRef(refItem)}`}>
+      <div className="mb-1.5 flex items-center justify-between gap-2">
+        <p className="text-sm font-medium">{formatCrossRef(refItem)} <span className="text-xs font-normal text-[var(--r-sub)]">{translation}</span></p>
+        <button type="button" onClick={onClose} aria-label="Close cross-reference" className="rounded p-1 text-[var(--r-sub)] hover:bg-black/5">×</button>
+      </div>
+      {loading ? <p className="text-sm text-[var(--r-sub)]">Loading…</p>
+        : state.error ? <p className="text-sm text-[var(--r-danger,#b42318)]">{state.error}</p>
+          : picked.length === 0 ? <p className="text-sm text-[var(--r-sub)]">Those verses weren’t found.</p>
+            : (
+              <p className="font-serif text-[15px] leading-relaxed">
+                {picked.map((v) => <span key={v.number}>{picked.length > 1 && <sup className="mr-0.5 font-sans text-[0.65em] text-[var(--r-sub)]">{v.number}</sup>}{v.text}{' '}</span>)}
+              </p>
+            )}
+      <button type="button" onClick={() => onOpen(refItem.book, refItem.chapter, refItem.verse)} className="mt-2 text-xs font-medium text-[var(--r-accent)] hover:underline">Open chapter</button>
+    </div>
+  );
+}
+
+const sameRef = (a, b) => a && b && a.book === b.book && a.chapter === b.chapter && a.verse === b.verse && (a.endVerse ?? a.verse) === (b.endVerse ?? b.verse);
+
+function RefsTab({ refs, loading, active, onPick, preview }) {
+  if (loading && !refs) return <p className="text-sm text-[var(--r-sub)]">Loading…</p>;
+  if (!refs?.length) return <p className="text-sm text-[var(--r-sub)]">No cross-references for this verse.</p>;
+  return (
+    <>
+      {preview}
+      <p className="mb-1.5 text-[11px] text-[var(--r-sub)]">Tap one to read it here.</p>
+      <div className="flex flex-wrap gap-1.5">
+        {refs.slice(0, 20).map((ref, i) => (
+          <button key={i} type="button" onClick={() => onPick(ref)} aria-pressed={sameRef(active, ref)}
+            className={`rounded-full border px-2.5 py-1 text-xs ${sameRef(active, ref) ? 'border-[var(--r-text)] bg-[var(--r-text)] text-[var(--r-bg)]' : 'border-[var(--r-line)] hover:bg-black/5'}`}>
+            {formatCrossRef(ref)}
+          </button>
+        ))}
+      </div>
+    </>
+  );
+}
+
+// This verse in every translation, one under the other. Each Bible loads the chapter it is in
+// (BSB and NET come from the free source; the rest through the server) and shows this verse.
+function CompareTab({ book, chapter, verse, current }) {
+  const [rows, setRows] = useState({}); // id -> { text } | { error } | undefined while loading
+  useEffect(() => {
+    const controller = new AbortController();
+    setRows({});
+    READER_TRANSLATIONS.forEach((t) => {
+      fetchChapter(t.id, book, chapter, { signal: controller.signal })
+        .then(({ verses }) => {
+          const text = verses.find((v) => v.number === verse)?.text;
+          setRows((r) => ({ ...r, [t.id]: text ? { text } : { error: 'No verse here in this translation.' } }));
+        })
+        .catch((err) => { if (!controller.signal.aborted) setRows((r) => ({ ...r, [t.id]: { error: err.message || 'Unavailable.' } })); });
+    });
+    return () => controller.abort();
+  }, [book, chapter, verse]);
+
+  const mine = rows[current]?.text;
+  return (
+    <div className="space-y-3">
+      {READER_TRANSLATIONS.map((t) => {
+        const row = rows[t.id];
+        // How this wording differs from the Bible being read, word by word
+        const d = row?.text && mine && t.id !== current ? diffVerses(mine, row.text) : null;
+        return (
+          <div key={t.id}>
+            <p className="mb-0.5 flex items-center gap-2 text-[11px] uppercase tracking-wide text-[var(--r-sub)]">
+              <span>{t.id}{t.id === current ? ' · reading' : ''}</span>
+              {d && <span className="normal-case tracking-normal">{differenceLabel(d.similarity)}</span>}
+            </p>
+            {!row ? <p className="text-sm text-[var(--r-sub)]">Loading…</p>
+              : row.error ? <p className="text-sm text-[var(--r-sub)]">{row.error}</p>
+                : <p className="font-serif text-[15px] leading-relaxed"><DiffText text={row.text} ranges={d?.b} /></p>}
+          </div>
+        );
+      })}
+      <p className="border-t border-[var(--r-line)] pt-2 text-[10px] leading-snug text-[var(--r-sub)]">
+        {mine ? <><span className="diff-hl">Marked words</span> aren’t in the {current} wording. </> : null}
+        Copyright notices for each translation appear at the foot of the chapter when you read it.
+      </p>
+    </div>
+  );
+}
+
+export default function VerseSheet({
+  verse, book, bookName, chapter, translation, words, crossRefs, crossRefsLoading, onLoadCrossRefs,
+  bookmarkColor, onToggleBookmark, onCycleColor, onJump, onClose, request,
+  verseHighlights = [], colorLabels = {}, onHighlightVerse, onClearVerseHighlights, panelRef, resizeHandle,
+}) {
+  const iqOn = useIqAvailable();
+  const TABS = iqOn ? [...BASE_TABS, ['aids', 'Study aids']] : BASE_TABS;
+  const [tab, setTab] = useState('commentary');
+  const [copied, setCopied] = useState(false);
+  const [preview, setPreview] = useState(null); // the cross-reference being read in the panel
+  const appliedRequest = useRef(0);
+  // Leaving this verse closes the preview; a cross-reference tapped in the text opens it here. (Tracks the
+  // previous verse so React's double-run of effects in development can't clear a preview it just opened.)
+  const previousVerse = useRef(null);
+  useEffect(() => {
+    const verseChanged = previousVerse.current !== verse?.number;
+    previousVerse.current = verse?.number;
+    if (request && request.verse === verse?.number && request.n !== appliedRequest.current) {
+      appliedRequest.current = request.n;
+      setTab('refs');
+      setPreview(request.ref);
+    } else if (verseChanged) {
+      setPreview(null);
+    }
+  }, [verse?.number, request?.n]); // eslint-disable-line react-hooks/exhaustive-deps
+  useEffect(() => { if (verse && tab === 'refs') onLoadCrossRefs(); }, [verse?.number, tab]); // eslint-disable-line react-hooks/exhaustive-deps
+  useEffect(() => { setCopied(false); }, [verse?.number]);
+  if (!verse) return null;
+
+  const copy = () => {
+    navigator.clipboard?.writeText(`${bookName} ${chapter}:${verse.number} ${translation} — ${verse.text}`);
+    setCopied(true);
+    window.setTimeout(() => setCopied(false), 1500);
+  };
+  const actionBtn = 'rounded-lg p-1.5 hover:bg-black/5';
+
+  return (
+    <Sheet
+      open modal={false} pane onClose={onClose} panelRef={panelRef} edge={resizeHandle}
+      title={`${bookName} ${chapter}:${verse.number}`}
+      headerRight={(
+        <>
+          <button type="button" onClick={onToggleBookmark} className={`${actionBtn} ${bookmarkColor ? 'text-[var(--r-accent)]' : ''}`} aria-label={bookmarkColor ? 'Remove bookmark' : 'Bookmark verse'}>
+            <BookmarkIcon filled={!!bookmarkColor} />
+          </button>
+          {bookmarkColor && (
+            <button type="button" onClick={onCycleColor} className={actionBtn} aria-label="Change bookmark colour">
+              <span className="block h-4 w-4 rounded-full border border-black/10" style={{ backgroundColor: bookmarkColor }} />
+            </button>
+          )}
+          <button type="button" onClick={copy} className={actionBtn} aria-label="Copy verse">
+            {copied ? <span className="px-1 text-xs">Copied</span> : <CopyIcon />}
+          </button>
+        </>
+      )}
+    >
+      {onHighlightVerse && (
+        // One-tap highlighting of the whole verse (to mark just some words, select them in the text)
+        <div className="mb-3 flex flex-wrap items-center gap-1.5" role="group" aria-label="Highlight this verse">
+          <span className="mr-1 text-xs text-[var(--r-sub)]">Highlight</span>
+          {HIGHLIGHT_COLORS.map((color) => {
+            const on = verseHighlights.some((h) => h.color === color && h.startOffset === 0 && h.endOffset >= verse.text.length);
+            return (
+              <button key={color} type="button" onClick={() => onHighlightVerse(color)} aria-pressed={on}
+                aria-label={`Highlight verse ${colorTitle(color, colorLabels).toLowerCase()}`} data-tip={`${colorTitle(color, colorLabels)}${on ? ' — tap to remove' : ''}`}
+                className={`h-6 w-6 rounded-full border-2 transition hover:scale-110 ${on ? 'border-[var(--r-text)]' : 'border-transparent ring-1 ring-black/10'}`}
+                style={{ backgroundColor: color }}>
+                {on && <span className="text-[10px] leading-none text-[#2b2620]" aria-hidden="true">✓</span>}
+              </button>
+            );
+          })}
+          {verseHighlights.length > 0 && (
+            <button type="button" onClick={onClearVerseHighlights} className="ml-1 text-xs text-[var(--r-sub)] underline hover:text-[var(--r-text)]">Clear</button>
+          )}
+          <span className="basis-full text-[11px] text-[var(--r-sub)]">Or select words in the text to highlight just those.</span>
+        </div>
+      )}
+      <div role="tablist" aria-label="About this verse" className="mb-3 flex gap-1.5 overflow-x-auto pb-1">
+        {TABS.map(([id, label]) => (
+          <button key={id} type="button" role="tab" aria-selected={tab === id} onClick={() => setTab(id)}
+            className={`shrink-0 rounded-full border px-3 py-1 text-xs ${tab === id ? 'border-[var(--r-text)] bg-[var(--r-text)] text-[var(--r-bg)]' : 'border-[var(--r-line)] text-[var(--r-sub)] hover:bg-black/5'}`}>
+            {label}
+          </button>
+        ))}
+      </div>
+      {tab === 'commentary' && <CommentaryTab book={book} chapter={chapter} verse={verse.number} />}
+      {tab === 'compare' && <CompareTab book={book} chapter={chapter} verse={verse.number} current={translation} />}
+      {tab === 'original' && <OriginalTab words={words} />}
+      {tab === 'refs' && (
+        <RefsTab refs={crossRefs} loading={crossRefsLoading} active={preview} onPick={setPreview}
+          preview={preview && <RefPreview refItem={preview} translation={translation} onOpen={onJump} onClose={() => setPreview(null)} />} />
+      )}
+      {tab === 'people' && <PeoplePlacesTab book={book} chapter={chapter} verse={verse.number} />}
+      {tab === 'aids' && iqOn && <IqStudyAids book={book} chapter={chapter} verse={verse.number} />}
+    </Sheet>
+  );
+}

src/components/reader/icons.jsx

@@ -0,0 +1,15 @@
+// Small stroke icons for the reader chrome (currentColor, 20px grid).
+const base = { viewBox: '0 0 20 20', width: 20, height: 20, fill: 'none', stroke: 'currentColor', strokeWidth: 1.6, strokeLinecap: 'round', strokeLinejoin: 'round', 'aria-hidden': true };
+
+export const ChevronLeft = () => <svg {...base}><path d="M12 4l-6 6 6 6" /></svg>;
+export const ChevronRight = () => <svg {...base}><path d="M8 4l6 6-6 6" /></svg>;
+export const ChevronDown = ({ size = 14 }) => <svg {...base} width={size} height={size}><path d="M5 8l5 5 5-5" /></svg>;
+export const SearchIcon = () => <svg {...base}><circle cx="9" cy="9" r="5.5" /><path d="M13.5 13.5L17 17" /></svg>;
+export const CloseIcon = () => <svg {...base}><path d="M5 5l10 10M15 5L5 15" /></svg>;
+export const LinkIcon = () => <svg {...base}><path d="M8.5 11.5a3 3 0 004.2 0l2.3-2.3a3 3 0 00-4.2-4.2L9.7 6.1" /><path d="M11.5 8.5a3 3 0 00-4.2 0L5 10.8A3 3 0 009.2 15l1.1-1.1" /></svg>;
+export const PenIcon = () => <svg {...base}><path d="M13.5 3.5l3 3L7 16l-4 1 1-4 9.5-9.5z" /></svg>;
+export const HeadphonesIcon = () => <svg {...base}><path d="M3.5 12V10a6.5 6.5 0 0113 0v2" /><rect x="2.5" y="11.5" width="3.5" height="5" rx="1.2" /><rect x="14" y="11.5" width="3.5" height="5" rx="1.2" /></svg>;
+export const FocusIcon = () => <svg {...base}><path d="M3 7V4h3M17 7V4h-3M3 13v3h3M17 13v3h-3" /></svg>;
+export const CheckIcon = () => <svg {...base}><path d="M4.5 10.5l3.5 3.5 7.5-8" /></svg>;
+export const CompareIcon = () => <svg {...base}><rect x="2.5" y="3.5" width="6.5" height="13" rx="1.3" /><rect x="11" y="3.5" width="6.5" height="13" rx="1.3" /><path d="M4.5 7h2.5M4.5 10h2.5M13 7h2.5M13 10h2.5" /></svg>;
+export const HighlighterIcon = () => <svg {...base}><path d="M12.5 3.5l4 4-6.8 6.8-4-4 6.8-6.8z" /><path d="M5.7 10.3l-1.6 4.4 1.2 1.2 4.4-1.6" /><path d="M3 17.2h6" /></svg>;

src/components/reader/readerThemes.js

@@ -0,0 +1,18 @@
+// Reader colour themes, applied as CSS variables on the reader root so every
+// reader component can use bg-[var(--r-bg)] etc. and stay in sync.
+export const READER_THEMES = {
+  paper: {
+    label: 'Paper',
+    vars: { '--r-bg': '#faf7f0', '--r-text': '#2b2620', '--r-sub': '#6b6458', '--r-accent': '#a84e27', '--r-bar': '#f1ece0', '--r-line': '#e0d8c6', '--r-hl': '#f6e7a8', '--r-on': '#ffffff', '--r-danger': '#b42318' },
+  },
+  sepia: {
+    label: 'Sepia',
+    vars: { '--r-bg': '#f1e4c8', '--r-text': '#3b2f1c', '--r-sub': '#635539', '--r-accent': '#93471d', '--r-bar': '#e8d8b6', '--r-line': '#d5c197', '--r-hl': '#e9cf85', '--r-on': '#ffffff', '--r-danger': '#a1281d' },
+  },
+  dark: {
+    label: 'Dark',
+    vars: { '--r-bg': '#1c1b19', '--r-text': '#e6e1d6', '--r-sub': '#b8b2a4', '--r-accent': '#e0895c', '--r-bar': '#262421', '--r-line': '#3a3733', '--r-hl': '#4a4224', '--r-on': '#1c1b19', '--r-danger': '#f0857a' },
+  },
+};
+
+export const themeVars = (id) => (READER_THEMES[id] ?? READER_THEMES.paper).vars;

src/components/reader/readerThemes.test.js

@@ -0,0 +1,27 @@
+import { describe, expect, test } from 'vitest';
+import { READER_THEMES } from './readerThemes.js';
+
+// WCAG relative luminance and contrast ratio
+const luminance = (hex) => {
+  const [r, g, b] = [1, 3, 5].map((i) => parseInt(hex.slice(i, i + 2), 16) / 255)
+    .map((c) => (c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4));
+  return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+};
+const contrast = (a, b) => {
+  const [hi, lo] = [luminance(a), luminance(b)].sort((x, y) => y - x);
+  return (hi + 0.05) / (lo + 0.05);
+};
+
+// Small text needs 4.5:1. These are the pairings the app actually draws.
+describe.each(Object.entries(READER_THEMES))('%s theme contrast', (_id, { vars }) => {
+  const v = (name) => vars[`--r-${name}`];
+  test.each([
+    ['text', 'bg'], ['text', 'bar'], ['text', 'hl'],
+    ['sub', 'bg'], ['sub', 'bar'], ['sub', 'hl'],
+    ['accent', 'bg'], ['accent', 'bar'],
+    ['danger', 'bg'], ['danger', 'bar'],
+    ['on', 'accent'],
+  ])('%s on %s is at least 4.5:1', (fg, bg) => {
+    expect(contrast(v(fg), v(bg))).toBeGreaterThanOrEqual(4.5);
+  });
+});

src/components/settings/DataSection.jsx

@@ -0,0 +1,116 @@
+// Settings → "Your data": download everything as one file, restore from one, and save Bibles for offline.
+import { useRef, useState } from 'react';
+import { useApp } from '../../context/AppContext.js';
+import { useToast } from '../Toasts.jsx';
+import { DownloadProgress } from '../OfflineSave.jsx';
+import { useOfflineSave } from '../../hooks/useOfflineSave.js';
+import { backupFileName, buildBackup, restoreProjects, validateBackup } from '../../utils/backup.js';
+import { saveRemoteProject } from '../../syncService.js';
+
+const btn = 'rounded-xl border border-[var(--r-line)] px-4 py-2 text-sm hover:bg-black/5 disabled:opacity-50';
+
+const plural = (n, one, many = `${one}s`) => `${n} ${n === 1 ? one : many}`;
+
+export default function DataSection() {
+  const {
+    authUser, readerBookmarks, readerTextHighlights, readerColorLabels, readerInkByPage, readingPlansState,
+    importReaderMarks, importReadingPlans, refreshProjectIndex,
+  } = useApp();
+  const { toast } = useToast();
+  const offline = useOfflineSave();
+  const fileRef = useRef(null);
+  const [pending, setPending] = useState(null); // { name, backup, summary } waiting for "Restore"
+  const [error, setError] = useState('');
+  const [busy, setBusy] = useState(false);
+
+  const download = () => {
+    const backup = buildBackup({
+      email: authUser?.email ?? null,
+      reader: { bookmarks: readerBookmarks, highlights: readerTextHighlights, colorLabels: readerColorLabels, ink: readerInkByPage },
+      readingPlans: readingPlansState,
+    });
+    const url = URL.createObjectURL(new Blob([JSON.stringify(backup, null, 2)], { type: 'application/json' }));
+    const link = document.createElement('a');
+    link.href = url;
+    link.download = backupFileName();
+    document.body.appendChild(link);
+    link.click();
+    link.remove();
+    URL.revokeObjectURL(url);
+    toast(`Backup downloaded: ${plural(backup.projects.length, 'study', 'studies')} and your reading marks`);
+  };
+
+  const choose = async (e) => {
+    const file = e.target.files?.[0];
+    e.target.value = '';
+    setError('');
+    setPending(null);
+    if (!file) return;
+    let data;
+    try { data = JSON.parse(await file.text()); } catch { setError('That file couldn’t be read as a backup.'); return; }
+    const checked = validateBackup(data);
+    if (!checked.ok) { setError(checked.error); return; }
+    setPending({ name: file.name, ...checked });
+  };
+
+  const restore = async () => {
+    setBusy(true);
+    const { backup } = pending;
+    const written = restoreProjects(backup.projects);
+    importReaderMarks(backup.reader);
+    importReadingPlans(backup.readingPlans);
+    refreshProjectIndex();
+    // Studies restored here also go to the account, so they follow you to other devices
+    if (authUser) await Promise.all(written.map((p) => saveRemoteProject(p)));
+    setBusy(false);
+    setPending(null);
+    toast(`Restored ${plural(written.length, 'study', 'studies')}, plus your bookmarks, highlights and plans`);
+  };
+
+  const s = pending?.summary;
+  return (
+    <section id="backup" aria-label="Your data" className="scroll-mt-16 space-y-5 rounded-2xl border border-[var(--r-line)] bg-[var(--r-bar)] p-6">
+      <div>
+        <h2 className="text-base font-medium">Your data</h2>
+        <p className="mt-1 text-sm text-[var(--r-sub)]">Everything you’ve made — studies and notes, bookmarks, highlights, ink and reading plans — in one file you keep.{authUser ? ' “Download backup” is what’s on this device; “Download from my account” is everything the server holds. The server also keeps a daily snapshot for the administrator.' : ''}</p>
+      </div>
+
+      <div className="flex flex-wrap items-center gap-3">
+        <button type="button" onClick={download} className={btn}>Download backup</button>
+        {authUser && (
+          <a href="/api/account/export" download className={`${btn} inline-block`} title="Everything saved to your account on the server, including studies from other devices">Download from my account</a>
+        )}
+        <button type="button" onClick={() => fileRef.current?.click()} className={btn}>Restore from a backup…</button>
+        <input ref={fileRef} type="file" accept="application/json,.json" onChange={choose} className="hidden" aria-label="Backup file" />
+      </div>
+      {error && <p role="alert" className="text-sm text-[var(--r-danger,#b42318)]">{error}</p>}
+      {pending && (
+        <div className="rounded-xl border border-[var(--r-line)] bg-[var(--r-bg)] p-4 text-sm">
+          <p className="font-medium">{pending.name}</p>
+          <p className="mt-1 text-[var(--r-sub)]">
+            Contains {plural(s.projects, 'study', 'studies')}, {plural(s.bookmarks, 'bookmark')}, {plural(s.highlights, 'highlight')}, {plural(s.inkPages, 'ink page')} and {plural(s.plans, 'reading plan')}.
+            Restoring adds these to what you have — nothing is deleted, and a study on this device is only replaced if the backup’s copy is newer.
+          </p>
+          <div className="mt-3 flex gap-2">
+            <button type="button" onClick={restore} disabled={busy} className="rounded-xl bg-[var(--r-accent)] px-4 py-2 text-sm font-medium text-[var(--r-on)] hover:opacity-90 disabled:opacity-50">{busy ? 'Restoring…' : 'Restore'}</button>
+            <button type="button" onClick={() => setPending(null)} className={btn}>Cancel</button>
+          </div>
+        </div>
+      )}
+
+      <div className="border-t border-[var(--r-line)] pt-4">
+        <h3 className="text-sm font-medium">Read offline</h3>
+        <p className="mb-3 mt-1 text-sm text-[var(--r-sub)]">Chapters you read are kept automatically. To read anywhere, save a whole Bible while you’re connected (about 4 MB). The ESV, NLT, CSB and NASB can’t be saved: their licences don’t allow it.</p>
+        {offline.job ? <DownloadProgress job={offline.job} onCancel={offline.cancel} /> : (
+          <div className="flex flex-wrap gap-3">
+            {['BSB', 'NET'].map((t) => (
+              <button key={t} type="button" onClick={() => offline.saveBible(t)} className={btn}>
+                {(offline.saved[t] ?? []).length >= 66 ? `✓ The whole ${t} is saved` : `Save the whole ${t}`}
+              </button>
+            ))}
+          </div>
+        )}
+      </div>
+    </section>
+  );
+}

src/components/study/CommentaryChunkTab.jsx

@@ -0,0 +1,56 @@
+// Commentary for the chunk's verse range, from seven open sources. Some sources
+// comment on whole passages, so when nothing starts inside the range we show the
+// closest earlier entry. "Add to notes" quotes a paragraph, with its citation, into
+// the chunk's background notes.
+import { COMMENTARIES } from '../../hooks/useVerseStudy.js';
+import { formatChunkReference } from '../../utils/bibleUtils.jsx';
+
+export default function CommentaryChunkTab({ resources, chunk, project, chapterIndex, updateChunk, notify }) {
+  const { commentarySource, setCommentarySource, commentaryData, commentaryLoading, commentaryError } = resources;
+  const source = COMMENTARIES.find((c) => c.id === commentarySource) ?? COMMENTARIES[0];
+  const items = (commentaryData?.chapter?.content ?? []).filter((i) => i.type === 'verse').sort((a, b) => a.number - b.number);
+  let entries = items.filter((i) => i.number >= chunk.startVerse && i.number <= chunk.endVerse);
+  let earlier = false;
+  if (entries.length === 0) {
+    const before = [...items].reverse().find((i) => i.number <= chunk.startVerse);
+    if (before) { entries = [before]; earlier = true; }
+  }
+  const ref = formatChunkReference(project, chapterIndex, chunk, '–');
+
+  const quote = (text, verse) => {
+    const citation = `${text} (${source.name}, ${ref.split(':')[0]}:${verse})`;
+    const existing = chunk.generalNotes ?? '';
+    updateChunk(chunk.id, { generalNotes: existing ? `${existing}\n\n${citation}` : citation });
+    notify('Added to background notes.', 1600);
+  };
+
+  return (
+    <div>
+      <select aria-label="Commentary source" value={source.id} onChange={(e) => setCommentarySource(e.target.value)}
+        className="mb-3 w-full rounded-lg border border-[var(--r-line)] bg-[var(--r-bg)] px-2 py-1.5 text-sm text-[var(--r-text)]">
+        {COMMENTARIES.map((c) => <option key={c.id} value={c.id}>{c.name}</option>)}
+      </select>
+      {commentaryLoading && <p className="text-sm text-[var(--r-sub)]">Loading commentary…</p>}
+      {commentaryError && <p className="text-sm text-[var(--r-sub)]">{commentaryError}</p>}
+      {!commentaryLoading && !commentaryError && commentaryData && entries.length === 0 && (
+        <p className="text-sm text-[var(--r-sub)]">No commentary found for {ref}.</p>
+      )}
+      {!commentaryLoading && !commentaryError && entries.map((v) => (
+        <div key={v.number} className="mb-4">
+          <p className="mb-1 text-xs font-medium text-[var(--r-sub)]">{earlier ? `Notes on the passage starting at verse ${v.number}` : `Verse ${v.number}`}</p>
+          {(v.content ?? []).map((p, i) => {
+            const text = typeof p === 'string' ? p : '';
+            if (!text) return null;
+            return (
+              <div key={i} className="group mb-2">
+                <p className="whitespace-pre-line text-[13px] leading-relaxed">{text}</p>
+                <button type="button" onClick={() => quote(text, v.number)} className="mt-0.5 text-[11px] text-[var(--r-accent)] opacity-70 hover:underline hover:opacity-100">Add to notes</button>
+              </div>
+            );
+          })}
+        </div>
+      ))}
+      <p className="mt-2 text-[10px] text-[var(--r-sub)]">{source.credit}</p>
+    </div>
+  );
+}

src/components/study/CrossRefsTab.jsx

@@ -0,0 +1,53 @@
+// Cross-references for the chunk: typed, suggested from the Open Cross Ref
+// dataset, and a preview of each reference's verse text.
+import { useState } from 'react';
+
+function RefChip({ label, onRemove, loadVerseText }) {
+  const [text, setText] = useState(null);
+  const [open, setOpen] = useState(false);
+  const toggle = () => {
+    setOpen((o) => !o);
+    if (text == null) loadVerseText(label).then((t) => setText(t || 'Verse text unavailable.')).catch(() => setText('Verse text unavailable.'));
+  };
+  return (
+    <div className="rounded-xl border border-[var(--r-line)]">
+      <div className="flex items-center justify-between gap-2 px-3 py-1.5">
+        <button type="button" onClick={toggle} aria-expanded={open} className="flex-1 text-left text-sm">{label}</button>
+        <button type="button" onClick={onRemove} aria-label={`Remove ${label}`} className="text-[var(--r-sub)] hover:text-[var(--r-danger,#b42318)]">×</button>
+      </div>
+      {open && <p className="border-t border-[var(--r-line)] px-3 py-2 font-serif text-[13px] leading-relaxed text-[var(--r-sub)]">{text ?? 'Loading…'}</p>}
+    </div>
+  );
+}
+
+export default function CrossRefsTab({ crossRefs, chunk }) {
+  const { crossRefInput, setCrossRefInput, suggestingCrossRefs, crossRefSuggestions, addCrossRef, removeCrossRef,
+    suggestCrossRefsForChunk, addSuggestedCrossRef, loadVerseText } = crossRefs;
+  const refs = chunk.crossReferences ?? [];
+  return (
+    <div>
+      <div className="flex gap-2">
+        <input value={crossRefInput} onChange={(e) => setCrossRefInput(e.target.value)} placeholder="e.g. John 1:1 or Rom 3:23"
+          onKeyDown={(e) => { if (e.key === 'Enter') { e.preventDefault(); addCrossRef(chunk.id); } }}
+          className="min-w-0 flex-1 rounded-lg border border-[var(--r-line)] bg-[var(--r-bg)] px-3 py-1.5 text-sm text-[var(--r-text)] focus:outline-none focus:ring-2 focus:ring-[var(--r-line)]" />
+        <button type="button" onClick={() => addCrossRef(chunk.id)} className="rounded-lg bg-[var(--r-text)] px-3 py-1.5 text-sm text-[var(--r-bg)]">Add</button>
+      </div>
+      <button type="button" onClick={() => suggestCrossRefsForChunk(chunk.id)} disabled={suggestingCrossRefs}
+        className="mt-2 rounded-lg border border-[var(--r-line)] px-3 py-1.5 text-sm hover:bg-black/5 disabled:opacity-50">
+        {suggestingCrossRefs ? 'Suggesting…' : 'Suggest from passage'}
+      </button>
+      {crossRefSuggestions.length > 0 && (
+        <div className="mt-3 flex flex-wrap gap-1.5">
+          {crossRefSuggestions.map((ref) => (
+            <button key={ref} type="button" onClick={() => addSuggestedCrossRef(chunk.id, ref)}
+              className="rounded-full border border-[var(--r-accent)] px-2.5 py-0.5 text-xs text-[var(--r-accent)] hover:bg-black/5">+ {ref}</button>
+          ))}
+        </div>
+      )}
+      <div className="mt-3 space-y-1.5">
+        {refs.map((ref) => <RefChip key={ref} label={ref} onRemove={() => removeCrossRef(chunk.id, ref)} loadVerseText={loadVerseText} />)}
+        {refs.length === 0 && <p className="text-sm text-[var(--r-sub)]">No cross-references yet.</p>}
+      </div>
+    </div>
+  );
+}

src/components/study/NotesPane.jsx

@@ -0,0 +1,104 @@
+// Observe / Interpret / Apply as an accordion (one open at a time), plus a "More"
+// area for background notes and tags so the page stays quiet.
+import { useEffect, useState } from 'react';
+import { templatePrompt } from '../../utils/studyTemplates.js';
+
+const SECTIONS = [
+  { field: 'observation', label: 'Observe', hint: 'What does the text say?',
+    placeholder: "What does the text actually say?\n• Who is speaking, and to whom?\n• What key words or phrases repeat?\n• What's the tone, structure, or literary style?" },
+  { field: 'interpretation', label: 'Interpret', hint: 'What does it mean?',
+    placeholder: "What did this mean to its original audience?\n• What's the historical/cultural context?\n• How does it fit the surrounding argument?\n• What does it reveal about God's character?" },
+  { field: 'application', label: 'Apply', hint: 'What do I do with it?',
+    placeholder: 'How should this shape your life today?\n• What attitude or action does this call for?\n• Is there a promise to trust or a warning to heed?\n• Who could you share this with?' },
+];
+
+const areaCls = 'w-full resize-y rounded-xl border border-[var(--r-line)] bg-[var(--r-bg)] px-3.5 py-3 font-serif text-[15px] leading-7 text-[var(--r-text)] placeholder:font-sans placeholder:text-[13px] placeholder:leading-5 placeholder:text-[var(--r-sub)] focus:outline-none focus:ring-2 focus:ring-[var(--r-line)]';
+const words = (s) => (s ?? '').trim().split(/\s+/).filter(Boolean).length;
+
+export default function NotesPane({ chunk, updateChunk, allTags, templateId }) {
+  const [open, setOpen] = useState(() => {
+    try { return localStorage.getItem('studyNotesOpen') || 'observation'; } catch { return 'observation'; }
+  });
+  const [more, setMore] = useState(false);
+  const [tagInput, setTagInput] = useState('');
+  useEffect(() => { setTagInput(''); }, [chunk.id]);
+  useEffect(() => { try { localStorage.setItem('studyNotesOpen', open || ''); } catch { /* storage unavailable */ } }, [open]);
+
+  const tags = chunk.tags ?? [];
+  const addTag = (tag) => {
+    const t = tag.trim();
+    if (!t || tags.some((x) => x.toLowerCase() === t.toLowerCase())) { setTagInput(''); return; }
+    updateChunk(chunk.id, { tags: [...tags, t] });
+    setTagInput('');
+  };
+  const suggestions = allTags.filter((t) => !tags.some((x) => x.toLowerCase() === t.toLowerCase()));
+
+  return (
+    <section aria-label="Study notes" className="space-y-2">
+      {SECTIONS.map(({ field, label, hint, placeholder }) => {
+        const isOpen = open === field;
+        const n = words(chunk[field]);
+        return (
+          <div key={field} className={`overflow-hidden rounded-2xl border ${isOpen ? 'border-[var(--r-accent)]' : 'border-[var(--r-line)]'}`}>
+            <button type="button" onClick={() => setOpen(isOpen ? null : field)} aria-expanded={isOpen}
+              className="flex w-full items-center justify-between gap-3 px-4 py-3 text-left">
+              <span className="flex items-center gap-2.5">
+                <span aria-hidden="true" className={`h-2.5 w-2.5 rounded-full border ${n ? 'border-[var(--r-accent)] bg-[var(--r-accent)]' : 'border-[var(--r-sub)]'}`} />
+                <span className="text-sm font-medium">{label}</span>
+                <span className="text-xs text-[var(--r-sub)]">{hint}</span>
+              </span>
+              <span className="text-xs text-[var(--r-sub)]">{n ? `${n} word${n === 1 ? '' : 's'}` : ''}</span>
+            </button>
+            {isOpen && (
+              <div className="px-4 pb-4">
+                <textarea aria-label={label} value={chunk[field] ?? ''} rows={7} placeholder={templatePrompt(templateId, field) ?? placeholder}
+                  onChange={(e) => updateChunk(chunk.id, { [field]: e.target.value })} className={areaCls} />
+              </div>
+            )}
+          </div>
+        );
+      })}
+
+      <div className="rounded-2xl border border-[var(--r-line)]">
+        <button type="button" onClick={() => setMore((m) => !m)} aria-expanded={more}
+          className="flex w-full items-center justify-between px-4 py-3 text-left text-sm">
+          <span><span className="font-medium">More</span> <span className="text-xs text-[var(--r-sub)]">background{tags.length ? ` · ${tags.length} tag${tags.length === 1 ? '' : 's'}` : ' and tags'}</span></span>
+          <span className="text-xs text-[var(--r-sub)]">{more ? '▾' : '▸'}</span>
+        </button>
+        {more && (
+          <div className="space-y-4 px-4 pb-4">
+            <label className="block text-xs text-[var(--r-sub)]">
+              Background / general notes
+              <textarea value={chunk.generalNotes ?? ''} rows={5} onChange={(e) => updateChunk(chunk.id, { generalNotes: e.target.value })}
+                placeholder="e.g. author, date, audience, historical context, key themes…" className={`mt-1 ${areaCls}`} />
+            </label>
+            <div>
+              <p className="mb-1.5 text-xs text-[var(--r-sub)]">Tags</p>
+              <div className="flex flex-wrap items-center gap-1.5">
+                {tags.map((tag) => (
+                  <span key={tag} className="inline-flex items-center gap-1 rounded-full bg-[var(--r-bar)] px-2.5 py-1 text-xs">
+                    {tag}
+                    <button type="button" aria-label={`Remove tag ${tag}`} onClick={() => updateChunk(chunk.id, { tags: tags.filter((t) => t !== tag) })} className="text-[var(--r-sub)] hover:text-[var(--r-danger,#b42318)]">×</button>
+                  </span>
+                ))}
+                <input value={tagInput} onChange={(e) => setTagInput(e.target.value)} list="study-tag-suggestions"
+                  onKeyDown={(e) => { if (e.key === 'Enter') { e.preventDefault(); addTag(tagInput); } }}
+                  placeholder="Add a tag and press Enter"
+                  className="min-w-[10rem] flex-1 rounded-lg border border-[var(--r-line)] bg-[var(--r-bg)] px-2.5 py-1 text-xs text-[var(--r-text)] focus:outline-none" />
+              </div>
+              {suggestions.length > 0 && (
+                <div className="mt-2 flex flex-wrap items-center gap-1.5 text-xs">
+                  <span className="text-[var(--r-sub)]">Suggestions:</span>
+                  {suggestions.slice(0, 12).map((t) => (
+                    <button key={t} type="button" onClick={() => addTag(t)} className="rounded-full border border-[var(--r-line)] px-2.5 py-0.5 text-[var(--r-sub)] hover:bg-black/5">+ {t}</button>
+                  ))}
+                </div>
+              )}
+              <datalist id="study-tag-suggestions">{allTags.map((t) => <option key={t} value={t} />)}</datalist>
+            </div>
+          </div>
+        )}
+      </div>
+    </section>
+  );
+}

src/components/study/OutlineRail.jsx

@@ -0,0 +1,43 @@
+// Left rail of the Study stage: every chunk of the project as an outline, with
+// three dots (Observe / Interpret / Apply) showing which notes are written.
+import { formatChunkReference } from '../../utils/bibleUtils.jsx';
+
+const filled = (s) => (s ?? '').trim().length > 0;
+
+export default function OutlineRail({ project, selectedId, onSelect, onEditOutline }) {
+  return (
+    <nav aria-label="Chunks" className="flex h-full min-h-0 flex-col">
+      <div className="flex items-center justify-between px-3 pb-2 pt-3">
+        <span className="text-[11px] uppercase tracking-wide text-[var(--r-sub)]">Chunks</span>
+        <button type="button" onClick={onEditOutline} className="text-[11px] text-[var(--r-accent)] hover:underline">Edit</button>
+      </div>
+      <div className="min-h-0 flex-1 overflow-y-auto px-2 pb-4">
+        {project.chapters.map((ch, chapterIndex) => (
+          <div key={`${ch.bookAbbrev}-${ch.chapter}`} className="mb-3">
+            {project.chapters.length > 1 && <p className="px-2 pb-1 text-[11px] text-[var(--r-sub)]">{ch.book} {ch.chapter}</p>}
+            {ch.chunks.length === 0 && <p className="px-2 text-xs text-[var(--r-sub)]">No chunks in this chapter.</p>}
+            {ch.chunks.map((chunk) => {
+              const selected = chunk.id === selectedId;
+              const first = ch.verses.find((v) => v.number === chunk.startVerse)?.text ?? '';
+              return (
+                <button key={chunk.id} type="button" onClick={() => onSelect(chunk.id)} aria-current={selected ? 'true' : undefined}
+                  className={`mb-1 block w-full rounded-xl border px-2.5 py-2 text-left transition ${selected ? 'border-[var(--r-line)] bg-[var(--r-bg)]' : 'border-transparent hover:bg-black/5'}`}>
+                  <span className="flex items-center justify-between gap-2">
+                    <span className="text-[13px] font-medium">{formatChunkReference(project, chapterIndex, chunk, '–')}</span>
+                    <span className="flex gap-1" aria-hidden="true">
+                      {['observation', 'interpretation', 'application'].map((f) => (
+                        <span key={f} className={`h-2 w-2 rounded-full border ${filled(chunk[f]) ? 'border-[var(--r-accent)] bg-[var(--r-accent)]' : 'border-[var(--r-sub)]'}`} />
+                      ))}
+                    </span>
+                  </span>
+                  {chunk.episodeTitle && <span className="mt-0.5 block truncate text-[11px] text-[var(--r-accent)]">{chunk.episodeNumber ? `${chunk.episodeNumber} · ` : ''}{chunk.episodeTitle}</span>}
+                  <span className="mt-0.5 block truncate font-serif text-xs text-[var(--r-sub)]">{first}</span>
+                </button>
+              );
+            })}
+          </div>
+        ))}
+      </div>
+    </nav>
+  );
+}

src/components/study/PageShell.jsx

@@ -0,0 +1,107 @@
+// Themed frame for pages outside a study project (Home, Import, Settings, Admin):
+// a calm app bar (brand, three destinations, account menu) and a page heading row.
+import { useEffect, useRef, useState } from 'react';
+import { useApp } from '../../context/AppContext.js';
+import { themeVars, READER_THEMES } from '../reader/readerThemes.js';
+import { ChevronLeft, SearchIcon } from '../reader/icons.jsx';
+
+// `short` is what a phone shows; the full label is still the button's accessible name.
+const NAV = [
+  { id: 'studies', label: 'Studies', short: 'Studies' },
+  { id: 'reader', label: 'Read Bible', short: 'Bible' },
+  { id: 'plans', label: 'Reading Plans', short: 'Plans' },
+];
+
+// Avatar button with a dropdown: who you are, the theme, Settings, Admin, Log out.
+function AccountMenu() {
+  const { authUser, readerTheme, setReaderTheme, setCurrentPage, logout } = useApp();
+  const [open, setOpen] = useState(false);
+  const ref = useRef(null);
+
+  useEffect(() => {
+    if (!open) return undefined;
+    const onDown = (e) => { if (!ref.current?.contains(e.target)) setOpen(false); };
+    const onKey = (e) => { if (e.key === 'Escape') setOpen(false); };
+    document.addEventListener('mousedown', onDown);
+    document.addEventListener('keydown', onKey);
+    return () => { document.removeEventListener('mousedown', onDown); document.removeEventListener('keydown', onKey); };
+  }, [open]);
+
+  const go = (page) => { setOpen(false); setCurrentPage(page); };
+  const item = 'block w-full rounded-lg px-3 py-2 text-left text-sm hover:bg-black/5';
+
+  return (
+    <div ref={ref} className="relative">
+      <button type="button" onClick={() => setOpen((o) => !o)} aria-label="Account menu" aria-expanded={open}
+        className="flex h-8 w-8 items-center justify-center rounded-full border border-[var(--r-line)] bg-[var(--r-bg)] text-xs font-medium uppercase hover:bg-black/5">
+        {authUser?.email?.[0] ?? '·'}
+      </button>
+      {open && (
+        <div role="menu" className="absolute right-0 top-full z-40 mt-2 w-60 rounded-2xl border border-[var(--r-line)] bg-[var(--r-bar)] p-2 shadow-xl">
+          {authUser && <p className="truncate px-3 pb-1 pt-2 text-xs text-[var(--r-sub)]">{authUser.email}</p>}
+          <div className="px-3 pb-2 pt-1">
+            <p className="mb-1.5 text-[11px] uppercase tracking-wide text-[var(--r-sub)]">Theme</p>
+            <div className="flex overflow-hidden rounded-lg border border-[var(--r-line)]">
+              {Object.entries(READER_THEMES).map(([id, t]) => (
+                <button key={id} type="button" onClick={() => setReaderTheme(id)} aria-pressed={readerTheme === id}
+                  className={`flex-1 px-2 py-1.5 text-xs ${readerTheme === id ? 'bg-[var(--r-text)] text-[var(--r-bg)]' : 'text-[var(--r-sub)] hover:bg-black/5'}`}>{t.label}</button>
+              ))}
+            </div>
+          </div>
+          {authUser && (
+            <div className="border-t border-[var(--r-line)] pt-1">
+              <button type="button" role="menuitem" onClick={() => go('settings')} className={item}>Settings</button>
+              {authUser.isAdmin && <button type="button" role="menuitem" onClick={() => go('admin')} className={item}>Admin</button>}
+              <button type="button" role="menuitem" onClick={() => { setOpen(false); logout(); }} className={item}>Log out</button>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default function PageShell({ title, onBack, actions, active = null, maxWidth = 'max-w-6xl', children }) {
+  const { readerTheme, goHome, goStudies, openBibleReader, openReadingPlans, openPalette } = useApp();
+  const go = { studies: goStudies, reader: openBibleReader, plans: openReadingPlans };
+  return (
+    <div className="min-h-dvh bg-[var(--r-bg)] font-sans text-[var(--r-text)]" style={themeVars(readerTheme)}>
+      <a href="#content" className="skip-link">Skip to content</a>
+      <header className="safe-top sticky top-0 z-30 border-b border-[var(--r-line)] bg-[var(--r-bar)]">
+        <div className={`mx-auto flex h-12 ${maxWidth} items-center gap-2 px-3 sm:gap-4 sm:px-4`}>
+          <button type="button" onClick={goHome} className="flex shrink-0 items-center gap-2" aria-label="Bible Study home">
+            <img src="/logo.svg" alt="" className="h-6 w-6" />
+            <span className="hidden text-sm font-medium sm:inline">Bible Study</span>
+          </button>
+          <nav aria-label="Main" className="flex items-center gap-0.5">
+            {NAV.map((n) => (
+              <button key={n.id} type="button" onClick={go[n.id]} aria-current={active === n.id ? 'page' : undefined} aria-label={n.label}
+                className={`whitespace-nowrap rounded-full px-2.5 py-1.5 text-sm sm:px-3 ${active === n.id ? 'bg-[var(--r-text)] text-[var(--r-bg)]' : 'text-[var(--r-sub)] hover:bg-black/5'}`}>
+                <span className="sm:hidden" aria-hidden="true">{n.short}</span><span className="hidden sm:inline" aria-hidden="true">{n.label}</span>
+              </button>
+            ))}
+          </nav>
+          <div className="ml-auto flex items-center gap-2">
+            {openPalette && (
+              <button type="button" onClick={openPalette} aria-label="Search and go to" data-tip="Search studies, notes and passages (⌘K)"
+                className="flex items-center gap-2 rounded-full border border-[var(--r-line)] bg-[var(--r-bg)] px-3 py-1 text-xs text-[var(--r-sub)] hover:bg-black/5">
+                <SearchIcon /><span className="hidden sm:inline">Search</span><kbd className="hidden rounded border border-[var(--r-line)] px-1 text-[10px] md:inline">⌘K</kbd>
+              </button>
+            )}
+            <AccountMenu />
+          </div>
+        </div>
+      </header>
+      <div id="content" tabIndex={-1} className="focus:outline-none">
+      <div className={`mx-auto flex ${maxWidth} flex-wrap items-center gap-3 px-4 pt-6`}>
+        {onBack && (
+          <button type="button" onClick={onBack} aria-label="Back" className="-ml-2 flex h-9 w-9 items-center justify-center rounded-lg text-[var(--r-sub)] hover:bg-black/5"><ChevronLeft /></button>
+        )}
+        <h1 className="text-2xl font-medium tracking-tight">{title}</h1>
+        {actions && <div className="ml-auto flex flex-wrap items-center gap-2">{actions}</div>}
+      </div>
+      {children}
+      </div>
+    </div>
+  );
+}

src/components/study/PeopleChunkTab.jsx

@@ -0,0 +1,30 @@
+// People, places and events (Theographic data) tied to the chunk's verses.
+import { loadTheographic, useAsync } from '../../hooks/useVerseStudy.js';
+import { PersonCard } from '../StudyPanel.jsx';
+
+export default function PeopleChunkTab({ book, chapter, chunk }) {
+  const { status, data } = useAsync(() => loadTheographic(book, chapter), [book, chapter]);
+  if (status === 'loading') return <p className="text-sm text-[var(--r-sub)]">Loading…</p>;
+  if (status === 'empty') return <p className="text-sm text-[var(--r-sub)]">No people or places data for this chapter.</p>;
+  const inChunk = (x) => x.verses?.some((n) => n >= chunk.startVerse && n <= chunk.endVerse);
+  const people = data.people.filter(inChunk);
+  const places = [...new Map(data.places.filter(inChunk).map((p) => [p.name, p])).values()];
+  const events = data.events.filter(inChunk);
+  if (!people.length && !places.length && !events.length) return <p className="text-sm text-[var(--r-sub)]">Nothing tagged in these verses.</p>;
+  const head = 'mb-1 text-[11px] uppercase tracking-wide text-[var(--r-sub)]';
+  return (
+    <div className="space-y-4">
+      {people.length > 0 && <div><p className={head}>People</p><ul className="space-y-1">{people.map((p) => <PersonCard key={p.id} person={p} />)}</ul></div>}
+      {places.length > 0 && (
+        <div><p className={head}>Places</p>
+          <ul className="space-y-1">{places.map((p) => (
+            <li key={p.id} className="flex items-center justify-between rounded-xl bg-[var(--r-bg)] px-3 py-2 text-sm">
+              <span>{p.name}{p.featureType && <span className="ml-1 text-xs text-[var(--r-sub)]">{p.featureType}</span>}</span>
+              {p.latitude != null && <a href={`https://www.openstreetmap.org/?mlat=${p.latitude}&mlon=${p.longitude}#map=8/${p.latitude}/${p.longitude}`} target="_blank" rel="noopener noreferrer" className="text-xs text-[var(--r-accent)] hover:underline">Map ↗</a>}
+            </li>))}</ul></div>
+      )}
+      {events.length > 0 && <div><p className={head}>Events</p><ul className="space-y-1">{events.map((e) => <li key={e.id} className="rounded-xl bg-[var(--r-bg)] px-3 py-2 text-sm">{e.name}{e.startDate && <span className="ml-1 text-xs text-[var(--r-sub)]">approx. AD {e.startDate}</span>}</li>)}</ul></div>}
+      <p className="text-[10px] text-[var(--r-sub)]">People, places and events: Theographic Bible Metadata, CC BY-SA 4.0.</p>
+    </div>
+  );
+}

src/components/study/ResourcePane.jsx

@@ -0,0 +1,50 @@
+// Right-hand pane of the Study stage: commentary, word study, cross-references and
+// people & places, all driven by the selected chunk.
+import { useState } from 'react';
+import CommentaryChunkTab from './CommentaryChunkTab.jsx';
+import WordStudyTab from './WordStudyTab.jsx';
+import CrossRefsTab from './CrossRefsTab.jsx';
+import PeopleChunkTab from './PeopleChunkTab.jsx';
+
+export const RESOURCE_TABS = [
+  { id: 'commentary', label: 'Commentary' },
+  { id: 'words', label: 'Word study' },
+  { id: 'refs', label: 'Cross-refs' },
+  { id: 'people', label: 'People & places' },
+];
+
+export default function ResourcePane({ tab, setTab, chunk, chapter, chapterIndex, project, updateChunk, notify, resources, wordStudy, crossRefs, openWordId, setOpenWordId }) {
+  const counts = { words: chunk.greekWords.length, refs: (chunk.crossReferences ?? []).length };
+  return (
+    <div className="flex min-h-0 flex-1 flex-col">
+      <div role="tablist" aria-label="Study resources" className="flex shrink-0 flex-wrap gap-1.5 border-b border-[var(--r-line)] px-3 py-2.5">
+        {RESOURCE_TABS.map((t) => (
+          <button key={t.id} type="button" role="tab" aria-selected={tab === t.id} onClick={() => setTab(t.id)}
+            className={`rounded-full border px-3 py-1 text-xs ${tab === t.id ? 'border-[var(--r-text)] bg-[var(--r-text)] text-[var(--r-bg)]' : 'border-[var(--r-line)] text-[var(--r-sub)] hover:bg-black/5'}`}>
+            {t.label}{counts[t.id] ? ` · ${counts[t.id]}` : ''}
+          </button>
+        ))}
+      </div>
+      <div role="tabpanel" className="min-h-0 flex-1 overflow-y-auto px-4 py-4">
+        {tab === 'commentary' && <CommentaryChunkTab resources={resources} chunk={chunk} project={project} chapterIndex={chapterIndex} updateChunk={updateChunk} notify={notify} />}
+        {tab === 'words' && <WordStudyTab wordStudy={wordStudy} chunk={chunk} openWordId={openWordId} setOpenWordId={setOpenWordId} />}
+        {tab === 'refs' && <CrossRefsTab crossRefs={crossRefs} chunk={chunk} />}
+        {tab === 'people' && <PeopleChunkTab book={chapter.bookAbbrev} chapter={chapter.chapter} chunk={chunk} />}
+      </div>
+    </div>
+  );
+}
+
+export function useResourceTab() {
+  const [tab, setTabState] = useState(() => {
+    try {
+      const saved = localStorage.getItem('studyResourceTab');
+      return RESOURCE_TABS.some((t) => t.id === saved) ? saved : 'commentary';
+    } catch { return 'commentary'; }
+  });
+  const setTab = (id) => {
+    setTabState(id);
+    try { localStorage.setItem('studyResourceTab', id); } catch { /* storage unavailable */ }
+  };
+  return [tab, setTab];
+}

src/components/study/ScripturePane.jsx

@@ -0,0 +1,46 @@
+// The chunk's passage, set like the Reader. Click a verse number to open its
+// interlinear words; click an original word to add it to the chunk's word study.
+import { useState } from 'react';
+import { NT_BOOK_NUMBER } from '../../utils/bibleUtils.jsx';
+
+export default function ScripturePane({ verses, chapter, interlinear, interlinearLoading, addedStrongs, onPickWord }) {
+  const [openVerse, setOpenVerse] = useState(null);
+  const isHebrew = chapter && !NT_BOOK_NUMBER[chapter.bookAbbrev];
+  return (
+    <section aria-label="Scripture" className="rounded-2xl border border-[var(--r-line)] bg-[var(--r-bar)] px-5 py-4">
+      <div className="font-serif text-[1.05rem] leading-[1.85]">
+        {verses.map((v) => {
+          const words = v.chapter === chapter?.chapter ? interlinear?.[String(v.number)] : null;
+          const open = openVerse === `${v.chapter}:${v.number}`;
+          return (
+            <div key={`${v.chapter}-${v.number}`} className="mb-1.5">
+              <button type="button" disabled={!words} onClick={() => setOpenVerse(open ? null : `${v.chapter}:${v.number}`)}
+                title={words ? 'Show original words' : undefined}
+                className={`mr-1.5 align-super font-sans text-[0.6em] ${words ? 'text-[var(--r-accent)] hover:underline' : 'cursor-default text-[var(--r-sub)]'} ${open ? 'font-bold' : ''}`}>
+                {v.chapter !== chapter?.chapter ? `${v.chapter}:` : ''}{v.number}
+              </button>
+              <span>{v.text}</span>
+              {open && words && (
+                <div dir={isHebrew ? 'rtl' : 'ltr'} className="mt-2 flex flex-wrap gap-2 rounded-xl bg-[var(--r-bg)] p-2.5 font-sans">
+                  {words.map((w, i) => {
+                    const added = w.s && addedStrongs.has(w.s.toUpperCase());
+                    return (
+                      <button key={i} type="button" disabled={!w.s} onClick={() => onPickWord(w)}
+                        title={[w.t, w.s, w.p].filter(Boolean).join(' · ') + (w.s ? (added ? ' — already in word study' : ' — click to add') : '')}
+                        className={`flex flex-col items-center rounded-lg border px-2 py-1 text-center ${added ? 'border-[var(--r-accent)]' : 'border-[var(--r-line)] hover:bg-black/5'} disabled:cursor-default`}>
+                        <span className={`text-base ${isHebrew ? 'font-serif' : ''}`}>{w.o}</span>
+                        <span className="text-[11px] leading-tight text-[var(--r-sub)]">{w.g || '—'}</span>
+                      </button>
+                    );
+                  })}
+                </div>
+              )}
+            </div>
+          );
+        })}
+      </div>
+      {interlinearLoading && <p className="mt-2 font-sans text-xs text-[var(--r-sub)]">Loading original words…</p>}
+      {!interlinearLoading && interlinear && <p className="mt-2 font-sans text-[11px] text-[var(--r-sub)]">Click a verse number to see its original words; click a word to study it.</p>}
+    </section>
+  );
+}