/* "Stekkerbatterij of thuisbatterij?" — hoort bij assets/js/stekker-vergelijker.js.
   Leunt op de tokens van dysun.css (--c-*), met eigen terugvalwaarden zodat dezelfde
   stylesheet ook op een andere site werkt: daar alleen de --sv-*-variabelen overschrijven. */
.sv {
  --sv-geel: var(--c-yellow, #FDC500);
  --sv-inkt: var(--c-black, #0A0A0A);
  --sv-bg: var(--c-bg, #111111);
  --sv-s1: var(--c-surface-1, #161616);
  --sv-s2: var(--c-surface-2, #1E1E1E);
  --sv-s3: var(--c-surface-3, #262626);
  --sv-s4: var(--c-surface-4, #303030);
  --sv-rand: var(--c-border, rgba(255,255,255,.07));
  --sv-rand-sterk: var(--c-border-strong, rgba(255,255,255,.14));
  --sv-rand-geel: var(--c-border-yellow, rgba(253,197,0,.35));
  --sv-geel-zacht: var(--c-yellow-dim, rgba(253,197,0,.12));
  --sv-goudtekst: var(--c-gold-text, #FDC500);
  --sv-tekst: var(--c-text, #F0F0F0);
  --sv-zacht: var(--c-text-soft, #B0B0B0);
  --sv-stil: var(--c-text-muted, #707070);
  /* grafiek: netstroom, zonne-overschot en de lichte schaduw van wat nog komt */
  --sv-net: #5A5D62;
  --sv-sur: #303030;
  --sv-spook: rgba(255,255,255,.06);
  --sv-spook2: rgba(255,255,255,.04);
  --sv-raster: rgba(255,255,255,.05);
  --sv-nullijn: rgba(255,255,255,.25);
  --sv-r: 14px;
  color: var(--sv-tekst);
  font-variant-numeric: tabular-nums;
  outline: none;
}
/* dysun.energy heeft eigen tokennamen (assets/css/site.css daar), en licht als standaard. */
.sv[data-site="dysun-energy"] {
  --sv-geel: var(--gold, #FDC500);
  --sv-inkt: var(--ink, #0A0A0A);
  --sv-bg: var(--bg, #111111);
  --sv-s1: var(--s1, #161616);
  --sv-s2: var(--s2, #1E1E1E);
  --sv-s3: var(--s3, #262626);
  --sv-s4: var(--line-2, #303030);
  --sv-rand: var(--line, rgba(255,255,255,.07));
  --sv-rand-sterk: var(--line-2, rgba(255,255,255,.14));
  --sv-rand-geel: rgba(253,197,0,.5);
  --sv-geel-zacht: var(--gold-dim, rgba(253,197,0,.12));
  --sv-goudtekst: var(--gold-tx, #FDC500);
  --sv-tekst: var(--tx, #F0F0F0);
  --sv-zacht: var(--tx-soft, #B0B0B0);
  --sv-stil: var(--tx-mut, #8A8A8A);
  font-family: var(--sans, inherit);
}
/* Het kader om de tool op dysun.energy (op dysunenergy.nl doet de pagina dat zelf). */
.sv-kader { background: var(--bg, #111); border: 1px solid var(--line, rgba(255,255,255,.07)); border-radius: 14px; padding: 22px 24px 24px; }
.sv-hint { font-size: 14px; color: var(--tx-mut, #8A8A8A); margin: 0 0 14px; }
@media (max-width: 640px) { .sv-kader { padding: 16px 14px 18px; } }
.sv[data-site="dysun-energy"] h3 { font-family: var(--sans, inherit); font-stretch: normal; letter-spacing: normal; text-transform: none; }
html[data-theme="light"] .sv {
  --sv-net: #8C9096;
  --sv-sur: #DADAD4;
  --sv-spook: rgba(17,17,17,.06);
  --sv-spook2: rgba(17,17,17,.04);
  --sv-raster: rgba(17,17,17,.07);
  --sv-nullijn: rgba(17,17,17,.3);
}
/* De algemene tabelstijl van de site (kopbalk, hoofdletters, hover) hoort niet in de tool. */
.sv thead th { background: none; text-transform: none; letter-spacing: normal; }
.sv tbody tr { border-bottom: 0; }
.sv tbody tr:hover { background: none; }
.sv tbody td { vertical-align: baseline; }
.sv-laden { padding: 48px 0; color: var(--sv-zacht); text-align: center; min-height: 420px; }

/* ---------- huishouden kiezen ---------- */
.sv-kop { display: flex; flex-direction: column; gap: 10px; }
.sv-profielen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.sv-profielen button {
  font: inherit; color: var(--sv-tekst); background: var(--sv-s2); border: 1px solid var(--sv-rand-sterk);
  border-radius: 10px; padding: 12px 16px; text-align: left; cursor: pointer;
  transition: transform .16s ease, border-color .16s ease, background .16s ease;
}
.sv-profielen button:hover { border-color: var(--sv-rand-geel); }
.sv-profielen button:active { transform: scale(.98); }
.sv-profielen button:focus-visible { outline: 2px solid var(--sv-geel); outline-offset: 2px; }
.sv-profielen b { display: block; font-size: 17px; font-weight: 650; }
.sv-profielen span { display: block; font-size: 13.5px; color: var(--sv-zacht); margin-top: 3px; }
.sv-profielen button[aria-pressed="true"] { background: var(--sv-geel-zacht); border-color: var(--sv-geel); }
.sv-profielen button[aria-pressed="true"] b { color: var(--sv-goudtekst); }
.sv-dag { font-size: 14px; color: var(--sv-stil); }

/* ---------- grafieken en kaarten ---------- */
.sv-stage { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; margin-top: 18px; }
.sv-grafieken { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.sv-gh { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; }
.sv-gh + .sv-chart + .sv-gh { margin-top: 8px; }
.sv-gh b { font-size: 17px; font-weight: 650; }
.sv-gh span { font-size: 13.5px; color: var(--sv-stil); }
.sv-zoomtag {
  margin-left: auto; align-self: center; font-size: 13px !important; font-weight: 650; color: var(--sv-inkt) !important;
  background: var(--sv-geel); border-radius: 999px; padding: 3px 12px; opacity: 0; transition: opacity .3s ease;
}
.sv-zoomtag.sv-show { opacity: 1; }
.sv-zoomtag:empty { padding: 0; }
.sv-chart { display: block; width: 100%; height: auto; overflow: visible; cursor: pointer; touch-action: pan-y; }
.sv-chart .sv-raster { stroke: var(--sv-raster); }
.sv-chart .sv-nul { stroke: var(--sv-nullijn); }
.sv-chart .sv-as { fill: var(--sv-stil); }
.sv-chart .sv-spook { fill: var(--sv-spook); }
.sv-chart .sv-spook2 { fill: var(--sv-spook2); }
.sv-chart .sv-sur { fill: var(--sv-sur); }
.sv-chart .sv-net { fill: var(--sv-net); }
.sv-chart .sv-bat { fill: var(--sv-geel); }
.sv-chart .sv-grens { stroke: var(--sv-tekst); stroke-width: 1.5; stroke-dasharray: 6 5; }
.sv-chart .sv-label { fill: var(--sv-tekst); font-weight: 600; stroke: var(--sv-bg); stroke-width: 5px; paint-order: stroke; stroke-linejoin: round; }
.sv-chart .sv-cursor { stroke: var(--sv-geel); stroke-width: 2; }

.sv-legenda { display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: 13.5px; color: var(--sv-zacht); margin-top: 2px; }
.sv-legenda i { display: inline-block; width: 13px; height: 13px; border-radius: 6px; vertical-align: -2px; margin-right: 7px; }
.sv-l-bat { background: var(--sv-geel); }
.sv-l-net { background: var(--sv-net); }
.sv-l-sur { background: var(--sv-sur); border: 1px solid var(--sv-rand-sterk); }

.sv-bediening { display: flex; align-items: center; gap: 16px; margin-top: 4px; }
.sv-play {
  font: inherit; width: 52px; height: 52px; border-radius: 50%; border: 0; background: var(--sv-geel); color: var(--sv-inkt);
  cursor: pointer; display: grid; place-items: center; flex: none; transition: transform .16s ease;
}
.sv-play:active { transform: scale(.94); }
.sv-play:focus-visible { outline: 2px solid var(--sv-tekst); outline-offset: 3px; }
.sv-play svg { width: 22px; height: 22px; fill: currentColor; }
.sv input[type=range] { -webkit-appearance: none; appearance: none; flex: 1; min-width: 0; height: 44px; background: transparent; cursor: pointer; margin: 0; }
.sv input[type=range]:focus-visible { outline: 2px solid var(--sv-geel); outline-offset: 2px; border-radius: 6px; }
.sv input[type=range]::-webkit-slider-runnable-track { height: 8px; border-radius: 6px; background: linear-gradient(to right, var(--sv-geel) var(--p, 0%), var(--sv-s4) var(--p, 0%)); }
.sv input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; border-radius: 50%; background: var(--sv-geel); border: 5px solid var(--sv-bg); margin-top: -10px; }
.sv input[type=range]::-moz-range-track { height: 8px; border-radius: 6px; background: var(--sv-s4); }
.sv input[type=range]::-moz-range-progress { height: 8px; border-radius: 6px; background: var(--sv-geel); }
.sv input[type=range]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--sv-geel); border: 5px solid var(--sv-bg); }
.sv-klok { font-size: 26px; font-weight: 700; min-width: 84px; text-align: right; }

.sv-kaarten { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.sv-kaart { background: var(--sv-s1); border: 1px solid var(--sv-rand); border-radius: var(--sv-r); padding: 14px 18px; }
.sv-kaart-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.sv-kaart-top b { font-size: 17px; font-weight: 700; }
.sv-kaart-top span { font-size: 13.5px; color: var(--sv-stil); }
.sv-meter { height: 12px; border-radius: 6px; background: var(--sv-s3); margin-top: 8px; overflow: hidden; }
.sv-meter div { height: 100%; width: 100%; background: var(--sv-geel); transform-origin: 0 50%; transform: scaleX(0); }
.sv-status { margin-top: 10px; font-size: 16.5px; font-weight: 600; line-height: 1.3; min-height: 2.6em; color: var(--sv-goudtekst); }
.sv-status.sv-limit { color: var(--sv-tekst); }
.sv-kosten { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--sv-rand); font-size: 14px; color: var(--sv-zacht); }
.sv-kosten b { font-size: 22px; font-weight: 700; color: var(--sv-tekst); white-space: nowrap; }
.sv-oordeel {
  flex: 1; background: var(--sv-s2); border: 1px solid var(--sv-rand-geel); border-radius: var(--sv-r); padding: 16px 18px;
  display: flex; flex-direction: column; opacity: .3; transition: opacity .4s ease;
}
.sv-oordeel.sv-show { opacity: 1; }
.sv-oordeel h3 { font-size: 20px; font-weight: 700; color: var(--sv-goudtekst); line-height: 1.2; margin: 0; }
.sv-oordeel p { font-size: 14.5px; color: var(--sv-zacht); line-height: 1.45; margin-top: 8px; }
.sv-oordeel .sv-jaar { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--sv-rand); }
.sv-oordeel .sv-jaar b { color: var(--sv-tekst); }

/* ---------- conclusie ---------- */
.sv-concl {
  position: absolute; inset: 0; z-index: 2; overflow: auto; background: var(--sv-bg); border: 1px solid var(--sv-rand-geel);
  border-radius: 16px; padding: 24px 28px; display: flex; flex-direction: column;
}
.sv-concl[hidden] { display: none; }
.sv-tag { font-size: 13px; color: var(--sv-stil); text-transform: uppercase; letter-spacing: .08em; }
.sv-concl h3 { font-size: 30px; font-weight: 700; color: var(--sv-goudtekst); line-height: 1.12; margin: 6px 0 0; }
.sv-concl > p { font-size: 17px; color: var(--sv-zacht); line-height: 1.45; margin-top: 8px; max-width: 60ch; }
.sv-tabel { margin-top: 18px; overflow-x: auto; }
.sv-tabel table { border-collapse: collapse; width: 100%; min-width: 440px; }
.sv-tabel th, .sv-tabel td { padding: 11px 8px; border-top: 1px solid var(--sv-rand); text-align: right; }
.sv-tabel thead th { border-top: 0; font-size: 13px; font-weight: 600; color: var(--sv-zacht); vertical-align: bottom; padding-top: 0; }
.sv-tabel th:first-child { text-align: left; padding-left: 0; }
.sv-tabel tbody th { font-size: 15.5px; font-weight: 600; color: var(--sv-zacht); }
.sv-tabel td { font-size: 22px; font-weight: 700; color: var(--sv-tekst); white-space: nowrap; }
.sv-tabel td.sv-best { color: var(--sv-goudtekst); }
.sv-knoppen { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; padding-top: 18px; }
.sv-knop {
  font: inherit; font-size: 16px; font-weight: 600; padding: 12px 20px; border-radius: 10px; border: 1px solid var(--sv-rand-sterk);
  background: var(--sv-s2); color: var(--sv-tekst); cursor: pointer;
}
.sv-knop:hover { border-color: var(--sv-rand-geel); }
.sv-knop:focus-visible { outline: 2px solid var(--sv-geel); outline-offset: 2px; }
.sv-hoofd { background: var(--sv-geel); border-color: var(--sv-geel); color: var(--sv-inkt); }
.sv-rechts { margin-left: auto; }

.sv-bronnen { margin-top: 14px; font-size: 12.5px; line-height: 1.5; color: var(--sv-stil); }

/* ---------- zo rekenen we ---------- */
.sv-uitleg { margin-top: 28px; background: var(--sv-s1); border: 1px solid var(--sv-rand); border-radius: var(--sv-r); scroll-margin-top: 90px; }
.sv-uitleg summary { cursor: pointer; padding: 18px 22px; font-size: 18px; font-weight: 700; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.sv-uitleg summary::-webkit-details-marker { display: none; }
.sv-uitleg summary::after { content: '+'; font-size: 24px; font-weight: 400; color: var(--sv-goudtekst); }
.sv-uitleg[open] summary::after { content: '–'; }
.sv-uitleg summary:focus-visible { outline: 2px solid var(--sv-geel); outline-offset: -2px; border-radius: var(--sv-r); }
.sv-uitleg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 40px; padding: 0 22px 22px; }
.sv-uitleg h4 { font-size: 13px; font-weight: 700; color: var(--sv-goudtekst); text-transform: uppercase; letter-spacing: .07em; margin: 18px 0 6px; }
.sv-uitleg-grid > div > h4:first-child { margin-top: 4px; }
.sv-uitleg table { border-collapse: collapse; width: 100%; font-size: 14.5px; }
.sv-uitleg th { font-weight: 600; color: var(--sv-stil); text-align: right; padding: 0 0 4px; font-size: 12.5px; }
.sv-uitleg td { color: var(--sv-tekst); text-align: right; padding: 6px 0 6px 10px; border-top: 1px solid var(--sv-rand); }
.sv-uitleg th:first-child, .sv-uitleg td:first-child { text-align: left; padding-left: 0; }
.sv-sub { display: block; font-size: 12.5px; color: var(--sv-stil); }
.sv-bron { font-size: 12.5px; color: var(--sv-stil); margin-top: 6px; line-height: 1.45; }
.sv-uitleg ol { margin: 0; padding-left: 20px; font-size: 14.5px; color: var(--sv-zacht); line-height: 1.5; }
.sv-uitleg ol li { margin: 4px 0; }
.sv-uitleg ol b, .sv-vb b { color: var(--sv-tekst); font-weight: 600; }
.sv-vb { font-size: 14.5px; color: var(--sv-zacht); line-height: 1.55; background: var(--sv-bg); border: 1px solid var(--sv-rand); border-radius: 10px; padding: 10px 14px; }
.sv-vb p { margin: 4px 0; }
.sv-niet { font-size: 13.5px; color: var(--sv-stil); line-height: 1.5; }

/* ---------- smaller ---------- */
@media (max-width: 960px) {
  .sv-stage { grid-template-columns: minmax(0, 1fr); }
  .sv-kaarten { display: grid; grid-template-columns: 1fr 1fr; }
  .sv-oordeel { grid-column: 1 / -1; }
  .sv-uitleg-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .sv-profielen { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .sv-profielen button { padding: 10px 14px; }
  .sv-profielen b { font-size: 15.5px; }
  .sv-profielen span { font-size: 12.5px; margin-top: 2px; }
  .sv-gh b { font-size: 15.5px; }
  .sv-gh span { font-size: 12.5px; }
  .sv-zoomtag { margin-left: 0; font-size: 12px !important; }
  .sv-legenda { font-size: 12.5px; gap: 4px 14px; }
  .sv-bediening { gap: 12px; }
  .sv-play { width: 48px; height: 48px; }
  .sv-klok { font-size: 22px; min-width: 66px; }
  .sv-kaarten { gap: 10px; }
  .sv-kaart { padding: 12px 14px; }
  .sv-kaart-top { flex-wrap: wrap; gap: 0 8px; }
  .sv-kaart-top b { font-size: 15px; }
  .sv-kaart-top span { font-size: 12.5px; }
  .sv-status { font-size: 14.5px; min-height: 3.9em; }
  .sv-kosten { flex-direction: column; align-items: flex-start; gap: 2px; font-size: 12.5px; }
  .sv-kosten b { font-size: 19px; }
  .sv-concl { padding: 18px 16px; }
  .sv-concl h3 { font-size: 24px; }
  .sv-concl > p { font-size: 15px; }
  /* Smal: per batterij een blok met de drie bedragen onder elkaar, met hun omschrijving ervoor. */
  .sv-tabel table, .sv-tabel tbody, .sv-tabel tr, .sv-tabel th, .sv-tabel td { display: block; min-width: 0; }
  .sv-tabel thead { display: none; }
  .sv-tabel tbody tr { padding: 10px 0; border-top: 1px solid var(--sv-rand); }
  .sv-tabel tbody th { border: 0; padding: 0 0 4px; font-size: 15px; color: var(--sv-tekst); }
  .sv-tabel td { border: 0; padding: 2px 0; font-size: 18px; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
  .sv-tabel td::before { content: attr(data-kop); font-size: 13px; font-weight: 500; color: var(--sv-zacht); white-space: normal; text-align: left; flex: 1; }
  .sv-tabel td.sv-leeg { display: none; }
  .sv-knop { font-size: 15px; padding: 11px 16px; flex: 1 1 auto; }
  .sv-rechts { margin-left: 0; }
  .sv-uitleg summary { padding: 16px; font-size: 16px; }
  .sv-uitleg-grid { padding: 0 16px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .sv * { transition: none !important; }
}