@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-display:swap;font-weight:200 800;src:url(/assets/fonts/bricolage-grotesque-latin-ext.e808f16b56.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-display:swap;font-weight:200 800;src:url(/assets/fonts/bricolage-grotesque-latin.a97804dc9f.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Source Sans 3";font-style:normal;font-display:swap;font-weight:200 900;src:url(/assets/fonts/source-sans-3-latin-ext.a85a7459bd.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Source Sans 3";font-style:normal;font-display:swap;font-weight:200 900;src:url(/assets/fonts/source-sans-3-latin.7a19a7027e.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Baloo 2";font-style:normal;font-display:swap;font-weight:400 800;src:url(/assets/fonts/baloo-2-latin-ext.dfd52ee2e6.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Baloo 2";font-style:normal;font-display:swap;font-weight:400 800;src:url(/assets/fonts/baloo-2-latin.26fb4610d4.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Nunito";font-style:normal;font-display:swap;font-weight:200 1000;src:url(/assets/fonts/nunito-latin-ext.2c8d792869.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Nunito";font-style:normal;font-display:swap;font-weight:200 1000;src:url(/assets/fonts/nunito-latin.ba344451ea.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Archivo";font-style:normal;font-display:swap;font-weight:100 900;font-stretch:62% 125%;src:url(/assets/fonts/archivo-latin-ext.5717f37059.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Archivo";font-style:normal;font-display:swap;font-weight:100 900;font-stretch:62% 125%;src:url(/assets/fonts/archivo-latin.e3a28eade2.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-display:swap;font-weight:500;src:url(/assets/fonts/ibm-plex-mono-latin-ext-500-normal.6bb06407c9.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-display:swap;font-weight:500;src:url(/assets/fonts/ibm-plex-mono-latin-500-normal.01d2854474.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-display:swap;font-weight:400;src:url(/assets/fonts/ibm-plex-mono-latin-ext-400-normal.6bc0f226a5.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-display:swap;font-weight:400;src:url(/assets/fonts/ibm-plex-mono-latin-400-normal.08949f728d.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-display:swap;font-weight:500;src:url(/assets/fonts/ibm-plex-mono-latin-ext-500-normal.6bb06407c9.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-display:swap;font-weight:500;src:url(/assets/fonts/ibm-plex-mono-latin-500-normal.01d2854474.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{color-scheme:light;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}html{scroll-padding-top:env(safe-area-inset-top,0px)}body{margin:0;padding:0;font:14px -apple-system,BlinkMacSystemFont,sans-serif;background:#fff;color:#000}img{max-width:100%}[hidden]:not([hidden=until-found i]){display:none!important}

/* Layout: park-green header band, hero with route facts, filter chips, map beside route list, route cards, gateways table. */
:root{
  --bg:#f5f7f6; --card:#ffffff; --fg:#1c2421; --muted:#55625c; --line:#d6dedb; --land:#eef2f0;
  --park:#03624a; --park2:#007c5c; --mint:#30d99d; --onpark:#ffffff; --onpark2:#cfe9df;
  --lake:#2a6b96; --lakefill:#d3e4ee;
  --c-krog:#03624a; --c-kratki:#9a6a00; --c-sosedi:#a33a76; --c-vrata:#c4561f; --c-obs:#2a6b96; --c-lok:#7b5aa6; --halo:#ffffff;
  --s-A:#30363a; --s-B:#8a9399; --s-G:#c98a1e; --s-T:#8b5a2b; --s-C:#16876b; --s-U:#b9bfc2;
  --road:#c9d0cc; --warn:#a8451a; --d-lahka:#1f7a45; --d-srednja:#9a6a00; --d-zahtevna:#b3261e;
  --display:"Barlow Condensed","Arial Narrow",Arial,sans-serif; --body:"Barlow","Segoe UI",Arial,sans-serif; --mono:"IBM Plex Mono",ui-monospace,monospace;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0d1613; --card:#15211d; --fg:#e3ebe7; --muted:#9db0a8; --line:#2a3a34; --land:#111c18;
  --park:#0b4a39; --park2:#3fbf8f; --mint:#30d99d; --onpark:#f1f7f4; --onpark2:#b9dccd;
  --lake:#78b6de; --lakefill:#1a3443;
  --c-krog:#30d99d; --c-kratki:#f0c24a; --c-sosedi:#f08cc4; --c-vrata:#ff8a4c; --c-obs:#78b6de; --c-lok:#b897e6; --halo:#0d1613;
  --s-A:#e5e9eb; --s-B:#8f989f; --s-G:#e0a23c; --s-T:#b07a45; --s-C:#3cc49b; --s-U:#5d666b;
  --road:#2c3a35; --warn:#ff9a66; --d-lahka:#5ed08f; --d-srednja:#f0c24a; --d-zahtevna:#ff7b70; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0d1613; --card:#15211d; --fg:#e3ebe7; --muted:#9db0a8; --line:#2a3a34; --land:#111c18;
  --park:#0b4a39; --park2:#3fbf8f; --mint:#30d99d; --onpark:#f1f7f4; --onpark2:#b9dccd;
  --lake:#78b6de; --lakefill:#1a3443;
  --c-krog:#30d99d; --c-kratki:#f0c24a; --c-sosedi:#f08cc4; --c-vrata:#ff8a4c; --c-obs:#78b6de; --c-lok:#b897e6; --halo:#0d1613;
  --s-A:#e5e9eb; --s-B:#8f989f; --s-G:#e0a23c; --s-T:#b07a45; --s-C:#3cc49b; --s-U:#5d666b;
  --road:#2c3a35; --warn:#ff9a66; --d-lahka:#5ed08f; --d-srednja:#f0c24a; --d-zahtevna:#ff7b70; color-scheme:dark}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--fg);font:17px/1.55 var(--body);margin:0}
.wrap{max-width:1240px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
h1,h2,h3{font-family:var(--display);font-weight:700;line-height:1.05;margin:0;text-wrap:balance;letter-spacing:.005em}
h2{font-size:clamp(1.9rem,4vw,2.6rem)}
h3{font-size:1.35rem}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.demo{background:var(--mint);color:#06281f;font:600 .82rem var(--body);text-align:center;padding:6px 16px;letter-spacing:.02em}
header.top{background:var(--park);color:var(--onpark)}
header.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:14px;flex-wrap:wrap}
.brand{font:700 1.2rem var(--display);letter-spacing:.06em;text-transform:uppercase}
.brand small{display:block;font:500 .78rem var(--body);letter-spacing:.04em;text-transform:none;color:var(--onpark2)}
nav.crumbs{font-size:.92rem;color:var(--onpark2)}
.hero{background:var(--park);color:var(--onpark);border-top:1px solid rgba(255,255,255,.12)}
.hero .wrap{padding-block:36px 40px;display:grid;gap:18px}
.eyebrow{font:600 .8rem var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--mint)}
.hero h1{font-size:clamp(2.6rem,7vw,4.6rem);max-width:16ch}
.hero p{margin:0;max-width:62ch;font-size:1.12rem;color:var(--onpark2)}
.facts{display:flex;flex-wrap:wrap;gap:12px 36px;margin-top:6px}
.facts div{display:grid}
.facts b{font:700 2.1rem/1 var(--display);color:var(--onpark)}
.facts span{font-size:.85rem;color:var(--onpark2)}
section{padding-block:40px}
.lead{color:var(--muted);max-width:68ch;margin:8px 0 20px}
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.chip{font:600 .95rem var(--body);border:1.5px solid var(--line);background:var(--card);color:var(--fg);border-radius:999px;padding:7px 14px;cursor:pointer;display:inline-flex;align-items:center;gap:8px}
.chip i{width:12px;height:12px;border-radius:50%;display:inline-block}
.chip[aria-pressed="true"]{border-color:var(--park2);background:var(--park2);color:var(--onpark)}
.chip:focus-visible,.rt:focus-visible,.zoom button:focus-visible,.btn:focus-visible,.card:focus-visible{outline:3px solid var(--mint);outline-offset:2px}
.mapgrid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:20px;align-items:start}
@media (max-width:920px){.mapgrid{grid-template-columns:1fr}.list{max-height:300px}}
@media (max-width:560px){body{font-size:16px}.hero .wrap{padding-block:24px 28px}.facts b{font-size:1.7rem}.kv{grid-template-columns:repeat(2,minmax(0,1fr))}.zoom button{width:44px;height:44px}.chip{padding:9px 14px}.ghead h3{font-size:1.5rem}}
.mapbox{background:var(--card);border:1px solid var(--line);border-radius:8px;overflow:hidden;position:relative}
.mapbox svg{display:block;width:100%;height:auto;touch-action:none;cursor:grab;background:var(--land)}
.zoom{position:absolute;top:10px;right:10px;display:grid;gap:4px}
.zoom button{width:38px;height:38px;border:1px solid var(--line);background:var(--card);color:var(--fg);border-radius:6px;font:700 1.2rem var(--body);cursor:pointer}
.legend{display:flex;flex-wrap:wrap;gap:6px 16px;padding:10px 14px;border-top:1px solid var(--line);font-size:.86rem;color:var(--muted)}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend i{display:inline-block;width:22px;border-top:4px solid}
.attr{font-size:.76rem;color:var(--muted);padding:0 14px 10px}
.side{display:grid;gap:12px;min-width:0}
.list{display:grid;gap:6px;max-height:430px;overflow:auto;padding-right:4px}
.rt{display:grid;grid-template-columns:12px minmax(0,1fr) auto;gap:4px 10px;align-items:center;text-align:left;width:100%;background:var(--card);border:1px solid var(--line);border-radius:6px;padding:9px 12px;color:var(--fg);font:inherit;cursor:pointer}
.rt[aria-current="true"]{border-color:var(--park2);box-shadow:inset 4px 0 0 var(--park2)}
.rt .sw{width:12px;height:12px;border-radius:50%}
.rt .nm{font-weight:600;min-width:0;line-height:1.25}
.rt .sub{display:block;font-size:.8rem;color:var(--muted);font-weight:400}
.rt .bar{grid-column:2 / 4}
.bar{display:flex;height:6px;border-radius:3px;overflow:hidden;background:var(--line)}
.bar span{display:block;height:100%}
.detail{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:18px;display:grid;gap:10px}
.kv{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 8px}
.prof{width:100%;height:auto;display:block}
.prof text{font:500 11px var(--mono);fill:var(--muted)}
.dz{display:inline-flex;align-items:center;gap:6px;font-weight:700}
.dz i{width:10px;height:10px;border-radius:50%;display:inline-block}
.legend-diff{display:flex;flex-wrap:wrap;gap:8px 20px;font-size:.92rem;color:var(--muted);margin:-6px 0 18px}
.kv div{display:grid;gap:2px}
.kv b{font:700 1.5rem/1 var(--display)}
.kv span{font-size:.78rem;color:var(--muted)}
.tag{display:inline-block;font:600 .72rem var(--body);text-transform:uppercase;letter-spacing:.1em;padding:3px 8px;border-radius:3px;color:var(--onpark);width:max-content}
.warn{color:var(--warn);font-weight:600;font-size:.92rem;margin:0}
.share{background:var(--mint);color:#06281f}
.sharemsg{font-size:.85rem;color:var(--onpark2);margin:0;width:100%;text-align:right}
.btn{font:600 .95rem var(--body);background:var(--park2);color:var(--onpark);border:0;border-radius:6px;padding:9px 14px;cursor:pointer;width:max-content}
.note{font-size:.86rem;color:var(--muted);margin:0}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:16px}
.groups{display:grid;gap:36px}
.ghead{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px;border-bottom:2px solid var(--park2);padding-bottom:8px;margin-bottom:14px}
.ghead h3{font-size:1.8rem}
.ghead p{margin:0;color:var(--muted);font-size:.95rem}
.ghead span.n{font:600 .9rem var(--mono);color:var(--park2)}
.gtag{display:inline-block;font:600 .74rem var(--body);letter-spacing:.06em;color:var(--park2);text-transform:uppercase}
.card{background:var(--card);border:1px solid var(--line);border-radius:8px;overflow:hidden;display:grid;grid-template-rows:auto 1fr;cursor:pointer;text-align:left;color:var(--fg);font:inherit;padding:0}
.card svg.shape{display:block;width:100%;height:120px;background:var(--land)}
.card svg.mini{display:block;width:100%;height:40px}
.card .cb{padding:14px 16px 16px;display:grid;gap:8px;align-content:start}
.card .meta{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:.88rem;color:var(--muted)}
.card .meta b{color:var(--fg);font-weight:600}
.card p{margin:0;font-size:.94rem}
.reasons{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;counter-reset:r}
.reasons div{border-top:3px solid var(--park2);padding-top:12px;display:grid;gap:6px}
.reasons p{margin:0;font-size:.96rem;color:var(--muted)}
.tbl{overflow-x:auto;border:1px solid var(--line);border-radius:8px;background:var(--card)}
table{border-collapse:collapse;width:100%;min-width:720px;font-size:.94rem}
th,td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:top}
th{font:600 .76rem var(--body);text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}
tr:last-child td{border-bottom:0}
footer{background:var(--park);color:var(--onpark2);font-size:.88rem}
footer .wrap{padding-block:26px;display:grid;gap:8px}
footer b{color:var(--onpark)}
svg text{font-family:var(--body)}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* Junction network, signposts and the route builder */
:root{--c-moja:#c2410c;--jdot:#ffffff}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--c-moja:#ffa94d;--jdot:#15211d}}
:root[data-theme="dark"]{--c-moja:#ffa94d;--jdot:#15211d}
.modes{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:-2px 0 14px}
.modes .chip[aria-selected="true"]{border-color:var(--c-moja);background:var(--c-moja);color:var(--card)}
.modes .hint{font-size:.88rem;color:var(--muted);margin:0}
.bar2{display:flex;flex-wrap:wrap;gap:6px}
.bar2 button,.sbtn{font:600 .9rem var(--body);border:1.5px solid var(--line);background:var(--card);color:var(--fg);border-radius:6px;padding:7px 11px;cursor:pointer}
.bar2 button:disabled{opacity:.45;cursor:default}
.bar2 button:focus-visible,.sbtn:focus-visible,.dirb:focus-visible,#jtab tr:focus-visible{outline:3px solid var(--mint);outline-offset:2px}
.sign{display:grid;gap:6px}
.sign h4{margin:0;font:700 1.05rem var(--display);letter-spacing:.02em}
.dirb{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:2px 10px;align-items:center;text-align:left;width:100%;background:var(--card);border:1px solid var(--line);border-left:4px solid var(--c-moja);border-radius:6px;padding:8px 10px;color:var(--fg);font:inherit;cursor:pointer}
.dirb[disabled]{cursor:default;border-left-color:var(--line)}
.dirb .ar{font:700 1.3rem/1 var(--body);text-align:center}
.dirb .to{font-weight:600;line-height:1.25;min-width:0}
.dirb .to small{display:block;font-weight:400;font-size:.8rem;color:var(--muted)}
.dirb .km{font:600 .9rem var(--mono)}
.dirb .rts{grid-column:2 / 4;display:flex;flex-wrap:wrap;gap:4px}
.rchip{font:600 .72rem var(--body);padding:2px 7px;border-radius:999px;color:var(--card);white-space:nowrap}
.code{font:700 .95rem var(--mono);letter-spacing:.02em}
.book{width:100%;border-collapse:collapse;font-size:.86rem;min-width:0}
.book td,.book th{padding:6px 6px;border-bottom:1px solid var(--line);vertical-align:top}
.book th{font-size:.7rem}
details.rb summary{cursor:pointer;font-weight:600}
.codebox{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:6px;align-items:center}
.codebox input,.srch input{font:500 .9rem var(--mono);border:1.5px solid var(--line);background:var(--card);color:var(--fg);border-radius:6px;padding:8px 10px;min-width:0;width:100%}
.srch{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;margin-bottom:10px}
.jtbl{max-height:560px;overflow:auto}
#jtab tr{cursor:pointer}
#jtab tr:hover td{background:var(--land)}
#jtab td{font-size:.9rem}
#jtab .dirs{display:grid;gap:2px}
@media (max-width:560px){.codebox{grid-template-columns:1fr 1fr}.codebox input{grid-column:1 / 3}}
.side{grid-template-columns:minmax(0,1fr)}
#b-book{overflow-x:auto;max-width:100%}
.book td{overflow-wrap:anywhere}

[hidden]{display:none!important}


/* route filter and sort (24. 10. 2026) */
.rfbar{display:flex;flex-wrap:wrap;gap:12px 18px;align-items:flex-end;margin:-4px 0 14px;padding:12px 14px;border:1.5px solid var(--line);border-radius:12px;background:var(--card)}
.rf{display:flex;flex-direction:column;gap:5px;min-width:0}
.rf>.rl{font:600 .76rem var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.rf select{font:500 .95rem var(--body);padding:7px 10px;border:1.5px solid var(--line);border-radius:8px;background:var(--card);color:var(--fg);max-width:100%}
.rf select:focus-visible,.rf input:focus-visible{outline:3px solid var(--mint);outline-offset:2px}
.rf .rng{display:flex;gap:10px;align-items:center}
.rf .rng label{display:flex;gap:6px;align-items:center;font-size:.85rem;color:var(--muted)}
.rf input[type=range]{width:130px;accent-color:var(--park2)}
.rf .dch{display:flex;gap:6px;flex-wrap:wrap}
.rf .chip{font-size:.86rem;padding:5px 11px;gap:6px}
.rf .chip i{width:9px;height:9px;border-radius:50%;display:inline-block}
.rf-end{display:flex;gap:12px;align-items:center;margin-left:auto}
.rf-count{font-size:.9rem;color:var(--muted)}
.rf-count b{color:var(--fg)}
.rt .rfd{display:block;font:600 .8rem var(--body);color:var(--park2);margin-top:2px}
.rf-hint{flex:1 1 100%;margin:0;font-size:.85rem;color:var(--muted)}
.rf-empty{padding:14px;color:var(--muted);font-size:.92rem}
@media (max-width:640px){.rfbar{padding:10px 12px;gap:12px}.rf{flex:1 1 100%}.rf select{width:100%}.rf .rng{flex-wrap:wrap}.rf .rng label{flex:1 1 140px}.rf input[type=range]{flex:1;width:auto;min-width:0}.rf-end{margin-left:0;width:100%;justify-content:space-between}}


/* POI layer v2 (25. 10. 2026): pictogram markers per type, floating type menu on the map, popup card on click */
:root{--p-N:#2f7a34;--p-K:#8c2a52;--p-S:#1d5bb5;--p-G:#a8550c;--p-ink:#ffffff;--shadow:rgba(16,38,30,.2)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--p-N:#78d083;--p-K:#f095bb;--p-S:#8ab6ff;--p-G:#ffb067;--p-ink:#0d1613;--shadow:rgba(0,0,0,.55)}}
:root[data-theme="dark"]{--p-N:#78d083;--p-K:#f095bb;--p-S:#8ab6ff;--p-G:#ffb067;--p-ink:#0d1613;--shadow:rgba(0,0,0,.55)}
.mapbox .pfl svg,.mapbox .ppop svg{display:block;background:none;cursor:inherit;touch-action:auto;height:auto}
.pm{cursor:pointer;color:var(--p-ink)}
.pm:focus{outline:none}
.pm:focus-visible .pm-b{stroke:var(--mint);stroke-width:3}
.pfl{position:absolute;top:10px;left:10px;z-index:3;max-width:calc(100% - 74px);background:var(--card);color:var(--fg);border:1px solid var(--line);border-radius:10px;box-shadow:0 4px 16px var(--shadow);display:grid}
.pfl-tg{display:flex;align-items:center;gap:8px;font:600 .92rem var(--body);background:none;border:0;color:var(--fg);padding:8px 10px;cursor:pointer;width:100%;text-align:left;border-radius:10px}
.pfl-tg svg{width:18px;height:18px;flex:none;color:var(--park2)}
.pfl-tg b{margin-left:auto;font:600 .78rem var(--mono);font-variant-numeric:tabular-nums;background:var(--land);border-radius:999px;padding:1px 8px;min-width:2.2em;text-align:center}
.pfl-tg .chev{font-size:.8rem;color:var(--muted)}
.pfl-body{display:grid;gap:9px;padding:0 10px 10px;overflow:auto;overscroll-behavior:contain}
.pfl-g{display:grid;gap:4px}
.pfl-gl{justify-self:start;display:inline-flex;align-items:center;gap:6px;font:600 .68rem var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);background:none;border:0;padding:2px 0;cursor:pointer}
.pfl-gl i{width:9px;height:9px;border-radius:50%;box-shadow:inset 0 0 0 2px var(--pc)}
.pfl-gl[aria-pressed="true"] i{background:var(--pc)}
.pfl-gl[aria-pressed="mixed"] i{background:linear-gradient(90deg,var(--pc) 50%,transparent 50%)}
.pfl-row{display:flex;flex-wrap:wrap;gap:5px;max-width:212px}
.pfl-b{width:34px;height:34px;border-radius:50%;border:1.5px solid var(--line);background:var(--card);color:var(--pc);display:grid;place-items:center;cursor:pointer;padding:0}
.pfl-b svg{width:19px;height:19px}
.pfl-b:hover{border-color:var(--pc)}
.pfl-b[aria-pressed="true"]{background:var(--pc);border-color:var(--pc);color:var(--p-ink)}
.pfl-st{margin:0;font-size:.8rem;line-height:1.35;color:var(--muted);max-width:212px;min-height:2.7em}
.pfl-st b{color:var(--fg);font-weight:600}
.pfl-act{display:flex;gap:6px}
.pfl-act button{font:600 .8rem var(--body);border:1.5px solid var(--line);background:var(--card);color:var(--fg);border-radius:6px;padding:4px 10px;cursor:pointer}
.pfl-tg:focus-visible,.pfl-gl:focus-visible,.pfl-b:focus-visible,.pfl-act button:focus-visible,.ppop button:focus-visible,.ppop a:focus-visible{outline:3px solid var(--mint);outline-offset:2px}
.ppop{position:absolute;z-index:4;width:min(300px,calc(100% - 16px));overflow:auto;background:var(--card);color:var(--fg);border:1px solid var(--line);border-radius:10px;box-shadow:0 8px 24px var(--shadow);padding:12px 14px 12px;display:grid;gap:8px;font-size:.92rem;line-height:1.45}
.ppop-h{display:grid;grid-template-columns:34px minmax(0,1fr);gap:10px;align-items:center;padding-right:26px}
.ppop-ic{width:34px;height:34px;border-radius:50%;background:var(--pc);color:var(--p-ink);display:grid;place-items:center}
.ppop-ic svg{width:20px;height:20px}
.ppop-t{display:block;font:600 .68rem var(--body);letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.ppop h4{margin:2px 0 0;font:700 1.18rem/1.12 var(--display);text-wrap:balance;overflow-wrap:anywhere}
.ppop p{margin:0}
.ppop-x{position:absolute;top:6px;right:6px;width:32px;height:32px;border:0;background:none;color:var(--muted);font:400 1.4rem/1 var(--body);cursor:pointer;border-radius:6px}
.ppop-x:hover{background:var(--land);color:var(--fg)}
.ppop-kv{display:grid;grid-template-columns:auto minmax(0,1fr);gap:3px 10px;margin:0;font-size:.86rem}
.ppop-kv dt{color:var(--muted)}
.ppop-kv dd{margin:0;font-variant-numeric:tabular-nums}
.ppop-a{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center}
.ppop a{color:var(--park2);overflow-wrap:anywhere}
.ppop .src{font-size:.75rem;line-height:1.4;color:var(--muted)}
@media (max-width:560px){.pfl-b{width:36px;height:36px}.pfl-row{max-width:none}.pfl-st{max-width:none}}


/* Export v1 (25. 10. 2026): points along the selected route as icons on the map and on the profile, list, Google Maps and PDF buttons */
.xprof{position:relative}
.xpov{position:absolute;inset:0;pointer-events:none}
.xpst{position:absolute;left:0;top:0;overflow:visible}
.xpst line{stroke:var(--muted);stroke-width:1;opacity:.6}
.xpi{position:absolute;width:20px;height:20px;padding:0;border:1.5px solid var(--card);border-radius:50%;background:var(--pc);color:var(--p-ink);display:grid;place-items:center;cursor:pointer;pointer-events:auto;box-shadow:0 1px 3px var(--shadow)}
.xpi::before{content:"";position:absolute;inset:-2px;border-radius:50%}
.xpi svg{width:12px;height:12px;display:block}
.xpi:hover,.xpi:focus-visible{outline:2px solid var(--fg);outline-offset:1px;z-index:2}
.xam.xhi .pm-b{stroke:var(--fg)!important;stroke-width:3.4}
.xwrap{display:grid;gap:10px}
.xact{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.xact .sbtn{text-decoration:none;display:inline-block}
.xact .btn[disabled]{opacity:.6;cursor:progress}
.xmsg a{color:var(--park2)}
.xol{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:2px;max-height:340px;overflow:auto}
.xol button{display:grid;grid-template-columns:24px minmax(0,1fr) auto;gap:8px;align-items:center;width:100%;min-height:36px;text-align:left;background:none;border:0;border-radius:6px;padding:4px 6px;color:var(--fg);font:inherit;font-size:.86rem;line-height:1.3;cursor:pointer}
.xol button:hover{background:var(--land)}
.xol button:focus-visible{outline:3px solid var(--mint);outline-offset:1px}
.xic{width:22px;height:22px;border-radius:50%;background:var(--pc);color:var(--p-ink);display:grid;place-items:center}
.xic svg{width:13px;height:13px;display:block}
.xol .xd{color:var(--muted)}
.xol .xk{font:500 .8rem var(--mono);color:var(--muted);white-space:nowrap}
.xpm{position:absolute;min-width:20px;height:16px;padding:0 4px;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--fg);font:600 .68rem/14px var(--body);cursor:pointer;pointer-events:auto;z-index:3;box-shadow:0 1px 3px var(--shadow)}
.xpm:hover,.xpm:focus-visible{outline:2px solid var(--fg);outline-offset:1px}
.xol button.xsel{background:var(--land);box-shadow:inset 3px 0 0 var(--park2)}
/* Access v1 (25. 10. 2026): start from a chosen starting location, access drawn apart (dotted) on the map and profile */
:root{--acc:#3b4cca}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--acc:#9aa6ff}}
:root[data-theme="dark"]{--acc:#9aa6ff}
.xst{margin:10px 0 4px;display:grid;gap:4px;min-width:0;max-width:100%}
.xstl{display:grid;gap:4px;min-width:0;font-weight:600;font-size:.92rem}
.xstl select{font:inherit;font-weight:400;min-height:36px;width:100%;min-width:0;max-width:100%;text-overflow:ellipsis;padding:4px 8px;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--fg)}
.xstl select:focus-visible{outline:3px solid var(--mint);outline-offset:1px}
.xsum{margin:0}
.xsum b{color:var(--fg)}
.xchk{display:inline-flex;align-items:center;gap:6px;font-size:.88rem;color:var(--fg);min-height:36px}
.xchk input{width:18px;height:18px;accent-color:var(--acc)}
.xamk{pointer-events:none}

/* profile v1: grade colours, legend, scrub dot */
.xgleg{display:flex;flex-wrap:wrap;gap:4px 14px;align-items:center;margin:4px 0 0;font-size:12.5px;color:var(--muted)}
.xgleg>span{display:inline-flex;align-items:center;gap:5px}
.xgleg i{display:inline-block;width:16px;height:4px;border-radius:2px}
.xgleg i.xgleg-a{background:none;border-top:3px dotted var(--acc);height:0}
.xgleg .mono{color:var(--fg)}
svg.xgprof{touch-action:pan-y;cursor:crosshair}
svg.xgprof:focus-visible{outline:1.5px solid var(--muted);outline-offset:2px;border-radius:4px}
.xscr{position:absolute;inset:0;pointer-events:none}
.xscr[hidden]{display:none}
.xscr-l{position:absolute;width:0;border-left:1px dashed var(--fg);opacity:.55}
.xscr-d{position:absolute;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;border:2.5px solid var(--card);box-shadow:0 0 0 1.5px var(--fg)}
.xscr-t{position:absolute;white-space:nowrap;font:600 12px/1.4 var(--mono,ui-monospace,monospace);padding:1px 6px;border-radius:4px;background:var(--card);color:var(--fg);box-shadow:0 1px 4px var(--shadow,rgba(0,0,0,.25))}
.xscrm{pointer-events:none}

/* gate direction v1 */
.xdir{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:10px 0 2px;min-width:0}
.xdir-l{font-weight:600;font-size:.92rem}
.xseg{display:inline-flex;flex-wrap:wrap;border:1px solid var(--line);border-radius:8px;overflow:hidden;max-width:100%}
.xseg button{font:inherit;font-size:.86rem;min-height:36px;padding:4px 10px;border:0;background:var(--card);color:var(--fg);cursor:pointer;text-align:left}
.xseg button+button{border-left:1px solid var(--line)}
.xseg button[aria-pressed="true"]{background:var(--park);color:var(--onpark);font-weight:600}
.xseg button:focus-visible{outline:3px solid var(--mint);outline-offset:-3px}

/* static inline styles moved out for the Content Security Policy */
.sx1{background:var(--d-lahka)}
.sx2{background:var(--d-srednja)}
.sx3{background:var(--d-zahtevna)}
.sx4{background:var(--c-moja)}
.sx5{display:grid;gap:10px}
.sx6{margin-top:20px}
.sx7{margin-top:10px}
.demo a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.brand-row .nbp-mark{width:44px;height:44px;flex:none}
.brand-row{display:flex;align-items:center;gap:10px}

/* NBP identity (4. 11. 2026): Smrekov gozd palette from the final logo, site fonts and a light header like zzid.si.
   Route, surface and difficulty colours above stay unchanged so the map remains readable. */
:root{
  --bg:#F5F1E6; --card:#FFFFFF; --fg:#142018; --muted:#4A5D48; --line:#DED8CB; --land:#EEEADF;
  --park:#1F3D2B; --park2:#2C5F2D; --mint:#C7D84A; --onpark:#F5F1E6; --onpark2:#DCE6D2;
  --acc:#2C5F2D; --focus:#C2410C; --head:#F5F1E6;
  --display:"Bricolage Grotesque",system-ui,sans-serif; --body:"Source Sans 3",system-ui,sans-serif;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0E1912; --card:#16251B; --fg:#E8EDE3; --muted:#A9B8A6; --line:#2B3B30; --land:#122017;
  --park:#132A1C; --park2:#3E7A47; --mint:#C7D84A; --onpark:#F5F1E6; --onpark2:#C9D6C0;
  --acc:#C7D84A; --focus:#FF9A66; --head:#16251B}}
:root[data-theme="dark"]{
  --bg:#0E1912; --card:#16251B; --fg:#E8EDE3; --muted:#A9B8A6; --line:#2B3B30; --land:#122017;
  --park:#132A1C; --park2:#3E7A47; --mint:#C7D84A; --onpark:#F5F1E6; --onpark2:#C9D6C0;
  --acc:#C7D84A; --focus:#FF9A66; --head:#16251B}
.demo{background:var(--mint);color:#142018}
header.top{background:var(--head);color:var(--fg);border-bottom:1px solid var(--line)}
header.top .brand{font:800 1.15rem var(--display);letter-spacing:0;text-transform:none}
header.top .brand small{color:var(--muted)}
.hero{border-top:0}
.hero h1{font-weight:800;letter-spacing:-.01em}
h1,h2,h3{font-weight:800;letter-spacing:-.005em}
.eyebrow{color:var(--mint)}
.share{background:var(--park);color:var(--onpark);border-radius:999px;padding:10px 18px}
.btn{border-radius:12px}
.chip[aria-pressed="true"]{border-color:var(--park);background:var(--park);color:var(--onpark)}
.back{font:700 .95rem var(--body);color:var(--park2);text-decoration:none;white-space:nowrap}
.back:hover{text-decoration:underline}
.top-act{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.chip:focus-visible,.rt:focus-visible,.zoom button:focus-visible,.btn:focus-visible,.card:focus-visible,a:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .back{color:var(--mint)}}
:root[data-theme="dark"] .back{color:var(--mint)}
.nbp-dark{display:none}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .nbp-light{display:none}:root:not([data-theme="light"]) .nbp-dark{display:block}}
:root[data-theme="dark"] .nbp-light{display:none}:root[data-theme="dark"] .nbp-dark{display:block}
.sharemsg{color:var(--muted)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .share,:root:not([data-theme="light"]) .chip[aria-pressed="true"]{background:var(--mint);border-color:var(--mint);color:#142018}}
:root[data-theme="dark"] .share,:root[data-theme="dark"] .chip[aria-pressed="true"]{background:var(--mint);border-color:var(--mint);color:#142018}

/* ---------- Layout 4. 11. 2026: tabs; filters, map and list pinned on the first screen; details inside the chosen card;
   A4 preview of the printout (or compact route boxes) is a normal section under the map (no overlap, 4. 11. 2026). */
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hero .wrap{padding-block:22px 24px;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:10px 40px}
.hero .eyebrow,.hero h1,.hero p{grid-column:1}
.hero h1{font-size:clamp(2.2rem,4.6vw,3.2rem);max-width:none}
.hero p{font-size:.98rem;max-width:80ch}
.hero .facts{grid-column:2;grid-row:1 / span 3;margin:0;gap:10px 26px;max-width:420px}
.hero .facts b{font-size:1.7rem}
@media (max-width:920px){.hero .wrap{grid-template-columns:1fr}.hero .facts{grid-column:1;grid-row:auto;max-width:none}}
.tabs{position:sticky;top:0;z-index:30;background:var(--bg);border-bottom:1px solid var(--line)}
.tabs .wrap{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}
.tabs .wrap::-webkit-scrollbar{display:none}
.tabs [role="tab"]{flex:none;font:600 .98rem var(--body);color:var(--muted);background:none;border:0;border-bottom:3px solid transparent;padding:12px 14px 10px;cursor:pointer;white-space:nowrap}
.tabs [role="tab"][aria-selected="true"]{color:var(--fg);border-bottom-color:var(--park2)}
.tabs [role="tab"]:hover{color:var(--fg)}
.tabs [role="tab"]:focus-visible{outline:3px solid var(--mint);outline-offset:-3px}
.tabp{padding-block:28px 40px}
.tabp.karta{padding:0}
:root{--tabsH:47px}
.stage{position:relative;height:calc(100vh - var(--tabsH));height:calc(100svh - var(--tabsH));z-index:1}
.stage>.wrap{height:100%;display:flex;flex-direction:column;gap:10px;padding-block:10px 12px;position:relative}
.ctl{display:flex;align-items:center;gap:8px 14px;min-width:0;flex:none}
.ctl .filters{flex:1 1 auto;min-width:0;flex-wrap:nowrap;overflow-x:auto;margin:0;padding:2px;scrollbar-width:thin}
.ctl .chip{flex:none;padding:5px 12px;font-size:.9rem}
.ctl-d{display:flex;align-items:center;gap:6px;flex:none}
.ctl-d .rl{font:600 .72rem var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.ctl-d .dch{display:flex;gap:6px}
.more .chev{font-size:.8rem}
.more[aria-expanded="true"] .chev{display:inline-block;transform:rotate(180deg)}
.more .n{font:600 .74rem var(--mono);background:var(--park2);color:var(--onpark);border-radius:999px;min-width:18px;padding:0 5px;text-align:center}
.stage .rfbar{position:absolute;z-index:20;top:58px;right:max(16px,env(safe-area-inset-right,0px));width:min(640px,calc(100% - 32px));margin:0;box-shadow:0 12px 30px rgba(0,0,0,.18)}
.stage .rfbar:not(.open){display:none}
.stage .mapgrid{flex:1 1 auto;min-height:0;grid-template-rows:minmax(0,1fr);align-items:stretch;gap:16px}
.stage .mapbox{display:flex;flex-direction:column;min-height:0}
.stage .mapbox svg#map{flex:1 1 auto;min-height:0;height:100%}
.stage .legend{flex:none;padding:6px 12px;font-size:.8rem;gap:4px 12px}
.stage .side{display:flex;flex-direction:column;gap:8px;min-height:0;overflow:hidden}
.sidehead{display:flex;align-items:center;justify-content:space-between;gap:8px;flex:none}
.sidehead .modes{margin:0;flex-wrap:nowrap}
.sidehead .modes .chip{padding:5px 12px;font-size:.9rem}
.sidehead .modes .hint{display:none}
.sidehead .rf-end{margin:0;display:flex;gap:8px;align-items:center;font-size:.86rem}
.stage .list{flex:1 1 auto;min-height:0;max-height:none;position:relative;align-content:start;overscroll-behavior:contain}
.stage #builder{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain}
.detail.empty{display:none}
.list .detail{border-radius:0 0 8px 8px;padding:14px 14px 16px;gap:9px}
.list .detail.incard{margin-top:-7px;border:1px solid var(--park2);border-top:0;box-shadow:inset 4px 0 0 var(--park2)}
.rt[aria-expanded="true"]{border-radius:6px 6px 0 0;border-bottom-color:transparent}
.incard>.tag,.incard>h3,.incard>.gtag,.incard>p:first-of-type{display:none}
.incard .kv b{font-size:1.25rem}
.incard .kv span{font-size:.78rem}
/* section under the map: preview or route boxes, in the normal page flow */
.pv{position:relative;background:var(--bg);border-top:1px solid var(--line);padding-block:24px 36px}
.pv>.wrap{display:grid;gap:18px}
.pv h2{font-size:clamp(1.6rem,3vw,2.1rem)}
.pv .lead{margin:6px 0 12px}
.pv .legend-diff{margin:0 0 14px}
.pv .groups{gap:22px}
.pv .ghead{margin-bottom:10px;padding-bottom:6px}
.pv .ghead h3{font-size:1.35rem}
.pv .ghead p{font-size:.86rem;flex-basis:100%}
.pv .grid{grid-template-columns:repeat(auto-fill,minmax(165px,1fr));gap:6px}
.pv .card{grid-template-rows:auto}
.pv .card svg,.pv .card .cb>p,.pv .card .bar,.pv .card .tag{display:none}
.pv .card{border-left:4px solid var(--cc,var(--park2))}
.pv .card .cb{padding:9px 11px 10px;gap:5px}
.pv .card h3{font-size:1.02rem;line-height:1.15}
.pv .card .tag{font-size:.6rem;padding:2px 6px}
.pv .card .meta{font-size:.78rem;gap:2px 10px}
.pv .card:hover{border-color:var(--park2)}
.pv .card[aria-current="true"]{border-color:var(--park2);box-shadow:inset 0 0 0 2px var(--park2)}
#pv-sheet:not([hidden])+#pv-groups{border-top:1px solid var(--line);padding-top:18px}
.pv .card:focus-visible{outline:3px solid var(--mint);outline-offset:2px}
.pv-src,.pv .attr{max-width:110ch;padding:0}
.pv-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;max-width:780px;margin:0 auto 12px}
.pv-l{font:600 .76rem var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-right:auto}
.pv-msg{font-size:.84rem;color:var(--muted)}
.a4{max-width:780px;margin:0 auto;aspect-ratio:210 / 297;min-height:0;background:#fff;color:#1c2421;border-radius:4px;box-shadow:0 2px 6px rgba(0,0,0,.12),0 18px 40px rgba(0,0,0,.12);
  padding:clamp(18px,4.2%,40px);display:grid;align-content:start;gap:14px;font-size:.86rem;line-height:1.4;
  --card:#fff;--fg:#1c2421;--muted:#55625c;--line:#d6dedb;--land:#eef2f0;--park2:#007c5c}
.a4h{display:grid;gap:4px;border-bottom:2px solid var(--park2);padding-bottom:10px}
.a4h h2{font-size:1.9rem}
.a4h p{margin:0;color:var(--muted);font-size:.84rem}
.a4m{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:16px;align-items:start}
.a4map{aspect-ratio:4 / 3;border:1px solid var(--line);border-radius:4px;overflow:hidden;background:var(--land)}
.a4map svg{display:block;width:100%;height:100%;pointer-events:none}
.a4kv{display:grid;gap:10px;align-content:start}
.a4kv .kv{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.a4kv .kv b{font-size:1.15rem}
.a4kv .kv span{display:block;font-size:.74rem;color:var(--muted)}
.a4p svg{width:100%;height:auto;display:block;max-height:150px}
.a4t{display:grid;gap:6px}
.a4t p{margin:0;font-size:.82rem}
.a4c{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:16px;align-items:start}
.a4c section{min-width:0}
.a4c h3{font-size:1.05rem;margin-bottom:6px}
.a4c details>summary{font-weight:600;font-size:.82rem;cursor:pointer}
.a4c .tbl{border:0;background:none}
.a4c .book{font-size:.74rem}
.a4c .book td,.a4c .book th{padding:3px 4px}
.a4c .xol{margin:6px 0 0;padding:0;list-style:none;display:grid;gap:2px;font-size:.76rem}
.a4 footer.a4f{background:none;color:var(--muted);display:grid;gap:4px;border-top:1px solid var(--line);padding-top:8px;font-size:.72rem;color:var(--muted)}
.a4f .note{font-size:.72rem}
/* tablets and phones: no pinning, map 55% of the screen, list under it, preview in the normal flow */
@media (max-width:920px){
  .stage{position:static;height:auto}
  .stage>.wrap{height:auto}
  .ctl{flex-wrap:wrap}
  .ctl .filters{flex-basis:100%}
  .stage .rfbar{position:static;width:auto;box-shadow:none}
  .stage .mapgrid{grid-template-columns:1fr;grid-template-rows:auto}
  .stage .mapbox svg#map{height:55vh;height:55svh;flex:none}
  .stage .side{overflow:visible}
  .stage .list{max-height:60vh;max-height:60svh}
  .a4{aspect-ratio:auto;padding:16px}
  .a4m,.a4c{grid-template-columns:1fr}
}
@media print{.tabs,.stage,.pv-bar,header.top,.demo,.hero,footer,#pv-groups,.pv-src,.pv .attr{display:none!important}.pv{box-shadow:none;border:0;padding:0}.a4{box-shadow:none;max-width:none}}
.pv .card .meta span:nth-child(2),.pv .card .meta span:nth-child(3),.pv .card .meta span:nth-child(5){display:none}
.pv .card h3{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pv .card .meta{flex-wrap:nowrap;white-space:nowrap}
.stage #builder{align-content:start}
@media (max-width:560px){.sidehead{flex-wrap:wrap}.sidehead .modes .chip{white-space:nowrap}}
@media (max-width:560px){.ctl-d{flex-wrap:wrap;min-width:0;max-width:100%}.ctl-d .rl{flex-basis:100%}.ctl-d .dch{flex-wrap:wrap}.ctl-d .chip{padding:6px 11px}}