From b6332a96d912a2fe860449f1b7560b6d24637444 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marc-Andr=C3=A9=20Bombeck?= <mbombeck@gmail.com>
Date: Sun, 9 Aug 2026 11:03:43 +0200
Subject: [PATCH 1/6] refactor(ui): route hand-rolled card headers through the
 shared header primitives

Move the last hand-rolled tile and section headers onto TileHeader and
SectionHeading so every card speaks one header language: the vorsorge
dashboard tile, the three illness cards, the metric-correlation section,
and the custom-metric list group. The mood-chart title drops to the
primitive semibold weight and its bucket label becomes a TagChip.

Align the in-card sub-headings of the integration cards to the one
sanctioned section-label tier (muted uppercase eyebrow) instead of a
second text-sm font-semibold dialect.

Keep the onboarding and mental-health wizard hero H1s at their
deliberate semibold weight, now marked inline as an intentional
exception so a future heading sweep leaves them alone.
---
 src/app/onboarding/[step]/page.tsx            |  1 +
 src/components/charts/mood-chart.tsx          |  9 ++---
 .../custom-metrics/custom-metric-list.tsx     | 38 +++++++++----------
 .../illness/illness-correlation-card.tsx      | 12 +++---
 .../illness/illness-day-timeline.tsx          |  5 +--
 .../illness/illness-insights-card.tsx         | 12 +++---
 .../insights/metric-correlation-card.tsx      | 10 +++--
 .../vorsorge-dashboard-card.tsx               | 12 +++---
 .../mental-health/check-in-wizard.tsx         |  1 +
 src/components/onboarding/baseline-form.tsx   |  1 +
 src/components/onboarding/done-screen.tsx     |  1 +
 .../onboarding/goals-chip-picker.tsx          |  1 +
 .../onboarding/source-card-grid.tsx           |  1 +
 .../onboarding/welcome-carousel.tsx           |  1 +
 .../integrations/apple-health-card.tsx        |  4 +-
 .../settings/integrations/fitbit-card.tsx     |  2 +-
 .../integrations/google-health-card.tsx       |  2 +-
 .../integrations/oauth-provider-card.tsx      |  2 +-
 .../settings/integrations/whoop-card.tsx      |  2 +-
 .../settings/integrations/withings-card.tsx   |  2 +-
 20 files changed, 64 insertions(+), 55 deletions(-)

