/* Energie page (ADR 0012). Zondag tokens only (app.css); white cards, the room pastel on each plug's blob,
   electricity bars in accent, gas in ink-muted, the bar that's running now in ink. */
.energy-head { display: flex; align-items: center; gap: var(--s-3); }
.demo-chip { display: inline-flex; align-items: center; min-height: 1.625rem; margin-top: var(--s-2); padding: 0 var(--s-3);
             border-radius: var(--r-pill); background: var(--accent-soft); color: var(--text); font-size: var(--t-xs); font-weight: 700; }
.now-card { display: grid; gap: 0.1rem; min-height: 7.75rem; align-content: space-between; padding: var(--s-4); border-radius: var(--r-xl);
            background: var(--surface); }
.now-card .label { margin: 0; }
.now-card strong { font-family: var(--display); font-weight: 800; font-size: var(--t-3xl); letter-spacing: -0.03em; line-height: 1; }
.now-unit { color: var(--muted); font-size: var(--t-s); }

.p1-missing { display: grid; gap: var(--s-1); margin-top: var(--s-3); padding: var(--s-3) var(--s-4); border: 2px dashed var(--line);
              border-radius: var(--r-l); color: var(--muted); font-weight: 400; font-size: var(--t-s); text-decoration: none; }
.p1-missing strong { font-family: var(--display); font-size: 1.0625rem; color: var(--text); }
.p1-missing:hover { border-color: var(--accent); }

.today-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(6.25rem, 1fr)); gap: var(--s-2); }
.today-tile { display: grid; gap: 0.1rem; padding: var(--s-3) var(--s-4); border-radius: var(--r-l); background: var(--surface); }
.today-tile strong { font-family: var(--display); font-weight: 800; font-size: var(--t-xl); letter-spacing: -0.02em; }
.today-tile span { color: var(--muted); font-size: var(--t-s); }

.day-chart { margin: var(--s-3) 0 0; padding: var(--s-4); border-radius: var(--r-xl); background: var(--surface); }
.day-chart figcaption { display: flex; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-3); font-weight: 600; font-size: var(--t-s); }
.day-chart svg { display: block; width: 100%; height: 7.5rem; }
.day-chart rect { fill: var(--accent); }
.day-chart rect.now { fill: var(--text); }
.gas-chart svg { height: 5rem; }
.gas-chart rect { fill: var(--muted); }
.gas-chart rect.now { fill: var(--text); }
.day-chart .axis { stroke: var(--line); stroke-width: 2; vector-effect: non-scaling-stroke; }
.chart-hours { display: flex; justify-content: space-between; margin-top: var(--s-1); color: var(--muted); font-size: var(--t-xs); }
.chart-empty { margin: 0; padding: var(--s-5) 0; color: var(--muted); text-align: center; }

