Lead the overview with the days about to be lost

The page opened with generic tiles and a bar reading forty-eight of ninety-six
weeks, which was neither weeks nor connected to the age-four ceiling it appeared
to describe. It is replaced by one headline and a bar per parent, in days,
against each parent's own savable limit as the server reports it.

The headline has two framings on the same arithmetic. Before anything is
planned it says what there is to plan and what will be lost without a plan,
because on the first day almost the whole entitlement is technically at risk
and saying so bluntly reads as an accusation. Once a plan exists it warns about
the days genuinely at stake.

A timeline of the years to the fourth birthday answers what the next four years
look like, which a month-at-a-time calendar cannot. Shortfalls, surplus advice
and balances sit below the fold, read-only: applying is automatic now, so a
second apply button would be a way to get two different answers.

Rejection messages move to one shared place that resolves a parent's name, so
an identifier can no longer surface in their place.

frontend/src/styles/components.css

@@ -157,55 +157,141 @@
   color: var(--c-text-muted);
 }
 
-/* Progress Chart */
-.progress-chart {
+/* Hero */
+.dashboard-hero {
+  padding: var(--sp-5);
+  border-radius: var(--radius);
+  border-left: 4px solid var(--c-accent);
+  background-color: var(--c-accent-weak);
+}
+
+.dashboard-hero--warning {
+  border-left-color: var(--c-warning);
+  background-color: var(--c-danger-weak);
+}
+
+.dashboard-hero__message {
+  margin: 0;
+  font-size: var(--fs-xl);
+  font-weight: 600;
+  color: var(--c-text);
+}
+
+/* Age4 Bars (per-parent days left at the 4th birthday) */
+.age4-bars {
   display: flex;
   flex-direction: column;
   gap: var(--sp-4);
 }
 
-.progress-chart__header {
+.age4-bars__row {
   display: flex;
-  justify-content: space-between;
-  align-items: baseline;
-  margin: 0 0 var(--sp-3) 0;
+  flex-direction: column;
+  gap: var(--sp-2);
 }
 
-.progress-chart__header h3 {
-  margin: 0;
+.age4-bars__label {
+  font-weight: 600;
 }
 
-.progress-chart__age {
-  font-size: var(--fs-sm);
-  color: var(--c-text-muted);
-}
-
-.progress-chart__bar {
+.age4-bars__track {
   width: 100%;
-  height: 24px;
+  height: 20px;
   background-color: var(--c-bg);
   border-radius: var(--radius);
   overflow: hidden;
   border: 1px solid var(--c-border);
 }
 
-.progress-chart__fill {
+.age4-bars__fill {
   height: 100%;
   background-color: var(--c-accent);
   transition: width 0.3s ease;
 }
 
-.progress-chart__stats {
+.age4-bars__stats {
   display: flex;
   justify-content: space-between;
-  align-items: center;
   font-size: var(--fs-sm);
   color: var(--c-text-muted);
 }
 
-.progress-chart__percentage {
+.age4-bars__expiring {
+  color: var(--c-danger);
   font-weight: 600;
-  color: var(--c-accent);
+}
+
+/* Year Timeline */
+.year-timeline {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sp-3);
+}
+
+.year-timeline__row {
+  display: flex;
+  align-items: center;
+  gap: var(--sp-3);
+}
+
+.year-timeline__year-label {
+  width: 3rem;
+  flex-shrink: 0;
+  font-weight: 600;
+  color: var(--c-text-muted);
+}
+
+.year-timeline__track {
+  position: relative;
+  flex: 1;
+  height: 28px;
+  background-color: var(--c-bg);
+  border-radius: var(--radius);
+  border: 1px solid var(--c-border);
+  overflow: hidden;
+}
+
+.year-timeline__band {
+  position: absolute;
+  top: 0;
+  height: 100%;
+  min-width: 2px;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+}
+
+.year-timeline__band:hover,
+.year-timeline__band:focus-visible {
+  outline: 2px solid var(--c-text);
+  outline-offset: -2px;
+}
+
+/* Plan Fold (collapsed plan-proposal summary) */
+.plan-fold,
+.dashboard__more-details {
+  border: 1px solid var(--c-border);
+  border-radius: var(--radius);
+  padding: var(--sp-4);
+  background-color: var(--c-surface);
+}
+
+.plan-fold__summary,
+.dashboard__more-details summary {
+  cursor: pointer;
+  font-weight: 600;
+}
+
+.plan-fold__section {
+  margin-top: var(--sp-4);
+}
+
+.plan-fold__error {
+  color: var(--c-danger);
+}
+
+.plan-fold__success {
+  color: var(--c-success);
 }
 
 /* Button Styles */