From c23246f2dd5274b3162d5850cba1a88e673649a1 Mon Sep 17 00:00:00 2001
From: Bitcoin Universe <bitcoinuniversecorp@gmail.com>
Date: Sat, 29 Aug 2026 19:31:00 +0000
Subject: [PATCH 01/11] Make the shell fit a phone rather than a picture of one

The layout has had phone widths in its test matrix for some time and has
looked right in all of them. Almost nothing that makes this product hard
to use on an actual phone shows up in a screenshot, so almost none of it
had been found.

What was wrong, in the order it costs a visitor something:

The search field computed at 13px below 576px, and the five preference
selects in the footer at 14px. iOS Safari zooms the layout viewport in
when a focused field is under 16px and does not zoom back out, so every
search on an iPhone ended with the visitor panning a page twice as wide
as their screen to read the answer. Both are 16px now. The placeholder
truncates a little sooner as a result, which is the right way round: it
is a hint, and the result list does the explaining.

The viewport meta did not ask for viewport-fit=cover and nothing in the
repository mentioned a safe area, so on every notched phone the header
sat inside a letterbox and the bottom bar sat under the home indicator.
The four insets are tokens now, used through max() so a phone without a
cutout keeps its ordinary padding, and the header, the bar and the
content column all read the same ones.

Content ended underneath the bottom bar. The reservation was 68px,
written on main, and the footer is a sibling of main: every settings
control and the whole last row of links sat behind the bar on every
phone. It is on their shared parent now and derived from what the bar
occupies, including the home indicator.

Nothing reserved room for the sticky layers when the browser scrolls.
Tabbing to a control near the bottom of a page put it exactly behind
the bar, which is a WCAG 2.2 focus-obscured failure. Each of the three
header shapes now states its own scroll-padding: writing one number for
the tallest of them caused the fault it was meant to prevent, because
the reserve is taken out of the room the browser has to place the
element in.

The bottom bar scrolled sideways with its scrollbar hidden and no other
sign, so destinations past the edge were present and unreachable, and
arriving on one from a link left the bar scrolled away from it. It has
scroll shadows now, painted with the two-layer background technique so
the fade appears only on the side that has more and only when there is
more, and the current destination is scrolled into view after every
navigation.

Controls were sized for a cursor. The chain and network pickers at 38px,
the pagination arrows at 35, the documentation tabs at 42, the copy
control beside every identifier at 21 by 17, and rows of identifier
links nineteen pixels apart. The floors are the platform ones, 44 for
anything in the shell or repeated, and WCAG's 24 with its spacing
exception everywhere else, which is what lets a dense table stay dense.

The block timeline scrolled sideways as an unnamed div. It is a region
with a name now: it is the one place here that should scroll sideways,
and saying so is what separates it from a row that merely got cut off.

The transaction tracker drew 37px blocks at 320px because its height was
a fifth of its width. It has a floor.

Menus had no height cap, so a chain list on a short screen ran off the
bottom with no way to reach the rest of it. The search results were
pinned 42px below a field that is now 48 tall.

100vh is still 100vh where the intent is the large viewport, and says so.

A new gate measures all of it. It is built the opposite way round from
the visual matrix, few page loads and many assertions each, so it costs
about a tenth of what the matrix does and can afford to grow.
---
 .../blockchain-blocks.component.scss          |   9 +
 .../master-page/master-page.component.html    |   2 +-
 .../master-page/master-page.component.scss    | 130 ++-
 .../master-page/master-page.component.ts      |  56 +-
 .../search-form/search-form.component.html    |   6 +
 .../search-form/search-form.component.scss    | 100 ++-
 .../search-form/search-form.component.ts      |  27 +
 .../search-results.component.scss             |  37 +-
 .../app/components/start/start.component.html |  17 +
 .../components/tracker/tracker.component.ts   |  12 +-
 .../transactions-list.component.scss          |  21 +
 .../app/dashboard/dashboard.component.scss    |  17 +
 .../address-text/address-text.component.scss  |  14 +
 .../global-footer.component.scss              |  10 +
 frontend/src/app/shared/shared.module.ts      |   3 +-
 .../asset-flow/asset-flow.component.scss      |  16 +
 .../multichain-explorer.component.scss        |   9 +
 .../protocol-strip.component.scss             |   8 +
 .../app/universe/universe-viewport.service.ts |  96 +++
 frontend/src/index.mempool.html               |  12 +-
 frontend/src/styles.scss                      | 219 +++++
 frontend/src/styles/_universe-tokens.scss     |  43 +
 scripts/universe/visual-qa/capture.mjs        |  12 +-
 scripts/universe/visual-qa/mobile-check.mjs   | 757 ++++++++++++++++++
 24 files changed, 1605 insertions(+), 28 deletions(-)
 create mode 100644 frontend/src/app/universe/universe-viewport.service.ts
 create mode 100644 scripts/universe/visual-qa/mobile-check.mjs

diff --git a/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.scss b/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.scss
index 529cae0fab2..91e48909dfa 100644
--- a/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.scss
+++ b/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.scss
@@ -139,6 +139,15 @@
   padding: 0 var(--u-space-2);
   pointer-events: all;
 
+  // The height label sits directly above its block, so the two are close
+  // enough that a thumb aimed at one can land on the other. Room around the
+  // text rather than a taller box, so the label stays on the block it names
+  // and the timeline's spacing is unchanged.
+  @media (pointer: coarse), (max-width: 991.98px) {
+    margin-block: -6px;
+    padding-block: 6px;
+  }
+
   &:hover,
   &:focus {
     color: var(--u-brand-hover);
diff --git a/frontend/src/app/components/master-page/master-page.component.html b/frontend/src/app/components/master-page/master-page.component.html
index c7653fc7f00..8051b04635e 100644
--- a/frontend/src/app/components/master-page/master-page.component.html
+++ b/frontend/src/app/components/master-page/master-page.component.html
@@ -78,7 +78,7 @@
        whether it leads to blocks or to protocols, and below the breakpoint this
        becomes a thumb-reachable bar rather than a squeezed desktop navbar. -->
   <nav class="primary-nav" i18n-aria-label="master-page.primary-navigation" aria-label="Primary">
-    <ul class="nav-list {{ network.val }}">
+    <ul #navList class="nav-list {{ network.val }}">
       <li class="nav-item" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}" id="btn-home">
         <a class="nav-link" [routerLink]="chainRoute('dashboard')" (click)="collapse()">
           <span class="nav-icon"><app-svg-images name="nav-tachometer" width="21.59" height="100%"></app-svg-images></span>
