/* ---------- dagsimulatie (herontwerp 01-10): één paneel, huis + status boven, tijdlijn eronder ---------- */
#dagsim{background:var(--paper);border-radius:var(--r-paneel);box-shadow:var(--schaduw-kaart);overflow:hidden}
.ds-boven{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);align-items:stretch}
.ds-huis{background:var(--veld);padding:clamp(1rem,2.5vw,2rem);display:flex;align-items:center}
.ds-huis #energiehuis{width:100%}
.ds-status{padding:clamp(1.25rem,3vw,2.5rem);display:flex;flex-direction:column;gap:1rem;justify-content:center}
.ds-tijd{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap}
.ds-tijd #ds-klok{font-weight:700;font-size:clamp(2.4rem,4.5vw,3.4rem);line-height:1;color:var(--inkt);letter-spacing:-.03em}
.ds-tijd .pill{font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;font-weight:700;padding:.4rem .8rem}
.pill.laden{background:var(--actie-vlak);color:#fff}
.pill.ontladen{background:var(--blauw);color:#fff}
.pill.leveren{background:#F4E7C8;color:#7A5208}
.pill.zelfverbruik{background:var(--veld);color:var(--sage-diep)}
.ds-uitleg{font-size:1.12rem;line-height:1.55;color:var(--inkt);font-weight:400;min-height:5em;max-width:44ch;margin:0}
.ds-saldo{background:var(--canvas);border-radius:var(--r-kaart);padding:1rem 1.15rem;display:grid;gap:.1rem;box-shadow:inset 0 0 0 1px var(--lijn)}
.ds-saldo-label{font-size:var(--fs-xs);letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:var(--sage-diep)}
.ds-saldo strong{font-size:2.3rem;color:var(--sage-diep);letter-spacing:-.02em;line-height:1.1}
.ds-saldo .klein{color:var(--muted)}
.ds-speel{align-self:flex-start;display:inline-flex;align-items:center;gap:.55rem}
.ds-speel-ic{width:0;height:0;border-left:10px solid currentColor;border-top:6px solid transparent;border-bottom:6px solid transparent}
.ds-speel.speelt .ds-speel-ic{width:10px;height:12px;border:0;border-left:3px solid currentColor;border-right:3px solid currentColor;box-sizing:border-box}

.ds-tijdlijn{padding:1.25rem clamp(1rem,3vw,2.5rem) 1.5rem;border-top:1px solid var(--lijn)}
.ds-legenda-rij{display:flex;flex-wrap:wrap;gap:.4rem 1.25rem;font-size:var(--fs-sm);color:var(--tekst-2);margin-bottom:.5rem}
.ds-legenda-rij span{display:inline-flex;align-items:center;gap:.45rem}
.ds-legenda-rij .vk{width:12px;height:12px;border-radius:3px;display:inline-block}
.ds-legenda-rij .lijn{width:18px;height:3px;border-radius:2px;background:var(--blauw);display:inline-block}
.vk.goedkoop{background:var(--sage)}.vk.normaal{background:var(--lijn-2)}.vk.duur{background:#D9A441}.vk.neg{background:var(--sage-diep)}
.ds-tijdlijn svg{width:100%;height:auto;display:block;overflow:visible}
.ds-grid{stroke:var(--lijn);stroke-width:1}
.ds-grid.nul{stroke:var(--muted-2)}
.ds-as{font-size:13px;fill:var(--muted);text-anchor:end;font-family:var(--font)}
.ds-as.mid{text-anchor:middle}
.ds-as.rechts{text-anchor:start;fill:var(--blauw)}
.ds-bar{cursor:pointer;transition:fill .2s,opacity .2s;opacity:.9}
.ds-bar.goedkoop{fill:var(--sage)}.ds-bar.normaal{fill:var(--lijn-2)}.ds-bar.duur{fill:#D9A441}.ds-bar.neg{fill:var(--sage-diep)}
.ds-bar.actief{opacity:1;stroke:var(--inkt);stroke-width:2}
.ds-soc-vlak{fill:var(--blauw);opacity:.08}
.ds-soc{fill:none;stroke:var(--blauw);stroke-width:3;stroke-linejoin:round;stroke-linecap:round}
.ds-nu{stroke:var(--inkt);stroke-width:1.5;stroke-dasharray:4 4}
.ds-nu-punt{fill:#fff;stroke:var(--blauw);stroke-width:3}
#ds-uur{display:block;width:calc(100% - var(--pl) - var(--pr));margin:.35rem var(--pr) 0 var(--pl);accent-color:var(--actie);height:28px;cursor:pointer}
.ds-voetnoot{margin:.6rem 0 0;color:var(--muted)}

@media (max-width:900px){
  .ds-boven{grid-template-columns:1fr}
  .ds-uitleg{min-height:0}
}
@media (max-width:560px){
  .ds-legenda-rij{font-size:var(--fs-xs);gap:.3rem .8rem}
  .ds-tijdlijn{padding-inline:.75rem}
  .ds-as{font-size:22px}
  .ds-as.rechts{display:none}
}

.ds-saldo .klein b{white-space:nowrap}