fix(mental-wellbeing): match the standard chart, widen the page, drop the redundant chrome

- The screener trend now reads like every other trend: a monotone line over
  the primary colour with the dashboard's soft gradient area fill and matching
  margins. The surface-only severity-band backgrounds are gone (the band still
  shows in the tooltip), so it no longer looks different from the dashboard.
- The landing fills the content width like the other tracking surfaces instead
  of a narrow max-w-3xl column.
- The voluntary-self-test disclaimer line and the visible page heading + its
  tooltip are removed; the title stays as an sr-only heading for the outline.
- The instrument card's last-test line adopts the medication-card grammar:
  label left, the relative day (today / yesterday / date) right-aligned, no
  severity badge.

messages/de.json

@@ -7579,7 +7579,6 @@
   "mentalHealth": {
     "pageTitle": "Check-in zum seelischen Wohlbefinden",
     "pageDescription": "Zwei validierte, freiwillige Selbsttests — PHQ-9 (Stimmung) und GAD-7 (Sorgen) — ergänzend zu deinem Stimmungstagebuch. Aussagekräftig ist der Verlauf über die Zeit, nicht ein einzelner Wert.",
-    "infoTooltip": "Dieses ist ein Screening-Selbsttest, keine Diagnose.",
     "attributionLabel": "Quelle",
     "choosePrompt": "Check-in auswählen",
     "start": "Starten",
@@ -7640,7 +7639,8 @@
       "tab": {
         "phq9": "PHQ-9",
         "gad7": "GAD-7"
-      }
+      },
+      "bandLabel": "Einstufung"
     },
     "crisis": {
       "title": "Du musst das nicht allein durchstehen",
@@ -7700,7 +7700,7 @@
     "progress": "{current} / {total}",
     "questionAria": "Frage {current} von {total}",
     "next": "Weiter",
-    "lastResult": "Letztes Ergebnis",
+    "lastResult": "Letzter Test",
     "noResultYet": "Noch kein Check-in",
     "backToList": "Übersicht",
     "jumpFirst": "Zur ersten Frage springen",
@@ -7708,9 +7708,6 @@
     "review": {
       "title": "Überblick",
       "recap": "Du hast {answered} von {total} Fragen beantwortet."
-    },
-    "landing": {
-      "disclaimer": "Dies sind freiwillige Selbsttests, keine Diagnose. Sie unterstützen das Gespräch mit einer Fachperson, ersetzen es aber nicht."
     }
   },
   "records": {

messages/en.json

@@ -7579,7 +7579,6 @@
   "mentalHealth": {
     "pageTitle": "Mental wellbeing check-in",
     "pageDescription": "Two validated, opt-in self-assessments — PHQ-9 (mood) and GAD-7 (worry) — that sit beside your mood tracking. The value is the trend over time, not any single number.",
-    "infoTooltip": "This is a screening self-test, not a diagnosis.",
     "attributionLabel": "Attribution",
     "choosePrompt": "Choose a check-in",
     "start": "Start",
@@ -7640,7 +7639,8 @@
       "tab": {
         "phq9": "PHQ-9",
         "gad7": "GAD-7"
-      }
+      },
+      "bandLabel": "Category"
     },
     "crisis": {
       "title": "You don't have to face this alone",
@@ -7700,7 +7700,7 @@
     "progress": "{current} / {total}",
     "questionAria": "Question {current} of {total}",
     "next": "Next",
-    "lastResult": "Last result",
+    "lastResult": "Last test",
     "noResultYet": "No check-in yet",
     "backToList": "Overview",
     "jumpFirst": "Jump to first question",
@@ -7708,9 +7708,6 @@
     "review": {
       "title": "Review",
       "recap": "You answered {answered} of {total} questions."
-    },
-    "landing": {
-      "disclaimer": "These are voluntary self-tests, not a diagnosis. They support a conversation with a professional; they don't replace one."
     }
   },
   "records": {

messages/es.json

@@ -7579,7 +7579,6 @@
   "mentalHealth": {
     "pageTitle": "Revisión de bienestar mental",
     "pageDescription": "Dos autoevaluaciones validadas y opcionales — PHQ-9 (estado de ánimo) y GAD-7 (preocupación) — junto a tu registro de ánimo. Lo valioso es la tendencia en el tiempo, no un único número.",
-    "infoTooltip": "Esto es una autoevaluación de cribado, no un diagnóstico.",
     "attributionLabel": "Fuente",
     "choosePrompt": "Elige una revisión",
     "start": "Empezar",
@@ -7640,7 +7639,8 @@
       "tab": {
         "phq9": "PHQ-9",
         "gad7": "GAD-7"
-      }
+      },
+      "bandLabel": "Categoría"
     },
     "crisis": {
       "title": "No tienes que afrontar esto a solas",
@@ -7700,7 +7700,7 @@
     "progress": "{current} / {total}",
     "questionAria": "Pregunta {current} de {total}",
     "next": "Siguiente",
-    "lastResult": "Último resultado",
+    "lastResult": "Última prueba",
     "noResultYet": "Aún sin check-in",
     "backToList": "Vista general",
     "jumpFirst": "Ir a la primera pregunta",
@@ -7708,9 +7708,6 @@
     "review": {
       "title": "Resumen",
       "recap": "Has respondido {answered} de {total} preguntas."
-    },
-    "landing": {
-      "disclaimer": "Son autoevaluaciones voluntarias, no un diagnóstico. Sirven de apoyo para hablar con un profesional, no lo sustituyen."
     }
   },
   "records": {

messages/fr.json

@@ -7579,7 +7579,6 @@
   "mentalHealth": {
     "pageTitle": "Point sur le bien-être mental",
     "pageDescription": "Deux auto-évaluations validées et facultatives — PHQ-9 (humeur) et GAD-7 (inquiétude) — en complément de ton suivi de l'humeur. Ce qui compte, c'est la tendance dans le temps, pas un chiffre isolé.",
-    "infoTooltip": "Il s'agit d'un autotest de dépistage, pas d'un diagnostic.",
     "attributionLabel": "Source",
     "choosePrompt": "Choisis un bilan",
     "start": "Commencer",
@@ -7640,7 +7639,8 @@
       "tab": {
         "phq9": "PHQ-9",
         "gad7": "GAD-7"
-      }
+      },
+      "bandLabel": "Catégorie"
     },
     "crisis": {
       "title": "Tu n'as pas à affronter cela seul(e)",
@@ -7700,7 +7700,7 @@
     "progress": "{current} / {total}",
     "questionAria": "Question {current} sur {total}",
     "next": "Suivant",
-    "lastResult": "Dernier résultat",
+    "lastResult": "Dernier test",
     "noResultYet": "Pas encore de check-in",
     "backToList": "Vue d'ensemble",
     "jumpFirst": "Aller à la première question",
@@ -7708,9 +7708,6 @@
     "review": {
       "title": "Récapitulatif",
       "recap": "Vous avez répondu à {answered} questions sur {total}."
-    },
-    "landing": {
-      "disclaimer": "Ce sont des auto-évaluations volontaires, pas un diagnostic. Elles aident à préparer un échange avec un professionnel, sans le remplacer."
     }
   },
   "records": {

messages/it.json

@@ -7579,7 +7579,6 @@
   "mentalHealth": {
     "pageTitle": "Check-in sul benessere mentale",
     "pageDescription": "Due autovalutazioni validate e facoltative — PHQ-9 (umore) e GAD-7 (preoccupazione) — accanto al tuo diario dell'umore. Ciò che conta è l'andamento nel tempo, non un singolo numero.",
-    "infoTooltip": "Questo è un autotest di screening, non una diagnosi.",
     "attributionLabel": "Fonte",
     "choosePrompt": "Scegli un check-in",
     "start": "Inizia",
@@ -7640,7 +7639,8 @@
       "tab": {
         "phq9": "PHQ-9",
         "gad7": "GAD-7"
-      }
+      },
+      "bandLabel": "Categoria"
     },
     "crisis": {
       "title": "Non devi affrontare tutto questo da solo/a",
@@ -7700,7 +7700,7 @@
     "progress": "{current} / {total}",
     "questionAria": "Domanda {current} di {total}",
     "next": "Avanti",
-    "lastResult": "Ultimo risultato",
+    "lastResult": "Ultimo test",
     "noResultYet": "Ancora nessun check-in",
     "backToList": "Panoramica",
     "jumpFirst": "Vai alla prima domanda",
@@ -7708,9 +7708,6 @@
     "review": {
       "title": "Riepilogo",
       "recap": "Hai risposto a {answered} domande su {total}."
-    },
-    "landing": {
-      "disclaimer": "Sono autovalutazioni volontarie, non una diagnosi. Sostengono il confronto con un professionista, non lo sostituiscono."
     }
   },
   "records": {

messages/pl.json

@@ -7579,7 +7579,6 @@
   "mentalHealth": {
     "pageTitle": "Sprawdzenie dobrostanu psychicznego",
     "pageDescription": "Dwa zwalidowane, dobrowolne testy — PHQ-9 (nastrój) i GAD-7 (lęk) — obok Twojego dziennika nastroju. Liczy się trend w czasie, a nie pojedynczy wynik.",
-    "infoTooltip": "To jest przesiewowy autotest, a nie diagnoza.",
     "attributionLabel": "Źródło",
     "choosePrompt": "Wybierz sprawdzenie",
     "start": "Rozpocznij",
@@ -7640,7 +7639,8 @@
       "tab": {
         "phq9": "PHQ-9",
         "gad7": "GAD-7"
-      }
+      },
+      "bandLabel": "Kategoria"
     },
     "crisis": {
       "title": "Nie musisz mierzyć się z tym sam(a)",
@@ -7700,7 +7700,7 @@
     "progress": "{current} / {total}",
     "questionAria": "Pytanie {current} z {total}",
     "next": "Dalej",
-    "lastResult": "Ostatni wynik",
+    "lastResult": "Ostatni test",
     "noResultYet": "Brak check-inów",
     "backToList": "Przegląd",
     "jumpFirst": "Przejdź do pierwszego pytania",
@@ -7708,9 +7708,6 @@
     "review": {
       "title": "Podsumowanie",
       "recap": "Odpowiedziano na {answered} z {total} pytań."
-    },
-    "landing": {
-      "disclaimer": "To dobrowolne testy przesiewowe, a nie diagnoza. Wspierają rozmowę ze specjalistą, ale jej nie zastępują."
     }
   },
   "records": {

src/components/mental-health/__tests__/mental-wellbeing.test.tsx

@@ -39,18 +39,25 @@ function withProviders(node: React.ReactNode): string {
   );
 }
 