.plugs { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.plugs li { display: flex; align-items: center; gap: var(--s-3); min-height: 4rem; padding: var(--s-2) var(--s-4); border-radius: var(--r-m);
            background: var(--surface); }
.plugs .blob { width: 0.875rem; height: 0.875rem; flex: none; border-radius: 50%; background: var(--c); }
.plugs .off .blob { background: transparent; box-shadow: inset 0 0 0 2px var(--muted); }
.plug-name { flex: 1; min-width: 0; display: grid; }
.plug-name strong { font-family: var(--display); font-size: 1.125rem; font-weight: 700; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.plug-name small { color: var(--muted); font-size: var(--t-s); }
.plug-watts { font-family: var(--display); font-weight: 700; font-size: var(--t-l); white-space: nowrap; }
.plugs .off .plug-watts { color: var(--muted); }

.energy-doc .doc { overflow-wrap: anywhere; }
.energy-doc .doc h1 { font-size: var(--t-2xl); }
.energy-doc .doc h2 { font-family: var(--display); font-size: var(--t-l); font-weight: 700; color: var(--text); margin: var(--s-5) 0 var(--s-2); }
.energy-doc .doc pre { overflow-x: auto; padding: var(--s-3); border-radius: var(--r-m); background: var(--surface); font-size: var(--t-xs); }
.energy-doc .doc code { font-size: 0.9em; }
.energy-doc .doc table { display: block; overflow-x: auto; border-collapse: collapse; font-size: var(--t-s); }
.energy-doc .doc th, .energy-doc .doc td { padding: var(--s-1) var(--s-2); border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }

/* a plug opens its settings sheet ("alleen meten"): the whole row is the button, same look as before */
.plugs .plug-open { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: var(--s-3); flex: 1; min-height: var(--tap); cursor: pointer; border-radius: inherit; }
.plugs .plug-open:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.plug-setting { margin-top: var(--s-4); padding: var(--s-3) var(--s-4); background: var(--bg); border-radius: var(--r-l); display: grid; gap: var(--s-2); }
.plug-setting .note { margin: 0; }
.plug-setting strong { display: block; font-weight: 700; }
.plug-setting small { display: block; color: var(--muted); font-size: var(--t-s); margin-top: 0.1rem; }
.energy .sheet .who-cancel { display: block; width: 100%; margin-top: var(--s-2); }

/* The bathroom floor heating (ThermostatCard): white card; on = the room's pastel, like a lit room tile. */
.thermostat-note { margin: var(--s-3) 0 0; }
.thermostat { display: grid; gap: var(--s-3); margin-top: var(--s-3); padding: var(--s-4); border-radius: var(--r-xl); background: var(--surface); }
.thermostat.on { background: var(--c); color: var(--room-ink); }
.thermostat-head { display: flex; align-items: center; gap: var(--s-3); }
.thermostat .blob { width: 0.875rem; height: 0.875rem; flex: none; border-radius: 50%; background: var(--c); }
.thermostat.on .blob { background: #FFFFFF; }
.thermostat-name { flex: 1; min-width: 0; display: grid; }
.thermostat-name strong { font-family: var(--display); font-size: var(--t-l); font-weight: 700; letter-spacing: -0.01em; }
.thermostat-name small { color: var(--muted); font-size: var(--t-s); }
.thermostat.on .thermostat-name small, .thermostat.on .target small { color: var(--room-ink); }
.thermostat.on .switch input:checked + span { background: var(--room-ink); }
.thermostat.on .switch input:checked + span::before { background: #FFFFFF; }
.thermostat-target { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.thermostat .target { display: grid; justify-items: center; }
.thermostat .target strong { font-family: var(--display); font-weight: 800; font-size: var(--t-2xl); letter-spacing: -0.03em; line-height: 1.1; }
.thermostat .target small { color: var(--muted); font-size: var(--t-s); }
.thermostat .step { width: 3.25rem; height: 3.25rem; flex: none; border: 0; border-radius: 50%; background: var(--surface-2); color: var(--text);
    font-size: 1.5rem; font-weight: 700; line-height: 1; }
.thermostat.on .step { background: rgba(255, 255, 255, 0.6); color: var(--room-ink); }

/* Euros (ADR 0023): a euro tile is the accent-soft one; the split under the tiles is a muted line. */
.today-tile.euro { background: var(--accent-soft); }
.euro-split { margin-top: var(--s-2); }
.euro-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-3); }
.page h2.euro-sheet-title { display: grid; margin: 0 0 var(--s-1); font-family: var(--display); font-size: var(--t-xl); font-weight: 800; letter-spacing: -0.02em; color: var(--text); }
.euro-sheet-title small { color: var(--muted); font-family: var(--font); font-size: var(--t-s); font-weight: 400; letter-spacing: 0; }
.euro-sheet form { display: grid; gap: var(--s-2); }
.euro-sheet .label { margin: var(--s-3) 0 0; }
.euro-sheet input { width: 100%; box-sizing: border-box; background: var(--bg); }
.euro-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); }
.euro-pair label { display: grid; gap: var(--s-1); color: var(--muted); font-size: var(--t-s); }
.euro-list { display: grid; grid-template-columns: 1fr auto; gap: var(--s-2) var(--s-3); margin: var(--s-3) 0; }
.euro-list dt { color: var(--muted); }
.euro-list dd { margin: 0; font-weight: 700; text-align: right; }
.euro-lines { list-style: none; margin: var(--s-3) 0 0; padding: 0; display: grid; gap: var(--s-2); }
.euro-lines li { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); border-radius: var(--r-m); background: var(--bg); }
.euro-line-name { flex: 1; min-width: 0; display: grid; }
.euro-line-name small { color: var(--muted); font-size: var(--t-s); }
.euro-sheet .forget { margin-top: var(--s-2); }

