/* ═══════════════════════════════════════════════════════════════════════════
   Vibe Home — aanvulling op de formulierbranding
   Laadt ná vh-form.css.

   Hier staat UITSLUITEND wat vh-form.css niet dekt. De vragenlijst zelf — de
   balk, de stappen, de keuzekaarten, de velden, de navigatie — komt daar
   vandaan en wordt hier niet overschreven. Zou dat wel gebeuren, dan bestond er
   een tweede formulierbranding naast de eerste en zou een kleurwijziging in
   vh.css maar de helft van de site bereiken.

   Twee soorten aanvulling, en het verschil is opzettelijk zichtbaar in de naam:

     .vhF-…   algemene formulierpatronen die vh-form.css nog niet had, maar die
              op elk formulier thuishoren: een getalveld met eenheid, een
              foutregel, een "weet ik niet"-uitweg.
     .vhS-…   schermen die alleen de scan heeft: het controleoverzicht, het
              resultaat en het bedankscherm.

   Alles gebruikt de tokens uit vh.css.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── getalveld met eenheid of stapper ────────────────────────────────────────
   Eén rij met het invoerveld in het midden. De eenheid is geen placeholder maar
   een vast achtervoegsel: een placeholder verdwijnt zodra je typt, en juist dan
   wil je nog zien of er kWh of km verwacht wordt. */
