/* Сворачиваемые окна (каждое уезжает к своему краю экрана и оставляет кнопку) + окно справки о веществах */
:root{--wl:318px;--wr:262px;--strip:46px;--ease:cubic-bezier(.7,0,.2,1);--dur:.55s}

#left.col,#right.col{position:absolute;z-index:1000;top:0;bottom:var(--rail);max-height:none;display:flex;flex-direction:column;gap:10px;padding:18px 0 14px;
  overflow-y:auto;overflow-x:hidden;pointer-events:none;scrollbar-width:none}
#left.col::-webkit-scrollbar,#right.col::-webkit-scrollbar{display:none}
#left.col{left:0;right:auto;width:calc(var(--wl) + 20px);padding-left:20px}
#right.col{right:0;left:auto;width:calc(var(--wr) + 20px);padding-right:20px;align-items:flex-end}
.col>.pnl{pointer-events:auto;flex:none;padding:0;overflow:hidden;transition:transform var(--dur) var(--ease),box-shadow .3s}
#left.col>.pnl{width:var(--wl)}
#right.col>.pnl{width:var(--wr)}
.pnl-l.min{transform:translateX(calc(var(--strip) - var(--wl) - 20px))}
.pnl-r.min{transform:translateX(calc(var(--wr) + 20px - var(--strip)))}

.pnl .hd{display:flex;align-items:center;gap:8px;min-height:46px;padding:0 6px 0 16px}
.pnl-r .hd{padding:0 16px 0 6px}
.pnl .ttl{flex:1;font:400 14.5px var(--title);letter-spacing:.4px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:opacity .25s}
.pnl-r .ttl{text-align:right}
.pnl.min .ttl{opacity:0}
.pt{all:unset;cursor:pointer;position:relative;flex:none;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;color:var(--brass);
  background:rgba(210,169,90,.12);border:1px solid rgba(210,169,90,.38);transition:background .2s,border-color .2s}
.pt:hover{background:rgba(210,169,90,.3);border-color:var(--brass)}
.pt:focus-visible{outline:2px solid var(--acid);outline-offset:2px}
.pt svg{position:absolute;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:opacity .3s,transform var(--dur) var(--ease)}
.pt .ic{opacity:0;transform:scale(.55) rotate(-40deg)}
.pnl.min .pt .ic{opacity:1;transform:none}
.pt .ch{opacity:1;transform:none}
.pnl.min .pt .ch{opacity:0;transform:scale(.55)}
.pnl-r .pt .ch{transform:scaleX(-1)}
.pnl-r.min .pt .ch{transform:scaleX(-1) scale(.55)}

/* тело окна: высота плавно схлопывается */
.pnl .bd{display:grid;grid-template-rows:1fr;transition:grid-template-rows var(--dur) var(--ease),visibility 0s 0s}
.pnl .bd>.in{min-height:0;overflow:hidden;padding:0 16px 14px;transition:padding var(--dur) var(--ease)}
.pnl.min .bd{grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows var(--dur) var(--ease),visibility 0s var(--dur)}
.pnl.min .bd>.in{padding-bottom:0}
.pnl.min{box-shadow:0 8px 22px rgba(0,0,0,.4)}
body.noanim .pnl,body.noanim .pnl *{transition:none!important}

/* сброс прежних правил «одной большой панели» */
.pnl .sec{margin:0;padding:0;border:0}
.pnl .in>.sec#demo{margin-top:12px;padding-top:10px;border-top:1px solid rgba(210,169,90,.2)}
.pnl .in>h1{margin-top:0}
#rose{padding:0;text-align:center;border:0;background:none;box-shadow:none;backdrop-filter:none}
#hits{padding:0;max-height:clamp(84px,calc(100vh - 640px),340px);overflow:auto;scrollbar-width:thin;scrollbar-color:rgba(210,169,90,.5) transparent;border:0;background:none;box-shadow:none;backdrop-filter:none}
.fc-top{display:flex;justify-content:space-between;align-items:center;font-size:12.5px;color:var(--ink-2);margin-bottom:6px}
.fc-top #fcLbl{color:var(--ink);font-weight:700}
.fc-top .lnk{float:none}

