/* ============================================================
   STYLING — pas hier fonts, kleuren en maten van de pagina aan.
   Alle kaart-/blokjeskleuren staan in het JS-blok KLEUREN.
   ============================================================ */
:root{
  --font-display: 'Rubik', sans-serif;
  --font-data:    'IBM Plex Mono', ui-monospace, monospace;
  --font-legend:  'Poppins', sans-serif;

  --radius: 10px;
}
*{box-sizing:border-box}

/* breed: kaarten naast elkaar, settings over de volle breedte eronder,
   daaronder de beleidspanelen naast elkaar; smal: alles onder elkaar */
.layout2 {display:flex; flex-direction:column; gap:18px; width:100%; margin: 2.5% 0;}
.rijk {display:grid; grid-template-columns:repeat(var(--kolommen,1),minmax(0,1fr)); gap:18px; font-family: 'Poppins', sans-serif; font-weight: 600}
body[data-n="2"] .rijk {--kolommen:2}
@media (max-width:920px) { body[data-n="2"] .rijk{--kolommen:1} }
/* bij één simulatie: kaart en beleidspaneel schalen — net als de instellingen —
   mee met de vensterbreedte (bij twee simulaties vullen ze samen de body via het grid) */
body[data-n="1"] .rijk > *{width:100%; margin:0 auto}
.paneelkop{font-family:var(--font-display); font-size:11px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--subtle-text); text-align: center;
  padding:8px 16px; border-bottom:1px solid var(--subtle-warm-detail)}
body[data-n="1"] .paneelkop {display:none}
.paneel{
  background:var(--white-overlay); border:1px solid var(--subtle-warm-detail);
  border-radius:var(--radius); box-shadow:var(--shadow-subtle-hover); overflow:hidden;
}
canvas{display:block; width:100%; height:auto}

/* statistiekbalk onder de kaart, zoals in het voorbeeld.
   container-type + cqi: label en waarde schalen mee met de breedte van de balk,
   zodat de tekst ook op smalle vensters binnen de vakjes blijft en gecentreerd staat */
.stats {display:flex; border-top:1px solid var(--subtle-warm-detail); container-type:inline-size}
.stat {flex:1; padding:10px clamp(4px,1.6cqi,12px); min-width:0; text-align:center}
.stat + .stat {border-left:1px solid var(--subtle-warm-detail)}
.stat .label {font-family:var(--font-legend); font-size:clamp(8px,2.1cqi,10px); line-height:1.15; text-transform:lowercase; color:var(--subtle-text); letter-spacing:.02em}
.stat .waarde {font-family:var(--font-legend); font-size:clamp(10px,3.4cqi,18px); font-weight:600; margin-top:2px; white-space:nowrap}
.stat .waarde small {font-size:.62em; font-weight:400; color:var(--subtle-text)}

/* legenda */
.legenda {display:flex; flex-wrap:wrap; gap:12px 18px; padding:10px 16px; border-top:1px solid var(--subtle-warm-detail);
  font-family:var(--font-legend); font-size:11px; color:var(--subtle-text); align-items:center}
.legenda .item {display:flex; align-items:center; gap:6px}
.legenda .chip {width:30px; height:11px; border-radius:3px}
.legenda .chip.klein {width:11px}

/* bedieningspaneel — segmenten gelijkmatig over de volle breedte verdeeld,
   wat er ook met de vensterbreedte gebeurt; status op een eigen, gecentreerde regel */
.settings .settingsrij {display:flex; flex-wrap:wrap; gap:16px 22px; align-items:center; justify-content:space-evenly}
.settings .rij {flex:0 1 auto; justify-content:center}
.settings .rij + .rij {margin-top:0}
.settings .rij .naam {flex:0 0 auto}
.settings .actieknoppen {flex:0 1 auto}
.settings .actieknoppen button {flex:0 0 auto; padding:10px 22px}
.settings .status {text-align:center; flex:0 0 100%}
.blok {background:var(--white-overlay); border:1px solid var(--subtle-warm-detail); border-radius:var(--radius); box-shadow:var(--shadow-subtle-hover); padding:16px}
.blok h2 {font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--subtle-text); margin:0 0 12px; font-weight:600; font-family: var(--font-display); text-align: center;}

.schuif{margin-bottom:14px}
.schuif:last-child{margin-bottom:2px}
.schuif .kop{display:flex; justify-content:space-between; font-size:13px; margin-bottom:4px}
.schuif .kop b{font-weight:500}
.schuif .kop .val{font-family:var(--font-legend); font-size:12px; color:var(--dark-main-color); font-weight:600}
input[type=range]{width:100%; accent-color:var(--dark-main-color); height:22px}
input[type=range]:disabled{opacity:.45}

.rij{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.rij + .rij{margin-top:10px}
.rij .naam{font-size:11px; font-family: 'Poppins', sans-serif; font-weight: 600; flex:0 0 74px; color:var(--subtle-text)}
.segment{display:flex; border:1px solid var(--very-subtle-text); border-radius:8px; overflow:hidden}
.segment button{
  font-family:var(--font-data); font-size:12px; padding:6px 12px; border:none; cursor:pointer;
  background:transparent; color:var(--text);
}
.segment button+button{border-left:1px solid var(--subtle-warm-detail)}
.segment button.actief{background:var(--dark-main-color); color: var(--background)}
.segment button:disabled{opacity:.5; cursor:default}
.segment button.actief:disabled{opacity:.8}

#seed{font-family:var(--font-data); font-size:13px; width:92px; padding:6px 8px;
  border:1px solid var(--subtle-warm-detail); border-radius:8px; background: var(--background); color:var(--text)}
#seed:disabled{opacity:.5}
button.dobbel{border:1px solid var(--subtle-warm-detail); background: var(--background); border-radius:8px; padding:5px 9px; cursor:pointer; font-size:13px}

.actieknoppen{display:flex; gap:10px}
.actieknoppen button{
  flex:1; font-family:var(--font-display); font-weight:700; font-size:15px;
  padding:12px 0; border-radius:9px; cursor:pointer; border:1px solid transparent;
}
#startKnop{background:var(--dark-main-color); color: var(--background)}
#startKnop:hover:not(:disabled){background:var(--dark-main-color)}
#startKnop:disabled{background:var(--subtle-text); cursor:default}
#resetKnop{background: var(--background); border-color:var(--subtle-warm-detail); color:var(--text)}
#resetKnop:hover{border-color:var(--subtle-text)}
.status{font-family:var(--font-legend); font-size:11.5px; color:var(--subtle-text); text-align:center; min-height:15px}

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