/* m02 · Slika 2.1 months (from v02 ch01 Slika 1.2) and Slika 2.2 satisfaction (v02 Slika 1.4) */
#pogl-02 .m-chart{width:100%;height:auto;display:block;overflow:visible}
#pogl-02 .m-chart text{font-family:var(--sans);fill:var(--ink-2)}
#pogl-02 .m-chart .mn{font-size:13px;text-anchor:middle;fill:var(--ink)}
#pogl-02 .m-chart .mn.sel{font-weight:600}
#pogl-02 .m-chart .yt{font-size:12px;text-anchor:end}
#pogl-02 .m-chart .val{font-size:12px;text-anchor:middle;fill:var(--ink);font-weight:500}
#pogl-02 .m-chart .track{fill:var(--g6);stroke:var(--g5);stroke-width:.8}
#pogl-02 .m-chart .bar{transform-box:fill-box;transform-origin:bottom;transform:scaleY(0);transition:transform .9s cubic-bezier(.2,.7,.2,1);stroke:var(--line);stroke-width:.8}
#pogl-02 .vis.in .m-chart .bar{transform:scaleY(1)}
#pogl-02 .m-chart .bar.sel{stroke-width:2.2}
#pogl-02 .m-chart .hit{fill:transparent;cursor:pointer}
#pogl-02 .m-chart .ax{stroke:var(--line);stroke-width:1.2}
#pogl-02 .m-chart .band{fill:none;stroke:var(--line);stroke-width:1}
#pogl-02 .m-chart .bandlbl{font:600 11.5px var(--sans);letter-spacing:.06em;fill:var(--ink)}
/* phone: the 420-wide viewBox shows at ~310 px (scale ~0.74), so the labels are set larger to land at ~10.5–11 px */
@media (max-width:820px){
  #pogl-02 .m-chart .yt{font-size:14px}
  #pogl-02 .m-chart .mn{font-size:15px}
  #pogl-02 .m-chart .bandlbl{font-size:14px;letter-spacing:.03em}
}
/* satisfaction rows */
#pogl-02 .sat{display:grid;grid-template-columns:minmax(140px,240px) minmax(0,1fr) 120px;row-gap:12px;column-gap:18px;align-items:center;position:relative;padding-top:26px}
#pogl-02 .sat .lb{font:400 16px/1.25 var(--sans);text-align:right}
#pogl-02 .sat .lb.z{font-weight:600}
#pogl-02 .sat .tr{position:relative;height:34px;background:var(--g6);box-shadow:inset 0 0 0 1px var(--g5)}
#pogl-02 .sat .br{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--g2);transition:width 1s cubic-bezier(.2,.7,.2,1);box-shadow:inset 0 0 0 1px var(--line)}
#pogl-02 .sat .br.z{background:var(--yellow)}
#pogl-02 .sat .br span{position:absolute;right:8px;top:50%;transform:translateY(-50%);font:600 15px var(--sans);color:var(--white);white-space:nowrap}
#pogl-02 .sat .br.z span{color:var(--ink)}
#pogl-02 .sat .note{font:400 12.5px/1.3 var(--sans);color:var(--ink-2)}
#pogl-02 .sat .half{position:absolute;top:0;bottom:-8px;border-left:1.5px dashed var(--line);pointer-events:none}
#pogl-02 .sat .half span{position:absolute;top:0;left:6px;font:500 12px var(--sans);white-space:nowrap}
#pogl-02 .sat .scale{grid-column:2;display:flex;justify-content:space-between;font:400 12px var(--sans);color:var(--ink-2)}
@media (max-width:820px){
  #pogl-02 .sat{grid-template-columns:minmax(0,1fr);row-gap:6px}
  #pogl-02 .sat .lb{text-align:left;margin-top:8px}
  #pogl-02 .sat .note,#pogl-02 .sat .half{display:none}
  #pogl-02 .sat .scale{grid-column:1}
}

#pogl-02 .m-top{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:10px}
#pogl-02 .m-top .readout{position:static;min-width:260px}

