/* Cijfers: overzicht, reis naar het doel, schema, doelen en week, route, weekreview, resultaten, niveau
   Bouwt op core.css: tegels, panelen, stats, tabellen, ring, sparkline, trechter, plan-state en schedule-chip staan
   daar. Hier alleen wat bij deze pagina's en hun partials hoort. Klassen die ook op Vandaag bestaan (plan-stats)
   staan onder [data-section="cijfers"], zodat ze Vandaag niet raken. De grafiek plan tegen werkelijk en het eindpunt
   van de sparkline worden ook door Werk en Klanten gebruikt en staan in core.css. */

/* ---------- Overzicht ---------- */
.pipeline-tile .funnel { margin-top: 4px; }
/* op de iPhone geldt de tweeregelige trechter uit core, anders blijft er rechts een lege kolom staan */
@media (min-width: 621px) { .pipeline-tile .funnel-step { grid-template-columns: minmax(84px, auto) minmax(0, 1fr) 44px; } }
.pipeline-tile .funnel-bar { max-width: calc(100% - 36px); transform-origin: left center; animation: bar-grow .6s var(--ease) both; }
.pipeline-cover { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--hairline-light); font-size: 14px; color: var(--mute); }

/* Omzet per maand: dit jaar naast vorig jaar, met het bedrag als label bij aanwijzen */
.revenue-legend { display: flex; gap: 16px; }
.revenue-scroll { position: relative; overflow-x: auto; margin-top: 8px; padding-top: 32px; } /* ruimte voor het label boven de hoogste staaf */
.revenue-chart { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 8px; min-width: 640px; }
.revenue-chart .bar { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.revenue-chart .bar-track { position: relative; display: flex; align-items: flex-end; justify-content: center; gap: 4px; width: 100%; height: 200px; margin-bottom: 8px; border-bottom: 1px solid var(--hairline-light); }
.revenue-chart .bar-fill { position: relative; width: 34%; max-width: 28px; min-height: 2px; border-radius: var(--r-xs) var(--r-xs) 0 0; background: var(--primary); }
.revenue-chart .bar-fill.prev { background: var(--faint); }
.revenue-chart .bar-fill::after {
  content: attr(data-tip); position: absolute; bottom: calc(100% + 8px); left: 50%; z-index: 2;
  padding: 4px 12px; border-radius: var(--r-full); background: var(--ink); color: var(--on-dark);
  font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap;
  opacity: 0; transform: translate(-50%, 4px); pointer-events: none; transition: opacity .15s var(--ease), transform .15s var(--ease);
}
.revenue-chart .bar-fill:hover::after { opacity: 1; transform: translate(-50%, 0); }
/* aan de randen het label naar binnen uitlijnen, anders valt het buiten beeld */
.revenue-chart .bar:nth-child(-n+2) .bar-fill::after { left: 0; transform: translate(0, 4px); }
.revenue-chart .bar:nth-child(-n+2) .bar-fill:hover::after { transform: none; }
.revenue-chart .bar:nth-last-child(-n+2) .bar-fill::after { left: auto; right: 0; transform: translate(0, 4px); }
.revenue-chart .bar:nth-last-child(-n+2) .bar-fill:hover::after { transform: none; }
/* z-index op de staaf zelf: de filter maakt er een eigen laag van, anders tekent de staaf ernaast over het label heen */
.revenue-chart .bar-fill:hover { filter: brightness(.92); z-index: 3; }
.revenue-chart .bar-label { font-size: 14px; color: var(--mute); }
.revenue-chart .bar-value { margin-top: 4px; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ink); }
.revenue-chart .bar-value.prev { font-weight: 400; color: var(--mute); }
.revenue-chart .trend { font-size: 14px; }
/* Op de iPhone schuift de grafiek horizontaal (anders lopen de bedragen in elkaar). Het script in overview.html zet hem
   bij het laden op de huidige maand; de vervaagde linkerrand laat zien dat er eerdere maanden zijn. */
