/* Карта-указатель для консолей: геометрия слоёв #shared/lib/minimap.js.
 *
 * ПОЧЕМУ ОБЩИЙ ФАЙЛ, ХОТЯ СТИЛИ ПРИЛОЖЕНИЙ НЕ ОБЩИЕ. Здесь нет палитры: цвета
 * берутся из токенов приложения (--surface, --line, --acc), а у самой карты
 * геометрия — тайлы позиционируются трансформами из кода, и повторять эти
 * тридцать строк в консоли клуба и консоли платформы значило бы держать два
 * файла, которые обязаны совпадать до пикселя.
 *
 * Каталог клубов свои .mm держит отдельно (apps/finder/styles/screens.css): у
 * него светлая палитра, карта на весь экран и шторка со списком поверх — там
 * это часть раскладки экрана, а не вставка в форму.
 */

.mm {
  /* Холст растягивается на отведённый ему блок: высоту задаёт приложение
     (.mm-box), а слои внутри позиционируются от этого холста. */
  position: relative;
  height: 100%;
  overflow: hidden;
  touch-action: none;
  cursor: grab;
  border-radius: var(--r-sm, 10px);
  background: var(--surface, #14131f);
  border: 1px solid var(--line, rgba(255, 255, 255, .12));
}
.mm.drag { cursor: grabbing; }
/* В режиме указателя курсор говорит, что клик — это действие. */
.mm.pick { cursor: crosshair; }
.mm.pick.drag { cursor: grabbing; }

.mm-tiles, .mm-markers, .mm-pins { position: absolute; inset: 0; }
.mm-markers, .mm-pins { pointer-events: none; }
.mm-tile {
  position: absolute; left: 0; top: 0; width: 256px; height: 256px;
  will-change: transform; user-select: none; -webkit-user-drag: none;
}

/* Пин: капля острием в точку. Кружком её не нарисовать — по кружку не понять,
   где именно стоит клуб, а полквартала в городе это другая улица.
 *
 * Поворот живёт на ::before, а не на самом пине: положение пина задаёт JS через
 * `transform`, а отдельное свойство `rotate` по спецификации применяется ДО
 * transform-списка — то есть разворачивает и сдвиг тоже, и пин уезжает из
 * карты в другой угол экрана (проверено: −45° уносит его на 280 px вверх).
 *
 * Сдвиг −4px: остриё повёрнутого квадрата выходит на 3,7px ниже его коробки
 * (сторона 18px, поворот вокруг центра), а JS ставит коробку нижней кромкой на
 * точку. Без поправки клуб оказывался бы на четыре пикселя севернее. */
.mm-pin { position: absolute; left: 0; top: 0; width: 18px; height: 18px; margin-top: -4px; }
.mm-pin::before {
  content: ''; position: absolute; inset: 0;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  background: var(--acc, #7C5CFF);
  border: 2px solid #fff;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .45);
}
.mm-pin::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 6px; height: 6px; margin: -3px 0 0 -3px;
  border-radius: 50%; background: #fff;
}

.mm-zoom { position: absolute; right: 10px; top: 10px; z-index: 12; display: flex; flex-direction: column; gap: 6px; }
.mm-zbtn {
  width: 30px; height: 30px; border-radius: 8px; cursor: pointer;
  background: var(--surface, #14131f); border: 1px solid var(--line, rgba(255, 255, 255, .14));
  color: var(--text, #fff); display: grid; place-items: center; font-size: 15px;
}
.mm-zbtn:hover { border-color: var(--acc, #7C5CFF); }
.mm-credit {
  position: absolute; left: 8px; bottom: 6px; z-index: 11; font-size: 10px;
  color: var(--muted, #9b98ad); background: rgba(0, 0, 0, .45); border-radius: 4px; padding: 2px 6px;
}