Redesign the study side: Outline, Study, Script and Export stages

Studies now move through a stage bar in the reader's themes. Outline splits
chunks by clicking between verses (join merges notes) and suggests chunks from
section headings. Study is three panes: outline, passage with an Observe /
Interpret / Apply accordion, and commentary / word study / cross-refs / people
& places for the chunk; original words are added by clicking them in the
interlinear. Script drafts an outline from notes; Export holds files and the
share link. Home, Import and the Pronunciation guide are restyled. Study
projects are BSB only.

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

src/components/study/PageShell.jsx

@@ -0,0 +1,31 @@
+// Themed page frame for pages that aren't part of a study project (Home, Import):
+// slim top bar with a title, optional back button, and actions on the right.
+import { useApp } from '../../context/AppContext.js';
+import { themeVars, READER_THEMES } from '../reader/readerThemes.js';
+import { ChevronLeft } from '../reader/icons.jsx';
+import AuthStatus from '../AuthStatus.jsx';
+
+const THEME_ORDER = ['paper', 'sepia', 'dark'];
+
+export default function PageShell({ title, onBack, actions, maxWidth = 'max-w-6xl', children }) {
+  const { readerTheme, setReaderTheme } = useApp();
+  const cycle = () => setReaderTheme(THEME_ORDER[(THEME_ORDER.indexOf(readerTheme) + 1) % THEME_ORDER.length]);
+  return (
+    <div className="min-h-screen bg-[var(--r-bg)] font-sans text-[var(--r-text)]" style={themeVars(readerTheme)}>
+      <div className="sticky top-0 z-30 border-b border-[var(--r-line)] bg-[var(--r-bar)]">
+        <div className={`mx-auto flex min-h-[3rem] ${maxWidth} flex-wrap items-center gap-2 px-3 py-1.5`}>
+          {onBack && (
+            <button type="button" onClick={onBack} aria-label="Back" className="flex h-9 w-9 items-center justify-center rounded-lg text-[var(--r-sub)] hover:bg-black/5"><ChevronLeft /></button>
+          )}
+          <h1 className="text-base font-medium">{title}</h1>
+          <div className="ml-auto flex flex-wrap items-center gap-1.5">
+            {actions}
+            <button type="button" onClick={cycle} className="rounded-lg px-2 py-1.5 text-xs text-[var(--r-sub)] hover:bg-black/5" title="Change theme">{READER_THEMES[readerTheme]?.label}</button>
+            <AuthStatus themed />
+          </div>
+        </div>
+      </div>
+      {children}
+    </div>
+  );
+}