/**
 * Verbouwprijs — opmaak van de rekentools.
 *
 * Één set tokens, alle acht tools gebruiken dezelfde. Werkt in licht en donker.
 * Body op 17px, want het publiek is huiseigenaar en vaak wat ouder; dat is
 * dezelfde keuze als bij Labelcert en om dezelfde reden.
 */

.vp-tool {
  --vp-inkt: #16181C;
  --vp-inkt-2: #4E555E;
  --vp-inkt-3: #666E77;
  --vp-vlak: #FFFFFF;
  --vp-vlak-2: #F0F1EE;
  --vp-lijn: #DEDFDA;
  --vp-lijn-2: #C7C9C2;
  --vp-accent: #14505E;
  --vp-accent-diep: #0D3B46;
  --vp-accent-vlak: #E5EEF1;
  --vp-let-op: #8A5D10;
  --vp-let-op-vlak: #F7EFDD;

  --vp-r: 4px;
  --vp-schaduw: 0 1px 2px rgba(20, 25, 30, .05), 0 10px 28px -14px rgba(20, 25, 30, .16);

  max-width: 720px;
  margin: 0 auto;
  color: var(--vp-inkt);
  font-size: 17px;
  line-height: 1.6;
  font-weight: 500;
  font-family: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/**
 * Donker volgt de site, niet het besturingssysteem.
 *
 * Dit stond eerst achter prefers-color-scheme. Gevolg op de live site: het
 * WordPress-thema rendert licht, ook op een Mac die in donkere modus staat,
 * en dan stond er een zwarte rekentool midden op een witte pagina. De tool
 * hoort bij de pagina waar hij in staat, niet bij het systeem van de
 * bezoeker. Wordt de site zelf donker, zet dan data-thema="donker" op
 * .vp-tool en deze palet komt terug.
 */
.vp-tool[data-thema="donker"] {
  --vp-inkt: #EDEEE9;
  --vp-inkt-2: #A8B0B8;
  --vp-inkt-3: #828A93;
  --vp-vlak: #1B1F24;
  --vp-vlak-2: #22272D;
  --vp-lijn: #2C3138;
  --vp-lijn-2: #3C424A;
  --vp-accent: #5FB3A1;
  --vp-accent-diep: #8ACFC0;
  --vp-accent-vlak: #123037;
  --vp-let-op: #D8AC5C;
  --vp-let-op-vlak: #312711;
  --vp-schaduw: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 28px -14px rgba(0, 0, 0, .6);
}

.vp-tool *,
.vp-tool *::before,
.vp-tool *::after { box-sizing: border-box; }

/* ---------- formulier ---------- */

.vp-form {
  background: var(--vp-vlak);
  border: 1px solid var(--vp-lijn);
  border-radius: var(--vp-r);
  padding: clamp(20px, 4vw, 30px);
  box-shadow: var(--vp-schaduw);
}

.vp-form__titel {
  margin: 0 0 22px;
  font-size: clamp(22px, 3.4vw, 28px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.015em;
  text-wrap: balance;
}

.vp-velden { display: grid; gap: 22px; }

.vp-label {
  display: block;
  font-weight: 700;
  font-size: 16px;
  margin-bottom: 7px;
}

.vp-invoerregel { display: flex; align-items: stretch; gap: 10px; }

.vp-invoer {
  flex: 1 1 auto;
  min-width: 0;
  font: inherit;
  font-size: 17px;
  color: var(--vp-inkt);
  background: var(--vp-vlak-2);
  border: 1px solid transparent;
  border-radius: var(--vp-r);
  padding: 11px 13px;
  transition: background .12s ease, border-color .12s ease;
}

.vp-invoer:hover { background: var(--vp-lijn); }

.vp-invoer:focus {
  outline: none;
  background: var(--vp-vlak);
  border-color: var(--vp-accent);
  box-shadow: 0 0 0 3px var(--vp-accent-vlak);
}

.vp-select { width: 100%; }

.vp-achter,
.vp-voor {
  display: flex;
  align-items: center;
  color: var(--vp-inkt-2);
  font-size: 15px;
  white-space: nowrap;
}

.vp-hulp {
  margin: 7px 0 0;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--vp-inkt-2);
}

/* schakelaar voor ja/nee */

.vp-schakel {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  cursor: pointer;
}

.vp-schakel input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.vp-schakel__vak {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin-top: 2px;
  border: 1.5px solid var(--vp-lijn-2);
  border-radius: 3px;
  background: var(--vp-vlak-2);
  position: relative;
  transition: background .12s ease, border-color .12s ease;
}

.vp-schakel__vak::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 3px;
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg) scale(0);
  transition: transform .12s ease;
}

.vp-schakel input:checked + .vp-schakel__vak {
  background: var(--vp-accent);
  border-color: var(--vp-accent);
}

.vp-schakel input:checked + .vp-schakel__vak::after { transform: rotate(45deg) scale(1); }

.vp-schakel input:focus-visible + .vp-schakel__vak {
  box-shadow: 0 0 0 3px var(--vp-accent-vlak);
}

.vp-schakel__tekst { font-weight: 700; font-size: 16px; }

/* knop */

.vp-knop {
  margin-top: 24px;
  width: 100%;
  font: inherit;
  font-size: 17px;
  font-weight: 700;
  color: #fff;
  background: var(--vp-accent);
  border: none;
  border-radius: var(--vp-r);
  padding: 14px 22px;
  cursor: pointer;
  transition: background .12s ease;
}