/* m02 · Slika 2.3 share (v02 Slika 2.2), Slika 2.4 six places map (v02 Slika 2.1), photo strip (v02 p2-strip). From v02 ch02 (maps team); ring retired here (team C). */
/* 2.1 map bench */
#pogl-02 .six-wrap{padding:0;background:var(--white);display:grid;grid-template-columns:minmax(0,1.55fr) minmax(300px,1fr)}
#pogl-02 .six-map{position:relative;height:clamp(560px,78vh,800px);border-right:1px solid var(--line)}
#pogl-02 .six-side{display:flex;flex-direction:column;gap:16px;padding:22px 24px 20px}
#pogl-02 .six-modes{display:flex;gap:6px;flex-wrap:wrap}
#pogl-02 .six-modes button{font:500 14px/1 var(--sans);color:var(--ink);background:transparent;border:1px solid var(--line);border-radius:9px;padding:9px 13px;cursor:pointer;transition:background .25s}
#pogl-02 .six-modes button:hover{background:var(--paper)}
#pogl-02 .six-modes button.on{background:var(--ink);color:var(--white)}
#pogl-02 .six-sum{font:400 15.5px/1.5 var(--sans);color:var(--ink)}
#pogl-02 .six-sum b{font:600 19px/1 var(--serif);background:var(--yellow);padding:0 4px}
#pogl-02 .six-list{list-style:none;border-top:1.2px solid var(--line)}
#pogl-02 .six-list li{position:relative;display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:10px 4px 10px 0;border-bottom:1px solid var(--g5);cursor:pointer;font:400 15px/1.3 var(--sans)}
#pogl-02 .six-list li.hd{cursor:default;font:500 11.5px/1 var(--sans);letter-spacing:.07em;text-transform:uppercase;color:var(--ink-2);padding:9px 0 8px}
#pogl-02 .six-list li b{font-weight:600;position:relative;z-index:1}
#pogl-02 .six-list li b small{font-weight:400;color:var(--ink-2);font-size:12.5px;margin-left:4px}
#pogl-02 .six-list li .v{font-variant-numeric:tabular-nums;position:relative;z-index:1}
#pogl-02 .six-list li i{position:absolute;left:0;bottom:-1px;height:3px;background:var(--g3);transition:width .6s cubic-bezier(.2,.7,.2,1)}
#pogl-02 .six-list li.out{color:var(--ink-2)}
#pogl-02 .six-list li:not(.hd):hover{background:var(--paper)}
#pogl-02 .six-list li.sel{background:var(--yellow-soft)}
#pogl-02 .six-list li.sel i{background:var(--ink)}
#pogl-02 .six-hint{margin-top:2px;font:400 14px/1.45 var(--sans);color:var(--ink-2)}
#pogl-02 .six-hint b{color:var(--ink)}
#pogl-02 #six-src-02 a{color:inherit}
/* engine (assets/maps/satmap.js) */
#pogl-02 .sm-stage{overflow:hidden;background:#0f2f52;contain:strict}
#pogl-02 .sm-layers,#pogl-02 .sm-labels{position:absolute;inset:0;pointer-events:none}
#pogl-02 .sm-img{position:absolute;left:0;top:0;transform-origin:0 0;max-width:none;will-change:transform;user-select:none}
#pogl-02 .sm-svg{position:absolute;inset:0;pointer-events:none;overflow:visible}
#pogl-02 .sm-lb{position:absolute;left:0;top:0;white-space:nowrap}
#pogl-02 .sm-fail:after{content:"The satellite image did not load.";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font:500 13px var(--sans);color:#fff}
/* outline and routes */
#pogl-02 .six-iso{fill:rgba(229,242,58,.09);stroke:#f1f7a8;stroke-width:2.4;stroke-dasharray:9 6;stroke-linejoin:round}
#pogl-02 .six-rt-h{fill:none;stroke:rgba(15,25,35,.3);stroke-width:3;stroke-linejoin:round;stroke-linecap:round}
#pogl-02 .six-rt{fill:none;stroke:rgba(255,255,255,.5);stroke-width:1.2;stroke-linejoin:round;stroke-linecap:round}
#pogl-02 .six-rt-h.on{stroke:var(--ink);stroke-width:7}
#pogl-02 .six-rt.on{stroke:var(--yellow);stroke-width:3.6}
/* labels */
#pogl-02 .sm-lb > span,#pogl-02 .six-pl .t{position:absolute;left:0;top:0;font:600 14px/1.15 var(--sans);color:#fff;
  text-shadow:0 0 3px rgba(10,20,30,.95),0 0 1px rgba(10,20,30,1),0 1px 5px rgba(10,20,30,.6)}
