fix(targets): label the systolic bar on the blood-pressure target card

The card stacks two range bars for blood pressure. The diastolic bar
carried its label; the systolic one had none and no key to render, so the
pair read as one unnamed bar above a "Diastolic" one. Both bars now name
their reading (new key targets.systolic in every locale).

src/components/insights/__tests__/metric-target-summary.test.tsx

@@ -214,10 +214,21 @@ describe("<MetricTargetSummary>", () => {
     // The diastolic range bar renders alongside the systolic one.
     const barCount = (html.match(/data-slot="target-range-bar"/g) ?? []).length;
     expect(barCount).toBe(2);
+    // Each stacked bar names its reading, the systolic one first. The
+    // systolic label was missing while the diastolic one rendered.
+    const sys = html.indexOf(">Systolic</p>");
+    const dia = html.indexOf(">Diastolic</p>");
+    expect(sys).toBeGreaterThan(-1);
+    expect(dia).toBeGreaterThan(sys);
     // 30-day average stitches the diastolic pair — kept on the BP panel.
     expect(html).toContain("30-day average: 122/76 mmHg");
   });
 
+  it("labels a single-band bar with nothing extra", () => {
+    const html = renderWith("weight", WEIGHT_DATA);
+    expect(html).not.toContain(">Systolic</p>");
+  });
+
   it("keeps the adjust-target affordance out of the card body", () => {
     // The "Adjust target range" affordance moved to the page-header gear
     // (`<TargetAdjustButton>` via `TargetAdjustProvider`); the card is now

src/components/insights/metric-target-summary.tsx

@@ -367,16 +367,25 @@ function TargetReferencePanel({
         ) : null}
       </CardHeader>
       <CardContent className="space-y-3">
-        {/* Row 2: range bar — where today's value sits inside the band. */}
+        {/* Row 2: range bar — where today's value sits inside the band.
+          Blood pressure stacks two bars, so each one names its reading;
+          an unlabelled first bar read as the diastolic one's sibling. */}
         {currentValue != null ? (
-          <RangeBar
-            value={currentValue}
-            min={range.min}
-            max={range.max}
-            unit={unit}
-            orangeMin={isMedicationCompliance ? 70 : undefined}
-            orangeMax={isMedicationCompliance ? 100 : undefined}
-          />
+          <div className={isBp ? "space-y-1" : undefined}>
+            {isBp ? (
+              <p className="text-muted-foreground text-xs">
+                {t("targets.systolic")}
+              </p>
+            ) : null}
+            <RangeBar
+              value={currentValue}
+              min={range.min}
+              max={range.max}
+              unit={unit}
+              orangeMin={isMedicationCompliance ? 70 : undefined}
+              orangeMax={isMedicationCompliance ? 100 : undefined}
+            />
+          </div>
         ) : null}
 
         {/* Row 2b: diastolic range bar for blood pressure. */}