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/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>
+  );
+}