Make the overview answer the year-by-year question

The dashboard now leads with a typographic headline, three key
figures, per-parent age-4 bars and one row per year until the fourth
birthday. Each year row shows the timeline bands beside each parent's
parental-leave days left at year end and vacation days left, carried
over or expiring, and opens into a per-parent table with that year's
wish outcomes. Tips become a plain list and absorb the planner's
surplus advice; "Detaljer" keeps the metrics and a balance snapshot
for every parent. The separate plan-proposal fold and the
type-count table are gone.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01XBRLomdLK9jF7wU7a8AA6H

frontend/src/styles/global.css

@@ -77,6 +77,9 @@
   /* Leave types: fill / ink / outline */
   --c-leave-vacation: #eef2fe;
   --c-leave-vacation-ink: #2f5bea;
+  /* Stronger vacation step for thin (8px) timeline tracks only — the tint
+   * above vanishes on white at that height. Calendar bands keep the tint. */
+  --c-leave-vacation-bar: #b9c9f7;
   --c-leave-sjukpenning: #2a2d35;
   --c-leave-sjukpenning-ink: #fff;
   --c-leave-lagsta: #fff;

frontend/src/styles/responsive.css

@@ -74,12 +74,6 @@
     margin-bottom: var(--sp-4);
   }
 
-  /* Metrics - single column */
-  .overview-metrics__list,
-  [data-testid='metrics-list'] {
-    grid-template-columns: 1fr;
-  }
-
   /* Forms - full width */
   .form-group input,
   .form-group select,
@@ -100,21 +94,55 @@
   }
 
   /* Tables */
-  .days-breakdown__table,
-  .parental-leave-breakdown__table,
   .vacation-days-table {
     font-size: var(--fs-sm);
   }
 
-  .days-breakdown__table th,
-  .days-breakdown__table td,
-  .parental-leave-breakdown__table th,
-  .parental-leave-breakdown__table td,
   .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. */
+  .key-figures {
+    gap: var(--sp-4) var(--sp-6);
+  }
+
+  .year-row__summary {
+    grid-template-columns: 3rem minmax(0, 1fr) var(--icon-sm);
+  }
+
+  .year-row__summary::after {
+    grid-column: 3;
+  }
+
+  .year-row__figures {
+    grid-row: 2;
+    grid-column: 2 / -1;
+    display: flex;
+    flex-direction: column;
+    gap: var(--sp-1);
+    white-space: normal;
+  }
+
+  .year-row__parent {
+    display: flex;
+    flex-wrap: wrap;
+    column-gap: var(--sp-3);
+    row-gap: 0;
+  }
+
+  .year-row__body {
+    padding-left: 0;
+  }
+
+  .year-row__table,
+  .parental-leave-breakdown__table {
+    width: 100%;
+  }
+
   .vacation-days-table__input {
     width: 70px;
   }
@@ -154,13 +182,6 @@
     order: -10;
   }
 
-  /* Lists */
-  .dashboard__break-item {
-    flex-direction: column;
-    align-items: flex-start;
-    gap: var(--sp-2);
-  }
-
   /* Loading spinner */
   .loading-spinner {
     padding: var(--sp-5);
@@ -207,10 +228,6 @@
 
 /* Tablet - Medium screens (641px to 1024px) */
 @media (min-width: 641px) and (max-width: 1024px) {
-  .overview-metrics__list {
-    grid-template-columns: repeat(2, 1fr);
-  }
-
   .form-grid {
     grid-template-columns: repeat(2, 1fr);
   }