/* Zonsom: de onderdelen (knop, veld, kaart, getal met bron, balken, oordeel, advertentieplek).
   Bouwt alleen op tokens.css en lettertype/lettertypen.css; de site mag dit bestand overnemen. */
.zs-basis { background: var(--zs-papier) var(--zs-korrel); color: var(--zs-inkt); font: 400 var(--zs-maat-3)/var(--zs-regel-tekst) var(--zs-tekst); font-variant-numeric: var(--zs-cijfers); }
.zs-basis *, .zs-basis *::before, .zs-basis *::after { box-sizing: border-box; }
.zs-basis h1, .zs-basis h2, .zs-basis h3 { font-family: var(--zs-kop); font-weight: 700; line-height: var(--zs-regel-kop); margin: 0; }
.zs-basis p { margin: 0; }
.zs-basis a { color: var(--zs-inkt); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.zs-basis :focus-visible { outline: 3px solid var(--zs-inkt); outline-offset: 3px; }
.zs-bron, .zs-tijd, .zs-hulp { font-size: var(--zs-maat-2); line-height: 1.4; } /* nooit kleiner dan 18 */
.zs-zacht { color: var(--zs-zacht); }

/* Knoppen */
.zs-knop { display: inline-flex; align-items: center; justify-content: center; gap: var(--zs-r-2); min-height: var(--zs-aanraak); padding: 0 var(--zs-r-5); border: var(--zs-lijn) solid var(--zs-rood); border-radius: var(--zs-hoek); background: var(--zs-rood); color: var(--zs-oprood); font: 700 var(--zs-maat-3)/1.2 var(--zs-tekst); text-decoration: none; cursor: pointer; }
.zs-basis a.zs-knop { color: var(--zs-oprood); }
.zs-basis a.zs-knop--tweede, .zs-basis a.zs-knop--stil { color: var(--zs-inkt); }
.zs-knop--tweede { background: transparent; color: var(--zs-inkt); border-color: var(--zs-inkt); }
.zs-knop--stil { background: transparent; border-color: transparent; color: var(--zs-inkt); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; padding: 0 var(--zs-r-3); }
.zs-knop[disabled] { background: var(--zs-vlak); border: var(--zs-lijn) dashed var(--zs-rand); color: var(--zs-zacht); cursor: not-allowed; }
.zs-knop svg, .zs-icoon { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Invulvelden: aantal panelen, verbruik, offertebedrag voor een batterij */
.zs-veld { display: grid; gap: var(--zs-r-2); }
.zs-veld label { font-weight: 600; }
.zs-veld .rij { display: flex; align-items: stretch; gap: var(--zs-r-2); }
.zs-veld input { flex: 1; min-width: 0; min-height: var(--zs-aanraak); padding: 0 var(--zs-r-4); border: var(--zs-lijn) solid var(--zs-rand); border-radius: var(--zs-hoek); background: var(--zs-blad); color: var(--zs-inkt); font: 600 var(--zs-maat-4)/1 var(--zs-tekst); font-variant-numeric: var(--zs-cijfers); }
.zs-veld input::placeholder { color: var(--zs-zacht); opacity: .7; font-weight: 400; font-style: italic; font-size: var(--zs-maat-2); }
.zs-veld .eenheid { align-self: center; min-width: 3.2em; font-weight: 600; }
.zs-veld .stap { width: var(--zs-aanraak); min-height: var(--zs-aanraak); display: grid; place-items: center; border: var(--zs-lijn) solid var(--zs-inkt); background: transparent; color: var(--zs-inkt); border-radius: var(--zs-hoek); cursor: pointer; }
.zs-veld.fout input { border-color: var(--zs-rood); border-width: 3px; }
.zs-melding { display: flex; gap: var(--zs-r-2); align-items: flex-start; font-size: var(--zs-maat-2); line-height: 1.4; font-weight: 600; color: var(--zs-rood); }
.zs-melding svg { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Kaart: een blad op tafel, met de rode bovenrand van een briefhoofd */
.zs-kaart { background: var(--zs-blad); border: var(--zs-haar) solid var(--zs-haarkleur); border-top: var(--zs-bovenrand) solid var(--zs-rood); border-radius: var(--zs-hoek); padding: var(--zs-r-5); display: grid; gap: var(--zs-r-4); }
.zs-kaart > h3 { font-size: var(--zs-maat-4); }
.zs-dubbel { border: 0; height: 7px; border-top: 2px solid var(--zs-inkt); border-bottom: 2px solid var(--zs-inkt); margin: 0; }
.zs-haar { border: 0; border-top: var(--zs-haar) solid var(--zs-haarkleur); margin: 0; }

/* Het getal met zijn bron en formule */
.zs-getal { display: grid; gap: var(--zs-r-2); }
.zs-getal .groot { font: 700 var(--zs-maat-8)/var(--zs-regel-getal) var(--zs-kop); color: var(--zs-rood); letter-spacing: -.02em; font-variant-numeric: var(--zs-cijfers); }
.zs-getal .goed { color: var(--zs-groen); }
.zs-getal .eenheid { font: 600 var(--zs-maat-4)/1.2 var(--zs-tekst); }
.zs-formule { margin: 0; padding: 0; list-style: none; display: grid; }
.zs-formule li { display: flex; justify-content: space-between; gap: var(--zs-r-4); padding: var(--zs-r-2) 0; border-bottom: 2px dotted var(--zs-rand); font-size: var(--zs-maat-2); }
.zs-formule li b { font-weight: 700; white-space: nowrap; }
.zs-formule li:last-child { border-bottom: 0; border-top: 2px solid var(--zs-inkt); }
.zs-citaat { margin: 0; padding-left: var(--zs-r-4); border-left: var(--zs-lijn) solid var(--zs-oker); font-size: var(--zs-maat-2); line-height: 1.4; }

/* Balken: nu en vanaf 2027, met de onzekerheid als arcering */
.zs-balken { display: grid; gap: var(--zs-r-3); }
.zs-balken .regel { display: grid; gap: var(--zs-r-1); }
.zs-balken .kop { display: flex; justify-content: space-between; gap: var(--zs-r-3); font-weight: 600; font-size: var(--zs-maat-3); }
.zs-balken .spoor { position: relative; height: 32px; }
.zs-balken .staaf { position: absolute; left: 0; top: 0; bottom: 0; background: var(--zs-grafiek-neutraal); }
.zs-balken .staaf.na { background: var(--zs-grafiek-slecht); }
.zs-balken .staaf.goed { background: var(--zs-grafiek-goed); }
.zs-balken .band { position: absolute; top: 0; bottom: 0; background: var(--zs-band); border: var(--zs-lijn) solid var(--zs-oker); }
.zs-balken .uitleg { font-size: var(--zs-maat-2); line-height: 1.4; }

/* Het oordeel: één grote gewone zin met de reden eronder */
.zs-oordeel { display: grid; gap: var(--zs-r-3); }
.zs-oordeel .zin { font: 700 var(--zs-maat-5)/1.15 var(--zs-kop); letter-spacing: -.005em; }
.zs-oordeel .reden { font-size: var(--zs-maat-3); }
.zs-oordeel .zin .nee { color: var(--zs-rood); }
.zs-oordeel .zin .ja { color: var(--zs-groen); }

/* Leeg en fout, voor elk onderdeel dezelfde bouw: illustratie, zin, uitweg */
.zs-staat { display: grid; justify-items: start; gap: var(--zs-r-3); }
.zs-staat svg.plaat { width: 160px; height: auto; color: var(--zs-inkt); }
.zs-staat .zin { font: 600 var(--zs-maat-4)/1.2 var(--zs-kop); }

/* De advertentieplek: een vak met een label, nooit tussen antwoord en bron */
.zs-advertentie { background: var(--zs-vlak); border: var(--zs-haar) dashed var(--zs-rand); display: grid; place-items: center; min-height: 250px; padding: var(--zs-r-4); text-align: center; color: var(--zs-zacht); font-size: var(--zs-maat-1); }
.zs-advertentie::before { content: "Advertentie"; display: block; font-size: var(--zs-maat-1); color: var(--zs-zacht); letter-spacing: .04em; text-transform: uppercase; margin-bottom: var(--zs-r-2); }
.zs-advertentie.leeg { min-height: 0; padding: 0; border: 0; display: none; }

/* Wat we niet rekenen: een blok met oker (onzeker) aan de rand, altijd onder het antwoord */
.zs-grens { background: var(--zs-blad); border: var(--zs-haar) solid var(--zs-haarkleur); border-left: var(--zs-bovenrand) solid var(--zs-oker); border-radius: var(--zs-hoek); padding: var(--zs-r-4) var(--zs-r-5); display: grid; gap: var(--zs-r-3); grid-template-columns: minmax(0, 1fr); }
.zs-grens h3 { font-size: var(--zs-maat-4); }
.zs-grens ul { margin: 0; padding-left: 1.1em; display: grid; gap: var(--zs-r-2); font-size: var(--zs-maat-2); line-height: 1.4; }
.zs-grens.sterk { border-color: var(--zs-oker); border-width: 3px; border-left-width: var(--zs-bovenrand); }
/* De voet: wie maakt dit */
.zs-voet { border-top: 2px solid var(--zs-inkt); padding-top: var(--zs-r-4); display: grid; gap: var(--zs-r-2); font-size: var(--zs-maat-2); line-height: 1.45; max-width: var(--zs-breedte-tekst); }

/* Breed scherm: twee kolommen, links de invoer, rechts het antwoord in drie delen naast elkaar. */
.zs-breed, .zs-breed .antwoord { grid-template-columns: minmax(0, 1fr); }
.zs-breed .antwoord { display: grid; gap: var(--zs-r-5); }
.zs-breed { display: grid; gap: var(--zs-r-5); max-width: var(--zs-breed-max); margin-inline: auto; padding-inline: var(--zs-r-4); }
@media (min-width: 1100px) {
  .zs-breed { grid-template-columns: var(--zs-kolom-invoer) minmax(0, 1fr); gap: var(--zs-r-7); padding-inline: var(--zs-r-7); align-items: start; }
  .zs-breed > .invoer { position: sticky; top: var(--zs-r-5); display: grid; gap: var(--zs-r-4); }
  .zs-breed > .voet { grid-column: 1 / -1; }
  .zs-breed .antwoord { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--zs-r-6); }
  .zs-breed .antwoord .over { grid-column: 1 / -1; }
  .zs-oordeel .zin { font-size: var(--zs-maat-6); }
  .zs-getal .groot { font-size: var(--zs-maat-9); }
}

/* Smalle schermen: een kolom mag nooit breder worden dan het scherm door zijn inhoud. */
.zs-kaart, .zs-veld, .zs-getal, .zs-balken, .zs-oordeel, .zs-staat { grid-template-columns: minmax(0, 1fr); }
.zs-staat { justify-items: start; }