From 5445bfc1f19e844131b6ff4e1fdca901ded1854e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marc-Andr=C3=A9=20Bombeck?= <mbombeck@gmail.com>
Date: Fri, 7 Aug 2026 19:05:15 +0200
Subject: [PATCH] refactor(ui): give Settings and Admin one card rhythm and one
 page header
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The two consoles used the same primitives and still read as two systems,
because everything without a primitive had drifted: the header-to-body
step existed in three competing techniques at once (`mt-4` on the first
body child, `space-y-4` on the card, `mb-4` on the header), the body
started either at the card edge or 28 px in, and both shells hand-rolled
the page title instead of calling `PageHeader`.

Move the decisions into the primitives so a call site cannot re-open them:

- `SettingsCard` is gap-based like `Card` (`flex flex-col gap-4`). The
  header-to-body step is the container's, not a margin somebody remembers.
  A dense card still overrides the gap on the card itself.
- The body starts at the card edge. `pl-7` is gone — off the spacing scale,
  and it mis-aligned action rows against their own forms wherever two
  neighbouring cards disagreed about it.
- The card header's description slot loses its `space-y-1`. That was the
  licence call sites used to stack explainer paragraphs into a muted
  `text-xs` slot; the slot holds one sentence.
- New `SettingsCardActions`: one action row, trailing edge, last thing in
  the card. `align="start"` spells the one exception, a card whose only
  actions are links out.
- New `StatTile` replaces four hand-rolled label/value boxes in Admin.
- `SectionHeading` moves from `insights/` to `ui/`. It is the heading above
  a group of cards, which is what Settings needs; Settings had been using a
  card header with no card, which reads as a card that failed to paint.

Both shells now render their heading through `PageHeader`, which gained
`headingAs="div"` for the second copy each shell paints (mobile above the
nav strip, desktop inside the grid) so only one is a real `<h1>`. The
page explainer is muted everywhere: the primitive said foreground, the
standards and every hand-rolled copy said muted, so pages disagreed with
each other. Medications, Vorsorge, the labs / custom-metric / illness
detail pages and the clinician view drop their hand-rolled title blocks
too, including the mid-word truncation on the medications subtitle.

Tests pin the parts that can be checked exactly: the card's gap, the
description slot's missing rhythm, the action row's two alignments, the
`<h1>`-free shells, and a sweep asserting `pl-7` stays gone.
---
 src/app/medications/page-client.tsx           | 142 +++++++-------
 src/components/admin/_stat-tile.tsx           |  43 +++++
 src/components/admin/admin-shell.tsx          |  23 +--
 src/components/admin/ai-quality-section.tsx   |   2 +-
 .../admin/ai-server-key-section.tsx           |   2 +-
 .../admin/api-token-overview-section.tsx      |   2 +-
 .../admin/app-log-preview-section.tsx         |   4 +-
 src/components/admin/assistant-section.tsx    |   2 +-
 src/components/admin/backups-section.tsx      |  19 +-
 .../admin/central-codex-section.tsx           |   2 +-
 .../admin/coach-feedback-section.tsx          |   2 +-
 src/components/admin/danger-zone-section.tsx  |   2 +-
 src/components/admin/encryption-section.tsx   |   6 +-
 .../admin/general-settings-section.tsx        |   2 +-
 src/components/admin/glitchtip-section.tsx    |   4 +-
 src/components/admin/host-metrics-chart.tsx   |   2 +-
 .../admin/invite-tokens-section.tsx           |   4 +-
 .../admin/login-overview-section.tsx          |   2 +-
 .../admin/module-availability-section.tsx     |   2 +-
 src/components/admin/recent-audit-preview.tsx |   2 +-
 src/components/admin/reminders-section.tsx    |  10 +-
 src/components/admin/services-section.tsx     |   2 +-
 .../admin/system-status-section.tsx           |  12 +-
 .../admin/system-status-summary.tsx           |   6 +-
 src/components/admin/umami-section.tsx        |   4 +-
 .../admin/user-management-section.tsx         |  12 +-
 src/components/admin/version-tile-section.tsx |   2 +-
 .../admin/web-push-vapid-section.tsx          |   4 +-
 src/components/clinician/clinician-view.tsx   |  10 +-
 .../custom-metrics/custom-metric-detail.tsx   | 126 ++++++-------
 .../cycle/cycle-insight-summary-card.tsx      |   2 +-
 .../illness/illness-episode-detail.tsx        |  67 +++----
 src/components/illness/illness-settings.tsx   |   4 +-
 .../insights/breathing-screening-card.tsx     |   2 +-
 .../insights/coincident-deviation-card.tsx    |   2 +-
 src/components/insights/daily-briefing.tsx    |   2 +-
 .../insights/derived/vitals-dashboard.tsx     |   2 +-
 .../insights/derived/wellness-scores.tsx      |   2 +-
 src/components/insights/device-score-tile.tsx |   2 +-
 src/components/insights/ecg-section.tsx       |   2 +-
 .../insights/health-status-card.tsx           |   2 +-
 src/components/insights/labs-changes-card.tsx |   2 +-
 .../insights/period-narrative-card.tsx        |   2 +-
 .../insights/rhythm-events-card.tsx           |   2 +-
 .../insights/sleep/sleep-quality-section.tsx  |   2 +-
 src/components/insights/trends-row.tsx        |   2 +-
 .../insights/workout-detail/day-context.tsx   |   2 +-
 src/components/labs/lab-biomarker-detail.tsx  | 158 ++++++++--------
 src/components/labs/labs-settings.tsx         |  10 +-
 .../vorsorge-section.tsx                      |  32 ++--
 .../vorsorge-settings.tsx                     |   4 +-
 .../__tests__/one-piece-anatomy.test.tsx      | 173 ++++++++++++++++++
 src/components/settings/_card-actions.tsx     |  46 +++++
 src/components/settings/_card-header.tsx      |  17 +-
 src/components/settings/about-me-section.tsx  |  11 +-
 src/components/settings/about-section.tsx     |   8 +-
 .../settings/access/grant-invite-card.tsx     |   2 +-
 .../settings/access/grants-given-card.tsx     |   2 +-
 .../settings/access/grants-received-card.tsx  |   2 +-
 .../settings/access/managed-profile-card.tsx  |   2 +-
 .../settings/access/record-activity-card.tsx  |   2 +-
 .../account-section/avatar-section.tsx        |  10 +-
 .../settings/account-section/index.tsx        |   8 +-
 src/components/settings/advanced-section.tsx  |   6 +-
 .../settings/ai/ai-insights-card.tsx          |   6 +-
 .../settings/ai/disable-coach-card.tsx        |   4 +-
 src/components/settings/anamnesis-section.tsx |  10 +-
 src/components/settings/api-section.tsx       |   6 +-
 .../settings/coach-memory-section.tsx         |   1 -
 src/components/settings/coach-nudge-card.tsx  |   8 +-
 .../settings/coach-prefs-section.tsx          |   9 +-
 .../settings/coach-reminders-section.tsx      |   1 -
 .../settings/cycle-tracking-card.tsx          |   2 +-
 .../settings/dashboard-layout-section.tsx     |   2 +-
 src/components/settings/email-card.tsx        |   2 +-
 .../settings/environment-section.tsx          |  22 +--
 src/components/settings/export-section.tsx    |   4 +-
 .../settings/glucose-reference-card.tsx       |   2 +-
 .../import-panel/import-card-shell.tsx        |   2 +-
 .../settings/injection-sites-card.tsx         |   2 +-
 .../settings/insights-pill-order-section.tsx  |   1 -
 .../integrations/apple-health-card.tsx        |   7 +-
 .../settings/integrations/fitbit-card.tsx     |   7 +-
 .../integrations/google-health-card.tsx       |   7 +-
 .../integrations/integration-fallback-row.tsx |   2 +-
 .../settings/integrations/nightscout-card.tsx |   7 +-
 .../integrations/oauth-provider-card.tsx      |   7 +-
 .../settings/integrations/whoop-card.tsx      |   7 +-
 .../settings/integrations/withings-card.tsx   |   7 +-
 src/components/settings/low-stock-card.tsx    |  10 +-
 .../settings/managed-integration-status.tsx   |   2 +-
 .../managed-record-settings-section.tsx       |   2 +-
 src/components/settings/mcp-section.tsx       |   6 +-
 .../settings/medications-section.tsx          |   4 +-
 src/components/settings/modules-section.tsx   |   2 +-
 .../settings/mood-reminder-card.tsx           |   6 +-
 src/components/settings/mood-section.tsx      |   6 +-
 .../settings/notification-status-card.tsx     |   2 +-
 src/components/settings/ntfy-card.tsx         |   2 +-
 .../settings/nutrient-intake-card.tsx         |   5 +-
 src/components/settings/privacy-section.tsx   |  22 +--
 .../settings/record-anamnesis-section.tsx     |   4 +-
 .../report-selection/selection-panel.tsx      |   1 -
 .../settings/score-change-notice.tsx          |   1 -
 src/components/settings/score-section.tsx     |  17 +-
 .../settings/security-activity-card.tsx       |   2 +-
 .../security-section/passkey-list-section.tsx |   2 +-
 .../security-section/security-keys-card.tsx   |   2 +-
 .../settings/security-section/totp-card.tsx   |   2 +-
 .../settings/security-sessions-card.tsx       |   2 +-
 src/components/settings/settings-card.tsx     |  23 ++-
 src/components/settings/settings-shell.tsx    |  50 ++---
 src/components/settings/sharing-section.tsx   |   2 +-
 src/components/settings/sources-section.tsx   |   2 +-
 src/components/settings/telegram-card.tsx     |   2 +-
 .../settings/thresholds-editor-section.tsx    |   2 +-
 .../settings/trusted-devices-card.tsx         |   3 +-
 src/components/settings/web-push-card.tsx     |   2 +-
 src/components/settings/webhook-card.tsx      |   2 +-
 src/components/ui/page-header.tsx             |  53 +++++-
 .../{insights => ui}/section-heading.tsx      |  23 ++-
 121 files changed, 832 insertions(+), 620 deletions(-)
 create mode 100644 src/components/admin/_stat-tile.tsx
 create mode 100644 src/components/settings/__tests__/one-piece-anatomy.test.tsx
 create mode 100644 src/components/settings/_card-actions.tsx
 rename src/components/{insights => ui}/section-heading.tsx (78%)

