diff --git a/docs/branch-review-ledger.md b/docs/branch-review-ledger.md
index eaddabdf45..130a2de3dc 100644
--- a/docs/branch-review-ledger.md
+++ b/docs/branch-review-ledger.md
@@ -1301,4 +1301,5 @@ Records before 2026-07-28 were written by hand and had drifted: 146 lines carrie
 | 2026-07-29 | cursor/page-anchored-search-composer-30ee | 7ff134ca7f614db527b8d142676640305533669d | branch-cleanup-deletion-pending | DELETION PENDING — content proven fully on main. Merge-base with main is 79d1c879 and tree(merge-base) equals tree(tip): git diff --name-only 79d1c879 7ff134ca reports 0 files, so the tip introduces nothing beyond a state already in main. Backs no open PR. Deletion blocked by HTTP 403; HEAD recorded here so the later branch-cleanup row can be keyed to it after the ref is gone. Supersedes the aggregate main-keyed row at 855aa291, which recorded no candidate HEADs. | local git only for the content proof: git merge-base, git diff --name-only <merge-base> <tip> (0 files), git diff --name-only origin/main...<tip> (0 files), full history after git fetch --unshallow. PROVIDER-BACKED evidence obtained (GitHub reads, authorised repo-scope): open-PR head cross-check via GitHub API against PRs #1374/#1377/#1384/#1385/#1386/#1387, and GitHub MCP capability inspection. PROVIDER-BACKED MUTATION ATTEMPTED AND REJECTED: git push origin --delete returned HTTP 403; no branch was deleted. No OpenAI/Supabase/hosted-CI calls. |
 | 2026-07-29 | cursor/pr-1379-babysit-ledger-9365 | be2de03f855cb7fdfccea4bb74d05eb4c9bf6c61 | branch-cleanup-deletion-pending | DELETION PENDING — content proven fully on main. Merge-base with main is b2740480 and tree(merge-base) equals tree(tip): git diff --name-only b2740480 be2de03f reports 0 files, so the tip introduces nothing beyond a state already in main. Backs no open PR. Deletion blocked by HTTP 403; HEAD recorded here so the later branch-cleanup row can be keyed to it after the ref is gone. Supersedes the aggregate main-keyed row at 855aa291, which recorded no candidate HEADs. | local git only for the content proof: git merge-base, git diff --name-only <merge-base> <tip> (0 files), git diff --name-only origin/main...<tip> (0 files), full history after git fetch --unshallow. PROVIDER-BACKED evidence obtained (GitHub reads, authorised repo-scope): open-PR head cross-check via GitHub API against PRs #1374/#1377/#1384/#1385/#1386/#1387, and GitHub MCP capability inspection. PROVIDER-BACKED MUTATION ATTEMPTED AND REJECTED: git push origin --delete returned HTTP 403; no branch was deleted. No OpenAI/Supabase/hosted-CI calls. |
 | 2026-07-29 | claude/latency-findings-impl-s8g01v | 9e2ee65ca0bcce45a3cb6a0539e265ec8d961582 | PR #1377 latency findings — #098 stale offline-harness references | Codex P2 confirmed and fixed: the #098 row in docs/outstanding-issues.md still named test-cache-path.mjs and check-rag-fixtures.mjs as the offline fixtures for the round-trip counting harness. Neither exercises a RAG request (cache paths; fixture-manifest validation), so a harness built on them would count nothing. The audit doc carried the retraction at :358 but this row did not - the same local-retraction pattern flagged in two prior rounds. Now names eval-rag-offline.mjs, test-rag-offline.mjs, rag-offline-contract.mjs and the contract fixture, all verified present, with the correction recorded inline. Docs only. | prettier --check clean; docs:check-links 1363; docs:check-scripts 390; grep confirms no stale refs remain |
+| 2026-07-29 | 1391 | baecef05cac86c4d52af895d483a33ba3c40cd61 | PR #1391 review | reviewed clean — text-4xs retirement confirmed against globals.css (--text-3xs 0.625rem present, --text-4xs absent); orphan guard proven to fail on a reintroduced class; six Playwright retries all retry action-plus-effect so a genuine regression still fails. Resolved the outstanding-issues #108/#109 double-allocation (renumbered to #110/#111, marker to 112) and recorded #111 done | verify:cheap exit 0 (429 files / 4404 tests); design-token-contract 28 passed; check:branch-review-ledger passed |
 | 2026-07-29 | 1374 | c14edb9c6f0bdbbfb147752503e016f2543fd803 | PR #1374 review + merge | merged as 3704007c — DocumentViewer identity-bound state clear (P1) implemented and verified red without it; all 12 review threads resolved | verify:cheap exit 0 (429 files / 4403 tests); PR required success; Production UI success |
diff --git a/src/app/globals.css b/src/app/globals.css
index 3174e6b09a..ae28c2af6b 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -339,6 +339,8 @@
   /* Active left-rail marker (nav/list "current" indicator). One token so the
      accent rail is a consistent 2px everywhere instead of hand-inlined at 2px/3px. */
   --shadow-rail-active: inset 2px 0 0 var(--clinical-accent);
+  /* Mode-nav collapsed control: a surface lifted off the header. */
+  --shadow-lift: 0 1px 2px rgb(12 24 34 / 8%), 0 2px 6px rgb(12 24 34 / 5%);
   --safe-area-top: env(safe-area-inset-top, 0px);
   --safe-area-right: env(safe-area-inset-right, 0px);
   --safe-area-bottom: env(safe-area-inset-bottom, 0px);
@@ -526,6 +528,9 @@
   --shadow-lux: var(--e4);
   --shadow-inset: inset 0 1px 0 rgb(255 255 255 / 4%);
   --shadow-focus: 0 0 0 3px color-mix(in srgb, var(--focus) 25%, transparent), var(--shadow-soft);
+  /* A drop shadow does not read on a near-black ground, so the lifted control
+     is described by an inner top highlight instead. */
+  --shadow-lift: inset 0 1px 0 rgb(255 255 255 / 7%), 0 2px 6px rgb(0 0 0 / 45%);
   color-scheme: dark;
 }
 
@@ -2308,6 +2313,93 @@ td,
   }
 }
 
+/* ── Mode navigation ──────────────────────────────────────────────────────
+   The bar carrying one mode's own pages. `ModeNavHeaderPortal` moves it into
+   the universal header's collapse track, so it hides and reveals as one object
+   with the header at every width and owns no scroll listener of its own.
+
+   Density is chosen by CONTAINER width in `rem` — never by device width, and
+   never by runtime measurement. The unit is the mechanism: raising the browser
+   or OS text size grows the root font, so a phone crosses a threshold exactly
+   when its labels would stop fitting. A 320px phone is 20rem at 100% text and
+   keeps three slots; at 200% it resolves to 10rem and collapses to one control.
+
+   The collapsed control is the DEFAULT and the bar is the enhancement, so
+   anything unmeasured, unsupported or mid-load renders the one state that
+   cannot overflow at any width or text size (WCAG 1.4.4 Resize Text, 1.4.10
+   Reflow).
+
+   Budgets, measured against this app's phone type ramp with slot padding
+   counted: four full labels need 394px and fit from 26rem; three plus More need
+   256px and fit from 16rem.
+   ───────────────────────────────────────────────────────────────────────── */
+
+@utility mode-nav {
+  container-type: inline-size;
+  container-name: mode-nav;
+  min-width: 0;
+}
+
+.mode-nav__bar {
+  display: none;
+}
+
+.mode-nav__control {
+  display: flex;
+}
+
+/* Which slots survive each band is decided in the component from the item
+   COUNT alone — a static fact, never a measurement — and encoded as two
+   attributes that CSS then switches on:
+     `data-band="3|4|5"`  the narrowest band at which this destination appears
+     `data-until="3|4"`   the widest band at which More still appears
+   Slots are never re-ordered, so the ones that stay do not move as the
+   container narrows; the overflow only ever fills from the tail. */
+.mode-nav__slot[data-band="4"],
+.mode-nav__slot[data-band="5"] {
+  display: none;
+}
+
+@container mode-nav (min-width: 16rem) {
+  .mode-nav__control {
+    display: none;
+  }
+
+  .mode-nav__bar {
+    display: grid;
+    grid-auto-flow: column;
+    /* Equal columns, so outer margins and inter-slot gaps are identical by
+       construction rather than by hand-tuned padding. */
+    grid-auto-columns: 1fr;
+  }
+}
+
+@container mode-nav (min-width: 26rem) {
+  .mode-nav__slot[data-band="4"] {
+    display: flex;
+  }
+
+  .mode-nav__slot[data-until="3"] {
+    display: none;
+  }
+}
+
+@container mode-nav (min-width: 34rem) {
+  .mode-nav__slot[data-band="5"] {
+    display: flex;
+  }
+
+  .mode-nav__slot[data-until="4"] {
+    display: none;
+  }
+
+  /* Wide: slots size to their content and sit left, so the bar reads as a
+     continuation of the header rather than four columns stretched across it. */
+  .mode-nav__bar {
+    display: flex;
+  }
+}
+
 /* Motion keyframes (suppressed under prefers-reduced-motion below) */
 @keyframes fade-up {
   from {
diff --git a/src/components/mode-nav/mode-nav-bands.ts b/src/components/mode-nav/mode-nav-bands.ts
new file mode 100644
index 0000000000..04565cbcca
--- /dev/null
+++ b/src/components/mode-nav/mode-nav-bands.ts
@@ -0,0 +1,49 @@
+/**
+ * Slot capacities for the mode navigation bar, narrowest first. These mirror
+ * the `@container mode-nav (min-width: …)` bands in `globals.css`; changing one
+ * without the other is what `tests/mode-nav-contract.test.ts` guards against.
+ */
+export const MODE_NAV_BANDS = [3, 4, 5] as const;
+
+export type ModeNavBand = (typeof MODE_NAV_BANDS)[number];
+
+/** Below this a bar is a label, not navigation, so nothing renders. */
+export const MODE_NAV_MIN_ITEMS = 2;
+
+export type ModeNavBandPlan = {
+  /** Item index → the narrowest band at which it appears. Absent = always folded. */
+  firstVisibleBand: Map<number, ModeNavBand>;
+  /** The widest band at which More still appears, or null when it is never needed. */
+  moreUntil: ModeNavBand | null;
+};
+
+/**
+ * Decides which destinations survive each width band.
+ *
+ * For a capacity of C slots: if every item fits, all of them show and there is
+ * no overflow entry; otherwise the first C-1 show and the tail folds into More,
+ * which occupies the last slot.
+ *
+ * Derived from the item COUNT alone — a static fact known at render — so this
+ * never measures layout. Runtime measurement ("priority plus") would let the
+ * bar's contents change under the user between screens and orientations, which
+ * is the one thing navigation must not do.
+ *
+ * Because a wider band is always a superset of a narrower one, the slots that
+ * stay never move as the container narrows; the overflow only fills from the
+ * tail.
+ */
+export function planModeNavBands(count: number): ModeNavBandPlan {
+  const firstVisibleBand = new Map<number, ModeNavBand>();
+  let moreUntil: ModeNavBand | null = null;
+
+  for (const capacity of MODE_NAV_BANDS) {
+    const visible = count <= capacity ? count : capacity - 1;
+    for (let index = 0; index < visible; index += 1) {
+      if (!firstVisibleBand.has(index)) firstVisibleBand.set(index, capacity);
+    }
+    if (count > capacity) moreUntil = capacity;
+  }
+
+  return { firstVisibleBand, moreUntil };
+}
diff --git a/src/components/mode-nav/mode-nav-portal.tsx b/src/components/mode-nav/mode-nav-portal.tsx
new file mode 100644
index 0000000000..63913ca14b
--- /dev/null
+++ b/src/components/mode-nav/mode-nav-portal.tsx
@@ -0,0 +1,53 @@
+"use client";
+
+import { useLayoutEffect, useState, type ReactNode } from "react";
+import { createPortal } from "react-dom";
+
+import { phoneHeaderCollapseAddonSlotId } from "@/lib/mode-home-composer";
+
+/**
+ * Moves a mode's navigation bar into the universal header's collapse track at
+ * *every* width.
+ *
+ * This is a deliberate sibling of `PhoneHeaderCollapsePortal`, which resolves
+ * the same host only below the phone breakpoint. That gate is why the Therapy
+ * strip never travelled with the header on a tablet or desktop: it stayed in
+ * page flow as `position: sticky; top: 0` instead.
+ *
+ * The header needs no change for this to work. Its addon slot is rendered with
+ * no breakpoint prefix (`master-search-header.tsx`, `empty:hidden` inside
+ * `universal-header-collapse`), and for the `GlobalSearchShell` host —
+ * `{ strategy: "collapse", wide: "sticky" }` — the collapsing wrapper takes its
+ * ungated `grid-template-rows: 1fr -> 0fr` branch at every width. Occupying the
+ * slot from here therefore inherits the header's hide and reveal exactly, with
+ * no second scroll listener that could drift out of step with it.
+ *
+ * Falls back to normal flow when no host exists — routes rendered without the
+ * universal header, and the server pass — so navigation is never lost.
+ *
+ * Slot ownership: the addon slot holds ONE page-owned header. `DocumentViewer`
+ * and the differentials detail page already claim it on phones, so a mode whose
+ * routes include those pages must not also mount a bar there. `ModeNav` renders
+ * nothing below two destinations, which is what keeps those modes clear today;
+ * `tests/mode-nav-contract.test.ts` fails if that stops being true.
+ */
+export function ModeNavHeaderPortal({ children }: { children: ReactNode }) {
+  const [host, setHost] = useState<HTMLElement | null>(null);
+
+  useLayoutEffect(() => {
+    const sync = () => {
+      const next = document.getElementById(phoneHeaderCollapseAddonSlotId);
+      setHost((current) => (current === next ? current : next));
+    };
+
+    sync();
+    // The shell remounts its header across mode switches, so the host element's
+    // identity is not stable for this component's lifetime.
+    const observer = new MutationObserver(sync);
+    observer.observe(document.body, { childList: true, subtree: true });
+
+    return () => observer.disconnect();
+  }, []);
+
+  return host ? createPortal(children, host) : children;
+}
diff --git a/src/components/mode-nav/mode-nav.tsx b/src/components/mode-nav/mode-nav.tsx
new file mode 100644
index 0000000000..8f45a61a41
--- /dev/null
+++ b/src/components/mode-nav/mode-nav.tsx
@@ -0,0 +1,295 @@
+"use client";
+
+import { ChevronDown, type LucideIcon } from "lucide-react";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { useMemo, useRef, useState, type MouseEvent } from "react";
+
+import { cn } from "@/components/ui-primitives";
+import { Sheet } from "@/components/ui/sheet";
+
+import { MODE_NAV_MIN_ITEMS, planModeNavBands } from "./mode-nav-bands";
+import { ModeNavHeaderPortal } from "./mode-nav-portal";
+
+export type ModeNavItem = {
+  id: string;
+  /** The only label. Never abbreviated — a slot shows its real word or folds into More. */
+  label: string;
+  /** A real URL. Never an onClick-only control: deep links, back and prefetch must work. */
+  href: string;
+  icon: LucideIcon;
+  /**
+   * State, not size: "3/4" for a basket that holds four, never "205" for a
+   * catalogue. A total is noise on every screen; a fill is worth a glance.
+   */
+  count?: string;
+};
+
+const focusRing =
+  "focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-[color:var(--focus)]";
+
+/** 48px hit area — clear of `expectMinTouchTarget`'s 44px and its rounding flake. */
+const slotBase =
+  "mode-nav__slot relative flex min-h-12 min-w-0 items-center justify-center px-3 no-underline transition-colors";
+
+function SlotInk({
+  icon: Icon,
+  label,
+  count,
+  state,
+  trailing,
+}: {
+  icon?: LucideIcon;
+  label: string;
+  count?: string;
+  state: "on" | "trail" | "off";
+  trailing?: boolean;
+}) {
+  return (
+    <span
+      className={cn(
+        // One weight in every state. Bolding the active label changes its width,
+        // which shifts the rule and every neighbour on each navigation.
+        "relative flex h-5 min-w-0 items-center gap-2 text-sm-minus font-semibold tracking-[-0.008em]",
+        // The 2px rule takes space at the bottom of the bar, so a centred label
+        // sits optically high without this compensating offset.
+        "mt-0.5",
+        state === "on" ? "text-[color:var(--text-heading)]" : "text-[color:var(--text-muted)]",
+      )}
+    >
+      {Icon ? (
+        <Icon
+          aria-hidden="true"
+          className={cn(
+            "h-[1.0625rem] w-[1.0625rem] shrink-0",
+            state === "on"
+              ? "text-[color:var(--clinical-accent)]"
+              : state === "trail"
+                ? "text-[color:var(--clinical-accent)]/55"
+                : "opacity-70",
+          )}
+        />
+      ) : null}
+      <span className="min-w-0 truncate">{label}</span>
+      {count ? (
+        <span
+          className={cn(
+            "nums grid h-[1.125rem] min-w-[1.125rem] shrink-0 place-items-center rounded-full border px-1.5 text-3xs font-bold leading-none",
+            state === "on"
+              ? "border-[color:var(--clinical-accent-border)] bg-[color:var(--clinical-accent-soft)] text-[color:var(--clinical-accent-hover)]"
+              : "border-[color:var(--border-strong)] text-[color:var(--text-soft)]",
+          )}
+        >
+          {count}
+        </span>
+      ) : null}
+      {trailing ? <ChevronDown aria-hidden="true" className="h-3.5 w-3.5 shrink-0 opacity-55" /> : null}
+      {/* The rule hangs off the ink, so it is exactly as wide as icon plus word:
+          short under "Search", long under "Recommend". A rule sized to the
+          padding box always looks a few pixels wrong. */}
+      <span
+        aria-hidden="true"
+        className={cn(
+          "absolute inset-x-0 -bottom-[0.8125rem] rounded-t-[2px]",
+          state === "on"
+            ? "h-0.5 bg-[color:var(--clinical-accent)]"
+            : state === "trail"
+              ? "h-px bg-[color:var(--clinical-accent)]/35"
+              : "h-0.5 bg-transparent",
+        )}
+      />
+    </span>
+  );
+}
+
+/**
+ * Navigation for the pages of one mode, pinned inside the universal header.
+ *
+ * Only destinations belong here. Anything needing an already-selected record —
+ * a therapy's brief intervention, its patient sheet — belongs on that record's
+ * page; putting it in a bar is what let the old Therapy strip silently retarget
+ * to a different therapy when the selected one had no artifact.
+ *
+ * Density is chosen by container width in `globals.css`; see the "Mode
+ * navigation" block there for why the unit is `rem` rather than `px`.
+ */
+export function ModeNav({
+  items,
+  label,
+  activeId,
+  originId,
+}: {
+  items: ModeNavItem[];
+  /** Names the landmark, e.g. "Therapy pages". */
+  label: string;
+  /** Defaults to the item whose href matches the current path. */
+  activeId?: string;
+  /** The page arrived from; marked with a half-weight trail while on a record. */
+  originId?: string;
+}) {
+  const pathname = usePathname();
+  const [open, setOpen] = useState(false);
+  // The sheet has two openers and CSS decides which one exists: below a 16rem
+  // container only the collapsed control is displayed, at 16rem and up only the
+  // More slot is. Both stay in the DOM either way, so a ref pinned to one of
+  // them hands the Sheet a `display: none` element to restore focus to half the
+  // time — the browser refuses to focus it and the keyboard user is dropped on
+  // <body>. Capture whichever button was actually clicked; by definition it is
+  // the displayed one.
+  const openerRef = useRef<HTMLButtonElement | null>(null);
+  const openSheet = (event: MouseEvent<HTMLButtonElement>) => {
+    openerRef.current = event.currentTarget;
+    setOpen(true);
+  };
+  const plan = useMemo(() => planModeNavBands(items.length), [items.length]);
+
+  if (items.length < MODE_NAV_MIN_ITEMS) return null;
+
+  // Record routes (`/therapy-compass/<slug>`) match no item, so nothing claims
+  // to be the current page and the origin trail carries lineage instead.
+  const derived = items.find((item) => pathname === item.href || pathname.startsWith(`${item.href}/`));
+  const active = activeId ? items.find((item) => item.id === activeId) : derived;
+  const activeIndex = active ? items.indexOf(active) : -1;
+
+  // If the page you are on has folded into the overflow, More takes its label,
+  // icon and rule rather than reading "More" with nothing active — and keeps
+  // its chevron, so it is still obviously the way to the rest.
+  const activeBand = activeIndex >= 0 ? plan.firstVisibleBand.get(activeIndex) : undefined;
+  const moreCarriesActive = plan.moreUntil !== null && activeBand === undefined && activeIndex >= 0;
+
+  const bar = (
+    <nav
+      aria-label={label}
+      data-testid="mode-nav"
+      className="mode-nav border-b border-[color:var(--border)] bg-[color:var(--surface)]"
+    >
+      {/* Collapsed: the default, and the only state that cannot overflow. */}
+      <div className="mode-nav__control px-4 pb-2.5 pt-1.5">
+        <button
+          type="button"
+          onClick={openSheet}
+          aria-haspopup="dialog"
+          aria-expanded={open}
+          className={cn(
+            "flex min-h-12 w-full items-center gap-2 rounded-xl border border-[color:var(--border)] bg-[color:var(--surface)] px-3.5 text-left text-sm-minus font-semibold text-[color:var(--text-heading)] shadow-[var(--shadow-lift)]",
+            focusRing,
+          )}
+        >
+          {active ? (
+            <active.icon
+              aria-hidden="true"
+              className="h-[1.0625rem] w-[1.0625rem] text-[color:var(--clinical-accent)]"
+            />
+          ) : null}
+          <span className="min-w-0 flex-1 truncate">{active ? active.label : label}</span>
+          {active ? (
+            <span className="nums shrink-0 text-3xs font-bold text-[color:var(--text-soft)]">
+              {activeIndex + 1}/{items.length}
+            </span>
+          ) : null}
+          <ChevronDown aria-hidden="true" className="h-4 w-4 shrink-0 text-[color:var(--text-muted)]" />
+        </button>
+      </div>
+
+      {/* Enhanced: the bar, once the container can hold at least three slots.
+          Left padding is the gutter minus the slot padding, so the INK aligns
+          to the mark above it rather than the box. */}
+      <ul className="mode-nav__bar h-12 items-stretch px-1">
+        {items.map((item, index) => {
+          const band = plan.firstVisibleBand.get(index);
+          const isActive = item.id === active?.id;
+          const isOrigin = !isActive && item.id === originId;
+          return (
+            <li
+              key={item.id}
+              data-band={band ?? "none"}
+              className={cn(slotBase, focusRing, band ? undefined : "hidden")}
+            >
+              <Link
+                href={item.href}
+                aria-current={isActive ? "page" : undefined}
+                className={cn("flex h-full w-full items-center justify-center rounded-lg no-underline", focusRing)}
+              >
+                <SlotInk
+                  icon={item.icon}
+                  label={item.label}
+                  count={item.count}
+                  state={isActive ? "on" : isOrigin ? "trail" : "off"}
+                />
+              </Link>
+            </li>
+          );
+        })}
+        {plan.moreUntil !== null ? (
+          <li data-until={plan.moreUntil} className={cn(slotBase, "flex")}>
+            <button
+              type="button"
+              onClick={openSheet}
+              aria-haspopup="dialog"
+              aria-expanded={open}
+              className={cn("flex h-full w-full items-center justify-center rounded-lg", focusRing)}
+            >
+              <SlotInk
+                icon={moreCarriesActive ? active?.icon : undefined}
+                label={moreCarriesActive && active ? active.label : "More"}
+                state={moreCarriesActive ? "on" : "off"}
+                trailing
+              />
+            </button>
+          </li>
+        ) : null}
+      </ul>
+    </nav>
+  );
+
+  return (
+    <>
+      <ModeNavHeaderPortal>{bar}</ModeNavHeaderPortal>
+      {/* Portaled to the body so the sheet is never inside the collapsing grid:
+          the scroll signal must not be able to hide an open dialog. */}
+      <Sheet
+        open={open}
+        onClose={() => setOpen(false)}
+        title={label}
+        returnFocusRef={openerRef}
+        portal
+        testId="mode-nav-sheet"
+      >
+        <ul className="space-y-0.5">
+          {items.map((item) => {
+            const isActive = item.id === active?.id;
+            const Icon = item.icon;
+            return (
+              <li key={item.id}>
+                <Link
+                  href={item.href}
+                  onClick={() => setOpen(false)}
+                  aria-current={isActive ? "page" : undefined}
+                  className={cn(
+                    "flex min-h-12 items-center gap-3 rounded-lg px-2.5 text-sm font-semibold no-underline",
+                    focusRing,
+                    isActive
+                      ? "bg-[color:var(--clinical-accent-soft)] text-[color:var(--clinical-accent-hover)]"
+                      : "text-[color:var(--text-muted)] hover:bg-[color:var(--surface-subtle)]",
+                  )}
+                >
+                  <Icon
+                    aria-hidden="true"
+                    className={cn(
+                      "h-[1.15rem] w-[1.15rem] shrink-0",
+                      isActive && "text-[color:var(--clinical-accent)]",
+                    )}
+                  />
+                  <span className="min-w-0 flex-1 truncate">{item.label}</span>
+                  {item.count ? (
+                    <span className="nums shrink-0 text-2xs font-bold text-[color:var(--text-soft)]">{item.count}</span>
+                  ) : null}
+                </Link>
+              </li>
+            );
+          })}
+        </ul>
+      </Sheet>
+    </>
+  );
+}
diff --git a/src/components/therapy-compass/nav.tsx b/src/components/therapy-compass/nav.tsx
index 889d1a6e41..bf80ea968d 100644
--- a/src/components/therapy-compass/nav.tsx
+++ b/src/components/therapy-compass/nav.tsx
@@ -1,8 +1,11 @@
 "use client";
 
+import { Columns3, Search, Sparkles, Waypoints } from "lucide-react";
+
 import { PhoneHeaderCollapsePortal } from "@/components/clinical-dashboard/phone-header-collapse-portal";
+import { ModeNav, type ModeNavItem } from "@/components/mode-nav/mode-nav";
 
-import { useTcBindings } from "./bindings";
+import { MAX_COMPARE, useTcBindings } from "./bindings";
 
 /** Core Therapy destinations for non-home screens. */
 export function TherapyCompassNav() {
@@ -166,3 +169,50 @@ export function TherapyCompassNav() {
   // with the universal header. sm+: keep in-flow sticky inside the workspace.
   return <PhoneHeaderCollapsePortal>{navShell}</PhoneHeaderCollapsePortal>;
 }
+
+const BASE = "/therapy-compass";
+
+/**
+ * Therapy's pages for the shared `ModeNav`, in declared order.
+ *
+ * Order is load-bearing: at three slots the survivors are the first two, so the
+ * library door and the only destination carrying state are the ones that stay.
+ *
+ * Four destinations, not the seven the pill strip carries. Home duplicates the
+ * mode pill directly above it. Brief intervention and Patient sheet act on a
+ * selected therapy and already exist as availability-guarded buttons on the
+ * record page (`screens/detail-screen.tsx`); in the strip they were both
+ * duplicated and unsafe, silently opening the first catalogue record that
+ * happened to have one when nothing was selected. Review is a governance queue
+ * rather than a step in delivering care, and is reachable from the detail and
+ * pathway screens.
+ */
+function useTherapyNavItems(): ModeNavItem[] {
+  const b = useTcBindings();
+
+  return [
+    { id: "search", label: "Search", href: `${BASE}/search`, icon: Search },
+    {
+      id: "compare",
+      label: "Compare",
+      href: `${BASE}/compare`,
+      icon: Columns3,
+      // Fill, not catalogue size: the basket holds four and the strip never
+      // showed how many were in it.
+      count: `${b.compareSlugs.length}/${MAX_COMPARE}`,
+    },
+    { id: "recommend", label: "Recommend", href: `${BASE}/recommend`, icon: Sparkles },
+    { id: "pathways", label: "Pathways", href: `${BASE}/pathways`, icon: Waypoints },
+  ];
+}
+
+/**
+ * The shared mode bar, pinned inside the universal header at every width.
+ *
+ * Currently rendered on `/therapy-compass/search` only; every other Therapy
+ * route keeps {@link TherapyCompassNav} until the rollout continues.
+ */
+export function TherapyModeNav() {
+  const items = useTherapyNavItems();
+  return <ModeNav items={items} label="Therapy pages" />;
+}
diff --git a/src/components/therapy-compass/workspace.tsx b/src/components/therapy-compass/workspace.tsx
index 72325299b7..6394084197 100644
--- a/src/components/therapy-compass/workspace.tsx
+++ b/src/components/therapy-compass/workspace.tsx
@@ -8,7 +8,7 @@ import { ModeHomeVerificationFooter } from "@/components/mode-home-template";
 
 import { TcProvider, useTcBindings } from "./bindings";
 import { accentControl } from "./controls";
-import { TherapyCompassNav } from "./nav";
+import { TherapyCompassNav, TherapyModeNav } from "./nav";
 
 function TherapyCompassFooter() {
   return (
@@ -67,6 +67,24 @@ function TherapyCompassMain({
   );
 }
 
+/**
+ * Picks the mode's navigation for the current screen.
+ *
+ * Search is the first route on the shared `ModeNav`, which pins itself inside
+ * the universal header's collapse track and so hides and reveals with it at
+ * every width. Every other route keeps the original pill strip until the
+ * rollout continues.
+ *
+ * This reads `isSearch` from bindings rather than comparing the pathname again:
+ * `resolveRoute` is the single canonical pathname-to-screen mapping, and
+ * `usePathname()` in the workspace below is called outside `TcProvider`, where
+ * `useTcBindings` is not available.
+ */
+function TherapyNavSlot() {
+  const b = useTcBindings();
+  return b.isSearch ? <TherapyModeNav /> : <TherapyCompassNav />;
+}
+
 /** Shared Therapy workspace chrome for every `/therapy-compass/*` route. */
 export function TherapyCompassWorkspace({ children }: { children: ReactNode }) {
   const pathname = usePathname();
@@ -75,7 +93,7 @@ export function TherapyCompassWorkspace({ children }: { children: ReactNode }) {
   return (
     <TcProvider>
       <div className="tc-root tc-workspace-006">
-        {isHome ? null : <TherapyCompassNav />}
+        {isHome ? null : <TherapyNavSlot />}
         <TherapyCompassMain showFooter={!isHome} asMain={!isHome}>
           {children}
         </TherapyCompassMain>
diff --git a/tests/mode-nav-contract.test.ts b/tests/mode-nav-contract.test.ts
new file mode 100644
index 0000000000..7c7d506ec8
--- /dev/null
+++ b/tests/mode-nav-contract.test.ts
@@ -0,0 +1,169 @@
+import { readFileSync } from "node:fs";
+
+import { describe, expect, it } from "vitest";
+
+import { MODE_NAV_BANDS, MODE_NAV_MIN_ITEMS, planModeNavBands } from "@/components/mode-nav/mode-nav-bands";
+
+const read = (relativePath: string) => readFileSync(new URL(`../${relativePath}`, import.meta.url), "utf8");
+
+const modeNavSource = read("src/components/mode-nav/mode-nav.tsx");
+const portalSource = read("src/components/mode-nav/mode-nav-portal.tsx");
+const globalsSource = read("src/app/globals.css");
+const therapyNavSource = read("src/components/therapy-compass/nav.tsx");
+const workspaceSource = read("src/components/therapy-compass/workspace.tsx");
+
+/** The slice of globals.css owned by the bar, so assertions cannot drift into other rules. */
+const modeNavCss = globalsSource.slice(
+  globalsSource.indexOf("@utility mode-nav"),
+  globalsSource.indexOf("/* Motion keyframes"),
+);
+
+describe("ModeNav band planning", () => {
+  it("shows every destination when they all fit, with no overflow entry", () => {
+    for (const capacity of MODE_NAV_BANDS) {
+      const plan = planModeNavBands(capacity);
+      for (let index = 0; index < capacity; index += 1) {
+        expect(plan.firstVisibleBand.has(index)).toBe(true);
+      }
+    }
+    // Four destinations fit the 4- and 5-slot bands outright.
+    expect(planModeNavBands(4).moreUntil).toBe(3);
+    expect(planModeNavBands(3).moreUntil).toBeNull();
+  });
+
+  it("folds only the tail, so slots that stay never move", () => {
+    // Therapy: Search, Compare, Recommend, Pathways.
+    const plan = planModeNavBands(4);
+    expect(plan.firstVisibleBand.get(0)).toBe(3); // Search — visible in every band
+    expect(plan.firstVisibleBand.get(1)).toBe(3); // Compare — visible in every band
+    expect(plan.firstVisibleBand.get(2)).toBe(4); // Recommend — appears at 4 slots
+    expect(plan.firstVisibleBand.get(3)).toBe(4); // Pathways — appears at 4 slots
+
+    // A wider band is always a superset of a narrower one. That is what keeps
+    // muscle memory intact across a rotation: nothing is ever reordered.
+    for (const [index, band] of plan.firstVisibleBand) {
+      for (const capacity of MODE_NAV_BANDS) {
+        if (capacity >= band) expect(plan.firstVisibleBand.get(index)).toBeLessThanOrEqual(capacity);
+      }
+    }
+  });
+
+  it("never plans more slots than the cap, at any item count", () => {
+    for (let count = MODE_NAV_MIN_ITEMS; count <= 12; count += 1) {
+      const plan = planModeNavBands(count);
+      for (const capacity of MODE_NAV_BANDS) {
+        const visible = [...plan.firstVisibleBand.values()].filter((band) => band <= capacity).length;
+        const moreVisible = plan.moreUntil !== null && capacity <= plan.moreUntil ? 1 : 0;
+        expect(visible + moreVisible).toBeLessThanOrEqual(capacity);
+      }
+    }
+  });
+
+  it("always offers a route to every destination", () => {
+    // Anything folded must be reachable through More; nothing may be stranded.
+    for (let count = MODE_NAV_MIN_ITEMS; count <= 12; count += 1) {
+      const plan = planModeNavBands(count);
+      const folded = count - [...plan.firstVisibleBand.keys()].length;
+      if (folded > 0) expect(plan.moreUntil).not.toBeNull();
+    }
+  });
+});
+
+describe("ModeNav density contract", () => {
+  it("chooses density by container width in rem, never px", () => {
+    const thresholds = [...modeNavCss.matchAll(/@container mode-nav \(min-width: ([^)]+)\)/g)].map((m) => m[1].trim());
+    expect(thresholds).toEqual(["16rem", "26rem", "34rem"]);
+
+    // The unit is the mechanism: raising the browser or OS text size grows the
+    // root font, so a phone crosses a threshold exactly when its labels would
+    // stop fitting. A px threshold would ignore the text-size request and clip
+    // instead (WCAG 1.4.4 Resize Text, 1.4.10 Reflow).
+    for (const threshold of thresholds) {
+      expect(threshold).toMatch(/rem$/);
+    }
+
+    // The CSS bands and the TS capacities must not drift apart.
+    expect(MODE_NAV_BANDS).toEqual([3, 4, 5]);
+  });
+
+  it("never measures layout at runtime", () => {
+    // "Priority plus" would let the bar's contents change under the user
+    // between screens and orientations.
+    expect(modeNavSource).not.toMatch(/getBoundingClientRect|offsetWidth|scrollWidth|ResizeObserver|matchMedia/);
+  });
+
+  it("makes the collapsed control the default and the bar the enhancement", () => {
+    // Anything unmeasured, unsupported or mid-load must render the one state
+    // that cannot overflow at any width or text size.
+    const baseBar = modeNavCss.match(/\.mode-nav__bar\s*\{([^}]*)\}/)?.[1] ?? "";
+    const baseControl = modeNavCss.match(/\.mode-nav__control\s*\{([^}]*)\}/)?.[1] ?? "";
+    expect(baseBar).toContain("display: none");
+    expect(baseControl).toContain("display: flex");
+    // The bar is only ever revealed inside a container query.
+    expect(modeNavCss.indexOf(".mode-nav__bar {\n    display: grid")).toBeGreaterThan(
+      modeNavCss.indexOf("@container mode-nav"),
+    );
+  });
+
+  it("never scrolls sideways at any density", () => {
+    // A sideways-scrolling bar hides destinations people then never find — the
+    // exact defect this replaced in Therapy.
+    expect(modeNavCss).not.toMatch(/overflow(-x)?:\s*(auto|scroll)/);
+  });
+
+  it("distributes phone slots as equal columns", () => {
+    // Equal columns make the outer margins and inter-slot gaps identical by
+    // construction, rather than by hand-tuned padding that drifts.
+    expect(modeNavCss).toContain("grid-auto-columns: 1fr");
+  });
+});
+
+describe("ModeNav header anchoring", () => {
+  it("claims the shared header slot at every width without touching the header", () => {
+    expect(portalSource).toContain("phoneHeaderCollapseAddonSlotId");
+    // Wider than PhoneHeaderCollapsePortal's gate by design: the bar must hide
+    // with the header on tablet and desktop too.
+    expect(portalSource).not.toContain("matchMedia");
+    expect(portalSource).not.toContain("max-width: 639px");
+    // Same before-paint move and observer discipline as the phone portal.
+    expect(portalSource).toContain("useLayoutEffect");
+    expect(portalSource).toContain("new MutationObserver(sync)");
+    // Falls back to normal flow when no host exists, so navigation is never lost.
+    expect(portalSource).toContain("host ? createPortal(children, host) : children");
+  });
+
+  it("keeps the addon slot to a single page-owned header", () => {
+    // DocumentViewer and the differentials detail page already claim the slot on
+    // phones. Neither mode may also mount a bar there; today neither can,
+    // because both have fewer than MODE_NAV_MIN_ITEMS destinations and ModeNav
+    // renders nothing. This fails the moment that stops being true.
+    expect(read("src/components/DocumentViewer.tsx")).toContain("PhoneHeaderCollapsePortal");
+    expect(read("src/components/differentials/differential-detail-page.tsx")).toContain("PhoneHeaderCollapsePortal");
+    expect(modeNavSource).toMatch(/items\.length < MODE_NAV_MIN_ITEMS\) return null/);
+  });
+});
+
+describe("ModeNav item contract", () => {
+  it("routes with real hrefs so deep links, back and prefetch keep working", () => {
+    expect(modeNavSource).toContain("href={item.href}");
+    expect(modeNavSource).not.toMatch(/onClick\?:/);
+  });
+
+  it("gives Therapy four destinations in declared order and no record-scoped artifacts", () => {
+    const itemIds = [...therapyNavSource.matchAll(/\bid: "([a-z-]+)"/g)].map((match) => match[1]);
+    // Order is load-bearing: at three slots the survivors are the first two.
+    expect(itemIds).toEqual(["search", "compare", "recommend", "pathways"]);
+
+    // Compare carries fill, not catalogue size: "3/4" is worth a glance, "205"
+    // is noise on every screen.
+    expect(therapyNavSource).toContain("${b.compareSlugs.length}/${MAX_COMPARE}");
+  });
+
+  it("keeps the old strip for every Therapy route except search", () => {
+    // The rollout is reversible by one line, and the pill strip still ships on
+    // compare / recommend / pathways / detail.
+    expect(therapyNavSource).toContain("PhoneHeaderCollapsePortal");
+    expect(therapyNavSource).toContain('data-testid="therapy-compass-section-nav"');
+    expect(workspaceSource).toContain("b.isSearch ? <TherapyModeNav /> : <TherapyCompassNav />");
+  });
+});
diff --git a/tests/mode-nav.dom.test.tsx b/tests/mode-nav.dom.test.tsx
new file mode 100644
index 0000000000..a1314b90fd
--- /dev/null
+++ b/tests/mode-nav.dom.test.tsx
@@ -0,0 +1,93 @@
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { Columns3, Search, Sparkles, Waypoints } from "lucide-react";
+import type { ReactNode } from "react";
+import { describe, expect, it, vi } from "vitest";
+
+// ModeNav has two triggers for one Sheet, and CSS decides which one exists:
+// below a 16rem container only the collapsed control is displayed, at 16rem and
+// up only the More slot is (`@container mode-nav` in globals.css). Both stay in
+// the DOM either way, so the Sheet's `returnFocusRef` must follow the button the
+// user actually pressed — a ref pinned to one of them hands the Sheet a
+// `display: none` element half the time, the browser declines to focus it, and
+// the keyboard user is dropped on <body>. The collapsed state is not an edge
+// case: it is what a phone reaches at 200% text zoom, the reflow path this bar
+// was designed around.
+//
+// jsdom loads no stylesheet and will happily focus a hidden element, so these
+// tests pin the restore TARGET — which opener the Sheet was told to return to —
+// rather than the browser's focusability rule, which jsdom cannot model.
+
+vi.mock("next/navigation", () => ({
+  usePathname: () => "/therapy-compass/search",
+}));
+
+vi.mock("next/link", () => ({
+  default: ({ children, href, ...rest }: { children: ReactNode; href: string }) => (
+    <a href={href} {...rest}>
+      {children}
+    </a>
+  ),
+}));
+
+import { ModeNav, type ModeNavItem } from "@/components/mode-nav/mode-nav";
+
+const items: ModeNavItem[] = [
+  { id: "search", label: "Search", href: "/therapy-compass/search", icon: Search },
+  { id: "compare", label: "Compare", href: "/therapy-compass/compare", icon: Columns3, count: "0/4" },
+  { id: "recommend", label: "Recommend", href: "/therapy-compass/recommend", icon: Sparkles },
+  { id: "pathways", label: "Pathways", href: "/therapy-compass/pathways", icon: Waypoints },
+];
+
+/** Apply what the `@container mode-nav (min-width: 16rem)` band does at runtime. */
+function renderNav(band: "collapsed" | "bar") {
+  render(<ModeNav items={items} label="Therapy pages" />);
+  const bar = window.document.querySelector<HTMLElement>(".mode-nav__bar");
+  const control = window.document.querySelector<HTMLElement>(".mode-nav__control");
+  expect(bar).not.toBeNull();
+  expect(control).not.toBeNull();
+  bar!.style.display = band === "bar" ? "grid" : "none";
+  control!.style.display = band === "bar" ? "none" : "flex";
+
+  const collapsedTrigger = control!.querySelector<HTMLButtonElement>("button");
+  const moreTrigger = bar!.querySelector<HTMLButtonElement>("li[data-until] button");
+  expect(collapsedTrigger).not.toBeNull();
+  expect(moreTrigger).not.toBeNull();
+  return { collapsedTrigger: collapsedTrigger!, moreTrigger: moreTrigger! };
+}
+
+async function openThenClose(opener: HTMLButtonElement) {
+  // Deliberately NOT focusing the opener first. jsdom leaves focus on <body>
+  // through a synthetic click, so the Sheet's `previousActiveElement` fallback
+  // is <body> and the only thing that can move focus off it is the explicit
+  // `returnFocusRef` restore — which makes the wait below a real wait rather
+  // than a poll that succeeds on the pre-existing focus.
+  expect(window.document.activeElement).toBe(window.document.body);
+  fireEvent.click(opener);
+  expect(await screen.findByTestId("mode-nav-sheet")).toBeTruthy();
+  fireEvent.click(screen.getByRole("button", { name: "Close" }));
+  await waitFor(() => expect(screen.queryByTestId("mode-nav-sheet")).toBeNull());
+}
+
+describe("ModeNav — sheet focus restore follows the opener", () => {
+  it("returns focus to the collapsed control below the bar band", async () => {
+    const { collapsedTrigger, moreTrigger } = renderNav("collapsed");
+
+    await openThenClose(collapsedTrigger);
+
+    // Wait for the Sheet's deferred restore to land on *something* before
+    // asserting which, so this cannot pass on a poll that ran too early.
+    await waitFor(() => expect(window.document.activeElement).not.toBe(window.document.body));
+    expect(window.document.activeElement).toBe(collapsedTrigger);
+    expect(window.document.activeElement).not.toBe(moreTrigger);
+  });
+
+  it("returns focus to the More slot inside the bar band", async () => {
+    const { collapsedTrigger, moreTrigger } = renderNav("bar");
+
+    await openThenClose(moreTrigger);
+
+    await waitFor(() => expect(window.document.activeElement).not.toBe(window.document.body));
+    expect(window.document.activeElement).toBe(moreTrigger);
+    expect(window.document.activeElement).not.toBe(collapsedTrigger);
+  });
+});
diff --git a/tests/ui-accessibility.spec.ts b/tests/ui-accessibility.spec.ts
index 796de5098d..2654b2952a 100644
--- a/tests/ui-accessibility.spec.ts
+++ b/tests/ui-accessibility.spec.ts
@@ -525,7 +525,12 @@ test.describe("Clinical KB accessibility coverage", () => {
 
     await page.setViewportSize({ width: 390, height: 844 });
     await page.goto("/therapy-compass/search", { waitUntil: "domcontentloaded" });
-    await expect(page.getByRole("button", { name: "Search", exact: true })).toHaveAttribute("aria-current", "page");
+    // The shared `ModeNav` routes with real hrefs, so the current page is a
+    // link with `aria-current`, not a button with an onClick. Deep links,
+    // middle-click, back and prefetch all work as a result.
+    await expect(
+      page.getByRole("navigation", { name: "Therapy pages" }).getByRole("link", { name: "Search", exact: true }),
+    ).toHaveAttribute("aria-current", "page");
     const therapyRibbon = page.getByTestId("search-query-ribbon");
     await expect(therapyRibbon.getByRole("heading", { name: "All", level: 1 })).toBeVisible({ timeout: 60_000 });
     await expect(therapyRibbon.getByRole("group", { name: "Filter therapy results" })).toBeVisible();
diff --git a/tests/ui-chrome-scroll.spec.ts b/tests/ui-chrome-scroll.spec.ts
index ac8cbc8c23..82c8e4ac9c 100644
--- a/tests/ui-chrome-scroll.spec.ts
+++ b/tests/ui-chrome-scroll.spec.ts
@@ -33,6 +33,11 @@ const surfaces = [
   { name: "shell results", route: "/forms?q=form%201A&run=1" },
   { name: "shell service detail", route: "/services/13yarn" },
   { name: "dashboard results", route: "/?mode=prescribing&q=a&run=1" },
+  // Therapy search carries the shared `ModeNav` inside the collapse row. The
+  // phone case is covered by ui-phone-scroll; this is the tablet/desktop proof
+  // that the bar travels with the header at every width, which is the whole
+  // reason its portal drops PhoneHeaderCollapsePortal's 639px gate.
+  { name: "shell mode nav", route: "/therapy-compass/search?q=CBT&run=1" },
 ];
 
 const requiredRunway = 700;
diff --git a/tests/ui-phone-scroll.spec.ts b/tests/ui-phone-scroll.spec.ts
index 0a9cb2046c..6d4973bd71 100644
--- a/tests/ui-phone-scroll.spec.ts
+++ b/tests/ui-phone-scroll.spec.ts
@@ -71,9 +71,16 @@ const appModeHeaderRoutes = [
 const pageOwnedHeaderRoutes = [
   {
     name: "Therapy section navigation",
-    route: "/therapy-compass/search?q=CBT&run=1",
+    // Compare, not search: search moved to the shared `ModeNav`, so this route
+    // is where the original pill strip still ships.
+    route: "/therapy-compass/compare",
     selector: '[data-testid="therapy-compass-section-nav"]',
   },
+  {
+    name: "Therapy mode navigation",
+    route: "/therapy-compass/search?q=CBT&run=1",
+    selector: '[data-testid="mode-nav"]',
+  },
   {
     name: "document navigation",
     route: "/documents/11111111-1111-4111-8111-111111111111?page=1",
@@ -1749,7 +1756,7 @@ test("phone shared header releases its top safe-area band after hide", async ({
   await page.emulateMedia({ reducedMotion: "no-preference" });
   await page.setViewportSize(phoneViewport);
   await gotoPhoneSurface(page, "/therapy-compass/search?q=CBT&run=1");
-  await expect(page.getByTestId("therapy-compass-section-nav")).toBeVisible({ timeout: 20_000 });
+  await expect(page.getByTestId("mode-nav")).toBeVisible({ timeout: 20_000 });
   await expect(page.getByTestId("chrome-safe-area-top")).toBeVisible();
 
   const initial = await page.evaluate(() => {
diff --git a/tests/ui-route-coverage.spec.ts b/tests/ui-route-coverage.spec.ts
index ffe4026181..2508164d0c 100644
--- a/tests/ui-route-coverage.spec.ts
+++ b/tests/ui-route-coverage.spec.ts
@@ -248,28 +248,28 @@ test.describe("previously uncovered production routes", () => {
           currentPage.getByRole("heading", { name: "Anxiety in outpatient care", level: 1, exact: true }),
         ).toBeVisible();
         await expect(currentPage.getByTestId("search-query-ribbon")).toBeVisible();
-        const nav = currentPage.getByRole("navigation", { name: "Therapy sections" });
-        // Phone: section nav portals into the header collapse host (outside
-        // .tc-root). Read canvas colour from the workspace root still in the
-        // page, and prove the strip is anchored under the collapsing top bar.
+        // The common-search pill lands on `/therapy-compass/search`, which is the
+        // shared `ModeNav`. It portals into the header collapse host (outside
+        // .tc-root), so read the canvas colour from the workspace root still in
+        // the page, and prove the bar is anchored under the collapsing top bar.
+        const nav = currentPage.getByRole("navigation", { name: "Therapy pages" });
         const layout = await nav.evaluate((element) => {
-          const navRect = element.getBoundingClientRect();
-          const shellRect = element.parentElement?.getBoundingClientRect();
+          const bar = element.querySelector<HTMLElement>(".mode-nav__bar");
           const root = document.querySelector(".tc-root");
           return {
-            centerDelta: shellRect
-              ? navRect.left + navRect.width / 2 - (shellRect.left + shellRect.width / 2)
-              : Number.POSITIVE_INFINITY,
             backgroundColor: root ? getComputedStyle(root).backgroundColor : "",
             portaledIntoCollapse: Boolean(element.closest('[data-testid="universal-header-collapse"]')),
+            // The bar must never scroll sideways: a strip that hides
+            // destinations past its right edge is the defect this replaced.
+            inlineOverflow: bar ? bar.scrollWidth - bar.clientWidth : Number.POSITIVE_INFINITY,
           };
         });
-        expect(Math.abs(layout.centerDelta)).toBeLessThanOrEqual(1);
         // .tc-root is `background: var(--background)`, so this tracks the app's
         // page floor — #f1f4f8 since the Clinical Sky surface scale landed, not
         // the white it used to be.
         expect(layout.backgroundColor).toBe("rgb(241, 244, 248)");
         expect(layout.portaledIntoCollapse).toBe(true);
+        expect(layout.inlineOverflow).toBeLessThanOrEqual(1);
       },
     );
   });
diff --git a/tests/ui-therapy-nav-scroll.spec.ts b/tests/ui-therapy-nav-scroll.spec.ts
index 3722476c2d..65d5a4610a 100644
--- a/tests/ui-therapy-nav-scroll.spec.ts
+++ b/tests/ui-therapy-nav-scroll.spec.ts
@@ -40,8 +40,12 @@ async function installTherapyFixtures(page: Page) {
   });
 }
 
-async function gotoTherapySearch(page: Page) {
-  await page.goto("/therapy-compass/search?q=CBT&run=1", { waitUntil: "domcontentloaded" });
+async function gotoTherapyCompare(page: Page) {
+  // Compare, not search: `/therapy-compass/search` moved to the shared `ModeNav`
+  // (see `mode-nav-bar-anchoring.spec.ts`). Every other Therapy route still ships
+  // the original pill strip, so this route keeps that strip's coverage alive
+  // until the rollout continues.
+  await page.goto("/therapy-compass/compare", { waitUntil: "domcontentloaded" });
   await expect(page.locator("#main-content").first()).toBeVisible({ timeout: 15_000 });
   await page.addStyleTag({
     content: ":root{--safe-area-top:59px !important;--safe-area-bottom:34px !important;}",
@@ -57,7 +61,7 @@ test.beforeEach(async ({ page }) => {
 test("phone Therapy section nav hides and returns with the universal header", async ({ page }) => {
   await page.emulateMedia({ reducedMotion: "no-preference" });
   await page.setViewportSize(phoneViewport);
-  await gotoTherapySearch(page);
+  await gotoTherapyCompare(page);
 
   const collapseHost = page.getByTestId("universal-header-collapse");
   const sectionNav = page.getByTestId("therapy-compass-section-nav");