Add Insights, Observe-first, compare, handout layouts, richer search, backup nudge

- Commentary and study aids wait for 15 words of your own Observe notes.
- Insights page: this week's own work, themes across studies, words you keep
  studying, what slipped in recalls, open follow-ups.
- Recall can record what slipped; session notes (teach it back, who came,
  group notes, follow-ups); "Pray about this" from Apply.
- Compare any two passages side by side.
- Handout layouts: standard, questions only, large print, note-taking.
- Search understands "in <book>", "last week/month/year" and a year.
- Home shows the last backup age and nudges after two weeks.
- Phone: the stage bar scrolls instead of clipping Script and Export.

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

src/components/WeeklyRecall.jsx

@@ -16,6 +16,7 @@ export default function WeeklyRecall() {
   const { projectIndex, saveChunkRecall, openStudyChunk } = useApp();
   const [step, setStep] = useState('card'); // card -> write -> compare -> done
   const [text, setText] = useState('');
+  const [gaps, setGaps] = useState('');
   const pick = useMemo(
     () => pickRecall(projectIndex.map((e) => loadProjectById(e.id)).filter(Boolean)),
     [projectIndex],
@@ -24,7 +25,7 @@ export default function WeeklyRecall() {
   if (!pick) return null;
 
   const finish = (rating) => {
-    saveChunkRecall(pick.projectId, pick.chunk.id, { at: Date.now(), text: text.trim(), rating });
+    saveChunkRecall(pick.projectId, pick.chunk.id, { at: Date.now(), text: text.trim(), rating, gaps: gaps.trim() });
     setStep('done');
   };
 
@@ -63,6 +64,10 @@ export default function WeeklyRecall() {
               ))}
             </div>
           </div>
+          <label className="mt-3 block text-xs text-[var(--r-sub)]">What did you miss or get wrong? <span className="opacity-70">(one per line; collected in Insights)</span>
+            <textarea aria-label="What slipped" value={gaps} onChange={(e) => setGaps(e.target.value)} rows={2}
+              className="mt-1 w-full resize-y rounded-lg border border-[var(--r-line)] bg-[var(--r-bg)] px-2.5 py-1.5 text-sm text-[var(--r-text)] focus:outline-none" />
+          </label>
           <p className="mt-3 text-xs text-[var(--r-sub)]">How did you do?</p>
           <div className="mt-1 flex flex-wrap gap-2">
             {RATE.map((r) => (