diff --git a/docs/design-system/GATES.md b/docs/design-system/GATES.md
index ce86429c3..0e654aca2 100644
--- a/docs/design-system/GATES.md
+++ b/docs/design-system/GATES.md
@@ -73,6 +73,29 @@ Canonical role → live utility (TOKENS §6): `--text-xs` → `text-xs`; `--text
 `--text-body` → `text-base-minus`; `--text-md` → `text-[length:var(--text-md)]`;
 `--text-lg` → `text-xl`; `--text-xl` → `text-2xl`; `--text-hero` → `text-hero`.
 
+**Step selection map (guidance only — DS-P2-02).** Pick the named step that matches the
+rendered size. The `*-minus` steps sit one notch under the Tailwind default they are
+named for. This table is documentation, not a gate: do not delete type steps, and do
+not add a blocking ESLint rule for which existing step a surface chooses.
+
+| Size  | Utility           | When to use                                                         |
+| ----- | ----------------- | ------------------------------------------------------------------- |
+| 10px  | `text-3xs`        | Micro floor: dense metadata, legends, count bubbles                 |
+| 11px  | `text-2xs`        | Chip compact / secondary labels                                     |
+| 12px  | `text-xs`         | Tailwind default; Chip `standard`                                   |
+| 13px  | `text-sm-minus`   | One notch under `text-sm` (14px) — dense body/labels                |
+| 14px  | `text-sm`         | Tailwind default body/label                                         |
+| 15px  | `text-base-minus` | One notch under `text-base` (16px) — comfortable body just under 16 |
+| 16px  | `text-base`       | Tailwind default                                                    |
+| 17px  | `text-lg-minus`   | One notch under `text-lg` (18px)                                    |
+| 18px  | `text-lg`         | Tailwind default                                                    |
+| 20px  | `text-xl`         | Tailwind default                                                    |
+| 22px  | `text-2xl-minus`  | One notch under `text-2xl` (24px)                                   |
+| 24px  | `text-2xl`        | Tailwind default                                                    |
+| 26px  | `text-3xl-minus`  | One notch under `text-3xl` (30px)                                   |
+| 30px  | `text-3xl`        | Tailwind default                                                    |
+| fluid | `text-hero`       | Mode-home display heading (`clamp`)                                 |
+
 ⚠️ **The "1 318 call sites" figure this section used to quote was a repo-wide grep including
 `src/app/mockups/**`, which every one of these gates excludes** — 1 360 at `7aaf9349c`.
 Production consumers of the eight non-standard steps total **705** **[verified: AST class-root
diff --git a/src/components/clinical-dashboard/dashboard-nav.tsx b/src/components/clinical-dashboard/dashboard-nav.tsx
index 58f15da44..b125f01f1 100644
--- a/src/components/clinical-dashboard/dashboard-nav.tsx
+++ b/src/components/clinical-dashboard/dashboard-nav.tsx
@@ -274,7 +274,7 @@ export function MobileSectionFab({
         aria-hidden={!open}
         inert={!open}
         hidden={!open}
-        className="fixed z-40 overflow-hidden rounded-lg border border-[color:var(--border-lux)] bg-[color:var(--surface-lux)] text-[color:var(--text)] shadow-[var(--shadow-lux)] ring-1 ring-[color:var(--ring-highlight)] backdrop-blur-md"
+        className="fixed z-40 overflow-hidden rounded-lg border border-[color:var(--border-lux)] bg-[color:var(--surface-lux)] text-[color:var(--text)] shadow-[var(--shadow-lux)] backdrop-blur-md"
         style={{
           right: "max(0.75rem, env(safe-area-inset-right))",
           bottom: "calc(max(0.75rem, env(safe-area-inset-bottom)) + 4.5rem)",
diff --git a/src/components/clinical-dashboard/medication-prescribing-workspace.tsx b/src/components/clinical-dashboard/medication-prescribing-workspace.tsx
index f8025655d..37e2113ad 100644
--- a/src/components/clinical-dashboard/medication-prescribing-workspace.tsx
+++ b/src/components/clinical-dashboard/medication-prescribing-workspace.tsx
@@ -823,7 +823,7 @@ function MedicationResults({
                     data-medication-cell="action"
                     className="flex min-w-0 items-start gap-2 pt-0.5 text-sm-minus font-medium leading-5 text-[color:var(--text-heading)]"
                   >
-                    <ActionToneIcon tone={result.actionTone} className="mt-[0.1875rem] h-3.5 w-3.5" />
+                    <ActionToneIcon tone={result.actionTone} className="mt-0.5 h-3.5 w-3.5" />
                     <span className="line-clamp-2 min-w-0 break-words">{result.action}</span>
                   </span>
                   {result.href ? (
diff --git a/src/components/document-viewer/document-rail-panels.tsx b/src/components/document-viewer/document-rail-panels.tsx
index 58dec45dd..45a130226 100644
--- a/src/components/document-viewer/document-rail-panels.tsx
+++ b/src/components/document-viewer/document-rail-panels.tsx
@@ -176,7 +176,7 @@ export function DocumentViewerRail({
                           <li key={`${key}:${index}:${item}`} className="flex gap-2">
                             <span
                               aria-hidden="true"
-                              className="mt-[0.65em] h-1.5 w-1.5 shrink-0 rounded-full bg-[color:var(--clinical-accent)]"
+                              className="mt-2.5 h-1.5 w-1.5 shrink-0 rounded-full bg-[color:var(--clinical-accent)]"
                             />
                             <span>
                               <SafeBoldText text={item} />
diff --git a/src/components/sidebar-live-shell.module.css b/src/components/sidebar-live-shell.module.css
index 6b7a0797c..23cf660a6 100644
--- a/src/components/sidebar-live-shell.module.css
+++ b/src/components/sidebar-live-shell.module.css
@@ -50,7 +50,8 @@
 .railDivider {
   width: 2rem;
   height: 1px;
-  margin-block: 0.625rem;
+  /* 10px sat between --space-2 (8) and --space-3 (12); snap onto the 4px gap ladder. */
+  margin-block: var(--gap-tight);
   flex: none;
   background: var(--border);
 }
