# 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