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/PlanStrip.jsx

@@ -0,0 +1,18 @@
+// Thin strip under the top bar while the open chapter belongs to an active
+// reading plan. Shows which day you're on and lets you mark it read.
+export default function PlanStrip({ matches, notice, onToggle }) {
+  if (!matches.length && !notice) return null;
+  return (
+    <div className="mx-auto flex max-w-2xl flex-col gap-1 px-4 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>}
+      {matches.map((m) => (
+        <button key={m.progressId} type="button" onClick={() => onToggle(m)}
+          className="flex items-center justify-between gap-3 rounded-lg bg-[var(--r-bar)] px-3 py-1.5 text-left text-xs text-[var(--r-sub)] hover:bg-black/5"
+          title={m.done ? 'Tap to unmark this day' : 'Tap to mark this day read'}>
+          <span className="truncate"><span className="text-[var(--r-accent)]">{m.done ? '✓' : '●'}</span> {m.plan.title} · Day {m.dayIndex + 1} of {m.plan.days}</span>
+          <span className="shrink-0">{m.total > 1 ? `${m.position} of ${m.total}` : m.done ? 'Read' : 'Mark read'}</span>
+        </button>
+      ))}
+    </div>
+  );
+}