fix(insights): one card language on the sub-page spine

A measured pass over every insights sub-page, the dashboard, and the
settings sections (computed text colour, left text edge relative to the
card edge, header→body distance, per card) surfaced the drift the eye
kept catching:

- The blood-pressure pulse-pressure/MAP explainer was a bare muted
  paragraph at the container edge, 16–24 px left of every neighbouring
  card's text. It now rides a compact Card in the regular foreground.
- The 'Usual range' read strip was a hand-rolled bg-card/60 shell with
  its own padding; rebuilt on Card + TileHeader + CardContent at the
  compact density so background, radius, icon spacing and text edge
  match the neighbouring tiles.
- The spine tiles carried three different header→body distances (6, 12
  and 24 px) via off-scale overrides (gap-1.5, md:gap-3, md:py-5,
  gap-3). Assessment, target summary, medication tiles, the mood
  stand-out card and the sleep hypnogram now share the sanctioned
  compact tier (gap-2 py-3 md:py-4).
- The hero score card and its skeleton kept their translucent identity
  but move from a static px-4 py-4 to the p-4 md:p-6 card norm, putting
  their text on the same edge as every other card.
- Two dashboard shells (recent workouts, recent unlocks) froze at p-4
  on every breakpoint; now p-4 md:p-6.
- Settings: the modules hint moves into the header's description slot
  and the injection-site grid joins the section-wide mt-4 rhythm — the
  two gaps that deviated from the settings 16 px header→content norm.

src/app/insights/blood-pressure/page.tsx

@@ -9,6 +9,7 @@ import { useTranslations } from "@/lib/i18n/context";
 import { useInsightsLayoutPrefs } from "@/hooks/use-insights-layout-prefs";
 import { useChartDomainStats } from "@/hooks/use-chart-domain-stats";
 import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
 import { HealthChartDynamic } from "@/components/charts/health-chart-dynamic";
 import { SlugInsightStatusCard } from "@/components/insights/slug-insight-status-card";
 import { MeasurementDiversityNudge } from "@/components/insights/measurement-diversity-nudge";
@@ -189,18 +190,24 @@ export default function InsightsBlutdruckPage() {
         const pp = Math.round(sbp - dbp);
         const map = Math.round((sbp + 2 * dbp) / 3);
         return (
-          <p
-            data-slot="bp-derived-caption"
-            className="text-muted-foreground text-sm leading-relaxed"
-          >
-            {t("insights.subPage.bpDerived.pulsePressure", {
-              value: pp,
-            })}{" "}
-            {t("insights.subPage.bpDerived.meanArterialPressure", {
-              value: map,
-            })}{" "}
-            {t("insights.subPage.bpDerived.caveat")}
-          </p>
+          // Card shell at the compact density so the explainer shares the
+          // spine's left text edge (the bare paragraph sat at the container
+          // edge, ~16–24 px left of every neighbouring card's text) — and
+          // foreground, not muted: multi-sentence explainer prose is
+          // content, muted stays reserved for meta.
+          <Card data-slot="bp-derived-caption" className="gap-2 py-3 md:py-4">
+            <CardContent>
+              <p className="text-sm leading-relaxed">
+                {t("insights.subPage.bpDerived.pulsePressure", {
+                  value: pp,
+                })}{" "}
+                {t("insights.subPage.bpDerived.meanArterialPressure", {
+                  value: map,
+                })}{" "}
+                {t("insights.subPage.bpDerived.caveat")}
+              </p>
+            </CardContent>
+          </Card>
         );
       })()}
 

src/app/insights/medications/page.tsx

@@ -210,7 +210,7 @@ export default function InsightsMedikamentePage() {
                 ? t("medications.categoryVitamin")
                 : t("medications.categoryOther");
           return (
-            <Card key={med.id} className="gap-2 py-4 md:gap-3 md:py-5">
+            <Card key={med.id} className="gap-2 py-3 md:py-4">
               <CardHeader>
                 <TileHeader icon={Pill} title={med.name} />
                 <div className="text-muted-foreground mt-1 flex flex-wrap items-center gap-x-2 gap-y-1 text-xs">