Summary
Redesign `Report.jsx` to lead with the killer insight — untrained muscles — via a bold Condensed hero, dashed white outlines on the body map for gap muscles, a magenta-tinted gap callout card, and styled recommendation rows. Also accepts pre-fill props from MuscleMap's "Analyser perioden" CTA and shows a dynamic filter eyebrow.
Part of #96. Depends on phase 1 (tokens + `gaps` prop on BodySVG) and phase 3 (App.jsx prefill state).
Priority
High
UI spec (Carbon g100)
- Dynamic eyebrow: `"PERIODE · {UKEDAG} · {N} UKER"` computed from active filters
- Hero (two lines, Plex Cond 700 30px): `"{N} muskler"` (magenta) + `"aldri trent."` (white)
- KPI hero: large ratio display — numerator in Plex Cond 600 56px, denominator in `var(--text-disabled-wl)` 32px
- Body map: `gaps={untrainedMuscles}` prop → dashed white outlines on un-trained muscle regions
- Gap callout card: magenta-tinted, 16px radius, "IKKE TRUFFET" eyebrow, each muscle as AccentChip with stale-time
- Recommendation rows: 3px left accent strip, mono muscle-coverage meta, 28px round magenta `+` button
- `FilterChip`: pill radius, active → `background: var(--accent)`
- Sticky CTA: "Disse bør du legge inn i programmet →" → navigates to Bibliotek
- Consume `prefill` prop on mount via `useRef` (empty deps array)
Acceptance criteria
Out of scope
- Planning / auto-scheduling a future session
Summary
Redesign `Report.jsx` to lead with the killer insight — untrained muscles — via a bold Condensed hero, dashed white outlines on the body map for gap muscles, a magenta-tinted gap callout card, and styled recommendation rows. Also accepts pre-fill props from MuscleMap's "Analyser perioden" CTA and shows a dynamic filter eyebrow.
Part of #96. Depends on phase 1 (tokens + `gaps` prop on BodySVG) and phase 3 (App.jsx prefill state).
Priority
High
UI spec (Carbon g100)
Acceptance criteria
Out of scope