/* Демо новой карты Journey Map City (Figma 1181-21471 … 1181-20428).

   Раскладка повторяет нынешнюю карту: ряд из сцены и панели, панель выезжает
   справа. Её стили берём из journey-map-v2.css — по макету это один и тот же
   компонент, поэтому здесь только переменные, которых она ждёт, и то, что есть
   лишь на новой карте: мир с областями, точки и облачная заставка. */

.jmc {
  --jm2-radius: 20px;
  /* MapContent из макета — 560px */
  --jm2-panel-w: 560px;
  --jm2-panel-ms: 0.5s;
  --jmc-clouds-ms: 1.2s;
  --jmc-content-ms: 0.42s;
  --jmc-appear-ms: 0.6s;

  position: relative;
  display: flex;
  gap: 8px;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  font-family: 'Golos Text', system-ui, sans-serif;
}

/* Слои сцены позиционированы абсолютно, поэтому высоту держит сама сцена:
   без этого в колоночной раскладке (узкие экраны) она схлопывается в ноль и
   карта пропадает. */
.jmc__stage {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  min-height: calc(100dvh - var(--jm2-header-h, 75px) - var(--jm2-page-gap, 64px));
  border-radius: var(--jm2-radius);
  overflow: hidden;
}

.jmc__layer {
  position: absolute;
  inset: 0;
}

.jmc__viewport {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.jmc__viewport.is-panning {
  cursor: grabbing;
}

/* Мир обтягивает картинку, а не кадр: точки заданы в процентах от макета, и
   только так они остаются на своих зданиях. Размер и сдвиг считает JS —
   карта всегда закрывает кадр целиком, а остаток двигается перетаскиванием. */
.jmc__world {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0;
  will-change: transform;
}

.jmc__map {
  display: block;
  width: 100%;
  height: 100%;
  user-select: none;
  -webkit-user-drag: none;
}

/* Точка на карте (Figma MapPOI): подпись на тёмной подложке с размытием. */
/* Вода на общем мире. Холст растянут на всю карту, но буфер у него
   маленький: рисунок волн мягкий, разрешение ему не нужно, зато браузер
   каждый кадр перекладывает крошечную текстуру, а не перерисовывает слой
   размером с карту. Маска вшита в сам рисунок, в CSS её нет — маска на
   большом слое стоила десяток кадров.

   Растягиваем со сглаживанием: блики лежат прямо на карте, и блочность на
   гладкой карте читалась бы как грязь на стекле. */
.jmc__water {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.6;
  mix-blend-mode: screen;
  pointer-events: none;
}

.jmc__poi {
  position: absolute;
  display: flex;
  gap: 4px;
  align-items: center;
  justify-content: center;
  padding: 8px;
  border: 0;
  border-radius: 8px;
  background: rgba(28, 28, 28, 0.4);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #fff;
  cursor: pointer;
  /* Точка держит свой экранный размер. Мир масштабируется трансформом, а карты
     теперь 3500–4096px по ширине: при cover-масштабе (≈0.4) пилюля уезжала бы
     к трети набора — подпись в 12px превращалась в 5px. Обратный масштаб
     --jmc-poi-k задаёт панорама в скрипте, поэтому точка выглядит одинаково и
     на отдалении, и на приближении.

     Отдельные свойства translate и scale, а не один transform: переход ниже
     остаётся только на наведении и не тянется за каждым шагом зума. Порядок
     применения (translate → scale → transform) центр пилюли с места не
     сдвигает: translate считается от немасштабированной рамки. */
  translate: -50% -50%;
  scale: var(--jmc-poi-k, 1);
  transition:
    background 0.2s ease,
    transform 0.2s ease;
}

.jmc__poi:hover,
.jmc__poi:focus-visible {
  background: rgba(28, 28, 28, 0.65);
  transform: scale(1.04);
}

/* Закрытое здание: подпись приглушена, курсор обычный, на наведении пилюля не
   подрастает — нажимать нечего, и обещать нажатие она не должна. Сам замок
   оставляем в полную силу: он и объясняет, почему точка тусклая. */
.jmc__poi.is-locked {
  color: rgba(255, 255, 255, 0.6);
  cursor: default;
}

.jmc__poi.is-locked:hover,
.jmc__poi.is-locked:focus-visible {
  background: rgba(28, 28, 28, 0.4);
  transform: none;
}

.jmc__poi.is-locked .jmc__poi-badge {
  color: #fff;
}

.jmc__poi-title {
  padding: 0 3px;
  font-size: 12px;
  font-weight: 500;
  line-height: 18px;
  white-space: nowrap;
}

/* Подпись со значком. Точке без полосы заполнения ряд ничего не меняет —
   это та же строка, что и была; точке с полосой он нужен, чтобы подпись и
   значок остались рядом, когда сама пилюля встала колонкой. */
.jmc__poi-row {
  display: flex;
  gap: 4px;
  align-items: center;
  justify-content: center;
}

/* Точка с полосой заполнения (Figma 1677-26365): подпись со значком строкой,
   полоса под ними во всю ширину пилюли. */
.jmc__poi--progress {
  flex-direction: column;
  gap: 6px;
  align-items: stretch;
}

/* Дорожка полосы. В макете она 4px при наборе 16/24; точка у нас мельче
   (12/18), поэтому и дорожка 3px — та же доля строки, что и в макете. */
.jmc__poi-progress {
  display: block;
  overflow: hidden;
  height: 3px;
  border-radius: 999px;
  background: #e3e3e3;
}

/* Заполнение. Жёлтое до разгона и зелёное после — цвета макета; ширину и цвет
   ведёт один переход, поэтому Boost в скрипте только переключает состояние. */
.jmc__poi-progress-bar {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: #ffbe41;
  transition:
    width 0.6s ease,
    background-color 0.6s ease;
}

.jmc__poi-progress.is-boosted .jmc__poi-progress-bar {
  background: #2c9d62;
}

/* Пока идёт стройка, ширину ведёт шаг кадра в скрипте — свой переход полосе
   тут только мешал бы: он тянулся бы следом за каждым шагом и приезжал к концу
   позже числа рядом с подписью. Цвет переход по-прежнему ведёт. */
.jmc__poi-progress.is-building .jmc__poi-progress-bar {
  transition: background-color 0.6s ease;
}

@media (prefers-reduced-motion: reduce) {
  .jmc__poi-progress-bar {
    transition: none;
  }
}

/* Доля рядом с подписью (у NVIDIA — 10% до разгона, 98% после). Цвет тот же,
   что у полосы: число и полоса говорят об одном, и порознь читались бы как
   разные показатели.

   Цифры табличные: во время стройки число растёт каждый кадр, и пропорциональные
   знаки дёргали бы подпись из стороны в сторону. */
.jmc__poi-percent {
  flex: 0 0 auto;
  color: #ffbe41;
  font-size: 12px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  line-height: 18px;
}

.jmc__poi-percent.is-boosted {
  color: #2c9d62;
}

/* Молоток в значке стучит, пока здание строится. Вращаем весь кружок: молоток
   в нём — вырез, своей фигуры у него нет. */
.jmc__poi.is-building .jmc__poi-badge {
  animation: jmc-hammer 0.5s ease-in-out infinite;
}

@keyframes jmc-hammer {
  0%,
  100% {
    transform: rotate(-20deg);
  }

  40% {
    transform: rotate(18deg);
  }

  55% {
    transform: rotate(8deg);
  }
}

/* Стройка у точки: пыль и искры сварки поверх карты. Коробка висит на тех же
   процентах, что и точка, но спущена под неё: подпись стоит над крышей, а
   стройка идёт у основания здания — оттуда и пыль.

   Масштаб мира гасим так же, как у пилюли (--jmc-poi-k), иначе на отдалении
   клубы схлопнулись бы в точку. */
.jmc__build {
  position: absolute;
  z-index: 0;
  display: block;
  width: 150px;
  height: 110px;
  translate: -50% 0;
  scale: var(--jmc-poi-k, 1);
  pointer-events: none;
}

.jmc__build-puff {
  position: absolute;
  bottom: 0;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
  opacity: 0;
  filter: blur(6px);
  animation: jmc-puff 1.7s ease-out infinite;
}

/* Четыре клуба с разных мест и вразнобой: одинаковые и в такт читались бы
   мигающим кружком, а не пылью. Размеры разные — так облако выходит рваным, а
   не рядом одинаковых шаров. */
.jmc__build-puff--a {
  left: 14px;
}

.jmc__build-puff--b {
  left: 50px;
  width: 50px;
  height: 50px;
  animation-delay: 0.45s;
}

.jmc__build-puff--c {
  left: 96px;
  width: 32px;
  height: 32px;
  animation-delay: 0.9s;
}

.jmc__build-puff--d {
  left: 70px;
  width: 42px;
  height: 42px;
  animation-delay: 1.3s;
}

@keyframes jmc-puff {
  0% {
    transform: translateY(0) scale(0.4);
    opacity: 0;
  }

  20% {
    opacity: 1;
  }

  100% {
    transform: translateY(-70px) scale(1.8);
    opacity: 0;
  }
}

.jmc__build-spark {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #fff4d6;
  box-shadow: 0 0 12px 5px rgba(255, 190, 65, 0.95);
  opacity: 0;
  animation: jmc-spark 0.8s ease-out infinite;
}

.jmc__build-spark--a {
  bottom: 44px;
  left: 44px;
}

.jmc__build-spark--b {
  bottom: 26px;
  left: 92px;
  animation-delay: 0.4s;
}

.jmc__build-spark--c {
  bottom: 58px;
  left: 68px;
  animation-delay: 0.65s;
}

@keyframes jmc-spark {
  0% {
    transform: translate(0, 0) scale(0.6);
    opacity: 0;
  }

  20% {
    opacity: 1;
  }

  100% {
    transform: translate(9px, 15px) scale(0.3);
    opacity: 0;
  }
}

/* Конфетти, которым заканчивается стройка. Лежит выше пилюли (z-index), а не
   под ней, как пыль: пыль идёт от здания и подписи не касается, а бумажки
   разлетаются поверх всего — так читается, что хлопнуло именно здесь. */
.jmc__cheer {
  position: absolute;
  z-index: 1;
  display: block;
  width: 0;
  height: 0;
  scale: var(--jmc-poi-k, 1);
  pointer-events: none;
}

/* Бумажка. Куда летит, на сколько проворачивается и когда трогается — всё в
   переменных у неё же в разметке (poi-confetti.html); правило одно на всех. */
.jmc__cheer-bit {
  position: absolute;
  width: 8px;
  height: 13px;
  border-radius: 2px;
  opacity: 0;
  animation: jmc-cheer 1.4s cubic-bezier(0.12, 0.7, 0.3, 1) var(--t, 0s) 1 both;
}

@keyframes jmc-cheer {
  0% {
    transform: translate(0, 0) rotate(0deg) scale(0.6);
    opacity: 0;
  }

  12% {
    opacity: 1;
  }

  75% {
    opacity: 1;
  }

  100% {
    transform: translate(var(--x, 0), var(--y, 0)) rotate(var(--r, 0deg)) scale(1);
    opacity: 0;
  }
}

/* Значок «в разработке» у точки (Figma 1577-19745). В макете кружок 24px при
   наборе 16/24, у нас точка мельче — 12/18, поэтому и кружок 18px: он стоит
   ростом со строкой, а не торчит из пилюли. Молоток в нём — вырез, цвет берётся
   у подписи, так что красить отдельно нечего. */
.jmc__poi-badge {
  display: block;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
}

/* Вход в область на общем мире. Рядом стоят подписи островов — такие же
   пилюли, только тёмные, поэтому вход сделан светлым и со стрелкой: иначе он
   читается как ещё одна подпись, а не как дверь внутрь карты. */
.jmc__poi--area .jmc__poi-title {
  font-size: 16px;
  line-height: 24px;
}

.jmc__poi--area {
  padding: 10px 10px 10px 16px;
  border-radius: 999px;
  background: #fff;
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.18),
    0 8px 20px rgba(0, 0, 0, 0.16);
  color: #1c1c1c;
}

