/* m08c (v17) · Slika 8.1 pinned: two big columns, no step column, no plan; scrolling draws the highlighter (z_chain.js).
   Every selector starts with #pogl-08. Pin pattern = chapter 03's b4-pin, but the stage sits right under the top bar
   (the .scroller itself starts at --top). The Privlaka column is framed in yellow (cell borders that join up). */
#pogl-08 .c9-pin{position:relative;height:calc(100vh + 8 * 30vh)}
#pogl-08 .c9-stage{position:sticky;top:14px;height:calc(100vh - var(--top) - 36px);display:flex;flex-direction:column;justify-content:center;padding:0 clamp(16px,3vw,40px)}
#pogl-08 .c9-stage .vis{margin:0;opacity:1;transform:none}
#pogl-08 .c9-stage .vb{padding:26px clamp(20px,3vw,48px) 18px}
#pogl-08 .c9-tbl{position:relative;max-width:1180px;margin:0 auto}
#pogl-08 .c9-head,#pogl-08 .c9-r{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);column-gap:0}
#pogl-08 .c9-head{align-items:end}
#pogl-08 .c9-head .chip{font-size:12.5px;padding:8px 12px}
#pogl-08 .c9-head small{display:block;margin-top:7px;font:400 13.5px var(--sans);color:var(--ink-2)}
#pogl-08 .c9-head .ca{padding:0 28px 12px 0}
#pogl-08 .c9-head .cb{padding:14px 22px 12px;border:3px solid var(--yellow);border-bottom:0;border-radius:8px 8px 0 0}
#pogl-08 .c9{list-style:none;margin:0;padding:0}
#pogl-08 .c9-r .ca{padding:13px 28px 14px 0;border-top:1px solid var(--g5);min-width:0}
#pogl-08 .c9-r .cb{padding:13px 22px 14px;border-left:3px solid var(--yellow);border-right:3px solid var(--yellow);border-top:1px solid var(--g5);min-width:0;background:rgba(246,246,242,.6)}
#pogl-08 .c9-r.last .ca{border-bottom:1px solid var(--g5)}
#pogl-08 .c9-r.last .cb{border-bottom:3px solid var(--yellow);border-radius:0 0 8px 8px}
#pogl-08 .c9-r p{margin:0;font:400 clamp(16px,1.3vw,20px)/1.4 var(--sans);color:var(--ink)}
#pogl-08 .c9-r i{font-style:normal}
#pogl-08 .c9-r sup{font-size:.7em;margin-left:1px}
#pogl-08 .c9-ink{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;mix-blend-mode:multiply}
#pogl-08 .c9-ink path{fill:none;stroke:var(--yellow);stroke-width:15;stroke-linecap:round;stroke-linejoin:round;opacity:.85}
#pogl-08 .c9-ink circle{fill:var(--ink);opacity:0}
#pogl-08 .c9-ink circle.on{opacity:1}
#pogl-08 .c9-hint{margin:14px 0 0;font:400 13px var(--sans);color:var(--ink-2);transition:opacity .5s}
#pogl-08 .c9-hint.off{opacity:0}
#pogl-08 .c9-after{margin:0 5.3vw 4vh}
#pogl-08 .c9-after .c8-fn{margin-top:0}
#pogl-08 .c9-src{margin:12px 0 0;font:400 12.5px/1.5 var(--sans);color:var(--ink-2)}
@media (max-height:820px){
  #pogl-08 .c9-stage .vb{padding:14px 22px 10px}
  #pogl-08 .c9-r p{font-size:15px;line-height:1.35}
  #pogl-08 .c9-r .ca{padding:8px 22px 9px 0}
  #pogl-08 .c9-r .cb{padding:8px 16px 9px}
  #pogl-08 .c9-head .ca{padding-bottom:8px}#pogl-08 .c9-head .cb{padding:10px 16px 8px}
  #pogl-08 .c9-ink path{stroke-width:12}
  #pogl-08 .c9-hint{margin-top:8px}
}
@media (max-width:820px){
  #pogl-08 .c9-pin{height:calc(100svh + 8 * 28svh)}
  #pogl-08 .c9-stage{top:10px;height:calc(100svh - var(--top) - 22px);justify-content:flex-start;padding:0 4px}
  #pogl-08 .c9-stage .vh{padding:7px 12px 6px}
  #pogl-08 .c9-stage .vh h4{font-size:13px;line-height:1.25}
  #pogl-08 .c9-stage .vh span{display:none}
  #pogl-08 .c9-stage .vb{padding:8px 10px 6px}
  #pogl-08 .c9-head{display:none}
  #pogl-08 .c9-r{display:block;padding:3px 0 4px;border-top:1px solid var(--g5)}
  #pogl-08 .c9-r.last{border-bottom:1px solid var(--g5)}
  #pogl-08 .c9-r .ca,#pogl-08 .c9-r .cb{padding:2px 0;border:0;background:none}
  #pogl-08 .c9-r.last .ca,#pogl-08 .c9-r.last .cb{border:0}
  #pogl-08 .c9-r .cb{margin-top:2px;padding:2px 7px 3px;border:2px solid var(--yellow);border-radius:6px}
  #pogl-08 .c9-r p{font-size:13px;line-height:1.28}
  #pogl-08 .c9-r .ca:before,#pogl-08 .c9-r .cb:before{content:attr(data-ks);display:inline;font:600 9.5px var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);margin-right:6px;vertical-align:1px}
  #pogl-08 .c9-r .ca p,#pogl-08 .c9-r .cb p{display:inline}
  #pogl-08 .c9-ink path{stroke-width:10}
  #pogl-08 .c9-hint{margin:6px 0 0;font-size:11.5px}
  #pogl-08 .c9-after{margin:0 14px 3vh}
}
@media (max-width:820px) and (max-height:720px){
  #pogl-08 .c9-stage .vh{display:none}
  #pogl-08 .c9-stage .vb{padding:6px 8px 4px}
  #pogl-08 .c9-r p{font-size:11px;line-height:1.2}
  #pogl-08 .c9-r{padding:2px 0 3px}
  #pogl-08 .c9-r .cb{margin-top:1px;padding:1px 5px 2px}
  #pogl-08 .c9-r .ca:before,#pogl-08 .c9-r .cb:before{font-size:8.5px;margin-right:4px}
  #pogl-08 .c9-ink path{stroke-width:8}
  #pogl-08 .c9-hint{display:none}
}
