From 04765ea8ac52e4c44bc2bb5b58714d6cbec9d34f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marc-Andr=C3=A9=20Bombeck?= <marc@bombeck.io>
Date: Wed, 10 Jun 2026 16:54:15 +0200
Subject: [PATCH] style: one spacing, title and skeleton language across the
 app
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Icons inside buttons drop their manual margins in favour of the
button's built-in gap (two hundred call sites), form field stacks settle
on one spacing step, card titles on exactly two sizes, inline field
errors on one text size, and a dozen hand-rolled loading pulses move
onto the shared skeleton primitive while keeping their silhouettes. The
intake dialog wording joins the rest of the app on 'übersprungen', and
the UI guidelines now document the two deliberate footer and
touch-target systems.
---
 docs/ui-guidelines.md                         |  22 +-
 messages/de.json                              |   2 +-
 src/app/auth/login/page.tsx                   |  10 +-
 src/app/auth/register/page.tsx                |   4 +-
 src/app/bugreport/page.tsx                    |   4 +-
 src/app/insights/loading.tsx                  |  19 +-
 src/app/insights/scores/[metric]/page.tsx     |   2 +-
 src/app/insights/values/[type]/page.tsx       |   6 +-
 src/app/insights/workouts/[id]/page.tsx       |   2 +-
 src/app/loading.tsx                           |   7 +-
 src/app/measurements/page.tsx                 |   6 +-
 src/app/medications/[id]/page.tsx             |   2 +-
 src/app/medications/page.tsx                  |   4 +-
 src/app/mood/page.tsx                         |   2 +-
 src/app/notifications/page.tsx                |  16 +-
 src/app/page.tsx                              |  34 +-
 src/components/admin/backups-section.tsx      |  20 +-
 src/components/admin/bug-report-section.tsx   |   2 +-
 src/components/admin/danger-zone-section.tsx  |   4 +-
 .../admin/feedback-inbox-section.tsx          |  12 +-
 src/components/admin/glitchtip-section.tsx    |   4 +-
 src/components/admin/host-metrics-chart.tsx   |   3 +-
 .../admin/login-overview-section.tsx          |   2 +-
 src/components/admin/reminders-section.tsx    |  16 +-
 .../admin/system-status-section.tsx           |   7 +-
 src/components/admin/umami-section.tsx        |   4 +-
 .../admin/user-management-section.tsx         |   6 +-
 .../admin/web-push-vapid-section.tsx          |   2 +-
 src/components/cycle/cycle-settings.tsx       |   2 +-
 src/components/cycle/log-day-sheet.tsx        |  16 +-
 .../medication-intake-quick-add.test.tsx      |  18 +-
 .../dashboard/medication-intake-quick-add.tsx |   7 +-
 .../data-list/selection-action-bar.tsx        |   4 +-
 .../doctor-report/doctor-report-dialog.tsx    |   7 +-
 src/components/error-details.tsx              |   8 +-
 .../gamification/recent-achievements-card.tsx |   7 +-
 .../correlation-card-skeleton.test.ts         |  10 +-
 src/components/insights/correlation-card.tsx  |   3 +-
 src/components/insights/daily-briefing.tsx    |  11 +-
 .../insights/insight-status-card.tsx          |  19 +-
 .../insights/insights-edit-mode.tsx           |  31 +-
 .../insights/mood/mood-correlation-cards.tsx  |   3 +-
 src/components/insights/sleep-hypnogram.tsx   |  25 +-
 src/components/insights/sleep-overview.tsx    |   7 +-
 .../insights/sleep-stage-stacked-bar.tsx      |  10 +-
 src/components/insights/sub-page-shell.tsx    |   2 +-
 src/components/insights/trend-annotation.tsx  |  14 +-
 src/components/layout/top-bar.tsx             |   5 +-
 .../measurements/measurement-form.tsx         |  14 +-
 .../measurements/measurement-list.tsx         | 375 +++++-----
 .../ResearchModeAcknowledgmentDialog.tsx      | 196 +++---
 .../medications/SideEffectsSection.tsx        |   4 +-
 .../card-parts/medication-intake-actions.tsx  |   8 +-
 .../detail/MedicationDetailTabs.tsx           |  17 +-
 .../medications/dose-history-add-dialog.tsx   |  16 +-
 .../medications/intake-edit-dialog.tsx        |   4 +-
 .../medications/intake-import-dialog.tsx      |   6 +-
 .../medications/log-injection-site-dialog.tsx |   2 +-
 .../medications/log-intake-dialog.tsx         |   8 +-
 .../scheduling/CourseWindowRow.tsx            |  10 +-
 .../scheduling/DoseWindowEditor.tsx           |  11 +-
 .../scheduling/TimesOfDayChips.tsx            |   2 +-
 .../sections/data-portability-row.tsx         |   2 +-
 .../sections/phase-config-sheet.tsx           |   2 +-
 .../wizard/MedicationWizardDialog.tsx         |  52 +-
 .../medications/wizard/steps/Step1Name.tsx    |   2 +-
 .../medications/wizard/steps/Step3Dose.tsx    |  12 +-
 src/components/mood/mood-form.tsx             | 272 ++++---
 src/components/mood/mood-list.tsx             | 666 +++++++++---------
 src/components/settings/about-me-section.tsx  |  17 +-
 src/components/settings/about-section.tsx     |  16 +-
 src/components/settings/account-section.tsx   |  24 +-
 src/components/settings/advanced-section.tsx  |  12 +-
 src/components/settings/ai-section.tsx        |  40 +-
 src/components/settings/api-section.tsx       |   4 +-
 .../settings/coach-memory-section.tsx         |   2 +-
 .../settings/dashboard-layout-section.tsx     |   6 +-
 src/components/settings/export-section.tsx    |  24 +-
 .../settings/health-record-export-panel.tsx   | 241 ++++---
 src/components/settings/import-panel.tsx      |  50 +-
 .../settings/insights-pill-order-section.tsx  |  21 +-
 .../settings/integrations-section.tsx         | 105 +--
 .../settings/notification-status-card.tsx     |  19 +-
 src/components/settings/ntfy-card.tsx         |   2 +-
 src/components/settings/sources-section.tsx   |   6 +-
 src/components/settings/telegram-card.tsx     |   8 +-
 .../settings/test-connection-button.tsx       |   6 +-
 .../settings/thresholds-editor-section.tsx    |   2 +-
 src/components/settings/web-push-card.tsx     |   6 +-
 src/components/targets/target-edit-sheet.tsx  | 134 ++--
 src/components/ui/button.tsx                  |   4 +-
 src/components/ui/responsive-sheet.tsx        |  15 +-
 92 files changed, 1433 insertions(+), 1445 deletions(-)

diff --git a/docs/ui-guidelines.md b/docs/ui-guidelines.md
index 224a8c21d..1afa09ad3 100644
--- a/docs/ui-guidelines.md
+++ b/docs/ui-guidelines.md
@@ -48,7 +48,7 @@ Tailwind's default 4-pixel scale. Reach for these stops first:
 | ------------------------------------ | ------------- | ------ |
 | Inline gap between icon and label    | `gap-1`       | 4      |
 | Tight stack inside a card            | `gap-2`       | 8      |
-| Default form-field stack             | `space-y-3`   | 12     |
+| Label-to-field stack (form fields)   | `space-y-2`   | 8      |
 | Section block (heading + body)       | `space-y-4`   | 16     |
 | Page section separator               | `space-y-6`   | 24     |
 | Dashboard tile-row gap, hero spacing | `gap-4`       | 16     |
@@ -65,13 +65,18 @@ these classes first:
 | Use                                | Class                                   |
 | ---------------------------------- | --------------------------------------- |
 | Page title (h1)                    | `text-2xl font-semibold tracking-tight` |
-| Section heading (h2)               | `text-lg font-semibold`                 |
-| Card title                         | `text-base font-medium`                 |
+| Section heading / section card     | `text-lg font-semibold`                 |
+| Tile / inner card title            | `text-base font-semibold`               |
 | Body text                          | `text-sm`                               |
 | Muted helper / metadata            | `text-sm text-muted-foreground`         |
 | Microcopy / footer                 | `text-xs text-muted-foreground`         |
 | Tabular data (latency, large nums) | `font-mono tabular-nums`                |
 
+Card titles come in exactly two sizes: `text-lg font-semibold` for a
+section-level card (one per page region) and `text-base font-semibold`
+for tiles and inner cards. Don't introduce a third level — a smaller
+heading is a sign the content wants a list row, not a card.
+
 Never use `font-bold` for emphasis — bump to `font-semibold` instead and
 let the design system breathe.
 
@@ -381,7 +386,16 @@ We aim for **WCAG 2.1 AA**, with the following non-negotiables:
 - Color contrast ≥ 4.5:1 for normal text, 3:1 for large text and UI
   components. Verified by `@axe-core/playwright` in CI on every page.
 - Touch targets ≥ 44×44 CSS px on bottom-nav and primary action buttons
-  (WCAG 2.5.5).
+  (WCAG 2.5.5). Two idioms implement the floor, and they are deliberate:
+  - **Form controls** (`Input`, `NativeSelect`, `SelectTrigger` default
+    size): `h-11 sm:h-10` is baked into the primitives — 44 px on
+    mobile, back to the 40 px desktop tier. Never re-add `min-h-11` on
+    top of these; it forces 44 px on desktop and breaks the row rhythm.
+  - **Buttons on dense touch surfaces** (medication detail, dashboard
+    quick actions): `min-h-11 sm:min-h-9` — 44 px mobile floor,
+    compact `sm` tier on desktop. Plain `min-h-11` without the `sm:`
+    reset is legacy spelling; don't introduce new ones, and align a
+    button to its direct neighbours when editing one.
 - Focus is always visible: shadcn's `focus-visible:ring` is preserved on
   every customized component.
 - Every interactive element has an accessible name. Icon-only buttons
diff --git a/messages/de.json b/messages/de.json
index 06d7c9a49..0703401ba 100644
--- a/messages/de.json
+++ b/messages/de.json
@@ -643,7 +643,7 @@
       "slotNone": "Kein bestimmter Slot",
       "takenAtLabel": "Datum und Uhrzeit",
       "takenAtHint": "Standard ist jetzt; wähle ein früheres Datum und eine frühere Uhrzeit, um eine vergangene Dosis zu erfassen.",
-      "skippedLabel": "Als ausgelassen erfassen",
+      "skippedLabel": "Als übersprungen erfassen",
       "noMedications": "Lege zuerst ein Medikament an, dann kannst du Einnahmen dafür erfassen.",
       "cancel": "Abbrechen",
       "submit": "Einnahme erfassen",
