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

@@ -344,7 +344,7 @@ export default function ReaderPage() {
       )}
       {!chromeVisible && (
         <button type="button" onClick={() => setChromeVisible(true)} aria-label="Show controls"
-          className="fixed right-3 top-3 z-30 rounded-full border border-[var(--r-line)] bg-[var(--r-bar)] p-2 text-[var(--r-sub)] opacity-70 hover:opacity-100">
+          className="fixed right-3 top-[calc(0.75rem+env(safe-area-inset-top,0px))] z-30 rounded-full border border-[var(--r-line)] bg-[var(--r-bar)] p-2 text-[var(--r-sub)] opacity-70 hover:opacity-100">
           <FocusIcon />
         </button>
       )}

src/pages/ReadingPlansPage.jsx

@@ -101,7 +101,7 @@ export default function ReadingPlansPage() {
 
   return (
     <div className="min-h-screen bg-[var(--r-bg)] pb-16 text-[var(--r-text)]" style={themeVars(readerTheme)}>
-      <div className="sticky top-0 z-30 border-b border-[var(--r-line)] bg-[var(--r-bar)] font-sans">
+      <div className="safe-top sticky top-0 z-30 border-b border-[var(--r-line)] bg-[var(--r-bar)] font-sans">
         <div className="mx-auto flex h-12 max-w-3xl items-center gap-1 px-2">
           <button type="button" onClick={goHome} aria-label="Back to home" className="flex h-9 items-center gap-0.5 rounded-lg pl-1 pr-2 text-[var(--r-sub)] hover:bg-black/5"><ChevronLeft /><span className="hidden text-xs sm:inline">Home</span></button>
           <h1 className="mx-auto text-sm font-medium">Reading plans</h1>