.jmc__poi--area:hover,
.jmc__poi--area:focus-visible {
  background: #fff;
  transform: scale(1.06);
}

.jmc__poi-arrow {
  display: block;
  width: 20px;
  height: 20px;
}

/* Пульс вокруг входа: на общем мире взгляд цепляется за острова, а не за
   пилюлю, и подсказка нужна, пока человек не нажал в первый раз. */
.jmc__poi--area::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 999px;
  box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
  animation: jmc-poi-pulse 2.4s ease-out infinite;
  pointer-events: none;
}

@keyframes jmc-poi-pulse {
  70% {
    box-shadow: 0 0 0 14px rgba(255, 255, 255, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  }
}

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

/* Панели управления картой (Figma 1677-25680 и 1677-25688). Обе — полоса во
   всю ширину с отступом 8px: слева один блок, справа другой. Под кнопками
   чёрная растяжка: карта светлая и пёстрая, и без неё белое по ней теряется.
   В макете растяжки растровые, здесь те же линейные градиенты. */
.jmc__topbar,
.jmc__bottombar {
  position: absolute;
  right: 0;
  left: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px;
  pointer-events: none;
}

/* Полоса ловит клики только кнопками: сама она лежит поверх карты во всю
   ширину, и иначе верх и низ карты перестали бы тянуться мышью. */
.jmc__topbar > *,
.jmc__bottombar > * {
  pointer-events: auto;
}

.jmc__topbar {
  top: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%);
}

.jmc__bottombar {
  bottom: 0;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%);
}

.jmc__topbar-right {
  display: flex;
  gap: 8px;
  align-items: center;
}

.jmc__bottombar-right {
  display: flex;
  gap: 4px;
  align-items: center;
}

/* Пилюля верхней панели: логотип или монеты. Высота 40px — та же, что у
   круглых кнопок, чтобы обе панели читались одним рядом. */
.jmc__chip {
  display: flex;
  gap: 4px;
  align-items: center;
  height: 40px;
  padding: 8px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  white-space: nowrap;
}

/* Логотип (Figma 1677-25682): пилюля 56 в высоту, как и монеты справа, лок-ап
   в ней 32. Отступ справа больше левого (16 против 12): иначе буквы упираются
   в край пилюли, а слева от знака воздух есть и так.

   Размыто то, что под ней, — пилюля лежит на карте, и без размытия сквозь
   чёрный на 40% просвечивает крона дерева. */
.jmc__chip--logo {
  height: 56px;
  padding: 12px 16px 12px 12px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.jmc__topbar-logo {
  display: block;
  width: auto;
  height: 32px;
}

/* Монеты (Figma 1677-25684): пилюля выше логотипа — 56px, и в ней монета
   32x32 с числом 16/24. Размыто то, что под ней: пилюля лежит на карте, и
   без размытия крона дерева просвечивает сквозь чёрный на 40%. */
.jmc__chip--coins {
  height: 56px;
  padding: 8px 12px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-size: 16px;
  line-height: 24px;
}

.jmc__chip-icon {
  display: block;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
}

.jmc__chip--coins .jmc__chip-icon {
  width: 32px;
  height: 32px;
}

/* Аватар приходит общим компонентом сайта — он же рисует кольцо уровня.
   Своей рамкой его не трогаем, только ставим на место в ряду. */
.jmc__avatar {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
}

/* Профиль в верхней панели: аватар и выпадашка под ним (Figma 1763-31164).
   Якорем служит сама обёртка — выпадашка висит под аватаром по его правому
   краю, а не по краю экрана. */
.jmc__profile {
  position: relative;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
}

.jmc__profile-btn {
  display: flex;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

/* Подложка выпадашки: background/overlay с размытием на 20px — она лежит на
   карте, и без размытия сквозь неё просвечивают крыши. */
.jmc__dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 280px;
  padding: 4px;
  border-radius: 12px;
  background: rgba(28, 28, 28, 0.7);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  color: #fff;
}

/* Выезд из-под аватара: классы навешивает x-transition. */
.jmc__dropdown--anim {
  transition:
    opacity 0.15s ease,
    transform 0.15s ease;
}

.jmc__dropdown--hidden {
  transform: translateY(-4px) scale(0.98);
  transform-origin: top right;
  opacity: 0;
}

.jmc__dropdown--shown {
  transform: none;
  opacity: 1;
}

.jmc__dropdown-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px;
  border: 1px solid rgba(227, 227, 227, 0.1);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
}

.jmc__dropdown-user {
  display: flex;
  gap: 8px;
  align-items: center;
}

