/* SRZ Privlaka v3 · THE GROWING PLAN (team P) · usage: see the header of src/plan.js. Look: v02 Slika 6.2 (src/ch/ch06/style.css),
   but the building is grey: yellow only marks what the current step adds (lit). Fills with patterns are set per plan
   (fill="url(#plN-…)") so ids stay unique; these rules never set fill on .pv .ev .dome .sand .ctx .roof. */
.plan{position:relative;width:100%;min-width:0}
.plan-svg{display:block;width:100%;height:auto;overflow:visible;max-height:calc(100svh - var(--top) - 230px)}
.plan-svg path,.plan-svg circle{vector-effect:non-scaling-stroke;stroke-linejoin:round}
.plan-svg path[style]{vector-effect:none}

/* appear / disappear: fade, both ways */
.plan-svg .pe{opacity:0;visibility:hidden;transition:opacity .7s ease,visibility 0s linear .7s}
.plan-svg .pe.on{opacity:1;visibility:visible;transition:opacity .7s ease .08s,visibility 0s}
.plan-svg .ov{opacity:0;transition:opacity .6s ease}
.plan-svg .pe.y .ov-y,.plan-svg .pe.tf .ov-f,.plan-svg .pe.tc .ov-c{opacity:1}
.plan-svg .pe.y .ov-y{transition:opacity .6s ease .25s}

