/* Карта мира — единственная тёмная поверхность сервиса.
 *
 * Тон выбран не по моде, а по работе: на карте главное — цвет значения, а
 * двадцать пять ступеней шкалы от фиолетового до бордового читаются только на
 * тёмном грунте. На белом та же шкала выцветает, и холодная половина сливается
 * с фоном. Остальной сайт остаётся светлым: там главное — текст.
 */

/* Тёмная здесь только карта. Страница остаётся светлой, как весь сервис:
   грунт задаёт канонический хром зоны, и перекрашивать его локально нельзя —
   а главное, незачем. Карта работает ровно как окно неба на главной: тёмный
   кадр в светлой странице, и от этого он весомее, чем если бы тёмным стало
   всё. */
.is-map {
  --m-ground: #0b1120;      /* вода и поле карты */
  --m-land: #1b2634;        /* суша */
  --m-ink: #e7ecf5;         /* чернила ВНУТРИ карты */
  --m-muted: #8b97ad;
  --m-line: rgba(150, 175, 205, .22);
  --m-panel: rgba(12, 18, 30, .82);
}

/* Браузерные поверхности тоже наши: выделение, полоса прокрутки и кольцо
   фокуса приходят из палитры карты, а не из настроек системы. */
.is-map ::selection { background: rgba(20, 60, 120, .16); }
.map ::selection { background: rgba(120, 170, 235, .35); color: #fff; }
.is-map :focus-visible { outline: 2px solid #2f6fd0; outline-offset: 2px; border-radius: 6px; }
.map :focus-visible { outline-color: #7fb2ff; }

/* Карта шире колонки текста: это объект, а не иллюстрация к абзацу.
   На широких экранах она выходит за контейнер страницы в обе стороны. */
#page-content.mapshell {
  width: min(1560px, 100vw - 32px);
  max-width: none;
  margin: 0 auto;
  padding: 18px 0 40px;
}

.mapshell__head { margin-bottom: 14px; }
.mapshell__head h1 {
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: .95;
  letter-spacing: -.03em;
  font-weight: 700;
  margin: 0;
}
.mapshell__head p {
  margin: 8px 0 0;
  color: var(--ck-muted, #667085);
  font-size: 15px;
  max-width: 62ch;
}

/* ── поле карты ─────────────────────────────────────────────────────────── */

.map {
  position: relative;
  height: clamp(460px, 74vh, 860px);
  border-radius: 16px;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% 0%, #101a2d 0%, var(--m-ground) 62%);
  border: 1px solid var(--m-line);
  touch-action: none;
}

.map__land,
.map__dots { position: absolute; inset: 0; display: block; }
.map__dots { cursor: grab; }
.map__dots.is-dragging { cursor: grabbing; }

/* ── подпись под курсором ──────────────────────────────────────────────── */

.map__readout {
  position: absolute;
  left: var(--x, 0); top: var(--y, 0);
  transform: translate(14px, -50%);
  display: grid;
  gap: 2px;
  padding: 8px 12px;
  border-radius: 12px;
  background: var(--m-panel);
  border: 1px solid var(--m-line);
  backdrop-filter: blur(10px);
  pointer-events: none;
  box-shadow: 0 10px 30px rgba(4, 8, 16, .45);
}
.map__readout strong { font-size: 22px; line-height: 1; letter-spacing: -.02em; }
.map__readout span { font-size: 12px; color: var(--m-muted); }

/* ── состояние ─────────────────────────────────────────────────────────── */

.map__status {
  position: absolute; left: 14px; top: 14px;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 12px 7px 10px;
  border-radius: 999px;
  background: var(--m-panel);
  border: 1px solid var(--m-line);
  backdrop-filter: blur(10px);
  font-size: 12px; color: var(--m-muted);
}
.map__status-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #4ec262;
}
.map__status[data-state="loading"] .map__status-dot { background: #7fb2ff; animation: map-pulse 1.1s ease-in-out infinite; }
.map__status[data-state="error"] .map__status-dot { background: #e15e5d; }
.map__status .map__status-text { display: none; }
.map__status[data-state="loading"] [data-loading] { display: inline; }
.map__status[data-state="error"] [data-error] { display: inline; }
.map__status[data-state="ready"] {
  opacity: 0; visibility: hidden;
  transition: opacity .4s cubic-bezier(.25,.46,.45,.94), visibility 0s .4s;
}

@keyframes map-pulse { 0%, 100% { opacity: .35 } 50% { opacity: 1 } }

/* ── масштаб ───────────────────────────────────────────────────────────── */

.map__zoom {
  position: absolute; right: 14px; top: 14px;
  display: grid; gap: 6px;
}
.map__zoom button {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border: 1px solid var(--m-line);
  border-radius: 12px;
  background: var(--m-panel);
  backdrop-filter: blur(10px);
  color: var(--m-ink);
  cursor: pointer;
  transition: background .15s cubic-bezier(.4,0,.2,1), transform .15s cubic-bezier(.4,0,.2,1);
}
.map__zoom button:hover { background: rgba(30, 44, 68, .9); }
.map__zoom button:active { transform: scale(.94); }
.map__zoom svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }

/* ── шкала ─────────────────────────────────────────────────────────────── */

.map__legend {
  position: absolute; left: 14px; bottom: 14px;
  display: flex; align-items: center; gap: 8px;
  padding: 7px 12px;
  border-radius: 999px;
  background: var(--m-panel);
  border: 1px solid var(--m-line);
  backdrop-filter: blur(10px);
  font-size: 11px; color: var(--m-muted);
}
.map__ramp {
  width: clamp(120px, 26vw, 260px); height: 8px; border-radius: 999px;
  /* Те же ступени, что рисует скрипт: шкала на экране и шкала в коде обязаны
     быть одной величиной, иначе легенда врёт. */
  background: linear-gradient(90deg,
    #1a0d64 0%, #2e2270 5%, #52478d 11%, #554eb1 16%, #5057b8 22%, #4369c4 27%,
    #3988c7 33%, #40a0b4 38%, #4bb698 44%, #4ec262 50%, #6cd150 53%, #95db46 57%,
    #bee43d 60%, #dcea37 63%, #ebe035 66%, #ebce35 70%, #eab939 73%, #eaa43e 76%,
    #e98f43 80%, #e97b48 83%, #e15e5d 86%, #d94272 90%, #be3066 93%, #a31b56 96%,
    #2b0001 100%);
}

/* ── время ─────────────────────────────────────────────────────────────── */

.map__time {
  display: flex; align-items: center; gap: 14px;
  margin-top: 14px;
}
.map__time input[type="range"] {
  flex: 1;
  appearance: none;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, #c9d6e8, #7ea2d4);
}
.map__time input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 20px; height: 20px; border-radius: 50%;
  background: #17233a;
  border: 3px solid #fff;
  cursor: pointer;
}
.map__time input[type="range"]::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--m-ink); border: 3px solid #1b2740; cursor: pointer;
}
.map__time output {
  min-width: 13ch;
  font-size: 13px;
  color: var(--ck-muted, #667085);
  font-variant-numeric: tabular-nums;
}

.map__note {
  margin: 14px 0 0;
  font-size: 13px;
  color: var(--ck-muted, #667085);
  max-width: 70ch;
}

@media (max-width: 700px) {
  .map { height: clamp(380px, 62vh, 560px); border-radius: 12px; }
  .map__legend { font-size: 10px; padding: 6px 10px; }
  .map__time { flex-wrap: wrap; }
  /* Внизу узкого экрана живёт навигация канонического хрома: без этого поля
     последние строки уезжают под неё. */
  #page-content.mapshell { padding-bottom: 104px; }
}

@media (prefers-reduced-motion: reduce) {
  .map__status[data-state="loading"] .map__status-dot { animation: none; }
}

/* Слои карты (температура / осадки) и легенда осадков. */
.maplayers { display: inline-flex; gap: 4px; margin-top: 12px; padding: 3px; border-radius: var(--wx-pill); background: rgba(255,255,255,.08); }
.maplayers button { height: 32px; padding: 0 14px; border: 0; border-radius: var(--wx-pill); background: none; color: inherit; font: inherit; font-size: 14px; opacity: .75; cursor: pointer; transition: background-color .2s, opacity .2s; }
.maplayers button[aria-pressed="true"] { background: rgba(255,255,255,.18); opacity: 1; font-weight: 600; }
.maplegend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; list-style: none; font-size: 13px; opacity: .9; }
.maplegend li { display: inline-flex; align-items: center; gap: 6px; }
.maplegend i { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }