/* ═══════════════════════════════════════════════════════════════════════
   ENERGARD — демо-панель моніторингу (.el-*) і блок «Система в реальному
   часі» (.eg-elive-*) навколо неї.

   Винесено з projects.css 2026-09-30: панель стоїть уже в трьох місцях —
   на сторінці «Кейси», першою карткою в стосі на головній і на сторінці
   «Прорахувати станцію», — і тягнути заради неї весь projects.css скрізь
   немає сенсу. Розмітка — template-parts/energy-live-app.php.
   ═══════════════════════════════════════════════════════════════════════ */

/* ═══ «Система в реальному часі» — демо-панель моніторингу ═══════════════
   template-parts/energy-live.php на сторінці «Кейси». Макет повторює
   застосунок моніторингу зі скріна власника: статус-бар, шапка, вкладки,
   нічна сцена з виносками, «Дані за день», нижнє меню. Темний острів —
   у світлій темі лишається темним (gen_light.py пропускає: SKIP eg-elive). */
.eg-elive{ position:relative; padding:clamp(40px,6vw,78px) 20px; }
.eg-elive__in{
  max-width:1240px; margin:0 auto; display:grid; gap:clamp(28px,4vw,56px);
  grid-template-columns:minmax(0,1fr) minmax(320px,560px); align-items:center;
}
.eg-elive__h{ margin:14px 0 0; font-size:clamp(28px,3.4vw,44px); line-height:1.08; letter-spacing:-.03em; font-weight:700; color:var(--text); }
.eg-elive .eg-elive__sub{ margin:16px 0 0; font-size:16px; line-height:1.7; color:var(--muted); max-width:56ch; }
.eg-elive__list{ list-style:none; margin:26px 0 0; padding:0; display:grid; gap:10px; }
.eg-elive__list li{ display:grid; gap:3px; padding:14px 18px; border-radius:16px; border:1px solid var(--border); background:var(--surface); }
.eg-elive__list b{ font-size:15px; font-weight:650; color:var(--text); }
.eg-elive__list span{ font-size:13.5px; line-height:1.55; color:var(--muted); }
.eg-elive__cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:26px; }

/* ── картка моніторингу: інтерфейс застосунку (2026-10-06) ──────────────
   Як на скріні застосунку власника: статус-бар, шапка з назвою й погодою,
   адреса, вкладки, «Час оновлення», сцена з підписами по кутах, «Дані за
   день», нижнє меню. Розкладка залежить від ширини самої картки
   (container queries): вузька — вертикальний екран, широка (слайдер на
   головній) — «планшет»: сцена ліворуч, дані праворуч.
   Завжди темна, як застосунок (і в світлій темі сайту). */
.eg-elive__app{ margin:0 auto; display:grid; gap:14px; width:100%; max-width:410px; }
.el-card{
  container-type:inline-size; width:100%; border-radius:30px; overflow:hidden;
  background:#111215; color:#f4f4f6; border:1px solid rgba(255,255,255,.08);
  box-shadow:0 26px 60px rgba(0,0,0,.35);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,"DM Sans",sans-serif;
  --el-mut:rgba(235,235,245,.6); --el-tile:#26272b; --el-pill:#2b2c31; --el-acc:#ff8a1f;
}
html[data-theme="light"] .el-card{ box-shadow:0 26px 60px rgba(15,23,42,.18); }
.el-app{ display:grid; grid-template-columns:minmax(0,1fr); height:100%;
  grid-template-areas:"sbar" "head" "addr" "tabs" "upd" "equip" "stage" "day" "nav"; }