.vp-knop:hover { background: var(--vp-accent-diep); }

.vp-knop:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--vp-accent-vlak), 0 0 0 5px var(--vp-accent);
}

.vp-knop--klein {
  width: auto;
  margin-top: 0;
  font-size: 16px;
  padding: 11px 18px;
  white-space: nowrap;
}

/* ---------- uitkomst ---------- */

.vp-uitkomst {
  margin-top: 26px;
  background: var(--vp-vlak);
  border: 1px solid var(--vp-lijn);
  border-radius: var(--vp-r);
  padding: clamp(20px, 4vw, 30px);
  box-shadow: var(--vp-schaduw);
}

.vp-melding {
  margin: 0 0 16px;
  font-weight: 600;
  background: var(--vp-let-op-vlak);
  color: var(--vp-let-op);
  font-size: 15px;
  padding: 10px 13px;
  border-radius: var(--vp-r);
}

.vp-uitkomst__label {
  margin: 0;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--vp-inkt-3);
}

.vp-bedrag {
  margin: 6px 0 2px;
  font-size: clamp(28px, 5.6vw, 42px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.025em;
  color: var(--vp-accent);
  font-variant-numeric: tabular-nums;
}

.vp-bedrag__tot {
  font-size: .5em;
  font-weight: 500;
  color: var(--vp-inkt-2);
  letter-spacing: 0;
}

.vp-uitkomst__eenheid {
  margin: 0 0 4px;
  font-size: 14.5px;
  color: var(--vp-inkt-2);
}

.vp-waarschuwing {
  margin: 18px 0 0;
  font-weight: 600;
  background: var(--vp-let-op-vlak);
  color: var(--vp-let-op);
  font-size: 15px;
  line-height: 1.5;
  padding: 12px 14px;
  border-radius: var(--vp-r);
}

.vp-kop {
  margin: 30px 0 12px;
  font-size: 18px;
  font-weight: 700;
}

.vp-kop--klein { font-size: 16.5px; margin-bottom: 6px; }

/* opbouwtabel */

.vp-posten {
  width: 100%;
  border-collapse: collapse;
  font-size: 15.5px;
}

.vp-posten th {
  text-align: left;
  font-weight: 600;
  padding: 11px 14px 11px 0;
  border-bottom: 1px solid var(--vp-lijn);
  vertical-align: baseline;
}

.vp-posten td {
  padding: 11px 0;
  border-bottom: 1px solid var(--vp-lijn);
  vertical-align: baseline;
}

.vp-post__naam { display: block; font-weight: 600; }

.vp-post__uitleg {
  display: block;
  margin-top: 2px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--vp-inkt-2);
}

.vp-post__bedrag {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.vp-posten tfoot th,
.vp-posten tfoot td {
  border-bottom: none;
  border-top: 2px solid var(--vp-lijn-2);
  font-weight: 800;
  padding-top: 13px;
}

.vp-noot {
  margin: 16px 0 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--vp-inkt-2);
}

.vp-lijst {
  margin: 0;
  padding-left: 21px;
  font-size: 15.5px;
  color: var(--vp-inkt-2);
}

.vp-lijst li { margin-bottom: 6px; }

/* terugkoppeling */

.vp-terugkoppeling {
  margin-top: 30px;
  padding-top: 24px;
  border-top: 1px solid var(--vp-lijn);
}

.vp-terugkoppeling__uitleg {
  margin: 0 0 14px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--vp-inkt-2);
}

.vp-terugkoppeling__form .vp-invoerregel { max-width: 420px; }

@media (max-width: 480px) {
  .vp-terugkoppeling__form .vp-invoerregel { flex-wrap: wrap; }
  .vp-knop--klein { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .vp-tool * { transition: none !important; }
}

/* ---------- vertrouwensbalk ---------- */
/*
 * Boven de tool, zoals BerekenHet in zijn kop doet. Verschil: wij zeggen het
 * per rekentool en per bedrag, want bron en ijkdatum staan in de kentallen.
 */

.vp-balk {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  align-items: center;
  margin-bottom: 14px;
  padding: 10px 14px;
  background: var(--vp-vlak-2);
  border-radius: var(--vp-r);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--vp-inkt-2);
}

.vp-balk__item { display: inline-flex; align-items: center; gap: 6px; }

.vp-balk__item::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: .55;
  flex: 0 0 auto;
}

.vp-balk__item--goed { color: #2E6B4F; }
.vp-balk__item--goed::before { opacity: 1; }
.vp-balk__item--let-op { color: var(--vp-let-op); }
.vp-balk__item--let-op::before { opacity: 1; }

.vp-tool[data-thema="donker"] .vp-balk__item--goed { color: #6FBF95; }

/* herkomst per bedrag: het enige dat de concurrentie niet toont */

.vp-post__bron {
  display: block;
  margin-top: 3px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .01em;
  color: var(--vp-inkt-3);
}

@media (max-width: 480px) {
  .vp-balk { font-size: 12.5px; gap: 4px 12px; }
}

/* ---------- schematische tekening bij de invoervelden ---------- */

.vp-tekening {
  margin: 0 0 22px;
  padding: 12px 14px;
  background: var(--vp-vlak-2);
  border: 1px solid var(--vp-lijn);
  border-radius: var(--vp-r);
}

.vp-tekening svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 240px;
  font-family: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}