fix(pwa): follow the app's theme in the browser bar and toasts, lift toasts over the bottom bar

The theme-color tags followed the operating system's scheme, while the
app's theme is its own setting and defaults to dark: a phone in light
mode showed a light address bar or status bar over the dark app. The
client now rewrites both tags to the theme the page painted. The
toaster read Sonner's "system" for the same reason and now gets the
resolved theme as well.

Below 600 px Sonner stacks toasts 16 px above the bottom edge, which on
a phone is on top of the bottom bar: the "new version" hint covered the
tabs and the add button until dismissed. A mobile offset lifts toasts
above the bar and the home indicator.

pwa-mobile.spec.ts covers the hint's position and its Reload, a bottom
sheet standing on a stand-in keyboard, 16 px fields in portrait and held
sideways, and the sign-in card held sideways.

src/components/providers.tsx

@@ -19,6 +19,7 @@ import { I18nProvider, useTranslations } from "@/lib/i18n/context";
 import type { Locale } from "@/lib/i18n/config";
 import { toast } from "sonner";
 import { Toaster } from "@/components/ui/sonner";
+import { applyThemeColor } from "@/lib/pwa/theme-color";
 import { KeyboardInsetBridge } from "@/components/keyboard-inset-bridge";
 import { VersionPoller } from "@/components/version-poller";
 import { ServiceWorkerRegistrar } from "@/components/service-worker-registrar";
@@ -84,6 +85,9 @@ function getSystemTheme(): "dark" | "light" {
 function applyTheme(resolved: "dark" | "light") {
   document.documentElement.classList.remove("dark", "light");
   document.documentElement.classList.add(resolved);
+  // The browser bar and an installed app's status bar follow the theme the
+  // page painted, not the operating system's scheme (see theme-color.ts).
+  applyThemeColor(document, resolved);
 }
 
 // ── Theme as an external store ───────────────────────
@@ -378,6 +382,33 @@ function OfflineMutationToaster() {
 
 // ── Root Providers ───────────────────────────────────
 
+/**
+ * The app-wide toaster.
+ *
+ * Its theme is the one the page painted, not `"system"`: the app's theme is
+ * its own setting (dark by default), and a phone in light mode showed light
+ * toasts over the dark app.
+ *
+ * Below 600 px Sonner lays toasts across the bottom edge, 16 px up, which on
+ * a phone is on top of the bottom bar: the "new version" hint sat over the
+ * tabs and the add button until it was dismissed. The mobile offset lifts
+ * them above the bar and the home indicator. From `md` the bar is gone and
+ * the desktop offset applies.
+ */
+function AppToaster() {
+  const { resolvedTheme } = useTheme();
+  return (
+    <Toaster
+      position="bottom-right"
+      richColors
+      theme={resolvedTheme}
+      mobileOffset={{
+        bottom: "calc(4rem + env(safe-area-inset-bottom, 0px) + 0.75rem)",
+      }}
+    />
+  );
+}
+
 export function Providers({
   children,
   initialLocale,
@@ -405,7 +436,7 @@ export function Providers({
           <SharedRecordGrantLossBridge />
           <RecordSessionFenceBridge />
           {children}
-          <Toaster position="bottom-right" richColors />
+          <AppToaster />
           <KeyboardInsetBridge />
           <VersionPoller />
           <ServiceWorkerRegistrar />

src/components/ui/sonner.tsx

@@ -12,10 +12,9 @@ import { Toaster as Sonner, type ToasterProps } from "sonner";
 const Toaster = ({ ...props }: ToasterProps) => {
   return (
     <Sonner
-      // `theme="system"` lets Sonner match the resolved theme on the
-      // root element (set pre-paint by the inline theme script in
-      // `app/layout.tsx`) instead of pinning dark — on light-mode the
-      // hardcoded dark toaster contrasted badly against the page.
+      // A fallback only: Sonner's `"system"` follows the operating
+      // system's scheme, not the app's theme, so the app's toaster passes
+      // its resolved theme (`AppToaster` in `providers.tsx`).
       theme="system"
       className="toaster group"
       icons={{