US-010: Redesign KPI cards - remove flip, bigger numbers, panel trigger

- Removed flip card animation entirely (CSS classes .metric-card, .metric-card-inner, .metric-card-front, .metric-card-back)
- Redesigned KPI cards as clickable buttons with larger value font (28px, weight 700)
- Each KPI card now triggers detail panel on click via openPanel({ type: 'kpi', kpi })
- Added hover states: border color shift + shadow deepens (150ms transition)
- Keyboard accessible: Enter/Space keys open panel
- Card styling: 16px padding, white background, border with var(--border-light), border-radius var(--radius-sm)
- Sub-text uses Geist Mono font family
- Cleaned up unused flip animation CSS from index.css

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

src/index.css

@@ -295,53 +295,6 @@ 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 — mobile-first (used in CareerActivityTile) */
 .activity-grid {