Fix Reading Mode button position and add book icon for visibility

[realproject7]

Bug

1. Wrong position

The Reading Mode button sits on its own line above the "Genesis / Mar 25, 2026" title line. It should be on the same line as the genesis/chapter header, right-aligned. Currently the button has its own <div className="mb-4 flex justify-end"> wrapper that creates a separate row.

Expected: The "Genesis Mar 25, 2026" line and "Reading Mode" button should be on the same row — title left, button right.

2. Not visible enough

The button is text-only with a subtle border — easy to miss. Add a book/reading icon (e.g., open book SVG) next to the text to make it more discoverable.

Fix

Position fix

On the story page (src/app/story/[storylineId]/page.tsx), move the ReadingModeWrapper into the genesis section header so it's inline with "Genesis" and the date. Use flex items-center justify-between to put title left, button right.

Same fix needed on the chapter detail page (src/app/story/[storylineId]/[plotIndex]/page.tsx) — move the button inline with the chapter title header.

Icon

In src/components/ReadingMode.tsx, update ReadingModeButton to include an open-book SVG icon before the text:

<BookIcon className="h-3 w-3" />
<span>Reading Mode</span>

Files to modify

• src/app/story/[storylineId]/page.tsx — move ReadingModeWrapper inline with genesis header
• src/app/story/[storylineId]/[plotIndex]/page.tsx — move ReadingModeWrapper inline with chapter header
• src/components/ReadingMode.tsx — add book icon to ReadingModeButton

Branch

task/599-reading-mode-button

Acceptance criteria

• Reading Mode button on same line as "Genesis / Mar 25, 2026" (right-aligned)
• Same fix on chapter detail pages
• Book icon added next to "Reading Mode" text
• Works on both mobile and desktop
• Build passes