Hover tooltips, clickable cross-references, easier highlighting

- Tooltips on hover and keyboard focus across the app: icon-only buttons show
  their label, existing titles show in the app's style without the browser's
  delay, and the reader's main buttons show shortcut hints ("Search (/)").
  Touch screens are unaffected.
- Reader: cross-references (under verses and in the Cross-refs tab) open the
  passage's text in the side panel without leaving the chapter; "Open chapter"
  goes there when wanted
- Reader: the verse panel now has a Highlight row of colours for one-tap
  whole-verse highlighting (tap again to remove, Clear for all, with Undo);
  selecting words still highlights just those
- Fix: a cross-reference preview was cleared when React ran the panel's
  effect twice (development builds)

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

src/components/reader/ReaderText.jsx

@@ -18,7 +18,7 @@ export default function ReaderText({
   title, translation, translationId, notice, verses, loading, error, layout, fontSize, wide,
   font = 'serif', spacing = 'normal', showVerseNumbers = true, parallel = null, showDiff = true,
   bookmarks, bookKey, chapter, selectedVerse, onSelectVerse, renderVerseText, searchLower,
-  crossRefs, showCrossRefs, onSelectionEnd, footer,
+  crossRefs, showCrossRefs, onOpenCrossRef, onSelectionEnd, footer,
 }) {
   // How much the second Bible's wording differs from the first, over the chapter and verse by verse
   const diff = useMemo(
@@ -56,7 +56,11 @@ export default function ReaderText({
   const chips = (v) => showCrossRefs && crossRefs?.[v.number]?.length > 0 && (
     <span className="ml-1 inline-flex flex-wrap gap-1 align-baseline font-sans">
       {crossRefs[v.number].slice(0, 4).map((ref, i) => (
-        <span key={i} className="rounded-full border border-[var(--r-line)] px-1.5 py-px text-[10px] text-[var(--r-sub)]">{formatCrossRef(ref)}</span>
+        // Opens that passage in the side panel; stopPropagation so the verse itself isn't also toggled
+        <button key={i} type="button" onClick={(e) => { e.stopPropagation(); onOpenCrossRef?.(v.number, ref); }}
+          onKeyDown={(e) => e.stopPropagation()}
+          className="rounded-full border border-[var(--r-line)] px-1.5 py-px text-[10px] text-[var(--r-sub)] hover:border-[var(--r-accent)] hover:text-[var(--r-accent)]"
+          data-tip={`Read ${formatCrossRef(ref)} in the side panel`}>{formatCrossRef(ref)}</button>
       ))}
     </span>
   );