/*
 * fve-EMS — ukázka (demo). Tokeny a datové barvy ze site.css (= web EMS): výroba --pv, spotřeba --ld,
 * síť --gr, baterie --bt, wallbox --ev, cena --cena. Bez stínů; klikací plocha → slabý rámeček, text → akcent.
 */
.demo{padding-top:28px;padding-bottom:56px}
.demo [hidden]{display:none!important}
.demo-uvod h1{font-size:clamp(24px,3.2vw,36px)}
.demo-menu{position:sticky;top:64px;z-index:20;display:flex;flex-wrap:wrap;gap:8px;padding:10px 0;background:var(--bg);border-bottom:1px solid var(--ln);margin-bottom:16px}
.demo-menu .volba{font:inherit;font-weight:600;min-height:40px;padding:0 16px;border-radius:var(--r-pill);border:1px solid var(--ln);background:var(--sf);color:var(--ink2);cursor:pointer;transition:color .15s,border-color .15s}
.demo-menu .volba:hover{color:var(--ac);border-color:var(--ramec)}
.demo-menu .volba[aria-pressed=true]{background:var(--ac);border-color:var(--ac);color:var(--on-ac)}
.demo-hlavicka{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:8px 24px;margin-bottom:12px}
.demo-hlavicka h2{margin:0}
.demo-hlavicka .pozn{margin:2px 0 0}
.demo-mriz{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:var(--gap);align-items:stretch;margin-bottom:var(--gap)}
.karta-hlava{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:6px 16px;min-height:28px}
.karta-hlava h3{margin:0}
.graf-karta,.skupina-karta{margin-bottom:var(--gap)}

/* tok energie */
.tok{width:100%;height:auto;max-height:340px;display:block}
.tok .uzel{fill:var(--sf2);stroke:var(--ln2);stroke-width:1.5}
.tok .u-pv{stroke:var(--pv)}.tok .u-baterie{stroke:var(--bt)}.tok .u-spotreba{stroke:var(--ld)}.tok .u-sit{stroke:var(--gr)}.tok .u-wallbox{stroke:var(--ev)}
.tok text{font-family:var(--font);fill:var(--ink)}
.tok .n{font-size:13px;font-weight:700}
.tok .h{font-size:12px;font-weight:600;fill:var(--ink2)}
.tok .p{font-size:11px;fill:var(--ink3)}
.tok .stred{fill:var(--acs);stroke:var(--ac);stroke-width:1.5}
.tok .stred-t{font-size:12px;font-weight:700;fill:var(--ac)}
.tok .cara{fill:none;stroke-linecap:round;stroke:var(--ln2);opacity:.35}
.tok .cara.bezi{opacity:1;stroke-dasharray:2 10;animation:tok-ven 1.1s linear infinite}
.tok .cara.bezi.ke-stredu{animation-name:tok-dovnitr}
.tok .c-pv{stroke:var(--pv)}.tok .c-baterie{stroke:var(--bt)}.tok .c-spotreba{stroke:var(--ld)}.tok .c-sit{stroke:var(--gr)}.tok .c-wallbox{stroke:var(--ev)}
@keyframes tok-ven{to{stroke-dashoffset:-24}}
@keyframes tok-dovnitr{to{stroke-dashoffset:24}}
.cas-ovladani{display:flex;align-items:center;gap:12px;margin-top:8px}
.cas-ovladani input[type=range]{flex:1;accent-color:var(--ac);min-height:var(--tap)}

/* dlaždice dne — stejná výška */
.dlazdice-mriz{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:8px}
.dlazdice{background:var(--sf2);border:1px solid var(--ln);border-radius:12px;padding:10px 12px;display:flex;flex-direction:column;justify-content:space-between;gap:4px;min-height:68px;transition:border-color .15s}
.dlazdice:hover{border-color:var(--ramec)}
.dl-n{display:flex;align-items:center;gap:6px;color:var(--ink3);font-size:var(--fs-xs);font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.dl-h{font:inherit;font-size:20px;font-weight:700;color:var(--ink);background:none;border:0;padding:0;text-align:left;cursor:pointer;transition:color .15s}
.dl-h:hover{color:var(--ac)}

/* graf */
.graf{width:100%;height:auto;display:block;margin-top:8px;touch-action:pan-y}
.graf .mrizka{stroke:var(--ln);stroke-width:1}
.graf .osa0{stroke:var(--ln2);stroke-width:1.2}
.graf .popisek{font-family:var(--font);font-size:11px;fill:var(--ink3)}
.graf .rada{fill:none;stroke-width:2;stroke-linejoin:round}
.graf .r-pv{stroke:var(--pv)}.graf .r-spotreba{stroke:var(--ld)}.graf .r-baterie{stroke:var(--bt)}.graf .r-sit{stroke:var(--gr)}.graf .r-wallbox{stroke:var(--ev)}
.graf .r-soc{stroke:var(--bt);stroke-dasharray:4 4;stroke-width:1.5}
.graf .plocha-pv{fill:var(--pv);opacity:.14}
.graf .cena-pruh{fill:var(--cena)}
.graf .kurzor{stroke:var(--ac);stroke-width:1.5}
.graf .klik{fill:transparent;cursor:crosshair}
.legenda{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.leg{font:inherit;font-size:var(--fs-sm);font-weight:600;display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:var(--r-pill);border:1px solid var(--ln);background:var(--sf);color:var(--ink2);cursor:pointer;transition:color .15s,border-color .15s}
.leg:hover{color:var(--ac);border-color:var(--ramec)}
.leg::before{content:'';width:10px;height:10px;border-radius:3px;background:currentColor}
.leg[aria-pressed=false]{opacity:.5}
.l-pv::before{background:var(--pv)}.l-spotreba::before{background:var(--ld)}.l-baterie::before{background:var(--bt)}.l-sit::before{background:var(--gr)}
.l-wallbox::before{background:var(--ev)}.l-soc::before{background:var(--bt);opacity:.5}.l-cena::before{background:var(--cena)}
span.leg{cursor:default}span.leg:hover{color:var(--ink2);border-color:var(--ln)}

/* deník a balíčky */
.denik{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.udalost{font:inherit;width:100%;display:grid;grid-template-columns:96px 1fr;gap:10px;text-align:left;padding:8px 10px;border-radius:10px;border:1px solid var(--ln);background:var(--sf2);color:var(--ink2);cursor:pointer;transition:color .15s,border-color .15s}
.udalost:hover{border-color:var(--ramec);color:var(--ink)}
.u-cas{font-weight:700;color:var(--ink)}
.denik .prazdne{color:var(--ink3)}
.bal-seznam{list-style:none;margin:8px 0 16px;padding:0;display:flex;flex-direction:column;gap:8px}
.bal-seznam li{display:grid;grid-template-columns:80px 1fr;gap:10px;padding:8px 10px;border-radius:10px;border:1px solid var(--ln);color:var(--ink2)}
.bal-seznam li.aktivni{border-color:var(--ac);background:var(--acs);color:var(--ink)}

/* skupina */
.skupina-karta table{min-width:640px}
.skupina-karta .radek{cursor:pointer;transition:background .15s}
.skupina-karta .radek:hover td.jmeno{color:var(--ac)}
.skupina-karta td.cislo{text-align:right}
.sdileni{margin:12px 0 0;color:var(--ink2)}

@media (max-width:560px){.dlazdice-mriz{grid-template-columns:1fr 1fr}.dl-h{font-size:17px}.udalost{grid-template-columns:1fr}.demo-menu{top:auto;position:static}}
@media (prefers-reduced-motion:reduce){.tok .cara.bezi{animation:none}}