Redesign the Reader; add ESV

New reading surface with paper/sepia/dark themes, slim top and bottom bars,
and sheets for navigation, search, settings, audio and per-verse study tools.
Plan progress is built into the reader. Page-flip mode removed. ESV added via
the server-side proxy (ESV_API_KEY).

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

src/components/reader/SettingsSheet.jsx

@@ -0,0 +1,43 @@
+// "Aa" sheet: text size, theme, and how verses are laid out.
+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 }) {
+  return (
+    <div className="flex overflow-hidden rounded-xl border border-[var(--r-line)]">
+      {options.map(([id, label]) => (
+        <button key={id} type="button" onClick={() => onChange(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'}`}>
+          {label}
+        </button>
+      ))}
+    </div>
+  );
+}
+
+export default function SettingsSheet({ open, onClose, fontSize, onFontSize, theme, onTheme, layout, onLayout, wide, onWide }) {
+  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 options={SIZES.map(([l, s]) => [s, l])} value={fontSize} onChange={onFontSize} />
+      </div>
+      <div className={row}>
+        <span className={label}>Theme</span>
+        <Segmented 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 options={[['flow', 'Flowing'], ['verses', 'One per line']]} value={layout} onChange={onLayout} />
+      </div>
+      <div className={row}>
+        <span className={label}>Width</span>
+        <Segmented options={[[false, 'Column'], [true, 'Two columns']]} value={wide} onChange={onWide} />
+      </div>
+    </Sheet>
+  );
+}