.oh, .zr, .rn, .fx { margin: 0; }
.oh [hidden], .zr [hidden], .rn [hidden], .fx [hidden] { display: none !important; }
.oh-stage, .zr-stage, .rn-stage, .fx-stage { max-width: 36rem; margin: var(--s-3) 0 0; padding: var(--s-2) var(--s-2) var(--s-3); background: var(--surface); border-radius: var(--radius-card); }
.oh-svg, .zr-svg, .rn-svg, .fx-svg { display: block; width: 100%; height: auto; }
.oh-stage, .zr-stage, .rn-stage, .fx-stage { container: energie / inline-size; }
.oh-modes, .zr-modes, .rn-pick, .fx-pick { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: var(--s-3) 0 0; }
.oh-mode, .zr-mode, .rn-btn, .fx-btn, .oh-play { min-height: 2.75rem; padding: var(--s-1) var(--s-3); border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--bg); color: var(--navy); font: inherit; font-size: var(--fs-small); font-weight: 600; cursor: pointer; }
.oh-mode[aria-pressed="true"], .zr-mode[aria-pressed="true"], .rn-btn[aria-pressed="true"], .fx-btn[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: var(--on-dark); }
.oh-mode:focus-visible, .zr-mode:focus-visible, .rn-btn:focus-visible, .fx-btn:focus-visible, .oh-play:focus-visible, .oh-btn:focus-visible, .zr-btn:focus-visible, .oh-range:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }

.oh-axis { fill: none; stroke: var(--line-strong); stroke-width: 1.5; }
.oh-tick, .oh-unit { font-size: 14px; text-anchor: end; fill: var(--muted); }
.oh-break { fill: none; stroke: var(--muted); stroke-width: 1.5; }
.oh-in { font-size: 14px; font-weight: 600; fill: var(--navy); }
.oh-in--vol, .oh[data-mode="vol"] .oh-in--geregeld { display: none; }
.oh[data-mode="vol"] .oh-in--vol { display: inline; fill: var(--ink); }
.oh-tick--init { fill: var(--ink); font-weight: 600; }
.oh-x { font-size: 14px; fill: var(--muted); font-weight: 600; }
.oh-x--end { text-anchor: end; }
.oh-max { fill: none; stroke: var(--navy); stroke-width: 2; stroke-dasharray: 6 5; }
.oh-need { fill: none; stroke: var(--navy); stroke-width: 2.5; }
.oh-lit { fill: none; stroke: #d9a300; stroke-width: 7; stroke-linecap: round; opacity: 0; }
.oh-area { fill: #dfe7f5; stroke: none; }
.oh[data-mode="geregeld"] .oh-lit--geregeld, .oh[data-mode="vol"] .oh-lit--vol { opacity: .55; }
.oh[data-mode="vol"] .oh-area { fill: var(--light-vol); opacity: .75; }
.oh-mline { fill: none; stroke: var(--ink); stroke-width: 1.2; stroke-dasharray: 2 3; }
.oh-dot--max { fill: var(--bg); stroke: var(--navy); stroke-width: 2; }
.oh-dot--lit { fill: #d9a300; stroke: var(--ink); stroke-width: 1.5; }
.oh-time { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-1) var(--s-3); margin: 0; }
.oh-range { order: -1; flex: 0 0 auto; width: calc(80% + 1.25rem); min-height: 2.75rem; margin: 0 calc(4.4% - .625rem) 0 calc(15.6% - .625rem); accent-color: var(--navy); }
.oh-time-label { margin-left: 15.6%; font-size: var(--fs-small); font-weight: 600; color: var(--ink); }
.oh-play[aria-pressed="true"] { background: var(--blue-pale); }
.oh-keys { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4); margin: var(--s-3) 0 0; padding: 0; list-style: none; font-size: var(--fs-small); color: var(--text); }
.oh-key { display: inline-flex; align-items: center; gap: var(--s-2); }
.oh-sw { width: 1.75rem; height: .75rem; flex: none; }
.oh-sw-max { fill: none; stroke: var(--navy); stroke-width: 2; stroke-dasharray: 4 3; }
.oh-sw-need { fill: none; stroke: var(--navy); stroke-width: 2.5; }
.oh-sw-lit { fill: none; stroke: #d9a300; stroke-width: 6; opacity: .55; }
.oh-sw-area { fill: #dfe7f5; stroke: var(--line-strong); }
.oh[data-mode="vol"] .oh-sw-area { fill: var(--light-vol); }
.oh-area-vol, .oh[data-mode="vol"] .oh-area-geregeld { display: none; }
.oh[data-mode="vol"] .oh-area-vol { display: inline; }
.oh:not(.is-enhanced) .oh-area-vol { display: none; }
.oh-example { max-width: var(--measure); margin: var(--s-2) 0 0; font-size: var(--fs-small); color: var(--muted); }
.oh-read { max-width: var(--measure); min-height: 3em; margin: var(--s-3) 0 0; padding: var(--s-2) var(--s-3); border-left: 3px solid #d9a300; background: var(--bg); }
.oh-list { max-width: var(--measure); margin: var(--s-3) 0 0; padding-left: 1.2rem; }
.oh-list li { margin: 0 0 var(--s-2); }
.oh-text { margin: 0; }
.oh-t--vol { display: none; }
.oh.is-enhanced .oh-list { display: flex; flex-wrap: wrap; gap: var(--s-2); padding: 0; list-style: none; }
.oh.is-enhanced .oh-list li { margin: 0; }
.oh.is-enhanced .oh-text { display: none; }
.oh-btn { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 2.75rem; padding: var(--s-1) var(--s-3) var(--s-1) var(--s-1); border: 1px solid var(--line-strong); border-radius: 999px; background: var(--bg); color: var(--navy); font: inherit; font-size: var(--fs-small); font-weight: 600; cursor: pointer; }
.oh-btn[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: var(--on-dark); }
.oh-n { display: inline-grid; place-items: center; flex: none; width: 1.8rem; height: 1.8rem; border: 1.5px solid currentColor; border-radius: 50%; font-size: .85rem; }
@media (max-width: 40rem) {
  .oh.is-enhanced .oh-list { flex-wrap: nowrap; justify-content: space-between; gap: var(--s-1); }
  .oh-btn { justify-content: center; width: 2.75rem; padding: 0; border-radius: 50%; }
  .oh-n { border: 0; }
  .oh-bt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

.of-room { fill: none; stroke: var(--ink); stroke-width: 2; }
.of-win { stroke: #8fb4e8; stroke-width: 5; }
.of-door { fill: none; stroke: var(--line-strong); stroke-width: 1.5; }
.of-desk { fill: var(--bg); stroke: var(--muted); stroke-width: 1.2; }
.of-chair { fill: var(--bg); stroke: var(--muted); stroke-width: 1.2; }

.zr-z { stroke: none; cursor: pointer; }
.zr-z--taak { fill: #ffd04a; }
.zr-z--omgeving { fill: #ffe6a0; }
.zr-z--achtergrond { fill: #fffaeb; }
.zr[data-mode="alles"] .zr-z { fill: #ffd04a; }
.zr-l { font-size: 15px; font-weight: 700; text-anchor: middle; fill: var(--ink); paint-order: stroke; stroke: rgba(255, 255, 255, .85); stroke-width: 3px; stroke-linejoin: round; pointer-events: none; }
.zr-lead { stroke: var(--ink); stroke-width: 1.2; pointer-events: none; }
.zr .of-desk, .zr .of-chair, .zr .of-room, .zr .of-win, .zr .of-door { pointer-events: none; }
.zr[data-focus="taak"] .zr-z:not(.zr-z--taak), .zr[data-focus="omgeving"] .zr-z:not(.zr-z--omgeving), .zr[data-focus="achtergrond"] .zr-z:not(.zr-z--achtergrond),
.zr[data-hover="taak"] .zr-z:not(.zr-z--taak), .zr[data-hover="omgeving"] .zr-z:not(.zr-z--omgeving), .zr[data-hover="achtergrond"] .zr-z:not(.zr-z--achtergrond) { opacity: .3; }
.zr[data-focus="taak"] .zr-z--taak, .zr[data-focus="omgeving"] .zr-z--omgeving, .zr[data-focus="achtergrond"] .zr-z--achtergrond { stroke: var(--navy); stroke-width: 2; }
.zr-zones { max-width: var(--measure); margin: var(--s-3) 0 0; padding-left: 1.2rem; }
.zr-zone { margin: 0 0 var(--s-2); }
.zr-text { margin: 0; }
.zr.is-enhanced .zr-zones { display: flex; flex-wrap: wrap; gap: var(--s-2); padding: 0; list-style: none; }
.zr.is-enhanced .zr-zone { margin: 0; }
.zr.is-enhanced .zr-text { display: none; }
.zr-now { max-width: var(--measure); margin: var(--s-3) 0 0; padding: var(--s-2) var(--s-3); border-left: 3px solid var(--navy); background: var(--bg); }
.zr-btn { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 2.75rem; padding: var(--s-1) var(--s-3); border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--bg); color: var(--ink); font: inherit; font-size: var(--fs-small); cursor: pointer; }
.zr-btn[aria-pressed="true"] { border-color: var(--navy); box-shadow: inset 0 0 0 1px var(--navy); }
.zr-bt { font-weight: 600; }
.zr-lx { color: var(--muted); }
.zr-sw { width: 1rem; height: 1rem; flex: none; border: 1px solid var(--line-strong); border-radius: 3px; }
.zr-sw--taak { background: #ffd04a; }
.zr-sw--omgeving { background: #ffe6a0; }
.zr-sw--achtergrond { background: #fffaeb; }
.zr[data-mode="alles"] .zr-sw { background: #ffd04a; }
.zr-mode-text { max-width: var(--measure); margin: var(--s-3) 0 0; }
.zr-example { max-width: var(--measure); margin: var(--s-2) 0 0; font-size: var(--fs-small); color: var(--muted); }

.rn-lum { fill: var(--bg); stroke: var(--navy); stroke-width: 1.5; }
.rn-grp { fill: none; stroke: var(--navy); stroke-width: 1.5; stroke-dasharray: 6 4; }
.rn-field { fill: rgba(11, 31, 77, .05); stroke: var(--navy); stroke-width: 1.2; stroke-dasharray: 4 4; }
.rn-sensor { fill: var(--navy); }
.rn-zone { fill: none; stroke-width: 1.5; stroke-dasharray: 6 4; }
.rn-zone--a, .rn-sensor--a { stroke: #2f6fd6; }
.rn-zone--b, .rn-sensor--b { stroke: #0e7490; }
.rn-zone--c, .rn-sensor--c { stroke: #7a4fb8; }
.rn-sensor--a { fill: #2f6fd6; }
.rn-sensor--b { fill: #0e7490; }
.rn-sensor--c { fill: #7a4fb8; }
.rn-many { opacity: 0; }
.rn[data-state="lms"] .rn-one { opacity: 0; }
.rn[data-state="lms"] .rn-many { opacity: 1; }
.rn[data-state="lms"] .rn-lum--a { fill: #cfe0fa; stroke: #2f6fd6; }
.rn[data-state="lms"] .rn-lum--b { fill: #ffe39a; stroke: #0e7490; }
.rn[data-state="lms"] .rn-lum--c { fill: #f3e7c0; stroke: #7a4fb8; }
.rn[data-state="lokaal"] .rn-lum { fill: #ffe39a; }
.rn-t { font-size: 14px; font-weight: 600; text-anchor: middle; fill: var(--ink); paint-order: stroke; stroke: rgba(255, 255, 255, .85); stroke-width: 3px; stroke-linejoin: round; }
.rn-states { display: grid; gap: var(--s-4); max-width: var(--measure); margin: var(--s-3) 0 0; }
.rn-item { padding: var(--s-3) var(--s-4); background: var(--bg); border: 1px solid var(--line); border-left: 4px solid var(--navy); border-radius: var(--radius-card); }
.rn-chain { margin: 0 0 var(--s-2); }
.rn-h { margin: 0; font-size: var(--fs-small); font-weight: 600; color: var(--muted); }
.rn-does { margin: var(--s-1) 0 var(--s-2); padding-left: 1.2rem; }
.rn-does li { margin: 0 0 var(--s-1); }
.rn-fits { margin: 0; }

.fx > .kbasis { margin: 0 0 var(--s-2); }
.fx-box { fill: var(--bg); stroke: var(--line-strong); stroke-width: 1.5; }
.fx-ems { stroke: var(--navy); stroke-width: 2; }
.fx-t { font-size: 14px; font-weight: 600; text-anchor: middle; fill: var(--ink); }
.fx-tb, .fx-lt { font-size: 14px; fill: var(--muted); font-weight: 600; }
.fx-tb { text-anchor: middle; }
.fx-p { fill: none; stroke: var(--c-voeding); stroke-width: 3; }
.fx-bar { fill: none; stroke: var(--c-voeding); stroke-width: 5; stroke-linecap: round; }
.fx-c { fill: none; stroke: var(--c-relatie); stroke-width: 1.5; stroke-dasharray: 4 4; }
.fx-gauge { fill: var(--bg); stroke: var(--line-strong); stroke-width: 1.2; }
.fx-level { fill: var(--c-voeding); opacity: .55; transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(.5); }
.fx-lim { stroke: var(--ink); stroke-width: 2; }
.fx-sun { fill: #f2b54a; opacity: .35; }
.fx-lvl-bg { fill: var(--surface-2); }
.fx-lvl { fill: #d9a300; transform-box: fill-box; transform-origin: 0 50%; transform: scaleX(.85); }
.fx-min { stroke: var(--ink); stroke-width: 2; }
.fx-arrow { fill: none; stroke: var(--c-voeding); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.fx[data-over="true"] .fx-level { fill: var(--warn); opacity: .85; }
.fx[data-machine="start"] .fx-machine { stroke: var(--warn); stroke-width: 2.5; }
.fx[data-machine="start"] .fx-p--machine { stroke-width: 6; }
.fx[data-machine="aan"] .fx-machine { stroke: var(--c-voeding); stroke-width: 2; }
.fx[data-light="lager"] .fx-lvl { transform: scaleX(.66); }
.fx[data-battery="levert"] .fx-arrow--up, .fx[data-battery="laadt"] .fx-arrow--down { opacity: 1; }
.fx[data-battery="levert"] .fx-battery, .fx[data-battery="laadt"] .fx-battery { stroke: var(--c-voeding); stroke-width: 2; }
.fx[data-pv="hoog"] .fx-sun { opacity: 1; }
.fx[data-pv="hoog"] .fx-p--pv { stroke-width: 6; }
.fx[data-pv="hoog"] .fx-pv { stroke: var(--c-voeding); stroke-width: 2; }
.fx.ix-signal .fx-c--meter { stroke: var(--c-flow); stroke-width: 2.5; }
.fx.ix-decide .fx-ems { fill: var(--navy); }
.fx.ix-decide .fx-ems + .fx-t { fill: var(--on-dark); }
.fx.ix-decide .fx-c--out { stroke: var(--navy); stroke-width: 2; }
.fx-keys { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4); margin: var(--s-3) 0 0; padding: 0; list-style: none; font-size: var(--fs-small); }
.fx-key::before { content: ''; display: inline-block; width: 1.6rem; margin-right: var(--s-2); vertical-align: middle; }
.fx-key--p::before { border-top: 3px solid var(--c-voeding); }
.fx-key--c::before { border-top: 2px dashed var(--c-relatie); }
.fx-key--min::before { width: 0; height: 1em; margin-left: .7rem; margin-right: calc(var(--s-2) + .7rem); border-left: 2px solid var(--ink); }
.fx-list { max-width: var(--measure); margin: var(--s-3) 0 0; padding-left: 1.2rem; }
.fx-list li { margin: 0 0 var(--s-2); }
.fx.is-enhanced .fx-list { padding: var(--s-2) var(--s-3); border-left: 3px solid var(--navy); background: var(--bg); list-style: none; }
.fx.is-enhanced .fx-list li { margin: 0; }
.fx-note { max-width: var(--measure); margin: var(--s-2) 0 0; font-size: var(--fs-small); color: var(--muted); }

@container energie (min-width: 28rem) {
  .oh-tick, .oh-unit, .oh-in, .oh-x, .rn-t, .fx-t, .fx-tb, .fx-lt { font-size: 11px; }
  .zr-l { font-size: 12px; }
}

@media (prefers-reduced-motion: no-preference) {
  .oh-lit, .oh-area, .zr-z, .rn-one, .rn-many, .fx-box, .fx-p, .fx-c, .fx-sun, .fx-arrow, .fx-level { transition: opacity .3s ease, fill .3s ease, stroke .3s ease, stroke-width .3s ease, transform .45s ease; }
  .rn-lum { transition: fill .35s ease, stroke .35s ease; transition-delay: calc(var(--i, 0) * 90ms); }
  .fx-lvl { transition: transform .6s ease; }
  .oh-mline, .oh-dot { transition: transform 1.2s ease; }
  .oh.is-dragging .oh-mline, .oh.is-dragging .oh-dot { transition: none; }
  .oh-mode, .zr-mode, .rn-btn, .fx-btn, .oh-btn, .zr-btn { transition: background-color .15s ease, border-color .15s ease; }
}