From 0081f60b06425690b819bfe8052224aa315509e9 Mon Sep 17 00:00:00 2001
From: Jacob Hagstedt <jacob.hagstedt@gmail.com>
Date: Sun, 20 Sep 2026 07:00:22 +0200
Subject: [PATCH] Finish the redesign's edges: auth page, modals, dead code,
 docs

The sign-in page becomes a plain centred column with the brand mark
and a segmented login/register switch, modals lose their last inner
boxes, the red-days list collapses every year but the current one,
and the retired components' CSS, an unused list component and 23
unreferenced translation keys are removed. ARCHITECTURE.md documents
the Almanacka styling conventions and the per-year balance rule.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01XBRLomdLK9jF7wU7a8AA6H
---
 ARCHITECTURE.md                               |  57 +++
 .../calendar/CalendarExceptions.tsx           |  98 ++---
 .../calendar/calendar-exceptions.css          | 165 +++++++-
 .../modals/ParentBalanceForm.test.tsx         |   5 +-
 .../components/modals/ParentBalanceForm.tsx   |   2 +
 .../components/modals/parent-balance-form.css |   4 +-
 .../src/components/modals/qrcode-modal.css    |   4 -
 .../vacation-days/VacationDaysList.test.tsx   | 132 -------
 .../vacation-days/VacationDaysList.tsx        |  45 ---
 frontend/src/hooks/useLatestBalance.ts        |   7 +-
 frontend/src/i18n/en/auth.ts                  |   1 -
 frontend/src/i18n/en/balance.ts               |   1 -
 frontend/src/i18n/en/calendar.ts              |  12 -
 frontend/src/i18n/en/common.ts                |   4 -
 frontend/src/i18n/en/dashboard.ts             |   1 -
 frontend/src/i18n/en/settings.ts              |   9 +-
 frontend/src/i18n/sv/auth.ts                  |   1 -
 frontend/src/i18n/sv/balance.ts               |   1 -
 frontend/src/i18n/sv/calendar.ts              |  12 -
 frontend/src/i18n/sv/common.ts                |   4 -
 frontend/src/i18n/sv/dashboard.ts             |   1 -
 frontend/src/i18n/sv/settings.ts              |   9 +-
 frontend/src/pages/Auth.tsx                   |  18 +-
 frontend/src/pages/auth.css                   |  60 +--
 frontend/src/styles/components.css            | 368 ------------------
 frontend/src/styles/responsive.css            |  27 --
 frontend/src/utils/leaveTypes.test.ts         |  14 +-
 frontend/src/utils/leaveTypes.ts              |   9 -
 28 files changed, 326 insertions(+), 745 deletions(-)
 delete mode 100644 frontend/src/components/vacation-days/VacationDaysList.test.tsx
 delete mode 100644 frontend/src/components/vacation-days/VacationDaysList.tsx

diff --git a/ARCHITECTURE.md b/ARCHITECTURE.md
index 7d0b0cb..21dd9a4 100644
--- a/ARCHITECTURE.md
+++ b/ARCHITECTURE.md
@@ -89,6 +89,40 @@ end-to-end specs, run separately from Vitest unit tests.
 
 Run `git ls-files frontend/src` for the current, authoritative file list.
 
+#### 2.2.1 Styling — the Almanacka design system
+
+All design tokens (colour, spacing, type scale, radii, shadow) live as CSS custom properties in
+`src/styles/global.css` only — a style guard (`src/styles/styles.test.ts`) fails the build on any
+hex/rgba, px font-size, or `@media` query found outside `global.css`/`responsive.css`. Everything
+else composes those tokens: `src/styles/primitives.css` holds cross-page primitives (`.btn`,
+`.field`, `.card`, `.modal__*`, `.segmented`, `.disclosure`, `.skeleton`, `.alert`, `.badge`), and
+each component/page owns a co-located `*.css` file for its own layout.
+
+One accent (ink-blue) drives CTAs, focus rings, the active nav item, "today" and selection — there
+is no second "success" colour. Type is self-hosted Schibsted Grotesk (`public/fonts/`, woff2, no
+Google Fonts request — GDPR), scale 12/14/16/20/28/40 with nothing below 12px. The calendar ("the
+Almanacka") tells day states apart by numeral ink and a small badge letter rather than cell fill —
+red day → danger ink + "R", klämdag → warning ink + "K", today → filled accent circle — and tells
+leave types apart by fill/ink/outline (vacation = accent tint, sjukpenning = dark fill, lägsta =
+white + hatched outline), never by hue alone. Icons come from a single `Icon` component (inline SVG
+symbols) — no emoji, no icon font. See `captures/redesign/design-system.md` for the full token
+table and invariants (gitignored — a design scratch doc, not part of the shipped app).
+
+Two recurring structural primitives replace what used to be ad hoc boxes: `.disclosure` (a
+`<details>`/`<summary>` row with a hairline, not a bordered card — used by the dashboard's "Fler
+detaljer", each dashboard year row, and Settings' per-year red-days list) and `.segmented` (a
+pill-style two-or-more-option toggle — the SV/EN `LanguageToggle`, the auth page's Log in/Create
+account tabs). Loading states go through `.skeleton` shimmer blocks rendered by a shared
+`PageSkeleton` component (`src/components/common/`), which each page (`Dashboard`, `Calendar`,
+`Settings`) renders inside its own `<Layout>` while its first fetch is in flight, so every route
+gets the same loading treatment for free instead of each page inventing its own spinner.
+
+Parental-leave balance entry has exactly one home: `BalanceFlow` (`src/components/balance/`), used
+from Settings' "Saldon" panel — the dashboard no longer has its own balance-entry UI, only a read
+of the latest saved figures. `BalanceFlow` wraps `ParentBalanceForm` (the modal that actually asks
+for sjukpenningnivå/lägstanivå/dubbeldagar left) with the per-member status row (source +
+freshness) that used to be duplicated per page.
+
 ---
 
 ### 2.3 Data Acquisition: Scraping (primary) + Manual Fallback
@@ -797,6 +831,29 @@ The dashboard's "projection" endpoint (`/api/analytics/{workspace_id}/projection
 
 Edge cases the calculation must handle: child not yet born (plan from due date), reserved days (the 90 non-transferable days are part of each parent's pool and also subject to the age-4 cap), dubbeldagar (each counts as a day against the using parent's pool), and leap-year / month-arithmetic for `birth_date + 4 years`.
 
+### 6.6 Per-year balance series (the analytics overview's year-by-year answer)
+
+`Age4Projection.year_balances` (`ParentYearBalance`, `backend/app/services/analytics_service.py`)
+gives the overview a vacation + parental-leave balance **per parent, per calendar year**, birth
+year through the 4th-birthday year, instead of only the single age-4 total. The vacation half
+(`AnalyticsService._vacation_year_series`) models Semesterlagen's carry-forward rule as a FIFO bank
+of `(year_earned, count)` entries:
+
+- Each year, planned use is drawn oldest-entry-first, then from that year's own entitlement (never
+  itself banked); at least `min_vacation_days_per_year` (the **floor**, default 20) must be taken
+  from the current year's own days, not the bank.
+- At year end, only days earned *above* the floor (plus the surviving bank balance) carry forward,
+  and each carried-forward day **expires after 5 years** (`LeaveRules.vacation_carry_forward_years`)
+  — an entry still unconsumed in its final valid year drops out and is reported as `expiring` for
+  that year instead of carrying on.
+- `saved_days_in` on a `vacation_days` row normally only **seeds** the bank for the series' first
+  year (no earlier history to derive it from). On any later year, a non-zero `saved_days_in` is
+  instead a Settings-UI **override**: it replaces the computed carry-in outright (resetting the bank
+  to one entry dated year − 1) rather than adding to it. A zero/absent value never overrides.
+
+The frontend renders this as one row per year (`YearRows.tsx`, a `.disclosure` per year) on the
+Dashboard, each showing carried-in/earned/used/carried-out per parent.
+
 ---
 
 ## 7. Frontend Type Safety
