Tree: a Legend by the pan/zoom hint, and clickable ×N duplicate badges

Two small tree-view aids prompted by "why do some people show ×2".

- Legend: a hover/focus "Legend" link next to the "drag to pan…" hint, explaining
  the ×N badge (a person drawn N times in the view because they connect through
  more than one line — a shared ancestor or an intermarriage), the gender card
  colors, and the pan/zoom/recenter controls.
- The ×N badge is now clearly clickable (cursor + hover state); clicking it
  flashes every copy of that person in the current view (a bronze outline pulse),
  so you can spot where else they appear. Implemented by delegating on the chart
  container and matching the d3-bound person id across cards; capture-phase +
  stopPropagation so a badge click flashes instead of recentering.

Frontend only. Honest follow-up: flashing finds copies that are on-screen; a true
"fly to an off-screen copy" needs d3-zoom transform work (the chart pans by
transform, not scroll) — a later enhancement.

Signed-off-by: Justin Paul <justin@jpaul.me>

frontend/app/trees/[id]/tree/chart.css

@@ -381,9 +381,25 @@
   color: rgb(255, 251, 220);
   background-color: rgba(255, 251, 220, 0);
   border-radius: 50%;
-  padding: 2px;
+  padding: 2px 4px;
+  font-weight: 600;
+  cursor: pointer;
   transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;
 }
+.f3 .f3-card-duplicate-tag:hover {
+  background-color: rgba(255, 251, 220, 0.9);
+  color: #000;
+}
+
+/* Click the ×N badge → every copy of that person flashes (see tree/page.tsx). */
+@keyframes f3-card-flash {
+  0%, 100% { outline-color: rgba(160, 106, 66, 0); }
+  30%, 70% { outline-color: rgba(160, 106, 66, 1); }
+}
+.f3 .f3-card-flash .card-inner {
+  outline: 4px solid rgba(160, 106, 66, 1);
+  animation: f3-card-flash 0.55s ease-in-out 3;
+}
 
 .f3 .f3-card-duplicate-hover div.card-inner {
   transform: translate(0, -2px);