/* =========================================================================
   Атлас помогающих профессий · Waykeeper site-v2 · стили БОЛЬШОЙ КАРТЫ (atlas-map.html)
   Движок карты — assets/pages/atlas-map.js. Токены (цвета семей, шкала, поверхности)
   и стили вики атласа — assets/pages/atlas-wiki.css: он подключается раньше этого файла.
   Палитра — как в site-v1 (белая страница, холодная дымка, текст #0F1722, огонёк только
   «ты здесь»). Без стилизации под старую карту: ни бумаги, ни двойной рамки.
   Размеры шрифта — только токены --s1…--s5 (26.10.2026: размеры карты сведены к ним).
   ========================================================================= */

/* ---------- знаки и метки (общие с панелью карты) ---------- */
/* ---------- знаки и метки ---------- */
.tags{display:flex; flex-wrap:wrap; gap:6px}
.tag{display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border:1px solid var(--line-2); border-radius:var(--r-pill); font:400 var(--s5)/1.3 var(--f-text); color:var(--ink-2); background:transparent; white-space:nowrap; text-decoration:none; cursor:default}
a.tag,button.tag{cursor:pointer}
a.tag:hover,button.tag:hover{border-color:var(--ink); color:var(--ink)}
.tag i{width:8px; height:8px; border-radius:50%; flex:none}
.tag.strong{border-color:var(--ink-2); color:var(--ink)}
.tag.warm{border-style:dashed}
.tag.warn{border-style:dashed; border-color:var(--ink-2); color:var(--ink); white-space:normal}
.fam-dot{display:inline-block; width:10px; height:10px; border-radius:50%; flex:none; vertical-align:-1px}
.icons{display:inline-flex; gap:3px; color:var(--ink-3)}
.icons svg{width:13px; height:13px}
.label.on-paper{color:var(--ink-3)}
.q-mark{display:inline-block; cursor:help; color:var(--ink-3); font-size:var(--s5); vertical-align:.1em; margin-inline:.05em}
sup.ref a{font-size:var(--s5); padding:0 3px; text-decoration:none; color:var(--ink-2); border-bottom:1px solid var(--line-2)}
.term{text-decoration:none; border-bottom:1px dotted var(--ink-3); cursor:help; color:inherit}
.term:hover{border-bottom-color:var(--ink)}
.chip{display:inline-flex; align-items:center; gap:6px; min-height:32px; padding:4px 12px; border:1px solid var(--line-2); border-radius:var(--r-pill); background:transparent; color:var(--ink-2); font:400 var(--s5)/1.2 var(--f-text); white-space:nowrap; cursor:pointer; text-decoration:none; transition:background .2s, border-color .2s}
.chip:hover{border-color:var(--ink); color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--ink); color:var(--page); border-color:var(--ink)}
.chip small{color:var(--ink-3)}
.chip[aria-pressed="true"] small{color:inherit; opacity:.8}
.seg{display:inline-flex; gap:2px; padding:2px; border:1px solid var(--line-2); border-radius:var(--r-pill)}
.seg button{min-height:34px; border:0; background:transparent; border-radius:var(--r-pill); padding:4px 14px; font:400 var(--s5)/1.2 var(--f-text); color:var(--ink-2); white-space:nowrap; cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--ink); color:var(--page)}
select.sel{font:400 var(--s5)/1.2 var(--f-text); min-height:36px; border:1px solid var(--line-2); border-radius:var(--r-pill); padding:6px 30px 6px 14px; background:transparent; color:var(--ink); appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),linear-gradient(135deg,var(--ink-3) 50%,transparent 50%); background-position:calc(100% - 16px) 52%,calc(100% - 11px) 52%; background-size:5px 5px; background-repeat:no-repeat}
.q{flex:1 1 220px; min-width:0; display:flex; align-items:center; gap:8px; min-height:44px; padding:0 14px; border:1px solid var(--line-2); border-radius:var(--r-pill); background:var(--c-surface); color:var(--ink-3)}
.q:focus-within{border-color:var(--ink)}
.q input{flex:1; min-width:0; border:0; background:transparent; font:400 var(--s4)/1.3 var(--f-text); color:var(--ink); outline:none; height:100%}
.reqs{display:grid; gap:0; margin:0; padding:0; list-style:none; border-top:1px solid var(--line)}
.reqs li{padding:9px 0; border-bottom:1px solid var(--line); font-size:var(--s4); line-height:1.45; color:var(--ink)}
.reqs li .muted{font-size:var(--s5); color:var(--ink-3)}

