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/components/tiles/LatestResultsTile.tsx

@@ -1,7 +1,8 @@
-import React, { useState, useCallback } from 'react'
+import React from 'react'
 import { Card, CardHeader } from '../Card'
 import { kpis } from '@/data/kpis'
 import type { KPI } from '@/types/pmr'
+import { useDetailPanel } from '@/contexts/DetailPanelContext'
 
 const colorMap: Record<KPI['colorVariant'], string> = {
   green: '#059669',
@@ -11,35 +12,35 @@ const colorMap: Record<KPI['colorVariant'], string> = {
 
 interface MetricCardProps {
   kpi: KPI
-  isFlipped: boolean
-  onFlip: (id: string) => void
 }
 
-function MetricCard({ kpi, isFlipped, onFlip }: MetricCardProps) {
+function MetricCard({ kpi }: MetricCardProps) {
+  const { openPanel } = useDetailPanel()
+
   const handleClick = () => {
-    onFlip(kpi.id)
+    openPanel({ type: 'kpi', kpi })
   }
 
   const handleKeyDown = (e: React.KeyboardEvent) => {
     if (e.key === 'Enter' || e.key === ' ') {
       e.preventDefault()
-      onFlip(kpi.id)
+      openPanel({ type: 'kpi', kpi })
     }
   }
 
-  const outerStyles: React.CSSProperties = {
-    borderRadius: 'var(--radius-sm)',
+  const buttonStyles: React.CSSProperties = {
+    width: '100%',
+    textAlign: 'left',
+    padding: '16px',
+    background: 'var(--surface)',
     border: '1px solid var(--border-light)',
-    background: 'var(--bg-dashboard)',
-    overflow: 'hidden',
-  }
-
-  const innerStyles: React.CSSProperties = {
-    padding: '14px',
+    borderRadius: 'var(--radius-sm)',
+    cursor: 'pointer',
+    transition: 'border-color 150ms ease-out, box-shadow 150ms ease-out',
   }
 
   const valueStyles: React.CSSProperties = {
-    fontSize: '22px',
+    fontSize: '28px',
     fontWeight: 700,
     letterSpacing: '-0.02em',
     lineHeight: 1.2,
@@ -47,61 +48,42 @@ function MetricCard({ kpi, isFlipped, onFlip }: MetricCardProps) {
   }
 
   const labelStyles: React.CSSProperties = {
-    fontSize: '11px',
+    fontSize: '12px',
     fontWeight: 500,
-    color: 'var(--text-secondary)',
-    marginTop: '3px',
+    color: 'var(--text-primary)',
+    marginTop: '4px',
   }
 
   const subStyles: React.CSSProperties = {
     fontSize: '10px',
     color: 'var(--text-tertiary)',
-    fontFamily: "'Geist Mono', monospace",
-    marginTop: '4px',
-  }
-
-  const backStyles: React.CSSProperties = {
-    padding: '14px',
-    background: 'var(--accent-light)',
-    fontSize: '12px',
-    color: 'var(--text-secondary)',
-    lineHeight: 1.5,
-    fontFamily: 'var(--font-ui)',
-    display: 'flex',
-    alignItems: 'center',
+    fontFamily: 'var(--font-geist-mono)',
+    marginTop: '2px',
   }
 
   return (
-    <div
-      className="metric-card"
-      style={outerStyles}
+    <button
       onClick={handleClick}
       onKeyDown={handleKeyDown}
-      tabIndex={0}
-      role="button"
-      aria-label={`${kpi.label}: ${kpi.value}. ${isFlipped ? 'Showing explanation. Click to show value.' : 'Click to show explanation.'}`}
+      style={buttonStyles}
+      aria-label={`${kpi.label}: ${kpi.value}. Click to view details.`}
+      onMouseEnter={(e) => {
+        e.currentTarget.style.borderColor = 'var(--accent-border)'
+        e.currentTarget.style.boxShadow = 'var(--shadow-md)'
+      }}
+      onMouseLeave={(e) => {
+        e.currentTarget.style.borderColor = 'var(--border-light)'
+        e.currentTarget.style.boxShadow = 'none'
+      }}
     >
-      <div className={`metric-card-inner${isFlipped ? ' flipped' : ''}`}>
-        <div className="metric-card-front" style={innerStyles}>
-          <div style={valueStyles}>{kpi.value}</div>
-          <div style={labelStyles}>{kpi.label}</div>
-          <div style={subStyles}>{kpi.sub}</div>
-        </div>
-        <div className="metric-card-back" style={backStyles}>
-          {kpi.explanation}
-        </div>
-      </div>
-    </div>
+      <div style={valueStyles}>{kpi.value}</div>
+      <div style={labelStyles}>{kpi.label}</div>
+      <div style={subStyles}>{kpi.sub}</div>
+    </button>
   )
 }
 
 export function LatestResultsTile() {
-  const [flippedCardId, setFlippedCardId] = useState<string | null>(null)
-
-  const handleFlip = useCallback((id: string) => {
-    setFlippedCardId((prev) => (prev === id ? null : id))
-  }, [])
-
   const gridStyles: React.CSSProperties = {
     display: 'grid',
     gridTemplateColumns: '1fr 1fr',
@@ -113,12 +95,7 @@ export function LatestResultsTile() {
       <CardHeader dotColor="teal" title="LATEST RESULTS" rightText="Updated May 2025" />
       <div style={gridStyles}>
         {kpis.map((kpi) => (
-          <MetricCard
-            key={kpi.id}
-            kpi={kpi}
-            isFlipped={flippedCardId === kpi.id}
-            onFlip={handleFlip}
-          />
+          <MetricCard key={kpi.id} kpi={kpi} />
         ))}
       </div>
     </Card>

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 {