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">