/* shared by the interactive pages: network.html, day.html, demand.html, challenge.html */
.phero{min-height:52svh}
.pl{padding:10px 0 120px}
.pl-card{max-width:1080px;margin:0 auto;border-radius:32px;padding:34px;background:linear-gradient(170deg,rgba(255,255,255,.06),rgba(255,255,255,.015));border:1px solid var(--line)}
.pl-card.narrow{max-width:860px}
.pl-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.pl-row label,.pl-f{display:grid;gap:8px;font-size:14px;color:var(--mute)}
.pl-row input,.pl-row select,.pl-f input,.pl-f select{font:inherit;font-size:17px;color:var(--ink);padding:13px 16px;border-radius:14px;border:1px solid var(--line);background:#0a2532;outline:none;width:100%}
.pl-row input:focus,.pl-row select:focus,.pl-f input:focus,.pl-f select:focus{border-color:#b3a46f}
.pl h2{font-size:clamp(24px,2.6vw,32px);font-weight:400;margin-bottom:6px}
.pl h3{font-size:20px;font-weight:400;margin:22px 0 12px}
.pl .sub{color:var(--mute);font-size:15px}
.pl-err{color:#f2a99a;font-size:14px;min-height:1.4em;margin-top:10px}
.pl-nav{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:24px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips label{position:relative;cursor:pointer}
.chips input{position:absolute;opacity:0;pointer-events:none}
.chips span{display:block;padding:10px 16px;border-radius:999px;border:1px solid var(--line);font-size:15px;color:#cfdde3;transition:border-color .25s,background .25s,color .25s}
.chips label:hover span{border-color:rgba(179,164,111,.5)}
.chips input:checked + span{border-color:var(--gold-2);background:rgba(179,164,111,.14);color:#fff}
.chips input:focus-visible + span{outline:2px solid var(--gold-2);outline-offset:2px}
.opts{display:grid;gap:10px}
.opts button{font:inherit;text-align:start;cursor:pointer;padding:16px 18px;border-radius:18px;border:1px solid var(--line);background:rgba(255,255,255,.02);color:#e6eef1;font-size:17px;line-height:1.6;transition:border-color .25s,background .25s}
.opts button:hover,.opts button:focus-visible{border-color:var(--gold-2);background:rgba(179,164,111,.08);outline:none}
.opts button small{display:block;color:var(--mute);font-size:14px}
.meters{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.meters div{display:grid;gap:6px;font-size:14px;color:var(--mute)}
.meters i{display:block;height:8px;border-radius:8px;background:rgba(255,255,255,.08);overflow:hidden}
.meters i b{display:block;height:100%;border-radius:8px;background:var(--gold-2);transition:width .6s var(--ease-out)}
.meters i b.low{background:#e0927f}
.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:18px 0}
.stat-row div{padding:16px 18px;border-radius:18px;border:1px solid var(--line);background:rgba(255,255,255,.02)}
.stat-row b{display:block;font-size:34px;font-weight:400;color:var(--gold-2);line-height:1.1;font-variant-numeric:tabular-nums}
.stat-row span{font-size:14px;color:var(--mute)}
.list-b{list-style:none;display:grid;gap:10px;padding:0}
.list-b li{padding:14px 18px;border-radius:16px;border:1px solid var(--line);background:rgba(255,255,255,.02);font-size:16px}
.list-b li b{display:block;font-weight:400;color:#fff}
.list-b li span{color:var(--mute);font-size:14px}
.list-b li.gap{background:rgba(224,146,127,.08);border-color:rgba(224,146,127,.28)}
.list-b li.ok{border-color:rgba(179,164,111,.35)}
.note{font-size:13px;color:var(--mute);margin-top:14px}
.pl-tools{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
@media (max-width:760px){.pl-card{padding:20px;border-radius:24px}.meters{grid-template-columns:repeat(2,1fr)}}
@media print{.pl-card{border:0!important;background:transparent!important;max-width:none!important}}