/* Живая карта по нажатию на схему (js/karta.js). До нажатия на странице только схема .map-stub из каркаса и кнопка «Открыть карту»;
   после нажатия на месте схемы - карта района своими плитками (site/img/karta/, нарисованы нами по данным OpenStreetMap сразу в
   красках сайта: старый план города на состаренной бумаге). К чужим серверам карта не обращается.
   Подключается вместе со скриптом: styles: karta.css, scripts: js/karta.js. */
.map-stub.karta-ready .map-art{cursor:pointer}
.karta-open{position:absolute;z-index:2;right:12px;top:12px;padding:3px;background:linear-gradient(175deg,#f3e6c4,#e6d5aa);border:2px solid #c59a4a;box-shadow:0 0 0 1px #5f4016,0 6px 14px rgba(40,26,8,.35);color:#2a1a08;cursor:pointer;transition:filter .25s}
.karta-open span{display:block;padding:8px 14px 9px;border:1px solid rgba(90,58,30,.34);font-family:var(--text);font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;line-height:1.2;white-space:nowrap}
.karta-open:hover{filter:brightness(1.06)}
.karta-open:focus-visible,.karta-b:focus-visible{outline:2px solid #5a1a0c;outline-offset:2px}
.map-stub.karta-on .map-art,.map-stub.karta-on .karta-open{display:none}

.karta{position:absolute;inset:0;overflow:hidden;background:#e6d6ad}
.karta-view{position:absolute;inset:0;overflow:hidden;touch-action:none;cursor:grab;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
.karta-view.drag{cursor:grabbing}
.karta-view:focus-visible{outline:2px solid #5a1a0c;outline-offset:-4px}
.karta-layer{position:absolute;left:0;top:0;width:0;height:0;will-change:transform}
/* плитки нарисованы сразу в красках листа (tools/karta_risovat.py) - приглушать и накладывать их больше не нужно */
.karta-tiles img{position:absolute;width:256px;height:256px;max-width:none;opacity:0;transition:opacity .35s ease;pointer-events:none;-webkit-user-drag:none}
.karta-tiles img.ok{opacity:1}
.karta::after{content:"";position:absolute;inset:6px;border:1px solid rgba(90,58,30,.5);pointer-events:none;z-index:2}      /* тонкая рамка плана, как у схемы */
.karta-pin{position:absolute;width:44px;height:64px;margin:-61px 0 0 -22px;pointer-events:none;filter:drop-shadow(0 3px 3px rgba(40,26,8,.35))}
.karta-pin svg{display:block;width:100%;height:100%;overflow:visible}

.karta-ctl{position:absolute;z-index:3;right:12px;top:12px;display:grid;gap:6px}
.karta-b{display:grid;place-items:center;width:44px;height:44px;padding:0;background:linear-gradient(175deg,#f3e6c4,#e6d5aa);border:2px solid #c59a4a;box-shadow:0 0 0 1px #5f4016,0 4px 10px rgba(40,26,8,.3);color:#2a1a08;font-family:var(--serif);font-weight:600;font-size:1.7rem;line-height:1;cursor:pointer;transition:filter .25s}
.karta-b:hover{filter:brightness(1.07)}
.karta-b[disabled]{color:rgba(42,26,8,.35);cursor:default;filter:none}
.karta-b svg{width:22px;height:22px}
.karta-x{position:absolute;z-index:3;left:12px;top:12px}
.karta-osm{position:absolute;z-index:3;right:7px;bottom:7px;padding:2px 8px 3px;background:rgba(239,225,189,.94);color:#33240f;font-family:var(--text);font-size:.74rem;line-height:1.3;white-space:nowrap}
.karta-osm a{color:#4a1a0c;border-bottom:1px solid currentColor}
.karta-msg{display:none;position:absolute;z-index:3;left:50%;top:calc((100% - var(--karta-niz,0px)) / 2);transform:translate(-50%,-50%);width:max-content;max-width:calc(100% - 130px);padding:12px 16px;background:linear-gradient(175deg,#f3e6c4,#e6d5aa);border:1px solid #5a3a1e;color:#2a1a08;font-size:1rem;line-height:1.4;text-align:center}
.karta-fail .karta-msg{display:block}
.karta-fail .karta-pin{display:none}

@media (max-width:699px){
  .map-stub.karta-on{min-height:min(76svh,560px)!important}          /* на телефоне плашка с адресом занимает низ - живой карте даём больше высоты (перекрывает высоту схемы, заданную страницей) */
  .karta-open{right:10px;top:10px}
  .karta-ctl{right:10px;top:10px}
  .karta-x{left:10px;top:10px}
}