Redesign the setup flow and consolidate the CSS into one primitives layer

Onboarding asks explicitly for one or two parents and shows one card per
parent for balances; the balance form is per parent with inline
validation; the partner can be filled from the FK deduction or added
from it. Settings and Dashboard reuse the same form.

CSS: bare buttons carry no colour any more; buttons, cards, choice
cards, fields, alerts, badges, eyebrow and modal chrome are defined once
in primitives.css. Media queries live only in responsive.css. A style
guard test blocks hex, !important and stray media queries. Bilingual
fixes: calendar selects size by content, header no longer wraps. Vitest
is capped at four workers.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>

frontend/src/i18n/en/auth.ts

@@ -1,13 +1,15 @@
 export const auth = {
   'auth.createAccountButton': 'Create account',
   'auth.createAccountTitle': 'Create account',
+  'auth.emailLabel': 'Email',
   'auth.emailPlaceholder': 'Email',
   'auth.genericError': 'Something went wrong',
-  'auth.haveAccountButton': 'Already have an account',
   'auth.loadingEllipsis': 'Loading…',
   'auth.loginButton': 'Log in',
   'auth.loginTitle': 'Log in',
+  'auth.nameLabel': 'Name',
   'auth.namePlaceholder': 'Name',
+  'auth.passwordLabel': 'Password',
   'auth.passwordPlaceholder': 'Password',
   'auth.registerButton': 'Register',
 } as const

frontend/src/i18n/en/calendar.ts

