From f5ccea63de50a63c449dbfd91e74cb33b2b94a36 Mon Sep 17 00:00:00 2001
From: BigSimmo <87357024+BigSimmo@users.noreply.github.com>
Date: Sun, 26 Jul 2026 20:04:52 +0800
Subject: [PATCH 1/7] style: soften phone search footer glass

---
 docs/search-chrome-behaviour.md               | 23 +++++++------
 src/app/globals.css                           | 26 +++++++-------
 src/components/DocumentViewer.tsx             |  2 +-
 src/components/calculators/search-page.tsx    |  8 +++--
 .../master-search-header.tsx                  |  2 +-
 tests/mobile-chrome-paint-contract.test.ts    | 10 ++++--
 tests/ui-phone-scroll.spec.ts                 | 34 ++++++++++++++-----
 7 files changed, 67 insertions(+), 38 deletions(-)

diff --git a/docs/search-chrome-behaviour.md b/docs/search-chrome-behaviour.md
index 9509524e..d1452b17 100644
--- a/docs/search-chrome-behaviour.md
+++ b/docs/search-chrome-behaviour.md
@@ -19,20 +19,21 @@ This repo uses one shared search experience across the global shell, dashboard r
 2. Keep the CSS token `--phone-dock-hidden-pad` aligned with `mobileComposerHiddenReserve`.
 3. A visible fixed phone dock may include `var(--safe-area-bottom)` so the pill clears the home indicator.
 4. A hidden phone dock must release the content-facing reserve to `0rem`; do not use `env(safe-area-inset-bottom)` or `var(--safe-area-bottom)` for hidden content padding.
-5. Edge-to-edge phone dock mode is `left: 0; right: 0; bottom: 0; width: 100%`; inset the pill with padding, not with a non-zero bottom offset.
+5. Edge-to-edge phone dock mode is `left: 0; right: 0; bottom: 0; width: 100%`; inset the pill with padding, not with a non-zero bottom offset. Keep the dock form transparent and use its absolute `.answer-footer-search-backdrop` child for a localized translucent gradient/blur through the safe area; it must move and fade with the dock, never become a viewport-fixed or opaque slab.
 6. Header and footer chrome that share the same scroll signal should hide/reveal symmetrically for the surfaces that actually hide: when the phone top bar is hidden, `chrome-safe-area-top` and the controls both release to `0rem` so underlying content paints to the physical viewport edge. The visible phone header still owns `var(--safe-area-top)`; tablet/desktop sticky chrome keeps its pinned inset. Top-bar hide/reveal is cross-breakpoint; the search field stays pinned on tablets, while desktop search belongs to page flow and scrolls away naturally; the bottom search dock is phone-only. Hidden bottom dock reserve stays `0rem` (invariant 4). Read "Scroll hide/reveal" below before changing either.
 7. Do not add page-local dock-sized `pb-[calc(...safe-area...)]` under a shell-owned dock. Put clearance in the shared reserve or the page-owned composer, never both.
 8. `GlobalSearchShell` uses an inner `mobile-composer-reserve-pad` so phone padding contributes to scroll height; do not move phone shell clearance back to scrollport padding without a browser proof.
-9. Keep collapse-budget policy geometry-aware: an in-flow collapsing phone header needs enough remaining runway to absorb controls + released top safe-area + dock clearance, while a fixed overlay that only releases bottom reserve may hide when its post-collapse range retains the top reveal band plus deliberate hide intent _and_ the current offset already fits that post-collapse range (no material near-bottom clamp). Do not use synthetic page padding to make the stricter gate pass.
-10. Detect reserve-transition clamps from geometry, not a wider pixel tolerance: if the scroll range shrinks and the previous offset no longer fits inside the new maximum, rebase that frame as layout feedback. Once the range stabilizes, the same upward movement must reveal normally.
-11. Standalone mode-home detection (`isStandaloneModeHomePath`) is pathname-only. Do not gate hero vs dock on a React `searchMode` that can update before the router pathname lands — that one-frame mismatch animates reserve padding and reads as a choppy screen resize.
-12. Phone `#main-content` / reserve-pad `padding-bottom` transitions apply while `data-reserve-transitioning="true"` (scroll-hide and reveal). Mode and route reserve flips clear that marker immediately and must snap.
-13. Shared shell must reset phone scroll offset and scroll-hide state on `pathname` change so mode homes do not inherit a mid-page offset or collapsed header.
-14. Hero composer portal: keep the default composer mounted until the portal host is actually attached; do not hide on `slotId` alone (mode-home remounts otherwise flash a null gap).
-15. Leaving the dashboard shell for a namespaced mode (`selectSearchMode` / `crossModeSearch`) must navigate without rewriting dashboard chrome first.
-16. Do not wrap mode-home `{children}` in `ClientHydrationBoundary` — that blanks RSC HTML until JS mounts. Keep hydration guards on the specific leaf that mismatches. Do not call `useSearchParams()` in an ancestor Suspense that also renders route `{children}`: that nests the page segment inside the shell’s incomplete streaming boundary and can leave a persistent hidden `S:` clone (duplicate page-root `data-testid`s). Gate always-standalone pathnames with `isAlwaysStandaloneShellPath`, and bridge search params beside the shell body via `ShellSearchParamsBridge`.
-17. Standalone mode-home `loading.tsx` files must render `ModeHomeRouteLoading` (phone top-aligned). Do not reuse unrelated results/medication skeletons.
-18. `ClinicalDashboard` must stay out of the shared shell’s static import graph (dynamic import) so namespaced mode routes do not parse the dashboard module.
+9. Page-owned fixed phone composers follow the same release contract: calculators use the shared footer backdrop; DocumentViewer keeps its floating pill but synchronizes transform, opacity, pointer release, and its own zero-reserve content padding. In-flow hero composers remain free of fixed-footer glass.
+10. Keep collapse-budget policy geometry-aware: an in-flow collapsing phone header needs enough remaining runway to absorb controls + released top safe-area + dock clearance, while a fixed overlay that only releases bottom reserve may hide when its post-collapse range retains the top reveal band plus deliberate hide intent _and_ the current offset already fits that post-collapse range (no material near-bottom clamp). Do not use synthetic page padding to make the stricter gate pass.
+11. Detect reserve-transition clamps from geometry, not a wider pixel tolerance: if the scroll range shrinks and the previous offset no longer fits inside the new maximum, rebase that frame as layout feedback. Once the range stabilizes, the same upward movement must reveal normally.
+12. Standalone mode-home detection (`isStandaloneModeHomePath`) is pathname-only. Do not gate hero vs dock on a React `searchMode` that can update before the router pathname lands — that one-frame mismatch animates reserve padding and reads as a choppy screen resize.
+13. Phone `#main-content` / reserve-pad `padding-bottom` transitions apply while `data-reserve-transitioning="true"` (scroll-hide and reveal). Mode and route reserve flips clear that marker immediately and must snap.
+14. Shared shell must reset phone scroll offset and scroll-hide state on `pathname` change so mode homes do not inherit a mid-page offset or collapsed header.
+15. Hero composer portal: keep the default composer mounted until the portal host is actually attached; do not hide on `slotId` alone (mode-home remounts otherwise flash a null gap).
+16. Leaving the dashboard shell for a namespaced mode (`selectSearchMode` / `crossModeSearch`) must navigate without rewriting dashboard chrome first.
+17. Do not wrap mode-home `{children}` in `ClientHydrationBoundary` — that blanks RSC HTML until JS mounts. Keep hydration guards on the specific leaf that mismatches. Do not call `useSearchParams()` in an ancestor Suspense that also renders route `{children}`: that nests the page segment inside the shell’s incomplete streaming boundary and can leave a persistent hidden `S:` clone (duplicate page-root `data-testid`s). Gate always-standalone pathnames with `isAlwaysStandaloneShellPath`, and bridge search params beside the shell body via `ShellSearchParamsBridge`.
+18. Standalone mode-home `loading.tsx` files must render `ModeHomeRouteLoading` (phone top-aligned). Do not reuse unrelated results/medication skeletons.
+19. `ClinicalDashboard` must stay out of the shared shell’s static import graph (dynamic import) so namespaced mode routes do not parse the dashboard module.
 
 ## Scroll hide/reveal
 
diff --git a/src/app/globals.css b/src/app/globals.css
index e8a35e92..fa5d7aa9 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -863,22 +863,22 @@ summary::-webkit-details-marker {
 }
 
 .answer-footer-search-dock .answer-footer-search-backdrop {
-  position: fixed;
+  position: absolute;
   inset-inline: 0;
   bottom: 0;
   top: auto;
   z-index: 0;
   height: var(--footer-scrim-height);
   overflow: hidden;
-  /* Bottom of the scrim must reach near-opaque so the safe-area band under the
-     pill reads as continuous dock chrome (edge-to-edge), not a white strip. */
+  /* The safe-area tint stays visibly translucent: this is localized glass
+     around the pill, never a second opaque footer surface. */
   background: linear-gradient(
     180deg,
     transparent 0%,
     color-mix(in srgb, var(--background) 12%, transparent) 32%,
     color-mix(in srgb, var(--background) 48%, transparent) 62%,
-    color-mix(in srgb, var(--background) 82%, transparent) 84%,
-    var(--background) 100%
+    color-mix(in srgb, var(--background) 64%, transparent) 84%,
+    color-mix(in srgb, var(--background) 72%, transparent) 100%
   );
   backdrop-filter: blur(2px) saturate(130%);
   mask-image: linear-gradient(180deg, rgb(0 0 0 / 20%) 0%, rgb(0 0 0 / 55%) 28%, black 52%, black 100%);
@@ -925,7 +925,7 @@ summary::-webkit-details-marker {
       transparent 0%,
       color-mix(in srgb, var(--background) 45%, transparent) 36%,
       color-mix(in srgb, var(--background) 82%, transparent) 68%,
-      var(--background) 100%
+      color-mix(in srgb, var(--background) 88%, transparent) 100%
     );
   }
 