diff --git a/frontend/src/components/calendar/CalendarExceptions.tsx b/frontend/src/components/calendar/CalendarExceptions.tsx
index 0d12c17..b14f7b7 100644
--- a/frontend/src/components/calendar/CalendarExceptions.tsx
+++ b/frontend/src/components/calendar/CalendarExceptions.tsx
@@ -58,6 +58,7 @@ export function CalendarExceptions({
 }: CalendarExceptionsProps): ReactNode {
   const { t, locale } = useTranslation()
   const endYear = endYearProp ?? startYear + years - 1
+  const currentYear = new Date().getFullYear()
   const [pendingDate, setPendingDate] = useState<string | null>(null)
   const [toggleError, setToggleError] = useState<string | null>(null)
 
@@ -179,51 +180,60 @@ export function CalendarExceptions({
         {!isLoading &&
           !error &&
           Array.from(byYear.entries()).map(([year, items]) => (
-            <div key={year} className="red-days-list__year" data-testid={`red-days-year-${year}`}>
-              <h3 className="red-days-list__year-title">{year}</h3>
-              {items.length === 0 ? (
-                <p className="red-days-list__empty">{t('redDaysList.emptyYear')}</p>
-              ) : (
-                <ul className="red-days-list__items">
-                  {items.map((day) => {
-                    const override = overrideByDate.get(day.date)
-                    return (
-                      <li key={day.date} className="red-days-list__item" data-testid={`red-days-item-${day.date}`}>
-                        <span className="red-days-list__date">{formatDateForDisplay(day.date, locale)}</span>
-                        {day.dayType === 'red_day' && day.name && (
-                          <span className="red-days-list__name">{formatHolidayName(day.name)}</span>
-                        )}
-                        {day.isOverride && (
-                          <span
-                            className={`badge badge--${day.overrideIsWorkingDay ? 'danger' : 'accent'} red-days-list__override-badge red-days-list__override-badge--${day.overrideIsWorkingDay ? 'working' : 'free'}`}
-                            data-testid={`red-days-override-badge-${day.date}`}
+            <details
+              key={year}
+              className="disclosure red-days-list__year"
+              data-testid={`red-days-year-${year}`}
+              open={year === currentYear}
+            >
+              <summary className="disclosure__summary red-days-list__year-summary">
+                <span className="red-days-list__year-title">{year}</span>
+              </summary>
+              <div className="disclosure__body red-days-list__year-body">
+                {items.length === 0 ? (
+                  <p className="red-days-list__empty">{t('redDaysList.emptyYear')}</p>
+                ) : (
+                  <ul className="red-days-list__items">
+                    {items.map((day) => {
+                      const override = overrideByDate.get(day.date)
+                      return (
+                        <li key={day.date} className="red-days-list__item" data-testid={`red-days-item-${day.date}`}>
+                          <span className="red-days-list__date">{formatDateForDisplay(day.date, locale)}</span>
+                          {day.dayType === 'red_day' && day.name && (
+                            <span className="red-days-list__name">{formatHolidayName(day.name)}</span>
+                          )}
+                          {day.isOverride && (
+                            <span
+                              className={`badge badge--${day.overrideIsWorkingDay ? 'danger' : 'accent'} red-days-list__override-badge red-days-list__override-badge--${day.overrideIsWorkingDay ? 'working' : 'free'}`}
+                              data-testid={`red-days-override-badge-${day.date}`}
+                            >
+                              {day.overrideIsWorkingDay ? t('redDaysList.overrideWorking') : t('redDaysList.overrideFree')}
+                            </span>
+                          )}
+                          {override?.note && (
+                            <span className="red-days-list__note">{t('dayOverridesInput.noteLabel', { note: override.note })}</span>
+                          )}
+                          <button
+                            type="button"
+                            className={`red-days-list__effective red-days-list__effective--${day.isFree ? 'free' : 'working'}`}
+                            onClick={() => handleToggle(day)}
+                            disabled={pendingDate === day.date}
+                            aria-label={
+                              day.isFree
+                                ? t('redDaysList.toggleToWorkingAria', { date: formatDateForDisplay(day.date) })
+                                : t('redDaysList.toggleToFreeAria', { date: formatDateForDisplay(day.date) })
+                            }
+                            data-testid={`red-days-toggle-${day.date}`}
                           >
-                            {day.overrideIsWorkingDay ? t('redDaysList.overrideWorking') : t('redDaysList.overrideFree')}
-                          </span>
-                        )}
-                        {override?.note && (
-                          <span className="red-days-list__note">{t('dayOverridesInput.noteLabel', { note: override.note })}</span>
-                        )}
-                        <button
-                          type="button"
-                          className={`red-days-list__effective red-days-list__effective--${day.isFree ? 'free' : 'working'}`}
-                          onClick={() => handleToggle(day)}
-                          disabled={pendingDate === day.date}
-                          aria-label={
-                            day.isFree
-                              ? t('redDaysList.toggleToWorkingAria', { date: formatDateForDisplay(day.date) })
-                              : t('redDaysList.toggleToFreeAria', { date: formatDateForDisplay(day.date) })
-                          }
-                          data-testid={`red-days-toggle-${day.date}`}
-                        >
-                          {day.isFree ? t('redDaysList.effectiveFree') : t('redDaysList.effectiveWorking')}
-                        </button>
-                      </li>
-                    )
-                  })}
-                </ul>
-              )}
-            </div>
+                            {day.isFree ? t('redDaysList.effectiveFree') : t('redDaysList.effectiveWorking')}
+                          </button>
+                        </li>
+                      )
+                    })}
+                  </ul>
+                )}
+              </div>
+            </details>
           ))}
       </div>
 
diff --git a/frontend/src/components/calendar/calendar-exceptions.css b/frontend/src/components/calendar/calendar-exceptions.css
index 13abf45..9664160 100644
--- a/frontend/src/components/calendar/calendar-exceptions.css
+++ b/frontend/src/components/calendar/calendar-exceptions.css
@@ -1,11 +1,8 @@
 /* CalendarExceptions — merges the old RedDaysList (per-year red days +
- * overrides) with DayOverridesInput's add-a-date form. Most row/list/form
- * styling is already carried over unchanged from components.css under the
- * same `.red-days-list__*` / `.day-overrides-input__*` class names (both
- * components used them before being folded into this one); this file only
- * adds what's new here — spacing between the two merged blocks and the two
- * override-badge/effective-state variants the old components never needed
- * together in the same list. */
+ * overrides, each year now a `.disclosure`) with DayOverridesInput's
+ * add-a-date form. All `.red-days-list__*` / `.day-overrides-input__*`
+ * rules live here (moved from components.css once this became the only
+ * consumer of those class names). */
 .calendar-exceptions__help {
   font-size: var(--fs-sm);
   color: var(--c-text-muted);
@@ -39,3 +36,157 @@
   color: var(--c-accent);
   border-color: var(--c-accent-weak);
 }
+
+/* Per-year list — moved from components.css when the plain
+ * `.red-days-list__year` div became a `.disclosure` (only the current year
+ * open by default; see CalendarExceptions.tsx). */
+.red-days-list__pagination {
+  display: flex;
+  align-items: center;
+  gap: var(--sp-3);
+  margin-bottom: var(--sp-4);
+}
+
+.red-days-list__range {
+  font-weight: 600;
+}
+
+.red-days-list__year-summary {
+  font-size: var(--fs-lg);
+}
+
+.red-days-list__empty {
+  color: var(--c-text-muted);
+  font-size: var(--fs-sm);
+}
+
+.red-days-list__items {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.red-days-list__item {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--sp-3);
+  padding: var(--sp-2) 0;
+  border-bottom: 1px solid var(--c-border);
+  font-size: var(--fs-sm);
+}
+
+.red-days-list__date {
+  font-weight: 600;
+  min-width: 160px;
+}
+
+.red-days-list__name {
+  color: var(--c-text);
+}
+
+/* `.red-days-list__effective` is a real `<button>` — clicking it toggles
+ * that one absolute date between its statutory value and the opposite
+ * override (§Task8). Sized by its own (bilingual) content, not a fixed
+ * width, since the Swedish labels run longer than the English ones. */
+.red-days-list__effective {
+  margin-left: auto;
+  font-size: var(--fs-sm);
+  font-weight: 500;
+  color: var(--c-text-muted);
+  background-color: var(--c-bg);
+  border: 1px solid var(--c-border);
+  border-radius: var(--radius-full);
+  padding: 2px var(--sp-3);
+  cursor: pointer;
+  white-space: nowrap;
+  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
+}
+
+.red-days-list__effective:hover:not(:disabled) {
+  background-color: var(--c-accent-weak);
+  border-color: var(--c-accent);
+  color: var(--c-text);
+}
+
+.red-days-list__effective:focus-visible {
+  outline: 2px solid var(--c-accent);
+  outline-offset: 2px;
+}
+
+.red-days-list__effective:disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+
+.red-days-list__effective--working {
+  background-color: var(--c-danger-weak);
+  color: var(--c-danger);
+  border-color: var(--c-danger-weak);
+}
+
+.red-days-list__loading,
+.red-days-list__error,
+.red-days-list__toggle-error {
+  color: var(--c-text-muted);
+  font-size: var(--fs-sm);
+}
+
+.red-days-list__toggle-error {
+  color: var(--c-danger);
+  margin: var(--sp-2) 0 0;
+}
+
+/* Add-a-date form — the rest of the old DayOverridesInput's own list/remove
+ * UI was dropped as redundant (see CalendarExceptions.tsx's doc comment);
+ * only this form survives, moved here from components.css. */
+.day-overrides-input__form {
+  padding-top: var(--sp-4);
+  border-top: 1px solid var(--c-border);
+}
+
+.day-overrides-input__form h3 {
+  margin: 0 0 var(--sp-4) 0;
+  font-size: var(--fs-lg);
+  color: var(--c-text);
+}
+
+.day-overrides-input__form-group {
+  max-width: 400px;
+  margin-bottom: var(--sp-4);
+}
+
+.day-overrides-input__radio-group {
+  border: none;
+  padding: 0;
+  margin: 0;
+}
+
+.day-overrides-input__radio-group legend {
+  padding: 0;
+  margin: 0 0 var(--sp-2) 0;
+}
+
+.day-overrides-input__radio-label {
+  display: flex;
+  align-items: center;
+  gap: var(--sp-2);
+  margin-bottom: var(--sp-2);
+  cursor: pointer;
+}
+
+.day-overrides-input__radio-label:last-child {
+  margin-bottom: 0;
+}
+
+.day-overrides-input__radio-label input[type='radio'] {
+  width: auto;
+  margin: 0;
+}
+
+.day-overrides-input__char-count {
+  display: block;
+  margin-top: var(--sp-1);
+  font-size: var(--fs-sm);
+  color: var(--c-text-muted);
+}
diff --git a/frontend/src/components/modals/ParentBalanceForm.test.tsx b/frontend/src/components/modals/ParentBalanceForm.test.tsx
index ecda73c..f6d6c12 100644
--- a/frontend/src/components/modals/ParentBalanceForm.test.tsx
+++ b/frontend/src/components/modals/ParentBalanceForm.test.tsx
@@ -124,13 +124,14 @@ describe('ParentBalanceForm', () => {
       />,
     )
 
-    expect(screen.getByText('= 240 av 240 dagar kvar')).toBeInTheDocument()
+    expect(screen.getByText(/= 240 av 240 dagar kvar/)).toBeInTheDocument()
+    expect(screen.getByText(/60 dubbeldagar kvar/)).toBeInTheDocument()
 
     const sjukpenningInput = screen.getByLabelText(/Sjukpenningnivå kvar/)
     await user.clear(sjukpenningInput)
     await user.type(sjukpenningInput, '100')
 
-    expect(screen.getByText('= 145 av 240 dagar kvar')).toBeInTheDocument()
+    expect(screen.getByText(/= 145 av 240 dagar kvar/)).toBeInTheDocument()
   })
 
   it('shows an inline field error and does not call onSave when a field is left empty', async () => {
diff --git a/frontend/src/components/modals/ParentBalanceForm.tsx b/frontend/src/components/modals/ParentBalanceForm.tsx
index b99fc55..ae75862 100644
--- a/frontend/src/components/modals/ParentBalanceForm.tsx
+++ b/frontend/src/components/modals/ParentBalanceForm.tsx
@@ -324,6 +324,8 @@ export function ParentBalanceForm({
 
             <p className="parent-balance-form__summary">
               {t('parentBalance.summary', { left: daysLeft, total: totalDays })}
+              <br />
+              {t('parentBalance.summaryDubbeldagar', { count: dubbeldagarLeft ?? 0 })}
             </p>
             {totalError && <p className="field__error">{totalError}</p>}
 
diff --git a/frontend/src/components/modals/parent-balance-form.css b/frontend/src/components/modals/parent-balance-form.css
index e7f0900..97826ca 100644
--- a/frontend/src/components/modals/parent-balance-form.css
+++ b/frontend/src/components/modals/parent-balance-form.css
@@ -8,10 +8,8 @@
   font-size: var(--fs-sm);
   font-weight: 600;
   color: var(--c-text);
+  line-height: 1.5;
   margin: 0;
-  padding: var(--sp-2);
-  background-color: var(--c-bg);
-  border-radius: var(--radius-sm);
 }
 
 /* The overlay/content/header/close/body shell, form fields and footer
diff --git a/frontend/src/components/modals/qrcode-modal.css b/frontend/src/components/modals/qrcode-modal.css
index 5e00473..e89c66f 100644
--- a/frontend/src/components/modals/qrcode-modal.css
+++ b/frontend/src/components/modals/qrcode-modal.css
@@ -50,10 +50,6 @@
   max-width: 300px;
   width: 100%;
   height: auto;
-  border: 1px solid var(--c-border);
-  border-radius: var(--radius);
-  background-color: var(--c-surface);
-  padding: var(--sp-2);
   image-rendering: pixelated;
 }
 
diff --git a/frontend/src/components/vacation-days/VacationDaysList.test.tsx b/frontend/src/components/vacation-days/VacationDaysList.test.tsx
deleted file mode 100644
index 36ecb3a..0000000
--- a/frontend/src/components/vacation-days/VacationDaysList.test.tsx
+++ /dev/null
@@ -1,132 +0,0 @@
-/**
- * REFERENCE TEST — for the VacationDaysList component + useVacationDays hook.
- *
- * Pattern to copy for other component tests:
- *   - vi.mock('@/services/api') to isolate from the real HTTP layer.
- *   - Use @testing-library/react renderHook for hooks.
- *   - Use render + waitFor for async component tests.
- *   - Always cover: loading state, error state, empty state, and the happy path.
- */
-
-import { render, renderHook, act, screen, waitFor } from '@testing-library/react'
-import { vi, describe, it, expect, beforeEach } from 'vitest'
-import { VacationDaysList } from './VacationDaysList'
-import { useVacationDays } from '@/hooks/useVacationDays'
-import * as api from '@/services/api'
-import type { VacationDays } from '@/types'
-
-vi.mock('@/services/api')
-
-const MOCK_WS = 'workspace-1'
-const MOCK_VACATION_DAYS: VacationDays[] = [
-  {
-    id: 'vd-1',
-    personalDataUuid: 'pd-1',
-    workspaceId: MOCK_WS,
-    year: 2026,
-    totalDays: 25,
-    savedDaysIn: 5,
-    createdAt: '2026-01-01T00:00:00',
-    updatedAt: '2026-01-01T00:00:00',
-  },
-  {
-    id: 'vd-2',
-    personalDataUuid: 'pd-2',
-    workspaceId: MOCK_WS,
-    year: 2025,
-    totalDays: 25,
-    savedDaysIn: 0,
-    createdAt: '2025-01-01T00:00:00',
-    updatedAt: '2025-01-01T00:00:00',
-  },
-]
-
-beforeEach(() => {
-  vi.resetAllMocks()
-})
-
-// ---------------------------------------------------------------------------
-// Component tests
-// ---------------------------------------------------------------------------
-
-describe('VacationDaysList', () => {
-  it('shows loading state while fetching', () => {
-    vi.mocked(api.getVacationDaysByWorkspace).mockReturnValue(new Promise(() => {}))
-    render(<VacationDaysList workspaceId={MOCK_WS} />)
-    expect(screen.getByRole('status')).toHaveTextContent('Laddar')
-  })
-
-  it('renders vacation days list on success', async () => {
-    vi.mocked(api.getVacationDaysByWorkspace).mockResolvedValue(MOCK_VACATION_DAYS)
-    render(<VacationDaysList workspaceId={MOCK_WS} />)
-    await waitFor(() => {
-      expect(screen.getByTestId('vacation-days-list')).toBeInTheDocument()
-    })
-    expect(screen.getByTestId('vacation-days-item-vd-1')).toHaveTextContent('2026')
-    expect(screen.getByTestId('vacation-days-item-vd-1')).toHaveTextContent('+5 sparade')
-    expect(screen.getByTestId('vacation-days-item-vd-2')).toHaveTextContent('2025')
-  })
-
-  it('shows error message on API failure', async () => {
-    vi.mocked(api.getVacationDaysByWorkspace).mockRejectedValue(new Error('Network error'))
-    render(<VacationDaysList workspaceId={MOCK_WS} />)
-    await waitFor(() => {
-      expect(screen.getByRole('alert')).toHaveTextContent('Network error')
-    })
-  })
-
-  it('shows empty state when no vacation days exist', async () => {
-    vi.mocked(api.getVacationDaysByWorkspace).mockResolvedValue([])
-    render(<VacationDaysList workspaceId={MOCK_WS} />)
-    await waitFor(() => {
-      expect(screen.getByText(/inga semesterdagar/i)).toBeInTheDocument()
-    })
-  })
-})
-
-// ---------------------------------------------------------------------------
-// Hook tests
-// ---------------------------------------------------------------------------
-
-describe('useVacationDays', () => {
-  it('fetches vacation days on mount', async () => {
-    vi.mocked(api.getVacationDaysByWorkspace).mockResolvedValue(MOCK_VACATION_DAYS)
-    const { result } = renderHook(() => useVacationDays(MOCK_WS))
-
-    expect(result.current.isLoading).toBe(true)
-    await waitFor(() => expect(result.current.isLoading).toBe(false))
-    expect(result.current.data).toEqual(MOCK_VACATION_DAYS)
-    expect(result.current.error).toBeNull()
-  })
-
-  it('sets error on fetch failure', async () => {
-    vi.mocked(api.getVacationDaysByWorkspace).mockRejectedValue(new Error('Timeout'))
-    const { result } = renderHook(() => useVacationDays(MOCK_WS))
-    await waitFor(() => expect(result.current.isLoading).toBe(false))
-    expect(result.current.error).toBe('Timeout')
-    expect(result.current.data).toEqual([])
-  })
-
-  it('upsert calls api and refreshes list', async () => {
-    const updated: VacationDays = { ...MOCK_VACATION_DAYS[0]!, totalDays: 30 }
-    vi.mocked(api.getVacationDaysByWorkspace)
-      .mockResolvedValueOnce(MOCK_VACATION_DAYS)
-      .mockResolvedValueOnce([updated])
-    vi.mocked(api.upsertVacationDays).mockResolvedValue(updated)
-
-    const { result } = renderHook(() => useVacationDays(MOCK_WS))
-    await waitFor(() => expect(result.current.isLoading).toBe(false))
-
-    await act(async () => {
-      await result.current.upsert({
-        personalDataUuid: 'pd-1',
-        workspaceId: MOCK_WS,
-        year: 2026,
-        totalDays: 30,
-      })
-    })
-
-    expect(api.upsertVacationDays).toHaveBeenCalledOnce()
-    expect(result.current.data[0]?.totalDays).toBe(30)
-  })
-})
diff --git a/frontend/src/components/vacation-days/VacationDaysList.tsx b/frontend/src/components/vacation-days/VacationDaysList.tsx
deleted file mode 100644
index b167f1a..0000000
--- a/frontend/src/components/vacation-days/VacationDaysList.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-/**
- * REFERENCE COMPONENT — renders the VacationDays list.
- *
- * Shows the established pattern:
- *   - Accept workspaceId as a prop (not from context directly — easier to test).
- *   - Delegate data fetching to the hook.
- *   - Handle loading / error / empty states explicitly.
- *
- * Copy this structure for other list components.
- */
-
-import { useVacationDays } from '@/hooks/useVacationDays'
-import { useTranslation } from '@/i18n'
-import type { VacationDays } from '@/types'
-
-interface Props {
-  workspaceId: string
-}
-
-export function VacationDaysList({ workspaceId }: Props) {
-  const { t } = useTranslation()
-  const { data, isLoading, error } = useVacationDays(workspaceId)
-
-  if (isLoading) return <p role="status">{t('vacationDaysList.loading')}</p>
-  if (error) return <p role="alert">{error}</p>
-  if (data.length === 0) return <p>{t('vacationDaysList.empty')}</p>
-
-  return (
-    <ul data-testid="vacation-days-list">
-      {data.map((vd) => (
-        <VacationDaysItem key={vd.id} vacationDays={vd} />
-      ))}
-    </ul>
-  )
-}
-
-function VacationDaysItem({ vacationDays: vd }: { vacationDays: VacationDays }) {
-  const { t } = useTranslation()
-  return (
-    <li data-testid={`vacation-days-item-${vd.id}`}>
-      <strong>{vd.year}</strong>: {t('vacationDaysList.itemDays', { count: vd.totalDays })}
-      {vd.savedDaysIn > 0 && <span> {t('vacationDaysList.savedSuffix', { count: vd.savedDaysIn })}</span>}
-    </li>
-  )
-}
diff --git a/frontend/src/hooks/useLatestBalance.ts b/frontend/src/hooks/useLatestBalance.ts
index a95c8c7..a4c60b4 100644
--- a/frontend/src/hooks/useLatestBalance.ts
+++ b/frontend/src/hooks/useLatestBalance.ts
@@ -27,10 +27,9 @@ interface UseLatestBalanceResult {
  * from either entry point.
  *
  * Imported directly from this file (not the `@/hooks` barrel) by both pages
- * — same escape hatch `VacationDaysList` uses for `useVacationDays` — so
- * their tests can drive it through a mocked `api.getParentalLeave` instead
- * of mocking the hook itself, while the rest of `@/hooks` stays blanket-
- * mocked.
+ * so their tests can drive it through a mocked `api.getParentalLeave`
+ * instead of mocking the hook itself, while the rest of `@/hooks` stays
+ * blanket-mocked.
  *
  * `personalDataUuid`/`childId` are null when no balance form is open — the
  * hook then no-ops and reports no saved balance, rather than fetching.
diff --git a/frontend/src/i18n/en/auth.ts b/frontend/src/i18n/en/auth.ts
index 11046ca..89d0bf4 100644
--- a/frontend/src/i18n/en/auth.ts
+++ b/frontend/src/i18n/en/auth.ts
@@ -4,7 +4,6 @@ export const auth = {
   'auth.emailLabel': 'Email',
   'auth.emailPlaceholder': 'Email',
   'auth.genericError': 'Something went wrong',
-  'auth.loadingEllipsis': 'Loading…',
   'auth.loginButton': 'Log in',
   'auth.loginTitle': 'Log in',
   'auth.nameLabel': 'Name',
diff --git a/frontend/src/i18n/en/balance.ts b/frontend/src/i18n/en/balance.ts
index 58fb528..8da90a5 100644
--- a/frontend/src/i18n/en/balance.ts
+++ b/frontend/src/i18n/en/balance.ts
@@ -6,7 +6,6 @@ export const balance = {
   'balance.enterManually': 'Enter myself',
   'balance.fetchFromFk': 'Fetch from Försäkringskassan',
   'balance.loading': 'Loading balance…',
-  'balance.pickerPrompt': 'Whose balance is this?',
   'balance.sourceDeduced': 'Derived {date}',
   'balance.sourceManual': 'Entered manually {date}',
   'balance.sourceScraped': 'From Försäkringskassan {date}',
diff --git a/frontend/src/i18n/en/calendar.ts b/frontend/src/i18n/en/calendar.ts
index 4b0c62e..269909b 100644
--- a/frontend/src/i18n/en/calendar.ts
+++ b/frontend/src/i18n/en/calendar.ts
@@ -1,15 +1,8 @@
 export const calendar = {
-  'calendar.advanceMonthAria': '{month} - click to advance month',
-  'calendar.advanceYearAria': '{year} - click to advance year',
   'calendar.selectMonthAria': 'Select month',
   'calendar.selectYearAria': 'Select year',
   'calendar.deleteError': 'Failed to delete the planned day',
-  'calendar.loading': 'Loading calendar...',
   'calendar.nextMonthAria': 'Next month',
-  'calendar.overrideError': 'Failed to update the exception',
-  'calendar.overrideModeActiveLabel': 'Stop editing days',
-  'calendar.overrideModeHint': 'Click a day to mark it as a working day or a day off. Click a marked day again to reset it.',
-  'calendar.overrideModeLabel': 'Mark working/day off',
   'calendar.partner': 'Partner',
   'calendar.prevMonthAria': 'Previous month',
   'calendar.saveError': 'Failed to save the planned days',
@@ -46,7 +39,6 @@ export const calendar = {
   'plannedDayModal.pinnedNotice': 'This day is pinned by you — the planner will not change it automatically.',
   'plannedDayModal.excludedNotice': 'You removed this day for {parent}.',
   'plannedDayModal.restoreExcludedButton': 'Put the day back',
-  'plannedDayModal.dayStatusLabel': 'This day is:',
   'plannedDayModal.rangeTitle': 'Plan {count} days',
   'plannedDayModal.parentModeLabel': 'Who is this for?',
   'plannedDayModal.wantsDubbeldagLabel': 'Allow double days (dubbeldagar)',
@@ -75,7 +67,6 @@ export const calendar = {
 
   // §Task7 — the calendar becomes the plan: drag-select, period popover,
   // preset rail, and the sync toast/undo.
-  'calendar.newPeriodName': 'New period',
   'calendar.periodCreateError': 'Failed to create the period',
   'calendar.syncError': 'Failed to sync the plan',
   'calendar.syncingLabel': 'Syncing…',
@@ -118,7 +109,6 @@ export const calendar = {
   'calendar.presetChipsLabel': 'Add leave',
   'calendar.presetWeeksShort': '{count} wk',
 
-  'calendar.periodPopoverTitle': 'Edit period',
   'calendar.periodAdHocTitle': 'Period',
   'calendar.periodAdHocNotice': 'This period is not linked to a saved wish.',
   'calendar.periodNameLabel': 'Name',
@@ -141,9 +131,7 @@ export const calendar = {
   'calendar.periodLastYearNeedsSeriesHint': 'Choose "Every year" to change the last year.',
   'calendar.periodSaveButton': 'Save period',
   'calendar.periodSavingButton': 'Saving…',
-  'calendar.periodDeleteButton': 'Delete period',
   'calendar.periodDeletingButton': 'Deleting…',
-  'calendar.periodDeleteConfirm': 'Are you sure you want to delete this period?',
   'calendar.periodDeleteConfirmButton': 'Yes, delete',
   'calendar.periodDeleteAdHocButton': 'Delete these days',
   'calendar.periodCancelButton': 'Cancel',
diff --git a/frontend/src/i18n/en/common.ts b/frontend/src/i18n/en/common.ts
index 4df2603..ba0253a 100644
--- a/frontend/src/i18n/en/common.ts
+++ b/frontend/src/i18n/en/common.ts
@@ -1,9 +1,5 @@
 export const common = {
   'app.name': 'Föräldraledigplannerare',
-  'common.cancel': 'Cancel',
-  'common.close': 'Close',
-  'common.delete': 'Delete',
-  'common.deleting': 'Deleting…',
   'common.loading': 'Loading',
   'common.loadingEllipsis': 'Loading…',
   'common.save': 'Save',
diff --git a/frontend/src/i18n/en/dashboard.ts b/frontend/src/i18n/en/dashboard.ts
index 8a670d9..d9321fa 100644
--- a/frontend/src/i18n/en/dashboard.ts
+++ b/frontend/src/i18n/en/dashboard.ts
@@ -12,7 +12,6 @@ export const dashboard = {
   // Still referenced by `Onboarding.tsx`'s balances step; the balance flow
   // is moving to a `balance.*` namespace — drop this key once nothing else
   // reads it.
-  'dashboard.fetchFromFk': 'Fetch from Försäkringskassan',
   'dashboard.figureExpiring': 'Expiring at age 4',
   'dashboard.figureLeft': 'Days left',
   'dashboard.figureUsed': 'Used',
diff --git a/frontend/src/i18n/en/settings.ts b/frontend/src/i18n/en/settings.ts
index 36b8415..f303792 100644
--- a/frontend/src/i18n/en/settings.ts
+++ b/frontend/src/i18n/en/settings.ts
@@ -21,7 +21,6 @@ export const settings = {
   '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.',
@@ -32,6 +31,7 @@ export const settings = {
   'parentBalance.savingButton': 'Saving…',
   'parentBalance.sjukpenningLeftLabel': 'Sjukpenningnivå (income-based tier) left (0-390)',
   'parentBalance.summary': '= {left} of {total} days left',
+  'parentBalance.summaryDubbeldagar': '{count} dubbeldagar left',
   'parentBalance.title': '{name}\'s days left',
   'parentBalance.titleSelf': 'Your days left',
   'parentProfileInput.employed': 'Employed',
@@ -70,7 +70,6 @@ export const settings = {
   'settings.languageEnglishOption': 'English',
   'settings.languageLabel': 'Välj språk / Select language',
   'settings.languageSwedishOption': 'Svenska',
-  'settings.loading': 'Loading settings...',
   'settings.membersLoading': 'Loading members…',
   'settings.noChildSelected': 'No child selected yet.',
   'settings.partnerActionErrorNotFound': 'Could not find the partner. Reload the page and try again.',
@@ -112,15 +111,9 @@ export const settings = {
   'settings.title': 'Settings',
   'settings.vacationHelp': 'Enter vacation days per year. In the first year you are usually home more and have fewer days to spend on vacation, while later years have your full annual allotment. This controls how much time the planner has to work with.',
   'settings.youBadge': '(You)',
-  'vacationDaysList.empty': 'No vacation days registered.',
-  'vacationDaysList.itemDays': '{count} days',
-  'vacationDaysList.loading': 'Loading vacation days…',
-  'vacationDaysList.savedSuffix': '(+{count} saved)',
   'vacationDaysTable.assumedBadge': 'Assumed',
   'vacationDaysTable.assumedPrompt': 'No value is recorded for this year — the statutory 25 days has been assumed. Confirm or edit below.',
   'vacationDaysTable.empty': 'No years to show yet.',
-  'vacationDaysTable.saveButton': 'Save',
   'vacationDaysTable.savedDaysHeader': 'Saved days carried in',
   'vacationDaysTable.vacationDaysHeader': 'Vacation days',
-  'vacationDaysTable.yearHeader': 'Year',
 } as const
diff --git a/frontend/src/i18n/sv/auth.ts b/frontend/src/i18n/sv/auth.ts
index d77ab47..f517bab 100644
--- a/frontend/src/i18n/sv/auth.ts
+++ b/frontend/src/i18n/sv/auth.ts
@@ -4,7 +4,6 @@ export const auth = {
   'auth.emailLabel': 'E-post',
   'auth.emailPlaceholder': 'E-post',
   'auth.genericError': 'Något gick fel',
-  'auth.loadingEllipsis': 'Laddar…',
   'auth.loginButton': 'Logga in',
   'auth.loginTitle': 'Logga in',
   'auth.nameLabel': 'Namn',
diff --git a/frontend/src/i18n/sv/balance.ts b/frontend/src/i18n/sv/balance.ts
index c234517..19fb722 100644
--- a/frontend/src/i18n/sv/balance.ts
+++ b/frontend/src/i18n/sv/balance.ts
@@ -15,7 +15,6 @@ export const balance = {
   'balance.enterManually': 'Ange själv',
   'balance.fetchFromFk': 'Hämta från Försäkringskassan',
   'balance.loading': 'Laddar saldo…',
-  'balance.pickerPrompt': 'Vem gäller det?',
   'balance.sourceDeduced': 'Härlett {date}',
   'balance.sourceManual': 'Angivet manuellt {date}',
   'balance.sourceScraped': 'Från Försäkringskassan {date}',
diff --git a/frontend/src/i18n/sv/calendar.ts b/frontend/src/i18n/sv/calendar.ts
index d83ef54..5fa3169 100644
--- a/frontend/src/i18n/sv/calendar.ts
+++ b/frontend/src/i18n/sv/calendar.ts
@@ -1,15 +1,8 @@
 export const calendar = {
-  'calendar.advanceMonthAria': '{month} - klicka för att byta månad',
-  'calendar.advanceYearAria': '{year} - klicka för att byta år',
   'calendar.selectMonthAria': 'Välj månad',
   'calendar.selectYearAria': 'Välj år',
   'calendar.deleteError': 'Det gick inte att ta bort den planerade dagen',
-  'calendar.loading': 'Laddar kalender...',
   'calendar.nextMonthAria': 'Nästa månad',
-  'calendar.overrideError': 'Det gick inte att uppdatera undantaget',
-  'calendar.overrideModeActiveLabel': 'Avsluta redigering av dagar',
-  'calendar.overrideModeHint': 'Klicka på en dag för att markera den som arbetsdag eller ledig dag. Klicka igen på en markerad dag för att återställa den.',
-  'calendar.overrideModeLabel': 'Markera arbets-/ledig dag',
   'calendar.partner': 'Partner',
   'calendar.prevMonthAria': 'Föregående månad',
   'calendar.saveError': 'Det gick inte att spara de planerade dagarna',
@@ -46,7 +39,6 @@ export const calendar = {
   'plannedDayModal.pinnedNotice': 'Den här dagen är låst av dig — planeraren ändrar den inte automatiskt.',
   'plannedDayModal.excludedNotice': 'Du har tagit bort den här dagen för {parent}.',
   'plannedDayModal.restoreExcludedButton': 'Lägg tillbaka dagen',
-  'plannedDayModal.dayStatusLabel': 'Den här dagen är:',
   'plannedDayModal.rangeTitle': 'Planera {count} dagar',
   'plannedDayModal.parentModeLabel': 'Vem gäller det?',
   'plannedDayModal.wantsDubbeldagLabel': 'Tillåt dubbeldagar',
@@ -75,7 +67,6 @@ export const calendar = {
 
   // §Task7 — the calendar becomes the plan: drag-select, period popover,
   // preset rail, and the sync toast/undo.
-  'calendar.newPeriodName': 'Ny period',
   'calendar.periodCreateError': 'Det gick inte att skapa perioden',
   'calendar.syncError': 'Det gick inte att synka planen',
   'calendar.syncingLabel': 'Synkroniserar…',
@@ -118,7 +109,6 @@ export const calendar = {
   'calendar.presetChipsLabel': 'Lägg till ledighet',
   'calendar.presetWeeksShort': '{count} v',
 
-  'calendar.periodPopoverTitle': 'Redigera period',
   'calendar.periodAdHocTitle': 'Period',
   'calendar.periodAdHocNotice': 'Den här perioden är inte kopplad till en sparad önskan.',
   'calendar.periodNameLabel': 'Namn',
@@ -142,9 +132,7 @@ export const calendar = {
   'calendar.periodLastYearNeedsSeriesHint': 'Välj "Alla år" för att ändra sista året.',
   'calendar.periodSaveButton': 'Spara period',
   'calendar.periodSavingButton': 'Sparar…',
-  'calendar.periodDeleteButton': 'Ta bort period',
   'calendar.periodDeletingButton': 'Tar bort…',
-  'calendar.periodDeleteConfirm': 'Är du säker på att du vill ta bort den här perioden?',
   'calendar.periodDeleteConfirmButton': 'Ja, ta bort',
   'calendar.periodDeleteAdHocButton': 'Ta bort dessa dagar',
   'calendar.periodCancelButton': 'Avbryt',
diff --git a/frontend/src/i18n/sv/common.ts b/frontend/src/i18n/sv/common.ts
index 93e6340..0bde481 100644
--- a/frontend/src/i18n/sv/common.ts
+++ b/frontend/src/i18n/sv/common.ts
@@ -1,9 +1,5 @@
 export const common = {
   'app.name': 'Föräldraledigplannerare',
-  'common.cancel': 'Avbryt',
-  'common.close': 'Stäng',
-  'common.delete': 'Ta bort',
-  'common.deleting': 'Tar bort…',
   'common.loading': 'Laddar',
   'common.loadingEllipsis': 'Laddar…',
   'common.save': 'Spara',
diff --git a/frontend/src/i18n/sv/dashboard.ts b/frontend/src/i18n/sv/dashboard.ts
index 2cdc325..7369dd1 100644
--- a/frontend/src/i18n/sv/dashboard.ts
+++ b/frontend/src/i18n/sv/dashboard.ts
@@ -12,7 +12,6 @@ export const dashboard = {
   // Still referenced by `Onboarding.tsx`'s balances step; the balance flow
   // is moving to a `balance.*` namespace — drop this key once nothing else
   // reads it.
-  'dashboard.fetchFromFk': 'Hämta från Försäkringskassan',
   'dashboard.figureExpiring': 'Förfaller vid 4 år',
   'dashboard.figureLeft': 'Dagar kvar',
   'dashboard.figureUsed': 'Använda',
diff --git a/frontend/src/i18n/sv/settings.ts b/frontend/src/i18n/sv/settings.ts
index 31f8f9d..284363a 100644
--- a/frontend/src/i18n/sv/settings.ts
+++ b/frontend/src/i18n/sv/settings.ts
@@ -21,7 +21,6 @@ export const settings = {
   'parentBalance.dubbeldagarLeftLabel': 'Dubbeldagar kvar (0–60)',
   'parentBalance.invalid': 'Summan (sjukpenningnivå + lägstanivå) kan inte överstiga {total} dagar.',
   'parentBalance.lagstaLeftLabel': 'Lägstanivå kvar (0–90)',
-  'parentBalance.loadingBalance': 'Laddar saldo…',
   'parentBalance.presetButton': 'Inga dagar uttagna',
   'parentBalance.rangeError': 'Ange ett tal mellan {min} och {max}.',
   'parentBalance.reservedExceedsError': 'Reserverade dagar kan inte överstiga sjukpenningnivå + lägstanivå kvar.',
@@ -32,6 +31,7 @@ export const settings = {
   'parentBalance.savingButton': 'Sparar…',
   'parentBalance.sjukpenningLeftLabel': 'Sjukpenningnivå kvar (0–390)',
   'parentBalance.summary': '= {left} av {total} dagar kvar',
+  'parentBalance.summaryDubbeldagar': '{count} dubbeldagar kvar',
   'parentBalance.title': '{name}s dagar kvar',
   'parentBalance.titleSelf': 'Dina dagar kvar',
   'parentProfileInput.employed': 'Anställd',
@@ -70,7 +70,6 @@ export const settings = {
   'settings.languageEnglishOption': 'English',
   'settings.languageLabel': 'Välj språk / Select language',
   'settings.languageSwedishOption': 'Svenska',
-  'settings.loading': 'Laddar inställningar...',
   'settings.membersLoading': 'Laddar medlemmar…',
   'settings.noChildSelected': 'Inget barn valt ännu.',
   'settings.partnerActionErrorNotFound': 'Kunde inte hitta partnern. Ladda om sidan och försök igen.',
@@ -112,15 +111,9 @@ export const settings = {
   'settings.title': 'Inställningar',
   'settings.vacationHelp': 'Ange semesterdagar per år. Det första året är du oftast hemma mer och har färre dagar att lägga på semester, medan kommande år har din fulla årliga tilldelning. Detta styr hur mycket tid planeraren har att arbeta med.',
   'settings.youBadge': '(Du)',
-  'vacationDaysList.empty': 'Inga semesterdagar registrerade.',
-  'vacationDaysList.itemDays': '{count} dagar',
-  'vacationDaysList.loading': 'Laddar semesterdagar…',
-  'vacationDaysList.savedSuffix': '(+{count} sparade)',
   'vacationDaysTable.assumedBadge': 'Antaget',
   'vacationDaysTable.assumedPrompt': 'Inget värde är registrerat för detta år — 25 dagar (lagstadgat) har antagits. Bekräfta eller ändra nedan.',
   'vacationDaysTable.empty': 'Inga år att visa ännu.',
-  'vacationDaysTable.saveButton': 'Spara',
   'vacationDaysTable.savedDaysHeader': 'Sparade dagar in',
   'vacationDaysTable.vacationDaysHeader': 'Semesterdagar',
-  'vacationDaysTable.yearHeader': 'År',
 } as const
\ No newline at end of file
diff --git a/frontend/src/pages/Auth.tsx b/frontend/src/pages/Auth.tsx
index 2ca967a..09939fb 100644
--- a/frontend/src/pages/Auth.tsx
+++ b/frontend/src/pages/Auth.tsx
@@ -3,6 +3,7 @@ import { useNavigate } from 'react-router-dom'
 import { useAuth } from '@/context/AuthContext'
 import { useWorkspace } from '@/context/WorkspaceContext'
 import { useTranslation } from '@/i18n'
+import { LanguageToggle } from '@/components/layout/LanguageToggle'
 import './auth.css'
 
 export function Auth() {
@@ -48,12 +49,16 @@ export function Auth() {
 
   return (
     <main className="auth-page">
-      <div className="auth-page__card card">
-        <p className="eyebrow auth-page__brand">{t('app.name')}</p>
-        <div className="auth-page__tabs">
+      <div className="auth-page__lang">
+        <LanguageToggle />
+      </div>
+      <div className="auth-page__column">
+        <img className="auth-page__mark" src="/img/icon-64.png" alt="" width={32} height={32} />
+        <h1 className="auth-page__title">{isRegister ? t('auth.createAccountTitle') : t('auth.loginTitle')}</h1>
+        <div className="segmented auth-page__tabs" role="group">
           <button
             type="button"
-            className="btn btn--ghost auth-page__tab"
+            className="segmented__option auth-page__tab"
             aria-pressed={!isRegister}
             onClick={() => switchTab(false)}
             data-testid="auth-tab-login"
@@ -62,7 +67,7 @@ export function Auth() {
           </button>
           <button
             type="button"
-            className="btn btn--ghost auth-page__tab"
+            className="segmented__option auth-page__tab"
             aria-pressed={isRegister}
             onClick={() => switchTab(true)}
             data-testid="auth-tab-register"
@@ -70,7 +75,6 @@ export function Auth() {
             {t('auth.createAccountButton')}
           </button>
         </div>
-        <h1 className="auth-page__title">{isRegister ? t('auth.createAccountTitle') : t('auth.loginTitle')}</h1>
         <form className="auth-page__form" onSubmit={(e) => void handleSubmit(e)}>
           {isRegister && (
             <div className="field">
@@ -115,7 +119,7 @@ export function Auth() {
             />
           </div>
           {error && (
-            <p role="alert" className="alert alert--error">
+            <p role="alert" className="auth-page__error">
               {error}
             </p>
           )}
diff --git a/frontend/src/pages/auth.css b/frontend/src/pages/auth.css
index 70a6764..93fc834 100644
--- a/frontend/src/pages/auth.css
+++ b/frontend/src/pages/auth.css
@@ -1,8 +1,9 @@
 /* Login/register — the app's front door, rendered outside <Layout> (no
- * header yet, there's no session). Previously a bare, unstyled <main> that
- * relied entirely on the global element resets; this gives it the same
- * centered-card treatment as the onboarding wizard it leads into. */
+ * header yet, there's no session). A plain centred column, not a card on
+ * grey: the page background carries straight through, matching the rest
+ * of the almanac's whitespace-over-boxes language. */
 .auth-page {
+  position: relative;
   min-height: 100vh;
   display: flex;
   align-items: center;
@@ -10,49 +11,56 @@
   padding: var(--sp-5);
 }
 
-.auth-page__card {
-  width: 100%;
-  max-width: 380px;
+.auth-page__lang {
+  position: absolute;
+  top: var(--sp-5);
+  right: var(--sp-5);
 }
 
-.auth-page__brand {
-  margin: 0 0 var(--sp-4) 0;
-  font-size: var(--fs-sm);
+.auth-page__column {
+  width: 100%;
+  max-width: 380px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.auth-page__mark {
+  width: 32px;
+  height: 32px;
+  border-radius: 8px;
+  margin-bottom: var(--sp-4);
+}
+
+.auth-page__title {
+  font-size: var(--fs-xl);
   text-align: center;
+  margin: 0 0 var(--sp-5) 0;
 }
 
 .auth-page__tabs {
   display: flex;
-  gap: var(--sp-2);
-  margin-bottom: var(--sp-4);
+  width: 100%;
+  margin-bottom: var(--sp-5);
 }
 
 .auth-page__tab {
   flex: 1;
-  justify-content: center;
-}
-
-/* Active tab — same "selected" formula as `.choice-card[aria-checked='true']`
- * in primitives.css (accent-weak fill, accent text) so a pressed tab reads
- * as "this is the current mode" without inventing another color pairing. */
-.auth-page__tab[aria-pressed='true'] {
-  background-color: var(--c-accent-weak);
-  color: var(--c-accent);
-}
-
-.auth-page__title {
-  text-align: center;
-  margin-bottom: var(--sp-5);
 }
 
 .auth-page__form {
+  align-self: stretch;
   display: flex;
   flex-direction: column;
   gap: var(--sp-3);
-  margin-bottom: var(--sp-4);
 }
 
 .auth-page__form button[type='submit'] {
   margin-top: var(--sp-2);
 }
 
+.auth-page__error {
+  margin: 0;
+  font-size: var(--fs-sm);
+  color: var(--c-danger);
+}
diff --git a/frontend/src/styles/components.css b/frontend/src/styles/components.css
index c638ef1..2def8d3 100644
--- a/frontend/src/styles/components.css
+++ b/frontend/src/styles/components.css
@@ -635,134 +635,10 @@
   min-height: 100px;
 }
 
-/* Input Grid */
-.form-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-  gap: var(--sp-4);
-}
-
-.form-grid .form-group {
-  margin-bottom: 0;
-}
-
-.form-grid .form-group input,
-.form-grid .form-group select {
-  max-width: none;
-}
-
 .settings-page > .alert {
   margin-bottom: var(--sp-4);
 }
 
-.settings-page__help {
-  font-size: var(--fs-sm);
-  color: var(--c-text-muted);
-  margin: 0 0 var(--sp-4) 0;
-  max-width: 60ch;
-}
-
-.settings-page__field {
-  margin-bottom: var(--sp-4);
-}
-
-.settings-page__label {
-  font-size: var(--fs-base);
-}
-
-.settings-page__select {
-  max-width: 320px;
-}
-
-.settings-page__checkbox-label {
-  display: flex;
-  align-items: center;
-  gap: var(--sp-2);
-  cursor: pointer;
-}
-
-.settings-page__partner-row {
-  display: flex;
-  gap: var(--sp-3);
-}
-
-/* Box/border/focus chrome comes from `.field__control` in primitives.css —
- * this only adds the flex sizing `.field__control`'s own rule doesn't know
- * about (it sits in an inline row next to a button, not a stacked `.field`). */
-.settings-page__partner-input {
-  flex: 1;
-}
-
-.settings-page__member-list {
-  list-style: none;
-  margin: 0 0 var(--sp-4) 0;
-  padding: 0;
-  display: flex;
-  flex-direction: column;
-  gap: var(--sp-2);
-}
-
-.settings-page__member-row {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: var(--sp-3);
-  padding: var(--sp-2) 0;
-}
-
-.settings-page__remove-confirm {
-  display: flex;
-  align-items: center;
-  gap: var(--sp-2);
-  color: var(--c-danger);
-  font-size: var(--fs-sm);
-}
-
-/* Vacation Days Table (multi-year) */
-.vacation-days-table {
-  width: 100%;
-  border-collapse: collapse;
-  margin: 0 0 var(--sp-4) 0;
-}
-
-.vacation-days-table th {
-  padding: var(--sp-3) var(--sp-4);
-  background-color: var(--c-bg);
-  border-bottom: 2px solid var(--c-border);
-  font-weight: 600;
-  color: var(--c-text-muted);
-  text-align: left;
-  font-size: var(--fs-sm);
-}
-
-.vacation-days-table td {
-  padding: var(--sp-3) var(--sp-4);
-  border-bottom: 1px solid var(--c-border);
-  font-size: var(--fs-base);
-}
-
-.vacation-days-table tbody tr:last-child td {
-  border-bottom: none;
-}
-
-.vacation-days-table__year {
-  font-weight: 600;
-}
-
-.vacation-days-table__assumed-badge {
-  margin-left: var(--sp-2);
-  cursor: help;
-}
-
-.vacation-days-table__input {
-  width: 90px;
-}
-
-.vacation-days-table__empty {
-  color: var(--c-text-muted);
-  font-size: var(--fs-sm);
-}
-
 /* Fieldsets */
 fieldset {
   border: 1px solid var(--c-border);
@@ -812,247 +688,3 @@ legend {
   color: var(--c-text-muted);
   margin-top: var(--sp-2);
 }
-
-/* Day Overrides Input */
-.day-overrides-input {
-  margin-bottom: var(--sp-5);
-}
-
-.day-overrides-input__empty {
-  padding: var(--sp-5);
-  background-color: var(--c-bg);
-  border-radius: var(--radius);
-  border: 1px solid var(--c-border);
-  color: var(--c-text-muted);
-  text-align: center;
-  margin-bottom: var(--sp-5);
-}
-
-.day-overrides-input__empty p {
-  margin: 0;
-}
-
-.day-overrides-input__list {
-  margin-bottom: var(--sp-5);
-}
-
-.day-overrides-input__items {
-  list-style: none;
-  padding: 0;
-  margin: 0;
-  display: flex;
-  flex-direction: column;
-  gap: var(--sp-3);
-}
-
-.day-overrides-input__item {
-  padding: var(--sp-4);
-  background-color: var(--c-bg);
-  border: 1px solid var(--c-border);
-  border-radius: var(--radius);
-}
-
-.day-overrides-input__item-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  gap: var(--sp-3);
-  margin-bottom: var(--sp-3);
-}
-
-.day-overrides-input__item-date {
-  flex: 0 0 auto;
-  font-weight: 500;
-}
-
-.day-overrides-input__item-date strong {
-  color: var(--c-text);
-}
-
-.day-overrides-input__item-status {
-  flex: 1;
-  text-align: right;
-}
-
-.day-overrides-input__status {
-  display: inline-block;
-  padding: var(--sp-2) var(--sp-3);
-  border-radius: var(--radius);
-  font-size: var(--fs-sm);
-  font-weight: 500;
-}
-
-.day-overrides-input__status--working {
-  background-color: var(--c-warning-weak);
-  color: var(--c-warning);
-}
-
-.day-overrides-input__status--off {
-  background-color: var(--c-success-weak);
-  color: var(--c-success);
-}
-
-.day-overrides-input__item-note {
-  font-size: var(--fs-sm);
-  color: var(--c-text-muted);
-  margin-bottom: var(--sp-3);
-}
-
-/* Plain section, not a bordered card — matches the rest of Settings (see
- * layout.css's "sections separate by whitespace and a hairline rule, not a
- * stack of bordered/shadowed cards" comment). Only a top hairline separates
- * it from the list of existing exceptions above. */
-.day-overrides-input__form {
-  padding-top: var(--sp-4);
-  border-top: 1px solid var(--c-border);
-}
-
-.day-overrides-input__form h3 {
-  margin: 0 0 var(--sp-4) 0;
-  font-size: var(--fs-lg);
-  color: var(--c-text);
-}
-
-.day-overrides-input__form-group {
-  max-width: 400px;
-  margin-bottom: var(--sp-4);
-}
-
-.day-overrides-input__radio-group {
-  border: none;
-  padding: 0;
-  margin: 0;
-}
-
-.day-overrides-input__radio-group legend {
-  padding: 0;
-  margin: 0 0 var(--sp-2) 0;
-}
-
-.day-overrides-input__radio-label {
-  display: flex;
-  align-items: center;
-  gap: var(--sp-2);
-  margin-bottom: var(--sp-2);
-  cursor: pointer;
-}
-
-.day-overrides-input__radio-label:last-child {
-  margin-bottom: 0;
-}
-
-.day-overrides-input__radio-label input[type='radio'] {
-  width: auto;
-  margin: 0;
-}
-
-.day-overrides-input__char-count {
-  display: block;
-  margin-top: var(--sp-1);
-  font-size: var(--fs-sm);
-  color: var(--c-text-muted);
-}
-
-
-/* Red Days List (§3.8 — statutory red days + workspace overrides, per year) */
-.red-days-list__pagination {
-  display: flex;
-  align-items: center;
-  gap: var(--sp-3);
-  margin-bottom: var(--sp-4);
-}
-
-.red-days-list__range {
-  font-weight: 600;
-}
-
-.red-days-list__year {
-  margin-bottom: var(--sp-5);
-}
-
-.red-days-list__year-title {
-  font-size: var(--fs-lg);
-  margin: 0 0 var(--sp-2) 0;
-}
-
-.red-days-list__empty {
-  color: var(--c-text-muted);
-  font-size: var(--fs-sm);
-}
-
-.red-days-list__items {
-  list-style: none;
-  padding: 0;
-  margin: 0;
-}
-
-.red-days-list__item {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: var(--sp-3);
-  padding: var(--sp-2) 0;
-  border-bottom: 1px solid var(--c-border);
-  font-size: var(--fs-sm);
-}
-
-.red-days-list__date {
-  font-weight: 600;
-  min-width: 160px;
-}
-
-.red-days-list__name {
-  color: var(--c-text);
-}
-
-/* `.red-days-list__effective` is a real `<button>` — clicking it toggles
- * that one absolute date between its statutory value and the opposite
- * override (§Task8). Sized by its own (bilingual) content, not a fixed
- * width, since the Swedish labels run longer than the English ones. */
-.red-days-list__effective {
-  margin-left: auto;
-  font-size: var(--fs-sm);
-  font-weight: 500;
-  color: var(--c-text-muted);
-  background-color: var(--c-bg);
-  border: 1px solid var(--c-border);
-  border-radius: var(--radius-full);
-  padding: 2px var(--sp-3);
-  cursor: pointer;
-  white-space: nowrap;
-  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
-}
-
-.red-days-list__effective:hover:not(:disabled) {
-  background-color: var(--c-accent-weak);
-  border-color: var(--c-accent);
-  color: var(--c-text);
-}
-
-.red-days-list__effective:focus-visible {
-  outline: 2px solid var(--c-accent);
-  outline-offset: 2px;
-}
-
-.red-days-list__effective:disabled {
-  opacity: 0.55;
-  cursor: not-allowed;
-}
-
-.red-days-list__effective--working {
-  background-color: var(--c-danger-weak);
-  color: var(--c-danger);
-  border-color: var(--c-danger-weak);
-}
-
-.red-days-list__loading,
-.red-days-list__error,
-.red-days-list__toggle-error {
-  color: var(--c-text-muted);
-  font-size: var(--fs-sm);
-}
-
-.red-days-list__toggle-error {
-  color: var(--c-danger);
-  margin: var(--sp-2) 0 0;
-}
diff --git a/frontend/src/styles/responsive.css b/frontend/src/styles/responsive.css
index 470d807..572d28c 100644
--- a/frontend/src/styles/responsive.css
+++ b/frontend/src/styles/responsive.css
@@ -84,25 +84,6 @@
     max-width: none;
   }
 
-  .form-grid {
-    grid-template-columns: 1fr;
-  }
-
-  .form-grid .form-group input,
-  .form-grid .form-group select {
-    max-width: none;
-  }
-
-  /* Tables */
-  .vacation-days-table {
-    font-size: var(--fs-sm);
-  }
-
-  .vacation-days-table th,
-  .vacation-days-table td {
-    padding: var(--sp-2) var(--sp-3);
-  }
-
   /* Dashboard — the three key figures tighten; a year row keeps year +
    * track on the first line and wraps the per-parent figures under the
    * track, each parent on its own line. */
@@ -143,10 +124,6 @@
     width: 100%;
   }
 
-  .vacation-days-table__input {
-    width: 70px;
-  }
-
   /* Modals — the overlay already gutters the content with its own padding
    * and `.modal__content`'s `width: min(100%, var(--modal-w))` already caps
    * it to the viewport, so only the footer's button stacking needs a
@@ -228,10 +205,6 @@
 
 /* Tablet - Medium screens (641px to 1024px) */
 @media (min-width: 641px) and (max-width: 1024px) {
-  .form-grid {
-    grid-template-columns: repeat(2, 1fr);
-  }
-
   .layout__main {
     padding: var(--sp-6) var(--sp-5);
   }
diff --git a/frontend/src/utils/leaveTypes.test.ts b/frontend/src/utils/leaveTypes.test.ts
index 2b32046..bf97508 100644
--- a/frontend/src/utils/leaveTypes.test.ts
+++ b/frontend/src/utils/leaveTypes.test.ts
@@ -1,5 +1,5 @@
 import { describe, it, expect } from 'vitest'
-import { getColorForType, getInkForType, getLabelForType, getTypeKey, getTypeModifier } from './leaveTypes'
+import { getColorForType, getInkForType, getLabelForType, getTypeKey } from './leaveTypes'
 import { translate } from '@/i18n'
 
 describe('getColorForType', () => {
@@ -44,18 +44,6 @@ describe('getTypeKey', () => {
   })
 })
 
-describe('getTypeModifier', () => {
-  it('returns a type-* modifier suffix for each known type', () => {
-    expect(getTypeModifier('vacation')).toBe('type-vacation')
-    expect(getTypeModifier('sjukpenning')).toBe('type-sjukpenning')
-    expect(getTypeModifier('lagsta')).toBe('type-lagsta')
-  })
-
-  it('returns type-unknown for an unknown type', () => {
-    expect(getTypeModifier('something-else')).toBe('type-unknown')
-  })
-})
-
 describe('getLabelForType', () => {
   const t = (key: Parameters<typeof translate>[1]) => translate('sv', key)
 
diff --git a/frontend/src/utils/leaveTypes.ts b/frontend/src/utils/leaveTypes.ts
index bfa9768..2e22b38 100644
--- a/frontend/src/utils/leaveTypes.ts
+++ b/frontend/src/utils/leaveTypes.ts
@@ -36,15 +36,6 @@ export function getTypeKey(type: string): LeaveTypeKey {
   return isKnownType(type) ? type : 'unknown'
 }
 
-/**
- * The older `type-*` prefixed modifier, still used by the dashboard's year
- * timeline (`year-timeline__band--type-lagsta`); the calendar has moved to
- * `getTypeKey`.
- */
-export function getTypeModifier(type: string): string {
-  return `type-${getTypeKey(type)}`
-}
-
 /**
  * Localized label for a leave-day type. Takes `t` rather than importing
  * `useTranslation` itself — this is a plain utility function (not a