/* the grey drawing (classes of v02 Slika 6.2) */
.plan-svg .road{fill:var(--paper-3);stroke:none}
.plan-svg .ctx{stroke:var(--ink-3);stroke-width:.8;stroke-dasharray:3 3}
/* neighbouring parcels from the DGU cadastre: faint boundary lines only, no numbers (a quiet underlay) */
.plan-svg .cad{fill:none;stroke:#bcbbb4;stroke-width:.6}
.plan-svg .pl-cad{opacity:0;transition:opacity .6s ease}
.plan-svg .pl-cad.on{opacity:1}
.plan-svg .site{fill:#f1f1ec;stroke:var(--line);stroke-width:1.8}
.plan-svg .pave{fill:var(--paper-2);stroke:var(--ink-3);stroke-width:.6}
.plan-svg .bay{fill:var(--g6);stroke:var(--ink-3);stroke-width:.6}
.plan-svg .pv,.plan-svg .ev,.plan-svg .dome{stroke:var(--line);stroke-width:.9}
.plan-svg .roof{stroke:var(--line);stroke-width:1.1;pointer-events:none}
/* roofs: see-through panel lines over the pavilion; the dark backing shows only where its pavilion is not drawn
   (.roof-bg repeated on purpose: the hide must out-rank the tint fade below) */
.plan-svg .roof-bg{stroke:var(--line);stroke-width:1.1;transition:opacity .7s ease}
.plan-svg .pe[data-id=bldg_pavilion_1].on ~ .pe[data-id=roofs] .roof-bg.roof-bg.roof-bg[data-p="1"],
.plan-svg .pe[data-id=bldg_pavilion_2].on ~ .pe[data-id=roofs] .roof-bg.roof-bg.roof-bg[data-p="2"],
.plan-svg .pe[data-id=bldg_pavilion_3].on ~ .pe[data-id=roofs] .roof-bg.roof-bg.roof-bg[data-p="3"],
.plan-svg .pe[data-id=bldg_pavilion_4].on ~ .pe[data-id=roofs] .roof-bg.roof-bg.roof-bg[data-p="4"],
.plan-svg .pe[data-id=bldg_pavilion_5].on ~ .pe[data-id=roofs] .roof-bg.roof-bg.roof-bg[data-p="5"]{opacity:0}
.plan-svg .pe[data-id=roofs] .ov-y .a{fill-opacity:.88}
.plan-svg .court{fill:var(--g5);stroke:var(--line);stroke-width:.8}
.plan-svg .court.t{fill:#bdbcb5}
.plan-svg .det{fill:none;stroke:var(--white);stroke-width:1}
.plan-svg .dome-det{fill:none;stroke:var(--g3);stroke-width:.6}
.plan-svg .bld{fill:var(--g5);stroke:var(--line);stroke-width:1.1}
.plan-svg .trib{fill:var(--g6);stroke:var(--line);stroke-width:.9}
.plan-svg .trib-det{fill:none;stroke:var(--g2);stroke-width:.6}
.plan-svg .dark{fill:var(--g2);stroke:var(--line);stroke-width:.8}
.plan-svg .lt-fill{fill:var(--g6);stroke:var(--line);stroke-width:.8}
.plan-svg .sand{stroke:var(--line);stroke-width:.8}
.plan-svg .trk{fill:none;stroke:var(--g2);stroke-dasharray:4 2}
.plan-svg .ln{fill:none;stroke:var(--g4)}
.plan-svg .drv{fill:none;stroke:var(--ink-3);stroke-dasharray:3 2}
.plan-svg .mk{fill:var(--ink);stroke:none}
.plan-svg .gate{fill:var(--white);stroke:var(--ink);stroke-width:1}
/* charger glyphs: a small round mark with a bolt, sized in screen px */
.plan-svg .chg-c{fill:var(--white);stroke:var(--ink);stroke-width:1}
.plan-svg .chg-y{fill:var(--yellow);stroke:var(--ink);stroke-width:1.3}
.plan-svg .chg-b{fill:var(--ink);stroke:none}

/* lit = yellow (what this step adds); tint: free = light hatch, concession = mid grey */
.plan-svg .a{stroke:var(--line);stroke-width:1}
.plan-svg .ov-y .a{fill:var(--yellow);stroke-width:1.5}
.plan-svg .ov-c .a{fill:var(--g4);stroke-width:1}
.plan-svg .ov-f .a{stroke-width:1}
.plan-svg .yl-o{fill:none;stroke:var(--line)}
.plan-svg .yl{fill:none;stroke:var(--yellow)}
.plan-svg .tl-f{fill:none;stroke:var(--g3);stroke-dasharray:.6 .6}
.plan-svg .tl-c{fill:none;stroke:var(--g2)}
/* while a tint is on, everything that is in neither class fades back, so only the two keyed greys stand out */
.plan-svg .pe > :not(.ov),.plan-svg .chg{transition:opacity .6s ease}
.plan-svg.tinting .pe.on:not(.tf):not(.tc):not([data-id=site]):not([data-id=roads]):not([data-id=context_plots]) > :not(.ov),
.plan-svg.tinting .chg{opacity:.28}

/* names: small print inside, or above/below with a dashed leader */
.plan-svg text{font-family:var(--sans);font-size:var(--f);fill:var(--ink);pointer-events:none}
.plan-svg .lab{opacity:0;visibility:hidden;transition:opacity .5s ease,visibility 0s linear .5s}
.plan-svg .lab.on{opacity:1;visibility:visible;transition:opacity .5s ease .2s,visibility 0s}
.plan-svg text.in{paint-order:stroke;stroke:rgba(246,246,242,.85);stroke-width:calc(var(--f) * .25);stroke-linejoin:round}
.plan-svg text.out{font-weight:500;paint-order:stroke;stroke:rgba(246,246,242,.92);stroke-width:calc(var(--f) * .3);stroke-linejoin:round}
.plan-svg .pill{fill:rgba(246,246,242,.93);stroke:none;transition:opacity .4s}
.plan-svg .lab.lit .pill{opacity:0}
.plan-svg .lab.lit text.in{stroke:var(--yellow)}
.plan-svg .ld{fill:none;stroke:var(--ink);stroke-width:.8;stroke-dasharray:2 2}
.plan-svg .ldot{fill:var(--ink);stroke:var(--white);stroke-width:.8}
.plan-svg .pl-fx{opacity:0;transition:opacity .6s ease}
.plan-svg .pl-fx.on{opacity:1}
.plan-svg text.fx{fill:var(--ink-2);font-style:italic;font-size:calc(var(--f) * .86);paint-order:stroke;stroke:rgba(246,246,242,.7);stroke-width:calc(var(--f) * .2)}
.plan-svg text.fx.nb{font-style:normal;font-size:var(--f);stroke-width:calc(var(--f) * .25)}
.plan-svg text.sc,.plan-svg text.n{fill:var(--ink-2)}
.plan-svg text.n{font-weight:600;fill:var(--ink)}
.plan-svg .north path{fill:var(--ink);stroke:none}
.plan-svg .scale path{fill:none;stroke:var(--ink);stroke-width:1.2}

/* the key of a tint, in words */
.plan-key{display:none;flex-wrap:wrap;gap:4px 22px;margin-top:10px;font:400 13px/1.4 var(--sans);color:var(--ink)}
.plan-key.on{display:flex}
.plan-note{display:none;margin:6px 0 0;font:400 12px/1.4 var(--sans);color:var(--ink-2);position:sticky;left:0;max-width:min(100%,calc(100vw - 72px))}
.plan-note.on{display:block}
.plan-key span{display:inline-flex;align-items:center;gap:7px}
.plan-key i{flex:none;width:16px;height:11px;border:1px solid var(--line)}
.plan-key .kf i{background:repeating-linear-gradient(45deg,var(--white) 0 2px,var(--g3) 2px 3px)}
.plan-key .kc i{background:var(--g4)}

/* picking (p.onPick) */
.plan-svg .hit{fill:none;stroke:transparent;stroke-width:12;pointer-events:none}
.plan.pick .pe.pk{cursor:pointer}
.plan.pick .pe.pk .hit{pointer-events:stroke}
.plan.pick .pe:not(.pk){pointer-events:none}
.plan-svg .pe.hov > :is(path,circle):not(.hit):not(.det):not(.dome-det):not(.trib-det),
.plan-svg .pe.pk:focus-visible > :is(path,circle):not(.hit){stroke:var(--ink);stroke-width:2.6}
.plan-svg .pe:focus{outline:none}

/* ── STEPS: sticky plan beside the facts (desktop), on top of them (phone) ── */
.plan-steps{display:grid;grid-template-columns:minmax(0,620px) minmax(0,1fr);gap:3vw;padding:4vh 5.3vw 2vh;margin:0 1px;
  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}
.plan-steps > .facts{padding-bottom:14vh}
.plan-steps > .aside{padding-top:0;min-width:0}
.plan-steps .plan-fig{position:sticky;top:var(--plan-top,16px);margin:0}
.plan-steps .plan-fig .vb{padding:16px 16px 12px}
.plan-steps .plan-src{display:none;font:400 12.5px/1.5 var(--sans);color:var(--ink-2);padding:2vh 0 0 46px}
.plan-steps .fact{transition:opacity .8s,transform .8s cubic-bezier(.2,.7,.2,1),color .4s}
.vis .vb > .plan{margin:0}
@media (max-width:820px){
  .plan-steps{display:flex;flex-direction:column;gap:0;padding:0 20px 2vh}
  .plan-steps > .aside{order:-1;position:sticky;top:0;z-index:4;margin:0 -20px;align-self:stretch}
  .plan-steps .plan-fig{position:relative;top:0;margin:0;box-shadow:0 1px 0 var(--line),0 6px 10px -6px rgba(28,28,26,.25)}
  .plan-steps .plan-fig .vh{padding:7px 14px 6px;flex-direction:row;align-items:baseline;gap:12px}
  .plan-steps .plan-fig .vh h4{font-size:15px;line-height:1.25}
  .plan-steps .plan-fig .vh span{font-size:11.5px}
  .plan-steps .plan-fig .vb{padding:6px 6px 6px}
  .plan-steps .plan-fig .vs{display:none}
  .plan-steps .plan-svg{max-height:calc(42svh - 52px)}
  .plan-steps .plan-key{margin-top:4px;font-size:11.5px;gap:2px 14px}
  .plan-steps > .facts{padding-top:6px;padding-bottom:8vh}
  .plan-steps .plan-src{display:block;padding-left:34px}
  .plan-steps .plan-note{display:none}
  .plan-svg{max-height:none}
  .plan-steps .plan-svg{max-height:calc(42svh - 52px)}
}
@media (prefers-reduced-motion:reduce){
  .plan-svg .pe,.plan-svg .pe.on,.plan-svg .ov,.plan-svg .lab,.plan-svg .lab.on,.plan-svg .pl-fx,.plan-svg .pl-cad{transition:none}
}