/* ============================================================================
   globe.css — контейнер и SSR-плейсхолдер для 3D-глобуса точек замера.
   Прогрессивное обогащение: без JS/WebGL остаётся читаемый плейсхолдер
   «СПб · Москва · Стокгольм». Палитра Monad (тёплый светлый + .dark).
   ========================================================================== */

.crn-globe {
  position: relative;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  aspect-ratio: 4 / 3;              /* держит место до/после загрузки — без CLS */
  min-height: 240px;
  border-radius: 18px;
  overflow: hidden;
  background:                       /* мягкое тёплое свечение под глобусом */
    radial-gradient(70% 70% at 50% 42%, rgba(39,163,103,.06), transparent 70%),
    #f1ece8;
  border: 1px solid rgba(58,53,48,.08);
}

/* сам canvas three вставляется скриптом; растягиваем на контейнер */
.crn-globe > canvas {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
}

/* ── SSR-плейсхолдер (виден, пока/если глобус не загрузился) ──────────── */
.crn-globe__fallback {
  position: absolute;
  inset: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 20px;
  text-align: center;
}

.crn-globe__pt {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border-radius: 999px;
  font: 600 14px/1.2 -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background: #fff;
  border: 1px solid rgba(58,53,48,.1);
  color: #3a3530;
}
.crn-globe__pt::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: none;
}
.crn-globe__pt--rf::before     { background: #27a367; }  /* РФ зелёный */
.crn-globe__pt--abroad::before { background: #2b7fdd; }  /* зарубеж синий */

/* ── Тёмная тема ──────────────────────────────────────────────────────── */
.dark .crn-globe {
  background:
    radial-gradient(70% 70% at 50% 42%, rgba(53,196,125,.08), transparent 70%),
    #1c2127;
  border-color: rgba(255,255,255,.08);
}
.dark .crn-globe__pt {
  background: #242b33;
  border-color: rgba(255,255,255,.1);
  color: #e8ebef;
}

@media (prefers-color-scheme: dark) {
  .crn-globe:not(.crn-globe--light) {
    background:
      radial-gradient(70% 70% at 50% 42%, rgba(53,196,125,.08), transparent 70%),
      #1c2127;
    border-color: rgba(255,255,255,.08);
  }
  .crn-globe:not(.crn-globe--light) .crn-globe__pt {
    background: #242b33;
    border-color: rgba(255,255,255,.1);
    color: #e8ebef;
  }
}