.vhF-num{display:flex;align-items:stretch;background:#fff;border:1.5px solid var(--line);border-radius:var(--r-m);overflow:hidden;transition:border-color .18s var(--ease),box-shadow .18s var(--ease)}
.vhF-num:focus-within{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(48,197,240,.18)}
.vhF-num input{flex:1;min-width:0;border:0;outline:0;background:none;padding:15px 16px;font:400 16.5px/1.4 var(--fb);color:var(--ink)}
.vhF-num input::placeholder{color:var(--ink-3)}
.vhF-num .pre{display:grid;place-items:center;padding-left:16px;font:400 16.5px/1 var(--fb);color:var(--ink-2)}
.vhF-num .unit{display:grid;place-items:center;padding:0 16px;font:500 13.5px/1 var(--fb);color:var(--ink-3);background:var(--warm);border-left:1px solid var(--line-2);white-space:nowrap}
.vhF-num .stp{width:52px;flex:none;border:0;background:var(--warm);color:var(--ink-2);font-size:20px;line-height:1;cursor:pointer;transition:background .18s var(--ease),color .18s var(--ease)}
.vhF-num .stp:hover{background:var(--pale);color:var(--cyan-ink)}
.vhF-num .stp:first-child{border-right:1px solid var(--line-2)}
.vhF-num .stp:last-child{border-left:1px solid var(--line-2)}
.vhF-f.bad .vhF-num{border-color:#C4362B}
.vhF-f.bad .vhF-num:focus-within{box-shadow:0 0 0 3px rgba(196,54,43,.18)}

/* één veld met zijn label, hulp, fout en waarschuwing
   vh-form.css zet de afstand tot de vraag op .vhF-fields; een LOS veld valt
   daarbuiten en plakte daardoor tegen de toelichting aan. */
.vhF-f{display:grid;gap:7px}
.vhF-step>.vhF-f,.vhF-step>.vhF-grp{margin-top:clamp(24px,3vw,36px)}
.vhF-f+.vhF-f{margin-top:18px}
.vhF-f>label{font:600 11px/1 var(--fm);letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3)}
.vhF-f .hint,.vhF-err,.vhF-warn{display:flex;align-items:flex-start;gap:8px;font-size:13.5px;line-height:1.55}
.vhF-f .hint{color:var(--ink-3)}
.vhF-err{color:#C4362B;display:none}
.vhF-warn{color:#8A5A00;display:none}
.vhF-err.show,.vhF-warn.show{display:flex}
.vhF-err svg,.vhF-warn svg,.vhF-f .hint svg{width:15px;height:15px;flex:none;margin-top:1px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

/* ── de uitweg: "weet ik niet" ───────────────────────────────────────────────
   Bewust een aparte, rustige knop en geen extra keuzekaart. Het is geen
   antwoord op de vraag maar een manier om hem over te slaan; als hij eruitziet
   als de andere opties, kiezen mensen hem omdat hij er staat. */
.vhF-skip{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:12px}
.vhF-skip button{border:1.5px solid var(--line);background:#fff;border-radius:var(--pill);padding:9px 16px;font:600 13.5px/1 var(--fb);color:var(--ink-2);cursor:pointer;transition:all .2s var(--ease)}
.vhF-skip button:hover{border-color:var(--cyan);color:var(--cyan-ink)}
.vhF-skip button.on{background:var(--pale);border-color:var(--cyan);color:var(--cyan-dark)}
.vhF-skip .n{font-size:13.5px;color:var(--ink-3)}

/* terugvalvraag: verschijnt pas als het exacte getal niet gegeven wordt */
.vhF-fb{margin-top:18px;padding:18px;background:var(--warm);border:1px solid var(--line-2);border-radius:var(--vhF-r,14px)}
.vhF-fb .l{font:600 15px/1.3 var(--fd);letter-spacing:-.012em;color:var(--ink)}
.vhF-fb .d{font-size:13.5px;line-height:1.5;color:var(--ink-2);margin-top:5px}
.vhF-fb .vhF-opts{margin-top:14px}

/* groep keuzes met een eigen kopje binnen één stap */
.vhF-grp{margin-top:clamp(24px,3vw,36px)}
.vhF-grp>.l{display:block;font:600 11px/1 var(--fm);letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3);margin-bottom:10px}
.vhF-grp .vhF-opts{margin-top:0}
.vhF-mini{font-size:13.5px;color:var(--ink-3);margin-top:12px}

/* ── melding in de flow ──────────────────────────────────────────────────── */
.vhF-note{display:flex;gap:12px;margin-top:20px;padding:16px 18px;border-radius:var(--vhF-r,14px);background:var(--pale);border:1px solid var(--pale-2);font-size:14px;line-height:1.55;color:var(--ink-2)}
.vhF-note svg{width:16px;height:16px;flex:none;margin-top:2px;fill:none;stroke:var(--cyan-ink);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.vhS-alert{display:flex;gap:12px;margin-top:22px;padding:18px 20px;border-radius:var(--vhF-r,14px);background:var(--warm);border:1px solid var(--line-2);font-size:14px;line-height:1.55;color:var(--ink-2)}
.vhS-alert.err{background:#FDF3F2;border-color:#F0D5D2}
.vhS-alert b{display:block;font:600 15.5px/1.35 var(--fd);letter-spacing:-.015em;color:var(--ink)}
.vhS-alert p{margin-top:5px}
.vhS-alert .btn{width:auto;margin-top:14px}
.vhS-alert svg{width:16px;height:16px;flex:none;margin-top:2px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

/* ── controlescherm ──────────────────────────────────────────────────────────
   Eén rij per antwoord, met de wijzigknop rechts. Geen kaartranden per rij:
   het is een lijst om na te lezen, geen reeks keuzes om te maken. */
.vhS-rev{margin-top:clamp(24px,3vw,34px);border:1px solid var(--line-2);border-radius:var(--vhF-r,14px);overflow:hidden;background:#fff}
.vhS-row{display:grid;grid-template-columns:minmax(120px,.7fr) 1fr auto;gap:16px;align-items:center;padding:15px 18px;border-bottom:1px solid var(--line-2)}
.vhS-row:last-child{border-bottom:0}
.vhS-row .k{font:600 13.5px/1.35 var(--fb);color:var(--ink-3)}
.vhS-row .v{font:500 15px/1.4 var(--fb);color:var(--ink);min-width:0;overflow-wrap:anywhere}
.vhS-row .v small{display:block;font:400 13px/1.45 var(--fb);color:var(--ink-3);margin-top:3px}
.vhS-row .v em{display:inline-block;font:600 10.5px/1 var(--fm);letter-spacing:.09em;text-transform:uppercase;font-style:normal;color:var(--cyan-dark);background:var(--pale);border-radius:var(--pill);padding:4px 8px;margin-right:8px}
.vhS-row .x{background:none;border:0;cursor:pointer;font:600 13.5px/1 var(--fb);color:var(--cyan-ink);white-space:nowrap;padding:6px}
.vhS-row .x:hover{color:var(--cyan-dark);text-decoration:underline}

/* ── resultaat ───────────────────────────────────────────────────────────── */
.vhS-card{margin-top:clamp(24px,2.8vw,34px);background:#fff;border:1px solid var(--line-2);border-radius:var(--vhF-r,14px);padding:clamp(22px,2.6vw,32px);box-shadow:var(--sh-s)}
.vhS-card h3{font:600 clamp(21px,2.2vw,27px)/1.2 var(--fd);letter-spacing:-.025em;margin:12px 0 0}
.vhS-badge{display:inline-flex;font:600 10.5px/1 var(--fm);letter-spacing:.09em;text-transform:uppercase;color:#fff;background:var(--cyan);border-radius:var(--pill);padding:6px 11px}
.vhS-figs{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:14px;margin-top:22px}
.vhS-figs>div{background:var(--warm);border-radius:var(--r-m);padding:16px}
.vhS-figs .v{font:600 clamp(19px,2vw,24px)/1.15 var(--fd);letter-spacing:-.025em;color:var(--ink);overflow-wrap:anywhere}
.vhS-figs .k{font-size:13px;line-height:1.4;color:var(--ink-3);margin-top:6px}
.vhS-fine{font-size:13px;line-height:1.55;color:var(--ink-3);margin-top:16px}

.vhS-sum{margin-top:26px}
.vhS-sum .l{font:600 11px/1 var(--fm);letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3)}
.vhS-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:11px}
.vhS-chip{background:var(--warm);border:1px solid var(--line-2);border-radius:var(--pill);padding:7px 13px;font:400 13.5px/1 var(--fb);color:var(--ink-2)}
.vhS-chip b{color:var(--ink);font-weight:600}

/* ── stappenlijst (bedankt / projectroute) ───────────────────────────────── */
.vhS-steps{display:grid;gap:12px;margin-top:clamp(24px,2.8vw,34px)}
.vhS-step{background:#fff;border:1px solid var(--line-2);border-radius:var(--r-m);padding:18px}
.vhS-step b{font:600 15.5px/1.3 var(--fd);letter-spacing:-.015em}
.vhS-step p{font-size:14px;line-height:1.55;color:var(--ink-2);margin-top:6px}

/* ── bedankt ─────────────────────────────────────────────────────────────── */
.vhS-done{text-align:center}
.vhS-done .eyebrow{justify-content:center}
.vhS-done .vhF-help{margin-inline:auto}
.vhS-check{width:58px;height:58px;border-radius:var(--pill);background:var(--pale);color:var(--cyan-dark);display:grid;place-items:center;margin:0 auto 18px}
.vhS-check svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

/* ── contactstap ─────────────────────────────────────────────────────────── */
.vhS-trust{display:flex;flex-wrap:wrap;gap:10px 20px;margin-top:22px;font-size:13.5px;color:var(--ink-3)}
.vhS-trust span{display:inline-flex;align-items:center;gap:7px}
.vhS-trust svg{width:15px;height:15px;flex:none;fill:none;stroke:var(--cyan);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.vhS-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none}
.vhS-privacy{font-size:13.5px;line-height:1.55;color:var(--ink-3);margin-top:20px}

/* de centrale koppen op resultaat- en bedankschermen */
.vhS-head{text-align:center}
.vhS-head .eyebrow{justify-content:center}
.vhS-head .vhF-help{margin-inline:auto}

@media(max-width:680px){
  .vhS-row{grid-template-columns:1fr auto;gap:6px 12px;align-items:start;padding:14px 16px}
  .vhS-row .k{grid-column:1;grid-row:1}
  .vhS-row .v{grid-column:1;grid-row:2}
  .vhS-row .x{grid-column:2;grid-row:1/3;align-self:center}
  .vhS-figs{grid-template-columns:1fr 1fr}
  /* Het aantal vakjes hangt af van wat het model levert (zie `adviesFigs`):
     zonder omvormervermogen zijn het er drie. In twee kolommen laat een
     oneven laatste vakje anders een gat achter; zo vult het de rij. */
  .vhS-figs>div:last-child:nth-child(odd){grid-column:1/-1}
}
@media(max-width:380px){
  .vhS-figs{grid-template-columns:1fr}
}

/* Tijdens de ~200 ms tussen "gekozen" en de volgende vraag ligt de invoer stil.
   Het slot in de JS voorkomt de dubbele stapwissel al; dit maakt zichtbaar én
   voelbaar dat er niets meer te tikken valt, zodat een tweede tik niet in het
   niets verdwijnt maar simpelweg niet aankomt. De gekozen kaart blijft gewoon
   staan — dat is juist wat je in die 200 ms wilt zien. */
.vhF-gaat{pointer-events:none}
.vhF-gaat .vhF-opt{cursor:default}
/* De vraagkop krijgt na een stapwissel de focus zodat schermlezers de nieuwe
   vraag voorlezen. Geen zichtbare ring: het is geen bedienbaar element. */
.vhF-q:focus{outline:none}

/* ── Eindscherm: advies én formulier onder elkaar ────────────────────────
   De kop markeert de overgang van "dit is je advies" naar "laat je gegevens
   achter". Geen accordeon, geen modal: gewoon de volgende sectie op dezelfde
   pagina, zodat de volgorde het verhaal draagt. */
.vhS-lead{margin-top:clamp(30px,3.6vw,44px);padding-top:clamp(22px,2.6vw,30px);border-top:1px solid var(--line-2)}
.vhS-leadKop{font:700 clamp(19px,2vw,23px)/1.25 var(--fd);letter-spacing:-.02em;color:var(--ink);margin:0 0 6px}
.vhS-lead+.vhS-trust{margin-top:16px}

/* Adres dat al bekend is uit de instapwidget: tonen, niet opnieuw vragen. */
.vhS-adres{margin-top:14px}
.vhS-adres .row[hidden]{display:none}   /* `.row` is display:flex; zonder deze regel wint dat van [hidden] */
.vhS-adresRegel{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;padding:12px 14px;border:1px solid var(--line-2);border-radius:10px;background:var(--pale)}
.vhS-adresRegel .l{font:600 11px/1 var(--fm);letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3)}
.vhS-adresRegel b{font-size:15px;color:var(--ink)}
.vhS-adresRegel .lnk{margin-left:auto;background:none;border:0;padding:0;font:inherit;font-size:13.5px;color:var(--cyan-ink);text-decoration:underline;cursor:pointer}
.vhS-ref{margin-top:10px;font-size:13.5px;color:var(--ink-2)}
.vhS-ref b{font-family:var(--fm);font-size:13px}