.jmc__dropdown-id {
  display: flex;
  flex: 1 1 auto;
  gap: 8px;
  align-items: center;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

.jmc__dropdown-names {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
}

/* Имя и специализация режутся многоточием: в 280px выпадашки длинное имя
   иначе уносит кнопки настроек за её край. */
.jmc__dropdown-name,
.jmc__dropdown-role {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.jmc__dropdown-name {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}

.jmc__dropdown-role {
  color: rgba(255, 255, 255, 0.6);
  font-size: 12px;
  line-height: 16px;
}

.jmc__dropdown-tools {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
}

.jmc__dropdown-tool {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  border-radius: 8px;
  cursor: pointer;
}

.jmc__dropdown-tool:hover {
  background: rgba(255, 255, 255, 0.1);
}

/* Значки взяты из меню шапки, а там они нарисованы серым #777 по светлому
   фону. Выпадашка тёмная, поэтому перекрашиваем их фильтром в белый, а не
   заводим вторые копии: так они остаются одним набором с шапкой. */
.jmc__dropdown-tool img,
.jmc__dropdown-icon {
  display: block;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  opacity: 0.6;
  filter: brightness(0) invert(1);
}

.jmc__dropdown-metrics {
  display: flex;
  gap: 8px;
}

/* Уровень и монеты — плитки из макета: фон и рамка одного цвета, своего у
   каждой метрики (metric/xp/fade и metric/sc/fade). */
.jmc__metric {
  display: flex;
  flex: 1 1 0;
  gap: 4px;
  align-items: center;
  min-width: 0;
  padding: 8px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  text-decoration: none;
}

.jmc__metric--xp {
  border-color: rgba(149, 85, 225, 0.07);
  background: rgba(149, 85, 225, 0.07);
}

.jmc__metric--sc {
  justify-content: center;
  border-color: rgba(224, 170, 40, 0.07);
  background: rgba(224, 170, 40, 0.07);
  color: #e0aa28;
}

.jmc__metric-level {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  padding: 2px 4px;
  border-radius: 99px;
  background: #9555e1;
  color: #fff;
  font-size: 12px;
  line-height: 16px;
}

.jmc__metric-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.jmc__metric-name {
  overflow: hidden;
  font-size: 12px;
  line-height: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.jmc__metric-track {
  display: block;
  overflow: hidden;
  height: 4px;
  border-radius: 999px;
  background: rgba(227, 227, 227, 0.1);
}

.jmc__metric-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: #9555e1;
}

.jmc__metric-coin {
  display: block;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
}

.jmc__dropdown-menu {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px;
}

.jmc__dropdown-item {
  display: flex;
  gap: 4px;
  align-items: center;
  min-height: 36px;
  padding: 8px;
  border-radius: 8px;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  text-decoration: none;
}

.jmc__dropdown-item:hover {
  background: rgba(255, 255, 255, 0.1);
}

/* Значок ссылки «Профиль» нарисован строкой прямо здесь и красится цветом
   кнопки, остальные приходят картинками из меню шапки — у них белый даёт
   фильтр выше. */
svg.jmc__dropdown-icon {
  opacity: 0.6;
  filter: none;
}

.jmc__dropdown-divider {
  display: block;
  height: 1px;
  margin: 2px 8px;
  background: rgba(227, 227, 227, 0.1);
}

.jmc__dropdown-heading {
  margin: 0;
  padding: 4px 8px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
}

/* Круглая кнопка карты: звук, приближение, выход на общий мир. */
.jmc__ctl {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 8px;
  border: 0;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
  cursor: pointer;
  transition:
    background 0.2s ease,
    transform 0.2s ease;
}

.jmc__ctl:hover,
.jmc__ctl:focus-visible {
  background: rgba(0, 0, 0, 0.6);
  transform: scale(1.06);
}

/* Выключенный звук приглушаем: видно, что музыка есть, но сейчас молчит. */
.jmc__ctl[aria-pressed='true'] {
  color: rgba(255, 255, 255, 0.6);
}

.jmc__ctl-icon {
  display: block;
  width: 24px;
  height: 24px;
}

.jmc__ctl-icon path {
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}


/* Поездка на LRT между Alem City и регионом (Figma 1489-4248). Лежит поверх
   слоёв и чипов: пока кадр идёт, под ним меняется область, и ни чип возврата,
   ни кнопка выхода не должны мелькать сквозь него. */
.jmc__flight {
  position: absolute;
  inset: 0;
  z-index: 5;
  overflow: hidden;
  border-radius: var(--jm2-radius);
  background: #1c1c1c;
  opacity: 0;
  pointer-events: none;
}

/* Проявления нет: первый кадр канвы повторяет то, что под ней, и слой просто
   встаёт сверху — так смена читается как рассыпание карты, а не как наплыв. */
.jmc__flight.is-shown {
  opacity: 1;
}

/* Коробка под общий план: её размер считает скрипт так, чтобы картинка закрыла
   кадр целиком, а точка едет в процентах от неё — так точка держится линии при
   любом кадре. За поездку кадр слегка наезжает, вместе с точкой. */
.jmc__flight-inner {
  position: absolute;
  transition: transform 2.4s ease-in-out;
}

.jmc__flight-inner.is-moving {
  transform: scale(1.06);
}

.jmc__flight-map {
  display: block;
  width: 100%;
  height: 100%;
}

/* Огонёк поезда: мягкое пятно света без чёткого круга и без белой сердцевины —
   сквозь него видно пути. В макете карта ночная и хватает бледного свечения, у
   нас дневная, поэтому цвет взят насыщённее, иначе пятно тонет в светлых
   рельсах. Положение задаётся в процентах, поэтому центруем отступами:
   трансформ занят пульсацией. */
.jmc__flight-dot {
  position: absolute;
  width: 84px;
  height: 84px;
  margin: -42px 0 0 -42px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(130, 230, 255, 0.95) 0%,
    rgba(0, 160, 255, 0.85) 22%,
    rgba(0, 130, 245, 0.5) 46%,
    rgba(0, 120, 240, 0) 74%
  );
  filter: blur(1px);
  animation: jmc-flight-dot 1.4s ease-in-out infinite;
}

.jmc__flight-inner.is-moving .jmc__flight-dot {
  transition:
    left 2.4s linear,
    top 2.4s linear;
}

@keyframes jmc-flight-dot {
  0%,
  100% {
    opacity: 0.85;
    transform: scale(0.9);
  }

  50% {
    opacity: 1;
    transform: scale(1.16);
  }
}

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

  .jmc__flight-inner {
    transition: none;
  }
}

/* ------------------------------------------------------------- заставка */

