/* Power module of the Learn page */
.pw-basics { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.pw-basics .card { padding: 18px; }
.pw-basics b { font: 700 1.9rem/1 "Chakra Petch", sans-serif; color: var(--hl); display: block; direction: ltr; text-align: start; }
.pw-basics h4 { font-size: 1rem; margin: 10px 0 6px; }
.pw-basics p { margin: 0; color: var(--muted); font-size: .9rem; }

/* Live circuit */
.pw-fig { padding: 18px; }
.pw-ctl { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.pw-ctl .chip.danger { border-color: color-mix(in srgb, var(--bad) 60%, transparent); color: var(--bad); }
.pw-status { flex: 1 1 260px; font-size: .88rem; color: var(--muted); }
.pw-scroll { overflow-x: auto; }
#pwSvg { width: 100%; min-width: 640px; height: auto; display: block; }
#pwSvg .wire { fill: none; stroke: var(--line); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; transition: stroke .3s; }
#pwSvg .wire.thin { stroke-width: 2.5; }
#pwSvg .i2c { fill: none; stroke: var(--muted); stroke-width: 1.4; stroke-dasharray: 5 5; }
#pwSvg.is-chg .w-chg, #pwSvg.is-on .w-load, #pwSvg.is-on .w-main { stroke: var(--gold); stroke-dasharray: 11 8; animation: pwflow .8s linear infinite; }
#pwSvg.is-blown .w-main, #pwSvg.is-blown .w-load { stroke: var(--line); stroke-dasharray: none; animation: none; }
@keyframes pwflow { to { stroke-dashoffset: -19; } }
#pwSvg .nd { cursor: pointer; }
#pwSvg .nd rect { fill: var(--card2); stroke: var(--line); stroke-width: 1.5; transition: fill .3s, stroke .3s; }
#pwSvg .nd:hover rect, #pwSvg .nd.sel rect { stroke: var(--gold); stroke-width: 2.5; }
#pwSvg .t1 { font: 600 13px var(--body); fill: var(--ink); text-anchor: middle; pointer-events: none; }
#pwSvg .t2 { font: 400 10.5px var(--mono); fill: var(--muted); text-anchor: middle; pointer-events: none; }
#pwSvg .sw circle { fill: var(--ink); } #pwSvg .sw line { stroke: var(--ink); stroke-width: 3; stroke-linecap: round; transition: all .25s; }
/* powered blocks light up */
#pwSvg.is-on [data-node="ina"] rect, #pwSvg.is-on [data-node="u1"] rect, #pwSvg.is-on [data-node="u2"] rect, #pwSvg.is-on [data-node="pi"] rect, #pwSvg.is-on [data-node="disp"] rect, #pwSvg.is-on [data-node="hub"] rect, #pwSvg.is-on [data-node="fans"] rect, #pwSvg.is-chg [data-node="chg"] rect
  { fill: color-mix(in srgb, var(--gold) 22%, var(--card2)); stroke: var(--gold); }
#pwSvg [data-node="bat"] rect { fill: color-mix(in srgb, var(--gold) 14%, var(--card2)); }
#pwSvg.is-blown [data-node="f2"] rect { fill: color-mix(in srgb, var(--bad) 30%, var(--card2)); stroke: var(--bad); }
#pwSvg .fanico path { fill: var(--muted); }
#pwSvg.is-on .fanico path { fill: var(--hl); }
#pwSvg.is-on .fanico .spin { animation: pwspin 1.2s linear infinite; transform-box: fill-box; transform-origin: center; }
@keyframes pwspin { to { transform: rotate(360deg); } }
#pwSvg .spark { opacity: 0; pointer-events: none; }
#pwSvg .spark path { fill: var(--bad); }
#pwSvg .spark.go { animation: pwspark .9s ease-out; }
@keyframes pwspark { 0% { opacity: 1; transform: scale(1); } 30% { opacity: 1; } 100% { opacity: 0; } }
.pw-legend { display: flex; flex-wrap: wrap; gap: 18px; font-size: .8rem; color: var(--muted); margin: 10px 0 0; }
.pw-legend span { display: inline-flex; align-items: center; gap: 8px; }
.pw-legend i { width: 28px; display: inline-block; border-top: 5px solid var(--gold); }
.pw-legend i.k5 { border-top-width: 2.5px; } .pw-legend i.kd { border-top: 1.5px dashed var(--muted); }
.pw-info { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); min-height: 108px; }
.pw-info h4 { font-size: 1.1rem; color: var(--hl); margin-bottom: 4px; }
.pw-info p { margin: 0; color: var(--muted); font-size: .94rem; }

/* Load builder */
.pw-build { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 230px); gap: 28px; align-items: center; }
.pw-load { display: grid; grid-template-columns: 22px minmax(0, 1.3fr) minmax(40px, 1fr) 62px; gap: 10px; align-items: center; width: 100%; padding: 8px 10px; margin-bottom: 6px; border-radius: 10px; border: 1px solid var(--line); background: transparent; color: var(--muted); font: inherit; font-size: .9rem; text-align: start; cursor: pointer; transition: all .2s; }
.pw-load:hover { border-color: var(--gold); }
.pw-load.on { color: var(--ink); background: var(--bg2); }
.pw-load .tick { width: 20px; height: 20px; border-radius: 6px; border: 1px solid var(--line); display: grid; place-items: center; font-size: .75rem; }
.pw-load.on .tick { background: var(--gold); border-color: var(--gold); color: #141414; }
.pw-load .bar { height: 6px; border-radius: 99px; background: var(--line); overflow: hidden; direction: ltr; }
.pw-load .bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold2), var(--gold)); border-radius: 99px; transition: width .35s; }
.pw-load .num { font-size: .8rem; text-align: end; direction: ltr; }
.pw-build .gauge { text-align: center; }
.pw-build .gauge > b { font: 700 3.4rem/1 "Chakra Petch", sans-serif; color: var(--hl); display: block; direction: ltr; }
.pw-build .gauge > span { color: var(--muted); font-size: .9rem; }
.cell-ico { width: 54px; height: 92px; margin: 0 auto 12px; border: 2px solid var(--muted); border-radius: 9px; position: relative; display: flex; align-items: flex-end; padding: 3px; }
.cell-ico::before { content: ""; position: absolute; top: -8px; left: 50%; transform: translateX(-50%); width: 20px; height: 6px; border-radius: 3px 3px 0 0; background: var(--muted); }
.cell-ico i { display: block; width: 100%; border-radius: 5px; background: linear-gradient(0deg, var(--gold2), var(--gold)); transition: height .4s, background .3s; }
.cell-ico i.low { background: var(--bad); }
.pw-sum { font-size: .84rem; color: var(--muted); margin: 12px 0 10px; line-height: 1.7; }
.pw-build .gauge .pw-sum b { display: inline; font: 500 .88rem var(--mono); color: var(--ink); }