#pogl-02 .six-isol > span{font:italic 500 15px/1 var(--serif);transform:translate(-100%,-50%);color:#f1f7a8}
#pogl-02 .six-ctx > span{font:500 12px/1 var(--sans);color:rgba(255,255,255,.8);transform:translate(8px,-50%)}
#pogl-02 .six-ctx:before{content:"";position:absolute;left:-3px;top:-3px;width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.75)}
#pogl-02 .six-site:before{content:"";position:absolute;left:-9px;top:-9px;width:18px;height:18px;background:var(--yellow);border-radius:3px;box-shadow:0 0 0 1.5px var(--ink),0 2px 8px rgba(0,0,0,.5);transform:rotate(36deg)}
#pogl-02 .six-site > span{color:var(--ink);text-shadow:none;background:var(--yellow);border-radius:7px;padding:6px 9px 6px;font:600 13px/1.1 var(--sans);letter-spacing:.05em;text-transform:uppercase;transform:translate(16px,-115%);box-shadow:0 0 0 1px var(--ink)}
#pogl-02 .six-site small{display:block;text-transform:none;letter-spacing:0;font-weight:500;font-size:12px;margin-top:2px}
#pogl-02 .six-pl{pointer-events:auto;cursor:pointer}
#pogl-02 .six-pl .c{position:absolute;left:0;top:0;transform:translate(-50%,-50%);border-radius:50%;background:rgba(246,246,242,.26);box-shadow:0 0 0 1.6px #fff,0 0 0 2.6px rgba(15,25,35,.45);transition:width .6s cubic-bezier(.2,.7,.2,1),height .6s cubic-bezier(.2,.7,.2,1)}
#pogl-02 .six-pl .c.dotonly{width:12px!important;height:12px!important;background:#fff;box-shadow:0 0 0 1.5px var(--ink),0 1px 4px rgba(0,0,0,.5)}
#pogl-02 .six-pl.zd .c{background:rgba(160,160,155,.25);box-shadow:0 0 0 1.6px rgba(255,255,255,.75);border:1.5px dashed rgba(255,255,255,0)}
#pogl-02 .six-pl.zd .c.dotonly{background:var(--g4)}
#pogl-02 .six-pl .sq{position:absolute;left:-7px;top:-7px;width:14px;height:14px;background:var(--ink);box-shadow:0 0 0 1.5px #fff}
#pogl-02 .six-pl .t b{display:block;font:600 15px/1.1 var(--sans)}
#pogl-02 .six-pl .t em{display:block;font:500 12.5px/1.25 var(--sans);font-style:normal;margin-top:2px}
#pogl-02 .six-pl.rt .t{transform:translate(calc(var(--r,6px) + 8px),-50%)}
#pogl-02 .six-pl.lt .t{transform:translate(calc(-100% - var(--r,6px) - 8px),-50%);text-align:right}
#pogl-02 .six-pl.up .t{transform:translate(-50%,calc(-100% - var(--r,6px) - 6px));text-align:center}
#pogl-02 .six-pl.six-rs .t b{font-weight:500;font-size:13.5px}
#pogl-02 .six-pl:hover .t b,#pogl-02 .six-pl.sel .t b{color:var(--yellow)}
#pogl-02 .six-pl.sel .c{box-shadow:0 0 0 2.6px var(--yellow),0 0 0 3.6px rgba(15,25,35,.5)}
#pogl-02 .six-pl:after{content:"";position:absolute;left:-22px;top:-22px;width:44px;height:44px;border-radius:50%}
/* 2.2 share */
#pogl-02 .sh-head{display:flex;align-items:center;gap:14px;margin-bottom:58px}
#pogl-02 .sh-note{font:400 13px var(--sans);color:var(--ink-2)}
#pogl-02 .sh-bar{position:relative;margin-bottom:78px}
#pogl-02 .sh-track{display:flex;height:64px;box-shadow:0 0 0 1.2px var(--line);background:var(--g6)}
#pogl-02 .sh-seg{position:relative;height:100%;border-right:1px solid var(--line);transform-origin:left;transform:scaleX(0);transition:transform .8s cubic-bezier(.2,.7,.2,1)}
#pogl-02 .vis.in .sh-seg{transform:none}
#pogl-02 .sh-seg:last-child{border-right:0}
#pogl-02 .sh-seg.y{background:var(--yellow)}
#pogl-02 .sh-seg.y2{background:var(--yellow-dk)}
#pogl-02 .sh-seg.y3{background-color:var(--yellow);background-image:radial-gradient(circle,var(--g1) 30%,transparent 33%);background-size:6px 6px}
#pogl-02 .sh-seg.y4{background:var(--yellow-soft)}
#pogl-02 .sh-seg.y5{background-color:var(--yellow-soft);background-image:repeating-linear-gradient(45deg,var(--g2) 0 1.2px,transparent 1.2px 6px)}
#pogl-02 .sh-seg.zd{background:var(--g3)}
#pogl-02 .sh-seg.rest{background-color:var(--g6);background-image:radial-gradient(circle,var(--g4) 30%,transparent 33%);background-size:7px 7px}
/* labels: big segments inside, small ones below on two staggered rows with a leader */
#pogl-02 .sh-l{position:absolute;left:0;top:calc(100% + 10px);font:400 13px/1.25 var(--sans);color:var(--ink);white-space:nowrap;padding-left:7px;border-left:1px solid var(--line)}
#pogl-02 .sh-l b{display:block;font-weight:600}
#pogl-02 .sh-seg.y3 .sh-l,#pogl-02 .sh-seg.y4 .sh-l{top:calc(100% + 48px)}
#pogl-02 .sh-seg.y3 .sh-l:before,#pogl-02 .sh-seg.y4 .sh-l:before{content:"";position:absolute;left:-1px;bottom:100%;height:38px;border-left:1px solid var(--line)}
#pogl-02 .sh-seg.y .sh-l,#pogl-02 .sh-seg.zd .sh-l,#pogl-02 .sh-seg.rest .sh-l{left:10px;top:50%;transform:translateY(-50%);border-left:0;padding-left:0}
#pogl-02 .sh-seg.zd .sh-l{color:var(--white)}
#pogl-02 .sh-seg.rest .sh-l{background:var(--white);padding:3px 7px}
#pogl-02 .sh-brace{position:absolute;left:0;top:-16px;height:10px;border:1.4px solid var(--line);border-bottom:0}
#pogl-02 .sh-brace span{position:absolute;left:0;bottom:calc(100% + 7px);font:400 15px/1.2 var(--sans);white-space:nowrap}
#pogl-02 .sh-brace b{font-weight:600;background:var(--yellow);padding:0 3px}
#pogl-02 .sh-years{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px;border-top:1px solid var(--g5);padding-top:24px}
#pogl-02 .sh-y{display:grid;grid-template-columns:76px minmax(0,1fr);column-gap:18px;align-items:end}
#pogl-02 .sh-y .chip{grid-column:1/-1;justify-self:start;margin-bottom:12px}
#pogl-02 .sh-col{position:relative;height:170px;background:var(--g6);box-shadow:inset 0 0 0 1px var(--g5)}
#pogl-02 .sh-fill{position:absolute;left:0;right:0;bottom:0;height:0;background:var(--yellow);box-shadow:inset 0 0 0 1px var(--line);transition:height 1s cubic-bezier(.2,.7,.2,1)}
#pogl-02 .vis.in .sh-fill{height:var(--h)}
#pogl-02 .sh-y:not(:last-child) .sh-fill{background-color:var(--g6);background-image:radial-gradient(circle,var(--g2) 32%,transparent 35%);background-size:6px 6px}
#pogl-02 .third{position:absolute;left:-5px;right:-5px;height:0;border-top:1.4px dashed var(--line);z-index:2}
#pogl-02 .third span{position:absolute;left:5px;bottom:4px;font:600 10.5px var(--sans);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
#pogl-02 .sh-txt{display:flex;flex-direction:column;gap:6px;padding-bottom:2px}
#pogl-02 .sh-txt b{font:700 clamp(30px,3vw,44px)/1 var(--serif)}
#pogl-02 .sh-txt small{font:400 13px/1.35 var(--sans);color:var(--ink-2)}
/* photo strip: five halftone photos in a row, each caption under its photo */
#pogl-02 #strip-02.photo.half{display:flex;gap:14px;overflow-x:auto;padding-bottom:10px;scroll-snap-type:x proximity;scrollbar-width:thin}
#pogl-02 #strip-02 .ph{flex:none;align-items:flex-start;scroll-snap-align:start}
#pogl-02 #strip-02 img{height:clamp(220px,34vh,340px);width:auto;max-width:none;max-height:none}
#pogl-02 #strip-02 figcaption{width:0;min-width:100%;font-size:12px;line-height:1.4}
@media (max-width:1100px){
  #pogl-02 .six-wrap{grid-template-columns:minmax(0,1fr)}
  #pogl-02 .six-map{border-right:0;border-bottom:1px solid var(--line);height:clamp(480px,70vh,720px)}
}
@media (max-width:820px){
  #pogl-02 .six-map{height:min(132vw,640px)}
  #pogl-02 .six-modes button{font-size:13px;padding:8px 10px}
  #pogl-02 .six-sum{font-size:14px}
  #pogl-02 .six-side{padding:14px 14px 16px}
  #pogl-02 .six-pl .t b{font-size:13.5px}
  #pogl-02 .six-pl .t em{font-size:11.5px}
  #pogl-02 .six-site small{display:none}
  #pogl-02 .sh-head{margin-bottom:14px;flex-wrap:wrap}
  #pogl-02 .sh-bar{margin-bottom:24px}
  #pogl-02 .sh-track{flex-direction:column;height:auto}
  #pogl-02 .sh-seg{width:auto!important;border-right:0;border-bottom:1px solid var(--line);min-height:34px;height:calc(var(--w) * 4px);transform-origin:top}
  #pogl-02 .sh-seg .sh-l,#pogl-02 .sh-seg.y3 .sh-l,#pogl-02 .sh-seg.y4 .sh-l{position:absolute;left:10px;top:50%;bottom:auto;transform:translateY(-50%);background:var(--white);padding:1px 6px;border-left:0}
  #pogl-02 .sh-seg .sh-l b{display:inline;margin-right:6px}
  #pogl-02 .sh-seg .sh-l:before{display:none}
  #pogl-02 .sh-brace{display:none}
  #pogl-02 .sh-years{grid-template-columns:minmax(0,1fr);gap:26px}
  #pogl-02 .sh-col{height:120px}

}
#pogl-02 .six-note{font:400 13px/1.5 var(--sans);color:var(--ink-2);margin-top:-4px}
@media (max-width:820px){ #pogl-02 .sh-seg .sh-l:before{display:none} }
@media (max-width:820px){
  #pogl-02 .sh-seg.zd .sh-l{color:var(--ink)}
  #pogl-02 .six-pl.six-rs .t b{font-size:12.5px}
}

#pogl-02 .six-ctx small{display:block;font-size:11px;opacity:.85;margin-top:2px}
/* phone: the hint above the readout, not squeezed beside it (v02 had them side by side) */
@media (max-width:820px){
  #pogl-02 .m-top{flex-direction:column;gap:8px}
  #pogl-02 .m-top .readout{min-width:0;align-self:stretch}
}

/* v10 (QA 11 Oct): the crop marks of the yellow box stuck out 4 px on phones (sideways scroll) */
#pogl-02{overflow-x:clip}