.jmc__intro {
  position: absolute;
  inset: 0;
  z-index: 4;
  overflow: hidden;
  border-radius: var(--jm2-radius);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.jmc.is-ready .jmc__intro {
  opacity: 1;
}

/* Специфичность не ниже правила показа выше, иначе заставка остаётся висеть
   поверх карты после того, как облака разъехались. */
.jmc.is-ready .jmc__intro.is-done {
  pointer-events: none;
  opacity: 0;
}

.jmc__intro-map {
  position: absolute;
  inset: 0;
}

.jmc__intro-map img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Содержимое заставки по умолчанию скрыто и чуть опущено: появляется оно
   само, когда облака уже сошлись, и так же плавно уходит по клику. */
.jmc__stats,
.jmc__intro-center,
.jmc__intro-partners {
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity var(--jmc-content-ms) ease,
    transform var(--jmc-content-ms) ease;
}

/* Появление с небольшим разбегом: сперва цифры, затем заголовок и логотипы. */
.jmc.is-ready .jmc__intro:not(.is-fading) .jmc__stats,
.jmc.is-ready .jmc__intro:not(.is-fading) .jmc__intro-center,
.jmc.is-ready .jmc__intro:not(.is-fading) .jmc__intro-partners {
  opacity: 1;
  transform: none;
  transition-duration: var(--jmc-appear-ms);
}

.jmc.is-ready .jmc__intro:not(.is-fading) .jmc__stats {
  transition-delay: 0.35s;
}

.jmc.is-ready .jmc__intro:not(.is-fading) .jmc__intro-center {
  transition-delay: 0.5s;
}

.jmc.is-ready .jmc__intro:not(.is-fading) .jmc__intro-partners {
  transition-delay: 0.65s;
}

/* По клику первыми уходят заголовок, цифры и логотипы — облака трогаются
   только после них, иначе город проступает из-под облаков раньше, чем
   исчезает надпись поверх него. */
.jmc__intro.is-fading .jmc__stats,
.jmc__intro.is-fading .jmc__intro-center,
.jmc__intro.is-fading .jmc__intro-partners {
  opacity: 0;
  pointer-events: none;
}

/* Облака (Figma 1535-18350). Две копии одной кучевой пластины сходятся к
   центру и по клику уезжают обратно.

   Геометрия снята с макета (кадр 1440x880, пластина 2948x1659): высота
   пластины — 188.5% высоты сцены, её середина поднята на 20.5% выше середины
   кадра, а внутренний край заходит за центральную ось на 17.3% собственной
   ширины.

   Заход считаем от ширины самой пластины, а не от ширины окна: пластина
   растёт от высоты сцены, и при такой привязке нахлёст растёт вместе с ней.
   Привязка к ширине окна разрывала бы облака посередине на широких экранах —
   там половина кадра уезжает дальше, чем облако успевает дотянуться. */
.jmc__clouds {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
}

.jmc__cloud {
  position: absolute;
  top: 29.5%;
  width: auto;
  height: 188.5%;
  max-width: none;
  transition: transform var(--jmc-clouds-ms) cubic-bezier(0.33, 0, 0.2, 1);
}

.jmc__cloud--left {
  left: 50%;
  transform: translate(calc(-100% + 17.3% - 100vw), -50%);
}

.jmc__cloud--right {
  right: 50%;
  transform: translate(calc(100% - 17.3% + 100vw), -50%);
}

/* Только облака заставки: без .jmc__intro это правило достаёт и до шторы
   смены кадра, а оно специфичнее её базового положения — разведённая штора
   замирала бы в центре и пропадала рывком вместо того, чтобы уехать. */
.jmc.is-ready .jmc__intro .jmc__cloud--left {
  transform: translate(calc(-100% + 17.3%), -50%);
}

.jmc.is-ready .jmc__intro .jmc__cloud--right {
  transform: translate(calc(100% - 17.3%), -50%);
}

/* Правило ухода идёт после правила прихода: специфичность та же, побеждает
   последнее. */
.jmc.is-ready .jmc__intro.is-parting .jmc__cloud--left {
  transform: translate(calc(-100% + 17.3% - 100vw), -50%);
}

.jmc.is-ready .jmc__intro.is-parting .jmc__cloud--right {
  transform: translate(calc(100% - 17.3% + 100vw), -50%);
}

/* Облачная штора смены кадра. Облака те же, что на заставке, поэтому и
   положение берут из .jmc__cloud — здесь только слой и состояние: по
   умолчанию половинки за кадром, с is-closed сходятся к центру.

   Правило нахлёста повторяет заставочное, но своим селектором: у заставки оно
   висит на .jmc.is-ready, а штора открывается и закрывается уже после неё. */
.jmc__curtain {
  z-index: 6;
}

.jmc__curtain.is-closed .jmc__cloud--left {
  transform: translate(calc(-100% + 17.3%), -50%);
}

.jmc__curtain.is-closed .jmc__cloud--right {
  transform: translate(calc(100% - 17.3%), -50%);
}


/* Цифры хаба по верху заставки (Figma 1518-14769). Четыре равных колонки;
   токены макета: static/black #1c1c1c, text-3xl 32/40 и text-sm 14/20.
   Заставка всегда светлая, поэтому цвет берём прямым.

   Своего размытия у колонок нет: под ними и так пелена заставки, второй слой
   только замыливал облака пятном по верху кадра. */
.jmc__stats {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 3;
  display: grid;
  background: linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, 0) 100%);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  color: #1c1c1c;
  text-align: center;
}

.jmc__stats-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  justify-content: center;
  min-height: 116px;
  padding: 24px;
}

.jmc__stats-value {
  margin: 0;
  font-size: 40px;
  font-weight: 500;
  line-height: 40px;
}

.jmc__stats-label {
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  opacity: 0.7;
}

