fix(shell): read the home-indicator inset through one property

The rail, main, the bottom bar and the Coach button each read
env(safe-area-inset-bottom) on their own. They now read
--safe-area-bottom, which is that env() value, so the four always agree
and a test can set an inset that no desktop browser reports.

The app shell's root also states the content colour itself instead of
leaving it to propagate from the body. A WKWebView browser on iPadOS
(Edge, Chrome, Firefox) can keep the strip over the home indicator out
of the page's layout and fill it with the colour it takes from the root;
that strip now meets main in the same colour.

src/app/globals.css

@@ -612,6 +612,16 @@ body,
    * Scoping it to the body-scrolled branch leaves exactly one gutter per
    * branch.
    */
+  /*
+   * The home-indicator inset, read through one property by everything that
+   * owns the shell's bottom edge (the rail, `<main>`, the bottom bar, the
+   * Coach button). It is `env()` everywhere it matters; a test that needs an
+   * inset no desktop browser reports sets it instead
+   * (`e2e/tablet-shell.spec.ts`).
+   */
+  :root {
+    --safe-area-bottom: env(safe-area-inset-bottom, 0px);
+  }
   html[data-scroll="body"] {
     scrollbar-gutter: stable;
   }
@@ -637,6 +647,17 @@ body,
     overflow: hidden;
     overscroll-behavior: none;
   }
+  /*
+   * The colour of anything beyond the page. A browser built on WKWebView
+   * (Edge, Chrome, Firefox on iPadOS) can keep the strip over the home
+   * indicator out of the page's layout and fill it with the page's
+   * "under-page" colour, which it takes from the root. The root states the
+   * content colour itself rather than leaving it to propagate from the body,
+   * so that strip meets `<main>` in the same colour.
+   */
+  html[data-scroll="shell"] {
+    background-color: var(--background);
+  }
   body {
     @apply bg-background text-foreground;
   }