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/index.css

@@ -15,7 +15,7 @@ body,
 body {
   margin: 0;
   font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
-  background: #f8fafc;
+  background: #faf7f0; /* the default (paper) theme; replaced by the chosen theme at runtime */
   color: #0f172a;
 }
 
@@ -30,11 +30,10 @@ select {
   font: inherit;
 }
 
-/* When installed as a PWA, push header content below the status bar */
-@media all and (display-mode: standalone) {
-  header {
-    padding-top: env(safe-area-inset-top, 0px);
-  }
+/* Top bars leave room for the status bar / notch when the app is installed or full-screen
+   (env() is 0 in an ordinary browser tab). */
+.safe-top {
+  padding-top: env(safe-area-inset-top, 0px);
 }
 
 .scrollbar-thin::-webkit-scrollbar {