/* m03 Lanac odluka (team B). Every selector starts with #pogl-04.
   Slika 3.1 = the growing plan (src/plan.js, team P) in a .plan-steps; Slika 3.2 power panels and the render copied from v02 ch05. */

/* ── the chain: a thin line joins the step numbers; the current step's number turns yellow ── */
#pogl-04 .m03-chain .fact .ix{z-index:1;background:var(--paper);padding:1px 4px;margin-left:-4px;border-radius:3px;transition:background .4s,color .4s}
#pogl-04 .m03-chain .fact.plan-now .ix{background:var(--yellow);color:var(--ink)}
#pogl-04 .m03-chain .fact:has(~ .fact):before{content:"";position:absolute;left:9px;top:calc(var(--gap-fact) + .45em + 20px);bottom:calc(4px - var(--gap-fact) - .45em);border-left:1px dashed var(--g3)}

/* ── the render, uncropped ── */
#pogl-04 .m03-render img{background:var(--white);box-shadow:0 0 0 1px var(--g5)}

/* ── Slika 3.2 power: three panels (ref D) ── */
#pogl-04 .pw{--ph:300px;display:grid;grid-template-columns:62px minmax(0,1fr) minmax(0,1fr) minmax(0,.9fr);column-gap:22px;align-items:start;padding-top:4px}
#pogl-04 .pw-ax{position:relative;height:var(--ph);margin-top:52px}
#pogl-04 .pw-ax span{position:absolute;right:0;transform:translateY(50%);font:400 12px var(--sans);color:var(--ink-2);white-space:nowrap}
#pogl-04 .pw-p{display:flex;flex-direction:column;align-items:center;min-width:0}
#pogl-04 .pw-p > .chip{margin-bottom:22px}
#pogl-04 .pw .plot{position:relative;height:var(--ph);width:100%;display:grid;grid-template-columns:minmax(64px,.42fr) minmax(0,1fr);column-gap:12px;
  border-bottom:1.4px solid var(--line);
  background-image:linear-gradient(to top,var(--g5) 1px,transparent 1px);background-size:100% 12.5%;background-position:0 100%}
#pogl-04 .pw .plot:after{content:"";position:absolute;left:0;right:-22px;bottom:62.5%;border-top:1.4px dashed var(--line);pointer-events:none}
#pogl-04 .pw-p:nth-child(3) .plot:after{right:0}
#pogl-04 .pw .col{position:relative;height:100%}
#pogl-04 .pw .col i{position:absolute;left:0;right:0;bottom:0;display:block}
#pogl-04 .pw .col .trk{top:0;background:var(--g6);box-shadow:inset 0 0 0 1px var(--g5)}
#pogl-04 .pw .bar{height:0;transition:height 1.1s cubic-bezier(.2,.7,.2,1);box-shadow:inset 0 0 0 1.2px var(--line)}
#pogl-04 .pw .b-pv{background:var(--yellow)}
#pogl-04 .pw .b-pv b{position:absolute;left:0;right:0;top:calc(20% + 10px);text-align:center;font:700 19px/1 var(--serif);color:var(--ink);opacity:0;transition:opacity .5s .9s}
#pogl-04 .pw .col .rng{bottom:62.5%;height:0;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='7' height='7'><path d='M-1 8L8 -1' stroke='%2376766f' stroke-width='1.3'/></svg>"),var(--white);box-shadow:inset 0 0 0 1px var(--g3);transition:height .8s .9s}
#pogl-04 .pw .col .rng2{bottom:50%;height:0;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='7' height='7'><path d='M-1 8L8 -1' stroke='%231c1c1a' stroke-opacity='.45' stroke-width='1.2'/></svg>");box-shadow:inset 0 0 0 1.2px var(--line);transition:height .8s .9s}
#pogl-04 .pw .col .lo{bottom:50%;height:0;border-top:2px solid var(--line);left:-6px;right:-6px}
#pogl-04 .pw .b-rest{background:var(--g3)}
#pogl-04 .pw .b-ev{background-color:var(--yellow);background-image:radial-gradient(circle,var(--g1) 30%,transparent 33%);background-size:6px 6px}
#pogl-04 .vis.in .pw .b-pv{height:62.5%}
#pogl-04 .vis.in .pw .b-pv b{opacity:1}
#pogl-04 .vis.in .pw .col .rng{height:37.5%}
#pogl-04 .vis.in .pw .col .rng2{height:50%}
#pogl-04 .vis.in .pw .b-rest{height:62.5%;transition-delay:.25s}
#pogl-04 .vis.in .pw .b-ev{height:12.5%;transition-delay:.25s}
#pogl-04 .pw .lbs{position:relative;height:100%}
#pogl-04 .pw .lb{position:absolute;left:0;right:0;transform:translateY(50%);font:400 12.5px/1.3 var(--sans);color:var(--ink-2)}
#pogl-04 .pw .lb b{display:block;font:600 13.5px/1.25 var(--sans);color:var(--ink)}
#pogl-04 .pw .lb-y b{background:var(--yellow);display:inline-block;padding:0 4px;margin-left:-4px}
#pogl-04 .pw .lb-mid{transform:translateY(50%)}
#pogl-04 .pw .lb-top{transform:none;padding-top:2px}
#pogl-04 .pw .lb-above{transform:none;padding-bottom:5px}
#pogl-04 .pw .lb-below{transform:translateY(100%);padding-top:5px}
#pogl-04 .pw .cap{margin-top:12px;width:100%;font:400 13px/1.4 var(--sans);color:var(--ink-2)}
#pogl-04 .pw .cap b{color:var(--ink);font-weight:600}
/* the net panel */
#pogl-04 .pw-net{align-self:stretch}
#pogl-04 .net{width:100%;height:var(--ph);display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;border:1.2px solid var(--line);background:var(--white);padding:16px 14px}
#pogl-04 .net .eq{display:flex;gap:10px;align-items:baseline;font:500 15px var(--sans)}
#pogl-04 .net .eq span:first-child{background:var(--yellow);padding:1px 5px}
#pogl-04 .net .eq span:last-child{background:var(--g3);color:var(--white);padding:1px 5px}
#pogl-04 .net .eq em{font-style:normal;color:var(--ink-2)}
#pogl-04 .net .zero{font:700 clamp(48px,5vw,76px)/1 var(--serif);margin:10px 0 4px;letter-spacing:-.02em}
#pogl-04 .net > p{font:400 14px/1.35 var(--sans);max-width:15em}
#pogl-04 .net .flows{margin-top:16px;display:flex;flex-direction:column;gap:8px;width:100%}
#pogl-04 .net .fl{display:grid;grid-template-columns:54px minmax(0,1fr);gap:10px;align-items:center;text-align:left;font:400 13px/1.35 var(--sans);color:var(--ink)}
#pogl-04 .net .fl svg{width:54px;height:12px;overflow:visible}
#pogl-04 .net .fl path{fill:none;stroke:var(--ink);stroke-width:1.4}
#pogl-04 .net .fl.out path{stroke:var(--ink)}

/* ── phones (power chart) ── */
@media (max-width:820px){
  #pogl-04 .pw{--ph:250px;grid-template-columns:minmax(0,1fr);row-gap:30px}
  #pogl-04 .pw-ax{display:none}
  #pogl-04 .pw-p > .chip{margin-bottom:14px}
  #pogl-04 .pw .plot{grid-template-columns:76px minmax(0,1fr);column-gap:12px}
  #pogl-04 .pw .plot:after,#pogl-04 .pw-p:nth-child(3) .plot:after{right:0}
  #pogl-04 .pw .lb{font-size:12px;line-height:1.3}
  #pogl-04 .pw .lb b{font-size:13px}
  #pogl-04 .pw .b-pv b{font-size:16px}
  #pogl-04 .pw .cap{font-size:12.5px}
  #pogl-04 .net{height:auto;padding:16px 14px}
  #pogl-04 .net .zero{font-size:56px}
}