@@ -9,7 +9,7 @@ export const calendar = {
   'calendar.legendKlamdag': 'Bridge day',
   'calendar.legendMinimumRate': 'Minimum rate (lägstanivå)',
   'calendar.legendOverride': 'Exception (working/day off)',
-  'calendar.legendRedDay': 'Public holiday',
+  'calendar.legendRedDay': 'R = public holiday',
   'calendar.legendTitle': 'Legend',
   'calendar.legendVacation': 'Vacation',
   'calendar.loading': 'Loading calendar...',
@@ -52,8 +52,6 @@ export const calendar = {
   'plannedDayModal.parentLabel': 'Parent',
   'plannedDayModal.pinnedNotice': 'This day is pinned by you — the planner will not change it automatically.',
   'plannedDayModal.dayStatusLabel': 'This day is:',
-  'plannedDayModal.workdayOption': 'Working day',
-  'plannedDayModal.dayOffOption': 'Day off',
   'plannedDayModal.rangeTitle': 'Plan {count} days',
   'plannedDayModal.saveButton': 'Save',
   'plannedDayModal.saveError': 'Failed to save planned day',

frontend/src/i18n/en/dashboard.ts

@@ -2,6 +2,7 @@ export const dashboard = {
   'age4Bars.expiringStat': '{expiring} days expiring',
   'age4Bars.savableStat': '{left} of {cap} days can be saved',
   'age4Bars.title': 'Days left at age 4, per parent',
+  'dashboard.balancePickerPrompt': 'Whose balance is this?',
   'dashboard.daysLeft': 'Days left',
   'dashboard.enterManually': 'Enter details manually',
   'dashboard.estimatedBadge': 'Estimated',
@@ -11,11 +12,12 @@ export const dashboard = {
   'dashboard.expiringAtB4ParentFallback': 'Parent {number}',
   'dashboard.fetchFromFk': 'Fetch from Försäkringskassan',
   'dashboard.hero.hasPlanMessage': '{atRisk} days are at risk of disappearing when {childName} turns 4 ({date}).',
+  'dashboard.hero.noneAtRiskMessage': 'No days will be lost — your plan uses them all before {childName} turns 4 ({date}).',
   'dashboard.hero.noPlanMessage': 'You have {days} days to plan. Without a plan, {atRisk} of them will disappear when {childName} turns 4.',
   'dashboard.loading': 'Loading...',
   'dashboard.moreDetailsSummary': 'More details',
   'dashboard.overviewTitle': 'Overview',
-  'dashboard.planFold.noWishesHint': 'Add wishes under Planning to see a proposal here.',
+  'dashboard.planFold.noWishesHint': 'Add wishes under Calendar to see a proposal here.',
   'dashboard.planFold.summary': 'Plan proposal for the years ahead',
   'dashboard.planFold.unknownParent': 'Unknown parent',
   'dashboard.plannedDaysTitle': 'Planned days',
@@ -36,6 +38,8 @@ export const dashboard = {
   'parentalLeaveBreakdown.totalHeader': 'Total',
   'parentalLeaveBreakdown.transferableDays': 'Transferable days',
   'parentalLeaveBreakdown.typeHeader': 'Type',
-  'yearTimeline.bandLabel': '{dayType}, {startDate} – {endDate}',
+  'yearTimeline.bandLabel': '{dayType}, {startDate} – {endDate} ({dayCount} days). Click to open this month in the calendar.',
+  'yearTimeline.bandLabelOneDay': '{dayType}, {startDate} – {endDate} (1 day). Click to open this month in the calendar.',
+  'yearTimeline.caption': 'Each row is one year; each colored band is a planned leave period. Click a band to open that month in the calendar.',
   'yearTimeline.title': 'The years ahead',
 } as const

frontend/src/i18n/en/onboarding.ts

@@ -1,29 +1,36 @@
 export const onboarding = {
   'onboarding.addChildButton': 'Add child',
+  'onboarding.addDeducedPartnerButton': 'Add {name}',
   'onboarding.addingChild': 'Adding...',
-  'onboarding.balancesLegend': 'Parental-leave days',
+  'onboarding.balanceStatus': '{left} of {total} days left',
+  'onboarding.balanceStatusNone': 'No details yet',
   'onboarding.birthdayLabel': 'Birthday',
+  'onboarding.childBirthDateRequired': 'Enter the child\'s birth date',
   'onboarding.childNameLabel': 'Child\'s name',
+  'onboarding.childNameRequired': 'Enter the child\'s name',
   'onboarding.continueButton': 'Continue',
   'onboarding.createChildError': 'Could not create child',
-  'onboarding.familyIntro': 'This controls how the planner splits parental-leave days.',
-  'onboarding.familyTitle': 'Are you planning alone or together with a partner?',
+  'onboarding.deducedBadge': 'Derived from your FK fetch',
+  'onboarding.deducedPartnerPrompt': 'Försäkringskassan shows the other parent has {days} days left.',
+  'onboarding.dismissDeducedPartner': 'No, I\'m a sole parent',
+  'onboarding.enterManuallyButton': 'Enter myself',
+  'onboarding.familyCoupleDescription': 'The days are split 240/240 and you can each save 48 days after age 4. The partner doesn\'t need to create an account.',
+  'onboarding.familyCoupleTitle': 'We are two parents',
+  'onboarding.familySoloDescription': 'I have sole custody. All 480 days and 96 saved days after age 4 are mine.',
+  'onboarding.familySoloTitle': 'Just me',
+  'onboarding.familyTitle': 'What does your family look like?',
   'onboarding.fillAllFields': 'Fill in all fields',
+  'onboarding.finishButton': 'Done',
   'onboarding.finishError': 'Something went wrong. Please try again.',
-  'onboarding.manualFetchDescription': 'Enter your balances manually if you already know them.',
-  'onboarding.manualFetchTitle': 'Enter manually',
+  'onboarding.finishingButton': 'Saving...',
   'onboarding.namePlaceholder': 'Name',
-  'onboarding.partnerAddedStatus': 'Partner added: {name}',
-  'onboarding.partnerIntro': 'Add your partner now, or do it later under Settings.',
-  'onboarding.partnerNameLabel': 'Partner\'s name',
-  'onboarding.savingFamilyError': 'Could not save the planning mode',
-  'onboarding.scrapeFetchDescription': 'Fastest and most accurate — fetches your exact balances automatically via BankID.',
-  'onboarding.scrapeFetchTitle': 'Fetch from Försäkringskassan',
-  'onboarding.skipButton': 'Skip for now',
-  'onboarding.skipHint': 'We\'ll use the statutory assumption (480 days, none used) until you enter your own figures.',
-  'onboarding.stepBalancesIntro': 'This tells us how many days are left to plan. You can always update this later.',
-  'onboarding.stepBalancesTitle': 'Fetch your parental-leave days',
+  'onboarding.partnerAutoFillHint': 'Filled in automatically if you fetch from FK, or if {name} logs in and fetches.',
+  'onboarding.partnerNameLabel': 'The other parent\'s name',
+  'onboarding.partnerNameRequired': 'Enter the other parent\'s name',
+  'onboarding.stepBalancesIntro': 'You can skip this and fill it in later — we\'ll then assume no days have been used.',
+  'onboarding.stepBalancesTitle': 'How many days are left?',
   'onboarding.stepChildIntro': 'Add your first child to start planning your parental leave.',
   'onboarding.stepChildTitle': 'Welcome! Let\'s add your child',
   'onboarding.stepIndicator': 'Step {step} of {total}',
+  'onboarding.youBadge': 'you',
 } as const

frontend/src/i18n/en/plan.ts

@@ -3,9 +3,7 @@
 // Översikt carries the headline figures — see PLANNING_ENGINE_SPEC.md's
 // superseding note). What's left here is the subset `planResults.*`
 // `PlanFold.tsx` (the read-only plan-proposal fold on Översikt) and
-// `frontend/src/utils/rejectionMessages.ts` still render, plus
-// `planningModeSelector.*` (`PlanningModeSelector.tsx`, used by both
-// Settings and Onboarding).
+// `frontend/src/utils/rejectionMessages.ts` still render.
 export const plan = {
   'planResults.balancesTitle': 'Remaining balances after the plan',
   'planResults.dubbeldagarLeftHeader': 'Double days left',
@@ -40,7 +38,4 @@ export const plan = {
   'planResults.weeksUnit': 'weeks',
   'planResults.yearHeader': 'Year',
   'planResults.yearOverviewTitle': 'Overview by year',
-  'planningModeSelector.couple': 'Me and my partner',
-  'planningModeSelector.legend': 'Are you planning alone or together with a partner?',
-  'planningModeSelector.solo': 'Just me',
 } as const

frontend/src/i18n/en/settings.ts

@@ -14,24 +14,27 @@ export const settings = {
   'dayOverridesInput.offStatus': 'I\'m off this day',
   'dayOverridesInput.statusLegend': 'Status',
   'dayOverridesInput.workingStatus': 'I\'m working this day',
-  'manualFetchModal.cancelButton': 'Cancel',
-  'manualFetchModal.closeAria': 'Close',
-  'manualFetchModal.daysRemaining': 'Days remaining:',
-  'manualFetchModal.daysUsedLabel': 'Days used',
-  'manualFetchModal.description': 'Enter your parental leave information from Försäkringskassan manually if automatic fetching is unavailable.',
-  'manualFetchModal.dubbeldagarLabel': 'Dubbeldagar left (0-60)',
-  'manualFetchModal.lagstaUsedLabel': 'Lägstanivå (minimum-rate, 90-day tier) used',
-  'manualFetchModal.remainingBreakdownTitle': 'Remaining Days Breakdown',
-  'manualFetchModal.reservedDaysLabel': 'Reserved days left',
-  'manualFetchModal.saveButton': 'Save',
-  'manualFetchModal.saveError': 'Failed to save manual data',
-  'manualFetchModal.savingButton': 'Saving…',
-  'manualFetchModal.sjukpenningUsedLabel': 'Sjukpenningnivå (income-based, 390-day tier) used',
-  'manualFetchModal.tierBreakdownTitle': 'Tier Breakdown',
-  'manualFetchModal.title': 'Enter Parental Leave Data',
-  'manualFetchModal.totalDaysLabel': 'Total days (0-480)',
-  'manualFetchModal.totalDaysSectionTitle': 'Total Days',
-  'manualFetchModal.transferableDaysLabel': 'Transferable days left',
+  'parentBalance.advancedToggle': 'Advanced',
+  'parentBalance.cancelButton': 'Cancel',
+  'parentBalance.closeAria': 'Close',
+  'parentBalance.description': 'The figures are on Mina sidor at Försäkringskassan, under Föräldrapenning.',
+  'parentBalance.dubbeldagarHelper': 'Shared by both parents together, during the first 15 months.',
+  'parentBalance.dubbeldagarLeftLabel': 'Dubbeldagar left (0-60)',
+  'parentBalance.invalid': 'The total (sjukpenningnivå + lägstanivå) can\'t exceed {total} days.',
+  'parentBalance.lagstaLeftLabel': 'Lägstanivå (minimum-rate tier) left (0-90)',
+  'parentBalance.loadingBalance': 'Loading balance…',
+  'parentBalance.presetButton': 'No days taken yet',
+  'parentBalance.rangeError': 'Enter a number between {min} and {max}.',
+  'parentBalance.reservedExceedsError': 'Reserved days can\'t exceed the sjukpenningnivå + lägstanivå days left.',
+  'parentBalance.reservedLeftHelper': 'Leave empty and we\'ll calculate it.',
+  'parentBalance.reservedLeftLabel': 'Reserved days left (0-90)',
+  'parentBalance.saveButton': 'Save',
+  'parentBalance.saveError': 'Failed to save the remaining days',
+  'parentBalance.savingButton': 'Saving…',
+  'parentBalance.sjukpenningLeftLabel': 'Sjukpenningnivå (income-based tier) left (0-390)',
+  'parentBalance.summary': '= {left} of {total} days left',
+  'parentBalance.title': '{name}\'s days left',
+  'parentBalance.titleSelf': 'Your days left',
   'parentProfileInput.employed': 'Employed',
   'parentProfileInput.employmentStatusLabel': 'Employment status',
   'parentProfileInput.hourly': 'Hourly wage',
@@ -57,6 +60,7 @@ export const settings = {
   'settings.addPartnerError': 'Could not add partner',
   'settings.addPartnerSuccess': 'Partner added!',
   'settings.addingPartner': 'Adding...',
+  'settings.balanceButton': 'Days left',
   'settings.calendarSectionTitle': 'Calendar',
   'settings.cancelButton': 'Cancel',
   'settings.childBirthDateLabel': 'Child\'s birth date',
@@ -78,8 +82,6 @@ export const settings = {
   'settings.partnerNamePlaceholder': 'Partner\'s name',
   'settings.partnerNameRequired': 'Enter a name for the partner',
   'settings.partnerSectionTitle': 'Partner',
-  'settings.planningHelp': 'Your planning goal, and whether you plan alone or together with a partner, control how the planner suggests distributing days.',
-  'settings.planningSectionTitle': 'Planning',
   'settings.preschoolHelp': 'Preschools usually close for about 6 days a year for planning. Enter how many days your preschool has, so they are reserved in the plan.',
   'settings.preschoolPlanningDaysLabel': 'Preschool planning days per year',
   'settings.profileHelp': 'Your salary type and employment status are used to estimate your SGI and plan your leave.',
@@ -102,9 +104,6 @@ export const settings = {
   'settings.saveChildButton': 'Save child\'s details',
   'settings.saveChildError': 'Could not save the child\'s details',
   'settings.saveChildSuccess': 'Child\'s details saved!',
-  'settings.savePlanningButton': 'Save planning',
-  'settings.savePlanningError': 'Could not save planning settings',
-  'settings.savePlanningSuccess': 'Planning settings saved!',
   'settings.saveProfileButton': 'Save your profile',
   'settings.saveProfileError': 'Could not save your profile',
   'settings.saveProfileSuccess': 'Your profile was saved!',