.jmc__intro-center {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

/* Заголовок с кнопкой — колонка по центру (Figma 1535-18357). */
.jmc__intro-content {
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-items: center;
  width: 100%;
  max-width: 600px;
}

/* Кнопка «Play» (Figma 1677-26467): жёлтая пилюля с бликом сверху, тёмной
   подложкой снизу — она и даёт объём — и жёлтым свечением вокруг. Цвета и
   тени прямые: заставка всегда светлая, темы у неё нет. */
.jmc__play {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 160px;
  /* 24px кадра кнопки плюс 4px внутренней обёртки текста из макета. */
  padding: 16px 28px;
  border: 0;
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%),
    #ffbe41;
  box-shadow:
    inset 0 1.25px 2.5px rgba(255, 255, 255, 0.2),
    0 2.5px 2.5px rgba(0, 0, 0, 0.1),
    0 5px 5px rgba(0, 0, 0, 0.1),
    0 2px 0 #7e632f,
    0 0 80px #ffcf74;
  color: #46330d;
  font-family: inherit;
  font-size: 20px;
  font-weight: 600;
  line-height: 28px;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.jmc__play:hover,
.jmc__play:focus-visible {
  transform: translateY(-2px);
}

/* Нажатие сажает кнопку на собственную подложку: опускаем ровно на её 2px и
   на столько же убираем — иначе кнопка просто съезжает вниз вместе с ней. */
.jmc__play:active {
  transform: translateY(2px);
  box-shadow:
    inset 0 1.25px 2.5px rgba(255, 255, 255, 0.2),
    0 2.5px 2.5px rgba(0, 0, 0, 0.1),
    0 0 80px #ffcf74;
}

/* Заголовок — градиентная заливка текста с тенью, как в макете. Градиент
   задан каждой строке: background-clip на флекс-контейнере обрезается по его
   собственному тексту, а он здесь пустой, и буквы остались бы прозрачными.

   Белое свечение из макета (0 0 80px / 40px) висит на самом заголовке, а не на
   строках: text-shadow при background-clip: text рисуется поверх заливки и
   затирает градиент, а фильтр работает по готовой картинке — свечение ложится
   вокруг букв, под ними. По той же причине фильтром задана и тёмная тень. */
.jmc__intro-title {
  display: flex;
  flex-direction: column;
  margin: 0;
  filter: drop-shadow(0 0 40px #fff) drop-shadow(0 0 80px #fff);
  font-size: clamp(48px, 7.2vw, 104px);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.06em;
  text-align: center;
  text-transform: uppercase;
}

.jmc__intro-title span {
  background: linear-gradient(180deg, #3bd1ec 0%, #4ea4ff 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter:
    drop-shadow(0 2px 0 #002860)
    drop-shadow(0 5px 5px rgba(0, 0, 0, 0.1))
    drop-shadow(0 2.5px 2.5px rgba(0, 0, 0, 0.1));
}

/* Стена логотипов по низу заставки (Figma 1518-14785): ряд с переносом,
   выключка по центру. Высота у каждого логотипа своя и приходит из разметки
   в --h — в макете они выровнены на глаз; --jmc-partner-k ужимает весь ряд,
   когда места мало. */
.jmc__intro-partners {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-content: center;
  align-items: center;
  justify-content: center;
  /* По бокам отступа нет: в макете ряд идёт во всю ширину кадра, и с ним в
     строку помещается на логотип больше. */
  padding: 16px 0;
  background: linear-gradient(0deg, #fff 0%, rgba(255, 255, 255, 0) 100%);
}

.jmc__partner {
  width: auto;
  height: calc(var(--h) * var(--jmc-partner-k, 1));
  max-width: none;
}

/* Сайт здания поверх сцены. Лежит выше перелёта и панели: пока он открыт,
   карта под ним не нужна. Фон тёмный — рамка не везде успевает закраситься
   своим, и на светлой карте это читалось бы вспышкой. */
.jmc__site {
  position: absolute;
  inset: 0;
  z-index: 6;
  overflow: hidden;
  border-radius: var(--jm2-radius);
  background: #1c1c1c;
}

.jmc__site-frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Крутилка на время загрузки сайта. Лежит поверх рамки и закрывает её своим
   фоном: пока чужая страница поднимается, в рамке пусто, и без этого вместо
   загрузки был бы просто тёмный прямоугольник. */
.jmc__site-loader {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #1c1c1c;
}

/* Крестик справа снизу, поверх рамки. Вид тот же, что у кнопки выхода на
   общий мир, — белый круг с тенью, он читается на любом сайте; и место то же,
   что у неё, так что «назад» у карты и у сайта всегда под одним углом экрана.
   Сверху его держать нельзя: там у чужих сайтов своя шапка с меню. */
.jmc__site-close {
  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 8px;
  border: 0;
  border-radius: 999px;
  background: #fff;
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.18),
    0 8px 20px rgba(0, 0, 0, 0.16);
  color: #1c1c1c;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.jmc__site-close:hover {
  transform: scale(1.06);
}

.jmc__site-close svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* ---------------------------------------------------------------- панель */

/* Картинка объекта, а пока её нет — заглушка (в макете шахматка 506x284) */
.jmc__panel-media.has-image {
  background: none;
}

/* Снимок кладём абсолютом: у картинки внутри блока с aspect-ratio высота в
   100% не считается, и реальный снимок распирал окошко под свои пропорции —
   пока картинок не было, это не вылезало. */
.jmc__panel-image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  object-fit: cover;
}

.jmc__panel-media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 506 / 285;
  border: 1px solid rgba(255, 255, 255, 0.12);
  margin-bottom: 16px;
  border-radius: 8px;
  background-color: rgba(255, 255, 255, 0.06);
  background-image: conic-gradient(
    rgba(255, 255, 255, 0.05) 0 25%,
    transparent 0 50%,
    rgba(255, 255, 255, 0.05) 0 75%,
    transparent 0
  );
  background-size: 32px 32px;
}

/* Выбор филиала в панели «Администрации». Нативный select, а не выпадашка на
   Alpine: девятнадцать пунктов, и на телефоне системный список удобнее
   самодельного — он не уезжает за край шторки. */
.jmc__select {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 0 16px;
}

.jmc__select-label {
  color: rgba(255, 255, 255, 0.6);
  font-size: 12px;
  line-height: 18px;
}

.jmc__select-field {
  width: 100%;
  padding: 10px 36px 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  line-height: 20px;
  cursor: pointer;
  /* appearance: none снимает системную стрелку вместе со всем оформлением
     поля, поэтому шеврон справа рисуем сами фоном. */
  appearance: none;
  background-color: rgba(255, 255, 255, 0.06);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5' stroke='%23ffffff' stroke-opacity='0.6' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px 12px;
}

.jmc__select-field:focus-visible {
  border-color: rgba(255, 255, 255, 0.4);
  outline: none;
}

/* Список системный, поэтому его пункты рисует ОС — задаём им тёмный фон явно,
   иначе на части платформ получится белый текст на белом. */
.jmc__select-field option {
  background: #1c1c1c;
  color: #fff;
}

/* ------------------------------------------------- тело панели объекта */

/* Панель собрана по Figma 1506-11506 и 1506-11511. В макете она светлая, у нас
   карта всегда тёмная, поэтому цвета взяты из тёмной темы того же макета:
   подложка карточек светлее панели, бренд-зелёный #4eb97e. */
.jmc__lead {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

.jmc__kicker {
  margin: 0;
  color: #4eb97e;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
}

.jmc__heading {
  margin: 0;
  color: #fff;
  font-size: 28px;
  font-weight: 600;
  line-height: 36px;
}

.jmc__carousel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}

/* Стрелки карусели. Лежат поверх снимка, поэтому с тёмной подложкой: фото
   бывают и светлые, на них белая стрелка без неё теряется. */
.jmc__arrows {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.jmc__arrow {
  position: absolute;
  top: 50%;
  left: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(28, 28, 28, 0.55);
  color: #fff;
  cursor: pointer;
  transform: translateY(-50%);
  transition: background 0.2s ease;
  pointer-events: auto;
}

.jmc__arrow--next {
  right: 8px;
  left: auto;
}

.jmc__arrow:hover,
.jmc__arrow:focus-visible {
  background: rgba(28, 28, 28, 0.8);
}

.jmc__arrow svg {
  width: 20px;
  height: 20px;
}

/* Точки карусели: активная вытягивается в пилюлю, как в макете. */
.jmc__dots {
  display: flex;
  gap: 8px;
  justify-content: center;
}

.jmc__dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.3);
  cursor: pointer;
  transition:
    width 0.2s ease,
    background 0.2s ease;
}

.jmc__dot.is-active {
  width: 16px;
  background: rgba(255, 255, 255, 0.75);
}

/* Имя объекта делит шапку с листалкой, и длинное название сталкивало её вниз
   строкой-другой. По макету оно урезается многоточием: шапка в одну строку.
   Правило своё, а не общее с нынешней картой, — там в шапке только крестик,
   и место заголовку уступать некому. */
.jmc__panel .jm2__panel-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Листалка рассказа в шапке панели (Figma 1763-29961): счётчик «2 из 3» и те
   же точки, что под каруселью картинок, — в макете это один компонент.

   Раньше она стояла в подвале рядом с «Назад» и «Далее»; теперь подвал занят
   призывами объекта, а слайд выбирают самой точкой. */
.jmc__slide-nav {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
}

/* text/placeholder на половинной прозрачности: счётчик подсказывает длину
   рассказа, а не зовёт читать себя. */
.jmc__slide-counter {
  display: flex;
  gap: 4px;
  margin: 0;
  opacity: 0.5;
  color: #b6b6b6;
  font-size: 12px;
  line-height: 16px;
  white-space: nowrap;
}

.jmc__panel-text {
  margin: 0 0 16px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 14px;
  line-height: 20px;
}

.jmc__copy .jmc__panel-text:last-child {
  margin-bottom: 0;
}

.jmc__copy {
  margin-bottom: 16px;
}

/* Показатели: две колонки карточек. */
.jmc__stats-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 16px;
}

.jmc__stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
  justify-content: center;
  min-height: 76px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.07);
  text-align: center;
}

.jmc__stat-value {
  margin: 0;
  color: #fff;
  font-size: 20px;
  line-height: 28px;
}

.jmc__stat-label {
  margin: 0;
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
  line-height: 20px;
}

/* Полоса заполнения (Figma 1518-13598). Карточка во всю ширину сетки, внутри
   полоса, название и заметка — всё по левому краю, а не по центру, как у
   карточек с числом. Цвета из макета: дорожка полупрозрачная белая, заливка и
   заметка — notice #ffcb67 в тёмной теме панели. */
.jmc__stat--progress {
  grid-column: 1 / -1;
  gap: 12px;
  align-items: stretch;
  justify-content: flex-start;
  min-height: 0;
  text-align: left;
}

.jmc__progress {
  overflow: hidden;
  width: 100%;
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
}

.jmc__progress-bar {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: #ffcb67;
}

/* Название и заметка идут одной группой: между ними 4px, а до полосы — 12px
   общего отступа карточки. */
.jmc__stat-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
}

.jmc__stat-title {
  margin: 0;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}

.jmc__stat-note {
  margin: 0;
  color: #ffcb67;
  font-size: 14px;
  line-height: 20px;
}

/* Кольцо заполнения. Дугу рисуем обводкой окружности: длину задаёт скрипт,
   поворот на -90° ставит начало дуги наверх. */
.jmc__ring {
  position: relative;
  width: 56px;
  height: 56px;
}

.jmc__ring svg {
  display: block;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.jmc__ring-track,
.jmc__ring-value {
  fill: none;
  stroke-width: 3;
}

.jmc__ring-track {
  stroke: rgba(255, 255, 255, 0.16);
}

.jmc__ring-value {
  stroke: #4eb97e;
  stroke-linecap: round;
}

/* Длинная пара вроде «528 / 3500» в кольцо 56px не помещается — для неё набор
   мельче, иначе надпись вылезает за дугу. */
.jmc__ring-text.is-long {
  font-size: 10px;
  line-height: 14px;
}

.jmc__ring-text {
  position: absolute;
  top: 50%;
  left: 50%;
  white-space: nowrap;
  color: #4eb97e;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  transform: translate(-50%, -50%);
}

/* Список: карточки с названием и описанием. */
.jmc__list-block {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}

.jmc__list-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.jmc__list-title {
  margin: 0;
  color: #fff;
  font-size: 20px;
  font-weight: 600;
  line-height: 28px;
}

.jmc__list-subtitle {
  margin: 0;
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
  line-height: 20px;
}

.jmc__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.jmc__list-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.07);
  color: inherit;
  text-decoration: none;
}

.jmc__list-item.is-link {
  transition: background 0.2s ease;
}

.jmc__list-item.is-link:hover,
.jmc__list-item.is-link:focus-visible {
  background: rgba(255, 255, 255, 0.12);
}

.jmc__list-item-title {
  margin: 0;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}

.jmc__list-item-text {
  margin: 0;
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
  line-height: 20px;
}

