/* ═══════════════════════════════════════════════════════════════
   DYSUN HOUSE SCENE — stylesheet bij assets/js/dysun-house-scene.js
   Het podium is bewust donker in beide thema's (DECISIONS.md: podia
   blijven donker); het dagbeeld zelf is licht, zoals de referentie.
   ═══════════════════════════════════════════════════════════════ */
.dh {
  --p-bg: #111111; --p-s1: #161616; --p-s2: #1E1E1E; --p-s3: #262626; --p-s4: #303030;
  --p-ink: #F0F0F0; --p-soft: #B0B0B0; --p-muted: #8a8a8a;
  --p-line: rgba(255,255,255,.07); --p-line-strong: rgba(255,255,255,.14);
  --p-gold: #FDC500; --p-gold-line: rgba(253,197,0,.35); --p-danger: #EF4444;
  --r-ink: #1a1d24; --r-soft: #5c616b; --r-line: rgba(26,29,36,.45);
  position: relative; background: var(--p-bg); color: var(--p-ink);
  border-radius: 16px; overflow: hidden; padding: 0;
  font-family: inherit;                 /* volgt de pagina (Inter via dysun.css) */
  /* Kolom, ook als de pagina de container al op display:flex zet (besparing-calculator) */
  display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start;
}
.dh > * { width: 100%; flex: none; }
.dh-stage { position: relative; aspect-ratio: 16 / 9; background: #dfe3e8; overflow: hidden; --n: 0; }
.dh-stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; user-select: none; -webkit-user-drag: none; }
.dh-stage img.night { opacity: var(--n); }
.dh-stage svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* Aanwijslijnen + labels */
.dh .co { position: absolute; transform: translateX(-50%); display: grid; gap: 1px; pointer-events: none; white-space: nowrap; text-align: center; line-height: 1.2; }
.dh .co b { font-size: 15px; font-weight: 600; letter-spacing: -.01em; font-variant-numeric: tabular-nums; color: var(--r-ink); }
.dh .co span { font-size: 11.5px; font-weight: 500; color: var(--r-soft); }
.dh .co.top { top: 14px; } .dh .co.bottom { bottom: 14px; }
.dh .co.is-dim { opacity: .45; }
.dh .co[hidden] { display: none; }
.dh-stage[data-n="night"] .co b { color: #F0F0F0; }
.dh-stage[data-n="night"] .co span { color: #B0B0B0; }
.dh .leader { stroke: var(--r-line); stroke-width: 1; stroke-dasharray: 2 3; fill: none; transition: stroke .4s; }
.dh-stage[data-n="night"] .leader { stroke: rgba(240,240,240,.45); }

.dh-status { position: absolute; right: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 600; background: rgba(17,17,17,.82); backdrop-filter: blur(10px); border: 1px solid var(--p-line-strong); color: var(--p-ink); max-width: 60%; }
.dh-status i { width: 8px; height: 8px; border-radius: 50%; background: var(--p-gold); flex: none; }
.dh-status.is-alert i { background: var(--p-danger); }

/* Standen */
.dh-modes { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; padding: 14px; background: var(--p-s1); border-top: 1px solid var(--p-line); }
.dh-mode { min-height: 48px; padding: 10px 12px; border-radius: 10px; cursor: pointer; text-align: left; background: var(--p-s2); border: 1px solid var(--p-line); color: var(--p-ink); font: inherit; font-size: 13.5px; font-weight: 600; letter-spacing: -.01em; display: grid; gap: 3px; transition: border-color .15s, background .15s, transform .15s, box-shadow .15s; }
.dh-mode[hidden] { display: none; }
.dh-mode small { font-size: 11.5px; font-weight: 500; color: var(--p-muted); }
.dh-mode:hover { border-color: var(--p-gold-line); background: var(--p-s3); transform: translateY(-1px); box-shadow: 0 4px 24px rgba(253,197,0,.15); }
.dh-mode:focus-visible { outline: none; border-color: var(--p-gold); box-shadow: 0 0 0 3px rgba(253,197,0,.12); }
.dh-mode[aria-pressed="true"] { background: var(--p-gold); border-color: var(--p-gold); color: #0A0A0A; }
.dh-mode[aria-pressed="true"] small { color: rgba(10,10,10,.7); }
.dh-story { padding: 0 18px 16px; background: var(--p-s1); color: var(--p-soft); font-size: 13.5px; line-height: 1.5; }
.dh-story b { color: var(--p-ink); font-weight: 600; }

/* Hotspots */
.dh .hs { cursor: pointer; }
.dh .hs circle.ring { fill: rgba(255,255,255,.85); stroke: var(--p-gold); stroke-width: 2; }
.dh .hs circle.dot { fill: var(--p-gold); }
.dh .hs circle.pulse { fill: none; stroke: var(--p-gold); stroke-width: 1.5; opacity: 0; transform-origin: center; transform-box: fill-box; }
.dh .hs:hover circle.ring, .dh .hs:focus circle.ring { stroke-width: 3; }
.dh .hs.is-off { opacity: .3; }
.dh .hs:focus { outline: none; }
.dh .hs.is-hot circle.pulse { animation: dhPulse 1.6s ease-out infinite; }

/* Energiestromen */
.dh .flow { fill: none; stroke: var(--p-gold); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 8 12; opacity: 0; transition: opacity .5s ease; }
.dh .flow.glow { stroke-width: 9; stroke-dasharray: none; filter: blur(6px); }
.dh .flow.on { opacity: 1; animation: dhDash 1.1s linear infinite; }
.dh .flow.on.rev { animation-direction: reverse; }
.dh .flow.glow.on { opacity: .3; animation: none; }
.dh .flow.grid-off { stroke: #8a8f99; }
@keyframes dhDash { to { stroke-dashoffset: -20; } }
@keyframes dhPulse { 0% { transform: scale(1); opacity: .6; } 100% { transform: scale(2.2); opacity: 0; } }
.dh .grid-x { opacity: 0; transition: opacity .3s; }
.dh-stage.is-outage .grid-x { opacity: 1; }

/* Compacte stand (podium smaller dan 520 px): alleen getallen boven, statuszin naar de tekst */
.dh-status-line { display: none; }
.dh-stage.is-compact .co b { font-size: 11px; }
.dh-stage.is-compact .co span { font-size: 9px; }
.dh-stage.is-compact .co.top span { display: none; }
.dh-stage.is-compact .co.top { top: 6px; }
.dh-stage.is-compact .co.bottom { bottom: 6px; }
.dh-stage.is-compact .dh-status { display: none; }
.dh.is-compact .dh-status-line { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; color: var(--p-ink); font-weight: 600; }
.dh.is-compact .dh-status-line i { width: 8px; height: 8px; border-radius: 50%; background: var(--p-gold); flex: none; }
.dh.is-compact .dh-status-line.is-alert i { background: var(--p-danger); }

@media (prefers-reduced-motion: reduce) {
  .dh .flow.on { animation: none; stroke-dasharray: none; opacity: .9; }
  .dh .hs.is-hot circle.pulse { animation: none; }
}