Reader: show how much another translation differs from the one being read

- Word-level comparison (ignores case and punctuation): differing words are
  marked in both columns of the side-by-side view
- Chapter summary ("NET is 18% different from BSB · 37 of 39 verses differ")
  with links to the most different verses, and a percentage on each verse
- Compare tab on a verse shows each translation's difference from the one
  being read, with the differing words marked
- "Highlight differences" setting; your own highlights and search matches
  always win where they overlap a difference mark

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

src/components/reader/VerseSheet.jsx

@@ -6,6 +6,8 @@ import { CommentaryTab, PeoplePlacesTab } from '../StudyPanel.jsx';
 import { BookmarkIcon, CopyIcon } from '../../utils/bibleUtils.jsx';
 import { formatCrossRef, speakOriginalWord } from '../../utils/wordStudy.js';
 import { READER_TRANSLATIONS, fetchChapter } from '../../utils/bibleText.js';
+import { diffVerses, differenceLabel } from '../../utils/textDiff.js';
+import { DiffText } from './DiffText.jsx';
 
 const TABS = [['commentary', 'Commentary'], ['compare', 'Compare'], ['original', 'Original'], ['refs', 'Cross-refs'], ['people', 'People & places']];
 
@@ -68,20 +70,29 @@ function CompareTab({ book, chapter, verse, current }) {
     return () => controller.abort();
   }, [book, chapter, verse]);
 
+  const mine = rows[current]?.text;
   return (
     <div className="space-y-3">
       {READER_TRANSLATIONS.map((t) => {
         const row = rows[t.id];
+        // How this wording differs from the Bible being read, word by word
+        const d = row?.text && mine && t.id !== current ? diffVerses(mine, row.text) : null;
         return (
           <div key={t.id}>
-            <p className="mb-0.5 text-[11px] uppercase tracking-wide text-[var(--r-sub)]">{t.id}{t.id === current ? ' · reading' : ''}</p>
+            <p className="mb-0.5 flex items-center gap-2 text-[11px] uppercase tracking-wide text-[var(--r-sub)]">
+              <span>{t.id}{t.id === current ? ' · reading' : ''}</span>
+              {d && <span className="normal-case tracking-normal">{differenceLabel(d.similarity)}</span>}
+            </p>
             {!row ? <p className="text-sm text-[var(--r-sub)]">Loading…</p>
               : row.error ? <p className="text-sm text-[var(--r-sub)]">{row.error}</p>
-                : <p className="font-serif text-[15px] leading-relaxed">{row.text}</p>}
+                : <p className="font-serif text-[15px] leading-relaxed"><DiffText text={row.text} ranges={d?.b} /></p>}
           </div>
         );
       })}
-      <p className="border-t border-[var(--r-line)] pt-2 text-[10px] leading-snug text-[var(--r-sub)]">Copyright notices for each translation appear at the foot of the chapter when you read it.</p>
+      <p className="border-t border-[var(--r-line)] pt-2 text-[10px] leading-snug text-[var(--r-sub)]">
+        {mine ? <><span className="diff-hl">Marked words</span> aren’t in the {current} wording. </> : null}
+        Copyright notices for each translation appear at the foot of the chapter when you read it.
+      </p>
     </div>
   );
 }