@media (max-width: 760px) {
  .revenue-chart { min-width: 840px; padding-left: 16px; }
  .revenue-scroll { -webkit-mask-image: linear-gradient(to right, transparent, #000 24px); mask-image: linear-gradient(to right, transparent, #000 24px); }
}
@media (min-width: 761px) and (max-width: 1100px) { .revenue-side { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.paid-title { display: flex; align-items: center; gap: 12px; }
.paid-title .check-mark { width: 32px; height: 32px; }
.paid-title .check-mark svg { width: 16px; height: 16px; }
.fee-rows li { padding: 8px 0; }

/* Kanalen: per bron een balk met leads, gesprek+ en klant */
.channel-rows { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 16px; }
/* Naam en cijfers op één regel als het past; anders schuiven de cijfers rechts naar een eigen regel. De pil breekt nooit. */
.channel-rows li { display: flex; flex-wrap: wrap; align-items: center; align-content: flex-start; gap: 8px 12px; }
.channel-name { max-width: 100%; }
.channel-nums { margin-left: auto; font-size: 14px; }
.channel-track { flex: 1 0 100%; position: relative; height: 12px; border-radius: var(--r-full); background: var(--surface-soft); overflow: hidden; }
.channel-fill { position: absolute; left: 0; top: 0; height: 100%; border-radius: var(--r-full); background: var(--faint); }
.channel-fill.talks { background: var(--primary); }
.channel-fill.won { background: var(--accent-teal); }
/* Herkomst van een klant (top klanten) */
.source-chip { display: inline-flex; align-items: center; min-height: 24px; padding: 4px 8px; border-radius: var(--r-full); background: var(--surface-card); border: 1px solid var(--hairline-light); color: var(--charcoal); font: 600 13px/1.2 var(--font-body); white-space: nowrap; }
.source-chip[data-source^="linkedin"] { background: var(--tint-cobalt); border-color: transparent; color: var(--primary); }
.source-chip[data-source="website"], .source-chip[data-source="referral"], .source-chip[data-source="upsell"] { background: var(--tint-teal); border-color: transparent; color: var(--accent-teal); }

/* Momentum (_momentum.html): vier weken per meting, in één kolom naast Kanalen. Per meting twee regels:
   naam en balkjes, dan het cijfer van deze week en het verschil met vorige week. */
.momentum-rows { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 12px; }
.momentum-rows li { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label bars" "now delta"; gap: 4px 12px; align-items: center; padding-bottom: 12px; border-bottom: 1px solid var(--hairline-light); }
.momentum-rows li:last-child { padding-bottom: 0; border-bottom: 0; }
.momentum-label { grid-area: label; font-weight: 500; }
.momentum-bars { grid-area: bars; justify-self: end; display: flex; align-items: flex-end; gap: 4px; width: 96px; height: 36px; }
.momentum-bar { flex: 1; height: 100%; display: flex; align-items: flex-end; border-radius: var(--r-xs); background: var(--surface-soft); }
.momentum-bar i { display: block; width: 100%; min-height: 3px; border-radius: var(--r-xs); background: var(--faint); }
.momentum-bar.current i { background: var(--primary); }
.momentum-now { grid-area: now; }
.momentum-now strong { font: 500 24px/1 var(--font-display); }
.momentum-delta { grid-area: delta; justify-self: end; font-size: 14px; white-space: nowrap; }
/* Kanalen naast Momentum: de rijen in twee kolommen, zodat beide tegels even hoog zijn */
@media (min-width: 761px) { .channels.span-2 .channel-rows { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; } }
/* tussen 761 en 1100 breed is .span-2 de hele rij; Momentum dan ook, anders staat hij alleen in een halve rij */
@media (min-width: 761px) and (max-width: 1100px) { .momentum-channels > .momentum { grid-column: 1 / -1; } }

.bento.align-start { align-items: start; }

/* Meer tonen en de voet */
.more-bento { margin-bottom: 0; }
.top-customers li { align-items: center; }
.top-name { display: grid; gap: 8px; flex: 1; min-width: 0; }
.top-customers .num { text-align: right; }
.cijfers-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--hairline-light); font-size: 15px; color: var(--mute); }
.cijfers-foot a { color: var(--ink); font-weight: 500; }
/* Moneybird bijwerken rechts in de paginakop */
.mb-sync { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0; font-size: 15px; color: var(--mute); }
.mb-sync .live { color: var(--ink); }
.revenue-tile .notice-line { align-items: flex-start; margin: 0; }
.revenue-tile .notice-line .status-dot { margin-top: 8px; }

/* ---------- Reis naar het jaardoel (_journey.html) ---------- */
.journey { margin-bottom: 16px; padding: 24px 32px; border: 1px solid var(--hairline-light); border-radius: var(--r-xl); background: var(--surface-card); color: var(--ink); }
.journey-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: 24px 48px; align-items: start; }
.journey-total { margin: 4px 0 8px; font: 500 40px/1 var(--font-display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; } /* na font: de shorthand zet de cijfers terug */
.schedule-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 8px; }
.journey-sub { max-width: 56ch; color: var(--mute); font-size: 16px; line-height: 1.5; }
.journey-sub strong { color: var(--ink); font-weight: 600; }
.win-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.win { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 8px 12px; border-radius: var(--r-md); background: var(--tint-teal); }
.win a { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); text-decoration: none; font-weight: 500; }
.win a:hover { text-decoration: underline; }
.win .num { font-weight: 600; color: var(--ink); }
.win-date { font-size: 14px; color: var(--mute); white-space: nowrap; }
.win-star { width: 18px; height: 18px; fill: var(--accent-teal); }
.win-empty, .win-more { margin: 8px 0 0; color: var(--mute); font-size: 15px; }
.journey-bar { position: relative; height: 14px; margin: 24px 0 0; border-radius: var(--r-full); background: var(--surface-soft); }
.journey-seg { position: absolute; top: 0; bottom: 0; left: 0; transform-origin: left center; animation: bar-grow .8s var(--ease) both; }
.journey-seg.base { border-radius: var(--r-full) 0 0 var(--r-full); background: var(--faint); }
.journey-seg.signed { min-width: 6px; border-radius: 0 var(--r-full) var(--r-full) 0; background: var(--accent-teal); animation-delay: .4s; }
.journey-tick { position: absolute; top: 4px; bottom: 4px; width: 1px; background: var(--canvas-light); opacity: .8; }
.journey-goal { position: absolute; top: -8px; bottom: -8px; width: 2px; margin-left: -1px; background: var(--ink); } /* -1px en -1.5px: de streep staat midden op zijn punt */
.journey-plan { position: absolute; top: -4px; bottom: -4px; width: 3px; margin-left: -1.5px; border-radius: var(--r-xs); background: var(--primary); box-shadow: 0 0 0 2px var(--surface-card); }
.journey-plan.stretch { background: var(--ink); }
.journey-scale { position: relative; height: 24px; margin-top: 8px; font: 500 13px/1 var(--font-mono); color: var(--mute); }
.journey-scale span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.journey-scale .goal { color: var(--ink); }
.journey-scale .end { right: 0; transform: none; }
.journey-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 8px 0 0; color: var(--mute); font-size: 14px; }
.journey-periods { list-style: none; margin: 16px 0 0; padding: 16px 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 24px; border-top: 1px solid var(--hairline-light); }
.journey-periods li { display: grid; gap: 4px; min-width: 0; }
.journey-periods li.is-past { opacity: .6; }
.p-name { font-size: 14px; color: var(--mute); white-space: nowrap; }
.journey-periods li.is-current .p-name { color: var(--primary); font-weight: 600; }
.p-nums { font-size: 15px; font-weight: 600; color: var(--ink); }
.p-nums span { font-weight: 400; color: var(--mute); }
.q-bar { display: block; height: 6px; border-radius: var(--r-full); background: var(--hairline-light); overflow: hidden; }
.q-bar i { display: block; height: 100%; min-width: 2px; border-radius: inherit; background: var(--accent-teal); transform-origin: left center; animation: bar-grow .6s .2s var(--ease) both; }
/* Legenda-blokjes (actual staat onderaan bij de grafiek) */
.key.base { background: var(--faint); }
.key.signed { background: var(--accent-teal); }
.key.new { background: var(--primary); }
.key.plan { border: 2px dashed var(--stone); }
.key.plan.stretch { border: 2px dotted var(--charcoal); }
.key.plan-now { width: 3px; background: var(--primary); }
.key.plan-now.stretch { background: var(--ink); }
@media (max-width: 900px) {
  .journey-top { grid-template-columns: minmax(0, 1fr); }
  .journey-periods { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .journey { padding: var(--card-pad); }
  .journey-scale span:not(.goal) { display: none; }
}

/* ---------- Schema: plan tegen werkelijk (_plan_line.html); de lijnen die ook de burn-up bij Werk heeft staan onderaan ---------- */
.pl-stretch { fill: none; stroke: var(--charcoal); stroke-width: 1.5; stroke-dasharray: 2 5; stroke-linecap: round; }
.pl-plan-dot { fill: var(--surface-card); stroke: var(--stone); stroke-width: 2; }
.pl-stretch-dot { fill: var(--surface-card); stroke: var(--charcoal); stroke-width: 1.5; }
.pl-today { stroke: var(--faint); stroke-width: 1; stroke-dasharray: 2 4; }
.pl-today-label { fill: var(--mute); font: 500 13px var(--font-mono); }
.pl-gap { stroke: var(--accent-teal); stroke-width: 6; stroke-linecap: round; opacity: .35; }
.pl-gap[data-state="warn"] { stroke: var(--accent-warn); }
.pl-gap[data-state="bad"] { stroke: var(--accent-danger); }
.plan-line-key { display: flex; flex-wrap: wrap; gap: 4px 16px; }
/* Op de iPhone krimpt de grafiek tot de helft; de labels in svg-eenheden groter zetten houdt ze leesbaar */
@media (max-width: 560px) { .plan-line-tile :is(.pl-grid-label, .pl-label, .pl-today-label) { font-size: 26px; } }

/* ---------- Kop en stand van Doelen, Route en Weekreview (_dayplan_head, _dayplan_stats) ---------- */
@media (min-width: 901px) { [data-section="cijfers"] .plan-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Op de iPhone compacter: label, dan het cijfer met de balk ernaast, dan de toelichting. Zo staat het werk eerder in beeld. */
@media (max-width: 480px) {
  [data-section="cijfers"] .plan-stats { gap: 8px; }
  [data-section="cijfers"] .plan-stats .stat { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 16px; padding: 12px 16px; }
  [data-section="cijfers"] .plan-stats dt { grid-column: 1 / -1; margin-bottom: 4px; }
  [data-section="cijfers"] .plan-stats .stat-value { grid-column: 1; grid-row: 2; margin: 0; font-size: 24px; }
  [data-section="cijfers"] .plan-stats .plan-meter { grid-column: 2; grid-row: 2; } /* 12px marge uit core */
  [data-section="cijfers"] .plan-stats .stat-note { grid-column: 1 / -1; grid-row: 3; margin-top: 4px; }
}

.week-nav { display: flex; flex-wrap: wrap; gap: 8px; }
.week-nav .btn { min-width: 44px; }

/* ---------- Doelen en week ---------- */
.goal-week-table .week-day { white-space: nowrap; }
.need-rows li { align-items: center; }
.need-numbers { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; text-align: right; }
@media (min-width: 761px) { .need-numbers { flex-direction: row; align-items: baseline; gap: 16px; } }
.split { display: grid; gap: 12px; width: 100%; }
.split-bar { display: flex; height: 14px; border-radius: var(--r-full); background: var(--surface-card); overflow: hidden; }
.split-base { background: var(--faint); }
.split-new { background: var(--primary); }
.split-key { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; font-size: 14px; font-weight: 600; color: var(--charcoal); }
.quarter-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.tile.quarter { gap: 4px; }
.tile.quarter.is-current { background: var(--tint-cobalt); border-color: var(--primary); }
.tile.quarter .tile-body { display: flex; align-items: center; gap: 8px; }
.tile.quarter.is-current .tint-pill { background: var(--primary); color: var(--on-primary); }
.rules-tile { margin-bottom: 16px; }
.rules-list { counter-reset: regel; list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.rules-list li { counter-increment: regel; display: flex; gap: 16px; align-items: flex-start; padding: 16px; border-radius: var(--r-lg); background: var(--surface-soft); }
.rules-list li::before { content: counter(regel); flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--canvas-dark); color: var(--on-dark); font: 500 15px/1 var(--font-display); }
@media (max-width: 900px) {
  .quarter-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rules-list { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .goal-week-table th, .goal-week-table td, .duration-table th, .duration-table td { padding: 12px 8px; }
  .goal-week-table th:first-child, .goal-week-table td:first-child, .duration-table th:first-child, .duration-table td:first-child { padding-left: 0; }
  .goal-week-table th:last-child, .goal-week-table td:last-child, .duration-table th:last-child, .duration-table td:last-child { padding-right: 0; }
  .goal-week-table td { vertical-align: middle; }
  .goal-week-table tbody td { padding-top: 4px; padding-bottom: 4px; }
  .goal-week-table .week-day a { display: inline-flex; align-items: center; min-height: 40px; }
}
/* Basisomzet over de hele breedte, de klanten in twee kolommen */
.base-tile { margin-bottom: 16px; }
@media (min-width: 761px) {
  .base-clients { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; }
  .base-clients li:nth-child(2) { border-top: 0; padding-top: 0; }
}

/* ---------- Route ---------- */
.route-facts li { padding: 8px 0; }
.week-target { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin: 0 0 16px; padding: 16px 24px; border-radius: var(--r-lg); background: var(--tint-teal); }
.week-target[data-state="bad"] { background: var(--tint-warm); }
.week-target-nums { display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 15px; color: var(--charcoal); }
.week-target-nums strong { margin-right: 4px; font: 500 24px/1 var(--font-display); color: var(--ink); }
.week-target-text { flex: 1 1 320px; max-width: 64ch; font-size: 15px; color: var(--ink); }
.route-ladder { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.rung { display: grid; grid-template-columns: 32px minmax(0, 1fr) 170px 220px; gap: 8px 16px; align-items: center; padding: 12px 16px; border-radius: var(--r-lg); background: var(--surface-soft); }
.rung[data-state="good"] { background: var(--tint-teal); }
.rung[data-state="bad"] { background: var(--tint-warm); }
.rung-step { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--canvas-dark); color: var(--on-dark); font: 500 15px/1 var(--font-display); }
.rung-main { display: grid; gap: 4px; min-width: 0; }
.rung-need strong { font: 500 24px/1 var(--font-display); }
.rung-actual { display: grid; gap: 8px; }
.rung-track { display: block; height: 6px; border-radius: var(--r-full); background: var(--surface-card); overflow: hidden; }
.rung-track i { display: block; height: 100%; border-radius: var(--r-full); background: var(--ink); }
.rung[data-state="good"] .rung-track i { background: var(--accent-teal); }
.rung[data-state="warn"] .rung-track i { background: var(--accent-warn); }
.rung[data-state="bad"] .rung-track i { background: var(--accent-danger); }
.route-table-wrap { margin-top: 16px; }
.route-table .nowrap { white-space: nowrap; }
@media (max-width: 760px) {
  .week-target { padding: 12px 16px; }
  .rung { grid-template-columns: 32px minmax(0, 1fr); }
  .rung-need, .rung-actual { grid-column: 2; }
  /* de kwartaaltabel schuift, het kwartaal blijft staan */
  .route-table :is(th, td):first-child { position: sticky; left: 0; z-index: 1; padding-right: 12px; background: var(--surface-card); }
  .route-table tr.is-today td:first-child { background: var(--surface-soft); }
}

/* ---------- Weekreview ---------- */
.review-head .panel-head { margin-bottom: 4px; } /* met de 12px van .plan-meter samen 16px */
.review-spark { margin-top: 16px; padding: 12px 16px; border-radius: var(--r-lg); background: var(--tint-cobalt); }
.review-spark .meta { margin: 0 0 8px; }
/* Op de laptop staat het verloop rechts van de teller, zo blijft het lijntje kort genoeg om te lezen */
@media (min-width: 901px) {
  .review-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 400px); column-gap: 32px; align-items: start; }
  .review-head > :not(.review-spark) { grid-column: 1; }
  .review-head > .review-spark { grid-column: 2; grid-row: 1 / span 3; margin-top: 0; }
}
.review-save { margin-top: 12px; font-size: 14px; color: var(--mute); }
.review-steps { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 12px; }
.panel.review-step { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 16px 32px; align-items: start; margin: 0; }
.review-check { display: flex; align-items: center; gap: 12px; cursor: pointer; }
.review-check input { width: 24px; height: 24px; cursor: pointer; }
.review-step-title { display: block; }
.review-step-title .eyebrow { display: block; }
.review-step-name { display: block; font: 500 24px/1.2 var(--font-display); letter-spacing: -.02em; color: var(--ink); }
.review-step:has(.review-check input:checked) { background: var(--tint-teal); border-color: var(--accent-teal); }
.review-check:has(input:checked) .review-step-name { color: var(--mute); }
.review-body { display: grid; gap: 12px; min-width: 0; }
.review-facts li { padding: 8px 0; }
.review-links { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 15px; font-weight: 500; }
.bests .meta { text-align: right; }
.mini-facts { display: flex; flex-wrap: wrap; gap: 12px; }
.mini-fact { flex: 1 1 140px; display: grid; gap: 4px; padding: 16px 24px; border-radius: var(--r-lg); background: var(--surface-soft); }
.review-step:has(.review-check input:checked) .mini-fact { background: var(--surface-card); }
.mini-fact.warm { background: var(--tint-warm); }
.mini-fact .big { font: 500 32px/1.1 var(--font-display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 900px) { .panel.review-step { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) {
  .review-step-name { font-size: 20px; }
  .mini-fact { padding: 12px 16px; }
  .review-links a, .cijfers-foot a { display: inline-flex; align-items: center; min-height: 40px; }
}

/* ---------- Resultaten ---------- */
.month-rows li { align-items: center; }
.month-label { flex: 0 0 84px; }
.month-rows .share-track { flex: 1 1 auto; min-width: 40px; }
.month-rows .num { flex: 0 0 auto; text-align: right; }
/* Per bron op de iPhone: de tabel schuift, de bron blijft staan */
@media (max-width: 760px) { .source-table :is(th, td):first-child { position: sticky; left: 0; z-index: 1; padding-right: 12px; background: var(--surface-card); } }

/* ---------- Niveau en badges (_progress.html) ---------- */
.level-track { height: 10px; margin-top: 8px; border-radius: var(--r-full); background: var(--surface-soft); overflow: hidden; }
.level-fill { display: block; height: 100%; min-width: 4px; border-radius: var(--r-full); background: var(--primary); }
.level-scale { display: flex; justify-content: space-between; gap: 16px; font-size: 14px; color: var(--mute); }
.points-rows li { padding: 8px 0; }
.badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 24px 16px; width: 100%; list-style: none; margin: 8px 0 0; padding: 0; align-items: start; }
.badge { display: grid; justify-items: center; align-content: start; gap: 4px; min-width: 0; text-align: center; }
.badge svg { width: 48px; height: 48px; }
.badge-ring { fill: var(--surface-soft); stroke: none; }
.badge-mark { fill: none; stroke: var(--stone); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.badge.earned .badge-ring { fill: var(--ink); }
.badge.earned .badge-mark { stroke: var(--canvas-light); }
.badge-name { max-width: 100%; font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--ink); overflow-wrap: anywhere; hyphens: auto; }
.badge:not(.earned) .badge-name { color: var(--charcoal); }
.badge-hint, .badge-date { font-size: 14px; line-height: 1.35; color: var(--mute); }
@media (max-width: 480px) { .badges { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Weekroute: vijf werkdagen als stippen (_route.html) ---------- */
.route-stops { display: flex; align-items: center; gap: 4px; list-style: none; margin: 8px 0 0; padding: 0; }
.route-stop { position: relative; display: grid; justify-items: center; gap: 4px; flex: 0 0 auto; }
.route-stop svg { width: 30px; height: 30px; }
.route-stop + .route-stop { margin-left: 12px; }
.route-stop + .route-stop::before { content: ""; position: absolute; left: -14px; top: 14px; width: 12px; height: 2px; background: var(--faint); }
.route-stop[data-state="af"] + .route-stop::before, .route-stop[data-state="af"]::before { background: var(--accent-teal); }
.stop-ring { fill: var(--canvas-light); stroke: var(--faint); stroke-width: 2; }
.stop-check { fill: none; stroke: var(--canvas-light); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.route-stop[data-state="af"] .stop-ring { fill: var(--accent-teal); stroke: var(--accent-teal); }
.route-stop[data-state="vandaag"] .stop-ring { stroke: var(--primary); }
.stop-dot { fill: var(--primary); }
.stop-half { fill: var(--stone); }
.route-stop[data-state="gemist"] .stop-ring { stroke-dasharray: 3 3; }
.route-stop[data-state="komt"] .stop-ring { stroke-dasharray: 2 4; }
.route-day { font-size: 14px; color: var(--mute); text-transform: lowercase; }
.route-key { font-size: 14px; color: var(--mute); }

/* Geld (/cijfers/): de potjes, wat er binnen moet komen, per maand */
.geld-next { display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: var(--ink); border-left: 4px solid var(--primary); }
.geld-next strong { font-size: 20px; }
.geld-next .muted { font-size: 14px; }
.geld-month .budget { max-width: none; margin-top: 8px; }
.geld-pots { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; margin: 0 0 16px; }
.geld-incoming { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; margin: 0 0 16px; }
.geld-pot .eyebrow { margin: 0; }
.geld-pot-sum { margin: 0; font: 500 28px/1.15 var(--font-display); color: var(--ink); }
.geld-pot-sum span { font: 400 15px/1.4 var(--font-body, inherit); color: var(--charcoal); }
.geld-pot-note { margin: 0; font-size: 14px; color: var(--charcoal); }
.geld-pot .budget-meter { margin: 4px 0; }
.geld-pot.is-done { border-color: var(--accent-teal); }
.geld-pot.is-done .budget-meter span { background: var(--accent-teal); }
.geld-check { display: flex; gap: 8px; align-items: center; }
.geld-check input { width: 96px; min-height: 40px; font-size: 16px; }
.geld-late { color: var(--accent-danger); }
.geld-ok { color: var(--accent-teal); }
.geld-table table { width: 100%; }
.geld-table tr.is-now th, .geld-table tr.is-now td { font-weight: 600; }
.geld-foot { margin-top: 12px; font-size: 14px; }
.geld-growth { display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: var(--ink); }
.geld-growth strong { font-size: 20px; }
.geld-growth .budget-meter { max-width: 520px; }
@media (max-width: 640px) { .geld-pot-sum { font-size: 24px; } }
.geld-pot .link-button { padding: 0; border: 0; background: none; color: var(--charcoal); font-size: 14px; text-decoration: underline; cursor: pointer; }
.geld-table th, .geld-table td { text-align: left; }
.geld-table .num { text-align: right; }
.geld-manual summary { cursor: pointer; font-size: 14px; color: var(--charcoal); }
.geld-manual .geld-check { margin-top: 8px; }
.geld-big { margin: 4px 0; font: 500 40px/1.05 var(--font-display); color: var(--ink); }
.geld-big span { font: 400 18px/1.4 var(--font-body, inherit); color: var(--charcoal); }
.geld-month .budget-meter { margin: 12px 0 8px; }
.geld-month[data-state="warn"] .budget-meter span { background: var(--accent-warn); }
.geld-month[data-state="bad"] .budget-meter span { background: var(--accent-danger); }
.geld-month .geld-manual { margin-top: 12px; }
.geld-growth strong .muted { font-weight: 400; font-size: 16px; }
@media (max-width: 640px) { .geld-big { font-size: 32px; } }
.geld-entity { margin: 0 0 24px; }
.geld-entity-title { margin: 0 0 12px; font-size: 22px; }
.geld-entity-title span { margin-left: 8px; font: 400 14px/1.4 var(--font-mono); letter-spacing: .04em; color: var(--mute); }
.geld-entity .geld-pots { margin: 0; }
.geld-suppliers { margin-top: 8px; font-size: 14px; }
.geld-table th .muted { font-weight: 400; font-size: 12px; }
.geld-table th { vertical-align: top; }
.geld-table thead th .muted { display: block; font-weight: 400; font-size: 12px; }
.geld-cell { min-width: 120px; }
.geld-cell .num { display: block; text-align: left; }
.geld-bar { display: block; height: 8px; margin-top: 6px; border-radius: var(--r-full); background: var(--surface-soft); overflow: hidden; }
.geld-bar i { display: block; height: 100%; border-radius: inherit; background: var(--primary); }
.geld-cell.is-done .num { color: var(--accent-teal); }
.geld-cell.is-done .geld-bar i { background: var(--accent-teal); }
.geld-cell.is-negative .num { color: var(--accent-danger); }
.geld-avg th, .geld-avg td { border-top: 2px solid var(--surface-soft); font-weight: 600; padding-top: 12px; }