/* Patterns: the base load card, the standby lines, a list of patterns like the plugs, the next-plug tip dashed. */
.base-card { display: grid; gap: 0.1rem; padding: var(--s-4); border-radius: var(--r-xl); background: var(--surface); }
.base-card .label { margin: 0; }
.base-card strong { font-family: var(--display); font-weight: 800; font-size: var(--t-2xl); letter-spacing: -0.03em; line-height: 1.1; }
.standby { list-style: none; margin: var(--s-3) 0 0; padding: var(--s-3) 0 0; border-top: 1px solid var(--line); display: grid; gap: var(--s-1); font-size: var(--t-s); }
.standby li { display: flex; justify-content: space-between; gap: var(--s-3); }
.standby li span:last-child { white-space: nowrap; font-weight: 600; }
.standby .unknown { color: var(--muted); }
.pattern-head { margin: var(--s-4) 0 var(--s-2); }
.patterns { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.patterns li { border-radius: var(--r-m); background: var(--surface); }
.pattern-open { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: var(--s-3); width: 100%; min-height: var(--tap);
                padding: var(--s-2) var(--s-4); cursor: pointer; border-radius: inherit; }
.pattern-open:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.pattern-name { flex: 1; min-width: 0; display: grid; }
.pattern-name strong { font-family: var(--display); font-size: 1.0625rem; font-weight: 700; overflow-wrap: anywhere; }
.pattern-name small { color: var(--muted); font-size: var(--t-s); }
.pattern-euro { font-family: var(--display); font-weight: 700; white-space: nowrap; }
.suggestion { display: grid; gap: var(--s-1); margin-top: var(--s-3); padding: var(--s-3) var(--s-4); border: 2px dashed var(--line);
              border-radius: var(--r-l); color: var(--muted); font-size: var(--t-s); }
.suggestion strong { font-family: var(--display); font-size: 1.0625rem; color: var(--text); }

/* "Verwarming door casa66" (ADR 0030): a calm card under the thermostats. The mode is a soft pill, the target big like the
   thermostat's own; everything else folds away in <details>. */
.heating { display: grid; gap: var(--s-3); margin-top: var(--s-3); padding: var(--s-4); border-radius: var(--r-xl); background: var(--surface); }
.heating-head { display: flex; align-items: center; gap: var(--s-3); }
.heating-title { flex: 1; min-width: 0; display: grid; }
.heating-title strong { font-family: var(--display); font-size: var(--t-l); font-weight: 700; letter-spacing: -0.01em; }
.heating-title small { color: var(--muted); font-size: var(--t-s); }
.heating-now { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); }
.heating-now strong { font-family: var(--display); font-weight: 800; font-size: var(--t-2xl); letter-spacing: -0.03em; line-height: 1.1; }
.heating-mode { display: inline-flex; align-items: center; min-height: 2rem; padding: 0 var(--s-3); border-radius: var(--r-pill);
    background: var(--surface-2); color: var(--text); font-weight: 600; font-size: var(--t-s); }
.heating.on .heating-mode { background: var(--accent-soft); }
.heating .heating-why { margin: calc(-1 * var(--s-2)) 0 0; }
.heating-actions .chip span { margin-left: var(--s-1); font-size: 1.125rem; line-height: 1; }
.heating-pick { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.heating-pick label { display: inline-flex; align-items: center; gap: var(--s-2); color: var(--muted); font-size: var(--t-s); font-weight: 600; }
.heating-pick input { background: var(--surface-2); }
.heating-more summary { display: flex; align-items: center; min-height: var(--tap); font-weight: 600; font-size: var(--t-s); color: var(--muted); cursor: pointer; }
.heating-more[open] summary { color: var(--text); }
.heating-temps, .heating-learned { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.heating-temps li { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.heating-temps li > span:first-child { display: grid; min-width: 0; }
.heating-temps small { color: var(--muted); font-size: var(--t-s); }
.heating-step { display: inline-flex; align-items: center; gap: var(--s-2); }
.heating-step output { min-width: 4.25rem; text-align: center; font-family: var(--display); font-weight: 700; }
.heating .step { width: var(--tap); height: var(--tap); flex: none; border: 0; border-radius: 50%; background: var(--surface-2); color: var(--text);
    font-size: 1.25rem; font-weight: 700; line-height: 1; }
.heating-learned li { color: var(--muted); font-size: var(--t-s); line-height: 1.45; }