Supporting info for login screen rework

tasks/prd-dashboard-restructure.md

@@ -0,0 +1,193 @@
+# PRD: Dashboard Restructure — Section Hierarchy & Graph Improvements
+
+## Introduction
+
+Restructure the dashboard from a flat list of independent tiles into a hierarchical layout with two parent sections: **Patient Summary** (containing Latest Results as a subsection) and **Patient Pathway** (containing the constellation graph, last consultation, work experience, skills, and education). Improve the constellation graph's visual clarity, add cross-component hover highlighting, remove CV data that doesn't match the source CV, and explore typography options for parent section headers.
+
+## Goals
+
+- Consolidate related content into two clear parent sections with visually distinct subsections
+- Improve the constellation graph's readability (background, line weight, node size, zoom)
+- Add interactive hover-highlighting between experience/skills and the graph
+- Ensure all career data matches `References/CV_v4.md` exactly
+- Find the best typography treatment for parent section headers
+- Maintain responsive behaviour across all breakpoints
+
+## User Stories
+
+### US-001: Create Parent Section component with subsection support
+**Description:** As a developer, I need a parent section wrapper that visually distinguishes parent tiles from child subsections so the hierarchy is clear.
+
+**Acceptance Criteria:**
+- [ ] Parent section header text is significant and prominent — at least as large as the current KPI value text (which uses ~36px), not the small 12px uppercase tile headers
+- [ ] Child subsections have their own smaller headers but are clearly nested within the parent
+- [ ] Visual separation between subsections (divider or spacing) without looking like independent cards
+- [ ] Typecheck passes (`npm run typecheck`)
+- [ ] Verify in browser using Playwright
+
+### US-002: Restructure Patient Summary as parent section
+**Description:** As a visitor, I want the Patient Summary to contain the personal profile and Latest Results (KPIs) as a subsection, so related overview information is grouped together.
+
+**Acceptance Criteria:**
+- [ ] Patient Summary is a parent section with large, prominent header text
+- [ ] Remove the 4 headline metric figures currently in Patient Summary (9+ Years, 1.2M, £220M, £14.6M+)
+- [ ] Latest Results (KPI flip cards) appears as a named subsection within Patient Summary
+- [ ] Profile text remains in Patient Summary above the Latest Results subsection
+- [ ] KPI cards retain their existing click-to-detail behaviour
+- [ ] Typecheck passes
+- [ ] Verify in browser using Playwright
+
+### US-003: Rename Career Activity to Patient Pathway and restructure as parent section
+**Description:** As a visitor, I want all career-related content (graph, latest role, experience, skills, education) grouped under one "Patient Pathway" parent section.
+
+**Acceptance Criteria:**
+- [ ] Section renamed from "CAREER ACTIVITY" to "PATIENT PATHWAY"
+- [ ] Patient Pathway is a parent section with large, prominent header text (matching Patient Summary)
+- [ ] Contains the constellation graph at the top
+- [ ] Last Consultation content appears as a subsection below the graph
+- [ ] Education appears as a subsection at the bottom (including A-Levels)
+- [ ] The old standalone LastConsultationTile is removed from the dashboard
+- [ ] The old standalone EducationTile is removed from the dashboard
+- [ ] Typecheck passes
+- [ ] Verify in browser using Playwright
+
+### US-004: Two-column layout for experience and skills within Patient Pathway
+**Description:** As a visitor, I want to see work experience on the left and skills on the right beneath the graph/consultation, so I can see how they relate.
+
+**Acceptance Criteria:**
+- [ ] Two-column grid below the consultation subsection: experience (left), skills (right)
+- [ ] Work experience column shows all roles from consultations.ts with accordion expand (one at a time)
+- [ ] Skills column shows the existing CoreSkillsTile content (categorised skills with expand)
+- [ ] On mobile, columns stack vertically (experience above skills)
+- [ ] Both columns are subsections with their own headers
+- [ ] Typecheck passes
+- [ ] Verify in browser using Playwright
+
+### US-005: Hover-highlighting between experience/skills and constellation graph
+**Description:** As a visitor, I want to hover over a work experience entry or skill and see the corresponding node highlighted in the constellation graph, so I can visually trace relationships.
+
+**Acceptance Criteria:**
+- [ ] Hovering a work experience entry highlights its role node in the graph (and connected skill nodes)
+- [ ] Hovering a skill entry highlights its skill node in the graph (and connected role nodes)
+- [ ] Non-related nodes dim (matching existing graph hover behaviour)
+- [ ] Highlight clears when mouse leaves the entry
+- [ ] Touch devices: tap to highlight, tap elsewhere to clear
+- [ ] No performance issues (highlight should feel immediate)
+- [ ] Typecheck passes
+- [ ] Verify in browser using Playwright
+
+### US-006: Improve constellation graph visual clarity
+**Description:** As a visitor, I want the constellation graph to be clearer and easier to read, with better contrast and larger interactive elements.
+
+**Acceptance Criteria:**
+- [ ] Graph has an off-white/light background (e.g. `#F5F7F6` or similar warm neutral) instead of transparent
+- [ ] Link lines are more visible — slightly thicker stroke and/or higher contrast colour
+- [ ] Node bubbles are larger (increase radius for both role and skill nodes)
+- [ ] Graph is initially zoomed in to a comfortable level so nodes and labels are clearly readable
+- [ ] Graph remains interactive (hover, click behaviour preserved)
+- [ ] Responsive sizing still works across breakpoints
+- [ ] Typecheck passes
+- [ ] Verify in browser using Playwright
+
+### US-007: Remove inaccurate CV data and fix entries
+**Description:** As Andy, I want the portfolio to only contain career entries that match my actual CV so there is no fabricated content.
+
+**Acceptance Criteria:**
+- [ ] Remove "Duty Pharmacy Manager" consultation entry (`duty-pharmacist-2016`) — this role is not in the CV
+- [ ] Remove "Power BI Data Analyst Associate" certification — not in the CV
+- [ ] Remove "Clinical Pharmacy Diploma" certification — not in the CV (CV lists "NHS Leadership Academy — Mary Seacole Programme" instead)
+- [ ] Add "NHS Leadership Academy — Mary Seacole Programme (2018)" as a certification entry
+- [ ] Update constellation graph nodes/links to remove references to the deleted role
+- [ ] Remove "SQL Analytics Transformation" project entry — not in the CV as a standalone project
+- [ ] Convert "Budget Oversight" from a project entry to a skill entry under Budget Management (already exists in skills.ts — just remove the project timeline entry)
+- [ ] Add A-Levels to education: Mathematics (A*), Chemistry (B), Politics (C) — Highworth Grammar School, 2009–2011
+- [ ] Verify remaining entries (4 roles, GPhC registration, MPharm, Mary Seacole, A-Levels) match CV dates and titles exactly
+- [ ] Typecheck passes
+
+### US-008: Remove old standalone tiles from dashboard
+**Description:** As a developer, I need to clean up tiles that have been absorbed into parent sections so there are no duplicates.
+
+**Acceptance Criteria:**
+- [ ] LastConsultationTile removed from DashboardLayout grid (content now inside Patient Pathway)
+- [ ] CoreSkillsTile removed from DashboardLayout grid (content now inside Patient Pathway)
+- [ ] LatestResultsTile removed from DashboardLayout grid (content now inside Patient Summary)
+- [ ] EducationTile removed from DashboardLayout grid (content now inside Patient Pathway)
+- [ ] Old standalone tile components deleted from codebase
+- [ ] No visual gaps or broken grid layout after removal
+- [ ] Typecheck passes
+- [ ] Verify in browser using Playwright
+
+### US-009: Explore parent header typography options
+**Description:** As a designer, I want to evaluate different font choices and sizes for the parent section headers to find the most visually striking and appropriate treatment.
+
+**Acceptance Criteria:**
+- [ ] Use the `bencium-innovative-ux-designer` skill to evaluate font options for the parent headers
+- [ ] Test parent headers with existing project fonts: Elvaro Grotesque (various weights 300-900) and Blumir (variable 100-700)
+- [ ] Consider whether a different weight/style of the existing fonts creates sufficient visual impact at large sizes
+- [ ] Headers must feel premium and intentional — not generic. Should complement the clinical/luxury aesthetic
+- [ ] Produce at least 2-3 options with screenshots for comparison
+- [ ] Typecheck passes
+- [ ] Verify in browser using Playwright
+
+**Note:** This story should be done AFTER US-001 through US-004 are complete (layout must be in place first so fonts can be evaluated in context).
+
+### US-010: Apply chosen parent header typography
+**Description:** As a developer, I need to apply the selected font treatment to all parent section headers consistently.
+
+**Acceptance Criteria:**
+- [ ] Chosen font/weight/size applied to Patient Summary and Patient Pathway headers
+- [ ] Headers are consistent in treatment across both parent sections
+- [ ] Font scales appropriately across breakpoints (may need responsive size adjustments)
+- [ ] Typecheck passes
+- [ ] Verify in browser using Playwright
+
+**Note:** This story depends on US-009 (font exploration) being completed and a choice being made.
+
+## Functional Requirements
+
+- FR-1: Patient Summary parent section contains: profile text + Latest Results subsection (KPI cards)
+- FR-2: Patient Pathway parent section contains: constellation graph + Last Consultation subsection + two-column (experience | skills) subsection + Education subsection
+- FR-3: Parent section headers use large, prominent typography — at minimum the size of current KPI values (~36px) — clearly establishing them as top-level sections
+- FR-4: Constellation graph renders with off-white background, thicker/clearer links, and larger node radius
+- FR-5: Graph is initially zoomed/scaled so content fills the container at a comfortable reading size
+- FR-6: Hovering an experience or skill entry triggers the graph's existing highlight behaviour for the corresponding node
+- FR-7: Experience entries maintain accordion-expand behaviour (single open at a time)
+- FR-8: All career data matches `References/CV_v4.md` — no fabricated roles, certifications, or projects
+- FR-9: Responsive: two-column experience/skills grid stacks to single column on mobile; graph height adjusts per existing breakpoints
+- FR-10: Rename "CAREER ACTIVITY" to "PATIENT PATHWAY" throughout
+- FR-11: Education subsection includes MPharm, Mary Seacole Programme, and A-Levels
+- FR-12: Parent header font treatment is evaluated using the frontend-design skill before final implementation
+
+## Non-Goals
+
+- No changes to boot sequence, ECG animation, or login screen
+- No changes to the Sidebar (person header, tags, alerts)
+- No changes to the TopBar or Command Palette
+- No new data fields or API integrations
+- No changes to the DetailPanel component or its content
+- No changes to existing colour palette (only typography adjustments for parent headers)
+
+## Design Considerations
+
+- Parent section headers must be a significant visual element — they are the primary structural markers of the page. Think "section title" not "card label". At minimum ~36px (matching KPI values), potentially larger.
+- Subsection headers should retain the current style (small, uppercase, coloured dot) so the hierarchy is clear through contrast
+- The two-column experience/skills layout within Patient Pathway should feel like a natural part of the same card, not two separate cards jammed together
+- Graph background should be subtle enough not to compete with card backgrounds — a very light warm neutral
+- Font exploration (US-009) should use the `bencium-innovative-ux-designer` skill to evaluate options — the headers need to feel premium, not just "big text"
+- Typography evaluation must happen with the layout already in place so the fonts can be judged in their real context
+
+## Technical Considerations
+
+- The hover-highlighting (US-005) requires lifting hover state up: experience/skills items need to communicate hovered IDs to CareerConstellation via shared state (React context or prop drilling through the parent)
+- CareerConstellation already supports external highlight via its existing hover logic — this needs to be made controllable from outside (imperative ref or controlled prop)
+- Removing `duty-pharmacist-2016` from consultations.ts will affect constellation.ts nodes/links — both must be updated together
+- The `buildTimeline()` function in CareerActivityTile will be replaced by the new structure; the work experience list should read directly from consultations.ts
+- US-009 and US-010 are sequentially dependent on US-001–US-004 completing first
+
+## Success Metrics
+
+- All career data verifiably matches CV_v4.md
+- Graph nodes and labels are readable without zooming on a 1920x1080 desktop viewport
+- Hover highlighting connects experience/skills to graph nodes with no perceptible delay
+- Parent section headers are immediately recognisable as top-level structural elements
+- Dashboard passes visual check at desktop (1280px+), tablet (768px), and mobile (375px) widths

