/* AIENERGY.AE — Smart Water & Desalination page. Loads AFTER oilgas.css (shared tokens/components);
   everything here is scoped to body.wt so no other page is affected. */

/* hero illustration */
.wt .blades{transform-box:fill-box;transform-origin:center}
.wt .wv{animation:wv 5s ease-in-out infinite alternate}@keyframes wv{to{transform:translateX(-16px)}}
.wt .drop{fill:var(--gold);animation:dr 2.4s ease-in infinite}.wt .drop:nth-of-type(2){animation-delay:.8s}.wt .drop:nth-of-type(3){animation-delay:1.6s}
@keyframes dr{from{transform:translateY(-8px);opacity:1}to{transform:translateY(16px);opacity:0}}
.wt .sunc{fill:#ffb84d}

/* A. optimizer */
.opt{display:grid;grid-template-columns:1fr 1.3fr;gap:20px;margin-top:12px}
.ctl2{display:flex;flex-direction:column;gap:14px}
.ctl2 label{display:flex;flex-direction:column;gap:4px;font-size:.84rem;color:var(--mute)}.ctl2 label b{color:var(--gold2)}
.rec{padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--panel);font-size:.84rem;color:var(--mute)}.rec b{color:var(--gold2)}
.wt .kp{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.wt .kp b{font-size:1.45rem}

/* B. water leak card */
.lcap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;font-size:.74rem;color:var(--mute);padding:2px 4px}
.lcap i{display:inline-block;width:14px;border-top:2px dashed rgba(31,200,255,.6);vertical-align:middle;margin-inline-end:5px}
.wt .scope canvas#lcv{height:230px}
.chan{display:flex;flex-wrap:wrap;gap:8px}
.chan span{display:inline-flex;align-items:center;gap:7px;padding:5px 12px;border:1px solid var(--line);border-radius:999px;font-size:.78rem;font-weight:700;background:var(--panel)}
.chan span::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--ok)}
.chan span.hit{border-color:var(--warn)}.chan span.hit::before{background:var(--warn)}
.chan span.hit.c{border-color:var(--crit)}.chan span.hit.c::before{background:var(--crit)}
.wt .ind{grid-template-columns:1fr 1fr}
.wt .ind div.wide{grid-column:1/-1}

/* C. map */
.mk.hy .shape{fill:#7df9d0}
.mk.hy text,.mk.ro text{font-size:12px}

/* D. nexus */
.nx{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-top:14px}
a.nxc{display:block;padding:18px;border:1px solid var(--line);border-radius:16px;background:var(--card);transition:border-color .2s,transform .2s}
a.nxc:hover,a.nxc:focus-visible{border-color:var(--gold2);transform:translateY(-2px)}
a.nxc .ic{display:inline-grid;place-items:center;width:42px;height:42px;border-radius:12px;border:1px solid var(--line);background:var(--panel);font-size:1.35rem;margin-bottom:8px}
a.nxc h3{font-size:1.02rem}a.nxc p{color:var(--mute);font-size:.86rem;margin:4px 0 8px}
a.nxc .go{font-size:.82rem;font-weight:800;color:var(--gold2)}
.flowd{margin-top:16px;border:1px solid var(--line);border-radius:16px;background:var(--panel);overflow:hidden;direction:ltr}
.flowd svg{display:block;width:100%;height:auto}
.flowd text{fill:var(--ink);font-size:13px;font-weight:700}.flowd .sm{fill:var(--mute);font-size:11px;font-weight:400}
.flowd .nd{fill:#0a2347;stroke:var(--gold);stroke-width:1.5}.flowd .ln{fill:none;stroke:var(--gold2);stroke-width:2;stroke-dasharray:4 9;animation:flow 2s linear infinite}

/* solutions list */
.sgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px}
.sgrid a{display:flex;align-items:center;gap:12px;padding:14px 16px;min-height:56px;border:1px solid var(--line);border-radius:14px;background:var(--card);font-weight:700;transition:border-color .2s,background .2s}
.sgrid a:hover,.sgrid a:focus-visible{border-color:var(--gold2);background:rgba(31,200,255,.1)}
.sgrid a.cur{border-color:var(--gold2);background:rgba(93,255,106,.1)}
.sgrid .ic{font-size:1.3rem;line-height:1}

@media(max-width:900px){.opt{grid-template-columns:1fr}.wt .scope canvas#lcv{height:200px}}
@media(prefers-reduced-motion:reduce){.wt .wv,.wt .drop,.flowd .ln{animation:none!important}}