US-017: Create KPIDetail renderer for detail panel

Created src/components/detail/KPIDetail.tsx that renders rich KPI story
content inside the detail panel. Wired into DetailPanel so content.type
=== 'kpi' renders this component.

Component displays:
- Large headline number (48px, colored by kpi.colorVariant)
- KPI label and subtitle
- Period badge (if story.period exists)
- Context paragraph (story.context)
- Your role paragraph (story.role)
- Key outcomes as bullet list (story.outcomes)

Graceful fallback implemented: if story is undefined, shows kpi.value
and kpi.explanation instead.

Styling matches dashboard design system with fonts (Elvaro Grotesque,
Geist Mono), colors (CSS custom properties), and spacing conventions.

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

src/components/DetailPanel.tsx

@@ -4,6 +4,7 @@ import { useDetailPanel } from '@/contexts/DetailPanelContext'
 import { useFocusTrap } from '@/hooks/useFocusTrap'
 import { DetailPanelContent } from '@/types/pmr'
 import type { CardHeaderProps } from './Card'
+import { KPIDetail } from './detail/KPIDetail'
 
 // Width mapping from content type
 const widthMap: Record<DetailPanelContent['type'], 'narrow' | 'wide'> = {
@@ -207,21 +208,26 @@ export function DetailPanel() {
             padding: '24px',
           }}
         >
-          {/* Placeholder content - actual renderers will be added in later stories */}
-          <div
-            style={{
-              fontFamily: 'var(--font-ui)',
-              color: 'var(--text-secondary)',
-              fontSize: '14px',
-            }}
-          >
-            <p>
-              Detail panel for: <strong>{content.type}</strong>
-            </p>
-            <p style={{ marginTop: '8px', fontSize: '12px' }}>
-              Content renderers will be implemented in subsequent user stories.
-            </p>
-          </div>
+          {/* Render content based on type */}
+          {content.type === 'kpi' && <KPIDetail kpi={content.kpi} />}
+
+          {/* Other content types - placeholder for future stories */}
+          {content.type !== 'kpi' && (
+            <div
+              style={{
+                fontFamily: 'var(--font-ui)',
+                color: 'var(--text-secondary)',
+                fontSize: '14px',
+              }}
+            >
+              <p>
+                Detail panel for: <strong>{content.type}</strong>
+              </p>
+              <p style={{ marginTop: '8px', fontSize: '12px' }}>
+                Content renderers will be implemented in subsequent user stories.
+              </p>
+            </div>
+          )}
         </div>
       </div>
     </>