/* Каркас: верхняя панель, карта на весь экран, боковая панель (на телефоне — шторка), страницы поверх карты. */
.topbar{position:fixed;inset:0 0 auto 0;height:var(--bar-h);z-index:30;display:flex;align-items:center;gap:18px;padding:0 18px 0 16px;background:var(--paper);border-bottom:1px solid var(--line);box-shadow:0 1px 0 var(--paper-3) inset}
.topbar::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;background:var(--hatch);opacity:.9;pointer-events:none}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;flex:none}
.brand .compass{width:34px;height:34px;color:var(--ink)}
.brand .needle{transform-origin:24px 24px;transform:rotate(var(--bearing,0deg));transition:transform .9s cubic-bezier(.3,1.6,.5,1)}
.brand:hover .needle{animation:wobble 1.4s ease-in-out infinite}
.brand-name{font:700 25px/1 var(--serif);letter-spacing:-.02em}
@keyframes wobble{0%,100%{transform:rotate(calc(var(--bearing,0deg) - 7deg))}50%{transform:rotate(calc(var(--bearing,0deg) + 9deg))}}
.compass.settle .needle{animation:settle 1.1s cubic-bezier(.2,.9,.3,1)}
@keyframes settle{0%{transform:rotate(calc(var(--bearing,0deg) + 28deg))}35%{transform:rotate(calc(var(--bearing,0deg) - 16deg))}60%{transform:rotate(calc(var(--bearing,0deg) + 7deg))}100%{transform:rotate(var(--bearing,0deg))}}

.search{position:relative;flex:1 1 360px;max-width:520px;display:flex;align-items:center;background:var(--paper-3);border:1px solid var(--line-2);border-radius:999px;padding:0 6px 0 14px;height:42px;transition:border-color .15s,box-shadow .15s}
.search:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}
.search input{flex:1;min-width:0;border:0;background:transparent;outline:0;height:100%;padding:0 10px;font-size:15px}
.search input::placeholder{color:var(--ink-3)}
.search input::-webkit-search-cancel-button{display:none}
.search-x{width:34px;height:34px;border-radius:50%;border:0;background:transparent;color:var(--ink-3);display:grid;place-items:center}
.search-x:hover{background:var(--paper-2);color:var(--ink)}
.search-results{position:absolute;left:0;right:0;top:calc(100% + 8px);background:var(--paper-3);border:1px solid var(--line-2);border-radius:var(--r);box-shadow:var(--shadow);max-height:min(70vh,520px);overflow:auto;padding:6px;z-index:40}
.nav{display:flex;gap:2px;margin-left:auto}
.nav a{padding:9px 14px;border-radius:999px;color:var(--ink-2);text-decoration:none;font-weight:500;font-size:15px;position:relative;min-height:40px;display:flex;align-items:center}
.nav a:hover{background:var(--paper-2);color:var(--ink)}
.nav a[aria-current=page]{color:var(--ink);font-weight:650}
.nav a[aria-current=page]::after{content:"";position:absolute;left:14px;right:14px;bottom:3px;height:2px;border-radius:2px;background:var(--accent)}
.bar-actions{display:flex;align-items:center;gap:6px;flex:none}
.menu-btn{display:none}
.menu{position:absolute;right:12px;top:calc(var(--bar-h) + 6px);width:min(300px,calc(100vw - 24px));background:var(--paper-3);border:1px solid var(--line-2);border-radius:var(--r);box-shadow:var(--shadow);padding:8px;z-index:45}
.menu a,.menu button{display:flex;align-items:center;gap:12px;width:100%;min-height:46px;padding:0 14px;border:0;background:transparent;border-radius:10px;color:var(--ink);text-decoration:none;font-weight:500;text-align:left}
.menu a:hover,.menu button:hover{background:var(--paper-2)}
.menu .sep{height:1px;background:var(--line);margin:6px 4px}

.app{position:fixed;inset:var(--bar-h) 0 0 0;overflow:hidden}
.map{position:absolute;inset:0;background:var(--paper-2)}
.map .maplibregl-canvas{outline:0}
.maplibregl-ctrl-attrib{background:color-mix(in srgb,var(--paper) 82%,transparent)!important;font:11px/1.4 var(--sans)!important;color:var(--ink-2)!important;border-radius:8px 0 0 0}
.maplibregl-ctrl-attrib a{color:var(--ink-2)!important}
.maplibregl-ctrl-attrib-button{display:none!important}
.maplibregl-ctrl-bottom-right{right:0}

.panel{position:absolute;z-index:10;left:14px;top:14px;bottom:14px;width:var(--panel-w);background:var(--paper);border:1px solid var(--line-2);border-radius:20px;box-shadow:var(--shadow);display:flex;flex-direction:column;overflow:hidden;transition:transform .45s cubic-bezier(.2,.9,.25,1)}
.panel::before{content:"";position:absolute;inset:0;background:var(--grain);opacity:.45;pointer-events:none;mix-blend-mode:multiply;z-index:0}
[data-theme=night] .panel::before{mix-blend-mode:screen;opacity:.1}
.panel>*{position:relative;z-index:1}
.sheet-grab{display:none}
.panel-head{padding:16px 18px 10px;border-bottom:1px solid var(--line);background:linear-gradient(var(--paper),color-mix(in srgb,var(--paper) 94%,transparent));flex:none}
.panel-body{flex:1;overflow-y:auto;overscroll-behavior:contain;scroll-behavior:smooth;padding:12px 14px 22px;scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}

