From 1c786eaf7138912e8d71e91ec5292fa38919df94 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Fri, 17 Jul 2026 18:12:57 +0000
Subject: [PATCH] Optimise phone touch targets and fix therapy-compass mobile
 overflow

Convergence pass bringing sub-44px interactive controls up to the design
system's --spacing-tap floor on phone, and fixing horizontal-overflow
clipping in Therapy Compass. No visual redesign; desktop is preserved.

Tap targets (phone):
- answer suggestion/follow-up chips: 32px -> 44px with an 8px gap under
  pointer:coarse only (mouse users keep the compact 32px chip)
- ClinicalDashboard: Stop, Show/Hide previous answer, Show earlier messages
- header/shell: guide close button, workflow icon-cluster gap
- services results (bookmark/open/select) + service/form toast dismiss
- differentials-home open links, best-answer + urgent rows, empty-state CTAs
- favourites hub/library filter chips, dropdowns, sort, Continue CTA
- formulation builder + home controls
- DocumentViewer hit prev/next, summary + secondary controls (phone 44,
  desktop 36 via sm:min-h-9), medication + patient-profile buttons

Therapy Compass mobile overflow:
- stack fixed/minmax multi-column grids to one column under 640px so clipped
  clinical content (review columns, contraindications) is reachable
- make the comparison table scroll horizontally instead of clipping columns
- raise nav/tab/segment/chip and remaining controls to the 44px tap floor

Verification: typecheck clean; eslint clean on changed files;
check:type-scale + check:icon-scale pass; unit suite 2681/2682 (the one
failure is a pre-existing Python child-process test unrelated to this diff).
Manual Playwright pass at 390x820 confirms 0 horizontal overflow on every
route, 44px tap targets, and the Therapy Compass fixes; desktop unchanged.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01YKNwAjDBUTv5khn64QKwHW
---
 src/app/globals.css                           | 15 ++++++++++
 src/components/ClinicalDashboard.tsx          |  6 ++--
 src/components/DocumentViewer.tsx             | 24 +++++++--------
 .../clinical-dashboard/dashboard-shell.tsx    |  2 +-
 .../clinical-dashboard/differentials-home.tsx | 30 +++++++++----------
 .../favourites-command-library-page.tsx       | 12 ++++----
 .../clinical-dashboard/favourites-hub.tsx     |  8 ++---
 .../master-search-header.tsx                  |  2 +-
 .../medication-prescribing-workspace.tsx      |  2 +-
 .../patient-profile-panel.tsx                 |  2 +-
 src/components/forms/form-detail-page.tsx     |  2 +-
 .../forms/forms-search-results-page.tsx       |  6 ++--
 .../formulation/formulation-builder-page.tsx  |  8 ++---
 .../formulation/formulation-home-page.tsx     |  2 +-
 .../services/service-detail-page.tsx          |  2 +-
 .../services/services-navigator-page.tsx      |  6 ++--
 src/components/therapy-compass/bindings.tsx   |  8 ++---
 src/components/therapy-compass/controls.ts    |  2 +-
 .../therapy-compass/screens/brief-screen.tsx  |  7 +++--
 .../screens/compare-screen.tsx                |  3 +-
 .../therapy-compass/screens/detail-screen.tsx |  5 +++-
 .../therapy-compass/screens/other-screen.tsx  |  1 +
 .../screens/pathways-screen.tsx               |  1 +
 .../screens/recommend-screen.tsx              |  1 +
 .../therapy-compass/screens/sheets-screen.tsx |  7 +++--
 src/components/therapy-compass/styles.tsx     | 11 +++++++
 .../therapy-compass/therapy-card.tsx          |  4 ++-
 27 files changed, 110 insertions(+), 69 deletions(-)

diff --git a/src/app/globals.css b/src/app/globals.css
index a9fb9afe6..3e7440233 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -1442,6 +1442,21 @@ summary::-webkit-details-marker {
   color: var(--clinical-accent);
 }
 
+/* Touch devices: suggestion/follow-up chips are primary tap targets (the
+   follow-ups sit directly under the composer and each fires a new search).
+   Meet the 44px tap floor and widen the gap so neighbouring chips in the
+   horizontal scroll row don't invite mis-taps. Fine-pointer (mouse) users keep
+   the compact 32px chip — no desktop visual change. */
+@media (pointer: coarse) {
+  .answer-suggestion-chips {
+    gap: 0.5rem;
+  }
+
+  .answer-suggestion-chip {
+    min-height: var(--spacing-tap);
+  }
+}
+
 .answer-suggestion-chip:disabled {
   cursor: not-allowed;
 }
