feat: build Learning Planner evidence project

2026-08-14 10:42:39 +01:00
commit 370aaa2e01
58 changed files with 4888 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,27 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+playwright-report
+test-results
+work
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- a/.oxlintrc.json
+++ b/.oxlintrc.json
@@ -0,0 +1,8 @@
+{
+  "$schema": "./node_modules/oxlint/configuration_schema.json",
+  "plugins": ["react", "typescript", "oxc"],
+  "rules": {
+    "react/rules-of-hooks": "error",
+    "react/only-export-components": ["warn", { "allowConstantExport": true }]
+  }
+}
--- a/README.md
+++ b/README.md
@@ -0,0 +1,65 @@
+# Learning Planner
+
+A polished, local-first React application for turning learning goals into focused, trackable tasks. The project was created as a practical engineering competency artifact: it combines product planning, typed implementation, persistence, responsive design, cross-browser automation, and a traceable evidence pack.
+
+![Learning Planner dashboard](docs/evidence/screenshots/responsive-1920x1080-dashboard.png)
+
+## What it demonstrates
+
+- Goal and task CRUD with confirmation, search, filtering and sorting.
+- Derived progress and dashboard statistics without duplicated state.
+- Versioned `localStorage` behind a validated storage adapter.
+- Validated JSON backup/import, corruption recovery and sample-data reset.
+- Semantic navigation, form labels, visible focus and reduced-motion support.
+- Deliberate layouts for 1920×1080, 1680×1050, 1920×1200 and a narrow robustness viewport.
+- Vitest/Testing Library and Playwright checks in Chromium and Firefox.
+
+## Run locally
+
+Requirements: Node.js 22+ and npm 10+.
+
+```bash
+npm install
+npm run dev
+```
+
+The application has no server-side services and sends no planner data over the network.
+
+## Quality commands
+
+```bash
+npm run check             # lint, 9 unit/component tests, type-check and build
+npm run test:e2e          # Chromium, Firefox, required viewports and narrow viewport
+npm run evidence:capture  # regenerate non-sensitive evidence screenshots
+npm run preview           # serve the production build
+```
+
+Playwright browser binaries can be installed with `npx playwright install chromium firefox`.
+
+## Project and evidence records
+
+- [Project overview](docs/project/overview.md)
+- [Backlog and dependency register](docs/project/backlog.md)
+- [Roadmap and critical path](docs/project/roadmap.md)
+- [Test strategy](docs/project/test-strategy.md)
+- [Manual test checklist](docs/project/manual-test-checklist.md)
+- [Executed test log](docs/project/test-log.md)
+- [Decision log](docs/project/decision-log.md)
+- [Current status checkpoint](docs/project/status-2026-08-14.md)
+- [Evidence index](docs/evidence/evidence-index.md)
+
+## Data format
+
+Backups contain `AppStateV1` with `version: 1`, `goals`, and `tasks`. Import rejects unsupported versions, malformed records, invalid priorities/statuses, negative estimates, and tasks whose goal does not exist. The storage adapter is isolated in `src/storage.ts` so future migrations can be added without coupling them to the UI.
+
+## Browser support
+
+The automated baseline is current Chromium and Firefox. Microsoft Edge uses the Chromium engine, but the formal Edge evidence must still be run manually on the intended Windows device using the checklist in this repository. Standards-based Grid/Flexbox, feature detection for `crypto.randomUUID`, system fonts and progressive enhancement reduce compatibility risk.
+
+## Repository remote
+
+The intended origin is:
+
+```text
+ssh://git@git.zainezq.com:222/zaine/learning-planner.git
+```
--- a/docs/evidence/evidence-index.md
+++ b/docs/evidence/evidence-index.md
@@ -0,0 +1,17 @@
+# Evidence index
+
+| Evidence ID | Claim | Artifact |
+|---|---|---|
+| PM-01 | Scope, journeys and acceptance criteria were defined | `docs/project/overview.md` |
+| PM-02 | Backlog, dependencies and checkpoints were managed | backlog and roadmap documents |
+| PM-03 | Quality gates and incremental status are auditable | test log and checkpoint |
+| RWD-01 | 1920×1080 layout passed | `responsive-1920x1080-dashboard.png` |
+| RWD-02 | 1680×1050 layout passed after a real fix | before/after and dialog screenshots |
+| RWD-03 | 1920×1200 layout passed | `responsive-1920x1200-dashboard.png` |
+| BR-01 | Seeded journey passed in installed Google Chrome | browser screenshot and test log |
+| BR-02 | Seeded journey passed in Firefox | browser screenshot and test log |
+| BR-03 | Chromium engine regression | automated test log |
+| BR-04 | Genuine Edge session | **PENDING manual capture** |
+| DV-01/DV-02 | Two physical computers | **PENDING manual captures** |
+
+The generated evidence documents distinguish completed automated evidence from pending manual evidence. They are suitable as working competency drafts; replace pending appendix pages and update outcomes before claiming the full device/Edge competencies.
--- a/docs/evidence/screenshots/README.md
+++ b/docs/evidence/screenshots/README.md
@@ -0,0 +1,5 @@
+# Evidence screenshots
+
+These files are generated from the non-sensitive sample dataset by `npm run evidence:capture`.
+
+The automated captures prove Chromium/Firefox and viewport behaviour. Edge and two-physical-device captures are intentionally not fabricated: add them after completing the sessions in `docs/project/manual-test-checklist.md`.
--- a/docs/evidence/screenshots/browser-chrome-dashboard.png
+++ b/docs/evidence/screenshots/browser-chrome-dashboard.png
--- a/docs/evidence/screenshots/browser-chromium-dashboard.png
+++ b/docs/evidence/screenshots/browser-chromium-dashboard.png
--- a/docs/evidence/screenshots/browser-firefox-dashboard.png
+++ b/docs/evidence/screenshots/browser-firefox-dashboard.png
--- a/docs/evidence/screenshots/responsive-1680x1050-dashboard.png
+++ b/docs/evidence/screenshots/responsive-1680x1050-dashboard.png
--- a/docs/evidence/screenshots/responsive-1680x1050-goal-dialog.png
+++ b/docs/evidence/screenshots/responsive-1680x1050-goal-dialog.png
--- a/docs/evidence/screenshots/responsive-1920x1080-dashboard.png
+++ b/docs/evidence/screenshots/responsive-1920x1080-dashboard.png
--- a/docs/evidence/screenshots/responsive-1920x1200-dashboard.png
+++ b/docs/evidence/screenshots/responsive-1920x1200-dashboard.png
--- a/docs/evidence/screenshots/responsive-defect-before-1680x1050.png
+++ b/docs/evidence/screenshots/responsive-defect-before-1680x1050.png
--- a/docs/evidence/screenshots/responsive-fix-after-1680x1050.png
+++ b/docs/evidence/screenshots/responsive-fix-after-1680x1050.png
--- a/docs/project/backlog.md
+++ b/docs/project/backlog.md
@@ -0,0 +1,30 @@
+# Backlog and dependency register
+
+Status legend: `Done`, `Manual pending`. The repository board uses a one-item work-in-progress limit; this snapshot is the portable source for the final evidence submission.
+
+| ID | Deliverable | Depends on | Milestone | Status | Acceptance evidence |
+|---|---|---|---|---|---|
+| P01 | Repository, Vite project and quality scripts | — | M1 | Done | `package.json`, clean quality gate |
+| P02 | Requirements, journeys and acceptance criteria | P01 | M1 | Done | `overview.md` |
+| P03 | Types, validation, versioned storage and sample data | P01 | M2 | Done | storage/domain tests |
+| P04 | App shell, design tokens and responsive layout | P02 | M2 | Done | viewport captures |
+| P05 | Goal list and CRUD | P03, P04 | M3 | Done | component and E2E tests |
+| P06 | Task CRUD, status, priority and due dates | P05 | M3 | Done | component and E2E tests |
+| P07 | Dashboard, progress and upcoming tasks | P06 | M4 | Done | dashboard capture |
+| P08 | Search, filtering and sorting | P06 | M4 | Done | component and E2E tests |
+| P09 | Export/import, sample reset and recovery | P03, P06 | M4 | Done | storage tests and UI |
+| P10 | Keyboard, semantic controls, errors and empty states | P07–P09 | M4 | Done | manual code/UI review |
+| P11 | Unit, component and core browser suites | P03–P10 | M5 | Done | 9 unit/component + browser suite |
+| P12 | Required responsive pass and fixes | P10, P11 | M5 | Done | before/after 1680 evidence |
+| P13a | Google Chrome, Chromium and Firefox test pass | P12 | M5 | Done | automated browser results |
+| P13b | Microsoft Edge manual pass | P12 | M5 | Manual pending | Windows Edge checklist |
+| P13c | Two physical-device sessions | P12 | M5 | Manual pending | signed device records/screenshots |
+| P14 | Evidence documents and release package | P13a | M6 | Done with appendable placeholders | DOCX/PDF outputs |
+
+## Board snapshot
+
+| Backlog | Ready | In progress | Review/Test | Done |
+|---|---|---|---|---|
+| P13b Edge session; P13c device sessions | — | — | Replace pending appendix evidence after sessions | P01–P12, P13a, P14 |
+
+The manual items are intentionally not reported as complete. Their result may change the browser/device competency outcomes and must be incorporated before final assessor submission.
--- a/docs/project/decision-log.md
+++ b/docs/project/decision-log.md
@@ -0,0 +1,30 @@
+# Decision log
+
+## ADR-01: Local-first persistence
+
+**Decision:** Use a versioned storage adapter over `localStorage` with validated JSON import/export.  
+**Reason:** It keeps a solo project achievable, demonstrates data boundaries and recovery, and avoids unrelated account/cloud work.  
+**Consequence:** Data is per-browser; the UI says this clearly and provides a portable backup.
+
+## ADR-02: Derived progress
+
+**Decision:** Calculate completion and dashboard summaries from task records.  
+**Reason:** Storing calculated progress would introduce synchronisation defects.  
+**Evidence:** Domain tests cover empty and partially complete goals.
+
+## ADR-03: Standards and compatibility
+
+**Decision:** Use semantic HTML, system fonts, Grid/Flexbox, feature detection and a UUID fallback.  
+**Reason:** Avoid browser-specific styling and unnecessary polyfills while keeping a clear backwards-compatibility path.
+
+## RWD-01: 1680 summary-card orphan
+
+**Observed:** Visual inspection at 1680×1050 showed a three-column grid with the fourth summary card alone on a second row. Functionality passed, but hierarchy and balance were poor.  
+**Decision:** Use a balanced 2×2 summary grid below 1800 px and a four-column row from 1800 px.  
+**Verification:** Computed styles changed from three columns to two; `scrollWidth` remained equal to `clientWidth`; the full core journey passed again.  
+**Evidence:** `responsive-defect-before-1680x1050.png` and `responsive-fix-after-1680x1050.png`.
+
+## ADR-04: Truthful manual evidence
+
+**Decision:** Do not simulate Microsoft Edge or claim physical-device sessions from a Linux host.  
+**Reason:** Viewport automation is useful evidence but is not equivalent to two real computers or a genuine Edge build. The supplied protocol makes the remaining evidence reproducible and auditable.
--- a/docs/project/manual-test-checklist.md
+++ b/docs/project/manual-test-checklist.md
@@ -0,0 +1,42 @@
+# Manual Edge and physical-device checklist
+
+Use the seeded sample data. Do not mark a row complete without a real session. Capture the application and the relevant OS/browser information screen without personal information.
+
+## Session metadata
+
+| Field | Device A | Device B |
+|---|---|---|
+| Manufacturer/model | PENDING | PENDING |
+| Operating system/version | PENDING | PENDING |
+| Native display resolution | PENDING | PENDING |
+| Display scaling | PENDING | PENDING |
+| Browser and exact version | PENDING | PENDING |
+| `innerWidth × innerHeight` | PENDING | PENDING |
+| Tester/date | PENDING | PENDING |
+
+## Principal workflow
+
+- [ ] Load sample data and confirm four goals/nine tasks.
+- [ ] Create a goal and confirm required-field validation is announced and visible.
+- [ ] Add, edit, complete, search/filter and delete a task.
+- [ ] Reload and confirm changes persist.
+- [ ] Export a backup, restore sample data, then import the backup.
+- [ ] Use Tab/Shift+Tab/Enter/Escape and confirm logical focus with visible indicators.
+- [ ] Inspect long titles, date fields, modal fit, scrolling and 125% zoom.
+- [ ] Confirm no page-level horizontal overflow.
+- [ ] Confirm the application console has no errors.
+
+## Edge developer-tools evidence
+
+- [ ] Capture `edge://settings/help` with the stable version visible.
+- [ ] Capture the seeded dashboard in Edge.
+- [ ] Capture DevTools Console after the principal workflow.
+- [ ] Capture Application → Local Storage showing `learning-planner.state` (avoid expanding sensitive data).
+- [ ] Record computed Grid columns at the device viewport.
+- [ ] Record any difference from Chromium/Firefox and the retest result.
+
+## Required screenshot names
+
+`device-a-system.png`, `device-a-dashboard.png`, `device-b-system.png`, `device-b-dashboard.png`, `browser-edge-dashboard.png`, `browser-edge-console.png`, `browser-edge-storage.png`.
+
+After completing the sessions, update `test-log.md`, replace pending text in the device/browser evidence documents, regenerate DOCX/PDF files and tag the assessor-ready revision.
--- a/docs/project/overview.md
+++ b/docs/project/overview.md
@@ -0,0 +1,31 @@
+# Project overview
+
+## Product
+
+Learning Planner helps one person define learning outcomes, break them into tasks and see progress without creating an account. Its primary audience is an engineer or knowledge worker who wants a lightweight plan that remains private in the browser.
+
+## Problem and outcome
+
+Learning plans often become disconnected notes. The application provides one coherent workspace containing goals, actionable tasks, deadlines, priorities and derived progress. A successful version must survive reloads, offer portable backups, recover safely from bad data and remain usable across the agreed displays and browsers.
+
+## Core user journeys
+
+1. Review the dashboard and identify the next useful task.
+2. Create, edit and delete a goal with clear validation and confirmation.
+3. Create and update tasks connected to a goal.
+4. Search, filter, sort and mark tasks complete.
+5. Export a JSON backup, validate an import and restore sample data.
+6. Use all principal workflows with keyboard and visible focus.
+
+## Acceptance criteria
+
+- A clean clone installs, checks, builds and runs using documented commands.
+- Goal/task changes persist after reload and dashboard progress is derived correctly.
+- Valid backup export/import round-trips; malformed data fails safely.
+- No page-level horizontal overflow exists at the three required viewports.
+- The same seeded core journey passes in Chromium and Firefox.
+- Edge and two physical devices have a repeatable manual protocol and cannot be marked complete without real device metadata.
+
+## Scope boundary
+
+Included: single-user browser storage, CRUD, dashboard, search/filter/sort, backup/recovery, responsive/accessibility behaviours and automated tests. Excluded: authentication, multi-user sync, cloud services, notifications and a server-side database.
--- a/docs/project/roadmap.md
+++ b/docs/project/roadmap.md
@@ -0,0 +1,37 @@
+# Roadmap and critical path
+
+```mermaid
+flowchart LR
+  P01["P01 Foundation"] --> P02["P02 Requirements"]
+  P01 --> P03["P03 Data & storage"]
+  P02 --> P04["P04 Responsive shell"]
+  P03 --> P05["P05 Goal CRUD"]
+  P04 --> P05
+  P05 --> P06["P06 Task CRUD"]
+  P06 --> P07["P07 Dashboard"]
+  P06 --> P08["P08 Search/filter"]
+  P03 --> P09["P09 Backup/recovery"]
+  P06 --> P09
+  P07 --> P10["P10 Accessibility & states"]
+  P08 --> P10
+  P09 --> P10
+  P10 --> P11["P11 Automated tests"]
+  P11 --> P12["P12 Responsive pass"]
+  P12 --> P13["P13 Browser/device pass"]
+  P13 --> P14["P14 Evidence package"]
+  classDef critical fill:#6257d9,color:#fff,stroke:#4c43b8,stroke-width:2px;
+  class P01,P02,P03,P04,P05,P06,P07,P10,P11,P12,P13,P14 critical;
+```
+
+**Critical path:** P01 → P02/P03 → P04 → P05 → P06 → P07 → P10 → P11 → P12 → P13 → P14. P08 and P09 were parallel branches converging at P10.
+
+| Milestone | Exit checkpoint | Result |
+|---|---|---|
+| M1 Planned | Requirements, backlog and dependencies recorded | Complete |
+| M2 Foundation | App shell, model and storage adapter working | Complete |
+| M3 MVP | Goal/task CRUD persists through reload | Complete |
+| M4 Feature complete | Dashboard, filters, backup and errors complete | Complete |
+| M5 Test complete | Automated browser/viewports green; Edge/devices recorded | Partially complete: manual rows pending |
+| M6 Evidence complete | Word/PDF packs rendered and records linked | Complete, pending appendix replacements |
+
+The manual sessions remain a release checkpoint for the final assessor copy, even though the application and automated evidence package are complete.
--- a/docs/project/status-2026-08-14.md
+++ b/docs/project/status-2026-08-14.md
@@ -0,0 +1,22 @@
+# Checkpoint: 14 August 2026
+
+## Completed
+
+- P01–P12 and P13a: product, storage, responsive interface, automated test suite and browser comparison.
+- RWD-01 identified through visual review, corrected and regression-tested.
+- Evidence screenshots generated from non-sensitive sample data.
+- Three concise competency documents produced in Word and PDF with appendix evidence/placeholders.
+
+## Metrics
+
+- Backlog: 16 tracked rows; 13 complete, 3 genuine manual/release rows pending.
+- Automated unit/component tests: 9 passed.
+- Final Playwright run: 26 passed, 2 intentional capture-only skips.
+- Required automated viewports: 3/3 passed.
+- Automated browsers/engines: installed Google Chrome, Chromium and Firefox passed.
+- Physical device sessions: 0/2 pending user hardware.
+- Microsoft Edge session: pending Windows/Edge access.
+
+## Blockers and next checkpoint
+
+No application-code blocker remains. The final assessor submission is gated by real Edge and two-device sessions. Run `manual-test-checklist.md`, add the named captures, update BR-03/DV-01/DV-02, regenerate evidence documents and tag the resulting commit `v1.0.0`.
--- a/docs/project/test-log.md
+++ b/docs/project/test-log.md
@@ -0,0 +1,25 @@
+# Executed test log
+
+Execution date: 14 August 2026. Host: Linux development workstation, Node 22.22.2, npm 10.9.7.
+
+| Test ID | Scope | Environment | Result | Evidence |
+|---|---|---|---|---|
+| UT-01 | Domain calculations | Vitest/jsdom | Pass: 3 tests | terminal quality-gate output |
+| UT-02 | Storage validation/recovery | Vitest/jsdom | Pass: 3 tests | terminal quality-gate output |
+| CT-01 | Dashboard/form/filter UI | Testing Library/jsdom | Pass: 3 tests | terminal quality-gate output |
+| E2E-01 | Persisted goal journey | Chromium + Firefox | Pass | Playwright run |
+| E2E-02 | Task search/status | Chromium + Firefox | Pass | Playwright run |
+| RWD-01 | Overflow and core journey | 1920×1080 | Pass | responsive screenshot |
+| RWD-02 | Overflow and core journey | 1680×1050 | Pass after layout fix | before/after screenshots |
+| RWD-03 | Overflow and core journey | 1920×1200 | Pass | responsive screenshot |
+| RWD-04 | Narrow robustness | 768×900 Chromium | Pass | Playwright run |
+| BR-01 | Google Chrome core comparison | Installed stable Chrome channel | Pass | browser screenshot |
+| BR-02 | Chromium engine comparison | Chromium 151 Playwright build | Pass | Playwright run |
+| BR-03 | Firefox core comparison | Firefox 153 Playwright build | Pass | browser screenshot |
+| BR-04 | Edge stable manual session | Windows device | **PENDING** | manual checklist |
+| DV-01 | Physical computer A | Real hardware | **PENDING** | manual checklist |
+| DV-02 | Physical computer B | Real hardware | **PENDING** | manual checklist |
+
+Latest recorded automated run: nine unit/component tests passed. The full Playwright run passed 26 combinations with two intentional evidence-capture skips, covering installed Google Chrome, Chromium, Firefox, three required viewports and a narrow viewport.
+
+The Electron host emitted its own development CSP warning during in-app inspection; the application itself produced no console errors. This host warning does not originate from the built web application.
--- a/docs/project/test-strategy.md
+++ b/docs/project/test-strategy.md
@@ -0,0 +1,36 @@
+# Test strategy
+
+## Test layers
+
+- **Domain unit tests:** progress, dashboard summaries and chronological ordering.
+- **Storage unit tests:** valid round-trip, corrupt JSON recovery, unsupported schema and orphaned-task rejection.
+- **Component tests:** seeded dashboard, form validation/creation and task filtering.
+- **Browser tests:** persisted CRUD journey, task interaction and horizontal-overflow checks.
+- **Visual evidence:** seeded dashboard at all required viewports plus matching Chromium/Firefox captures.
+- **Manual sessions:** Microsoft Edge developer tools and two real computers using the same scenario/data.
+
+## Responsive matrix
+
+| Viewport | Expected behaviour | Automated assertion | Visual evidence |
+|---|---|---|---|
+| 1920×1080 | Four summary cards, two-column dashboard, full navigation | Core journey and no horizontal overflow | `responsive-1920x1080-dashboard.png` |
+| 1680×1050 | Balanced 2×2 summary grid, compact gaps, usable modal | Core journey and no horizontal overflow | dashboard, dialog and before/after fix |
+| 1920×1200 | Four cards and two-column dashboard with more content visible vertically | Core journey and no horizontal overflow | `responsive-1920x1200-dashboard.png` |
+| 768×900 | Top navigation, single-column content and wrapped controls | Core journey and no horizontal overflow | Automated robustness check only |
+
+At every required resolution also verify 100%/125% zoom, focus visibility, long content, dialogs, validation, menus, persistence and a clean application console.
+
+## Browser matrix
+
+| Browser | Automated | Manual developer tools | Status |
+|---|---|---|---|
+| Google Chrome installed stable channel | Yes | Automated functional comparison | Pass |
+| Chromium 151 test build | Yes | Console reviewed in local preview | Pass |
+| Firefox 153 Playwright build | Yes | Automated functional comparison | Pass |
+| Microsoft Edge current stable | Configured manual protocol | Required on Windows | Pending |
+
+Compatibility risks include date-control rendering, font metrics, Grid/Flexbox sizing, sticky positioning, focus outlines, downloads/uploads, `localStorage` and `crypto.randomUUID`. The implementation uses system fonts, standards-based CSS, feature detection with an ID fallback, reduced-motion handling and no experimental API dependency.
+
+## Defect policy
+
+Record the environment, steps, expected/actual behaviour, severity and screenshot. Fix at the lowest safe layer, add a regression check where practical, rerun the affected matrix and retain before/after evidence. The first recorded responsive defect is RWD-01 in the decision log.
--- a/e2e/app.spec.ts
+++ b/e2e/app.spec.ts
@@ -0,0 +1,37 @@
+import { expect, test } from '@playwright/test'
+
+test.beforeEach(async ({ page }) => {
+  await page.goto('/')
+  await page.evaluate(() => localStorage.clear())
+  await page.reload()
+})
+
+test('core planning journey persists after reload', async ({ page }) => {
+  await expect(page.getByRole('heading', { name: /good progress starts/i })).toBeVisible()
+  await page.getByRole('button', { name: 'Learning goals' }).click()
+  await page.getByRole('button', { name: 'New goal' }).click()
+  await page.getByLabel('Goal title').fill('Research progressive enhancement')
+  await page.getByLabel('Category').fill('Web platform')
+  await page.getByLabel('Target date').fill('2026-12-01')
+  await page.getByRole('button', { name: 'Save goal' }).click()
+  await expect(page.getByRole('heading', { name: 'Research progressive enhancement' })).toBeVisible()
+  await page.reload()
+  await page.getByRole('button', { name: 'Learning goals' }).click()
+  await expect(page.getByRole('heading', { name: 'Research progressive enhancement' })).toBeVisible()
+})
+
+test('task search and status interaction work', async ({ page }) => {
+  await page.getByLabel('Primary navigation').getByRole('button', { name: /All tasks/ }).click()
+  await page.getByLabel('Search tasks').fill('Firefox')
+  const task = page.locator('.task-row').filter({ hasText: 'Run Firefox regression suite' })
+  await expect(task).toBeVisible()
+  await task.getByRole('button', { name: /complete run firefox/i }).click()
+  await expect(task).toHaveClass(/complete/)
+})
+
+test('required viewport has no page-level horizontal overflow', async ({ page }) => {
+  const dimensions = await page.evaluate(() => ({ scrollWidth: document.documentElement.scrollWidth, clientWidth: document.documentElement.clientWidth }))
+  expect(dimensions.scrollWidth).toBeLessThanOrEqual(dimensions.clientWidth)
+  await expect(page.locator('.topbar')).toBeVisible()
+  await expect(page.locator('.dashboard-grid')).toBeVisible()
+})
--- a/e2e/evidence.spec.ts
+++ b/e2e/evidence.spec.ts
@@ -0,0 +1,46 @@
+import { expect, test } from '@playwright/test'
+
+const output = 'docs/evidence/screenshots'
+const supported = new Set(['chrome', 'firefox', 'chromium-1920x1080', 'chromium-1680x1050', 'chromium-1920x1200'])
+
+test('capture evidence dashboard', async ({ page }, testInfo) => {
+  test.skip(!supported.has(testInfo.project.name), 'Only required evidence projects generate captures.')
+  await page.goto('/')
+  await page.evaluate(() => localStorage.clear())
+  await page.reload()
+
+  const metadata = await page.evaluate(() => ({
+    width: window.innerWidth,
+    height: window.innerHeight,
+    browser: navigator.userAgent.includes('Firefox') ? 'Firefox' : 'Google Chrome',
+  }))
+  await page.evaluate((label) => {
+    const badge = document.createElement('div')
+    badge.id = 'evidence-metadata'
+    badge.textContent = label
+    Object.assign(badge.style, { position: 'fixed', right: '16px', bottom: '14px', zIndex: '9999', background: '#171429e6', color: '#fff', padding: '8px 12px', borderRadius: '8px', font: '600 12px sans-serif', boxShadow: '0 4px 18px #0004' })
+    document.body.appendChild(badge)
+  }, `${metadata.browser} · ${metadata.width}×${metadata.height} · ${new Date().toISOString().slice(0, 10)}`)
+
+  const filename = testInfo.project.name === 'chrome' || testInfo.project.name === 'firefox'
+    ? `browser-${testInfo.project.name}-dashboard.png`
+    : `responsive-${metadata.width}x${metadata.height}-dashboard.png`
+  await page.screenshot({ path: `${output}/${filename}`, fullPage: true })
+  await expect(page.locator('.app-shell')).toBeVisible()
+
+  if (testInfo.project.name === 'chromium-1680x1050') {
+    await page.addStyleTag({ content: '@media (min-width:1400px) and (max-width:1799px){.stat-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}}' })
+    await page.screenshot({ path: `${output}/responsive-defect-before-1680x1050.png`, fullPage: true })
+    await page.reload()
+    await page.evaluate(() => {
+      const badge = document.createElement('div')
+      badge.textContent = 'Chromium · 1680×1050 · corrected 2×2 summary grid'
+      Object.assign(badge.style, { position: 'fixed', right: '16px', bottom: '14px', zIndex: '9999', background: '#08735ee6', color: '#fff', padding: '8px 12px', borderRadius: '8px', font: '600 12px sans-serif' })
+      document.body.appendChild(badge)
+    })
+    await page.screenshot({ path: `${output}/responsive-fix-after-1680x1050.png`, fullPage: true })
+    await page.getByLabel('Primary navigation').getByRole('button', { name: 'Learning goals' }).click()
+    await page.getByRole('button', { name: 'New goal' }).click()
+    await page.screenshot({ path: `${output}/responsive-1680x1050-goal-dialog.png`, fullPage: true })
+  }
+})
--- a/evidence-documents/01-personal-project-management.docx
+++ b/evidence-documents/01-personal-project-management.docx
--- a/evidence-documents/01-personal-project-management.pdf
+++ b/evidence-documents/01-personal-project-management.pdf
--- a/evidence-documents/02-multiple-device-testing.docx
+++ b/evidence-documents/02-multiple-device-testing.docx
--- a/evidence-documents/02-multiple-device-testing.pdf
+++ b/evidence-documents/02-multiple-device-testing.pdf
--- a/evidence-documents/03-multiple-browser-testing.docx
+++ b/evidence-documents/03-multiple-browser-testing.docx
--- a/evidence-documents/03-multiple-browser-testing.pdf
+++ b/evidence-documents/03-multiple-browser-testing.pdf
--- a/index.html
+++ b/index.html
@@ -0,0 +1,15 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="theme-color" content="#24213d" />
+    <meta name="description" content="A local-first workspace for focused learning goals and tasks." />
+    <title>Learning Planner</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -0,0 +1,39 @@
+{
+  "name": "learning-planner",
+  "private": true,
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "oxlint",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:e2e": "playwright test",
+    "test:e2e:chrome": "playwright test --project=chrome",
+    "test:e2e:chromium": "playwright test --project=chromium",
+    "test:e2e:firefox": "playwright test --project=firefox",
+    "evidence:capture": "playwright test e2e/evidence.spec.ts",
+    "check": "npm run lint && npm run test && npm run build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.62.1",
+    "@testing-library/jest-dom": "^7.0.1",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.4",
+    "@types/node": "^24.13.3",
+    "@types/react": "^19.2.17",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^6.0.4",
+    "jsdom": "^30.0.1",
+    "oxlint": "^1.75.0",
+    "typescript": "~6.0.2",
+    "vite": "^8.2.0",
+    "vitest": "^4.1.10"
+  }
+}
--- a/playwright.config.ts
+++ b/playwright.config.ts
@@ -0,0 +1,27 @@
+import { defineConfig, devices } from '@playwright/test'
+
+export default defineConfig({
+  testDir: './e2e',
+  fullyParallel: true,
+  retries: 0,
+  reporter: [['html', { open: 'never' }], ['list']],
+  use: {
+    baseURL: 'http://127.0.0.1:4173',
+    trace: 'retain-on-failure',
+    screenshot: 'only-on-failure',
+  },
+  projects: [
+    { name: 'chrome', use: { ...devices['Desktop Chrome'], channel: 'chrome' } },
+    { name: 'chromium', use: { ...devices['Desktop Chrome'] } },
+    { name: 'firefox', use: { ...devices['Desktop Firefox'] } },
+    { name: 'chromium-1920x1080', use: { ...devices['Desktop Chrome'], viewport: { width: 1920, height: 1080 } } },
+    { name: 'chromium-1680x1050', use: { ...devices['Desktop Chrome'], viewport: { width: 1680, height: 1050 } } },
+    { name: 'chromium-1920x1200', use: { ...devices['Desktop Chrome'], viewport: { width: 1920, height: 1200 } } },
+    { name: 'chromium-narrow', use: { ...devices['Desktop Chrome'], viewport: { width: 768, height: 900 } } },
+  ],
+  webServer: {
+    command: 'npm run preview -- --host 127.0.0.1',
+    port: 4173,
+    reuseExistingServer: true,
+  },
+})
--- a/public/favicon.svg
+++ b/public/favicon.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
+  <defs><linearGradient id="g" x1="8" y1="5" x2="56" y2="59" gradientUnits="userSpaceOnUse"><stop stop-color="#847afa"/><stop offset="1" stop-color="#574bcf"/></linearGradient></defs>
+  <rect width="64" height="64" rx="18" fill="url(#g)"/>
+  <path d="m31.5 13 3.2 9.3 9.3 3.2-9.3 3.2-3.2 9.3-3.2-9.3-9.3-3.2 9.3-3.2 3.2-9.3Z" fill="#fff"/>
+  <path d="m46 37 1.8 5.2L53 44l-5.2 1.8L46 51l-1.8-5.2L39 44l5.2-1.8L46 37Z" fill="#dedbff"/>
+</svg>
--- a/public/icons.svg
+++ b/public/icons.svg
@@ -0,0 +1,24 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+  <symbol id="bluesky-icon" viewBox="0 0 16 17">
+    <g clip-path="url(#bluesky-clip)"><path fill="#08060d" d="M7.75 7.735c-.693-1.348-2.58-3.86-4.334-5.097-1.68-1.187-2.32-.981-2.74-.79C.188 2.065.1 2.812.1 3.251s.241 3.602.398 4.13c.52 1.744 2.367 2.333 4.07 2.145-2.495.37-4.71 1.278-1.805 4.512 3.196 3.309 4.38-.71 4.987-2.746.608 2.036 1.307 5.91 4.93 2.746 2.72-2.746.747-4.143-1.747-4.512 1.702.189 3.55-.4 4.07-2.145.156-.528.397-3.691.397-4.13s-.088-1.186-.575-1.406c-.42-.19-1.06-.395-2.741.79-1.755 1.24-3.64 3.752-4.334 5.099"/></g>
+    <defs><clipPath id="bluesky-clip"><path fill="#fff" d="M.1.85h15.3v15.3H.1z"/></clipPath></defs>
+  </symbol>
+  <symbol id="discord-icon" viewBox="0 0 20 19">
+    <path fill="#08060d" d="M16.224 3.768a14.5 14.5 0 0 0-3.67-1.153c-.158.286-.343.67-.47.976a13.5 13.5 0 0 0-4.067 0c-.128-.306-.317-.69-.476-.976A14.4 14.4 0 0 0 3.868 3.77C1.546 7.28.916 10.703 1.231 14.077a14.7 14.7 0 0 0 4.5 2.306q.545-.748.965-1.587a9.5 9.5 0 0 1-1.518-.74q.191-.14.372-.293c2.927 1.369 6.107 1.369 8.999 0q.183.152.372.294-.723.437-1.52.74.418.838.963 1.588a14.6 14.6 0 0 0 4.504-2.308c.37-3.911-.63-7.302-2.644-10.309m-9.13 8.234c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.894 0 1.614.82 1.599 1.82.001 1-.705 1.82-1.6 1.82m5.91 0c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.893 0 1.614.82 1.599 1.82 0 1-.706 1.82-1.6 1.82"/>
+  </symbol>
+  <symbol id="documentation-icon" viewBox="0 0 21 20">
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="m15.5 13.333 1.533 1.322c.645.555.967.833.967 1.178s-.322.623-.967 1.179L15.5 18.333m-3.333-5-1.534 1.322c-.644.555-.966.833-.966 1.178s.322.623.966 1.179l1.534 1.321"/>
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M17.167 10.836v-4.32c0-1.41 0-2.117-.224-2.68-.359-.906-1.118-1.621-2.08-1.96-.599-.21-1.349-.21-2.848-.21-2.623 0-3.935 0-4.983.369-1.684.591-3.013 1.842-3.641 3.428C3 6.449 3 7.684 3 10.154v2.122c0 2.558 0 3.838.706 4.726q.306.383.713.671c.76.536 1.79.64 3.581.66"/>
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M3 10a2.78 2.78 0 0 1 2.778-2.778c.555 0 1.209.097 1.748-.047.48-.129.854-.503.982-.982.145-.54.048-1.194.048-1.749a2.78 2.78 0 0 1 2.777-2.777"/>
+  </symbol>
+  <symbol id="github-icon" viewBox="0 0 19 19">
+    <path fill="#08060d" fill-rule="evenodd" d="M9.356 1.85C5.05 1.85 1.57 5.356 1.57 9.694a7.84 7.84 0 0 0 5.324 7.44c.387.079.528-.168.528-.376 0-.182-.013-.805-.013-1.454-2.165.467-2.616-.935-2.616-.935-.349-.91-.864-1.143-.864-1.143-.71-.48.051-.48.051-.48.787.051 1.2.805 1.2.805.695 1.194 1.817.857 2.268.649.064-.507.27-.857.49-1.052-1.728-.182-3.545-.857-3.545-3.87 0-.857.31-1.558.8-2.104-.078-.195-.349-1 .077-2.078 0 0 .657-.208 2.14.805a7.5 7.5 0 0 1 1.946-.26c.657 0 1.328.092 1.946.26 1.483-1.013 2.14-.805 2.14-.805.426 1.078.155 1.883.078 2.078.502.546.799 1.247.799 2.104 0 3.013-1.818 3.675-3.558 3.87.284.247.528.714.528 1.454 0 1.052-.012 1.896-.012 2.156 0 .208.142.455.528.377a7.84 7.84 0 0 0 5.324-7.441c.013-4.338-3.48-7.844-7.773-7.844" clip-rule="evenodd"/>
+  </symbol>
+  <symbol id="social-icon" viewBox="0 0 20 20">
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M12.5 6.667a4.167 4.167 0 1 0-8.334 0 4.167 4.167 0 0 0 8.334 0"/>
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M2.5 16.667a5.833 5.833 0 0 1 8.75-5.053m3.837.474.513 1.035c.07.144.257.282.414.309l.93.155c.596.1.736.536.307.965l-.723.73a.64.64 0 0 0-.152.531l.207.903c.164.715-.213.991-.84.618l-.872-.52a.63.63 0 0 0-.577 0l-.872.52c-.624.373-1.003.094-.84-.618l.207-.903a.64.64 0 0 0-.152-.532l-.723-.729c-.426-.43-.289-.864.306-.964l.93-.156a.64.64 0 0 0 .412-.31l.513-1.034c.28-.562.735-.562 1.012 0"/>
+  </symbol>
+  <symbol id="x-icon" viewBox="0 0 19 19">
+    <path fill="#08060d" fill-rule="evenodd" d="M1.893 1.98c.052.072 1.245 1.769 2.653 3.77l2.892 4.114c.183.261.333.48.333.486s-.068.089-.152.183l-.522.593-.765.867-3.597 4.087c-.375.426-.734.834-.798.905a1 1 0 0 0-.118.148c0 .01.236.017.664.017h.663l.729-.83c.4-.457.796-.906.879-.999a692 692 0 0 0 1.794-2.038c.034-.037.301-.34.594-.675l.551-.624.345-.392a7 7 0 0 1 .34-.374c.006 0 .93 1.306 2.052 2.903l2.084 2.965.045.063h2.275c1.87 0 2.273-.003 2.266-.021-.008-.02-1.098-1.572-3.894-5.547-2.013-2.862-2.28-3.246-2.273-3.266.008-.019.282-.332 2.085-2.38l2-2.274 1.567-1.782c.022-.028-.016-.03-.65-.03h-.674l-.3.342a871 871 0 0 1-1.782 2.025c-.067.075-.405.458-.75.852a100 100 0 0 1-.803.91c-.148.172-.299.344-.99 1.127-.304.343-.32.358-.345.327-.015-.019-.904-1.282-1.976-2.808L6.365 1.85H1.8zm1.782.91 8.078 11.294c.772 1.08 1.413 1.973 1.425 1.984.016.017.241.02 1.05.017l1.03-.004-2.694-3.766L7.796 5.75 5.722 2.852l-1.039-.004-1.039-.004z" clip-rule="evenodd"/>
+  </symbol>
+</svg>
--- a/scripts/build_evidence_docs.py
+++ b/scripts/build_evidence_docs.py
@@ -0,0 +1,304 @@
+from __future__ import annotations
+
+from pathlib import Path
+from typing import Iterable
+
+from docx import Document
+from docx.enum.section import WD_SECTION
+from docx.enum.text import WD_ALIGN_PARAGRAPH
+from docx.oxml import OxmlElement
+from docx.oxml.ns import qn
+from docx.shared import Inches, Pt, RGBColor
+
+ROOT = Path(__file__).resolve().parents[1]
+OUT = ROOT / "evidence-documents"
+SHOTS = ROOT / "docs" / "evidence" / "screenshots"
+
+INK = RGBColor(33, 32, 55)
+BLUE = RGBColor(46, 116, 181)
+DARK_BLUE = RGBColor(31, 77, 120)
+MUTED = RGBColor(103, 101, 119)
+PURPLE = RGBColor(98, 87, 217)
+GREEN = RGBColor(11, 143, 116)
+PALE = "F2F4F7"
+
+
+def set_font(run, size: float, color=INK, bold: bool | None = None, italic: bool | None = None):
+    run.font.name = "Calibri"
+    run._element.get_or_add_rPr().rFonts.set(qn("w:ascii"), "Calibri")
+    run._element.get_or_add_rPr().rFonts.set(qn("w:hAnsi"), "Calibri")
+    run.font.size = Pt(size)
+    run.font.color.rgb = color
+    if bold is not None:
+        run.bold = bold
+    if italic is not None:
+        run.italic = italic
+
+
+def shade_paragraph(paragraph, fill: str, border: str = "D9DCE4"):
+    p_pr = paragraph._p.get_or_add_pPr()
+    shd = OxmlElement("w:shd")
+    shd.set(qn("w:fill"), fill)
+    p_pr.append(shd)
+    borders = OxmlElement("w:pBdr")
+    for side in ("top", "left", "bottom", "right"):
+        edge = OxmlElement(f"w:{side}")
+        edge.set(qn("w:val"), "single")
+        edge.set(qn("w:sz"), "6")
+        edge.set(qn("w:color"), border)
+        edge.set(qn("w:space"), "6")
+        borders.append(edge)
+    p_pr.append(borders)
+
+
+def add_page_number(paragraph):
+    paragraph.alignment = WD_ALIGN_PARAGRAPH.RIGHT
+    run = paragraph.add_run("Learning Planner · Competency evidence · ")
+    set_font(run, 8.5, MUTED)
+    fld = OxmlElement("w:fldSimple")
+    fld.set(qn("w:instr"), "PAGE")
+    paragraph._p.append(fld)
+
+
+def configure_document(doc: Document, title: str, competency: str):
+    section = doc.sections[0]
+    section.top_margin = Inches(0.82)
+    section.bottom_margin = Inches(0.78)
+    section.left_margin = Inches(1)
+    section.right_margin = Inches(1)
+    section.header_distance = Inches(0.42)
+    section.footer_distance = Inches(0.42)
+
+    normal = doc.styles["Normal"]
+    normal.font.name = "Calibri"
+    normal._element.rPr.rFonts.set(qn("w:ascii"), "Calibri")
+    normal._element.rPr.rFonts.set(qn("w:hAnsi"), "Calibri")
+    normal.font.size = Pt(11)
+    normal.font.color.rgb = INK
+    normal.paragraph_format.space_before = Pt(0)
+    normal.paragraph_format.space_after = Pt(6)
+    normal.paragraph_format.line_spacing = 1.1
+
+    for style_name, size, color, before, after in (
+        ("Heading 1", 16, BLUE, 16, 8),
+        ("Heading 2", 13, BLUE, 12, 6),
+        ("Heading 3", 12, DARK_BLUE, 8, 4),
+    ):
+        style = doc.styles[style_name]
+        style.font.name = "Calibri"
+        style._element.rPr.rFonts.set(qn("w:ascii"), "Calibri")
+        style._element.rPr.rFonts.set(qn("w:hAnsi"), "Calibri")
+        style.font.size = Pt(size)
+        style.font.bold = True
+        style.font.color.rgb = color
+        style.paragraph_format.space_before = Pt(before)
+        style.paragraph_format.space_after = Pt(after)
+        style.paragraph_format.keep_with_next = True
+
+    header = section.header.paragraphs[0]
+    header.alignment = WD_ALIGN_PARAGRAPH.LEFT
+    header_run = header.add_run(f"ENGINEERING COMPETENCY  ·  {competency.upper()}")
+    set_font(header_run, 8.5, MUTED, bold=True)
+    add_page_number(section.footer.paragraphs[0])
+
+    doc.core_properties.title = title
+    doc.core_properties.subject = competency
+    doc.core_properties.author = "Learning Planner project"
+
+
+def add_masthead(doc: Document, title: str, subtitle: str, status: str):
+    kicker = doc.add_paragraph()
+    kicker.paragraph_format.space_after = Pt(2)
+    run = kicker.add_run("COMPETENCY EVIDENCE BRIEF")
+    set_font(run, 9, PURPLE, bold=True)
+
+    p = doc.add_paragraph()
+    p.paragraph_format.space_after = Pt(4)
+    run = p.add_run(title)
+    set_font(run, 23, INK, bold=True)
+
+    p = doc.add_paragraph()
+    p.paragraph_format.space_after = Pt(12)
+    run = p.add_run(subtitle)
+    set_font(run, 11.5, MUTED)
+
+    meta = doc.add_paragraph()
+    meta.paragraph_format.space_before = Pt(0)
+    meta.paragraph_format.space_after = Pt(12)
+    meta.add_run("Project: ").bold = True
+    meta.add_run("Learning Planner    ")
+    meta.add_run("Date: ").bold = True
+    meta.add_run("14 August 2026    ")
+    meta.add_run("Status: ").bold = True
+    status_run = meta.add_run(status)
+    status_run.font.color.rgb = GREEN if status == "Implemented" else RGBColor(151, 99, 12)
+
+
+def add_section(doc: Document, heading: str, paragraphs: Iterable[tuple[str | None, str]]):
+    doc.add_heading(heading, level=2)
+    for label, text in paragraphs:
+        p = doc.add_paragraph()
+        if label:
+            lead = p.add_run(f"{label}: ")
+            lead.bold = True
+            lead.font.color.rgb = DARK_BLUE
+        p.add_run(text)
+
+
+def add_callout(doc: Document, label: str, text: str, fill: str = PALE):
+    p = doc.add_paragraph()
+    p.paragraph_format.left_indent = Inches(0.12)
+    p.paragraph_format.right_indent = Inches(0.12)
+    p.paragraph_format.space_before = Pt(5)
+    p.paragraph_format.space_after = Pt(9)
+    shade_paragraph(p, fill)
+    run = p.add_run(f"{label}  ")
+    set_font(run, 10.5, DARK_BLUE, bold=True)
+    run = p.add_run(text)
+    set_font(run, 10.5, INK)
+
+
+def add_appendix_page(doc: Document, evidence_id: str, caption: str, image_name: str):
+    doc.add_page_break()
+    kicker = doc.add_paragraph()
+    kicker.paragraph_format.space_after = Pt(2)
+    run = kicker.add_run("SCREENSHOT APPENDIX · EXCLUDED FROM TWO-PAGE NARRATIVE LIMIT")
+    set_font(run, 8.5, PURPLE, bold=True)
+    title = doc.add_paragraph()
+    title.paragraph_format.space_after = Pt(5)
+    run = title.add_run(f"{evidence_id}  {caption}")
+    set_font(run, 15, INK, bold=True)
+    image = SHOTS / image_name
+    if image.exists():
+        p = doc.add_paragraph()
+        p.alignment = WD_ALIGN_PARAGRAPH.CENTER
+        p.paragraph_format.space_after = Pt(6)
+        shape = p.add_run().add_picture(str(image), width=Inches(6.25))
+        shape._inline.docPr.set("descr", caption)
+        shape._inline.docPr.set("title", evidence_id)
+        note = doc.add_paragraph()
+        note.paragraph_format.space_before = Pt(0)
+        note.paragraph_format.space_after = Pt(0)
+        note.alignment = WD_ALIGN_PARAGRAPH.CENTER
+        run = note.add_run(f"Figure {evidence_id}. {caption}. Generated from non-sensitive sample data.")
+        set_font(run, 9, MUTED, italic=True)
+
+
+def build_project_management():
+    doc = Document()
+    configure_document(doc, "Managing a Personal Engineering Project", "Create and manage personal projects")
+    add_masthead(doc, "Managing a Personal Engineering Project", "Planning, delivering and evidencing the Learning Planner web application.", "Implemented")
+    add_section(doc, "Objective", [(None, "Plan and deliver a realistic solo web application while making scope, dependencies, checkpoints, decisions and progress auditable to an engineering assessor.")])
+    add_section(doc, "Approach", [
+        ("Scope", "I selected a local-first learning planner: substantial enough for typed state, CRUD, validation, responsive design and test automation, but bounded by excluding accounts, cloud sync and a backend."),
+        ("Control", "I converted the work into P01–P14, linked dependencies, identified the critical path and defined six milestone exit checks. A versioned board snapshot, roadmap, test log and decision log preserve the evidence."),
+    ])
+    add_section(doc, "Work completed", [
+        ("Foundation", "Created the React/TypeScript/Vite project, quality scripts, stable domain interfaces, a versioned storage adapter and realistic sample data."),
+        ("Product", "Delivered goal/task CRUD, dashboard summaries, search/filter/sort, validation, confirmation, JSON backup/recovery and accessible responsive interactions."),
+        ("Governance", "Recorded acceptance criteria, dependency mapping, milestone status, risks and the RWD-01 decision. Manual Edge/device items remain visibly pending rather than being reported as complete."),
+    ])
+    add_callout(doc, "Critical path", "P01 → P02/P03 → P04 → P05 → P06 → P07 → P10 → P11 → P12 → P13 → P14. Search/filter and backup proceeded as parallel branches before accessibility and final testing.")
+
+    doc.add_page_break()
+    add_section(doc, "Testing performed", [
+        ("Quality gate", "Lint, nine unit/component tests, TypeScript compilation and the production build passed."),
+        ("Browser workflows", "Playwright verified persisted goal creation, task search/status changes and horizontal-overflow protection across Google Chrome, Chromium, Firefox and all required automated viewports."),
+        ("Checkpoint review", "I compared implementation against each backlog acceptance criterion and retained named test/evidence IDs. This exposed one visual defect at 1680×1050, which was fixed and retested."),
+    ])
+    add_section(doc, "Outcome", [(None, "The project is runnable from a clean clone, the automated delivery scope is complete and the repository contains a portable audit trail. The assessor-ready release remains gated by genuine Edge and two-physical-device sessions, for which a signed checklist and screenshot naming protocol are supplied.")])
+    add_section(doc, "Lessons learned", [
+        ("Make dependencies explicit", "The data model and responsive shell could progress in parallel, but CRUD depended on both; documenting that convergence kept sequencing clear."),
+        ("Treat evidence as a deliverable", "Test IDs, seeded data and screenshot names must be designed early. Retrofitting them would have produced weaker, less repeatable evidence."),
+        ("Report status truthfully", "A viewport emulator is not a physical device and Chromium is not Edge. Visible pending checkpoints are stronger engineering evidence than unsupported completion claims."),
+    ])
+    add_callout(doc, "Evidence map", "PM-01 overview and acceptance criteria · PM-02 backlog/dependencies/roadmap · PM-03 test and checkpoint logs · Appendix figures show the delivered application and validated goal workflow.", "EEF0FF")
+    add_appendix_page(doc, "PM-04", "Evidence-ready application at 1920×1080", "responsive-1920x1080-dashboard.png")
+    add_appendix_page(doc, "PM-05", "Goal creation workflow at the 1680×1050 checkpoint", "responsive-1680x1050-goal-dialog.png")
+    return doc
+
+
+def build_devices():
+    doc = Document()
+    configure_document(doc, "Testing Across Multiple Devices", "Test against multiple devices")
+    add_masthead(doc, "Testing Across Multiple Devices", "Responsive verification at three desktop resolutions with a reproducible physical-device protocol.", "Manual completion pending")
+    add_section(doc, "Objective", [(None, "Demonstrate that Learning Planner remains readable, operable and visually coherent at 1920×1080, 1680×1050 and 1920×1200, then repeat the principal workflow on two genuine computers.")])
+    add_section(doc, "Approach", [
+        ("Repeatability", "Playwright set exact viewport dimensions and used the same non-sensitive dataset and core journey at every size. Each capture includes environment metadata."),
+        ("Physical proof", "The manual protocol records manufacturer/model, OS, native resolution, scaling, browser version, inner viewport, tester and date for two computers. These fields cannot be completed by emulation."),
+    ])
+    add_section(doc, "Work completed", [
+        ("Responsive system", "Used a fixed desktop navigation rail, max-width content, Grid/Flexbox, wrapping controls, viewport-safe dialogs, visible focus, long-text protection and reduced-motion support."),
+        ("Breakpoint intent", "At 1920 px the summary uses one four-card row; at 1680 px it becomes a balanced 2×2 grid; additional 1200 px height exposes more content without stretching controls."),
+        ("Robustness", "A 768×900 check verifies the top-navigation and single-column fallback even though it is outside the formal evidence matrix."),
+    ])
+    add_callout(doc, "Responsive elements", "Navigation, summary cards, progress and task panels, goal cards, filters, dates, long titles, validation, focus, dialogs, empty/error states and scrolling were included in the matrix.")
+
+    doc.add_page_break()
+    add_section(doc, "Testing performed", [
+        ("Automated", "At all three required viewports the persisted CRUD journey, task interaction and page-level overflow assertion passed. The narrow robustness project also passed."),
+        ("Visual", "Full-page captures were inspected for clipping, overlap, font wrapping, spacing, card balance and modal fit. `scrollWidth` equalled `clientWidth` at 1680 after the fix."),
+        ("Zoom and keyboard", "The checklist covers 100%/125% zoom, Tab/Shift+Tab/Enter/Escape, focus visibility, long content and a clean application console."),
+    ])
+    add_section(doc, "Outcome", [(None, "Automated responsive evidence passes for 1920×1080, 1680×1050 and 1920×1200. The two physical sessions are deliberately marked pending; this document is a working competency draft until their metadata and captures replace that status.")])
+    add_section(doc, "Lessons learned", [
+        ("Functional pass is not visual quality", "At 1680×1050 the original three-column summary left one orphaned card. Automated overflow checks passed, but visual review exposed weak hierarchy."),
+        ("Breakpoints should protect composition", "Changing to a 2×2 arrangement below 1800 px created balance without smaller text or cramped controls."),
+        ("Device evidence needs context", "Resolution alone is ambiguous when OS scaling and browser chrome change the usable viewport; recording both native and inner dimensions makes results reproducible."),
+    ])
+    add_callout(doc, "Remaining checkpoint", "Run DV-01 and DV-02 on real computers, attach the named system/application captures, update the test log and regenerate this package.", "FFF5E6")
+    add_appendix_page(doc, "RWD-01", "Dashboard at 1920×1080", "responsive-1920x1080-dashboard.png")
+    add_appendix_page(doc, "RWD-02", "Dashboard at 1680×1050 after correction", "responsive-1680x1050-dashboard.png")
+    add_appendix_page(doc, "RWD-03", "Dashboard at 1920×1200", "responsive-1920x1200-dashboard.png")
+    add_appendix_page(doc, "RWD-04A", "Reproduced 1680×1050 card-orphan defect", "responsive-defect-before-1680x1050.png")
+    add_appendix_page(doc, "RWD-04B", "Corrected balanced 2×2 summary grid", "responsive-fix-after-1680x1050.png")
+    return doc
+
+
+def build_browsers():
+    doc = Document()
+    configure_document(doc, "Testing Across Multiple Browsers", "Test using multiple browsers")
+    add_masthead(doc, "Testing Across Multiple Browsers", "A consistent browser strategy for Google Chrome, Mozilla Firefox and Microsoft Edge.", "Edge session pending")
+    add_section(doc, "Objective", [(None, "Show that the same Learning Planner workflows and responsive layouts behave consistently in Google Chrome, Microsoft Edge and Mozilla Firefox, with reproducible developer-tools evidence and compatibility remediation.")])
+    add_section(doc, "Approach", [
+        ("Common scenario", "Each browser starts from the same seeded dataset and executes persisted goal creation, task search/status, storage reload and overflow checks. This separates browser differences from test-data differences."),
+        ("Coverage", "Playwright runs the installed Google Chrome channel and a Mozilla Firefox build. A Windows Edge protocol repeats the scenario and captures version, Console, Local Storage and computed Grid evidence."),
+    ])
+    add_section(doc, "Work completed", [
+        ("Compatibility design", "Used semantic HTML, system fonts, standards-based Grid/Flexbox, visible focus, reduced motion, a `crypto.randomUUID` fallback and validated browser storage."),
+        ("Developer tools", "Console review checks runtime errors; Application/Storage verifies persistence; computed styles expose breakpoint differences; the accessibility tree verifies useful control names and structure."),
+        ("Regression path", "A reproduced issue must record environment and expected/actual behaviour, use the smallest standards-based fix and gain an automated or documented manual retest."),
+    ])
+    add_callout(doc, "Compatibility concerns", "Date inputs, font metrics/wrapping, sticky positioning, focus outlines, Grid sizing, downloads/uploads, localStorage and UUID support are explicit checklist items.")
+
+    doc.add_page_break()
+    add_section(doc, "Testing performed", [
+        ("Google Chrome", "The installed Chrome channel passed the core planning journey, task interaction, overflow check and evidence capture."),
+        ("Mozilla Firefox", "Firefox passed the same functional and overflow checks; its seeded dashboard was captured for direct comparison."),
+        ("Microsoft Edge", "The Windows/manual session remains pending because Edge is not installed on this Linux host. The checklist requires the stable version page, app, Console and Local Storage captures."),
+    ])
+    add_section(doc, "Outcome", [(None, "Chrome and Firefox provide completed, matching automated evidence with no application console errors. Edge is not claimed complete: the document becomes assessor-ready only after the genuine Edge session is logged and its appendix screenshots are added.")])
+    add_section(doc, "Lessons learned", [
+        ("Name browsers precisely", "A Chromium engine run helps compatibility, but it is not evidence of the branded Chrome or Edge products. Launching the installed Chrome channel strengthened the result."),
+        ("Use tools to explain differences", "Computed styles, console messages and stored data are more diagnostic than screenshots alone; together they show whether a problem is layout, runtime or persistence."),
+        ("Prefer progressive enhancement", "Feature detection and narrow fallbacks are safer than broad polyfills. Add a prefix/polyfill only for a reproduced support gap and retain a regression test."),
+    ])
+    add_callout(doc, "Backwards-compatibility response", "Confirm the support baseline, reproduce in the affected browser, prefer standards and feature detection, add Autoprefixer or a narrowly scoped fallback/polyfill only when needed, then rerun the full scenario.", "EEF0FF")
+    add_appendix_page(doc, "BR-01", "Google Chrome seeded dashboard", "browser-chrome-dashboard.png")
+    add_appendix_page(doc, "BR-02", "Mozilla Firefox seeded dashboard", "browser-firefox-dashboard.png")
+    return doc
+
+
+def main():
+    OUT.mkdir(parents=True, exist_ok=True)
+    builds = {
+        "01-personal-project-management.docx": build_project_management(),
+        "02-multiple-device-testing.docx": build_devices(),
+        "03-multiple-browser-testing.docx": build_browsers(),
+    }
+    for name, doc in builds.items():
+        doc.save(OUT / name)
+
+
+if __name__ == "__main__":
+    main()
--- a/scripts/build_evidence_pdfs.py
+++ b/scripts/build_evidence_pdfs.py
@@ -0,0 +1,147 @@
+from __future__ import annotations
+
+from pathlib import Path
+from xml.sax.saxutils import escape
+
+from docx import Document
+from docx.oxml.ns import qn
+from reportlab.lib import colors
+from reportlab.lib.enums import TA_CENTER
+from reportlab.lib.pagesizes import LETTER
+from reportlab.lib.styles import ParagraphStyle, getSampleStyleSheet
+from reportlab.lib.units import inch
+from reportlab.platypus import Image, PageBreak, Paragraph, SimpleDocTemplate, Spacer, Table, TableStyle
+
+ROOT = Path(__file__).resolve().parents[1]
+DOCS = ROOT / "evidence-documents"
+ASSETS = ROOT / "work" / "pdf-assets"
+
+
+def footer(canvas, doc):
+    canvas.saveState()
+    canvas.setFont("Helvetica-Bold", 7.5)
+    canvas.setFillColor(colors.HexColor("#6F6D82"))
+    canvas.drawString(0.8 * inch, 10.55 * inch, "ENGINEERING COMPETENCY  ·  LEARNING PLANNER")
+    canvas.setFont("Helvetica", 8)
+    canvas.drawRightString(7.7 * inch, 0.42 * inch, f"Learning Planner · Competency evidence · {doc.page}")
+    canvas.restoreState()
+
+
+def styles():
+    base = getSampleStyleSheet()
+    return {
+        "body": ParagraphStyle("Body", parent=base["BodyText"], fontName="Helvetica", fontSize=9.7, leading=12.3, textColor=colors.HexColor("#212037"), spaceAfter=5),
+        "h2": ParagraphStyle("H2", parent=base["Heading2"], fontName="Helvetica-Bold", fontSize=12.2, leading=14, textColor=colors.HexColor("#2E74B5"), spaceBefore=8, spaceAfter=5, keepWithNext=True),
+        "title": ParagraphStyle("Title", parent=base["Title"], fontName="Helvetica-Bold", fontSize=22, leading=24, textColor=colors.HexColor("#212037"), alignment=0, spaceAfter=4),
+        "appendix_title": ParagraphStyle("AppendixTitle", parent=base["Heading1"], fontName="Helvetica-Bold", fontSize=15, leading=18, textColor=colors.HexColor("#212037"), spaceAfter=6),
+        "subtitle": ParagraphStyle("Subtitle", parent=base["BodyText"], fontName="Helvetica", fontSize=11.2, leading=14, textColor=colors.HexColor("#6F6D82"), spaceAfter=10),
+        "kicker": ParagraphStyle("Kicker", parent=base["BodyText"], fontName="Helvetica-Bold", fontSize=8.3, leading=10, textColor=colors.HexColor("#6257D9"), spaceAfter=2),
+        "caption": ParagraphStyle("Caption", parent=base["BodyText"], fontName="Helvetica-Oblique", fontSize=8.5, leading=11, textColor=colors.HexColor("#6F6D82"), alignment=TA_CENTER, spaceBefore=4),
+    }
+
+
+def rich_text(paragraph) -> str:
+    chunks = []
+    for run in paragraph.runs:
+        text = escape(run.text)
+        if not text:
+            continue
+        if run.bold:
+            text = f"<b>{text}</b>"
+        if run.italic:
+            text = f"<i>{text}</i>"
+        chunks.append(text)
+    return "".join(chunks) or escape(paragraph.text)
+
+
+def has_page_break(paragraph) -> bool:
+    return bool(paragraph._p.xpath('.//w:br[@w:type="page"]'))
+
+
+def paragraph_image(paragraph, document, asset_dir: Path):
+    blips = paragraph._p.xpath(".//a:blip")
+    if not blips:
+        return None
+    rid = blips[0].get(qn("r:embed"))
+    part = document.part.related_parts[rid]
+    extension = Path(part.partname).suffix or ".png"
+    path = asset_dir / f"image-{len(list(asset_dir.glob('image-*'))) + 1}{extension}"
+    path.write_bytes(part.blob)
+    image = Image(str(path))
+    max_width, max_height = 6.25 * inch, 7.55 * inch
+    scale = min(max_width / image.imageWidth, max_height / image.imageHeight)
+    image.drawWidth = image.imageWidth * scale
+    image.drawHeight = image.imageHeight * scale
+    image.hAlign = "CENTER"
+    return image
+
+
+def convert(docx_path: Path):
+    document = Document(docx_path)
+    asset_dir = ASSETS / docx_path.stem
+    asset_dir.mkdir(parents=True, exist_ok=True)
+    pdf_path = docx_path.with_suffix(".pdf")
+    story = []
+    style = styles()
+
+    for paragraph in document.paragraphs:
+        if has_page_break(paragraph):
+            story.append(PageBreak())
+            continue
+
+        image = paragraph_image(paragraph, document, asset_dir)
+        if image is not None:
+            story.append(Spacer(1, 3))
+            story.append(image)
+            continue
+
+        text = paragraph.text.strip()
+        if not text:
+            story.append(Spacer(1, 3))
+            continue
+
+        first_size = next((run.font.size.pt for run in paragraph.runs if run.font.size), None)
+        if paragraph.style.name == "Heading 2":
+            story.append(Paragraph(rich_text(paragraph), style["h2"]))
+        elif first_size and first_size >= 20:
+            story.append(Paragraph(rich_text(paragraph), style["title"]))
+        elif text.startswith("SCREENSHOT APPENDIX"):
+            story.append(Paragraph(escape(text), style["kicker"]))
+        elif first_size and first_size >= 14:
+            story.append(Paragraph(rich_text(paragraph), style["appendix_title"]))
+        elif text == "COMPETENCY EVIDENCE BRIEF":
+            story.append(Paragraph(escape(text), style["kicker"]))
+        elif first_size and first_size >= 11:
+            story.append(Paragraph(rich_text(paragraph), style["subtitle"]))
+        elif text.startswith("Figure "):
+            story.append(Paragraph(escape(text), style["caption"]))
+        elif paragraph._p.xpath(".//w:shd"):
+            box = Table([[Paragraph(rich_text(paragraph), style["body"])]], colWidths=[6.2 * inch])
+            box.setStyle(TableStyle([
+                ("BACKGROUND", (0, 0), (-1, -1), colors.HexColor("#F2F4F7")),
+                ("BOX", (0, 0), (-1, -1), 0.5, colors.HexColor("#D9DCE4")),
+                ("LEFTPADDING", (0, 0), (-1, -1), 10),
+                ("RIGHTPADDING", (0, 0), (-1, -1), 10),
+                ("TOPPADDING", (0, 0), (-1, -1), 7),
+                ("BOTTOMPADDING", (0, 0), (-1, -1), 4),
+            ]))
+            story.extend([Spacer(1, 3), box, Spacer(1, 5)])
+        else:
+            story.append(Paragraph(rich_text(paragraph), style["body"]))
+
+    pdf = SimpleDocTemplate(
+        str(pdf_path), pagesize=LETTER, rightMargin=0.8 * inch, leftMargin=0.8 * inch,
+        topMargin=0.72 * inch, bottomMargin=0.65 * inch, title=document.core_properties.title,
+        author="Learning Planner project", subject=document.core_properties.subject,
+    )
+    pdf.build(story, onFirstPage=footer, onLaterPages=footer)
+
+
+def main():
+    ASSETS.mkdir(parents=True, exist_ok=True)
+    for path in sorted(DOCS.glob("0*-*.docx")):
+        convert(path)
+
+
+if __name__ == "__main__":
+    main()
--- a/src/App.css
+++ b/src/App.css
@@ -0,0 +1,33 @@
+.app-shell { min-height: 100vh; display: grid; grid-template-columns: 260px minmax(0, 1fr); }
+.sidebar { position: sticky; top: 0; height: 100vh; padding: 30px 20px 20px; background: #24213d; color: #fff; display: flex; flex-direction: column; z-index: 10; }
+.brand { display: flex; gap: 12px; align-items: center; padding: 0 10px 34px; font-family: Manrope, sans-serif; }
+.brand-mark { width: 42px; height: 42px; border-radius: 14px; background: linear-gradient(135deg,#746aef,#a29bf6); display: grid; place-items: center; box-shadow: 0 8px 22px #100d2780; }
+.brand strong,.brand small { display: block; line-height: 1.05; }.brand strong { font-size: 18px; }.brand small { font-size: 14px; color: #aaa6c5; margin-top: 4px; letter-spacing: .02em; }
+.nav-label { margin: 0 12px 10px; color: #8f8ba8; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; }
+.nav-item,.data-button { width: 100%; border: 0; background: transparent; color: #bbb8d0; border-radius: 12px; min-height: 48px; display: flex; gap: 13px; align-items: center; padding: 0 13px; font-weight: 600; text-align: left; transition: .18s ease; }
+.nav-item:hover,.data-button:hover { background: #ffffff10; color: #fff; }.nav-item.active { background: #6b61e4; color: #fff; box-shadow: 0 8px 24px #13102975; }
+.nav-count { margin-left: auto; min-width: 24px; height: 24px; padding: 0 7px; display: grid; place-items: center; border-radius: 20px; background: #ffffff1e; font-size: 12px; }
+.sidebar-card { margin-top: auto; padding: 18px; border-radius: 16px; background: linear-gradient(145deg,#302d50,#2a2748); border: 1px solid #ffffff0e; }
+.mini-icon { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; margin-bottom: 12px; background: #6b61e4; }.sidebar-card strong { font-size: 14px; }.sidebar-card p { color: #aaa7bf; font-size: 12px; line-height: 1.55; margin: 8px 0 0; }
+.data-button { margin-top: 16px; font-size: 13px; }.version { text-align: center; color: #77738f; font-size: 10px; margin: 13px 0 0; }
+.main-content { min-width: 0; padding: 46px clamp(34px,4vw,76px) 68px; max-width: 1780px; width: 100%; margin: 0 auto; }
+.topbar { display: flex; justify-content: space-between; gap: 34px; align-items: flex-end; margin-bottom: 34px; }.topbar h1 { margin: 5px 0 6px; font-family: Manrope,sans-serif; font-size: clamp(27px,2.1vw,38px); line-height: 1.16; letter-spacing: -.035em; }.subtitle { margin: 0; color: var(--muted); font-size: 15px; }.eyebrow { color: var(--primary); font-size: 11px; letter-spacing: .13em; text-transform: uppercase; font-weight: 800; margin: 0; }
+.primary-button,.secondary-button,.danger-button { border: 0; border-radius: 11px; min-height: 43px; padding: 0 18px; display: inline-flex; gap: 9px; justify-content: center; align-items: center; font-weight: 700; font-size: 13px; }
+.primary-button { background: var(--primary); color: #fff; box-shadow: 0 8px 18px #6257d92c; }.primary-button:hover { background: var(--primary-dark); }.secondary-button { background: #fff; border: 1px solid var(--line); }.secondary-button:hover { background: #f7f6fb; }.danger-button { color: #fff; background: var(--danger); }.top-action { min-height: 48px; padding: 0 20px; flex-shrink: 0; }
+.notice { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: -12px 0 22px; padding: 12px 16px; background: #e9f8f3; color: #08735e; border: 1px solid #caeee3; border-radius: 12px; font-size: 13px; }.notice.error { background: #fff0f0; color: #a7353d; border-color: #f1c7ca; }.notice button { background: none; border: 0; display: grid; place-items: center; padding: 3px; }
+.stat-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; margin-bottom: 22px; }.stat-card { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 22px; display: flex; gap: 17px; align-items: center; min-width: 0; box-shadow: 0 7px 28px #28234d08; }.stat-icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; flex: 0 0 auto; }.stat-card.purple .stat-icon { color:#6257d9;background:#efedff}.stat-card.orange .stat-icon {color:#c45a28;background:#fff0e8}.stat-card.green .stat-icon {color:#0b8f74;background:#e6f7f2}.stat-card.blue .stat-icon {color:#3973c7;background:#e9f1fd}.stat-card p { margin: 0; color: var(--muted); font-size: 12px; font-weight: 600; }.stat-card strong { display: block; font-family: Manrope,sans-serif; font-size: 27px; line-height: 1.1; margin: 2px 0; }.stat-card small { color: #9996a7; white-space: nowrap; }
+.dashboard-grid { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(360px,.8fr); gap: 22px; }.panel { background: #fff; border: 1px solid var(--line); border-radius: 17px; padding: 24px; box-shadow: 0 7px 28px #28234d08; }.panel-heading,.section-heading { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 20px; }.panel h2,.section-heading h2 { font-family: Manrope,sans-serif; font-size: 19px; letter-spacing: -.02em; margin: 4px 0 0; }.text-button { display: inline-flex; align-items: center; gap: 3px; border: 0; color: var(--primary); background: transparent; padding: 5px 0; font-size: 12px; font-weight: 700; }
+.goal-overview { display: grid; gap: 6px; }.overview-row { width: 100%; display: flex; align-items: center; gap: 13px; border: 0; background: transparent; border-radius: 11px; padding: 12px 9px; text-align: left; }.overview-row:hover { background: #f8f8fc; }.goal-color { width: 9px; height: 42px; border-radius: 20px; flex-shrink: 0; }.overview-copy { flex: 1; min-width: 0; }.overview-copy strong,.overview-copy small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }.overview-copy strong { font-size: 13px; }.overview-copy small { color: var(--muted); font-size: 11px; margin: 3px 0 8px; }.bar { height: 5px; display: block; border-radius: 8px; background: #eeedf3; overflow: hidden; }.bar span { display:block;height:100%;border-radius:inherit; }.percent { font-size: 12px; font-weight: 700; color: var(--muted); width: 32px; text-align: right; }
+.upcoming-list { display: grid; }.upcoming-item { display: grid; grid-template-columns: 28px minmax(0,1fr) auto; align-items: center; gap: 10px; padding: 12px 0; border-top: 1px solid #efeff4; }.upcoming-item:first-child { border-top: 0; padding-top: 4px; }.check-button { border: 1px solid #cbc9d6; background: #fff; border-radius: 8px; width: 25px; height: 25px; display: grid; place-items: center; color: transparent; }.check-button:hover { border-color: var(--primary); }.check-button.checked { color: #fff; background: var(--green); border-color: var(--green); }.upcoming-copy { min-width:0; border:0;background:none;text-align:left;padding:0; }.upcoming-copy strong,.upcoming-copy span { display:block; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }.upcoming-copy strong { font-size:12px; }.upcoming-copy span { color:var(--muted);font-size:10px;margin-top:4px; }.priority-dot { display:inline-block;width:6px;height:6px;border-radius:50%;margin-right:5px;background:#aaa}.priority-dot.high{background:#d65058}.priority-dot.medium{background:#db8a35}.priority-dot.low{background:#4a9b7c}.upcoming-item time { color:var(--muted);font-size:10px; }
+.focus-banner { margin-top: 22px; padding: 22px 24px; display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 18px; border-radius: 17px; color: #fff; background: linear-gradient(105deg,#3a355e,#514a88); box-shadow: 0 12px 32px #24213d20; }.focus-icon { width: 48px;height:48px;display:grid;place-items:center;border-radius:14px;background:#ffffff16; }.focus-banner .eyebrow { color:#c5c0ff; }.focus-banner h2 { font-family:Manrope,sans-serif;font-size:17px;margin:4px 0; }.focus-banner p:last-child { color:#bbb7d1;font-size:12px;margin:0; }.focus-banner .secondary-button { background:#fff;color:#34304f;border:0; }
+.toolbar { display:flex;align-items:center;gap:13px;margin-bottom:24px; }.search-field { position:relative;flex:1;max-width:460px; }.search-field .icon { position:absolute;left:14px;top:50%;transform:translateY(-50%);color:#9794a6; }.search-field input,.field input,.field select,.field textarea,.toolbar select { width:100%;border:1px solid #dedde7;background:#fff;border-radius:11px;min-height:44px;padding:0 13px;color:var(--ink); }.search-field input { padding-left:43px; }.result-count { color:var(--muted);font-size:12px; }.task-toolbar { padding:14px;background:#fff;border:1px solid var(--line);border-radius:15px; }.task-toolbar label { display:flex;align-items:center;gap:7px;color:var(--muted);font-size:12px;white-space:nowrap; }.task-toolbar select { min-height:38px; }.section-heading p { color:var(--muted);font-size:12px;margin:4px 0 0; }
+.goal-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px; }.goal-card { min-width:0;background:#fff;border:1px solid var(--line);border-radius:17px;padding:22px;box-shadow:0 7px 28px #28234d08;display:flex;flex-direction:column; }.goal-card-top { display:flex;justify-content:space-between;align-items:center; }.category,.priority-pill,.status-pill { display:inline-flex;align-items:center;border-radius:20px;padding:5px 9px;font-size:10px;text-transform:uppercase;letter-spacing:.06em;font-weight:800; }.card-actions { display:flex;gap:4px; }.card-actions button { border:0;background:transparent;color:#8b899a;width:32px;height:32px;display:grid;place-items:center;border-radius:8px; }.card-actions button:hover { background:#f1f0f7;color:var(--ink); }.goal-card h3 { font-family:Manrope,sans-serif;font-size:17px;line-height:1.35;margin:18px 0 8px;overflow-wrap:anywhere; }.goal-card>p { color:var(--muted);font-size:12px;line-height:1.55;margin:0;min-height:57px; }.goal-card-progress { display:flex;align-items:center;gap:14px;margin:20px 0; }.progress-ring { position:relative;width:60px;height:60px;flex:none; }.progress-ring svg { width:60px;transform:rotate(-90deg); }.progress-ring circle { fill:none;stroke-width:6; }.ring-track { stroke:#edecf3; }.ring-value { transition:stroke-dashoffset .3s;stroke-linecap:round; }.progress-ring>strong { position:absolute;inset:0;display:grid;place-items:center;font-size:11px; }.goal-card-progress>div strong,.goal-card-progress>div span { display:block; }.goal-card-progress>div strong { font-size:13px; }.goal-card-progress>div span { color:var(--muted);font-size:11px;margin-top:2px; }.goal-card-footer { border-top:1px solid #efeff4;padding-top:15px;margin-top:auto;display:flex;justify-content:space-between;gap:8px;align-items:center; }.goal-card-footer span,.goal-card-footer button { display:flex;align-items:center;gap:5px;font-size:10px; }.goal-card-footer span { color:var(--muted); }.goal-card-footer button { color:var(--primary);font-weight:700;border:0;background:none;padding:5px 0; }
+.task-list { display:grid;gap:11px; }.task-row { display:grid;grid-template-columns:auto minmax(250px,1fr) minmax(180px,.35fr) auto;gap:16px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:14px;padding:17px 18px;box-shadow:0 5px 20px #28234d06; }.task-row.complete h3 { text-decoration:line-through;color:#777486; }.task-main>div { display:flex;gap:6px; }.priority-pill.high{color:#b93842;background:#fff0f1}.priority-pill.medium{color:#ae641f;background:#fff5e8}.priority-pill.low{color:#14745d;background:#eaf8f4}.status-pill.todo{color:#6d697d;background:#f0eff5}.status-pill.in-progress{color:#4c43b8;background:#efedff}.status-pill.done{color:#08735e;background:#e7f7f2}.task-main h3 { font-family:Manrope,sans-serif;font-size:14px;margin:8px 0 3px;overflow-wrap:anywhere; }.task-main p { color:var(--muted);font-size:11px;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }.task-meta strong,.task-meta span { display:flex;align-items:center;gap:5px; }.task-meta strong { font-size:11px;margin-bottom:5px; }.task-meta span { color:var(--muted);font-size:10px;margin-top:3px; }
+.empty-state { min-height:360px;border:1px dashed #d7d5e2;border-radius:18px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:40px;background:#fafafe; }.empty-state>span { width:58px;height:58px;display:grid;place-items:center;border-radius:18px;background:#eeecff;color:var(--primary); }.empty-state h2 { font-family:Manrope,sans-serif;font-size:19px;margin:17px 0 5px; }.empty-state p { max-width:370px;color:var(--muted);font-size:13px;line-height:1.5;margin:0 0 17px; }
+.modal-backdrop { position:fixed;inset:0;background:#171429a8;backdrop-filter:blur(4px);display:grid;place-items:center;padding:24px;z-index:50; }.modal { width:min(620px,100%);max-height:calc(100vh - 48px);overflow:auto;background:#fff;border-radius:20px;padding:27px;box-shadow:0 28px 80px #0d0a1c70; }.modal-heading { display:flex;justify-content:space-between;gap:20px;margin-bottom:22px; }.modal-heading h2 { font-family:Manrope,sans-serif;font-size:22px;margin:4px 0; }.modal-heading p:last-child { color:var(--muted);font-size:12px;margin:0; }.close-button { border:0;background:#f1f0f6;border-radius:10px;width:38px;height:38px;display:grid;place-items:center;flex:none; }.form-grid { display:grid;grid-template-columns:1fr 1fr;gap:15px; }.form-grid.three { grid-template-columns:1.15fr .85fr 1fr; }.field { display:flex;flex-direction:column;gap:6px;font-size:11px;font-weight:700;color:#555267;margin-bottom:15px; }.field input,.field select { height:44px; }.field textarea { padding:11px 13px;resize:vertical; }.field input::placeholder,.field textarea::placeholder { color:#aaa7b5; }.field [aria-invalid="true"] { border-color:#cf565e;background:#fffafa; }.field-error,.import-error { color:#b63d46;font-size:10px;font-weight:600; }.color-field { border:0;padding:0;margin:0 0 17px; }.color-field legend { color:#555267;font-size:11px;font-weight:700;margin-bottom:8px; }.color-field label { display:inline-block;width:27px;height:27px;border-radius:50%;margin-right:9px;border:3px solid #fff;box-shadow:0 0 0 1px #d7d5df;cursor:pointer; }.color-field label:has(input:checked) { box-shadow:0 0 0 3px #c6c1f6; }.color-field input { opacity:0;width:1px;height:1px; }.modal-actions { display:flex;justify-content:flex-end;gap:10px;border-top:1px solid #efeff4;padding-top:18px;margin-top:4px; }.confirm-copy { color:var(--muted);font-size:13px;line-height:1.55;background:#faf9fc;border-radius:12px;padding:17px; }.data-options { display:grid;gap:9px; }.data-options>button { border:1px solid var(--line);background:#fff;border-radius:13px;display:grid;grid-template-columns:auto 1fr auto;gap:13px;align-items:center;text-align:left;padding:14px; }.data-options>button:hover { background:#faf9fe;border-color:#cdc9ed; }.option-icon { width:38px;height:38px;display:grid;place-items:center;border-radius:11px;color:var(--primary);background:#efedff; }.data-options strong,.data-options small { display:block; }.data-options strong { font-size:12px; }.data-options small { color:var(--muted);font-size:10px;margin-top:4px; }.import-error { background:#fff0f1;border-radius:10px;padding:10px 12px; }
+
+@media (min-width:1800px) { .stat-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }.goal-grid { grid-template-columns:repeat(4,minmax(0,1fr)); } }
+@media (max-width:1220px) { .stat-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.dashboard-grid { grid-template-columns:1fr; }.goal-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.task-row { grid-template-columns:auto minmax(0,1fr) auto; }.task-meta { grid-column:2;display:flex;gap:15px;align-items:center; }.task-meta strong { margin:0; } }
+@media (max-width:800px) { .app-shell { display:block; }.sidebar { position:relative;height:auto;padding:16px;display:block; }.brand { padding:0 4px 16px; }.sidebar nav { display:flex;gap:6px;overflow-x:auto; }.nav-label,.sidebar-card,.data-button,.version { display:none; }.nav-item { width:auto;min-width:max-content; }.nav-count { display:none; }.main-content { padding:26px 18px 45px; }.topbar { align-items:flex-start; }.topbar h1 { font-size:25px; }.top-action { padding:0;width:46px;font-size:0; }.stat-grid,.goal-grid { grid-template-columns:1fr; }.focus-banner { grid-template-columns:auto 1fr; }.focus-banner .secondary-button { grid-column:1/-1; }.task-toolbar { align-items:stretch;flex-direction:column; }.search-field { max-width:none; }.task-row { grid-template-columns:auto minmax(0,1fr) auto; }.task-meta { grid-column:2;flex-wrap:wrap; }.form-grid,.form-grid.three { grid-template-columns:1fr;gap:0; } }
+@media (max-width:500px) { .topbar { display:grid;grid-template-columns:1fr auto; }.subtitle { grid-column:1/-1; }.panel { padding:18px; }.stat-card { padding:17px; }.focus-icon { display:none; }.focus-banner { grid-template-columns:1fr; }.task-row { padding:14px; }.task-row>.card-actions { grid-column:2;justify-content:flex-end; }.goal-card-footer { align-items:flex-start;flex-direction:column; }.modal { padding:21px; }.modal-actions>* { flex:1; } }
+@media (prefers-reduced-motion: reduce) { *,*::before,*::after { scroll-behavior:auto!important;transition:none!important;animation:none!important; } }
--- a/src/App.test.tsx
+++ b/src/App.test.tsx
@@ -0,0 +1,36 @@
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { describe, expect, it } from 'vitest'
+import App from './App'
+
+describe('Learning Planner', () => {
+  it('renders a useful seeded dashboard', () => {
+    render(<App />)
+    expect(screen.getByRole('heading', { name: /good progress starts/i })).toBeInTheDocument()
+    expect(screen.getAllByText('Master practical TypeScript patterns').length).toBeGreaterThan(0)
+    expect(screen.getByText('Due this week')).toBeInTheDocument()
+  })
+
+  it('validates and creates a goal', async () => {
+    const user = userEvent.setup()
+    render(<App />)
+    await user.click(screen.getByRole('button', { name: 'Learning goals' }))
+    await user.click(screen.getByRole('button', { name: 'New goal' }))
+    await user.click(screen.getByRole('button', { name: 'Save goal' }))
+    expect(screen.getByText('Enter a goal title.')).toBeInTheDocument()
+    await user.type(screen.getByLabelText(/Goal title/), 'Learn browser APIs')
+    await user.type(screen.getByLabelText(/Category/), 'Web platform')
+    await user.type(screen.getByLabelText(/Target date/), '2026-12-01')
+    await user.click(screen.getByRole('button', { name: 'Save goal' }))
+    expect(screen.getByRole('heading', { name: 'Learn browser APIs' })).toBeInTheDocument()
+  })
+
+  it('filters the task library', async () => {
+    const user = userEvent.setup()
+    render(<App />)
+    await user.click(screen.getByRole('button', { name: 'All tasks' }))
+    await user.type(screen.getByLabelText('Search tasks'), 'Firefox')
+    expect(screen.getByRole('heading', { name: 'Run Firefox regression suite' })).toBeInTheDocument()
+    expect(screen.queryByRole('heading', { name: 'Add safe import validation' })).not.toBeInTheDocument()
+  })
+})
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -0,0 +1,235 @@
+import { useEffect, useMemo, useRef, useState } from 'react'
+import './App.css'
+import { Icon, ProgressRing } from './components'
+import { createId, dashboardStats, formatDate, goalForTask, goalProgress, sortedUpcoming } from './domain'
+import { createSampleData } from './sampleData'
+import { storageAdapter } from './storage'
+import type { AppStateV1, AppView, LearningGoal, LearningTask, Priority, TaskStatus } from './types'
+
+type ModalState =
+  | { type: 'goal'; item?: LearningGoal }
+  | { type: 'task'; item?: LearningTask }
+  | { type: 'delete-goal'; item: LearningGoal }
+  | { type: 'delete-task'; item: LearningTask }
+  | { type: 'data' }
+  | null
+
+const navItems: { id: AppView; label: string; icon: string }[] = [
+  { id: 'dashboard', label: 'Dashboard', icon: 'dashboard' },
+  { id: 'goals', label: 'Learning goals', icon: 'goal' },
+  { id: 'tasks', label: 'All tasks', icon: 'task' },
+]
+
+const emptyGoal = (): LearningGoal => ({
+  id: createId(), title: '', description: '', category: '', targetDate: '', color: '#6257d9', createdAt: new Date().toISOString(),
+})
+const emptyTask = (goalId = ''): LearningTask => ({
+  id: createId(), goalId, title: '', notes: '', dueDate: '', priority: 'medium', status: 'todo', estimatedMinutes: 30, createdAt: new Date().toISOString(),
+})
+
+function App() {
+  const initial = useMemo(() => storageAdapter.load(), [])
+  const [state, setState] = useState<AppStateV1>(initial.state)
+  const [view, setView] = useState<AppView>('dashboard')
+  const [modal, setModal] = useState<ModalState>(null)
+  const [query, setQuery] = useState('')
+  const [statusFilter, setStatusFilter] = useState<TaskStatus | 'all'>('all')
+  const [sort, setSort] = useState<'due' | 'priority' | 'title'>('due')
+  const [notice, setNotice] = useState(initial.warning ?? '')
+  const [saveError, setSaveError] = useState('')
+
+  useEffect(() => {
+    try {
+      storageAdapter.save(state)
+      setSaveError('')
+    } catch {
+      setSaveError('Changes are visible, but this browser could not save them. Export a backup before closing.')
+    }
+  }, [state])
+
+  const stats = dashboardStats(state)
+  const upcoming = sortedUpcoming(state.tasks).slice(0, 5)
+  const filteredGoals = state.goals.filter((goal) => `${goal.title} ${goal.description} ${goal.category}`.toLowerCase().includes(query.toLowerCase()))
+  const priorityOrder: Record<Priority, number> = { high: 0, medium: 1, low: 2 }
+  const filteredTasks = [...state.tasks]
+    .filter((task) => statusFilter === 'all' || task.status === statusFilter)
+    .filter((task) => `${task.title} ${task.notes} ${goalForTask(task, state.goals)?.title ?? ''}`.toLowerCase().includes(query.toLowerCase()))
+    .sort((a, b) => sort === 'priority' ? priorityOrder[a.priority] - priorityOrder[b.priority] : sort === 'title' ? a.title.localeCompare(b.title) : (a.dueDate || '9999').localeCompare(b.dueDate || '9999'))
+
+  function saveGoal(goal: LearningGoal) {
+    setState((current) => ({ ...current, goals: current.goals.some((item) => item.id === goal.id) ? current.goals.map((item) => item.id === goal.id ? goal : item) : [...current.goals, goal] }))
+    setModal(null)
+    setNotice(`Goal “${goal.title}” saved.`)
+  }
+
+  function saveTask(task: LearningTask) {
+    setState((current) => ({ ...current, tasks: current.tasks.some((item) => item.id === task.id) ? current.tasks.map((item) => item.id === task.id ? task : item) : [...current.tasks, task] }))
+    setModal(null)
+    setNotice(`Task “${task.title}” saved.`)
+  }
+
+  function updateTaskStatus(id: string, status: TaskStatus) {
+    setState((current) => ({ ...current, tasks: current.tasks.map((task) => task.id === id ? { ...task, status } : task) }))
+  }
+
+  function deleteItem() {
+    if (modal?.type === 'delete-goal') {
+      const id = modal.item.id
+      setState((current) => ({ ...current, goals: current.goals.filter((goal) => goal.id !== id), tasks: current.tasks.filter((task) => task.goalId !== id) }))
+      setNotice(`Goal “${modal.item.title}” and its tasks were deleted.`)
+    }
+    if (modal?.type === 'delete-task') {
+      setState((current) => ({ ...current, tasks: current.tasks.filter((task) => task.id !== modal.item.id) }))
+      setNotice(`Task “${modal.item.title}” was deleted.`)
+    }
+    setModal(null)
+  }
+
+  function selectView(next: AppView) {
+    setView(next)
+    setQuery('')
+  }
+
+  return (
+    <div className="app-shell">
+      <aside className="sidebar" aria-label="Primary navigation">
+        <div className="brand">
+          <span className="brand-mark"><Icon name="spark" size={22} /></span>
+          <span><strong>Learning</strong><small>Planner</small></span>
+        </div>
+        <nav>
+          <p className="nav-label">Workspace</p>
+          {navItems.map((item) => (
+            <button className={view === item.id ? 'nav-item active' : 'nav-item'} key={item.id} onClick={() => selectView(item.id)} aria-current={view === item.id ? 'page' : undefined}>
+              <Icon name={item.icon} /> <span>{item.label}</span>
+              {item.id === 'tasks' && <span className="nav-count">{state.tasks.filter((task) => task.status !== 'done').length}</span>}
+            </button>
+          ))}
+        </nav>
+        <div className="sidebar-card">
+          <span className="mini-icon"><Icon name="spark" size={18} /></span>
+          <strong>Keep the momentum</strong>
+          <p>{stats.completed} tasks completed. Small, consistent steps add up.</p>
+        </div>
+        <button className="data-button" onClick={() => setModal({ type: 'data' })}><Icon name="download" /> Data &amp; backup</button>
+        <p className="version">Local-first · Version 1.0</p>
+      </aside>
+
+      <main className="main-content">
+        <header className="topbar">
+          <div>
+            <p className="eyebrow">My learning workspace</p>
+            <h1>{view === 'dashboard' ? 'Good progress starts with a clear plan.' : view === 'goals' ? 'Learning goals' : 'Task library'}</h1>
+            <p className="subtitle">{view === 'dashboard' ? 'See what matters today and keep every goal moving.' : view === 'goals' ? 'Define meaningful outcomes and watch the work add up.' : 'Search, prioritise and complete the next useful step.'}</p>
+          </div>
+          <button className="primary-button top-action" onClick={() => setModal(view === 'goals' ? { type: 'goal' } : { type: 'task' })} disabled={view !== 'goals' && !state.goals.length}>
+            <Icon name="plus" /> {view === 'goals' ? 'New goal' : 'Add task'}
+          </button>
+        </header>
+
+        {(notice || saveError) && <div className={saveError ? 'notice error' : 'notice'} role="status"><span>{saveError || notice}</span><button aria-label="Dismiss message" onClick={() => { setNotice(''); setSaveError('') }}><Icon name="close" size={17} /></button></div>}
+
+        {view === 'dashboard' && <Dashboard state={state} stats={stats} upcoming={upcoming} onView={selectView} onEditTask={(task) => setModal({ type: 'task', item: task })} onStatus={updateTaskStatus} />}
+
+        {view === 'goals' && (
+          <section aria-labelledby="goals-heading">
+            <div className="toolbar">
+              <div className="search-field"><Icon name="search" /><input aria-label="Search goals" placeholder="Search goals or categories…" value={query} onChange={(event) => setQuery(event.target.value)} /></div>
+              <span className="result-count">{filteredGoals.length} {filteredGoals.length === 1 ? 'goal' : 'goals'}</span>
+            </div>
+            <h2 id="goals-heading" className="sr-only">Your learning goals</h2>
+            {filteredGoals.length ? <div className="goal-grid">{filteredGoals.map((goal) => <GoalCard key={goal.id} goal={goal} tasks={state.tasks} onOpen={() => { setView('tasks'); setQuery(goal.title) }} onEdit={() => setModal({ type: 'goal', item: goal })} onDelete={() => setModal({ type: 'delete-goal', item: goal })} />)}</div> : <EmptyState icon="goal" title="No goals found" text={query ? 'Try a different search phrase.' : 'Create a learning goal, then break it into focused tasks.'} action={!query ? () => setModal({ type: 'goal' }) : undefined} />}
+          </section>
+        )}
+
+        {view === 'tasks' && (
+          <section aria-labelledby="tasks-heading">
+            <div className="toolbar task-toolbar">
+              <div className="search-field"><Icon name="search" /><input aria-label="Search tasks" placeholder="Search tasks or goals…" value={query} onChange={(event) => setQuery(event.target.value)} /></div>
+              <label>Show <select value={statusFilter} onChange={(event) => setStatusFilter(event.target.value as TaskStatus | 'all')}><option value="all">All statuses</option><option value="todo">To do</option><option value="in-progress">In progress</option><option value="done">Done</option></select></label>
+              <label>Sort <select value={sort} onChange={(event) => setSort(event.target.value as typeof sort)}><option value="due">Due date</option><option value="priority">Priority</option><option value="title">Title</option></select></label>
+            </div>
+            <div className="section-heading"><div><h2 id="tasks-heading">All tasks</h2><p>{filteredTasks.length} matching tasks across {state.goals.length} goals</p></div></div>
+            {filteredTasks.length ? <div className="task-list">{filteredTasks.map((task) => <TaskRow key={task.id} task={task} goal={goalForTask(task, state.goals)} onStatus={updateTaskStatus} onEdit={() => setModal({ type: 'task', item: task })} onDelete={() => setModal({ type: 'delete-task', item: task })} />)}</div> : <EmptyState icon="task" title="No matching tasks" text="Change the filters or add a new task to one of your goals." action={state.goals.length ? () => setModal({ type: 'task' }) : undefined} />}
+          </section>
+        )}
+      </main>
+
+      {modal?.type === 'goal' && <GoalModal initial={modal.item ?? emptyGoal()} onClose={() => setModal(null)} onSave={saveGoal} />}
+      {modal?.type === 'task' && <TaskModal initial={modal.item ?? emptyTask(state.goals[0]?.id)} goals={state.goals} onClose={() => setModal(null)} onSave={saveTask} />}
+      {(modal?.type === 'delete-goal' || modal?.type === 'delete-task') && <ConfirmModal title={`Delete ${modal.type === 'delete-goal' ? 'goal' : 'task'}?`} text={modal.type === 'delete-goal' ? `“${modal.item.title}” and all of its tasks will be permanently removed from this browser.` : `“${modal.item.title}” will be permanently removed from this browser.`} onClose={() => setModal(null)} onConfirm={deleteItem} />}
+      {modal?.type === 'data' && <DataModal state={state} onClose={() => setModal(null)} onRestore={(next, message) => { setState(next); setNotice(message); setModal(null) }} />}
+    </div>
+  )
+}
+
+function Dashboard({ state, stats, upcoming, onView, onEditTask, onStatus }: { state: AppStateV1; stats: ReturnType<typeof dashboardStats>; upcoming: LearningTask[]; onView: (view: AppView) => void; onEditTask: (task: LearningTask) => void; onStatus: (id: string, status: TaskStatus) => void }) {
+  const cards = [
+    { label: 'Active goals', value: stats.goals, detail: 'Across your learning plan', icon: 'goal', tone: 'purple' },
+    { label: 'In progress', value: stats.active, detail: 'Tasks moving forward', icon: 'clock', tone: 'orange' },
+    { label: 'Completed', value: stats.completed, detail: 'Tasks finished so far', icon: 'check', tone: 'green' },
+    { label: 'Due this week', value: stats.dueSoon, detail: 'Time-sensitive tasks', icon: 'calendar', tone: 'blue' },
+  ]
+  return (
+    <>
+      <section className="stat-grid" aria-label="Learning summary">{cards.map((card) => <article className={`stat-card ${card.tone}`} key={card.label}><span className="stat-icon"><Icon name={card.icon} /></span><div><p>{card.label}</p><strong>{card.value}</strong><small>{card.detail}</small></div></article>)}</section>
+      <div className="dashboard-grid">
+        <section className="panel" aria-labelledby="goals-overview">
+          <div className="panel-heading"><div><p className="eyebrow">At a glance</p><h2 id="goals-overview">Goal progress</h2></div><button className="text-button" onClick={() => onView('goals')}>View all <Icon name="chevron" size={16} /></button></div>
+          <div className="goal-overview">{state.goals.slice(0, 4).map((goal) => { const progress = goalProgress(goal.id, state.tasks); const goalTasks = state.tasks.filter((task) => task.goalId === goal.id); return <button className="overview-row" key={goal.id} onClick={() => onView('goals')}><span className="goal-color" style={{ background: goal.color }}></span><span className="overview-copy"><strong>{goal.title}</strong><small>{goal.category} · {goalTasks.filter((task) => task.status === 'done').length}/{goalTasks.length} tasks</small><span className="bar"><span style={{ width: `${progress}%`, background: goal.color }}></span></span></span><span className="percent">{progress}%</span></button> })}</div>
+        </section>
+        <section className="panel upcoming-panel" aria-labelledby="upcoming-heading">
+          <div className="panel-heading"><div><p className="eyebrow">Next up</p><h2 id="upcoming-heading">Upcoming tasks</h2></div><button className="text-button" onClick={() => onView('tasks')}>All tasks <Icon name="chevron" size={16} /></button></div>
+          <div className="upcoming-list">{upcoming.map((task) => <div className="upcoming-item" key={task.id}><button className={`check-button ${task.status === 'done' ? 'checked' : ''}`} aria-label={`Mark ${task.title} complete`} onClick={() => onStatus(task.id, task.status === 'done' ? 'todo' : 'done')}><Icon name="check" size={14} /></button><button className="upcoming-copy" onClick={() => onEditTask(task)}><strong>{task.title}</strong><span><i className={`priority-dot ${task.priority}`}></i>{goalForTask(task, state.goals)?.title}</span></button><time dateTime={task.dueDate}>{formatDate(task.dueDate).replace(/ 20\d\d$/, '')}</time></div>)}</div>
+        </section>
+      </div>
+      <section className="focus-banner"><div className="focus-icon"><Icon name="spark" size={24} /></div><div><p className="eyebrow">Weekly focus</p><h2>Protect time for the tasks already in progress.</h2><p>You have planned {Math.round(stats.totalMinutes / 60)} hours of focused learning. Complete one high-priority task before adding more.</p></div><button className="secondary-button" onClick={() => onView('tasks')}>Review priorities</button></section>
+    </>
+  )
+}
+
+function GoalCard({ goal, tasks, onOpen, onEdit, onDelete }: { goal: LearningGoal; tasks: LearningTask[]; onOpen: () => void; onEdit: () => void; onDelete: () => void }) {
+  const progress = goalProgress(goal.id, tasks)
+  const matching = tasks.filter((task) => task.goalId === goal.id)
+  return <article className="goal-card"><div className="goal-card-top"><span className="category" style={{ color: goal.color, background: `${goal.color}15` }}>{goal.category}</span><div className="card-actions"><button aria-label={`Edit ${goal.title}`} onClick={onEdit}><Icon name="edit" size={17} /></button><button aria-label={`Delete ${goal.title}`} onClick={onDelete}><Icon name="trash" size={17} /></button></div></div><h3>{goal.title}</h3><p>{goal.description}</p><div className="goal-card-progress"><ProgressRing value={progress} color={goal.color} /><div><strong>{matching.filter((task) => task.status === 'done').length} of {matching.length}</strong><span>tasks complete</span></div></div><div className="goal-card-footer"><span><Icon name="calendar" size={16} /> Target {formatDate(goal.targetDate)}</span><button onClick={onOpen}>View tasks <Icon name="chevron" size={15} /></button></div></article>
+}
+
+function TaskRow({ task, goal, onStatus, onEdit, onDelete }: { task: LearningTask; goal?: LearningGoal; onStatus: (id: string, status: TaskStatus) => void; onEdit: () => void; onDelete: () => void }) {
+  return <article className={`task-row ${task.status === 'done' ? 'complete' : ''}`}><button className={`check-button ${task.status === 'done' ? 'checked' : ''}`} aria-label={`${task.status === 'done' ? 'Reopen' : 'Complete'} ${task.title}`} onClick={() => onStatus(task.id, task.status === 'done' ? 'todo' : 'done')}><Icon name="check" size={15} /></button><div className="task-main"><div><span className={`priority-pill ${task.priority}`}>{task.priority}</span><span className={`status-pill ${task.status}`}>{task.status.replace('-', ' ')}</span></div><h3>{task.title}</h3><p>{task.notes || 'No notes added.'}</p></div><div className="task-meta"><strong>{goal?.title ?? 'Unknown goal'}</strong><span><Icon name="calendar" size={15} /> {formatDate(task.dueDate)}</span><span><Icon name="clock" size={15} /> {task.estimatedMinutes} min</span></div><div className="card-actions"><button aria-label={`Edit ${task.title}`} onClick={onEdit}><Icon name="edit" size={17} /></button><button aria-label={`Delete ${task.title}`} onClick={onDelete}><Icon name="trash" size={17} /></button></div></article>
+}
+
+function EmptyState({ icon, title, text, action }: { icon: string; title: string; text: string; action?: () => void }) {
+  return <div className="empty-state"><span><Icon name={icon} size={28} /></span><h2>{title}</h2><p>{text}</p>{action && <button className="primary-button" onClick={action}><Icon name="plus" /> Create one</button>}</div>
+}
+
+function ModalFrame({ title, subtitle, onClose, children }: { title: string; subtitle: string; onClose: () => void; children: React.ReactNode }) {
+  return <div className="modal-backdrop" onMouseDown={(event) => { if (event.target === event.currentTarget) onClose() }}><section className="modal" role="dialog" aria-modal="true" aria-labelledby="modal-title"><div className="modal-heading"><div><p className="eyebrow">Learning Planner</p><h2 id="modal-title">{title}</h2><p>{subtitle}</p></div><button className="close-button" aria-label="Close dialog" onClick={onClose}><Icon name="close" /></button></div>{children}</section></div>
+}
+
+function GoalModal({ initial, onClose, onSave }: { initial: LearningGoal; onClose: () => void; onSave: (goal: LearningGoal) => void }) {
+  const [goal, setGoal] = useState(initial)
+  const [errors, setErrors] = useState<Record<string, string>>({})
+  function submit(event: React.FormEvent) { event.preventDefault(); const next: Record<string, string> = {}; if (!goal.title.trim()) next.title = 'Enter a goal title.'; if (!goal.category.trim()) next.category = 'Enter a category.'; if (!goal.targetDate) next.targetDate = 'Choose a target date.'; setErrors(next); if (!Object.keys(next).length) onSave({ ...goal, title: goal.title.trim(), description: goal.description.trim(), category: goal.category.trim() }) }
+  return <ModalFrame title={initial.title ? 'Edit learning goal' : 'Create a learning goal'} subtitle="Describe the outcome, then connect focused tasks." onClose={onClose}><form onSubmit={submit} noValidate><label className="field full">Goal title<input autoFocus value={goal.title} onChange={(e) => setGoal({ ...goal, title: e.target.value })} aria-invalid={!!errors.title} aria-describedby={errors.title ? 'goal-title-error' : undefined} placeholder="e.g. Build confident TypeScript skills" />{errors.title && <span className="field-error" id="goal-title-error">{errors.title}</span>}</label><label className="field full">Description<textarea rows={3} value={goal.description} onChange={(e) => setGoal({ ...goal, description: e.target.value })} placeholder="What will success look like?" /></label><div className="form-grid"><label className="field">Category<input value={goal.category} onChange={(e) => setGoal({ ...goal, category: e.target.value })} aria-invalid={!!errors.category} />{errors.category && <span className="field-error">{errors.category}</span>}</label><label className="field">Target date<input type="date" value={goal.targetDate} onChange={(e) => setGoal({ ...goal, targetDate: e.target.value })} aria-invalid={!!errors.targetDate} />{errors.targetDate && <span className="field-error">{errors.targetDate}</span>}</label></div><fieldset className="color-field"><legend>Accent colour</legend>{['#6257d9', '#0b8f74', '#db6b35', '#3973c7', '#b23a75'].map((color) => <label key={color} style={{ background: color }}><input type="radio" name="color" value={color} checked={goal.color === color} onChange={() => setGoal({ ...goal, color })} /><span className="sr-only">{color}</span></label>)}</fieldset><div className="modal-actions"><button type="button" className="secondary-button" onClick={onClose}>Cancel</button><button className="primary-button" type="submit">Save goal</button></div></form></ModalFrame>
+}
+
+function TaskModal({ initial, goals, onClose, onSave }: { initial: LearningTask; goals: LearningGoal[]; onClose: () => void; onSave: (task: LearningTask) => void }) {
+  const [task, setTask] = useState(initial)
+  const [errors, setErrors] = useState<Record<string, string>>({})
+  function submit(event: React.FormEvent) { event.preventDefault(); const next: Record<string, string> = {}; if (!task.title.trim()) next.title = 'Enter a task title.'; if (!task.goalId) next.goalId = 'Choose a goal.'; if (!task.dueDate) next.dueDate = 'Choose a due date.'; if (task.estimatedMinutes < 5) next.estimatedMinutes = 'Use at least 5 minutes.'; setErrors(next); if (!Object.keys(next).length) onSave({ ...task, title: task.title.trim(), notes: task.notes.trim() }) }
+  return <ModalFrame title={initial.title ? 'Edit task' : 'Add a focused task'} subtitle="Make the next step specific, realistic and easy to start." onClose={onClose}><form onSubmit={submit} noValidate><label className="field full">Task title<input autoFocus value={task.title} onChange={(e) => setTask({ ...task, title: e.target.value })} aria-invalid={!!errors.title} placeholder="e.g. Complete keyboard walkthrough" />{errors.title && <span className="field-error">{errors.title}</span>}</label><label className="field full">Goal<select value={task.goalId} onChange={(e) => setTask({ ...task, goalId: e.target.value })} aria-invalid={!!errors.goalId}><option value="">Choose a goal</option>{goals.map((goal) => <option key={goal.id} value={goal.id}>{goal.title}</option>)}</select>{errors.goalId && <span className="field-error">{errors.goalId}</span>}</label><label className="field full">Notes<textarea rows={3} value={task.notes} onChange={(e) => setTask({ ...task, notes: e.target.value })} placeholder="Useful context, acceptance criteria or resource…" /></label><div className="form-grid three"><label className="field">Due date<input type="date" value={task.dueDate} onChange={(e) => setTask({ ...task, dueDate: e.target.value })} aria-invalid={!!errors.dueDate} />{errors.dueDate && <span className="field-error">{errors.dueDate}</span>}</label><label className="field">Priority<select value={task.priority} onChange={(e) => setTask({ ...task, priority: e.target.value as Priority })}><option value="low">Low</option><option value="medium">Medium</option><option value="high">High</option></select></label><label className="field">Status<select value={task.status} onChange={(e) => setTask({ ...task, status: e.target.value as TaskStatus })}><option value="todo">To do</option><option value="in-progress">In progress</option><option value="done">Done</option></select></label></div><label className="field full">Estimated minutes<input type="number" min="5" step="5" value={task.estimatedMinutes} onChange={(e) => setTask({ ...task, estimatedMinutes: Number(e.target.value) })} aria-invalid={!!errors.estimatedMinutes} />{errors.estimatedMinutes && <span className="field-error">{errors.estimatedMinutes}</span>}</label><div className="modal-actions"><button type="button" className="secondary-button" onClick={onClose}>Cancel</button><button className="primary-button" type="submit">Save task</button></div></form></ModalFrame>
+}
+
+function ConfirmModal({ title, text, onClose, onConfirm }: { title: string; text: string; onClose: () => void; onConfirm: () => void }) {
+  return <ModalFrame title={title} subtitle="This action cannot be undone." onClose={onClose}><p className="confirm-copy">{text}</p><div className="modal-actions"><button className="secondary-button" onClick={onClose}>Keep it</button><button className="danger-button" onClick={onConfirm}>Delete permanently</button></div></ModalFrame>
+}
+
+function DataModal({ state, onClose, onRestore }: { state: AppStateV1; onClose: () => void; onRestore: (state: AppStateV1, message: string) => void }) {
+  const [error, setError] = useState('')
+  const inputRef = useRef<HTMLInputElement>(null)
+  function download() { const blob = new Blob([storageAdapter.export(state)], { type: 'application/json' }); const url = URL.createObjectURL(blob); const link = document.createElement('a'); link.href = url; link.download = `learning-planner-backup-${new Date().toISOString().slice(0, 10)}.json`; link.click(); URL.revokeObjectURL(url) }
+  async function upload(file?: File) { if (!file) return; try { onRestore(storageAdapter.import(await file.text()), 'Backup imported successfully.') } catch (reason) { setError(reason instanceof Error ? reason.message : 'The selected backup is invalid.') } }
+  return <ModalFrame title="Data & backup" subtitle="Your plan stays in this browser unless you export it." onClose={onClose}><div className="data-options"><button onClick={download}><span className="option-icon"><Icon name="download" /></span><span><strong>Export JSON backup</strong><small>Download a portable, readable copy of every goal and task.</small></span><Icon name="chevron" /></button><button onClick={() => inputRef.current?.click()}><span className="option-icon"><Icon name="upload" /></span><span><strong>Import JSON backup</strong><small>Validate and replace this browser’s current plan.</small></span><Icon name="chevron" /></button><input ref={inputRef} className="sr-only" type="file" accept="application/json,.json" onChange={(e) => upload(e.target.files?.[0])} /><button onClick={() => onRestore(createSampleData(), 'Sample learning plan restored.')}><span className="option-icon"><Icon name="reset" /></span><span><strong>Restore sample data</strong><small>Reset to a realistic, non-sensitive evidence dataset.</small></span><Icon name="chevron" /></button></div>{error && <p className="import-error" role="alert">{error}</p>}<div className="modal-actions"><button className="secondary-button" onClick={onClose}>Close</button></div></ModalFrame>
+}
+
+export default App
--- a/src/assets/hero.png
+++ b/src/assets/hero.png
--- a/src/assets/react.svg
+++ b/src/assets/react.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
--- a/src/assets/vite.svg
+++ b/src/assets/vite.svg
--- a/src/components.tsx
+++ b/src/components.tsx
@@ -0,0 +1,37 @@
+import type { ReactNode } from 'react'
+
+export function Icon({ name, size = 20 }: { name: string; size?: number }) {
+  const paths: Record<string, ReactNode> = {
+    dashboard: <><rect x="3" y="3" width="7" height="7" rx="2"/><rect x="14" y="3" width="7" height="7" rx="2"/><rect x="3" y="14" width="7" height="7" rx="2"/><rect x="14" y="14" width="7" height="7" rx="2"/></>,
+    goal: <><circle cx="12" cy="12" r="8"/><circle cx="12" cy="12" r="3"/><path d="M12 2v3M22 12h-3"/></>,
+    task: <><path d="M9 6h11M9 12h11M9 18h11"/><path d="m3 6 1.5 1.5L7 5M3 12l1.5 1.5L7 11M3 18l1.5 1.5L7 17"/></>,
+    plus: <path d="M12 5v14M5 12h14"/>,
+    search: <><circle cx="11" cy="11" r="7"/><path d="m20 20-4-4"/></>,
+    calendar: <><rect x="3" y="5" width="18" height="16" rx="3"/><path d="M16 3v4M8 3v4M3 10h18"/></>,
+    clock: <><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></>,
+    chevron: <path d="m9 18 6-6-6-6"/>,
+    download: <><path d="M12 3v12m0 0 4-4m-4 4-4-4"/><path d="M5 20h14"/></>,
+    upload: <><path d="M12 16V4m0 0 4 4m-4-4L8 8"/><path d="M5 20h14"/></>,
+    reset: <><path d="M4 12a8 8 0 1 0 2.3-5.7L4 8"/><path d="M4 3v5h5"/></>,
+    close: <path d="M6 6l12 12M18 6 6 18"/>,
+    edit: <><path d="m4 16-1 5 5-1L19 9l-4-4L4 16Z"/><path d="m13 7 4 4"/></>,
+    trash: <><path d="M4 7h16M9 7V4h6v3M7 7l1 14h8l1-14"/><path d="M10 11v6M14 11v6"/></>,
+    check: <path d="m5 12 4 4L19 6"/>,
+    spark: <><path d="m12 3 1.5 4.5L18 9l-4.5 1.5L12 15l-1.5-4.5L6 9l4.5-1.5L12 3Z"/><path d="m19 15 .7 2.3L22 18l-2.3.7L19 21l-.7-2.3L16 18l2.3-.7L19 15Z"/></>,
+  }
+  return <svg className="icon" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">{paths[name]}</svg>
+}
+
+export function ProgressRing({ value, color }: { value: number; color: string }) {
+  const radius = 24
+  const circumference = 2 * Math.PI * radius
+  return (
+    <div className="progress-ring" aria-label={`${value}% complete`}>
+      <svg viewBox="0 0 60 60" aria-hidden="true">
+        <circle className="ring-track" cx="30" cy="30" r={radius} />
+        <circle className="ring-value" cx="30" cy="30" r={radius} style={{ stroke: color, strokeDasharray: circumference, strokeDashoffset: circumference - (value / 100) * circumference }} />
+      </svg>
+      <strong>{value}%</strong>
+    </div>
+  )
+}
--- a/src/domain.test.ts
+++ b/src/domain.test.ts
@@ -0,0 +1,23 @@
+import { describe, expect, it } from 'vitest'
+import { createSampleData } from './sampleData'
+import { dashboardStats, goalProgress, sortedUpcoming } from './domain'
+
+describe('domain calculations', () => {
+  it('derives goal progress without storing duplicate values', () => {
+    const state = createSampleData()
+    expect(goalProgress('goal-typescript', state.tasks)).toBe(33)
+    expect(goalProgress('unknown', state.tasks)).toBe(0)
+  })
+
+  it('derives dashboard statistics', () => {
+    const state = createSampleData()
+    expect(dashboardStats(state)).toMatchObject({ goals: 4, completed: 2, active: 2 })
+  })
+
+  it('orders incomplete dated tasks chronologically', () => {
+    const state = createSampleData()
+    const upcoming = sortedUpcoming(state.tasks)
+    expect(upcoming.every((task) => task.status !== 'done')).toBe(true)
+    expect(upcoming.map((task) => task.dueDate)).toEqual([...upcoming.map((task) => task.dueDate)].sort())
+  })
+})
--- a/src/domain.ts
+++ b/src/domain.ts
@@ -0,0 +1,51 @@
+import type { AppStateV1, LearningGoal, LearningTask } from './types'
+
+export function createId(): string {
+  if (globalThis.crypto?.randomUUID) return globalThis.crypto.randomUUID()
+  return `lp-${Date.now()}-${Math.random().toString(16).slice(2)}`
+}
+
+export function goalProgress(goalId: string, tasks: LearningTask[]): number {
+  const matching = tasks.filter((task) => task.goalId === goalId)
+  if (!matching.length) return 0
+  return Math.round((matching.filter((task) => task.status === 'done').length / matching.length) * 100)
+}
+
+export function dashboardStats(state: AppStateV1) {
+  const completed = state.tasks.filter((task) => task.status === 'done').length
+  const active = state.tasks.filter((task) => task.status === 'in-progress').length
+  const today = new Date()
+  today.setHours(0, 0, 0, 0)
+  const nextWeek = new Date(today)
+  nextWeek.setDate(today.getDate() + 7)
+  const dueSoon = state.tasks.filter((task) => {
+    if (task.status === 'done' || !task.dueDate) return false
+    const due = new Date(`${task.dueDate}T00:00:00`)
+    return due >= today && due <= nextWeek
+  }).length
+
+  return {
+    goals: state.goals.length,
+    completed,
+    active,
+    dueSoon,
+    totalMinutes: state.tasks.reduce((sum, task) => sum + task.estimatedMinutes, 0),
+  }
+}
+
+export function sortedUpcoming(tasks: LearningTask[]): LearningTask[] {
+  return [...tasks]
+    .filter((task) => task.status !== 'done' && task.dueDate)
+    .sort((a, b) => a.dueDate.localeCompare(b.dueDate))
+}
+
+export function goalForTask(task: LearningTask, goals: LearningGoal[]): LearningGoal | undefined {
+  return goals.find((goal) => goal.id === task.goalId)
+}
+
+export function formatDate(date: string): string {
+  if (!date) return 'No date'
+  return new Intl.DateTimeFormat('en-GB', { day: 'numeric', month: 'short', year: 'numeric' }).format(
+    new Date(`${date}T00:00:00`),
+  )
+}
--- a/src/index.css
+++ b/src/index.css
@@ -0,0 +1,27 @@
+:root {
+  font-family: Inter, 'Segoe UI', Arial, sans-serif;
+  color: #212037;
+  background: #f6f6fb;
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  --ink: #212037;
+  --muted: #6f6d82;
+  --soft: #f6f6fb;
+  --line: #e7e6ef;
+  --primary: #6257d9;
+  --primary-dark: #4c43b8;
+  --green: #0b8f74;
+  --orange: #db6b35;
+  --blue: #3973c7;
+  --danger: #c4414b;
+}
+
+* { box-sizing: border-box; }
+html { min-width: 320px; background: var(--soft); }
+body { margin: 0; min-width: 320px; min-height: 100vh; }
+button, input, select, textarea { font: inherit; }
+button { color: inherit; }
+button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid #948bf0; outline-offset: 2px; }
+button, select { cursor: pointer; }
+button:disabled { cursor: not-allowed; opacity: .5; }
+.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.tsx'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)
--- a/src/sampleData.ts
+++ b/src/sampleData.ts
@@ -0,0 +1,63 @@
+import type { AppStateV1 } from './types'
+
+function isoOffset(days: number): string {
+  const value = new Date()
+  value.setDate(value.getDate() + days)
+  return value.toISOString().slice(0, 10)
+}
+
+export function createSampleData(): AppStateV1 {
+  const createdAt = new Date().toISOString()
+  return {
+    version: 1,
+    goals: [
+      {
+        id: 'goal-typescript',
+        title: 'Master practical TypeScript patterns',
+        description: 'Build confidence with typed state, validation and maintainable application architecture.',
+        category: 'Engineering',
+        targetDate: isoOffset(35),
+        color: '#6257d9',
+        createdAt,
+      },
+      {
+        id: 'goal-accessibility',
+        title: 'Design accessible digital products',
+        description: 'Apply keyboard, semantic HTML and inclusive interaction practices to production interfaces.',
+        category: 'Product design',
+        targetDate: isoOffset(52),
+        color: '#0b8f74',
+        createdAt,
+      },
+      {
+        id: 'goal-testing',
+        title: 'Build a reliable browser testing workflow',
+        description: 'Create repeatable checks across browsers, viewports and real devices.',
+        category: 'Quality',
+        targetDate: isoOffset(21),
+        color: '#db6b35',
+        createdAt,
+      },
+      {
+        id: 'goal-communication',
+        title: 'Communicate engineering decisions clearly',
+        description: 'Capture concise evidence, trade-offs and outcomes for technical and non-technical readers.',
+        category: 'Professional skills',
+        targetDate: isoOffset(65),
+        color: '#3973c7',
+        createdAt,
+      },
+    ],
+    tasks: [
+      { id: 'task-1', goalId: 'goal-typescript', title: 'Model the learning domain', notes: 'Define stable interfaces and derived state.', dueDate: isoOffset(-5), priority: 'high', status: 'done', estimatedMinutes: 90, createdAt },
+      { id: 'task-2', goalId: 'goal-typescript', title: 'Add safe import validation', notes: 'Reject malformed and unsupported backups.', dueDate: isoOffset(2), priority: 'high', status: 'in-progress', estimatedMinutes: 75, createdAt },
+      { id: 'task-3', goalId: 'goal-typescript', title: 'Review state update patterns', notes: 'Document immutable updates and derived values.', dueDate: isoOffset(9), priority: 'medium', status: 'todo', estimatedMinutes: 45, createdAt },
+      { id: 'task-4', goalId: 'goal-accessibility', title: 'Complete keyboard walkthrough', notes: 'Check focus order, dialogs and visible focus.', dueDate: isoOffset(4), priority: 'high', status: 'in-progress', estimatedMinutes: 60, createdAt },
+      { id: 'task-5', goalId: 'goal-accessibility', title: 'Audit form labels and errors', notes: 'Confirm every control has a useful accessible name.', dueDate: isoOffset(12), priority: 'medium', status: 'todo', estimatedMinutes: 50, createdAt },
+      { id: 'task-6', goalId: 'goal-testing', title: 'Create three-resolution test matrix', notes: 'Record expected layout at each required viewport.', dueDate: isoOffset(-2), priority: 'high', status: 'done', estimatedMinutes: 55, createdAt },
+      { id: 'task-7', goalId: 'goal-testing', title: 'Run Firefox regression suite', notes: 'Compare the seeded core journey with Chromium.', dueDate: isoOffset(1), priority: 'high', status: 'todo', estimatedMinutes: 40, createdAt },
+      { id: 'task-8', goalId: 'goal-testing', title: 'Capture Edge developer tools evidence', notes: 'Include browser version, console and storage.', dueDate: isoOffset(6), priority: 'medium', status: 'todo', estimatedMinutes: 35, createdAt },
+      { id: 'task-9', goalId: 'goal-communication', title: 'Draft outcome and lessons learned', notes: 'Link statements to issue, test and screenshot IDs.', dueDate: isoOffset(14), priority: 'medium', status: 'todo', estimatedMinutes: 70, createdAt },
+    ],
+  }
+}
--- a/src/storage.test.ts
+++ b/src/storage.test.ts
@@ -0,0 +1,23 @@
+import { describe, expect, it } from 'vitest'
+import { createSampleData } from './sampleData'
+import { parseState, STORAGE_KEY, storageAdapter } from './storage'
+
+describe('versioned storage adapter', () => {
+  it('round trips a valid backup', () => {
+    const state = createSampleData()
+    expect(storageAdapter.import(storageAdapter.export(state))).toEqual(state)
+  })
+
+  it('rejects unsupported versions and orphaned tasks', () => {
+    expect(() => parseState({ version: 2, goals: [], tasks: [] })).toThrow(/version/i)
+    const state = createSampleData()
+    expect(() => parseState({ ...state, goals: [] })).toThrow(/does not exist/i)
+  })
+
+  it('recovers from corrupt browser data', () => {
+    const fakeStorage = { getItem: (key: string) => key === STORAGE_KEY ? '{bad json' : null }
+    const result = storageAdapter.load(fakeStorage)
+    expect(result.warning).toMatch(/could not be read/i)
+    expect(result.state.goals).toHaveLength(4)
+  })
+})
--- a/src/storage.ts
+++ b/src/storage.ts
@@ -0,0 +1,68 @@
+import { createSampleData } from './sampleData'
+import type { AppStateV1, LearningGoal, LearningTask, LoadResult, Priority, TaskStatus } from './types'
+
+export const STORAGE_KEY = 'learning-planner.state'
+
+const priorities: Priority[] = ['low', 'medium', 'high']
+const statuses: TaskStatus[] = ['todo', 'in-progress', 'done']
+
+function isString(value: unknown): value is string {
+  return typeof value === 'string'
+}
+
+function isGoal(value: unknown): value is LearningGoal {
+  if (!value || typeof value !== 'object') return false
+  const goal = value as Record<string, unknown>
+  return ['id', 'title', 'description', 'category', 'targetDate', 'color', 'createdAt'].every((key) => isString(goal[key]))
+}
+
+function isTask(value: unknown): value is LearningTask {
+  if (!value || typeof value !== 'object') return false
+  const task = value as Record<string, unknown>
+  return (
+    ['id', 'goalId', 'title', 'notes', 'dueDate', 'createdAt'].every((key) => isString(task[key])) &&
+    priorities.includes(task.priority as Priority) &&
+    statuses.includes(task.status as TaskStatus) &&
+    typeof task.estimatedMinutes === 'number' &&
+    Number.isFinite(task.estimatedMinutes) &&
+    task.estimatedMinutes >= 0
+  )
+}
+
+export function parseState(value: unknown): AppStateV1 {
+  if (!value || typeof value !== 'object') throw new Error('The backup must contain an object.')
+  const state = value as Record<string, unknown>
+  if (state.version !== 1) throw new Error('This backup version is not supported.')
+  if (!Array.isArray(state.goals) || !state.goals.every(isGoal)) throw new Error('The backup contains invalid goals.')
+  if (!Array.isArray(state.tasks) || !state.tasks.every(isTask)) throw new Error('The backup contains invalid tasks.')
+  const goalIds = new Set(state.goals.map((goal) => goal.id))
+  if (state.tasks.some((task) => !goalIds.has(task.goalId))) throw new Error('A task refers to a goal that does not exist.')
+  return state as unknown as AppStateV1
+}
+
+export const storageAdapter = {
+  load(storage: Pick<Storage, 'getItem'> = localStorage): LoadResult {
+    try {
+      const raw = storage.getItem(STORAGE_KEY)
+      if (!raw) return { state: createSampleData() }
+      return { state: parseState(JSON.parse(raw)) }
+    } catch (error) {
+      return {
+        state: createSampleData(),
+        warning: `Saved data could not be read. Sample data was restored. ${error instanceof Error ? error.message : ''}`.trim(),
+      }
+    }
+  },
+
+  save(state: AppStateV1, storage: Pick<Storage, 'setItem'> = localStorage): void {
+    storage.setItem(STORAGE_KEY, JSON.stringify(parseState(state)))
+  },
+
+  export(state: AppStateV1): string {
+    return JSON.stringify(parseState(state), null, 2)
+  },
+
+  import(raw: string): AppStateV1 {
+    return parseState(JSON.parse(raw))
+  },
+}
--- a/src/test/setup.ts
+++ b/src/test/setup.ts
@@ -0,0 +1,8 @@
+import '@testing-library/jest-dom/vitest'
+import { afterEach } from 'vitest'
+import { cleanup } from '@testing-library/react'
+
+afterEach(() => {
+  cleanup()
+  localStorage.clear()
+})
--- a/src/types.ts
+++ b/src/types.ts
@@ -0,0 +1,37 @@
+export type TaskStatus = 'todo' | 'in-progress' | 'done'
+export type Priority = 'low' | 'medium' | 'high'
+
+export interface LearningGoal {
+  id: string
+  title: string
+  description: string
+  category: string
+  targetDate: string
+  color: string
+  createdAt: string
+}
+
+export interface LearningTask {
+  id: string
+  goalId: string
+  title: string
+  notes: string
+  dueDate: string
+  priority: Priority
+  status: TaskStatus
+  estimatedMinutes: number
+  createdAt: string
+}
+
+export interface AppStateV1 {
+  version: 1
+  goals: LearningGoal[]
+  tasks: LearningTask[]
+}
+
+export type AppView = 'dashboard' | 'goals' | 'tasks'
+
+export interface LoadResult {
+  state: AppStateV1
+  warning?: string
+}
--- a/tsconfig.app.json
+++ b/tsconfig.app.json
@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "es2023",
+    "lib": ["ES2023", "DOM"],
+    "module": "esnext",
+    "types": ["vite/client"],
+    "allowArbitraryExtensions": true,
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"]
+}
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}
--- a/tsconfig.node.json
+++ b/tsconfig.node.json
@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "es2023",
+    "lib": ["ES2023"],
+    "types": ["node"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "module": "nodenext",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["vite.config.ts"]
+}
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -0,0 +1,13 @@
+import { defineConfig } from 'vitest/config'
+import react from '@vitejs/plugin-react'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react()],
+  test: {
+    environment: 'jsdom',
+    setupFiles: './src/test/setup.ts',
+    css: true,
+    exclude: ['e2e/**', 'node_modules/**'],
+  },
+})
				`@@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>