feat(mobile): iOS polish — theme-color, safe-area, dvh, tap-highlight

MOB-19: Add a viewport Viewport export with viewportFit: 'cover' and
themeColor entries for light (#faf7f2) / dark (#1a1612), plus the
appleWebApp metadata for the home-screen status bar style and title.
Manifest's stale #3b82f6 theme_color updated to match brand cream.

MOB-20: Apply env(safe-area-inset-*) to the sticky chrome — the top
header gets max(padding, inset-left/right) so the logo and tab links
clear the notch in landscape; the bottom tab bar already had
inset-bottom and now also gets inset-left/right.

MOB-21: Replace 100vh with 100dvh in body min-height, modal max-heights,
the map view container, and the fullscreen map. Older engines fall
back via the duplicated vh declaration.

MOB-22: Set -webkit-tap-highlight-color: transparent on body to
suppress the iOS Safari grey flash; add a generic touch-pointer
:active rule (opacity 0.7) so taps still register visually on plain
anchors and bare buttons. Components with their own :active styling
are unaffected.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

nextjs-app/app/globals.css

@@ -92,7 +92,24 @@ body {
     background: var(--bg-primary);
     color: var(--text-primary);
     line-height: 1.6;
+    /* dvh (dynamic viewport) accounts for iOS Safari's collapsing toolbar;
+       fall back to vh on older engines that don't recognise dvh. */
     min-height: 100vh;
+    min-height: 100dvh;
+    /* Suppress the iOS Safari grey tap flash — explicit :active states
+       below carry the press feedback instead. */
+    -webkit-tap-highlight-color: transparent;
+}
+
+/* Provide a baseline press feedback for the most common interactive
+   elements — replaces the suppressed default tap highlight. Buttons and
+   .btn-* classes carry their own :active styles already; this handles
+   plain anchors used as inline links and bare button elements. */
+@media (hover: none) and (pointer: coarse) {
+    a:active,
+    button:active {
+        opacity: 0.7;
+    }
 }
 
 /* Reserve space for the fixed mobile bottom tab bar (56px + safe-area inset). */
@@ -1766,7 +1783,7 @@ body {
     
     .modal-content {
         margin: 1rem;
-        max-height: calc(100vh - 2rem);
+        max-height: calc(100dvh - 2rem);
     }
 
     .modal-header {
@@ -1836,7 +1853,7 @@ body {
 @media (max-width: 480px) {
     .modal-content {
         margin: 0.5rem;
-        max-height: calc(100vh - 1rem);
+        max-height: calc(100dvh - 1rem);
     }
 
     .modal-header {

nextjs-app/app/layout.tsx

@@ -1,4 +1,4 @@
-import type { Metadata } from 'next';
+import type { Metadata, Viewport } from 'next';
 import { DM_Sans, Playfair_Display } from 'next/font/google';
 import Script from 'next/script';
 import { Navigation } from '@/components/Navigation';
@@ -21,7 +21,24 @@ const playfairDisplay = Playfair_Display({
   display: 'swap',
 });
 
+export const viewport: Viewport = {
+  width: 'device-width',
+  initialScale: 1,
+  // viewport-fit=cover lets us paint behind the notch / Dynamic Island so
+  // env(safe-area-inset-*) values resolve to real numbers on iPhone.
+  viewportFit: 'cover',
+  themeColor: [
+    { media: '(prefers-color-scheme: light)', color: '#faf7f2' },
+    { media: '(prefers-color-scheme: dark)', color: '#1a1612' },
+  ],
+};
+
 export const metadata: Metadata = {
+  appleWebApp: {
+    capable: true,
+    title: 'SchoolCompare',
+    statusBarStyle: 'default',
+  },
   title: {
     default: 'SchoolCompare | Compare School Performance',
     template: '%s | SchoolCompare',