@@ -970,7 +970,7 @@ summary::-webkit-details-marker {
       transparent 0%,
       color-mix(in srgb, var(--background) 50%, transparent) 36%,
       color-mix(in srgb, var(--background) 86%, transparent) 72%,
-      var(--background) 100%
+      color-mix(in srgb, var(--background) 90%, transparent) 100%
     );
   }
 
@@ -1831,9 +1831,8 @@ summary::-webkit-details-marker {
       0 8px 22px rgb(16 24 40 / 8%);
   }
 
-  /* Edge-to-edge phone dock: one full-width footer surface flush to the
-     viewport. The pill is the only translucent layer; the dock itself paints
-     the safe-area/home-indicator region. Never add a non-zero bottom offset. */
+  /* Edge-to-edge phone dock: the form remains transparent while its localized
+     child backdrop tints the pill and safe area. Never add a bottom offset. */
   .answer-footer-search-dock.answer-footer-search-edge,
   .answer-footer-search-dock.dashboard-composer-edge.answer-footer-search-edge,
   .answer-footer-search-dock.document-mobile-search-edge.answer-footer-search-edge {
@@ -1846,7 +1845,7 @@ summary::-webkit-details-marker {
     padding-inline: max(0.75rem, var(--safe-area-left)) max(0.75rem, var(--safe-area-right));
     padding-top: 0.5rem;
     padding-bottom: max(0.5rem, var(--safe-area-bottom));
-    background: var(--surface);
+    background: transparent;
   }
 
   .answer-footer-search-dock.document-mobile-search-edge.answer-footer-search-edge.document-mobile-search-compact,
@@ -1864,6 +1863,7 @@ summary::-webkit-details-marker {
   .answer-footer-search-dock.document-mobile-search-edge.answer-footer-search-edge[data-scroll-hidden="true"],
   .answer-footer-search-dock.dashboard-composer-edge.answer-footer-search-edge[data-scroll-hidden="true"] {
     transform: translateY(calc(100% + var(--safe-area-bottom)));
+    opacity: 0;
     pointer-events: none;
   }
 
@@ -1886,11 +1886,13 @@ summary::-webkit-details-marker {
      that gap. translateY-only: this form centres with mx-auto, not translateX. */
   .document-viewer-composer[data-scroll-hidden="true"] {
     transform: translateY(calc(100% + max(0.75rem, var(--safe-area-bottom))));
+    opacity: 0;
     pointer-events: none;
   }
 
   .answer-footer-search-dock .answer-footer-search-backdrop {
-    display: none;
+    display: block;
+    position: absolute;
   }
 
   .answer-footer-search-dock .answer-footer-search-pill {
diff --git a/src/components/DocumentViewer.tsx b/src/components/DocumentViewer.tsx
index 81ac9156..ac745360 100644
--- a/src/components/DocumentViewer.tsx
+++ b/src/components/DocumentViewer.tsx
@@ -1654,7 +1654,7 @@ export function DocumentViewer({
           }}
           className={cn(
             glassOverlaySurface,
-            "document-viewer-composer floating-composer-edge dashboard-composer-edge fixed z-40 mx-auto flex min-h-[56px] max-w-3xl items-center gap-2 rounded-full bg-[color:var(--surface-lux)] px-2 shadow-[var(--shadow-lux)] max-sm:transition-transform motion-reduce:transition-none",
+            "document-viewer-composer floating-composer-edge dashboard-composer-edge fixed z-40 mx-auto flex min-h-[56px] max-w-3xl items-center gap-2 rounded-full bg-[color:var(--surface-lux)] px-2 shadow-[var(--shadow-lux)] max-sm:transition-[transform,opacity] motion-reduce:transition-none",
             composerScrollHidden
               ? "max-sm:duration-[240ms] max-sm:ease-[cubic-bezier(0.4,0,0.2,1)]"
               : "max-sm:duration-200 max-sm:ease-[cubic-bezier(0.22,1,0.36,1)]",
diff --git a/src/components/calculators/search-page.tsx b/src/components/calculators/search-page.tsx
index ace33c4f..153a8b7d 100644
--- a/src/components/calculators/search-page.tsx
+++ b/src/components/calculators/search-page.tsx
@@ -659,17 +659,21 @@ export function CalculatorsSearchPage() {
       {activeCalc ? null : (
         <div
           data-testid="calculators-phone-dock"
+          data-scroll-hidden={dockHidden ? "true" : undefined}
           onFocusCapture={() => setDockFocused(true)}
           onBlurCapture={(event) => {
             if (!event.currentTarget.contains(event.relatedTarget as Node | null)) setDockFocused(false);
           }}
           className={cn(
-            "fixed inset-x-0 bottom-0 z-40 border-t border-[color:var(--border)] bg-[color:var(--surface-glass)] px-3 pb-[calc(0.75rem+var(--safe-area-bottom))] pt-3 backdrop-blur-md transition-transform duration-200 ease-out motion-reduce:transition-none sm:hidden",
-            dockHidden ? "translate-y-full" : "translate-y-0",
+            "answer-footer-search-dock answer-footer-search-edge fixed inset-x-0 bottom-0 z-40 px-3 pb-[calc(0.75rem+var(--safe-area-bottom))] pt-3 transition-[transform,opacity] motion-reduce:transition-none sm:hidden",
+            dockHidden
+              ? "pointer-events-none duration-[240ms] ease-[cubic-bezier(0.4,0,0.2,1)]"
+              : "duration-200 ease-[cubic-bezier(0.22,1,0.36,1)]",
           )}
           aria-hidden={dockHidden}
           inert={dockHidden || undefined}
         >
+          <div className="answer-footer-search-backdrop" aria-hidden="true" />
           <CalculatorComposer
             query={query}
             onQuery={setQuery}
diff --git a/src/components/clinical-dashboard/master-search-header.tsx b/src/components/clinical-dashboard/master-search-header.tsx
index 089555a4..14ec859a 100644
--- a/src/components/clinical-dashboard/master-search-header.tsx
+++ b/src/components/clinical-dashboard/master-search-header.tsx
@@ -1552,7 +1552,7 @@ export function MasterSearchHeader({
           showFooterSearchChips && "flex flex-col items-center gap-2.5",
           shouldHideBottomOnScroll &&
             cn(
-              "max-sm:transition-transform motion-reduce:transition-none",
+              "max-sm:transition-[transform,opacity] motion-reduce:transition-none",
               bottomComposerHidden
                 ? "max-sm:duration-[240ms] max-sm:ease-[cubic-bezier(0.4,0,0.2,1)]"
                 : "max-sm:duration-200 max-sm:ease-[cubic-bezier(0.22,1,0.36,1)]",
diff --git a/tests/mobile-chrome-paint-contract.test.ts b/tests/mobile-chrome-paint-contract.test.ts
index eb9b2f51..067611e9 100644
--- a/tests/mobile-chrome-paint-contract.test.ts
+++ b/tests/mobile-chrome-paint-contract.test.ts
@@ -5,7 +5,7 @@ import { describe, expect, it } from "vitest";
 const globalStylesSource = readFileSync(new URL("../src/app/globals.css", import.meta.url), "utf8");
 
 describe("mobile chrome paint baseline", () => {
-  it("uses one opaque edge-to-edge phone header and one footer surface", () => {
+  it("keeps the header opaque while the edge-to-edge footer uses localized soft glass", () => {
     const phoneStyles = globalStylesSource.slice(globalStylesSource.indexOf("@media (max-width: 639px)"));
 
     expect(phoneStyles).toMatch(
@@ -14,7 +14,13 @@ describe("mobile chrome paint baseline", () => {
     expect(phoneStyles).toMatch(/\.edge-glass-header-backdrop[\s\S]*?display: none/);
     expect(phoneStyles).toMatch(/\.answer-footer-search-dock\.answer-footer-search-edge[\s\S]*?bottom: 0;/);
     expect(phoneStyles).toMatch(
-      /\.answer-footer-search-dock \.answer-footer-search-backdrop\s*\{\s*\n\s*display: none/,
+      /\.answer-footer-search-dock\.answer-footer-search-edge[\s\S]*?background: transparent;/,
+    );
+    expect(phoneStyles).toMatch(
+      /\.answer-footer-search-dock \.answer-footer-search-backdrop[\s\S]*?display: block;[\s\S]*?position: absolute;/,
+    );
+    expect(phoneStyles).toMatch(
+      /\.answer-footer-search-dock\.answer-footer-search-edge\[data-scroll-hidden="true"\][\s\S]*?opacity: 0;[\s\S]*?pointer-events: none/,
     );
     expect(phoneStyles).toMatch(
       /\.answer-footer-search-dock \.answer-footer-search-pill[\s\S]*?color-mix\(in srgb, var\(--surface\) 92%, transparent\)/,
diff --git a/tests/ui-phone-scroll.spec.ts b/tests/ui-phone-scroll.spec.ts
index 3433cd80..f3ddbdbb 100644
--- a/tests/ui-phone-scroll.spec.ts
+++ b/tests/ui-phone-scroll.spec.ts
@@ -98,13 +98,13 @@ async function blockExternalRequests(page: Page) {
   });
 }
 
-async function gotoPhoneSurface(page: Page, path: string) {
+async function gotoPhoneSurface(page: Page, path: string, safeAreaBottom = 34) {
   await page.goto(path, { waitUntil: "domcontentloaded" });
   await expect(page.locator("#main-content").first()).toBeVisible({ timeout: 15_000 });
   // Simulate installed-PWA safe-area insets (the repo routes env() through
   // these vars precisely so Chromium tests can exercise them).
   await page.addStyleTag({
-    content: ":root{--safe-area-top:59px !important;--safe-area-bottom:34px !important;}",
+    content: `:root{--safe-area-top:59px !important;--safe-area-bottom:${safeAreaBottom}px !important;}`,
   });
   // Let hydration, fonts, and the composer/portal layout settle.
   await page.waitForTimeout(700);
@@ -200,16 +200,14 @@ test.beforeEach(async ({ page }) => {
   await blockExternalRequests(page);
 });
 
-test("phone chrome has an opaque header, one edge-to-edge footer, and releases both edges when hidden", async ({
+test("phone chrome keeps an opaque header and a soft-glass Services footer that fully releases when hidden", async ({
   page,
 }) => {
   await page.emulateMedia({ reducedMotion: "no-preference" });
   await page.setViewportSize(phoneViewport);
-  // A submitted Forms search is a stable GlobalSearchShell result surface: it
-  // renders the compact bottom dock and has enough content to exercise the
-  // shared header/footer hide signal. Its legacy backdrop remains optional;
-  // when present, the phone paint contract requires CSS to hide it.
-  await gotoPhoneSurface(page, "/forms?q=Form&run=1&focus=1");
+  // A submitted Services search is a stable GlobalSearchShell result surface.
+  // Its exaggerated bottom inset catches paint that only leaks through a notch.
+  await gotoPhoneSurface(page, "/services?q=clinic&run=1&focus=1", 112);
   await expect(page.locator("form.answer-footer-search-dock")).toBeVisible({ timeout: 20_000 });
   await expect(page.getByTestId("global-search-input")).not.toBeFocused({ timeout: 5_000 });
 
@@ -225,6 +223,11 @@ test("phone chrome has an opaque header, one edge-to-edge footer, and releases b
       headerBackdropFilter: header ? getComputedStyle(header).backdropFilter : "",
       headerBackdropDisplay: headerBackdrop ? getComputedStyle(headerBackdrop).display : "missing",
       dockBackdropDisplay: dockBackdrop ? getComputedStyle(dockBackdrop).display : "missing",
+      dockBackground: dock ? getComputedStyle(dock).backgroundColor : "",
+      dockBackdropPosition: dockBackdrop ? getComputedStyle(dockBackdrop).position : "missing",
+      dockBackdropPaint: dockBackdrop ? getComputedStyle(dockBackdrop).backgroundImage : "",
+      dockBackdropFilter: dockBackdrop ? getComputedStyle(dockBackdrop).backdropFilter : "",
+      dockBackdropPointerEvents: dockBackdrop ? getComputedStyle(dockBackdrop).pointerEvents : "",
       dockLeft: dockRect?.left ?? -1,
       dockRight: dockRect?.right ?? -1,
       dockBottom: dockRect?.bottom ?? -1,
@@ -235,7 +238,14 @@ test("phone chrome has an opaque header, one edge-to-edge footer, and releases b
   expect(visible.headerBackground).toMatch(/^rgb\(/);
   expect(visible.headerBackdropFilter).toBe("none");
   expect(visible.headerBackdropDisplay).toBe("none");
-  expect(["missing", "none"]).toContain(visible.dockBackdropDisplay);
+  expect(visible.dockBackground).toBe("rgba(0, 0, 0, 0)");
+  expect(visible.dockBackdropDisplay).toBe("block");
+  expect(visible.dockBackdropPosition).toBe("absolute");
+  expect(visible.dockBackdropPaint).toContain("gradient");
+  // The runner may emulate reduced transparency; the fallback deliberately
+  // removes blur but keeps this translucent gradient instead of a solid slab.
+  expect(["none", "blur(2px) saturate(1.3)"]).toContain(visible.dockBackdropFilter);
+  expect(visible.dockBackdropPointerEvents).toBe("none");
   expect(visible.dockLeft).toBeCloseTo(0, 0);
   expect(visible.dockRight).toBeCloseTo(phoneViewport.width, 0);
   expect(visible.dockBottom).toBeCloseTo(phoneViewport.height, 0);
@@ -245,19 +255,25 @@ test("phone chrome has an opaque header, one edge-to-edge footer, and releases b
   await dragScrollBy(page, Math.min(geometry.maxOffset, 500), 24);
   await expect(page.getByTestId("universal-header-collapse")).toHaveAttribute("data-scroll-hidden", "true");
   await expect(page.locator(".answer-footer-search-dock")).toHaveAttribute("data-scroll-hidden", "true");
+  await page.waitForTimeout(300);
 
   const hidden = await page.evaluate(() => {
     const collapse = document.querySelector<HTMLElement>('[data-testid="universal-header-collapse"]');
     const dock = document.querySelector<HTMLElement>(".answer-footer-search-dock");
+    const backdrop = dock?.querySelector<HTMLElement>(".answer-footer-search-backdrop");
     const main = document.getElementById("main-content");
     return {
       collapseHeight: collapse?.getBoundingClientRect().height ?? -1,
       dockTop: dock?.getBoundingClientRect().top ?? -1,
+      dockOpacity: dock ? getComputedStyle(dock).opacity : "",
+      backdropTop: backdrop?.getBoundingClientRect().top ?? -1,
       reserve: main ? getComputedStyle(main).getPropertyValue("--mobile-composer-reserve").trim() : "",
     };
   });
   expect(hidden.collapseHeight).toBeLessThanOrEqual(1);
   expect(hidden.dockTop).toBeGreaterThanOrEqual(phoneViewport.height - 1);
+  expect(hidden.dockOpacity).toBe("0");
+  expect(hidden.backdropTop).toBeGreaterThanOrEqual(phoneViewport.height - 1);
   expect(hidden.reserve).toBe("0rem");
 });
 

From 5d28b9c66bc5a4c9e2de832661f0ad5d41d2f4b7 Mon Sep 17 00:00:00 2001
From: BigSimmo <87357024+BigSimmo@users.noreply.github.com>
Date: Sun, 26 Jul 2026 20:17:15 +0800
Subject: [PATCH 2/7] test: cover page-owned phone footer glass

---
 src/components/calculators/search-page.tsx |  5 +-
 tests/mobile-chrome-paint-contract.test.ts | 18 +++++++
 tests/ui-phone-scroll.spec.ts              | 62 ++++++++++++++++++++++
 3 files changed, 84 insertions(+), 1 deletion(-)

diff --git a/src/components/calculators/search-page.tsx b/src/components/calculators/search-page.tsx
index 153a8b7d..125ff250 100644
--- a/src/components/calculators/search-page.tsx
+++ b/src/components/calculators/search-page.tsx
@@ -537,7 +537,10 @@ export function CalculatorsSearchPage() {
         resultsLabel="Calculators"
         // Page-owned phone dock: shell composer is hidden, so clear space here.
         // Collapse with the dock on scroll-hide so content reaches the viewport edge.
-        className={cn(!dockHidden && !activeCalc && "max-sm:pb-[calc(5.5rem+var(--safe-area-bottom))]")}
+        className={cn(
+          !dockHidden && !activeCalc && "max-sm:pb-[calc(5.5rem+var(--safe-area-bottom))]",
+          dockHidden && "max-sm:pb-0",
+        )}
         header={
           <div className="grid gap-3">
             {/* Desktop: universal-style composer at the top, matching the site-wide
diff --git a/tests/mobile-chrome-paint-contract.test.ts b/tests/mobile-chrome-paint-contract.test.ts
index 067611e9..727a0f76 100644
--- a/tests/mobile-chrome-paint-contract.test.ts
+++ b/tests/mobile-chrome-paint-contract.test.ts
@@ -26,4 +26,22 @@ describe("mobile chrome paint baseline", () => {
       /\.answer-footer-search-dock \.answer-footer-search-pill[\s\S]*?color-mix\(in srgb, var\(--surface\) 92%, transparent\)/,
     );
   });
+
+  it("keeps every footer-glass fallback terminal translucent", () => {
+    const footerBackdropStart = globalStylesSource.indexOf(
+      ".answer-footer-search-dock .answer-footer-search-backdrop {",
+    );
+    const supportsFallbackStart = globalStylesSource.indexOf("@supports not ((backdrop-filter: blur(1px))");
+    const reducedTransparencyStart = globalStylesSource.indexOf("@media (prefers-reduced-transparency: reduce)");
+    const footerBackdropSource = globalStylesSource.slice(footerBackdropStart, supportsFallbackStart);
+    const supportsFallbackSource = globalStylesSource.slice(supportsFallbackStart, reducedTransparencyStart);
+    const reducedTransparencySource = globalStylesSource.slice(reducedTransparencyStart);
+
+    expect(footerBackdropSource).toContain("color-mix(in srgb, var(--background) 72%, transparent) 100%");
+    expect(supportsFallbackSource).toContain("color-mix(in srgb, var(--background) 88%, transparent) 100%");
+    expect(reducedTransparencySource).toContain("color-mix(in srgb, var(--background) 90%, transparent) 100%");
+    expect(`${footerBackdropSource}\n${supportsFallbackSource}\n${reducedTransparencySource}`).not.toContain(
+      "var(--background) 100%",
+    );
+  });
 });
diff --git a/tests/ui-phone-scroll.spec.ts b/tests/ui-phone-scroll.spec.ts
index f3ddbdbb..648e48e6 100644
--- a/tests/ui-phone-scroll.spec.ts
+++ b/tests/ui-phone-scroll.spec.ts
@@ -228,6 +228,9 @@ test("phone chrome keeps an opaque header and a soft-glass Services footer that
       dockBackdropPaint: dockBackdrop ? getComputedStyle(dockBackdrop).backgroundImage : "",
       dockBackdropFilter: dockBackdrop ? getComputedStyle(dockBackdrop).backdropFilter : "",
       dockBackdropPointerEvents: dockBackdrop ? getComputedStyle(dockBackdrop).pointerEvents : "",
+      dockBackdropHasTranslucentStop: dockBackdrop
+        ? /transparent|\/\s*(?:0?\.)\d+/.test(getComputedStyle(dockBackdrop).backgroundImage)
+        : false,
       dockLeft: dockRect?.left ?? -1,
       dockRight: dockRect?.right ?? -1,
       dockBottom: dockRect?.bottom ?? -1,
@@ -242,6 +245,7 @@ test("phone chrome keeps an opaque header and a soft-glass Services footer that
   expect(visible.dockBackdropDisplay).toBe("block");
   expect(visible.dockBackdropPosition).toBe("absolute");
   expect(visible.dockBackdropPaint).toContain("gradient");
+  expect(visible.dockBackdropHasTranslucentStop).toBe(true);
   // The runner may emulate reduced transparency; the fallback deliberately
   // removes blur but keeps this translucent gradient instead of a solid slab.
   expect(["none", "blur(2px) saturate(1.3)"]).toContain(visible.dockBackdropFilter);
@@ -277,6 +281,64 @@ test("phone chrome keeps an opaque header and a soft-glass Services footer that
   expect(hidden.reserve).toBe("0rem");
 });
 
+test("calculators page-owned phone dock uses localized glass and releases its reserve when hidden", async ({
+  page,
+}) => {
+  await page.emulateMedia({ reducedMotion: "no-preference" });
+  await page.setViewportSize(phoneViewport);
+  await gotoPhoneSurface(page, "/calculators", 112);
+
+  const dock = page.getByTestId("calculators-phone-dock");
+  const pageSurface = page.getByTestId("calculators-search-page");
+  await expect(dock).toBeVisible();
+
+  const visible = await dock.evaluate((element) => {
+    const backdrop = element.querySelector<HTMLElement>(".answer-footer-search-backdrop");
+    const dockRect = element.getBoundingClientRect();
+    const backdropStyle = backdrop ? getComputedStyle(backdrop) : null;
+    return {
+      background: getComputedStyle(element).backgroundColor,
+      left: dockRect.left,
+      right: dockRect.right,
+      bottom: dockRect.bottom,
+      backdropDisplay: backdropStyle?.display ?? "missing",
+      backdropPosition: backdropStyle?.position ?? "missing",
+      backdropPaint: backdropStyle?.backgroundImage ?? "",
+      backdropHasTranslucentStop: /transparent|\/\s*(?:0?\.)\d+/.test(backdropStyle?.backgroundImage ?? ""),
+    };
+  });
+  expect(visible.background).toBe("rgba(0, 0, 0, 0)");
+  expect(visible.left).toBeCloseTo(0, 0);
+  expect(visible.right).toBeCloseTo(phoneViewport.width, 0);
+  expect(visible.bottom).toBeCloseTo(phoneViewport.height, 0);
+  expect(visible.backdropDisplay).toBe("block");
+  expect(visible.backdropPosition).toBe("absolute");
+  expect(visible.backdropPaint).toContain("gradient");
+  expect(visible.backdropHasTranslucentStop).toBe(true);
+  await expect
+    .poll(async () =>
+      Number.parseFloat(await pageSurface.evaluate((element) => getComputedStyle(element).paddingBottom)),
+    )
+    .toBeGreaterThan(112);
+
+  const geometry = await readGeometry(page);
+  await dragScrollBy(page, Math.min(Math.max(geometry.maxOffset, 500), 900), 24);
+  await expect(dock).toHaveAttribute("data-scroll-hidden", "true");
+  await page.waitForTimeout(300);
+
+  const hidden = await dock.evaluate((element) => {
+    const rect = element.getBoundingClientRect();
+    return { opacity: getComputedStyle(element).opacity, top: rect.top, viewportHeight: window.innerHeight };
+  });
+  expect(hidden.opacity).toBe("0");
+  expect(hidden.top).toBeGreaterThanOrEqual(hidden.viewportHeight - 1);
+  await expect
+    .poll(async () =>
+      Number.parseFloat(await pageSurface.evaluate((element) => getComputedStyle(element).paddingBottom)),
+    )
+    .toBeLessThanOrEqual(1);
+});
+
 for (const route of [...modeHomeRoutes, ...dashboardRoutes, ...longRoutes]) {
   test(`phone scroll stays smooth and bottom-stable on ${route}`, async ({ page }) => {
     await page.emulateMedia({ reducedMotion: "no-preference" });

From 5ad4f8b281e14057de5d385324f29b4298f384c2 Mon Sep 17 00:00:00 2001
From: BigSimmo <87357024+BigSimmo@users.noreply.github.com>
Date: Sun, 26 Jul 2026 21:26:47 +0800
Subject: [PATCH 3/7] fix(ui): stabilize calculator chrome reserve transitions

---
 src/app/globals.css                           |  13 +-
 src/components/calculators/search-page.tsx    |   6 +-
 .../search-results-layout.tsx                 |  16 ++-
 .../clinical-dashboard/use-hide-on-scroll.ts  |  31 +++-
 tests/mobile-chrome-paint-contract.test.ts    |  18 +++
 tests/ui-phone-scroll.spec.ts                 | 134 ++++++++++++++++++
 tests/use-hide-on-scroll.test.ts              |  20 +++
 7 files changed, 229 insertions(+), 9 deletions(-)

diff --git a/src/app/globals.css b/src/app/globals.css
index fa5d7aa9..127e9da5 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -2683,12 +2683,23 @@ html[data-motion="reduced"] .source-capsule-hit[aria-expanded="true"]:hover .sou
     will-change: padding-bottom;
     transition: padding-bottom 240ms var(--ease-out-soft);
   }
+  /* A page-owned reserve changes scroll height below the current viewport.
+     Suspend browser anchoring only for that transition so Chrome cannot turn
+     the intended padding release into a synthetic upward scroll/reveal loop. */
+  #main-content:has([data-reserve-owner][data-reserve-transitioning="true"]) {
+    overflow-anchor: none;
+  }
+  [data-reserve-owner][data-reserve-transitioning="true"] {
+    will-change: padding-bottom;
+    transition: padding-bottom 240ms var(--ease-out-soft);
+  }
 }
 
 @media (max-width: 639px) and (prefers-reduced-motion: reduce) {
   #main-content[data-reserve-transitioning="true"],
   #main-content[data-reserve-transitioning="true"] [data-testid="mobile-composer-reserve-pad"],
-  [data-testid="document-viewer-content"][data-reserve-transitioning="true"] {
+  [data-testid="document-viewer-content"][data-reserve-transitioning="true"],
+  [data-reserve-owner][data-reserve-transitioning="true"] {
     transition: none;
   }
 }
diff --git a/src/components/calculators/search-page.tsx b/src/components/calculators/search-page.tsx
index 125ff250..67b2e347 100644
--- a/src/components/calculators/search-page.tsx
+++ b/src/components/calculators/search-page.tsx
@@ -20,7 +20,7 @@ import { useEffect, useMemo, useRef, useState } from "react";
 
 import { AnswerSuggestionChips } from "@/components/clinical-dashboard/answer-suggestion-chips";
 import { SearchResultsLayout } from "@/components/clinical-dashboard/search-results-layout";
-import { useHideOnScroll } from "@/components/clinical-dashboard/use-hide-on-scroll";
+import { useHideOnScroll, useReserveTransitionMarker } from "@/components/clinical-dashboard/use-hide-on-scroll";
 import { PrivacyInputNotice } from "@/components/privacy-input-notice";
 import { chatComposerInput, chatComposerShellBase, chatSendButton, cn, eyebrowText } from "@/components/ui-primitives";
 
@@ -518,6 +518,7 @@ export function CalculatorsSearchPage() {
   // focused input off-screen or mark it aria-hidden while still tabbable.
   const [dockFocused, setDockFocused] = useState(false);
   const dockHidden = footerHidden && !dockFocused;
+  const reserveTransitioning = useReserveTransitionMarker(dockHidden, activeCalc);
 
   const compact = density === "compact";
 
@@ -535,6 +536,9 @@ export function CalculatorsSearchPage() {
       <SearchResultsLayout
         testId="calculators-search-page"
         resultsLabel="Calculators"
+        reserveOwner="calculator"
+        reserveHiddenPad="0rem"
+        reserveTransitioning={reserveTransitioning}
         // Page-owned phone dock: shell composer is hidden, so clear space here.
         // Collapse with the dock on scroll-hide so content reaches the viewport edge.
         className={cn(
diff --git a/src/components/clinical-dashboard/search-results-layout.tsx b/src/components/clinical-dashboard/search-results-layout.tsx
index 96e91827..6df88078 100644
--- a/src/components/clinical-dashboard/search-results-layout.tsx
+++ b/src/components/clinical-dashboard/search-results-layout.tsx
@@ -24,6 +24,9 @@ export function SearchResultsLayout({
   mainClassName,
   className,
   canvasClassName,
+  reserveOwner,
+  reserveHiddenPad,
+  reserveTransitioning,
 }: {
   testId?: string;
   header?: ReactNode;
@@ -37,11 +40,22 @@ export function SearchResultsLayout({
   className?: string;
   /** Override page canvas colours — e.g. Services keeps its legacy teal/slate shell. */
   canvasClassName?: string;
+  /** Named page-owned phone reserve for shared collapse metrics and transitions. */
+  reserveOwner?: string;
+  /** Reserve remaining after phone chrome hides (for example `0rem`). */
+  reserveHiddenPad?: string;
+  reserveTransitioning?: boolean;
 }) {
   const hasSidebar = Boolean(sidebar);
 
   return (
-    <main data-testid={testId} className={cn(searchPageShell, canvasClassName ?? searchPageCanvas, className)}>
+    <main
+      data-testid={testId}
+      data-reserve-owner={reserveOwner}
+      data-reserve-hidden-pad={reserveHiddenPad}
+      data-reserve-transitioning={reserveTransitioning ? "true" : undefined}
+      className={cn(searchPageShell, canvasClassName ?? searchPageCanvas, className)}
+    >
       <div className={cn(searchPageContainer, "grid gap-4")}>
         {header}
         {summary}
diff --git a/src/components/clinical-dashboard/use-hide-on-scroll.ts b/src/components/clinical-dashboard/use-hide-on-scroll.ts
index d6e09276..960a1af0 100644
--- a/src/components/clinical-dashboard/use-hide-on-scroll.ts
+++ b/src/components/clinical-dashboard/use-hide-on-scroll.ts
@@ -39,7 +39,12 @@ const bottomClampTolerance = 1;
 // bottom" on short pages (phone mode homes after #964). The slack keeps a
 // margin past the reveal threshold so the post-collapse position cannot sit
 // within one deliberate micro-drag of a reveal.
-const collapseRunwaySlack = 16;
+// A 96px tail is the smallest reliable phone runway for the two independently
+// scheduled chrome owners (the in-flow header and a page-owned dock) to finish
+// their 240ms releases without the browser clamping scrollTop mid-gesture.
+// Keep this larger than the 12px reveal threshold: that threshold protects a
+// single owner, while this protects the combined release.
+const collapseRunwaySlack = 96;
 
 type ScrollDirection = "down" | "up" | null;
 export interface ScrollMetrics {
@@ -196,9 +201,11 @@ export function computeScrollHideUpdate(params: {
  * `chrome-safe-area-top` for its phone inset
  * (absent under the overlay strategy, which does not affect geometry and so
  * contributes 0), `mobile-composer-reserve-pad` for the shell reserve,
- * `document-viewer-content` for DocumentViewer's own clearance (its hidden
- * `pb-3` equals the shared 0.75rem hidden reserve), falling back to the
- * scroller's own padding exactly like tests/playwright-scroll.ts. Call from
+ * `document-viewer-content` for DocumentViewer's own clearance, and any
+ * named `[data-reserve-owner]` page-owned clearance. A named owner declares
+ * its post-hide padding with `data-reserve-hidden-pad`; otherwise the shared
+ * hidden reserve applies. Falling back to the scroller's own padding exactly
+ * like tests/playwright-scroll.ts. Call from
  * inside a scroll handler, where layout is already flushed. The returned kind
  * distinguishes in-flow collapse from a fixed overlay that only sheds reserve.
  */
@@ -224,15 +231,27 @@ export function readChromeCollapseMetrics(
       : 0;
   const rootFontSize = Number.parseFloat(window.getComputedStyle(document.documentElement).fontSize) || 16;
   const hiddenPadPx = mobileComposerHiddenReserveRem * rootFontSize;
+  const hiddenPadFor = (element: HTMLElement) => {
+    const declared = element.dataset.reserveHiddenPad;
+    if (!declared) return hiddenPadPx;
+    const value = Number.parseFloat(declared);
+    if (!Number.isFinite(value)) return hiddenPadPx;
+    return declared.endsWith("rem") ? value * rootFontSize : value;
+  };
   const padRelease = (element: Element | null): number => {
     if (!(element instanceof HTMLElement)) return 0;
     const paddingBottom = Number.parseFloat(window.getComputedStyle(element).paddingBottom);
-    return Number.isFinite(paddingBottom) ? Math.max(0, paddingBottom - hiddenPadPx) : 0;
+    return Number.isFinite(paddingBottom) ? Math.max(0, paddingBottom - hiddenPadFor(element)) : 0;
   };
   const reservePad = scroller.querySelector('[data-testid="mobile-composer-reserve-pad"]');
   const viewerPad = scroller.querySelector('[data-testid="document-viewer-content"]');
+  const namedReservePads = [...scroller.querySelectorAll("[data-reserve-owner]")];
   const reserveRelease =
-    reservePad || viewerPad ? padRelease(reservePad) + padRelease(viewerPad) : padRelease(scroller);
+    reservePad || viewerPad || namedReservePads.length
+      ? padRelease(reservePad) +
+        padRelease(viewerPad) +
+        namedReservePads.reduce((total, element) => total + padRelease(element), 0)
+      : padRelease(scroller);
   return {
     collapseBudget: headerRelease + phoneSafeAreaRelease + reserveRelease,
     collapseKind: collapse instanceof HTMLElement ? "in-flow" : reserveRelease > 0 ? "reserve-only" : undefined,
diff --git a/tests/mobile-chrome-paint-contract.test.ts b/tests/mobile-chrome-paint-contract.test.ts
index 727a0f76..98183600 100644
--- a/tests/mobile-chrome-paint-contract.test.ts
+++ b/tests/mobile-chrome-paint-contract.test.ts
@@ -3,6 +3,14 @@ import { readFileSync } from "node:fs";
 import { describe, expect, it } from "vitest";
 
 const globalStylesSource = readFileSync(new URL("../src/app/globals.css", import.meta.url), "utf8");
+const calculatorsSource = readFileSync(
+  new URL("../src/components/calculators/search-page.tsx", import.meta.url),
+  "utf8",
+);
+const scrollHideSource = readFileSync(
+  new URL("../src/components/clinical-dashboard/use-hide-on-scroll.ts", import.meta.url),
+  "utf8",
+);
 
 describe("mobile chrome paint baseline", () => {
   it("keeps the header opaque while the edge-to-edge footer uses localized soft glass", () => {
@@ -44,4 +52,14 @@ describe("mobile chrome paint baseline", () => {
       "var(--background) 100%",
     );
   });
+
+  it("registers the calculator page reserve with the shared hide and transition contracts", () => {
+    expect(calculatorsSource).toContain("useReserveTransitionMarker(dockHidden, activeCalc)");
+    expect(calculatorsSource).toContain('reserveOwner="calculator"');
+    expect(calculatorsSource).toContain('reserveHiddenPad="0rem"');
+    expect(calculatorsSource).toContain("reserveTransitioning={reserveTransitioning}");
+    expect(globalStylesSource).toContain('[data-reserve-owner][data-reserve-transitioning="true"]');
+    expect(scrollHideSource).toContain('querySelectorAll("[data-reserve-owner]")');
+    expect(scrollHideSource).toContain("dataset.reserveHiddenPad");
+  });
 });
diff --git a/tests/ui-phone-scroll.spec.ts b/tests/ui-phone-scroll.spec.ts
index 648e48e6..642a7cbb 100644
--- a/tests/ui-phone-scroll.spec.ts
+++ b/tests/ui-phone-scroll.spec.ts
@@ -337,6 +337,140 @@ test("calculators page-owned phone dock uses localized glass and releases its re
       Number.parseFloat(await pageSurface.evaluate((element) => getComputedStyle(element).paddingBottom)),
     )
     .toBeLessThanOrEqual(1);
+
+  await dragScrollBy(page, -48, 8);
+  await expect(dock).not.toHaveAttribute("data-scroll-hidden", "true");
+});
+
+test("calculator combined chrome stays visible with only 96px of near-bottom runway", async ({ page }) => {
+  await page.emulateMedia({ reducedMotion: "no-preference" });
+  await page.setViewportSize(phoneViewport);
+  await gotoPhoneSurface(page, "/calculators", 112);
+  await addPhoneScrollRunway(page);
+
+  const frames = await page.evaluate(async () => {
+    const main = document.getElementById("main-content");
+    const dock = document.querySelector<HTMLElement>('[data-testid="calculators-phone-dock"]');
+    const reserve = document.querySelector<HTMLElement>('[data-testid="calculators-search-page"]');
+    if (!main || !dock || !reserve) throw new Error("calculator reserve geometry was not rendered");
+    const read = () => ({
+      dockHidden: dock.getAttribute("data-scroll-hidden") === "true",
+      headerHidden:
+        document.querySelector('[data-testid="universal-header-collapse"]')?.getAttribute("data-scroll-hidden") ===
+        "true",
+      scrollTop: main.scrollTop,
+      maxOffset: main.scrollHeight - main.clientHeight,
+    });
+    const collapse = document.querySelector<HTMLElement>('[data-testid="universal-header-collapse"]');
+    const safeArea = document.querySelector<HTMLElement>('[data-testid="chrome-safe-area-top"]');
+    const collapseBudget =
+      (collapse?.getBoundingClientRect().height ?? 0) +
+      (safeArea?.getBoundingClientRect().height ?? 0) +
+      Number.parseFloat(getComputedStyle(reserve).paddingBottom);
+    // This is the historical regression boundary: a realistic down-gesture
+    // with 96px remaining after the combined header, safe-area, and calculator
+    // reserve release. The gate must decline both owners rather than allow a
+    // later reserve transition to clamp the reader upward.
+    main.scrollTop = Math.max(0, main.scrollHeight - main.clientHeight - collapseBudget - 96);
+    main.dispatchEvent(new Event("scroll", { bubbles: true }));
+    const frames = [read()];
+    for (let index = 0; index < 18; index += 1) {
+      await new Promise((resolve) => requestAnimationFrame(() => resolve(undefined)));
+      frames.push(read());
+    }
+    return frames;
+  });
+
+  expect(frames.every((frame) => !frame.headerHidden && !frame.dockHidden)).toBe(true);
+  for (let index = 1; index < frames.length; index += 1) {
+    expect(frames[index].scrollTop, "rejected near-bottom collapse cannot clamp scrollTop").toBeCloseTo(
+      frames[0].scrollTop,
+      0,
+    );
+    expect(frames[index].maxOffset, "rejected near-bottom collapse keeps the scroll range stable").toBeCloseTo(
+      frames[0].maxOffset,
+      0,
+    );
+  }
+});
+
+test("calculator reserve and dock hide and reveal monotonically with sufficient near-bottom runway", async ({
+  page,
+}) => {
+  await page.emulateMedia({ reducedMotion: "no-preference" });
+  await page.setViewportSize(phoneViewport);
+  await gotoPhoneSurface(page, "/calculators", 112);
+  await addPhoneScrollRunway(page);
+
+  const frames = await page.evaluate(async () => {
+    const main = document.getElementById("main-content");
+    const dock = document.querySelector<HTMLElement>('[data-testid="calculators-phone-dock"]');
+    const reserve = document.querySelector<HTMLElement>('[data-testid="calculators-search-page"]');
+    if (!main || !dock || !reserve) throw new Error("calculator reserve geometry was not rendered");
+    const read = () => ({
+      hidden: dock.getAttribute("data-scroll-hidden") === "true",
+      dockTop: dock.getBoundingClientRect().top,
+      paddingBottom: Number.parseFloat(getComputedStyle(reserve).paddingBottom),
+      scrollTop: main.scrollTop,
+      scrollAnchor: getComputedStyle(main).overflowAnchor,
+      transitionDuration: getComputedStyle(reserve).transitionDuration,
+    });
+    const collapse = document.querySelector<HTMLElement>('[data-testid="universal-header-collapse"]');
+    const safeArea = document.querySelector<HTMLElement>('[data-testid="chrome-safe-area-top"]');
+    const collapseBudget =
+      (collapse?.getBoundingClientRect().height ?? 0) +
+      (safeArea?.getBoundingClientRect().height ?? 0) +
+      Number.parseFloat(getComputedStyle(reserve).paddingBottom);
+    main.scrollTop = Math.max(0, main.scrollHeight - main.clientHeight - collapseBudget - 256);
+    main.dispatchEvent(new Event("scroll", { bubbles: true }));
+    const hiding = [read()];
+    for (let index = 0; index < 18; index += 1) {
+      await new Promise((resolve) => requestAnimationFrame(() => resolve(undefined)));
+      hiding.push(read());
+    }
+    main.scrollTop -= 12;
+    main.dispatchEvent(new Event("scroll", { bubbles: true }));
+    const reveal = [read()];
+    for (let index = 0; index < 16; index += 1) {
+      await new Promise((resolve) => requestAnimationFrame(() => resolve(undefined)));
+      reveal.push(read());
+    }
+    return { hiding, reveal };
+  });
+
+  const firstHidden = frames.hiding.findIndex((frame) => frame.hidden);
+  expect(firstHidden, "sufficient-runway downward intent hides the calculator dock").toBeGreaterThan(-1);
+  const hiding = frames.hiding.slice(firstHidden);
+  expect(hiding.some((frame) => frame.transitionDuration.includes("0.24s"))).toBe(true);
+  expect(
+    hiding.some((frame) => frame.scrollAnchor === "none"),
+    "page-owned reserve transition disables anchoring",
+  ).toBe(true);
+  for (let index = 1; index < hiding.length; index += 1) {
+    expect(hiding[index].paddingBottom, "calculator reserve never reverses during hide").toBeLessThanOrEqual(
+      hiding[index - 1].paddingBottom + 1,
+    );
+    expect(hiding[index].dockTop, "dock never reverses during hide").toBeGreaterThanOrEqual(
+      hiding[index - 1].dockTop - 1,
+    );
+    expect(hiding[index].scrollTop, "scroll remains monotonic during hide").toBeGreaterThanOrEqual(
+      hiding[index - 1].scrollTop - 1,
+    );
+  }
+  const firstRevealed = frames.reveal.findIndex((frame) => !frame.hidden);
+  expect(firstRevealed, "upward intent reveals the calculator dock").toBeGreaterThan(-1);
+  const revealing = frames.reveal.slice(firstRevealed);
+  for (let index = 1; index < revealing.length; index += 1) {
+    expect(revealing[index].paddingBottom, "calculator reserve never reverses during reveal").toBeGreaterThanOrEqual(
+      revealing[index - 1].paddingBottom - 1,
+    );
+    expect(revealing[index].dockTop, "dock never reverses during reveal").toBeLessThanOrEqual(
+      revealing[index - 1].dockTop + 1,
+    );
+    expect(revealing[index].scrollTop, "scroll remains monotonic during reveal").toBeLessThanOrEqual(
+      revealing[index - 1].scrollTop + 1,
+    );
+  }
 });
 
 for (const route of [...modeHomeRoutes, ...dashboardRoutes, ...longRoutes]) {
diff --git a/tests/use-hide-on-scroll.test.ts b/tests/use-hide-on-scroll.test.ts
index e279bae7..6040f132 100644
--- a/tests/use-hide-on-scroll.test.ts
+++ b/tests/use-hide-on-scroll.test.ts
@@ -326,6 +326,26 @@ describe("computeScrollHideUpdate", () => {
     });
   });
 
+  it("keeps combined header and page-dock chrome visible with only 96px of post-collapse runway", () => {
+    // Calculator at 390x844 with an installed-PWA inset: 72px collapsing
+    // header + 59px top inset + 200px page-owned dock reserve. The shell and
+    // calculator reporters schedule independently, so a 96px tail is not
+    // enough for both animated releases without a scrollTop clamp.
+    const collapseBudget = 72 + 59 + 200;
+    expect(
+      computeScrollHideUpdate({
+        offset: 2_323,
+        lastOffset: 2_299,
+        maxOffset: 2_750,
+        collapseBudget,
+        collapseKind: "in-flow",
+        currentlyHidden: false,
+        direction: "down",
+        directionTravel: 96,
+      }).hidden,
+    ).toBe(false);
+  });
+
   it("allows a reserve-only overlay to hide when its post-collapse range retains deliberate hide intent", () => {
     // Measured compact Answer result at 390x844 without synthetic content:
     // 159px visible range - 120px reserve = 39px after hiding. A fixed overlay

From ae3ab248185bbada9b30dc118465f944359f5e42 Mon Sep 17 00:00:00 2001
From: BigSimmo <87357024+BigSimmo@users.noreply.github.com>
Date: Sun, 26 Jul 2026 21:47:53 +0800
Subject: [PATCH 4/7] docs(review): record phone footer glass approval

---
 docs/branch-review-ledger.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/docs/branch-review-ledger.md b/docs/branch-review-ledger.md
index 763cee04..7a91382e 100644
--- a/docs/branch-review-ledger.md
+++ b/docs/branch-review-ledger.md
@@ -1101,3 +1101,5 @@ This file is append-only. Never rewrite or delete an existing review record; app
 | 2026-07-26 | PR #1254 / `apply-audit-remediation-fixes` | head `b5aa92f0febbd0425c5f3d809356946a7d2371f5` / squash `4d54abfa4d467b16e5e2f0fe3f16b8b3b52bc967` | prlanded after squash merge | LANDED. Provenance/governance UI tokens, citation telemetry, threshold inclusivity (`lt`/`lte`/`gt`/`gte`), locality audit kept out of offline pr-local. Supersedes earlier DO NOT MERGE babysit rows after thread resolve + green CI. Remote branch deleted by merge. | Hosted PR policy/PR required/Static/Unit/Build/Production UI/Migration SUCCESS; Codex P1 thread resolved; no provider-backed evals. |
 | 2026-07-26 | PR #1259 / `codex/phone-header-hidden-edge` | head `0025d17a2c8c727d4e6cf44ae368f6448a84eeba` / squash `ecf54db378c8081b36c8fd62eaadbd716a1750c8` | prlanded after squash merge | LANDED. Edge-to-edge phone header collapse + shared hide/reveal + portaled addon focus lifecycle. Supersedes earlier blocked babysit rows. Remote branch deleted by merge. | Hosted PR required/Production UI/Unit/Build/Static SUCCESS; focused phone-scroll/header contracts PASS; no provider-backed checks. |
 | 2026-07-26 | open-PR babysit sweep (Cursor) | `origin/main` @ `ecf54db378c8081b36c8fd62eaadbd716a1750c8` | triage + close + sequential land | Queue cleared. Closed #1255/#1253 as unsafe/superseded. Squash-merged useful #1257, #1212, #1241, #1248, #1254, and late-arriving #1259 after CI green + thread triage. Open PR count 0 at closeout. | Per-PR hosted required CI green at merge; merge-tree used to classify GitHub CONFLICTING as staleness vs real conflicts; no provider-backed checks. |
+
+| 2026-07-26 | `codex/phone-footer-glass` | `5ad4f8b28` | Final phone footer glass and scroll-stability review | APPROVE. Replaced the opaque phone footer/safe-area slab with localized translucent glass across shared docks and page-owned calculator/document composers; hidden chrome releases paint, pointer ownership, and reserve. Final review found and fixed calculator reserve under-budgeting plus Chromium scroll anchoring feedback, with insufficient-runway collapse refusal and sufficient-runway frame-monotonic hide/reveal. No P0-P3 findings remain. Highest residual risk is physical iOS/WebKit safe-area and momentum compositing beyond simulated Chromium. | `verify:cheap` PASS (393 files; 3518 passed / 2 skipped); focused Services/Calculators and calculator transition Chromium PASS; `verify:ui` production build 312/313 with the sole unchanged Answer short-runway geometry outlier immediately passing exact rerun 1/1; final diff review APPROVE; no provider-backed checks. |

From 478ceebaf6f06dca6350a1254f019558897858c1 Mon Sep 17 00:00:00 2001
From: BigSimmo <87357024+BigSimmo@users.noreply.github.com>
Date: Sun, 26 Jul 2026 22:14:56 +0800
Subject: [PATCH 5/7] fix(ui): harden phone chrome teardown

---
 src/components/calculators/search-page.tsx      | 13 +++++++++++++
 .../clinical-dashboard/use-hide-on-scroll.ts    | 15 ++++++++++++---
 tests/mobile-chrome-paint-contract.test.ts      |  2 ++
 tests/ui-phone-scroll.spec.ts                   | 17 +++++++++++++++++
 tests/use-hide-on-scroll.test.ts                | 15 +++++++++++++++
 5 files changed, 59 insertions(+), 3 deletions(-)

diff --git a/src/components/calculators/search-page.tsx b/src/components/calculators/search-page.tsx
index 67b2e347..0e8202aa 100644
--- a/src/components/calculators/search-page.tsx
+++ b/src/components/calculators/search-page.tsx
@@ -519,6 +519,19 @@ export function CalculatorsSearchPage() {
   const [dockFocused, setDockFocused] = useState(false);
   const dockHidden = footerHidden && !dockFocused;
   const reserveTransitioning = useReserveTransitionMarker(dockHidden, activeCalc);
+  useEffect(() => {
+    if (!activeCalc) return undefined;
+    let cancelled = false;
+    // Submitting a focused dock input unmounts the dock before React is
+    // guaranteed to dispatch blur. Clear the latch after teardown so the dock
+    // can resume hide-on-scroll when the calculator sheet closes.
+    queueMicrotask(() => {
+      if (!cancelled) setDockFocused(false);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [activeCalc]);
 
   const compact = density === "compact";
 
diff --git a/src/components/clinical-dashboard/use-hide-on-scroll.ts b/src/components/clinical-dashboard/use-hide-on-scroll.ts
index 960a1af0..09285273 100644
--- a/src/components/clinical-dashboard/use-hide-on-scroll.ts
+++ b/src/components/clinical-dashboard/use-hide-on-scroll.ts
@@ -45,6 +45,7 @@ const bottomClampTolerance = 1;
 // Keep this larger than the 12px reveal threshold: that threshold protects a
 // single owner, while this protects the combined release.
 const collapseRunwaySlack = 96;
+const singleOwnerRunwaySlack = 16;
 
 type ScrollDirection = "down" | "up" | null;
 export interface ScrollMetrics {
@@ -58,6 +59,8 @@ export interface ScrollMetrics {
    * Omitted by consumers whose chrome does not change scroll geometry.
    */
   collapseBudget?: number;
+  /** True when an in-flow header and a separate reserve owner collapse together. */
+  combinedChrome?: boolean;
   /**
    * A fixed-viewport overlay only removes tail clearance; it does not collapse
    * an in-flow header or resize the scrollport. That path can safely hide when
@@ -74,6 +77,7 @@ export function computeScrollHideUpdate(params: {
   maxOffset?: number;
   previousMaxOffset?: number;
   collapseBudget?: number;
+  combinedChrome?: boolean;
   collapseKind?: "in-flow" | "reserve-only";
   sourceChanged?: boolean;
   currentlyHidden: boolean;
@@ -91,6 +95,7 @@ export function computeScrollHideUpdate(params: {
     maxOffset,
     previousMaxOffset,
     collapseBudget,
+    combinedChrome = false,
     collapseKind,
     sourceChanged = false,
     currentlyHidden,
@@ -174,11 +179,12 @@ export function computeScrollHideUpdate(params: {
     // refuse when the current offset would not fit the post-collapse range —
     // otherwise a near-bottom hide clamps the page under the finger even when
     // the resulting range itself is long enough for deliberate intent.
+    const inFlowRunwaySlack = combinedChrome ? collapseRunwaySlack : singleOwnerRunwaySlack;
     const collapseHasSafeRunway =
       collapseKind === "reserve-only"
         ? postCollapseMaxOffset >= effectiveHideActivationOffset + hideIntentDistance &&
           offset <= postCollapseMaxOffset + bottomClampTolerance
-        : runwayAfterCollapse > revealIntentDistance + collapseRunwaySlack;
+        : runwayAfterCollapse > revealIntentDistance + inFlowRunwaySlack;
     hidden = travelPastActivation >= hideIntentDistance && collapseHasSafeRunway;
   } else if (currentlyHidden && nextDirection === "up" && nextDirectionTravel >= revealIntentDistance) {
     hidden = false;
@@ -211,7 +217,7 @@ export function computeScrollHideUpdate(params: {
  */
 export function readChromeCollapseMetrics(
   scroller: HTMLElement,
-): Pick<ScrollMetrics, "collapseBudget" | "collapseKind"> {
+): Pick<ScrollMetrics, "collapseBudget" | "collapseKind" | "combinedChrome"> {
   const collapse = document.querySelector('[data-testid="universal-header-collapse"]');
   // The 1fr -> 0fr grid IS the collapse mechanism, so the wrapper only hands
   // layout back while it is a grid at the current width. Where it sticks and
@@ -255,6 +261,7 @@ export function readChromeCollapseMetrics(
   return {
     collapseBudget: headerRelease + phoneSafeAreaRelease + reserveRelease,
     collapseKind: collapse instanceof HTMLElement ? "in-flow" : reserveRelease > 0 ? "reserve-only" : undefined,
+    combinedChrome: headerRelease > 0 && reserveRelease > 0,
   };
 }
 
@@ -326,13 +333,14 @@ export function useScrollHideReporter(disabled = false, allowAllBreakpoints = fa
 
   const reportScroll = useCallback(
     (report: number | ScrollMetrics) => {
-      const { offset, maxOffset, collapseBudget, collapseKind, source } =
+      const { offset, maxOffset, collapseBudget, collapseKind, combinedChrome, source } =
         typeof report === "number"
           ? {
               offset: report,
               maxOffset: undefined,
               collapseBudget: undefined,
               collapseKind: undefined,
+              combinedChrome: undefined,
               source: undefined,
             }
           : report;
@@ -360,6 +368,7 @@ export function useScrollHideReporter(disabled = false, allowAllBreakpoints = fa
         previousMaxOffset,
         collapseBudget,
         collapseKind,
+        combinedChrome,
         sourceChanged,
         currentlyHidden: hiddenRef.current,
         direction: directionRef.current,
diff --git a/tests/mobile-chrome-paint-contract.test.ts b/tests/mobile-chrome-paint-contract.test.ts
index 98183600..77a1dd02 100644
--- a/tests/mobile-chrome-paint-contract.test.ts
+++ b/tests/mobile-chrome-paint-contract.test.ts
@@ -55,6 +55,8 @@ describe("mobile chrome paint baseline", () => {
 
   it("registers the calculator page reserve with the shared hide and transition contracts", () => {
     expect(calculatorsSource).toContain("useReserveTransitionMarker(dockHidden, activeCalc)");
+    expect(calculatorsSource).toContain("if (!activeCalc) return undefined");
+    expect(calculatorsSource).toContain("queueMicrotask(() =>");
     expect(calculatorsSource).toContain('reserveOwner="calculator"');
     expect(calculatorsSource).toContain('reserveHiddenPad="0rem"');
     expect(calculatorsSource).toContain("reserveTransitioning={reserveTransitioning}");
diff --git a/tests/ui-phone-scroll.spec.ts b/tests/ui-phone-scroll.spec.ts
index 642a7cbb..536f93df 100644
--- a/tests/ui-phone-scroll.spec.ts
+++ b/tests/ui-phone-scroll.spec.ts
@@ -342,6 +342,23 @@ test("calculators page-owned phone dock uses localized glass and releases its re
   await expect(dock).not.toHaveAttribute("data-scroll-hidden", "true");
 });
 
+test("calculator dock clears its focus pin after a focused submit opens and closes a sheet", async ({ page }) => {
+  await page.setViewportSize(phoneViewport);
+  await gotoPhoneSurface(page, "/calculators", 112);
+
+  const dock = page.getByTestId("calculators-phone-dock");
+  const input = dock.getByRole("searchbox", { name: "Search calculators" });
+  await input.fill("PHQ-9");
+  await input.press("Enter");
+  await expect(page.getByRole("button", { name: "Close", exact: true })).toBeVisible();
+  await page.getByRole("button", { name: "Close", exact: true }).click();
+  await expect(dock).toBeVisible();
+
+  await addPhoneScrollRunway(page);
+  await dragScrollBy(page, 900, 24);
+  await expect(dock).toHaveAttribute("data-scroll-hidden", "true");
+});
+
 test("calculator combined chrome stays visible with only 96px of near-bottom runway", async ({ page }) => {
   await page.emulateMedia({ reducedMotion: "no-preference" });
   await page.setViewportSize(phoneViewport);
diff --git a/tests/use-hide-on-scroll.test.ts b/tests/use-hide-on-scroll.test.ts
index 6040f132..d3161948 100644
--- a/tests/use-hide-on-scroll.test.ts
+++ b/tests/use-hide-on-scroll.test.ts
@@ -339,6 +339,7 @@ describe("computeScrollHideUpdate", () => {
         maxOffset: 2_750,
         collapseBudget,
         collapseKind: "in-flow",
+        combinedChrome: true,
         currentlyHidden: false,
         direction: "down",
         directionTravel: 96,
@@ -508,6 +509,20 @@ describe("computeScrollHideUpdate", () => {
     ).toBe(true);
   });
 
+  it("does not apply combined-phone runway slack to a zero-budget reporter", () => {
+    expect(
+      computeScrollHideUpdate({
+        offset: 100,
+        lastOffset: 80,
+        maxOffset: 200,
+        collapseBudget: 0,
+        currentlyHidden: false,
+        direction: "down",
+        directionTravel: 80,
+      }).hidden,
+    ).toBe(true);
+  });
+
   it("blocks a hide that would land within one micro-drag of the reveal threshold", () => {
     // runway (500-100) - budget 240 = 160 > 28 → allowed…
     expect(

From 7e4fd1a23c74f9bc7ad07a3c145cb678bc574dcf Mon Sep 17 00:00:00 2001
From: BigSimmo <87357024+BigSimmo@users.noreply.github.com>
Date: Sun, 26 Jul 2026 22:43:53 +0800
Subject: [PATCH 6/7] test(ui): await settled mode homes

---
 tests/ui-tools.spec.ts | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/tests/ui-tools.spec.ts b/tests/ui-tools.spec.ts
index 4b2a53d4..f0900421 100644
--- a/tests/ui-tools.spec.ts
+++ b/tests/ui-tools.spec.ts
@@ -637,7 +637,12 @@ test.describe("Clinical KB tools launcher", () => {
       { path: "/tools", testId: "tools-home" },
     ] as const) {
       await gotoLauncher(page, home.path);
-      await expect(page.getByTestId(home.testId)).toBeVisible();
+      const homeSurface = page.getByTestId(home.testId);
+      // Production hydration can briefly overlap the outgoing server tree and
+      // the settled client tree. Require the DOM to converge to one owner
+      // before using strict locators; duplicate settled homes still fail.
+      await expect(homeSurface).toHaveCount(1, { timeout: 15_000 });
+      await expect(homeSurface).toBeVisible();
       await expect(visibleGlobalSearchInput(page)).toHaveCount(1, { timeout: 15_000 });
 
       // The composer sits in the middle of the hero (in-flow) at phone width too,
@@ -689,12 +694,14 @@ test.describe("Clinical KB tools launcher", () => {
         await mockAnswerDashboardApi(page);
         await page.setViewportSize({ width: viewport.width, height: viewport.height });
         await gotoLauncher(page, home.path);
-        await expect(page.getByTestId(home.testId)).toBeVisible();
+        const homeSurface = page.getByTestId(home.testId);
+        await expect(homeSurface).toHaveCount(1, { timeout: 15_000 });
+        await expect(homeSurface).toBeVisible();
         // The composer must never vanish: exactly one visible search input.
         await expect(visibleGlobalSearchInput(page)).toHaveCount(1, { timeout: 15_000 });
         // The hero owns the composer at every width: the answer home and every
         // standalone mode home keep the in-flow hero pill, phones included.
-        await expect(page.getByTestId(home.testId).getByTestId("global-search-input")).toBeVisible();
+        await expect(homeSurface.getByTestId("global-search-input")).toBeVisible();
       });
     }
   }

From 5e976b0d8496d46dea9b28c5d5ba0a162f947d52 Mon Sep 17 00:00:00 2001
From: BigSimmo <87357024+BigSimmo@users.noreply.github.com>
Date: Sun, 26 Jul 2026 22:44:34 +0800
Subject: [PATCH 7/7] docs(review): record CI hydration fix

---
 docs/branch-review-ledger.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/docs/branch-review-ledger.md b/docs/branch-review-ledger.md
index 7a91382e..3ac0425c 100644
--- a/docs/branch-review-ledger.md
+++ b/docs/branch-review-ledger.md
@@ -1103,3 +1103,5 @@ This file is append-only. Never rewrite or delete an existing review record; app
 | 2026-07-26 | open-PR babysit sweep (Cursor) | `origin/main` @ `ecf54db378c8081b36c8fd62eaadbd716a1750c8` | triage + close + sequential land | Queue cleared. Closed #1255/#1253 as unsafe/superseded. Squash-merged useful #1257, #1212, #1241, #1248, #1254, and late-arriving #1259 after CI green + thread triage. Open PR count 0 at closeout. | Per-PR hosted required CI green at merge; merge-tree used to classify GitHub CONFLICTING as staleness vs real conflicts; no provider-backed checks. |
 
 | 2026-07-26 | `codex/phone-footer-glass` | `5ad4f8b28` | Final phone footer glass and scroll-stability review | APPROVE. Replaced the opaque phone footer/safe-area slab with localized translucent glass across shared docks and page-owned calculator/document composers; hidden chrome releases paint, pointer ownership, and reserve. Final review found and fixed calculator reserve under-budgeting plus Chromium scroll anchoring feedback, with insufficient-runway collapse refusal and sufficient-runway frame-monotonic hide/reveal. No P0-P3 findings remain. Highest residual risk is physical iOS/WebKit safe-area and momentum compositing beyond simulated Chromium. | `verify:cheap` PASS (393 files; 3518 passed / 2 skipped); focused Services/Calculators and calculator transition Chromium PASS; `verify:ui` production build 312/313 with the sole unchanged Answer short-runway geometry outlier immediately passing exact rerun 1/1; final diff review APPROVE; no provider-backed checks. |
+
+| 2026-07-26 | `codex/phone-footer-glass` | `7e4fd1a23` | Review-follow-up and CI hydration-race review | APPROVE. Scoped the expanded collapse runway only to combined in-flow header plus reserve owners, cleared the calculator dock focus latch after sheet teardown, and made mode-home UI assertions wait for one settled owner during production hydration. Both automated review threads were addressed and resolved. No P0-P3 findings remain; physical iOS/WebKit compositing remains the only material unverified surface. | `verify:cheap` PASS; focused scroll-hide/static contracts 25/25 PASS; focused calculator teardown/geometry Chromium 3/3 PASS; affected mode-home production Chromium 5/5 PASS; no provider-backed checks. |