/* кнопка справки о веществах */
.tox-btn{all:unset;box-sizing:border-box;cursor:pointer;margin-top:12px;display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;border-radius:12px;
  border:1px solid rgba(157,255,98,.55);background:linear-gradient(135deg,rgba(95,191,74,.3),rgba(95,191,74,.1));color:#dcffc4;font:700 12.5px/1.25 var(--sans);transition:background .2s,box-shadow .2s}
.tox-btn i{flex:none;width:24px;height:14px;border-radius:8px;background:linear-gradient(90deg,rgba(120,235,60,.95),rgba(120,235,60,.15))}
.tox-btn:hover{background:linear-gradient(135deg,rgba(95,191,74,.5),rgba(95,191,74,.2));box-shadow:0 0 18px rgba(120,235,60,.25)}
.tox-btn:focus-visible,.lg-tox:focus-visible{outline:2px solid var(--acid);outline-offset:2px}
.lg-tox{all:unset;cursor:pointer;display:flex;align-items:center;gap:7px;color:var(--acid);font-weight:700;border-bottom:1px dotted rgba(157,255,98,.7);white-space:nowrap}
.lg-tox:hover{color:#fff}
.lg-tox i{width:22px;height:10px;border-radius:6px}

/* окно справки */
.mdl{position:fixed;inset:0;z-index:3000;display:none;align-items:center;justify-content:center;padding:18px;background:rgba(8,5,2,.93);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);opacity:0;transition:opacity .35s}
.mdl.open{display:flex}
.mdl.show{opacity:1}
.mc{position:relative;width:min(780px,100%);max-height:min(88vh,860px);display:flex;flex-direction:column;border-radius:16px;border:1px solid var(--panel-b);background:#21160e;box-shadow:0 30px 80px rgba(0,0,0,.7),0 0 0 1px rgba(210,169,90,.25);
  transform:translateY(14px) scale(.98);transition:transform .45s var(--ease)}
.mdl.show .mc{transform:none}
.tx-hd{display:flex;align-items:flex-start;gap:12px;padding:18px 20px 12px;border-bottom:1px solid rgba(210,169,90,.25)}
.tx-hd h2{margin:0;flex:1;font:400 24px/1.1 var(--title);color:var(--ink)}
.tx-hd h2 em{font-style:normal;color:var(--acid)}
#rodinModal .tx-hd h2 em{color:#e0281f}
.tx-x{all:unset;cursor:pointer;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;color:var(--ink-2);border:1px solid rgba(210,169,90,.35);font-size:20px;line-height:1}
.tx-x:hover{color:var(--ink);background:rgba(210,169,90,.2)}
.tx-x:focus-visible{outline:2px solid var(--acid);outline-offset:2px}
.tx-bd{overflow:auto;padding:14px 20px 20px;scrollbar-width:thin;scrollbar-color:rgba(210,169,90,.5) transparent;color:#e2d4b0;font-size:13.5px;line-height:1.55}
.tx-lead{margin:0 0 12px;padding:10px 12px;border-radius:10px;background:#2e2014;border:1px solid rgba(255,236,190,.14);color:var(--ink)}
.tx-lead b{color:var(--acid)}
.sb{margin:8px 0;border:1px solid rgba(210,169,90,.3);border-radius:12px;background:#291c11;overflow:hidden}
.sb summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:10px;padding:10px 12px;font-weight:700;color:var(--ink)}
.sb summary::-webkit-details-marker{display:none}
.sb summary::after{content:"+";margin-left:auto;color:var(--brass);font-size:18px;line-height:1;transition:transform .3s}
.sb[open] summary::after{transform:rotate(45deg)}
.sb summary:focus-visible{outline:2px solid var(--acid);outline-offset:-2px}
.sb .nm{flex:1}
.sb .nm small{display:block;font-weight:500;font-size:11.5px;color:var(--ink-3)}
.badge{flex:none;font-size:10.5px;font-weight:700;padding:2px 8px;border-radius:999px;border:1px solid rgba(255,236,190,.25);color:var(--ink-2);white-space:nowrap}
.badge.ok{border-color:rgba(157,255,98,.6);color:#c9f7a5;background:rgba(95,191,74,.15)}
.badge.mid{border-color:rgba(255,210,74,.6);color:#ffe28a;background:rgba(255,210,74,.1)}
.badge.low{border-color:rgba(255,236,190,.25);color:var(--ink-3)}
.sb-in{padding:2px 14px 12px;display:grid;gap:7px}
.sb-in p{margin:0}
.sb-in b{color:var(--ink);font-weight:700}
.sb-in .src{font-size:12px;color:var(--ink-3)}
.sb-in a{color:var(--acid);text-decoration-color:rgba(157,255,98,.5)}
.tx-note{margin:14px 0 0;font-size:12px;color:var(--ink-3);line-height:1.5}
.tx-wait{padding:20px;text-align:center;color:var(--ink-3)}

.pnl-ph{display:none}
/* телефон: все окна — значки в одну колонку слева; развёрнутое окно открывается правее значков (колонка остаётся видна), открыто не больше одного */
@media (max-width:820px){
  :root{--wl:100%;--wr:100%}
  #left.col,#right.col{left:8px;right:auto;width:44px;max-height:none;padding:0;gap:8px;overflow:visible;flex-direction:column;align-items:flex-start;bottom:auto}
  #left.col{top:58px}
  #right.col{top:calc(58px + 5 * 52px)}                          /* под пятью значками левой группы */
  #left.col~#right.col{display:flex!important}
  #left.col>.pnl,#right.col>.pnl{width:auto}
  .pnl-l.min,.pnl-r.min{transform:none}
  .pnl.min{width:44px!important;height:44px;border-radius:12px;box-shadow:0 4px 14px rgba(0,0,0,.5)}
  .pnl.min .hd,.pnl-r.min .hd{min-height:44px;padding:0;justify-content:center}
  .pnl.min .ttl{display:none}
  .pnl.min .pt{width:44px;height:44px;border:0;background:none;border-radius:12px}
  .pnl:not(.min){position:fixed;left:60px;right:8px;top:58px;width:auto!important;max-height:calc(100% - var(--rail) - 70px);overflow-y:auto;z-index:1200;box-shadow:0 14px 40px rgba(0,0,0,.65)}
  .pnl:not(.min) .hd{position:sticky;top:0;z-index:2;background:var(--panel)}
  .pnl-r:not(.min) .hd{flex-direction:row-reverse;padding:0 6px 0 16px}
  .pnl-r:not(.min) .ttl{text-align:left}
  .pnl-ph{display:block;flex:none;width:44px;height:44px;border-radius:12px;border:1px dashed rgba(210,169,90,.55);background:rgba(210,169,90,.08)}   /* место открытого окна в колонке значков */
  #hits{max-height:none}
  .tx-hd h2{font-size:19px}
}
@media (max-width:1100px){:root{--wl:292px;--wr:228px}}
@media (prefers-reduced-motion:reduce){:root{--dur:.01s}.mdl,.mc{transition:none}}

/* окно «Книга предложений» (Rodin★Studio): форма */
.rodin-btn{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 13px;border-radius:999px;border:1px solid rgba(255,255,255,.35);background:#1b1b1d;color:#f2f2f2;font:700 12.5px var(--sans);letter-spacing:.2px;white-space:nowrap;transition:background .2s,box-shadow .2s;flex:none}
.rodin-btn .st{color:#e0281f;font-size:14px;line-height:1}
.rodin-btn:hover{background:#2a2a2d;box-shadow:0 0 14px rgba(224,40,31,.35)}
.rodin-btn:focus-visible{outline:2px solid var(--acid);outline-offset:2px}
.rd-lead{margin:0 0 12px;color:var(--ink)}
.rd-form{display:grid;gap:9px}
.rd-form label{display:grid;gap:4px;font-size:12px;color:var(--ink-3);font-weight:700;letter-spacing:.04em}
.rd-form input,.rd-form select,.rd-form textarea{box-sizing:border-box;width:100%;padding:9px 11px;border-radius:9px;border:1px solid rgba(210,169,90,.35);background:rgba(10,6,3,.55);color:var(--ink);font:500 13.5px var(--sans)}
.rd-form textarea{resize:vertical;min-height:90px}
.rd-form input:focus,.rd-form select:focus,.rd-form textarea:focus{outline:2px solid var(--acid);outline-offset:1px;border-color:transparent}
.rd-form select option{background:#1c130c}
.rd-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.rd-send{all:unset;box-sizing:border-box;cursor:pointer;text-align:center;padding:11px 14px;border-radius:11px;background:var(--brass);color:#2a1a08;font:800 13.5px var(--sans);transition:filter .2s}
.rd-send:hover{filter:brightness(1.12)}
.rd-send:disabled{opacity:.55;cursor:default}
.rd-send:focus-visible{outline:2px solid var(--acid);outline-offset:2px}
.rd-st{min-height:18px;font-size:12.5px;line-height:1.45;color:var(--ink-2)}
.rd-st.ok{color:#b6f08a}.rd-st.err{color:#ffd24a}
.rd-fine{font-size:11px;color:var(--ink-3);line-height:1.45}
@media (max-width:700px){}

/* предупреждение при загрузке */
.disc-btn{all:unset;box-sizing:border-box;cursor:pointer;color:var(--ink-2);font:600 12px var(--sans);border-bottom:1px dotted var(--ink-3);white-space:nowrap;flex:none}
.disc-btn:hover{color:var(--ink)}
.disc-btn:focus-visible{outline:2px solid var(--acid);outline-offset:2px}
.dc-list{margin:0 0 14px;padding-left:20px;display:grid;gap:9px}
.dc-list li{padding-left:2px}
.dc-list b{color:var(--ink)}
.dc-ok{display:block;width:100%}

/* нижняя панель: легенда не наезжает на кнопки */
#rail .lgs{flex:1 1 0;min-width:0;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}
#rail .attr{flex:0 1 auto;max-width:300px}
@media (max-width:1600px){#rail .lg-ring{display:none}}
@media (max-width:1380px){#rail .lg-hit{display:none}}
@media (max-width:1180px){#rail .attr{display:none}}
@media (max-width:820px){#rail .rail-r .sk-sw{}}

.clk{cursor:pointer}
h1.clk:hover,.ttl.clk:hover{text-decoration:underline;text-decoration-style:dotted;text-underline-offset:4px}
h1.clk:focus-visible,.ttl.clk:focus-visible{outline:2px solid var(--acid);outline-offset:3px;border-radius:4px}
#rail .rodin-btn{margin-left:2px}

/* «Как читать карту» — строго по центру нижней панели */
#rail .help{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2}
#rail .lgs{flex:0 1 auto;max-width:calc(50% - 110px)}
#rail{justify-content:space-between}
#rail .attr{margin-left:auto}

.lg .rg{width:30px;height:12px;border:0;border-radius:6px;background:linear-gradient(90deg,#8c1530 0 20%,#e0281f 20% 40%,#f08a1c 40% 60%,#e2bc00 60% 80%,#3fae2a 80%)}

.leaflet-pane.leaflet-waterfx-pane,#waterfx{pointer-events:none}
body.sat #waterfx{display:none}

/* подвал: легенда колец всегда читается целиком («… КПО НЕВА»), лишнее скрывается раньше, чем обрезается */
#rail .lgs{-webkit-mask-image:none;mask-image:none;overflow:visible;max-width:calc(50% - 100px);gap:14px}
#rail .lg-ring .t-short{display:none}
@media (max-width:1700px){#rail .lg-hit{display:none}}
@media (max-width:1600px){#rail .lg-ring{display:flex!important}}
@media (max-width:1400px){#rail .lg-ring .t-full{display:none}#rail .lg-ring .t-short{display:inline}}
@media (max-width:1120px){#rail .lg-tox{font-size:11px}}

#rodinModal .mc{width:min(520px,100%)}
#rodinModal .tx-hd h2 small{display:block;margin-top:5px;font:600 12.5px var(--sans);letter-spacing:.3px;color:var(--ink-3)}
#rodinModal .tx-hd h2 small em{font-style:normal;color:#e0281f}

/* окно «Книга предложений»: без жёлтого — кнопка и акценты красные/графитовые */
#rodinModal .rd-send{background:#c4281c;color:#fff}
#rodinModal .rd-send:hover{filter:brightness(1.15)}
#rodinModal .rd-form input:focus,#rodinModal .rd-form select:focus,#rodinModal .rd-form textarea:focus{outline-color:#e0281f}

/* «Важная информация»: заметная кнопка сверху по центру + окно с карточками */
#infoModal .mc{width:min(720px,100%)}
#infoModal .tx-hd h2 em{color:#ff7a6c}
.in-hero{display:flex;gap:14px;align-items:center;padding:12px 14px;border-radius:14px;background:linear-gradient(135deg,#3a1d1a,#2b1a12);border:1px solid rgba(255,122,108,.5);margin-bottom:12px;color:#f1e4c3}
.in-hero img,.in-cat-cv{flex:none;height:96px;width:auto;object-fit:contain;filter:drop-shadow(0 6px 8px rgba(0,0,0,.5))}
.in-cat{flex:none;display:flex;align-items:flex-end;min-width:74px}
.in-cat-cv{height:92px;margin:-6px 0 -4px}
.in-hero b{display:block;font:400 20px var(--title);color:#fff;margin-bottom:3px}
.in-hero span{font-size:13.5px;line-height:1.45}
.in-card{margin:10px 0;padding:12px 14px 6px;border-radius:14px;background:#291c11;border:1px solid rgba(210,169,90,.3)}
.in-card.hot{background:#3a1814;border-color:rgba(255,122,108,.55)}
.in-card h3{display:flex;align-items:center;gap:9px;margin:0 0 6px;font:400 16px var(--title);letter-spacing:.3px;color:#fff}
.in-card h3 svg{width:22px;height:22px;flex:none;fill:none;stroke:var(--brass);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.in-card.hot h3 svg{stroke:#ff7a6c}
.in-row{display:grid;grid-template-columns:26px 1fr;gap:8px;padding:9px 0;border-top:1px dashed rgba(255,236,190,.14);font-size:13.5px;line-height:1.5;color:#e2d4b0}
.in-row:first-of-type{border-top:0}
.in-row>em{font-style:normal;font-weight:800;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:rgba(210,169,90,.2);color:var(--brass);font-size:12px}
.in-row.urgent>em{background:#c4281c;color:#fff}
.in-row b{color:#fff}
.in-row small{display:block;margin-top:4px;color:var(--ink-3);font-size:12px}
.in-act{display:flex;flex-wrap:wrap;gap:8px;margin-top:7px}
.in-tel,.in-lnk{display:inline-flex;align-items:center;gap:7px;padding:6px 11px;border-radius:999px;text-decoration:none;font-weight:700;font-size:13px;border:1px solid rgba(255,236,190,.28);color:#f1e4c3;background:rgba(255,236,190,.07);transition:background .2s,border-color .2s}
.in-tel svg,.in-lnk svg{width:15px;height:15px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.in-tel{border-color:rgba(157,255,98,.55);color:#d3ffb3;background:rgba(95,191,74,.14)}
.in-row.urgent .in-tel,.in-card.hot .in-tel{border-color:#ff7a6c;color:#fff;background:#c4281c}
.in-tel:hover,.in-lnk:hover{filter:brightness(1.2)}
.in-tel:focus-visible,.in-lnk:focus-visible{outline:2px solid var(--acid);outline-offset:2px}
.in-ul{margin:0 0 8px;padding-left:20px;display:grid;gap:4px;color:#e2d4b0;font-size:13.5px;line-height:1.45}
.in-note{margin:12px 0 4px;font-size:12px;color:var(--ink-3);line-height:1.5}

/* поиск населённого пункта — часть окна «Под облаком» (сворачивается вместе с ним) */
#findBox{position:relative;display:block;width:100%;margin:12px 0 0;padding:0;border:0;background:none;box-shadow:none;height:auto;z-index:auto;transform:none;top:auto;left:auto}
#findBox .fb-ic{position:absolute;left:12px;top:11px;width:18px;height:18px;fill:none;stroke:var(--brass);stroke-width:2.2;stroke-linecap:round;cursor:pointer;z-index:1}
#findIn{all:unset;box-sizing:border-box;display:block;width:100%;height:40px;padding:0 12px 0 38px;color:#f6ebd0;font:600 13.5px var(--sans);border-radius:12px;background:rgba(10,6,3,.55);border:1px solid rgba(210,169,90,.5)}
#findIn::placeholder{color:#a8946a}
#findIn:focus-visible{outline:2px solid var(--acid);outline-offset:2px}
#findIn::-webkit-search-cancel-button{display:none}
#findList{position:static;width:100%;max-height:230px;overflow:auto;margin:8px 0 0;padding:4px;list-style:none;border-radius:12px;background:#21160e;border:1px solid rgba(210,169,90,.4);box-shadow:none}
#findList[hidden]{display:none}
#findList li{padding:7px 10px;border-radius:9px;cursor:pointer;color:#e2d4b0;font-size:12.5px;line-height:1.3}
#findList li b{display:block;color:#fff;font-size:13px}
#findList li span{font-size:11px;color:#a8946a}
#findList li.on,#findList li:hover{background:rgba(210,169,90,.22)}
#findList li.none{cursor:default;color:#a8946a}
/* подсветка найденного */
.find-pin{width:0;height:0}
.find-pin i{position:absolute;left:-28px;top:-28px;width:56px;height:56px;border-radius:50%;border:3px solid #19d3ff;box-shadow:0 0 0 2px rgba(0,40,60,.65),0 0 18px #19d3ff;opacity:0;animation:fpulse 1.8s ease-out infinite}
.find-pin i:nth-child(2){animation-delay:.6s}.find-pin i:nth-child(3){animation-delay:1.2s}
@keyframes fpulse{0%{transform:scale(.25);opacity:.95}100%{transform:scale(1.9);opacity:0}}
.vil.found .lbl{display:block!important;font-size:14px;font-weight:800;color:#00323f;-webkit-text-stroke:5px #c9f6ff;paint-order:stroke fill;z-index:5}
.vil.found svg{filter:drop-shadow(0 0 4px #19d3ff) drop-shadow(0 0 10px #19d3ff);transform:scale(1.35)}
@media (prefers-reduced-motion:reduce){.find-pin i{animation:none;opacity:.8;transform:scale(1)}}

/* подсказки на карте не сжимаются в узкую колонку */
.leaflet-tooltip{width:max-content;max-width:290px;white-space:normal;line-height:1.4}

/* неизвестные земли за границей данных */
#fog{position:absolute;inset:0;z-index:450;pointer-events:none;overflow:hidden}
#fog .fg{position:absolute;display:none;
  background:var(--fog-noise),radial-gradient(ellipse at 50% 50%,#3a2c1d 0%,#241a11 70%,#1a120b 100%);
  background-size:512px 512px,100% 100%;background-blend-mode:screen,normal;animation:fogdrift 140s linear infinite;
  backdrop-filter:blur(7px) saturate(.7);-webkit-backdrop-filter:blur(7px) saturate(.7);
  -webkit-mask-image:linear-gradient(var(--d,to bottom),#000 calc(100% - var(--f,90px)),rgba(0,0,0,.78) calc(100% - var(--f,90px) * .78),rgba(0,0,0,.4) calc(100% - var(--f,90px) * .42),rgba(0,0,0,.12) calc(100% - var(--f,90px) * .16),transparent 100%);
  mask-image:linear-gradient(var(--d,to bottom),#000 calc(100% - var(--f,90px)),rgba(0,0,0,.78) calc(100% - var(--f,90px) * .78),rgba(0,0,0,.4) calc(100% - var(--f,90px) * .42),rgba(0,0,0,.12) calc(100% - var(--f,90px) * .16),transparent 100%)}
#fog .fg-b{animation-direction:reverse;animation-duration:170s}
#fog .fg-r{animation-duration:190s}
#fog .fg-lbl{position:absolute;left:50%;top:calc(50% - var(--f,90px) / 2);transform:translate(-50%,-50%);font:italic 600 15px var(--serif);letter-spacing:.18em;text-transform:uppercase;color:rgba(235,222,196,.34);white-space:nowrap;text-shadow:0 0 12px rgba(0,0,0,.6)}
#fog .fg-b .fg-lbl{top:calc(50% + var(--f,90px) / 2)}
#fog .fg-l .fg-lbl,#fog .fg-r .fg-lbl{writing-mode:vertical-rl;left:calc(50% - var(--f,90px) / 2);top:50%}
#fog .fg-r .fg-lbl{left:calc(50% + var(--f,90px) / 2)}
@keyframes fogdrift{from{background-position:0 0,0 0}to{background-position:512px 256px,0 0}}
body.sat #fog{display:none}
@media (prefers-reduced-motion:reduce){#fog .fg{animation:none}}

/* «Важная информация» — кнопка в стиле сайта над розой ветров */
#infoBtn{all:unset;box-sizing:border-box;cursor:pointer;pointer-events:auto;flex:none;width:var(--wr);display:flex;align-items:center;gap:11px;min-height:46px;padding:0 14px 0 10px;border-radius:14px;
  background:linear-gradient(#3b2a18,#251a0f);border:1px solid var(--panel-b);box-shadow:0 12px 36px rgba(0,0,0,.5),inset 0 0 0 1px rgba(255,236,190,.05);color:var(--ink);font:400 14px var(--title);letter-spacing:.2px;white-space:nowrap;transition:background .2s,border-color .2s}
#infoBtn .ib-ic{display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:9px;background:rgba(210,169,90,.14);border:1px solid rgba(210,169,90,.45);color:var(--brass)}
#infoBtn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#infoBtn:hover{background:linear-gradient(#4a3520,#30220f);border-color:var(--brass)}
#infoBtn:focus-visible{outline:2px solid var(--acid);outline-offset:2px}
@media (max-width:820px){#infoBtn{position:fixed;z-index:1075;top:auto;bottom:calc(var(--rail) + 8px);left:8px;width:auto;min-height:40px;font-size:13.5px;padding:0 13px 0 8px}}

/* пока идёт поиск, подсказки занимают место списка «Под облаком» */
.pnl.searching #hits{display:none}
.pnl.searching #findList{max-height:clamp(80px,calc(100vh - 628px),210px)}