chore(v1.22): clear the QA punch-list across Coach, insights, settings

Code-review and design follow-ups before the v1.22 cut. No behaviour change
beyond the items below.

Coach / insights:
- Coach SSE route: a non-provider error raised inside the open producer (e.g. a
  DB failure persisting the reply) now records on the wide event and forwards to
  GlitchTip instead of masquerading as a provider outage; it still surfaces an
  error frame since the stream is open.
- Lab ↔ outcome correlations: hedge faint-tier pairs ("a faint hint, if
  anything … too small to lean on") so the narrated confidence never outruns the
  effect, matching the daily engine.
- Reminder sweep: mint the plan-review reminder and clear the plan's reviewDate
  in one transaction so a half-applied write can't duplicate the reminder.
- Fold the two raw provider-fallback runners onto one shared chain walker.

Design / accessibility:
- Lift sub-44px tap targets to the 44px mobile floor (suggested-action card,
  Coach bubble affordances), brighten the resting timestamp clock for non-text
  contrast, and route the lab chart height through the shared constant.
- Replace ad-hoc arbitrary type sizes with the scale token and static size-11
  icon buttons with the named icon-lg variant.
- Settings: add the missing About card-header descriptions, normalise the
  low-stock numeric widths, and relax the notification-status rows from nested
  cards to a divided list.

Housekeeping:
- Drop three unused exported types (and the now-orphaned source const), re-stamp
  v1.21.5 comments to v1.22, and register the live-judge eval harness as a knip
  entry so the script-only module resolves.

src/components/data-list/delete-button.tsx

@@ -32,7 +32,7 @@ export function DeleteButton({
   description,
   cancelLabel,
   confirmLabel,
-  className = "size-11",
+  className = "",
   iconClassName = "h-3.5 w-3.5",
 }: {
   onConfirm: () => void;
@@ -49,7 +49,7 @@ export function DeleteButton({
       <AlertDialogTrigger asChild>
         <Button
           variant="ghost"
-          size="icon"
+          size="icon-lg"
           className={`text-destructive ${className}`}
           aria-label={confirmLabel ?? t("common.delete")}
         >

src/components/insights/__tests__/daily-briefing.test.tsx

@@ -1,9 +1,19 @@
-import { describe, it, expect } from "vitest";
+import { describe, it, expect, vi } from "vitest";
 import { renderToStaticMarkup } from "react-dom/server";
 import { I18nProvider } from "@/lib/i18n/context";
 import { DailyBriefing } from "../daily-briefing";
 import type { DailyBriefing as DailyBriefingPayload } from "@/lib/ai/schema";
 
+// The updated-at footer reads the profile timezone via `useAuth`; stub it so the
+// SSR render does not reach for a QueryClient the static-markup test omits.
+vi.mock("@/hooks/use-auth", () => ({
+  useAuth: () => ({
+    user: { timezone: "Europe/Berlin" },
+    isAuthenticated: true,
+    isLoading: false,
+  }),
+}));
+
 /**
  * v1.4.20 phase B1 — full-width Daily Briefing card.
  *

src/components/insights/__tests__/hero-strip.test.tsx

@@ -1,9 +1,19 @@
-import { describe, it, expect } from "vitest";
+import { describe, it, expect, vi } from "vitest";
 import { renderToStaticMarkup } from "react-dom/server";
 import { I18nProvider } from "@/lib/i18n/context";
 import { HeroStrip } from "../hero-strip";
 import type { DailyBriefing as DailyBriefingPayload } from "@/lib/ai/schema";
 
+// The "generated" freshness line reads the profile timezone via `useAuth`; stub
+// it so the SSR render does not reach for a QueryClient the test omits.
+vi.mock("@/hooks/use-auth", () => ({
+  useAuth: () => ({
+    user: { timezone: "Europe/Berlin" },
+    isAuthenticated: true,
+    isLoading: false,
+  }),
+}));
+
 /**
  * Insights hero strip — pins the slots so future polish can't
  * silently drop the greeting / subtitle / baseline meta. v1.18.7
@@ -94,7 +104,10 @@ describe("<HeroStrip>", () => {
     expect(html).toContain("Based on your last 90 days");
   });
 
-  it("renders the generated-time caption when updatedAt is supplied", () => {
+  it("renders the freshness caption when updatedAt is supplied", () => {
+    // v1.22 — the hero freshness line now uses `formatUpdatedLabel` for parity
+    // with the briefing + per-metric cards: a same-day timestamp reads
+    // "Updated today, HH:MM" rather than the old relative "Generated … ago".
     const fiveMinutesAgo = new Date(Date.now() - 5 * 60_000).toISOString();
     const html = render(
       <HeroStrip
@@ -104,7 +117,7 @@ describe("<HeroStrip>", () => {
       />,
     );
     expect(html).toMatch(/data-slot="insights-hero-strip-generated"/);
-    expect(html).toContain("Generated");
+    expect(html).toContain("Updated today");
   });
 
   it("does NOT render the generated caption when updatedAt is missing", () => {

src/components/insights/__tests__/insight-status-card.test.tsx

@@ -1,9 +1,19 @@
-import { describe, it, expect } from "vitest";
+import { describe, it, expect, vi } from "vitest";
 import { renderToStaticMarkup } from "react-dom/server";
 
 import { I18nProvider } from "@/lib/i18n/context";
 import { InsightStatusCard } from "../insight-status-card";
 
+// The last-updated footer reads the profile timezone via `useAuth`; stub it so
+// the SSR render does not reach for a QueryClient the static-markup test omits.
+vi.mock("@/hooks/use-auth", () => ({
+  useAuth: () => ({
+    user: { timezone: "Europe/Berlin" },
+    isAuthenticated: true,
+    isLoading: false,
+  }),
+}));
+
 /**
  * v1.4.27 — F16 regression cover. The per-metric status text comes
  * out of the AI provider with a literal `metric:<TYPE>` token (the

src/components/insights/coach-panel/coach-drawer.tsx

@@ -165,12 +165,12 @@ export function CoachDrawer({
             <Button
               type="button"
               variant="ghost"
-              size="icon"
+              size="icon-lg"
               onClick={handleMaximize}
               data-slot="coach-drawer-maximize"
               aria-label={t("insights.coach.maximizeAriaLabel")}
               title={t("insights.coach.maximizeAriaLabel")}
-              className="text-muted-foreground hover:text-foreground size-11 shrink-0"
+              className="text-muted-foreground hover:text-foreground shrink-0"
             >
               <Maximize2 className="size-4" aria-hidden="true" />
             </Button>
@@ -183,11 +183,11 @@ export function CoachDrawer({
               <Button
                 type="button"
                 variant="ghost"
-                size="icon"
+                size="icon-lg"
                 data-slot="coach-drawer-close"
                 aria-label={t("common.close")}
                 title={t("common.close")}
-                className="text-muted-foreground hover:text-foreground size-11 shrink-0"
+                className="text-muted-foreground hover:text-foreground shrink-0"
               >
                 <X className="size-4" aria-hidden="true" />
               </Button>

src/components/insights/coach-panel/message-thread.tsx

@@ -452,7 +452,10 @@ function ReadAloudButton({ content }: { content: string }) {
       aria-label={label}
       aria-pressed={speaking}
       title={label}
-      className="text-muted-foreground hover:text-foreground focus-visible:ring-ring/50 inline-flex min-h-8 items-center gap-1 rounded px-1.5 py-1 text-xs outline-none focus-visible:ring-2"
+      // Interactive bubble affordances share one tap convention:
+      // `min-h-11 sm:min-h-9` (44px mobile floor → 36px desktop), matching the
+      // feedback buttons below. Keep TTS / remember / feedback in lockstep.
+      className="text-muted-foreground hover:text-foreground focus-visible:ring-ring/50 inline-flex min-h-11 items-center gap-1 rounded px-1.5 py-1 text-xs outline-none focus-visible:ring-2 sm:min-h-9"
     >
       {speaking ? (
         <VolumeX className="size-3" aria-hidden="true" />
@@ -488,7 +491,7 @@ function BubbleTimestamp({
         aria-label={t("insights.coach.messageTimeLabel", { time: label })}
         onClick={() => setOpen((o) => !o)}
         onBlur={() => setOpen(false)}
-        className="peer text-muted-foreground/50 hover:text-muted-foreground focus-visible:ring-ring/50 inline-flex size-6 items-center justify-center rounded outline-none focus-visible:ring-2"
+        className="peer text-muted-foreground/70 hover:text-muted-foreground focus-visible:ring-ring/50 inline-flex size-11 items-center justify-center rounded outline-none focus-visible:ring-2 sm:size-8"
       >
         <Clock className="size-3" aria-hidden="true" />
       </button>
@@ -929,7 +932,7 @@ function ChatBubble({
           <div
             aria-hidden="true"
             data-slot="coach-bubble-user-avatar"
-            className="text-muted-foreground bg-muted/60 mt-0.5 flex size-8 shrink-0 items-center justify-center rounded-full text-[11px] font-semibold"
+            className="text-muted-foreground bg-muted/60 mt-0.5 flex size-8 shrink-0 items-center justify-center rounded-full text-xs font-semibold"
           >
             {initials ?? <User className="size-3.5" />}
           </div>
@@ -1278,7 +1281,7 @@ function RememberUserMessage({ content }: { content: string }) {
       disabled={remember.isPending}
       className={cn(
         "text-muted-foreground hover:text-foreground focus-visible:ring-ring/50",
-        "inline-flex min-h-8 items-center gap-1 rounded px-1.5 py-1 text-xs",
+        "inline-flex min-h-11 items-center gap-1 rounded px-1.5 py-1 text-xs sm:min-h-9",
         "outline-none focus-visible:ring-2 disabled:opacity-50",
         // Calmer thread on pointer devices: the control stays invisible
         // until its bubble is hovered or holds focus. Touch viewports

src/components/insights/coach-panel/suggested-action-card.tsx

@@ -103,7 +103,7 @@ export function SuggestedActionCard({
           disabled={busy}
           className={cn(
             "bg-dracula-purple/90 text-background hover:bg-dracula-purple",
-            "focus-visible:ring-ring/50 inline-flex min-h-9 items-center gap-1.5",
+            "focus-visible:ring-ring/50 inline-flex min-h-11 items-center gap-1.5 sm:min-h-9",
             "rounded-md px-3 py-1.5 text-xs font-medium outline-none",
             "focus-visible:ring-2 disabled:opacity-50",
           )}
@@ -123,7 +123,7 @@ export function SuggestedActionCard({
           data-slot="coach-suggested-action-dismiss"
           onClick={() => setSettled("dismissed")}
           disabled={busy}
-          className="text-muted-foreground hover:text-foreground focus-visible:ring-ring/50 inline-flex min-h-9 items-center rounded-md px-2.5 py-1.5 text-xs outline-none focus-visible:ring-2 disabled:opacity-50"
+          className="text-muted-foreground hover:text-foreground focus-visible:ring-ring/50 inline-flex min-h-11 items-center rounded-md px-2.5 py-1.5 text-xs outline-none focus-visible:ring-2 disabled:opacity-50 sm:min-h-9"
         >
           {t("coach.suggestedAction.dismiss")}
         </button>

src/components/insights/correlation-card.tsx

@@ -126,7 +126,7 @@ export function CorrelationCard({ result }: CorrelationCardProps) {
               data-slot="correlation-card-confidence"
               variant="outline"
               className={cn(
-                "shrink-0 text-[10px]",
+                "shrink-0 text-xs",
                 CONFIDENCE_BADGE_CLASS[result.confidenceBand.label],
               )}
             >
@@ -153,7 +153,7 @@ export function CorrelationCard({ result }: CorrelationCardProps) {
             </p>
             <p
               data-slot="correlation-card-source"
-              className="text-muted-foreground text-[11px]"
+              className="text-muted-foreground text-xs"
             >
               {t("insights.correlationRow.sourceChip", {
                 n: result.n,

src/components/insights/daily-briefing.tsx

@@ -29,6 +29,7 @@ import { AskCoachAction } from "@/components/insights/ask-coach-action";
 import { useTranslations, useFormatters } from "@/lib/i18n/context";
 import { formatUpdatedLabel } from "@/lib/i18n/relative-time";
 import { stripChartTokens } from "@/lib/insights/chart-tokens";
+import { useAuth } from "@/hooks/use-auth";
 import { cn } from "@/lib/utils";
 import type {
   DailyBriefing as DailyBriefingPayload,
@@ -353,6 +354,7 @@ export function DailyBriefing({
 }: DailyBriefingProps) {
   const { t } = useTranslations();
   const fmt = useFormatters();
+  const { user } = useAuth();
 
   return (
     // v1.13.1 — heading-above-card pattern. The "Tagesbriefing" title
@@ -431,7 +433,7 @@ export function DailyBriefing({
                 <div className="space-y-2">
                   <p
                     data-slot="daily-briefing-signals-title"
-                    className="text-muted-foreground text-[11px] font-semibold tracking-wide uppercase"
+                    className="text-muted-foreground text-xs font-semibold tracking-wide uppercase"
                   >
                     {t("insights.dailyBriefing.signalsTitle")}
                   </p>
@@ -449,7 +451,7 @@ export function DailyBriefing({
                 <div className="space-y-2">
                   <p
                     data-slot="daily-briefing-findings-title"
-                    className="text-muted-foreground text-[11px] font-semibold tracking-wide uppercase"
+                    className="text-muted-foreground text-xs font-semibold tracking-wide uppercase"
                   >
                     {t("insights.dailyBriefing.keyFindingsTitle")}
                   </p>
@@ -471,13 +473,14 @@ export function DailyBriefing({
                   {updatedAt && (
                     <p
                       data-slot="daily-briefing-updated"
-                      className="text-muted-foreground text-right text-[11px]"
+                      className="text-muted-foreground text-right text-xs"
                     >
                       {formatUpdatedLabel(
                         updatedAt,
                         t,
                         fmt.dateShort,
                         fmt.time,
+                        user?.timezone,
                       )}
                     </p>
                   )}
@@ -488,7 +491,7 @@ export function DailyBriefing({
                   {noProviderStale && (
                     <p
                       data-slot="daily-briefing-stale-no-provider"
-                      className="text-muted-foreground flex flex-wrap items-center justify-end gap-x-1.5 gap-y-1 text-right text-[11px]"
+                      className="text-muted-foreground flex flex-wrap items-center justify-end gap-x-1.5 gap-y-1 text-right text-xs"
                     >
                       <span>
                         {t("insights.dailyBriefing.staleNoProviderHint")}

src/components/insights/derived/provenance-explainer.tsx

@@ -50,10 +50,7 @@ export function ProvenanceExplainer({
     <span
       id={bodyId}
       data-slot="provenance-explainer-method"
-      className={cn(
-        "text-muted-foreground text-[11px] leading-snug",
-        className,
-      )}
+      className={cn("text-muted-foreground text-xs leading-snug", className)}
     >
       {method}
     </span>

src/components/insights/health-score-card.tsx

@@ -341,7 +341,7 @@ export function HealthScoreCard({
           <div className="flex min-w-0 items-center gap-2">
             <p
               data-slot="health-score-card-label"
-              className="text-muted-foreground text-[10px] font-semibold tracking-[0.18em] uppercase"
+              className="text-muted-foreground text-xs font-semibold tracking-[0.18em] uppercase"
             >
               {t("insights.healthScore.label")}
             </p>
@@ -361,7 +361,7 @@ export function HealthScoreCard({
           {delta !== null && delta > 0 && (
             <span
               data-slot="health-score-card-delta-chip"
-              className="bg-success/15 text-success rounded-full px-2 py-0.5 text-[10px] font-semibold"
+              className="bg-success/15 text-success rounded-full px-2 py-0.5 text-xs font-semibold"
             >
               +{delta}
             </span>
@@ -414,7 +414,7 @@ export function HealthScoreCard({
             branch keeps the existing single-line caption. */}
         <p
           data-slot="health-score-card-delta"
-          className="text-muted-foreground inline-flex items-center gap-1 text-[11px]"
+          className="text-muted-foreground inline-flex items-center gap-1 text-xs"
         >
           {delta === null ? (
             <span>{t("insights.healthScore.deltaUnavailable")}</span>
@@ -456,7 +456,7 @@ export function HealthScoreCard({
         {restModeActive && (
           <p
             data-slot="health-score-card-rest-mode"
-            className="text-muted-foreground inline-flex items-start gap-1.5 text-[11px] leading-relaxed"
+            className="text-muted-foreground inline-flex items-start gap-1.5 text-xs leading-relaxed"
           >
             <Moon className="mt-0.5 size-3 shrink-0" aria-hidden="true" />
             <span>{t("insights.healthScore.restModePaused")}</span>
@@ -474,7 +474,7 @@ export function HealthScoreCard({
             <p
               data-slot="health-score-card-tension"
               data-band={tension.band}
-              className="text-muted-foreground inline-flex items-start gap-1.5 text-[11px] leading-relaxed"
+              className="text-muted-foreground inline-flex items-start gap-1.5 text-xs leading-relaxed"
             >
               <Scale className="mt-0.5 size-3 shrink-0" aria-hidden="true" />
               <span>
@@ -493,7 +493,7 @@ export function HealthScoreCard({
         {returnToBand && (
           <p
             data-slot="health-score-card-return-to-band"
-            className="text-success/90 inline-flex items-start gap-1.5 text-[11px] leading-relaxed"
+            className="text-success/90 inline-flex items-start gap-1.5 text-xs leading-relaxed"
           >
             <CornerDownLeft
               className="mt-0.5 size-3 shrink-0"
@@ -576,7 +576,7 @@ export function HealthScoreCard({
             className={cn(
               "text-muted-foreground hover:text-foreground",
               "focus-visible:ring-ring/50 focus-visible:ring-2 focus-visible:outline-none",
-              "flex w-full items-center justify-between gap-1 rounded text-[11px]",
+              "flex w-full items-center justify-between gap-1 rounded text-xs",
             )}
           >
             <span>{t("insights.healthScore.provenance.toggle")}</span>
@@ -600,7 +600,7 @@ export function HealthScoreCard({
                 <p
                   data-slot="health-score-card-provenance-mixed-banner"
                   role="status"
-                  className="border-warning/30 text-warning/90 bg-warning/5 rounded border px-2 py-1 text-[10px] leading-snug"
+                  className="border-warning/30 text-warning/90 bg-warning/5 rounded border px-2 py-1 text-xs leading-snug"
                 >
                   {t("insights.healthScore.provenance.mixedBanner")}
                 </p>
@@ -625,7 +625,7 @@ export function HealthScoreCard({
                       data-component={row.key}
                       data-source={row.source}
                       className={cn(
-                        "flex items-center gap-2 text-[11px]",
+                        "flex items-center gap-2 text-xs",
                         isEmpty && "opacity-50",
                       )}
                     >
@@ -684,7 +684,7 @@ export function HealthScoreCard({
                         title={asOfLine ?? undefined}
                         data-as-of={row.asOf ?? undefined}
                         className={cn(
-                          "inline-flex items-center rounded-full border bg-transparent px-1.5 py-0.5 text-[10px] leading-none",
+                          "inline-flex items-center rounded-full border bg-transparent px-1.5 py-0.5 text-xs leading-none",
                           SOURCE_PILL_CLASS[row.source],
                         )}
                       >
@@ -696,7 +696,7 @@ export function HealthScoreCard({
               </ul>
               <p
                 data-slot="health-score-card-provenance-footnote"
-                className="text-muted-foreground text-[10px] leading-snug"
+                className="text-muted-foreground text-xs leading-snug"
               >
                 {t("insights.healthScore.provenance.footnote")}
               </p>

src/components/insights/health-score-delta-explainer.tsx

@@ -52,10 +52,7 @@ export function HealthScoreDeltaExplainer({
     <span
       id={resolvedBodyId}
       data-slot="health-score-delta-explainer-body"
-      className={cn(
-        "text-muted-foreground text-[11px] leading-snug",
-        className,
-      )}
+      className={cn("text-muted-foreground text-xs leading-snug", className)}
     >
       {t("insights.healthScore.deltaExplainer.body")}
     </span>

src/components/insights/hero-strip.tsx

@@ -3,8 +3,9 @@
 import Link from "next/link";
 import { Sparkles } from "lucide-react";
 import { Skeleton } from "@/components/ui/skeleton";
-import { useTranslations } from "@/lib/i18n/context";
-import { formatRelativeTime } from "@/lib/i18n/relative-time";
+import { useTranslations, useFormatters } from "@/lib/i18n/context";
+import { formatUpdatedLabel } from "@/lib/i18n/relative-time";
+import { useAuth } from "@/hooks/use-auth";
 import { useModuleEnabled } from "@/hooks/use-module-enabled";
 import { ProseBlocks } from "@/components/insights/prose-blocks";
 import { cn } from "@/lib/utils";
@@ -189,6 +190,8 @@ export function HeroStrip({
   returnToBand = null,
 }: HeroStripProps) {
   const { t } = useTranslations();
+  const fmt = useFormatters();
+  const { user } = useAuth();
 
   // v1.21.2 (A5) — localise the Tension Verdict's contributor keys into the
   // card's already-localised `{ positive, negative }` shape. Only forwarded when
@@ -226,8 +229,12 @@ export function HeroStrip({
   const greetingBase = t(greetingKey);
   const greeting = userName ? `${greetingBase}, ${userName}` : greetingBase;
   const subtitle = briefing?.paragraph ?? t("insights.heroFallbackSubtitle");
+  // v1.22 — calendar-bucketed freshness label ("Updated today, HH:MM" /
+  // "yesterday" / "on DD.MM."), matching the briefing + per-metric cards so the
+  // hero no longer reads relative while the cards below it read absolute. The
+  // day boundary follows the user's profile timezone.
   const generatedLine = updatedAt
-    ? t("insights.heroGenerated", { time: formatRelativeTime(updatedAt, t) })
+    ? formatUpdatedLabel(updatedAt, t, fmt.dateShort, fmt.time, user?.timezone)
     : null;
 
   return (

src/components/insights/insight-status-card.tsx

@@ -11,6 +11,7 @@ import { formatUpdatedLabel } from "@/lib/i18n/relative-time";
 import { stripChartTokens } from "@/lib/insights/chart-tokens";
 import { ProseBlocks } from "@/components/insights/prose-blocks";
 import { cn } from "@/lib/utils";
+import { useAuth } from "@/hooks/use-auth";
 import { useFeatureFlags } from "@/hooks/use-feature-flags";
 import { AskCoachAction } from "@/components/insights/ask-coach-action";
 import type { CoachLaunchScope } from "@/lib/insights/coach-launch-context";
@@ -339,17 +340,24 @@ function StatusBody({ text }: { text: string }) {
 function LastUpdatedFooter({ updatedAt }: { updatedAt: string | null }) {
   const { t } = useTranslations();
   const fmt = useFormatters();
+  const { user } = useAuth();
   if (!updatedAt) return null;
   return (
     // v1.11.5 — right-aligned so the timestamp tucks to the trailing edge
     // of the card for a tidier read against the left-aligned prose above.
     //
-    // v1.12.2 — the freshness caption is a relative read ("2 hours ago") via
-    // the shared `formatRelativeTime`, matching the briefing / hero /
-    // last-measurement / coach-history captions so two adjacent cards on the
-    // same page no longer read one relative and one absolute.
+    // v1.22 (W6) — the freshness caption is the calendar-bucketed
+    // `formatUpdatedLabel` ("Updated today, 14:30" / "yesterday" / "on DD.MM."),
+    // matching the briefing + per-metric cards. The day boundary follows the
+    // user's profile timezone, not the browser's.
     <p className="text-muted-foreground text-right text-xs">
-      {formatUpdatedLabel(updatedAt, t, fmt.dateShort, fmt.time)}
+      {formatUpdatedLabel(
+        updatedAt,
+        t,
+        fmt.dateShort,
+        fmt.time,
+        user?.timezone,
+      )}
     </p>
   );
 }

src/components/insights/period-narrative-card.tsx

@@ -4,8 +4,10 @@ import { useState } from "react";
 import { useQuery } from "@tanstack/react-query";
 import { CalendarRange } from "lucide-react";
 
-import { useTranslations } from "@/lib/i18n/context";
+import { useTranslations, useFormatters } from "@/lib/i18n/context";
+import { formatUpdatedLabel } from "@/lib/i18n/relative-time";
 import { queryKeys } from "@/lib/query-keys";
+import { useAuth } from "@/hooks/use-auth";
 import { cn } from "@/lib/utils";
 import { SectionHeading } from "@/components/insights/section-heading";
 import { AskCoachAction } from "@/components/insights/ask-coach-action";
@@ -77,7 +79,7 @@ function ProvenanceDisclosure({
   return (
     <p
       data-slot="period-narrative-provenance"
-      className="text-muted-foreground text-[11px] leading-snug"
+      className="text-muted-foreground text-xs leading-snug"
     >
       {t("insights.narrativeProvenanceMethod")}
       {metrics
@@ -100,6 +102,8 @@ export function PeriodNarrativeCard({
   className,
 }: PeriodNarrativeCardProps) {
   const { t, locale } = useTranslations();
+  const fmt = useFormatters();
+  const { user } = useAuth();
   const [period, setPeriod] = useState<NarrativePeriod>("week");
 
   const query = useQuery({
@@ -207,14 +211,16 @@ export function PeriodNarrativeCard({
         ) : null}
 
         {narrative ? (
-          <p className="text-muted-foreground text-right text-[11px]">
+          <p className="text-muted-foreground text-right text-xs">
             {data?.revalidating
               ? t("insights.narrativeUpdating")
-              : t("insights.narrativeUpdated", {
-                  time: new Date(narrative.updatedAt).toLocaleDateString(
-                    locale === "de" ? "de-DE" : undefined,
-                  ),
-                })}
+              : formatUpdatedLabel(
+                  narrative.updatedAt,
+                  t,
+                  fmt.dateShort,
+                  fmt.time,
+                  user?.timezone,
+                )}
           </p>
         ) : null}
 

src/components/insights/recommendation-card.tsx

@@ -377,7 +377,7 @@ export function RecommendationCard({
             <div className="flex flex-wrap items-center gap-2">
               {norm.severity && (
                 <Badge
-                  className={`text-[10px] tracking-wide uppercase ${
+                  className={`text-xs tracking-wide uppercase ${
                     SEVERITY_BADGE_STYLES[norm.severity] ?? ""
                   }`}
                   variant="outline"

src/components/labs/lab-biomarker-chart.tsx

@@ -14,6 +14,7 @@ import {
 } from "recharts";
 
 import { Button } from "@/components/ui/button";
+import { CHART_HEIGHT_PX } from "@/lib/charts/constants";
 import { prefersReducedMotion } from "@/lib/charts/reduced-motion";
 import { formatDateShort } from "@/lib/format";
 import { formatLabValue } from "@/lib/labs/format-value";
@@ -127,8 +128,8 @@ export function LabBiomarkerChart({
           {t("labs.chart.empty")}
         </p>
       ) : (
-        <div className="h-[240px]">
-          <ResponsiveContainer width="100%" height="100%">
+        <div>
+          <ResponsiveContainer width="100%" height={CHART_HEIGHT_PX}>
             <ComposedChart
               data={points}
               margin={{ top: 8, right: 12, bottom: 4, left: 0 }}

src/components/labs/reference-range-badge.tsx

@@ -39,7 +39,7 @@ export function ReferenceRangeBadge({
   // Compact: drop the icon, shrink the text and padding so the badge reads as a
   // subtle qualifier of the heading rather than a second focal point.
   const compactClass = compact
-    ? "h-auto gap-0.5 px-1.5 py-0 text-[0.625rem] font-normal [&>svg]:size-2.5"
+    ? "h-auto gap-0.5 px-1.5 py-0 text-xs font-normal [&>svg]:size-2.5"
     : "";
 
   if (status === "in-range") {

src/components/measurements/measurement-list.tsx

@@ -1158,17 +1158,15 @@ export function MeasurementList({
                           </button>
                         )}
                         <div className="min-w-0">
-                          {/* v1.4.27 MB7 / CF-76 — bump the metadata
-                              badges from `text-[10px]` to `text-[11px]`
-                              so the legibility floor (12 px is the
-                              mobile baseline; 11 px is the lowest
-                              tolerated value for non-primary chrome)
-                              holds across the row. */}
+                          {/* v1.22 — metadata badges sit on the scale
+                              token `text-xs` (12 px, the mobile legibility
+                              baseline) instead of an arbitrary per-site
+                              size, so the row tracks the type scale. */}
                           {(m.type === "BLOOD_PRESSURE_SYS" ||
                             m.type === "BLOOD_PRESSURE_DIA") && (
                             <Badge
                               variant="outline"
-                              className="mr-1.5 h-5 px-1 text-[11px]"
+                              className="mr-1.5 h-5 px-1 text-xs"
                             >
                               {t(TYPE_LABEL_KEYS[m.type])}
                             </Badge>
@@ -1198,7 +1196,7 @@ export function MeasurementList({
                             <SleepNightCaption m={m} />
                           ) : (
                             isGrouped && (
-                              <span className="text-muted-foreground ml-1.5 text-[11px]">
+                              <span className="text-muted-foreground ml-1.5 text-xs">
                                 {t("measurements.dailyTotalCaption", {
                                   count: fmt.integer(m.sampleCount as number),
                                 })}
@@ -1217,7 +1215,7 @@ export function MeasurementList({
                               <Badge
                                 variant="outline"
                                 data-testid="measurement-source-badge"
-                                className={`ml-1.5 h-4 px-1 text-[11px] ${sourceBadgeClass(m.source)}`.trim()}
+                                className={`ml-1.5 h-4 px-1 text-xs ${sourceBadgeClass(m.source)}`.trim()}
                               >
                                 {formatMeasurementSource(m.source, t)}
                               </Badge>
@@ -1234,8 +1232,7 @@ export function MeasurementList({
                         {isGrouped ? (
                           <Button
                             variant="ghost"
-                            size="icon"
-                            className="size-11"
+                            size="icon-lg"
                             data-testid="measurement-day-expand"
                             onClick={() => toggleExpand(m.dayKey as string)}
                             aria-expanded={isExpanded}
@@ -1254,15 +1251,13 @@ export function MeasurementList({
                           <>
                             <Button
                               variant="ghost"
-                              size="icon"
-                              className="size-11"
+                              size="icon-lg"
                               onClick={() => startEdit(m)}
                               aria-label={t("common.edit")}
                             >
                               <Pencil className="h-4 w-4" />
                             </Button>
                             <DeleteButton
-                              className="size-11"
                               iconClassName="h-4 w-4"
                               onConfirm={() => deleteMutation.mutate(m.id)}
                               title={t("measurements.deleteConfirmTitle")}
@@ -1317,8 +1312,7 @@ export function MeasurementList({
             <div className="flex gap-1">
               <Button
                 variant="ghost"
-                size="icon"
-                className="size-11"
+                size="icon-lg"
                 disabled={page <= 1}
                 onClick={() => goToPage((p) => p - 1)}
                 aria-label={t("measurements.previousPage")}
@@ -1327,8 +1321,7 @@ export function MeasurementList({
               </Button>
               <Button
                 variant="ghost"
-                size="icon"
-                className="size-11"
+                size="icon-lg"
                 disabled={page >= totalPages}
                 onClick={() => goToPage((p) => p + 1)}
                 aria-label={t("measurements.nextPage")}
@@ -1430,8 +1423,7 @@ export function MeasurementList({
                         <Button
                           type="button"
                           variant="outline"
-                          size="icon"
-                          className="size-11"
+                          size="icon-lg"
                           disabled={
                             updateMutation.isPending || deleteMutation.isPending
                           }

src/components/settings/about-section.tsx

@@ -193,7 +193,12 @@ export function AboutSection() {
           which read as a separate field even though the two values belong
           on the same row. */}
       <SettingsCard>
-        <SettingsCardHeader icon={Info} title="HealthLog" className="mb-4" />
+        <SettingsCardHeader
+          icon={Info}
+          title="HealthLog"
+          description={t("settings.about.identityDescription")}
+          className="mb-4"
+        />
 
         {isLoading || !version ? (
           <div className="flex items-center gap-2 pl-7">
@@ -266,6 +271,7 @@ export function AboutSection() {
           <SettingsCardHeader
             icon={BookOpen}
             title={t("settings.about.linksHeading")}
+            description={t("settings.about.linksDescription")}
             className="mb-4"
           />
           <div className="flex flex-col gap-2 pl-7 sm:flex-row sm:flex-wrap">

src/components/settings/account-section/passkey-list-section.tsx

@@ -130,7 +130,7 @@ export function PasskeyListSection({
                 <td className="px-3 py-2 text-xs">
                   <Badge
                     variant={pk.credentialBackedUp ? "secondary" : "outline"}
-                    className="text-[11px]"
+                    className="text-xs"
                   >
                     {pk.credentialBackedUp
                       ? t("settings.backedUp")
@@ -209,14 +209,14 @@ export function PasskeyListSection({
                     "Single-device / Multi-device" column. Sits on the
                     same chip row as the backup status and date so all
                     metadata reads as a single horizontal stride. */}
-                <div className="mt-1 flex flex-wrap items-center gap-1.5 text-[11px]">
-                  <Badge variant="outline" className="text-[11px]">
+                <div className="mt-1 flex flex-wrap items-center gap-1.5 text-xs">
+                  <Badge variant="outline" className="text-xs">
                     {DEVICE_TYPE_LABELS[pk.credentialDeviceType] ??
                       pk.credentialDeviceType}
                   </Badge>
                   <Badge
                     variant={pk.credentialBackedUp ? "secondary" : "outline"}
-                    className="text-[11px]"
+                    className="text-xs"
                   >
                     {pk.credentialBackedUp
                       ? t("settings.backedUp")

src/components/settings/ai/shared.ts

@@ -40,7 +40,6 @@ export interface UserAIProvider {
 
 /** v1.22 (#90) — providers the dedicated document-scan path accepts. */
 export const OCR_PROVIDER_TYPES = ["OPENAI", "ANTHROPIC", "LOCAL"] as const;
-export type OcrProviderType = (typeof OCR_PROVIDER_TYPES)[number];
 
 /**
  * v1.4.16 phase B2 — provider tags exposed to the UI. Mirrors

src/components/settings/low-stock-card.tsx

@@ -232,7 +232,7 @@ export function LowStockCard({
             inputMode="numeric"
             min={MIN_DAYS}
             max={MAX_DAYS}
-            className="w-24"
+            className="w-auto"
             value={draft ?? String(days)}
             disabled={!isAuthenticated || saving}
             onChange={(e) => setDraft(e.target.value)}
@@ -263,7 +263,7 @@ export function LowStockCard({
               inputMode="numeric"
               min={MIN_LEAD}
               max={MAX_LEAD}
-              className="w-24"
+              className="w-auto"
               value={leadDraft ?? String(leadDays)}
               disabled={!isAuthenticated || saving}
               onChange={(e) => setLeadDraft(e.target.value)}

src/components/settings/notification-status-card.tsx

@@ -148,7 +148,7 @@ export function NotificationStatusCard() {
       />
 
       <ul
-        className="mt-4 space-y-3 pl-7"
+        className="divide-border/60 mt-4 divide-y pl-7"
         data-testid="notification-status-list"
       >
         {channels.map((ch) => (
@@ -189,7 +189,7 @@ function ChannelRow({
 
   return (
     <li
-      className="border-border/60 flex flex-col gap-2 rounded-lg border p-4 sm:flex-row sm:items-start sm:justify-between"
+      className="flex flex-col gap-2 py-4 first:pt-0 last:pb-0 sm:flex-row sm:items-start sm:justify-between"
       data-testid={`notification-status-row-${channel.type}`}
       data-state={channel.state}
     >