/* Карточки с логотипом (Figma 1518-13634) — второй вид списка в панели:
   кружок логотипа, название с подписью, абзацы и пилюли параметров.

   Макет отдаёт светлые значения токенов (surface/primary/background = white,
   text/strong = #1c1c1c), но панель карты всегда тёмная независимо от темы
   сайта — поэтому берём те же rgba, что и у списка выше: это один компонент
   макета, и две секции подряд не должны отличаться оттенком. */
.jmc__cards-block {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}

.jmc__cards {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.jmc__card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.07);
  color: inherit;
  text-decoration: none;
}

.jmc__card.is-link:hover,
.jmc__card.is-link:focus-visible {
  border-color: rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.12);
}

.jmc__card-main {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

/* Логотип — кружок 64x64. Картинки нет: показываем первую букву названия, как
   в карточке маркетплейса, — пустой круг читается как не загрузившийся файл. */
.jmc__card-logo {
  position: relative;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  width: 64px;
  height: 64px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.8);
  font-size: 24px;
  font-weight: 600;
  line-height: 32px;
}

.jmc__card-logo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.jmc__card-head {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.jmc__card-title {
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  text-wrap: balance;
}

.jmc__card-subtitle {
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
  line-height: 20px;
  text-wrap: pretty;
}

.jmc__card-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.12);
}

.jmc__card-text {
  color: rgba(255, 255, 255, 0.85);
  font-size: 14px;
  line-height: 20px;
  text-wrap: pretty;
}

/* Параметры в макете переносятся на следующую строку, а не ужимаются: пилюль
   у проекта может быть сколько угодно, а панель узкая. */
.jmc__card-params {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.jmc__pill {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  min-height: 24px;
  padding: 4px 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  color: #fff;
  font-size: 12px;
  line-height: 16px;
  white-space: nowrap;
}

/* Афиша мероприятий (Figma 1545-19482). Карточка лежачая: обложка 96x53
   слева, справа колонка — строка компании, название в две строки и
   «дата · время · город». Светлые значения токенов из макета здесь опять не
   годятся: панель всегда тёмная, берём ту же палитру, что у карточек выше. */
.jmc__events {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}

/* Лента в одну колонку, как в макете: лежачая карточка высотой 104 и так
   показывает несколько событий сразу, ради чего раньше делили на две. А в две
   колонки на эту карточку остаётся вдвое меньше ширины, и название начинает
   рваться по слогам рядом с обложкой. */
.jmc__event-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.jmc__event {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.07);
  color: inherit;
  text-decoration: none;
}

.jmc__event:hover,
.jmc__event:focus-visible {
  border-color: rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.12);
}

/* Обложка 96x53 из макета — те же 16:9 с точностью до округления. Ширина
   жёсткая, как в макете: колонка справа тянется, обложка нет. Снимки у событий
   разного размера, поэтому режем по центру, а не растягиваем. */
.jmc__event-cover {
  position: relative;
  display: block;
  flex: 0 0 96px;
  overflow: hidden;
  aspect-ratio: 96 / 53;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
}

