diff --git a/docs/design-system/DECISIONS.md b/docs/design-system/DECISIONS.md
index 6ba277fcc4..203d43b0e2 100644
--- a/docs/design-system/DECISIONS.md
+++ b/docs/design-system/DECISIONS.md
@@ -213,6 +213,38 @@ convergence.
 
 ---
 
+## C8 · One look for both modes (owner design review, 11 October 2026)
+
+**Chose.** After a review of every Work and Clinical screen at 320 px, 390 px, desktop and
+dark mode, the owner approved these seven rules for both modes:
+
+1. **One look for both modes.** Clinical keeps its own components and behaviour, including
+   the search box at the bottom of the screen and how it works, but shares Work's look: round
+   header buttons on a tinted top bar, the tab bar in the same tint, hairline cards, the same
+   controls and illustrations, in Clinical blue. No search bar is added at the top.
+2. **Calmer bands.** The band and top bar carry no dot texture, and the band's line drawing
+   is fainter (0.08 light, 0.11 dark, from 0.11 and 0.14).
+3. **Primary buttons take the area colour.** Never black or ink-filled buttons, in either mode. First Nations keeps its own standard (v13.1), which holds its olive to the pill, current tab, icon tiles, day track and quotation accents, so its buttons stay neutral.
+4. **Filter chips stay on one line.** They scroll sideways with an edge fade and never wrap to
+   leave one chip alone.
+5. **Red means overdue, lapsed or urgent only,** in both modes. Priority and category labels
+   ("High", "Medium") use neutral tags.
+6. **One way back.** If the header shows Back, the page adds no extra "‹ My Day" style link
+   under the band.
+7. **One card per group,** in both modes: items sit as divided rows in one hairline card, with
+   no cards inside cards and no coloured side bars.
+
+**Rejected.** A top search bar or a title band in Clinical mode. The owner asked that the
+Clinical search box keep its bottom position and behaviour, and that Clinical keep its own
+components; a title band would also have moved the tab bar out of the top bar's collapse
+track and changed how it hides on scroll.
+
+**Why.** The two modes read as two different apps (different header, list, card and button
+styles). Sharing one visual language while keeping each mode's own controls balances them
+without retraining the reader.
+
+---
+
 ## Q&A record — clinical inputs (31 July 2026)
 
 | #   | Question                                               | Answer                                                  | Design consequence                                                                                                                                                                                                                                                           |
diff --git a/src/app/(search-app)/documents/search/page.tsx b/src/app/(search-app)/documents/search/page.tsx
index 62d3dc8559..c893789951 100644
--- a/src/app/(search-app)/documents/search/page.tsx
+++ b/src/app/(search-app)/documents/search/page.tsx
@@ -1,16 +1,79 @@
 import type { Metadata } from "next";
 import Link from "next/link";
 import { buttonFaceClass } from "@/components/ui/button-face";
+import { cn } from "@/components/ui-primitives";
 
 export const metadata: Metadata = {
   title: "Document Search - PsychSift",
   description: "Search indexed clinical documents and review matching evidence.",
 };
 
+// Primary buttons wear the area colour, never the shared near-black command
+// fill (design pass, October 2026). Re-pointing the command tokens on the
+// button itself keeps Button's hover and pressed states and leaves every other
+// control on the page alone. In forced colours the accent becomes LinkText,
+// which ButtonText cannot sit on, so the native button pair comes back.
+const clinicalPrimaryAccent =
+  "[--command:var(--clinical-accent)] [--command-hover:var(--clinical-accent-hover)] [--command-active:var(--clinical-accent-active)] [--command-contrast:var(--clinical-accent-contrast)] forced-colors:[--command:ButtonFace] forced-colors:[--command-hover:ButtonFace] forced-colors:[--command-active:ButtonFace]";
+
+// The empty screen's line drawing: two stacked documents and a magnifier, in
+// the area colour. It repeats what the heading says, so it is hidden from
+// screen readers. Fills use tokens through classes so dark mode follows.
+function DocumentsSearchIllustration() {
+  return (
+    <svg
+      aria-hidden="true"
+      focusable="false"
+      viewBox="0 0 132 84"
+      className="h-21 w-33 text-[color:var(--clinical-accent)]"
+      fill="none"
+    >
+      <rect
+        x="30"
+        y="14"
+        width="52"
+        height="64"
+        rx="8"
+        className="fill-[color:var(--clinical-accent-soft)]"
+        stroke="currentColor"
+        strokeOpacity=".35"
+      />
+      <rect
+        x="50"
+        y="6"
+        width="52"
+        height="64"
+        rx="8"
+        className="fill-[color:var(--surface-raised)]"
+        stroke="currentColor"
+        strokeOpacity=".6"
+      />
+      <path
+        d="M60 22h32M60 31h32M60 40h20"
+        stroke="currentColor"
+        strokeOpacity=".45"
+        strokeWidth="3"
+        strokeLinecap="round"
+      />
+      <rect x="58" y="47" width="28" height="9" rx="4.5" fill="currentColor" fillOpacity=".18" />
+      <circle
+        cx="96"
+        cy="58"
+        r="13"
+        className="fill-[color:var(--surface-raised)]"
+        stroke="currentColor"
+        strokeWidth="3"
+      />
+      <path d="m105 67 9 9" stroke="currentColor" strokeWidth="3.5" strokeLinecap="round" />
+    </svg>
+  );
+}
+
 export default function DocumentsSearchRoute() {
   return (
     <main className="mx-auto flex min-h-[55dvh] max-w-3xl flex-col items-center justify-center px-4 py-12 text-center">
-      <p className="text-xs font-bold uppercase tracking-eyebrow text-[color:var(--clinical-accent)]">
+      <DocumentsSearchIllustration />
+      <p className="mt-4 text-xs font-bold uppercase tracking-eyebrow text-[color:var(--clinical-accent)]">
         Indexed sources
       </p>
       <h1 className="mt-3 text-3xl font-semibold text-[color:var(--text-heading)]">Search clinical documents</h1>
@@ -19,7 +82,10 @@ export default function DocumentsSearchRoute() {
         matching page and passage.
       </p>
       <div className="mt-6 flex flex-wrap items-center justify-center gap-3">
-        <Link href="/?mode=documents&focus=1" className={buttonFaceClass({ variant: "primary" })}>
+        <Link
+          href="/?mode=documents&focus=1"
+          className={cn(buttonFaceClass({ variant: "primary" }), clinicalPrimaryAccent)}
+        >
           Open Documents search
         </Link>
       </div>
diff --git a/src/app/mode-band.css b/src/app/mode-band.css
index c1bf9b9757..9bcef67ed2 100644
--- a/src/app/mode-band.css
+++ b/src/app/mode-band.css
@@ -433,3 +433,39 @@ html[data-mode-band] [data-testid="chrome-safe-area-top"] {
 :is(div, header):has(> div:only-child > [data-under-band]:only-child) {
   display: contents;
 }
+
+/* The clinical band (owner design review, 11 Oct 2026). Every Clinical page
+   but the shared home tints its top bar with the mode's soft colour, and a
+   mode with its own pages (Dictionary, Differentials, Sources and the rest)
+   tints its tab bar to match, with the band's hairline under it, so the two
+   read as one band the way a work page's top bar and band do. The tab bar
+   stays in the top bar's collapse track, so it still hides and reveals with
+   the top bar exactly as before. The round header buttons are already white
+   circles, which the tint now shows. The header marks the page in its server
+   HTML (`data-clinical-band`), so the tint is there from the first paint. A
+   page under a mode band (Medicines, Psychiatry) keeps the band's own colour. */
+html:not([data-mode-band]):has(.universal-header[data-clinical-band]) {
+  --clinical-band-bg: var(--mode-identity-soft);
+  --clinical-band-line: var(--mode-identity-border);
+}
+
+html.dark:not([data-mode-band]):has(.universal-header[data-clinical-band]) {
+  --clinical-band-bg: color-mix(in srgb, var(--mode-identity) 11%, var(--background));
+  --clinical-band-line: color-mix(in srgb, var(--mode-identity) 26%, var(--background));
+}
+
+html:not([data-mode-band]) .universal-header[data-clinical-band],
+html:not([data-mode-band]):has(.universal-header[data-clinical-band]) [data-testid="chrome-safe-area-top"],
+html:not([data-mode-band]):has(.universal-header[data-clinical-band]) #phone-header-collapse-addon-slot .mode-nav-rail {
+  background: var(--clinical-band-bg);
+}
+
+html:not([data-mode-band]):has(.universal-header[data-clinical-band]) #phone-header-collapse-addon-slot .mode-nav-rail {
+  border-bottom-color: var(--clinical-band-line);
+}
+
+/* A tinted top bar with no tab bar under it ends on the band's hairline. */
+html:not([data-mode-band])
+  .universal-header[data-clinical-band]:not(:has(~ #phone-header-collapse-addon-slot .mode-nav-rail)) {
+  box-shadow: inset 0 -1px 0 var(--clinical-band-line);
+}
diff --git a/src/app/work-mode.css b/src/app/work-mode.css
index 6fbad8c776..4b41df967c 100644
--- a/src/app/work-mode.css
+++ b/src/app/work-mode.css
@@ -193,21 +193,6 @@ html[data-work-frame] main {
   }
 }
 
-/* The dot texture, lined up with the top bar's so the two read as one. */
-.work-band::before,
-html[data-work-frame] .universal-header[data-work-frame]::after,
-.universal-header[data-work-band]::after {
-  content: "";
-  position: absolute;
-  inset: 0;
-  z-index: var(--work-z-under);
-  pointer-events: none;
-  background-image: radial-gradient(var(--mode-identity-border) 0.7px, transparent 0.8px);
-  background-size: 12px 12px;
-  background-position: 0 var(--work-band-offset, 0);
-  opacity: 0.55;
-}
-
 /* The faint line drawing, cropped by its own box at the band's corner. */
 .work-band__mark {
   position: absolute;
@@ -219,12 +204,13 @@ html[data-work-frame] .universal-header[data-work-frame]::after,
   background: var(--mode-identity);
   mask: var(--work-band-mark, none) left top / 12.25rem 12.25rem no-repeat;
   -webkit-mask: var(--work-band-mark, none) left top / 12.25rem 12.25rem no-repeat;
-  opacity: 0.11;
+  /* Fainter since the 11 Oct design review: colour says where you are, the drawing only adds a hint. */
+  opacity: 0.08;
   pointer-events: none;
 }
 
 .dark .work-band__mark {
-  opacity: 0.14;
+  opacity: 0.11;
 }
 
 /* Pinned tabs (owner request 8 Oct 2026). Once the title has scrolled under
@@ -1670,18 +1656,70 @@ a.work-hero:focus-visible {
 }
 
 /* Chips: filters and choices. A 30px shape inside a 48px tap. */
+/* Chip rows stay on one line and scroll sideways (design pass, October 2026):
+   wrapping left one chip alone on a second line. Where scroll-driven
+   animations exist, a soft fade appears only at an edge with more chips past
+   it, and only while the row actually overflows. Elsewhere (older iPhone
+   Safari) there is no fade at all, so no chip is ever dimmed. The tab swipe
+   already ignores a row that scrolls sideways. */
 .work-chips {
   display: flex;
-  flex-wrap: wrap;
-  gap: 0 calc(var(--spacing) * 1.5);
-}
-
-.work-chips[data-scroll] {
   flex-wrap: nowrap;
+  gap: 0 calc(var(--spacing) * 1.5);
   overflow-x: auto;
+  overscroll-behavior-x: contain;
   scrollbar-width: none;
 }
 
+.work-chips::-webkit-scrollbar {
+  display: none;
+}
+
+@property --work-chips-fade-start {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0px;
+}
+
+@property --work-chips-fade-end {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0px;
+}
+
+@keyframes work-chips-fade {
+  from {
+    --work-chips-fade-start: 0px;
+    --work-chips-fade-end: 1.75rem;
+  }
+  1% {
+    --work-chips-fade-start: 1.75rem;
+  }
+  99% {
+    --work-chips-fade-end: 1.75rem;
+  }
+  to {
+    --work-chips-fade-start: 1.75rem;
+    --work-chips-fade-end: 0px;
+  }
+}
+
+@supports (animation-timeline: scroll()) {
+  .work-chips {
+    /* A row that does not overflow has an inactive timeline, so both fades
+       stay at 0px and nothing is masked. */
+    mask-image: linear-gradient(
+      to right,
+      transparent,
+      black var(--work-chips-fade-start),
+      black calc(100% - var(--work-chips-fade-end)),
+      transparent
+    );
+    animation: work-chips-fade linear both;
+    animation-timeline: scroll(self inline);
+  }
+}
+
 .work-chip {
   position: relative;
   display: inline-flex;
diff --git a/src/components/admin/contract/contract-end-page.tsx b/src/components/admin/contract/contract-end-page.tsx
index 3d6c33157d..a1e9108ef4 100644
--- a/src/components/admin/contract/contract-end-page.tsx
+++ b/src/components/admin/contract/contract-end-page.tsx
@@ -19,7 +19,6 @@ import {
   createEntry,
   deleteEntry,
   errorWords,
-  JuniorBackLink,
   JuniorFootNote,
   JuniorNotice,
   JuniorSectionLabel,
@@ -392,7 +391,7 @@ export function ContractEndPage({ now: nowProp }: { now?: Date } = {}) {
   return (
     <>
       <InformationPageShell testId="admin-contract-main">
-        <JuniorBackLink href="/admin" label="Admin Today" testId="admin-contract-back" />
+        {/* One way back: the band's Today tab is Admin Today, so the page adds no second link to it. */}
         <div className="grid gap-1">
           <PageTitleUnderBand className="text-2xl font-semibold text-[color:var(--text-heading)]">
             Contract end
diff --git a/src/components/admin/leave/leave-wallet-page.tsx b/src/components/admin/leave/leave-wallet-page.tsx
index 7e3349833b..53d5be3870 100644
--- a/src/components/admin/leave/leave-wallet-page.tsx
+++ b/src/components/admin/leave/leave-wallet-page.tsx
@@ -4,6 +4,7 @@ import Link from "next/link";
 import { usePathname, useRouter, useSearchParams } from "next/navigation";
 import {
   BookOpen,
+  ChevronRight,
   Copy,
   EyeOff,
   ExternalLink,
@@ -25,7 +26,6 @@ import { ContractEndEntryLink } from "@/components/admin/contract/contract-entry
 import { LeaveEntitlementList } from "@/components/admin/leave/leave-entitlement-list";
 import {
   copyLabel,
-  JuniorBackLink,
   JuniorFootNote,
   JuniorSectionLabel,
   JuniorUndoBar,
@@ -588,7 +588,7 @@ export function LeaveWalletPage({ now: nowProp }: { now?: Date } = {}) {
 
   return (
     <InformationPageShell testId="admin-leave-main">
-      <JuniorBackLink href="/admin" label="Admin Today" testId="admin-leave-back" />
+      {/* One way back: the band's Today tab is Admin Today, so the page adds no second link to it. */}
       <div className="grid gap-1">
         <PageTitleUnderBand className="text-2xl font-semibold text-[color:var(--text-heading)]">
           Leave wallet
@@ -664,14 +664,17 @@ export function LeaveWalletPage({ now: nowProp }: { now?: Date } = {}) {
             Your wallet
           </JuniorSectionLabel>
           {/*
-            The mockup's wallet: each card's top edge tucks 8 px under the card before it, a deliberate stacked
-            deck. Each card is at least 64 px tall, so at least 56 px of every card stays uncovered and tappable,
-            and the overlap only ever covers the bottom padding, never a word. A focused card lifts above the
-            next so its focus ring shows in full.
+            One grouped card with a hairline between leave types, the same list shape as the rest of Work mode,
+            rather than a stacked deck of separate cards. Each row is a full-width button at least 64 px tall.
           */}
-          <ul ref={stackRef} aria-label="Leave cards" className="grid" data-testid="admin-leave-stack">
+          <ul
+            ref={stackRef}
+            aria-label="Leave cards"
+            className={cn(cardSurface, "grid overflow-hidden")}
+            data-testid="admin-leave-stack"
+          >
             {visible.map((type, index) => (
-              <li key={type.id} className={cn(index > 0 && "-mt-2")}>
+              <li key={type.id} className={cn(index > 0 && "border-t border-[color:var(--border)]")}>
                 <button
                   type="button"
                   data-card={type.id}
@@ -680,8 +683,7 @@ export function LeaveWalletPage({ now: nowProp }: { now?: Date } = {}) {
                   data-testid={`admin-leave-card-${type.id}`}
                   className={cn(
                     focusRing,
-                    "relative flex min-h-16 w-full items-center gap-3 rounded-xl border focus-visible:z-10 border-[color:var(--border)] bg-[color:var(--surface-raised)] px-3 pb-3 text-left",
-                    index > 0 ? "pt-4" : "pt-3",
+                    "relative flex min-h-16 w-full items-center gap-3 px-3 py-2 text-left focus-visible:z-10 focus-visible:-outline-offset-2",
                   )}
                 >
                   <CardIcon icon={type.icon} />
@@ -689,6 +691,7 @@ export function LeaveWalletPage({ now: nowProp }: { now?: Date } = {}) {
                     <span className="text-sm font-semibold text-[color:var(--text-heading)]">{type.front}</span>
                     <span className={cn(textMuted, "text-xs")}>{type.line}</span>
                   </span>
+                  <ChevronRight aria-hidden="true" className="size-icon-md shrink-0 text-[color:var(--text-muted)]" />
                 </button>
               </li>
             ))}
diff --git a/src/components/admin/renewals/kind-chips.tsx b/src/components/admin/renewals/kind-chips.tsx
index bcdb216d8e..0e899a2257 100644
--- a/src/components/admin/renewals/kind-chips.tsx
+++ b/src/components/admin/renewals/kind-chips.tsx
@@ -20,9 +20,9 @@ export function checklistKindLabel(kind: ChecklistKindFilter): string {
 /**
  * The kind filter row (Josh's locked mockup): "All, Registration, Checks,
  * Health, Training, Job" as the work kit's chips. `aria-pressed`, not a radio
- * group: a chip narrows the list rather than replacing it. The chips wrap onto
- * a second line on a phone rather than scrolling sideways, so none is ever
- * hidden off the edge (and a sideways drag here never fights the tab swipe).
+ * group: a chip narrows the list rather than replacing it. Like every chip
+ * row, they stay on one line and scroll sideways, with an edge fade showing
+ * there is more; the tab swipe ignores a row that scrolls sideways.
  */
 export function ChecklistKindChips({
   active,
@@ -34,7 +34,7 @@ export function ChecklistKindChips({
   readonly testId?: string;
 }) {
   return (
-    <div role="group" aria-label="Filter the checklist by kind" data-testid={testId} className="work-chips flex-wrap">
+    <div role="group" aria-label="Filter the checklist by kind" data-testid={testId} className="work-chips">
       {CHECKLIST_KIND_FILTERS.map((kind) => (
         <WorkChip
           key={kind}
diff --git a/src/components/clinical-dashboard/master-search-header.tsx b/src/components/clinical-dashboard/master-search-header.tsx
index 1a5d618374..07b8f3e62e 100644
--- a/src/components/clinical-dashboard/master-search-header.tsx
+++ b/src/components/clinical-dashboard/master-search-header.tsx
@@ -144,6 +144,7 @@ import {
   useTeachingRoles,
 } from "@/lib/teaching/page-visibility";
 import {
+  clinicalBandAttribute,
   modeMenuSideForMode,
   modeMenuSides,
   orderModesForSide,
@@ -2533,13 +2534,12 @@ export function MasterSearchHeader(props: MasterSearchHeaderProps) {
     <header
       id="search"
       data-scroll-hidden={hideStrategy === "overlay" && headerChromeHidden ? "true" : undefined}
-      // The work-mode frame's round glass buttons and glass pill (work-mode.css).
-      // Decided from the mode and address alone, so it is in the server HTML.
+      // Work frame (glass buttons and pill) and band tints, decided from the mode and
+      // address alone so they are in the server HTML (work-mode.css, mode-band.css).
       data-work-frame={routeWorkArea?.id}
-      // A framed page's top bar wears its band's tint from the first paint,
-      // before the band has published it on <html> (work-mode.css).
       data-work-band={routeWorkFramed ? "" : undefined}
       data-mode-identity={routeWorkFrame?.area.identity}
+      data-clinical-band={clinicalBandAttribute(selectedAppMode.id, currentPathname, Boolean(routeWorkArea))}
       className={cn(
         // No backdrop-filter on the header itself: it would form a backdrop
         // root and starve the .edge-glass-header-backdrop scrim (the single
diff --git a/src/components/cme/applications/applications-page.tsx b/src/components/cme/applications/applications-page.tsx
index 7e1c78831f..783833cb87 100644
--- a/src/components/cme/applications/applications-page.tsx
+++ b/src/components/cme/applications/applications-page.tsx
@@ -8,7 +8,6 @@ import { focusRing } from "@/components/card-recipes";
 import {
   ActionDock,
   CpdFeaturePage,
-  type CpdFeatureBack,
   flatCard,
   flatRow,
   IconCircle,
@@ -49,8 +48,7 @@ import {
 import { perthCalendarDate } from "@/lib/cme/cpd-year";
 import { useApplicationsStore } from "@/lib/cme/device-record";
 
-/** The page's parent, where its link lives. */
-const APPLICATIONS_BACK: CpdFeatureBack = { href: "/cme/summary", label: "CPD summary" };
+// No page-level back link: the band's Summary tab is this page's parent, so a second way back would repeat it.
 
 type DateSheetState = { open: false } | { open: true; stage: ApplicationStageId | null };
 type RefereeSheetState = { open: false } | { open: true; id: string | null };
@@ -76,12 +74,7 @@ export function ApplicationsPage({ demoMode, now }: { readonly demoMode: boolean
 
   if (!state) {
     return (
-      <CpdFeaturePage
-        back={APPLICATIONS_BACK}
-        eyebrow="Your own plan"
-        title="Job applications"
-        testId="applications-page"
-      >
+      <CpdFeaturePage eyebrow="Your own plan" title="Job applications" testId="applications-page">
         <div aria-hidden="true" className={cn(flatCard, "h-64 motion-safe:animate-pulse")} />
         <span role="status" className="sr-only">
           Loading your applications
@@ -193,7 +186,6 @@ export function ApplicationsPage({ demoMode, now }: { readonly demoMode: boolean
 
   return (
     <CpdFeaturePage
-      back={APPLICATIONS_BACK}
       eyebrow={year === null ? "Season · add a start date" : `Season ${year} · your own plan`}
       title="Job applications"
       testId="applications-page"
diff --git a/src/components/cme/cme-entry-form.tsx b/src/components/cme/cme-entry-form.tsx
index 1d1fd1116c..01de45cfe7 100644
--- a/src/components/cme/cme-entry-form.tsx
+++ b/src/components/cme/cme-entry-form.tsx
@@ -805,7 +805,7 @@ export function CmeEntryForm({
       <FormField
         label="Reflection"
         id="cme-entry-reflection"
-        hint="In your own words — this is the part an audit actually reads."
+        hint="In your own words. This is the part an audit actually reads."
       >
         {(field) => (
           <textarea
diff --git a/src/components/cme/cme-new-entry-route.tsx b/src/components/cme/cme-new-entry-route.tsx
index f2efb30ec3..e45a23ce0a 100644
--- a/src/components/cme/cme-new-entry-route.tsx
+++ b/src/components/cme/cme-new-entry-route.tsx
@@ -253,7 +253,8 @@ export function CmeNewEntryRoute({
         {demoMode ? (
           <div className="mt-4" data-testid="cme-entry-demo-notice">
             <InlineNotice tone="neutral">
-              Demo mode lets you inspect the form. Saving is available only in your signed-in private record.
+              This is an example, so you can look through the form. Saving is available only in your signed-in private
+              record.
             </InlineNotice>
           </div>
         ) : null}
diff --git a/src/components/cme/cme-quick-log.tsx b/src/components/cme/cme-quick-log.tsx
index 70e8719e21..8b240d9239 100644
--- a/src/components/cme/cme-quick-log.tsx
+++ b/src/components/cme/cme-quick-log.tsx
@@ -303,7 +303,7 @@ export function CmeQuickLog({
         <div className="flex flex-col gap-4 pb-2">
           {demoMode ? (
             <InlineNotice tone="neutral">
-              Demo mode lets you try the form. Saving is available only in your signed-in private record.
+              This is an example, so you can try the form. Saving is available only in your signed-in private record.
             </InlineNotice>
           ) : null}
           {choices.length > 0 ? (
diff --git a/src/components/dictionary/dictionary-catalogue-pages.tsx b/src/components/dictionary/dictionary-catalogue-pages.tsx
index ed9d8616db..b7e0366e24 100644
--- a/src/components/dictionary/dictionary-catalogue-pages.tsx
+++ b/src/components/dictionary/dictionary-catalogue-pages.tsx
@@ -48,6 +48,7 @@ import {
   parseDictionaryCatalogueParams,
   type DictionaryCatalogueScope,
   type DictionaryCatalogueSort,
+  type DictionarySearchHit,
 } from "@/lib/dictionary";
 import {
   dictionaryEntryKinds,
@@ -115,6 +116,39 @@ function catalogueNoun(scope: DictionaryCatalogueScope, count: number) {
   return count === 1 ? "term" : "terms";
 }
 
+/**
+ * One hairline card per group of rows. Rows divide themselves with a hairline;
+ * the card is the only box, at every width, so a phone sees the same grouped
+ * list a desktop does rather than an edge-to-edge strip.
+ */
+const dictionaryGroupCard =
+  "min-w-0 overflow-hidden rounded-xl border border-[color:var(--border)] bg-[color:var(--surface)]";
+
+function dictionaryHitKey(hit: DictionarySearchHit) {
+  return hit.type === "entry"
+    ? `entry-${hit.entry.slug}`
+    : hit.type === "topic"
+      ? `topic-${hit.topic.slug}`
+      : `abbr-${hit.abbreviation}`;
+}
+
+/**
+ * Splits an alphabetical list into letter groups ("A · 6 terms"). A ranked
+ * search result is one group with no heading: its order is relevance, and
+ * cutting it at letter boundaries would scatter the best match.
+ */
+function groupHitsByLetter(hits: readonly DictionarySearchHit[], alphabetical: boolean) {
+  if (!alphabetical) return [{ letter: null, hits: [...hits] }];
+  const groups: { letter: string | null; hits: DictionarySearchHit[] }[] = [];
+  for (const hit of hits) {
+    const letter = dictionaryBrowseLetter(hit);
+    const last = groups.at(-1);
+    if (last && last.letter === letter) last.hits.push(hit);
+    else groups.push({ letter, hits: [hit] });
+  }
+  return groups;
+}
+
 /**
  * The clinical dictionary catalogue — one destination for the whole list.
  *
@@ -144,6 +178,10 @@ export function DictionaryCataloguePage() {
   const [letterOpen, setLetterOpen] = useState(false);
 
   const hits = useMemo(() => dictionaryCatalogue(params), [params]);
+  const hitGroups = useMemo(
+    () => groupHitsByLetter(hits, params.sort === "az" || params.sort === "za"),
+    [hits, params.sort],
+  );
   // Both counts come from the same predicate as the list, so a segment's number
   // is what pressing it actually returns (docs/filter-contract.md). While a
   // query runs they are the matches for that query, not the catalogue totals.
@@ -438,28 +476,36 @@ export function DictionaryCataloguePage() {
         </div>
         <div
           id="dictionary-catalogue-results"
-          className="mx-auto w-full max-w-[var(--content-width-catalogue)] px-0 py-3 sm:px-6 sm:py-4"
+          className="mx-auto w-full max-w-[var(--content-width-catalogue)] px-4 py-3 sm:px-6 sm:py-4"
         >
           {hits.length ? (
-            <section
-              aria-label="Dictionary catalogue"
-              className="border-y border-[color:var(--border)] sm:overflow-hidden sm:rounded-xl sm:border-x sm:bg-[color:var(--surface)]"
-            >
-              {hits.map((hit) => {
-                const key =
-                  hit.type === "entry"
-                    ? `entry-${hit.entry.slug}`
-                    : hit.type === "topic"
-                      ? `topic-${hit.topic.slug}`
-                      : `abbr-${hit.abbreviation}`;
-                return <DictionaryResultRow key={key} hit={hit} />;
-              })}
+            <section aria-label="Dictionary catalogue" className="grid gap-5">
+              {hitGroups.map((group) => (
+                <div key={group.letter ?? "results"} className="grid min-w-0 gap-2">
+                  {group.letter ? (
+                    <h2 className="flex items-baseline gap-2.5 px-0.5">
+                      <span className="font-mono text-2xl font-semibold leading-none text-[color:var(--clinical-accent)]">
+                        {group.letter}
+                      </span>
+                      <span className="sr-only"> · </span>
+                      <span className="text-xs font-bold uppercase tracking-kicker text-[color:var(--text-muted)]">
+                        {group.hits.length} {catalogueNoun(params.scope, group.hits.length)}
+                      </span>
+                    </h2>
+                  ) : null}
+                  <div className={dictionaryGroupCard}>
+                    {group.hits.map((hit) => (
+                      <DictionaryResultRow key={dictionaryHitKey(hit)} hit={hit} titleAs={group.letter ? "h3" : "h2"} />
+                    ))}
+                  </div>
+                </div>
+              ))}
             </section>
           ) : (
             // The empty state wears the same card as the result list. Bare on
             // the page background it read as a rendering failure rather than an
             // answer, and the advice named a filter even when none was applied.
-            <div className="border-y border-[color:var(--border)] px-4 py-12 text-center sm:rounded-xl sm:border-x sm:bg-[color:var(--surface)]">
+            <div className={cn(dictionaryGroupCard, "px-4 py-12 text-center")}>
               {searching ? (
                 <Search className="mx-auto size-icon-xl text-[color:var(--decoration-soft)]" aria-hidden="true" />
               ) : (
@@ -637,14 +683,14 @@ export function DictionaryTopicsPage() {
                 <ChevronDown className="h-4 w-4" aria-hidden="true" />
               </button>
             </div>
-            <section className="border-b border-[color:var(--border)]" aria-label="Clinical topics">
+            <section className={cn(dictionaryGroupCard, "mt-4")} aria-label="Clinical topics">
               {visible.map((topic) => {
                 const entries = dictionaryTopicEntries(topic);
                 return (
                   <Link
                     key={topic.slug}
                     href={`/dictionary/topics/${topic.slug}`}
-                    className="group grid min-h-[6rem] grid-cols-[2.5rem_minmax(0,1fr)_auto] items-center gap-3 border-b border-[color:var(--border)] py-3 last:border-b-0 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[color:var(--focus)]"
+                    className="group grid min-h-[6rem] grid-cols-[2.5rem_minmax(0,1fr)_auto] items-center gap-3 border-b border-[color:var(--border)] px-3 py-3 last:border-b-0 hover:bg-[color:var(--surface-subtle)] sm:px-4 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-[color:var(--focus)]"
                   >
                     <span className="grid h-10 w-10 place-items-center rounded-lg bg-[color:var(--clinical-accent-soft)] text-[color:var(--clinical-accent)]">
                       <Layers3 className="h-5 w-5" aria-hidden="true" />
@@ -900,15 +946,16 @@ export function DictionaryTopicDetailPage({ topicSlug }: { topicSlug: string })
                 <section key={group.kind} aria-labelledby={`group-${group.kind}`}>
                   <h2
                     id={`group-${group.kind}`}
-                    className="border-b border-[color:var(--border)] pb-2 text-sm font-extrabold uppercase tracking-kicker text-[color:var(--text-muted)]"
+                    className="px-0.5 pb-2 text-sm font-extrabold uppercase tracking-kicker text-[color:var(--text-muted)]"
                   >
                     {dictionaryKindLabel(group.kind)}
                   </h2>
-                  <div>
+                  <div className={dictionaryGroupCard}>
                     {group.entries.map((entry) => (
                       <DictionaryResultRow
                         key={entry.slug}
                         hit={{ type: "entry", entry, score: 10, reason: topic.title }}
+                        titleAs="h3"
                       />
                     ))}
                   </div>
diff --git a/src/components/dictionary/dictionary-result-row.tsx b/src/components/dictionary/dictionary-result-row.tsx
index a67941e11e..13cc1c537b 100644
--- a/src/components/dictionary/dictionary-result-row.tsx
+++ b/src/components/dictionary/dictionary-result-row.tsx
@@ -1,50 +1,59 @@
 import Link from "next/link";
-import { ArrowRight, Check, GitCompareArrows, Layers3 } from "lucide-react";
+import { ArrowRight, BookOpenText, CaseUpper, Check, GitCompareArrows, Layers3 } from "lucide-react";
 
 import { stretchedRowLinkClass } from "@/components/card-recipes";
 import { cn } from "@/components/ui-primitives";
 import { dictionaryCompareHref, dictionaryKindLabel, type DictionarySearchHit } from "@/lib/dictionary";
 
-const tone = {
-  entry: {
-    spine: "bg-[color:var(--clinical-accent)]",
-    badge:
-      "border-[color:var(--clinical-accent-border)] bg-[color:var(--clinical-accent-soft)] text-[color:var(--clinical-accent)]",
-  },
-  abbreviation: {
-    spine: "bg-[color:var(--tone-purple)]",
-    badge:
-      "border-[color:var(--tone-purple-border)] bg-[color:var(--tone-purple-soft)] text-[color:var(--tone-purple)]",
-  },
-  topic: {
-    spine: "bg-[color:var(--info)]",
-    badge: "border-[color:var(--info-border)] bg-[color:var(--info-bg)] text-[color:var(--info)]",
-  },
-} as const;
+// One group, one card: the rows sit inside a hairline card the page draws, so
+// a row carries no card of its own and no coloured side bar. Colour is spent
+// once per row, on the category tag, and only in the current area's tint, so
+// it marks what kind of thing the row is without competing with the title.
+const categoryTag =
+  "rounded-md border border-[color:var(--clinical-accent-border)] bg-[color:var(--clinical-accent-soft)] px-1.5 py-0.5 text-3xs font-extrabold text-[color:var(--clinical-accent)]";
+const neutralTag =
+  "rounded-md border border-[color:var(--border)] bg-[color:var(--surface-subtle)] px-1.5 py-0.5 text-3xs font-bold text-[color:var(--text-muted)]";
 
-export function DictionaryResultRow({ hit, compareWith }: { hit: DictionarySearchHit; compareWith?: string }) {
+// Rows are divided by a hairline, never boxed. 48 px is the floor for a row
+// that is itself a link target. `relative` is added at each row, where the
+// stretched-link contract test can see it.
+const rowShell =
+  "flex min-h-12 min-w-0 items-start gap-3 border-b border-[color:var(--border)] px-3 py-3.5 last:border-b-0 sm:px-4 sm:py-4";
+
+// The small area-tinted mark at the left of each row. Hidden at
+// phone widths, where its 44 px is better spent on the definition and on
+// keeping "Source linked" and "Add to compare" on one line.
+const rowIcon =
+  "mt-0.5 hidden size-8 shrink-0 place-items-center rounded-lg bg-[color:var(--clinical-accent-soft)] text-[color:var(--clinical-accent)] sm:grid";
+
+type TitleTag = "h2" | "h3";
+
+export function DictionaryResultRow({
+  hit,
+  compareWith,
+  titleAs: Title = "h2",
+}: {
+  hit: DictionarySearchHit;
+  compareWith?: string;
+  /** `h3` when the row sits under a group heading (a letter or a kind). */
+  titleAs?: TitleTag;
+}) {
   if (hit.type === "abbreviation") {
     const primary = hit.senses[0];
     return (
-      <article className="relative grid min-w-0 grid-cols-[0.1875rem_minmax(0,1fr)] border-b border-[color:var(--border)] bg-[color:var(--surface)] last:border-b-0">
-        <span className={tone.abbreviation.spine} aria-hidden="true" />
-        <div className="min-w-0 px-3 py-3.5 sm:px-4 sm:py-4">
+      <article className={cn("relative", rowShell)}>
+        <span className={rowIcon} aria-hidden="true">
+          <CaseUpper className="size-icon-sm" aria-hidden="true" />
+        </span>
+        <div className="min-w-0 flex-1">
           <div className="flex min-w-0 items-start gap-2">
             <div className="min-w-0 flex-1">
               <div className="flex flex-wrap items-center gap-2">
-                <h2 className="text-base font-extrabold leading-5 text-[color:var(--text-heading)] sm:text-lg">
+                <Title className="text-base font-extrabold leading-5 text-[color:var(--text-heading)] sm:text-lg">
                   {hit.abbreviation}
-                </h2>
-                <span
-                  className={cn("rounded-md border px-1.5 py-0.5 text-3xs font-extrabold", tone.abbreviation.badge)}
-                >
-                  Abbreviation
-                </span>
-                {hit.senses.length > 1 ? (
-                  <span className="rounded-md border border-[color:var(--warning-border)] bg-[color:var(--warning-soft)] px-1.5 py-0.5 text-3xs font-bold text-[color:var(--warning)]">
-                    {hit.senses.length} meanings
-                  </span>
-                ) : null}
+                </Title>
+                <span className={categoryTag}>Abbreviation</span>
+                {hit.senses.length > 1 ? <span className={neutralTag}>{hit.senses.length} meanings</span> : null}
               </div>
               <p className="mt-1 text-sm font-semibold text-[color:var(--text)]">
                 {hit.senses.map((entry) => entry.term).join(" · ")}
@@ -99,17 +108,17 @@ export function DictionaryResultRow({ hit, compareWith }: { hit: DictionarySearc
 
   if (hit.type === "topic") {
     return (
-      <article className="relative grid min-w-0 grid-cols-[0.1875rem_minmax(0,1fr)] border-b border-[color:var(--border)] bg-[color:var(--surface)] last:border-b-0">
-        <span className={tone.topic.spine} aria-hidden="true" />
-        <div className="grid min-w-0 grid-cols-[minmax(0,1fr)_auto] items-center gap-2 px-3 py-3.5 sm:px-4 sm:py-4">
+      <article className={cn("relative", rowShell, "items-center")}>
+        <span className={cn(rowIcon, "mt-0")} aria-hidden="true">
+          <Layers3 className="size-icon-sm" aria-hidden="true" />
+        </span>
+        <div className="grid min-w-0 flex-1 grid-cols-[minmax(0,1fr)_auto] items-center gap-2">
           <div className="min-w-0">
             <div className="flex flex-wrap items-center gap-2">
-              <h2 className="text-base font-extrabold leading-5 text-[color:var(--text-heading)] sm:text-lg">
+              <Title className="text-base font-extrabold leading-5 text-[color:var(--text-heading)] sm:text-lg">
                 {hit.topic.title}
-              </h2>
-              <span className={cn("rounded-md border px-1.5 py-0.5 text-3xs font-extrabold", tone.topic.badge)}>
-                Topic
-              </span>
+              </Title>
+              <span className={categoryTag}>Topic</span>
             </div>
             <p className="mt-1 text-sm leading-5 text-[color:var(--text-muted)]">{hit.topic.description}</p>
             <p className="mt-2 inline-flex items-center gap-1.5 text-xs font-semibold text-[color:var(--text-muted)]">
@@ -134,18 +143,18 @@ export function DictionaryResultRow({ hit, compareWith }: { hit: DictionarySearc
 
   const { entry } = hit;
   return (
-    <article className="relative grid min-w-0 grid-cols-[0.1875rem_minmax(0,1fr)] border-b border-[color:var(--border)] bg-[color:var(--surface)] last:border-b-0">
-      <span className={tone.entry.spine} aria-hidden="true" />
-      <div className="min-w-0 px-3 py-3.5 sm:px-4 sm:py-4">
+    <article className={cn("relative", rowShell)}>
+      <span className={rowIcon} aria-hidden="true">
+        <BookOpenText className="size-icon-sm" aria-hidden="true" />
+      </span>
+      <div className="min-w-0 flex-1">
         <div className="flex min-w-0 items-start gap-2">
           <div className="min-w-0 flex-1">
             <div className="flex flex-wrap items-center gap-2">
-              <h2 className="text-base font-extrabold leading-5 text-[color:var(--text-heading)] sm:text-lg">
+              <Title className="text-base font-extrabold leading-5 text-[color:var(--text-heading)] sm:text-lg">
                 {entry.term}
-              </h2>
-              <span className={cn("rounded-md border px-1.5 py-0.5 text-3xs font-extrabold", tone.entry.badge)}>
-                {dictionaryKindLabel(entry.kind)}
-              </span>
+              </Title>
+              <span className={categoryTag}>{dictionaryKindLabel(entry.kind)}</span>
             </div>
             {entry.aliases.length ? (
               <p className="mt-1 text-xs font-semibold text-[color:var(--text-muted)]">
diff --git a/src/components/differentials/differential-stream-workspace.tsx b/src/components/differentials/differential-stream-workspace.tsx
index f75f7853c2..62e3a51ebf 100644
--- a/src/components/differentials/differential-stream-workspace.tsx
+++ b/src/components/differentials/differential-stream-workspace.tsx
@@ -6,6 +6,7 @@ import { useEffect, useId, useMemo, useRef, useState, type ReactNode } from "rea
 import { createPortal } from "react-dom";
 import { ArrowLeft, ArrowRight, Check, FileText, GitCompareArrows, ShieldAlert } from "lucide-react";
 
+import { pageHeadingDescriptionClass, pageHeadingTitleClass } from "@/components/ui/page-header";
 import { cn, ignoreUnavailableActivation } from "@/components/ui-primitives";
 
 import {
@@ -70,8 +71,11 @@ function statusLabel(status: DifferentialStreamItem["status"]) {
 }
 
 function statusTone(status: DifferentialStreamItem["status"]) {
+  // Emergent stays red because it is a genuine urgency, but as a tag rather
+  // than a solid red block: most pathways carry it, and a wall of solid red
+  // stops reading as a warning (design pass, October 2026).
   if (status === "emergent") {
-    return "border-transparent bg-[color:var(--danger-solid)] text-[color:var(--danger-solid-contrast)]";
+    return "border-[color:var(--danger-border)] bg-[color:var(--danger-soft)] text-[color:var(--danger)]";
   }
   if (status === "urgent") {
     return "border-[color:var(--warning-border)] bg-[color:var(--warning-soft)] text-[color:var(--warning)]";
@@ -178,14 +182,17 @@ function StreamCard({
 }) {
   const isPresentation = stream === "presentations";
   const hasConnections = isPresentation ? item.relatedPathways.length > 0 : true;
+  // Each pathway is a divided row inside the list's one hairline card, so the
+  // highlight is a background wash only: a coloured border would fight the
+  // dividers and read as a card inside a card.
   const cardTone =
     highlight === "match"
-      ? "border-[color:var(--clinical-accent-border)] bg-[color:var(--clinical-accent-soft)] shadow-[var(--shadow-inset)]"
+      ? "bg-[color:var(--clinical-accent-soft)]"
       : highlight === "related"
-        ? "border-[color:var(--warning-border)] bg-[color:var(--warning-soft)] shadow-[var(--shadow-inset)]"
+        ? "bg-[color:var(--warning-soft)]"
         : highlight === "dim"
-          ? "border-[color:var(--border)] bg-[color:var(--surface)] opacity-45"
-          : "border-[color:var(--border)] bg-[color:var(--surface)] shadow-[var(--shadow-inset)]";
+          ? "opacity-45"
+          : "";
 
   return (
     <article
@@ -194,7 +201,7 @@ function StreamCard({
       data-highlight={highlight}
       data-match={item.isMatch ? "true" : "false"}
       data-status={item.status}
-      className={`relative rounded-lg border p-4 transition ${cardTone}`}
+      className={`relative p-4 transition ${cardTone}`}
       onFocus={onFocus}
     >
       <div className="flex items-start justify-between gap-3">
@@ -667,7 +674,11 @@ export function DifferentialStreamWorkspace({ model, query, initialFocus = "" }:
 
   function renderCardGrid(items: DifferentialStreamItem[]): ReactNode {
     return (
-      <div className="grid gap-3 sm:grid-cols-2">
+      // One hairline card per group with divided rows (no cards inside cards).
+      // From the two-column width each row draws its own bottom and inner
+      // right hairline; the -mb-px tucks the last row's bottom line under the
+      // card's clipped edge so it is never doubled.
+      <div className="grid divide-y divide-[color:var(--border)] overflow-hidden rounded-lg border border-[color:var(--border)] bg-[color:var(--surface)] sm:grid-cols-2 sm:divide-y-0 sm:[&>*]:-mb-px sm:[&>*]:border-b sm:[&>*]:border-[color:var(--border)] sm:[&>*:nth-child(odd)]:border-r">
         {items.map((item) => (
           <StreamCard
             key={item.id}
@@ -696,11 +707,9 @@ export function DifferentialStreamWorkspace({ model, query, initialFocus = "" }:
       className="min-h-0 overflow-x-clip bg-[color:var(--background)] px-4 py-5 text-[color:var(--text)] sm:grow sm:px-6 sm:py-6 lg:px-8"
     >
       <div className="mx-auto grid w-full max-w-6xl gap-4">
-        <header data-testid="differentials-stream-header" className="grid gap-1 px-1">
-          <h1 className="text-2xl font-semibold tracking-tight text-[color:var(--text-heading)] sm:text-3xl">
-            {copy.heading}
-          </h1>
-          <p className="max-w-2xl text-sm leading-6 text-[color:var(--text-muted)]">{copy.description}</p>
+        <header data-testid="differentials-stream-header" className="grid gap-1.5 px-1">
+          <h1 className={pageHeadingTitleClass}>{copy.heading}</h1>
+          <p className={pageHeadingDescriptionClass}>{copy.description}</p>
         </header>
 
         <SearchResultsHeaderBand
@@ -805,9 +814,11 @@ export function DifferentialStreamWorkspace({ model, query, initialFocus = "" }:
         {!hasQuery && safetyItems.length > 0 ? (
           <section
             data-testid="differentials-stream-safety-shelf"
-            className="grid gap-2 rounded-lg border border-[color:var(--danger-border)] bg-[color:var(--danger-soft)] p-3"
+            // A neutral hairline card with a restrained danger cue on its label.
+            // These are jump links to pathways listed below, not alert cards.
+            className="grid gap-2 rounded-lg border border-[color:var(--border)] bg-[color:var(--surface)] p-3"
           >
-            <div className="flex items-center gap-2 text-sm font-extrabold text-[color:var(--danger)]">
+            <div className="flex items-center gap-2 text-xs font-bold uppercase tracking-eyebrow text-[color:var(--danger)]">
               <ShieldAlert className="h-4 w-4" aria-hidden />
               {isPresentation ? "High-priority presentation pathways" : "Must-check / emergent shelf"}
             </div>
@@ -817,7 +828,7 @@ export function DifferentialStreamWorkspace({ model, query, initialFocus = "" }:
                   key={`safety-${item.id}`}
                   type="button"
                   onClick={() => scrollToSlug(item.slug)}
-                  className="inline-flex min-h-12 items-center rounded-lg border border-[color:var(--danger-border)] bg-[color:var(--surface)] px-3 text-xs font-bold text-[color:var(--danger)]"
+                  className="inline-flex min-h-12 items-center rounded-lg border border-[color:var(--border)] bg-[color:var(--surface)] px-3 text-xs font-bold text-[color:var(--text)] hover:border-[color:var(--clinical-accent-border)] hover:text-[color:var(--clinical-accent)]"
                 >
                   {item.title}
                 </button>
diff --git a/src/components/factsheets/factsheets-search-page.tsx b/src/components/factsheets/factsheets-search-page.tsx
index ba7cd8f7d3..b2de029725 100644
--- a/src/components/factsheets/factsheets-search-page.tsx
+++ b/src/components/factsheets/factsheets-search-page.tsx
@@ -23,6 +23,7 @@ import {
   type Factsheet,
 } from "@/components/factsheets/factsheets-data";
 import { factsheetGlyph } from "@/components/factsheets/factsheets-icons";
+import { pageHeadingEyebrowClass, pageHeadingTitleClass } from "@/components/ui/page-header";
 import { cn } from "@/components/ui-primitives";
 
 type ViewMode = "list" | "cards";
@@ -101,10 +102,8 @@ export function FactsheetsSearchPage({
       data-testid="factsheets-search-page"
       className="mx-auto w-full max-w-reading px-4 py-6 pb-4 sm:px-6 sm:py-8 lg:px-8"
     >
-      <p className="text-2xs font-bold uppercase tracking-label text-[color:var(--clinical-accent)]">Find a sheet</p>
-      <h1 className="mt-1.5 text-2xl font-extrabold tracking-tight text-[color:var(--text-heading)]">
-        Search patient information
-      </h1>
+      <p className={pageHeadingEyebrowClass}>Find a sheet</p>
+      <h1 className={cn("mt-1.5", pageHeadingTitleClass)}>Search patient information</h1>
 
       <SearchResultsHeaderBand
         modeId="factsheets"
diff --git a/src/components/forms/forms-search-results-page.tsx b/src/components/forms/forms-search-results-page.tsx
index 46de81bcb0..e7264980b0 100644
--- a/src/components/forms/forms-search-results-page.tsx
+++ b/src/components/forms/forms-search-results-page.tsx
@@ -30,7 +30,6 @@ import {
   eyebrowText,
   ignoreUnavailableActivation,
   pageContainer,
-  panelSubtle,
   searchFocusRing,
   searchPageCanvas,
   searchResultsSection,
@@ -63,19 +62,12 @@ function resultCode(match: FormSearchMatch, index: number) {
   return formCatalogDetails(match.service)?.form ?? String(index + 1);
 }
 
-function tagToneClass(label: string) {
-  const normalized = label.toLowerCase();
-  if (normalized.includes("crisis") || normalized.includes("risk") || normalized.includes("safety")) {
-    return "bg-[color:var(--danger-soft)] text-[color:var(--danger)]";
-  }
-  if (normalized.includes("transport") || normalized.includes("transfer") || normalized.includes("handover")) {
-    return "bg-[color:var(--clinical-accent-soft)] text-[color:var(--clinical-accent)]";
-  }
-  if (normalized.includes("legal") || normalized.includes("detention") || normalized.includes("capacity")) {
-    return "bg-[color:var(--info-soft)] text-[color:var(--info)]";
-  }
-  return "bg-[color:var(--clinical-accent-soft)] text-[color:var(--clinical-accent)]";
-}
+// Category chips are labels, not alerts, so they all wear the same quiet
+// neutral tag. Red is kept for overdue, lapsed or urgent states only (design
+// pass, October 2026); a red "crisis" chip on a register row competed with
+// real warnings elsewhere on screen.
+const categoryTagClass =
+  "border border-[color:var(--border)] bg-[color:var(--surface-subtle)] text-[color:var(--text-muted)]";
 
 /**
  * With no query the page is the register itself, not a search. Every form is
@@ -142,12 +134,15 @@ function compactMatchReason(match: FormSearchMatch, query: string) {
   return "Content match in the forms catalogue";
 }
 
-// Risk is the only badge a phone result card carries, so it must never out-rank
-// itself: high is solid danger, medium is a bordered wash, low stays neutral.
+// Risk is the only badge a phone result card carries. It is a recorded
+// priority, not an alert, so it is a neutral tag whose weight carries the
+// level: high is body-coloured on a faint wash with a hairline, medium is muted
+// text, low is muted and lighter. Red on most of the register trained the eye
+// to ignore it; red now means overdue, lapsed or urgent only.
 const riskBadgeToneClass: Record<FormRiskFilter, string> = {
-  high: "bg-[color:var(--danger-solid)] text-[color:var(--danger-solid-contrast)]",
-  medium: "border border-[color:var(--warning-border)] bg-[color:var(--warning-soft)] text-[color:var(--warning)]",
-  low: "border border-[color:var(--border)] bg-[color:var(--surface-subtle)] text-[color:var(--text-muted)]",
+  high: "border border-[color:var(--border-strong)] bg-[color:var(--surface-subtle)] text-[color:var(--text)]",
+  medium: "text-[color:var(--text-muted)]",
+  low: "font-semibold text-[color:var(--text-muted)]",
 };
 
 // The catalogue generates a `purpose` for every form, but most are boilerplate
@@ -246,9 +241,10 @@ function ResultsTable({
         <h2 className="text-lg font-extrabold text-[color:var(--text-heading)]">
           {listingRegister ? "All forms" : "Best matches"}
         </h2>
+        {/* The count is stated once, in the band above; this line only says how
+            the list is ordered. */}
         <span className="text-sm font-semibold text-[color:var(--text-muted)]">
-          {matches.length} {matches.length === 1 ? "form" : "forms"} ·{" "}
-          {sortValue === "alpha" ? "sorted A–Z" : listingRegister ? "by form code" : "ranked by relevance"}
+          {sortValue === "alpha" ? "Sorted A–Z" : listingRegister ? "By form code" : "Ranked by relevance"}
         </span>
       </div>
       <div
@@ -272,7 +268,6 @@ function ResultsTable({
               data-testid={`form-search-result-${form.slug}`}
               className={cn(
                 "group relative grid gap-4 border-b border-[color:var(--border)] px-5 py-4 transition-colors last:border-b-0 hover:bg-[color:var(--surface-subtle)]/60 md:items-center",
-                "before:absolute before:inset-y-1.5 before:left-0 before:w-0.5 before:rounded-full before:bg-[color:var(--clinical-accent)] before:opacity-0 before:transition-opacity before:content-[''] hover:before:opacity-100",
                 resultsGridColumns,
               )}
             >
@@ -286,10 +281,7 @@ function ResultsTable({
                   return (
                     <span
                       key={`${chipLabel}-${chipIndex}`}
-                      className={cn(
-                        "rounded-full px-2 py-1 text-2xs font-extrabold uppercase",
-                        tagToneClass(chipLabel),
-                      )}
+                      className={cn("rounded-md px-2 py-1 text-2xs font-bold", categoryTagClass)}
                     >
                       {chipLabel}
                     </span>
@@ -442,7 +434,7 @@ function VerifiedFooter() {
   );
 }
 
-const metaChipClass = "rounded-md px-2 py-1 text-3xs font-extrabold uppercase leading-none";
+const metaChipClass = "rounded-md px-2 py-1 text-2xs font-bold capitalize leading-none";
 
 /**
  * When the query IS a form code there is one answer, not N ranked candidates.
@@ -536,10 +528,13 @@ function MobileResultCard({ match, code }: CodedFormMatch) {
       href={`/forms/${form.slug}`}
       data-testid={`form-search-mobile-result-${form.slug}`}
       className={cn(
-        // The whole card is the target, so no per-card Open button.
-        "flex items-center gap-3 p-3 transition hover:border-[color:var(--clinical-accent-border)] hover:bg-[color:var(--clinical-accent-soft)]",
-        panelSubtle,
-        searchFocusRing,
+        // The whole row is the target, so no per-row Open button. Rows are
+        // divided lines inside their group's one hairline card, not cards of
+        // their own (one card per group, never cards inside cards).
+        "flex min-h-tap items-center gap-3 px-3 py-2.5 transition hover:bg-[color:var(--clinical-accent-soft)]",
+        // Inset ring: the group card clips its corners, so an outset ring
+        // would be cut off.
+        "focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-[color:var(--focus)]",
       )}
     >
       <FormCodeBadge code={code} variant="sm" />
@@ -557,7 +552,7 @@ function MobileResultCard({ match, code }: CodedFormMatch) {
       {risk ? (
         <span
           className={cn(
-            "shrink-0 rounded-md px-2 py-1 text-3xs font-extrabold uppercase leading-none",
+            "shrink-0 rounded-md px-2 py-1 text-2xs font-bold capitalize leading-none",
             riskBadgeToneClass[risk],
           )}
         >
@@ -597,9 +592,13 @@ function MobileCards({
             <h2 className="text-base font-extrabold text-[color:var(--text-heading)]">
               {exactMatch ? `Also references ${exactMatch.code}` : listingRegister ? "All forms" : "Best matches"}
             </h2>
-            <span className="text-xs font-bold text-[color:var(--text-muted)]">
-              {remaining.length} {remaining.length === 1 ? "form" : "forms"}
-            </span>
+            {/* The band above already states the total. A count is shown here
+                only beside an exact code match, where the remainder differs. */}
+            {exactMatch ? (
+              <span className="text-xs font-bold text-[color:var(--text-muted)]">
+                {remaining.length} {remaining.length === 1 ? "form" : "forms"}
+              </span>
+            ) : null}
           </div>
           {groups.map((group) => (
             <section key={group.category} aria-label={group.category} className="grid gap-2">
@@ -608,9 +607,11 @@ function MobileCards({
                 <span aria-hidden className="h-px flex-1 bg-[color:var(--border)]" />
                 <span className="text-2xs font-bold text-[color:var(--text-muted)]">{group.items.length}</span>
               </div>
-              {group.items.map((item) => (
-                <MobileResultCard key={item.match.service.slug} match={item.match} code={item.code} />
-              ))}
+              <div className="divide-y divide-[color:var(--border)] overflow-hidden rounded-lg border border-[color:var(--border)] bg-[color:var(--surface-raised)]">
+                {group.items.map((item) => (
+                  <MobileResultCard key={item.match.service.slug} match={item.match} code={item.code} />
+                ))}
+              </div>
             </section>
           ))}
         </>
diff --git a/src/components/formulation/formulation-builder-page.tsx b/src/components/formulation/formulation-builder-page.tsx
index 1395f141fb..b10c7c047e 100644
--- a/src/components/formulation/formulation-builder-page.tsx
+++ b/src/components/formulation/formulation-builder-page.tsx
@@ -339,7 +339,7 @@ export function FormulationBuilderPage({
 
               <div className="grid gap-4 p-4 sm:p-5">
                 {selectedMechanisms.length ? (
-                  <div className="rounded-xl border border-[color:var(--clinical-accent-border)] bg-[color:var(--clinical-accent-soft)]/45 p-3">
+                  <div className="rounded-lg bg-[color:var(--clinical-accent-soft)] p-3">
                     <div className="flex items-center justify-between gap-3">
                       <div>
                         <p className={eyebrowText}>Selected hypotheses</p>
@@ -374,7 +374,7 @@ export function FormulationBuilderPage({
                   </div>
                 ) : (
                   <div className="grid min-h-36 place-items-center rounded-xl border border-dashed border-[color:var(--border-strong)] bg-[linear-gradient(to_right,var(--border)_1px,transparent_1px),linear-gradient(to_bottom,var(--border)_1px,transparent_1px)] bg-[size:32px_32px] p-5 text-center">
-                    <div className="rounded-xl bg-[color:var(--surface)]/95 px-6 py-4 shadow-[var(--e1)]">
+                    <div className="px-6 py-4">
                       <Network className="mx-auto h-6 w-6 text-[color:var(--clinical-accent)]" aria-hidden />
                       <h3 className="mt-2 text-base font-extrabold text-[color:var(--text-heading)]">
                         No mechanisms selected
@@ -412,17 +412,22 @@ export function FormulationBuilderPage({
                   noun="mechanism"
                 />
 
-                <div className="grid gap-2 sm:grid-cols-2" aria-label="Available mechanisms">
+                {/* Divided rows bleeding to the step card's edges, not a grid of
+                    small cards inside it: the step card is the one box. */}
+                <div
+                  className="-mx-4 grid divide-y divide-[color:var(--border)] border-y border-[color:var(--border)] sm:-mx-5"
+                  aria-label="Available mechanisms"
+                >
                   {visibleMechanisms.map((mechanism) => {
                     const checked = selectedIds.includes(mechanism.id);
                     return (
                       <label
                         key={mechanism.id}
                         className={cn(
-                          "group grid cursor-pointer grid-cols-[2rem_minmax(0,1fr)] gap-3 rounded-lg border p-3.5 transition",
+                          "group grid min-h-12 cursor-pointer grid-cols-[2rem_minmax(0,1fr)] gap-3 px-4 py-3.5 transition-colors sm:px-5",
                           checked
-                            ? "border-[color:var(--clinical-accent)] bg-[color:var(--clinical-accent-soft)]/55"
-                            : "border-[color:var(--border)] bg-[color:var(--surface)] hover:border-[color:var(--clinical-accent-border)] hover:bg-[color:var(--surface-subtle)]",
+                            ? "bg-[color:var(--clinical-accent-soft)]"
+                            : "bg-[color:var(--surface)] hover:bg-[color:var(--surface-subtle)]",
                         )}
                       >
                         <input
@@ -457,7 +462,7 @@ export function FormulationBuilderPage({
                   })}
                 </div>
 
-                <div className="rounded-xl border border-[color:var(--border)] bg-[color:var(--surface-subtle)] p-4">
+                <div className="rounded-lg bg-[color:var(--surface-subtle)] p-4">
                   <p className={eyebrowText}>Formulation language</p>
                   <p className="mt-2 text-sm font-semibold leading-6 text-[color:var(--text-heading)]">
                     {selectedMechanisms.length
@@ -478,7 +483,7 @@ export function FormulationBuilderPage({
               />
               <div className="grid gap-5 p-4 sm:p-5">
                 <div
-                  className="grid gap-2 sm:grid-cols-2 lg:grid-cols-3"
+                  className="-mx-4 grid divide-y divide-[color:var(--border)] border-y border-[color:var(--border)] sm:-mx-5"
                   role="radiogroup"
                   aria-label="Formulation framework"
                 >
@@ -493,10 +498,10 @@ export function FormulationBuilderPage({
                       <label
                         key={template.id}
                         className={cn(
-                          "grid cursor-pointer grid-cols-[2rem_minmax(0,1fr)] gap-3 rounded-lg border p-3.5",
+                          "grid min-h-12 cursor-pointer grid-cols-[2rem_minmax(0,1fr)] items-center gap-3 px-4 py-3 sm:px-5",
                           active
-                            ? "border-[color:var(--clinical-accent)] bg-[color:var(--clinical-accent-soft)]"
-                            : "border-[color:var(--border)] bg-[color:var(--surface)] hover:bg-[color:var(--surface-subtle)]",
+                            ? "bg-[color:var(--clinical-accent-soft)]"
+                            : "bg-[color:var(--surface)] hover:bg-[color:var(--surface-subtle)]",
                         )}
                         // Controlled `sr-only` radios can miss native label activation after
                         // large scroll-into-view (Production UI shard flake on PR #1788). Drive
@@ -534,14 +539,13 @@ export function FormulationBuilderPage({
                   })}
                 </div>
 
-                <div className="grid gap-3">
+                {/* Each framework section is a divided block of the step card,
+                    not a card nested inside it. */}
+                <div className="-mx-4 -mt-5 grid divide-y divide-[color:var(--border)] border-b border-[color:var(--border)] sm:-mx-5">
                   {activeSections.map((section) => {
                     const suggestions = suggestionsForFormulationSection(selectedMechanisms, section.id);
                     return (
-                      <article
-                        key={section.id}
-                        className="rounded-xl border border-[color:var(--border)] bg-[color:var(--surface)] p-4"
-                      >
+                      <article key={section.id} className="px-4 py-4 sm:px-5">
                         <div className="flex flex-wrap items-start justify-between gap-3">
                           <div>
                             <h3 className="text-sm font-extrabold text-[color:var(--text-heading)]">{section.label}</h3>
@@ -595,7 +599,8 @@ export function FormulationBuilderPage({
                 title="Challenge the working hypothesis"
                 body="A useful formulation remains provisional. Record what supports it, what competes with it, and what would change your mind."
               />
-              <div className="grid gap-3 p-4 sm:p-5 sm:grid-cols-2">
+              {/* Divided blocks of the step card, not cards inside it. */}
+              <div className="grid divide-y divide-[color:var(--border)]">
                 {formulationQualityPrompts.map((prompt, index) => {
                   const starter =
                     prompt.id === "quality-evidence"
@@ -604,10 +609,7 @@ export function FormulationBuilderPage({
                         ? selectedMechanisms.map((mechanism) => mechanism.treatmentLeverage).slice(0, 2)
                         : selectedMechanisms.flatMap((mechanism) => mechanism.poorFitIndicators).slice(0, 2);
                   return (
-                    <article
-                      key={prompt.id}
-                      className="rounded-xl border border-[color:var(--border)] bg-[color:var(--surface)] p-4"
-                    >
+                    <article key={prompt.id} className="px-4 py-4 sm:px-5">
                       <div className="flex items-start gap-3">
                         <span className="nums grid h-8 w-8 shrink-0 place-items-center rounded-full bg-[color:var(--clinical-accent-soft)] text-xs font-extrabold text-[color:var(--clinical-accent)]">
                           {index + 1}
diff --git a/src/components/mode-band/mode-band.tsx b/src/components/mode-band/mode-band.tsx
index aaf2fed9f0..e0cc2fd07e 100644
--- a/src/components/mode-band/mode-band.tsx
+++ b/src/components/mode-band/mode-band.tsx
@@ -262,16 +262,13 @@ function usePublishBandSurface(band: HTMLElement | null, modeId: AppModeId, work
       root.style.setProperty("--mode-band-surface", getComputedStyle(band).backgroundColor);
       root.dataset.modeBand = modeId;
       if (workArea) {
-        // The work frame repaints the top bar above it (round glass buttons, the
-        // glass pill, the band's dot texture), and lines the band's dots up
-        // with the top bar's so the two read as one surface.
+        // The work frame repaints the top bar above it (round glass buttons and
+        // the glass pill), so the bar and the band read as one surface.
         root.dataset.workFrame = workArea;
         // Sheets, toasts and the work search portal out of the page, so the
         // area's palette also rides on <body> while the frame is up (not on
         // <html>, where `.dark [data-mode-identity]` could not match it).
         if (identity) document.body.dataset.modeIdentity = identity;
-        const top = band.getBoundingClientRect().top + window.scrollY;
-        band.style.setProperty("--work-band-offset", `${-Math.round(top)}px`);
       }
     };
     publish();
diff --git a/src/components/mode-kit/work.tsx b/src/components/mode-kit/work.tsx
index 1b7d3057e9..4979ad63c8 100644
--- a/src/components/mode-kit/work.tsx
+++ b/src/components/mode-kit/work.tsx
@@ -397,7 +397,12 @@ export function WorkChip(props: WorkChipProps) {
   );
 }
 
-/** A row of chips. `scroll` keeps them on one line and lets the row scroll sideways. */
+/**
+ * A row of chips. Every row now stays on one line and scrolls sideways with an
+ * edge fade (work-mode.css `.work-chips`), so a chip is never left alone on a
+ * second line. `scroll` is kept so existing callers still compile; it no longer
+ * changes the layout.
+ */
 export function WorkChips({
   children,
   scroll,
diff --git a/src/components/mode-picker/mode-picker-row.tsx b/src/components/mode-picker/mode-picker-row.tsx
index 2cf5792593..cd07cb791d 100644
--- a/src/components/mode-picker/mode-picker-row.tsx
+++ b/src/components/mode-picker/mode-picker-row.tsx
@@ -167,7 +167,7 @@ export const modePickerCardRowClass =
 
 /**
  * The phone sheet's header band, drawn behind the title in the current mode's
- * colour: the work band's pale fill, its dot texture and a faint line drawing of
+ * colour: the work band's pale fill and a faint line drawing of
  * the mode's icon. The caller makes the header `relative isolate`, so this sits
  * under the title and close button. It reaches up over the sheet's drag grip
  * (which still takes the drag, because the band ignores the pointer) and draws
@@ -181,7 +181,6 @@ export function ModePickerSheetBand({ modeId, icon: Icon }: { modeId: string; ic
       data-testid="app-mode-sheet-band"
       className="pointer-events-none absolute inset-x-0 -top-4 bottom-0 [z-index:var(--work-z-under)] overflow-hidden border-b border-[color:var(--mode-identity-border)] bg-[color:var(--mode-identity-band)] sm:top-0"
     >
-      <span className="absolute inset-0 bg-[radial-gradient(var(--mode-identity-border)_0.7px,transparent_0.8px)] bg-[length:12px_12px] opacity-55" />
       <Icon
         aria-hidden="true"
         className="absolute -bottom-11 -right-5 h-40 w-40 text-[color:var(--mode-identity)] opacity-[0.12]"
diff --git a/src/components/my-day/my-day-calendar-page.tsx b/src/components/my-day/my-day-calendar-page.tsx
index 6c82a79406..af41356680 100644
--- a/src/components/my-day/my-day-calendar-page.tsx
+++ b/src/components/my-day/my-day-calendar-page.tsx
@@ -193,7 +193,9 @@ export function MyDayCalendarPage({ now }: { now?: Date } = {}) {
         title: "Sign in to see your calendar",
         body: "Your shifts, leave, rotations, courses, teaching, CPD and Admin dates show here together once you sign in.",
       }}
-      subtitle={(at) => monthTitle(shownMonth ?? zonedDateOf(at, zone).slice(0, 7))}
+      // The month heading under the band already names the month shown, so the band carries today's date,
+      // as the other My Day pages do, rather than the same month twice.
+      subtitle={(at) => formatZonedLongDay(zonedDateOf(at, zone))}
     >
       {(at) => <CalendarBody key={accountKey} now={at} shownMonth={shownMonth} onMonth={setShownMonth} />}
     </MyDayFrame>
diff --git a/src/components/on-call/call/call-page.tsx b/src/components/on-call/call/call-page.tsx
index 78cfaa6d95..82f4282f8a 100644
--- a/src/components/on-call/call/call-page.tsx
+++ b/src/components/on-call/call/call-page.tsx
@@ -151,10 +151,12 @@ function HandbookCallRow({
 function HospitalGroup({
   group,
   searching,
+  inCard = false,
   children,
 }: {
   readonly group: OnCallCallGroup;
   readonly searching: boolean;
+  readonly inCard?: boolean;
   readonly children: (items: readonly HandbookItem[]) => ReactNode;
 }) {
   const [showAll, setShowAll] = useState(false);
@@ -176,6 +178,7 @@ function HospitalGroup({
           : undefined
       }
       id={onCallGroupAnchorId(group.slug)}
+      inCard={inCard}
       testId={`on-call-call-group-${group.slug}`}
     >
       {children(visible)}
@@ -380,6 +383,26 @@ export function OnCallCallPage() {
       </OnCallGroupedList>
     ) : null;
 
+  const emergencyGroup = groups[0]?.kind === "emergency" ? groups[0] : null;
+  const departmentGroups = emergencyGroup ? groups.slice(1) : groups;
+  const hospitalGroup = (group: OnCallCallGroup, inCard: boolean) => (
+    <HospitalGroup key={group.slug} group={group} searching={searching} inCard={inCard}>
+      {(visible) =>
+        visible.map((item) => (
+          <HandbookCallRow
+            key={item.id}
+            item={item}
+            handbook={handbook}
+            pinned={pinnedIds.has(item.id)}
+            emergencyGroup={group.kind === "emergency"}
+            hospitalPhone={hospitalPhone}
+            fallback={fallback}
+          />
+        ))
+      }
+    </HospitalGroup>
+  );
+
   return (
     <OnCallHubPageFrame page="call" lead={<OnCallHospitalLine handbook={handbook} />}>
       <div className="grid min-w-0 grid-cols-[minmax(0,1fr)] gap-3">
@@ -443,28 +466,22 @@ export function OnCallCallPage() {
 
         {showHospital && ready && hospitalCount + cover.length > 0 ? (
           <div id={onCallGroupAnchorId("hospital")} className="grid min-w-0 scroll-mt-32 gap-5">
-            {groups.map((group, index) => (
-              <div key={group.slug} className="grid min-w-0 gap-5">
-                <HospitalGroup group={group} searching={searching}>
-                  {(visible) =>
-                    visible.map((item) => (
-                      <HandbookCallRow
-                        key={item.id}
-                        item={item}
-                        handbook={handbook}
-                        pinned={pinnedIds.has(item.id)}
-                        emergencyGroup={group.kind === "emergency"}
-                        hospitalPhone={hospitalPhone}
-                        fallback={fallback}
-                      />
-                    ))
-                  }
-                </HospitalGroup>
+            {emergencyGroup ? (
+              <div className="grid min-w-0 gap-5">
+                {hospitalGroup(emergencyGroup, false)}
                 {/* Emergency stays first; the cover on now follows it, or leads when there is no Emergency group. */}
-                {index === 0 && group.kind === "emergency" ? coverGroup : null}
+                {coverGroup}
               </div>
-            ))}
-            {groups[0]?.kind === "emergency" ? null : coverGroup}
+            ) : (
+              coverGroup
+            )}
+            {/* The departments share one card, each a labelled part of it divided by a hairline, so a
+                department with one number is a row in a list rather than a box of its own. */}
+            {departmentGroups.length > 0 ? (
+              <div className="work-card grid min-w-0" data-testid="on-call-call-departments-card">
+                {departmentGroups.map((group) => hospitalGroup(group, true))}
+              </div>
+            ) : null}
           </div>
         ) : null}
 
diff --git a/src/components/on-call/first-week/first-week-page.tsx b/src/components/on-call/first-week/first-week-page.tsx
index 3cdf95e33a..eb36b39e52 100644
--- a/src/components/on-call/first-week/first-week-page.tsx
+++ b/src/components/on-call/first-week/first-week-page.tsx
@@ -1,11 +1,10 @@
 "use client";
 
-import { BookOpen, CalendarPlus, ChevronLeft, CloudOff, Copy, ListChecks, RotateCcw, Smartphone } from "lucide-react";
+import { BookOpen, CalendarPlus, CloudOff, Copy, Eye, ListChecks, RotateCcw, Smartphone } from "lucide-react";
 import Link from "next/link";
 import { useCallback, useId, useState } from "react";
 
 import { focusRing } from "@/components/card-recipes";
-import { ContextualBackLink } from "@/components/contextual-back-link";
 import { OnCallCrisisLines } from "@/components/on-call/call/external-line-rows";
 import { FirstWeekPackCard } from "@/components/on-call/first-week/first-week-pack-card";
 import { FirstWeekSectionView } from "@/components/on-call/first-week/first-week-section-view";
@@ -294,13 +293,20 @@ export function OnCallFirstWeekPage({ section, now: pinned }: { section?: string
   const footer = (
     <div className="flex flex-wrap items-center justify-between gap-x-3">
       <span className="inline-flex min-h-12 items-center gap-1.5 text-sm text-[color:var(--text-muted)]">
-        <Smartphone aria-hidden="true" className="size-icon-sm" />
+        {/* An eye for "shows on", not the phone outline, which at this size reads as a tick box that
+            cannot be ticked. The phone stays for the line that is about this phone. */}
         {phase.kind === "ahead" && pack.landAlert !== false ? (
-          <span data-testid="on-call-first-week-ahead">
-            {`Shows on On Call Now from ${formatFirstWeekDate(phase.highlightFrom)}`}
-          </span>
+          <>
+            <Eye aria-hidden="true" className="size-icon-sm" />
+            <span data-testid="on-call-first-week-ahead">
+              {`Shows on On Call Now from ${formatFirstWeekDate(phase.highlightFrom)}`}
+            </span>
+          </>
         ) : (
-          "Read marks stay on this phone"
+          <>
+            <Smartphone aria-hidden="true" className="size-icon-sm" />
+            Read marks stay on this phone
+          </>
         )}
       </span>
       {phase.kind !== "no-date" ? (
@@ -325,18 +331,29 @@ export function OnCallFirstWeekPage({ section, now: pinned }: { section?: string
     <main data-testid="on-call-first-week-main" className="min-w-0">
       <WorkBody>
         {/* The pack card's visible title is the page's h1, so no hidden copy is read twice. */}
-        <ContextualBackLink
-          fallbackHref="/on-call"
-          data-testid="on-call-first-week-page-back"
-          className={cn(
-            focusRing,
-            "-ml-1 inline-flex min-h-12 w-fit items-center gap-1 text-sm font-medium text-[color:var(--mode-identity)] no-underline",
-          )}
-        >
-          <ChevronLeft aria-hidden="true" className="size-icon-sm" />
-          On Call
-        </ContextualBackLink>
-        <OnCallHospitalLine handbook={handbook} testId="on-call-first-week-hospital" />
+        {/* One way back: the band's Now tab is On Call, so the page adds no second link to it. */}
+        {/* Mark all (or Start again) sits on the hospital line that heads the pack, not loose under it. */}
+        <div className="flex min-w-0 flex-wrap items-center justify-between gap-x-3">
+          <OnCallHospitalLine handbook={handbook} testId="on-call-first-week-hospital" />
+          {canMarkAll || canStartAgain ? (
+            <div className="ml-auto">
+              {canMarkAll ? (
+                <WorkButton variant="quiet" onClick={markAll} testId="on-call-first-week-mark-all">
+                  Mark all as read
+                </WorkButton>
+              ) : (
+                <WorkButton
+                  variant="quiet"
+                  icon={RotateCcw}
+                  onClick={startAgain}
+                  testId="on-call-first-week-start-again"
+                >
+                  Start again
+                </WorkButton>
+              )}
+            </div>
+          ) : null}
+        </div>
         {offline}
         <FirstWeekPackCard
           phase={phase}
@@ -360,19 +377,6 @@ export function OnCallFirstWeekPage({ section, now: pinned }: { section?: string
                     : "Sign in to see"
           }
         />
-        {canMarkAll || canStartAgain ? (
-          <div className="flex justify-end">
-            {canMarkAll ? (
-              <WorkButton variant="quiet" onClick={markAll} testId="on-call-first-week-mark-all">
-                Mark all as read
-              </WorkButton>
-            ) : (
-              <WorkButton variant="quiet" icon={RotateCcw} onClick={startAgain} testId="on-call-first-week-start-again">
-                Start again
-              </WorkButton>
-            )}
-          </div>
-        ) : null}
         {phase.kind === "ahead" && pack.landAlert !== null && !pack.sample ? (
           <WorkCard testId="on-call-first-week-land-alert">
             <div className="flex min-h-12 items-center gap-3 py-1 pl-3 pr-1">
diff --git a/src/components/on-call/kit/grouped-list.tsx b/src/components/on-call/kit/grouped-list.tsx
index 16f500fa3e..e4977abb3d 100644
--- a/src/components/on-call/kit/grouped-list.tsx
+++ b/src/components/on-call/kit/grouped-list.tsx
@@ -45,6 +45,10 @@ export function OnCallGroupActionControl({ action }: { readonly action: OnCallGr
  *
  * `headerIcon` is still accepted so callers need not change, but the calm look
  * draws no icon tile beside an eyebrow.
+ *
+ * `inCard` draws the group as one part of a card its caller provides: the eyebrow sits inside the card and
+ * a hairline divides it from the group above, so several short groups read as one list rather than a
+ * stack of small boxes.
  */
 export function OnCallGroupedList({
   eyebrow,
@@ -53,6 +57,7 @@ export function OnCallGroupedList({
   action,
   actionNode,
   surface = "flat",
+  inCard = false,
   id,
   testId,
   className,
@@ -67,6 +72,8 @@ export function OnCallGroupedList({
   readonly actionNode?: ReactNode;
   readonly headerIcon?: LucideIcon;
   readonly surface?: "flat" | "card";
+  /** Part of a card the caller draws, with no card of its own. */
+  readonly inCard?: boolean;
   readonly id?: string;
   readonly testId?: string;
   readonly className?: string;
@@ -77,11 +84,21 @@ export function OnCallGroupedList({
     <section
       id={id}
       aria-labelledby={eyebrow ? headingId : undefined}
-      className={cn("grid min-w-0 gap-1 scroll-mt-32", className)}
+      className={cn(
+        "grid min-w-0 scroll-mt-32",
+        inCard ? "border-t border-[color:var(--work-line)] first:border-t-0" : "gap-1",
+        className,
+      )}
       data-testid={testId}
     >
       {eyebrow ? (
-        <div className="flex min-h-12 min-w-0 flex-wrap items-center justify-between gap-x-3 px-1">
+        <div
+          className={cn(
+            "flex min-w-0 flex-wrap items-center justify-between gap-x-3",
+            // Inside a card a label with nothing to tap needs no 48 px row; one with an action keeps it.
+            inCard ? cn("pl-3 pr-2", action || actionNode ? "min-h-12" : "min-h-9 pt-1") : "min-h-12 px-1",
+          )}
+        >
           <h2 id={headingId} className={eyebrowText}>
             {eyebrow}
             {count !== undefined ? <span className="nums">{` · ${count}`}</span> : null}
@@ -95,7 +112,7 @@ export function OnCallGroupedList({
           redesign, owner request 6 Oct 2026): "flat" is the kit's flat card
           (`work-card`, no lift), "card" keeps the module surface for the one
           module that should stand apart (the emergency route). */}
-      <ul role="list" className={surface === "card" ? modeModuleSurface : "work-card min-w-0"}>
+      <ul role="list" className={inCard ? "min-w-0" : surface === "card" ? modeModuleSurface : "work-card min-w-0"}>
         {children}
       </ul>
     </section>
diff --git a/src/components/on-call/now/right-now.tsx b/src/components/on-call/now/right-now.tsx
index 068b4da22c..a8438b28b3 100644
--- a/src/components/on-call/now/right-now.tsx
+++ b/src/components/on-call/now/right-now.tsx
@@ -92,7 +92,12 @@ export function NowRightNow({
         ) : (
           <>
             <div className="grid min-w-0 gap-1">
-              <p className={cn(modeHeadingText, "break-words text-xl leading-7 text-[color:var(--text-heading)]")}>
+              <p
+                className={cn(
+                  modeHeadingText,
+                  "break-words text-base-minus leading-6 text-[color:var(--text-heading)]",
+                )}
+              >
                 {title}
               </p>
               {cover ? (
diff --git a/src/components/on-call/now/signed-out-example.tsx b/src/components/on-call/now/signed-out-example.tsx
index 9236fd58c6..81e882d4b6 100644
--- a/src/components/on-call/now/signed-out-example.tsx
+++ b/src/components/on-call/now/signed-out-example.tsx
@@ -134,12 +134,15 @@ export default function OnCallNowSignedOutExample() {
         </p>
         <p className="flex min-h-12 min-w-0 flex-wrap items-center gap-x-2">
           <Phone aria-hidden="true" strokeWidth={2} className={onCallLeadingIcon} />
-          <ExampleNumber value={example.emergency.mobile} />
+          {/* The crisis lines' number size, so the two blocks share one type scale. */}
+          <span className="text-sm">
+            <ExampleNumber value={example.emergency.mobile} />
+          </span>
           <span className={modeSecondaryText}>from your mobile</span>
         </p>
         <p className="flex min-h-12 min-w-0 flex-wrap items-center gap-x-2">
           <Phone aria-hidden="true" strokeWidth={2} className={onCallLeadingIcon} />
-          <span className={cn(modeNumberText, "text-[color:var(--text-heading)]")}>
+          <span className={cn(modeNumberText, "text-sm text-[color:var(--text-heading)]")}>
             {`Dial ${example.emergency.wardCode}`}
           </span>
           <span className={modeSecondaryText}>from a ward phone</span>
@@ -151,7 +154,8 @@ export default function OnCallNowSignedOutExample() {
           Right now · after hours
         </h2>
         <div className="grid gap-0.5">
-          <p className="text-xl font-semibold text-[color:var(--text-heading)]">{example.rightNow.role}</p>
+          {/* The same size as every other heading on Now, so the role reads as one of them, not a banner. */}
+          <p className="text-base-minus font-semibold text-[color:var(--text-heading)]">{example.rightNow.role}</p>
           <p className={cn(modeSecondaryText, "flex items-center gap-1.5")}>
             <Clock aria-hidden="true" strokeWidth={1.5} className="size-icon-xs shrink-0" />
             {`${example.rightNow.name} · ${example.rightNow.until}`}
diff --git a/src/components/open-shifts/open-shifts-browse-page.tsx b/src/components/open-shifts/open-shifts-browse-page.tsx
index aaee136b22..211fb6e767 100644
--- a/src/components/open-shifts/open-shifts-browse-page.tsx
+++ b/src/components/open-shifts/open-shifts-browse-page.tsx
@@ -1,15 +1,6 @@
 "use client";
 
-import {
-  CalendarDays,
-  ChevronDown,
-  ChevronLeft,
-  CircleHelp,
-  Info,
-  ListFilter,
-  Shield,
-  TriangleAlert,
-} from "lucide-react";
+import { CalendarDays, ChevronDown, CircleHelp, Info, ListFilter, Shield, TriangleAlert } from "lucide-react";
 import dynamic from "next/dynamic";
 import Link from "next/link";
 import { useMemo, useState } from "react";
@@ -117,20 +108,10 @@ export function OpenShiftsBrowsePage() {
       </PageTitleUnderBand>
       <ModeBandStatus value={openShiftsStatus(state)} testId="open-shifts-status" />
       {sample && state.status === "ready" ? (
-        <div
-          className="flex flex-wrap items-center gap-x-3 px-3 pt-1 text-sm text-[color:var(--text-muted)]"
-          data-testid="open-shifts-sample-context"
-        >
-          <Link
-            href="/my-day"
-            aria-label="Back to My Day"
-            className="inline-flex min-h-12 items-center gap-0.5 font-medium text-[color:var(--mode-identity)]"
-          >
-            <ChevronLeft aria-hidden="true" strokeWidth={1.6} className="size-icon-sm" />
-            My Day
-          </Link>
-          <span>{`List updated ${perthTimeOf(now.toISOString())} · roster as of ${formatDayShort(today)}`}</span>
-        </div>
+        // The header's Back already returns to My Day, so this line carries only the freshness note.
+        <p className="m-0 px-3 pt-3 text-sm text-[color:var(--text-muted)]" data-testid="open-shifts-sample-context">
+          {`List updated ${perthTimeOf(now.toISOString())} · roster as of ${formatDayShort(today)}`}
+        </p>
       ) : null}
 
       {state.status === "signed-out" ? (
@@ -145,7 +126,9 @@ export function OpenShiftsBrowsePage() {
         <>
           <div className="relative">
             <div
-              className="flex gap-2 overflow-x-auto px-3 pt-3 pb-1 [scrollbar-width:none]"
+              // `work-chips` gives the one-line sideways scroll and the edge
+              // fade every chip row shares (work-mode.css).
+              className="work-chips px-3 pt-3 pb-1"
               role="group"
               aria-label="Quick filters"
             >
@@ -199,11 +182,6 @@ export function OpenShiftsBrowsePage() {
                 <ChevronDown aria-hidden="true" strokeWidth={1.6} className="size-icon-xs" />
               </button>
             </div>
-            {/* A fade at the edge says more chips sit off-screen; the row scrolls without a scrollbar. */}
-            <span
-              aria-hidden="true"
-              className="pointer-events-none absolute top-3 right-0 h-12 w-8 bg-gradient-to-l from-[color:var(--background)] to-transparent forced-colors:hidden"
-            />
             <div className="flex min-h-10 items-center justify-between px-3 text-sm text-[color:var(--text-muted)]">
               <span>
                 <span className="font-semibold text-[color:var(--text-heading)] nums">
diff --git a/src/components/roster/requests/roster-requests-page.tsx b/src/components/roster/requests/roster-requests-page.tsx
index 22733f7c96..4b13987b85 100644
--- a/src/components/roster/requests/roster-requests-page.tsx
+++ b/src/components/roster/requests/roster-requests-page.tsx
@@ -34,7 +34,7 @@ import {
   RosterSectionHead,
 } from "@/components/roster/roster-list";
 import { useRosterRead, useRosterTeams } from "@/components/roster/use-roster-team";
-import { useModeBandHeading } from "@/components/mode-band/mode-band";
+import { useModeBandHeading, useModeBandShown } from "@/components/mode-band/mode-band";
 import { WEEKDAYS, addDaysToDate, formatPerthDay, perthDateOf } from "@/lib/roster/shifts/perth-time";
 import type { RosterLeave } from "@/lib/roster/leave";
 import { isRosterLeaveKind, ROSTER_LEAVE_KIND_LABEL, type RosterLeaveKind } from "@/lib/roster/leave-kinds";
@@ -153,6 +153,7 @@ export function RosterRequestsPage() {
   const now = useRosterNow();
   // The band's words (mockup `rost_requests`); the page heading "Requests" stays under it.
   useModeBandHeading({ eyebrow: "Leave, dates and shift changes", title: "Leave and requests" });
+  const bandShown = useModeBandShown();
   const newButtonClearance = useRosterNewButtonClearance();
   const search = useSyncExternalStore(subscribeSearch, searchSnapshot, serverSearchSnapshot);
   const [consumedSearch, setConsumedSearch] = useState<string | null>(null);
@@ -347,7 +348,12 @@ export function RosterRequestsPage() {
           />
         }
       />
-      <div className="grid min-w-0 gap-3" data-mode-identity="roster">
+      {/* Under the band the page header draws nothing, but the shell still puts its gap after it, so the
+          first card would sit an empty gap below the tabs. Pull the content up by that gap. */}
+      <div
+        className={bandShown ? "-mt-5 grid min-w-0 gap-3 sm:-mt-6" : "grid min-w-0 gap-3"}
+        data-mode-identity="roster"
+      >
         {enabled.length > 1 ? (
           <label className="grid max-w-sm gap-1 text-sm text-[color:var(--text-muted)]">
             Team
diff --git a/src/components/roster/staffing/roster-staffing-entry.tsx b/src/components/roster/staffing/roster-staffing-entry.tsx
index 22d321fef9..68b13b3e5c 100644
--- a/src/components/roster/staffing/roster-staffing-entry.tsx
+++ b/src/components/roster/staffing/roster-staffing-entry.tsx
@@ -13,6 +13,8 @@ import { cn } from "@/components/ui-primitives";
  */
 function RosterStaffingEntryLinkShown() {
   return (
+    // Drawn like the Leave rows below it (one card, the same icon circle, title and line sizes), so the way
+    // into Team staffing reads as one of them rather than a bigger heading.
     <Link
       href="/roster/staffing"
       data-mode-identity="roster"
@@ -20,20 +22,19 @@ function RosterStaffingEntryLinkShown() {
       className={cn(
         focusRing,
         modePressable,
-        "flex min-h-14 min-w-0 items-center gap-3 rounded-lg border border-[color:var(--border)] bg-[color:var(--surface-raised)] px-3 py-2 no-underline",
+        "work-card flex min-h-14 min-w-0 items-center gap-2.5 px-3 py-2 no-underline",
       )}
     >
-      <span
-        aria-hidden="true"
-        className="grid size-9 shrink-0 place-items-center rounded-full bg-[color:var(--mode-identity-soft)] text-[color:var(--mode-identity)]"
-      >
-        <Users aria-hidden="true" strokeWidth={1.75} className="size-icon-md" />
+      <span aria-hidden="true" className="work-ic forced-colors:border">
+        <Users aria-hidden="true" strokeWidth={2} />
       </span>
-      <span className="grid min-w-0 flex-1">
-        <span className="text-base-minus font-semibold text-[color:var(--text-heading)]">
+      <span className="grid min-w-0 flex-1 gap-0.5">
+        <span className="break-words text-sm leading-5 font-bold text-[color:var(--text-heading)]">
           Plan with the team in view
         </span>
-        <span className="text-sm text-[color:var(--text-muted)]">How many are on each day, before you pick dates</span>
+        <span className="break-words text-2xs leading-4 text-[color:var(--text-muted)]">
+          How many are on each day, before you pick dates
+        </span>
       </span>
       <span className="shrink-0 text-sm font-semibold text-[color:var(--mode-identity)]">Plan</span>
     </Link>
diff --git a/src/components/sources/sources-browse-client.tsx b/src/components/sources/sources-browse-client.tsx
index 33fb8cfff3..f42ef23aee 100644
--- a/src/components/sources/sources-browse-client.tsx
+++ b/src/components/sources/sources-browse-client.tsx
@@ -145,10 +145,11 @@ function BrowseRow({ kind, summary, href }: { kind: SourcesBrowseKind; summary:
         href={href}
         aria-label={`View ${summary.label} sources`}
         className={cn(
-          "group grid min-h-12 grid-cols-[auto_minmax(0,1fr)_auto] items-start gap-3 rounded-lg",
-          "border border-[color:var(--border)] bg-[color:var(--surface)] p-3.5 shadow-[var(--e2)] transition",
-          "hover:-translate-y-0.5 hover:border-[color:var(--clinical-accent-border)] hover:bg-[color:var(--surface-raised)]",
-          "hover:shadow-[var(--e3)] motion-reduce:transition-none motion-reduce:hover:translate-y-0",
+          // A row of its section's one card: no border, shadow or lift of its
+          // own. The list draws the box and divides rows with a hairline.
+          "group grid min-h-12 grid-cols-[auto_minmax(0,1fr)_auto] items-start gap-3 px-3.5 py-3.5 transition-colors",
+          "hover:bg-[color:var(--surface-subtle)] motion-reduce:transition-none",
+          "focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-[color:var(--focus)]",
         )}
       >
         <span className="grid size-9 shrink-0 place-items-center rounded-lg bg-[color:var(--clinical-accent-soft)] text-[color:var(--clinical-accent)]">
@@ -221,7 +222,11 @@ function BrowseRow({ kind, summary, href }: { kind: SourcesBrowseKind; summary:
   );
 }
 
-const rowGrid = "grid gap-2.5 md:grid-cols-2 xl:grid-cols-3";
+// One hairline card per group, rows divided by a hairline, one column at every
+// width. The three-column grid of separate cards made a heading's sources read
+// as unrelated tiles rather than as one list.
+const rowGrid =
+  "divide-y divide-[color:var(--border)] overflow-hidden rounded-xl border border-[color:var(--border)] bg-[color:var(--surface)]";
 
 type FacetKey = "jurisdiction" | "band" | "usedBy";
 
@@ -506,7 +511,7 @@ export function SourcesBrowseClient({
               {/* A compact label row, not the `text-xl` block this replaced. The
                   heading is the page's outline; it is not the page's furniture,
                   and on a phone it was costing a publisher of screen each time. */}
-              <div className="flex flex-wrap items-baseline gap-x-2 gap-y-0.5 border-b border-[color:var(--border)] pb-1.5">
+              <div className="flex flex-wrap items-baseline gap-x-2 gap-y-0.5 px-0.5">
                 <h2 id={`publisher-scope-${section.scope}`} className={eyebrowText}>
                   {jurisdictionLabels[section.scope]}
                 </h2>
diff --git a/src/components/sources/sources-catalogue-client.tsx b/src/components/sources/sources-catalogue-client.tsx
index 1bb603a2ce..1ebb6baa15 100644
--- a/src/components/sources/sources-catalogue-client.tsx
+++ b/src/components/sources/sources-catalogue-client.tsx
@@ -132,10 +132,11 @@ function SourceTile({ entry }: { entry: ClinicalSourceClientEntry }) {
       href={`/sources/${entry.id}`}
       aria-label={`View source details: ${entry.title}`}
       className={cn(
-        "group grid grid-cols-[minmax(0,1fr)_auto] items-start gap-3 rounded-lg border border-[color:var(--border)]",
-        "bg-[color:var(--surface)] p-4 shadow-[var(--e2)] transition",
-        "hover:-translate-y-0.5 hover:border-[color:var(--clinical-accent-border)] hover:bg-[color:var(--surface-raised)]",
-        "hover:shadow-[var(--e3)] motion-reduce:transition-none motion-reduce:hover:translate-y-0",
+        // A row of the one catalogue card, not a card of its own: the list
+        // draws the box and a hairline divides each source from the next.
+        "group grid min-h-12 grid-cols-[minmax(0,1fr)_auto] items-start gap-3 px-4 py-3.5 transition-colors",
+        "hover:bg-[color:var(--surface-subtle)] motion-reduce:transition-none",
+        "focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-[color:var(--focus)]",
       )}
     >
       <span className="min-w-0">
@@ -432,11 +433,16 @@ export function SourcesCatalogueClient({
     >
       {entries.length ? (
         <>
-          <div className="grid gap-3 md:grid-cols-2">
+          {/* One hairline card for the page of sources, rows divided by a
+              hairline. One column at every width: two columns of rows inside
+              one card read as a table with no header. */}
+          <ul className="divide-y divide-[color:var(--border)] overflow-hidden rounded-xl border border-[color:var(--border)] bg-[color:var(--surface)]">
             {entries.map((entry) => (
-              <SourceTile key={entry.id} entry={entry} />
+              <li key={entry.id}>
+                <SourceTile entry={entry} />
+              </li>
             ))}
-          </div>
+          </ul>
           <Pagination
             className="pt-4"
             page={page}
diff --git a/src/components/specifiers/specifier-builder-page.tsx b/src/components/specifiers/specifier-builder-page.tsx
index b067e6a10f..5cbcb3f5a2 100644
--- a/src/components/specifiers/specifier-builder-page.tsx
+++ b/src/components/specifiers/specifier-builder-page.tsx
@@ -52,6 +52,14 @@ import {
 } from "@/lib/specifiers";
 import { copyButton, errorCopy, specifierBuilderCopy } from "@/lib/ui-copy";
 
+// Primary buttons wear the area colour, never the shared near-black command
+// fill (design pass, October 2026). Re-pointing the command tokens on the
+// button itself keeps Button's hover and pressed states and leaves every other
+// control on the page alone. In forced colours the accent becomes LinkText,
+// which ButtonText cannot sit on, so the native button pair comes back.
+const clinicalPrimaryAccent =
+  "[--command:var(--clinical-accent)] [--command-hover:var(--clinical-accent-hover)] [--command-active:var(--clinical-accent-active)] [--command-contrast:var(--clinical-accent-contrast)] forced-colors:[--command:ButtonFace] forced-colors:[--command-hover:ButtonFace] forced-colors:[--command-active:ButtonFace]";
+
 const specifierFamilyOrder: Record<SpecifierFamily, number> = {
   "episode-features": 0,
   "course-onset": 1,
@@ -813,7 +821,7 @@ export function SpecifierBuilderPage({ initialSpecifiers = [] }: { initialSpecif
                 </p>
               </div>
               <div className="grid gap-4 p-4 sm:p-5">
-                <div className="rounded-xl border border-[color:var(--clinical-accent-border)] bg-[color:var(--clinical-accent-soft)]/45 p-4">
+                <div className="rounded-lg bg-[color:var(--clinical-accent-soft)] p-4">
                   <p className={eyebrowText}>Completed wording</p>
                   <p
                     data-testid="specifier-completed-wording"
@@ -823,7 +831,9 @@ export function SpecifierBuilderPage({ initialSpecifiers = [] }: { initialSpecif
                   </p>
                 </div>
 
-                <div className="grid gap-2">
+                {/* One divided list bleeding to the review card's edges, not a
+                    bordered card per step nested inside the review card. */}
+                <div className="-mx-4 grid divide-y divide-[color:var(--border)] border-y border-[color:var(--border)] sm:-mx-5">
                   {steps.map((step) => {
                     let value: string = specifierBuilderCopy.review.notSpecified;
                     if (step.kind === "base") {
@@ -838,7 +848,7 @@ export function SpecifierBuilderPage({ initialSpecifiers = [] }: { initialSpecif
                     return (
                       <div
                         key={step.id}
-                        className="grid min-w-0 grid-cols-[minmax(0,1fr)_auto] items-center gap-3 rounded-lg border border-[color:var(--border)] bg-[color:var(--surface-raised)] px-3 py-2.5"
+                        className="grid min-h-12 min-w-0 grid-cols-[minmax(0,1fr)_auto] items-center gap-3 px-4 py-2.5 sm:px-5"
                       >
                         <div className="min-w-0">
                           <p className="text-2xs font-bold uppercase tracking-wide text-[color:var(--text-muted)]">
@@ -873,6 +883,7 @@ export function SpecifierBuilderPage({ initialSpecifiers = [] }: { initialSpecif
                   <Button
                     type="button"
                     variant="primary"
+                    className={clinicalPrimaryAccent}
                     onClick={() => void copyWording()}
                     icon={copyState === "copied" ? Check : ClipboardCopy}
                   >
@@ -922,7 +933,13 @@ export function SpecifierBuilderPage({ initialSpecifiers = [] }: { initialSpecif
                 <ChevronLeft className="h-4 w-4" aria-hidden />
                 {specifierBuilderCopy.navigation.previous}
               </button>
-              <Button type="button" variant="primary" onClick={() => move(1)} trailingIcon={ArrowRight}>
+              <Button
+                type="button"
+                variant="primary"
+                className={clinicalPrimaryAccent}
+                onClick={() => move(1)}
+                trailingIcon={ArrowRight}
+              >
                 {continueLabelFor(steps, activeIndex)}
               </Button>
             </div>
diff --git a/src/components/specifiers/specifier-ui.tsx b/src/components/specifiers/specifier-ui.tsx
index 862ce5f2a4..ce7ff8f5af 100644
--- a/src/components/specifiers/specifier-ui.tsx
+++ b/src/components/specifiers/specifier-ui.tsx
@@ -145,9 +145,11 @@ export function SpecifierMatchCard({ record, isTopMatch }: { record: SpecifierRe
               </div>
             </div>
 
+            {/* A tinted well rather than a bordered card: the result is
+                already the card, and a box inside it was a card in a card. */}
             <div
               data-specifier-card-signal
-              className="rounded-lg border border-[color:var(--clinical-accent-border)] bg-[color:var(--clinical-accent-soft)]/55 p-3.5 sm:mt-0.5"
+              className="rounded-lg bg-[color:var(--clinical-accent-soft)] p-3.5 sm:mt-0.5"
             >
               <p className={eyebrowText}>Deciding signal</p>
               <p className="mt-1.5 text-sm font-semibold leading-5 text-[color:var(--text-heading)]">
diff --git a/src/components/therapy-compass/controls.ts b/src/components/therapy-compass/controls.ts
index 283d5ef1e7..f2119f33e6 100644
--- a/src/components/therapy-compass/controls.ts
+++ b/src/components/therapy-compass/controls.ts
@@ -63,13 +63,17 @@ export const favouritePressed = cn(controlPressed, "aria-pressed:[&_svg]:fill-cu
  * family does this card belong to". This edge answers a different question —
  * "this is the principal panel on the screen" — and a therapy screen has only
  * one category to begin with, so the top edge would say nothing the page does
- * not already say. The side is the only thing therapy keeps; the colour comes
- * through the shared `--cat-accent`, which `:root` aliases to
- * `--clinical-accent`, so this renders exactly as the private token did while
- * remaining remappable per category, per theme and under forced colors.
+ * not already say. The colour comes through the shared category tokens, which
+ * `:root` aliases to the clinical accent, so it stays remappable per category,
+ * per theme and under forced colors.
  *
  * The two hero cards used to be two independent literals. They are one now.
+ *
+ * October 2026 design pass: coloured side bars are retired in both modes (one
+ * card per group, no bars). Prominence is now the whole hairline in the area's
+ * tint, through the same remappable `--cat-border`, rather than a thick left
+ * stripe that read as an alert rail.
  */
-export const heroAccentEdge = "border-l-[3px] border-l-[color:var(--cat-accent)]";
+export const heroAccentEdge = "border-[color:var(--cat-border)]";
 
 export const heroCard = cn(cardSurface, heroAccentEdge);
diff --git a/src/components/therapy-compass/pathway-picker-sheet.tsx b/src/components/therapy-compass/pathway-picker-sheet.tsx
index 8cc22a5170..a3c7cec941 100644
--- a/src/components/therapy-compass/pathway-picker-sheet.tsx
+++ b/src/components/therapy-compass/pathway-picker-sheet.tsx
@@ -27,14 +27,18 @@ export function PathwayListRail({ pathways, activeSlug, onSelect }: PathwayListR
   return (
     <div className="therapy-pathway-list hidden border-r border-[color:var(--border)] p-4 sm:block">
       <div className="mb-3.5 text-base-minus font-semibold text-[color:var(--text-heading)]">Pathways</div>
-      <div className="flex flex-col gap-2.5">
+      {/* Divided rows, not a stack of cards: the rail already sits inside the
+          pathway card, and a card per pathway put boxes inside a box. The
+          chosen pathway is a soft tint of the area colour, with no side bar. */}
+      <div className="flex flex-col border-y border-[color:var(--border)]">
         {pathways.map((pathway) => {
           const active = pathway.slug === activeSlug;
           const reviewed = pathway.reviewStatus === "reviewed";
           return (
             <InteractiveRow
               key={pathway.slug}
-              variant="card"
+              variant="table-row"
+              className="items-start gap-3.5 px-2 py-3.5 aria-[current=true]:bg-[color:var(--clinical-accent-soft)]"
               active={active}
               aria-label={pathwayRowAccessibleName(pathway, active)}
               onClick={() => onSelect(pathway.slug)}
diff --git a/src/components/therapy-compass/pathway-step-stack.tsx b/src/components/therapy-compass/pathway-step-stack.tsx
index 15e8011070..fca81ce9c4 100644
--- a/src/components/therapy-compass/pathway-step-stack.tsx
+++ b/src/components/therapy-compass/pathway-step-stack.tsx
@@ -3,7 +3,6 @@
 import type { ReactNode } from "react";
 import { ChevronRight, Scale, Waypoints } from "lucide-react";
 
-import { cardSurface } from "@/components/card-recipes";
 import { Button } from "@/components/ui/button";
 import { cn } from "@/components/ui-primitives";
 
@@ -37,12 +36,15 @@ function StepCard({
   const roleLabel = step.label ?? "STEP";
 
   if (layout === "mobile") {
+    // A divided row of the pathway card, not a card of its own. The pathway
+    // card is the one box; steps are separated by a hairline, and the numbered
+    // timeline still runs from each step down to the next.
     return (
-      <article className={cn(cardSurface, "relative flex flex-col gap-3 p-4")}>
+      <article className="relative flex flex-col gap-1.5 py-4">
         {!last ? (
           <span
             aria-hidden="true"
-            className="pointer-events-none absolute bottom-[-10px] left-[calc(1rem+14px)] top-[calc(1rem+1.75rem)] w-px bg-[color:var(--border)]"
+            className="pointer-events-none absolute bottom-[-1rem] left-[14px] top-[calc(1rem+1.75rem)] w-px bg-[color:var(--border)]"
           />
         ) : null}
         <div className="flex items-start gap-3">
@@ -72,7 +74,15 @@ function StepCard({
           </div>
         </div>
         {therapy ? (
-          <Button variant="secondary" size="sm" className="w-full min-h-tap" onClick={() => onOpenRecord(therapy.slug)}>
+          // A quiet text action under the step's prose. The full-width bordered
+          // button it replaces was a third box inside the step and the card.
+          <Button
+            variant="ghost"
+            size="sm"
+            trailingIcon={ChevronRight}
+            className="ml-8 min-h-tap self-start px-2 text-[color:var(--clinical-accent)] hover:text-[color:var(--clinical-accent)]"
+            onClick={() => onOpenRecord(therapy.slug)}
+          >
             Open record
           </Button>
         ) : (
@@ -90,6 +100,9 @@ function StepCard({
   return (
     <div className="relative flex items-stretch gap-4">
       <div className="flex w-[26px] flex-none flex-col items-center">
+        {/* The timeline's top stub. Rows now sit flush, so the line has to
+            carry on from the step above rather than stop at a gap. */}
+        <span aria-hidden="true" className={cn("mb-1 h-3 w-px flex-none", index > 0 && "bg-[color:var(--border)]")} />
         <span
           className={cn(
             "inline-flex size-[26px] flex-none items-center justify-center rounded-full text-xs font-semibold",
@@ -102,13 +115,14 @@ function StepCard({
         </span>
         {!last ? <span aria-hidden="true" className="mt-1 w-px flex-1 bg-[color:var(--border)]" /> : null}
       </div>
+      {/* A row divided by a hairline, not a card inside the pathway card. */}
       <div
         className={cn(
-          cardSurface,
-          "flex min-w-0 flex-1 items-center gap-3.5 px-4 py-3.5 transition-colors duration-[var(--duration-instant)] hover:bg-[color:var(--surface-subtle)]",
+          "flex min-w-0 flex-1 items-center gap-3.5 px-2 py-3.5 transition-colors duration-[var(--duration-instant)] hover:bg-[color:var(--surface-subtle)]",
+          !last && "border-b border-[color:var(--border)]",
         )}
       >
-        <span className="inline-flex size-[34px] flex-none items-center justify-center rounded-md bg-[color:var(--surface-inset)] text-[color:var(--text-muted)]">
+        <span className="inline-flex size-[34px] flex-none items-center justify-center rounded-md bg-[color:var(--clinical-accent-soft)] text-[color:var(--clinical-accent)]">
           <Scale aria-hidden="true" size={17} strokeWidth={1.6} />
         </span>
         <div className="min-w-0 flex-1">
@@ -141,7 +155,11 @@ function StepCard({
 export function PathwayStepStack({ steps, bySlug, onOpenRecord }: PathwayStepStackProps) {
   return (
     <>
-      <div data-testid="therapy-pathway-steps" className="flex flex-col gap-2.5 sm:hidden" aria-label="Pathway steps">
+      <div
+        data-testid="therapy-pathway-steps"
+        className="flex flex-col divide-y divide-[color:var(--border)] sm:hidden"
+        aria-label="Pathway steps"
+      >
         {steps.map((step, index) => {
           const therapy = step.therapySlug ? bySlug.get(step.therapySlug) : undefined;
           return (
@@ -157,11 +175,7 @@ export function PathwayStepStack({ steps, bySlug, onOpenRecord }: PathwayStepSta
           );
         })}
       </div>
-      <div
-        data-testid="therapy-pathway-steps-desktop"
-        className="hidden flex-col gap-2.5 sm:flex"
-        aria-label="Pathway steps"
-      >
+      <div data-testid="therapy-pathway-steps-desktop" className="hidden flex-col sm:flex" aria-label="Pathway steps">
         {steps.map((step, index) => {
           const therapy = step.therapySlug ? bySlug.get(step.therapySlug) : undefined;
           return (
diff --git a/src/components/therapy-compass/screens/pathways-screen.tsx b/src/components/therapy-compass/screens/pathways-screen.tsx
index 85bdbc9d9a..ee00211ca7 100644
--- a/src/components/therapy-compass/screens/pathways-screen.tsx
+++ b/src/components/therapy-compass/screens/pathways-screen.tsx
@@ -63,7 +63,7 @@ export function PathwaysScreen() {
       <div className={cn(cardSurface, "grid grid-cols-1 sm:grid-cols-[320px_minmax(0,_1fr)] gap-4")}>
         <PathwayListRail pathways={b.pathways} activeSlug={pathway.slug} onSelect={b.selectPathway} />
 
-        <div className="min-w-0 px-4 py-5 sm:px-6 sm:py-6">
+        <div className="min-w-0 px-4 py-1 sm:px-6 sm:py-6">
           <div className="hidden sm:block">
             <PathwayDetailHeader
               pathway={pathway}
diff --git a/src/components/tools/tools-search-results-page.tsx b/src/components/tools/tools-search-results-page.tsx
index 096d2aa168..d2134fdcc0 100644
--- a/src/components/tools/tools-search-results-page.tsx
+++ b/src/components/tools/tools-search-results-page.tsx
@@ -16,6 +16,7 @@ import { CategoryIconTile } from "@/components/category-icon-tile";
 import { DesktopComposerPortalSlot } from "@/components/desktop-composer-portal-slot";
 import { modeHomeComposerReservePendingValue } from "@/lib/mode-home-composer";
 import { cn, controlBase, floatingControl } from "@/components/ui-primitives";
+import { pageHeadingDescriptionClass, pageHeadingTitleClass } from "@/components/ui/page-header";
 import { Sheet } from "@/components/ui/sheet";
 import { TOOL_AREA_ACCENT, toolIdentity } from "@/lib/category-identity";
 import { isLocalNoAuthMode, resolveClientDemoMode } from "@/lib/client-env";
@@ -429,11 +430,9 @@ export function ToolsSearchResultsPage({
       ) : null}
       <div className="mx-auto grid max-w-6xl gap-6">
         {searching ? null : (
-          <header className="grid gap-1 px-1">
-            <h1 className="text-2xl font-bold tracking-tight text-[color:var(--text-heading)] sm:text-3xl">Tools</h1>
-            <p className="text-sm text-[color:var(--text-muted)]">
-              Grouped by the job you are doing. Tap a tool to open it.
-            </p>
+          <header className="grid gap-1.5 px-1">
+            <h1 className={pageHeadingTitleClass}>Tools</h1>
+            <p className={pageHeadingDescriptionClass}>Grouped by the job you are doing. Tap a tool to open it.</p>
           </header>
         )}
         <ToolLocalSearch value={query} onChange={setLocalQuery} onSubmit={submitLocalSearch} className="w-full" />
diff --git a/src/components/ui/catalogue-toolbar.tsx b/src/components/ui/catalogue-toolbar.tsx
index 4cac204176..379bc3a18c 100644
--- a/src/components/ui/catalogue-toolbar.tsx
+++ b/src/components/ui/catalogue-toolbar.tsx
@@ -105,90 +105,92 @@ export function CatalogueToolbar({
 
   return (
     <div data-testid={testId} className={cn("flex flex-col gap-3", className)}>
-      {/* Primary Toolbar Row */}
-      <div className="flex flex-wrap items-center justify-between gap-2.5">
-        <div className="flex flex-1 flex-wrap items-center gap-2 min-w-0">
-          {/* Search control */}
-          {search ? (
-            <div className="min-w-[200px] flex-1 max-w-md">
-              {isSearchProps(search) ? (
-                <TextField
-                  label={search.label ?? `Search ${pluralNoun}`}
-                  hideLabel={search.hideLabel ?? true}
-                  icon={Search}
-                  value={search.query}
-                  onChange={(e: ChangeEvent<HTMLInputElement>) => search.onQueryChange(e.target.value)}
-                  placeholder={search.placeholder ?? `Search ${pluralNoun}…`}
-                  disabled={search.disabled}
-                  className={cn("font-semibold", search.className)}
-                />
-              ) : (
-                search
-              )}
-            </div>
-          ) : null}
-
-          {/* Sort control */}
-          {sort ? (
-            <div className="min-w-[140px] shrink-0">
-              {isSortProps(sort) ? (
-                <Select
-                  label={sort.label ?? `Sort ${pluralNoun}`}
-                  hideLabel={sort.hideLabel ?? true}
-                  value={sort.value}
-                  onChange={(e: ChangeEvent<HTMLSelectElement>) => sort.onChange(e.target.value)}
-                  options={[...sort.options]}
-                  disabled={sort.disabled}
-                  className={cn("font-semibold", sort.className)}
-                />
-              ) : (
-                sort
-              )}
-            </div>
-          ) : null}
-
-          {/* Filter trigger button */}
-          {filterTrigger ? (
-            <div className="shrink-0">
-              {isFilterTriggerProps(filterTrigger) ? (
-                <button
-                  type="button"
-                  data-testid={filterTrigger.testId ?? "catalogue-filter-trigger"}
-                  aria-expanded={filterTrigger.open}
-                  aria-controls={filterTrigger.panelId}
-                  disabled={filterTrigger.disabled}
-                  onClick={filterTrigger.onToggle}
-                  className={cn(
-                    "inline-flex min-h-tap items-center gap-2 rounded-xl border px-3.5 py-2 text-xs font-bold transition",
-                    filterTrigger.open || (filterTrigger.activeCount ?? 0) > 0
-                      ? "border-[color:var(--clinical-accent)] bg-[color:var(--clinical-accent-soft)] text-[color:var(--clinical-accent)]"
-                      : "border-[color:var(--border)] bg-[color:var(--surface)] text-[color:var(--text-heading)] hover:border-[color:var(--border-strong)] hover:bg-[color:var(--surface-subtle)]",
-                    "focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[color:var(--focus)]",
-                  )}
-                >
-                  <Filter className="h-3.5 w-3.5 shrink-0" aria-hidden />
-                  <span>{filterTrigger.label ?? "Filter"}</span>
-                  {(filterTrigger.activeCount ?? 0) > 0 ? (
-                    <span
-                      data-testid="catalogue-filter-badge"
-                      className="grid h-5 min-w-5 place-items-center rounded-full bg-[color:var(--clinical-accent)] px-1 text-3xs font-black text-[color:var(--clinical-accent-contrast)]"
-                    >
-                      {filterTrigger.activeCount}
-                    </span>
-                  ) : null}
-                </button>
-              ) : (
-                filterTrigger
-              )}
-            </div>
-          ) : null}
-
-          {/* Optional inline custom children */}
-          {children}
-        </div>
+      {/* Primary Toolbar Row. One flat wrapping row: on a phone the search
+          takes the whole first line, and the sort, filter and count share the
+          line under it, count pushed to the right edge. The nested left group
+          this replaced squeezed the search beside the count, so its
+          placeholder truncated and the count floated between two lines. */}
+      <div className="flex flex-wrap items-center gap-2">
+        {/* Search control */}
+        {search ? (
+          <div className="w-full min-w-0 sm:w-auto sm:min-w-[200px] sm:max-w-md sm:flex-1">
+            {isSearchProps(search) ? (
+              <TextField
+                label={search.label ?? `Search ${pluralNoun}`}
+                hideLabel={search.hideLabel ?? true}
+                icon={Search}
+                value={search.query}
+                onChange={(e: ChangeEvent<HTMLInputElement>) => search.onQueryChange(e.target.value)}
+                placeholder={search.placeholder ?? `Search ${pluralNoun}…`}
+                disabled={search.disabled}
+                className={cn("font-semibold", search.className)}
+              />
+            ) : (
+              search
+            )}
+          </div>
+        ) : null}
+
+        {/* Sort control */}
+        {sort ? (
+          <div className="min-w-[140px] shrink-0">
+            {isSortProps(sort) ? (
+              <Select
+                label={sort.label ?? `Sort ${pluralNoun}`}
+                hideLabel={sort.hideLabel ?? true}
+                value={sort.value}
+                onChange={(e: ChangeEvent<HTMLSelectElement>) => sort.onChange(e.target.value)}
+                options={[...sort.options]}
+                disabled={sort.disabled}
+                className={cn("font-semibold", sort.className)}
+              />
+            ) : (
+              sort
+            )}
+          </div>
+        ) : null}
+
+        {/* Filter trigger button */}
+        {filterTrigger ? (
+          <div className="shrink-0">
+            {isFilterTriggerProps(filterTrigger) ? (
+              <button
+                type="button"
+                data-testid={filterTrigger.testId ?? "catalogue-filter-trigger"}
+                aria-expanded={filterTrigger.open}
+                aria-controls={filterTrigger.panelId}
+                disabled={filterTrigger.disabled}
+                onClick={filterTrigger.onToggle}
+                className={cn(
+                  "inline-flex min-h-tap items-center gap-2 rounded-xl border px-3.5 py-2 text-xs font-bold transition",
+                  filterTrigger.open || (filterTrigger.activeCount ?? 0) > 0
+                    ? "border-[color:var(--clinical-accent)] bg-[color:var(--clinical-accent-soft)] text-[color:var(--clinical-accent)]"
+                    : "border-[color:var(--border)] bg-[color:var(--surface)] text-[color:var(--text-heading)] hover:border-[color:var(--border-strong)] hover:bg-[color:var(--surface-subtle)]",
+                  "focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[color:var(--focus)]",
+                )}
+              >
+                <Filter className="h-3.5 w-3.5 shrink-0" aria-hidden />
+                <span>{filterTrigger.label ?? "Filter"}</span>
+                {(filterTrigger.activeCount ?? 0) > 0 ? (
+                  <span
+                    data-testid="catalogue-filter-badge"
+                    className="grid h-5 min-w-5 place-items-center rounded-full bg-[color:var(--clinical-accent)] px-1 text-3xs font-black text-[color:var(--clinical-accent-contrast)]"
+                  >
+                    {filterTrigger.activeCount}
+                  </span>
+                ) : null}
+              </button>
+            ) : (
+              filterTrigger
+            )}
+          </div>
+        ) : null}
+
+        {/* Optional inline custom children */}
+        {children}
 
         {/* Right side: Count readout & Actions */}
-        <div className="flex items-center gap-3 shrink-0">
+        <div className="ml-auto flex shrink-0 items-center gap-3">
           {countLabel ? (
             <span
               data-testid="catalogue-match-count"
diff --git a/src/components/ui/page-header.tsx b/src/components/ui/page-header.tsx
index a3661049df..24ec0fe140 100644
--- a/src/components/ui/page-header.tsx
+++ b/src/components/ui/page-header.tsx
@@ -16,7 +16,7 @@ import { ChevronRight, type LucideIcon } from "lucide-react";
 import Link from "next/link";
 import type { ReactNode } from "react";
 import { ContextualBackLink } from "@/components/contextual-back-link";
-import { cn, eyebrowText, iconTilePremium, textMuted } from "@/components/ui-primitives";
+import { cn, iconTilePremium } from "@/components/ui-primitives";
 
 export type Crumb = {
   label: string;
@@ -111,6 +111,20 @@ export function Breadcrumb({ items, className }: BreadcrumbProps) {
   );
 }
 
+/*
+ * One heading voice for every page title block. Exported so the few pages that
+ * hand-roll their own header (they own layout the shared component cannot)
+ * can borrow the same type instead of drifting: eyebrow 11px muted caps, title
+ * 24px (26px from sm) bold with tight tracking, description 14px muted capped
+ * at a comfortable line length. Spacing is 6px between each tier.
+ */
+export const pageHeadingEyebrowClass =
+  "text-2xs font-semibold uppercase leading-4 tracking-eyebrow text-[color:var(--text-muted)]";
+export const pageHeadingTitleClass =
+  "text-balance text-2xl font-bold leading-tight tracking-display text-[color:var(--text-heading)] sm:text-3xl-minus";
+export const pageHeadingDescriptionClass =
+  "max-w-[60ch] text-pretty text-sm font-normal leading-6 text-[color:var(--text-muted)]";
+
 export type PageHeaderProps = {
   title: string;
   /** Short kicker above the title — section, mode, or record kind. */
@@ -150,9 +164,8 @@ export type PageHeaderProps = {
  * I", so it wraps; the title column is `minmax(0, 1fr)` and the actions wrap onto
  * their own row rather than eating into it.
  *
- * The title also takes the display scale the hand-rolled product headers already
- * shipped (`text-2xl`/`sm:text-3xl`, extrabold), so converging onto this
- * component is not a demotion for the pages that converge.
+ * The title takes one shared scale (24px, 26px from sm, bold) so every page
+ * heading reads the same; see the exported `pageHeading*Class` strings.
  */
 export function PageHeader({
   title,
@@ -203,22 +216,16 @@ export function PageHeader({
             </span>
           ) : null}
           <div className="min-w-0">
-            {eyebrow ? <p className={eyebrowText}>{eyebrow}</p> : null}
+            {eyebrow ? <p className={pageHeadingEyebrowClass}>{eyebrow}</p> : null}
             {/* `items-baseline` would drop a bordered chip below the cap line of a
                 28px heading; `items-center` keeps the chip optically centred on
                 the title's first line, and `flex-wrap` sends it under the title
                 on a narrow screen rather than squeezing the heading. */}
             <div className={cn("flex flex-wrap items-center gap-x-3 gap-y-1.5", eyebrow && "mt-1.5")}>
-              <h1 className="text-balance text-2xl font-extrabold leading-tight tracking-tight text-[color:var(--text-heading)] sm:text-3xl">
-                {title}
-              </h1>
+              <h1 className={pageHeadingTitleClass}>{title}</h1>
               {inlineMeta}
             </div>
-            {description ? (
-              <p className={cn("mt-1.5 max-w-[68ch] text-pretty text-sm font-medium leading-6", textMuted)}>
-                {description}
-              </p>
-            ) : null}
+            {description ? <p className={cn("mt-1.5", pageHeadingDescriptionClass)}>{description}</p> : null}
           </div>
         </div>
         {actions ? <div className="flex min-w-0 flex-wrap items-center gap-2">{actions}</div> : null}
diff --git a/src/components/work-frame/work-frame-header.tsx b/src/components/work-frame/work-frame-header.tsx
index 6fc95c880e..bd72c7a5e3 100644
--- a/src/components/work-frame/work-frame-header.tsx
+++ b/src/components/work-frame/work-frame-header.tsx
@@ -89,7 +89,7 @@ function WorkFrameTabName({ item, className }: { readonly item: WorkFrameItem; r
 
 /**
  * The work-mode header band (work-mode redesign, owner request 6 Oct 2026):
- * the area's pale tint with a dot texture and a faint line drawing, an eyebrow
+ * the area's pale tint and a faint line drawing, an eyebrow
  * and title with one optional glass action, then the three pinned tabs and
  * More, which opens the area's whole navigation as a bottom sheet.
  *
diff --git a/src/components/work-profile/work-profile-page.tsx b/src/components/work-profile/work-profile-page.tsx
index f346f041fb..93d043cb49 100644
--- a/src/components/work-profile/work-profile-page.tsx
+++ b/src/components/work-profile/work-profile-page.tsx
@@ -4,6 +4,7 @@ import {
   BriefcaseBusiness,
   Check,
   ChevronLeft,
+  CircleDashed,
   Cloud,
   CloudOff,
   FileText,
@@ -205,14 +206,16 @@ function SignedOutBody() {
             title={row.title}
             subtitle={row.subtitle}
             trailing={
-              row.label === "Ready" ? (
-                <span className="inline-flex items-center gap-1 text-[color:var(--text-muted)]">
+              // Every status is an icon then its words, on one line, so "1 not recorded" lines up with the
+              // "Ready" ticks instead of sitting loose beside them.
+              <span className="inline-flex items-center gap-1 whitespace-nowrap text-[color:var(--text-muted)]">
+                {row.label === "Ready" ? (
                   <Check aria-hidden="true" className="size-icon-sm" />
-                  {row.label}
-                </span>
-              ) : (
-                <span className="text-[color:var(--text-muted)]">{row.label}</span>
-              )
+                ) : (
+                  <CircleDashed aria-hidden="true" className="size-icon-sm" />
+                )}
+                {row.label}
+              </span>
             }
           />
         ))}
diff --git a/src/components/work-screens/admin/bookings-page.tsx b/src/components/work-screens/admin/bookings-page.tsx
index fccb037cc9..e466cf0760 100644
--- a/src/components/work-screens/admin/bookings-page.tsx
+++ b/src/components/work-screens/admin/bookings-page.tsx
@@ -287,7 +287,15 @@ function AvailabilityTag({
     case "closed":
       return <WorkTag tone="neutral">Closed</WorkTag>;
     case "book":
-      return <WorkTag>Book</WorkTag>;
+      // The one state that is an action, so it looks like a button, not a
+      // status word. It sits inside the row's link (which opens the course to
+      // book), so it borrows the secondary button face as a span: a real
+      // <button> inside a link is invalid and would split the tap target.
+      return (
+        <span className="work-button" data-variant="secondary">
+          Book
+        </span>
+      );
     case "cancelled":
       return <WorkTag tone="neutral">Cancelled</WorkTag>;
     case "started":
diff --git a/src/lib/phone-mode-groups.ts b/src/lib/phone-mode-groups.ts
index 3106ec8d27..1d12de6471 100644
--- a/src/lib/phone-mode-groups.ts
+++ b/src/lib/phone-mode-groups.ts
@@ -106,6 +106,20 @@ export function modeMenuSideForMode(modeId: AppModeId): ModeMenuSideId {
   return phoneModeGroups.find((group) => (group.modeIds as readonly AppModeId[]).includes(modeId))?.side ?? "clinical";
 }
 
+/**
+ * A Clinical page (not the shared home) wears the clinical band's soft tint on
+ * its top bar (owner design review, 11 Oct 2026; mode-band.css). Decided from
+ * the mode and address alone, so it is in the server HTML and never flashes.
+ * Returns the `data-clinical-band` attribute value.
+ */
+export function clinicalBandAttribute(
+  modeId: AppModeId,
+  pathname: string | null | undefined,
+  onWorkArea: boolean,
+): "" | undefined {
+  return !onWorkArea && (pathname ?? "/") !== "/" && modeMenuSideForMode(modeId) === "clinical" ? "" : undefined;
+}
+
 /**
  * `modes` in the order one side of the menu draws them.
  *
diff --git a/tests/admin-contract-page.dom.test.tsx b/tests/admin-contract-page.dom.test.tsx
index b184144592..0c30c67317 100644
--- a/tests/admin-contract-page.dom.test.tsx
+++ b/tests/admin-contract-page.dom.test.tsx
@@ -340,12 +340,13 @@ describe("ContractEndPage", () => {
     expect(screen.queryByTestId("admin-contract-question-mark")).toBeNull();
   });
 
-  it("goes back to Admin Today, and offers sign-in when example records are shown to nobody signed in", () => {
+  it("leaves the way back to the band's Today tab, and offers sign-in when example records are shown to nobody signed in", () => {
     Object.assign(entryState, { demoMode: true, entries: [] });
     account.isAuthenticated = false;
     try {
       render(<ContractEndPage now={NOW} />);
-      expect(screen.getByTestId("admin-contract-back").getAttribute("href")).toBe("/admin");
+      // One way back: the band's Today tab is Admin Today, so the page adds no second link to it.
+      expect(screen.queryByTestId("admin-contract-back")).toBeNull();
       expect(screen.getByTestId("admin-contract-read-only").textContent).toContain("Sign in to track");
       expect(screen.queryByTestId("account-setup-dialog")).toBeNull();
       fireEvent.click(screen.getByTestId("admin-contract-sign-in"));
diff --git a/tests/admin-leave-wallet-page.dom.test.tsx b/tests/admin-leave-wallet-page.dom.test.tsx
index 9c9985fa9c..7e58973974 100644
--- a/tests/admin-leave-wallet-page.dom.test.tsx
+++ b/tests/admin-leave-wallet-page.dom.test.tsx
@@ -74,7 +74,8 @@ describe("LeaveWalletPage", () => {
     expect(screen.getByTestId("admin-leave-sign-off").textContent).toContain("Figures from your agreement");
     expect(screen.queryByTestId("admin-leave-agreement-end")).toBeNull();
     expect(screen.getByTestId("admin-leave-agreement").getAttribute("href")).toMatch(/^https:\/\//);
-    expect(screen.getByTestId("admin-leave-back").getAttribute("href")).toBe("/admin");
+    // One way back: the band's Today tab is Admin Today, so the page adds no second link to it.
+    expect(screen.queryByTestId("admin-leave-back")).toBeNull();
   });
 
   it("opens a card on top, with the rest as a thin pile", () => {
diff --git a/tests/admin-renewals-page.dom.test.tsx b/tests/admin-renewals-page.dom.test.tsx
index ce82f263f1..562e8e00d0 100644
--- a/tests/admin-renewals-page.dom.test.tsx
+++ b/tests/admin-renewals-page.dom.test.tsx
@@ -711,11 +711,14 @@ describe("AdminRenewalsPage — readable timeline, wrapping chips, short Not rec
     expect(list.textContent).toMatch(/Working with Children Check: 3 Sep 2026.*Date passed/);
   });
 
-  it("wraps the kind chips instead of scrolling them sideways", () => {
+  // Design pass, October 2026: chip rows stay on one line and scroll sideways
+  // with an edge fade (the shared `.work-chips` row), instead of wrapping and
+  // leaving one chip alone on a second line.
+  it("keeps the kind chips on one shared sideways-scrolling row", () => {
     renderPage();
     const chips = screen.getByTestId("admin-renewals-kind");
-    expect(chips.className).toContain("flex-wrap");
-    expect(chips.className).not.toContain("overflow-x-auto");
+    expect(chips.className).toContain("work-chips");
+    expect(chips.className).not.toContain("flex-wrap");
   });
 
   it("marks unconfirmed rules with Rule to confirm in the list", () => {
diff --git a/tests/cme-applications-page.dom.test.tsx b/tests/cme-applications-page.dom.test.tsx
index 2ec5ae5ce9..f45e29fdb3 100644
--- a/tests/cme-applications-page.dom.test.tsx
+++ b/tests/cme-applications-page.dom.test.tsx
@@ -248,9 +248,9 @@ describe("Job applications season", () => {
     expect(localStorage.getItem(CPD_APPLICATIONS_STORAGE_KEY)).toBeNull();
   });
 
-  it("goes back to the CPD summary, where its link lives", () => {
+  it("leaves the way back to the band's Summary tab, with no second link on the page", () => {
     renderPage();
-    expect(screen.getByTestId("cpd-feature-back").getAttribute("href")).toBe("/cme/summary");
+    expect(screen.queryByTestId("cpd-feature-back")).toBeNull();
   });
 
   it("shows the made-up sample in the demo build and keeps nothing", () => {
diff --git a/tests/forms-search-register-listing.dom.test.tsx b/tests/forms-search-register-listing.dom.test.tsx
index ffb46ccc81..4bc28e52e5 100644
--- a/tests/forms-search-register-listing.dom.test.tsx
+++ b/tests/forms-search-register-listing.dom.test.tsx
@@ -70,7 +70,12 @@ describe("forms search with no query", () => {
 
     const table = screen.getByTestId("form-search-results");
     expect(within(table).getByRole("heading", { name: "All forms" })).toBeInTheDocument();
-    expect(within(table).getByText(`${formRecords.length} forms · by form code`)).toBeInTheDocument();
+    // The count is stated once, in the band's status line; the table heading
+    // only says how the list is ordered.
+    expect(within(table).getByText("By form code")).toBeInTheDocument();
+    expect(
+      screen.getAllByRole("status").some((node) => node.textContent?.includes(`${formRecords.length} forms`)),
+    ).toBe(true);
     expect(within(table).getAllByRole("article")).toHaveLength(formRecords.length);
     expect(within(table).queryByText(/content match/i)).not.toBeInTheDocument();
     // Already the whole register: no "View all forms" link pointing back at itself.
@@ -79,7 +84,7 @@ describe("forms search with no query", () => {
 
     const mobile = screen.getByTestId("form-search-mobile-results");
     expect(within(mobile).getByRole("heading", { name: "All forms" })).toBeInTheDocument();
-    expect(within(mobile).getByText(`${formRecords.length} forms`)).toBeInTheDocument();
+    expect(within(mobile).queryByText(`${formRecords.length} forms`)).not.toBeInTheDocument();
     expect(screen.queryByText(/No matches for/)).not.toBeInTheDocument();
   });
 
diff --git a/tests/on-call-first-week-page.dom.test.tsx b/tests/on-call-first-week-page.dom.test.tsx
index 5fc4da4046..a2b68fccd3 100644
--- a/tests/on-call-first-week-page.dom.test.tsx
+++ b/tests/on-call-first-week-page.dom.test.tsx
@@ -146,7 +146,8 @@ describe("Your first week, the pack", () => {
     // "Your first week" is one heading, the visible one, never a hidden copy as well.
     expect(screen.getAllByRole("heading", { name: "Your first week" })).toHaveLength(1);
     expect(screen.getByRole("heading", { level: 1 })).toHaveTextContent("Your first week");
-    expect(screen.getByTestId("on-call-first-week-page-back")).toHaveAttribute("href", "/on-call");
+    // One way back: the band's Now tab is On Call, so the page adds no second link to it.
+    expect(screen.queryByTestId("on-call-first-week-page-back")).toBeNull();
     const strip = screen.getByRole("progressbar", { name: "Sections read" });
     expect(strip).toHaveAttribute("aria-valuetext", "0 of 5 sections read");
     expect(screen.getByTestId("on-call-first-week-row-who")).toHaveAttribute("href", "/on-call/first-week?section=who");
diff --git a/tests/open-shifts-browse-sample.dom.test.tsx b/tests/open-shifts-browse-sample.dom.test.tsx
index 8ab0b224e6..923fd09fe7 100644
--- a/tests/open-shifts-browse-sample.dom.test.tsx
+++ b/tests/open-shifts-browse-sample.dom.test.tsx
@@ -87,10 +87,11 @@ describe("Open shifts, signed-out preview", () => {
     expect(Number(matches()?.[1])).toBeGreaterThan(before);
   });
 
-  it("offers a way back to My Day and says how fresh the example is", () => {
+  it("says how fresh the example is, leaving the way back to the header's Back", () => {
     render(<OpenShiftsBrowsePage />);
     const context = screen.getByTestId("open-shifts-sample-context");
-    expect(within(context).getByRole("link", { name: "Back to My Day" }).getAttribute("href")).toBe("/my-day");
+    // One way back: the header shows Back, so the page adds no second "My Day" link.
+    expect(screen.queryByRole("link", { name: "Back to My Day" })).toBeNull();
     expect(context.textContent).toContain("roster as of Mon 5 Oct");
     expect(context.textContent).not.toMatch(/example/i);
   });
diff --git a/tests/phone-mode-groups.test.ts b/tests/phone-mode-groups.test.ts
index 7364ab409f..807c258409 100644
--- a/tests/phone-mode-groups.test.ts
+++ b/tests/phone-mode-groups.test.ts
@@ -2,6 +2,7 @@ import { describe, expect, it } from "vitest";
 
 import { appModeIds, type AppModeId } from "@/lib/app-modes";
 import {
+  clinicalBandAttribute,
   modeMenuSideForMode,
   modeMenuSides,
   orderByPhoneModeGroups,
@@ -77,3 +78,16 @@ describe("phone mode groups", () => {
     expect(orderModesForSide(someModes, "clinical").map((mode) => mode.id)).toEqual(["answer", "psychiatry", "forms"]);
   });
 });
+
+describe("clinicalBandAttribute", () => {
+  it("tints a Clinical page", () => {
+    expect(clinicalBandAttribute("dictionary", "/dictionary", false)).toBe("");
+  });
+
+  it("leaves the shared home, Work areas and Work modes untinted", () => {
+    expect(clinicalBandAttribute("dictionary", "/", false)).toBeUndefined();
+    expect(clinicalBandAttribute("dictionary", null, false)).toBeUndefined();
+    expect(clinicalBandAttribute("dictionary", "/admin", true)).toBeUndefined();
+    expect(clinicalBandAttribute("roster", "/roster", false)).toBeUndefined();
+  });
+});