/* Guards */
.pw-guard h4 { font-size: 1.1rem; margin-bottom: 12px; }
.pw-guard h4 small { font: 400 .75rem var(--mono); color: var(--muted); margin-inline-start: 6px; }
:root[data-lang="ar"] .pw-guard h4 small { font-family: var(--body); font-size: .82rem; }
.pw-guard label { font-size: .9rem; color: var(--muted); display: block; }
.pw-guard label b { color: var(--ink); }
.pw-guard input[type=range] { width: 100%; accent-color: var(--gold2); direction: ltr; margin: 8px 0 4px; }
.zones { display: flex; gap: 3px; height: 6px; direction: ltr; margin: 0 8px; }
.zones i { border-radius: 99px; } .z-ok { background: var(--ok); } .z-warn { background: var(--warn); } .z-bad { background: var(--bad); }
.guard-out { margin-top: 14px; min-height: 92px; }
.guard-out p { margin: 8px 0 0; color: var(--muted); font-size: .92rem; }
#pwTempState { display: grid; grid-template-columns: 56px 1fr; gap: 14px; align-items: center; }
.bigfan { width: 56px; height: 56px; animation: pwspin 2s linear infinite; }
.bigfan path { fill: var(--hl); } .bigfan circle { fill: var(--card); stroke: var(--hl); }
.pw-facts { margin: 0 0 18px; padding-inline-start: 20px; display: grid; gap: 8px; color: var(--muted); }
.pw-facts b { color: var(--ink); }
@media (max-width: 900px) { .pw-build { grid-template-columns: minmax(0, 1fr); } }