feat: US-008 - Compact domain legend as HTML below SVG

Ralph/prd.json

@@ -157,7 +157,7 @@
         "Verify in browser"
       ],
       "priority": 8,
-      "passes": false,
+      "passes": true,
       "notes": "This is pure React JSX added to the return block of CareerConstellation (after the SVG and before the closing container div). No D3 involved. Use inline styles consistent with the rest of the component, or simple Tailwind classes. The legend replaces the SVG-based legend that was removed in US-003. Position it as a flex row with gap: 12px, items centred vertically, padding: 6px 12px."
     },
     {

Ralph/progress.txt

@@ -124,3 +124,17 @@
   - CSS transitions work on SVG `<path>` stroke properties, so no D3 `.transition()` needed for link highlight animations (unlike `r` attribute which requires D3 transitions)
   - The tick handler generates the `d` attribute string directly — simpler than using `d3.line().curve()` since we only need two-point curves
 ---
+
+## 2026-02-16 - US-008
+- Added compact HTML legend below SVG inside CareerConstellation container
+- Legend shows three 6px coloured dots with labels: Technical (var(--accent)), Clinical (var(--success)), Leadership (var(--amber))
+- Items separated by middle dot (·) separators using var(--border) colour
+- Includes "Hover to explore connections" hint text at slightly reduced opacity (0.7)
+- Uses font-family var(--font-geist-mono), font-size 10px, colour var(--text-tertiary)
+- flex-wrap enabled for graceful narrowing on small screens
+- Files changed: src/components/CareerConstellation.tsx, Ralph/prd.json
+- **Learnings for future iterations:**
+  - The legend is pure React JSX — no D3 involved. Placed between the SVG and the screen reader description paragraph inside the container div
+  - Using React.Fragment with the `.map()` allows conditional separator rendering (skip before first item) without extra wrapper divs
+  - The container div's overflow:hidden clips the legend's border-radius corners cleanly
+---

src/components/CareerConstellation.tsx

@@ -678,6 +678,47 @@ const CareerConstellation: React.FC<CareerConstellationProps> = ({
         style={{ display: 'block' }}
       />
 
+      <div
+        style={{
+          display: 'flex',
+          flexWrap: 'wrap',
+          alignItems: 'center',
+          gap: '12px',
+          padding: '6px 12px',
+          fontFamily: 'var(--font-geist-mono)',
+          fontSize: '10px',
+          color: 'var(--text-tertiary)',
+          lineHeight: '24px',
+        }}
+      >
+        {[
+          { label: 'Technical', color: 'var(--accent)' },
+          { label: 'Clinical', color: 'var(--success)' },
+          { label: 'Leadership', color: 'var(--amber)' },
+        ].map((item, i) => (
+          <React.Fragment key={item.label}>
+            {i > 0 && (
+              <span style={{ color: 'var(--border)', userSelect: 'none' }} aria-hidden="true">·</span>
+            )}
+            <span style={{ display: 'inline-flex', alignItems: 'center', gap: '5px' }}>
+              <span
+                style={{
+                  display: 'inline-block',
+                  width: '6px',
+                  height: '6px',
+                  borderRadius: '50%',
+                  backgroundColor: item.color,
+                  flexShrink: 0,
+                }}
+              />
+              {item.label}
+            </span>
+          </React.Fragment>
+        ))}
+        <span style={{ color: 'var(--border)', userSelect: 'none' }} aria-hidden="true">·</span>
+        <span style={{ opacity: 0.7 }}>Hover to explore connections</span>
+      </div>
+
       <p
         style={{
           position: 'absolute',