@@ -275,8 +276,11 @@
 
   .shell[data-collapsed="true"] .rail {
     width: 5.5rem;
-    height: calc(100dvh - 0.25rem);
-    margin: 0.125rem 0.4375rem;
+    /* Subtract the full vertical margin (--space-1 top + --space-1 bottom =
+       --space-2) so the border-box height plus margins fits 100dvh exactly. */
+    height: calc(100dvh - var(--space-2));
+    /* 2px 7px sat off the 4px space ladder; snap to --space-1 / --space-2. */
+    margin: var(--space-1) var(--space-2);
     padding: var(--radius-lg);
     border: 1px solid var(--border);
     border-radius: var(--radius-md);
diff --git a/src/components/therapy-compass/screens/brief-screen.tsx b/src/components/therapy-compass/screens/brief-screen.tsx
index 817a0f5fb..392dc29df 100644
--- a/src/components/therapy-compass/screens/brief-screen.tsx
+++ b/src/components/therapy-compass/screens/brief-screen.tsx
@@ -183,14 +183,14 @@ export function BriefScreen() {
                 className="flex flex-col gap-4 min-w-0"
                 provenance={`Source: ${t.name} Therapy record · ${durationLabel} intervention · Review status: ${t.reviewStatus === "reviewed" ? "reviewed" : "source review required"}`}
               >
-                <div className={cn(cardSurface, "py-[22px] px-6")}>
-                  <div className="flex items-center justify-between gap-3 mb-[18px] flex-wrap">
+                <div className={cn(cardSurface, "py-5.5 px-6")}>
+                  <div className="flex items-center justify-between gap-3 mb-4.5 flex-wrap">
                     <div className="flex items-center gap-3 flex-wrap">
                       <h2 className="m-0 text-lg font-semibold text-[color:var(--text-heading)]">{t.name}</h2>
-                      <span className="text-2xs font-semibold py-[3px] px-2.5 rounded-sm bg-[color:var(--clinical-accent-soft)] text-[color:var(--clinical-accent-hover)] border border-[color:var(--clinical-accent-border)]">
+                      <span className="text-2xs font-semibold py-0.5 px-2.5 rounded-sm bg-[color:var(--clinical-accent-soft)] text-[color:var(--clinical-accent-hover)] border border-[color:var(--clinical-accent-border)]">
                         {durationLabel} mode
                       </span>
-                      <span className="text-2xs font-semibold py-[3px] px-2.5 rounded-sm bg-[color:var(--warning-bg)] text-[color:var(--warning-text)] border border-[color:var(--warning-border)]">
+                      <span className="text-2xs font-semibold py-0.5 px-2.5 rounded-sm bg-[color:var(--warning-bg)] text-[color:var(--warning-text)] border border-[color:var(--warning-border)]">
                         {t.reviewStatus === "reviewed" ? "Reviewed" : "Clinician review required"}
                       </span>
                     </div>
@@ -206,7 +206,7 @@ export function BriefScreen() {
                       </Button>
                     </span>
                   </div>
-                  <div className="grid grid-cols-2 sm:grid-cols-4 gap-[1px] bg-[color:var(--border)] border border-[color:var(--border)] rounded-lg overflow-hidden">
+                  <div className="grid grid-cols-2 sm:grid-cols-4 gap-px bg-[color:var(--border)] border border-[color:var(--border)] rounded-lg overflow-hidden">
                     <MetaCell eyebrow="GOAL" text={t.bestUsedFor || t.indications || "—"} />
                     <MetaCell eyebrow="FIRST STEP" text={steps[0] || summarise(durationText, 1) || "—"} />
                     <MetaCell
@@ -222,7 +222,7 @@ export function BriefScreen() {
                 </div>
 
                 <div className="grid grid-cols-1 sm:grid-cols-[1.6fr_1fr] gap-4 items-start">
-                  <div className={cn(cardSurface, "py-5 px-[22px] min-w-0")}>
+                  <div className={cn(cardSurface, "py-5 px-5.5 min-w-0")}>
                     <div className="text-base-minus font-semibold text-[color:var(--text-heading)] mb-4">
                       {durationLabel} delivery
                     </div>
@@ -271,7 +271,7 @@ export function BriefScreen() {
                         {t.clinicianScripts.slice(0, 2).map((c, i) => (
                           <div key={i} className="mb-3">
                             {c.scriptType ? (
-                              <div className="text-xs font-semibold text-[color:var(--text-heading)] mb-[3px]">
+                              <div className="text-xs font-semibold text-[color:var(--text-heading)] mb-0.5">
                                 {c.scriptType}
                               </div>
                             ) : null}
@@ -282,27 +282,24 @@ export function BriefScreen() {
                     ) : null}
                   </div>
 
-                  <div className={cn(cardSurface, "py-5 px-[22px]")}>
+                  <div className={cn(cardSurface, "py-5 px-5.5")}>
                     <div className="text-base-minus font-semibold text-[color:var(--text-heading)] mb-3.5">
                       Before use
                     </div>
-                    <div className="flex flex-col gap-[13px] mb-4">
+                    <div className="flex flex-col gap-3.5 mb-4">
                       {CHECKLIST.map((item) => (
-                        <span
-                          key={item}
-                          className="flex items-center gap-[11px] text-sm-minus text-[color:var(--text)]"
-                        >
+                        <span key={item} className="flex items-center gap-3 text-sm-minus text-[color:var(--text)]">
                           <span className="w-[19px] h-[19px] border-[1.5px] border-[color:var(--border-strong)] rounded-xs flex-none" />
                           {item}
                         </span>
                       ))}
                     </div>
-                    <div className="flex items-start gap-[9px] py-[13px] px-3.5 bg-[color:var(--warning-bg)] border border-[color:var(--warning-border)] rounded-lg">
+                    <div className="flex items-start gap-2.5 py-3.5 px-3.5 bg-[color:var(--warning-bg)] border border-[color:var(--warning-border)] rounded-lg">
                       <TriangleAlert
                         aria-hidden="true"
                         size={17}
                         strokeWidth={1.8}
-                        className="text-[color:var(--warning-text)] flex-none mt-[1px]"
+                        className="text-[color:var(--warning-text)] flex-none mt-px"
                       />
                       <span className="text-xs font-semibold leading-normal text-[color:var(--warning-text)]">
                         Clinical review is required before saving or sharing.
diff --git a/src/components/therapy-compass/screens/compare-screen.tsx b/src/components/therapy-compass/screens/compare-screen.tsx
index 32fe0da78..b98520c66 100644
--- a/src/components/therapy-compass/screens/compare-screen.tsx
+++ b/src/components/therapy-compass/screens/compare-screen.tsx
@@ -128,7 +128,7 @@ export function CompareScreen() {
         // which is not something `PageHeader` offers — and should not, since a
         // count that grows cannot share a line with a title that wraps.
         meta={
-          <span className="text-sm-minus font-semibold text-[color:var(--clinical-accent-hover)] bg-[color:var(--clinical-accent-soft)] py-[3px] px-2.5 rounded-md">
+          <span className="text-sm-minus font-semibold text-[color:var(--clinical-accent-hover)] bg-[color:var(--clinical-accent-soft)] py-0.5 px-2.5 rounded-md">
             {items.length} of {THERAPY_MAX_COMPARE} selected
           </span>
         }
@@ -190,7 +190,7 @@ export function CompareScreen() {
         <>
           {/* decision summary */}
           <div className={cn(cardSurface, "grid grid-cols-1 sm:grid-cols-[1.1fr_1fr_1fr] overflow-hidden mb-5")}>
-            <div className="py-5 px-[22px]">
+            <div className="py-5 px-5.5">
               <div className="text-base-minus font-semibold text-[color:var(--text-heading)]">Decision summary</div>
             </div>
             <SummaryCell label="SHORTEST DELIVERY" value={shortestDelivery(items)?.name ?? "—"} accent />
@@ -240,15 +240,15 @@ export function CompareScreen() {
                         scope="col"
                         className="min-w-[160px] border-l border-[color:var(--border)] px-5 py-3.5 align-top"
                       >
-                        <div className="flex items-center gap-[7px]">
+                        <div className="flex items-center gap-2">
                           <Scale aria-hidden="true" className="size-icon-sm text-[color:var(--decoration-soft)]" />
                           <span className="text-sm-minus font-semibold text-[color:var(--text-heading)]">{t.name}</span>
                         </div>
                         <div
                           className={
                             t.reviewStatus === "reviewed"
-                              ? "mt-[3px] text-2xs font-semibold text-[color:var(--success-text)]"
-                              : "mt-[3px] text-2xs font-semibold text-[color:var(--warning-text)]"
+                              ? "mt-0.5 text-2xs font-semibold text-[color:var(--success-text)]"
+                              : "mt-0.5 text-2xs font-semibold text-[color:var(--warning-text)]"
                           }
                         >
                           {t.reviewStatus === "reviewed" ? "Reviewed" : "Needs review"}
@@ -389,7 +389,7 @@ function SummaryCell({
 }) {
   return (
     <div
-      className={`border-l border-[color:var(--border)] px-[22px] py-5${accent ? " border-l-[3px] border-l-[color:var(--clinical-accent)]" : warn ? " bg-[color:var(--warning-bg)] text-[color:var(--warning-text)]" : ""}`}
+      className={`border-l border-[color:var(--border)] px-5.5 py-5${accent ? " border-l-[3px] border-l-[color:var(--clinical-accent)]" : warn ? " bg-[color:var(--warning-bg)] text-[color:var(--warning-text)]" : ""}`}
     >
       <div className="text-3xs font-bold tracking-eyebrow text-[color:var(--text-muted)] mb-1.5">{label}</div>
       <div className="text-sm font-semibold text-[color:var(--text-heading)]">{value}</div>
diff --git a/src/components/therapy-compass/screens/other-screen.tsx b/src/components/therapy-compass/screens/other-screen.tsx
index 272fe7b5d..1a14f5313 100644
--- a/src/components/therapy-compass/screens/other-screen.tsx
+++ b/src/components/therapy-compass/screens/other-screen.tsx
@@ -48,7 +48,7 @@ export function OtherScreen() {
   return (
     <section data-screen-label="Review Queue" className={pageContainer}>
       <PageHeader
-        className="mb-[22px]"
+        className="mb-5.5"
         title="Review Queue"
         description="Records awaiting source and clinical review, lowest review-completeness first."
         // A count, not a control: `meta` is the documented slot for status
diff --git a/src/components/therapy-compass/screens/sheets-screen.tsx b/src/components/therapy-compass/screens/sheets-screen.tsx
index 98e3cc4b0..39b35ea58 100644
--- a/src/components/therapy-compass/screens/sheets-screen.tsx
+++ b/src/components/therapy-compass/screens/sheets-screen.tsx
@@ -71,10 +71,10 @@ export function SheetsScreen() {
           <div className="grid grid-cols-1 sm:grid-cols-[340px_minmax(0,_1fr)] gap-5 items-start">
             {/* BUILDER */}
             <div className="max-sm:static max-sm:top-auto flex flex-col gap-4 sticky top-[84px]">
-              <div className={cn(cardSurface, "py-[18px] px-5")}>
+              <div className={cn(cardSurface, "py-4.5 px-5")}>
                 <div className="text-sm-minus font-semibold text-[color:var(--text-heading)] mb-3">Therapy</div>
                 <TherapyPicker />
-                <div className="text-sm-minus font-semibold text-[color:var(--text-heading)] mt-[18px] mx-0 mb-2.5">
+                <div className="text-sm-minus font-semibold text-[color:var(--text-heading)] mt-4.5 mx-0 mb-2.5">
                   Reading level &amp; tone
                 </div>
                 <SegmentedControl
@@ -94,7 +94,7 @@ export function SheetsScreen() {
                 />
               </div>
 
-              <div className={cn(cardSurface, "py-[18px] px-5")}>
+              <div className={cn(cardSurface, "py-4.5 px-5")}>
                 <div className="text-sm-minus font-semibold text-[color:var(--text-heading)] mb-1.5">Sections</div>
                 <p className="mt-0 mx-0 mb-3.5 text-xs text-[color:var(--text-muted)]">
                   Toggle what appears on the sheet.
@@ -118,7 +118,7 @@ export function SheetsScreen() {
                 </div>
               </div>
 
-              <div className={cn(cardSurface, "py-[18px] px-5")}>
+              <div className={cn(cardSurface, "py-4.5 px-5")}>
                 <div className="flex items-center justify-between gap-3">
                   <span>
                     <span className="block text-sm-minus font-semibold text-[color:var(--text-heading)]">
@@ -146,10 +146,10 @@ export function SheetsScreen() {
               <PrintOutput
                 paperTone="therapy"
                 provenance={`Source: ${t.name} Therapy record · Review status: ${t.reviewStatus === "reviewed" ? "reviewed" : "source review required"}`}
-                className="w-full max-w-[720px] bg-[color:var(--tc-paper-background)] border border-[color:var(--tc-paper-border)] rounded-sm shadow-[var(--tc-paper-shadow)] py-[52px] px-14 text-[color:var(--tc-paper-ink)]"
+                className="w-full max-w-[720px] bg-[color:var(--tc-paper-background)] border border-[color:var(--tc-paper-border)] rounded-sm shadow-[var(--tc-paper-shadow)] py-13 px-14 text-[color:var(--tc-paper-ink)]"
               >
                 <div className="max-sm:flex-wrap flex items-center justify-between border-b-2 border-b-[color:var(--tc-paper-accent-strong)] pb-4 mb-6">
-                  <div className="flex items-center gap-[11px]">
+                  <div className="flex items-center gap-3">
                     <span className="inline-flex items-center justify-center w-[34px] h-[34px] rounded-md bg-[color:var(--tc-paper-accent-background)] text-[color:var(--tc-paper-accent)]">
                       <Scale aria-hidden="true" size={20} strokeWidth={1.6} />
                     </span>
@@ -170,7 +170,7 @@ export function SheetsScreen() {
                 <p
                   contentEditable
                   suppressContentEditableWarning
-                  className="mt-0 mx-0 mb-[26px] text-sm text-[color:var(--tc-paper-muted)]"
+                  className="mt-0 mx-0 mb-6.5 text-sm text-[color:var(--tc-paper-muted)]"
                 >
                   {t.bestUsedFor && t.bestUsedFor.length < 70 && !/^(most|the|a |an )/i.test(t.bestUsedFor)
                     ? `A step-by-step plan to help with ${t.bestUsedFor.toLowerCase()}.`
@@ -180,7 +180,7 @@ export function SheetsScreen() {
                 {b.secAbout && about ? <PaperSection title="About this therapy">{about}</PaperSection> : null}
 
                 {b.secSteps && steps.length ? (
-                  <div className="mb-[22px]">
+                  <div className="mb-5.5">
                     <h2
                       contentEditable
                       suppressContentEditableWarning
@@ -208,7 +208,7 @@ export function SheetsScreen() {
                 ) : null}
 
                 {b.secPractice ? (
-                  <div className="mb-[22px] bg-[color:var(--tc-paper-accent-background)] border border-[color:var(--tc-paper-accent-border)] rounded-md py-4 px-[18px]">
+                  <div className="mb-5.5 bg-[color:var(--tc-paper-accent-background)] border border-[color:var(--tc-paper-accent-border)] rounded-md py-4 px-4.5">
                     <h2
                       contentEditable
                       suppressContentEditableWarning
@@ -236,7 +236,7 @@ export function SheetsScreen() {
                 ) : null}
 
                 {b.secContacts ? (
-                  <div className="mb-2 bg-[color:var(--tc-paper-warning-background)] border border-[color:var(--tc-paper-warning-border)] rounded-md py-4 px-[18px]">
+                  <div className="mb-2 bg-[color:var(--tc-paper-warning-background)] border border-[color:var(--tc-paper-warning-border)] rounded-md py-4 px-4.5">
                     <h2
                       contentEditable
                       suppressContentEditableWarning
@@ -257,7 +257,7 @@ export function SheetsScreen() {
                 ) : null}
 
                 {b.sheetClinician ? (
-                  <div className="flex justify-between gap-4 mt-[26px] pt-4 border-t border-[color:var(--tc-paper-border-subtle)] text-2xs text-[color:var(--tc-paper-muted)] flex-wrap">
+                  <div className="flex justify-between gap-4 mt-6.5 pt-4 border-t border-[color:var(--tc-paper-border-subtle)] text-2xs text-[color:var(--tc-paper-muted)] flex-wrap">
                     <span contentEditable suppressContentEditableWarning>
                       Clinician: ____________________
                     </span>
@@ -285,7 +285,7 @@ export function SheetsScreen() {
 
 function PaperSection({ title, children }: { title: string; children: ReactNode }) {
   return (
-    <div className="mb-[22px]">
+    <div className="mb-5.5">
       <h2
         contentEditable
         suppressContentEditableWarning
@@ -328,7 +328,7 @@ function TherapyPicker() {
         aria-expanded={open}
         onClick={() => setOpen((v) => !v)}
       >
-        <span className="flex items-center gap-[9px] min-w-0">
+        <span className="flex items-center gap-2.5 min-w-0">
           <Scale aria-hidden="true" size={16} className="text-[color:var(--clinical-accent)] flex-none" />
           <span className="overflow-hidden text-ellipsis whitespace-nowrap">
             {b.selectedTherapy?.name ?? "Choose a therapy"}
@@ -354,7 +354,7 @@ function TherapyPicker() {
               placeholder="Search therapies..."
               aria-label="Search therapies for the patient sheet"
               autoFocus
-              className="w-full h-tap pt-0 pr-3 pb-0 pl-[34px] border border-[color:var(--border)] rounded-md bg-[color:var(--surface)] text-[color:var(--text)] text-sm-minus"
+              className="w-full h-tap pt-0 pr-3 pb-0 pl-8.5 border border-[color:var(--border)] rounded-md bg-[color:var(--surface)] text-[color:var(--text)] text-sm-minus"
             />
           </label>
           <div className="max-h-[260px] overflow-auto">
diff --git a/src/components/therapy-compass/workspace.tsx b/src/components/therapy-compass/workspace.tsx
index ac27cfdbd..6f9ce142b 100644
--- a/src/components/therapy-compass/workspace.tsx
+++ b/src/components/therapy-compass/workspace.tsx
@@ -15,7 +15,7 @@ import { TherapyCompareTray } from "./therapy-compare-tray";
 
 function TherapyCompassFooter() {
   return (
-    <div data-therapy-no-print className={cn(pageContainer, "mt-[30px] border-t border-[color:var(--border)] pt-5")}>
+    <div data-therapy-no-print className={cn(pageContainer, "mt-7.5 border-t border-[color:var(--border)] pt-5")}>
       <ModeHomeVerificationFooter label="Decision support" body="Source-grounded — review status before clinical use" />
     </div>
   );
diff --git a/src/components/ui/retrieval-state-banner.tsx b/src/components/ui/retrieval-state-banner.tsx
index fb5dcf8d1..bc21fb5cb 100644
--- a/src/components/ui/retrieval-state-banner.tsx
+++ b/src/components/ui/retrieval-state-banner.tsx
@@ -129,7 +129,7 @@ function StaleEvidenceBody({
               data-status={source.status}
               className="flex flex-wrap items-center gap-x-2 gap-y-1"
             >
-              <StatusMark status={source.status} className="mt-[0.4em] self-start" />
+              <StatusMark status={source.status} className="mt-1.5 self-start" />
               <span className="min-w-0 font-medium">{source.title}</span>
               {source.locator ? <span className="text-[color:var(--text-muted)]">{source.locator}</span> : null}
               <span className="text-[color:var(--text-muted)]">
diff --git a/src/lib/medication-records.ts b/src/lib/medication-records.ts
index 28ba5a7fa..e2905395f 100644
--- a/src/lib/medication-records.ts
+++ b/src/lib/medication-records.ts
@@ -111,6 +111,8 @@ export function rowToMedicationRecord(row: MedicationRecordRow): MedicationRecor
     class: row.class ?? "",
     subclass: row.subclass ?? "",
     category: row.category ?? "",
+    // Per-record user colour (Postgres medications.accent default). Stored as a
+    // hex swatch for inline styles; not --clinical-accent (app chrome).
     accent: row.accent ?? "#0f766e",
     tag: row.tag ?? "",
     schedule: row.schedule ?? "",
diff --git a/src/lib/medications.ts b/src/lib/medications.ts
index b80fa0dd6..05d4dd63a 100644
--- a/src/lib/medications.ts
+++ b/src/lib/medications.ts
@@ -86,6 +86,8 @@ export function normalizeRecord(record: MedicationRecord): MedicationRecord {
     class: record.class?.trim() ?? "",
     subclass: record.subclass?.trim() ?? "",
     category: record.category?.trim() ?? "",
+    // Per-record user colour (Postgres medications.accent default). Stored as a
+    // hex swatch for inline styles; not --clinical-accent (app chrome).
     accent: record.accent?.trim() || "#0f766e",
     tag: record.tag?.trim() ?? "",
     schedule: record.schedule?.trim() ?? "",
diff --git a/tests/design-system-contract-utils.test.ts b/tests/design-system-contract-utils.test.ts
index 76f6a7731..04269a6a5 100644
--- a/tests/design-system-contract-utils.test.ts
+++ b/tests/design-system-contract-utils.test.ts
@@ -687,6 +687,28 @@ describe("design-system contract helpers", () => {
     expect(reportFailure).toHaveBeenCalledWith("pre-paint theme-color boundary is missing");
   });
 
+  it("masks only the medication accent-default swatch, not other hex in the same file", () => {
+    const reportFailure = vi.fn();
+    const source = ['export const UNRELATED = "#123456";', 'accent: row.accent ?? "#0f766e",'].join("\n");
+    const scoped = rawColorContractSource("src/lib/medication-records.ts", source, reportFailure);
+    expect(scoped).toContain("#123456");
+    expect(scoped).not.toContain("#0f766e");
+    expect(reportFailure).not.toHaveBeenCalled();
+    const meds = rawColorContractSource(
+      "src/lib/medications.ts",
+      'accent: record.accent?.trim() || "#0f766e",',
+      reportFailure,
+    );
+    expect(meds).not.toContain("#0f766e");
+  });
+
+  it("fails closed when the medication accent-default swatch disappears", () => {
+    const reportFailure = vi.fn();
+    const source = 'export const UNRELATED = "#123456";';
+    expect(rawColorContractSource("src/lib/medications.ts", source, reportFailure)).toBe(source);
+    expect(reportFailure).toHaveBeenCalledWith("medication accent default boundary is missing");
+  });
+
   it("fails closed when a fixed-paper factsheet boundary disappears", () => {
     const reportFailure = vi.fn();
     const source = 'const appChrome = "#123456";';