fix(pwa): lift toasts above the bottom bar wherever the phone shell shows it

The toaster's mobile offset applies below 600 px only, while the bottom
bar follows the shell up to md and on a touch screen held sideways. In
between, the update toast and its reload button sat over the tabs.

src/__tests__/pwa-mobile-shell-guard.test.ts

@@ -60,6 +60,15 @@ describe("the shell owns the safe area", () => {
     expect(css).toMatch(/@custom-variant pointer-fine/);
   });
 
+  it("bottom toasts clear the bar under the same query the bar follows", () => {
+    // Sonner's own mobile offset stops at 600 px; the bar shows up to `md`
+    // and on a phone held sideways, so the lift keys on `shell-mobile`.
+    const css = code(read("src/app/globals.css"));
+    expect(css).toMatch(
+      /html \[data-sonner-toaster\]\[data-y-position="bottom"\]\s*\{\s*@variant shell-mobile\s*\{\s*bottom:\s*calc\(4rem \+ env\(safe-area-inset-bottom/,
+    );
+  });
+
   it("the bottom bar and the Coach button step aside for the keyboard", () => {
     expect(read("src/components/layout/bottom-nav.tsx")).toContain(
       'data-keyboard-hide=""',

src/app/globals.css

@@ -628,6 +628,21 @@ html[data-keyboard="open"] [data-keyboard-hide] {
   display: none !important;
 }
 
+/*
+ * Toasts clear the bottom bar wherever the phone shell shows it. The
+ * toaster's `mobileOffset` (providers.tsx) applies below 600 px only, while
+ * the bar follows the shell (up to `md`, and a phone held sideways): between
+ * the two the "new version" toast sat over the tabs. Unlayered and one `html`
+ * deeper than Sonner's injected `[data-sonner-toaster][data-y-position]`
+ * rule, which is unlayered too and lands after this sheet. The Coach panel's
+ * rule further down still outranks it while that panel is open.
+ */
+html [data-sonner-toaster][data-y-position="bottom"] {
+  @variant shell-mobile {
+    bottom: calc(4rem + env(safe-area-inset-bottom, 0px) + 0.75rem);
+  }
+}
+
 /*
  * Side and top sheets run the full height of the window. In an installed
  * app on a tablet the status bar sits over their first 24 px, and a phone

src/components/providers.tsx

@@ -392,8 +392,9 @@ function OfflineMutationToaster() {
  * 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.
+ * them above the bar and the home indicator. Sonner applies it below 600 px
+ * only, while the bar follows the shell (up to `md`, and a phone held
+ * sideways), so `globals.css` repeats the lift under `shell-mobile`.
  */
 function AppToaster() {
   const { resolvedTheme } = useTheme();