.map-ctl{position:absolute;z-index:8;right:14px;bottom:34px;display:flex;flex-direction:column;gap:8px;transition:bottom .35s cubic-bezier(.2,.9,.25,1)}
.map-btn{width:46px;height:46px;border-radius:14px;border:1px solid var(--line-2);background:var(--paper-3);color:var(--ink);display:grid;place-items:center;box-shadow:var(--shadow);transition:transform .15s,background .15s}
.map-btn:hover{background:var(--paper-2)}
.map-btn:active{transform:scale(.94)}
.map-btn.accent{background:var(--accent);border-color:var(--accent-2);color:#fff}
.map-btn.accent:hover{background:var(--accent-2)}
.map-btn.spin .ico{animation:dice .7s cubic-bezier(.3,1.4,.5,1)}
@keyframes dice{0%{transform:rotate(0) scale(1)}60%{transform:rotate(300deg) scale(1.2)}100%{transform:rotate(360deg) scale(1)}}
.map-note{position:absolute;z-index:8;left:50%;top:18px;transform:translateX(-50%);background:var(--ink);color:var(--paper);border-radius:999px;padding:6px 16px 7px;font-size:21px;box-shadow:var(--shadow);max-width:calc(100% - 40px);text-align:center}

.page{position:absolute;inset:0;z-index:20;overflow-y:auto;background:var(--paper);overscroll-behavior:contain;animation:pagein .35s cubic-bezier(.2,.9,.25,1)}
.page::before{content:"";position:fixed;inset:var(--bar-h) 0 0 0;background:var(--grain);opacity:.4;pointer-events:none;mix-blend-mode:multiply}
[data-theme=night] .page::before{mix-blend-mode:screen;opacity:.08}
@keyframes pagein{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.splash{position:fixed;inset:0;z-index:100;display:grid;place-items:center;background:var(--paper) url(/img/hero-atlas.webp) center/cover no-repeat;transition:opacity .6s ease,visibility .6s}
.splash::before{content:"";position:absolute;inset:0;background:color-mix(in srgb,var(--paper) 78%,transparent)}
.splash.gone{opacity:0;visibility:hidden}
.splash-in{position:relative;text-align:center;color:var(--ink)}
.splash-compass{width:84px;height:84px;margin:0 auto 6px;color:var(--ink)}
.splash-compass .spin{transform-origin:24px 24px;animation:spin 2.4s cubic-bezier(.5,0,.3,1) infinite}
@keyframes spin{0%{transform:rotate(-40deg)}50%{transform:rotate(200deg)}100%{transform:rotate(320deg)}}
.splash-title{font:700 46px/1 var(--serif);letter-spacing:-.02em}
.splash-sub{font-size:26px;color:var(--ink-2);margin-top:4px}

@media (max-width:1100px){.nav a{padding:9px 10px}.search{flex-basis:260px}}
@media (max-width:900px){
  .nav{display:none}.menu-btn{display:grid}.acct span{display:none}.acct{padding:0;width:42px;justify-content:center}
  .topbar{gap:10px;padding:0 10px}
  .search{flex:1 1 0;min-width:0;max-width:none}
  .brand-name{display:none}
}
/* Телефон: боковая панель превращается в нижнюю шторку с тремя положениями */
@media (max-width:760px){
  :root{--bar-h:56px}
  .bar-actions #theme{display:none}
  .search{height:40px}
  .panel{left:0;right:0;top:auto;bottom:0;width:auto;height:calc(100% - 8px);border-radius:22px 22px 0 0;border-width:1px 0 0;transform:translateY(calc(100% - var(--visible,150px) - env(safe-area-inset-bottom,0px)));transition:transform .42s cubic-bezier(.2,.9,.25,1);padding-bottom:env(safe-area-inset-bottom,0)}
  .panel.dragging{transition:none}
  .sheet-grab{display:grid;place-items:center;height:26px;flex:none;touch-action:none;cursor:grab;position:relative;z-index:2}
  .sheet-grab span{width:44px;height:5px;border-radius:5px;background:var(--line-2)}
  .panel-head{padding:0 14px 8px}
  .panel-body{padding:10px 12px 28px;touch-action:pan-y}
  .panel:not(.is-full) .panel-body{overflow:hidden}
  .map-ctl{bottom:calc(var(--visible,150px) + 14px);right:10px}
  .map-btn{width:44px;height:44px}
  .maplibregl-ctrl-bottom-left,.maplibregl-ctrl-bottom-right{bottom:calc(var(--visible,150px) + 2px)}
}
.panel-body:focus,.page:focus{outline:0}