Fix PWA header buttons unreachable on iPad

black-translucent status bar overlays page content, pushing the top
nav buttons behind the status bar where they can't be tapped. Switch
to black (status bar takes its own space, content starts below).

Also add env(safe-area-inset-top) padding on <header> elements when
running in standalone/PWA mode so notched iPhones are handled too.

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

index.html

@@ -13,7 +13,7 @@
 
     <!-- iOS PWA -->
     <meta name="apple-mobile-web-app-capable" content="yes" />
-    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
+    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
     <meta name="apple-mobile-web-app-title" content="Bible Study" />
     <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
 

src/index.css

@@ -30,6 +30,13 @@ 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);
+  }
+}
+
 .scrollbar-thin::-webkit-scrollbar {
   width: 9px;
   height: 9px;