/* m06 Otvoreno, a ne zatvoreno (team D). Every selector under #pogl-05.
   Slika 6.1 money tree: copied from v02 ch03 (src/ch/ch03/style.css). Slika 6.4 ring: copied from v02 ch04 (4.3 only).
   Slika 6.2 is the growing plan (src/plan.css); Slika 6.3 (year) is new, at the end. */

/* ── Slika 6.1 money tree (v02 ch03) ── */
#pogl-05 .m3{display:grid;grid-template-columns:minmax(0,clamp(290px,22vw,340px)) minmax(0,1fr);gap:2.4vw;padding:2vh 5.3vw 4vh;margin:0 1px;position:relative;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:26px 26px;background-position:-1px -1px}
#pogl-05 .m3-skip{grid-column:1/-1;font:500 12px var(--sans);letter-spacing:.06em;text-transform:uppercase}
#pogl-05 .m3-skip a{color:var(--ink-2);text-decoration:none;border-bottom:1px solid var(--ink-3)}
#pogl-05 .m3-skip a:hover{color:var(--ink)}
#pogl-05 .m3-steps{grid-column:1;grid-row:2;padding-bottom:30vh}
#pogl-05 .m3-g{min-height:72vh;padding:10vh 0 4vh;opacity:.42;transition:opacity .5s}
#pogl-05 .m3-g:first-child{padding-top:8vh}
#pogl-05 .m3-g.cur{opacity:1}
#pogl-05 .m3-gh{display:flex;align-items:center;gap:10px;font:600 13px var(--sans);letter-spacing:.07em;text-transform:uppercase;color:var(--ink);padding:0 0 6px;border-bottom:1px solid var(--line);margin-bottom:4px}
#pogl-05 .m3-gh .chip{padding:5px 8px;min-width:22px;text-align:center}
#pogl-05 .m3-g .fact{font-size:clamp(18px,1.32vw,21px);--gap-fact:clamp(10px,1.7vh,18px)}

/* the sticky figure */
#pogl-05 .m3-fig{grid-column:2;grid-row:2;align-self:start;position:sticky;top:18px;margin:0}
#pogl-05 .m3-fig.in{transform:none}
#pogl-05 .m3-tabs{display:flex;gap:6px;padding:8px 20px;background:var(--paper-2);border-bottom:1px solid var(--g5);flex-wrap:wrap}
#pogl-05 .m3-tab{font:500 13px/1 var(--sans);color:var(--ink);background:transparent;border:1px solid var(--line);border-radius:9px;padding:7px 12px;cursor:pointer;transition:background .25s}
#pogl-05 .m3-tab:hover{background:var(--white)}
#pogl-05 .m3-tab.on{background:var(--ink);color:var(--white)}
#pogl-05 .m3-tab.on[data-s="2"]{background:var(--yellow);color:var(--ink)}
#pogl-05 .m3-fig .vb{padding:14px 20px 10px}
#pogl-05 .m3-fig .vs{padding:8px 20px 11px}
#pogl-05 .m3-svg{display:block;width:100%;height:auto;overflow:visible}
#pogl-05 .m3-fig .m3-svg{max-height:calc(100svh - 300px)} /* fallback; script.js sets the real free height */
#pogl-05 .m3-inl{display:none}

/* svg marks */
#pogl-05 .m3-svg text{font-family:var(--sans)}
#pogl-05 .m3-h{font:600 14px var(--sans);letter-spacing:.08em;text-transform:uppercase;fill:var(--ink-2)}
#pogl-05 .m3-h3{font:500 13.5px var(--sans);letter-spacing:.06em;text-transform:uppercase;fill:var(--ink)}
#pogl-05 .m3-b{stroke:var(--line);stroke-width:1}
#pogl-05 .m3-b.dash{stroke-dasharray:5 4}
#pogl-05 .m3-bands path{stroke:none;transition:fill .4s}
#pogl-05 .m3-l{font-weight:500}
#pogl-05 .m3-l.g{fill:var(--ink-2)}
#pogl-05 .m3-p{font-family:var(--serif)!important;font-weight:700}
#pogl-05 .m3-lay{opacity:0;transition:opacity .35s;pointer-events:none}
#pogl-05 .m3-lay.on{opacity:1;transition:opacity .5s .5s}
#pogl-05 .m3-q{fill:var(--g5);stroke:var(--line);stroke-width:1}
#pogl-05 .m3-q.y{fill:var(--yellow)}
#pogl-05 .m3-qt{font-family:var(--serif)!important;font-weight:700;text-anchor:middle;fill:var(--ink)}
#pogl-05 .m3-pill{stroke-width:1.1}
#pogl-05 .m3-pill.miss{fill:var(--white);stroke:var(--g3);stroke-dasharray:3 3}
#pogl-05 .m3-pill.miss.g{stroke:var(--g4);fill:var(--g6)}
#pogl-05 .m3-pt.g{fill:var(--ink-2)}
#pogl-05 .m3-pill.yz{fill:var(--yellow-soft);stroke:var(--line)}
#pogl-05 .m3-pt{fill:var(--ink)}
#pogl-05 .m3-dash{fill:none;stroke:var(--g3);stroke-width:1.2;stroke-dasharray:4 4}
#pogl-05 .m3-tie{fill:none;stroke:var(--line);stroke-width:1}
#pogl-05 .m3-box{fill:none;stroke:var(--line);stroke-width:2.2}
#pogl-05 .m3-ghost{fill:rgba(246,246,242,.7);stroke:var(--g3);stroke-width:1.2;stroke-dasharray:5 4}
#pogl-05 .m3-loop{fill:none;stroke:var(--line);stroke-width:1.6;stroke-dasharray:6 4}
#pogl-05 .m3-chipy{fill:var(--yellow)}
#pogl-05 .m3-chipt{font:600 13px var(--sans);letter-spacing:.07em;fill:var(--ink)}
#pogl-05 .m3-note{display:none}