-describe("disclaimer placement (§2 — never while testing)", () => {
-  // `renderToStaticMarkup` HTML-escapes apostrophes (don't → don't), so
-  // assert on an apostrophe-free, distinctive slice of the disclaimer copy.
-  const DISCLAIMER_FRAGMENT = "voluntary self-tests, not a diagnosis";
-
-  it("renders the disclaimer on the landing", () => {
+describe("landing chrome (v1.25.5 — disclaimer + heading removed)", () => {
+  it("does NOT render the voluntary-self-test disclaimer anywhere", () => {
+    // The disclaimer line + its (i) tooltip were removed from the landing;
+    // the page leads with the description and the instrument cards.
     const html = withProviders(<MentalWellbeing />);
-    expect(html).toContain('data-slot="mental-health-disclaimer"');
-    expect(html).toContain(DISCLAIMER_FRAGMENT);
+    expect(html).not.toContain('data-slot="mental-health-disclaimer"');
+    expect(html).not.toContain("voluntary self-tests, not a diagnosis");
   });
 
-  it("does NOT render the disclaimer inside the check-in wizard", () => {
+  it("keeps the page title for screen readers but not as a visible heading", () => {
+    const html = withProviders(<MentalWellbeing />);
+    // The title survives as an sr-only h1 for the document outline.
+    expect(html).toContain(mh.pageTitle);
+    expect(html).toContain("sr-only");
+    // …and the lead description still introduces the screeners.
+    expect(html).toContain(mh.pageDescription);
+  });
+
+  it("does NOT render any disclaimer inside the check-in wizard", () => {
     const html = withProviders(
       <CheckInWizard
         instrument="PHQ9"
@@ -61,7 +68,6 @@ describe("disclaimer placement (§2 — never while testing)", () => {
       />,
     );
     expect(html).not.toContain('data-slot="mental-health-disclaimer"');
-    expect(html).not.toContain(DISCLAIMER_FRAGMENT);
     // …but the standardized instrument explanation IS shown.
     expect(html).toContain(mh.instrumentDescription.phq9);
   });

src/components/mental-health/assessment-history-chart.tsx

@@ -1,23 +1,24 @@
 "use client";
 
 /**
- * v1.25.3 — per-instrument screener trend chart, in the dashboard's visual
- * language (mirrors `labs/lab-biomarker-chart.tsx`). A single line of the total
- * score over `takenAt`, with the instrument's severity bands painted as stacked
- * MUTED `ReferenceArea`s (increasing opacity toward the top, all in the
- * primary/muted family) so the reader sees "where this score sits" WITHOUT a
- * danger palette — never an alarm colour (the no-alarming-colour rule the labs
- * chart documents).
+ * v1.25.3 — per-instrument screener trend chart.
+ *
+ * v1.25.5 — aligned to the dashboard's chart language exactly: a single
+ * `type="monotone"` line over the primary colour with a soft gradient area
+ * fill beneath (same `fillOpacity` + margins the dashboard line charts use),
+ * the shared grid / axis tokens, and `RichChartTooltip`. The earlier
+ * severity-band `ReferenceArea`s — unique to this surface — are gone so it
+ * reads like every other trend; the band still surfaces in the tooltip.
  *
  * One instrument at a time: PHQ-9 (0–27) and GAD-7 (0–21) have different ranges
- * and bands, so the parent toggles which series + band set this paints.
+ * and bands, so the parent toggles which series this paints.
  */
 import { useMemo } from "react";
 import {
+  Area,
   CartesianGrid,
   ComposedChart,
   Line,
-  ReferenceArea,
   ResponsiveContainer,
   Tooltip,
   XAxis,
@@ -36,6 +37,7 @@ import type { AssessmentRow, InstrumentId } from "./types";
 interface ChartPoint {
   timestamp: number;
   value: number;
+  band: string;
 }
 
 export function AssessmentHistoryChart({
@@ -57,11 +59,13 @@ export function AssessmentHistoryChart({
       .map((r) => ({
         timestamp: new Date(r.takenAt).getTime(),
         value: r.totalScore,
+        band: r.severityBand,
       }));
   }, [rows]);
 
   const animate = !prefersReducedMotion();
   const primary = "var(--primary)";
+  const gradientId = `mh-trend-${instrument}`;
 
   if (points.length === 0) {
     return (
@@ -71,35 +75,23 @@ export function AssessmentHistoryChart({
     );
   }
 
-  // Severity bands as stacked muted areas — opacity climbs with severity so the
-  // higher bands read "heavier" without ever painting red. The whole y-range is
-  // the instrument's 0..maxScore so the bands tile the plot.
-  const bandCount = def.bands.length;
-
   return (
     <ResponsiveContainer width="100%" height={CHART_HEIGHT_PX}>
       <ComposedChart
         data={points}
-        margin={{ top: 8, right: 12, bottom: 4, left: 0 }}
+        margin={{ top: 10, right: 8, bottom: 8, left: 8 }}
       >
+        <defs>
+          <linearGradient id={gradientId} x1="0" y1="0" x2="0" y2="1">
+            <stop offset="5%" stopColor={primary} stopOpacity={0.18} />
+            <stop offset="95%" stopColor={primary} stopOpacity={0} />
+          </linearGradient>
+        </defs>
         <CartesianGrid
           strokeDasharray="3 3"
           stroke="var(--border)"
           vertical={false}
         />
-        {def.bands.map((band, i) => (
-          <ReferenceArea
-            key={band.key}
-            y1={band.min}
-            // Extend the top band to the instrument max so the last slice fills.
-            y2={i === bandCount - 1 ? def.maxScore : band.max + 1}
-            fill={primary}
-            // 0.04 → ~0.16 across the bands: muted, monochrome, never alarm.
-            fillOpacity={0.04 + (i / Math.max(1, bandCount - 1)) * 0.12}
-            stroke="none"
-            ifOverflow="extendDomain"
-          />
-        ))}
         <XAxis
           dataKey="timestamp"
           type="number"
@@ -132,6 +124,11 @@ export function AssessmentHistoryChart({
                 value: String(point.value),
                 color: primary,
               },
+              {
+                name: t("mentalHealth.history.bandLabel"),
+                value: t(`mentalHealth.band.${instrument}.${point.band}`),
+                color: "var(--muted-foreground)",
+              },
             ];
             return (
               <RichChartTooltip
@@ -142,6 +139,13 @@ export function AssessmentHistoryChart({
             );
           }}
         />
+        <Area
+          type="monotone"
+          dataKey="value"
+          stroke="none"
+          fill={`url(#${gradientId})`}
+          isAnimationActive={animate}
+        />
         <Line
           type="monotone"
           dataKey="value"

src/components/mental-health/instrument-card.tsx

@@ -9,10 +9,10 @@
  * regardless of the last band — no severity tint (house rule: status reads
  * through a discreet badge only).
  */
-import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent } from "@/components/ui/card";
 import { useFormatters, useTranslations } from "@/lib/i18n/context";
+import { relativeCalendarDate } from "@/lib/i18n/relative-time";
 
 import type { AssessmentRow, InstrumentId } from "./types";
 
@@ -46,15 +46,17 @@ export function InstrumentCard({
           </span>
         </div>
 
-        <div className="text-muted-foreground min-h-5 text-xs">
+        {/* Last-test line in the medication-card grammar: label left, the
+            relative day (today / yesterday / date) right-aligned. The severity
+            band is intentionally NOT shown here — the trend below carries it. */}
+        <div className="text-muted-foreground flex min-h-5 items-center justify-between gap-2 text-xs">
           {last ? (
-            <span className="flex flex-wrap items-center gap-1.5">
+            <>
               <span>{t("mentalHealth.lastResult")}</span>
-              <Badge variant="secondary">
-                {t(`mentalHealth.band.${instrument}.${last.severityBand}`)}
-              </Badge>
-              <span>{formatDate(last.takenAt)}</span>
-            </span>
+              <span className="shrink-0">
+                {relativeCalendarDate(last.takenAt, t, formatDate)}
+              </span>
+            </>
           ) : (
             <span>{t("mentalHealth.noResultYet")}</span>
           )}

src/components/mental-health/mental-wellbeing.tsx

@@ -26,7 +26,6 @@ import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { useTranslations } from "@/lib/i18n/context";
 import { apiGet, apiPost } from "@/lib/api/api-fetch";
 import { queryKeys } from "@/lib/query-keys";
-import { InfoHint } from "@/components/ui/info-hint";
 
 import { AssessmentHistory } from "./assessment-history";
 import { AssessmentResult } from "./assessment-result";
@@ -99,26 +98,16 @@ export function MentalWellbeing() {
   }
 
   return (
-    <div className="mx-auto flex max-w-3xl flex-col gap-6">
+    <div className="flex flex-col gap-6">
       {phase === "choose" && (
         <>
           <header className="flex flex-col gap-2">
-            <div className="flex items-center gap-1.5">
-              <h1 className="text-2xl font-semibold">
-                {t("mentalHealth.pageTitle")}
-              </h1>
-              <InfoHint label={t("mentalHealth.infoTooltip")} />
-            </div>
+            {/* Title kept for screen readers / document outline only — the
+                visible heading + its tooltip were removed (§ Marc v1.25.5). */}
+            <h1 className="sr-only">{t("mentalHealth.pageTitle")}</h1>
             <p className="text-muted-foreground text-sm">
               {t("mentalHealth.pageDescription")}
             </p>
-            {/* The ONLY place the disclaimer renders as body text (§2). */}
-            <p
-              className="text-muted-foreground text-xs"
-              data-slot="mental-health-disclaimer"
-            >
-              {t("mentalHealth.landing.disclaimer")}
-            </p>
           </header>
 
           <section aria-label={t("mentalHealth.choosePrompt")}>