tasks/prd-login-screen-rework.md

@@ -0,0 +1,197 @@
+# PRD: Login Screen Rework
+
+## Introduction
+
+The login screen currently feels undersized on desktop/4K displays, visually disconnected from the GP dashboard aesthetic, and lacks clear affordances telling users they need to click the login button. This rework addresses sizing, style alignment, branding, background treatment, logo animation, and UX clarity — making the login feel like an integrated part of the GP system rather than a disconnected intro screen.
+
+## Goals
+
+- Scale the login card appropriately across all viewports (mobile through 4K)
+- Align login screen colors, typography, and styling with the GP dashboard
+- Rebrand from "CareerRecord PMR" to "CVMIS" with updated subtitle
+- Replace the Shield icon with the custom CVMIS capsule logo (animated reveal on login, static on dashboard)
+- Replace the solid dark background with a live blurred dashboard for visual continuity
+- Create a clear, sequenced UX flow (typing → connection established → button activates → pulse) so users know exactly when and what to click
+- Smooth dissolve transition from login overlay to revealed dashboard
+
+## User Stories
+
+### US-001: Responsive Login Card Sizing
+**Description:** As a visitor on a 1440p or 4K display, I want the login card to feel proportionate to my screen so it doesn't look lost in empty space.
+
+**Acceptance Criteria:**
+- [ ] Login card uses responsive width: min 320px, scales up with viewport (e.g. `clamp(320px, 28vw, 480px)`)
+- [ ] Internal padding, font sizes, icon size, and input heights scale proportionally
+- [ ] Card still looks good on mobile (≤480px viewport) — should not exceed viewport width minus margins
+- [ ] Card is vertically and horizontally centered
+- [ ] Typecheck passes
+- [ ] Verify in browser at 1440p and mobile viewport using dev-browser skill
+
+### US-002: Style Alignment with GP Dashboard
+**Description:** As a visitor, I want the login screen to feel like part of the same system I'll use after logging in, not a separate app.
+
+**Acceptance Criteria:**
+- [ ] Card uses dashboard color tokens: `pmr-surface` background, `pmr-border` borders, `pmr-text-primary`/`pmr-text-secondary` text colors
+- [ ] Input fields use `pmr-accent` (#0D6E6E) for focus states, `pmr-border-card` (#E4EDEB) for default borders
+- [ ] Button uses `pmr-accent` (#0D6E6E) background with hover `#0A8080`
+- [ ] Font usage matches dashboard: `font-ui` (Elvaro) for labels/buttons, `font-geist` for monospace data
+- [ ] Card shadow matches dashboard card shadow tokens (`shadow-sm` resting, `shadow-md` on the overlay context)
+- [ ] Typecheck passes
+- [ ] Verify in browser using dev-browser skill
+
+### US-003: Rebrand to CVMIS
+**Description:** As the portfolio owner, I want the login to say "CVMIS" (a tongue-in-cheek play on EMIS) with the subtitle "CV Management Information System".
+
+**Acceptance Criteria:**
+- [ ] Title text changed from "CareerRecord PMR" to "CVMIS"
+- [ ] Subtitle changed from "Clinical Information System" to "CV Management Information System"
+- [ ] Footer text "Secure clinical system login" remains unchanged
+- [ ] Typecheck passes
+
+### US-004: Animated CVMIS Logo on Login Screen
+**Description:** As a visitor, I want to see the CVMIS capsule logo animate on the login card — a polished reveal that replaces the generic Shield icon.
+
+**Source file:** `cvmis-logo.svg` — contains three capsule `<g>` groups: `#capsule-rx` (teal, Rx/pharmacy), `#capsule-terminal` (amber, `>_` code), `#capsule-data` (green, bar chart/analytics).
+
+**Animation reference:** `LogoReveal/frame 1-5.jpg` showing the reveal sequence.
+
+**Animation sequence:**
+1. **Frame 1-3 (Rise):** The green data capsule (`#capsule-data`) appears from nothing, rising upward into a fully visible upright/vertical position, centered. Scale from 0 → 1 and translateY from below. Duration: ~400-500ms.
+2. **Frame 4-5 (Fan out):** All three capsules fan out from the center position. The green capsule rotates clockwise to its final tilted-right position. The teal Rx capsule appears and rotates to its tilted-left position. The amber terminal capsule appears in the center. Duration: ~400-500ms. The fan-out should feel organic — eased, not mechanical.
+3. **Hold:** Logo rests in final fanned-out position (matching `frame 5.jpg` / the SVG's default layout).
+
+**Acceptance Criteria:**
+- [ ] `cvmis-logo.svg` is embedded as an inline React SVG component (not an `<img>` tag) so individual capsule groups can be animated
+- [ ] Shield icon (`lucide-react` `Shield`) is removed from the login card branding section
+- [ ] Logo container scales appropriately with the responsive card (US-001) — roughly 48-64px height depending on card size
+- [ ] Animation plays once on login card entrance, after the card's initial fade-in
+- [ ] Rise phase: green capsule scales/translates from hidden to upright center (~400-500ms, ease-out)
+- [ ] Fan-out phase: three capsules rotate/translate to final positions (~400-500ms, ease-in-out)
+- [ ] Total logo animation completes before typing animation begins (logo reveal → then typing starts)
+- [ ] `prefers-reduced-motion`: logo appears instantly in final fanned-out position, no animation
+- [ ] Typecheck passes
+- [ ] Verify in browser using dev-browser skill
+
+### US-005: CVMIS Logo on Dashboard TopBar
+**Description:** As a visitor on the dashboard, I want to see the CVMIS logo in the top-left corner instead of the generic Home icon, reinforcing the brand.
+
+**Acceptance Criteria:**
+- [ ] The `Home` icon from `lucide-react` in `TopBar.tsx` is replaced with the CVMIS logo SVG
+- [ ] Logo displays in its final fanned-out state (static, no animation on the dashboard)
+- [ ] Logo is sized to fit the TopBar height (~20-24px height, maintaining aspect ratio)
+- [ ] Logo colors match the SVG source: teal `#0b7979`, amber `#d97706`, green `#059669`
+- [ ] The "Headhunt Medical Center" brand text beside the logo remains unchanged
+- [ ] Typecheck passes
+- [ ] Verify in browser using dev-browser skill
+
+### US-006: Live Blurred Dashboard Background
+**Description:** As a visitor, I want to see the GP dashboard blurred behind the login card, creating visual continuity and a satisfying reveal on login.
+
+**Acceptance Criteria:**
+- [ ] During the `login` phase, `DashboardLayout` renders underneath the login overlay (requires change to `App.tsx` phase rendering)
+- [ ] Dashboard renders at scroll position 0 (top), showing the patient summary header area behind the blur
+- [ ] Login overlay uses `backdrop-filter: blur(20px)` (or similar) over a semi-transparent background to blur the dashboard beneath
+- [ ] Blur is constant from the moment the login screen appears (no ease-in)
+- [ ] Dashboard content is non-interactive while login overlay is present (pointer-events: none or overlay captures all events)
+- [ ] `prefers-reduced-motion`: blur still applies (static visual treatment), only animations are skipped
+- [ ] Typecheck passes
+- [ ] Verify in browser using dev-browser skill
+
+### US-007: Connection Status Indicator Rework
+**Description:** As a visitor, I want to clearly see the system's connection status change from red "awaiting" to green "connected" so I understand the login flow's progress.
+
+**Acceptance Criteria:**
+- [ ] Status indicator starts with RED LED (8-10px dot) + text "Awaiting secure connection..." in red
+- [ ] The three dots in "Awaiting secure connection..." animate (sequential dot loading animation)
+- [ ] 500ms after typing animation completes, LED transitions to GREEN + text changes to "Secure connection established, awaiting login" in green
+- [ ] LED dot is larger than current (8-10px vs current 6px) with a subtle glow/shadow for visibility
+- [ ] Text size increased from current 10px to 12px for readability
+- [ ] Connection state change is tied to typing completion + 500ms delay (not an independent 2000ms timer)
+- [ ] `prefers-reduced-motion`: state changes happen instantly, no dot animation
+- [ ] Typecheck passes
+- [ ] Verify in browser using dev-browser skill
+
+### US-008: Login Button Activation and Pulse
+**Description:** As a visitor, I want the login button to clearly signal when it becomes clickable through a visible pulse animation.
+
+**Acceptance Criteria:**
+- [ ] Login button remains disabled (opacity 0.6, no pointer cursor) while connection status is red
+- [ ] Button becomes enabled only when LED turns green (i.e., after typing completes + 500ms)
+- [ ] Once enabled, button begins a subtle pulse animation: scale 1.0 → 1.03 → 1.0, repeating every 3 seconds
+- [ ] Pulse uses ease-in-out timing, smooth and premium-feeling
+- [ ] Pulse stops on hover (hover state takes priority)
+- [ ] Pulse stops immediately on click
+- [ ] `prefers-reduced-motion`: no pulse animation, button just becomes enabled
+- [ ] Button receives keyboard focus when it becomes enabled (existing behavior, preserve it)
+- [ ] Typecheck passes
+- [ ] Verify in browser using dev-browser skill
+
+### US-009: Login Dissolve Transition
+**Description:** As a visitor, I want the login card and blurred overlay to dissolve away on login, revealing the dashboard underneath.
+
+**Acceptance Criteria:**
+- [ ] On login click: button shows pressed state → brief loading spinner (existing behavior)
+- [ ] After loading spinner, the login card fades out (opacity 0, slight scale up)
+- [ ] Simultaneously, the backdrop blur dissolves (blur value animates from 20px to 0, overlay opacity fades to 0)
+- [ ] Dashboard beneath becomes interactive once overlay fully dissolves
+- [ ] Total transition duration: ~600-800ms from click to fully revealed dashboard
+- [ ] `prefers-reduced-motion`: instant transition, no animation
+- [ ] Typecheck passes
+- [ ] Verify in browser using dev-browser skill
+
+## Functional Requirements
+
+- FR-1: Login card width uses `clamp()` for responsive scaling: minimum 320px, preferred ~28vw, maximum ~480px
+- FR-2: All internal card elements (padding, fonts, inputs, icon, button) scale proportionally with card width
+- FR-3: Login screen uses the same color tokens and font families as the dashboard
+- FR-4: Title reads "CVMIS", subtitle reads "CV Management Information System"
+- FR-5: `cvmis-logo.svg` is converted to an inline React SVG component with individually addressable capsule groups
+- FR-6: Login screen logo animates: green capsule rises → three capsules fan out → hold in final position
+- FR-7: Logo animation completes before the typing animation begins
+- FR-8: Dashboard TopBar replaces the `Home` lucide icon with a static (final-state) CVMIS logo
+- FR-9: `App.tsx` renders `DashboardLayout` during the `login` phase (behind the overlay), wrapped in its providers
+- FR-10: Login overlay covers the full viewport with semi-transparent background + `backdrop-filter: blur()`
+- FR-11: Connection status begins as red "Awaiting secure connection..." with animated dots
+- FR-12: Connection transitions to green "Secure connection established, awaiting login" exactly 500ms after typing animation completes
+- FR-13: Login button is disabled until green connection state is reached
+- FR-14: Login button pulses (3% scale, 3-second interval) once enabled
+- FR-15: Login transition dissolves both the card and the backdrop blur to reveal the live dashboard
+- FR-16: All animations respect `prefers-reduced-motion`
+
+## Non-Goals
+
+- No changes to the boot sequence or ECG animation
+- No changes to the "Secure clinical system login" footer text
+- No password visibility toggle or form validation (this is a theatrical/demo login)
+- No changes to the typing animation speeds (80ms/char username, 60ms/dot password)
+- No changes to the dashboard layout itself
+- No changes to the "Headhunt Medical Center" brand text in the TopBar
+
+## Design Considerations
+
+- **Reference images:** `current_login.jpg` (problem), `goal_login.jpg` (better proportions), `logged_in.jpg` (dashboard aesthetic to match)
+- **Logo animation reference:** `LogoReveal/frame 1-5.jpg` showing the capsule reveal sequence
+- **Card proportions:** The goal image (25% zoom) shows the card taking up roughly 25-30% of viewport width — use this as the scaling target
+- **Blur intensity:** ~20px Gaussian blur; dashboard should be recognizably "there" but not distracting
+- **Overlay color:** Semi-transparent version of the dashboard background — suggest `rgba(240, 245, 244, 0.7)` (pmr-bg with alpha) to match the warm sage feel
+- **LED glow:** Subtle `box-shadow` in the LED color (red or green) to make the dot feel like an actual indicator light
+- **Logo sizing:** On the login card, ~48-64px height. On the TopBar, ~20-24px height. Both maintain the SVG's natural aspect ratio
+
+## Technical Considerations
+
+- **SVG component:** The `cvmis-logo.svg` should be converted to a React component (e.g. `CvmisLogo.tsx`) that accepts props for size and animation state. The three `<g>` groups (`#capsule-rx`, `#capsule-terminal`, `#capsule-data`) need individual transform origins for rotation animation
+- **Animation approach:** Framer Motion is already in the project — use it for the capsule animations (staggered variants). CSS transforms for rotation/translation of each capsule group. Transform origins should be set at the base/bottom of each capsule so they fan out like a hand of cards
+- **App.tsx phase change:** Currently phases are mutually exclusive. For the blur effect, `DashboardLayout` must render during the `login` phase. This means wrapping it in `DetailPanelProvider` early and ensuring it doesn't trigger side effects that assume the user is "logged in"
+- **Performance:** `backdrop-filter: blur()` can be expensive. The dashboard is static during login (no scroll, no interaction), so this should be manageable. Consider `will-change: backdrop-filter` on the overlay
+- **Z-index:** Login overlay must sit above the dashboard. Current login uses `z-50` — this should work
+- **CSS animation for pulse:** The button pulse can be a CSS `@keyframes` animation rather than framer-motion, since it's a simple repeating animation that should be lightweight
+- **Shared logo component:** Both the login screen and TopBar use the same SVG component, just with different sizes and animation props (animated on login, static on dashboard)
+
+## Success Metrics
+
+- Login card appears proportionate on 1440p and 4K displays (no "lost in space" feeling)
+- Visual style continuity: a visitor would identify the login and dashboard as the same product
+- Logo animation feels polished and adds character to the login experience
+- CVMIS branding is consistent between login screen and dashboard TopBar
+- First-time visitors understand they need to click the login button without external instruction
+- Transition from login to dashboard feels seamless and polished

tasks/prd-responsive-scaling.md

@@ -0,0 +1,220 @@
+# PRD: Responsive Scaling & Mobile Layout
+
+## Introduction
+
+The dashboard is built for 1080p screens. On larger displays (1440p, 4K), everything appears too small — text, spacing, and UI elements don't scale with the viewport. On mobile, the sidebar is completely inaccessible (hidden with no toggle), text doesn't wrap properly and spills off-screen, and several components are unusable at narrow widths.
+
+This PRD addresses viewport-responsive scaling for larger screens and usability fixes for mobile, scoped to the dashboard phase only (TopBar, Sidebar, Card Grid, and all tiles).
+
+## Goals
+
+- Scale the dashboard proportionally on larger viewports (1440p should feel ~25% larger than 1080p)
+- Make the sidebar accessible on mobile via a slide-out drawer with toggle
+- Ensure all text wraps properly and nothing overflows horizontally at any viewport size
+- Maintain the current 1080p experience as the baseline — no changes at that resolution
+- Preserve the existing visual design language (fonts, colors, spacing ratios)
+
+## User Stories
+
+### US-000: Skip Boot/Login for Dev Iteration
+**Description:** As a developer, I want to skip the boot/ECG/login animation during this feature branch so I can iterate on the dashboard quickly.
+
+**Acceptance Criteria:**
+- [ ] In `App.tsx`, initial Phase state changed from `'boot'` to `'pmr'`
+- [ ] Boot, ECG, and login code remains — only initial state changes
+- [ ] App loads directly to dashboard on refresh
+- [ ] Typecheck passes
+- [ ] **Reverted in final story (US-013)**
+
+### US-001: Fluid Root Font-Size Scaling
+**Description:** As a user on a high-resolution display, I want the dashboard to scale proportionally so that text and UI elements are comfortably sized without manual browser zoom.
+
+**Acceptance Criteria:**
+- [ ] `html` element uses a `clamp()`-based font-size that scales with viewport width
+- [ ] At 1920px viewport width (1080p), effective font-size remains ~15px (current baseline)
+- [ ] At 2560px viewport width (1440p), effective font-size is ~18–19px (~25% increase)
+- [ ] At 3840px viewport width (4K), font-size caps at a sensible maximum (~22px)
+- [ ] Below 1920px, font-size does not shrink below 15px (mobile/tablet keeps baseline)
+- [ ] Typecheck passes
+
+### US-002: Convert Fixed px to rem in Layout Structure
+**Description:** As a developer, I need layout measurements to use `rem` so they scale with the root font-size, rather than remaining fixed at px values.
+
+**Acceptance Criteria:**
+- [ ] CSS custom properties `--topbar-height`, `--sidebar-width`, `--subnav-height` converted from px to rem
+- [ ] `DashboardLayout.tsx` margin/padding/height calculations use rem-based values
+- [ ] Card padding converted to rem
+- [ ] Grid gaps converted to rem
+- [ ] Dashboard content area scales proportionally with root font-size
+- [ ] At 1080p, layout looks identical to current (no visual regression)
+- [ ] Typecheck passes
+- [ ] Verify in browser using dev-browser skill
+
+### US-003: Convert Fixed px to rem in Typography
+**Description:** As a user on any screen size, I want text to scale with the viewport so it's always readable without zooming.
+
+**Acceptance Criteria:**
+- [ ] All inline `fontSize` styles in tile components converted from px to rem (e.g., `13px` → `0.8125rem` based on 16px root, or equivalent relative to 15px base)
+- [ ] TopBar text sizes converted to rem
+- [ ] Sidebar text sizes converted to rem
+- [ ] Card header text sizes converted to rem
+- [ ] At 1080p, text sizes are visually identical to current
+- [ ] At 1440p, text is proportionally larger and readable
+- [ ] Typecheck passes
+- [ ] Verify in browser using dev-browser skill
+
+### US-004: Convert Fixed px to rem in Spacing & Components
+**Description:** As a developer, I need padding, margins, icon sizes, and component dimensions to scale with viewport so the UI stays proportional.
+
+**Acceptance Criteria:**
+- [ ] Inline padding/margin values in tiles converted from px to rem
+- [ ] Badge/tag padding and sizing converted to rem
+- [ ] Icon sizes (where set inline) use rem
+- [ ] Border-radius values may remain in px (they don't need to scale)
+- [ ] At 1080p, spacing is visually identical to current
+- [ ] Typecheck passes
+- [ ] Verify in browser using dev-browser skill
+
+### US-005: Mobile Sidebar Drawer
+**Description:** As a mobile user, I want to access the sidebar content (person details, tags, alerts) via a slide-out drawer so I can see this information without it permanently taking screen space.
+
+**Acceptance Criteria:**
+- [ ] TopBar shows a menu/hamburger icon on screens below `lg` breakpoint (1024px)
+- [ ] Tapping the icon opens the sidebar as a slide-out drawer overlay from the left
+- [ ] Drawer includes a semi-transparent backdrop that closes the drawer on tap
+- [ ] Drawer contains the full sidebar content (PersonHeader, Tags, Alerts)
+- [ ] Drawer can be closed via the backdrop tap, a close button, or pressing Escape
+- [ ] Drawer uses the same animation timing as existing UI (200ms ease-out)
+- [ ] Drawer respects `prefers-reduced-motion` (skip to final state)
+- [ ] Sidebar remains inline (non-drawer) on `lg+` screens — no behavior change on desktop
+- [ ] Typecheck passes
+- [ ] Verify in browser using dev-browser skill
+
+### US-006: Fix Text Wrapping & Overflow
+**Description:** As a mobile user, I want all text content to wrap properly within its containers so nothing is cut off or requires horizontal scrolling.
+
+**Acceptance Criteria:**
+- [ ] No horizontal scrollbar appears at any viewport width (320px to 3840px)
+- [ ] All text in tile components wraps within its container — no off-screen overflow
+- [ ] Long skill names in CoreSkillsTile truncate with ellipsis rather than breaking layout
+- [ ] Career Activity entries wrap cleanly at narrow widths
+- [ ] PatientSummaryTile stats grid reflows to fewer columns on narrow screens
+- [ ] KPI cards in LatestResultsTile stack or reflow on mobile (no horizontal overflow)
+- [ ] Education entries wrap properly
+- [ ] Project entries wrap properly
+- [ ] `overflow-x: hidden` on the main content area as a safety net (not a primary fix — actual wrapping must work)
+- [ ] Typecheck passes
+- [ ] Verify in browser using dev-browser skill
+
+### US-007: Career Constellation Chart — Responsive Container Sizing
+**Description:** As a user on any device, I want the D3 career constellation chart (`CareerConstellation.tsx`) to fit its container without overflowing, so the visualization is usable at all viewport widths.
+
+**Acceptance Criteria:**
+- [ ] Chart SVG width/height derived from container dimensions (not hardcoded px)
+- [ ] Chart re-renders or resizes on viewport/container resize (via `ResizeObserver` or equivalent)
+- [ ] D3 force simulation parameters (charge strength, link distance, node spacing) adapt to available width
+- [ ] On mobile (<768px), chart remains visible and nodes don't overlap excessively or overflow
+- [ ] Node labels remain legible at small sizes (consider hiding secondary labels on narrow viewports)
+- [ ] Chart does not cause horizontal scrollbar at any viewport width
+- [ ] Typecheck passes
+- [ ] Verify in browser using dev-browser skill
+
+### US-008: Career Constellation Chart — Mobile Interaction
+**Description:** As a mobile user, I want to interact with the career constellation chart using touch so I can explore roles and skills.
+
+**Acceptance Criteria:**
+- [ ] Nodes are tappable on touch devices (adequate touch target size, minimum ~44px)
+- [ ] Tap on a role node triggers the same action as click (opens role detail)
+- [ ] Tap on a skill node triggers the same action as click (opens skill detail)
+- [ ] No hover-dependent information is inaccessible on touch (tooltips show on tap or info is always visible)
+- [ ] Chart doesn't conflict with page scroll (vertical scroll still works when touching the chart area)
+- [ ] Typecheck passes
+- [ ] Verify in browser using dev-browser skill
+
+### US-009: TopBar Mobile Refinements
+**Description:** As a mobile user, I want the TopBar to remain functional and readable at narrow viewport widths.
+
+**Acceptance Criteria:**
+- [ ] Hamburger/menu icon appears at the left of the TopBar below `lg` breakpoint
+- [ ] Brand text collapses gracefully (already mostly handled — verify no regression)
+- [ ] Search trigger remains accessible on mobile (either inline icon or within command palette trigger)
+- [ ] Session info collapses gracefully at narrow widths (already mostly handled — verify no regression)
+- [ ] TopBar height scales with rem (from US-002)
+- [ ] No horizontal overflow from TopBar content
+- [ ] Typecheck passes
+- [ ] Verify in browser using dev-browser skill
+
+### US-010: Verify at Key Viewport Sizes
+**Description:** As a developer, I need to verify the dashboard renders correctly at representative viewport sizes to confirm no regressions.
+
+**Acceptance Criteria:**
+- [ ] 375px wide (iPhone SE) — single column, drawer sidebar, all text wraps, no overflow
+- [ ] 768px wide (iPad portrait) — single column, drawer sidebar, comfortable spacing
+- [ ] 1024px wide (iPad landscape / small laptop) — sidebar inline, 2-column grid
+- [ ] 1920px wide (1080p) — visually identical to current production
+- [ ] 2560px wide (1440p) — ~25% scaled up, proportional layout, readable
+- [ ] Typecheck passes
+- [ ] Verify in browser using dev-browser skill
+
+### US-011: Re-enable Boot/Login Sequence
+**Description:** As a user, I want the full boot → ECG → login experience restored for production.
+
+**Acceptance Criteria:**
+- [ ] In `App.tsx`, initial Phase state reverted from `'pmr'` back to `'boot'`
+- [ ] Full boot → ECG → login → dashboard sequence works end to end
+- [ ] No other changes to `App.tsx`
+- [ ] Typecheck passes
+- [ ] Verify full sequence works via Playwright MCP
+
+## Functional Requirements
+
+- FR-1: Set `html { font-size: clamp(...) }` that scales from 15px at 1920px to ~22px at 3840px, floored at 15px below 1920px
+- FR-2: Convert all CSS custom properties used for layout dimensions (`--topbar-height`, `--sidebar-width`, `--subnav-height`) to rem units
+- FR-3: Convert all inline `fontSize`, `padding`, `margin`, and `gap` values in dashboard components from px to rem
+- FR-4: Add a mobile sidebar drawer component (slide-from-left overlay, backdrop, close on escape/backdrop-tap)
+- FR-5: Add a hamburger menu button to TopBar, visible below `lg` breakpoint, that toggles the sidebar drawer
+- FR-6: Apply `overflow-wrap: break-word` and appropriate `min-width: 0` on flex/grid children to prevent text overflow
+- FR-7: Ensure `overflow-x: hidden` on the main scrollable content area as a catch-all
+- FR-8: Tile content must reflow (fewer grid columns, stacked layout) at narrow viewports rather than overflowing
+- FR-9: Career Constellation D3 chart must size to its container, re-render on resize, and adapt force simulation parameters for narrow viewports
+- FR-10: D3 chart nodes must have adequate touch targets (44px minimum) and not block page scroll on touch devices
+
+## Non-Goals
+
+- No permanent changes to Boot, ECG, or Login phases (temporarily skipped for dev, restored in final story)
+- No changes to the 1080p visual appearance (it's the baseline)
+- No changes to color palette, fonts, or design language
+- No new responsive breakpoints beyond what Tailwind already provides (xs/sm/md/lg/xl)
+- No container queries or component-level responsive logic — viewport scaling via root font-size is the mechanism
+- No changes to Command Palette responsive behavior (separate concern)
+- No touch gesture support (swipe to open sidebar, etc.)
+
+## Design Considerations
+
+- The sidebar drawer on mobile should visually match the existing sidebar styling — same background (`#F7FAFA`), same border, same content
+- The drawer should overlay content with a semi-transparent backdrop, similar to the existing detail panel pattern used for project/career detail expansion
+- The hamburger icon should use `lucide-react` (e.g., `Menu` icon) consistent with existing icon usage
+- Font-size scaling should be smooth (fluid), not stepped at breakpoints, to avoid jarring jumps during window resize
+
+## Technical Considerations
+
+- **rem base calculation**: Since the current design uses `15px` as the body font-size, the rem conversion should be based on `15px = 1rem` (set on `html`). At 1080p, `1rem = 15px`. At 1440p, `1rem ≈ 18.75px`.
+- **Conversion formula**: `px / 15 = rem` (e.g., `13px = 0.867rem`, `48px = 3.2rem`, `272px = 18.133rem`)
+- **Tailwind classes**: Tailwind's spacing scale uses a 16px rem base by default. Since we're changing the html font-size, Tailwind rem-based classes (`p-4`, `text-sm`, etc.) will automatically scale. Only inline `px` styles need manual conversion.
+- **CSS custom properties**: Convert `--topbar-height: 48px` → `--topbar-height: 3.2rem`, etc.
+- **Sidebar drawer state**: Managed via React state in `DashboardLayout.tsx`, passed down or via context. Keep it simple — `useState<boolean>` for open/closed.
+- **Animations**: Drawer slide uses `transform: translateX(-100%)` → `translateX(0)` with 200ms ease-out, consistent with existing motion patterns.
+
+## Success Metrics
+
+- At 1440p, the dashboard is comfortably readable without browser zoom adjustments
+- On mobile (375px), all content is accessible, readable, and no horizontal scrolling occurs
+- Sidebar content is accessible on all screen sizes
+- No visual regression at 1080p
+- Zero horizontal overflow at any viewport width between 320px and 3840px
+
+## Open Questions
+
+- Should the mobile drawer have a swipe-to-close gesture? (Deferred as non-goal for now, can add later)
+- Should the search bar be accessible on mobile via a dedicated icon in TopBar? (Currently hidden below md — may want a small search icon)
+- At what viewport width should font scaling cap? (PRD suggests 3840px / ~22px — may need tuning)

tasks/prd-typography-spacing-rework.md

@@ -0,0 +1,215 @@
+# PRD: Typography & Spacing Scale Rework
+
+## Introduction
+
+The dashboard text and spacing are undersized for the target screen resolution (2560x1440 QHD). Everything — body copy, sidebar details, card content, KPI labels, project entries, tags — reads as tiny, failing to command the viewport. The current CV site (andy.charlwood.xyz) demonstrates the correct sense of scale: confident, readable, space-owning. This PRD defines a comprehensive rework of the type scale, spatial tokens, and layout proportions to bring the dashboard up to that standard.
+
+## Goals
+
+- Rework the entire type scale so text is comfortably readable on a 2560x1440 display
+- Increase spatial tokens (padding, gaps, margins) proportionally so the UI feels generous, not cramped
+- Rethink layout proportions (sidebar width, topbar height, card sizing) to match the larger type
+- Maintain the premium clinical aesthetic — the increase should feel considered, not bloated
+- Ensure responsive behavior still works at smaller breakpoints (no regression on tablet/mobile)
+- All changes verified visually in a real browser via Playwright MCP
+
+## Reference
+
+**Current CV site** (`andy.charlwood.xyz`) — screenshot provided as `current.png`. Note how:
+- Body text is ~15-16px, not 13px
+- KPI values are large and prominent
+- Info cards use generous padding
+- Labels and metadata are 12-13px, not 9-10px
+- The content confidently fills the viewport without feeling sparse
+
+**Target screen**: 2560x1440 (QHD), the user's primary display.
+
+## User Stories
+
+### US-018: Rework global type scale tokens
+**Description:** As a viewer on a QHD display, I want all text to be comfortably readable so the dashboard doesn't feel like I'm squinting at tiny type.
+
+**Acceptance Criteria:**
+- [ ] Define a new type scale in CSS custom properties or Tailwind config that replaces the current one
+- [ ] Minimum body text: 15px (currently 13px)
+- [ ] Minimum label/metadata text: 12px (currently 9-10px)
+- [ ] Minimum sidebar detail text: 13px (currently 11-11.5px)
+- [ ] Card header section titles: 13-14px (currently 12px)
+- [ ] KPI values: 32-36px (currently 28px)
+- [ ] KPI labels: 14px (currently 12px)
+- [ ] KPI sublabels: 12px (currently 10px)
+- [ ] ParentSection headings remain responsive and scale appropriately with the new system
+- [ ] No text anywhere in the dashboard falls below 11px
+- [ ] Typecheck passes (`npm run typecheck`)
+
+### US-019: Scale sidebar proportions
+**Description:** As a viewer, I want the sidebar to use its space effectively with appropriately sized text and spacing so it doesn't feel like a cramped afterthought.
+
+**Acceptance Criteria:**
+- [ ] Sidebar width increased (suggest 300-320px, use judgement)
+- [ ] Sidebar name: 17-18px (currently 15px)
+- [ ] Sidebar job title: 13px (currently 11.5px)
+- [ ] Sidebar detail rows (GPhC, Education, Location, etc.): 13px labels, 13px values (currently 11.5px)
+- [ ] Status badge text: 12-13px (currently 11px)
+- [ ] Tag pills: 12px (currently 10.5px), with proportionally larger padding
+- [ ] Alert flags: 13px (currently 11px), with proportionally larger padding
+- [ ] Section divider titles: 11-12px (currently 10px)
+- [ ] Avatar: 56-64px (currently 52px)
+- [ ] Sidebar internal padding: 24px (currently 16-20px)
+- [ ] Spacing between sidebar sections: proportionally increased
+- [ ] Verify in browser using Playwright MCP — sidebar should feel balanced with main content
+
+### US-020: Scale TopBar and SubNav
+**Description:** As a viewer, I want the TopBar and SubNav to feel substantial rather than thin strips across the top.
+
+**Acceptance Criteria:**
+- [ ] TopBar height: 56-60px (currently 48px)
+- [ ] TopBar brand text: 15px (currently 13px)
+- [ ] TopBar "Remote" label: 12px (currently 11px)
+- [ ] Search bar height: 44-48px (currently 42px), text 14px (currently 13px)
+- [ ] Session info text: 13px (currently 11-12px)
+- [ ] Ctrl+K badge text: 11px (currently 10px)
+- [ ] SubNav height: 42-44px (currently 36px)
+- [ ] SubNav tab text: 14px (currently 13px)
+- [ ] Update `--topbar-height` and `--subnav-height` CSS variables accordingly
+- [ ] Typecheck passes
+- [ ] Verify in browser using Playwright MCP
+
+### US-021: Scale card and grid spacing
+**Description:** As a viewer, I want cards to have generous internal spacing and the grid to breathe so the content doesn't feel packed into undersized containers.
+
+**Acceptance Criteria:**
+- [ ] Card padding: 24-28px (currently 20px)
+- [ ] Grid gap: 20px on desktop (currently 16px)
+- [ ] Main content area padding (the `p-4 md:p-6 lg:px-7` classes): increase by ~25%
+- [ ] Card border-radius: consider whether 8px still works at the larger scale or should increase to 10-12px
+- [ ] CardHeader margin-bottom: proportionally increased
+- [ ] Typecheck passes
+- [ ] Verify in browser using Playwright MCP
+
+### US-022: Scale Patient Summary tile content
+**Description:** As a viewer, I want the Patient Summary — the first and most prominent tile — to feel commanding and readable.
+
+**Acceptance Criteria:**
+- [ ] Profile text body: 15px with line-height 1.65 (currently 13px/1.6)
+- [ ] KPI metric cards: increased padding (20px, currently 16px)
+- [ ] KPI values: 32-36px (currently 28px)
+- [ ] KPI labels: 14px (currently 12px)
+- [ ] KPI sublabels: 12px (currently 10px)
+- [ ] KPI grid gap: 16px (currently 12px)
+- [ ] The entire Patient Summary tile should feel like the hero section of the dashboard
+- [ ] Verify in browser using Playwright MCP
+
+### US-023: Scale Last Consultation and career content
+**Description:** As a viewer, I want career details and consultation records to be easily scannable.
+
+**Acceptance Criteria:**
+- [ ] Last Consultation field labels: 11-12px (currently 10px)
+- [ ] Last Consultation field values: 13px (currently 11.5px)
+- [ ] Last Consultation role title: 15px (currently 13.5px)
+- [ ] Bullet point text: 14px (currently 12.5px)
+- [ ] "View full record" link: 13px (currently 12px)
+- [ ] Typecheck passes
+- [ ] Verify in browser using Playwright MCP
+
+### US-024: Scale Projects tile and tech tags
+**Description:** As a viewer, I want project entries and their tech stack tags to be readable without squinting.
+
+**Acceptance Criteria:**
+- [ ] Project item text: 13px (currently 11.5px)
+- [ ] Project item padding: 14px 16px (currently 10px 12px)
+- [ ] Project year labels: 11-12px (currently 10px)
+- [ ] Tech stack tags: 10-11px (currently 9px), padding 3px 8px (currently 2px 6px)
+- [ ] Project list gap: 10px (currently 8px)
+- [ ] Verify in browser using Playwright MCP
+
+### US-025: Scale remaining subsections (Education, Skills/Repeat Meds, Work Experience)
+**Description:** As a viewer, I want all subsections within Patient Pathway to match the new type scale.
+
+**Acceptance Criteria:**
+- [ ] Audit all remaining subsection components (EducationSubsection, RepeatMedicationsSubsection, WorkExperienceSubsection) for font sizes below the new minimums
+- [ ] Apply consistent sizing: body text 14-15px, labels 12-13px, metadata 11-12px minimum
+- [ ] Ensure expanded/accordion content also uses the new scale
+- [ ] Typecheck passes
+- [ ] Verify in browser using Playwright MCP — scroll through entire dashboard to check consistency
+
+### US-026: Visual regression check across all breakpoints
+**Description:** As a viewer on any device, I want the scaled-up dashboard to still work well at smaller screen sizes.
+
+**Acceptance Criteria:**
+- [ ] Verify at 1920x1080 (HD) — content should still be comfortable, not oversized
+- [ ] Verify at 1440x900 — should still work
+- [ ] Verify at 768px tablet — sidebar hidden, single column, no overflow
+- [ ] Verify at 375px mobile — everything stacks, no horizontal scroll, no truncation
+- [ ] Verify Playwright screenshots at each breakpoint
+- [ ] No horizontal overflow at any breakpoint
+- [ ] `npm run build` succeeds without errors
+
+## Functional Requirements
+
+- FR-1: All type size changes must be made in component inline styles and/or CSS custom properties — maintain the existing approach (inline styles for component-specific sizes, CSS vars for shared tokens)
+- FR-2: Update `--sidebar-width` CSS variable to the new sidebar width
+- FR-3: Update `--topbar-height` and `--subnav-height` CSS variables
+- FR-4: The dashboard-grid gap must increase in `index.css`
+- FR-5: Every component with hardcoded `fontSize` values must be updated (see audit below)
+- FR-6: Responsive Tailwind classes on ParentSection headings must be re-evaluated for the new scale
+- FR-7: All changes must pass `npm run typecheck` and `npm run build`
+
+## Current Sizing Audit (Components to Modify)
+
+| Component | File | Current Sizes |
+|-----------|------|---------------|
+| TopBar | `src/components/TopBar.tsx` | 13px brand, 11px remote, 13px search, 10px kbd, 11-12px session |
+| SubNav | `src/components/SubNav.tsx` | 13px tabs, 36px height |
+| Sidebar | `src/components/Sidebar.tsx` | 15px name, 11.5px title, 11-11.5px details, 10.5px tags, 11px alerts, 10px section titles |
+| Card | `src/components/Card.tsx` | 20px padding, 12px header title, 10px header right text, 8px dot |
+| ParentSection | `src/components/ParentSection.tsx` | Responsive heading (22-35px) |
+| PatientSummaryTile | `src/components/tiles/PatientSummaryTile.tsx` | 13px body, 28px KPI value, 12px KPI label, 10px KPI sub |
+| ProjectsTile | `src/components/tiles/ProjectsTile.tsx` | 11.5px item, 10px year, 9px tech tags |
+| DashboardLayout (LastConsultation) | `src/components/DashboardLayout.tsx` | 10px field labels, 11.5px field values, 13.5px role, 12.5px bullets, 12px link |
+| EducationSubsection | `src/components/EducationSubsection.tsx` | Audit needed |
+| RepeatMedicationsSubsection | `src/components/RepeatMedicationsSubsection.tsx` | Audit needed |
+| WorkExperienceSubsection | `src/components/WorkExperienceSubsection.tsx` | Audit needed |
+| CSS Variables | `src/index.css` | 272px sidebar, 48px topbar, 36px subnav, 12-16px grid gap |
+
+## Non-Goals
+
+- No changes to the boot sequence, ECG animation, or login screen — those are locked
+- No changes to color palette, font families, or shadow system
+- No layout restructuring (no moving sections, no changing tile order)
+- No changes to functionality (click handlers, command palette behavior, detail panels)
+- No changes to animation timing or motion design
+- No new components or features
+
+## Design Considerations
+
+- **Proportional scaling, not uniform**: Don't just multiply everything by 1.3. Headings scale less than body text (they're already large enough relatively). Metadata scales more than body (it's the most undersized category).
+- **The clinical metaphor still applies**: The sidebar should still feel like a clinical person-header, not a marketing page. Data density is part of the character — just at a readable size.
+- **Weight over size for hierarchy**: Continue using font-weight (400/500/600/700) as the primary hierarchy tool. Size increases should tighten the scale, not spread it.
+- **Reference the current CV site** (`current.png`) for the "feel" of appropriate sizing, but don't replicate its design — the GP system aesthetic is different.
+- **The implementing agent has autonomy** to adjust specific px values within the ranges suggested in the acceptance criteria. The ranges are guidance, not mandates. Use Playwright to preview and iterate. If 14px looks better than 15px somewhere, that's fine — the goal is a dashboard that feels right, not one that hits exact numbers.
+
+## Technical Considerations
+
+- Many sizes are inline `fontSize` values in React style objects — these need direct editing in each component
+- CSS custom properties (`--sidebar-width`, `--topbar-height`, `--subnav-height`) are used by multiple components, so changing them propagates automatically
+- The `dashboard-grid` gap is in `index.css` — change it there
+- Card padding is in `Card.tsx` — one change propagates to all cards
+- `CardHeader` sizing is in `Card.tsx` — one change propagates to all section headers
+- Sidebar `SectionTitle` is a local component in `Sidebar.tsx`
+- `LastConsultationSubsection` is defined inside `DashboardLayout.tsx`, not its own file
+- Responsive Tailwind classes on `ParentSection` headings need updating to match the new scale
+
+## Success Metrics
+
+- No text in the dashboard below 11px
+- Body text comfortably readable without leaning in on a 2560x1440 display
+- The dashboard "owns" the viewport — content feels confident, not shrunken
+- Proportions feel balanced — sidebar doesn't look skinny next to scaled content
+- No responsive regressions at tablet and mobile breakpoints
+- Passes build and typecheck
+
+## Open Questions
+
+- Should the Command Palette and Detail Panel also be scaled, or are they already appropriately sized? (Implement core dashboard first, address these in a follow-up if needed)
+- Should the KPI grid move from 2x2 to a different layout at the new scale? (Probably not — but verify visually)