From 9396bfea46f452a51a1125b65a2e6c4b310c0d7b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marc-Andr=C3=A9=20Bombeck?= <mbombeck@gmail.com>
Date: Thu, 4 Jun 2026 17:36:13 +0200
Subject: [PATCH] fix(insights): align the target reference card to the shared
 card surface

The per-metric target reference panel rendered on a borderless
`bg-muted/30` inset, which read as a nested detail block rather than a
top-level card. Side-by-side with the assessment, trajectory, trend and
recommendation cards on the same category page it looked off-tone. Match
the compact card surface those siblings use (`bg-card/20` tint, a
`border-border/40` hairline, the shared `rounded-lg`) so the panel reads
as one family.
---
 src/components/insights/metric-target-summary.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/insights/metric-target-summary.tsx b/src/components/insights/metric-target-summary.tsx
index d46cc012e..71792ac8d 100644
--- a/src/components/insights/metric-target-summary.tsx
+++ b/src/components/insights/metric-target-summary.tsx
@@ -284,7 +284,7 @@ function TargetReferencePanel({
     <div
       data-slot="metric-target-summary"
       data-target-type={target.type}
-      className="bg-muted/30 space-y-3 rounded-lg px-3 py-2.5"
+      className="border-border/40 bg-card/20 space-y-3 rounded-lg border px-3 py-2.5"
     >
       {/* Row 1: target range string + status pill + source link. */}
       <div className="flex flex-wrap items-center justify-between gap-x-4 gap-y-1.5">