/*
 * Opmaak van het dashboard (templates/dashboard.html).
 */

  /* ── Doelen: tijdlijn van mijlpalen ───────────────────────────────────
     Eén feestmoment (laatst behaald), oudere mijlpalen rustig afgevinkt,
     volgende doel als call-forward met voortgang. */
  /* Kolomkoppen ("Deze maand" / "Doelen") — zelfde stijl in beide kolommen */
  .ov-head,
  .goals-head {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 12px; flex-wrap: wrap; margin-bottom: 14px; min-height: 26px;
  }
  .goals-count {
    font-size: 12px; font-weight: 700; color: #4a7a3f;
    background: rgba(29,188,0,.16); border-radius: 999px; padding: 4px 11px;
  }

  /* Mijlpaal-kaarten: exact dezelfde opbouw als de stat-cards links
     (licht vlak, label + groot bedrag, footer-strip). */
  .goals-list { display: flex; flex-direction: column; gap: 20px; }

  .goal-card {
    position: relative;
    animation: goal-in .5s cubic-bezier(.25,1,.4,1) both;
    animation-delay: calc(var(--ci) * 70ms + 150ms);
  }
  @keyframes goal-in { from { opacity: 0; transform: translateY(-6px); } }

  .gc-label {
    display: flex; align-items: center; gap: 6px;
    color: var(--muted); font-size: 13px; font-weight: 600; margin: 0 0 6px;
  }
  .gc-label svg { flex-shrink: 0; }
  .gc-amount {
    margin: 0; font-size: 32px; letter-spacing: -.5px; color: var(--gold-pale);
  }
  .gc-foot-label {
    color: #000;
    font-size: 13px;
    font-weight: 400;
    margin: 0 0 2px;
  }
  .gc-foot-value { margin: 0; font-size: 18px; color: var(--gold-pale); }

  /* Behaald: groen vinkje + groen bedrag */
  .goal-card.done .gc-label { color: #14a000; }
  .goal-card.done .gc-amount { color: var(--green); }

  /* Laatst behaald: groene kaart met lichtblauwe tekst + confetti */
  .goal-card.celebrate { background: #1dbc00; }
  .goal-card.celebrate,
  .goal-card.celebrate * { color: #eaf3ff !important; }
  /* De confetti zelf staat in app.css, want Free Forever gebruikt hem ook.
     Twee kopieën van hetzelfde feest lopen vroeg of laat uit elkaar. */

  /* Volgende doel: blauw accent + voortgang in de footer */
  .goal-card.upcoming .gc-label { color: #2145e6; font-weight: 700; }
  .gc-foot-row {
    display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  }
  .gc-pct { font-size: 12px; font-weight: 800; color: #2145e6; }
  .gc-track {
    height: 5px; border-radius: 999px; background: #d7e0f3; margin-top: 8px; overflow: hidden;
  }
  .gc-fill {
    display: block; height: 100%; border-radius: 999px; background: #2145e6;
    animation: gc-grow .9s cubic-bezier(.25,1,.4,1) .3s both;
  }
  @keyframes gc-grow { from { width: 0; } to { width: var(--w); } }

  /* ── Laadstand: de pagina staat meteen goed ───────────────────────
     Alles boven de vouw wordt door JavaScript gevuld, ná een fetch en
     (straks) na het ontsleutelen. Zonder deze regels ziet iemand eerst de
     lege omhulsels — kopjes, een tabel zonder rijen, een zwarte pil — die
     daarna zeshonderd pixels naar beneden schuiven zodra de cijfers er zijn.

     Daarom: verbergen wat nog leeg is, en er een skelet voor in de plaats
     dat net zo hoog is als wat eruit komt. Het bedrag is even groot als het
     echte (dezelfde clamp) en de grafiek even hoog als #hero-chart, dus wat er
     verschijnt staat op de plek waar het skelet stond. */
  body:not(.dashboard-geladen) #hero,
  body:not(.dashboard-geladen) #nudgeWrap,
  body:not(.dashboard-geladen) #hero-chart,
  body:not(.dashboard-geladen) #appTip,
  body:not(.dashboard-geladen) #overview-row,
  body:not(.dashboard-geladen) #sections-container { display: none !important; }
  body.dashboard-geladen #dash-laden { display: none; }
  /* Zonder cijfers staat er "Nog geen data" en geen grafiek; de tip om de
     app op je beginscherm te zetten wacht dan tot er iets te zien is. */
  #leeg:not([hidden]) ~ #appTip { display: none; }

  #dash-laden {
    padding-top: 40px; text-align: center;
    /* Pas na een vijfde seconde in beeld: een skelet dat maar even te zien
       is, is een flits en geen geruststelling. */
    animation: dl-verschijn .25s ease .2s both;
  }
  @keyframes dl-verschijn { from { opacity: 0; } to { opacity: 1; } }
  /* Geen marge in deze regel: een selector met een id wint van de klassen
     hieronder, en dan vallen alle tussenruimtes weg. */
  #dash-laden > * {
    border-radius: 14px; background: rgba(255,255,255,.55);
    animation: dl-adem 1.6s ease-in-out infinite;
  }
  /* Dezelfde clamp als .hero-amount, dus even hoog als het echte bedrag. */
  /* De kopregel boven het bedrag; zonder deze balk springt de pagina een
     regel omlaag zodra de cijfers binnen zijn. */
  .dl-kop     { width: 190px; height: 17px; margin: 0 auto 8px; }
  .dl-bedrag  { width: min(340px, 72%); height: clamp(52px, 9.5vw, 72px);
                margin: 0 auto; }
  .dl-regel   { width: 150px; height: 19px; margin: 12px auto 0; }
  /* Even hoog als de hoofdgrafiek met de periodes, de schakelaar en de
     doelbalk eronder, zonder de hint: die staat er alleen bij je eerste
     bezoek, en daarna mag er niets verspringen. */
  .dl-grafiek { width: 100%; height: 522px; margin: 18px auto 0;
                border-radius: 24px; }
  @media (min-width: 700px) { .dl-grafiek { height: 582px; } }
  /* De plek van de tip "Geld Geteld als app", even hoog als de kaart. Alleen
     als die straks verschijnt; dat zet app-tip.js met body.app-tip-aan. */
  .dl-tip     { display: none; width: 100%; height: 138px; margin: 36px auto 0;
                border-radius: 30px; }
  body.app-tip-aan .dl-tip { display: block; }
  @keyframes dl-adem {
    0%, 100% { opacity: .55; }
    50%      { opacity: .9; }
  }
  @media (max-width: 640px) {
    #dash-laden { padding-top: 48px; }
    .dl-tip { height: 212px; margin-top: 36px; }
  }
  @media (prefers-reduced-motion: reduce) {
    #dash-laden, #dash-laden > * { animation: none; }
  }

  /* ── Hero: groot bedrag + open grafiek, geen blok ─────────────────── */
  #hero {
    text-align: center;
    padding-top: 40px;
    margin-bottom: 12px;
  }
  /* Mobiel: wat extra lucht boven het grote bedrag */
  @media (max-width: 640px) {
    #hero { padding-top: 48px; }
  }
  .hero-label {
    font-size: 12px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .8px; color: var(--muted); margin: 0 0 10px;
  }
  .hero-amount {
    font-size: clamp(52px, 9.5vw, 72px);
    /* Expliciet, ook al is bold nu de enige snede die geladen wordt: dan
       hangt de dikte niet aan wat er toevallig beschikbaar is. */
    font-weight: 700;
    line-height: 1; color: #111111; margin: 0;
    letter-spacing: -1.5px;
  }
  .hero-amount .hero-euro { color: #111111; }
  /* De periode waar je naar kijkt, boven het bedrag. Donker met "Terug naar
     nu" erbij als je in de grafiek een eerdere periode aanwijst. Vaste
     hoogte: de grafiek eronder verspringt niet. */
  .hero-wanneer {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    height: 26px; margin: 0 0 6px; font-size: 15px; font-weight: 600; color: #111111;
  }
  #hero.oud .hero-wanneer span { color: #111111; font-weight: 700; }
  .hero-terug {
    border: 0; background: rgba(17,17,17,.08); border-radius: 999px;
    padding: 4px 10px; font: 600 12px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: #111111; cursor: pointer; touch-action: manipulation;
  }
  .hero-terug[hidden] { display: none; }
  .hero-net b { font-weight: 700; }
  /* Telwerk-rollen voor het hoofdbedrag: elk cijfer is een rol die zacht
     een paar standen omhoog draait naar de eindstand. */
  #heroAmount.hod {
    display: inline-flex; align-items: flex-end;
  }
  #heroAmount .hod-col {
    display: inline-block; height: 1em; line-height: 1em; overflow: hidden;
    text-align: center;
  }
  #heroAmount .hod-strip {
    display: flex; flex-direction: column; will-change: transform;
  }
  #heroAmount .hod-digit, #heroAmount .hod-static {
    height: 1em; line-height: 1em;
  }
  #heroAmount .hod-static { display: inline-block; }
  /* Het bedrag in dezelfde letter en dikte als het hoofdbedrag erboven; het
     label ervoor houdt de body-letter. GeneralSans komt van .fizzy, het
     gewicht staat hier expliciet zodat het niet aan de toevallige standaard
     van een <p> hangt. */
  .hero-net {
    font-size: 19px; font-weight: 700; color: #111111;
    margin: 10px 0 0; letter-spacing: -.3px;
    /* Vaste hoogte, ook leeg: aanwijzen in de grafiek zet hier de
       uitsplitsing neer, en dan mag er niets verspringen. */
    min-height: 28px; display: flex; align-items: center; justify-content: center;
    gap: 6px; white-space: nowrap;
  }
  /* Tijdens het aanwijzen: ingelegd en rendement, met een stipje in de kleur
     van het vlak in de grafiek. */
  .hero-net.split { gap: 14px; font-size: 15px; letter-spacing: 0; }
  .hero-net .hn-deel { display: inline-flex; align-items: center; gap: 6px; }
  .hero-net .hn-deel b { font-size: 15px; }
  .hero-net .hn-deel b.plus { color: #127d00; }
  .hero-net .hn-deel b.min { color: #c93a3a; }
  .hero-net .hn-stip { width: 9px; height: 9px; border-radius: 50%; flex: none; }
  @media (max-width: 360px) {
    .hero-net.split { gap: 10px; }
    .hero-net.split span, .hero-net .hn-deel b { font-size: 13px; }
  }
  /* Het label staat nu vóór het bedrag, dus het krijgt de maat van de regel
     eronder in plaats van die van een naschrift. */
  .hero-net span {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 15px; font-weight: 400; color: #111111;
  }
  /* ── Doel-voortgang: één lijn met percentage-pill ─────────────────── */
  /* 100% ligt op het midden van het doelpilletje ("75k!"), niet op de rand
     van de lijn. Dat pilletje dekt de laatste 50px af; rekende het
     percentage tot de rand, dan stond "63%" voor het oog zo'n 30px te ver,
     want wat je als eindpunt ziet is het doel. --spoor is de lijn tot aan
     dat midden, --p de fractie die dashboard-render.js meegeeft. */
  #goalProgress {
    margin: 36px 2px 24px;
    --doel-half: 30px;
    --spoor: calc((100% - var(--doel-half)) * var(--p, 0));
  }
  .gp-line {
    position: relative; height: 5px; border-radius: 999px;   /* even hoog als de snaren breed zijn */
    background: #a8c3fb;
  }
  .gp-line-fill {
    position: absolute; top: 0; left: 0; bottom: 0; width: 0;
    border-radius: 999px;
    background: #2145e6;   /* zelfde blauw als de hover in de grafiek */
    animation: gp-grow .9s cubic-bezier(.25,1,.4,1) .2s both;
  }
  @keyframes gp-grow { from { width: 0; } to { width: var(--spoor); } }
  /* percentage-pill op het punt waar je bent */
  .gp-pct-pill {
    position: absolute; top: 50%;
    left: clamp(22px, var(--spoor), calc(100% - var(--doel-half)));
    transform: translate(-50%, -50%);
    padding: 5px 11px; border-radius: 999px;
    background: #2145e6; color: #ffffff;
    font-size: 12px; font-weight: 800; white-space: nowrap;
    box-shadow: 0 4px 12px rgba(33,69,230,.35);
    animation: gp-pill-in .45s cubic-bezier(.34,1.56,.64,1) 1.05s backwards;
    z-index: 2;
  }
  @keyframes gp-pill-in {
    from { transform: translate(-50%, -50%) scale(0); }
    to   { transform: translate(-50%, -50%) scale(1); }
  }
  /* doel-pill op het einde van de lijn */
  .gp-goal-pill {
    position: absolute; top: 50%; left: calc(100% - var(--doel-half));
    transform: translate(-50%, -50%);
    padding: 5px 11px; border-radius: 999px;
    background: #a8c3fb;
    font-size: 12px; font-weight: 800; white-space: nowrap;
    color: #2145e6;
  }

  /* ── Nudge: wrap is sticky over de héle pagina; pill zit gecentreerd ──
     De afstand tot de bovenkant is dezelfde als die van de zwevende
     menubalk tot de onderkant (20px, zie #navBar in base.html). Ze zweven
     allebei over de pagina heen, dus als die twee verschillen ziet het
     scherm er scheef uit zonder dat je meteen ziet waardoor. */
  #nudgeWrap {
    position: sticky; top: 20px; z-index: 90;
    display: flex; justify-content: center;
    margin: 20px 0 6px; pointer-events: none;
  }
  #nudge {
    pointer-events: auto; max-width: 100%;
    display: inline-flex; align-items: center; gap: 10px;
    padding: 7px 7px 7px 15px; border-radius: 999px;
    background: #111111;
    box-shadow: 0 6px 20px rgba(0,0,0,.16);
  }
  #nudge .nudge-dot {
    width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
    background: var(--brand);
  }
  #nudge .nudge-text {
    font-size: 13px; font-weight: 600; color: #ffffff; white-space: nowrap;
  }
  /* De knop in de aanmaning komt uit het knoppensysteem in app.css. */
  #nudge .nudge-btn { flex-shrink: 0; }
  /* Op smalle schermen gold hier top: 78px, om onder het logo linksboven en
     de avatar rechtsboven door te gaan. Die staan er allebei niet meer — de
     avatar zit in de zwevende balk onderin en het hoeklogo wordt nergens
     meer ingeladen — dus die uitzondering hield alleen zichzelf nog in
     stand. Nu overal dezelfde 20px. */
  @media (max-width: 380px) {
    #nudge .nudge-text { white-space: normal; }
  }

  /* ── De vraag over oude aflossingen ───────────────────────────────
     Eén keer, en daarna nooit meer: een witte kaart onder het grote bedrag.
     Geen pil zoals de aanmaning, want hier staat een vraag met uitleg. */
  #omzetten {
    max-width: 620px;
    margin: 6px auto 22px;
    padding: 18px 20px;
    border-radius: 18px;
    background: #ffffff;
    color: #111111;
    box-shadow: 0 6px 20px rgba(17, 40, 90, 0.08);
  }
  #omzetten[hidden] { display: none; }
  #omzetten .om-titel { margin: 0 0 6px; font-size: 15px; font-weight: 700; }
  #omzetten .om-tekst { margin: 0 0 10px; font-size: 13.5px; line-height: 1.55; color: rgba(17, 17, 17, 0.75); }
  #omzetten .om-tekst b { color: #111111; }
  #omzetten .om-knoppen { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
  #omzetten .om-fout { margin: 10px 0 0; font-size: 13px; font-weight: 600; color: var(--red); }

  /* ── Overzicht-tabel: totaalbalken zoals in de PNG-export ───────── */
  .ttl-bar td { padding: 0; }
  .ttl-bar .tb {
    background: rgba(0,0,0,.045);
    padding: 13px 10px;
    font-size: 13px;
    font-weight: 700;
  }
  .ttl-bar .tb-l {
    margin-left: 14px;
    border-radius: 11px 0 0 11px;
    padding-left: 14px;
  }
  .ttl-bar .tb-r {
    margin-right: 14px;
    border-radius: 0 11px 11px 0;
    padding-right: 14px;
  }

  /* ── Exporteer knop (maandoverzicht → PNG) ─────────────────────── */
  /* Exporteren komt uit het knoppensysteem in app.css; hier blijft alleen
     wat deze knop apart maakt: de voortgangsbalk die eroverheen loopt, en
     dus overflow: hidden om die binnen de pil te houden. */
  /* De vraag en de knop horen bij elkaar; op een smal scherm valt de vraag
     weg. Dan blijft het deel-icoon over, en dat zegt genoeg — de kop van het
     blok staat er vlak naast en die zou anders van de knop af gedrukt worden. */
  .export-groep { display: flex; align-items: center; gap: 10px; min-width: 0; }
  .export-vraag {
    font-size: 12.5px; color: var(--muted); white-space: nowrap;
  }
  @media (max-width: 560px) { .export-vraag { display: none; } }

  .export-btn { position: relative; overflow: hidden; }
  .export-btn:disabled { cursor: default; }
  .export-btn .export-spinner {
    width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0;
    border: 2px solid rgba(17,17,17,.22); border-top-color: #111111;
    animation: export-spin .7s linear infinite;
    display: none;
  }
  @keyframes export-spin { to { transform: rotate(360deg); } }
  .export-btn.busy .export-spinner { display: inline-block; }
  .export-btn.busy .export-icon { display: none; }
  .export-btn.done { background: var(--green); }
  .export-btn.done .export-progress-fill { background: #ffffff; }
  .surface .export-btn.done, .surface .export-btn.done * { color: #ffffff !important; }
  .export-progress {
    position: absolute; left: 0; bottom: 0; height: 3px; width: 100%;
    background: rgba(17, 17, 17, 0.12);
    opacity: 0; transition: opacity .15s;
  }
  .export-btn.busy .export-progress { opacity: 1; }
  .export-progress-fill {
    display: block; height: 100%; width: 0%;
    background: #111111;
    transition: width .35s ease;
  }
  @media (max-width: 640px) {
    /* Alleen icoon op mobiel; tijdens export blijft de statustekst zichtbaar */
    .export-btn:not(.busy):not(.done) .export-label { display: none; }
    .export-btn { padding: 7px 11px; }
  }

  /* Donut & schuld blok: body vult de volle blokhoogte
     (via CSS i.p.v. inline, zodat in-/uitklappen blijft werken) */
  #block-donutChart .block-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  #block-schuld {
    display: flex;
    flex-direction: column;
  }
  /* Zonder schuld staat het blok op hidden; die moet het winnen van de regel
     hierboven, want een eigen opmaakregel gaat voor de browserstandaard. */
  #block-schuld[hidden] { display: none; }
  #block-schuld .block-body {
    flex: 1;
    display: flex;
  }
  /* Secundaire lijn-/staafgrafieken vullen de volle blokhoogte i.p.v. een vaste
     aspect-ratio, zodat de kolom niet half leeg blijft naast de donut. */
  #block-sourceChart .block-body,
  #block-barChart .block-body { flex: 1; display: flex; min-height: 260px; }
  #block-sourceChart .chart-scroll,
  #block-barChart .chart-scroll { display: flex; width: 100%; }
  #block-donutChart .chart-scroll[hidden],
  #block-donutChart .donut-legend[hidden],
  #block-sourceChart .chart-scroll[hidden],
  #block-barChart .chart-scroll[hidden] { display: none; }
  /* In je eerste periode: een zin in plaats van een lege grafiek. */
  .grafiek-wacht { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
  .grafiek-wacht[hidden] { display: none; }
  #block-sourceChart.wacht .block-body,
  #block-barChart.wacht .block-body { min-height: 0; }
  #block-sourceChart .chart-inner--sm,
  #block-barChart .chart-inner--sm { display: flex; height: auto; }
  #block-sourceChart .chart-inner--sm canvas,
  #block-barChart .chart-inner--sm canvas { flex: 1; }

  /* HTML-legenda onder de donut: pil-markers, netjes onderin uitgelijnd */
  .donut-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px 18px;
    margin-top: 16px;
  }
  .donut-legend .dl-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 400;
    color: #111111;
  }
  .donut-legend .dl-pill {
    width: 18px;
    height: 6px;
    border-radius: 999px;   /* volledig ronde pil */
    flex-shrink: 0;
  }

  /* ── Hoofdgrafiek (static/js/hoofdgrafiek.js) ──────────────────────
     De gekozen periode past altijd in beeld; vegen wijst een periode aan.
     touch-action: pan-y laat verticaal vegen de pagina scrollen, en geeft
     zijwaarts vegen aan de grafiek. */
  #hoofdgrafiek {
    --hg-muted: #4f5f78; --hg-as: #6d7c93; --hg-groen: #127d00; --hg-rood: #c93a3a;
    margin-top: -18px;
  }
  #hoofdgrafiek .hg-grafiek {
    position: relative; height: 380px; margin: 0 calc(-1 * var(--rand, 16px));
    touch-action: pan-y; user-select: none; -webkit-user-select: none;
    -webkit-touch-callout: none; cursor: crosshair; outline: none;
  }
  @media (min-width: 700px) { #hoofdgrafiek .hg-grafiek { height: 440px; margin-inline: 0; } }
  #hoofdgrafiek .hg-grafiek:focus-visible { outline: 2px solid #2145e6; outline-offset: 3px; border-radius: 12px; }
  /* De tekening wordt bij elke beweging opnieuw opgebouwd. Zou een vinger op
     een stukje ervan landen, dan verdwijnt dat onder hem en komen zijn
     touchmoves nergens meer aan: dan kan de grafiek het scrollen en
     verversen niet tegenhouden. Daarom raakt de vinger altijd de grafiek zelf. */
  #hoofdgrafiek .hg-grafiek svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
  #hoofdgrafiek .hg-strook svg { pointer-events: none; }
  #hoofdgrafiek .hg-in { animation: hg-in .45s ease both; }
  /* Het gordijn van de intro: schuift naar rechts weg en laat de grafiek van
     links naar rechts zien. De linkerrand loopt zacht uit. */
  #hoofdgrafiek .hg-raam { position: absolute; inset: 0; overflow: hidden; z-index: 2; pointer-events: none; }
  #hoofdgrafiek .hg-gordijn {
    position: absolute; top: 0; bottom: 0; left: -64px; right: 0;
    background: linear-gradient(90deg, rgba(195,221,255,0), var(--bg) 64px);
    visibility: hidden;
  }
  /* Een tel wachten: het eerste beeldje na het laden is het zwaarste, en
     wat de intro dan zou spelen, zou je missen. Tot dan dekt hij alles af. */
  #hoofdgrafiek .hg-gordijn.loop { animation: hg-gordijn 1.1s cubic-bezier(.45,0,.55,1) .15s both; }
  @keyframes hg-gordijn {
    from { transform: translateX(0); visibility: visible; }
    to   { transform: translateX(100%); visibility: hidden; }
  }
  @keyframes hg-in { from { opacity: 0; } }
  #hoofdgrafiek .hg-pill {
    position: absolute; left: 0; top: 0; transform: translateX(-50%);
    display: inline-flex; align-items: center; height: 34px; padding: 0 12px; border-radius: 12px;
    background: #111111; color: #ffffff; font: 700 14px "GeneralSans", -apple-system, sans-serif;
    white-space: nowrap; box-shadow: 0 10px 24px rgba(17,17,17,.22); pointer-events: none; z-index: 3;
    /* Geen overgang op de plek: het label volgt de aanwijslijn, die al glijdt. */
  }
  #hoofdgrafiek .hg-pill[hidden] { display: none; }
  #hoofdgrafiek text { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
  #hoofdgrafiek .ax { font-size: 11px; font-weight: 500; fill: rgba(17,17,17,.42); }
  #hoofdgrafiek .ax.on { fill: #111111; font-weight: 700; }
  #hoofdgrafiek .ax.jaar { font: 800 11px "GeneralSans", -apple-system, sans-serif; fill: #111111; }
  #hoofdgrafiek .yl {
    font-size: 10.5px; font-weight: 600; fill: var(--hg-as);
    paint-order: stroke; stroke: var(--bg); stroke-width: 3px; stroke-linejoin: round;
  }
  /* Een rand in de achtergrondkleur: leesbaar, ook als de lijn erachter loopt. */
  #hoofdgrafiek .vlm { paint-order: stroke; stroke: var(--bg); stroke-width: 4px; stroke-linejoin: round; }
  #hoofdgrafiek .vlm { font-size: 10.5px; font-weight: 600; fill: var(--hg-muted); }
  #hoofdgrafiek .yline { stroke: rgba(17,17,17,.12); stroke-width: 1; stroke-dasharray: 2 4; }
  #hoofdgrafiek .grid { stroke: rgba(60,80,110,.14); stroke-width: 1; stroke-dasharray: 2 5; }
  #hoofdgrafiek .cross { stroke: #111111; stroke-width: 1.5; opacity: .18; }
  #hoofdgrafiek .rg { fill: rgba(17,17,17,.07); }
  /* Alles rechts van je vinger vervaagt: de achtergrond eroverheen. */
  #hoofdgrafiek .waas { fill: var(--bg); opacity: .78; }

  /* De hint onder de grafiek, alleen tot je voor het eerst aanwijst. */
  #hoofdgrafiek .hg-onder { text-align: center; font-size: 12.5px; color: var(--hg-muted); margin: 6px 0 0; }
  #hoofdgrafiek .hg-onder[hidden] { display: none; }

  /* De periodes, altijd in beeld: kale tekst, alleen de gekozen periode als
     zwart blokje dat meeschuift. Daaronder het schakelknopje. */
  #hoofdgrafiek .hg-bedien[hidden] { display: none; }
  #hoofdgrafiek .hg-bedien { display: flex; gap: 8px; justify-content: center; align-items: center; margin-top: 10px; max-width: 100%; }
  #hoofdgrafiek .hg-vouw + .hg-bedien { margin-top: 14px; }
  #hoofdgrafiek .hg-chips {
    position: relative; display: flex; gap: 0; flex-wrap: nowrap; min-width: 0; max-width: 100%;
    border-radius: 999px; padding: 3px;
  }
  #hoofdgrafiek .hg-chip {
    position: relative; z-index: 1; border: 0; background: transparent; padding: 8px 11px; border-radius: 999px;
    font: 700 13px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #111111;
    white-space: nowrap; display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
    transition: color .25s; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  }
  #hoofdgrafiek .hg-chip.on { color: #ffffff; }
  #hoofdgrafiek .hg-glijder {
    position: absolute; left: 0; top: 3px; bottom: 3px; width: 0; border-radius: 999px; background: #111111;
    box-shadow: 0 4px 12px rgba(0,0,0,.18);
    transition: transform .38s cubic-bezier(.3,1.3,.5,1), width .38s cubic-bezier(.3,1.3,.5,1);
  }
  /* Het knopje voor inleg en rendement. */
  #hoofdgrafiek .hg-knop {
    flex: 0 1 auto; min-width: 0; border: 0; height: 40px; padding: 0 14px 0 12px; border-radius: 999px;
    display: inline-flex; align-items: center; gap: 7px; background: rgba(17,17,17,.06); color: #111111;
    font: 700 13px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; white-space: nowrap; cursor: pointer;
    transition: background .2s, color .2s; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  }
  #hoofdgrafiek .hg-knop > span { overflow: hidden; text-overflow: ellipsis; }
  #hoofdgrafiek .hg-bereik { margin: 0 0 6px; text-align: center; font: 700 13.5px "GeneralSans", -apple-system, sans-serif; color: #111111; }
  #hoofdgrafiek .hg-chip:focus-visible, #hoofdgrafiek .hg-knop:focus-visible,
  #hoofdgrafiek .hg-strook:focus-visible, #hoofdgrafiek .hg-knop:focus-visible { outline: 2px solid #2145e6; outline-offset: 3px; }
  @media (max-width: 360px) {
    #hoofdgrafiek .hg-chip { padding: 8px 7px; font-size: 12.5px; }
    #hoofdgrafiek .hg-knop { padding: 0 11px 0 10px; font-size: 12.5px; }
  }

  /* Zelf kiezen: de strook klapt open onder de periodes. */
  #hoofdgrafiek .hg-vouw { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .32s cubic-bezier(.22,1,.36,1), opacity .25s; }
  #hoofdgrafiek .hg-vouw.open { grid-template-rows: 1fr; opacity: 1; }
  #hoofdgrafiek .hg-vouw-in { overflow: hidden; min-height: 0; }
  #hoofdgrafiek .hg-paneel { margin-top: 12px; background: rgba(255,255,255,.5); border-radius: 22px; padding: 12px 14px; }
  #hoofdgrafiek .hg-strook { position: relative; height: 64px; touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: grab; }
  #hoofdgrafiek .hg-strook:active { cursor: grabbing; }
  #hoofdgrafiek .hg-strook svg { position: absolute; inset: 0; width: 100%; height: 100%; }
  #hoofdgrafiek .hg-strook-jr { font: 700 11px "GeneralSans", -apple-system, sans-serif; fill: var(--hg-muted); }
  #hoofdgrafiek .hg-snel { display: flex; gap: 4px; justify-content: center; flex-wrap: wrap; margin-top: 6px; }
  #hoofdgrafiek .hg-snel:empty { display: none; }
  #hoofdgrafiek .hg-snel button {
    border: 0; background: rgba(17,17,17,.06); padding: 7px 12px; border-radius: 999px; cursor: pointer;
    font: 700 12.5px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #111111;
  }
  #hoofdgrafiek .hg-snel button.on { color: #ffffff; background: #111111; }
  /* De schakelaar voor inleg en rendement: een knop met een klein knopje erin. */
  #hoofdgrafiek .hg-sw { display: block; flex: none; width: 26px; height: 16px; border-radius: 999px; background: rgba(17,17,17,.22); position: relative; transition: background .2s; }
  #hoofdgrafiek .hg-sw::after {
    content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%;
    background: #ffffff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform .22s cubic-bezier(.3,1.4,.5,1);
  }
  #hoofdgrafiek .hg-knop-tgl[aria-pressed="true"] .hg-sw { background: #1dbc00; }
  #hoofdgrafiek .hg-knop-tgl[aria-pressed="true"] .hg-sw::after { transform: translateX(10px); }
  .hg-tik { position: fixed; left: -200px; top: 0; opacity: 0; pointer-events: none; }
  @media (prefers-reduced-motion: reduce) {
    #hoofdgrafiek .hg-in, #hoofdgrafiek .hg-vouw, #hoofdgrafiek .hg-glijder,
    #hoofdgrafiek .hg-pill, #hoofdgrafiek .hg-sw::after { animation: none; transition: none; }
  }