Add Outline stage, parallel reading, offline saves, backup, sync-conflict handling and more

Study
- New Outline stage (hierarchical I./A./1. points, linked to chunks, in all exports);
  the chunk stage is now "Chunks"
- Home cards: passages shown as ranges, tags capped with "+N more"

Reader
- Side-by-side translations and a Compare tab per verse
- Typeface, line spacing, verse-number settings; text and column scale with the screen
- Highlights/bookmarks sheet with named colours (synced); BSB footnote spacing fix
- Cmd-K palette (passages, studies, notes, marks), keyboard shortcuts and "?" help

Flow and safety
- Toasts with Undo replace most confirm()/alert()
- Back/Forward move between pages
- Server refuses saves over a newer copy (409); keep-mine / use-other banner;
  opening a study no longer re-stamps it
- Latest chapter request wins when flipping quickly

Offline and data
- Save books, plan days or a whole BSB/NET for offline
- Service worker fixes: helloao /api/ URLs were skipped and responses cloned too late
- Settings: download/restore a full backup

Accessibility
- Sheets trap focus and close on Escape, skip link, focus ring, reduced motion,
  theme contrast raised to 4.5:1 (with a test)

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

src/hooks/useProjectLibrary.js

@@ -1,6 +1,8 @@
 // The signed-in user's saved projects: opening, renaming, deleting, and keeping
 // this device's copies in step with the server.
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
+import { useToast } from '../components/Toasts.jsx';
+import { clearSyncBase, getSyncBase, setSyncBase } from '../utils/syncBase.js';
 import { loadProjectIndex } from '../utils/bibleUtils.jsx';
 import {
   saveProjectToStorage,
@@ -21,6 +23,9 @@ export function useProjectLibrary({
   setProjectIndex,
   setCurrentPage,
 }) {
+  const { toast } = useToast();
+  // Deleted projects waiting out their "Undo" window before the server copy is removed too
+  const pendingDeletes = useRef(new Map()); // id -> timer
   const [staleLocalProjects, setStaleLocalProjects] = useState([]); // projects where server is newer
   const [autoRestoredCount, setAutoRestoredCount] = useState(null); // brief "synced from another device" toast
 
@@ -39,11 +44,17 @@ export function useProjectLibrary({
     listRemoteProjects().then(async (result) => {
       if (!result.ok || cancelled) return;
       const localMap = new Map(localIndex.map((e) => [e.id, e]));
+      // What this device has seen of each study on the server: a save made on top of anything older is
+      // checked against it, so a newer copy from another device is never overwritten silently.
+      for (const e of result.data) {
+        const local = localMap.get(e.id);
+        setSyncBase(e.id, local ? Math.min(e.lastEdited ?? 0, local.lastEdited ?? 0) : e.lastEdited);
+      }
 
       const missing = result.data.filter((e) => !localMap.has(e.id));
       if (missing.length > 0) {
         const fetched = await Promise.all(missing.map((e) => loadRemoteProject(e.id)));
-        fetched.filter((r) => r.ok).forEach((r) => saveProjectToStorage(r.data));
+        fetched.filter((r) => r.ok).forEach((r) => { saveProjectToStorage(r.data); setSyncBase(r.data.id, r.data.lastEdited); });
         if (cancelled) return;
         const restoredCount = fetched.filter((r) => r.ok).length;
         if (restoredCount > 0) {
@@ -78,26 +89,57 @@ export function useProjectLibrary({
     const updated = { ...loaded, title, lastEdited: Date.now() };
     saveProjectToStorage(updated);
     setProjectIndex(loadProjectIndex());
-    saveRemoteProject(updated);
+    saveRemoteProject(updated, { baseEdited: getSyncBase(id) }).then((result) => {
+      if (result.ok) setSyncBase(id, updated.lastEdited);
+      else if (result.status === 409) toast('That study changed on another device. Open it to choose which version to keep.', { tone: 'error' });
+    });
     if (project?.id === id) {
       setProject((current) => (current ? { ...current, title } : current));
     }
   };
 
-  const deleteProject = (id) => {
-    if (!window.confirm('Delete this project? This cannot be undone.')) return;
-    deleteProjectFromStorage(id);
-    setProjectIndex(loadProjectIndex());
+  // Deleting is immediate here, with an Undo for a few seconds; only after that is the server copy
+  // removed (and straight away if the tab is closed first, so a deleted project never comes back).
+  const finishDelete = (id) => {
+    if (!pendingDeletes.current.has(id)) return;
+    window.clearTimeout(pendingDeletes.current.get(id));
+    pendingDeletes.current.delete(id);
     deleteRemoteProject(id); // fire-and-forget
   };
+  useEffect(() => {
+    const flush = () => [...pendingDeletes.current.keys()].forEach(finishDelete);
+    window.addEventListener('pagehide', flush);
+    return () => window.removeEventListener('pagehide', flush);
+  }, []);
+
+  const deleteProject = (id) => {
+    const loaded = loadProjectById(id);
+    if (!loaded) return;
+    deleteProjectFromStorage(id);
+    clearSyncBase(id);
+    setProjectIndex(loadProjectIndex());
+    pendingDeletes.current.set(id, window.setTimeout(() => finishDelete(id), 8000));
+    toast(`Deleted “${loaded.title}”`, {
+      action: {
+        label: 'Undo',
+        onClick: () => {
+          window.clearTimeout(pendingDeletes.current.get(id));
+          pendingDeletes.current.delete(id);
+          saveProjectToStorage(loaded);
+          setProjectIndex(loadProjectIndex());
+        },
+      },
+    });
+  };
 
   const pullLatestFromServer = async (id) => {
     const result = await loadRemoteProject(id);
     if (!result.ok) {
-      alert('Could not pull latest version from server.');
+      toast('Could not pull the latest version from the server.', { tone: 'error' });
       return;
     }
     saveProjectToStorage(result.data);
+    setSyncBase(id, result.data.lastEdited);
     setProjectIndex(loadProjectIndex());
     setStaleLocalProjects((prev) => prev.filter((e) => e.id !== id));
   };