diff --git a/src/app/medications/page-client.tsx b/src/app/medications/page-client.tsx
index d7dc51dd4..0cc5afb05 100644
--- a/src/app/medications/page-client.tsx
+++ b/src/app/medications/page-client.tsx
@@ -33,6 +33,7 @@ import {
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { EmptyState } from "@/components/ui/empty-state";
+import { PageHeader } from "@/components/ui/page-header";
 import { QueryErrorCard } from "@/components/ui/query-error-card";
 import { Skeleton } from "@/components/ui/skeleton";
 import {
@@ -359,14 +360,10 @@ export default function MedicationsPageClient() {
   if (!isAuthenticated) {
     return (
       <div className="space-y-6">
-        <div className="space-y-1">
-          <h1 className="text-2xl font-bold tracking-tight">
-            {t("medications.title")}
-          </h1>
-          <p className="text-muted-foreground text-sm">
-            {t("medications.loginRequired")}
-          </p>
-        </div>
+        <PageHeader
+          title={t("medications.title")}
+          description={t("medications.loginRequired")}
+        />
       </div>
     );
   }
@@ -407,90 +404,83 @@ export default function MedicationsPageClient() {
   return (
     <div className="space-y-6">
       <PullToRefreshIndicator {...pull} />
-      <div className="flex items-start justify-between gap-3">
-        <div className="min-w-0 space-y-1">
-          <h1
-            data-tour-id="medications-hero"
-            className="text-2xl font-bold tracking-tight"
-          >
-            {t("medications.title")}
-          </h1>
-          {/* v1.4.34 IW-G — subtitle stays visible on mobile so the
-              H1 isn't an unframed label. */}
-          <p className="text-muted-foreground truncate text-xs sm:text-sm">
-            {t("medications.subtitle")}
-          </p>
-        </div>
-        <div className="flex shrink-0 items-center gap-2">
-          {/* v1.16.11 (#316) — "Alle fälligen einnehmen". Contextual, not a
+      <PageHeader
+        title={
+          <span data-tour-id="medications-hero">{t("medications.title")}</span>
+        }
+        description={t("medications.subtitle")}
+        actions={
+          <>
+            {/* v1.16.11 (#316) — "Alle fälligen einnehmen". Contextual, not a
               permanent fixture: it renders only while at least TWO
               medications are currently due (a single due dose is the
               card's own one-tap job). Calm outline variant so the primary
               Add button keeps the visual lead; same responsive 44-px
               mobile tap floor as its neighbours. */}
-          {canAdd && dueMeds.length >= 2 && (
-            <Button
-              variant="outline"
-              onClick={() => setTakeAllOpen(true)}
-              className="min-h-11 sm:min-h-9"
-            >
-              <CheckCheck className="h-4 w-4" aria-hidden="true" />
-              {t("medications.takeAllDue.button")}
-            </Button>
-          )}
-          {/* v1.16.11 — the wrench is the one customize entry point:
+            {canAdd && dueMeds.length >= 2 && (
+              <Button
+                variant="outline"
+                onClick={() => setTakeAllOpen(true)}
+                className="min-h-11 sm:min-h-9"
+              >
+                <CheckCheck className="h-4 w-4" aria-hidden="true" />
+                {t("medications.takeAllDue.button")}
+              </Button>
+            )}
+            {/* v1.16.11 — the wrench is the one customize entry point:
               it links to /settings/medications, which owns the view
               preference (cards ⇄ table) and the manual-order editor.
               Same glyph, slot (left of the add button) and responsive
               44-px mobile tap floor as the dashboard and insights
               headers. */}
-          {canManage && (
-            <Button
-              asChild
-              variant="ghost"
-              size="icon"
-              className="min-h-11 min-w-11 sm:min-h-9 sm:min-w-9"
-            >
-              <Link
-                href="/settings/layout/medications"
-                aria-label={t("medications.customize")}
-                title={t("medications.customize")}
+            {canManage && (
+              <Button
+                asChild
+                variant="ghost"
+                size="icon"
+                className="min-h-11 min-w-11 sm:min-h-9 sm:min-w-9"
               >
-                <Wrench className="h-4 w-4" aria-hidden="true" />
-              </Link>
-            </Button>
-          )}
-          {/* v1.14.0 — the "Add" button is now a choice: log an intake
+                <Link
+                  href="/settings/layout/medications"
+                  aria-label={t("medications.customize")}
+                  title={t("medications.customize")}
+                >
+                  <Wrench className="h-4 w-4" aria-hidden="true" />
+                </Link>
+              </Button>
+            )}
+            {/* v1.14.0 — the "Add" button is now a choice: log an intake
               (incl. a backdated one) against an existing medication, or
               create a new medication. v1.12.2 — match the dashboard Add
               button's responsive tap-target floor (`min-h-11 sm:min-h-9`) so
               both primary "add" entry points clear the WCAG 2.5.5 44px mobile
               minimum identically. */}
-          {canAdd && (
-            <DropdownMenu>
-              <DropdownMenuTrigger asChild>
-                <Button className="min-h-11 sm:min-h-9">
-                  <Plus className="h-4 w-4" />
-                  {t("medications.addMedication")}
-                </Button>
-              </DropdownMenuTrigger>
-              <DropdownMenuContent align="end">
-                <DropdownMenuItem
-                  onSelect={() => setLogIntakeOpen(true)}
-                  disabled={activeMeds.length === 0}
-                >
-                  <CheckCircle2 className="mr-2 h-4 w-4" />
-                  {t("medications.addChoice.logIntake")}
-                </DropdownMenuItem>
-                <DropdownMenuItem onSelect={openCreate}>
-                  <Pill className="mr-2 h-4 w-4" />
-                  {t("medications.addChoice.newMedication")}
-                </DropdownMenuItem>
-              </DropdownMenuContent>
-            </DropdownMenu>
-          )}
-        </div>
-      </div>
+            {canAdd && (
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <Button className="min-h-11 sm:min-h-9">
+                    <Plus className="h-4 w-4" />
+                    {t("medications.addMedication")}
+                  </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="end">
+                  <DropdownMenuItem
+                    onSelect={() => setLogIntakeOpen(true)}
+                    disabled={activeMeds.length === 0}
+                  >
+                    <CheckCircle2 className="mr-2 h-4 w-4" />
+                    {t("medications.addChoice.logIntake")}
+                  </DropdownMenuItem>
+                  <DropdownMenuItem onSelect={openCreate}>
+                    <Pill className="mr-2 h-4 w-4" />
+                    {t("medications.addChoice.newMedication")}
+                  </DropdownMenuItem>
+                </DropdownMenuContent>
+              </DropdownMenu>
+            )}
+          </>
+        }
+      />
 
       {isLoading || isLayoutLoading ? (
         // v1.11.3 C4 — skeletons instead of a bare centred spinner so the
diff --git a/src/components/admin/_stat-tile.tsx b/src/components/admin/_stat-tile.tsx
new file mode 100644
index 000000000..de52cf4ed
--- /dev/null
+++ b/src/components/admin/_stat-tile.tsx
@@ -0,0 +1,43 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+/**
+ * `<StatTile>` — the one label/value mini tile in the Admin console.
+ *
+ * Four hand-rolled variants of this box existed side by side: `StatusItem`
+ * (`bg-muted/50 p-3`), the encryption section's local `Stat`
+ * (`bg-muted/40 px-3 py-2`), the user-management inline panels
+ * (`bg-muted/80 p-4`), and the backups upload box (`bg-muted/30 p-3`). Four
+ * fills, three paddings, one role. This is the role.
+ *
+ * `icon` is optional — a tile with a glyph and one without still share the
+ * frame, so a grid can mix them without a step in tile height.
+ */
+export function StatTile({
+  icon: Icon,
+  label,
+  value,
+  valueClassName,
+  className,
+}: {
+  icon?: React.ComponentType<{ className?: string }>;
+  label: React.ReactNode;
+  value: React.ReactNode;
+  /** Extra classes on the value line — a status colour, or `font-mono`. */
+  valueClassName?: string;
+  className?: string;
+}) {
+  return (
+    <div
+      data-slot="stat-tile"
+      className={cn("bg-muted/50 space-y-1 rounded-lg p-3", className)}
+    >
+      <div className="text-muted-foreground flex items-center gap-1.5 text-xs">
+        {Icon ? <Icon className="size-3.5 shrink-0" /> : null}
+        {label}
+      </div>
+      <p className={cn("text-sm font-semibold", valueClassName)}>{value}</p>
+    </div>
+  );
+}
diff --git a/src/components/admin/admin-shell.tsx b/src/components/admin/admin-shell.tsx
index 9ba3cebad..2961dbb7a 100644
--- a/src/components/admin/admin-shell.tsx
+++ b/src/components/admin/admin-shell.tsx
@@ -37,6 +37,7 @@ import {
 } from "lucide-react";
 
 import { cn } from "@/lib/utils";
+import { PageHeader } from "@/components/ui/page-header";
 import { SUB_SHELL_GRID_FLOOR } from "@/components/layout/shell-metrics";
 import { useAuth } from "@/hooks/use-auth";
 import { useTranslations } from "@/lib/i18n/context";
@@ -253,21 +254,15 @@ export function AdminShell({ active, children }: AdminShellProps) {
       ? t("admin.subtitle")
       : t(`admin.section.${activeSlug}.subtitle`);
 
+  // Same two-copy heading as the Settings shell (mobile above the chip strip,
+  // desktop inside the grid row) and the same primitive, so the two consoles
+  // cannot drift a step apart again.
   const headingBlock = (mobile = false) => (
-    <div>
-      {mobile ? (
-        <div
-          role="heading"
-          aria-level={1}
-          className="text-2xl font-bold tracking-tight"
-        >
-          {headingTitle}
-        </div>
-      ) : (
-        <h1 className="text-2xl font-bold tracking-tight">{headingTitle}</h1>
-      )}
-      <p className="text-muted-foreground text-sm">{headingSubtitle}</p>
-    </div>
+    <PageHeader
+      headingAs={mobile ? "div" : "h1"}
+      title={headingTitle}
+      description={headingSubtitle}
+    />
   );
 
   // v1.4.25 W8 — AuthShell wraps the page in `px-4 py-6 md:px-6`
diff --git a/src/components/admin/ai-quality-section.tsx b/src/components/admin/ai-quality-section.tsx
index 98e31a7a7..57cb8adf4 100644
--- a/src/components/admin/ai-quality-section.tsx
+++ b/src/components/admin/ai-quality-section.tsx
@@ -76,7 +76,7 @@ export function AiQualitySection() {
   // resolves. Mirrors <CoachFeedbackSection> (header outside the
   // fetch-state branch).
   return (
-    <SettingsCard className="space-y-4">
+    <SettingsCard>
       <SettingsCardHeader
         icon={Sparkles}
         title={t("admin.aiQuality.title")}
diff --git a/src/components/admin/ai-server-key-section.tsx b/src/components/admin/ai-server-key-section.tsx
index d21db61b6..1c0e27a02 100644
--- a/src/components/admin/ai-server-key-section.tsx
+++ b/src/components/admin/ai-server-key-section.tsx
@@ -114,7 +114,7 @@ export function AiServerKeySection() {
         }
       />
 
-      <div className="mt-4 space-y-4 pl-7">
+      <div className="space-y-4">
         <div className="space-y-1.5">
           <Label htmlFor="admin-ai-server-key-input">
             {t("admin.aiServerKey.keyLabel")}
diff --git a/src/components/admin/api-token-overview-section.tsx b/src/components/admin/api-token-overview-section.tsx
index 2e7c3d49a..4fc526403 100644
--- a/src/components/admin/api-token-overview-section.tsx
+++ b/src/components/admin/api-token-overview-section.tsx
@@ -160,7 +160,7 @@ export function ApiTokenOverviewSection() {
         description={t("admin.apiTokensDescription")}
       />
 
-      <div className="mt-4">
+      <div>
         {isLoading ? (
           <div className="flex justify-center py-4">
             <Loader2 className="text-muted-foreground h-5 w-5 animate-spin motion-reduce:animate-none" />
diff --git a/src/components/admin/app-log-preview-section.tsx b/src/components/admin/app-log-preview-section.tsx
index dca27cf9f..ab7835630 100644
--- a/src/components/admin/app-log-preview-section.tsx
+++ b/src/components/admin/app-log-preview-section.tsx
@@ -116,7 +116,7 @@ export function AppLogPreviewSection() {
   const events = data?.events ?? [];
 
   return (
-    <SettingsCard className="space-y-4">
+    <SettingsCard>
       <SettingsCardHeader
         icon={FileText}
         title={t("admin.section.app-logs.title")}
@@ -280,7 +280,7 @@ export function AppLogPreviewSection() {
             </table>
           </div>
           <div
-            className="text-muted-foreground mt-3 flex items-center justify-between text-xs"
+            className="text-muted-foreground flex items-center justify-between text-xs"
             data-testid="app-log-preview-summary"
           >
             <span>
diff --git a/src/components/admin/assistant-section.tsx b/src/components/admin/assistant-section.tsx
index 556938bde..ad1dab0c4 100644
--- a/src/components/admin/assistant-section.tsx
+++ b/src/components/admin/assistant-section.tsx
@@ -103,7 +103,7 @@ export function AssistantSection() {
         title={t("admin.assistant.title")}
         description={t("admin.assistant.description")}
       />
-      <div className="mt-4 space-y-4 pl-7">
+      <div className="space-y-4">
         <SettingsToggle
           label={t("admin.assistant.master.title")}
           description={t("admin.assistant.master.description")}
diff --git a/src/components/admin/backups-section.tsx b/src/components/admin/backups-section.tsx
index 2df37779f..c789cda4d 100644
--- a/src/components/admin/backups-section.tsx
+++ b/src/components/admin/backups-section.tsx
@@ -493,13 +493,8 @@ export function BackupsSection() {
 
   return (
     <SettingsCard>
-      {/* v1.18.1 E3 — the snapshot count leads (numbers first), the
-          "Run now" button follows, and the explainer + docs link move
-          into the header's description slot. Previously the description
-          sat in a separate `mt-1 pl-7` paragraph that crowded the button
-          directly above it; routing it through the header's `space-y-1`
-          stack restores breathing room and left-aligns it under the
-          title. */}
+      {/* v1.18.1 E3 — the snapshot count leads (numbers first) and the
+          "Run now" button follows. */}
       <SettingsCardHeader
         icon={Database}
         title={t("admin.section.backups.title")}
@@ -547,7 +542,7 @@ export function BackupsSection() {
           backup file independently of any existing rows. The visible
           button proxies a hidden file input so the layout stays clean
           while keyboard / screen-reader users keep a labelled control. */}
-      <div className="bg-muted/30 border-border mt-4 flex flex-col gap-2 rounded-md border p-3 sm:flex-row sm:items-center sm:justify-between">
+      <div className="bg-muted/30 border-border flex flex-col gap-2 rounded-md border p-3 sm:flex-row sm:items-center sm:justify-between">
         <div>
           <div className="text-sm font-medium">
             {t("admin.section.backups.uploadTitle")}
@@ -596,7 +591,7 @@ export function BackupsSection() {
       ) : null}
 
       {isLoading ? (
-        <div className="mt-4 flex items-center gap-2">
+        <div className="flex items-center gap-2">
           <Loader2 className="text-muted-foreground h-4 w-4 animate-spin motion-reduce:animate-none" />
           <span className="text-muted-foreground text-sm">
             {t("admin.section.backups.loading")}
@@ -605,7 +600,7 @@ export function BackupsSection() {
       ) : isError ? (
         <div
           role="alert"
-          className="text-destructive bg-destructive/10 border-destructive/30 mt-4 rounded-md border px-3 py-2 text-sm"
+          className="text-destructive bg-destructive/10 border-destructive/30 rounded-md border px-3 py-2 text-sm"
         >
           {t("admin.section.backups.loadError")}
         </div>
@@ -614,7 +609,7 @@ export function BackupsSection() {
         // primitive. The header already exposes "Backup now" but a
         // brand-new admin lands inside the card and benefits from a
         // duplicate CTA right next to the explanation.
-        <div className="mt-4">
+        <div>
           <EmptyState
             icon={<Database className="size-6" />}
             title={t("admin.section.backups.emptyTitle")}
@@ -637,7 +632,7 @@ export function BackupsSection() {
           />
         </div>
       ) : (
-        <div className="mt-4">
+        <div>
           {/* Wide layout: the canonical table. Hidden below `md`, where the
               five columns push Download / Restore off-screen behind a
               horizontal scroll; the card list below takes over there. */}
diff --git a/src/components/admin/central-codex-section.tsx b/src/components/admin/central-codex-section.tsx
index 258b6eb45..0ab2a8738 100644
--- a/src/components/admin/central-codex-section.tsx
+++ b/src/components/admin/central-codex-section.tsx
@@ -166,7 +166,7 @@ export function CentralCodexSection() {
         }
       />
 
-      <div className="mt-4 space-y-4 pl-7">
+      <div className="space-y-4">
         <div className="text-muted-foreground flex items-start gap-2 text-xs">
           <ShieldAlert className="mt-0.5 size-3.5 shrink-0" aria-hidden />
           <p className="min-w-0">{t("admin.centralCodex.honesty")}</p>
diff --git a/src/components/admin/coach-feedback-section.tsx b/src/components/admin/coach-feedback-section.tsx
index 0308625c4..245bcee60 100644
--- a/src/components/admin/coach-feedback-section.tsx
+++ b/src/components/admin/coach-feedback-section.tsx
@@ -71,7 +71,7 @@ export function CoachFeedbackSection() {
   // /admin/coach-feedback. Mirrors the canonical structure used by
   // <SystemStatusSection> (header outside the fetch-state branch).
   return (
-    <SettingsCard className="space-y-4">
+    <SettingsCard>
       <SettingsCardHeader
         icon={Sparkles}
         title={t("admin.coachFeedback.title")}
diff --git a/src/components/admin/danger-zone-section.tsx b/src/components/admin/danger-zone-section.tsx
index 105e33893..04f2fdb58 100644
--- a/src/components/admin/danger-zone-section.tsx
+++ b/src/components/admin/danger-zone-section.tsx
@@ -170,7 +170,7 @@ export function DangerZoneSection() {
       />
       {wipeMsg && (
         <p
-          className={`mt-3 pl-7 text-sm ${
+          className={`mt-3 text-sm ${
             wipeAllData.isError ? "text-destructive" : "text-success"
           }`}
         >
diff --git a/src/components/admin/encryption-section.tsx b/src/components/admin/encryption-section.tsx
index 3b4151ad3..69d672849 100644
--- a/src/components/admin/encryption-section.tsx
+++ b/src/components/admin/encryption-section.tsx
@@ -125,7 +125,7 @@ export function EncryptionSection() {
   return (
     <div className="space-y-6">
       {/* ── Coverage summary ───────────────────────────────────────── */}
-      <SettingsCard className="space-y-4">
+      <SettingsCard>
         <SettingsCardHeader
           icon={ShieldCheck}
           title={t("admin.section.encryption.coverageTitle")}
@@ -163,7 +163,7 @@ export function EncryptionSection() {
       </SettingsCard>
 
       {/* ── Rotation status + trigger ──────────────────────────────── */}
-      <SettingsCard className="space-y-4">
+      <SettingsCard>
         <SettingsCardHeader
           icon={KeyRound}
           title={t("admin.section.encryption.rotationTitle")}
@@ -230,7 +230,7 @@ export function EncryptionSection() {
       </SettingsCard>
 
       {/* ── Per-column coverage table ──────────────────────────────── */}
-      <SettingsCard className="space-y-3">
+      <SettingsCard>
         <SettingsCardHeader
           icon={ShieldCheck}
           title={t("admin.section.encryption.columnsTitle")}
diff --git a/src/components/admin/general-settings-section.tsx b/src/components/admin/general-settings-section.tsx
index ff6a671cf..7799373c5 100644
--- a/src/components/admin/general-settings-section.tsx
+++ b/src/components/admin/general-settings-section.tsx
@@ -85,7 +85,7 @@ export function GeneralSettingsSection() {
         title={t("admin.appSettings")}
         description={t("admin.appSettingsDescription")}
       />
-      <div className="mt-4 space-y-4 pl-7">
+      <div className="space-y-4">
         <SettingsToggle
           label={t("admin.registrationEnabled")}
           description={t("admin.registrationEnabledDescription")}
diff --git a/src/components/admin/glitchtip-section.tsx b/src/components/admin/glitchtip-section.tsx
index a608f876c..bca7b83f4 100644
--- a/src/components/admin/glitchtip-section.tsx
+++ b/src/components/admin/glitchtip-section.tsx
@@ -78,7 +78,7 @@ export function GlitchtipSection() {
         status={configured ? <ConfiguredBadge /> : null}
       />
 
-      <div className="mt-4 space-y-3 pl-7">
+      <div className="space-y-3">
         <SettingsToggle
           label={t("admin.glitchtipEnabled")}
           icon={AlertTriangle}
@@ -130,7 +130,7 @@ export function GlitchtipSection() {
         </div>
       </div>
 
-      <div className="mt-4 flex justify-end gap-2">
+      <div className="flex justify-end gap-2">
         <Button
           size="sm"
           variant="outline"
diff --git a/src/components/admin/host-metrics-chart.tsx b/src/components/admin/host-metrics-chart.tsx
index 6c80a79c5..c4d8c4042 100644
--- a/src/components/admin/host-metrics-chart.tsx
+++ b/src/components/admin/host-metrics-chart.tsx
@@ -185,7 +185,7 @@ export function HostMetricsChart() {
         </h2>
         <p
           role="alert"
-          className="text-destructive bg-destructive/10 border-destructive/30 mt-3 rounded-md border px-3 py-2 text-xs"
+          className="text-destructive bg-destructive/10 border-destructive/30 rounded-md border px-3 py-2 text-xs"
         >
           {t("admin.hostMetrics.loadError")}
         </p>
diff --git a/src/components/admin/invite-tokens-section.tsx b/src/components/admin/invite-tokens-section.tsx
index b05f3de4e..0b7733593 100644
--- a/src/components/admin/invite-tokens-section.tsx
+++ b/src/components/admin/invite-tokens-section.tsx
@@ -322,10 +322,10 @@ export function InviteTokensSection() {
               {t("admin.invites.title")}
             </h2>
           </div>
-          <p className="text-muted-foreground mt-1 pl-7 text-xs">
+          <p className="text-muted-foreground mt-1 text-xs">
             {t("admin.invites.description")}
           </p>
-          <p className="text-muted-foreground mt-1 flex items-center gap-1.5 pl-7 text-xs">
+          <p className="text-muted-foreground mt-1 flex items-center gap-1.5 text-xs">
             <ShieldCheck className="size-3.5 shrink-0" aria-hidden="true" />
             {t("admin.invites.adminOnlyHint")}
           </p>
diff --git a/src/components/admin/login-overview-section.tsx b/src/components/admin/login-overview-section.tsx
index 1af12d217..d601f396d 100644
--- a/src/components/admin/login-overview-section.tsx
+++ b/src/components/admin/login-overview-section.tsx
@@ -227,7 +227,7 @@ export function LoginOverviewSection() {
         description={t("admin.loginOverviewDescription")}
       />
 
-      <div className="mt-4 space-y-3">
+      <div className="space-y-3">
         {/* Quick-filter pills. Failed-only is the most common
               admin "is something wrong" question — keep the one-tap shortcut. */}
         <div className="flex gap-1">
diff --git a/src/components/admin/module-availability-section.tsx b/src/components/admin/module-availability-section.tsx
index e578d451f..59e5f37d3 100644
--- a/src/components/admin/module-availability-section.tsx
+++ b/src/components/admin/module-availability-section.tsx
@@ -94,7 +94,7 @@ export function ModuleAvailabilitySection() {
         title={t("admin.modules.title")}
         description={t("admin.modules.description")}
       />
-      <div className="mt-4 space-y-4 pl-7">
+      <div className="space-y-4">
         {MODULE_KEYS
           // A module switched off in code (pending a rebuild) is hard-off
           // server-wide; drop its row so the operator toggle can't mislead.
diff --git a/src/components/admin/recent-audit-preview.tsx b/src/components/admin/recent-audit-preview.tsx
index e330f56f1..63235bcef 100644
--- a/src/components/admin/recent-audit-preview.tsx
+++ b/src/components/admin/recent-audit-preview.tsx
@@ -70,7 +70,7 @@ export function RecentAuditPreview() {
         }
       />
 
-      <div className="mt-4">
+      <div>
         {isLoading ? (
           <div className="flex items-center gap-2 py-2">
             <Loader2
diff --git a/src/components/admin/reminders-section.tsx b/src/components/admin/reminders-section.tsx
index da51690c7..183fdc2de 100644
--- a/src/components/admin/reminders-section.tsx
+++ b/src/components/admin/reminders-section.tsx
@@ -61,7 +61,7 @@ function NotificationHealthPanel() {
         description={t("admin.notificationHealth.description")}
       />
 
-      <div className="mt-4 pl-7">
+      <div>
         {isLoading && (
           <Loader2 className="text-muted-foreground h-4 w-4 animate-spin motion-reduce:animate-none" />
         )}
@@ -205,7 +205,7 @@ export function RemindersSection() {
           description={t("admin.medicationRemindersDescription")}
         />
 
-        <div className="mt-4 space-y-3 pl-7">
+        <div className="space-y-3">
           <div className="grid gap-3 sm:grid-cols-2">
             <div className="space-y-1.5">
               <Label htmlFor="admin-reminder-late" className="text-xs">
@@ -260,7 +260,7 @@ export function RemindersSection() {
           </div>
         </div>
 
-        <div className="mt-4 flex justify-end gap-2">
+        <div className="flex justify-end gap-2">
           <Button
             size="sm"
             variant="outline"
@@ -319,7 +319,7 @@ export function RemindersSection() {
 
         {testNotification.data?.results &&
           testNotification.data.results.length > 0 && (
-            <div className="mt-4 space-y-1">
+            <div className="space-y-1">
               {testNotification.data.results.map((r, i) => (
                 <div key={i} className="flex items-center gap-1.5 text-xs">
                   {r.success ? (
@@ -338,7 +338,7 @@ export function RemindersSection() {
 
         {reminderCheck.data?.medications &&
           reminderCheck.data.medications.length > 0 && (
-            <div className="mt-4 space-y-2">
+            <div className="space-y-2">
               {/* v1.4.33 IW9 — h4 -> h2 so the page outline stays
                 sequential (parent admin SectionFrame ships <h1>). */}
               <h2 className="text-sm font-medium">
diff --git a/src/components/admin/services-section.tsx b/src/components/admin/services-section.tsx
index 3137e16c3..218004988 100644
--- a/src/components/admin/services-section.tsx
+++ b/src/components/admin/services-section.tsx
@@ -18,7 +18,7 @@ export function ServicesSection() {
         title={t("admin.servicesGlobal")}
         description={t("admin.servicesGlobalDescription")}
       />
-      <div className="mt-4 space-y-3 pl-7">
+      <div className="space-y-3">
         <SettingsToggle
           label="Telegram"
           description={t("admin.telegramGlobal")}
diff --git a/src/components/admin/system-status-section.tsx b/src/components/admin/system-status-section.tsx
index f635114e6..daecfa25a 100644
--- a/src/components/admin/system-status-section.tsx
+++ b/src/components/admin/system-status-section.tsx
@@ -74,7 +74,7 @@ export function FailingJobsCard({
           title={t("admin.failingJobs.title")}
           description={t("admin.failingJobs.description")}
         />
-        <p className="text-muted-foreground mt-4 pl-7 text-sm">
+        <p className="text-muted-foreground text-sm">
           {t("admin.failingJobs.unavailable")}
         </p>
       </SettingsCard>
@@ -91,12 +91,12 @@ export function FailingJobsCard({
       {failingJobs.queues.length === 0 ? (
         <p
           data-testid="failing-jobs-none"
-          className="text-muted-foreground mt-4 pl-7 text-sm"
+          className="text-muted-foreground text-sm"
         >
           {t("admin.failingJobs.none", { hours: failingJobs.windowHours })}
         </p>
       ) : (
-        <ul data-testid="failing-jobs-list" className="mt-4 space-y-3 pl-7">
+        <ul data-testid="failing-jobs-list" className="space-y-3">
           {failingJobs.queues.map((queue) => (
             <li key={queue.queue} className="text-sm">
               <p className="text-foreground font-medium">
@@ -146,7 +146,7 @@ export function SystemStatusSection() {
             // branches below it are a load error and a spinner, so the
             // marker cannot stand for a section still waiting on the read.
             data-slot="system-status-grid"
-            className="mt-4 grid gap-4 pl-7 sm:grid-cols-2 lg:grid-cols-4"
+            className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4"
           >
             <StatusItem
               icon={Database}
@@ -275,7 +275,7 @@ export function SystemStatusSection() {
           // full page reload to recover.
           <div
             role="alert"
-            className="text-destructive bg-destructive/10 border-destructive/30 mt-4 flex flex-col items-start gap-2 rounded-md border px-3 py-2 text-sm sm:flex-row sm:items-center sm:justify-between"
+            className="text-destructive bg-destructive/10 border-destructive/30 flex flex-col items-start gap-2 rounded-md border px-3 py-2 text-sm sm:flex-row sm:items-center sm:justify-between"
           >
             <span>{t("admin.systemStatusLoadError")}</span>
             <Button
@@ -296,7 +296,7 @@ export function SystemStatusSection() {
             </Button>
           </div>
         ) : (
-          <div className="mt-4 flex items-center gap-2">
+          <div className="flex items-center gap-2">
             <Loader2 className="text-muted-foreground h-4 w-4 animate-spin motion-reduce:animate-none" />
             <span className="text-muted-foreground text-sm">
               {t("admin.loadingStatus")}
diff --git a/src/components/admin/system-status-summary.tsx b/src/components/admin/system-status-summary.tsx
index 85ab28048..5551cef03 100644
--- a/src/components/admin/system-status-summary.tsx
+++ b/src/components/admin/system-status-summary.tsx
@@ -45,7 +45,7 @@ export function SystemStatusSummary() {
       />
 
       {status ? (
-        <div className="mt-4 grid gap-3 pl-7 sm:grid-cols-2 lg:grid-cols-3">
+        <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
           <StatusItem
             icon={Tag}
             label={t("admin.overview.snapshotVersion")}
@@ -120,12 +120,12 @@ export function SystemStatusSummary() {
       ) : isError ? (
         <div
           role="alert"
-          className="text-destructive bg-destructive/10 border-destructive/30 mt-4 rounded-md border px-3 py-2 text-sm"
+          className="text-destructive bg-destructive/10 border-destructive/30 rounded-md border px-3 py-2 text-sm"
         >
           {t("admin.overview.snapshotLoadError")}
         </div>
       ) : (
-        <div className="mt-4 flex items-center gap-2">
+        <div className="flex items-center gap-2">
           <Loader2
             className="text-muted-foreground h-4 w-4 animate-spin motion-reduce:animate-none"
             aria-hidden="true"
diff --git a/src/components/admin/umami-section.tsx b/src/components/admin/umami-section.tsx
index b19d6327a..7c8707c6c 100644
--- a/src/components/admin/umami-section.tsx
+++ b/src/components/admin/umami-section.tsx
@@ -81,7 +81,7 @@ export function UmamiSection() {
         status={configured ? <ConfiguredBadge /> : null}
       />
 
-      <div className="mt-4 space-y-3 pl-7">
+      <div className="space-y-3">
         <SettingsToggle
           label={t("admin.umamiEnabled")}
           icon={Activity}
@@ -131,7 +131,7 @@ export function UmamiSection() {
         </div>
       </div>
 
-      <div className="mt-4 flex justify-end gap-2">
+      <div className="flex justify-end gap-2">
         <Button
           size="sm"
           variant="outline"
diff --git a/src/components/admin/user-management-section.tsx b/src/components/admin/user-management-section.tsx
index b0ab25bfb..c0de841f1 100644
--- a/src/components/admin/user-management-section.tsx
+++ b/src/components/admin/user-management-section.tsx
@@ -306,7 +306,7 @@ export function UserManagementSection() {
           // rendered an empty `<tbody>` so an admin filter that returned
           // no rows produced a blank rectangle; the icon + filter-aware
           // copy + "Show all users" CTA make the state explicit.
-          <div className="mt-4">
+          <div>
             <EmptyState
               icon={<Users className="size-6" />}
               title={t("admin.section.users.emptyTitle")}
@@ -330,7 +330,7 @@ export function UserManagementSection() {
               `md:block hidden` swaps it out for the card-list below at
               `< md`. Hiding the table-only wrapper (instead of just
               the cells) saves DOM weight on mobile too. */}
-            <div className="mt-4 hidden overflow-x-auto md:block">
+            <div className="hidden overflow-x-auto md:block">
               <table className="w-full text-sm">
                 <thead>
                   <tr className="text-muted-foreground border-b text-xs">
@@ -399,7 +399,7 @@ export function UserManagementSection() {
               All four actions stay visible and tap-targetable; nothing
               is hidden behind a horizontal scroll. */}
             <ul
-              className="mt-4 space-y-2 md:hidden"
+              className="space-y-2 md:hidden"
               data-slot="admin-user-rows"
               data-testid="admin-users-mobile-list"
             >
@@ -444,7 +444,7 @@ export function UserManagementSection() {
           </>
         )
       ) : (
-        <div className="mt-4 flex items-center gap-2">
+        <div className="flex items-center gap-2">
           <Loader2 className="text-muted-foreground h-4 w-4 animate-spin motion-reduce:animate-none" />
           <span className="text-muted-foreground text-sm">
             {t("admin.loadingUsers")}
@@ -454,7 +454,7 @@ export function UserManagementSection() {
 
       {/* Edit Dialog */}
       {editingUser && (
-        <div className="bg-muted/80 mt-4 rounded-lg p-4">
+        <div className="bg-muted/80 rounded-lg p-4">
           <h3 className="mb-3 text-sm font-semibold">
             {t("admin.editUserTitle", { name: editingUser.username })}
           </h3>
@@ -567,7 +567,7 @@ export function UserManagementSection() {
 
       {/* Password Reset Dialog */}
       {resetUser && (
-        <div className="bg-muted/80 mt-4 rounded-lg p-4">
+        <div className="bg-muted/80 rounded-lg p-4">
           <h3 className="mb-3 text-sm font-semibold">
             {t("admin.resetPasswordTitle", { name: resetUser.username })}
           </h3>
diff --git a/src/components/admin/version-tile-section.tsx b/src/components/admin/version-tile-section.tsx
index 0f51d4f60..13792f256 100644
--- a/src/components/admin/version-tile-section.tsx
+++ b/src/components/admin/version-tile-section.tsx
@@ -114,7 +114,7 @@ export function VersionTileSection() {
         }
       />
 
-      <div className="mt-4 grid gap-3 pl-7 sm:grid-cols-2 lg:grid-cols-3">
+      <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
         <StatusItem
           icon={Tag}
           label={t("admin.overview.versionTileVersion")}
diff --git a/src/components/admin/web-push-vapid-section.tsx b/src/components/admin/web-push-vapid-section.tsx
index c3acb4213..bd7013642 100644
--- a/src/components/admin/web-push-vapid-section.tsx
+++ b/src/components/admin/web-push-vapid-section.tsx
@@ -128,7 +128,7 @@ export function WebPushVapidSection() {
         status={configured ? <ConfiguredBadge /> : null}
       />
 
-      <div className="mt-4 grid gap-3 pl-7 sm:grid-cols-2">
+      <div className="grid gap-3 sm:grid-cols-2">
         <div className="space-y-1.5 sm:col-span-2">
           <Label htmlFor="admin-web-push-public-key" className="text-xs">
             {t("admin.webPushVapidPublicKey")}
@@ -191,7 +191,7 @@ export function WebPushVapidSection() {
         </div>
       </div>
 
-      <div className="mt-4 flex justify-end gap-2">
+      <div className="flex justify-end gap-2">
         <Button
           variant="outline"
           size="sm"
diff --git a/src/components/clinician/clinician-view.tsx b/src/components/clinician/clinician-view.tsx
index 84697f79f..ca449f4b3 100644
--- a/src/components/clinician/clinician-view.tsx
+++ b/src/components/clinician/clinician-view.tsx
@@ -19,6 +19,7 @@ import { makeFormatters } from "@/lib/format-locale";
 import type { Locale } from "@/lib/i18n/config";
 import type { ShareViewDocument } from "@/lib/clinician-share/share-view-data";
 import type { ReportSelection } from "@/lib/report-selection/selection";
+import { PageHeader } from "@/components/ui/page-header";
 import { DocumentEntry } from "./documents-list";
 import { ShareDownloadActions } from "./download-actions";
 import {
@@ -98,13 +99,8 @@ export function ClinicianView({
       className="mx-auto min-h-dvh w-full max-w-3xl px-4 py-8"
     >
       {/* ── Provenance header ───────────────────────────────────────── */}
-      <header className="mb-6">
-        <h1 className="text-2xl font-bold tracking-tight">
-          {t("clinicianView.title")}
-        </h1>
-        {label ? (
-          <p className="text-muted-foreground mt-1 text-sm">{label}</p>
-        ) : null}
+      <header className="mb-6 space-y-1.5">
+        <PageHeader title={t("clinicianView.title")} description={label} />
         {report && !documentOnly ? (
           <p className="text-muted-foreground mt-3 text-sm">
             {t("clinicianView.period", {
diff --git a/src/components/custom-metrics/custom-metric-detail.tsx b/src/components/custom-metrics/custom-metric-detail.tsx
index b809e8412..3aabaf88b 100644
--- a/src/components/custom-metrics/custom-metric-detail.tsx
+++ b/src/components/custom-metrics/custom-metric-detail.tsx
@@ -18,6 +18,7 @@ import { Card, CardContent } from "@/components/ui/card";
 import { QueryErrorCard } from "@/components/ui/query-error-card";
 import { EmptyState } from "@/components/ui/empty-state";
 import { ResponsiveSheet } from "@/components/ui/responsive-sheet";
+import { PageHeader } from "@/components/ui/page-header";
 import { Skeleton } from "@/components/ui/skeleton";
 import { MetricStatStrip } from "@/components/insights/metric-stat-strip";
 import { apiDelete, apiGet } from "@/lib/api/api-fetch";
@@ -171,14 +172,10 @@ export function CustomMetricDetail({
   if (metricError || listError) {
     return (
       <div className="space-y-6">
-        <header className="space-y-1.5">
-          <h1 className="text-2xl font-bold tracking-tight">
-            {metric?.name ?? t("customMetrics.detail.title")}
-          </h1>
-          <p className="text-foreground text-sm leading-relaxed">
-            {description}
-          </p>
-        </header>
+        <PageHeader
+          title={metric?.name ?? t("customMetrics.detail.title")}
+          description={description}
+        />
         <QueryErrorCard
           description={t("customMetrics.loadError")}
           onRetry={() => {
@@ -192,70 +189,69 @@ export function CustomMetricDetail({
 
   return (
     <div className="space-y-6">
-      <div className="flex items-start justify-between gap-3">
-        <div className="min-w-0">
-          <h1 className="text-2xl font-bold tracking-tight">
-            {metric?.name ?? <Skeleton className="h-7 w-32" />}
-          </h1>
-          {metric?.unit ? (
-            <p className="text-muted-foreground text-xs sm:text-sm">
-              {metric.unit}
-            </p>
-          ) : null}
-        </div>
-        <div className="flex shrink-0 items-center gap-2">
-          {/* Controls, left → right: Delete · Edit · Show-all-values · Add. */}
-          <DeleteButton
-            onConfirm={() => deleteMetric.mutate()}
-            title={t("customMetrics.deleteConfirmTitle")}
-            description={t("customMetrics.deleteConfirmDescription")}
-            confirmLabel={t("customMetrics.delete")}
-            triggerTitle={t("customMetrics.delete")}
-            className="min-h-11 min-w-11 sm:min-h-9 sm:min-w-9"
-            iconClassName="h-4 w-4"
-          />
-          <Button
-            variant="ghost"
-            size="icon"
-            className="min-h-11 min-w-11 sm:min-h-9 sm:min-w-9"
-            onClick={() => setEditOpen(true)}
-            disabled={!metric}
-            aria-label={t("customMetrics.edit")}
-            title={t("customMetrics.edit")}
-          >
-            <Pencil className="h-4 w-4" />
-          </Button>
-          {entries.length > 0 ? (
+      <PageHeader
+        title={metric?.name ?? <Skeleton className="h-7 w-32" />}
+        description={description}
+        actions={
+          <>
+            {/* Controls, left → right: Delete · Edit · Show-all-values · Add. */}
+            <DeleteButton
+              onConfirm={() => deleteMetric.mutate()}
+              title={t("customMetrics.deleteConfirmTitle")}
+              description={t("customMetrics.deleteConfirmDescription")}
+              confirmLabel={t("customMetrics.delete")}
+              triggerTitle={t("customMetrics.delete")}
+              className="min-h-11 min-w-11 sm:min-h-9 sm:min-w-9"
+              iconClassName="h-4 w-4"
+            />
             <Button
-              asChild
               variant="ghost"
               size="icon"
-              data-slot="custom-metric-show-all-values"
               className="min-h-11 min-w-11 sm:min-h-9 sm:min-w-9"
+              onClick={() => setEditOpen(true)}
+              disabled={!metric}
+              aria-label={t("customMetrics.edit")}
+              title={t("customMetrics.edit")}
             >
-              <Link
-                href={`/custom-metrics/${customMetricId}/values`}
-                aria-label={t("customMetrics.showAllValues")}
-                title={t("customMetrics.showAllValues")}
-              >
-                <ListOrdered className="h-4 w-4" aria-hidden="true" />
-              </Link>
+              <Pencil className="h-4 w-4" />
             </Button>
-          ) : null}
-          <Button
-            onClick={() => setAddOpen(true)}
-            className="min-h-11 min-w-11 shrink-0 sm:min-h-9 sm:min-w-0"
-            aria-label={t("customMetrics.addValue")}
-          >
-            <Plus className="h-4 w-4" />
-            <span className="hidden sm:inline">
-              {t("customMetrics.addValue")}
-            </span>
-          </Button>
-        </div>
-      </div>
+            {entries.length > 0 ? (
+              <Button
+                asChild
+                variant="ghost"
+                size="icon"
+                data-slot="custom-metric-show-all-values"
+                className="min-h-11 min-w-11 sm:min-h-9 sm:min-w-9"
+              >
+                <Link
+                  href={`/custom-metrics/${customMetricId}/values`}
+                  aria-label={t("customMetrics.showAllValues")}
+                  title={t("customMetrics.showAllValues")}
+                >
+                  <ListOrdered className="h-4 w-4" aria-hidden="true" />
+                </Link>
+              </Button>
+            ) : null}
+            <Button
+              onClick={() => setAddOpen(true)}
+              className="min-h-11 min-w-11 shrink-0 sm:min-h-9 sm:min-w-0"
+              aria-label={t("customMetrics.addValue")}
+            >
+              <Plus className="h-4 w-4" />
+              <span className="hidden sm:inline">
+                {t("customMetrics.addValue")}
+              </span>
+            </Button>
+          </>
+        }
+      />
 
-      <p className="text-foreground text-sm leading-relaxed">{description}</p>
+      {/* The unit is meta about the metric, not its explainer, so it reads
+          below the header rather than competing for the one description line
+          every page header carries. */}
+      {metric?.unit ? (
+        <p className="text-muted-foreground text-sm">{metric.unit}</p>
+      ) : null}
 
       {isLoading ? (
         <Card>
diff --git a/src/components/cycle/cycle-insight-summary-card.tsx b/src/components/cycle/cycle-insight-summary-card.tsx
index e0b6457a8..673b82af3 100644
--- a/src/components/cycle/cycle-insight-summary-card.tsx
+++ b/src/components/cycle/cycle-insight-summary-card.tsx
@@ -5,7 +5,7 @@ import Link from "next/link";
 import { ArrowRight, Droplets } from "lucide-react";
 
 import { useTranslations } from "@/lib/i18n/context";
-import { SectionHeading } from "@/components/insights/section-heading";
+import { SectionHeading } from "@/components/ui/section-heading";
 import { CyclePhaseHeadline } from "./cycle-phase-crosstab";
 import { PHASE_HUE } from "./phase-tokens";
 import { localYmd, useCycleCalendar, useCycleInsights } from "./use-cycle";
diff --git a/src/components/illness/illness-episode-detail.tsx b/src/components/illness/illness-episode-detail.tsx
index 98c444d23..c272917cf 100644
--- a/src/components/illness/illness-episode-detail.tsx
+++ b/src/components/illness/illness-episode-detail.tsx
@@ -16,6 +16,7 @@ import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent } from "@/components/ui/card";
 import { QueryErrorCard } from "@/components/ui/query-error-card";
+import { PageHeader } from "@/components/ui/page-header";
 import { Skeleton } from "@/components/ui/skeleton";
 import { useTranslations, useFormatters } from "@/lib/i18n/context";
 
@@ -67,13 +68,11 @@ export function IllnessEpisodeDetail({ episodeId }: { episodeId: string }) {
 
   return (
     <div className="space-y-6">
-      <div className="flex items-start justify-between gap-3">
-        <div className="min-w-0">
-          <h1 className="truncate text-2xl font-bold tracking-tight">
-            {episode?.label ?? <Skeleton className="h-7 w-40" />}
-          </h1>
-          {episode ? (
-            <div className="mt-1.5 flex flex-wrap items-center gap-2">
+      <PageHeader
+        title={episode?.label ?? <Skeleton className="h-7 w-40" />}
+        description={
+          episode ? (
+            <span className="flex flex-wrap items-center gap-2">
               <Badge variant="secondary">
                 {t(`illness.type.${episode.type}`)}
               </Badge>
@@ -94,32 +93,34 @@ export function IllnessEpisodeDetail({ episodeId }: { episodeId: string }) {
                     })}`
                   : ""}
               </span>
-            </div>
-          ) : null}
-        </div>
-        {canManage && (
-          <div className="flex shrink-0 items-center gap-1">
-            <Button
-              onClick={() => setLogOpen(true)}
-              className="min-h-11 sm:min-h-9"
-            >
-              {t("illness.logDay")}
-            </Button>
-            {episode ? (
-              <EpisodeMenu
-                episode={episode}
-                onEdit={() => setEditOpen(true)}
-                onResolve={
-                  active && !isChronic
-                    ? () => resolve.mutate(episode.id)
-                    : undefined
-                }
-                resolving={resolve.isPending}
-              />
-            ) : null}
-          </div>
-        )}
-      </div>
+            </span>
+          ) : undefined
+        }
+        actions={
+          canManage ? (
+            <>
+              <Button
+                onClick={() => setLogOpen(true)}
+                className="min-h-11 sm:min-h-9"
+              >
+                {t("illness.logDay")}
+              </Button>
+              {episode ? (
+                <EpisodeMenu
+                  episode={episode}
+                  onEdit={() => setEditOpen(true)}
+                  onResolve={
+                    active && !isChronic
+                      ? () => resolve.mutate(episode.id)
+                      : undefined
+                  }
+                  resolving={resolve.isPending}
+                />
+              ) : null}
+            </>
+          ) : undefined
+        }
+      />
 
       {episode?.note ? (
         <Card>
diff --git a/src/components/illness/illness-settings.tsx b/src/components/illness/illness-settings.tsx
index f7d859ca2..db3592bb3 100644
--- a/src/components/illness/illness-settings.tsx
+++ b/src/components/illness/illness-settings.tsx
@@ -48,7 +48,7 @@ export function IllnessSettings() {
 
   return (
     <div className="space-y-6">
-      <SettingsCard id="illness-view" className="scroll-mt-28 space-y-4">
+      <SettingsCard id="illness-view" className="scroll-mt-28">
         <SettingsCardHeader
           icon={Eye}
           title={t("moduleList.viewHeading")}
@@ -57,7 +57,7 @@ export function IllnessSettings() {
         />
       </SettingsCard>
 
-      <SettingsCard id="illness-order" className="scroll-mt-28 space-y-4">
+      <SettingsCard id="illness-order" className="scroll-mt-28">
         <SettingsCardHeader
           icon={ListOrdered}
           title={t("moduleList.reorder.heading")}
diff --git a/src/components/insights/breathing-screening-card.tsx b/src/components/insights/breathing-screening-card.tsx
index 4ef705c67..4d0fcc37a 100644
--- a/src/components/insights/breathing-screening-card.tsx
+++ b/src/components/insights/breathing-screening-card.tsx
@@ -8,7 +8,7 @@ import { useAuth } from "@/hooks/use-auth";
 import { cn } from "@/lib/utils";
 import { apiGet } from "@/lib/api/api-fetch";
 import { queryKeys } from "@/lib/query-keys";
-import { SectionHeading } from "@/components/insights/section-heading";
+import { SectionHeading } from "@/components/ui/section-heading";
 import type {
   BreathingClassification,
   BreathingTrend,
diff --git a/src/components/insights/coincident-deviation-card.tsx b/src/components/insights/coincident-deviation-card.tsx
index 74fc12075..c909ca7fa 100644
--- a/src/components/insights/coincident-deviation-card.tsx
+++ b/src/components/insights/coincident-deviation-card.tsx
@@ -4,7 +4,7 @@ import { AlertTriangle, Activity } from "lucide-react";
 
 import { useTranslations } from "@/lib/i18n/context";
 import { cn } from "@/lib/utils";
-import { SectionHeading } from "@/components/insights/section-heading";
+import { SectionHeading } from "@/components/ui/section-heading";
 import { MEASUREMENT_TYPE_LABEL_KEYS } from "@/components/measurements/measurement-list-meta";
 import { CoverageMeter } from "@/components/insights/derived/coverage-meter";
 import { ProvenanceExplainer } from "@/components/insights/derived/provenance-explainer";
diff --git a/src/components/insights/daily-briefing.tsx b/src/components/insights/daily-briefing.tsx
index 85b586db0..fc2d19a0c 100644
--- a/src/components/insights/daily-briefing.tsx
+++ b/src/components/insights/daily-briefing.tsx
@@ -23,7 +23,7 @@ import { Button } from "@/components/ui/button";
 import { EmptyState } from "@/components/ui/empty-state";
 import { ListRow } from "@/components/ui/list-row";
 import { Skeleton } from "@/components/ui/skeleton";
-import { SectionHeading } from "@/components/insights/section-heading";
+import { SectionHeading } from "@/components/ui/section-heading";
 import {
   useTranslations,
   useFormatters,
diff --git a/src/components/insights/derived/vitals-dashboard.tsx b/src/components/insights/derived/vitals-dashboard.tsx
index ea58b4a1a..c843897c2 100644
--- a/src/components/insights/derived/vitals-dashboard.tsx
+++ b/src/components/insights/derived/vitals-dashboard.tsx
@@ -13,7 +13,7 @@ import {
   MEASUREMENT_TYPE_LABEL_KEYS,
 } from "@/components/measurements/measurement-list-meta";
 import { TileHeader } from "@/components/insights/tile-header";
-import { SectionHeading } from "@/components/insights/section-heading";
+import { SectionHeading } from "@/components/ui/section-heading";
 import { SparklineDeltaTile } from "./sparkline-delta-tile";
 import { LearnMoreLink } from "@/components/ui/learn-more-link";
 import { CoverageMeter } from "./coverage-meter";
diff --git a/src/components/insights/derived/wellness-scores.tsx b/src/components/insights/derived/wellness-scores.tsx
index 697eb93c9..96cdacaa1 100644
--- a/src/components/insights/derived/wellness-scores.tsx
+++ b/src/components/insights/derived/wellness-scores.tsx
@@ -14,7 +14,7 @@ import { cn } from "@/lib/utils";
 import { Button } from "@/components/ui/button";
 import { Skeleton } from "@/components/ui/skeleton";
 import { useTranslations } from "@/lib/i18n/context";
-import { SectionHeading } from "@/components/insights/section-heading";
+import { SectionHeading } from "@/components/ui/section-heading";
 import { ScoreRing } from "./score-ring";
 import { TILE_HUE, type RingHue } from "./ring-hues";
 import type { DerivedBatchRead } from "./use-derived-metric";
diff --git a/src/components/insights/device-score-tile.tsx b/src/components/insights/device-score-tile.tsx
index f022d6bb9..39da9a327 100644
--- a/src/components/insights/device-score-tile.tsx
+++ b/src/components/insights/device-score-tile.tsx
@@ -11,7 +11,7 @@ import type { DataSummary } from "@/lib/analytics/trends";
 import { Card, CardContent, CardHeader } from "@/components/ui/card";
 import { LearningGate } from "@/components/ui/learning-gate";
 import { HealthChartDynamicMini } from "@/components/charts/health-chart-dynamic";
-import { SectionHeading } from "@/components/insights/section-heading";
+import { SectionHeading } from "@/components/ui/section-heading";
 import { TileHeader } from "@/components/insights/tile-header";
 
 /**
diff --git a/src/components/insights/ecg-section.tsx b/src/components/insights/ecg-section.tsx
index 822bf0ede..a5fe8a473 100644
--- a/src/components/insights/ecg-section.tsx
+++ b/src/components/insights/ecg-section.tsx
@@ -9,7 +9,7 @@ import { queryKeys } from "@/lib/query-keys";
 import { apiGet } from "@/lib/api/api-fetch";
 import { useTranslations, useFormatters } from "@/lib/i18n/context";
 import { cn } from "@/lib/utils";
-import { SectionHeading } from "@/components/insights/section-heading";
+import { SectionHeading } from "@/components/ui/section-heading";
 import { EcgWaveform } from "@/components/insights/ecg-waveform";
 import { InsightSectionCard } from "./insight-section-card";
 
diff --git a/src/components/insights/health-status-card.tsx b/src/components/insights/health-status-card.tsx
index 3d7161432..c55aa3091 100644
--- a/src/components/insights/health-status-card.tsx
+++ b/src/components/insights/health-status-card.tsx
@@ -8,7 +8,7 @@ import { useAuth } from "@/hooks/use-auth";
 import { cn } from "@/lib/utils";
 import { apiGet } from "@/lib/api/api-fetch";
 import { queryKeys } from "@/lib/query-keys";
-import { SectionHeading } from "@/components/insights/section-heading";
+import { SectionHeading } from "@/components/ui/section-heading";
 import { MEASUREMENT_TYPE_LABEL_KEYS } from "@/components/measurements/measurement-list-meta";
 import type {
   HealthStatusDeviation,
diff --git a/src/components/insights/labs-changes-card.tsx b/src/components/insights/labs-changes-card.tsx
index f2a09a478..a25900bd1 100644
--- a/src/components/insights/labs-changes-card.tsx
+++ b/src/components/insights/labs-changes-card.tsx
@@ -8,7 +8,7 @@ import { useAuth } from "@/hooks/use-auth";
 import { cn } from "@/lib/utils";
 import { apiGet } from "@/lib/api/api-fetch";
 import { queryKeys } from "@/lib/query-keys";
-import { SectionHeading } from "@/components/insights/section-heading";
+import { SectionHeading } from "@/components/ui/section-heading";
 import type { LabChange } from "@/lib/insights/labs-changes";
 import { InsightSectionCard } from "./insight-section-card";
 
diff --git a/src/components/insights/period-narrative-card.tsx b/src/components/insights/period-narrative-card.tsx
index 19264f724..8ab40bb71 100644
--- a/src/components/insights/period-narrative-card.tsx
+++ b/src/components/insights/period-narrative-card.tsx
@@ -13,7 +13,7 @@ import { formatUpdatedLabel } from "@/lib/i18n/relative-time";
 import { queryKeys } from "@/lib/query-keys";
 import { cn } from "@/lib/utils";
 import { Skeleton } from "@/components/ui/skeleton";
-import { SectionHeading } from "@/components/insights/section-heading";
+import { SectionHeading } from "@/components/ui/section-heading";
 import { AskCoachIconButton } from "@/components/insights/ask-coach-action";
 import { ProseBlocks } from "@/components/insights/prose-blocks";
 import { apiGet } from "@/lib/api/api-fetch";
diff --git a/src/components/insights/rhythm-events-card.tsx b/src/components/insights/rhythm-events-card.tsx
index 9d45ca7fb..d9162d8c0 100644
--- a/src/components/insights/rhythm-events-card.tsx
+++ b/src/components/insights/rhythm-events-card.tsx
@@ -9,7 +9,7 @@ import { queryKeys } from "@/lib/query-keys";
 import { apiGet } from "@/lib/api/api-fetch";
 import { useTranslations, useFormatters } from "@/lib/i18n/context";
 import { cn } from "@/lib/utils";
-import { SectionHeading } from "@/components/insights/section-heading";
+import { SectionHeading } from "@/components/ui/section-heading";
 import { InsightSectionCard } from "./insight-section-card";
 
 /**
diff --git a/src/components/insights/sleep/sleep-quality-section.tsx b/src/components/insights/sleep/sleep-quality-section.tsx
index 593e7dd4b..b4f0e0a00 100644
--- a/src/components/insights/sleep/sleep-quality-section.tsx
+++ b/src/components/insights/sleep/sleep-quality-section.tsx
@@ -5,7 +5,7 @@ import { Activity, Gauge, Moon, Repeat, Target, Waves } from "lucide-react";
 import { useInsightsAnalytics } from "@/hooks/use-insights-analytics";
 import { useTranslations } from "@/lib/i18n/context";
 import { cn } from "@/lib/utils";
-import { SectionHeading } from "@/components/insights/section-heading";
+import { SectionHeading } from "@/components/ui/section-heading";
 import { DeviceScoreTile } from "@/components/insights/device-score-tile";
 import { DeviceScoreGridSkeleton } from "@/components/insights/device-score-tile-skeleton";
 
diff --git a/src/components/insights/trends-row.tsx b/src/components/insights/trends-row.tsx
index 0915e7404..7ed4e976d 100644
--- a/src/components/insights/trends-row.tsx
+++ b/src/components/insights/trends-row.tsx
@@ -6,7 +6,7 @@ import { ArrowRight, TrendingUp } from "lucide-react";
 import { useTranslations } from "@/lib/i18n/context";
 import { useAuth } from "@/hooks/use-auth";
 import { ChartSkeleton } from "@/components/charts/chart-skeleton";
-import { SectionHeading } from "@/components/insights/section-heading";
+import { SectionHeading } from "@/components/ui/section-heading";
 import { HealthChartDynamicMini } from "@/components/charts/health-chart-dynamic";
 import type { DailyBriefing } from "@/lib/ai/schema";
 import {
diff --git a/src/components/insights/workout-detail/day-context.tsx b/src/components/insights/workout-detail/day-context.tsx
index 5231c340a..413a9dfa7 100644
--- a/src/components/insights/workout-detail/day-context.tsx
+++ b/src/components/insights/workout-detail/day-context.tsx
@@ -5,7 +5,7 @@ import Link from "next/link";
 import { ArrowRight, CalendarDays, Moon, Smile } from "lucide-react";
 
 import { ChartSkeleton } from "@/components/charts/chart-skeleton";
-import { SectionHeading } from "@/components/insights/section-heading";
+import { SectionHeading } from "@/components/ui/section-heading";
 import { Card, CardContent } from "@/components/ui/card";
 import { QueryErrorRow } from "@/components/ui/query-error-row";
 import { Skeleton } from "@/components/ui/skeleton";
diff --git a/src/components/labs/lab-biomarker-detail.tsx b/src/components/labs/lab-biomarker-detail.tsx
index 16442a653..dbcfce3ed 100644
--- a/src/components/labs/lab-biomarker-detail.tsx
+++ b/src/components/labs/lab-biomarker-detail.tsx
@@ -27,6 +27,7 @@ import { Card, CardContent } from "@/components/ui/card";
 import { EmptyState } from "@/components/ui/empty-state";
 import { QueryErrorCard } from "@/components/ui/query-error-card";
 import { ResponsiveSheet } from "@/components/ui/responsive-sheet";
+import { PageHeader } from "@/components/ui/page-header";
 import { Skeleton } from "@/components/ui/skeleton";
 import { InsightStatusCard } from "@/components/insights/insight-status-card";
 import { MetricStatStrip } from "@/components/insights/metric-stat-strip";
@@ -303,14 +304,10 @@ export function LabBiomarkerDetail({ biomarkerId }: { biomarkerId: string }) {
   if (markerError || listError) {
     return (
       <div className="space-y-6">
-        <header className="space-y-1.5">
-          <h1 className="text-2xl font-bold tracking-tight">
-            {marker?.name ?? t("labs.detail.title")}
-          </h1>
-          <p className="text-foreground text-sm leading-relaxed">
-            {description}
-          </p>
-        </header>
+        <PageHeader
+          title={marker?.name ?? t("labs.detail.title")}
+          description={description}
+        />
         <QueryErrorCard
           title={t("labs.loadError")}
           onRetry={() => {
@@ -324,91 +321,88 @@ export function LabBiomarkerDetail({ biomarkerId }: { biomarkerId: string }) {
 
   return (
     <div className="space-y-6">
-      <div className="flex items-start justify-between gap-3">
-        <div className="min-w-0">
-          <h1 className="text-2xl font-bold tracking-tight">
-            {marker?.name ?? <Skeleton className="h-7 w-32" />}
-          </h1>
-          {marker?.unit ? (
-            <p className="text-muted-foreground text-xs sm:text-sm">
-              {marker.unit}
-              {marker.panel ? ` · ${marker.panel}` : ""}
-            </p>
-          ) : null}
-        </div>
-        <div className="flex shrink-0 items-center gap-2">
-          {/* v1.25.3 — header control cluster, left → right:
+      <PageHeader
+        title={marker?.name ?? <Skeleton className="h-7 w-32" />}
+        description={description}
+        actions={
+          <>
+            {/* v1.25.3 — header control cluster, left → right:
               Delete · Edit · Show-all-values · Add. The icon controls share one
               ghost-icon treatment (the target-range editing lives inside the
               full marker editor behind the pencil, so the separate range
               control was dropped). */}
-          <DeleteButton
-            onConfirm={() => deleteMarker.mutate()}
-            title={t("labs.biomarker.deleteConfirmTitle")}
-            description={t("labs.biomarker.deleteConfirmDescription")}
-            confirmLabel={t("labs.biomarker.delete")}
-            triggerTitle={t("labs.biomarker.delete")}
-            className="min-h-11 min-w-11 sm:min-h-9 sm:min-w-9"
-            iconClassName="h-4 w-4"
-          />
-          {canManage && (
-            <Button
-              variant="ghost"
-              size="icon"
+            <DeleteButton
+              onConfirm={() => deleteMarker.mutate()}
+              title={t("labs.biomarker.deleteConfirmTitle")}
+              description={t("labs.biomarker.deleteConfirmDescription")}
+              confirmLabel={t("labs.biomarker.delete")}
+              triggerTitle={t("labs.biomarker.delete")}
               className="min-h-11 min-w-11 sm:min-h-9 sm:min-w-9"
-              onClick={() => setEditOpen(true)}
-              disabled={!marker}
-              aria-label={t("labs.biomarker.edit")}
-              title={t("labs.biomarker.edit")}
-            >
-              <Pencil className="h-4 w-4" />
-            </Button>
-          )}
-          {/* "Show all readings" mirrors the metric sub-pages' `<SubPageShell>`
+              iconClassName="h-4 w-4"
+            />
+            {canManage && (
+              <Button
+                variant="ghost"
+                size="icon"
+                className="min-h-11 min-w-11 sm:min-h-9 sm:min-w-9"
+                onClick={() => setEditOpen(true)}
+                disabled={!marker}
+                aria-label={t("labs.biomarker.edit")}
+                title={t("labs.biomarker.edit")}
+              >
+                <Pencil className="h-4 w-4" />
+              </Button>
+            )}
+            {/* "Show all readings" mirrors the metric sub-pages' `<SubPageShell>`
               control. The full reading feed lives on
               `/labs/[biomarkerId]/values`; the detail page keeps the
               numbers-first spine. */}
-          {readings.length > 0 ? (
-            <Button
-              asChild
-              variant="ghost"
-              size="icon"
-              data-slot="lab-show-all-values"
-              className="min-h-11 min-w-11 sm:min-h-9 sm:min-w-9"
-            >
-              <Link
-                href={`/labs/${biomarkerId}/values`}
-                aria-label={t("insights.subPage.showAllValues")}
-                title={t("insights.subPage.showAllValues")}
+            {readings.length > 0 ? (
+              <Button
+                asChild
+                variant="ghost"
+                size="icon"
+                data-slot="lab-show-all-values"
+                className="min-h-11 min-w-11 sm:min-h-9 sm:min-w-9"
               >
-                <ListOrdered className="h-4 w-4" aria-hidden="true" />
-              </Link>
-            </Button>
-          ) : null}
-          {/* v1.36.x — entering a result is an admitted delegated write;
+                <Link
+                  href={`/labs/${biomarkerId}/values`}
+                  aria-label={t("insights.subPage.showAllValues")}
+                  title={t("insights.subPage.showAllValues")}
+                >
+                  <ListOrdered className="h-4 w-4" aria-hidden="true" />
+                </Link>
+              </Button>
+            ) : null}
+            {/* v1.36.x — entering a result is an admitted delegated write;
               renaming or removing the marker is not. */}
-          {canAdd && (
-            <Button
-              onClick={() => setAddOpen(true)}
-              // v1.18.10 (W10) — on the narrowest phones the h1 + Edit + Delete +
-              // text "Add" button crowd the row and truncate the title hard.
-              // Drop the Add button to icon-only under `sm` (label kept for
-              // screen readers via `aria-label`); the full text returns at `sm+`.
-              className="min-h-11 min-w-11 shrink-0 sm:min-h-9 sm:min-w-0"
-              aria-label={t("labs.addResult")}
-            >
-              <Plus className="h-4 w-4" />
-              <span className="hidden sm:inline">{t("labs.addResult")}</span>
-            </Button>
-          )}
-        </div>
-      </div>
+            {canAdd && (
+              <Button
+                onClick={() => setAddOpen(true)}
+                // v1.18.10 (W10) — on the narrowest phones the h1 + Edit + Delete +
+                // text "Add" button crowd the row and truncate the title hard.
+                // Drop the Add button to icon-only under `sm` (label kept for
+                // screen readers via `aria-label`); the full text returns at `sm+`.
+                className="min-h-11 min-w-11 shrink-0 sm:min-h-9 sm:min-w-0"
+                aria-label={t("labs.addResult")}
+              >
+                <Plus className="h-4 w-4" />
+                <span className="hidden sm:inline">{t("labs.addResult")}</span>
+              </Button>
+            )}
+          </>
+        }
+      />
 
-      {/* v1.25.1 — the static description leads the page, directly beneath the
-          heading, mirroring the metric sub-pages' explainer caption. Computed
-          once above (catalog desc → user `context` → generic fallback) so a
-          catalog-less marker still carries a description. */}
-      <p className="text-foreground text-sm leading-relaxed">{description}</p>
+      {/* Unit + panel are meta about the marker, not its explainer, so they
+          read below the header block rather than competing with it for the
+          one description line every page header carries. */}
+      {marker?.unit ? (
+        <p className="text-muted-foreground text-sm">
+          {marker.unit}
+          {marker.panel ? ` · ${marker.panel}` : ""}
+        </p>
+      ) : null}
 
       {/* Bridge to the source report PDFs. There is no per-value document
           relation in the data model yet, so this links to the vault filtered
diff --git a/src/components/labs/labs-settings.tsx b/src/components/labs/labs-settings.tsx
index 8c83743e7..bed665cba 100644
--- a/src/components/labs/labs-settings.tsx
+++ b/src/components/labs/labs-settings.tsx
@@ -79,7 +79,7 @@ export function LabsSettings() {
   return (
     <div className="space-y-6">
       {/* View — card vs compact list. */}
-      <SettingsCard id="labs-view" className="scroll-mt-28 space-y-4">
+      <SettingsCard id="labs-view" className="scroll-mt-28">
         <SettingsCardHeader
           icon={LayoutGrid}
           title={t("moduleList.viewHeading")}
@@ -89,7 +89,7 @@ export function LabsSettings() {
       </SettingsCard>
 
       {/* Sort order — recency, alphabetical, or manual. */}
-      <SettingsCard id="labs-sort-card" className="scroll-mt-28 space-y-4">
+      <SettingsCard id="labs-sort-card" className="scroll-mt-28">
         <SettingsCardHeader
           icon={ArrowDownUp}
           title={t("labs.sort.heading")}
@@ -112,7 +112,7 @@ export function LabsSettings() {
       </SettingsCard>
 
       {manual ? (
-        <SettingsCard id="labs-order" className="scroll-mt-28 space-y-4">
+        <SettingsCard id="labs-order" className="scroll-mt-28">
           <SettingsCardHeader
             icon={ListOrdered}
             title={t("moduleList.reorder.heading")}
@@ -130,7 +130,7 @@ export function LabsSettings() {
       ) : null}
 
       {/* v1.18.10 — local (in-browser) OCR opt-in for lab scans. */}
-      <SettingsCard id="labs-local-ocr" className="scroll-mt-28 space-y-4">
+      <SettingsCard id="labs-local-ocr" className="scroll-mt-28">
         <SettingsCardHeader
           icon={ScanText}
           title={t("labs.localOcr.heading")}
@@ -147,7 +147,7 @@ export function LabsSettings() {
       </SettingsCard>
 
       {/* Biomarker catalog — define / edit / delete. */}
-      <SettingsCard id="labs-biomarkers" className="scroll-mt-28 space-y-4">
+      <SettingsCard id="labs-biomarkers" className="scroll-mt-28">
         <SettingsCardHeader
           icon={FlaskConical}
           title={t("labs.biomarker.manageTitle")}
diff --git a/src/components/measurement-reminders/vorsorge-section.tsx b/src/components/measurement-reminders/vorsorge-section.tsx
index c5412c6da..fc300e8e3 100644
--- a/src/components/measurement-reminders/vorsorge-section.tsx
+++ b/src/components/measurement-reminders/vorsorge-section.tsx
@@ -62,6 +62,7 @@ import {
   AlertDialogTitle,
 } from "@/components/ui/alert-dialog";
 import { Badge } from "@/components/ui/badge";
+import { PageHeader } from "@/components/ui/page-header";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent } from "@/components/ui/card";
 import {
@@ -400,24 +401,21 @@ export function VorsorgeSection({
   return (
     <section aria-labelledby="vorsorge-section-title" className="space-y-4">
       {variant === "page" ? (
-        <div className="flex items-start justify-between gap-3">
-          <div className="min-w-0">
-            <h1
-              id="vorsorge-section-title"
-              data-tour-id="vorsorge-hero"
-              className="text-2xl font-bold tracking-tight"
-            >
+        <PageHeader
+          titleId="vorsorge-section-title"
+          title={
+            <span data-tour-id="vorsorge-hero">
               {t("measurementReminders.sectionTitle")}
-            </h1>
-            <p className="text-muted-foreground text-xs sm:text-sm">
-              {t("measurementReminders.sectionDescription")}
-            </p>
-          </div>
-          <div className="flex shrink-0 items-center gap-2">
-            {wrenchButton}
-            {addButton}
-          </div>
-        </div>
+            </span>
+          }
+          description={t("measurementReminders.sectionDescription")}
+          actions={
+            <>
+              {wrenchButton}
+              {addButton}
+            </>
+          }
+        />
       ) : (
         <SettingsCardHeader
           icon={CalendarClock}
diff --git a/src/components/measurement-reminders/vorsorge-settings.tsx b/src/components/measurement-reminders/vorsorge-settings.tsx
index b87a9d9ca..15311b2b3 100644
--- a/src/components/measurement-reminders/vorsorge-settings.tsx
+++ b/src/components/measurement-reminders/vorsorge-settings.tsx
@@ -81,7 +81,7 @@ export function VorsorgeSettings() {
           title={t("moduleList.reorder.heading")}
           description={t("moduleList.reorder.description")}
         />
-        <div className="mt-4 pl-7">
+        <div>
           {isLoading ? (
             <div className="space-y-2">
               {Array.from({ length: 3 }, (_, i) => (
@@ -100,7 +100,7 @@ export function VorsorgeSettings() {
           title={t("measurementReminders.manage.title")}
           description={t("measurementReminders.manage.description")}
         />
-        <div className="mt-4 pl-7">
+        <div>
           {isLoading ? (
             <Skeleton className="h-24 w-full" />
           ) : (reminders?.length ?? 0) === 0 ? (
diff --git a/src/components/settings/__tests__/one-piece-anatomy.test.tsx b/src/components/settings/__tests__/one-piece-anatomy.test.tsx
new file mode 100644
index 000000000..fbc6f5918
--- /dev/null
+++ b/src/components/settings/__tests__/one-piece-anatomy.test.tsx
@@ -0,0 +1,173 @@
+import { describe, it, expect } from "vitest";
+import { readFileSync, readdirSync, statSync } from "node:fs";
+import { join } from "node:path";
+import { renderToStaticMarkup } from "react-dom/server";
+import { Bell } from "lucide-react";
+
+import { I18nProvider } from "@/lib/i18n/context";
+import { PageHeader } from "@/components/ui/page-header";
+import { SettingsCard } from "@/components/settings/settings-card";
+import { SettingsCardHeader } from "@/components/settings/_card-header";
+import { SettingsCardActions } from "@/components/settings/_card-actions";
+
+/**
+ * Settings + Admin read as one surface. These pin the parts of that claim
+ * that can be checked exactly:
+ *
+ *   1. the header→body step is owned by `SettingsCard`, so a call site can
+ *      neither re-declare it nor drift from it;
+ *   2. the card header's description slot carries no vertical rhythm — the
+ *      licence call sites used to stack explainer paragraphs into a muted
+ *      `text-xs` slot;
+ *   3. the action row has one shape, and its one documented exception
+ *      (a card whose only actions are links out) is spelled as a prop;
+ *   4. `pl-7` — the off-scale body gutter that broke wherever two
+ *      neighbouring cards disagreed about it — stays gone;
+ *   5. both consoles render their page heading through `PageHeader`, so
+ *      Settings and Admin cannot drift a step apart from the module pages
+ *      or from each other.
+ */
+
+function render(node: React.ReactNode) {
+  return renderToStaticMarkup(
+    <I18nProvider initialLocale="en">{node}</I18nProvider>,
+  );
+}
+
+const ROOT = process.cwd();
+
+function walk(dir: string, out: string[] = []): string[] {
+  for (const entry of readdirSync(dir)) {
+    const full = join(dir, entry);
+    if (statSync(full).isDirectory()) {
+      if (entry === "__tests__") continue;
+      walk(full, out);
+    } else if (entry.endsWith(".tsx")) {
+      out.push(full);
+    }
+  }
+  return out;
+}
+
+describe("SettingsCard — the container owns the rhythm", () => {
+  it("paints the gap-based shell, not a call-site margin", () => {
+    const html = render(<SettingsCard>body</SettingsCard>);
+    expect(html).toContain("flex flex-col gap-4");
+    expect(html).toContain("p-4");
+    expect(html).toContain("md:p-6");
+  });
+
+  it("gives the semantic-landmark variant the same rhythm", () => {
+    const html = render(<SettingsCard as="section">body</SettingsCard>);
+    expect(html).toContain("<section");
+    expect(html).toContain("flex flex-col gap-4");
+  });
+
+  it("still lets a dense card override the gap on the card itself", () => {
+    const html = render(<SettingsCard className="gap-2">body</SettingsCard>);
+    expect(html).toContain("gap-2");
+  });
+});
+
+describe("SettingsCardHeader — one description sentence, one text run", () => {
+  it("renders the description without any vertical rhythm of its own", () => {
+    const html = render(
+      <SettingsCardHeader icon={Bell} title="Channels" description="One." />,
+    );
+    // The slot is muted meta at the size floor…
+    expect(html).toContain("text-muted-foreground text-xs");
+    // …and carries no `space-y-*`, so a stack of <p>s cannot read as prose.
+    const slot = html.slice(html.indexOf("text-muted-foreground text-xs"));
+    expect(slot.slice(0, 60)).not.toMatch(/space-y-/);
+  });
+
+  it("keeps the title in the foreground tier at one size", () => {
+    const html = render(<SettingsCardHeader icon={Bell} title="Channels" />);
+    expect(html).toMatch(/<h2[^>]*class="text-lg font-semibold"/);
+  });
+});
+
+describe("SettingsCardActions — one row, one shape", () => {
+  it("puts the row at the trailing edge by default", () => {
+    const html = render(
+      <SettingsCardActions>
+        <button>Save</button>
+      </SettingsCardActions>,
+    );
+    expect(html).toContain('data-slot="settings-card-actions"');
+    expect(html).toContain("justify-end");
+  });
+
+  it("spells the link-row exception as a prop rather than a local class", () => {
+    const html = render(
+      <SettingsCardActions align="start">
+        <a href="/x">Open</a>
+      </SettingsCardActions>,
+    );
+    expect(html).toContain("justify-start");
+    expect(html).not.toContain("justify-end");
+  });
+});
+
+describe("PageHeader — the one page heading, including the shells", () => {
+  it("renders the explainer in the muted tier", () => {
+    const html = render(<PageHeader title="Settings" description="Yours." />);
+    expect(html).toMatch(/<p class="text-muted-foreground text-sm">Yours\./);
+  });
+
+  it("renders a second copy as a heading role, never a second <h1>", () => {
+    const html = render(
+      <PageHeader headingAs="div" title="Settings" description="Yours." />,
+    );
+    expect(html).not.toContain("<h1");
+    expect(html).toContain('role="heading"');
+    expect(html).toContain('aria-level="1"');
+  });
+
+  it("never truncates the explainer", () => {
+    const html = render(
+      <PageHeader title="Medications" description="Schedules and reminders." />,
+    );
+    expect(html).not.toContain("truncate");
+  });
+});
+
+describe("the Settings and Admin shells route their heading through PageHeader", () => {
+  for (const shell of [
+    join("src", "components", "settings", "settings-shell.tsx"),
+    join("src", "components", "admin", "admin-shell.tsx"),
+  ]) {
+    it(`${shell} has no hand-rolled H1 block`, () => {
+      const source = readFileSync(join(ROOT, shell), "utf8");
+      expect(source).toContain("<PageHeader");
+      // The hand-rolled copies were a literal `<h1 className="text-2xl …">`
+      // plus a `role="heading"` div beside it. Both belong to the primitive.
+      const code = source
+        .split("\n")
+        .filter((line) => !line.trimStart().startsWith("//"))
+        .join("\n");
+      expect(code).not.toMatch(/<h1\b/);
+      expect(code).not.toMatch(/role="heading"/);
+    });
+  }
+});
+
+describe("the abolished body gutter stays abolished", () => {
+  it("has no `pl-7` left under Settings or Admin", () => {
+    const offenders: string[] = [];
+    for (const dir of ["settings", "admin"]) {
+      for (const file of walk(join(ROOT, "src", "components", dir))) {
+        const source = readFileSync(file, "utf8");
+        for (const [i, line] of source.split("\n").entries()) {
+          // Comments may name the class they retired; class strings may not.
+          if (line.trimStart().startsWith("*")) continue;
+          if (line.includes("//")) continue;
+          if (/\bpl-7\b/.test(line)) {
+            offenders.push(`${file.slice(ROOT.length + 1)}:${i + 1}`);
+          }
+        }
+      }
+    }
+    expect(offenders).toEqual([]);
+  });
+});
diff --git a/src/components/settings/_card-actions.tsx b/src/components/settings/_card-actions.tsx
new file mode 100644
index 000000000..290b9f862
--- /dev/null
+++ b/src/components/settings/_card-actions.tsx
@@ -0,0 +1,46 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+/**
+ * `<SettingsCardActions>` — the action row of a Settings or Admin card.
+ *
+ * The audit found four positions (bottom-right, bottom-left, the header's
+ * status slot, inline mid-card) and five variants carrying the SAME role —
+ * "the primary action of this card" — sometimes two of them in one file. The
+ * two sections that already read right (`score-section.tsx`,
+ * `coach-prefs-section.tsx`) agreed on one shape, and this is it.
+ *
+ * The contract (design standards §12):
+ *   - The row is the LAST thing in the card. Status lines and results sit
+ *     above it; a result set big enough to need a frame becomes its own card.
+ *   - Primary action last (rightmost), `variant` default, `size="sm"` with
+ *     the `min-h-11` mobile tap floor. One per card.
+ *   - Secondary action `outline`, before the primary in the same row.
+ *   - Destructive card-wide action: same row, `variant="destructive"` —
+ *     never an `outline` hand-tinted with `text-destructive`.
+ *
+ * `align="start"` is the one documented exception: a card whose only actions
+ * are deep links out of it (privacy, about, export) has no primary action, so
+ * its links read with the text on the left rather than against it.
+ */
+export function SettingsCardActions({
+  align = "end",
+  className,
+  children,
+  ...props
+}: React.ComponentProps<"div"> & { align?: "start" | "end" }) {
+  return (
+    <div
+      data-slot="settings-card-actions"
+      className={cn(
+        "flex flex-wrap items-center gap-2",
+        align === "end" ? "justify-end" : "justify-start",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}
diff --git a/src/components/settings/_card-header.tsx b/src/components/settings/_card-header.tsx
index 8b4e352b3..ee622b7f6 100644
--- a/src/components/settings/_card-header.tsx
+++ b/src/components/settings/_card-header.tsx
@@ -47,9 +47,13 @@ export interface SettingsCardHeaderProps {
    *  after the title (e.g. a tag chip + experimental badge). The title
    *  row wraps so the accessories reflow below on a narrow viewport. */
   titleAccessory?: React.ReactNode;
-  /** Optional short description rendered as muted text below the
-   *  title row. Either a string (paragraph) or arbitrary node
-   *  (links, badges, extra sub-notes, etc.). */
+  /** Optional description rendered as muted text below the title row.
+   *  Exactly ONE sentence, guideline ≤ 120 characters (design standards
+   *  §3). A node is accepted so the sentence can carry an inline link,
+   *  not so it can carry a second paragraph — the slot owns no vertical
+   *  rhythm, so a stack of `<p>`s collapses into one run and reads
+   *  broken. Multi-sentence prose goes in the body as
+   *  `<p className="text-sm">` (foreground). */
   description?: React.ReactNode;
   /** Optional right-aligned status surface — typically an
    *  `<IntegrationStatusPill>` or a wrapper around badges. */
@@ -88,10 +92,11 @@ export function SettingsCardHeader({
             <div className="flex shrink-0 items-center gap-2">{status}</div>
           ) : null}
         </div>
+        {/* One sentence, one text run. This slot deliberately carries no
+            `space-y-*`: the vertical rhythm was the licence call sites used
+            to stack explainer paragraphs into a muted `text-xs` slot. */}
         {description ? (
-          <div className="text-muted-foreground space-y-1 text-xs">
-            {description}
-          </div>
+          <div className="text-muted-foreground text-xs">{description}</div>
         ) : null}
       </div>
     </header>
diff --git a/src/components/settings/about-me-section.tsx b/src/components/settings/about-me-section.tsx
index f11286b9c..e8b524300 100644
--- a/src/components/settings/about-me-section.tsx
+++ b/src/components/settings/about-me-section.tsx
@@ -195,7 +195,6 @@ export function AboutMeSection({
       as="section"
       aria-labelledby="settings-ai-about-me-title"
       data-testid="settings-about-me-card"
-      className="space-y-4"
     >
       <div className="flex flex-wrap items-start justify-between gap-3">
         <SettingsCardHeader
@@ -229,7 +228,7 @@ export function AboutMeSection({
         </div>
       </div>
 
-      <div className="pl-7">
+      <div>
         {structuredField(
           "allergies",
           t("settings.ai.aboutMe.allergiesLabel"),
@@ -237,7 +236,7 @@ export function AboutMeSection({
         )}
       </div>
 
-      <div className="space-y-1.5 pl-7">
+      <div className="space-y-1.5">
         <Label htmlFor="settings-about-me-freetext">
           {t("settings.ai.aboutMe.freeTextLabel")}
         </Label>
@@ -255,7 +254,7 @@ export function AboutMeSection({
         />
       </div>
 
-      <div className="flex flex-wrap items-center justify-between gap-3 pl-7">
+      <div className="flex flex-wrap items-center justify-between gap-3">
         <p
           data-testid="settings-about-me-count"
           className="text-muted-foreground text-xs tabular-nums"
@@ -339,14 +338,14 @@ export function AboutMeSection({
         </p>
       )}
 
-      <p className="text-muted-foreground border-border border-t pt-3 pl-7 text-xs">
+      <p className="text-muted-foreground border-border border-t pt-3 text-xs">
         {t("settings.ai.aboutMe.hint")} {t("settings.ai.aboutMe.profileHint")}
       </p>
 
       {/* v1.25.12 — cross-link to the Anamnese (medical-history) home, where the
           chronic conditions the Coach watches now live alongside allergies +
           family history as one coherent medical history. */}
-      <p className="text-muted-foreground pl-7 text-xs">
+      <p className="text-muted-foreground text-xs">
         {t("settings.ai.aboutMe.recordsLink")}{" "}
         <Link
           href="/settings/anamnesis"
diff --git a/src/components/settings/about-section.tsx b/src/components/settings/about-section.tsx
index 9d827efea..1770f6711 100644
--- a/src/components/settings/about-section.tsx
+++ b/src/components/settings/about-section.tsx
@@ -197,18 +197,17 @@ export function AboutSection() {
           icon={Info}
           title="HealthLog"
           description={t("settings.about.identityDescription")}
-          className="mb-4"
         />
 
         {isLoading || !version ? (
-          <div className="flex items-center gap-2 pl-7">
+          <div className="flex items-center gap-2">
             <Loader2 className="text-muted-foreground h-4 w-4 animate-spin motion-reduce:animate-none" />
             <span className="text-muted-foreground text-sm">
               {t("common.loading")}
             </span>
           </div>
         ) : (
-          <dl className="flex flex-wrap items-baseline gap-x-6 gap-y-3 pl-7 text-sm">
+          <dl className="flex flex-wrap items-baseline gap-x-6 gap-y-3 text-sm">
             <div className="flex items-baseline gap-2">
               <dt className="text-muted-foreground text-xs tracking-wide uppercase">
                 {t("settings.about.version")}
@@ -272,9 +271,8 @@ export function AboutSection() {
             icon={BookOpen}
             title={t("settings.about.linksHeading")}
             description={t("settings.about.linksDescription")}
-            className="mb-4"
           />
-          <div className="flex flex-col gap-2 pl-7 sm:flex-row sm:flex-wrap">
+          <div className="flex flex-col gap-2 sm:flex-row sm:flex-wrap">
             <Button
               asChild
               variant="outline"
diff --git a/src/components/settings/access/grant-invite-card.tsx b/src/components/settings/access/grant-invite-card.tsx
index 9c34a61b3..e63d0acd1 100644
--- a/src/components/settings/access/grant-invite-card.tsx
+++ b/src/components/settings/access/grant-invite-card.tsx
@@ -148,7 +148,7 @@ export function GrantInviteCard() {
         title={t("recordSharing.invite.title")}
         description={t("recordSharing.invite.description")}
       />
-      <form onSubmit={submit} className="mt-4 space-y-3">
+      <form onSubmit={submit} className="space-y-3">
         <div className="space-y-1.5">
           <Label htmlFor="grant-invite-identifier">
             {t("recordSharing.invite.identifierLabel")}
diff --git a/src/components/settings/access/grants-given-card.tsx b/src/components/settings/access/grants-given-card.tsx
index f90b87db0..3ee4ec6d3 100644
--- a/src/components/settings/access/grants-given-card.tsx
+++ b/src/components/settings/access/grants-given-card.tsx
@@ -52,7 +52,7 @@ export function GrantsGivenCard() {
         title={t("recordSharing.given.title")}
         description={t("recordSharing.given.description")}
       />
-      <div className="mt-4">
+      <div>
         {isLoading && (
           <Loader2
             className="text-muted-foreground size-5 animate-spin motion-reduce:animate-none"
diff --git a/src/components/settings/access/grants-received-card.tsx b/src/components/settings/access/grants-received-card.tsx
index dd7f581b5..f2d0a2eaf 100644
--- a/src/components/settings/access/grants-received-card.tsx
+++ b/src/components/settings/access/grants-received-card.tsx
@@ -68,7 +68,7 @@ export function GrantsReceivedCard() {
         title={t("recordSharing.received.title")}
         description={t("recordSharing.received.description")}
       />
-      <div className="mt-4">
+      <div>
         {isLoading && (
           <Loader2
             className="text-muted-foreground size-5 animate-spin motion-reduce:animate-none"
diff --git a/src/components/settings/access/managed-profile-card.tsx b/src/components/settings/access/managed-profile-card.tsx
index 8d75699fa..c80c97cfc 100644
--- a/src/components/settings/access/managed-profile-card.tsx
+++ b/src/components/settings/access/managed-profile-card.tsx
@@ -75,7 +75,7 @@ export function ManagedProfileCard() {
         title={t("recordSharing.managed.title")}
         description={t("recordSharing.managed.description")}
       />
-      <div className="mt-4 space-y-4">
+      <div className="space-y-4">
         {/* Content, not meta: this is what somebody is consenting to take on,
             and UI-STANDARDS §3 reserves muted for the incidental. */}
         <p data-slot="managed-profile-explainer" className="text-sm">
diff --git a/src/components/settings/access/record-activity-card.tsx b/src/components/settings/access/record-activity-card.tsx
index cc8dbede9..cf0854459 100644
--- a/src/components/settings/access/record-activity-card.tsx
+++ b/src/components/settings/access/record-activity-card.tsx
@@ -50,7 +50,7 @@ export function RecordActivityCard() {
         title={t("recordSharing.activity.title")}
         description={t("recordSharing.activity.description")}
       />
-      <div className="mt-4 space-y-3">
+      <div className="space-y-3">
         {/* The window, stated. Rendered only once the server has said what it
             is — a placeholder number here would be exactly the invented value
             the sentence exists to avoid. */}
diff --git a/src/components/settings/account-section/avatar-section.tsx b/src/components/settings/account-section/avatar-section.tsx
index d65c177a6..90c6b2314 100644
--- a/src/components/settings/account-section/avatar-section.tsx
+++ b/src/components/settings/account-section/avatar-section.tsx
@@ -108,20 +108,16 @@ export function AvatarSection() {
 
   return (
     <SettingsCard>
-      <SettingsCardHeader
-        icon={ImageUp}
-        title={t("settings.avatar.title")}
-        className="mb-4"
-      />
+      <SettingsCardHeader icon={ImageUp} title={t("settings.avatar.title")} />
       {/* The accepted formats and limits belong to the sentence that explains
           what this card does, not to a caption of their own under the buttons.
           Two strings rather than one merged key: the same wording is the
           upload's own constraint copy, and a translator keeps the shorter unit
           either way. */}
-      <p className="text-muted-foreground mb-4 pl-7 text-sm">
+      <p className="text-muted-foreground mb-4 text-sm">
         {t("settings.avatar.description")} {t("settings.avatar.hint")}
       </p>
-      <div className="flex items-center gap-4 pl-7">
+      <div className="flex items-center gap-4">
         <Avatar className="size-16">
           {avatarUrl && <AvatarImage src={avatarUrl} alt={user.username} />}
           <AvatarFallback className="text-base">
diff --git a/src/components/settings/account-section/index.tsx b/src/components/settings/account-section/index.tsx
index 4cb6e4f89..9b90ab0a9 100644
--- a/src/components/settings/account-section/index.tsx
+++ b/src/components/settings/account-section/index.tsx
@@ -362,12 +362,8 @@ export function AccountSection() {
       <AvatarSection />
 
       <SettingsCard>
-        <SettingsCardHeader
-          icon={User}
-          title={t("settings.profile")}
-          className="mb-4"
-        />
-        <form onSubmit={handleSaveProfile} className="space-y-4 pl-7">
+        <SettingsCardHeader icon={User} title={t("settings.profile")} />
+        <form onSubmit={handleSaveProfile} className="space-y-4">
           <div className="grid gap-4 sm:grid-cols-2">
             <div className="space-y-2">
               <Label htmlFor="username">{t("settings.username")}</Label>
diff --git a/src/components/settings/advanced-section.tsx b/src/components/settings/advanced-section.tsx
index eb47d5c6c..4fd0054f5 100644
--- a/src/components/settings/advanced-section.tsx
+++ b/src/components/settings/advanced-section.tsx
@@ -151,7 +151,7 @@ function ResearchModeCard() {
         <div
           role="alert"
           data-slot="settings-research-mode-reprompt"
-          className="border-warning/40 bg-warning/10 mt-4 rounded-md border-l-4 px-3 py-2 text-sm"
+          className="border-warning/40 bg-warning/10 rounded-md border-l-4 px-3 py-2 text-sm"
         >
           <p className="text-foreground font-medium">
             {t("settings.researchMode.rePromptTitle")}
@@ -171,7 +171,7 @@ function ResearchModeCard() {
         </div>
       )}
 
-      <div className="mt-4 flex items-start justify-between gap-3">
+      <div className="flex items-start justify-between gap-3">
         <div className="space-y-0.5">
           <p className="text-sm font-medium">
             {t("settings.researchMode.toggleLabel")}
@@ -197,7 +197,7 @@ function ResearchModeCard() {
       {errorMessage && (
         <p
           role="alert"
-          className="text-destructive mt-3 text-sm"
+          className="text-destructive text-sm"
           data-slot="settings-research-mode-error"
         >
           {errorMessage}
diff --git a/src/components/settings/ai/ai-insights-card.tsx b/src/components/settings/ai/ai-insights-card.tsx
index b342015a6..0a75df2a3 100644
--- a/src/components/settings/ai/ai-insights-card.tsx
+++ b/src/components/settings/ai/ai-insights-card.tsx
@@ -140,13 +140,13 @@ export function AiInsightsCard({
   }
 
   return (
-    <SettingsCard className="space-y-4">
+    <SettingsCard>
       {/* The card used to render an icon-only header row (Sparkles +
           status badges, no title), which left the tile unanchored next
           to its titled siblings. It now follows the shared
           `SettingsCardHeader` contract: icon column, title + description
           in the content column, status badges top-right — and the body
-          below indents to the title column (`pl-7`). */}
+          starts on the card edge like every other Settings card. */}
       <SettingsCardHeader
         icon={Sparkles}
         title={t("settings.ai.providerCardTitle")}
@@ -159,7 +159,7 @@ export function AiInsightsCard({
         }
       />
 
-      <div className="space-y-4 pl-7">
+      <div className="space-y-4">
         <ActiveProviderSelect
           value={selectedProvider}
           onChange={pickProvider}
diff --git a/src/components/settings/ai/disable-coach-card.tsx b/src/components/settings/ai/disable-coach-card.tsx
index db637acb2..b75aa198d 100644
--- a/src/components/settings/ai/disable-coach-card.tsx
+++ b/src/components/settings/ai/disable-coach-card.tsx
@@ -169,8 +169,8 @@ export function DisableCoachCard({
           aria-live="polite"
           className={
             msgType === "error"
-              ? "text-destructive mt-3 pl-7 text-xs"
-              : "text-muted-foreground mt-3 pl-7 text-xs"
+              ? "text-destructive mt-3 text-xs"
+              : "text-muted-foreground mt-3 text-xs"
           }
         >
           {msg}
diff --git a/src/components/settings/anamnesis-section.tsx b/src/components/settings/anamnesis-section.tsx
index e317c6bd8..fb8ab9aec 100644
--- a/src/components/settings/anamnesis-section.tsx
+++ b/src/components/settings/anamnesis-section.tsx
@@ -44,7 +44,7 @@ export function AnamnesisSection() {
   return (
     <div className="space-y-6">
       {(coachEnabled || insightsEnabled) && (
-        <SettingsCard className="space-y-4">
+        <SettingsCard>
           <SettingsCardHeader
             icon={EyeOff}
             title={t("records.aiInclusion.cardTitle")}
@@ -55,7 +55,7 @@ export function AnamnesisSection() {
       )}
 
       {coachEnabled && (
-        <SettingsCard className="space-y-4">
+        <SettingsCard>
           <SettingsCardHeader
             icon={HeartPulse}
             title={t("records.conditions.cardTitle")}
@@ -64,7 +64,7 @@ export function AnamnesisSection() {
           <ConditionsManager />
         </SettingsCard>
       )}
-      <SettingsCard className="space-y-4">
+      <SettingsCard>
         <SettingsCardHeader
           icon={ClipboardList}
           title={t("records.profileFacts.cardTitle")}
@@ -73,7 +73,7 @@ export function AnamnesisSection() {
         <HealthProfileFactsManager />
       </SettingsCard>
 
-      <SettingsCard className="space-y-4">
+      <SettingsCard>
         <SettingsCardHeader
           icon={ShieldAlert}
           title={t("records.allergies.cardTitle")}
@@ -82,7 +82,7 @@ export function AnamnesisSection() {
         <AllergyManager />
       </SettingsCard>
 
-      <SettingsCard className="space-y-4">
+      <SettingsCard>
         <SettingsCardHeader
           icon={Users}
           title={t("records.family.cardTitle")}
diff --git a/src/components/settings/api-section.tsx b/src/components/settings/api-section.tsx
index b86dd1933..c8c4e740c 100644
--- a/src/components/settings/api-section.tsx
+++ b/src/components/settings/api-section.tsx
@@ -75,7 +75,7 @@ function ApiEndpointsCard() {
       />
 
       {/* Desktop table — verbatim layout for md+. */}
-      <div className="border-border mt-4 hidden overflow-x-auto rounded-lg border md:block">
+      <div className="border-border hidden overflow-x-auto rounded-lg border md:block">
         <table className="w-full min-w-[760px] text-xs md:min-w-0">
           <thead>
             <tr className="bg-muted/40 text-muted-foreground border-b">
@@ -109,7 +109,7 @@ function ApiEndpointsCard() {
       {/* Mobile card list — each endpoint stacks its columns vertically
           with a labelled meta row. No horizontal scroll. */}
       <ul
-        className="mt-4 space-y-2 md:hidden"
+        className="space-y-2 md:hidden"
         data-testid="settings-api-endpoints-mobile-list"
       >
         {endpoints.map((endpoint) => (
@@ -206,7 +206,7 @@ function ApiTokensCard() {
         }
       />
 
-      <div className="mt-4 space-y-4 pl-7">
+      <div className="space-y-4">
         {/* Tokens are no longer minted here. The generic mint issued a
             `medication:ingest` token that the ingest endpoint refused (it
             gates on the per-medication grant too) and that every other
diff --git a/src/components/settings/coach-memory-section.tsx b/src/components/settings/coach-memory-section.tsx
index 5b4a40e34..96e0ce0c8 100644
--- a/src/components/settings/coach-memory-section.tsx
+++ b/src/components/settings/coach-memory-section.tsx
@@ -141,7 +141,6 @@ export function CoachMemorySection({
       as="section"
       aria-labelledby="settings-ai-coach-memory-title"
       data-testid="settings-coach-memory-card"
-      className="space-y-4"
     >
       <SettingsCardHeader
         icon={Brain}
diff --git a/src/components/settings/coach-nudge-card.tsx b/src/components/settings/coach-nudge-card.tsx
index 3318d6fe9..c675cbcb2 100644
--- a/src/components/settings/coach-nudge-card.tsx
+++ b/src/components/settings/coach-nudge-card.tsx
@@ -225,7 +225,7 @@ export function CoachNudgeCard({
         }
       />
       {enabled && (
-        <div className="mt-4 space-y-3 pl-7">
+        <div className="space-y-3">
           <p className="text-sm font-medium">
             {t("notifications.coachNudge.groupsLabel")}
           </p>
@@ -307,7 +307,7 @@ export function CoachNudgeCard({
           push-nudge master switch above (a user can keep nudges but silence
           the example prompts), so it sits outside the `enabled` gate and rides
           the same `coach` prefs blob. */}
-      <div className="border-border/60 mt-4 flex min-h-11 items-center justify-between gap-3 border-t pt-4">
+      <div className="border-border/60 flex min-h-11 items-center justify-between gap-3 border-t pt-4">
         <div className="min-w-0">
           <p className="text-sm">
             {t("notifications.coachNudge.suggestionsLabel")}
@@ -331,8 +331,8 @@ export function CoachNudgeCard({
           aria-live="polite"
           className={
             msgType === "error"
-              ? "text-destructive mt-3 pl-7 text-sm"
-              : "text-muted-foreground mt-3 pl-7 text-sm"
+              ? "text-destructive mt-3 text-sm"
+              : "text-muted-foreground mt-3 text-sm"
           }
         >
           {msg}
diff --git a/src/components/settings/coach-prefs-section.tsx b/src/components/settings/coach-prefs-section.tsx
index deba30815..6afc62907 100644
--- a/src/components/settings/coach-prefs-section.tsx
+++ b/src/components/settings/coach-prefs-section.tsx
@@ -120,10 +120,7 @@ export function CoachPrefsSection({ isAuthenticated }: CoachPrefsSectionProps) {
         description={t("insights.coach.settingsDescription")}
       />
       {isLoading ? (
-        <div
-          data-slot="coach-prefs-skeleton"
-          className="mt-4 flex flex-col gap-4 pl-7"
-        >
+        <div data-slot="coach-prefs-skeleton" className="flex flex-col gap-4">
           <div className="flex flex-col gap-2">
             <Skeleton className="h-3 w-20" />
             <Skeleton className="h-9 w-full" />
@@ -139,7 +136,7 @@ export function CoachPrefsSection({ isAuthenticated }: CoachPrefsSectionProps) {
           </div>
         </div>
       ) : (
-        <div className="mt-4 flex flex-col gap-4 pl-7">
+        <div className="flex flex-col gap-4">
           <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
             {/* Tone */}
             <div className="flex flex-col gap-2">
@@ -338,7 +335,7 @@ export function CoachPrefsSection({ isAuthenticated }: CoachPrefsSectionProps) {
           </div>
         </div>
       )}
-      <div className="mt-4 flex justify-end pl-7">
+      <div className="flex justify-end">
         <Button
           type="button"
           size="sm"
diff --git a/src/components/settings/coach-reminders-section.tsx b/src/components/settings/coach-reminders-section.tsx
index 245af87d0..609861e25 100644
--- a/src/components/settings/coach-reminders-section.tsx
+++ b/src/components/settings/coach-reminders-section.tsx
@@ -155,7 +155,6 @@ export function CoachRemindersSection({
       as="section"
       aria-labelledby="settings-ai-coach-reminders-title"
       data-testid="settings-coach-reminders-card"
-      className="space-y-4"
     >
       <SettingsCardHeader
         icon={BellRing}
diff --git a/src/components/settings/cycle-tracking-card.tsx b/src/components/settings/cycle-tracking-card.tsx
index c4469b068..c6237d875 100644
--- a/src/components/settings/cycle-tracking-card.tsx
+++ b/src/components/settings/cycle-tracking-card.tsx
@@ -66,7 +66,7 @@ export function CycleTrackingCard({
         title={t("settings.cycleTracking.title")}
         description={t("settings.cycleTracking.description")}
       />
-      <div className="mt-4 space-y-4 pl-7">
+      <div className="space-y-4">
         <div className="flex items-start justify-between gap-4">
           <Label htmlFor="cycle-tracking-enable" className="text-sm">
             {t("settings.cycleTracking.enable")}
diff --git a/src/components/settings/dashboard-layout-section.tsx b/src/components/settings/dashboard-layout-section.tsx
index 445b1954f..e3cb852be 100644
--- a/src/components/settings/dashboard-layout-section.tsx
+++ b/src/components/settings/dashboard-layout-section.tsx
@@ -440,7 +440,7 @@ export function DashboardLayoutSection({ id }: { id: string }) {
   const dirty = draft !== null && layout !== null;
 
   return (
-    <SettingsCard id={id} className="scroll-mt-28 space-y-4">
+    <SettingsCard id={id} className="scroll-mt-28">
       {/* v1.4.19 A6 — title / action row uses the same stack-on-mobile,
           right-align-on-desktop contract as Account → Password +
           Restart onboarding tour. Avoids the long German "Auf Standard
diff --git a/src/components/settings/email-card.tsx b/src/components/settings/email-card.tsx
index bbbfc7ee4..4899f7d27 100644
--- a/src/components/settings/email-card.tsx
+++ b/src/components/settings/email-card.tsx
@@ -120,7 +120,7 @@ export function EmailCard({ isAuthenticated }: { isAuthenticated: boolean }) {
         description={t("settings.emailDescription")}
       />
 
-      <div className="mt-4 space-y-4 pl-7">
+      <div className="space-y-4">
         <div className="flex items-center justify-between">
           <Label htmlFor="email-toggle">{t("settings.emailEnable")}</Label>
           <Switch
diff --git a/src/components/settings/environment-section.tsx b/src/components/settings/environment-section.tsx
index ad8dc7e54..ec6c6cbfb 100644
--- a/src/components/settings/environment-section.tsx
+++ b/src/components/settings/environment-section.tsx
@@ -203,9 +203,8 @@ export function EnvironmentSection() {
         <SettingsCardHeader
           icon={CloudSun}
           title={t("settings.sections.environment.title")}
-          className="mb-2"
         />
-        <p className="text-muted-foreground pl-7 text-sm leading-relaxed">
+        <p className="text-muted-foreground text-sm leading-relaxed">
           {t("settings.sections.environment.disabledHint")}
         </p>
       </SettingsCard>
@@ -227,12 +226,11 @@ export function EnvironmentSection() {
         <SettingsCardHeader
           icon={MapPin}
           title={t("settings.sections.environment.home.title")}
-          className="mb-2"
         />
-        <p className="text-muted-foreground mb-3 pl-7 text-sm leading-relaxed">
+        <p className="text-muted-foreground mb-3 text-sm leading-relaxed">
           {t("settings.sections.environment.home.description")}
         </p>
-        <div className="space-y-3 pl-7">
+        <div className="space-y-3">
           {home ? (
             <div className="space-y-1">
               <p className="text-sm" data-slot="environment-home-current">
@@ -315,12 +313,11 @@ export function EnvironmentSection() {
         <SettingsCardHeader
           icon={Plane}
           title={t("settings.sections.environment.travel.title")}
-          className="mb-2"
         />
-        <p className="text-muted-foreground mb-3 pl-7 text-sm leading-relaxed">
+        <p className="text-muted-foreground mb-3 text-sm leading-relaxed">
           {t("settings.sections.environment.travel.description")}
         </p>
-        <div className="space-y-3 pl-7">
+        <div className="space-y-3">
           {data && data.travel.length > 0 ? (
             <ul className="divide-border divide-y rounded-md border">
               {data.travel.map((tr) => (
@@ -459,12 +456,11 @@ export function EnvironmentSection() {
         <SettingsCardHeader
           icon={CloudSun}
           title={t("settings.sections.environment.backfill.title")}
-          className="mb-2"
         />
-        <p className="text-muted-foreground mb-3 pl-7 text-sm leading-relaxed">
+        <p className="text-muted-foreground mb-3 text-sm leading-relaxed">
           {t("settings.sections.environment.backfill.description")}
         </p>
-        <div className="flex flex-wrap items-end gap-2 pl-7">
+        <div className="flex flex-wrap items-end gap-2">
           <div className="space-y-1">
             <Label htmlFor="env-backfill-start">
               {t("settings.sections.environment.startDate")}
@@ -499,7 +495,7 @@ export function EnvironmentSection() {
           </Button>
         </div>
         {data && (
-          <p className="text-muted-foreground mt-3 pl-7 text-xs">
+          <p className="text-muted-foreground text-xs">
             {t("settings.sections.environment.storedDays", {
               count: data.context.days,
             })}
@@ -509,7 +505,7 @@ export function EnvironmentSection() {
           <p
             role="status"
             data-testid="environment-fetch-failed"
-            className="text-destructive mt-1 pl-7 text-xs"
+            className="text-destructive mt-1 text-xs"
           >
             {tCount(
               "settings.sections.environment.fetchFailed",
diff --git a/src/components/settings/export-section.tsx b/src/components/settings/export-section.tsx
index dd02b9edd..9fb82dd58 100644
--- a/src/components/settings/export-section.tsx
+++ b/src/components/settings/export-section.tsx
@@ -144,8 +144,8 @@ function ExportCardShell({
           </span>
         }
       />
-      {children && <div className="mt-3 space-y-3">{children}</div>}
-      <div className="mt-4 flex flex-wrap items-center gap-3">{footer}</div>
+      {children && <div className="space-y-3">{children}</div>}
+      <div className="flex flex-wrap items-center gap-3">{footer}</div>
     </SettingsCard>
   );
 }
diff --git a/src/components/settings/glucose-reference-card.tsx b/src/components/settings/glucose-reference-card.tsx
index c4579ca81..03ed2bc2d 100644
--- a/src/components/settings/glucose-reference-card.tsx
+++ b/src/components/settings/glucose-reference-card.tsx
@@ -70,7 +70,7 @@ export function GlucoseReferenceCard() {
         title={t("settings.glucoseReference.title")}
         description={t("settings.glucoseReference.description")}
       />
-      <div className="mt-4 space-y-4 pl-7">
+      <div className="space-y-4">
         <div className="flex items-start justify-between gap-4">
           <Label htmlFor="glucose-reference-diabetes" className="text-sm">
             {t("settings.glucoseReference.enable")}
diff --git a/src/components/settings/import-panel/import-card-shell.tsx b/src/components/settings/import-panel/import-card-shell.tsx
index 496ddb697..4d2076c22 100644
--- a/src/components/settings/import-panel/import-card-shell.tsx
+++ b/src/components/settings/import-panel/import-card-shell.tsx
@@ -25,7 +25,7 @@ export function ImportCardShell({
         <h3 className="text-base font-semibold">{title}</h3>
       </div>
       <p className="text-muted-foreground mt-1 text-xs">{description}</p>
-      <div className="mt-3 flex flex-1 flex-col gap-3">{children}</div>
+      <div className="flex flex-1 flex-col gap-3">{children}</div>
     </SettingsCard>
   );
 }
diff --git a/src/components/settings/injection-sites-card.tsx b/src/components/settings/injection-sites-card.tsx
index 04473f624..b4207d198 100644
--- a/src/components/settings/injection-sites-card.tsx
+++ b/src/components/settings/injection-sites-card.tsx
@@ -73,7 +73,7 @@ export function InjectionSitesCard({
         title={t("settings.globalExcludedInjectionSitesLabel")}
         description={t("settings.globalExcludedInjectionSitesHint")}
       />
-      <div className="mt-4 grid grid-cols-1 gap-2 pl-7 sm:grid-cols-2">
+      <div className="grid grid-cols-1 gap-2 sm:grid-cols-2">
         {INJECTION_SITE_KEYS.map((site) => (
           <label key={site} className="flex items-center gap-2 text-sm">
             <Checkbox
diff --git a/src/components/settings/insights-pill-order-section.tsx b/src/components/settings/insights-pill-order-section.tsx
index 0f7d2b0e1..fe2dc191f 100644
--- a/src/components/settings/insights-pill-order-section.tsx
+++ b/src/components/settings/insights-pill-order-section.tsx
@@ -257,7 +257,6 @@ export function InsightsPillOrderSection({ id }: { id?: string }) {
       id={id}
       data-slot="insights-pill-order-section"
       aria-labelledby="insights-pill-order-title"
-      className="space-y-4"
     >
       <SettingsCardHeader
         icon={ListOrdered}
diff --git a/src/components/settings/integrations/apple-health-card.tsx b/src/components/settings/integrations/apple-health-card.tsx
index 858573373..fa277d268 100644
--- a/src/components/settings/integrations/apple-health-card.tsx
+++ b/src/components/settings/integrations/apple-health-card.tsx
@@ -160,12 +160,9 @@ export function AppleHealthCard({ enabled }: { enabled: boolean }) {
         }
       />
 
-      <hr
-        data-testid="integration-card-divider"
-        className="border-border/60 mt-4"
-      />
+      <hr data-testid="integration-card-divider" className="border-border/60" />
 
-      <div className="mt-4 space-y-4 pl-7">
+      <div className="space-y-4">
         {isError && (
           <IntegrationErrorMessage
             message={t("settings.appleHealth.status.unavailable")}
diff --git a/src/components/settings/integrations/fitbit-card.tsx b/src/components/settings/integrations/fitbit-card.tsx
index 93131a6fb..e22f3bf10 100644
--- a/src/components/settings/integrations/fitbit-card.tsx
+++ b/src/components/settings/integrations/fitbit-card.tsx
@@ -243,12 +243,9 @@ export function FitbitCard({
         }
       />
 
-      <hr
-        data-testid="integration-card-divider"
-        className="border-border/60 mt-4"
-      />
+      <hr data-testid="integration-card-divider" className="border-border/60" />
 
-      <div className="mt-4 space-y-4 pl-7">
+      <div className="space-y-4">
         {errorMessage && <IntegrationErrorMessage message={errorMessage} />}
         {/* Parked-integration resume CTA. Surfaces only when the row
             state is `parked` (>24h of persistent failures). The button
diff --git a/src/components/settings/integrations/google-health-card.tsx b/src/components/settings/integrations/google-health-card.tsx
index c0bc37130..dfd702bf0 100644
--- a/src/components/settings/integrations/google-health-card.tsx
+++ b/src/components/settings/integrations/google-health-card.tsx
@@ -415,12 +415,9 @@ export function GoogleHealthCard({
         }
       />
 
-      <hr
-        data-testid="integration-card-divider"
-        className="border-border/60 mt-4"
-      />
+      <hr data-testid="integration-card-divider" className="border-border/60" />
 
-      <div className="mt-4 space-y-4 pl-7">
+      <div className="space-y-4">
         {errorMessage && <IntegrationErrorMessage message={errorMessage} />}
 
         {/* Re-consent CTA — distinct from parked/disconnected. Google expires
diff --git a/src/components/settings/integrations/integration-fallback-row.tsx b/src/components/settings/integrations/integration-fallback-row.tsx
index 982a354b7..c18f6c55a 100644
--- a/src/components/settings/integrations/integration-fallback-row.tsx
+++ b/src/components/settings/integrations/integration-fallback-row.tsx
@@ -95,7 +95,7 @@ export function IntegrationFallbackRow({
           />
         }
       />
-      <p className="text-muted-foreground mt-4 pl-7 text-xs">{meta}</p>
+      <p className="text-muted-foreground text-xs">{meta}</p>
     </SettingsCard>
   );
 }
diff --git a/src/components/settings/integrations/nightscout-card.tsx b/src/components/settings/integrations/nightscout-card.tsx
index a62966071..4506a0ab0 100644
--- a/src/components/settings/integrations/nightscout-card.tsx
+++ b/src/components/settings/integrations/nightscout-card.tsx
@@ -216,12 +216,9 @@ export function NightscoutCard({
         }
       />
 
-      <hr
-        data-testid="integration-card-divider"
-        className="border-border/60 mt-4"
-      />
+      <hr data-testid="integration-card-divider" className="border-border/60" />
 
-      <div className="mt-4 space-y-4 pl-7">
+      <div className="space-y-4">
         {errorMessage && <IntegrationErrorMessage message={errorMessage} />}
         {operatorApprovalRequired && (
           <div
diff --git a/src/components/settings/integrations/oauth-provider-card.tsx b/src/components/settings/integrations/oauth-provider-card.tsx
index ece139fa8..2e843d291 100644
--- a/src/components/settings/integrations/oauth-provider-card.tsx
+++ b/src/components/settings/integrations/oauth-provider-card.tsx
@@ -285,12 +285,9 @@ export function OAuthProviderCard({
         }
       />
 
-      <hr
-        data-testid="integration-card-divider"
-        className="border-border/60 mt-4"
-      />
+      <hr data-testid="integration-card-divider" className="border-border/60" />
 
-      <div className="mt-4 space-y-4 pl-7">
+      <div className="space-y-4">
         {errorMessage && (
           <div data-testid={`${provider}-error`}>
             <IntegrationErrorMessage message={errorMessage} />
diff --git a/src/components/settings/integrations/whoop-card.tsx b/src/components/settings/integrations/whoop-card.tsx
index f9828927c..6f11d4233 100644
--- a/src/components/settings/integrations/whoop-card.tsx
+++ b/src/components/settings/integrations/whoop-card.tsx
@@ -224,12 +224,9 @@ export function WhoopCard({
         }
       />
 
-      <hr
-        data-testid="integration-card-divider"
-        className="border-border/60 mt-4"
-      />
+      <hr data-testid="integration-card-divider" className="border-border/60" />
 
-      <div className="mt-4 space-y-4 pl-7">
+      <div className="space-y-4">
         {errorMessage && <IntegrationErrorMessage message={errorMessage} />}
         {/* Parked-integration resume CTA. Surfaces only when the row
             state is `parked` (>24h of persistent failures). The button
diff --git a/src/components/settings/integrations/withings-card.tsx b/src/components/settings/integrations/withings-card.tsx
index 947938321..0e8768942 100644
--- a/src/components/settings/integrations/withings-card.tsx
+++ b/src/components/settings/integrations/withings-card.tsx
@@ -236,12 +236,9 @@ export function WithingsCard({
         }
       />
 
-      <hr
-        data-testid="integration-card-divider"
-        className="border-border/60 mt-4"
-      />
+      <hr data-testid="integration-card-divider" className="border-border/60" />
 
-      <div className="mt-4 space-y-4 pl-7">
+      <div className="space-y-4">
         {errorMessage && <IntegrationErrorMessage message={errorMessage} />}
         {/* v1.4.25 W5d — Withings activity-scope reconnect banner.
             Only paints when (a) the user has an active Withings
diff --git a/src/components/settings/low-stock-card.tsx b/src/components/settings/low-stock-card.tsx
index de3aeca32..caf65eaca 100644
--- a/src/components/settings/low-stock-card.tsx
+++ b/src/components/settings/low-stock-card.tsx
@@ -243,7 +243,7 @@ export function LowStockCard({
         }
       />
       {enabled && (
-        <div className="mt-4 flex min-h-11 items-center gap-3 pl-7">
+        <div className="flex min-h-11 items-center gap-3">
           <label htmlFor="low-stock-days" className="text-sm font-medium">
             {t("notifications.lowStock.daysLabel")}
           </label>
@@ -273,7 +273,7 @@ export function LowStockCard({
           users never touch. A single medication can override this on its
           own supply tab. */}
       {enabled && (
-        <div className="mt-4 pl-7">
+        <div>
           <div className="flex min-h-11 items-center gap-3">
             <label htmlFor="low-stock-lead" className="text-sm font-medium">
               {t("notifications.lowStock.leadLabel")}
@@ -309,8 +309,8 @@ export function LowStockCard({
           aria-live="polite"
           className={
             msgType === "error"
-              ? "text-destructive mt-3 pl-7 text-sm"
-              : "text-muted-foreground mt-3 pl-7 text-sm"
+              ? "text-destructive mt-3 text-sm"
+              : "text-muted-foreground mt-3 text-sm"
           }
         >
           {msg}
@@ -318,7 +318,7 @@ export function LowStockCard({
       )}
       {/* v1.16.11 — back-link to the medications list, the surface the
           alert is about (the supply tab links here the same way). */}
-      <p className="mt-3 pl-7">
+      <p>
         <Link
           href="/medications"
           className="text-muted-foreground hover:text-foreground text-xs underline-offset-2 hover:underline"
diff --git a/src/components/settings/managed-integration-status.tsx b/src/components/settings/managed-integration-status.tsx
index 4606edb09..a42870ee0 100644
--- a/src/components/settings/managed-integration-status.tsx
+++ b/src/components/settings/managed-integration-status.tsx
@@ -108,7 +108,7 @@ export function ManagedIntegrationStatus() {
         description={t("settings.sharedRecord.integrationStatusDescription")}
       />
       <ul
-        className="mt-4 space-y-3"
+        className="space-y-3"
         aria-label={activeRecord?.displayName ?? undefined}
       >
         {statusQuery.data.integrations.map((integration) => (
diff --git a/src/components/settings/managed-record-settings-section.tsx b/src/components/settings/managed-record-settings-section.tsx
index f6e66e601..6474ae523 100644
--- a/src/components/settings/managed-record-settings-section.tsx
+++ b/src/components/settings/managed-record-settings-section.tsx
@@ -1011,7 +1011,7 @@ export function ManagedRecordSettingsSection({
             settings={query.data.settings}
           />
           {save.isError || validationFailed ? (
-            <p className="text-destructive mt-3 text-sm" role="alert">
+            <p className="text-destructive text-sm" role="alert">
               {t("common.networkError")}
             </p>
           ) : null}
diff --git a/src/components/settings/mcp-section.tsx b/src/components/settings/mcp-section.tsx
index d4edba7b5..e3136acf2 100644
--- a/src/components/settings/mcp-section.tsx
+++ b/src/components/settings/mcp-section.tsx
@@ -108,7 +108,7 @@ function McpConnectionsCard() {
         description={t("settings.mcp.connectionsDescription")}
       />
 
-      <div className="mt-4 space-y-4 pl-7">
+      <div className="space-y-4">
         {list.length === 0 ? (
           <p className="text-muted-foreground rounded-lg border border-dashed px-3 py-4 text-center text-sm">
             {t("settings.mcp.noConnections")}
@@ -223,7 +223,7 @@ function McpEnableCard() {
         }
       />
 
-      <div className="mt-4 space-y-4 pl-7">
+      <div className="space-y-4">
         <div className="flex items-center justify-between gap-4">
           <span className="text-sm font-medium">
             {t("settings.mcp.enableToggleLabel")}
@@ -337,7 +337,7 @@ function McpTokensCard() {
         description={t("settings.mcp.tokensDescription")}
       />
 
-      <div className="mt-4 space-y-4 pl-7">
+      <div className="space-y-4">
         <p className="text-muted-foreground text-xs leading-relaxed">
           {t("settings.mcp.scopeNote")}
         </p>
diff --git a/src/components/settings/medications-section.tsx b/src/components/settings/medications-section.tsx
index 57d1822bc..6fc8ec40f 100644
--- a/src/components/settings/medications-section.tsx
+++ b/src/components/settings/medications-section.tsx
@@ -80,7 +80,7 @@ export function MedicationsSection() {
     <div className="space-y-6">
       {/* View preference — cards vs table. The shared header toggle
           writes optimistically, so there is no Save button here. */}
-      <SettingsCard id="medications-view" className="scroll-mt-28 space-y-4">
+      <SettingsCard id="medications-view" className="scroll-mt-28">
         <SettingsCardHeader
           icon={LayoutGrid}
           title={t("medications.viewToggleLabel")}
@@ -98,7 +98,7 @@ export function MedicationsSection() {
       </SettingsCard>
 
       {/* Manual order — applies to both list views. */}
-      <SettingsCard id="medications-order" className="scroll-mt-28 space-y-4">
+      <SettingsCard id="medications-order" className="scroll-mt-28">
         <SettingsCardHeader
           icon={Pill}
           title={t("medications.reorderTitle")}
diff --git a/src/components/settings/modules-section.tsx b/src/components/settings/modules-section.tsx
index c0b7ea2c4..606444432 100644
--- a/src/components/settings/modules-section.tsx
+++ b/src/components/settings/modules-section.tsx
@@ -206,7 +206,7 @@ export function ModulesSection() {
         title={t("settings.sections.modules.toggleable.title")}
         description={t("settings.sections.modules.toggleable.description")}
       />
-      <div className="divide-border mt-4 divide-y pl-7">
+      <div className="divide-border divide-y">
         {(Object.keys(MODULE_REGISTRY) as ModuleKey[])
           // Modules switched off in code (pending a rebuild) carry no live
           // toggle — drop the row entirely so a user can't turn one on.
diff --git a/src/components/settings/mood-reminder-card.tsx b/src/components/settings/mood-reminder-card.tsx
index 64316a9db..9f412a128 100644
--- a/src/components/settings/mood-reminder-card.tsx
+++ b/src/components/settings/mood-reminder-card.tsx
@@ -202,7 +202,7 @@ export function MoodReminderCard({
         }
       />
       {enabled && (
-        <div className="mt-4 flex min-h-11 items-center gap-3 pl-7">
+        <div className="flex min-h-11 items-center gap-3">
           <label htmlFor="mood-reminder-hour" className="text-sm font-medium">
             {t("notifications.moodReminder.hourLabel")}
           </label>
@@ -228,8 +228,8 @@ export function MoodReminderCard({
           aria-live="polite"
           className={
             msgType === "error"
-              ? "text-destructive mt-3 pl-7 text-sm"
-              : "text-muted-foreground mt-3 pl-7 text-sm"
+              ? "text-destructive mt-3 text-sm"
+              : "text-muted-foreground mt-3 text-sm"
           }
         >
           {msg}
diff --git a/src/components/settings/mood-section.tsx b/src/components/settings/mood-section.tsx
index 70ec91b25..9cc254d68 100644
--- a/src/components/settings/mood-section.tsx
+++ b/src/components/settings/mood-section.tsx
@@ -46,7 +46,7 @@ export function MoodSection() {
   return (
     <div className="space-y-6">
       {/* Groups — picker group order + own groups. */}
-      <SettingsCard id="mood-groups" className="scroll-mt-28 space-y-4">
+      <SettingsCard id="mood-groups" className="scroll-mt-28">
         <SettingsCardHeader
           icon={Folders}
           title={t("mood.manage.groupsTitle")}
@@ -55,13 +55,13 @@ export function MoodSection() {
       </SettingsCard>
 
       {/* Tags — visibility, order, edit, move, create. */}
-      <SettingsCard id="mood-tags" className="scroll-mt-28 space-y-4">
+      <SettingsCard id="mood-tags" className="scroll-mt-28">
         <SettingsCardHeader icon={Tags} title={t("mood.manage.tagsTitle")} />
         {isLoading || !catalog ? loading : <TagManagerCard catalog={catalog} />}
       </SettingsCard>
 
       {/* Archived custom tags — restore / hard delete. */}
-      <SettingsCard id="mood-archived" className="scroll-mt-28 space-y-4">
+      <SettingsCard id="mood-archived" className="scroll-mt-28">
         <SettingsCardHeader
           icon={Archive}
           title={t("mood.manage.archivedTitle")}
diff --git a/src/components/settings/notification-status-card.tsx b/src/components/settings/notification-status-card.tsx
index 7c5fa2f32..f56e0c037 100644
--- a/src/components/settings/notification-status-card.tsx
+++ b/src/components/settings/notification-status-card.tsx
@@ -156,7 +156,7 @@ export function NotificationStatusCard() {
       />
 
       <ul
-        className="divide-border/60 mt-4 divide-y pl-7"
+        className="divide-border/60 divide-y"
         data-testid="notification-status-list"
       >
         {channels.map((ch) => (
diff --git a/src/components/settings/ntfy-card.tsx b/src/components/settings/ntfy-card.tsx
index 39f2ffdba..745963e53 100644
--- a/src/components/settings/ntfy-card.tsx
+++ b/src/components/settings/ntfy-card.tsx
@@ -128,7 +128,7 @@ export function NtfyCard({ isAuthenticated }: { isAuthenticated: boolean }) {
         description={t("settings.ntfyDescription")}
       />
 
-      <div className="mt-4 space-y-4 pl-7">
+      <div className="space-y-4">
         <div className="flex items-center justify-between">
           <Label htmlFor="ntfy-toggle">{t("settings.ntfyEnable")}</Label>
           <Switch
diff --git a/src/components/settings/nutrient-intake-card.tsx b/src/components/settings/nutrient-intake-card.tsx
index 3ea7d1544..3185663a1 100644
--- a/src/components/settings/nutrient-intake-card.tsx
+++ b/src/components/settings/nutrient-intake-card.tsx
@@ -77,10 +77,9 @@ export function NutrientIntakeCard() {
         description={t("settings.sections.sources.nutrients.description", {
           days: WINDOW_DAYS,
         })}
-        className="mb-3"
       />
       {overview.isLoading ? (
-        <div className="space-y-1 pl-7" aria-hidden="true">
+        <div className="space-y-1" aria-hidden="true">
           <Skeleton className="h-9 w-full rounded-md" />
           <Skeleton className="h-9 w-full rounded-md" />
           <Skeleton className="h-9 w-full rounded-md" />
@@ -118,7 +117,7 @@ export function NutrientIntakeCard() {
           ))}
         </ul>
       )}
-      <p className="text-muted-foreground mt-3 text-xs">
+      <p className="text-muted-foreground text-xs">
         {t("settings.sections.sources.nutrients.moduleHint")}{" "}
         <Link
           href="/settings/modules"
diff --git a/src/components/settings/privacy-section.tsx b/src/components/settings/privacy-section.tsx
index 6aa6534f4..44dc29e39 100644
--- a/src/components/settings/privacy-section.tsx
+++ b/src/components/settings/privacy-section.tsx
@@ -81,9 +81,8 @@ export function PrivacySection() {
           icon={ShieldCheck}
           title={t("settings.privacy.encryption.title")}
           description={t("settings.privacy.encryption.description")}
-          className="mb-4"
         />
-        <div className="space-y-3 pl-7">
+        <div className="space-y-3">
           <p className="text-sm">
             {summary
               ? t("settings.privacy.encryption.summary", {
@@ -102,9 +101,8 @@ export function PrivacySection() {
           icon={Database}
           title={t("settings.privacy.stored.title")}
           description={t("settings.privacy.stored.description")}
-          className="mb-4"
         />
-        <ul className="text-muted-foreground list-disc space-y-1 pl-7 text-sm">
+        <ul className="text-muted-foreground list-disc space-y-1 text-sm">
           <li>{t("settings.privacy.stored.measurements")}</li>
           <li>{t("settings.privacy.stored.medications")}</li>
           <li>{t("settings.privacy.stored.moodLabs")}</li>
@@ -120,20 +118,19 @@ export function PrivacySection() {
           icon={Clock}
           title={t("settings.privacy.retention.title")}
           description={t("settings.privacy.retention.description")}
-          className="mb-4"
         />
         {summaryLoading ? (
-          <div className="space-y-2 pl-7">
+          <div className="space-y-2">
             <Skeleton className="h-4 w-3/4" />
             <Skeleton className="h-4 w-2/3" />
             <Skeleton className="h-4 w-1/2" />
           </div>
         ) : summaryError || !summary ? (
-          <p className="text-muted-foreground pl-7 text-sm">
+          <p className="text-muted-foreground text-sm">
             {t("settings.privacy.retention.unavailable")}
           </p>
         ) : (
-          <ul className="text-muted-foreground space-y-1 pl-7 text-sm">
+          <ul className="text-muted-foreground space-y-1 text-sm">
             <li>
               {t("settings.privacy.retention.coach", {
                 days: summary.retention.coachMessagesDays,
@@ -159,9 +156,8 @@ export function PrivacySection() {
           icon={Download}
           title={t("settings.privacy.export.title")}
           description={t("settings.privacy.export.description")}
-          className="mb-4"
         />
-        <div className="flex flex-wrap gap-2 pl-7">
+        <div className="flex flex-wrap gap-2">
           <Button asChild variant="outline" size="sm">
             <Link href="/settings/export">
               {t("settings.privacy.export.openExport")}
@@ -181,9 +177,8 @@ export function PrivacySection() {
           icon={Trash2}
           title={t("settings.privacy.delete.title")}
           description={t("settings.privacy.delete.description")}
-          className="mb-4"
         />
-        <div className="space-y-3 pl-7">
+        <div className="space-y-3">
           <SettingsInfoTile icon={Info} tone="warning">
             {t("settings.privacy.delete.backupLag")}
           </SettingsInfoTile>
@@ -201,9 +196,8 @@ export function PrivacySection() {
           icon={Sparkles}
           title={t("settings.privacy.posture.title")}
           description={t("settings.privacy.posture.description")}
-          className="mb-4"
         />
-        <div className="flex flex-wrap gap-2 pl-7">
+        <div className="flex flex-wrap gap-2">
           <Button asChild variant="outline" size="sm">
             <Link href="/settings/ai">
               {t("settings.privacy.posture.openAi")}
diff --git a/src/components/settings/record-anamnesis-section.tsx b/src/components/settings/record-anamnesis-section.tsx
index f6cce2663..4809fed96 100644
--- a/src/components/settings/record-anamnesis-section.tsx
+++ b/src/components/settings/record-anamnesis-section.tsx
@@ -48,7 +48,7 @@ export function RecordAnamnesisSection() {
 
   return (
     <div className="space-y-6" data-slot="record-anamnesis-section">
-      <SettingsCard className="space-y-4">
+      <SettingsCard>
         <SettingsCardHeader
           icon={ShieldAlert}
           title={t("records.allergies.cardTitle")}
@@ -57,7 +57,7 @@ export function RecordAnamnesisSection() {
         <AllergyManager />
       </SettingsCard>
 
-      <SettingsCard className="space-y-4">
+      <SettingsCard>
         <SettingsCardHeader
           icon={Users}
           title={t("records.family.cardTitle")}
diff --git a/src/components/settings/report-selection/selection-panel.tsx b/src/components/settings/report-selection/selection-panel.tsx
index 884a3b5d0..e661cd4bb 100644
--- a/src/components/settings/report-selection/selection-panel.tsx
+++ b/src/components/settings/report-selection/selection-panel.tsx
@@ -184,7 +184,6 @@ export function HealthRecordExportPanel() {
       data-testid="health-record-export-panel"
     >
       <SettingsCardHeader
-        className="mb-4"
         icon={FileText}
         titleId="health-record-export-title"
         title={t("settings.healthRecord.title")}
diff --git a/src/components/settings/score-change-notice.tsx b/src/components/settings/score-change-notice.tsx
index b7f995731..29c553c16 100644
--- a/src/components/settings/score-change-notice.tsx
+++ b/src/components/settings/score-change-notice.tsx
@@ -76,7 +76,6 @@ export function ScoreChangeNotice({
       data-slot="score-change-notice"
       data-kind={kind}
       aria-labelledby="score-change-notice-title"
-      className="space-y-4"
     >
       <SettingsCardHeader
         icon={Info}
diff --git a/src/components/settings/score-section.tsx b/src/components/settings/score-section.tsx
index 7eb58c8db..10b71ecce 100644
--- a/src/components/settings/score-section.tsx
+++ b/src/components/settings/score-section.tsx
@@ -15,11 +15,11 @@
  *     save all sit in the same card. A top half and a bottom half of the
  *     same decision is the split the settings IA rules forbid.
  *   - **The settings card anatomy, unmodified.** Header through
- *     `SettingsCardHeader`, body at `mt-4 pl-7` so every line starts on
- *     the title's reading edge, save bottom-right in its own row. The
- *     v1.35.0 cut hung the save in the header's status slot and let the
- *     body start at the card edge, which read as a different kind of card
- *     from the ones above and below it.
+ *     `SettingsCardHeader`, the header→body step owned by the card's own
+ *     gap, body on the card edge, save bottom-right in its own row via
+ *     `SettingsCardActions`. The v1.35.0 cut hung the save in the header's
+ *     status slot, which read as a different kind of card from the ones
+ *     above and below it.
  *   - **Grouped by domain, and the grouping is spacing.** Blood pressure,
  *     glycaemia and lipids sit under one heading; the gap between groups
  *     does the separating. Rules between every row made a short list look
@@ -311,10 +311,7 @@ export function ScoreSection() {
             description={t("settings.sections.score.card.description")}
           />
 
-          {/* The body starts on the title's reading edge — icon box plus
-              gap is 28 px, which is the `pl-7` every other settings card
-              uses. */}
-          <div className="mt-4 space-y-6 pl-7">
+          <div className="space-y-6">
             {/* The sentence the whole feature exists for. Foreground, in
                 the body, because it is content and not a meta
                 description. */}
@@ -446,7 +443,7 @@ export function ScoreSection() {
 
           {/* Bottom-right, in its own row, like every other settings card
               that saves a form. */}
-          <div className="mt-4 flex justify-end pl-7">
+          <div className="flex justify-end">
             <Button
               size="sm"
               type="button"
diff --git a/src/components/settings/security-activity-card.tsx b/src/components/settings/security-activity-card.tsx
index bcd10943b..3c6c3a1c7 100644
--- a/src/components/settings/security-activity-card.tsx
+++ b/src/components/settings/security-activity-card.tsx
@@ -97,7 +97,7 @@ export function SecurityActivityCard({
           />
         </div>
       </button>
-      <div id={regionId} hidden={!open} className="space-y-4 pl-7">
+      <div id={regionId} hidden={!open} className="space-y-4">
         <p className="text-muted-foreground text-xs">
           {t("settings.security.activityDescription")}
         </p>
diff --git a/src/components/settings/security-section/passkey-list-section.tsx b/src/components/settings/security-section/passkey-list-section.tsx
index 538bf5f4b..087866754 100644
--- a/src/components/settings/security-section/passkey-list-section.tsx
+++ b/src/components/settings/security-section/passkey-list-section.tsx
@@ -185,7 +185,7 @@ export function PasskeyListSection({
         description={t("settings.passkeysDescription")}
       />
 
-      <div className="mt-4">
+      <div>
         {!passkeys || passkeys.length === 0 ? (
           <p className="text-muted-foreground text-sm">
             {t("settings.noPasskeys")}
diff --git a/src/components/settings/security-section/security-keys-card.tsx b/src/components/settings/security-section/security-keys-card.tsx
index 1616e48de..bcaf55806 100644
--- a/src/components/settings/security-section/security-keys-card.tsx
+++ b/src/components/settings/security-section/security-keys-card.tsx
@@ -137,7 +137,7 @@ export function SecurityKeysCard({ keys }: { keys: WebauthnKeyInfo[] }) {
         description={t("settings.security.keys.description")}
       />
 
-      <div className="mt-4">
+      <div>
         {keys.length === 0 ? (
           <EmptyState
             variant="plain"
diff --git a/src/components/settings/security-section/totp-card.tsx b/src/components/settings/security-section/totp-card.tsx
index 2d1d78791..c28078dfc 100644
--- a/src/components/settings/security-section/totp-card.tsx
+++ b/src/components/settings/security-section/totp-card.tsx
@@ -210,7 +210,7 @@ export function TotpCard({
         }
       />
 
-      <div className="mt-4">
+      <div>
         {/* ── Not enabled, no wizard: the enable CTA ── */}
         {!enabled && !setup && !freshCodes && (
           <Button
diff --git a/src/components/settings/security-sessions-card.tsx b/src/components/settings/security-sessions-card.tsx
index 32219c7f7..33fe01e23 100644
--- a/src/components/settings/security-sessions-card.tsx
+++ b/src/components/settings/security-sessions-card.tsx
@@ -111,7 +111,7 @@ export function SecuritySessionsCard({
           />
         </div>
       </button>
-      <div id={regionId} hidden={!open} className="space-y-4 pl-7">
+      <div id={regionId} hidden={!open} className="space-y-4">
         <p className="text-muted-foreground text-xs">
           {t("settings.security.sessionsDescription")}
         </p>
diff --git a/src/components/settings/settings-card.tsx b/src/components/settings/settings-card.tsx
index 9537ca7a1..151cc6e93 100644
--- a/src/components/settings/settings-card.tsx
+++ b/src/components/settings/settings-card.tsx
@@ -14,17 +14,22 @@ import { cn } from "@/lib/utils";
  * `sm:` (640 px) instead of `md:` (768 px), so on a ~700 px tablet Settings
  * cards read denser than every other surface.
  *
- * The default renders the ui `<Card>` so the surface composes from one shape.
- * Unlike the bare `<Card>` it does NOT impose the `flex flex-col gap` layout:
- * Settings card bodies own their internal rhythm (`SettingsCardHeader` +
- * `mt-4`/`space-y-*` bodies), so the container only owns the border, radius,
- * background, and padding. Pass `className` for per-card extras
- * (`scroll-mt-28`, `space-y-4`, `flex h-full flex-col`, …).
+ * The default renders the ui `<Card>` so the surface composes from one shape,
+ * and like `<Card>` the card owns its internal rhythm: `flex flex-col gap-4`.
+ * The header→body distance therefore comes from the container's gap, never
+ * from a margin a call site remembers to add. It used to come from three
+ * competing techniques at once — `mt-4` on the first body child (20 files),
+ * `space-y-4` on the card (9), `mb-3`/`mb-4` on the header (2) — which is
+ * exactly the drift that made neighbouring cards read as different systems.
+ * A denser card overrides the gap on the card itself (`className="gap-2"`),
+ * as `<Card>` documents; nothing else may re-declare the header→body step.
+ *
+ * Pass `className` for per-card extras (`scroll-mt-28`, `flex h-full`, …).
  *
  * `as="section"` keeps a card's semantic landmark element (a `<section>` with
- * an `aria-labelledby`) while painting the same shape and padding contract.
+ * an `aria-labelledby`) while painting the same shape, rhythm, and padding.
  */
-const SETTINGS_CARD_SHELL = "block gap-0 p-4 md:p-6";
+const SETTINGS_CARD_SHELL = "flex flex-col gap-4 p-4 md:p-6";
 
 type SettingsCardOwnProps = { className?: string };
 
@@ -45,7 +50,7 @@ export function SettingsCard<E extends React.ElementType = typeof Card>({
         // Mirror the ui Card shell so a semantic landmark card paints
         // identically to the default <Card>-backed one.
         className={cn(
-          "bg-card text-card-foreground rounded-xl border p-4 shadow-sm md:p-6",
+          "bg-card text-card-foreground flex flex-col gap-4 rounded-xl border p-4 shadow-sm md:p-6",
           className,
         )}
         {...props}
diff --git a/src/components/settings/settings-shell.tsx b/src/components/settings/settings-shell.tsx
index 15d3f9335..2012bc718 100644
--- a/src/components/settings/settings-shell.tsx
+++ b/src/components/settings/settings-shell.tsx
@@ -43,6 +43,7 @@ import {
 } from "lucide-react";
 
 import { cn } from "@/lib/utils";
+import { PageHeader } from "@/components/ui/page-header";
 import { SUB_SHELL_GRID_FLOOR } from "@/components/layout/shell-metrics";
 import { useAuth } from "@/hooks/use-auth";
 import { useMounted } from "@/hooks/use-mounted";
@@ -533,40 +534,25 @@ export function SettingsShell({
         }
       : null);
 
+  // The shell paints the heading twice — above the mobile chip strip and
+  // inside the desktop grid row — so only the desktop copy may be a real
+  // `<h1>`. Both go through `PageHeader`: the block used to be hand-rolled
+  // here and in `admin-shell.tsx`, which is how Settings and Admin ended up
+  // a step off every module page (and off each other).
   const headingBlock = (mobile = false) =>
     resolvedHeading ? (
-      <div className="space-y-6">
-        {resolvedHeading.topSlot ? <div>{resolvedHeading.topSlot}</div> : null}
-        <div className="flex items-start justify-between gap-2">
-          <div className="min-w-0">
-            {mobile ? (
-              <div
-                id={`${resolvedHeading.headingId}-mobile`}
-                role="heading"
-                aria-level={1}
-                className="text-2xl font-bold tracking-tight"
-              >
-                {resolvedHeading.title}
-              </div>
-            ) : (
-              <h1
-                id={resolvedHeading.headingId}
-                className="text-2xl font-bold tracking-tight"
-              >
-                {resolvedHeading.title}
-              </h1>
-            )}
-            {resolvedHeading.subtitle ? (
-              <p className="text-muted-foreground text-sm">
-                {resolvedHeading.subtitle}
-              </p>
-            ) : null}
-          </div>
-          {resolvedHeading.headingAccessory ? (
-            <div className="shrink-0">{resolvedHeading.headingAccessory}</div>
-          ) : null}
-        </div>
-      </div>
+      <PageHeader
+        headingAs={mobile ? "div" : "h1"}
+        titleId={
+          mobile
+            ? `${resolvedHeading.headingId}-mobile`
+            : resolvedHeading.headingId
+        }
+        title={resolvedHeading.title}
+        description={resolvedHeading.subtitle}
+        topSlot={resolvedHeading.topSlot}
+        actions={resolvedHeading.headingAccessory}
+      />
     ) : null;
 
   // v1.4.25 W8 — AuthShell wraps the page in `px-4 py-6 md:px-6`
diff --git a/src/components/settings/sharing-section.tsx b/src/components/settings/sharing-section.tsx
index 76ab105e2..ff584cd1d 100644
--- a/src/components/settings/sharing-section.tsx
+++ b/src/components/settings/sharing-section.tsx
@@ -132,7 +132,7 @@ function ShareLinksCard() {
   );
 
   return (
-    <SettingsCard className="space-y-6">
+    <SettingsCard>
       <SettingsCardHeader
         icon={Share2}
         title={t("settings.sharing.createTitle")}
diff --git a/src/components/settings/sources-section.tsx b/src/components/settings/sources-section.tsx
index f9a435987..15f637d25 100644
--- a/src/components/settings/sources-section.tsx
+++ b/src/components/settings/sources-section.tsx
@@ -292,7 +292,7 @@ export function SourcesSection() {
   // card, below the ladder.
   return (
     <div className="space-y-6">
-      <SettingsCard className="space-y-4">
+      <SettingsCard>
         <SettingsCardHeader
           icon={Layers}
           title={t("settings.sections.sources.cardTitle")}
diff --git a/src/components/settings/telegram-card.tsx b/src/components/settings/telegram-card.tsx
index 3d78154a5..ec357099d 100644
--- a/src/components/settings/telegram-card.tsx
+++ b/src/components/settings/telegram-card.tsx
@@ -139,7 +139,7 @@ export function TelegramCard({
         description={t("settings.telegramDescription")}
       />
 
-      <div className="mt-4 space-y-4 pl-7">
+      <div className="space-y-4">
         <form onSubmit={handleSave} className="space-y-4">
           <div className="grid gap-4 sm:grid-cols-2">
             <div className="space-y-2">
diff --git a/src/components/settings/thresholds-editor-section.tsx b/src/components/settings/thresholds-editor-section.tsx
index 94bf2b9db..c969bea92 100644
--- a/src/components/settings/thresholds-editor-section.tsx
+++ b/src/components/settings/thresholds-editor-section.tsx
@@ -119,7 +119,7 @@ export function ThresholdsEditorSection({ id }: { id: string }) {
   });
 
   return (
-    <SettingsCard id={id} className="scroll-mt-28 space-y-4">
+    <SettingsCard id={id} className="scroll-mt-28">
       {/* v1.4.19 A8 / F-07: page header `settings.sections.thresholds.*`
           already provides the title + description for this route, so the
           card-level title + subtitle were a duplicate of the page header.
diff --git a/src/components/settings/trusted-devices-card.tsx b/src/components/settings/trusted-devices-card.tsx
index 1a3da2fea..9145b00c6 100644
--- a/src/components/settings/trusted-devices-card.tsx
+++ b/src/components/settings/trusted-devices-card.tsx
@@ -90,9 +90,8 @@ export function TrustedDevicesCard({
       <SettingsCardHeader
         icon={ShieldCheck}
         title={t("settings.security.trustedDevices.title")}
-        className="mb-4"
       />
-      <div className="space-y-4 pl-7">
+      <div className="space-y-4">
         <p className="text-muted-foreground text-xs">
           {t("settings.security.trustedDevices.description")}
         </p>
diff --git a/src/components/settings/web-push-card.tsx b/src/components/settings/web-push-card.tsx
index fc44fe612..27d03b331 100644
--- a/src/components/settings/web-push-card.tsx
+++ b/src/components/settings/web-push-card.tsx
@@ -214,7 +214,7 @@ export function WebPushCard() {
       />
 
       {(!loading && !isSupported) || (!loading && isDenied) || msg ? (
-        <div className="mt-4 space-y-4 pl-7">
+        <div className="space-y-4">
           {!loading && !isSupported ? (
             <p className="text-muted-foreground text-sm">
               {t("settings.webPushNotSupported")}
diff --git a/src/components/settings/webhook-card.tsx b/src/components/settings/webhook-card.tsx
index 7710dd9fe..2d4b6803e 100644
--- a/src/components/settings/webhook-card.tsx
+++ b/src/components/settings/webhook-card.tsx
@@ -136,7 +136,7 @@ export function WebhookCard({ isAuthenticated }: { isAuthenticated: boolean }) {
         description={t("settings.webhookDescription")}
       />
 
-      <div className="mt-4 space-y-4 pl-7">
+      <div className="space-y-4">
         <div className="flex items-center justify-between">
           <Label htmlFor="webhook-toggle">{t("settings.webhookEnable")}</Label>
           <Switch
diff --git a/src/components/ui/page-header.tsx b/src/components/ui/page-header.tsx
index b77be72b4..e806e5294 100644
--- a/src/components/ui/page-header.tsx
+++ b/src/components/ui/page-header.tsx
@@ -6,34 +6,71 @@ import { cn } from "@/lib/utils";
 /**
  * The one canonical page header. Every module surface renders its title
  * through this so the header vocabulary reads identically app-wide: the H1
- * is always `text-2xl font-bold tracking-tight`, the description is always
- * `text-foreground text-sm` (it is content, not meta — the muted tier is
- * reserved for timestamps/counts per the design standards), and no icon
- * sits beside the H1. An
- * optional back-link rides above the title, and an `actions` slot holds the
- * page's primary buttons to the right of the title block.
+ * is always `text-2xl font-bold tracking-tight`, the explainer under it is
+ * always `text-muted-foreground text-sm` (heading in foreground, one-line
+ * explainer in muted — the app-wide convention the design standards pin for
+ * `CardDescription`, `PageHeader`, and `SettingsCardHeader` alike), and no
+ * icon sits beside the H1. An optional back-link rides above the title, and
+ * an `actions` slot holds the page's primary buttons to the right of the
+ * title block.
+ *
+ * The explainer never truncates. A page that clipped it mid-word to hold one
+ * line on a phone was trading a readable sentence for a fixed height; the
+ * fixed height now comes from every header being built the same way, and a
+ * sentence too long for one line is a text problem, fixed in the string.
+ *
+ * `headingAs="div"` renders the title as `role="heading" aria-level={1}`
+ * instead of an `<h1>`. The Settings and Admin shells paint their heading
+ * twice — once above the mobile section strip, once inside the desktop grid
+ * row — and only one of the two may be a real `<h1>`. Without this the two
+ * shells hand-rolled the whole block to get the second copy, which is how
+ * they drifted apart from every module page in the first place.
  */
 export function PageHeader({
   title,
+  titleId,
   description,
+  headingAs = "h1",
   backLink,
+  topSlot,
   actions,
   className,
 }: {
   title: ReactNode;
+  titleId?: string;
   description?: ReactNode;
+  headingAs?: "h1" | "div";
   backLink?: { href: string; label: string; dataSlot?: string };
+  /** Optional block above the title (e.g. a hub back-link the shell owns). */
+  topSlot?: ReactNode;
   actions?: ReactNode;
   className?: string;
 }) {
+  const heading =
+    headingAs === "div" ? (
+      <div
+        id={titleId}
+        role="heading"
+        aria-level={1}
+        className="text-2xl font-bold tracking-tight"
+      >
+        {title}
+      </div>
+    ) : (
+      <h1 id={titleId} className="text-2xl font-bold tracking-tight">
+        {title}
+      </h1>
+    );
+
   return (
     <div className={cn("space-y-1.5", className)}>
       {backLink ? <BackLink {...backLink} /> : null}
+      {topSlot}
       <div className="flex items-start justify-between gap-3">
         <div className="min-w-0 space-y-1.5">
-          <h1 className="text-2xl font-bold tracking-tight">{title}</h1>
+          {heading}
           {description ? (
-            <p className="text-foreground text-sm">{description}</p>
+            <p className="text-muted-foreground text-sm">{description}</p>
           ) : null}
         </div>
         {actions ? (
diff --git a/src/components/insights/section-heading.tsx b/src/components/ui/section-heading.tsx
similarity index 78%
rename from src/components/insights/section-heading.tsx
rename to src/components/ui/section-heading.tsx
index 441efbd54..9022b1f00 100644
--- a/src/components/insights/section-heading.tsx
+++ b/src/components/ui/section-heading.tsx
@@ -3,15 +3,22 @@ import type { ComponentType, ReactNode } from "react";
 import { cn } from "@/lib/utils";
 
 /**
- * v1.15.10 — the one section heading for the Insights overview.
+ * The one heading for a GROUP of cards, app-wide.
  *
- * Every top-level overview section (health scores, daily briefing, vitals,
- * trends, period-in-review, cycle summary, signals of the day) leads with
- * this identical heading ABOVE its card: a leading Lucide icon and an `<h2>`
- * title, both in the foreground colour (white in dark mode — never a per-
- * section accent hue), at one size + weight. An optional `action` slot pins a
- * trailing affordance (a subtitle, a meta control) to the right edge without
- * breaking the row's alignment.
+ * Every top-level Insights overview section (health scores, daily briefing,
+ * vitals, trends, period-in-review, cycle summary, signals of the day) and
+ * every Settings card group (notification channels, the health record,
+ * integrations) leads with this identical heading ABOVE its cards: a leading
+ * Lucide icon and an `<h2>` title, both in the foreground colour (white in
+ * dark mode — never a per-section accent hue), at one size + weight. An
+ * optional `action` slot pins a trailing affordance (a subtitle, a meta
+ * control) to the right edge without breaking the row's alignment.
+ *
+ * It lives under `ui/` because it is not an Insights component: Settings
+ * used to open its groups with a bare `SettingsCardHeader` and no card, which
+ * reads as a card title whose card failed to paint. `text-base` here against
+ * `text-lg` on a card title is what separates "this labels the group" from
+ * "this titles a card".
  *
  * The overview used to mix three heading dialects: a `text-lg` `<h2>` with a
  * purple Sparkles glyph (briefing), a `text-lg` `<h2>` with NO icon (trends),