feat: US-008 - Add two-column experience and skills layout in Patient Pathway

2026-02-14 18:11:26 +00:00
parent 0e7bef0206
commit b5de609cd5
6 changed files with 640 additions and 8 deletions
@@ -86,7 +86,7 @@
        "Verify in browser using dev-browser skill"
      ],
      "priority": 5,
-      "passes": false,
+      "passes": true,
      "notes": "The Latest Results subsection should look like a section within the parent card — use a CardHeader for 'LATEST RESULTS' and render the KPI grid below it. The parent ParentSection header 'Patient Summary' should be visually dominant."
    },
    {
@@ -102,7 +102,7 @@
        "Verify in browser using dev-browser skill"
      ],
      "priority": 6,
-      "passes": false,
+      "passes": true,
      "notes": "This story just sets up the parent section with the graph. The Last Consultation, experience/skills columns, and education are added in subsequent stories."
    },
    {
@@ -118,7 +118,7 @@
        "Verify in browser using dev-browser skill"
      ],
      "priority": 7,
-      "passes": false,
+      "passes": true,
      "notes": "Reuse the rendering logic from LastConsultationTile — either inline it or extract a shared sub-component. The important thing is it lives inside the Patient Pathway ParentSection now."
    },
    {
@@ -137,7 +137,7 @@
        "Verify in browser using dev-browser skill"
      ],
      "priority": 8,
-      "passes": false,
+      "passes": true,
      "notes": "Reuse expansion patterns from existing CareerActivityTile and CoreSkillsTile. The two-column layout is within the Patient Pathway ParentSection card, not separate cards."
    },
    {
@@ -905,3 +905,55 @@
  - All 4 role entries now correctly reference their matching consultation IDs: interim-head-2025, deputy-head-2024, high-cost-drugs-2022, pharmacy-manager-2017
  - Timeline now has 8 entries: 4 roles + GPhC cert + Mary Seacole cert + MPharm edu + A-Levels edu
 ---
+
+## 2026-02-14 - US-005
+- Restructured PatientSummaryTile to use ParentSection wrapper with "Patient Summary" as large h2 header
+- Merged LatestResultsTile content (MetricCard components, KPI grid) into PatientSummaryTile as a subsection with CardHeader "LATEST RESULTS"
+- Removed the 4 headline metric figures (9+ Years, 1.2M, £220M, £14.6M+) strip from PatientSummaryTile
+- Removed standalone LatestResultsTile import and rendering from DashboardLayout
+- Files changed: src/components/tiles/PatientSummaryTile.tsx, src/components/DashboardLayout.tsx
+- **Learnings for future iterations:**
+  - The MetricCard component from LatestResultsTile was moved wholesale into PatientSummaryTile — it uses useDetailPanel for KPI click-to-detail, so the import chain followed
+  - ParentSection wraps Card with full prop, so the tileId passes through ParentSection → Card → data-tile-id attribute for command palette scroll targeting
+  - The LatestResultsTile.tsx file still exists but is no longer imported — US-010 will clean it up
+---
+
+## 2026-02-14 - US-006
+- Replaced standalone CareerActivityTile with ParentSection titled "Patient Pathway" containing CareerConstellation graph
+- Moved onRoleClick/onSkillClick handlers from CareerActivityTile into DashboardLayout (using consultations + skills data imports)
+- Removed CareerActivityTile import from DashboardLayout
+- CareerActivityTile.tsx still exists but is no longer imported — the timeline entries will be handled in US-007/US-008
+- Files changed: src/components/DashboardLayout.tsx
+- **Learnings for future iterations:**
+  - The CareerActivityTile contained both the constellation graph AND the timeline activity grid — US-006 only moves the graph into the parent section
+  - The onRoleClick/onSkillClick handlers were duplicated from CareerActivityTile into DashboardLayout since they need to be passed down to CareerConstellation. The same pattern (find consultation/skill by ID, openPanel) is used.
+  - ParentSection with tileId="patient-pathway" provides scroll targeting for command palette — US-013 will update palette data to use this new tileId
+---
+
+## 2026-02-14 - US-007
+- Moved Last Consultation content from standalone tile into Patient Pathway ParentSection as a subsection
+- Created `LastConsultationSubsection` component within DashboardLayout.tsx — renders green dot CardHeader + date/org/type/band fields + role title + examination bullets + "View full record" button
+- Deleted `src/components/tiles/LastConsultationTile.tsx` — content fully inlined
+- Removed LastConsultationTile import from DashboardLayout
+- Files changed: src/components/DashboardLayout.tsx (modified), src/components/tiles/LastConsultationTile.tsx (deleted)
+- **Learnings for future iterations:**
+  - The LastConsultationSubsection is defined as a standalone function component in DashboardLayout.tsx (not inside the export) — this keeps it clean and avoids nesting component definitions
+  - `marginTop: 24px` on the subsection wrapper creates visual separation from the constellation graph above
+  - The subsection uses `useDetailPanel` independently — it doesn't need to receive openPanel as a prop from DashboardLayout
+  - All the same rendering logic from LastConsultationTile was preserved: formatDate, getEmploymentType, getBand, field labels, bullet dots, hover states, keyboard handlers, aria labels
+  - Added `aria-hidden="true"` to bullet dots (decorative) which was missing in the original LastConsultationTile
+---
+
+## 2026-02-14 - US-008
+- Added two-column work experience and skills layout inside Patient Pathway ParentSection, below Last Consultation subsection
+- Created `src/components/WorkExperienceSubsection.tsx` — lists all 4 roles from consultations.ts with accordion expand (teal dot CardHeader "WORK EXPERIENCE"). Each role shows title, org, date range; expands to show examination bullets, coded entries, and "View full record" link
+- Created `src/components/RepeatMedicationsSubsection.tsx` — categorised skills with expand (amber dot CardHeader "REPEAT MEDICATIONS"). Same content as CoreSkillsTile: 3 categories (Technical, Healthcare Domain, Strategic & Leadership), 4 skills per category with "View all" buttons, click to open detail panel
+- Added `.pathway-columns` CSS class in index.css — 1 column default, 2 columns at 768px, 16px gap
+- Removed standalone CoreSkillsTile from DashboardLayout grid
+- Files changed: src/components/DashboardLayout.tsx, src/index.css, src/components/WorkExperienceSubsection.tsx (new), src/components/RepeatMedicationsSubsection.tsx (new)
+- **Learnings for future iterations:**
+  - WorkExperienceSubsection and RepeatMedicationsSubsection are standalone components (not defined inside DashboardLayout) to keep the file manageable — same pattern as LastConsultationSubsection but in separate files due to size
+  - The two-column grid uses `.pathway-columns` (not `.activity-grid`) to avoid conflicting with the CareerActivityTile's existing responsive grid
+  - CoreSkillsTile.tsx still exists but is no longer imported from DashboardLayout — US-010 will clean it up
+  - The RepeatMedicationsSubsection is a near-copy of CoreSkillsTile internals minus the Card wrapper — both files exist until cleanup in US-010
+---
@@ -8,11 +8,12 @@ import { CommandPalette } from './CommandPalette'
 import { DetailPanel } from './DetailPanel'
 import { CardHeader } from './Card'
 import { PatientSummaryTile } from './tiles/PatientSummaryTile'
-import { CoreSkillsTile } from './tiles/CoreSkillsTile'
 import { EducationTile } from './tiles/EducationTile'
 import { ProjectsTile } from './tiles/ProjectsTile'
 import { ParentSection } from './ParentSection'
 import CareerConstellation from './CareerConstellation'
+import { WorkExperienceSubsection } from './WorkExperienceSubsection'
+import { RepeatMedicationsSubsection } from './RepeatMedicationsSubsection'
 import { useActiveSection } from '@/hooks/useActiveSection'
 import { useDetailPanel } from '@/contexts/DetailPanelContext'
 import { consultations } from '@/data/consultations'
@@ -373,9 +374,6 @@ export function DashboardLayout() {
            {/* ProjectsTile — half width */}
            <ProjectsTile />

-            {/* CoreSkillsTile — full width */}
-            <CoreSkillsTile />
-
            {/* Patient Pathway — parent section with constellation graph + subsections */}
            <ParentSection title="Patient Pathway" tileId="patient-pathway">
              <CareerConstellation
@@ -385,6 +383,12 @@ export function DashboardLayout() {

              {/* Last Consultation subsection */}
              <LastConsultationSubsection />
+
+              {/* Two-column experience/skills grid */}
+              <div className="pathway-columns" style={{ marginTop: '24px' }}>
+                <WorkExperienceSubsection />
+                <RepeatMedicationsSubsection />
+              </div>
            </ParentSection>

            {/* EducationTile — full width */}
@@ -0,0 +1,274 @@
+import React from 'react'
+import type { LucideIcon } from 'lucide-react'
+import {
+  BarChart3, Code2, Database, PieChart, FileCode2,
+  Sheet, GitBranch, Workflow, Pill, Users, FileCheck,
+  TrendingUp, Route, ShieldAlert, Banknote, Handshake,
+  MessageSquare, UserPlus, RefreshCw, Calculator, Presentation,
+  ChevronRight,
+} from 'lucide-react'
+import { CardHeader } from './Card'
+import { skills } from '@/data/skills'
+import { useDetailPanel } from '@/contexts/DetailPanelContext'
+import type { SkillMedication, SkillCategory } from '@/types/pmr'
+
+const iconMap: Record<string, LucideIcon> = {
+  BarChart3, Code2, Database, PieChart, FileCode2,
+  Sheet, GitBranch, Workflow, Pill, Users, FileCheck,
+  TrendingUp, Route, ShieldAlert, Banknote, Handshake,
+  MessageSquare, UserPlus, RefreshCw, Calculator, Presentation,
+}
+
+const SKILLS_PER_CATEGORY = 4
+
+const categoryConfig: { id: SkillCategory; label: string }[] = [
+  { id: 'Technical', label: 'Technical' },
+  { id: 'Domain', label: 'Healthcare Domain' },
+  { id: 'Leadership', label: 'Strategic & Leadership' },
+]
+
+interface SkillRowProps {
+  skill: SkillMedication
+  onClick: () => void
+}
+
+function SkillRow({ skill, onClick }: SkillRowProps) {
+  const IconComponent = iconMap[skill.icon]
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault()
+      onClick()
+    }
+  }
+
+  return (
+    <div
+      role="button"
+      tabIndex={0}
+      onClick={onClick}
+      onKeyDown={handleKeyDown}
+      aria-label={`${skill.name}: ${skill.frequency}, ${skill.yearsOfExperience} years experience. Click for details.`}
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        gap: '10px',
+        padding: '8px 10px',
+        minHeight: '44px',
+        background: 'var(--bg-dashboard)',
+        borderRadius: 'var(--radius-sm)',
+        border: '1px solid var(--border-light)',
+        cursor: 'pointer',
+        transition: 'border-color 0.15s, box-shadow 0.15s',
+      }}
+      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
+        style={{
+          width: '26px',
+          height: '26px',
+          borderRadius: '6px',
+          background: 'var(--accent-light)',
+          color: 'var(--accent)',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          flexShrink: 0,
+        }}
+      >
+        {IconComponent && <IconComponent size={13} />}
+      </div>
+      <div style={{ flex: 1, minWidth: 0 }}>
+        <div
+          style={{
+            fontSize: '12.5px',
+            fontWeight: 600,
+            color: 'var(--text-primary)',
+            lineHeight: 1.3,
+          }}
+        >
+          {skill.name}
+        </div>
+        <div
+          style={{
+            fontSize: '10.5px',
+            color: 'var(--text-tertiary)',
+            fontFamily: '"Geist Mono", monospace',
+          }}
+        >
+          {skill.frequency} · {skill.yearsOfExperience} yrs
+        </div>
+      </div>
+      <div
+        style={{
+          fontSize: '10px',
+          fontWeight: 500,
+          padding: '2px 7px',
+          borderRadius: '20px',
+          background: 'var(--success-light)',
+          color: 'var(--success)',
+          border: '1px solid var(--success-border)',
+          flexShrink: 0,
+        }}
+      >
+        {skill.status}
+      </div>
+      <ChevronRight
+        size={14}
+        style={{ color: 'var(--text-tertiary)', flexShrink: 0 }}
+      />
+    </div>
+  )
+}
+
+interface CategorySectionProps {
+  label: string
+  categoryId: SkillCategory
+  skills: SkillMedication[]
+  onSkillClick: (skill: SkillMedication) => void
+  onViewAll: (category: SkillCategory) => void
+  isFirst: boolean
+}
+
+function CategorySection({
+  label,
+  categoryId,
+  skills: categorySkills,
+  onSkillClick,
+  onViewAll,
+  isFirst,
+}: CategorySectionProps) {
+  const visibleSkills = categorySkills.slice(0, SKILLS_PER_CATEGORY)
+  const remainingCount = categorySkills.length - SKILLS_PER_CATEGORY
+
+  return (
+    <div style={{ marginTop: isFirst ? 0 : '16px' }}>
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: '8px',
+          marginBottom: '10px',
+        }}
+      >
+        <span
+          style={{
+            fontSize: '10px',
+            fontWeight: 600,
+            textTransform: 'uppercase',
+            letterSpacing: '0.06em',
+            color: 'var(--text-tertiary)',
+            whiteSpace: 'nowrap',
+          }}
+        >
+          {label}
+        </span>
+        <div
+          style={{
+            flex: 1,
+            height: '1px',
+            background: 'var(--border-light)',
+          }}
+        />
+        <span
+          style={{
+            fontSize: '10px',
+            color: 'var(--text-tertiary)',
+            fontFamily: '"Geist Mono", monospace',
+            whiteSpace: 'nowrap',
+          }}
+        >
+          {categorySkills.length} items
+        </span>
+      </div>
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '6px' }}>
+        {visibleSkills.map((skill) => (
+          <SkillRow
+            key={skill.id}
+            skill={skill}
+            onClick={() => onSkillClick(skill)}
+          />
+        ))}
+      </div>
+      {remainingCount > 0 && (
+        <button
+          onClick={() => onViewAll(categoryId)}
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            gap: '4px',
+            marginTop: '8px',
+            padding: '4px 0',
+            minHeight: '44px',
+            background: 'none',
+            border: 'none',
+            cursor: 'pointer',
+            fontSize: '11px',
+            fontWeight: 500,
+            color: 'var(--accent)',
+            fontFamily: 'inherit',
+            transition: 'color 0.15s',
+          }}
+          onMouseEnter={(e) => {
+            e.currentTarget.style.color = 'var(--accent-hover)'
+          }}
+          onMouseLeave={(e) => {
+            e.currentTarget.style.color = 'var(--accent)'
+          }}
+          aria-label={`View all ${categorySkills.length} ${label} skills`}
+        >
+          View all ({categorySkills.length})
+          <ChevronRight size={12} />
+        </button>
+      )}
+    </div>
+  )
+}
+
+export function RepeatMedicationsSubsection() {
+  const { openPanel } = useDetailPanel()
+
+  const groupedSkills = categoryConfig.map(({ id, label }) => ({
+    id,
+    label,
+    skills: skills
+      .filter((s) => s.category === id)
+      .sort((a, b) => b.proficiency - a.proficiency),
+  }))
+
+  const handleSkillClick = (skill: SkillMedication) => {
+    openPanel({ type: 'skill', skill })
+  }
+
+  const handleViewAll = (category: SkillCategory) => {
+    openPanel({ type: 'skills-all', category })
+  }
+
+  return (
+    <div>
+      <CardHeader
+        dotColor="amber"
+        title="REPEAT MEDICATIONS"
+        rightText="Active prescriptions"
+      />
+      {groupedSkills.map((group, index) => (
+        <CategorySection
+          key={group.id}
+          label={group.label}
+          categoryId={group.id}
+          skills={group.skills}
+          onSkillClick={handleSkillClick}
+          onViewAll={handleViewAll}
+          isFirst={index === 0}
+        />
+      ))}
+    </div>
+  )
+}
@@ -0,0 +1,288 @@
+import React, { useState, useCallback } from 'react'
+import { motion, AnimatePresence } from 'framer-motion'
+import { ChevronRight } from 'lucide-react'
+import { CardHeader } from './Card'
+import { consultations } from '@/data/consultations'
+import { useDetailPanel } from '@/contexts/DetailPanelContext'
+
+const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches
+
+interface RoleItemProps {
+  consultation: typeof consultations[0]
+  isExpanded: boolean
+  onToggle: () => void
+  onViewFull: () => void
+}
+
+function RoleItem({ consultation, isExpanded, onToggle, onViewFull }: RoleItemProps) {
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === 'Enter' || e.key === ' ') {
+        e.preventDefault()
+        onToggle()
+      }
+      if (e.key === 'Escape' && isExpanded) {
+        e.preventDefault()
+        onToggle()
+      }
+    },
+    [onToggle, isExpanded],
+  )
+
+  return (
+    <div
+      style={{
+        background: 'var(--bg-dashboard)',
+        borderRadius: 'var(--radius-sm)',
+        border: `1px solid ${isExpanded ? 'var(--accent-border)' : 'var(--border-light)'}`,
+        transition: 'border-color 0.15s, box-shadow 0.15s',
+        overflow: 'hidden',
+      }}
+    >
+      {/* Clickable header */}
+      <div
+        role="button"
+        tabIndex={0}
+        onClick={onToggle}
+        onKeyDown={handleKeyDown}
+        aria-expanded={isExpanded}
+        aria-label={`${consultation.role} at ${consultation.organization}, ${consultation.duration}. Click to ${isExpanded ? 'collapse' : 'expand'} details.`}
+        style={{
+          display: 'flex',
+          gap: '10px',
+          padding: '10px 12px',
+          cursor: 'pointer',
+          minHeight: '44px',
+          alignItems: 'flex-start',
+        }}
+        onMouseEnter={(e) => {
+          if (!isExpanded) {
+            e.currentTarget.parentElement!.style.borderColor = 'var(--accent-border)'
+            e.currentTarget.parentElement!.style.boxShadow = 'var(--shadow-md)'
+          }
+        }}
+        onMouseLeave={(e) => {
+          if (!isExpanded) {
+            e.currentTarget.parentElement!.style.borderColor = 'var(--border-light)'
+            e.currentTarget.parentElement!.style.boxShadow = 'none'
+          }
+        }}
+      >
+        {/* Teal dot */}
+        <div
+          aria-hidden="true"
+          style={{
+            width: '8px',
+            height: '8px',
+            borderRadius: '50%',
+            background: '#0D6E6E',
+            flexShrink: 0,
+            marginTop: '4px',
+          }}
+        />
+
+        {/* Text content */}
+        <div style={{ flex: 1, minWidth: 0 }}>
+          <div
+            style={{
+              fontSize: '12.5px',
+              fontWeight: 600,
+              color: 'var(--text-primary)',
+              lineHeight: 1.3,
+            }}
+          >
+            {consultation.role}
+          </div>
+          <div
+            style={{
+              fontSize: '11px',
+              color: 'var(--text-secondary)',
+              marginTop: '2px',
+            }}
+          >
+            {consultation.organization}
+          </div>
+          <div
+            style={{
+              fontSize: '10px',
+              fontFamily: 'var(--font-mono)',
+              color: 'var(--text-tertiary)',
+              marginTop: '3px',
+            }}
+          >
+            {consultation.duration}
+          </div>
+        </div>
+
+        {/* Chevron */}
+        <ChevronRight
+          size={14}
+          style={{
+            color: 'var(--text-tertiary)',
+            flexShrink: 0,
+            marginTop: '2px',
+            transform: isExpanded ? 'rotate(90deg)' : 'none',
+            transition: 'transform 0.15s ease-out',
+          }}
+        />
+      </div>
+
+      {/* Expandable detail content */}
+      <AnimatePresence>
+        {isExpanded && (
+          <motion.div
+            initial={{ height: 0 }}
+            animate={{ height: 'auto' }}
+            exit={{ height: 0 }}
+            transition={
+              prefersReducedMotion
+                ? { duration: 0 }
+                : { duration: 0.2, ease: 'easeOut' }
+            }
+            style={{ overflow: 'hidden' }}
+          >
+            <div
+              style={{
+                padding: '0 12px 12px 30px',
+                borderTop: '1px solid var(--border-light)',
+                paddingTop: '12px',
+                borderLeft: '2px solid var(--accent)',
+                marginLeft: '12px',
+              }}
+            >
+              {/* Examination bullets */}
+              <ul
+                style={{
+                  listStyle: 'none',
+                  padding: 0,
+                  margin: '0 0 10px 0',
+                  display: 'flex',
+                  flexDirection: 'column',
+                  gap: '5px',
+                }}
+              >
+                {consultation.examination.map((bullet, i) => (
+                  <li
+                    key={i}
+                    style={{
+                      fontSize: '11.5px',
+                      color: 'var(--text-primary)',
+                      lineHeight: 1.5,
+                      paddingLeft: '12px',
+                      position: 'relative',
+                    }}
+                  >
+                    <span
+                      aria-hidden="true"
+                      style={{
+                        position: 'absolute',
+                        left: 0,
+                        top: '6px',
+                        width: '4px',
+                        height: '4px',
+                        borderRadius: '50%',
+                        background: 'var(--accent)',
+                        opacity: 0.5,
+                      }}
+                    />
+                    {bullet}
+                  </li>
+                ))}
+              </ul>
+
+              {/* Coded entries */}
+              <div
+                style={{
+                  display: 'flex',
+                  flexWrap: 'wrap',
+                  gap: '6px',
+                  marginBottom: '10px',
+                }}
+              >
+                {consultation.codedEntries.map((entry) => (
+                  <span
+                    key={entry.code}
+                    style={{
+                      fontSize: '10px',
+                      fontFamily: 'var(--font-mono)',
+                      padding: '2px 6px',
+                      borderRadius: '4px',
+                      background: 'var(--accent-light)',
+                      color: 'var(--accent)',
+                      border: '1px solid var(--accent-border)',
+                    }}
+                  >
+                    {entry.code}: {entry.description}
+                  </span>
+                ))}
+              </div>
+
+              {/* View full record link */}
+              <button
+                onClick={(e) => {
+                  e.stopPropagation()
+                  onViewFull()
+                }}
+                style={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  gap: '4px',
+                  fontSize: '11px',
+                  fontWeight: 500,
+                  color: 'var(--accent)',
+                  background: 'transparent',
+                  border: 'none',
+                  padding: '4px 0',
+                  cursor: 'pointer',
+                  fontFamily: 'inherit',
+                }}
+                onMouseEnter={(e) => {
+                  e.currentTarget.style.color = 'var(--accent-hover)'
+                }}
+                onMouseLeave={(e) => {
+                  e.currentTarget.style.color = 'var(--accent)'
+                }}
+              >
+                View full record
+                <ChevronRight size={12} />
+              </button>
+            </div>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </div>
+  )
+}
+
+export function WorkExperienceSubsection() {
+  const [expandedId, setExpandedId] = useState<string | null>(null)
+  const { openPanel } = useDetailPanel()
+
+  const handleToggle = useCallback((id: string) => {
+    setExpandedId((prev) => (prev === id ? null : id))
+  }, [])
+
+  const handleViewFull = useCallback(
+    (consultation: typeof consultations[0]) => {
+      openPanel({ type: 'career-role', consultation })
+    },
+    [openPanel],
+  )
+
+  return (
+    <div>
+      <CardHeader dotColor="teal" title="WORK EXPERIENCE" rightText={`${consultations.length} roles`} />
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
+        {consultations.map((c) => (
+          <RoleItem
+            key={c.id}
+            consultation={c}
+            isExpanded={expandedId === c.id}
+            onToggle={() => handleToggle(c.id)}
+            onViewFull={() => handleViewFull(c)}
+          />
+        ))}
+      </div>
+    </div>
+  )
+}
@@ -300,6 +300,20 @@ html {
  }
 }

+/* Pathway two-column layout — mobile-first (used in Patient Pathway) */
+.pathway-columns {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 16px;
+}
+
+/* Desktop: 2 columns */
+@media (min-width: 768px) {
+  .pathway-columns {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+
 /* ===== COMMAND PALETTE ANIMATIONS ===== */
@keyframes palette-overlay-in {
  from { opacity: 0; }