.jmc__event-cover img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.jmc__event-info {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.jmc__event-company {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.jmc__event-avatar {
  position: relative;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  width: 16px;
  height: 16px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.8);
  font-size: 9px;
  font-weight: 500;
  line-height: 14px;
}

.jmc__event-avatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.jmc__event-company-name {
  overflow: hidden;
  color: rgba(255, 255, 255, 0.6);
  font-size: 12px;
  line-height: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Название в макете обрезается по ширине карточки, а не тянется вниз. */
.jmc__event-title {
  display: -webkit-box;
  overflow: hidden;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.jmc__event-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 12px;
  line-height: 16px;
}

.jmc__event-tag {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.jmc__event-dot {
  flex: 0 0 auto;
  width: 3px;
  height: 3px;
  border-radius: 999px;
  background: currentColor;
}

/* Вакансии компании (Figma 1843-17148). Карточка стоячая и без обложки:
   строка компании, название и параметры через точку — тот же PreviewCard, что
   у афиши, собранный из её же частей. Светлые значения токенов макета здесь
   опять не годятся: панель всегда тёмная, берём ту же палитру, что у карточек
   выше. Наведения нет совсем — карточка не кликается. */
.jmc__vacancies {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}

.jmc__vacancy-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.jmc__vacancy {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.07);
  min-width: 0;
}

.jmc__vacancy-company {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.jmc__vacancy-avatar {
  position: relative;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  width: 16px;
  height: 16px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.8);
  font-size: 9px;
  font-weight: 500;
  line-height: 14px;
}

.jmc__vacancy-avatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.jmc__vacancy-company-name {
  overflow: hidden;
  color: rgba(255, 255, 255, 0.6);
  font-size: 12px;
  line-height: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Название в макете обрезается по ширине карточки, а не тянется вниз. */
.jmc__vacancy-title {
  display: -webkit-box;
  overflow: hidden;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

/* В макете параметры стоят одной строкой, но там они короткие заглушки. На
   живых данных вилка зарплаты с занятостью и городом в 316 px не умещается,
   поэтому строке разрешено переноситься — иначе последний параметр съедался
   бы многоточием. */
.jmc__vacancy-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 12px;
  line-height: 16px;
}

.jmc__vacancy-tag {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.jmc__vacancy-dot {
  flex: 0 0 auto;
  width: 3px;
  height: 3px;
  border-radius: 999px;
  background: currentColor;
}

/* Витрина Hub Market. Сами карточки — те же, что на старой карте
   (.jm2-market__* из journey-map-v2.css, он здесь уже подключён), поэтому
   описывать тут нечего, кроме отбивки блока и числа колонок: панель города
   560 px против 640 у старой, и в три колонки название с автором в карточку
   уже не укладываются. */
.jmc__market {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}

.jmc__market .jm2-market__grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}


/* Кнопка в теле панели — переход на сайт объекта (Figma 1677-26317, кнопка
   «Закрыть» того же макета, 1691-26813). Стоит в теле, а не в подвале: там
   живёт навигация по слайдам, и рядом с «Далее» переход читался бы как
   следующий шаг того же рассказа. Есть он далеко не у каждого объекта.

   Набор по токенам тёмной темы: surface/primary/background #ffffff1a,
   surface/primary/border #e3e3e31a, text/strong #fff, text/size-md 16/24,
   border/radius-sm 8px, shadow/small. Зелёной она была по старому макету
   (1506-11511): рядом с золотым Boost два ярких призыва спорили бы за взгляд,
   и переход в макете стал спокойным. Отступ 20px — 16px кнопки и 4px
   обёртки текста. */
.jmc__panel-action {
  display: flex;
  gap: 4px;
  margin-top: 16px;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  padding: 12px 20px;
  border: 1px solid rgba(227, 227, 227, 0.1);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
  box-shadow:
    0 0 2px rgba(8, 40, 13, 0.02),
    0 2px 4px rgba(8, 40, 13, 0.05);
  color: #fff;
  font-family: inherit;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  text-align: center;
  cursor: pointer;
  transition:
    border-color 0.2s ease,
    background 0.2s ease;
}

/* Наведения и нажатия в макете нет — подсвечиваем ту же заливку и рамку, как
   у остальных прозрачных кнопок панели. */
.jmc__panel-action:hover,
.jmc__panel-action:focus-visible {
  border-color: rgba(227, 227, 227, 0.24);
  background: rgba(255, 255, 255, 0.16);
}

.jmc__panel-action:active {
  background: rgba(255, 255, 255, 0.2);
}

/* Игровая кнопка макета (Figma 1677-26506, ButtonGame). Ею в панели заданы два
   призыва: разгон здания (Boost) и ссылка объекта — то, ради чего панель и
   открывают. Рядом спокойный переход на сайт, так что спорить за взгляд им не
   приходится. Набор по токенам: surface/notice/background #ffbe41,
   text/on-notice #46330d, text/size-lg 20/28, border/radius-xl 20px.

   Собрана из четырёх слоёв макета: заливка с белым бликом сверху, две мягкие
   тени под кнопкой, тёмная полоса #7e632f в 2px — торец, на который кнопка
   опирается, и жёлтое свечение на 80px вокруг. Блик внутри — отдельная
   внутренняя тень, в background его не вписать. */
.jmc__game-btn {
  position: relative;
  display: flex;
  overflow: hidden;
  /* Полоса заполнения внутри кнопки смешивается с фоном (mix-blend-mode), и
     без своего слоя она доставала бы до подложки панели под кнопкой. */
  isolation: isolate;
  margin-top: 16px;
  gap: 4px;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 60px;
  padding: 16px 28px;
  border: 0;
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%),
    #ffbe41;
  box-shadow:
    0 2.5px 2.5px rgba(0, 0, 0, 0.1),
    0 5px 5px rgba(0, 0, 0, 0.1),
    0 2px 0 #7e632f,
    0 0 80px #ffcf74,
    inset 0 1.25px 2.5px rgba(255, 255, 255, 0.2);
  color: #46330d;
  font-family: inherit;
  font-size: 20px;
  font-weight: 600;
  line-height: 28px;
  text-align: center;
  /* Ссылка объекта остаётся ссылкой с настоящим href, поэтому у кнопки гасим
     подчёркивание и цвет посещённой: иначе в теле панели она выглядела бы
     кнопкой с чужим набором. */
  text-decoration: none;
  cursor: pointer;
  transition:
    box-shadow 0.2s ease,
    transform 0.1s ease;
}

/* Состояний наведения и нажатия в макете нет, поэтому берём их из самой
   кнопки: на наведении сильнее разгорается свечение, на нажатии кнопка садится
   на свой торец — те же 2px, на которых она стоит. */
.jmc__game-btn:hover,
.jmc__game-btn:focus-visible {
  box-shadow:
    0 2.5px 2.5px rgba(0, 0, 0, 0.1),
    0 5px 5px rgba(0, 0, 0, 0.1),
    0 2px 0 #7e632f,
    0 0 100px 10px #ffcf74,
    inset 0 1.25px 2.5px rgba(255, 255, 255, 0.2);
}

.jmc__game-btn:active {
  transform: translateY(2px);
  box-shadow:
    0 1px 1px rgba(0, 0, 0, 0.1),
    0 0 0 #7e632f,
    0 0 60px #ffcf74,
    inset 0 1.25px 2.5px rgba(255, 255, 255, 0.2);
}

@media (prefers-reduced-motion: reduce) {
  .jmc__game-btn {
    transition: none;
  }
}
/* Состояния кнопки разгона: пока идёт стройка (Figma 1741-27898) и после неё
   (1741-27900). Кнопка остаётся на месте — сперва показывает ход, потом
   служит отметкой «разогнано».

   Обе ведут себя как нажатая: наведения и своего нажатия у них нет, иначе
   кнопка отзывалась бы на то, чего уже не предлагает. */
.jmc__game-btn:disabled {
  cursor: default;
}

/* Стройка: кнопка вжата (0.95 из макета — там все размеры на эту долю
   мельче), свечение слабее, а по ней идёт полоса заполнения. */
.jmc__game-btn.is-building,
.jmc__game-btn.is-building:hover,
.jmc__game-btn.is-building:focus-visible {
  transform: scale(0.95);
  box-shadow:
    0 2.5px 2.5px rgba(0, 0, 0, 0.1),
    0 5px 5px rgba(0, 0, 0, 0.1),
    0 2px 0 #7e632f,
    0 0 76px rgba(255, 207, 116, 0.5),
    inset 0 1.25px 2.5px rgba(255, 255, 255, 0.2);
}

/* Разогнано: свечение снято, золото обесцвечено наложением ниже, подпись и
   галочка приглушены. */
.jmc__game-btn.is-done,
.jmc__game-btn.is-done:hover,
.jmc__game-btn.is-done:focus-visible {
  box-shadow:
    0 2.5px 2.5px rgba(0, 0, 0, 0.1),
    0 5px 5px rgba(0, 0, 0, 0.1),
    0 2px 0 #7e632f,
    inset 0 1.25px 2.5px rgba(255, 255, 255, 0.2);
  color: #1c1c1c;
}

/* Полоса заполнения внутри кнопки. Белая в режиме soft-light, как в макете:
   так она высветляет золото кнопки, а не кладёт поверх него чужой цвет. */
.jmc__game-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  /* Скругление берём у кнопки: иначе на её закруглениях из-под наложения
     вылезает золото углами. */
  border-radius: inherit;
  background: #fff;
  mix-blend-mode: soft-light;
  pointer-events: none;
}

/* Та же полоса во всю кнопку, но в режиме saturation: белый отдаёт свою
   насыщенность — нулевую, — и золото становится серым. Обесцвечиваем
   наложением, а не фильтром по кнопке: фильтр увёл бы в серое и тени с
   торцом, которые в макете остаются своими. */
.jmc__game-fill--done {
  right: 0;
  mix-blend-mode: saturation;
}

.jmc__game-tick {
  display: block;
  flex: 0 0 auto;
  width: 24px;
  height: 25px;
  opacity: 0.5;
}

.jmc__game-btn.is-done .jmc__game-label {
  opacity: 0.5;
}

/* Подпись и галочка лежат над наложением: иначе saturation съело бы и их. */
.jmc__game-label,
.jmc__game-tick {
  position: relative;
}


/* Форма записи на месте рассказа (Figma 1770-31812). Набор по токенам тёмной
   темы: карточка — surface/secondary/background #1c1c1c33 в рамке
   surface/primary/border #e3e3e31a и border/radius-md 12, поля внутри —
   surface/primary/background #ffffff1a и border/radius-sm 8.

   Прокрутку и отступы берёт у тела панели (jm2__panel-body): это тот же слой
   между шапкой и подвалом, просто с другим содержимым. */
.jmc__form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Возврат к рассказу: ссылка цветом text/brand, а не кнопка-призыв — уводить
   она никуда не уводит. */
.jmc__form-back {
  display: inline-flex;
  flex: 0 0 auto;
  gap: 4px;
  align-self: flex-start;
  align-items: center;
  padding: 0;
  border: 0;
  background: none;
  color: #4eb97e;
  font-family: inherit;
  font-size: 14px;
  line-height: 20px;
  cursor: pointer;
}

.jmc__form-back svg {
  width: 20px;
  height: 20px;
}

/* Heading/1 макета: 32/40 DemiBold. */
.jmc__form-title {
  margin: 0;
  color: #fff;
  font-size: 32px;
  font-weight: 600;
  line-height: 40px;
}

/* Подзаголовок — form_subtitle из «Контента»: чей это набор. */
.jmc__form-subtitle {
  margin: 0;
  color: rgba(255, 255, 255, 0.6);
  font-size: 16px;
  line-height: 24px;
}

.jmc__form-fields {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.jmc__form-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px;
  border: 1px solid rgba(227, 227, 227, 0.1);
  border-radius: 12px;
  background: rgba(28, 28, 28, 0.2);
}

.jmc__form-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.jmc__form-group-title {
  margin: 0;
  padding: 8px 12px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 12px;
  line-height: 16px;
}

.jmc__form-rows {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(227, 227, 227, 0.1);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
}

/* Строка — label: щелчок по ней и по карандашу ставит курсор в поле.
   Разделителем служит рамка соседа, у первой строки её нет — иначе линия
   легла бы сразу под рамкой самого блока. */
.jmc__form-row {
  display: flex;
  gap: 4px;
  align-items: center;
  padding: 8px;
  cursor: text;
}

.jmc__form-row + .jmc__form-row {
  border-top: 1px solid rgba(227, 227, 227, 0.1);
}

.jmc__form-field {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
}

.jmc__form-key {
  display: flex;
  gap: 4px;
  align-items: center;
  padding: 4px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
  line-height: 20px;
}

/* Звёздочка обязательного поля — icon/negative макета. */
.jmc__form-req {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  color: #ff5576;
}

/* Значение правят прямо в строке, поэтому это поле ввода, а не текст. Рамки и
   фона у него нет: в макете строка выглядит записью, а не формой. */
.jmc__form-input {
  width: 100%;
  padding: 4px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}

.jmc__form-input::placeholder {
  color: rgba(255, 255, 255, 0.4);
  font-weight: 400;
}

/* Автозаполнение браузера красит поле своим белым фоном — на тёмной панели
   это белая плашка с белым же текстом.

   Фон у него задан «сверху» всех правил, перебить его цветом нельзя, зато
   можно не дать ему примениться: Chrome доводит этот фон переходом, и с
   отложенным на вечность переходом поле остаётся прозрачным. Firefox ставит
   фон фильтром — его снимаем filter: none. Цвет текста автозаполнения меняется
   только через -webkit-text-fill-color. */
.jmc__form-input:-webkit-autofill,
.jmc__form-input:-webkit-autofill:hover,
.jmc__form-input:-webkit-autofill:focus {
  -webkit-text-fill-color: #fff;
  caret-color: #fff;
  transition:
    background-color 0s 100000s,
    color 0s 100000s;
}

/* Отдельным правилом, а не в списке выше: браузер, который не знает
   :autofill, выбросил бы весь список вместе с -webkit-вариантами. */
.jmc__form-input:autofill {
  filter: none;
  caret-color: #fff;
  transition:
    background-color 0s 100000s,
    color 0s 100000s;
}

.jmc__form-input:focus-visible {
  outline: 0;
  background: rgba(255, 255, 255, 0.1);
}

.jmc__form-edit {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.4);
}

