Refactor to pull all text enteries into single location

PROMPT.md

@@ -1,131 +0,0 @@
-# Task: Career Constellation Chart & Layout Polish
-
-Visual polish and layout adjustments to the career constellation chart, sidebar, and repeat medications section. 12 discrete changes across 10 files.
-
-## Requirements
-
-### 1. Reduce link opacity (`src/components/constellation/constants.ts`)
-- Lower `LINK_BASE_OPACITY` from `0.08` → `0.04`
-- Lower `LINK_STRENGTH_OPACITY_FACTOR` from `0.12` → `0.06`
-- Makes skill connection lines subtler so job pills are visually clearer
-
-### 2. White background on hovered job pill (`src/hooks/useConstellationHighlight.ts`)
-- When a role/education node is the `activeNodeId`, override its `.node-circle` fill to `#FFFFFF` with `fill-opacity: 1`
-- Currently uses a gradient fill with `fill-opacity: 0.25` — make it solid white, fully opaque
-
-### 3. Move legend to top of chart + increase font size (`src/components/constellation/ConstellationLegend.tsx`)
-- Position legend as absolutely-positioned overlay at the **top** of the chart container (not below the SVG)
-- Increase font size from `10px` to `12px` to match work node label text size
-- Separate the "Hover to explore connections" text from the legend — see item 12
-
-### 4. Move year labels to right side of chart (`src/hooks/useForceSimulation.ts`)
-- Keep the current node layout unchanged (roles, skills, timeline line stay where they are)
-- Move year label text elements to the right edge of the chart: position at `width - sidePadding`, `text-anchor: 'end'`
-
-### 5. Change chart fonts to dashboard style (`src/hooks/useForceSimulation.ts`)
-- Year labels: change `font-family` from `var(--font-geist-mono)` to `var(--font-ui)`
-- Year indicator (animation): same font change
-
-### 6. Reverse pathway column split to 40/60 (`src/index.css`)
-- Change `.pathway-columns` grid from `minmax(0, 1.3fr) minmax(0, 1fr)` to `minmax(0, 2fr) minmax(0, 3fr)`
-- This gives 40% to work experience text and 60% to the graph
-
-### 7. Sidebar: collapses to icon rail when patient summary scrolls out of view (`src/components/Sidebar.tsx` + `src/components/DashboardLayout.tsx`)
-- Sidebar already starts expanded on desktop — no change needed there
-- Add IntersectionObserver on the PatientSummaryTile element in DashboardLayout
-- When PatientSummaryTile scrolls out of view, pass a `forceCollapsed` prop to Sidebar
-- Sidebar collapses to icon rail (same as current mobile rail behaviour with nav buttons + hamburger menu)
-- When PatientSummaryTile scrolls back into view, re-expand the sidebar
-- Only applies on desktop (≥1024px) — mobile behaviour unchanged
-
-### 8. Change pathway stacking breakpoint from 1024px to 768px (`src/index.css`)
-- The `.pathway-columns` two-column layout currently triggers at `min-width: 1024px`
-- Change this to `min-width: 768px` so the graph sits beside text on tablets too
-- Sidebar breakpoint remains at 1024px (this only affects pathway columns)
-- Also update `.pathway-graph-sticky` responsive rule to match the `768px` breakpoint
-
-### 9. Repeat medications: 3-column layout (`src/components/RepeatMedicationsSubsection.tsx`)
-- Render all 3 category sections (Technical, Healthcare Domain, Strategic & Leadership) side-by-side
-- Use CSS grid: `grid-template-columns: repeat(3, 1fr)` on `md` (768px+) screens
-- Stack vertically on mobile (<768px)
-- Remove the `marginTop` between categories when in grid mode (they'll be in columns)
-
-### 10. Skills hover → chart highlight (verify only)
-- `RepeatMedicationsSubsection` already calls `onNodeHighlight` on hover
-- This flows through `DashboardLayout` → `highlightedNodeId` → `CareerConstellation` → `useConstellationHighlight`
-- Verify this interaction works end-to-end. If it does, no code change needed.
-
-### 11. Play/pause button: left edge of chart, visible only when chart is in view (`src/components/constellation/PlayPauseButton.tsx` + `src/components/constellation/CareerConstellation.tsx`)
-- Move button to the far-left edge of the chart container (not bottom-right)
-- Use IntersectionObserver on the chart container to track if chart is visible
-- When chart is in viewport: show button at left edge, vertically centered
-- When chart scrolls out of view: hide the button
-- Increase base opacity from 0.6 to 0.85
-- Add slightly stronger border and subtle box-shadow for visibility
-
-### 12. "Hover to explore connections" text — more visible, top-left above year indicator (`src/components/constellation/ConstellationLegend.tsx` or `src/components/constellation/CareerConstellation.tsx`)
-- Separate this text from the legend dot items
-- Position at the top-left of the chart, above the year indicator text
-- Increase opacity from 0.7 to 1
-- Increase font size (match or approach the legend font size)
-- On touch devices, show "Tap to explore connections" instead
-
-## Success Criteria
-
-All of the following must be true:
-- [ ] `npm run lint` passes with zero errors
-- [ ] `npm run typecheck` passes with zero errors
-- [ ] `npm run build` completes successfully
-- [ ] Link opacity constants lowered (LINK_BASE_OPACITY=0.04, LINK_STRENGTH_OPACITY_FACTOR=0.06)
-- [ ] Hovered role/education node gets white fill (#FFFFFF, fill-opacity 1)
-- [ ] Legend positioned at top of chart with 12px font size
-- [ ] Year labels positioned at right edge of chart with `var(--font-ui)` font
-- [ ] Pathway columns use 40/60 split (2fr/3fr)
-- [ ] Sidebar collapses to icon rail when patient summary scrolls out of view (desktop only)
-- [ ] Pathway columns go side-by-side at 768px (not 1024px)
-- [ ] Repeat medications renders 3 categories in grid columns on md+ screens
-- [ ] Play/pause button on left edge of chart, hidden when chart not in view
-- [ ] "Hover to explore" text at top-left of chart, full opacity, larger font
-
-## Constraints
-
-- TypeScript strict mode — `noUnusedLocals`, `noUnusedParameters` enforced
-- Path alias: `@/*` → `src/*`
-- Styling: Tailwind utility classes + inline `CSSProperties` for dynamic/theme values
-- Animations: Framer Motion; respects `prefers-reduced-motion`
-- Design tokens: Primary teal `#00897B`, Accent coral `#FF6B6B`
-- Font tokens: `--font-ui` (Elvaro Grotesque), `--font-geist-mono` (Geist Mono)
-- Do not break existing hover/click/keyboard interactions on the constellation
-- Do not alter the D3 force simulation physics or node positioning logic (except year labels)
-- Preserve existing mobile behaviour unless explicitly changed (items 8, 9)
-
-## Files to Modify
-
-1. `src/components/constellation/constants.ts`
-2. `src/hooks/useConstellationHighlight.ts`
-3. `src/components/constellation/ConstellationLegend.tsx`
-4. `src/hooks/useForceSimulation.ts`
-5. `src/index.css`
-6. `src/components/Sidebar.tsx`
-7. `src/components/DashboardLayout.tsx`
-8. `src/components/RepeatMedicationsSubsection.tsx`
-9. `src/components/constellation/PlayPauseButton.tsx`
-10. `src/components/constellation/CareerConstellation.tsx`
-
-## Status
-
-Track progress here. Mark items complete as you go.
-When all success criteria are met, print LOOP_COMPLETE.
-
-- [ ] Item 1: Link opacity
-- [ ] Item 2: White hover pill
-- [ ] Item 3: Legend top position
-- [ ] Item 4: Year labels right
-- [ ] Item 5: Font change
-- [ ] Item 6: Column split 40/60
-- [ ] Item 7: Sidebar scroll collapse
-- [ ] Item 8: Stacking breakpoint 768px
-- [ ] Item 9: Medications 3-column
-- [ ] Item 10: Skills hover verify
-- [ ] Item 11: Play/pause button
-- [ ] Item 12: Hover text visibility