/* ===================== большая карта ===================== */
.atlas-host{position:relative; min-height:clamp(540px, 82svh, 860px)}
.atlas-host > [data-boot]{position:absolute; inset:0; display:grid; place-items:center; border:1px solid var(--line-2); border-radius:var(--r-plate); background:var(--c-map-bg)}
.atlas{position:relative; height:clamp(540px, 82svh, 860px); overflow:hidden; background:var(--c-map-bg); -webkit-user-select:none; user-select:none; font-family:var(--f-text); --panel-w:min(400px,42vw); --drawer-l:92px; --drawer-w:340px}
body.atlas-immersive .atlas{position:fixed; inset:0; height:auto; z-index:150; border:0; outline:0; border-radius:0}
.a-stage{position:absolute; inset:0; touch-action:pan-y; cursor:grab; outline:none; background-image:radial-gradient(rgba(15,23,34,.13) 1px,transparent 1.3px); background-size:22px 22px}
body.atlas-immersive .a-stage{touch-action:none}
.a-stage:focus-visible{box-shadow:inset 0 0 0 2px var(--ink)}
.a-stage.grabbing{cursor:grabbing}
.a-svg{position:absolute; inset:0; width:100%; height:100%; overflow:visible}

.a-halo{fill:var(--c-surface); opacity:.5}
.a-cell{fill:var(--fc); fill-opacity:var(--o); stroke:var(--c-map-bg); stroke-width:calc(3px / var(--k)); cursor:pointer; transition:fill-opacity .25s}
.a-cell:hover,.a-cell.hl-h{fill-opacity:calc(var(--o) + .1)}
.a-cell.heat.zero{fill:var(--c-surface); fill-opacity:.5}
.a-cells.fresh{animation:a-fade .6s var(--ease) backwards}
.a-sup{fill:var(--fam-support); fill-opacity:.1; cursor:pointer; transition:fill-opacity .2s}
.a-sup:hover,.a-sup.hl-h,.a-sup.hl{fill-opacity:.24}
.a-ringline{fill:none; stroke:var(--line-2); stroke-width:calc(1px / var(--k))}
.a-dopusk{fill:none; stroke:var(--ink); stroke-opacity:.7; stroke-width:calc(1.6px / var(--k)); stroke-dasharray:calc(6px / var(--k)) calc(5px / var(--k))}
.a-dopusk.flash{stroke:var(--accent-text); animation:a-flash 1.1s var(--ease) 4}
@keyframes a-flash{50%{stroke-width:calc(6px / var(--k)); stroke-opacity:1}}
.a-core{fill:var(--c-surface); stroke:var(--line-2); stroke-width:calc(1px / var(--k)); transition:stroke .25s}
.a-core.hl{stroke:var(--ink); stroke-width:calc(2.5px / var(--k))}
.a-island{fill:var(--c-surface); fill-opacity:.6; stroke:var(--ink-3); stroke-width:calc(1.4px / var(--k)); stroke-dasharray:calc(6px / var(--k)) calc(5px / var(--k)); cursor:pointer}
.a-island:hover,.a-island.hl-h,.a-island.hl{fill-opacity:.95}
.a-link{fill:none; stroke:var(--lc, var(--accent)); stroke-width:calc(1.8px / var(--k)); stroke-opacity:.8; stroke-linecap:round; animation:a-fade .35s var(--ease) backwards}
.a-link.confused{stroke-dasharray:calc(5px / var(--k)) calc(4px / var(--k))}
.a-links.preview .a-link{stroke-opacity:.45; stroke-width:calc(1.4px / var(--k))}
@keyframes a-fade{from{opacity:0}}
.atlas.spot .a-cell:not(.hl){fill-opacity:.025}
.atlas.spot .a-cell.hl{fill-opacity:calc(var(--o) + .12)}
.atlas.spot .a-sup:not(.hl),.atlas.spot .a-island:not(.hl){opacity:.35}
.atlas.spot .a-pin:not(.lit){opacity:.12}

