Task 17: Add KPI flip card interaction

Add click-to-flip interaction on LatestResults metric cards:
- CSS perspective-based 3D flip (400ms ease-in-out)
- Front face shows value/label/sub, back shows explanation text
- Single-card accordion: only one card flipped at a time
- Keyboard accessible: Enter/Space to flip, aria-label with state
- prefers-reduced-motion: instant visibility swap, no 3D animation
- Back face: accent-light background, 12px secondary text

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

src/index.css

@@ -277,6 +277,54 @@ html {
   }
 }
 
+/* KPI flip cards */
+.metric-card {
+  perspective: 1000px;
+  cursor: pointer;
+}
+
+.metric-card-inner {
+  transition: transform 0.4s ease-in-out;
+  transform-style: preserve-3d;
+  position: relative;
+}
+
+.metric-card-inner.flipped {
+  transform: rotateY(180deg);
+}
+
+.metric-card-front,
+.metric-card-back {
+  backface-visibility: hidden;
+}
+
+.metric-card-back {
+  transform: rotateY(180deg);
+  position: absolute;
+  inset: 0;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .metric-card-inner {
+    transition: none;
+  }
+
+  .metric-card-inner.flipped .metric-card-front {
+    visibility: hidden;
+  }
+
+  .metric-card-inner .metric-card-back {
+    visibility: hidden;
+  }
+
+  .metric-card-inner.flipped .metric-card-back {
+    visibility: visible;
+    transform: none;
+    position: absolute;
+    inset: 0;
+  }
+}
+
 /* Activity grid responsive */
 .activity-grid {
   display: grid;