US-003: Create DetailPanelContext, DetailPanel component, and useFocusTrap hook

Implements core detail panel infrastructure for slide-in content panels:

- DetailPanelContext: Manages panel state (content, open/close, isOpen)
- DetailPanel: Slide-in panel component with backdrop, header, and scrollable body
- useFocusTrap: Keyboard focus trap hook for modal accessibility
- Width mapping: narrow (400px) for kpi/skill/education, wide (60vw) for consultation/project/career-role
- Title mapping derives from content data (kpi.label, skill.name, etc.)
- Close triggers: backdrop click, Escape key, X button
- ARIA: aria-modal, role=dialog, aria-labelledby
- Mobile responsive: both widths become 100vw on <768px
- prefers-reduced-motion: instant appear, no animations
- Placeholder content (real renderers in later stories)
- Export CardHeaderProps interface from Card.tsx
- Add responsive panel width CSS rules

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

src/index.css

@@ -423,6 +423,23 @@ textarea:focus-visible {
   to { opacity: 1; }
 }
 
+/* Detail panel responsive widths */
+.detail-panel[data-width="narrow"] {
+  width: var(--panel-narrow);
+}
+
+.detail-panel[data-width="wide"] {
+  width: var(--panel-wide);
+}
+
+/* Mobile: both narrow and wide become full-width */
+@media (max-width: 767px) {
+  .detail-panel[data-width="narrow"],
+  .detail-panel[data-width="wide"] {
+    width: 100vw;
+  }
+}
+
 @media (prefers-reduced-motion: reduce) {
   /* Disable pulse animation on status badge dot */
   @keyframes pulse {