Reader: resizable side panel

Drag the left edge of the verse side panel to resize it (arrow keys too,
Shift for bigger steps; double-click resets). The text reflows to make room,
and the width is remembered on this device. Reuses the Study page's resize
handle; the hook now takes the CSS variable to drive.

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

src/components/reader/VerseSheet.jsx

@@ -142,7 +142,7 @@ function CompareTab({ book, chapter, verse, current }) {
 export default function VerseSheet({
   verse, book, bookName, chapter, translation, words, crossRefs, crossRefsLoading, onLoadCrossRefs,
   bookmarkColor, onToggleBookmark, onCycleColor, onJump, onClose, request,
-  verseHighlights = [], colorLabels = {}, onHighlightVerse, onClearVerseHighlights,
+  verseHighlights = [], colorLabels = {}, onHighlightVerse, onClearVerseHighlights, panelRef, resizeHandle,
 }) {
   const [tab, setTab] = useState('commentary');
   const [copied, setCopied] = useState(false);
@@ -175,7 +175,7 @@ export default function VerseSheet({
 
   return (
     <Sheet
-      open modal={false} pane onClose={onClose}
+      open modal={false} pane onClose={onClose} panelRef={panelRef} edge={resizeHandle}
       title={`${bookName} ${chapter}:${verse.number}`}
       headerRight={(
         <>