US-008: Restructure DashboardLayout with SubNav, new tile order, and DetailPanel

- Wrap DashboardLayout with DetailPanelProvider in App.tsx
- Import and render DetailPanel component alongside CommandPalette
- Reorder tiles: PatientSummary (full) → LatestResults (half) + Projects (half) → CoreSkills (full) → LastConsultation (full) → CareerActivity (full) → Education (full)
- Update ProjectsTile from full-width to half-width (remove full prop)
- Update CoreSkillsTile from half-width to full-width (add full prop)
- SubNav already renders between TopBar and content
- Content area marginTop already accounts for both TopBar and SubNav heights
- All tiles already have data-tile-id attributes for SubNav scrolling

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

src/App.tsx

@@ -5,6 +5,7 @@ import { ECGAnimation } from './components/ECGAnimation'
 import { LoginScreen } from './components/LoginScreen'
 import { DashboardLayout } from './components/DashboardLayout'
 import { AccessibilityProvider } from './contexts/AccessibilityContext'
+import { DetailPanelProvider } from './contexts/DetailPanelContext'
 
 function SkipButton({ onSkip }: { onSkip: () => void }) {
   const [visible, setVisible] = useState(false)
@@ -76,7 +77,11 @@ function App() {
           <LoginScreen onComplete={() => setPhase('pmr')} />
         )}
 
-        {phase === 'pmr' && <DashboardLayout />}
+        {phase === 'pmr' && (
+          <DetailPanelProvider>
+            <DashboardLayout />
+          </DetailPanelProvider>
+        )}
 
         {(phase === 'boot' || phase === 'ecg') && (
           <SkipButton onSkip={skipToLogin} />

src/components/DashboardLayout.tsx

@@ -4,6 +4,7 @@ import { TopBar } from './TopBar'
 import { SubNav } from './SubNav'
 import Sidebar from './Sidebar'
 import { CommandPalette } from './CommandPalette'
+import { DetailPanel } from './DetailPanel'
 import { PatientSummaryTile } from './tiles/PatientSummaryTile'
 import { LatestResultsTile } from './tiles/LatestResultsTile'
 import { CoreSkillsTile } from './tiles/CoreSkillsTile'
@@ -163,7 +164,10 @@ export function DashboardLayout() {
 
             {/* LatestResultsTile — half width (left) */}
             <LatestResultsTile />
-            {/* CoreSkillsTile — half width (right) */}
+            {/* ProjectsTile — half width (right) */}
+            <ProjectsTile />
+
+            {/* CoreSkillsTile — full width */}
             <CoreSkillsTile />
 
             {/* LastConsultationTile — full width */}
@@ -174,9 +178,6 @@ export function DashboardLayout() {
 
             {/* EducationTile — full width */}
             <EducationTile />
-
-            {/* ProjectsTile — full width */}
-            <ProjectsTile />
           </div>
         </motion.main>
       </div>
@@ -187,6 +188,9 @@ export function DashboardLayout() {
         onClose={handlePaletteClose}
         onAction={handlePaletteAction}
       />
+
+      {/* Detail panel */}
+      <DetailPanel />
     </div>
   )
 }

src/components/tiles/CoreSkillsTile.tsx

@@ -233,7 +233,7 @@ export function CoreSkillsTile() {
   )
 
   return (
-    <Card tileId="core-skills">
+    <Card full tileId="core-skills">
       <CardHeader dotColor="amber" title="REPEAT MEDICATIONS" />
       <div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
         {skills.map((skill) => (

src/components/tiles/ProjectsTile.tsx

@@ -258,7 +258,7 @@ export function ProjectsTile() {
   )
 
   return (
-    <Card full tileId="projects">
+    <Card tileId="projects">
       <CardHeader dotColor="amber" title="ACTIVE PROJECTS" />
 
       <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>