/* atlas.css — Атлас: главная страница (карта, поиск, нижняя панель, шторка на телефоне).
   Границы карты продублированы в atlas.js (mapBox()) и в .atlas__center здесь.

   Грузится после app.css и только на страницах раздела (src/_data/pageStyles.json,
   ключ — pageKey). Раньше жил внутри app.css; при разрезе правило уходило сюда,
   только если каждый его селектор держится за класс, который встречается в
   разметке и скриптах одного этого раздела. Порядок правил внутри файла прежний.
   Каскад между файлами сверен вычисленными стилями всех элементов страниц до и
   после разреза. При равной специфичности правило раздела теперь всегда побеждает
   общее из app.css: если общему нужно победить, поднимите его специфичность,
   а не переносите строку выше. */

/* Шапка прозрачна поверх ночной карты, шва как такового нет, но
   у верхней кромки добавляем тихую виньетку — контент шапки читается над
   светящимися кластерами, и карта так же мягко «вытекает» из-под неё. */
body.is-atlas .hdr--over:not(.is-stuck)::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0;
  /* Ровно высота шапки и быстрый спад: прежние +12 px с плотностью 40 % на
     70 % высоты вместе с растушёвкой карты давали тёмную ленту под шапкой. */
  height: var(--hdr-h); pointer-events: none; z-index: -1;
  background: linear-gradient(to bottom,
    color-mix(in oklab, #05070d 65%, transparent) 0%,
    color-mix(in oklab, #05070d 25%, transparent) 60%,
    transparent 100%);
}

/* ---------- 10. Экран атласа ---------- */

body.is-atlas { overflow: hidden; }

/* Жест над холстом принадлежит карте. Без `touch-action` браузер забирает
   щипок себе и увеличивает всю страницу вместе с шапкой и панелью, а карта
   остаётся прежней — на телефоне приблизить её было нельзя вовсе. */
.atlas__canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: crosshair;
  touch-action: none; }

/* Обвязка карты повторяет боковые поля шапки, и обе занимают всю ширину:
   их края сходятся, а содержимое не сжато в колонку посреди экрана. */
.atlas__ui {
  position: absolute; inset: 0; pointer-events: none;
  display: flex; flex-direction: column;
  padding: calc(var(--hdr-h) + 14px) var(--gut) 20px;
}

.atlas__ui > * { pointer-events: auto; }

/* Карта занимает верх экрана, заголовок с поиском — низ (границы карты
   продублированы в atlas.js — mapBox()). Разведение по вертикали, а не
   наложение: центрированный поверх карты заголовок ложится ровно на рижский
   кластер, и обе сущности перестают читаться. */
.atlas__center {
  flex: 1; display: flex; flex-direction: column; justify-content: flex-end;
  align-items: center; text-align: center; gap: 16px; pointer-events: none;
  /* Подпись прижата к полю поиска: ряд снизу выше самого поля (его высоту
     задаёт правая колонка со слайдером), и при прежнем отступе между текстом
     и полем набегало полсотни пикселей — заголовок читался как отдельный
     этаж, а не как приглашение к поиску. */
  padding-bottom: clamp(4px, 1vh, 12px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}

/* В атласе заголовок мельче, чем на контентных страницах: он делит экран
   с картой, а не открывает страницу в одиночку. */
.atlas__center h1 { font-size: clamp(1.375rem, 2.9vw, 2.25rem); }

.atlas__center.is-away { opacity: 0; transform: translateY(16px); }

.atlas__center h1 { text-shadow: 0 0 44px var(--sky); }

.atlas__center h1 i { font-style: normal; color: var(--you); }

.search__list {
  position: absolute; inset: auto 0 calc(100% + 8px); text-align: left;
  background: var(--raised); border: 1px solid var(--border);
  border-radius: 9px; overflow: hidden; box-shadow: var(--shadow-2);
}

.search__it { display: flex; justify-content: space-between; gap: 12px; padding: 11px 16px; cursor: pointer; font-size: 0.9062rem; }

.search__it:hover, .search__it.is-on { background: var(--you-soft); }

.search__it small { color: var(--fg-dim); white-space: nowrap; font: 400 0.75rem/1.5 var(--ff-mono); }

.atlas__foot {
  /* Боковые колонки — minmax(0, 1fr): обычный 1fr не сжимается уже своего
     содержимого, и поле поиска в центре выталкивало правую колонку за поле. */
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 520px) minmax(0, 1fr); align-items: end;
  /* Ряд — flex-элемент обвязки, а у flex-элементов min-width: auto: шире
     содержимого он не сожмётся и вылезет за правое поле. */
  min-width: 0; max-width: 100%;
  gap: 10px 16px; transition: opacity .4s;
}