/* below 1100 px: no pin; one tree per group, inline after its facts */
@media (max-width:1100px){
  #pogl-05 .m3{grid-template-columns:minmax(0,1fr);gap:0}
  #pogl-05 .m3-fig,#pogl-05 .m3-skip{display:none}
  #pogl-05 .m3-steps{grid-row:auto;padding-bottom:0}
  #pogl-05 .m3-g .fact,#pogl-05 .m3-gh{max-width:760px}
  #pogl-05 .m3-g,#pogl-05 .m3-g:first-child{min-height:0;padding:3vh 0 1vh;opacity:1}
  #pogl-05 .m3-inl{display:block;margin:3vh 0 2vh}
}
@media (max-width:820px){
  #pogl-05 .m3{padding:2vh 16px 2vh}
  #pogl-05 .m3-inl{margin:3vh -8px 2vh}
  #pogl-05 .m3-inl .vb{padding:14px 6px 10px}
}
@media (max-width:700px){
  #pogl-05 .m3-note{display:block;margin-top:10px;font:400 13.5px/1.45 var(--sans);color:var(--ink)}
  #pogl-05 .m3-note .q{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--yellow);border:1px solid var(--line);font:700 14px var(--serif);margin-right:4px}
  #pogl-05 .m3-note .q.g{background:var(--g5)}
  #pogl-05 .m3-note .chipy{display:inline-block;background:var(--yellow);font:600 11px var(--sans);letter-spacing:.07em;text-transform:uppercase;padding:4px 7px;border-radius:5px;margin-right:4px}
}

/* ── Slika 6.4 ring (v02 ch04 4.3, simplified) ── */
#pogl-05 .f-S{--fam:var(--g2);--fam-ink:var(--white)}
#pogl-05 .f-T{--fam:var(--g6) radial-gradient(circle,var(--g2) 33%,transparent 35%) 0 0/7px 7px;--fam-ink:var(--ink)}
#pogl-05 .f-K{--fam:var(--g4);--fam-ink:var(--ink)}
#pogl-05 .f-V{--fam:repeating-linear-gradient(45deg,var(--g3) 0 1.6px,var(--white) 1.6px 6px);--fam-ink:var(--ink)}
#pogl-05 .f-T .gr-b span,#pogl-05 .f-V .gr-b span{background:var(--white);padding:2px 6px;margin-left:-6px;color:var(--ink)}
#pogl-05 .rg-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px 24px;margin-bottom:8px}
#pogl-05 .rg-top .hint{margin:0}
#pogl-05 .rg-btns{display:flex;flex-wrap:wrap;gap:8px}
#pogl-05 .rg-b{font:500 14px/1.15 var(--sans);color:var(--ink);background:var(--white);border:1px solid var(--line);border-radius:9px;padding:7px 12px 8px;cursor:pointer;text-align:left;transition:background .25s,color .25s}
#pogl-05 .rg-b small{display:block;font:600 10.5px var(--sans);letter-spacing:.07em;text-transform:uppercase;color:var(--ink-2);margin-bottom:2px}
#pogl-05 .rg-b:hover{background:var(--paper)}
#pogl-05 .rg-b.on{background:var(--ink);color:var(--white)}
#pogl-05 .rg-b.on small{color:var(--yellow)}
#pogl-05 .rg{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(300px,1fr);gap:3vw;align-items:start}
#pogl-05 .rg-svg{display:block;width:100%;height:auto;max-height:calc(100svh - var(--top) - 200px);overflow:visible}
#pogl-05 .rg-list{display:none}
#pogl-05 .rg-arc{fill:none;stroke:var(--line);stroke-width:1.2}
#pogl-05 .rg-tick{stroke:var(--line);stroke-width:1.2}
#pogl-05 .rg-fam{font:600 13px var(--sans);letter-spacing:.09em;fill:var(--ink-2)}
#pogl-05 .rg-poly{fill:none;stroke:var(--ink);stroke-width:2.2;stroke-dasharray:8 6;stroke-linejoin:round}
#pogl-05 .rg-poly.closed{fill:url(#ht-y-m6r);fill-opacity:.55}
#pogl-05 .rg-n{cursor:pointer;outline:none}
#pogl-05 .rg-n .bg{fill:var(--white);stroke:var(--line);stroke-width:1.2;transition:fill .25s,stroke-width .25s}
#pogl-05 .rg-n text{font:500 14px var(--sans);text-anchor:middle;fill:var(--ink);pointer-events:none}
#pogl-05 .rg-n:hover .bg,#pogl-05 .rg-n:focus-visible .bg{stroke-width:2.4}
#pogl-05 .rg-n.on .bg{fill:var(--yellow);stroke-width:2.2}
#pogl-05 .rg-n .badge{display:none}
#pogl-05 .rg-n.on .badge{display:inline}
#pogl-05 .rg-n .badge circle{fill:var(--ink)}
#pogl-05 .rg-n .badge text{font:600 12px var(--sans);fill:var(--yellow)}
#pogl-05 .rg-c rect{fill:var(--white);stroke:var(--g5);stroke-width:1}
#pogl-05 .rg-c text{text-anchor:middle;fill:var(--ink)}
#pogl-05 .rg-c .k{font:600 11.5px var(--sans);letter-spacing:.08em;fill:var(--ink-2)}
#pogl-05 .rg-c .t{font:600 25px var(--serif)}
#pogl-05 .rg-c .s{font:400 14px var(--sans);fill:var(--ink-2)}
#pogl-05 .rg-out{background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:16px 18px 18px;font:400 15px/1.45 var(--sans);margin-top:12px}
#pogl-05 .ro-h{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding-bottom:12px;border-bottom:1px solid var(--g5)}
#pogl-05 .ro-h b{font:600 24px/1.15 var(--serif)}
#pogl-05 .ro-s{padding-top:12px}
#pogl-05 .ro-s h5{font:600 11px var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);margin-bottom:7px}
#pogl-05 .ro-l{list-style:none;counter-reset:ro;display:flex;flex-direction:column;gap:6px}
#pogl-05 .ro-l li{counter-increment:ro;display:grid;grid-template-columns:22px 16px minmax(0,1fr);gap:8px;align-items:start}
#pogl-05 .ro-l li:before{content:counter(ro);width:20px;height:20px;border-radius:50%;background:var(--ink);color:var(--yellow);font:600 11.5px/20px var(--sans);text-align:center;margin-top:1px}
#pogl-05 .ro-l .sw{width:16px;height:16px;margin-top:3px;background:var(--fam);box-shadow:inset 0 0 0 1px var(--line)}
#pogl-05 .ro-l span{font:400 15px/1.3 var(--sans)}
#pogl-05 .ro-l small{display:block;font-size:12px;color:var(--ink-2)}
#pogl-05 .ro-big{font:400 15px var(--sans);margin-bottom:8px}
#pogl-05 .ro-big b{font:700 30px/1 var(--serif);margin-right:4px}
#pogl-05 .ro-tr{display:flex;flex-wrap:wrap;gap:6px}
#pogl-05 .ro-tr .chip{letter-spacing:.04em;line-height:1.2}
#pogl-05 .ro-pub{font-size:13px;color:var(--ink-2);margin-top:9px}
#pogl-05 .ro-p{font-size:15px}
#pogl-05 .ro-of{color:var(--ink-2);font-size:13px;white-space:nowrap}
#pogl-05 .ro-cm{font-size:13.5px;margin-top:6px;padding-left:10px;border-left:3px solid var(--yellow)}
#pogl-05 .ro-res{margin-top:14px;padding-top:10px;border-top:1px solid var(--g5);font-size:13.5px;color:var(--ink-2)}
@media (max-width:820px){
  #pogl-05 .rg{grid-template-columns:minmax(0,1fr)}
  #pogl-05 .rg-svg{display:none}
  #pogl-05 .rg-list{display:flex;flex-direction:column;gap:14px}
  #pogl-05 .rl-f .chip{margin-bottom:8px}
  #pogl-05 .rl-b{display:flex;flex-wrap:wrap;gap:6px}
  #pogl-05 .rl-s{display:inline-flex;align-items:center;gap:7px;font:400 14px/1.2 var(--sans);color:var(--ink);background:var(--white);border:1px solid var(--line);border-radius:20px;padding:7px 12px 7px 7px;cursor:pointer;text-align:left}
  #pogl-05 .rl-s i{width:20px;height:20px;border-radius:50%;flex:none;border:1px solid var(--line);font:600 11px/18px var(--sans);font-style:normal;text-align:center}
  #pogl-05 .rl-s.on{background:var(--yellow)}
  #pogl-05 .rl-s.on i{background:var(--ink);color:var(--yellow)}
  #pogl-05 .rg-b{font-size:13px;padding:6px 9px 7px}
}

