Match the browser/OS chrome to the theme and clear the status bar

The app now sets theme-color, color-scheme and the page background from the chosen theme,
so the iPad status-bar area no longer shows a light band over a dark theme. Every top bar
leaves room for the status bar via a safe-top class (replacing a rule that padded every
<header>). Install defaults match the paper theme.

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

src/utils/systemChrome.js

@@ -0,0 +1,20 @@
+// Tells the browser / OS what the page looks like, so the parts it draws itself (the iPad and
+// iPhone status bar area, the address bar, overscroll, scrollbars, form controls) match the
+// chosen theme instead of defaulting to a light page.
+import { READER_THEMES } from '../components/reader/readerThemes.js';
+
+export function applySystemChrome(themeId, doc = document) {
+  const theme = READER_THEMES[themeId] ?? READER_THEMES.paper;
+  const { '--r-bg': bg, '--r-bar': bar } = theme.vars;
+  const root = doc.documentElement;
+  root.style.backgroundColor = bg;
+  root.style.colorScheme = themeId === 'dark' ? 'dark' : 'light';
+  if (doc.body) doc.body.style.backgroundColor = bg;
+  let meta = doc.querySelector('meta[name="theme-color"]');
+  if (!meta) {
+    meta = doc.createElement('meta');
+    meta.setAttribute('name', 'theme-color');
+    doc.head.appendChild(meta);
+  }
+  meta.setAttribute('content', bar); // matches the top bar, so the status bar area blends into it
+}