Reader: compare button next to Aa

A button beside Aa in the reader's top bar opens a Compare translations
sheet (pick the Bible to compare with, show/hide the differing-word
highlights). It shows as active while a comparison is on. The controls
moved out of the Aa sheet; "C" opens it from the keyboard.

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

src/components/reader/SettingsSheet.jsx

@@ -2,7 +2,6 @@
 // to read beside the first.
 import Sheet from './Sheet.jsx';
 import { READER_THEMES } from './readerThemes.js';
-import { READER_TRANSLATIONS } from '../../utils/bibleText.js';
 
 const SIZES = [['S', 0.875], ['M', 1], ['L', 1.125], ['XL', 1.25], ['XXL', 1.5]];
 
@@ -22,7 +21,6 @@ function Segmented({ options, value, onChange, label }) {
 export default function SettingsSheet({
   open, onClose, fontSize, onFontSize, theme, onTheme, layout, onLayout, wide, onWide,
   font, onFont, spacing, onSpacing, verseNumbers, onVerseNumbers,
-  translation, parallel, onParallel, showDiff, onShowDiff,
 }) {
   const row = 'mb-4';
   const label = 'mb-1.5 block text-xs text-[var(--r-sub)]';
@@ -56,24 +54,6 @@ export default function SettingsSheet({
         <span className={label}>Width</span>
         <Segmented label="Reading width" options={[[false, 'Column'], [true, 'Two columns']]} value={wide} onChange={onWide} />
       </div>
-      <div className={row}>
-        <span className={label}>Read beside another Bible</span>
-        <div role="group" aria-label="Second translation" className="flex flex-wrap gap-1.5">
-          {[{ id: '', name: 'Off' }, ...READER_TRANSLATIONS.filter((t) => t.id !== translation)].map((t) => (
-            <button key={t.id || 'off'} type="button" onClick={() => onParallel(t.id)} aria-pressed={parallel === t.id} title={t.name}
-              className={`rounded-full border px-3 py-1 text-xs font-medium ${parallel === t.id ? 'border-[var(--r-text)] bg-[var(--r-text)] text-[var(--r-bg)]' : 'border-[var(--r-line)] text-[var(--r-sub)] hover:bg-black/5'}`}>
-              {t.id || 'Off'}
-            </button>
-          ))}
-        </div>
-        <p className="mt-1.5 text-[11px] text-[var(--r-sub)]">Shows both side by side on wider screens, and stacked on a phone.</p>
-      </div>
-      {parallel && (
-        <div className={row}>
-          <span className={label}>Highlight differences from {translation}</span>
-          <Segmented label="Highlight differences" options={[[true, 'Show'], [false, 'Hide']]} value={showDiff} onChange={onShowDiff} />
-        </div>
-      )}
     </Sheet>
   );
 }