.jmc__form-edit svg {
  width: 20px;
  height: 20px;
}

/* Кнопка отправки стоит в правом углу своей строки, а не во всю ширину: в
   подвале панели во всю ширину идут призывы здания, а это конец формы. */
.jmc__form-controls {
  display: flex;
  justify-content: flex-end;
}

.jmc__form-submit {
  display: flex;
  gap: 4px;
  align-items: center;
  justify-content: center;
  padding: 12px 20px;
  border: 0;
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%),
    #4eb97e;
  box-shadow:
    0 0 2px rgba(8, 40, 13, 0.02),
    0 2px 4px rgba(8, 40, 13, 0.05);
  color: #effaf3;
  font-family: inherit;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  cursor: pointer;
  transition: filter 0.2s ease;
}

.jmc__form-submit:hover,
.jmc__form-submit:focus-visible {
  filter: brightness(1.08);
}

.jmc__form-submit:active {
  filter: brightness(0.96);
}

/* Приложение портала на месте тела панели (сейчас это чат alem.gpt). Занимает
   ровно ту же полосу, что и тело: шапка и подвал панели остаются на виду, и
   видно, что сервис открыт внутри здания, а не поверх карты. */
.jmc__app {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.jmc__app-frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Пока страница чата поднимается, рамка пуста — закрываем её своим фоном,
   иначе вместо загрузки был бы тёмный прямоугольник. Фон плотный: тело панели
   стеклянное, и сквозь крутилку просвечивала бы карта. */
.jmc__app-loader {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #1c1c1c;
}

/* Подвал панели (Figma 1757-29472): крестик и призывы объекта одним рядом.
   Лежит вне тела, поэтому не уезжает вместе с рассказом — ради этого кнопки
   сюда и переехали из конца тела.

   Ряд переносится: у редкого здания есть и ссылка из «Контента», и свой сайт,
   и вдвоём они в 560px панели сжались бы до многоточий. */
.jmc__panel-foot {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  padding: 16px;
  border-top: 1px solid rgba(227, 227, 227, 0.1);
}

/* Призыв занимает всё, что осталось от крестика. В теле он стоял во всю
   ширину с отступом сверху — в ряду и то, и другое лишнее. */
.jmc__panel-foot > .jmc__game-btn,
.jmc__panel-foot > .jmc__panel-action {
  flex: 1 1 160px;
  width: auto;
  margin-top: 0;
}

/* Спокойный переход ростом с игровую кнопку: в ряду разновысокие кнопки
   читались бы как разные по важности, а в макете они одного роста. */
.jmc__panel-foot > .jmc__panel-action {
  min-height: 60px;
}

/* Крестик вместо прежней кнопки «Закрыть» (Figma 1757-29473, IconButton).
   Набор тот же, что у спокойного перехода: surface/primary/background
   #ffffff1a, surface/primary/border #e3e3e31a, border/radius-xl 20px.

   Квадрат 60x60 — ростом с игровую кнопку ряда. Размер задан обеими
   сторонами: от align-self: stretch с aspect-ratio квадрат не получался —
   в ряду ширину флекс считает по содержимому (24px крестик и отступы, итого
   50px) и только потом тянет высоту, так что кнопка выходила 50x60. */
.jmc__close-btn {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 60px;
  height: 60px;
  padding: 12px;
  border: 1px solid rgba(227, 227, 227, 0.1);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.1);
  box-shadow:
    0 0 2px rgba(8, 40, 13, 0.02),
    0 2px 4px rgba(8, 40, 13, 0.05);
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  transition:
    border-color 0.2s ease,
    background 0.2s ease,
    color 0.2s ease;
}

.jmc__close-btn:hover,
.jmc__close-btn:focus-visible {
  border-color: rgba(227, 227, 227, 0.24);
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}

.jmc__close-btn:active {
  background: rgba(255, 255, 255, 0.2);
}

/* Здание без призывов: крестик в подвале один и занимает его целиком —
   квадрат 60x60 у края оставлял бы рядом пустую полосу во всю панель.
   Класс вешает Alpine (panelHasAction): призывы скрыты x-show и из разметки
   не исчезают, поэтому :only-child тут не годится. */
.jmc__panel-foot.is-alone > .jmc__close-btn {
  width: 100%;
}

/* Подпись рядом с крестиком — только у кнопки во всю ширину (показывает её
   Alpine по тому же условию). Набор прежней кнопки «Закрыть»: text/size-md
   16/24. Цвет не задаём — пусть идёт от кнопки, тогда на наведении слово и
   крестик разгораются вместе. */
.jmc__close-label {
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
}

/* На узких экранах карта занимает весь экран при любой высоте устройства, а
   панель ложится поверх неё шторкой снизу: рядом они не помещаются, а резать
   карту по высоте нельзя — под ней оставался пустой фон страницы. */
@media (max-width: 1024px) {
  .jmc {
    display: block;
  }

  /* Четыре колонки цифр живут только на широком экране. Уже — колонка
     становится уже самого слова, и цифра рассыпается по букве в строку, а блок
     вырастает на всю заставку и накрывает заголовок. Поэтому ниже 1024px
     колонки две, и набор мельче. */
  .jmc__stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Логотипов два десятка: в полный рост они занимают пол-заставки. */
  .jmc__intro-partners {
    --jmc-partner-k: 0.8;

    gap: 16px;
    padding: 12px;
  }

  .jmc__stats-item {
    gap: 4px;
    min-height: 0;
    padding: 16px 12px;
  }

  .jmc__stats-value {
    font-size: 22px;
    line-height: 28px;
  }

  .jmc__stats-label {
    font-size: 12px;
    line-height: 16px;
  }

  .jmc__stage {
    min-height: calc(100dvh - var(--jm2-header-h, 75px) - var(--jm2-page-gap, 64px));
    height: calc(100dvh - var(--jm2-header-h, 75px) - var(--jm2-page-gap, 64px));
  }

  .jmc__panel {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 5;
    max-width: 100%;
    max-height: 80%;
    /* Шторка лежит на светлой карте, поэтому стеклянный фон рабочей версии
       здесь заменяем плотным: иначе текст читается поверх зданий. */
    background: rgba(28, 28, 28, 0.94);
  }

  /* Ширину шторке анимировать нечего — она во весь экран, остаётся плавность
     появления. */
  .jmc__panel.jm2__panel--closed,
  .jmc__panel.jm2__panel--open {
    width: 100%;
  }

  .jmc__panel.jm2__panel--closed {
    transform: translateY(100%);
  }

  .jmc__panel.jm2__panel--anim {
    transition:
      transform var(--jm2-panel-ms) cubic-bezier(0.33, 0, 0.2, 1),
      opacity 0.25s ease;
  }

  /* Шторка ограничена по высоте, и подвал с крестиком должен оставаться на
     виду: прокручиваем тело, а не всю панель. Общий набор карты ниже 960px
     отдаёт прокрутку странице — там панель стоит под картой и в высоту не
     упирается, а шторка упирается. */
  .jmc__panel .jm2__panel-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
  }

  /* У шторки высота от содержимого, а у рамки приложения своего роста нет:
     одним flex: 1 она схлопнулась бы в полоску между шапкой и подвалом.
     Задаём ей рост явно — чат должен быть высоким, а выше шторку всё равно не
     пустит её max-height. */
  .jmc__app {
    min-height: 60dvh;
  }
}

@media (max-width: 560px) {
  /* На телефоне половина шторки — это уже не карточка, а колонка в две буквы:
     афишу возвращаем в один столбец. */
  .jmc__event-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .jmc__stats-item {
    padding: 12px;
  }

  .jmc__stats-value {
    font-size: 20px;
    line-height: 26px;
  }

  .jmc__intro-partners {
    --jmc-partner-k: 0.6;

    gap: 12px;
  }
}

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