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/hooks/useResizableWidth.test.js

@@ -79,3 +79,12 @@ test('the handle describes itself for assistive technology', () => {
   const props = setup().handle();
   expect(props).toMatchObject({ role: 'separator', 'aria-orientation': 'vertical', 'aria-label': 'Resize side panel', tabIndex: 0, 'aria-valuenow': 448 });
 });
+
+test('a different panel can name its own CSS variable', () => {
+  const h = setup({ cssVar: '--reader-pane' });
+  act(() => { down(h); move(h, 1000); });
+  expect(h.style.setProperty).toHaveBeenLastCalledWith('--reader-pane', '400px');
+  act(() => up(h));
+  act(() => { h.handle().onDoubleClick(); });
+  expect(h.style.removeProperty).toHaveBeenLastCalledWith('--reader-pane');
+});