diff --git a/frontend/src/app/components/master-page/master-page.component.scss b/frontend/src/app/components/master-page/master-page.component.scss
index 42f726fbcfa..11cc1ca4835 100644
--- a/frontend/src/app/components/master-page/master-page.component.scss
+++ b/frontend/src/app/components/master-page/master-page.component.scss
@@ -8,6 +8,10 @@
 .site-header {
   background-color: var(--u-surface-raised);
   border-bottom: 1px solid var(--u-border);
+  // The bar itself pads for the top inset rather than the header being pushed
+  // down by it, so the header's own background reaches under the status bar
+  // instead of leaving a strip of page colour above it.
+  padding-top: var(--u-safe-top);
   position: sticky;
   top: 0;
   width: 100%;
@@ -21,9 +25,24 @@
   margin: 0 auto;
   max-width: var(--u-width-page);
   min-height: 60px;
-  padding: var(--u-space-2) var(--u-space-3);
+  // max() rather than a bare inset: a phone with no cutout reports zero, and
+  // the row still needs its ordinary side padding. In landscape on a notched
+  // phone the inset is the larger of the two and the row moves clear of it.
+  padding: var(--u-space-2) max(var(--u-space-3), var(--u-safe-right))
+           var(--u-space-2) max(var(--u-space-3), var(--u-safe-left));
   width: 100%;
 
+  // Compact landscape. A phone on its side has about 320 to 430 pixels of
+  // height in total, and a 60px header plus a 56px bar leaves very little of
+  // it for the page. Tightening the header is worth more here than anywhere
+  // else, and the controls inside it keep their own touch floor.
+  @media (max-width: 991.98px) and (max-height: 479.98px) {
+    gap: var(--u-space-2);
+    min-height: 48px;
+    padding-bottom: var(--u-space-1);
+    padding-top: var(--u-space-1);
+  }
+
   @media (min-width: 992px) {
     gap: var(--u-space-4);
     padding: var(--u-space-2) var(--u-space-5);
@@ -126,6 +145,13 @@
   transition: background-color var(--u-duration-fast) var(--u-ease-out),
               border-color var(--u-duration-fast) var(--u-ease-out);
 
+  // Same reasoning as the chain toggle: a control sized for a cursor is not
+  // sized for a thumb, and these two sit side by side.
+  @media (pointer: coarse) {
+    min-height: var(--u-touch-target);
+    padding-inline: var(--u-space-3);
+  }
+
   &:hover {
     background: var(--u-surface-hover);
     border-color: var(--u-border-strong);
@@ -229,6 +255,13 @@
   bottom: 0;
   box-shadow: 0 -2px 12px var(--u-shadow-color);
   left: 0;
+  // The bar pads for the home indicator itself instead of sitting above it.
+  // Its background then runs to the physical bottom of the screen, which is
+  // what stops a strip of page colour showing through under the bar, and the
+  // targets sit clear of the gesture area rather than fighting it for taps.
+  padding-bottom: var(--u-safe-bottom);
+  padding-left: var(--u-safe-left);
+  padding-right: var(--u-safe-right);
   position: fixed;
   width: 100%;
   z-index: var(--u-z-sticky);
@@ -257,6 +290,34 @@
     overflow-x: auto;
     scrollbar-width: none;
     &::-webkit-scrollbar { display: none; }
+
+    // The scroller has to say that it scrolls.
+    //
+    // A clipped row with a hidden scrollbar is indistinguishable from a row
+    // that simply ends, so the destinations past the edge were reachable and
+    // undiscoverable at the same time. These are the two-layer scroll shadows:
+    // a pair of covers painted in the bar's own colour that scroll with the
+    // content, and a pair of shadows painted behind them that do not. When the
+    // row is at its left end the left cover sits exactly on the left shadow and
+    // hides it; scroll away from that end and the cover moves off, revealing
+    // the shadow underneath. So a fade appears on precisely the side that has
+    // more to show, and no fade appears at all when everything already fits.
+    //
+    // All of it is CSS. Nothing measures the element, so it stays correct
+    // through rotation, a fold, a split-screen resize and a chain switch that
+    // changes how many destinations there are.
+    background-image:
+      linear-gradient(to right, var(--u-surface-raised) 40%, rgba(0, 0, 0, 0)),
+      linear-gradient(to left, var(--u-surface-raised) 40%, rgba(0, 0, 0, 0)),
+      linear-gradient(to right, var(--u-shadow-color), rgba(0, 0, 0, 0)),
+      linear-gradient(to left, var(--u-shadow-color), rgba(0, 0, 0, 0));
+    background-position: left center, right center, left center, right center;
+    background-repeat: no-repeat;
+    background-size: 32px 100%, 32px 100%, 14px 100%, 14px 100%;
+    background-attachment: local, local, scroll, scroll;
+
+    // Keeping the active destination off the very edge when it is scrolled to.
+    scroll-padding-inline: var(--u-space-5);
   }
 
   @media (min-width: 992px) {
@@ -290,6 +351,16 @@
   transition: color var(--u-duration-fast) var(--u-ease-out),
               background-color var(--u-duration-fast) var(--u-ease-out);
 
+  // Compact landscape. The bar keeps every destination and every target width,
+  // and gives back the vertical room by putting the icon beside its label
+  // instead of above it. Nothing is hidden to buy the height.
+  @media (max-width: 991.98px) and (max-height: 479.98px) {
+    flex-direction: row;
+    gap: var(--u-space-2);
+    min-height: var(--u-touch-target);
+    padding-inline: var(--u-space-3);
+  }
+
   &:hover {
     background: var(--u-surface-hover);
     color: var(--u-text-primary);
@@ -387,21 +458,21 @@
 main {
   // No minimum width. A floor here forced every route to overflow sideways on
   // a 320px screen, which is the narrowest phone still in common use.
-  max-width: 100vw;
+  //
+  // 100% rather than 100vw: on a desktop window with a classic scrollbar, 100vw
+  // counts the scrollbar's width and 100% does not, so the viewport unit was
+  // itself a source of the sideways overflow it was meant to prevent.
+  max-width: 100%;
   min-width: 0;
   transition: max-width var(--u-duration-base) var(--u-ease-out);
   width: 100%;
 
-  // Clear the fixed bottom navigation so the last row of any page stays
-  // reachable rather than sitting underneath it.
-  @media (max-width: 991.98px) {
-    padding-bottom: 68px;
-  }
 }
 
 .empty-sidenav {
   background-color: transparent;
   height: calc(100vh - 65px);
+  height: calc(100dvh - 65px);
   padding-bottom: 20px;
   position: sticky;
   top: 65px;
@@ -421,12 +492,57 @@ main {
  * Giving the outlet itself a viewport-height floor starts the footer below the
  * fold instead, so later growth moves it entirely outside the viewport and
  * counts for nothing.
+ *
+ * The unit here is deliberately the large viewport and not the dynamic one.
+ * dvh shrinks and grows as the browser chrome collapses, so a floor written in
+ * dvh would reflow the column on every scroll gesture on a phone, which is the
+ * exact shift this rule exists to prevent. lvh is the tallest the viewport ever
+ * gets, so the footer starts below the fold in every chrome state and the floor
+ * never moves. vh is the same measurement on mobile and is kept underneath for
+ * engines that predate the unit.
  */
 .page-column {
   min-height: 100vh;
+  min-height: 100lvh;
   min-width: 0;
 
+  // The side insets belong here rather than on the body.
+  //
+  // A phone with a cutout held sideways puts the notch beside the page, so
+  // without this the first characters of every line sit under it. It is the
+  // column and not the body that takes it, because the header and the bottom
+  // bar have to keep reaching the physical edges of the screen: padding the
+  // body would have pulled their backgrounds inwards and left a strip of page
+  // colour down the side of both. They carry the same insets internally, so
+  // the chrome is full-bleed and its contents are still clear of the cutout.
+  padding-left: var(--u-safe-left);
+  padding-right: var(--u-safe-right);
+
+  // Clear the fixed bottom bar so the last row of the page stays reachable
+  // rather than sitting underneath it.
+  //
+  // This belongs to the column and not to main, which is where it used to be.
+  // The footer is a sibling of main, so a reservation inside main cleared the
+  // bar for every route and cleared nothing for the footer: the language,
+  // currency and theme controls, and the whole last row of links, sat behind
+  // the bar on every phone. Reserving on their shared parent covers both.
+  //
+  // Derived from what the bar occupies rather than a number copied from it:
+  // its own height plus whatever the device reserves below it, plus a gap so
+  // the last row is not pressed against the rule.
+  @media (max-width: 991.98px) {
+    padding-bottom: calc(var(--u-bottom-nav-space) + var(--u-space-4));
+  }
+
+  // Landscape gives the bar back its height, so the reservation follows it
+  // down. The bar is measured by --u-touch-target there, not by the taller
+  // stacked link.
+  @media (max-width: 991.98px) and (max-height: 479.98px) {
+    padding-bottom: calc(var(--u-touch-target) + 1px + var(--u-safe-bottom) + var(--u-space-3));
+  }
+
   > main {
     min-height: 100vh;
+    min-height: 100lvh;
   }
 }
diff --git a/frontend/src/app/components/master-page/master-page.component.ts b/frontend/src/app/components/master-page/master-page.component.ts
index d90ded74b65..b4a3fb0f0c8 100644
--- a/frontend/src/app/components/master-page/master-page.component.ts
+++ b/frontend/src/app/components/master-page/master-page.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, OnDestroy, Input } from '@angular/core';
+import { AfterViewInit, Component, ElementRef, OnInit, OnDestroy, Input, ViewChild } from '@angular/core';
 import { NavigationEnd, Router } from '@angular/router';
 import { Env, StateService } from '@app/services/state.service';
 import { Observable, catchError, filter, merge, of, shareReplay, Subscription, switchMap, timer } from 'rxjs';
@@ -8,6 +8,7 @@ import { NavigationService } from '@app/services/navigation.service';
 import { StorageService } from '@app/services/storage.service';
 import { UniverseApiService } from '@app/universe/universe-api.service';
 import { UniverseLocalService } from '@app/universe/universe-local.service';
+import { UniverseViewportService } from '@app/universe/universe-viewport.service';
 import { ChainCapabilityEnvelope, ExplorerChain } from '@app/universe/universe.types';
 import { describeChainReasons } from '@app/universe/multichain-explorer/chain-reasons';
 import {
@@ -27,10 +28,12 @@ import {
   styleUrls: ['./master-page.component.scss'],
   standalone: false,
 })
-export class MasterPageComponent implements OnInit, OnDestroy {
+export class MasterPageComponent implements OnInit, AfterViewInit, OnDestroy {
   @Input() headerVisible = true;
   @Input() footerVisibleOverride: boolean | null = null;
 
+  @ViewChild('navList') navList?: ElementRef<HTMLElement>;
+
   env: Env;
   network$: Observable<string>;
   connectionState$: Observable<number>;
@@ -62,6 +65,7 @@ export class MasterPageComponent implements OnInit, OnDestroy {
     private router: Router,
     private universeApi: UniverseApiService,
     private universeLocal: UniverseLocalService,
+    private viewport: UniverseViewportService,
   ) { }
 
   ngOnInit(): void {
@@ -93,7 +97,13 @@ export class MasterPageComponent implements OnInit, OnDestroy {
       filter((event): event is NavigationEnd => event instanceof NavigationEnd),
     ).subscribe((event) => {
       this.activeChain = explorerChainFromUrl(event.urlAfterRedirects);
+      this.revealActiveDestination();
     });
+
+    // The one piece of adaptive behaviour that is not expressible in CSS. See
+    // UniverseViewportService: on iOS the software keyboard covers the page
+    // rather than shortening it, so no viewport unit knows it is there.
+    this.viewport.track();
     this.chainCapabilities$ = this.stateService.isBrowser
       ? timer(0, 15_000).pipe(
           switchMap(() => this.universeApi.getChains$().pipe(catchError(() => of([])))),
@@ -136,6 +146,48 @@ export class MasterPageComponent implements OnInit, OnDestroy {
     }
   }
 
+  ngAfterViewInit(): void {
+    this.revealActiveDestination();
+  }
+
+  /**
+   * Scroll the current destination into the bottom bar's visible run.
+   *
+   * Below the breakpoint the bar is a horizontal scroller, because six or more
+   * destinations cannot be full-size targets and all on screen at 320 pixels
+   * at once. Everything that follows from that choice is handled in CSS: the
+   * scroll shadows say which side has more, and the targets keep their size.
+   * What CSS cannot do is put the scroller at the right starting offset.
+   *
+   * Without this, arriving on Charts from a link showed a bar scrolled to its
+   * left end with Dashboard highlighted-looking and Charts off the right edge,
+   * so the bar disagreed with the page about where the visitor was. It runs
+   * after every navigation and once on first paint.
+   *
+   * `nearest` on both axes, so a destination already fully visible does not
+   * move, and the page itself is never scrolled by this.
+   */
+  private revealActiveDestination(): void {
+    // There is no scroller and no animation frame on the server.
+    if (!this.stateService.isBrowser) {
+      return;
+    }
+    const list = this.navList?.nativeElement;
+    if (!list || typeof list.scrollWidth !== 'number') {
+      return;
+    }
+    // Nothing to reveal when the bar is not a scroller, which is every width
+    // at and above the breakpoint.
+    if (list.scrollWidth <= list.clientWidth) {
+      return;
+    }
+    // After the router has swapped the active class on, not before it.
+    requestAnimationFrame(() => {
+      const active = list.querySelector('.nav-item.active');
+      active?.scrollIntoView({ block: 'nearest', inline: 'nearest', behavior: 'auto' });
+    });
+  }
+
   collapse(): void {
     this.navCollapsed = !this.navCollapsed;
   }
diff --git a/frontend/src/app/components/search-form/search-form.component.html b/frontend/src/app/components/search-form/search-form.component.html
index f7a25495a01..eecde4b6e4d 100644
--- a/frontend/src/app/components/search-form/search-form.component.html
+++ b/frontend/src/app/components/search-form/search-form.component.html
@@ -7,9 +7,15 @@
         (focus)="focus$.next($any($event).target.value)"
         (click)="click$.next($any($event).target.value)"
         formControlName="searchText" type="text" class="form-control search-input"
+        [class.has-text]="hasSearchText"
         autocomplete="off" autocapitalize="off" autocorrect="off" spellcheck="false"
+        enterkeyhint="search"
         i18n-placeholder="search-form.searchbar-placeholder"
         [placeholder]="activeChain === 'bitcoin' ? 'Search a transaction, block, address, or asset' : 'Search ' + activeChain">
+      <button *ngIf="hasSearchText" type="button" class="search-clear" (click)="clearSearch()"
+        i18n-aria-label="search-form.clear" aria-label="Clear the search field">
+        <fa-icon [icon]="['fas', 'xmark']" [fixedWidth]="true"></fa-icon>
+      </button>
       <app-search-results #searchResults [hidden]="dropdownHidden" [results]="typeAhead$ | async" (selectedResult)="selectedResult($event)"></app-search-results>
     </div>
     <button [disabled]="isSearching" type="submit" class="search-submit"
diff --git a/frontend/src/app/components/search-form/search-form.component.scss b/frontend/src/app/components/search-form/search-form.component.scss
index f3facf88088..aa93bf5d30d 100644
--- a/frontend/src/app/components/search-form/search-form.component.scss
+++ b/frontend/src/app/components/search-form/search-form.component.scss
@@ -34,21 +34,41 @@
   min-width: 0;
 }
 
+// Searching every chain rather than the one being explored.
+//
+// The label used to be squeezed to 2.4rem below 420px, which wrapped "All
+// chains" onto two lines inside a control barely taller than one of them. The
+// header already gives search a full row of its own below 600px, so the width
+// it was being squeezed out of is width that exists: the label stays on one
+// line and the whole thing is one target rather than a 13px box beside some
+// text.
 .all-chains {
   align-items: center;
   color: var(--u-text-secondary);
+  cursor: pointer;
   display: flex;
   flex: 0 0 auto;
   font-size: var(--u-text-xs);
   gap: var(--u-space-1);
   margin: 0;
   white-space: nowrap;
-}
 
-@media (max-width: 420px) {
-  .all-chains span {
-    max-width: 2.4rem;
-    white-space: normal;
+  @media (pointer: coarse) {
+    min-height: var(--u-touch-target);
+    padding-inline: var(--u-space-1);
+  }
+
+  // The native box is about 13px on every platform, which is under the floor
+  // on its own. The label is part of the same target, and the box is grown so
+  // that the state is legible rather than a speck.
+  input[type='checkbox'] {
+    height: 18px;
+    margin: 0;
+    width: 18px;
+  }
+
+  &:focus-within {
+    color: var(--u-text-primary);
   }
 }
 
@@ -63,11 +83,33 @@
   border: 1px solid var(--u-border-strong);
   border-radius: var(--u-radius-md);
   color: var(--u-text-primary);
-  font-size: var(--u-text-base);
+  // 16px, and not the body scale.
+  //
+  // iOS Safari zooms the entire page in when a focused field computes below
+  // 16px, and it does not zoom back out when the field is blurred. On this
+  // field that meant every search on an iPhone left the visitor on a page
+  // twice as wide as their screen, panning sideways to read the result they
+  // had just asked for. It is an engine threshold, not a preference, so the
+  // only fix is to be at or above it.
+  //
+  // This used to drop to 13px below 576px to fit more of the placeholder in.
+  // That trade is the wrong way round: the placeholder is a hint and the
+  // result list does the real explaining, so a truncated hint costs almost
+  // nothing, while a forced zoom costs something on every single search.
+  font-size: var(--u-text-field);
   height: 40px;
   padding: 0 var(--u-space-3);
   width: 100%;
 
+  // Room for the clear control, which sits inside the field.
+  &.has-text {
+    padding-right: calc(var(--u-touch-target) + var(--u-space-1));
+  }
+
+  @media (pointer: coarse) {
+    height: var(--u-touch-target-comfortable);
+  }
+
   &::placeholder {
     color: var(--u-text-muted);
     opacity: 1;
@@ -81,11 +123,39 @@
     outline: none;
   }
 
-  // The placeholder names four things that can be searched. On a narrow screen
-  // that string is truncated to uselessness, so the field says less and the
-  // result list does the explaining.
-  @media (max-width: 575.98px) {
-    font-size: var(--u-text-sm);
+}
+
+// Clearing the field without aiming at a 12px glyph.
+//
+// A long identifier is exactly the thing a visitor most often wants to replace
+// wholesale, and selecting all of one by dragging inside a single-line field on
+// a phone is a fiddly gesture with no keyboard equivalent. This is the
+// equivalent: one full-size target, present only when there is something to
+// clear, and it returns focus to the field so the next identifier can be typed
+// or pasted straight away.
+.search-clear {
+  align-items: center;
+  background: none;
+  border: 0;
+  border-radius: var(--u-radius-md);
+  color: var(--u-text-secondary);
+  cursor: pointer;
+  display: flex;
+  height: var(--u-touch-target);
+  justify-content: center;
+  position: absolute;
+  right: 2px;
+  top: 50%;
+  transform: translateY(-50%);
+  width: var(--u-touch-target);
+
+  &:hover {
+    color: var(--u-text-primary);
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--u-focus-ring);
+    outline-offset: -2px;
   }
 }
 
@@ -110,11 +180,19 @@
   flex: 0 0 auto;
   height: 40px;
   justify-content: center;
+
   transition:
     filter var(--u-duration-fast) var(--u-ease-out),
     box-shadow var(--u-duration-fast) var(--u-ease-out);
   width: 46px;
 
+  // The submit control matches the field it belongs to, and clears the touch
+  // floor on its shorter side. 46px wide was already past it; the height was
+  // not.
+  @media (pointer: coarse) {
+    height: var(--u-touch-target-comfortable);
+  }
+
   // Brightness rather than a second gradient: the measured relationship
   // between the fill and its label survives a uniform lift, and a swapped
   // gradient would have to be measured again.
diff --git a/frontend/src/app/components/search-form/search-form.component.ts b/frontend/src/app/components/search-form/search-form.component.ts
index 78b8939b3d9..39f3615c4f2 100644
--- a/frontend/src/app/components/search-form/search-form.component.ts
+++ b/frontend/src/app/components/search-form/search-form.component.ts
@@ -352,6 +352,33 @@ export class SearchFormComponent implements OnInit {
     this.searchAllChains$.next(enabled);
   }
 
+  /**
+   * Whether there is anything to clear.
+   *
+   * Read from the control rather than mirrored into a field of its own, so a
+   * value arriving from anywhere other than a keystroke, such as the reset
+   * after a successful search, cannot leave the button showing over an empty
+   * field.
+   */
+  get hasSearchText(): boolean {
+    return Boolean(this.searchForm?.get('searchText')?.value);
+  }
+
+  /**
+   * Empty the field and hand focus back to it.
+   *
+   * Replacing a 64-character identifier on a phone otherwise means selecting
+   * all of one by dragging inside a single-line field, which is a gesture with
+   * no keyboard equivalent and a poor success rate with a thumb. Focus returns
+   * to the field because clearing is almost always the first half of typing or
+   * pasting something else, and losing the keyboard in between would make it
+   * two actions instead of one.
+   */
+  clearSearch(): void {
+    this.searchForm.setValue({ searchText: '' });
+    this.searchInput?.nativeElement?.focus();
+  }
+
   itemSelected(): void {
     setTimeout(() => this.search());
   }
diff --git a/frontend/src/app/components/search-form/search-results/search-results.component.scss b/frontend/src/app/components/search-form/search-results/search-results.component.scss
index 8a5132dc53c..9ef787fc4e0 100644
--- a/frontend/src/app/components/search-form/search-results/search-results.component.scss
+++ b/frontend/src/app/components/search-form/search-results/search-results.component.scss
@@ -19,11 +19,46 @@
   color: var(--red);
 }
 
+// The result list hangs from the field, and has to stay inside the room the
+// field actually has beneath it.
+//
+// Two things were wrong here on a phone. The offset was 42px, a hard-coded
+// copy of a 40px field, so raising the field to a thumb-sized 48px on touch
+// left the list overlapping the last six pixels of the control that produced
+// it. `top: 100%` measures the field instead of restating its height, so the
+// two cannot drift apart again.
+//
+// The height had no cap at all. A query matching a dozen things ran the list
+// off the bottom of the screen, and because this list is positioned rather
+// than in flow, the page would not scroll to reach the rest of it: results
+// existed that could not be looked at. The cap is the smaller of what the
+// window has and what the keyboard has left of it, because those are different
+// numbers on iOS and the keyboard is open in exactly the moment this list is
+// being read.
+//
+// The three declarations are a deliberate ladder, not a repetition. Each is
+// discarded whole by an engine that cannot parse it, so the last one an engine
+// understands is the one that applies: `vh` everywhere, `dvh` from Safari 15.4
+// and Chrome 108, and the visual-viewport figure only where the service could
+// publish it. Writing them into a single `min()` would have made the whole
+// declaration invalid on the older engines rather than degrading through them.
+//
+// 9rem is what the header takes above the field at its tallest, which is the
+// two-row layout below 600px, plus a margin so the list does not sit flush to
+// the keyboard. `max()` keeps a floor under it, because in landscape with the
+// keyboard open the arithmetic can reach a height too short to show a single
+// result, and a short scrollable list is still usable where a collapsed one is
+// not.
 .dropdown-menu {
   position: absolute;
-  top: 42px;
+  top: calc(100% + 2px);
   left: 0px;
   box-shadow: 0.125rem 0.125rem 0.25rem var(--u-shadow-color);
+  max-height: calc(100vh - 9rem);
+  max-height: calc(100dvh - 9rem);
+  max-height: max(8rem, calc(var(--u-visual-viewport-height, 100vh) - 9rem));
+  overflow-y: auto;
+  overscroll-behavior: contain;
   width: 100%;
 }
 
diff --git a/frontend/src/app/components/start/start.component.html b/frontend/src/app/components/start/start.component.html
index 0f65bb4126d..2f6fc1d599d 100644
--- a/frontend/src/app/components/start/start.component.html
+++ b/frontend/src/app/components/start/start.component.html
@@ -12,7 +12,24 @@
 <div *ngIf="countdown > 0" class="warning-label">{{ eventName }} in {{ countdown | number }} block{{ countdown === 1 ? '' : 's' }}!</div>
 
 <div class="blockchain-wrapper" [class.time-ltr]="timeLtr" [class.time-rtl]="!timeLtr" #blockchainWrapper>
+  <!-- The block timeline is the one place in this product that scrolls
+       sideways on purpose. Blocks are a sequence, and the whole point of the
+       view is the run of them either side of the tip, so stacking them or
+       cutting the row down to what fits a phone would destroy the thing being
+       looked at.
+
+       What was missing was saying so. It was a clipped row with its scrollbar
+       hidden, which to anyone not already expecting a timeline is a row that
+       simply ends, and to a screen reader was an unnamed div. Naming it as a
+       region gives it a landmark and an announced purpose, and marks it as the
+       one region the mobile gate is allowed to find scrolling sideways. Its
+       blocks are links, so a keyboard reaches past the edge by tabbing through
+       them, which is what the gate checks for separately. -->
   <div id="blockchain-container" [dir]="timeLtr ? 'rtl' : 'ltr'" #blockchainContainer
+    data-scroll-region
+    role="region"
+    i18n-aria-label="start.blockchain-region|Block timeline region"
+    aria-label="Block timeline, scrolls sideways"
     [class.with-menu]="hasMenu"
     (mousedown)="onMouseDown($event)"
     (pointerdown)="onPointerDown($event)"
diff --git a/frontend/src/app/components/tracker/tracker.component.ts b/frontend/src/app/components/tracker/tracker.component.ts
index 1fe847fccec..7645ed7ada6 100644
--- a/frontend/src/app/components/tracker/tracker.component.ts
+++ b/frontend/src/app/components/tracker/tracker.component.ts
@@ -852,7 +852,17 @@ export class TrackerComponent implements OnInit, OnDestroy {
   onResize(): void {
     this.isMobile = window.innerWidth < 850;
     this.blockchainWidth = Math.min(600, window.innerWidth);
-    this.blockchainHeight = this.blockchainWidth / 5;
+    // A fifth of the width, but never so short that the blocks stop being
+    // targets.
+    //
+    // Each block in this strip is a link to that block, and the strip renders
+    // them at seven twelfths of its height. At 320px wide that arithmetic
+    // produced 37px blocks: comfortably clickable, and under the 44 a thumb
+    // wants. The floor of 76 is that relationship run backwards from 44, so
+    // the strip grows by twelve pixels on the narrowest phones and is
+    // unchanged from 380px upwards, where a fifth of the width already clears
+    // it.
+    this.blockchainHeight = Math.max(76, this.blockchainWidth / 5);
   }
 
   ngOnDestroy() {
diff --git a/frontend/src/app/components/transactions-list/transactions-list.component.scss b/frontend/src/app/components/transactions-list/transactions-list.component.scss
index 4b933ced150..5d005240604 100644
--- a/frontend/src/app/components/transactions-list/transactions-list.component.scss
+++ b/frontend/src/app/components/transactions-list/transactions-list.component.scss
@@ -31,6 +31,17 @@
 	@media( min-width: 576px){
 		font-size: 19px;
 	}
+
+	// The arrow beside each input and output is a link to the transaction on the
+	// other side of it, so it is a target and not decoration. It is a single
+	// glyph, so it can only be given room around itself, and it sits directly
+	// beside the address link above, which is why both need it.
+	@media (pointer: coarse), (max-width: 991.98px) {
+		display: inline-block;
+		min-width: 24px;
+		padding-block: var(--u-space-2);
+		text-align: center;
+	}
 }
 .green {
   color: var(--green);
@@ -302,6 +313,16 @@ h2 {
 
 .address {
 	font-family: monospace;
+
+	// An address in a transaction flow is a link to that address, and there is
+	// one on every input and every output, a few pixels apart. At 18px tall in a
+	// stack that close together, a thumb aimed at one output lands on the one
+	// below it. Room around the text rather than a taller box, because the
+	// address is allowed to wrap when it is long.
+	@media (pointer: coarse), (max-width: 991.98px) {
+		display: inline-block;
+		padding-block: var(--u-space-2);
+	}
 }
 
 .p2pk-address {
diff --git a/frontend/src/app/dashboard/dashboard.component.scss b/frontend/src/app/dashboard/dashboard.component.scss
index a3a34951e3b..5123647359a 100644
--- a/frontend/src/app/dashboard/dashboard.component.scss
+++ b/frontend/src/app/dashboard/dashboard.component.scss
@@ -598,6 +598,13 @@
 }
 
 .lens-option {
+  // 34px is a comfortable pill to click and a near miss to tap, and there are
+  // three of them side by side. The larger floor only applies where a thumb is
+  // doing the pointing.
+  @media (pointer: coarse), (max-width: 991.98px) {
+    min-height: var(--u-touch-target);
+  }
+
   background: var(--u-surface-sunken);
   border: 1px solid var(--u-border);
   border-radius: var(--u-radius-pill);
@@ -730,12 +737,22 @@
     position: static;
 
     .toggler-option {
+      align-items: center;
       border-radius: var(--u-radius-sm);
       color: var(--u-text-muted);
+      display: inline-flex;
       font-size: var(--u-text-xs);
       font-weight: var(--u-weight-medium);
+      justify-content: center;
       padding: 2px var(--u-space-2);
 
+      // These two are a switch between two readings of the same figure, sat
+      // next to each other. 24px tall was already the thing the comment above
+      // says this rule set out to fix, only less so.
+      @media (pointer: coarse), (max-width: 991.98px) {
+        min-height: var(--u-touch-target);
+      }
+
       &:hover { color: var(--u-text-primary); }
 
       &.inactive {
diff --git a/frontend/src/app/shared/components/address-text/address-text.component.scss b/frontend/src/app/shared/components/address-text/address-text.component.scss
index 3b5bf50b725..df4d0f84fcd 100644
--- a/frontend/src/app/shared/components/address-text/address-text.component.scss
+++ b/frontend/src/app/shared/components/address-text/address-text.component.scss
@@ -26,6 +26,20 @@
   }
 }
 
+// An address link stacked with others a few pixels apart, one per output. This
+// component is used in the address page's own lists rather than in the
+// transaction flow, so it needs the same room as the flow's addresses do and
+// does not inherit it from there.
+.address {
+  @media (pointer: coarse), (max-width: 991.98px) {
+    display: inline-block;
+    // 13 either side of an 18px line reaches the floor exactly. The number is
+    // written rather than taken from the space scale because it is derived
+    // from the target size and the line height, not from the rhythm.
+    padding-block: 13px;
+  }
+}
+
 .poison-alert {
   margin-left: .5em;
   color: var(--yellow);
diff --git a/frontend/src/app/shared/components/global-footer/global-footer.component.scss b/frontend/src/app/shared/components/global-footer/global-footer.component.scss
index 9173ea9e412..82902b9fa1b 100644
--- a/frontend/src/app/shared/components/global-footer/global-footer.component.scss
+++ b/frontend/src/app/shared/components/global-footer/global-footer.component.scss
@@ -90,6 +90,16 @@ footer {
     // underline on hover rather than carrying a rule each.
     text-decoration: none;
 
+    // A stacked column of destinations is the definition of a repeated
+    // control, and these came out at 41px, which is close enough to the floor
+    // to look intentional and far enough under it to be missed. The row grows
+    // rather than the text, so the column keeps its wording and its rhythm.
+    @media (pointer: coarse), (max-width: 991.98px) {
+      align-items: center;
+      display: flex;
+      min-height: var(--u-touch-target);
+    }
+
     &:hover {
       color: var(--u-brand);
       text-decoration: underline;
diff --git a/frontend/src/app/shared/shared.module.ts b/frontend/src/app/shared/shared.module.ts
index 95fb521f94c..c48ab1717e5 100644
--- a/frontend/src/app/shared/shared.module.ts
+++ b/frontend/src/app/shared/shared.module.ts
@@ -8,7 +8,7 @@ import { faFilter, faAngleDown, faAngleUp, faAngleRight, faAngleLeft, faBolt, fa
   faFastForward, faWallet, faUserClock, faWrench, faUserFriends, faQuestionCircle, faHistory, faSignOutAlt, faKey, faSuitcase, faIdCardAlt, faNetworkWired, faUserCheck,
   faCircleCheck, faUserCircle, faCheck, faRocket, faScaleBalanced, faHourglassStart, faHourglassHalf, faHourglassEnd, faWandMagicSparkles, faTimeline,
   faCircleXmark, faCalendarCheck, faMoneyBillTrendUp, faRobot, faShareNodes, faCreditCard, faMicroscope, faExclamationTriangle, faLockOpen, faPaperclip, faAddressCard,
-  faMedal, faBug, faFilePdf, faPiggyBank, faLayerGroup, faHeart, faCashRegister, faCodeFork, faCode } from '@fortawesome/free-solid-svg-icons';
+  faMedal, faBug, faFilePdf, faPiggyBank, faLayerGroup, faHeart, faCashRegister, faCodeFork, faCode, faXmark } from '@fortawesome/free-solid-svg-icons';
 import { InfiniteScrollModule } from 'ngx-infinite-scroll';
 import { MenuComponent } from '@components/menu/menu.component';
 import { PreviewTitleComponent } from '@components/master-page-preview/preview-title.component';
@@ -475,6 +475,7 @@ export class SharedModule {
     library.addIcons(faWandMagicSparkles);
     library.addIcons(faTimeline);
     library.addIcons(faCircleXmark);
+    library.addIcons(faXmark);
     library.addIcons(faCalendarCheck);
     library.addIcons(faMoneyBillTrendUp);
     library.addIcons(faRobot);
diff --git a/frontend/src/app/universe/asset-flow/asset-flow.component.scss b/frontend/src/app/universe/asset-flow/asset-flow.component.scss
index 7ce5beb63fd..722487d9353 100644
--- a/frontend/src/app/universe/asset-flow/asset-flow.component.scss
+++ b/frontend/src/app/universe/asset-flow/asset-flow.component.scss
@@ -113,6 +113,15 @@
     color: var(--u-text-muted);
     cursor: pointer;
 
+    // One of these sits on every input and every output, so a transaction with
+    // a dozen positions is a dozen of them stacked a few pixels apart. That is
+    // both a repeated control and a crowded one.
+    @media (pointer: coarse), (max-width: 991.98px) {
+      align-items: center;
+      display: flex;
+      min-height: var(--u-touch-target);
+    }
+
     &:hover { color: var(--u-brand); }
 
     &:focus-visible {
@@ -292,6 +301,13 @@
     cursor: pointer;
     color: var(--u-text-muted);
     min-height: 32px;
+
+    // This is the disclosure that opens the evidence for a whole flow, and
+    // there is one per flow. 32px is a deliberate desktop size; a thumb wants
+    // the platform floor.
+    @media (pointer: coarse), (max-width: 991.98px) {
+      min-height: var(--u-touch-target);
+    }
     display: flex;
     align-items: center;
   }
diff --git a/frontend/src/app/universe/multichain-explorer/multichain-explorer.component.scss b/frontend/src/app/universe/multichain-explorer/multichain-explorer.component.scss
index 5b1d9e1988d..3adcffb0abb 100644
--- a/frontend/src/app/universe/multichain-explorer/multichain-explorer.component.scss
+++ b/frontend/src/app/universe/multichain-explorer/multichain-explorer.component.scss
@@ -687,6 +687,15 @@ tbody tr:last-child td {
     cursor: pointer;
     font-weight: var(--u-weight-semibold);
     color: var(--u-text-secondary);
+
+    // The one control that opens the raw evidence for an object, and the only
+    // way to reach it. A disclosure triangle beside a word is about 18px tall,
+    // which is a poor target for something this consequential.
+    @media (pointer: coarse), (max-width: 991.98px) {
+      align-items: center;
+      display: flex;
+      min-height: var(--u-touch-target);
+    }
   }
 
   &[open] summary {
diff --git a/frontend/src/app/universe/protocol-strip/protocol-strip.component.scss b/frontend/src/app/universe/protocol-strip/protocol-strip.component.scss
index fecfef45ea2..ba57b649ed3 100644
--- a/frontend/src/app/universe/protocol-strip/protocol-strip.component.scss
+++ b/frontend/src/app/universe/protocol-strip/protocol-strip.component.scss
@@ -50,6 +50,14 @@
     border-radius: 0.25rem;
     min-height: 32px;
 
+    // The strip is a row of protocol chips, all the same shape, all leading
+    // somewhere. Repeated controls sitting side by side are the case the
+    // platform floor is written for, because a near miss lands on the chip
+    // next to the one that was aimed at rather than on nothing.
+    @media (pointer: coarse), (max-width: 991.98px) {
+      min-height: var(--u-touch-target);
+    }
+
     &:hover,
     &:focus-visible {
       border-color: var(--universe-protocol-runes);
diff --git a/frontend/src/app/universe/universe-viewport.service.ts b/frontend/src/app/universe/universe-viewport.service.ts
new file mode 100644
index 00000000000..d3854ca3553
--- /dev/null
+++ b/frontend/src/app/universe/universe-viewport.service.ts
@@ -0,0 +1,96 @@
+import { DOCUMENT, isPlatformBrowser } from '@angular/common';
+import { Inject, Injectable, NgZone, OnDestroy, PLATFORM_ID } from '@angular/core';
+
+/**
+ * The part of the window a visitor can actually see, published as CSS.
+ *
+ * Almost every adaptive decision in this product is made in CSS, and should be:
+ * media and container queries survive rotation, folding and split-screen
+ * resizing without anything having to listen for them. There is one state CSS
+ * still cannot describe, and this service exists for that one state and nothing
+ * else.
+ *
+ * When the software keyboard opens, the window does not get shorter. On iOS the
+ * keyboard is painted over the page: `100dvh`, `100vh` and `window.innerHeight`
+ * all keep reporting the full height, while roughly the bottom half of it is
+ * behind the keyboard. So a menu or a result list capped at `100dvh` is capped
+ * at a height that no longer exists, and its lower half sits under the keys
+ * with nothing to say it is there. The only thing that reports the truth is
+ * `visualViewport`.
+ *
+ * Two custom properties are published on the document element:
+ *
+ *   --u-visual-viewport-height   what is visible right now, keyboard excluded
+ *   --u-keyboard-inset           how much of the window the keyboard covers
+ *
+ * Both are plain lengths, so a stylesheet uses them with `min()` beside a `dvh`
+ * value and gets the smaller of the two. That ordering matters: the fallback
+ * has to be the CSS one. On an engine with no `visualViewport` these properties
+ * are simply never written, every `min()` that mentions them falls back to the
+ * declared `dvh` cap, and the layout is the one it would have been anyway.
+ *
+ * Cost is deliberately near zero. It listens only while a browser is running
+ * it, it writes only when a value actually changes, and every listener is
+ * outside Angular so a keyboard animation cannot drive a change-detection pass
+ * per frame on a low-end phone.
+ */
+@Injectable({ providedIn: 'root' })
+export class UniverseViewportService implements OnDestroy {
+  private stop: (() => void) | null = null;
+  private lastHeight = -1;
+  private lastInset = -1;
+
+  constructor(
+    private zone: NgZone,
+    @Inject(DOCUMENT) private document: Document,
+    @Inject(PLATFORM_ID) private platformId: object,
+  ) {}
+
+  /**
+   * Called once by the application shell. Safe to call more than once, and
+   * safe on the server, where there is no window to measure.
+   */
+  track(): void {
+    if (this.stop || !isPlatformBrowser(this.platformId)) {
+      return;
+    }
+    const view = this.document.defaultView;
+    const visual = view?.visualViewport;
+    if (!view || !visual) {
+      // No visualViewport: the stylesheet's own dvh cap stands, unmodified.
+      return;
+    }
+
+    const publish = (): void => {
+      // The offset matters as much as the height. A page scrolled down inside
+      // the visual viewport reports a height that is correct and a position
+      // that is not, and the inset is the gap between the bottom of what can
+      // be seen and the bottom of the window.
+      const height = Math.round(visual.height);
+      const inset = Math.max(0, Math.round(view.innerHeight - visual.height - visual.offsetTop));
+      if (height === this.lastHeight && inset === this.lastInset) {
+        return;
+      }
+      this.lastHeight = height;
+      this.lastInset = inset;
+      const root = this.document.documentElement;
+      root.style.setProperty('--u-visual-viewport-height', `${height}px`);
+      root.style.setProperty('--u-keyboard-inset', `${inset}px`);
+    };
+
+    this.zone.runOutsideAngular(() => {
+      visual.addEventListener('resize', publish);
+      visual.addEventListener('scroll', publish);
+      publish();
+      this.stop = () => {
+        visual.removeEventListener('resize', publish);
+        visual.removeEventListener('scroll', publish);
+      };
+    });
+  }
+
+  ngOnDestroy(): void {
+    this.stop?.();
+    this.stop = null;
+  }
+}
diff --git a/frontend/src/index.mempool.html b/frontend/src/index.mempool.html
index 1f7a3856740..554f9a025c2 100644
--- a/frontend/src/index.mempool.html
+++ b/frontend/src/index.mempool.html
@@ -51,7 +51,17 @@
   <meta name="theme-color" content="#0e0a13" media="(prefers-color-scheme: dark)">
   <!-- END FAVICONS -->
 
-  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <!-- viewport-fit=cover puts the page under the notch and the home indicator
+       rather than inside a letterbox, which is what makes the header and the
+       bottom bar reach the edges of the screen. It is only safe alongside the
+       safe-area padding in the stylesheet: without that, cover is how content
+       ends up underneath a rounded corner.
+
+       No maximum-scale and no user-scalable=no. Pinch zoom is how a great many
+       people read anything at all, and taking it away to stop iOS zooming a
+       focused field is fixing the wrong thing; the fields are sized at 16px
+       instead, which is what actually stops it. -->
+  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
 </head>
 
 <body>
diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss
index 2d8226d2532..6c444157afe 100644
--- a/frontend/src/styles.scss
+++ b/frontend/src/styles.scss
@@ -107,11 +107,199 @@ html, body {
   height: 100%;
 }
 
+// Nothing the browser scrolls to may land underneath a fixed layer.
+//
+// Anchors, `scrollIntoView`, and the scroll a browser performs when focus
+// moves to something off screen all stop with the target flush against the
+// edge of the viewport. Both edges of this product are occupied: a sticky
+// header at the top at every width, and a fixed navigation bar at the bottom
+// below the breakpoint. Without these two, tabbing to a control near the
+// bottom of a page on a phone put it exactly behind the bar, which is a
+// WCAG 2.2 focus-obscured failure and, more plainly, the visitor could not see
+// the thing they had just focused.
+//
+// Written on `html` so it applies to the scrolling element regardless of which
+// route is mounted.
+//
+// The number has to track the header rather than be the largest it ever needs
+// to be. Reserving 7rem where the header is 48px does not simply overshoot: it
+// takes 64 pixels out of the room the browser has to place the focused element
+// in, and anything taller than what is left gets aligned to the top of that
+// room with its bottom hanging past the bar. That is how a scroll-padding rule
+// meant to prevent this fault caused it, on the shortest window of the set. So
+// each of the three header shapes states its own.
+html {
+  // Below 600px the header wraps to two rows, search on its own beneath the
+  // brand and the pickers.
+  scroll-padding-bottom: calc(var(--u-bottom-nav-space) + var(--u-space-4));
+  scroll-padding-top: calc(7rem + var(--u-safe-top));
+
+  // From 600px the header is one row again, and the bottom bar is still there.
+  @media (min-width: 600px) and (max-width: 991.98px) {
+    scroll-padding-top: calc(4.5rem + var(--u-safe-top));
+  }
+
+  // Compact landscape: a short header and a short bar, and the least room of
+  // any window in the set to spend.
+  @media (max-width: 991.98px) and (max-height: 479.98px) {
+    scroll-padding-bottom: calc(var(--u-touch-target) + 1px + var(--u-safe-bottom) + var(--u-space-3));
+    // 4rem, not 3.5. The compact landscape header measures 57px including its
+    // rule, so 3.5rem cleared it by minus one pixel and the focused element
+    // came to rest just under it. Measured rather than estimated a second time.
+    scroll-padding-top: calc(4rem + var(--u-safe-top));
+  }
+
+  @media (min-width: 992px) {
+    // One row of header, and no bottom bar to clear.
+    scroll-padding-bottom: var(--u-space-4);
+    scroll-padding-top: 5rem;
+  }
+}
+
 body {
   background-color: var(--u-surface-page);
   padding-bottom: 60px;
 }
 
+// Every control a phone opens a keyboard or a picker for.
+//
+// Written once and globally rather than on each control, because the rule it
+// enforces is an engine threshold rather than a design choice, and a rule that
+// has to be remembered per component is a rule that will be missed by the next
+// one. It was already missed five times: the language, currency, timezone,
+// amount and theme selects in the footer all computed at 14px, courtesy of
+// Bootstrap's `custom-select-sm`, and every one of them zoomed an iPhone in on
+// the footer and left it there.
+//
+// Below 16px iOS Safari zooms the layout viewport when the control takes focus
+// and does not restore it afterwards. The height goes up with the text for the
+// same reason the size exists: a control that is comfortable to read is still
+// unusable if it is too short to hit.
+//
+// Two conditions, not one. A device that reports a coarse pointer is the
+// obvious case, and a window narrow enough to be a phone is the safety net:
+// pointer reporting is not perfectly reliable across mobile browsers and
+// desktop-mode requests, and being wrong about it here costs a zoomed page,
+// while being wrong the other way costs a slightly larger control in a narrow
+// window. The wide desktop layout is untouched by either.
+//
+// The class selectors below are carrying specificity, not styling.
+//
+// Bootstrap sets 0.875rem from `.custom-select-sm` and `.form-control-sm`, both
+// single class selectors, and a bare `select` loses to them. That is precisely
+// how five 14px selects survived in the footer through a redesign. Naming the
+// element and the class together outweighs the class alone, which is the least
+// heavy-handed way to win this and leaves a component free to override it
+// deliberately. `!important` would have won too, and would have taken that
+// freedom away from every component at the same time.
+@media (pointer: coarse), (max-width: 991.98px) {
+  input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='hidden']),
+  select,
+  textarea,
+  input.form-control,
+  input.form-control-sm,
+  select.custom-select,
+  select.custom-select-sm,
+  select.form-control,
+  textarea.form-control {
+    font-size: var(--u-text-field);
+  }
+
+  input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='hidden']),
+  select,
+  input.form-control,
+  input.form-control-sm,
+  select.custom-select,
+  select.custom-select-sm,
+  select.form-control {
+    min-height: var(--u-touch-target);
+  }
+
+  // Box-like controls, given a thumb-sized shorter side.
+  //
+  // Every one of these is already a rectangle with its own background or
+  // border, so growing the shorter side changes how easy it is to hit and
+  // nothing else. They came in between 24 and 42 pixels tall, which is the
+  // range that looks deliberate on a desktop and is a near miss on a phone:
+  // pagination arrows at 38, documentation tabs at 42, the chart's own
+  // controls at 23.
+  //
+  // The flex display is what puts the label back in the middle. A `min-height`
+  // on its own leaves the text at the top of a taller box, which is how this
+  // sort of rule usually announces itself.
+  .btn,
+  .page-link,
+  .nav-link,
+  .lens-option,
+  .dropdown-toggle {
+    align-items: center;
+    display: inline-flex;
+    justify-content: center;
+    min-height: var(--u-touch-target);
+    // Both sides, because several of these are square rather than wide: the
+    // copy control beside every identifier is an icon 21px across, and the
+    // pagination arrows are 35. A floor on the height alone leaves a target
+    // that is tall and still too narrow to hit.
+    min-width: var(--u-touch-target);
+  }
+
+  // Checkboxes and radios keep their own size, which no platform draws larger
+  // than about 13px. That is under the WCAG floor on its own, so the box grows
+  // to the floor where it is not inside a label big enough to stand in for it.
+  input[type='checkbox'],
+  input[type='radio'] {
+    height: 24px;
+    width: 24px;
+  }
+
+  // Identifier links inside dense lists.
+  //
+  // These are words rather than boxes, so they take room around the text
+  // rather than a fixed height: an identifier is allowed to wrap across
+  // several lines when it is a 64-character hash, and a flex box with a
+  // minimum height would stop it doing that.
+  //
+  // The padding is real and the row grows with it. An earlier attempt pulled
+  // the row back to its old height with a negative margin, which kept the
+  // table dense and made every target overlap the two beside it, so aiming at
+  // one landed on its neighbour. That is the fault the rule exists to prevent,
+  // reintroduced by the fix for it. On a phone a row of identifiers is a list
+  // of links to follow, and a list of links to follow should be as tall as the
+  // links are.
+  //
+  // 14px either side of a 16px line reaches the floor exactly.
+  a.identifier,
+  a.truncate-link {
+    display: inline-block;
+    padding-block: 14px;
+  }
+
+  // A link sitting directly in a table cell is that row's target.
+  //
+  // Not `:only-child`, which is what this said first and which missed the one
+  // that started it: the block hash cell holds a direction mark, the link, and
+  // a copy control, so the link has siblings and the rule passed straight over
+  // it while the copy control sat six pixels away. Any link that is a direct
+  // child of a cell is an identifier or a destination, and several of them in
+  // one cell sit side by side rather than stacked, so room on the block axis
+  // separates rows without ever crowding a neighbour.
+  //
+  // Rows of transaction ids and block hashes are the most-followed links in
+  // this product and among the smallest, because an identifier link is one
+  // line of monospace text and nothing else. Stacked at table density they sat
+  // nineteen pixels apart, which is a row of targets where hitting the
+  // intended one is a matter of luck.
+  //
+  // The row grows and the table gets taller. That is the trade: on a phone
+  // these tables are lists of things to open, and a list of things to open has
+  // to be openable. Nothing here changes on the wide layout, where the same
+  // rows are driven by a cursor.
+  td > a {
+    display: inline-block;
+    padding-block: var(--u-space-3);
+  }
+}
+
 .container {
   position: relative;
 }
@@ -1581,6 +1769,16 @@ h2.anchor {
   min-height: 38px;
   padding: 0 var(--u-space-2);
 
+  // A thumb, not a cursor. 38px is comfortable to click and awkward to tap,
+  // and this is one of the three controls in the header that a phone user
+  // reaches for first. Keyed on the pointer rather than the width, because a
+  // narrow desktop window is still driven by a mouse and gains nothing from
+  // the taller control.
+  @media (pointer: coarse) {
+    min-height: var(--u-touch-target);
+    padding-inline: var(--u-space-3);
+  }
+
   &:focus-visible {
     outline: 2px solid var(--u-focus-ring);
     outline-offset: 2px;
@@ -1615,8 +1813,24 @@ h2.anchor {
   text-align: left;
 }
 
+// A dropdown is a desktop shape, and on a phone it is the shape most likely to
+// run off the bottom of the screen or out of its side. Three constraints keep
+// it inside the window it actually has: never wider than the viewport, never
+// taller than the dynamic viewport minus the header it hangs from, and
+// scrollable inside itself when the chain list outgrows a short screen. Without
+// the height cap, opening this in landscape puts the last chain below the fold
+// with no way to reach it, because a fixed-position menu does not scroll the
+// page.
 .chain-menu {
+  // vh first, then dvh for the engines that have it. An engine without dvh
+  // gets the large viewport, which is slightly too tall while the browser
+  // chrome is showing and still far better than no cap at all.
+  max-height: calc(100vh - 6rem);
+  max-height: calc(100dvh - 6rem);
+  max-width: calc(100vw - var(--u-space-4));
   min-width: min(22rem, calc(100vw - 1rem));
+  overflow-y: auto;
+  overscroll-behavior: contain;
 }
 
 .chain-option {
@@ -1626,6 +1840,11 @@ h2.anchor {
   grid-template-columns: minmax(0, 1fr) auto;
   row-gap: 2px;
   white-space: normal;
+
+  @media (pointer: coarse) {
+    min-height: var(--u-touch-target);
+    padding-block: var(--u-space-2);
+  }
 }
 
 .chain-option-title {
diff --git a/frontend/src/styles/_universe-tokens.scss b/frontend/src/styles/_universe-tokens.scss
index b9688f5be02..a716d1d85a1 100644
--- a/frontend/src/styles/_universe-tokens.scss
+++ b/frontend/src/styles/_universe-tokens.scss
@@ -139,6 +139,49 @@
   --u-width-prose: 68ch;
   --u-width-page: 1320px;
 
+  // The safe area, named once.
+  //
+  // env() resolves to zero on every browser that has no cutout to report, and
+  // to the real inset on the ones that do, so these are safe to use
+  // unconditionally. They are declared here rather than written inline at each
+  // use because the header, the bottom bar, the sheets and the dropdowns all
+  // have to agree about the same edges: an element that pads for the home
+  // indicator beside one that does not is worse than neither doing it.
+  //
+  // Use them through max(): a plain inset of zero would otherwise delete the
+  // ordinary padding an element needs on a phone with no cutout at all.
+  --u-safe-top: env(safe-area-inset-top, 0px);
+  --u-safe-right: env(safe-area-inset-right, 0px);
+  --u-safe-bottom: env(safe-area-inset-bottom, 0px);
+  --u-safe-left: env(safe-area-inset-left, 0px);
+
+  // What the fixed layers actually occupy, so content can reserve exactly that
+  // much and no more. The bottom bar's own height plus whatever the device
+  // puts below it; anything clearing the bar must clear both.
+  // 52px of link plus the 1px rule above it. Written down rather than guessed
+  // at, because the page reserves exactly this much and a number that drifts
+  // from the bar either hides the last row of content or leaves a gap.
+  --u-bottom-nav-height: 53px;
+  --u-bottom-nav-space: calc(var(--u-bottom-nav-height) + var(--u-safe-bottom));
+
+  // The smallest touch target this product ships.
+  //
+  // WCAG 2.2 AA asks for 24 CSS pixels. Apple asks for 44 points and Android
+  // for 48 dp, and those are the numbers that matter for a control a thumb has
+  // to hit on a moving train, so the larger one is the floor here for anything
+  // primary or repeated.
+  --u-touch-target: 44px;
+  --u-touch-target-comfortable: 48px;
+
+  // Text inside a control that a phone keyboard will open.
+  //
+  // iOS Safari zooms the whole page in when a focused input computes below
+  // 16px, and it does not zoom back out afterwards. That is not a preference,
+  // it is a hard threshold in the engine, so form fields take this rather than
+  // the body scale. Never solve it with maximum-scale: disabling zoom takes
+  // the page away from everyone who needs it to read anything at all.
+  --u-text-field: 1rem;
+
   // Layers. Named so a new overlay never has to guess a number.
   --u-z-base: 0;
   --u-z-sticky: 100;
diff --git a/scripts/universe/visual-qa/capture.mjs b/scripts/universe/visual-qa/capture.mjs
index 463b38b2d42..b458ea32083 100644
--- a/scripts/universe/visual-qa/capture.mjs
+++ b/scripts/universe/visual-qa/capture.mjs
@@ -53,8 +53,14 @@ const BASE = args.base || 'http://localhost:4200';
 const OUT = resolve(args.out || join(HERE, 'artifacts'));
 const BROWSER = args.browser || 'chromium';
 
-/** Routes under review. `wide` marks pages that legitimately scroll a table. */
-const ROUTES = [
+/**
+ * Routes under review. `wide` marks pages that legitimately scroll a table.
+ *
+ * Exported so the mobile gate walks the same list against the same fixtures.
+ * Two gates with two route lists is two gates that disagree about what the
+ * product is, and the one nobody edits is the one that goes stale.
+ */
+export const ROUTES = [
   { id: 'home', path: '/', name: 'Homepage' },
   { id: 'blocks', path: '/blocks', name: 'Blocks list' },
   { id: 'block', path: `/block/${sampleIds.BLOCK_HASH}`, name: 'Block detail' },
@@ -166,7 +172,7 @@ function pick(list, key, idKey = 'id') {
 }
 
 /** Answer every API call from fixtures, applying the state's overrides. */
-async function installFixtures(context, state) {
+export async function installFixtures(context, state) {
   const overrides = ALL_OVERRIDES[state] || {};
   const table = { ...fixtures, ...detailFixtures, ...addressFixtures, ...chainFixtures, ...assetFixtures };
 
diff --git a/scripts/universe/visual-qa/mobile-check.mjs b/scripts/universe/visual-qa/mobile-check.mjs
new file mode 100644
index 00000000000..3724ca6da29
--- /dev/null
+++ b/scripts/universe/visual-qa/mobile-check.mjs
@@ -0,0 +1,757 @@
+#!/usr/bin/env node
+/**
+ * The mobile gate.
+ *
+ * The visual matrix beside this one takes screenshots and reads contrast, and
+ * it is good at what a page looks like. It is close to blind to what a page is
+ * like to use with a thumb, because almost nothing it measures changes when a
+ * control is 38 pixels tall instead of 44, when a field zooms the whole page in
+ * on focus, or when the last row of a page sits underneath a fixed bar. Every
+ * one of those shipped.
+ *
+ * So this gate measures the phone, not the picture. It is deliberately built
+ * the other way round from the matrix: few page loads, many assertions on each.
+ * A page load costs seconds and an assertion costs a millisecond, and the
+ * matrix is already the expensive half of the frontend job, so growing coverage
+ * here has to be nearly free or it will not be allowed to grow.
+ *
+ * What it holds the product to, in the order the checks run:
+ *
+ *   overflow        no page-level sideways scroll at any tested width, and the
+ *                   only regions that scroll sideways are ones that say so
+ *   fields          no focusable field computes under 16px, which is the
+ *                   threshold at which iOS Safari zooms the page and stays
+ *                   zoomed
+ *   targets         repeated and primary controls clear the 44px floor
+ *   fixed layers    nothing the page ends with is underneath the bottom bar,
+ *                   and no focused control lands behind either fixed layer
+ *   safe areas      the header and the bottom bar pad for a real cutout rather
+ *                   than assuming zero
+ *   surfaces        an open menu fits the window it is opened in
+ *   continuity      rotating the device keeps the route, the query and the
+ *                   scroll position
+ *
+ * Usage:
+ *   node mobile-check.mjs --base=http://127.0.0.1:8080
+ *   node mobile-check.mjs --base=... --routes=home,tx --viewports=phone-320
+ */
+import { chromium, devices, webkit } from 'playwright';
+import { mkdirSync, writeFileSync } from 'fs';
+import { dirname, join, resolve } from 'path';
+import { fileURLToPath } from 'url';
+
+import { ROUTES, installFixtures } from './capture.mjs';
+
+const HERE = dirname(fileURLToPath(import.meta.url));
+
+const args = Object.fromEntries(
+  process.argv.slice(2).map((a) => {
+    const [k, v] = a.replace(/^--/, '').split('=');
+    return [k, v ?? true];
+  }),
+);
+
+const BASE = args.base || 'http://localhost:4200';
+const OUT = resolve(args.out || join(HERE, 'artifacts-mobile'));
+const BROWSER = args.browser === 'webkit' ? webkit : chromium;
+
+/**
+ * The window sizes that change the answer, not the phones that are popular.
+ *
+ * A device name is a poor test variable: two phones with the same CSS viewport
+ * render identically, and one phone renders four different sizes depending on
+ * its browser chrome, its orientation and whether it is sharing the screen. So
+ * these are chosen for the layout decisions they sit either side of.
+ *
+ *   320   the narrowest width still in use, and the one every reflow rule is
+ *         written against
+ *   360   the most common Android width
+ *   390   the most common iPhone width
+ *   430   the widest phone, where a two-column compact layout starts to pay
+ *   844   a phone on its side: a compact width with almost no height, which is
+ *         the state that breaks a header and a bottom bar at the same time
+ *   768   the tablet width where the shell is still in its compact form
+ *   1024  the first width above the shell breakpoint, kept as the control: a
+ *         mobile fix that regresses the desktop shell fails here
+ *
+ * `insets` asks the browser to report a display cutout. Chromium has no device
+ * to take them from, so they are injected as a style rule that overrides the
+ * four safe-area custom properties. That measures the thing that actually
+ * matters, which is whether the layout reserves room when the numbers are not
+ * zero, rather than whether env() works.
+ */
+const VIEWPORTS = [
+  { id: 'phone-320', width: 320, height: 568, compact: true },
+  { id: 'phone-360', width: 360, height: 740, compact: true },
+  { id: 'phone-390', width: 390, height: 844, compact: true, insets: { top: 59, bottom: 34, left: 0, right: 0 } },
+  { id: 'phone-430', width: 430, height: 932, compact: true },
+  { id: 'phone-landscape', width: 844, height: 390, compact: true, landscape: true, insets: { top: 0, bottom: 21, left: 59, right: 59 } },
+  { id: 'tablet-768', width: 768, height: 1024, compact: true },
+  { id: 'desktop-1024', width: 1024, height: 900, compact: false },
+];
+
+/**
+ * The touch-target floor, in CSS pixels.
+ *
+ * WCAG 2.2 AA asks for 24. Apple asks for 44 points and Android for 48 dp, and
+ * those are the numbers written for a thumb rather than for a mouse. 44 is the
+ * floor here because it is the smaller of the two platform numbers and this
+ * gate should fail on things both platforms would call too small, not on the
+ * gap between them.
+ */
+const TOUCH_FLOOR = 44;
+
+/**
+ * The smallest a focusable text field may compute to.
+ *
+ * Not a preference. Below this, iOS Safari zooms the layout viewport in when
+ * the field takes focus, and does not zoom back out when it loses it, so the
+ * visitor is left panning a page twice as wide as their screen. 16px is where
+ * the engine stops doing it.
+ */
+const FIELD_FLOOR = 16;
+
+/** Routes worth walking with a thumb. Every shell surface, and one of each
+ *  data shape: a long-identifier page, a table page, a chart page, a chain page
+ *  and a document page. Adding a route costs one page load per viewport, so the
+ *  list is chosen rather than exhaustive, and the shell checks that catch most
+ *  of these faults run on every one of them. */
+const MOBILE_ROUTE_IDS = (args.routes ? String(args.routes).split(',') : [
+  'home', 'tx', 'address', 'blocks', 'block', 'graphs', 'protocols',
+  'dogecoin-tx', 'zcash-block', 'docs', 'chain-menu',
+]);
+
+const findings = [];
+const passes = [];
+
+function fail(scope, message) {
+  findings.push(`${scope}: ${message}`);
+}
+
+function pass(scope, message) {
+  passes.push(`${scope}: ${message}`);
+}
+
+/**
+ * Everything measured inside the page, in one pass.
+ *
+ * One evaluate rather than a dozen: each round trip to the browser costs more
+ * than all of the arithmetic in here put together, and a single snapshot also
+ * means every number describes the same moment. Two probes taken either side of
+ * a live update can contradict each other and send the reader looking for a
+ * bug that is really a race in the harness.
+ */
+function mobileProbe(floors) {
+  const { touchFloor, fieldFloor } = floors;
+  const doc = document.documentElement;
+  const round = (n) => Math.round(n * 100) / 100;
+
+  // A name a reader can act on.
+  //
+  // Half of what this gate finds is an element with no id and no class, and
+  // "a@228x24" tells nobody which anchor on a page of two hundred. Angular's
+  // component tag is the useful part, because it names the file to open, so the
+  // nearest one is walked up to and prefixed. The `ng-` bookkeeping classes are
+  // dropped for the same reason: they change on every build and identify
+  // nothing.
+  const describe = (el) => {
+    if (!el) return '(none)';
+    const id = el.id ? `#${el.id}` : '';
+    const classes = typeof el.className === 'string' && el.className
+      ? el.className.trim().split(/\s+/).filter((c) => !c.startsWith('ng-')).slice(0, 3)
+      : [];
+    const cls = classes.length ? `.${classes.join('.')}` : '';
+    let host = el.parentElement;
+    while (host && !host.tagName.startsWith('APP-')) host = host.parentElement;
+    const owner = host ? `${host.tagName.toLowerCase()} ` : '';
+    return `${owner}${el.tagName.toLowerCase()}${id}${cls}`;
+  };
+
+  // --- Sideways overflow ---------------------------------------------------
+  //
+  // The page-level number first, then the elements responsible for it. A gate
+  // that reports "the page is 40px too wide" and stops has told the reader
+  // that there is a problem and nothing about where it is, which on a page of
+  // two thousand elements is most of the work left undone.
+  const overflowBy = doc.scrollWidth - doc.clientWidth;
+  const viewportWidth = doc.clientWidth;
+  const culprits = [];
+  if (overflowBy > 0) {
+    for (const el of document.querySelectorAll('body *')) {
+      const rect = el.getBoundingClientRect();
+      if (rect.width === 0 && rect.height === 0) continue;
+      // Only the elements that actually reach past the right edge, and only
+      // the outermost of them: a wide table makes every cell inside it look
+      // guilty, and naming the cells buries the table.
+      if (rect.right <= viewportWidth + 1) continue;
+      if (el.parentElement && el.parentElement.getBoundingClientRect().right > viewportWidth + 1) continue;
+      culprits.push(`${describe(el)} reaches ${round(rect.right)} of ${viewportWidth}`);
+      if (culprits.length >= 8) break;
+    }
+  }
+
+  // Regions that scroll sideways on purpose. A wide table of figures is a
+  // legitimate thing to pan, and turning every one of them into a stack of
+  // cards would destroy the comparison they exist for. What is not legitimate
+  // is an element that scrolls sideways without saying so, because a clipped
+  // row with no affordance is content that is present and unreachable.
+  const scrollers = [];
+  for (const el of document.querySelectorAll('body *')) {
+    if (el.scrollWidth - el.clientWidth <= 1) continue;
+    const style = getComputedStyle(el);
+    if (style.overflowX !== 'auto' && style.overflowX !== 'scroll') continue;
+    scrollers.push({
+      el: describe(el),
+      // Declared either by a scrollbar the platform paints, by the product's
+      // own affordance class, or by a role that says it is a scrollable
+      // region to a screen reader.
+      declared: Boolean(
+        el.closest('[data-scroll-region]')
+        || el.matches('.nav-list')
+        || el.getAttribute('tabindex') !== null
+        || el.getAttribute('role') === 'region',
+      ),
+      keyboardReachable: el.getAttribute('tabindex') !== null
+        || Boolean(el.querySelector('a, button, input, select, textarea, [tabindex]')),
+    });
+  }
+
+  // --- Fields that open a keyboard ----------------------------------------
+  const smallFields = [];
+  for (const el of document.querySelectorAll('input:not([type=hidden]):not([type=checkbox]):not([type=radio]), textarea, select')) {
+    const rect = el.getBoundingClientRect();
+    if (rect.width === 0 && rect.height === 0) continue;
+    const size = parseFloat(getComputedStyle(el).fontSize);
+    if (size < fieldFloor) {
+      smallFields.push(`${describe(el)} computes ${round(size)}px`);
+    }
+  }
+
+  // --- Touch targets -------------------------------------------------------
+  //
+  // Measured on what is painted, not on what the stylesheet asks for, so a
+  // control shrunk by its container is caught the same as one declared too
+  // small. Anything invisible, off-canvas or inside a closed menu is skipped:
+  // it is not a target until it can be hit.
+  //
+  // Two tiers, because there are two different rules and collapsing them gives
+  // the wrong answer in both directions.
+  //
+  // The first is WCAG 2.2 AA target size, which is 24 by 24 with a spacing
+  // exception: an undersized target still passes if nothing else is within a
+  // 24px circle centred on it. That exception is not a loophole, it is the
+  // substance of the rule. What makes a small target unusable is hitting the
+  // wrong one, and an isolated small link with nothing near it is not that.
+  // Enforcing 24 without the exception would demand that every figure in a
+  // dense financial table be spaced like a button, which would destroy the
+  // comparison the table exists for.
+  //
+  // The second is the platform floor of 44, which Apple and Android both ask
+  // for, and it is applied to the controls a thumb reaches for repeatedly or
+  // under pressure: everything in the application shell, everything in
+  // pagination, and anything appearing three or more times identically, which
+  // is what a repeated control looks like from here.
+  const targetsBelowWcag = [];
+  const targetsBelowPlatform = [];
+  const seenTargets = new Set();
+
+  const candidates = Array.from(
+    document.querySelectorAll('a[href], button, [role=button], input[type=checkbox], input[type=radio], summary'),
+  ).filter((el) => {
+    const rect = el.getBoundingClientRect();
+    if (rect.width === 0 || rect.height === 0) return false;
+    if (rect.bottom < 0 || rect.top > window.innerHeight * 4) return false;
+    const style = getComputedStyle(el);
+    return style.visibility !== 'hidden' && style.display !== 'none' && style.opacity !== '0';
+  });
+
+  // How many times each control shape appears. A signature is the tag and its
+  // classes, which is what makes one row of a list look like every other row.
+  const signatures = new Map();
+  const signatureOf = (el) => `${el.tagName}.${typeof el.className === 'string' ? el.className.trim() : ''}`;
+  for (const el of candidates) {
+    const s = signatureOf(el);
+    signatures.set(s, (signatures.get(s) || 0) + 1);
+  }
+
+  const boxes = candidates.map((el) => ({ el, rect: el.getBoundingClientRect() }));
+
+  for (const { el, rect } of boxes) {
+    const min = Math.min(rect.width, rect.height);
+
+    // Inline links inside running text are exempt, and deliberately so: WCAG
+    // 2.2 exempts them because enlarging a word inside a sentence would break
+    // the sentence, and the same word is reachable by keyboard and by the
+    // browser's own link controls. Only for a link whose parent really is a
+    // run of text longer than the link itself.
+    const parent = el.parentElement;
+    const inSentence = el.tagName === 'A' && parent
+      && /^(P|LI|TD|SPAN|DIV|H1|H2|H3|H4|H5|H6)$/.test(parent.tagName)
+      && (parent.textContent || '').trim().length > (el.textContent || '').trim().length + 12;
+    if (inSentence) continue;
+
+    // A checkbox inside its own label is as large as the label, because
+    // pressing the words activates it. Measuring the 18px box and calling it
+    // too small describes markup rather than the target, and the fix it asks
+    // for, a giant checkbox beside its text, is worse than what is there.
+    const label = el.closest('label');
+    const effective = label && (el.type === 'checkbox' || el.type === 'radio')
+      ? (() => { const lr = label.getBoundingClientRect(); return Math.min(lr.width, lr.height); })()
+      : min;
+
+    const key = `${describe(el)}@${round(rect.width)}x${round(rect.height)}`;
+
+    // Tier one. Under 24 and crowded, which is the combination the rule is
+    // about.
+    if (effective < 24) {
+      const cx = rect.left + rect.width / 2;
+      const cy = rect.top + rect.height / 2;
+      const crowded = boxes.some(({ el: other, rect: o }) => {
+        if (other === el || el.contains(other) || other.contains(el)) return false;
+        // Closest point of the other target to this one's centre, against the
+        // 12px radius of a 24px circle.
+        const dx = Math.max(o.left - cx, 0, cx - o.right);
+        const dy = Math.max(o.top - cy, 0, cy - o.bottom);
+        return Math.hypot(dx, dy) < 12;
+      });
+      if (crowded && !seenTargets.has(`wcag:${key}`)) {
+        seenTargets.add(`wcag:${key}`);
+        targetsBelowWcag.push(key);
+      }
+      continue;
+    }
+
+    // Tier two.
+    if (effective >= touchFloor) continue;
+    const isShell = Boolean(el.closest('.site-header, .primary-nav, .pagination, app-search-form, .chain-menu'));
+    const isRepeated = (signatures.get(signatureOf(el)) || 0) >= 3;
+    if (!isShell && !isRepeated) continue;
+    if (seenTargets.has(`platform:${key}`)) continue;
+    seenTargets.add(`platform:${key}`);
+    targetsBelowPlatform.push(`${key}${isShell ? ' (shell)' : ' (repeated)'}`);
+  }
+
+  // --- What the fixed layers cover ----------------------------------------
+  const bar = document.querySelector('.primary-nav');
+  const barRect = bar ? bar.getBoundingClientRect() : null;
+  const barIsFixed = bar ? getComputedStyle(bar).position === 'fixed' : false;
+  const header = document.querySelector('.site-header');
+  const headerRect = header ? header.getBoundingClientRect() : null;
+
+  // The last thing on the page has to be reachable. Scroll to the bottom and
+  // ask whether the final piece of real content is above the bar or behind it.
+  // This is the check that "padding-bottom: 68px" was silently failing on a
+  // phone with a home indicator, where the bar is taller than the number.
+  window.scrollTo(0, document.body.scrollHeight);
+  const atBottom = { hidden: [], barTop: barIsFixed && barRect ? round(barRect.top) : null };
+  if (barIsFixed && barRect) {
+    const candidates = document.querySelectorAll('main a[href], main button, main td, main p, main h2, main h3');
+    for (const el of candidates) {
+      const rect = el.getBoundingClientRect();
+      if (rect.height === 0 || rect.width === 0) continue;
+      if (rect.top >= window.innerHeight || rect.bottom <= 0) continue;
+      // More than a hairline of it under the bar. A one-pixel overlap is a
+      // rounding artefact, not content nobody can read.
+      if (rect.bottom > barRect.top + 2 && rect.top < barRect.top) {
+        atBottom.hidden.push(`${describe(el)} runs ${round(rect.bottom - barRect.top)}px under the bar`);
+        if (atBottom.hidden.length >= 6) break;
+      }
+    }
+  }
+  window.scrollTo(0, 0);
+
+  // --- Safe areas ----------------------------------------------------------
+  //
+  // Read as computed padding rather than as the presence of an env() in the
+  // stylesheet. A rule that mentions env() and is then overridden by a later
+  // one still mentions env(); what matters is whether the painted element
+  // actually reserved the room.
+  const insets = {
+    top: getComputedStyle(doc).getPropertyValue('--u-safe-top').trim(),
+    bottom: getComputedStyle(doc).getPropertyValue('--u-safe-bottom').trim(),
+    left: getComputedStyle(doc).getPropertyValue('--u-safe-left').trim(),
+    right: getComputedStyle(doc).getPropertyValue('--u-safe-right').trim(),
+  };
+  const chrome = {
+    headerPadTop: header ? round(parseFloat(getComputedStyle(header).paddingTop)) : null,
+    barPadBottom: bar ? round(parseFloat(getComputedStyle(bar).paddingBottom)) : null,
+    barPadLeft: bar ? round(parseFloat(getComputedStyle(bar).paddingLeft)) : null,
+    barPadRight: bar ? round(parseFloat(getComputedStyle(bar).paddingRight)) : null,
+    headerBottom: headerRect ? round(headerRect.bottom) : null,
+  };
+
+  // --- Open surfaces -------------------------------------------------------
+  //
+  // A menu that is taller than the window is a menu whose last option cannot
+  // be chosen, because a positioned surface does not scroll with the page.
+  const overflowingSurfaces = [];
+  for (const el of document.querySelectorAll('.dropdown-menu.show, .dropdown-menu[style*="transform"], [role=dialog], [role=listbox]')) {
+    const rect = el.getBoundingClientRect();
+    if (rect.height === 0) continue;
+    const style = getComputedStyle(el);
+    const scrolls = style.overflowY === 'auto' || style.overflowY === 'scroll';
+    if (rect.height > window.innerHeight && !scrolls) {
+      overflowingSurfaces.push(`${describe(el)} is ${round(rect.height)}px tall in a ${window.innerHeight}px window and does not scroll`);
+    }
+    if (rect.bottom > window.innerHeight + 1 && !scrolls) {
+      overflowingSurfaces.push(`${describe(el)} ends ${round(rect.bottom - window.innerHeight)}px below the window`);
+    }
+    if (rect.right > viewportWidth + 1 || rect.left < -1) {
+      overflowingSurfaces.push(`${describe(el)} runs outside the window sideways`);
+    }
+  }
+
+  // --- The bottom bar's own state -----------------------------------------
+  const navList = document.querySelector('.nav-list');
+  const nav = navList
+    ? {
+        scrolls: navList.scrollWidth - navList.clientWidth > 1,
+        scrollLeft: round(navList.scrollLeft),
+        // Where the current destination sits inside the scroller. A bar
+        // scrolled to its left end while the active destination is off the
+        // right edge is a bar that disagrees with the page about where the
+        // visitor is.
+        activeVisible: (() => {
+          const active = navList.querySelector('.nav-item.active');
+          if (!active) return null;
+          const a = active.getBoundingClientRect();
+          const l = navList.getBoundingClientRect();
+          return a.left >= l.left - 1 && a.right <= l.right + 1;
+        })(),
+        hasActive: Boolean(navList.querySelector('.nav-item.active')),
+        // The scroll affordance. Painted as background layers rather than as
+        // an element, so it is read off the computed style.
+        affordance: getComputedStyle(navList).backgroundImage !== 'none',
+      }
+    : null;
+
+  return {
+    overflowBy, viewportWidth, culprits, scrollers, smallFields,
+    targetsBelowWcag, targetsBelowPlatform,
+    atBottom, insets, chrome, overflowingSurfaces, nav,
+    innerHeight: window.innerHeight,
+    docHeight: document.body.scrollHeight,
+  };
+}
+
+/**
+ * Where the focus ring ends up.
+ *
+ * Run separately from the snapshot above because it has to move focus, and
+ * moving focus changes the page. Tabs forward through the document and reports
+ * any control that comes to rest underneath one of the two fixed layers.
+ * WCAG 2.2 calls this focus-obscured; in use it is worse than the rule sounds,
+ * because the visitor has no way to tell that anything happened at all.
+ */
+async function focusWalk(page, steps) {
+  return page.evaluate(async (limit) => {
+    const round = (n) => Math.round(n * 100) / 100;
+    const header = document.querySelector('.site-header');
+    const bar = document.querySelector('.primary-nav');
+    const barFixed = bar && getComputedStyle(bar).position === 'fixed';
+    const headerSticky = header && ['sticky', 'fixed'].includes(getComputedStyle(header).position);
+    const hidden = [];
+    const focusables = Array.from(
+      document.querySelectorAll('a[href], button:not([disabled]), input:not([disabled]):not([type=hidden]), select, textarea, [tabindex]:not([tabindex="-1"])'),
+    ).filter((el) => {
+      const r = el.getBoundingClientRect();
+      if (r.width === 0 || r.height === 0) return false;
+      // A control inside the header is not obscured by the header, and a
+      // destination inside the bottom bar is not obscured by the bottom bar.
+      // Measuring them against the layer they are part of reported the search
+      // field as hidden behind the search field's own header, which is both
+      // false and loud enough to bury the real findings underneath it.
+      if (header && header.contains(el)) return false;
+      if (bar && bar.contains(el)) return false;
+      return true;
+    }).slice(0, limit);
+
+    for (const el of focusables) {
+      el.focus({ preventScroll: false });
+      if (document.activeElement !== el) continue;
+      // Give the browser its own scroll-into-view a frame to happen, which is
+      // the behaviour scroll-padding modifies and therefore the behaviour
+      // being tested.
+      await new Promise((r) => requestAnimationFrame(() => requestAnimationFrame(r)));
+      const rect = el.getBoundingClientRect();
+      if (rect.height === 0) continue;
+      const name = `${el.tagName.toLowerCase()}${el.id ? `#${el.id}` : ''}`;
+      const headerBottom = headerSticky ? header.getBoundingClientRect().bottom : 0;
+      const barTop = barFixed ? bar.getBoundingClientRect().top : window.innerHeight;
+      // The room a focused thing can be scrolled into. An element taller than
+      // this cannot avoid touching a layer no matter where it is scrolled to,
+      // and WCAG 2.2 AA asks that the focused element not be entirely hidden,
+      // not that it never touch anything. Failing a tall panel for overlapping
+      // by fifty pixels describes arithmetic rather than a problem, and it
+      // would bury the case the rule is about: a small control resting wholly
+      // behind the bar, which is what this found on every phone width.
+      const room = barTop - headerBottom;
+      const fits = rect.height <= room;
+
+      if (barFixed) {
+        const b = bar.getBoundingClientRect();
+        const entirelyBehind = rect.top >= b.top - 2;
+        if (entirelyBehind || (fits && rect.bottom > b.top + 2 && rect.top < b.bottom)) {
+          hidden.push(`${name} rests ${entirelyBehind ? 'entirely behind' : `under`} the bottom bar by ${round(rect.bottom - b.top)}px`);
+          continue;
+        }
+      }
+      if (headerSticky) {
+        const h = header.getBoundingClientRect();
+        const entirelyBehind = rect.bottom <= h.bottom + 2;
+        if (entirelyBehind || (fits && rect.top < h.bottom - 2 && rect.bottom > h.top)) {
+          hidden.push(`${name} rests ${entirelyBehind ? 'entirely behind' : 'under'} the header by ${round(h.bottom - rect.top)}px`);
+        }
+      }
+    }
+    return hidden.slice(0, 8);
+  }, steps);
+}
+
+async function run() {
+  mkdirSync(OUT, { recursive: true });
+
+  const routes = ROUTES.filter((r) => MOBILE_ROUTE_IDS.includes(r.id));
+  if (routes.length !== MOBILE_ROUTE_IDS.length) {
+    const missing = MOBILE_ROUTE_IDS.filter((id) => !routes.some((r) => r.id === id));
+    throw new Error(`these route ids are not in the shared route list: ${missing.join(', ')}`);
+  }
+  const viewports = args.viewports
+    ? VIEWPORTS.filter((v) => String(args.viewports).split(',').includes(v.id))
+    : VIEWPORTS;
+  if (!viewports.length) throw new Error('no viewport matched --viewports');
+
+  // The same guard the matrix uses. A run against a blank page or against
+  // something else that happens to be on the port reports no failures at all,
+  // which reads exactly like success.
+  const probe = await fetch(BASE, { redirect: 'follow' }).catch((e) => {
+    throw new Error(`cannot reach ${BASE}: ${e.message}`);
+  });
+  if (!probe.ok) throw new Error(`${BASE} answered ${probe.status}`);
+  const html = await probe.text();
+  if (!/<title>[^<]*Universe Explorer/i.test(html)) {
+    throw new Error(`${BASE} is not serving Universe Explorer`);
+  }
+  const build = (html.match(/main\.([a-f0-9]{8,})\.js/) || [, 'unknown'])[1];
+
+  // The viewport meta is a single line that decides whether the safe-area rules
+  // in the stylesheet can do anything at all, and whether the visitor is
+  // allowed to zoom. Both have been wrong here before, and neither shows up in
+  // a screenshot.
+  const meta = (html.match(/<meta[^>]+name=["']viewport["'][^>]*>/i) || [''])[0];
+  if (!/viewport-fit\s*=\s*cover/i.test(meta)) {
+    fail('viewport', 'the viewport meta does not ask for viewport-fit=cover, so safe-area insets are all zero and the shell cannot reach the edges of the screen');
+  } else {
+    pass('viewport', 'viewport-fit=cover is asked for');
+  }
+  if (/user-scalable\s*=\s*no|maximum-scale\s*=\s*(1|1\.0)\b/i.test(meta)) {
+    fail('viewport', 'the viewport meta disables zoom, which takes the page away from everyone who enlarges it to read');
+  } else {
+    pass('viewport', 'zoom is not restricted');
+  }
+
+  const browser = await BROWSER.launch({
+    args: BROWSER === chromium
+      ? ['--use-gl=angle', '--use-angle=swiftshader', '--enable-unsafe-swiftshader']
+      : [],
+  });
+
+  const report = [];
+
+  for (const viewport of viewports) {
+    const context = await browser.newContext({
+      viewport: { width: viewport.width, height: viewport.height },
+      deviceScaleFactor: 1,
+      // Emulate the device, not just its size.
+      //
+      // `hasTouch` alone delivers touch events and leaves the CSS pointer
+      // reporting `fine`, so every `@media (pointer: coarse)` rule in the
+      // product went unexercised here while appearing to be covered. That is
+      // the worst kind of gap: a run that is green about rules it never ran.
+      // `isMobile` is what makes Chromium report a coarse pointer and no hover,
+      // which is the environment those rules are written for.
+      hasTouch: viewport.compact,
+      isMobile: viewport.compact,
+      ...(viewport.compact ? { userAgent: devices['Pixel 7']?.userAgent } : {}),
+    });
+    await installFixtures(context, 'populated');
+
+    // A cutout the browser cannot supply.
+    //
+    // Headless Chromium has no notch, so env(safe-area-inset-*) is zero
+    // everywhere and every safe-area rule in the product is exercised with the
+    // one value that makes it a no-op. Overriding the four custom properties
+    // gives the layout real numbers to reserve room for, which is the thing
+    // worth testing: whether the bar moves clear of a home indicator, not
+    // whether env() parses.
+    if (viewport.insets) {
+      const { top, bottom, left, right } = viewport.insets;
+      await context.addInitScript(([t, b, l, r]) => {
+        const style = document.createElement('style');
+        style.textContent = `:root{--u-safe-top:${t}px;--u-safe-bottom:${b}px;--u-safe-left:${l}px;--u-safe-right:${r}px;}`;
+        const attach = () => document.head?.appendChild(style);
+        if (document.head) attach();
+        else document.addEventListener('DOMContentLoaded', attach, { once: true });
+      }, [top, bottom, left, right]);
+    }
+
+    for (const route of routes) {
+      const page = await context.newPage();
+      const scope = `${route.id}@${viewport.id}`;
+      try {
+        await page.goto(BASE + route.path, { waitUntil: 'domcontentloaded', timeout: 45_000 });
+        await page.waitForTimeout(2_400);
+
+        if (route.open) {
+          const control = page.locator(route.open).first();
+          if (await control.count()) {
+            await control.click();
+            await page.waitForTimeout(400);
+          }
+        }
+
+        const m = await page.evaluate(mobileProbe, { touchFloor: TOUCH_FLOOR, fieldFloor: FIELD_FLOOR });
+        report.push({ route: route.id, viewport: viewport.id, ...m });
+
+        // --- overflow ---
+        if (m.overflowBy > 0) {
+          fail(scope, `the page scrolls sideways by ${m.overflowBy}px at ${m.viewportWidth}px`
+            + (m.culprits.length ? ` (${m.culprits.join('; ')})` : ''));
+        }
+        for (const s of m.scrollers) {
+          if (!s.declared) {
+            fail(scope, `${s.el} scrolls sideways without saying so, so whatever is past its edge is present and unreachable`);
+          } else if (!s.keyboardReachable) {
+            fail(scope, `${s.el} scrolls sideways and holds nothing focusable, so a keyboard cannot reach past its edge`);
+          }
+        }
+
+        // --- fields ---
+        //
+        // Only where a software keyboard is what opens. The desktop control
+        // window is here to prove the mobile work did not regress the wide
+        // layout, and a 14px field on a desktop with a mouse zooms nothing.
+        if (viewport.compact) {
+          for (const f of m.smallFields) {
+            fail(scope, `${f}, under the ${FIELD_FLOOR}px at which iOS Safari zooms the page in on focus and leaves it zoomed`);
+          }
+        }
+
+        // --- targets ---
+        if (viewport.compact && m.targetsBelowWcag.length) {
+          fail(scope, `${m.targetsBelowWcag.length} targets under 24px with another target inside the 24px circle around them, which is a WCAG 2.2 target-size failure: ${m.targetsBelowWcag.slice(0, 8).join(', ')}`);
+        }
+        if (viewport.compact && m.targetsBelowPlatform.length) {
+          fail(scope, `${m.targetsBelowPlatform.length} shell or repeated controls under ${TOUCH_FLOOR}px: ${m.targetsBelowPlatform.slice(0, 8).join(', ')}`);
+        }
+
+        // --- fixed layers ---
+        for (const h of m.atBottom.hidden) {
+          fail(scope, `at the bottom of the page, ${h}`);
+        }
+
+        // --- open surfaces ---
+        for (const s of m.overflowingSurfaces) {
+          fail(scope, s);
+        }
+
+        // --- the bar ---
+        if (viewport.compact && m.nav) {
+          if (m.nav.scrolls && !m.nav.affordance) {
+            fail(scope, 'the bottom bar scrolls sideways with nothing to say that it does');
+          }
+          if (m.nav.hasActive && m.nav.activeVisible === false) {
+            fail(scope, 'the current destination is scrolled out of sight in the bottom bar, so the bar disagrees with the page about where the visitor is');
+          }
+        }
+
+        // --- safe areas ---
+        if (viewport.insets) {
+          const { top, bottom, left, right } = viewport.insets;
+          if (bottom > 0 && m.chrome.barPadBottom !== null && m.chrome.barPadBottom < bottom) {
+            fail(scope, `the bottom bar reserves ${m.chrome.barPadBottom}px for a ${bottom}px home indicator, so its targets are in the gesture area`);
+          }
+          if (top > 0 && m.chrome.headerPadTop !== null && m.chrome.headerPadTop < top) {
+            fail(scope, `the header reserves ${m.chrome.headerPadTop}px for a ${top}px cutout, so it renders underneath it`);
+          }
+          const side = Math.max(left, right);
+          if (side > 0 && m.chrome.barPadLeft !== null && Math.max(m.chrome.barPadLeft, m.chrome.barPadRight) < side) {
+            fail(scope, `the bottom bar reserves ${m.chrome.barPadLeft}px at the sides for a ${side}px cutout, so a destination sits under it in landscape`);
+          }
+        }
+
+        // --- focus, on the shell routes only ---
+        //
+        // Walking every focusable control on a table page is hundreds of
+        // focus moves and a frame apiece. The fault it looks for belongs to
+        // the shell rather than to any one page, so it is measured on the
+        // routes where the shell is all there is, and on the tallest and
+        // shortest windows where it actually bites.
+        if (viewport.compact && (route.id === 'home' || route.id === 'tx')) {
+          const obscured = await focusWalk(page, 60);
+          for (const o of obscured) fail(scope, `${o}, which is a WCAG 2.2 focus-obscured failure`);
+        }
+
+        // --- continuity across a rotation ---
+        //
+        // Rotating a phone must not be a navigation. This turns the window on
+        // its side, then back, and checks that the route, the query string and
+        // the reading position all survived. A shell that rebuilds itself on
+        // resize loses all three, and it is invisible in a screenshot because
+        // every individual frame looks correct.
+        if (viewport.compact && route.id === 'tx') {
+          await page.evaluate(() => window.scrollTo(0, Math.min(600, document.body.scrollHeight)));
+          await page.waitForTimeout(250);
+          const before = await page.evaluate(() => ({ url: location.pathname + location.search, y: window.scrollY }));
+          await page.setViewportSize({ width: viewport.height, height: viewport.width });
+          await page.waitForTimeout(500);
+          await page.setViewportSize({ width: viewport.width, height: viewport.height });
+          await page.waitForTimeout(500);
+          const after = await page.evaluate(() => ({ url: location.pathname + location.search, y: window.scrollY }));
+          if (before.url !== after.url) {
+            fail(scope, `rotating the device navigated from ${before.url} to ${after.url}`);
+          } else if (Math.abs(before.y - after.y) > Math.max(200, viewport.height * 0.5)) {
+            fail(scope, `rotating the device moved the reading position from ${before.y} to ${after.y}`);
+          } else {
+            pass(scope, 'a rotation and a rotation back keep the route and the reading position');
+          }
+        }
+      } catch (error) {
+        if (/ERR_CONNECTION_REFUSED|ECONNREFUSED/.test(String(error))) {
+          await browser.close().catch(() => undefined);
+          console.error(`\nThe server at ${BASE} stopped answering at ${scope}. Nothing after that point was measured, so this run proves nothing.`);
+          process.exit(1);
+        }
+        fail(scope, `could not be measured: ${String(error).slice(0, 200)}`);
+      } finally {
+        await page.close().catch(() => undefined);
+      }
+    }
+    await context.close();
+  }
+
+  await browser.close();
+
+  writeFileSync(join(OUT, 'mobile-report.json'), JSON.stringify({ base: BASE, build, report, findings, passes }, null, 2));
+
+  console.log(`\nMobile gate, build ${build}`);
+  console.log(`${routes.length} routes across ${viewports.length} window sizes, ${report.length} measured pages\n`);
+  if (passes.length) {
+    console.log(`-- ${passes.length} checks with something to say that passed --`);
+    for (const p of passes.slice(0, 12)) console.log(`  ${p}`);
+    console.log('');
+  }
+  if (findings.length) {
+    console.log(`-- ${findings.length} failures --`);
+    for (const f of findings) console.log(`  ${f}`);
+    console.log('');
+    process.exit(1);
+  }
+  console.log('No mobile failures.\n');
+}
+
+if (process.argv[1] && resolve(process.argv[1]) === resolve(fileURLToPath(import.meta.url))) {
+  run().catch((e) => { console.error(e); process.exit(1); });
+}
+
+export { VIEWPORTS, TOUCH_FLOOR, FIELD_FLOOR, mobileProbe };

From 63d18920d3cc045960898ea8d8f7461c66d0b53d Mon Sep 17 00:00:00 2001
From: Bitcoin Universe <bitcoinuniversecorp@gmail.com>
Date: Sat, 29 Aug 2026 20:16:13 +0000
Subject: [PATCH 02/11] Run the mobile gate beside the matrix, and write the
 model down

The visual matrix job is at 60 minutes of its 100 minute cap and the deep
pass is 78 percent of it. Adding seven window sizes, device emulation, a
simulated cutout and a rotation to that job is how a gate stops
finishing, which is the fault the broad and deep split exists to
prevent. So the mobile gate is a job of its own on a second runner. The
workflow's wall clock does not move: it takes about nine minutes, six of
them its own build, on hardware that would otherwise be idle for the
hour the matrix runs.

It builds its own copy rather than taking an artifact from the job
beside it. That costs one production build and buys two things worth
more: neither gate can make the other fail or wait, and this one can be
read and run on its own.

The design system now carries the adaptive model rather than leaving it
to be rediscovered from the stylesheets: the three header shapes and the
one shell breakpoint, where each safe-area inset is spent and why they
are not on the body, which viewport unit means what and why the page
column is deliberately lvh, the two touch-target floors and which
controls each applies to, the 16px field rule and what it is for, the
two conditions under which a region may scroll sideways, and the window
set the gate walks with the reason each size is in it.

Also the real-device list, because emulation is the gate and devices are
the proof, and the two are not the same claim.
---
 .github/workflows/universe-ci.yml             |  76 ++++++++
 docs/product/DESIGN-SYSTEM.md                 | 182 +++++++++++++++++-
 .../master-page/master-page.component.scss    |  36 +++-
 .../app/universe/universe-viewport.service.ts |   2 +-
 4 files changed, 289 insertions(+), 7 deletions(-)

diff --git a/.github/workflows/universe-ci.yml b/.github/workflows/universe-ci.yml
index 27bdf38f0b3..a17c04ff1e1 100644
--- a/.github/workflows/universe-ci.yml
+++ b/.github/workflows/universe-ci.yml
@@ -275,3 +275,79 @@ jobs:
             scripts/universe/visual-qa/artifacts-broad
             scripts/universe/visual-qa/artifacts-chain-states
           retention-days: 30
+
+  # The mobile gate runs beside the visual matrix rather than inside it.
+  #
+  # The matrix job is already 60 minutes of its 100 minute cap, and 78 percent
+  # of that is the deep pass. Adding widths, orientations and device emulation
+  # to it is how a gate stops finishing, which is the fault the split between
+  # the broad and deep passes exists to prevent. So this is a job of its own on
+  # a second runner, and the wall clock of the workflow does not move: it
+  # finishes in roughly a fifth of the time the matrix takes, on hardware that
+  # would otherwise be idle while the matrix runs.
+  #
+  # It builds its own copy rather than taking an artifact from the job beside
+  # it. That costs one extra production build and buys two things worth more
+  # than it: the two gates cannot make each other fail or wait, and this one
+  # can be read, run and debugged on its own.
+  #
+  # Measured at about nine minutes, of which six are the build.
+  mobile:
+    name: Mobile and adaptive layout
+    runs-on: [self-hosted, linux-ultra]
+    timeout-minutes: 45
+    steps:
+      - name: Checkout
+        uses: actions/checkout@11d5960a326750d5838078e36cf38b85af677262 # v4
+
+      - name: Setup Node
+        uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4
+        with:
+          node-version: '24.19.0'
+          cache: npm
+          cache-dependency-path: frontend/package-lock.json
+
+      - name: Install
+        working-directory: frontend
+        run: npm ci
+
+      - name: Production build
+        working-directory: frontend
+        run: npm run build:universe
+
+      - name: Install the visual QA harness
+        working-directory: scripts/universe/visual-qa
+        run: npm ci
+
+      # Same reasoning as the matrix job: a fixed port once measured another
+      # job's build, so each run takes a free one and refuses to continue
+      # unless the process answering is the one it started.
+      - name: Serve the built frontend
+        run: |
+          GATEWAY_PORT=$(node -e "const s=require('net').createServer();s.listen(0,'127.0.0.1',()=>{console.log(s.address().port);s.close()})")
+          echo "GATEWAY_PORT=$GATEWAY_PORT" >> "$GITHUB_ENV"
+          UNIVERSE_GATEWAY_PORT=$GATEWAY_PORT UNIVERSE_GATEWAY_ROOT=frontend/dist/mempool/browser node scripts/universe/gateway.mjs &
+          GATEWAY_PID=$!
+          for i in $(seq 1 30); do
+            curl -fsS -o /dev/null "http://127.0.0.1:$GATEWAY_PORT/" && break
+            sleep 1
+          done
+          kill -0 "$GATEWAY_PID"
+          curl -fsS "http://127.0.0.1:$GATEWAY_PORT/__gateway/health"
+
+      # Eleven routes across seven window sizes, with a coarse pointer, a
+      # software keyboard, a display cutout and a rotation. Seventy-seven page
+      # loads, and every one of them is measured about twelve different ways,
+      # which is why this is cheap: the assertions are free and only the page
+      # loads cost anything.
+      - name: Every window a phone can be, measured with a thumb
+        working-directory: scripts/universe/visual-qa
+        run: node mobile-check.mjs --base=http://127.0.0.1:$GATEWAY_PORT --out=./artifacts-mobile
+
+      - name: Keep the mobile report
+        if: always()
+        uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4
+        with:
+          name: universe-mobile-qa
+          path: scripts/universe/visual-qa/artifacts-mobile
+          retention-days: 30
diff --git a/docs/product/DESIGN-SYSTEM.md b/docs/product/DESIGN-SYSTEM.md
index 90e21d8211a..9de0a5e3240 100644
--- a/docs/product/DESIGN-SYSTEM.md
+++ b/docs/product/DESIGN-SYSTEM.md
@@ -403,13 +403,191 @@ WCAG 2.2 AA is the floor, checked automatically rather than remembered.
 - No critical route overflows horizontally at 320px.
 - A region that scrolls with a mouse takes focus and shows it, so a wide table
   is reachable from a keyboard. Three chain routes shipped without that.
-- Touch targets clear the minimum on the mobile navigation bar.
+- Touch targets clear 24 by 24 everywhere and 44 by 44 in the shell, in
+  pagination, and anywhere a control repeats. See The adaptive window.
+- Nothing the browser scrolls to lands under the header or the bottom bar.
+  Each header shape states its own scroll padding.
+- No field computes under 16px, so no phone zooms the page on focus.
+- Zoom is never restricted.
 
 `scripts/universe/visual-qa/capture.mjs` drives the whole route matrix across
 themes, viewports, and data states, answering every request including the
 WebSocket from fixtures so a difference between runs means the interface
 changed rather than the chain moving.
 
+## The adaptive window
+
+The layout responds to the window it is in, never to the device it believes it
+is on. There is no user-agent sniffing anywhere in the product, because the same
+phone is four different windows depending on its orientation, its browser
+chrome, whether it is sharing the screen and whether it is folded.
+
+### Widths
+
+| Range | Shape |
+|---|---|
+| under 600px | header wraps to two rows, search on its own beneath the brand and the pickers; bottom bar |
+| 600 to 991px | header on one row; bottom bar |
+| 992px and above | header and navigation on one row, navigation returns to the top |
+
+The one shell breakpoint is 992px. Everything else is fluid, wraps, or uses a
+minmax grid. New component rules should prefer a container query to a media
+query: a component that reads its own width keeps working when it is moved into
+a narrower column, and one that reads the viewport does not.
+
+### Heights
+
+Compact landscape, under 480px of height, is its own case and not an
+afterthought. A phone on its side has less room than any other window in the
+matrix, and both fixed layers eat into it. The header drops to 48px, the bottom
+bar puts each icon beside its label instead of above it, and the scroll padding
+comes down to match. No destination and no control is removed to buy the space.
+
+### The safe area
+
+`viewport-fit=cover` is set, so the page runs under the notch and the home
+indicator rather than sitting in a letterbox. That is only safe because
+everything that touches an edge reserves the inset:
+
+| Token | Where it is spent |
+|---|---|
+| `--u-safe-top` | the header's own top padding, so its background reaches under the status bar |
+| `--u-safe-bottom` | the bottom bar's padding, and everything reserving room for the bar |
+| `--u-safe-left`, `--u-safe-right` | the header row, the bottom bar, and the content column |
+
+Two rules go with them. Use them through `max()`, so a phone with no cutout
+keeps its ordinary padding rather than losing it to an inset of zero. And put
+them on the chrome and on the content column, never on `body`: padding the body
+pulls the header and the bar in from the edges and leaves a strip of page colour
+down the side of both.
+
+`--u-bottom-nav-space` is the bar's height plus the bottom inset. Anything
+clearing the bar reserves that, not a copied number. The reservation lives on
+the shared parent of the router outlet and the footer, because the footer is a
+sibling of `main` and a reservation inside `main` cleared the bar for every route
+and not for the footer.
+
+### Viewport units
+
+- `100lvh` for a floor that must not move. The page column uses it to keep the
+  footer below the fold: `dvh` there would reflow the column every time the
+  browser chrome collapsed, which is the shift the floor exists to prevent.
+- `100dvh` for a ceiling on a surface that must fit, such as a menu.
+- `100vh` is kept underneath both as the fallback for engines without them.
+- No layout depends on `100vh` alone.
+
+Neither unit knows about the software keyboard. On iOS the keyboard is painted
+over the page and every unit keeps reporting the full height, so
+`UniverseViewportService` publishes `--u-visual-viewport-height` from
+`visualViewport` where the browser has it. It is the only piece of adaptive
+behaviour in the product written in TypeScript, it is used only as a cap
+alongside a `dvh` value, and where it is absent the CSS fallback is the answer.
+
+### Touch targets
+
+Two floors, because there are two rules.
+
+- **24 by 24 CSS pixels** everywhere, which is WCAG 2.2 AA, with the standard
+  spacing exception: an undersized target passes when nothing else falls inside
+  the 24px circle around it. The exception is the substance of the rule, not a
+  loophole. What makes a small target unusable is hitting the wrong one.
+- **44 by 44** for anything in the application shell, in pagination, or repeated
+  three or more times identically. That is Apple's number; Android asks for 48,
+  and `--u-touch-target-comfortable` is there for controls that can afford it.
+
+Both are measured by `mobile-check.mjs` against what is painted, so a control
+shrunk by its container fails the same as one declared too small.
+
+Box-like controls take a `min-height` and a `min-width`. Text links in dense
+data take room on the block axis instead, and the row grows with them: pulling
+the row back to its old height with a negative margin makes every target overlap
+its neighbours, which is the fault the rule exists to prevent, reintroduced by
+the fix for it.
+
+### Form fields
+
+Every field a software keyboard opens computes at `--u-text-field`, which is
+16px. Below that, iOS Safari zooms the layout viewport in on focus and does not
+zoom back out. It is an engine threshold, not a preference. Never solve it with
+`maximum-scale` or `user-scalable=no`: taking zoom away breaks the page for
+everyone who enlarges it to read.
+
+### Horizontal scrolling
+
+The page never scrolls sideways, at any tested width. A region may, on two
+conditions: it says so, and a keyboard can reach past its edge.
+
+Saying so means a `data-scroll-region` attribute, a `role` and an accessible
+name, and a visible affordance. The block timeline is the one such region in the
+product, because blocks are a sequence and stacking them would destroy the view.
+The bottom bar is the other, and it uses the two-layer background technique for
+its affordance: opaque covers that scroll with the content sitting over static
+shadows, so a fade appears on exactly the side that has more and never when
+everything already fits.
+
+An edge shadow that a label can scroll under is held to the contrast floor like
+any other painted surface. `--u-nav-scroll-shadow` is 14 percent rather than the
+general 28 percent for that reason, and the number came from the measurement.
+
+## The mobile gate
+
+`scripts/universe/visual-qa/mobile-check.mjs`, run by the `mobile` job in CI
+beside the visual matrix rather than inside it.
+
+It is built the opposite way round from the matrix: few page loads and many
+assertions on each, because a page load costs seconds and an assertion costs a
+millisecond. Eleven routes across seven window sizes is seventy-seven pages and
+roughly nine minutes, against the matrix's sixty.
+
+| Window | Why it is in the set |
+|---|---|
+| 320 x 568 | narrowest width still in use; every reflow rule is written against it |
+| 360 x 740 | the most common Android width |
+| 390 x 844 | the most common iPhone width, and the one carrying a simulated cutout |
+| 430 x 932 | the widest phone |
+| 844 x 390 | a phone on its side: compact width, almost no height |
+| 768 x 1024 | tablet, where the shell is still in its compact form |
+| 1024 x 900 | the desktop control: a mobile fix that regresses the wide layout fails here |
+
+Compact windows are run with `isMobile`, which is what makes Chromium report a
+coarse pointer. `hasTouch` alone does not, and without it every
+`@media (pointer: coarse)` rule in the product goes unexercised while appearing
+to be covered.
+
+The cutout is injected by overriding the four safe-area properties, because
+headless Chromium has no notch and `env()` is zero everywhere. What is being
+tested is whether the layout reserves room when the numbers are not zero.
+
+What it fails a run for:
+
+- the page scrolling sideways, naming the outermost elements responsible
+- a region scrolling sideways without declaring it, or with nothing focusable in it
+- a field computing under 16px
+- a target under either floor
+- content or focus resting behind the header or the bottom bar
+- the header or bar not reserving a simulated inset
+- a menu taller than the window that does not scroll
+- the bottom bar scrolling with no affordance, or the current destination scrolled out of sight
+- a rotation and a rotation back changing the route or losing the reading position
+
+Run it against any served build:
+
+```
+node scripts/universe/visual-qa/mobile-check.mjs --base=http://127.0.0.1:8080
+```
+
+`--routes` and `--viewports` narrow it while working on one thing. Route ids
+come from the same list the visual matrix walks, so the two gates cannot
+disagree about what the product is.
+
+### Real devices
+
+Emulation is the gate; devices are the proof. Before a mobile change is
+promoted, check on current Safari on iPhone and iPad, Chrome on Android, Samsung
+Internet and Chrome on iPhone: the header and search, a chain switch, a search
+with the software keyboard open, a transaction, a table, the bottom bar, a
+rotation, back navigation, and a live update arriving.
+
 ## Where things live
 
 | Path | What |
@@ -427,6 +605,8 @@ changed rather than the chain moving.
 | `scripts/universe/check-branding.mjs` | the upstream mark gate |
 | `scripts/universe/visual-qa/capture.mjs` | the route matrix: themes, widths, and data states |
 | `scripts/universe/visual-qa/modes-check.mjs` | forced colours and 200 percent zoom |
+| `scripts/universe/visual-qa/mobile-check.mjs` | the mobile gate: windows, insets, targets, fixed layers, rotation |
+| `frontend/src/app/universe/universe-viewport.service.ts` | the visual viewport, published as CSS, for the software keyboard |
 | `scripts/universe/visual-qa/fixtures.mjs` | the data every reviewed route renders from |
 
 ## A note on the fixtures
diff --git a/frontend/src/app/components/master-page/master-page.component.scss b/frontend/src/app/components/master-page/master-page.component.scss
index 11cc1ca4835..15cb29fa70a 100644
--- a/frontend/src/app/components/master-page/master-page.component.scss
+++ b/frontend/src/app/components/master-page/master-page.component.scss
@@ -307,15 +307,41 @@
     // through rotation, a fold, a split-screen resize and a chain switch that
     // changes how many destinations there are.
     background-image:
-      linear-gradient(to right, var(--u-surface-raised) 40%, rgba(0, 0, 0, 0)),
-      linear-gradient(to left, var(--u-surface-raised) 40%, rgba(0, 0, 0, 0)),
-      linear-gradient(to right, var(--u-shadow-color), rgba(0, 0, 0, 0)),
-      linear-gradient(to left, var(--u-shadow-color), rgba(0, 0, 0, 0));
+      linear-gradient(to right, var(--u-surface-raised) 60%, rgba(0, 0, 0, 0)),
+      linear-gradient(to left, var(--u-surface-raised) 60%, rgba(0, 0, 0, 0)),
+      linear-gradient(to right, var(--u-nav-scroll-shadow), rgba(0, 0, 0, 0)),
+      linear-gradient(to left, var(--u-nav-scroll-shadow), rgba(0, 0, 0, 0));
     background-position: left center, right center, left center, right center;
     background-repeat: no-repeat;
-    background-size: 32px 100%, 32px 100%, 14px 100%, 14px 100%;
+    background-size: 28px 100%, 28px 100%, 12px 100%, 12px 100%;
     background-attachment: local, local, scroll, scroll;
 
+    // The shadow band gets padding of its own to sit in.
+    //
+    // Without this the first and last labels start flush against the edge, so
+    // at either end of the scroll one of them is read through the shadow. The
+    // measured contrast probe caught it: the active label dropped from its
+    // token colour on the bar to 3.29:1 over the blend, on fourteen routes. An
+    // affordance that makes a destination harder to read is not worth having,
+    // and the fix is not a fainter shadow, which trades one degree of the same
+    // fault for another. It is for the shadow to fall on nothing.
+    //
+    // 12px of padding for a 12px shadow, at both ends and in both scroll
+    // positions, since the bar rests at one end or the other.
+    padding-inline: 12px;
+
+    // The padding covers the bar at rest. Scrolling is the other half: a
+    // destination dragged past the edge passes under the shadow while it goes,
+    // and it has to stay readable on the way. So the shadow's own weight is
+    // set by that measurement rather than by how it looks.
+    //
+    // The general shadow token is 28 percent, which composites to rgb(194,
+    // 191, 196) over the light bar and takes the active label from 6.5:1 to
+    // 3.29:1, under AA. 14 percent composites to rgb(224, 222, 225) and holds
+    // it at 5.2:1. This is its own token rather than a value written inline so
+    // that check-palettes.mjs can see it and hold it to that.
+    --u-nav-scroll-shadow: rgba(36, 26, 43, 0.14);
+
     // Keeping the active destination off the very edge when it is scrolled to.
     scroll-padding-inline: var(--u-space-5);
   }
diff --git a/frontend/src/app/universe/universe-viewport.service.ts b/frontend/src/app/universe/universe-viewport.service.ts
index d3854ca3553..3e9a4a36cdc 100644
--- a/frontend/src/app/universe/universe-viewport.service.ts
+++ b/frontend/src/app/universe/universe-viewport.service.ts
@@ -82,7 +82,7 @@ export class UniverseViewportService implements OnDestroy {
       visual.addEventListener('resize', publish);
       visual.addEventListener('scroll', publish);
       publish();
-      this.stop = () => {
+      this.stop = (): void => {
         visual.removeEventListener('resize', publish);
         visual.removeEventListener('scroll', publish);
       };

From 7976ceaa2032897345f3c5962b6435a9c88105d9 Mon Sep 17 00:00:00 2001
From: Bitcoin Universe <bitcoinuniversecorp@gmail.com>
Date: Sat, 29 Aug 2026 20:27:49 +0000
Subject: [PATCH 03/11] The scroll shadow is a token, because its weight is a
 measurement

The bottom bar's edge fade was written inline in the component as
rgba(36, 26, 43, 0.14), which the colour gate rightly refused: interface
colour comes from a semantic token here, and a literal in a component is
a value nobody can find again.

It is --u-nav-scroll-shadow now, stated in both themes. The comment that
explains the number lives with it: 14 percent rather than the general
elevation token's 28, because a destination scrolled past the end of the
bar is read through this, and at 28 the active label composites to
rgb(194, 191, 196) and drops to 3.29:1. Dark states its own value rather
than inheriting, since darkening a dark bar moves its light label the
safe way and the two should not drift silently.

346 palette pairings still pass, and the three-theme contrast run at
375px reports zero failures.
---
 .../master-page/master-page.component.scss        | 14 +++++---------
 frontend/src/styles/_universe-tokens.scss         | 15 +++++++++++++++
 2 files changed, 20 insertions(+), 9 deletions(-)

diff --git a/frontend/src/app/components/master-page/master-page.component.scss b/frontend/src/app/components/master-page/master-page.component.scss
index 15cb29fa70a..d807f7b69ea 100644
--- a/frontend/src/app/components/master-page/master-page.component.scss
+++ b/frontend/src/app/components/master-page/master-page.component.scss
@@ -332,15 +332,11 @@
 
     // The padding covers the bar at rest. Scrolling is the other half: a
     // destination dragged past the edge passes under the shadow while it goes,
-    // and it has to stay readable on the way. So the shadow's own weight is
-    // set by that measurement rather than by how it looks.
-    //
-    // The general shadow token is 28 percent, which composites to rgb(194,
-    // 191, 196) over the light bar and takes the active label from 6.5:1 to
-    // 3.29:1, under AA. 14 percent composites to rgb(224, 222, 225) and holds
-    // it at 5.2:1. This is its own token rather than a value written inline so
-    // that check-palettes.mjs can see it and hold it to that.
-    --u-nav-scroll-shadow: rgba(36, 26, 43, 0.14);
+    // and it has to stay readable on the way. That is why the shadow layers
+    // above take --u-nav-scroll-shadow and not the general elevation token,
+    // which is twice its weight and takes the active label under AA. The
+    // measurement behind the number is with the token, in the token file,
+    // where both themes state it and the palette gate can see it.
 
     // Keeping the active destination off the very edge when it is scrolled to.
     scroll-padding-inline: var(--u-space-5);
diff --git a/frontend/src/styles/_universe-tokens.scss b/frontend/src/styles/_universe-tokens.scss
index a716d1d85a1..5f0b064e406 100644
--- a/frontend/src/styles/_universe-tokens.scss
+++ b/frontend/src/styles/_universe-tokens.scss
@@ -330,6 +330,16 @@
   // The shadow carries the plum cast of the page so a lifted card does not
   // drop a grey shadow onto a pink ground.
   --u-shadow-color: rgba(36, 26, 43, 0.28);
+  // The edge fade on a scroller that a label can pass under.
+  //
+  // Lighter than the general shadow, and the number is a measurement rather
+  // than a preference. The bottom navigation bar paints this at its ends to
+  // say that it scrolls, and a destination dragged past the end is read
+  // through it while it goes. At the general 28 percent this composites to
+  // rgb(194, 191, 196) under the active label and takes it from 6.5:1 to
+  // 3.29:1, under AA. At 14 percent it composites to rgb(224, 222, 225) and
+  // holds it at 5.2:1.
+  --u-nav-scroll-shadow: rgba(36, 26, 43, 0.14);
   --u-overlay-scrim: rgba(26, 16, 32, 0.55);
   --u-media-scrim: rgba(16, 7, 22, 0.62);
   --u-shadow-sm: 0 1px 2px rgba(36, 26, 43, 0.07);
@@ -540,6 +550,11 @@
   --u-chart-zoom-track: #241a30;
 
   --u-shadow-color: rgba(0, 0, 0, 0.55);
+  // Darkening a dark bar raises the contrast of the light label on it rather
+  // than lowering it, so this can carry more weight here than in light and
+  // still be the safe direction. It is stated rather than inherited so the
+  // two themes cannot drift apart silently.
+  --u-nav-scroll-shadow: rgba(0, 0, 0, 0.4);
   --u-overlay-scrim: rgba(0, 0, 0, 0.66);
   --u-media-scrim: rgba(8, 4, 12, 0.7);
   --u-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);

From c49b4e3402236051dd94e598b458f0f88e8af609 Mon Sep 17 00:00:00 2001
From: Bitcoin Universe <bitcoinuniversecorp@gmail.com>
Date: Sat, 29 Aug 2026 20:33:33 +0000
Subject: [PATCH 04/11] Cover the three pieces of the shell that are not CSS

Almost all of the adaptive behaviour here is stylesheet, and the mobile
gate measures it in a real browser, which is the right place for it. Three
pieces are TypeScript, and those are cheap to test directly and expensive
to find in a browser.

UniverseViewportService, eight tests. The one that matters is that it
publishes nothing at all where visualViewport is absent, rather than
publishing a zero or the window height. Every rule that reads its
properties does so through a var() fallback to a dvh value, and a
fallback only applies when the property was never set: a well-meaning
default would silently replace the CSS answer with a worse one. Also that
it counts offsetTop, so a page scrolled inside its visual viewport is not
reported as a keyboard that is not there, and that it writes only on
change, since a keyboard animation fires resize every frame.

The bottom bar's reveal, five tests. Not the scrolling, which belongs to
the browser, but the conditions: never on the server, never on the wide
layout where scrolling the bar would scroll the page, never before the
view exists, and never for a route that highlights nothing, because
scrolling the bar to its start would be a claim about where the visitor
is.

The search clear control, four tests. That its presence is read from the
control rather than mirrored into a field, so the reset after a
successful search takes the button with it, and that clearing hands focus
back, since clearing is the first half of typing something else.

vitest.config.ts now includes src/app/components. The only specs under it
are these two; the inherited components there ship none.

333 tests, up from 316.
---
 .../components/master-page/nav-reveal.spec.ts | 129 +++++++++++++
 .../search-form/search-clear.spec.ts          |  74 ++++++++
 .../universe-viewport.service.spec.ts         | 177 ++++++++++++++++++
 frontend/vitest.config.ts                     |  12 +-
 4 files changed, 391 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/app/components/master-page/nav-reveal.spec.ts
 create mode 100644 frontend/src/app/components/search-form/search-clear.spec.ts
 create mode 100644 frontend/src/app/universe/universe-viewport.service.spec.ts

diff --git a/frontend/src/app/components/master-page/nav-reveal.spec.ts b/frontend/src/app/components/master-page/nav-reveal.spec.ts
new file mode 100644
index 00000000000..37931aa247d
--- /dev/null
+++ b/frontend/src/app/components/master-page/nav-reveal.spec.ts
@@ -0,0 +1,129 @@
+import { describe, expect, it } from 'vitest';
+import { MasterPageComponent } from '@components/master-page/master-page.component';
+
+/**
+ * The bottom bar's scroller.
+ *
+ * Below the shell breakpoint the bar holds every destination at full size and
+ * scrolls, which is the only arrangement that fits six or seven of them across
+ * 320 pixels without either shrinking the targets or hiding some. Everything
+ * that follows from that choice is CSS. The one part that is not is the
+ * starting offset: the browser has no reason to know that the highlighted item
+ * is the one that ought to be on screen.
+ *
+ * These cover the conditions rather than the scrolling, because the scrolling
+ * itself is `scrollIntoView` and belongs to the browser. What is worth pinning
+ * down is when it is called at all: never on the server, never on the wide
+ * layout where the bar does not scroll, and never for an item that is already
+ * fully visible.
+ */
+
+type Rect = { left: number; right: number };
+
+function navList(opts: {
+  scrollWidth: number;
+  clientWidth: number;
+  active?: Rect;
+  listRect?: Rect;
+}): { el: HTMLElement; scrolled: () => number } {
+  let calls = 0;
+  const active = opts.active
+    ? {
+        getBoundingClientRect: (): Rect => opts.active,
+        scrollIntoView: (): void => void calls++,
+      }
+    : null;
+  const el = {
+    scrollWidth: opts.scrollWidth,
+    clientWidth: opts.clientWidth,
+    getBoundingClientRect: (): Rect => opts.listRect ?? { left: 0, right: opts.clientWidth },
+    querySelector: (sel: string): unknown => (sel === '.nav-item.active' ? active : null),
+  } as unknown as HTMLElement;
+  return { el, scrolled: () => calls };
+}
+
+/**
+ * The component is built by hand rather than through TestBed. Only two of its
+ * dependencies are reached by the method under test, and standing up the whole
+ * shell to exercise a scroll offset would test the harness instead.
+ */
+function component(isBrowser: boolean, list: HTMLElement | null): MasterPageComponent {
+  const c = Object.create(MasterPageComponent.prototype) as MasterPageComponent;
+  (c as unknown as { stateService: unknown }).stateService = { isBrowser };
+  (c as unknown as { navList: unknown }).navList = list ? { nativeElement: list } : undefined;
+  return c;
+}
+
+function reveal(c: MasterPageComponent): void {
+  (c as unknown as { revealActiveDestination(): void }).revealActiveDestination();
+}
+
+/** requestAnimationFrame, run immediately, so the assertion sees the effect. */
+function withImmediateFrame(fn: () => void): void {
+  const original = globalThis.requestAnimationFrame;
+  (globalThis as { requestAnimationFrame: unknown }).requestAnimationFrame =
+    (cb: FrameRequestCallback): number => { cb(0); return 0; };
+  try {
+    fn();
+  } finally {
+    (globalThis as { requestAnimationFrame: unknown }).requestAnimationFrame = original;
+  }
+}
+
+describe('the bottom bar reveals the current destination', () => {
+  it('scrolls the active item into view when the bar is a scroller', () => {
+    // 480 of destinations in a 320 window, and the active one starts past the
+    // right edge: arriving on Charts from a link.
+    const { el, scrolled } = navList({
+      scrollWidth: 480,
+      clientWidth: 320,
+      active: { left: 360, right: 430 },
+    });
+
+    withImmediateFrame(() => reveal(component(true, el)));
+
+    expect(scrolled()).toBe(1);
+  });
+
+  it('leaves the wide layout alone', () => {
+    // At and above the breakpoint the bar is a static row that fits. Calling
+    // scrollIntoView there would scroll the page rather than the bar.
+    const { el, scrolled } = navList({
+      scrollWidth: 700,
+      clientWidth: 700,
+      active: { left: 0, right: 70 },
+    });
+
+    withImmediateFrame(() => reveal(component(true, el)));
+
+    expect(scrolled()).toBe(0);
+  });
+
+  it('does nothing on the server', () => {
+    const { el, scrolled } = navList({
+      scrollWidth: 480,
+      clientWidth: 320,
+      active: { left: 360, right: 430 },
+    });
+
+    withImmediateFrame(() => reveal(component(false, el)));
+
+    expect(scrolled()).toBe(0);
+  });
+
+  it('does nothing before the bar exists', () => {
+    // The router fires a navigation before the view is ready on first paint,
+    // and the shell is rendered without a bar on the routes that hide it.
+    expect(() => withImmediateFrame(() => reveal(component(true, null)))).not.toThrow();
+  });
+
+  it('does nothing when no destination is current', () => {
+    // An unrecognised route highlights nothing. Scrolling the bar to its start
+    // in that case would be a claim about where the visitor is.
+    const { el, scrolled } = navList({ scrollWidth: 480, clientWidth: 320 });
+
+    withImmediateFrame(() => reveal(component(true, el)));
+
+    expect(scrolled()).toBe(0);
+  });
+});
diff --git a/frontend/src/app/components/search-form/search-clear.spec.ts b/frontend/src/app/components/search-form/search-clear.spec.ts
new file mode 100644
index 00000000000..5af0080416f
--- /dev/null
+++ b/frontend/src/app/components/search-form/search-clear.spec.ts
@@ -0,0 +1,74 @@
+import { describe, expect, it } from 'vitest';
+import { SearchFormComponent } from '@components/search-form/search-form.component';
+
+/**
+ * The clear control on the search field.
+ *
+ * Replacing a 64-character identifier on a phone otherwise means selecting all
+ * of one by dragging inside a single-line field, which is a gesture with no
+ * keyboard equivalent and a poor success rate with a thumb. So the field gets a
+ * full-size clear target, and clearing hands focus straight back, because
+ * clearing is almost always the first half of typing or pasting something else.
+ *
+ * Two things are worth pinning down. The button's presence is read from the
+ * control rather than mirrored into a field, so a value arriving from anywhere
+ * other than a keystroke cannot leave it showing over an empty field. And focus
+ * returns, because losing the keyboard between clearing and typing turns one
+ * action into two.
+ */
+
+type FakeControl = { value: string };
+
+function component(initial: string): {
+  c: SearchFormComponent;
+  focused: () => number;
+  value: () => string;
+} {
+  const control: FakeControl = { value: initial };
+  let focused = 0;
+  const c = Object.create(SearchFormComponent.prototype) as SearchFormComponent;
+  (c as unknown as { searchForm: unknown }).searchForm = {
+    get: (name: string): FakeControl | null => (name === 'searchText' ? control : null),
+    setValue: (v: { searchText: string }): void => { control.value = v.searchText; },
+  };
+  (c as unknown as { searchInput: unknown }).searchInput = {
+    nativeElement: { focus: (): void => void focused++ },
+  };
+  return { c, focused: () => focused, value: () => control.value };
+}
+
+describe('clearing the search field', () => {
+  it('offers the control only when there is something to clear', () => {
+    expect(component('').c.hasSearchText).toBe(false);
+    expect(component('bc1qexample').c.hasSearchText).toBe(true);
+  });
+
+  it('empties the field and hands focus back', () => {
+    const { c, focused, value } = component('a'.repeat(64));
+
+    c.clearSearch();
+
+    expect(value()).toBe('');
+    expect(focused()).toBe(1);
+  });
+
+  it('stops offering itself once the field is empty', () => {
+    const { c } = component('000000000019d6689c085ae165831e93');
+
+    c.clearSearch();
+
+    // Read from the control, so the successful-search reset that empties the
+    // same control also takes the button away. A mirrored boolean would have
+    // left it hanging over an empty field.
+    expect(c.hasSearchText).toBe(false);
+  });
+
+  it('treats a field it cannot find as empty rather than throwing', () => {
+    const c = Object.create(SearchFormComponent.prototype) as SearchFormComponent;
+    (c as unknown as { searchForm: unknown }).searchForm = undefined;
+
+    // The getter runs on every change detection pass, including ones before the
+    // form group is built.
+    expect(c.hasSearchText).toBe(false);
+  });
+});
diff --git a/frontend/src/app/universe/universe-viewport.service.spec.ts b/frontend/src/app/universe/universe-viewport.service.spec.ts
new file mode 100644
index 00000000000..3ba7102a8c3
--- /dev/null
+++ b/frontend/src/app/universe/universe-viewport.service.spec.ts
@@ -0,0 +1,177 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { UniverseViewportService } from '@app/universe/universe-viewport.service';
+
+/**
+ * The service exists for one browser behaviour that cannot be reached from CSS,
+ * so what is worth testing is the shape of its contract rather than the
+ * arithmetic: that it publishes nothing at all where the browser cannot report
+ * a visual viewport, because every stylesheet that reads its properties falls
+ * back to a `dvh` value and that fallback only works if the property is absent
+ * rather than wrong.
+ */
+
+type Listener = () => void;
+
+function fakeVisualViewport(height: number, offsetTop = 0): {
+  visual: Record<string, unknown>;
+  fire: () => void;
+  listeners: Map<string, Listener[]>;
+} {
+  const listeners = new Map<string, Listener[]>();
+  const visual = {
+    height,
+    offsetTop,
+    addEventListener: (type: string, fn: Listener): void => {
+      listeners.set(type, [...(listeners.get(type) ?? []), fn]);
+    },
+    removeEventListener: (type: string, fn: Listener): void => {
+      listeners.set(type, (listeners.get(type) ?? []).filter((l) => l !== fn));
+    },
+  };
+  const fire = (): void => {
+    for (const fn of listeners.get('resize') ?? []) {
+      fn();
+    }
+  };
+  return { visual, fire, listeners };
+}
+
+function documentWith(view: unknown): { doc: Document; props: Map<string, string> } {
+  const props = new Map<string, string>();
+  const doc = {
+    defaultView: view,
+    documentElement: {
+      style: {
+        setProperty: (name: string, value: string): void => void props.set(name, value),
+      },
+    },
+  } as unknown as Document;
+  return { doc, props };
+}
+
+/** NgZone's only use here is running listeners outside change detection. */
+const zone = { runOutsideAngular: (fn: () => void): unknown => fn() } as never;
+
+// Angular identifies the platform by comparing the injected token against the
+// literal 'browser', so the token has to be that literal and not a stand-in
+// object. Getting this wrong is silent: the service simply publishes nothing,
+// which is also what it correctly does on the server.
+const BROWSER = 'browser' as unknown as object;
+const SERVER = 'server' as unknown as object;
+
+function service(view: unknown, platformId: object = BROWSER): {
+  svc: UniverseViewportService;
+  props: Map<string, string>;
+} {
+  const { doc, props } = documentWith(view);
+  return { svc: new UniverseViewportService(zone, doc, platformId), props };
+}
+
+describe('UniverseViewportService', () => {
+  beforeEach(() => {
+    vi.unstubAllGlobals();
+  });
+
+  it('publishes the visible height and the keyboard inset', () => {
+    const { visual } = fakeVisualViewport(400);
+    const { svc, props } = service({ innerHeight: 800, visualViewport: visual });
+
+    svc.track();
+
+    expect(props.get('--u-visual-viewport-height')).toBe('400px');
+    // 800 of window, 400 of it visible, nothing scrolled: the keyboard is
+    // covering the other 400.
+    expect(props.get('--u-keyboard-inset')).toBe('400px');
+  });
+
+  it('counts the offset, so a page scrolled inside the visual viewport is not read as a keyboard', () => {
+    const { visual } = fakeVisualViewport(600, 200);
+    const { svc, props } = service({ innerHeight: 800, visualViewport: visual });
+
+    svc.track();
+
+    // 800 - 600 - 200 is zero: the window is fully visible, just scrolled.
+    // Without the offset this would report a 200px keyboard that is not there.
+    expect(props.get('--u-keyboard-inset')).toBe('0px');
+  });
+
+  it('publishes nothing where the browser cannot report a visual viewport', () => {
+    const { svc, props } = service({ innerHeight: 800 });
+
+    svc.track();
+
+    // Absent, not zero, and not the window height. Every rule that reads these
+    // does so through a var() fallback to a CSS unit, and a fallback only
+    // applies when the property was never set.
+    expect(props.size).toBe(0);
+  });
+
+  it('does nothing on the server, even where a viewport appears to exist', () => {
+    const { visual, listeners } = fakeVisualViewport(400);
+    const { svc, props } = service({ innerHeight: 800, visualViewport: visual }, SERVER);
+
+    svc.track();
+
+    expect(props.size).toBe(0);
+    expect((listeners.get('resize') ?? []).length).toBe(0);
+  });
+
+  it('writes only when a value changed', () => {
+    const { visual, fire } = fakeVisualViewport(400);
+    const writes: string[] = [];
+    const doc = {
+      defaultView: { innerHeight: 800, visualViewport: visual },
+      documentElement: { style: { setProperty: (n: string): void => void writes.push(n) } },
+    } as unknown as Document;
+    const svc = new UniverseViewportService(zone, doc, BROWSER);
+
+    svc.track();
+    const afterFirst = writes.length;
+    fire();
+    fire();
+
+    // A keyboard animation fires this every frame. Repeating a write that
+    // changes nothing would invalidate style on a low-end phone sixty times a
+    // second for no reason.
+    expect(writes.length).toBe(afterFirst);
+  });
+
+  it('reacts when the visible height actually changes', () => {
+    const { visual, fire } = fakeVisualViewport(800);
+    const { svc, props } = service({ innerHeight: 800, visualViewport: visual });
+
+    svc.track();
+    expect(props.get('--u-keyboard-inset')).toBe('0px');
+
+    (visual as { height: number }).height = 420;
+    fire();
+
+    expect(props.get('--u-visual-viewport-height')).toBe('420px');
+    expect(props.get('--u-keyboard-inset')).toBe('380px');
+  });
+
+  it('detaches its listeners when destroyed', () => {
+    const { visual, listeners } = fakeVisualViewport(400);
+    const { svc } = service({ innerHeight: 800, visualViewport: visual });
+
+    svc.track();
+    expect((listeners.get('resize') ?? []).length).toBe(1);
+
+    svc.ngOnDestroy();
+
+    expect((listeners.get('resize') ?? []).length).toBe(0);
+    expect((listeners.get('scroll') ?? []).length).toBe(0);
+  });
+
+  it('is safe to track twice', () => {
+    const { visual, listeners } = fakeVisualViewport(400);
+    const { svc } = service({ innerHeight: 800, visualViewport: visual });
+
+    svc.track();
+    svc.track();
+
+    // The shell calls this from ngOnInit, and the shell is re-created on some
+    // route changes. Two sets of listeners on one viewport is a leak.
+    expect((listeners.get('resize') ?? []).length).toBe(1);
+  });
+});
diff --git a/frontend/vitest.config.ts b/frontend/vitest.config.ts
index 1b04b93ce38..f9f2afc4c0b 100644
--- a/frontend/vitest.config.ts
+++ b/frontend/vitest.config.ts
@@ -14,6 +14,12 @@ import { fileURLToPath } from 'node:url';
  * are TestBed specs that need a browser environment and an Angular testing
  * module this configuration does not set up, and they cover a feature this
  * deployment does not enable.
+ *
+ * `src/app/components` is included for the shell: the adaptive behaviour that
+ * could not be expressed in CSS lives there, and it is exactly the sort of
+ * thing that is cheap to test directly and expensive to find in a browser.
+ * Only files this product owns are under it; the inherited components in that
+ * tree ship no specs.
  */
 export default defineConfig({
   // The root tsconfig.json is solution-style and carries no compiler options,
@@ -39,7 +45,11 @@ export default defineConfig({
     environment: 'node',
     globals: true,
     setupFiles: ['./src/universe-test-setup.ts'],
-    include: ['src/app/universe/**/*.spec.ts', 'src/app/shared/**/*.spec.ts'],
+    include: [
+      'src/app/universe/**/*.spec.ts',
+      'src/app/shared/**/*.spec.ts',
+      'src/app/components/**/*.spec.ts',
+    ],
     reporters: ['default'],
   },
 });

From 4a9614b25a16c35be5b6771ce8351b0972fb9a17 Mon Sep 17 00:00:00 2001
From: Bitcoin Universe <bitcoinuniversecorp@gmail.com>
Date: Sat, 29 Aug 2026 20:41:28 +0000
Subject: [PATCH 05/11] Move the bar's own offset, not every ancestor's

revealActiveDestination called scrollIntoView on the current destination.
That does what was wanted and more: it adjusts every scrollable ancestor
it can reach, including the document, so tidying the bottom bar after a
navigation could have moved the reading position of the page underneath
it. Nothing observed it doing so, and nothing here would have noticed if
it had.

Writing one offset to the bar's own scrollLeft cannot do anything except
what it says, and it is testable, which scrollIntoView was not: the two
directions and the leave-it-alone case now assert the number rather than
the fact that a browser method was called. Seven tests where there were
five.

A 24px margin so the revealed destination does not sit flush against the
edge looking like the last one there is, when it is only the last one
visible.
---
 .../master-page/master-page.component.ts      | 24 +++++-
 .../components/master-page/nav-reveal.spec.ts | 79 +++++++++++++------
 2 files changed, 75 insertions(+), 28 deletions(-)

diff --git a/frontend/src/app/components/master-page/master-page.component.ts b/frontend/src/app/components/master-page/master-page.component.ts
index b4a3fb0f0c8..3151fbd0870 100644
--- a/frontend/src/app/components/master-page/master-page.component.ts
+++ b/frontend/src/app/components/master-page/master-page.component.ts
@@ -164,8 +164,14 @@ export class MasterPageComponent implements OnInit, AfterViewInit, OnDestroy {
    * so the bar disagreed with the page about where the visitor was. It runs
    * after every navigation and once on first paint.
    *
-   * `nearest` on both axes, so a destination already fully visible does not
-   * move, and the page itself is never scrolled by this.
+   * The bar's own `scrollLeft` is moved, rather than calling `scrollIntoView`
+   * on the destination. `scrollIntoView` adjusts every scrollable ancestor it
+   * can find, including the document, so a navigation could have moved the
+   * reading position of the page as a side effect of tidying the bar. Writing
+   * one offset on one element cannot do anything but what it says.
+   *
+   * A destination already fully inside the bar is left alone, so the common
+   * case moves nothing at all.
    */
   private revealActiveDestination(): void {
     // There is no scroller and no animation frame on the server.
@@ -184,7 +190,19 @@ export class MasterPageComponent implements OnInit, AfterViewInit, OnDestroy {
     // After the router has swapped the active class on, not before it.
     requestAnimationFrame(() => {
       const active = list.querySelector('.nav-item.active');
-      active?.scrollIntoView({ block: 'nearest', inline: 'nearest', behavior: 'auto' });
+      if (!active) {
+        return;
+      }
+      const item = active.getBoundingClientRect();
+      const bar = list.getBoundingClientRect();
+      // A margin so the revealed destination does not sit flush against the
+      // edge looking like the last one, when it is only the last one visible.
+      const margin = 24;
+      if (item.left < bar.left) {
+        list.scrollLeft -= (bar.left - item.left) + margin;
+      } else if (item.right > bar.right) {
+        list.scrollLeft += (item.right - bar.right) + margin;
+      }
     });
   }
 
diff --git a/frontend/src/app/components/master-page/nav-reveal.spec.ts b/frontend/src/app/components/master-page/nav-reveal.spec.ts
index 37931aa247d..9577a857eac 100644
--- a/frontend/src/app/components/master-page/nav-reveal.spec.ts
+++ b/frontend/src/app/components/master-page/nav-reveal.spec.ts
@@ -11,11 +11,15 @@ import { MasterPageComponent } from '@components/master-page/master-page.compone
  * starting offset: the browser has no reason to know that the highlighted item
  * is the one that ought to be on screen.
  *
- * These cover the conditions rather than the scrolling, because the scrolling
- * itself is `scrollIntoView` and belongs to the browser. What is worth pinning
- * down is when it is called at all: never on the server, never on the wide
- * layout where the bar does not scroll, and never for an item that is already
- * fully visible.
+ * What is pinned down here is when the bar moves and by how much: never on the
+ * server, never on the wide layout where the bar does not scroll, never before
+ * the view exists, never for a route that highlights nothing, and never for a
+ * destination that is already inside the bar.
+ *
+ * The offset is written to the bar's own scrollLeft rather than delegated to
+ * scrollIntoView, which adjusts every scrollable ancestor it can reach and so
+ * could move the page's reading position as a side effect of tidying the bar.
+ * These assert the offset, which is only possible because of that choice.
  */
 
 type Rect = { left: number; right: number };
@@ -25,21 +29,18 @@ function navList(opts: {
   clientWidth: number;
   active?: Rect;
   listRect?: Rect;
-}): { el: HTMLElement; scrolled: () => number } {
-  let calls = 0;
+}): { el: HTMLElement; moved: () => number } {
   const active = opts.active
-    ? {
-        getBoundingClientRect: (): Rect => opts.active,
-        scrollIntoView: (): void => void calls++,
-      }
+    ? { getBoundingClientRect: (): Rect => opts.active }
     : null;
   const el = {
     scrollWidth: opts.scrollWidth,
     clientWidth: opts.clientWidth,
+    scrollLeft: 0,
     getBoundingClientRect: (): Rect => opts.listRect ?? { left: 0, right: opts.clientWidth },
     querySelector: (sel: string): unknown => (sel === '.nav-item.active' ? active : null),
   } as unknown as HTMLElement;
-  return { el, scrolled: () => calls };
+  return { el, moved: () => el.scrollLeft };
 }
 
 /**
@@ -71,10 +72,10 @@ function withImmediateFrame(fn: () => void): void {
 }
 
 describe('the bottom bar reveals the current destination', () => {
-  it('scrolls the active item into view when the bar is a scroller', () => {
-    // 480 of destinations in a 320 window, and the active one starts past the
-    // right edge: arriving on Charts from a link.
-    const { el, scrolled } = navList({
+  it('brings a destination past the right edge back into the bar', () => {
+    // 480 of destinations in a 320 window, and the active one ends 110 past
+    // the right edge: arriving on Charts from a link.
+    const { el, moved } = navList({
       scrollWidth: 480,
       clientWidth: 320,
       active: { left: 360, right: 430 },
@@ -82,13 +83,41 @@ describe('the bottom bar reveals the current destination', () => {
 
     withImmediateFrame(() => reveal(component(true, el)));
 
-    expect(scrolled()).toBe(1);
+    // 110 to bring its right edge to the bar's, and 24 more so it does not sit
+    // flush against the edge looking like the last destination there is.
+    expect(moved()).toBe(134);
+  });
+
+  it('brings a destination past the left edge back into the bar', () => {
+    const { el, moved } = navList({
+      scrollWidth: 480,
+      clientWidth: 320,
+      active: { left: -40, right: 30 },
+    });
+    (el as unknown as { scrollLeft: number }).scrollLeft = 200;
+
+    withImmediateFrame(() => reveal(component(true, el)));
+
+    expect(moved()).toBe(200 - 40 - 24);
+  });
+
+  it('leaves a destination that is already inside the bar alone', () => {
+    // The common case. Moving the bar here would be movement the visitor did
+    // not ask for and cannot explain.
+    const { el, moved } = navList({
+      scrollWidth: 480,
+      clientWidth: 320,
+      active: { left: 40, right: 110 },
+    });
+
+    withImmediateFrame(() => reveal(component(true, el)));
+
+    expect(moved()).toBe(0);
   });
 
   it('leaves the wide layout alone', () => {
-    // At and above the breakpoint the bar is a static row that fits. Calling
-    // scrollIntoView there would scroll the page rather than the bar.
-    const { el, scrolled } = navList({
+    // At and above the breakpoint the bar is a static row that fits.
+    const { el, moved } = navList({
       scrollWidth: 700,
       clientWidth: 700,
       active: { left: 0, right: 70 },
@@ -96,11 +125,11 @@ describe('the bottom bar reveals the current destination', () => {
 
     withImmediateFrame(() => reveal(component(true, el)));
 
-    expect(scrolled()).toBe(0);
+    expect(moved()).toBe(0);
   });
 
   it('does nothing on the server', () => {
-    const { el, scrolled } = navList({
+    const { el, moved } = navList({
       scrollWidth: 480,
       clientWidth: 320,
       active: { left: 360, right: 430 },
@@ -108,7 +137,7 @@ describe('the bottom bar reveals the current destination', () => {
 
     withImmediateFrame(() => reveal(component(false, el)));
 
-    expect(scrolled()).toBe(0);
+    expect(moved()).toBe(0);
   });
 
   it('does nothing before the bar exists', () => {
@@ -120,10 +149,10 @@ describe('the bottom bar reveals the current destination', () => {
   it('does nothing when no destination is current', () => {
     // An unrecognised route highlights nothing. Scrolling the bar to its start
     // in that case would be a claim about where the visitor is.
-    const { el, scrolled } = navList({ scrollWidth: 480, clientWidth: 320 });
+    const { el, moved } = navList({ scrollWidth: 480, clientWidth: 320 });
 
     withImmediateFrame(() => reveal(component(true, el)));
 
-    expect(scrolled()).toBe(0);
+    expect(moved()).toBe(0);
   });
 });

From 1ec00a2f22bde3f9aaffe4fc8639b5feb09adcf9 Mon Sep 17 00:00:00 2001
From: Bitcoin Universe <bitcoinuniversecorp@gmail.com>
Date: Sat, 29 Aug 2026 21:16:22 +0000
Subject: [PATCH 06/11] Three engines, and stop measuring the page mid-layout

Two things this found about itself.

The bottom-of-page check scrolled to the end and measured immediately.
Scrolling to the end is exactly what makes a page load whatever it was
deferring, and an image without dimensions finishes arriving at about the
same moment, so the measurement was taken while the bottom was still
moving and the answer depended on how fast the machine was. It produced
a finding on a Linux runner that could not be reproduced on a faster
workstation at any viewport height, which is the signature of a race
rather than a defect. It now scrolls, waits for the height to stop
changing, scrolls again, and only then measures.

The same finding could not say whether the element was in normal flow or
pinned over the bar. Those have different causes and different fixes, and
the arithmetic rules the first one out: with 103px reserved on the column
and 60 on the body, a flow element sits at least 163px above the document
bottom, and the bar is 53 plus the inset. So it now says which, because
leaving a reader to derive that by hand is what happened here.

Three engines rather than one. WebKit is the engine Safari is built on
and is the closest an automated run gets to an iPhone, which matters
because dvh, safe-area insets and the pointer media feature are exactly
where engines differ, and a Chromium-only run proves nothing about the
platform these fixes were written for. It takes the full set and reports
nothing. Firefox cannot be put into mobile emulation, so it reports a
fine pointer and takes the checks that do not need a thumb, and the run
says so in its own header.

Firefox is also why the touch floors are now written
(pointer: coarse), (max-width: 991.98px) rather than on the pointer
alone, matching the field rule. Below the shell breakpoint the product is
already in its mobile shape and should have mobile ergonomics whatever
the pointer claims.

And why the focus check now distinguishes AA from AAA. Entirely behind a
layer is SC 2.4.11, AA, and fails every engine: it is what this found in
the first place. Partly under one is SC 2.4.12, AAA, which the stylesheet
aims for and Chromium and WebKit reach; Firefox does not re-scroll
something already partly in view. Those are counted and printed every run
and do not fail it, because dropping them would hide the difference from
everyone.
---
 .github/workflows/universe-ci.yml             |  38 ++++-
 docs/product/DESIGN-SYSTEM.md                 |  26 +++-
 .../master-page/master-page.component.scss    |   2 +-
 .../search-form/search-form.component.scss    |   6 +-
 frontend/src/styles.scss                      |  56 ++++++-
 scripts/universe/visual-qa/mobile-check.mjs   | 140 +++++++++++++++---
 6 files changed, 236 insertions(+), 32 deletions(-)

diff --git a/.github/workflows/universe-ci.yml b/.github/workflows/universe-ci.yml
index a17c04ff1e1..9b9417519f2 100644
--- a/.github/workflows/universe-ci.yml
+++ b/.github/workflows/universe-ci.yml
@@ -319,6 +319,14 @@ jobs:
         working-directory: scripts/universe/visual-qa
         run: npm ci
 
+      # The matrix job beside this one drives Chromium only, so the runner
+      # image has never needed the other two. Downloading them is a few
+      # seconds against a warm cache and the alternative is a job that claims
+      # three engines and silently runs one.
+      - name: Fetch the engines this job drives
+        working-directory: scripts/universe/visual-qa
+        run: npx playwright install chromium webkit firefox
+
       # Same reasoning as the matrix job: a fixed port once measured another
       # job's build, so each run takes a free one and refuses to continue
       # unless the process answering is the one it started.
@@ -344,10 +352,38 @@ jobs:
         working-directory: scripts/universe/visual-qa
         run: node mobile-check.mjs --base=http://127.0.0.1:$GATEWAY_PORT --out=./artifacts-mobile
 
+      # WebKit is the engine Safari is built on, and it is the closest an
+      # automated run gets to an iPhone. It is worth its own pass rather than
+      # a sample of one: the rules this work turns on, dvh, safe-area insets
+      # and the pointer media feature, are exactly the ones where engines
+      # differ, and a Chromium-only run would have proved nothing about the
+      # platform the fixes were written for. Measured at about four minutes.
+      - name: The same windows on the engine Safari is built on
+        working-directory: scripts/universe/visual-qa
+        run: >-
+          node mobile-check.mjs --base=http://127.0.0.1:$GATEWAY_PORT
+          --browser=webkit --out=./artifacts-mobile-webkit
+
+      # Firefox cannot be put into mobile emulation, so it reports a fine
+      # pointer and the pointer-conditional rules do not apply to it. What it
+      # still measures is every window size, the overflow, the fixed layers,
+      # the safe areas and the rotation, which is worth having on a third
+      # engine. A subset of routes, because this is a smoke check and the two
+      # passes above are the thorough ones.
+      - name: A third engine, on the checks that do not need a thumb
+        working-directory: scripts/universe/visual-qa
+        run: >-
+          node mobile-check.mjs --base=http://127.0.0.1:$GATEWAY_PORT
+          --browser=firefox --routes=home,tx,address,blocks,docs
+          --out=./artifacts-mobile-firefox
+
       - name: Keep the mobile report
         if: always()
         uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4
         with:
           name: universe-mobile-qa
-          path: scripts/universe/visual-qa/artifacts-mobile
+          path: |
+            scripts/universe/visual-qa/artifacts-mobile
+            scripts/universe/visual-qa/artifacts-mobile-webkit
+            scripts/universe/visual-qa/artifacts-mobile-firefox
           retention-days: 30
diff --git a/docs/product/DESIGN-SYSTEM.md b/docs/product/DESIGN-SYSTEM.md
index 9de0a5e3240..10cff13f919 100644
--- a/docs/product/DESIGN-SYSTEM.md
+++ b/docs/product/DESIGN-SYSTEM.md
@@ -549,11 +549,25 @@ roughly nine minutes, against the matrix's sixty.
 | 768 x 1024 | tablet, where the shell is still in its compact form |
 | 1024 x 900 | the desktop control: a mobile fix that regresses the wide layout fails here |
 
-Compact windows are run with `isMobile`, which is what makes Chromium report a
-coarse pointer. `hasTouch` alone does not, and without it every
+Compact windows are run with `isMobile`, which is what makes Chromium and
+WebKit report a coarse pointer. `hasTouch` alone does not, and without it every
 `@media (pointer: coarse)` rule in the product goes unexercised while appearing
 to be covered.
 
+Three engines, with `--browser`. Chromium and WebKit take the whole set;
+WebKit is the engine Safari is built on, which is the closest an automated run
+gets to an iPhone. Firefox cannot be put into mobile emulation, so it reports a
+fine pointer and takes a narrower pass: window sizes, overflow, fixed layers,
+safe areas and rotation are all still measured there, and the run says so in
+its own header rather than leaving a reader to assume otherwise.
+
+That is also why every rule with a touch floor is written
+`@media (pointer: coarse), (max-width: 991.98px)` rather than on the pointer
+alone. Pointer reporting is not reliable across mobile browsers, desktop-mode
+requests and emulation, and below the shell breakpoint the product is already
+in its mobile shape, so it should have mobile ergonomics whatever the pointer
+claims.
+
 The cutout is injected by overriding the four safe-area properties, because
 headless Chromium has no notch and `env()` is zero everywhere. What is being
 tested is whether the layout reserves room when the numbers are not zero.
@@ -564,7 +578,13 @@ What it fails a run for:
 - a region scrolling sideways without declaring it, or with nothing focusable in it
 - a field computing under 16px
 - a target under either floor
-- content or focus resting behind the header or the bottom bar
+- content resting behind the header or the bottom bar, saying whether the
+  element is in flow or pinned, because those are different faults
+- focus resting entirely behind either layer, which is WCAG 2.2 AA. Focus
+  landing partly under a layer is the AAA rule: it is counted and printed every
+  run and does not fail it, because the stylesheet aims for it and Chromium and
+  WebKit reach it while Firefox does not re-scroll something already partly in
+  view. Printing it is what keeps that difference visible
 - the header or bar not reserving a simulated inset
 - a menu taller than the window that does not scroll
 - the bottom bar scrolling with no affordance, or the current destination scrolled out of sight
diff --git a/frontend/src/app/components/master-page/master-page.component.scss b/frontend/src/app/components/master-page/master-page.component.scss
index d807f7b69ea..26a0cbbbfc8 100644
--- a/frontend/src/app/components/master-page/master-page.component.scss
+++ b/frontend/src/app/components/master-page/master-page.component.scss
@@ -147,7 +147,7 @@
 
   // Same reasoning as the chain toggle: a control sized for a cursor is not
   // sized for a thumb, and these two sit side by side.
-  @media (pointer: coarse) {
+  @media (pointer: coarse), (max-width: 991.98px) {
     min-height: var(--u-touch-target);
     padding-inline: var(--u-space-3);
   }
diff --git a/frontend/src/app/components/search-form/search-form.component.scss b/frontend/src/app/components/search-form/search-form.component.scss
index aa93bf5d30d..62c9c743e69 100644
--- a/frontend/src/app/components/search-form/search-form.component.scss
+++ b/frontend/src/app/components/search-form/search-form.component.scss
@@ -53,7 +53,7 @@
   margin: 0;
   white-space: nowrap;
 
-  @media (pointer: coarse) {
+  @media (pointer: coarse), (max-width: 991.98px) {
     min-height: var(--u-touch-target);
     padding-inline: var(--u-space-1);
   }
@@ -106,7 +106,7 @@
     padding-right: calc(var(--u-touch-target) + var(--u-space-1));
   }
 
-  @media (pointer: coarse) {
+  @media (pointer: coarse), (max-width: 991.98px) {
     height: var(--u-touch-target-comfortable);
   }
 
@@ -189,7 +189,7 @@
   // The submit control matches the field it belongs to, and clears the touch
   // floor on its shorter side. 46px wide was already past it; the height was
   // not.
-  @media (pointer: coarse) {
+  @media (pointer: coarse), (max-width: 991.98px) {
     height: var(--u-touch-target-comfortable);
   }
 
diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss
index 6c444157afe..621ec83653d 100644
--- a/frontend/src/styles.scss
+++ b/frontend/src/styles.scss
@@ -156,6 +156,58 @@ html {
   }
 }
 
+// The same reservation again, stated on the targets rather than the scroller.
+//
+// `scroll-padding` on the scroll container is the tidier half of this, and on
+// its own it is not enough. Engines differ on whether they apply it to the
+// scroll a browser performs when focus moves to something off screen, as
+// opposed to an anchor or an explicit `scrollIntoView`. Measured here: Firefox
+// left focused links resting ten pixels under the bottom bar on a 320px window
+// where Chromium and WebKit placed them clear of it.
+//
+// `scroll-margin` is the other half of the same contract and is honoured on the
+// target itself. Declaring both is not redundant: an engine that applies one
+// gets a correct result, and an engine that applies both over-scrolls slightly,
+// which places the focused control further from the bar than needed and is not
+// a fault. Below the breakpoint only, since that is where the fixed bar is.
+@media (max-width: 991.98px) {
+  a[href],
+  button,
+  input,
+  select,
+  textarea,
+  summary,
+  [tabindex]:not([tabindex='-1']) {
+    scroll-margin-bottom: calc(var(--u-bottom-nav-space) + var(--u-space-4));
+    scroll-margin-top: calc(7rem + var(--u-safe-top));
+  }
+
+  @media (min-width: 600px) {
+    a[href],
+    button,
+    input,
+    select,
+    textarea,
+    summary,
+    [tabindex]:not([tabindex='-1']) {
+      scroll-margin-top: calc(4.5rem + var(--u-safe-top));
+    }
+  }
+
+  @media (max-height: 479.98px) {
+    a[href],
+    button,
+    input,
+    select,
+    textarea,
+    summary,
+    [tabindex]:not([tabindex='-1']) {
+      scroll-margin-bottom: calc(var(--u-touch-target) + 1px + var(--u-safe-bottom) + var(--u-space-3));
+      scroll-margin-top: calc(4rem + var(--u-safe-top));
+    }
+  }
+}
+
 body {
   background-color: var(--u-surface-page);
   padding-bottom: 60px;
@@ -1774,7 +1826,7 @@ h2.anchor {
   // reaches for first. Keyed on the pointer rather than the width, because a
   // narrow desktop window is still driven by a mouse and gains nothing from
   // the taller control.
-  @media (pointer: coarse) {
+  @media (pointer: coarse), (max-width: 991.98px) {
     min-height: var(--u-touch-target);
     padding-inline: var(--u-space-3);
   }
@@ -1841,7 +1893,7 @@ h2.anchor {
   row-gap: 2px;
   white-space: normal;
 
-  @media (pointer: coarse) {
+  @media (pointer: coarse), (max-width: 991.98px) {
     min-height: var(--u-touch-target);
     padding-block: var(--u-space-2);
   }
diff --git a/scripts/universe/visual-qa/mobile-check.mjs b/scripts/universe/visual-qa/mobile-check.mjs
index 3724ca6da29..68b5256b15d 100644
--- a/scripts/universe/visual-qa/mobile-check.mjs
+++ b/scripts/universe/visual-qa/mobile-check.mjs
@@ -35,7 +35,7 @@
  *   node mobile-check.mjs --base=http://127.0.0.1:8080
  *   node mobile-check.mjs --base=... --routes=home,tx --viewports=phone-320
  */
-import { chromium, devices, webkit } from 'playwright';
+import { chromium, devices, firefox, webkit } from 'playwright';
 import { mkdirSync, writeFileSync } from 'fs';
 import { dirname, join, resolve } from 'path';
 import { fileURLToPath } from 'url';
@@ -53,7 +53,27 @@ const args = Object.fromEntries(
 
 const BASE = args.base || 'http://localhost:4200';
 const OUT = resolve(args.out || join(HERE, 'artifacts-mobile'));
-const BROWSER = args.browser === 'webkit' ? webkit : chromium;
+const ENGINES = { chromium, webkit, firefox };
+const ENGINE_NAME = args.browser || 'chromium';
+const BROWSER = ENGINES[ENGINE_NAME];
+if (!BROWSER) {
+  throw new Error(`unknown browser "${ENGINE_NAME}"; expected one of ${Object.keys(ENGINES).join(', ')}`);
+}
+
+/**
+ * Whether this engine can be asked to pretend it is a phone.
+ *
+ * Chromium and WebKit both take `isMobile`, and it is what makes them report a
+ * coarse pointer, which is the whole reason the flag is set. Firefox rejects
+ * the option outright rather than ignoring it.
+ *
+ * That makes Firefox a narrower run rather than a broken one: the window sizes,
+ * the overflow, the fixed layers, the safe areas and the rotation are all still
+ * measured, and the pointer-conditional rules are not. Which is the honest
+ * shape of a Firefox mobile check from a desktop harness, and it is stated in
+ * the run's own header rather than left for a reader to assume.
+ */
+const CAN_EMULATE_MOBILE = ENGINE_NAME !== 'firefox';
 
 /**
  * The window sizes that change the answer, not the phones that are popular.
@@ -123,6 +143,8 @@ const MOBILE_ROUTE_IDS = (args.routes ? String(args.routes).split(',') : [
 
 const findings = [];
 const passes = [];
+/** Focus landing partly under a fixed layer: the AAA rule, reported not gated. */
+const grazes = [];
 
 function fail(scope, message) {
   findings.push(`${scope}: ${message}`);
@@ -141,7 +163,7 @@ function pass(scope, message) {
  * a live update can contradict each other and send the reader looking for a
  * bug that is really a race in the harness.
  */
-function mobileProbe(floors) {
+async function mobileProbe(floors) {
   const { touchFloor, fieldFloor } = floors;
   const doc = document.documentElement;
   const round = (n) => Math.round(n * 100) / 100;
@@ -342,7 +364,26 @@ function mobileProbe(floors) {
   // ask whether the final piece of real content is above the bar or behind it.
   // This is the check that "padding-bottom: 68px" was silently failing on a
   // phone with a home indicator, where the bar is taller than the number.
+  //
+  // Settling matters here more than anywhere else in this probe. Scrolling to
+  // the bottom is what makes a page load whatever it was deferring until it
+  // was scrolled to, and an image without dimensions finishes arriving at
+  // about the same moment. Measuring straight after the scroll measures the
+  // page mid-layout: the bottom moves underneath the measurement, and the
+  // answer depends on how fast the machine is. That produced a finding on a
+  // Linux runner that no amount of looking could reproduce on a faster
+  // workstation, which is the signature of a race rather than a defect.
+  //
+  // So: scroll, let the page finish, scroll again in case finishing moved the
+  // bottom, and only then measure.
+  for (let settle = 0; settle < 3; settle++) {
+    const before = document.body.scrollHeight;
+    window.scrollTo(0, document.body.scrollHeight);
+    await new Promise((done) => setTimeout(done, 220));
+    if (document.body.scrollHeight === before) break;
+  }
   window.scrollTo(0, document.body.scrollHeight);
+  await new Promise((done) => requestAnimationFrame(() => requestAnimationFrame(done)));
   const atBottom = { hidden: [], barTop: barIsFixed && barRect ? round(barRect.top) : null };
   if (barIsFixed && barRect) {
     const candidates = document.querySelectorAll('main a[href], main button, main td, main p, main h2, main h3');
@@ -353,7 +394,22 @@ function mobileProbe(floors) {
       // More than a hairline of it under the bar. A one-pixel overlap is a
       // rounding artefact, not content nobody can read.
       if (rect.bottom > barRect.top + 2 && rect.top < barRect.top) {
-        atBottom.hidden.push(`${describe(el)} runs ${round(rect.bottom - barRect.top)}px under the bar`);
+        // Say which kind it is. A flow element under the bar means the page
+        // reserved too little room; a pinned one means something is positioned
+        // over the bar and the reservation was never going to reach it. Those
+        // are different faults with different fixes, and the message used to
+        // leave a reader to work out which by hand.
+        let anc = el;
+        let pinned = null;
+        while (anc && anc !== document.body) {
+          const pos = getComputedStyle(anc).position;
+          if (pos === 'fixed' || pos === 'sticky') { pinned = `${describe(anc)} is ${pos}`; break; }
+          anc = anc.parentElement;
+        }
+        atBottom.hidden.push(
+          `${describe(el)} runs ${round(rect.bottom - barRect.top)}px under the bar`
+          + (pinned ? ` (pinned: ${pinned})` : ' (in flow)'),
+        );
         if (atBottom.hidden.length >= 6) break;
       }
     }
@@ -438,10 +494,25 @@ function mobileProbe(floors) {
  * Where the focus ring ends up.
  *
  * Run separately from the snapshot above because it has to move focus, and
- * moving focus changes the page. Tabs forward through the document and reports
- * any control that comes to rest underneath one of the two fixed layers.
- * WCAG 2.2 calls this focus-obscured; in use it is worse than the rule sounds,
- * because the visitor has no way to tell that anything happened at all.
+ * moving focus changes the page.
+ *
+ * Two outcomes, because WCAG 2.2 draws the line in two places and this product
+ * is held to the AA one. `hidden` is a focused control resting entirely behind
+ * a fixed layer, which is SC 2.4.11 Focus Not Obscured (Minimum), an AA
+ * failure, and in use is worse than the rule sounds: the visitor has no way to
+ * tell that anything happened at all. That is what fails a run, on every
+ * engine. It is also what this found in the first place, on every phone width,
+ * where tabbing near the bottom of a page put the link exactly behind the bar.
+ *
+ * `grazed` is a control that is partly visible and partly under a layer. That
+ * is the AAA rule, SC 2.4.12, and the stylesheet aims for it: `scroll-padding`
+ * on the scroller and `scroll-margin` on the targets together place a focused
+ * control clear of both layers. Chromium and WebKit honour that and report
+ * none. Firefox does not re-scroll an element that is already partly in view,
+ * so it reports some, and its own behaviour is compliant with the level this
+ * product is held to. So they are counted and printed every run and do not
+ * fail it, rather than being dropped, which would leave nobody able to see the
+ * difference between the engines at all.
  */
 async function focusWalk(page, steps) {
   return page.evaluate(async (limit) => {
@@ -451,6 +522,7 @@ async function focusWalk(page, steps) {
     const barFixed = bar && getComputedStyle(bar).position === 'fixed';
     const headerSticky = header && ['sticky', 'fixed'].includes(getComputedStyle(header).position);
     const hidden = [];
+    const grazed = [];
     const focusables = Array.from(
       document.querySelectorAll('a[href], button:not([disabled]), input:not([disabled]):not([type=hidden]), select, textarea, [tabindex]:not([tabindex="-1"])'),
     ).filter((el) => {
@@ -490,21 +562,29 @@ async function focusWalk(page, steps) {
 
       if (barFixed) {
         const b = bar.getBoundingClientRect();
-        const entirelyBehind = rect.top >= b.top - 2;
-        if (entirelyBehind || (fits && rect.bottom > b.top + 2 && rect.top < b.bottom)) {
-          hidden.push(`${name} rests ${entirelyBehind ? 'entirely behind' : `under`} the bottom bar by ${round(rect.bottom - b.top)}px`);
+        if (rect.top >= b.top - 2) {
+          hidden.push(`${name} rests entirely behind the bottom bar`);
+          continue;
+        }
+        // The second bound matters: an element scrolled entirely below the bar
+        // is off screen, not obscured by it, and reporting it as overlapping
+        // describes where the page is scrolled rather than anything about the
+        // layer.
+        if (fits && rect.bottom > b.top + 2 && rect.top < b.bottom) {
+          grazed.push(`${name} overlaps the bottom bar by ${round(rect.bottom - b.top)}px`);
           continue;
         }
       }
       if (headerSticky) {
         const h = header.getBoundingClientRect();
-        const entirelyBehind = rect.bottom <= h.bottom + 2;
-        if (entirelyBehind || (fits && rect.top < h.bottom - 2 && rect.bottom > h.top)) {
-          hidden.push(`${name} rests ${entirelyBehind ? 'entirely behind' : 'under'} the header by ${round(h.bottom - rect.top)}px`);
+        if (rect.bottom <= h.bottom + 2) {
+          hidden.push(`${name} rests entirely behind the header`);
+        } else if (fits && rect.top < h.bottom - 2 && rect.bottom > h.top) {
+          grazed.push(`${name} overlaps the header by ${round(h.bottom - rect.top)}px`);
         }
       }
     }
-    return hidden.slice(0, 8);
+    return { hidden: hidden.slice(0, 8), grazed: grazed.slice(0, 8) };
   }, steps);
 }
 
@@ -551,7 +631,7 @@ async function run() {
   }
 
   const browser = await BROWSER.launch({
-    args: BROWSER === chromium
+    args: ENGINE_NAME === 'chromium'
       ? ['--use-gl=angle', '--use-angle=swiftshader', '--enable-unsafe-swiftshader']
       : [],
   });
@@ -570,9 +650,9 @@ async function run() {
       // the worst kind of gap: a run that is green about rules it never ran.
       // `isMobile` is what makes Chromium report a coarse pointer and no hover,
       // which is the environment those rules are written for.
-      hasTouch: viewport.compact,
-      isMobile: viewport.compact,
-      ...(viewport.compact ? { userAgent: devices['Pixel 7']?.userAgent } : {}),
+      hasTouch: viewport.compact && CAN_EMULATE_MOBILE,
+      ...(CAN_EMULATE_MOBILE ? { isMobile: viewport.compact } : {}),
+      ...(viewport.compact && CAN_EMULATE_MOBILE ? { userAgent: devices['Pixel 7']?.userAgent } : {}),
     });
     await installFixtures(context, 'populated');
 
@@ -688,8 +768,13 @@ async function run() {
         // routes where the shell is all there is, and on the tallest and
         // shortest windows where it actually bites.
         if (viewport.compact && (route.id === 'home' || route.id === 'tx')) {
-          const obscured = await focusWalk(page, 60);
-          for (const o of obscured) fail(scope, `${o}, which is a WCAG 2.2 focus-obscured failure`);
+          const focus = await focusWalk(page, 60);
+          for (const o of focus.hidden) {
+            fail(scope, `${o}, which is a WCAG 2.2 AA focus-obscured failure`);
+          }
+          for (const o of focus.grazed) {
+            grazes.push(`${scope}: ${o}`);
+          }
         }
 
         // --- continuity across a rotation ---
@@ -732,7 +817,7 @@ async function run() {
 
   await browser.close();
 
-  writeFileSync(join(OUT, 'mobile-report.json'), JSON.stringify({ base: BASE, build, report, findings, passes }, null, 2));
+  writeFileSync(join(OUT, 'mobile-report.json'), JSON.stringify({ base: BASE, browser: ENGINE_NAME, build, report, findings, grazes, passes }, null, 2));
 
   console.log(`\nMobile gate, build ${build}`);
   console.log(`${routes.length} routes across ${viewports.length} window sizes, ${report.length} measured pages\n`);
@@ -741,6 +826,17 @@ async function run() {
     for (const p of passes.slice(0, 12)) console.log(`  ${p}`);
     console.log('');
   }
+  if (grazes.length) {
+    // Printed every run, never suppressed. This is the difference between the
+    // engines, and a reader who cannot see it cannot judge it.
+    console.log(`-- ${grazes.length} focused controls landing partly under a fixed layer --`);
+    console.log('   AA asks that focus not be entirely hidden, which holds everywhere. This is the');
+    console.log('   AAA rule, and it is where the engines differ on re-scrolling something already');
+    console.log('   partly in view.');
+    for (const g of grazes.slice(0, 20)) console.log(`  ${g}`);
+    if (grazes.length > 20) console.log(`  ... and ${grazes.length - 20} more, see the report`);
+    console.log('');
+  }
   if (findings.length) {
     console.log(`-- ${findings.length} failures --`);
     for (const f of findings) console.log(`  ${f}`);

From cc42c7e2b6a5f817e38f64b5b1e05a6617a58c1c Mon Sep 17 00:00:00 2001
From: Bitcoin Universe <bitcoinuniversecorp@gmail.com>
Date: Sat, 29 Aug 2026 21:29:30 +0000
Subject: [PATCH 07/11] Measure what the shell costs a phone, against develop
 rather than a guess

A performance gate that measures the runner is worse than none, because
it reports a number and the number is about the machine. So this gates
the two things that are properties of the build and prints the one that
is not.

Compressed payload, gated at 480kB. develop at bea93c1ec is 463kB
compressed and 1655kB raw; with this work it is 464kB and 1659kB. One
kilobyte, for the safe-area tokens, the compact rules, the clear control
and the viewport service. An earlier version of this file carried a
budget with a baseline I had not measured written next to it as though I
had. Both sides are measured now and the comment says so.

Layout shift, gated at 0.1, with one route recorded as over it. The
transaction route shifts 0.103 on develop and 0.108 here. At about three
seconds div.panel grows from 46 to 193 pixels as the tracker bar and the
confirmations render into it, pushing div.bottom-panel down 148 and
shrinking it by the same. Reserving that room means knowing the panel's
height before the transaction is read, and an alert, a tracker bar and a
confirmation count are three different heights: a single min-height would
trade a measured shift for unmeasured dead space on the shorter states.
That is work on the tracker's loading design rather than on the shell, so
it is written down with its figure, printed every run, and the route is
held to it, which means drifting further fails even while it is over.

Largest paint is printed and not gated. The same commit measured twelve
seconds and twenty on two routes whose shells are identical, because this
machine was building and serving at the time. A number that swings by
eight seconds between runs of the same code cannot gate anything. What is
still failed is a paint that never happens at all, which is a shell that
did not render rather than one that rendered slowly.
---
 .github/workflows/universe-ci.yml          |  15 +
 docs/product/DESIGN-SYSTEM.md              |  41 +++
 scripts/universe/visual-qa/mobile-perf.mjs | 374 +++++++++++++++++++++
 3 files changed, 430 insertions(+)
 create mode 100644 scripts/universe/visual-qa/mobile-perf.mjs

diff --git a/.github/workflows/universe-ci.yml b/.github/workflows/universe-ci.yml
index 9b9417519f2..68014ba4600 100644
--- a/.github/workflows/universe-ci.yml
+++ b/.github/workflows/universe-ci.yml
@@ -377,6 +377,20 @@ jobs:
           --browser=firefox --routes=home,tx,address,blocks,docs
           --out=./artifacts-mobile-firefox
 
+      # What the shell costs a phone, and what it makes the page do while it
+      # arrives. The gated numbers are the compressed payload, which is a
+      # property of the build and identical on any machine, and layout shift,
+      # which is a property of the stylesheet. Largest paint is printed and not
+      # gated: this runner builds, serves and drives browsers at once, and the
+      # same commit measured twelve seconds and twenty on two routes whose
+      # shells are identical, so it would fail honest changes and pass slow
+      # ones depending on what else was running.
+      - name: What the shell costs on a phone
+        working-directory: scripts/universe/visual-qa
+        run: >-
+          node mobile-perf.mjs --base=http://127.0.0.1:$GATEWAY_PORT
+          --out=./artifacts-perf
+
       - name: Keep the mobile report
         if: always()
         uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4
@@ -386,4 +400,5 @@ jobs:
             scripts/universe/visual-qa/artifacts-mobile
             scripts/universe/visual-qa/artifacts-mobile-webkit
             scripts/universe/visual-qa/artifacts-mobile-firefox
+            scripts/universe/visual-qa/artifacts-perf
           retention-days: 30
diff --git a/docs/product/DESIGN-SYSTEM.md b/docs/product/DESIGN-SYSTEM.md
index 10cff13f919..4aeb0e4a50e 100644
--- a/docs/product/DESIGN-SYSTEM.md
+++ b/docs/product/DESIGN-SYSTEM.md
@@ -600,6 +600,46 @@ node scripts/universe/visual-qa/mobile-check.mjs --base=http://127.0.0.1:8080
 come from the same list the visual matrix walks, so the two gates cannot
 disagree about what the product is.
 
+## Performance budgets
+
+`scripts/universe/visual-qa/mobile-perf.mjs`, in the same job, on a 390 by 844
+window with the processor throttled four times and the network at slow 4G.
+
+Two numbers are gated, and they are the two that are properties of the build
+rather than of the machine:
+
+| Budget | Value | Why it is gateable |
+|---|---|---|
+| eager payload, compressed | 480kB | the same commit gives the same number anywhere |
+| cumulative layout shift | 0.1 | a property of the stylesheet, not the clock |
+
+The eager payload is runtime, polyfills, main and styles: what a browser must
+have before the shell exists. Measured at `bea93c1ec`, develop was 463kB
+compressed and 1655kB raw; with the mobile work it is 464kB and 1659kB. The
+ceiling is set where a real regression trips it and ordinary drift does not.
+Raise it deliberately, and say what bought the bytes.
+
+Largest contentful paint is printed and not gated. The 2.5 second target is a
+field number for a real device on a real network, and this is a throttled
+headless browser on a runner that is also building and serving. The same commit
+measured twelve seconds and twenty on two routes whose shells are identical. A
+number that swings by eight seconds between runs of the same code cannot gate
+anything; used as one it fails honest changes and passes slow ones depending on
+what else the machine is doing. What is still failed is a paint that never
+happens, which is a shell that did not render rather than one that rendered
+slowly.
+
+One route is over the layout budget for a reason that is written down rather
+than hidden. On the transaction route, at about three seconds, `div.panel`
+grows from 46 to 193 pixels as the tracker bar and the confirmations render
+into it, pushing `div.bottom-panel` down 148 pixels. That is 0.103 of shift,
+measured on develop before this work and 0.108 after. It is recorded with its
+figure and printed every run, and the route is held to that figure, so drifting
+further fails even while it is over. Reserving the room means knowing the
+panel's height before the transaction is read, and it is not one height: an
+alert, a tracker bar and a confirmation count are three different sizes. That
+is work on the tracker's loading design, not on the shell.
+
 ### Real devices
 
 Emulation is the gate; devices are the proof. Before a mobile change is
@@ -626,6 +666,7 @@ rotation, back navigation, and a live update arriving.
 | `scripts/universe/visual-qa/capture.mjs` | the route matrix: themes, widths, and data states |
 | `scripts/universe/visual-qa/modes-check.mjs` | forced colours and 200 percent zoom |
 | `scripts/universe/visual-qa/mobile-check.mjs` | the mobile gate: windows, insets, targets, fixed layers, rotation |
+| `scripts/universe/visual-qa/mobile-perf.mjs` | the payload, the layout shift, and the recorded exception to it |
 | `frontend/src/app/universe/universe-viewport.service.ts` | the visual viewport, published as CSS, for the software keyboard |
 | `scripts/universe/visual-qa/fixtures.mjs` | the data every reviewed route renders from |
 
diff --git a/scripts/universe/visual-qa/mobile-perf.mjs b/scripts/universe/visual-qa/mobile-perf.mjs
new file mode 100644
index 00000000000..ac508ffa1f4
--- /dev/null
+++ b/scripts/universe/visual-qa/mobile-perf.mjs
@@ -0,0 +1,374 @@
+#!/usr/bin/env node
+/**
+ * What the shell costs on a phone.
+ *
+ * Not a benchmark. A benchmark on a shared runner measures the runner, and the
+ * numbers move by more between two runs of the same commit than most changes
+ * move them. What this measures is the part that is a property of the build
+ * rather than of the machine, and it measures the machine-dependent part only
+ * to say whether it is in the right order of magnitude.
+ *
+ * Three things, in decreasing order of how much they can be trusted:
+ *
+ *   bytes      what a phone has to download and parse before the shell exists.
+ *              Deterministic: the same commit gives the same number on any
+ *              machine, so this is the one worth gating on.
+ *
+ *   layout     cumulative layout shift, and every shift large enough to be
+ *              worth naming, with the element that moved. Nearly deterministic
+ *              once the page has settled, because it is a property of the
+ *              stylesheet rather than of the clock.
+ *
+ *   paint      largest contentful paint under a throttled profile. Reported,
+ *              and only failed on a wide margin, because it is the one that
+ *              moves with the runner.
+ *
+ * The throttle is a low-end Android profile: four times slower than this
+ * machine's CPU, and slow 4G. It is not any particular phone. It is a floor
+ * that a phone somebody actually owns will be near.
+ *
+ * Usage:
+ *   node mobile-perf.mjs --base=http://127.0.0.1:8080
+ *   node mobile-perf.mjs --base=... --routes=home,tx --cpu=6
+ */
+import { chromium } from 'playwright';
+import { gzipSync } from 'zlib';
+import { mkdirSync, readFileSync, readdirSync, statSync, writeFileSync } from 'fs';
+import { dirname, join, resolve } from 'path';
+import { fileURLToPath } from 'url';
+
+import { ROUTES, installFixtures } from './capture.mjs';
+
+const HERE = dirname(fileURLToPath(import.meta.url));
+
+const args = Object.fromEntries(
+  process.argv.slice(2).map((a) => {
+    const [k, v] = a.replace(/^--/, '').split('=');
+    return [k, v ?? true];
+  }),
+);
+
+const BASE = args.base || 'http://localhost:4200';
+const OUT = resolve(args.out || join(HERE, 'artifacts-perf'));
+const DIST = resolve(args.dist || join(HERE, '..', '..', '..', 'frontend', 'dist', 'mempool', 'browser'));
+const CPU_THROTTLE = Number(args.cpu || 4);
+
+const PERF_ROUTE_IDS = args.routes ? String(args.routes).split(',') : ['home', 'tx', 'blocks', 'dogecoin-tx'];
+
+/**
+ * Budgets.
+ *
+ * The first two are the ones that fail a run. The eager payload is what the
+ * browser must have before anything appears, and it is checked against a
+ * ceiling rather than against the previous run, because a ratchet that only
+ * ever compares to yesterday drifts upward one acceptable step at a time.
+ *
+ * CLS is the Core Web Vitals "good" threshold. The footer used to be the whole
+ * budget on its own, which is what the viewport-height floor on the page column
+ * exists to prevent, so this is the number that would catch that coming back.
+ *
+ * LCP is reported rather than gated at its own threshold: 2.5s is a field
+ * number for a real device on a real network, and this is a throttled headless
+ * browser on a shared runner. The gate here is a wide one, at four times the
+ * field target, which catches a shell that has stopped painting rather than one
+ * that is a few hundred milliseconds slower than last week.
+ */
+const BUDGETS = {
+  // Compressed, because that is what crosses the network. The figure on disk
+  // is four times larger and is not what anybody downloads.
+  //
+  // 480kB, from measuring both sides rather than picking a round number.
+  //
+  // develop at bea93c1ec is 463kB compressed, 1655kB raw. This branch is 464kB
+  // compressed, 1659kB raw: one kilobyte, for the safe-area tokens, the
+  // compact rules, the clear control and the viewport service. The ceiling sits
+  // far enough above that ordinary drift does not trip it and a real regression
+  // does, and when it needs raising, raise it deliberately and say what bought
+  // the bytes.
+  eagerBytesGzipped: 480_000,
+  cls: 0.1,
+};
+
+/**
+ * Routes that are over the layout budget for a reason that predates this gate.
+ *
+ * One entry, and it is here rather than quietly excluded because a budget
+ * nobody can see is not a budget. The number is what develop measured at
+ * bea93c1ec under the same throttle, so a route drifting further gets caught
+ * even while it is over.
+ *
+ * The transaction route: at about three seconds, when the transaction's own
+ * data arrives, `div.panel` grows from 46 to 193 pixels as the tracker bar and
+ * the confirmations render into it. That pushes `div.bottom-panel` down by 148
+ * and shrinks it by the same, which is the whole 0.103.
+ *
+ * Reserving that room means knowing how tall the panel will be before the
+ * transaction is read, and it is not one height: a replaced transaction shows
+ * an alert, a pending one a tracker bar, a confirmed one a confirmation count.
+ * A single min-height would trade a measured shift for unmeasured dead space
+ * on the states that are shorter. That is a piece of work on the tracker's
+ * loading design rather than on the shell, so it is written down here with its
+ * measurement instead of being fixed badly or hidden.
+ */
+const KNOWN_LAYOUT_DEBT = {
+  tx: {
+    cls: 0.103,
+    note: 'div.panel grows 46 to 193px when the transaction arrives, pushing div.bottom-panel down 148px',
+  },
+};
+
+/** How much worse than the recorded figure counts as a regression rather than
+ *  noise. Two runs of the same commit moved this by 0.005. */
+const DEBT_TOLERANCE = 0.02;
+
+/**
+ * The scripts and styles a browser must have before the shell can exist.
+ *
+ * Reported raw and gzipped. Raw is what the parser has to chew through, which
+ * is the number that matters on a slow processor; gzipped is what the network
+ * has to carry, which is the number that matters on a slow connection. The
+ * budget is on the compressed figure because the gateway serves compressed and
+ * because it is the one a visitor pays on every cold load.
+ *
+ * Gzip rather than brotli: it is in the standard library, it is within a few
+ * percent of brotli for this content, and the point is a stable number to
+ * compare against rather than a byte-exact prediction of the wire.
+ */
+function eagerPayload() {
+  let total = 0;
+  let gzipped = 0;
+  const files = [];
+  for (const name of readdirSync(DIST)) {
+    if (!/^(runtime|polyfills|main|styles)\.[a-f0-9]+\.(js|css)$/.test(name)) continue;
+    const size = statSync(join(DIST, name)).size;
+    const gz = gzipSync(readFileSync(join(DIST, name)), { level: 9 }).length;
+    files.push({ name, size, gz });
+    total += size;
+    gzipped += gz;
+  }
+  files.sort((a, b) => b.gz - a.gz);
+  return { total, gzipped, files };
+}
+
+/**
+ * Collected inside the page, before anything else runs.
+ *
+ * Registered as an init script rather than after load, because both of these
+ * are buffered entry types: an observer registered after the fact with
+ * `buffered: true` sees earlier entries, but only if it is registered before
+ * the buffer is flushed, and the largest paint on a fast local server has
+ * usually already happened.
+ */
+function observeVitals() {
+  window.__vitals = { lcp: 0, cls: 0, shifts: [], longTasks: 0, longTaskMs: 0 };
+  try {
+    new PerformanceObserver((list) => {
+      for (const entry of list.getEntries()) {
+        window.__vitals.lcp = Math.max(window.__vitals.lcp, entry.startTime);
+      }
+    }).observe({ type: 'largest-contentful-paint', buffered: true });
+  } catch { /* an engine without it reports zero, and the run says so */ }
+
+  try {
+    new PerformanceObserver((list) => {
+      for (const entry of list.getEntries()) {
+        // Shifts the visitor caused by scrolling or typing are not the ones
+        // this is about.
+        if (entry.hadRecentInput) continue;
+        window.__vitals.cls += entry.value;
+        if (entry.value >= 0.01) {
+          const sources = (entry.sources || []).map((s) => {
+            const el = s.node;
+            if (!el || !el.tagName) return '(anonymous)';
+            const cls = typeof el.className === 'string' && el.className
+              ? `.${el.className.trim().split(/\s+/).filter((c) => !c.startsWith('ng-')).slice(0, 2).join('.')}`
+              : '';
+            return `${el.tagName.toLowerCase()}${el.id ? `#${el.id}` : ''}${cls}`;
+          });
+          window.__vitals.shifts.push({ value: Math.round(entry.value * 1000) / 1000, sources: sources.slice(0, 3) });
+        }
+      }
+    }).observe({ type: 'layout-shift', buffered: true });
+  } catch { /* as above */ }
+
+  try {
+    new PerformanceObserver((list) => {
+      for (const entry of list.getEntries()) {
+        window.__vitals.longTasks += 1;
+        window.__vitals.longTaskMs += entry.duration;
+      }
+    }).observe({ type: 'longtask', buffered: true });
+  } catch { /* as above */ }
+}
+
+async function run() {
+  mkdirSync(OUT, { recursive: true });
+
+  const probe = await fetch(BASE, { redirect: 'follow' }).catch((e) => {
+    throw new Error(`cannot reach ${BASE}: ${e.message}`);
+  });
+  if (!probe.ok) throw new Error(`${BASE} answered ${probe.status}`);
+  const html = await probe.text();
+  if (!/<title>[^<]*Universe Explorer/i.test(html)) {
+    throw new Error(`${BASE} is not serving Universe Explorer`);
+  }
+  const build = (html.match(/main\.([a-f0-9]{8,})\.js/) || [, 'unknown'])[1];
+
+  const eager = eagerPayload();
+  const routes = ROUTES.filter((r) => PERF_ROUTE_IDS.includes(r.id));
+  if (routes.length !== PERF_ROUTE_IDS.length) {
+    const missing = PERF_ROUTE_IDS.filter((id) => !routes.some((r) => r.id === id));
+    throw new Error(`these route ids are not in the shared route list: ${missing.join(', ')}`);
+  }
+
+  const browser = await chromium.launch({
+    args: ['--use-gl=angle', '--use-angle=swiftshader', '--enable-unsafe-swiftshader'],
+  });
+  const failures = [];
+  const known = [];
+  const rows = [];
+
+  for (const route of routes) {
+    const context = await browser.newContext({
+      viewport: { width: 390, height: 844 },
+      deviceScaleFactor: 1,
+      hasTouch: true,
+      isMobile: true,
+    });
+    await installFixtures(context, 'populated');
+    await context.addInitScript(observeVitals);
+    const page = await context.newPage();
+
+    // Slow 4G and a slow processor, through the devtools protocol, because
+    // Playwright's own API has no throttle.
+    const cdp = await context.newCDPSession(page);
+    await cdp.send('Network.enable');
+    await cdp.send('Network.emulateNetworkConditions', {
+      offline: false,
+      latency: 150,
+      downloadThroughput: Math.round((1.6 * 1024 * 1024) / 8),
+      uploadThroughput: Math.round((750 * 1024) / 8),
+      connectionType: 'cellular4g',
+    });
+    await cdp.send('Emulation.setCPUThrottlingRate', { rate: CPU_THROTTLE });
+
+    try {
+      await page.goto(BASE + route.path, { waitUntil: 'load', timeout: 120_000 });
+      // Long enough for the shell to finish arriving and for the late shifts
+      // that matter, which are the ones a visitor sees rather than the ones
+      // that happen before the first paint.
+      await page.waitForTimeout(6_000);
+      const vitals = await page.evaluate(() => window.__vitals);
+      const nav = await page.evaluate(() => {
+        const [entry] = performance.getEntriesByType('navigation');
+        return entry
+          ? { domContentLoaded: Math.round(entry.domContentLoadedEventEnd), load: Math.round(entry.loadEventEnd) }
+          : { domContentLoaded: 0, load: 0 };
+      });
+
+      const row = {
+        route: route.id,
+        lcpMs: Math.round(vitals.lcp),
+        cls: Math.round(vitals.cls * 1000) / 1000,
+        shifts: vitals.shifts,
+        longTasks: vitals.longTasks,
+        longTaskMs: Math.round(vitals.longTaskMs),
+        ...nav,
+      };
+      rows.push(row);
+
+      if (row.cls > BUDGETS.cls) {
+        const worst = row.shifts
+          .sort((a, b) => b.value - a.value)
+          .slice(0, 3)
+          .map((s) => `${s.value} from ${s.sources.join(', ')}`)
+          .join('; ');
+        const debt = KNOWN_LAYOUT_DEBT[route.id];
+        if (debt && row.cls <= debt.cls + DEBT_TOLERANCE) {
+          known.push(`${route.id}: layout shifted ${row.cls} against a recorded ${debt.cls}. ${debt.note}`);
+        } else if (debt) {
+          failures.push(
+            `${route.id}: layout shifted ${row.cls}, worse than the ${debt.cls} recorded for it`
+            + ` by more than ${DEBT_TOLERANCE}${worst ? ` (${worst})` : ''}`,
+          );
+        } else {
+          failures.push(`${route.id}: layout shifted ${row.cls}, over the ${BUDGETS.cls} budget${worst ? ` (${worst})` : ''}`);
+        }
+      }
+      // Largest paint is reported and not gated on a threshold.
+      //
+      // It was, at four times the field target, and that was still wrong. This
+      // runner builds, serves and drives several browsers at once, and a
+      // measurement taken while it does reflects the queue rather than the
+      // build: the same commit measured twelve seconds and twenty on two
+      // routes whose shells are identical. A number that swings by eight
+      // seconds between runs of the same code cannot be a gate; used as one it
+      // would fail honest changes and pass slow ones depending on what else
+      // the machine was doing.
+      //
+      // What is still worth failing on is a paint that never happens at all,
+      // which is a shell that did not render rather than one that rendered
+      // slowly, and that answer does not move with the load.
+      if (row.lcpMs === 0) {
+        failures.push(`${route.id}: no largest contentful paint was reported at all, so either nothing painted or the observer never ran`);
+      }
+    } finally {
+      await page.close().catch(() => undefined);
+      await context.close().catch(() => undefined);
+    }
+  }
+
+  await browser.close();
+
+  if (eager.gzipped > BUDGETS.eagerBytesGzipped) {
+    failures.push(
+      `the eager payload is ${(eager.gzipped / 1024).toFixed(0)}kB compressed, over the ${(BUDGETS.eagerBytesGzipped / 1024).toFixed(0)}kB budget`
+      + ` (${eager.files.map((f) => `${f.name} ${(f.gz / 1024).toFixed(0)}kB`).join(', ')})`,
+    );
+  }
+
+  writeFileSync(join(OUT, 'perf-report.json'), JSON.stringify({ base: BASE, build, cpuThrottle: CPU_THROTTLE, budgets: BUDGETS, knownDebt: KNOWN_LAYOUT_DEBT, eager, rows, failures, known }, null, 2));
+
+  console.log(`\nMobile performance, build ${build}, CPU throttled ${CPU_THROTTLE}x on slow 4G\n`);
+  console.log(
+    `Eager payload ${(eager.gzipped / 1024).toFixed(0)}kB compressed`
+    + ` of a ${(BUDGETS.eagerBytesGzipped / 1024).toFixed(0)}kB budget,`
+    + ` ${(eager.total / 1024).toFixed(0)}kB raw`,
+  );
+  for (const f of eager.files) {
+    console.log(`  ${f.name.padEnd(34)} ${(f.gz / 1024).toFixed(0)}kB  (${(f.size / 1024).toFixed(0)}kB raw)`);
+  }
+  console.log('');
+  console.log('Largest paint is reported, not gated. See the note beside the check.');
+  console.log('route            LCP      CLS   long tasks');
+  for (const r of rows) {
+    console.log(
+      `${r.route.padEnd(16)} ${String(r.lcpMs + 'ms').padEnd(8)} ${String(r.cls).padEnd(6)} ${r.longTasks} (${r.longTaskMs}ms)`,
+    );
+    for (const s of r.shifts.sort((a, b) => b.value - a.value).slice(0, 3)) {
+      console.log(`                   shift ${s.value} from ${s.sources.join(', ')}`);
+    }
+  }
+  console.log('');
+  if (known.length) {
+    // Printed every run, never suppressed. A route that is over budget for a
+    // reason somebody wrote down is still over budget, and the way it stays
+    // visible is by being printed rather than filtered.
+    console.log('-- over budget for a recorded reason, and held to that figure --');
+    for (const k of known) console.log(`  ${k}`);
+    console.log('');
+  }
+  if (failures.length) {
+    console.log(`-- ${failures.length} over budget --`);
+    for (const f of failures) console.log(`  ${f}`);
+    console.log('');
+    process.exit(1);
+  }
+  console.log('Everything inside budget.\n');
+}
+
+if (process.argv[1] && resolve(process.argv[1]) === resolve(fileURLToPath(import.meta.url))) {
+  run().catch((e) => { console.error(e); process.exit(1); });
+}
+
+export { BUDGETS, eagerPayload };

From 2903b457f14581f2bd60580e31af5bccce9e3729 Mon Sep 17 00:00:00 2001
From: Bitcoin Universe <bitcoinuniversecorp@gmail.com>
Date: Sat, 29 Aug 2026 21:33:07 +0000
Subject: [PATCH 08/11] Every release checks the shell on a phone, then
 somebody looks at it

The release procedure verified the origin, the chain routes and the build
identity, and nothing in it looked at the product the way most visitors
hold it.

Two steps now. The mobile gate against the public origin, which is worth
running there rather than only in CI because the two faults it catches
that CI cannot see are a gateway serving a stale index.html, which shows
up the moment the viewport meta loses viewport-fit=cover, and a
configuration difference that changes which destinations the bar carries.

Then somebody opens it on a phone. Written down as a step because
emulation is not a device and should not be allowed to read like one: it
cannot tell you whether a thumb reaches the bar one-handed, whether the
keyboard covers the result you were reading, or whether the page zooms
when you tap the field.
---
 docs/operations/DEPLOYMENT.md | 28 +++++++++++++++++++++++++++-
 1 file changed, 27 insertions(+), 1 deletion(-)

diff --git a/docs/operations/DEPLOYMENT.md b/docs/operations/DEPLOYMENT.md
index 981d5c9c519..8e4534b41b9 100644
--- a/docs/operations/DEPLOYMENT.md
+++ b/docs/operations/DEPLOYMENT.md
@@ -222,7 +222,33 @@ suite can see that.
    a protocol advertised as readable whose authority cannot answer, a
    configured authority with no checkpoint, or a frontend and backend on
    different builds.
-7. Keep the previous release directory until the stability window closes.
+7. Check the shell on a phone against the public origin, not only in CI.
+
+   ```bash
+   node scripts/universe/visual-qa/mobile-check.mjs --base=https://explorer.bitcoinuniverse.io
+   ```
+
+   It walks eleven routes across seven window sizes with a coarse pointer, a
+   simulated display cutout and a rotation, and answers every request from
+   fixtures, so what it measures is the deployed shell rather than the chain.
+   Add `--browser=webkit` for the engine Safari is built on.
+
+   This is worth running against production and not only against the build,
+   because the two things it is most likely to catch are things CI cannot see:
+   a gateway serving a stale `index.html`, which shows up immediately as the
+   viewport meta losing `viewport-fit=cover`, and a configuration difference
+   that changes which destinations the bottom bar carries.
+
+   Then look at it by hand on a phone. The gate is emulation, and emulation is
+   not a device: it cannot tell you whether a thumb reaches the bottom bar
+   one-handed, whether the software keyboard covers the result you were
+   reading, or whether the page zooms when you tap the search field. Open the
+   header and search, switch chain, search with the keyboard up, open a
+   transaction, scroll a table, rotate, go back, and watch a live update
+   arrive. Current Safari on iPhone and iPad, Chrome on Android, Samsung
+   Internet, and Chrome on iPhone.
+
+8. Keep the previous release directory until the stability window closes.
 
 Rolling back to a release from before the socket handover needs the port back,
 because such a gateway opens 8099 itself and dies on bind while systemd holds

From 2bbead735906ef0589845a72f49847b57c146ed0 Mon Sep 17 00:00:00 2001
From: Bitcoin Universe <bitcoinuniversecorp@gmail.com>
Date: Sat, 29 Aug 2026 22:41:55 +0000
Subject: [PATCH 09/11] WebKit needs its system libraries, not just its binary

The WebKit pass failed on runner-02 with a list of missing shared
objects: libflite, libavif, libhyphen, libmanette, libenchant and the
rest. A Chromium-only host has never needed them, and WebKit does not
degrade when they are absent, it refuses to launch.

playwright install --with-deps installs them. It is idempotent and costs
nothing once they are present.

Worth the step rather than dropping the engine: WebKit is what Safari and
Chrome on iOS are both built on, and the rules this work turns on, dvh,
safe-area insets and the pointer media feature, are exactly the ones
where engines disagree.
---
 .github/workflows/universe-ci.yml | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/.github/workflows/universe-ci.yml b/.github/workflows/universe-ci.yml
index 68014ba4600..869505f7301 100644
--- a/.github/workflows/universe-ci.yml
+++ b/.github/workflows/universe-ci.yml
@@ -323,9 +323,15 @@ jobs:
       # image has never needed the other two. Downloading them is a few
       # seconds against a warm cache and the alternative is a job that claims
       # three engines and silently runs one.
+      #
+      # `--with-deps` because the browser binary is not enough: WebKit needs a
+      # set of system libraries that a Chromium-only host has never had, and
+      # without them it does not fall back to anything, it refuses to launch
+      # and prints the list. Measured that way on runner-02. The apt step is
+      # idempotent and near-free once the packages are there.
       - name: Fetch the engines this job drives
         working-directory: scripts/universe/visual-qa
-        run: npx playwright install chromium webkit firefox
+        run: npx playwright install --with-deps chromium webkit firefox
 
       # Same reasoning as the matrix job: a fixed port once measured another
       # job's build, so each run takes a free one and refuses to continue

From 9f2e7362b4acbb2d4dc44c0f1548cb4c77c39f56 Mon Sep 17 00:00:00 2001
From: Bitcoin Universe <bitcoinuniversecorp@gmail.com>
Date: Sat, 29 Aug 2026 22:46:19 +0000
Subject: [PATCH 10/11] Name the focusable selector list once

Three copies of the same seven-selector list, one per header shape, is
three chances for them to drift apart, and the copy that drifts is the
one nobody looks at. It is a Sass variable interpolated into each block
now, so the list has one definition and the three blocks differ only in
the numbers they are there to state.
---
 frontend/src/styles.scss | 29 ++++++++---------------------
 1 file changed, 8 insertions(+), 21 deletions(-)

diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss
index 621ec83653d..553fdb3286f 100644
--- a/frontend/src/styles.scss
+++ b/frontend/src/styles.scss
@@ -170,38 +170,25 @@ html {
 // gets a correct result, and an engine that applies both over-scrolls slightly,
 // which places the focused control further from the bar than needed and is not
 // a fault. Below the breakpoint only, since that is where the fixed bar is.
+//
+// The selector list is named once. Three copies of it is three chances for
+// them to drift apart, and the one that drifts is the one nobody notices.
+$focusable: 'a[href], button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"])';
+
 @media (max-width: 991.98px) {
-  a[href],
-  button,
-  input,
-  select,
-  textarea,
-  summary,
-  [tabindex]:not([tabindex='-1']) {
+  #{$focusable} {
     scroll-margin-bottom: calc(var(--u-bottom-nav-space) + var(--u-space-4));
     scroll-margin-top: calc(7rem + var(--u-safe-top));
   }
 
   @media (min-width: 600px) {
-    a[href],
-    button,
-    input,
-    select,
-    textarea,
-    summary,
-    [tabindex]:not([tabindex='-1']) {
+    #{$focusable} {
       scroll-margin-top: calc(4.5rem + var(--u-safe-top));
     }
   }
 
   @media (max-height: 479.98px) {
-    a[href],
-    button,
-    input,
-    select,
-    textarea,
-    summary,
-    [tabindex]:not([tabindex='-1']) {
+    #{$focusable} {
       scroll-margin-bottom: calc(var(--u-touch-target) + 1px + var(--u-safe-bottom) + var(--u-space-3));
       scroll-margin-top: calc(4rem + var(--u-safe-top));
     }

From eac4ef74e2715a138a1b25b8be3a6afea984eedf Mon Sep 17 00:00:00 2001
From: Bitcoin Universe <bitcoinuniversecorp@gmail.com>
Date: Sun, 30 Aug 2026 00:15:17 +0000
Subject: [PATCH 11/11] Run WebKit where it can actually start, and clear the
 Sass warnings

The fleet cannot run WebKit. It needs system libraries a Chromium-only
host has never had, it does not degrade without them but refuses to
launch and prints the list, and installing them needs sudo the runner
user does not have: playwright install --with-deps fails on
universe-linux-ultra-03 with "sudo: a password is required".

So WebKit and Firefox move to their own job on a hosted runner, where
that command works, and the fleet keeps the Chromium pass and the
performance gate. Two jobs rather than one so the exception is visible
and so a hosted outage cannot take the Chromium gate down with it. When
the fleet image gains the libraries, delete the job and put the steps
back where they belong; the comment says so.

Worth the exception rather than dropping the engine. WebKit is what
Safari and Chrome on iOS are both built on, and dvh, safe-area insets and
the pointer media feature are exactly the rules where engines disagree:
a Chromium-only run proves nothing about the platform half of this work
was written for.

Also three declarations I had left sitting after a nested rule, in the
lens option, the protocol chip and the flow disclosure. Sass warns that
its order there will change to match CSS, and the warning was mine. The
build is clean of them now.
---
 .github/workflows/universe-ci.yml             | 133 ++++++++++++------
 docs/product/DESIGN-SYSTEM.md                 |  20 ++-
 .../app/dashboard/dashboard.component.scss    |  14 +-
 .../asset-flow/asset-flow.component.scss      |   5 +-
 .../protocol-strip.component.scss             |   4 +-
 5 files changed, 119 insertions(+), 57 deletions(-)

diff --git a/.github/workflows/universe-ci.yml b/.github/workflows/universe-ci.yml
index 869505f7301..6fc32231976 100644
--- a/.github/workflows/universe-ci.yml
+++ b/.github/workflows/universe-ci.yml
@@ -319,20 +319,6 @@ jobs:
         working-directory: scripts/universe/visual-qa
         run: npm ci
 
-      # The matrix job beside this one drives Chromium only, so the runner
-      # image has never needed the other two. Downloading them is a few
-      # seconds against a warm cache and the alternative is a job that claims
-      # three engines and silently runs one.
-      #
-      # `--with-deps` because the browser binary is not enough: WebKit needs a
-      # set of system libraries that a Chromium-only host has never had, and
-      # without them it does not fall back to anything, it refuses to launch
-      # and prints the list. Measured that way on runner-02. The apt step is
-      # idempotent and near-free once the packages are there.
-      - name: Fetch the engines this job drives
-        working-directory: scripts/universe/visual-qa
-        run: npx playwright install --with-deps chromium webkit firefox
-
       # Same reasoning as the matrix job: a fixed port once measured another
       # job's build, so each run takes a free one and refuses to continue
       # unless the process answering is the one it started.
@@ -358,31 +344,6 @@ jobs:
         working-directory: scripts/universe/visual-qa
         run: node mobile-check.mjs --base=http://127.0.0.1:$GATEWAY_PORT --out=./artifacts-mobile
 
-      # WebKit is the engine Safari is built on, and it is the closest an
-      # automated run gets to an iPhone. It is worth its own pass rather than
-      # a sample of one: the rules this work turns on, dvh, safe-area insets
-      # and the pointer media feature, are exactly the ones where engines
-      # differ, and a Chromium-only run would have proved nothing about the
-      # platform the fixes were written for. Measured at about four minutes.
-      - name: The same windows on the engine Safari is built on
-        working-directory: scripts/universe/visual-qa
-        run: >-
-          node mobile-check.mjs --base=http://127.0.0.1:$GATEWAY_PORT
-          --browser=webkit --out=./artifacts-mobile-webkit
-
-      # Firefox cannot be put into mobile emulation, so it reports a fine
-      # pointer and the pointer-conditional rules do not apply to it. What it
-      # still measures is every window size, the overflow, the fixed layers,
-      # the safe areas and the rotation, which is worth having on a third
-      # engine. A subset of routes, because this is a smoke check and the two
-      # passes above are the thorough ones.
-      - name: A third engine, on the checks that do not need a thumb
-        working-directory: scripts/universe/visual-qa
-        run: >-
-          node mobile-check.mjs --base=http://127.0.0.1:$GATEWAY_PORT
-          --browser=firefox --routes=home,tx,address,blocks,docs
-          --out=./artifacts-mobile-firefox
-
       # What the shell costs a phone, and what it makes the page do while it
       # arrives. The gated numbers are the compressed payload, which is a
       # property of the build and identical on any machine, and layout shift,
@@ -404,7 +365,99 @@ jobs:
           name: universe-mobile-qa
           path: |
             scripts/universe/visual-qa/artifacts-mobile
+            scripts/universe/visual-qa/artifacts-perf
+          retention-days: 30
+
+  # The two engines the fleet cannot run.
+  #
+  # WebKit needs a set of system libraries a Chromium-only host has never had,
+  # and it does not degrade without them: it refuses to launch and prints the
+  # list. Installing them is one apt command, and the fleet's runner user has
+  # no passwordless sudo, so `playwright install --with-deps` fails there with
+  # "sudo: a password is required". Measured on universe-linux-ultra-03.
+  #
+  # So this one job runs on a hosted runner, where that command works. It is
+  # the exception to using the fleet, and it is here rather than folded into
+  # the job above so the exception is visible and so a hosted outage cannot
+  # take the Chromium gate down with it.
+  #
+  # It is worth the exception. WebKit is what Safari and Chrome on iOS are both
+  # built on, and dvh, safe-area insets and the pointer media feature are
+  # exactly the rules where engines disagree: a Chromium-only run proves
+  # nothing about the platform half this work was written for.
+  #
+  # When the fleet's image gains those libraries, delete this job and put the
+  # two steps back in the one above, which is where they belong.
+  mobile-engines:
+    name: WebKit and Firefox
+    runs-on: ubuntu-latest
+    timeout-minutes: 45
+    steps:
+      - name: Checkout
+        uses: actions/checkout@11d5960a326750d5838078e36cf38b85af677262 # v4
+
+      - name: Setup Node
+        uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4
+        with:
+          node-version: '24.19.0'
+          cache: npm
+          cache-dependency-path: frontend/package-lock.json
+
+      - name: Install
+        working-directory: frontend
+        run: npm ci
+
+      - name: Production build
+        working-directory: frontend
+        run: npm run build:universe
+
+      - name: Install the visual QA harness
+        working-directory: scripts/universe/visual-qa
+        run: npm ci
+
+      - name: Fetch the engines and what they need to start
+        working-directory: scripts/universe/visual-qa
+        run: npx playwright install --with-deps webkit firefox
+
+      - name: Serve the built frontend
+        run: |
+          GATEWAY_PORT=$(node -e "const s=require('net').createServer();s.listen(0,'127.0.0.1',()=>{console.log(s.address().port);s.close()})")
+          echo "GATEWAY_PORT=$GATEWAY_PORT" >> "$GITHUB_ENV"
+          UNIVERSE_GATEWAY_PORT=$GATEWAY_PORT UNIVERSE_GATEWAY_ROOT=frontend/dist/mempool/browser node scripts/universe/gateway.mjs &
+          GATEWAY_PID=$!
+          for i in $(seq 1 30); do
+            curl -fsS -o /dev/null "http://127.0.0.1:$GATEWAY_PORT/" && break
+            sleep 1
+          done
+          kill -0 "$GATEWAY_PID"
+          curl -fsS "http://127.0.0.1:$GATEWAY_PORT/__gateway/health"
+
+      # The full window set, on the engine Safari is built on.
+      - name: Every window a phone can be, on WebKit
+        working-directory: scripts/universe/visual-qa
+        run: >-
+          node mobile-check.mjs --base=http://127.0.0.1:$GATEWAY_PORT
+          --browser=webkit --out=./artifacts-mobile-webkit
+
+      # Firefox cannot be put into mobile emulation, so it reports a fine
+      # pointer and the pointer-conditional rules do not apply to it. What it
+      # still measures is every window size, the overflow, the fixed layers,
+      # the safe areas and the rotation, which is worth having on a third
+      # engine. A subset of routes, because this is the smoke check and the two
+      # thorough passes are elsewhere.
+      - name: A third engine, on the checks that do not need a thumb
+        working-directory: scripts/universe/visual-qa
+        run: >-
+          node mobile-check.mjs --base=http://127.0.0.1:$GATEWAY_PORT
+          --browser=firefox --routes=home,tx,address,blocks,docs
+          --out=./artifacts-mobile-firefox
+
+      - name: Keep the engine reports
+        if: always()
+        uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4
+        with:
+          name: universe-mobile-engines
+          path: |
             scripts/universe/visual-qa/artifacts-mobile-webkit
             scripts/universe/visual-qa/artifacts-mobile-firefox
-            scripts/universe/visual-qa/artifacts-perf
           retention-days: 30
diff --git a/docs/product/DESIGN-SYSTEM.md b/docs/product/DESIGN-SYSTEM.md
index 4aeb0e4a50e..bc6d93230e1 100644
--- a/docs/product/DESIGN-SYSTEM.md
+++ b/docs/product/DESIGN-SYSTEM.md
@@ -554,12 +554,20 @@ WebKit report a coarse pointer. `hasTouch` alone does not, and without it every
 `@media (pointer: coarse)` rule in the product goes unexercised while appearing
 to be covered.
 
-Three engines, with `--browser`. Chromium and WebKit take the whole set;
-WebKit is the engine Safari is built on, which is the closest an automated run
-gets to an iPhone. Firefox cannot be put into mobile emulation, so it reports a
-fine pointer and takes a narrower pass: window sizes, overflow, fixed layers,
-safe areas and rotation are all still measured there, and the run says so in
-its own header rather than leaving a reader to assume otherwise.
+Three engines, with `--browser`, across two CI jobs. The `mobile` job runs
+Chromium and the performance gate on the runner fleet. The `mobile-engines` job
+runs WebKit and Firefox on a hosted runner, and that split is not a preference:
+WebKit needs system libraries a Chromium-only host has never had, it refuses to
+launch without them rather than degrading, and the fleet's runner user has no
+passwordless sudo to install them. When the fleet image gains those libraries,
+the two jobs should become one again.
+
+WebKit is the engine Safari is built on, and Chrome on iOS with it, which is
+the closest an automated run gets to an iPhone. Firefox cannot be put into
+mobile emulation, so it reports a fine pointer and takes a narrower pass:
+window sizes, overflow, fixed layers, safe areas and rotation are all still
+measured there, and the run says so in its own header rather than leaving a
+reader to assume otherwise.
 
 That is also why every rule with a touch floor is written
 `@media (pointer: coarse), (max-width: 991.98px)` rather than on the pointer
diff --git a/frontend/src/app/dashboard/dashboard.component.scss b/frontend/src/app/dashboard/dashboard.component.scss
index 5123647359a..3eaab2b07d6 100644
--- a/frontend/src/app/dashboard/dashboard.component.scss
+++ b/frontend/src/app/dashboard/dashboard.component.scss
@@ -598,13 +598,6 @@
 }
 
 .lens-option {
-  // 34px is a comfortable pill to click and a near miss to tap, and there are
-  // three of them side by side. The larger floor only applies where a thumb is
-  // doing the pointing.
-  @media (pointer: coarse), (max-width: 991.98px) {
-    min-height: var(--u-touch-target);
-  }
-
   background: var(--u-surface-sunken);
   border: 1px solid var(--u-border);
   border-radius: var(--u-radius-pill);
@@ -618,6 +611,13 @@
               border-color var(--u-duration-fast) var(--u-ease-out),
               color var(--u-duration-fast) var(--u-ease-out);
 
+  // 34px is a comfortable pill to click and a near miss to tap, and there are
+  // three of them side by side. The larger floor only applies where a thumb is
+  // doing the pointing, or where the window is narrow enough to be a phone.
+  @media (pointer: coarse), (max-width: 991.98px) {
+    min-height: var(--u-touch-target);
+  }
+
   &:hover {
     background: var(--u-surface-hover);
     border-color: var(--u-border-strong);
diff --git a/frontend/src/app/universe/asset-flow/asset-flow.component.scss b/frontend/src/app/universe/asset-flow/asset-flow.component.scss
index 722487d9353..9a0386f0207 100644
--- a/frontend/src/app/universe/asset-flow/asset-flow.component.scss
+++ b/frontend/src/app/universe/asset-flow/asset-flow.component.scss
@@ -302,14 +302,15 @@
     color: var(--u-text-muted);
     min-height: 32px;
 
+    display: flex;
+    align-items: center;
+
     // This is the disclosure that opens the evidence for a whole flow, and
     // there is one per flow. 32px is a deliberate desktop size; a thumb wants
     // the platform floor.
     @media (pointer: coarse), (max-width: 991.98px) {
       min-height: var(--u-touch-target);
     }
-    display: flex;
-    align-items: center;
   }
 
   .evidence-list {
diff --git a/frontend/src/app/universe/protocol-strip/protocol-strip.component.scss b/frontend/src/app/universe/protocol-strip/protocol-strip.component.scss
index ba57b649ed3..1bac41d304c 100644
--- a/frontend/src/app/universe/protocol-strip/protocol-strip.component.scss
+++ b/frontend/src/app/universe/protocol-strip/protocol-strip.component.scss
@@ -50,6 +50,8 @@
     border-radius: 0.25rem;
     min-height: 32px;
 
+    @include u.universe-motion;
+
     // The strip is a row of protocol chips, all the same shape, all leading
     // somewhere. Repeated controls sitting side by side are the case the
     // platform floor is written for, because a near miss lands on the chip
@@ -62,8 +64,6 @@
     &:focus-visible {
       border-color: var(--universe-protocol-runes);
     }
-
-    @include u.universe-motion;
   }
 }