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/pages/ReaderPage.test.jsx

@@ -142,6 +142,18 @@ test('the H key opens the highlights', () => {
   expect(screen.getByRole('dialog', { name: /bookmarks & highlights/i })).toBeTruthy();
 });
 
+test('the side panel has a drag handle to resize it, and no handle when no verse is open', () => {
+  const saved = { ...ctx };
+  render(<ReaderPage />);
+  expect(screen.queryByRole('separator', { name: /resize side panel/i })).toBeNull();
+  Object.assign(ctx, { readerSelectedVerse: 1 });
+  render(<ReaderPage />);
+  const handle = screen.getByRole('separator', { name: /resize side panel/i });
+  expect(handle).toHaveAttribute('aria-orientation', 'vertical');
+  expect(handle).toHaveAttribute('tabindex', '0'); // reachable by keyboard (arrow keys resize)
+  Object.assign(ctx, saved);
+});
+
 test('tapping a verse selects it', () => {
   render(<ReaderPage />);
   fireEvent.click(screen.getByText(/This man came to Jesus/));