Redesign CVMIS system 2

Redesign CVMIS system
Update progress: Task 15 completed (Accessibility audit)
2026-02-13 16:42:45 +00:00 · 2026-02-13 16:42:23 +00:00 · 2026-02-13 01:42:59 +00:00 · 2026-02-13 01:42:05 +00:00 · 2026-02-13 01:25:43 +00:00 · 2026-02-13 01:25:07 +00:00
79 changed files with 27374 additions and 14099 deletions
@@ -23,7 +23,12 @@
      "mcp__playwright__browser_evaluate",
      "Bash(git add:*)",
      "Bash(git commit -m \"$\\(cat <<''EOF''\nTask 4: Rebuild PatientBanner with premium fonts, tooltip, and animations\n\n- Replace font-inter with font-ui \\(Elvaro Grotesque\\) throughout banner\n- Add custom NHSNumberWithTooltip with Framer Motion animated reveal\n- Add AnimatePresence crossfade between full/condensed banner states\n- Animate mobile overflow menu enter/exit\n- Add SkipButton to App.tsx for boot/ECG phase skip\n- Add shadow-pmr-banner, focus ring styles, prefers-reduced-motion support\n- Fix mobile banner to use patient data instead of hardcoded values\n\nCo-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>\nEOF\n\\)\")",
-      "Bash(git commit:*)"
+      "Bash(git commit:*)",
      "Bash(ls:*)",
      "Bash(tasklist:*)",
      "Bash(npx -y serve -l 3333 .)",
      "Bash(npx serve:*)",
      "Bash(timeout /t 3 /nobreak)"
    ]
  }
 }
@@ -0,0 +1,278 @@
 #!/usr/bin/env node
 'use strict';
 var chalk     = require('chalk'),
    os         = require('os'),
    httpServer = require('../lib/http-server'),
    portfinder = require('portfinder'),
    opener     = require('opener'),
    fs         = require('fs'),
    url        = require('url');
 var argv = require('minimist')(process.argv.slice(2), {
  alias: {
    tls: 'ssl'
  }
 });
 var ifaces = os.networkInterfaces();
 process.title = 'http-server';
 if (argv.h || argv.help) {
  console.log([
    'usage: http-server [path] [options]',
    '',
    'options:',
    '  -p --port    Port to use. If 0, look for open port. [8080]',
    '  -a           Address to use [0.0.0.0]',
    '  -d           Show directory listings [true]',
    '  -i           Display autoIndex [true]',
    '  -g --gzip    Serve gzip files when possible [false]',
    '  -b --brotli  Serve brotli files when possible [false]',
    '               If both brotli and gzip are enabled, brotli takes precedence',
    '  -e --ext     Default file extension if none supplied [none]',
    '  -s --silent  Suppress log messages from output',
    '  --cors[=headers]   Enable CORS via the "Access-Control-Allow-Origin" header',
    '                     Optionally provide CORS headers list separated by commas',
    '  -o [path]    Open browser window after starting the server.',
    '               Optionally provide a URL path to open the browser window to.',
    '  -c           Cache time (max-age) in seconds [3600], e.g. -c10 for 10 seconds.',
    '               To disable caching, use -c-1.',
    '  -t           Connections timeout in seconds [120], e.g. -t60 for 1 minute.',
    '               To disable timeout, use -t0',
    '  -U --utc     Use UTC time format in log messages.',
    '  --log-ip     Enable logging of the client\'s IP address',
    '',
    '  -P --proxy       Fallback proxy if the request cannot be resolved. e.g.: http://someurl.com',
    '  --proxy-options  Pass options to proxy using nested dotted objects. e.g.: --proxy-options.secure false',
    '',
    '  --username   Username for basic authentication [none]',
    '               Can also be specified with the env variable NODE_HTTP_SERVER_USERNAME',
    '  --password   Password for basic authentication [none]',
    '               Can also be specified with the env variable NODE_HTTP_SERVER_PASSWORD',
    '',
    '  -S --tls --ssl   Enable secure request serving with TLS/SSL (HTTPS)',
    '  -C --cert    Path to TLS cert file (default: cert.pem)',
    '  -K --key     Path to TLS key file (default: key.pem)',
    '',
    '  -r --robots        Respond to /robots.txt [User-agent: *\\nDisallow: /]',
    '  --no-dotfiles      Do not show dotfiles',
    '  --mimetypes        Path to a .types file for custom mimetype definition',
    '  -h --help          Print this list and exit.',
    '  -v --version       Print the version and exit.'
  ].join('\n'));
  process.exit();
 }
 var port = argv.p || argv.port || parseInt(process.env.PORT, 10),
    host = argv.a || '0.0.0.0',
    tls = argv.S || argv.tls,
    sslPassphrase = process.env.NODE_HTTP_SERVER_SSL_PASSPHRASE,
    proxy = argv.P || argv.proxy,
    proxyOptions = argv['proxy-options'],
    utc = argv.U || argv.utc,
    version = argv.v || argv.version,
    logger;
 var proxyOptionsBooleanProps = [
  'ws', 'xfwd', 'secure', 'toProxy', 'prependPath', 'ignorePath', 'changeOrigin',
  'preserveHeaderKeyCase', 'followRedirects', 'selfHandleResponse'
 ];
 if (proxyOptions) {
  Object.keys(proxyOptions).forEach(function (key) {
    if (proxyOptionsBooleanProps.indexOf(key) > -1) {
      proxyOptions[key] = proxyOptions[key].toLowerCase() === 'true';
    }
  });
 }
 if (!argv.s && !argv.silent) {
  logger = {
    info: console.log,
    request: function (req, res, error) {
      var date = utc ? new Date().toUTCString() : new Date();
      var ip = argv['log-ip']
          ? req.headers['x-forwarded-for'] || '' +  req.connection.remoteAddress
          : '';
      if (error) {
        logger.info(
          '[%s] %s "%s %s" Error (%s): "%s"',
          date, ip, chalk.red(req.method), chalk.red(req.url),
          chalk.red(error.status.toString()), chalk.red(error.message)
        );
      }
      else {
        logger.info(
          '[%s] %s "%s %s" "%s"',
          date, ip, chalk.cyan(req.method), chalk.cyan(req.url),
          req.headers['user-agent']
        );
      }
    }
  };
 }
 else if (chalk) {
  logger = {
    info: function () {},
    request: function () {}
  };
 }
 if (version) {
  logger.info('v' + require('../package.json').version);
  process.exit();
 }
 if (!port) {
  portfinder.basePort = 8080;
  portfinder.getPort(function (err, port) {
    if (err) { throw err; }
    listen(port);
  });
 }
 else {
  listen(port);
 }
 function listen(port) {
  var options = {
    root: argv._[0],
    cache: argv.c,
    timeout: argv.t,
    showDir: argv.d,
    autoIndex: argv.i,
    gzip: argv.g || argv.gzip,
    brotli: argv.b || argv.brotli,
    robots: argv.r || argv.robots,
    ext: argv.e || argv.ext,
    logFn: logger.request,
    proxy: proxy,
    proxyOptions: proxyOptions,
    showDotfiles: argv.dotfiles,
    mimetypes: argv.mimetypes,
    username: argv.username || process.env.NODE_HTTP_SERVER_USERNAME,
    password: argv.password || process.env.NODE_HTTP_SERVER_PASSWORD
  };
  if (argv.cors) {
    options.cors = true;
    if (typeof argv.cors === 'string') {
      options.corsHeaders = argv.cors;
    }
  }
  if (proxy) {
    try {
      new url.URL(proxy)
    }
    catch (err) {
      logger.info(chalk.red('Error: Invalid proxy url'));
      process.exit(1);
    }
  }
  if (tls) {
    options.https = {
      cert: argv.C || argv.cert || 'cert.pem',
      key: argv.K || argv.key || 'key.pem',
      passphrase: sslPassphrase,
    };
    try {
      fs.lstatSync(options.https.cert);
    }
    catch (err) {
      logger.info(chalk.red('Error: Could not find certificate ' + options.https.cert));
      process.exit(1);
    }
    try {
      fs.lstatSync(options.https.key);
    }
    catch (err) {
      logger.info(chalk.red('Error: Could not find private key ' + options.https.key));
      process.exit(1);
    }
  }
  var server = httpServer.createServer(options);
  server.listen(port, host, function () {
    var protocol = tls ? 'https://' : 'http://';
    logger.info([
      chalk.yellow('Starting up http-server, serving '),
      chalk.cyan(server.root),
      tls ? (chalk.yellow(' through') + chalk.cyan(' https')) : ''
    ].join(''));
    logger.info([chalk.yellow('\nhttp-server version: '), chalk.cyan(require('../package.json').version)].join(''));
    logger.info([
      chalk.yellow('\nhttp-server settings: '),
      ([chalk.yellow('CORS: '), argv.cors ? chalk.cyan(argv.cors) : chalk.red('disabled')].join('')),
      ([chalk.yellow('Cache: '), argv.c ? (argv.c === '-1' ? chalk.red('disabled') : chalk.cyan(argv.c + ' seconds')) : chalk.cyan('3600 seconds')].join('')),
      ([chalk.yellow('Connection Timeout: '), argv.t === '0' ? chalk.red('disabled') : (argv.t ? chalk.cyan(argv.t + ' seconds') : chalk.cyan('120 seconds'))].join('')),
      ([chalk.yellow('Directory Listings: '), argv.d ? chalk.red('not visible') : chalk.cyan('visible')].join('')),
      ([chalk.yellow('AutoIndex: '), argv.i ? chalk.red('not visible') : chalk.cyan('visible')].join('')),
      ([chalk.yellow('Serve GZIP Files: '), argv.g || argv.gzip ? chalk.cyan('true') : chalk.red('false')].join('')),
      ([chalk.yellow('Serve Brotli Files: '), argv.b || argv.brotli ? chalk.cyan('true') : chalk.red('false')].join('')),
      ([chalk.yellow('Default File Extension: '), argv.e ? chalk.cyan(argv.e) : (argv.ext ? chalk.cyan(argv.ext) : chalk.red('none'))].join(''))
    ].join('\n'));
    logger.info(chalk.yellow('\nAvailable on:'));
    if (argv.a && host !== '0.0.0.0') {
      logger.info(`  ${protocol}${host}:${chalk.green(port.toString())}`);
    } else {
      Object.keys(ifaces).forEach(function (dev) {
        ifaces[dev].forEach(function (details) {
          if (details.family === 'IPv4') {
            logger.info(('  ' + protocol + details.address + ':' + chalk.green(port.toString())));
          }
        });
      });
    }
    if (typeof proxy === 'string') {
      if (proxyOptions) {
        logger.info('Unhandled requests will be served from: ' + proxy + '. Options: ' + JSON.stringify(proxyOptions));
      }
      else {
        logger.info('Unhandled requests will be served from: ' + proxy);
      }
    }
    logger.info('Hit CTRL-C to stop the server');
    if (argv.o) {
      const openHost = host === '0.0.0.0' ? '127.0.0.1' : host;
      let openUrl = `${protocol}${openHost}:${port}`;
      if (typeof argv.o === 'string') {
        openUrl += argv.o[0] === '/' ? argv.o : '/' + argv.o;
      }
      logger.info('Open: ' + openUrl);
      opener(openUrl);
    }
    // Spacing before logs
    if (!argv.s) logger.info();
  });
 }
 if (process.platform === 'win32') {
  require('readline').createInterface({
    input: process.stdin,
    output: process.stdout
  }).on('SIGINT', function () {
    process.emit('SIGINT');
  });
 }
 process.on('SIGINT', function () {
  logger.info(chalk.red('http-server stopped.'));
  process.exit();
 });
 process.on('SIGTERM', function () {
  logger.info(chalk.red('http-server stopped.'));
  process.exit();
 });
@@ -1,72 +0,0 @@
 # AGENTS.md
 This file provides guidance to AI agents (OpenCode, Claude Code, etc.) when working with code in this repository.
 ## Project Overview
 Interactive CV/portfolio website for Andy Charlwood with a distinctive loading experience: terminal boot sequence → ECG canvas animation with name tracing. Built as a React SPA with TypeScript and Vite.
 ## Commands
 - `npm run dev` — Start dev server (localhost:5173)
 - `npm run build` — TypeScript compile + Vite production build
 - `npm run typecheck` — TypeScript type checking only (`tsc --noEmit`)
 - `npm run lint` — ESLint
 - `npm run preview` — Preview production build
 No test framework is configured.
 ## Architecture
 ### Loading UI Flow
 `App.tsx` manages a `Phase` state (`'boot'` → `'ecg'`). Each phase renders exclusively:
 1. **BootSequence** — Terminal typing animation (~4s), green-on-black aesthetic
 2. **ECGAnimation** — Canvas-based heartbeat animation (~5-6s) with letter tracing, background transitions from black to white
 Total boot-to-ECG completion time must be ≤10 seconds.
 ### Key Patterns
 - **Canvas ECG**: `ECGAnimation.tsx` does imperative canvas drawing with requestAnimationFrame — flatline → 3 heartbeats (40px→60px→100px) → letter tracing → exit.
 ### Path Aliases
 `@/` maps to `./src/` (configured in both `vite.config.ts` and `tsconfig.json`).
 ### Styling
 Tailwind CSS with custom design tokens in `tailwind.config.js`:
 - **Colors**: teal `#00897B` (primary), coral `#FF6B6B` (accent), ECG palette (green/cyan/dim)
 - **Fonts**: Plus Jakarta Sans (primary), Inter Tight (secondary), Fira Code (mono/terminal)
 - **Breakpoints**: xs 480px, sm 640px, md 768px, lg 1024px, xl 1280px
 ### Type System
 All data types live in `src/types/index.ts`. Strict TypeScript — no `any` types. One component per file with typed props interfaces.
 ## Guardrails
 - Boot sequence text and colors must match `References/concept.html` exactly (CLINICAL TERMINAL v3.2.1 format).
 - ECG animation timing/amplitudes/color transitions must match the concept reference.
 - When writing components with visual styling or animations, invoke the `frontend-design` skill first.
 ## Available Skills
 This project has access to the following agent skills in `.agents/skills/`:
 - **frontend-design** — Use for any visual styling or animation work
 ## Project Structure
 ```
 src/
 ├── components/    # One component per file (PascalCase)
 ├── hooks/         # Custom hooks (camelCase, use* prefix)
 ├── lib/           # Utility functions
 ├── types/         # TypeScript interfaces
 ├── App.tsx        # Phase manager (root component)
 └── index.css      # Global styles + Tailwind directives
 Ralph/             # Implementation plan, guardrails, progress tracking
 References/        # Source content (concept.html, ECGVideo/)
 ```
@@ -4,12 +4,14 @@ This file provides guidance to Claude Code (claude.ai/code) when working with co
 ## Project Overview
-Interactive CV/portfolio for Andy Charlwood, presented as a premium clinical information system. The concept: *what if a GP surgery's patient record system were redesigned by a luxury product studio?* The structure and metaphor of a real clinical system (patient banner, sidebar navigation, record sections) — but elevated with refined typography, considered motion, and atmospheric depth.
+Interactive CV/portfolio for Andy Charlwood, presented as a GP clinical record system. The concept: *what if a GP surgery's patient record system were redesigned by a luxury product studio?* The structure and metaphor of a real clinical system (tiles as record sections, status indicators, medication-style skill entries, alerts) — but elevated with refined typography, considered motion, and a modern light aesthetic.
-**This is NOT a faithful NHS system clone.** It's a showcase portfolio that *evokes* the feel of clinical software while being distinctly beautiful. The clinical metaphor is the creative conceit; the execution should feel premium and elegant.
+**This is NOT a faithful NHS system clone.** It's a showcase portfolio that *evokes* the feel of clinical software while being distinctly beautiful. The clinical metaphor is the creative conceit; the execution should feel premium and contemporary.
 Built as a React SPA with TypeScript and Vite.
 **Reference design:** `References/GPSystemconcept.html` — the visual and structural target for the dashboard.
 ## Commands
 - `npm run dev` — Start dev server (localhost:5173)
@@ -24,22 +26,54 @@ No test framework is configured.
 ### Four-Phase UI Flow
-`App.tsx` manages a `Phase` state (`'boot'` → `'ecg'` → `'login'` → `'pmr'`). Each phase renders exclusively:
+`App.tsx` manages a `Phase` state (`'boot'` → `'ecg'` → `'login'` → `'dashboard'`). Each phase renders exclusively:
 1. **BootSequence** — Terminal typing animation (~4s), green-on-black aesthetic. Fira Code font, matrix-green palette. **Locked — do not change.**
 2. **ECGAnimation** — Canvas-based heartbeat animation with mask-based letter tracing. Background transitions from black to `#1E293B`. **Locked — do not change.**
-3. **LoginScreen** — Animated login card on dark background. Types credentials at a natural pace, then presents an interactive "Log In" button for the user to click. This phase onward is open to design evolution.
+3. **LoginScreen** — Animated login card on dark background. Types credentials at a natural pace, then presents an interactive "Log In" button for the user to click. Login transitions to the dashboard.
-4. **PMRInterface** — The main portfolio experience: patient banner + clinical sidebar + scrollable content views.
+4. **DashboardLayout** — The main portfolio experience: TopBar + Sidebar + scrollable tile-based dashboard.
 ### Dashboard Layout (Post-Login)
 The dashboard uses a three-zone layout:
 ```
 ┌─────────────────────────────────────────────────────┐
 │  TopBar (fixed, 48px) — brand, search, session      │
 ├──────────┬──────────────────────────────────────────┤
 │          │                                          │
 │ Sidebar  │  Card Grid (scrollable)                  │
 │ (272px)  │  ┌─────────────────────────────────┐     │
 │          │  │ Patient Summary (full width)     │     │
 │ Person   │  ├────────────────┬────────────────┤     │
 │ Header   │  │ Latest Results │ Repeat Meds    │     │
 │          │  │ (KPIs)         │ (Core Skills)  │     │
 │ Tags     │  ├────────────────┴────────────────┤     │
 │          │  │ Last Consultation (full width)   │     │
 │ Alerts   │  ├─────────────────────────────────┤     │
 │          │  │ Career Activity (full width)     │     │
 │          │  ├─────────────────────────────────┤     │
 │          │  │ Education (full width)           │     │
 │          │  ├─────────────────────────────────┤     │
 │          │  │ Projects (full width)            │     │
 │          │  └─────────────────────────────────┘     │
 └──────────┴──────────────────────────────────────────┘
 ```
 **No view switching.** The dashboard is a single scrollable page of tiles. Users scroll to see all sections. Detail drill-down happens by expanding tiles in-place (accordion pattern).
 ### Key Patterns
- **Canvas ECG**: `ECGAnimation.tsx` does imperative canvas drawing with requestAnimationFrame — flatline → 3 heartbeats (40px→60px→100px) → mask-based letter tracing → exit.
+- **Canvas ECG**: `ECGAnimation.tsx` does imperative canvas drawing with requestAnimationFrame — flatline → 3 heartbeats (40px→60px→100px) → mask-based letter tracing → exit. **Locked — do not change.**
- **Clinical sidebar navigation**: `ClinicalSidebar.tsx` provides hash-routed view switching with keyboard shortcuts (Alt+1-7, arrow keys, "/" for search).
+- **TopBar**: `TopBar.tsx` — fixed at top, brand + search trigger + session info. Search bar triggers Command Palette on click/Ctrl+K.
- **Patient banner condensation**: `PatientBanner.tsx` uses IntersectionObserver via `useScrollCondensation` hook — full banner (80px) condenses to 48px on scroll.
+- **Sidebar**: `Sidebar.tsx` — light background, contains PersonHeader (avatar, name, title, status, details), Tags, and Alerts only. Skills, Projects, Education are in the main content tiles.
- **Staggered entrance animations**: Framer Motion variants with sequenced delays (banner → sidebar → content).
+- **Card Grid**: CSS Grid, 2 columns on desktop (gap 16px), 1 column on mobile. Tiles use a reusable `Card` component with consistent styling.
- **View switching**: Instant — no crossfade or slide between views. Content fades in once on initial load only.
+- **Tile Expansion**: Career Activity items, Project items, and Skill items expand in-place with height-only animation (200ms, ease-out). Single-expand accordion — only one item open at a time.
- **Expandable rows**: Consultation entries, medication rows, and problem entries expand in-place with height animation.
+- **KPI Flip Cards**: Latest Results metrics flip on click to show explanation text. CSS perspective transform, 400ms.
- **Responsive breakpoints**: Desktop (full sidebar + banner), Tablet (icon-only sidebar), Mobile (bottom nav bar).
+- **Command Palette**: Ctrl+K opens a Spotlight-style search overlay. Fuzzy search via fuse.js. Keyboard navigation (arrow keys, Enter, Escape).
 - **Staggered entrance**: TopBar slides down → Sidebar slides from left → Content fades in. Quick (200-300ms).
 - **Expandable content**: Height-only animation, 200ms ease-out. Content grows/shrinks — no opacity fade.
 - **Responsive breakpoints**: Desktop (full sidebar + 2-col grid), Tablet (collapsed/hidden sidebar + 1-col), Mobile (no sidebar, stacked tiles).
 ### Path Aliases
@@ -49,14 +83,14 @@ No test framework is configured.
 All data types live in `src/types/index.ts` and `src/types/pmr.ts`. Strict TypeScript — no `any` types. One component per file with typed props interfaces.
-## Design Direction: Clinical Luxury
+## Design Direction: GP System Dashboard
-The aesthetic direction is **"Clinical Luxury"** — the precision and information density of a medical records system, married to the refinement of high-end product design. Think Bloomberg Terminal redesigned by a Swiss design house.
+The aesthetic direction is a **modern GP system dashboard** — the precision and information density of a medical records system, but with a light, contemporary, premium feel. Think: a healthcare SaaS product redesigned by a Swiss product studio.
 ### Tone
 - **Precise, not cold.** Every element has a reason. Spacing is generous but intentional.
- **Structured, not rigid.** The grid and hierarchy of clinical software, but with room to breathe.
+- **Light, not washed out.** Warm sage background, clean white surfaces, deliberate color accents.
 - **Technical, not sterile.** Monospace data, status indicators, and coded entries create authentic texture.
 - **Elegant, not decorative.** No gratuitous ornament. Beauty comes from proportion, contrast, and type.
@@ -64,100 +98,121 @@ The aesthetic direction is **"Clinical Luxury"** — the precision and informati
 Typography is the primary vehicle for premium feel. Avoid generic system fonts.
- **UI / Body — two candidates to evaluate (build with both, then choose):**
+- **UI / Body:**
-  - **Elvaro Grotesque** (by TabojaStudio) — Modern grotesque sans-serif. 7 weights: Light (300), Regular (400), Medium (500), SemiBold (600), Bold (700), ExtraBold (800), Black (900). Also available as variable font. The "grotesque" classification carries institutional credibility (Helvetica/Akzidenz-Grotesk lineage) while feeling distinctly premium. Slightly condensed proportions suit data-dense UI.
+  - **Elvaro Grotesque** (primary, `font-ui`) — Modern grotesque sans-serif. 7 weights (300-900). Institutional credibility with premium feel. Slightly condensed proportions suit data-dense UI.
-  - **Blumir** (by VisualCreativeStd) — Geometric-humanist hybrid, "blends geometric precision." 7 weights: Thin (100), ExtraLight (200), Light (300), Regular (400), Medium (500), SemiBold (600), Bold (700) — plus oblique variants for each. Also available as variable font. More refined/luxurious feel than Elvaro.
+  - **Blumir** (alternative, `font-ui-alt`) — Geometric-humanist hybrid. Variable font (100-700). More refined/luxurious feel.
-  - Both fonts are sourced from Envato (licensed), stored locally in `Fonts/`. Web font files (WOFF/WOFF2) are available for both. **Do not use Inter, Roboto, or system defaults** — these read as generic.
+  - Both fonts sourced from Envato (licensed), stored in `Fonts/`. **Do not use Inter, Roboto, DM Sans, or system defaults.**
-  - Font files for web:
+  - Font files: Elvaro `Fonts/Elvaro Grotesque Sans Family/WOFF/TBJElvaro-*.woff2`, Blumir `Fonts/blumir-font-family/WOFF/Blumir-VF.woff2`
-    - Elvaro: `Fonts/Elvaro Grotesque Sans Family/WOFF/TBJElvaro-*.woff2`
+- **Monospace / Data**: Geist Mono for timestamps, session info, GPhC number, dates, coded entries. Creates "technical texture."
    - Blumir: `Fonts/blumir-font-family/WOFF/Blumir-VF.woff2` (variable font)
 - **Monospace / Data**: Geist Mono for timestamps, coded entries, registration numbers, and tabular data. This creates the "technical texture" that sells the clinical metaphor.
 - **Terminal phase**: Fira Code — locked, do not change.
- **Type scale**: Keep it tight. Clinical systems use small text. Headings 15-18px, body 13-14px, labels 11-12px. Precision over drama.
+- **Type scale**: Tight. Headings 15-18px, body 12.5-14px, labels 10-12px. Precision over drama.
- **Weight hierarchy**: Use weight (400/500/600/700) rather than size to establish hierarchy. Bold section headers, medium labels, regular body.
+- **Weight hierarchy**: Use weight (400/500/600/700) rather than size to establish hierarchy.
 ### Color Palette
-The palette anchors on NHS Blue as the institutional accent, with a predominantly dark sidebar + light content split that creates natural drama.
+The palette anchors on teal as the primary accent, with a light sidebar + warm content background.
- **NHS Blue `#005EB8`** — The single strong accent color. Used for active states, links, buttons, interactive elements. This IS the brand color of the clinical metaphor.
+- **Teal `#0D6E6E`** — Primary accent. Active states, links, avatar gradient, interactive elements. Hover: `#0A8080`. Light: `rgba(10,128,128,0.08)`.
- **Dark sidebar `#1E293B`** — Creates gravitas. The "serious software" feel comes from this dark chrome.
+- **Background `#F0F5F4`** — Warm sage. The content area feels organic, not flat gray.
- **Patient banner `#334155`** — Slightly lighter than sidebar. The information-dense header bar.
+- **Sidebar `#F7FAFA`** — Very light. Right border `#D4E0DE` separates from content.
- **Content background** — Not flat gray. Consider a very subtle warm tint, or a faint noise/grain texture overlay on `#F5F7FA` to add depth. The content area should feel like paper, not a spreadsheet.
+- **TopBar `#FFFFFF`** — White surface. Bottom border `#D4E0DE`.
- **Cards `#FFFFFF`** — Clean white with refined shadows (layered, not single-value). Cards should feel like they float slightly above the content surface.
+- **Cards `#FFFFFF`** — White with shadow-sm and border-light. Hover deepens to shadow-md.
- **Status colors**: Green `#22C55E`, Amber `#F59E0B`, Red `#EF4444` — used sparingly for traffic-light indicators. Always paired with text labels, never as sole signifier.
+- **Status colors**: Success `#059669`, Amber `#D97706`, Alert `#DC2626`, Purple `#7C3AED` — each with light bg and border variants. Always paired with text labels.
- **Text**: Primary `#111827`, Secondary `#6B7280`, Muted `#94A3B8`. Use the full range for hierarchy.
+- **Text**: Primary `#1A2B2A`, Secondary `#5B7A78`, Tertiary `#8DA8A5`. Use full range for hierarchy.
 - **Borders**: Structural `#D4E0DE`, Cards/inner `#E4EDEB`.
 ### Shadows & Depth
-Real clinical software is flat and border-heavy. This project should use shadows to create subtle layered depth:
+Three-tier shadow system for layered depth:
- **Cards**: Multi-layered shadow — e.g., `0 1px 2px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.03)`. Gentle, not Material Design dramatic.
+- **Cards (resting)**: `0 1px 2px rgba(26,43,42,0.05)` — gentle, always present.
- **Sidebar**: Optional very subtle inner shadow or glow at the right edge where it meets content.
+- **Cards (hover/interactive)**: `0 2px 8px rgba(26,43,42,0.08)` — slightly lifted.
- **Patient banner**: Subtle drop shadow below to separate from content.
+- **Overlays (command palette, modals)**: `0 8px 32px rgba(26,43,42,0.12)` — clearly elevated.
- **Hover states**: Cards may lift very slightly on hover (1-2px translate + shadow deepen). Keep it restrained.
+- **Hover states**: Shadow deepens + border color strengthens. Subtle, not dramatic.
 ### Motion
 Motion should feel considered and premium, never flashy:
- **Entrance animations**: The PMR interface materializes in sequence — banner slides down → sidebar slides from left → content fades in. Quick (200-300ms) with easing.
+- **Entrance animations**: Dashboard materializes in sequence — TopBar slides down → Sidebar slides from left → Content fades in. Quick (200-300ms) with easing.
 - **Login typing**: 80ms/char for username, 60ms/dot for password. Natural, readable pace. After typing completes, "Log In" button becomes interactive — user clicks to proceed.
- **Login transition**: On button click, card scales slightly and fades. Background carries over to PMR (both are `#1E293B`-derived).
+- **Login transition**: On button click, card scales slightly and fades. Transition to dashboard layout.
- **View switching**: Instant, no transition between views. This preserves the "software application" feel.
+- **Tile expansion**: Height-only animation, 200ms ease-out. Content grows/shrinks — no opacity fade.
- **Expandable content**: Height-only animation, 200ms ease-out. Content grows/shrinks — no opacity fade.
+- **KPI flip**: CSS perspective rotateY, 400ms ease-in-out. Click to flip, click to flip back.
- **Hover states**: Subtle, immediate. Background color shifts, not transforms. Think: OS-level responsiveness.
+- **Command palette**: Scale 0.97→1.0 + translateY entrance, 200ms. Backdrop fade.
- **Clinical alert**: Spring animation for entrance (Framer Motion `type: "spring"`). Dismiss: icon crossfade → height collapse.
+- **Hover states**: Subtle, immediate. Border color shifts, shadow deepens. Think: OS-level responsiveness.
 - **`prefers-reduced-motion`**: All animations skip to final state. No exceptions.
 ### Spatial Composition
- **Generous but structured.** More whitespace than a real clinical system. Cards have 16-24px padding. Sections breathe.
+- **Generous but structured.** Cards have 20px padding. Tile grid has 16px gap. Sections breathe.
- **Clear visual hierarchy.** Section headers (uppercase, small, tracked-out) → content. No ambiguity about what's a label vs. data.
+- **Clear visual hierarchy.** Card headers: uppercase, small (12px), tracked-out, secondary color with colored dot indicator.
- **Two-column summary grid** on desktop, single column on mobile. Cards span full width or half width — no orphan columns.
+- **Two-column grid** on desktop, single column on mobile. Full-width tiles span both columns.
- **Tables** use proper `<table>` markup with styled headers on a light gray background. Alternating row colors. This is where the clinical authenticity lives.
+- **Sidebar sections** separated by thin divider titles (10px, uppercase, tertiary, with line extending right).
 ### What Makes It Memorable
-The distinctiveness comes from the *contrast between structure and polish*:
+The distinctiveness comes from the *clinical metaphor applied to a modern interface*:
- A dark, serious sidebar next to warm, airy content
+- A light, professional sidebar with clinical-style person header and alert flags
- Small, precise monospace data in a field of generous whitespace
+- Skills presented as "Repeat Medications" with frequency dosing (twice daily, when required)
- NHS blue punching through an otherwise muted palette
+- KPI metrics that flip to reveal explanations, like interactive test results
- The clinical metaphor itself — "Patient Record" for a CV is unexpected and charming
+- Career history as a clinical timeline with color-coded entry types
 - The boot sequence → ECG → login flow is theatrical in a way that real clinical software never is
 - Command palette (Ctrl+K) for searching records, like a clinical search tool
 ## Styling
 Tailwind CSS with custom design tokens in `tailwind.config.js`:
- **Color tokens**: All PMR-prefixed tokens in Tailwind config (`pmr-sidebar`, `pmr-banner`, `pmr-nhsblue`, etc.)
+- **Color tokens**: PMR-prefixed tokens (`pmr-accent`, `pmr-bg`, `pmr-surface`, `pmr-sidebar`, `pmr-text-primary`, etc.)
- **Fonts**: Configured as `font-inter`, `font-geist` (monospace) in Tailwind — these need updating when the primary UI font changes.
+- **Fonts**: `font-ui` (Elvaro Grotesque), `font-ui-alt` (Blumir), `font-geist` (Geist Mono), `font-mono` (Fira Code for terminal)
 - **Breakpoints**: xs 480px, sm 640px, md 768px, lg 1024px, xl 1280px
- **Border radius**: 4px default for cards/inputs (clinical precision). 12px exception for login card only.
+- **Border radius**: 8px default for cards/tiles (`var(--radius)`). 6px for inner elements (`var(--radius-sm)`). 12px exception for login card and command palette.
 - **Shadows**: `shadow-sm`, `shadow-md`, `shadow-lg` tokens matching three-tier system.
 - CSS custom properties in `index.css` for both boot/ECG phase tokens and dashboard phase tokens.
 - Inline styles only for dynamic values that Tailwind can't express.
 - CSS custom properties in `index.css` for both boot/ECG phase tokens and PMR phase tokens.
 ## Guardrails
 - **Boot sequence**: Text, colors, and timing must match `References/concept.html` exactly. **Do not modify.**
 - **ECG animation**: Timing, amplitudes, color transitions, and mask-based text reveal must match the concept reference. **Do not modify.**
 - **Reference design**: `References/GPSystemconcept.html` is the visual and structural target for the dashboard.
 - **CV content**: Sourced from `References/CV_v4.md` — roles, dates, and achievement numbers must be accurate.
 - **Icons**: Via `lucide-react`, not unicode symbols.
- **Accessibility**: WCAG 2.1 AA compliance. Semantic HTML, ARIA attributes, keyboard navigation, `prefers-reduced-motion` support throughout.
+- **Accessibility**: WCAG 2.1 AA compliance. Semantic HTML, ARIA attributes, keyboard navigation, `prefers-reduced-motion` support throughout. Status indicators always paired with text labels.
 - **No generic aesthetics**: Every design decision should feel intentional. If a component could appear in any random SaaS template, it needs more character.
 - **Fonts**: Elvaro Grotesque (primary) or Blumir (alt). Never Inter, Roboto, DM Sans, or system defaults. DM Sans appears in the concept HTML as a placeholder only.
 ## Project Structure
 ```
 src/
 ├── components/        # One component per file (PascalCase)
-│   └── views/         # PMR content views (SummaryView, ConsultationsView, etc.)
+│   ├── tiles/         # Dashboard tile components (PatientSummaryTile, LatestResultsTile, etc.)
 │   ├── views/         # Legacy PMR views (being replaced by tiles — may be referenced during transition)
 │   ├── TopBar.tsx     # Fixed top bar (brand, search trigger, session)
 │   ├── Sidebar.tsx    # Light sidebar (person header, tags, alerts)
 │   ├── DashboardLayout.tsx  # Main layout (topbar + sidebar + card grid)
 │   ├── Card.tsx       # Reusable card component with header
 │   ├── CommandPalette.tsx   # Ctrl+K search overlay
 │   └── ...            # Boot, ECG, Login (unchanged)
 ├── contexts/          # React contexts (AccessibilityContext)
-├── data/              # Static data files (patient, consultations, medications, etc.)
+├── data/              # Static data files
 │   ├── patient.ts     # Person details
 │   ├── consultations.ts  # Career roles (used in Last Consultation + Career Activity)
 │   ├── medications.ts # Legacy skill data
 │   ├── problems.ts    # Achievements
 │   ├── investigations.ts  # Projects
 │   ├── documents.ts   # Education entries
 │   ├── profile.ts     # Personal statement
 │   ├── tags.ts        # Sidebar tags
 │   ├── alerts.ts      # Sidebar alert flags
 │   ├── kpis.ts        # KPI metrics for Latest Results
 │   └── skills.ts      # Skills with frequency/years (medication metaphor)
 ├── hooks/             # Custom hooks (camelCase, use* prefix)
-├── lib/               # Utility functions
+├── lib/               # Utility functions (search.ts for fuse.js)
 ├── types/             # TypeScript interfaces (index.ts, pmr.ts)
 ├── App.tsx            # Phase manager (root component)
 └── index.css          # Global styles + Tailwind directives
 Ralph/                 # Implementation plan, guardrails, progress tracking
-References/            # Source content (concept.html, CV_v4.md, ECGVideo/)
+References/            # Source content (concept.html, GPSystemconcept.html, CV_v4.md)
 ```
@@ -1,65 +1,201 @@
-# Implementation Plan — The Clinical Record (v3)
+# Implementation Plan — GP System Dashboard Overhaul
 ## Project Overview
-A premium portfolio CV presented as a clinical information system. The *structure* and *layout* come from GP software (EMIS Web, SystmOne) — patient banner, sidebar navigation, consultation journal, medications table, etc. — but the *execution* is **Clinical Luxury**: refined typography, layered shadows, generous spacing, premium fonts, atmospheric depth.
+Replace the "CareerRecord PMR" sidebar-nav + view-switching interface with a tile-based GP System dashboard. Reference design: `References/GPSystemconcept.html`.
 **This is NOT a faithful NHS clone.** It's a showcase portfolio that *evokes* clinical software while being distinctly beautiful.
 **What's already done:** Data files (`src/data/*`), type system (`src/types/pmr.ts`), phase management (`App.tsx`), boot sequence, ECG animation, and design system foundation (Tailwind tokens, fonts, CSS variables).
 **What this plan builds:** The visual layer from login screen through to the full PMR interface — every component rebuilt to Clinical Luxury quality with the new premium font, refined surfaces, and user-interactive login.
 ## Quality Checks
-Run after every task. All must pass before committing.
+- `npm run typecheck` — zero errors
 - `npm run lint` — pass (pre-existing AccessibilityContext warning OK)
 - `npm run build` — must succeed
-```
+## Important
 npm run typecheck
 npm run lint
 npm run build
 ```
-## Reference Files
+**This file is for progress tracking only.** For implementation detail on any task, read the referenced file in `Ralph/refs/`. Do NOT bloat this file with implementation notes — keep it lean.
-Each task references files in `Ralph/refs/`. Read the referenced file(s) for full design specs, implementation patterns, and code snippets. The ref files ARE the spec — do not duplicate their content here.
+---
 Always also read `Ralph/refs/ref-design-system.md` — it is the single source of truth for colors, typography, spacing, surfaces, and motion.
 Also read `CLAUDE.md` for font setup instructions (Elvaro Grotesque and Blumir candidates in `Fonts/` directory).
 ## Tasks
- [x] **Task 1: Design system foundation.** Tailwind config, CSS variables, font loading. *(Completed — see progress.txt)*
+### Phase 0: Foundation
- [x] **Task 1b: Boot sequence and ECG animation.** *(Completed and locked — do not modify)*
+#### Task 1: Update design tokens and Tailwind config
 > Detail: `Ralph/refs/ref-01-design-tokens.md`
 - [ ] Update CSS custom properties in `src/index.css` (new palette, shadows, layout vars)
 - [ ] Update `tailwind.config.js` (colors, shadows, borders, radius)
 - [ ] Keep boot/ECG/login tokens unchanged
 - [ ] Run quality checks
- [x] **Task 2: Set up premium font and update Tailwind config.** Read `CLAUDE.md` (Typography section) and `Ralph/refs/ref-design-system.md`. Load both candidate fonts from `Fonts/` directory (Elvaro Grotesque WOFF2 files and Blumir variable font WOFF2). Add `@font-face` declarations in `src/index.css`. Update Tailwind config to add `font-ui` family pointing to the chosen font (start with Elvaro, can be swapped later). Replace `font-inter` references in Tailwind config with `font-ui`. Ensure Geist Mono remains the monospace font. Keep Fira Code for boot/ECG phases only.
+#### Task 2: Create new data files and update types
 > Detail: `Ralph/refs/ref-02-data-types.md`
 - [ ] Create `src/data/profile.ts` (personal statement)
 - [ ] Create `src/data/tags.ts` (sidebar tags)
 - [ ] Create `src/data/alerts.ts` (sidebar alert flags)
 - [ ] Create `src/data/kpis.ts` (Latest Results metrics)
 - [ ] Create `src/data/skills.ts` (skills with medication frequency + years)
 - [ ] Update `src/types/pmr.ts` (new interfaces)
 - [ ] Run quality checks
- [x] **Task 3: Rebuild LoginScreen.** Read `Ralph/refs/ref-transition-login.md`. Key changes from prior version: (a) Typing speed is now **80ms/char** for username, **60ms/dot** for password — natural pace, not frantic. (b) After typing completes, the "Log In" button becomes **user-interactive** — the user clicks it to proceed. It is NOT auto-triggered. Button should have hover state, full opacity when ready, disabled/dimmed while typing. (c) Card shadow uses multi-layered shadow per design system. (d) Uses [UI font] for labels, Geist Mono for input fields. (e) `prefers-reduced-motion`: typing completes instantly, button is immediately interactive.
+#### Task 3: Update CLAUDE.md for new architecture
 - [x] Already completed during project setup (manual intervention 2026-02-13)
- [x] **Task 4: Rebuild PatientBanner.** Read `Ralph/refs/ref-banner-sidebar.md` (Patient Banner section). Full banner (80px) with surname-first format, demographic details, action buttons. Condensed banner (48px) via IntersectionObserver at 100px scroll. Mobile minimal banner with overflow menu. Uses [UI font] throughout. NHS Number tooltip: "GPhC Registration Number".
+### Phase 1: Core Layout
- [ ] **Task 4b: Fix PatientBanner scroll condensation.** Read `Ralph/refs/ref-banner-sidebar.md` (Patient Banner section + Implementation Patterns). The full 3-row banner (80px — name/status, demographics, contact) never displays because the IntersectionObserver sentinel is broken. The sentinel (`absolute top-0` with `h-0`) is inside a React fragment next to the sticky header — it positions relative to the viewport, and the `-100px` rootMargin means it's immediately "not intersecting", so the banner always shows as condensed. Fix: ensure the sentinel is placed in the document flow ABOVE the scrollable content area (not absolute-positioned inside the banner fragment), so it's naturally visible on load and only scrolls out of view when the user scrolls 100px. Verify that on page load the full banner displays, and after scrolling 100px it smoothly condenses to the single-row 48px layout.
+#### Task 4: Build TopBar component
 > Detail: `Ralph/refs/ref-03-topbar-sidebar.md` (TopBar section)
 - [ ] Create `src/components/TopBar.tsx`
 - [ ] Brand section (icon + name + version tag)
 - [ ] Search bar (triggers command palette, not inline search)
 - [ ] Session info (mono font, pill badge)
 - [ ] Fixed position, 48px height, white bg, bottom border
 - [ ] Run quality checks
- [ ] **Task 5: Rebuild ClinicalSidebar.** Read `Ralph/refs/ref-banner-sidebar.md` (Left Sidebar + Navigation sections). CV-friendly labels: Summary, Experience, Skills, Achievements, Projects, Education, Contact. 220px fixed width. Header branding, search input, navigation items with exact states (default/hover/active), separator line, footer with session info. Tablet mode: 56px icon-only. Keyboard shortcuts: Alt+1-7, arrow keys, "/" for search. URL hash routing.
+#### Task 5: Build new Sidebar — PersonHeader
 > Detail: `Ralph/refs/ref-03-topbar-sidebar.md` (Sidebar PersonHeader section)
 - [ ] Create `src/components/Sidebar.tsx`
 - [ ] Avatar circle (52px, teal gradient, initials)
 - [ ] Name, title, status badge with pulse dot
 - [ ] Details grid (GPhC, Education, Location, Phone, Email, Registered)
 - [ ] 272px width, light background, right border
 - [ ] Run quality checks
- [ ] **Task 6: Rebuild PMRInterface layout + Breadcrumb.** Read `Ralph/refs/ref-banner-sidebar.md` (PMRInterface Layout + Breadcrumb sections). Fixed sidebar + sticky banner + scrollable content on `#F5F7FA`. Create `Breadcrumb.tsx`. Interface materialization animations (banner → sidebar → content stagger). View switching is INSTANT. Mobile: bottom nav bar. Update ViewId type if needed.
+#### Task 6: Build new Sidebar — Tags + Alerts
 > Detail: `Ralph/refs/ref-03-topbar-sidebar.md` (Tags and Alerts section)
 - [ ] Section title component (uppercase, divider line)
 - [ ] Tags section (flex wrap pills, color variants)
 - [ ] Alerts section (colored flag items with icons)
 - [ ] Run quality checks
- [ ] **Task 7: Rebuild SummaryView + Clinical Alert.** Read `Ralph/refs/ref-summary-alert.md`. Clinical Alert with spring animation entrance, acknowledge → checkmark → collapse sequence. Summary cards: Demographics (full-width key-value), Active Problems (traffic lights), Current Skills quick table, Last Consultation preview. 2-column grid desktop, single column mobile. Navigation links to other views.
+#### Task 7: Build DashboardLayout and wire up App.tsx
 > Detail: `Ralph/refs/ref-04-dashboard-layout.md`
 - [ ] Create `src/components/DashboardLayout.tsx`
 - [ ] Three-zone layout: TopBar (fixed) + Sidebar (fixed) + Main (scrollable card grid)
 - [ ] Card grid: 2 columns desktop, 1 column <900px
 - [ ] Framer Motion entrance animations (topbar → sidebar → content)
 - [ ] Update App.tsx: replace PMRInterface with DashboardLayout in PMR phase
 - [ ] Verify boot → ECG → login → dashboard transition works
 - [ ] Run quality checks
- [ ] **Task 8: Rebuild ConsultationsView.** Read `Ralph/refs/ref-consultations.md`. Reverse-chronological journal. Collapsed entries with date, org, role, key achievement. Expanded: H/E/P structure with coded entries. Height-only expand animation (no opacity fade). One expanded at a time. 3px left border color-coded by employer. Second clinical alert on first visit.
+### Phase 2: Dashboard Tiles
- [ ] **Task 9: Rebuild MedicationsView.** Read `Ralph/refs/ref-medications.md`. Three category tabs (Active/Clinical/PRN). Semantic `<table>` with sortable columns. Expandable prescribing history in Geist Mono. Status dots with text labels. Mobile: card layout.
+#### Task 8: Build reusable Card component
 > Detail: `Ralph/refs/ref-05-card-and-top-tiles.md` (Card section)
 - [ ] Create `src/components/Card.tsx`
 - [ ] Base card styling (white, border, radius 8px, shadow-sm, hover shadow-md)
 - [ ] `full` variant (spans both grid columns)
 - [ ] CardHeader sub-component (dot + title + optional right text)
 - [ ] Run quality checks
- [ ] **Task 10: Rebuild ProblemsView.** Read `Ralph/refs/ref-problems.md`. Two sections: Active Problems and Resolved Problems. Traffic light dots (8px, always with text labels). Code column in Geist Mono. Expandable rows with narrative + linked consultation navigation. Mobile: card layout.
+#### Task 9: Build PatientSummary tile
 > Detail: `Ralph/refs/ref-05-card-and-top-tiles.md` (PatientSummary section)
 - [ ] Create `src/components/tiles/PatientSummaryTile.tsx`
 - [ ] Full-width card, first in grid
 - [ ] Personal statement from `src/data/profile.ts`
 - [ ] Run quality checks
- [ ] **Task 11: Rebuild InvestigationsView + DocumentsView.** Read `Ralph/refs/ref-investigations-documents.md`. Both views share the expandable-row pattern with tree-indented monospace content (box-drawing characters). Investigations: status badges (Complete/Ongoing/Live). Documents: type icons per document category. "View Results" button for PharMetrics only. Mobile: card layouts.
+#### Task 10: Build LatestResults tile
 > Detail: `Ralph/refs/ref-05-card-and-top-tiles.md` (LatestResults section)
 - [ ] Create `src/components/tiles/LatestResultsTile.tsx`
 - [ ] Half-width card, 2x2 metric grid
 - [ ] Four KPI metric cards with colored values
 - [ ] Data from `src/data/kpis.ts`
 - [ ] Run quality checks
- [ ] **Task 12: Rebuild ReferralsView (Contact).** Read `Ralph/refs/ref-referrals.md`. Clinical referral form with priority radio buttons (Urgent/Routine/Two-Week Wait with tongue-in-cheek tooltips). Form validation, reference number generation, success state. Direct contact table below form.
+#### Task 11: Build CoreSkills tile ("Repeat Medications")
 > Detail: `Ralph/refs/ref-05-card-and-top-tiles.md` (CoreSkills section)
 - [ ] Create `src/components/tiles/CoreSkillsTile.tsx`
 - [ ] Half-width card, next to LatestResults
 - [ ] Skills listed as medications with frequency + years
 - [ ] Data from `src/data/skills.ts`
 - [ ] Run quality checks
- [ ] **Task 13: Fuzzy search with fuse.js.** Read `Ralph/refs/ref-interactions.md` (Search section). Install fuse.js. Build search index from all content. Results dropdown grouped by section. Clicking a result navigates to section + expands matching item. Mobile: search at top of each view.
+#### Task 12: Build LastConsultation tile
 > Detail: `Ralph/refs/ref-06-bottom-tiles.md` (LastConsultation section)
 - [ ] Create `src/components/tiles/LastConsultationTile.tsx`
 - [ ] Full-width card
 - [ ] Header info row (Date, Org, Type, Band)
 - [ ] Role title + achievement bullet list
 - [ ] Data from first entry in `src/data/consultations.ts`
 - [ ] Run quality checks
- [ ] **Task 14: Responsive design audit.** Read `Ralph/refs/ref-interactions.md` (Responsive Strategy section). Test all three breakpoints: Desktop (>1024px), Tablet (768-1024px), Mobile (<768px). Tables → card layouts on mobile. Bottom nav bar. Touch targets ≥48px.
+#### Task 13: Build CareerActivity tile
 > Detail: `Ralph/refs/ref-06-bottom-tiles.md` (CareerActivity section)
 - [ ] Create `src/components/tiles/CareerActivityTile.tsx`
 - [ ] Full-width card, two-column activity grid
 - [ ] Merge roles + projects + certs + education into timeline
 - [ ] Color-coded dots by entry type
 - [ ] Run quality checks
- [ ] **Task 15: Accessibility audit + final polish.** Read `Ralph/refs/ref-interactions.md` (Accessibility section). Semantic HTML, ARIA attributes, focus management, keyboard navigation, screen reader announcements, `prefers-reduced-motion` support, WCAG 2.1 AA contrast. Final visual consistency pass.
+#### Task 14: Build Education tile
 > Detail: `Ralph/refs/ref-06-bottom-tiles.md` (Education section)
 - [ ] Create `src/components/tiles/EducationTile.tsx`
 - [ ] Full-width card, below Career Activity
 - [ ] Education entries from documents data
 - [ ] Run quality checks
 #### Task 15: Build Projects tile
 > Detail: `Ralph/refs/ref-06-bottom-tiles.md` (Projects section)
 - [ ] Create `src/components/tiles/ProjectsTile.tsx`
 - [ ] Full-width card, prominent presentation
 - [ ] Status badges, project names, years, descriptions
 - [ ] Data from `src/data/investigations.ts`
 - [ ] Run quality checks
 ### Phase 3: Interactions
 #### Task 16: Tile expansion system
 > Detail: `Ralph/refs/ref-07-interactions.md` (Tile Expansion section)
 - [ ] CareerActivity items expand to show full role detail
 - [ ] Projects items expand to show methodology, tech stack, results
 - [ ] CoreSkills items expand to show prescribing history
 - [ ] Height-only animation (200ms, no opacity fade)
 - [ ] Single-expand accordion
 - [ ] Keyboard: Enter/Space to expand, Escape to collapse
 - [ ] Run quality checks
 #### Task 17: KPI flip card interaction
 > Detail: `Ralph/refs/ref-07-interactions.md` (KPI Flip section)
 - [ ] LatestResults metrics flip on click
 - [ ] Front: value + label. Back: explanation text
 - [ ] CSS perspective flip (400ms) or instant swap with reduced motion
 - [ ] One card flipped at a time
 - [ ] Run quality checks
 #### Task 18: Build Command Palette
 > Detail: `Ralph/refs/ref-07-interactions.md` (Command Palette section)
 - [ ] Create `src/components/CommandPalette.tsx`
 - [ ] Ctrl+K trigger + search bar click trigger
 - [ ] Overlay with backdrop blur, ESC to close
 - [ ] Fuzzy search via fuse.js (adapt `src/lib/search.ts`)
 - [ ] Grouped results by section + Quick Actions
 - [ ] Keyboard navigation (arrows, Enter, Escape)
 - [ ] Run quality checks
 ### Phase 4: Polish
 #### Task 19: Responsive design
 > Detail: `Ralph/refs/ref-08-polish.md` (Responsive section)
 - [ ] Desktop (>1024px): full sidebar + 2-column grid
 - [ ] Tablet (768–1024px): collapsed/hidden sidebar + adapted grid
 - [ ] Mobile (<768px): no sidebar, single-column tiles, simplified topbar
 - [ ] Touch-friendly targets (48px+)
 - [ ] Run quality checks
 #### Task 20: Accessibility audit
 > Detail: `Ralph/refs/ref-08-polish.md` (Accessibility section)
 - [ ] Semantic HTML (header, nav, main, article, section)
 - [ ] Keyboard navigation (Tab, Enter/Space, Escape, Ctrl+K, arrows)
 - [ ] ARIA (expanded, controls, labels, live regions, dialog)
 - [ ] Focus management (trap in palette, visible rings, return focus)
 - [ ] `prefers-reduced-motion` on all animations
 - [ ] Color contrast verification
 - [ ] Run quality checks
 #### Task 21: Clean up and final polish
 > Detail: `Ralph/refs/ref-08-polish.md` (Cleanup section)
 - [ ] Remove unused old components (PatientBanner, ClinicalSidebar, Breadcrumb, etc.)
 - [ ] Remove unused hooks (useScrollCondensation if unused)
 - [ ] Verify no dead imports
 - [ ] Final visual review against concept HTML
 - [ ] Run quality checks (clean build)
@@ -2,77 +2,58 @@
 You are operating inside an automated loop. Each iteration you receive fresh context - you have NO memory of previous iterations. Your only persistence is the filesystem.
-You are implementing **Design 7: The Clinical Record** — a Patient Medical Record (PMR) system that presents Andy's CV as a clinician would view a patient record. This is a visual redesign rebuilding existing components to achieve absolute thematic fidelity to real NHS clinical software.
+You are implementing **a GP System Dashboard** — a tile-based clinical record interface that presents Andy's CV as a GP surgery would display a patient record. The clinical metaphor lives in the structure (tiles as record sections, skills as "medications" with frequency, alerts, KPI metrics, career timeline) while the visual execution is modern and premium.
 **The Concept:**
-The "patient" is Andy's career. Users navigate a genuine NHS clinical software interface (similar to EMIS Web, SystmOne, Vision) with a patient banner, sidebar navigation, consultation journal, medications table, clinical alerts, and a login sequence. The clinical metaphor lives in the LAYOUT and VISUAL PRESENTATION — the sidebar labels use CV-friendly terms (Experience, Skills, Achievements, Projects, Education, Contact) while each view is laid out like its clinical equivalent (consultation journal, medications table, problems list, etc.).
+The "patient" is Andy's career. After a theatrical boot → ECG → login sequence, users see a dashboard with a light sidebar (person details, tags, alert flags) and a scrollable grid of tiles (Patient Summary, Latest Results, Repeat Medications/Skills, Last Consultation, Career Activity, Education, Projects). Tiles can be expanded for detail. A command palette (Ctrl+K) provides search. The reference design is `References/GPSystemconcept.html`.
 **IMPORTANT — Sidebar Label Convention:**
 The sidebar uses CV-intuitive labels, NOT clinical jargon. But each view's content is presented in the clinical format:
 - **Summary** → Patient summary layout
 - **Experience** (not "Consultations") → Consultation journal layout with History/Examination/Plan
 - **Skills** (not "Medications") → Medications table layout with dosages/frequency
 - **Achievements** (not "Problems") → Problems list layout with traffic lights
 - **Projects** (not "Investigations") → Investigation results layout
 - **Education** (not "Documents") → Attached documents layout
 - **Contact** (not "Referrals") → Referral form layout
 ## Your Task This Iteration
-1. **Read the Design Guidance in the reference file** (REQUIRED for visual components): Each reference file in `Ralph/refs/` contains a "Design Guidance (from /frontend-design)" section at the bottom with pre-generated design direction, code patterns, and implementation details. You MUST read this section before writing code — it provides the aesthetic direction and code examples for the component. Do NOT invoke the `/frontend-design` skill at runtime — the guidance is already embedded in the ref files.
+1. **Read the reference file for your task** (REQUIRED): Each task in `IMPLEMENTATION_PLAN.md` references a detail file in `Ralph/refs/`. You MUST read this file before writing code — it provides the full specification, CSS values, data sources, and component structure.
-2. **Read the plan**: Open `IMPLEMENTATION_PLAN.md` and find the highest-priority unchecked item (`- [ ]`). Items are listed in priority order - pick the first unchecked one.
+2. **Read the plan**: Open `IMPLEMENTATION_PLAN.md` and find the highest-priority unchecked item (`- [ ]`). Items are listed in dependency order — pick the first unchecked one. **The plan is for tracking only** — all implementation detail is in the referenced `Ralph/refs/` file.
-3. **Read accumulated learnings**: Open `progress.txt` and read the "Codebase Patterns" section. This contains learnings from previous iterations about PMR design system, data architecture, animation approach, and clinical system authenticity.
+3. **Read accumulated learnings**: Open `progress.txt` and read the "Codebase Patterns" section AND the most recent manual intervention entry. These contain critical context about the architecture, established patterns, and decisions from previous iterations.
 4. **Read guardrails**: Open `guardrails.md` and read ALL guardrails. These are hard rules you MUST follow. Key guardrails include:
-   - Light-mode only (clinical systems don't have dark mode)
+   - Light-mode only
-   - Instant view switching (no animations between views)
+   - Teal accent `#0D6E6E` (not NHS Blue) for interactive elements
-   - Proper semantic table markup for all data tables
+   - 8px border-radius for cards (not 4px)
-   - Traffic lights must always have text labels
+   - Three-tier shadow system (sm/md/lg)
-   - Exact NHS blue color (#005EB8)
+   - Height-only tile expansion (no opacity fade)
-   - ECG must end with flatline (not fade to white)
+   - Skills frequency: user-specified values (Data Analysis="Twice daily", etc.)
-   - Login typing animation specifics
+   - Sidebar contains ONLY PersonHeader + Tags + Alerts
-   - Consultation History/Examination/Plan format
+   - Elvaro Grotesque font (not DM Sans, Inter, or Roboto)
-   - Coded entries in [XXX000] format
+   - Geist Mono for data/timestamps (not Fira Code in dashboard)
   - Sidebar labels are CV-friendly (Experience, Skills, etc.), NOT clinical jargon
-5. **Implement the item**: Complete the single task you selected. Keep changes focused - one task per iteration. Write production-quality React/TypeScript code that faithfully reproduces a clinical information system. This is a design showcase requiring absolute thematic fidelity.
+5. **Implement the item**: Complete the single task you selected. Keep changes focused — one task per iteration. Write production-quality React/TypeScript code.
-   **IMPORTANT — Ref files are the source of truth, not existing code.** The current codebase contains errors and legacy patterns from earlier iterations. Do NOT treat the existing component structure, layout, or behaviour as authoritative. If the existing code does not match what the ref file specifies, **rebuild the component from the ref spec** rather than patching around the existing implementation. The ref files define the target; the existing code is just a starting point that may need to be replaced entirely.
+   **IMPORTANT — Ref files are the source of truth.** If existing code contradicts the ref file, rebuild from the ref spec.
-6. **Run quality checks**: Execute the quality check commands listed in `IMPLEMENTATION_PLAN.md` under "Quality Checks". Fix any issues before proceeding.
+6. **Run quality checks**: Execute `npm run typecheck`, `npm run lint`, `npm run build`. Fix any issues before proceeding.
-7. **Visual Review** (Tasks 1b-11 only — skip for non-visual tasks like Task 1, 12-15): After quality checks pass, verify your work visually in the browser using the Playwright MCP browser tools:
+7. **Visual Review** (for visual tasks): After quality checks pass, verify your work in the browser using Playwright MCP:
   a. Navigate to `http://localhost:5173` using `mcp__playwright__browser_navigate`.
-   b. **First load only**: The app plays a boot→ECG→login→PMR sequence (~15s). Use `mcp__playwright__browser_wait_for` with `time: 15` then take a snapshot. On subsequent navigations, the app stays in PMR phase — no waiting needed.
+   b. **First load only**: The app plays boot→ECG→login (~15s). Use `mcp__playwright__browser_wait_for` with `time: 15`, then click the Log In button to reach the dashboard. On subsequent navigations, the app stays in dashboard phase.
-   c. Navigate to the hash route for your task's view:
+   c. Take a screenshot and compare against `References/GPSystemconcept.html` (open it in a separate tab if needed).
-      - Task 1b (Boot/ECG): Refresh page, screenshot during boot sequence, then again during ECG animation
+   d. Check: colors match spec, correct font, proper spacing, borders, shadows, layout alignment, teal accent.
-      - Task 2 (Login): Refresh page, wait ~8s (after boot+ECG), screenshot the login screen
+   e. Fix discrepancies, re-run quality checks, re-screenshot.
-      - Task 3 (Banner): Any PMR view — review the patient banner at top
+   f. Note the visual review outcome in progress.txt.
      - Task 4 (Sidebar): Any PMR view — review left sidebar
      - Task 5 (Layout/Breadcrumb): Any PMR view — review overall composition
      - Task 6: `#summary` | Task 7: `#experience` | Task 8: `#skills`
      - Task 9: `#achievements` | Task 10: `#projects` then `#education` | Task 11: `#contact`
   d. Use `mcp__playwright__browser_snapshot` (accessibility tree) or `mcp__playwright__browser_take_screenshot` (visual) to capture the page, and compare against your reference file.
   e. Check specifically: colors match spec, correct font (Inter vs Geist Mono), proper spacing, `1px solid #E5E7EB` borders, 4px border-radius, layout alignment, NHS blue `#005EB8`.
   f. If discrepancies are found: fix them, re-run quality checks, take another screenshot to confirm.
   g. Note the visual review outcome in your progress.txt entry (step 10).
-8. **Commit your changes**: Stage and commit all changes with a descriptive message referencing the task you completed.
+8. **Commit your changes**: Stage and commit all changes with a descriptive message referencing the task.
 9. **Mark the item complete**: In `IMPLEMENTATION_PLAN.md`, change the item from `- [ ]` to `- [x]`.
 10. **Update progress.txt**: Append to the "Iteration Log" section with:
-   - Which task you completed
+    - Which task you completed
-   - Any learnings or codebase patterns discovered (add to "Codebase Patterns" section)
+    - Any learnings or codebase patterns discovered (add to "Codebase Patterns" section too)
-   - Any issues encountered
+    - Any issues encountered
-   - Design decisions made (if visual component)
+    - Design decisions made
-   - Visual review outcome (what was checked, any fixes made)
+    - Visual review outcome
 11. **Commit the progress update**: Stage and commit the updated `IMPLEMENTATION_PLAN.md` and `progress.txt`.
-12. **Recommend model for next iteration**: Look at the NEXT unchecked task in `IMPLEMENTATION_PLAN.md` (the one after the task you just completed). Assess its complexity and output a model recommendation on its own line:
+12. **Recommend model for next iteration**: Look at the NEXT unchecked task. Output a model recommendation:
    ```
    <next-model>sonnet</next-model>
@@ -84,86 +65,81 @@ The sidebar uses CV-intuitive labels, NOT clinical jargon. But each view's conte
    <next-model>opus</next-model>
    ```
-    **Use this decision framework:**
+    **Decision framework:**
-    - **Use `sonnet`** for: configuration tasks, search/utility implementation, responsive fixes, accessibility audits, tasks with very prescriptive specs, tasks that are mostly wiring/plumbing
+    - **Use `sonnet`** for: configuration tasks, data files, simple wiring, accessibility audits, tasks with very prescriptive specs
-    - **Use `opus`** for: visual component rebuilds that invoke /frontend-design (design quality matters), complex animation work, tasks requiring strong aesthetic judgment, tasks where the previous iteration left issues that need creative problem-solving
+    - **Use `opus`** for: visual component builds, complex animation work, tasks requiring aesthetic judgment, command palette, interaction design
-    - **Default to `sonnet`** if unsure — it's cheaper and handles well-specified tasks fine
+    - **Default to `sonnet`** if unsure
    - If there IS no next task (you just completed the last one), skip this step
-13. **Determine if another iteration is needed**: Review your work and the codebase. The project needs another iteration if ANY of these are true:
+13. **Determine if another iteration is needed**: The project needs another iteration if ANY task is unchecked, quality checks fail, or there are uncommitted changes.
    - Any task in the checklist is unchecked (`- [ ]`) or blocked (`- [B]`)
    - Quality checks would fail (run them to verify)
    - There are uncommitted changes
    - progress.txt has open questions or guidance for "next iteration"
    - The implementation doesn't fully satisfy the plan requirements
    - You have lingering doubts about correctness or completeness
-14. **Send completion signal ONLY if truly complete**: If and ONLY if the project definitely does NOT need another iteration — all tasks verified done, quality checks pass, no guidance for next iteration — output this exact signal on its own line:
+14. **Send completion signal ONLY if truly complete**: If ALL tasks are verified done, quality checks pass, and no further work is needed:
    ```
    <promise>COMPLETE</promise>
    ```
-    DO NOT output this string if there's any chance another iteration is needed. When in doubt, do NOT send the promise — leave it for the next iteration to determine.
+    DO NOT output this string if there's any chance another iteration is needed.
 ## Critical Rules
- **ALWAYS read the "Design Guidance" section in the ref file before writing visual component code** — do NOT invoke /frontend-design at runtime (it's pre-baked into the ref files)
+- **ALWAYS read the ref file for your task before writing code**
 - **Do NOT invoke the /frontend-design skill** — the design guidance is already embedded in each ref file. Invoking it at runtime will consume your context and stall the iteration.
 - **ALWAYS visually review visual components (Tasks 1b-11) in the browser** — use Playwright MCP tools to screenshot and verify against the spec before committing
 - **Only work on ONE task per iteration**
- **Always read progress.txt AND guardrails.md before starting** — previous iterations may have left important context
+- **Always read progress.txt AND guardrails.md before starting**
- **If a task is blocked or unclear**, document why in progress.txt and move to the next unchecked item
+- **Ref files are the spec — existing code is not**
 - **The plan file is for tracking only** — do not add detail to it
 - **Use TypeScript strictly** — no `any` types, proper interfaces
 - **Follow project structure** — components in `src/components/`, tiles in `src/components/tiles/`, data in `src/data/`
 - **Respect prefers-reduced-motion** — all animations must have instant fallbacks
 - **Keep commits atomic and well-described**
- **If quality checks fail, fix the issues before committing**
+- **If quality checks fail, fix before committing**
- **Ref files are the spec — existing code is not.** If the current implementation contradicts the ref file, rebuild from the ref spec. Do not preserve broken patterns just because they exist in the codebase.
+- **If a task is blocked**, document why in progress.txt and move to next
 - **The visual quality bar is HIGH** — this must look like real clinical software
 - **Preserve clinical system authenticity** — instant navigation, proper tables, NHS blue, coded entries, traffic lights
 - **Sidebar labels are CV-friendly** — Experience (not Consultations), Skills (not Medications), etc.
 - **Use TypeScript strictly** — no `any` types, proper interfaces for all PMR data structures
 - **Follow the established project structure** — components in `src/components/`, data in `src/data/`, types in `src/types/`
 - **Respect prefers-reduced-motion** — animations must have instant fallbacks
 ## Reference Files
-Each task in the implementation plan references specific files in `Ralph/refs/`:
+Each task references a specific detail file in `Ralph/refs/`:
- `Ralph/refs/ref-boot-ecg.md` — Boot sequence + ECG animation improvements
+
- `Ralph/refs/ref-design-system.md` — Colors, typography, spacing, borders, motion
+| Tasks | Reference File |
- `Ralph/refs/ref-transition-login.md` — ECG flatline + login sequence
+|-------|---------------|
- `Ralph/refs/ref-banner-sidebar.md` — Patient banner + sidebar + navigation
+| Task 1 | `Ralph/refs/ref-01-design-tokens.md` |
- `Ralph/refs/ref-summary-alert.md` — Summary view + clinical alert
+| Task 2 | `Ralph/refs/ref-02-data-types.md` |
- `Ralph/refs/ref-consultations.md` — Experience view (consultation journal layout)
+| Tasks 4-6 | `Ralph/refs/ref-03-topbar-sidebar.md` |
- `Ralph/refs/ref-medications.md` — Skills view (medications table layout)
+| Task 7 | `Ralph/refs/ref-04-dashboard-layout.md` |
- `Ralph/refs/ref-problems.md` — Achievements view (problems list layout)
+| Tasks 8-11 | `Ralph/refs/ref-05-card-and-top-tiles.md` |
- `Ralph/refs/ref-investigations-documents.md` — Projects + Education views
+| Tasks 12-15 | `Ralph/refs/ref-06-bottom-tiles.md` |
- `Ralph/refs/ref-referrals.md` — Contact view (referral form layout)
+| Tasks 16-18 | `Ralph/refs/ref-07-interactions.md` |
- `Ralph/refs/ref-interactions.md` — Interactions, responsive, accessibility
+| Tasks 19-21 | `Ralph/refs/ref-08-polish.md` |
 Also reference:
 - `References/GPSystemconcept.html` — Visual/structural target for the dashboard
 - `References/CV_v4.md` — Source CV content (roles, achievements, numbers, dates)
 - `CLAUDE.md` — Project architecture, design direction, styling conventions
-Read ONLY the referenced file(s) for each task. Do NOT read goal.md directly.
+Read ONLY the referenced file(s) for your current task. Do not read all ref files at once.
-## Design Document Highlights
+## Design Highlights
 **Color Palette (Light-mode only):**
- Main content: `#F5F7FA`
+- Background: `#F0F5F4` (warm sage)
- Cards: `#FFFFFF`
+- Surface/cards: `#FFFFFF`
- Sidebar: `#1E293B`
+- Sidebar: `#F7FAFA` (very light)
- NHS blue: `#005EB8`
+- Accent: `#0D6E6E` (teal)
- Green (active): `#22C55E`
+- Borders: `#D4E0DE` (structural), `#E4EDEB` (cards)
- Amber (alerts): `#F59E0B`
+- Text: `#1A2B2A` (primary), `#5B7A78` (secondary), `#8DA8A5` (tertiary)
 - Status: `#059669` (success), `#D97706` (amber), `#DC2626` (alert)
 **Typography:**
- Inter for general text
+- Elvaro Grotesque (`font-ui`) for UI text
- Geist Mono for coded entries and data values
+- Geist Mono (`font-geist`) for data, timestamps, coded entries
 - Fira Code for boot/ECG terminal only
 **Layout:**
 - TopBar: fixed, 48px, white, bottom border
 - Sidebar: 272px, light, person header + tags + alerts
 - Main: scrollable card grid, 2 columns desktop, 1 column mobile
 - Cards: 8px radius, shadow-sm, border-light
 **Key Interactions:**
- Login sequence: typing username/password character-by-character
+- Tile expansion: height-only animation, 200ms, accordion
- Clinical alert: slides down, acknowledges with checkmark → collapse
+- KPI flip: CSS perspective 400ms, click to flip/unflip
- Consultation entries: expand/collapse with History/Examination/Plan
+- Command palette: Ctrl+K, fuzzy search, keyboard navigation
- Medications table: sortable columns, expandable prescribing history
+- Entrance: staggered topbar → sidebar → content
 - Sidebar: instant view switching, no animations
 **Responsive Strategy:**
 - Desktop (>1024px): 220px sidebar with labels
 - Tablet (768-1024px): 56px icon-only sidebar
 - Mobile (<768px): Bottom navigation bar
@@ -1,359 +0,0 @@
 # Reference: Boot Sequence + ECG Animation
 > Covers the full pre-login flow: terminal boot → cursor transition → ECG heartbeat → name reveal → flatline. The flatline→login transition is covered in `ref-transition-login.md`.
 ---
 ## Current Architecture
 Two components manage the pre-login flow:
 - `src/components/BootSequence.tsx` → terminal text animation, ends with blinking cursor
 - `src/components/ECGAnimation.tsx` → canvas-based heartbeat + name tracing + flatline + bg transition
 - `App.tsx` phases: `boot → ecg → login → pmr`
 ## What Needs to Change
 ### 1. Boot Sequence — Clean Up for Easy Config
 **Problem:** Boot text lines are hardcoded as HTML strings with inline Tailwind classes. Adding/removing/reordering lines requires editing raw HTML. The `dangerouslySetInnerHTML` approach is fragile.
 **Fix:** Refactor to a clean config-driven structure:
 ```typescript
 // Example config structure — easy to customize
 const BOOT_CONFIG = {
  header: { text: 'CLINICAL TERMINAL v3.2.1', style: 'bright' },
  lines: [
    { type: 'status', text: 'Initialising pharmacist profile...' },
    { type: 'separator' },
    { type: 'field', label: 'SYSTEM', value: 'NHS Norfolk & Waveney ICB' },
    { type: 'field', label: 'USER', value: 'Andy Charlwood' },
    { type: 'field', label: 'ROLE', value: 'Deputy Head of Population Health & Data Analysis' },
    { type: 'field', label: 'LOCATION', value: 'Norwich, UK' },
    { type: 'separator' },
    { type: 'status', text: 'Loading modules...' },
    { type: 'module', name: 'pharmacist_core.sys' },
    { type: 'module', name: 'population_health.mod' },
    { type: 'module', name: 'data_analytics.eng' },
    { type: 'separator' },
    { type: 'ready', text: 'READY — Rendering CV..' },
  ],
  timing: { lineDelay: 220, holdAfterComplete: 400, fadeOutDuration: 800 },
 }
 ```
 - Each line type maps to a React component (not raw HTML)
 - Colors remain: bright green `#00ff41`, dim green `#3a6b45`, cyan labels `#00e5ff`
 - Staggered reveal timing stays the same (220ms per line)
 - Font: Fira Code (this is the terminal phase, NOT the PMR — Fira Code is correct here)
 ### 2. Cursor → Dot Transition
 **Problem:** The boot sequence ends with a blinking green block cursor (`.animate-blink`). The ECG animation starts with a glowing dot that appears at the far left of the screen. There's a visual disconnect — the cursor and dot don't connect.
 **Fix:** The blinking cursor at the end of boot should smoothly transition INTO the ECG's glowing trace dot:
 - At end of boot, capture the cursor's screen position (x, y)
 - Pass this position to ECGAnimation via props
 - ECGAnimation starts with its glowing dot AT the cursor position
 - The cursor stops blinking and morphs: block cursor → circular glow (scale down width, increase glow, ~300ms)
 - The dot then begins moving rightward, drawing the flatline/heartbeat trace behind it
 - This means the ECG trace starts at the cursor position, NOT the far left edge
 ### 3. ECG Start Position
 **Problem:** Currently the ECG trace starts at x=0 (far left of viewport). The cursor ends somewhere in the middle-left of the screen. This means the dot "teleports" from cursor position to the left edge.
 **Fix:** The ECG animation should:
 - Accept a `startPosition: { x: number, y: number }` prop from the boot sequence
 - Begin the trace from that position
 - The first section of trace is a flat line from the cursor position rightward
 - Heartbeats begin after the first flat gap (same timing as now, just offset)
 - The viewport scroll logic already handles the "head" position — just shift the world-space origin
 ### 4. Text Reveal — Mask Technique
 **Problem:** The current ECGAnimation.tsx reveals letters by stroking them with progressive alpha (`letterProgress > 0.3` → fade in). This looks like letters fading in, not like the ECG line IS the letter shape.
 **Reference:** `ECGCombined.tsx` (Remotion version at project root) uses a superior technique:
 - The actual text characters are pre-rendered on the canvas (stroke-only, no fill)
 - A wipe mask follows the ECG trace head, revealing the text underneath
 - The ECG trace line IS the path that forms each letter shape (via the `getYAtX` function which returns letter Y values when in text region)
 - Connector lines between letters sit at the baseline
 - The neon glow filter applies to both the trace and revealed text
 **What to adopt from ECGCombined.tsx:**
 - The mask-based text reveal approach (the trace unveils pre-rendered text)
 - The connector lines between letters at baseline
 - The neon glow SVG filters (or canvas equivalents)
 - The text mask brush that follows the trace head
 **What to KEEP from current ECGAnimation.tsx:**
 - The character spacing (current `LETTER_W`, `LETTER_G`, `SPACE_W` values — preferred over ECGCombined.tsx spacing)
 - The heartbeat waveform shape (`generateHeartbeatPoints`)
 - The beat timing and amplitude escalation (0.3 → 0.55 → 0.85 → 1.0)
 - The canvas rendering approach (not SVG — canvas is correct for this performance-sensitive animation)
 - The viewport scrolling/camera logic
 - The flatline draw phase
 - The scanline and vignette effects
 - The background color transition to `#1E293B`
 ### 5. Text Rendering
 - The name is still "ANDREW CHARLWOOD"
 - Letters are stroke-only (no fill) in neon green `#00ff41`
 - Each letter shape is defined by the `ECG_LETTERS` point arrays (keep these)
 - The trace line passes through each letter's shape points, making the ECG waveform form recognizable letter shapes
 - Between letters, the trace returns to baseline with short connector segments
 - Neon glow effect on both trace and revealed text
 ## Transition to Login
 After the text is fully revealed and the flatline extends to the right edge, the flow continues as described in `ref-transition-login.md`:
 1. Name holds with glow (300ms)
 2. Glow fades, flatline extends right
 3. Canvas fades to black (200ms)
 4. Background transitions to dark blue-gray `#1E293B` (200ms)
 5. Login card materializes
 ## prefers-reduced-motion
 With reduced motion enabled:
 - Boot text appears instantly (no stagger)
 - Cursor appears immediately
 - ECG animation is skipped entirely — transition straight from boot to login
 - Or: show the final frame (name fully revealed, flatline) as a static image for 1 second, then proceed to login
 ## Testing Checklist
 - [ ] Boot text renders correctly with all lines
 - [ ] Blinking cursor visible at end of boot
 - [ ] Cursor smoothly transitions to ECG dot (no teleport)
 - [ ] ECG trace starts from cursor position
 - [ ] Heartbeats render with increasing amplitude
 - [ ] Name letters revealed via mask technique (not alpha fade)
 - [ ] Connector lines between letters
 - [ ] Neon glow on trace and text
 - [ ] Flatline extends to right edge after name
 - [ ] Background transitions to `#1E293B`
 - [ ] Scanlines and vignette present
 - [ ] Reduced motion: instant/static
 - [ ] Mobile: scales correctly
 ---
 ## Design Guidance (from /frontend-design)
 > Pre-baked design direction. Do NOT invoke `/frontend-design` at runtime — this section contains the output.
 ### Aesthetic Direction: Authentic Clinical Terminal → Medical Monitor Realism
 This isn't "medical-themed" design — this IS medical equipment interfaces. Two distinct phases:
 1. **Boot Terminal**: Authentic 1990s clinical system boot sequence (think legacy pharmacy dispensing systems, hospital terminal logins). CRT monitor aesthetic with phosphor green, scanlines, slight text glow.
 2. **ECG Monitor**: Hospital bedside cardiac monitor realism. The heartbeat isn't decorative — it's a functioning waveform that becomes letterforms through technical precision.
 **Visual Signature**: The cursor-to-dot morphing transition. Most animations have discrete phases; this creates continuous material transformation — the blinking terminal cursor literally becomes the ECG trace point. It's the moment where "loading system" becomes "reading vital signs."
 ### Boot Sequence — Type-Safe Config
 ```typescript
 type BootLineType = 'header' | 'status' | 'separator' | 'field' | 'module' | 'ready'
 interface BootLine {
  type: BootLineType
  text: string
  label?: string
  value?: string
  style?: 'bright' | 'dim' | 'cyan'
 }
 interface BootConfig {
  header: string
  lines: BootLine[]
  timing: {
    lineDelay: number
    cursorBlinkInterval: number
    holdAfterComplete: number
    fadeOutDuration: number
  }
  colors: {
    bright: string
    dim: string
    cyan: string
  }
 }
 ```
 Component architecture:
 - `<BootLine>` — renders individual line types with appropriate styling
 - `<BootCursor>` — separate component for cursor with ref exposure for position capture
 - Config-driven rendering replaces hardcoded HTML
 Example config:
 ```typescript
 const BOOT_CONFIG: BootConfig = {
  header: 'CLINICAL TERMINAL v3.2.1',
  lines: [
    { type: 'status', text: 'Initialising pharmacist profile...', style: 'dim' },
    { type: 'separator', text: '---', style: 'dim' },
    { type: 'field', label: 'SYSTEM', value: 'NHS Norfolk & Waveney ICB', style: 'cyan' },
    { type: 'field', label: 'USER', value: 'Andy Charlwood', style: 'bright' },
    // ... etc
  ],
  timing: { lineDelay: 220, cursorBlinkInterval: 530, holdAfterComplete: 400, fadeOutDuration: 800 },
  colors: { bright: '#00ff41', dim: '#3a6b45', cyan: '#00e5ff' }
 }
 ```
 Example BootLine component:
 ```typescript
 function BootLine({ line }: { line: BootLine }) {
  const colors = BOOT_CONFIG.colors
  const color = line.style ? colors[line.style] : colors.dim
  if (line.type === 'field') {
    return (
      <div className="font-mono text-sm leading-relaxed">
        <span style={{ color: colors.cyan }}>{line.label?.padEnd(9)}</span>
        <span style={{ color }}>{line.value}</span>
      </div>
    )
  }
  if (line.type === 'module') {
    return (
      <div className="font-mono text-sm leading-relaxed">
        <span className="font-bold" style={{ color: colors.bright }}>[OK]</span>
        {' '}
        <span style={{ color: colors.dim }}>{line.text}</span>
      </div>
    )
  }
  // ... other types
 }
 ```
 ### Cursor → Dot Transition — Implementation
 ```typescript
 const [cursorPosition, setCursorPosition] = useState<{x: number, y: number} | null>(null)
 const cursorRef = useRef<HTMLDivElement>(null)
 useEffect(() => {
  if (cursorRef.current) {
    const rect = cursorRef.current.getBoundingClientRect()
    setCursorPosition({
      x: rect.left + rect.width / 2,
      y: rect.top + rect.height / 2
    })
  }
 }, [/* trigger when boot completes */])
 // Pass to ECG:
 <ECGAnimation startPosition={cursorPosition} onComplete={...} />
 ```
 Morph animation: width 8px→0px, height 16px→6px, border-radius 0→50% (300ms ease-out). Simultaneously fade in ECG dot at same position. After morph complete, begin trace movement.
 ### Canvas Mask Reveal — Implementation
 ```javascript
 // Pre-render text to offscreen canvas
 const textCanvas = document.createElement('canvas')
 const textCtx = textCanvas.getContext('2d')
 textCtx.strokeStyle = lineColor
 textCtx.lineWidth = 1.5
 textCtx.font = `bold ${fontSize}px Arial`
 textLayout.forEach(item => {
  textCtx.strokeText(item.char, item.centerX, baselineY)
 })
 // During animation loop:
 ctx.save()
 // Create clipping path following trace head
 ctx.beginPath()
 ctx.rect(0, 0, headSX + 20, vh) // reveal up to head position + lead
 ctx.clip()
 // Draw pre-rendered text through clip
 ctx.drawImage(textCanvas, -viewOff, 0)
 ctx.restore()
 // Feathered leading edge:
 const gradient = ctx.createLinearGradient(headSX - 30, 0, headSX, 0)
 gradient.addColorStop(0, 'rgba(0,255,65,0)')
 gradient.addColorStop(1, 'rgba(0,255,65,1)')
 ```
 ### Connector Lines Between Letters
 ```javascript
 const connectors: {startX: number, endX: number}[] = []
 for (let i = 0; i < textLayout.length - 1; i++) {
  const curr = textLayout[i]
  const next = textLayout[i + 1]
  const endInset = CONNECTOR_INSETS[curr.char] || 0
  const startInset = CONNECTOR_INSETS[next.char] || 0
  connectors.push({
    startX: curr.endX - endInset,
    endX: next.startX + startInset
  })
 }
 // During draw:
 connectors.forEach(conn => {
  if (headWX > conn.startX) {
    const connectorEndX = Math.min(conn.endX, headWX)
    ctx.beginPath()
    ctx.moveTo(conn.startX - viewOff, baselineY)
    ctx.lineTo(connectorEndX - viewOff, baselineY)
    ctx.stroke()
  }
 })
 ```
 ### Visual Enhancement Details
 **CRT Scanlines** (boot phase):
 ```css
 .boot-scanlines {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.15) 0px,
    transparent 1px,
    transparent 2px,
    rgba(0, 0, 0, 0.15) 3px
  );
  pointer-events: none;
  animation: scanline-drift 8s linear infinite;
 }
 ```
 **Phosphor Glow** (terminal text):
 ```css
 .terminal-text {
  text-shadow:
    0 0 4px currentColor,
    0 0 8px currentColor,
    0 0 12px rgba(0, 255, 65, 0.3);
 }
 ```
 **ECG Neon Glow** (canvas — multi-layer):
 - Primary trace: 2px solid line
 - Glow layer 1: 6px @ 25% opacity + shadowBlur 14px
 - Glow layer 2: Inner 3px core for sharpness
 - Text: Same multi-layer glow approach
 **Background Transition** (smooth RGB interpolation):
 ```javascript
 const bgProgress = (elapsed - flatlineStartTime) / BG_TRANSITION
 ctx.fillStyle = `rgb(
  ${Math.round(0 + (30 * bgProgress))},
  ${Math.round(0 + (41 * bgProgress))},
  ${Math.round(0 + (59 * bgProgress))}
 )` // black → #1E293B
 ctx.fillRect(0, 0, vw, vh)
 ```
@@ -5,8 +5,8 @@ Hard rules that MUST be followed in every iteration. Violating these will produc
 ## Design Direction
 ### When: Making ANY aesthetic decision
-**Rule:** The direction is **Clinical Luxury** — the *structure* of clinical software (tables, status dots, coded entries, patient banner, sidebar) with *premium execution* (refined shadows, generous spacing, premium typography, atmospheric depth). This is NOT a faithful NHS clone.
+**Rule:** The direction is **GP System Dashboard** — a tile-based clinical record system with a light, modern aesthetic. Teal accent (#0D6E6E), light sidebar (#F7FAFA), warm sage background (#F0F5F4), white card surfaces. The clinical metaphor lives in the STRUCTURE (tiles as "record sections", status indicators, medication-style skill entries, coded entries) — not in dark chrome or heavy clinical styling.
-**Why:** The previous "clinical utilitarian" direction produced generic, flat output. The new direction keeps the clinical metaphor but makes it beautiful.
+**Why:** The previous dark-sidebar PMR interface is being replaced with the lighter, tile-based GP System concept (`References/GPSystemconcept.html`).
 ## Design System Guardrails
@@ -14,41 +14,66 @@ Hard rules that MUST be followed in every iteration. Violating these will produc
 **Rule:** Light-mode only. Do NOT add dark mode classes, `dark:` prefixes, or theme toggles.
 **Why:** The design direction is light-mode only.
-### When: Setting border-radius on cards, inputs, or table elements
+### When: Setting border-radius on cards and tiles
-**Rule:** Use 4px border-radius (`rounded` in Tailwind). The only exception is the LoginScreen card which uses 12px.
+**Rule:** Use 8px border-radius (var(--radius)) for cards and tiles. Use 6px (var(--radius-sm)) for inner elements (metric cards, activity items, tags). The only exception is the LoginScreen card which uses 12px, and the command palette which uses 12px.
-**Why:** Clinical systems use minimal rounding. This precision is part of the Clinical Luxury feel.
+**Why:** The GP System concept uses 8px radius, slightly more rounded than the old 4px clinical style, reflecting the lighter aesthetic.
 ### When: Using monospace/code font
-**Rule:** Use Geist Mono (`font-family: 'Geist Mono', monospace`), NOT Fira Code, for coded entries, timestamps, clinical codes, and data values in the PMR interface. Fira Code is used in boot/ECG phases only.
+**Rule:** Use Geist Mono (`font-family: 'Geist Mono', monospace`) for timestamps, session info, dates, GPhC number, and coded data values. Fira Code is used in boot/ECG phases only.
-**Why:** Geist Mono is the specified monospace font for the PMR interface.
+**Why:** Geist Mono is the specified monospace font for the dashboard interface.
 ### When: Choosing the UI text font
-**Rule:** Use [UI font] — either Elvaro Grotesque or Blumir (see CLAUDE.md for setup). Do NOT use Inter, Roboto, or system defaults for the PMR interface.
+**Rule:** Use Elvaro Grotesque (font-ui) as primary, Blumir (font-ui-alt) as alternative. Do NOT use Inter, Roboto, or system defaults. DM Sans appears in the concept HTML but is NOT the production font — use Elvaro Grotesque.
-**Why:** Premium typography is the primary vehicle for the luxury feel. Generic fonts undermine the entire direction.
+**Why:** Premium typography is the primary vehicle for the luxury feel. The concept HTML uses DM Sans as a placeholder; the production build uses the licensed premium fonts.
-### When: Adding shadows to cards or panels
+### When: Adding shadows to cards or tiles
-**Rule:** Use multi-layered shadows per the design system: `0 1px 2px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.03)`. Cards should feel like they float slightly above the content surface. Do NOT use flat, borderless cards or overly dramatic Material Design shadows.
+**Rule:** Use the three-tier shadow system:
-**Why:** Layered shadows create the subtle depth that distinguishes Clinical Luxury from both flat clinical software and generic SaaS.
+- `--shadow-sm`: `0 1px 2px rgba(26,43,42,0.05)` (default card state)
 - `--shadow-md`: `0 2px 8px rgba(26,43,42,0.08)` (hover / interactive)
 - `--shadow-lg`: `0 8px 32px rgba(26,43,42,0.12)` (command palette, overlays)
 **Why:** Shadows create depth hierarchy. sm=resting, md=interactive, lg=overlay.
 ### When: Styling borders
-**Rule:** All card and table borders must be `1px solid #E5E7EB` (gray-200). Keep borders on tables — they're authentically clinical.
+**Rule:** Use `1px solid var(--border-light)` (#E4EDEB) for card and tile borders. Use `1px solid var(--border)` (#D4E0DE) for structural borders (sidebar right edge, topbar bottom, section dividers).
-**Why:** Borders provide clinical texture. Combined with shadows, they create the luxury-clinical contrast.
+**Why:** Two-tier border system: lighter for cards, slightly stronger for structural elements.
-## Sidebar Label Convention
+### When: Choosing accent/interactive colors
 **Rule:** Use teal `#0D6E6E` (var(--accent)) for interactive elements: links, active states, avatar gradient, dots, hover highlights. Hover: `#0A8080`. Accent-light: `rgba(10,128,128,0.08)` for subtle backgrounds.
 **Why:** Teal is the primary accent in the GP System concept. It replaces NHS Blue as the interactive color.
-### When: Building or modifying sidebar navigation labels
+### When: Using status colors
-**Rule:** Labels MUST be CV-friendly: Summary, Experience, Skills, Achievements, Projects, Education, Contact. Do NOT use clinical jargon (Consultations, Medications, etc.) as labels. The clinical metaphor lives in the LAYOUT of each view, not the labels.
+**Rule:** Status colors: success=`#059669`, amber=`#D97706`, alert=`#DC2626`, purple=`#7C3AED` (education). Each with matching light/border variants. Always pair colored indicators with text labels.
-**Why:** Non-clinical visitors should immediately understand what each section contains.
+**Why:** Traffic light convention. Color-only indicators violate WCAG.
-## Navigation Guardrails
+## Layout Guardrails
-### When: Switching between sidebar views
+### When: Building the dashboard layout
-**Rule:** View switching must be INSTANT. No crossfade, no slide animation, no opacity transition.
+**Rule:** Three-zone layout: TopBar (fixed, 48px) + Sidebar (fixed left, 272px) + Main content (scrollable card grid). Main content has 24px-28px padding and card grid with 16px gap. Grid: 2 columns on desktop, 1 column below 900px.
-**Why:** Clinical systems use instant tab switching. This preserves the "application" feel.
+**Why:** Matches the GP System concept layout structure.
-### When: Building navigation
+### When: Ordering tiles in the card grid
-**Rule:** URL hash routing is required. Each view updates `window.location.hash`.
+**Rule:** Tile order: Patient Summary (full) → Latest Results (half) + Repeat Medications (half) → Last Consultation (full) → Career Activity (full) → Education (full) → Projects (full). Full-width tiles span both columns.
-**Why:** Direct linking to specific views is required.
+**Why:** This ordering follows the concept layout with the user's addition of Patient Summary at the top.
 ## Sidebar Guardrails
 ### When: Building the sidebar
 **Rule:** Sidebar contains ONLY: PersonHeader (avatar, name, title, status, details) → Tags → Alerts/Highlights. Active Projects, Core Skills, and Education are in the MAIN CONTENT as tiles, NOT in the sidebar.
 **Why:** User explicitly requested moving Projects, Skills, and Education from sidebar to main dashboard tiles.
 ## Interaction Guardrails
 ### When: Expanding/collapsing tile content
 **Rule:** Height animation ONLY (200ms, ease-out). Do NOT fade opacity on content. Single-expand accordion — only one item expanded at a time within a tile.
 **Why:** Consistent expand/collapse behavior. Opacity fade was explicitly prohibited.
 ### When: Building the command palette
 **Rule:** Trigger via Ctrl+K or search bar click. Overlay with backdrop blur. ESC to close. Arrow key navigation. Fuzzy search via fuse.js.
 **Why:** Matches concept interaction pattern.
 ### When: Building KPI flip cards
 **Rule:** Click to flip metric card (front=value, back=explanation). 400ms CSS perspective flip or instant swap with reduced motion. Only one card flipped at a time.
 **Why:** User requested interactive KPI exploration with explanation text.
 ## Login Screen Guardrails
@@ -58,32 +83,32 @@ Hard rules that MUST be followed in every iteration. Violating these will produc
 ## Component Guardrails
 ### When: Expanding/collapsing entries
 **Rule:** Height animation ONLY (200ms, ease-out). Do NOT fade opacity on content.
 **Why:** The spec explicitly states content grows/shrinks without opacity change.
 ### When: Displaying traffic light status indicators
 **Rule:** Colored dots must ALWAYS have text labels. Never use color as the sole indicator.
 **Why:** WCAG — color cannot be the only means of communicating information.
-### When: Rendering the clinical alert
+### When: Writing table or list markup inside tiles
-**Rule:** Use Framer Motion `type: "spring"` animation for entrance (not ease-out). Amber colors: bg `#FEF3C7`, left border `#F59E0B`, text `#92400E`.
+**Rule:** Use semantic markup. Tables use `<table>`, `<thead>`, `<th scope="col">`, `<tbody>`, `<tr>`, `<td>`. Lists use `<ul>`/`<ol>` with `<li>`. No div-based tables.
-**Why:** Spring animation with slight overshoot makes alerts feel alive and demanding.
+**Why:** Screen readers require native semantics.
-### When: Writing table markup
+### When: Using icons
-**Rule:** Use semantic `<table>`, `<thead>`, `<th scope="col">`, `<tbody>`, `<tr>`, `<td>`. No div-based tables.
+**Rule:** Use `lucide-react` icons only. No unicode symbols, no inline SVG copied from external sources. Exception: the concept's SVG icons should be converted to their lucide-react equivalents (e.g., concept's house icon → `Home` from lucide-react).
-**Why:** Screen readers require native table semantics.
+**Why:** Consistent icon system, tree-shakeable, accessible.
 ## Data Guardrails
 ### When: Displaying CV content
-**Rule:** All data must come from `src/data/*.ts` files. Do NOT hardcode content in components or change any numbers/dates.
+**Rule:** All data must come from `src/data/*.ts` files. Do NOT hardcode content in components or change any numbers/dates. New data files (profile.ts, tags.ts, alerts.ts, kpis.ts, skills.ts) must be accurate to CV_v4.md.
-**Why:** Data has been validated against CV_v4.md.
+**Why:** Data has been validated against CV_v4.md. Single source of truth.
 ### When: Building the "Repeat Medications" (skills) tile
 **Rule:** Use the exact frequencies specified by the user: Data Analysis="Twice daily", Power BI="Once weekly", Python="Daily", SQL="Daily", JavaScript/TypeScript="When required". Include "years of experience" like "length of time on medication".
 **Why:** User explicitly specified these frequency values for the medication metaphor.
 ## Visual Review Guardrails
 ### When: Completing any visual task
-**Rule:** After quality checks, open `http://localhost:5173` via Playwright MCP tools (`mcp__playwright__browser_navigate`, `mcp__playwright__browser_take_screenshot`, `mcp__playwright__browser_snapshot`), take a screenshot, and compare against the ref file spec. Fix visual discrepancies. If browser tools are unavailable, note in progress.txt and proceed.
+**Rule:** After quality checks, open `http://localhost:5173` via Playwright MCP tools, take a screenshot, and compare against `References/GPSystemconcept.html`. Fix visual discrepancies. If browser tools are unavailable, note in progress.txt and proceed.
 **Why:** Code review alone cannot catch visual issues.
 ### When: Browser tools fail
@@ -100,10 +125,10 @@ Hard rules that MUST be followed in every iteration. Violating these will produc
 **Rule:** All animations must respect `prefers-reduced-motion`. With reduced motion: all animations skip to final state instantly.
 **Why:** Accessibility requirement.
 ### When: Building visual components
 **Rule:** Each ref file in `Ralph/refs/` contains a "Design Guidance" section with design direction and code patterns. Read it BEFORE writing code. Do NOT invoke `/frontend-design` at runtime.
 **Why:** Design guidance is pre-baked to avoid context overflow.
 ### When: Running quality checks
 **Rule:** Run `npm run typecheck`, `npm run lint`, and `npm run build` after EVERY task. Fix all errors before committing.
 **Why:** Build failures compound across iterations.
 ### When: Referencing the concept design
 **Rule:** The reference design is `References/GPSystemconcept.html`. Open it in a browser or read the HTML to understand the visual target. The concept is the LAYOUT reference; production fonts and some colors differ (see font and color guardrails).
 **Why:** The concept HTML is the single source of truth for layout and spatial composition.
@@ -306,3 +306,716 @@ Do NOT invoke the `/frontend-design` skill at runtime — it was pre-run and the
 - Previous iterations skipped visual review because Chrome tools weren't available — Playwright MCP should now work
 ### New guardrails added: None
 ### Iteration 5 — Task 4b: Fix PatientBanner scroll condensation
 **Completed:** Task 4b
 **Changes made:**
 - **Root cause identified:** The sentinel element (`absolute top-0 h-0`) was positioned at the viewport top inside a non-positioned parent. The IntersectionObserver with `-100px` rootMargin immediately reported "not intersecting", so the banner was permanently stuck in condensed state.
 - **PMRInterface.tsx:** Restructured layout from document-scroll (`min-h-screen`) to flex container (`flex h-screen overflow-hidden`). Sidebar and content column are siblings. Content column is `flex-1 flex flex-col min-w-0` with banner (flex-shrink-0) above scrollable main (`overflow-y-auto`).
 - **PatientBanner.tsx:** Now accepts `isCondensed` prop from parent instead of managing its own scroll detection. Removed sentinel element, removed `useScrollCondensation` import, removed `sticky top-0`. Banner is positioned above the scroll container, so it stays fixed naturally.
 - **ClinicalSidebar.tsx:** Changed `h-screen sticky top-0` to `h-full` — parent flex container handles sizing.
 - **useScrollCondensation.ts:** Replaced IntersectionObserver with scroll event listener. Accepts `scrollContainer` element directly (not a ref). Uses callback ref pattern in PMRInterface to handle Framer Motion mounting timing.
 **Codebase patterns discovered:**
 - **Callback ref pattern for Framer Motion:** `motion.main` elements may not be in the DOM when `useEffect` first runs. Using `useState` + callback ref (`setScrollContainer` via `useCallback`) triggers a re-render when the element mounts, ensuring the scroll listener attaches correctly.
 - **Flex h-screen overflow-hidden layout:** The recommended clinical system layout: sidebar + content column in a viewport-height flex container. Content column has banner (flex-shrink-0) + scrollable main (flex-1 overflow-y-auto). No sticky positioning needed — elements above the scroll container stay fixed.
 - **Scroll event vs IntersectionObserver:** For scroll-position-based condensation in a contained scroll area, a simple scroll event listener is more reliable than IntersectionObserver with rootMargin tricks.
 **Quality checks:** All passed (typecheck, lint, build — 394.61 KB bundle)
 **Visual review:** Completed via Playwright MCP at 1280x800.
 - Full banner (80px, 3 rows) displays correctly on page load at scrollTop=0
 - Condensed banner (48px, single row) activates after scrolling 100px+
 - Banner returns to full state when scrolling back to top
 - Layout: sidebar fixed, banner fixed, only main content scrolls
 **Issues encountered:**
 - First attempt placed sentinel in `<main>` but kept IntersectionObserver with default root (viewport) — failed because `overflow-y-auto` on main creates a separate scroll context
 - Second attempt used IntersectionObserver with `root: scrollContainerRef.current` — failed due to timing: Framer Motion hadn't mounted the element when the effect ran, so `ref.current` was null
 - Final solution: replaced IntersectionObserver with scroll event listener + callback ref pattern for reliable element access
 **Design decisions:**
 - Chose scroll event listener over IntersectionObserver for simplicity and reliability
 - Used `{ passive: true }` on scroll listener for performance
 - Removed min-height calculations from main (`min-h-[calc(100vh-48px)]` etc.) — flex-1 handles sizing naturally
 **Next task:** Task 5 — Rebuild ClinicalSidebar
 ### Iteration 6 — Task 5: Rebuild ClinicalSidebar
 **Completed:** Task 5
 **Changes made:**
 - **ClinicalSidebar.tsx**: Rebuilt with all ref spec requirements:
  - Replaced clinical jargon labels with CV-friendly terms: Experience (not Consultations), Skills (not Medications), Achievements (not Problems), Projects (not Investigations), Education (not Documents), Contact (not Referrals)
  - Replaced all `font-inter` references with `font-ui` (Elvaro Grotesque)
  - Fixed Tailwind opacity syntax: `bg-white/12` → `bg-white/[0.12]`, `bg-white/8` → `bg-white/[0.08]`, `bg-white/5` → `bg-white/[0.05]`, `bg-white/10` → `bg-white/[0.10]`
  - Added right edge border (`border-r border-[#334155]`) per design system (sidebar depth)
  - Added `focus-visible:ring-2 focus-visible:ring-pmr-nhsblue/40 focus-visible:ring-inset` on all nav buttons
  - Set explicit `h-[44px]` and `text-[14px]` per spec (was `h-11` which is equivalent, but explicit is clearer)
  - Active state: `font-semibold`, inactive state: `font-medium` per spec
  - Added `border-l-[3px] border-transparent` on inactive items to prevent layout shift when switching to active
  - Icon container uses `w-[18px] h-[18px] flex items-center justify-center` for consistent alignment
  - Footer text color changed to `text-[#64748B]` per spec
  - Tablet tooltip uses `font-ui` with `shadow-lg` and `pointer-events-none`
 - **MobileBottomNav.tsx**: Updated all labels to CV-friendly terms and `font-inter` → `font-ui`
 - **PMRInterface.tsx**: Updated `viewLabels` record from clinical names to CV-friendly names for screen reader consistency
 **Codebase patterns discovered:**
 - Tailwind arbitrary opacity syntax: `bg-white/[0.12]` not `bg-white/12` (the latter works in newer Tailwind but the bracket syntax is more explicit and universally supported)
 - `border-l-[3px] border-transparent` on inactive items prevents layout shift when active state adds `border-pmr-nhsblue` — the 3px border is always present, only color changes
 - Navigation labels MUST be consistent across ClinicalSidebar, MobileBottomNav, and PMRInterface viewLabels — all three need updating when label convention changes
 **Quality checks:** All passed
 - TypeScript: No errors
 - ESLint: 1 pre-existing warning in AccessibilityContext.tsx (not our changes)
 - Build: Successful, 395.07 KB bundle
 **Visual review:** Completed via Playwright MCP at default viewport
 - Sidebar renders with correct CV-friendly labels: Summary, Experience, Skills, Achievements, Projects, Education, Contact
 - 220px width, dark #1E293B background with right edge border visible
 - Header branding "CareerRecord PMR / v1.0.0" in premium font at 50% opacity
 - Search input with magnifying glass icon, properly styled
 - Separator line between Summary and Experience — correct position
 - Active state (tested on Summary and Experience): white text, NHS blue left border, bg-white/[0.12] highlight, font-semibold
 - Default state: white text at 70% opacity, transparent background
 - Footer: "Session: A.CHARLWOOD / Logged in: [time]" in #64748B
 - View switching instant — no animation between views
 - URL hash routing works (#summary, #consultations)
 **Issues encountered:** None
 **Design decisions:**
 - Used `border-r border-[#334155]` instead of a shadow for the sidebar right edge — cleaner, more clinical
 - Kept the existing search functionality (local filter) as-is — Task 13 will replace it with fuse.js
 - Used `pointer-events-none` on tablet tooltips to prevent tooltip interfering with clicks
 **Next task:** Task 6 — Rebuild PMRInterface layout + Breadcrumb
 ### Iteration 7 — Task 6: Rebuild PMRInterface layout + Breadcrumb
 **Completed:** Task 6
 **Changes made:**
 - **Breadcrumb.tsx**: Created new component with Patient Record > [View] > [Expanded Item] navigation pattern
  - Accepts `currentView`, `expandedItem`, `onNavigateToView`, `onCollapseItem` props
  - Uses `viewLabels` record mapping ViewId to CV-friendly names (Summary, Experience, Skills, etc.)
  - "Patient Record" root is clickable, navigates to summary view
  - Current view is clickable when an item is expanded, collapses the expanded item
  - Expanded item name (if present) appears as third breadcrumb segment
  - Styling: 13px font-ui, gray-400 text for clickable items, gray-600 for current location
  - ChevronRight icons (14px, gray-300) as separators
  - Hover state: text-pmr-nhsblue on clickable segments
 - **PMRInterface.tsx**: Integrated Breadcrumb component and updated font references
  - Added Breadcrumb import
  - Integrated Breadcrumb between screen reader heading and content (desktop/tablet only, not mobile)
  - Breadcrumb receives `activeView`, `expandedItemId` from AccessibilityContext, navigation callbacks
  - Replaced all `font-inter` references with `font-ui` (4 locations: default view placeholder, mobile search input, mobile back button)
  - Added `shadow-pmr` to default view placeholder card for visual consistency
  - Layout unchanged from Task 4b fix (flex h-screen overflow-hidden pattern already correct)
 **Codebase patterns discovered:**
 - Breadcrumb navigation pattern: root (Patient Record) → section (view label) → detail (expanded item)
 - Breadcrumb should be hidden on mobile (mobile has "Back to Summary" button instead)
 - `expandedItemId` from AccessibilityContext is a string (item name), needs to be wrapped in object `{ name, type }` for Breadcrumb
 - ViewId mapping must be consistent across ClinicalSidebar, MobileBottomNav, PMRInterface viewLabels, and Breadcrumb viewLabels
 **Quality checks:** All passed
 - TypeScript: No errors
 - ESLint: 1 pre-existing warning in AccessibilityContext.tsx (not our changes)
 - Build: Successful, 396.39 KB bundle
 **Visual review:** Completed via Playwright MCP at default viewport
 - Breadcrumb renders correctly on Summary view: "Patient Record > Summary"
 - Breadcrumb updates on navigation to Experience: "Patient Record > Experience"
 - Styling correct: 13px font-ui (Elvaro Grotesque), gray-400 clickable text, gray-300 chevrons
 - Positioned correctly above view content with mb-6 spacing
 - Layout verified: fixed 220px sidebar, sticky banner, scrollable content area
 - View switching instant — no animation between Summary → Experience
 - Interface materialization animations work (banner → sidebar → content stagger on initial PMR load)
 **Issues encountered:** None
 **Design decisions:**
 - Breadcrumb shows on desktop/tablet only — mobile uses "Back to Summary" button instead (simpler UX on small screens)
 - "Patient Record" root always navigates to Summary (the logical "home" view)
 - When an item is expanded, clicking the current view name collapses it (returns to list view)
 - Used `onNavigateToView` callback pattern for breadcrumb navigation (consistent with existing PMRInterface pattern)
 **Next task:** Task 7 — Rebuild SummaryView + Clinical Alert
 ### Iteration 8 — Task 7: Rebuild SummaryView + Clinical Alert
 **Completed:** Task 7
 **Changes made:**
 - **SummaryView.tsx**: Complete rebuild from ref-summary-alert.md spec:
  - **ClinicalAlert**: Replaced CSS transition-based animation with Framer Motion spring animation
    - State machine: `'visible' | 'acknowledging' | 'dismissed'` (was: 3 separate boolean states)
    - Entrance: `type: 'spring', stiffness: 300, damping: 25` — creates subtle overshoot effect
    - Dismiss sequence: icon crossfade (AlertTriangle → CheckCircle, 200ms) → hold beat (200ms) → height collapse (200ms ease-out)
    - `AnimatePresence` wraps alert for exit animation (height → 0, opacity → 0)
    - Button disables during acknowledging state, text changes to "Acknowledged"
    - `prefers-reduced-motion`: instant appear/dismiss, no animation
  - **DemographicsCard**: Full-width (`lg:col-span-2`), 2-column key-value layout
    - Labels: `font-ui font-medium text-[13px] text-gray-500`, right-aligned, min-width 100px
    - Values: `font-ui text-sm text-gray-900` (or `font-geist` for coded data like DOB, registration number)
    - Proper spacing: `gap-x-12 gap-y-2` between columns and rows
  - **ActiveProblemsCard**: Traffic light dots now include text labels (was: dot-only, guardrail violation)
    - Green dot + "Active" text, amber dot + "In Progress" text
    - Hover state: `bg-[#EFF6FF]` blue tint (was: `bg-gray-50`)
  - **QuickMedsCard**: Proper semantic `<table>` with hover states
    - Row height: 40px, alternating `#FFFFFF` / `#F9FAFB` backgrounds
    - Hover: `bg-[#EFF6FF]` on rows
    - Status dots with text labels in each cell
  - **LastConsultationCard**: Full-width, proper typography hierarchy
    - Date: `font-geist text-[12px]` (monospace), separator: `text-gray-300`
    - Role title: `font-ui font-semibold text-[15px]`
    - History: `leading-relaxed line-clamp-3`
  - **All cards**: `shadow-pmr` (multi-layered), `border border-[#E5E7EB]`, `rounded` (4px)
  - **All fonts**: `font-inter` → `font-ui` throughout (Elvaro Grotesque)
  - **CardHeader**: Extracted reusable component — `bg-[#F9FAFB]`, `border-b border-[#E5E7EB]`, uppercase title
  - **Grid layout**: `grid grid-cols-1 lg:grid-cols-2 gap-6` — demographics + last consultation span full, problems + meds side-by-side
  - **Types**: Props now use proper imported types (`Problem[]`, `Medication[]`, `Consultation`) instead of `typeof` references
 **Codebase patterns discovered:**
 - Framer Motion `AnimatePresence` + `motion.div` with `exit` prop is the right pattern for elements that animate out (alert collapse)
 - Alert state machine with 3 states is cleaner than 3 separate boolean states — eliminates impossible state combinations
 - `CardHeader` component is reusable across all summary cards and potentially other views
 - `TrafficLight` component with mandatory text labels should be reused wherever status dots appear
 - Hover color `#EFF6FF` (blue tint) is more refined than `gray-50` for interactive rows in a clinical context
 **Quality checks:** All passed
 - TypeScript: No errors
 - ESLint: 1 pre-existing warning in AccessibilityContext.tsx (not our changes)
 - Build: Successful, 396.05 KB bundle
 **Visual review:** Completed via Playwright MCP at default viewport
 - Clinical Alert: Amber banner with spring entrance, icon visible, Acknowledge button styled correctly
 - Alert dismiss: Clicked Acknowledge → icon crossfade → hold → collapse. Content slides up smoothly
 - Demographics: Full-width card, 2-column layout, proper label-value alignment
 - Active Problems: 3 items with green/amber dots AND text labels (Active, In Progress)
 - Quick Medications: 5-row table with alternating backgrounds, status column with dots + text
 - Last Consultation: Full-width, Geist Mono date, NHS blue org name, role title, truncated history
 - All cards have visible multi-layered shadows and #E5E7EB borders
 - Grid layout correct: demographics full-width → problems + meds side-by-side → last consultation full-width
 **Issues encountered:** None
 **Design decisions:**
 - Extracted `CardHeader` as shared component for consistent card headers across all summary cards
 - Alert dismiss sequence uses `setTimeout(400)` for the acknowledging→dismissed transition (200ms icon crossfade + 200ms hold)
 - Used `AnimatePresence mode="wait"` for icon crossfade inside alert (not just opacity toggle)
 - Button text changes from "Acknowledge" to "Acknowledged" during dismissal for clear user feedback
 - Demographics card uses `gap-x-12` (48px) between columns for generous spacing per Clinical Luxury direction
 **Next task:** Task 8 — Rebuild ConsultationsView (Experience view)
 ### Iteration 9 — Task 8: Rebuild ConsultationsView (Experience view)
 **Completed:** Task 8
 **Changes made:**
 - **ConsultationsView.tsx**: Complete rebuild from ref-consultations.md spec:
  - **Framer Motion expand/collapse**: Replaced custom CSS height transition with `AnimatePresence` + `motion.div` for proper height-only animation (200ms ease-out). No opacity fade on content (guardrail compliance).
  - **Chevron rotation**: Now uses `motion.div` with `animate={{ rotate: isExpanded ? 180 : 0 }}` instead of CSS class toggle.
  - **Font updates**: All `font-inter` references replaced with `font-ui` (Elvaro Grotesque). Section headers, body text, labels all use `font-ui`.
  - **Font sizes per spec**: Dates `text-[13px]`, organization `text-[13px]`, role title `text-[15px]`, body/bullets `text-[13px]`, section headers `text-[12px]`, coded entries `text-[12px]`.
  - **Coded entries**: Full line in `font-geist` (Geist Mono) — `[CODE] Description` on a single div, not split into separate spans.
  - **Section headers**: `font-ui font-semibold text-[12px] uppercase tracking-[0.05em] text-gray-400` — matches clinical system divider style.
  - **Hover state**: Changed from `bg-gray-50` to `bg-[#EFF6FF]` (blue tint) for interactive rows.
  - **Card styling**: Added `shadow-pmr` (multi-layered shadow), `border border-[#E5E7EB]`, with `overflow-hidden`.
  - **3px left border**: Color-coded by employer via inline style (NHS blue `#005EB8` or Tesco teal `#00897B`).
  - **Accessibility**: Added `focus-visible:ring-2 focus-visible:ring-pmr-nhsblue/40 focus-visible:ring-inset` on entry buttons, `aria-expanded` attribute, descriptive `aria-label` with role + org + date.
  - **Status dot**: Green for current, gray for historical, with `aria-label`.
  - **Single-expand accordion**: Only one entry expanded at a time.
  - **Reduced motion**: All animations skip to final state (Framer Motion `duration: 0`).
  - **Removed unused imports**: Cleaned up `useEffect`, `useRef` — no longer needed with Framer Motion approach.
 **Codebase patterns discovered:**
 - `AnimatePresence initial={false}` + `motion.div` with `initial/animate/exit` on `height` is the cleanest pattern for height-only expand/collapse — cleaner than the previous custom CSS transition approach with `useRef` + `useEffect` + `setTimeout`.
 - Coded entries render cleaner as a single `font-geist` div with the full `[CODE] Description` text, rather than splitting code and description into separate styled spans.
 - Framer Motion chevron rotation via `motion.div` is simpler and more consistent than CSS class toggle with `transition-transform`.
 **Quality checks:** All passed
 - TypeScript: No errors
 - ESLint: 1 pre-existing warning in AccessibilityContext.tsx (not our changes)
 - Build: Successful, 395.72 KB bundle
 **Visual review:** Completed via Playwright MCP at default viewport
 - Collapsed state: All 5 entries visible with date (Geist Mono), organization (employer color), role title (semibold), key coded entry
 - 3px left border visible: NHS blue for first 3 entries, teal for Tesco entries
 - Green status dot on Deputy Head (current role), gray on all others
 - Expanded first entry: H/E/P sections with proper section header styling, bulleted lists, coded entries in Geist Mono
 - Accordion behavior: Expanding second entry collapsed first (re-shows Key coded entry)
 - Chevron rotated 180° when expanded
 - Multi-layered shadows visible on cards
 - No opacity fade during expand/collapse — height-only animation confirmed
 **Issues encountered:** None
 **Design decisions:**
 - Used `AnimatePresence initial={false}` to prevent animation on first render (entries should appear without animation)
 - Kept coded entries as simple single-line divs in Geist Mono for clean, scannable output
 - Status dots use `aria-label` for screen readers but no visible text label — the ref spec specifies dots only for consultations (text labels required for traffic lights in problems/medications views)
 - View heading says "Consultation Journal" (clinical metaphor in content) while sidebar says "Experience" (CV-friendly nav)
 **Next task:** Task 9 — Rebuild MedicationsView (Skills view)
 ### Iteration 10 — Task 9: Rebuild MedicationsView (Skills view)
 **Completed:** Task 9
 **Changes made:**
 - **MedicationsView.tsx**: Complete rebuild from ref-medications.md spec:
  - **Font updates**: All `font-inter` references replaced with `font-ui` (Elvaro Grotesque)
  - **Card styling**: Added `shadow-pmr` (multi-layered shadow), `border border-[#E5E7EB]`, `overflow-hidden`
  - **Category tabs**: Three tabs (Active Medications, Clinical Medications, PRN) with count badges showing item count per category. Active tab: white bg, NHS blue bottom border, blue text. Inactive: `#F9FAFB` bg, gray text, hover to white.
  - **Semantic table**: Proper `<table>`, `<thead>`, `<th scope="col">`, `<tbody>` markup per guardrails
  - **Sortable columns**: ChevronsUpDown (neutral), ChevronUp/ChevronDown (active, NHS blue) sort indicators. Three-state cycle: asc → desc → none.
  - **Column borders**: `border-r border-[#E5E7EB]` between columns for clinical authenticity
  - **Row height**: `h-[40px]` per design system spec
  - **Alternating rows**: `bg-white` / `bg-[#F9FAFB]` via index-based alternation
  - **Hover state**: `hover:bg-[#EFF6FF]` (subtle blue tint) on rows and sort buttons
  - **Status dots**: 6px green circles with "Active" text label (guardrail: dots must always have text)
  - **Framer Motion expand/collapse**: `AnimatePresence initial={false}` + `motion.tr`/`motion.div` for height-only animation (no opacity fade per guardrail). 200ms ease-out.
  - **Chevron rotation**: `motion.div` with `animate={{ rotate: isExpanded ? 180 : 0 }}` — consistent with ConsultationsView pattern
  - **Prescribing history**: Vertical timeline with NHS blue dots (`bg-[#005EB8]` with white ring), connecting line (`bg-[#E5E7EB]`). Year markers in `font-geist font-semibold text-[12px]`, descriptions in `font-geist text-[12px]`.
  - **Mobile card layout**: Stacked key-value pairs with expand/collapse, same Framer Motion animation
  - **Accessibility**: `role="tablist"`, `role="tab"`, `aria-selected`, `aria-controls` on tabs. `aria-expanded` on rows. `tabIndex={0}` + keyboard handler on table rows. `focus-visible:ring-2` on mobile buttons.
  - **AccessibilityContext integration**: `setExpandedItem` called on expand/collapse to update breadcrumb
  - **prefers-reduced-motion**: All Framer Motion animations use `duration: 0` when reduced motion preferred
  - **Tab panel**: Proper `id` and `role="tabpanel"` with `aria-labelledby`
  - **Font sizes per spec**: Headers `text-[13px]`, data cells `text-[13px]`, drug names `text-[14px]`, prescribing history `text-[12px]`
 **Codebase patterns discovered:**
 - `AnimatePresence initial={false}` on table rows prevents animation when switching tabs (content should appear instantly)
 - Count badges on tabs provide scannable category sizes — computed once outside component via `categoryCounts` record
 - Column borders between `<th>`/`<td>` cells (via `border-r border-[#E5E7EB] last:border-r-0`) add clinical authenticity
 - Framer Motion `motion.tr` works for table row expand but needs a nested `motion.div` for reliable height animation (table row height can't animate directly)
 - The `SortIndicator` component pattern (ChevronsUpDown → ChevronUp/ChevronDown) is reusable for any sortable table
 **Quality checks:** All passed
 - TypeScript: No errors
 - ESLint: 1 pre-existing warning in AccessibilityContext.tsx (not our changes)
 - Build: Successful, 395.01 KB bundle
 **Visual review:** Completed via Playwright MCP at default viewport
 - Collapsed state: All 8 Active Medications visible with correct data in all 5 columns
 - Tab switching: Active → Clinical (6 items) → PRN (4 items), all instant with correct count badges
 - Expanded Python row: Prescribing history with vertical timeline, NHS blue dots, Geist Mono year markers, descriptions
 - Accordion behavior: Expanding SQL collapsed Python (single-expand)
 - Sort indicators: ChevronsUpDown visible in all column headers
 - Alternating rows: White/gray-50 alternation visible
 - Column borders: Vertical separators between all columns
 - Status dots: Green dots with "Active" text label in every row
 - Card shadow: Multi-layered shadow visible around container
 - Footer: "8 medications in this category. Click a row to view prescribing history."
 **Issues encountered:** None
 **Design decisions:**
 - Moved `prefersReducedMotion` check to module scope (computed once, not per render)
 - Used `ChevronsUpDown` from lucide-react for neutral sort state per ref spec (was using `ArrowUpDown`)
 - Drug Name column includes the expand chevron inline (saves a dedicated column, cleaner layout)
 - Timeline dots use `ring-2 ring-white` to create white gap between dot and timeline line
 - Tab count badges use `bg-[#005EB8]/10 text-[#005EB8]` for active tab, `bg-gray-200 text-gray-500` for inactive
 **Next task:** Task 10 — Rebuild ProblemsView (Achievements view)
 ### Iteration 11 — Task 10: Rebuild ProblemsView (Achievements view)
 **Completed:** Task 10
 **Changes made:**
 - **ProblemsView.tsx**: Complete rebuild from ref-problems.md spec:
  - **Font updates**: All `font-inter` → `font-ui` (Elvaro Grotesque), `font-mono` → `font-geist` for codes/dates
  - **Card styling**: Added `shadow-pmr` multi-layered shadows to both Active and Resolved Problems containers
  - **Framer Motion expand/collapse**: Replaced CSS transition with `AnimatePresence` + `motion.tr`/`motion.div` for height-only animation (200ms ease-out, no opacity fade per guardrail)
  - **Chevron rotation**: `motion.div` with `animate={{ rotate: isExpanded ? 180 : 0 }}` — consistent with ConsultationsView/MedicationsView pattern
  - **Hover colors**: Changed from `bg-blue-50` → `bg-[#EFF6FF]` (subtle blue tint) for row hover states
  - **Font sizes per spec**: Headers `text-[13px]`, problem descriptions `text-[14px]`, codes/dates `text-xs`, narrative `text-[14px]`
  - **TrafficLight component**: Added `font-ui` to text labels for WCAG-compliant status indicators (dot + text)
  - **Two semantic tables**: Active Problems (4 columns: Status, Code, Problem, Since) and Resolved Problems (6 columns: + Resolved, Outcome)
  - **Expandable rows**: Full-width sub-row with `bg-gray-50` background, narrative text, and linked consultations section
  - **Linked consultations**: `ExternalLink` icon + clickable links in NHS blue with `focus-visible:ring-2` for keyboard nav
  - **AccessibilityContext integration**: `setExpandedItem` called on expand/collapse to update breadcrumb with problem description
  - **Mobile cards**: Updated to use `font-ui`/`font-geist`, added `shadow-pmr`, Framer Motion expand animation, `focus-visible` rings
  - **Reduced motion support**: All Framer Motion animations use `duration: 0` when `prefersReducedMotion` is true
  - **Module-scope `prefersReducedMotion`**: Computed once at module load, not per render
 **Codebase patterns discovered:**
 - `AnimatePresence initial={false}` + `motion.tr` for table row expand is consistent across all expandable table views
 - Traffic light dots (8px circles) MUST always have text labels per WCAG guardrail — never color-only indicators
 - `font-geist` is used for all coded entries (SNOMED-style codes like `[MGT001]`, `[EFF002]`) and dates
 - Linked consultations pattern: `ExternalLink` icon + clickable link that calls `onNavigate('consultations', consultationId)`
 - Breadcrumb updates via AccessibilityContext: pass expanded item name (string) to `setExpandedItem`, not an object
 **Quality checks:** All passed
 - TypeScript: No errors
 - ESLint: 1 pre-existing warning in AccessibilityContext.tsx (not our changes)
 - Build: Successful, 395.86 KB bundle
 **Visual review:** Completed via Playwright MCP at default viewport
 - Both tables render correctly: Active Problems (3 items) and Resolved Problems (8 items)
 - Traffic lights visible with text labels: Green "Active", Amber "In Progress", Green "Resolved"
 - Codes display in Geist Mono: `[MGT001]`, `[TRN001]`, `[EFF001]`, etc.
 - Multi-layered shadows visible on both card containers
 - Expanded first resolved problem row: narrative text displays in Elvaro 14px, `bg-gray-50` background
 - Linked Consultations section: "LINKED CONSULTATIONS:" header + NHS blue clickable link with ExternalLink icon
 - Chevron rotation animation smooth (180° when expanded)
 - Column borders: `1px solid #E5E7EB` visible between all table cells
 - Table headers: uppercase, `text-[13px]`, gray-400 color
 **Issues encountered:** None
 **Design decisions:**
 - Moved `prefersReducedMotion` to module scope (computed once) for performance — pattern from MedicationsView
 - Used `useCallback` for `handleToggle` to prevent unnecessary re-renders when passing to child components
 - Breadcrumb receives problem description string (not object) — AccessibilityContext stores simple string IDs
 - Traffic light text labels use `text-xs` and `text-gray-600` for subtle but readable status indicators
 - Expandable content wraps in `motion.div` with `overflow: hidden` for smooth height animation
 **Next task:** Task 11 — Rebuild InvestigationsView + DocumentsView (Projects + Education views)
 ### Iteration 12 — Task 11: Rebuild InvestigationsView + DocumentsView (Projects + Education)
 **Completed:** Task 11
 **Changes made:**
 - **InvestigationsView.tsx**: Complete rebuild from ref-investigations-documents.md spec:
  - **Framer Motion expand/collapse**: Replaced CSS height transition with `AnimatePresence initial={false}` + `motion.tr`/`motion.div` for height-only animation (200ms ease-out, no opacity fade per guardrail)
  - **Chevron rotation**: `motion.div` with `animate={{ rotate: isExpanded ? 180 : 0 }}` — consistent with all other expandable views
  - **Font updates**: All `font-inter` → `font-ui` (Elvaro Grotesque), `font-mono` → `font-geist` for dates, tree content
  - **StatusBadge component**: Pill-styled badges with colored dots and text labels. Three statuses: Complete (emerald), Ongoing (amber), Live (emerald with `animate-ping` pulse)
  - **Tree-indented expanded content**: Box-drawing characters (`├─`, `└─`) in Geist Mono 12px. `TreeLine` and `TreeBranch` helper components for consistent rendering. Results field uses nested sub-tree structure
  - **Color-coded left borders**: Expanded panels have `border-l-4` colored by status (#10B981 for Complete/Live, #F59E0B for Ongoing)
  - **View Results button**: NHS blue (#005EB8) button with ExternalLink icon, only appears for PharMetrics (the only project with `externalUrl`)
  - **Card styling**: `shadow-pmr` multi-layered shadow, `border border-[#E5E7EB]`, `overflow-hidden`
  - **Table improvements**: Column borders (`border-r border-[#E5E7EB]`), alternating rows (`bg-white`/`bg-[#F9FAFB]`), `hover:bg-[#EFF6FF]`, row height `h-[40px]`
  - **Removed separate expand column**: Chevron integrated into Test Name column (saves a column, cleaner layout)
  - **Accessibility**: `tabIndex={0}`, keyboard handler (Enter/Space), `aria-expanded`, descriptive `aria-label`
  - **AccessibilityContext**: `setExpandedItem` updates breadcrumb with investigation name
  - **Mobile cards**: Framer Motion animation, StatusBadge, focus-visible rings, tree-indented expanded content
  - **Reduced motion**: All Framer Motion animations use `duration: 0` when `prefersReducedMotion` is true
 - **DocumentsView.tsx**: Complete rebuild from ref-investigations-documents.md spec:
  - Same Framer Motion expand/collapse pattern as InvestigationsView
  - **Document type icons**: `FileText` (Certificate), `Award` (Registration), `GraduationCap` (Results), `FlaskConical` (Research)
  - **Color-coded left borders by document type**: NHS blue (#005EB8) for Certificate, emerald (#10B981) for Registration, indigo (#6366F1) for Results, violet (#8B5CF6) for Research
  - **Tree-indented expanded content**: Dynamic field rendering — only shows fields that exist in the data (institution, classification, duration, research, notes)
  - **Font updates**: All `font-inter` → `font-ui`, `font-mono` → `font-geist`
  - **Card styling**: `shadow-pmr`, `border border-[#E5E7EB]`, alternating rows, hover states
  - **Accessibility**: Same pattern as InvestigationsView — tabIndex, keyboard, aria-expanded, AccessibilityContext
 **Codebase patterns discovered:**
 - `TreeLine` and `TreeBranch` helper components create a reusable tree-indented display pattern — could be extracted to a shared component for use in other views
 - StatusBadge with pill styling (bg + border + dot + text) is more visually refined than the simple dot+text TrafficLight pattern used in ProblemsView
 - Dynamic field list pattern (build an array of `{ label, value }` objects from optional props, then iterate with `TreeLine`) is cleaner than a chain of conditional JSX for optional fields
 - Removing the dedicated expand column (integrating chevron into the first data column) saves horizontal space — applicable to any expandable table
 - Color-coded left borders on expanded panels provide visual connection between the row and its detail panel
 **Quality checks:** All passed
 - TypeScript: No errors
 - ESLint: 1 pre-existing warning in AccessibilityContext.tsx (not our changes)
 - Build: Successful, 395.31 KB bundle
 **Visual review:** Completed via Playwright MCP at default viewport
 - **InvestigationsView (Projects):**
  - 5 rows visible with correct data in all 4 columns
  - StatusBadge pills: "Live" with pulsing dot (PharMetrics), "Complete" in emerald (all others)
  - Expanded PharMetrics: tree-indented Geist Mono content with `├─`/`└─` characters
  - Green left border on expanded panel
  - "View Results" button in NHS blue with ExternalLink icon
  - Results sub-tree with nested `├─`/`└─`
  - Column borders between all columns
  - Alternating row backgrounds visible
 - **DocumentsView (Education):**
  - 5 rows with document type icons (FileText, Award, GraduationCap, FlaskConical)
  - Expanded MPharm: all 7 fields rendered with tree indentation
  - Blue left border (Certificate type)
  - Research field shows detail + grade on second line
  - Notes field uses `└─` (last item indicator)
  - Dates in Geist Mono, titles in Elvaro Grotesque
 **Issues encountered:** None
 **Design decisions:**
 - Integrated chevron into first data column (Test Name / Document) rather than separate expand column — saves space, cleaner
 - Used `TreeLine` / `TreeBranch` helper components for consistent tree structure rather than inline JSX
 - Document type colors chosen for visual distinction: blue (Certificate), green (Registration), indigo (Results), violet (Research)
 - Status border colors match the badge colors for visual consistency
 - Module-scope `prefersReducedMotion` (computed once) for performance — established pattern
 **Next task:** Task 13 — Fuzzy search with fuse.js
 ### Iteration 13 — Task 12: Rebuild ReferralsView (Contact)
 **Completed:** Task 12
 **Changes made:**
 - **ReferralsView.tsx**: Updated all font references from `font-inter` to `font-ui` (Elvaro Grotesque) and `font-mono` to `font-geist`:
  - **Module-scope `prefersReducedMotion`**: Moved from `useRef` pattern to module-level constant (consistent with other views)
  - **PriorityOption component**: Updated label colors from `text-red-700`/`text-amber-700` to `text-red-600`/`text-amber-600` per ref spec. Added `font-ui` to label and tooltip text.
  - **ContactMethodOption component**: Added `font-ui` to label text
  - **FormField component**: All labels and error messages now use `font-ui`
  - **DirectContactTable**:
    - Card styling: `border-[#E5E7EB]`, `shadow-pmr` multi-layered shadow, `bg-[#F9FAFB]` header
    - Row hover state: `hover:bg-[#EFF6FF]` (blue tint) for interactive rows
    - Font updates: `font-ui` for labels, `font-geist` for contact values (email, phone, LinkedIn)
    - Accessibility: `focus-visible:ring-2 focus-visible:ring-pmr-nhsblue/40` on all links
  - **Form inputs**: Updated border color to `#D1D5DB`, focus ring to `ring-pmr-nhsblue/15`, transition to `transition-all duration-200`, `font-ui` for input text
  - **Success state**:
    - Card styling: `border-[#E5E7EB]`, `shadow-pmr`, `bg-[#F9FAFB]` header
    - Reference number in `font-geist` (monospace)
    - Button hover: `hover:bg-[#004D9F]` (darker NHS blue)
    - Added `focus-visible:ring-2` on button
  - **Form buttons**: Updated hover colors and added focus rings for accessibility
 **Codebase patterns discovered:**
 - Module-scope `prefersReducedMotion` constant is now the established pattern across all views (simpler than `useRef` approach)
 - Direct Contact table uses same hover color (`#EFF6FF`) as other interactive table rows for consistency
 - Priority radio buttons with colored dots (red/blue/amber) + text labels follow the traffic light pattern from other views
 - Form validation pattern: required fields check on submit, email regex validation, error display below fields
 - Reference number generation uses `REF-YYYY-MMDD-NNN` format with random sequence number
 - Success state pattern: CheckCircle icon → heading → reference (monospace) → description → action button
 **Quality checks:** All passed
 - TypeScript: No errors
 - ESLint: 1 pre-existing warning in AccessibilityContext.tsx (not our changes)
 - Build: Successful, 395.94 KB bundle
 **Visual review:** Completed via Playwright MCP at default viewport
 - Form state: All priority radio buttons render with correct colors (red/blue/amber dots), tooltips visible on hover
 - Input styling: Correct border color (#D1D5DB), NHS blue focus rings visible
 - Direct Contact table: Multi-layered shadow visible, hover states work (blue tint on rows)
 - Tested form submission: filled name + email, clicked "Send Referral"
 - Success state: Green checkmark icon, "Referral sent successfully" heading, reference number in Geist Mono (REF-2026-0213-527), "Send Another Referral" button in NHS blue
 - All fonts: Elvaro Grotesque for UI text, Geist Mono for NHS number and reference number
 - Card styling: `shadow-pmr` visible, `#E5E7EB` borders correct
 **Issues encountered:** None
 **Design decisions:**
 - Used module-scope `prefersReducedMotion` constant instead of `useRef` pattern (established convention from previous tasks)
 - Priority label colors: `text-red-600`/`text-amber-600` (was `text-red-700`/`text-amber-700`) per ref spec for better contrast balance
 - Direct Contact table rows use `hover:bg-[#EFF6FF]` (blue tint) consistent with other interactive tables
 - Input focus ring uses `/15` opacity (was `/20`) per design system spec for subtler glow
 **Next task:** Task 13 — Fuzzy search with fuse.js
 ### Iteration 14 — Task 13: Fuzzy search with fuse.js
 **Completed:** Task 13
 **Changes made:**
 - **Installed fuse.js** (npm install fuse.js) — version 7.0.0
 - **Created src/lib/search.ts**:
  - `buildSearchIndex()` function — builds unified Fuse search index from all PMR data
  - Search index includes: consultations (5), medications (18), problems (11), investigations (6), documents (5) — total 45 searchable items
  - Each item has: id, title, section (ViewId), sectionLabel (CV-friendly), highlight (full text preview)
  - Fuse.js config: threshold 0.3, weighted keys (title: 2, highlight: 1), minMatchCharLength: 2
  - `groupResultsBySection()` — groups search results by sectionLabel for organized dropdown
  - Export types: `SearchResult`, `FuseResult` from fuse.js
 - **Updated ClinicalSidebar.tsx**:
  - Replaced simple `filter` search with `searchIndex.search()` (fuzzy matching)
  - Added `useMemo(() => buildSearchIndex(), [])` — index built once on mount
  - Search requires minimum 2 characters, returns top 10 results
  - Results grouped by section using `groupResultsBySection()`
  - Dropdown UI: section headers with icon + label + count, result rows with title + highlight (line-clamp-1)
  - `handleSearchResultClick()` — navigates to section, calls `setExpandedItem(result.item.id)`, clears search
  - Integrated with AccessibilityContext for breadcrumb updates
  - Section headers show section icon from navItems
  - Dropdown styling: `max-h-[400px] overflow-y-auto`, `bg-pmr-sidebar`, `border border-white/10`, `shadow-lg`
  - Result hover: `hover:bg-white/[0.10]`
  - TypeScript: imported `FuseResult` type, typed map callback parameter
 **Codebase patterns discovered:**
 - Fuse.js search index pattern: build once in `useMemo`, search on every query change in separate `useMemo`
 - Grouped results display: `Map<string, FuseResult[]>` from grouping function, iterate with `Array.from(grouped.entries())`
 - Search result navigation: change view + hash + call `setExpandedItem()` to auto-expand matching item
 - Minimum query length (2 chars) prevents noise from single-character searches
 - Top 10 result limit keeps dropdown manageable
 - Section icon lookup: `navItems.find(item => item.label === sectionLabel)?.icon`
 **Quality checks:** All passed
 - TypeScript: No errors
 - ESLint: 1 pre-existing warning in AccessibilityContext.tsx (not our changes)
 - Build: Successful, 416.25 KB bundle (fuse.js adds ~21 KB)
 **Visual review:** Completed via Playwright MCP at http://localhost:5173
 - Searched "python": dropdown shows "Skills (1)" with Python medication, "Projects (3)" with 3 Python-related projects
 - Section headers render with correct icons (Pill for Skills, Flask for Projects) and item counts
 - Clicked Python result: navigated to Skills view (#medications hash), Python row expanded with prescribing history visible
 - Searched "budget": dropdown shows "Skills (1)" with Budget Management, "Achievements (1)" with £220M budget problem
 - Fuzzy matching works: partial matches, case-insensitive
 - Clear search button (X icon) visible when query present
 - Dropdown styling: dark sidebar background, white text, section headers at 50% opacity, result highlights at 50% opacity
 - Line-clamp-1 on highlight text truncates long descriptions cleanly
 **Issues encountered:** None
 **Design decisions:**
 - Used `useMemo` for search index (built once) and search results (recomputed on query change) — performance optimization
 - Minimum 2 characters required — prevents overly broad results from single letters
 - Top 10 results limit — prevents overwhelming dropdown, encourages more specific queries
 - Section grouping preserves the clinical navigation structure — users see results organized by PMR section
 - Highlight text uses `line-clamp-1` for clean truncation — full text visible on hover isn't needed (title is enough to identify)
 - Search index includes both title (weight: 2) and full text (weight: 1) — prioritizes title matches but allows content searches
 **Next task:** Task 14 — Responsive design audit
 ### Iteration 15 — Task 14: Responsive design audit
 **Completed:** Task 14
 **Changes made:**
 - **No code changes** — this was an audit/testing task only
 - Tested all three responsive breakpoints using Playwright MCP browser tools:
  - **Desktop (1280x800)**: 220px sidebar with full labels, full 3-row patient banner, 2-column grid layouts, semantic tables with proper columns
  - **Tablet (800x600)**: 56px icon-only sidebar, single-row condensed banner, single-column card layouts
  - **Mobile (375x667)**: Bottom navigation bar (56px height) with 7 icons, minimal top banner with overflow menu, search at top of each view, tables converted to card layouts
 - Verified all responsive features per ref-interactions.md spec:
  - ✅ Sidebar: Desktop full labels → Tablet icons only → Mobile bottom nav bar
  - ✅ Patient banner: Desktop full (80px) → Tablet condensed (48px) → Mobile minimal with overflow menu
  - ✅ Tables: Desktop full columns → Tablet horizontal scroll if needed → Mobile card layout (Skills, Achievements, Projects, Education all confirmed)
  - ✅ Search: Desktop/Tablet in sidebar header → Mobile at top of each view
  - ✅ Back navigation: Mobile has "Back to Summary" button on all non-Summary views
  - ✅ Touch targets: Bottom nav buttons, card expand buttons, search input, Acknowledge button all appear adequately sized for touch interaction
 - Verified table → card conversions on mobile:
  - Skills (MedicationsView): Stacked cards with drug name, proficiency, frequency, status dot + text, expand chevron
  - Achievements (ProblemsView): Stacked cards with traffic light dot + text, code, description, "Since" date, expand chevron
  - Visual confirmation via screenshots captured at all three breakpoints
 **Codebase patterns discovered:**
 - All responsive layout work was already complete from previous tasks (Tasks 5-12) — each view component already includes mobile card layouts alongside desktop table layouts
 - Breakpoint switching handled by Tailwind `lg:` and `md:` prefixes throughout components
 - `MobileBottomNav.tsx` component provides the mobile navigation bar (appears <768px only)
 - `useBreakpoint` hook used in some components to conditionally render desktop vs mobile layouts
 - Touch-friendly card buttons on mobile use adequate padding and min-height for 48px+ touch targets
 **Quality checks:** All passed
 - TypeScript: No errors
 - ESLint: 1 pre-existing warning in AccessibilityContext.tsx (not our changes)
 - Build: Successful, 416.25 KB bundle
 **Visual review:** Completed via Playwright MCP at three breakpoints (1280x800, 800x600, 375x667)
 - Desktop: Full sidebar, full banner, 2-column grids, semantic tables — all correct
 - Tablet: Icon-only sidebar, condensed banner, single-column cards — all correct
 - Mobile: Bottom nav bar visible, minimal banner with overflow menu, search at top, tables converted to cards — all correct
 - All screenshots saved: desktop-summary-1280.png, tablet-summary-800.png, mobile-summary-375.png, mobile-skills-cards-375.png, mobile-achievements-final-375.png, desktop-skills-table-1280.png, mobile-touch-targets-375.png, mobile-summary-final-375.png
 **Issues encountered:** None — all responsive features already implemented correctly in previous tasks
 **Design decisions:**
 - No changes needed — audit confirmed existing responsive implementation meets all spec requirements
 - All three breakpoints render correctly with appropriate layout adaptations
 - Touch targets on mobile appear adequate (visual assessment — formal measurement would require additional tooling)
 **Next task:** Task 15 — Accessibility audit + final polish
 ### Iteration 16 — Task 15: Accessibility audit + final polish
 **Completed:** Task 15
 **Changes made:**
 - **ClinicalSidebar.tsx**: Replaced `<aside role="navigation">` with `<nav>` (removes conflicting roles — `<aside>` has implicit `complementary`, overridden by `role="navigation"`). Removed redundant nested `<nav>` elements, replaced with `<div>`. Added `role="listbox"`, `role="group"`, and `role="option"` to search results dropdown. Added `id="search-results-listbox"` for `aria-controls` connection. Changed search input to `type="search"` with `role="combobox"`, `aria-label="Search record"`, `aria-expanded`, `aria-controls`, `aria-autocomplete="list"`.
 - **PMRInterface.tsx**: Removed redundant `role="main"` from `<main>` element. Fixed `aria-label` to use CV-friendly label (`viewLabels[activeView]` → "Summary view", "Experience view", etc.) instead of raw ViewId ("consultations view"). Added `type="search"` and `aria-label` to mobile search input.
 - **Breadcrumb.tsx**: Added `aria-current="page"` to the current (last) breadcrumb item. Added `aria-hidden="true"` to chevron separator `<li>` elements so screen readers skip decorative icons.
 - **SummaryView.tsx**: Added `aria-label="Acknowledge clinical alert"` on the alert acknowledge button per accessibility spec.
 - **PatientBanner.tsx**: Changed `focus:ring-2` to `focus-visible:ring-2` on ActionButton links (focus ring only shows on keyboard navigation, not mouse clicks). Added `role="img"` to StatusDot so screen readers announce the `aria-label`.
 - **LoginScreen.tsx**: Changed container from `role="status"` to `role="dialog" aria-modal="true"` (login card is a modal dialog, not a status message). Added `loginButtonRef` with auto-focus when typing completes (keyboard users can immediately press Enter to log in). Added `focus-visible:ring-2` to the Log In button.
 - **MedicationsView.tsx**: Added `id="tab-{id}"` to tab buttons for proper `aria-labelledby` connection. Fixed `aria-labelledby` on tab panels to reference `"tab-${activeTab}"` instead of raw `activeTab`.
 - **ConsultationsView.tsx**: Changed consultation entry wrapper from `<div>` to `<article>` per accessibility spec (each entry is a self-contained piece of content).
 - **ProblemsView.tsx**: Changed TrafficLight dot from `role="img" aria-label="Status: ..."` to `aria-hidden="true"` (the adjacent text label already handles the semantic — having both `aria-label` on the dot AND visible text is redundant).
 - **App.tsx**: Added `sr-only` live region with `role="status" aria-live="polite"` that announces "Patient Record for Charlwood, Andrew. Summary view." when PMR phase activates. Added `focus-visible:ring-2` to Skip button.
 **Accessibility audit summary:**
 - ✅ Semantic HTML: `<nav>` for navigation (sidebar, breadcrumb, mobile nav), `<header>` for banner, `<main>` for content, `<article>` for consultation entries, semantic `<table>` for all data tables
 - ✅ Keyboard navigation: Arrow keys in sidebar (roving tabindex), Alt+1-7 shortcuts, "/" for search, Enter/Space on expandable items, Escape to close expanded items, Home/End in sidebar menu
 - ✅ Screen reader: `role="alert" aria-live="assertive"` on clinical alert, `aria-expanded` on all expandable items, `aria-current="page"` on active nav and breadcrumb, `aria-label` on all icon-only buttons, live region announcement on PMR entry
 - ✅ Focus management: Auto-focus to first sidebar item after login, focus to view heading after navigation, auto-focus to login button when typing completes
 - ✅ `prefers-reduced-motion`: All Framer Motion animations use `duration: 0`, login typing completes instantly, banner crossfade skips
 - ✅ WCAG contrast: NHS blue on white (~7.3:1), all text on backgrounds meets AA requirements, traffic lights always paired with text labels
 **Quality checks:** All passed
 - TypeScript: No errors
 - ESLint: 1 pre-existing warning in AccessibilityContext.tsx (not our changes)
 - Build: Successful, 417.18 KB bundle
 **Visual review:** Completed via Playwright MCP at default viewport
 - Verified accessibility tree snapshot shows correct roles, labels, and structure
 - Login screen renders as `dialog` with `aria-modal`
 - Sidebar renders as `navigation` (not `aside`)
 - Search input has `combobox` role
 - Clinical alert has `alert` role with acknowledge button labelled
 - Breadcrumb has `aria-current="page"` on current item
 - PMR entry live region announcement present
 **Issues encountered:** None
 **Design decisions:**
 - Used `role="dialog"` for login (modal pattern) rather than `role="status"` (live region pattern)
 - Used `aria-hidden="true"` on TrafficLight dots in ProblemsView (text label is the accessible alternative) rather than `role="img"` (which would create duplicate announcements)
 - Used `role="combobox"` on search input with `aria-expanded`/`aria-controls` for standard combobox pattern
 - Breadcrumb chevron separators marked `aria-hidden` to avoid "image" announcements in screen readers
 **ALL TASKS COMPLETE** — Implementation plan fully checked off (Tasks 1-15)
 ## Manual Intervention — 2026-02-13
 ### Reason: Complete redesign — replacing CareerRecord PMR with GP System Dashboard
 ### Changes made:
 - **IMPLEMENTATION_PLAN.md**: Completely rewritten with 21 new tasks for GP System dashboard overhaul
 - **guardrails.md**: Completely rewritten for new design direction (teal palette, tile-based layout, 8px radius, new shadow system)
 - **progress.txt**: This intervention entry added
 - **CLAUDE.md**: Will be updated by Task 3 in the new plan (architecture, colors, components, styling)
 ### Previous plan status: 15/15 tasks completed (all checked off)
 ### New plan: 21 tasks across 4 phases (Foundation → Core Layout → Dashboard Tiles → Interactions → Polish)
 ### What's being replaced:
 - `PatientBanner.tsx` → `TopBar.tsx` (white top bar with search and session info)
 - `ClinicalSidebar.tsx` → `Sidebar.tsx` (light background #F7FAFA, person header, tags, alerts only)
 - `PMRInterface.tsx` → `DashboardLayout.tsx` (topbar + sidebar + scrollable card grid)
 - All 7 `views/*.tsx` files → Dashboard tile components in `src/components/tiles/`
 - Color palette: dark sidebar (#1E293B) + NHS Blue (#005EB8) → light sidebar (#F7FAFA) + teal (#0D6E6E)
 - Navigation: sidebar-nav view-switching → single scrollable dashboard with expandable tiles
 - Patient banner scroll condensation → removed (no banner, just topbar)
 ### What's preserved:
 - Boot sequence (BootSequence.tsx) — LOCKED
 - ECG animation (ECGAnimation.tsx) — LOCKED
 - Login screen (LoginScreen.tsx) — unchanged
 - Font setup: Elvaro Grotesque (primary UI), Blumir (alt), Geist Mono (data), Fira Code (terminal only)
 - All data files in src/data/ — content unchanged, new data files added
 - fuse.js dependency — reused for command palette search
 - App.tsx phase management (boot → ecg → login → pmr) — pmr phase now renders DashboardLayout
 ### Tasks in new plan:
 Phase 0 — Foundation:
 1. Update design tokens + Tailwind config
 2. Create new data files + update types
 3. Update CLAUDE.md for new architecture
 Phase 1 — Core Layout:
 4. Build TopBar component
 5. Build Sidebar — PersonHeader
 6. Build Sidebar — Tags, Alerts
 7. Build DashboardLayout + wire up App.tsx
 Phase 2 — Dashboard Tiles:
 8. Build reusable Card component
 9. Build PatientSummary tile
 10. Build LatestResults tile
 11. Build CoreSkills tile ("Repeat Medications")
 12. Build LastConsultation tile
 13. Build CareerActivity tile
 14. Build Education tile
 15. Build Projects tile
 Phase 3 — Interactions:
 16. Tile expansion system
 17. KPI flip card interaction
 18. Build Command Palette
 Phase 4 — Polish:
 19. Responsive design
 20. Accessibility audit
 21. Clean up + final polish
 ### Context for next iteration:
 - The reference design is `References/GPSystemconcept.html` — READ THIS before starting any visual task
 - The old PMR components STILL EXIST in the codebase. Don't delete them yet — some expand/collapse patterns and data rendering can be reused inside tile expansion (Task 16). Cleanup happens in Task 21.
 - Login screen still transitions to `#1E293B` background. The new dashboard has `#F0F5F4` background. The LoginScreen.tsx may need a background color update, or the transition can be handled in DashboardLayout's entrance animation.
 - The concept HTML uses DM Sans font — this is a PLACEHOLDER. Production uses Elvaro Grotesque (font-ui). Do not switch to DM Sans.
 - The concept's command palette has a comprehensive data model — use it as reference for building the palette in Task 18.
 - Tile interactions (expansion, KPI flip) are in Phase 3. Tiles in Phase 2 should be built as static/display-only first, with data attributes or props that Phase 3 can hook into.
 ### New guardrails added:
 - Accent color: teal #0D6E6E (replacing NHS Blue #005EB8 as primary interactive color)
 - Border radius: 8px for cards (was 4px)
 - Shadow system: three-tier (sm/md/lg) replacing single pmr shadow
 - Sidebar: light background, PersonHeader + Tags + Alerts ONLY (projects, skills, education moved to tiles)
 - Layout: TopBar + Sidebar + Card Grid (replacing PatientBanner + ClinicalSidebar + view switching)
 - Tile ordering: Patient Summary → Latest Results + Core Skills → Last Consultation → Career Activity → Education → Projects
 - Skills frequency: user-specified values (Data Analysis=twice daily, etc.)
@@ -0,0 +1,99 @@
 # Reference: Task 1 — Design Tokens and Tailwind Config
 ## Overview
 Update the design system from the dark-sidebar NHS Blue palette to the GP System concept's light teal palette. The concept reference is `References/GPSystemconcept.html`.
 ## CSS Custom Properties (`src/index.css`)
 Add/update these variables in the PMR section (keep boot/ECG/login variables unchanged):
 ```css
 /* GP System Dashboard tokens */
 --bg: #F0F5F4;
 --surface: #FFFFFF;
 --sidebar-bg: #F7FAFA;
 --text-primary: #1A2B2A;
 --text-secondary: #5B7A78;
 --text-tertiary: #8DA8A5;
 --accent: #0D6E6E;
 --accent-hover: #0A8080;
 --accent-light: rgba(10,128,128,0.08);
 --accent-border: rgba(10,128,128,0.18);
 --amber: #D97706;
 --amber-light: rgba(217,119,6,0.08);
 --amber-border: rgba(217,119,6,0.18);
 --success: #059669;
 --success-light: rgba(5,150,105,0.08);
 --success-border: rgba(5,150,105,0.18);
 --alert: #DC2626;
 --alert-light: rgba(220,38,38,0.08);
 --alert-border: rgba(220,38,38,0.18);
 --border: #D4E0DE;
 --border-light: #E4EDEB;
 --sidebar-width: 272px;
 --topbar-height: 48px;
 --radius: 8px;
 --radius-sm: 6px;
 --shadow-sm: 0 1px 2px rgba(26,43,42,0.05);
 --shadow-md: 0 2px 8px rgba(26,43,42,0.08);
 --shadow-lg: 0 8px 32px rgba(26,43,42,0.12);
 --font-body: var(--font-ui);
 --font-mono: 'Geist Mono', 'Fira Code', monospace;
 ```
 ## Tailwind Config (`tailwind.config.js`)
 Update the `extend` section:
 ### Colors
 ```js
 colors: {
  'pmr-bg': '#F0F5F4',
  'pmr-surface': '#FFFFFF',
  'pmr-sidebar': '#F7FAFA',
  'pmr-accent': '#0D6E6E',
  'pmr-accent-hover': '#0A8080',
  'pmr-text-primary': '#1A2B2A',
  'pmr-text-secondary': '#5B7A78',
  'pmr-text-tertiary': '#8DA8A5',
  'pmr-border': '#D4E0DE',
  'pmr-border-light': '#E4EDEB',
  'pmr-success': '#059669',
  'pmr-amber': '#D97706',
  'pmr-alert': '#DC2626',
  'pmr-purple': '#7C3AED',
  // Keep pmr-nhsblue for backward compat during transition
  'pmr-nhsblue': '#005EB8',
  // Keep pmr-content as fallback
  'pmr-content': '#F0F5F4',
 }
 ```
 ### Shadows
 ```js
 boxShadow: {
  'pmr-sm': '0 1px 2px rgba(26,43,42,0.05)',
  'pmr-md': '0 2px 8px rgba(26,43,42,0.08)',
  'pmr-lg': '0 8px 32px rgba(26,43,42,0.12)',
  // Keep old pmr shadow as alias during transition
  'pmr': '0 1px 2px rgba(26,43,42,0.05)',
 }
 ```
 ### Border Radius
 ```js
 borderRadius: {
  'card': '8px',    // was 4px — now 8px per concept
  'card-sm': '6px', // inner elements
  'login': '12px',  // login card exception
 }
 ```
 ## What NOT to Change
 - Boot phase variables (`--matrix-*`, `--terminal-*`)
 - ECG phase variables
 - Login phase background (`#1E293B` — handled by transition)
 - Font declarations (Elvaro, Blumir, Geist Mono, Fira Code already set up correctly)
 - Breakpoint values
@@ -0,0 +1,203 @@
 # Reference: Task 2 — Data Files and Types
 ## Overview
 Create new data files for dashboard-specific content and update the type system. All CV content must match `References/CV_v4.md` exactly.
 ## New Data Files
 ### `src/data/profile.ts`
 ```typescript
 export const personalStatement = `Healthcare leader combining clinical pharmacy expertise with proficiency in Python, SQL, and data analytics, self-taught over the past decade through a drive to find root causes in data and build the most efficient solutions to complex problems. Currently leading population health analytics for NHS Norfolk & Waveney ICB, serving a population of 1.2 million. Experienced in working with messy, real-world prescribing data at scale to deliver actionable insights—from financial scenario modelling and pharmaceutical rebate negotiation to algorithm design and population-level pathway development. Proven track record of identifying and prioritising efficiency programmes worth £14.6M+ through automated, data-driven analysis. Skilled at translating complex clinical, financial, and analytical requirements into clear recommendations for executive stakeholders.`
 ```
 ### `src/data/tags.ts`
 ```typescript
 import type { Tag } from '@/types/pmr'
 export const tags: Tag[] = [
  { label: 'Pharmacist', colorVariant: 'teal' },
  { label: 'Data Lead', colorVariant: 'teal' },
  { label: 'NHS', colorVariant: 'teal' },
  { label: 'Population Health', colorVariant: 'amber' },
  { label: 'BI & Analytics', colorVariant: 'green' },
 ]
 ```
 ### `src/data/alerts.ts`
 ```typescript
 import type { Alert } from '@/types/pmr'
 export const alerts: Alert[] = [
  {
    message: '£14.6M SAVINGS IDENTIFIED',
    severity: 'alert',
    icon: 'AlertTriangle', // lucide-react icon name
  },
  {
    message: '£220M BUDGET OVERSIGHT',
    severity: 'amber',
    icon: 'AlertCircle', // lucide-react icon name
  },
 ]
 ```
 ### `src/data/kpis.ts`
 ```typescript
 import type { KPI } from '@/types/pmr'
 export const kpis: KPI[] = [
  {
    id: 'budget',
    value: '£220M',
    label: 'Budget Oversight',
    sub: 'NHS prescribing',
    colorVariant: 'green',
    explanation: 'Managed the ICB\'s total prescribing budget with sophisticated forecasting models identifying cost pressures and enabling proactive financial planning across Norfolk & Waveney.',
  },
  {
    id: 'savings',
    value: '£14.6M',
    label: 'Efficiency Savings',
    sub: 'Identified & tracked',
    colorVariant: 'amber',
    explanation: 'Identified and prioritised a £14.6M efficiency programme through comprehensive data analysis; achieved over-target performance through targeted, evidence-based interventions across the integrated care system.',
  },
  {
    id: 'years',
    value: '9+',
    label: 'Years in NHS',
    sub: 'Since 2016',
    colorVariant: 'teal',
    explanation: 'Continuous NHS service since August 2016, progressing from community pharmacy through prescribing data analysis to system-level population health data leadership.',
  },
  {
    id: 'team',
    value: '12',
    label: 'Team Size Led',
    sub: 'Cross-functional',
    colorVariant: 'green',
    explanation: 'Led a cross-functional team of 12 spanning data analysts, population health specialists, and pharmacists across data, analytics, and population health workstreams.',
  },
 ]
 ```
 ### `src/data/skills.ts`
 Skills presented as "medications" with frequency (user-specified values) and years of experience.
 ```typescript
 import type { SkillMedication } from '@/types/pmr'
 export const skills: SkillMedication[] = [
  {
    id: 'data-analysis',
    name: 'Data Analysis',
    frequency: 'Twice daily',
    startYear: 2016,
    yearsOfExperience: 9,
    proficiency: 95,
    category: 'Technical',
    status: 'Active',
    icon: 'BarChart3',
  },
  {
    id: 'python',
    name: 'Python',
    frequency: 'Daily',
    startYear: 2019,
    yearsOfExperience: 6,
    proficiency: 90,
    category: 'Technical',
    status: 'Active',
    icon: 'Code2',
  },
  {
    id: 'sql',
    name: 'SQL',
    frequency: 'Daily',
    startYear: 2018,
    yearsOfExperience: 7,
    proficiency: 88,
    category: 'Technical',
    status: 'Active',
    icon: 'Database',
  },
  {
    id: 'power-bi',
    name: 'Power BI',
    frequency: 'Once weekly',
    startYear: 2020,
    yearsOfExperience: 5,
    proficiency: 92,
    category: 'Technical',
    status: 'Active',
    icon: 'PieChart',
  },
  {
    id: 'javascript-typescript',
    name: 'JavaScript / TypeScript',
    frequency: 'When required',
    startYear: 2022,
    yearsOfExperience: 3,
    proficiency: 70,
    category: 'Technical',
    status: 'Active',
    icon: 'FileCode2',
  },
 ]
 ```
 Note: Additional domain/leadership skills can be added later. Start with the 5 technical skills the user specified frequencies for.
 ## Type Updates (`src/types/pmr.ts`)
 Add these interfaces (keep all existing types):
 ```typescript
 export interface Tag {
  label: string
  colorVariant: 'teal' | 'amber' | 'green'
 }
 export interface Alert {
  message: string
  severity: 'alert' | 'amber'
  icon: string
 }
 export interface KPI {
  id: string
  value: string
  label: string
  sub: string
  colorVariant: 'green' | 'amber' | 'teal'
  explanation: string
 }
 export interface SkillMedication {
  id: string
  name: string
  frequency: string
  startYear: number
  yearsOfExperience: number
  proficiency: number
  category: 'Technical' | 'Domain' | 'Leadership'
  status: 'Active' | 'Historical'
  icon: string
 }
 ```
 ## Existing Data — No Changes
 These files remain untouched:
 - `src/data/patient.ts`
 - `src/data/consultations.ts`
 - `src/data/medications.ts`
 - `src/data/problems.ts`
 - `src/data/investigations.ts`
 - `src/data/documents.ts`
@@ -0,0 +1,147 @@
 # Reference: Tasks 4-6 — TopBar and Sidebar
 ## Concept Reference
 All specs below are derived from `References/GPSystemconcept.html`. Open it in a browser for visual reference.
 ---
 ## Task 4: TopBar Component
 ### File: `src/components/TopBar.tsx`
 ### Structure
 ```
 ┌─────────────────────────────────────────────────────────────┐
 │ [🏠] Headhunt Medical Center  Remote  │  [🔍 Search... Ctrl+K]  │  Dr. A.CHARLWOOD · Active Session · 12:23  [Ctrl+K] │
 └─────────────────────────────────────────────────────────────┘
 ```
 ### Specs
 **Container:**
 - `position: fixed`, `top: 0`, `left: 0`, `right: 0`
 - `height: var(--topbar-height)` (48px)
 - `background: var(--surface)` (#FFFFFF)
 - `border-bottom: 1px solid var(--border)` (#D4E0DE)
 - `display: flex`, `align-items: center`, `justify-content: space-between`
 - `padding: 0 20px`
 - `z-index: 100`
 **Brand (left):**
 - `Home` icon from lucide-react (18px, accent color)
 - Text: "Headhunt Medical Center" — 13px, font-ui, 600 weight, text-primary
 - Version badge: "Remote" — 11px, 400 weight, text-tertiary, margin-left 2px
 **Search bar (center):**
 - Wrapper: `max-width: 560px`, `min-width: 400px`
 - Container: `height: 42px`, `border: 1.5px solid var(--border)`, `border-radius: var(--radius)` (8px), `padding: 0 14px`, white bg
 - Search icon (16px, tertiary) + input + "Ctrl+K" kbd badge
 - Input: 13px, font-body, placeholder "Search records, experience, skills... (Ctrl+K)"
 - Hover: `border-color: var(--accent-border)`
 - Focus: `border-color: var(--accent)`, `box-shadow: 0 0 0 3px rgba(13,110,110,0.12)`
 - **On click/focus: opens Command Palette** (Task 18). Does NOT do inline search.
 - Kbd badge: mono font, 10px, tertiary, bg: var(--bg), border, padding 2px 6px, radius 4px
 **Session info (right):**
 - Text: "Dr. A.CHARLWOOD · Active Session · [time]" — 12px, text-secondary
 - Session pill: mono 11px, tertiary, `background: var(--accent-light)`, `padding: 3px 10px`, radius 4px, `border: 1px solid var(--accent-border)`
 - Ctrl+K shortcut badge (same style as search bar badge)
 **Responsive:**
 - Mobile (<768px): hide center search bar. Show only brand + session info (or hamburger).
 - Tablet: search bar may shrink.
 ---
 ## Task 5: Sidebar — PersonHeader
 ### File: `src/components/Sidebar.tsx`
 ### Overall Sidebar Container
 - `width: var(--sidebar-width)` (272px)
 - `min-width: var(--sidebar-width)`
 - `background: var(--sidebar-bg)` (#F7FAFA)
 - `border-right: 1px solid var(--border)` (#D4E0DE)
 - `overflow-y: auto`, custom scrollbar (4px width, transparent track, border-colored thumb)
 - `padding: 20px 16px`
 - `display: flex`, `flex-direction: column`, `gap: 2px`
 ### PersonHeader Section
 Bordered below: `border-bottom: 2px solid var(--accent)`, `padding-bottom: 16px`, `margin-bottom: 6px`
 **Avatar:**
 - 52px × 52px circle
 - `background: linear-gradient(135deg, var(--accent), #0A8080)`
 - White text "AC", 700 weight, 18px, centered
 - `box-shadow: 0 2px 8px rgba(13,110,110,0.25)`
 - `margin-bottom: 12px`
 **Name:**
 - "CHARLWOOD, Andrew"
 - 15px, 700 weight, text-primary, `letter-spacing: -0.01em`
 **Title:**
 - "Pharmacy Data Technologist"
 - 11.5px, mono font, 400 weight, text-secondary
 - `margin-top: 2px`
 **Status badge:**
 - Inline-flex, gap 5px
 - `margin-top: 8px`
 - 11px, 500 weight, success color (#059669)
 - `background: var(--success-light)`, `border: 1px solid var(--success-border)`
 - `padding: 3px 9px`, `border-radius: 20px` (pill)
 - Animated dot: 6px circle, success color, `animation: pulse 2s infinite` (opacity 1→0.4→1)
 - Text: "Open to Opportunities"
 **Details grid:**
 - `display: grid`, `grid-template-columns: 1fr`, `gap: 6px`, `margin-top: 12px`
 - Each row: `display: flex`, `justify-content: space-between`, `align-items: center`, 11.5px, `padding: 2px 0`
 - Label: text-tertiary, 400 weight
 - Value: text-primary, 500 weight, text-align right
 - GPhC No. value: mono font, 11px, `letter-spacing: 0.12em` → "2211810"
 - Education value: "MPharm 2.1 (Hons)"
 - Location: "Norwich, Norfolk"
 - Phone: link in accent color, `text-decoration: none`, underline on hover → "07795 553 088"
 - Email: link → "andy@charlwood.xyz"
 - Registered: "August 2016"
 **Data source:** `src/data/patient.ts`
 ---
 ## Task 6: Sidebar — Tags + Alerts
 ### Section Title Component
 Reusable within sidebar. Used for "Tags", "Alerts / Highlights", and any future sections.
 - `font-size: 10px`, `font-weight: 600`, `text-transform: uppercase`, `letter-spacing: 0.08em`
 - Color: text-tertiary
 - `margin-bottom: 10px`
 - Flex row with `::after` pseudo-element: `flex: 1`, `height: 1px`, `background: var(--border-light)`, `gap: 6px`
 ### Tags Section
 - Container: `display: flex`, `flex-wrap: wrap`, `gap: 5px`
 - Each tag: 10.5px, 500 weight, `padding: 3px 8px`, `border-radius: 4px`, inline-flex, `line-height: 1.3`
 - **Color variants:**
  - `teal`: `background: var(--accent-light)`, `color: var(--accent)`, `border: 1px solid var(--accent-border)`
  - `amber`: `background: var(--amber-light)`, `color: var(--amber)`, `border: 1px solid var(--amber-border)`
  - `green`: `background: var(--success-light)`, `color: var(--success)`, `border: 1px solid var(--success-border)`
 - **Data source:** `src/data/tags.ts`
 ### Alerts / Highlights Section
 - Container: `display: flex`, `flex-direction: column`, `gap: 6px`
 - Each flag item: `display: flex`, `align-items: center`, `gap: 8px`
  - 11px, 700 weight, `padding: 7px 10px`, `border-radius: var(--radius-sm)` (6px), `letter-spacing: 0.02em`
 - **Alert variant** (red):
  - `background: var(--alert-light)`, `color: var(--alert)`, `border: 1px solid var(--alert-border)`
  - Icon: `AlertTriangle` from lucide-react (14px, 2.5 stroke-width)
 - **Amber variant:**
  - `background: var(--amber-light)`, `color: var(--amber)`, `border: 1px solid var(--amber-border)`
  - Icon: `AlertCircle` from lucide-react (14px, 2.5 stroke-width)
 - Icon container: 16px square, flex center, flex-shrink-0
 - **Data source:** `src/data/alerts.ts`
 ### Section Padding
 Each sidebar section: `padding: 14px 0 6px`
@@ -0,0 +1,136 @@
 # Reference: Task 7 — DashboardLayout
 ## Overview
 Create the main layout component that replaces `PMRInterface.tsx`. This is the container that houses TopBar, Sidebar, and the scrollable card grid of tiles.
 ## File: `src/components/DashboardLayout.tsx`
 ### Layout Structure
 ```
 ┌────────────────────────────────────────────────────┐
 │  TopBar (fixed, z-100, height: 48px)               │
 ├──────────┬─────────────────────────────────────────┤
 │          │                                         │
 │ Sidebar  │  <main> — scrollable card grid          │
 │ (272px)  │  padding: 24px 28px 40px                │
 │ fixed    │                                         │
 │          │  grid: 1fr 1fr, gap: 16px               │
 │          │                                         │
 │          │  [PatientSummary — full]                 │
 │          │  [LatestResults] [CoreSkills]            │
 │          │  [LastConsultation — full]               │
 │          │  [CareerActivity — full]                 │
 │          │  [Education — full]                      │
 │          │  [Projects — full]                       │
 │          │                                         │
 └──────────┴─────────────────────────────────────────┘
 ```
 ### CSS Layout
 ```
 .layout {
  display: flex;
  margin-top: var(--topbar-height);  /* 48px */
  height: calc(100vh - var(--topbar-height));
 }
 .sidebar {
  /* See ref-03-topbar-sidebar.md for sidebar specs */
  width: var(--sidebar-width);
  min-width: var(--sidebar-width);
  /* ... */
 }
 .main {
  flex: 1;
  overflow-y: auto;
  padding: 24px 28px 40px;
 }
 .card-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
 }
@media (max-width: 900px) {
  .card-grid {
    grid-template-columns: 1fr;
  }
 }
 ```
 Use Tailwind classes for all of this — the CSS above is for reference only.
 ### Framer Motion Entrance Animations
 Staggered entrance when dashboard first renders (after login):
 1. **TopBar**: slides down from `-48px`, 200ms ease-out
 2. **Sidebar**: slides from `-272px` left, 250ms ease-out, 50ms delay
 3. **Main content**: fades in (opacity 0→1), 300ms, 150ms delay
 ```typescript
 const topbarVariants = {
  hidden: { y: -48, opacity: 0 },
  visible: { y: 0, opacity: 1, transition: { duration: 0.2, ease: 'easeOut' } }
 }
 const sidebarVariants = {
  hidden: { x: -272, opacity: 0 },
  visible: { x: 0, opacity: 1, transition: { duration: 0.25, ease: 'easeOut', delay: 0.05 } }
 }
 const contentVariants = {
  hidden: { opacity: 0 },
  visible: { opacity: 1, transition: { duration: 0.3, delay: 0.15 } }
 }
 ```
 With `prefers-reduced-motion`: all durations → 0, no delays.
 ### Tile Ordering in Grid
 The card grid renders tiles in this order:
 1. `PatientSummaryTile` — `grid-column: 1 / -1` (full width)
 2. `LatestResultsTile` — single column (left)
 3. `CoreSkillsTile` — single column (right)
 4. `LastConsultationTile` — `grid-column: 1 / -1` (full width)
 5. `CareerActivityTile` — `grid-column: 1 / -1` (full width)
 6. `EducationTile` — `grid-column: 1 / -1` (full width)
 7. `ProjectsTile` — `grid-column: 1 / -1` (full width)
 ### App.tsx Wiring
 In `src/App.tsx`, the PMR phase currently renders `<PMRInterface />`. Change it to render `<DashboardLayout />`.
 ```typescript
 // In App.tsx phase switch:
 case 'pmr':
  return <DashboardLayout />
 ```
 Keep all other phases (boot, ecg, login) unchanged. The SkipButton that skips to login should still work.
 ### Scrollbar Styling
 Main content area scrollbar (matches concept):
 - Width: 6px
 - Track: transparent
 - Thumb: var(--border) (#D4E0DE), border-radius 3px
 ### Command Palette Integration
 The DashboardLayout should render the `CommandPalette` component (from Task 18) at the layout level, so it overlays the entire dashboard when triggered. For now (Task 7), just add a placeholder comment or empty div where it will go. The TopBar search bar's click handler should be wired to open the palette (but the palette itself comes in Task 18).
 ### Background Color Transition
 The login screen has background `#1E293B`. The dashboard has background `#F0F5F4`. This transition should happen smoothly. Options:
 1. The DashboardLayout entrance animation covers the transition (content fades in over the dark background, replacing it)
 2. A brief CSS transition on the body/root background color
 3. Handle it in App.tsx with a state-based background
 The simplest approach is option 1 — the dashboard's entrance animation effectively replaces the dark login background with the light dashboard.
@@ -0,0 +1,144 @@
 # Reference: Tasks 8-11 — Card Component and Top Tiles
 ## Task 8: Reusable Card Component
 ### File: `src/components/Card.tsx`
 ### Base Card
 ```typescript
 interface CardProps {
  children: React.ReactNode
  full?: boolean       // spans both grid columns
  className?: string
 }
 ```
 **Styling:**
 - `background: var(--surface)` (#FFFFFF)
 - `border: 1px solid var(--border-light)` (#E4EDEB)
 - `border-radius: var(--radius)` (8px)
 - `padding: 20px`
 - `box-shadow: var(--shadow-sm)` (0 1px 2px rgba(26,43,42,0.05))
 - Hover: `box-shadow: var(--shadow-md)`, `border-color: var(--border)` (#D4E0DE)
 - `transition: box-shadow 0.2s, border-color 0.2s`
 - Full variant: `grid-column: 1 / -1`
 ### CardHeader Sub-component
 ```typescript
 interface CardHeaderProps {
  dotColor: 'teal' | 'amber' | 'green' | 'alert' | 'purple'
  title: string
  rightText?: string
 }
 ```
 **Styling:**
 - `display: flex`, `align-items: center`, `gap: 8px`, `margin-bottom: 16px`
 - Dot: 8px circle, `border-radius: 50%`, flex-shrink-0
  - teal: `#0D6E6E`, amber: `#D97706`, green: `#059669`, alert: `#DC2626`, purple: `#7C3AED`
 - Title: 12px, 600 weight, uppercase, `letter-spacing: 0.06em`, text-secondary (#5B7A78)
 - Right text (optional): 10px, 400 weight, normal case, no tracking, text-tertiary, mono font, `margin-left: auto`
 ---
 ## Task 9: PatientSummary Tile
 ### File: `src/components/tiles/PatientSummaryTile.tsx`
 **Layout:** Full-width card, first in grid.
 **Content:**
 - CardHeader: teal dot + "PATIENT SUMMARY"
 - Body: personal statement text from `src/data/profile.ts`
 - Typography: 13px, font-ui, `line-height: 1.6` (leading-relaxed), text-primary
 - No interactive elements — read-only
 **Data:** `import { personalStatement } from '@/data/profile'`
 This is a simple tile. No expansion, no interactivity.
 ---
 ## Task 10: LatestResults Tile
 ### File: `src/components/tiles/LatestResultsTile.tsx`
 **Layout:** Half-width card (single grid column). Sits in the LEFT column.
 **Content:**
 - CardHeader: teal dot + "LATEST RESULTS" + right text "Updated May 2025"
 - 2×2 metric grid inside
 **Metric Grid:**
 - `display: grid`, `grid-template-columns: 1fr 1fr`, `gap: 12px`
 **Each Metric Card:**
 - `padding: 14px`, `border-radius: var(--radius-sm)` (6px)
 - `border: 1px solid var(--border-light)`, `background: var(--bg)` (#F0F5F4)
 - Value: 22px, 700 weight, `letter-spacing: -0.02em`, `line-height: 1.2`
  - Color by variant: green=#059669, amber=#D97706, teal=#0D6E6E
 - Label: 11px, text-secondary, 500 weight, `margin-top: 3px`
 - Sub: 10px, text-tertiary, mono font, `margin-top: 4px`
 **Data:** `import { kpis } from '@/data/kpis'`
 **KPI flip prep:** Each metric card should accept a `data-kpi-id` or an `onClick` prop placeholder — Task 17 will add the flip interaction. For now, render as static display.
 **Values:**
 | Value | Label | Sub | Color |
 |-------|-------|-----|-------|
 | £220M | Budget Oversight | NHS prescribing | green |
 | £14.6M | Efficiency Savings | Identified & tracked | amber |
 | 9+ | Years in NHS | Since 2016 | teal |
 | 12 | Team Size Led | Cross-functional | green |
 ---
 ## Task 11: CoreSkills Tile ("Repeat Medications")
 ### File: `src/components/tiles/CoreSkillsTile.tsx`
 **Layout:** Half-width card (single grid column). Sits in the RIGHT column, next to LatestResults.
 **Content:**
 - CardHeader: amber dot + "REPEAT MEDICATIONS"
 - Vertical list of skill items, `gap: 10px`
 **Each Skill Item:**
 Matches the concept's `.dev-item` pattern:
 - `display: flex`, `align-items: center`, `gap: 10px`
 - 12.5px font, `padding: 10px 12px`
 - `background: var(--bg)` (#F0F5F4), `border-radius: var(--radius-sm)` (6px)
 - `border: 1px solid var(--border-light)`
 **Item structure:**
 - **Icon container** (28px square, 6px radius):
  - `background: var(--accent-light)`, `color: var(--accent)` (teal)
  - Lucide icon inside (14px): `BarChart3` for Data Analysis, `Code2` for Python, `Database` for SQL, `PieChart` for Power BI, `FileCode2` for JS/TS
 - **Text block** (flex: 1):
  - Name: 600 weight, text-primary (e.g., "Data Analysis")
  - Frequency + years: 11px, text-tertiary, mono font (e.g., "Twice daily · Since 2016 · 9 yrs")
 - **Optional status badge**: 10px, 500 weight, pill shape (padding 3px 8px, border-radius 20px), flex-shrink-0
  - Could show proficiency or "Active" status
 **Medication metaphor format:**
 ```
 [📊] Data Analysis                     Active
     Twice daily · Since 2016 · 9 yrs
 [💻] Python                            Active
     Daily · Since 2019 · 6 yrs
 [🗄️] SQL                               Active
     Daily · Since 2018 · 7 yrs
 [📈] Power BI                          Active
     Once weekly · Since 2020 · 5 yrs
 [📝] JavaScript / TypeScript           Active
     When required · Since 2022 · 3 yrs
 ```
 **Data:** `import { skills } from '@/data/skills'`
 **Expansion prep:** Each item should accept an onClick prop placeholder — Task 16 will add expansion to show prescribing history (from existing medications data).
@@ -0,0 +1,204 @@
 # Reference: Tasks 12-15 — Bottom Tiles
 ## Task 12: LastConsultation Tile
 ### File: `src/components/tiles/LastConsultationTile.tsx`
 **Layout:** Full-width card.
 **Content:**
 - CardHeader: green dot + "LAST CONSULTATION" + right text "Most recent role"
 **Header info row:**
 - `display: flex`, `flex-wrap: wrap`, `gap: 16px`
 - `margin-bottom: 14px`, `padding-bottom: 14px`, `border-bottom: 1px solid var(--border-light)`
 - Each field:
  - Label: 10px, uppercase, `letter-spacing: 0.06em`, text-tertiary
  - Value: 11.5px, 600 weight, text-primary
 | Label | Value |
 |-------|-------|
 | Date | May 2025 |
 | Organisation | NHS Norfolk & Waveney ICB |
 | Type | Permanent · Full-time |
 | Band | 8a |
 **Role title:**
 - "Interim Head, Population Health & Data Analysis"
 - 13.5px, 600 weight, `color: var(--accent)` (#0D6E6E)
 - `margin-bottom: 12px`
 **Bullet list:**
 - `list-style: none`, flex column, `gap: 7px`
 - Each bullet: 12.5px, text-primary, `padding-left: 16px`, `line-height: 1.5`
 - Pseudo `::before`: 5px circle, accent color (#0D6E6E), `opacity: 0.5`, positioned left at top 7px
 **Bullets** (from first consultation's examination array):
 - Led a cross-functional team of 12 across data, analytics, and population health workstreams
 - Oversaw £220M prescribing budget with full analytical accountability and reporting to ICB board
 - Identified £14.6M in efficiency savings through data-driven prescribing interventions
 - Designed and deployed Power BI dashboards used by 200+ clinicians and commissioners
 - Spearheaded SQL analytics transformation, migrating legacy Access databases to modern data stack
 - Established team data literacy programme, upskilling 30+ non-technical staff in data interpretation
 **Data:** `import { consultations } from '@/data/consultations'` — use `consultations[0]` (the most recent).
 Map consultation fields:
 - date → Date field
 - organization → Organisation field
 - role → Role title
 - examination array → Bullet points
 ---
 ## Task 13: CareerActivity Tile
 ### File: `src/components/tiles/CareerActivityTile.tsx`
 **Layout:** Full-width card.
 **Content:**
 - CardHeader: teal dot + "CAREER ACTIVITY" + right text "Full timeline"
 **Activity grid:**
 - `display: grid`, `grid-template-columns: 1fr 1fr`, `gap: 10px`
 - Below 900px: `grid-template-columns: 1fr` (single column)
 **Each activity item:**
 - `display: flex`, `gap: 10px`
 - `padding: 10px 12px`
 - `background: var(--bg)` (#F0F5F4)
 - `border-radius: var(--radius-sm)` (6px)
 - `border: 1px solid var(--border-light)`
 - 12px font
 - `transition: border-color 0.15s`
 - Hover: `border-color: var(--accent-border)`
 **Dot (left):**
 - 8px circle, flex-shrink-0, `margin-top: 2px` (aligns with text)
 - Color by type:
  - Role: teal (#0D6E6E)
  - Project: amber (#D97706)
  - Certification: green (#059669)
  - Education: purple (#7C3AED)
 **Content (right):**
 - Title: 600 weight, text-primary, `line-height: 1.3`
 - Meta: 11px, text-secondary, `margin-top: 2px`
 - Date: 10px, mono font, text-tertiary, `margin-top: 3px`
 **Building the timeline data:**
 Merge entries from multiple data sources, sorted newest-first:
 ```typescript
 type ActivityType = 'role' | 'project' | 'cert' | 'edu'
 interface ActivityEntry {
  id: string
  type: ActivityType
  title: string
  meta: string
  date: string
  sortYear: number  // for sorting
 }
 ```
 Sources:
 1. `consultations` → type "role": title=role, meta=organization, date=duration
 2. `investigations` (selected key ones) → type "project": title=name, meta=short description, date=year
 3. `documents` where type='Certificate' → type "cert": title=title, meta=source, date=date
 4. `documents` where type='Results' (MPharm) → type "edu": title=title, meta=source, date=date
 Match the concept HTML entries:
 | Type | Title | Meta | Date |
 |------|-------|------|------|
 | role | Interim Head, Population Health & Data Analysis | NHS Norfolk & Waveney ICB | 2024 – 2025 |
 | project | £220M Prescribing Budget Oversight | Lead analyst & budget owner | 2024 |
 | role | Senior Data Analyst — Medicines Optimisation | NHS Norfolk & Waveney ICB | 2021 – 2024 |
 | project | SQL Analytics Transformation | Legacy migration project lead | 2025 |
 | cert | Power BI Data Analyst Associate | Microsoft Certified | 2023 |
 | role | Prescribing Data Pharmacist | NHS Norwich CCG | 2018 – 2021 |
 | cert | Clinical Pharmacy Diploma | Professional development | 2019 |
 | role | Community Pharmacist | Boots UK | 2016 – 2018 |
 | edu | MPharm (Hons) — 2:1 | University of East Anglia | 2011 – 2015 |
 | cert | GPhC Registration | General Pharmaceutical Council | August 2016 |
 **Expansion prep:** Activity items should accept onClick for Task 16 (expand to show full role/project detail).
 ---
 ## Task 14: Education Tile
 ### File: `src/components/tiles/EducationTile.tsx`
 **Layout:** Full-width card, below Career Activity.
 **Content:**
 - CardHeader: purple dot (#7C3AED) + "EDUCATION"
 **Education entries:**
 Vertical stack of education items.
 Each item:
 - `padding: 7px 10px`
 - `background: var(--surface)` (#FFFFFF)
 - `border: 1px solid var(--border-light)`
 - `border-radius: var(--radius-sm)` (6px)
 - 11.5px, text-primary
 Structure:
 - Degree name: 600 weight, `display: block`
 - Detail: text-secondary, 11px, `margin-top: 2px`
 **Entries** (from CV):
 | Degree | Detail |
 |--------|--------|
 | MPharm (Hons) — 2:1 | University of East Anglia · 2015 |
 | NHS Leadership Academy — Mary Seacole Programme | 2018 · 78% |
 | A-Levels: Mathematics (A*), Chemistry (B), Politics (C) | Highworth Grammar School · 2009–2011 |
 **Data:** Filter `src/data/documents.ts` for education entries, or hardcode from CV since the documents data may not have all education entries.
 Note: The concept HTML only shows the MPharm entry. But the CV has more education. Include all CV education entries.
 ---
 ## Task 15: Projects Tile
 ### File: `src/components/tiles/ProjectsTile.tsx`
 **Layout:** Full-width card, prominent position.
 **Content:**
 - CardHeader: amber dot + "ACTIVE PROJECTS"
 **Project entries:**
 Vertical list, styled as interactive items.
 Each project:
 - `display: flex`, `align-items: flex-start`, `gap: 8px`
 - `padding: 7px 10px`
 - `background: var(--surface)`, `border: 1px solid var(--border-light)`
 - `border-radius: var(--radius-sm)` (6px)
 - 11.5px, text-primary
 - Hover: `border-color: var(--accent-border)`
 - `transition: border-color 0.15s`
 Structure:
 - **Status dot** (7px circle, flex-shrink-0, `margin-top: 4px`):
  - Complete: success (#059669)
  - Ongoing: accent (#0D6E6E)
  - Live: success with pulse animation
 - **Project name**: text-primary, flex 1
 - **Year badge**: 10px, mono font, text-tertiary, `margin-left: auto`, flex-shrink-0
 **Data:** `import { investigations } from '@/data/investigations'`
 Map investigations to projects:
 - name → Project name
 - status → dot color
 - requestedYear → Year badge
 - resultSummary → Available for expansion (Task 16)
 **Expansion prep:** Each item should accept onClick for Task 16 (expand to show methodology, tech stack, results).
@@ -0,0 +1,248 @@
 # Reference: Tasks 16-18 — Interactions
 ## Task 16: Tile Expansion System
 ### Overview
 Three tiles have expandable items: CareerActivity (roles), Projects, and CoreSkills. Clicking an item expands it in-place to reveal detail, like expanding a clinical record entry.
 ### Expansion Pattern (consistent across all tiles)
 **Animation:**
 - Framer Motion `AnimatePresence` + `motion.div`
 - Height-only animation: 200ms, ease-out
 - **No opacity fade on content** (guardrail)
 - `overflow: hidden` on the animated container
 ```typescript
 <AnimatePresence initial={false}>
  {isExpanded && (
    <motion.div
      initial={{ height: 0 }}
      animate={{ height: 'auto' }}
      exit={{ height: 0 }}
      transition={prefersReducedMotion ? { duration: 0 } : { duration: 0.2, ease: 'easeOut' }}
      style={{ overflow: 'hidden' }}
    >
      {/* expanded content */}
    </motion.div>
  )}
 </AnimatePresence>
 ```
 **Behavior:**
 - Single-expand accordion: only one item expanded at a time within each tile
 - Click expanded item again to collapse
 - Click different item: collapses current, expands new
 - State: `expandedItemId: string | null` in each tile component
 **Keyboard:**
 - Enter/Space: toggle expand/collapse
 - Escape: collapse current item
 - `aria-expanded` on each clickable item
 **Visual:**
 - Expanded content has slightly different background (`var(--bg)` or subtle border-left)
 - Colored left border on expanded panel (accent color for roles, amber for projects, teal for skills)
 - Content padding: 12-16px
 ### CareerActivity Expansion (roles)
 When a role-type activity item is expanded:
 - Show full role details from corresponding consultation entry
 - Structure: role title, organization, date range
 - Achievement bullets (examination array from consultation)
 - Coded entries if available
 - Match expanded content to `consultations` data by mapping activity item to consultation
 ### Projects Expansion
 When a project item is expanded:
 - Show from investigation data:
  - Methodology
  - Tech stack (as tags or inline list)
  - Results (bulleted)
  - External URL link if available ("View Results" button)
 ### CoreSkills Expansion
 When a skill item is expanded:
 - Show "prescribing history" — a timeline of skill development
 - Source: Can use the existing `medications` data which has `prescribingHistory` entries
 - Format: vertical timeline with year markers and descriptions
  - Timeline dots: accent color, 6px, with connecting line
  - Year: mono font, 12px, semibold
  - Description: 12px, regular
 ---
 ## Task 17: KPI Flip Cards
 ### Overview
 In the LatestResults tile, each metric card can be clicked to "flip" and reveal an explanation of that KPI.
 ### Flip Animation
 **CSS Perspective approach:**
 ```css
 .metric-card {
  perspective: 1000px;
  cursor: pointer;
 }
 .metric-card-inner {
  transition: transform 0.4s ease-in-out;
  transform-style: preserve-3d;
  position: relative;
 }
 .metric-card-inner.flipped {
  transform: rotateY(180deg);
 }
 .metric-card-front,
 .metric-card-back {
  backface-visibility: hidden;
  position: absolute;
  inset: 0;
 }
 .metric-card-back {
  transform: rotateY(180deg);
 }
 ```
 Or use Framer Motion `animate={{ rotateY: isFlipped ? 180 : 0 }}` with `perspective` on parent.
 **Behavior:**
 - Click to flip front → back
 - Click again to flip back → front
 - Only one card flipped at a time (clicking another card flips the current one back)
 - State: `flippedCardId: string | null` in LatestResultsTile
 **Front face:** Current metric display (value + label + sub) — same as Task 10.
 **Back face:**
 - `background: var(--accent-light)` (subtle teal tint)
 - `padding: 14px`
 - Text: 12px, text-secondary, `line-height: 1.5`
 - The explanation text from KPI data's `explanation` field
 **Reduced motion:**
 - No 3D flip animation
 - Instant content swap (front → back)
 - Could use a simple crossfade or just replace content immediately
 **Keyboard:**
 - Enter/Space to flip
 - Each metric card should be `tabIndex={0}` with appropriate `aria-label`
 **KPI Explanations** (from `src/data/kpis.ts`):
 - £220M: Budget management with forecasting models
 - £14.6M: Efficiency programme through data analysis
 - 9+ Years: NHS service progression since 2016
 - 12: Cross-functional team leadership
 ---
 ## Task 18: Command Palette
 ### File: `src/components/CommandPalette.tsx`
 ### Trigger
 - **Ctrl+K** (global `keydown` listener on `document`)
 - **Click** on TopBar search bar (or focus on search input)
 - The TopBar search input does NOT do inline search — it opens the palette
 ### Overlay
 - `position: fixed`, `inset: 0`
 - `background: rgba(26,43,42,0.45)`
 - `backdrop-filter: blur(4px)`
 - `z-index: 1000`
 - Fade in: `opacity: 0 → 1`, `visibility: hidden → visible`, 200ms transition
 - Click overlay (outside modal) to close
 ### Palette Modal
 - `width: 580px`, `max-height: 520px`
 - `background: var(--surface)` (#FFFFFF)
 - `border-radius: 12px`
 - `box-shadow: 0 20px 60px rgba(26,43,42,0.2), 0 0 0 1px rgba(26,43,42,0.08)`
 - `overflow: hidden`
 - Entrance: `transform: scale(0.97) translateY(-8px)` → `scale(1) translateY(0)`, 200ms cubic-bezier
 ### Search Input
 - Flex row: search icon (18px, accent) + input + "ESC" hint badge
 - `padding: 14px 18px`, `border-bottom: 1px solid var(--border-light)`
 - Input: 15px, font-body, placeholder "Search records, experience, skills..."
 - ESC badge: mono 10px, tertiary, bg var(--bg), border, padding 2px 7px, radius 4px
 ### Results Area
 - `overflow-y: auto`, `padding: 8px`, `flex: 1`
 - Custom scrollbar (4px)
 ### Result Sections
 Section label: 10px, 600 weight, uppercase, `letter-spacing: 0.08em`, text-tertiary, `padding: 8px 10px 5px`
 ### Result Items
 - `display: flex`, `align-items: center`, `gap: 10px`
 - `padding: 9px 10px`, `border-radius: var(--radius-sm)` (6px)
 - `cursor: pointer`, `transition: background 0.1s`
 - 13px, text-primary
 - Hover/selected: `background: var(--accent-light)`
 - Selected also gets: `outline: 1.5px solid var(--accent-border)`
 **Item structure:**
 - Icon container: 28px square, 6px radius, colored bg per section
  - Experience: teal
  - Core Skills: green
  - Active Projects: amber
  - Achievements: amber
  - Education: purple
  - Quick Actions: teal
 - Text: title (500 weight) + subtitle (11px, tertiary, truncated)
 - Optional badge: 10px, mono, tertiary
 ### Fuzzy Search
 Adapt existing `src/lib/search.ts` (fuse.js integration):
 - Rebuild search index to include new data (skills from skills.ts, KPIs, etc.)
 - `threshold: 0.3`, weighted keys (title: 2, content: 1)
 - `minMatchCharLength: 2`
 - Group results by section
 - Highlight matching text in titles using `<mark>` with accent-light background
 ### Keyboard Navigation
 - **Arrow Down/Up**: move selection through results
 - **Enter**: select highlighted result (navigate to section or trigger action)
 - **Escape**: close palette
 - `selectedIndex` state tracks which result is highlighted
 - Auto-scroll highlighted result into view
 ### Quick Actions Section
 | Title | Subtitle | Action |
 |-------|----------|--------|
 | Download CV | Export as PDF | Trigger download |
 | Send Email | andy@charlwood.xyz | `mailto:` link |
 | View LinkedIn | Professional profile | External link |
 | View Projects | GitHub & portfolio | External link |
 ### Footer
 - `display: flex`, `gap: 12px`
 - `padding: 10px 18px`, `border-top: 1px solid var(--border-light)`
 - 11px, text-tertiary
 - Keyboard hints: `↑ ↓ Navigate`, `Enter Select`, `Esc Close`
 - Each key in `<kbd>` styled element
 ### Reduced Motion
 - No scale/translate entrance animation
 - Instant show/hide (opacity only, or immediate)
 ### State Management
 ```typescript
 const [isOpen, setIsOpen] = useState(false)
 const [query, setQuery] = useState('')
 const [selectedIndex, setSelectedIndex] = useState(-1)
 ```
 Render the palette at the DashboardLayout level so it overlays everything.
@@ -0,0 +1,156 @@
 # Reference: Tasks 19-21 — Polish
 ## Task 19: Responsive Design
 ### Desktop (>1024px)
 - Full sidebar (272px) + TopBar + 2-column card grid
 - All tiles at full spec (as designed in Tasks 8-15)
 - Command palette at 580px width
 ### Tablet (768–1024px)
 - Sidebar: collapse to icon-only (56px) or hide entirely with toggle
 - TopBar: full, but search bar may shrink (reduce min-width)
 - Card grid: can stay 2-column if space permits, or switch to 1-column
 - Activity grid inside CareerActivity tile: switch to 1-column
 ### Mobile (<768px)
 - Sidebar: hidden entirely (off-canvas or removed)
 - TopBar: simplified — brand text may truncate, hide search bar center section
 - Navigation: consider a hamburger menu or bottom nav for key actions
 - Card grid: single column
 - All tiles stack vertically (full-width)
 - Metric grid in LatestResults: stays 2x2 (compact enough)
 - Activity grid in CareerActivity: single column
 - Touch targets: all clickable elements 48px+ minimum
 - Command palette: full-width with reduced padding
 ### Breakpoint Strategy
 Use Tailwind responsive prefixes:
 - `lg:` for desktop (>1024px)
 - `md:` for tablet (>768px)
 - Default styles for mobile-first
 ### Key responsive classes:
 ```
 /* Card grid */
 grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-[16px]
 /* Sidebar visibility */
 hidden lg:flex lg:flex-col
 /* TopBar search */
 hidden md:block
 /* Activity grid */
 grid grid-cols-1 md:grid-cols-2
 /* Sidebar width */
 lg:w-[272px] lg:min-w-[272px]
 ```
 ---
 ## Task 20: Accessibility Audit
 ### Semantic HTML
 | Element | Tag | Notes |
 |---------|-----|-------|
 | TopBar | `<header>` | Fixed at top |
 | Sidebar | `<aside>` or `<nav>` | Navigation/info panel |
 | Main content | `<main>` | Card grid container |
 | Individual tiles | `<article>` | Self-contained content sections |
 | Tile sections | `<section>` | Within tiles (e.g., metric grid, bullet list) |
 | Command palette | `<dialog>` or `div role="dialog"` | Modal overlay |
 ### Keyboard Navigation
 | Key | Action |
 |-----|--------|
 | Tab | Move between interactive elements (tiles, buttons, links) |
 | Enter/Space | Expand tile items, flip KPI cards, select palette results |
 | Escape | Close expanded items, close command palette |
 | Ctrl+K | Open command palette |
 | Arrow Up/Down | Navigate command palette results |
 ### ARIA Attributes
 - **Command palette search**: `role="combobox"`, `aria-expanded`, `aria-controls="palette-results"`, `aria-autocomplete="list"`
 - **Palette results**: `role="listbox"`, each result `role="option"`
 - **Palette overlay**: `role="dialog"`, `aria-modal="true"`, `aria-label="Search records"`
 - **Expandable items**: `aria-expanded="true|false"` on trigger element
 - **KPI flip cards**: `aria-label` describing front/back content, `role="button"`, `tabIndex={0}`
 - **Status dots with text**: text labels present → dot can be `aria-hidden="true"`
 - **Alert flags**: `role="status"` or decorative (visible text is sufficient)
 - **Live region**: When palette opens/closes, announce via `aria-live="polite"` region
 - **TopBar session info**: `aria-label="Active session information"`
 ### Focus Management
 - **Command palette**: focus trap when open. Focus moves to search input on open. Returns to trigger element on close.
 - **Focus visible**: `focus-visible:ring-2 focus-visible:ring-[var(--accent)]/40` on all interactive elements (buttons, links, expandable items, KPI cards)
 - **Skip to content**: Optional "Skip to main content" link (only visible on focus)
 - **After tile expansion**: focus should remain on the trigger or move into expanded content
 ### `prefers-reduced-motion`
 Every animation must check:
 ```typescript
 const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches
 ```
 | Animation | Reduced Motion Behavior |
 |-----------|------------------------|
 | Dashboard entrance (topbar/sidebar/content) | Instant, no slide/fade |
 | Tile expansion | Instant height change (duration: 0) |
 | KPI flip | Instant content swap (no rotateY) |
 | Palette entrance | Instant show (no scale/translate) |
 | Status badge pulse | No animation |
 | Hover transitions | Can keep (very brief) or disable |
 ### Color Contrast Verification
 | Foreground | Background | Expected Ratio | Meets AA? |
 |------------|-----------|-----------------|-----------|
 | #0D6E6E (accent) | #FFFFFF (white) | ~5.5:1 | Yes |
 | #1A2B2A (primary) | #FFFFFF | ~15:1 | Yes |
 | #5B7A78 (secondary) | #FFFFFF | ~4.6:1 | Borderline — verify |
 | #8DA8A5 (tertiary) | #FFFFFF | ~3.0:1 | Fails for body text — use only for decorative/supplementary |
 | #0D6E6E (accent) | #F0F5F4 (bg) | ~4.8:1 | Yes for large text |
 **Important:** Tertiary text (#8DA8A5) does NOT meet AA for body text. Use only for supplementary labels, dates, and decorative text where the information is also conveyed elsewhere (e.g., a date that's also in the title). For standalone readable text, use secondary (#5B7A78) or primary (#1A2B2A).
 ---
 ## Task 21: Clean Up and Final Polish
 ### Components to Remove (only after confirming unused)
 - `src/components/PatientBanner.tsx` — replaced by TopBar
 - `src/components/ClinicalSidebar.tsx` — replaced by Sidebar
 - `src/components/Breadcrumb.tsx` — no longer needed (no view switching)
 - `src/components/MobileBottomNav.tsx` — may be replaced or redesigned
 - `src/components/PMRInterface.tsx` — replaced by DashboardLayout
 ### Views to Assess
 The `src/components/views/` directory contains the old view components. Some may be reusable:
 - **ConsultationsView.tsx**: Expanded entry rendering could be reused in CareerActivity expansion (Task 16). Check before removing.
 - **MedicationsView.tsx**: Prescribing history rendering could be reused in CoreSkills expansion. Check before removing.
 - **Other views**: If expansion (Task 16) doesn't reuse them, they can be removed.
 **Rule: Only remove files that are confirmed unused.** Run a grep for imports before deleting.
 ### Hooks to Remove
 - `src/hooks/useScrollCondensation.ts` — only used by PatientBanner. If PatientBanner is removed, this can go too.
 ### Verification Checklist
 - [ ] No dead imports (run `npm run lint` — ESLint catches unused imports)
 - [ ] No TypeScript errors (`npm run typecheck`)
 - [ ] Clean build (`npm run build`)
 - [ ] Bundle size reasonable (should be similar to or smaller than current ~417KB)
 - [ ] No console errors in dev mode
 ### Final Visual Review
 Open `http://localhost:5173` and compare against `References/GPSystemconcept.html`:
 - [ ] TopBar layout matches (brand, search, session)
 - [ ] Sidebar matches (person header, tags, alerts)
 - [ ] Card grid layout (2-column, full-width tiles span both)
 - [ ] Each tile's visual treatment matches concept
 - [ ] Shadows, borders, radius consistent
 - [ ] Typography: Elvaro Grotesque (not DM Sans)
 - [ ] Colors: teal accent (not NHS Blue)
 - [ ] Hover states work (card shadow lift, border color change)
 - [ ] Responsive: test at 1280px, 800px, 375px widths
@@ -1,542 +0,0 @@
 # Reference: Patient Banner + Sidebar + Navigation
 > Extracted from goal.md — Patient Banner, Left Sidebar, and Navigation sections. These are the persistent UI chrome that defines the clinical system feel.
 ---
 ## Patient Banner (Persistent Top Chrome)
 The patient banner is the most recognizable element of any PMR system. It spans the full viewport width above the main content area and provides constant demographic context.
 ### Full Banner (80px height, visible at top of page)
 ```
 +---------------------------------------------------------------------------+
 | CHARLWOOD, Andrew (Mr)                        Active (green dot)  Open to opps.    |
 | DOB: 14/02/1993  |  NHS No: 2211810  |  Norwich, NR1                     |
 | 07795553088  |  andy@charlwood.xyz    [Download CV] [Email] [LinkedIn]    |
 +---------------------------------------------------------------------------+
 ```
 ### Content Mapping
 | PMR Field | Actual Content | Notes |
 |-----------|---------------|-------|
 | Patient name | CHARLWOOD, Andrew (Mr) | Surname first, comma-separated — exactly as in clinical systems |
 | DOB | 14/02/1993 | DD/MM/YYYY format (UK clinical standard) |
 | NHS Number | 221 181 0 | Andy's GPhC registration number formatted like an NHS number (with spaces). Hover tooltip: "GPhC Registration Number" |
 | GP Practice | Self-Referred | Tongue-in-cheek — Andy referred himself to this record |
 | Address | Norwich, NR1 | Abbreviated postcode area |
 | Phone | 07795553088 | Clickable (tel: link) |
 | Email | andy@charlwood.xyz | Clickable (mailto: link) |
 | Status | Active (green dot) | Like the "registered" status in a PMR |
 | Badge | Open to opportunities | Styled as a clinical banner tag (blue background, white text, small pill shape) |
 ### Action Buttons (top right of banner)
 | Button | PMR Equivalent | Action |
 |--------|---------------|--------|
 | Download CV | Print Summary | Downloads PDF version of CV |
 | Email | Send Letter | Opens mailto: link |
 | LinkedIn | External Link | Opens LinkedIn profile in new tab |
 Buttons are styled as small outlined rectangles with NHS blue text and 1px NHS blue border, 4px radius. On hover: filled NHS blue background with white text.
 ### Condensed Banner (48px, sticky after scroll)
 When the user scrolls past 100px of content, the banner smoothly condenses to show only the essential information on a single line:
 ```
 CHARLWOOD, Andrew (Mr) | NHS No: 2211810 | Active (green dot)     [Download CV] [Email]
 ```
 The condensed banner sticks to the top of the viewport (`position: sticky`) with a `z-index` above the content area but below modals/alerts.
 ---
 ## Left Sidebar — Clinical Navigation
 The sidebar replicates the dark navigation panel found in EMIS Web and similar clinical systems. It provides category-based access to different "record views."
 **Width:** 220px (desktop), dark blue-gray (`#1E293B`) background.
 ### Navigation Items
 **IMPORTANT:** Sidebar labels use CV-friendly terms, NOT clinical jargon. The clinical metaphor lives in the LAYOUT of each view, not the labels.
 | Icon | Label | View Layout Style | Description |
 |------|-------|-------------------|-------------|
 | `ClipboardList` | Summary | Patient summary screen | Demographics, active items, current skills, recent role |
 | `FileText` | Experience | Consultation journal layout | Reverse-chronological journal of roles with H/E/P format |
 | `Pill` | Skills | Medications table layout | Skills table with proficiency dosages and frequency |
 | `AlertTriangle` | Achievements | Problems list layout | Challenges resolved and ongoing, with traffic lights |
 | `FlaskConical` | Projects | Investigation results layout | Project outcomes with status badges |
 | `FolderOpen` | Education | Attached documents layout | Certificates and qualifications |
 | `Send` | Contact | Referral form layout | Contact/message form styled as clinical referral |
 ### Styling
 - Each item: 44px height, 16px left padding, icon (18px, `lucide-react`) + label in [UI font] 500, 14px
 - Default state: white text at 70% opacity, transparent background
 - Hover state: white text at 100% opacity, background `rgba(255,255,255,0.08)`
 - Active state: white text at 100%, NHS blue left border (3px), background `rgba(255,255,255,0.12)`, label in [UI font] 600
 - A thin horizontal separator line (`1px solid rgba(255,255,255,0.1)`) appears between "Summary" and "Consultations" (separating the overview from the detail views)
 ### Sidebar Footer
 At the bottom of the sidebar, in small text ([UI font] 400, 11px, `#64748B`):
 ```
 Session: A.CHARLWOOD
 Logged in: [current time]
 ```
 This updates with the actual current time on mount, reinforcing the "logged in" metaphor.
 ### Sidebar Header
 At the top, above the navigation items, a small logo or system name:
 ```
 CareerRecord PMR
 v1.0.0
 ```
 In [UI font] 500, 13px, white at 50% opacity. Styled like clinical system branding that appears in the top-left of the navigation.
 ---
 ## Navigation
 ### Primary Navigation: Left Sidebar
 The sidebar is always visible on desktop — this is how clinical systems work. There is no floating nav, no hamburger menu on desktop, and no scroll-based navigation. The sidebar provides persistent, direct access to any record section.
 ### Keyboard Shortcuts
 | Sidebar Item | View Layout | Shortcut |
 |-------------|-------------|----------|
 | Summary | Patient summary | `Alt+1` |
 | Experience | Consultation journal | `Alt+2` |
 | Skills | Medications table | `Alt+3` |
 | Achievements | Problems list | `Alt+4` |
 | Projects | Investigation results | `Alt+5` |
 | Education | Attached documents | `Alt+6` |
 | Contact | Referral form | `Alt+7` |
 ### URL Hash Routing
 Each sidebar item updates the URL hash (`#summary`, `#experience`, `#skills`, `#achievements`, `#projects`, `#education`, `#contact`) for direct linking. On page load, the app reads the hash and navigates to the corresponding view.
 ### Breadcrumb
 A breadcrumb appears at the top of the main content area:
 ```
 Patient Record > Consultations > Interim Head, Population Health
 ```
 The breadcrumb updates as the user navigates deeper (e.g., expanding a consultation). Clicking "Patient Record" returns to Summary. Clicking "Consultations" collapses any expanded entries and shows the full journal list. The breadcrumb is styled in [UI font] 400, 13px, gray-400, with chevron separators.
 ### Secondary Navigation: Within-View Interactions
 - **Summary:** Clicking "View Full List" or "View Full Record" links navigates to the corresponding sidebar section.
 - **Consultations:** Expand/collapse individual entries. "Linked consultations" in Problems view can deep-link to specific consultation entries.
 - **Medications:** Category tabs (Active, Clinical, PRN) within the view. Click to expand prescribing history.
 - **Problems:** Click to expand. "Linked consultations" navigate to Consultations view.
 - **Investigations:** Click to expand results.
 - **Documents:** Click to expand preview.
 - **Referrals:** No sub-navigation.
 ---
 ## Design Guidance
 ### Aesthetic Direction
 **Clinical Luxury** — The patient banner and sidebar draw their *structure* from NHS clinical systems (PAS headers, EMIS Web navigation), but the *execution* is premium — refined typography, layered shadows, considered spacing. The clinical metaphor lives in the layout and conventions (surname-first, pipe separators, status dots); the luxury lives in the finish.
 - **Tone**: Precise, information-dense, and refined. Generous whitespace, layered shadows, and premium typography elevate what would otherwise be institutional UI. The clinical conventions (data density, pipe separators, monospaced identifiers, surname-first, green status dot) provide authentic texture.
 - **Typography Discipline**:
  - [UI font] at 600 weight for the patient name — the anchor element
  - Geist Mono for structured identifiers (NHS Number, DOB) — monospaced data feels like it came from a database
  - [UI font] at normal weight for demographic text
  - The pipe character `|` as a data separator is a deliberate clinical convention
 ### Design System Tokens
 | Token | Value | Usage |
 |-------|-------|-------|
 | NHS Blue | `#005EB8` | Primary accent, buttons, active states, borders |
 | Banner Background | `#334155` (slate-700) | Patient banner background — exact EMIS Web header shade |
 | Sidebar Background | `#1E293B` | Dark navigation panel |
 | Content Background | `#F5F7FA` | Main content area |
 | Border | `#E5E7EB` | 1px solid borders |
 | Border Radius | `4px` | All UI elements |
 | Green Status | `#22C55E` | Active status dot |
 | Font Text | [UI font] | All text content (Elvaro or Blumir — see CLAUDE.md) |
 | Font Data | `Geist Mono` | Monospaced identifiers |
 ### Key Design Decisions
 1. **220px Sidebar Width**: Fixed, always visible on desktop. No hamburger menu. This is how clinical systems work — persistent direct access.
 2. **Alt+1-7 Keyboard Shortcuts**: Each sidebar item has a keyboard shortcut for power users. Arrow key navigation and `/` for search focus.
 3. **CV-Friendly Navigation Labels**: Not clinical jargon. The metaphor lives in the layout, not the labels:
   - Summary (ClipboardList icon)
   - Experience (FileText)
   - Skills (Pill)
   - Achievements (AlertTriangle)
   - Projects (FlaskConical)
   - Education (FolderOpen)
   - Contact (Send)
 4. **Scroll-Triggered Banner Condensation**: 
   - Full banner: 80px height with three rows (name, demographics, contact/actions)
   - Condensed: 48px sticky after 100px scroll, single line
   - 200ms smooth transition
   - IntersectionObserver for performance
 5. **Navigation Item States**:
   - Default: white text at 70% opacity, transparent background
   - Hover: white text at 100%, background `rgba(255,255,255,0.08)`
   - Active: white text at 100%, 3px NHS blue left border, background `rgba(255,255,255,0.12)`, [UI font] 600 weight
 6. **Interface Materialization Animations** (PMRInterface):
   - Patient banner slides down (200ms ease-out)
   - Sidebar slides from left (250ms ease-out, 50ms delay)
   - Content fades in (300ms, 100ms delay after sidebar)
   - View switching is INSTANT — no crossfade or slide between views
 7. **Mobile Adaptations**:
   - Banner collapses to minimal: `CHARLWOOD, A (Mr) | 2211810 | dot`
   - Overflow menu for actions
   - Bottom nav bar (56px height with safe area padding)
   - Sidebar becomes icon-only (56px) with tooltips on tablet
 ### Implementation Patterns
 #### PatientBanner Component Structure
 ```tsx
 // Main container with IntersectionObserver sentinel
 <>
  <div ref={sentinelRef} className="h-0 w-full absolute top-0" aria-hidden="true" />
  <header
    className={`
      sticky top-0 z-40 w-full
      bg-pmr-banner border-b border-slate-600
      transition-all duration-200 ease-out
      ${shouldCondense ? 'h-12' : 'h-20'}
    `}
    role="banner"
  >
    {shouldCondense ? <CondensedBanner /> : <FullBanner />}
  </header>
 </>
 ```
 #### useScrollCondensation Hook
 ```tsx
 export function useScrollCondensation(options: UseScrollCondensationOptions = {}) {
  const { threshold = 100 } = options
  const [isCondensed, setIsCondensed] = useState(false)
  const sentinelRef = useRef<HTMLDivElement>(null)
  useEffect(() => {
    const sentinel = sentinelRef.current
    if (!sentinel) return
    const observer = new IntersectionObserver(
      (entries) => {
        const [entry] = entries
        setIsCondensed(!entry.isIntersecting)
      },
      {
        rootMargin: `-${threshold}px 0px 0px 0px`,
        threshold: 0,
      }
    )
    observer.observe(sentinel)
    return () => observer.disconnect()
  }, [threshold])
  return { isCondensed, sentinelRef }
 }
 ```
 #### ClinicalSidebar Navigation Items
 ```tsx
 const navItems: NavItem[] = [
  { id: 'summary', label: 'Summary', icon: <ClipboardList size={18} /> },
  { id: 'consultations', label: 'Experience', icon: <FileText size={18} /> },
  { id: 'medications', label: 'Skills', icon: <Pill size={18} /> },
  { id: 'problems', label: 'Achievements', icon: <AlertTriangle size={18} /> },
  { id: 'investigations', label: 'Projects', icon: <FlaskConical size={18} /> },
  { id: 'documents', label: 'Education', icon: <FolderOpen size={18} /> },
  { id: 'referrals', label: 'Contact', icon: <Send size={18} /> },
 ]
 // Item styling pattern
 <button
  className={`
    w-full h-[44px] px-4 flex items-center gap-3
    font-ui text-[14px] font-medium
    transition-all duration-150
    ${isActive 
      ? 'text-white bg-white/[0.12] border-l-[3px] border-pmr-nhsblue font-semibold' 
      : 'text-white/70 hover:text-white hover:bg-white/[0.08] border-l-[3px] border-transparent'
    }
  `}
 >
  <span className="w-[18px] h-[18px]">{icon}</span>
  <span>{label}</span>
 </button>
 ```
 #### PMRInterface Layout
 ```tsx
 // Main layout structure
 <div className="flex h-screen overflow-hidden">
  {/* Fixed sidebar */}
  <ClinicalSidebar 
    activeView={activeView} 
    onViewChange={handleViewChange}
    isTablet={isTablet}
  />
  {/* Main content area */}
  <div className="flex-1 flex flex-col min-w-0">
    {/* Sticky patient banner */}
    <PatientBanner isMobile={isMobile} isTablet={isTablet} />
    {/* Scrollable content */}
    <main className="flex-1 overflow-y-auto bg-pmr-content p-6">
      {/* View content renders here */}
    </main>
  </div>
 </div>
 ```
 #### Action Button Pattern
 ```tsx
 // Outlined buttons that fill on hover
 <button
  className="
    px-3 py-1.5 
    text-pmr-nhsblue text-sm font-medium
    border border-pmr-nhsblue rounded-[4px]
    transition-all duration-150
    hover:bg-pmr-nhsblue hover:text-white
  "
 >
  Download CV
 </button>
 ```
 ### Mobile Considerations
 - **Banner**: Shows only name (truncated), NHS number, and status dot
 - **Overflow Menu**: Three-dot menu reveals hidden actions (Download CV, Email, LinkedIn)
 - **Bottom Nav**: 56px fixed bottom bar with safe area padding for notched devices
 - **Touch Targets**: All interactive elements minimum 44px for accessibility
 ### Accessibility Requirements
 - All navigation items keyboard accessible
 - Active state has visual indicator (NHS blue left border)
 - Reduced motion support: disable animations when `prefers-reduced-motion` is set
 - Focus visible states on all interactive elements
 - ARIA labels for icon-only buttons
 ---
 ## Additional Implementation Notes (from Agent Analysis)
 ### PatientBanner Component Refinements
 #### Animation Improvements
 - Replace raw CSS `transition-all duration-200` with Framer Motion's `AnimatePresence` and `motion.div` for smoother layout animations
 - Enable cross-fade content between full and condensed banner states
 - Use `motion.div` with `initial`, `animate`, `exit` props for content swapping
 #### Badge Styling
 - Current: `rounded-sm` — Change to true pill shape: `rounded-full` for "Open to opportunities" badge
 - Blue pill shape per NHS design system
 #### NHS Number Tooltip
 - Replace native `title` attribute with custom styled tooltip
 - Use Framer Motion for controlled hover reveal
 - Tooltip text: "GPhC Registration Number"
 #### Mobile Overflow Menu
 - Current: raw `useState` toggle with no animation
 - Use `AnimatePresence` for enter/exit animations
 - Three-dot menu button triggers slide-down panel
 #### Action Button Hover States
 ```tsx
 // Outlined buttons with NHS blue that fill on hover
 className="
  px-3 py-1.5 
  text-[#005EB8] text-sm font-medium
  border border-[#005EB8] rounded-[4px]
  transition-all duration-150
  hover:bg-[#005EB8] hover:text-white
 "
 ```
 ### ClinicalSidebar Keyboard Navigation
 #### Alt+1-7 Shortcuts Implementation
 ```tsx
 useEffect(() => {
  const handleKeyDown = (e: KeyboardEvent) => {
    if (e.altKey && e.key >= '1' && e.key <= '7') {
      const index = parseInt(e.key) - 1
      const view = navItems[index]
      if (view) onViewChange(view.id)
    }
    if (e.key === '/') {
      e.preventDefault()
      searchInputRef.current?.focus()
    }
  }
  window.addEventListener('keydown', handleKeyDown)
  return () => window.removeEventListener('keydown', handleKeyDown)
 }, [onViewChange])
 ```
 #### Arrow Key Navigation
 - Up/Down arrows navigate between sidebar items
 - Focus trap within sidebar when using keyboard
 - Visual focus indicator matches hover state
 ### PMRInterface Layout Structure
 #### Materialization Animation Sequence
 ```tsx
 // Staggered entrance animations
 const containerVariants = {
  hidden: { opacity: 0 },
  visible: {
    opacity: 1,
    transition: {
      staggerChildren: 0.05,
      delayChildren: 0.1
    }
  }
 }
 // Patient banner: slides down (200ms ease-out)
 const bannerVariants = {
  hidden: { y: -80, opacity: 0 },
  visible: { 
    y: 0, 
    opacity: 1,
    transition: { duration: 0.2, ease: 'easeOut' }
  }
 }
 // Sidebar: slides from left (250ms ease-out, 50ms delay)
 const sidebarVariants = {
  hidden: { x: -220, opacity: 0 },
  visible: { 
    x: 0, 
    opacity: 1,
    transition: { duration: 0.25, ease: 'easeOut', delay: 0.05 }
  }
 }
 // Content: fades in (300ms, 100ms delay after sidebar)
 const contentVariants = {
  hidden: { opacity: 0 },
  visible: { 
    opacity: 1,
    transition: { duration: 0.3, delay: 0.15 }
  }
 }
 ```
 #### View Switching Performance
 - Views switch INSTANTLY — no crossfade or slide between views
 - Content updates immediately on hash change
 - No transition/animation between different view components
 - Only initial materialization has animation
 ### Breadcrumb Component Pattern
 ```tsx
 interface BreadcrumbProps {
  currentView: ViewId
  expandedItem?: { name: string; type: string }
 }
 // View name mapping (CV-friendly names)
 const viewLabels: Record<ViewId, string> = {
  summary: 'Summary',
  consultations: 'Experience',
  medications: 'Skills',
  problems: 'Achievements',
  investigations: 'Projects',
  documents: 'Education',
  referrals: 'Contact'
 }
 // Styling: [UI font] 400, 13px, gray-400
 // Chevron separators using Lucide ChevronRight
 // Clickable links navigate back
 ```
 ### Mobile Bottom Navigation
 ```tsx
 // 56px height with safe area padding
 <div className="fixed bottom-0 left-0 right-0 h-14 bg-pmr-sidebar border-t border-slate-700 pb-safe">
  <div className="flex justify-around items-center h-full px-4">
    {navItems.map((item) => (
      <button
        key={item.id}
        className={`
          flex flex-col items-center gap-1
          ${isActive ? 'text-pmr-nhsblue' : 'text-white/60'}
        `}
      >
        {item.icon}
        <span className="text-[10px]">{item.label}</span>
      </button>
    ))}
  </div>
 </div>
 ```
 ### TypeScript Types Reference
 ```tsx
 // ViewId type for navigation
 export type ViewId = 
  | 'summary' 
  | 'consultations' 
  | 'medications' 
  | 'problems' 
  | 'investigations' 
  | 'documents' 
  | 'referrals'
 // Patient data structure
 export interface Patient {
  name: string              // 'CHARLWOOD, Andrew (Mr)'
  displayName: string       // 'Andrew Charlwood'
  dob: string              // '14/02/1993'
  nhsNumber: string        // '221 181 0'
  nhsNumberTooltip: string // 'GPhC Registration Number'
  address: string          // 'Norwich, NR1'
  phone: string
  email: string
  linkedin: string
  status: 'Active' | 'Inactive'
  badge?: string           // 'Open to opportunities'
 }
 ```
@@ -1,207 +0,0 @@
 # Reference: Consultations View (= Experience)
 > Extracted from goal.md — Consultations View section. Each role is a "consultation entry" in a reverse-chronological journal.
 ---
 ## Overview
 This is the core content view and the most detailed section. Each role is a "consultation entry" in a reverse-chronological journal.
 ## Journal List Layout
 Entries are stacked vertically, most recent at top. Each entry has a collapsed state and an expanded state.
 ### Collapsed Entry
 ```
 +------------------------------------------------------------------+
 | (green dot) 14 May 2025 | NHS Norfolk & Waveney ICB              |
 |   Interim Head, Population Health & Data Analysis                 |
 |   Key: 14.6M efficiency programme identified and delivered        |
 |                                                    [v Expand]     |
 +------------------------------------------------------------------+
 ```
 - Date in Geist Mono, 13px, gray-500 (left-aligned)
 - Organization in [UI font] 400, 13px, NHS blue
 - Role title in [UI font] 600, 15px, gray-900
 - Key coded entry: a single-line summary of the most notable achievement, prefixed with "Key:" in [UI font] 500, gray-500
 - Expand chevron button (right-aligned)
 - Status dot: green for current roles, gray for historical
 ### Expanded Entry (click to expand)
 ```
 +------------------------------------------------------------------+
 | (green dot) 14 May 2025 | NHS Norfolk & Waveney ICB    [^ Close] |
 |   Interim Head, Population Health & Data Analysis                 |
 |   Duration: May 2025 - Nov 2025                                  |
 |                                                                    |
 |   HISTORY                                                         |
 |   Returned to substantive Deputy Head role following              |
 |   commencement of ICB-wide organisational consultation.           |
 |   Led strategic delivery of population health initiatives         |
 |   and data-driven medicines optimisation across Norfolk &         |
 |   Waveney ICS, reporting to Associate Director of Pharmacy.       |
 |                                                                    |
 |   EXAMINATION                                                     |
 |   - Identified 14.6M efficiency programme through                 |
 |     comprehensive data analysis                                    |
 |   - Built Python-based switching algorithm: 14,000 patients       |
 |     identified, 2.6M annual savings                               |
 |   - Automated incentive scheme analysis: 50% reduction            |
 |     in targeted prescribing within 2 months                       |
 |                                                                    |
 |   PLAN                                                            |
 |   - Achieved over-target performance by October 2025              |
 |   - 2M on target for delivery this financial year                 |
 |   - Presented to CMO bimonthly with evidence-based                |
 |     recommendations                                                |
 |   - Led transformation to patient-level SQL analytics             |
 |                                                                    |
 |   CODED ENTRIES                                                   |
 |   [EFF001] Efficiency programme: 14.6M identified                 |
 |   [ALG001] Algorithm: 14,000 patients, 2.6M savings              |
 |   [AUT001] Automation: 50% prescribing reduction in 2mo          |
 |   [SQL001] Data transformation: practice->patient level           |
 +------------------------------------------------------------------+
 ```
 ## The History / Examination / Plan Structure
 This is a direct mapping from the clinical consultation format (SOAP notes) to career content:
 | Clinical Term | CV Mapping | What Goes Here |
 |--------------|------------|----------------|
 | **History** | Context / Background | Why this role existed, what situation Andy walked into, reporting lines |
 | **Examination** | Analysis / Findings | What Andy discovered, built, or analyzed — the technical and analytical work |
 | **Plan** | Outcomes / Delivery | What was achieved, what impact was measured, what's ongoing |
 Section headers ("HISTORY", "EXAMINATION", "PLAN") are styled in [UI font] 600, 12px, uppercase, letter-spacing 0.05em, gray-400 — styled like clinical consultation record section dividers.
 ## Coded Entries
 At the bottom of each expanded consultation, "coded entries" appear — short-form tagged achievements with bracket codes. These mimic SNOMED CT / Read codes used in clinical systems. The codes are fictional but consistent (EFF = efficiency, ALG = algorithm, AUT = automation, SQL = data, etc.). Styled in Geist Mono, 12px, gray-500, with the code in brackets and the description after.
 ## Color Coding by Employer
 Each consultation entry has a subtle left border (3px) indicating the employer:
 - NHS Norfolk & Waveney ICB: NHS blue (`#005EB8`)
 - Tesco PLC: Teal (`#00897B`)
 This visual grouping helps the user quickly scan which organization each entry belongs to, without reading the text.
 ## Full Consultation Journal (all roles)
 | Date | Organization | Role | Key Coded Entry |
 |------|-------------|------|-----------------|
 | May 2025 | NHS N&W ICB | Interim Head, Pop. Health & Data Analysis | [EFF001] 14.6M efficiency programme |
 | Jul 2024 | NHS N&W ICB | Deputy Head, Pop. Health & Data Analysis | [BUD001] 220M budget management |
 | May 2022 | NHS N&W ICB | High-Cost Drugs & Interface Pharmacist | [AUT002] Blueteq automation: 70% reduction |
 | Nov 2017 | Tesco PLC | Pharmacy Manager | [INN001] Asthma screening: ~1M national revenue |
 | Aug 2016 | Tesco PLC | Duty Pharmacy Manager | [REG001] GPhC registration commenced |
 ## Animation Behavior
 - **Expand/collapse:** Height animation, 200ms, ease-out. No opacity fade — the content simply grows/shrinks.
 - Only one consultation can be expanded at a time. Expanding a new entry collapses the previous one.
 - The expand chevron rotates 180 degrees (pointing up when expanded).
 ---
 ## Design Guidance
 ### Aesthetic Direction
 **Clinical Luxury.** The structure and conventions of a clinical consultation journal — reverse-chronological entries, H/E/P format, coded entries, traffic-light status indicators — executed with premium refinement. Refined shadows, generous spacing, considered typography. Light-mode only.
 **What makes this unforgettable:** The History / Examination / Plan structure maps perfectly to Context / Analysis / Outcome. A clinician seeing this will immediately recognize the consultation journal format. A recruiter gets highly structured, scannable career data. The accordion behavior, coded entries, and status indicators draw from clinical software patterns — but the execution feels polished and premium, not institutional.
 ### Key Design Decisions
 1. **SOAP Notes Format (H/E/P Structure)**
   - Maps clinical consultation format to career content:
     - **History** → Context / Background (why the role existed, reporting lines)
     - **Examination** → Analysis / Findings (what was discovered, built, analyzed)
     - **Plan** → Outcomes / Delivery (what was achieved, impact measured)
   - Section headers styled as clinical system dividers: [UI font] 600, 12px, uppercase, letter-spacing 0.05em, gray-400
 2. **Height-Only Expand Animation (200ms)**
   - No opacity fade on content—content simply grows/shrinks
   - Duration: 200ms with ease-out timing
   - Only one entry expanded at a time
   - Chevron rotates 180 degrees when expanded
 3. **Color-Coded Left Border (3px)**
   - NHS Norfolk & Waveney ICB: NHS blue (`#005EB8`)
   - Tesco PLC: Teal (`#00897B`)
 4. **Typography System**
   - [UI font] for text content (Elvaro or Blumir — see CLAUDE.md)
   - Geist Mono for dates, codes, timestamps
   - Border radius: 4px throughout
   - Borders: 1px solid #E5E7EB
 ### Implementation Patterns
 **ConsultationEntry Type:**
 ```typescript
 interface ConsultationEntry {
  id: string
  date: string              // e.g., "14 May 2025"
  organization: string      // e.g., "NHS Norfolk & Waveney ICB"
  role: string              // e.g., "Interim Head, Population Health & Data Analysis"
  duration: string          // e.g., "May 2025 - Nov 2025"
  isCurrent: boolean        // Green dot if true, gray if false
  borderColor: '#005EB8' | '#00897B'
  keyAchievement: { code: string; description: string }
  history: string[]         // Paragraphs for HISTORY section
  examination: string[]     // Bullet points for EXAMINATION section
  plan: string[]            // Bullet points for PLAN section
  codedEntries: { code: string; description: string }[]
 }
 ```
 **Animation Pattern:**
 ```typescript
 // Height-only animation via Framer Motion
 <motion.div
  initial={false}
  animate={{ height: isExpanded ? 'auto' : 0 }}
  transition={{ duration: 0.2, ease: 'easeOut' }}
  className="overflow-hidden"
 >
  {/* Expanded content */}
 </motion.div>
 // Chevron rotation
 <motion.div
  animate={{ rotate: isExpanded ? 180 : 0 }}
  transition={{ duration: 0.2 }}
 >
  <ChevronDown />
 </motion.div>
 ```
 **Section Header Pattern:**
 ```tsx
 <h4 className="font-sans text-xs font-semibold uppercase tracking-wider text-gray-400">
  History
 </h4>
 ```
 **Coded Entry Pattern:**
 ```tsx
 <span className="font-mono text-xs text-gray-500">
  [EFF001] Efficiency programme: £14.6M identified
 </span>
 ```
 **Status Dot Pattern:**
 ```tsx
 <div className={cn(
  "w-2 h-2 rounded-full",
  isCurrent ? "bg-green-500" : "bg-gray-400"
 )} />
 ```
@@ -1,158 +0,0 @@
 # Reference: Visual Design System
 > The SINGLE SOURCE OF TRUTH for colors, typography, spacing, surfaces, and motion throughout the Clinical Record PMR. Follows the **Clinical Luxury** direction in CLAUDE.md.
 ---
 ## Design Philosophy
 A **premium portfolio** that uses the structure and metaphor of a GP clinical system — not a faithful NHS software clone. Real clinical systems (EMIS Web, SystmOne) are dense, border-heavy, and purely functional. We keep their *structure* (patient banner, sidebar navigation, record sections, tables, status indicators) but elevate the *execution* with refined typography, atmospheric depth, and considered whitespace.
 The goal is contrast: clinical precision married to luxury refinement. The "wow" comes from recognizing the clinical metaphor while being surprised by how good it looks.
 ---
 ## Color Palette
 **Light-mode only.** The metaphor demands it — clinical systems operate under bright consulting room lights. No dark mode.
 **Backgrounds:**
 - Main content area: `#F5F7FA` — cool light gray base. Add atmospheric depth — a faint noise/grain texture overlay or a subtle warm tint — so the surface feels like quality paper, not a flat spreadsheet.
 - Card/panel surfaces: `#FFFFFF` — clean white. Cards float above the content surface via layered shadows (see Surfaces section).
 - Sidebar: `#1E293B` — dark blue-gray. The gravitas anchor — dark chrome that reads as serious software.
 - Patient banner: `#334155` — lighter blue-gray with white text. Subtle drop shadow below to separate from content.
 - Login screen background: `#1E293B` — same as sidebar. Carries through to PMR entrance seamlessly.
 **Text:**
 - Primary: `#111827` (gray-900) — near-black for maximum readability
 - Secondary: `#6B7280` (gray-500) — labels, metadata, supporting text
 - Muted: `#94A3B8` (slate-400) — timestamps, tertiary info
 - On dark surfaces: `#FFFFFF` (white primary), `#94A3B8` (slate-400 secondary)
 **Accent and status colors:**
 - **NHS Blue `#005EB8`** — THE accent color. Buttons, active nav states, links, interactive elements. The actual NHS brand blue — instantly recognizable, the strongest signal of the clinical metaphor. Use it confidently but not everywhere.
 - Green `#22C55E` — active/resolved/current states. Status dots, current role indicators.
 - Amber `#F59E0B` — alerts, in-progress items. The clinical alert banner background.
 - Red `#EF4444` — urgent/critical. Used very sparingly — only genuinely important items.
 - Gray `#6B7280` — inactive/historical items.
 **Traffic light system (used throughout):**
 - Green dot: Active / Resolved / Current
 - Amber dot: In progress / Alert / Notable
 - Red dot: Urgent / Critical (rare)
 - Gray dot: Inactive / Historical
 - **Always paired with text labels.** Color is never the sole signifier (WCAG compliance).
 ---
 ## Typography
 See Claude.md for info on font choice. Typography carries the premium feel. The font choice must feel *designed* — intentional and distinctive — while reading cleanly at small clinical-system sizes (11-14px).
 **Type scale (tight, clinical):**
 - Patient banner name: [UI font] 600, 20px
 - Patient banner details: [UI font] 400, 14px
 - Sidebar navigation labels: [UI font] 500, 14px, white
 - Section headings (main area): [UI font] 600, 15-18px
 - Consultation entry titles: [UI font] 600, 15-16px
 - Body text / descriptions: [UI font] 400, 13-14px, line-height 1.6
 - Table headers: [UI font] 600, 12-13px, uppercase, letter-spacing 0.03-0.05em
 - Table data cells: [UI font] 400, 13-14px
 - Labels / metadata: [UI font] 500, 11-12px
 - Coded entries / data values: Geist Mono 400, 12-13px
 - Clinical codes (SNOMED-style): Geist Mono 400, 11-12px, gray-400
 - Timestamps: Geist Mono 400, 11-12px
 - Alert banner text: [UI font] 500, 14px
 **Hierarchy through weight, not size.** Use 400/500/600/700 weight variations within a narrow size range. Bold section headers, medium labels, regular body. This keeps the clinical density while creating clear, scannable hierarchy.
 ---
 ## Spacing and Layout
 More generous than real clinical software. The clinical metaphor provides structure; the extra breathing room provides luxury.
 - **Sidebar width:** 220px (fixed, desktop). Collapses to 56px (icon-only) on tablet.
 - **Patient banner height:** 80px (full), 48px (condensed/sticky)
 - **Main content max-width:** None — fills available space between sidebar and viewport edge.
 - **Main content padding:** 24px (desktop), 16px (mobile)
 - **Card padding:** 16-24px — more generous than real clinical systems. Content should breathe inside cards.
 - **Border radius:** 4px default for cards, inputs, buttons (clinical precision). 12px exception for the login card only.
 - **Table row height:** 40px
 - **Section spacing:** 24px between content blocks
 - **Base unit:** 4px grid — applied more generously than in real clinical systems
 ---
 ## Surfaces & Depth
 Our biggest departure from real clinical software. Real systems are flat and border-heavy; we use **shadows and layering** for depth — while keeping borders where they're authentically clinical (tables, input fields).
 **Cards:**
 - Border: `1px solid #E5E7EB` (keep the clinical border — it's authentic)
 - Shadow: Multi-layered — `0 1px 2px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.03)`. Gentle float, not Material Design dramatic.
 - Border-radius: `4px`
 - Hover: Cards may lift very slightly — 1-2px translateY + shadow deepens to `0 2px 4px rgba(0,0,0,0.06), 0 8px 16px rgba(0,0,0,0.04)`. Restrained, not bouncy.
 - Card headers: Light gray `#F9FAFB` background with `1px solid #E5E7EB` bottom border. Uppercase title in [UI font] 600, 12-13px. The most "clinical" element — keep it precise.
 **Tables:**
 - Full `<table>` markup with styled headers — where clinical authenticity lives.
 - Table headers: `#F9FAFB` background, `1px solid #E5E7EB` borders.
 - Alternating rows: `#FFFFFF` / `#F9FAFB` — subtle but scannable.
 - Row hover: `#EFF6FF` background (blue tint).
 - Cell borders: `1px solid #E5E7EB` — keep full borders on tables. Authentic.
 **Sidebar:**
 - Background: `#1E293B`
 - Right edge: `1px solid #334155` + optional very subtle glow/shadow where it meets the content area.
 - The sidebar should feel solid and authoritative against the lighter content.
 **Patient banner:**
 - Background: `#334155`
 - Bottom: Subtle drop shadow `0 2px 8px rgba(0,0,0,0.12)` to separate from content below.
 - Bottom border: `1px solid #475569`
 **Input fields:**
 - Border: `1px solid #D1D5DB`, `4px` radius, `#FFFFFF` background, `8px 12px` padding
 - Focus: NHS blue border + `box-shadow: 0 0 0 3px rgba(0,94,184,0.15)` — refined focus ring.
 ---
 ## Motion
 Motion should feel **considered and premium** — never flashy, never gratuitous. Every animation has a purpose: to orient the user, to reward interaction, or to create a moment of polish.
 **PMR entrance sequence (login → PMR transition):**
 - Patient banner slides down: 200ms, ease-out
 - Sidebar slides from left: 250ms, ease-out, 50ms delay
 - Content fades in: 300ms, 100ms delay after sidebar
 - The staggered materialization — the most impactful animation.
 **Navigation switches:** Instant content swap. No crossfade, no slide. This preserves the "software application" feel — clinical systems switch tabs instantly.
 **Expandable content:** Height-only animation, 200ms, `ease-out`. Content grows/shrinks — no opacity fade.
 **Clinical alert entrance:** Spring animation (Framer Motion `type: "spring"`, moderate damping). The one element that *demands attention* — the spring overshoot is earned here.
 **Alert acknowledge:** Warning icon cross-fades to green checkmark (200ms) → hold 200ms → alert height collapses (200ms ease-out).
 **Hover states:** Subtle and immediate. Background-color transitions at 100ms. Card lifts are 1-2px max with shadow deepening. Think: OS-level responsiveness, not playful bouncing.
 **Login typing:** Character-by-character reveal at a natural pace: 80ms/char for username, 60ms/dot for password. Cursor blink at 530ms. After typing completes, "Log In" button becomes interactive — user clicks to proceed (not auto-triggered).
 **Patient banner condensation:** Height transition (200ms) from 80px → 48px as user scrolls past 100px. Buttery smooth, no jank.
 **`prefers-reduced-motion`:** All animations skip to final state instantly. Typing completes immediately. Alert appears without slide. Expand/collapse is instant. No exceptions.
 ---
 ## What Makes This Design Distinctive
 The design stands on **contrasts**:
 - Dark, serious sidebar next to warm, airy content
 - Small, precise monospace data in generous whitespace fields
 - NHS blue punching through an otherwise muted, restrained palette
 - Clinical structure (tables, status dots, coded entries) executed with luxury refinement (shadows, spacing, typography)
 - The boot → ECG → login theatrical sequence, then suddenly: a premium application
 If any component could be dropped into a generic SaaS dashboard without looking out of place, it needs more character.
@@ -1,163 +0,0 @@
 # Reference: Interactions, Responsive Design, and Accessibility
 > Extracted from goal.md — Interactions, Responsive Strategy, and Accessibility sections.
 ---
 ## Interactions and Micro-interactions
 ### Sidebar Navigation
 - Clicking a sidebar item instantly swaps the main content area. No crossfade, no transition — just an immediate swap. This matches clinical system behavior exactly: navigation is instant.
 - The active sidebar item updates its left border (3px, NHS blue) and background tint simultaneously, with no animation (instant state change).
 ### Consultation Expand / Collapse
 - Clicking a consultation entry toggles between collapsed and expanded states.
 - The expand animation: height grows from 0 to content height over 200ms, ease-out. Content opacity transitions from 0 to 1 over the same duration.
 - Only one consultation can be expanded at a time. Expanding a new entry collapses the previous one.
 - The expand chevron rotates 180 degrees (pointing up when expanded).
 ### Medication Row Hover
 - Hovering a medication table row changes its background to `#EFF6FF` (subtle blue tint).
 - No transform, no elevation change. Just color.
 ### Table Column Sorting
 - Clicking a table column header sorts by that column. An arrow indicator (up/down) appears in the header.
 - Clicking the same header again reverses sort direction.
 - Sorting is instant (no animation on row reordering).
 ### Patient Banner Scroll Condensation
 - As the user scrolls past 100px of content, the patient banner smoothly transitions from full (80px) to condensed (48px) over 200ms.
 - The condensed banner shows only: name, NHS number, status dot, and action buttons.
 - Scrolling back to top restores the full banner.
 - Uses `position: sticky` with an `IntersectionObserver` to trigger the condensation.
 ### Alert Acknowledge
 - Clicking "Acknowledge" on a clinical alert:
  1. The warning icon cross-fades to a green checkmark (200ms)
  2. After a 200ms hold, the alert's height animates to 0 (200ms, ease-out)
  3. Content below shifts upward to fill the space (same 200ms timing)
 ### Search
 - A search input in the sidebar header ("Search record...") provides fuzzy matching across all PMR sections.
 - Typing shows a dropdown of results grouped by section (Consultations, Medications, Problems, etc.).
 - Each result shows the section icon, the matching text, and a relevance indicator.
 - Pressing Enter or clicking a result navigates to that section with the matching item highlighted/expanded.
 - Implementation: fuse.js for fuzzy search across a pre-built index of all content.
 ### Context Menus
 - Right-clicking (desktop) or long-pressing (mobile) on certain elements reveals a context menu:
  - On a consultation entry: "Expand", "Copy to clipboard", "View coded entries"
  - On a medication row: "View prescribing history", "Copy to clipboard"
  - On a problem entry: "View linked consultations", "Copy to clipboard"
 - Context menus styled: white background, `1px solid #E5E7EB` border, 4px radius, `box-shadow: 0 4px 12px rgba(0,0,0,0.1)`. Items in [UI font] 400, 14px, 36px row height.
 ### Login Screen Typing
 - The username types character-by-character at a natural reading pace (80ms per character).
 - The password dots appear at a deliberate pace (60ms per dot).
 - A blinking cursor appears in the active field (530ms blink interval).
 - After typing completes, the "Log In" button becomes clearly interactive (full opacity, hover state). The user clicks it to proceed — this is NOT auto-triggered.
 - On click, the button shows a brief pressed state before the interface materializes.
 ---
 ## Responsive Strategy
 ### Desktop (>1024px)
 The full PMR experience. This is the design's primary target — clinical systems are desktop applications.
 - Sidebar: 220px, always visible, dark blue-gray
 - Patient banner: full width, 80px height, condensing to 48px on scroll
 - Main content: fills remaining width (no max-width constraint)
 - Tables: full column display, alternating row colors, sort controls
 - Consultations: full History/Examination/Plan expanded view
 - Search: integrated in sidebar header
 ### Tablet (768-1024px)
 Sidebar collapses to icon-only mode (56px width). Hovering or tapping an icon shows the label as a tooltip.
 - Patient banner: condensed to single-line format always (no full/condensed toggle)
 - Main content: nearly full width
 - Tables: may horizontally scroll if columns exceed available width
 - Context menus: triggered by long-press instead of right-click
 ### Mobile (<768px)
 The sidebar becomes a **bottom navigation bar** with 7 icon buttons.
 **Bottom nav layout:**
 ```
 [Summary] [Consult] [Meds] [Problems] [Invest] [Docs] [Refer]
 ```
 Each icon from Lucide, 20px, with the active item highlighted in NHS blue with a label below. Height: 56px with safe area padding.
 **Patient banner on mobile:** Minimal top bar: `CHARLWOOD, A (Mr) | 2211810 | (dot)` — action buttons collapse into "..." overflow menu.
 **Content adaptations:**
 - Tables switch to card layout: each row becomes a small card with fields stacked vertically
 - Consultation entries: tap-to-expand pattern with larger tap targets (48px minimum height)
 - Medications: table becomes stacked card list
 - Referral form: full-width inputs, generous touch targets
 - Search: moves to top of each view as a search bar
 **Back navigation:** Each view has a back arrow returning to Summary.
 ### Breakpoint Summary
 | Element | Desktop (>1024) | Tablet (768-1024) | Mobile (<768) |
 |---------|-----------------|-------------------|---------------|
 | Sidebar | 220px, full labels | 56px, icons only | Bottom nav bar |
 | Patient banner | 80px full / 48px sticky | 48px always | Minimal top bar |
 | Tables | Full columns, horizontal | Scroll if needed | Card layout (stacked) |
 | Search | Sidebar header | Sidebar header | Top of each view |
 | Context menus | Right-click | Long-press | Long-press |
 ---
 ## Accessibility
 ### Semantic HTML
 - Sidebar: `<nav role="navigation" aria-label="Clinical record navigation">` with `<ul>` and `<li>` items. Active item uses `aria-current="page"`.
 - Patient banner: `<header role="banner">` containing patient demographics.
 - Main content area: `<main>` element with `aria-label` matching the current view name.
 - Tables: Proper `<table>`, `<thead>`, `<th>`, `<tbody>`, `<tr>`, `<td>` markup. Column headers use `scope="col"`.
 - Consultation entries: `<article>` elements with `<button>` for expand/collapse, `aria-expanded` attribute.
 ### Keyboard Navigation
 - `Tab` moves between: sidebar items, patient banner buttons, main content interactive elements
 - `ArrowUp` / `ArrowDown` within the sidebar moves between navigation items (roving tabindex)
 - `Enter` / `Space` on sidebar items activates that view
 - `Enter` / `Space` on consultation entries toggles expand/collapse
 - `Alt+1` through `Alt+7` directly activates sidebar items
 - `Escape` closes expanded items, context menus, and search dropdown
 - Search input focusable with `/` key
 ### Screen Reader Experience
 1. After login, announces: "Patient Record for Charlwood, Andrew. Summary view."
 2. Clinical alert announced via `role="alert"`: full alert text
 3. Tables announced with column headers
 4. Expandable items announce expanded/collapsed state
 5. Breadcrumb uses `<nav aria-label="Breadcrumb">`
 ### Alert Accessibility
 - Uses `role="alert"` and `aria-live="assertive"`
 - Acknowledge button: `aria-label="Acknowledge clinical alert"`
 - Removal is smooth (element removes from accessibility tree)
 ### Focus Management
 - After login: focus moves to first sidebar item (Summary)
 - After navigating to new view: focus moves to first heading in main content
 - After expanding consultation: focus moves to HISTORY heading
 - After closing context menu: focus returns to trigger element
 - After acknowledging alert: focus moves to main content first interactive element
 ### Color and Contrast
 - All text meets WCAG 2.1 AA contrast requirements
 - Traffic lights never sole communicator — always with text labels
 - NHS blue on white: ~7.3:1 contrast ratio
 - Amber alert text on amber bg: ~5.8:1 contrast ratio
 ### Motion Preferences
 When `prefers-reduced-motion: reduce`:
 - Login typing completes instantly
 - Alert appears without slide
 - Expand/collapse is instant
 - Banner condensation is instant
 - Hover background-color changes remain
@@ -1,277 +0,0 @@
 # Reference: Investigations View (= Projects) + Documents View (= Education)
 > Extracted from goal.md — Investigations and Documents sections. Two simpler views that share the expandable-row pattern.
 ---
 ## Investigations View (= Projects)
 Projects presented as diagnostic investigations — tests that were ordered, performed, and returned results.
 ### Investigation List
 ```
 +--[ Investigation Results ]----------------------------------------------+
 | Test Name                    | Requested | Status   | Result            |
 |------------------------------+-----------+----------+-------------------|
 | PharMetrics Interactive      | 2024      | Complete | Live (green)      |
 |   Platform                   |           |          |                   |
 | Patient Switching Algorithm  | 2025      | Complete | 14,000 pts found  |
 | Blueteq Generator            | 2023      | Complete | 70% reduction     |
 | CD Monitoring System         | 2024      | Complete | Population-scale  |
 | Sankey Chart Analysis Tool   | 2023      | Complete | Pathway audit     |
 | Patient Pathway Analysis     | 2024      | Ongoing  | In development    |
 +-------------------------------------------------------------------------+
 ```
 ### Status Badges
 Styled like laboratory result status indicators:
 - **Complete** (green dot): Investigation finished, results available
 - **Ongoing** (amber dot): Investigation still in progress
 - **Live** (pulsing green dot): Results are actively being used (for PharMetrics, which is a live URL)
 ### Expanded Investigation View
 Clicking an investigation row reveals a detailed "results panel" below the row:
 ```
 PharMetrics Interactive Platform
 |-- Date Requested:  2024
 |-- Date Reported:   2024
 |-- Status:          Complete - Live at medicines.charlwood.xyz
 |-- Requesting Clinician: A. Charlwood
 |-- Methodology:
 |    Real-time medicines expenditure dashboard providing
 |    actionable analytics for NHS decision-makers. Built with
 |    Power BI and SQL, tracking expenditure across the 220M
 |    prescribing budget.
 |-- Results:
 |    - Real-time tracking of medicines expenditure
 |    - Actionable analytics for budget holders
 |    - Self-serve model for wider team
 |-- Tech Stack:     Power BI, SQL, DAX
 |-- [View Results ->]  (external link to medicines.charlwood.xyz)
 ```
 The expanded view uses a tree-like indented structure (with box-drawing characters in monospace) to present the investigation report. This mirrors how lab results and imaging reports appear in clinical systems — structured, indented, with labelled fields.
 ### "View Results" Link
 For PharMetrics (the only project with a live URL), a "View Results" button appears styled as an NHS blue action button. For internal projects, this button is absent.
 ---
 ## Documents View (= Education & Certifications)
 Education and certifications presented as attached documents in the patient record.
 ### Document List
 ```
 +--[ Attached Documents ]-------------------------------------------------+
 | Type           | Document                         | Date    | Source     |
 |----------------+----------------------------------+---------+------------|
 | Certificate    | MPharm (Hons) 2:1                | 2015    | UEA        |
 | Registration   | GPhC Pharmacist Registration     | 2016    | GPhC       |
 | Certificate    | Mary Seacole Programme (78%)     | 2018    | NHS LA     |
 | Results        | A-Levels: Maths A*, Chem B,     | 2011    | Highworth  |
 |                | Politics C                       |         | Grammar    |
 | Research       | Drug Delivery & Cocrystals       | 2015    | UEA        |
 |                | (75.1% Distinction)              |         |            |
 +-------------------------------------------------------------------------+
 ```
 ### Document Type Icons
 Small document icons from Lucide:
 - `FileText` for certificates
 - `Award` for registrations
 - `GraduationCap` for academic results
 - `FlaskConical` for research
 ### Expanded Document Preview
 ```
 MPharm (Hons) 2:1 - University of East Anglia
 |-- Type:           Academic Qualification
 |-- Date Awarded:   2015
 |-- Institution:    University of East Anglia, Norwich
 |-- Classification: Upper Second-Class Honours (2:1)
 |-- Duration:       2011 - 2015 (4 years)
 |-- Research:       Drug delivery and cocrystals
 |                   Grade: 75.1% (Distinction)
 |-- Notes:          MPharm is a 4-year integrated Master's degree
                    required for pharmacist registration in the UK.
 ```
 The preview panel uses the same tree-indented structure as the Investigations expanded view, maintaining visual consistency across the PMR interface.
 ---
 ## Design Guidance
 ### Aesthetic Direction
 **Tone:** Clinical Luxury — the *structure* of clinical investigation results and attached documents (tables, status badges, expandable rows) executed with premium refinement. Borders provide authentic clinical structuring; layered shadows, generous spacing, and refined typography provide the luxury finish. Light-mode only.
 **Differentiation:** The expanded-row tree-indented monospace structure using box-drawing characters is the signature element. It transforms a flat data table into something that reads like a lab report or radiology result — structured, indented, with labelled fields in `Geist Mono`. The pipe-and-branch characters (`├─`, `│`, `└─`) create a distinctly clinical aesthetic that no standard portfolio site would ever use.
 ### Key Design Decisions
 #### ExpandableRow Component Pattern
 Both views share an identical expand/collapse mechanic:
 1. **Collapsed State:** Standard table row with hover feedback (slight background tint)
 2. **Expand Trigger:** Click anywhere on the row
 3. **Expanded State:** Full-width panel slides down below the row with `AnimatePresence`
 4. **Visual Connection:** Expanded panel has left border matching the row's status color
 5. **Tree Structure:** Expanded content uses box-drawing characters for clinical report aesthetic
 **Status Badge System:**
 - **Complete** (green dot): `#10B981` background, used for finished investigations
 - **Ongoing** (amber dot): `#F59E0B` background, used for in-progress work  
 - **Live** (pulsing green dot): `#10B981` with CSS pulse animation, used for active/live URLs
 #### Typography & Spacing
 - **Primary font:** [UI font] (text, labels, table headers — Elvaro or Blumir, see CLAUDE.md)
 - **Monospace font:** Geist Mono (tree-indented expanded content)
 - **Border radius:** 4px throughout
 - **Border color:** `#E5E7EB` (Tailwind gray-200)
 - **NHS Blue:** `#005EB8` (action buttons, links)
 - **Card shadow:** Multi-layered per design system
 ### Implementation Patterns
 #### StatusBadge Component
 ```tsx
 interface StatusBadgeProps {
  status: 'complete' | 'ongoing' | 'live';
  label: string;
 }
 const StatusBadge = ({ status, label }: StatusBadgeProps) => {
  const styles = {
    complete: 'bg-emerald-100 text-emerald-800 border-emerald-200',
    ongoing: 'bg-amber-100 text-amber-800 border-amber-200',
    live: 'bg-emerald-100 text-emerald-800 border-emerald-200 animate-pulse',
  };
  const dotColors = {
    complete: 'bg-emerald-500',
    ongoing: 'bg-amber-500',
    live: 'bg-emerald-500 animate-ping',
  };
  return (
    <span className={`inline-flex items-center gap-1.5 px-2.5 py-1 rounded text-xs font-medium border ${styles[status]}`}>
      <span className={`w-1.5 h-1.5 rounded-full ${dotColors[status]}`} />
      {label}
    </span>
  );
 };
 ```
 #### Tree-Indented Content Structure
 ```tsx
 const TreeLine = ({ label, value, isLast = false }: TreeLineProps) => (
  <div className="font-mono text-sm text-gray-700">
    <span className="text-gray-400">{isLast ? '└─ ' : '├─ '}</span>
    <span className="text-gray-500">{label}:</span>
    <span className="ml-2">{value}</span>
  </div>
 );
 // Usage in expanded view:
 <div className="bg-gray-50 border-l-4 border-emerald-400 pl-4 py-3">
  <TreeLine label="Date Requested" value="2024" />
  <TreeLine label="Status" value="Complete" />
  <TreeLine label="Methodology" value="Power BI dashboard..." isLast />
 </div>
 ```
 #### ExpandableRow with Framer Motion
 ```tsx
 const ExpandableRow = ({ 
  children, 
  expandedContent,
  isExpanded,
  onToggle 
 }: ExpandableRowProps) => {
  return (
    <>
      <tr 
        onClick={onToggle}
        className="cursor-pointer hover:bg-gray-50 transition-colors"
      >
        {children}
      </tr>
      <AnimatePresence>
        {isExpanded && (
          <motion.tr
            initial={{ height: 0, opacity: 0 }}
            animate={{ height: 'auto', opacity: 1 }}
            exit={{ height: 0, opacity: 0 }}
            transition={{ duration: 0.2, ease: 'easeInOut' }}
          >
            <td colSpan={4} className="p-0 border-b">
              {expandedContent}
            </td>
          </motion.tr>
        )}
      </AnimatePresence>
    </>
  );
 };
 ```
 #### Document Type Icons
 ```tsx
 import { FileText, Award, GraduationCap, FlaskConical } from 'lucide-react';
 const documentIcons = {
  certificate: FileText,
  registration: Award,
  academic: GraduationCap,
  research: FlaskConical,
 };
 const DocumentIcon = ({ type }: { type: keyof typeof documentIcons }) => {
  const Icon = documentIcons[type];
  return <Icon className="w-4 h-4 text-gray-500" />;
 };
 ```
 #### Mobile Card Layout
 On mobile (<768px), both views switch to card layouts:
 ```tsx
 // Mobile: Card layout with vertical stacking
 <div className="md:hidden space-y-3">
  {investigations.map((inv) => (
    <div key={inv.id} className="bg-white rounded border p-4">
      {/* Card content */}
    </div>
  ))}
 </div>
 // Desktop: Table layout
 <table className="hidden md:table w-full">
  {/* Table content */}
 </table>
 ```
 ### Tech Stack Integration
 - **React 18** with TypeScript strict mode
 - **Tailwind CSS** for all styling (no CSS-in-JS)
 - **Framer Motion 11** for expand/collapse animations
 - **Lucide React** for document type icons
 - **Geist Mono** font for tree-indented content (add to index.html)
@@ -1,270 +0,0 @@
 # Reference: Medications View (= Skills)
 > Extracted from goal.md — Medications View section. Skills presented as an active medications list.
 ---
 ## Overview
 Skills presented as an active medications list — the format every pharmacist and GP reads daily.
 ## Full Table Layout
 ```
 +--[ Active Medications ]-------------------------------------------------+
 | Drug Name          | Dose  | Frequency  | Start    | Status            |
 |--------------------+-------+------------+----------+-------------------|
 | Python             | 90%   | Daily      | 2017     | Active (green)    |
 | SQL                | 88%   | Daily      | 2017     | Active (green)    |
 | Power BI           | 92%   | Daily      | 2019     | Active (green)    |
 | Data Analysis      | 95%   | Daily      | 2016     | Active (green)    |
 | JavaScript / TS    | 70%   | Weekly     | 2020     | Active (green)    |
 | Dashboard Dev      | 88%   | Weekly     | 2019     | Active (green)    |
 | Algorithm Design   | 82%   | Weekly     | 2022     | Active (green)    |
 | Data Pipelines     | 80%   | Weekly     | 2022     | Active (green)    |
 +-------------------------------------------------------------------------+
 +--[ Clinical Medications ]-----------------------------------------------+
 | Drug Name               | Dose  | Frequency  | Start  | Status         |
 |-------------------------+-------+------------+--------+----------------|
 | Medicines Optimisation  | 95%   | Daily      | 2016   | Active (green) |
 | Pop. Health Analytics   | 90%   | Daily      | 2022   | Active (green) |
 | NICE TA Implementation  | 85%   | Weekly     | 2022   | Active (green) |
 | Health Economics         | 80%   | Monthly    | 2023   | Active (green) |
 | Clinical Pathways        | 82%   | Weekly     | 2022   | Active (green) |
 | CD Assurance             | 88%   | Weekly     | 2024   | Active (green) |
 +-------------------------------------------------------------------------+
 +--[ PRN (As Required) ]--------------------------------------------------+
 | Drug Name                | Dose  | Frequency  | Start  | Status         |
 |-------------------------+-------+------------+--------+----------------|
 | Budget Management        | 90%   | As needed  | 2024   | Active (green) |
 | Stakeholder Engagement   | 88%   | As needed  | 2022   | Active (green) |
 | Pharma Negotiation       | 85%   | As needed  | 2024   | Active (green) |
 | Team Development         | 82%   | As needed  | 2017   | Active (green) |
 +-------------------------------------------------------------------------+
 ```
 ## Column Definitions
 | Column | PMR Meaning | CV Mapping |
 |--------|------------|------------|
 | Drug Name | Medication name | Skill name |
 | Dose | Dosage strength | Proficiency percentage |
 | Frequency | How often taken | How often the skill is used (Daily / Weekly / Monthly / As needed) |
 | Start | Date prescribed | Year Andy started using this skill (approximate) |
 | Status | Active / Stopped | Active (green dot) for current skills, Historical (gray dot) for deprecated skills |
 ## Medication Categories (tabs within the view)
 Skills are grouped into three "medication types," mimicking how clinical systems separate regular, acute, and PRN medications:
 - **Active Medications** = Technical skills (the "regular medications" — taken daily, core to function)
 - **Clinical Medications** = Healthcare domain skills (the specialist prescriptions)
 - **PRN (As Required)** = Strategic & leadership skills (used situationally, not daily)
 ## Table Styling
 - Table headers: [UI font] 600, 13px, uppercase, gray-400, `#F9FAFB` background
 - Table rows: alternating `#FFFFFF` / `#F9FAFB` backgrounds
 - Row height: 40px
 - All borders: `1px solid #E5E7EB`
 - Hover state: row background changes to `#EFF6FF` (subtle blue tint)
 - Status dots: 6px circles, inline with status text
 ## Interaction — Prescribing History
 Clicking any medication/skill row expands it downward to show a "prescribing history" — a mini-timeline of how the skill developed:
 ```
 Python | 90% | Daily | 2017 | Active (green)
  |-- Prescribing History:
     2017  Started: Self-taught for data analysis automation
     2019  Increased: Dashboard development, data pipeline work
     2022  Specialist use: Blueteq automation, Sankey analysis tools
     2024  Advanced: Switching algorithm (14,000 patients), CD monitoring
     2025  Current: Population-level analytics, incentive scheme automation
 ```
 The history entries are styled in Geist Mono, 12px, with year markers as bold anchors and descriptions in regular weight. This "prescribing history" shows skill progression in a format that clinicians understand intuitively.
 ## Sortable Columns
 Table columns are sortable by clicking the header. Clicking "Dose" sorts by proficiency descending. Clicking "Start" sorts chronologically. A small sort indicator arrow appears in the active sort column header. Default sort: by category grouping.
 ---
 ## Design Guidance
 ### Aesthetic Direction
 **Clinical Luxury**
 The medications-as-skills metaphor uses the *structure* of an active medications list — tabs, table layout, status indicators, prescribing history — but executed with premium refinement. Layered shadows on cards, generous spacing, refined typography. Light-mode only.
 **Purpose:** Present 18 professional skills as an active medications list. Clinicians recognize the format; recruiters get navigable, information-dense content.
 **Tone:** Precise, structured, refined. Tables and borders provide clinical authenticity; shadows, typography, and spacing provide the luxury finish. Clinical systems are designed for rapid information retrieval under time pressure — that same quality makes this an efficient skills display.
 **Constraints:**
 - Light-mode ONLY
 - NHS blue `#005EB8` as the sole accent color
 - Border radius 4px for clinical elements
 - [UI font] for all text (Elvaro or Blumir — see CLAUDE.md), Geist Mono for prescribing history data
 - Borders `1px solid #E5E7EB` on tables
 - Card surfaces with multi-layered shadows per design system
 **Differentiation:** The medications-as-skills mapping provides richer data than any traditional "skills list." Dose maps to proficiency, Frequency maps to usage patterns, Start maps to when the skill was acquired, and prescribing history shows the skill's evolution over time. Genuinely useful information architecture.
 ### Key Design Decisions
 #### 1. Three Category Tabs
 - **"Active Medications"** (8 technical skills), **"Clinical Medications"** (6 healthcare domain skills), **"PRN (As Required)"** (4 strategic/leadership skills)
 - Active tab: white background + NHS blue (`#005EB8`) 2px bottom border
 - Inactive tabs: `#F9FAFB` background, gray text, hover brightens to white
 - Count badges show the number of items per category
 - Full ARIA `role="tablist"`, `role="tab"`, `aria-selected`, `aria-controls` semantics
 #### 2. Semantic HTML Table
 - Proper `<table>`, `<thead>`, `<th scope="col">`, `<tbody>`, `<tr>`, `<td>` markup
 - Five columns: Drug Name, Dose, Frequency, Start, Status
 - Headers: [UI font] 600, 13px, uppercase, 0.03em tracking, `#F9FAFB` background
 - Row height: 40px
 - Alternating `#FFFFFF` / `#F9FAFB` row backgrounds via CSS `:nth-child(even)`
 - Hover state: `#EFF6FF` (subtle blue tint)
 - Status dots: 6px green circles inline with "Active" text
 - All borders: `1px solid #E5E7EB`
 #### 3. Sortable Columns
 - Click any header to sort (ascending/descending toggle)
 - ChevronUp, ChevronDown, or ChevronsUpDown indicator in header
 - Sorting logic handles string, numeric (dose %), and date (year) columns
 - Default: no sort (original order preserved)
 #### 4. Expandable Prescribing History
 - Click any row (or arrow at row end) to expand
 - Uses Framer Motion `<AnimatePresence>` for smooth height animation (0.2s)
 - History entries styled in Geist Mono 12px
 - Year markers bold, descriptions regular weight
 - Format: `2017 Started: Self-taught for data analysis automation`
 - Vertical timeline with connecting line on left
 #### 5. Mobile: Card Layout
 - Below 640px: Table hidden, cards displayed
 - Each card is a bordered block with stacked key-value pairs
 - No horizontal scroll required
 - Same expandable history behavior
 ### Implementation Patterns / Code Snippets
 #### Types
 ```typescript
 interface MedicationEntry {
  drugName: string
  dose: string
  frequency: string
  start: string
  status: 'Active'
  prescribingHistory: PrescribingEvent[]
 }
 interface PrescribingEvent {
  year: string
  label: string
  description: string
 }
 type MedicationCategory = 'active' | 'clinical' | 'prn'
 ```
 #### Tab Implementation
 ```typescript
 const tabs: { key: MedicationCategory; label: string }[] = [
  { key: 'active', label: 'Active Medications' },
  { key: 'clinical', label: 'Clinical Medications' },
  { key: 'prn', label: 'PRN (As Required)' },
 ]
 {tabs.map(({ key, label }) => (
  <button
    key={key}
    role="tab"
    aria-selected={category === key}
    aria-controls={`${key}-panel`}
    onClick={() => setCategory(key)}
    className={cn(
      'px-4 py-2 font-inter text-sm font-medium transition-colors',
      category === key
        ? 'bg-white text-[#005EB8] border-b-2 border-[#005EB8]'
        : 'bg-[#F9FAFB] text-gray-600 hover:bg-white'
    )}
  >
    {label}
  </button>
 ))}
 ```
 #### Table Row with Expand
 ```typescript
 <tr
  onClick={() => toggleExpanded(drugName)}
  className="h-[40px] border-b border-[#E5E7EB] cursor-pointer transition-colors hover:bg-[#EFF6FF]"
 >
  <td className="px-4 py-2 text-sm font-medium text-gray-900">
    {drugName}
  </td>
  {/* ... other cells ... */}
 </tr>
 <AnimatePresence>
  {isExpanded && (
    <motion.tr
      initial={{ height: 0, opacity: 0 }}
      animate={{ height: 'auto', opacity: 1 }}
      exit={{ height: 0, opacity: 0 }}
      transition={{ duration: 0.2 }}
    >
      <td colSpan={5} className="px-4 py-3 bg-[#F9FAFB]">
        <div className="font-mono text-xs space-y-1">
          {prescribingHistory.map((event) => (
            <div key={event.year} className="flex gap-3">
              <span className="font-bold text-gray-700">{event.year}</span>
              <span className="text-gray-600">{event.label}:</span>
              <span className="text-gray-500">{event.description}</span>
            </div>
          ))}
        </div>
      </td>
    </motion.tr>
  )}
 </AnimatePresence>
 ```
 #### Sort Indicator
 ```typescript
 const SortIndicator = ({ column }: { column: SortColumn }) => {
  if (sort.column !== column) {
    return <ChevronsUpDown className="w-3.5 h-3.5 text-gray-400" />
  }
  return sort.direction === 'asc'
    ? <ChevronUp className="w-3.5 h-3.5 text-[#005EB8]" />
    : <ChevronDown className="w-3.5 h-3.5 text-[#005EB8]" />
 }
 ```
 #### Status Dot
 ```typescript
 <div className="flex items-center gap-2">
  <span className="w-1.5 h-1.5 rounded-full bg-green-500" />
  <span className="text-sm text-gray-700">Active</span>
 </div>
 ```
 #### Tailwind Classes Summary
 - **Container:** `border border-[#E5E7EB] rounded`
 - **Table headers:** `bg-[#F9FAFB] text-xs font-semibold uppercase tracking-wide text-gray-600`
 - **Row hover:** `hover:bg-[#EFF6FF]`
 - **Alternating rows:** `even:bg-[#F9FAFB] bg-white`
 - **Tab active:** `bg-white text-[#005EB8] border-b-2 border-[#005EB8]`
 - **Tab inactive:** `bg-[#F9FAFB] text-gray-600 hover:bg-white`
 - **Mono text:** `font-mono text-xs`
@@ -1,198 +0,0 @@
 # Reference: Problems View (= Achievements / Challenges)
 > Extracted from goal.md — Problems View section. Career achievements framed as clinical problems that were identified, treated, and resolved.
 ---
 ## Overview
 The "Problems" list in a clinical record tracks diagnoses — conditions that were identified, treated, and either resolved or require ongoing management. This maps perfectly to career achievements: challenges that Andy identified and resolved.
 ## Two Sections: Active Problems and Resolved Problems
 ### Active Problems (current / ongoing)
 ```
 +--[ Active Problems ]----------------------------------------------------+
 | Status | Code      | Problem                              | Since      |
 |--------+-----------+--------------------------------------+------------|
 | AMB    | [MGT001]  | 220M prescribing budget oversight    | Jul 2024   |
 | GRN    | [TRN001]  | Patient-level SQL transformation     | 2025       |
 | AMB    | [LEA001]  | Team data literacy programme         | Jul 2024   |
 +-------------------------------------------------------------------------+
 ```
 ### Resolved Problems (past achievements)
 ```
 +--[ Resolved Problems ]--------------------------------------------------+
 | Status | Code      | Problem                        | Resolved  | Outcome                                  |
 |--------+-----------+--------------------------------+-----------+------------------------------------------|
 | GRN    | [EFF001]  | Manual prescribing analysis    | Oct 2025  | Python algorithm: 14,000 pts, 2.6M/yr   |
 |        |           | inefficiency                   |           |                                          |
 | GRN    | [EFF002]  | 14.6M efficiency target        | Oct 2025  | Over-target performance achieved         |
 | GRN    | [AUT001]  | Blueteq form creation backlog  | 2023      | 70% reduction, 200hrs saved              |
 | GRN    | [INN001]  | Asthma screening scalability   | 2019      | National rollout: ~300 branches, ~1M     |
 | GRN    | [AUT002]  | Incentive scheme manual calc.  | 2025      | Automated: 50% Rx reduction in 2 months  |
 | GRN    | [DAT001]  | HCD spend tracking gaps        | 2023      | Blueteq-secondary care data integration  |
 | GRN    | [VIS001]  | Patient pathway opacity        | 2023      | Sankey chart analysis tool               |
 | GRN    | [MON001]  | Population opioid exposure     | 2024      | CD monitoring system: OME tracking       |
 |        |           | monitoring                     |           |                                          |
 +-------------------------------------------------------------------------+
 ```
 ## Column Definitions
 | Column | Meaning |
 |--------|---------|
 | Status | Traffic light: Green (resolved), Amber (in progress / active), Red (urgent — unused, reserved) |
 | Code | SNOMED-style reference code. Fictional but internally consistent. Formatted in Geist Mono. |
 | Problem | The challenge or opportunity Andy identified |
 | Resolved | Date or year the problem was resolved |
 | Outcome | Brief description of the resolution and its measurable impact |
 ## Expandable Rows
 Each problem row can be expanded to show a full narrative: what the problem was, how Andy approached it, what tools/methods were used, and the quantified outcome. The expanded state also shows "linked consultations" — clicking a link navigates to the relevant entry in Consultations view.
 ## Traffic Light Status Indicators
 Traffic lights are 8px circles with the status colors (green, amber, red, gray). They appear inline before the code column. This is exactly how clinical systems indicate problem severity/status — it's an immediately scannable visual language.
 ---
 ## Design Guidance
 ### Aesthetic Direction
 **Clinical Luxury** — The Problems view uses the clinical structure of a problem list (traffic lights, coded entries, expandable narratives) but executes with premium refinement. White card surfaces with layered shadows, generous padding, refined typography. The visual power comes from the *content structure* — traffic light dots and expandable narratives do the heavy lifting — while the luxury finish makes it feel polished and intentional.
 The distinctiveness comes from the *concept itself* — framing career achievements as a Problem List is the creative act. The premium execution makes it memorable.
 ### Key Design Decisions
 1. **Traffic Light Status Indicators (WCAG Critical)**
   - 8px circles: green (`#22C55E`) for resolved, amber (`#F59E0B`) for in-progress
   - **MUST ALWAYS be paired with text labels** — never dots alone (WCAG 1.4.1 requirement)
   - Each status shows both the colored dot AND the text label (e.g., "● Resolved", "● In Progress")
   - Implementation uses flexbox with gap-2 for dot-label pairing
 2. **Typography System**
   - **[UI font]** for all body text, headers, and UI labels (Elvaro or Blumir — see CLAUDE.md)
   - **Geist Mono** for codes and dates — SNOMED-style codes like `[EFF001]`, `[MGT001]` must be monospace
   - Font sizes: 13px for table headers (uppercase, tracking-wider), 14px for body text
   - Header styling: `font-ui font-semibold text-xs uppercase tracking-wider text-gray-400`
 3. **Color Palette (Locked)**
   - Light-mode ONLY
   - NHS Blue: `#005EB8` (Tailwind `text-pmr-nhsblue`) — used for links and accents
   - Borders: `1px solid #E5E7EB` (gray-200) — consistent table borders
   - Row hover: `#EFF6FF` (blue-50) — subtle highlight
   - Background: White cards on `#F5F7FA` (pmr-content) background with layered shadows per design system
   - Border radius: 4px for clinical elements
 4. **Table Structure**
   - Semantic HTML: `<table>`, `<thead>`, `<th scope="col">`, `<tbody>`, `<tr>`, `<td>`
   - Two separate tables: Active Problems (4 columns) and Resolved Problems (6 columns)
   - Column widths fixed for Status (w-28), Code (w-28), Since/Resolved (w-28)
   - Alternating row backgrounds not used — clean white with hover state only
 5. **Expandable Rows Pattern**
   - Chevron icon in rightmost column indicates expandability
   - Expanded content shows in a full-width sub-row below
   - Animation: height transition 200ms ease-out (respects prefers-reduced-motion)
   - Expanded background: `#F9FAFB` (gray-50) with narrative text and linked consultations
 6. **Mobile Layout**
   - Card-based layout below breakpoint (isMobile from useBreakpoint hook)
   - Each problem becomes a rounded card with stacked information
   - Status and code on same line, problem description prominent
   - Expandable via button press, showing narrative and linked consultations
 ### Implementation Patterns
 **TrafficLight Component (WCAG Compliant):**
 ```tsx
 function TrafficLight({ status }: { status: ProblemStatus }) {
  const colorMap: Record<ProblemStatus, { bg: string; label: string }> = {
    Active: { bg: 'bg-green-500', label: 'Active' },
    'In Progress': { bg: 'bg-amber-500', label: 'In Progress' },
    Resolved: { bg: 'bg-green-500', label: 'Resolved' },
  }
  const { bg, label } = colorMap[status]
  return (
    <div className="flex items-center gap-2">
      <span
        className={`w-2 h-2 rounded-full ${bg}`}
        aria-label={`Status: ${label}`}
        role="img"
      />
      <span className="text-xs text-gray-600">{label}</span>
    </div>
  )
 }
 ```
 **Code Column (Geist Mono):**
 ```tsx
 <td className="border border-gray-200 px-3 py-2.5">
  <span className="font-mono text-xs text-gray-500">[{problem.code}]</span>
 </td>
 ```
 **Row Hover Effect:**
 ```tsx
 <tr className={`cursor-pointer hover:bg-blue-50 transition-colors ${
  isExpanded ? 'bg-blue-50' : ''
 }`}>
 ```
 **Expandable Row Animation:**
 ```tsx
 <div
  style={{
    height: isExpanded ? contentHeight : 0,
    overflow: 'hidden',
    transition: prefersReducedMotion ? 'none' : 'height 200ms ease-out',
  }}
 >
  <div ref={contentRef} className="bg-gray-50 p-4">
    {/* Narrative content */}
  </div>
 </div>
 ```
 **Linked Consultations Navigation:**
 ```tsx
 <button
  onClick={(e) => {
    e.stopPropagation()
    handleLinkedClick(consultation.id)
  }}
  className="inline-flex items-center gap-1 text-xs text-pmr-nhsblue hover:underline"
 >
  <ExternalLink className="w-3 h-3" />
  {consultation.organization} — {consultation.role}
 </button>
 ```
 ### Mobile Card Layout
 On mobile devices (`isMobile` from useBreakpoint hook), the table transforms into cards:
 - White background cards with `border border-gray-200 rounded`
 - Status dot + code on one line
 - Problem description as card title
 - Since/Resolved date below
 - Chevron indicates expandability
 - Expanded state shows narrative and linked consultations below
 ### Accessibility Requirements
 1. **WCAG 1.4.1 Use of Color**: Never rely on color alone — traffic lights MUST have text labels
 2. **Semantic HTML**: Proper `<table>` structure with `<th scope="col">` for headers
 3. **ARIA**: `aria-expanded` on toggle buttons, `aria-label` on status dots
 4. **Motion**: Respect `prefers-reduced-motion` for expand/collapse animations
 5. **Focus management**: Linked consultation buttons are keyboard navigable
@@ -1,159 +0,0 @@
 ---
 ## Design Guidance
 ### Aesthetic Direction
 **Tone: Clinical Luxury** — A contact form styled as a clinical referral, with the *structure* of an NHS referral form (priority levels, reference numbers, clinical fields) but executed with premium refinement. The humor comes from the deadpan application of clinical form conventions to a personal contact form. The beauty is in the precision of the grid, the crispness of the type hierarchy, refined inputs, and the tongue-in-cheek seriousness of it all.
 **What makes it memorable**: The collision between clinical form structure and the fact that you are "referring" to a person's contact page. The pre-filled "patient" header, the priority radio buttons with their wry tooltips, the reference number generation — all of this is a joke delivered with a completely straight face, in a beautifully finished package.
 ### Key Design Decisions
 **Priority Radio Buttons (urgent/routine/2-week-wait)**
 | Priority | Color | Tooltip |
 |----------|-------|---------|
 | Urgent | Red (`#EF4444`) | "All enquiries are welcome, urgent or not." |
 | Routine | NHS Blue (`#005EB8`) | (default, no tooltip needed) |
 | Two-Week Wait | Amber (`#F59E0B`) | "NHS cancer referral pathway — this isn't that, but the spirit of promptness applies." |
 Each priority option features a colored dot indicator and supports hover tooltips via a tooltip component pattern.
 **Form Validation Patterns**
 - Real-time validation on blur
 - Error messages appear below invalid fields in red (`text-red-600`)
 - Disabled submit button until required fields are valid
 - Required fields: Referrer Name, Referrer Email
 - Email validation uses standard pattern matching
 - Organization field is optional
 **Design System Constraints (Locked)**
 | Token | Value | Tailwind Class |
 |-------|-------|----------------|
 | NHS Blue | `#005EB8` | `text-pmr-nhsblue` / `bg-pmr-nhsblue` |
 | Card border | `1px solid #E5E7EB` | `border-pmr-border` |
 | Input border | `1px solid #D1D5DB` | `border-pmr-border-dark` |
 | Border radius | `4px` | `rounded` |
 | Label font | [UI font] 500, 13px, gray-600 | `font-ui font-medium text-sm text-gray-600` |
 | Mono font | Geist Mono | `font-mono` (reference numbers) |
 | Input padding | `8px 12px` | `py-2 px-3` |
 | Focus state | NHS blue border + glow | `focus:border-pmr-nhsblue focus:ring-2 focus:ring-pmr-nhsblue/15` |
 ### Implementation Patterns/Code Snippets
 **Priority Option Component Pattern**
 ```tsx
 type Priority = 'urgent' | 'routine' | 'two-week-wait'
 const dotColors: Record<Priority, string> = {
  urgent: 'bg-red-500',
  routine: 'bg-pmr-nhsblue',
  'two-week-wait': 'bg-amber-500',
 }
 const labelColors: Record<Priority, string> = {
  urgent: 'text-red-600',
  routine: 'text-pmr-nhsblue',
  'two-week-wait': 'text-amber-600',
 }
 ```
 **Form Input Styling Pattern**
 ```tsx
 // Standard clinical form input
 <input
  className="w-full px-3 py-2 border border-pmr-border-dark rounded 
             text-sm text-gray-900 placeholder-gray-400
             focus:outline-none focus:border-pmr-nhsblue 
             focus:ring-2 focus:ring-pmr-nhsblue/15
             transition-all duration-200"
 />
 // Label styling
 <label className="block text-sm font-medium text-gray-600 mb-1.5 font-inter">
  Field Label
 </label>
 ```
 **Reference Number Generation**
 ```tsx
 function generateRefNumber(): string {
  const now = new Date()
  const year = now.getFullYear()
  const month = String(now.getMonth() + 1).padStart(2, '0')
  const day = String(now.getDate()).padStart(2, '0')
  const seq = String(Math.floor(Math.random() * 999) + 1).padStart(3, '0')
  return `REF-${year}-${month}${day}-${seq}`
 }
 ```
 **Form State Management Pattern**
 ```tsx
 interface FormData {
  priority: Priority
  referrerName: string
  referrerEmail: string
  referrerOrg: string
  reason: string
  contactMethod: ContactMethod
 }
 interface FormErrors {
  referrerName?: string
  referrerEmail?: string
 }
 // Validation on submit
 const validate = (): boolean => {
  const errors: FormErrors = {}
  if (!formData.referrerName.trim()) {
    errors.referrerName = 'Referrer name is required'
  }
  if (!formData.referrerEmail.trim()) {
    errors.referrerEmail = 'Email is required'
  } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.referrerEmail)) {
    errors.referrerEmail = 'Please enter a valid email'
  }
  setErrors(errors)
  return Object.keys(errors).length === 0
 }
 ```
 **Success State Pattern**
 ```tsx
 // After form submission
 <div className="text-center py-8">
  <CheckCircle className="w-12 h-12 text-green-500 mx-auto mb-4" />
  <h3 className="text-lg font-semibold text-gray-900 mb-1">
    Referral sent successfully
  </h3>
  <p className="text-sm text-gray-600 font-mono mb-1">
    Reference: {refNumber}
  </p>
  <p className="text-sm text-gray-500">
    Expected response time: 24-48 hours
  </p>
 </div>
 ```
 **Contact Method Radio Pattern**
 ```tsx
 type ContactMethod = 'email' | 'phone' | 'linkedin'
 // Radio button with icon
 <div className="flex items-center gap-3 p-3 border border-pmr-border-dark rounded 
                cursor-pointer hover:bg-gray-50 transition-colors">
  <input type="radio" className="sr-only" />
  <Mail className="w-4 h-4 text-gray-500" />
  <span className="text-sm text-gray-700">Email</span>
 </div>
 ```
@@ -1,309 +0,0 @@
 # Reference: Summary View + Clinical Alert
 > Extracted from goal.md — Summary View and Clinical Alert sections. This is the landing view after login.
 ---
 ## Summary View
 The landing view after login. This mimics the "Patient Summary" screen — the first screen a clinician sees when opening a patient record, showing the most important information at a glance.
 **Layout:** A grid of summary cards arranged in a 2-column layout on desktop, single column on mobile. Each card has a header bar with the card title in [UI font] 600, 14px, uppercase, on a `#F9FAFB` background with `1px solid #E5E7EB` bottom border.
 ### Card 1: Patient Demographics (spans full width)
 ```
 +--[ Patient Demographics ]------------------------------------------+
 | Name:         Andrew Charlwood          Status:    Active (dot)    |
 | DOB:          14 February 1993          Location:  Norwich, UK     |
 | Registration: GPhC 2211810              Since:     August 2016     |
 | Qualification: MPharm (Hons) 2:1        University: UEA, 2015     |
 +---------------------------------------------------------------------+
 ```
 A two-column key-value table. Labels in [UI font] 500, 13px, gray-500. Values in [UI font] 400, 14px, gray-900. Labels right-aligned, values left-aligned — clinical form layout.
 ### Card 2: Active Problems (left column)
 ```
 +--[ Active Problems ]-----------------------------------------------+
 | (green dot) Deputy Head, Pop. Health & Data Analysis   Jul 2024-Present   |
 |   NHS Norfolk & Waveney ICB                                         |
 | (green dot) 220M prescribing budget management          Ongoing            |
 | (amber dot) Patient-level SQL analytics transformation  In progress        |
 +---------------------------------------------------------------------+
 ```
 A list with green dots for active/current items, amber dots for in-progress items. Each entry has a title in [UI font] 500, 14px, and a date range or status in Geist Mono, 12px, right-aligned. Click an entry to navigate to the corresponding Consultation.
 ### Card 3: Current Medications — Quick View (right column)
 ```
 +--[ Current Medications (Quick View) ]-------------------------------+
 | Python          | 90%  | Daily     | Active (green dot)            |
 | SQL             | 88%  | Daily     | Active (green dot)            |
 | Power BI        | 92%  | Daily     | Active (green dot)            |
 | Data Analysis   | 95%  | Daily     | Active (green dot)            |
 | JS / TypeScript | 70%  | Weekly    | Active (green dot)            |
 |                                          [View Full List ->]        |
 +---------------------------------------------------------------------+
 ```
 A compact 4-column table showing the top 5 skills. "View Full List" links to the Medications view. Table headers are uppercase, 12px, gray-400. Table rows alternate between `#FFFFFF` and `#F9FAFB` backgrounds.
 ### Card 4: Last Consultation (spans full width)
 ```
 +--[ Last Consultation ]----------------------------------------------+
 | Date: May 2025   Clinician: A. Charlwood   Location: NHS N&W ICB    |
 |                                                                      |
 | Interim Head, Population Health & Data Analysis                      |
 | Led strategic delivery of population health initiatives and          |
 | data-driven medicines optimisation across Norfolk & Waveney ICS...   |
 |                                            [View Full Record ->]     |
 +---------------------------------------------------------------------+
 ```
 A preview of the most recent role, truncated to 2-3 lines. "View Full Record" navigates to Consultations with that entry expanded.
 ### Card 5: Alerts (full width, positioned above all other cards)
 This is the Clinical Alert — see below.
 ---
 ## The Clinical Alert (Signature Interaction)
 When the user first loads the Summary view (immediately after the login transition), a clinical alert banner slides down from beneath the patient banner.
 ### Alert Styling
 ```
 +--[ WARNING CLINICAL ALERT ]------------------------------------------+
 | WARNING  ALERT: This patient has identified 14.6M in prescribing     |
 |    efficiency savings across Norfolk & Waveney ICS.                  |
 |                                                         [Acknowledge]|
 +----------------------------------------------------------------------+
 ```
 - Background: amber (`#FEF3C7` — amber-100, light amber)
 - Left border: 4px solid `#F59E0B` (amber-500)
 - Warning icon: `AlertTriangle` from Lucide, amber-600
 - Text: [UI font] 500, 14px, `#92400E` (amber-800)
 - "Acknowledge" button: small outlined button, amber border and text
 ### Behavior
 1. The alert slides down from beneath the patient banner with a spring animation (250ms, slight overshoot) after the PMR interface finishes materializing.
 2. It pushes the Summary content downward, so it's impossible to miss.
 3. Clicking "Acknowledge" triggers a brief animation: a green checkmark replaces the warning icon (200ms), then the alert collapses upward (200ms, ease-out) and is gone.
 4. The dismiss state is stored in React state (session-only) — refreshing the page shows the alert again.
 ### Why This Works
 Clinical alerts are the mechanism that clinical systems use to put critical information in front of clinicians before they do anything else. They are the highest-priority information in the system. By framing Andy's most impressive metric ("14.6M") as a clinical alert, it gets the same treatment — it's the first thing the user reads, it demands acknowledgment, and its format gives the number institutional weight. This is not a boast in a paragraph; it's a system-generated alert based on data. The framing makes the achievement feel objective.
 ### Second Alert (on Consultations view)
 When the user first navigates to Consultations, a secondary alert appears:
 ```
 WARNING  NOTE: Patient has developed a Python-based switching algorithm
   identifying 14,000 patients for cost-effective medication alternatives.
   2.6M annual savings potential. Review recommended.
 ```
 This second alert reinforces the key technical achievement in clinical language. It appears only once (on first navigation to Consultations) and is dismissible with the same "Acknowledge" interaction.
 ---
 ## Design Guidance
 ### Aesthetic Direction
 **Clinical Luxury**
 The Summary view and Clinical Alert use clinical structure (card-based summary, status dots, coded entries, alert banners) with premium execution. Key visual principles:
 - **Light-mode ONLY**
 - **NHS blue (#005EB8)** — The accent color for headers and accents
 - **Card-based architecture** — All information lives in contained, bordered cards with layered shadows (per design system)
 - **Monospace for data** — Geist Mono for all coded entries, dates, and numerical values (clinical texture)
 - **Generous but structured** — More whitespace than a real clinical system. Cards have 16-24px padding. Content breathes.
 - **Status dots** — Green/amber/red traffic light indicators for at-a-glance status assessment
 ### Key Design Decisions
 **1. Spring Animation for Alert Slide-Down**
 The Clinical Alert uses a spring animation (Framer Motion `type: 'spring'`) rather than ease-out. This creates a subtle overshoot effect that feels "alive" — mimicking how real clinical alerts materialize in systems like EMIS or SystmOne.
 ```
 Initial state: y: -100%, opacity: 0
 Animate to: y: 0, opacity: 1
 type: 'spring', stiffness: 300, damping: 25
 ```
 **2. Acknowledge → Checkmark → Collapse Sequence**
 The dismissal interaction follows a deliberate three-phase sequence:
 1. **Acknowledge click** (0ms) — Button triggers dismissal state
 2. **Icon cross-fade** (200ms) — AlertTriangle fades out, CheckCircle fades in (green-600)
 3. **Hold beat** (200ms) — Checkmark holds briefly to confirm action completion
 4. **Height collapse** (200ms ease-out) — Alert height animates to 0, content slides up
 This sequence transforms dismissal from a jarring disappearance into a satisfying confirmation action.
 **3. Typography Hierarchy**
 - **Card headers**: [UI font] 600, 14px, uppercase, letter-spacing-wide — creates clear section delineation
 - **Labels**: [UI font] 500, 13px, gray-500, right-aligned — clinical form layout
 - **Values**: [UI font] 400, 14px, gray-900, left-aligned — primary data focus
 - **Coded values**: Geist Mono, 12px — all dates, IDs, percentages, status codes
 ### Implementation Patterns
 **ClinicalAlert Component**
 ```typescript
 // State machine for alert lifecycle
 type AlertState = 'visible' | 'acknowledging' | 'dismissing' | 'dismissed'
 // Props interface
 interface ClinicalAlertProps {
  variant: 'warning' | 'note'
  icon: typeof AlertTriangle | typeof Info
  message: string
  onDismiss: () => void
  storageKey?: string // For session persistence
 }
 // Animation variants
 const alertVariants = {
  hidden: { y: '-100%', opacity: 0 },
  visible: { 
    y: 0, 
    opacity: 1,
    transition: { type: 'spring', stiffness: 300, damping: 25 }
  },
  exit: { 
    height: 0, 
    opacity: 0,
    transition: { duration: 0.2, ease: 'easeOut' }
  }
 }
 const iconVariants = {
  warning: { scale: 1, opacity: 1 },
  acknowledged: { 
    scale: [1, 1.1, 1], 
    opacity: [1, 0],
    transition: { duration: 0.2 }
  }
 }
 ```
 **SummaryView Component**
 ```typescript
 // Grid layout structure
 const layoutConfig = {
  container: 'grid grid-cols-1 md:grid-cols-2 gap-4',
  demographics: 'col-span-full', // Spans both columns
  problems: 'col-span-1',
  medications: 'col-span-1',
  consultation: 'col-span-full'
 }
 // Card header pattern
 const CardHeader = ({ title }: { title: string }) => (
  <div className="bg-[#F9FAFB] border-b border-[#E5E7EB] px-4 py-3">
    <h3 className="font-inter font-semibold text-sm uppercase tracking-wide">
      {title}
    </h3>
  </div>
 )
 // Key-value row pattern (for Demographics)
 interface KeyValueRowProps {
  label: string
  value: string
  isMono?: boolean
 }
 const KeyValueRow = ({ label, value, isMono }: KeyValueRowProps) => (
  <div className="grid grid-cols-[1fr_auto] gap-4 py-1">
    <span className="font-inter font-medium text-[13px] text-gray-500 text-right">
      {label}
    </span>
    <span className={`font-inter text-sm text-gray-900 text-left ${isMono ? 'font-geist-mono' : ''}`}>
      {value}
    </span>
  </div>
 )
 // Problem list pattern with traffic lights
 interface ProblemItemProps {
  status: 'active' | 'in-progress'
  title: string
  date: string
  onClick?: () => void
 }
 const ProblemItem = ({ status, title, date, onClick }: ProblemItemProps) => (
  <div 
    onClick={onClick}
    className="flex items-center gap-3 py-2 hover:bg-gray-50 cursor-pointer transition-colors"
  >
    <div className={cn(
      'w-2 h-2 rounded-full',
      status === 'active' ? 'bg-green-500' : 'bg-amber-500'
    )} />
    <span className="flex-1 font-inter font-medium text-sm">{title}</span>
    <span className="font-geist-mono text-xs text-gray-500">{date}</span>
  </div>
 )
 ```
 **Animation Constants**
 ```typescript
 // Timing constants (ms)
 export const ANIMATION = {
  SPRING_DURATION: 250,
  ICON_CROSSFADE: 200,
  HOLD_BEAT: 200,
  COLLAPSE_DURATION: 200
 } as const
 // Easing
 export const EASING = {
  spring: { type: 'spring', stiffness: 300, damping: 25 },
  easeOut: { ease: 'easeOut' }
 } as const
 ```
 ### Color Palette
 ```css
 /* NHS System Colors */
 --nhs-blue: #005EB8;
 --nhs-light-blue: #41B6E6;
 /* Alert Colors */
 --amber-100: #FEF3C7;
 --amber-500: #F59E0B;
 --amber-600: #D97706;
 --amber-800: #92400E;
 --green-500: #22C55E;
 --green-600: #16A34A;
 /* UI Colors */
 --gray-50: #F9FAFB;
 --gray-100: #F3F4F6;
 --gray-400: #9CA3AF;
 --gray-500: #6B7280;
 --gray-900: #111827;
 --border: #E5E7EB;
 ```
@@ -1,212 +0,0 @@
 # Reference: ECG Transition + Login Sequence
 > Extracted from goal.md — ECG Transition section. This covers the flatline exit from the ECG animation and the immersive login sequence that bridges into the PMR interface.
 ---
 ## Starting Point
 "ANDREW CHARLWOOD" is on screen in neon green (`#00ff41`) on black. The heartbeat trace is complete. The name is fully formed and glowing.
 ## Phase 1: The Flatline (600ms)
 The neon green name holds for a beat (300ms). Then the glow around the letters begins to fade. Simultaneously, from the right edge of the name, a flatline trace extends rightward — a perfectly horizontal green line drawn at the baseline, extending across the remaining viewport width over 300ms. The visual reads as a patient monitor flatline. This is deliberate: the "patient" (the animation phase) is ending. A new record is about to open.
 The flatline has a subtle audio-visual implication without actual sound — the green line is steady and unbroken, the glow around the name letters reduces to zero. The entire canvas is now: a fading green name with a horizontal flatline extending to the right edge. All on black.
 ## Phase 2: Screen Clear (400ms)
 The entire canvas fades to black over 200ms (the name and flatline dissolve into darkness). Then, from black, the background transitions to a dark blue-gray (`#1E293B`) over 200ms. This is the color of a clinical system login screen — the dark institutional background that every NHS worker recognizes from their Monday morning.
 ## Phase 3: Login Sequence (user-paced)
 A login panel materializes center-screen: a white card (320px wide, 12px border-radius, refined shadow) on the dark blue-gray background. The card contains:
 - A small NHS-blue shield icon or generic clinical system logo at the top
 - **Username field**: Empty text input with label "Username". After 400ms, a cursor appears and types `A.CHARLWOOD` character by character at a natural reading pace (80ms per character, ~880ms total). The typing uses Geist Mono / monospace font.
 - **Password field**: After a 300ms pause, dots fill the password field at a deliberate pace (8 dots, 60ms each, ~480ms total).
 - **"Log In" button**: NHS blue (`#005EB8`), full width. After typing completes, the button becomes clearly available as a **user-interactive element**. The user clicks it to proceed. The button should have a visible hover state and feel like a natural call-to-action — this is the moment where the user "logs in" to the record.
 **Important**: The login button is NOT auto-clicked. The user must click it. This creates a deliberate, satisfying interaction — the user is choosing to enter the record. On click, the button shows a brief pressed state (darkens slightly, 100ms), then...
 ## Phase 4: Interface Materialization (500ms)
 The login card scales up slightly (103%) and fades out (200ms). As it fades, the full PMR interface fades in behind it:
 1. **Patient banner** slides down from the top edge (200ms, ease-out)
 2. **Sidebar** slides in from the left edge (250ms, ease-out, starting 50ms after the banner)
 3. **Main content area** (Summary view) fades in (300ms, starting 100ms after sidebar begins)
 4. **Clinical alert banner** slides down from beneath the patient banner (250ms, spring easing, starting 200ms after main content appears)
 ## Phase 5: Final State
 The full PMR interface is visible: patient banner at top, dark sidebar on left, Summary view in the main content area, and the clinical alert banner demanding attention. The user is now "logged in" to Andy's career record.
 **Total transition duration:** ~2s for typing to complete, then user-paced (waits for button click), then ~500ms for interface materialization.
 ## Why This Works
 The login sequence is the most immersive transition. Every NHS worker, every pharmacist, every GP recognizes the shape of a clinical login screen. This transition evokes that recognition — but executed with premium refinement rather than institutional austerity. The natural typing pace lets the user absorb what's happening. And the interactive login button is the pivotal moment: the user *chooses* to enter the record. That moment of agency makes the experience feel personal, not passive.
 ## Login Animation Implementation Notes
 - Component mounts with dark blue-gray background
 - Login card fades in (Framer Motion, 200ms)
 - Username typing: `setInterval` adds one character per 80ms to a state string (~880ms total)
 - Password dots: `setInterval` adds one dot per 60ms (~480ms total)
 - After typing completes: button becomes interactive (opacity goes to 1, cursor: pointer)
 - **User clicks the "Log In" button** — this is NOT auto-triggered
 - On click: button shows pressed state (100ms), then `onComplete` callback fires
 - Typing respects `prefers-reduced-motion` — with reduced motion, full username and password appear instantly, button is immediately interactive
 - **Font: Geist Mono** for username/password fields (NOT Fira Code)
 ---
 ## Design Guidance
 ### Aesthetic Direction: Clinical Luxury
 The login card evokes the structure of a clinical system login — shield icon, two fields, a button — but executed with premium refinement. Clean white card with refined shadow, considered spacing, and the satisfying rhythm of credentials appearing at a natural pace. The recognition factor ("oh, this looks like a clinical login") is the creative hook; the premium finish is what makes it memorable.
 ### Key Design Decisions
 1. **Active field focus ring**: NHS-blue border (`1px solid #005EB8`) on the currently active field, inactive fields shift to `#FAFAFA` background. Clinical login convention. Transition 150ms.
 2. **Refined card shadow**: Multi-layered shadow `0 1px 2px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.03)` — the card should feel like it floats above the dark background. Combined with `1px solid #E5E7EB` border.
 3. **Timer cleanup**: Track every `setInterval` and `setTimeout` via refs, clear all on unmount.
 4. **Consolidated active field state**: Single `activeField` state (`'username' | 'password' | 'done' | null`) instead of separate booleans. `'done'` state indicates typing is complete and button is ready.
 5. **Accessibility**: `role="status"` + `aria-label` on outer container. Cursor pipes `aria-hidden="true"`. Card entrance `scale: 0.98` (not 0).
 6. **User-initiated login**: After typing completes, the "Log In" button is clearly interactive. Hover state (slight darken), cursor: pointer, and the button should feel like an invitation to click. This is the one moment of user agency in the boot sequence — make it satisfying.
 7. **Natural typing pace**: 80ms/char for username, 60ms/dot for password. Deliberate and readable, not frantically fast.
 ### Implementation Pattern
 ```tsx
 import { useState, useEffect, useCallback, useRef } from 'react'
 import { motion } from 'framer-motion'
 import { Shield } from 'lucide-react'
 interface LoginScreenProps {
  onComplete: () => void
 }
 // Key state
 const [username, setUsername] = useState('')
 const [passwordDots, setPasswordDots] = useState(0)
 const [showCursor, setShowCursor] = useState(true)
 const [activeField, setActiveField] = useState<'username' | 'password' | 'done' | null>('username')
 const [buttonPressed, setButtonPressed] = useState(false)
 const [isExiting, setIsExiting] = useState(false)
 const [typingComplete, setTypingComplete] = useState(false)
 const fullUsername = 'A.CHARLWOOD'
 const passwordLength = 8
 ```
 Card structure:
 ```tsx
 <motion.div
  className="bg-white"
  style={{
    width: '320px',
    padding: '32px',
    borderRadius: '12px',
    border: '1px solid #E5E7EB',
    boxShadow: '0 1px 2px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.03)',
  }}
  initial={{ opacity: 0, scale: 0.98 }}
  animate={isExiting ? { scale: 1.03, opacity: 0 } : { scale: 1, opacity: 1 }}
  transition={{ duration: 0.2, ease: 'easeOut' }}
 >
 ```
 Branding header:
 ```tsx
 <div className="flex flex-col items-center" style={{ marginBottom: '28px' }}>
  <div style={{
    padding: '10px',
    borderRadius: '8px',
    backgroundColor: 'rgba(0, 94, 184, 0.07)',
    marginBottom: '10px',
  }}>
    <Shield size={26} style={{ color: '#005EB8' }} strokeWidth={2.5} />
  </div>
  <span style={{
    fontFamily: "'[UI font]', system-ui, sans-serif",
    fontSize: '13px', fontWeight: 600,
    color: '#64748B', letterSpacing: '0.01em',
  }}>CareerRecord PMR</span>
  <span style={{
    fontFamily: "'[UI font]', system-ui, sans-serif",
    fontSize: '11px', fontWeight: 400,
    color: '#94A3B8', marginTop: '2px',
  }}>Clinical Information System</span>
 </div>
 ```
 Input field pattern (username example):
 ```tsx
 <div style={{
  width: '100%',
  padding: '9px 11px',
  fontFamily: "'Geist Mono', 'Fira Code', monospace",
  fontSize: '13px',
  backgroundColor: activeField === 'username' ? '#FFFFFF' : '#FAFAFA',
  border: activeField === 'username' ? '1px solid #005EB8' : '1px solid #E5E7EB',
  borderRadius: '4px',
  color: '#111827',
  minHeight: '38px',
  display: 'flex',
  alignItems: 'center',
 }}>
  <span>{username}</span>
  {activeField === 'username' && (
    <span style={{ opacity: showCursor ? 1 : 0, color: '#005EB8' }} aria-hidden="true">|</span>
  )}
 </div>
 ```
 Login button (interactive — user clicks to proceed):
 ```tsx
 <button
  onClick={typingComplete ? handleLogin : undefined}
  disabled={!typingComplete}
  style={{
    width: '100%',
    padding: '10px 16px',
    fontFamily: "'[UI font]', system-ui, sans-serif",
    fontSize: '14px', fontWeight: 600,
    color: '#FFFFFF',
    backgroundColor: buttonPressed ? '#004494' : '#005EB8',
    border: 'none',
    borderRadius: '4px',
    cursor: typingComplete ? 'pointer' : 'default',
    opacity: typingComplete ? 1 : 0.6,
    transition: 'background-color 150ms, opacity 300ms',
  }}
 >Log In</button>
 ```
 Typing sequence (reduced motion branch):
 ```tsx
 if (prefersReducedMotion) {
  setUsername(fullUsername)
  setPasswordDots(passwordLength)
  setActiveField('done')
  setTypingComplete(true)
  // Button is immediately available for user to click
  return
 }
 // Normal: username at 80ms/char, 300ms pause, password at 60ms/dot
 // After typing completes: setTypingComplete(true), button becomes interactive
 // User clicks "Log In" to proceed — no auto-click
 ```
 Footer:
 ```tsx
 <div style={{ marginTop: '22px', paddingTop: '18px', borderTop: '1px solid #E5E7EB' }}>
  <p style={{
    fontFamily: "'[UI font]', system-ui, sans-serif",
    fontSize: '11px', color: '#94A3B8', textAlign: 'center',
  }}>Secure clinical system login</p>
 </div>
 ```
@@ -1,522 +0,0 @@
 # Design 1: The Compression
 > A scroll-driven storytelling experience in 3 acts that ENACTS Andy's core skill — compressing raw data chaos into clean insight.
 ---
 ## Overview
 The Compression is a scrollytelling portfolio that transforms the act of reading a CV into an emotional experience. The page is structured as a three-act narrative controlled entirely by scroll position. The user doesn't just learn that Andy compresses months of manual analysis into 3 days — they FEEL it.
 **Act 1 "The Raw Data"** overwhelms the user with a wall of simulated prescribing data — drug names, BNF codes, costs, patient IDs — scrolling upward in green monospaced text on black. It's deliberately uncomfortable. This is the problem Andy solves every day.
 **Act 2 "The Algorithm"** transforms the chaos in real-time as the user scrolls. Data lines cluster, group, sort, and collapse. Career cards appear during the transformation, each representing a stage in Andy's growing capability. The transformation becomes more sophisticated as roles progress from pharmacy management to population health analytics.
 **Act 3 "The Insight"** delivers the payoff: clean, minimal output. Key numbers as beautiful data cards. Skills as animated gauges. Education and projects in calm, white-space-rich layout. The emotional contrast with Act 1 is the entire point.
 The scroll position is the playback head. Fast scrollers get the highlights. Slow scrollers get the full show. Scrolling backward reverses everything. The user controls the pace of revelation — exactly how Andy controls the pace of a stakeholder presentation.
 ### Why This Design
 Scroll-driven storytelling achieves 400% higher engagement than static content. But more importantly, this design doesn't just DESCRIBE Andy's value proposition — it DEMONSTRATES it. By the time a recruiter reaches Act 3, they've viscerally experienced what it feels like to have raw data compressed into clean insight. That's Andy's pitch, made physical.
 ---
 ## ECG Transition
 **Starting frame:** Andy's name, neon green (#00FF41), on pure black. Static.
 ### Sequence (2.2 seconds total)
 1. **Destabilize** (400ms): The neon green letterforms of Andy's name begin to flicker — not uniformly, but character-by-character, as if each letter is a data point losing coherence. Individual pixels at the edges of the letters start detaching, drifting 1-2px from their positions. The name is becoming unstable.
 2. **Decompose** (600ms): The letters break apart completely. Each character disintegrates into a small cluster of monospaced character fragments — not random pixels, but recognizable text fragments: drug names, BNF codes, cost figures, patient IDs. The fragments scatter outward from each letter's position, decelerating with spring physics. The green shifts from neon (#00FF41) to a dimmer data-green (#3a6b45) as fragments spread.
 3. **Grid snap** (500ms): The scattered fragments snap into grid positions — monospaced rows, left-aligned, filling the viewport. They're now readable as lines of simulated prescribing data. The grid formation happens with a satisfying staccato rhythm, rows snapping into place from top to bottom with 20ms stagger. The name "ANDY CHARLWOOD" dissolves last, its characters reassembling into a header row at the top of the data wall: `PATIENT_DATASET // CHARLWOOD.A // NORFOLK_ICB`.
 4. **Data wall live** (200ms): The data wall begins scrolling upward automatically for a brief moment (2-3 rows), establishing the scrolling data aesthetic. Then it pauses, waiting for the user's scroll input. The background has remained black throughout — no seam between the intro and Act 1. The transition IS Act 1 beginning.
 ### Why This Transition Works
 There is no seam. The neon green name from the ECG intro literally decomposes into the raw data that forms Act 1's visual foundation. The user's eye follows a continuous transformation: name → fragments → data rows. The emotional shift is from "that was a cool animation" to "wait, what is all this data?" — which is exactly the disorientation Act 1 is designed to create.
 ---
 ## Visual System
 ### Color Journey (Scroll-Driven)
 The entire page's color palette transitions continuously as the user scrolls, creating an unmistakable sense of progression:
 | Scroll Position | Background | Text Primary | Accent | Emotional Register |
 |----------------|------------|-------------|--------|-------------------|
 | 0% (Act 1 start) | Black #000000 | ECG green #00FF41 | — | Overwhelm, clinical |
 | 15% (Act 1 mid) | Black #000000 | Dim green #3a6b45 | — | Dense, relentless |
 | 30% (Act 2 start) | Charcoal #1e293b | Dim green → slate #94a3b8 | Teal #00897B | Transformation beginning |
 | 50% (Act 2 mid) | Slate #334155 | Light slate #e2e8f0 | Teal #00897B | Organization, clarity |
 | 70% (Act 3 start) | Light gray #f8fafc | Charcoal #1e293b | Teal #00897B | Relief, clean |
 | 100% (Act 3 end) | White #FFFFFF | Dark #0f172a | Cyan accent #00D4AA | Confidence, resolution |
 The background transition is implemented as a continuous CSS custom property (`--bg-progress`) mapped to scroll position, interpolating between color stops. No hard cuts — the eye never perceives a boundary between acts.
 ### Typography
 Three typefaces, each with a clear role in the narrative:
 - **IBM Plex Mono 400** — The data voice. Used for all raw data text in Act 1, metric numbers throughout, code snippets, and the header row. Set at 13px/1.6 in the data wall, 16px/1.4 for inline metrics. This is the typeface of the problem.
 - **Space Grotesk 500, 700** — The heading voice. Used for section headings, role titles, and the name in the hero. Set at 32-48px for section headings, 24px for role titles. Weight 700 for primary headings, 500 for subheadings. This is the typeface of structure.
 - **IBM Plex Sans 400, 450** — The body voice. Used for all descriptive text, bullet points, and the profile summary. Set at 16px/1.7 for body text, 14px/1.6 for secondary text. Weight 450 (slightly heavier than regular) for body text to maintain readability against busy backgrounds. This is the typeface of insight.
 ### Texture and Ambient Elements
 - **Dot grid**: A faint grid of dots at 3% opacity, visible from Act 2 onward. Grid spacing 24px. The grid represents structure emerging from chaos — it's not visible in Act 1 (there is no structure yet) but gradually appears as the data organizes. Mouse proximity brightens the nearest grid intersection to 15% opacity within a 60px radius, creating a subtle "spotlight" effect.
 - **Gradient glows**: Behind key data cards and metric numbers in Act 3, soft radial gradients (teal at 8-10% opacity) provide visual warmth and draw the eye. These are 200-300px diameter, centered on each element, and breathe (subtle scale oscillation at 4s period).
 - **Data traces**: Thin horizontal lines (1px, 5% opacity) span the full viewport width behind content in Acts 2-3, suggesting the remnants of the data wall's grid structure. Content sits on these traces like data on a chart.
 ### Motion Principles
 - **Easing**: All animations use `cubic-bezier(0.16, 1, 0.3, 1)` — a custom ease-out that starts fast and decelerates smoothly. This gives everything a confident, decisive feel, matching the "compression" metaphor (fast analysis, clean output).
 - **Scroll-driven**: Every animation is mapped to scroll position via normalized 0-1 progress values. No time-based animations in the main content (except ambient loops like the gradient glow breathing). The user IS the timeline.
 - **Number rendering**: Metric numbers render digit-by-digit at 30ms per digit when counting up. The count rate is tied to scroll velocity — scroll faster, numbers count faster. This creates a visceral connection between user effort and data processing.
 - **SVG path drawing**: All drawn lines (timeline paths, skill bar fills, education path) animate via `stroke-dashoffset` mapped to scroll progress. The drawing direction always follows the data flow direction (left-to-right or top-to-bottom).
 - **GPU compositing**: All transforms use translate3d, opacity, or scale exclusively. No animations trigger layout or paint (no width/height/margin animations). This ensures 60fps on mid-range devices.
 ---
 ## Section-by-Section Design
 ### Act 1: The Raw Data
 **Scroll range:** 0% - 25% of total scroll depth.
 **What the user sees:** A full-viewport wall of monospaced green text on black — simulated prescribing data. Rows contain realistic-looking drug names, BNF codes, practice codes, cost figures, and patient counts. The data scrolls upward at a rate proportional to the user's scroll, creating a "Matrix" effect but with real pharmaceutical data terminology.
 **Data wall composition:**
 ```
 BNF 0407010H0  MORPHINE SULFATE M/R    PJ68043  £14.82  x120  NORFOLK_ICB
 BNF 0212000Y0  ATORVASTATIN            D81024   £2.16   x890  NORFOLK_ICB
 BNF 0601022B0  METFORMIN HCL           PJ68043  £1.04   x445  NORFOLK_ICB
 BNF 0205051R0  RAMIPRIL                D81024   £1.89   x670  NORFOLK_ICB
 ...
 ```
 The data is generated procedurally (not hardcoded) from arrays of real BNF codes, drug names, practice codes, and cost ranges. Each row is unique but plausible. Approximately 200-300 rows are generated, with only ~30 visible at any time.
 **Header row** (persistent at top): `PATIENT_DATASET // CHARLWOOD.A // NORFOLK_ICB` in brighter green (#00FF41), with a subtle underline. This is the remnant of Andy's name from the ECG transition.
 **Scroll behavior:** As the user scrolls, the data wall scrolls upward. The scroll rate is 1.5x the user's scroll speed, creating a slight acceleration that enhances the overwhelming feeling. At 15% scroll, some rows begin to dim (opacity dropping to 30%), creating depth — foreground rows are bright, background rows are faded.
 **Emotional intent:** Discomfort. Information overload. "How does anyone make sense of this?" This is the state of prescribing data before Andy touches it.
 **Ambient detail:** A faint scan line sweeps downward across the data wall every 8 seconds (very subtle, 2% opacity). A tiny blinking cursor sits at the bottom-right of the data wall, suggesting a terminal awaiting input.
 ### Act 2: The Algorithm
 **Scroll range:** 25% - 60% of total scroll depth.
 **What the user sees:** The raw data begins to transform. This is the core of the experience — a choreographed sequence of data manipulations that correspond to Andy's career progression.
 **Transformation sequence (mapped to scroll progress within Act 2):**
 **Phase 1 — Sorting (0-20% of Act 2):** Data rows rearrange. Rows with similar BNF codes cluster together. The movement is animated — rows slide vertically to their new positions, creating a satisfying cascade of shifting text. Some rows highlight in teal (#00897B) as they're "selected" by the algorithm. A label appears at screen edge: `SORTING BY BNF_CODE...`
 Simultaneously, the first career card slides in from the right: **Pharmacy Manager, Tesco PLC (2017-2022)**. It's a card with a dark background (#1e293b), rounded corners, and a teal left border. The card contains the role title, date range, and 2-3 key bullets. It appears alongside the sorting transformation, contextualizing it: Andy's first role involved identifying patterns (the asthma screening process adopted nationally).
 **Phase 2 — Grouping (20-45% of Act 2):** Sorted rows collapse into groups. 10 individual rows of the same drug compress into a single summary row showing the drug name, total cost, and patient count. The compression animation is physical — rows accordion inward, stacking on top of each other until only the summary remains. The data wall is visibly shrinking. More whitespace appears between groups.
 The second career card slides in: **High-Cost Drugs & Interface Pharmacist, NHS ICB (2022-2024)**. The role's key achievement — the Blueteq automation (70% form reduction, 200 hours saved) — is visualized as a mini-animation within the card: a stack of form icons compresses to 30% of its original height.
 **Phase 3 — Analysis (45-70% of Act 2):** Grouped data transforms into structured visualizations. Cost figures align into bar segments. Patient counts form columns. The monospaced text is giving way to geometric shapes — rectangles, lines, circles. The background has lightened to slate. The data wall is no longer recognizable as raw text — it's becoming a dashboard.
 The third career card slides in: **Deputy Head, Population Health & Data Analysis (2024-Present)**. The £220M budget management and the switching algorithm achievements appear. Key metric: `14,000 patients identified` counts up from zero as the user scrolls past.
 **Phase 4 — Compression (70-100% of Act 2):** This is the signature moment. All remaining data elements — the bars, columns, shapes — physically compress toward the center of the screen. They funnel through a narrow "processing" zone (visualized as two converging lines forming a V-shape or funnel). On the other side, clean data cards emerge, fully formed. The funnel animation is tied directly to scroll — scroll backward and everything reverses, data expanding back out of the funnel.
 The fourth career card slides in: **Interim Head, Population Health & Data Analysis (2025)**. The £14.6M efficiency programme headline. This number counts up dramatically: `£14,600,000` digit by digit, each digit appearing with a micro-flash of teal light.
 **Background transition:** Throughout Act 2, the background continuously transitions from black (#000000) through charcoal (#1e293b) to slate (#334155). The text color shifts from dim green (#3a6b45) to light slate (#e2e8f0). By the end of Act 2, the page no longer looks like a terminal — it looks like a modern dashboard.
 ### Act 3: The Insight
 **Scroll range:** 60% - 100% of total scroll depth.
 **What the user sees:** Clean, beautiful, minimal content. Maximum whitespace. The emotional relief after Acts 1-2 makes this content feel earned and precious. This is "normal" portfolio layout elevated by contrast.
 **Background:** Continues transitioning from slate (#334155) → light gray (#f8fafc) → white (#FFFFFF). By the Skills section, the background is fully white.
 #### Hero (60-65% scroll)
 Andy's name is already visible (persistent header from Act 1). As Act 3 begins, the profile summary text types itself character-by-character synchronized to scroll position. Stop scrolling = stop typing. Resume scrolling = resume typing. The text appears in IBM Plex Sans 450, 18px, charcoal (#1e293b). A thin teal line (#00897B) underscores the summary once complete.
 Below the summary, three "impact pills" fade in with stagger: `£14.6M Efficiency Programme` | `1.2M Population Served` | `£220M Budget Managed`. Each pill has a teal border and a subtle gradient glow.
 #### Skills (65-75% scroll)
 Skills are displayed as horizontal bar charts that draw themselves left-to-right, synchronized to scroll position. The scroll-to-progress mapping means each bar fills as the user scrolls through the skills section.
 **Layout:** Two columns on desktop, single column on mobile. Each row contains:
 - Skill name (IBM Plex Sans 450, 15px, left-aligned)
 - Horizontal bar (height 8px, rounded ends)
 - Proficiency percentage (IBM Plex Mono 400, 14px, right-aligned, counts up as bar fills)
 **Bar fill gradient:** Each bar fills with a gradient that shifts from cool blue (#60a5fa) at 0% to teal (#00897B) at 50% to warm cyan (#00D4AA) at 100%. The gradient position corresponds to the proficiency level, so higher-skilled bars are warmer-colored.
 **Skill categories** are separated by subtle headings (Space Grotesk 500, 13px, uppercase, tracking 0.1em, slate #64748b):
 - TECHNICAL: Python, SQL, Power BI, JavaScript/TypeScript, Algorithm Design, Data Pipelines
 - HEALTHCARE: Medicines Optimisation, Population Health, NICE Implementation, Health Economics
 - LEADERSHIP: Budget Management, Stakeholder Engagement, Team Development, Change Management
 **Interaction:** Hovering a skill bar causes it to brighten slightly and the percentage number to pulse. The nearest dot-grid intersections brighten. A tooltip with a one-line description fades in after 300ms hover dwell.
 #### Experience (75-85% scroll)
 Experience entries are displayed as timeline cards that "assemble" as the user scrolls past each one's trigger point. The assembly is sequential and scroll-driven:
 1. **Title draws** (first 20% of card's scroll range): The role title types itself in Space Grotesk 700, 22px, teal (#00897B).
 2. **Company slides in** (20-35%): The company name and date range slide in from the left, IBM Plex Sans 400, 15px, slate (#64748b).
 3. **Context line fades** (35-50%): The one-line role context fades in.
 4. **Bullets sequence** (50-100%): Each bullet point fades in from below with a 100ms stagger. Key metrics within bullets (£14.6M, 14,000, 200 hours, £2.6M, £1M, 50%) count up from zero as they appear, with the count rate tied to scroll velocity.
 **Timeline visual:** A thin vertical line (2px, teal at 20% opacity) connects the cards. Small nodes (8px circles) mark each role. As the user scrolls past a node, it fills with solid teal and emits a subtle radial pulse animation.
 **Card layout:** Each card has generous padding (32px), a very subtle left border (3px, teal at 40% opacity), and sits on a barely-visible card surface (#f8fafc on white background). On hover, the card surface becomes #f1f5f9 and the left border reaches full teal opacity.
 **Achievement highlights:** Key achievements within each role have metric numbers displayed in IBM Plex Mono 700, teal (#00897B), with a faint gradient glow behind them. These are the numbers that counted up from zero — they remain vivid and prominent.
 Note: The career cards from Act 2 are NOT repeated here. Act 2 showed the career in the context of transformation. Act 3's Experience section provides the complete, detailed content. However, if the user scrolls back to Act 2, the career cards there are still visible and interactive. The two views complement each other — Act 2 is the narrative, Act 3 is the reference.
 #### Education (85-92% scroll)
 A winding SVG path draws itself as the user scrolls, connecting education milestones. The path is a gentle S-curve that moves top-to-bottom, with milestone nodes positioned along it.
 **Path drawing:** The SVG `<path>` has a `stroke-dasharray` equal to its total length and a `stroke-dashoffset` that transitions from total length (invisible) to 0 (fully drawn) mapped to scroll progress. The stroke is 2px, teal (#00897B) at 40% opacity, with a brighter 4px glow version behind it at 15% opacity.
 **Milestone nodes** (positioned along the path):
 1. **A-Levels (2009-2011)**: Mathematics A*, Chemistry B, Politics C. Highworth Grammar School. Node icon: a small graduation cap SVG.
 2. **MPharm (2011-2015)**: University of East Anglia, 2:1 Honours. Node icon: a flask/molecule SVG. The research project branches off as a sidebar annotation (a short branching path from the main line): "Drug delivery and cocrystals: 75.1% (Distinction)."
 3. **GPhC Registration (2016)**: General Pharmaceutical Council. Node icon: a shield/badge SVG.
 4. **Mary Seacole Programme (2018)**: NHS Leadership Academy, 78%. Node icon: a leadership/star SVG.
 Each node starts as an empty circle (2px border, no fill). As the drawn path reaches the node, it fills with solid teal and a label card fades in beside it. The branch for the research project draws after the MPharm node fills.
 #### Projects (92-97% scroll)
 Each project occupies approximately one-third of a viewport height. As the user scrolls INTO a project, its visualization builds in real-time:
 **Project 1 — Switching Algorithm:**
 A network of small dots (representing patients) appears scattered randomly. As the user scrolls, the dots route through a funnel visualization (two converging lines). On the output side, they emerge organized into groups. A counter shows: `14,000 patients identified → £2.6M annual savings`. The funnel is the algorithm. The dots are the patients. The counter ties it to impact.
 **Project 2 — Blueteq Automation:**
 A stack of form icons (representing prior approval forms) appears on the left. As the user scrolls, 70% of the forms slide off-screen (fade out to the left), leaving 30% remaining. A counter shows: `70% reduction | 200 hours saved | 7-8 hrs/week ongoing`. The visual is simple and devastating — most of the work just disappears.
 **Project 3 — Sankey Chart Tool:**
 An actual mini Sankey diagram draws itself as the user scrolls. Colored flows move from left-side nodes (drug categories) through middle nodes (treatment stages) to right-side nodes (outcomes). The flows animate with a flowing particle effect along the paths. This is a working visualization of what Andy built.
 **Project 4 — Controlled Drug Monitoring:**
 A timeline visualization showing a patient's morphine equivalent exposure over time. A line chart draws itself left-to-right with scroll, with a horizontal threshold line marking "high risk." When the drawn line crosses the threshold, it changes color from teal to coral (#FF6B6B) and pulses. Counter: `Population-scale patient safety analysis`.
 #### Contact (97-100% scroll)
 The scroll reaches "the end of the data." A summary card appears, pulling together the key numbers from the entire page into a single impact statement:
 ```
 £14.6M efficiency programme identified
 14,000 patients flagged by algorithm
 £2.6M annual savings on target
 1.2 million population served
 ```
 Each number is displayed in IBM Plex Mono 700, 28px, teal, with a gentle gradient glow. They appear with staggered fade-in as the user scrolls to the final section.
 Below the summary, the contact form slides up as the final "output" of the data pipeline. The form has a minimal design: Name, Email, Message fields with clean borders, a teal submit button, and contact details (email, phone, location) displayed alongside.
 A subtle callback to Act 1: the form's background has a barely-visible (1% opacity) pattern of the raw data text from the data wall, visible only on close inspection. The data is still there — it's just been compressed into clean insight.
 ---
 ## Interactions and Micro-interactions
 ### The Living Grid (Ambient)
 A faint dot grid (3% opacity, 24px spacing) covers the viewport from Act 2 onward. This grid is interactive:
 - **Mouse proximity**: The nearest grid intersection to the cursor brightens to 15% opacity, with 2-3 adjacent intersections at 8% opacity. Creates a subtle "spotlight" effect as the user moves their mouse. Radius ~60px.
 - **Scroll activity**: When the user is actively scrolling, grid intersections along the scroll direction briefly flash (5% → 10% → 5% over 200ms), creating a cascading "data processing" ripple.
 - **Section transitions**: When crossing from one section to another, a horizontal wave of grid brightening sweeps across the viewport (left to right, 400ms), marking the boundary.
 Implementation: CSS custom properties for grid opacity, updated via requestAnimationFrame tied to mouse position and scroll events. The grid is a repeating CSS background pattern, not individual DOM elements.
 ### Number Count-ups
 Every significant metric in the document counts up from zero to its final value:
 - Count rate is proportional to scroll velocity (faster scroll = faster count)
 - Numbers render digit-by-digit at 30ms per digit for large numbers (e.g., £14,600,000 takes ~270ms at base rate)
 - A brief teal flash illuminates each digit as it appears
 - Once fully counted, numbers hold their final value permanently (no re-counting on re-scroll)
 - Scrolling backward past a number's trigger point smoothly counts it back down to zero
 Implementation: Custom `useScrollCountUp` hook. Accepts target number, scroll range (start/end percentage), and formatting options. Returns the current display value based on scroll position. Uses `useTransform` from Framer Motion to map scroll progress to number value.
 ### Card Assembly Animations
 Experience and project cards build themselves as the user scrolls:
 - Each card has 4-6 sub-elements that animate sequentially
 - The sequence is tied to scroll progress within the card's trigger range
 - Easing is `cubic-bezier(0.16, 1, 0.3, 1)` for all movements
 - Elements animate in from consistent directions: titles type-in, subtitles slide from left, body text fades from below, metrics scale up from zero
 - Scrolling backward reverses the assembly — elements retreat in reverse order
 ### Data Wall Interactions (Act 1)
 The data wall is primarily passive (scroll-driven), but has two subtle interactive layers:
 - **Row highlighting**: The row nearest to the viewport center has slightly brighter text (50% → 70% opacity). Adjacent rows are progressively dimmer. This creates a "focused row" effect that tracks with scroll.
 - **Mouse hover**: Hovering over a specific data row highlights it in brighter green and displays a tiny tooltip: "1 of 247,000 prescribing records" (or similar contextual text). This reinforces that each row represents real data.
 ### Scroll Progress Indicator
 A thin progress bar sits at the top of the viewport (2px height, full width):
 - **Color**: Transitions through the same color journey as the page (green → teal → cyan)
 - **Width**: Maps directly to scroll percentage (0% = left edge, 100% = full width)
 - **Act markers**: Three small notches at 25%, 60%, and 100% mark the act boundaries
 - **Label**: A tiny "Act 1/3", "Act 2/3", "Act 3/3" label sits above the progress bar, updating at act boundaries
 ---
 ## Navigation
 ### Persistent Header
 A minimal header sits at the top of the viewport with `position: fixed`:
 - **Content**: Andy's name (Space Grotesk 700, 16px) on the left, act indicator on the right
 - **Appearance**: Transparent in Act 1 (text in green), transitions to a subtle frosted-glass background (`backdrop-filter: blur(12px)`, white at 80% opacity) in Act 3
 - **Act navigation**: Three dots in the header represent the three acts. The active act's dot is filled teal. Clicking a dot smooth-scrolls to that act's start position.
 ### Skip to Content
 For users who want to bypass the narrative experience:
 - A "Skip to CV →" link appears at bottom-right during Acts 1-2 (IBM Plex Sans 400, 14px, teal)
 - Clicking it smooth-scrolls directly to Act 3 (the clean CV content)
 - The link disappears once the user reaches Act 3
 ### Section Navigation (Act 3)
 Within Act 3, a floating side navigation appears (similar to the existing FloatingNav):
 - Small dots aligned vertically on the right edge
 - Each dot corresponds to a section: Skills, Experience, Education, Projects, Contact
 - Active section dot is filled teal, others are outlined
 - Clicking a dot smooth-scrolls to that section
 - Dots only appear when Act 3 is active
 ### Keyboard Navigation
 - Arrow Up/Down: Scroll by section
 - 1/2/3: Jump to Act 1/2/3
 - Escape: Skip to Act 3 (same as "Skip to CV")
 - Tab: Focuses interactive elements in DOM order
 ---
 ## Responsive Strategy
 ### Desktop (>1024px)
 The full experience: data wall with 80-character rows, wide career cards alongside the transformation, two-column skill bars, generous whitespace in Act 3. The dot-grid ambient effect is active. Mouse interactions (hover, proximity) are fully enabled. Data wall shows ~30 visible rows at a time.
 ### Tablet (768px - 1024px)
 Simplified data wall with 50-character rows (truncated BNF data). Career cards in Act 2 appear below the transformation area rather than alongside. Single-column skill bars. The dot-grid effect is reduced to major intersections only (48px spacing). Data wall shows ~25 visible rows.
 ### Mobile (<768px)
 The scroll-driven narrative is preserved — this is scroll's native strength. Key adaptations:
 - **Data wall**: 30-character rows, ~20 visible at a time. Fewer data fields per row (drug name + cost only). The overwhelming effect is maintained through density rather than width.
 - **Act 2 transformation**: Simplified grouping animations (rows collapse in place rather than rearranging). Career cards appear in-flow, not overlaid.
 - **Act 3**: Single-column layout throughout. Skill bars are full-width. Timeline cards are full-width with left border. Projects stack vertically with reduced visualization complexity (Sankey chart becomes a simplified flow, funnel is a simple before/after).
 - **Ambient effects**: Dot-grid disabled. Gradient glows reduced to 5% opacity. Scroll progress bar and act indicators remain.
 - **Touch**: All scroll-driven animations work identically with touch scroll. Hover interactions (grid brightening, card hover states) are disabled.
 ### Ultra-wide (>1440px)
 Content is capped at 1200px max-width. The data wall extends to full viewport width (data rows span the entire screen). The extra horizontal space enhances the "wall of data" effect in Act 1.
 ---
 ## Technical Implementation
 ### Scroll Engine
 The scroll system is the backbone of the entire experience. It maps a single scroll position to multiple parallel animation timelines.
 ```
 Architecture:
 - Total scroll depth: ~4x viewport height (tuned for comfortable scroll pace)
 - Framer Motion useScroll() provides scrollYProgress (0 to 1)
 - useTransform() maps scrollYProgress ranges to individual animation values
 - Each section registers its scroll range via a config object:
    { start: 0.6, end: 0.75, ... } → Skills section occupies 60-75% of scroll
 - Within each section, sub-animations are further mapped to the section's 0-1 range
 ```
 ### Data Wall Generation
 The Act 1 data wall is procedurally generated at mount time:
 ```
 Data arrays:
 - ~50 real BNF codes (from public BNF data)
 - ~80 drug names (generic names, publicly available)
 - ~20 practice codes (anonymized format: PJ68xxx, D81xxx)
 - Cost ranges (£0.50 - £200.00, realistic distributions)
 - Patient counts (x50 - x2000)
 Generation:
 - 250-300 rows generated by randomly combining array elements
 - Each row is a pre-formatted string matching fixed-width columns
 - Rows are memoized (React.useMemo) — no re-generation on scroll
 - Only ~30 rows are rendered at any time (virtualized list)
 ```
 ### Scroll-Driven Background
 The background color transitions via CSS custom properties:
 ```
 Implementation:
 - A single --scroll-progress CSS variable (0 to 1) updated via requestAnimationFrame
 - Background uses a multi-stop gradient positioned by --scroll-progress
 - Gradient stops correspond to act boundaries
 - The gradient is applied to a fixed, full-viewport background div
 - No JavaScript per-frame color calculation — the browser interpolates
 ```
 ### Number Counter Hook
 ```
 useScrollCountUp(target, scrollRange, options):
  - target: final number (e.g., 14600000)
  - scrollRange: { start: 0.78, end: 0.82 } — scroll range where count happens
  - options: { prefix: '£', separator: ',', digits: true }
  - Returns: formatted string of current value based on scroll position
  - Uses Framer Motion useTransform to map scroll → number
  - digit-by-digit mode: each digit position updates independently at 30ms intervals
 ```
 ### SVG Path Drawing
 Education path and project visualizations use SVG stroke animation:
 ```
 Implementation:
 - SVG path has stroke-dasharray = path.getTotalLength()
 - stroke-dashoffset transitions from totalLength (hidden) to 0 (visible)
 - Offset value is mapped to scroll progress via useTransform
 - A second, thicker, blurred path behind creates the glow effect
 - Both paths update simultaneously for consistent glow
 ```
 ### Performance Budget
 - **Target**: 60fps throughout on mid-range devices (4-core CPU, integrated GPU)
 - **DOM elements**: <200 in Act 1, <400 in Act 3. Data wall uses virtualization.
 - **Canvas**: No canvas used — all effects are CSS/SVG. This simplifies the rendering pipeline.
 - **Composited properties only**: All animations use transform (translate3d) or opacity. No width, height, margin, padding, top, left animations.
 - **will-change**: Applied to elements that animate frequently (data wall rows, card elements, background div)
 - **IntersectionObserver**: Used to disable off-screen animations. Sections outside the viewport don't compute scroll mappings.
 - **Bundle**: Framer Motion tree-shaken to ~30kb gzip. No D3 dependency. Total JS budget: <80kb gzip.
 ### Reduced Motion
 When `prefers-reduced-motion: reduce` is active:
 - Data wall shows a static screenshot-like snapshot (no scrolling data)
 - Act structure is removed — all content displays as a standard scrolling page
 - Section reveals use simple opacity fades (200ms) instead of assembly animations
 - Number counters display final values immediately (no count-up)
 - SVG paths are fully drawn (no progressive draw)
 - Dot-grid ambient effect is disabled
 - Progress bar remains functional for navigation
 ---
 ## Accessibility
 ### ARIA Structure
 ```html
 <main aria-label="Andy Charlwood - Portfolio">
  <section aria-label="Act 1: Raw Data Visualization" role="region">
    <div aria-hidden="true" aria-description="Decorative visualization of raw prescribing data">
      <!-- Data wall (purely decorative) -->
    </div>
  </section>
  <section aria-label="Act 2: Data Transformation" role="region">
    <!-- Transformation visuals (aria-hidden) + Career cards (accessible) -->
  </section>
  <section aria-label="Professional Profile" role="region">
    <!-- Hero, Skills, Experience, Education, Projects, Contact -->
    <!-- Each subsection has its own landmark heading -->
  </section>
 </main>
 ```
 ### Screen Reader Experience
 Screen readers skip Acts 1-2 decorative content entirely and receive a clean, structured CV:
 1. Andy Charlwood — Profile summary
 2. Core Skills (structured list)
 3. Professional Experience (chronological, with full role details)
 4. Education and Registration
 5. Projects (with outcomes and metrics)
 6. Contact information
 This is the same content as Act 3, in standard semantic HTML with proper heading hierarchy (h1 → h2 → h3).
 ### Keyboard Navigation
 - **Tab order**: Follows logical CV structure regardless of visual act position
 - **Skip links**: "Skip to main content" bypasses all decorative elements
 - **Act navigation**: Number keys 1-3 jump to acts, clearly labeled in focus order
 - **Focus indicators**: All interactive elements have visible focus rings (2px solid teal, 2px offset)
 ### Color Contrast
 - Act 1: Green (#00FF41) on black (#000000) = contrast ratio 10.5:1 (AAA)
 - Act 2: Light slate (#e2e8f0) on slate (#334155) = contrast ratio 7.2:1 (AAA)
 - Act 3: Dark (#0f172a) on white (#FFFFFF) = contrast ratio 17.1:1 (AAA)
 - Teal accent (#00897B) on white (#FFFFFF) = contrast ratio 4.56:1 (AA for normal text, AAA for large text)
 ### Scroll Depth
 Total scroll depth is capped at approximately 4 viewport heights. This is comfortable for the narrative while not exhausting for keyboard/switch users. The "Skip to CV" shortcut is always available.
 ---
 ## What Makes This Special
 1. **It ENACTS the value proposition.** The user doesn't read "I compress months of analysis into 3 days" — they experience overwhelming data being compressed into clean insight. The medium IS the message.
 2. **The emotional arc is engineered.** Act 1 creates discomfort. Act 2 provides relief through transformation. Act 3 delivers resolution. This is the same emotional structure as a great presentation, a compelling film, or a satisfying algorithm — start with the problem, show the process, deliver the result.
 3. **Scroll is the perfect input.** Everyone knows how to scroll. The engagement model is proven (400% higher than static). Fast scrollers get the highlights, slow scrollers get the full experience. It works perfectly on mobile where scroll is native. There's no learning curve, no instructions needed.
 4. **The signature moment — The Compression funnel** — is share-worthy. Watching data physically compress through a funnel into clean output, controlled by your scroll, is viscerally satisfying. It's the moment someone takes a screen recording.
 5. **It respects the recruiter's time.** The "Skip to CV" button is always available. A recruiter in a hurry can jump straight to Act 3 and get a clean, professional CV. A recruiter with time gets the full narrative experience. Two audiences, one site.
 6. **The data is authentic.** The Act 1 data wall uses real BNF codes and drug names. The transformation sequence reflects actual data processing operations (sort → group → aggregate → visualize). Andy's domain expertise is woven into the visual DNA of the site, not just its text content.
@@ -1,624 +0,0 @@
 # Design 2: The Dashboard
 ## Overview
 Andy's CV presented as a live operational dashboard — the kind of analytical interface he builds for the NHS, now turned on himself. The medium IS the message.
 This is not a scrolling portfolio with dashboard "styling." It is a fundamentally different navigation paradigm: **tab-switching views** instead of vertical scroll. Each tab is a self-contained viewport with its own optimized layout — bento grids of metric cards, filterable skill panels, an interactive horizontal timeline, a project portfolio with status badges. The user navigates Andy's career the same way Andy navigates the data systems he builds: by switching views, drilling into detail, and reading quantitative signals at a glance.
 This is the most data-dense of all six designs. It is designed for recruiters, hiring managers, and technical leads who appreciate information density and are comfortable with complex interfaces. It rewards exploration and communicates Andy's analytical mindset before a single word of content is read.
 **Key characteristics:**
 - Tab-based view switching replaces scroll-based navigation entirely
 - High information density with multiple data points visible simultaneously
 - Metric cards with large numbers as the primary content unit
 - Adaptive light/dark mode respecting system preference
 - Persistent status bar providing ambient context
 - Quantitative achievements lead — numbers, not prose
 ---
 ## ECG Transition
 **Starting point:** "ANDREW CHARLWOOD" is on screen in neon green (`#00ff41`) on black. The heartbeat trace is complete. The name is fully formed and glowing.
 **Then...**
 ### Phase 1: The Name Dims, the Edges Pulse (400ms)
 The neon green letters hold for a beat, then begin to dim — not disappearing, but reducing to approximately 30% opacity. They remain visible as ghosted characters. Simultaneously, the remnant flatline portions of the heartbeat trace (to the left and right of the name) start pulsing with small, rhythmic blips, as if the heartbeat hasn't stopped — it has migrated to the periphery.
 ### Phase 2: Multi-Channel Ignition (800ms)
 Two additional horizontal traces draw themselves simultaneously across the full viewport width:
 - **Upper trace** at ~30% viewport height in teal (`#00897B`): draws a steady, regular pulse pattern — the rhythm of structured data
 - **Lower trace** at ~70% viewport height in coral (`#FF6B6B`): draws a slower, more organic waveform — the rhythm of clinical observation
 For approximately one second, the screen displays three horizontal traces — teal on top, ghosted green name in the middle, coral on the bottom. The visual effect is a multi-channel patient monitor displaying three simultaneous vital signs. This is a deliberately surprising beat: the user expects the animation to end, and instead it multiplies, signaling that this is a data-rich environment.
 ### Phase 3: Simultaneous Flatline (200ms)
 All three traces flatline at once. A synchronized moment of pure stillness. Three horizontal lines on black. The name is still faintly visible. This 200ms pause is deliberate silence — a beat of tension before the transformation.
 ### Phase 4: Grid Materialization (400ms)
 From the flatline positions, a grid structure fades in. The three horizontal flatlines become the top edges of bento-grid rows. Vertical dividers descend from the top trace line downward, intersecting the middle and bottom traces, dividing the screen into a grid of cells (4 columns x 3 rows on desktop, adapting to viewport). The verticals draw downward over 400ms, staggered left-to-right at 80ms intervals. They use a dim teal (`rgba(0, 137, 123, 0.2)`).
 The background simultaneously shifts from pure black to deep navy (`#0A1628`). The scanline overlay shifts from black to `rgba(10, 22, 40, 0.03)` — subtle dark-blue scanlines that become part of the dashboard texture rather than disappearing.
 ### Phase 5: Content Cascade (500ms)
 The "ANDREW CHARLWOOD" text slides to the top-left corner, scales down, and transitions from ghosted green to clean white. It becomes the dashboard title. The tab bar materializes beside it — each tab label fading in with 80ms stagger. "Overview" receives an active-state underline that draws itself in teal from left to right.
 Each grid cell brightens individually with staggered timing (50ms per cell, top-left to bottom-right). As each cell activates, its KPI value fades in: "10+ years", "14,000 patients", "14.6M", "220M budget", and so on. The cascade reveal takes approximately 500ms for all cells.
 The status bar slides up from the bottom edge of the viewport (the coral trace line becomes the status bar's top border).
 ### Phase 6: Final State
 Deep navy dashboard (`#0A1628`) with bento grid of KPI cards, tab bar at top, status bar at bottom. The three ECG traces have literally become the structural lines of the dashboard layout. The heartbeat didn't end — it crystallized into information architecture.
 **Total transition duration:** ~3 seconds
 **Why this works:** The metaphor is precise. Andy takes raw clinical signals (vital signs, prescribing data) and transforms them into organized, actionable dashboards. The transition demonstrates this competency visually. The multi-channel moment is memorable, and the grid materialization provides a satisfying structural resolution.
 ---
 ## Visual System: Systematic Clarity
 ### Color Palette
 **Adaptive mode** — the dashboard respects `prefers-color-scheme` and provides a manual toggle (persisted to `localStorage`).
 **Light mode:**
 - Background: cool white `#FAFAFA`
 - Surface/cards: `#FFFFFF`
 - Borders: `#E4E4E7` (zinc-200)
 - Text primary: `#09090B` (zinc-950)
 - Text secondary: `#71717A` (zinc-500)
 **Dark mode:**
 - Background: rich black `#09090B`
 - Surface/cards: `#18181B` (zinc-900)
 - Borders: `#27272A` (zinc-800)
 - Text primary: `#FAFAFA` (zinc-50)
 - Text secondary: `#A1A1AA` (zinc-400)
 **Accent colors (consistent across modes):**
 - Primary blue: `#2563EB` — the dominant interactive color. Used for active tab underlines, primary buttons, link states, and chart elements.
 - Emerald: `#10B981` — health/active states. Used for "current" role indicators, active skills, live project badges, and positive metrics.
 - Amber: `#F59E0B` — highlights and notable achievements. Used for standout numbers, awards, and attention-drawing callouts.
 - Coral: `#FF6B6B` — inherited from the site's accent palette. Used sparingly for clinical-domain tagging in capabilities view.
 - Teal: `#00897B` — inherited from the site's primary palette. Used for data/technical-domain tagging and hover states.
 **Full zinc neutral scale** for all grays, ensuring consistent, harmonious neutral tones across both modes.
 ### Typography
 **Single-family system** — Inter for all text, Geist Mono for numbers and data values.
 - **Dashboard title / Hero name:** Inter 600, 48px, tracking `-0.025em`
 - **Tab labels:** Inter 500, 14px, tracking `0.01em`, uppercase
 - **Section headings (within tabs):** Inter 600, 24px, tracking `-0.015em`
 - **Card KPI values:** Geist Mono 600, 48-72px (varies by card size), tracking `-0.02em`
 - **Card labels:** Inter 500, 14px, zinc-500
 - **Body text (bullets, descriptions):** Inter 400, 15px, line-height 1.7
 - **Status bar text:** Inter 400, 13px
 - **Timestamps/dates:** Geist Mono 400, 13px
 Hierarchy is established through size, weight, and tracking only — no decorative font variations. Tight negative tracking at large sizes keeps the typographic texture dense and professional.
 ### Spacing and Grid
 - **Grid system:** CSS Grid, 12-column, 24px gap
 - **Max content width:** 1120px, centered with `auto` margins
 - **Card internal padding:** 24px
 - **Border radius:** 8px for small elements (badges, inputs), 12px for cards, 16px for containers/tab panels
 - **Section spacing within tabs:** 32px between card groups
 - **Consistent 8px base unit** — all spacing values are multiples of 8
 ### Motion
 - **Primary easing:** `cubic-bezier(0.32, 0.72, 0, 1)` (Vercel easing) — fast entry, gentle settle
 - **Reveal animation:** Elements enter with `opacity: 0, translateY: 8px, filter: blur(4px)` and resolve to `opacity: 1, translateY: 0, filter: blur(0)` over 300ms
 - **Stagger interval:** 40ms between sequential elements
 - **Spring parameters:** `{ stiffness: 300, damping: 30 }` for layout animations (card reflow, panel resize)
 - **Tab crossfade:** 150ms fade out, 150ms fade in, with the incoming view's elements staggering in using the reveal animation
 - **Number countup:** Metric card values animate from 0 to target over 800ms using `ease-out` timing, triggered on tab entry
 - **Hover:** Cards lift 2px (`translateY: -2px`) with border color transitioning to blue-500 over 150ms
 ### Material and Surface Treatment
 Clean, flat surfaces with precise borders defining all edges. This is not a skeuomorphic or glassmorphic design — it is systematic and structural.
 - **Light mode:** Shadows are barely perceptible (`0 1px 2px rgba(0,0,0,0.04)`), used only on cards. Borders are the primary spatial separator.
 - **Dark mode:** No shadows. Borders and subtle background-color differentiation define hierarchy.
 - **No gradients on surfaces.** Gradients are reserved exclusively for the ECG transition animation and the occasional data visualization element.
 - **Borders define everything:** card edges, tab underlines, status bar top edge, grid cell boundaries.
 ### Signature Visual: The Status Dot
 Every section, skill, and experience item has a **6px colored dot** positioned consistently at the top-left of its container:
 - **Emerald dot:** Current/active items — current role, current projects, skills actively in use
 - **Blue dot:** Completed items — past roles, completed education, shipped projects
 - **Amber dot:** Notable achievements — items with standout metrics (the 14.6M programme, the asthma screening revenue, the switching algorithm)
 In the navigation tab bar, the active tab's dot **pulses subtly** (opacity oscillation between 0.6 and 1.0, 2s cycle) to indicate the current view. This pulse is the only continuously animated element in the resting state — everything else is still until interacted with, reinforcing the "precision instrument" feel.
 ---
 ## Section-by-Section Design
 ### Tab Bar (Persistent Navigation Chrome)
 Fixed at the top of the viewport. Full width. Contains:
 - **Left region:** "Andy Charlwood" in Inter 600, 18px. Below (or beside on wider screens): "Population Health & Data Analysis" in Inter 400, 13px, zinc-500.
 - **Center region:** Tab labels — "Overview", "Capabilities", "Timeline", "Portfolio", "Connect". Each is a button with Inter 500, 14px, uppercase, tracking `0.01em`. Active tab has a 2px teal underline and slightly bolder weight. Inactive tabs are zinc-500 with hover-to-zinc-300 transition.
 - **Right region:** Theme toggle (sun/moon icon, 20px), and a small "Download CV" link styled as a subtle outlined button.
 The tab bar has a bottom border (`1px solid zinc-200` light / `zinc-800` dark). Background matches the page background with a `backdrop-filter: blur(12px)` for slight transparency when content scrolls behind it (relevant for tabs with scrollable content).
 **Tab bar height:** 56px desktop, 48px mobile (when it becomes bottom nav).
 ---
 ### Tab 1: Overview
 The landing view after the ECG transition. This is a **bento grid** — a CSS Grid with items of varying column spans, creating an asymmetric but balanced layout.
 **Grid structure (desktop, 4 columns):**
 ```
 [  Name & Title Card (2 cols)  ] [  Profile Summary (2 cols)  ]
 [  Years Exp (1) ] [ Budget (1) ] [ Patients (1) ] [ Savings (1) ]
 [  Tech Stack Card (2 cols)    ] [  Current Focus (2 cols)    ]
 [  Location + GPhC (1 col)     ] [  Leadership (1 col)        ] [  Education Highlight (2 cols) ]
 ```
 **Card types in Overview:**
 1. **Name & Title Card** (2-col span): Andy Charlwood in Inter 600 48px. "Deputy Head, Population Health & Data Analysis" below. "NHS Norfolk & Waveney ICB" in teal. Emerald status dot (current role).
 2. **Profile Summary Card** (2-col span): The CV profile text, but condensed to 2-3 sentences. Inter 400, 15px, line-height 1.7. This is the only prose-heavy card.
 3. **Metric Cards** (1-col span each):
   - "10+" in Geist Mono 72px, "Years Experience" label below, blue dot
   - "220M" in Geist Mono 64px with "GBP" prefix in 24px, "Prescribing Budget" label, amber dot
   - "14,000" in Geist Mono 56px, "Patients Identified" label, emerald dot
   - "14.6M" in Geist Mono 64px with "GBP" prefix in 24px, "Efficiency Programme" label, amber dot
 4. **Tech Stack Card** (2-col span): Horizontal row of technology badges: Python, SQL, Power BI, JS/TS, each as a pill with icon. Teal-tinted background on hover. This card serves as a quick-reference for technical keywords that ATS systems and recruiters scan for.
 5. **Current Focus Card** (2-col span): 2-3 bullet points about current work direction, drawn from the most recent role. Emerald dot.
 6. **Location + GPhC Card** (1-col): "Norwich, UK" with a subtle map pin icon. "GPhC Registered Pharmacist" with registration number. "Since August 2016" in Geist Mono.
 7. **Leadership Card** (1-col): "Mary Seacole Programme" with "NHS Leadership Academy" below. "78%" score in Geist Mono. Blue dot (completed).
 8. **Education Highlight Card** (2-col): "MPharm 2:1 Honours" in large type. "University of East Anglia, 2011-2015". "Research: 75.1% Distinction" as a highlighted callout with amber dot.
 All cards have 12px border-radius, 24px internal padding, and the standard border treatment. On hover, cards lift 2px and the border transitions to blue-500.
 **Click behavior:** Clicking a metric card reveals an expanded state (the card grows to fill 2 columns, pushing others down) showing contextual detail — e.g., clicking "14,000 Patients" expands to show a brief description of the switching algorithm and a link to the Portfolio tab.
 ---
 ### Tab 2: Capabilities
 A two-panel layout for exploring skills.
 **Left panel (sidebar, ~280px fixed width):**
 A vertical list of skill categories styled as selectable list items:
 - "Technical" (8 skills)
 - "Clinical" (6 skills)
 - "Strategic" (4 skills)
 Each category shows its name, skill count, and a small bar chart preview (a thin horizontal bar showing relative skill level average for that category). The active category has a blue left border (3px) and slightly elevated background.
 **Right panel (fluid width):**
 Displays the selected category's skills as gauge visualizations.
 Each skill is rendered as a card containing:
 - Skill name in Inter 500, 16px
 - Circular SVG gauge (same pattern as current implementation: `strokeDashoffset = circumference * (1 - level / 100)`, rotated -90deg to start from 12 o'clock)
 - Percentage in Geist Mono 600, 24px, centered in the gauge
 - Category-specific color: teal for Technical, coral for Clinical, blue for Strategic
 - A status dot: emerald for skills actively used in current role, blue for all others
 Skills are arranged in a responsive grid: 4 columns on desktop within the right panel, 3 on tablet, 2 on mobile.
 **Gauge animation:** When switching categories, the gauges animate from 0 to their target value over 800ms with `ease-out` timing. This countup triggers every time a category is selected (not just on first view), reinforcing the "live data" feel.
 **Interaction detail:** Hovering a skill gauge shows a tooltip with a one-line description of how Andy uses that skill (e.g., "Python: Built switching algorithms, controlled drug monitoring, data pipeline automation").
 ---
 ### Tab 3: Timeline
 An interactive chronological view of Andy's career.
 **Desktop layout — Horizontal timeline:**
 A horizontal scrollable container with CSS scroll-snap. The X-axis represents years (2011-2026), with year markers at regular intervals. The timeline has two tracks:
 **Track 1 (upper, primary):** Professional experience entries. Each entry is a card positioned at its start date, with width proportional to duration. Cards contain:
 - Role title in Inter 600, 16px
 - Organization in Inter 400, 14px, teal
 - Date range in Geist Mono 400, 13px
 - Status dot: emerald for current roles, blue for past
 Cards are stacked vertically when roles overlap (e.g., Deputy Head and Interim Head at ICB).
 **Track 2 (lower, secondary):** Education and professional development milestones. Rendered as smaller markers/pills:
 - "MPharm, UEA" (2011-2015, spanning 4 years)
 - "Mary Seacole Programme" (2018, point marker)
 - "GPhC Registration" (2016, point marker)
 **Timeline chrome:**
 - A thin horizontal axis line in zinc-300 with year tick marks
 - The "present" marker (2026) has a pulsing emerald dot
 - A subtle gradient fade at the left edge indicates more content to scroll
 **Expand interaction:** Clicking any experience card expands it downward to reveal the full bullet points for that role. The timeline adjusts layout smoothly (spring animation, 300ms). Only one card can be expanded at a time — expanding a new card collapses the previous one.
 **Keyboard navigation:** Left/right arrow keys scroll the timeline by one year. Enter/Space expands the focused card.
 ---
 ### Tab 4: Portfolio
 A card grid displaying Andy's projects with status metadata.
 **Grid:** 2 columns on desktop, 1 on mobile. Each project card contains:
 - Project title in Inter 600, 18px
 - Description in Inter 400, 15px, 2-3 lines
 - **Status badge** styled like a deployment indicator:
  - "Live" — emerald background, white text (for PharMetrics)
  - "Internal" — blue background, white text (for Blueteq Generator, CD Monitoring)
  - "Complete" — zinc-500 background, white text (for NMS Video)
 - Tech tags: small pills showing technologies used (Python, Power BI, etc.)
 - Impact metric: a single standout number for each project, displayed in Geist Mono
  - PharMetrics: "Real-time tracking"
  - Switching Algorithm: "14,000 patients / 2.6M savings"
  - Blueteq Generator: "70% reduction / 200hrs saved"
  - CD Monitoring: "Population-scale safety"
  - Sankey Analysis: "Patient pathway visualization"
 - External link button (for PharMetrics)
 **Hover preview:** On desktop, hovering a project card for 500ms shows an expanded preview with additional context — the full description and a technical implementation note. This preview slides out from the card's right edge (200ms, spring animation).
 **Project data (from CV):**
 1. **PharMetrics** — Real-time medicines expenditure dashboard for NHS decision-makers. Status: Live. Tech: Power BI, SQL. Impact: Real-time tracking across 220M budget.
 2. **Switching Algorithm** — Python-based algorithm identifying patients on expensive drugs suitable for cost-effective alternatives. Status: Internal. Tech: Python, SQL. Impact: 14,000 patients identified, 2.6M annual savings.
 3. **Blueteq Generator** — Automation tool for high-cost drug prior approval form creation. Status: Internal. Tech: Python. Impact: 70% reduction in forms, 200+ hours saved.
 4. **Controlled Drug Monitoring** — System calculating oral morphine equivalents across all opioid prescriptions at population scale. Status: Internal. Tech: Python, SQL. Impact: Population-scale patient safety analysis.
 5. **Sankey Chart Analysis** — Tool visualizing patient journeys through high-cost drug pathways. Status: Internal. Tech: Python. Impact: Trust-level compliance auditing.
 6. **Patient Pathway Analysis** — Data-driven analysis of patient pathways to identify optimization opportunities. Status: Internal. Tech: Python, SQL. Impact: Clinical outcome improvements.
 ---
 ### Tab 5: Connect
 Contact information and a simple message form.
 **Layout:** Centered single column within the tab panel, max-width 600px. Clean and minimal — this tab has the lowest information density by design, creating visual breathing room after the data-heavy other tabs.
 **Content:**
 - "Get in Touch" heading, Inter 600, 32px
 - Email: andy@charlwood.xyz as a clickable link, styled with the blue accent
 - Location: Norwich, UK with a subtle map pin icon
 - LinkedIn / GitHub links as icon buttons with labels
 **Optional contact form:**
 - Name input
 - Email input
 - Message textarea
 - Submit button in blue accent, full-width
 All form inputs use 12px border-radius, zinc-200 borders (light) / zinc-700 borders (dark), 16px internal padding. Focus state adds a blue border and subtle blue glow (`box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15)`).
 ---
 ### The Status Bar (Persistent Bottom Chrome)
 Fixed at the bottom of the viewport, full width, 36px height.
 **Content (left to right):**
 - "Last updated: Feb 2026" in Geist Mono 400, 12px
 - Vertical separator (1px, zinc-600)
 - "Status: Open to opportunities" with a pulsing emerald dot
 - Vertical separator
 - "Norwich, UK" with a pin icon
 - **Right-aligned:** "GPhC Registered" with a subtle badge
 **Styling:**
 - Light mode: `#F4F4F5` background (zinc-100), zinc-300 top border, zinc-600 text
 - Dark mode: `#18181B` background (zinc-900), zinc-800 top border, zinc-400 text
 The status bar provides ambient information that's always available regardless of which tab the user is viewing. It communicates "this person is available and current" without requiring the user to navigate to a contact page.
 ---
 ## Interactions and Micro-interactions
 ### Tab Switching
 - Clicking a new tab triggers a crossfade: the current tab panel fades out (150ms, ease-out), then the new panel fades in (150ms, ease-in) with its child elements staggering via the reveal animation (40ms intervals).
 - The active tab underline slides to the new tab position using a `layoutId` animation (Framer Motion), creating a smooth indicator transition rather than a discrete jump.
 ### Metric Card Countup
 - When a metric card enters the viewport (on tab switch or initial load), its number value animates from 0 to the target over 800ms using `ease-out` timing.
 - The "GBP" prefix and labels appear instantly — only the number animates.
 - If the user switches away from a tab and returns, the countup replays, reinforcing the "live data refresh" metaphor.
 ### Card Hover States
 - All cards: `translateY: -2px` lift, border color transition to `blue-500`, 150ms duration.
 - Metric cards in Overview: the number subtly increases size by 2% on hover (a data-zoom effect).
 - Project cards in Portfolio: the status badge pulses once on hover.
 ### Skill Gauge Interaction
 - Category selection in Capabilities triggers all gauge animations simultaneously with 40ms stagger.
 - Individual gauge hover: the gauge ring thickens from strokeWidth 5 to 7, and a tooltip appears.
 ### Timeline Card Expansion
 - Click triggers a spring layout animation: the card's height expands to reveal bullet points. Other cards shift downward smoothly.
 - The expanded card receives a left blue border (3px) and a slightly elevated shadow.
 - A second click collapses the card.
 - Only one card can be expanded at a time.
 ### Theme Toggle
 - Clicking the sun/moon icon in the tab bar triggers a smooth crossfade of all color values (200ms). CSS custom properties handle the color swap, so no React re-render is needed for the transition.
 - The icon itself rotates 180 degrees during the toggle (sun rotates out, moon rotates in).
 ### Status Dot Pulse
 - The active tab's status dot and the "Open to opportunities" status bar dot share the same pulse animation: opacity oscillates between 0.6 and 1.0 on a 2-second cycle using `animation: pulse 2s ease-in-out infinite`.
 - All other dots are static.
 ---
 ## Navigation
 ### Primary Navigation: Tab Bar
 The tab bar is the only navigation mechanism. There is no scroll-based section jumping, no sidebar, no hamburger menu. This is a deliberate constraint: the dashboard metaphor demands that users switch views, not scroll through a document.
 **Tab list:**
 | Tab | Label | Keyboard | URL Hash |
 |-----|-------|----------|----------|
 | 1 | Overview | `1` or `Alt+1` | `#overview` |
 | 2 | Capabilities | `2` or `Alt+2` | `#capabilities` |
 | 3 | Timeline | `3` or `Alt+3` | `#timeline` |
 | 4 | Portfolio | `4` or `Alt+4` | `#portfolio` |
 | 5 | Connect | `5` or `Alt+5` | `#connect` |
 **URL hash routing:** Each tab updates the URL hash on activation. On page load, the app reads the hash and activates the corresponding tab (defaulting to Overview if no hash or unrecognized hash). This enables direct linking to specific tabs — a recruiter can share `charlwood.xyz/#portfolio` to send someone directly to the projects view.
 **Tab state persistence:** Within a session, each tab preserves its internal state. If the user expands a timeline card, switches to Portfolio, and returns to Timeline, the card is still expanded. This state is managed via React context (not URL), so it resets on page reload.
 ### Secondary Navigation: Within-Tab Interactions
 - **Overview:** Card click expands for detail. No further navigation depth.
 - **Capabilities:** Category sidebar acts as sub-navigation. Click a category to filter the skill display.
 - **Timeline:** Horizontal scroll (mouse wheel, touch swipe, or arrow keys) navigates chronologically. Card click expands.
 - **Portfolio:** Card click/hover reveals additional detail. External links navigate away.
 - **Connect:** No navigation — static content.
 ---
 ## Responsive Strategy
 ### Desktop (>1024px)
 The full dashboard experience. Multi-column bento grids, side-by-side capability panels, horizontal timeline, and the persistent tab bar + status bar chrome.
 - Tab bar: horizontal, centered tabs with full text labels
 - Overview: 4-column bento grid
 - Capabilities: sidebar (280px) + skill grid (4 columns)
 - Timeline: horizontal scroll with snap points
 - Portfolio: 2-column card grid
 - Status bar: full-width with all metadata items
 ### Tablet (768-1024px)
 Dashboard bar becomes horizontally scrollable tabs (same visual style, but container scrolls if tabs exceed width). This prevents cramped labels.
 - Overview: 2-column grid. Metric cards stack into 2x2 blocks. Larger cards remain 2-col span.
 - Capabilities: Filter panel collapses to a horizontal selector (dropdown or scrollable pill bar) above the skill grid. Skills display in 3 columns.
 - Timeline: Switches from horizontal to **vertical**. Entries stack chronologically top-to-bottom. Education items interleave with experience items in date order. Year markers appear as horizontal dividers.
 - Portfolio: Remains 2-column or shifts to single column depending on card content.
 - Status bar: Remains persistent at bottom, but "GPhC Registered" badge moves to a second line or hides behind a chevron.
 ### Mobile (<768px)
 The dashboard bar transforms into a **bottom navigation** with 5 icon buttons (matching the 5 tabs). Each icon is from Lucide:
 - Overview: `LayoutDashboard`
 - Capabilities: `Gauge`
 - Timeline: `Clock`
 - Portfolio: `FolderOpen`
 - Connect: `Mail`
 The active tab has a teal dot above its icon and the label displayed below.
 - Tab bar moves to bottom, 56px height, with safe area padding for devices with home indicators
 - The top of the viewport shows the current tab title + theme toggle only
 - Overview: Single-column stack. All metric cards are full-width. Name card at top, metrics below, then supporting cards.
 - Capabilities: Category selector as a horizontal scrollable pill bar at top. Skills display in 2 columns below.
 - Timeline: Vertical single-column. Full-width cards. Year markers as sticky section headers.
 - Portfolio: Single-column card stack. Status badges are prominent.
 - Connect: Full-width form, generous touch targets (48px minimum).
 - Status bar: Moves to the top of each view as a collapsible banner (tap to expand). Shows only "Open to opportunities" by default with a chevron to reveal full metadata.
 ### Breakpoint Summary
 | Element | Desktop (>1024) | Tablet (768-1024) | Mobile (<768) |
 |---------|-----------------|-------------------|---------------|
 | Tab bar | Top, horizontal | Top, scrollable | Bottom, icons |
 | Status bar | Bottom, full | Bottom, condensed | Top, collapsible |
 | Overview grid | 4 columns | 2 columns | 1 column |
 | Capabilities | Sidebar + grid | Dropdown + grid | Pills + grid |
 | Timeline | Horizontal scroll | Vertical stack | Vertical stack |
 | Portfolio | 2 columns | 2 columns | 1 column |
 | Card padding | 24px | 20px | 16px |
 | Grid gap | 24px | 20px | 16px |
 ---
 ## Technical Implementation
 ### Component Architecture
 ```
 App.tsx
  BootSequence.tsx
  ECGAnimation.tsx (modified exit: multi-trace → grid → cascade)
  Dashboard.tsx (replaces current content phase)
    DashboardTabBar.tsx
      TabButton.tsx
    DashboardContent.tsx (renders active tab panel)
      OverviewTab.tsx
        BentoGrid.tsx
        MetricCard.tsx
        ProfileCard.tsx
        TechStackCard.tsx
      CapabilitiesTab.tsx
        CategorySidebar.tsx
        SkillGaugeGrid.tsx
        SkillGauge.tsx
      TimelineTab.tsx
        TimelineTrack.tsx
        TimelineEntry.tsx
        TimelineMilestone.tsx
      PortfolioTab.tsx
        ProjectCard.tsx
        StatusBadge.tsx
      ConnectTab.tsx
        ContactForm.tsx
    StatusBar.tsx
    ThemeToggle.tsx
 ```
 ### State Management
 - **Active tab:** React `useState` in `Dashboard.tsx`. Updated on tab click. Synced to URL hash via `useEffect` (writes on change, reads on mount).
 - **Tab internal state:** React context (`DashboardContext`) holding: expanded timeline entry ID, selected skill category, expanded overview card ID. This context is not reset on tab switch, enabling state preservation.
 - **Theme:** `useState` initialized from `localStorage`, falling back to `prefers-color-scheme` media query. Toggle writes to `localStorage` and applies a `data-theme="dark"` attribute to the document root. All colors reference CSS custom properties.
 ### CSS Strategy
 - Tailwind CSS for utility classes, consistent with the existing project setup
 - CSS custom properties for theme-aware colors (defined in `index.css` under `:root` and `[data-theme="dark"]` selectors)
 - CSS Grid for bento layouts with explicit `grid-template-columns` and `grid-column: span N` on cards
 - CSS `scroll-snap-type: x mandatory` for horizontal timeline on desktop
 - `backdrop-filter: blur(12px)` on tab bar for the subtle transparency effect
 - `@media (prefers-color-scheme: dark)` as the fallback when no manual toggle has been used
 ### Tab Transition Implementation
 ```
 Tab switch flow:
 1. User clicks new tab
 2. Current tab panel: animate out (opacity 1→0, 150ms)
 3. Update active tab state
 4. New tab panel mounts
 5. New tab panel: staggered reveal (each child: opacity 0→1, y 8→0, blur 4→0, 300ms, 40ms stagger)
 6. If tab has countup elements (metric cards, skill gauges), countups trigger after reveal
 ```
 Using Framer Motion's `AnimatePresence` with `mode="wait"` to manage the tab panel crossfade. Each tab panel is wrapped in a `motion.div` with `key={activeTab}` to trigger exit/enter animations.
 ### Performance Considerations
 - **Tab panels:** Only the active tab renders its full content. Inactive tabs are unmounted (not hidden with `display: none`) to keep DOM light. State is preserved in context, not in DOM.
 - **Metric countups:** Use `requestAnimationFrame`-based animation, not CSS — this allows precise easing control and avoids layout thrashing.
 - **Timeline scroll:** Horizontal scrolling uses CSS-native scroll-snap, not JavaScript-controlled positioning.
 - **Images:** If project screenshots are added later, use `loading="lazy"` and serve WebP with `<picture>` fallback.
 - **Gauge SVGs:** Pre-computed `strokeDashoffset` values stored as constants. No recalculation on render.
 ### ECG Transition Modifications
 The existing `ECGAnimation.tsx` needs modifications for the multi-trace and grid materialization:
 1. After the name is complete (current `holdEndTime`), instead of the simple exit phase, the canvas draws two additional traces (teal and coral) at 30% and 70% viewport height.
 2. The `bgTransitionedRef` logic changes: background transitions to `#0A1628` instead of `#FFFFFF`.
 3. A new phase is added after the multi-trace flatline: vertical grid lines are drawn on the canvas, followed by content-cell placeholder rectangles.
 4. The canvas fade-out timing is adjusted to overlap with the React dashboard mount, so the grid drawn on canvas aligns pixel-perfectly with the CSS Grid rendered by React.
 5. The `onComplete` callback fires after the grid materialization, triggering the phase switch from `'ecg'` to `'content'`.
 ---
 ## Accessibility
 ### Keyboard Navigation
 The tab-based interface maps naturally to the ARIA tabs pattern:
 - `Tab` moves focus between the tab bar and the active tab panel
 - `ArrowLeft` / `ArrowRight` moves between tabs when the tab bar is focused
 - `Enter` / `Space` activates a focused tab
 - Within the active panel, `Tab` navigates through interactive elements in document order
 - In Timeline tab: `ArrowLeft` / `ArrowRight` scrolls the timeline by one year; `Enter` / `Space` expands the focused timeline entry
 - Number keys `1`-`5` activate tabs directly (when tab bar is focused)
 ### ARIA Roles and Labels
 - Tab bar: `role="tablist"`, each tab `role="tab"` with `aria-selected`, each panel `role="tabpanel"` with `aria-labelledby`
 - Metric cards: `aria-label` with full context, e.g., `aria-label="14,000 patients identified for cost-effective switching through Python-based algorithm"`
 - Skill gauges: `aria-valuenow`, `aria-valuemin="0"`, `aria-valuemax="100"`, `role="progressbar"`, `aria-label="Python proficiency: 90 percent"`
 - Status bar: `aria-live="polite"` region, so dynamic updates (if any) are announced
 - Timeline entries: `role="article"` with expandable content using `aria-expanded`
 - Status dots: `aria-hidden="true"` (decorative; the semantic information is in adjacent text)
 ### Color and Contrast
 - All text meets WCAG 2.1 AA contrast requirements in both light and dark modes
 - The zinc neutral scale is specifically chosen for reliable contrast ratios
 - Status dots are never the sole indicator of state — they always accompany text labels
 - Focus indicators: 2px blue outline with 2px offset, visible in both themes
 - The theme toggle is not required to use the site — both themes meet accessibility standards independently
 ### Motion and Preferences
 - All animations respect `prefers-reduced-motion`. When reduced motion is preferred:
  - Tab crossfades become instant switches (no animation)
  - Metric countups display final values immediately
  - Gauge animations are disabled; gauges render at their target values
  - Card hover lifts are disabled
  - Status dot pulse is disabled
  - ECG transition skips to final state after a brief hold
 ### Screen Reader Experience
 The tab-based navigation provides a clear, navigable structure for screen readers:
 1. User encounters the tab bar with 5 clearly labeled tabs
 2. Activating a tab announces the panel label
 3. Within each panel, content is structured with headings (`h2` for section titles, `h3` for individual entries)
 4. Metric cards read as: "[Value] [Label]. [Additional context from aria-label]"
 5. The status bar is announced on page load and when content changes
 ---
 ## What Makes This Special
 **The medium IS the message.** By presenting his CV as a dashboard, Andy demonstrates his analytical mindset through the navigation itself. A recruiter doesn't just read about Andy's ability to create data systems — they experience one. The information architecture of the site is itself a portfolio piece.
 **Numbers lead.** Every other CV website puts prose first and numbers second. This design inverts that: the first thing you see is a grid of metric cards with large Geist Mono numbers. "14,000 patients." "14.6M programme." "220M budget." These numbers are more compelling than any paragraph of self-description, and presenting them in a dashboard context makes them feel quantitative and verifiable rather than resume-inflated.
 **The density is the point.** Most portfolio sites are spacious, scrolling single-column affairs with generous whitespace. This design deliberately goes the other direction: high density, multiple data points visible simultaneously, information that rewards careful reading. This says "I am comfortable with complexity" in a way that minimal designs cannot.
 **The ECG transition earns its keep.** The multi-trace multiplication and grid materialization aren't just visually interesting — they tell a story. Raw clinical signals (vital signs) transform into organized, structured data (dashboard grid). This is literally what Andy does: he takes messy prescribing data and turns it into actionable analytics. The transition is a 3-second visual metaphor for his career.
 **Adaptive theming signals engineering maturity.** Supporting both light and dark modes with a manual toggle and `prefers-color-scheme` respect is a technical detail that fellow developers and technical recruiters will notice and appreciate. It signals awareness of modern frontend standards.
 **The status bar adds ambient context.** "Open to opportunities" is visible on every single tab view without requiring the user to navigate to a contact page. It's a constant, low-key signal — like a system indicator light — that communicates availability without being pushy. This is a detail borrowed from actual operational dashboards, where system status is always visible.
 **Tab persistence respects the user's exploration.** Preserving expanded state across tab switches communicates respect for the user's time and attention. It says: "I built this thoughtfully." It's a subtle UX detail that most portfolio sites don't consider, because most portfolio sites don't have this level of navigational complexity to manage.
@@ -1,511 +0,0 @@
 # Design 3: The Observatory
 ## Overview
 A non-linear, spatial interface where the site does not scroll -- it is an interactive constellation. Glowing nodes arranged in a force-directed graph represent sections of Andy's career. Click a node to zoom in. Navigation is spatial, not linear. The most visually distinctive and architecturally ambitious of all 6 designs.
 The core insight: a traditional CV is a list. A constellation is a map. Lists impose a reading order. Maps invite exploration. By presenting Andy's career as an interconnected constellation rather than a sequential document, visitors build their own mental model of how clinical expertise, technical skill, and strategic leadership connect -- and they remember it, because they built it themselves.
 This design draws from three disciplines: knowledge-graph visualization (Obsidian, Neo4j Browser), environmental storytelling in game design (where narrative is discovered through spatial exploration rather than linear delivery), and the force-directed graph layouts used in data science to reveal hidden structure in complex datasets. It applies all three to the problem of self-presentation.
 ---
 ## ECG Transition
 **Starting point:** "ANDREW CHARLWOOD" is on screen in neon green (#00ff41) strokes on a black (#000) background. The ECG trace that drew it is still visible. The drawing head has stopped.
 **Then:**
 The letterforms begin to **contract inward** toward the center of the name. Each letter stretches and thins -- like light near a gravitational singularity -- as it compresses toward a single convergence point at screen center. The neon green shifts through cyan (#00E5FF) to bright white (#FFFFFF) as the letters converge, mimicking the blueshift of light under gravitational compression.
 All letters collapse into a single luminous point. A beat of stillness (200ms).
 The point **pulses** -- a sonar ring of soft cyan (#00D4AA) radiates outward from center. As this ring passes across the viewport, constellation nodes **blink into existence in its wake**, each one appearing with a brief flash and then settling into a soft glow. The ring reaches the viewport edges and fades.
 Simultaneously, the black background shifts imperceptibly to deep navy (#0A0E1A). The luminous center point fades and Andy's name re-renders as clean DOM text (Space Grotesk, 700 weight, soft white #ECECF0) at center screen. His role title fades in below at smaller size.
 The 5-6 constellation nodes that appeared during the sonar ring now animate to their orbital positions around the name using spring physics -- they overshoot slightly, oscillate, and settle. Each node has a faint label that appears on hover proximity.
 **Duration:** ~2.4 seconds.
 **Color journey:** Black (#000) --> Deep Navy (#0A0E1A). ECG green (#00ff41) --> Cyan (#00E5FF) --> White (#FFF) at convergence --> Warm amber (#D4874D) node glows + Electric cyan (#00D4AA) active states in the constellation.
 **The message:** "What was a single heartbeat line has become a universe of interconnected points. Welcome to the observatory."
 ---
 ## Visual System
 ### Color Palette
 | Token | Value | Usage |
 |---|---|---|
 | `--bg-deep` | `#0A0E1A` | Primary background (deep navy-black) |
 | `--bg-gradient` | `radial-gradient(ellipse at center, #0F1428 0%, #0A0E1A 70%)` | Subtle depth at center |
 | `--amber` | `#D4874D` | Primary accent -- node highlights, connection lines, active indicators |
 | `--amber-glow` | `rgba(212, 135, 77, 0.15)` | Ambient glow around active nodes |
 | `--cyan` | `#00D4AA` | Active/hover states, sonar pulses, interactive feedback |
 | `--cyan-glow` | `rgba(0, 212, 170, 0.12)` | Hover glow |
 | `--text-primary` | `#ECECF0` | Headings, labels, primary text |
 | `--text-secondary` | `#8B8FA3` | Descriptions, body text |
 | `--text-dim` | `#4A4E63` | Tertiary labels, metadata |
 | `--grid-line` | `#1A1F2E` | Faint structural lines (used sparingly) |
 | `--node-border` | `#2A2F42` | Inactive node borders |
 | `--card-bg` | `rgba(15, 20, 40, 0.85)` | Detail panel backgrounds (translucent) |
 | `--card-border` | `rgba(212, 135, 77, 0.2)` | Detail panel border glow |
 ### Background Treatment
 No grid for this design. The dark space should feel open, organic, and expansive -- not systematic. Three layers create depth:
 1. **Base:** Flat deep navy (#0A0E1A)
 2. **Depth gradient:** Subtle radial gradient, lighter at center (#0F1428), fading to base at edges. Creates a sense of looking into space.
 3. **Star particles:** Very low density (30-50 particles across the viewport), tiny (1-2px), faintly glowing white at 10-20% opacity. Drift slowly. These are purely atmospheric -- they do not carry content or respond to interaction. They simply make the space feel alive.
 ### Typography
 | Role | Font | Weight | Size |
 |---|---|---|---|
 | Display (name) | Space Grotesk | 700 | `clamp(2rem, 4vw, 3.5rem)` |
 | Section headings | Space Grotesk | 500 | `clamp(1.25rem, 2.5vw, 1.75rem)` |
 | Body text | IBM Plex Sans | 400 | 15px / 1.7 line-height |
 | Subheadings | IBM Plex Sans | 500 | 14px |
 | Data labels / stats | IBM Plex Mono | 400 | 13px, uppercase, 0.05em tracking |
 | Node labels | Space Grotesk | 500 | 13px |
 **Font loading strategy:** Space Grotesk and IBM Plex Sans loaded via Google Fonts with `display=swap`. IBM Plex Mono loaded with `display=optional` (falls back to system mono if slow to load -- acceptable for data labels).
 ### Motion
 - **Spring physics** for all node movement: `mass: 1, stiffness: 120, damping: 14` (Framer Motion spring config). This creates a responsive, organic feel -- nodes overshoot and settle rather than moving linearly.
 - **Zoom transitions:** `cubic-bezier(0.16, 1, 0.3, 1)` -- fast departure, gentle arrival. Duration 600ms.
 - **Hover effects:** 150ms ease-out for color/glow changes.
 - **Connection line reveals:** `stroke-dasharray` animation, 800ms per line with 100ms stagger between lines.
 - **Sonar pulse on interaction:** Radial ring emanating from clicked node, 400ms, opacity 0.3 --> 0.
 ### Signature Visual: Connection Lines
 The constellation's defining feature is the connection web that reveals relationships between career elements. After visiting 3+ nodes, a "View Connections" toggle appears.
 - Lines are SVG `<path>` elements drawn between node center points.
 - **Line thickness** encodes relationship strength: strong connections (Python --> switching algorithm --> 2.6M savings) use 2px lines; weaker thematic connections use 0.75px lines.
 - **Line color:** Warm amber (#D4874D) at 40% opacity, brightening to 80% on hover.
 - **Line style:** Slightly curved (quadratic bezier with a subtle arc), not straight. This creates a more organic, constellation-like appearance.
 - **Interaction:** Hovering a connection line shows a tooltip explaining the relationship. Example: "Python skills --> Built switching algorithm --> 14,000 patients identified, 2.6M annual savings."
 - **Animation:** Lines draw themselves using `stroke-dashoffset` animation when first revealed.
 ---
 ## Section-by-Section Design
 ### Hub View (Default State)
 The hub is the home state -- what visitors see after the ECG transition completes. Andy's name sits at center in Space Grotesk 700, with his role title below in IBM Plex Sans. Around the name, 5-6 constellation nodes orbit at varying distances:
 **Node positions (approximate, adjusted by force-directed layout):**
 | Node | Orbital Distance | Glow Color | Icon Concept |
 |---|---|---|---|
 | Skills | Close orbit (top-right) | Amber | Hexagonal skill web |
 | Experience | Close orbit (left) | Amber | Timeline/pulse line |
 | Education | Mid orbit (bottom-left) | Cyan | Academic cap / book |
 | Projects | Mid orbit (bottom-right) | Cyan | Code brackets / diagram |
 | Contact | Outer orbit (top-left) | Amber | Signal / connection |
 Each node is a 48-64px circle with:
 - A soft glow (`box-shadow: 0 0 20px var(--amber-glow)`)
 - A thin border (`1px solid var(--node-border)`, transitioning to `--amber` on hover)
 - A small icon or symbol at center (Lucide icons, 20px)
 - A label that appears on hover or cursor proximity (within 100px), fading in at 200ms
 **Gravitational attraction:** As the cursor moves near a node (within 120px), the node is gently pulled toward the cursor by 4-8px. This creates a subtle sense of magnetic interaction without disrupting the layout. The pull uses spring physics with high damping (damping: 20) to prevent oscillation.
 **Ambient animation:** Nodes drift very slowly in micro-orbits (2-3px movement radius, 8-12 second cycle). This keeps the constellation feeling alive without being distracting.
 ### Skills Node (Zoomed In)
 **Zoom transition:** Clicking the Skills node triggers a smooth pan+zoom. The clicked node expands to fill ~70% of the viewport width. Other nodes animate to the periphery (scaled down to 24px, still visible, still clickable). Duration: 600ms.
 **Internal layout:** A radial skill diagram. Skills orbit a center point at distances proportional to their proficiency level (higher proficiency = closer to center, representing mastery as gravitational pull).
 Three concentric rings (barely visible, #1A1F2E at 30% opacity) mark proficiency zones: Expert (inner), Proficient (mid), Competent (outer).
 **Skill categories** are color-coded:
 - Technical skills: Amber (#D4874D) nodes
 - Clinical skills: Cyan (#00D4AA) nodes
 - Strategic skills: Soft white (#ECECF0) nodes with amber border
 Each skill is a small node (32-40px) with the skill name below it. Hovering a skill:
 1. Expands the node slightly (scale 1.15)
 2. Shows a tooltip with proficiency percentage and a one-line description
 3. Highlights all related skills with pulsing connection lines
 **Interaction:** The radial diagram can be slowly rotated by click-and-drag (Framer Motion `drag` with `dragElastic: 0.1`, constrained to rotation). This serves no functional purpose -- it simply makes the diagram feel tactile and explorable.
 **Skill data:**
 Technical: Python (90%), SQL (88%), Power BI (92%), JS/TS (70%), Data Analysis (95%), Dashboard Dev (88%), Algorithm Design (82%), Data Pipelines (80%)
 Clinical: Medicines Optimisation (95%), Pop. Health Analytics (90%), NICE TA (85%), Health Economics (80%), Clinical Pathways (82%), CD Assurance (88%)
 Strategic: Budget Mgmt (90%), Stakeholder Engagement (88%), Pharma Negotiation (85%), Team Development (82%)
 ### Experience Node (Zoomed In)
 **Internal layout:** A vertical timeline within the expanded node, scrollable if content exceeds the viewport. The timeline line runs vertically at 20% from the left edge, with timeline dots and cards to the right.
 Each role card contains:
 - Role title (Space Grotesk, 500, `--text-primary`)
 - Organisation (IBM Plex Sans, 400, `--cyan`)
 - Date range (IBM Plex Mono, 400, `--text-dim`, in a pill badge with `--amber` background at 10% opacity)
 - Expandable bullet points (collapsed by default, showing first 2 bullets with "Show more" toggle)
 **Color-coding per employer era:**
 - NHS Norfolk & Waveney ICB roles: Left border amber (#D4874D)
 - Tesco Pharmacy roles: Left border cyan (#00D4AA)
 This creates instant visual distinction between the "data/analytics" era and the "clinical pharmacy" era.
 **Background shift:** The expanded node's background subtly shifts warm (#0F1220) during ICB roles and cooler (#0A1018) during Tesco roles. The shift is barely perceptible but creates an atmospheric distinction.
 **Role data (from CV_v4.md):**
 1. **Interim Head, Population Health & Data Analysis** -- NHS Norfolk & Waveney ICB -- May-Nov 2025
   - Identified and prioritised a 14.6M efficiency programme through comprehensive data analysis; achieved over-target performance by October 2025
   - Built Python-based switching algorithm compressing months of manual analysis into 3 days, identifying 14,000 patients and 2.6M in annual savings
   - Automated incentive scheme analysis; achieved 50% reduction in targeted prescribing within first two months
   - Presented strategy and financial position to Chief Medical Officer on bimonthly basis
   - Led transformation from practice-level data to patient-level SQL analytics
 2. **Deputy Head, Population Health & Data Analysis** -- NHS Norfolk & Waveney ICB -- Jul 2024-Present
   - Managed 220M prescribing budget with sophisticated forecasting models
   - Collaborated with ICB data engineering team to create comprehensive medicines data table
   - Led financial scenario modelling for system-wide DOAC switching programme
   - Led renegotiation of pharmaceutical rebate terms ahead of patent expiry
   - Supported commissioning of tirzepatide (NICE TA1026) including financial projections
   - Developed Python-based controlled drug monitoring system
   - Educated colleagues on data interpretation and analytics best practices
 3. **High-Cost Drugs & Interface Pharmacist** -- NHS Norfolk & Waveney ICB -- May 2022-Jul 2024
   - Wrote most of the system's high-cost drug pathways spanning rheumatology, ophthalmology, dermatology, gastroenterology, neurology, and migraine
   - Developed software automating Blueteq prior approval form creation: 70% reduction in forms, 200 hours immediate savings
   - Integrated Blueteq data with secondary care activity databases
   - Created Python-based Sankey chart analysis tool visualising patient journeys
 4. **Pharmacy Manager** -- Tesco PLC -- Nov 2017-May 2022
   - Identified and shared asthma screening process adopted nationally across ~300 branches, enabling ~1M in revenue
   - Led creation of national induction training plan and eLearning modules
   - Supervised two staff members through NVQ3 qualifications
 ### Education Node (Zoomed In)
 **Internal layout:** A horizontal path with interactive milestone markers. The path is a subtle line running left-to-right across the expanded node, with milestone nodes along it.
 **Milestones:**
 1. **A-Levels** (2009-2011) -- Highworth Grammar School. Mathematics (A*), Chemistry (B), Politics (C). Node shows as a small marker.
 2. **MPharm (Hons) Pharmacy** (2011-2015) -- University of East Anglia. Upper Second-Class Honours (2:1). This is the primary milestone -- larger node. Clicking opens a detail panel with the research project information.
 3. **Research Project** -- Drug delivery and cocrystals: 75.1% (Distinction). This sub-node opens a mini-visualization: simple SVG polyhedra representing cocrystal structures, rotatable by mouse drag. The polyhedra are wireframe-style in cyan (#00D4AA) on the dark background, gently rotating when idle. This is a small touch of delight that also subtly demonstrates technical capability (interactive 3D in the browser).
 4. **Mary Seacole Programme** (2018) -- NHS Leadership Academy. 78%. Change management, healthcare leadership, system-level thinking.
 5. **GPhC Registration** (August 2016-Present) -- Persistent certification. Shown as a badge rather than a path node.
 ### Projects Node (Zoomed In)
 **Internal layout:** Each project is a sub-cluster -- a mini-constellation of technology + outcome nodes. The cluster is interactive: clicking zooms into it.
 **Projects:**
 1. **PharMetrics** -- Real-time medicines expenditure dashboard. Sub-nodes: "Power BI" (tech), "NHS Decision-Makers" (audience), "Actionable Analytics" (outcome). Link: medicines.charlwood.xyz
 2. **Switching Algorithm** -- Python-based patient identification system. Sub-nodes: "Python" (tech), "14,000 Patients" (scale), "2.6M Savings" (outcome), "3 Days vs Months" (efficiency).
 3. **Blueteq Generator** -- Automation tool for high-cost drug approvals. Sub-nodes: "Automation" (tech), "70% Reduction" (efficiency), "200+ Hours Saved" (outcome).
 4. **Sankey Chart Tool** -- Patient journey visualization. Sub-nodes: "Python" (tech), "Data Visualization" (method), "Pathway Compliance" (outcome).
 5. **Controlled Drug Monitor** -- Population-level opioid exposure tracking. Sub-nodes: "Python + SQL" (tech), "Patient Safety" (purpose), "Population Scale" (scope).
 Each project cluster has connection lines back to the Skills and Experience nodes, showing provenance.
 ### Contact Node (Zoomed In)
 **Internal layout:** A clean, centered panel with contact information. The copy reads: "Ready to connect another node to the network."
 **Contact methods:**
 - Email: andy@charlwood.xyz (clickable mailto link)
 - Phone: 07795553088
 - LinkedIn: linkedin.com/in/andrewcharlwood (opens in new tab)
 - Location: Norwich, UK
 Each contact method is a horizontal row with a Lucide icon (Mail, Phone, Linkedin, MapPin) in cyan, label in dim text, and value in primary text. Hovering a row highlights it with a subtle amber glow.
 ---
 ## Interactions & Micro-interactions
 ### Node Hover
 1. Cursor enters 120px proximity zone: node begins gravitational pull toward cursor (4-8px, spring physics)
 2. Cursor enters node bounds: border transitions from `--node-border` to `--amber` (150ms). Glow intensifies. Label fades in below node (200ms fade).
 3. Cursor exits: all effects reverse with matching timing.
 ### Node Click (Zoom In)
 1. Clicked node scales up with spring animation (mass: 1, stiffness: 100, damping: 12) from ~56px to ~70% viewport width
 2. Other nodes simultaneously scale down to 24px and drift to viewport periphery (spring, 600ms)
 3. Background subtly darkens by 10% to create focus
 4. Clicked node's internal content fades in with 200ms delay, 400ms duration
 5. A subtle "zoom out" icon (Lucide Minimize2) appears top-left of expanded node
 ### Zoom Out
 1. Triggered by: clicking zoom-out button, pressing Escape, or clicking any peripheral node
 2. If clicking a peripheral node: that node zooms in while the current one zooms out (seamless swap, ~700ms)
 3. If zooming out to hub: expanded node contracts, peripheral nodes return to orbital positions (spring physics, ~600ms). Internal content fades out before contraction begins.
 ### Connection Line Reveal
 1. Triggered after visiting 3+ unique nodes. A floating "View Connections" pill button fades in at bottom-center.
 2. Clicking the toggle: connection lines draw themselves between related nodes using `stroke-dashoffset` animation. Each line takes 600ms. Lines stagger by 100ms.
 3. Hovering a connection line: the line brightens to 80% opacity, thickens by 0.5px, and a tooltip appears at the midpoint explaining the relationship.
 4. Clicking the toggle again: lines retract (reverse `stroke-dashoffset`) and the button returns to "View Connections."
 ### Sonar Pulse
 When any interactive action occurs (node click, lens switch, connection toggle), a subtle sonar ring (cyan, 20% opacity) radiates from the point of interaction. Duration: 400ms. Radius: 80px. This provides visual feedback that ties every interaction back to the ECG intro's sonar moment.
 ### Ambient Drift
 All nodes in the hub view drift in micro-orbits: 2-3px movement radius, 8-12 second cycle, using sine-wave interpolation. The drift directions are randomized per node. This keeps the constellation alive without being distracting. The drift pauses during zoom transitions to prevent visual conflict.
 ---
 ## Navigation
 ### The Lens System
 A floating toolbar anchored to the bottom-center of the viewport (above the connection toggle, if visible). Contains 3 lens buttons:
 | Lens | Icon | Effect |
 |---|---|---|
 | **The Numbers** | Hash (#) | All nodes dim except those containing quantitative achievements. Amber-highlighted stat cards float above the dimmed constellation showing: 14.6M, 14,000, 220M, 2.6M, 200 hrs, 1M. Each card links to its source node. |
 | **The Journey** | Clock / Timeline | Nodes rearrange from orbital positions into a horizontal chronological timeline. Spring animation. Leftmost = A-Levels (2009), rightmost = current role (2025). Nodes are spaced proportionally to duration. This is the traditional fallback view -- familiar and scannable. |
 | **The Stack** | Layers | Nodes regroup by technical capability. Three vertical columns: "Clinical," "Technical," "Strategic." Within each column, relevant content from Experience, Skills, and Projects is aggregated. Shows Andy's capabilities cross-cut across all roles. |
 Clicking any lens animates the constellation into the new arrangement. Clicking the same lens again returns to the default hub view. Only one lens can be active at a time.
 **Lens transitions:** Nodes move to their new positions using spring physics (600ms). Content within nodes fades out during transition and fades back in once settled (200ms fade).
 ### Keyboard Navigation
 - **Tab:** Cycles through nodes in logical order (Skills, Experience, Education, Projects, Contact)
 - **Enter / Space:** Zooms into focused node
 - **Escape:** Zooms out to hub view
 - **Arrow keys:** When in hub view, moves focus between adjacent nodes (proximity-based adjacency)
 - **L key:** Cycles through lenses (None --> Numbers --> Journey --> Stack --> None)
 - **C key:** Toggles connection lines (after 3+ nodes visited)
 ### Focus Indicators
 Keyboard-focused nodes receive a visible focus ring: 2px solid cyan (#00D4AA) with 4px offset. The focus ring pulses gently (opacity 0.7 --> 1.0, 1.5s cycle) to distinguish it from hover states.
 ---
 ## Responsive Strategy
 ### Desktop (> 1024px)
 Full spatial constellation experience. All features enabled:
 - Force-directed node layout with gravitational cursor interaction
 - Click-to-zoom node expansion
 - Drag to rearrange nodes
 - Connection lines with hover tooltips
 - Full lens system
 - Keyboard navigation
 ### Tablet (768px - 1024px)
 Simplified constellation:
 - Fewer ambient particles (15-20 instead of 30-50)
 - No gravitational cursor pull (touch interfaces lack persistent cursor position)
 - Tap to zoom into nodes
 - Detail views render as full-screen overlays (sliding up from bottom, 90vh height) rather than inline expansion
 - Connection lines are shown as a static overlay rather than animated reveal
 - Lens toolbar moves to top of screen as a horizontal pill selector
 ### Mobile (< 768px)
 The constellation transforms into a **vertical card stack**:
 - Each card represents one constellation node. Cards are stacked vertically with 16px gap.
 - Each card shows: icon, section title, one-line preview (e.g., "Python, SQL, Power BI + 15 more skills")
 - Tapping a card expands it to show full section content (accordion-style, one expanded at a time)
 - The lens toolbar becomes a horizontal pill selector at top of screen, sticky on scroll
 - "The Journey" lens on mobile presents a standard vertical timeline
 - "The Numbers" lens shows a simple stat card grid (2 columns)
 - "The Stack" lens shows tabbed category view
 - Background: solid deep navy. No particles, no gradient (performance).
 - Connection lines: not shown on mobile. Instead, a "Related" section at the bottom of each expanded card lists connected items as text links.
 ### Touch Interaction
 - **Tap node / card:** Zoom in (desktop/tablet) or expand (mobile)
 - **Pinch-to-zoom:** Not supported (avoids conflict with browser zoom). Zoom is click/tap only.
 - **Swipe:** On mobile, swipe horizontally between lens views. Swipe down to collapse an expanded card.
 - **Long-press:** Not used (avoids confusion with system long-press behaviors).
 ---
 ## Technical Implementation
 ### Force-Directed Layout
 **Library:** `d3-force` (lightweight -- only the force simulation module, not all of D3). ~15KB gzipped.
 **Configuration:**
 ```
 forceSimulation(nodes)
  .force('charge', forceManyBody().strength(-200))
  .force('center', forceCenter(viewportWidth / 2, viewportHeight / 2))
  .force('collision', forceCollide().radius(80))
  .force('radial', forceRadial(orbitDistance, cx, cy).strength(0.3))
 ```
 Nodes are initialized with target orbital positions. The simulation runs for ~100 ticks on mount to reach equilibrium, then continues running at low alpha for ambient drift.
 **Performance:** The simulation runs on `requestAnimationFrame` but only when nodes are moving (alpha > 0.001). When the constellation is at rest, the simulation pauses entirely. On resize, the simulation restarts with updated center coordinates.
 ### Zoom Transitions
 **Library:** Framer Motion `AnimatePresence` with `layoutId` for seamless zoom.
 Each node has a `layoutId` matching its section key (e.g., `layoutId="skills"`). When the node expands, its `layout` animation triggers automatically. The detail content uses `AnimatePresence` for mount/unmount transitions.
 ```tsx
 <motion.div layoutId={nodeId} layout="position" transition={{ type: "spring", stiffness: 120, damping: 14 }}>
  {isExpanded ? <DetailView /> : <NodeIcon />}
 </motion.div>
 ```
 ### Connection Lines
 SVG `<path>` elements rendered in a fixed-position SVG overlay that spans the viewport. Paths are quadratic bezier curves between node center positions:
 ```
 M startX startY Q controlX controlY endX endY
 ```
 The control point is offset perpendicular to the line midpoint, creating a gentle arc. The offset direction alternates for adjacent lines to prevent overlap.
 **Animation:** `stroke-dasharray` set to total path length. `stroke-dashoffset` animated from total length to 0 (line drawing effect). Duration: 600ms with `ease-out` timing.
 ### Star Particles
 A single `<canvas>` element behind all content. 30-50 particles initialized with random positions and slow drift velocities. Rendered with `requestAnimationFrame`. Each particle is a 1-2px circle with 10-20% opacity.
 The canvas pauses rendering when the tab is not visible (`document.visibilityState`). On mobile, the canvas is not created (particles disabled for performance).
 ### Detail Panel Scrolling
 Zoomed-in node content that exceeds the viewport height uses `overflow-y: auto` with custom scrollbar styling (thin, amber-colored on WebKit browsers). The scroll container is the expanded node's inner content area, not the page body. `body` overflow is set to `hidden` when any node is expanded to prevent background scrolling.
 ### State Management
 React `useState` for:
 - `activeNode: string | null` -- which node is expanded (null = hub view)
 - `activeLens: 'numbers' | 'journey' | 'stack' | null` -- current lens
 - `visitedNodes: Set<string>` -- tracks which nodes have been viewed (for connection toggle threshold)
 - `showConnections: boolean` -- connection lines visibility
 No external state management library needed. State is simple and localized.
 ### Data Structure
 ```tsx
 interface ConstellationNode {
  id: string;
  label: string;
  icon: LucideIcon;
  orbitDistance: number; // relative to center, 0-1
  orbitAngle: number; // radians
  glowColor: 'amber' | 'cyan';
  content: React.ReactNode; // rendered when expanded
 }
 interface Connection {
  from: string; // node id
  to: string; // node id
  strength: number; // 0-1, maps to line thickness
  label: string; // tooltip text
 }
 ```
 ---
 ## Accessibility
 ### Screen Reader Experience
 The DOM order follows a logical reading sequence regardless of visual layout:
 1. Skip-to-content link (hidden, keyboard-accessible)
 2. Andy Charlwood -- name and role title
 3. Navigation: lens buttons + node list
 4. Skills section content
 5. Experience section content
 6. Education section content
 7. Projects section content
 8. Contact section content
 The constellation visual is a progressive enhancement. Screen readers traverse the underlying DOM in document order, encountering all content as standard sections with headings.
 ### ARIA Attributes
 - Each constellation node: `role="button"`, `aria-label="View [Section Name]"`, `aria-expanded="true|false"`
 - Expanded node detail panel: `role="region"`, `aria-label="[Section Name] details"`
 - Lens buttons: `role="radio"` within a `role="radiogroup"` with `aria-label="View mode"`
 - Connection toggle: `aria-pressed="true|false"`, `aria-label="Show career connections"`
 ### Keyboard Navigation
 Full keyboard support as detailed in the Navigation section. Tab order matches DOM order. Focus indicators are visible and high-contrast (cyan on dark navy exceeds WCAG AAA contrast).
 ### Motion Preferences
 When `prefers-reduced-motion: reduce` is detected:
 - Constellation renders in static positions (no ambient drift, no spring physics)
 - Node expansion uses opacity fade (200ms) instead of layout animation
 - No sonar pulses
 - No connection line drawing animation (lines appear immediately)
 - No gravitational cursor pull
 - Star particles are static (no drift)
 - Lens transitions use crossfade instead of spatial rearrangement
 ### Color Contrast
 All text meets WCAG AA contrast against the dark background:
 - `--text-primary` (#ECECF0) on `--bg-deep` (#0A0E1A): contrast ratio 14.2:1 (AAA)
 - `--text-secondary` (#8B8FA3) on `--bg-deep` (#0A0E1A): contrast ratio 5.8:1 (AA)
 - `--amber` (#D4874D) on `--bg-deep` (#0A0E1A): contrast ratio 5.1:1 (AA)
 - `--cyan` (#00D4AA) on `--bg-deep` (#0A0E1A): contrast ratio 8.3:1 (AAA)
 ### First-Time Visitor Onboarding
 On first visit (checked via `localStorage`), a brief animated tour plays:
 1. A pulsing ring highlights the center name (0.5s)
 2. An arrow animates from center to a node with tooltip: "Click a node to explore" (1s)
 3. The tooltip fades, and the constellation becomes interactive (0.5s)
 Total: 2 seconds. Dismissible by clicking anywhere. Does not replay on subsequent visits.
 ### The "Journey" Lens as Fallback
 The Journey lens rearranges the constellation into a standard horizontal timeline -- the most familiar CV layout pattern. This serves as a cognitive fallback for visitors who find the spatial navigation confusing. It is always accessible from the lens toolbar and via the L keyboard shortcut.
 ---
 ## What Makes This Special
 This is the most **distinctive** of all 6 designs. No other CV site navigates like this.
 The constellation creates a mental map of Andy's career where everything is visible at once -- reducing cognitive load while increasing exploration curiosity. Visitors do not need to remember what is "below the fold" because nothing is below the fold. The entire career is laid out in space, available at a glance.
 The **connection web** is the signature feature. It shows not just WHAT Andy has done but HOW it all connects. The Python skill node connects to the switching algorithm project, which connects to the 14,000 patients identified, which connects to the 2.6M savings figure, which connects to the 220M budget he manages. Career coherence -- the idea that every role and skill builds on the last -- is visualized as a literal knowledge graph.
 The lens system adds intellectual depth. Three different lenses on the same data demonstrate analytical thinking -- the ability to view information from multiple angles. This is exactly what Andy does professionally: take the same prescribing dataset and extract different insights depending on the question being asked.
 Finally, the ECG-to-constellation transition is narratively powerful. A single heartbeat line becomes a universe of interconnected points. One signal becomes many. This mirrors Andy's career trajectory: from individual clinical interactions (one pharmacist, one patient) to population-level analytics (one analyst, one million patients).
@@ -1,724 +0,0 @@
 # Design 4: The Dosage
 ## Overview
 The user controls how much information they see. A pharmaceutical dosage metaphor -- self-titrate your information intake. Combined with a Cmd+K command palette for power users. The most accessible, recruiter-friendly, and fastest-to-relevant-content of all 6 designs.
 The core insight: most CVs and portfolios assume the visitor wants to see everything, in the order the author chose. This assumption wastes time. A hiring manager scanning 30 CVs wants key numbers in 5 seconds. A thorough reviewer wants the full picture. A curious peer wants to deep-dive into specific projects. These are three different users with three different "doses" of information needed.
 The Dosage design lets each visitor self-prescribe. Every piece of content exists at three depth levels (headline, summary, detail), and the visitor controls which level they see. The pharmaceutical metaphor is not cosmetic -- it reflects Andy's background as a pharmacist and his professional understanding that the right amount of the right information at the right time is what matters.
 Layered on top is a command palette (Cmd+K) borrowed from developer tools and productivity apps (Linear, Raycast, VS Code). This signals technical sophistication while providing a power-user shortcut to any piece of content.
 ---
 ## ECG Transition
 **Starting point:** "ANDREW CHARLWOOD" is on screen in neon green (#00ff41) strokes on a black (#000) background. The ECG trace that drew it is still visible. The drawing head has stopped.
 **Then:**
 The neon green name begins a smooth **color shift**: green (#00ff41) transitions to teal (#0D7377) over 600ms. Simultaneously, the rough ECG-traced letterforms **morph** into clean Plus Jakarta Sans (later replaced by DM Sans in the final render) typography. The imprecise, hand-drawn quality of the ECG strokes straightens and refines -- serifs sharpen, curves smooth, letter spacing normalizes. This morphing happens over 1 second, overlapping with the color shift.
 As the name refines, it **rises** from center-screen toward upper-third position (approximately 28vh from top). The movement follows `cubic-bezier(0.22, 0.68, 0, 1.00)` -- fast departure, gentle settle. Duration: 800ms.
 Below where the name was positioned, a single horizontal line appears. This is the midline of the ECG trace -- the flatline that connected the letter strokes -- left behind as the name lifted away. The line transitions from neon green to teal (#0D7377) and **extends** smoothly to span the full viewport width. Duration: 600ms, starting 200ms after the name begins rising.
 The black background brightens to warm white (#F8F6F3) during the name rise. The transition uses `ease-out` timing over 1 second.
 Below the teal line, the subtitle "Deputy Head of Population Health & Data Analysis" fades in (300ms, 400ms delay after line extends). Then the prompt "What would you like to know?" fades in (300ms, 200ms delay after subtitle). Then the five choice buttons stagger in from below, 60ms apart, each with a subtle `translateY(12px)` to `translateY(0)` entrance.
 The teal line persists as a permanent UI element throughout the entire experience -- a visual heartbeat-monitor flatline that doubles as a pharmaceutical Rx signature line. When the visitor clicks any choice button, this line **pulses once**: a brief flash of neon green (#00ff41) glow that travels along the line's length left-to-right in 300ms, then fades. This callback to the ECG origin happens on every major interaction, creating continuity.
 **Duration:** ~1.5 seconds total. Deliberately calm.
 **Color journey:** Black (#000) --> Warm White (#F8F6F3). ECG green (#00ff41) --> Teal (#0D7377). The warm white has a faint warm undertone (not clinical pure white) that creates an approachable, paper-like feel.
 **The message:** "The dramatic part is over. Now it is about you."
 ---
 ## Visual System
 ### Color Palette
 | Token | Value | Usage |
 |---|---|---|
 | `--bg-warm` | `#F8F6F3` | Primary background -- warm off-white |
 | `--bg-cream` | `#F0EDE8` | Card surfaces, elevated elements |
 | `--teal` | `#0D7377` | Primary accent -- links, interactive elements, Rx line |
 | `--teal-light` | `rgba(13, 115, 119, 0.08)` | Hover backgrounds, subtle tints |
 | `--teal-medium` | `rgba(13, 115, 119, 0.15)` | Active states, progress fills |
 | `--amber` | `#D4874D` | Secondary accent -- highlights, warmth |
 | `--amber-light` | `rgba(212, 135, 77, 0.1)` | Amber tinted backgrounds |
 | `--coral` | `#E8735A` | CTA buttons, urgent emphasis |
 | `--text-heading` | `#1A1A2E` | Dark headings |
 | `--text-body` | `#3D3D56` | Body text |
 | `--text-muted` | `#8B8B9E` | Labels, metadata, tertiary text |
 | `--border` | `#E2DED8` | Warm gray borders, dividers |
 | `--ecg-green` | `#00ff41` | ECG callback pulses only |
 ### Background Treatment
 The primary background is warm off-white (#F8F6F3) -- deliberately NOT pure white. A faint **paper grain texture** at 2% opacity overlays the background, created via a subtle CSS noise pattern. This creates a tactile, printed-document quality without being heavy-handed.
 ```css
 background-image: url("data:image/svg+xml,..."); /* tiny repeating noise SVG */
 background-size: 200px 200px;
 opacity: 0.02;
 ```
 The grain is purely cosmetic and does not affect readability.
 ### Typography
 | Role | Font | Weight | Size | Notes |
 |---|---|---|---|---|
 | Display (name) | DM Sans | 700 | `clamp(2.5rem, 5vw, 4rem)` | Geometric, slightly rounded, approachable |
 | Section headings | DM Sans | 700 | `clamp(1.5rem, 3vw, 2rem)` | |
 | Subheadings | DM Sans | 500 | 1.125rem (18px) | |
 | Body text | Inter | 400-450 | 15px / 1.7 line-height | `font-feature-settings: 'cv01', 'cv02', 'ss03'` for refined character shapes |
 | Labels / metadata | Inter | 500 | 13px, uppercase, 0.05em tracking | |
 | Data / statistics | JetBrains Mono | 400 | 14px | Used for numbers, percentages, code-like content |
 | Large statistics | JetBrains Mono | 700 | `clamp(2rem, 4vw, 3.5rem)` | The "big numbers" in The Numbers view |
 **Type scale:** Modular ratio 1.25 (Major Third). Steps: 0.875rem, 1rem, 1.25rem, 1.5625rem, 1.953rem, 2.441rem, 3.052rem.
 **Font loading:** DM Sans and Inter from Google Fonts with `display=swap`. JetBrains Mono with `display=optional` (acceptable fallback to system mono for data labels).
 ### Spacing System
 - **Base unit:** 4px
 - **Scale:** 4, 8, 12, 16, 24, 32, 48, 64, 80, 120px
 - **Section spacing:** 120px between major sections
 - **Card padding:** 24px (mobile: 16px)
 - **Grid:** 12-column grid, content centered in 8 columns (max-width: 720px for text content, 960px for card grids)
 - **Viewport padding:** 32px sides (tablet: 24px, mobile: 16px)
 ### Motion
 | Property | Value | Usage |
 |---|---|---|
 | Primary easing | `cubic-bezier(0.22, 0.68, 0, 1.00)` | Fast start, gentle settle. All entrance animations. |
 | Exit easing | `cubic-bezier(0.4, 0, 0.2, 1)` | Standard Material-style exit. |
 | Micro-interaction duration | 150-200ms | Hover effects, button presses, color transitions |
 | Content transition duration | 300-500ms max | View switches, panel openings |
 | Hard limit | 500ms | No animation exceeds this. Respect the visitor's time. |
 | Stagger delay | 60ms | Between siblings in a list (buttons, cards, stat items) |
 | Rx line pulse | 300ms | Left-to-right green flash on major interactions |
 ### Material & Depth
 Flat design with subtle depth. No heavy drop shadows.
 - **Cards:** 1px solid `--border` (#E2DED8). Background `--bg-cream` (#F0EDE8). No border-radius greater than 12px.
 - **Hover state:** Background lightens to white (#FFFFFF). Border transitions to `--teal-light`. Subtle `box-shadow: 0 2px 8px rgba(0,0,0,0.04)`.
 - **Active/pressed:** Background shifts to `--teal-light`. Scale 0.98 (20ms spring).
 - **Elevated elements** (command palette, tooltips): `box-shadow: 0 8px 30px rgba(0,0,0,0.08)`. Background white with 1px `--border`.
 ### Signature Visual: The Measure Bar
 Every major statistic has a thin horizontal progress bar beneath it. This is the design's recurring visual motif.
 - Height: 3px
 - Background track: `--border` (#E2DED8)
 - Fill: `--teal` (#0D7377)
 - Fill width: proportional to the stat's magnitude relative to a contextual maximum
 - Animation: fills from 0% to target width on IntersectionObserver trigger, using `cubic-bezier(0.22, 0.68, 0, 1.00)`, 800ms duration
 - Stagger: 100ms between adjacent Measure Bars
 Examples:
 - "14.6M" efficiency programme: Measure Bar fills to 100% (it IS the maximum in context)
 - "2.6M" savings: Measure Bar fills to ~18% (relative to 14.6M)
 - "14,000" patients: full width in its own context group
 - "200 hours" saved: Measure Bar fills to contextual proportion
 The Measure Bar is a quiet, persistent design element that gives every number a physical weight. Numbers alone are abstract; a bar makes them visceral.
 ---
 ## Section-by-Section Design
 ### Hero / Landing Page
 After the ECG transition completes, the visitor sees:
 **Top section (above the Rx line):**
 - Andy's name in DM Sans 700, `--text-heading` color, centered
 - Role title: "Deputy Head of Population Health & Data Analysis" in Inter 400, `--text-muted`, centered, below name
 **The Rx line:** Full-width horizontal line, 2px, `--teal`. Persistent throughout the experience.
 **Below the Rx line:**
 - Prompt: "What would you like to know?" in DM Sans 500, `--text-heading`, centered
 - 5 choice buttons in a horizontal row (wrapping to 2 rows on mobile):
 | Button | Label | Icon (Lucide) |
 |---|---|---|
 | 1 | The Numbers | Hash |
 | 2 | The Journey | Clock |
 | 3 | The Skills | Layers |
 | 4 | The Impact | Zap |
 | 5 | Everything | List |
 **Button styling:**
 - Pill-shaped: `border-radius: 999px`
 - Border: 1px solid `--border`
 - Background: `--bg-cream`
 - Text: DM Sans 500, 14px, `--text-body`
 - Icon: 16px, `--teal`, left of label
 - Hover: background white, border `--teal-light`, icon `--amber`
 - Active: background `--teal-light`, text `--teal`
 The buttons stagger in from below (60ms apart) during the ECG transition.
 ### The Numbers View
 Triggered by clicking "The Numbers" button. The button gains an active state (teal background, white text). The Rx line pulses green. Below the prompt area, content fades in:
 **Layout:** A centered column of large statistics, each one a self-contained card.
 Each stat card contains:
 1. **The number:** JetBrains Mono 700, `clamp(2rem, 4vw, 3.5rem)`, `--text-heading`
 2. **The context:** One line of Inter 400, 15px, `--text-body`
 3. **The Measure Bar:** 3px tall, `--teal` fill, animated
 4. **"Tell me more" link:** Inter 500, 13px, `--teal`, with ChevronRight icon. Clicking expands to the Summary depth.
 **Statistics displayed:**
 | Number | Context | Source |
 |---|---|---|
 | 14.6M | Efficiency programme identified through data analysis | Interim Head role |
 | 14,000 | Patients identified by Python switching algorithm | Interim Head role |
 | 220M | Prescribing budget managed with forecasting models | Deputy Head role |
 | 2.6M | Annual savings from automated switching analysis | Interim Head role |
 | 200+ hrs | Saved annually by Blueteq automation system | High-Cost Drugs role |
 | ~1M | Revenue enabled by asthma screening process adopted nationally | Tesco role |
 **Depth levels for each stat:**
 - **Headline** (default): The number + one-line context + Measure Bar
 - **Summary** (first "tell me more" click): 2-3 sentence expansion explaining methodology and impact. "Tell me more" changes to "Full detail."
 - **Detail** (second click): Full bullet points from the relevant role, tools used, timeline. A "Collapse" link returns to Headline level.
 ### The Journey View
 Triggered by clicking "The Journey" button. Content below the prompt:
 **Layout:** A horizontal timeline running left-to-right across the full content width.
 **Timeline structure:**
 - Horizontal line: 2px, `--border`, full width
 - Timeline dots: 12px circles at each role position
 - Current role dot: filled `--teal`
 - Past role dots: filled `--bg-cream` with 2px `--teal` border
 **Role positions (left to right, spaced proportionally by date):**
 1. Duty Pharmacy Manager (Aug 2016 - Nov 2017)
 2. Pharmacy Manager (Nov 2017 - May 2022)
 3. High-Cost Drugs & Interface Pharmacist (May 2022 - Jul 2024)
 4. Deputy Head, Population Health & Data Analysis (Jul 2024 - Present)
 5. Interim Head, Population Health & Data Analysis (May 2025 - Nov 2025)
 Each dot has a label below: role title (DM Sans 500, 13px, `--text-body`). Organisation name appears on hover in `--text-muted`.
 **Depth levels:**
 - **Headline** (default): Timeline with role titles only. Compact. Scannable in 3 seconds.
 - **Summary** (click a dot): A card expands below the timeline showing the role title, organisation, date range, and first 2 bullet points. Only one card open at a time (accordion).
 - **Detail** (click "Full detail" in expanded card): All bullet points for that role appear. Tools/technologies mentioned are highlighted as inline teal badges.
 **Employer era color-coding:**
 - NHS ICB roles: timeline dots and cards have a teal left border
 - Tesco roles: timeline dots and cards have an amber left border
 ### The Skills View
 Triggered by clicking "The Skills" button.
 **Layout:** Three category cards stacked vertically.
 **Categories:**
 1. **Technical** -- Python, SQL, Power BI, JS/TS, Data Analysis, Dashboard Dev, Algorithm Design, Data Pipelines
 2. **Clinical** -- Medicines Optimisation, Pop. Health Analytics, NICE TA, Health Economics, Clinical Pathways, CD Assurance
 3. **Strategic** -- Budget Mgmt, Stakeholder Engagement, Pharma Negotiation, Team Development
 Each category card:
 - Header: Category name in DM Sans 700, with count badge ("8 skills", "6 skills", "4 skills")
 - Collapsed state: Header + top 3 skills shown as pill badges with proficiency percentages
 - Expanded state (click header): All skills visible as a grid. Each skill shows:
  - Name (DM Sans 500, 14px)
  - Proficiency (JetBrains Mono 400, 13px, `--teal`)
  - SVG circular gauge (64px diameter, `strokeDashoffset = circumference * (1 - level / 100)`, teal for Technical/Strategic, coral for Clinical)
  - The gauge animates when revealed (1s ease-out with 80ms stagger between skills)
 ### The Impact View
 Triggered by clicking "The Impact" button.
 **Layout:** Project cards in a 2-column grid (single column on mobile).
 **Projects:**
 1. **PharMetrics**
   - One-line: "Real-time medicines expenditure dashboard for NHS decision-makers"
   - Outcome badge: "Live Project" in teal
   - Link: medicines.charlwood.xyz
   - Tech badges: Power BI, SQL
 2. **Switching Algorithm**
   - One-line: "Python algorithm identifying 14,000 patients for cost-effective alternatives"
   - Outcome badge: "2.6M savings" in teal
   - Stat with Measure Bar: "Compressed months of analysis into 3 days"
   - Tech badges: Python, SQL
 3. **Blueteq Generator**
   - One-line: "Automated prior approval form creation for high-cost drugs"
   - Outcome badge: "200+ hrs/year saved" in teal
   - Stat: "70% reduction in required forms"
   - Tech badges: Python, Automation
 4. **Sankey Chart Tool**
   - One-line: "Patient journey visualization for pathway compliance auditing"
   - Tech badges: Python, Data Visualization
 5. **Controlled Drug Monitor**
   - One-line: "Population-scale opioid exposure tracking for patient safety"
   - Tech badges: Python, SQL
 Each card has three depth levels:
 - **Headline** (default): Title + one-line description + outcome badge
 - **Summary** (click): 2-3 sentence methodology description + tech badges
 - **Detail** (click again): Full description from CV, related role context, connection to other projects
 ### Everything View
 Triggered by clicking "Everything" button. This renders the complete CV in a traditional single-scroll layout:
 1. Hero section with name, title, summary paragraph
 2. Vitals row (key stats as cards with Measure Bars)
 3. Skills section with all three categories expanded
 4. Experience section as vertical timeline with all bullet points
 5. Education section with MPharm and Mary Seacole cards + A-Level note
 6. Projects section as card grid
 7. Contact section
 8. Footer with Rx line callback
 This is the fallback for visitors who want a conventional CV experience. It is also the view that search engines and screen readers encounter (full content in DOM regardless of which button is clicked; the button views filter visibility, they do not remove content from DOM).
 ---
 ## Interactions & Micro-interactions
 ### Choice Button Selection
 1. User clicks a choice button
 2. The Rx line pulses: a neon green (#00ff41) glow travels left-to-right along the line (300ms, ease-out)
 3. The clicked button transitions to active state (teal background, white text, 150ms)
 4. Previously active button returns to default state (150ms)
 5. Content below the prompt area crossfades: old content fades out (200ms), new content fades in from below with `translateY(12px)` (300ms, 60ms stagger for child elements)
 ### Depth Expansion
 1. User clicks "Tell me more" or an expandable element
 2. The element smoothly expands: `max-height` transition from current to target (300ms, `cubic-bezier(0.22, 0.68, 0, 1.00)`)
 3. New content fades in during expansion (opacity 0 to 1, 200ms, 100ms delay)
 4. The "Tell me more" text changes to "Full detail" (if going from Headline to Summary) or "Collapse" (if at Detail level)
 5. Chevron icon rotates 90 degrees (150ms)
 ### Depth Collapse
 1. User clicks "Collapse"
 2. Content fades out (150ms)
 3. Element contracts (300ms, matching expansion easing)
 4. Returns to Headline depth. "Tell me more" reappears.
 ### Command Palette Open
 1. User presses Cmd+K (or clicks the search icon in the side rail)
 2. Background dims with a 40% black overlay (200ms fade)
 3. Palette container slides down from top with subtle `translateY(-8px)` to `translateY(0)` (250ms, spring)
 4. Input field auto-focuses. Cursor blinks.
 5. Placeholder text: "Search skills, roles, projects, or actions..."
 ### Command Palette Search
 1. User types. Results appear in real-time (fuzzy matching via fuse.js)
 2. Results grouped by section: "Experience", "Skills", "Projects", "Actions"
 3. Each result: icon (section-colored) + title + breadcrumb (e.g., "Experience > Deputy Head > Python algorithm")
 4. Arrow keys navigate results. Active result has teal background highlight.
 5. Enter selects: navigates to the relevant content, expanding it to Detail depth. The corresponding choice button activates.
 6. Escape closes the palette (200ms fade + slide up)
 ### Command Palette Actions
 Beyond content search, the palette surfaces actions:
 - "Download CV as PDF" -- generates and downloads a formatted PDF
 - "Email Andy" -- opens mailto:andy@charlwood.xyz
 - "View PharMetrics" -- opens medicines.charlwood.xyz in new tab
 - "LinkedIn" -- opens linkedin.com/in/andrewcharlwood in new tab
 Actions appear in an "Actions" group at the bottom of results, marked with a subtle lightning bolt icon.
 ### Rx Line Pulse
 Triggered on every major interaction (button click, depth change, command palette selection). The pulse is a neon green (#00ff41) glow that:
 1. Appears at the left edge of the line
 2. Travels rightward across the full viewport width (300ms, ease-out)
 3. Fades from 60% opacity to 0% as it travels
 4. The teal (#0D7377) base line is always visible -- the pulse is a highlight overlay
 This is the design's heartbeat callback. It ties every interaction back to the ECG origin without being heavy-handed.
 ### Measure Bar Animation
 1. IntersectionObserver detects the stat entering the viewport (threshold: 0.3)
 2. The 3px bar fill animates from width 0% to target width
 3. Duration: 800ms, easing: `cubic-bezier(0.22, 0.68, 0, 1.00)`
 4. Stagger: 100ms between adjacent Measure Bars
 5. Trigger-once: bars do not re-animate on subsequent views
 ---
 ## Navigation
 ### The Side Rail
 A persistent minimal sidebar rail on the left edge of the viewport. Width: 48px. Background: transparent (does not occlude content).
 **Contents (top to bottom):**
 - Search icon (Lucide Search, 20px) -- triggers command palette
 - Divider line (1px, 16px wide, `--border`)
 - 5 section icons matching the choice buttons:
  - Hash (The Numbers)
  - Clock (The Journey)
  - Layers (The Skills)
  - Zap (The Impact)
  - List (Everything)
 - Spacer (flex-grow)
 - Dose meter (bottom)
 Each icon: 20px, `--text-muted` color. Active icon: `--teal`. Hover: `--amber`.
 **"Seen" indicators:** After a visitor has viewed a section (clicked the corresponding button), a 4px teal dot appears below that section's icon. This creates a subtle completeness signal without being gamified.
 Clicking any icon triggers the same behavior as clicking the corresponding choice button (Rx line pulse, content crossfade, button active state update).
 ### The Dose Meter
 Positioned at the bottom of the side rail. A vertical bar, 4px wide, 48px tall.
 - Background track: `--border`
 - Fill: `--teal`, growing upward
 - Fill height: proportional to the percentage of total content elements the visitor has viewed (seen section / total sections, plus expanded items / total expandable items)
 No label, no percentage. Just a quiet fill. If the visitor has seen everything, the bar is full and gains a subtle amber glow.
 **Disable:** A tiny settings gear icon (12px, `--text-dim`) appears on hover near the dose meter. Clicking it toggles the meter off (it fades out and the gear icon shows a strikethrough state). Preference stored in `localStorage`.
 ### Keyboard Shortcuts
 | Key | Action |
 |---|---|
 | `Cmd+K` / `Ctrl+K` | Open command palette |
 | `Escape` | Close command palette / collapse expanded content |
 | `1-5` | Switch to view 1-5 (Numbers, Journey, Skills, Impact, Everything) |
 | `Tab` | Navigate between interactive elements in DOM order |
 | `Enter` / `Space` | Activate focused button / expand focused content |
 | `?` | Show keyboard shortcut overlay (dismissible) |
 ---
 ## Responsive Strategy
 ### Desktop (> 1024px)
 Full experience:
 - Side rail visible on left edge
 - Choice buttons in single horizontal row
 - Content in 8-column centered grid (max-width 960px)
 - Command palette as floating overlay (max-width 640px, centered)
 - 2-column grid for project cards
 - Horizontal timeline for Journey view
 - Dose meter in side rail
 ### Tablet (768px - 1024px)
 - Side rail collapses to a **bottom tab bar** (5 icons + search, horizontal, 56px height, anchored to bottom)
 - Content fills full width minus 24px padding each side
 - Choice buttons wrap to 2 rows if needed
 - Command palette becomes full-screen overlay (slides up from bottom)
 - Project cards in single column
 - Horizontal timeline becomes scrollable (horizontal overflow with subtle scroll indicators)
 - Dose meter moves to the right side of the bottom tab bar as a horizontal bar
 ### Mobile (< 768px)
 - **Bottom tab bar:** 5 section icons + search icon. Same as tablet but more compact (48px height). Icons 18px. Active icon has teal dot below.
 - **Choice buttons:** Stack vertically, full width minus 32px padding. Larger touch targets (48px height minimum).
 - **Content:** Single column, 16px padding.
 - **Command palette:** Full-screen overlay. Input at top. Results scrollable below.
 - **The Journey timeline:** Converts from horizontal to **vertical** timeline. Roles stack vertically with timeline line on the left. More natural for vertical scrolling.
 - **Project cards:** Single column, full width.
 - **Skill gauges:** Grid of 2 columns instead of 3.
 - **Dose meter:** Hidden on mobile (the bottom tab bar's "seen" dots provide equivalent information).
 - **Rx line:** Still visible, but at reduced width (viewport width minus 32px, centered). Pulse animation still fires.
 - **Depth expansion:** Touch-friendly. "Tell me more" links have 44px minimum touch target. Expansion uses the full screen width.
 The progressive disclosure mechanic is **inherently mobile-friendly** because it shows less content by default. Mobile users benefit most from the dosage model -- they are the most likely to want just "The Numbers" rather than scrolling through everything.
 ---
 ## Technical Implementation
 ### Choice Button State Management
 ```tsx
 type ViewMode = 'numbers' | 'journey' | 'skills' | 'impact' | 'everything';
 const [activeView, setActiveView] = useState<ViewMode | null>(null);
 const [visitedViews, setVisitedViews] = useState<Set<ViewMode>>(new Set());
 ```
 Switching views triggers `AnimatePresence` for crossfade transitions. The DOM always contains all content (for SEO/accessibility); views are toggled via `display` or `visibility` with animated wrappers.
 ### Three-Depth System
 A reusable `DepthContent` component manages the three levels:
 ```tsx
 interface DepthContentProps {
  headline: React.ReactNode;
  summary: React.ReactNode;
  detail: React.ReactNode;
  id: string; // unique identifier for dose tracking
 }
 const DepthContent: React.FC<DepthContentProps> = ({ headline, summary, detail, id }) => {
  const [depth, setDepth] = useState<1 | 2 | 3>(1);
  const { trackView } = useDoseMeter();
  useEffect(() => {
    trackView(id, depth);
  }, [depth]);
  return (
    <div>
      {headline}
      <AnimatePresence mode="wait">
        {depth >= 2 && <motion.div key="summary" ...>{summary}</motion.div>}
        {depth >= 3 && <motion.div key="detail" ...>{detail}</motion.div>}
      </AnimatePresence>
      <DepthToggle currentDepth={depth} onToggle={setDepth} />
    </div>
  );
 };
 ```
 ### Command Palette
 **Library:** Headless UI `Combobox` for the input + listbox pattern. `fuse.js` for fuzzy search (~6KB gzipped).
 **Search index:** Built at app initialization from all CV content. Each searchable item has:
 - `title`: display name
 - `section`: which view it belongs to
 - `content`: searchable text (role descriptions, skill names, project details)
 - `action`: what happens when selected (navigate to view, expand to depth, open URL)
 ```tsx
 const searchIndex = new Fuse(allContent, {
  keys: ['title', 'content'],
  threshold: 0.4,
  includeScore: true,
 });
 ```
 Results are grouped by section and capped at 8 results per group.
 ### Side Rail Active Tracking
 The side rail uses the `useActiveSection` hook pattern:
 ```tsx
 const useActiveView = () => {
  const [activeView, setActiveView] = useState<ViewMode | null>(null);
  // Tracks which button was last clicked
  // Side rail icons reflect this state
  return { activeView, setActiveView };
 };
 ```
 For the "Everything" view, IntersectionObserver tracks which section is in the viewport and updates the side rail's active icon accordingly.
 ### Dose Meter
 A custom hook tracks content exploration:
 ```tsx
 const useDoseMeter = () => {
  const [viewedItems, setViewedItems] = useState<Map<string, number>>(new Map());
  // key: content item ID, value: max depth viewed (1, 2, or 3)
  const totalItems = TOTAL_CONTENT_ITEMS; // constant
  const totalDepthPoints = totalItems * 3; // max possible
  const currentPoints = Array.from(viewedItems.values()).reduce((sum, d) => sum + d, 0);
  const percentage = currentPoints / totalDepthPoints;
  return { percentage, trackView, viewedItems };
 };
 ```
 The meter fill is a CSS custom property (`--dose-fill`) animated via transition on the bar element.
 ### Rx Line Pulse
 The pulse is a CSS pseudo-element on the line container:
 ```css
 .rx-line::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, transparent 0%, #00ff41 50%, transparent 100%);
  opacity: 0;
  transform: translateX(-100%);
 }
 .rx-line.pulsing::after {
  animation: rxPulse 300ms ease-out forwards;
 }
@keyframes rxPulse {
  0% { opacity: 0.6; transform: translateX(-100%); }
  100% { opacity: 0; transform: translateX(100%); }
 }
 ```
 The `.pulsing` class is added via React state and removed after the animation completes (300ms timeout).
 ### Measure Bar Animation
 Each Measure Bar is a simple div with CSS transition:
 ```css
 .measure-bar-fill {
  height: 3px;
  width: 0%;
  background: var(--teal);
  transition: width 800ms cubic-bezier(0.22, 0.68, 0, 1.00);
 }
 .measure-bar-fill.visible {
  width: var(--target-width);
 }
 ```
 The `--target-width` is set via inline style from the data. The `.visible` class is toggled by IntersectionObserver (trigger-once).
 ### Performance Budget
 - **Fonts:** DM Sans (700, 500) + Inter (400, 450, 500) + JetBrains Mono (400, 700) = ~120KB total
 - **fuse.js:** ~6KB gzipped
 - **Framer Motion:** tree-shaken to AnimatePresence + motion div = ~30KB gzipped
 - **Headless UI Combobox:** ~8KB gzipped
 - **Total JS bundle (above framework):** ~44KB gzipped
 - **No canvas rendering.** All visuals are DOM/CSS. This is the lightest design of all 6.
 ---
 ## Accessibility
 This is the **most accessible** of all 6 designs.
 ### Full Content Always in DOM
 Regardless of which choice button is active, all CV content exists in the DOM in logical order. The view buttons toggle `visibility` and `aria-hidden`, not `display: none` or DOM removal. This means:
 - Search engines index the full CV content
 - Screen readers can traverse all content
 - The "Everything" button simply makes everything visible -- it does not load additional content
 ### Progressive Disclosure Patterns
 All expand/collapse interactions use standard WAI-ARIA patterns:
 - Expandable items: `aria-expanded="true|false"` on the trigger
 - Content panels: `aria-hidden` mirrors expanded state
 - Role: `aria-controls` links trigger to its content panel
 - State change announced: trigger's `aria-expanded` update is announced by screen readers
 ### Command Palette
 - Fully keyboard navigable: arrow keys, Enter, Escape
 - `role="combobox"` with `aria-haspopup="listbox"`
 - Results: `role="listbox"` with `role="option"` children
 - `aria-activedescendant` tracks the currently highlighted result
 - `aria-label="Search CV content and actions"`
 ### Side Rail
 - `role="navigation"`, `aria-label="Section navigation"`
 - Each icon: `role="button"`, `aria-label="View [section name]"`, `aria-pressed="true|false"`
 - Dose meter: `role="progressbar"`, `aria-valuenow`, `aria-valuemin="0"`, `aria-valuemax="100"`, `aria-label="Content exploration progress"`
 ### Focus Management
 - When a choice button is clicked, focus moves to the first content element in the new view
 - When the command palette opens, focus moves to the search input
 - When the command palette closes, focus returns to the element that opened it
 - When content expands, focus moves to the newly revealed content
 - Skip-to-content link is the first focusable element
 ### Motion Preferences
 When `prefers-reduced-motion: reduce` is detected:
 - Measure Bars show their final width immediately (no animation)
 - No Rx line pulse animation
 - View transitions use instant swap instead of crossfade
 - Depth expansions use instant show/hide instead of animated expansion
 - Choice button stagger is removed (all appear simultaneously)
 - The ECG transition morph is simplified to a crossfade (green name fades out, clean name fades in)
 ### Color Contrast
 All text meets WCAG AA on the warm white background:
 - `--text-heading` (#1A1A2E) on `--bg-warm` (#F8F6F3): contrast ratio 14.8:1 (AAA)
 - `--text-body` (#3D3D56) on `--bg-warm` (#F8F6F3): contrast ratio 8.2:1 (AAA)
 - `--text-muted` (#8B8B9E) on `--bg-warm` (#F8F6F3): contrast ratio 3.5:1 (AA for large text)
 - `--teal` (#0D7377) on `--bg-warm` (#F8F6F3): contrast ratio 5.4:1 (AA)
 - `--coral` (#E8735A) on `--bg-warm` (#F8F6F3): contrast ratio 3.1:1 (AA for large text; used only for CTA buttons with white text overlay)
 Button text contrast:
 - White (#FFFFFF) on `--teal` (#0D7377): contrast ratio 5.4:1 (AA)
 - White (#FFFFFF) on `--coral` (#E8735A): contrast ratio 3.3:1 (AA for large text, 18px+)
 ### Touch Targets
 All interactive elements have minimum 44px touch targets on mobile:
 - Choice buttons: 48px height
 - "Tell me more" links: 44px tap area (padded beyond visible text)
 - Side rail / bottom tab icons: 44px tap area
 - Command palette results: 48px row height
 ---
 ## What Makes This Special
 The Dosage respects the visitor's time more than any other design. It answers the question every CV visitor has but never gets to ask: "What do you want to know?"
 A busy recruiter clicks "The Numbers" and sees Andy's quantitative impact in 5 seconds flat. A thorough hiring manager clicks "Everything" and reads the full CV. A curious peer clicks "The Impact" and deep-dives into the switching algorithm project through three depth levels. A power user hits Cmd+K and searches for "Python" to find every mention across all sections instantly.
 The pharmaceutical dosage metaphor is elegant without being heavy-handed. It is not costume design -- it is a genuine UX pattern. The concept of dose-response (the right amount of the right thing at the right time) is literally how pharmacists think, and it is literally how good information architecture should work. Andy's professional worldview IS the site's UX philosophy.
 The Rx line -- the persistent teal horizontal line with its green pulse callback -- is the design's signature. It is simultaneously:
 - A remnant of the ECG animation (narrative continuity)
 - A pharmaceutical prescription line (career metaphor)
 - A progress indicator (interaction feedback)
 - A visual anchor (layout stability)
 One element, four meanings. That is efficient design.
 The command palette signals technical sophistication to the right audience (developers, tech-adjacent roles) without alienating non-technical visitors (it is optional, triggered only by keyboard shortcut or an unobtrusive search icon). It says: "Andy knows how power users think, because he builds tools for them."
 And the dose meter -- that quiet little bar in the corner -- does something subtle and important. It tells the visitor: "There is more here if you want it." It creates gentle curiosity without pressure. It makes thoroughness feel rewarding rather than obligatory. Most CV sites give you everything and hope you read it. This one gives you control and trusts you to find what matters.
@@ -1,851 +0,0 @@
 # Design 5: The Depth Stack
 > Content exists at different depths. The surface shows the overview; clicking reveals progressively deeper layers. Push/pop navigation like iOS, but applied to a CV. The most mature, executive-grade design of all six. Luxury in restraint.
 ---
 ## Overview
 The Depth Stack treats Andy's CV as a layered document rather than a scrolling page. The surface layer presents a spacious, editorial overview with headline information. Each section can be "pushed into" to reveal progressively richer detail -- role summaries become full achievement breakdowns, skill categories expand into proficiency grids, project titles open into case studies.
 This z-axis navigation model borrows from iOS push/pop transitions and applies it to career storytelling. The result feels immediately familiar on mobile (it maps to native navigation patterns) and strikingly distinctive on desktop (where the visible stack edges create a sense of explorable depth).
 The visual language is Refined Editorial: Fraunces serif headings on pure white, copper accents threading through every section, generous whitespace that says "my work speaks for itself." Every design decision communicates seniority and substance -- someone managing a nine-figure budget should have a site that feels commensurate.
 **Andy reads as:** Senior executive with depth of experience worth exploring.
 ---
 ## ECG Transition
 Starting frame: Andy's name is on screen, neon green (`#00FF41`), on a black background. The ECG heartbeat has completed. The name glows.
 ### Beat 1: The Fermata (400ms)
 Nothing happens. The name sits, glowing. This pause is deliberate -- a held breath, a fermata in music. The viewer has been watching fast-paced animation for approximately 10 seconds. The stillness is the first signal that this design values a different tempo. It says: "slow down, pay attention differently now."
 ### Beat 2: The Color Drain (800ms)
 The neon green begins to drain from the letters, like ink being absorbed by paper. The color shifts through a desaturated green-gray, then through a warm neutral, and arrives at copper (`#B87333`). The transition is unhurried -- 800ms for a color shift is luxuriously slow in web animation terms. The glow disappears entirely. What was electric and luminous is now matte and material. The name looks *engraved* rather than projected.
 Color keyframes:
 ```
 0ms:   #00FF41 (neon green, full glow, blur radius 8px)
 200ms: #66CC77 (desaturated green, glow dimming, blur 4px)
 400ms: #99AA88 (green-gray, glow gone, blur 0)
 600ms: #B89977 (warm neutral, matte)
 800ms: #B87333 (copper, fully matte, no glow)
 ```
 ### Beat 3: The Copper Thread Extends (600ms, overlapping)
 Starting at the 600ms mark of Beat 2 (so the line appears as the name reaches its warm neutral phase), a single horizontal line -- thin, copper, 1.5px -- extends from the left edge of the name toward both viewport margins simultaneously. It moves at a measured pace, reaching full viewport width in approximately 600ms. This is the birth of the Copper Thread, the site's visual signature. The line passes through the name's baseline, anchoring it.
 The line draws using a CSS `scaleX` transform from 0 to 1, centered on the name's left edge, eased with `cubic-bezier(0.25, 0.1, 0.25, 1)`. The line is a real DOM element (`<div>`) positioned to match the canvas baseline, creating the handoff point.
 ### Beat 4: The Curtain Rise (1000ms)
 The white (`#FFFFFF`) enters not as a uniform fade but as a curtain rise: the lower portion of the viewport begins turning white, with the boundary rising smoothly upward. The boundary between black above and white below is a soft gradient (40px of blending, not a hard edge).
 Implementation: a CSS `linear-gradient` animated via CSS custom properties or `requestAnimationFrame`:
 ```css
 background: linear-gradient(
  to top,
  #FFFFFF var(--curtain-progress),
  #000000 calc(var(--curtain-progress) + 40px)
 );
 ```
 The copper line remains stationary at its position as the white rises past it. Below the copper line, on the now-white background, the hero subtitle and intro text begin fading in via pure opacity (no translation, no movement -- just materialization). Above the copper line, still against black, Andy's name in copper holds steady.
 When the white boundary reaches the name, the remaining black dissolves over 400ms. Andy's name transitions from copper to the primary text color -- deep navy (`#1A2B4A`) -- as the background behind it turns white. The canvas hands off to the DOM: the Fraunces heading element appears at matched coordinates, the canvas fades out. The name may drift subtly upward into its final hero position, but only 20-30px -- almost imperceptible.
 ### Final State
 The page is fully white with the copper thread line. Below it, content is already partially visible. Above it, Andy's name in Fraunces serif sits with authority. The editorial layout has begun. The breadcrumb bar fades in at the top over 300ms.
 **Total transition duration: approximately 2400ms.** Deliberately the slowest of all six designs. But it never feels slow because every beat has purpose and the viewer is watching something transform, not waiting for something to load.
 **Emotional arc:** Electric --> still --> refined --> authoritative. The animation's raw energy is distilled into the most minimal design element possible (one line, one color). Less is more, stated as literal visual principle.
 ### Reduced Motion Fallback
 If `prefers-reduced-motion: reduce` is set, the entire transition collapses to a simple 400ms opacity crossfade: black background fades to white, neon green name fades to navy Fraunces heading. The copper thread line appears immediately at full width. No curtain rise, no color drain, no drift. The creative transition is an enhancement, not a requirement.
 ---
 ## Visual System
 ### Color Palette
 | Role | Color | Hex | Usage |
 |------|-------|-----|-------|
 | Background | Pure white | `#FFFFFF` | Page background, primary layer surfaces |
 | Surface | Cool light gray | `#F5F5F7` | Recessed areas, secondary layer backgrounds, detail sheet backgrounds |
 | Primary text | True black | `#111111` | Body text, maximum authority and contrast |
 | Secondary text | Cool gray | `#6E6E73` | Metadata, dates, labels, breadcrumb inactive segments |
 | Primary accent | Deep navy | `#1A2B4A` | Headings (Fraunces), nav active state, primary interactive elements |
 | Secondary accent | Copper/bronze | `#B87333` | The Copper Thread, achievement callout borders, link underlines, hover states, key numerals |
 | Tertiary | Sage green | `#7A9E7E` | Healthcare context nods -- used very sparingly (1-2 instances per viewport maximum). NHS role indicators, health-related skill tags |
 | Highlight | Pale blue | `#E8F0FE` | Text selection color, inline emphasis backgrounds, breadcrumb hover |
 | Border | Light cool gray | `#D2D2D7` | Structural dividers, card edges (non-copper) |
 | Layer shadow | Warm black | `rgba(26, 43, 74, 0.08)` | Stack edge shadows only (the one exception to the "no shadows" rule) |
 **Color psychology:** Navy and copper together read as institutional excellence -- think university crests, financial institutions, executive stationery. This palette says "I am senior, accomplished, and comfortable in my authority." The sage green whispers "healthcare" without shouting it. The warm off-black shadow color ensures even the stack-depth shadows feel intentional rather than default.
 **Color application rules:**
 - Copper appears in only three contexts: the Thread lines, achievement border accents, and link/hover states. Never as backgrounds. Never as large areas of fill.
 - Sage green is reserved for healthcare-specific callouts. If a section has no clinical relevance, sage green does not appear.
 - Navy is used exclusively for headings and primary interactive elements. Body text is true black, not navy.
 ### Typography System
 **Heading typeface: Fraunces** (Google Fonts, variable font)
 - Optical size axis (`opsz`): 9-144. At display sizes (48px+), the letterforms become more graceful with higher stroke contrast. At text sizes, they simplify for readability.
 - Weight axis (`wght`): 600 for section headings, 700-800 for the hero name.
 - `font-feature-settings: 'ss01'` for the alternate glyph set (softer terminals).
 - This is NOT a newspaper serif. Fraunces has warmth, personality, and a slight quirkiness in its soft serifs that prevents stuffiness. It's distinctive without being heavy.
 **Body typeface: Plus Jakarta Sans** (Google Fonts)
 - Weights: 400 (body), 500 (emphasis/labels), 600 (bold body, card titles).
 - Slightly rounded terminals give it warmth that pairs well with Fraunces without competing.
 - Alternative: Source Sans 3 for a more neutral, technical feel.
 **Monospace typeface: Source Code Pro** (Google Fonts)
 - Weight: 400 only.
 - Used sparingly -- key statistics, dates in the timeline, budget figures. Never for running text.
 - The restraint in mono usage distinguishes this from more technical-feeling designs.
 **Type Scale (modular ratio 1.333 -- Perfect Fourth):**
 ```
 Display:    clamp(3rem, 6vw, 5rem)        -- Hero name in Fraunces 800
 H1:         clamp(2.25rem, 4vw, 3.375rem)  -- Section titles in Fraunces 600
 H2:         clamp(1.5rem, 2.5vw, 2.25rem)  -- Subsection titles in Fraunces 600
 H3:         1.25rem                         -- Card/item titles in Plus Jakarta Sans 600
 Body:       1.0625rem (17px)                -- Base reading size, Plus Jakarta Sans 400
 Body-lg:    1.1875rem (19px)                -- Pull quotes, lead paragraphs
 Small:      0.875rem (14px)                 -- Metadata, dates, labels
 Mono:       0.875rem (14px)                 -- Statistics, budget figures
 ```
 **Line heights:**
 ```
 Display/H1: 1.1 (tight)
 H2:         1.2
 H3:         1.3
 Body:       1.65 (generous for reading comfort at 680px column width)
 Small:      1.5
 ```
 **Letter spacing:**
 ```
 Display:    -0.02em (tightened for visual cohesion at large sizes)
 H1:         -0.015em
 H2-Body:    0 (default)
 Small/Meta: 0.01em (slightly open for legibility at small sizes)
 Mono:       0.02em (open for numeral clarity)
 ```
 **Weight philosophy:** Only three weights visible at any given time in any given viewport. Hierarchy comes through typeface contrast (Fraunces vs Plus Jakarta Sans), size, and color -- not through bold proliferation. Body text stays at 400. The contrast between ornate Fraunces headings and clean Plus Jakarta Sans body text creates sophisticated tension that carries the design.
 ### Spacing and Layout Rhythm
 **Base unit:** 8px. All spacing is multiples of 8.
 **Section spacing:** 160px (20 base units) between major sections. This is the most generous spacing of all six designs. The whitespace is a design element, not wasted space. It signals: "there is no hurry here."
 **Primary content column:** Single column, max-width 680px -- the typographically optimal reading width for 17px body text. This creates a strong editorial centerline. Content never spreads to fill wide viewports; it holds its narrow column with confidence.
 **Pull quote / stat breakouts:** Key achievements and large statistics can break out to 800-900px width, creating typographic moments that punctuate the rhythm. These are the only elements that exceed the 680px column.
 **Horizontal rules:** Thin 1px lines in `#D2D2D7` between subsections within a layer. Classic editorial device. On layer transitions, the copper thread line replaces these at the section boundary.
 **Card internal spacing:**
 ```
 Card padding:        32px (4 units)
 Card gap:            24px (3 units)
 Content group gap:   16px (2 units)
 Related item gap:    8px (1 unit)
 ```
 **Vertical rhythm within a section:**
 ```
 Section title to first content:  48px
 Between content groups:          32px
 Between items within a group:    16px
 Stat number to stat label:       8px
 ```
 ### Motion Design Language
 **Primary easing:** `cubic-bezier(0.25, 0.1, 0.25, 1)` -- close to CSS `ease`, but slightly more gentle on the deceleration. Nothing about this design should feel urgent or flashy.
 **Layer transition easing:** `cubic-bezier(0.32, 0.72, 0, 1.05)` -- a slight overshoot (1.05) on layer push creates a subtle spring feel that adds physicality without being playful. Duration: 300ms.
 **Duration philosophy:**
 ```
 Micro-interactions (hover, focus):  200ms
 Content reveals (opacity):          600-800ms
 Layer push/pop:                     300ms
 Detail sheet enter:                 350ms
 Detail sheet exit:                  250ms (exits are always faster than enters)
 Copper thread line draw:            400ms per section
 Stagger between items:              80ms
 ```
 **What moves:**
 - Layer transitions: translateX + scale + blur (the z-axis push/pop).
 - Content reveals: Pure opacity fade. No translateY, no translateX, no scale. Just opacity 0 to 1 over 600ms. This design *trusts its content* to be interesting without needing to slide into frame.
 - The copper thread line: draws left-to-right via `scaleX` when a new section enters.
 - Link underlines: draw left-to-right on hover.
 - Large statistics: static. No counting animations. The number "14,000" is more powerful when it appears fully formed than when it counts up from zero.
 **What does NOT move:**
 - Text once revealed. No parallax. No scroll-linked animations.
 - Navigation elements. The breadcrumb updates its text, but doesn't animate position.
 - Images (if any). They appear via opacity fade and stay put.
 - The page itself. No scroll hijacking, no momentum effects.
 **Scroll reveals:** Content within a layer fades in when it enters the viewport (IntersectionObserver at 15% threshold). Trigger once -- never re-animate on scroll back. Stagger delay: 80ms between sibling elements. This is slower than other designs (which use 40-60ms) because the editorial pacing rewards patience.
 ### Material and Texture
 **Primary approach: Pure flat.** No box shadows on cards. No gradients. No glassmorphism. No neumorphism. No blur effects on static elements. Depth comes entirely from typography scale, spacing, and the z-axis layer system.
 **The one shadow exception:** Stack edge shadows. When layers are pushed back, the background layer's right edge casts a subtle shadow (`box-shadow: -4px 0 16px rgba(26, 43, 74, 0.08)`) to create the illusion of physical stacking. This is the only shadow in the entire design. Its rarity makes it meaningful.
 **One texture element:** A very subtle halftone dot pattern at 1.5% opacity applied to `#F5F5F7` surface areas (detail sheets, secondary panels). This nods to print editorial heritage -- the kind of texture you'd see at 10x magnification on a high-quality magazine page. It's imperceptible consciously but adds tactile warmth subliminally.
 Implementation:
 ```css
 .surface-texture {
  background-image: radial-gradient(circle, #111111 0.5px, transparent 0.5px);
  background-size: 12px 12px;
  opacity: 0.015;
 }
 ```
 **Photography treatment:** If Andy adds a headshot or project screenshots, they should be desaturated to 60-70% and given a subtle duotone wash (navy + copper). No full-color photos breaking the palette. This maintains the editorial cohesion.
 ### The Copper Thread (Visual Signature)
 The Copper Thread is a 1.5px horizontal line in `#B87333` that appears as a consistent visual motif:
 1. **Section dividers:** At the top of each major section, the copper line runs the full width of the content column (680px, or breakout width if applicable). It draws itself left-to-right when the section enters the viewport, taking 400ms.
 2. **Achievement callout borders:** Key achievements (stats, awards, notable outcomes) have a 2px copper left-border, creating a pull-quote-like emphasis within the flow.
 3. **Link underlines:** Interactive text links show a copper underline that draws left-to-right on hover (200ms `scaleX` transition). The underline is 1.5px, matching the thread weight.
 4. **Breadcrumb separator:** The `/` in the breadcrumb path is rendered in copper, visually connecting the navigation to the design signature.
 **Rules:**
 - The copper line is always 1.5px. Never thicker, never thinner.
 - It appears only in the horizontal orientation (never vertical, except as the achievement left-border).
 - Its color is always `#B87333`. Never lighter, never darker, never transparent.
 - This consistency is the point. One color, one weight, used everywhere -- it becomes the site's visual DNA.
 ---
 ## The Z-Axis Navigation Model
 ### Layer Architecture
 Content exists at three depth levels:
 | Level | Name | Contains | How to reach | How to exit |
 |-------|------|----------|-------------|-------------|
 | 0 | Overview | Hero, section summaries, headline stats | Default state / breadcrumb root | N/A (base layer) |
 | 1 | Section | Full section content (roles, skills, projects) | Click section from Overview | Back button, Escape, swipe right, breadcrumb |
 | 2 | Detail | Deep content (role achievements, project case study, skill breakdown) | Click item from Section layer | Back button, Escape, swipe right, drag-dismiss (sheets), breadcrumb |
 ### Push Transition (Entering Deeper)
 When the user clicks a section or item to go deeper:
 1. The current layer scales to 95% and shifts left 20px (`transform: scale(0.95) translateX(-20px)`).
 2. A 4px blur is applied to the receding layer (`filter: blur(4px)`).
 3. The receding layer's opacity reduces to 0.4.
 4. Simultaneously, the new layer slides in from the right edge of the viewport (`translateX(100%) --> translateX(0)`).
 5. The new layer's content fades in via opacity as it arrives.
 Easing: `cubic-bezier(0.32, 0.72, 0, 1.05)` (slight spring overshoot).
 Duration: 300ms.
 The receding layer remains partially visible as a "stack edge" on the left side -- the user can see they're one level deeper.
 ### Pop Transition (Going Back)
 Triggered by: browser back button, Escape key, swipe right (mobile), or clicking a breadcrumb ancestor.
 1. The current (top) layer slides out to the right (`translateX(0) --> translateX(100%)`).
 2. Simultaneously, the background layer scales back up to 100%, shifts back to center, deblurs, and restores full opacity.
 3. The background layer's scroll position is preserved -- it returns exactly where the user left it.
 Easing: `cubic-bezier(0.32, 0.72, 0, 1)` (no overshoot on pop -- it should feel like settling back, not bouncing).
 Duration: 250ms (exits are faster than enters).
 ### Detail Sheets (Level 2 Alternative)
 The deepest level of content (project case studies, detailed role descriptions, full skill breakdowns) can also be presented as bottom sheets rather than full push layers. This is preferred for content that is a "deep dive" rather than a lateral navigation.
 **Sheet enter:** Slides up from the bottom of the viewport, covering 85% of viewport height. Background darkens to `rgba(0, 0, 0, 0.08)` -- barely perceptible, just enough to establish the overlay. Duration: 350ms, eased with `cubic-bezier(0.32, 0.72, 0, 1)`.
 **Sheet dismiss:** Drag downward past 30% of sheet height to dismiss (with momentum -- a fast flick also dismisses). Or press Escape. Or click the darkened background. The sheet slides back down, background un-darkens. Duration: 250ms.
 **Sheet styling:** `#F5F5F7` background (the surface color), `border-radius: 16px 16px 0 0` on top corners. A small drag handle indicator (32px wide, 4px tall, `#D2D2D7`, `border-radius: 2px`) centered at the top. Content inside follows the same 680px column and typography rules.
 ### Stacked Edges (Visual Depth Cue)
 When the user is at Level 1 or Level 2, the background layers create visible "stack edges" on the left side of the viewport:
 - Level 1: The Overview layer is visible as a 20px sliver on the left, slightly blurred and dimmed.
 - Level 2: Both the Overview and Section layers are visible as stacked slivers (Overview at ~12px peek, Section at ~20px peek), creating a visual "deck" effect.
 The stack edges cast the design's only shadows: `box-shadow: -4px 0 16px rgba(26, 43, 74, 0.08)`. This subtle depth cue tells the user "there is content behind this that you can return to."
 ---
 ## Breadcrumb Navigation
 ### Structure
 A persistent top bar, fixed to the viewport top, `height: 56px`, background `#FFFFFF` with a 1px bottom border in `#D2D2D7`. Contains:
 **Left side:** Site title -- "Andy Charlwood" in Plus Jakarta Sans 500, `#1A2B4A`. Always visible. Clicking returns to the Overview (Level 0), popping all layers.
 **Right side:** Breadcrumb trail, updating per depth level:
 ```
 Level 0: (no breadcrumb -- just the name)
 Level 1: Andy Charlwood  /  Experience
 Level 2: Andy Charlwood  /  Experience  /  NHS Norfolk & Waveney ICB
 ```
 The `/` separator is rendered in copper (`#B87333`), connecting the breadcrumb to the Copper Thread signature.
 Inactive breadcrumb segments are in `#6E6E73` (secondary text color). The current (active) segment is in `#1A2B4A` (primary navy). Hovering an inactive segment shows the pale blue highlight (`#E8F0FE`) background and a copper underline draws in.
 Clicking any breadcrumb segment pops back to that level. If clicking "Experience" from Level 2, the detail layer pops and the user returns to the Experience section layer.
 ### Section Picker
 Below the breadcrumb bar, a horizontal row of section labels acts as the primary navigation between sections at Level 1. Visible only when at Level 0 or Level 1.
 ```
 Overview  |  Experience  |  Skills  |  Education  |  Projects  |  Contact
 ```
 Labels in Plus Jakarta Sans 400, `#6E6E73`. Active section in `#1A2B4A` with a copper underline (2px, drawn left-to-right on activation). Horizontal scroll on mobile with fade-out indicators at edges.
 Clicking a section from the Overview pushes to that section (Level 1). Clicking a different section while already at Level 1 does a lateral slide (current section exits left, new section enters from right, 250ms).
 ---
 ## Section-by-Section Design
 ### Overview (Level 0 -- Base Layer)
 The landing state after the ECG transition completes. Maximum whitespace, minimum content. This layer exists to intrigue, not to inform exhaustively.
 **Layout:**
 ```
 [Breadcrumb bar - name only, no trail]
 [Section picker - horizontal labels]
                    [160px spacing]
              Andy Charlwood
     Deputy Head of Population Health
          & Data Analysis
                    [48px spacing]
        NHS Norfolk & Waveney ICB
                    [80px spacing]
   -------- copper thread line --------
                    [48px spacing]
    [Stat]          [Stat]          [Stat]
    14,000          GBP220M         GBP2.6M
    patients        budget          savings
    identified      managed         annual
                    [80px spacing]
    A pharmacist turned data analyst who
    transforms healthcare operations through
    Python-powered intelligence.
                    [160px spacing]
    [Section cards - minimal, clickable]
    Experience  >    Skills  >    Education  >
    Projects  >      Contact  >
 ```
 **Hero name:** Fraunces 800, navy `#1A2B4A`, `clamp(3rem, 6vw, 5rem)`. This is the name that transitioned from the ECG canvas.
 **Title:** Plus Jakarta Sans 400, `#6E6E73`, `1.25rem`. Understated.
 **Headline stats:** Three key numbers in Source Code Pro 400, copper `#B87333`, `clamp(2rem, 4vw, 3rem)`. Labels beneath in Plus Jakarta Sans 400, `#6E6E73`, `0.875rem`. Stats are separated by 48px and centered as a row. No animated counting -- the numbers appear fully formed.
 **Lead paragraph:** Plus Jakarta Sans 400, `#111111`, `1.1875rem` (body-lg). Maximum 2-3 sentences. Centered on the content column.
 **Section cards:** Minimal rectangles with section name in Plus Jakarta Sans 500, `#1A2B4A`, a right-pointing chevron (`lucide-react` `ChevronRight`) in `#6E6E73`, and a copper left-border (2px). On hover, the chevron shifts right 4px and turns copper. Clicking pushes to that section.
 ### Experience (Level 1)
 Pushed from the Overview. Shows all roles with summary information, inviting deeper exploration.
 **Layout per role:**
 ```
 -------- copper thread line --------
 NHS Norfolk & Waveney ICB
 Deputy Head / Interim Head of Population Health & Data Analysis
 Aug 2024 -- Present
 Built Python-based algorithms that compressed months of manual analysis
 into 3 days. Managing a GBP220M prescribing budget.
 [View achievements -->]
 -------- 1px gray divider --------
 NHS Norfolk & Waveney ICB
 Senior Prescribing Data Analyst
 Oct 2021 -- Aug 2024
 ...
 ```
 **Role title:** Fraunces 600, `#1A2B4A`, `clamp(1.5rem, 2.5vw, 2.25rem)`.
 **Organization:** Plus Jakarta Sans 500, `#111111`, `1.25rem`.
 **Dates:** Source Code Pro 400, `#6E6E73`, `0.875rem`.
 **Summary:** Plus Jakarta Sans 400, `#111111`, `1.0625rem`. 2-3 sentences maximum.
 **"View achievements" link:** Plus Jakarta Sans 500, copper `#B87333`, with copper underline drawing on hover. Clicking pushes to the role detail (Level 2).
 Roles separated by 1px `#D2D2D7` dividers. Copper thread at the very top of the section only.
 ### Experience Detail (Level 2 -- Detail Sheet)
 Opened from a specific role. Slides up as a bottom sheet covering 85% viewport.
 **Contents:**
 - Role title (Fraunces 600) and organization (Plus Jakarta Sans 500) at the top.
 - Dates in Source Code Pro.
 - Full achievement bullets with quantified outcomes. Each bullet has a copper left-border if it includes a number.
 - Methodology notes (what tools, what approach).
 - "Key Impact" callout box: a `#F5F5F7` background card with a copper top-border, containing the single most impressive stat from that role in large Source Code Pro copper numerals.
 ### Skills (Level 1)
 **Layout:**
 ```
 -------- copper thread line --------
 Technical Skills
  Python              SQL               Power BI
  Advanced            Advanced          Advanced
  JavaScript/TS       Algorithm Design  Data Pipelines
  Intermediate        Advanced          Advanced
 -------- 1px gray divider --------
 Leadership & Management
  Team Leadership     Budget Management  Stakeholder Engagement
  NHS Leadership      ...               ...
  Academy
 [Click any skill category for detailed breakdown]
 ```
 At Level 1, skills are displayed as category groups with skill names and proficiency labels. No progress bars, no percentage circles -- this editorial design communicates proficiency through language ("Advanced," "Intermediate"), not charts.
 **Skill names:** Plus Jakarta Sans 500, `#111111`.
 **Proficiency labels:** Plus Jakarta Sans 400, `#6E6E73`.
 **Category titles:** Fraunces 600, `#1A2B4A`.
 Clicking a category pushes to a detail sheet showing:
 - Full skill list with context (where each skill was applied, in which role).
 - Related projects that demonstrate the skill.
 - Certifications or training related to the category.
 ### Education (Level 1)
 Two milestones, presented with editorial generosity.
 ```
 -------- copper thread line --------
 MPharm (Hons) Pharmacy
 University of East Anglia, 2009 -- 2013
 2:1 Classification
 Research project: Drug delivery and pharmaceutical cocrystals
 Final project grade: 75.1% (Distinction)
 [View detail -->]
 -------- 1px gray divider --------
 NHS Leadership Academy
 Mary Seacole Programme
 2023
 [View detail -->]
 ```
 **Detail sheet for MPharm:** Full research project description, module highlights, committee involvement, grades.
 **Detail sheet for Mary Seacole:** Programme overview, leadership competencies developed, application to current role.
 ### Projects (Level 1)
 Project cards in a 2-column grid (breaking the single-column rule for visual variety and because project cards benefit from browsable density).
 Each card:
 ```
 [Project Title -- Fraunces 600, navy]
 [One-line description -- Plus Jakarta Sans 400, #111111]
 [Tech stack tags -- Source Code Pro 400, #6E6E73, 0.75rem]
                                          [-->]
 ```
 Card background: `#FFFFFF` with 1px `#D2D2D7` border. Copper left-border (2px). On hover: border shifts to `#B87333` on all sides (200ms transition).
 Cards are max-width 320px in the 2-column layout. Gap: 24px.
 Clicking a card opens a detail sheet with:
 - Full project description and problem statement.
 - Technical approach and architecture.
 - Screenshots (desaturated, duotoned).
 - Quantified outcomes.
 - Links to live demos or repositories (if applicable).
 **Projects to feature:**
 - Controlled drug monitoring system
 - DOAC switching dashboard
 - Sankey chart analysis tool
 - Python algorithms for prescribing analysis
 - Population health data pipeline
 ### Contact (Level 1)
 No drill-down needed. Clean, single-layer presentation.
 ```
 -------- copper thread line --------
 Get In Touch
 [Email address -- copper link]
 [LinkedIn -- copper link]
 [Location: Norwich, UK -- #6E6E73]
 [Optional: simple contact form with name, email, message fields]
 ```
 Form inputs: 1px `#D2D2D7` border, Plus Jakarta Sans 400, `#111111`. Focus state: border shifts to `#B87333` (copper). Submit button: `#1A2B4A` background, white text, Plus Jakarta Sans 500. Hover: background shifts to `#B87333`.
 ---
 ## Interactions and Micro-interactions
 ### Hover States
 - **Text links:** Copper underline draws left-to-right (200ms `scaleX` from `transform-origin: left`). Underline is 1.5px to match the Thread.
 - **Cards/clickable areas:** Border color transitions to copper (200ms). No shadow appears. No scale change.
 - **Section picker labels:** Pale blue (`#E8F0FE`) background fades in. Copper underline draws in.
 - **Breadcrumb segments:** Same pale blue background + copper underline.
 - **Chevron arrows:** Shift right 4px, color transitions from gray to copper (200ms).
 ### Focus States
 - **Interactive elements:** 2px outline in `#2563EB` (accessible blue) with 2px offset. This departs from the copper palette for accessibility contrast requirements.
 - **Form inputs:** Border shifts to copper on focus. Label floats above and reduces size.
 ### Active/Click States
 - **Buttons:** Scale to 0.98 for 100ms, then release. Subtle physical feedback.
 - **Cards:** Background briefly shifts to `#F5F5F7` for 150ms before the push transition begins.
 ### Loading States
 - If any layer requires async content loading, a single copper dot pulses (opacity 0.3 to 1.0, 800ms cycle) at the center of the content area. No spinners, no skeleton screens. A single dot, pulsing patiently.
 ### Scroll Behavior
 - Smooth scroll within each layer. Each layer manages its own scroll position independently.
 - When pushing to a new layer, the new layer starts scrolled to top.
 - When popping back, the previous layer's scroll position is restored exactly.
 - The breadcrumb bar is `position: sticky` at the top. It does not hide on scroll -- it is always present as the wayfinding anchor.
 ---
 ## Responsive Strategy
 ### Desktop (1024px+)
 - Layers slide in from the right, creating the full stack-edge depth effect on the left.
 - Background layers peek out 20px on the left edge (visible stack).
 - Detail sheets cover 70% viewport width, centered, with darkened backdrop.
 - Breadcrumb bar shows full trail. Section picker is fully visible.
 - Content column holds at 680px max-width. Pull quotes at 800-900px.
 - Project cards in 2-column grid.
 ### Tablet (768px -- 1023px)
 - Same z-axis layer model. Layers push to full width (no visible stack edge -- screen is too narrow for it to read clearly).
 - Detail sheets slide up from bottom, covering 80% viewport height.
 - Breadcrumb bar shows full trail. Section picker horizontally scrollable.
 - Content column at 680px or viewport width minus 48px padding, whichever is smaller.
 - Project cards in 2-column grid (tighter, 280px max-width per card).
 ### Mobile (< 768px)
 This paradigm *excels* on mobile. The push/pop navigation maps directly to native iOS and Android navigation patterns. Users already know how this works -- swipe back, tap to go deeper.
 - Layers are full-screen with no visible stack edges.
 - Swipe-right gesture triggers pop transition (detected via Framer Motion `onPan`). Threshold: 80px horizontal swipe with velocity > 500px/s, or drag past 40% viewport width.
 - Detail sheets are full-screen with drag-to-dismiss. A small handle at the top (32px wide, 4px tall) invites the gesture.
 - Breadcrumb simplifies to: back arrow (left chevron in `#1A2B4A`) + current section name. Tapping the back arrow pops one level.
 - Section picker becomes a horizontally scrollable row with fade-out indicators at the edges. Active section centered in view on activation.
 - Content column is viewport width minus 32px (16px padding each side).
 - Project cards switch to single-column, full-width.
 - Hero stats stack vertically (one per row) instead of three-across.
 - Type scale reduces: Display to `2.5rem`, body stays at `1.0625rem` (reading comfort is non-negotiable).
 **Why this paradigm excels on mobile:** Most portfolio sites are long scrolling pages that feel generic on phones. The Depth Stack feels like a native app. Users navigate by tapping and swiping rather than scrolling through a monolithic page. Each "screen" (layer) has focused content optimized for the viewport. It's immediately familiar to anyone who uses a smartphone daily.
 ---
 ## Technical Implementation
 ### Core Components
 **`LayerStack`** -- The root navigation component. Manages:
 - An array of layer history (stack of pushed layers with their component references and scroll positions).
 - Push/pop functions that trigger transition animations.
 - Keyboard listener for Escape (pop).
 - Browser history integration (`pushState`/`popState` for back button support).
 - `AnimatePresence` from Framer Motion wrapping the layer transitions.
 ```typescript
 interface LayerEntry {
  id: string;
  component: React.ComponentType;
  props: Record<string, unknown>;
  scrollPosition: number;
  breadcrumbLabel: string;
 }
 interface LayerStackProps {
  children: React.ReactNode; // Level 0 content
 }
 ```
 **`Layer`** -- Individual layer wrapper. Handles:
 - Enter animation: `translateX(100%) --> translateX(0)` with scale and opacity.
 - Exit animation: `translateX(0) --> translateX(100%)`.
 - Background state: `scale(0.95) translateX(-20px) filter: blur(4px) opacity: 0.4` when behind another layer.
 - Scroll containment (`overflow-y: auto`, `overscroll-behavior: contain`).
 - Scroll position preservation via `useRef`.
 Framer Motion variants:
 ```typescript
 const layerVariants = {
  enter: {
    x: '100%',
    opacity: 0,
  },
  active: {
    x: 0,
    opacity: 1,
    transition: {
      type: 'spring',
      stiffness: 300,
      damping: 30,
      mass: 0.8,
    },
  },
  background: {
    x: -20,
    scale: 0.95,
    opacity: 0.4,
    filter: 'blur(4px)',
    transition: { duration: 0.3, ease: [0.32, 0.72, 0, 1] },
  },
  exit: {
    x: '100%',
    opacity: 0,
    transition: { duration: 0.25, ease: [0.32, 0.72, 0, 1] },
  },
 };
 ```
 **`DetailSheet`** -- Bottom sheet component. Handles:
 - Slide-up enter / slide-down exit animations.
 - Drag-to-dismiss via Framer Motion `onPan` and `onPanEnd`.
 - Backdrop overlay with click-to-dismiss.
 - Focus trap (tab cycling within sheet, focus returns to trigger on dismiss).
 - Escape key to dismiss.
 ```typescript
 interface DetailSheetProps {
  isOpen: boolean;
  onClose: () => void;
  children: React.ReactNode;
  title: string;
 }
 ```
 **`Breadcrumb`** -- Navigation breadcrumb. Consumes the layer stack context to display the current trail. Each segment is clickable to pop to that level.
 **`SectionPicker`** -- Horizontal section navigation. Tracks active section via layer stack state. On mobile, uses horizontal scroll with `scroll-snap-type: x mandatory`.
 **`CopperThread`** -- Reusable component for the signature line. Uses `useScrollReveal` to trigger the `scaleX` draw animation when entering the viewport.
 ```typescript
 interface CopperThreadProps {
  width?: string; // default '100%'
  className?: string;
 }
 ```
 ### CSS Architecture
 - Tailwind CSS for utility classes and responsive breakpoints.
 - CSS custom properties for the design tokens:
  ```css
  :root {
    --color-navy: #1A2B4A;
    --color-copper: #B87333;
    --color-sage: #7A9E7E;
    --color-surface: #F5F5F7;
    --color-border: #D2D2D7;
    --color-text-primary: #111111;
    --color-text-secondary: #6E6E73;
    --color-highlight: #E8F0FE;
    --font-heading: 'Fraunces', serif;
    --font-body: 'Plus Jakarta Sans', sans-serif;
    --font-mono: 'Source Code Pro', monospace;
    --thread-width: 1.5px;
    --layer-transition-duration: 300ms;
    --reveal-duration: 600ms;
  }
  ```
 - `perspective` on the layer stack container for true 3D depth cues:
  ```css
  .layer-stack {
    perspective: 1200px;
    perspective-origin: center center;
  }
  ```
 - `transform: translateZ()` on individual layers for z-axis positioning.
 - `will-change: transform, opacity, filter` on animating layer elements for GPU compositing.
 ### State Management
 Layer navigation state is managed via React Context:
 ```typescript
 interface LayerStackContext {
  stack: LayerEntry[];
  push: (entry: Omit<LayerEntry, 'scrollPosition'>) => void;
  pop: () => void;
  popTo: (layerId: string) => void;
  currentDepth: number;
 }
 ```
 No external state library required. The layer stack is the single source of navigation truth. URL state is synced via `window.history` for back button support and deep linking.
 ### Performance Considerations
 - Layers behind the active layer are set to `pointer-events: none` and `will-change: auto` (remove from GPU layer when not transitioning) to reduce memory overhead.
 - Content within background layers is set to `visibility: hidden` after the push transition completes (but remains in the DOM for instant restore on pop).
 - Images lazy-load within detail sheets (they only load when the sheet opens).
 - Font loading: Fraunces and Plus Jakarta Sans are loaded as variable fonts to minimize network requests. Use `font-display: swap` with a system serif fallback for Fraunces and system sans-serif for Plus Jakarta Sans.
 ### Browser History Integration
 Each push operation calls `window.history.pushState()` with the layer ID. The `popstate` event listener triggers the `pop()` function. This means:
 - The browser back button works naturally for navigating the layer stack.
 - Deep links can reconstruct the layer stack (e.g., `/experience/nhs-icb` opens Overview → Experience → NHS ICB detail).
 - Bookmarking a deep layer works correctly.
 ---
 ## Accessibility
 ### Semantic Structure
 - DOM order follows logical reading sequence regardless of visual layer presentation.
 - Each layer is an `<article>` or `<section>` with appropriate heading hierarchy.
 - The breadcrumb uses `<nav aria-label="Breadcrumb">` with an `<ol>` of `<li>` items.
 - Detail sheets use `role="dialog"` with `aria-modal="true"` and `aria-labelledby` pointing to the sheet title.
 ### Keyboard Navigation
 - **Tab:** Cycles through interactive elements within the active layer.
 - **Enter/Space:** Activates buttons and links (pushes layers, opens sheets).
 - **Escape:** Pops the current layer or closes the current detail sheet. At Level 0, Escape does nothing.
 - **Arrow keys:** Navigate the section picker horizontally.
 ### Focus Management
 - When a layer pushes, focus moves to the first heading or interactive element in the new layer.
 - When a layer pops, focus returns to the element that triggered the push.
 - Detail sheets trap focus within the sheet while open. Tab cycling wraps from last to first focusable element.
 - On sheet dismiss, focus returns to the triggering element.
 ### Screen Reader Support
 - Layer transitions are announced via an `aria-live="polite"` region: "Navigated to Experience section" / "Returned to Overview."
 - Detail sheet open/close is announced: "Opened NHS Norfolk & Waveney ICB details" / "Closed details."
 - Breadcrumb trail is read naturally as an ordered list.
 - Statistics use `aria-label` for full context: `<span aria-label="14,000 patients identified">14,000</span>`.
 ### Motion Sensitivity
 When `prefers-reduced-motion: reduce` is active:
 - Layer push/pop transitions change to immediate opacity crossfade (200ms). No translateX, no scale, no blur.
 - Detail sheets appear/disappear via opacity fade (200ms). No slide.
 - Copper thread lines appear immediately at full width (no draw animation).
 - Content reveals are instant (no 600ms fade).
 - All easing functions default to `linear` for the reduced durations.
 ### Color Contrast
 All text combinations meet WCAG 2.1 AA standards:
 - `#111111` on `#FFFFFF`: contrast ratio 18.9:1 (AAA)
 - `#6E6E73` on `#FFFFFF`: contrast ratio 4.6:1 (AA)
 - `#1A2B4A` on `#FFFFFF`: contrast ratio 12.5:1 (AAA)
 - `#B87333` on `#FFFFFF`: contrast ratio 3.6:1 (AA for large text only; copper is only used on text >= 18px or 14px bold, or on decorative elements)
 - `#111111` on `#F5F5F7`: contrast ratio 17.4:1 (AAA)
 ---
 ## What Makes This Special
 The Depth Stack is the most **mature** design of all six. It communicates executive seniority through restraint -- luxury whitespace, deliberate pacing, copper accents on pure white. Where other designs demonstrate technical skill through animation complexity or information density, this design demonstrates it through *editorial confidence* and *structural thinking*.
 The z-axis navigation model mirrors how clinical data is structured: patient summary leads to medication history leads to individual prescription detail. It mirrors how Andy presents to executives: headline leads to evidence leads to methodology. Every transition says "there's substance beneath this surface."
 The Fraunces serif adds a warmth and personality that sans-serif-only designs cannot match. It's distinctive without being heavy, authoritative without being cold. The variable optical sizing means it performs beautifully from 14px metadata to 80px display headings, always looking intentionally designed for that specific size.
 The Copper Thread provides visual continuity without visual noise. It's the red thread of narrative (in copper) that ties the entire experience together -- from its birth in the ECG transition through every section divider, achievement callout, and interaction state.
 On mobile, this design has a structural advantage: while other portfolio sites become generic scroll-fests on small screens, the Depth Stack maps to native mobile navigation patterns. Users don't need to learn anything -- they already know how to tap deeper and swipe back. The portfolio feels like an app, not a web page.
 Someone managing a GBP220M budget should have a site that feels commensurate. The Depth Stack doesn't shout about its quality -- it demonstrates it through the precision of every typographic choice, the restraint of every whitespace decision, and the confidence to let content speak without visual crutches.
 **The design's thesis, in one sentence:** Depth is more impressive than breadth, and silence is more powerful than noise.
@@ -1,672 +0,0 @@
 # Design 6: The Pipeline
 > A drag-to-explore data flow interface where the user IS the data, physically traveling through Andy's career as a glowing packet on a visible pipeline track.
 ---
 ## Overview
 The Pipeline transforms the CV from a document into a spatial journey. After the ECG intro, a glowing pipeline track — born from the heartbeat trace itself — stretches across the viewport. The user drags a luminous data packet along this track. As the packet moves through each section, it triggers content reveals, animations, and transformations. The pipeline has branches, valves, and processing nodes. Each section of the CV is a processing stage.
 This is the most physically engaging of all six designs. Dragging activates proprioception — the bodily sense of effort and movement. It demands continuous intent, creating deeper engagement than passive scrolling. The data packet becomes the user's avatar, and its journey IS Andy's career narrative made tangible.
 The metaphor is literal: Andy builds data pipelines professionally. He takes raw prescribing data, processes it through SQL transformations and Python algorithms, and outputs actionable insights. On this site, the user IS the data. They don't read about data processing — they experience being processed.
 ### Why This Design
 No portfolio site uses drag-along-a-track as its primary navigation. The mechanic is immediately novel — the moment a visitor realizes they're dragging a glowing orb along a pipeline, they're in uncharted territory. Novelty drives sharing. The "Run Algorithm" interaction at the Projects section (where the packet duplicates to process all paths simultaneously) is the kind of moment that gets screen-recorded and posted to Twitter/X. This is the design built for virality.
 ---
 ## ECG Transition
 **Starting frame:** Andy's name, neon green (#00FF41), on pure black. Static.
 ### Sequence (2.4 seconds total)
 1. **Lift** (400ms): Andy's name text gently floats upward ~60px from its current position. Simultaneously, it transitions from neon green canvas-rendered letterforms to DOM-rendered text in Plus Jakarta Sans 700, white (#F0F0F0) with a soft text-shadow glow (0 0 20px rgba(0, 255, 65, 0.3)). The glow fades over the next second — a ghost of the green, dissipating. This is the text handoff: the name is now "real" typography while the canvas layer remains active below it.
 2. **Trace reveal** (300ms): With the name lifted, the original horizontal trace line that the ECG drew — the baseline the heartbeat traveled along, the path the name was formed on — is now visible below the name. It's still neon green (#00FF41), still on black. A thin, glowing horizontal line spanning roughly 60% of the viewport width, centered. This line is the seed of the pipeline.
 3. **Straighten and extend** (800ms): Any remaining curvature or heartbeat waveform artifacts in the trace line smooth out. The line's path control points interpolate toward a perfectly horizontal target. It flattens with a satisfying ease — `cubic-bezier(0.16, 1, 0.3, 1)`. Simultaneously, the line begins extending in both directions, drawing itself outward from center toward the viewport edges. As it extends, its color shifts from neon green (#00FF41) to a teal-cyan gradient (#00897B at left → #22D1EE at right). The line develops a soft glow: a 4px gaussian blur at 50% opacity behind the main 2px stroke, creating a neon-tube effect.
 4. **Curve and route** (600ms): The line, now spanning the full viewport width, begins to bend. The right end curves downward, forming the first gentle arc of the pipeline's S-curve track. The left end develops a small rounded terminal (a circle, 12px diameter) — the starting node. The background transitions from pure black to a dark gradient (#0D1117 at top, #1A1A2E at bottom), giving the impression of depth without losing the dark aesthetic. Faint stars (actually tiny dot-grid points at 2% opacity) appear across the background.
 5. **Packet birth** (300ms): A bright orb materializes at the left terminal node — the data packet. It appears with a scale-from-zero spring animation (stiffness: 300, damping: 15). It pulses twice with a teal-white glow (expanding from 8px to 14px radius and back), echoing the heartbeat that started the entire sequence. A "drag to explore" label fades in 20px to the right of the packet, in IBM Plex Sans 400, 14px, slate (#94a3b8), with a subtle horizontal arrow animation (translating 5px right and back on a 2s loop). The pipeline is live. The user can begin.
 ### Why This Transition Works
 The ECG heartbeat line IS the pipeline. Same visual element, new purpose. The user watches a biological signal (heartbeat trace) metamorphose into a technical structure (data pipeline) in real-time. This is the visual equivalent of Andy's career narrative — clinical pharmacist becoming data engineer. The straightening moment is the pivot: raw biological waveform becoming clean, purposeful infrastructure. The packet's double-pulse at the end is the heartbeat's final echo — a callback that ties the intro and the main experience into one continuous story.
 ---
 ## Visual System
 ### Color Palette
 The Pipeline maintains a dark theme throughout — no transition to light. The dark background serves both the aesthetic (pipeline glow effects need contrast) and the metaphor (data flowing through infrastructure, operations centers, server rooms).
 | Element | Color | Hex | Usage |
 |---------|-------|-----|-------|
 | Background (top) | Deep charcoal | #0D1117 | Primary background |
 | Background (bottom) | Dark navy | #1A1A2E | Gradient terminus |
 | Content surface | Elevated dark | #161B22 | Card backgrounds, content areas |
 | Content surface hover | Lighter dark | #1C2128 | Hover states |
 | Pipeline stroke | Teal | #00897B | Main pipeline track |
 | Pipeline glow | Cyan | #22D1EE | Glow effect behind pipeline |
 | Packet core | Bright white | #FFFFFF | Data packet center |
 | Packet glow | Teal-white | #A0F0E0 | Data packet aura |
 | Text primary | Off-white | #E6EDF3 | Headings, primary text |
 | Text secondary | Slate | #8B949E | Secondary text, labels |
 | Text tertiary | Dim slate | #6E7681 | Timestamps, metadata |
 | Accent warm | Coral | #FF6B6B | Alert states, key metrics |
 | Accent bright | Electric cyan | #00D4AA | Active states, highlights |
 | Node inactive | Dim teal | #1A3A3A | Pipeline nodes before packet arrives |
 | Node active | Bright teal | #00897B | Pipeline nodes after packet passes |
 ### Typography
 - **Space Grotesk 500, 700** — Headings and section labels. 700 for primary headings (28-36px), 500 for subheadings and node labels (18-22px). White (#E6EDF3) or teal (#00897B) depending on hierarchy.
 - **IBM Plex Sans 400, 450** — Body text, role descriptions, bullet points. 16px/1.7 for body, 14px/1.6 for secondary. Off-white (#E6EDF3) for primary, slate (#8B949E) for secondary. Weight 450 for body text to maintain readability on dark backgrounds.
 - **IBM Plex Mono 400** — Metrics, numbers, data labels, code references. 14-18px. Electric cyan (#00D4AA) for active metrics, slate (#8B949E) for labels. All metric numbers use this face for visual consistency and the "data" connotation.
 ### Pipeline Visual Language
 The pipeline is the site's skeleton — visible at all times, providing spatial orientation.
 - **Track stroke**: 2px solid teal (#00897B) with a 6px gaussian blur glow (#22D1EE at 30% opacity) behind it. The track is always visible, even before the packet reaches a section.
 - **Track ahead** (sections not yet reached): Dimmed to 20% opacity with no glow. Visible enough to show the path, dim enough to create anticipation.
 - **Track behind** (sections already passed): Full opacity with residual glow that slowly fades (10s decay). The path you've traveled stays lit.
 - **Flow particles**: Tiny dots (2px) travel along the pipeline track in the packet's direction of movement, spaced ~40px apart, moving at a constant slow speed. These create the impression of continuous data flow even when the packet is stationary. Speed increases proportionally when the packet is being dragged.
 - **Processing nodes**: Circles (16px diameter) at section entry points. Inactive: dim teal outline (#1A3A3A). Active (packet has arrived): solid teal fill (#00897B) with a radial pulse animation (one pulse, 400ms). Completed (packet has passed): solid teal at 60% opacity, no pulse.
 - **Branch points**: Where the pipeline splits (Projects section), a diamond shape (12px, rotated 45deg) marks the fork. The diamond pulses when the packet reaches it.
 ### Ambient Particle Layer
 Behind the SVG pipeline and all content, a lightweight canvas particle system provides atmospheric depth:
 - **Particle count**: 150-300 (based on viewport size and device performance)
 - **Particle size**: 1-2px circles, teal at 5-15% opacity
 - **Default behavior**: Slow brownian drift, random direction, ~0.2px/frame velocity
 - **Packet proximity reaction**: Particles within 120px of the data packet accelerate in the pipeline's direction of flow at that point. They stream alongside the packet like current in a river. This creates a "wake" effect behind the moving packet.
 - **Section transitions**: When the packet enters a new section, nearby particles briefly brighten (5% → 20% → 5% over 600ms) and swirl inward toward the packet, as if being "processed."
 - **Performance**: Canvas renders at 30fps (not 60) to save resources. Particles are simple circles with no complex rendering. The canvas is behind all content (`z-index: 0`, `pointer-events: none`).
 ### Texture
 - **Dot grid**: 2% opacity, 32px spacing, covering the entire viewport. Barely visible but provides subconscious structure to the dark space. Grid dots near the pipeline track are slightly brighter (4% opacity).
 - **Vignette**: A subtle radial gradient darkens the viewport corners (black at 15% opacity), focusing attention on the center where the pipeline and content live.
 - **Noise texture**: An extremely subtle (1% opacity) noise overlay on the background gradient prevents color banding on displays with limited color depth. Applied via CSS `background-image` with a tiny tiling SVG.
 ---
 ## Section-by-Section Design
 ### Hero / Entry Point
 **Pipeline position:** The far-left terminal node. This is where the journey begins.
 **Layout:**
 - Andy's name (Space Grotesk 700, 36px, white) sits above the pipeline starting node, vertically centered in the viewport.
 - Title: "Population Health & Data Analysis | NHS" (Space Grotesk 500, 18px, slate #8B949E) below the name.
 - The pipeline track extends to the right from the starting node, curving gently downward.
 - The data packet sits at the starting node, pulsing softly (scale oscillation 1.0 → 1.1 → 1.0, 3s period).
 - "Drag to explore" label with animated arrow, positioned right of the packet.
 - Below the pipeline, a brief profile summary in IBM Plex Sans 450, 16px, off-white.
 **Interaction:**
 - The user clicks/touches the data packet and begins dragging it along the pipeline track.
 - As the packet moves right from the starting node, the hero content fades (opacity 1 → 0 over the first 15% of the pipeline's total length).
 - The pipeline track ahead brightens from 20% to 100% opacity as the packet approaches.
 - If the user releases the packet, it coasts forward on momentum (spring physics), then decelerates and stops. It can also coast backward if released while dragging left.
 ### Skills — The Processing Matrix
 **Pipeline position:** First major section, 15-35% along the pipeline's total length.
 **Pipeline behavior:** The pipeline enters a rectangular area (the "processing matrix"). Inside, the single track splits into a grid-like arrangement — horizontal parallel tracks stacked vertically, connected by short vertical segments. Each horizontal track passes through 2-3 skill nodes. The packet follows the path through this matrix, lighting up skills as it passes.
 **Layout:**
 The processing matrix is a contained visual area (roughly 80% viewport width, centered). Skill nodes are arranged in a grid:
 ```
 ROW 1 (Technical):    [Python] ——— [SQL] ——— [Power BI] ——— [JS/TS]
                         |                                      |
 ROW 2 (Data):         [Algorithm Design] — [Data Pipelines] — [Dashboard Dev]
                         |                                      |
 ROW 3 (Healthcare):   [Medicines Opt.] — [Population Health] — [NICE Implementation]
                         |                                      |
 ROW 4 (Leadership):   [Budget Mgmt] ——— [Stakeholder Eng.] —— [Team Dev]
 ```
 **Node design:**
 - Each skill is a node on the pipeline: a rounded rectangle (120px x 48px) with a dim teal border (#1A3A3A) and dark fill (#161B22).
 - Skill name inside in IBM Plex Sans 450, 13px, slate (#8B949E).
 - Below the name, a thin proficiency bar (60px wide, 3px tall, empty).
 **Interaction — Packet traversal:**
 - As the packet passes through a skill node, the node activates in sequence:
  1. Border brightens to full teal (#00897B) (100ms)
  2. Fill lightens to elevated dark (#1C2128) (100ms)
  3. Skill name text brightens to white (#E6EDF3) (100ms)
  4. Proficiency bar fills left-to-right with a teal-to-cyan gradient (200ms)
  5. A brief particle absorption effect: 10-15 ambient particles rush inward toward the node and disappear, as if the packet is "absorbing" the skill (300ms)
  6. The packet itself briefly brightens and grows (radius 8px → 12px → 8px) — it's gaining capability
 - Skills are ordered by acquisition timeline: pharmacy domain skills first (bottom rows), then data skills, then technical skills. The user experiences Andy's learning journey chronologically — pharmacist → analyst → developer.
 - Once activated, skill nodes remain lit. If the user drags backward, nodes dim back to inactive state.
 **Ambient detail:**
 - Faint data-flow particles travel along the matrix tracks at constant slow speed, even before the packet arrives. This signals that the matrix is "alive" and waiting.
 - A section label "PROCESSING // SKILLS" appears at the top of the matrix area in IBM Plex Mono 400, 12px, dim slate (#6E7681), uppercase, tracking 0.15em.
 ### Experience — The Branching Pipeline
 **Pipeline position:** 35-70% along the pipeline's total length. The longest section.
 **Pipeline behavior:** The pipeline exits the skills matrix and enters the experience section. Here, it branches: the main track splits into separate parallel tracks, one per role. Each branch contains a processing node (the role). Branches converge back to the main track after each role, creating a pattern of split → process → merge → split → process → merge.
 The branching order is chronological (earliest role first, most recent last), so the user processes Andy's career in order.
 **Branch layout (desktop):**
 ```
 Main track ──┬── [Branch: Tesco Pharmacy Manager 2017-2022] ──┬── Main track
             │                                                  │
             └──────────────────────────────────────────────────┘
                                    │
             ┌──────────────────────┘
             │
 Main track ──┬── [Branch: HCD & Interface Pharmacist 2022-24] ─┬── Main track
             │                                                   │
             └───────────────────────────────────────────────────┘
                                    │
             ┌──────────────────────┘
             │
 Main track ──┬── [Branch: Deputy Head 2024-Present] ───────────┬── Main track
             │                                                   │
             └───────────────────────────────────────────────────┘
                                    │
             ┌──────────────────────┘
             │
 Main track ──┬── [Branch: Interim Head May-Nov 2025] ──────────┬── Main track
 ```
 **Role card design:**
 Each branch contains a role card that builds itself as the packet passes through:
 - **Container**: Rounded rectangle, dark surface (#161B22), subtle border (#1C2128), generous padding (24px 32px).
 - **Left accent**: A 3px vertical line on the left side, teal (#00897B), extends from top to bottom of the card. Animates: draws top-to-bottom as the packet arrives.
 - **Role title**: Space Grotesk 700, 22px, white (#E6EDF3). Types itself character-by-character as the packet enters the branch.
 - **Company + date**: IBM Plex Sans 400, 14px, slate (#8B949E). Slides in from left after title.
 - **Context line**: IBM Plex Sans 450, 15px, off-white (#E6EDF3). Fades in.
 - **Bullet points**: IBM Plex Sans 400, 15px, off-white. Each fades in from below with 100ms stagger.
 - **Key metrics**: Displayed in IBM Plex Mono 400, 18px, electric cyan (#00D4AA), with a subtle glow. Each metric has a small throughput indicator animation — a mini progress bar that fills as the packet passes the metric.
 **Throughput indicators:**
 At each branch point, small counters display the role's key metrics:
 - Tesco: `~£1M revenue` | `300 branches` | `60→6 hrs/month`
 - HCD: `70% form reduction` | `200 hrs saved` | `7-8 hrs/week`
 - Deputy Head: `£220M budget` | `£2.6M savings` | `14,000 patients`
 - Interim Head: `£14.6M programme` | `3 days vs months` | `50% reduction`
 These counters are IBM Plex Mono 400, 14px, positioned along the branch track. They count up from zero as the packet passes, with the count rate proportional to drag velocity.
 **Interaction:**
 - The packet enters a branch and the role card begins building.
 - Dragging further through the branch reveals more content (bullets, metrics).
 - At the merge point (where the branch rejoins the main track), the card is fully built and the packet continues to the next branch.
 - If the user drags backward, the card deconstructs in reverse order.
 - The ambient particles in the pipeline increase in density and speed within branches, suggesting "heavy processing." They slow back to normal on the main track between branches.
 ### Education — The Research Lab
 **Pipeline position:** 70-82% along the pipeline's total length.
 **Pipeline behavior:** The pipeline enters a visually distinct zone. The background lightens slightly within this area (from #0D1117 to #111822), and a faint rectangular border (1px, #1C2128) delineates the "lab" space. The pipeline coils through education milestones — a tighter, more compact S-curve than the wide branching of the Experience section.
 **Section label:** "RESEARCH_LAB // EDUCATION" in IBM Plex Mono 400, 12px, dim slate, uppercase.
 **Milestone layout:**
 The pipeline passes through 4 milestone nodes, each triggering a content reveal:
 1. **A-Levels (2009-2011)**
   - Node: Circle, 20px, with a graduation cap icon (Lucide `GraduationCap`, 12px) inside.
   - Content card (appears when packet arrives): Highworth Grammar School. Mathematics A*, Chemistry B, Politics C. Compact card, single line of detail.
   - Pipeline behavior: Straight horizontal track through this node.
 2. **MPharm (2011-2015)**
   - Node: Circle, 24px (slightly larger — this is a major milestone), with a flask icon (Lucide `FlaskConical`, 14px).
   - Content card: University of East Anglia. Master of Pharmacy, 2:1 Honours. More detailed card with 2-3 lines.
   - **Branch**: At this node, the pipeline briefly splits into a short side branch that curves upward and terminates at a small terminal node labeled "Research Project." This branch card reads: "Drug delivery and cocrystals: 75.1% (Distinction)." The side branch represents the experimental methodology — a controlled divergence from the main path that produces a result, then merges back. The packet can optionally be dragged down the research branch (or it can auto-traverse with a small duplicate packet if the user continues on the main track).
 3. **GPhC Registration (2016)**
   - Node: Circle, 20px, with a shield icon (Lucide `ShieldCheck`, 12px).
   - Content card: General Pharmaceutical Council. Registered Pharmacist. Brief card — this is a credentialing milestone.
   - Pipeline behavior: The track brightens momentarily as the packet passes this node (the "authorization" node), as if the pipeline has been certified.
 4. **Mary Seacole Programme (2018)**
   - Node: Circle, 20px, with a star icon (Lucide `Star`, 12px).
   - Content card: NHS Leadership Academy. 78%. Change management, healthcare leadership, system-level thinking.
   - Pipeline behavior: Standard pass-through. After this node, the pipeline curves toward the Projects section.
 **Ambient detail:**
 - The research lab zone has a slightly different particle behavior: particles drift more slowly and in more organized patterns (subtle grid-aligned movement rather than brownian), suggesting the structured environment of academic research.
 - A faint molecule-like structure (3 interconnected circles, purely decorative, very low opacity) floats in the background of this zone — a nod to Andy's cocrystal research without being heavy-handed.
 ### Projects — The Algorithm (Signature Interaction)
 **Pipeline position:** 82-95% along the pipeline's total length. The most interactive section.
 **Pipeline behavior:** The main track reaches a diamond-shaped branch point (the "decision node"). The pipeline splits into multiple parallel tracks — one per project. Each track leads to a project node, then terminates in a small endpoint. The main track continues straight through to the Contact section, but the user must choose which project branch to explore.
 **Branch layout (desktop):**
 ```
                    ┌── [Switching Algorithm] ── (endpoint)
                    │
 Main track ── ◆ ── ┼── [Blueteq Automation] ── (endpoint)
              │    │
              │    ├── [Sankey Chart Tool] ── (endpoint)
              │    │
              │    └── [CD Monitoring] ──── (endpoint)
              │
              └──────────────────────────── Main track continues → Contact
 ```
 **Manual exploration (default):**
 The user drags the packet to the branch point. The diamond node activates and all four project branches illuminate at 40% opacity. The user can drag the packet down any branch to explore that project. At the project node, a project card builds itself (similar to experience cards):
 **Project card design:**
 - **Header**: Project name (Space Grotesk 700, 20px, white) + technology tags (IBM Plex Mono 400, 12px, electric cyan, pill-shaped backgrounds).
 - **Description**: IBM Plex Sans 450, 15px, off-white. 2-3 sentences.
 - **Visualization**: Each project card contains a mini-visualization that animates as the packet arrives:
  - **Switching Algorithm**: A field of small dots (100-150) representing patients. As the card activates, dots stream through a funnel shape (two converging lines) and emerge organized into color-coded groups on the other side. Counter: `14,000 patients → £2.6M savings`. Duration: 2s auto-animation triggered by packet arrival.
  - **Blueteq Automation**: A stack of 10 small rectangle icons (representing forms). 7 of them slide off-screen with a smooth exit animation, leaving 3. Counter: `70% reduction | 200 hrs immediate savings`. Simple and devastating.
  - **Sankey Chart Tool**: A mini Sankey diagram (4 left nodes → 3 middle nodes → 3 right nodes) with colored flow paths that animate with flowing particles. The paths draw themselves over 1.5s. This is a live visualization of what Andy built.
  - **CD Monitoring**: A mini line chart that draws itself left-to-right. A horizontal threshold line is pre-drawn. When the data line crosses the threshold, the line and the area above it shift to coral (#FF6B6B) and pulse once. Counter: `Population-scale safety analysis`.
 - **Impact metric**: A large number in IBM Plex Mono 700, 28px, electric cyan, with glow. Positioned prominently in the card.
 After exploring a project, the user drags the packet back to the branch point and can choose another branch, or continue to Contact.
 **"Run Algorithm" interaction (signature moment):**
 At the branch point, a button appears: `[ ▶ RUN ALGORITHM ]` — styled as a pipeline control element (rounded rectangle, teal border, IBM Plex Mono 500, 14px, uppercase). The button pulses gently with a teal glow.
 When clicked:
 1. The data packet at the branch point duplicates — it splits into 4 identical orbs (300ms spring animation outward).
 2. Each duplicate travels down a different project branch simultaneously. All 4 project cards build in parallel.
 3. The ambient particles surge — increased density and speed along all 4 branches, creating visible "data flow" in every direction.
 4. All 4 mini-visualizations animate simultaneously.
 5. A label appears at the branch point: `PARALLEL PROCESSING // 4 THREADS` in IBM Plex Mono 400, 12px, electric cyan.
 6. After all 4 packets reach their endpoints (2-3 seconds), they reverse — traveling back along the branches to the decision node, where they merge back into a single packet. The merge is accompanied by a bright flash and a brief particle burst.
 7. The main track forward to Contact now illuminates fully. All project cards remain visible and explored.
 **Why this works:** This directly demonstrates what Andy's algorithms do — automated parallel processing versus manual single-track work. The user sees the difference viscerally. Processing one project at a time is slow and requires backtracking. Running the algorithm processes everything simultaneously. It's a live demo of the value proposition on Andy's CV.
 ### Contact — The Output Terminal
 **Pipeline position:** 95-100% along the pipeline's total length. The endpoint.
 **Pipeline behavior:** The pipeline track approaches a final processing node — larger than the others (24px diameter), with a distinctive glow. The track terminates here with a rounded endpoint. This is the "output terminal."
 **Layout:**
 - Section label: `OUTPUT_TERMINAL // CONTACT` in IBM Plex Mono 400, 12px, dim slate.
 - A summary card appears above the contact form, pulling together key numbers:
 ```
 PROCESSING COMPLETE
 £14.6M  efficiency programme identified
 14,000  patients flagged by algorithm
 £2.6M   annual savings on target
 1.2M    population served
 ```
 Each number is IBM Plex Mono 700, 24px, electric cyan, with glow. They count up sequentially (staggered by 200ms) as the packet reaches the terminal node.
 - **Contact form**: Below the summary. Clean design on a dark surface (#161B22):
  - Fields: Name, Email, Message. Each has a bottom border (1px, #1C2128) that brightens to teal on focus. Labels float above in slate.
  - Submit button: Rounded rectangle, solid teal fill, white text, IBM Plex Sans 500, 15px. Hover: lighter teal + glow.
  - Contact details alongside: email (andy@charlwood.xyz), phone, location (Norwich, UK). Each with a Lucide icon (Mail, Phone, MapPin) in teal.
 - **Form submission animation**: On successful submit, the data packet (which has settled in the terminal node) launches upward — it accelerates off the top of the viewport, leaving a trail of particles behind it. A "Message sent" confirmation appears at the terminal node. The packet slowly regenerates (fading back in at the terminal) after 3 seconds. The visual metaphor: data entered → processed → transmitted.
 **Pipeline completion state:**
 Once the packet reaches the terminal, the entire pipeline track behind it achieves full brightness — every node is active, every branch is lit, flow particles are moving along the full length. The complete pipeline is visible as a glowing map of everything the user explored. This provides a satisfying sense of completion and a visual summary of the journey.
 ---
 ## Interactions and Micro-interactions
 ### Packet Drag Mechanics
 The data packet is the primary interactive element. Its behavior must feel physically satisfying:
 - **Grab**: Clicking/touching the packet scales it up (1.0 → 1.2) with a spring animation (stiffness: 400, damping: 20) and increases its glow radius. Cursor changes to `grabbing`.
 - **Drag**: The packet follows the user's pointer along the pipeline track. It cannot leave the track — movement is constrained to the SVG path. The position is calculated as the nearest point on the path to the cursor position.
 - **Velocity**: Drag velocity is tracked. Faster dragging increases ambient particle flow speed and throughput counter count-up rate. This creates a satisfying "the faster I go, the more data processes" feedback loop.
 - **Release with momentum**: When released, the packet coasts in the direction of the last drag velocity. Deceleration follows spring physics (`dragMomentum: true`, damping: 0.8). The packet can coast through multiple nodes if released with enough velocity. This creates a playful "launch" interaction.
 - **Release without momentum**: If released while stationary (no velocity), the packet stays in place. No auto-advancing.
 - **Backward dragging**: Fully supported. Dragging backward reverses all animations — cards deconstruct, nodes deactivate, metrics count down. The experience is fully bidirectional.
 - **Snap points**: At each processing node, the packet has a slight magnetic snap (subtle resistance when dragging past, requiring a small threshold of force to break free). This encourages the user to pause at each section. Snap force: 5px snap radius, breakaway at 15px drag distance.
 ### Pipeline Glow Dynamics
 The pipeline's glow reacts to the packet's position and state:
 - **Proximity glow**: The pipeline track within 200px of the packet has enhanced glow (30% → 60% opacity). The glow falls off with distance using an ease-out curve.
 - **Drag glow**: While the packet is being actively dragged, the glow intensifies further (to 80%) and the glow color shifts from teal toward brighter cyan.
 - **Pulse on node activation**: When the packet crosses a processing node, the pipeline segment behind the node pulses (brightness spikes to 100%, then settles to the completed-segment baseline of 50%).
 - **Idle glow**: If the packet sits idle for >5 seconds, it emits a gentle pulse (breathing glow, 3s period) to remind the user it's there and draggable.
 ### Content Card Reveal Choreography
 All content cards (skills, experience, education, projects) follow a consistent build choreography:
 1. **Card surface appears** (100ms): Dark surface fades in from 0 → 100% opacity.
 2. **Left accent draws** (200ms): The 3px teal left border draws top-to-bottom.
 3. **Title types** (variable, 30ms per character): Characters appear left-to-right.
 4. **Subtitle slides** (200ms): Company/date slides in from 20px left.
 5. **Body fades** (200ms per element, 100ms stagger): Each line fades in from 10px below.
 6. **Metrics count** (variable): Numbers count up at 30ms per digit.
 7. **Visualization animates** (if applicable, 1-2s): Mini-viz plays after text is settled.
 Easing for all: `cubic-bezier(0.16, 1, 0.3, 1)`.
 Reverse: On backward drag, steps play in reverse order at 1.5x speed (deconstruction feels faster than construction, which is psychologically satisfying).
 ### Ambient Particle Behaviors
 The particle system has contextual behaviors per section:
 | Section | Particle Behavior | Emotional Register |
 |---------|-------------------|-------------------|
 | Hero | Slow drift, random direction | Calm, waiting |
 | Skills | Stream toward activated skill nodes | Learning, acquisition |
 | Experience | Dense, fast along branches | Heavy processing |
 | Education | Organized grid-aligned drift | Structured, academic |
 | Projects | Surge along all active branches | High throughput |
 | Contact | Converge toward terminal node | Resolution, completion |
 ---
 ## Navigation
 ### Pipeline as Navigation
 The pipeline itself IS the navigation. The user's position on the pipeline determines what content is visible. However, auxiliary navigation is needed for:
 1. **Direct section access**: Five small node icons arranged vertically on the right edge of the viewport. Each corresponds to a section (Skills, Experience, Education, Projects, Contact). Clicking a node animates the packet along the pipeline to that section's entry point (the packet travels the pipeline visually — it doesn't teleport). The travel animation takes 800ms regardless of distance.
 2. **Mini-map**: At the bottom of the viewport, a thin horizontal representation of the entire pipeline (height 4px, width 200px). The packet's current position is shown as a bright dot on this minimap. Section boundaries are marked with tiny notches. The minimap provides spatial orientation — "I'm halfway through the pipeline." Clicking a position on the minimap moves the packet there.
 3. **Pipeline overview** (optional): Double-clicking/double-tapping anywhere off the pipeline triggers a "zoom out" — the viewport smoothly scales down to show the entire pipeline at once (scale 0.3-0.4x), with all sections visible as labeled nodes. The user can click any section to zoom back in at that position. This provides a bird's-eye view of the journey.
 ### Keyboard Navigation
 - **Arrow Right / Arrow Down**: Advance packet to next processing node (with travel animation).
 - **Arrow Left / Arrow Up**: Move packet to previous processing node.
 - **Tab**: Focus moves between interactive elements (project cards, contact form fields) in DOM order.
 - **Enter**: At a branch point, Enter activates the "Run Algorithm" button.
 - **Number keys 1-5**: Jump to sections (1=Skills, 2=Experience, 3=Education, 4=Projects, 5=Contact).
 - **Home**: Return packet to start.
 - **End**: Advance packet to Contact terminal.
 ### Scroll Fallback
 A "scroll mode" toggle is available in the header (a small icon: pipeline icon → scroll icon). When activated:
 - The pipeline track becomes a decorative sidebar element (fixed on the left, thin)
 - Content converts to traditional vertical scroll layout
 - The packet still travels down the sidebar pipeline synchronized to scroll position
 - All content is visible via standard scrolling
 - This mode is automatically activated for keyboard-only users (detected via `keydown` without prior `pointerdown`)
 ---
 ## Responsive Strategy
 ### Desktop (>1024px)
 Full horizontal pipeline experience. The pipeline track winds across the full viewport width. Content cards appear beside the pipeline track (alternating left and right). The skills matrix is a wide grid. Experience branches spread horizontally. Drag is horizontal (left-to-right). Ambient particles at full density (300). Mini-map and side navigation are visible.
 Pipeline orientation: Horizontal S-curve spanning the viewport.
 ### Tablet (768px - 1024px)
 Hybrid layout. The pipeline rotates to a diagonal — still primarily horizontal but with more vertical S-curves to fit the narrower viewport. Content cards appear below the pipeline track rather than beside it. Skills matrix reduces to 2 columns. Experience branches are shorter. Drag direction follows the pipeline (mixed horizontal/vertical). Ambient particles reduced to 200. Mini-map visible, side navigation collapsed to a hamburger.
 ### Mobile (<768px)
 The pipeline rotates fully vertical. The track runs top-to-bottom, fitting naturally with the device's primary scroll direction. The drag gesture is vertical (up-to-down).
 Key mobile adaptations:
 - **Drag direction**: Vertical drag replaces horizontal. The pipeline S-curves become horizontal zigzags (left-to-right then right-to-left, repeating downward).
 - **Content cards**: Full-width, appearing below each processing node. Single-column layout.
 - **Skills matrix**: Single-column vertical list. Nodes activate as the packet descends through them.
 - **Experience branches**: Simplified — instead of visual branching, the track passes through role nodes sequentially. Branch visualizations are implied through a slightly wider track at each role.
 - **Projects**: The parallel branch split is replaced by a sequential layout with the "Run Algorithm" button still available (packet duplicates downward into parallel vertical tracks, then merges).
 - **Ambient particles**: Reduced to 100. No particle proximity reactions (too CPU-intensive on mobile with touch tracking).
 - **Packet size**: Slightly larger (12px radius vs 8px desktop) for easier touch targeting. Touch target area is 48x48px minimum.
 - **Scroll fallback**: Active by default on very small screens (<480px). Pipeline is decorative, content scrolls normally.
 ### Touch Interaction
 - **Grab**: Long-press (200ms) or single tap on the packet activates drag mode. The packet scales up and vibrates once (haptic feedback on supported devices).
 - **Drag**: Touch move drags the packet along the pipeline. Drag is constrained to the track.
 - **Release**: Lift finger. Momentum and coast physics apply.
 - **Tap node**: Tapping a processing node on the pipeline (not the packet) animates the packet to that node. This provides an alternative to dragging on small screens.
 ---
 ## Technical Implementation
 ### Pipeline Track (SVG Path System)
 The pipeline is a single SVG `<svg>` element spanning the full layout dimensions:
 ```
 Architecture:
 - Pipeline track: SVG <path> elements (one per segment/branch)
 - Processing nodes: SVG <circle> elements at segment junctions
 - Branch points: SVG <polygon> (diamond shape) elements
 - Flow particles: Small SVG <circle> elements animated along paths via getPointAtLength()
 - Glow effect: Duplicate <path> elements with SVG <filter> (feGaussianBlur)
 - All pipeline elements have pointer-events: none (except nodes for click navigation)
 ```
 Path coordinates are computed based on viewport dimensions and section positions. On resize, paths recompute (debounced, 200ms). The pipeline is responsive — it redraws its curves to fit the new viewport.
 ### Packet Position System
 ```
 Core:
 - useMotionValue('packetProgress') — a 0-1 value representing position along total pipeline length
 - Packet screen position: pathElement.getPointAtLength(progress * totalLength)
 - Framer Motion drag event maps pointer movement to progress delta
 - Constraints: progress clamped to [0, 1], packet cannot leave the pipeline
 Drag physics:
 - dragMomentum: true
 - dragElastic: 0.05 (very slight elasticity at endpoints)
 - Custom velocity tracking: store last 5 position samples (16ms apart), compute average velocity
 - On release: apply velocity as spring animation (stiffness: 80, damping: 25)
 - Snap points: implemented as modulated spring stiffness at node positions
 Section mapping:
 - Each section registers a progress range: { start: 0.15, end: 0.35 }
 - Section's internal animation progress = (packetProgress - section.start) / (section.end - section.start)
 - Clamped to [0, 1] — 0 = section hasn't started, 1 = section fully revealed
 ```
 ### Content Reveal System
 ```
 Architecture:
 - Each section component receives its animation progress (0-1) as a prop
 - Internal elements map sub-ranges of this progress to their individual animations
 - Example: Experience card bullets occupy progress 0.5-1.0 of the section
  - Bullet 1: 0.5-0.6, Bullet 2: 0.6-0.7, Bullet 3: 0.7-0.8, etc.
 - Framer Motion useTransform for all progress-to-style mappings
 - All animated properties are transform/opacity only (GPU composited)
 Card assembly:
 - Each card is a React component with sub-elements
 - useTransform maps section progress to sub-element animations
 - Sub-elements animate in sequence (see choreography above)
 - Reverse animations are computed automatically (progress decreasing)
 ```
 ### Ambient Particle System
 ```
 Implementation:
 - HTML5 Canvas element, position: fixed, z-index: 0, pointer-events: none
 - Particle class: { x, y, vx, vy, size, opacity, sectionBehavior }
 - requestAnimationFrame loop at 30fps (16.67ms frame budget * 2 = 33ms interval)
 - Per frame:
  1. Read packet position from shared ref (no React re-render)
  2. For each particle: apply section-specific behavior, apply packet proximity force, update position
  3. Clear canvas, draw all particles
 - Particle count adapts to device: navigator.hardwareConcurrency > 4 ? 300 : 150
 - Canvas resolution: window.devicePixelRatio (retina support) capped at 2x
 ```
 ### "Run Algorithm" Implementation
 ```
 Sequence:
 1. User clicks "Run Algorithm" button
 2. Create 4 additional useMotionValue instances (one per branch)
 3. Animate all 4 from branch start to branch end simultaneously (spring animation, 2s duration)
 4. Each branch's project component receives its packet progress and builds its card
 5. On completion (all 4 reach endpoint), reverse-animate all 4 back to the branch point
 6. Merge: scale all 4 packets to 0 while scaling the main packet back to 1
 7. Clean up: remove branch useMotionValue instances
 8. Mark all projects as explored, illuminate main track forward
 State:
 - algorithmRunning: boolean
 - branchProgresses: MotionValue[] (created on demand)
 - exploredProjects: Set<string>
 ```
 ### Performance Budget
 - **Target**: 60fps for packet drag interaction, 30fps for ambient particles
 - **SVG elements**: <100 total (paths, nodes, flow particles). No DOM-heavy rendering.
 - **Canvas**: Single canvas for particles. 150-300 particles at 30fps is well within budget.
 - **React renders**: Packet position uses useMotionValue (bypasses React render cycle). Section components only re-render when their progress crosses a threshold (not every frame).
 - **Path calculations**: `getPointAtLength()` is called per frame for the packet — cached via lookup table (pre-compute 1000 points along the path at mount time, interpolate between them).
 - **Bundle**: Framer Motion (~30kb gzip) + lightweight d3-path for SVG path math (~3kb gzip). Total JS: <80kb gzip.
 - **will-change**: Applied to the packet element and all currently-animating card elements. Removed when animation completes.
 ### Reduced Motion
 When `prefers-reduced-motion: reduce` is active:
 - Pipeline track is visible but static (no glow animation, no flow particles)
 - Packet is replaced by a section indicator — clicking pipeline nodes reveals content directly
 - Content cards appear with simple opacity fades (200ms) instead of assembly choreography
 - No ambient particles
 - "Run Algorithm" shows all project cards simultaneously without animation
 - Navigation reverts to scroll mode with pipeline as decorative sidebar
 - All metric numbers display final values immediately
 ---
 ## Accessibility
 ### ARIA Structure
 ```html
 <main aria-label="Andy Charlwood - Interactive Portfolio">
  <nav aria-label="Pipeline navigation">
    <!-- Pipeline node buttons for section access -->
    <button aria-label="Navigate to Skills section">Skills</button>
    <button aria-label="Navigate to Experience section">Experience</button>
    <!-- etc. -->
  </nav>
  <div role="application" aria-label="Interactive data pipeline. Drag the data packet or use arrow keys to explore.">
    <!-- Pipeline SVG and packet (application role for custom keyboard interaction) -->
  </div>
  <section aria-label="Skills" role="region">
    <!-- Skills content, always in DOM, visibility controlled by CSS -->
  </section>
  <section aria-label="Professional Experience" role="region">
    <!-- Experience cards -->
  </section>
  <!-- etc. -->
 </main>
 ```
 ### Screen Reader Experience
 Screen readers receive content in logical order regardless of pipeline state. All section content is present in the DOM (not dynamically loaded) — visual reveal is CSS-only (opacity, transform). This means screen readers can traverse the entire CV content immediately.
 The pipeline interaction is wrapped in `role="application"` with clear keyboard instructions. Screen reader users can also bypass the pipeline entirely via the section navigation buttons.
 ### Keyboard Navigation
 Full keyboard support as detailed in the Navigation section:
 - Arrow keys move the packet between nodes
 - Number keys jump to sections
 - Tab navigates interactive elements
 - Enter activates the "Run Algorithm" button
 - Home/End for start/finish
 ### Focus Management
 - When the packet reaches a new section, focus is not automatically moved (this would be disorienting). Instead, the section navigation button for the current section receives an `aria-current="section"` attribute.
 - Tab order follows logical CV structure: Hero → Skills → Experience → Education → Projects → Contact.
 - All focusable elements have visible focus indicators (2px solid #22D1EE, 2px offset, 4px border-radius).
 ### Color Contrast
 All text on dark backgrounds meets WCAG AA minimum:
 - Off-white (#E6EDF3) on deep charcoal (#0D1117) = contrast ratio 13.2:1 (AAA)
 - Slate (#8B949E) on deep charcoal (#0D1117) = contrast ratio 5.1:1 (AA)
 - Electric cyan (#00D4AA) on deep charcoal (#0D1117) = contrast ratio 8.9:1 (AAA)
 - Teal (#00897B) on deep charcoal (#0D1117) = contrast ratio 5.3:1 (AA)
 - White (#FFFFFF) on elevated dark (#161B22) = contrast ratio 15.4:1 (AAA)
 ### Touch Targets
 All interactive elements meet minimum 48x48px touch target size:
 - Data packet: 48x48px touch area (visually 16-24px, but touch target is expanded)
 - Pipeline nodes (mobile tap navigation): 48x48px
 - "Run Algorithm" button: minimum 48px height
 - Side navigation nodes: 48x48px touch areas
 ---
 ## What Makes This Special
 1. **It's the only portfolio site with drag-as-primary-navigation.** No one has seen this before. The moment a visitor realizes they're dragging a glowing orb through a pipeline, they know this isn't a template. Novelty is the strongest driver of link sharing.
 2. **The metaphor is literal.** Andy builds data pipelines. His CV IS a data pipeline. The user IS the data being processed. There's no metaphorical stretch — this is exactly what his work looks like, translated into an interactive experience. Every recruiter who asks "what do you actually DO?" gets their answer through the medium, not just the text.
 3. **"Run Algorithm" is the share moment.** Watching a single packet duplicate into four simultaneous parallel-processing streams, each building a project card in real-time, is the kind of interaction people screen-record. It directly demonstrates the value of automation versus manual work — the user has been doing it manually (one project at a time), then sees the algorithm do it all at once. That contrast IS Andy's professional pitch.
 4. **The transition is seamless.** The ECG heartbeat line literally straightens into the pipeline track. The heartbeat pulse echoes in the packet's birth. The biological becomes technical. The entire site is one continuous visual thread from the first terminal boot character to the contact form submission animation. No seam, no break, no "now the real site starts" moment.
 5. **It rewards exploration.** The momentum physics make dragging playful — you can launch the packet and watch it coast. The branch points create genuine choices. The ambient particles create a living environment. The snap points encourage pausing. The glow dynamics make movement feel powerful. The bidirectional animation means exploring backward is just as satisfying as going forward.
 6. **Dark theme serves the content.** A data analyst's portfolio should feel like a command center, not a brochure. The dark background with glowing pipeline and bright metrics creates immediate technical credibility. It says "this person works with data infrastructure" before you read a single word.
@@ -9,6 +9,7 @@
      "version": "0.0.0",
      "dependencies": {
        "framer-motion": "^11.15.0",
        "fuse.js": "^7.1.0",
        "lucide-react": "^0.468.0",
        "react": "^18.3.1",
        "react-dom": "^18.3.1"
@@ -2668,6 +2669,15 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
    "node_modules/fuse.js": {
      "version": "7.1.0",
      "resolved": "https://registry.npmjs.org/fuse.js/-/fuse.js-7.1.0.tgz",
      "integrity": "sha512-trLf4SzuuUxfusZADLINj+dE8clK1frKdmqiJNb1Es75fmI5oY6X2mxLVUciLLjxqw/xr72Dhy+lER6dGd02FQ==",
      "license": "Apache-2.0",
      "engines": {
        "node": ">=10"
      }
    },
    "node_modules/gensync": {
      "version": "1.0.0-beta.2",
      "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
@@ -12,6 +12,7 @@
  },
  "dependencies": {
    "framer-motion": "^11.15.0",
    "fuse.js": "^7.1.0",
    "lucide-react": "^0.468.0",
    "react": "^18.3.1",
    "react-dom": "^18.3.1"
@@ -1,111 +0,0 @@
 # Accessibility Essentials
 Accessibility enables creativity - it's a foundation, not a limitation. WCAG 2.1 AA compliance.
 ## Core Principles (POUR)
 - **Perceivable**: Content must be perceivable (alt text, contrast, captions)
 - **Operable**: UI must be keyboard/touch accessible
 - **Understandable**: Clear, predictable behavior
 - **Robust**: Works with assistive technologies
 ## Contrast Requirements
 | Element | Minimum Ratio |
 |---------|---------------|
 | Normal text | 4.5:1 |
 | Large text (18pt+) | 3:1 |
 | UI components | 3:1 |
 **Tools**: Chrome DevTools Accessibility tab, WebAIM Contrast Checker
 ## Keyboard Navigation
 ```tsx
 // All interactive elements need focus states
 <button className="focus:ring-4 focus:ring-blue-500 focus:outline-none">
  Accessible
 </button>
 // Custom elements need tabindex and key handlers
 <div
  role="button"
  tabIndex={0}
  onKeyDown={(e) => (e.key === 'Enter' || e.key === ' ') && handleClick()}
 >
  Custom Button
 </div>
 ```
 **Essentials:**
 - Tab through entire interface
 - Enter/Space activates elements
 - Escape closes modals
 - Visible focus indicators always
 ## Essential ARIA
 ```tsx
 // Buttons without text
 <button aria-label="Close dialog"><X /></button>
 // Expandable elements
 <button aria-expanded={isOpen} aria-controls="menu">Menu</button>
 // Live regions for dynamic content
 <div role="status" aria-live="polite">{statusMessage}</div>
 <div role="alert" aria-live="assertive">{errorMessage}</div>
 // Form errors
 <input aria-invalid={hasError} aria-describedby="error-msg" />
 {hasError && <p id="error-msg" role="alert">Error text</p>}
 ```
 ## Semantic HTML
 ```tsx
 // Use semantic elements, not divs
 <header><nav>...</nav></header>
 <main><article><h1>...</h1></article></main>
 <footer>...</footer>
 // Heading hierarchy (never skip levels)
 <h1>Page Title</h1>
  <h2>Section</h2>
    <h3>Subsection</h3>
 ```
 ## Touch Targets
 - Minimum **44x44px** for all interactive elements
 - Adequate spacing between targets
 - `touch-manipulation` CSS for responsive touch
 ## Screen Reader Content
 ```tsx
 // Hidden but announced
 <span className="sr-only">Additional context</span>
 // Skip link
 <a href="#main" className="sr-only focus:not-sr-only">
  Skip to main content
 </a>
 ```
 ## Quick Checklist
 - [ ] Keyboard: Can tab through everything
 - [ ] Focus: Visible focus indicators
 - [ ] Contrast: 4.5:1 for text
 - [ ] Alt text: All images have appropriate alt
 - [ ] Headings: Logical h1-h6 hierarchy
 - [ ] Forms: Labels associated with inputs
 - [ ] Errors: Announced to screen readers
 - [ ] Touch: 44px minimum targets
 ## Resources
 - [WCAG 2.1 Quick Reference](https://www.w3.org/WAI/WCAG21/quickref/)
 - [WebAIM Contrast Checker](https://webaim.org/resources/contrastchecker/)
 - [ARIA Authoring Practices](https://www.w3.org/WAI/ARIA/apg/)
@@ -1,577 +0,0 @@
 # Design System Template
 Meta-framework for understanding what's fixed, project-specific, and adaptable in your design system.
 ## Purpose
 This template helps you distinguish between:
 - **Fixed Elements**: Universal rules that never change
 - **Project-Specific Elements**: Filled in for each project based on brand
 - **Adaptable Elements**: Context-dependent implementations
 ---
 ## I. FIXED ELEMENTS
 These foundations remain consistent across all projects, regardless of brand or context.
 ### 1. Spacing Scale
 **Fixed System:**
 ```
 4px, 8px, 12px, 16px, 24px, 32px, 48px, 64px, 96px
 ```
 **Usage:**
 - Margins, padding, gaps between elements
 - Mathematical relationships ensure visual harmony
 - Use multipliers of base unit (4px)
 **Why Fixed:**
 Consistent spacing creates visual rhythm regardless of brand personality.
 ### 2. Grid System
 **Fixed Structure:**
 - **12-column grid** for most layouts (divisible by 2, 3, 4, 6)
 - **16-column grid** for data-heavy interfaces
 - **Gutters**: 16px (mobile), 24px (tablet), 32px (desktop)
 **Why Fixed:**
 Grid provides structural order. Brand personality shows through color, typography, content—not grid structure.
 ### 3. Accessibility Standards
 **Fixed Requirements:**
 - **WCAG 2.1 AA** compliance minimum
 - **Contrast**: 4.5:1 for normal text, 3:1 for large text
 - **Touch targets**: Minimum 44×44px
 - **Keyboard navigation**: All interactive elements accessible
 - **Screen reader**: Semantic HTML, ARIA labels where needed
 **Why Fixed:**
 Accessibility is not negotiable. It's a baseline requirement for ethical, legal, and usable products.
 ### 4. Typography Hierarchy Logic
 **Fixed Structure:**
 - **Mathematical scaling**: 1.25x (major third) or 1.333x (perfect fourth)
 - **Hierarchy levels**: Display → H1 → H2 → H3 → Body → Small → Caption
 - **Line height**: 1.5x for body text, 1.2-1.3x for headlines
 - **Line length**: 45-75 characters optimal
 **Why Fixed:**
 Mathematical relationships create predictable, harmonious hierarchy. Specific fonts change, but the logic doesn't.
 ### 5. Component Architecture
 **Fixed Patterns:**
 - **Button states**: Default, Hover, Active, Focus, Disabled
 - **Form structure**: Label above input, error below, helper text optional
 - **Modal pattern**: Overlay + centered content + close mechanism
 - **Card structure**: Container → Header → Body → Footer (optional)
 **Why Fixed:**
 Users expect consistent component behavior. Architecture is fixed; appearance is project-specific.
 ### 6. Animation Timing Framework
 **Fixed Physics Profiles:**
 - **Lightweight** (icons, chips): 150ms
 - **Standard** (cards, panels): 300ms
 - **Weighty** (modals, pages): 500ms
 **Fixed Easing:**
 - **Ease-out**: Entrances (fast start, slow end)
 - **Ease-in**: Exits (slow start, fast end)
 - **Ease-in-out**: Transitions (smooth both ends)
 **Why Fixed:**
 Natural physics feel consistent across brands. Duration and easing create that feeling.
 ---
 ## II. PROJECT-SPECIFIC ELEMENTS
 Fill in these for each project based on brand personality and purpose.
 ### 1. Brand Color System
 **Template Structure:**
 ```
 NEUTRALS (4-5 colors):
 - Background lightest: _______ (e.g., slate-50 or warm-white)
 - Surface: _______ (e.g., slate-100)
 - Border/divider: _______ (e.g., slate-300)
 - Text secondary: _______ (e.g., slate-600)
 - Text primary: _______ (e.g., slate-900)
 ACCENTS (1-3 colors):
 - Primary (main CTA): _______ (e.g., teal-500)
 - Secondary (alternative action): _______ (optional)
 - Status colors:
  - Success: _______ (green-ish)
  - Warning: _______ (amber-ish)
  - Error: _______ (red-ish)
  - Info: _______ (blue-ish)
 ```
 **Questions to Answer:**
 - What emotion should the brand evoke? (Trust, excitement, calm, urgency)
 - Warm or cool neutrals?
 - Conservative or bold accents?
 **Examples:**
 **Project A: Fintech App**
 ```
 Neutrals: Cool greys (slate-50 → slate-900)
 Primary: Deep blue (#0A2463) – trust, professionalism
 Success: Muted green (#10B981)
 Why: Financial products need trust, not playfulness
 ```
 **Project B: Creative Community**
 ```
 Neutrals: Warm greys with beige undertones
 Primary: Coral (#FF6B6B) – energy, creativity
 Success: Teal (#06D6A0) – fresh, unexpected
 Why: Creative spaces should feel inviting, not corporate
 ```
 **Project C: Healthcare Platform**
 ```
 Neutrals: Pure greys (minimal color temperature)
 Primary: Soft blue (#4A90E2) – calm, clinical
 Success: Medical green (#38A169)
 Why: Healthcare needs clarity and calm, not distraction
 ```
 ### 2. Typography Pairing
 **Template:**
 ```
 HEADLINE FONT: _______
 - Weight: _______ (e.g., Bold 700)
 - Use case: H1, H2, display text
 - Personality: _______ (geometric/humanist/serif/etc.)
 BODY FONT: _______
 - Weight: _______ (e.g., Regular 400, Medium 500)
 - Use case: Paragraphs, UI text
 - Personality: _______ (neutral/readable/efficient)
 OPTIONAL ACCENT FONT: _______
 - Weight: _______
 - Use case: _______ (special headlines, callouts)
 ```
 **Pairing Logic:**
 - Serif + Sans-serif (classic, editorial)
 - Geometric + Humanist (modern + warm)
 - Display + System (distinctive + efficient)
 **Examples:**
 **Project A: Editorial Platform**
 ```
 Headline: Playfair Display (Serif, Bold 700)
 Body: Inter (Sans-serif, Regular 400)
 Why: Serif headlines = trustworthy, editorial feel
 ```
 **Project B: Tech Startup**
 ```
 Headline: DM Sans (Sans-serif, Bold 700)
 Body: DM Sans (Regular 400, Medium 500)
 Why: Single-font system = modern, efficient, cohesive
 ```
 **Project C: Luxury Brand**
 ```
 Headline: Cormorant Garamond (Serif, Light 300)
 Body: Lato (Sans-serif, Regular 400)
 Why: Elegant serif + readable sans = sophisticated
 ```
 ### 3. Tone of Voice
 **Template:**
 ```
 BRAND PERSONALITY:
 - Formal ↔ Casual: _______ (1-10 scale)
 - Professional ↔ Friendly: _______ (1-10 scale)
 - Serious ↔ Playful: _______ (1-10 scale)
 - Authoritative ↔ Conversational: _______ (1-10 scale)
 MICROCOPY EXAMPLES:
 - Button label (submit form): _______
 - Error message (invalid email): _______
 - Success message (saved): _______
 - Empty state: _______
 ANIMATION PERSONALITY:
 - Speed: _______ (quick/moderate/slow)
 - Feel: _______ (precise/smooth/bouncy)
 ```
 **Examples:**
 **Project A: Banking App**
 ```
 Personality: Formal (8), Professional (9), Serious (8)
 Button: "Submit Application"
 Error: "Email address format is invalid"
 Success: "Application submitted successfully"
 Animation: Quick (precise, efficient, no-nonsense)
 ```
 **Project B: Social App**
 ```
 Personality: Casual (8), Friendly (9), Playful (7)
 Button: "Let's go!"
 Error: "Hmm, that email doesn't look right"
 Success: "Nice! You're all set 🎉"
 Animation: Moderate (smooth, friendly bounce)
 ```
 ### 4. Animation Speed & Feel
 **Template:**
 ```
 SPEED PREFERENCE:
 - UI interactions: _______ (100-150ms / 150-200ms / 200-300ms)
 - State changes: _______ (200ms / 300ms / 400ms)
 - Page transitions: _______ (300ms / 500ms / 700ms)
 ANIMATION STYLE:
 - Easing preference: _______ (sharp / standard / bouncy)
 - Movement type: _______ (minimal / smooth / expressive)
 ```
 **Examples:**
 **Project A: Trading Platform**
 ```
 Speed: Fast (100ms UI, 200ms states, 300ms pages)
 Style: Sharp easing, minimal movement
 Why: Traders need speed, not distraction
 ```
 **Project B: Wellness App**
 ```
 Speed: Slow (200ms UI, 400ms states, 500ms pages)
 Style: Smooth easing, gentle movement
 Why: Calm, relaxing experience matches brand
 ```
 ---
 ## III. ADAPTABLE ELEMENTS
 Context-dependent implementations that vary based on use case.
 ### 1. Component Variations
 **Button Variants:**
 - **Primary**: Full background color (high emphasis)
 - **Secondary**: Outline only (medium emphasis)
 - **Tertiary**: Text only (low emphasis)
 - **Destructive**: Red-ish (danger actions)
 - **Ghost**: Minimal (navigation, toolbars)
 **Adaptation Rules:**
 - Primary: Main CTA, one per screen section
 - Secondary: Alternative actions
 - Tertiary: Less important actions, multiple allowed
 - Use brand colors, but hierarchy logic is fixed
 ### 2. Responsive Breakpoints
 **Fixed Ranges:**
 - XS: 0-479px (small phones)
 - SM: 480-767px (large phones)
 - MD: 768-1023px (tablets)
 - LG: 1024-1439px (laptops)
 - XL: 1440px+ (desktop)
 **Adaptable Implementations:**
 **Simple Content Site:**
 ```
 XS-SM: Single column
 MD: 2 columns
 LG-XL: 3 columns max
 Why: Content-focused, don't overwhelm
 ```
 **Dashboard/Data App:**
 ```
 XS: Collapsed, cards stack
 SM: Simplified sidebar
 MD: Full sidebar + main content
 LG-XL: Sidebar + main + right panel
 Why: Data apps need more screen real estate
 ```
 ### 3. Dark Mode Palette
 **Adaptation Strategy:**
 Not a simple inversion. Dark mode needs adjusted contrast:
 **Light Mode:**
 ```
 Background: #FFFFFF (white)
 Text: #0F172A (slate-900) → 21:1 contrast
 ```
 **Dark Mode (Adapted):**
 ```
 Background: #0F172A (slate-900)
 Text: #E2E8F0 (slate-200) → 15.8:1 contrast (still AA, but softer)
 ```
 **Why Adapt:**
 Pure white on pure black is too harsh. Dark mode needs slightly lower contrast for eye comfort.
 ### 4. Loading States
 **Context-Dependent:**
 **Fast operations (<500ms):**
 - No loading indicator (feels instant)
 **Medium operations (500ms-2s):**
 - Spinner or skeleton screen
 **Long operations (>2s):**
 - Progress bar with percentage
 - Or: Skeleton + estimated time
 **Interactive Operations:**
 - Button shows spinner inside (don't disable, show state)
 ### 5. Error Handling Strategy
 **Context-Dependent:**
 **Form Errors:**
 ```
 Validate: On blur (after user leaves field)
 Display: Inline below field
 Recovery: Clear error on fix
 ```
 **API Errors:**
 ```
 Transient (network): Show retry button
 Permanent (404): Show helpful message + next steps
 Critical (500): Contact support option
 ```
 **Data Errors:**
 ```
 Missing: Show empty state with action
 Corrupt: Show error boundary with reload
 Invalid: Highlight + explain what's wrong
 ```
 ---
 ## DECISION TREE
 When implementing a feature, ask:
 ### Is this...
 **FIXED?**
 - Does it affect structure, accessibility, or universal UX?
 - Examples: Spacing scale, grid, contrast ratios, component architecture
 - **Action**: Use the fixed system, no variation
 **PROJECT-SPECIFIC?**
 - Does it express brand personality or purpose?
 - Examples: Colors, typography, tone of voice, animation feel
 - **Action**: Fill in the template for this project
 **ADAPTABLE?**
 - Does it depend on context, content, or use case?
 - Examples: Component variants, responsive behavior, error handling
 - **Action**: Choose appropriate variation based on context
 ---
 ## EXAMPLE: Implementing a "Submit" Button
 ### Fixed Elements (Always the same):
 - Touch target: 44px minimum height
 - Padding: 16px horizontal (from spacing scale)
 - States: Default, Hover, Active, Focus, Disabled
 - Animation: 150ms ease-out (lightweight profile)
 ### Project-Specific (Filled per project):
 - **Project A (Bank)**: Dark blue background, white text, "Submit Application"
 - **Project B (Social)**: Coral background, white text, "Let's Go!"
 - **Project C (Healthcare)**: Soft blue background, white text, "Continue"
 ### Adaptable (Context-dependent):
 - **Form context**: Primary button (full color)
 - **Toolbar context**: Ghost button (text only)
 - **Danger context**: Destructive variant (red-ish)
 ---
 ## VALIDATION CHECKLIST
 Before finalizing a design, check:
 ### Fixed Elements
 - [ ] Uses spacing scale (4/8/12/16/24/32/48/64/96px)
 - [ ] Follows grid system (12 or 16 columns)
 - [ ] Meets WCAG AA contrast (4.5:1 normal, 3:1 large)
 - [ ] Touch targets ≥ 44px
 - [ ] Typography follows mathematical scale
 - [ ] Components follow standard architecture
 ### Project-Specific Elements
 - [ ] Brand colors filled in and intentional
 - [ ] Typography pairing chosen and justified
 - [ ] Tone of voice defined and consistent
 - [ ] Animation speed matches brand personality
 ### Adaptable Elements
 - [ ] Component variants appropriate for context
 - [ ] Responsive behavior fits content type
 - [ ] Loading states match operation duration
 - [ ] Error handling fits error type
 ---
 ## PROJECT KICKOFF TEMPLATE
 Use this to start a new project:
 ```
 PROJECT NAME: _______________________
 PURPOSE: ____________________________
 BRAND PERSONALITY:
 - Primary emotion: _______
 - Warm or cool: _______
 - Formal or casual: _______
 - Conservative or bold: _______
 COLORS (fill the template):
 - Neutral base: _______
 - Primary accent: _______
 - Status colors: _______ / _______ / _______
 TYPOGRAPHY (fill the template):
 - Headline font: _______
 - Body font: _______
 - Pairing rationale: _______
 TONE:
 - Button labels style: _______
 - Error message style: _______
 - Success message style: _______
 ANIMATION:
 - Speed preference: _______ (fast/moderate/slow)
 - Feel preference: _______ (sharp/smooth/bouncy)
 TARGET DEVICES:
 - Primary: _______ (mobile/desktop/both)
 - Secondary: _______
 ```
 ---
 ## MAINTAINING CONSISTENCY
 ### Documentation
 - Keep this template updated as system evolves
 - Document WHY choices were made, not just WHAT
 ### Communication
 - Share with designers: "Here's what varies vs. what's fixed"
 - Share with developers: "Here are the design tokens"
 ### Tooling
 - Use CSS variables for project-specific values
 - Use Tailwind config for spacing scale
 - Use design tokens in Figma/Storybook
 ### Reviews
 - Audit: Does new work follow fixed elements?
 - Validate: Are project-specific elements intentional?
 - Question: Are adaptations justified by context?
 ---
 ## EXAMPLES OF COMPLETE SYSTEMS
 ### System A: B2B SaaS (Conservative)
 **Fixed**: Standard spacing, 12-col grid, WCAG AA, major third type scale
 **Project-Specific**:
 - Colors: Cool greys + corporate blue
 - Typography: DM Sans (headlines + body)
 - Tone: Professional, formal
 - Animation: Quick, precise (150ms)
 **Adaptable**:
 - Dashboard gets multi-panel layout
 - Forms are extensive (use progressive disclosure)
 - Errors show detailed technical info
 ### System B: Consumer Social App (Playful)
 **Fixed**: Same spacing/grid/accessibility/type logic
 **Project-Specific**:
 - Colors: Warm greys + vibrant coral
 - Typography: Poppins (headlines) + Inter (body)
 - Tone: Casual, friendly, playful
 - Animation: Moderate, bouncy (200ms)
 **Adaptable**:
 - Mobile-first (most users on phones)
 - Forms are minimal (progressive profiling)
 - Errors are friendly, not technical
 ### System C: Healthcare Platform (Clinical)
 **Fixed**: Same foundational structure
 **Project-Specific**:
 - Colors: Pure greys + medical blue
 - Typography: System fonts (SF Pro / Segoe)
 - Tone: Clear, authoritative, calm
 - Animation: Slow, smooth (300ms)
 **Adaptable**:
 - Desktop-first (clinical use at workstations)
 - Forms are complex (HIPAA compliance)
 - Errors are precise with next steps
 ---
 ## KEY TAKEAWAY
 **The system flexibility framework lets you:**
 - Maintain consistency (fixed elements)
 - Express brand personality (project-specific)
 - Adapt to context (adaptable elements)
 **Without this framework:**
 - Designers reinvent spacing every project
 - Components feel inconsistent across products
 - Brand personality overrides accessibility
 - Context-blind implementations feel wrong
 **With this framework:**
 - Speed: Start from proven foundations
 - Consistency: Fixed elements guarantee it
 - Flexibility: Express unique brand identity
 - Context: Adapt without breaking system
@@ -1,72 +0,0 @@
 # Motion Specification
 Motion should surprise and delight while serving function. Animation is a creative tool.
 ## Easing Curves
 | Easing | CSS | Use For |
 |--------|-----|---------|
 | **Ease-out** | `cubic-bezier(0.0, 0.0, 0.2, 1)` | Entrances, appearing |
 | **Ease-in** | `cubic-bezier(0.4, 0.0, 1, 1)` | Exits, disappearing |
 | **Ease-in-out** | `cubic-bezier(0.4, 0.0, 0.2, 1)` | State changes, transforms |
 | **Spring** | `cubic-bezier(0.68, -0.55, 0.265, 1.55)` | Playful, attention-grabbing |
 | **Linear** | `linear` | Spinners, continuous loops |
 ## Duration by Element Weight
 | Weight | Duration | Examples |
 |--------|----------|----------|
 | **Lightweight** | 150ms | Icons, badges, chips |
 | **Standard** | 300ms | Cards, panels, list items |
 | **Weighty** | 500ms | Modals, page transitions |
 ## Duration by Interaction
 | Interaction | Duration |
 |-------------|----------|
 | Button press | 100ms |
 | Hover state | 150ms |
 | Tooltip appear | 200ms |
 | Tab switch | 250ms |
 | Modal open | 300ms |
 | Page transition | 400ms |
 ## Common Patterns
 ```tsx
 // Hover transition (CSS)
 <button className="transition-colors duration-150 ease-out hover:bg-blue-700">
 // Fade + slide (Framer Motion)
 <motion.div
  initial={{ opacity: 0, y: 20 }}
  animate={{ opacity: 1, y: 0 }}
  transition={{ duration: 0.3, ease: "easeOut" }}
 />
 // Stagger children
 <motion.ul variants={{ visible: { transition: { staggerChildren: 0.1 } } }}>
  <motion.li variants={{ hidden: { opacity: 0 }, visible: { opacity: 1 } }} />
 </motion.ul>
 ```
 ## Performance Rules
 - Only animate `transform` and `opacity` (GPU-accelerated)
 - Avoid animating `width`, `height`, `margin`, `padding`
 - Keep durations under 500ms for UI interactions
 - Respect `prefers-reduced-motion`:
 ```css
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
 }
 ```
 ## Resources
 - [Framer Motion](https://www.framer.com/motion/)
 - [CSS Easing Functions](https://easings.net/)
@@ -1,90 +0,0 @@
 # Responsive Design Essentials
 Mobile-first approach: start with mobile, progressively enhance for larger screens.
 ## Breakpoints
 | Range | Pixels | Devices | Strategy |
 |-------|--------|---------|----------|
 | **XS** | 0-479px | Small phones | Single column, stacked nav, 44px touch targets |
 | **SM** | 480-767px | Large phones | Single column, bottom nav, simplified UI |
 | **MD** | 768-1023px | Tablets | 2 columns possible, sidebar nav |
 | **LG** | 1024-1439px | Laptops | Multi-column, full nav, desktop UI |
 | **XL** | 1440px+ | Desktop | Max-width containers, multi-panel layouts |
 ## Tailwind Responsive
 ```tsx
 // Mobile-first: base styles, then scale up
 <div className="
  w-full          // mobile: full width
  sm:w-1/2        // 480px+: half
  md:w-1/3        // 768px+: third
  lg:w-1/4        // 1024px+: quarter
 ">
 // Responsive grid
 <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
 // Responsive typography
 <h1 className="text-3xl md:text-4xl lg:text-5xl">
 // Show/hide by breakpoint
 <div className="block md:hidden">Mobile only</div>
 <div className="hidden md:block">Desktop only</div>
 ```
 ## Fluid Typography
 ```css
 h1 { font-size: clamp(2rem, 5vw, 4rem); }
 p { font-size: clamp(1rem, 2.5vw, 1.25rem); }
 ```
 ## Touch Targets
 - Minimum **44x44px** for all interactive elements
 - Use `touch-manipulation` to prevent 300ms tap delay
 - Adequate spacing between targets
 ```tsx
 <button className="min-w-[44px] min-h-[44px] touch-manipulation">
 ```
 ## Mobile Simplification
 | Desktop | Mobile |
 |---------|--------|
 | Full nav bar | Hamburger menu |
 | Side-by-side fields | Stacked fields |
 | Multi-column grid | Single column |
 | Inline buttons | Fixed bottom bar |
 | Data table | Collapsed cards |
 | Visible sidebar | Hidden/collapsible |
 ## Images
 ```tsx
 // Responsive images
 <img
  srcSet="image-400w.jpg 400w, image-800w.jpg 800w, image-1200w.jpg 1200w"
  sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw"
  loading="lazy"
 />
 // Next.js
 <Image src="/hero.jpg" width={1200} height={600} priority className="w-full h-auto" />
 ```
 ## Testing
 Test at these widths:
 - 375px (iPhone SE)
 - 390px (iPhone 14)
 - 768px (iPad)
 - 1024px (iPad Pro)
 - 1280px+ (Desktop)
 ## Resources
 - [Tailwind Responsive](https://tailwindcss.com/docs/responsive-design)
@@ -1,718 +0,0 @@
 ---
 name: bencium-innovative-ux-designer
 description: Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
 metadata:
  version: 2.0.0
 ---
 # Innovative UX Designer
 Create distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Implement real working code with exceptional attention to aesthetic details and creative choices. Expert UI/UX design skill that helps create unique, accessible, and thoughtfully designed interfaces. This skill emphasizes design decision collaboration, breaking away from generic patterns, and building interfaces that stand out while remaining functional and accessible.
 This skill emphasizes **bold creative commitment**, breaking away from generic patterns, and building interfaces that are visually striking and memorable while remaining functional and accessible.
 ## Core Philosophy
 **CRITICAL: Design Thinking Protocol**
 Before coding, **ASK to understand context**, then **COMMIT BOLDLY** to a distinctive direction:
 ### Questions to Ask First
 1. **Purpose**: What problem does this interface solve? Who uses it?
 2. **Tone**: What aesthetic extreme fits? (see Tone Options below)
 3. **Constraints**: Technical requirements (framework, performance, accessibility)?
 4. **Differentiation**: What makes this UNFORGETTABLE? What's the one thing someone will remember?
 ### Tone Options (Pick an Extreme)
 Choose a clear aesthetic direction and execute with precision:
 - **Brutally minimal** - stripped to essence, bold typography, vast whitespace
 - **Maximalist chaos** - layered, dense, visually rich, controlled disorder
 - **Retro-futuristic** - vintage meets sci-fi, nostalgic tech aesthetics
 - **Organic/natural** - soft edges, earthy colors, nature-inspired textures
 - **Luxury/refined** - elegant spacing, premium typography, subtle details
 - **Playful/toy-like** - bright colors, rounded shapes, delightful interactions
 - **Editorial/magazine** - strong typography hierarchy, asymmetric layouts
 - **Brutalist/raw** - exposed structure, harsh contrasts, intentionally rough
 - **Art deco/geometric** - bold patterns, metallic accents, symmetric elegance
 - **Soft/pastel** - gentle gradients, muted tones, calming atmosphere
 - **Industrial/utilitarian** - functional, no-nonsense, mechanical precision
 ### After Getting Context
 - **Commit fully** to the chosen direction - no half measures
 - Present 2-3 alternative approaches with trade-offs
 - Then implement with precision: production-grade, visually striking, memorable
 ## Foundational Design Principles
 ### Stand Out From Generic Patterns
 **NEVER Use These AI-Generated Aesthetics:**
 - **Fonts**: Inter, Roboto, Arial, system fonts as primary choice, Space Grotesk (overused by AI)
 - **Colors**: Generic SaaS blue (#3B82F6), purple gradients on white backgrounds
 - **Patterns**: Cookie-cutter layouts, predictable component arrangements
 - **Effects**: Glass morphism, Apple design mimicry, liquid/blob backgrounds
 - **Overall**: Anything that looks "Claude-generated" or machine-made
 **Instead, Create Atmosphere:**
 - Suggest photography, patterns, textures over flat solid colors
 - Apply gradient meshes, noise textures, geometric patterns
 - Use layered transparencies, dramatic shadows, decorative borders
 - Consider custom cursors, grain overlays, contextual effects
 - Think beyond typical patterns - you can step off the written path
 **Draw Inspiration From:**
 - Modern landing pages (Perplexity, Comet Browser, Dia Browser)
 - Framer templates and their innovative approaches
 - Leading brand design studios
 - Historical design movements (Bauhaus, Otl Aicher, Braun) - but as inspiration, not imitation
 - Beautiful background animations (CSS, SVG) - slow, looping, subtle
 **Visual Interest Strategies:**
 - Unique color pairs that aren't typical
 - Animation effects that feel fresh
 - Background patterns that add depth without distraction
 - Typography combinations that create contrast
 - Visual assets that tell a story
 ### Core Design Philosophy
 1. **Simplicity Through Reduction**
   - Identify the essential purpose and eliminate distractions
   - Begin with complexity, then deliberately remove until reaching the simplest effective solution
   - Every element must justify its existence
 2. **Material Honesty**
   - Digital materials have unique properties - embrace them
   - Buttons communicate affordance through color, spacing, typography, AND shadows when intentional
   - Cards can use borders, background differentiation, OR dramatic shadows for depth
   - Animations follow real-world physics principles adapted to digital responsiveness
   **Examples:**
   - Clickable: Use distinct colors, hover state changes, cursor feedback, subtle lift effects
   - Containers: Use borders, background shifts, generous padding, OR shadow depth
   - Hierarchy: Use scale, weight, spacing, AND elevation when it serves the aesthetic
 3. **Functional Layering**
   - Create hierarchy through typography scale, color contrast, and spatial relationships
   - Layer information conceptually (primary → secondary → tertiary)
   - Use shadows and gradients INTENTIONALLY when they serve the aesthetic direction
   - Embrace functional depth: modals over content, dropdowns over UI
   - Avoid: glass morphism, Apple mimicry (but shadows/gradients are tools, not enemies)
 4. **Obsessive Detail**
   - Consider every pixel, interaction, and transition
   - Excellence emerges from hundreds of small, intentional decisions
   - Balance: Details should serve simplicity, not complexity
   - When detail conflicts with clarity, clarity wins
 5. **Coherent Design Language**
   - Every element should visually communicate its function
   - Elements should feel part of a unified system
   - Nothing should feel arbitrary
 6. **Invisibility of Technology**
   - The best technology disappears
   - Users should focus on content and goals, not on understanding the interface
 ### What This Means in Practice
 **Color Usage:**
 - Base palette: 4-5 neutral shades (backgrounds, borders, text)
 - Accent palette: 1-3 bold colors (CTAs, status, emphasis)
 - Neutrals are slightly desaturated, warm or cool based on brand intent
 - Accents are saturated enough to create clear contrast
 **Typography:**
 - Headlines: Emotional, attention-grabbing, UNEXPECTED (personality over pure legibility)
 - Body/UI: Functional, highly legible (clarity over expression)
 - 2-3 typefaces maximum, but make them CHARACTERFUL and distinctive
 - Clear mathematical scale (e.g., 1.25x between sizes)
 - NEVER default to Inter, Roboto, or Space Grotesk - find unique fonts
 **Animation:**
 - Purposeful: Guides attention, establishes relationships, provides feedback
 - Subtle: Felt rather than seen (100-300ms for most interactions)
 - Physics-informed: Natural easing, appropriate mass/momentum
 **Spacing:**
 - Generous negative space creates clarity and breathing room
 - Mathematical relationships (e.g., 4px base, 8/16/24/32/48px scale)
 - Consistent application creates visual rhythm
 ### Design Decision Checklist
 Before presenting any design, verify:
 1. **Purpose**: Does every element serve a clear function?
 2. **Hierarchy**: Is visual importance aligned with content importance?
 3. **Consistency**: Do similar elements look and behave similarly?
 4. **Accessibility**: Does it meet WCAG AA standards? (contrast, touch targets, keyboard nav)
 5. **Responsiveness**: Does it work on mobile, tablet, desktop?
 6. **Uniqueness**: Does this break from generic SaaS patterns?
 7. **Approval**: Have I asked before implementing colors, fonts, sizes, layouts?
 **Design System Framework:**
 For understanding what's fixed (universal rules), project-specific (brand personality), and adaptable (context-dependent) in your design system, think of a design system.
 ## Visual Design Standards
 ### Color & Contrast
 **Color System Architecture:**
 Every interface needs two color roles:
 1. **Base/Neutral Palette (4-5 colors):**
   - Backgrounds (lightest)
   - Surface colors (cards, inputs)
   - Borders and dividers
   - Text (darkest)
   - Use slightly desaturated, warm or cool greys based on brand
 2. **Accent Palette (1-3 colors):**
   - Primary action (CTA buttons)
   - Status indicators (success, warning, error, info)
   - Focus/hover states
   - Use saturated colors for clear contrast against neutrals
 **Palette Structure Example:**
 ```
 Neutrals: slate-50, slate-100, slate-300, slate-700, slate-900
 Accents: teal-500 (primary), amber-500 (warning), red-500 (error)
 ```
 **Color Application Rules:**
 - **Backgrounds**: Lightest neutral (slate-50 or white)
 - **Text**: Darkest neutral for primary text (slate-900), mid-tone for secondary (slate-600)
 - **Buttons (primary)**: Accent color with white text
 - **Buttons (secondary)**: Neutral with border and dark text
 - **Status indicators**: Specific accent (green=success, red=error, amber=warning, blue=info)
 - **Interactive states**:
  - Hover: Darken by 10-15% or shift hue slightly
  - Focus: Use ring/outline in accent color
  - Disabled: Reduce opacity to 40-50% and remove hover effects
 **Color Relationships:**
 Choose warm or cool intentionally based on brand:
 - **Warm greys** (beige/brown undertones): Organic, approachable, trustworthy
 - **Cool greys** (blue undertones): Modern, tech-forward, professional
 Accent colors should have clear contrast with both:
 - Light backgrounds (for buttons on white)
 - Dark text (if used as backgrounds for white text)
 **Intentional Color Usage:**
 - Every color must serve a purpose (hierarchy, function, status, or action)
 - Avoid decorative colors that don't communicate meaning
 - Maintain consistency: same color = same meaning throughout
 **Accessibility:**
 - Ensure sufficient contrast for color-blind users
 - Follow WCAG 2.1 AA: minimum 4.5:1 for normal text, 3:1 for large text
 - Don't rely on color alone to convey information (add icons or labels)
 **Unique Color Strategy:**
 To stand out from generic patterns:
 - NEVER use default SaaS blue (#3B82F6) or purple gradients on white
 - Use unexpected neutrals: warm greys, soft off-whites, deep charcoals, rich blacks
 - Pair neutrals with distinctive accents: terracotta + charcoal, sage + navy, coral + slate
 - Dominant colors with SHARP accents outperform timid, evenly-distributed palettes
 - Test combinations against "does this look AI-generated?" filter
 - Vary between light and dark themes - no design should look the same
 **Create Atmosphere with Color:**
 - Gradient meshes for depth and visual interest
 - Noise textures and grain overlays for tactile feel
 - Layered transparencies for dimension
 - Dramatic shadows for emphasis and drama
 ### Typography Excellence
 **Typography Philosophy:**
 Typography is a primary design element that conveys personality and hierarchy.
 **Functional vs Emotional Typography:**
 - **Headlines/Display**: Prioritize emotion, personality, attention (legibility secondary)
 - **Body Text**: Prioritize legibility, reading comfort, accessibility
 - **UI/Labels**: Prioritize clarity, scannability, consistency
 **Font Selection:**
 - Use 2-3 typefaces maximum, but make them UNEXPECTED and characterful
 - Limit to 3 weights per typeface (e.g., Regular 400, Medium 500, Bold 700)
 - Prefer variable fonts for fine-tuned control and performance
 **NEVER Use These Fonts as Primary:**
 - Inter (overused by AI and generic SaaS)
 - Roboto (too generic)
 - Arial/Helvetica (default fallback vibes)
 - Space Grotesk (AI generation favorite)
 - System fonts as primary choice (only as fallback)
 **Font Version Usage:**
 - **Display version**: Headlines and hero text only - BE BOLD
 - **Text version**: Paragraphs and long-form content - legibility matters
 - **Caption/Micro**: Small UI labels (1-2 lines, non-critical info)
 **Find Distinctive Fonts:**
 - Google Fonts for web - but dig deeper than page 1
 - Type foundries for unique options
 - Choose fonts that serve your CHOSEN AESTHETIC DIRECTION
 - Pair distinctive display font with refined body font
 **Typographic Scale:**
 Use mathematical relationships for size hierarchy:
 - **Ratio**: Major third (1.25x) for moderate contrast, Perfect fourth (1.333x) for dramatic
 - **Base size**: 16px (1rem) for body text
 - **Example scale (1.25x)**:
  ```
  xs:   0.64rem (10px)
  sm:   0.8rem  (13px)
  base: 1rem    (16px)
  lg:   1.25rem (20px)
  xl:   1.563rem (25px)
  2xl:  1.953rem (31px)
  3xl:  2.441rem (39px)
  4xl:  3.052rem (49px)
  5xl:  3.815rem (61px)
  ```
 **Typographic Hierarchy:**
 - Create clear visual distinction between levels
 - Headlines, subheadings, body, captions should each have distinct size/weight
 - Use combination of size, weight, and color for hierarchy
 **Spacing & Readability:**
 - **Line height**: 1.5x font size for body text (e.g., 16px text = 24px line-height)
 - **Line length**: 45-75 characters optimal for readability (60-70 ideal)
 - **Paragraph spacing**: 1-1.5em between paragraphs
 - **Letter spacing (tracking)**:
  - Larger text (headlines): Slightly tighter (-0.02em to -0.05em)
  - Normal text (body): Default (0)
  - Small text (captions): Slightly looser (+0.01em to +0.03em)
  - General rule: As size increases, reduce tracking; as size decreases, increase tracking
 **Font Pairing Logic:**
 When using multiple typefaces, create contrast through:
 - **Category contrast**: Serif + Sans-serif (classic, clear distinction)
 - **Weight contrast**: Light + Bold (dynamic, energetic)
 - **Personality contrast**: Geometric + Humanist (modern + warm)
 Examples:
 - Serif headlines + Sans body (editorial, trustworthy)
 - Display headlines + System body (distinctive + efficient)
 - Bold sans headlines + Light sans body (modern, clean)
 **UI Typography:**
 Specific guidance for interface elements:
 - **Button text**: Semi-Bold (600), 14-16px, consistent casing (all-caps OR title case)
 - **Form labels**: Regular (400), 14px, positioned above input
 - **Form input text**: Regular (400), 16px minimum (prevents iOS zoom on focus)
 - **Placeholder text**: Light (300) or desaturated color, same size as input
 - **Error messages**: Regular (400), 12-14px, color-coded (red-ish)
 **Responsive Typography:**
 Scale type sizes across breakpoints:
 ```tsx
 // Example with Tailwind
 <h1 className="text-3xl md:text-4xl lg:text-5xl">
  Responsive Headline
 </h1>
 // Or with CSS clamp (fluid)
 h1 {
  font-size: clamp(2rem, 5vw, 4rem);
 }
 ```
 Reduce sizes on mobile (20-30% smaller than desktop)
 Reduce hierarchy levels on small screens (fewer distinct sizes)
 ### Layout & Spatial Design
 **Compositional Balance:**
 - Every screen should feel balanced
 - Pay attention to visual weight and negative space
 - Use generous negative space to focus attention
 - Add sufficient margins and paddings for professional, spacious look
 **Grid Discipline:**
 - Maintain consistent underlying grid system
 - Create sense of order while allowing meaningful exceptions
 - Use grid/flex wrappers with `gap` for spacing
 - Prioritize wrappers over direct margins/padding on children
 **Spatial Relationships:**
 - Group related elements through proximity, alignment, and shared attributes
 - Use size, color, and spacing to highlight important elements
 - Guide user focus through visual hierarchy
 **Attention Guidance:**
 - Design interfaces that guide user attention effectively
 - Avoid cluttered interfaces where elements compete
 - Create clear paths through the content
 ## Interaction Design
 **Motion Specification:**
 For detailed motion specs, see MOTION-SPEC.md (easing curves, duration tables, state-specific animations, implementation patterns).
 ### User Experience Patterns
 **Core UX Principles:**
 1. **Direct Manipulation**
   - Users interact directly with content, not through abstract controls
   - Examples:
     - Drag & drop to reorder items (not up/down buttons)
     - Inline editing (click to edit, not separate form)
     - Sliders for ranges (not numeric input with +/-)
     - Pinch/zoom gestures on mobile (not +/- buttons)
 2. **Immediate Feedback**
   - Every interaction provides instantaneous visual feedback (within 100ms)
   - Types of feedback:
     - **Visual**: Button pressed state, hover effects, color changes
     - **Haptic**: Vibration on mobile (submit, error, success)
     - **Audio**: Subtle sounds for critical actions (optional, user-controlled)
     - **Loading**: Skeleton screens, spinners for >300ms operations
     - **Success**: Checkmarks, green highlights, toast notifications
     - **Error**: Red highlights, inline error messages, shake animations
 3. **Consistent Behavior**
   - Similar-looking elements behave similarly
   - Examples:
     - **Visual consistency**: All primary buttons have same colors, sizes, hover states
     - **Behavioral consistency**: All modals close via X button, ESC key, and outside click
     - **Interaction consistency**: All drag targets have same hover state and drop feedback
     - **Pattern consistency**: All forms validate on blur and submit
 4. **Forgiveness**
   - Make errors difficult, but recovery easy
   - **Prevention strategies**:
     - Disable invalid actions (grey out unavailable buttons)
     - Validate inputs inline (before submission)
     - Confirm destructive actions (delete, overwrite)
     - Auto-save in background (drafts, progress)
   - **Recovery strategies**:
     - Undo/redo for all state changes
     - Soft deletes (trash/archive before permanent delete)
     - Clear error messages with actionable fixes
     - Preserve user input on errors (don't clear forms)
 5. **Progressive Disclosure**
   - Reveal details as needed rather than overwhelming users
   - Levels of disclosure:
     - **Summary**: Show essential info by default (card title, price, rating)
     - **Details**: Expand to show more info (description, specs, reviews)
     - **Advanced**: Hide complex options behind "Advanced settings" toggle
   - Examples:
     - Accordion: Start collapsed, expand on click
     - Search filters: Show 3-5 common filters, hide rest behind "More filters"
     - Settings: Basic settings visible, advanced behind "Show advanced"
 **Modern UX Patterns:**
 1. **Conversational Interfaces**
   Prioritize natural language interaction where appropriate:
   **Four types:**
   - **Pure chat**: Full conversation (AI assistants, support bots)
   - **Command palette**: Text-based shortcuts (Cmd+K, search everywhere)
   - **Smart search**: Natural language queries (search "meetings next week" vs filtering)
   - **Form alternatives**: Conversational data collection ("What's your name?" vs form fields)
   **When to use:**
   - Complex searches with multiple variables
   - Task guidance (wizards, onboarding)
   - Contextual help
   - Quick actions (command palette)
   **When NOT to use:**
   - Simple forms (just use inputs)
   - Precise control interfaces (design tools, dashboards)
   - High-frequency repetitive tasks
 2. **Adaptive Layouts**
   Respond to user context automatically:
   - **Time-based**: Dark mode at night, light during day
   - **Device-based**: Simplified UI on mobile, full features on desktop
   - **Connection-based**: Reduce images/video on slow connections
   - **Usage-based**: Prioritize frequent actions, hide rarely-used features
   Examples:
   - Auto dark/light mode based on time or system preference
   - Simplified mobile navigation (hamburger menu) vs full desktop nav
   - Collapsed sidebar on small screens, expanded on large
 3. **Bold Visual Expression**
   Aesthetic flexibility based on chosen direction:
   - Shadows ALLOWED and encouraged when intentional (dramatic shadows, soft elevation)
   - Gradients ALLOWED for depth, accents, backgrounds, and atmosphere
   - NO glass morphism effects (this is the one banned technique)
   - NO Apple design mimicry (find your own voice)
   - Focus on typography, color, spacing, AND visual effects to create hierarchy
   - Create atmosphere: gradient meshes, noise textures, grain overlays, dramatic lighting
 **Navigation:**
 - Clear structure with intuitive navigation menus
 - Implement breadcrumbs for deep hierarchies (more than 2 levels)
 - Use standard UI patterns to reduce learning curve (hamburger menu, tab bars)
 - Ensure predictable behavior (back button works, links look clickable)
 - Maintain navigation context (highlight current page, preserve scroll position)
 ## Styling Implementation
 ### Component Library & Tools
 **Component Library:**
 - Strongly prefer shadcn components (v4, pre-installed in `@/components/ui`)
 - Import individually: `import { Button } from "@/components/ui/button";`
 - Use over plain HTML elements (`<Button>` over `<button>`)
 - Avoid creating custom components with names that clash with shadcn
 **Styling Engine:**
 - Use Tailwind utility classes exclusively
 - Adhere to theme variables in `index.css` via CSS custom properties
 - Map variables in `@theme` (see `tailwind.config.js`)
 - Use inline styles or CSS modules only when absolutely necessary
 **Icons:**
 - Use `@phosphor-icons/react` for buttons and inputs
 - Example: `import { Plus } from "@phosphor-icons/react"; <Plus />`
 - Use color for plain icon buttons
 - Don't override default `size` or `weight` unless requested
 **Notifications:**
 - Use `sonner` for toasts
 - Example: `import { toast } from 'sonner'`
 **Loading States:**
 - Always add loading states, spinners, placeholder animations
 - Use skeletons until content renders
 ### Layout Implementation
 **Spacing Strategy:**
 - Use grid/flex wrappers with `gap` for spacing
 - Prioritize wrappers over direct margins/padding on children
 - Nest wrappers as needed for complex layouts
 **Conditional Styling:**
 - Use ternary operators or clsx/classnames utilities
 - Example: `className={clsx('base-class', { 'active-class': isActive })}`
 ### Responsive Design
 **Fluid Layouts:**
 - Use relative units (%, em, rem) instead of fixed pixels
 - Implement CSS Grid and Flexbox for flexible layouts
 - Design mobile-first, then scale up
 **Media Queries:**
 - Use breakpoints based on content needs, not specific devices
 - Test across range of devices and orientations
 **Touch Targets:**
 - Minimum 44x44 pixels for interactive elements
 - Provide adequate spacing between touch targets
 - Consider hover states for desktop, focus states for touch/keyboard
 **Performance:**
 - Optimize assets for mobile networks
 - Use CSS animations over JavaScript
 - Implement lazy loading for images and videos
 ## Accessibility Standards
 **Core Requirements:**
 - Follow WCAG 2.1 AA guidelines
 - Ensure keyboard navigability for all interactive elements
 - Minimum touch target size: 44×44px
 - Use semantic HTML for screen reader compatibility
 - Provide alternative text for images and non-text content
 **Implementation Details:**
 - Use descriptive variable and function names
 - Event functions: prefix with "handle" (handleClick, handleKeyDown)
 - Add accessibility attributes:
  - `tabindex="0"` for custom interactive elements
  - `aria-label` for buttons without text
  - `role` attributes when semantic HTML isn't sufficient
 - Ensure logical tab order
 - Provide visible focus states
 ## Design Process & Testing
 ### Design Workflow
 1. **Understand Context:**
   - What problem are we solving?
   - Who are the users and when will they use this?
   - What are the success criteria?
 2. **Explore Options:**
   - Present 2-3 alternative approaches
   - Explain trade-offs of each option
   - Ask which direction resonates
 3. **Implement Iteratively:**
   - Start with structure and hierarchy
   - Add visual polish progressively
   - Test at each stage
 4. **Validate:**
   - Use playwright MCP to test visual changes
   - Check across different screen sizes
   - Verify accessibility
 ### Testing Checklist
 **Visual Testing:**
 - Use playwright MCP when available for automated testing
 - Check responsive behavior at common breakpoints
 - Verify touch targets on mobile
 - Test with different content lengths (short, long, edge cases)
 **Accessibility Testing:**
 - Test keyboard navigation
 - Verify screen reader compatibility
 - Check color contrast ratios
 - Ensure focus states are visible
 **Cross-Device Testing:**
 - Test on actual devices, not just emulators
 - Check different browsers (Chrome, Firefox, Safari)
 - Verify touch interactions on mobile
 - Test landscape and portrait orientations
 ## Examples
 ### Example 1: Designing a Button
 **Initial Question to Ask:**
 ```
 Before I implement this button, I have a few design questions:
 1. What's the primary action you want to emphasize?
 2. Do you have brand colors in mind, or should I suggest options?
 3. What emotion should this button convey? (urgent, calm, playful, professional)
 ```
 **After Getting Approval, Implementation:**
 ```tsx
 import { Button } from "@/components/ui/button";
 import { ArrowRight } from "@phosphor-icons/react";
 <Button
  className="bg-slate-800 hover:bg-slate-700 text-white px-6 py-3 rounded-lg transition-colors duration-200"
 >
  Get Started
  <ArrowRight className="ml-2" />
 </Button>
 ```
 ### Example 2: Typography Hierarchy
 **Question First:**
 ```
 For this content hierarchy, I'm thinking:
 - Headline: Large, bold, attention-grabbing
 - Subheading: Medium, regular weight
 - Body: Smaller, optimized for reading
 Should we go bold and contemporary, or subtle and refined?
 ```
 **Implementation After Approval:**
 ```tsx
 <div className="space-y-4">
  <h1 className="text-5xl font-bold tracking-tight text-slate-900">
    Headline Here
  </h1>
  <h2 className="text-2xl text-slate-600">
    Supporting subheading
  </h2>
  <p className="text-base leading-relaxed text-slate-700">
    Body text optimized for readability with proper line height.
  </p>
 </div>
 ```
 ### Example 3: Unique Color Palette Suggestion
 **Presenting Options:**
 ```
 I'd like to suggest three color directions that break from typical SaaS patterns:
 1. **Warm Earth Tones**
   - Base: Warm grey (#E8E2DC)
   - Accent: Terracotta (#C86E4B)
   - For: Organic, trustworthy feel
 2. **Cool Midnight**
   - Base: Deep navy (#1A2332)
   - Accent: Cyan (#4ECDC4)
   - For: Modern, tech-forward feel
 3. **Soft Pastels**
   - Base: Soft pink (#FFE5E5)
   - Accent: Sage green (#9DB5A4)
   - For: Calm, approachable feel
 Which direction feels right for your brand?
 ```
 ## Common Patterns to Avoid
 ❌ **NEVER:**
 - Use Inter, Roboto, Arial, Space Grotesk as primary fonts
 - Use generic SaaS blue (#3B82F6) or purple gradients on white
 - Copy Apple's design language or use glass morphism
 - Create cookie-cutter layouts that look AI-generated
 - Skip asking about context before designing
 - Converge on common choices across generations (vary everything!)
 - Use animations that delay user actions
 - Create cluttered interfaces where elements compete
 ✅ **ALWAYS:**
 - Ask about purpose, tone, constraints, differentiation FIRST
 - Then commit BOLDLY to a distinctive aesthetic direction
 - Use unexpected, characterful typography choices
 - Create atmosphere: shadows, gradients, textures, grain (when intentional)
 - Dominant colors with sharp accents (not timid, evenly-distributed palettes)
 - Provide immediate feedback for interactions
 - Test with real devices
 - Validate accessibility (it enables creativity, not limits it)
 - Remember: Claude is capable of extraordinary creative work - don't hold back!
 ## Version History
 - v2.0.0 (2025-11-22): Creative liberation update - bold aesthetics, shadows/gradients allowed, Design Thinking protocol
 - v1.0.0 (2025-10-18): Initial release with comprehensive UI/UX design guidance
 ## References
 For additional context, see:
 - **Anthropic Frontend Aesthetics Cookbook**: https://github.com/anthropics/claude-cookbooks/blob/main/coding/prompting_for_frontend_aesthetics.ipynb
 - WCAG 2.1 Guidelines: https://www.w3.org/WAI/WCAG21/quickref/
 - Google Fonts: https://fonts.google.com/
 - Tailwind CSS Docs: https://tailwindcss.com/docs
 - Shadcn UI Components: https://ui.shadcn.com/
 **Progressive Disclosure Files:**
 - ACCESSIBILITY.md - Accessibility essentials (WCAG AA baseline)
 - MOTION-SPEC.md - Animation timing and easing
 - RESPONSIVE-DESIGN.md - Mobile-first breakpoints and patterns
@@ -18,7 +18,7 @@ function SkipButton({ onSkip }: { onSkip: () => void }) {
    <button
      onClick={onSkip}
      aria-label="Skip intro animation"
-      className="fixed bottom-6 left-1/2 -translate-x-1/2 z-[100] px-4 py-1.5 text-xs tracking-widest uppercase font-mono border rounded transition-all duration-700 cursor-pointer select-none"
+      className="fixed bottom-6 left-1/2 -translate-x-1/2 z-[100] px-4 py-1.5 text-xs tracking-widest uppercase font-mono border rounded transition-all duration-700 cursor-pointer select-none focus:outline-none focus-visible:ring-2 focus-visible:ring-white/40"
      style={{
        color: '#555',
        borderColor: '#333',
@@ -51,6 +51,13 @@ function App() {
  return (
    <AccessibilityProvider>
      <div className="min-h-screen bg-black">
        {/* Screen reader announcement for PMR phase */}
        {phase === 'pmr' && (
          <div className="sr-only" role="status" aria-live="polite" aria-atomic="true">
            Patient Record for Charlwood, Andrew. Summary view.
          </div>
        )}
        {phase === 'boot' && (
          <BootSequence
            onComplete={() => setPhase('ecg')}
@@ -0,0 +1,96 @@
 import { ChevronRight } from 'lucide-react'
 import type { ViewId } from '../types/pmr'
 interface BreadcrumbProps {
  currentView: ViewId
  expandedItem?: {
    name: string
    type: string
  }
  onNavigateToView?: (view: ViewId) => void
  onCollapseItem?: () => void
 }
 const viewLabels: Record<ViewId, string> = {
  summary: 'Summary',
  consultations: 'Experience',
  medications: 'Skills',
  problems: 'Achievements',
  investigations: 'Projects',
  documents: 'Education',
  referrals: 'Contact',
 }
 export function Breadcrumb({
  currentView,
  expandedItem,
  onNavigateToView,
  onCollapseItem,
 }: BreadcrumbProps) {
  const handleNavigateToPatientRecord = () => {
    if (onNavigateToView) {
      onNavigateToView('summary')
    }
  }
  const handleNavigateToCurrentView = () => {
    if (onCollapseItem) {
      onCollapseItem()
    }
  }
  return (
    <nav
      className="flex items-center gap-2 mb-6"
      aria-label="Breadcrumb"
    >
      <ol className="flex items-center gap-2">
        {/* Patient Record (root) */}
        <li>
          <button
            type="button"
            onClick={handleNavigateToPatientRecord}
            className="text-[13px] font-ui font-normal text-gray-400 hover:text-pmr-nhsblue transition-colors"
          >
            Patient Record
          </button>
        </li>
        <li aria-hidden="true">
          <ChevronRight size={14} className="text-gray-300" />
        </li>
        {/* Current view */}
        <li>
          {expandedItem ? (
            <button
              type="button"
              onClick={handleNavigateToCurrentView}
              className="text-[13px] font-ui font-normal text-gray-400 hover:text-pmr-nhsblue transition-colors"
            >
              {viewLabels[currentView]}
            </button>
          ) : (
            <span className="text-[13px] font-ui font-normal text-gray-600" aria-current="page">
              {viewLabels[currentView]}
            </span>
          )}
        </li>
        {/* Expanded item (if any) */}
        {expandedItem && (
          <>
            <li aria-hidden="true">
              <ChevronRight size={14} className="text-gray-300" />
            </li>
            <li>
              <span className="text-[13px] font-ui font-normal text-gray-600" aria-current="page">
                {expandedItem.name}
              </span>
            </li>
          </>
        )}
      </ol>
    </nav>
  )
 }
@@ -12,6 +12,8 @@ import {
 } from 'lucide-react'
 import type { ViewId } from '../types/pmr'
 import { useAccessibility } from '../contexts/AccessibilityContext'
 import { buildSearchIndex, groupResultsBySection, type SearchResult } from '../lib/search'
 import type { FuseResult } from 'fuse.js'
 interface NavItem {
  id: ViewId
@@ -27,12 +29,12 @@ interface ClinicalSidebarProps {
 const navItems: NavItem[] = [
  { id: 'summary', label: 'Summary', icon: <ClipboardList size={18} /> },
-  { id: 'consultations', label: 'Consultations', icon: <FileText size={18} /> },
+  { id: 'consultations', label: 'Experience', icon: <FileText size={18} /> },
-  { id: 'medications', label: 'Medications', icon: <Pill size={18} /> },
+  { id: 'medications', label: 'Skills', icon: <Pill size={18} /> },
-  { id: 'problems', label: 'Problems', icon: <AlertTriangle size={18} /> },
+  { id: 'problems', label: 'Achievements', icon: <AlertTriangle size={18} /> },
-  { id: 'investigations', label: 'Investigations', icon: <FlaskConical size={18} /> },
+  { id: 'investigations', label: 'Projects', icon: <FlaskConical size={18} /> },
-  { id: 'documents', label: 'Documents', icon: <FolderOpen size={18} /> },
+  { id: 'documents', label: 'Education', icon: <FolderOpen size={18} /> },
-  { id: 'referrals', label: 'Referrals', icon: <Send size={18} /> },
+  { id: 'referrals', label: 'Contact', icon: <Send size={18} /> },
 ]
 function getCurrentTime(): string {
@@ -50,7 +52,10 @@ export function ClinicalSidebar({ activeView, onViewChange, isTablet = false }:
  const [focusedIndex, setFocusedIndex] = useState<number | null>(null)
  const [hoveredItem, setHoveredItem] = useState<ViewId | null>(null)
  const navButtonRefs = useRef<(HTMLButtonElement | null)[]>([])
-  const { focusAfterLoginRef } = useAccessibility()
+  const { focusAfterLoginRef, setExpandedItem } = useAccessibility()
  // Build search index once on mount
  const searchIndex = useMemo(() => buildSearchIndex(), [])
  const handleNavClick = useCallback(
    (view: ViewId) => {
@@ -94,6 +99,7 @@ export function ClinicalSidebar({ activeView, onViewChange, isTablet = false }:
    }
  }, [handleNavClick])
  // Update clock every minute
  useEffect(() => {
    const interval = setInterval(() => {
      setCurrentTime(getCurrentTime())
@@ -101,6 +107,7 @@ export function ClinicalSidebar({ activeView, onViewChange, isTablet = false }:
    return () => clearInterval(interval)
  }, [])
  // Hash routing
  useEffect(() => {
    const handleHashChange = () => {
      const hash = window.location.hash.slice(1) as ViewId
@@ -114,6 +121,7 @@ export function ClinicalSidebar({ activeView, onViewChange, isTablet = false }:
    return () => window.removeEventListener('hashchange', handleHashChange)
  }, [onViewChange])
  // Alt+1-7 keyboard shortcuts and "/" for search
  useEffect(() => {
    const handleKeyDown = (e: KeyboardEvent) => {
      if (e.altKey && e.key >= '1' && e.key <= '7') {
@@ -136,6 +144,7 @@ export function ClinicalSidebar({ activeView, onViewChange, isTablet = false }:
    return () => window.removeEventListener('keydown', handleKeyDown)
  }, [onViewChange, isSearchFocused])
  // Set focus-after-login ref to first nav button
  useEffect(() => {
    if (navButtonRefs.current[0]) {
      ;(focusAfterLoginRef as React.MutableRefObject<HTMLButtonElement | null>).current = navButtonRefs.current[0]
@@ -155,28 +164,50 @@ export function ClinicalSidebar({ activeView, onViewChange, isTablet = false }:
    searchInput?.focus()
  }
-  const filteredItems = useMemo(() => {
+  // Fuzzy search with fuse.js
-    if (!searchQuery.trim()) return []
+  const searchResults = useMemo(() => {
-    const query = searchQuery.toLowerCase()
+    if (!searchQuery.trim() || searchQuery.length < 2) return []
-    return navItems.filter(item =>
+    const results = searchIndex.search(searchQuery)
-      item.label.toLowerCase().includes(query)
+    return results.slice(0, 10) // Limit to top 10 results
-    )
+  }, [searchQuery, searchIndex])
  }, [searchQuery])
  // Group results by section for organized display
  const groupedResults = useMemo(() => {
    if (searchResults.length === 0) return new Map()
    return groupResultsBySection(searchResults)
  }, [searchResults])
  const handleSearchResultClick = useCallback(
    (result: FuseResult<SearchResult>) => {
      // Navigate to the section
      onViewChange(result.item.section)
      window.location.hash = result.item.section
      // Expand the matching item
      setExpandedItem(result.item.id)
      // Clear search
      setSearchQuery('')
    },
    [onViewChange, setExpandedItem]
  )
  // ── Tablet: 56px icon-only sidebar ──
  if (isTablet) {
    return (
-      <aside
+      <nav
        role="navigation"
        aria-label="Clinical record navigation"
-        className="hidden md:flex lg:hidden flex-col w-14 h-screen sticky top-0 bg-pmr-sidebar text-white"
+        className="hidden md:flex lg:hidden flex-col w-14 h-full bg-pmr-sidebar border-r border-[#334155] text-white"
      >
        {/* Header */}
        <div className="p-2 border-b border-white/10">
-          <div className="font-inter font-medium text-[10px] text-white/50 text-center leading-tight">
+          <div className="font-ui font-medium text-[10px] text-white/50 text-center leading-tight">
            PMR
          </div>
        </div>
-        <nav className="flex-1 py-2 overflow-y-auto">
+        {/* Navigation */}
        <div className="flex-1 py-2 overflow-y-auto">
          <ul role="menu" aria-label="Record sections">
            {navItems.map((item, index) => (
              <li key={item.id} role="none" className="relative">
@@ -196,17 +227,19 @@ export function ClinicalSidebar({ activeView, onViewChange, isTablet = false }:
                  onMouseLeave={() => setHoveredItem(null)}
                  className={`
                    w-full flex items-center justify-center h-11
-                    transition-colors relative
+                    transition-colors duration-150 relative
                    focus:outline-none focus-visible:ring-2 focus-visible:ring-pmr-nhsblue/40 focus-visible:ring-inset
                    ${activeView === item.id
-                      ? 'text-white bg-white/12 border-l-[3px] border-pmr-nhsblue'
+                      ? 'text-white bg-white/[0.12] border-l-[3px] border-pmr-nhsblue'
-                      : 'text-white/70 hover:text-white hover:bg-white/8'}
+                      : 'text-white/70 hover:text-white hover:bg-white/[0.08] border-l-[3px] border-transparent'}
                  `}
                >
-                  <span className={activeView === item.id ? 'text-white' : 'text-white/60'}>
+                  <span className={activeView === item.id ? 'text-white' : ''}>
                    {item.icon}
                  </span>
                  {/* Tooltip on hover */}
                  {hoveredItem === item.id && (
-                    <div className="absolute left-full ml-2 px-2 py-1 bg-gray-900 text-white text-xs rounded whitespace-nowrap z-50 font-inter">
+                    <div className="absolute left-full ml-2 px-2.5 py-1.5 bg-gray-900 text-white text-xs rounded whitespace-nowrap z-50 font-ui shadow-lg pointer-events-none">
                      {item.label}
                    </div>
                  )}
@@ -214,31 +247,34 @@ export function ClinicalSidebar({ activeView, onViewChange, isTablet = false }:
              </li>
            ))}
          </ul>
-        </nav>
+        </div>
        {/* Footer */}
        <div className="p-2 border-t border-white/10">
-          <div className="font-inter text-[9px] text-slate-400 text-center leading-relaxed">
+          <div className="font-ui text-[9px] text-[#64748B] text-center leading-relaxed">
            <div>A.C</div>
            <div>{currentTime}</div>
          </div>
        </div>
-      </aside>
+      </nav>
    )
  }
  // ── Desktop: 220px full sidebar ──
  return (
-    <aside
+    <nav
      role="navigation"
      aria-label="Clinical record navigation"
-      className="hidden lg:flex flex-col w-[220px] h-screen sticky top-0 bg-pmr-sidebar text-white"
+      className="hidden lg:flex flex-col w-[220px] h-full bg-pmr-sidebar border-r border-[#334155] text-white"
    >
      {/* Header branding */}
      <div className="p-4 border-b border-white/10">
-        <div className="font-inter font-medium text-[13px] text-white/50 leading-tight">
+        <div className="font-ui font-medium text-[13px] text-white/50 leading-tight">
          CareerRecord PMR
        </div>
-        <div className="font-inter text-[11px] text-white/40 mt-0.5">v1.0.0</div>
+        <div className="font-ui text-[11px] text-white/40 mt-0.5">v1.0.0</div>
      </div>
      {/* Search input */}
      <div className="p-3 border-b border-white/10">
        <div className="relative">
          <Search
@@ -247,14 +283,19 @@ export function ClinicalSidebar({ activeView, onViewChange, isTablet = false }:
          />
          <input
            id="sidebar-search"
-            type="text"
+            type="search"
            role="combobox"
            aria-label="Search record"
            aria-expanded={searchQuery.trim().length >= 2 && groupedResults.size > 0}
            aria-controls="search-results-listbox"
            aria-autocomplete="list"
            placeholder="Search record..."
            value={searchQuery}
            onChange={e => setSearchQuery(e.target.value)}
            onFocus={() => setIsSearchFocused(true)}
            onBlur={() => setIsSearchFocused(false)}
            onKeyDown={handleSearchKeyDown}
-            className="w-full h-9 pl-8 pr-7 bg-white/5 border border-white/10 rounded text-sm font-inter text-white placeholder-white/40 focus:outline-none focus:border-pmr-nhsblue focus:bg-white/10 transition-colors"
+            className="w-full h-9 pl-8 pr-7 bg-white/[0.05] border border-white/10 rounded text-sm font-ui text-white placeholder-white/40 focus:outline-none focus:border-pmr-nhsblue focus:bg-white/[0.10] transition-colors"
          />
          {searchQuery && (
            <button
@@ -266,28 +307,59 @@ export function ClinicalSidebar({ activeView, onViewChange, isTablet = false }:
              <X size={14} />
            </button>
          )}
-          {searchQuery && filteredItems.length > 0 && (
+          {/* Search results dropdown — grouped by section */}
-            <div className="absolute top-full left-0 right-0 mt-1 bg-pmr-sidebar border border-white/10 rounded overflow-hidden z-50">
+          {searchQuery.trim().length >= 2 && groupedResults.size > 0 && (
-              {filteredItems.map(item => (
+            <div
-                <button
+              id="search-results-listbox"
-                  key={item.id}
+              role="listbox"
-                  type="button"
+              aria-label="Search results"
-                  onClick={() => {
+              className="absolute top-full left-0 right-0 mt-1 bg-pmr-sidebar border border-white/10 rounded overflow-hidden z-50 max-h-[400px] overflow-y-auto shadow-lg"
-                    handleNavClick(item.id)
+            >
-                    setSearchQuery('')
+              {Array.from(groupedResults.entries()).map(([sectionLabel, results]) => {
-                  }}
+                // Find section icon
-                  className="w-full flex items-center gap-3 px-3 py-2.5 text-left hover:bg-white/10 transition-colors"
+                const navItem = navItems.find(item => item.label === sectionLabel)
-                >
+                return (
-                  <span className="text-white/60">{item.icon}</span>
+                  <div key={sectionLabel} role="group" aria-label={sectionLabel}>
-                  <span className="font-inter text-sm">{item.label}</span>
+                    {/* Section header */}
-                </button>
+                    <div className="px-3 py-1.5 bg-white/[0.05] border-b border-white/10">
-              ))}
+                      <div className="flex items-center gap-2">
                        {navItem && <span className="text-white/40" aria-hidden="true">{navItem.icon}</span>}
                        <span className="font-ui text-xs font-semibold uppercase tracking-wide text-white/50">
                          {sectionLabel}
                        </span>
                        <span className="font-ui text-xs text-white/30">
                          ({results.length})
                        </span>
                      </div>
                    </div>
                    {/* Results for this section */}
                    {results.map((result: FuseResult<SearchResult>) => (
                      <button
                        key={result.item.id}
                        type="button"
                        role="option"
                        aria-selected={false}
                        onClick={() => handleSearchResultClick(result)}
                        className="w-full px-3 py-2.5 text-left hover:bg-white/[0.10] transition-colors border-b border-white/5 last:border-b-0"
                      >
                        <div className="font-ui text-sm text-white leading-snug">
                          {result.item.title}
                        </div>
                        <div className="font-ui text-xs text-white/50 mt-0.5 line-clamp-1">
                          {result.item.highlight}
                        </div>
                      </button>
                    ))}
                  </div>
                )
              })}
            </div>
          )}
        </div>
      </div>
-      <nav className="flex-1 py-2 overflow-y-auto">
+      {/* Navigation items */}
      <div className="flex-1 py-2 overflow-y-auto">
        <ul role="menu" aria-label="Record sections">
          {navItems.map((item, index) => (
            <li key={item.id} role="none">
@@ -302,28 +374,33 @@ export function ClinicalSidebar({ activeView, onViewChange, isTablet = false }:
                aria-current={activeView === item.id ? 'page' : undefined}
                onClick={() => handleNavClick(item.id)}
                onKeyDown={e => handleNavKeyDown(e, index)}
-                className={`w-full flex items-center gap-3 h-11 px-4 text-left transition-colors ${
+                className={`
-                  activeView === item.id
+                  w-full flex items-center gap-3 h-[44px] px-4
-                    ? 'text-white bg-white/12 border-l-[3px] border-pmr-nhsblue font-semibold'
+                  font-ui text-[14px]
-                    : 'text-white/70 hover:text-white hover:bg-white/8'
+                  transition-colors duration-150
-                }`}
+                  focus:outline-none focus-visible:ring-2 focus-visible:ring-pmr-nhsblue/40 focus-visible:ring-inset
                  ${activeView === item.id
                    ? 'text-white bg-white/[0.12] border-l-[3px] border-pmr-nhsblue font-semibold'
                    : 'text-white/70 hover:text-white hover:bg-white/[0.08] border-l-[3px] border-transparent font-medium'}
                `}
              >
-                <span className={activeView === item.id ? 'text-white' : 'text-white/60'}>
+                <span className={`w-[18px] h-[18px] flex items-center justify-center ${activeView === item.id ? 'text-white' : 'text-white/60'}`}>
                  {item.icon}
                </span>
-                <span className="font-inter text-sm">{item.label}</span>
+                <span>{item.label}</span>
              </button>
            </li>
          ))}
        </ul>
-      </nav>
+      </div>
      {/* Footer: session info */}
      <div className="p-4 border-t border-white/10">
-        <div className="font-inter text-[11px] text-slate-400 leading-relaxed">
+        <div className="font-ui text-[11px] text-[#64748B] leading-relaxed">
          <div>Session: A.CHARLWOOD</div>
          <div>Logged in: {currentTime}</div>
        </div>
      </div>
-    </aside>
+    </nav>
  )
 }
@@ -30,6 +30,7 @@ export function LoginScreen({ onComplete }: LoginScreenProps) {
  const passwordIntervalRef = useRef<ReturnType<typeof setInterval> | null>(null)
  const cursorIntervalRef = useRef<ReturnType<typeof setInterval> | null>(null)
  const timeoutRefs = useRef<ReturnType<typeof setTimeout>[]>([])
  const loginButtonRef = useRef<HTMLButtonElement>(null)
  const addTimeout = useCallback((fn: () => void, delay: number) => {
    const id = setTimeout(fn, delay)
@@ -92,6 +93,13 @@ export function LoginScreen({ onComplete }: LoginScreenProps) {
    }, 80)
  }, [prefersReducedMotion, addTimeout])
  // Focus the login button when typing completes for keyboard accessibility
  useEffect(() => {
    if (typingComplete && loginButtonRef.current) {
      loginButtonRef.current.focus()
    }
  }, [typingComplete])
  useEffect(() => {
    // Cursor blink: 530ms interval
    cursorIntervalRef.current = setInterval(() => {
@@ -125,8 +133,9 @@ export function LoginScreen({ onComplete }: LoginScreenProps) {
    <div
      className="fixed inset-0 flex items-center justify-center z-50"
      style={{ backgroundColor: '#1E293B' }}
-      role="status"
+      role="dialog"
      aria-label="Clinical system login"
      aria-modal="true"
    >
      <motion.div
        className="bg-white"
@@ -273,10 +282,12 @@ export function LoginScreen({ onComplete }: LoginScreenProps) {
          {/* Log In Button — user clicks to proceed */}
          <button
            ref={loginButtonRef}
            onClick={handleLogin}
            disabled={!typingComplete}
            onMouseEnter={() => setButtonHovered(true)}
            onMouseLeave={() => setButtonHovered(false)}
            className="focus-visible:ring-2 focus-visible:ring-[#005EB8]/40 focus-visible:ring-offset-2 focus:outline-none"
            style={{
              width: '100%',
              padding: '10px 16px',
@@ -10,12 +10,12 @@ interface NavItem {
 const navItems: NavItem[] = [
  { id: 'summary', label: 'Summary', shortLabel: 'Summary', icon: <ClipboardList size={20} /> },
-  { id: 'consultations', label: 'Consultations', shortLabel: 'Consult', icon: <FileText size={20} /> },
+  { id: 'consultations', label: 'Experience', shortLabel: 'Exp', icon: <FileText size={20} /> },
-  { id: 'medications', label: 'Medications', shortLabel: 'Meds', icon: <Pill size={20} /> },
+  { id: 'medications', label: 'Skills', shortLabel: 'Skills', icon: <Pill size={20} /> },
-  { id: 'problems', label: 'Problems', shortLabel: 'Issues', icon: <AlertTriangle size={20} /> },
+  { id: 'problems', label: 'Achievements', shortLabel: 'Achieve', icon: <AlertTriangle size={20} /> },
-  { id: 'investigations', label: 'Investigations', shortLabel: 'Tests', icon: <FlaskConical size={20} /> },
+  { id: 'investigations', label: 'Projects', shortLabel: 'Projects', icon: <FlaskConical size={20} /> },
-  { id: 'documents', label: 'Documents', shortLabel: 'Docs', icon: <FolderOpen size={20} /> },
+  { id: 'documents', label: 'Education', shortLabel: 'Edu', icon: <FolderOpen size={20} /> },
-  { id: 'referrals', label: 'Referrals', shortLabel: 'Refer', icon: <Send size={20} /> },
+  { id: 'referrals', label: 'Contact', shortLabel: 'Contact', icon: <Send size={20} /> },
 ]
 interface MobileBottomNavProps {
@@ -56,7 +56,7 @@ export function MobileBottomNav({ activeView, onViewChange }: MobileBottomNavPro
                aria-label={item.label}
              >
                {item.icon}
-                <span className="text-[10px] mt-0.5 font-inter font-medium">
+                <span className="text-[10px] mt-0.5 font-ui font-medium">
                  {item.shortLabel}
                </span>
              </button>
@@ -1,10 +1,11 @@
-import { useState, useEffect, useRef, useMemo } from 'react'
+import { useState, useEffect, useRef, useMemo, useCallback } from 'react'
 import { motion, Variants } from 'framer-motion'
 import { Search, X, ArrowLeft } from 'lucide-react'
 import type { ViewId } from '../types/pmr'
 import { ClinicalSidebar } from './ClinicalSidebar'
 import { PatientBanner } from './PatientBanner'
 import { MobileBottomNav } from './MobileBottomNav'
 import { Breadcrumb } from './Breadcrumb'
 import { SummaryView } from './views/SummaryView'
 import { ConsultationsView } from './views/ConsultationsView'
 import { MedicationsView } from './views/MedicationsView'
@@ -14,6 +15,7 @@ import { DocumentsView } from './views/DocumentsView'
 import { ReferralsView } from './views/ReferralsView'
 import { useAccessibility } from '../contexts/AccessibilityContext'
 import { useBreakpoint } from '../hooks/useBreakpoint'
 import { useScrollCondensation } from '../hooks/useScrollCondensation'
 interface PMRInterfaceProps {
  children?: React.ReactNode
@@ -37,8 +39,13 @@ function PMRContent({ children }: PMRInterfaceProps) {
  const [mobileSearchQuery, setMobileSearchQuery] = useState('')
  const viewHeadingRef = useRef<HTMLDivElement>(null)
  const [scrollContainer, setScrollContainer] = useState<HTMLElement | null>(null)
  const scrollContainerCallbackRef = useCallback((node: HTMLElement | null) => {
    setScrollContainer(node)
  }, [])
  const { requestFocusAfterViewChange, expandedItemId, setExpandedItem } = useAccessibility()
  const { isMobile, isTablet } = useBreakpoint()
  const { isCondensed } = useScrollCondensation({ threshold: 100, scrollContainer })
  const prefersReducedMotion = typeof window !== 'undefined' 
    ? window.matchMedia('(prefers-reduced-motion: reduce)').matches 
@@ -124,11 +131,11 @@ function PMRContent({ children }: PMRInterfaceProps) {
        return <ReferralsView />
      default:
        return (
-          <div className="bg-white border border-gray-200 rounded p-6">
+          <div className="bg-white border border-gray-200 rounded p-6 shadow-pmr">
-            <h1 className="font-inter font-semibold text-lg text-gray-900 capitalize">
+            <h1 className="font-ui font-semibold text-lg text-gray-900 capitalize">
              {activeView} View
            </h1>
-            <p className="font-inter text-sm text-gray-500 mt-2">
+            <p className="font-ui text-sm text-gray-500 mt-2">
              Content for {activeView} will be implemented in a separate task.
            </p>
          </div>
@@ -137,42 +144,45 @@ function PMRContent({ children }: PMRInterfaceProps) {
  }
  const viewLabels: Record<ViewId, string> = {
-    summary: 'Patient Summary',
+    summary: 'Summary',
-    consultations: 'Consultation History',
+    consultations: 'Experience',
-    medications: 'Current Medications',
+    medications: 'Skills',
-    problems: 'Problem List',
+    problems: 'Achievements',
-    investigations: 'Investigation Results',
+    investigations: 'Projects',
-    documents: 'Attached Documents',
+    documents: 'Education',
-    referrals: 'Referral Form',
+    referrals: 'Contact',
  }
  return (
-    <motion.div 
+    <motion.div
-      className="min-h-screen bg-pmr-content"
+      className="flex h-screen overflow-hidden bg-pmr-content"
      initial="hidden"
      animate="visible"
    >
-      <motion.div variants={bannerVariants}>
+      {/* Fixed sidebar */}
-        <PatientBanner isMobile={isMobile} isTablet={isTablet} />
+      {!isMobile && (
-      </motion.div>
+        <motion.div variants={sidebarVariants} className="flex-shrink-0">
-      <div className="flex">
+          <ClinicalSidebar
-        {!isMobile && (
+            activeView={activeView}
-          <motion.div variants={sidebarVariants}>
+            onViewChange={handleViewChange}
-            <ClinicalSidebar 
+            isTablet={isTablet}
-              activeView={activeView} 
+          />
-              onViewChange={handleViewChange}
+        </motion.div>
-              isTablet={isTablet}
+      )}
-            />
+
-          </motion.div>
+      {/* Main content column: banner (fixed) + scrollable content */}
-        )}
+      <div className="flex-1 flex flex-col min-w-0">
        <motion.div variants={bannerVariants} className="flex-shrink-0">
          <PatientBanner isMobile={isMobile} isTablet={isTablet} isCondensed={isCondensed} />
        </motion.div>
        <motion.main
          ref={scrollContainerCallbackRef}
          variants={contentVariants}
-          role="main"
+          aria-label={`${viewLabels[activeView]} view`}
          aria-label={`${activeView} view`}
          className={`
-            flex-1 p-4 md:p-6
+            flex-1 overflow-y-auto p-4 md:p-6
            ${isMobile ? 'pb-20' : ''}
            ${isTablet ? 'min-h-[calc(100vh-48px)]' : 'min-h-[calc(100vh-80px)]'}
          `}
        >
          {isMobile && (
@@ -181,7 +191,7 @@ function PMRContent({ children }: PMRInterfaceProps) {
              onChange={setMobileSearchQuery}
            />
          )}
-          
+
          <div
            ref={viewHeadingRef}
            tabIndex={-1}
@@ -190,26 +200,41 @@ function PMRContent({ children }: PMRInterfaceProps) {
          >
            <h1 className="sr-only">{viewLabels[activeView]}</h1>
          </div>
-          
+
          {/* Breadcrumb (desktop/tablet only) */}
          {!isMobile && (
            <Breadcrumb
              currentView={activeView}
              expandedItem={
                expandedItemId
                  ? { name: expandedItemId, type: activeView }
                  : undefined
              }
              onNavigateToView={handleNavigate}
              onCollapseItem={() => setExpandedItem(null)}
            />
          )}
          {/* Mobile back button (mobile only) */}
          {isMobile && activeView !== 'summary' && (
            <button
              type="button"
              onClick={handleBackToSummary}
-              className="flex items-center gap-1 text-pmr-nhsblue text-sm font-inter font-medium mb-4 hover:underline"
+              className="flex items-center gap-1 text-pmr-nhsblue text-sm font-ui font-medium mb-4 hover:underline"
            >
              <ArrowLeft size={14} />
              Back to Summary
            </button>
          )}
-          
+
          {children || renderView()}
        </motion.main>
      </div>
-      
+
      {isMobile && (
        <motion.div variants={mobileNavVariants}>
-          <MobileBottomNav 
+          <MobileBottomNav
-            activeView={activeView} 
+            activeView={activeView}
            onViewChange={handleViewChange}
          />
        </motion.div>
@@ -232,11 +257,12 @@ function MobileSearchBar({ query, onChange }: MobileSearchBarProps) {
          className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 pointer-events-none"
        />
        <input
-          type="text"
+          type="search"
          aria-label="Search record"
          placeholder="Search record..."
          value={query}
          onChange={e => onChange(e.target.value)}
-          className="w-full h-10 pl-10 pr-10 bg-white border border-gray-200 rounded text-sm font-inter text-gray-900 placeholder-gray-400 focus:outline-none focus:border-pmr-nhsblue focus:ring-1 focus:ring-pmr-nhsblue/20 transition-colors"
+          className="w-full h-10 pl-10 pr-10 bg-white border border-gray-200 rounded text-sm font-ui text-gray-900 placeholder-gray-400 focus:outline-none focus:border-pmr-nhsblue focus:ring-1 focus:ring-pmr-nhsblue/20 transition-colors"
        />
        {query && (
          <button
@@ -2,79 +2,61 @@ import { Download, Mail, Linkedin, MoreHorizontal } from 'lucide-react'
 import { useState, useRef, useEffect, useCallback } from 'react'
 import { motion, AnimatePresence } from 'framer-motion'
 import { patient } from '@/data/patient'
 import { useScrollCondensation } from '@/hooks/useScrollCondensation'
 interface PatientBannerProps {
  isMobile?: boolean
  isTablet?: boolean
  isCondensed?: boolean
 }
-export function PatientBanner({ isMobile = false, isTablet = false }: PatientBannerProps) {
+export function PatientBanner({ isMobile = false, isTablet = false, isCondensed = false }: PatientBannerProps) {
  const { isCondensed, sentinelRef } = useScrollCondensation({ threshold: 100 })
  const prefersReducedMotion = typeof window !== 'undefined'
    ? window.matchMedia('(prefers-reduced-motion: reduce)').matches
    : false
  if (isMobile) {
-    return (
+    return <MobileBanner />
      <>
        <div
          ref={sentinelRef}
          className="h-0 w-full absolute top-0"
          aria-hidden="true"
        />
        <MobileBanner />
      </>
    )
  }
  const shouldCondense = isTablet || isCondensed
  return (
-    <>
+    <header
-      <div
+      className={`
-        ref={sentinelRef}
+        w-full z-40
-        className="h-0 w-full absolute top-0"
+        bg-pmr-banner border-b border-slate-600
-        aria-hidden="true"
+        shadow-pmr-banner
-      />
+        transition-all duration-200 ease-out
-      <header
+        ${shouldCondense ? 'h-12' : 'h-20'}
-        className={`
+      `}
-          sticky top-0 z-40 w-full
+      role="banner"
-          bg-pmr-banner border-b border-slate-600
+    >
-          shadow-pmr-banner
+      <AnimatePresence mode="wait" initial={false}>
-          transition-all duration-200 ease-out
+        {shouldCondense ? (
-          ${shouldCondense ? 'h-12' : 'h-20'}
+          <motion.div
-        `}
+            key="condensed"
-        role="banner"
+            initial={prefersReducedMotion ? false : { opacity: 0 }}
-      >
+            animate={{ opacity: 1 }}
-        <AnimatePresence mode="wait" initial={false}>
+            exit={prefersReducedMotion ? undefined : { opacity: 0 }}
-          {shouldCondense ? (
+            transition={{ duration: 0.15 }}
-            <motion.div
+            className="h-full"
-              key="condensed"
+          >
-              initial={prefersReducedMotion ? false : { opacity: 0 }}
+            <CondensedBanner />
-              animate={{ opacity: 1 }}
+          </motion.div>
-              exit={prefersReducedMotion ? undefined : { opacity: 0 }}
+        ) : (
-              transition={{ duration: 0.15 }}
+          <motion.div
-              className="h-full"
+            key="full"
-            >
+            initial={prefersReducedMotion ? false : { opacity: 0 }}
-              <CondensedBanner />
+            animate={{ opacity: 1 }}
-            </motion.div>
+            exit={prefersReducedMotion ? undefined : { opacity: 0 }}
-          ) : (
+            transition={{ duration: 0.15 }}
-            <motion.div
+            className="h-full"
-              key="full"
+          >
-              initial={prefersReducedMotion ? false : { opacity: 0 }}
+            <FullBanner />
-              animate={{ opacity: 1 }}
+          </motion.div>
-              exit={prefersReducedMotion ? undefined : { opacity: 0 }}
+        )}
-              transition={{ duration: 0.15 }}
+      </AnimatePresence>
-              className="h-full"
+    </header>
            >
              <FullBanner />
            </motion.div>
          )}
        </AnimatePresence>
      </header>
    </>
  )
 }
@@ -97,7 +79,7 @@ function MobileBanner() {
  return (
    <header
-      className="sticky top-0 z-40 w-full h-12 bg-pmr-banner border-b border-slate-600 shadow-pmr-banner"
+      className="w-full z-40 h-12 bg-pmr-banner border-b border-slate-600 shadow-pmr-banner"
      role="banner"
    >
      <div className="h-full px-3 flex items-center justify-between gap-2">
@@ -348,6 +330,7 @@ function StatusDot({ status }: StatusDotProps) {
  return (
    <span
      className={`w-2 h-2 rounded-full ${colorClass} flex-shrink-0`}
      role="img"
      aria-label={`Status: ${status}`}
    />
  )
@@ -386,7 +369,7 @@ function ActionButton({ icon, label, href, external, compact }: ActionButtonProp
        transition-colors duration-150
        rounded
        font-ui font-medium
-        focus:outline-none focus:ring-2 focus:ring-pmr-nhsblue/40 focus:ring-offset-1 focus:ring-offset-pmr-banner
+        focus:outline-none focus-visible:ring-2 focus-visible:ring-pmr-nhsblue/40 focus-visible:ring-offset-1 focus-visible:ring-offset-pmr-banner
        ${compact ? 'px-2 py-1 text-xs' : 'px-3 py-1.5 text-sm'}
      `}
    >
@@ -1,8 +1,11 @@
-import { useState, useRef, useEffect } from 'react'
+import { useState } from 'react'
 import { motion, AnimatePresence } from 'framer-motion'
 import { ChevronDown } from 'lucide-react'
 import { consultations } from '@/data/consultations'
 import type { Consultation, ViewId } from '@/types/pmr'
 // ─── Props ──────────────────────────────────────────────────────────────────
 interface ConsultationsViewProps {
  onNavigate?: (view: ViewId, itemId?: string) => void
  initialExpandedId?: string
@@ -10,6 +13,7 @@ interface ConsultationsViewProps {
 export function ConsultationsView({ initialExpandedId }: ConsultationsViewProps) {
  const [expandedId, setExpandedId] = useState<string | null>(initialExpandedId ?? null)
  const prefersReducedMotion = typeof window !== 'undefined'
    ? window.matchMedia('(prefers-reduced-motion: reduce)').matches
    : false
@@ -21,10 +25,10 @@ export function ConsultationsView({ initialExpandedId }: ConsultationsViewProps)
  return (
    <div className="space-y-4">
      <div className="flex items-center justify-between">
-        <h1 className="font-inter font-semibold text-lg text-gray-900">
+        <h1 className="font-ui font-semibold text-[18px] text-gray-900">
-          Consultation History
+          Consultation Journal
        </h1>
-        <span className="font-geist text-xs text-gray-500">
+        <span className="font-geist text-[12px] text-gray-500">
          {consultations.length} entries
        </span>
      </div>
@@ -44,6 +48,8 @@ export function ConsultationsView({ initialExpandedId }: ConsultationsViewProps)
  )
 }
 // ─── Consultation Entry ─────────────────────────────────────────────────────
 interface ConsultationEntryProps {
  consultation: Consultation
  isExpanded: boolean
@@ -57,168 +63,159 @@ function ConsultationEntry({
  onToggle,
  prefersReducedMotion,
 }: ConsultationEntryProps) {
  const contentRef = useRef<HTMLDivElement>(null)
  const expandedContentRef = useRef<HTMLDivElement>(null)
  const [height, setHeight] = useState<number | undefined>(isExpanded ? undefined : 0)
  useEffect(() => {
    if (prefersReducedMotion) {
      setHeight(isExpanded ? undefined : 0)
      return
    }
    if (isExpanded) {
      const timer = setTimeout(() => {
        setHeight(undefined)
      }, 200)
      return () => clearTimeout(timer)
    }
    setHeight(0)
  }, [isExpanded, prefersReducedMotion])
  useEffect(() => {
    if (isExpanded && expandedContentRef.current) {
      expandedContentRef.current.focus()
    }
  }, [isExpanded])
  const keyCodedEntry = consultation.codedEntries[0]
  return (
-    <div
+    <article
-      className="bg-white border border-gray-200 rounded overflow-hidden"
+      className="bg-white border border-[#E5E7EB] rounded shadow-pmr overflow-hidden"
      style={{ borderLeftWidth: '3px', borderLeftColor: consultation.orgColor }}
    >
      {/* Collapsed header — always visible */}
      <button
        type="button"
        onClick={onToggle}
-        className="w-full px-4 py-3 flex items-start gap-3 text-left hover:bg-gray-50 transition-colors duration-100"
+        className="w-full px-4 py-3 flex items-start gap-3 text-left hover:bg-[#EFF6FF] transition-colors duration-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-pmr-nhsblue/40 focus-visible:ring-inset"
        aria-expanded={isExpanded}
        aria-label={`${consultation.role} at ${consultation.organization}, ${consultation.date}`}
      >
        <StatusDot isCurrent={consultation.isCurrent} />
        <div className="flex-1 min-w-0">
          <div className="flex items-center gap-2 flex-wrap">
-            <span className="font-geist text-sm text-gray-500">{consultation.date}</span>
+            <span className="font-geist text-[13px] text-gray-500">
              {consultation.date}
            </span>
            <span className="text-gray-300">|</span>
            <span
-              className="font-inter text-sm"
+              className="font-ui text-[13px]"
              style={{ color: consultation.orgColor }}
            >
              {consultation.organization}
            </span>
          </div>
-          <h3 className="font-inter font-semibold text-base text-gray-900 mt-1">
+
          <h3 className="font-ui font-semibold text-[15px] text-gray-900 mt-1">
            {consultation.role}
          </h3>
          {!isExpanded && keyCodedEntry && (
-            <p className="font-inter text-sm text-gray-500 mt-1 line-clamp-1">
+            <p className="font-ui text-[13px] text-gray-500 mt-1 line-clamp-1">
-              <span className="text-gray-400">Key:</span>{' '}
+              <span className="font-medium text-gray-400">Key:</span>{' '}
-              <span className="font-geist text-xs text-gray-400">
+              <span className="font-geist text-[12px] text-gray-400">
                [{keyCodedEntry.code}]
              </span>{' '}
              {keyCodedEntry.description}
            </p>
          )}
        </div>
-        <ChevronDown
+
-          size={18}
+        <motion.div
-          className={`
+          animate={{ rotate: isExpanded ? 180 : 0 }}
-            flex-shrink-0 text-gray-400 transition-transform duration-200 mt-1
+          transition={{ duration: prefersReducedMotion ? 0 : 0.2 }}
-            ${isExpanded ? 'rotate-180' : ''}
+          className="flex-shrink-0 mt-1"
-          `}
+        >
-        />
+          <ChevronDown size={18} className="text-gray-400" />
        </motion.div>
      </button>
-      <div
+      {/* Expandable content — height-only animation, NO opacity fade */}
-        ref={contentRef}
+      <AnimatePresence initial={false}>
        style={{
          height: height !== undefined ? `${height}px` : 'auto',
          transition: prefersReducedMotion ? 'none' : 'height 200ms ease-out',
          overflow: 'hidden',
        }}
      >
        {isExpanded && (
-          <ExpandedContent
+          <motion.div
-            consultation={consultation}
+            key="expanded"
-            prefersReducedMotion={prefersReducedMotion}
+            initial={{ height: 0 }}
-            contentRef={expandedContentRef}
+            animate={{ height: 'auto' }}
-          />
+            exit={{ height: 0 }}
            transition={{
              duration: prefersReducedMotion ? 0 : 0.2,
              ease: 'easeOut',
            }}
            className="overflow-hidden"
          >
            <ExpandedContent consultation={consultation} />
          </motion.div>
        )}
-      </div>
+      </AnimatePresence>
-    </div>
+    </article>
  )
 }
 // ─── Status Dot ─────────────────────────────────────────────────────────────
 interface StatusDotProps {
  isCurrent: boolean
 }
 function StatusDot({ isCurrent }: StatusDotProps) {
  return (
-    <span className="flex-shrink-0 mt-1.5">
+    <span
      className="flex-shrink-0 mt-1.5"
      aria-label={isCurrent ? 'Current role' : 'Historical role'}
    >
      <span
-        className={`
+        className={`block w-2 h-2 rounded-full ${
-          block w-2 h-2 rounded-full
+          isCurrent ? 'bg-green-500' : 'bg-gray-400'
-          ${isCurrent ? 'bg-green-500' : 'bg-gray-400'}
+        }`}
        `}
        aria-label={isCurrent ? 'Current role' : 'Historical role'}
      />
    </span>
  )
 }
 // ─── Expanded Content ───────────────────────────────────────────────────────
 interface ExpandedContentProps {
  consultation: Consultation
  prefersReducedMotion: boolean
  contentRef: React.RefObject<HTMLDivElement>
 }
-function ExpandedContent({ consultation, prefersReducedMotion, contentRef }: ExpandedContentProps) {
+function ExpandedContent({ consultation }: ExpandedContentProps) {
  const opacity = prefersReducedMotion ? 1 : undefined
  const transition = prefersReducedMotion ? 'none' : 'opacity 150ms ease-out'
  return (
-    <div
+    <div className="px-4 pb-4">
-      ref={contentRef}
+      <div className="pl-5 border-l border-[#E5E7EB] ml-1">
-      tabIndex={-1}
+        {/* Duration */}
      className="px-4 pb-4 outline-none"
      style={{ opacity, transition }}
    >
      <div className="pl-5 border-l border-gray-200 ml-1">
        <div className="mb-4">
-          <span className="font-inter text-sm text-gray-500">Duration: </span>
+          <span className="font-ui text-[13px] text-gray-500">Duration: </span>
-          <span className="font-geist text-sm text-gray-700">{consultation.duration}</span>
+          <span className="font-geist text-[13px] text-gray-700">
            {consultation.duration}
          </span>
        </div>
        {/* HISTORY */}
        <SectionHeader>HISTORY</SectionHeader>
-        <p className="font-inter text-sm text-gray-700 leading-relaxed mb-4">
+        <p className="font-ui text-[13px] text-gray-700 leading-relaxed mb-4">
          {consultation.history}
        </p>
        {/* EXAMINATION */}
        <SectionHeader>EXAMINATION</SectionHeader>
        <ul className="space-y-1.5 mb-4">
          {consultation.examination.map((item, index) => (
-            <li key={index} className="flex gap-2 text-sm">
+            <li key={index} className="flex gap-2 text-[13px]">
              <span className="text-gray-300 flex-shrink-0">-</span>
-              <span className="font-inter text-gray-700">{item}</span>
+              <span className="font-ui text-gray-700">{item}</span>
            </li>
          ))}
        </ul>
        {/* PLAN */}
        <SectionHeader>PLAN</SectionHeader>
        <ul className="space-y-1.5 mb-4">
          {consultation.plan.map((item, index) => (
-            <li key={index} className="flex gap-2 text-sm">
+            <li key={index} className="flex gap-2 text-[13px]">
              <span className="text-gray-300 flex-shrink-0">-</span>
-              <span className="font-inter text-gray-700">{item}</span>
+              <span className="font-ui text-gray-700">{item}</span>
            </li>
          ))}
        </ul>
        {/* CODED ENTRIES */}
        <SectionHeader>CODED ENTRIES</SectionHeader>
        <div className="space-y-1">
          {consultation.codedEntries.map(entry => (
-            <CodedEntry key={entry.code} code={entry.code} description={entry.description} />
+            <CodedEntry
              key={entry.code}
              code={entry.code}
              description={entry.description}
            />
          ))}
        </div>
      </div>
@@ -226,14 +223,18 @@ function ExpandedContent({ consultation, prefersReducedMotion, contentRef }: Exp
  )
 }
 // ─── Section Header ─────────────────────────────────────────────────────────
 function SectionHeader({ children }: { children: React.ReactNode }) {
  return (
-    <h4 className="font-inter font-semibold text-xs uppercase tracking-wider text-gray-400 mb-2">
+    <h4 className="font-ui font-semibold text-[12px] uppercase tracking-[0.05em] text-gray-400 mb-2">
      {children}
    </h4>
  )
 }
 // ─── Coded Entry ────────────────────────────────────────────────────────────
 interface CodedEntryProps {
  code: string
  description: string
@@ -241,11 +242,8 @@ interface CodedEntryProps {
 function CodedEntry({ code, description }: CodedEntryProps) {
  return (
-    <div className="flex items-start gap-2 text-sm">
+    <div className="font-geist text-[12px] text-gray-500">
-      <span className="font-geist text-xs text-gray-400 flex-shrink-0">
+      [{code}] {description}
        [{code}]
      </span>
      <span className="font-inter text-gray-600">{description}</span>
    </div>
  )
 }
@@ -1,144 +1,170 @@
-import { useState, useEffect, useRef } from 'react'
+import { useState, useCallback } from 'react'
-import { ChevronDown, ChevronUp, FileText, Award, GraduationCap, FlaskConical } from 'lucide-react'
+import { motion, AnimatePresence } from 'framer-motion'
 import { ChevronDown, FileText, Award, GraduationCap, FlaskConical } from 'lucide-react'
 import { documents } from '@/data/documents'
 import type { Document, DocumentType } from '@/types/pmr'
 import { useBreakpoint } from '@/hooks/useBreakpoint'
 import { useAccessibility } from '@/contexts/AccessibilityContext'
 const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches
 const documentIcons: Record<DocumentType, React.FC<{ className?: string }>> = {
  Certificate: FileText,
  Registration: Award,
  Results: GraduationCap,
  Research: FlaskConical,
 }
 function DocumentTypeIcon({ type }: { type: DocumentType }) {
-  const iconMap: Record<DocumentType, React.ReactNode> = {
+  const Icon = documentIcons[type]
    Certificate: <FileText className="w-4 h-4 text-gray-500" />,
    Registration: <Award className="w-4 h-4 text-gray-500" />,
    Results: <GraduationCap className="w-4 h-4 text-gray-500" />,
    Research: <FlaskConical className="w-4 h-4 text-gray-500" />,
  }
  return (
    <div className="flex items-center justify-center">
-      {iconMap[type]}
+      <Icon className="w-4 h-4 text-gray-500" />
    </div>
  )
 }
 const documentBorderColors: Record<DocumentType, string> = {
  Certificate: '#005EB8',
  Registration: '#10B981',
  Results: '#6366F1',
  Research: '#8B5CF6',
 }
 interface TreeLineProps {
  label: string
  value: React.ReactNode
  isLast?: boolean
 }
 function TreeLine({ label, value, isLast = false }: TreeLineProps) {
  return (
    <div className="flex">
      <span className="text-gray-400 select-none">{isLast ? '└─ ' : '├─ '}</span>
      <span className="text-gray-500 shrink-0 min-w-[160px]">{label}:</span>
      <span className="ml-2 flex-1">{value}</span>
    </div>
  )
 }
 function DocumentRow({
-  document,
+  document: doc,
  isExpanded,
  onToggle,
  index,
 }: {
  document: Document
  isExpanded: boolean
  onToggle: () => void
  index: number
 }) {
-  const contentRef = useRef<HTMLDivElement>(null)
+  const fields: Array<{ label: string; value: React.ReactNode }> = [
-  const [contentHeight, setContentHeight] = useState<number | undefined>(undefined)
+    { label: 'Type', value: doc.type },
-  const prefersReducedMotion = useRef(
+    { label: 'Date Awarded', value: doc.date },
-    window.matchMedia('(prefers-reduced-motion: reduce)').matches
+  ]
  ).current
-  useEffect(() => {
+  if (doc.institution) fields.push({ label: 'Institution', value: doc.institution })
-    if (contentRef.current) {
+  if (doc.classification) fields.push({ label: 'Classification', value: doc.classification })
-      setContentHeight(contentRef.current.scrollHeight)
+  if (doc.duration) fields.push({ label: 'Duration', value: doc.duration })
-    }
+  if (doc.researchDetail) {
-  }, [isExpanded])
+    fields.push({
      label: 'Research',
      value: (
        <>
          {doc.researchDetail}
          {doc.researchGrade && (
            <>
              <br />
              <span className="text-gray-500">Grade: {doc.researchGrade}</span>
            </>
          )}
        </>
      ),
    })
  }
  if (doc.notes) fields.push({ label: 'Notes', value: <span className="text-gray-600">{doc.notes}</span> })
  return (
    <>
      <tr
-        className={`cursor-pointer hover:bg-blue-50 transition-colors ${
+        className={`cursor-pointer transition-colors h-[40px] ${
-          isExpanded ? 'bg-blue-50' : ''
+          isExpanded ? 'bg-[#EFF6FF]' : index % 2 === 0 ? 'bg-white' : 'bg-[#F9FAFB]'
-        }`}
+        } hover:bg-[#EFF6FF]`}
        onClick={onToggle}
        tabIndex={0}
        role="button"
        aria-expanded={isExpanded}
        aria-label={`${doc.title} — ${doc.type}, ${doc.date}`}
        onKeyDown={(e) => {
          if (e.key === 'Enter' || e.key === ' ') {
            e.preventDefault()
            onToggle()
          }
        }}
      >
-        <td className="border border-gray-200 px-3 py-2.5 w-12">
+        <td className="border-b border-r border-[#E5E7EB] px-3 py-2 w-12">
-          <DocumentTypeIcon type={document.type} />
+          <DocumentTypeIcon type={doc.type} />
        </td>
-        <td className="border border-gray-200 px-3 py-2.5">
+        <td className="border-b border-r border-[#E5E7EB] px-3 py-2">
-          <span className="text-sm text-gray-900">{document.title}</span>
+          <div className="flex items-center gap-2">
-        </td>
+            <motion.div
-        <td className="border border-gray-200 px-3 py-2.5">
+              animate={{ rotate: isExpanded ? 180 : 0 }}
-          <span className="font-mono text-xs text-gray-500">{document.date}</span>
+              transition={{ duration: prefersReducedMotion ? 0 : 0.2 }}
-        </td>
+            >
        <td className="border border-gray-200 px-3 py-2.5">
          <span className="text-sm text-gray-700">{document.source}</span>
        </td>
        <td className="border border-gray-200 px-3 py-2.5 w-10">
          <button
            className="p-1 hover:bg-gray-100 rounded transition-colors"
            aria-label={isExpanded ? 'Collapse' : 'Expand'}
          >
            {isExpanded ? (
              <ChevronUp className="w-4 h-4 text-gray-400" />
            ) : (
              <ChevronDown className="w-4 h-4 text-gray-400" />
-            )}
+            </motion.div>
-          </button>
+            <span className="font-ui text-[14px] text-gray-900">{doc.title}</span>
        </td>
      </tr>
      <tr>
        <td colSpan={5} className="p-0 border border-gray-200">
          <div
            style={{
              height: isExpanded ? contentHeight : 0,
              overflow: 'hidden',
              transition: prefersReducedMotion ? 'none' : 'height 200ms ease-out',
            }}
          >
            <div ref={contentRef} className="bg-gray-50 p-4">
              <div className="font-mono text-sm text-gray-700 leading-relaxed space-y-1">
                <div className="flex">
                  <span className="text-gray-400 w-40 shrink-0">Type:</span>
                  <span>{document.type}</span>
                </div>
                <div className="flex">
                  <span className="text-gray-400 w-40 shrink-0">Date Awarded:</span>
                  <span>{document.date}</span>
                </div>
                {document.institution && (
                  <div className="flex">
                    <span className="text-gray-400 w-40 shrink-0">Institution:</span>
                    <span>{document.institution}</span>
                  </div>
                )}
                {document.classification && (
                  <div className="flex">
                    <span className="text-gray-400 w-40 shrink-0">Classification:</span>
                    <span>{document.classification}</span>
                  </div>
                )}
                {document.duration && (
                  <div className="flex">
                    <span className="text-gray-400 w-40 shrink-0">Duration:</span>
                    <span>{document.duration}</span>
                  </div>
                )}
                {document.researchDetail && (
                  <div className="flex">
                    <span className="text-gray-400 w-40 shrink-0">Research:</span>
                    <span className="flex-1">
                      {document.researchDetail}
                      {document.researchGrade && (
                        <><br />Grade: {document.researchGrade}</>
                      )}
                    </span>
                  </div>
                )}
                {document.notes && (
                  <div className="flex">
                    <span className="text-gray-400 w-40 shrink-0">Notes:</span>
                    <span className="flex-1 text-gray-600">{document.notes}</span>
                  </div>
                )}
              </div>
            </div>
          </div>
        </td>
        <td className="border-b border-r border-[#E5E7EB] px-3 py-2">
          <span className="font-geist text-[13px] text-gray-500">{doc.date}</span>
        </td>
        <td className="border-b border-[#E5E7EB] px-3 py-2">
          <span className="font-ui text-[13px] text-gray-700">{doc.source}</span>
        </td>
      </tr>
      <AnimatePresence initial={false}>
        {isExpanded && (
          <motion.tr
            initial={{ height: 0 }}
            animate={{ height: 'auto' }}
            exit={{ height: 0 }}
            transition={{ duration: prefersReducedMotion ? 0 : 0.2, ease: 'easeOut' }}
          >
            <td colSpan={4} className="p-0 border-b border-[#E5E7EB]">
              <motion.div
                initial={{ height: 0 }}
                animate={{ height: 'auto' }}
                exit={{ height: 0 }}
                transition={{ duration: prefersReducedMotion ? 0 : 0.2, ease: 'easeOut' }}
                style={{ overflow: 'hidden' }}
              >
                <div
                  className="bg-[#F9FAFB] p-4 border-l-4"
                  style={{ borderLeftColor: documentBorderColors[doc.type] }}
                >
                  <div className="font-geist text-[12px] text-gray-700 leading-relaxed space-y-0.5">
                    {fields.map((field, idx) => (
                      <TreeLine
                        key={field.label}
                        label={field.label}
                        value={field.value}
                        isLast={idx === fields.length - 1}
                      />
                    ))}
                  </div>
                </div>
              </motion.div>
            </td>
          </motion.tr>
        )}
      </AnimatePresence>
    </>
  )
 }
 function MobileDocumentCard({
-  document,
+  document: doc,
  isExpanded,
  onToggle,
 }: {
@@ -146,87 +172,92 @@ function MobileDocumentCard({
  isExpanded: boolean
  onToggle: () => void
 }) {
  const fields: Array<{ label: string; value: React.ReactNode }> = [
    { label: 'Type', value: doc.type },
    { label: 'Date Awarded', value: doc.date },
  ]
  if (doc.institution) fields.push({ label: 'Institution', value: doc.institution })
  if (doc.classification) fields.push({ label: 'Classification', value: doc.classification })
  if (doc.duration) fields.push({ label: 'Duration', value: doc.duration })
  if (doc.researchDetail) {
    fields.push({
      label: 'Research',
      value: (
        <>
          {doc.researchDetail}
          {doc.researchGrade && (
            <>
              <br />
              <span className="text-gray-500">Grade: {doc.researchGrade}</span>
            </>
          )}
        </>
      ),
    })
  }
  if (doc.notes) fields.push({ label: 'Notes', value: <span className="text-gray-600">{doc.notes}</span> })
  return (
-    <div className="bg-white border border-gray-200 rounded">
+    <div className="bg-white border border-[#E5E7EB] rounded shadow-pmr overflow-hidden">
      <button
        type="button"
        onClick={onToggle}
-        className="w-full p-4 text-left"
+        className="w-full p-4 text-left focus-visible:ring-2 focus-visible:ring-[#005EB8]/40 focus-visible:ring-inset focus-visible:outline-none"
        aria-expanded={isExpanded}
        aria-label={`${doc.title} — ${doc.type}, ${doc.date}`}
      >
        <div className="flex items-start justify-between gap-3">
          <div className="flex-1 min-w-0">
            <div className="flex items-center gap-2 mb-1">
-              <DocumentTypeIcon type={document.type} />
+              <DocumentTypeIcon type={doc.type} />
-              <span className="text-xs text-gray-500">{document.type}</span>
+              <span className="font-ui text-[12px] text-gray-500">{doc.type}</span>
            </div>
-            <h3 className="font-inter font-medium text-sm text-gray-900">
+            <h3 className="font-ui font-medium text-[14px] text-gray-900">
-              {document.title}
+              {doc.title}
            </h3>
-            <div className="flex items-center gap-2 mt-1.5 text-xs text-gray-500">
+            <div className="flex items-center gap-2 mt-1.5">
-              <span className="font-geist">{document.date}</span>
+              <span className="font-geist text-[12px] text-gray-500">{doc.date}</span>
-              <span>•</span>
+              <span className="text-gray-300">•</span>
-              <span>{document.source}</span>
+              <span className="font-ui text-[12px] text-gray-500">{doc.source}</span>
            </div>
          </div>
-          <div className="flex-shrink-0 mt-1">
+          <motion.div
-            {isExpanded ? (
+            animate={{ rotate: isExpanded ? 180 : 0 }}
-              <ChevronUp size={16} className="text-gray-400" />
+            transition={{ duration: prefersReducedMotion ? 0 : 0.2 }}
-            ) : (
+            className="flex-shrink-0 mt-1"
-              <ChevronDown size={16} className="text-gray-400" />
+          >
-            )}
+            <ChevronDown size={16} className="text-gray-400" />
-          </div>
+          </motion.div>
        </div>
      </button>
-      {isExpanded && (
+      <AnimatePresence initial={false}>
-        <div className="px-4 pb-4 border-t border-gray-100">
+        {isExpanded && (
-          <div className="pt-3 font-mono text-xs text-gray-700 leading-relaxed space-y-2">
+          <motion.div
-            <div className="flex">
+            initial={{ height: 0 }}
-              <span className="text-gray-400 w-28 shrink-0">Type:</span>
+            animate={{ height: 'auto' }}
-              <span>{document.type}</span>
+            exit={{ height: 0 }}
            transition={{ duration: prefersReducedMotion ? 0 : 0.2, ease: 'easeOut' }}
            style={{ overflow: 'hidden' }}
          >
            <div
              className="px-4 pb-4 border-t border-[#E5E7EB] border-l-4"
              style={{ borderLeftColor: documentBorderColors[doc.type] }}
            >
              <div className="pt-3 font-geist text-[12px] text-gray-700 leading-relaxed space-y-0.5">
                {fields.map((field, idx) => (
                  <TreeLine
                    key={field.label}
                    label={field.label}
                    value={field.value}
                    isLast={idx === fields.length - 1}
                  />
                ))}
              </div>
            </div>
-            <div className="flex">
+          </motion.div>
-              <span className="text-gray-400 w-28 shrink-0">Date Awarded:</span>
+        )}
-              <span>{document.date}</span>
+      </AnimatePresence>
            </div>
            {document.institution && (
              <div className="flex">
                <span className="text-gray-400 w-28 shrink-0">Institution:</span>
                <span>{document.institution}</span>
              </div>
            )}
            {document.classification && (
              <div className="flex">
                <span className="text-gray-400 w-28 shrink-0">Classification:</span>
                <span>{document.classification}</span>
              </div>
            )}
            {document.duration && (
              <div className="flex">
                <span className="text-gray-400 w-28 shrink-0">Duration:</span>
                <span>{document.duration}</span>
              </div>
            )}
            {document.researchDetail && (
              <div className="flex flex-col">
                <span className="text-gray-400 w-28 shrink-0">Research:</span>
                <span className="mt-1">
                  {document.researchDetail}
                  {document.researchGrade && (
                    <><br />Grade: {document.researchGrade}</>
                  )}
                </span>
              </div>
            )}
            {document.notes && (
              <div className="flex flex-col">
                <span className="text-gray-400 w-28 shrink-0">Notes:</span>
                <span className="mt-1 text-gray-600">{document.notes}</span>
              </div>
            )}
          </div>
        </div>
      )}
    </div>
  )
 }
@@ -234,29 +265,32 @@ function MobileDocumentCard({
 export function DocumentsView() {
  const [expandedId, setExpandedId] = useState<string | null>(null)
  const { isMobile } = useBreakpoint()
  const { setExpandedItem } = useAccessibility()
-  const handleToggle = (id: string) => {
+  const handleToggle = useCallback((id: string, title: string) => {
-    setExpandedId(expandedId === id ? null : id)
+    const newId = expandedId === id ? null : id
-  }
+    setExpandedId(newId)
    setExpandedItem(newId ? title : null)
  }, [expandedId, setExpandedItem])
  return (
-    <div className="bg-white border border-gray-200 rounded overflow-hidden">
+    <div className="bg-white border border-[#E5E7EB] rounded shadow-pmr overflow-hidden">
-      <div className="bg-gray-50 border-b border-gray-200 px-4 py-3">
+      <div className="bg-[#F9FAFB] border-b border-[#E5E7EB] px-4 py-3">
-        <h2 className="font-inter font-semibold text-sm uppercase tracking-wider text-gray-500">
+        <h2 className="font-ui font-semibold text-[13px] uppercase tracking-[0.05em] text-gray-500">
          Attached Documents
        </h2>
-        <p className="font-inter text-xs text-gray-400 mt-1">
+        <p className="font-ui text-[12px] text-gray-400 mt-1">
-          Education and certifications presented as attached documents in the patient record.
+          {documents.length} document{documents.length !== 1 ? 's' : ''} attached. Click a row to view details.
        </p>
      </div>
      {isMobile ? (
-        <div className="p-3 space-y-3 bg-pmr-content">
+        <div className="p-3 space-y-3 bg-[#F5F7FA]">
-          {documents.map((document) => (
+          {documents.map((doc) => (
            <MobileDocumentCard
-              key={document.id}
+              key={doc.id}
-              document={document}
+              document={doc}
-              isExpanded={expandedId === document.id}
+              isExpanded={expandedId === doc.id}
-              onToggle={() => handleToggle(document.id)}
+              onToggle={() => handleToggle(doc.id, doc.title)}
            />
          ))}
        </div>
@@ -264,55 +298,47 @@ export function DocumentsView() {
        <div className="overflow-x-auto">
          <table className="w-full border-collapse">
            <thead>
-              <tr className="bg-gray-50">
+              <tr className="bg-[#F9FAFB]">
                <th
                  scope="col"
-                  className="border border-gray-200 px-3 py-2 text-left font-inter font-semibold text-xs uppercase tracking-wider text-gray-400 w-12"
+                  className="border-b border-r border-[#E5E7EB] px-3 py-2 text-left font-ui font-semibold text-[13px] uppercase tracking-[0.05em] text-gray-400 w-12"
                >
                  Type
                </th>
                <th
                  scope="col"
-                  className="border border-gray-200 px-3 py-2 text-left font-inter font-semibold text-xs uppercase tracking-wider text-gray-400"
+                  className="border-b border-r border-[#E5E7EB] px-3 py-2 text-left font-ui font-semibold text-[13px] uppercase tracking-[0.05em] text-gray-400"
                >
                  Document
                </th>
                <th
                  scope="col"
-                  className="border border-gray-200 px-3 py-2 text-left font-inter font-semibold text-xs uppercase tracking-wider text-gray-400 w-20"
+                  className="border-b border-r border-[#E5E7EB] px-3 py-2 text-left font-ui font-semibold text-[13px] uppercase tracking-[0.05em] text-gray-400 w-20"
                >
                  Date
                </th>
                <th
                  scope="col"
-                  className="border border-gray-200 px-3 py-2 text-left font-inter font-semibold text-xs uppercase tracking-wider text-gray-400 w-32"
+                  className="border-b border-[#E5E7EB] px-3 py-2 text-left font-ui font-semibold text-[13px] uppercase tracking-[0.05em] text-gray-400 w-32"
                >
                  Source
                </th>
                <th
                  scope="col"
                  className="border border-gray-200 px-3 py-2 text-left font-inter font-semibold text-xs uppercase tracking-wider text-gray-400 w-10"
                >
                  <span className="sr-only">Expand</span>
                </th>
              </tr>
            </thead>
            <tbody>
-              {documents.map((document) => (
+              {documents.map((doc, index) => (
                <DocumentRow
-                  key={document.id}
+                  key={doc.id}
-                  document={document}
+                  document={doc}
-                  isExpanded={expandedId === document.id}
+                  isExpanded={expandedId === doc.id}
-                  onToggle={() => handleToggle(document.id)}
+                  onToggle={() => handleToggle(doc.id, doc.title)}
                  index={index}
                />
              ))}
            </tbody>
          </table>
        </div>
      )}
      {documents.length === 0 && (
        <div className="p-4 text-sm text-gray-500 text-center">No documents attached</div>
      )}
    </div>
  )
 }
@@ -1,39 +1,75 @@
-import { useState, useEffect, useRef } from 'react'
+import { useState, useCallback } from 'react'
-import { ChevronDown, ChevronUp, ExternalLink, Circle } from 'lucide-react'
+import { motion, AnimatePresence } from 'framer-motion'
 import { ChevronDown, ExternalLink } from 'lucide-react'
 import { investigations } from '@/data/investigations'
 import type { Investigation } from '@/types/pmr'
 import { useBreakpoint } from '@/hooks/useBreakpoint'
 import { useAccessibility } from '@/contexts/AccessibilityContext'
 type InvestigationStatus = 'Complete' | 'Ongoing' | 'Live'
 const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches
 function StatusBadge({ status }: { status: InvestigationStatus }) {
-  if (status === 'Live') {
+  const styles: Record<InvestigationStatus, { badge: string; dot: string; label: string }> = {
-    return (
+    Complete: {
-      <div className="flex items-center gap-2">
+      badge: 'bg-emerald-100 text-emerald-800 border-emerald-200',
-        <span className="relative flex h-2 w-2">
+      dot: 'bg-emerald-500',
-          <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"></span>
+      label: 'Complete',
-          <Circle className="relative inline-flex rounded-full h-2 w-2 bg-green-500 fill-green-500" />
+    },
-        </span>
+    Ongoing: {
-        <span className="text-xs text-gray-600">Live</span>
+      badge: 'bg-amber-100 text-amber-800 border-amber-200',
-      </div>
+      dot: 'bg-amber-500',
-    )
+      label: 'Ongoing',
    },
    Live: {
      badge: 'bg-emerald-100 text-emerald-800 border-emerald-200',
      dot: 'bg-emerald-500',
      label: 'Live',
    },
  }
-  const colorMap: Record<Exclude<InvestigationStatus, 'Live'>, { bg: string; label: string }> = {
+  const { badge, dot, label } = styles[status]
    Complete: { bg: 'bg-green-500', label: 'Complete' },
    Ongoing: { bg: 'bg-amber-500', label: 'Ongoing' },
  }
  const { bg, label } = colorMap[status as Exclude<InvestigationStatus, 'Live'>]
  return (
-    <div className="flex items-center gap-2">
+    <span className={`inline-flex items-center gap-1.5 px-2.5 py-1 rounded text-xs font-medium border ${badge}`}>
-      <span
+      <span className="relative flex h-1.5 w-1.5">
-        className={`w-2 h-2 rounded-full ${bg}`}
+        {status === 'Live' && (
-        aria-label={`Status: ${status}`}
+          <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75" />
-        role="img"
+        )}
-      />
+        <span className={`relative inline-flex rounded-full h-1.5 w-1.5 ${dot}`} />
-      <span className="text-xs text-gray-600">{label}</span>
+      </span>
      {label}
    </span>
  )
 }
 interface TreeLineProps {
  label: string
  value: React.ReactNode
  isLast?: boolean
 }
 function TreeLine({ label, value, isLast = false }: TreeLineProps) {
  return (
    <div className="flex">
      <span className="text-gray-400 select-none">{isLast ? '└─ ' : '├─ '}</span>
      <span className="text-gray-500 shrink-0 min-w-[160px]">{label}:</span>
      <span className="ml-2 flex-1">{value}</span>
    </div>
  )
 }
 function TreeBranch({ label, children, isLast = false }: { label: string; children: React.ReactNode; isLast?: boolean }) {
  return (
    <div>
      <div className="flex">
        <span className="text-gray-400 select-none">{isLast ? '└─ ' : '├─ '}</span>
        <span className="text-gray-500 shrink-0 min-w-[160px]">{label}:</span>
      </div>
      <div className="ml-[18px]">
        {children}
      </div>
    </div>
  )
 }
@@ -42,127 +78,125 @@ function InvestigationRow({
  investigation,
  isExpanded,
  onToggle,
  index,
 }: {
  investigation: Investigation
  isExpanded: boolean
  onToggle: () => void
  index: number
 }) {
-  const contentRef = useRef<HTMLDivElement>(null)
+  const statusBorderColor: Record<InvestigationStatus, string> = {
-  const [contentHeight, setContentHeight] = useState<number | undefined>(undefined)
+    Complete: '#10B981',
-  const prefersReducedMotion = useRef(
+    Ongoing: '#F59E0B',
-    window.matchMedia('(prefers-reduced-motion: reduce)').matches
+    Live: '#10B981',
-  ).current
+  }
  useEffect(() => {
    if (contentRef.current) {
      setContentHeight(contentRef.current.scrollHeight)
    }
  }, [isExpanded])
  return (
    <>
      <tr
-        className={`cursor-pointer hover:bg-blue-50 transition-colors ${
+        className={`cursor-pointer transition-colors h-[40px] ${
-          isExpanded ? 'bg-blue-50' : ''
+          isExpanded ? 'bg-[#EFF6FF]' : index % 2 === 0 ? 'bg-white' : 'bg-[#F9FAFB]'
-        }`}
+        } hover:bg-[#EFF6FF]`}
        onClick={onToggle}
        tabIndex={0}
        role="button"
        aria-expanded={isExpanded}
        aria-label={`${investigation.name} — ${investigation.status}`}
        onKeyDown={(e) => {
          if (e.key === 'Enter' || e.key === ' ') {
            e.preventDefault()
            onToggle()
          }
        }}
      >
-        <td className="border border-gray-200 px-3 py-2.5">
+        <td className="border-b border-r border-[#E5E7EB] px-3 py-2">
-          <span className="text-sm text-gray-900">{investigation.name}</span>
+          <div className="flex items-center gap-2">
-        </td>
+            <motion.div
-        <td className="border border-gray-200 px-3 py-2.5">
+              animate={{ rotate: isExpanded ? 180 : 0 }}
-          <span className="font-mono text-xs text-gray-500">{investigation.requestedYear}</span>
+              transition={{ duration: prefersReducedMotion ? 0 : 0.2 }}
-        </td>
+            >
        <td className="border border-gray-200 px-3 py-2.5">
          <StatusBadge status={investigation.status} />
        </td>
        <td className="border border-gray-200 px-3 py-2.5">
          <span className="text-sm text-gray-700">{investigation.resultSummary}</span>
        </td>
        <td className="border border-gray-200 px-3 py-2.5 w-10">
          <button
            className="p-1 hover:bg-gray-100 rounded transition-colors"
            aria-label={isExpanded ? 'Collapse' : 'Expand'}
          >
            {isExpanded ? (
              <ChevronUp className="w-4 h-4 text-gray-400" />
            ) : (
              <ChevronDown className="w-4 h-4 text-gray-400" />
-            )}
+            </motion.div>
-          </button>
+            <span className="font-ui text-[14px] text-gray-900">{investigation.name}</span>
        </td>
      </tr>
      <tr>
        <td colSpan={5} className="p-0 border border-gray-200">
          <div
            style={{
              height: isExpanded ? contentHeight : 0,
              overflow: 'hidden',
              transition: prefersReducedMotion ? 'none' : 'height 200ms ease-out',
            }}
          >
            <div ref={contentRef} className="bg-gray-50 p-4">
              <div className="font-mono text-sm text-gray-700 leading-relaxed space-y-1">
                <div className="flex">
                  <span className="text-gray-400 w-40 shrink-0">Date Requested:</span>
                  <span>{investigation.requestedYear}</span>
                </div>
                <div className="flex">
                  <span className="text-gray-400 w-40 shrink-0">Date Reported:</span>
                  <span>{investigation.reportedYear ?? 'Pending'}</span>
                </div>
                <div className="flex">
                  <span className="text-gray-400 w-40 shrink-0">Status:</span>
                  <span>
                    {investigation.status}
                    {investigation.status === 'Live' && investigation.externalUrl && (
                      <> — Live at {investigation.externalUrl.replace('https://', '')}</>
                    )}
                  </span>
                </div>
                <div className="flex">
                  <span className="text-gray-400 w-40 shrink-0">Requesting Clinician:</span>
                  <span>{investigation.requestingClinician}</span>
                </div>
                <div className="flex">
                  <span className="text-gray-400 w-40 shrink-0">Methodology:</span>
                  <span className="flex-1">{investigation.methodology}</span>
                </div>
                <div className="flex">
                  <span className="text-gray-400 w-40 shrink-0">Results:</span>
                  <ul className="flex-1 space-y-1">
                    {investigation.results.map((result, idx) => (
                      <li key={idx} className="flex items-start gap-2">
                        <span className="text-gray-300 mt-1">-</span>
                        <span>{result}</span>
                      </li>
                    ))}
                  </ul>
                </div>
                <div className="flex">
                  <span className="text-gray-400 w-40 shrink-0">Tech Stack:</span>
                  <span>{investigation.techStack.join(', ')}</span>
                </div>
              </div>
              {investigation.externalUrl && (
                <div className="mt-4 pt-4 border-t border-gray-200">
                  <a
                    href={investigation.externalUrl}
                    target="_blank"
                    rel="noopener noreferrer"
                    onClick={(e) => e.stopPropagation()}
                    className="inline-flex items-center gap-2 px-4 py-2 bg-pmr-nhsblue text-white text-sm font-medium rounded hover:bg-blue-700 transition-colors"
                  >
                    View Results
                    <ExternalLink className="w-4 h-4" />
                  </a>
                </div>
              )}
            </div>
          </div>
        </td>
        <td className="border-b border-r border-[#E5E7EB] px-3 py-2">
          <span className="font-geist text-[13px] text-gray-500">{investigation.requestedYear}</span>
        </td>
        <td className="border-b border-r border-[#E5E7EB] px-3 py-2">
          <StatusBadge status={investigation.status} />
        </td>
        <td className="border-b border-[#E5E7EB] px-3 py-2">
          <span className="font-ui text-[13px] text-gray-700">{investigation.resultSummary}</span>
        </td>
      </tr>
      <AnimatePresence initial={false}>
        {isExpanded && (
          <motion.tr
            initial={{ height: 0 }}
            animate={{ height: 'auto' }}
            exit={{ height: 0 }}
            transition={{ duration: prefersReducedMotion ? 0 : 0.2, ease: 'easeOut' }}
          >
            <td colSpan={4} className="p-0 border-b border-[#E5E7EB]">
              <motion.div
                initial={{ height: 0 }}
                animate={{ height: 'auto' }}
                exit={{ height: 0 }}
                transition={{ duration: prefersReducedMotion ? 0 : 0.2, ease: 'easeOut' }}
                style={{ overflow: 'hidden' }}
              >
                <div
                  className="bg-[#F9FAFB] p-4 border-l-4"
                  style={{ borderLeftColor: statusBorderColor[investigation.status] }}
                >
                  <div className="font-geist text-[12px] text-gray-700 leading-relaxed space-y-0.5">
                    <TreeLine label="Date Requested" value={String(investigation.requestedYear)} />
                    <TreeLine label="Date Reported" value={investigation.reportedYear ? String(investigation.reportedYear) : 'Pending'} />
                    <TreeLine
                      label="Status"
                      value={
                        <>
                          {investigation.status}
                          {investigation.status === 'Live' && investigation.externalUrl && (
                            <> — Live at {investigation.externalUrl.replace('https://', '')}</>
                          )}
                        </>
                      }
                    />
                    <TreeLine label="Requesting Clinician" value={investigation.requestingClinician} />
                    <TreeLine label="Methodology" value={investigation.methodology} />
                    <TreeBranch label="Results">
                      {investigation.results.map((result, idx) => (
                        <div key={idx} className="flex">
                          <span className="text-gray-400 select-none">{idx === investigation.results.length - 1 ? '└─ ' : '├─ '}</span>
                          <span>{result}</span>
                        </div>
                      ))}
                    </TreeBranch>
                    <TreeLine label="Tech Stack" value={investigation.techStack.join(', ')} isLast={!investigation.externalUrl} />
                    {investigation.externalUrl && (
                      <div className="flex items-center pt-2">
                        <span className="text-gray-400 select-none">└─ </span>
                        <a
                          href={investigation.externalUrl}
                          target="_blank"
                          rel="noopener noreferrer"
                          onClick={(e) => e.stopPropagation()}
                          className="inline-flex items-center gap-2 px-4 py-1.5 bg-[#005EB8] text-white text-[12px] font-medium rounded hover:bg-[#004D9F] transition-colors focus-visible:ring-2 focus-visible:ring-[#005EB8]/40 focus-visible:outline-none"
                        >
                          View Results
                          <ExternalLink className="w-3.5 h-3.5" />
                        </a>
                      </div>
                    )}
                  </div>
                </div>
              </motion.div>
            </td>
          </motion.tr>
        )}
      </AnimatePresence>
    </>
  )
 }
@@ -176,97 +210,100 @@ function MobileInvestigationCard({
  isExpanded: boolean
  onToggle: () => void
 }) {
  const statusBorderColor: Record<InvestigationStatus, string> = {
    Complete: '#10B981',
    Ongoing: '#F59E0B',
    Live: '#10B981',
  }
  return (
-    <div className="bg-white border border-gray-200 rounded">
+    <div className="bg-white border border-[#E5E7EB] rounded shadow-pmr overflow-hidden">
      <button
        type="button"
        onClick={onToggle}
-        className="w-full p-4 text-left"
+        className="w-full p-4 text-left focus-visible:ring-2 focus-visible:ring-[#005EB8]/40 focus-visible:ring-inset focus-visible:outline-none"
        aria-expanded={isExpanded}
        aria-label={`${investigation.name} — ${investigation.status}`}
      >
        <div className="flex items-start justify-between gap-3">
          <div className="flex-1 min-w-0">
-            <h3 className="font-inter font-medium text-sm text-gray-900">
+            <h3 className="font-ui font-medium text-[14px] text-gray-900">
              {investigation.name}
            </h3>
-            <div className="flex items-center gap-3 mt-1.5 text-xs text-gray-500">
+            <div className="flex items-center gap-3 mt-1.5">
-              <span className="font-geist">{investigation.requestedYear}</span>
+              <span className="font-geist text-[12px] text-gray-500">{investigation.requestedYear}</span>
              <span>•</span>
              <StatusBadge status={investigation.status} />
            </div>
-            <p className="text-xs text-gray-700 mt-2 line-clamp-2">
+            <p className="font-ui text-[12px] text-gray-700 mt-2 line-clamp-2">
              {investigation.resultSummary}
            </p>
          </div>
-          <div className="flex-shrink-0 mt-1">
+          <motion.div
-            {isExpanded ? (
+            animate={{ rotate: isExpanded ? 180 : 0 }}
-              <ChevronUp size={16} className="text-gray-400" />
+            transition={{ duration: prefersReducedMotion ? 0 : 0.2 }}
-            ) : (
+            className="flex-shrink-0 mt-1"
-              <ChevronDown size={16} className="text-gray-400" />
+          >
-            )}
+            <ChevronDown size={16} className="text-gray-400" />
-          </div>
+          </motion.div>
        </div>
      </button>
-      {isExpanded && (
+      <AnimatePresence initial={false}>
-        <div className="px-4 pb-4 border-t border-gray-100">
+        {isExpanded && (
-          <div className="pt-3 font-mono text-xs text-gray-700 leading-relaxed space-y-2">
+          <motion.div
-            <div className="flex">
+            initial={{ height: 0 }}
-              <span className="text-gray-400 w-28 shrink-0">Date Requested:</span>
+            animate={{ height: 'auto' }}
-              <span>{investigation.requestedYear}</span>
+            exit={{ height: 0 }}
            transition={{ duration: prefersReducedMotion ? 0 : 0.2, ease: 'easeOut' }}
            style={{ overflow: 'hidden' }}
          >
            <div
              className="px-4 pb-4 border-t border-[#E5E7EB] border-l-4"
              style={{ borderLeftColor: statusBorderColor[investigation.status] }}
            >
              <div className="pt-3 font-geist text-[12px] text-gray-700 leading-relaxed space-y-0.5">
                <TreeLine label="Date Requested" value={String(investigation.requestedYear)} />
                <TreeLine label="Date Reported" value={investigation.reportedYear ? String(investigation.reportedYear) : 'Pending'} />
                <TreeLine
                  label="Status"
                  value={
                    <>
                      {investigation.status}
                      {investigation.status === 'Live' && investigation.externalUrl && (
                        <> — Live at {investigation.externalUrl.replace('https://', '')}</>
                      )}
                    </>
                  }
                />
                <TreeLine label="Clinician" value={investigation.requestingClinician} />
                <TreeLine label="Methodology" value={investigation.methodology} />
                <TreeBranch label="Results">
                  {investigation.results.map((result, idx) => (
                    <div key={idx} className="flex">
                      <span className="text-gray-400 select-none">{idx === investigation.results.length - 1 ? '└─ ' : '├─ '}</span>
                      <span>{result}</span>
                    </div>
                  ))}
                </TreeBranch>
                <TreeLine label="Tech Stack" value={investigation.techStack.join(', ')} isLast={!investigation.externalUrl} />
              </div>
              {investigation.externalUrl && (
                <div className="mt-3">
                  <a
                    href={investigation.externalUrl}
                    target="_blank"
                    rel="noopener noreferrer"
                    onClick={(e) => e.stopPropagation()}
                    className="inline-flex items-center gap-2 px-4 py-1.5 bg-[#005EB8] text-white text-[12px] font-medium rounded hover:bg-[#004D9F] transition-colors focus-visible:ring-2 focus-visible:ring-[#005EB8]/40 focus-visible:outline-none"
                  >
                    View Results
                    <ExternalLink className="w-3 h-3" />
                  </a>
                </div>
              )}
            </div>
-            <div className="flex">
+          </motion.div>
-              <span className="text-gray-400 w-28 shrink-0">Date Reported:</span>
+        )}
-              <span>{investigation.reportedYear ?? 'Pending'}</span>
+      </AnimatePresence>
            </div>
            <div className="flex">
              <span className="text-gray-400 w-28 shrink-0">Status:</span>
              <span>
                {investigation.status}
                {investigation.status === 'Live' && investigation.externalUrl && (
                  <> — Live at {investigation.externalUrl.replace('https://', '')}</>
                )}
              </span>
            </div>
            <div className="flex">
              <span className="text-gray-400 w-28 shrink-0">Clinician:</span>
              <span>{investigation.requestingClinician}</span>
            </div>
            <div className="flex flex-col">
              <span className="text-gray-400 w-28 shrink-0">Methodology:</span>
              <span className="mt-1">{investigation.methodology}</span>
            </div>
            <div className="flex flex-col">
              <span className="text-gray-400 w-28 shrink-0">Results:</span>
              <ul className="mt-1 space-y-0.5">
                {investigation.results.map((result, idx) => (
                  <li key={idx} className="flex items-start gap-2">
                    <span className="text-gray-300 mt-0.5">-</span>
                    <span>{result}</span>
                  </li>
                ))}
              </ul>
            </div>
            <div className="flex">
              <span className="text-gray-400 w-28 shrink-0">Tech Stack:</span>
              <span>{investigation.techStack.join(', ')}</span>
            </div>
          </div>
          {investigation.externalUrl && (
            <div className="mt-4">
              <a
                href={investigation.externalUrl}
                target="_blank"
                rel="noopener noreferrer"
                onClick={(e) => e.stopPropagation()}
                className="inline-flex items-center gap-2 px-4 py-2 bg-pmr-nhsblue text-white text-xs font-medium rounded hover:bg-blue-700 transition-colors"
              >
                View Results
                <ExternalLink className="w-3 h-3" />
              </a>
            </div>
          )}
        </div>
      )}
    </div>
  )
 }
@@ -274,29 +311,32 @@ function MobileInvestigationCard({
 export function InvestigationsView() {
  const [expandedId, setExpandedId] = useState<string | null>(null)
  const { isMobile } = useBreakpoint()
  const { setExpandedItem } = useAccessibility()
-  const handleToggle = (id: string) => {
+  const handleToggle = useCallback((id: string, name: string) => {
-    setExpandedId(expandedId === id ? null : id)
+    const newId = expandedId === id ? null : id
-  }
+    setExpandedId(newId)
    setExpandedItem(newId ? name : null)
  }, [expandedId, setExpandedItem])
  return (
-    <div className="bg-white border border-gray-200 rounded overflow-hidden">
+    <div className="bg-white border border-[#E5E7EB] rounded shadow-pmr overflow-hidden">
-      <div className="bg-gray-50 border-b border-gray-200 px-4 py-3">
+      <div className="bg-[#F9FAFB] border-b border-[#E5E7EB] px-4 py-3">
-        <h2 className="font-inter font-semibold text-sm uppercase tracking-wider text-gray-500">
+        <h2 className="font-ui font-semibold text-[13px] uppercase tracking-[0.05em] text-gray-500">
          Investigation Results
        </h2>
-        <p className="font-inter text-xs text-gray-400 mt-1">
+        <p className="font-ui text-[12px] text-gray-400 mt-1">
-          Projects presented as diagnostic investigations — tests that were ordered, performed, and returned results.
+          {investigations.length} investigation{investigations.length !== 1 ? 's' : ''} on record. Click a row to view full results.
        </p>
      </div>
      {isMobile ? (
-        <div className="p-3 space-y-3 bg-pmr-content">
+        <div className="p-3 space-y-3 bg-[#F5F7FA]">
          {investigations.map((investigation) => (
            <MobileInvestigationCard
              key={investigation.id}
              investigation={investigation}
              isExpanded={expandedId === investigation.id}
-              onToggle={() => handleToggle(investigation.id)}
+              onToggle={() => handleToggle(investigation.id, investigation.name)}
            />
          ))}
        </div>
@@ -304,55 +344,47 @@ export function InvestigationsView() {
        <div className="overflow-x-auto">
          <table className="w-full border-collapse">
            <thead>
-              <tr className="bg-gray-50">
+              <tr className="bg-[#F9FAFB]">
                <th
                  scope="col"
-                  className="border border-gray-200 px-3 py-2 text-left font-inter font-semibold text-xs uppercase tracking-wider text-gray-400"
+                  className="border-b border-r border-[#E5E7EB] px-3 py-2 text-left font-ui font-semibold text-[13px] uppercase tracking-[0.05em] text-gray-400"
                >
                  Test Name
                </th>
                <th
                  scope="col"
-                  className="border border-gray-200 px-3 py-2 text-left font-inter font-semibold text-xs uppercase tracking-wider text-gray-400 w-24"
+                  className="border-b border-r border-[#E5E7EB] px-3 py-2 text-left font-ui font-semibold text-[13px] uppercase tracking-[0.05em] text-gray-400 w-24"
                >
                  Requested
                </th>
                <th
                  scope="col"
-                  className="border border-gray-200 px-3 py-2 text-left font-inter font-semibold text-xs uppercase tracking-wider text-gray-400 w-28"
+                  className="border-b border-r border-[#E5E7EB] px-3 py-2 text-left font-ui font-semibold text-[13px] uppercase tracking-[0.05em] text-gray-400 w-28"
                >
                  Status
                </th>
                <th
                  scope="col"
-                  className="border border-gray-200 px-3 py-2 text-left font-inter font-semibold text-xs uppercase tracking-wider text-gray-400"
+                  className="border-b border-[#E5E7EB] px-3 py-2 text-left font-ui font-semibold text-[13px] uppercase tracking-[0.05em] text-gray-400"
                >
                  Result
                </th>
                <th
                  scope="col"
                  className="border border-gray-200 px-3 py-2 text-left font-inter font-semibold text-xs uppercase tracking-wider text-gray-400 w-10"
                >
                  <span className="sr-only">Expand</span>
                </th>
              </tr>
            </thead>
            <tbody>
-              {investigations.map((investigation) => (
+              {investigations.map((investigation, index) => (
                <InvestigationRow
                  key={investigation.id}
                  investigation={investigation}
                  isExpanded={expandedId === investigation.id}
-                  onToggle={() => handleToggle(investigation.id)}
+                  onToggle={() => handleToggle(investigation.id, investigation.name)}
                  index={index}
                />
              ))}
            </tbody>
          </table>
        </div>
      )}
      {investigations.length === 0 && (
        <div className="p-4 text-sm text-gray-500 text-center">No investigation results</div>
      )}
    </div>
  )
 }
@@ -1,8 +1,10 @@
 import { useState, useMemo } from 'react'
-import { ChevronDown, ChevronUp, ArrowUpDown, ArrowUp, ArrowDown } from 'lucide-react'
+import { motion, AnimatePresence } from 'framer-motion'
 import { ChevronDown, ChevronUp, ChevronsUpDown } from 'lucide-react'
 import { medications } from '@/data/medications'
 import type { Medication } from '@/types/pmr'
 import { useBreakpoint } from '@/hooks/useBreakpoint'
 import { useAccessibility } from '@/contexts/AccessibilityContext'
 type SortField = 'name' | 'dose' | 'frequency' | 'startYear' | 'status'
 type SortDirection = 'asc' | 'desc' | null
@@ -12,21 +14,30 @@ interface SortState {
  direction: SortDirection
 }
-const categoryTabs = [
+type CategoryId = 'Active' | 'Clinical' | 'PRN'
-  { id: 'Active', label: 'Active Medications', shortLabel: 'Active', description: 'Technical skills (daily use)' },
+
-  { id: 'Clinical', label: 'Clinical Medications', shortLabel: 'Clinical', description: 'Healthcare domain skills' },
+const categoryTabs: { id: CategoryId; label: string; shortLabel: string }[] = [
-  { id: 'PRN', label: 'PRN (As Required)', shortLabel: 'PRN', description: 'Strategic & leadership skills' },
+  { id: 'Active', label: 'Active Medications', shortLabel: 'Active' },
-] as const
+  { id: 'Clinical', label: 'Clinical Medications', shortLabel: 'Clinical' },
  { id: 'PRN', label: 'PRN (As Required)', shortLabel: 'PRN' },
 ]
 const categoryCounts: Record<CategoryId, number> = {
  Active: medications.filter(m => m.category === 'Active').length,
  Clinical: medications.filter(m => m.category === 'Clinical').length,
  PRN: medications.filter(m => m.category === 'PRN').length,
 }
 const prefersReducedMotion = typeof window !== 'undefined'
  ? window.matchMedia('(prefers-reduced-motion: reduce)').matches
  : false
 export function MedicationsView() {
-  const [activeTab, setActiveTab] = useState<'Active' | 'Clinical' | 'PRN'>('Active')
+  const [activeTab, setActiveTab] = useState<CategoryId>('Active')
  const [expandedRow, setExpandedRow] = useState<string | null>(null)
  const [sort, setSort] = useState<SortState>({ field: 'name', direction: null })
  const { isMobile } = useBreakpoint()
-
+  const { setExpandedItem } = useAccessibility()
  const prefersReducedMotion = typeof window !== 'undefined'
    ? window.matchMedia('(prefers-reduced-motion: reduce)').matches
    : false
  const filteredMedications = useMemo(() => {
    return medications.filter(med => med.category === activeTab)
@@ -45,8 +56,8 @@ export function MedicationsView() {
          comparison = a.dose - b.dose
          break
        case 'frequency': {
-          const freqOrder = { 'Daily': 0, 'Weekly': 1, 'Monthly': 2, 'As needed': 3 }
+          const freqOrder: Record<string, number> = { 'Daily': 0, 'Weekly': 1, 'Monthly': 2, 'As needed': 3 }
-          comparison = freqOrder[a.frequency] - freqOrder[b.frequency]
+          comparison = (freqOrder[a.frequency] ?? 4) - (freqOrder[b.frequency] ?? 4)
          break
        }
        case 'startYear':
@@ -74,156 +85,138 @@ export function MedicationsView() {
    }
  }
-  const toggleRow = (id: string) => {
+  const toggleRow = (id: string, name: string) => {
-    setExpandedRow(expandedRow === id ? null : id)
+    const nextExpanded = expandedRow === id ? null : id
    setExpandedRow(nextExpanded)
    setExpandedItem(nextExpanded ? name : null)
  }
-  const getSortIcon = (field: SortField) => {
+  const SortIndicator = ({ field }: { field: SortField }) => {
    if (sort.field !== field || !sort.direction) {
-      return <ArrowUpDown size={12} className="text-gray-400" />
+      return <ChevronsUpDown className="w-3.5 h-3.5 text-gray-400" />
    }
-    return sort.direction === 'asc' 
+    return sort.direction === 'asc'
-      ? <ArrowUp size={12} className="text-pmr-nhsblue" />
+      ? <ChevronUp className="w-3.5 h-3.5 text-[#005EB8]" />
-      : <ArrowDown size={12} className="text-pmr-nhsblue" />
+      : <ChevronDown className="w-3.5 h-3.5 text-[#005EB8]" />
  }
  return (
    <div className="space-y-6">
-      <div className="bg-white border border-gray-200 rounded">
+      <div className="bg-white border border-[#E5E7EB] rounded shadow-pmr overflow-hidden">
-        <div className="px-4 py-3 border-b border-gray-200 bg-gray-50">
+        {/* Header */}
-          <h1 className="font-inter font-semibold text-lg text-gray-900">
+        <div className="px-5 py-3 border-b border-[#E5E7EB] bg-[#F9FAFB]">
          <h1 className="font-ui font-semibold text-[15px] text-gray-900">
            Current Medications
          </h1>
-          <p className="font-inter text-sm text-gray-500 mt-1">
+          <p className="font-ui text-[13px] text-gray-500 mt-0.5">
            Skills mapped as active medications — proficiency shown as dosage
          </p>
        </div>
-        <div className="border-b border-gray-200">
+        {/* Category Tabs */}
-          <nav className="flex" role="tablist">
+        <div className="border-b border-[#E5E7EB]">
          <nav className="flex" role="tablist" aria-label="Medication categories">
            {categoryTabs.map((tab) => (
              <button
                key={tab.id}
                id={`tab-${tab.id}`}
                role="tab"
                aria-selected={activeTab === tab.id}
                aria-controls={`panel-${tab.id}`}
                onClick={() => {
                  setActiveTab(tab.id)
                  setExpandedRow(null)
                  setExpandedItem(null)
                }}
                className={`
-                  flex-1 px-4 py-3 text-left transition-colors duration-100
+                  flex-1 px-4 py-2.5 transition-colors duration-100 text-left
-                  ${activeTab === tab.id 
+                  border-b-2
-                    ? 'bg-white border-b-2 border-pmr-nhsblue' 
+                  ${activeTab === tab.id
-                    : 'bg-gray-50 hover:bg-gray-100 border-b-2 border-transparent'}
+                    ? 'bg-white border-[#005EB8]'
                    : 'bg-[#F9FAFB] border-transparent text-gray-600 hover:bg-white'}
                `}
              >
-                <span className={`font-inter font-medium text-sm ${activeTab === tab.id ? 'text-gray-900' : 'text-gray-600'}`}>
+                <span className="flex items-center gap-2">
-                  {isMobile ? tab.shortLabel : tab.label}
+                  <span className={`font-ui font-medium text-[14px] ${activeTab === tab.id ? 'text-[#005EB8]' : 'text-gray-600'}`}>
-                </span>
+                    {isMobile ? tab.shortLabel : tab.label}
                {!isMobile && (
                  <span className="block font-inter text-xs text-gray-500 mt-0.5">
                    {tab.description}
                  </span>
-                )}
+                  <span
                    className={`
                      inline-flex items-center justify-center min-w-[20px] h-5 px-1.5 rounded-full text-[11px] font-ui font-medium
                      ${activeTab === tab.id
                        ? 'bg-[#005EB8]/10 text-[#005EB8]'
                        : 'bg-gray-200 text-gray-500'}
                    `}
                  >
                    {categoryCounts[tab.id]}
                  </span>
                </span>
              </button>
            ))}
          </nav>
        </div>
-        {isMobile ? (
+        {/* Tab Panel */}
-          <MobileMedicationList
+        <div
-            medications={sortedMedications}
+          id={`panel-${activeTab}`}
-            expandedRow={expandedRow}
+          role="tabpanel"
-            onToggle={toggleRow}
+          aria-labelledby={`tab-${activeTab}`}
-            prefersReducedMotion={prefersReducedMotion}
+        >
-          />
+          {isMobile ? (
-        ) : (
+            <MobileMedicationList
-          <div className="overflow-x-auto">
+              medications={sortedMedications}
-            <table className="w-full" role="grid">
+              expandedRow={expandedRow}
-              <thead>
+              onToggle={toggleRow}
-                <tr className="border-b border-gray-200 bg-gray-50">
+            />
-                  <th scope="col" className="w-8"></th>
+          ) : (
-                  <th scope="col" className="text-left">
+            <div className="overflow-x-auto">
-                    <button
+              <table className="w-full" role="grid">
-                      type="button"
+                <thead>
-                      onClick={() => handleSort('name')}
+                  <tr className="border-b border-[#E5E7EB] bg-[#F9FAFB]">
-                      className="w-full px-4 py-3 flex items-center gap-2 hover:bg-gray-100 transition-colors"
+                    {(['name', 'dose', 'frequency', 'startYear', 'status'] as SortField[]).map((field) => {
-                    >
+                      const labels: Record<SortField, string> = {
-                      <span className="font-inter font-semibold text-xs uppercase tracking-wide text-gray-400">
+                        name: 'Drug Name',
-                        Drug Name
+                        dose: 'Dose',
-                      </span>
+                        frequency: 'Frequency',
-                      {getSortIcon('name')}
+                        startYear: 'Start',
-                    </button>
+                        status: 'Status',
-                  </th>
+                      }
-                  <th scope="col" className="text-left">
+                      return (
-                    <button
+                        <th key={field} scope="col" className="text-left border-r border-[#E5E7EB] last:border-r-0">
-                      type="button"
+                          <button
-                      onClick={() => handleSort('dose')}
+                            type="button"
-                      className="w-full px-4 py-3 flex items-center gap-2 hover:bg-gray-100 transition-colors"
+                            onClick={() => handleSort(field)}
-                    >
+                            className="w-full px-4 h-[40px] flex items-center gap-2 hover:bg-[#EFF6FF] transition-colors duration-100"
-                      <span className="font-inter font-semibold text-xs uppercase tracking-wide text-gray-400">
+                          >
-                        Dose
+                            <span className="font-ui font-semibold text-[13px] uppercase tracking-[0.03em] text-gray-400">
-                      </span>
+                              {labels[field]}
-                      {getSortIcon('dose')}
+                            </span>
-                    </button>
+                            <SortIndicator field={field} />
-                  </th>
+                          </button>
-                  <th scope="col" className="text-left">
+                        </th>
-                    <button
+                      )
-                      type="button"
+                    })}
-                      onClick={() => handleSort('frequency')}
+                  </tr>
-                      className="w-full px-4 py-3 flex items-center gap-2 hover:bg-gray-100 transition-colors"
+                </thead>
-                    >
+                <tbody>
-                      <span className="font-inter font-semibold text-xs uppercase tracking-wide text-gray-400">
+                  {sortedMedications.map((med, index) => (
-                        Frequency
+                    <MedicationRow
-                      </span>
+                      key={med.id}
-                      {getSortIcon('frequency')}
+                      medication={med}
-                    </button>
+                      isExpanded={expandedRow === med.id}
-                  </th>
+                      isEven={index % 2 === 1}
-                  <th scope="col" className="text-left">
+                      onToggle={() => toggleRow(med.id, med.name)}
-                    <button
+                    />
-                      type="button"
+                  ))}
-                      onClick={() => handleSort('startYear')}
+                </tbody>
-                      className="w-full px-4 py-3 flex items-center gap-2 hover:bg-gray-100 transition-colors"
+              </table>
-                    >
+            </div>
-                      <span className="font-inter font-semibold text-xs uppercase tracking-wide text-gray-400">
+          )}
-                        Start
+        </div>
                      </span>
                      {getSortIcon('startYear')}
                    </button>
                  </th>
                  <th scope="col" className="text-left">
                    <button
                      type="button"
                      onClick={() => handleSort('status')}
                      className="w-full px-4 py-3 flex items-center gap-2 hover:bg-gray-100 transition-colors"
                    >
                      <span className="font-inter font-semibold text-xs uppercase tracking-wide text-gray-400">
                        Status
                      </span>
                      {getSortIcon('status')}
                    </button>
                  </th>
                </tr>
              </thead>
              <tbody>
                {sortedMedications.map((med, index) => (
                  <MedicationRow
                    key={med.id}
                    medication={med}
                    isExpanded={expandedRow === med.id}
                    isAlternating={index % 2 === 1}
                    onToggle={() => toggleRow(med.id)}
                    prefersReducedMotion={prefersReducedMotion}
                  />
                ))}
              </tbody>
            </table>
          </div>
        )}
-        <div className="px-4 py-3 border-t border-gray-200 bg-gray-50">
+        {/* Footer */}
-          <p className="font-inter text-xs text-gray-500">
+        <div className="px-5 py-3 border-t border-[#E5E7EB] bg-[#F9FAFB]">
          <p className="font-ui text-[12px] text-gray-500">
            {sortedMedications.length} medications in this category. {isMobile ? 'Tap' : 'Click'} a row to view prescribing history.
          </p>
        </div>
@@ -232,188 +225,209 @@ export function MedicationsView() {
  )
 }
 /* ─── Mobile Card Layout ───────────────────────────────────────────── */
 interface MobileMedicationListProps {
  medications: Medication[]
  expandedRow: string | null
-  onToggle: (id: string) => void
+  onToggle: (id: string, name: string) => void
  prefersReducedMotion: boolean
 }
-function MobileMedicationList({ medications, expandedRow, onToggle, prefersReducedMotion }: MobileMedicationListProps) {
+function MobileMedicationList({ medications, expandedRow, onToggle }: MobileMedicationListProps) {
  const statusColors = {
    'Active': 'bg-green-500',
    'Historical': 'bg-gray-400',
  }
  return (
-    <div className="divide-y divide-gray-200">
+    <div className="divide-y divide-[#E5E7EB]">
-      {medications.map((med) => (
+      {medications.map((med) => {
-        <div key={med.id} className="bg-white">
+        const isExpanded = expandedRow === med.id
-          <button
+        return (
-            type="button"
+          <div key={med.id} className="bg-white">
-            onClick={() => onToggle(med.id)}
+            <button
-            className="w-full p-4 text-left"
+              type="button"
-            aria-expanded={expandedRow === med.id}
+              onClick={() => onToggle(med.id, med.name)}
-          >
+              className="w-full p-4 text-left hover:bg-[#EFF6FF] transition-colors duration-100 focus-visible:ring-2 focus-visible:ring-[#005EB8]/40 focus-visible:ring-inset"
-            <div className="flex items-start justify-between gap-3">
+              aria-expanded={isExpanded}
-              <div className="flex-1 min-w-0">
+              aria-label={`${med.name}, ${med.dose}% proficiency, ${med.frequency}, since ${med.startYear}`}
-                <h3 className="font-inter font-medium text-sm text-gray-900">
+            >
-                  {med.name}
+              <div className="flex items-start justify-between gap-3">
-                </h3>
+                <div className="flex-1 min-w-0">
-                <div className="flex items-center gap-3 mt-1.5 text-xs text-gray-500">
+                  <h3 className="font-ui font-medium text-[14px] text-gray-900">
-                  <span className="font-geist">{med.dose}%</span>
+                    {med.name}
-                  <span>•</span>
+                  </h3>
-                  <span>{med.frequency}</span>
+                  <div className="flex items-center gap-3 mt-1.5 font-ui text-[12px] text-gray-500">
-                  <span>•</span>
+                    <span className="font-geist">{med.dose}%</span>
-                  <span className="font-geist">Since {med.startYear}</span>
+                    <span className="text-gray-300">·</span>
                    <span>{med.frequency}</span>
                    <span className="text-gray-300">·</span>
                    <span className="font-geist">Since {med.startYear}</span>
                  </div>
                </div>
                <div className="flex items-center gap-2 flex-shrink-0">
                  <StatusDot status={med.status} />
                  <motion.div
                    animate={{ rotate: isExpanded ? 180 : 0 }}
                    transition={{ duration: prefersReducedMotion ? 0 : 0.2 }}
                  >
                    <ChevronDown size={16} className="text-gray-400" />
                  </motion.div>
                </div>
              </div>
-              <div className="flex items-center gap-2 flex-shrink-0">
+            </button>
-                <span className={`w-2 h-2 rounded-full ${statusColors[med.status]}`} />
+            <AnimatePresence initial={false}>
-                <span className="text-xs text-gray-600">{med.status}</span>
+              {isExpanded && (
-                {expandedRow === med.id ? (
+                <motion.div
-                  <ChevronUp size={16} className="text-gray-400" />
+                  initial={{ height: 0 }}
-                ) : (
+                  animate={{ height: 'auto' }}
-                  <ChevronDown size={16} className="text-gray-400" />
+                  exit={{ height: 0 }}
-                )}
+                  transition={{ duration: prefersReducedMotion ? 0 : 0.2, ease: [0.4, 0, 0.2, 1] }}
-              </div>
+                  className="overflow-hidden"
-            </div>
+                >
-          </button>
+                  <div className="px-4 pb-4">
-          {expandedRow === med.id && (
+                    <PrescribingHistory history={med.prescribingHistory} />
-            <div className={`px-4 pb-4 ${prefersReducedMotion ? '' : 'animate-fadeIn'}`}>
+                  </div>
-              <div className="bg-gray-50 rounded p-3">
+                </motion.div>
-                <p className="font-inter font-medium text-xs uppercase tracking-wide text-gray-400 mb-2">
+              )}
-                  Prescribing History
+            </AnimatePresence>
-                </p>
+          </div>
-                <div className="space-y-1.5">
+        )
-                  {med.prescribingHistory.map((entry, index) => (
+      })}
                    <div key={index} className="flex gap-3">
                      <span className="font-geist font-medium text-xs text-gray-500 w-10 flex-shrink-0">
                        {entry.year}
                      </span>
                      <span className="font-geist text-xs text-gray-600">
                        {entry.description}
                      </span>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          )}
        </div>
      ))}
    </div>
  )
 }
 /* ─── Desktop Table Row ────────────────────────────────────────────── */
 interface MedicationRowProps {
  medication: Medication
  isExpanded: boolean
-  isAlternating: boolean
+  isEven: boolean
  onToggle: () => void
  prefersReducedMotion: boolean
 }
-function MedicationRow({ medication, isExpanded, isAlternating, onToggle, prefersReducedMotion }: MedicationRowProps) {
+function MedicationRow({ medication, isExpanded, isEven, onToggle }: MedicationRowProps) {
  const statusColors = {
    'Active': 'bg-green-500',
    'Historical': 'bg-gray-400',
  }
  return (
    <>
      <tr
        className={`
-          border-b border-gray-200 cursor-pointer transition-colors duration-100
+          h-[40px] border-b border-[#E5E7EB] cursor-pointer transition-colors duration-100
-          ${isAlternating ? 'bg-gray-50' : 'bg-white'}
+          ${isEven ? 'bg-[#F9FAFB]' : 'bg-white'}
-          hover:bg-blue-50
+          hover:bg-[#EFF6FF]
        `}
        onClick={onToggle}
        role="row"
        aria-expanded={isExpanded}
        tabIndex={0}
        onKeyDown={(e) => {
          if (e.key === 'Enter' || e.key === ' ') {
            e.preventDefault()
            onToggle()
          }
        }}
      >
-        <td className="w-8 px-2 py-0">
+        <td className="px-4 py-2 border-r border-[#E5E7EB]">
-          <button
+          <div className="flex items-center gap-2">
-            type="button"
+            <motion.div
-            className="p-1 hover:bg-gray-200 rounded transition-colors"
+              animate={{ rotate: isExpanded ? 180 : 0 }}
-            aria-label={isExpanded ? 'Collapse' : 'Expand'}
+              transition={{ duration: prefersReducedMotion ? 0 : 0.2 }}
-          >
+              className="flex-shrink-0"
-            {isExpanded ? (
+            >
-              <ChevronUp size={16} className="text-gray-500" />
+              <ChevronDown size={14} className="text-gray-400" />
-            ) : (
+            </motion.div>
-              <ChevronDown size={16} className="text-gray-500" />
+            <span className="font-ui font-medium text-[14px] text-gray-900">
-            )}
+              {medication.name}
-          </button>
+            </span>
          </div>
        </td>
-        <td className="px-4 py-2.5">
+        <td className="px-4 py-2 border-r border-[#E5E7EB]">
-          <span className="font-inter font-medium text-sm text-gray-900">
+          <span className="font-geist text-[13px] text-gray-700">
            {medication.name}
          </span>
        </td>
        <td className="px-4 py-2.5">
          <span className="font-geist text-sm text-gray-700">
            {medication.dose}%
          </span>
        </td>
-        <td className="px-4 py-2.5">
+        <td className="px-4 py-2 border-r border-[#E5E7EB]">
-          <span className="font-inter text-sm text-gray-700">
+          <span className="font-ui text-[13px] text-gray-700">
            {medication.frequency}
          </span>
        </td>
-        <td className="px-4 py-2.5">
+        <td className="px-4 py-2 border-r border-[#E5E7EB]">
-          <span className="font-geist text-sm text-gray-700">
+          <span className="font-geist text-[13px] text-gray-700">
            {medication.startYear}
          </span>
        </td>
-        <td className="px-4 py-2.5">
+        <td className="px-4 py-2">
-          <span className="flex items-center gap-2">
+          <StatusDot status={medication.status} />
            <span className={`w-2 h-2 rounded-full ${statusColors[medication.status]}`} />
            <span className="font-inter text-sm text-gray-600">{medication.status}</span>
          </span>
        </td>
      </tr>
-      {isExpanded && (
+      <AnimatePresence initial={false}>
-        <PrescribingHistory
+        {isExpanded && (
-          history={medication.prescribingHistory}
+          <motion.tr
-          prefersReducedMotion={prefersReducedMotion}
+            initial={{ height: 0 }}
-        />
+            animate={{ height: 'auto' }}
-      )}
+            exit={{ height: 0 }}
            transition={{ duration: prefersReducedMotion ? 0 : 0.2, ease: [0.4, 0, 0.2, 1] }}
            className="overflow-hidden"
          >
            <td colSpan={5} className="p-0">
              <motion.div
                initial={{ height: 0 }}
                animate={{ height: 'auto' }}
                exit={{ height: 0 }}
                transition={{ duration: prefersReducedMotion ? 0 : 0.2, ease: [0.4, 0, 0.2, 1] }}
                className="overflow-hidden"
              >
                <div className="px-6 py-4 bg-[#F9FAFB] border-b border-[#E5E7EB]">
                  <PrescribingHistory history={medication.prescribingHistory} />
                </div>
              </motion.div>
            </td>
          </motion.tr>
        )}
      </AnimatePresence>
    </>
  )
 }
-interface PrescribingHistoryProps {
+/* ─── Status Dot ───────────────────────────────────────────────────── */
  history: { year: number; description: string }[]
  prefersReducedMotion: boolean
 }
-function PrescribingHistory({ history, prefersReducedMotion }: PrescribingHistoryProps) {
+function StatusDot({ status }: { status: 'Active' | 'Historical' }) {
  const color = status === 'Active' ? 'bg-[#22C55E]' : 'bg-gray-400'
  return (
-    <tr className="bg-gray-50 border-b border-gray-200">
+    <div className="flex items-center gap-2">
-      <td colSpan={6} className="px-4 py-4">
+      <span className={`w-1.5 h-1.5 rounded-full ${color}`} aria-hidden="true" />
-        <div
+      <span className="font-ui text-[13px] text-gray-700">{status}</span>
-          className={`
+    </div>
-            pl-8
+  )
-            ${prefersReducedMotion ? '' : 'animate-fadeIn'}
+}
-          `}
+
-        >
+/* ─── Prescribing History (shared) ─────────────────────────────────── */
-          <p className="font-inter font-medium text-xs uppercase tracking-wide text-gray-400 mb-3">
+
-            Prescribing History
+interface PrescribingHistoryProps {
-          </p>
+  history: { year: number; description: string }[]
-          <div className="space-y-2">
+}
-            {history.map((entry, index) => (
+
-              <div key={index} className="flex gap-4">
+function PrescribingHistory({ history }: PrescribingHistoryProps) {
-                <span className="font-geist font-medium text-sm text-gray-500 w-12 flex-shrink-0">
+  return (
-                  {entry.year}
+    <div className="pl-6">
-                </span>
+      <p className="font-ui font-semibold text-[12px] uppercase tracking-[0.05em] text-gray-400 mb-3">
-                <span className="font-geist text-sm text-gray-600">
+        Prescribing History
-                  {entry.description}
+      </p>
-                </span>
+      <div className="relative">
-              </div>
+        {/* Vertical timeline line */}
-            ))}
+        <div className="absolute left-[18px] top-1 bottom-1 w-px bg-[#E5E7EB]" aria-hidden="true" />
-          </div>
+        <div className="space-y-2">
-        </div>
+          {history.map((entry, index) => (
-      </td>
+            <div key={index} className="flex gap-4 relative">
-    </tr>
+              {/* Timeline dot */}
              <div className="relative z-10 flex-shrink-0 mt-1.5">
                <span className="block w-2 h-2 rounded-full bg-[#005EB8] ring-2 ring-white" aria-hidden="true" />
              </div>
              <span className="font-geist font-semibold text-[12px] text-gray-600 w-10 flex-shrink-0 pt-[1px]">
                {entry.year}
              </span>
              <span className="font-geist text-[12px] text-gray-500 pt-[1px]">
                {entry.description}
              </span>
            </div>
          ))}
        </div>
      </div>
    </div>
  )
 }
@@ -1,9 +1,11 @@
-import { useState, useEffect, useRef } from 'react'
+import { useState, useCallback } from 'react'
-import { ChevronDown, ChevronUp, ExternalLink } from 'lucide-react'
+import { motion, AnimatePresence } from 'framer-motion'
 import { ChevronDown, ExternalLink } from 'lucide-react'
 import { problems } from '@/data/problems'
 import { consultations } from '@/data/consultations'
 import type { Problem, Consultation } from '@/types/pmr'
 import { useBreakpoint } from '@/hooks/useBreakpoint'
 import { useAccessibility } from '@/contexts/AccessibilityContext'
 interface ProblemsViewProps {
  onNavigate?: (view: 'consultations', itemId?: string) => void
@@ -24,14 +26,15 @@ function TrafficLight({ status }: { status: ProblemStatus }) {
    <div className="flex items-center gap-2">
      <span
        className={`w-2 h-2 rounded-full ${bg}`}
-        aria-label={`Status: ${label}`}
+        aria-hidden="true"
        role="img"
      />
-      <span className="text-xs text-gray-600">{label}</span>
+      <span className="font-ui text-xs text-gray-600">{label}</span>
    </div>
  )
 }
 const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches
 function ProblemRow({
  problem,
  isExpanded,
@@ -45,18 +48,6 @@ function ProblemRow({
  onNavigate?: (view: 'consultations', itemId?: string) => void
  showOutcome: boolean
 }) {
  const contentRef = useRef<HTMLDivElement>(null)
  const [contentHeight, setContentHeight] = useState<number | undefined>(undefined)
  const prefersReducedMotion = useRef(
    window.matchMedia('(prefers-reduced-motion: reduce)').matches
  ).current
  useEffect(() => {
    if (contentRef.current) {
      setContentHeight(contentRef.current.scrollHeight)
    }
  }, [isExpanded])
  const linkedConsultations = (problem.linkedConsultations ?? [])
    .map((id) => consultations.find((c) => c.id === id))
    .filter((c): c is Consultation => c !== undefined)
@@ -69,86 +60,99 @@ function ProblemRow({
  return (
    <>
-      <tr
+      <motion.tr
-        className={`cursor-pointer hover:bg-blue-50 transition-colors ${
+        className={`cursor-pointer hover:bg-[#EFF6FF] transition-colors ${
-          isExpanded ? 'bg-blue-50' : ''
+          isExpanded ? 'bg-[#EFF6FF]' : ''
        }`}
        onClick={onToggle}
        aria-expanded={isExpanded}
        initial={false}
      >
        <td className="border border-gray-200 px-3 py-2.5">
          <TrafficLight status={problem.status} />
        </td>
        <td className="border border-gray-200 px-3 py-2.5">
-          <span className="font-mono text-xs text-gray-500">[{problem.code}]</span>
+          <span className="font-geist text-xs text-gray-500">[{problem.code}]</span>
        </td>
        <td className="border border-gray-200 px-3 py-2.5">
-          <span className="text-sm text-gray-900">{problem.description}</span>
+          <span className="font-ui text-[14px] text-gray-900">{problem.description}</span>
        </td>
        <td className="border border-gray-200 px-3 py-2.5">
-          <span className="font-mono text-xs text-gray-500">
+          <span className="font-geist text-xs text-gray-500">
            {problem.resolved || problem.since}
          </span>
        </td>
        {showOutcome && (
          <td className="border border-gray-200 px-3 py-2.5">
            {problem.outcome && (
-              <span className="text-sm text-gray-700">{problem.outcome}</span>
+              <span className="font-ui text-[13px] text-gray-700">{problem.outcome}</span>
            )}
          </td>
        )}
        <td className="border border-gray-200 px-3 py-2.5 w-10">
-          <button
+          <motion.div
-            className="p-1 hover:bg-gray-100 rounded transition-colors"
+            animate={{ rotate: isExpanded ? 180 : 0 }}
-            aria-label={isExpanded ? 'Collapse' : 'Expand'}
+            transition={{ duration: prefersReducedMotion ? 0 : 0.2 }}
            className="inline-block"
          >
-            {isExpanded ? (
+            <button
-              <ChevronUp className="w-4 h-4 text-gray-400" />
+              className="p-1 hover:bg-gray-100 rounded transition-colors"
-            ) : (
+              aria-label={isExpanded ? 'Collapse' : 'Expand'}
            >
              <ChevronDown className="w-4 h-4 text-gray-400" />
-            )}
+            </button>
-          </button>
+          </motion.div>
        </td>
-      </tr>
+      </motion.tr>
-      <tr>
+      <AnimatePresence initial={false}>
-        <td colSpan={showOutcome ? 6 : 5} className="p-0 border border-gray-200">
+        {isExpanded && (
-          <div
+          <motion.tr
-            style={{
+            key={`${problem.id}-expanded`}
-              height: isExpanded ? contentHeight : 0,
+            initial={{ opacity: 0 }}
-              overflow: 'hidden',
+            animate={{ opacity: 1 }}
-              transition: prefersReducedMotion ? 'none' : 'height 200ms ease-out',
+            exit={{ opacity: 0 }}
-            }}
+            transition={{ duration: prefersReducedMotion ? 0 : 0.2, ease: 'easeOut' }}
          >
-            <div ref={contentRef} className="bg-gray-50 p-4">
+            <td colSpan={showOutcome ? 6 : 5} className="p-0 border border-gray-200">
-              <div className="text-sm text-gray-700 leading-relaxed mb-4">
+              <motion.div
-                {problem.narrative}
+                initial={{ height: 0 }}
-              </div>
+                animate={{ height: 'auto' }}
-              {linkedConsultations.length > 0 && (
+                exit={{ height: 0 }}
-                <div>
+                transition={{ duration: prefersReducedMotion ? 0 : 0.2, ease: 'easeOut' }}
-                  <span className="text-xs font-semibold text-gray-400 uppercase tracking-wider">
+                style={{ overflow: 'hidden' }}
-                    Linked Consultations:
+              >
-                  </span>
+                <div className="bg-gray-50 p-4">
-                  <div className="mt-2 flex flex-wrap gap-2">
+                  <div className="font-ui text-[14px] text-gray-700 leading-relaxed mb-4">
-                    {linkedConsultations.map((consultation) => (
+                    {problem.narrative}
                      <button
                        key={consultation.id}
                        onClick={(e) => {
                          e.stopPropagation()
                          handleLinkedClick(consultation.id)
                        }}
                        className="inline-flex items-center gap-1 text-xs text-pmr-nhsblue hover:underline"
                      >
                        <ExternalLink className="w-3 h-3" />
                        {consultation.organization} — {consultation.role}
                      </button>
                    ))}
                  </div>
                  {linkedConsultations.length > 0 && (
                    <div>
                      <span className="font-ui text-xs font-semibold text-gray-400 uppercase tracking-wider">
                        Linked Consultations:
                      </span>
                      <div className="mt-2 flex flex-wrap gap-2">
                        {linkedConsultations.map((consultation) => (
                          <button
                            key={consultation.id}
                            onClick={(e) => {
                              e.stopPropagation()
                              handleLinkedClick(consultation.id)
                            }}
                            className="inline-flex items-center gap-1 text-xs text-pmr-nhsblue hover:underline focus-visible:ring-2 focus-visible:ring-pmr-nhsblue/40"
                          >
                            <ExternalLink className="w-3 h-3" />
                            {consultation.organization} — {consultation.role}
                          </button>
                        ))}
                      </div>
                    </div>
                  )}
                </div>
-              )}
+              </motion.div>
-            </div>
+            </td>
-          </div>
+          </motion.tr>
-        </td>
+        )}
-      </tr>
+      </AnimatePresence>
    </>
  )
 }
@@ -177,23 +181,23 @@ function MobileProblemCard({
  }
  return (
-    <div className="bg-white border border-gray-200 rounded">
+    <div className="bg-white border border-gray-200 rounded shadow-pmr">
      <button
        type="button"
        onClick={onToggle}
-        className="w-full p-4 text-left"
+        className="w-full p-4 text-left focus-visible:ring-2 focus-visible:ring-pmr-nhsblue/40"
        aria-expanded={isExpanded}
      >
        <div className="flex items-start justify-between gap-3">
          <div className="flex-1 min-w-0">
            <div className="flex items-center gap-2 mb-1">
              <TrafficLight status={problem.status} />
-              <span className="font-mono text-xs text-gray-500">[{problem.code}]</span>
+              <span className="font-geist text-xs text-gray-500">[{problem.code}]</span>
            </div>
-            <h3 className="font-inter font-medium text-sm text-gray-900">
+            <h3 className="font-ui font-medium text-[14px] text-gray-900">
              {problem.description}
            </h3>
-            <div className="flex items-center gap-2 mt-1.5 text-xs text-gray-500">
+            <div className="flex items-center gap-2 mt-1.5 text-xs text-gray-500 font-ui">
              <span>{showOutcome ? 'Resolved' : 'Since'}: {problem.resolved || problem.since}</span>
              {showOutcome && problem.outcome && (
                <>
@@ -203,44 +207,55 @@ function MobileProblemCard({
              )}
            </div>
          </div>
-          <div className="flex-shrink-0 mt-1">
+          <motion.div
-            {isExpanded ? (
+            animate={{ rotate: isExpanded ? 180 : 0 }}
-              <ChevronUp size={16} className="text-gray-400" />
+            transition={{ duration: prefersReducedMotion ? 0 : 0.2 }}
-            ) : (
+            className="flex-shrink-0 mt-1"
-              <ChevronDown size={16} className="text-gray-400" />
+          >
-            )}
+            <ChevronDown size={16} className="text-gray-400" />
-          </div>
+          </motion.div>
        </div>
      </button>
-      {isExpanded && (
+      <AnimatePresence initial={false}>
-        <div className="px-4 pb-4 border-t border-gray-100">
+        {isExpanded && (
-          <div className="pt-3 text-sm text-gray-700 leading-relaxed">
+          <motion.div
-            {problem.narrative}
+            initial={{ height: 0, opacity: 0 }}
-          </div>
+            animate={{ height: 'auto', opacity: 1 }}
-          {linkedConsultations.length > 0 && (
+            exit={{ height: 0, opacity: 0 }}
-            <div className="mt-3">
+            transition={{ duration: prefersReducedMotion ? 0 : 0.2, ease: 'easeOut' }}
-              <span className="text-xs font-semibold text-gray-400 uppercase tracking-wider">
+            style={{ overflow: 'hidden' }}
-                Linked Consultations:
+            className="border-t border-gray-100"
-              </span>
+          >
-              <div className="mt-2 flex flex-wrap gap-2">
+            <div className="px-4 pb-4">
-                {linkedConsultations.map((consultation) => (
+              <div className="pt-3 font-ui text-[14px] text-gray-700 leading-relaxed">
-                  <button
+                {problem.narrative}
                    key={consultation.id}
                    onClick={(e) => {
                      e.stopPropagation()
                      handleLinkedClick(consultation.id)
                    }}
                    className="inline-flex items-center gap-1 text-xs text-pmr-nhsblue hover:underline"
                  >
                    <ExternalLink className="w-3 h-3" />
                    {consultation.organization}
                  </button>
                ))}
              </div>
              {linkedConsultations.length > 0 && (
                <div className="mt-3">
                  <span className="font-ui text-xs font-semibold text-gray-400 uppercase tracking-wider">
                    Linked Consultations:
                  </span>
                  <div className="mt-2 flex flex-wrap gap-2">
                    {linkedConsultations.map((consultation) => (
                      <button
                        key={consultation.id}
                        onClick={(e) => {
                          e.stopPropagation()
                          handleLinkedClick(consultation.id)
                        }}
                        className="inline-flex items-center gap-1 text-xs text-pmr-nhsblue hover:underline focus-visible:ring-2 focus-visible:ring-pmr-nhsblue/40"
                      >
                        <ExternalLink className="w-3 h-3" />
                        {consultation.organization} — {consultation.role}
                      </button>
                    ))}
                  </div>
                </div>
              )}
            </div>
-          )}
+          </motion.div>
-        </div>
+        )}
-      )}
+      </AnimatePresence>
    </div>
  )
 }
@@ -248,21 +263,36 @@ function MobileProblemCard({
 export function ProblemsView({ onNavigate }: ProblemsViewProps) {
  const [expandedId, setExpandedId] = useState<string | null>(null)
  const { isMobile } = useBreakpoint()
  const { setExpandedItem } = useAccessibility()
  const activeProblems = problems.filter(
    (p) => p.status === 'Active' || p.status === 'In Progress'
  )
  const resolvedProblems = problems.filter((p) => p.status === 'Resolved')
-  const handleToggle = (id: string) => {
+  const handleToggle = useCallback(
-    setExpandedId(expandedId === id ? null : id)
+    (id: string) => {
-  }
+      const newExpandedId = expandedId === id ? null : id
      setExpandedId(newExpandedId)
      // Update breadcrumb context - pass the problem description as the expanded item ID
      if (newExpandedId) {
        const problem = problems.find((p) => p.id === newExpandedId)
        if (problem) {
          setExpandedItem(problem.description)
        }
      } else {
        setExpandedItem(null)
      }
    },
    [expandedId, setExpandedItem]
  )
  return (
    <div className="space-y-6">
-      <div className="bg-white border border-gray-200 rounded overflow-hidden">
+      <div className="bg-white border border-gray-200 rounded overflow-hidden shadow-pmr">
        <div className="bg-gray-50 border-b border-gray-200 px-4 py-3">
-          <h2 className="font-inter font-semibold text-sm uppercase tracking-wider text-gray-500">
+          <h2 className="font-ui font-semibold text-[13px] uppercase tracking-wider text-gray-500">
            Active Problems
          </h2>
        </div>
@@ -285,31 +315,31 @@ export function ProblemsView({ onNavigate }: ProblemsViewProps) {
              <tr className="bg-gray-50">
                <th
                  scope="col"
-                  className="border border-gray-200 px-3 py-2 text-left font-inter font-semibold text-xs uppercase tracking-wider text-gray-400 w-28"
+                  className="border border-gray-200 px-3 py-2 text-left font-ui font-semibold text-[13px] uppercase tracking-wider text-gray-400 w-28"
                >
                  Status
                </th>
                <th
                  scope="col"
-                  className="border border-gray-200 px-3 py-2 text-left font-inter font-semibold text-xs uppercase tracking-wider text-gray-400 w-28"
+                  className="border border-gray-200 px-3 py-2 text-left font-ui font-semibold text-[13px] uppercase tracking-wider text-gray-400 w-28"
                >
                  Code
                </th>
                <th
                  scope="col"
-                  className="border border-gray-200 px-3 py-2 text-left font-inter font-semibold text-xs uppercase tracking-wider text-gray-400"
+                  className="border border-gray-200 px-3 py-2 text-left font-ui font-semibold text-[13px] uppercase tracking-wider text-gray-400"
                >
                  Problem
                </th>
                <th
                  scope="col"
-                  className="border border-gray-200 px-3 py-2 text-left font-inter font-semibold text-xs uppercase tracking-wider text-gray-400 w-28"
+                  className="border border-gray-200 px-3 py-2 text-left font-ui font-semibold text-[13px] uppercase tracking-wider text-gray-400 w-28"
                >
                  Since
                </th>
                <th
                  scope="col"
-                  className="border border-gray-200 px-3 py-2 text-left font-inter font-semibold text-xs uppercase tracking-wider text-gray-400 w-10"
+                  className="border border-gray-200 px-3 py-2 text-left font-ui font-semibold text-[13px] uppercase tracking-wider text-gray-400 w-10"
                >
                  <span className="sr-only">Expand</span>
                </th>
@@ -330,13 +360,13 @@ export function ProblemsView({ onNavigate }: ProblemsViewProps) {
          </table>
        )}
        {activeProblems.length === 0 && (
-          <div className="p-4 text-sm text-gray-500 text-center">No active problems</div>
+          <div className="p-4 font-ui text-[14px] text-gray-500 text-center">No active problems</div>
        )}
      </div>
-      <div className="bg-white border border-gray-200 rounded overflow-hidden">
+      <div className="bg-white border border-gray-200 rounded overflow-hidden shadow-pmr">
        <div className="bg-gray-50 border-b border-gray-200 px-4 py-3">
-          <h2 className="font-inter font-semibold text-sm uppercase tracking-wider text-gray-500">
+          <h2 className="font-ui font-semibold text-[13px] uppercase tracking-wider text-gray-500">
            Resolved Problems
          </h2>
        </div>
@@ -359,37 +389,37 @@ export function ProblemsView({ onNavigate }: ProblemsViewProps) {
              <tr className="bg-gray-50">
                <th
                  scope="col"
-                  className="border border-gray-200 px-3 py-2 text-left font-inter font-semibold text-xs uppercase tracking-wider text-gray-400 w-28"
+                  className="border border-gray-200 px-3 py-2 text-left font-ui font-semibold text-[13px] uppercase tracking-wider text-gray-400 w-28"
                >
                  Status
                </th>
                <th
                  scope="col"
-                  className="border border-gray-200 px-3 py-2 text-left font-inter font-semibold text-xs uppercase tracking-wider text-gray-400 w-28"
+                  className="border border-gray-200 px-3 py-2 text-left font-ui font-semibold text-[13px] uppercase tracking-wider text-gray-400 w-28"
                >
                  Code
                </th>
                <th
                  scope="col"
-                  className="border border-gray-200 px-3 py-2 text-left font-inter font-semibold text-xs uppercase tracking-wider text-gray-400"
+                  className="border border-gray-200 px-3 py-2 text-left font-ui font-semibold text-[13px] uppercase tracking-wider text-gray-400"
                >
                  Problem
                </th>
                <th
                  scope="col"
-                  className="border border-gray-200 px-3 py-2 text-left font-inter font-semibold text-xs uppercase tracking-wider text-gray-400 w-28"
+                  className="border border-gray-200 px-3 py-2 text-left font-ui font-semibold text-[13px] uppercase tracking-wider text-gray-400 w-28"
                >
                  Resolved
                </th>
                <th
                  scope="col"
-                  className="border border-gray-200 px-3 py-2 text-left font-inter font-semibold text-xs uppercase tracking-wider text-gray-400"
+                  className="border border-gray-200 px-3 py-2 text-left font-ui font-semibold text-[13px] uppercase tracking-wider text-gray-400"
                >
                  Outcome
                </th>
                <th
                  scope="col"
-                  className="border border-gray-200 px-3 py-2 text-left font-inter font-semibold text-xs uppercase tracking-wider text-gray-400 w-10"
+                  className="border border-gray-200 px-3 py-2 text-left font-ui font-semibold text-[13px] uppercase tracking-wider text-gray-400 w-10"
                >
                  <span className="sr-only">Expand</span>
                </th>
@@ -410,7 +440,7 @@ export function ProblemsView({ onNavigate }: ProblemsViewProps) {
          </table>
        )}
        {resolvedProblems.length === 0 && (
-          <div className="p-4 text-sm text-gray-500 text-center">No resolved problems</div>
+          <div className="p-4 font-ui text-[14px] text-gray-500 text-center">No resolved problems</div>
        )}
      </div>
    </div>
@@ -1,4 +1,4 @@
-import { useState, useRef } from 'react'
+import { useState } from 'react'
 import { Send, Mail, Phone, MapPin, ExternalLink, Loader2, CheckCircle } from 'lucide-react'
 import { patient } from '@/data/patient'
@@ -19,6 +19,11 @@ interface FormErrors {
  referrerEmail?: string
 }
 const prefersReducedMotion =
  typeof window !== 'undefined'
    ? window.matchMedia('(prefers-reduced-motion: reduce)').matches
    : false
 function generateRefNumber(): string {
  const now = new Date()
  const year = now.getFullYear()
@@ -48,9 +53,9 @@ function PriorityOption({
  }
  const labelColors: Record<Priority, string> = {
-    urgent: 'text-red-700',
+    urgent: 'text-red-600',
    routine: 'text-pmr-nhsblue',
-    'two-week-wait': 'text-amber-700',
+    'two-week-wait': 'text-amber-600',
  }
  return (
@@ -70,9 +75,9 @@ function PriorityOption({
      >
        {selected && <span className={`w-2 h-2 rounded-full ${dotColors[value]}`} />}
      </span>
-      <span className={`text-sm font-medium ${labelColors[value]}`}>{label}</span>
+      <span className={`font-ui text-sm font-medium ${labelColors[value]}`}>{label}</span>
      <span
-        className="absolute left-0 bottom-full mb-2 px-2 py-1 bg-gray-900 text-white text-xs rounded opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none whitespace-nowrap z-10"
+        className="absolute left-0 bottom-full mb-2 px-2 py-1 bg-gray-900 text-white text-xs font-ui rounded opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none whitespace-nowrap z-10"
        role="tooltip"
      >
        {tooltip}
@@ -109,7 +114,7 @@ function ContactMethodOption({
      >
        {selected && <span className="w-2 h-2 rounded-full bg-pmr-nhsblue" />}
      </span>
-      <span className="text-sm text-gray-700">{label}</span>
+      <span className="font-ui text-sm text-gray-700">{label}</span>
    </label>
  )
 }
@@ -129,12 +134,12 @@ function FormField({
 }) {
  return (
    <div className="space-y-1">
-      <label htmlFor={id} className="block font-inter font-medium text-[13px] text-gray-600">
+      <label htmlFor={id} className="block font-ui font-medium text-[13px] text-gray-600">
        {label}
        {required && <span className="text-red-500 ml-0.5">*</span>}
      </label>
      {children}
-      {error && <p className="text-xs text-red-600 mt-1">{error}</p>}
+      {error && <p className="font-ui text-xs text-red-600 mt-1">{error}</p>}
    </div>
  )
 }
@@ -173,29 +178,29 @@ function DirectContactTable() {
  ]
  return (
-    <div className="bg-white border border-gray-200 rounded">
+    <div className="bg-white border border-[#E5E7EB] rounded shadow-pmr">
-      <div className="bg-gray-50 border-b border-gray-200 px-4 py-3">
+      <div className="bg-[#F9FAFB] border-b border-[#E5E7EB] px-4 py-3">
-        <h3 className="font-inter font-semibold text-sm uppercase tracking-wider text-gray-500">
+        <h3 className="font-ui font-semibold text-sm uppercase tracking-wider text-gray-500">
          Direct Contact
        </h3>
      </div>
-      <div className="divide-y divide-gray-200">
+      <div className="divide-y divide-[#E5E7EB]">
        {contactMethods.map((method) => (
-          <div key={method.label} className="flex items-center justify-between px-4 py-3">
+          <div key={method.label} className="flex items-center justify-between px-4 py-3 hover:bg-[#EFF6FF] transition-colors">
            <div className="flex items-center gap-3">
              <method.icon className="w-4 h-4 text-gray-400" />
-              <span className="font-inter text-sm text-gray-500 w-20">{method.label}</span>
+              <span className="font-ui text-sm text-gray-500 w-20">{method.label}</span>
              {method.href ? (
                <a
                  href={method.href}
                  target={method.external ? '_blank' : undefined}
                  rel={method.external ? 'noopener noreferrer' : undefined}
-                  className="font-mono text-sm text-pmr-nhsblue hover:underline"
+                  className="font-geist text-sm text-pmr-nhsblue hover:underline focus-visible:ring-2 focus-visible:ring-pmr-nhsblue/40 focus-visible:outline-none rounded"
                >
                  {method.value}
                </a>
              ) : (
-                <span className="font-mono text-sm text-gray-900">{method.value}</span>
+                <span className="font-geist text-sm text-gray-900">{method.value}</span>
              )}
            </div>
            {method.href && (
@@ -203,7 +208,7 @@ function DirectContactTable() {
                href={method.href}
                target={method.external ? '_blank' : undefined}
                rel={method.external ? 'noopener noreferrer' : undefined}
-                className="font-inter text-xs text-pmr-nhsblue hover:underline flex items-center gap-1"
+                className="font-ui text-xs text-pmr-nhsblue hover:underline flex items-center gap-1 focus-visible:ring-2 focus-visible:ring-pmr-nhsblue/40 focus-visible:outline-none rounded"
              >
                {method.action}
                {method.external && <ExternalLink className="w-3 h-3" />}
@@ -217,10 +222,6 @@ function DirectContactTable() {
 }
 export function ReferralsView() {
  const prefersReducedMotion = useRef(
    window.matchMedia('(prefers-reduced-motion: reduce)').matches
  ).current
  const [formData, setFormData] = useState<FormData>({
    priority: 'routine',
    referrerName: '',
@@ -281,9 +282,9 @@ export function ReferralsView() {
  if (isSuccess) {
    return (
      <div className="space-y-6">
-        <div className="bg-white border border-gray-200 rounded">
+        <div className="bg-white border border-[#E5E7EB] rounded shadow-pmr">
-          <div className="bg-gray-50 border-b border-gray-200 px-4 py-3">
+          <div className="bg-[#F9FAFB] border-b border-[#E5E7EB] px-4 py-3">
-            <h2 className="font-inter font-semibold text-sm uppercase tracking-wider text-gray-500">
+            <h2 className="font-ui font-semibold text-sm uppercase tracking-wider text-gray-500">
              New Referral
            </h2>
          </div>
@@ -295,16 +296,16 @@ export function ReferralsView() {
            >
              <CheckCircle className="w-8 h-8 text-green-600" />
            </div>
-            <h3 className="font-inter font-semibold text-lg text-gray-900 mb-2">
+            <h3 className="font-ui font-semibold text-lg text-gray-900 mb-2">
              Referral sent successfully
            </h3>
-            <p className="font-mono text-sm text-gray-500 mb-1">Reference: {refNumber}</p>
+            <p className="font-geist text-sm text-gray-500 mb-1">Reference: {refNumber}</p>
-            <p className="font-inter text-sm text-gray-500 mb-6">
+            <p className="font-ui text-sm text-gray-500 mb-6">
              Expected response time: 24-48 hours
            </p>
            <button
              onClick={handleReset}
-              className="font-inter font-medium text-sm px-4 py-2 bg-pmr-nhsblue text-white rounded hover:bg-blue-700 transition-colors"
+              className="font-ui font-medium text-sm px-4 py-2 bg-pmr-nhsblue text-white rounded hover:bg-[#004D9F] transition-colors focus-visible:ring-2 focus-visible:ring-pmr-nhsblue/40 focus-visible:outline-none"
            >
              Send Another Referral
            </button>
@@ -317,33 +318,33 @@ export function ReferralsView() {
  return (
    <div className="space-y-6">
-      <div className="bg-white border border-gray-200 rounded">
+      <div className="bg-white border border-[#E5E7EB] rounded shadow-pmr">
-        <div className="bg-gray-50 border-b border-gray-200 px-4 py-3">
+        <div className="bg-[#F9FAFB] border-b border-[#E5E7EB] px-4 py-3">
-          <h2 className="font-inter font-semibold text-sm uppercase tracking-wider text-gray-500">
+          <h2 className="font-ui font-semibold text-sm uppercase tracking-wider text-gray-500">
            New Referral
          </h2>
-          <p className="font-inter text-xs text-gray-400 mt-1">
+          <p className="font-ui text-xs text-gray-400 mt-1">
            Contact Andy using a clinical referral form format.
          </p>
        </div>
        <form onSubmit={handleSubmit} className="p-4 space-y-6">
          <div className="grid grid-cols-2 gap-6">
            <div className="space-y-1">
-              <span className="block font-inter font-medium text-[13px] text-gray-600">
+              <span className="block font-ui font-medium text-[13px] text-gray-600">
                Referring to
              </span>
-              <span className="font-inter text-sm text-gray-900">{patient.name}</span>
+              <span className="font-ui text-sm text-gray-900">{patient.name}</span>
            </div>
            <div className="space-y-1">
-              <span className="block font-inter font-medium text-[13px] text-gray-600">
+              <span className="block font-ui font-medium text-[13px] text-gray-600">
                NHS Number
              </span>
-              <span className="font-mono text-sm text-gray-900">{patient.nhsNumber}</span>
+              <span className="font-geist text-sm text-gray-900">{patient.nhsNumber}</span>
            </div>
          </div>
          <div className="space-y-2">
-            <span className="block font-inter font-medium text-[13px] text-gray-600">
+            <span className="block font-ui font-medium text-[13px] text-gray-600">
              Priority
            </span>
            <div className="flex gap-6">
@@ -383,7 +384,7 @@ export function ReferralsView() {
                id="referrerName"
                value={formData.referrerName}
                onChange={(e) => setFormData({ ...formData, referrerName: e.target.value })}
-                className="w-full border border-gray-300 rounded px-3 py-2 text-sm font-inter text-gray-900 focus:border-pmr-nhsblue focus:ring-2 focus:ring-pmr-nhsblue/20 focus:outline-none transition-colors"
+                className="w-full border border-[#D1D5DB] rounded px-3 py-2 text-sm font-ui text-gray-900 placeholder-gray-400 focus:border-pmr-nhsblue focus:ring-2 focus:ring-pmr-nhsblue/15 focus:outline-none transition-all duration-200"
                placeholder="Your name"
              />
            </FormField>
@@ -398,7 +399,7 @@ export function ReferralsView() {
                id="referrerEmail"
                value={formData.referrerEmail}
                onChange={(e) => setFormData({ ...formData, referrerEmail: e.target.value })}
-                className="w-full border border-gray-300 rounded px-3 py-2 text-sm font-inter text-gray-900 focus:border-pmr-nhsblue focus:ring-2 focus:ring-pmr-nhsblue/20 focus:outline-none transition-colors"
+                className="w-full border border-[#D1D5DB] rounded px-3 py-2 text-sm font-ui text-gray-900 placeholder-gray-400 focus:border-pmr-nhsblue focus:ring-2 focus:ring-pmr-nhsblue/15 focus:outline-none transition-all duration-200"
                placeholder="your.email@example.com"
              />
            </FormField>
@@ -410,7 +411,7 @@ export function ReferralsView() {
              id="referrerOrg"
              value={formData.referrerOrg}
              onChange={(e) => setFormData({ ...formData, referrerOrg: e.target.value })}
-              className="w-full border border-gray-300 rounded px-3 py-2 text-sm font-inter text-gray-900 focus:border-pmr-nhsblue focus:ring-2 focus:ring-pmr-nhsblue/20 focus:outline-none transition-colors"
+              className="w-full border border-[#D1D5DB] rounded px-3 py-2 text-sm font-ui text-gray-900 placeholder-gray-400 focus:border-pmr-nhsblue focus:ring-2 focus:ring-pmr-nhsblue/15 focus:outline-none transition-all duration-200"
              placeholder="Organisation name (optional)"
            />
          </FormField>
@@ -421,13 +422,13 @@ export function ReferralsView() {
              value={formData.reason}
              onChange={(e) => setFormData({ ...formData, reason: e.target.value })}
              rows={4}
-              className="w-full border border-gray-300 rounded px-3 py-2 text-sm font-inter text-gray-900 focus:border-pmr-nhsblue focus:ring-2 focus:ring-pmr-nhsblue/20 focus:outline-none transition-colors resize-y"
+              className="w-full border border-[#D1D5DB] rounded px-3 py-2 text-sm font-ui text-gray-900 placeholder-gray-400 focus:border-pmr-nhsblue focus:ring-2 focus:ring-pmr-nhsblue/15 focus:outline-none transition-all duration-200 resize-y"
              placeholder="Describe the opportunity or reason for contact..."
            />
          </FormField>
          <div className="space-y-2">
-            <span className="block font-inter font-medium text-[13px] text-gray-600">
+            <span className="block font-ui font-medium text-[13px] text-gray-600">
              Contact Method
            </span>
            <div className="flex gap-6">
@@ -452,18 +453,18 @@ export function ReferralsView() {
            </div>
          </div>
-          <div className="flex justify-end gap-3 pt-4 border-t border-gray-200">
+          <div className="flex justify-end gap-3 pt-4 border-t border-[#E5E7EB]">
            <button
              type="button"
              onClick={handleReset}
-              className="font-inter font-medium text-sm px-4 py-2 border border-gray-300 text-gray-700 rounded hover:bg-gray-50 transition-colors"
+              className="font-ui font-medium text-sm px-4 py-2 border border-[#D1D5DB] text-gray-700 rounded hover:bg-gray-50 transition-colors focus-visible:ring-2 focus-visible:ring-pmr-nhsblue/40 focus-visible:outline-none"
            >
              Cancel
            </button>
            <button
              type="submit"
              disabled={isSubmitting}
-              className="font-inter font-medium text-sm px-6 py-2 bg-pmr-nhsblue text-white rounded hover:bg-blue-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2"
+              className="font-ui font-medium text-sm px-6 py-2 bg-pmr-nhsblue text-white rounded hover:bg-[#004D9F] transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2 focus-visible:ring-2 focus-visible:ring-pmr-nhsblue/40 focus-visible:outline-none"
            >
              {isSubmitting ? (
                <>
@@ -1,65 +1,79 @@
-import { useState, useEffect } from 'react'
+import { useState, useCallback } from 'react'
-import { AlertTriangle, Check, ChevronRight } from 'lucide-react'
+import { motion, AnimatePresence } from 'framer-motion'
 import { AlertTriangle, CheckCircle, ChevronRight } from 'lucide-react'
 import { patient } from '@/data/patient'
 import { consultations } from '@/data/consultations'
 import { problems } from '@/data/problems'
 import { medications } from '@/data/medications'
-import type { ViewId } from '@/types/pmr'
+import type { ViewId, Problem, Medication, Consultation } from '@/types/pmr'
 // ─── Alert state machine ────────────────────────────────────────────────────
 type AlertState = 'visible' | 'acknowledging' | 'dismissed'
 // ─── Props ──────────────────────────────────────────────────────────────────
 interface SummaryViewProps {
  onNavigate?: (view: ViewId, itemId?: string) => void
 }
 export function SummaryView({ onNavigate }: SummaryViewProps) {
-  const [alertDismissed, setAlertDismissed] = useState(false)
+  const [alertState, setAlertState] = useState<AlertState>('visible')
  const [alertAnimating, setAlertAnimating] = useState(false)
  const [alertVisible, setAlertVisible] = useState(false)
  const prefersReducedMotion = typeof window !== 'undefined'
    ? window.matchMedia('(prefers-reduced-motion: reduce)').matches
    : false
-  useEffect(() => {
+  const handleAcknowledge = useCallback(() => {
    if (prefersReducedMotion) {
      setAlertState('dismissed')
      return
    }
    setAlertState('acknowledging')
    // Icon crossfade (200ms) + hold beat (200ms) = 400ms before collapse
    const timer = setTimeout(() => {
-      setAlertVisible(true)
+      setAlertState('dismissed')
-    }, prefersReducedMotion ? 0 : 300)
+    }, 400)
    return () => clearTimeout(timer)
  }, [prefersReducedMotion])
-  const handleDismissAlert = () => {
+  const activeProblems = problems.filter(
-    setAlertAnimating(true)
+    (p) => p.status === 'Active' || p.status === 'In Progress'
-    setTimeout(() => {
+  )
-      setAlertDismissed(true)
+  const topMedications = medications
-    }, prefersReducedMotion ? 0 : 400)
+    .filter((m) => m.category === 'Active')
-  }
+    .slice(0, 5)
  const activeProblems = problems.filter(p => p.status === 'Active' || p.status === 'In Progress')
  const topMedications = medications.filter(m => m.category === 'Active').slice(0, 5)
  const lastConsultation = consultations[0]
  return (
    <div className="space-y-6">
-      {!alertDismissed && (
+      {/* Clinical Alert */}
-        <ClinicalAlert
+      <AnimatePresence>
-          visible={alertVisible}
+        {alertState !== 'dismissed' && (
-          animating={alertAnimating}
+          <ClinicalAlert
-          onDismiss={handleDismissAlert}
+            state={alertState}
-          prefersReducedMotion={prefersReducedMotion}
+            onAcknowledge={handleAcknowledge}
-        />
+            prefersReducedMotion={prefersReducedMotion}
-      )}
+          />
        )}
      </AnimatePresence>
      {/* Summary cards grid */}
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        {/* Card 1: Demographics — full width */}
        <DemographicsCard />
-        <div className="lg:col-span-2 grid grid-cols-1 lg:grid-cols-2 gap-6">
+
-          <ActiveProblemsCard
+        {/* Card 2: Active Problems — left column */}
-            problems={activeProblems}
+        <ActiveProblemsCard
-            onNavigate={onNavigate}
+          problems={activeProblems}
-          />
+          onNavigate={onNavigate}
-          <QuickMedsCard
+        />
-            medications={topMedications}
+
-            onNavigate={onNavigate}
+        {/* Card 3: Current Medications Quick View — right column */}
-          />
+        <QuickMedsCard
-        </div>
+          medications={topMedications}
          onNavigate={onNavigate}
        />
        {/* Card 4: Last Consultation — full width */}
        <LastConsultationCard
          consultation={lastConsultation}
          onNavigate={onNavigate}
@@ -69,120 +83,155 @@ export function SummaryView({ onNavigate }: SummaryViewProps) {
  )
 }
 // ─── Clinical Alert ─────────────────────────────────────────────────────────
 interface ClinicalAlertProps {
-  visible: boolean
+  state: AlertState
-  animating: boolean
+  onAcknowledge: () => void
  onDismiss: () => void
  prefersReducedMotion: boolean
 }
-function ClinicalAlert({ visible, animating, onDismiss, prefersReducedMotion }: ClinicalAlertProps) {
+function ClinicalAlert({
-  const [showCheck, setShowCheck] = useState(false)
+  state,
-
+  onAcknowledge,
-  const handleClick = () => {
+  prefersReducedMotion,
-    if (!prefersReducedMotion) {
+}: ClinicalAlertProps) {
-      setShowCheck(true)
+  const isAcknowledging = state === 'acknowledging'
      setTimeout(onDismiss, 200)
    } else {
      onDismiss()
    }
  }
  return (
-    <div
+    <motion.div
      role="alert"
      aria-live="assertive"
-      className={`
+      initial={
-        overflow-hidden transition-all duration-200 ease-out
+        prefersReducedMotion
-        ${visible && !animating ? 'max-h-24 opacity-100' : 'max-h-0 opacity-0'}
+          ? { y: 0, opacity: 1 }
-        ${prefersReducedMotion ? '!max-h-24 !opacity-100' : ''}
+          : { y: '-100%', opacity: 0 }
-      `}
+      }
      animate={{ y: 0, opacity: 1 }}
      exit={
        prefersReducedMotion
          ? { opacity: 0 }
          : { height: 0, opacity: 0, marginBottom: 0 }
      }
      transition={
        prefersReducedMotion
          ? { duration: 0 }
          : state === 'acknowledging'
            ? { duration: 0.2, ease: 'easeOut' }
            : { type: 'spring', stiffness: 300, damping: 25 }
      }
      className="overflow-hidden"
    >
      <div
        className="flex items-start gap-3 p-4 rounded border-l-4"
        style={{
          backgroundColor: '#FEF3C7',
-          borderColor: '#F59E0B',
+          borderLeftColor: '#F59E0B',
        }}
      >
        {/* Icon area — crossfade between AlertTriangle and CheckCircle */}
        <div className="flex-shrink-0 mt-0.5 relative w-5 h-5">
-          <AlertTriangle
+          <AnimatePresence mode="wait">
-            size={20}
+            {isAcknowledging ? (
-            className={`
+              <motion.span
-              text-amber-600 transition-opacity duration-200
+                key="check"
-              ${showCheck ? 'opacity-0' : 'opacity-100'}
+                initial={{ opacity: 0, scale: 0.8 }}
-            `}
+                animate={{ opacity: 1, scale: 1 }}
-          />
+                transition={{ duration: 0.2 }}
-          <Check
+                className="absolute inset-0 flex items-center justify-center"
-            size={20}
+              >
-            className={`
+                <CheckCircle size={20} className="text-green-600" />
-              text-green-600 absolute inset-0 transition-opacity duration-200
+              </motion.span>
-              ${showCheck ? 'opacity-100' : 'opacity-0'}
+            ) : (
-            `}
+              <motion.span
-          />
+                key="warning"
                exit={{ opacity: 0 }}
                transition={{ duration: 0.2 }}
                className="absolute inset-0 flex items-center justify-center"
              >
                <AlertTriangle size={20} className="text-amber-600" />
              </motion.span>
            )}
          </AnimatePresence>
        </div>
        {/* Message */}
        <div className="flex-1 min-w-0">
-          <p className="font-inter font-medium text-sm" style={{ color: '#92400E' }}>
+          <p className="font-ui font-medium text-sm" style={{ color: '#92400E' }}>
-            <span className="font-semibold">ALERT:</span> This patient has identified <span className="font-semibold">£14.6M</span> in prescribing efficiency savings across Norfolk & Waveney ICS.
+            <span className="font-semibold">ALERT:</span> This patient has
            identified{' '}
            <span className="font-semibold">£14.6M</span> in prescribing
            efficiency savings across Norfolk &amp; Waveney ICS.
          </p>
        </div>
        {/* Acknowledge button */}
        <button
          type="button"
-          onClick={handleClick}
+          onClick={onAcknowledge}
-          className="flex-shrink-0 px-3 py-1.5 text-xs font-medium border rounded transition-colors duration-100"
+          disabled={isAcknowledging}
          aria-label="Acknowledge clinical alert"
          className="flex-shrink-0 px-3 py-1.5 text-xs font-ui font-medium border rounded transition-colors duration-100 hover:bg-[#F59E0B] hover:text-white disabled:opacity-50"
          style={{
            borderColor: '#F59E0B',
-            color: '#92400E',
+            color: isAcknowledging ? '#16A34A' : '#92400E',
          }}
          onMouseEnter={(e) => {
            e.currentTarget.style.backgroundColor = '#F59E0B'
            e.currentTarget.style.color = '#FFFFFF'
          }}
          onMouseLeave={(e) => {
            e.currentTarget.style.backgroundColor = 'transparent'
            e.currentTarget.style.color = '#92400E'
          }}
        >
-          Acknowledge
+          {isAcknowledging ? 'Acknowledged' : 'Acknowledge'}
        </button>
      </div>
    </motion.div>
  )
 }
 // ─── Shared Card Components ─────────────────────────────────────────────────
 function CardHeader({ title }: { title: string }) {
  return (
    <div className="bg-[#F9FAFB] border-b border-[#E5E7EB] px-4 py-3">
      <h2 className="font-ui font-semibold text-sm uppercase tracking-wide text-gray-500">
        {title}
      </h2>
    </div>
  )
 }
 // ─── Demographics Card ──────────────────────────────────────────────────────
 function DemographicsCard() {
  return (
-    <div className="lg:col-span-2 bg-white border border-gray-200 rounded">
+    <div className="lg:col-span-2 bg-white border border-[#E5E7EB] rounded shadow-pmr">
-      <div className="px-4 py-3 border-b border-gray-200 bg-gray-50">
+      <CardHeader title="Patient Demographics" />
-        <h2 className="font-inter font-semibold text-sm uppercase tracking-wide text-gray-500">
+      <div className="p-4 md:p-6">
-          Patient Demographics
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-x-12 gap-y-2">
        </h2>
      </div>
      <div className="p-4">
        <div className="grid grid-cols-1 md:grid-cols-2 gap-x-8 gap-y-3">
          <DemographicsRow label="Name" value={patient.displayName} />
          <DemographicsRow
            label="Status"
            value={
              <span className="flex items-center gap-2">
-                <span className="w-2 h-2 rounded-full bg-pmr-green" />
+                <span className="w-2 h-2 rounded-full bg-green-500" />
                <span>{patient.status}</span>
              </span>
            }
          />
-          <DemographicsRow label="DOB" value={patient.dob} />
+          <DemographicsRow label="DOB" value={patient.dob} mono />
          <DemographicsRow label="Location" value={patient.address} />
          <DemographicsRow
            label="Registration"
            value={
              <span>
                <span className="text-gray-500">GPhC</span>{' '}
-                <span className="font-geist text-sm">{patient.nhsNumber.replace(/ /g, '')}</span>
+                <span className="font-geist text-[13px]">
                  {patient.nhsNumber.replace(/ /g, '')}
                </span>
              </span>
            }
          />
-          <DemographicsRow label="Since" value={patient.registrationYear} />
+          <DemographicsRow label="Since" value={patient.registrationYear} mono />
-          <DemographicsRow label="Qualification" value={patient.qualification} />
+          <DemographicsRow
            label="Qualification"
            value={patient.qualification}
          />
          <DemographicsRow label="University" value={patient.university} />
        </div>
      </div>
@@ -193,47 +242,52 @@ function DemographicsCard() {
 interface DemographicsRowProps {
  label: string
  value: React.ReactNode
  mono?: boolean
 }
-function DemographicsRow({ label, value }: DemographicsRowProps) {
+function DemographicsRow({ label, value, mono }: DemographicsRowProps) {
  return (
-    <div className="flex items-start gap-4">
+    <div className="flex items-start gap-4 py-1">
-      <span className="font-inter font-medium text-sm text-gray-500 min-w-[100px] text-right flex-shrink-0">
+      <span className="font-ui font-medium text-[13px] text-gray-500 min-w-[100px] text-right flex-shrink-0">
        {label}:
      </span>
-      <span className="font-inter text-sm text-gray-900">{value}</span>
+      <span
        className={`text-sm text-gray-900 ${mono ? 'font-geist' : 'font-ui'}`}
      >
        {value}
      </span>
    </div>
  )
 }
 // ─── Active Problems Card ───────────────────────────────────────────────────
 interface ActiveProblemsCardProps {
-  problems: typeof problems
+  problems: Problem[]
  onNavigate?: (view: ViewId, itemId?: string) => void
 }
 function ActiveProblemsCard({ problems, onNavigate }: ActiveProblemsCardProps) {
  return (
-    <div className="bg-white border border-gray-200 rounded">
+    <div className="bg-white border border-[#E5E7EB] rounded shadow-pmr">
-      <div className="px-4 py-3 border-b border-gray-200 bg-gray-50">
+      <CardHeader title="Active Problems" />
        <h2 className="font-inter font-semibold text-sm uppercase tracking-wide text-gray-500">
          Active Problems
        </h2>
      </div>
      <div className="divide-y divide-gray-100">
        {problems.map((problem) => (
          <button
            key={problem.id}
            type="button"
            onClick={() => onNavigate?.('problems', problem.id)}
-            className="w-full px-4 py-3 flex items-start gap-3 text-left hover:bg-gray-50 transition-colors"
+            className="w-full px-4 py-3 flex items-start gap-3 text-left hover:bg-[#EFF6FF] transition-colors duration-100"
          >
            <TrafficLight status={problem.status} />
            <div className="flex-1 min-w-0">
-              <p className="font-inter font-medium text-sm text-gray-900 line-clamp-2">
+              <p className="font-ui font-medium text-sm text-gray-900 line-clamp-2">
                {problem.description}
              </p>
              {problem.since && (
-                <p className="font-geist text-xs text-gray-500 mt-1">{problem.since}</p>
+                <p className="font-geist text-xs text-gray-500 mt-1">
                  {problem.since}
                </p>
              )}
            </div>
          </button>
@@ -243,52 +297,71 @@ function ActiveProblemsCard({ problems, onNavigate }: ActiveProblemsCardProps) {
  )
 }
 // ─── Traffic Light (always with text label — guardrail) ─────────────────────
 interface TrafficLightProps {
  status: 'Active' | 'In Progress' | 'Resolved'
 }
 function TrafficLight({ status }: TrafficLightProps) {
-  const colors = {
+  const config: Record<
-    'Active': { bg: 'bg-green-500', label: 'Active' },
+    TrafficLightProps['status'],
-    'In Progress': { bg: 'bg-amber-500', label: 'In Progress' },
+    { dotClass: string; label: string }
-    'Resolved': { bg: 'bg-green-500', label: 'Resolved' },
+  > = {
    Active: { dotClass: 'bg-green-500', label: 'Active' },
    'In Progress': { dotClass: 'bg-amber-500', label: 'In Progress' },
    Resolved: { dotClass: 'bg-green-500', label: 'Resolved' },
  }
-  const color = colors[status]
+  const { dotClass, label } = config[status]
  return (
-    <span className="flex items-center gap-2 flex-shrink-0 mt-0.5">
+    <span className="flex items-center gap-1.5 flex-shrink-0 mt-0.5">
-      <span className={`w-2 h-2 rounded-full ${color.bg}`} />
+      <span
        className={`w-2 h-2 rounded-full ${dotClass}`}
        aria-hidden="true"
      />
      <span className="font-ui text-xs text-gray-500">{label}</span>
    </span>
  )
 }
 // ─── Quick Medications Card ─────────────────────────────────────────────────
 interface QuickMedsCardProps {
-  medications: typeof medications
+  medications: Medication[]
  onNavigate?: (view: ViewId) => void
 }
 function QuickMedsCard({ medications, onNavigate }: QuickMedsCardProps) {
  return (
-    <div className="bg-white border border-gray-200 rounded">
+    <div className="bg-white border border-[#E5E7EB] rounded shadow-pmr">
-      <div className="px-4 py-3 border-b border-gray-200 bg-gray-50">
+      <CardHeader title="Current Medications (Quick View)" />
        <h2 className="font-inter font-semibold text-sm uppercase tracking-wide text-gray-500">
          Current Medications (Quick View)
        </h2>
      </div>
      <div className="overflow-x-auto">
        <table className="w-full">
          <thead>
-            <tr className="border-b border-gray-200">
+            <tr className="border-b border-[#E5E7EB]">
-              <th scope="col" className="px-4 py-2 text-left font-inter font-semibold text-xs uppercase tracking-wide text-gray-400">
+              <th
                scope="col"
                className="px-4 py-2 text-left font-ui font-semibold text-xs uppercase tracking-wider text-gray-400"
              >
                Drug
              </th>
-              <th scope="col" className="px-4 py-2 text-left font-inter font-semibold text-xs uppercase tracking-wide text-gray-400">
+              <th
                scope="col"
                className="px-4 py-2 text-left font-ui font-semibold text-xs uppercase tracking-wider text-gray-400"
              >
                Dose
              </th>
-              <th scope="col" className="px-4 py-2 text-left font-inter font-semibold text-xs uppercase tracking-wide text-gray-400">
+              <th
                scope="col"
                className="px-4 py-2 text-left font-ui font-semibold text-xs uppercase tracking-wider text-gray-400"
              >
                Freq
              </th>
-              <th scope="col" className="px-4 py-2 text-left font-inter font-semibold text-xs uppercase tracking-wide text-gray-400">
+              <th
                scope="col"
                className="px-4 py-2 text-left font-ui font-semibold text-xs uppercase tracking-wider text-gray-400"
              >
                Status
              </th>
            </tr>
@@ -297,21 +370,29 @@ function QuickMedsCard({ medications, onNavigate }: QuickMedsCardProps) {
            {medications.map((med, index) => (
              <tr
                key={med.id}
-                className={index % 2 === 0 ? 'bg-white' : 'bg-gray-50'}
+                className={`${
                  index % 2 === 0 ? 'bg-white' : 'bg-[#F9FAFB]'
                } hover:bg-[#EFF6FF] transition-colors duration-100`}
                style={{ height: '40px' }}
              >
-                <td className="px-4 py-2 font-inter text-sm text-gray-900">
+                <td className="px-4 py-2 font-ui text-sm text-gray-900">
                  {med.name}
                </td>
-                <td className="px-4 py-2 font-geist text-sm text-gray-700">
+                <td className="px-4 py-2 font-geist text-[13px] text-gray-700">
                  {med.dose}%
                </td>
-                <td className="px-4 py-2 font-inter text-sm text-gray-700">
+                <td className="px-4 py-2 font-ui text-sm text-gray-700">
                  {med.frequency}
                </td>
                <td className="px-4 py-2">
                  <span className="flex items-center gap-1.5">
-                    <span className="w-1.5 h-1.5 rounded-full bg-pmr-green" />
+                    <span
-                    <span className="font-inter text-xs text-gray-600">{med.status}</span>
+                      className="w-1.5 h-1.5 rounded-full bg-green-500"
                      aria-hidden="true"
                    />
                    <span className="font-ui text-xs text-gray-600">
                      {med.status}
                    </span>
                  </span>
                </td>
              </tr>
@@ -319,11 +400,11 @@ function QuickMedsCard({ medications, onNavigate }: QuickMedsCardProps) {
          </tbody>
        </table>
      </div>
-      <div className="px-4 py-2 border-t border-gray-100">
+      <div className="px-4 py-2 border-t border-[#E5E7EB]">
        <button
          type="button"
          onClick={() => onNavigate?.('medications')}
-          className="flex items-center gap-1 font-inter text-sm text-pmr-nhsblue hover:underline"
+          className="flex items-center gap-1 font-ui text-sm text-pmr-nhsblue hover:underline"
        >
          View Full List
          <ChevronRight size={14} />
@@ -333,38 +414,43 @@ function QuickMedsCard({ medications, onNavigate }: QuickMedsCardProps) {
  )
 }
 // ─── Last Consultation Card ─────────────────────────────────────────────────
 interface LastConsultationCardProps {
-  consultation: typeof consultations[0]
+  consultation: Consultation
  onNavigate?: (view: ViewId, itemId?: string) => void
 }
-function LastConsultationCard({ consultation, onNavigate }: LastConsultationCardProps) {
+function LastConsultationCard({
  consultation,
  onNavigate,
 }: LastConsultationCardProps) {
  return (
-    <div className="lg:col-span-2 bg-white border border-gray-200 rounded">
+    <div className="lg:col-span-2 bg-white border border-[#E5E7EB] rounded shadow-pmr">
-      <div className="px-4 py-3 border-b border-gray-200 bg-gray-50">
+      <CardHeader title="Last Consultation" />
-        <h2 className="font-inter font-semibold text-sm uppercase tracking-wide text-gray-500">
+      <div className="p-4 md:p-6">
          Last Consultation
        </h2>
      </div>
      <div className="p-4">
        <div className="flex items-start justify-between gap-4">
          <div className="flex-1 min-w-0">
            <div className="flex items-center gap-3 text-sm text-gray-500 mb-2">
-              <span className="font-geist">{consultation.date}</span>
+              <span className="font-geist text-[12px]">
-              <span>|</span>
+                {consultation.date}
-              <span className="text-pmr-nhsblue">{consultation.organization}</span>
+              </span>
              <span className="text-gray-300">|</span>
              <span className="font-ui text-pmr-nhsblue">
                {consultation.organization}
              </span>
            </div>
-            <h3 className="font-inter font-semibold text-base text-gray-900 mb-2">
+            <h3 className="font-ui font-semibold text-[15px] text-gray-900 mb-2">
              {consultation.role}
            </h3>
-            <p className="font-inter text-sm text-gray-600 line-clamp-3">
+            <p className="font-ui text-sm text-gray-600 leading-relaxed line-clamp-3">
              {consultation.history}
            </p>
          </div>
          <button
            type="button"
            onClick={() => onNavigate?.('consultations', consultation.id)}
-            className="flex-shrink-0 flex items-center gap-1 font-inter text-sm text-pmr-nhsblue hover:underline"
+            className="flex-shrink-0 flex items-center gap-1 font-ui text-sm text-pmr-nhsblue hover:underline"
          >
            View Full Record
            <ChevronRight size={14} />
@@ -1,35 +1,30 @@
-import { useState, useEffect, useRef } from 'react'
+import { useState, useEffect, useCallback } from 'react'
 interface UseScrollCondensationOptions {
  threshold?: number
  scrollContainer?: HTMLElement | null
 }
 export function useScrollCondensation(options: UseScrollCondensationOptions = {}) {
-  const { threshold = 100 } = options
+  const { threshold = 100, scrollContainer } = options
  const [isCondensed, setIsCondensed] = useState(false)
-  const sentinelRef = useRef<HTMLDivElement>(null)
+
  const handleScroll = useCallback(() => {
    if (!scrollContainer) return
    setIsCondensed(scrollContainer.scrollTop >= threshold)
  }, [scrollContainer, threshold])
  useEffect(() => {
-    const sentinel = sentinelRef.current
+    if (!scrollContainer) return
    if (!sentinel) return
-    const observer = new IntersectionObserver(
+    scrollContainer.addEventListener('scroll', handleScroll, { passive: true })
-      (entries) => {
+    // Check initial state
-        const [entry] = entries
+    handleScroll()
        setIsCondensed(!entry.isIntersecting)
      },
      {
        rootMargin: `-${threshold}px 0px 0px 0px`,
        threshold: 0,
      }
    )
    observer.observe(sentinel)
    return () => {
-      observer.disconnect()
+      scrollContainer.removeEventListener('scroll', handleScroll)
    }
-  }, [threshold])
+  }, [scrollContainer, handleScroll])
-  return { isCondensed, sentinelRef }
+  return { isCondensed }
 }
@@ -115,8 +115,8 @@
  --pmr-alert-text: #92400E;
  --pmr-radius: 4px;
  --pmr-radius-login: 12px;
-  --font-ui: 'Elvaro Grotesque', system-ui, sans-serif;
+  --font-ui: 'Blumir', system-ui, sans-serif;
-  --font-ui-alt: 'Blumir', system-ui, sans-serif;
+  --font-ui-alt: 'Elvaro Grotesque', system-ui, sans-serif;
  --font-geist-mono: 'Geist Mono', 'Fira Code', monospace;
 }
@@ -0,0 +1,106 @@
 import Fuse, { type FuseResult } from 'fuse.js'
 import type { ViewId } from '@/types/pmr'
 // Import all data sources
 import { consultations } from '@/data/consultations'
 import { medications } from '@/data/medications'
 import { problems } from '@/data/problems'
 import { investigations } from '@/data/investigations'
 import { documents } from '@/data/documents'
 export interface SearchResult {
  id: string
  title: string
  section: ViewId
  sectionLabel: string
  highlight: string
  score?: number
 }
 // Build a unified search index from all PMR content
 export function buildSearchIndex(): Fuse<SearchResult> {
  const searchableItems: SearchResult[] = []
  // Index consultations (Experience)
  consultations.forEach(consultation => {
    searchableItems.push({
      id: consultation.id,
      title: consultation.role,
      section: 'consultations',
      sectionLabel: 'Experience',
      highlight: `${consultation.role} at ${consultation.organization} — ${consultation.history}`,
    })
  })
  // Index medications (Skills)
  medications.forEach(medication => {
    searchableItems.push({
      id: medication.id,
      title: medication.name,
      section: 'medications',
      sectionLabel: 'Skills',
      highlight: `${medication.name} — ${medication.frequency} use since ${medication.startYear}`,
    })
  })
  // Index problems (Achievements)
  problems.forEach(problem => {
    searchableItems.push({
      id: problem.id,
      title: problem.description,
      section: 'problems',
      sectionLabel: 'Achievements',
      highlight: `[${problem.code}] ${problem.description} — ${problem.narrative}`,
    })
  })
  // Index investigations (Projects)
  investigations.forEach(investigation => {
    searchableItems.push({
      id: investigation.id,
      title: investigation.name,
      section: 'investigations',
      sectionLabel: 'Projects',
      highlight: `${investigation.name} — ${investigation.methodology}`,
    })
  })
  // Index documents (Education)
  documents.forEach(document => {
    searchableItems.push({
      id: document.id,
      title: document.title,
      section: 'documents',
      sectionLabel: 'Education',
      highlight: `${document.title} from ${document.source} (${document.date})`,
    })
  })
  // Fuse.js configuration for fuzzy search
  const fuseOptions = {
    keys: [
      { name: 'title', weight: 2 }, // Primary match on title
      { name: 'highlight', weight: 1 }, // Secondary match on full text
    ],
    threshold: 0.3, // 0 = exact match, 1 = match anything
    includeScore: true,
    minMatchCharLength: 2,
  }
  return new Fuse(searchableItems, fuseOptions)
 }
 // Group search results by section
 export function groupResultsBySection(results: FuseResult<SearchResult>[]): Map<string, FuseResult<SearchResult>[]> {
  const grouped = new Map<string, FuseResult<SearchResult>[]>()
  results.forEach(result => {
    const sectionLabel = result.item.sectionLabel
    if (!grouped.has(sectionLabel)) {
      grouped.set(sectionLabel, [])
    }
    grouped.get(sectionLabel)!.push(result)
  })
  return grouped
 }
@@ -58,8 +58,8 @@ export default {
        primary: ['Plus Jakarta Sans', 'system-ui', 'sans-serif'],
        secondary: ['Inter Tight', 'system-ui', 'sans-serif'],
        mono: ['Fira Code', 'monospace'],
-        ui: ['Elvaro Grotesque', 'system-ui', 'sans-serif'],
+        ui: ['Blumir', 'system-ui', 'sans-serif'],
-        'ui-alt': ['Blumir', 'system-ui', 'sans-serif'],
+        'ui-alt': ['Elvaro Grotesque', 'system-ui', 'sans-serif'],
        geist: ['Geist Mono', 'Fira Code', 'monospace'],
      },
      boxShadow: {
Author	SHA1	Message	Date
admin	e13a073a6f	Redesign CVMIS system 2	2026-02-13 16:42:45 +00:00
admin	000df670a3	Redesign CVMIS system	2026-02-13 16:42:23 +00:00
admin	b9db2f5401	Update progress: Task 15 completed (Accessibility audit) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-02-13 01:42:59 +00:00
admin	c3316b9c45	Task 15: Accessibility audit complete - Sidebar: Replace <aside role="navigation"> with <nav> to avoid conflicting roles - Sidebar search: Add combobox role, aria-expanded, aria-controls, aria-autocomplete - Search results: Add listbox/option roles, group labels for screen reader navigation - PMRInterface: Remove redundant role="main", fix aria-label to use CV-friendly labels - Mobile search: Add aria-label and type="search" for proper semantics - Breadcrumb: Add aria-current="page" to current item, aria-hidden on separators - Clinical alert: Add aria-label="Acknowledge clinical alert" on button per spec - Patient banner: Change focus:ring to focus-visible:ring on action buttons - Patient banner: Add role="img" to StatusDot for aria-label accessibility - Login screen: Change role="status" to role="dialog" with aria-modal - Login screen: Add loginButtonRef with auto-focus when typing completes - Login screen: Add focus-visible ring style to Log In button - Medications tabs: Add id="tab-{id}" to tab buttons, fix aria-labelledby on panels - Consultations: Wrap entries in <article> per semantic HTML spec - Problems: Change TrafficLight dot from role="img" to aria-hidden (text label handles it) - App: Add sr-only live region announcing "Patient Record for Charlwood, Andrew" on PMR entry - Skip button: Add focus-visible ring for keyboard users Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-02-13 01:42:05 +00:00
admin	b3ebff26bf	Update progress: Task 14 completed (Responsive design audit)	2026-02-13 01:25:43 +00:00
admin	85ac1b879f	Task 14: Responsive design audit complete	2026-02-13 01:25:07 +00:00
admin	4db3be0abb	Update progress: Task 13 completed (Fuzzy search with fuse.js)	2026-02-13 01:21:19 +00:00
admin	f96c6a99d1	Task 13: Implement fuzzy search with fuse.js - Installed fuse.js for fuzzy search functionality - Created src/lib/search.ts with buildSearchIndex and groupResultsBySection functions - Search index includes all consultations, medications, problems, investigations, and documents - Updated ClinicalSidebar to use fuse.js instead of simple filter - Search results grouped by section (Experience, Skills, Achievements, Projects, Education) - Section headers show icon and count - Each result shows title and highlight text (truncated) - Clicking a result navigates to the section and expands the matching item - Minimum 2 characters required for search - Top 10 results displayed - Clean dropdown styling with hover states - Integrates with AccessibilityContext to set expandedItem Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>	2026-02-13 01:20:08 +00:00
admin	7461a83b9d	Update progress: Task 12 completed (ReferralsView rebuild)	2026-02-13 01:15:11 +00:00
admin	b480b742c8	Task 12: Rebuild ReferralsView (Contact) with premium fonts and refined styling Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>	2026-02-13 01:14:25 +00:00
admin	bfd17a3e80	Update progress: Task 11 completed (InvestigationsView + DocumentsView rebuild) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-02-13 01:09:56 +00:00
admin	bba61f73b6	Task 11: Rebuild InvestigationsView + DocumentsView (Projects + Education) - Replace CSS height transitions with Framer Motion AnimatePresence - Add tree-indented monospace content with box-drawing characters - Add StatusBadge pills (Complete/Ongoing/Live with pulse) - Replace font-inter with font-ui, font-mono with font-geist - Add multi-layered shadows (shadow-pmr), proper borders - Add document type icons (FileText, Award, GraduationCap, FlaskConical) - Color-coded left borders on expanded panels by status/type - Alternating row backgrounds, hover:bg-[#EFF6FF] - AccessibilityContext integration for breadcrumb updates - Framer Motion chevron rotation, keyboard navigation - Mobile card layouts with same animations - prefers-reduced-motion support throughout Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-02-13 01:08:57 +00:00
admin	8765470627	Update progress: Task 10 completed (ProblemsView rebuild)	2026-02-13 01:03:30 +00:00
admin	43aa836317	Task 10: Rebuild ProblemsView (Achievements view) - Replaced all font-inter references with font-ui (Elvaro Grotesque) - Updated font-mono to font-geist for codes and dates ([MGT001], Jul 2024, etc.) - Changed hover colors from bg-blue-50 to bg-[#EFF6FF] (blue tint) - Added shadow-pmr to both Active and Resolved Problems cards - Switched from CSS transitions to Framer Motion for expand/collapse animations - AnimatePresence with height-only animation (no opacity fade per guardrail) - Chevron rotation via motion.div (180° when expanded) - prefersReducedMotion support (duration: 0) - Updated font sizes: text-[13px] for headers, text-[14px] for body, text-xs for labels - TrafficLight component now uses font-ui for text labels - Added AccessibilityContext integration (setExpandedItem for breadcrumb) - Mobile cards: added shadow-pmr, updated all font references to font-ui/font-geist - Added focus-visible rings on linked consultation buttons Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>	2026-02-13 01:02:35 +00:00
admin	f0cb6b924f	Update progress: Task 9 completed (MedicationsView rebuild) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-02-13 00:57:26 +00:00
admin	06f0d658b0	Task 9: Rebuild MedicationsView (Skills view) Rebuild medications/skills view from ref-medications.md spec with Clinical Luxury design direction. Three category tabs with count badges, semantic table with sortable columns, expandable prescribing history with vertical timeline, and Framer Motion height animation. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-02-13 00:56:35 +00:00
admin	ad1ce81948	Update progress: Task 8 completed (ConsultationsView rebuild) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-02-13 00:52:08 +00:00
admin	2be346144c	Task 8: Rebuild ConsultationsView (Experience view) Rebuilt from ref-consultations.md spec with Clinical Luxury styling: - Framer Motion height-only expand/collapse (no opacity fade) - font-ui (Elvaro Grotesque) throughout, Geist Mono for dates/codes - 3px left border color-coded by employer (NHS blue / Tesco teal) - Multi-layered card shadows (shadow-pmr) - Blue tint hover state (#EFF6FF) - H/E/P section headers: uppercase, 12px, letter-spacing 0.05em - Coded entries in Geist Mono with bracket codes - Single-expand accordion behavior - Chevron rotation via Framer Motion - Proper font sizes per spec (13px body, 15px titles, 12px codes) - Focus-visible ring on entry buttons Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-02-13 00:51:23 +00:00
admin	1d8cb78143	Update progress: Task 7 completed (SummaryView + ClinicalAlert) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-02-13 00:47:02 +00:00
admin	cd4aa1e240	Task 7: Rebuild SummaryView + ClinicalAlert - ClinicalAlert: Framer Motion spring animation entrance, icon crossfade (AlertTriangle → CheckCircle), hold beat, height collapse sequence - Demographics card: Full-width 2-column key-value layout with proper label alignment, monospace data values - Active Problems card: Traffic light dots with text labels (guardrail) - Quick Medications table: Semantic <table>, alternating rows, hover states - Last Consultation card: Date in Geist Mono, NHS blue org, role preview - All cards: font-ui (Elvaro Grotesque), multi-layered shadows, #E5E7EB borders - Grid: 2-column desktop layout, single column mobile - prefers-reduced-motion: instant alert, no animations Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-02-13 00:46:14 +00:00
admin	fd9dd7d00e	Update progress: Task 6 completed (PMRInterface layout + Breadcrumb)	2026-02-13 00:40:31 +00:00
admin	8f6bfd0b5e	Task 6: Rebuild PMRInterface layout + Breadcrumb Changes made: - Created Breadcrumb.tsx component with Patient Record > [View] > [Expanded Item] navigation - Integrated Breadcrumb into PMRInterface (desktop/tablet only, not mobile) - Breadcrumb receives currentView, expandedItem props and handles navigation callbacks - Updated all font references from font-inter to font-ui (Elvaro Grotesque) - Added shadow-pmr to default view placeholder card - Mobile back button updated to use font-ui Visual verification: - Breadcrumb renders correctly with gray-400 text, chevron separators, 13px font size - Navigation updates breadcrumb path correctly (tested Summary → Experience) - Layout: fixed sidebar, sticky banner, scrollable content all working - View switching is instant (no animation between views) - Premium font (Elvaro Grotesque) rendering throughout interface Quality checks: All passed (typecheck, lint, build — 396.39 KB bundle) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>	2026-02-13 00:39:41 +00:00
admin	803c4f8a48	Update progress: Task 5 completed (ClinicalSidebar rebuild) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-02-13 00:36:22 +00:00
admin	5533cded82	Task 5: Rebuild ClinicalSidebar with CV-friendly labels and premium font - Replace clinical jargon labels with CV-friendly terms: Experience, Skills, Achievements, Projects, Education, Contact - Replace all font-inter references with font-ui (Elvaro Grotesque) - Fix Tailwind opacity syntax: bg-white/12 → bg-white/[0.12] etc. - Add right edge border (border-r border-[#334155]) for sidebar depth - Add focus-visible ring styles on all nav buttons - Set explicit h-[44px] and font-[14px] per design spec - Add border-transparent on inactive items to prevent layout shift - Update footer text color to #64748B per spec - Update MobileBottomNav labels to match sidebar convention - Update PMRInterface viewLabels to CV-friendly names Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-02-13 00:35:43 +00:00
admin	86e0015393	Update progress: Task 4b completed (scroll condensation fix) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-02-13 00:31:03 +00:00
admin	d16656b954	Task 4b: Fix PatientBanner scroll condensation Root cause: sentinel element with `absolute top-0` inside PatientBanner was positioned at viewport top, always triggering the IntersectionObserver's -100px rootMargin threshold — banner was permanently stuck in condensed state. Fix: Restructured PMRInterface layout from document-scroll to flex container with explicit scroll container (`overflow-y-auto` on main). Lifted scroll condensation logic to PMRInterface, passing `isCondensed` prop down to PatientBanner. Replaced IntersectionObserver with scroll event listener on the main element for reliable scroll position detection. Key changes: - PMRInterface: flex h-screen overflow-hidden layout (sidebar + content column) - PatientBanner: accepts isCondensed prop, removed sticky/sentinel/hook - ClinicalSidebar: h-full instead of h-screen sticky (parent handles sizing) - useScrollCondensation: scroll event on container element via callback ref Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-02-13 00:30:23 +00:00