diff --git a/docs/process-hardening.md b/docs/process-hardening.md
index 4b7d68ce1d..d53cf10292 100644
--- a/docs/process-hardening.md
+++ b/docs/process-hardening.md
@@ -68,3 +68,10 @@ This document turns the current process review into phased, durable repo practic
 - **Known follow-up debts (documented, not actioned):**
   - Live migration history has duplicate-version churn (two each of `api_rate_limits`, `audit_logs`, `rag_queries_retention`, `audit_logs_service_role_policy`, `indexing_reliability_recovery`) from the same raw-apply habit. Do not rewrite history; treat as a caution for future applies.
   - Auth server is capped at 10 absolute DB connections (Supabase advisor); switch to percentage-based allocation in the dashboard before scaling instance size (not settable via SQL/MCP).
+
+## CSS cascade layering (2026-07-02)
+
+- The custom component classes in `src/app/globals.css` predate cascade layers, so they sat unlayered and silently beat Tailwind v4 utilities (which live in `@layer utilities`) on the same element. This caused three shipped UI bugs: the header source ledger ignoring responsive `hidden`, the composer clear button covering typed text (`pr-*` defeated), and the standalone-home status chips sliding under the mode pill.
+- Conflict-free helper classes (`app-edge-backdrop`, `mobile-app-shell`, `mobile-popover-scroll`, `citation-link`, `animate-skeleton-shimmer`, `focus-ring-premium`, `source-capsule-hover`, `polished-scroll`) now live in `@layer components`, so utilities override them normally. Their call sites were audited for same-property utility collisions before the move.
+- **Remaining debt:** the chrome classes (`edge-glass-header`, `universal-header-*`, `answer-footer-search-*`, `*-composer-edge`, `desktop-home-search-*`, `document-mobile-search-*`) stay intentionally unlayered because call sites stack utilities that set the same properties and today rely on the class winning (e.g. footer input font-size/padding, pill min-height, header shadow). Layering them requires reconciling each call site so rendered output is unchanged. Until then: when adding a utility to an element carrying one of these classes, check the class body first — the class wins.
+- `tests/ui-overlap.spec.ts` is the standing regression guard for the visible symptom (overlapping header controls, composer clear-button geometry) across 640-1536px widths.
diff --git a/playwright.config.ts b/playwright.config.ts
index 73b3ee1e4b..b219750d9c 100644
--- a/playwright.config.ts
+++ b/playwright.config.ts
@@ -5,7 +5,7 @@ const baseURL = getPlaywrightBaseUrl();
 
 export default defineConfig({
   testDir: "./tests",
-  testMatch: /.*ui-(smoke|stress|accessibility|tools)\.spec\.ts/,
+  testMatch: /.*ui-(smoke|stress|accessibility|tools|overlap)\.spec\.ts/,
   timeout: 60_000,
   retries: process.env.CI ? 1 : 0,
   expect: {
diff --git a/src/app/globals.css b/src/app/globals.css
index a9effb3d22..763a8a958f 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -430,11 +430,12 @@ summary::-webkit-details-marker {
   color: #ecfeff;
 }
 
-/* Layout utilities */
-.app-edge-backdrop {
-  background: var(--background);
-}
-
+/*
+ * Layout chrome — INTENTIONALLY UNLAYERED: these classes beat Tailwind
+ * utilities on the same element (unlayered CSS wins over all layers). Their
+ * call sites stack utilities that set the same properties and rely on the
+ * class winning; the conflict-free helpers live in @layer components below.
+ */
 .edge-glass-header {
   isolation: isolate;
   padding-left: max(0.75rem, var(--safe-area-left));
@@ -538,13 +539,6 @@ summary::-webkit-details-marker {
   opacity: 1;
 }
 
-.answer-footer-search-mic {
-  height: 2.75rem;
-  width: 2.75rem;
-  min-width: 44px;
-  color: var(--text-muted);
-}
-
 .answer-footer-search-divider {
   display: none;
   height: 2.25rem;
@@ -591,11 +585,6 @@ summary::-webkit-details-marker {
   color: var(--text-muted);
 }
 
-.mobile-app-shell {
-  min-height: 100svh;
-  height: 100svh;
-}
-
 .dashboard-composer-edge {
   left: max(0.75rem, var(--safe-area-left));
   right: max(0.75rem, var(--safe-area-right));
@@ -644,21 +633,6 @@ summary::-webkit-details-marker {
   font-weight: 560;
 }
 
-.mobile-popover-scroll {
-  max-height: min(70svh, 28rem);
-}
-
-@supports (height: 100dvh) {
-  .mobile-app-shell {
-    min-height: 100dvh;
-    height: 100dvh;
-  }
-
-  .mobile-popover-scroll {
-    max-height: min(70dvh, 28rem);
-  }
-}
-
 @media (min-width: 640px) {
   .edge-glass-header {
     padding-left: max(1rem, var(--safe-area-left));
@@ -693,11 +667,6 @@ summary::-webkit-details-marker {
     width: 3.3rem;
   }
 
-  .answer-footer-search-mic {
-    height: 3.3rem;
-    width: 3.3rem;
-  }
-
   .answer-footer-search-divider {
     display: block;
   }
@@ -855,72 +824,108 @@ summary::-webkit-details-marker {
   }
 }
 
-/* Scroll and print helpers */
-.citation-link {
-  position: relative;
-}
+/*
+ * Helper classes with no same-property utility conflicts at any call site
+ * live in @layer components so Tailwind utilities can override them.
+ * Audited 2026-07-02: the chrome classes above (edge-glass-header,
+ * universal-header-*, answer-footer-search-*, *-composer-edge,
+ * desktop-home-search-*) DO conflict with call-site utilities and stay
+ * unlayered deliberately — layering them changes rendered pixels. When
+ * adding a utility to an element carrying one of those classes, check the
+ * class body first; the class wins.
+ */
+@layer components {
+  .app-edge-backdrop {
+    background: var(--background);
+  }
 
-.citation-link::after {
-  content: "";
-  position: absolute;
-  top: -10px;
-  bottom: -10px;
-  left: -10px;
-  right: -10px;
-}
+  .mobile-app-shell {
+    min-height: 100svh;
+    height: 100svh;
+  }
 
-/* Premium Skeleton Shimmer animation with custom easing */
-.animate-skeleton-shimmer {
-  animation: skeleton-pulse 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
-}
+  .mobile-popover-scroll {
+    max-height: min(70svh, 28rem);
+  }
 
-@keyframes skeleton-pulse {
-  0%,
-  100% {
-    opacity: 1;
+  @supports (height: 100dvh) {
+    .mobile-app-shell {
+      min-height: 100dvh;
+      height: 100dvh;
+    }
+
+    .mobile-popover-scroll {
+      max-height: min(70dvh, 28rem);
+    }
   }
-  50% {
-    opacity: 0.35;
+
+  /* Scroll and print helpers */
+  .citation-link {
+    position: relative;
   }
-}
 
-/* Premium Double-Ring Focus style */
-.focus-ring-premium {
-  outline: none;
-}
-.focus-ring-premium:focus-visible {
-  outline: 2px solid var(--focus) !important;
-  outline-offset: 2px !important;
-  box-shadow: 0 0 0 4px color-mix(in srgb, var(--focus) 25%, transparent) !important;
-}
+  .citation-link::after {
+    content: "";
+    position: absolute;
+    top: -10px;
+    bottom: -10px;
+    left: -10px;
+    right: -10px;
+  }
 
-/* Premium Hover Transitions for Source Capsules and Action row chips */
-.source-capsule-hover {
-  transition: all 180ms cubic-bezier(0.34, 1.56, 0.64, 1) !important;
-}
+  /* Premium Skeleton Shimmer animation with custom easing */
+  .animate-skeleton-shimmer {
+    animation: skeleton-pulse 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
+  }
 
-.source-capsule-hover:hover {
-  transform: translateY(-1px) scale(1.015) !important;
-  box-shadow: 0 4px 12px color-mix(in srgb, var(--primary) 8%, transparent) !important;
-}
+  /* Premium Double-Ring Focus style */
+  .focus-ring-premium {
+    outline: none;
+  }
+  .focus-ring-premium:focus-visible {
+    outline: 2px solid var(--focus) !important;
+    outline-offset: 2px !important;
+    box-shadow: 0 0 0 4px color-mix(in srgb, var(--focus) 25%, transparent) !important;
+  }
 
-.polished-scroll {
-  scrollbar-color: color-mix(in srgb, var(--border-strong) 80%, transparent) transparent;
-  scrollbar-width: thin;
-}
+  /* Premium Hover Transitions for Source Capsules and Action row chips */
+  .source-capsule-hover {
+    transition: all 180ms cubic-bezier(0.34, 1.56, 0.64, 1) !important;
+  }
 
-.polished-scroll::-webkit-scrollbar {
-  height: 0.5rem;
-  width: 0.5rem;
-}
+  .source-capsule-hover:hover {
+    transform: translateY(-1px) scale(1.015) !important;
+    box-shadow: 0 4px 12px color-mix(in srgb, var(--primary) 8%, transparent) !important;
+  }
 
-.polished-scroll::-webkit-scrollbar-thumb {
-  background: color-mix(in srgb, var(--border-strong) 72%, transparent);
-  border-radius: 999px;
+  .polished-scroll {
+    scrollbar-color: color-mix(in srgb, var(--border-strong) 80%, transparent) transparent;
+    scrollbar-width: thin;
+  }
+
+  .polished-scroll::-webkit-scrollbar {
+    height: 0.5rem;
+    width: 0.5rem;
+  }
+
+  .polished-scroll::-webkit-scrollbar-thumb {
+    background: color-mix(in srgb, var(--border-strong) 72%, transparent);
+    border-radius: 999px;
+  }
+
+  .polished-scroll::-webkit-scrollbar-track {
+    background: transparent;
+  }
 }
 
-.polished-scroll::-webkit-scrollbar-track {
-  background: transparent;
+@keyframes skeleton-pulse {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.35;
+  }
 }
 
 /* User preference and alternate output modes */
diff --git a/src/components/DocumentViewer.tsx b/src/components/DocumentViewer.tsx
index 79d6a77e08..b2ffbf54ea 100644
--- a/src/components/DocumentViewer.tsx
+++ b/src/components/DocumentViewer.tsx
@@ -19,7 +19,6 @@ import {
   Maximize2,
   Menu,
   Minimize2,
-  Mic,
   Minus,
   Plus,
   Quote,
@@ -362,7 +361,9 @@ function DocumentImage({ image }: { image: ImageRow }) {
   const showImageCaptionLine = cleanCaption && cleanCaption !== tableCaption;
   const displayLabels = smartEvidenceTags(
     image.labels,
-    [tableHeading, cleanCaption, image.tableTextSnippet ? sourceTextForCompactDisplay(image.tableTextSnippet) : null].filter(Boolean).join(" "),
+    [tableHeading, cleanCaption, image.tableTextSnippet ? sourceTextForCompactDisplay(image.tableTextSnippet) : null]
+      .filter(Boolean)
+      .join(" "),
   );
 
   return (
@@ -2967,13 +2968,6 @@ export function DocumentViewer({
               className="min-h-[44px] min-w-0 flex-1 bg-transparent px-2 text-base font-medium text-[color:var(--text)] outline-none placeholder:text-[color:var(--text-soft)]"
             />
           </label>
-          <button
-            type="button"
-            className="grid h-[44px] w-[44px] shrink-0 place-items-center rounded-full text-[color:var(--text-muted)] hover:bg-[color:var(--surface-subtle)] hover:text-[color:var(--text)]"
-            aria-label="Voice input"
-          >
-            <Mic className="h-4.5 w-4.5" />
-          </button>
           <button
             type="submit"
             disabled={!canSummarizeDocument}
diff --git a/src/components/applications-launcher-page.tsx b/src/components/applications-launcher-page.tsx
index 09dfe72719..55ccaea81e 100644
--- a/src/components/applications-launcher-page.tsx
+++ b/src/components/applications-launcher-page.tsx
@@ -10,7 +10,6 @@ import {
   FileText,
   Grid2X2,
   Globe2,
-  Mic,
   Menu,
   MoreVertical,
   Pill,
@@ -1065,15 +1064,6 @@ export function ApplicationsLauncherWorkspace({
                 className={cn(chatComposerInput, "w-full min-w-0")}
               />
             </label>
-            <button
-              type="button"
-              className={cn(chatComposerIconButton, "disabled:cursor-not-allowed")}
-              aria-label="Voice input unavailable"
-              title="Voice input unavailable"
-              disabled
-            >
-              <Mic className="h-4.5 w-4.5" />
-            </button>
             <button
               type="submit"
               disabled={filteredApps.length === 0}
diff --git a/src/components/clinical-dashboard/master-search-header.tsx b/src/components/clinical-dashboard/master-search-header.tsx
index edb951a9bf..3e2df80ff8 100644
--- a/src/components/clinical-dashboard/master-search-header.tsx
+++ b/src/components/clinical-dashboard/master-search-header.tsx
@@ -28,7 +28,6 @@ import {
   Loader2,
   Menu,
   MessageSquarePlus,
-  Mic,
   Moon,
   MoreHorizontal,
   Pill,
@@ -923,14 +922,6 @@ export function MasterSearchHeader({
               </button>
             )}
           </label>
-          <button
-            type="button"
-            className={cn(chatComposerIconButton, usesUniversalFooterStyle && "answer-footer-search-mic")}
-            aria-label="Voice input"
-            title="Voice input"
-          >
-            <Mic className="h-4.5 w-4.5" />
-          </button>
           {usesUniversalFooterStyle ? <span className="answer-footer-search-divider" aria-hidden="true" /> : null}
           <button
             type="submit"
diff --git a/src/components/forms/forms-search-results-page.tsx b/src/components/forms/forms-search-results-page.tsx
index 711de4798e..91827b494f 100644
--- a/src/components/forms/forms-search-results-page.tsx
+++ b/src/components/forms/forms-search-results-page.tsx
@@ -13,7 +13,6 @@ import {
   FileText,
   Home,
   Menu,
-  Mic,
   Moon,
   MoreVertical,
   Plus,
@@ -794,10 +793,9 @@ function BottomSearch({
           <input
             value={query}
             onChange={(event) => onQueryChange(event.target.value)}
-            className="h-12 w-full rounded-full border border-[color:var(--border)] bg-[color:var(--surface)] px-5 pr-20 text-sm font-medium text-[color:var(--text)] outline-none focus:border-[color:var(--clinical-accent)] focus:ring-4 focus:ring-[color:var(--clinical-accent)]/12"
+            className="h-12 w-full rounded-full border border-[color:var(--border)] bg-[color:var(--surface)] px-5 pr-12 text-sm font-medium text-[color:var(--text)] outline-none focus:border-[color:var(--clinical-accent)] focus:ring-4 focus:ring-[color:var(--clinical-accent)]/12"
             placeholder="Ask or search forms..."
           />
-          <Mic className="absolute right-12 top-1/2 h-5 w-5 -translate-y-1/2 text-[color:var(--text-muted)]" />
           {query ? (
             <button
               type="button"
diff --git a/src/lib/clinical-search.ts b/src/lib/clinical-search.ts
index d144e4f9aa..b1c08294ae 100644
--- a/src/lib/clinical-search.ts
+++ b/src/lib/clinical-search.ts
@@ -1410,7 +1410,8 @@ export function clinicalRankExplanation(query: string, result: SearchResult): Se
   // the same result.
   const nextStepActionQuery = /\b(?:next step|step after|action)\b/i.test(query);
   const riskFlowchartSource = nextStepActionQuery
-    ? riskFlowchartZoneActionSource || (riskFlowchartLexicalSource && riskZoneActionPattern.test(riskFlowchartEvidenceText))
+    ? riskFlowchartZoneActionSource ||
+      (riskFlowchartLexicalSource && riskZoneActionPattern.test(riskFlowchartEvidenceText))
     : riskFlowchartLexicalSource || riskFlowchartZoneActionSource;
   const riskFlowchartCanonicalTitle =
     riskFlowchartQuery &&
diff --git a/src/lib/rag.ts b/src/lib/rag.ts
index ce6fbaf59d..8097e29722 100644
--- a/src/lib/rag.ts
+++ b/src/lib/rag.ts
@@ -3308,7 +3308,10 @@ function hasRiskFlowchartActionEvidence(query: string, results: SearchResult[],
     const evidenceText = evidenceTextForGate(result);
     if (!riskZoneActionPattern.test(evidenceText)) return false;
     if (zonePhrasePattern.test(evidenceText)) return true;
-    return ["risk_matrix_cell", "flowchart_step", "diagram_decision"].includes(result.index_unit?.unit_type ?? "") && bareColourPattern.test(evidenceText);
+    return (
+      ["risk_matrix_cell", "flowchart_step", "diagram_decision"].includes(result.index_unit?.unit_type ?? "") &&
+      bareColourPattern.test(evidenceText)
+    );
   });
 }
 
diff --git a/tests/retrieval-query-variants.test.ts b/tests/retrieval-query-variants.test.ts
index 544cfe0fbb..755cfbddf7 100644
--- a/tests/retrieval-query-variants.test.ts
+++ b/tests/retrieval-query-variants.test.ts
@@ -370,13 +370,15 @@ describe("retrieval query variants", () => {
         "In the risk matrix flowchart, what action is shown after red-zone risk?",
         [
           result({
-            content: "Aggression risk matrix | Physical aggression | Recent incident | Red | Escalate to senior clinician urgently",
+            content:
+              "Aggression risk matrix | Physical aggression | Recent incident | Red | Escalate to senior clinician urgently",
             similarity: 0.82,
             index_unit: {
               id: "unit-rm",
               unit_type: "risk_matrix_cell",
               title: "Physical aggression / Recent incident: Red",
-              content: "Aggression risk matrix | Physical aggression | Recent incident | Red | Escalate to senior clinician urgently",
+              content:
+                "Aggression risk matrix | Physical aggression | Recent incident | Red | Escalate to senior clinician urgently",
               source_chunk_id: "chunk-1",
               source_image_id: "image-1",
               page_start: 1,
@@ -399,13 +401,15 @@ describe("retrieval query variants", () => {
         "In the risk-matrix flowchart, what action is shown after red-zone risk?",
         [
           result({
-            content: "Aggression risk matrix | Physical aggression | Recent incident | Red | Escalate to senior clinician urgently",
+            content:
+              "Aggression risk matrix | Physical aggression | Recent incident | Red | Escalate to senior clinician urgently",
             similarity: 0.82,
             index_unit: {
               id: "unit-rm-hyphen",
               unit_type: "risk_matrix_cell",
               title: "Physical aggression / Recent incident: Red",
-              content: "Aggression risk matrix | Physical aggression | Recent incident | Red | Escalate to senior clinician urgently",
+              content:
+                "Aggression risk matrix | Physical aggression | Recent incident | Red | Escalate to senior clinician urgently",
               source_chunk_id: "chunk-1",
               source_image_id: "image-1",
               page_start: 1,
diff --git a/tests/ui-overlap.spec.ts b/tests/ui-overlap.spec.ts
new file mode 100644
index 0000000000..89a7f20d38
--- /dev/null
+++ b/tests/ui-overlap.spec.ts
@@ -0,0 +1,117 @@
+import { expect, test, type Page } from "playwright/test";
+
+/**
+ * Element-overlap regression coverage.
+ *
+ * The page-overflow smoke checks only assert document-level horizontal
+ * overflow, which overlapping siblings never trigger. This header bug class
+ * shipped three separate times (source ledger under the mode pill, the
+ * composer clear button over typed text, and the standalone-home status chips
+ * under the pill), so these tests assert directly that visible header
+ * elements do not stack on top of each other at any supported width, and
+ * that the composer clear button occupies its own slot.
+ */
+
+const headerWidths = [640, 768, 1024, 1152, 1280, 1366, 1440, 1536] as const;
+
+const readySetupChecks = [
+  { id: "env", label: ".env.local configured", status: "ready", detail: "Test environment ready." },
+  { id: "project", label: "Clinical KB Database target", status: "ready", detail: "Test Supabase project ready." },
+  { id: "schema", label: "supabase/schema.sql applied", status: "ready", detail: "Test schema ready." },
+  { id: "search", label: "Search RPC and vector indexes", status: "ready", detail: "Test search schema ready." },
+  { id: "openai", label: "OpenAI API key available", status: "ready", detail: "Test OpenAI ready." },
+  { id: "worker", label: "npm run worker running", status: "unknown", detail: "Worker not required for UI smoke." },
+];
+
+async function mockSetupStatus(page: Page) {
+  await page.route("**/api/setup-status**", async (route) => {
+    await route.fulfill({ json: { demoMode: true, checks: readySetupChecks } });
+  });
+}
+
+async function gotoHome(page: Page) {
+  await page.goto("/", { waitUntil: "domcontentloaded" });
+  await page.waitForLoadState("networkidle", { timeout: 15_000 }).catch(() => undefined);
+}
+
+type OverlapReport = { count: number; overlaps: string[] };
+
+async function collectHeaderOverlaps(page: Page): Promise<OverlapReport> {
+  return page.evaluate(() => {
+    const header = document.querySelector("header#search");
+    if (!header) return { count: 0, overlaps: ["header#search not found"] };
+    // Interactive controls plus the styled status chips (spans) that sit
+    // alongside them; nested elements are excluded via the contains() check.
+    const candidates = Array.from(
+      header.querySelectorAll("button, summary, a, div > span.inline-flex, div > span.grid"),
+    ).filter((element) => {
+      const rect = element.getBoundingClientRect();
+      return rect.width > 0 && rect.height > 0;
+    });
+    const overlaps: string[] = [];
+    const label = (element: Element) =>
+      element.getAttribute("aria-label") ?? (element.textContent ?? "").trim().slice(0, 24);
+    for (let i = 0; i < candidates.length; i++) {
+      for (let j = i + 1; j < candidates.length; j++) {
+        const a = candidates[i].getBoundingClientRect();
+        const b = candidates[j].getBoundingClientRect();
+        const xOverlap = Math.min(a.right, b.right) - Math.max(a.left, b.left);
+        const yOverlap = Math.min(a.bottom, b.bottom) - Math.max(a.top, b.top);
+        const nested = candidates[i].contains(candidates[j]) || candidates[j].contains(candidates[i]);
+        // 4px tolerance ignores subpixel rounding and intentional edge kisses.
+        if (xOverlap > 4 && yOverlap > 4 && !nested) {
+          overlaps.push(
+            `"${label(candidates[i])}" overlaps "${label(candidates[j])}" by ${Math.round(Math.min(xOverlap, yOverlap))}px`,
+          );
+        }
+      }
+    }
+    return { count: candidates.length, overlaps };
+  });
+}
+
+test.describe("Header element overlap coverage", () => {
+  for (const width of headerWidths) {
+    test(`header controls do not overlap at ${width}px`, async ({ page }) => {
+      await page.setViewportSize({ width, height: 900 });
+      await mockSetupStatus(page);
+      await gotoHome(page);
+
+      const report = await collectHeaderOverlaps(page);
+      expect(report.count, "expected at least the mode pill and one control in the header").toBeGreaterThanOrEqual(2);
+      expect(report.overlaps, `overlapping header elements at ${width}px`).toEqual([]);
+    });
+  }
+
+  for (const viewport of [
+    { name: "mobile", width: 390, height: 820 },
+    { name: "desktop", width: 1280, height: 900 },
+  ] as const) {
+    test(`composer clear button does not cover typed text at ${viewport.name}`, async ({ page }) => {
+      await page.setViewportSize({ width: viewport.width, height: viewport.height });
+      await mockSetupStatus(page);
+      await gotoHome(page);
+
+      const input = page.locator('[data-testid="global-search-input"]:visible').first();
+      await input.fill("Synthetic lithium monitoring guidance question");
+
+      const clearButton = page.locator('[aria-label="Clear search question"]:visible').first();
+      await expect(clearButton).toBeVisible();
+
+      const geometry = await page.evaluate(() => {
+        const inputElement = document.querySelector('[data-testid="global-search-input"]');
+        const clearElement = document.querySelector('[aria-label="Clear search question"]');
+        if (!inputElement || !clearElement) return null;
+        const inputRect = inputElement.getBoundingClientRect();
+        const clearRect = clearElement.getBoundingClientRect();
+        return { inputRight: inputRect.right, clearLeft: clearRect.left };
+      });
+
+      expect(geometry, "input and clear button must both render").not.toBeNull();
+      expect(
+        geometry!.inputRight,
+        "the input must end before the clear button starts (no text under the button)",
+      ).toBeLessThanOrEqual(geometry!.clearLeft + 1);
+    });
+  }
+});