.a-labels,.a-pins{position:absolute; inset:0; pointer-events:none}
.a-fix{position:absolute; left:0; top:0; white-space:nowrap; pointer-events:none}
.a-famlab button{pointer-events:auto; display:grid; gap:1px; text-align:left; min-height:36px; padding:4px 8px; border:0; border-radius:4px; background:transparent; color:var(--ink); cursor:pointer; transition:background .2s}
.a-famlab button:hover{background:var(--c-surface)}
.a-famlab b{display:flex; align-items:center; gap:7px; font:400 var(--s4)/1.25 var(--f-head)}
.a-famlab i{width:10px; height:10px; border-radius:50%; flex:none}
.a-famlab small{font:400 var(--s5)/1.23 var(--f-text); color:var(--ink-3); padding-left:17px}
.a-famlab.ar button{text-align:right} .a-famlab.ar b{justify-content:flex-end} .a-famlab.ar small{padding-left:0}
.a-famlab.ac button{text-align:center} .a-famlab.ac b{justify-content:center} .a-famlab.ac small{padding-left:0}
.a-lvl{padding:0 7px; border-radius:var(--r-pill); background:var(--c-map-bg); font:500 var(--s5)/1.54 var(--f-text); color:var(--ink-2)}
.a-suplab{color:var(--fam-support)}
.a-dop{padding:0 8px; border-radius:var(--r-pill); background:var(--c-map-bg); box-shadow:0 0 0 1px var(--line-2); font:400 var(--s5)/1.38 var(--f-text); color:var(--ink)}
.a-center,.a-islab{display:grid; text-align:center; line-height:1.25}
.a-center b{font:400 var(--s4)/1.2 var(--f-head); color:var(--ink)}
.a-center small{font-size:var(--s5); color:var(--ink-3)}
.a-islab b{font:400 var(--s4)/1.19 var(--f-head); color:var(--ink)}
.a-islab small{font:400 var(--s5)/1.23 var(--f-text); color:var(--ink-3)}
.a-isnote{font:italic 400 var(--s5)/1.15 var(--f-text); color:var(--ink-3); text-align:center}
.a-cap{padding:0 5px; font:500 var(--s5)/1.38 var(--f-text); color:var(--ink-2); text-shadow:0 0 3px var(--c-map-bg),0 0 3px var(--c-map-bg)}

.a-pin{position:absolute; left:0; top:0; width:0; height:0; padding:0; border:0; background:none; pointer-events:auto; outline:none; z-index:1; transition:opacity .25s}
.a-dot{position:absolute; left:-5.5px; top:-5.5px; width:11px; height:11px; border-radius:50%; background:var(--pc); box-shadow:0 0 0 2px var(--c-surface); transition:transform .15s, box-shadow .15s, background .25s; animation:a-pop .55s var(--ease) backwards; animation-delay:var(--d,0ms)}
.a-dot::before{content:""; position:absolute; inset:-11px; border-radius:50%}
@keyframes a-pop{from{transform:scale(0); opacity:0}}
.a-pin:hover{z-index:4}
.a-pin:hover .a-dot{transform:scale(1.35)}
.a-pin:focus-visible{z-index:4}
.a-pin:focus-visible .a-dot{outline:2px solid var(--ink); outline-offset:3px}
.a-pin.no .a-dot{background:var(--c-surface); box-shadow:inset 0 0 0 2px var(--pc),0 0 0 1.5px var(--c-surface)}
.a-pin.hit .a-dot{box-shadow:0 0 0 2px var(--c-surface),0 0 0 3.5px var(--ink)}
.a-pin.rel{z-index:2}
.a-pin.rel .a-dot{box-shadow:0 0 0 2px var(--c-surface),0 0 0 4px var(--accent)}
.a-pin.conf .a-dot{box-shadow:0 0 0 2px var(--c-surface),0 0 0 4px var(--accent-text)}
.a-pin.sel{z-index:3}
.a-pin.sel .a-dot{transform:scale(1.55); box-shadow:0 0 0 2.5px var(--c-surface),0 0 0 5px var(--ink)}
.a-pin.dim{opacity:.22}
.a-pin.dim:hover{opacity:.8}
.a-badge{position:absolute; left:2px; top:-10px; width:9px; height:9px; border-radius:50%; box-shadow:0 0 0 2px var(--c-surface); display:none}
.mk-have .a-badge,.mk-want .a-badge,.mk-learn .a-badge{display:block}
.mk-have .a-badge,.mk.have{background:var(--ink)}
.mk-want .a-badge,.mk.want{background:var(--accent)}
.mk-learn .a-badge,.mk.learn{background:var(--c-surface)}
.mk{display:inline-block; width:9px; height:9px; margin-right:6px; border-radius:50%; flex:none; vertical-align:-1px}
.mk.learn{box-shadow:inset 0 0 0 2px var(--ink-3)}
.a-lab{position:absolute; box-sizing:border-box; padding:3px 7px; background:var(--c-surface); border-radius:3px; box-shadow:0 0 0 1px var(--line-2); text-align:left; white-space:nowrap; cursor:pointer; font:500 var(--s5)/1.15 var(--f-text); color:var(--ink); animation:a-fade .2s backwards}
.a-lab .a-n{display:block}
.a-meta{display:flex; align-items:flex-start; font:400 var(--s5)/1.15 var(--f-text); color:var(--ink-3)}
.a-meta .icons{margin-right:4px; height:15px; align-items:center}
.a-meta .icons:empty{display:none}
.a-lab.t4{padding:5px 8px}
.a-resp{display:block; margin-top:4px; font:400 var(--s5)/1.15 var(--f-text); color:var(--ink-2)}
.a-pin:hover .a-lab{box-shadow:0 0 0 1px var(--ink-2)}
.a-pin.sel .a-lab{box-shadow:0 0 0 1.5px var(--ink)}

.a-hud{position:absolute; z-index:5}
.a-hud-tl{top:12px; left:12px; width:min(420px,calc(100% - 24px)); display:grid; gap:8px; justify-items:start; z-index:7}
.a-searchrow,.a-sugg{width:100%}
.a-searchrow{display:flex}
.a-q{flex:1; min-width:0; display:flex; align-items:center; gap:8px; height:44px; padding:0 14px; background:var(--c-surface); border:1px solid var(--line-2); border-radius:var(--r-pill); box-shadow:var(--sh-float); color:var(--ink-3)}
.a-q:focus-within{border-color:var(--ink)}
.a-q input{flex:1; min-width:0; border:0; background:transparent; font:400 var(--s4)/1.3 var(--f-text); color:var(--ink); outline:none}
.a-btn{display:inline-flex; align-items:center; gap:7px; min-height:44px; padding:0 16px; border:1px solid var(--line-2); border-radius:var(--r-pill); background:var(--c-surface); box-shadow:var(--sh-float); color:var(--ink); font:400 var(--s5)/1 var(--f-text); white-space:nowrap; cursor:pointer}
.a-btn:hover{border-color:var(--ink)}
.a-btn[aria-pressed="true"]{background:var(--ink); color:var(--page); border-color:var(--ink)}
.a-sugg{display:grid; max-height:56vh; overflow:auto; padding:6px; background:var(--c-surface); border:1px solid var(--line-2); border-radius:var(--r-plate); box-shadow:var(--sh-float)}
.a-sugg button{display:flex; gap:10px; align-items:flex-start; min-height:44px; padding:7px 10px; border:0; border-radius:4px; background:none; text-align:left; cursor:pointer; color:var(--ink)}
.a-sugg button.on,.a-sugg button:hover{background:var(--c-surface-2)}
.a-sugg i,.a-chips .chip i,.a-legend-b i,.a-bar span i,.a-tip b i{width:10px; height:10px; border-radius:50%; flex:none; display:inline-block}
.a-sugg button > i{margin-top:6px}
.a-sugg span{display:grid}
.a-sugg b{font:500 var(--s4)/1.3 var(--f-text)}
.a-sugg small{font-size:var(--s5); color:var(--ink-3)}
.a-sugg em{margin-top:2px; font-style:normal; font-size:var(--s5); color:var(--ink-2)}
.a-sugg p{margin:0; padding:8px 10px; font-size:var(--s5)}
.a-sugg-f{font-size:var(--s5) !important; color:var(--ink-3); border-top:1px solid var(--line); margin-top:4px !important}
.a-crumbrow{display:flex; flex-wrap:wrap; gap:6px; align-items:center}
.a-crumbs{width:max-content; display:flex; flex-wrap:wrap; align-items:center; gap:1px; max-width:min(620px,calc(100% - 24px)); padding:3px 5px; border:1px solid var(--line); border-radius:var(--r-pill); background:var(--c-nav); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); font-size:var(--s5)}
.a-crumbs button{white-space:nowrap; display:inline-flex; gap:6px; align-items:center; min-height:30px; padding:2px 8px; border:0; border-radius:var(--r-pill); background:none; color:var(--ink-2); cursor:pointer; font:inherit}
.a-crumbs button:hover{background:var(--c-surface)}
.a-crumbs > :last-child{color:var(--ink); font-weight:500}
.a-crumbs i{width:8px; height:8px; border-radius:50%}
.a-crumbs span{padding:2px 6px}
.a-sep{color:var(--ink-3); padding:0 1px !important}
.a-count{display:inline-flex; align-items:center; gap:4px; padding:3px 4px 3px 12px; border-radius:var(--r-pill); background:var(--ink); color:var(--page); font-size:var(--s5)}
.a-count button{width:24px; height:24px; border:0; border-radius:50%; background:rgba(255,255,255,.18); color:inherit; line-height:1; font-size:var(--s4); cursor:pointer}
.a-hud-tr{top:12px; right:12px; display:flex; gap:6px; transition:right .3s var(--ease)}

.a-rail{left:12px; top:50%; transform:translateY(-50%); display:grid; gap:2px; padding:5px; background:var(--c-surface); border:1px solid var(--line-2); border-radius:14px; box-shadow:var(--sh-float)}
.a-rail button{position:relative; width:68px; min-height:56px; display:grid; justify-items:center; align-content:center; gap:3px; padding:8px 2px 7px; border:0; border-radius:10px; background:none; color:var(--ink-2); cursor:pointer; transition:background .2s, color .2s}
.a-rail button span{font:400 var(--s5)/1.15 var(--f-text); letter-spacing:-.01em}
.a-rail button:hover{background:var(--c-surface-2); color:var(--ink)}
.a-rail button[aria-pressed="true"]{background:var(--ink); color:var(--page)}
.a-rail button b{position:absolute; top:4px; right:8px; min-width:16px; height:16px; padding:0 4px; display:grid; place-items:center; border-radius:8px; background:var(--accent-text); color:#fff; font:500 var(--s5)/1 var(--f-text)}
.a-rail button b:empty{display:none}
.a-zoom{right:12px; top:50%; transform:translateY(-50%); display:grid; justify-items:center; gap:2px; padding:5px; background:var(--c-surface); border:1px solid var(--line-2); border-radius:22px; box-shadow:var(--sh-float); transition:right .3s var(--ease)}
.a-zb{width:44px; height:44px; display:grid; place-items:center; border:0; border-radius:50%; background:none; color:var(--ink); cursor:pointer}
.a-zb:hover{background:var(--c-surface-2)}
.a-ztrack{position:relative; width:44px; height:128px; margin:4px 0}
.a-ztrack::before{content:""; position:absolute; left:50%; top:0; bottom:0; width:1px; margin-left:-.5px; background:var(--ink-3)}
.a-ztrack button{position:absolute; left:50%; width:18px; height:18px; margin:-9px 0 0 -9px; padding:0; border:0; background:none; cursor:pointer}
.a-ztrack button::before{content:""; position:absolute; left:50%; top:50%; width:8px; height:8px; margin:-4px; border-radius:50%; background:var(--c-surface-3); box-shadow:0 0 0 2px var(--c-surface)}
.a-ztrack button span{position:absolute; right:26px; top:50%; transform:translateY(-50%); padding:2px 8px; border:1px solid var(--line-2); border-radius:var(--r-pill); background:var(--c-surface); font:400 var(--s5)/1.3 var(--f-text); white-space:nowrap; color:var(--ink-2); opacity:0; pointer-events:none; transition:opacity .15s}
.a-zoom:hover .a-ztrack button span,.a-ztrack button.on span{opacity:1}
.a-ztrack button.on::before{background:var(--ink)}
.a-zthumb{position:absolute; left:50%; width:14px; height:14px; margin:-7px 0 0 -7px; border-radius:50%; background:var(--ink); box-shadow:0 0 0 3px var(--c-surface); pointer-events:none; z-index:1}
.a-mini{left:12px; bottom:12px; width:172px; height:150px; padding:6px; overflow:hidden; background:var(--c-surface); border:1px solid var(--line-2); border-radius:var(--r-plate); box-shadow:var(--sh-float)}
.a-mini svg{width:100%; height:100%; display:block; cursor:pointer; touch-action:none}
.a-mini-vp{fill:var(--ink); fill-opacity:.07; stroke:var(--ink); stroke-width:20}
.atlas.drawer-open .a-mini{display:none}
.a-status{right:12px; bottom:12px; display:flex; flex-wrap:wrap; gap:4px 12px; align-items:center; max-width:min(560px,calc(100% - 220px)); min-height:36px; padding:6px 14px; border:1px solid var(--line); border-radius:var(--r-pill); background:var(--c-nav); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); font:400 var(--s5)/1.3 var(--f-text); color:var(--ink-3); text-align:left; cursor:pointer; transition:right .3s var(--ease)}
.a-status b{color:var(--ink); font-weight:500}
.a-status:hover{border-color:var(--ink-2)}
.a-grad{display:inline-flex; align-items:center; gap:6px}
.a-grad i,.a-gradbar i{display:inline-block; width:56px; height:8px; border-radius:4px; background:linear-gradient(90deg,color-mix(in srgb,var(--c-heat) 6%,var(--c-map-bg)),var(--c-heat))}
.a-tip{position:absolute; left:0; top:0; z-index:8; pointer-events:none; display:grid; gap:2px; max-width:260px; padding:8px 11px; background:var(--c-surface); border:1px solid var(--line-2); border-radius:var(--r-plate); box-shadow:var(--sh-float); font-size:var(--s5); color:var(--ink-2)}
.a-tip b{display:flex; align-items:center; gap:7px; font:400 var(--s4)/1.25 var(--f-head); color:var(--ink)}
.a-tip-h{color:var(--ink); font-weight:500}
.a-tip small{margin-top:2px; font-size:var(--s5); color:var(--ink-3)}

.a-tour{left:50%; bottom:16px; transform:translateX(-50%); width:min(600px,calc(100% - 24px)); display:flex; gap:14px; align-items:flex-end; padding:14px 16px; background:var(--c-surface); border:1px solid var(--ink-2); border-radius:var(--r-plate); box-shadow:var(--sh-float); animation:a-rise .35s var(--ease) backwards}
@keyframes a-rise{from{opacity:0; transform:translate(-50%,10px)}}
.a-tour-t{flex:1; min-width:0; display:grid; gap:4px}
.a-tour-t b{font:300 var(--s2)/1.1 var(--f-head); color:var(--ink)}
.a-tour-t p{margin:0; font-size:var(--s5); line-height:1.5; color:var(--ink-2)}
.a-tour-dots{display:flex; gap:4px; margin-top:4px}
.a-tour-dots i{width:18px; height:3px; border-radius:2px; background:var(--line-2); transition:background .25s}
.a-tour-dots i.done{background:var(--ink-3)}
.a-tour-dots i.on{background:var(--ink)}
.a-tour-nav{display:flex; gap:6px; align-items:center}
.a-tour-nav button[disabled]{opacity:.4; cursor:default}
.atlas.touring .a-status,.atlas.touring .a-mini{display:none}
.a-hint{left:50%; bottom:16px; transform:translateX(-50%); width:min(640px,calc(100% - 24px)); display:flex; gap:16px; align-items:center; padding:16px 18px; background:var(--c-surface); border:1px solid var(--ink-2); border-radius:var(--r-plate); box-shadow:var(--sh-float); font-size:var(--s5); line-height:1.5; color:var(--ink-2)}
.a-hint b{display:block; margin-bottom:2px; font:300 var(--s3)/1.15 var(--f-head); color:var(--ink)}
.a-hint p{margin:0}
.a-hint-b{display:grid; gap:6px; flex:none}
.a-hint .a-hint-go{background:var(--ink); color:var(--page); display:inline-flex; gap:6px; align-items:center}
.a-hint .a-hint-go svg{width:16px; height:16px}
.a-hint .a-hint-skip{background:transparent; color:var(--ink); border:1px solid var(--line-2)}

.a-drawer{left:var(--drawer-l); top:112px; bottom:12px; width:var(--drawer-w); overflow:auto; z-index:6; background:var(--c-surface); border:1px solid var(--line-2); border-radius:var(--r-plate); box-shadow:var(--sh-float); animation:a-slide-l .28s var(--ease) backwards}
@keyframes a-slide-l{from{opacity:0; transform:translateX(-14px)}}
.a-dr-h{position:sticky; top:0; z-index:1; display:flex; justify-content:space-between; align-items:center; padding:10px 8px 6px 16px; background:var(--c-surface)}
.a-dr-h h3{margin:0; font:300 var(--s2)/1.1 var(--f-head)}
.a-dr-b{display:grid; gap:20px; padding:0 16px 18px}
.a-dr-b section{display:grid; gap:8px}
.a-dr-b h4{margin:0; display:flex; align-items:center; font:500 var(--s5)/1.3 var(--f-text); color:var(--ink-3)}
.a-dr-b h5{margin:6px 0 0; font:500 var(--s5)/1.3 var(--f-text); color:var(--ink-2)}
.a-dr-note{margin:0; font-size:var(--s5); line-height:1.5; color:var(--ink-3)}
.a-chips{display:flex; flex-wrap:wrap; gap:5px}
.a-chips .chip{min-height:32px}
.a-seg3{display:grid; gap:4px}
.a-seg3 button,.a-opt,.a-route,.a-ins{display:grid; gap:1px; min-height:44px; padding:9px 12px; border:1px solid var(--line); border-radius:var(--r-plate); background:transparent; text-align:left; color:var(--ink-2); font:inherit; cursor:pointer; transition:border-color .2s, background .2s}
.a-seg3 button b,.a-route b{font:500 var(--s4)/1.3 var(--f-text); color:var(--ink)}
.a-seg3 button small,.a-route small{font-size:var(--s5); line-height:1.4; color:var(--ink-3)}
.a-seg3 button:hover,.a-opt:hover,.a-route:hover,.a-ins:hover{border-color:var(--ink-2)}
.a-seg3 button[aria-pressed="true"],.a-opt[aria-pressed="true"]{border-color:var(--ink); background:var(--c-surface-2); box-shadow:inset 3px 0 0 var(--ink)}
.a-opts{display:grid; grid-template-columns:1fr 1fr; gap:4px}
.a-opt{grid-template-columns:1fr auto; align-items:center; padding:7px 10px; font-size:var(--s5); color:var(--ink)}
.a-opt small{font-size:var(--s5); color:var(--ink-3); font-variant-numeric:tabular-nums}
.a-gradbar{display:flex; align-items:center; gap:8px; font-size:var(--s5); color:var(--ink-3)}
.a-gradbar i{width:120px}
.a-gradbar span:last-child{margin-left:auto}
.a-legend-b{display:grid; gap:1px}
.a-legend-b > button,.a-legend-b > span{display:flex; gap:8px; align-items:center; min-height:32px; padding:3px 4px; border:0; border-radius:4px; background:none; text-align:left; font-size:var(--s5); color:var(--ink); cursor:default}
.a-legend-b > button{cursor:pointer}
.a-legend-b > button:hover{background:var(--c-surface-2)}
.a-legend-b small{margin-left:auto; color:var(--ink-3); font-variant-numeric:tabular-nums}
.a-key{display:inline-block; width:18px; margin-right:7px; border-top:2px solid var(--accent); vertical-align:middle}
.a-key.conf{border-top-style:dashed; border-top-color:var(--accent-text)}
.a-key.solid-acc{width:12px; margin-left:6px; border-top:6px solid var(--ink); border-radius:2px}
.a-key.solid-warm{width:12px; margin-left:6px; border-top:6px solid var(--accent); border-radius:2px}
.a-route{gap:3px; padding:11px 12px}
.a-route.story{border-color:var(--ink); background:var(--ink)}
.a-route.story b{display:flex; align-items:center; gap:7px; color:var(--page)}
.a-route.story b svg{width:17px; height:17px}
.a-route.story small{color:rgba(252,253,255,.72)}
.a-ins{grid-template-columns:auto 1fr; column-gap:12px; align-items:start; padding:12px}
.a-ins b{min-width:44px; font:300 var(--s2)/.95 var(--f-head); color:var(--ink); font-variant-numeric:lining-nums tabular-nums}
.a-ins span{font-size:var(--s5); line-height:1.45; color:var(--ink)}
.a-ins small{grid-column:2; margin-top:4px; font-size:var(--s5); color:var(--ink-2); text-decoration:underline; text-decoration-color:var(--line-2); text-underline-offset:3px}
.a-ins.on{border-color:var(--ink); box-shadow:inset 3px 0 0 var(--ink)}
.a-kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(70px,1fr)); gap:4px}
.a-kpis > div{display:grid; gap:2px; padding:9px 10px; border:1px solid var(--line); border-radius:var(--r-plate)}
.a-kpis b{font:300 var(--s2)/1 var(--f-head); color:var(--ink)}
.a-kpis span{display:flex; align-items:center; font-size:var(--s5); line-height:1.3; color:var(--ink-3)}
.a-bars{display:grid; gap:3px; margin-top:6px}
.a-bar{display:grid; grid-template-columns:minmax(0,1.7fr) minmax(0,1fr) 34px; gap:8px; align-items:center; padding:2px 0; border:0; background:none; text-align:left; font-size:var(--s5); color:var(--ink)}
button.a-bar{min-height:36px; padding:3px 4px; border-radius:4px; cursor:pointer}
button.a-bar:hover{background:var(--c-surface-2)}
.a-bar > span{display:flex; align-items:center; gap:7px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.a-bar > i{display:flex; height:8px; border-radius:4px; background:var(--c-surface-3); overflow:hidden}
.a-bar > i b{display:block; height:100%}
.a-bar em{font-style:normal; font-size:var(--s5); text-align:right; color:var(--ink-3); font-variant-numeric:tabular-nums}
.a-nettext{width:100%; min-height:120px; padding:8px; border:1px solid var(--line-2); border-radius:var(--r-plate); background:var(--c-surface); font:400 var(--s5)/1.5 var(--f-text); color:var(--ink)}

.a-panel{position:absolute; top:0; right:0; bottom:0; width:var(--panel-w); z-index:6; display:flex; flex-direction:column; background:var(--c-surface); border-left:1px solid var(--line-2); box-shadow:-24px 0 50px -30px rgba(15,23,34,.35); animation:a-slide .3s var(--ease) backwards}
@keyframes a-slide{from{transform:translateX(24px); opacity:0}}
.a-panel-h{display:flex; justify-content:space-between; align-items:flex-start; gap:10px; padding:12px 8px 0 18px}
.a-panel .tag{background:transparent; font-family:inherit}
.a-panel-b{flex:1; overflow:auto; display:grid; gap:16px; align-content:start; padding:10px 18px 18px; -webkit-user-select:text; user-select:text}
.a-panel-b h2{margin:0; font:300 var(--s2)/1.05 var(--f-head); letter-spacing:-.01em}
.a-panel-b h2 + .muted{margin:-10px 0 0; font-size:var(--s5); color:var(--ink-3)}
.a-one{margin:0; font:300 var(--s3)/1.4 var(--f-head); color:var(--ink)}
.a-mark{display:flex; gap:4px; flex-wrap:wrap}
.a-mark button{display:inline-flex; align-items:center; min-height:36px; padding:5px 12px; border:1px solid var(--line-2); border-radius:var(--r-pill); background:transparent; font:400 var(--s5)/1.2 var(--f-text); color:var(--ink-2); cursor:pointer}
.a-mark button:hover{border-color:var(--ink)}
.a-mark button[aria-pressed="true"]{background:var(--ink); border-color:var(--ink); color:var(--page)}
.a-mark button[aria-pressed="true"] .mk{box-shadow:0 0 0 1px var(--page)}
.a-netline{display:flex; align-items:center; margin:0; font-size:var(--s5); color:var(--ink-2)}
.a-facts{margin:0; border-top:1px solid var(--line-2)}
.a-facts > div{display:grid; grid-template-columns:118px 1fr; gap:8px; padding:7px 0; border-bottom:1px solid var(--line); font-size:var(--s5); line-height:1.45}
.a-facts dt{color:var(--ink-3)}
.a-facts dd{margin:0; color:var(--ink)}
.a-panel .reqs{margin-top:6px}
.a-panel .label{display:flex; align-items:center}
.a-panel .a-chips{margin-top:6px}
.a-panel-f{display:flex; flex-wrap:wrap; gap:8px; padding:12px 18px; border-top:1px solid var(--line); background:var(--c-surface-2)}
.atlas.panel-open .a-hud-tr,.atlas.panel-open .a-zoom,.atlas.panel-open .a-status{right:calc(var(--panel-w) + 12px)}
.atlas.panel-open .a-tour,.atlas.panel-open .a-hint{left:calc((100% - var(--panel-w)) / 2); width:min(560px,calc(100% - var(--panel-w) - 24px))}
.atlas.drawer-open .a-tour{left:calc(50% + 200px); width:min(520px,calc(100% - 480px))}
.atlas.panel-open.drawer-open .a-status{display:none}


/* ---------- планшет ---------- */
@media (max-width:1100px){ .a-status{display:none} }
/* ---------- телефон ---------- */
@media (max-width:760px){
  .atlas{--panel-w:100%; height:clamp(560px, 86svh, 760px)}
  .a-hud-tl{right:64px; width:auto}
  .a-hud-tr{top:12px}
  .a-hud-tr .a-btn{width:44px; padding:0; justify-content:center}
  .a-hud-tr .a-btn span{display:none}
  .a-mini,.a-ztrack{display:none}
  .a-rail{top:auto; bottom:8px; left:8px; right:8px; transform:none; display:flex; justify-content:space-between; padding:4px; border-radius:12px}
  .a-rail button{width:auto; flex:1; padding:7px 0 6px}
  .a-rail button span{font-size:var(--s5)}
  .a-rail button b{right:2px}
  .a-zoom{top:auto; bottom:84px; transform:none}
  .a-drawer{left:8px; right:8px; width:auto; top:auto; bottom:78px; height:60%; animation-name:a-up}
  .a-famlab b{gap:5px; font-size:var(--s5); line-height:1.3}
  .a-famlab i{width:8px; height:8px}
  .a-famlab small{display:none}
  .a-famlab button{padding:2px 6px; background:color-mix(in srgb,var(--c-map-bg) 82%,transparent)}
  .a-panel{top:auto; left:0; height:56%; z-index:9; border-left:0; border-top:1px solid var(--line-2); animation-name:a-up}
  @keyframes a-up{from{transform:translateY(30px); opacity:0}}
  .atlas.panel-open .a-zoom{display:none}
  .atlas.panel-open .a-tour,.atlas.panel-open .a-hint,.atlas.drawer-open .a-tour{left:50%; width:calc(100% - 24px)}
  .atlas.touring .a-zoom{display:none}
  .a-tour{flex-direction:column; align-items:stretch; bottom:78px}
  .a-tour-t b{font-size:var(--s3)}
  .a-hint{flex-direction:column; align-items:stretch; bottom:78px}
  .a-hint-b{grid-template-columns:1fr}
  .a-hint .btn{justify-content:center}
  .a-opts{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .a-dot,.a-panel,.a-link,.a-lab,.a-drawer,.a-tour,.a-cells.fresh{animation:none}
  .a-dopusk.flash{animation:none; stroke-width:calc(4px / var(--k))}
}