/* ── Slika 6.3 guests and residents through the year (new) ── */
#pogl-05 .m6-yr{display:block;width:100%;height:auto;overflow:visible}
#pogl-05 .m6-yr text{font-family:var(--sans);fill:var(--ink-2)}
#pogl-05 .m6-yr .rh{font:600 13px var(--sans);letter-spacing:.07em;text-transform:uppercase;fill:var(--ink)}
#pogl-05 .m6-yr .rs{font:400 13px var(--sans);fill:var(--ink-2)}
#pogl-05 .m6-yr .yt{font-size:12px;text-anchor:end}
#pogl-05 .m6-yr .yu{font-size:11.5px;text-anchor:end;font-style:italic}
#pogl-05 .m6-yr .mn{font-size:13px;text-anchor:middle;fill:var(--ink)}
#pogl-05 .m6-yr .gl{stroke:var(--g5);stroke-width:1}
#pogl-05 .m6-yr .ax{stroke:var(--line);stroke-width:1.2}
#pogl-05 .m6-yr .track{fill:var(--g6);stroke:var(--g5);stroke-width:.8}
#pogl-05 .m6-yr .bar{stroke:var(--line);stroke-width:.8;transform-box:fill-box;transform-origin:bottom;transform:scaleY(0);transition:transform .9s cubic-bezier(.2,.7,.2,1)}
#pogl-05 .vis.in .m6-yr .bar{transform:scaleY(1)}
#pogl-05 .m6-yr .res{fill:none;stroke:var(--line);stroke-width:7;stroke-linecap:round}
#pogl-05 .m6-yr .res-y{fill:none;stroke:var(--yellow);stroke-width:4.6;stroke-linecap:round;stroke-dasharray:1200;stroke-dashoffset:1200;transition:stroke-dashoffset 1.6s cubic-bezier(.2,.7,.2,1) .4s}
#pogl-05 .vis.in .m6-yr .res-y{stroke-dashoffset:0}
#pogl-05 .m6-yr .dot{fill:var(--yellow);stroke:var(--line);stroke-width:1.2}
#pogl-05 .m6-yr .band{fill:none;stroke:var(--line);stroke-width:1}
#pogl-05 .m6-yr .bandlbl{font:600 11.5px var(--sans);letter-spacing:.06em;fill:var(--ink)}
#pogl-05 .m6-yr .val{font:500 12px var(--sans);text-anchor:middle;fill:var(--ink)}
#pogl-05 .m6-yr .reslbl{font:600 13px var(--sans);fill:var(--ink);paint-order:stroke;stroke:var(--paper);stroke-width:4px;stroke-linejoin:round}
@media (prefers-reduced-motion:reduce){
  #pogl-05 .m6-yr .bar,#pogl-05 .m6-yr .res-y{transition:none}
}

/* ── Slika 6.2 (growing plan) local tuning: when the tint is on, concession reads darker than the courts,
   and the parts the tint does not sort fade back, so the two classes stand out (plan.css untouched) ── */
#pogl-05 .plan-svg .ov-c .a{fill:var(--g3)}
#pogl-05 .plan-key .kc i{background:var(--g3)}
#pogl-05 .plan:has(.plan-key.on) .plan-svg .pe.on:not(.tf):not(.tc):not([data-id=site]):not([data-id=roads]):not([data-id=context_plots]){opacity:.4}
@media (max-width:820px){
  #pogl-05 #v-m6-year .vb{padding:12px 6px 8px}
}
@media (max-width:700px){
  #pogl-05 .m6-yr .yt{font-size:12.5px}
  #pogl-05 .m6-yr .rs{font-size:13.5px}
  #pogl-05 .m6-yr .reslbl{font-size:13px}
}

/* Slika 6.2 steps: room to scroll, so each plan state stays up and the whole figure is on screen before 6.13 (fix after review) */
#pogl-05 .m6-ps > .facts{padding-top:12vh;padding-bottom:30vh}
#pogl-05 .m6-ps .fact{min-height:34vh}
@media (max-width:820px){
  #pogl-05 .m6-ps > .facts{padding-top:6px;padding-bottom:8vh}
  #pogl-05 .m6-ps .fact{min-height:0}
}