diff --git a/src/app/onboarding/[step]/page.tsx b/src/app/onboarding/[step]/page.tsx
index 393118a6f..14b825d5d 100644
--- a/src/app/onboarding/[step]/page.tsx
+++ b/src/app/onboarding/[step]/page.tsx
@@ -101,6 +101,7 @@ export default async function OnboardingStepPage({ params }: PageProps) {
             aria-labelledby="onboarding-welcomeback-title"
             className="space-y-4"
           >
+            {/* Onboarding hero H1: intentionally semibold, not the app-wide bold PageHeader H1 (UI-STANDARDS §5 hero exception). Do not sweep to font-bold. */}
             <h1
               id="onboarding-welcomeback-title"
               tabIndex={-1}
diff --git a/src/components/charts/mood-chart.tsx b/src/components/charts/mood-chart.tsx
index df82bcc4f..9a8f4dedf 100644
--- a/src/components/charts/mood-chart.tsx
+++ b/src/components/charts/mood-chart.tsx
@@ -18,6 +18,7 @@ import { useEffect, useState, useMemo, useRef } from "react";
 import { Button } from "@/components/ui/button";
 import { Skeleton } from "@/components/ui/skeleton";
 import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
+import { TagChip } from "@/components/ui/tag-chip";
 import { useTranslations } from "@/lib/i18n/context";
 import { makeBucketLabelFormatters } from "@/lib/charts/bucket-label";
 import { readStoredTimezone } from "@/lib/timezone-mirror";
@@ -1033,17 +1034,15 @@ export function MoodChart({
             back to side-by-side. */}
         <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
           <div className="flex flex-wrap items-center gap-2">
-            <CardTitle className="text-base font-medium">
-              {displayTitle}
-            </CardTitle>
+            <CardTitle className="text-base">{displayTitle}</CardTitle>
             {activeBucket !== "day" && (
-              <span className="bg-muted/40 text-muted-foreground hidden rounded-md px-1.5 py-0.5 text-[10px] font-medium tracking-wide uppercase sm:inline-flex">
+              <TagChip className="hidden tracking-wide uppercase sm:inline-flex">
                 {t(
                   activeBucket === "week"
                     ? "charts.bucketWeekly"
                     : "charts.bucketMonthly",
                 )}
-              </span>
+              </TagChip>
             )}
             {/* v1.4.16 B8 — comparison caption (mood).
                 v1.4.19 A2 — hidden on mobile to free up the title row. */}
diff --git a/src/components/custom-metrics/custom-metric-list.tsx b/src/components/custom-metrics/custom-metric-list.tsx
index 4bc676958..9363e4511 100644
--- a/src/components/custom-metrics/custom-metric-list.tsx
+++ b/src/components/custom-metrics/custom-metric-list.tsx
@@ -11,6 +11,7 @@ import { Button } from "@/components/ui/button";
 import { Card, CardContent } from "@/components/ui/card";
 import { QueryErrorCard } from "@/components/ui/query-error-card";
 import { ResponsiveSheet } from "@/components/ui/responsive-sheet";
+import { SectionHeading } from "@/components/ui/section-heading";
 import { Skeleton } from "@/components/ui/skeleton";
 import { apiGet } from "@/lib/api/api-fetch";
 import { formatDate } from "@/lib/format";
@@ -63,26 +64,23 @@ export function CustomMetricList() {
       className="border-border space-y-3 border-t pt-6"
       data-slot="custom-metric-list"
     >
-      <div className="flex items-center justify-between gap-2">
-        <div className="min-w-0">
-          <h2 className="text-lg font-semibold tracking-tight">
-            {t("customMetrics.sectionTitle")}
-          </h2>
-          <p className="text-muted-foreground truncate text-xs sm:text-sm">
-            {t("customMetrics.sectionSubtitle")}
-          </p>
-        </div>
-        <Button
-          variant="outline"
-          size="sm"
-          className="min-h-11 shrink-0 sm:min-h-9"
-          onClick={() => setAddOpen(true)}
-          aria-label={t("customMetrics.add")}
-        >
-          <Plus className="h-4 w-4" />
-          <span className="hidden sm:inline">{t("customMetrics.add")}</span>
-        </Button>
-      </div>
+      <SectionHeading
+        icon={Gauge}
+        title={t("customMetrics.sectionTitle")}
+        subtitle={t("customMetrics.sectionSubtitle")}
+        action={
+          <Button
+            variant="outline"
+            size="sm"
+            className="min-h-11 shrink-0 sm:min-h-9"
+            onClick={() => setAddOpen(true)}
+            aria-label={t("customMetrics.add")}
+          >
+            <Plus className="h-4 w-4" />
+            <span className="hidden sm:inline">{t("customMetrics.add")}</span>
+          </Button>
+        }
+      />
 
       {isLoading ? (
         <Card aria-hidden="true">
diff --git a/src/components/illness/illness-correlation-card.tsx b/src/components/illness/illness-correlation-card.tsx
index b9d63b8e9..ec8fb1432 100644
--- a/src/components/illness/illness-correlation-card.tsx
+++ b/src/components/illness/illness-correlation-card.tsx
@@ -12,6 +12,7 @@
 import { ArrowDown, ArrowUp, Info } from "lucide-react";
 
 import { Card, CardContent, CardHeader } from "@/components/ui/card";
+import { TileHeader } from "@/components/insights/tile-header";
 import { Skeleton } from "@/components/ui/skeleton";
 import { useTranslations } from "@/lib/i18n/context";
 
@@ -172,12 +173,11 @@ export function IllnessCorrelationCard({ episodeId }: { episodeId: string }) {
   return (
     <Card>
       <CardHeader>
-        <div className="flex items-center gap-2">
-          <Info className="text-muted-foreground h-4 w-4" aria-hidden />
-          <h2 className="text-base font-semibold">
-            {t("illness.correlation.title")}
-          </h2>
-        </div>
+        <TileHeader
+          icon={Info}
+          titleAs="h2"
+          title={t("illness.correlation.title")}
+        />
       </CardHeader>
       <CardContent>
         {isLoading ? (
diff --git a/src/components/illness/illness-day-timeline.tsx b/src/components/illness/illness-day-timeline.tsx
index 4582f7ec3..41059e778 100644
--- a/src/components/illness/illness-day-timeline.tsx
+++ b/src/components/illness/illness-day-timeline.tsx
@@ -14,6 +14,7 @@
  */
 import { useRecordCapabilities } from "@/hooks/use-record-capabilities";
 import { Card, CardContent, CardHeader } from "@/components/ui/card";
+import { TileHeader } from "@/components/insights/tile-header";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Skeleton } from "@/components/ui/skeleton";
@@ -101,9 +102,7 @@ export function IllnessDayTimeline({
   return (
     <Card>
       <CardHeader>
-        <h2 className="text-base font-semibold">
-          {t("illness.timeline.title")}
-        </h2>
+        <TileHeader titleAs="h2" title={t("illness.timeline.title")} />
       </CardHeader>
       <CardContent className="space-y-3">
         {isLoading ? (
diff --git a/src/components/illness/illness-insights-card.tsx b/src/components/illness/illness-insights-card.tsx
index 86beede7a..c40d75624 100644
--- a/src/components/illness/illness-insights-card.tsx
+++ b/src/components/illness/illness-insights-card.tsx
@@ -15,6 +15,7 @@ import { History } from "lucide-react";
 
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader } from "@/components/ui/card";
+import { TileHeader } from "@/components/insights/tile-header";
 import { Skeleton } from "@/components/ui/skeleton";
 import { useTranslations } from "@/lib/i18n/context";
 
@@ -42,12 +43,11 @@ export function IllnessInsightsCard({
   return (
     <Card>
       <CardHeader>
-        <div className="flex items-center gap-2">
-          <History className="text-muted-foreground h-4 w-4" aria-hidden />
-          <h2 className="text-base font-semibold">
-            {t("illness.insights.title")}
-          </h2>
-        </div>
+        <TileHeader
+          icon={History}
+          titleAs="h2"
+          title={t("illness.insights.title")}
+        />
       </CardHeader>
       <CardContent>
         {counts.isLoading ? (
diff --git a/src/components/insights/metric-correlation-card.tsx b/src/components/insights/metric-correlation-card.tsx
index d09c8f00a..8eaba186e 100644
--- a/src/components/insights/metric-correlation-card.tsx
+++ b/src/components/insights/metric-correlation-card.tsx
@@ -1,5 +1,7 @@
 "use client";
 
+import { Spline } from "lucide-react";
+
 import { useAnalyticsQuery } from "@/lib/queries/use-analytics-query";
 import { useFeatureFlags } from "@/hooks/use-feature-flags";
 import { useTranslations } from "@/lib/i18n/context";
@@ -8,6 +10,7 @@ import type {
   CorrelationResult,
 } from "@/lib/insights/correlations";
 import { CorrelationCard } from "@/components/insights/correlation-card";
+import { SectionHeading } from "@/components/ui/section-heading";
 
 /**
  * v1.12.0 — per-metric correlation card.
@@ -82,9 +85,10 @@ export function MetricCorrelationCard({ slug }: MetricCorrelationCardProps) {
       aria-label={t("insights.correlationRow.title")}
       className="space-y-2"
     >
-      <h2 className="text-lg font-semibold">
-        {t("insights.correlationRow.title")}
-      </h2>
+      <SectionHeading
+        icon={Spline}
+        title={t("insights.correlationRow.title")}
+      />
       <CorrelationCard result={result} />
       {/* v1.18.6 (DISC-01) — the "observational, not causal / talk to your
           doctor" disclaimer is removed; the one-time onboarding acknowledgment
diff --git a/src/components/measurement-reminders/vorsorge-dashboard-card.tsx b/src/components/measurement-reminders/vorsorge-dashboard-card.tsx
index 848e5e996..543dbf566 100644
--- a/src/components/measurement-reminders/vorsorge-dashboard-card.tsx
+++ b/src/components/measurement-reminders/vorsorge-dashboard-card.tsx
@@ -30,7 +30,8 @@ import {
 import type { EncounterKind } from "@/generated/prisma/client";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Card, CardContent, CardHeader } from "@/components/ui/card";
+import { TileHeader } from "@/components/insights/tile-header";
 import { ListRow } from "@/components/ui/list-row";
 import { QueryErrorRow } from "@/components/ui/query-error-row";
 import { ResponsiveSheet } from "@/components/ui/responsive-sheet";
@@ -142,10 +143,11 @@ export function VorsorgeDashboardCard() {
   return (
     <Card data-slot="vorsorge-dashboard-card" className="h-full">
       <CardHeader>
-        <CardTitle className="flex items-center gap-2 text-sm">
-          <CalendarClock className="h-4 w-4" aria-hidden="true" />
-          {t("measurementReminders.sectionTitle")}
-        </CardTitle>
+        <TileHeader
+          size="sm"
+          icon={CalendarClock}
+          title={t("measurementReminders.sectionTitle")}
+        />
       </CardHeader>
       <CardContent className="space-y-2">
         {showLoading ? (
diff --git a/src/components/mental-health/check-in-wizard.tsx b/src/components/mental-health/check-in-wizard.tsx
index 261da140d..fbabe3364 100644
--- a/src/components/mental-health/check-in-wizard.tsx
+++ b/src/components/mental-health/check-in-wizard.tsx
@@ -142,6 +142,7 @@ export function CheckInWizard({
       {/* In-test header — instrument title + ONE standardized explanation line.
           No disclaimer here (§2); the landing carries it. */}
       <header className="flex flex-col gap-1">
+        {/* Wizard hero H1: intentionally semibold, same hero exception as onboarding (UI-STANDARDS §5). Do not sweep to font-bold. */}
         <h1 className="text-2xl font-semibold">
           {t(`mentalHealth.instrument.${key}`)}
         </h1>
diff --git a/src/components/onboarding/baseline-form.tsx b/src/components/onboarding/baseline-form.tsx
index 6ab2f7a17..7576be392 100644
--- a/src/components/onboarding/baseline-form.tsx
+++ b/src/components/onboarding/baseline-form.tsx
@@ -188,6 +188,7 @@ export function BaselineForm() {
   return (
     <section aria-labelledby="onboarding-baseline-title" className="space-y-6">
       <header className="space-y-2">
+        {/* Onboarding hero H1: intentionally semibold, not the app-wide bold PageHeader H1 (UI-STANDARDS §5 hero exception). Do not sweep to font-bold. */}
         <h1
           id="onboarding-baseline-title"
           tabIndex={-1}
diff --git a/src/components/onboarding/done-screen.tsx b/src/components/onboarding/done-screen.tsx
index 7494a746b..bb8c56689 100644
--- a/src/components/onboarding/done-screen.tsx
+++ b/src/components/onboarding/done-screen.tsx
@@ -81,6 +81,7 @@ export function DoneScreen() {
       </span>
 
       <header className="space-y-2">
+        {/* Onboarding hero H1: intentionally semibold, not the app-wide bold PageHeader H1 (UI-STANDARDS §5 hero exception). Do not sweep to font-bold. */}
         <h1
           id="onboarding-done-title"
           tabIndex={-1}
diff --git a/src/components/onboarding/goals-chip-picker.tsx b/src/components/onboarding/goals-chip-picker.tsx
index a1a64d06a..c83877eba 100644
--- a/src/components/onboarding/goals-chip-picker.tsx
+++ b/src/components/onboarding/goals-chip-picker.tsx
@@ -139,6 +139,7 @@ export function GoalsChipPicker({ userId: _userId }: GoalsChipPickerProps) {
   return (
     <section aria-labelledby="onboarding-goals-title" className="space-y-6">
       <header className="space-y-2">
+        {/* Onboarding hero H1: intentionally semibold, not the app-wide bold PageHeader H1 (UI-STANDARDS §5 hero exception). Do not sweep to font-bold. */}
         <h1
           id="onboarding-goals-title"
           tabIndex={-1}
diff --git a/src/components/onboarding/source-card-grid.tsx b/src/components/onboarding/source-card-grid.tsx
index 8404a8582..e4d0d369c 100644
--- a/src/components/onboarding/source-card-grid.tsx
+++ b/src/components/onboarding/source-card-grid.tsx
@@ -148,6 +148,7 @@ export function SourceCardGrid() {
   return (
     <section aria-labelledby="onboarding-source-title" className="space-y-6">
       <header className="space-y-2">
+        {/* Onboarding hero H1: intentionally semibold, not the app-wide bold PageHeader H1 (UI-STANDARDS §5 hero exception). Do not sweep to font-bold. */}
         <h1
           id="onboarding-source-title"
           tabIndex={-1}
diff --git a/src/components/onboarding/welcome-carousel.tsx b/src/components/onboarding/welcome-carousel.tsx
index dd3a46913..4d218a300 100644
--- a/src/components/onboarding/welcome-carousel.tsx
+++ b/src/components/onboarding/welcome-carousel.tsx
@@ -164,6 +164,7 @@ export function WelcomeCarousel() {
 
   return (
     <section aria-labelledby="onboarding-welcome-title" className="space-y-6">
+      {/* Onboarding hero H1: intentionally semibold, not the app-wide bold PageHeader H1 (UI-STANDARDS §5 hero exception). Do not sweep to font-bold. */}
       <h1
         id="onboarding-welcome-title"
         tabIndex={-1}
diff --git a/src/components/settings/integrations/apple-health-card.tsx b/src/components/settings/integrations/apple-health-card.tsx
index c479f0ffe..d35563e9d 100644
--- a/src/components/settings/integrations/apple-health-card.tsx
+++ b/src/components/settings/integrations/apple-health-card.tsx
@@ -82,7 +82,7 @@ function DeliveryDiagnostic({
 
   return (
     <div className="space-y-2" data-testid="apple-health-delivery">
-      <h3 className="text-sm font-semibold">
+      <h3 className="text-muted-foreground text-xs font-medium tracking-wide uppercase">
         {t("settings.appleHealth.delivery.title")}
       </h3>
       {status.lastSyncedAt ? (
@@ -181,7 +181,7 @@ export function AppleHealthCard({ enabled }: { enabled: boolean }) {
         />
 
         <div className="space-y-2">
-          <h3 className="text-sm font-semibold">
+          <h3 className="text-muted-foreground text-xs font-medium tracking-wide uppercase">
             {t("settings.appleHealth.setupTitle")}
           </h3>
           <ol className="text-muted-foreground list-decimal space-y-2 pl-5 text-sm">
diff --git a/src/components/settings/integrations/fitbit-card.tsx b/src/components/settings/integrations/fitbit-card.tsx
index ef5916aa7..351ef2dd2 100644
--- a/src/components/settings/integrations/fitbit-card.tsx
+++ b/src/components/settings/integrations/fitbit-card.tsx
@@ -305,7 +305,7 @@ export function FitbitCard({
         )}
 
         <div className="space-y-3">
-          <h3 className="text-sm font-semibold">
+          <h3 className="text-muted-foreground text-xs font-medium tracking-wide uppercase">
             {t("settings.fitbitCredentials")}
           </h3>
           {!status?.configured && (
diff --git a/src/components/settings/integrations/google-health-card.tsx b/src/components/settings/integrations/google-health-card.tsx
index 548a258c6..c76e11e57 100644
--- a/src/components/settings/integrations/google-health-card.tsx
+++ b/src/components/settings/integrations/google-health-card.tsx
@@ -502,7 +502,7 @@ export function GoogleHealthCard({
         )}
 
         <div className="space-y-3">
-          <h3 className="text-sm font-semibold">
+          <h3 className="text-muted-foreground text-xs font-medium tracking-wide uppercase">
             {t("settings.googleHealthCredentials")}
           </h3>
           <form onSubmit={handleSaveCredentials} className="space-y-3">
diff --git a/src/components/settings/integrations/oauth-provider-card.tsx b/src/components/settings/integrations/oauth-provider-card.tsx
index bc1a5c168..3b15226f4 100644
--- a/src/components/settings/integrations/oauth-provider-card.tsx
+++ b/src/components/settings/integrations/oauth-provider-card.tsx
@@ -332,7 +332,7 @@ export function OAuthProviderCard({
 
         {credentials && (
           <div className="space-y-3" data-testid={`${provider}-credentials`}>
-            <h3 className="text-sm font-semibold">
+            <h3 className="text-muted-foreground text-xs font-medium tracking-wide uppercase">
               {t(`${i18nPrefix}Credentials`)}
             </h3>
             {!status?.hasOwnCredentials && (
diff --git a/src/components/settings/integrations/whoop-card.tsx b/src/components/settings/integrations/whoop-card.tsx
index b03f64735..6abcec564 100644
--- a/src/components/settings/integrations/whoop-card.tsx
+++ b/src/components/settings/integrations/whoop-card.tsx
@@ -287,7 +287,7 @@ export function WhoopCard({
         )}
 
         <div className="space-y-3">
-          <h3 className="text-sm font-semibold">
+          <h3 className="text-muted-foreground text-xs font-medium tracking-wide uppercase">
             {t("settings.whoopCredentials")}
           </h3>
           {!status?.configured && (
diff --git a/src/components/settings/integrations/withings-card.tsx b/src/components/settings/integrations/withings-card.tsx
index d3ebbc928..faf143687 100644
--- a/src/components/settings/integrations/withings-card.tsx
+++ b/src/components/settings/integrations/withings-card.tsx
@@ -326,7 +326,7 @@ export function WithingsCard({
           </p>
         )}
         <div className="space-y-3">
-          <h3 className="text-sm font-semibold">
+          <h3 className="text-muted-foreground text-xs font-medium tracking-wide uppercase">
             {t("settings.withingsCredentials")}
           </h3>
           {!status?.configured && (

From 7f6eae842597707ebe0ed42cc4ffe4f3c7b24786 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marc-Andr=C3=A9=20Bombeck?= <mbombeck@gmail.com>
Date: Sun, 9 Aug 2026 11:27:05 +0200
Subject: [PATCH 2/6] style(ui): pull off-scale spacing and micro-labels onto
 the scale

Sweep the spacing rests that sat off the 1/1.5/2/3/4/6/8/10 scale: the
health-score panels and their skeleton, the recommendation ask-Coach
gutter, the onboarding tour footer, the vaccination row, the danger-zone
alert margins, the recovery-codes action wrapper, and the chart-tooltip
tile. Move the last hand-written micro-sizes (coach counters, the
personal-record badge, the score-ring label, the dose-history and
cycle-calendar headers, the mood tag chips) onto the text-2xs token, and
give the documents upload buttons the mobile tap floor their peers set.
---
 src/app/coach/conversations/page.tsx                   |  2 +-
 src/components/charts/chart-tooltip.tsx                |  2 +-
 src/components/cycle/cycle-calendar.tsx                |  2 +-
 src/components/documents/documents-view.tsx            | 10 ++++++++--
 src/components/insights/coach-panel/history-rail.tsx   |  2 +-
 src/components/insights/derived/score-ring.tsx         |  4 ++--
 src/components/insights/health-score-card.tsx          |  6 +++---
 src/components/insights/personal-record-badge.tsx      |  2 +-
 src/components/insights/recommendation-card.tsx        |  2 +-
 src/components/mood/mood-tag-picker.tsx                |  4 ++--
 src/components/onboarding/tour.tsx                     |  2 +-
 src/components/settings/advanced-section.tsx           |  4 ++--
 .../settings/import-panel/dose-history-columns.tsx     |  4 ++--
 src/components/settings/security-section/totp-card.tsx |  4 ++--
 src/components/vaccinations/vaccination-list.tsx       |  2 +-
 15 files changed, 29 insertions(+), 23 deletions(-)

diff --git a/src/app/coach/conversations/page.tsx b/src/app/coach/conversations/page.tsx
index d037d070a..1d276bc48 100644
--- a/src/app/coach/conversations/page.tsx
+++ b/src/app/coach/conversations/page.tsx
@@ -282,7 +282,7 @@ function CoachConversationsBody() {
                                 aria-hidden="true"
                               />
                               {(c.attachments?.length ?? 0) > 1 ? (
-                                <span className="text-[10px] font-semibold tabular-nums">
+                                <span className="text-2xs font-semibold tabular-nums">
                                   {c.attachments?.length}
                                 </span>
                               ) : null}
diff --git a/src/components/charts/chart-tooltip.tsx b/src/components/charts/chart-tooltip.tsx
index 78aea8c5d..dd6388a1f 100644
--- a/src/components/charts/chart-tooltip.tsx
+++ b/src/components/charts/chart-tooltip.tsx
@@ -73,7 +73,7 @@ export function RichChartTooltip({
   return (
     <div
       data-slot="rich-chart-tooltip"
-      className="bg-card border-border min-w-[140px] rounded-xl border p-2.5 text-xs shadow-lg"
+      className="bg-card border-border min-w-[140px] rounded-xl border p-3 text-xs shadow-lg"
       style={{
         // The card itself is layered above the chart's own SVG; without
         // an explicit background the gradient bleeds through the
diff --git a/src/components/cycle/cycle-calendar.tsx b/src/components/cycle/cycle-calendar.tsx
index e9fc3acfb..c38cd30d8 100644
--- a/src/components/cycle/cycle-calendar.tsx
+++ b/src/components/cycle/cycle-calendar.tsx
@@ -177,7 +177,7 @@ export function CycleCalendar({
           <div
             key={i}
             role="columnheader"
-            className="text-muted-foreground pb-1 text-center text-[11px] font-medium uppercase"
+            className="text-muted-foreground text-2xs pb-1 text-center font-medium uppercase"
           >
             {wk}
           </div>
diff --git a/src/components/documents/documents-view.tsx b/src/components/documents/documents-view.tsx
index a534608fc..7eba90039 100644
--- a/src/components/documents/documents-view.tsx
+++ b/src/components/documents/documents-view.tsx
@@ -883,7 +883,10 @@ export function DocumentsView() {
         description={t("documents.subtitle")}
         actions={
           canManage ? (
-            <Button onClick={() => uploadInputRef.current?.click()}>
+            <Button
+              className="min-h-11 sm:min-h-9"
+              onClick={() => uploadInputRef.current?.click()}
+            >
               <Upload className="size-4" aria-hidden />
               {t("documents.pageUpload")}
             </Button>
@@ -940,7 +943,10 @@ export function DocumentsView() {
           ctaSize="lg"
           action={
             canManage ? (
-              <Button onClick={() => uploadInputRef.current?.click()}>
+              <Button
+                className="min-h-11 sm:min-h-9"
+                onClick={() => uploadInputRef.current?.click()}
+              >
                 <Upload className="size-4" aria-hidden />
                 {t("documents.empty.action")}
               </Button>
diff --git a/src/components/insights/coach-panel/history-rail.tsx b/src/components/insights/coach-panel/history-rail.tsx
index 7f3da933d..d8cd1675a 100644
--- a/src/components/insights/coach-panel/history-rail.tsx
+++ b/src/components/insights/coach-panel/history-rail.tsx
@@ -234,7 +234,7 @@ export function HistoryRail({
                       >
                         <Paperclip className="size-3.5" aria-hidden="true" />
                         {(c.attachments?.length ?? 0) > 1 ? (
-                          <span className="text-[10px] font-semibold tabular-nums">
+                          <span className="text-2xs font-semibold tabular-nums">
                             {c.attachments?.length}
                           </span>
                         ) : null}
diff --git a/src/components/insights/derived/score-ring.tsx b/src/components/insights/derived/score-ring.tsx
index ce5b57978..917330473 100644
--- a/src/components/insights/derived/score-ring.tsx
+++ b/src/components/insights/derived/score-ring.tsx
@@ -56,7 +56,7 @@ const SIZE: Record<
   NonNullable<ScoreRingProps["size"]>,
   { px: number; numberClass: string; labelClass: string }
 > = {
-  sm: { px: 120, numberClass: "text-3xl", labelClass: "text-[11px]" },
+  sm: { px: 120, numberClass: "text-3xl", labelClass: "text-2xs" },
   md: { px: 168, numberClass: "text-5xl", labelClass: "text-xs" },
   lg: { px: 232, numberClass: "text-7xl", labelClass: "text-sm" },
 };
@@ -284,7 +284,7 @@ export function ScoreRing({
       {!hasScore && (
         <span
           data-slot="score-ring-provisional"
-          className="text-muted-foreground absolute inset-x-0 bottom-0 line-clamp-1 px-1 text-center text-[10px] leading-tight"
+          className="text-muted-foreground text-2xs absolute inset-x-0 bottom-0 line-clamp-1 px-1 text-center leading-tight"
         >
           {t("insights.derived.scoreRing.provisionalCaption")}
         </span>
diff --git a/src/components/insights/health-score-card.tsx b/src/components/insights/health-score-card.tsx
index 9c75a3f9a..64d0cfac0 100644
--- a/src/components/insights/health-score-card.tsx
+++ b/src/components/insights/health-score-card.tsx
@@ -310,7 +310,7 @@ export function HealthScoreCard({
         PANEL_COLUMN_CLASS,
         // `h-full` lets the hero band's `items-stretch` equalise the column
         // against the greeting; `mt-auto` on the foot collects the slack.
-        "flex h-full flex-col gap-3.5",
+        "flex h-full flex-col gap-3",
         className,
       )}
     >
@@ -827,7 +827,7 @@ export function HealthScoreCardSkeleton({ className }: { className?: string }) {
         PANEL_CHROME_CLASS,
         "border-border/60",
         PANEL_COLUMN_CLASS,
-        "flex h-full flex-col gap-3.5",
+        "flex h-full flex-col gap-3",
         PANEL_RESERVE_CLASS,
         className,
       )}
@@ -838,7 +838,7 @@ export function HealthScoreCardSkeleton({ className }: { className?: string }) {
           keeps these blocks under the minimum above, so the minimum is the
           thing that decides the height. */}
       <Skeleton className="h-4 w-24" />
-      <Skeleton className="h-15 w-28" />
+      <Skeleton className="h-14 w-28" />
       <Skeleton className="h-2 w-full rounded-full" />
       <div className="space-y-1">
         <Skeleton className="h-4 w-40" />
diff --git a/src/components/insights/personal-record-badge.tsx b/src/components/insights/personal-record-badge.tsx
index 3776c55a6..b6d163a81 100644
--- a/src/components/insights/personal-record-badge.tsx
+++ b/src/components/insights/personal-record-badge.tsx
@@ -120,7 +120,7 @@ export function PersonalRecordBadge({
         // green on the dark card (#50fa7b). Both clear 4.5:1 against
         // their card background — the previous `text-success` on
         // `bg-success/10` measured ~2.6:1 in dark mode.
-        "border-success/40 bg-success/15 text-success inline-flex shrink-0 items-center rounded-full border px-1.5 py-0.5 text-[10px] leading-none font-semibold tracking-wide uppercase tabular-nums",
+        "border-success/40 bg-success/15 text-success text-2xs inline-flex shrink-0 items-center rounded-full border px-1.5 py-0.5 leading-none font-semibold tracking-wide uppercase tabular-nums",
         className,
       )}
       aria-label={t("insights.personalRecord.badge")}
diff --git a/src/components/insights/recommendation-card.tsx b/src/components/insights/recommendation-card.tsx
index 83467c75c..0868c84ef 100644
--- a/src/components/insights/recommendation-card.tsx
+++ b/src/components/insights/recommendation-card.tsx
@@ -443,7 +443,7 @@ export function RecommendationCard({
 
       {/* v1.21.0 (C4 H2) — discreet "ask the Coach about this rec" link,
           aligned under the rec text (the number gutter is `ml-6`). */}
-      <div className="mt-1 ml-5">
+      <div className="mt-1 ml-6">
         <AskCoachAction
           question={coachQuestion}
           scope={coachScopeSource ? { metric: coachScopeSource } : undefined}
diff --git a/src/components/mood/mood-tag-picker.tsx b/src/components/mood/mood-tag-picker.tsx
index ab17ac5ae..23c6f067e 100644
--- a/src/components/mood/mood-tag-picker.tsx
+++ b/src/components/mood/mood-tag-picker.tsx
@@ -184,7 +184,7 @@ export function MoodTagPicker({
                       }`}
                     >
                       <TagIcon className="h-5 w-5" aria-hidden="true" />
-                      <span className="text-[11px] leading-tight">{label}</span>
+                      <span className="text-2xs leading-tight">{label}</span>
                     </button>
                   );
                 })}
@@ -337,7 +337,7 @@ function AddTagTile({
       className="border-border/70 text-muted-foreground hover:bg-accent hover:text-foreground focus-visible:ring-ring focus-visible:ring-offset-background flex min-h-16 w-[4.5rem] flex-col items-center justify-center gap-1 rounded-xl border border-dashed p-2 text-center transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none"
     >
       <Plus className="h-5 w-5" aria-hidden="true" />
-      <span className="text-[11px] leading-tight">{label}</span>
+      <span className="text-2xs leading-tight">{label}</span>
     </button>
   );
 }
diff --git a/src/components/onboarding/tour.tsx b/src/components/onboarding/tour.tsx
index ee2ce7083..31d9fa540 100644
--- a/src/components/onboarding/tour.tsx
+++ b/src/components/onboarding/tour.tsx
@@ -695,7 +695,7 @@ export function OnboardingTour({
         {/* `flex-wrap` keeps long localised labels (Skip / Back / Next) from
             forcing a horizontal scrollbar inside the card — the row wraps
             instead, so the primary action is always reachable. */}
-        <footer className="mt-5 flex flex-wrap items-center justify-between gap-2">
+        <footer className="mt-4 flex flex-wrap items-center justify-between gap-2">
           <Button
             type="button"
             variant="ghost"
diff --git a/src/components/settings/advanced-section.tsx b/src/components/settings/advanced-section.tsx
index 181e6907c..4c55d52e3 100644
--- a/src/components/settings/advanced-section.tsx
+++ b/src/components/settings/advanced-section.tsx
@@ -108,7 +108,7 @@ function DataResetCard() {
       {msg && (
         <p
           role="alert"
-          className={`mt-3 text-sm ${msgType === "success" ? "text-success" : "text-destructive"}`}
+          className={`text-sm ${msgType === "success" ? "text-success" : "text-destructive"}`}
         >
           {msg}
         </p>
@@ -246,7 +246,7 @@ function AccountDeleteCard() {
       {msg && (
         <p
           role="alert"
-          className={`mt-3 text-sm ${msgType === "success" ? "text-success" : "text-destructive"}`}
+          className={`text-sm ${msgType === "success" ? "text-success" : "text-destructive"}`}
         >
           {msg}
         </p>
diff --git a/src/components/settings/import-panel/dose-history-columns.tsx b/src/components/settings/import-panel/dose-history-columns.tsx
index b53cccf93..7177b2ea8 100644
--- a/src/components/settings/import-panel/dose-history-columns.tsx
+++ b/src/components/settings/import-panel/dose-history-columns.tsx
@@ -72,13 +72,13 @@ export function DoseHistoryColumnRulings() {
             <dt className="text-foreground flex flex-wrap items-baseline gap-x-2 text-xs">
               <code className="font-mono">{ruling.column}</code>
               <span
-                className="text-muted-foreground text-[0.6875rem] uppercase"
+                className="text-muted-foreground text-2xs uppercase"
                 data-verdict={ruling.verdict}
               >
                 {verdictFor(ruling.verdict)}
               </span>
               {ruling.jsonOnly && (
-                <span className="text-muted-foreground text-[0.6875rem]">
+                <span className="text-muted-foreground text-2xs">
                   {t("settings.sections.export.import.doseHistory.jsonOnly")}
                 </span>
               )}
diff --git a/src/components/settings/security-section/totp-card.tsx b/src/components/settings/security-section/totp-card.tsx
index d19e46860..6873c4140 100644
--- a/src/components/settings/security-section/totp-card.tsx
+++ b/src/components/settings/security-section/totp-card.tsx
@@ -325,9 +325,9 @@ export function TotpCard({
 
         {/* ── Fresh recovery codes (post-confirm or post-regen) ── */}
         {freshCodes && (
-          <div>
+          <div className="space-y-3">
             <RecoveryCodesPanel codes={freshCodes} />
-            <SettingsCardActions className="mt-3">
+            <SettingsCardActions>
               <Button
                 type="button"
                 variant="outline"
diff --git a/src/components/vaccinations/vaccination-list.tsx b/src/components/vaccinations/vaccination-list.tsx
index 2a43ccdff..7974b135c 100644
--- a/src/components/vaccinations/vaccination-list.tsx
+++ b/src/components/vaccinations/vaccination-list.tsx
@@ -172,7 +172,7 @@ function DoseRow({
           : undefined
       }
     >
-      <CardContent className="flex items-center justify-between gap-3 px-4 py-2.5">
+      <CardContent className="flex items-center justify-between gap-3 px-4 py-3">
         <div className="min-w-0 space-y-0.5">
           <div className="flex flex-wrap items-center gap-x-2 text-sm">
             {series ? (

From a959db8679118b05eed7cbfe02eb624c158d7459 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marc-Andr=C3=A9=20Bombeck?= <mbombeck@gmail.com>
Date: Sun, 9 Aug 2026 11:27:18 +0200
Subject: [PATCH 3/6] refactor(ui): route settings shells, actions, and empty
 states through primitives

Bring the remaining settings and dashboard surfaces onto the shared
anatomy: the API and MCP revoke buttons become the destructive variant
instead of an outline hand-tinted red; the runtime-actions row places
its raw-data setting and status lines above the actions, not under them;
the account section paints its card and header while loading instead of a
lone spinner; the share revoke becomes a right-aligned row action rather
than a full-width alarm strip per link; the recent-workouts tile and the
MCP and notifications empty states compose Card and EmptyState instead of
hand-rolled bg-card shells.
---
 src/app/notifications/page.tsx                |  20 +--
 .../dashboard/recent-workouts-tile.tsx        | 169 +++++++++---------
 .../settings/account-section/index.tsx        |  14 +-
 .../settings/ai/runtime-actions-row.tsx       |  82 ++++-----
 src/components/settings/api-section.tsx       |   4 +-
 src/components/settings/mcp-section.tsx       |  17 +-
 src/components/settings/sharing-section.tsx   |   5 +-
 7 files changed, 161 insertions(+), 150 deletions(-)

diff --git a/src/app/notifications/page.tsx b/src/app/notifications/page.tsx
index db199f853..ba17b08c5 100644
--- a/src/app/notifications/page.tsx
+++ b/src/app/notifications/page.tsx
@@ -8,6 +8,7 @@ import { Label } from "@/components/ui/label";
 import { Button } from "@/components/ui/button";
 import { PageHeader } from "@/components/ui/page-header";
 import { Skeleton } from "@/components/ui/skeleton";
+import { EmptyState } from "@/components/ui/empty-state";
 import { QueryErrorCard } from "@/components/ui/query-error-card";
 import Link from "next/link";
 import { Bell, Settings, AlertCircle } from "lucide-react";
@@ -201,22 +202,21 @@ export default function NotificationsPage() {
           description={t("notifications.subtitle")}
           actions={headerActions}
         />
-        <div className="bg-card border-border max-w-2xl rounded-xl border p-6">
-          <div className="flex flex-col items-center gap-4 py-8 text-center">
-            <Bell className="text-muted-foreground h-12 w-12" />
-            <p className="text-muted-foreground text-sm">
-              {t("notifications.noChannels")}
-            </p>
-            {/* Channel setup lives in Settings → Integrations since v1.25.7;
-                point the CTA at that anchor, not the reminder-types screen. */}
+        <EmptyState
+          className="max-w-2xl"
+          icon={<Bell className="size-6" />}
+          title={t("notifications.noChannels")}
+          /* Channel setup lives in Settings → Integrations since v1.25.7;
+             point the CTA at that anchor, not the reminder-types screen. */
+          action={
             <Button asChild variant="outline">
               <Link href="/settings/integrations#channels">
                 <Settings className="h-4 w-4" />
                 {t("notifications.goToSettings")}
               </Link>
             </Button>
-          </div>
-        </div>
+          }
+        />
       </div>
     );
   }
diff --git a/src/components/dashboard/recent-workouts-tile.tsx b/src/components/dashboard/recent-workouts-tile.tsx
index cd4eab1ab..cf77c7eeb 100644
--- a/src/components/dashboard/recent-workouts-tile.tsx
+++ b/src/components/dashboard/recent-workouts-tile.tsx
@@ -6,6 +6,7 @@ import { Activity } from "lucide-react";
 import { useTranslations } from "@/lib/i18n/context";
 import { useWorkouts, type WorkoutListEntry } from "@/hooks/use-workouts";
 import { cn } from "@/lib/utils";
+import { Card, CardContent, CardHeader } from "@/components/ui/card";
 import { TileHeader } from "@/components/insights/tile-header";
 import { getDateTimeFormat } from "@/lib/intl/formatter-cache";
 import { Skeleton } from "@/components/ui/skeleton";
@@ -78,90 +79,90 @@ export function RecentWorkoutsTile() {
   const workouts = data?.workouts ?? [];
 
   return (
-    <div
-      data-slot="recent-workouts-tile"
-      className={cn(
-        "bg-card border-border space-y-3 rounded-xl border p-4 md:p-6",
-      )}
-    >
-      {/* Canonical tile header (foreground icon + title) — the same
-          `TileHeader` contract the Insights tiles use, so the dashboard
-          stops speaking a separate header language. `size="sm"` matches the
-          compact dashboard tile. */}
-      <TileHeader
-        icon={Activity}
-        size="sm"
-        title={t("dashboard.recentWorkouts.title")}
-        titleAs="h2"
-        right={
-          <Link
-            href="/insights/workouts"
-            className="text-muted-foreground hover:text-foreground inline-flex min-h-11 items-center text-xs"
-          >
-            {t("dashboard.recentWorkouts.viewAll")}
-          </Link>
-        }
-      />
-
-      {showLoading ? (
-        // v1.4.43 W11-L6 — reserve roughly the loaded tile height
-        // (3 workouts × ~3 rem rows + spacing) so the surrounding
-        // dashboard layout doesn't reflow once the data lands.
-        // v1.29.x — row-shaped skeletons instead of a "loading…" text
-        // line, matching the sport-icon + label + day + duration shape
-        // the loaded rows render.
-        <div data-slot="recent-workouts-loading" className="space-y-2">
-          {[0, 1, 2].map((i) => (
-            <div key={i} className="flex items-center gap-3 px-1 py-1">
-              <Skeleton className="size-7 shrink-0 rounded-full" />
-              <Skeleton className="h-4 min-w-0 flex-1" />
-              <Skeleton className="h-4 w-12 shrink-0" />
-              <Skeleton className="h-4 w-8 shrink-0" />
-            </div>
-          ))}
-        </div>
-      ) : isError ? (
-        <QueryErrorCard
-          onRetry={() => refetch()}
-          className="border-0 bg-transparent shadow-none"
+    <Card data-slot="recent-workouts-tile" className="h-full">
+      <CardHeader>
+        {/* Canonical tile header (foreground icon + title) — the same
+            `TileHeader` contract the Insights tiles use, so the dashboard
+            stops speaking a separate header language. `size="sm"` matches the
+            compact dashboard tile. */}
+        <TileHeader
+          icon={Activity}
+          size="sm"
+          title={t("dashboard.recentWorkouts.title")}
+          titleAs="h2"
+          right={
+            <Link
+              href="/insights/workouts"
+              className="text-muted-foreground hover:text-foreground inline-flex min-h-11 items-center text-xs"
+            >
+              {t("dashboard.recentWorkouts.viewAll")}
+            </Link>
+          }
         />
-      ) : workouts.length === 0 ? (
-        <div data-slot="recent-workouts-empty" className="space-y-1">
-          <p className="text-sm">{t("dashboard.recentWorkouts.empty.title")}</p>
-          <p className="text-muted-foreground text-xs">
-            {t("dashboard.recentWorkouts.empty.cta")}
-          </p>
-        </div>
-      ) : (
-        <ul className="space-y-2">
-          {workouts.map((workout) => {
-            const sportLabelKey = `insights.workouts.sport.${workout.sportType}`;
-            const sportLabel = t(sportLabelKey);
-            const sportName =
-              sportLabel === sportLabelKey ? workout.sportType : sportLabel;
-            return (
-              <li key={workout.id}>
-                <Link
-                  href={`/insights/workouts/${encodeURIComponent(workout.id)}`}
-                  data-slot="recent-workouts-link"
-                  className={cn(
-                    "flex items-center gap-2 rounded-md px-1 py-1 transition-colors",
-                    "hover:bg-accent focus-visible:ring-ring/50 focus-visible:ring-2 focus-visible:outline-none",
-                  )}
-                >
-                  {renderRow(workout, sportName)}
-                  <span className="text-muted-foreground shrink-0 text-xs tabular-nums">
-                    {formatDayLabel(workout.startedAt, locale)}
-                  </span>
-                  <span className="ml-1 shrink-0 text-xs font-medium tabular-nums">
-                    {formatDuration(workout.durationSec)}
-                  </span>
-                </Link>
-              </li>
-            );
-          })}
-        </ul>
-      )}
-    </div>
+      </CardHeader>
+      <CardContent>
+        {showLoading ? (
+          // v1.4.43 W11-L6 — reserve roughly the loaded tile height
+          // (3 workouts × ~3 rem rows + spacing) so the surrounding
+          // dashboard layout doesn't reflow once the data lands.
+          // v1.29.x — row-shaped skeletons instead of a "loading…" text
+          // line, matching the sport-icon + label + day + duration shape
+          // the loaded rows render.
+          <div data-slot="recent-workouts-loading" className="space-y-2">
+            {[0, 1, 2].map((i) => (
+              <div key={i} className="flex items-center gap-3 px-1 py-1">
+                <Skeleton className="size-7 shrink-0 rounded-full" />
+                <Skeleton className="h-4 min-w-0 flex-1" />
+                <Skeleton className="h-4 w-12 shrink-0" />
+                <Skeleton className="h-4 w-8 shrink-0" />
+              </div>
+            ))}
+          </div>
+        ) : isError ? (
+          <QueryErrorCard
+            onRetry={() => refetch()}
+            className="border-0 bg-transparent shadow-none"
+          />
+        ) : workouts.length === 0 ? (
+          <div data-slot="recent-workouts-empty" className="space-y-1">
+            <p className="text-sm">
+              {t("dashboard.recentWorkouts.empty.title")}
+            </p>
+            <p className="text-muted-foreground text-xs">
+              {t("dashboard.recentWorkouts.empty.cta")}
+            </p>
+          </div>
+        ) : (
+          <ul className="space-y-2">
+            {workouts.map((workout) => {
+              const sportLabelKey = `insights.workouts.sport.${workout.sportType}`;
+              const sportLabel = t(sportLabelKey);
+              const sportName =
+                sportLabel === sportLabelKey ? workout.sportType : sportLabel;
+              return (
+                <li key={workout.id}>
+                  <Link
+                    href={`/insights/workouts/${encodeURIComponent(workout.id)}`}
+                    data-slot="recent-workouts-link"
+                    className={cn(
+                      "flex items-center gap-2 rounded-md px-1 py-1 transition-colors",
+                      "hover:bg-accent focus-visible:ring-ring/50 focus-visible:ring-2 focus-visible:outline-none",
+                    )}
+                  >
+                    {renderRow(workout, sportName)}
+                    <span className="text-muted-foreground shrink-0 text-xs tabular-nums">
+                      {formatDayLabel(workout.startedAt, locale)}
+                    </span>
+                    <span className="ml-1 shrink-0 text-xs font-medium tabular-nums">
+                      {formatDuration(workout.durationSec)}
+                    </span>
+                  </Link>
+                </li>
+              );
+            })}
+          </ul>
+        )}
+      </CardContent>
+    </Card>
   );
 }
diff --git a/src/components/settings/account-section/index.tsx b/src/components/settings/account-section/index.tsx
index 5d223b5fd..795852dd0 100644
--- a/src/components/settings/account-section/index.tsx
+++ b/src/components/settings/account-section/index.tsx
@@ -285,10 +285,18 @@ export function AccountSection() {
   }
 
   if (!mounted || isLoading) {
+    // §13 — a loading section paints its card + header, not a bare centered
+    // spinner (reference: admin/coach-feedback-section).
     return (
-      <div className="flex h-64 items-center justify-center">
-        <Loader2 className="text-primary h-8 w-8 animate-spin motion-reduce:animate-none" />
-      </div>
+      <SettingsCard>
+        <SettingsCardHeader icon={User} title={t("settings.profile")} />
+        <div className="flex items-center gap-2">
+          <Loader2 className="h-4 w-4 animate-spin motion-reduce:animate-none" />
+          <span className="text-muted-foreground text-sm">
+            {t("common.loading")}
+          </span>
+        </div>
+      </SettingsCard>
     );
   }
 
diff --git a/src/components/settings/ai/runtime-actions-row.tsx b/src/components/settings/ai/runtime-actions-row.tsx
index 4bdc3e181..ddc043a4f 100644
--- a/src/components/settings/ai/runtime-actions-row.tsx
+++ b/src/components/settings/ai/runtime-actions-row.tsx
@@ -10,6 +10,7 @@ import { toast } from "sonner";
 
 import { Button } from "@/components/ui/button";
 import { Switch } from "@/components/ui/switch";
+import { SettingsCardActions } from "@/components/settings/_card-actions";
 import { apiFetchRaw, apiPut } from "@/lib/api/api-fetch";
 import { formatDateTime } from "@/lib/format";
 import { useTranslations } from "@/lib/i18n/context";
@@ -199,47 +200,10 @@ export function RuntimeActionsRow({
   void userProvider;
 
   return (
+    // §12 — the action row is the LAST thing in the block. The raw-data
+    // setting and every status line (last-generated, test / regenerate
+    // result) sit ABOVE it, never under it.
     <div className="space-y-3">
-      <div className="flex flex-wrap items-center gap-2">
-        <Button
-          type="button"
-          size="sm"
-          variant="outline"
-          className="min-h-11 sm:min-h-9"
-          onClick={runTest}
-          disabled={testing}
-          data-testid="ai-test-active-provider"
-        >
-          {testing ? (
-            <Loader2 className="h-4 w-4 animate-spin motion-reduce:animate-none" />
-          ) : (
-            <Sparkles className="h-4 w-4" />
-          )}
-          {t("settings.ai.testProvider")}
-        </Button>
-        {canRegenerate && (
-          <Button
-            size="sm"
-            variant="outline"
-            className="min-h-11 sm:min-h-9"
-            onClick={regenerate}
-            disabled={regen}
-          >
-            {regen ? (
-              <Loader2 className="h-4 w-4 animate-spin motion-reduce:animate-none" />
-            ) : (
-              <RefreshCw className="h-4 w-4" />
-            )}
-            {t("settings.regenerateInsights")}
-          </Button>
-        )}
-        {lastInsightLine && (
-          <span className="text-muted-foreground text-xs">
-            {lastInsightLine}
-          </span>
-        )}
-      </div>
-
       {canRegenerate && (
         <div className="bg-muted/50 rounded-lg p-3">
           <div className="flex items-center justify-between gap-4">
@@ -265,6 +229,9 @@ export function RuntimeActionsRow({
         </div>
       )}
 
+      {lastInsightLine && (
+        <p className="text-muted-foreground text-xs">{lastInsightLine}</p>
+      )}
       {testMsg && (
         <p
           className={`text-xs ${testOk ? "text-success" : "text-destructive"}`}
@@ -279,6 +246,41 @@ export function RuntimeActionsRow({
           {regenMsg}
         </p>
       )}
+
+      <SettingsCardActions align="start">
+        <Button
+          type="button"
+          size="sm"
+          variant="outline"
+          className="min-h-11 sm:min-h-9"
+          onClick={runTest}
+          disabled={testing}
+          data-testid="ai-test-active-provider"
+        >
+          {testing ? (
+            <Loader2 className="h-4 w-4 animate-spin motion-reduce:animate-none" />
+          ) : (
+            <Sparkles className="h-4 w-4" />
+          )}
+          {t("settings.ai.testProvider")}
+        </Button>
+        {canRegenerate && (
+          <Button
+            size="sm"
+            variant="outline"
+            className="min-h-11 sm:min-h-9"
+            onClick={regenerate}
+            disabled={regen}
+          >
+            {regen ? (
+              <Loader2 className="h-4 w-4 animate-spin motion-reduce:animate-none" />
+            ) : (
+              <RefreshCw className="h-4 w-4" />
+            )}
+            {t("settings.regenerateInsights")}
+          </Button>
+        )}
+      </SettingsCardActions>
     </div>
   );
 }
diff --git a/src/components/settings/api-section.tsx b/src/components/settings/api-section.tsx
index af2565527..542d25fbd 100644
--- a/src/components/settings/api-section.tsx
+++ b/src/components/settings/api-section.tsx
@@ -406,9 +406,9 @@ function ApiTokensCard() {
                         <AlertDialog>
                           <AlertDialogTrigger asChild>
                             <Button
-                              variant="outline"
+                              variant="destructive"
                               size="sm"
-                              className="text-destructive border-destructive/30 min-h-11 w-full"
+                              className="min-h-11 w-full"
                             >
                               <Trash2 className="h-3.5 w-3.5" />
                               {t("settings.tokenRevoke")}
diff --git a/src/components/settings/mcp-section.tsx b/src/components/settings/mcp-section.tsx
index 3d6099963..bbe832620 100644
--- a/src/components/settings/mcp-section.tsx
+++ b/src/components/settings/mcp-section.tsx
@@ -34,6 +34,7 @@ import {
 } from "@/components/ui/alert-dialog";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
+import { EmptyState } from "@/components/ui/empty-state";
 import { Input } from "@/components/ui/input";
 import { QueryErrorCard } from "@/components/ui/query-error-card";
 import { Skeleton } from "@/components/ui/skeleton";
@@ -122,9 +123,7 @@ function McpConnectionsCard() {
         ) : isLoading ? (
           <Skeleton className="h-24 w-full rounded-lg" />
         ) : 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")}
-          </p>
+          <EmptyState size="compact" title={t("settings.mcp.noConnections")} />
         ) : (
           <ul className="space-y-2">
             {list.map((conn) => (
@@ -157,9 +156,9 @@ function McpConnectionsCard() {
                 <AlertDialog>
                   <AlertDialogTrigger asChild>
                     <Button
-                      variant="outline"
+                      variant="destructive"
                       size="sm"
-                      className="text-destructive border-destructive/30 min-h-11 w-full"
+                      className="min-h-11 w-full"
                     >
                       <Trash2 className="h-3.5 w-3.5" />
                       {t("settings.mcp.connectionRevoke")}
@@ -440,9 +439,7 @@ function McpTokensCard() {
           ) : isLoading ? (
             <Skeleton className="h-24 w-full rounded-lg" />
           ) : activeTokens.length === 0 ? (
-            <p className="text-muted-foreground rounded-lg border border-dashed px-3 py-4 text-center text-sm">
-              {t("settings.noActiveTokens")}
-            </p>
+            <EmptyState size="compact" title={t("settings.noActiveTokens")} />
           ) : (
             <ul className="space-y-2">
               {activeTokens.map((tok) => {
@@ -490,9 +487,9 @@ function McpTokensCard() {
                     <AlertDialog>
                       <AlertDialogTrigger asChild>
                         <Button
-                          variant="outline"
+                          variant="destructive"
                           size="sm"
-                          className="text-destructive border-destructive/30 min-h-11 w-full"
+                          className="min-h-11 w-full"
                         >
                           <Trash2 className="h-3.5 w-3.5" />
                           {t("settings.tokenRevoke")}
diff --git a/src/components/settings/sharing-section.tsx b/src/components/settings/sharing-section.tsx
index 88cb483ca..c05674421 100644
--- a/src/components/settings/sharing-section.tsx
+++ b/src/components/settings/sharing-section.tsx
@@ -236,12 +236,15 @@ function ShareLinksCard() {
                         ? ` · ${formatDateTime(link.lastAccessAt)}`
                         : ""}
                     </p>
+                    {/* §12 — a right-aligned row action, not a full-width
+                        destructive strip stacked once per link (which reads as
+                        an alarm wall on a list of shares). */}
                     <AlertDialog>
                       <AlertDialogTrigger asChild>
                         <Button
                           variant="destructive"
                           size="sm"
-                          className="min-h-11 w-full sm:min-h-9"
+                          className="ml-auto flex min-h-11 w-fit sm:min-h-9"
                         >
                           <Trash2 className="mr-2 h-3.5 w-3.5" />
                           {t("settings.sharing.revoke")}

From b24a6eac2c329333027c3701889470eec2da4c1a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marc-Andr=C3=A9=20Bombeck?= <mbombeck@gmail.com>
Date: Sun, 9 Aug 2026 11:27:29 +0200
Subject: [PATCH 4/6] feat(lint): extend spacing-scale to the full off-scale
 step family on shells
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The shell check caught only the bare `5` step on p/px/py/space-y/gap, so
off-scale directional and half-step spacing (`ml-5`, `pl-5`, `gap-3.5`,
`py-2.5`, the `7` step) slipped through on hand-rolled card shells. Widen
it to the whole spacing prefix family (padding, margin, gap, space) and
every banned step — `5`, `7`, and half-steps other than the sanctioned
`1.5`. Height stays out of scope: it is a dimension, not a scale step.

Verified the rule bites by injecting `gap-3.5` onto a real bg-card+border
shell and watching lint flag it, then reverting; the sweep this rule
guards left the tree clean apart from one tooltip shell, now on-scale.
---
 .../__tests__/spacing-scale.test.mjs          | 72 ++++++++++++++++---
 eslint-plugins/healthlog/spacing-scale.js     | 59 +++++++++------
 2 files changed, 99 insertions(+), 32 deletions(-)

diff --git a/eslint-plugins/healthlog/__tests__/spacing-scale.test.mjs b/eslint-plugins/healthlog/__tests__/spacing-scale.test.mjs
index 5c242ecbe..405f9fc27 100644
--- a/eslint-plugins/healthlog/__tests__/spacing-scale.test.mjs
+++ b/eslint-plugins/healthlog/__tests__/spacing-scale.test.mjs
@@ -60,20 +60,36 @@ ruleTester.run("spacing-scale", rule, {
       code: '<CardHeader className="pb-2" />',
       filename: "/repo/src/components/__tests__/example.test.tsx",
     },
-    // The card-shell `5` check is scoped to the bg-card+border pair, so the
+    // The card-shell check is scoped to the bg-card+border pair, so the
     // justified list-marker inset never trips it (no shell).
     {
       code: '<ul className="list-disc pl-5 space-y-1" />',
       filename: APP_FILE,
     },
-    // A directional inset ON a shell is out of scope (pl-5/pr-5 not banned).
+    // Off-scale spacing without a shell surface is fine — a form-body
+    // `space-y-5` rhythm and a half-step gap outside a shell both pass.
     {
-      code: '<div className="bg-card border-border rounded-xl border pl-5" />',
+      code: '<form className="space-y-5" />',
       filename: APP_FILE,
     },
-    // Form-body rhythm without a shell surface is fine.
     {
-      code: '<form className="space-y-5" />',
+      code: '<div className="flex flex-col gap-3.5" />',
+      filename: APP_FILE,
+    },
+    // The sanctioned `1.5` half-step is on-scale, even on a shell.
+    {
+      code: '<div className="bg-card border-border rounded-xl border gap-1.5" />',
+      filename: APP_FILE,
+    },
+    // A deliberate negative margin is never matched (boundary anchored).
+    {
+      code: '<div className="bg-card border-border rounded-full border -mt-5" />',
+      filename: APP_FILE,
+    },
+    // Height is a dimension, not a scale step — `h-15` on a shell is out of
+    // this rule's scope by design.
+    {
+      code: '<div className="bg-card border-border rounded-xl border h-15" />',
       filename: APP_FILE,
     },
     // A shell already on-scale is fine.
@@ -138,30 +154,64 @@ ruleTester.run("spacing-scale", rule, {
     {
       code: '<div className="bg-card border-border rounded-xl border p-5" />',
       filename: APP_FILE,
-      errors: [{ messageId: "cardShellStep5" }],
+      errors: [{ messageId: "cardShellOffScale" }],
     },
     // …py-5, …space-y-5, …gap-5 on a shell all trip it.
     {
       code: '<section className="bg-card rounded-lg border py-5" />',
       filename: APP_FILE,
-      errors: [{ messageId: "cardShellStep5" }],
+      errors: [{ messageId: "cardShellOffScale" }],
     },
     {
       code: '<div className="bg-card border-border rounded-xl border gap-5 flex" />',
       filename: APP_FILE,
-      errors: [{ messageId: "cardShellStep5" }],
+      errors: [{ messageId: "cardShellOffScale" }],
+    },
+    // The `7` step is banned with the `5` step.
+    {
+      code: '<div className="bg-card border-border rounded-xl border p-7" />',
+      filename: APP_FILE,
+      errors: [{ messageId: "cardShellOffScale" }],
+    },
+    // Half-steps other than 1.5 on a shell: gap-3.5, space-y-3.5, py-2.5.
+    {
+      code: '<div className="bg-card border-border rounded-xl border flex flex-col gap-3.5" />',
+      filename: APP_FILE,
+      errors: [{ messageId: "cardShellOffScale" }],
+    },
+    {
+      code: '<div className="bg-card border rounded-xl space-y-3.5" />',
+      filename: APP_FILE,
+      errors: [{ messageId: "cardShellOffScale" }],
+    },
+    {
+      code: '<div className="bg-card border-border rounded-lg border py-2.5" />',
+      filename: APP_FILE,
+      errors: [{ messageId: "cardShellOffScale" }],
+    },
+    // The directional `pl-`/`ml-` spellings that slipped the `5`-only check
+    // now trip it on a shell.
+    {
+      code: '<div className="bg-card border-border rounded-xl border pl-5" />',
+      filename: APP_FILE,
+      errors: [{ messageId: "cardShellOffScale" }],
+    },
+    {
+      code: '<div className="bg-card border-border rounded-xl border ml-5" />',
+      filename: APP_FILE,
+      errors: [{ messageId: "cardShellOffScale" }],
     },
-    // Split across cn() args — the join still sees the shell + the step-5.
+    // Split across cn() args — the join still sees the shell + the step.
     {
       code: '<div className={cn("bg-card border rounded-xl", "p-5")} />',
       filename: APP_FILE,
-      errors: [{ messageId: "cardShellStep5" }],
+      errors: [{ messageId: "cardShellOffScale" }],
     },
     // Modifier-prefixed step on a shell.
     {
       code: '<div className="bg-card border-border rounded-xl border sm:p-5" />',
       filename: APP_FILE,
-      errors: [{ messageId: "cardShellStep5" }],
+      errors: [{ messageId: "cardShellOffScale" }],
     },
   ],
 });
diff --git a/eslint-plugins/healthlog/spacing-scale.js b/eslint-plugins/healthlog/spacing-scale.js
index 8fa8bcad4..6c5e032fa 100644
--- a/eslint-plugins/healthlog/spacing-scale.js
+++ b/eslint-plugins/healthlog/spacing-scale.js
@@ -17,16 +17,25 @@
  *     modifier-prefixed (`md:pb-2`) and arbitrary-value (`pb-[10px]`) forms.
  *     Non-numeric suffixes (`pb-safe`) never match.
  *
- *  2. `cardShellStep5` — no off-scale `5` step (20 px, banned by §2) on a
- *     hand-rolled card SHELL. The shell heuristic (§7.2) keys off the
- *     `bg-card` + `border` pair on ONE element: a `p-5` / `px-5` / `py-5` /
- *     `space-y-5` / `gap-5` there sits denser than every sibling `<Card>`
- *     (which is `p-4 md:p-6`), and the 4 px step reads next to a conformant
- *     card on the same viewport. Deliberately NARROW: it fires only when the
- *     same element paints a card surface, so justified `pl-5`/`pl-7`
- *     list-marker insets (no `bg-card`) and form-body `space-y-5` rhythm (no
- *     shell) never trip it. Hand-rolled shells sweep to `p-4 md:p-6`
- *     (or `p-3` for a dense inner tile); new surfaces compose `<Card>`.
+ *  2. `cardShellOffScale` — no off-scale spacing step on a hand-rolled card
+ *     SHELL. The scale (§2) is `1 / 1.5 / 2 / 3 / 4 / 6 / 8 / 10`; the `5`
+ *     (20 px) and `7` (28 px) steps and every half-step other than `1.5`
+ *     (`2.5`, `3.5`, …) are banned. The shell heuristic (§7.2) keys off the
+ *     `bg-card` + `border` pair on ONE element: a `p-5` / `py-2.5` /
+ *     `space-y-3.5` / `gap-3.5` / `ml-5` there sits off the scale next to
+ *     every sibling `<Card>` (which is `p-4 md:p-6`), and reads on the same
+ *     viewport. The prefix set is the full spacing family — padding
+ *     (`p/px/py/pt/pb/pl/pr`), margin (`m/mx/my/mt/mb/ml/mr`), gap
+ *     (`gap/gap-x/gap-y`), and `space-x/space-y` — so the `pl-`/`ml-`/`gap-`
+ *     spellings that slipped the earlier `5`-only check are covered.
+ *     Deliberately NARROW: it fires only when the same element paints a card
+ *     surface, so a justified `pl-5` list-marker inset (no `bg-card`), a
+ *     form-body `space-y-5` rhythm (no shell), and a deliberate negative
+ *     margin (`-mt-5`, never matched) never trip it. Height (`h-`) is a
+ *     dimension, not a scale step (`h-11` tap floor, `h-14`, `h-64` are all
+ *     legal), so it is out of scope by design. Hand-rolled shells sweep to
+ *     `p-4 md:p-6` (or `p-3` for a dense inner tile); new surfaces compose
+ *     `<Card>`.
  *
  * Both checks collect strings from the whole `className` subtree, so
  * `cn("…", cond && "…")`, ternaries, and template literals are all seen.
@@ -63,12 +72,20 @@ const SLOT_NAMES = new Set(["CardHeader", "CardContent"]);
 const SHELL_BG_RE = /\bbg-card\b/;
 const SHELL_BORDER_RE = /\bborder(?:-|\b)/;
 
-// The banned `5` step (20 px) on a shell — the subset §7.2 scopes to an
-// error-clean rule: p-5 / px-5 / py-5 / space-y-5 / gap-5, with optional
-// modifier prefixes (`sm:p-5`). Directional insets (`pl-5`/`pr-5`) and
-// half-steps are intentionally OUT of scope (see the header).
-const SHELL_STEP5_RE =
-  /(?:^|\s)(?:[^\s"']*:)*((?:p|px|py|space-y|gap)-5)(?=\s|$)/;
+// An off-scale spacing step on a shell — the banned `5` / `7` integer steps
+// and any half-step other than `1.5` (`2.5`, `3.5`, …), across the full
+// spacing prefix family (padding, margin, gap, space), with optional modifier
+// prefixes (`sm:p-5`). A leading `-` (negative margin) is never matched
+// because the prefix has to sit at a `(?:^|\s)` / modifier boundary. Height
+// (`h-`) is a dimension, not a scale step, and is intentionally OUT of scope.
+const SPACING_PREFIX =
+  "space-x|space-y|gap-x|gap-y|gap|px|py|pt|pb|pl|pr|p|mx|my|mt|mb|ml|mr|m";
+// `5` or `7`; or a half-step whose integer part is anything but `1`
+// (`0.5`, `2.5`…`9.5`, `10.5`+), so the sanctioned `1.5` is left alone.
+const OFF_SCALE_STEP = "5|7|(?:[02-9]|\\d\\d+)\\.5";
+const SHELL_OFFSCALE_RE = new RegExp(
+  `(?:^|\\s)(?:[^\\s"']*:)*((?:${SPACING_PREFIX})-(?:${OFF_SCALE_STEP}))(?=\\s|$)`,
+);
 
 function toPosix(filename) {
   return filename.replace(/\\/g, "/");
@@ -148,14 +165,14 @@ const spacingScaleRule = {
     type: "problem",
     docs: {
       description:
-        "Spacing-scale discipline — no pt-*/pb-* overrides on gap-based Card slots, and no off-scale `5` step on a bg-card+border shell.",
+        "Spacing-scale discipline — no pt-*/pb-* overrides on gap-based Card slots, and no off-scale spacing step (`5`/`7`/half-steps) on a bg-card+border shell.",
     },
     schema: [],
     messages: {
       slotPadding:
         '"{{match}}" on <{{element}}> fights the gap-based Card contract — the header→body distance comes from the parent flex gap, so slot padding stacks on top of it (or is a no-op). Tune density on the Card itself instead: <Card className="gap-2 py-3 md:py-4">.',
-      cardShellStep5:
-        'Off-scale "{{match}}" (20 px) on a bg-card+border shell — the `5` step is banned (UI-STANDARDS §2) and reads denser than every sibling <Card> (p-4 md:p-6). Sweep the shell to `p-4 md:p-6` (or `p-3` for a dense inner tile); new surfaces should compose <Card>.',
+      cardShellOffScale:
+        'Off-scale "{{match}}" on a bg-card+border shell — the scale is 1/1.5/2/3/4/6/8/10, so the `5`/`7` steps and half-steps other than 1.5 are banned (UI-STANDARDS §2) and read off next to every sibling <Card> (p-4 md:p-6). Sweep the shell to an on-scale step (`p-4 md:p-6`, or `p-3` for a dense inner tile); new surfaces should compose <Card>.',
     },
   },
   create(context) {
@@ -197,11 +214,11 @@ const spacingScaleRule = {
         // seen together even when split across cn() args, then report once.
         const joined = strings.map((s) => s.text).join(" ");
         if (SHELL_BG_RE.test(joined) && SHELL_BORDER_RE.test(joined)) {
-          const m = SHELL_STEP5_RE.exec(joined);
+          const m = SHELL_OFFSCALE_RE.exec(joined);
           if (m) {
             context.report({
               node: classNameAttr,
-              messageId: "cardShellStep5",
+              messageId: "cardShellOffScale",
               data: { match: m[1] },
             });
           }

From 7bb4fe3310cba240f9fe46bab9914d8f8aee949c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marc-Andr=C3=A9=20Bombeck?= <mbombeck@gmail.com>
Date: Sun, 9 Aug 2026 11:38:17 +0200
Subject: [PATCH 5/6] refactor(settings): modernize the managed-record controls
 onto the primitives
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The delegated-caregiver settings forms were the last hand-rolled control
block: native <input>/<select> with a copied border literal, a native
type=date for the birth date (the browser-locale trap closed for the
owner surface in v1.25.4), module checkboxes where the owner section
shows switches, and a save button mid-form with the error line dropped
below it.

Route them through Input, NativeSelect, DateField, and Switch, and give
every form a shared footer that places the error line above the action
row and the action row last (§12). The Switch rows keep a hidden mirror
input so the FormData submit contract is unchanged. Extend the section
tests to hold the DateField primitive and the action-last order in place.
---
 .../managed-record-settings-section.test.tsx  |  49 +++
 .../managed-record-settings-section.tsx       | 396 ++++++++++--------
 2 files changed, 274 insertions(+), 171 deletions(-)

diff --git a/src/components/settings/__tests__/managed-record-settings-section.test.tsx b/src/components/settings/__tests__/managed-record-settings-section.test.tsx
index 21d85d4b4..d40aaa14f 100644
--- a/src/components/settings/__tests__/managed-record-settings-section.test.tsx
+++ b/src/components/settings/__tests__/managed-record-settings-section.test.tsx
@@ -13,6 +13,7 @@ const render = (
   family: Parameters<typeof ManagedRecordSettingsForm>[0]["family"],
   settings: Record<string, unknown>,
   locale: (typeof LOCALES)[number] = "en",
+  error?: string,
 ) =>
   renderToStaticMarkup(
     <I18nProvider initialLocale={locale}>
@@ -22,6 +23,7 @@ const render = (
         onSave={vi.fn()}
         saveLabel="Save"
         settings={settings}
+        error={error}
       />
     </I18nProvider>,
   );
@@ -72,6 +74,53 @@ describe("managed record settings forms", () => {
     },
   );
 
+  it("gives the profile date of birth a DateField, never a native date input", () => {
+    const html = render("profile", { timezone: "Europe/Berlin" });
+    // The DateField primitive marks itself; the browser-locale native
+    // `type="date"` trap (v1.25.4) must be gone.
+    expect(html).toContain('data-slot="date-field"');
+    expect(html).not.toContain('type="date"');
+    // Its hidden mirror still carries the submit name.
+    expect(html).toContain('name="dateOfBirth"');
+  });
+
+  it.each([
+    "profile",
+    "modules",
+    "notifications",
+    "thresholds",
+    "coach",
+  ] as const)(
+    "orders the %s action row last, with the error above it (§12)",
+    (family) => {
+      const settingsByFamily: Record<string, Record<string, unknown>> = {
+        profile: { timezone: "Europe/Berlin" },
+        modules: { modulePreferences: {} },
+        notifications: {},
+        thresholds: { overrides: {}, effective: {} },
+        coach: {},
+      };
+      const html = render(family, settingsByFamily[family], "en", "Boom");
+      const actionAt = html.indexOf('data-slot="settings-card-actions"');
+      const alertAt = html.indexOf('role="alert"');
+      // The action row exists and is a real SettingsCardActions.
+      expect(actionAt).toBeGreaterThan(-1);
+      // The error line renders, and it sits ABOVE the action row.
+      expect(alertAt).toBeGreaterThan(-1);
+      expect(alertAt).toBeLessThan(actionAt);
+      // Nothing renders after the action row inside the form.
+      expect(html.indexOf("</form>")).toBeGreaterThan(actionAt);
+    },
+  );
+
+  it("toggles the managed modules with a Switch, matching the owner section", () => {
+    const html = render("modules", { modulePreferences: { mood: true } });
+    // The Switch primitive (role="switch") replaces the bare checkbox the
+    // owner module section never used; the hidden mirror keeps the submit name.
+    expect(html).toContain('role="switch"');
+    expect(html).toContain('name="mood"');
+  });
+
   it("renders every direct module and threshold metric for a fresh record", () => {
     const modules = render("modules", { modulePreferences: {} });
     const thresholds = render("thresholds", {
diff --git a/src/components/settings/managed-record-settings-section.tsx b/src/components/settings/managed-record-settings-section.tsx
index b72d0708d..be5bcdfa4 100644
--- a/src/components/settings/managed-record-settings-section.tsx
+++ b/src/components/settings/managed-record-settings-section.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useState, type FormEvent } from "react";
+import { useState, type FormEvent, type ReactNode } from "react";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { Settings } from "lucide-react";
 
@@ -26,7 +26,13 @@ import {
 import { ALL_METRICS } from "@/lib/validations/thresholds";
 import { SUB_PAGE_TABS } from "@/components/insights/insights-tab-strip";
 import { Button } from "@/components/ui/button";
+import { DateField } from "@/components/ui/date-field";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { NativeSelect } from "@/components/ui/native-select";
 import { QueryErrorCard } from "@/components/ui/query-error-card";
+import { Switch } from "@/components/ui/switch";
+import { SettingsCardActions } from "./_card-actions";
 import { SettingsCardHeader } from "./_card-header";
 import { SettingsCard } from "./settings-card";
 
@@ -45,6 +51,8 @@ type SettingsFormProps = {
   disabled: boolean;
   onSave: (patch: unknown) => void;
   saveLabel: string;
+  /** Save/validation error, rendered ABOVE the action row per §12. */
+  error?: ReactNode;
 };
 
 const COACH_EXCLUDE_METRICS = [
@@ -222,11 +230,76 @@ function insightItemLabel(
     : t("settings.sharedRecord.managedSettings.insights.unknownItem");
 }
 
-function SaveButton({ disabled, label }: { disabled: boolean; label: string }) {
+/**
+ * The form footer, §12: the error line sits ABOVE the action row, and the
+ * action row (`SettingsCardActions`) is the last thing in the form. `span`
+ * lets a grid form put the footer in a full-width cell.
+ */
+function FormFooter({
+  disabled,
+  label,
+  error,
+  span,
+}: {
+  disabled: boolean;
+  label: string;
+  error?: ReactNode;
+  span?: string;
+}) {
   return (
-    <Button disabled={disabled} type="submit">
-      {label}
-    </Button>
+    <div className={span ? `${span} space-y-3` : "space-y-3"}>
+      {error ? (
+        <p className="text-destructive text-sm" role="alert">
+          {error}
+        </p>
+      ) : null}
+      <SettingsCardActions>
+        <Button disabled={disabled} type="submit">
+          {label}
+        </Button>
+      </SettingsCardActions>
+    </div>
+  );
+}
+
+/**
+ * A managed-settings toggle row — a `<Switch>` (the same primitive the owner
+ * module section uses) paired with a hidden mirror input so the FormData
+ * submit still reads `name === "on"`. Uncontrolled at the DOM level, controlled
+ * in React so the switch and its mirror stay in lockstep.
+ */
+function ManagedSwitchRow({
+  name,
+  label,
+  defaultChecked,
+  disabled,
+  className,
+}: {
+  name: string;
+  label: string;
+  defaultChecked: boolean;
+  disabled: boolean;
+  className?: string;
+}) {
+  const id = `managed-switch-${name}`;
+  const [on, setOn] = useState(defaultChecked);
+  return (
+    <div
+      className={className ?? "flex items-center justify-between gap-3 text-sm"}
+    >
+      <Label htmlFor={id} className="font-normal">
+        {label}
+      </Label>
+      <Switch
+        id={id}
+        checked={on}
+        onCheckedChange={setOn}
+        disabled={disabled}
+        aria-label={label}
+        className="shrink-0"
+      />
+      <input name={name} type="hidden" value={on ? "on" : "off"} />
+    </div>
   );
 }
 
@@ -235,6 +308,7 @@ function ProfileSettingsForm({
   disabled,
   onSave,
   saveLabel,
+  error,
 }: SettingsFormProps) {
   const { t } = useTranslations();
   function submit(event: FormEvent<HTMLFormElement>) {
@@ -259,8 +333,7 @@ function ProfileSettingsForm({
     <form className="grid gap-4 sm:grid-cols-2" onSubmit={submit}>
       <label className="grid gap-1 text-sm" htmlFor="managed-display-name">
         {t("settings.sharedRecord.managedSettings.profile.displayName")}
-        <input
-          className="border-input bg-background rounded-md border px-3 py-2"
+        <Input
           defaultValue={asString(settings.displayName)}
           disabled={disabled}
           id="managed-display-name"
@@ -269,8 +342,7 @@ function ProfileSettingsForm({
       </label>
       <label className="grid gap-1 text-sm" htmlFor="managed-height">
         {t("settings.sharedRecord.managedSettings.profile.height")}
-        <input
-          className="border-input bg-background rounded-md border px-3 py-2"
+        <Input
           defaultValue={
             settings.heightCm === null ? "" : String(settings.heightCm ?? "")
           }
@@ -284,19 +356,20 @@ function ProfileSettingsForm({
       </label>
       <label className="grid gap-1 text-sm" htmlFor="managed-date-of-birth">
         {t("settings.sharedRecord.managedSettings.profile.dateOfBirth")}
-        <input
-          className="border-input bg-background rounded-md border px-3 py-2"
+        {/* v1.25.4 — the profile date must not depend on the browser's date
+            parsing; DateField displays in the user's order and submits ISO
+            through its hidden mirror. */}
+        <DateField
           defaultValue={asString(settings.dateOfBirth)}
           disabled={disabled}
           id="managed-date-of-birth"
           name="dateOfBirth"
-          type="date"
+          autoComplete="bday"
         />
       </label>
       <label className="grid gap-1 text-sm" htmlFor="managed-gender">
         {t("settings.sharedRecord.managedSettings.profile.gender")}
-        <select
-          className="border-input bg-background rounded-md border px-3 py-2"
+        <NativeSelect
           defaultValue={asString(settings.gender)}
           disabled={disabled}
           id="managed-gender"
@@ -314,12 +387,11 @@ function ProfileSettingsForm({
           <option value="OTHER">
             {t("settings.sharedRecord.managedSettings.profile.other")}
           </option>
-        </select>
+        </NativeSelect>
       </label>
       <label className="grid gap-1 text-sm" htmlFor="managed-locale">
         {t("settings.sharedRecord.managedSettings.profile.locale")}
-        <select
-          className="border-input bg-background rounded-md border px-3 py-2"
+        <NativeSelect
           defaultValue={asString(settings.locale)}
           disabled={disabled}
           id="managed-locale"
@@ -333,12 +405,11 @@ function ProfileSettingsForm({
               {locale}
             </option>
           ))}
-        </select>
+        </NativeSelect>
       </label>
       <label className="grid gap-1 text-sm" htmlFor="managed-timezone">
         {t("settings.sharedRecord.managedSettings.profile.timezone")}
-        <input
-          className="border-input bg-background rounded-md border px-3 py-2"
+        <Input
           defaultValue={asString(settings.timezone, "Europe/Berlin")}
           disabled={disabled}
           id="managed-timezone"
@@ -348,8 +419,7 @@ function ProfileSettingsForm({
       </label>
       <label className="grid gap-1 text-sm" htmlFor="managed-units">
         {t("settings.sharedRecord.managedSettings.profile.units")}
-        <select
-          className="border-input bg-background rounded-md border px-3 py-2"
+        <NativeSelect
           defaultValue={asString(settings.unitPreference, "metric")}
           disabled={disabled}
           id="managed-units"
@@ -361,12 +431,11 @@ function ProfileSettingsForm({
           <option value="imperial">
             {t("settings.sharedRecord.managedSettings.profile.imperial")}
           </option>
-        </select>
+        </NativeSelect>
       </label>
       <label className="grid gap-1 text-sm" htmlFor="managed-time-format">
         {t("settings.sharedRecord.managedSettings.profile.timeFormat")}
-        <select
-          className="border-input bg-background rounded-md border px-3 py-2"
+        <NativeSelect
           defaultValue={asString(settings.timeFormat, "AUTO")}
           disabled={disabled}
           id="managed-time-format"
@@ -381,12 +450,11 @@ function ProfileSettingsForm({
           <option value="H24">
             {t("settings.sharedRecord.managedSettings.profile.hour24")}
           </option>
-        </select>
+        </NativeSelect>
       </label>
       <label className="grid gap-1 text-sm" htmlFor="managed-date-format">
         {t("settings.sharedRecord.managedSettings.profile.dateFormat")}
-        <select
-          className="border-input bg-background rounded-md border px-3 py-2"
+        <NativeSelect
           defaultValue={asString(settings.dateFormat, "AUTO")}
           disabled={disabled}
           id="managed-date-format"
@@ -404,11 +472,14 @@ function ProfileSettingsForm({
           <option value="YMD">
             {t("settings.sharedRecord.managedSettings.profile.dateYmd")}
           </option>
-        </select>
+        </NativeSelect>
       </label>
-      <div className="sm:col-span-2">
-        <SaveButton disabled={disabled} label={saveLabel} />
-      </div>
+      <FormFooter
+        disabled={disabled}
+        label={saveLabel}
+        error={error}
+        span="sm:col-span-2"
+      />
     </form>
   );
 }
@@ -418,6 +489,7 @@ function ModulesSettingsForm({
   disabled,
   onSave,
   saveLabel,
+  error,
 }: SettingsFormProps) {
   const { t } = useTranslations();
   const preferences = asRecord(settings.modulePreferences);
@@ -439,21 +511,19 @@ function ModulesSettingsForm({
   return (
     <form className="space-y-3" onSubmit={submit}>
       {entries.map(([key, defaultEnabled]) => (
-        <label className="flex items-center gap-3 text-sm" key={key}>
-          <input
-            defaultChecked={
-              preferences[key] === undefined
-                ? defaultEnabled
-                : preferences[key] === true
-            }
-            disabled={disabled}
-            name={key}
-            type="checkbox"
-          />
-          {t(MODULE_REGISTRY[key].labelKey)}
-        </label>
+        <ManagedSwitchRow
+          key={key}
+          name={key}
+          label={t(MODULE_REGISTRY[key].labelKey)}
+          defaultChecked={
+            preferences[key] === undefined
+              ? defaultEnabled
+              : preferences[key] === true
+          }
+          disabled={disabled}
+        />
       ))}
-      <SaveButton disabled={disabled} label={saveLabel} />
+      <FormFooter disabled={disabled} label={saveLabel} error={error} />
     </form>
   );
 }
@@ -463,6 +533,7 @@ function NotificationsSettingsForm({
   disabled,
   onSave,
   saveLabel,
+  error,
 }: SettingsFormProps) {
   const { t } = useTranslations();
   const preferences = asRecord(settings.notificationPreferences);
@@ -489,19 +560,18 @@ function NotificationsSettingsForm({
 
   return (
     <form className="grid gap-4 sm:grid-cols-2" onSubmit={submit}>
-      <label className="flex items-center gap-3 text-sm sm:col-span-2">
-        <input
-          defaultChecked={settings.moodReminderEnabled === true}
-          disabled={disabled}
-          name="moodReminderEnabled"
-          type="checkbox"
-        />
-        {t("settings.sharedRecord.managedSettings.notifications.moodReminder")}
-      </label>
+      <ManagedSwitchRow
+        name="moodReminderEnabled"
+        label={t(
+          "settings.sharedRecord.managedSettings.notifications.moodReminder",
+        )}
+        defaultChecked={settings.moodReminderEnabled === true}
+        disabled={disabled}
+        className="flex items-center justify-between gap-3 text-sm sm:col-span-2"
+      />
       <label className="grid gap-1 text-sm" htmlFor="managed-reminder-hour">
         {t("settings.sharedRecord.managedSettings.notifications.reminderHour")}
-        <input
-          className="border-input bg-background rounded-md border px-3 py-2"
+        <Input
           defaultValue={asNumber(mood.reminderHour, 22)}
           disabled={disabled}
           id="managed-reminder-hour"
@@ -515,8 +585,7 @@ function NotificationsSettingsForm({
         {t(
           "settings.sharedRecord.managedSettings.notifications.lowStockRunwayDays",
         )}
-        <input
-          className="border-input bg-background rounded-md border px-3 py-2"
+        <Input
           defaultValue={
             medication.lowStockRunwayDays === null
               ? ""
@@ -534,8 +603,7 @@ function NotificationsSettingsForm({
         {t(
           "settings.sharedRecord.managedSettings.notifications.reorderLeadDays",
         )}
-        <input
-          className="border-input bg-background rounded-md border px-3 py-2"
+        <Input
           defaultValue={asNumber(medication.reorderLeadDays, 10)}
           disabled={disabled}
           id="managed-reorder-lead"
@@ -545,9 +613,12 @@ function NotificationsSettingsForm({
           type="number"
         />
       </label>
-      <div className="sm:col-span-2">
-        <SaveButton disabled={disabled} label={saveLabel} />
-      </div>
+      <FormFooter
+        disabled={disabled}
+        label={saveLabel}
+        error={error}
+        span="sm:col-span-2"
+      />
     </form>
   );
 }
@@ -557,6 +628,7 @@ function ThresholdsSettingsForm({
   disabled,
   onSave,
   saveLabel,
+  error,
 }: SettingsFormProps) {
   const { t } = useTranslations();
   const overrides = asRecord(settings.overrides);
@@ -591,8 +663,7 @@ function ThresholdsSettingsForm({
     <form className="grid gap-4 sm:grid-cols-3" onSubmit={submit}>
       <label className="grid gap-1 text-sm" htmlFor="managed-threshold-metric">
         {t("settings.sharedRecord.managedSettings.thresholds.metric")}
-        <select
-          className="border-input bg-background rounded-md border px-3 py-2"
+        <NativeSelect
           onChange={(event) => setMetric(event.target.value as ThresholdMetric)}
           value={metric}
           disabled={disabled}
@@ -604,12 +675,11 @@ function ThresholdsSettingsForm({
               {t(METRIC_LABEL_KEYS[entry])}
             </option>
           ))}
-        </select>
+        </NativeSelect>
       </label>
       <label className="grid gap-1 text-sm" htmlFor="managed-threshold-minimum">
         {t("settings.sharedRecord.managedSettings.thresholds.minimum")}
-        <input
-          className="border-input bg-background rounded-md border px-3 py-2"
+        <Input
           defaultValue={minimum}
           disabled={disabled}
           id="managed-threshold-minimum"
@@ -621,8 +691,7 @@ function ThresholdsSettingsForm({
       </label>
       <label className="grid gap-1 text-sm" htmlFor="managed-threshold-maximum">
         {t("settings.sharedRecord.managedSettings.thresholds.maximum")}
-        <input
-          className="border-input bg-background rounded-md border px-3 py-2"
+        <Input
           defaultValue={maximum}
           disabled={disabled}
           id="managed-threshold-maximum"
@@ -632,9 +701,12 @@ function ThresholdsSettingsForm({
           type="number"
         />
       </label>
-      <div className="sm:col-span-3">
-        <SaveButton disabled={disabled} label={saveLabel} />
-      </div>
+      <FormFooter
+        disabled={disabled}
+        label={saveLabel}
+        error={error}
+        span="sm:col-span-3"
+      />
     </form>
   );
 }
@@ -644,6 +716,7 @@ function CoachSettingsForm({
   disabled,
   onSave,
   saveLabel,
+  error,
 }: SettingsFormProps) {
   const { t } = useTranslations();
   const preferences = asRecord(settings.preferences);
@@ -676,20 +749,16 @@ function CoachSettingsForm({
 
   return (
     <form className="space-y-4" onSubmit={submit}>
-      <label className="flex items-center gap-3 text-sm">
-        <input
-          defaultChecked={settings.disableCoach === true}
-          disabled={disabled}
-          name="disableCoach"
-          type="checkbox"
-        />
-        {t("settings.sharedRecord.managedSettings.coach.disable")}
-      </label>
+      <ManagedSwitchRow
+        name="disableCoach"
+        label={t("settings.sharedRecord.managedSettings.coach.disable")}
+        defaultChecked={settings.disableCoach === true}
+        disabled={disabled}
+      />
       <div className="grid gap-4 sm:grid-cols-3">
         <label className="grid gap-1 text-sm" htmlFor="managed-coach-tone">
           {t("settings.sharedRecord.managedSettings.coach.tone")}
-          <select
-            className="border-input bg-background rounded-md border px-3 py-2"
+          <NativeSelect
             defaultValue={asString(preferences.tone, "warm")}
             disabled={disabled}
             id="managed-coach-tone"
@@ -704,12 +773,11 @@ function CoachSettingsForm({
             <option value="concise">
               {t("settings.sharedRecord.managedSettings.coach.concise")}
             </option>
-          </select>
+          </NativeSelect>
         </label>
         <label className="grid gap-1 text-sm" htmlFor="managed-coach-verbosity">
           {t("settings.sharedRecord.managedSettings.coach.verbosity")}
-          <select
-            className="border-input bg-background rounded-md border px-3 py-2"
+          <NativeSelect
             defaultValue={asString(preferences.verbosity, "default")}
             disabled={disabled}
             id="managed-coach-verbosity"
@@ -724,12 +792,11 @@ function CoachSettingsForm({
             <option value="detailed">
               {t("settings.sharedRecord.managedSettings.coach.detailed")}
             </option>
-          </select>
+          </NativeSelect>
         </label>
         <label className="grid gap-1 text-sm" htmlFor="managed-coach-window">
           {t("settings.sharedRecord.managedSettings.coach.defaultWindow")}
-          <select
-            className="border-input bg-background rounded-md border px-3 py-2"
+          <NativeSelect
             defaultValue={asString(preferences.defaultWindow, "allTime")}
             disabled={disabled}
             id="managed-coach-window"
@@ -747,66 +814,56 @@ function CoachSettingsForm({
             <option value="allTime">
               {t("settings.sharedRecord.managedSettings.coach.allTime")}
             </option>
-          </select>
+          </NativeSelect>
         </label>
       </div>
-      <label className="flex items-center gap-3 text-sm">
-        <input
-          defaultChecked={preferences.showEvidenceByDefault === true}
-          disabled={disabled}
-          name="showEvidenceByDefault"
-          type="checkbox"
-        />
-        {t("settings.sharedRecord.managedSettings.coach.showEvidence")}
-      </label>
+      <ManagedSwitchRow
+        name="showEvidenceByDefault"
+        label={t("settings.sharedRecord.managedSettings.coach.showEvidence")}
+        defaultChecked={preferences.showEvidenceByDefault === true}
+        disabled={disabled}
+      />
       <fieldset className="space-y-2">
         <legend className="text-sm font-medium">
           {t("settings.sharedRecord.managedSettings.coach.excludedMetrics")}
         </legend>
-        {COACH_EXCLUDE_METRICS.map((metric) => (
-          <label
-            className="mr-4 inline-flex items-center gap-2 text-sm"
-            key={metric}
-          >
-            <input
+        <div className="grid gap-2 sm:grid-cols-2">
+          {COACH_EXCLUDE_METRICS.map((metric) => (
+            <ManagedSwitchRow
+              key={metric}
+              name={`exclude-${metric}`}
+              label={coachMetricLabel(t, metric)}
               defaultChecked={excluded.has(metric)}
               disabled={disabled}
-              name={`exclude-${metric}`}
-              type="checkbox"
             />
-            {coachMetricLabel(t, metric)}
-          </label>
-        ))}
+          ))}
+        </div>
       </fieldset>
       <fieldset className="space-y-2">
         <legend className="text-sm font-medium">
           {t("settings.sharedRecord.managedSettings.coach.dataClusters")}
         </legend>
-        <label className="mb-2 flex items-center gap-2 text-sm">
-          <input
-            defaultChecked={Array.isArray(preferences.dataClusters)}
-            disabled={disabled}
-            name="useCustomClusters"
-            type="checkbox"
-          />
-          {t("settings.sharedRecord.managedSettings.coach.customClusters")}
-        </label>
-        {COACH_DATA_CLUSTERS.map((cluster) => (
-          <label
-            className="mr-4 inline-flex items-center gap-2 text-sm"
-            key={cluster}
-          >
-            <input
+        <ManagedSwitchRow
+          name="useCustomClusters"
+          label={t(
+            "settings.sharedRecord.managedSettings.coach.customClusters",
+          )}
+          defaultChecked={Array.isArray(preferences.dataClusters)}
+          disabled={disabled}
+        />
+        <div className="grid gap-2 sm:grid-cols-2">
+          {COACH_DATA_CLUSTERS.map((cluster) => (
+            <ManagedSwitchRow
+              key={cluster}
+              name={`cluster-${cluster}`}
+              label={coachClusterLabel(t, cluster)}
               defaultChecked={dataClusters.has(cluster)}
               disabled={disabled}
-              name={`cluster-${cluster}`}
-              type="checkbox"
             />
-            {coachClusterLabel(t, cluster)}
-          </label>
-        ))}
+          ))}
+        </div>
       </fieldset>
-      <SaveButton disabled={disabled} label={saveLabel} />
+      <FormFooter disabled={disabled} label={saveLabel} error={error} />
     </form>
   );
 }
@@ -835,6 +892,7 @@ function InsightsSettingsForm({
   disabled,
   onSave,
   saveLabel,
+  error,
 }: SettingsFormProps) {
   const { t } = useTranslations();
   const layout = asRecord(settings.layout);
@@ -867,22 +925,20 @@ function InsightsSettingsForm({
       </legend>
       {items.map((item) => (
         <div className="flex items-center gap-3 text-sm" key={item.id}>
-          <label className="flex flex-1 items-center gap-2">
-            <input
-              defaultChecked={item.visible}
-              disabled={disabled}
-              name={`${kind}-visible-${item.id}`}
-              type="checkbox"
-            />
-            {insightItemLabel(t, kind, item.id)}
-          </label>
+          <ManagedSwitchRow
+            className="flex flex-1 items-center justify-between gap-2 text-sm"
+            name={`${kind}-visible-${item.id}`}
+            label={insightItemLabel(t, kind, item.id)}
+            defaultChecked={item.visible}
+            disabled={disabled}
+          />
           <label
             className="flex items-center gap-2"
             htmlFor={`${kind}-order-${item.id}`}
           >
             {t("settings.sharedRecord.managedSettings.insights.order")}
-            <input
-              className="border-input bg-background w-16 rounded-md border px-2 py-1"
+            <Input
+              className="w-16"
               defaultValue={item.order}
               disabled={disabled}
               id={`${kind}-order-${item.id}`}
@@ -900,7 +956,7 @@ function InsightsSettingsForm({
     <form className="space-y-4" onSubmit={submit}>
       {renderItems("section", sections)}
       {renderItems("tile", tiles)}
-      <SaveButton disabled={disabled} label={saveLabel} />
+      <FormFooter disabled={disabled} label={saveLabel} error={error} />
     </form>
   );
 }
@@ -994,32 +1050,30 @@ export function ManagedRecordSettingsSection({
         title={t(`settings.sharedRecord.managedSettings.${family}.title`)}
       />
       {query.data ? (
-        <>
-          <ManagedRecordSettingsForm
-            disabled={save.isPending}
-            family={family}
-            onSave={(patch) => {
-              const parsed = safeParseManagedRecordSettingsPatch(family, patch);
-              if (!parsed.success) {
-                setValidationFailed(true);
-                return;
-              }
-              setValidationFailed(false);
-              save.mutate(parsed.data);
-            }}
-            saveLabel={t("common.save")}
-            settings={query.data.settings}
-          />
-          {validationFailed ? (
-            <p className="text-destructive text-sm" role="alert">
-              {t("settings.sharedRecord.managedSettings.validationError")}
-            </p>
-          ) : save.isError ? (
-            <p className="text-destructive text-sm" role="alert">
-              {t("settings.sharedRecord.managedSettings.saveError")}
-            </p>
-          ) : null}
-        </>
+        <ManagedRecordSettingsForm
+          disabled={save.isPending}
+          family={family}
+          // §12 — the form renders this ABOVE its action row; nothing follows
+          // the action.
+          error={
+            validationFailed
+              ? t("settings.sharedRecord.managedSettings.validationError")
+              : save.isError
+                ? t("settings.sharedRecord.managedSettings.saveError")
+                : undefined
+          }
+          onSave={(patch) => {
+            const parsed = safeParseManagedRecordSettingsPatch(family, patch);
+            if (!parsed.success) {
+              setValidationFailed(true);
+              return;
+            }
+            setValidationFailed(false);
+            save.mutate(parsed.data);
+          }}
+          saveLabel={t("common.save")}
+          settings={query.data.settings}
+        />
       ) : null}
     </SettingsCard>
   );

From ca50b920258a6debc205e8db883c5721beb95086 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marc-Andr=C3=A9=20Bombeck?= <mbombeck@gmail.com>
Date: Sun, 9 Aug 2026 11:38:59 +0200
Subject: [PATCH 6/6] docs(changelog): note the managed-record controls and
 spacing sweep under Unreleased

---
 CHANGELOG.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0cbae4fd3..1e1cc9423 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,8 @@
 ### Changed
 
 - Copy across several screens reads tighter. The insight-page metric explainers now open on a one-line definition rather than a paragraph of general guidance, with the longer background staying behind the knowledge disclosure where it already lived; the measurements subtitle and the daily-briefing setup prompt each drop a redundant sentence, and the mood self-rating card takes a short title so it stops wrapping and stops reusing a word from the assessment beside it. Wording that had drifted between neighbouring screens is settled too, so the measurement delete prompts, the practitioner label on the visit and vaccination forms, and the visit-saved toasts all match the screens they ship with.
+- The settings for a managed profile now use the same controls as the rest of the app. The forms for a delegated profile carry the shared date picker, dropdowns, text fields and switches instead of a plainer set of their own, so the birth date reads and saves in your own date order rather than depending on the browser, and each form keeps its save button at the end with any error shown just above it.
+- Spacing and tap targets read more evenly across settings, the dashboard and the charts. A handful of off-scale gaps are back on the spacing scale, the document upload buttons meet the mobile tap size their neighbours already set, the revoke on a share link is a right-aligned row action rather than a full-width red bar on every row, and a few empty and loading states now use the shared components so they match their siblings.
 
 ## [1.37.4] — 2026-08-09