.el-sbar{ grid-area:sbar; display:flex; justify-content:space-between; align-items:center; padding:12px 26px 2px; font-size:15px; font-weight:600; }
.el-sbar__t{ font-variant-numeric:tabular-nums; }
.el-sbar__ic{ display:inline-flex; align-items:center; gap:6px; }
.el-sbar__ic svg{ height:11px; width:auto; }
.el-sbar__bat{ padding:0 5px; border-radius:4px; background:#ffd60a; color:#111; font-size:11px; font-weight:800; line-height:15px; }
.el-head{ grid-area:head; display:flex; justify-content:space-between; align-items:center; padding:12px 18px 4px; }
.el-head__name{ display:inline-flex; align-items:center; gap:7px; font-size:19px; font-weight:700; letter-spacing:.01em; }
.el-head__name > i{ width:11px; height:11px; border-radius:50%; background:#30D158; box-shadow:0 0 0 0 rgba(48,209,88,.6); animation:elPulse 2.4s infinite; }
@keyframes elPulse{ 70%{ box-shadow:0 0 0 7px rgba(48,209,88,0) } 100%{ box-shadow:0 0 0 0 rgba(48,209,88,0) } }
.el-head__name svg{ width:16px; height:16px; margin-left:-3px; }
.el-demo{ margin-left:4px; padding:2px 8px; border-radius:100px; font-size:9.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  color:#ffbf2f; border:1px solid rgba(255,191,47,.45); background:rgba(255,191,47,.12); }
.el-head__wx{ display:inline-flex; align-items:center; gap:7px; font-size:18px; font-weight:500; }
.el-head__wx svg{ width:21px; height:21px; }
.el-head__wx svg:last-child{ margin-left:10px; }
.el-addr{ grid-area:addr; display:flex; justify-content:space-between; gap:10px; padding:4px 18px 0; font-size:12.5px; color:var(--el-mut); }
.el-addr span{ display:inline-flex; align-items:center; gap:6px; min-width:0; }
.el-addr svg{ width:15px; height:15px; flex:none; }
.el-tabs{ grid-area:tabs; display:flex; gap:8px; padding:12px 14px 0; overflow:hidden; }
.el-tabs > *{ flex:1 1 auto; padding:8px 10px; border-radius:100px; background:var(--el-pill); text-align:center; font-size:13px; font-weight:500; white-space:nowrap; color:#e9e9ee; }
.el-tabs b{ background:#4a4b51; font-weight:600; }
.el-upd{ grid-area:upd; padding:10px 14px 0; text-align:center; font-size:11.5px; color:var(--el-mut); font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.el-equip{ grid-area:equip; padding:12px 0 0; text-align:center; font-size:15px; font-weight:500; }
.el-equip svg{ width:9px; height:6px; margin-left:6px; vertical-align:middle; }

/* сцена */
/* небо — CSS (у рендері воно прозоре): майже чорне, графітове, світліше до обрію — як у застосунку */
.el-stage{ grid-area:stage; position:relative; aspect-ratio:1 / .96; overflow:hidden;
  background:linear-gradient(180deg, var(--sky-a, #0c0d10) 0%, var(--sky-b, #1c1e24) 64%, #121318 100%); }
/* денна картинка поверх нічної; прозорість — за часом симуляції (JS: --day, --dim) */
.el-photo--day{ opacity:var(--day, 0); filter:brightness(var(--dim, 1)); transition:opacity .9s linear, filter .9s linear; }
.el-stage::after{ content:""; position:absolute; inset:auto 0 0 0; height:22%; pointer-events:none; background:linear-gradient(transparent,#111215); }
.el-photo{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.el-ov, .el-leads{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.el-leads{ z-index:1; opacity:0; transition:opacity .3s; }
.el-card.is-ready .el-leads{ opacity:1; }
/* світні лінії по кабелях рендера */
.el-c{ fill:none; stroke:none; }
.el-f{ fill:none; stroke:#3ee08a; stroke-width:7; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:6 22; opacity:0; transition:opacity .5s ease; filter:drop-shadow(0 0 8px rgba(62,224,138,.95)); }
.el-f.is-on{ opacity:1; animation:elRun 1.2s linear infinite; }
.el-f.is-on.is-rev{ animation-direction:reverse; }
.el-f[data-flow="grid"]{ stroke:#7eb2ff; filter:drop-shadow(0 0 8px rgba(126,178,255,.9)); }
.el-f[data-flow="pv"]{ stroke:#ffc531; filter:drop-shadow(0 0 8px rgba(255,197,49,.9)); }
@keyframes elRun{ to{ stroke-dashoffset:-56 } }
/* зорі на небі — легкий CSS-шар, гасне донизу */
.el-stars{ position:absolute; inset:0 0 40% 0; pointer-events:none; opacity:calc((1 - var(--day, 0)) * .9); transition:opacity .9s linear;
  background-image:
    radial-gradient(1px 1px at 8% 12%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 19% 34%, #dfe6ff 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 27% 8%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 36% 22%, #cfd8ff 50%, transparent 51%),
    radial-gradient(1px 1px at 44% 6%, #fff 50%, transparent 51%), radial-gradient(1.2px 1.2px at 52% 18%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 61% 9%, #dfe6ff 50%, transparent 51%), radial-gradient(1px 1px at 69% 27%, #fff 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 77% 5%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 86% 17%, #cfd8ff 50%, transparent 51%),
    radial-gradient(1px 1px at 93% 31%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 14% 26%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 57% 31%, #dfe6ff 50%, transparent 51%), radial-gradient(1.2px 1.2px at 3% 40%, #fff 50%, transparent 51%);
  -webkit-mask-image:linear-gradient(#000 40%, transparent); mask-image:linear-gradient(#000 40%, transparent); }
.el-leads path{ fill:none; stroke:rgba(255,140,60,.85); stroke-width:1.4; stroke-dasharray:2 4; }
.el-lbl{ position:absolute; z-index:2; display:grid; gap:1px; text-shadow:0 2px 10px rgba(0,0,0,.65); }
.el-lbl--tl{ left:16px; top:10px; } .el-lbl--tr{ right:16px; top:10px; text-align:right; }
.el-lbl--bl{ left:16px; bottom:12px; } .el-lbl--br{ right:16px; bottom:12px; text-align:right; }
.el-lbl__t{ font-size:13px; color:rgba(235,235,245,.72); }
.el-lbl__v{ font-size:13px; color:rgba(255,255,255,.9); font-variant-numeric:tabular-nums; }
.el-lbl__v b{ font-size:23px; font-weight:700; color:#fff; margin-right:2px; }
.el-card.is-out [data-lbl="grid"] b{ color:#ff7b70; }
.el-soc{ position:absolute; z-index:2; left:22%; top:58%; transform:translate(-50%,-50%); font-size:17px; font-weight:800; color:#3ee08a;
  text-shadow:0 0 10px rgba(62,224,138,.7); font-variant-numeric:tabular-nums; pointer-events:none; }
.el-alarm{
  position:absolute; z-index:3; left:50%; top:52px; transform:translateX(-50%); white-space:nowrap;
  padding:5px 12px; border-radius:100px; font-size:11px; font-weight:700; letter-spacing:.04em;
  color:#fff; background:rgba(255,69,58,.92); box-shadow:0 6px 18px rgba(255,69,58,.35);
  animation:elAlarm 1.8s ease-in-out infinite;
}
@keyframes elAlarm{ 50%{ opacity:.55 } }

/* дані за день */
.el-day{ grid-area:day; padding:6px 16px 16px; }
.el-day__h{ margin:0 0 12px; font-size:18px; font-weight:700; color:#fff; }
.el-day__grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.el-tile{ padding:16px 10px 14px; border-radius:16px; background:var(--el-tile); display:grid; justify-items:center; gap:6px; text-align:center; }
.el-tile--mode{ grid-column:1 / -1; grid-template-columns:auto 1fr; justify-items:start; align-items:center; text-align:left; column-gap:12px; padding:12px 14px; }
.el-tile--mode .el-tile__ic{ grid-row:span 2; }
.el-tile__ic{ width:44px; height:44px; border-radius:50%; background:#3a3b41; display:grid; place-items:center; color:#fff; }
.el-tile__ic svg{ width:22px; height:22px; }
.el-tile__l{ font-size:13.5px; color:var(--el-mut); }
.el-tile__v{ font-size:13px; color:rgba(255,255,255,.85); }
.el-tile__v b{ font-size:21px; font-weight:700; color:#fff; font-variant-numeric:tabular-nums; }
.el-tile__v b.el-mode{ font-size:15px; }

/* нижнє меню */
.el-nav{ grid-area:nav; display:grid; grid-template-columns:repeat(3,1fr); padding:10px 8px 14px; background:#1b1c20; border-top:1px solid rgba(255,255,255,.05); }
.el-nav span{ display:grid; justify-items:center; gap:4px; font-size:12.5px; color:rgba(235,235,245,.62); }
.el-nav svg{ width:24px; height:24px; }
.el-nav .is-on{ color:var(--el-acc); }

/* ── широка картка (слайдер на головній): «планшетна» розкладка ── */
@container (min-width: 560px){
  .el-app{ grid-template-columns:minmax(0,1fr) 31%; grid-template-rows:auto auto auto minmax(0,1fr) auto;
    grid-template-areas:"sbar sbar" "head head" "tabs upd" "stage day" "nav nav"; }
  .el-addr, .el-equip{ display:none; }
  .el-sbar{ padding:8px 18px 0; font-size:12.5px; }
  .el-head{ padding:6px 16px 0; } .el-head__name{ font-size:16px; } .el-head__wx{ font-size:14px; }
  .el-head__wx svg{ width:17px; height:17px; }
  .el-tabs{ padding:8px 0 6px 14px; gap:6px; } .el-tabs > *{ padding:5px 10px; font-size:11.5px; }
  .el-upd{ padding:8px 14px 6px 8px; align-self:center; text-align:right; font-size:10.5px; }
  .el-stage{ aspect-ratio:auto; min-height:240px; margin:0 0 0 12px; border-radius:16px; }
  .el-stage::after{ display:none; }
  .el-day{ padding:0 12px 10px 10px; display:flex; flex-direction:column; min-height:0; }
  .el-day__h{ font-size:14px; margin-bottom:8px; }
  .el-day__grid{ grid-template-columns:1fr; gap:8px; flex:1; }
  .el-tile{ grid-template-columns:auto 1fr; justify-items:start; align-items:center; text-align:left; column-gap:10px; padding:8px 10px; }
  .el-tile .el-tile__ic{ grid-row:span 2; width:34px; height:34px; } .el-tile__ic svg{ width:17px; height:17px; }
  .el-tile__l{ font-size:11.5px; } .el-tile__v{ font-size:11px; } .el-tile__v b{ font-size:16px; } .el-tile__v b.el-mode{ font-size:12.5px; }
  .el-tile--mode{ grid-column:auto; }
  .el-nav{ padding:6px 8px 8px; margin-top:10px; } .el-nav svg{ width:19px; height:19px; } .el-nav span{ font-size:10.5px; gap:2px; }
  .el-lbl__t{ font-size:12px; } .el-lbl__v b{ font-size:19px; }
}

.eg-elive__cap{ max-width:620px; font-size:12.5px; line-height:1.5; color:var(--muted); text-align:center; }

@media (max-width:1000px){
  .eg-elive__in{ grid-template-columns:1fr; justify-items:center; }
  .eg-elive__txt{ text-align:center; }
  .eg-elive .eg-elive__sub{ margin-left:auto; margin-right:auto; }
  .eg-elive__list{ text-align:left; }
  .eg-elive__cta{ justify-content:center; }
  .eg-elive__app{ order:-1; }
}
@media (prefers-reduced-motion:reduce){
  .el-head__name > i,.el-alarm,.el-f.is-on{ animation:none; }
}