diff --git a/src/app/auth/login/page.tsx b/src/app/auth/login/page.tsx
index af8958252..99bf541ed 100644
--- a/src/app/auth/login/page.tsx
+++ b/src/app/auth/login/page.tsx
@@ -151,9 +151,9 @@ export default function LoginPage() {
             disabled={loading}
           >
             {loading && mode === "passkey" ? (
-              <Loader2 className="mr-2 h-4 w-4 animate-spin motion-reduce:animate-none" />
+              <Loader2 className="h-4 w-4 animate-spin motion-reduce:animate-none" />
             ) : (
-              <KeyRound className="mr-2 h-4 w-4" />
+              <KeyRound className="h-4 w-4" />
             )}
             {t("auth.loginWithPasskey")}
           </Button>
@@ -173,7 +173,7 @@ export default function LoginPage() {
               size="lg"
               onClick={() => setMode("password")}
             >
-              <Lock className="mr-2 h-4 w-4" />
+              <Lock className="h-4 w-4" />
               {t("auth.loginWithPassword")}
             </Button>
           ) : (
@@ -220,9 +220,9 @@ export default function LoginPage() {
                 disabled={loading}
               >
                 {loading && mode === "password" ? (
-                  <Loader2 className="mr-2 h-4 w-4 animate-spin motion-reduce:animate-none" />
+                  <Loader2 className="h-4 w-4 animate-spin motion-reduce:animate-none" />
                 ) : (
-                  <Lock className="mr-2 h-4 w-4" />
+                  <Lock className="h-4 w-4" />
                 )}
                 {t("auth.login")}
               </Button>
diff --git a/src/app/auth/register/page.tsx b/src/app/auth/register/page.tsx
index 26150ab1f..417d5f5d3 100644
--- a/src/app/auth/register/page.tsx
+++ b/src/app/auth/register/page.tsx
@@ -191,9 +191,9 @@ export default function RegisterPage() {
             disabled={loading}
           >
             {loading ? (
-              <Loader2 className="mr-2 h-4 w-4 animate-spin motion-reduce:animate-none" />
+              <Loader2 className="h-4 w-4 animate-spin motion-reduce:animate-none" />
             ) : (
-              <UserPlus className="mr-2 h-4 w-4" />
+              <UserPlus className="h-4 w-4" />
             )}
             {t("auth.register")}
           </Button>
diff --git a/src/app/bugreport/page.tsx b/src/app/bugreport/page.tsx
index e00dd5930..0273dea5f 100644
--- a/src/app/bugreport/page.tsx
+++ b/src/app/bugreport/page.tsx
@@ -243,9 +243,9 @@ export default function BugReportPage() {
                 `div.space-y-2 > Button > Loader-Circle`).
               */}
               {loading ? (
-                <Loader2 className="mr-2 h-4 w-4 animate-spin motion-reduce:animate-none" />
+                <Loader2 className="h-4 w-4 animate-spin motion-reduce:animate-none" />
               ) : (
-                <Bug className="mr-2 h-4 w-4" />
+                <Bug className="h-4 w-4" />
               )}
               {t("bugreport.submit")}
             </Button>
diff --git a/src/app/insights/loading.tsx b/src/app/insights/loading.tsx
index 5e2eabad1..1131ba611 100644
--- a/src/app/insights/loading.tsx
+++ b/src/app/insights/loading.tsx
@@ -8,29 +8,30 @@
  * by less than a row. Pure server component — no client hooks, no data
  * fetch; Next.js renders it instantly while the segment streams.
  */
+import { Skeleton } from "@/components/ui/skeleton";
 export default function InsightsLoading() {
   return (
     <div data-slot="insights-subpage-loading" className="space-y-6">
       <header className="space-y-2">
-        <div className="bg-muted h-7 w-48 animate-pulse rounded motion-reduce:animate-none" />
-        <div className="bg-muted/70 h-4 w-72 animate-pulse rounded motion-reduce:animate-none" />
+        <Skeleton className="bg-muted h-7 w-48 rounded" />
+        <Skeleton className="bg-muted/70 h-4 w-72 rounded" />
       </header>
 
       {/* Chart card */}
       <div className="bg-card rounded-xl border p-4">
-        <div className="bg-muted mb-4 h-4 w-32 animate-pulse rounded motion-reduce:animate-none" />
-        <div className="bg-muted/60 h-56 w-full animate-pulse rounded-lg motion-reduce:animate-none" />
+        <Skeleton className="bg-muted mb-4 h-4 w-32 rounded" />
+        <Skeleton className="h-56 w-full rounded-lg" />
       </div>
 
       {/* Assessment card */}
       <div className="bg-card space-y-2 rounded-xl border p-4">
         <div className="flex items-center gap-2">
-          <div className="bg-muted h-5 w-5 animate-pulse rounded motion-reduce:animate-none" />
-          <div className="bg-muted h-4 w-40 animate-pulse rounded motion-reduce:animate-none" />
+          <Skeleton className="bg-muted h-5 w-5 rounded" />
+          <Skeleton className="bg-muted h-4 w-40 rounded" />
         </div>
-        <div className="bg-muted h-3.5 w-full animate-pulse rounded motion-reduce:animate-none" />
-        <div className="bg-muted h-3.5 w-11/12 animate-pulse rounded motion-reduce:animate-none" />
-        <div className="bg-muted h-3.5 w-9/12 animate-pulse rounded motion-reduce:animate-none" />
+        <Skeleton className="bg-muted h-3.5 w-full rounded" />
+        <Skeleton className="bg-muted h-3.5 w-11/12 rounded" />
+        <Skeleton className="bg-muted h-3.5 w-9/12 rounded" />
       </div>
     </div>
   );
diff --git a/src/app/insights/scores/[metric]/page.tsx b/src/app/insights/scores/[metric]/page.tsx
index 0aa922bf4..3e3c82932 100644
--- a/src/app/insights/scores/[metric]/page.tsx
+++ b/src/app/insights/scores/[metric]/page.tsx
@@ -96,7 +96,7 @@ export default function CompositeScorePage() {
           className="-ml-2 w-fit"
         >
           <Link href="/insights">
-            <ArrowLeft className="mr-1 size-4" aria-hidden="true" />
+            <ArrowLeft className="size-4" aria-hidden="true" />
             {t("insights.subPage.scoresBack")}
           </Link>
         </Button>
diff --git a/src/app/insights/values/[type]/page.tsx b/src/app/insights/values/[type]/page.tsx
index 8586df1a4..ca7c75b6d 100644
--- a/src/app/insights/values/[type]/page.tsx
+++ b/src/app/insights/values/[type]/page.tsx
@@ -71,9 +71,11 @@ export default function InsightsMetricValuesPage({
           className="-ml-2 w-fit"
         >
           <Link href={backHref}>
-            <ArrowLeft className="mr-1 size-4" aria-hidden="true" />
+            <ArrowLeft className="size-4" aria-hidden="true" />
             {backToOrigin
-              ? t("insights.subPage.valuesBackToMetric", { metric: metricLabel })
+              ? t("insights.subPage.valuesBackToMetric", {
+                  metric: metricLabel,
+                })
               : t("insights.subPage.valuesBack")}
           </Link>
         </Button>
diff --git a/src/app/insights/workouts/[id]/page.tsx b/src/app/insights/workouts/[id]/page.tsx
index ec9dfe198..74a81adf6 100644
--- a/src/app/insights/workouts/[id]/page.tsx
+++ b/src/app/insights/workouts/[id]/page.tsx
@@ -49,7 +49,7 @@ export default function InsightsWorkoutDetailPage({
           className="-ml-2 w-fit"
         >
           <Link href="/insights/workouts">
-            <ArrowLeft className="mr-1 size-4" aria-hidden="true" />
+            <ArrowLeft className="size-4" aria-hidden="true" />
             {t("insights.workouts.detail.backToList")}
           </Link>
         </Button>
diff --git a/src/app/loading.tsx b/src/app/loading.tsx
index 108fc130b..231ee910c 100644
--- a/src/app/loading.tsx
+++ b/src/app/loading.tsx
@@ -7,15 +7,16 @@
  * component — no client hooks, no data fetch. More specific segments (e.g.
  * `/insights`) provide their own skeleton and take precedence.
  */
+import { Skeleton } from "@/components/ui/skeleton";
 export default function RootLoading() {
   return (
     <div data-slot="dashboard-loading" className="space-y-6 p-4">
-      <div className="bg-muted h-7 w-44 animate-pulse rounded motion-reduce:animate-none" />
+      <Skeleton className="bg-muted h-7 w-44 rounded" />
       <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
         {Array.from({ length: 6 }).map((_, i) => (
           <div key={i} className="bg-card rounded-xl border p-4">
-            <div className="bg-muted mb-3 h-4 w-24 animate-pulse rounded motion-reduce:animate-none" />
-            <div className="bg-muted/60 h-24 w-full animate-pulse rounded-lg motion-reduce:animate-none" />
+            <Skeleton className="bg-muted mb-3 h-4 w-24 rounded" />
+            <Skeleton className="h-24 w-full rounded-lg" />
           </div>
         ))}
       </div>
diff --git a/src/app/measurements/page.tsx b/src/app/measurements/page.tsx
index 5d801db5b..06c59ed3f 100644
--- a/src/app/measurements/page.tsx
+++ b/src/app/measurements/page.tsx
@@ -28,9 +28,7 @@ export default function MeasurementsPage() {
   // effect, so the open-on-param work is render-driven instead.
   const addParam = searchParams.get("add");
   const [dialogOpen, setDialogOpen] = useState(false);
-  const [defaultType, setDefaultType] = useState<string | undefined>(
-    undefined,
-  );
+  const [defaultType, setDefaultType] = useState<string | undefined>(undefined);
   const [consumedAddParam, setConsumedAddParam] = useState<string | null>(null);
   // v1.4.27 R4 RC2 — DOM handle the form portals its action row into so
   // the Sheet branch can sticky-pin Save / Cancel.
@@ -81,7 +79,7 @@ export default function MeasurementsPage() {
           </p>
         </div>
         <Button onClick={() => setDialogOpen(true)}>
-          <Plus className="mr-2 h-4 w-4" />
+          <Plus className="h-4 w-4" />
           {t("measurements.addMeasurement")}
         </Button>
       </div>
diff --git a/src/app/medications/[id]/page.tsx b/src/app/medications/[id]/page.tsx
index df600ff4c..9a90a1d8a 100644
--- a/src/app/medications/[id]/page.tsx
+++ b/src/app/medications/[id]/page.tsx
@@ -90,7 +90,7 @@ export default function MedicationDetailPage({
       <div className="space-y-6">
         <Button variant="ghost" size="sm" className="-ml-2 w-fit" asChild>
           <Link href="/medications">
-            <ArrowLeft className="mr-1 size-4" aria-hidden="true" />
+            <ArrowLeft className="size-4" aria-hidden="true" />
             {t("medications.back")}
           </Link>
         </Button>
diff --git a/src/app/medications/page.tsx b/src/app/medications/page.tsx
index bd4bd0fbf..53bbb9509 100644
--- a/src/app/medications/page.tsx
+++ b/src/app/medications/page.tsx
@@ -245,7 +245,7 @@ export default function MedicationsPage() {
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
             <Button className="min-h-11 sm:min-h-9">
-              <Plus className="mr-2 h-4 w-4" />
+              <Plus className="h-4 w-4" />
               {t("medications.addMedication")}
             </Button>
           </DropdownMenuTrigger>
@@ -305,7 +305,7 @@ export default function MedicationsPage() {
           description={t("medications.emptyDescription")}
           action={
             <Button size="sm" onClick={openCreate}>
-              <Plus className="mr-1 h-4 w-4" />
+              <Plus className="h-4 w-4" />
               {t("medications.firstMedication")}
             </Button>
           }
diff --git a/src/app/mood/page.tsx b/src/app/mood/page.tsx
index b1b5d7a3c..41890a8cc 100644
--- a/src/app/mood/page.tsx
+++ b/src/app/mood/page.tsx
@@ -49,7 +49,7 @@ export default function MoodPage() {
           </p>
         </div>
         <Button onClick={() => setDialogOpen(true)}>
-          <Plus className="mr-2 h-4 w-4" />
+          <Plus className="h-4 w-4" />
           {t("mood.addEntry")}
         </Button>
       </div>
diff --git a/src/app/notifications/page.tsx b/src/app/notifications/page.tsx
index 73e35020f..8262fae20 100644
--- a/src/app/notifications/page.tsx
+++ b/src/app/notifications/page.tsx
@@ -7,7 +7,13 @@ import { Switch } from "@/components/ui/switch";
 import { Label } from "@/components/ui/label";
 import { Button } from "@/components/ui/button";
 import Link from "next/link";
-import { Bell, ChevronRight, Loader2, Settings, AlertCircle } from "lucide-react";
+import {
+  Bell,
+  ChevronRight,
+  Loader2,
+  Settings,
+  AlertCircle,
+} from "lucide-react";
 import {
   EVENT_DEFAULT_ENABLED,
   type EventType,
@@ -43,11 +49,7 @@ interface PreferencesData {
  * unauthenticated, error, empty, populated) so the user always sees the
  * disambiguation, even when the body content is a fallback state.
  */
-function NotificationsBreadcrumb({
-  t,
-}: {
-  t: (key: string) => string;
-}) {
+function NotificationsBreadcrumb({ t }: { t: (key: string) => string }) {
   return (
     <nav aria-label="Breadcrumb" className="text-muted-foreground text-xs">
       <ol className="flex items-center gap-1">
@@ -231,7 +233,7 @@ export default function NotificationsPage() {
             </p>
             <Button asChild variant="outline">
               <Link href="/settings/notifications">
-                <Settings className="mr-2 h-4 w-4" />
+                <Settings className="h-4 w-4" />
                 {t("notifications.goToSettings")}
               </Link>
             </Button>
diff --git a/src/app/page.tsx b/src/app/page.tsx
index b9b3f0f55..0b9b81731 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -101,9 +101,9 @@ export function sheetBodyHasUnsavedInput(): boolean {
     '[data-slot="responsive-sheet-body"]',
   );
   if (!body) return false;
-  const fields = body.querySelectorAll<
-    HTMLInputElement | HTMLTextAreaElement
-  >("input, textarea");
+  const fields = body.querySelectorAll<HTMLInputElement | HTMLTextAreaElement>(
+    "input, textarea",
+  );
   for (const field of fields) {
     if (field.disabled || field.type === "hidden") continue;
     // Skip pickers the form prefills with "now" — an untouched default
@@ -124,9 +124,7 @@ export function sheetBodyHasUnsavedInput(): boolean {
   //
   // Mood radios start with nothing selected (`mood = ""`), so ANY
   // `aria-checked="true"` is a deliberate user choice — flag it.
-  if (
-    body.querySelector('[role="radio"][aria-checked="true"]') !== null
-  ) {
+  if (body.querySelector('[role="radio"][aria-checked="true"]') !== null) {
     return true;
   }
   // Radix Select trigger renders `role="combobox"`. A trigger with
@@ -135,9 +133,7 @@ export function sheetBodyHasUnsavedInput(): boolean {
   // We deliberately do NOT treat a merely non-placeholder value as dirty: the
   // type / medication selects mount with a non-placeholder DEFAULT, and
   // flagging that would over-trigger the confirm on a pristine sheet.
-  if (
-    body.querySelector('[role="combobox"][data-state="open"]') !== null
-  ) {
+  if (body.querySelector('[role="combobox"][data-state="open"]') !== null) {
     return true;
   }
   return false;
@@ -290,9 +286,7 @@ function getRangeHint(
   return (
     <>
       <p>
-        <span className="text-success font-bold">
-          {t("charts.colorGreen")}
-        </span>{" "}
+        <span className="text-success font-bold">{t("charts.colorGreen")}</span>{" "}
         {format(range.greenMin)}-{format(range.greenMax)} {unit}
       </p>
       <p>
@@ -572,9 +566,7 @@ export default function DashboardPage() {
    * undefined-safe and tiles with recent data paint byte-identical
    * with the pre-v1.4.34 contract.
    */
-  const tileStaleDays = (
-    type: string | null | undefined,
-  ): number | null => {
+  const tileStaleDays = (type: string | null | undefined): number | null => {
     if (!type) return null;
     const entry = data?.lastSeenByType?.[type];
     if (!entry) return null;
@@ -892,7 +884,7 @@ export default function DashboardPage() {
                 className="min-h-11 sm:min-h-9"
                 data-tour-id="dashboard-quick-add"
               >
-                <Plus className="mr-1 h-4 w-4" />
+                <Plus className="h-4 w-4" />
                 {t("common.add")}
               </Button>
             </DropdownMenuTrigger>
@@ -954,9 +946,7 @@ export default function DashboardPage() {
         open={quickEntryDialog === "measurement"}
         onOpenChange={handleQuickEntryOpenChange}
         title={t("measurements.addMeasurement")}
-        footer={
-          <div ref={setMeasurementFooterEl} className="flex w-full" />
-        }
+        footer={<div ref={setMeasurementFooterEl} className="flex w-full" />}
       >
         <MeasurementForm
           onSuccess={() => setQuickEntryDialog(null)}
@@ -1196,7 +1186,9 @@ export default function DashboardPage() {
                 icon={TrendingUp}
                 compareBaseline={compareBaseline}
                 compareDelta={tileCompareDelta(pulseTileSummary)}
-                staleDays={tileStaleDays(hasRestingHr ? "RESTING_HEART_RATE" : "PULSE")}
+                staleDays={tileStaleDays(
+                  hasRestingHr ? "RESTING_HEART_RATE" : "PULSE",
+                )}
               />
             ),
           });
@@ -1736,7 +1728,7 @@ export default function DashboardPage() {
                   size="sm"
                   onClick={() => setQuickEntryDialog("measurement")}
                 >
-                  <Plus className="mr-1 h-4 w-4" />
+                  <Plus className="h-4 w-4" />
                   {t("dashboard.emptyAddMeasurement")}
                 </Button>
               }
diff --git a/src/components/admin/backups-section.tsx b/src/components/admin/backups-section.tsx
index d60abcf4e..4e3f2364f 100644
--- a/src/components/admin/backups-section.tsx
+++ b/src/components/admin/backups-section.tsx
@@ -91,9 +91,9 @@ function RestoreRowDialog({
           className="min-h-11"
         >
           {pending ? (
-            <Loader2 className="mr-1 h-3.5 w-3.5 animate-spin motion-reduce:animate-none" />
+            <Loader2 className="h-3.5 w-3.5 animate-spin motion-reduce:animate-none" />
           ) : (
-            <History className="mr-1 h-3.5 w-3.5" />
+            <History className="h-3.5 w-3.5" />
           )}
           {t("admin.section.backups.restore")}
         </Button>
@@ -366,9 +366,9 @@ export function BackupsSection() {
           className="min-h-11"
         >
           {runBackup.isPending ? (
-            <Loader2 className="mr-1 h-3.5 w-3.5 animate-spin motion-reduce:animate-none" />
+            <Loader2 className="h-3.5 w-3.5 animate-spin motion-reduce:animate-none" />
           ) : (
-            <PlayCircle className="mr-1 h-3.5 w-3.5" />
+            <PlayCircle className="h-3.5 w-3.5" />
           )}
           {t("admin.section.backups.runNow")}
         </Button>
@@ -422,9 +422,9 @@ export function BackupsSection() {
             className="min-h-11"
           >
             {upload.isPending ? (
-              <Loader2 className="mr-1 h-3.5 w-3.5 animate-spin motion-reduce:animate-none" />
+              <Loader2 className="h-3.5 w-3.5 animate-spin motion-reduce:animate-none" />
             ) : (
-              <Upload className="mr-1 h-3.5 w-3.5" />
+              <Upload className="h-3.5 w-3.5" />
             )}
             {t("admin.section.backups.uploadButton")}
           </Button>
@@ -463,9 +463,9 @@ export function BackupsSection() {
                 className="min-h-11"
               >
                 {runBackup.isPending ? (
-                  <Loader2 className="mr-1 h-3.5 w-3.5 animate-spin motion-reduce:animate-none" />
+                  <Loader2 className="h-3.5 w-3.5 animate-spin motion-reduce:animate-none" />
                 ) : (
-                  <PlayCircle className="mr-1 h-3.5 w-3.5" />
+                  <PlayCircle className="h-3.5 w-3.5" />
                 )}
                 {t("admin.section.backups.runNow")}
               </Button>
@@ -522,9 +522,9 @@ export function BackupsSection() {
                         className="min-h-11"
                       >
                         {downloadingId === row.id ? (
-                          <Loader2 className="mr-1 h-3.5 w-3.5 animate-spin motion-reduce:animate-none" />
+                          <Loader2 className="h-3.5 w-3.5 animate-spin motion-reduce:animate-none" />
                         ) : (
-                          <Download className="mr-1 h-3.5 w-3.5" />
+                          <Download className="h-3.5 w-3.5" />
                         )}
                         {t("admin.section.backups.download")}
                       </Button>
diff --git a/src/components/admin/bug-report-section.tsx b/src/components/admin/bug-report-section.tsx
index fd8a42149..3960e3576 100644
--- a/src/components/admin/bug-report-section.tsx
+++ b/src/components/admin/bug-report-section.tsx
@@ -119,7 +119,7 @@ export function BugReportSection() {
           disabled={updateSettings.isPending}
         >
           {updateSettings.isPending && (
-            <Loader2 className="mr-1.5 h-3.5 w-3.5 animate-spin motion-reduce:animate-none" />
+            <Loader2 className="h-3.5 w-3.5 animate-spin motion-reduce:animate-none" />
           )}
           {t("common.save")}
         </Button>
diff --git a/src/components/admin/danger-zone-section.tsx b/src/components/admin/danger-zone-section.tsx
index 4f42d3047..f2bd8914a 100644
--- a/src/components/admin/danger-zone-section.tsx
+++ b/src/components/admin/danger-zone-section.tsx
@@ -85,9 +85,9 @@ export function DangerZoneSection() {
                 disabled={wipeAllData.isPending}
               >
                 {wipeAllData.isPending ? (
-                  <Loader2 className="mr-1 h-3.5 w-3.5 animate-spin motion-reduce:animate-none" />
+                  <Loader2 className="h-3.5 w-3.5 animate-spin motion-reduce:animate-none" />
                 ) : (
-                  <Trash2 className="mr-1 h-3.5 w-3.5" />
+                  <Trash2 className="h-3.5 w-3.5" />
                 )}
                 {t("admin.deleteButton")}
               </Button>
diff --git a/src/components/admin/feedback-inbox-section.tsx b/src/components/admin/feedback-inbox-section.tsx
index 31180ed6c..c329e13b4 100644
--- a/src/components/admin/feedback-inbox-section.tsx
+++ b/src/components/admin/feedback-inbox-section.tsx
@@ -366,7 +366,7 @@ function FeedbackDetailDialog({
             disabled={update.isPending || item.status === "ACKNOWLEDGED"}
             onClick={() => update.mutate({ status: "ACKNOWLEDGED" })}
           >
-            <CheckCircle2 className="mr-1.5 h-3.5 w-3.5" />
+            <CheckCircle2 className="h-3.5 w-3.5" />
             {t("admin.feedback.actionAcknowledge")}
           </Button>
           <Button
@@ -374,7 +374,7 @@ function FeedbackDetailDialog({
             disabled={update.isPending || item.status === "RESOLVED"}
             onClick={() => update.mutate({ status: "RESOLVED" })}
           >
-            <CheckCircle2 className="mr-1.5 h-3.5 w-3.5" />
+            <CheckCircle2 className="h-3.5 w-3.5" />
             {t("admin.feedback.actionResolve")}
           </Button>
           <AlertDialog>
@@ -384,7 +384,7 @@ function FeedbackDetailDialog({
                 variant="destructive"
                 disabled={archive.isPending || item.status === "ARCHIVED"}
               >
-                <Trash2 className="mr-1.5 h-3.5 w-3.5" />
+                <Trash2 className="h-3.5 w-3.5" />
                 {t("admin.feedback.actionArchive")}
               </Button>
             </AlertDialogTrigger>
@@ -419,9 +419,9 @@ function FeedbackDetailDialog({
               className="ml-auto"
             >
               {publish.isPending ? (
-                <Loader2 className="mr-1.5 h-3.5 w-3.5 animate-spin motion-reduce:animate-none" />
+                <Loader2 className="h-3.5 w-3.5 animate-spin motion-reduce:animate-none" />
               ) : (
-                <GitPullRequest className="mr-1.5 h-3.5 w-3.5" />
+                <GitPullRequest className="h-3.5 w-3.5" />
               )}
               {t("admin.feedback.actionPublishGithub")}
             </Button>
@@ -517,7 +517,7 @@ function FeedbackDetailDialog({
               onClick={() => update.mutate({ adminNote: note || null })}
             >
               {update.isPending && (
-                <Loader2 className="mr-1.5 h-3.5 w-3.5 animate-spin motion-reduce:animate-none" />
+                <Loader2 className="h-3.5 w-3.5 animate-spin motion-reduce:animate-none" />
               )}
               {t("admin.feedback.saveNote")}
             </Button>
diff --git a/src/components/admin/glitchtip-section.tsx b/src/components/admin/glitchtip-section.tsx
index 44944de3e..a846d90f0 100644
--- a/src/components/admin/glitchtip-section.tsx
+++ b/src/components/admin/glitchtip-section.tsx
@@ -148,7 +148,7 @@ export function GlitchtipSection() {
           disabled={testGlitchtip.isPending || updateSettings.isPending}
         >
           {testGlitchtip.isPending && (
-            <Loader2 className="mr-1.5 h-3.5 w-3.5 animate-spin motion-reduce:animate-none" />
+            <Loader2 className="h-3.5 w-3.5 animate-spin motion-reduce:animate-none" />
           )}
           {t("common.test")}
         </Button>
@@ -158,7 +158,7 @@ export function GlitchtipSection() {
           disabled={updateSettings.isPending}
         >
           {updateSettings.isPending && (
-            <Loader2 className="mr-1.5 h-3.5 w-3.5 animate-spin motion-reduce:animate-none" />
+            <Loader2 className="h-3.5 w-3.5 animate-spin motion-reduce:animate-none" />
           )}
           {t("common.save")}
         </Button>
diff --git a/src/components/admin/host-metrics-chart.tsx b/src/components/admin/host-metrics-chart.tsx
index 4f2331a1c..5fd1625f2 100644
--- a/src/components/admin/host-metrics-chart.tsx
+++ b/src/components/admin/host-metrics-chart.tsx
@@ -38,6 +38,7 @@ import {
 import { useMemo } from "react";
 import { useFormatters, useTranslations } from "@/lib/i18n/context";
 import { queryKeys } from "@/lib/query-keys";
+import { Skeleton } from "@/components/ui/skeleton";
 
 interface HostMetricsApiSample {
   capturedAt: string;
@@ -168,7 +169,7 @@ export function HostMetricsChart() {
             {t("admin.hostMetrics.last2hours")}
           </span>
         </div>
-        <div className="bg-muted/40 h-[180px] w-full animate-pulse rounded-md motion-reduce:animate-none" />
+        <Skeleton className="bg-muted/40 h-[180px] w-full" />
       </section>
     );
   }
diff --git a/src/components/admin/login-overview-section.tsx b/src/components/admin/login-overview-section.tsx
index 33750c58e..81a887f1d 100644
--- a/src/components/admin/login-overview-section.tsx
+++ b/src/components/admin/login-overview-section.tsx
@@ -331,7 +331,7 @@ export function LoginOverviewSection() {
             onClick={downloadCsv}
             disabled={entries.length === 0}
           >
-            <Download className="mr-1 h-3.5 w-3.5" />
+            <Download className="h-3.5 w-3.5" />
             {t("admin.section.auditLog.export")}
           </Button>
         </div>
diff --git a/src/components/admin/reminders-section.tsx b/src/components/admin/reminders-section.tsx
index cd2bf61de..b1686b9ac 100644
--- a/src/components/admin/reminders-section.tsx
+++ b/src/components/admin/reminders-section.tsx
@@ -181,9 +181,9 @@ export function RemindersSection() {
           disabled={testNotification.isPending}
         >
           {testNotification.isPending && (
-            <Loader2 className="mr-1.5 h-3.5 w-3.5 animate-spin motion-reduce:animate-none" />
+            <Loader2 className="h-3.5 w-3.5 animate-spin motion-reduce:animate-none" />
           )}
-          <Bell className="mr-1.5 h-3.5 w-3.5" />
+          <Bell className="h-3.5 w-3.5" />
           {t("admin.notificationTestSend")}
         </Button>
         <Button
@@ -193,9 +193,9 @@ export function RemindersSection() {
           disabled={reminderCheck.isPending}
         >
           {reminderCheck.isPending && (
-            <Loader2 className="mr-1.5 h-3.5 w-3.5 animate-spin motion-reduce:animate-none" />
+            <Loader2 className="h-3.5 w-3.5 animate-spin motion-reduce:animate-none" />
           )}
-          <Activity className="mr-1.5 h-3.5 w-3.5" />
+          <Activity className="h-3.5 w-3.5" />
           {t("admin.reminderCheckRun")}
         </Button>
         <Button
@@ -224,7 +224,7 @@ export function RemindersSection() {
           }
         >
           {updateSettings.isPending && (
-            <Loader2 className="mr-1.5 h-3.5 w-3.5 animate-spin motion-reduce:animate-none" />
+            <Loader2 className="h-3.5 w-3.5 animate-spin motion-reduce:animate-none" />
           )}
           {t("common.save")}
         </Button>
@@ -236,9 +236,9 @@ export function RemindersSection() {
             {testNotification.data.results.map((r, i) => (
               <div key={i} className="flex items-center gap-1.5 text-xs">
                 {r.success ? (
-                  <CheckCircle2 className="text-success dark:text-green-400 h-3.5 w-3.5 shrink-0" />
+                  <CheckCircle2 className="text-success h-3.5 w-3.5 shrink-0 dark:text-green-400" />
                 ) : (
-                  <XCircle className="text-destructive dark:text-red-400 h-3.5 w-3.5 shrink-0" />
+                  <XCircle className="text-destructive h-3.5 w-3.5 shrink-0 dark:text-red-400" />
                 )}
                 <span className="font-medium">{r.channel}</span>
                 {r.error && (
@@ -299,7 +299,7 @@ export function RemindersSection() {
                         </span>
                         <span className={statusColor}>{sched.label}</span>
                         {sched.notificationSent && (
-                          <span className="text-success dark:text-green-400 flex shrink-0 items-center gap-0.5">
+                          <span className="text-success flex shrink-0 items-center gap-0.5 dark:text-green-400">
                             <Bell className="h-3 w-3" />
                             {t("admin.reminderCheckNotifSent")}
                           </span>
diff --git a/src/components/admin/system-status-section.tsx b/src/components/admin/system-status-section.tsx
index 662c775da..9345dbe19 100644
--- a/src/components/admin/system-status-section.tsx
+++ b/src/components/admin/system-status-section.tsx
@@ -19,6 +19,7 @@ import {
   Users,
 } from "lucide-react";
 import { Button } from "@/components/ui/button";
+import { Skeleton } from "@/components/ui/skeleton";
 import { formatDateTime } from "@/lib/format";
 import { useFormatters, useTranslations } from "@/lib/i18n/context";
 import { StatusItem, usePublicVersion, useSystemStatus } from "./_shared";
@@ -36,7 +37,7 @@ const HostMetricsChart = dynamic(
   {
     ssr: false,
     loading: () => (
-      <div className="bg-muted/40 h-[200px] w-full animate-pulse rounded-xl motion-reduce:animate-none" />
+      <Skeleton className="bg-muted/40 h-[200px] w-full rounded-xl" />
     ),
   },
 );
@@ -207,9 +208,9 @@ export function SystemStatusSection() {
               data-testid="system-status-retry"
             >
               {isFetching ? (
-                <Loader2 className="mr-1 h-3.5 w-3.5 animate-spin motion-reduce:animate-none" />
+                <Loader2 className="h-3.5 w-3.5 animate-spin motion-reduce:animate-none" />
               ) : (
-                <RotateCw className="mr-1 h-3.5 w-3.5" />
+                <RotateCw className="h-3.5 w-3.5" />
               )}
               {t("admin.systemStatusRetry")}
             </Button>
diff --git a/src/components/admin/umami-section.tsx b/src/components/admin/umami-section.tsx
index 6ff7c756f..5f5881eef 100644
--- a/src/components/admin/umami-section.tsx
+++ b/src/components/admin/umami-section.tsx
@@ -149,7 +149,7 @@ export function UmamiSection() {
           disabled={testUmami.isPending || updateSettings.isPending}
         >
           {testUmami.isPending && (
-            <Loader2 className="mr-1.5 h-3.5 w-3.5 animate-spin motion-reduce:animate-none" />
+            <Loader2 className="h-3.5 w-3.5 animate-spin motion-reduce:animate-none" />
           )}
           {t("common.test")}
         </Button>
@@ -159,7 +159,7 @@ export function UmamiSection() {
           disabled={updateSettings.isPending}
         >
           {updateSettings.isPending && (
-            <Loader2 className="mr-1.5 h-3.5 w-3.5 animate-spin motion-reduce:animate-none" />
+            <Loader2 className="h-3.5 w-3.5 animate-spin motion-reduce:animate-none" />
           )}
           {t("common.save")}
         </Button>
diff --git a/src/components/admin/user-management-section.tsx b/src/components/admin/user-management-section.tsx
index 38fa8a431..f4932ca05 100644
--- a/src/components/admin/user-management-section.tsx
+++ b/src/components/admin/user-management-section.tsx
@@ -189,7 +189,7 @@ export function UserManagementSection() {
             : t("admin.promoteToAdmin")
         }
       >
-        <Shield className="mr-1 h-3 w-3" aria-hidden="true" />
+        <Shield className="h-3 w-3" aria-hidden="true" />
         {u.role === "ADMIN" ? t("admin.toUser") : t("admin.toAdmin")}
       </Button>
       <Button
@@ -461,7 +461,7 @@ export function UserManagementSection() {
                 }
               >
                 {updateUser.isPending && (
-                  <Loader2 className="mr-1 h-3.5 w-3.5 animate-spin motion-reduce:animate-none" />
+                  <Loader2 className="h-3.5 w-3.5 animate-spin motion-reduce:animate-none" />
                 )}
                 {t("common.save")}
               </Button>
@@ -511,7 +511,7 @@ export function UserManagementSection() {
                 }
               >
                 {resetPw.isPending && (
-                  <Loader2 className="mr-1 h-3.5 w-3.5 animate-spin motion-reduce:animate-none" />
+                  <Loader2 className="h-3.5 w-3.5 animate-spin motion-reduce:animate-none" />
                 )}
                 {t("admin.reset")}
               </Button>
diff --git a/src/components/admin/web-push-vapid-section.tsx b/src/components/admin/web-push-vapid-section.tsx
index 1ee3d2c09..c401f5f20 100644
--- a/src/components/admin/web-push-vapid-section.tsx
+++ b/src/components/admin/web-push-vapid-section.tsx
@@ -135,7 +135,7 @@ export function WebPushVapidSection() {
           disabled={updateSettings.isPending}
         >
           {updateSettings.isPending && (
-            <Loader2 className="mr-1.5 h-3.5 w-3.5 animate-spin motion-reduce:animate-none" />
+            <Loader2 className="h-3.5 w-3.5 animate-spin motion-reduce:animate-none" />
           )}
           {t("common.save")}
         </Button>
diff --git a/src/components/cycle/cycle-settings.tsx b/src/components/cycle/cycle-settings.tsx
index 74497fa78..aa273765d 100644
--- a/src/components/cycle/cycle-settings.tsx
+++ b/src/components/cycle/cycle-settings.tsx
@@ -244,7 +244,7 @@ export function CycleSettings({ profile }: { profile: CycleProfileDTO }) {
           ) : null}
           <Button onClick={handleSave} disabled={update.isPending}>
             {update.isPending ? (
-              <Loader2 className="mr-2 h-4 w-4 animate-spin motion-reduce:animate-none" />
+              <Loader2 className="h-4 w-4 animate-spin motion-reduce:animate-none" />
             ) : null}
             {t("cycle.settings.save")}
           </Button>
diff --git a/src/components/cycle/log-day-sheet.tsx b/src/components/cycle/log-day-sheet.tsx
index 78b8e3d37..b8cf61fef 100644
--- a/src/components/cycle/log-day-sheet.tsx
+++ b/src/components/cycle/log-day-sheet.tsx
@@ -423,9 +423,9 @@ export function LogDaySheet({
               aria-label={t("cycle.sheet.delete")}
             >
               {deleteDay.isPending ? (
-                <Loader2 className="mr-2 h-4 w-4 animate-spin motion-reduce:animate-none" />
+                <Loader2 className="h-4 w-4 animate-spin motion-reduce:animate-none" />
               ) : (
-                <Trash2 className="mr-2 h-4 w-4" />
+                <Trash2 className="h-4 w-4" />
               )}
               {t("cycle.sheet.delete")}
             </Button>
@@ -439,7 +439,7 @@ export function LogDaySheet({
           </Button>
           <Button onClick={handleSave} disabled={busy}>
             {saving ? (
-              <Loader2 className="mr-2 h-4 w-4 animate-spin motion-reduce:animate-none" />
+              <Loader2 className="h-4 w-4 animate-spin motion-reduce:animate-none" />
             ) : null}
             {saving ? t("cycle.sheet.saving") : t("cycle.sheet.save")}
           </Button>
@@ -815,11 +815,7 @@ function SymptomChip({
  * popover to mint a new custom symptom. Matches the chip grid (same rounded-
  * full pill, same size) so it reads as part of the grid, not a foreign button.
  */
-function AddSymptomChip({
-  onCreated,
-}: {
-  onCreated: (key: string) => void;
-}) {
+function AddSymptomChip({ onCreated }: { onCreated: (key: string) => void }) {
   const { t } = useTranslations();
   const create = useCreateCustomSymptom();
   const [openForm, setOpenForm] = useState(false);
@@ -924,7 +920,7 @@ function AddSymptomChip({
           </div>
         </div>
         {limitReached ? (
-          <p className="text-destructive text-xs" role="alert">
+          <p className="text-destructive text-sm" role="alert">
             {t("cycle.symptom.custom.limitReached")}
           </p>
         ) : null}
@@ -945,7 +941,7 @@ function AddSymptomChip({
             disabled={!label.trim() || create.isPending}
           >
             {create.isPending ? (
-              <Loader2 className="mr-1 h-3.5 w-3.5 animate-spin motion-reduce:animate-none" />
+              <Loader2 className="h-3.5 w-3.5 animate-spin motion-reduce:animate-none" />
             ) : null}
             {t("cycle.symptom.custom.add")}
           </Button>
diff --git a/src/components/dashboard/__tests__/medication-intake-quick-add.test.tsx b/src/components/dashboard/__tests__/medication-intake-quick-add.test.tsx
index 3099ce412..79f0ccea6 100644
--- a/src/components/dashboard/__tests__/medication-intake-quick-add.test.tsx
+++ b/src/components/dashboard/__tests__/medication-intake-quick-add.test.tsx
@@ -121,10 +121,7 @@ describe("pickDefaultMedicationId — auto-select heuristic", () => {
     // alphabetically sort and pick the leading id, "ramipril".
     const now = new Date("2026-05-12T01:00:00Z"); // 03:00 Berlin
     const result = pickDefaultMedicationId(
-      [
-        makeMed("z", { name: "Zolpidem" }),
-        makeMed("r", { name: "Ramipril" }),
-      ],
+      [makeMed("z", { name: "Zolpidem" }), makeMed("r", { name: "Ramipril" })],
       now,
     );
     expect(result).toBe("r");
@@ -169,10 +166,15 @@ describe("<MedicationIntakeQuickAdd> — SSR contract", () => {
     expect(html).toContain(
       'data-testid="medication-intake-quick-add-taken-at"',
     );
-    // 44 px touch floor on every interactive field + the footer Save
-    // button (WCAG 2.5.5). v1.4.37 W10 added the floor to the footer
-    // buttons; the form fields already carried it.
-    expect(html.match(/min-h-11/g)?.length ?? 0).toBeGreaterThanOrEqual(3);
+    // 44 px touch floor (WCAG 2.5.5). The form controls inherit it from
+    // the Input / SelectTrigger primitives' `h-11 sm:h-10` base — no
+    // per-call-site `min-h-11` override (which would force 44 px on
+    // desktop too). The footer buttons keep the explicit
+    // `min-h-11 sm:min-h-9` floor.
+    expect(html.match(/h-11/g)?.length ?? 0).toBeGreaterThanOrEqual(3);
+    expect(
+      html.match(/min-h-11 sm:min-h-9/g)?.length ?? 0,
+    ).toBeGreaterThanOrEqual(1);
   });
 
   it("does not leak raw i18n keys in either locale", () => {
diff --git a/src/components/dashboard/medication-intake-quick-add.tsx b/src/components/dashboard/medication-intake-quick-add.tsx
index 26e4446ed..bdc775fc8 100644
--- a/src/components/dashboard/medication-intake-quick-add.tsx
+++ b/src/components/dashboard/medication-intake-quick-add.tsx
@@ -298,9 +298,9 @@ export function MedicationIntakeQuickAdd({
         className="min-h-11 sm:min-h-9"
       >
         {loading ? (
-          <Loader2 className="mr-2 h-4 w-4 animate-spin motion-reduce:animate-none" />
+          <Loader2 className="h-4 w-4 animate-spin motion-reduce:animate-none" />
         ) : (
-          <Plus className="mr-2 h-4 w-4" />
+          <Plus className="h-4 w-4" />
         )}
         {t("common.save")}
       </Button>
@@ -382,7 +382,6 @@ export function MedicationIntakeQuickAdd({
           <SelectTrigger
             id="medication-intake-medication"
             data-testid="medication-intake-quick-add-medication"
-            className="min-h-11"
           >
             <SelectValue
               placeholder={t(
@@ -427,7 +426,7 @@ export function MedicationIntakeQuickAdd({
             t("dashboard.medicationIntakeQuickAdd.dosePlaceholder")
           }
           autoComplete="off"
-          className="min-h-11 bg-muted/40"
+          className="bg-muted/40"
         />
         <p className="text-muted-foreground text-xs">
           {t("dashboard.medicationIntakeQuickAdd.doseHint")}
diff --git a/src/components/data-list/selection-action-bar.tsx b/src/components/data-list/selection-action-bar.tsx
index 02cb5c5c9..b4f6ce702 100644
--- a/src/components/data-list/selection-action-bar.tsx
+++ b/src/components/data-list/selection-action-bar.tsx
@@ -88,9 +88,9 @@ export function SelectionActionBar({
             disabled={isDeleting}
           >
             {isDeleting ? (
-              <Loader2 className="mr-2 h-4 w-4 animate-spin motion-reduce:animate-none" />
+              <Loader2 className="h-4 w-4 animate-spin motion-reduce:animate-none" />
             ) : (
-              <Trash2 className="mr-2 h-4 w-4" />
+              <Trash2 className="h-4 w-4" />
             )}
             {t("dataList.deleteN", { count: String(count) })}
           </Button>
diff --git a/src/components/doctor-report/doctor-report-dialog.tsx b/src/components/doctor-report/doctor-report-dialog.tsx
index 23c7c1a40..12e1b927c 100644
--- a/src/components/doctor-report/doctor-report-dialog.tsx
+++ b/src/components/doctor-report/doctor-report-dialog.tsx
@@ -46,6 +46,7 @@ import { Input } from "@/components/ui/input";
 import { DateInput } from "@/components/ui/date-input";
 import { Label } from "@/components/ui/label";
 import { Switch } from "@/components/ui/switch";
+import { Skeleton } from "@/components/ui/skeleton";
 import {
   DEFAULT_DOCTOR_REPORT_PREFS,
   type DoctorReportPrefs,
@@ -497,7 +498,7 @@ export function DoctorReportDialog({
             </Button>
             <Button type="submit" disabled={submitting || !validation.ok}>
               {submitting && (
-                <Loader2 className="mr-1 h-3.5 w-3.5 animate-spin motion-reduce:animate-none" />
+                <Loader2 className="h-3.5 w-3.5 animate-spin motion-reduce:animate-none" />
               )}
               {t("doctorReport.dialog.submit")}
             </Button>
@@ -579,8 +580,8 @@ export function SectionToggles({
           {t("doctorReport.sections.title")}
         </p>
         <div className="space-y-2">
-          <div className="bg-muted h-9 animate-pulse motion-reduce:animate-none rounded-md" />
-          <div className="bg-muted h-9 animate-pulse motion-reduce:animate-none rounded-md" />
+          <Skeleton className="bg-muted h-9" />
+          <Skeleton className="bg-muted h-9" />
         </div>
       </div>
     );
diff --git a/src/components/error-details.tsx b/src/components/error-details.tsx
index 0ba6c65a3..9065a3496 100644
--- a/src/components/error-details.tsx
+++ b/src/components/error-details.tsx
@@ -90,22 +90,22 @@ export function ErrorDetails({
       <div className="flex flex-wrap items-center gap-2">
         {reset && (
           <Button onClick={reset} variant="outline">
-            <RotateCcw className="mr-2 h-4 w-4" />
+            <RotateCcw className="h-4 w-4" />
             {t("common.retry")}
           </Button>
         )}
         <Button onClick={handleCopy} variant="outline">
           {copied ? (
-            <CheckCircle2 className="text-success mr-2 h-4 w-4" />
+            <CheckCircle2 className="text-success h-4 w-4" />
           ) : (
-            <Copy className="mr-2 h-4 w-4" />
+            <Copy className="h-4 w-4" />
           )}
           {copied ? t("common.copied") : t("common.copyDetails")}
         </Button>
         {bugReportEnabled && (
           <Button asChild variant="outline">
             <Link href={reportHref}>
-              <Bug className="mr-2 h-4 w-4" />
+              <Bug className="h-4 w-4" />
               {t("common.reportIssue")}
             </Link>
           </Button>
diff --git a/src/components/gamification/recent-achievements-card.tsx b/src/components/gamification/recent-achievements-card.tsx
index e213a69f7..fccd23501 100644
--- a/src/components/gamification/recent-achievements-card.tsx
+++ b/src/components/gamification/recent-achievements-card.tsx
@@ -23,6 +23,7 @@ import { useTranslations } from "@/lib/i18n/context";
 import { formatDate } from "@/lib/format";
 import { useAchievementsQuery } from "@/lib/queries/use-achievements-query";
 import type { AchievementProgress } from "@/lib/gamification/achievements";
+import { Skeleton } from "@/components/ui/skeleton";
 
 const iconMap: Record<string, LucideIcon> = {
   Activity,
@@ -123,10 +124,10 @@ export function RecentAchievementsCard() {
               key={`achievement-skeleton-${idx}`}
               className="border-border bg-background/40 flex items-center gap-3 rounded-md border p-2"
             >
-              <div className="bg-muted/60 h-7 w-7 shrink-0 animate-pulse rounded-md motion-reduce:animate-none" />
+              <Skeleton className="h-7 w-7 shrink-0" />
               <div className="min-w-0 flex-1 space-y-1.5">
-                <div className="bg-muted/60 h-3 w-1/2 animate-pulse rounded motion-reduce:animate-none" />
-                <div className="bg-muted/60 h-2.5 w-3/4 animate-pulse rounded motion-reduce:animate-none" />
+                <Skeleton className="h-3 w-1/2 rounded" />
+                <Skeleton className="h-2.5 w-3/4 rounded" />
               </div>
             </li>
           ))}
diff --git a/src/components/insights/__tests__/correlation-card-skeleton.test.ts b/src/components/insights/__tests__/correlation-card-skeleton.test.ts
index 8f8a5414f..27e5bdee4 100644
--- a/src/components/insights/__tests__/correlation-card-skeleton.test.ts
+++ b/src/components/insights/__tests__/correlation-card-skeleton.test.ts
@@ -18,10 +18,7 @@ describe("correlation-card scatter skeleton mirrors loaded chart", () => {
     "utf8",
   );
   const chartSrc = readFileSync(
-    join(
-      process.cwd(),
-      "src/components/charts/scatter-correlation-chart.tsx",
-    ),
+    join(process.cwd(), "src/components/charts/scatter-correlation-chart.tsx"),
     "utf8",
   );
 
@@ -35,7 +32,10 @@ describe("correlation-card scatter skeleton mirrors loaded chart", () => {
     expect(block).toContain("min-h-[180px]");
     expect(block).toContain("sm:aspect-[3/2]");
     expect(block).toContain("sm:h-auto");
-    expect(block).toContain("motion-reduce:animate-none");
+    // Reduced-motion handling comes from the shared <Skeleton>
+    // primitive (its base classes carry `motion-reduce:animate-none`),
+    // so the loader block must render it rather than a raw pulse div.
+    expect(block).toContain("<Skeleton");
   });
 
   it("loaded scatter chart still owns the same aspect-ratio quartet", () => {
diff --git a/src/components/insights/correlation-card.tsx b/src/components/insights/correlation-card.tsx
index 72b7785f9..697e9615e 100644
--- a/src/components/insights/correlation-card.tsx
+++ b/src/components/insights/correlation-card.tsx
@@ -6,6 +6,7 @@ import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { EmptyState } from "@/components/ui/empty-state";
+import { Skeleton } from "@/components/ui/skeleton";
 import { useTranslations } from "@/lib/i18n/context";
 import { cn } from "@/lib/utils";
 import type { CorrelationResult } from "@/lib/insights/correlations";
@@ -36,7 +37,7 @@ const ScatterCorrelationChart = dynamic(
       // skeleton reserves the same space across breakpoints. The
       // legacy `h-[180px]` was ~60 px shorter than the painted chart
       // at `sm+` and caused a visible CLS shift on insights mount.
-      <div className="bg-muted/40 aspect-square min-h-[180px] w-full animate-pulse rounded-md motion-reduce:animate-none sm:aspect-[3/2] sm:h-auto" />
+      <Skeleton className="bg-muted/40 aspect-square min-h-[180px] w-full sm:aspect-[3/2] sm:h-auto" />
     ),
   },
 );
diff --git a/src/components/insights/daily-briefing.tsx b/src/components/insights/daily-briefing.tsx
index 46431096a..179701e83 100644
--- a/src/components/insights/daily-briefing.tsx
+++ b/src/components/insights/daily-briefing.tsx
@@ -22,6 +22,7 @@ import {
 import { Button } from "@/components/ui/button";
 import { Card, CardContent } from "@/components/ui/card";
 import { EmptyState } from "@/components/ui/empty-state";
+import { Skeleton } from "@/components/ui/skeleton";
 import { SectionHeading } from "@/components/insights/section-heading";
 import { useTranslations } from "@/lib/i18n/context";
 import { formatRelativeTime } from "@/lib/i18n/relative-time";
@@ -250,10 +251,10 @@ function BriefingSkeleton() {
       aria-hidden="true"
     >
       <div className="space-y-2">
-        <div className="bg-muted/60 h-3 w-11/12 animate-pulse rounded motion-reduce:animate-none" />
-        <div className="bg-muted/60 h-3 w-10/12 animate-pulse rounded motion-reduce:animate-none" />
-        <div className="bg-muted/60 h-3 w-9/12 animate-pulse rounded motion-reduce:animate-none" />
-        <div className="bg-muted/60 h-3 w-8/12 animate-pulse rounded motion-reduce:animate-none" />
+        <Skeleton className="h-3 w-11/12 rounded" />
+        <Skeleton className="h-3 w-10/12 rounded" />
+        <Skeleton className="h-3 w-9/12 rounded" />
+        <Skeleton className="h-3 w-8/12 rounded" />
       </div>
       <div className="space-y-2">
         {[0, 1, 2].map((i) => (
@@ -261,7 +262,7 @@ function BriefingSkeleton() {
             key={i}
             className="border-border/40 bg-card/30 flex h-16 items-center rounded-md border p-3"
           >
-            <div className="bg-muted/60 h-3 w-1/3 animate-pulse rounded motion-reduce:animate-none" />
+            <Skeleton className="h-3 w-1/3 rounded" />
           </div>
         ))}
       </div>
diff --git a/src/components/insights/insight-status-card.tsx b/src/components/insights/insight-status-card.tsx
index 2a8b4487f..b0a5b2dfc 100644
--- a/src/components/insights/insight-status-card.tsx
+++ b/src/components/insights/insight-status-card.tsx
@@ -3,6 +3,7 @@
 import { useEffect, useRef, useState } from "react";
 
 import { Card, CardContent, CardHeader } from "@/components/ui/card";
+import { Skeleton } from "@/components/ui/skeleton";
 import { TileHeader } from "@/components/insights/tile-header";
 import { useTranslations } from "@/lib/i18n/context";
 import { formatRelativeTime } from "@/lib/i18n/relative-time";
@@ -91,9 +92,9 @@ export function InsightStatusCard({
           <TileHeader icon={nodeIcon(icon)} title={title} />
         </CardHeader>
         <CardContent className="space-y-2">
-          <div className="bg-muted h-3.5 w-full animate-pulse rounded motion-reduce:animate-none" />
-          <div className="bg-muted h-3.5 w-11/12 animate-pulse rounded motion-reduce:animate-none" />
-          <div className="bg-muted h-3.5 w-9/12 animate-pulse rounded motion-reduce:animate-none" />
+          <Skeleton className="bg-muted h-3.5 w-full rounded" />
+          <Skeleton className="bg-muted h-3.5 w-11/12 rounded" />
+          <Skeleton className="bg-muted h-3.5 w-9/12 rounded" />
           <p className="text-muted-foreground text-xs">
             {t("insights.assessmentPreparing")}
           </p>
@@ -126,15 +127,15 @@ export function InsightStatusCard({
       >
         <CardHeader className="pb-1">
           <div className="flex items-center gap-2">
-            <div className="bg-muted h-5 w-5 animate-pulse rounded motion-reduce:animate-none" />
-            <div className="bg-muted h-4 w-32 animate-pulse rounded motion-reduce:animate-none" />
+            <Skeleton className="bg-muted h-5 w-5 rounded" />
+            <Skeleton className="bg-muted h-4 w-32 rounded" />
           </div>
         </CardHeader>
         <CardContent className="space-y-2">
-          <div className="bg-muted h-3.5 w-full animate-pulse rounded motion-reduce:animate-none" />
-          <div className="bg-muted h-3.5 w-11/12 animate-pulse rounded motion-reduce:animate-none" />
-          <div className="bg-muted h-3.5 w-9/12 animate-pulse rounded motion-reduce:animate-none" />
-          <div className="bg-muted/70 h-3 w-1/3 animate-pulse rounded motion-reduce:animate-none" />
+          <Skeleton className="bg-muted h-3.5 w-full rounded" />
+          <Skeleton className="bg-muted h-3.5 w-11/12 rounded" />
+          <Skeleton className="bg-muted h-3.5 w-9/12 rounded" />
+          <Skeleton className="bg-muted/70 h-3 w-1/3 rounded" />
           <span className="sr-only">{t("common.loading")}</span>
         </CardContent>
       </Card>
diff --git a/src/components/insights/insights-edit-mode.tsx b/src/components/insights/insights-edit-mode.tsx
index de0491978..466a99bfb 100644
--- a/src/components/insights/insights-edit-mode.tsx
+++ b/src/components/insights/insights-edit-mode.tsx
@@ -4,13 +4,7 @@ import { useEffect, useMemo, useRef, useState } from "react";
 import Link from "next/link";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { toast } from "sonner";
-import {
-  Eye,
-  EyeOff,
-  GripVertical,
-  Loader2,
-  RotateCcw,
-} from "lucide-react";
+import { Eye, EyeOff, GripVertical, Loader2, RotateCcw } from "lucide-react";
 import {
   DndContext,
   KeyboardSensor,
@@ -222,9 +216,9 @@ export function InsightsEditMode({
             data-slot="insights-edit-reset"
           >
             {resetMutation.isPending ? (
-              <Loader2 className="mr-2 h-3.5 w-3.5 animate-spin motion-reduce:animate-none" />
+              <Loader2 className="h-3.5 w-3.5 animate-spin motion-reduce:animate-none" />
             ) : (
-              <RotateCcw className="mr-2 h-3.5 w-3.5" />
+              <RotateCcw className="h-3.5 w-3.5" />
             )}
             {t("insights.editMode.reset")}
           </Button>
@@ -235,7 +229,7 @@ export function InsightsEditMode({
             data-slot="insights-edit-done"
           >
             {saveMutation.isPending && (
-              <Loader2 className="mr-2 h-3.5 w-3.5 animate-spin motion-reduce:animate-none" />
+              <Loader2 className="h-3.5 w-3.5 animate-spin motion-reduce:animate-none" />
             )}
             {t("insights.editMode.done")}
           </Button>
@@ -335,11 +329,7 @@ function EyeToggle({
       data-visible={visible ? "true" : "false"}
       className="text-muted-foreground hover:text-foreground focus-visible:ring-ring focus-visible:ring-offset-background inline-flex h-11 w-11 shrink-0 items-center justify-center rounded transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 motion-reduce:transition-none sm:h-9 sm:w-9"
     >
-      {visible ? (
-        <Eye className="h-4 w-4" />
-      ) : (
-        <EyeOff className="h-4 w-4" />
-      )}
+      {visible ? <Eye className="h-4 w-4" /> : <EyeOff className="h-4 w-4" />}
     </button>
   );
 }
@@ -361,8 +351,14 @@ function SortableSectionRow({
   labels,
   onToggle,
 }: SortableSectionRowProps) {
-  const { attributes, listeners, setNodeRef, transform, transition, isDragging } =
-    useSortable({ id: section.id });
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({ id: section.id });
 
   const style: React.CSSProperties = {
     transform: CSS.Transform.toString(transform),
@@ -427,4 +423,3 @@ function SortableSectionRow({
     </div>
   );
 }
-
diff --git a/src/components/insights/mood/mood-correlation-cards.tsx b/src/components/insights/mood/mood-correlation-cards.tsx
index 8e054af06..a9b931336 100644
--- a/src/components/insights/mood/mood-correlation-cards.tsx
+++ b/src/components/insights/mood/mood-correlation-cards.tsx
@@ -6,6 +6,7 @@ import { Activity } from "lucide-react";
 import { Badge } from "@/components/ui/badge";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { EmptyState } from "@/components/ui/empty-state";
+import { Skeleton } from "@/components/ui/skeleton";
 import { useTranslations } from "@/lib/i18n/context";
 import type { CorrelationResult } from "@/lib/analytics/correlations";
 import { MoodExplainerIcon } from "./mood-explainer-icon";
@@ -29,7 +30,7 @@ const ScatterCorrelationChart = dynamic(
   {
     ssr: false,
     loading: () => (
-      <div className="bg-muted/40 aspect-square min-h-[180px] w-full animate-pulse rounded-md motion-reduce:animate-none sm:aspect-[3/2] sm:h-auto" />
+      <Skeleton className="bg-muted/40 aspect-square min-h-[180px] w-full sm:aspect-[3/2] sm:h-auto" />
     ),
   },
 );
diff --git a/src/components/insights/sleep-hypnogram.tsx b/src/components/insights/sleep-hypnogram.tsx
index 2d222e0f7..514cf064b 100644
--- a/src/components/insights/sleep-hypnogram.tsx
+++ b/src/components/insights/sleep-hypnogram.tsx
@@ -68,7 +68,14 @@ export interface SleepHypnogramProps {
  * Lane order top → bottom. Awake highest, Deep lowest — depth increases
  * downward, matching Apple Health / Oura's "cityscape" convention.
  */
-const LANE_ORDER = ["AWAKE", "IN_BED", "ASLEEP", "REM", "CORE", "DEEP"] as const;
+const LANE_ORDER = [
+  "AWAKE",
+  "IN_BED",
+  "ASLEEP",
+  "REM",
+  "CORE",
+  "DEEP",
+] as const;
 const LANE_OF: Record<string, number> = Object.fromEntries(
   // Reverse-index so AWAKE (first) sits at the highest y value.
   LANE_ORDER.map((s, i) => [s, LANE_ORDER.length - 1 - i]),
@@ -126,10 +133,7 @@ export function SleepHypnogram({ session }: SleepHypnogramProps) {
   }, [session.segments]);
 
   const domain = useMemo<[number, number]>(
-    () => [
-      new Date(session.start).getTime(),
-      new Date(session.end).getTime(),
-    ],
+    () => [new Date(session.start).getTime(), new Date(session.end).getTime()],
     [session.start, session.end],
   );
 
@@ -148,9 +152,10 @@ export function SleepHypnogram({ session }: SleepHypnogramProps) {
     // First whole hour at or after `from`, aligned to the step grid.
     const firstHour = new Date(from);
     firstHour.setMinutes(0, 0, 0);
-    if (firstHour.getTime() < from) firstHour.setTime(firstHour.getTime() + 3_600_000);
+    if (firstHour.getTime() < from)
+      firstHour.setTime(firstHour.getTime() + 3_600_000);
     // Align the first tick to a multiple of the step (relative to midnight).
-    while ((firstHour.getHours() % stepHours) !== 0) {
+    while (firstHour.getHours() % stepHours !== 0) {
       firstHour.setTime(firstHour.getTime() + 3_600_000);
     }
     const ticks: number[] = [];
@@ -203,7 +208,7 @@ export function SleepHypnogram({ session }: SleepHypnogramProps) {
     <Card data-slot="sleep-hypnogram" className="gap-3 md:gap-3">
       <CardHeader className="pb-0">
         <div className="flex flex-col gap-0.5">
-          <CardTitle className="text-sm font-medium">
+          <CardTitle className="text-base font-semibold">
             {t("insights.sleep.hypnogram.title")}
           </CardTitle>
           <span className="text-muted-foreground text-xs">
@@ -249,7 +254,9 @@ export function SleepHypnogram({ session }: SleepHypnogramProps) {
                       type="number"
                       dataKey="lane"
                       domain={[-0.5, LANE_ORDER.length - 0.5]}
-                      ticks={LANE_ORDER.map((_, i) => LANE_ORDER.length - 1 - i)}
+                      ticks={LANE_ORDER.map(
+                        (_, i) => LANE_ORDER.length - 1 - i,
+                      )}
                       stroke="var(--muted-foreground)"
                       fontSize={10}
                       width={56}
diff --git a/src/components/insights/sleep-overview.tsx b/src/components/insights/sleep-overview.tsx
index 4e41a5117..1685a0a67 100644
--- a/src/components/insights/sleep-overview.tsx
+++ b/src/components/insights/sleep-overview.tsx
@@ -16,10 +16,7 @@ import {
   SleepStageStackedBar,
   type SleepStageBreakdown,
 } from "./sleep-stage-stacked-bar";
-import {
-  SleepHypnogram,
-  type SleepHypnogramSession,
-} from "./sleep-hypnogram";
+import { SleepHypnogram, type SleepHypnogramSession } from "./sleep-hypnogram";
 import { SleepDurationChart } from "./sleep-duration-chart";
 
 /**
@@ -138,7 +135,7 @@ export function SleepOverview() {
         <CardHeader className="pb-0">
           <div className="flex items-center gap-2">
             <Moon className="text-dracula-cyan h-4 w-4" />
-            <CardTitle className="text-sm font-medium">
+            <CardTitle className="text-base font-semibold">
               {t("insights.sleep.headlineTitle")}
             </CardTitle>
           </div>
diff --git a/src/components/insights/sleep-stage-stacked-bar.tsx b/src/components/insights/sleep-stage-stacked-bar.tsx
index b70c4a8ba..74ac85869 100644
--- a/src/components/insights/sleep-stage-stacked-bar.tsx
+++ b/src/components/insights/sleep-stage-stacked-bar.tsx
@@ -81,13 +81,7 @@ type WindowSize = (typeof WINDOW_DAYS)[number];
  * token + the `insights.sleep.stages.inBed` label survive for the
  * last-night hypnogram, which still renders the in-bed span.
  */
-export const STAGE_ORDER = [
-  "DEEP",
-  "REM",
-  "CORE",
-  "ASLEEP",
-  "AWAKE",
-] as const;
+export const STAGE_ORDER = ["DEEP", "REM", "CORE", "ASLEEP", "AWAKE"] as const;
 
 /**
  * Dracula stage palette. Exported so the last-night hypnogram
@@ -218,7 +212,7 @@ export function SleepStageStackedBar({ breakdown }: SleepStageStackedBarProps) {
       <CardHeader className="pb-2">
         <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
           <div className="flex flex-col gap-0.5">
-            <CardTitle className="text-sm font-medium">
+            <CardTitle className="text-base font-semibold">
               {t("insights.sleep.compositionTitle")}
             </CardTitle>
             <span className="text-muted-foreground text-xs">
diff --git a/src/components/insights/sub-page-shell.tsx b/src/components/insights/sub-page-shell.tsx
index 32bfaac3a..f7b7d2e9e 100644
--- a/src/components/insights/sub-page-shell.tsx
+++ b/src/components/insights/sub-page-shell.tsx
@@ -290,7 +290,7 @@ export function SubPageShell({
                 pathname ? `?from=${encodeURIComponent(pathname)}` : ""
               }`}
             >
-              <ListOrdered className="mr-1.5 size-4" aria-hidden="true" />
+              <ListOrdered className="size-4" aria-hidden="true" />
               {t("insights.subPage.showAllValues")}
             </Link>
           </Button>
diff --git a/src/components/insights/trend-annotation.tsx b/src/components/insights/trend-annotation.tsx
index e30733a20..1a136d86d 100644
--- a/src/components/insights/trend-annotation.tsx
+++ b/src/components/insights/trend-annotation.tsx
@@ -4,6 +4,7 @@ import { useMemo } from "react";
 import { useQuery } from "@tanstack/react-query";
 import { Sparkles } from "lucide-react";
 import { Badge } from "@/components/ui/badge";
+import { Skeleton } from "@/components/ui/skeleton";
 import { useTranslations } from "@/lib/i18n/context";
 import { useAuth } from "@/hooks/use-auth";
 import { queryKeys } from "@/lib/query-keys";
@@ -158,9 +159,9 @@ export function TrendAnnotation({
         className="border-border/60 bg-card/40 space-y-1.5 rounded-md border p-3 motion-reduce:animate-none"
         aria-label={t("insights.trendAnnotation.pendingLabel")}
       >
-        <div className="bg-muted/60 h-2.5 w-11/12 animate-pulse motion-reduce:animate-none rounded" />
-        <div className="bg-muted/60 h-2.5 w-9/12 animate-pulse motion-reduce:animate-none rounded" />
-        <div className="bg-muted/60 h-2.5 w-7/12 animate-pulse motion-reduce:animate-none rounded" />
+        <Skeleton className="h-2.5 w-11/12 rounded" />
+        <Skeleton className="h-2.5 w-9/12 rounded" />
+        <Skeleton className="h-2.5 w-7/12 rounded" />
       </div>
     );
   }
@@ -289,9 +290,7 @@ export function TrendDescriptorCaption({
     queryKey: queryKeys.insightsTrendSeries(primaryType),
     queryFn: async () => {
       const to = new Date();
-      const from = new Date(
-        to.getTime() - DESCRIPTOR_WINDOW_DAYS * 86_400_000,
-      );
+      const from = new Date(to.getTime() - DESCRIPTOR_WINDOW_DAYS * 86_400_000);
       const params = new URLSearchParams({
         type: primaryType,
         sortBy: "measuredAt",
@@ -364,7 +363,8 @@ export function TrendDescriptorCaption({
   // copy defensively (should not happen for the legacy triple).
   const copy = isMood
     ? moodDescriptorCopy(descriptor)
-    : (numericDescriptorCopy(metric, descriptor) ?? moodDescriptorCopy(descriptor));
+    : (numericDescriptorCopy(metric, descriptor) ??
+      moodDescriptorCopy(descriptor));
 
   return (
     <TrendCaptionCard
diff --git a/src/components/layout/top-bar.tsx b/src/components/layout/top-bar.tsx
index 48109553d..956e27ee3 100644
--- a/src/components/layout/top-bar.tsx
+++ b/src/components/layout/top-bar.tsx
@@ -13,6 +13,7 @@ import {
 } from "lucide-react";
 import { Logo } from "@/components/ui/logo";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Skeleton } from "@/components/ui/skeleton";
 import Link from "next/link";
 import { useAuth, useLogout } from "@/hooks/use-auth";
 import { useTheme } from "@/components/providers";
@@ -75,7 +76,7 @@ export function TopBar() {
       {/* Mobile-only auth section (desktop uses sidebar user section) */}
       <div className="flex items-center gap-2 md:hidden">
         {isLoading ? (
-          <div className="bg-muted h-4 w-20 animate-pulse rounded motion-reduce:animate-none" />
+          <Skeleton className="bg-muted h-4 w-20 rounded" />
         ) : user ? (
           <DropdownMenu>
             <DropdownMenuTrigger
@@ -86,7 +87,7 @@ export function TopBar() {
               // v1.4.34 IW-G — keyboard users get a visible ring on
               // focus-visible. The previous `focus:outline-none` killed
               // the focus indicator without replacing it.
-              className="text-muted-foreground hover:text-foreground flex min-h-11 min-w-11 items-center gap-1.5 rounded-md px-2 py-1.5 text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50 focus-visible:ring-offset-2"
+              className="text-muted-foreground hover:text-foreground focus-visible:ring-ring/50 flex min-h-11 min-w-11 items-center gap-1.5 rounded-md px-2 py-1.5 text-sm transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none"
             >
               <Avatar className="size-7">
                 {avatarUrl && (
diff --git a/src/components/measurements/measurement-form.tsx b/src/components/measurements/measurement-form.tsx
index e7fdd7e71..e7705c7d6 100644
--- a/src/components/measurements/measurement-form.tsx
+++ b/src/components/measurements/measurement-form.tsx
@@ -121,7 +121,9 @@ export const ADD_TOKEN_ALIASES: Readonly<Record<string, string>> = {
  * page-level dispatcher and the F-1 contract test consume the same
  * resolver.
  */
-export function resolveAddToken(token: string | null | undefined): string | null {
+export function resolveAddToken(
+  token: string | null | undefined,
+): string | null {
   if (!token) return null;
   const aliased = ADD_TOKEN_ALIASES[token] ?? token;
   return MEASUREMENT_FORM_TYPE_VALUES.includes(aliased) ? aliased : null;
@@ -337,15 +339,11 @@ export function MeasurementForm({
             {t("common.cancel")}
           </Button>
         )}
-        <Button
-          type="submit"
-          form={formId}
-          disabled={loading}
-        >
+        <Button type="submit" form={formId} disabled={loading}>
           {loading ? (
-            <Loader2 className="mr-2 h-4 w-4 animate-spin motion-reduce:animate-none" />
+            <Loader2 className="h-4 w-4 animate-spin motion-reduce:animate-none" />
           ) : (
-            <Plus className="mr-2 h-4 w-4" />
+            <Plus className="h-4 w-4" />
           )}
           {t("common.save")}
         </Button>
diff --git a/src/components/measurements/measurement-list.tsx b/src/components/measurements/measurement-list.tsx
index 23b275644..1da18a82d 100644
--- a/src/components/measurements/measurement-list.tsx
+++ b/src/components/measurements/measurement-list.tsx
@@ -263,9 +263,7 @@ export function MeasurementList({
   const queryClient = useQueryClient();
   // v1.8.5 — when `lockedType` is set the list is pinned to that metric
   // and the type selector is hidden; the filter state seeds from it.
-  const [typeFilter, setTypeFilterRaw] = useState<string>(
-    lockedType ?? "ALL",
-  );
+  const [typeFilter, setTypeFilterRaw] = useState<string>(lockedType ?? "ALL");
   // v1.15.13 — management-list source filter + optional date range.
   // `ALL` clears the source filter; empty date strings clear the bound.
   const [sourceFilter, setSourceFilterRaw] = useState<string>("ALL");
@@ -280,9 +278,7 @@ export function MeasurementList({
   // v1.15.x audit — no "select across 200k rows"). The bulk-delete
   // payload is intersected with the painted page ids, so it is always
   // page-bounded (≤ PAGE_SIZE) and well under the server's 200 cap.
-  const [selectedIds, setSelectedIds] = useState<Set<string>>(
-    () => new Set(),
-  );
+  const [selectedIds, setSelectedIds] = useState<Set<string>>(() => new Set());
 
   // v1.4.37 W7c — set of dayKeys whose drill-down is currently
   // expanded. Each key maps to a one-shot query that lazy-fetches
@@ -312,9 +308,7 @@ export function MeasurementList({
   const editErrorDescriptor = editError ? editErrorId : undefined;
   // v1.4.27 R4 RC2 — Sheet-branch sticky-pinned footer slot.
   const editFormId = useId();
-  const [editFooterEl, setEditFooterEl] = useState<HTMLDivElement | null>(
-    null,
-  );
+  const [editFooterEl, setEditFooterEl] = useState<HTMLDivElement | null>(null);
 
   // v1.15.13 — every filter / page / sort change resets pagination to
   // page 1 AND clears the page-scoped selection (the rows it referred to
@@ -474,7 +468,9 @@ export function MeasurementList({
     onSuccess: async (deleted) => {
       await invalidateKeys(queryClient, measurementDependentKeys);
       clearSelection();
-      toast.success(t("measurements.bulkDeleteSuccess", { count: String(deleted) }));
+      toast.success(
+        t("measurements.bulkDeleteSuccess", { count: String(deleted) }),
+      );
     },
     onError: () => {
       toast.error(t("measurements.bulkDeleteError"));
@@ -577,9 +573,7 @@ export function MeasurementList({
   // path collapses to a single page. Per-sample lists continue to
   // paginate at PAGE_SIZE = 25.
   const totalPages =
-    data && !isDayGroupedFilter
-      ? Math.ceil(data.meta.total / PAGE_SIZE)
-      : 0;
+    data && !isDayGroupedFilter ? Math.ceil(data.meta.total / PAGE_SIZE) : 0;
 
   function startEdit(measurement: Measurement) {
     if (onEdit) {
@@ -787,15 +781,12 @@ export function MeasurementList({
               // v1.8.5 — a locked-type list has no "reset filter" path;
               // the metric is fixed by the route.
               typeFilter !== "ALL" && !lockedType ? (
-                <Button
-                  variant="outline"
-                  onClick={() => setTypeFilter("ALL")}
-                >
+                <Button variant="outline" onClick={() => setTypeFilter("ALL")}>
                   {t("measurements.emptyResetFilter")}
                 </Button>
               ) : onAddFirst ? (
                 <Button onClick={onAddFirst}>
-                  <Plus className="mr-1 h-4 w-4" />
+                  <Plus className="h-4 w-4" />
                   {t("measurements.emptyAddFirst")}
                 </Button>
               ) : undefined
@@ -876,7 +867,9 @@ export function MeasurementList({
                     const isSelected = selectedIds.has(m.id);
                     return (
                       <Fragment key={m.id}>
-                        <TableRow data-state={isSelected ? "selected" : undefined}>
+                        <TableRow
+                          data-state={isSelected ? "selected" : undefined}
+                        >
                           <TableCell className="pl-4">
                             {/* Grouped/synthetic rows aren't individually
                                 deletable, so they have no checkbox. */}
@@ -1049,7 +1042,7 @@ export function MeasurementList({
                   <div
                     key={m.id}
                     data-state={isSelected ? "selected" : undefined}
-                    className="bg-card border-border rounded-lg border p-3 data-[state=selected]:border-dracula-purple/60 data-[state=selected]:bg-dracula-purple/5"
+                    className="bg-card border-border data-[state=selected]:border-dracula-purple/60 data-[state=selected]:bg-dracula-purple/5 rounded-lg border p-3"
                   >
                     <div className="flex items-center justify-between">
                       <div className="flex items-center gap-2 overflow-hidden">
@@ -1274,115 +1267,110 @@ export function MeasurementList({
         title={t("measurements.editMeasurement")}
         footer={<div ref={setEditFooterEl} className="flex w-full" />}
       >
-          {editing && (
-            <form
-              id={editFormId}
-              onSubmit={submitEdit}
-              className="space-y-4"
-            >
-              <div className="flex items-center gap-1.5">
-                <Label className="shrink-0">{t("measurements.type")}</Label>
-                <span className="text-sm leading-none font-medium">
-                  {TYPE_LABEL_KEYS[editing.type]
-                    ? t(TYPE_LABEL_KEYS[editing.type])
-                    : editing.type}
+        {editing && (
+          <form id={editFormId} onSubmit={submitEdit} className="space-y-4">
+            <div className="flex items-center gap-1.5">
+              <Label className="shrink-0">{t("measurements.type")}</Label>
+              <span className="text-sm leading-none font-medium">
+                {TYPE_LABEL_KEYS[editing.type]
+                  ? t(TYPE_LABEL_KEYS[editing.type])
+                  : editing.type}
+              </span>
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="edit-value">
+                {t("measurements.valueWithUnit", { unit: editing.unit })}
+              </Label>
+              <Input
+                id="edit-value"
+                type="number"
+                enterKeyHint="next"
+                step="any"
+                value={editValue}
+                onChange={(e) => setEditValue(e.target.value)}
+                required
+                aria-required="true"
+                aria-invalid={!!editError || undefined}
+                aria-describedby={editErrorDescriptor}
+              />
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="edit-measuredAt">
+                {t("measurements.timestamp")}
+              </Label>
+              <DateTimeInput
+                id="edit-measuredAt"
+                value={editMeasuredAt}
+                onChange={(e) => setEditMeasuredAt(e.target.value)}
+                required
+                aria-required="true"
+                aria-invalid={!!editError || undefined}
+                aria-describedby={editErrorDescriptor}
+              />
+            </div>
+
+            <div className="space-y-2">
+              <div className="flex items-center justify-between gap-3">
+                <Label htmlFor="edit-notes">
+                  {t("measurements.notes")} ({t("common.optional")})
+                </Label>
+                <span className="text-muted-foreground text-xs">
+                  {editNotes.length}/{MAX_COMMENT_LENGTH}
                 </span>
               </div>
+              <Input
+                id="edit-notes"
+                value={editNotes}
+                onChange={(e) => setEditNotes(e.target.value)}
+                maxLength={MAX_COMMENT_LENGTH}
+                enterKeyHint="done"
+                autoCapitalize="sentences"
+              />
+            </div>
 
-              <div className="space-y-2">
-                <Label htmlFor="edit-value">
-                  {t("measurements.valueWithUnit", { unit: editing.unit })}
-                </Label>
-                <Input
-                  id="edit-value"
-                  type="number"
-                  enterKeyHint="next"
-                  step="any"
-                  value={editValue}
-                  onChange={(e) => setEditValue(e.target.value)}
-                  required
-                  aria-required="true"
-                  aria-invalid={!!editError || undefined}
-                  aria-describedby={editErrorDescriptor}
-                />
+            {editError && (
+              <div
+                id={editErrorId}
+                role="alert"
+                aria-live="assertive"
+                className="bg-destructive/10 text-destructive rounded-lg p-3 text-sm"
+              >
+                {editError}
               </div>
+            )}
 
-              <div className="space-y-2">
-                <Label htmlFor="edit-measuredAt">
-                  {t("measurements.timestamp")}
-                </Label>
-                <DateTimeInput
-                  id="edit-measuredAt"
-                  value={editMeasuredAt}
-                  onChange={(e) => setEditMeasuredAt(e.target.value)}
-                  required
-                  aria-required="true"
-                  aria-invalid={!!editError || undefined}
-                  aria-describedby={editErrorDescriptor}
-                />
-              </div>
+            {editFooterEl
+              ? createPortal(
+                  <div className="flex w-full items-center justify-between gap-2">
+                    <DropdownMenu>
+                      <DropdownMenuTrigger asChild>
+                        <Button
+                          type="button"
+                          variant="outline"
+                          size="icon"
+                          className="size-11"
+                          disabled={
+                            updateMutation.isPending || deleteMutation.isPending
+                          }
+                          aria-label={t("common.moreOptions")}
+                        >
+                          <MoreHorizontal className="h-4 w-4" />
+                        </Button>
+                      </DropdownMenuTrigger>
+                      <DropdownMenuContent align="start">
+                        <DropdownMenuItem
+                          variant="destructive"
+                          onClick={() => setEditDeleteDialogOpen(true)}
+                        >
+                          <Trash2 className="mr-2 h-4 w-4" />
+                          {t("common.delete")}
+                        </DropdownMenuItem>
+                      </DropdownMenuContent>
+                    </DropdownMenu>
 
-              <div className="space-y-2">
-                <div className="flex items-center justify-between gap-3">
-                  <Label htmlFor="edit-notes">
-                    {t("measurements.notes")} ({t("common.optional")})
-                  </Label>
-                  <span className="text-muted-foreground text-xs">
-                    {editNotes.length}/{MAX_COMMENT_LENGTH}
-                  </span>
-                </div>
-                <Input
-                  id="edit-notes"
-                  value={editNotes}
-                  onChange={(e) => setEditNotes(e.target.value)}
-                  maxLength={MAX_COMMENT_LENGTH}
-                  enterKeyHint="done"
-                  autoCapitalize="sentences"
-                />
-              </div>
-
-              {editError && (
-                <div
-                  id={editErrorId}
-                  role="alert"
-                  aria-live="assertive"
-                  className="bg-destructive/10 text-destructive rounded-lg p-3 text-sm"
-                >
-                  {editError}
-                </div>
-              )}
-
-              {editFooterEl
-                ? createPortal(
-                    <div className="flex w-full items-center justify-between gap-2">
-                      <DropdownMenu>
-                        <DropdownMenuTrigger asChild>
-                          <Button
-                            type="button"
-                            variant="outline"
-                            size="icon"
-                            className="size-11"
-                            disabled={
-                              updateMutation.isPending ||
-                              deleteMutation.isPending
-                            }
-                            aria-label={t("common.moreOptions")}
-                          >
-                            <MoreHorizontal className="h-4 w-4" />
-                          </Button>
-                        </DropdownMenuTrigger>
-                        <DropdownMenuContent align="start">
-                          <DropdownMenuItem
-                            variant="destructive"
-                            onClick={() => setEditDeleteDialogOpen(true)}
-                          >
-                            <Trash2 className="mr-2 h-4 w-4" />
-                            {t("common.delete")}
-                          </DropdownMenuItem>
-                        </DropdownMenuContent>
-                      </DropdownMenu>
-
-                      {/*
+                    {/*
                         v1.4.43 QoL (L7) — `[Cancel] [Save]` order is
                         iOS-first intentional per Apple HIG, which
                         puts the primary / confirmation action
@@ -1394,69 +1382,67 @@ export function MeasurementList({
                         refactor — fork a platform-specific shell
                         instead if Android becomes a real audience.
                       */}
-                      <div className="flex items-center gap-2">
-                        <Button
-                          type="button"
-                          variant="outline"
-                          onClick={closeEdit}
-                          disabled={
-                            updateMutation.isPending ||
-                            deleteMutation.isPending
-                          }
-                        >
-                          {t("common.cancel")}
-                        </Button>
-                        <Button
-                          type="submit"
-                          form={editFormId}
-                          disabled={
-                            updateMutation.isPending ||
-                            deleteMutation.isPending
-                          }
-                        >
-                          {updateMutation.isPending ? (
-                            <Loader2 className="mr-2 h-4 w-4 animate-spin motion-reduce:animate-none" />
-                          ) : null}
-                          {t("common.save")}
-                        </Button>
-                      </div>
-                    </div>,
-                    editFooterEl,
-                  )
-                : null}
+                    <div className="flex items-center gap-2">
+                      <Button
+                        type="button"
+                        variant="outline"
+                        onClick={closeEdit}
+                        disabled={
+                          updateMutation.isPending || deleteMutation.isPending
+                        }
+                      >
+                        {t("common.cancel")}
+                      </Button>
+                      <Button
+                        type="submit"
+                        form={editFormId}
+                        disabled={
+                          updateMutation.isPending || deleteMutation.isPending
+                        }
+                      >
+                        {updateMutation.isPending ? (
+                          <Loader2 className="h-4 w-4 animate-spin motion-reduce:animate-none" />
+                        ) : null}
+                        {t("common.save")}
+                      </Button>
+                    </div>
+                  </div>,
+                  editFooterEl,
+                )
+              : null}
 
-              <AlertDialog
-                open={editDeleteDialogOpen}
-                onOpenChange={setEditDeleteDialogOpen}
-              >
-                <AlertDialogContent>
-                  <AlertDialogHeader>
-                    <AlertDialogTitle>
-                      {t("measurements.deleteConfirmTitle")}
-                    </AlertDialogTitle>
-                    <AlertDialogDescription>
-                      {t("measurements.deleteConfirmDescription")}
-                    </AlertDialogDescription>
-                  </AlertDialogHeader>
-                  <AlertDialogFooter>
-                    <AlertDialogCancel disabled={deleteMutation.isPending}>
-                      {t("common.cancel")}
-                    </AlertDialogCancel>
-                    <AlertDialogAction
-                      variant="destructive"
-                      onClick={deleteEditingMeasurement}
-                      disabled={deleteMutation.isPending}
-                    >
-                      {deleteMutation.isPending ? (
-                        <Loader2 className="mr-2 h-4 w-4 animate-spin motion-reduce:animate-none" />
-                      ) : null}
-                      {t("common.delete")}
-                    </AlertDialogAction>
-                  </AlertDialogFooter>
-                </AlertDialogContent>
-              </AlertDialog>
-            </form>
-          )}
+            <AlertDialog
+              open={editDeleteDialogOpen}
+              onOpenChange={setEditDeleteDialogOpen}
+            >
+              <AlertDialogContent>
+                <AlertDialogHeader>
+                  <AlertDialogTitle>
+                    {t("measurements.deleteConfirmTitle")}
+                  </AlertDialogTitle>
+                  <AlertDialogDescription>
+                    {t("measurements.deleteConfirmDescription")}
+                  </AlertDialogDescription>
+                </AlertDialogHeader>
+                <AlertDialogFooter>
+                  <AlertDialogCancel disabled={deleteMutation.isPending}>
+                    {t("common.cancel")}
+                  </AlertDialogCancel>
+                  <AlertDialogAction
+                    variant="destructive"
+                    onClick={deleteEditingMeasurement}
+                    disabled={deleteMutation.isPending}
+                  >
+                    {deleteMutation.isPending ? (
+                      <Loader2 className="mr-2 h-4 w-4 animate-spin motion-reduce:animate-none" />
+                    ) : null}
+                    {t("common.delete")}
+                  </AlertDialogAction>
+                </AlertDialogFooter>
+              </AlertDialogContent>
+            </AlertDialog>
+          </form>
+        )}
       </ResponsiveSheet>
     </>
   );
@@ -1511,7 +1497,7 @@ function DayDrillDown({
   }
   if (error) {
     return (
-      <div className="text-destructive py-2 text-xs">
+      <div className="text-destructive py-2 text-sm">
         {t("measurements.loadError")}
       </div>
     );
@@ -1536,10 +1522,14 @@ function DayDrillDown({
             className="flex items-center justify-between gap-3 px-2 py-1 text-xs"
           >
             <span className="text-muted-foreground tabular-nums">
-              {isSleep ? sleepStageLabel(s.sleepStage, t) : formatDateTime(s.measuredAt)}
+              {isSleep
+                ? sleepStageLabel(s.sleepStage, t)
+                : formatDateTime(s.measuredAt)}
             </span>
             <span className="font-medium tabular-nums">
-              {isSleep ? formatSleepMinutes(s.value, locale) : `${s.value} ${unit}`}
+              {isSleep
+                ? formatSleepMinutes(s.value, locale)
+                : `${s.value} ${unit}`}
             </span>
           </div>
         ))}
@@ -1554,10 +1544,14 @@ function DayDrillDown({
           className="flex items-center justify-between gap-2 px-1 py-1 text-xs"
         >
           <span className="text-muted-foreground tabular-nums">
-            {isSleep ? sleepStageLabel(s.sleepStage, t) : formatDateTime(s.measuredAt)}
+            {isSleep
+              ? sleepStageLabel(s.sleepStage, t)
+              : formatDateTime(s.measuredAt)}
           </span>
           <span className="font-medium tabular-nums">
-            {isSleep ? formatSleepMinutes(s.value, locale) : `${s.value} ${unit}`}
+            {isSleep
+              ? formatSleepMinutes(s.value, locale)
+              : `${s.value} ${unit}`}
           </span>
         </div>
       ))}
@@ -1590,4 +1584,3 @@ function SleepNightCaption({ m }: { m: Measurement }) {
     </span>
   );
 }
-
diff --git a/src/components/medications/ResearchModeAcknowledgmentDialog.tsx b/src/components/medications/ResearchModeAcknowledgmentDialog.tsx
index 61b2e380c..f74419148 100644
--- a/src/components/medications/ResearchModeAcknowledgmentDialog.tsx
+++ b/src/components/medications/ResearchModeAcknowledgmentDialog.tsx
@@ -85,9 +85,7 @@ export function ResearchModeAcknowledgmentDialog({
       const json = await res.json().catch(() => ({}));
       if (!res.ok) {
         const code =
-          typeof json?.error === "string"
-            ? json.error
-            : `http-${res.status}`;
+          typeof json?.error === "string" ? json.error : `http-${res.status}`;
         throw new Error(code);
       }
       return json?.data ?? null;
@@ -137,7 +135,7 @@ export function ResearchModeAcknowledgmentDialog({
       description={t("medications.researchMode.dialog.intro")}
       className="sm:max-w-xl"
       footer={
-        <div className="flex w-full gap-2 sm:justify-end sm:gap-2">
+        <>
           <Button
             variant="outline"
             onClick={handleCancel}
@@ -152,118 +150,118 @@ export function ResearchModeAcknowledgmentDialog({
             data-slot="research-mode-acknowledge"
           >
             {mutation.isPending ? (
-              <Loader2 className="mr-2 h-4 w-4 animate-spin motion-reduce:animate-none" />
+              <Loader2 className="h-4 w-4 animate-spin motion-reduce:animate-none" />
             ) : null}
             {t("medications.researchMode.dialog.acknowledgeCta")}
           </Button>
-        </div>
+        </>
       }
     >
-        <div
-          data-slot="research-mode-acknowledgment-dialog"
-          className="space-y-4 text-sm"
+      <div
+        data-slot="research-mode-acknowledgment-dialog"
+        className="space-y-4 text-sm"
+      >
+        <section
+          aria-labelledby="research-mode-what-it-is"
+          data-slot="research-mode-what-it-is"
         >
-          <section
-            aria-labelledby="research-mode-what-it-is"
-            data-slot="research-mode-what-it-is"
+          <h3
+            id="research-mode-what-it-is"
+            className="text-foreground font-medium"
           >
-            <h3
-              id="research-mode-what-it-is"
-              className="text-foreground font-medium"
-            >
-              {t("medications.researchMode.dialog.whatItIsHeader")}
-            </h3>
-            <p className="text-muted-foreground mt-1">
-              {t("medications.researchMode.dialog.whatItIs")}
-            </p>
-          </section>
+            {t("medications.researchMode.dialog.whatItIsHeader")}
+          </h3>
+          <p className="text-muted-foreground mt-1">
+            {t("medications.researchMode.dialog.whatItIs")}
+          </p>
+        </section>
 
-          <section
-            aria-labelledby="research-mode-what-it-isnt"
-            data-slot="research-mode-what-it-isnt"
+        <section
+          aria-labelledby="research-mode-what-it-isnt"
+          data-slot="research-mode-what-it-isnt"
+        >
+          <h3
+            id="research-mode-what-it-isnt"
+            className="text-foreground font-medium"
           >
-            <h3
-              id="research-mode-what-it-isnt"
-              className="text-foreground font-medium"
-            >
-              {t("medications.researchMode.dialog.whatItIsntHeader")}
-            </h3>
-            <p className="text-muted-foreground mt-1">
-              {t("medications.researchMode.dialog.whatItIsnt")}
-            </p>
-          </section>
+            {t("medications.researchMode.dialog.whatItIsntHeader")}
+          </h3>
+          <p className="text-muted-foreground mt-1">
+            {t("medications.researchMode.dialog.whatItIsnt")}
+          </p>
+        </section>
 
-          <section
-            aria-labelledby="research-mode-why-estimate"
-            data-slot="research-mode-why-estimate"
+        <section
+          aria-labelledby="research-mode-why-estimate"
+          data-slot="research-mode-why-estimate"
+        >
+          <h3
+            id="research-mode-why-estimate"
+            className="text-foreground font-medium"
           >
-            <h3
-              id="research-mode-why-estimate"
-              className="text-foreground font-medium"
-            >
-              {t("medications.researchMode.dialog.whyEstimateHeader")}
-            </h3>
-            <p className="text-muted-foreground mt-1">
-              {t("medications.researchMode.dialog.whyEstimate")}
-            </p>
-          </section>
+            {t("medications.researchMode.dialog.whyEstimateHeader")}
+          </h3>
+          <p className="text-muted-foreground mt-1">
+            {t("medications.researchMode.dialog.whyEstimate")}
+          </p>
+        </section>
 
-          <section
-            aria-labelledby="research-mode-mdr"
-            data-slot="research-mode-mdr-boundary"
-            className="bg-warning/10 border-warning/30 rounded-md border-l-4 px-3 py-2"
+        <section
+          aria-labelledby="research-mode-mdr"
+          data-slot="research-mode-mdr-boundary"
+          className="bg-warning/10 border-warning/30 rounded-md border-l-4 px-3 py-2"
+        >
+          <h3
+            id="research-mode-mdr"
+            className="text-foreground flex items-center gap-2 font-medium"
           >
-            <h3
-              id="research-mode-mdr"
-              className="text-foreground flex items-center gap-2 font-medium"
-            >
-              <AlertTriangle
-                className="text-warning h-4 w-4 shrink-0"
-                aria-hidden="true"
-              />
-              {t("medications.researchMode.dialog.mdrBoundaryHeader")}
-            </h3>
-            <p className="text-foreground/85 mt-1">
-              {t("medications.researchMode.dialog.mdrBoundary")}
-            </p>
-          </section>
+            <AlertTriangle
+              className="text-warning h-4 w-4 shrink-0"
+              aria-hidden="true"
+            />
+            {t("medications.researchMode.dialog.mdrBoundaryHeader")}
+          </h3>
+          <p className="text-foreground/85 mt-1">
+            {t("medications.researchMode.dialog.mdrBoundary")}
+          </p>
+        </section>
 
-          <section
-            aria-labelledby="research-mode-citations"
-            data-slot="research-mode-citations"
+        <section
+          aria-labelledby="research-mode-citations"
+          data-slot="research-mode-citations"
+        >
+          <h3
+            id="research-mode-citations"
+            className="text-foreground font-medium"
           >
-            <h3
-              id="research-mode-citations"
-              className="text-foreground font-medium"
-            >
-              {t("medications.researchMode.dialog.citationsHeader")}
-            </h3>
-            <p className="text-muted-foreground mt-1">
-              {t("medications.researchMode.dialog.citations")}
-            </p>
-          </section>
+            {t("medications.researchMode.dialog.citationsHeader")}
+          </h3>
+          <p className="text-muted-foreground mt-1">
+            {t("medications.researchMode.dialog.citations")}
+          </p>
+        </section>
 
-          {currentDisclaimerVersion && (
-            <p
-              className="text-muted-foreground text-xs italic"
-              data-slot="research-mode-version"
-            >
-              {t("medications.researchMode.dialog.versionLine", {
-                version: currentDisclaimerVersion,
-              })}
-            </p>
-          )}
+        {currentDisclaimerVersion && (
+          <p
+            className="text-muted-foreground text-xs italic"
+            data-slot="research-mode-version"
+          >
+            {t("medications.researchMode.dialog.versionLine", {
+              version: currentDisclaimerVersion,
+            })}
+          </p>
+        )}
 
-          {errorMessage && (
-            <p
-              role="alert"
-              className="text-destructive text-sm"
-              data-slot="research-mode-error"
-            >
-              {errorMessage}
-            </p>
-          )}
-        </div>
+        {errorMessage && (
+          <p
+            role="alert"
+            className="text-destructive text-sm"
+            data-slot="research-mode-error"
+          >
+            {errorMessage}
+          </p>
+        )}
+      </div>
     </ResponsiveSheet>
   );
 }
diff --git a/src/components/medications/SideEffectsSection.tsx b/src/components/medications/SideEffectsSection.tsx
index bcf14ff3a..7dc75806c 100644
--- a/src/components/medications/SideEffectsSection.tsx
+++ b/src/components/medications/SideEffectsSection.tsx
@@ -251,7 +251,7 @@ export function SideEffectsSection({ medicationId }: SideEffectsSectionProps) {
           setOpen(true);
         }}
       >
-        <Plus className="mr-1.5 h-3.5 w-3.5" />
+        <Plus className="h-3.5 w-3.5" />
         {t("medications.sideEffects.addCta")}
       </Button>
     </>
@@ -512,7 +512,7 @@ export function SideEffectsSection({ medicationId }: SideEffectsSectionProps) {
                   disabled={createMutation.isPending}
                 >
                   {createMutation.isPending && (
-                    <Loader2 className="mr-1.5 h-3.5 w-3.5 animate-spin motion-reduce:animate-none" />
+                    <Loader2 className="h-3.5 w-3.5 animate-spin motion-reduce:animate-none" />
                   )}
                   {t("medications.sideEffects.submitCta")}
                 </Button>
diff --git a/src/components/medications/card-parts/medication-intake-actions.tsx b/src/components/medications/card-parts/medication-intake-actions.tsx
index 0cf2fc6ca..bb7dfba5d 100644
--- a/src/components/medications/card-parts/medication-intake-actions.tsx
+++ b/src/components/medications/card-parts/medication-intake-actions.tsx
@@ -36,9 +36,9 @@ export function MedicationIntakeActions({
         disabled={!!intakeLoading}
       >
         {intakeLoading === "take" ? (
-          <Loader2 className="mr-1 h-4 w-4 animate-spin motion-reduce:animate-none" />
+          <Loader2 className="h-4 w-4 animate-spin motion-reduce:animate-none" />
         ) : (
-          <Check className="mr-1 h-4 w-4" />
+          <Check className="h-4 w-4" />
         )}
         {t("medications.taken")}
       </Button>
@@ -49,9 +49,9 @@ export function MedicationIntakeActions({
         disabled={!!intakeLoading}
       >
         {intakeLoading === "skip" ? (
-          <Loader2 className="mr-1 h-4 w-4 animate-spin motion-reduce:animate-none" />
+          <Loader2 className="h-4 w-4 animate-spin motion-reduce:animate-none" />
         ) : (
-          <SkipForward className="mr-1 h-4 w-4" />
+          <SkipForward className="h-4 w-4" />
         )}
         {t("medications.skipped")}
       </Button>
diff --git a/src/components/medications/detail/MedicationDetailTabs.tsx b/src/components/medications/detail/MedicationDetailTabs.tsx
index 886b52945..d0bf63541 100644
--- a/src/components/medications/detail/MedicationDetailTabs.tsx
+++ b/src/components/medications/detail/MedicationDetailTabs.tsx
@@ -71,9 +71,7 @@ import { SideEffectsSection } from "@/components/medications/SideEffectsSection"
 import { ChartSkeleton } from "@/components/charts/chart-skeleton";
 import { estimateRunwayDays } from "@/components/medications/detail/supply-runway";
 import { MedicationWizardDialog } from "@/components/medications/wizard/MedicationWizardDialog";
-import {
-  parseScheduleRecurrence,
-} from "@/lib/medication-schedule";
+import { parseScheduleRecurrence } from "@/lib/medication-schedule";
 import { useQuery } from "@tanstack/react-query";
 import { queryKeys } from "@/lib/query-keys";
 import { useTranslations, useFormatters } from "@/lib/i18n/context";
@@ -234,8 +232,7 @@ export function MedicationDetailTabs({
   // medications, so a stale `?tab=injektion` deep-link falls back to the
   // landing tab instead of rendering an empty surface.
   const availableTabs = useMemo<TabSlug[]>(
-    () =>
-      TAB_SLUGS.filter((slug) => slug !== "injektion" || isInjectable),
+    () => TAB_SLUGS.filter((slug) => slug !== "injektion" || isInjectable),
     [isInjectable],
   );
 
@@ -322,9 +319,7 @@ export function MedicationDetailTabs({
     staleTime: 30_000,
   });
 
-  const inventoryItems = Array.isArray(inventory?.items)
-    ? inventory.items
-    : [];
+  const inventoryItems = Array.isArray(inventory?.items) ? inventory.items : [];
   const liveItems = inventoryItems.filter((i) => i.state !== "USED_UP");
   const dosesRemaining = liveItems.reduce(
     (sum, i) => sum + i.dosesRemaining,
@@ -337,7 +332,7 @@ export function MedicationDetailTabs({
     <div className="space-y-6" data-slot="medication-detail-page">
       <Button variant="ghost" size="sm" className="-ml-2 w-fit" asChild>
         <Link href="/medications">
-          <ArrowLeft aria-hidden="true" className="mr-1 size-4" />
+          <ArrowLeft aria-hidden="true" className="size-4" />
           {t("medications.back")}
         </Link>
       </Button>
@@ -587,9 +582,7 @@ export function MedicationDetailTabs({
                 <DoseStrengthCurve medicationId={id} />
               </div>
             )}
-            {!isGlp1 && (
-              <DoseStrengthCurve medicationId={id} />
-            )}
+            {!isGlp1 && <DoseStrengthCurve medicationId={id} />}
           </TabsContent>
         )}
 
diff --git a/src/components/medications/dose-history-add-dialog.tsx b/src/components/medications/dose-history-add-dialog.tsx
index a5390dd6e..b758d0e5e 100644
--- a/src/components/medications/dose-history-add-dialog.tsx
+++ b/src/components/medications/dose-history-add-dialog.tsx
@@ -35,10 +35,7 @@ import { Label } from "@/components/ui/label";
 import { Input } from "@/components/ui/input";
 import { Switch } from "@/components/ui/switch";
 import { useTranslations } from "@/lib/i18n/context";
-import {
-  invalidateKeys,
-  medicationDependentKeys,
-} from "@/lib/query-keys";
+import { invalidateKeys, medicationDependentKeys } from "@/lib/query-keys";
 import type { QueryKey } from "@tanstack/react-query";
 import type { LedgerSchedule } from "@/components/medications/dose-history-ledger";
 
@@ -187,7 +184,10 @@ export function LedgerAddDialog({
           { name: medicationName },
         ),
       );
-      await invalidateKeys(queryClient, [...medicationDependentKeys, ledgerKey]);
+      await invalidateKeys(queryClient, [
+        ...medicationDependentKeys,
+        ledgerKey,
+      ]);
       setNudgeOpen(false);
       onOpenChange(false);
     } catch {
@@ -220,7 +220,7 @@ export function LedgerAddDialog({
         </DialogHeader>
 
         <div className="space-y-3">
-          <div className="space-y-1">
+          <div className="space-y-2">
             <Label htmlFor="ledger-add-taken-at">
               {t("medications.detail.verlauf.addDialog.takenAtLabel")}
             </Label>
@@ -277,7 +277,7 @@ export function LedgerAddDialog({
             data-slot="ledger-add-submit"
           >
             {busy && (
-              <Loader2 className="mr-2 h-4 w-4 animate-spin motion-reduce:animate-none" />
+              <Loader2 className="h-4 w-4 animate-spin motion-reduce:animate-none" />
             )}
             {t("medications.detail.verlauf.addDialog.submit")}
           </Button>
@@ -317,7 +317,7 @@ export function LedgerAddDialog({
                   data-slot="ledger-add-nudge-pin"
                 >
                   {busy && (
-                    <Loader2 className="mr-2 h-4 w-4 animate-spin motion-reduce:animate-none" />
+                    <Loader2 className="h-4 w-4 animate-spin motion-reduce:animate-none" />
                   )}
                   {t("medications.detail.verlauf.nudge.pin")}
                 </Button>
diff --git a/src/components/medications/intake-edit-dialog.tsx b/src/components/medications/intake-edit-dialog.tsx
index ee0e389c9..5e4b77b27 100644
--- a/src/components/medications/intake-edit-dialog.tsx
+++ b/src/components/medications/intake-edit-dialog.tsx
@@ -163,7 +163,7 @@ function IntakeEditDialogBody({
           </DialogTitle>
         </DialogHeader>
         <div className="space-y-3">
-          <div className="space-y-1">
+          <div className="space-y-2">
             <Label htmlFor="intake-edit-taken-at">
               {t("medications.detail.intake.edit.takenAtLabel")}
             </Label>
@@ -220,7 +220,7 @@ function IntakeEditDialogBody({
             aria-busy={busy || undefined}
           >
             {busy && (
-              <Loader2 className="mr-2 h-4 w-4 animate-spin motion-reduce:animate-none" />
+              <Loader2 className="h-4 w-4 animate-spin motion-reduce:animate-none" />
             )}
             {t("medications.detail.intake.edit.save")}
           </Button>
diff --git a/src/components/medications/intake-import-dialog.tsx b/src/components/medications/intake-import-dialog.tsx
index 41271a4ef..cfc0bb8a7 100644
--- a/src/components/medications/intake-import-dialog.tsx
+++ b/src/components/medications/intake-import-dialog.tsx
@@ -156,7 +156,7 @@ export function IntakeImportDialog({
           <p className="text-muted-foreground text-sm">
             {t("medications.importDescription")}
           </p>
-          <div className="space-y-1.5">
+          <div className="space-y-2">
             <Label htmlFor="intake-import-file" className="text-xs font-medium">
               {t("medications.importUploadFile")}
             </Label>
@@ -236,9 +236,9 @@ export function IntakeImportDialog({
                 className="min-h-11 sm:min-h-9"
               >
                 {importing ? (
-                  <Loader2 className="mr-2 h-4 w-4 animate-spin motion-reduce:animate-none" />
+                  <Loader2 className="h-4 w-4 animate-spin motion-reduce:animate-none" />
                 ) : (
-                  <Upload className="mr-2 h-4 w-4" />
+                  <Upload className="h-4 w-4" />
                 )}
                 {t("common.import")}
               </Button>
diff --git a/src/components/medications/log-injection-site-dialog.tsx b/src/components/medications/log-injection-site-dialog.tsx
index 132983fc2..39283d577 100644
--- a/src/components/medications/log-injection-site-dialog.tsx
+++ b/src/components/medications/log-injection-site-dialog.tsx
@@ -174,7 +174,7 @@ export function LogInjectionSiteDialog({
             }}
           >
             {submitting ? (
-              <Loader2 className="mr-2 h-4 w-4 animate-spin motion-reduce:animate-none" />
+              <Loader2 className="h-4 w-4 animate-spin motion-reduce:animate-none" />
             ) : null}
             {t("medications.logInjectionSiteConfirm")}
           </Button>
diff --git a/src/components/medications/log-intake-dialog.tsx b/src/components/medications/log-intake-dialog.tsx
index b94fdbd30..aa278ac4e 100644
--- a/src/components/medications/log-intake-dialog.tsx
+++ b/src/components/medications/log-intake-dialog.tsx
@@ -189,7 +189,7 @@ export function LogIntakeDialog({
           </p>
         ) : (
           <div className="space-y-3">
-            <div className="space-y-1">
+            <div className="space-y-2">
               <Label htmlFor="log-intake-medication">
                 {t("medications.logIntake.medicationLabel")}
               </Label>
@@ -207,7 +207,7 @@ export function LogIntakeDialog({
             </div>
 
             {slotTimes.length > 0 && (
-              <div className="space-y-1">
+              <div className="space-y-2">
                 <Label htmlFor="log-intake-slot">
                   {t("medications.logIntake.slotLabel")}
                 </Label>
@@ -228,7 +228,7 @@ export function LogIntakeDialog({
               </div>
             )}
 
-            <div className="space-y-1">
+            <div className="space-y-2">
               <Label htmlFor="log-intake-taken-at">
                 {t("medications.logIntake.takenAtLabel")}
               </Label>
@@ -275,7 +275,7 @@ export function LogIntakeDialog({
             aria-busy={busy || undefined}
           >
             {busy && (
-              <Loader2 className="mr-2 h-4 w-4 animate-spin motion-reduce:animate-none" />
+              <Loader2 className="h-4 w-4 animate-spin motion-reduce:animate-none" />
             )}
             {t("medications.logIntake.submit")}
           </Button>
diff --git a/src/components/medications/scheduling/CourseWindowRow.tsx b/src/components/medications/scheduling/CourseWindowRow.tsx
index ea62fe000..aaad105bd 100644
--- a/src/components/medications/scheduling/CourseWindowRow.tsx
+++ b/src/components/medications/scheduling/CourseWindowRow.tsx
@@ -131,7 +131,7 @@ export function CourseWindowRow({
     <div className="space-y-3" data-slot="course-window-row">
       <div className="flex flex-col gap-3 sm:flex-row sm:items-end">
         {/* startsOn */}
-        <div className="flex-1 space-y-1.5">
+        <div className="flex-1 space-y-2">
           <Label htmlFor={startId} className="text-sm">
             {t(`${i18nPrefix}.startsOn.label`)}
           </Label>
@@ -148,7 +148,7 @@ export function CourseWindowRow({
         </div>
 
         {/* endsOn */}
-        <div className="flex-1 space-y-1.5">
+        <div className="flex-1 space-y-2">
           <Label htmlFor={endId} className="text-sm">
             {t(`${i18nPrefix}.endsOn.label`)}
           </Label>
@@ -156,9 +156,7 @@ export function CourseWindowRow({
             id={endId}
             type="date"
             value={endsIso}
-            disabled={
-              disabled || noEndDate || lockEndsToStart
-            }
+            disabled={disabled || noEndDate || lockEndsToStart}
             readOnly={lockEndsToStart}
             onChange={(e) => onEndsChange(e.target.value)}
             className="h-11 w-full"
@@ -199,7 +197,7 @@ export function CourseWindowRow({
 
       {!valid && (
         <p
-          className="text-destructive text-xs"
+          className="text-destructive text-sm"
           role="alert"
           data-slot="course-window-error"
         >
diff --git a/src/components/medications/scheduling/DoseWindowEditor.tsx b/src/components/medications/scheduling/DoseWindowEditor.tsx
index 0bc13f4bb..b3553d379 100644
--- a/src/components/medications/scheduling/DoseWindowEditor.tsx
+++ b/src/components/medications/scheduling/DoseWindowEditor.tsx
@@ -68,10 +68,7 @@ export function DoseWindowEditor({
   const generatedId = useId();
   const prefix = idPrefix ?? generatedId;
 
-  const rows = useMemo(
-    () => buildRows(timesOfDay, value),
-    [timesOfDay, value],
-  );
+  const rows = useMemo(() => buildRows(timesOfDay, value), [timesOfDay, value]);
 
   // Rebuild the persisted set from the next row state and bubble it up.
   const emit = useCallback(
@@ -84,9 +81,7 @@ export function DoseWindowEditor({
   const setRow = useCallback(
     (timeOfDay: string, patch: Partial<DoseWindowRow>) => {
       emit(
-        rows.map((r) =>
-          r.timeOfDay === timeOfDay ? { ...r, ...patch } : r,
-        ),
+        rows.map((r) => (r.timeOfDay === timeOfDay ? { ...r, ...patch } : r)),
       );
     },
     [emit, rows],
@@ -201,7 +196,7 @@ export function DoseWindowEditor({
                   isValidHhmm(row.end) &&
                   !ordered ? (
                     <p
-                      className="text-destructive text-xs"
+                      className="text-destructive text-sm"
                       role="alert"
                       data-slot="dose-window-error"
                     >
diff --git a/src/components/medications/scheduling/TimesOfDayChips.tsx b/src/components/medications/scheduling/TimesOfDayChips.tsx
index d2f200ce1..a81b60371 100644
--- a/src/components/medications/scheduling/TimesOfDayChips.tsx
+++ b/src/components/medications/scheduling/TimesOfDayChips.tsx
@@ -273,7 +273,7 @@ export function TimesOfDayChips({
           aria-label={t(`${i18nPrefix}.add`)}
           data-slot="times-of-day-add"
         >
-          <Plus className="mr-1 h-4 w-4" aria-hidden="true" />
+          <Plus className="h-4 w-4" aria-hidden="true" />
           {t(`${i18nPrefix}.add`)}
         </Button>
       </div>
diff --git a/src/components/medications/sections/data-portability-row.tsx b/src/components/medications/sections/data-portability-row.tsx
index 93fd04a15..e35ff9fe5 100644
--- a/src/components/medications/sections/data-portability-row.tsx
+++ b/src/components/medications/sections/data-portability-row.tsx
@@ -156,7 +156,7 @@ export function DataPortabilityRow({
           {t("medications.detail.advanced.dataPortability.export.button")}
         </Button>
         {error && (
-          <p role="alert" className="text-destructive text-xs">
+          <p role="alert" className="text-destructive text-sm">
             {error}
           </p>
         )}
diff --git a/src/components/medications/sections/phase-config-sheet.tsx b/src/components/medications/sections/phase-config-sheet.tsx
index 553a03fd4..b88786888 100644
--- a/src/components/medications/sections/phase-config-sheet.tsx
+++ b/src/components/medications/sections/phase-config-sheet.tsx
@@ -311,7 +311,7 @@ function PhaseConfigForm({
           {saving && (
             <Loader2
               aria-hidden="true"
-              className="mr-2 h-4 w-4 animate-spin motion-reduce:animate-none"
+              className="h-4 w-4 animate-spin motion-reduce:animate-none"
             />
           )}
           {t("common.save")}
diff --git a/src/components/medications/wizard/MedicationWizardDialog.tsx b/src/components/medications/wizard/MedicationWizardDialog.tsx
index 236d18b28..154f0be94 100644
--- a/src/components/medications/wizard/MedicationWizardDialog.tsx
+++ b/src/components/medications/wizard/MedicationWizardDialog.tsx
@@ -27,13 +27,7 @@
  * dialog reaches a new locale.
  */
 
-import {
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useQueryClient } from "@tanstack/react-query";
 import { useRouter } from "next/navigation";
 import { toast } from "sonner";
@@ -189,15 +183,17 @@ function WizardDialogShell({
   // payload validates every gate, so the ceiling is the whole path.
   const reachableUntil = useMemo(
     () =>
-      Math.max(fallbackIndex, firstInvalidIndex(payload, stepList, fallbackIndex)),
+      Math.max(
+        fallbackIndex,
+        firstInvalidIndex(payload, stepList, fallbackIndex),
+      ),
     [payload, stepList, fallbackIndex],
   );
   // Jump-to-last is enabled only when the WHOLE path validates — i.e.
   // every step from the first slot onward passes its gate, so a single
   // tap can land the user on the review step without stranding them
   // behind an unmet requirement.
-  const lastReachable =
-    firstInvalidIndex(payload, stepList, 0) >= totalSteps;
+  const lastReachable = firstInvalidIndex(payload, stepList, 0) >= totalSteps;
 
   const canContinue = useMemo(
     () => validateStep(payload, step),
@@ -345,16 +341,7 @@ function WizardDialogShell({
     } finally {
       setSubmitting(false);
     }
-  }, [
-    initial,
-    mode,
-    onOpenChange,
-    onSuccess,
-    payload,
-    queryClient,
-    router,
-    t,
-  ]);
+  }, [initial, mode, onOpenChange, onSuccess, payload, queryClient, router, t]);
 
   const Icon = STEP_ICONS[step];
 
@@ -445,7 +432,7 @@ function WizardDialogShell({
                 className="h-11"
               >
                 {submitting && (
-                  <Loader2 className="mr-2 h-4 w-4 animate-spin motion-reduce:animate-none" />
+                  <Loader2 className="h-4 w-4 animate-spin motion-reduce:animate-none" />
                 )}
                 {primaryCtaLabel}
               </Button>
@@ -495,10 +482,7 @@ function WizardDialogShell({
                   data-slot="wizard-nl-button"
                   aria-label={t("medications.wizard.nl.button")}
                 >
-                  <Sparkles
-                    className="h-3.5 w-3.5"
-                    aria-hidden="true"
-                  />
+                  <Sparkles className="h-3.5 w-3.5" aria-hidden="true" />
                   {t("medications.wizard.nl.button")}
                 </Button>
               </div>
@@ -515,7 +499,7 @@ function WizardDialogShell({
               snaps the step. The slide proposed in D-2 was stripped. */}
           <div
             ref={bodyRef}
-            className="flex flex-col gap-6 p-4 pr-12 sm:gap-8 sm:p-6 sm:pr-14 animate-in fade-in-0 duration-200 motion-reduce:animate-none"
+            className="animate-in fade-in-0 flex flex-col gap-6 p-4 pr-12 duration-200 motion-reduce:animate-none sm:gap-8 sm:p-6 sm:pr-14"
             data-slot="wizard-step-body"
             key={step}
           >
@@ -545,13 +529,11 @@ function WizardDialogShell({
                 <h2
                   ref={stepTitleRef}
                   tabIndex={-1}
-                  className="text-foreground text-base font-semibold leading-tight tracking-tight focus-visible:outline-none"
+                  className="text-foreground text-base leading-tight font-semibold tracking-tight focus-visible:outline-none"
                 >
                   {stepTitle}
                 </h2>
-                <p className="text-muted-foreground text-sm">
-                  {stepSubline}
-                </p>
+                <p className="text-muted-foreground text-sm">{stepSubline}</p>
                 {/* v1.8.6 W4b — muted "what's next" hint so the user
                     knows what the Next tap leads to (or, on the final
                     slot, that Next saves). */}
@@ -582,10 +564,7 @@ function WizardDialogShell({
                 <Step4Window payload={payload} applyPartial={applyPartial} />
               )}
               {step === 5 && (
-                <Step5Cadence
-                  payload={payload}
-                  applyPartial={applyPartial}
-                />
+                <Step5Cadence payload={payload} applyPartial={applyPartial} />
               )}
               {step === 6 && (
                 <Step6SubCadence
@@ -594,10 +573,7 @@ function WizardDialogShell({
                 />
               )}
               {step === 7 && (
-                <Step7Times
-                  payload={payload}
-                  applyPartial={applyPartial}
-                />
+                <Step7Times payload={payload} applyPartial={applyPartial} />
               )}
               {step === 8 && (
                 <Step8Summary
diff --git a/src/components/medications/wizard/steps/Step1Name.tsx b/src/components/medications/wizard/steps/Step1Name.tsx
index d406e81c0..7d1a9f2bc 100644
--- a/src/components/medications/wizard/steps/Step1Name.tsx
+++ b/src/components/medications/wizard/steps/Step1Name.tsx
@@ -14,7 +14,7 @@ export interface StepProps {
 export function Step1Name({ payload, applyPartial }: StepProps) {
   const { t } = useTranslations();
   return (
-    <div className="space-y-1.5" data-slot="wizard-step1">
+    <div className="space-y-2" data-slot="wizard-step1">
       <Label htmlFor="wizard-name" className="sr-only">
         {t("medications.wizard.steps.step1.label")}
       </Label>
diff --git a/src/components/medications/wizard/steps/Step3Dose.tsx b/src/components/medications/wizard/steps/Step3Dose.tsx
index 91498af62..8a1593abd 100644
--- a/src/components/medications/wizard/steps/Step3Dose.tsx
+++ b/src/components/medications/wizard/steps/Step3Dose.tsx
@@ -65,16 +65,14 @@ export function Step3Dose({ payload, applyPartial }: StepProps) {
     if (checked) current.add(site);
     else current.delete(site);
     applyPartial({
-      allowedInjectionSites: INJECTION_SITE_KEYS.filter((s) =>
-        current.has(s),
-      ),
+      allowedInjectionSites: INJECTION_SITE_KEYS.filter((s) => current.has(s)),
     });
   }
 
   return (
     <div className="space-y-6" data-slot="wizard-step3">
       <div className="grid grid-cols-2 gap-3">
-        <div className="space-y-1.5">
+        <div className="space-y-2">
           <Label htmlFor="wizard-dose-amount" className="text-sm">
             {t("medications.wizard.steps.step3.amountLabel")}
           </Label>
@@ -90,7 +88,7 @@ export function Step3Dose({ payload, applyPartial }: StepProps) {
             enterKeyHint="next"
           />
         </div>
-        <div className="space-y-1.5">
+        <div className="space-y-2">
           <Label htmlFor="wizard-dose-unit" className="text-sm">
             {t("medications.wizard.steps.step3.unitLabel")}
           </Label>
@@ -116,7 +114,7 @@ export function Step3Dose({ payload, applyPartial }: StepProps) {
           the Step 2 treatment row so an INJECTION delivery surfaces the
           rotation map for any class, not only GLP-1. */}
       <div className="grid grid-cols-2 gap-3">
-        <div className="space-y-1.5">
+        <div className="space-y-2">
           <Label htmlFor="wizard-delivery-form" className="text-sm">
             {t("medications.wizard.steps.step3.deliveryFormLabel")}
           </Label>
@@ -138,7 +136,7 @@ export function Step3Dose({ payload, applyPartial }: StepProps) {
             </SelectContent>
           </Select>
         </div>
-        <div className="space-y-1.5">
+        <div className="space-y-2">
           <Label htmlFor="wizard-doses-per-unit" className="text-sm">
             {t("medications.wizard.steps.step3.dosesPerUnitLabel")}
           </Label>
diff --git a/src/components/mood/mood-form.tsx b/src/components/mood/mood-form.tsx
index e964e3cf1..6477be53e 100644
--- a/src/components/mood/mood-form.tsx
+++ b/src/components/mood/mood-form.tsx
@@ -248,15 +248,11 @@ export function MoodForm({ onSuccess, onCancel, footerSlot }: MoodFormProps) {
             {t("common.cancel")}
           </Button>
         )}
-        <Button
-          type="submit"
-          form={formId}
-          disabled={loading || !mood}
-        >
+        <Button type="submit" form={formId} disabled={loading || !mood}>
           {loading ? (
-            <Loader2 className="mr-2 h-4 w-4 animate-spin motion-reduce:animate-none" />
+            <Loader2 className="h-4 w-4 animate-spin motion-reduce:animate-none" />
           ) : (
-            <Plus className="mr-2 h-4 w-4" />
+            <Plus className="h-4 w-4" />
           )}
           {t("common.save")}
         </Button>
@@ -328,145 +324,150 @@ export function MoodForm({ onSuccess, onCancel, footerSlot }: MoodFormProps) {
       </div>
 
       {moodPicked && (
-        <div className="space-y-4 border-t pt-4" data-slot="mood-annotate-panel">
-      <div className="space-y-2">
-        <Label htmlFor="mood-logged-at">{t("mood.timestamp")}</Label>
-        <DateTimeInput
-          id="mood-logged-at"
-          value={moodLoggedAt}
-          onChange={(e) => setMoodLoggedAt(e.target.value)}
-          required
-          aria-required="true"
-          aria-invalid={!!error || undefined}
-          aria-describedby={errorDescriptor}
-        />
-      </div>
+        <div
+          className="space-y-4 border-t pt-4"
+          data-slot="mood-annotate-panel"
+        >
+          <div className="space-y-2">
+            <Label htmlFor="mood-logged-at">{t("mood.timestamp")}</Label>
+            <DateTimeInput
+              id="mood-logged-at"
+              value={moodLoggedAt}
+              onChange={(e) => setMoodLoggedAt(e.target.value)}
+              required
+              aria-required="true"
+              aria-invalid={!!error || undefined}
+              aria-describedby={errorDescriptor}
+            />
+          </div>
 
-      <div className="space-y-2">
-        <div className="flex items-center justify-between gap-3">
-          <Label htmlFor="tags">
-            {t("mood.tags")}{" "}
-            <span className="text-muted-foreground font-normal">
-              ({t("common.optional")})
-            </span>
-          </Label>
-          <span className="text-muted-foreground text-xs">
-            {t("mood.tagsHelp")}
-          </span>
-        </div>
-        <Input
-          id="tags"
-          value={tagsInput}
-          onChange={(e) => setTagsInput(e.target.value)}
-          placeholder={t("mood.tagsPlaceholder")}
-          enterKeyHint="done"
-          autoCapitalize="none"
-          autoComplete="off"
-        />
-        {/* v1.4.25 W4d — GLP-1 side-effect quick-tags. Tapping a chip
+          <div className="space-y-2">
+            <div className="flex items-center justify-between gap-3">
+              <Label htmlFor="tags">
+                {t("mood.tags")}{" "}
+                <span className="text-muted-foreground font-normal">
+                  ({t("common.optional")})
+                </span>
+              </Label>
+              <span className="text-muted-foreground text-xs">
+                {t("mood.tagsHelp")}
+              </span>
+            </div>
+            <Input
+              id="tags"
+              value={tagsInput}
+              onChange={(e) => setTagsInput(e.target.value)}
+              placeholder={t("mood.tagsPlaceholder")}
+              enterKeyHint="done"
+              autoCapitalize="none"
+              autoComplete="off"
+            />
+            {/* v1.4.25 W4d — GLP-1 side-effect quick-tags. Tapping a chip
             appends the localised label to the free-text tag list.
             Always visible for now (cheap UX; the Coach side-effect
             aggregator filters on the canonical English tag set so the
             German labels still register correctly). */}
-        <div className="space-y-1.5 pt-1">
-          <p className="text-muted-foreground text-xs">
-            {t("medications.sideEffectTagsHelp")}
-          </p>
-          <div className="flex flex-wrap gap-1.5">
-            {GLP1_SIDE_EFFECT_KEYS.map((key) => {
-              const label = t(key);
-              const tags = tagsInput
-                .split(",")
-                .map((p) => p.trim().toLowerCase());
-              const isActive = tags.includes(label.toLowerCase());
-              return (
-                <button
-                  key={key}
-                  type="button"
-                  onClick={() => {
-                    if (isActive) {
-                      const next = tagsInput
-                        .split(",")
-                        .map((p) => p.trim())
-                        .filter((p) => p.toLowerCase() !== label.toLowerCase());
-                      setTagsInput(next.join(", "));
-                    } else {
-                      const next = tagsInput.trim()
-                        ? `${tagsInput.replace(/[,\s]+$/, "")}, ${label}`
-                        : label;
-                      setTagsInput(next);
-                    }
-                  }}
-                  className={`inline-flex min-h-11 items-center rounded-full border px-3 py-2 text-xs transition-colors ${
-                    isActive
-                      ? "border-primary bg-primary/15 text-primary"
-                      : "border-border/70 bg-muted text-foreground/75 hover:bg-accent hover:text-foreground"
-                  }`}
-                  aria-pressed={isActive}
-                >
-                  {label}
-                </button>
-              );
-            })}
+            <div className="space-y-1.5 pt-1">
+              <p className="text-muted-foreground text-xs">
+                {t("medications.sideEffectTagsHelp")}
+              </p>
+              <div className="flex flex-wrap gap-1.5">
+                {GLP1_SIDE_EFFECT_KEYS.map((key) => {
+                  const label = t(key);
+                  const tags = tagsInput
+                    .split(",")
+                    .map((p) => p.trim().toLowerCase());
+                  const isActive = tags.includes(label.toLowerCase());
+                  return (
+                    <button
+                      key={key}
+                      type="button"
+                      onClick={() => {
+                        if (isActive) {
+                          const next = tagsInput
+                            .split(",")
+                            .map((p) => p.trim())
+                            .filter(
+                              (p) => p.toLowerCase() !== label.toLowerCase(),
+                            );
+                          setTagsInput(next.join(", "));
+                        } else {
+                          const next = tagsInput.trim()
+                            ? `${tagsInput.replace(/[,\s]+$/, "")}, ${label}`
+                            : label;
+                          setTagsInput(next);
+                        }
+                      }}
+                      className={`inline-flex min-h-11 items-center rounded-full border px-3 py-2 text-xs transition-colors ${
+                        isActive
+                          ? "border-primary bg-primary/15 text-primary"
+                          : "border-border/70 bg-muted text-foreground/75 hover:bg-accent hover:text-foreground"
+                      }`}
+                      aria-pressed={isActive}
+                    >
+                      {label}
+                    </button>
+                  );
+                })}
+              </div>
+            </div>
           </div>
-        </div>
-      </div>
 
-      {/* v1.8.5 / v1.12.0 — structured-tag taxonomy picker. Additive next
+          {/* v1.8.5 / v1.12.0 — structured-tag taxonomy picker. Additive next
           to the free-text input above; an entry can carry both axes. The
           picker also surfaces the FACTOR-kind tags as 1..scaleMax rating
           controls, lifted here as `ratedFactors`. */}
-      <div className="space-y-2">
-        <Label>
-          {t("mood.tagPicker")}{" "}
-          <span className="text-muted-foreground font-normal">
-            ({t("common.optional")})
-          </span>
-        </Label>
-        <MoodTagPicker
-          selected={tagKeys}
-          onToggle={toggleTagKey}
-          ratedFactors={ratedFactors}
-          onRateFactor={rateFactor}
-        />
-      </div>
+          <div className="space-y-2">
+            <Label>
+              {t("mood.tagPicker")}{" "}
+              <span className="text-muted-foreground font-normal">
+                ({t("common.optional")})
+              </span>
+            </Label>
+            <MoodTagPicker
+              selected={tagKeys}
+              onToggle={toggleTagKey}
+              ratedFactors={ratedFactors}
+              onRateFactor={rateFactor}
+            />
+          </div>
 
-      {/* v1.8.5 (C1) — free-text note. */}
-      <div className="space-y-2">
-        <div className="flex items-center justify-between gap-3">
-          <Label htmlFor="mood-note">
-            {t("mood.note")}{" "}
-            <span className="text-muted-foreground font-normal">
-              ({t("common.optional")})
-            </span>
-          </Label>
-          {/* v1.11.5 — character counter so the `maxLength` cap no longer
+          {/* v1.8.5 (C1) — free-text note. */}
+          <div className="space-y-2">
+            <div className="flex items-center justify-between gap-3">
+              <Label htmlFor="mood-note">
+                {t("mood.note")}{" "}
+                <span className="text-muted-foreground font-normal">
+                  ({t("common.optional")})
+                </span>
+              </Label>
+              {/* v1.11.5 — character counter so the `maxLength` cap no longer
               truncates silently. Turns destructive (warns) as the input
               approaches the limit. */}
-          <span
-            data-testid="mood-note-counter"
-            className={`text-xs tabular-nums ${
-              note.length >= NOTE_MAX_LENGTH
-                ? "text-destructive"
-                : "text-muted-foreground"
-            }`}
-            aria-live="polite"
-          >
-            {t("mood.noteCharCount", {
-              count: String(note.length),
-              max: String(NOTE_MAX_LENGTH),
-            })}
-          </span>
-        </div>
-        <Textarea
-          id="mood-note"
-          value={note}
-          onChange={(e) => setNote(e.target.value)}
-          placeholder={t("mood.notePlaceholder")}
-          maxLength={NOTE_MAX_LENGTH}
-          rows={3}
-        />
-      </div>
+              <span
+                data-testid="mood-note-counter"
+                className={`text-xs tabular-nums ${
+                  note.length >= NOTE_MAX_LENGTH
+                    ? "text-destructive"
+                    : "text-muted-foreground"
+                }`}
+                aria-live="polite"
+              >
+                {t("mood.noteCharCount", {
+                  count: String(note.length),
+                  max: String(NOTE_MAX_LENGTH),
+                })}
+              </span>
+            </div>
+            <Textarea
+              id="mood-note"
+              value={note}
+              onChange={(e) => setNote(e.target.value)}
+              placeholder={t("mood.notePlaceholder")}
+              maxLength={NOTE_MAX_LENGTH}
+              rows={3}
+            />
+          </div>
         </div>
       )}
 
@@ -497,10 +498,7 @@ export function MoodForm({ onSuccess, onCancel, footerSlot }: MoodFormProps) {
           </AlertDialogHeader>
           <AlertDialogFooter>
             <AlertDialogCancel>{t("common.cancel")}</AlertDialogCancel>
-            <AlertDialogAction
-              variant="destructive"
-              onClick={resetForm}
-            >
+            <AlertDialogAction variant="destructive" onClick={resetForm}>
               {t("mood.formResetConfirmAction")}
             </AlertDialogAction>
           </AlertDialogFooter>
diff --git a/src/components/mood/mood-list.tsx b/src/components/mood/mood-list.tsx
index d62a6e97b..b3c4e6bde 100644
--- a/src/components/mood/mood-list.tsx
+++ b/src/components/mood/mood-list.tsx
@@ -62,15 +62,8 @@ import { createPortal } from "react-dom";
 import { toast } from "sonner";
 import { formatDateTime } from "@/lib/format";
 import { useTranslations, useFormatters } from "@/lib/i18n/context";
-import {
-  MOOD_LABEL_KEYS,
-  MOOD_SCORE_BY_ENUM,
-} from "@/lib/mood/labels";
-import {
-  invalidateKeys,
-  moodDependentKeys,
-  queryKeys,
-} from "@/lib/query-keys";
+import { MOOD_LABEL_KEYS, MOOD_SCORE_BY_ENUM } from "@/lib/mood/labels";
+import { invalidateKeys, moodDependentKeys, queryKeys } from "@/lib/query-keys";
 import { moodSourceEnum } from "@/lib/validations/moodlog";
 import { Checkbox } from "@/components/ui/checkbox";
 import {
@@ -146,9 +139,7 @@ export function MoodList({ onAddFirst }: MoodListProps = {}) {
   const [sortDir, setSortDir] = useState<"asc" | "desc">("desc");
 
   // v1.15.13 — page-scoped multi-select selection (current page ids only).
-  const [selectedIds, setSelectedIds] = useState<Set<string>>(
-    () => new Set(),
-  );
+  const [selectedIds, setSelectedIds] = useState<Set<string>>(() => new Set());
 
   const [editing, setEditing] = useState<MoodEntry | null>(null);
   const [editMood, setEditMood] = useState("");
@@ -173,9 +164,7 @@ export function MoodList({ onAddFirst }: MoodListProps = {}) {
   const [editDeleteDialogOpen, setEditDeleteDialogOpen] = useState(false);
   // v1.4.27 R4 RC2 — Sheet-branch sticky-pinned footer slot.
   const editFormId = useId();
-  const [editFooterEl, setEditFooterEl] = useState<HTMLDivElement | null>(
-    null,
-  );
+  const [editFooterEl, setEditFooterEl] = useState<HTMLDivElement | null>(null);
 
   // v1.15.13 — every filter / page / sort change resets pagination AND
   // clears the page-scoped selection.
@@ -460,7 +449,9 @@ export function MoodList({ onAddFirst }: MoodListProps = {}) {
                   <SelectValue placeholder={t("dataList.allSources")} />
                 </SelectTrigger>
                 <SelectContent>
-                  <SelectItem value="ALL">{t("dataList.allSources")}</SelectItem>
+                  <SelectItem value="ALL">
+                    {t("dataList.allSources")}
+                  </SelectItem>
                   {MOOD_SOURCE_OPTIONS.map((src) => (
                     <SelectItem key={src} value={src}>
                       {formatMoodSource(src, t)}
@@ -472,7 +463,10 @@ export function MoodList({ onAddFirst }: MoodListProps = {}) {
 
             {/* v1.15.13 — optional date range, wired to from/to. */}
             <div className="flex flex-col gap-1">
-              <Label htmlFor="mood-from" className="text-muted-foreground text-xs">
+              <Label
+                htmlFor="mood-from"
+                className="text-muted-foreground text-xs"
+              >
                 {t("dataList.dateFrom")}
               </Label>
               <DateInput
@@ -484,7 +478,10 @@ export function MoodList({ onAddFirst }: MoodListProps = {}) {
               />
             </div>
             <div className="flex flex-col gap-1">
-              <Label htmlFor="mood-to" className="text-muted-foreground text-xs">
+              <Label
+                htmlFor="mood-to"
+                className="text-muted-foreground text-xs"
+              >
                 {t("dataList.dateTo")}
               </Label>
               <DateInput
@@ -537,7 +534,7 @@ export function MoodList({ onAddFirst }: MoodListProps = {}) {
                 </Button>
               ) : onAddFirst ? (
                 <Button size="sm" onClick={onAddFirst}>
-                  <Plus className="mr-1 h-4 w-4" />
+                  <Plus className="h-4 w-4" />
                   {t("mood.emptyAddFirst")}
                 </Button>
               ) : undefined
@@ -598,77 +595,79 @@ export function MoodList({ onAddFirst }: MoodListProps = {}) {
                   {data.entries.map((entry) => {
                     const isSelected = selectedIds.has(entry.id);
                     return (
-                    <TableRow
-                      key={entry.id}
-                      data-state={isSelected ? "selected" : undefined}
-                    >
-                      <TableCell className="pl-4">
-                        <Checkbox
-                          checked={isSelected}
-                          onCheckedChange={() => onToggleRow(entry.id)}
-                          aria-label={t("dataList.selectRow")}
-                        />
-                      </TableCell>
-                      <TableCell className="font-semibold tabular-nums">
-                        {entry.score}{" "}
-                        <span className="text-muted-foreground font-normal">
-                          (
-                          {MOOD_LABEL_KEYS[entry.mood]
-                            ? t(MOOD_LABEL_KEYS[entry.mood])
-                            : entry.mood}
-                          )
-                        </span>
-                      </TableCell>
-                      <TableCell className="text-muted-foreground max-w-[18rem] text-sm">
-                        <span className="block truncate">
-                          {entry.tags.length > 0 ? entry.tags.join(", ") : "-"}
-                        </span>
-                        {entry.note && (
-                          <TooltipProvider>
-                            <Tooltip>
-                              <TooltipTrigger asChild>
-                                <p className="text-muted-foreground/80 mt-0.5 line-clamp-2 cursor-default text-xs italic">
-                                  {entry.note}
-                                </p>
-                              </TooltipTrigger>
-                              <TooltipContent className="max-w-xs">
-                                <p className="text-xs whitespace-pre-wrap">
-                                  {entry.note}
-                                </p>
-                              </TooltipContent>
-                            </Tooltip>
-                          </TooltipProvider>
-                        )}
-                      </TableCell>
-                      <TableCell className="text-muted-foreground text-sm">
-                        {formatDateTime(entry.moodLoggedAt)}
-                      </TableCell>
-                      <TableCell>
-                        {entry.source !== "MANUAL" && (
-                          <Badge variant="outline" className="text-xs">
-                            {formatMoodSource(entry.source, t)}
-                          </Badge>
-                        )}
-                      </TableCell>
-                      <TableCell className="pr-4 text-right">
-                        <div className="flex items-center justify-end gap-1">
-                          <Button
-                            variant="ghost"
-                            size="icon"
-                            className="h-8 w-8"
-                            onClick={() => startEdit(entry)}
-                            aria-label={t("common.edit")}
-                          >
-                            <Pencil className="h-3.5 w-3.5" />
-                          </Button>
-                          <DeleteButton
-                            onConfirm={() => deleteMutation.mutate(entry.id)}
-                            title={t("mood.deleteConfirmTitle")}
-                            description={t("mood.deleteConfirmDescription")}
+                      <TableRow
+                        key={entry.id}
+                        data-state={isSelected ? "selected" : undefined}
+                      >
+                        <TableCell className="pl-4">
+                          <Checkbox
+                            checked={isSelected}
+                            onCheckedChange={() => onToggleRow(entry.id)}
+                            aria-label={t("dataList.selectRow")}
                           />
-                        </div>
-                      </TableCell>
-                    </TableRow>
+                        </TableCell>
+                        <TableCell className="font-semibold tabular-nums">
+                          {entry.score}{" "}
+                          <span className="text-muted-foreground font-normal">
+                            (
+                            {MOOD_LABEL_KEYS[entry.mood]
+                              ? t(MOOD_LABEL_KEYS[entry.mood])
+                              : entry.mood}
+                            )
+                          </span>
+                        </TableCell>
+                        <TableCell className="text-muted-foreground max-w-[18rem] text-sm">
+                          <span className="block truncate">
+                            {entry.tags.length > 0
+                              ? entry.tags.join(", ")
+                              : "-"}
+                          </span>
+                          {entry.note && (
+                            <TooltipProvider>
+                              <Tooltip>
+                                <TooltipTrigger asChild>
+                                  <p className="text-muted-foreground/80 mt-0.5 line-clamp-2 cursor-default text-xs italic">
+                                    {entry.note}
+                                  </p>
+                                </TooltipTrigger>
+                                <TooltipContent className="max-w-xs">
+                                  <p className="text-xs whitespace-pre-wrap">
+                                    {entry.note}
+                                  </p>
+                                </TooltipContent>
+                              </Tooltip>
+                            </TooltipProvider>
+                          )}
+                        </TableCell>
+                        <TableCell className="text-muted-foreground text-sm">
+                          {formatDateTime(entry.moodLoggedAt)}
+                        </TableCell>
+                        <TableCell>
+                          {entry.source !== "MANUAL" && (
+                            <Badge variant="outline" className="text-xs">
+                              {formatMoodSource(entry.source, t)}
+                            </Badge>
+                          )}
+                        </TableCell>
+                        <TableCell className="pr-4 text-right">
+                          <div className="flex items-center justify-end gap-1">
+                            <Button
+                              variant="ghost"
+                              size="icon"
+                              className="h-8 w-8"
+                              onClick={() => startEdit(entry)}
+                              aria-label={t("common.edit")}
+                            >
+                              <Pencil className="h-3.5 w-3.5" />
+                            </Button>
+                            <DeleteButton
+                              onConfirm={() => deleteMutation.mutate(entry.id)}
+                              title={t("mood.deleteConfirmTitle")}
+                              description={t("mood.deleteConfirmDescription")}
+                            />
+                          </div>
+                        </TableCell>
+                      </TableRow>
                     );
                   })}
                 </TableBody>
@@ -688,87 +687,87 @@ export function MoodList({ onAddFirst }: MoodListProps = {}) {
               {data.entries.map((entry) => {
                 const isSelected = selectedIds.has(entry.id);
                 return (
-                <div
-                  key={entry.id}
-                  data-testid="mood-row"
-                  data-state={isSelected ? "selected" : undefined}
-                  className="bg-card border-border flex items-center justify-between rounded-lg border p-3 data-[state=selected]:border-dracula-purple/60 data-[state=selected]:bg-dracula-purple/5"
-                >
-                  <div className="flex items-center gap-2 overflow-hidden">
-                    {/* v1.15.13 MEDIUM-1 — a Radix Checkbox renders a 16px
+                  <div
+                    key={entry.id}
+                    data-testid="mood-row"
+                    data-state={isSelected ? "selected" : undefined}
+                    className="bg-card border-border data-[state=selected]:border-dracula-purple/60 data-[state=selected]:bg-dracula-purple/5 flex items-center justify-between rounded-lg border p-3"
+                  >
+                    <div className="flex items-center gap-2 overflow-hidden">
+                      {/* v1.15.13 MEDIUM-1 — a Radix Checkbox renders a 16px
                         `<button role=checkbox>`; a wrapping `<label>` does
                         NOT forward taps to a button, so the effective tap
                         target was 16px (fails WCAG 2.5.5). The 44px button
                         owns the whole hit area and is the single toggle
                         source; the inner Checkbox is a `pointer-events-none`
                         controlled visual, so a tap fires the handler once. */}
-                    <button
-                      type="button"
-                      role="checkbox"
-                      aria-checked={isSelected}
-                      aria-label={t("dataList.selectRow")}
-                      onClick={() => onToggleRow(entry.id)}
-                      className="focus-visible:ring-ring/50 flex size-11 shrink-0 items-center justify-center rounded focus-visible:ring-2 focus-visible:outline-none"
-                    >
-                      <Checkbox
-                        checked={isSelected}
-                        tabIndex={-1}
-                        aria-hidden="true"
-                        className="pointer-events-none"
-                      />
-                    </button>
-                    <div className="bg-muted flex h-8 w-8 shrink-0 items-center justify-center rounded-lg">
-                      <span
-                        data-testid="mood-row-score"
-                        className="text-lg font-bold tabular-nums"
+                      <button
+                        type="button"
+                        role="checkbox"
+                        aria-checked={isSelected}
+                        aria-label={t("dataList.selectRow")}
+                        onClick={() => onToggleRow(entry.id)}
+                        className="focus-visible:ring-ring/50 flex size-11 shrink-0 items-center justify-center rounded focus-visible:ring-2 focus-visible:outline-none"
                       >
-                        {entry.score}
-                      </span>
-                    </div>
-                    <div className="min-w-0">
-                      <span className="text-sm font-semibold">
-                        {MOOD_LABEL_KEYS[entry.mood]
-                          ? t(MOOD_LABEL_KEYS[entry.mood])
-                          : entry.mood}
-                      </span>
-                      <p className="text-muted-foreground truncate text-xs">
-                        {formatDateTime(entry.moodLoggedAt)}
-                      </p>
-                      {entry.tags.length > 0 && (
+                        <Checkbox
+                          checked={isSelected}
+                          tabIndex={-1}
+                          aria-hidden="true"
+                          className="pointer-events-none"
+                        />
+                      </button>
+                      <div className="bg-muted flex h-8 w-8 shrink-0 items-center justify-center rounded-lg">
+                        <span
+                          data-testid="mood-row-score"
+                          className="text-lg font-bold tabular-nums"
+                        >
+                          {entry.score}
+                        </span>
+                      </div>
+                      <div className="min-w-0">
+                        <span className="text-sm font-semibold">
+                          {MOOD_LABEL_KEYS[entry.mood]
+                            ? t(MOOD_LABEL_KEYS[entry.mood])
+                            : entry.mood}
+                        </span>
                         <p className="text-muted-foreground truncate text-xs">
-                          {entry.tags.join(", ")}
+                          {formatDateTime(entry.moodLoggedAt)}
                         </p>
-                      )}
-                      {entry.note && (
-                        <p className="text-muted-foreground/80 truncate text-xs italic">
-                          {entry.note}
-                        </p>
-                      )}
+                        {entry.tags.length > 0 && (
+                          <p className="text-muted-foreground truncate text-xs">
+                            {entry.tags.join(", ")}
+                          </p>
+                        )}
+                        {entry.note && (
+                          <p className="text-muted-foreground/80 truncate text-xs italic">
+                            {entry.note}
+                          </p>
+                        )}
+                      </div>
                     </div>
-                  </div>
-                  <div className="flex shrink-0 items-center gap-1">
-                    {/* Phase A5 mobile audit: bumped from h-8 w-8 (32px)
+                    <div className="flex shrink-0 items-center gap-1">
+                      {/* Phase A5 mobile audit: bumped from h-8 w-8 (32px)
                         to min-h-11 min-w-11 (44px) so the per-row edit
                         and delete actions meet WCAG 2.5.5 on touch
                         devices. The desktop table keeps its denser
                         h-8 w-8 since pointer targets allow it. */}
-                    <Button
-                      variant="ghost"
-                      size="icon"
-                      className="min-h-11 min-w-11"
-                      onClick={() => startEdit(entry)}
-                      aria-label={t("common.edit")}
-                    >
-                      <Pencil className="h-4 w-4" />
-                    </Button>
-                    <DeleteButton
-                      onConfirm={() => deleteMutation.mutate(entry.id)}
-                      iconClassName="h-4 w-4"
-                      title={t("mood.deleteConfirmTitle")}
-                      description={t("mood.deleteConfirmDescription")}
-                    />
+                      <Button
+                        variant="ghost"
+                        size="icon"
+                        className="min-h-11 min-w-11"
+                        onClick={() => startEdit(entry)}
+                        aria-label={t("common.edit")}
+                      >
+                        <Pencil className="h-4 w-4" />
+                      </Button>
+                      <DeleteButton
+                        onConfirm={() => deleteMutation.mutate(entry.id)}
+                        iconClassName="h-4 w-4"
+                        title={t("mood.deleteConfirmTitle")}
+                        description={t("mood.deleteConfirmDescription")}
+                      />
+                    </div>
                   </div>
-                </div>
                 );
               })}
             </div>
@@ -833,205 +832,196 @@ export function MoodList({ onAddFirst }: MoodListProps = {}) {
         title={t("mood.editEntry")}
         footer={<div ref={setEditFooterEl} className="flex w-full" />}
       >
-          {editing && (
-            <form
-              id={editFormId}
-              onSubmit={submitEdit}
-              className="space-y-4"
-            >
-              <div className="space-y-2">
-                <Label id="edit-mood-level-label">{t("mood.moodLevel")}</Label>
-                <div
-                  role="radiogroup"
-                  aria-labelledby="edit-mood-level-label"
-                  className="grid grid-cols-5 gap-2"
-                >
-                  {MOOD_LEVELS_LIST.map((level, index) => {
-                    const isSelected = editMood === level;
-                    return (
-                      <button
-                        key={level}
-                        type="button"
-                        role="radio"
-                        aria-checked={isSelected}
-                        onClick={() => setEditMood(level)}
-                        {...getEditMoodRadioProps(index)}
-                        className={`flex flex-col items-center gap-1 rounded-lg border p-2 text-center transition-colors ${
-                          isSelected
-                            ? "border-primary bg-primary/10 text-primary border-2"
-                            : "border-border hover:bg-accent"
-                        }`}
-                      >
-                        <span className="text-lg font-semibold tabular-nums">
-                          {MOOD_SCORES[level]}
-                        </span>
-                        <span className="text-[10px] leading-tight sm:text-xs">
-                          {t(MOOD_LABEL_KEYS[level])}
-                        </span>
-                      </button>
-                    );
-                  })}
-                </div>
+        {editing && (
+          <form id={editFormId} onSubmit={submitEdit} className="space-y-4">
+            <div className="space-y-2">
+              <Label id="edit-mood-level-label">{t("mood.moodLevel")}</Label>
+              <div
+                role="radiogroup"
+                aria-labelledby="edit-mood-level-label"
+                className="grid grid-cols-5 gap-2"
+              >
+                {MOOD_LEVELS_LIST.map((level, index) => {
+                  const isSelected = editMood === level;
+                  return (
+                    <button
+                      key={level}
+                      type="button"
+                      role="radio"
+                      aria-checked={isSelected}
+                      onClick={() => setEditMood(level)}
+                      {...getEditMoodRadioProps(index)}
+                      className={`flex flex-col items-center gap-1 rounded-lg border p-2 text-center transition-colors ${
+                        isSelected
+                          ? "border-primary bg-primary/10 text-primary border-2"
+                          : "border-border hover:bg-accent"
+                      }`}
+                    >
+                      <span className="text-lg font-semibold tabular-nums">
+                        {MOOD_SCORES[level]}
+                      </span>
+                      <span className="text-[10px] leading-tight sm:text-xs">
+                        {t(MOOD_LABEL_KEYS[level])}
+                      </span>
+                    </button>
+                  );
+                })}
               </div>
+            </div>
 
-              <div className="space-y-2">
-                <Label htmlFor="edit-mood-logged-at">
-                  {t("mood.timestamp")}
+            <div className="space-y-2">
+              <Label htmlFor="edit-mood-logged-at">{t("mood.timestamp")}</Label>
+              <DateTimeInput
+                id="edit-mood-logged-at"
+                value={editMoodLoggedAt}
+                onChange={(e) => setEditMoodLoggedAt(e.target.value)}
+                required
+              />
+            </div>
+
+            <div className="space-y-2">
+              <div className="flex items-center justify-between gap-3">
+                <Label htmlFor="edit-tags">
+                  {t("mood.tags")} ({t("common.optional")})
                 </Label>
-                <DateTimeInput
-                  id="edit-mood-logged-at"
-                  value={editMoodLoggedAt}
-                  onChange={(e) => setEditMoodLoggedAt(e.target.value)}
-                  required
-                />
+                <span className="text-muted-foreground text-xs">
+                  {t("mood.tagsHelp")}
+                </span>
               </div>
+              <Input
+                id="edit-tags"
+                value={editTagsInput}
+                onChange={(e) => setEditTagsInput(e.target.value)}
+                placeholder={t("mood.tagsPlaceholder")}
+              />
+            </div>
 
-              <div className="space-y-2">
-                <div className="flex items-center justify-between gap-3">
-                  <Label htmlFor="edit-tags">
-                    {t("mood.tags")} ({t("common.optional")})
-                  </Label>
-                  <span className="text-muted-foreground text-xs">
-                    {t("mood.tagsHelp")}
-                  </span>
-                </div>
-                <Input
-                  id="edit-tags"
-                  value={editTagsInput}
-                  onChange={(e) => setEditTagsInput(e.target.value)}
-                  placeholder={t("mood.tagsPlaceholder")}
-                />
+            {/* v1.8.5 — structured-tag taxonomy picker. */}
+            <div className="space-y-2">
+              <Label>
+                {t("mood.tagPicker")} ({t("common.optional")})
+              </Label>
+              <MoodTagPicker
+                selected={editTagKeys}
+                onToggle={toggleEditTagKey}
+              />
+            </div>
+
+            {/* v1.8.5 (C1) — free-text note. */}
+            <div className="space-y-2">
+              <Label htmlFor="edit-mood-note">
+                {t("mood.note")} ({t("common.optional")})
+              </Label>
+              <Textarea
+                id="edit-mood-note"
+                value={editNote}
+                onChange={(e) => setEditNote(e.target.value)}
+                placeholder={t("mood.notePlaceholder")}
+                maxLength={500}
+                rows={3}
+              />
+            </div>
+
+            {editError && (
+              <div
+                role="alert"
+                aria-live="assertive"
+                className="bg-destructive/10 text-destructive rounded-lg p-3 text-sm"
+              >
+                {editError}
               </div>
+            )}
 
-              {/* v1.8.5 — structured-tag taxonomy picker. */}
-              <div className="space-y-2">
-                <Label>
-                  {t("mood.tagPicker")} ({t("common.optional")})
-                </Label>
-                <MoodTagPicker
-                  selected={editTagKeys}
-                  onToggle={toggleEditTagKey}
-                />
-              </div>
-
-              {/* v1.8.5 (C1) — free-text note. */}
-              <div className="space-y-2">
-                <Label htmlFor="edit-mood-note">
-                  {t("mood.note")} ({t("common.optional")})
-                </Label>
-                <Textarea
-                  id="edit-mood-note"
-                  value={editNote}
-                  onChange={(e) => setEditNote(e.target.value)}
-                  placeholder={t("mood.notePlaceholder")}
-                  maxLength={500}
-                  rows={3}
-                />
-              </div>
-
-              {editError && (
-                <div
-                  role="alert"
-                  aria-live="assertive"
-                  className="bg-destructive/10 text-destructive rounded-lg p-3 text-sm"
-                >
-                  {editError}
-                </div>
-              )}
-
-              {editFooterEl
-                ? createPortal(
-                    <div className="flex w-full items-center justify-between gap-2">
-                      <DropdownMenu>
-                        <DropdownMenuTrigger asChild>
-                          <Button
-                            type="button"
-                            variant="outline"
-                            size="icon"
-                            className="h-11 w-11"
-                            disabled={
-                              updateMutation.isPending ||
-                              deleteMutation.isPending
-                            }
-                            aria-label={t("common.moreOptions")}
-                          >
-                            <MoreHorizontal className="h-4 w-4" />
-                          </Button>
-                        </DropdownMenuTrigger>
-                        <DropdownMenuContent align="start">
-                          <DropdownMenuItem
-                            variant="destructive"
-                            onClick={() => setEditDeleteDialogOpen(true)}
-                          >
-                            <Trash2 className="mr-2 h-4 w-4" />
-                            {t("common.delete")}
-                          </DropdownMenuItem>
-                        </DropdownMenuContent>
-                      </DropdownMenu>
-
-                      <div className="flex items-center gap-2">
+            {editFooterEl
+              ? createPortal(
+                  <div className="flex w-full items-center justify-between gap-2">
+                    <DropdownMenu>
+                      <DropdownMenuTrigger asChild>
                         <Button
                           type="button"
                           variant="outline"
-                          onClick={closeEdit}
+                          size="icon"
+                          className="h-11 w-11"
                           disabled={
-                            updateMutation.isPending ||
-                            deleteMutation.isPending
+                            updateMutation.isPending || deleteMutation.isPending
                           }
+                          aria-label={t("common.moreOptions")}
                         >
-                          {t("common.cancel")}
+                          <MoreHorizontal className="h-4 w-4" />
                         </Button>
-                        <Button
-                          type="submit"
-                          form={editFormId}
-                          disabled={
-                            updateMutation.isPending ||
-                            deleteMutation.isPending
-                          }
+                      </DropdownMenuTrigger>
+                      <DropdownMenuContent align="start">
+                        <DropdownMenuItem
+                          variant="destructive"
+                          onClick={() => setEditDeleteDialogOpen(true)}
                         >
-                          {updateMutation.isPending ? (
-                            <Loader2 className="mr-2 h-4 w-4 animate-spin motion-reduce:animate-none" />
-                          ) : null}
-                          {t("common.save")}
-                        </Button>
-                      </div>
-                    </div>,
-                    editFooterEl,
-                  )
-                : null}
+                          <Trash2 className="mr-2 h-4 w-4" />
+                          {t("common.delete")}
+                        </DropdownMenuItem>
+                      </DropdownMenuContent>
+                    </DropdownMenu>
 
-              <AlertDialog
-                open={editDeleteDialogOpen}
-                onOpenChange={setEditDeleteDialogOpen}
-              >
-                <AlertDialogContent>
-                  <AlertDialogHeader>
-                    <AlertDialogTitle>
-                      {t("mood.deleteConfirmTitle")}
-                    </AlertDialogTitle>
-                    <AlertDialogDescription>
-                      {t("mood.deleteConfirmDescription")}
-                    </AlertDialogDescription>
-                  </AlertDialogHeader>
-                  <AlertDialogFooter>
-                    <AlertDialogCancel disabled={deleteMutation.isPending}>
-                      {t("common.cancel")}
-                    </AlertDialogCancel>
-                    <AlertDialogAction
-                      variant="destructive"
-                      onClick={deleteEditingEntry}
-                      disabled={deleteMutation.isPending}
-                    >
-                      {deleteMutation.isPending ? (
-                        <Loader2 className="mr-2 h-4 w-4 animate-spin motion-reduce:animate-none" />
-                      ) : null}
-                      {t("common.delete")}
-                    </AlertDialogAction>
-                  </AlertDialogFooter>
-                </AlertDialogContent>
-              </AlertDialog>
-            </form>
-          )}
+                    <div className="flex items-center gap-2">
+                      <Button
+                        type="button"
+                        variant="outline"
+                        onClick={closeEdit}
+                        disabled={
+                          updateMutation.isPending || deleteMutation.isPending
+                        }
+                      >
+                        {t("common.cancel")}
+                      </Button>
+                      <Button
+                        type="submit"
+                        form={editFormId}
+                        disabled={
+                          updateMutation.isPending || deleteMutation.isPending
+                        }
+                      >
+                        {updateMutation.isPending ? (
+                          <Loader2 className="h-4 w-4 animate-spin motion-reduce:animate-none" />
+                        ) : null}
+                        {t("common.save")}
+                      </Button>
+                    </div>
+                  </div>,
+                  editFooterEl,
+                )
+              : null}
+
+            <AlertDialog
+              open={editDeleteDialogOpen}
+              onOpenChange={setEditDeleteDialogOpen}
+            >
+              <AlertDialogContent>
+                <AlertDialogHeader>
+                  <AlertDialogTitle>
+                    {t("mood.deleteConfirmTitle")}
+                  </AlertDialogTitle>
+                  <AlertDialogDescription>
+                    {t("mood.deleteConfirmDescription")}
+                  </AlertDialogDescription>
+                </AlertDialogHeader>
+                <AlertDialogFooter>
+                  <AlertDialogCancel disabled={deleteMutation.isPending}>
+                    {t("common.cancel")}
+                  </AlertDialogCancel>
+                  <AlertDialogAction
+                    variant="destructive"
+                    onClick={deleteEditingEntry}
+                    disabled={deleteMutation.isPending}
+                  >
+                    {deleteMutation.isPending ? (
+                      <Loader2 className="mr-2 h-4 w-4 animate-spin motion-reduce:animate-none" />
+                    ) : null}
+                    {t("common.delete")}
+                  </AlertDialogAction>
+                </AlertDialogFooter>
+              </AlertDialogContent>
+            </AlertDialog>
+          </form>
+        )}
       </ResponsiveSheet>
     </>
   );
diff --git a/src/components/settings/about-me-section.tsx b/src/components/settings/about-me-section.tsx
index 05bce9538..02bb23fd8 100644
--- a/src/components/settings/about-me-section.tsx
+++ b/src/components/settings/about-me-section.tsx
@@ -23,7 +23,12 @@
 import { useState } from "react";
 import Link from "next/link";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
-import { Loader2, MessageCircleQuestion, NotebookPen, Trash2 } from "lucide-react";
+import {
+  Loader2,
+  MessageCircleQuestion,
+  NotebookPen,
+  Trash2,
+} from "lucide-react";
 import { toast } from "sonner";
 
 import { Button } from "@/components/ui/button";
@@ -180,9 +185,7 @@ export function AboutMeSection({
           maxLength={fieldMaxChars}
           placeholder={placeholder}
           disabled={disabled}
-          onChange={(e) =>
-            setDrafts((d) => ({ ...d, [key]: e.target.value }))
-          }
+          onChange={(e) => setDrafts((d) => ({ ...d, [key]: e.target.value }))}
         />
       </div>
     );
@@ -342,7 +345,11 @@ export function AboutMeSection({
       )}
 
       {query.isError && (
-        <p role="status" aria-live="polite" className="text-destructive text-xs">
+        <p
+          role="status"
+          aria-live="polite"
+          className="text-destructive text-sm"
+        >
           {t("settings.ai.aboutMe.loadError")}
         </p>
       )}
diff --git a/src/components/settings/about-section.tsx b/src/components/settings/about-section.tsx
index 4be08972b..90728b3a2 100644
--- a/src/components/settings/about-section.tsx
+++ b/src/components/settings/about-section.tsx
@@ -334,9 +334,9 @@ export function AboutSection() {
                 target="_blank"
                 rel="noopener noreferrer"
               >
-                <GitBranch className="mr-2 h-4 w-4" />
+                <GitBranch className="h-4 w-4" />
                 {t("settings.about.repository")}
-                <ExternalLink className="ml-2 h-3.5 w-3.5" />
+                <ExternalLink className="h-3.5 w-3.5" />
               </a>
             </Button>
             <Button asChild variant="outline" size="sm">
@@ -345,16 +345,16 @@ export function AboutSection() {
                 target="_blank"
                 rel="noopener noreferrer"
               >
-                <Sparkles className="mr-2 h-4 w-4" />
+                <Sparkles className="h-4 w-4" />
                 {t("settings.about.changelog")}
-                <ExternalLink className="ml-2 h-3.5 w-3.5" />
+                <ExternalLink className="h-3.5 w-3.5" />
               </a>
             </Button>
             <Button asChild variant="outline" size="sm">
               <a href={version.docs} target="_blank" rel="noopener noreferrer">
-                <BookOpen className="mr-2 h-4 w-4" />
+                <BookOpen className="h-4 w-4" />
                 {t("settings.about.docs")}
-                <ExternalLink className="ml-2 h-3.5 w-3.5" />
+                <ExternalLink className="h-3.5 w-3.5" />
               </a>
             </Button>
           </div>
@@ -392,9 +392,9 @@ export function AboutSection() {
             className="w-full shrink-0 sm:w-auto"
           >
             {replayingTour ? (
-              <Loader2 className="mr-2 h-4 w-4 animate-spin motion-reduce:animate-none" />
+              <Loader2 className="h-4 w-4 animate-spin motion-reduce:animate-none" />
             ) : (
-              <Compass className="mr-2 h-4 w-4" />
+              <Compass className="h-4 w-4" />
             )}
             {t("settings.about.tourReplay")}
           </Button>
diff --git a/src/components/settings/account-section.tsx b/src/components/settings/account-section.tsx
index 6f905d144..0f211f886 100644
--- a/src/components/settings/account-section.tsx
+++ b/src/components/settings/account-section.tsx
@@ -587,9 +587,9 @@ export function AccountSection() {
           <div className="flex justify-end">
             <Button type="submit" disabled={saving}>
               {saving ? (
-                <Loader2 className="mr-2 h-4 w-4 animate-spin motion-reduce:animate-none" />
+                <Loader2 className="h-4 w-4 animate-spin motion-reduce:animate-none" />
               ) : (
-                <Save className="mr-2 h-4 w-4" />
+                <Save className="h-4 w-4" />
               )}
               {t("common.save")}
             </Button>
@@ -623,9 +623,9 @@ export function AccountSection() {
             disabled={passkeyLoading}
           >
             {passkeyLoading ? (
-              <Loader2 className="mr-2 h-4 w-4 animate-spin motion-reduce:animate-none" />
+              <Loader2 className="h-4 w-4 animate-spin motion-reduce:animate-none" />
             ) : (
-              <KeyRound className="mr-2 h-4 w-4" />
+              <KeyRound className="h-4 w-4" />
             )}
             {t("settings.addPasskey")}
           </Button>
@@ -703,9 +703,9 @@ export function AccountSection() {
             className="w-full shrink-0 sm:w-auto"
           >
             {tourRestarting ? (
-              <Loader2 className="mr-2 h-4 w-4 animate-spin motion-reduce:animate-none" />
+              <Loader2 className="h-4 w-4 animate-spin motion-reduce:animate-none" />
             ) : (
-              <Compass className="mr-2 h-4 w-4" />
+              <Compass className="h-4 w-4" />
             )}
             {t("onboarding.tour.restart")}
           </Button>
@@ -794,9 +794,9 @@ export function AccountSection() {
 
             <Button type="submit" variant="outline" disabled={passwordSaving}>
               {passwordSaving ? (
-                <Loader2 className="mr-2 h-4 w-4 animate-spin motion-reduce:animate-none" />
+                <Loader2 className="h-4 w-4 animate-spin motion-reduce:animate-none" />
               ) : (
-                <Save className="mr-2 h-4 w-4" />
+                <Save className="h-4 w-4" />
               )}
               {t("settings.changePassword")}
             </Button>
@@ -1180,9 +1180,9 @@ function AvatarSection() {
             onClick={() => fileInputRef.current?.click()}
           >
             {upload.isPending ? (
-              <Loader2 className="mr-2 h-4 w-4 animate-spin motion-reduce:animate-none" />
+              <Loader2 className="h-4 w-4 animate-spin motion-reduce:animate-none" />
             ) : (
-              <ImageUp className="mr-2 h-4 w-4" />
+              <ImageUp className="h-4 w-4" />
             )}
             {avatarUrl
               ? t("settings.avatar.replace")
@@ -1200,9 +1200,9 @@ function AvatarSection() {
               }}
             >
               {remove.isPending ? (
-                <Loader2 className="mr-2 h-4 w-4 animate-spin motion-reduce:animate-none" />
+                <Loader2 className="h-4 w-4 animate-spin motion-reduce:animate-none" />
               ) : (
-                <Trash2 className="mr-2 h-4 w-4" />
+                <Trash2 className="h-4 w-4" />
               )}
               {t("settings.avatar.remove")}
             </Button>
diff --git a/src/components/settings/advanced-section.tsx b/src/components/settings/advanced-section.tsx
index 8d7340cab..1e1902903 100644
--- a/src/components/settings/advanced-section.tsx
+++ b/src/components/settings/advanced-section.tsx
@@ -90,9 +90,7 @@ function researchModeStatusLabel(
   if (gate === "off") return t("settings.researchMode.disabledStatus");
   if (gate === "stale") return t("settings.researchMode.enabledStaleStatus");
   return t("settings.researchMode.acknowledgedOn", {
-    date: status?.acknowledgedAt
-      ? formatDateTime(status.acknowledgedAt)
-      : "—",
+    date: status?.acknowledgedAt ? formatDateTime(status.acknowledgedAt) : "—",
   });
 }
 
@@ -306,9 +304,9 @@ function DataResetCard() {
               className="w-full shrink-0 sm:w-auto"
             >
               {deleting ? (
-                <Loader2 className="mr-1 h-3.5 w-3.5 animate-spin motion-reduce:animate-none" />
+                <Loader2 className="h-3.5 w-3.5 animate-spin motion-reduce:animate-none" />
               ) : (
-                <Trash2 className="mr-1 h-3.5 w-3.5" />
+                <Trash2 className="h-3.5 w-3.5" />
               )}
               {t("settings.dangerZone")}
             </Button>
@@ -450,9 +448,9 @@ function AccountDeleteCard() {
               data-slot="settings-account-delete-trigger"
             >
               {deleting ? (
-                <Loader2 className="mr-1 h-3.5 w-3.5 animate-spin motion-reduce:animate-none" />
+                <Loader2 className="h-3.5 w-3.5 animate-spin motion-reduce:animate-none" />
               ) : (
-                <Trash2 className="mr-1 h-3.5 w-3.5" />
+                <Trash2 className="h-3.5 w-3.5" />
               )}
               {t("settings.deleteAccountCta")}
             </Button>
diff --git a/src/components/settings/ai-section.tsx b/src/components/settings/ai-section.tsx
index f69b40669..367435f13 100644
--- a/src/components/settings/ai-section.tsx
+++ b/src/components/settings/ai-section.tsx
@@ -201,9 +201,7 @@ export function AiSection() {
 
       {/* v1.11.2 — "What the Coach remembers": durable-fact review +
           forget controls. Gated on the Coach being enabled. */}
-      {coachEnabled && (
-        <CoachMemorySection isAuthenticated={isAuthenticated} />
-      )}
+      {coachEnabled && <CoachMemorySection isAuthenticated={isAuthenticated} />}
 
       {/* v1.15.20 — user-authored "about me" context for the Coach +
           daily briefing. Not gated on the Coach toggle: the briefing
@@ -836,9 +834,9 @@ function CodexProviderForm({
           disabled={disconnecting}
         >
           {disconnecting ? (
-            <Loader2 className="mr-1 h-4 w-4 animate-spin motion-reduce:animate-none" />
+            <Loader2 className="h-4 w-4 animate-spin motion-reduce:animate-none" />
           ) : (
-            <Trash2 className="mr-1 h-4 w-4" />
+            <Trash2 className="h-4 w-4" />
           )}
           {t("settings.ai.codex.disconnectButton")}
         </Button>
@@ -900,9 +898,9 @@ function CodexProviderForm({
           className="w-full sm:w-auto"
         >
           {devicePolling ? (
-            <Loader2 className="mr-2 h-4 w-4 animate-spin motion-reduce:animate-none" />
+            <Loader2 className="h-4 w-4 animate-spin motion-reduce:animate-none" />
           ) : (
-            <Sparkles className="mr-2 h-4 w-4" />
+            <Sparkles className="h-4 w-4" />
           )}
           {t("settings.ai.codex.connectButton")}
         </Button>
@@ -1096,9 +1094,9 @@ function OpenAIProviderForm({
           disabled={saveMutation.isPending}
         >
           {saveMutation.isPending ? (
-            <Loader2 className="mr-2 h-4 w-4 animate-spin motion-reduce:animate-none" />
+            <Loader2 className="h-4 w-4 animate-spin motion-reduce:animate-none" />
           ) : (
-            <Save className="mr-2 h-4 w-4" />
+            <Save className="h-4 w-4" />
           )}
           {t("settings.ai.saveCta")}
         </Button>
@@ -1252,9 +1250,9 @@ function AnthropicProviderForm({
           disabled={saveMutation.isPending}
         >
           {saveMutation.isPending ? (
-            <Loader2 className="mr-2 h-4 w-4 animate-spin motion-reduce:animate-none" />
+            <Loader2 className="h-4 w-4 animate-spin motion-reduce:animate-none" />
           ) : (
-            <Save className="mr-2 h-4 w-4" />
+            <Save className="h-4 w-4" />
           )}
           {t("settings.ai.saveCta")}
         </Button>
@@ -1409,9 +1407,9 @@ function LocalProviderForm({
           disabled={saveMutation.isPending}
         >
           {saveMutation.isPending ? (
-            <Loader2 className="mr-2 h-4 w-4 animate-spin motion-reduce:animate-none" />
+            <Loader2 className="h-4 w-4 animate-spin motion-reduce:animate-none" />
           ) : (
-            <Save className="mr-2 h-4 w-4" />
+            <Save className="h-4 w-4" />
           )}
           {t("settings.ai.saveCta")}
         </Button>
@@ -1661,16 +1659,16 @@ function FallbackChainCard({
           data-testid="ai-fallback-chain-save"
         >
           {saveMutation.isPending ? (
-            <Loader2 className="mr-2 h-4 w-4 animate-spin motion-reduce:animate-none" />
+            <Loader2 className="h-4 w-4 animate-spin motion-reduce:animate-none" />
           ) : (
-            <Save className="mr-2 h-4 w-4" />
+            <Save className="h-4 w-4" />
           )}
           {t("settings.ai.providerChain.saveOrder")}
         </Button>
         <AlertDialog>
           <AlertDialogTrigger asChild>
             <Button size="sm" variant="outline">
-              <RotateCcw className="mr-2 h-4 w-4" />
+              <RotateCcw className="h-4 w-4" />
               {t("settings.ai.providerChain.resetDefaults")}
             </Button>
           </AlertDialogTrigger>
@@ -1734,7 +1732,7 @@ function AddProviderControl({
           if (isProviderType(picked)) onAdd(picked);
         }}
       >
-        <PlusCircle className="mr-2 h-4 w-4" />
+        <PlusCircle className="h-4 w-4" />
         {t("settings.ai.providerChain.addProvider")}
       </Button>
     </div>
@@ -1933,9 +1931,9 @@ function RuntimeActionsRow({
           data-testid="ai-test-active-provider"
         >
           {testing ? (
-            <Loader2 className="mr-2 h-4 w-4 animate-spin motion-reduce:animate-none" />
+            <Loader2 className="h-4 w-4 animate-spin motion-reduce:animate-none" />
           ) : (
-            <Sparkles className="mr-2 h-4 w-4" />
+            <Sparkles className="h-4 w-4" />
           )}
           {t("settings.ai.testProvider")}
         </Button>
@@ -1947,9 +1945,9 @@ function RuntimeActionsRow({
             disabled={regen}
           >
             {regen ? (
-              <Loader2 className="mr-2 h-4 w-4 animate-spin motion-reduce:animate-none" />
+              <Loader2 className="h-4 w-4 animate-spin motion-reduce:animate-none" />
             ) : (
-              <RefreshCw className="mr-2 h-4 w-4" />
+              <RefreshCw className="h-4 w-4" />
             )}
             {t("settings.regenerateInsights")}
           </Button>
diff --git a/src/components/settings/api-section.tsx b/src/components/settings/api-section.tsx
index fad61ed8d..26cfeea7d 100644
--- a/src/components/settings/api-section.tsx
+++ b/src/components/settings/api-section.tsx
@@ -281,7 +281,7 @@ function ApiTokensCard() {
             disabled={creating || !newName.trim()}
           >
             {creating && (
-              <Loader2 className="mr-1 h-3.5 w-3.5 animate-spin motion-reduce:animate-none" />
+              <Loader2 className="h-3.5 w-3.5 animate-spin motion-reduce:animate-none" />
             )}
             {t("common.create")}
           </Button>
@@ -502,7 +502,7 @@ function ApiTokensCard() {
                           size="sm"
                           className="text-destructive border-destructive/30 min-h-11 w-full"
                         >
-                          <Trash2 className="mr-2 h-3.5 w-3.5" />
+                          <Trash2 className="h-3.5 w-3.5" />
                           {t("settings.tokenRevoke")}
                         </Button>
                       </AlertDialogTrigger>
diff --git a/src/components/settings/coach-memory-section.tsx b/src/components/settings/coach-memory-section.tsx
index 77fd4aad8..c341c1f08 100644
--- a/src/components/settings/coach-memory-section.tsx
+++ b/src/components/settings/coach-memory-section.tsx
@@ -216,7 +216,7 @@ export function CoachMemorySection({
         <p
           role="status"
           aria-live="polite"
-          className="text-destructive text-xs"
+          className="text-destructive text-sm"
         >
           {t("settings.ai.coachMemory.loadError")}
         </p>
diff --git a/src/components/settings/dashboard-layout-section.tsx b/src/components/settings/dashboard-layout-section.tsx
index 213d5baf7..94e48d8e5 100644
--- a/src/components/settings/dashboard-layout-section.tsx
+++ b/src/components/settings/dashboard-layout-section.tsx
@@ -324,7 +324,7 @@ export function DashboardLayoutSection({ id }: { id: string }) {
           disabled={resetMutation.isPending}
           className="self-end sm:self-auto"
         >
-          <RotateCcw className="mr-2 h-3.5 w-3.5" />
+          <RotateCcw className="h-3.5 w-3.5" />
           {t("dashboard.layoutReset")}
         </Button>
       </div>
@@ -512,7 +512,7 @@ export function DashboardLayoutSection({ id }: { id: string }) {
             disabled={saveMutation.isPending}
           >
             {saveMutation.isPending && (
-              <Loader2 className="mr-2 h-3.5 w-3.5 animate-spin motion-reduce:animate-none" />
+              <Loader2 className="h-3.5 w-3.5 animate-spin motion-reduce:animate-none" />
             )}
             {t("common.save")}
           </Button>
@@ -637,7 +637,7 @@ function SortableWidgetRow({
         // visible GripVertical at 28 px (matches the Switch primitive
         // pattern from v1.4.43 W5-H1). v1.4.47 W10 design-M1 — drop
         // dnd-kit's CSS transition under prefers-reduced-motion.
-        className="text-muted-foreground hover:text-foreground focus-visible:ring-ring focus-visible:ring-offset-background -m-1 relative inline-flex h-7 w-7 cursor-grab touch-none items-center justify-center rounded transition-colors before:absolute before:inset-[-8px] before:content-[''] focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none active:cursor-grabbing disabled:cursor-not-allowed disabled:opacity-50 motion-reduce:transition-none"
+        className="text-muted-foreground hover:text-foreground focus-visible:ring-ring focus-visible:ring-offset-background relative -m-1 inline-flex h-7 w-7 cursor-grab touch-none items-center justify-center rounded transition-colors before:absolute before:inset-[-8px] before:content-[''] focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none active:cursor-grabbing disabled:cursor-not-allowed disabled:opacity-50 motion-reduce:transition-none"
       >
         <GripVertical className="h-4 w-4" />
       </button>
diff --git a/src/components/settings/export-section.tsx b/src/components/settings/export-section.tsx
index 26f289b57..f30c84e28 100644
--- a/src/components/settings/export-section.tsx
+++ b/src/components/settings/export-section.tsx
@@ -289,9 +289,9 @@ function CsvCard({
           disabled={busy}
         >
           {busy ? (
-            <Loader2 className="mr-1 h-3.5 w-3.5 animate-spin motion-reduce:animate-none" />
+            <Loader2 className="h-3.5 w-3.5 animate-spin motion-reduce:animate-none" />
           ) : (
-            <Download className="mr-1 h-3.5 w-3.5" />
+            <Download className="h-3.5 w-3.5" />
           )}
           {t("settings.sections.export.actions.download")}
         </Button>
@@ -305,7 +305,7 @@ function CsvCard({
         setUntil={setUntil}
       />
       {error && (
-        <p role="alert" className="text-destructive text-xs">
+        <p role="alert" className="text-destructive text-sm">
           {error}
         </p>
       )}
@@ -376,9 +376,9 @@ function MedicationsCsvCard() {
           disabled={busy}
         >
           {busy ? (
-            <Loader2 className="mr-1 h-3.5 w-3.5 animate-spin motion-reduce:animate-none" />
+            <Loader2 className="h-3.5 w-3.5 animate-spin motion-reduce:animate-none" />
           ) : (
-            <Download className="mr-1 h-3.5 w-3.5" />
+            <Download className="h-3.5 w-3.5" />
           )}
           {t("settings.sections.export.actions.download")}
         </Button>
@@ -406,7 +406,7 @@ function MedicationsCsvCard() {
         </span>
       </label>
       {error && (
-        <p role="alert" className="text-destructive text-xs">
+        <p role="alert" className="text-destructive text-sm">
           {error}
         </p>
       )}
@@ -465,16 +465,16 @@ function FullBackupCard() {
           disabled={busy}
         >
           {busy ? (
-            <Loader2 className="mr-1 h-3.5 w-3.5 animate-spin motion-reduce:animate-none" />
+            <Loader2 className="h-3.5 w-3.5 animate-spin motion-reduce:animate-none" />
           ) : (
-            <FileText className="mr-1 h-3.5 w-3.5" />
+            <FileText className="h-3.5 w-3.5" />
           )}
           {t("settings.sections.export.actions.download")}
         </Button>
       }
     >
       {error && (
-        <p role="alert" className="text-destructive text-xs">
+        <p role="alert" className="text-destructive text-sm">
           {error}
         </p>
       )}
@@ -575,16 +575,16 @@ function CycleExportCard() {
           disabled={busy}
         >
           {busy ? (
-            <Loader2 className="mr-1 h-3.5 w-3.5 animate-spin motion-reduce:animate-none" />
+            <Loader2 className="h-3.5 w-3.5 animate-spin motion-reduce:animate-none" />
           ) : (
-            <Download className="mr-1 h-3.5 w-3.5" />
+            <Download className="h-3.5 w-3.5" />
           )}
           {t("settings.sections.export.actions.download")}
         </Button>
       }
     >
       {error && (
-        <p role="alert" className="text-destructive text-xs">
+        <p role="alert" className="text-destructive text-sm">
           {error}
         </p>
       )}
diff --git a/src/components/settings/health-record-export-panel.tsx b/src/components/settings/health-record-export-panel.tsx
index f2bd712a2..1ef428eb5 100644
--- a/src/components/settings/health-record-export-panel.tsx
+++ b/src/components/settings/health-record-export-panel.tsx
@@ -168,8 +168,7 @@ export function HealthRecordExportPanel() {
         return;
       }
       const blob = await res.blob();
-      const ext =
-        format === "pdf" ? "pdf" : format === "fhir" ? "json" : "zip";
+      const ext = format === "pdf" ? "pdf" : format === "fhir" ? "json" : "zip";
       const url = URL.createObjectURL(blob);
       const a = document.createElement("a");
       a.href = url;
@@ -306,127 +305,127 @@ export function HealthRecordExportPanel() {
               className="animate-insight-in space-y-3"
               style={{ animationDuration: "200ms" }}
             >
-          <div className="border-border space-y-2 rounded-lg border p-3">
-            <p className="text-xs font-semibold">
-              {t("settings.healthRecord.groupVitals")}
-            </p>
-            <div className="grid gap-2 sm:grid-cols-2">
-              <ToggleRow
-                label={t("settings.healthRecord.weight")}
-                checked={sections.weight}
-                onToggle={() => toggle("weight")}
-              />
-              <ToggleRow
-                label={t("settings.healthRecord.bp")}
-                checked={sections.bp}
-                onToggle={() => toggle("bp")}
-              />
-              <ToggleRow
-                label={t("settings.healthRecord.pulse")}
-                checked={sections.pulse}
-                onToggle={() => toggle("pulse")}
-              />
-              <ToggleRow
-                label={t("settings.healthRecord.oxygenSaturation")}
-                checked={sections.oxygenSaturation}
-                onToggle={() => toggle("oxygenSaturation")}
-              />
-              <ToggleRow
-                label={t("settings.healthRecord.bodyFat")}
-                checked={sections.bodyFat}
-                onToggle={() => toggle("bodyFat")}
-              />
-              <ToggleRow
-                label={t("settings.healthRecord.bodyComposition")}
-                checked={sections.bodyComposition}
-                onToggle={() => toggle("bodyComposition")}
-              />
-            </div>
-          </div>
+              <div className="border-border space-y-2 rounded-lg border p-3">
+                <p className="text-xs font-semibold">
+                  {t("settings.healthRecord.groupVitals")}
+                </p>
+                <div className="grid gap-2 sm:grid-cols-2">
+                  <ToggleRow
+                    label={t("settings.healthRecord.weight")}
+                    checked={sections.weight}
+                    onToggle={() => toggle("weight")}
+                  />
+                  <ToggleRow
+                    label={t("settings.healthRecord.bp")}
+                    checked={sections.bp}
+                    onToggle={() => toggle("bp")}
+                  />
+                  <ToggleRow
+                    label={t("settings.healthRecord.pulse")}
+                    checked={sections.pulse}
+                    onToggle={() => toggle("pulse")}
+                  />
+                  <ToggleRow
+                    label={t("settings.healthRecord.oxygenSaturation")}
+                    checked={sections.oxygenSaturation}
+                    onToggle={() => toggle("oxygenSaturation")}
+                  />
+                  <ToggleRow
+                    label={t("settings.healthRecord.bodyFat")}
+                    checked={sections.bodyFat}
+                    onToggle={() => toggle("bodyFat")}
+                  />
+                  <ToggleRow
+                    label={t("settings.healthRecord.bodyComposition")}
+                    checked={sections.bodyComposition}
+                    onToggle={() => toggle("bodyComposition")}
+                  />
+                </div>
+              </div>
 
-          <div className="border-border space-y-2 rounded-lg border p-3">
-            <p className="text-xs font-semibold">
-              {t("settings.healthRecord.groupCardio")}
-            </p>
-            <div className="grid gap-2 sm:grid-cols-2">
-              <ToggleRow
-                label={t("settings.healthRecord.restingHeartRate")}
-                checked={sections.restingHeartRate}
-                onToggle={() => toggle("restingHeartRate")}
-              />
-              <ToggleRow
-                label={t("settings.healthRecord.hrv")}
-                checked={sections.hrv}
-                onToggle={() => toggle("hrv")}
-              />
-              <ToggleRow
-                label={t("settings.healthRecord.vo2max")}
-                checked={sections.vo2max}
-                onToggle={() => toggle("vo2max")}
-              />
-            </div>
-          </div>
+              <div className="border-border space-y-2 rounded-lg border p-3">
+                <p className="text-xs font-semibold">
+                  {t("settings.healthRecord.groupCardio")}
+                </p>
+                <div className="grid gap-2 sm:grid-cols-2">
+                  <ToggleRow
+                    label={t("settings.healthRecord.restingHeartRate")}
+                    checked={sections.restingHeartRate}
+                    onToggle={() => toggle("restingHeartRate")}
+                  />
+                  <ToggleRow
+                    label={t("settings.healthRecord.hrv")}
+                    checked={sections.hrv}
+                    onToggle={() => toggle("hrv")}
+                  />
+                  <ToggleRow
+                    label={t("settings.healthRecord.vo2max")}
+                    checked={sections.vo2max}
+                    onToggle={() => toggle("vo2max")}
+                  />
+                </div>
+              </div>
 
-          <div className="border-border space-y-2 rounded-lg border p-3">
-            <p className="text-xs font-semibold">
-              {t("settings.healthRecord.groupActivity")}
-            </p>
-            <div className="grid gap-2 sm:grid-cols-2">
-              <ToggleRow
-                label={t("settings.healthRecord.steps")}
-                checked={sections.steps}
-                onToggle={() => toggle("steps")}
-              />
-              <ToggleRow
-                label={t("settings.healthRecord.distance")}
-                checked={sections.distance}
-                onToggle={() => toggle("distance")}
-              />
-              <ToggleRow
-                label={t("settings.healthRecord.sleep")}
-                checked={sections.sleep}
-                onToggle={() => toggle("sleep")}
-              />
-            </div>
-          </div>
+              <div className="border-border space-y-2 rounded-lg border p-3">
+                <p className="text-xs font-semibold">
+                  {t("settings.healthRecord.groupActivity")}
+                </p>
+                <div className="grid gap-2 sm:grid-cols-2">
+                  <ToggleRow
+                    label={t("settings.healthRecord.steps")}
+                    checked={sections.steps}
+                    onToggle={() => toggle("steps")}
+                  />
+                  <ToggleRow
+                    label={t("settings.healthRecord.distance")}
+                    checked={sections.distance}
+                    onToggle={() => toggle("distance")}
+                  />
+                  <ToggleRow
+                    label={t("settings.healthRecord.sleep")}
+                    checked={sections.sleep}
+                    onToggle={() => toggle("sleep")}
+                  />
+                </div>
+              </div>
 
-          <div className="grid gap-2 sm:grid-cols-2">
-            <ToggleRow
-              label={t("settings.healthRecord.glucose")}
-              checked={sections.glucose}
-              onToggle={() => toggle("glucose")}
-            />
-            <ToggleRow
-              label={t("settings.healthRecord.medications")}
-              checked={sections.medList && sections.compliance}
-              onToggle={toggleMedications}
-            />
-            <ToggleRow
-              label={t("settings.healthRecord.bmi")}
-              checked={sections.bmi}
-              onToggle={() => toggle("bmi")}
-            />
-            <ToggleRow
-              label={t("settings.healthRecord.mood")}
-              checked={sections.mood}
-              onToggle={() => toggle("mood")}
-            />
-          </div>
+              <div className="grid gap-2 sm:grid-cols-2">
+                <ToggleRow
+                  label={t("settings.healthRecord.glucose")}
+                  checked={sections.glucose}
+                  onToggle={() => toggle("glucose")}
+                />
+                <ToggleRow
+                  label={t("settings.healthRecord.medications")}
+                  checked={sections.medList && sections.compliance}
+                  onToggle={toggleMedications}
+                />
+                <ToggleRow
+                  label={t("settings.healthRecord.bmi")}
+                  checked={sections.bmi}
+                  onToggle={() => toggle("bmi")}
+                />
+                <ToggleRow
+                  label={t("settings.healthRecord.mood")}
+                  checked={sections.mood}
+                  onToggle={() => toggle("mood")}
+                />
+              </div>
 
-          {isPdfLike && (
-            <ToggleRow
-              label={t("settings.healthRecord.includeCharts")}
-              checked={includeCharts}
-              onToggle={() => setIncludeCharts((v) => !v)}
-            />
-          )}
-          {isPdfLike && (
-            <ToggleRow
-              label={t("settings.healthRecord.includeAiSummary")}
-              checked={includeAiSummary}
-              onToggle={() => setIncludeAiSummary((v) => !v)}
-            />
-          )}
+              {isPdfLike && (
+                <ToggleRow
+                  label={t("settings.healthRecord.includeCharts")}
+                  checked={includeCharts}
+                  onToggle={() => setIncludeCharts((v) => !v)}
+                />
+              )}
+              {isPdfLike && (
+                <ToggleRow
+                  label={t("settings.healthRecord.includeAiSummary")}
+                  checked={includeAiSummary}
+                  onToggle={() => setIncludeAiSummary((v) => !v)}
+                />
+              )}
             </div>
           )}
         </fieldset>
@@ -449,9 +448,9 @@ export function HealthRecordExportPanel() {
             className="ml-auto min-h-11 sm:min-h-9"
           >
             {busy ? (
-              <Loader2 className="mr-2 h-4 w-4 animate-spin motion-reduce:animate-none" />
+              <Loader2 className="h-4 w-4 animate-spin motion-reduce:animate-none" />
             ) : (
-              <Download className="mr-2 h-4 w-4" />
+              <Download className="h-4 w-4" />
             )}
             {t("settings.healthRecord.generate")}
           </Button>
diff --git a/src/components/settings/import-panel.tsx b/src/components/settings/import-panel.tsx
index 5ee3dfa88..f132faf5e 100644
--- a/src/components/settings/import-panel.tsx
+++ b/src/components/settings/import-panel.tsx
@@ -168,15 +168,21 @@ function AppleHealthImportCard() {
           body: form,
         });
         if (res.status === 429) {
-          setUploadError(t("settings.sections.export.import.appleHealth.rateLimited"));
+          setUploadError(
+            t("settings.sections.export.import.appleHealth.rateLimited"),
+          );
           return;
         }
         if (res.status === 413) {
-          setUploadError(t("settings.sections.export.import.appleHealth.tooLarge"));
+          setUploadError(
+            t("settings.sections.export.import.appleHealth.tooLarge"),
+          );
           return;
         }
         if (!res.ok) {
-          setUploadError(t("settings.sections.export.import.appleHealth.uploadFailed"));
+          setUploadError(
+            t("settings.sections.export.import.appleHealth.uploadFailed"),
+          );
           return;
         }
         const body = (await res.json()).data as {
@@ -184,12 +190,16 @@ function AppleHealthImportCard() {
           status: string;
         };
         if (!body?.jobId) {
-          setUploadError(t("settings.sections.export.import.appleHealth.uploadFailed"));
+          setUploadError(
+            t("settings.sections.export.import.appleHealth.uploadFailed"),
+          );
           return;
         }
         setJobId(body.jobId);
       } catch {
-        setUploadError(t("settings.sections.export.import.appleHealth.uploadFailed"));
+        setUploadError(
+          t("settings.sections.export.import.appleHealth.uploadFailed"),
+        );
       } finally {
         setUploading(false);
       }
@@ -212,8 +222,7 @@ function AppleHealthImportCard() {
   }
 
   const status = statusQuery.data ?? null;
-  const isRunning =
-    status !== null && !TERMINAL_STATES.includes(status.status);
+  const isRunning = status !== null && !TERMINAL_STATES.includes(status.status);
   const isDone = status?.status === "done";
   const isFailed = status?.status === "failed";
   const busy = uploading || isRunning;
@@ -265,7 +274,9 @@ function AppleHealthImportCard() {
         type="file"
         accept=".zip,application/zip"
         className="sr-only"
-        aria-label={t("settings.sections.export.import.appleHealth.fileInputLabel")}
+        aria-label={t(
+          "settings.sections.export.import.appleHealth.fileInputLabel",
+        )}
         onChange={onFileChange}
       />
 
@@ -292,9 +303,7 @@ function AppleHealthImportCard() {
                 `settings.sections.export.import.appleHealth.phase.${status?.status ?? "queued"}`,
               )}
             </p>
-            {typeof percent === "number" && (
-              <Progress value={percent} />
-            )}
+            {typeof percent === "number" && <Progress value={percent} />}
             {typeof status?.progress?.rowsUpserted === "number" && (
               <p className="text-muted-foreground text-xs">
                 {t("settings.sections.export.import.appleHealth.rowsImported", {
@@ -325,7 +334,7 @@ function AppleHealthImportCard() {
         {(isFailed || uploadError) && (
           <p
             role="alert"
-            className="text-destructive flex items-start gap-2 text-xs"
+            className="text-destructive flex items-start gap-2 text-sm"
           >
             <AlertCircle
               className="mt-0.5 h-3.5 w-3.5 shrink-0"
@@ -350,9 +359,9 @@ function AppleHealthImportCard() {
           data-testid="import-action-apple-health"
         >
           {busy ? (
-            <Loader2 className="mr-1 h-3.5 w-3.5 animate-spin motion-reduce:animate-none" />
+            <Loader2 className="h-3.5 w-3.5 animate-spin motion-reduce:animate-none" />
           ) : (
-            <Upload className="mr-1 h-3.5 w-3.5" />
+            <Upload className="h-3.5 w-3.5" />
           )}
           {t("settings.sections.export.import.appleHealth.choose")}
         </Button>
@@ -485,7 +494,8 @@ function JsonImportCard() {
       if (res.status === 422) {
         const body = await res.json().catch(() => null);
         setError(
-          body?.error ?? t("settings.sections.export.import.json.invalidPayload"),
+          body?.error ??
+            t("settings.sections.export.import.json.invalidPayload"),
         );
         return;
       }
@@ -570,7 +580,7 @@ function JsonImportCard() {
         {error && (
           <p
             role="alert"
-            className="text-destructive flex items-start gap-2 text-xs"
+            className="text-destructive flex items-start gap-2 text-sm"
           >
             <AlertCircle
               className="mt-0.5 h-3.5 w-3.5 shrink-0"
@@ -589,7 +599,7 @@ function JsonImportCard() {
           onClick={() => fileInputRef.current?.click()}
           data-testid="import-json-choose-file"
         >
-          <Upload className="mr-1 h-3.5 w-3.5" />
+          <Upload className="h-3.5 w-3.5" />
           {t("settings.sections.export.import.json.uploadFile")}
         </Button>
         <Button
@@ -599,7 +609,7 @@ function JsonImportCard() {
           onClick={downloadExample}
           data-testid="import-json-download-example"
         >
-          <Download className="mr-1 h-3.5 w-3.5" />
+          <Download className="h-3.5 w-3.5" />
           {t("settings.sections.export.import.json.downloadExample")}
         </Button>
         <Button
@@ -610,9 +620,9 @@ function JsonImportCard() {
           data-testid="import-action-json"
         >
           {busy ? (
-            <Loader2 className="mr-1 h-3.5 w-3.5 animate-spin motion-reduce:animate-none" />
+            <Loader2 className="h-3.5 w-3.5 animate-spin motion-reduce:animate-none" />
           ) : (
-            <FileJson className="mr-1 h-3.5 w-3.5" />
+            <FileJson className="h-3.5 w-3.5" />
           )}
           {t("settings.sections.export.import.json.import")}
         </Button>
diff --git a/src/components/settings/insights-pill-order-section.tsx b/src/components/settings/insights-pill-order-section.tsx
index f6add9fad..14004bf24 100644
--- a/src/components/settings/insights-pill-order-section.tsx
+++ b/src/components/settings/insights-pill-order-section.tsx
@@ -106,8 +106,8 @@ export function InsightsPillOrderSection({ id }: { id?: string }) {
   // differs from what we last seeded from.
   const serverSignature = layoutSignature(layout.tiles);
   const [seededSignature, setSeededSignature] = useState(serverSignature);
-  const [draftTiles, setDraftTiles] = useState<InsightsTileConfig[]>(
-    () => [...layout.tiles].sort((a, b) => a.order - b.order),
+  const [draftTiles, setDraftTiles] = useState<InsightsTileConfig[]>(() =>
+    [...layout.tiles].sort((a, b) => a.order - b.order),
   );
   if (isSuccess && serverSignature !== seededSignature) {
     setSeededSignature(serverSignature);
@@ -215,10 +215,7 @@ export function InsightsPillOrderSection({ id }: { id?: string }) {
     >
       <div className="flex flex-col gap-2 sm:flex-row sm:items-start sm:justify-between sm:gap-3">
         <div className="space-y-1">
-          <h2
-            id="insights-pill-order-title"
-            className="text-lg font-semibold"
-          >
+          <h2 id="insights-pill-order-title" className="text-lg font-semibold">
             {t("insights.pillOrder.title")}
           </h2>
           <p className="text-muted-foreground text-sm">
@@ -233,7 +230,7 @@ export function InsightsPillOrderSection({ id }: { id?: string }) {
           className="self-end sm:self-auto"
         >
           {saveMutation.isPending && (
-            <Loader2 className="mr-2 h-3.5 w-3.5 animate-spin motion-reduce:animate-none" />
+            <Loader2 className="h-3.5 w-3.5 animate-spin motion-reduce:animate-none" />
           )}
           {t("insights.pillOrder.save")}
         </Button>
@@ -320,8 +317,14 @@ function SortablePillRow({
   hideLabel: string;
   onToggle: (id: string, visible: boolean) => void;
 }) {
-  const { attributes, listeners, setNodeRef, transform, transition, isDragging } =
-    useSortable({ id });
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({ id });
 
   const style: React.CSSProperties = {
     transform: CSS.Transform.toString(transform),
diff --git a/src/components/settings/integrations-section.tsx b/src/components/settings/integrations-section.tsx
index 4d3999ee6..5aa4c9cfc 100644
--- a/src/components/settings/integrations-section.tsx
+++ b/src/components/settings/integrations-section.tsx
@@ -165,7 +165,7 @@ function IntegrationErrorMessage({ message }: { message: string }) {
   return (
     <p
       data-testid="integration-error-message"
-      className="text-destructive flex items-start gap-1.5 text-xs"
+      className="text-destructive flex items-start gap-1.5 text-sm"
     >
       <AlertCircle className="mt-0.5 h-3.5 w-3.5 shrink-0" />
       <span className="min-w-0 break-words">{message}</span>
@@ -321,7 +321,9 @@ function WithingsCard({
     },
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: queryKeys.withings() });
-      queryClient.invalidateQueries({ queryKey: queryKeys.integrationsStatus() });
+      queryClient.invalidateQueries({
+        queryKey: queryKeys.integrationsStatus(),
+      });
     },
   });
 
@@ -343,7 +345,9 @@ function WithingsCard({
     },
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: queryKeys.withings() });
-      queryClient.invalidateQueries({ queryKey: queryKeys.integrationsStatus() });
+      queryClient.invalidateQueries({
+        queryKey: queryKeys.integrationsStatus(),
+      });
     },
   });
 
@@ -368,7 +372,9 @@ function WithingsCard({
         );
         setSyncMsgType("success");
         void invalidateKeys(queryClient, measurementDependentKeys);
-        queryClient.invalidateQueries({ queryKey: queryKeys.integrationsStatus() });
+        queryClient.invalidateQueries({
+          queryKey: queryKeys.integrationsStatus(),
+        });
       } else {
         setSyncMsg(json.error || t("settings.withingsSyncFailed"));
         setSyncMsgType("error");
@@ -445,7 +451,10 @@ function WithingsCard({
         title={t("settings.withings")}
         description={t("settings.withingsDescription")}
         status={
-          <IntegrationStatusPill state={pillState} lastSyncAt={pillLastSyncAt} />
+          <IntegrationStatusPill
+            state={pillState}
+            lastSyncAt={pillLastSyncAt}
+          />
         }
       />
 
@@ -496,7 +505,7 @@ function WithingsCard({
             data-testid="withings-parked-banner"
             className="border-warning/30 bg-warning/10 flex flex-wrap items-center justify-between gap-2 rounded-md border px-3 py-2 text-sm"
           >
-            <span className="text-warning min-w-0 break-words text-xs">
+            <span className="text-warning min-w-0 text-xs break-words">
               {t("settings.integrationPill.parkedReconnect")}
             </span>
             <Button
@@ -509,9 +518,9 @@ function WithingsCard({
               className="min-h-11"
             >
               {resume.isPending ? (
-                <Loader2 className="mr-1 h-3.5 w-3.5 animate-spin motion-reduce:animate-none" />
+                <Loader2 className="h-3.5 w-3.5 animate-spin motion-reduce:animate-none" />
               ) : (
-                <Link2 className="mr-1 h-3.5 w-3.5" />
+                <Link2 className="h-3.5 w-3.5" />
               )}
               {t("settings.integrationPill.resumeCta")}
             </Button>
@@ -520,7 +529,7 @@ function WithingsCard({
         {resume.isError && (
           <p
             role="alert"
-            className="text-destructive text-xs"
+            className="text-destructive text-sm"
             data-testid="withings-resume-error"
           >
             {t("settings.integrationPill.resumeError")}
@@ -604,9 +613,9 @@ function WithingsCard({
                 }
               >
                 {credsSaving ? (
-                  <Loader2 className="mr-1 h-3.5 w-3.5 animate-spin motion-reduce:animate-none" />
+                  <Loader2 className="h-3.5 w-3.5 animate-spin motion-reduce:animate-none" />
                 ) : (
-                  <Save className="mr-1 h-3.5 w-3.5" />
+                  <Save className="h-3.5 w-3.5" />
                 )}
                 {t("settings.withingsSaveCredentials")}
               </Button>
@@ -639,9 +648,9 @@ function WithingsCard({
                 disabled={syncing}
               >
                 {syncing ? (
-                  <Loader2 className="mr-1 h-3.5 w-3.5 animate-spin motion-reduce:animate-none" />
+                  <Loader2 className="h-3.5 w-3.5 animate-spin motion-reduce:animate-none" />
                 ) : (
-                  <RefreshCw className="mr-1 h-3.5 w-3.5" />
+                  <RefreshCw className="h-3.5 w-3.5" />
                 )}
                 {t("settings.withingsSync")}
               </Button>
@@ -654,9 +663,9 @@ function WithingsCard({
                     disabled={syncing}
                   >
                     {syncing ? (
-                      <Loader2 className="mr-1 h-3.5 w-3.5 animate-spin motion-reduce:animate-none" />
+                      <Loader2 className="h-3.5 w-3.5 animate-spin motion-reduce:animate-none" />
                     ) : (
-                      <RefreshCw className="mr-1 h-3.5 w-3.5" />
+                      <RefreshCw className="h-3.5 w-3.5" />
                     )}
                     {t("settings.withingsFullSync")}
                   </Button>
@@ -689,7 +698,7 @@ function WithingsCard({
                     size="sm"
                     className="text-destructive min-h-11"
                   >
-                    <Unlink className="mr-1 h-3.5 w-3.5" />
+                    <Unlink className="h-3.5 w-3.5" />
                     {t("settings.withingsDisconnect")}
                   </Button>
                 </AlertDialogTrigger>
@@ -730,7 +739,7 @@ function WithingsCard({
               window.location.href = "/api/withings/connect";
             }}
           >
-            <Link2 className="mr-2 h-4 w-4" />
+            <Link2 className="h-4 w-4" />
             {t("settings.withingsConnect")}
           </Button>
         ) : (
@@ -816,7 +825,9 @@ function WhoopCard({
       });
       const json = await res.json();
       if (res.ok) {
-        setSyncMsg(t("settings.whoopSyncResult", { count: json.data.imported }));
+        setSyncMsg(
+          t("settings.whoopSyncResult", { count: json.data.imported }),
+        );
         setSyncMsgType("success");
         void invalidateKeys(queryClient, measurementDependentKeys);
         queryClient.invalidateQueries({ queryKey: queryKeys.whoop() });
@@ -897,7 +908,10 @@ function WhoopCard({
           </>
         }
         status={
-          <IntegrationStatusPill state={pillState} lastSyncAt={pillLastSyncAt} />
+          <IntegrationStatusPill
+            state={pillState}
+            lastSyncAt={pillLastSyncAt}
+          />
         }
       />
 
@@ -920,7 +934,7 @@ function WhoopCard({
             data-testid="whoop-parked-banner"
             className="border-warning/30 bg-warning/10 flex flex-wrap items-center justify-between gap-2 rounded-md border px-3 py-2 text-sm"
           >
-            <span className="text-warning min-w-0 break-words text-xs">
+            <span className="text-warning min-w-0 text-xs break-words">
               {t("settings.integrationPill.parkedReconnect")}
             </span>
             <Button
@@ -933,9 +947,9 @@ function WhoopCard({
               className="min-h-11"
             >
               {resume.isPending ? (
-                <Loader2 className="mr-1 h-3.5 w-3.5 animate-spin motion-reduce:animate-none" />
+                <Loader2 className="h-3.5 w-3.5 animate-spin motion-reduce:animate-none" />
               ) : (
-                <Link2 className="mr-1 h-3.5 w-3.5" />
+                <Link2 className="h-3.5 w-3.5" />
               )}
               {t("settings.integrationPill.resumeCta")}
             </Button>
@@ -944,7 +958,7 @@ function WhoopCard({
         {resume.isError && (
           <p
             role="alert"
-            className="text-destructive text-xs"
+            className="text-destructive text-sm"
             data-testid="whoop-resume-error"
           >
             {t("settings.integrationPill.resumeError")}
@@ -1023,9 +1037,9 @@ function WhoopCard({
                 }
               >
                 {credsSaving ? (
-                  <Loader2 className="mr-1 h-3.5 w-3.5 animate-spin motion-reduce:animate-none" />
+                  <Loader2 className="h-3.5 w-3.5 animate-spin motion-reduce:animate-none" />
                 ) : (
-                  <Save className="mr-1 h-3.5 w-3.5" />
+                  <Save className="h-3.5 w-3.5" />
                 )}
                 {t("settings.whoopSaveCredentials")}
               </Button>
@@ -1052,9 +1066,9 @@ function WhoopCard({
                 disabled={syncing}
               >
                 {syncing ? (
-                  <Loader2 className="mr-1 h-3.5 w-3.5 animate-spin motion-reduce:animate-none" />
+                  <Loader2 className="h-3.5 w-3.5 animate-spin motion-reduce:animate-none" />
                 ) : (
-                  <RefreshCw className="mr-1 h-3.5 w-3.5" />
+                  <RefreshCw className="h-3.5 w-3.5" />
                 )}
                 {t("settings.whoopSync")}
               </Button>
@@ -1067,9 +1081,9 @@ function WhoopCard({
                     disabled={syncing}
                   >
                     {syncing ? (
-                      <Loader2 className="mr-1 h-3.5 w-3.5 animate-spin motion-reduce:animate-none" />
+                      <Loader2 className="h-3.5 w-3.5 animate-spin motion-reduce:animate-none" />
                     ) : (
-                      <RefreshCw className="mr-1 h-3.5 w-3.5" />
+                      <RefreshCw className="h-3.5 w-3.5" />
                     )}
                     {t("settings.whoopFullSync")}
                   </Button>
@@ -1102,7 +1116,7 @@ function WhoopCard({
                     size="sm"
                     className="text-destructive min-h-11"
                   >
-                    <Unlink className="mr-1 h-3.5 w-3.5" />
+                    <Unlink className="h-3.5 w-3.5" />
                     {t("settings.whoopDisconnect")}
                   </Button>
                 </AlertDialogTrigger>
@@ -1148,7 +1162,7 @@ function WhoopCard({
               window.location.href = "/api/whoop/connect";
             }}
           >
-            <Link2 className="mr-2 h-4 w-4" />
+            <Link2 className="h-4 w-4" />
             {t("settings.whoopConnect")}
           </Button>
         ) : (
@@ -1344,7 +1358,10 @@ function FitbitCard({
           </>
         }
         status={
-          <IntegrationStatusPill state={pillState} lastSyncAt={pillLastSyncAt} />
+          <IntegrationStatusPill
+            state={pillState}
+            lastSyncAt={pillLastSyncAt}
+          />
         }
       />
 
@@ -1366,7 +1383,7 @@ function FitbitCard({
             data-testid="fitbit-parked-banner"
             className="border-warning/30 bg-warning/10 flex flex-wrap items-center justify-between gap-2 rounded-md border px-3 py-2 text-sm"
           >
-            <span className="text-warning min-w-0 break-words text-xs">
+            <span className="text-warning min-w-0 text-xs break-words">
               {t("settings.integrationPill.parkedReconnect")}
             </span>
             <Button
@@ -1379,9 +1396,9 @@ function FitbitCard({
               className="min-h-11"
             >
               {resume.isPending ? (
-                <Loader2 className="mr-1 h-3.5 w-3.5 animate-spin motion-reduce:animate-none" />
+                <Loader2 className="h-3.5 w-3.5 animate-spin motion-reduce:animate-none" />
               ) : (
-                <Link2 className="mr-1 h-3.5 w-3.5" />
+                <Link2 className="h-3.5 w-3.5" />
               )}
               {t("settings.integrationPill.resumeCta")}
             </Button>
@@ -1390,7 +1407,7 @@ function FitbitCard({
         {resume.isError && (
           <p
             role="alert"
-            className="text-destructive text-xs"
+            className="text-destructive text-sm"
             data-testid="fitbit-resume-error"
           >
             {t("settings.integrationPill.resumeError")}
@@ -1469,9 +1486,9 @@ function FitbitCard({
                 }
               >
                 {credsSaving ? (
-                  <Loader2 className="mr-1 h-3.5 w-3.5 animate-spin motion-reduce:animate-none" />
+                  <Loader2 className="h-3.5 w-3.5 animate-spin motion-reduce:animate-none" />
                 ) : (
-                  <Save className="mr-1 h-3.5 w-3.5" />
+                  <Save className="h-3.5 w-3.5" />
                 )}
                 {t("settings.fitbitSaveCredentials")}
               </Button>
@@ -1498,9 +1515,9 @@ function FitbitCard({
                 disabled={syncing}
               >
                 {syncing ? (
-                  <Loader2 className="mr-1 h-3.5 w-3.5 animate-spin motion-reduce:animate-none" />
+                  <Loader2 className="h-3.5 w-3.5 animate-spin motion-reduce:animate-none" />
                 ) : (
-                  <RefreshCw className="mr-1 h-3.5 w-3.5" />
+                  <RefreshCw className="h-3.5 w-3.5" />
                 )}
                 {t("settings.fitbitSync")}
               </Button>
@@ -1513,9 +1530,9 @@ function FitbitCard({
                     disabled={syncing}
                   >
                     {syncing ? (
-                      <Loader2 className="mr-1 h-3.5 w-3.5 animate-spin motion-reduce:animate-none" />
+                      <Loader2 className="h-3.5 w-3.5 animate-spin motion-reduce:animate-none" />
                     ) : (
-                      <RefreshCw className="mr-1 h-3.5 w-3.5" />
+                      <RefreshCw className="h-3.5 w-3.5" />
                     )}
                     {t("settings.fitbitFullSync")}
                   </Button>
@@ -1548,7 +1565,7 @@ function FitbitCard({
                     size="sm"
                     className="text-destructive min-h-11"
                   >
-                    <Unlink className="mr-1 h-3.5 w-3.5" />
+                    <Unlink className="h-3.5 w-3.5" />
                     {t("settings.fitbitDisconnect")}
                   </Button>
                 </AlertDialogTrigger>
@@ -1594,7 +1611,7 @@ function FitbitCard({
               window.location.href = "/api/fitbit/connect";
             }}
           >
-            <Link2 className="mr-2 h-4 w-4" />
+            <Link2 className="h-4 w-4" />
             {t("settings.fitbitConnect")}
           </Button>
         ) : (
diff --git a/src/components/settings/notification-status-card.tsx b/src/components/settings/notification-status-card.tsx
index b0609ac8e..fe9b5c835 100644
--- a/src/components/settings/notification-status-card.tsx
+++ b/src/components/settings/notification-status-card.tsx
@@ -92,7 +92,9 @@ export function NotificationStatusCard() {
       if (!res.ok) throw new Error("Failed");
     },
     onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: queryKeys.notificationsStatus() });
+      queryClient.invalidateQueries({
+        queryKey: queryKeys.notificationsStatus(),
+      });
     },
   });
 
@@ -105,7 +107,9 @@ export function NotificationStatusCard() {
       }
     },
     onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: queryKeys.notificationsStatus() });
+      queryClient.invalidateQueries({
+        queryKey: queryKeys.notificationsStatus(),
+      });
     },
   });
 
@@ -286,9 +290,9 @@ function ChannelRow({
             className="min-h-11"
           >
             {reEnablePending ? (
-              <Loader2 className="mr-1 h-3.5 w-3.5 animate-spin motion-reduce:animate-none" />
+              <Loader2 className="h-3.5 w-3.5 animate-spin motion-reduce:animate-none" />
             ) : (
-              <RotateCw className="mr-1 h-3.5 w-3.5" />
+              <RotateCw className="h-3.5 w-3.5" />
             )}
             {t("settings.notificationStatus.reEnable")}
           </Button>
@@ -303,9 +307,9 @@ function ChannelRow({
           className="min-h-11"
         >
           {testPending ? (
-            <Loader2 className="mr-1 h-3.5 w-3.5 animate-spin motion-reduce:animate-none" />
+            <Loader2 className="h-3.5 w-3.5 animate-spin motion-reduce:animate-none" />
           ) : (
-            <Send className="mr-1 h-3.5 w-3.5" />
+            <Send className="h-3.5 w-3.5" />
           )}
           {t("settings.notificationStatus.sendTest")}
         </Button>
@@ -328,8 +332,7 @@ function stateBadgeFor(
       return {
         label: t("settings.notificationStatus.stateActive"),
         variant: "default",
-        className:
-          "border-success/30 bg-success/15 text-success",
+        className: "border-success/30 bg-success/15 text-success",
         icon: <CheckCircle2 className="h-3 w-3" aria-hidden />,
       };
     case "auto_disabled":
diff --git a/src/components/settings/ntfy-card.tsx b/src/components/settings/ntfy-card.tsx
index af1c34142..dc0007425 100644
--- a/src/components/settings/ntfy-card.tsx
+++ b/src/components/settings/ntfy-card.tsx
@@ -166,7 +166,7 @@ export function NtfyCard({ isAuthenticated }: { isAuthenticated: boolean }) {
               className="min-h-11"
             >
               {save.isPending && (
-                <Loader2 className="mr-1 h-3.5 w-3.5 animate-spin motion-reduce:animate-none" />
+                <Loader2 className="h-3.5 w-3.5 animate-spin motion-reduce:animate-none" />
               )}
               {t("common.save")}
             </Button>
diff --git a/src/components/settings/sources-section.tsx b/src/components/settings/sources-section.tsx
index e3ba990ef..0dc3585d2 100644
--- a/src/components/settings/sources-section.tsx
+++ b/src/components/settings/sources-section.tsx
@@ -337,7 +337,7 @@ export function SourcesSection() {
             disabled={resetMutation.isPending || saveMutation.isPending}
             className="self-end sm:self-auto"
           >
-            <RotateCcw className="mr-2 h-3.5 w-3.5" />
+            <RotateCcw className="h-3.5 w-3.5" />
             {t("settings.sections.sources.resetDefaults")}
           </Button>
         </div>
@@ -523,7 +523,7 @@ export function SourcesSection() {
                     onClick={resetDeviceTypeAxis}
                     disabled={saveMutation.isPending}
                   >
-                    <RotateCcw className="mr-1 h-3 w-3" />
+                    <RotateCcw className="h-3 w-3" />
                     {t("settings.sections.sources.resetDeviceTypes")}
                   </Button>
                 </div>
@@ -597,7 +597,7 @@ export function SourcesSection() {
               disabled={saveMutation.isPending}
             >
               {saveMutation.isPending && (
-                <Loader2 className="mr-2 h-3.5 w-3.5 animate-spin motion-reduce:animate-none" />
+                <Loader2 className="h-3.5 w-3.5 animate-spin motion-reduce:animate-none" />
               )}
               {t("common.save")}
             </Button>
diff --git a/src/components/settings/telegram-card.tsx b/src/components/settings/telegram-card.tsx
index ec66489d0..e886663ae 100644
--- a/src/components/settings/telegram-card.tsx
+++ b/src/components/settings/telegram-card.tsx
@@ -156,9 +156,7 @@ export function TelegramCard({
             <p
               role="alert"
               className={`text-sm ${
-                msgType === "success"
-                  ? "text-success"
-                  : "text-destructive"
+                msgType === "success" ? "text-success" : "text-destructive"
               }`}
             >
               {msg}
@@ -172,9 +170,9 @@ export function TelegramCard({
             />
             <Button type="submit" disabled={saving} className="min-h-11">
               {saving ? (
-                <Loader2 className="mr-1 h-3.5 w-3.5 animate-spin motion-reduce:animate-none" />
+                <Loader2 className="h-3.5 w-3.5 animate-spin motion-reduce:animate-none" />
               ) : (
-                <Save className="mr-1 h-3.5 w-3.5" />
+                <Save className="h-3.5 w-3.5" />
               )}
               {t("common.save")}
             </Button>
diff --git a/src/components/settings/test-connection-button.tsx b/src/components/settings/test-connection-button.tsx
index e6e5ea84f..7a66580c0 100644
--- a/src/components/settings/test-connection-button.tsx
+++ b/src/components/settings/test-connection-button.tsx
@@ -88,9 +88,9 @@ export function TestConnectionButton({
         disabled={disabled || testing}
       >
         {testing ? (
-          <Loader2 className="mr-1 h-3.5 w-3.5 animate-spin motion-reduce:animate-none" />
+          <Loader2 className="h-3.5 w-3.5 animate-spin motion-reduce:animate-none" />
         ) : (
-          <Plug className="mr-1 h-3.5 w-3.5" />
+          <Plug className="h-3.5 w-3.5" />
         )}
         {testing
           ? t("settings.testConnection.testing")
@@ -110,7 +110,7 @@ export function TestConnectionButton({
       {result?.kind === "error" && (
         <p
           role="alert"
-          className="text-destructive flex items-center gap-1.5 text-xs"
+          className="text-destructive flex items-center gap-1.5 text-sm"
         >
           <XCircle className="h-3.5 w-3.5" />
           {describeError(result.errorCode)}
diff --git a/src/components/settings/thresholds-editor-section.tsx b/src/components/settings/thresholds-editor-section.tsx
index 4b33495a3..4ac8bf765 100644
--- a/src/components/settings/thresholds-editor-section.tsx
+++ b/src/components/settings/thresholds-editor-section.tsx
@@ -138,7 +138,7 @@ export function ThresholdsEditorSection({ id }: { id: string }) {
             onClick={() => resetMutation.mutate(null)}
             disabled={resetMutation.isPending}
           >
-            <RotateCcw className="mr-2 h-3.5 w-3.5" />
+            <RotateCcw className="h-3.5 w-3.5" />
             {t("thresholds.resetAllAction")}
           </Button>
         )}
diff --git a/src/components/settings/web-push-card.tsx b/src/components/settings/web-push-card.tsx
index 9e4491cfe..99928905f 100644
--- a/src/components/settings/web-push-card.tsx
+++ b/src/components/settings/web-push-card.tsx
@@ -172,7 +172,7 @@ export function WebPushCard() {
           disabled={actionLoading}
         >
           {actionLoading && (
-            <Loader2 className="mr-1 h-3.5 w-3.5 animate-spin motion-reduce:animate-none" />
+            <Loader2 className="h-3.5 w-3.5 animate-spin motion-reduce:animate-none" />
           )}
           {t("settings.webPushUnsubscribe")}
         </Button>
@@ -185,9 +185,9 @@ export function WebPushCard() {
           disabled={actionLoading}
         >
           {actionLoading ? (
-            <Loader2 className="mr-1 h-3.5 w-3.5 animate-spin motion-reduce:animate-none" />
+            <Loader2 className="h-3.5 w-3.5 animate-spin motion-reduce:animate-none" />
           ) : (
-            <BellRing className="mr-1 h-3.5 w-3.5" />
+            <BellRing className="h-3.5 w-3.5" />
           )}
           {t("settings.webPushSubscribe")}
         </Button>
diff --git a/src/components/targets/target-edit-sheet.tsx b/src/components/targets/target-edit-sheet.tsx
index baa25561f..6174acf4d 100644
--- a/src/components/targets/target-edit-sheet.tsx
+++ b/src/components/targets/target-edit-sheet.tsx
@@ -131,9 +131,7 @@ function TargetEditSheetBody({
   // to canonical mg/dL before the PUT — otherwise a `5.5 mmol/L` target
   // is rejected by the 40–400 mg/dL bounds or stored verbatim as 5.5.
   const isGlucoseMmol =
-    metric != null &&
-    metric.startsWith("BLOOD_GLUCOSE") &&
-    unit === "mmol/L";
+    metric != null && metric.startsWith("BLOOD_GLUCOSE") && unit === "mmol/L";
   const toDisplay = (mgdl: number) =>
     isGlucoseMmol ? convertGlucose(mgdl, "mmol/L") : mgdl;
   const toCanonical = (displayValue: number) =>
@@ -374,7 +372,7 @@ function TargetEditSheetBody({
               disabled={busy}
               data-slot="target-edit-reset"
             >
-              <RotateCcw className="mr-2 h-3.5 w-3.5" />
+              <RotateCcw className="h-3.5 w-3.5" />
               {t("targets.edit.resetToDefault")}
             </Button>
           ) : (
@@ -414,88 +412,88 @@ function TargetEditSheetBody({
 
         {!isDerivedMetric && primaryBounds && (
           <div className="space-y-4">
-          <div
-            className="grid grid-cols-1 gap-3 sm:grid-cols-2"
-            data-slot="target-edit-primary-row"
-          >
-            <div className="space-y-1">
-              <Label htmlFor="target-edit-min" className="text-xs">
-                {isBp
-                  ? t("targets.edit.systolicMin")
-                  : t("targets.edit.minLabel")}
-              </Label>
-              <Input
-                id="target-edit-min"
-                ref={firstInputRef}
-                type="number"
-                step={targetType === "ACTIVITY_STEPS" ? 100 : 0.1}
-                min={primaryBounds.min}
-                max={primaryBounds.max}
-                value={displayMin}
-                onChange={(e) => setMinStr(e.target.value)}
-                disabled={busy}
-                data-slot="target-edit-min-input"
-              />
-            </div>
-            <div className="space-y-1">
-              <Label htmlFor="target-edit-max" className="text-xs">
-                {isBp
-                  ? t("targets.edit.systolicMax")
-                  : t("targets.edit.maxLabel")}
-              </Label>
-              <Input
-                id="target-edit-max"
-                type="number"
-                step={targetType === "ACTIVITY_STEPS" ? 100 : 0.1}
-                min={primaryBounds.min}
-                max={primaryBounds.max}
-                value={displayMax}
-                onChange={(e) => setMaxStr(e.target.value)}
-                disabled={busy}
-                data-slot="target-edit-max-input"
-              />
-            </div>
-          </div>
-
-          {isBp && secondaryBounds && (
             <div
               className="grid grid-cols-1 gap-3 sm:grid-cols-2"
-              data-slot="target-edit-secondary-row"
+              data-slot="target-edit-primary-row"
             >
               <div className="space-y-1">
-                <Label htmlFor="target-edit-dia-min" className="text-xs">
-                  {t("targets.edit.diastolicMin")}
+                <Label htmlFor="target-edit-min" className="text-xs">
+                  {isBp
+                    ? t("targets.edit.systolicMin")
+                    : t("targets.edit.minLabel")}
                 </Label>
                 <Input
-                  id="target-edit-dia-min"
+                  id="target-edit-min"
+                  ref={firstInputRef}
                   type="number"
-                  step={0.1}
-                  min={secondaryBounds.min}
-                  max={secondaryBounds.max}
-                  value={displayDiaMin}
-                  onChange={(e) => setDiaMinStr(e.target.value)}
+                  step={targetType === "ACTIVITY_STEPS" ? 100 : 0.1}
+                  min={primaryBounds.min}
+                  max={primaryBounds.max}
+                  value={displayMin}
+                  onChange={(e) => setMinStr(e.target.value)}
                   disabled={busy}
-                  data-slot="target-edit-dia-min-input"
+                  data-slot="target-edit-min-input"
                 />
               </div>
               <div className="space-y-1">
-                <Label htmlFor="target-edit-dia-max" className="text-xs">
-                  {t("targets.edit.diastolicMax")}
+                <Label htmlFor="target-edit-max" className="text-xs">
+                  {isBp
+                    ? t("targets.edit.systolicMax")
+                    : t("targets.edit.maxLabel")}
                 </Label>
                 <Input
-                  id="target-edit-dia-max"
+                  id="target-edit-max"
                   type="number"
-                  step={0.1}
-                  min={secondaryBounds.min}
-                  max={secondaryBounds.max}
-                  value={displayDiaMax}
-                  onChange={(e) => setDiaMaxStr(e.target.value)}
+                  step={targetType === "ACTIVITY_STEPS" ? 100 : 0.1}
+                  min={primaryBounds.min}
+                  max={primaryBounds.max}
+                  value={displayMax}
+                  onChange={(e) => setMaxStr(e.target.value)}
                   disabled={busy}
-                  data-slot="target-edit-dia-max-input"
+                  data-slot="target-edit-max-input"
                 />
               </div>
             </div>
-          )}
+
+            {isBp && secondaryBounds && (
+              <div
+                className="grid grid-cols-1 gap-3 sm:grid-cols-2"
+                data-slot="target-edit-secondary-row"
+              >
+                <div className="space-y-1">
+                  <Label htmlFor="target-edit-dia-min" className="text-xs">
+                    {t("targets.edit.diastolicMin")}
+                  </Label>
+                  <Input
+                    id="target-edit-dia-min"
+                    type="number"
+                    step={0.1}
+                    min={secondaryBounds.min}
+                    max={secondaryBounds.max}
+                    value={displayDiaMin}
+                    onChange={(e) => setDiaMinStr(e.target.value)}
+                    disabled={busy}
+                    data-slot="target-edit-dia-min-input"
+                  />
+                </div>
+                <div className="space-y-1">
+                  <Label htmlFor="target-edit-dia-max" className="text-xs">
+                    {t("targets.edit.diastolicMax")}
+                  </Label>
+                  <Input
+                    id="target-edit-dia-max"
+                    type="number"
+                    step={0.1}
+                    min={secondaryBounds.min}
+                    max={secondaryBounds.max}
+                    value={displayDiaMax}
+                    onChange={(e) => setDiaMaxStr(e.target.value)}
+                    disabled={busy}
+                    data-slot="target-edit-dia-max-input"
+                  />
+                </div>
+              </div>
+            )}
 
             <p className="text-muted-foreground text-xs">
               {t("targets.edit.boundsHint", {
diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
index 0e3df88f6..bcf43539b 100644
--- a/src/components/ui/button.tsx
+++ b/src/components/ui/button.tsx
@@ -18,9 +18,9 @@ import { cn } from "@/lib/utils";
  *   ```tsx
  *   <Button disabled={loading} aria-busy={loading || undefined}>
  *     {loading ? (
- *       <Loader2 className="mr-2 h-4 w-4 animate-spin motion-reduce:animate-none" />
+ *       <Loader2 className="h-4 w-4 animate-spin motion-reduce:animate-none" />
  *     ) : (
- *       <Icon className="mr-2 h-4 w-4" />
+ *       <Icon className="h-4 w-4" />
  *     )}
  *     {label}
  *   </Button>
diff --git a/src/components/ui/responsive-sheet.tsx b/src/components/ui/responsive-sheet.tsx
index 77c4683b2..0099f2a85 100644
--- a/src/components/ui/responsive-sheet.tsx
+++ b/src/components/ui/responsive-sheet.tsx
@@ -42,7 +42,18 @@ export interface ResponsiveSheetProps {
    */
   hideHeader?: boolean;
   /**
-   * Footer slot. The Sheet branch sticky-pins the footer to the
+   * Footer slot. Pass the action `<Button>`s directly (a fragment is
+   * fine) — never a wrapper `<div className="flex …">`. The two
+   * branches deliberately stack differently and both rely on owning
+   * the flex context: the Sheet branch pins a `flex-row justify-end`
+   * bar so Cancel/Save sit side by side above the keyboard, while the
+   * Dialog branch defers to `DialogFooter`'s `flex-col-reverse
+   * sm:flex-row` so narrow dialogs stack the primary action on top.
+   * A consumer-supplied wrapper div collapses both into a single flex
+   * child and breaks that responsive stacking. This split is a
+   * decision, not drift — don't unify the two branches.
+   *
+   * The Sheet branch sticky-pins the footer to the
    * bottom of the bottom-sheet so the primary CTA stays reachable
    * once the body scrolls; the Dialog branch lets the footer flow
    * normally beneath the body.
@@ -167,7 +178,7 @@ export function ResponsiveSheet({
           {footer ? (
             <SheetFooter
               data-slot="responsive-sheet-footer"
-              className="border-border/70 sticky bottom-0 mt-0 flex-row justify-end gap-2 border-t bg-background/95 p-4 backdrop-blur supports-[backdrop-filter]:bg-background/80"
+              className="border-border/70 bg-background/95 supports-[backdrop-filter]:bg-background/80 sticky bottom-0 mt-0 flex-row justify-end gap-2 border-t p-4 backdrop-blur"
             >
               {footer}
             </SheetFooter>