.atlas__foot-l { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Переключатель метрики лежит на ночной карте — оставляем ему сплошную границу
   из UI-слоя (видна на любом фоне); металлическое кольцо на тёмном сливалось. */
/* Правая колонка: порог по обороту и итоги стоят друг под другом одной
   ширины и прижаты к тому же полю, что и правый край шапки. Разной ширины
   блоки один над другим читаются как сбой вёрстки. */
.atlas__foot-r {
  display: grid; gap: 10px; justify-self: end;
  /* Ширину задаёт ряд цифр — его естественная ширина; слайдер над ним
     растягивается до неё. Фиксированное число здесь либо оставляло воздух,
     либо не вмещало цифры, и они вылезали за поле. */
  width: max-content; max-width: 100%;
}

.atlas__foot-r > * { width: 100%; }

.atlas__foot-r [data-slot="slider"] { min-width: 0; }

.scale__lvl { font: 500 0.6875rem/1 var(--ff-mono); letter-spacing: .13em; text-transform: uppercase; color: var(--you); }

.scale__bar { width: 104px; height: 1px; background: var(--fg-muted); position: relative; }

.scale__bar::before, .scale__bar::after { content: ""; position: absolute; top: -3px; width: 1px; height: 7px; background: var(--fg-muted); }

.scale__bar::before { left: 0; }

.scale__bar::after { right: 0; }

.scale__len { font: 400 0.7188rem/1 var(--ff-mono); color: var(--fg-muted); }

.isolation__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--you); flex: none; }

.isolation__hint { color: var(--fg-dim); font-size: 0.75rem; }

/* Подпись на время загрузки данных карты: на медленном канале это секунды. */
.atlas__loader {
  position: absolute; left: 0; right: 0; top: 36%; margin: 0; text-align: center;
  color: var(--fg-muted); font-size: 0.875rem; pointer-events: none;
  animation: atlas-loader 1.6s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) { .atlas__loader { animation: none; }
}

.atlas__attr {
  position: absolute; right: var(--gut); bottom: 6px; margin: 0;
  font: 400 0.6562rem/1.4 var(--ff-mono); color: var(--fg-dim);
  text-shadow: 0 0 8px var(--sky); pointer-events: none;
}

.hovercard {
  position: fixed; pointer-events: none; z-index: 30; max-width: 264px; display: none;
  background: var(--raised); border: 1px solid var(--border);
  border-radius: 9px; padding: 10px 13px; font-size: 0.8125rem; line-height: 1.5;
  box-shadow: var(--shadow-2);
}

.hovercard b { display: block; font-weight: 500; margin-bottom: 2px; }

.hovercard > span { display: block; color: var(--fg-dim); font-size: 0.75rem; }

.hovercard__meta em { font-style: normal; font-family: var(--ff-mono); color: var(--muted-foreground); }

.hovercard [data-slot="metric-row"] { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; padding: 4px 0; border: 0; }

.hovercard [data-slot="metric-value"] { white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }

.hovercard__chip { font: 500 0.6562rem/1.3 var(--ff-mono); font-style: normal; padding: 1px 6px; border-radius: 999px; border: 1px solid var(--border); color: var(--muted-foreground); }

.hovercard__chip[data-dir="up"] { color: var(--peer); border-color: color-mix(in oklab, var(--peer) 45%, transparent); }

.hovercard__was { white-space: nowrap; font-family: var(--ff-mono); font-size: 0.7188rem; color: var(--muted-foreground); margin-top: 2px; }

.hovercard [data-slot="metric-row"] { display: flex; gap: 14px; padding: 2px 0; border: 0; font-size: 0.7812rem; }

.hovercard [data-slot="metric-value"] { margin-left: auto; }

.hovercard [data-slot="metric-row"] + [data-slot="metric-row"] { padding-top: 0; }

@media (max-width: 860px) {
  .atlas__foot { grid-template-columns: minmax(0, 1fr); }
  /* foot-r сам grid: без явной колонки его неявный трек тоже раздувался до
     min-content ребёнка. minmax(0, …) держит его в пределах бокса. */
  .atlas__foot-r { width: 100%; justify-self: stretch; grid-template-columns: minmax(0, 1fr); }
}

/* Переключатель «карта / поиск» и список крупнейших — только для телефона. */
.atlas__sub, .atlas__switch, .atlas__top, .atlas__hints { display: none; }

@media (max-width: 767px) {
  /* Режим поиска: холста нет, обвязка — обычная прокручиваемая страница. */
  [data-atlas-view="list"] body.is-atlas { overflow: auto; }
  /* Главная телефона помещается в экран целиком: страница — колонка высотой
     в экран, поиск занимает всё место между шапкой и подвалом, подвал —
     внизу экрана, а не под ним. */
  [data-atlas-view="list"] body.is-atlas { display: flex; flex-direction: column; min-height: 100dvh; }
  [data-atlas-view="list"] body.is-atlas #main { flex: 1 0 auto; display: flex; flex-direction: column; }
  [data-atlas-view="list"] body.is-atlas .atlas { flex: 1 0 auto; display: flex; flex-direction: column; }
  /* В режиме списка карты нет, и закреплённый подвал только закрывал
     последние строки «Крупнейших» — он уходит в поток, как на любой
     странице. */
  /* Виньетка под шапкой нужна над светящейся картой; над списком она лишь
     затемняла верх страницы полосой цвета прежнего фона. */
  [data-atlas-view="list"] body.is-atlas .hdr--over::after { display: none; }
  [data-atlas-view="list"] body.is-atlas .ftr { position: static; margin-top: 0; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
  /* Поиск — в оптическом центре экрана, чуть выше середины, как у
     поисковых главных: заголовок и строка по центру, под ней подсказки.
     Нижний отступ больше верхнего — середина экрана ниже, чем кажется.
     В фокусе строка остаётся на месте (решение владельца): список
     найденного раскрывается поверх подсказок, раскладку он не двигает. */
  [data-atlas-view="list"] .atlas__ui {
    position: static; flex: 1 0 auto; min-height: 0; pointer-events: auto;
    padding: calc(var(--hdr-h) + 20px) var(--gut) 6dvh;
    gap: 22px; justify-content: center;
  }
  [data-atlas-view="list"] .atlas__center {
    flex: none; align-items: center; text-align: center; gap: 10px; padding: 0;
  }
  [data-atlas-view="list"] .atlas__hints {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0;
    font-size: 0.8125rem; color: var(--fg-dim);
  }
  [data-atlas-view="list"] .atlas__hints span { width: 100%; text-align: center; }
  [data-atlas-view="list"] .atlas__hints a {
    padding: 6px 12px; border: 1px solid var(--border); border-radius: 999px;
    color: var(--fg-muted); text-decoration: none; max-width: 100%;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  [data-atlas-view="list"] .atlas__hints a:hover { color: var(--fg); border-color: var(--border-2); }

  [data-atlas-view="list"] .atlas__center h1 { font-size: 1.75rem; }
  [data-atlas-view="list"] .atlas__sub { display: block; margin: 0; color: var(--fg-dim); font-size: 0.9062rem; }
  [data-atlas-view="list"] .atlas__foot { gap: 22px; }
  .atlas__top-h {
    margin: 0 0 6px; font: 500 0.6562rem/1.4 var(--ff-mono); letter-spacing: .1em;
    text-transform: uppercase; color: var(--fg-dim);
  }
  .atlas__top ol { list-style: none; margin: 0; padding: 0; }
  .atlas__top li {
    display: flex; align-items: center; gap: 12px; min-height: 52px;
    border-top: 1px solid var(--border);
  }
  .atlas__top a {
    flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px;
    padding: 8px 0; color: var(--fg); text-decoration: none;
  }
  .atlas__top-name { font-size: 0.9375rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .atlas__top-meta { font-size: 0.7812rem; color: var(--fg-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .atlas__top-v { flex: none; font-size: 0.8125rem; color: var(--fg-muted); }

  /* Режим карты: холст во весь экран, поиск сверху, остальное убрано. */
  [data-atlas-view="map"] .atlas__ui { padding-top: calc(var(--hdr-h) + 10px); }
  [data-atlas-view="map"] .atlas__ui { flex-direction: column-reverse; justify-content: flex-end; }

  /* В обоих режимах список подсказок открывается вниз: поле стоит наверху. */
  [data-atlas-view] .search__list { inset: calc(100% + 8px) 0 auto; z-index: 5; }

  [data-atlas-view="map"] .atlas__switch[data-switch="list"] {
    display: inline-flex; position: fixed; z-index: 20;
    left: 50%; transform: translateX(-50%);
    bottom: calc(18px + env(safe-area-inset-bottom));
    height: 46px; padding: 0 22px; border-radius: 999px;
    box-shadow: var(--shadow-2);
  }
  /* Карточка компании открыта — кнопка не спорит со шторкой. */
  [data-atlas-view="map"]:has([data-panel][data-state="open"]) .atlas__switch { display: none; }
}

/* На атласе карта занимает экран целиком: подвал закрепляется у нижнего
   края поверх неё, а нижний ряд поднимается на его высоту. Границы карты
   считаются от прямоугольника этого ряда (atlas.js: computeMapBox),
   поэтому карта подстраивается сама. */
body.is-atlas .ftr {
  position: fixed; inset: auto 0 0 0; z-index: 20; margin-top: 0;
  background: color-mix(in oklab, var(--bg) 82%, transparent);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}

body.is-atlas .atlas__ui { padding-bottom: calc(var(--ftr-h) + 28px); }

/* Плашка фильтра отрасли на карте: над итогами, тихая, с крестиком. */
.atlas__filter { display: inline-flex; align-items: center; gap: 8px; align-self: flex-end; width: fit-content; margin: 0 0 10px auto;
  padding: 5px 6px 5px 12px; border-radius: 999px; border: 1px solid color-mix(in oklab, var(--peer) 45%, var(--border));
  background: color-mix(in oklab, var(--bg) 82%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  font-size: 0.8125rem; color: var(--fg); pointer-events: auto; }

.atlas__filter-k { font: 500 0.6875rem/1 var(--ff-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--fg-dim); }

.atlas__filter b { font-weight: 500; }

.atlas__filter-x { display: inline-grid; place-items: center; width: 24px; height: 24px; border: 0; border-radius: 50%;
  background: color-mix(in oklab, var(--fg) 8%, transparent); color: var(--fg-muted); font-size: 1rem; line-height: 1; cursor: pointer; }

.atlas__filter-x:hover { color: var(--fg); background: color-mix(in oklab, var(--fg) 14%, transparent); }

.atlas__filter-x:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }