Stop the page extending under the status bar; use visible-viewport units

Drops viewport-fit=cover so the iPad/iPhone status bar is its own area and the system's
top-edge blur no longer covers the app bar. Fixed-height study stages are position:fixed so
they cannot scroll the document, and min-h-screen/100vh become dvh units.

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

src/pages/AuthPage.jsx

@@ -51,7 +51,7 @@ export default function AuthPage() {
 
   if (authMfaPending) {
     return (
-      <div {...shell} className="flex min-h-screen items-center justify-center bg-[var(--r-bg)] px-4 text-[var(--r-text)]">
+      <div {...shell} className="flex min-h-dvh items-center justify-center bg-[var(--r-bg)] px-4 text-[var(--r-text)]">
         <div className="w-full max-w-sm rounded-2xl border border-[var(--r-line)] bg-[var(--r-bar)] p-8">
           <p className="text-sm uppercase tracking-[0.24em] text-[var(--r-sub)]">Bible Study Project</p>
           <h1 className="mt-2 text-xl font-medium text-[var(--r-text)]">Two-factor verification</h1>
@@ -109,7 +109,7 @@ export default function AuthPage() {
   }
 
   return (
-    <div {...shell} className="flex min-h-screen items-center justify-center bg-[var(--r-bg)] px-4 py-12 text-[var(--r-text)]">
+    <div {...shell} className="flex min-h-dvh items-center justify-center bg-[var(--r-bg)] px-4 py-12 text-[var(--r-text)]">
       <div className="grid w-full max-w-5xl items-center gap-16 lg:grid-cols-2">
         {/* Branding / feature panel — hidden on small screens to keep the form front and center there */}
         <div className="hidden lg:block">

src/pages/ReaderPage.jsx

@@ -328,7 +328,7 @@ export default function ReaderPage() {
   const paneOpen = !!selectedVerse && !readerDrawMode;
 
   return (
-    <div className="min-h-screen bg-[var(--r-bg)] text-[var(--r-text)]" style={themeVars(readerTheme)}
+    <div className="min-h-dvh bg-[var(--r-bg)] text-[var(--r-text)]" style={themeVars(readerTheme)}
          onTouchStart={handleTouchStart} onTouchEnd={handleTouchEnd}>
       {chromeVisible && (
         <TopBar

src/pages/ReadingPlansPage.jsx

@@ -100,7 +100,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="min-h-dvh bg-[var(--r-bg)] pb-16 text-[var(--r-text)]" style={themeVars(readerTheme)}>
       <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>