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.

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")}>