diff --git a/src/components/ClinicalDashboard.tsx b/src/components/ClinicalDashboard.tsx
index 322216daf..a4a636c71 100644
--- a/src/components/ClinicalDashboard.tsx
+++ b/src/components/ClinicalDashboard.tsx
@@ -376,7 +376,7 @@ function PriorAnswerTurnSurface({
           type="button"
           onClick={onToggleCollapsed}
           aria-expanded={!collapsed}
-          className="inline-flex min-h-9 items-center gap-1.5 rounded-md px-1 text-xs font-semibold text-[color:var(--text-muted)] transition hover:text-[color:var(--text-heading)] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[color:var(--focus)]"
+          className="inline-flex min-h-tap items-center gap-1.5 rounded-md px-1 text-xs font-semibold text-[color:var(--text-muted)] transition hover:text-[color:var(--text-heading)] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[color:var(--focus)]"
         >
           <ChevronDown className={cn("h-4 w-4 transition-transform", !collapsed && "rotate-180")} aria-hidden="true" />
           {collapsed ? "Show previous answer" : "Hide previous answer"}
@@ -3718,7 +3718,7 @@ export function ClinicalDashboard({
                         type="button"
                         onClick={stopSearch}
                         data-testid="stop-answer"
-                        className="inline-flex shrink-0 items-center gap-1.5 rounded-full border border-[color:var(--border-strong)] bg-[color:var(--surface-raised)] px-3 py-1 text-xs font-semibold text-[color:var(--text-heading)] shadow-[var(--shadow-inset)] transition hover:bg-[color:var(--surface-subtle)] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[color:var(--focus)]"
+                        className="inline-flex min-h-tap shrink-0 items-center gap-1.5 rounded-full border border-[color:var(--border-strong)] bg-[color:var(--surface-raised)] px-3 py-1 text-xs font-semibold text-[color:var(--text-heading)] shadow-[var(--shadow-inset)] transition hover:bg-[color:var(--surface-subtle)] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[color:var(--focus)]"
                       >
                         <Square aria-hidden="true" className="h-3 w-3 shrink-0 fill-current" />
                         Stop
@@ -3833,7 +3833,7 @@ export function ClinicalDashboard({
                           type="button"
                           data-testid="answer-thread-show-earlier"
                           onClick={() => setShowEarlierTurns(true)}
-                          className="inline-flex min-h-9 items-center gap-1.5 rounded-md border border-[color:var(--border)] bg-[color:var(--surface-subtle)] px-3 text-xs font-semibold text-[color:var(--text-muted)] transition hover:border-[color:var(--border-strong)] hover:text-[color:var(--text-heading)] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[color:var(--focus)]"
+                          className="inline-flex min-h-tap items-center gap-1.5 rounded-md border border-[color:var(--border)] bg-[color:var(--surface-subtle)] px-3 text-xs font-semibold text-[color:var(--text-muted)] transition hover:border-[color:var(--border-strong)] hover:text-[color:var(--text-heading)] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[color:var(--focus)]"
                         >
                           Show earlier messages ({hiddenPriorTurnCount})
                         </button>
diff --git a/src/components/DocumentViewer.tsx b/src/components/DocumentViewer.tsx
index 178f93939..0fa1f7703 100644
--- a/src/components/DocumentViewer.tsx
+++ b/src/components/DocumentViewer.tsx
@@ -372,7 +372,7 @@ function FormattedHighYieldSummary({
         <button
           type="button"
           onClick={() => setExpanded((current) => !current)}
-          className={cn(floatingControl, "min-h-9 px-3 text-xs")}
+          className={cn(floatingControl, "sm:min-h-9 px-3 text-xs")}
           data-testid="toggle-full-summary"
         >
           {expanded ? "Show key points only" : "Show full summary"}
@@ -472,7 +472,7 @@ function DocumentImage({ image }: { image: ImageRow }) {
         <>
           {figcaptionBlock}
           <details className="group mt-3">
-            <summary className="flex min-h-9 cursor-pointer list-none items-center gap-2 text-xs font-semibold text-[color:var(--text-muted)] transition hover:text-[color:var(--text)]">
+            <summary className="flex min-h-tap cursor-pointer list-none items-center gap-2 text-xs font-semibold text-[color:var(--text-muted)] transition hover:text-[color:var(--text)] sm:min-h-9">
               <FileImage aria-hidden="true" className="h-4 w-4 shrink-0" />
               Show original table image
               <ChevronDown aria-hidden="true" className="h-3.5 w-3.5 transition group-open:rotate-180" />
@@ -549,7 +549,7 @@ function TableReviewPanel({
                     disabled={!canReview || busyFactId === fact.id}
                     onClick={() => onReview(fact, value)}
                     className={cn(
-                      "inline-flex min-h-8 items-center rounded-md border px-2 text-2xs font-semibold transition",
+                      "inline-flex min-h-tap items-center rounded-md border px-2 text-2xs font-semibold transition sm:min-h-8",
                       reviewClass === value
                         ? "border-[color:var(--clinical-accent)]/35 bg-[color:var(--clinical-accent-soft)] text-[color:var(--clinical-accent)]"
                         : "border-[color:var(--border)] bg-[color:var(--surface)] text-[color:var(--text-muted)] hover:bg-[color:var(--surface-subtle)]",
@@ -717,7 +717,7 @@ function PinnedSourceEvidence({
             {visibleContent || "No displayable clinical text was available for this indexed passage."}
           </blockquote>
           <div className="mt-3 flex flex-wrap gap-2">
-            <a href="#pdf-preview-section" className={cn(primaryButton, "min-h-9 px-3 text-xs")}>
+            <a href="#pdf-preview-section" className={cn(primaryButton, "sm:min-h-9 px-3 text-xs")}>
               <ExternalLink aria-hidden="true" className="h-4 w-4" />
               Open source
             </a>
@@ -725,7 +725,7 @@ function PinnedSourceEvidence({
               <button
                 type="button"
                 onClick={() => setExpandedChunkId((current) => (current === chunk.id ? null : chunk.id))}
-                className={cn(secondaryButton, "min-h-9 px-3 text-xs")}
+                className={cn(secondaryButton, "sm:min-h-9 px-3 text-xs")}
                 data-testid="toggle-full-passage"
               >
                 {expanded ? "Show passage preview" : "Show full passage"}
@@ -983,11 +983,11 @@ const IndexedTextPanel = memo(function IndexedTextPanel({
                 {pageHitSummary || "No page numbers indexed for these hits"}
               </p>
             </div>
-            <div className="flex shrink-0 gap-1.5">
+            <div className="flex shrink-0 gap-2">
               <button
                 type="button"
                 onClick={() => moveHit(-1)}
-                className={cn(secondaryButton, "min-h-9 min-w-9 justify-center p-0")}
+                className={cn(secondaryButton, "size-tap justify-center p-0")}
                 aria-label="Previous document search hit"
                 title="Previous document search hit"
               >
@@ -996,7 +996,7 @@ const IndexedTextPanel = memo(function IndexedTextPanel({
               <button
                 type="button"
                 onClick={() => moveHit(1)}
-                className={cn(secondaryButton, "min-h-9 min-w-9 justify-center p-0")}
+                className={cn(secondaryButton, "size-tap justify-center p-0")}
                 aria-label="Next document search hit"
                 title="Next document search hit"
               >
@@ -1294,7 +1294,7 @@ function DocumentManualTagEditor({
                         type="button"
                         onClick={() => saveManualTag(label)}
                         disabled={!editingLabel.trim() || busyAction !== null}
-                        className={cn(primaryButton, "min-h-9 px-2 text-xs")}
+                        className={cn(primaryButton, "sm:min-h-9 px-2 text-xs")}
                         aria-label={`Save ${label.label}`}
                       >
                         {busyAction === `edit:${label.id}` ? (
@@ -1307,7 +1307,7 @@ function DocumentManualTagEditor({
                         type="button"
                         onClick={() => setEditingId(null)}
                         disabled={busyAction !== null}
-                        className={cn(secondaryButton, "min-h-9 px-2 text-xs")}
+                        className={cn(secondaryButton, "sm:min-h-9 px-2 text-xs")}
                         aria-label="Cancel edit"
                       >
                         <X aria-hidden="true" className="h-4 w-4" />
@@ -1323,7 +1323,7 @@ function DocumentManualTagEditor({
                           setEditingType(label.label_type);
                         }}
                         disabled={!canManage || busyAction !== null}
-                        className={cn(secondaryButton, "min-h-9 px-2 text-xs")}
+                        className={cn(secondaryButton, "sm:min-h-9 px-2 text-xs")}
                         aria-label={`Rename ${label.label}`}
                       >
                         <Pencil aria-hidden="true" className="h-4 w-4" />
@@ -1332,7 +1332,7 @@ function DocumentManualTagEditor({
                         type="button"
                         onClick={() => deleteManualTag(label)}
                         disabled={!canManage || busyAction !== null}
-                        className={cn(secondaryButton, "min-h-9 px-2 text-xs text-[color:var(--danger)]")}
+                        className={cn(secondaryButton, "sm:min-h-9 px-2 text-xs text-[color:var(--danger)]")}
                         aria-label={`Remove ${label.label}`}
                       >
                         {busyAction === `delete:${label.id}` ? (
diff --git a/src/components/clinical-dashboard/dashboard-shell.tsx b/src/components/clinical-dashboard/dashboard-shell.tsx
index c5d0f3906..0a165d1d2 100644
--- a/src/components/clinical-dashboard/dashboard-shell.tsx
+++ b/src/components/clinical-dashboard/dashboard-shell.tsx
@@ -274,7 +274,7 @@ export function GuideDialog({ open, onClose }: { open: boolean; onClose: () => v
       contentClassName="font-sans sm:max-w-2xl"
       titleClassName="text-lg-minus font-semibold tracking-normal sm:text-lg"
       bodyClassName="p-4 sm:p-5"
-      closeButtonClassName="grid h-10 w-10 shrink-0 place-items-center rounded-full text-[color:var(--text-muted)] transition hover:bg-[color:var(--surface-subtle)] hover:text-[color:var(--text-heading)] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[color:var(--focus)]"
+      closeButtonClassName="grid size-tap shrink-0 place-items-center rounded-full text-[color:var(--text-muted)] transition hover:bg-[color:var(--surface-subtle)] hover:text-[color:var(--text-heading)] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[color:var(--focus)]"
     >
       <div className="grid gap-3 sm:grid-cols-2">
         {guideSections.map((section) => (
diff --git a/src/components/clinical-dashboard/differentials-home.tsx b/src/components/clinical-dashboard/differentials-home.tsx
index 4c7abba05..548b224f5 100644
--- a/src/components/clinical-dashboard/differentials-home.tsx
+++ b/src/components/clinical-dashboard/differentials-home.tsx
@@ -431,7 +431,7 @@ function DesktopResultRow({
         <MatchBadge label={result.matchLabel} />
         <Link
           href={result.href}
-          className="inline-flex min-h-10 items-center gap-1.5 text-sm font-bold text-[color:var(--clinical-accent)]"
+          className="inline-flex min-h-tap items-center gap-1.5 text-sm font-bold text-[color:var(--clinical-accent)]"
         >
           <ExternalLink className="h-4 w-4" aria-hidden />
           Open page
@@ -440,7 +440,7 @@ function DesktopResultRow({
           <button
             type="button"
             onClick={onToggle}
-            className="inline-flex min-h-10 items-center gap-1.5 text-sm font-bold text-[color:var(--clinical-accent)]"
+            className="inline-flex min-h-tap items-center gap-1.5 text-sm font-bold text-[color:var(--clinical-accent)]"
           >
             <GitCompareArrows className="h-4 w-4" aria-hidden />
             {selected ? "Compared" : "Compare"}
@@ -467,14 +467,14 @@ function MobileResultCard({
 
   return (
     <article className="grid gap-2 rounded-lg border border-[color:var(--border)] bg-[color:var(--surface)] p-3 shadow-[var(--shadow-inset)]">
-      <div className="grid grid-cols-[2rem_2.5rem_minmax(0,1fr)_2.75rem] items-start gap-2">
+      <div className="grid grid-cols-[2rem_2.75rem_minmax(0,1fr)_2.75rem] items-start gap-2">
         <span className="grid h-8 w-8 place-items-center rounded-md border border-[color:var(--border)] bg-[color:var(--surface-subtle)] text-sm font-extrabold text-[color:var(--text-muted)]">
           {index + 1}
         </span>
         <Link
           href={result.href}
           aria-label={`Open ${result.title}`}
-          className="grid h-10 w-10 place-items-center rounded-md text-[color:var(--text-muted)]"
+          className="grid size-tap place-items-center rounded-md text-[color:var(--text-muted)]"
         >
           <Icon className="h-6 w-6 stroke-[1.75]" aria-hidden />
         </Link>
@@ -482,7 +482,7 @@ function MobileResultCard({
           <div className="flex min-w-0 flex-wrap items-center gap-1.5">
             <Link
               href={result.href}
-              className="inline-flex min-h-10 min-w-0 items-center text-sm font-extrabold leading-5 text-[color:var(--text-heading)]"
+              className="inline-flex min-h-tap min-w-0 items-center text-sm font-extrabold leading-5 text-[color:var(--text-heading)]"
             >
               <span className="line-clamp-2">{result.title}</span>
             </Link>
@@ -563,7 +563,7 @@ function BestAnswerCard({
               <StatusBadge status={best.status} />
               <Link
                 href={best.href}
-                className="inline-flex min-h-6 items-center gap-1 text-xs font-bold text-[color:var(--clinical-accent)]"
+                className="inline-flex min-h-tap items-center gap-1 text-xs font-bold text-[color:var(--clinical-accent)]"
               >
                 Open page
                 <ExternalLink className="h-3 w-3" aria-hidden />
@@ -600,7 +600,7 @@ function SafetyCard({ safety, query }: { safety: string; query: string }) {
           <p className="mt-2 text-sm font-semibold leading-6 text-[color:var(--text-heading)]">{safety}</p>
           <Link
             href={routeWithQuery("/differentials/presentations", query)}
-            className="mt-2 inline-flex min-h-8 items-center gap-1.5 text-sm font-bold text-[color:var(--clinical-accent)]"
+            className="mt-2 inline-flex min-h-tap items-center gap-1.5 text-sm font-bold text-[color:var(--clinical-accent)]"
           >
             View presentation guide
             <ExternalLink className="h-3.5 w-3.5" aria-hidden />
@@ -646,7 +646,7 @@ function UrgencyCard({ results }: { results: DifferentialResult[] }) {
           <Link
             key={result.id}
             href={result.href}
-            className="grid min-h-10 grid-cols-[5.25rem_minmax(0,1fr)_auto] items-center gap-2 rounded-md border border-[color:var(--border)] px-2 text-sm font-bold text-[color:var(--text-heading)] transition hover:border-[color:var(--clinical-accent-border)] hover:text-[color:var(--clinical-accent)]"
+            className="grid min-h-tap grid-cols-[5.25rem_minmax(0,1fr)_auto] items-center gap-2 rounded-md border border-[color:var(--border)] px-2 text-sm font-bold text-[color:var(--text-heading)] transition hover:border-[color:var(--clinical-accent-border)] hover:text-[color:var(--clinical-accent)]"
           >
             <StatusBadge status={result.status} />
             <span className="truncate">{result.title}</span>
@@ -718,7 +718,7 @@ function SourceStatusCard({
           type="button"
           onClick={onRunSourceSearch}
           disabled={loading}
-          className="mt-3 inline-flex min-h-10 w-full items-center justify-center gap-2 rounded-lg border border-[color:var(--clinical-accent-border)] bg-[color:var(--clinical-accent-soft)] px-3 text-sm font-extrabold text-[color:var(--clinical-accent)] transition hover:border-[color:var(--clinical-accent)] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[color:var(--focus)] disabled:cursor-wait disabled:opacity-60"
+          className="mt-3 inline-flex min-h-tap w-full items-center justify-center gap-2 rounded-lg border border-[color:var(--clinical-accent-border)] bg-[color:var(--clinical-accent-soft)] px-3 text-sm font-extrabold text-[color:var(--clinical-accent)] transition hover:border-[color:var(--clinical-accent)] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[color:var(--focus)] disabled:cursor-wait disabled:opacity-60"
         >
           <Search className="h-4 w-4" aria-hidden />
           {loading ? "Searching sources" : "Run source search"}
@@ -931,14 +931,14 @@ function SearchResultsView({
           <div className="flex flex-wrap gap-2">
             <Link
               href={routeWithQuery("/differentials/presentations", query)}
-              className="inline-flex min-h-10 items-center gap-1.5 rounded-lg border border-[color:var(--clinical-accent-border)] bg-[color:var(--clinical-accent-soft)] px-3 text-sm font-extrabold text-[color:var(--clinical-accent)]"
+              className="inline-flex min-h-tap items-center gap-1.5 rounded-lg border border-[color:var(--clinical-accent-border)] bg-[color:var(--clinical-accent-soft)] px-3 text-sm font-extrabold text-[color:var(--clinical-accent)]"
             >
               Browse presentations
               <ChevronRight className="h-4 w-4" aria-hidden />
             </Link>
             <Link
               href={routeWithQuery("/differentials/diagnoses", query)}
-              className="inline-flex min-h-10 items-center gap-1.5 rounded-lg border border-[color:var(--clinical-accent-border)] bg-[color:var(--clinical-accent-soft)] px-3 text-sm font-extrabold text-[color:var(--clinical-accent)]"
+              className="inline-flex min-h-tap items-center gap-1.5 rounded-lg border border-[color:var(--clinical-accent-border)] bg-[color:var(--clinical-accent-soft)] px-3 text-sm font-extrabold text-[color:var(--clinical-accent)]"
             >
               Browse diagnoses
               <ChevronRight className="h-4 w-4" aria-hidden />
@@ -947,7 +947,7 @@ function SearchResultsView({
               type="button"
               onClick={rerunSearch}
               disabled={loading}
-              className="inline-flex min-h-10 items-center gap-1.5 rounded-lg border border-[color:var(--border)] bg-[color:var(--surface)] px-3 text-sm font-bold text-[color:var(--text-heading)] disabled:cursor-wait disabled:opacity-60"
+              className="inline-flex min-h-tap items-center gap-1.5 rounded-lg border border-[color:var(--border)] bg-[color:var(--surface)] px-3 text-sm font-bold text-[color:var(--text-heading)] disabled:cursor-wait disabled:opacity-60"
             >
               <Search className="h-4 w-4" aria-hidden />
               {loading ? "Searching sources" : "Run source search"}
@@ -982,7 +982,7 @@ function SearchResultsView({
                     type="button"
                     onClick={rerunSearch}
                     disabled={loading}
-                    className="inline-flex min-h-10 items-center gap-2 rounded-lg border border-[color:var(--clinical-accent-border)] bg-[color:var(--surface)] px-3 text-sm font-bold text-[color:var(--clinical-accent)] shadow-[var(--shadow-inset)] transition hover:border-[color:var(--clinical-accent)] disabled:cursor-wait disabled:opacity-60"
+                    className="inline-flex min-h-tap items-center gap-2 rounded-lg border border-[color:var(--clinical-accent-border)] bg-[color:var(--surface)] px-3 text-sm font-bold text-[color:var(--clinical-accent)] shadow-[var(--shadow-inset)] transition hover:border-[color:var(--clinical-accent)] disabled:cursor-wait disabled:opacity-60"
                   >
                     <Search className="h-4 w-4" aria-hidden />
                     {loading ? "Searching sources" : "Run source search"}
@@ -1044,7 +1044,7 @@ function SearchResultsView({
                     type="button"
                     onClick={rerunSearch}
                     disabled={loading}
-                    className="inline-flex min-h-10 shrink-0 items-center gap-1.5 rounded-lg border border-[color:var(--clinical-accent-border)] bg-[color:var(--surface)] px-2.5 text-xs font-extrabold text-[color:var(--clinical-accent)] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[color:var(--focus)] disabled:cursor-wait disabled:opacity-60"
+                    className="inline-flex min-h-tap shrink-0 items-center gap-1.5 rounded-lg border border-[color:var(--clinical-accent-border)] bg-[color:var(--surface)] px-2.5 text-xs font-extrabold text-[color:var(--clinical-accent)] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[color:var(--focus)] disabled:cursor-wait disabled:opacity-60"
                   >
                     <Search className="h-3.5 w-3.5" aria-hidden />
                     {loading ? "Searching…" : "Run source search"}
@@ -1253,7 +1253,7 @@ export function DifferentialsHome({
           <button
             type="button"
             onClick={() => router.push("/differentials/presentations?q=recent+differential+review")}
-            className="inline-flex min-h-10 items-center gap-1.5 rounded-full px-2 text-xs font-bold text-[color:var(--clinical-accent)] transition hover:bg-[color:var(--clinical-accent-soft)] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[color:var(--focus)] sm:px-3 sm:text-sm"
+            className="inline-flex min-h-tap items-center gap-1.5 rounded-full px-2 text-xs font-bold text-[color:var(--clinical-accent)] transition hover:bg-[color:var(--clinical-accent-soft)] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[color:var(--focus)] sm:px-3 sm:text-sm"
           >
             View all
             <ChevronRight className="h-4 w-4" aria-hidden />
diff --git a/src/components/clinical-dashboard/favourites-command-library-page.tsx b/src/components/clinical-dashboard/favourites-command-library-page.tsx
index 1499d88f9..356a064d6 100644
--- a/src/components/clinical-dashboard/favourites-command-library-page.tsx
+++ b/src/components/clinical-dashboard/favourites-command-library-page.tsx
@@ -304,7 +304,7 @@ function ActiveFilterChips({
           type="button"
           onClick={chip.onClear}
           className={cn(
-            "inline-flex h-8 max-w-full items-center gap-1.5 rounded-full border border-[color:var(--clinical-accent-border)] bg-[color:var(--clinical-accent-soft)] px-3 text-2xs font-semibold text-[color:var(--clinical-accent)] hover:bg-[color:var(--clinical-accent-soft)]/80",
+            "inline-flex min-h-tap max-w-full items-center gap-1.5 rounded-full border border-[color:var(--clinical-accent-border)] bg-[color:var(--clinical-accent-soft)] px-3 text-2xs font-semibold text-[color:var(--clinical-accent)] hover:bg-[color:var(--clinical-accent-soft)]/80",
             focusRing,
           )}
         >
@@ -350,7 +350,7 @@ function ContinueStrip({ item, onSelect }: { item: FavouriteItem; onSelect: (id:
           <Link
             href={item.href}
             className={cn(
-              "inline-flex h-9 w-full shrink-0 items-center justify-center gap-2 rounded-lg bg-[color:var(--command)] px-4 text-sm font-bold text-[color:var(--command-contrast)] shadow-[var(--shadow-tight)] transition hover:bg-[color:var(--command-hover)] sm:w-auto",
+              "inline-flex min-h-tap w-full shrink-0 items-center justify-center gap-2 rounded-lg bg-[color:var(--command)] px-4 text-sm font-bold text-[color:var(--command-contrast)] shadow-[var(--shadow-tight)] transition hover:bg-[color:var(--command-hover)] sm:min-h-9 sm:w-auto",
               focusRing,
             )}
           >
@@ -408,7 +408,7 @@ function RowActionsMenu({ item }: { item: FavouriteItem }) {
             href={item.href}
             role="menuitem"
             className={cn(
-              "flex w-full items-center gap-2 px-3 py-2 text-left text-sm font-bold text-[color:var(--text)] hover:bg-[color:var(--surface-subtle)]",
+              "flex min-h-tap w-full items-center gap-2 px-3 py-2 text-left text-sm font-bold text-[color:var(--text)] hover:bg-[color:var(--surface-subtle)]",
               focusRing,
             )}
             onClick={() => setOpen(false)}
@@ -420,7 +420,7 @@ function RowActionsMenu({ item }: { item: FavouriteItem }) {
             type="button"
             role="menuitem"
             className={cn(
-              "flex w-full items-center gap-2 px-3 py-2 text-left text-sm font-bold text-[color:var(--text)] hover:bg-[color:var(--surface-subtle)]",
+              "flex min-h-tap w-full items-center gap-2 px-3 py-2 text-left text-sm font-bold text-[color:var(--text)] hover:bg-[color:var(--surface-subtle)]",
               focusRing,
             )}
             onClick={() => setOpen(false)}
@@ -433,7 +433,7 @@ function RowActionsMenu({ item }: { item: FavouriteItem }) {
             role="menuitem"
             disabled
             title="Coming soon"
-            className="flex w-full cursor-not-allowed items-center gap-2 px-3 py-2 text-left text-sm font-bold text-[color:var(--text-soft)]"
+            className="flex min-h-tap w-full cursor-not-allowed items-center gap-2 px-3 py-2 text-left text-sm font-bold text-[color:var(--text-soft)]"
           >
             <Folder className="h-4 w-4" aria-hidden />
             Move to set
@@ -568,7 +568,7 @@ function FavouritesTable({
               disabled={viewMode === "recent"}
               title={viewMode === "recent" ? "Recently used view is always sorted by last used" : undefined}
               onChange={(event) => onSortModeChange(event.target.value as SortMode)}
-              className="h-9 w-full appearance-none rounded-lg border border-[color:var(--border)] bg-[color:var(--surface)] px-3 pr-9 text-xs font-bold text-[color:var(--text-muted)] outline-none hover:bg-[color:var(--surface-subtle)] focus:border-[color:var(--focus)] focus:ring-4 focus:ring-[color:var(--focus)]/20 disabled:cursor-not-allowed disabled:opacity-60"
+              className="min-h-tap w-full appearance-none rounded-lg border border-[color:var(--border)] bg-[color:var(--surface)] px-3 pr-9 text-xs font-bold text-[color:var(--text-muted)] outline-none hover:bg-[color:var(--surface-subtle)] focus:border-[color:var(--focus)] focus:ring-4 focus:ring-[color:var(--focus)]/20 disabled:cursor-not-allowed disabled:opacity-60 sm:min-h-9"
             >
               <option value="last-used">Sort: Last used</option>
               <option value="title">Sort: Title</option>
diff --git a/src/components/clinical-dashboard/favourites-hub.tsx b/src/components/clinical-dashboard/favourites-hub.tsx
index 09966bedb..8b34efc70 100644
--- a/src/components/clinical-dashboard/favourites-hub.tsx
+++ b/src/components/clinical-dashboard/favourites-hub.tsx
@@ -236,7 +236,7 @@ export function FavouritesHub({
                 id="favourites-type-listbox"
                 role="listbox"
                 aria-label="Favourite type"
-                className="absolute left-0 top-[calc(100%+0.5rem)] z-40 grid w-[min(18rem,calc(100vw-1.5rem))] gap-1 overflow-hidden rounded-xl border border-[color:var(--border-lux)] bg-[color:var(--surface-lux)] p-1.5 shadow-[var(--shadow-lux)] ring-1 ring-white/30 backdrop-blur-md dark:ring-white/10"
+                className="absolute left-0 top-[calc(100%+0.5rem)] z-40 grid w-[min(18rem,calc(100vw-1.5rem))] gap-2 overflow-hidden rounded-xl border border-[color:var(--border-lux)] bg-[color:var(--surface-lux)] p-1.5 shadow-[var(--shadow-lux)] ring-1 ring-white/30 backdrop-blur-md dark:ring-white/10"
               >
                 {favouriteTabs.map((tab, index) => {
                   const Icon = tab.icon;
@@ -259,7 +259,7 @@ export function FavouritesHub({
                         window.requestAnimationFrame(() => tabButtonRef.current?.focus());
                       }}
                       className={cn(
-                        "grid min-h-10 grid-cols-[1.75rem_minmax(0,1fr)_auto] items-center gap-2 rounded-lg px-2.5 text-left text-sm transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[color:var(--focus)]",
+                        "grid min-h-tap grid-cols-[1.75rem_minmax(0,1fr)_auto] items-center gap-2 rounded-lg px-2.5 text-left text-sm transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[color:var(--focus)]",
                         selected
                           ? "bg-[color:var(--clinical-accent-soft)] text-[color:var(--clinical-accent)] shadow-[var(--shadow-inset)]"
                           : "text-[color:var(--text-muted)] hover:bg-[color:var(--surface-subtle)] hover:text-[color:var(--text)]",
@@ -294,7 +294,7 @@ export function FavouritesHub({
             <button
               type="button"
               onClick={onClearQuery}
-              className="inline-flex min-h-7 max-w-full items-center gap-1.5 rounded-md border border-[color:var(--border)] bg-[color:var(--surface)] px-2 hover:bg-[color:var(--surface-subtle)]"
+              className="inline-flex min-h-tap max-w-full items-center gap-1.5 rounded-md border border-[color:var(--border)] bg-[color:var(--surface)] px-2 hover:bg-[color:var(--surface-subtle)]"
             >
               <span className="truncate">Filter: {normalizedQuery}</span>
               <X aria-hidden="true" className="h-3.5 w-3.5" />
@@ -304,7 +304,7 @@ export function FavouritesHub({
             <button
               type="button"
               onClick={() => setSelectedSetId(null)}
-              className="inline-flex min-h-7 max-w-full items-center gap-1.5 rounded-md border border-[color:var(--clinical-accent)]/20 bg-[color:var(--clinical-accent-soft)] px-2 font-bold text-[color:var(--clinical-accent)] hover:border-[color:var(--clinical-accent)]/35"
+              className="inline-flex min-h-tap max-w-full items-center gap-1.5 rounded-md border border-[color:var(--clinical-accent)]/20 bg-[color:var(--clinical-accent-soft)] px-2 font-bold text-[color:var(--clinical-accent)] hover:border-[color:var(--clinical-accent)]/35"
             >
               <span className="truncate">Set: {selectedSet.title}</span>
               <X aria-hidden="true" className="h-3.5 w-3.5" />
diff --git a/src/components/clinical-dashboard/master-search-header.tsx b/src/components/clinical-dashboard/master-search-header.tsx
index 04ef4a475..924265c41 100644
--- a/src/components/clinical-dashboard/master-search-header.tsx
+++ b/src/components/clinical-dashboard/master-search-header.tsx
@@ -1676,7 +1676,7 @@ export function MasterSearchHeader({
             ) : null}
           </div>
 
-          <div className="relative flex min-w-0 shrink-0 items-center justify-end gap-1.5 justify-self-end sm:gap-2">
+          <div className="relative flex min-w-0 shrink-0 items-center justify-end gap-2 justify-self-end">
             {isWorkflowHeader ? (
               <>
                 <button
diff --git a/src/components/clinical-dashboard/medication-prescribing-workspace.tsx b/src/components/clinical-dashboard/medication-prescribing-workspace.tsx
index 76b687e4c..873764d45 100644
--- a/src/components/clinical-dashboard/medication-prescribing-workspace.tsx
+++ b/src/components/clinical-dashboard/medication-prescribing-workspace.tsx
@@ -509,7 +509,7 @@ function MedicationResults({
             <button
               type="button"
               onClick={() => setActiveFilter("best")}
-              className="inline-flex min-h-8 items-center gap-1.5 rounded-lg border border-[color:var(--clinical-accent)] bg-[color:var(--clinical-accent-soft)] px-3 text-xs font-semibold text-[color:var(--clinical-accent)] transition hover:bg-[color:var(--clinical-accent-soft)]/70 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[color:var(--focus)]"
+              className="inline-flex min-h-tap items-center gap-1.5 rounded-lg border border-[color:var(--clinical-accent)] bg-[color:var(--clinical-accent-soft)] px-3 text-xs font-semibold text-[color:var(--clinical-accent)] transition hover:bg-[color:var(--clinical-accent-soft)]/70 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[color:var(--focus)]"
             >
               Show all {totalAvailable} matches
             </button>
diff --git a/src/components/clinical-dashboard/patient-profile-panel.tsx b/src/components/clinical-dashboard/patient-profile-panel.tsx
index 1e2e01cce..dcad3a6cd 100644
--- a/src/components/clinical-dashboard/patient-profile-panel.tsx
+++ b/src/components/clinical-dashboard/patient-profile-panel.tsx
@@ -238,7 +238,7 @@ export function PatientProfilePanel({
             type="button"
             onClick={clear}
             disabled={isEmpty}
-            className="ml-auto inline-flex min-h-8 items-center gap-1.5 rounded-lg border border-[color:var(--border)] px-2.5 text-2xs font-semibold text-[color:var(--text-muted)] transition hover:border-[color:var(--border-strong)] hover:text-[color:var(--text-heading)] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[color:var(--focus)] disabled:cursor-not-allowed disabled:opacity-50"
+            className="ml-auto inline-flex min-h-tap items-center gap-1.5 rounded-lg border border-[color:var(--border)] px-2.5 text-2xs font-semibold text-[color:var(--text-muted)] transition hover:border-[color:var(--border-strong)] hover:text-[color:var(--text-heading)] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[color:var(--focus)] disabled:cursor-not-allowed disabled:opacity-50"
           >
             <Eraser className="h-3.5 w-3.5" aria-hidden="true" />
             Clear
diff --git a/src/components/forms/form-detail-page.tsx b/src/components/forms/form-detail-page.tsx
index ae022e777..00354cb1c 100644
--- a/src/components/forms/form-detail-page.tsx
+++ b/src/components/forms/form-detail-page.tsx
@@ -532,7 +532,7 @@ export function FormDetailPage({ form }: { form: FormRecord }) {
               type="button"
               onClick={() => setNotice(null)}
               aria-label="Dismiss form notification"
-              className="grid h-8 w-8 place-items-center rounded-md transition hover:bg-[color:var(--surface)]/70 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[color:var(--focus)]"
+              className="grid size-tap place-items-center rounded-md transition hover:bg-[color:var(--surface)]/70 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[color:var(--focus)]"
             >
               <X className="h-4 w-4" aria-hidden />
             </button>
diff --git a/src/components/forms/forms-search-results-page.tsx b/src/components/forms/forms-search-results-page.tsx
index 9a32ccf65..ec08ffcfd 100644
--- a/src/components/forms/forms-search-results-page.tsx
+++ b/src/components/forms/forms-search-results-page.tsx
@@ -174,7 +174,7 @@ function RefineBar({ open, onToggle, panelId }: { open: boolean; onToggle: () =>
       aria-controls={panelId}
       onClick={onToggle}
       className={cn(
-        "inline-flex h-10 shrink-0 items-center gap-2 rounded-lg border px-3.5 text-sm font-extrabold transition",
+        "inline-flex min-h-tap shrink-0 items-center gap-2 rounded-lg border px-3.5 text-sm font-extrabold transition",
         searchFocusRing,
         open
           ? "border-[color:var(--clinical-accent-border)] bg-[color:var(--clinical-accent-soft)] text-[color:var(--clinical-accent)]"
@@ -500,7 +500,7 @@ function MobileCards({ matches, query }: { matches: FormSearchMatch[]; query: st
       <Link
         href="/forms"
         className={cn(
-          "mx-auto mt-2 flex min-h-9 w-fit items-center gap-2 rounded-md px-2 text-sm font-extrabold text-[color:var(--clinical-accent)] transition hover:bg-[color:var(--clinical-accent-soft)]",
+          "mx-auto mt-2 flex min-h-tap w-fit items-center gap-2 rounded-md px-2 text-sm font-extrabold text-[color:var(--clinical-accent)] transition hover:bg-[color:var(--clinical-accent-soft)]",
           searchFocusRing,
         )}
       >
@@ -604,7 +604,7 @@ function RegistryStatusNotice({ status }: { status: RegistryRequestStatus }) {
       {notice.action ? (
         <Link
           href={notice.action.href}
-          className="inline-flex min-h-8 items-center justify-center rounded-md bg-[color:var(--command)] px-3 text-xs font-bold text-[color:var(--command-contrast)] hover:bg-[color:var(--command-hover)]"
+          className="inline-flex min-h-tap items-center justify-center rounded-md bg-[color:var(--command)] px-3 text-xs font-bold text-[color:var(--command-contrast)] hover:bg-[color:var(--command-hover)]"
         >
           {notice.action.label}
         </Link>
diff --git a/src/components/formulation/formulation-builder-page.tsx b/src/components/formulation/formulation-builder-page.tsx
index 674c8b90e..f5bae5b0f 100644
--- a/src/components/formulation/formulation-builder-page.tsx
+++ b/src/components/formulation/formulation-builder-page.tsx
@@ -328,7 +328,7 @@ export function FormulationBuilderPage({
                           type="button"
                           onClick={() => toggleMechanism(mechanism.id)}
                           aria-label={`Remove ${mechanism.name}`}
-                          className="inline-flex min-h-9 items-center gap-2 rounded-lg border border-[color:var(--clinical-accent-border)] bg-[color:var(--surface)] px-3 text-xs font-bold text-[color:var(--text-heading)]"
+                          className="inline-flex min-h-tap items-center gap-2 rounded-lg border border-[color:var(--clinical-accent-border)] bg-[color:var(--surface)] px-3 text-xs font-bold text-[color:var(--text-heading)]"
                         >
                           <Check className="h-3.5 w-3.5 text-[color:var(--clinical-accent)]" aria-hidden />
                           {mechanism.name}
@@ -516,7 +516,7 @@ export function FormulationBuilderPage({
                             <button
                               type="button"
                               onClick={() => applySuggestions(section.id)}
-                              className="inline-flex min-h-9 items-center gap-1.5 rounded-md border border-[color:var(--clinical-accent-border)] bg-[color:var(--clinical-accent-soft)] px-2.5 text-xs font-bold text-[color:var(--clinical-accent)]"
+                              className="inline-flex min-h-tap items-center gap-1.5 rounded-md border border-[color:var(--clinical-accent-border)] bg-[color:var(--clinical-accent-soft)] px-2.5 text-xs font-bold text-[color:var(--clinical-accent)]"
                             >
                               <Sparkles className="h-3.5 w-3.5" aria-hidden />
                               Use suggestions
@@ -634,7 +634,7 @@ export function FormulationBuilderPage({
                     <button
                       type="button"
                       onClick={() => setEditedDraft(generatedDraft)}
-                      className="inline-flex min-h-9 items-center gap-1.5 rounded-md border border-[color:var(--border-strong)] bg-[color:var(--surface)] px-3 text-xs font-bold text-[color:var(--text-muted)]"
+                      className="inline-flex min-h-tap items-center gap-1.5 rounded-md border border-[color:var(--border-strong)] bg-[color:var(--surface)] px-3 text-xs font-bold text-[color:var(--text-muted)]"
                     >
                       <RotateCcw className="h-3.5 w-3.5" aria-hidden />
                       Regenerate
@@ -642,7 +642,7 @@ export function FormulationBuilderPage({
                     <button
                       type="button"
                       onClick={copyDraft}
-                      className="inline-flex min-h-9 items-center gap-1.5 rounded-md bg-[color:var(--command)] px-3 text-xs font-bold text-[color:var(--command-contrast)]"
+                      className="inline-flex min-h-tap items-center gap-1.5 rounded-md bg-[color:var(--command)] px-3 text-xs font-bold text-[color:var(--command-contrast)]"
                     >
                       <Clipboard className="h-3.5 w-3.5" aria-hidden />
                       {copied ? "Copied" : "Copy draft"}
diff --git a/src/components/formulation/formulation-home-page.tsx b/src/components/formulation/formulation-home-page.tsx
index 9c41a5cdd..a64b0e3fb 100644
--- a/src/components/formulation/formulation-home-page.tsx
+++ b/src/components/formulation/formulation-home-page.tsx
@@ -213,7 +213,7 @@ function FormulationResults({ query }: { query: string }) {
             <Link
               key={preset.label}
               href={presetHref(preset.query)}
-              className="inline-flex min-h-9 shrink-0 items-center rounded-md border border-[color:var(--border)] bg-[color:var(--surface)] px-3 text-xs font-semibold text-[color:var(--text-muted)] hover:border-[color:var(--clinical-accent-border)] hover:text-[color:var(--clinical-accent)]"
+              className="inline-flex min-h-tap shrink-0 items-center rounded-md border border-[color:var(--border)] bg-[color:var(--surface)] px-3 text-xs font-semibold text-[color:var(--text-muted)] hover:border-[color:var(--clinical-accent-border)] hover:text-[color:var(--clinical-accent)] lg:min-h-9"
             >
               {preset.label}
             </Link>
diff --git a/src/components/services/service-detail-page.tsx b/src/components/services/service-detail-page.tsx
index ccf02b9d9..cebf21d25 100644
--- a/src/components/services/service-detail-page.tsx
+++ b/src/components/services/service-detail-page.tsx
@@ -526,7 +526,7 @@ export function ServiceDetailPage({ service }: { service: ServiceRecord }) {
               type="button"
               onClick={() => setNotice(null)}
               aria-label="Dismiss service notification"
-              className="grid h-8 w-8 place-items-center rounded-md transition hover:bg-[color:var(--surface)]/70 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[color:var(--focus)]"
+              className="grid size-tap place-items-center rounded-md transition hover:bg-[color:var(--surface)]/70 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[color:var(--focus)]"
             >
               <X className="h-4 w-4" aria-hidden />
             </button>
diff --git a/src/components/services/services-navigator-page.tsx b/src/components/services/services-navigator-page.tsx
index 87b090573..26a3b617b 100644
--- a/src/components/services/services-navigator-page.tsx
+++ b/src/components/services/services-navigator-page.tsx
@@ -220,7 +220,7 @@ function ServiceCard({
         <button
           type="button"
           onClick={() => onToggleSelected(service.slug)}
-          className="grid h-9 w-9 place-items-center rounded-lg text-[color:var(--text)] hover:bg-[color:var(--surface-subtle)] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[color:var(--focus)]"
+          className="grid size-tap place-items-center rounded-lg text-[color:var(--text)] hover:bg-[color:var(--surface-subtle)] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[color:var(--focus)]"
           aria-label={selected ? `Remove ${service.title} from selected services` : `Save ${service.title}`}
         >
           <Bookmark
@@ -280,7 +280,7 @@ function ServiceCard({
           <Link
             href={`/services/${service.slug}`}
             aria-label={`Open ${service.title}`}
-            className="inline-flex h-9 items-center gap-1.5 rounded-lg border border-[color:var(--border)] bg-[color:var(--surface)] px-3 text-xs font-bold text-[color:var(--text)] hover:bg-[color:var(--surface-subtle)] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[color:var(--focus)]"
+            className="inline-flex min-h-tap items-center gap-1.5 rounded-lg border border-[color:var(--border)] bg-[color:var(--surface)] px-3 text-xs font-bold text-[color:var(--text)] hover:bg-[color:var(--surface-subtle)] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[color:var(--focus)]"
           >
             <ExternalLink className="h-3.5 w-3.5" aria-hidden />
             Open
@@ -288,7 +288,7 @@ function ServiceCard({
           <button
             type="button"
             onClick={() => onToggleSelected(service.slug)}
-            className="inline-flex h-9 min-w-[94px] items-center justify-center gap-1.5 rounded-lg bg-[color:var(--clinical-accent)] px-3 text-xs font-bold text-[color:var(--clinical-accent-contrast)] shadow-[var(--shadow-tight)] hover:bg-[color:var(--clinical-accent-hover)] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[color:var(--focus)]"
+            className="inline-flex min-h-tap min-w-[94px] items-center justify-center gap-1.5 rounded-lg bg-[color:var(--clinical-accent)] px-3 text-xs font-bold text-[color:var(--clinical-accent-contrast)] shadow-[var(--shadow-tight)] hover:bg-[color:var(--clinical-accent-hover)] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[color:var(--focus)]"
           >
             <Check className="h-4 w-4" aria-hidden />
             {selected ? "Selected" : "Select"}
diff --git a/src/components/therapy-compass/bindings.tsx b/src/components/therapy-compass/bindings.tsx
index 6e5945321..7cf2d999e 100644
--- a/src/components/therapy-compass/bindings.tsx
+++ b/src/components/therapy-compass/bindings.tsx
@@ -161,7 +161,7 @@ const TcContext = createContext<TcBindings | null>(null);
 
 function navStyle(active: boolean): CSSProperties {
   const base =
-    "display:inline-flex;align-items:center;gap:8px;flex:none;padding:8px 13px;border:1px solid transparent;border-radius:10px;background:transparent;font-family:inherit;font-size:13.5px;white-space:nowrap;cursor:pointer;text-decoration:none;transition:background .12s ease,color .12s ease,border-color .12s ease;";
+    "display:inline-flex;align-items:center;gap:8px;flex:none;min-height:44px;box-sizing:border-box;padding:8px 13px;border:1px solid transparent;border-radius:10px;background:transparent;font-family:inherit;font-size:13.5px;white-space:nowrap;cursor:pointer;text-decoration:none;transition:background .12s ease,color .12s ease,border-color .12s ease;";
   return s(
     active
       ? base +
@@ -171,7 +171,7 @@ function navStyle(active: boolean): CSSProperties {
 }
 function tabStyle(active: boolean): CSSProperties {
   const base =
-    "padding:10px 4px;border:none;background:transparent;font-size:14px;cursor:pointer;font-family:inherit;transition:color .12s ease;";
+    "display:inline-flex;align-items:center;justify-content:center;min-height:44px;box-sizing:border-box;padding:10px 4px;border:none;background:transparent;font-size:14px;cursor:pointer;font-family:inherit;transition:color .12s ease;";
   return s(
     active
       ? base + "color:var(--clinical-accent-hover);font-weight:650;border-bottom:2px solid var(--clinical-accent);"
@@ -180,7 +180,7 @@ function tabStyle(active: boolean): CSSProperties {
 }
 function segStyle(active: boolean): CSSProperties {
   const base =
-    "padding:7px 16px;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;border:none;font-family:inherit;transition:all .12s ease;";
+    "display:inline-flex;align-items:center;justify-content:center;min-height:44px;box-sizing:border-box;padding:7px 16px;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;border:none;font-family:inherit;transition:all .12s ease;";
   return s(
     active
       ? base + "background:var(--surface);color:var(--clinical-accent-hover);box-shadow:var(--shadow-tight);"
@@ -189,7 +189,7 @@ function segStyle(active: boolean): CSSProperties {
 }
 function chipStyle(on: boolean): CSSProperties {
   const base =
-    "padding:8px 14px;border-radius:10px;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;transition:all .12s ease;";
+    "display:inline-flex;align-items:center;justify-content:center;min-height:44px;box-sizing:border-box;padding:8px 14px;border-radius:10px;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;transition:all .12s ease;";
   return s(
     on
       ? base +
diff --git a/src/components/therapy-compass/controls.ts b/src/components/therapy-compass/controls.ts
index 8241e2ed0..1a8039eca 100644
--- a/src/components/therapy-compass/controls.ts
+++ b/src/components/therapy-compass/controls.ts
@@ -12,7 +12,7 @@ export const outlineControl =
   "display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 16px;border:1px solid var(--border-strong);border-radius:11px;background:var(--surface);color:var(--text);font-size:13.5px;font-weight:600;cursor:pointer;font-family:inherit;";
 
 export const softControl =
-  "display:inline-flex;align-items:center;justify-content:center;gap:8px;height:42px;padding:0 16px;border:1px solid var(--border);border-radius:11px;background:var(--surface);color:var(--text-muted);font-size:13.5px;font-weight:500;cursor:pointer;font-family:inherit;transition:background .12s ease,border-color .12s ease,color .12s ease;";
+  "display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 16px;border:1px solid var(--border);border-radius:11px;background:var(--surface);color:var(--text-muted);font-size:13.5px;font-weight:500;cursor:pointer;font-family:inherit;transition:background .12s ease,border-color .12s ease,color .12s ease;";
 
 export const iconControl =
   "display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border:1px solid var(--border);border-radius:9px;background:var(--surface);color:var(--text-soft);cursor:pointer;font-family:inherit;";
diff --git a/src/components/therapy-compass/screens/brief-screen.tsx b/src/components/therapy-compass/screens/brief-screen.tsx
index 738a500a1..2e08fbba5 100644
--- a/src/components/therapy-compass/screens/brief-screen.tsx
+++ b/src/components/therapy-compass/screens/brief-screen.tsx
@@ -100,7 +100,10 @@ export function BriefScreen() {
         </button>
       </div>
 
-      <div style={s(`display:grid;grid-template-columns:300px minmax(0,1fr);gap:16px;align-items:start;`)}>
+      <div
+        className="tc-stack-sm"
+        style={s(`display:grid;grid-template-columns:300px minmax(0,1fr);gap:16px;align-items:start;`)}
+      >
         {/* records list */}
         <div
           style={s(
@@ -196,7 +199,7 @@ export function BriefScreen() {
                 type="button"
                 className="tc-btn"
                 onClick={() => b.open(t.slug)}
-                style={s(outlineControl + "height:36px;padding:0 13px;font-size:12.5px;")}
+                style={s(outlineControl + "height:44px;padding:0 13px;font-size:12.5px;")}
               >
                 Open full record
                 <ExternalLinkIcon size={14} strokeWidth={1.7} />
diff --git a/src/components/therapy-compass/screens/compare-screen.tsx b/src/components/therapy-compass/screens/compare-screen.tsx
index 500348cfb..bd7a12f85 100644
--- a/src/components/therapy-compass/screens/compare-screen.tsx
+++ b/src/components/therapy-compass/screens/compare-screen.tsx
@@ -167,7 +167,7 @@ export function CompareScreen() {
               onClick={() => b.removeCompare(t.slug)}
               title={`Remove ${t.name}`}
               style={s(
-                `display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border:none;background:transparent;color:var(--text-soft);cursor:pointer;border-radius:7px;`,
+                `display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:none;background:transparent;color:var(--text-soft);cursor:pointer;border-radius:7px;`,
               )}
             >
               <XIcon size={15} strokeWidth={1.9} />
@@ -222,6 +222,7 @@ export function CompareScreen() {
 
           {/* table */}
           <div
+            className="tc-scroll-sm"
             style={s(
               `background:var(--surface);border:1px solid var(--border);border-top:none;border-radius:0 0 16px 16px;box-shadow:var(--shadow-soft);overflow:hidden;`,
             )}
diff --git a/src/components/therapy-compass/screens/detail-screen.tsx b/src/components/therapy-compass/screens/detail-screen.tsx
index 96f4fc93a..8cbb5afa6 100644
--- a/src/components/therapy-compass/screens/detail-screen.tsx
+++ b/src/components/therapy-compass/screens/detail-screen.tsx
@@ -45,7 +45,10 @@ export function DetailScreen() {
         Back to results
       </button>
 
-      <div style={s(`display:grid;grid-template-columns:minmax(0,1fr) 344px;gap:22px;align-items:start;`)}>
+      <div
+        className="tc-stack-sm"
+        style={s(`display:grid;grid-template-columns:minmax(0,1fr) 344px;gap:22px;align-items:start;`)}
+      >
         <div style={s(`display:flex;flex-direction:column;gap:16px;min-width:0;`)}>
           {/* HERO */}
           <div style={s(heroCard + "padding:24px 26px;")}>
diff --git a/src/components/therapy-compass/screens/other-screen.tsx b/src/components/therapy-compass/screens/other-screen.tsx
index fb4864801..3e76f044d 100644
--- a/src/components/therapy-compass/screens/other-screen.tsx
+++ b/src/components/therapy-compass/screens/other-screen.tsx
@@ -78,6 +78,7 @@ export function OtherScreen() {
         {queue.map((t) => (
           <div
             key={t.slug}
+            className="tc-stack-sm"
             style={s(
               `display:grid;grid-template-columns:minmax(200px,1.4fr) repeat(3,minmax(110px,1fr)) auto;gap:20px;align-items:center;background:var(--surface);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow-tight);padding:16px 20px;`,
             )}
diff --git a/src/components/therapy-compass/screens/pathways-screen.tsx b/src/components/therapy-compass/screens/pathways-screen.tsx
index 22cd7f7e9..dd331fa29 100644
--- a/src/components/therapy-compass/screens/pathways-screen.tsx
+++ b/src/components/therapy-compass/screens/pathways-screen.tsx
@@ -53,6 +53,7 @@ export function PathwaysScreen() {
       </div>
 
       <div
+        className="tc-stack-sm"
         style={s(
           `display:grid;grid-template-columns:320px minmax(0,1fr);gap:16px;background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow-soft);overflow:hidden;`,
         )}
diff --git a/src/components/therapy-compass/screens/recommend-screen.tsx b/src/components/therapy-compass/screens/recommend-screen.tsx
index 2f39a9795..6daba4025 100644
--- a/src/components/therapy-compass/screens/recommend-screen.tsx
+++ b/src/components/therapy-compass/screens/recommend-screen.tsx
@@ -215,6 +215,7 @@ export function RecommendScreen() {
             {rest.map(({ therapy: t }, i) => (
               <div
                 key={t.slug}
+                className="tc-stack-sm"
                 style={s(
                   `display:grid;grid-template-columns:auto minmax(220px,1.3fr) 1.1fr 1.1fr auto;gap:20px;align-items:center;background:var(--surface);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow-tight);padding:16px 20px;`,
                 )}
diff --git a/src/components/therapy-compass/screens/sheets-screen.tsx b/src/components/therapy-compass/screens/sheets-screen.tsx
index 1aacb0ab5..89d574059 100644
--- a/src/components/therapy-compass/screens/sheets-screen.tsx
+++ b/src/components/therapy-compass/screens/sheets-screen.tsx
@@ -57,7 +57,10 @@ export function SheetsScreen() {
         </div>
       </div>
 
-      <div style={s(`display:grid;grid-template-columns:340px minmax(0,1fr);gap:20px;align-items:start;`)}>
+      <div
+        className="tc-stack-sm"
+        style={s(`display:grid;grid-template-columns:340px minmax(0,1fr);gap:20px;align-items:start;`)}
+      >
         {/* BUILDER */}
         <div
           className="tc-builder-panel"
@@ -383,7 +386,7 @@ function TherapyPicker() {
               aria-label="Search therapies for the patient sheet"
               autoFocus
               style={s(
-                `width:100%;height:36px;padding:0 12px 0 34px;border:1px solid var(--border);border-radius:9px;background:var(--surface);color:var(--text);font-size:13px;font-family:inherit;outline:none;`,
+                `width:100%;height:44px;padding:0 12px 0 34px;border:1px solid var(--border);border-radius:9px;background:var(--surface);color:var(--text);font-size:13px;font-family:inherit;outline:none;`,
               )}
             />
           </label>
diff --git a/src/components/therapy-compass/styles.tsx b/src/components/therapy-compass/styles.tsx
index 42859b8d5..16371255c 100644
--- a/src/components/therapy-compass/styles.tsx
+++ b/src/components/therapy-compass/styles.tsx
@@ -28,6 +28,17 @@ const CSS = `
 @media (max-width: 640px) {
   .tc-root .tc-main { padding: 20px 16px 32px !important; }
   .tc-root .tc-topnav { padding: 12px 16px !important; gap: 12px !important; }
+  /* Phone: multi-column grids with fixed/minmax tracks would otherwise overflow
+     a 390px viewport and clip clinical content (contraindications, review
+     columns). Collapse them to a single stacked column. */
+  .tc-root .tc-stack-sm { grid-template-columns: 1fr !important; }
+  /* Phone: the comparison table must keep its column structure, so make the
+     table scroll horizontally instead of clipping the right-hand therapies. */
+  .tc-root .tc-scroll-sm {
+    overflow-x: auto !important;
+    overscroll-behavior-x: contain;
+    -webkit-overflow-scrolling: touch;
+  }
 }
 @media print {
   @page { size: A4 portrait; margin: 14mm; }
diff --git a/src/components/therapy-compass/therapy-card.tsx b/src/components/therapy-compass/therapy-card.tsx
index 31c321b53..e48cb47c1 100644
--- a/src/components/therapy-compass/therapy-card.tsx
+++ b/src/components/therapy-compass/therapy-card.tsx
@@ -30,6 +30,7 @@ export function ResultCard({ therapy }: { therapy: Therapy }) {
       )}
     >
       <div
+        className="tc-stack-sm"
         style={s(
           `display:grid;grid-template-columns:minmax(280px,1fr) minmax(400px,1.35fr) auto;gap:22px;padding:20px 22px;align-items:start;`,
         )}
@@ -52,6 +53,7 @@ export function ResultCard({ therapy }: { therapy: Therapy }) {
         </div>
 
         <div
+          className="tc-stack-sm"
           style={s(
             `display:grid;grid-template-columns:1fr 1fr 1fr;gap:1px;background:var(--border);border:1px solid var(--border);border-radius:12px;overflow:hidden;`,
           )}
@@ -86,7 +88,7 @@ export function ResultCard({ therapy }: { therapy: Therapy }) {
             className="tc-btn"
             title="Favourite"
             style={s(
-              `display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border:1px solid var(--border);border-radius:9px;background:var(--surface);color:var(--text-soft);cursor:pointer;`,
+              `display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid var(--border);border-radius:9px;background:var(--surface);color:var(--text-soft);cursor:pointer;`,
             )}
           >
             <HeartIcon size={17} />