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/components/dashboard/KeyFigures.tsx

@@ -0,0 +1,37 @@
+import { ReactNode } from 'react'
+import { useTranslation } from '@/i18n'
+
+export interface KeyFiguresProps {
+  /** `combinedDaysLeft` — days still available to plan, all parents. */
+  daysLeft: number
+  /** `combinedDaysUsed`. */
+  daysUsed: number
+  /** `combinedExpiringAtB4` — projected to be lost at the 4th birthday. */
+  expiringAtB4: number
+}
+
+/**
+ * The three headline figures under the hero — large tabular numerals with
+ * a 14px label each, no tiles. The expiring figure wears danger ink only
+ * when it is non-zero: a zero is good news and should read as quiet.
+ */
+export function KeyFigures({ daysLeft, daysUsed, expiringAtB4 }: KeyFiguresProps): ReactNode {
+  const { t } = useTranslation()
+  const figures = [
+    { key: 'left', label: t('dashboard.figureLeft'), value: daysLeft, danger: false },
+    { key: 'used', label: t('dashboard.figureUsed'), value: daysUsed, danger: false },
+    { key: 'expiring', label: t('dashboard.figureExpiring'), value: expiringAtB4, danger: expiringAtB4 > 0 },
+  ]
+  return (
+    <dl className="key-figures" data-testid="key-figures">
+      {figures.map((figure) => (
+        <div key={figure.key} className="key-figures__item" data-testid={`dashboard-figure-${figure.key}`}>
+          <dt className="key-figures__label">{figure.label}</dt>
+          <dd className={figure.danger ? 'key-figures__value key-figures__value--danger' : 'key-figures__value'}>
+            {figure.value}
+          </dd>
+        </div>
+      ))}
+    </dl>
+  )
+}