Focus reader scroll region on open so keys scroll the story

The reader overlay opened without moving focus, so Arrow-Up/Down and
PageUp/Down scrolled the page behind it until the user clicked into the
text. Make the scroll container focusable (tabindex=-1) and focus it on
open, and drop its focus outline.

internal/web/static/css/input.css

@@ -307,6 +307,7 @@ html[data-phase="night"] {
     -webkit-overflow-scrolling: touch;
     border-radius: 1.75rem;
   }
+  .pete-reader-scroll:focus { outline: none; }
 
   .pete-reader-article {
     background: var(--card);

internal/web/static/js/reader.js

@@ -674,6 +674,9 @@
     document.body.classList.add("overflow-hidden");
     applyType();
     show(firstUnread());
+    // Move focus into the scroll region so Space / PageUp-Down / arrow keys
+    // scroll the story, not the page behind it, without a click first.
+    if (scrollEl) { try { scrollEl.focus({ preventScroll: true }); } catch (e) { scrollEl.focus(); } }
   }
   function closeReader() {
     open = false;

internal/web/templates/layout.html

@@ -257,7 +257,7 @@
           <button type="button" data-reader-close class="pete-reader-btn" title="Close (esc)" aria-label="Close reader">esc</button>
         </div>
       </div>
-      <div class="pete-reader-scroll" data-reader-scroll>
+      <div class="pete-reader-scroll" data-reader-scroll tabindex="-1">
         <article class="pete-reader-article" data-reader-article></article>
         <div class="pete-reader-related" data-reader-related hidden></div>
       </div>