/* Невод (карта скрытой мобилизации) — альфа.
   Дизайн-система в духе Яндекс Карт: белые панели вплотную к краям экрана,
   нейтральная гарнитура (YS Text → Arial), жёлтая главная кнопка с чёрным
   текстом, чёрные активные чипы, вкладки с подчёркиванием, спокойные серые
   разделители. Никаких стеклянных эффектов и декоративных шрифтов. */
:root {
  /* YS Text (фирменный шрифт Яндекса) проприетарный; Golos Text — его
     свободный ближайший родственник, рисованный для русских интерфейсов.
     На системный Arial/Segoe не падаем — владельцу они не нравятся. */
  --font: "Golos Text", "YS Text", "Helvetica Neue", Arial, sans-serif;

  --text: #21201f;
  --text-2: #7f7e7a;          /* вторичный текст */
  --text-3: #a5a4a1;          /* подписи осей, футер */
  --line: #f1f0ee;            /* разделители */
  --border: #e8e7e4;          /* границы чипов и полей */
  --hover: #f5f4f2;           /* подсветка строк */
  --page: #f1f0ee;

  --yellow: #fc0;             /* главное действие */
  --yellow-h: #ffd11a;
  --red: #ff4433;             /* тревога, кластеры */
  --link: #1a5ce5;
  --green: #2fa84f;

  --shadow-panel: 0 0 24px rgba(33, 32, 31, 0.10);
  --shadow-float: 0 4px 16px rgba(33, 32, 31, 0.16);
  --shadow-card: 0 1px 4px rgba(33, 32, 31, 0.08);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }
body {
  font-family: var(--font);
  color: var(--text);
  background: var(--page);
  overflow: hidden;
}
button { font-family: inherit; }

/* ── сцена ───────────────────────────────────────── */
.shell { position: fixed; inset: 0; }
#map { position: absolute; inset: 0; }

/* ── кнопки над картой ───────────────────────────────
   Прижаты к правому краю карты (у ленты). «Облавы» стоят СЛЕВА от
   «Сообщить», поэтому их появление растит ряд влево, а главная кнопка
   не сдвигается ни на пиксель. */
.map-top {
  position: absolute; top: 12px; right: 316px; z-index: 11;  /* левее колонки фильтров */
  display: flex; align-items: center; gap: 8px;
}

/* ── нижняя строка управления (01.09): зум · период · поиск · сообщить ── */
.map-bottom {
  position: absolute; bottom: 14px; left: 376px; right: 320px; z-index: 11;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.mb-zoom {
  display: flex; background: #fff; border-radius: 12px;
  box-shadow: var(--shadow-float); overflow: hidden; flex: none;
}
.mb-zoom button {
  width: 40px; height: 40px; border: 0; background: transparent;
  font-size: 20px; line-height: 1; color: var(--text); cursor: pointer;
}
.mb-zoom button:hover { background: var(--hover); }
.mb-zoom button + button { border-left: 1px solid var(--line); }
.mb-period {
  background: #fff; border-radius: 12px; box-shadow: var(--shadow-float);
  padding: 4px 6px; flex: none;
}
.mb-search { position: relative; flex: 1; min-width: 170px; max-width: 300px; }
.mb-search input {
  width: 100%; height: 40px; padding: 0 14px;
  border: 0; border-radius: 12px; outline: none;
  font: 400 13.5px var(--font); color: var(--text);
  background: #fff; box-shadow: var(--shadow-float);
}
.mb-search input:focus { box-shadow: var(--shadow-float), 0 0 0 2px var(--text); }
.mb-sugg {
  position: absolute; bottom: calc(100% + 8px); left: 0; right: 0;
  background: #fff; border-radius: 12px; box-shadow: var(--shadow-float);
  overflow: hidden; display: flex; flex-direction: column;
}
.mb-sugg button {
  display: flex; align-items: baseline; gap: 8px;
  padding: 9px 14px; border: 0; background: transparent;
  font: 400 13px var(--font); color: var(--text);
  cursor: pointer; text-align: left;
}
.mb-sugg button:hover { background: var(--hover); }
.mb-sugg button b { font-weight: 600; }
.mb-sugg button span {
  font-size: 11.5px; color: var(--text-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.map-bottom .report-btn { margin-left: auto; }

.report-btn {
  font-size: 14px; font-weight: 600;
  color: var(--text); background: var(--yellow);
  border: 0; border-radius: 12px;
  padding: 11px 18px; cursor: pointer; white-space: nowrap;
  box-shadow: var(--shadow-float);
  transition: background .15s, transform .1s;
}
.report-btn:hover { background: var(--yellow-h); }
.report-btn:active { transform: scale(0.98); }

.raid-btn {
  display: block; white-space: nowrap;
  font-size: 14px; font-weight: 600;
  color: #fff; background: var(--red);
  border: 0; border-radius: 12px;
  padding: 11px 16px; cursor: pointer;
  box-shadow: var(--shadow-float);
  animation: cardPulse 1.6s ease-out infinite;
  transition: background .15s, transform .1s;
}
.raid-btn:hover { background: #ff5747; }
.raid-btn:active { transform: scale(0.98); }
.raid-btn.on { background: var(--text); animation: none; }
.raid-btn[hidden] { display: none; }

@keyframes cardPulse {
  0% { box-shadow: var(--shadow-float), 0 0 0 0 rgba(255, 68, 51, 0.4); }
  70% { box-shadow: var(--shadow-float), 0 0 0 9px rgba(255, 68, 51, 0); }
  100% { box-shadow: var(--shadow-float), 0 0 0 0 rgba(255, 68, 51, 0); }
}

/* ── левая панель: вплотную к краю, во всю высоту ── */
.panel {
  position: absolute; top: 0; left: 0; bottom: 0;
  width: 360px;
  display: flex; flex-direction: column;
  background: #fff;
  box-shadow: var(--shadow-panel);
  z-index: 10;
}
.panel-head {
  display: flex; align-items: center; justify-content: flex-end; gap: 8px;
  padding: 6px 10px 0;   /* без заголовка: имя продукта — в верхнем меню */
}
.panel-head h1 { font-size: 20px; font-weight: 700; letter-spacing: -0.2px; }

.alpha-badge, .test-badge {
  font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 3px 7px; border-radius: 6px;
}
.alpha-badge { color: var(--text-2); background: var(--line); }
.test-badge { color: #b57f00; background: #fff1d6; }

.panel-body {
  flex: 1; min-height: 0; overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: #d9d8d5 transparent;
}
.panel-body::-webkit-scrollbar { width: 8px; }
.panel-body::-webkit-scrollbar-thumb { background: #d9d8d5; border-radius: 4px; }

.brand-note {
  padding: 0 16px 14px;
  font-size: 13px; line-height: 1.45; color: var(--text-2);
  border-bottom: 1px solid var(--line);
}

/* ── сводка ──────────────────────────────────────── */
.stats {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  border-bottom: 1px solid var(--line);
}
.stat { padding: 13px 8px 11px; text-align: center; }
.stat + .stat { border-left: 1px solid var(--line); }
.stat b {
  display: block;
  font-size: 23px; font-weight: 700; line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.stat span { font-size: 12px; color: var(--text-2); }

/* ── индекс мобилизации: крупно в самом верху панели (04.09) ── */
.index-hero { display: block; padding: 6px 16px 12px; border-bottom: 1px solid var(--line); color: var(--text); text-decoration: none; transition: background .12s; }
.index-hero:hover { background: var(--hover); }
.ih-row { display: flex; align-items: baseline; gap: 8px; }
.ih-num { font-size: 52px; font-weight: 800; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--text); }
.ih-of { font-size: 15px; font-weight: 500; color: var(--text-2); }
.ih-title { margin-left: auto; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-2); text-align: right; line-height: 1.25; }
.ih-row2 { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; }
.ih-band { display: inline-block; font-size: 13px; font-weight: 700; line-height: 1.2; padding: 4px 10px; border-radius: 8px; background: var(--line); color: var(--text); }
.ih-band.b1 { background: #DCE6DF; } .ih-band.b2 { background: #EBDDB4; } .ih-band.b3 { background: #F2C39B; }
.ih-band.b4 { background: #E59579; color: #2b0e08; } .ih-band.b5 { background: #B7372B; color: #fff; }
.ih-link { font-size: 12.5px; font-weight: 500; color: var(--text-2); white-space: nowrap; }
.index-hero:hover .ih-link { color: var(--text); }

/* заголовки секций — обычный жирный текст, как у Яндекса */
.f-label {
  font-size: 14px; font-weight: 700; color: var(--text);
  margin-bottom: 9px;
}
.f-hint { float: right; font-weight: 400; font-size: 12px; color: var(--text-3); line-height: 20px; }

/* ── шкала времени ───────────────────────────────── */
.timeline-box { padding: 13px 16px 9px; border-bottom: 1px solid var(--line); }
#timeline svg { display: block; width: 100%; }
#timeline .bar { fill: #d9d8d5; }
#timeline .bar:hover { fill: #abaaa7; }
#timeline .bar.peak { fill: var(--red); }
#timeline .axis-label { font-size: 10px; fill: var(--text-3); font-family: var(--font); }
#timeline .peak-label { font-size: 10.5px; font-weight: 700; fill: var(--red); font-family: var(--font); }

/* ── типы событий: строки на всю ширину панели ───── */
.types-box { padding: 13px 0 6px; border-bottom: 1px solid var(--line); }
.types-box .f-label { padding: 0 16px; }
.type-list { display: flex; flex-direction: column; }
.tl-row {
  display: flex; align-items: center; gap: 12px; width: 100%;
  font-size: 14px; color: var(--text); text-align: left;
  background: transparent; border: 0;
  padding: 9px 16px; cursor: pointer;
  transition: background .12s, opacity .12s;
}
.tl-row:hover { background: var(--hover); }
.tl-row .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--c); flex: none; }
.tl-ico { width: 21px; height: 21px; flex: none; display: block; }
.tl-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-n { font-size: 13px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.tl-row.off { opacity: 0.35; }
.tl-row.off .dot { background: #c9c8c5; }
.tl-row.off .tl-ico { filter: grayscale(1); }

/* ── фильтры: чипы, активный — чёрный ────────────── */
.filters-box { padding: 4px 16px 14px; border-bottom: 1px solid var(--line); }
.base-box { border-bottom: 0; }
.opt-row { margin-top: 12px; }
.opt-label {
  display: block;
  font-size: 13.5px; font-weight: 700; color: var(--text);
  margin-bottom: 8px;
}
.opts { display: flex; flex-wrap: wrap; gap: 6px; }
.opts button {
  font-size: 13px; font-weight: 500; color: var(--text);
  background: #fff; border: 1px solid var(--border); border-radius: 999px;
  padding: 6px 13px; cursor: pointer; white-space: nowrap;
  transition: background .12s, border-color .12s, color .12s;
}
.opts button:hover { background: var(--hover); }
.opts button.on {
  background: var(--text); border-color: var(--text); color: #fff; font-weight: 500;
}

/* ── легенда заливки регионов ────────────────────── */
.legend-box { padding: 13px 16px 11px; border-bottom: 1px solid var(--line); }
.lg-ramp {
  width: 100%; height: 8px; border-radius: 4px;
  background: linear-gradient(90deg, #FFEAE7, #FFC9C2, #FF9C8F, #F26A57, #D63A2A);
}
.lg-ticks {
  display: flex; justify-content: space-between; margin-top: 4px;
  font-size: 10.5px; color: var(--text-3); font-variant-numeric: tabular-nums;
}

.panel-foot {
  padding: 10px 16px; border-top: 1px solid var(--line);
  font-size: 11px; color: var(--text-3);
}

/* ── плашка выбранного региона ───────────────────── */
.region-pill[hidden] { display: none; }
.region-pill {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 11;
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; color: var(--text);
  background: #fff; border-radius: 12px;
  padding: 8px 8px 8px 14px;
  box-shadow: var(--shadow-float);
}
.region-pill button {
  display: grid; place-items: center;
  width: 22px; height: 22px; border-radius: 50%;
  border: 0; background: var(--line); color: var(--text-2);
  font-size: 13px; line-height: 1; cursor: pointer;
}
.region-pill button:hover { background: var(--border); color: var(--text); }
/* переход на страницу региона (статистика + сообщения списком) */
.region-pill .pill-stats { font-size: 12px; font-weight: 600; color: #fff; background: var(--text);
  border-radius: 8px; padding: 4px 9px; text-decoration: none; white-space: nowrap; line-height: 1.2; }
.region-pill .pill-stats:hover { background: #444; }

/* ── правая панель ленты ─────────────────────────── */
.feed-panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: 340px;
  display: flex; flex-direction: column;
  background: #fff;
  box-shadow: var(--shadow-panel);
  z-index: 10;
}

/* вкладки с подчёркиванием */
.fp-tabs {
  display: flex; gap: 18px; padding: 0 16px;
  border-bottom: 1px solid var(--line);
}
.fp-tabs button {
  font-size: 14px; font-weight: 600; color: var(--text-2);
  background: transparent; border: 0;
  padding: 14px 0 11px; cursor: pointer; white-space: nowrap;
  box-shadow: inset 0 -2px 0 transparent;
  transition: color .12s, box-shadow .12s;
}
.fp-tabs button:hover { color: var(--text); }
.fp-tabs button.on { color: var(--text); box-shadow: inset 0 -2px 0 var(--text); }
.fp-tabs button span { color: var(--text-3); font-weight: 500; }
.fp-tabs button.on span { color: var(--text-2); }

.show-hint {
  padding: 9px 16px; font-size: 12px; line-height: 1.45; color: var(--text-2);
  border-bottom: 1px solid var(--line);
}
.show-hint b { color: var(--text); font-weight: 600; }

.fp-pane { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.fp-pane[hidden] { display: none; }

.feed, .policy-body, .ugc-block-body {
  flex: 1; overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: #d9d8d5 transparent;
}
.feed::-webkit-scrollbar, .policy-body::-webkit-scrollbar, .ugc-block-body::-webkit-scrollbar { width: 8px; }
.feed::-webkit-scrollbar-thumb, .policy-body::-webkit-scrollbar-thumb, .ugc-block-body::-webkit-scrollbar-thumb {
  background: #d9d8d5; border-radius: 4px;
}

/* карточки — строки списка с разделителями, как выдача Яндекса */
.card {
  padding: 12px 16px 11px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  transition: background .12s;
}
.card:hover { background: var(--hover); }
.card-top { display: flex; align-items: center; gap: 7px; margin-bottom: 4px; flex-wrap: wrap; }
.card-type {
  font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--c, var(--text-2));
}
.card-date { font-size: 12px; color: var(--text-2); margin-left: auto; font-variant-numeric: tabular-nums; }
.card-place { font-size: 14px; font-weight: 700; margin-bottom: 3px; }
.card-sum { font-size: 13px; line-height: 1.5; color: var(--text); }
.card-meta { display: flex; align-items: center; gap: 10px; margin-top: 7px; font-size: 11.5px; color: var(--text-2); }
.card-meta .conf-confirmed { color: var(--green); font-weight: 600; }

/* непроверенные: тише */
.card.unverified .card-place,
.card.unverified .card-sum { color: var(--text-2); }
.unv-chip {
  display: inline-block;
  font-size: 10px; font-weight: 600;
  color: var(--text-2); background: var(--line);
  border-radius: 6px; padding: 2px 7px;
}

/* аларм: свежая облава — красная кромка слева */
.card.alarm {
  box-shadow: inset 3px 0 0 var(--red);
  background: #fff8f7;
}
.card.alarm:hover { background: #fff1ef; }
.alarm-chip {
  display: inline-block;
  font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: #fff; background: var(--red);
  border-radius: 6px; padding: 2px 7px;
  animation: chipBlink 1.6s ease-in-out infinite;
}
@keyframes chipBlink { 50% { opacity: 0.55; } }

/* лента «Решения» */
.policy-item {
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  font-size: 13px; line-height: 1.5; color: var(--text);
}
.policy-item .pi-top {
  display: flex; gap: 8px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--text-2); margin-bottom: 4px;
}
.policy-item .pi-top .pi-date { margin-left: auto; font-weight: 400; text-transform: none; }

/* сообщения читателей + голоса */
.ugc-card { padding: 12px 16px; border-bottom: 1px solid var(--line); }
.ugc-vote { display: flex; align-items: center; gap: 8px; margin-top: 9px; }
.ugc-vote button {
  font-size: 12.5px; font-weight: 600;
  border: 0; border-radius: 8px; padding: 6px 13px; cursor: pointer;
  transition: background .12s, color .12s;
}
.v-yes { color: var(--green); background: #eaf6ec; }
.v-yes:hover, .v-yes.on { background: var(--green); color: #fff; }
.v-no { color: #e5372d; background: #fdeeec; }
.v-no:hover, .v-no.on { background: #e5372d; color: #fff; }
.ugc-vote .cnt { font-size: 11.5px; color: var(--text-2); margin-left: auto; }

.feed-expand {
  border: 0; border-top: 1px solid var(--line);
  padding: 13px; width: 100%;
  font-size: 13.5px; font-weight: 600;
  color: var(--link); background: #fff; cursor: pointer;
}
.feed-expand:hover { background: var(--hover); }

.m-feed-btn {
  display: none;
  margin: 4px 16px 12px;
  font-size: 13.5px; font-weight: 600;
  color: var(--text); background: var(--line);
  border: 0; border-radius: 10px;
  padding: 10px 12px; cursor: pointer;
}
.m-feed-btn:hover { background: var(--border); }

/* ── полноэкранная лента ─────────────────────────── */
.feed-overlay {
  position: fixed; inset: 0; z-index: 40;
  background: var(--page);
  overflow-y: auto; overscroll-behavior: contain;
}
.fo-head {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px;
  background: #fff;
  box-shadow: 0 1px 0 var(--border);
}
.fo-title { font-size: 20px; font-weight: 700; }
.fo-title span { color: var(--text-2); font-size: 15px; font-weight: 500; }
.fo-close {
  font-size: 13.5px; font-weight: 600;
  color: var(--text); background: var(--line);
  border: 0; border-radius: 10px; padding: 9px 16px; cursor: pointer;
}
.fo-close:hover { background: var(--border); }
.fo-body { max-width: 980px; margin: 0 auto; padding: 18px 16px 60px; }
.fo-date {
  font-size: 13px; font-weight: 700; color: var(--text-2);
  margin: 24px 4px 10px;
  display: flex; align-items: center; gap: 12px;
}
.fo-date::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.fo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fo-grid .card {
  background: #fff; border-bottom: 0; border-radius: 12px;
  box-shadow: var(--shadow-card);
}
.fo-grid .card:hover { background: #fff; box-shadow: 0 4px 12px rgba(33, 32, 31, 0.12); }
.fo-grid .card.alarm { box-shadow: var(--shadow-card), inset 3px 0 0 var(--red); }
@media (max-width: 700px) { .fo-grid { grid-template-columns: 1fr; } }

/* ── попап на карте ──────────────────────────────── */
.maplibregl-popup-content {
  font-family: var(--font);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(33, 32, 31, 0.2);
  padding: 14px 16px 12px; max-width: 300px;
}
.maplibregl-popup-close-button { font-size: 16px; padding: 4px 9px; color: var(--text-2); }
.pp-type { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--c, var(--text-2)); display: flex; align-items: center; gap: 6px; }
.pp-ico { width: 18px; height: 18px; flex: none; }
.pp-place { font-size: 15px; font-weight: 700; margin: 3px 0 2px; }
.pp-date { font-size: 12px; color: var(--text-2); margin-bottom: 6px; }
.pp-sum { font-size: 13px; line-height: 1.5; color: var(--text); }
.pp-meta {
  display: flex; gap: 12px; margin-top: 9px; padding-top: 8px;
  border-top: 1px solid var(--line);
  font-size: 11.5px; color: var(--text-2);
}
.pp-meta .conf-confirmed { color: var(--green); font-weight: 600; }
.pp-links { margin-top: 7px; font-size: 12px; }

/* атрибуция — подпись, а не элемент интерфейса */
.maplibregl-ctrl-attrib {
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 4px !important;
  font-size: 8.5px !important;
  line-height: 1.3 !important;
  border-radius: 0 !important;
}
.maplibregl-ctrl-attrib a,
.maplibregl-ctrl-attrib span { color: rgba(127, 126, 122, 0.7) !important; }
.maplibregl-ctrl-attrib-button { display: none !important; }
.maplibregl-ctrl-bottom-right .maplibregl-ctrl { margin: 0 2px 2px 0 !important; }

/* атрибуция: левее колонки фильтров (зум живёт в нижней строке) */
.maplibregl-ctrl-bottom-right { right: 316px; }
.maplibregl-ctrl-group {
  border-radius: 12px !important;
  background: #fff !important;
  box-shadow: var(--shadow-float) !important;
  overflow: hidden;
}
.maplibregl-ctrl-group button { width: 38px !important; height: 38px !important; }
.maplibregl-ctrl-group button + button { border-top: 1px solid var(--line) !important; }
@media (max-width: 760px) { .maplibregl-ctrl-bottom-right { right: 0; } }

/* ссылки на источники */
.src-links a { color: var(--link); text-decoration: none; font-weight: 600; }
.src-links a:hover { text-decoration: underline; }

.src-btn {
  font-size: 11.5px; font-weight: 600;
  color: var(--text); background: var(--line);
  border: 0; border-radius: 999px;
  padding: 4px 11px; cursor: pointer;
  transition: background .12s;
}
.src-btn:hover { background: var(--border); }

/* ── модалки ─────────────────────────────────────── */
.src-modal {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(33, 32, 31, 0.4);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.src-modal[hidden] { display: none; }
.sm-box {
  width: min(460px, 100%); max-height: 80vh; display: flex; flex-direction: column;
  background: #fff; border-radius: 16px;
  box-shadow: 0 20px 60px rgba(33, 32, 31, 0.3);
  overflow: hidden;
}
.sm-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 18px 20px 12px;
}
.sm-title { font-size: 18px; font-weight: 700; }
.sm-sub { font-size: 13px; color: var(--text-2); margin-top: 4px; line-height: 1.45; }
.sm-close {
  display: grid; place-items: center; flex: none;
  width: 30px; height: 30px; border-radius: 50%;
  border: 0; background: var(--line); color: var(--text-2);
  font-size: 13px; cursor: pointer;
}
.sm-close:hover { background: var(--border); color: var(--text); }
.sm-body { padding: 8px 20px 16px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.sm-link {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 14px;
  background: #f7f6f4; border-radius: 10px;
  text-decoration: none; color: var(--text);
  font-size: 13.5px; font-weight: 600;
  transition: background .12s;
}
.sm-link:hover { background: var(--line); }
.sm-link .sm-when { font-size: 11.5px; font-weight: 400; color: var(--text-2); }
.sm-link .sm-go { font-size: 12px; color: var(--link); }
.sm-chat { color: var(--text-2); cursor: default; }
.sm-chat:hover { background: #f7f6f4; }
.sm-foot {
  padding: 10px 20px; border-top: 1px solid var(--line);
  font-size: 11.5px; color: var(--text-2);
}

/* ── форма «Сообщить» ────────────────────────────── */
.ugc-box { width: min(520px, 100%); }
.ugc-f {
  display: block; margin-bottom: 12px;
  font-size: 13px; font-weight: 600; color: var(--text);
}
.ugc-f textarea, .ugc-f input, .ugc-f select {
  display: block; width: 100%; margin-top: 6px;
  font-family: inherit; font-size: 14px; font-weight: 400; color: var(--text);
  background: #fff; border: 1px solid #d9d8d5; border-radius: 10px;
  padding: 10px 12px; outline: none;
  transition: border-color .12s, box-shadow .12s;
}
.ugc-f textarea { resize: vertical; line-height: 1.45; }
.ugc-f textarea:focus, .ugc-f input:focus, .ugc-f select:focus {
  border-color: var(--text); box-shadow: 0 0 0 1px var(--text);
}
.ugc-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ugc-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.ugc-point { font-size: 12.5px; color: var(--text-2); margin: 2px 0 10px; }
.ugc-note { font-size: 12.5px; line-height: 1.45; color: var(--text-2); margin-bottom: 14px; }
.ugc-actions { display: flex; align-items: center; gap: 12px; }
.btn-send {
  font-size: 15px; font-weight: 600;
  color: var(--text); background: var(--yellow); border: 0;
  border-radius: 12px; padding: 11px 26px; cursor: pointer;
  transition: background .15s, transform .1s;
}
.btn-send:hover { background: var(--yellow-h); }
.btn-send:active { transform: scale(0.98); }
.btn-send:disabled { opacity: 0.5; cursor: default; }
.ugc-status { font-size: 13px; color: var(--text-2); }
.ugc-status.err { color: #e5372d; }
.ugc-status.ok { color: var(--green); }

/* тултип региона */
.region-tip {
  position: fixed; z-index: 30; pointer-events: none;
  background: var(--text); color: #fff; font-size: 12px;
  padding: 5px 10px; border-radius: 8px; transform: translate(-50%, -140%);
  white-space: nowrap; opacity: 0; transition: opacity .1s;
}
.region-tip b { font-variant-numeric: tabular-nums; }

/* ── мобильная раскладка ─────────────────────────── */
.sheet-handle { display: none; }

@media (max-width: 900px) {
  .rb-long { display: none; }
}

@media (max-width: 760px) {
  .map-top { right: 12px; top: 12px; }
  .raid-btn, .report-btn { font-size: 13px; padding: 9px 13px; border-radius: 10px; }

  .panel {
    left: 0; right: 0; top: auto; bottom: 0; width: auto;
    border-radius: 16px 16px 0 0; max-height: 76%;
    box-shadow: 0 -8px 32px rgba(33, 32, 31, 0.16);
  }
  .sheet-handle {
    display: block; width: 100%; padding: 10px 0 2px;
    background: transparent; border: 0; cursor: pointer;
  }
  .sheet-handle span {
    display: block; width: 40px; height: 4px; margin: 0 auto;
    border-radius: 2px; background: #d9d8d5;
  }
  .panel-head { padding: 8px 16px 10px; }
  .panel-head h1 { font-size: 17px; }
  /* свёрнутое состояние: только сводка */
  .panel:not(.open) .types-box,
  .panel:not(.open) .legend-box,
  .panel:not(.open) .filters-box,
  .panel:not(.open) .timeline-box,
  .panel:not(.open) .menu-box,
  .panel:not(.open) .panel-foot,
  .panel:not(.open) .brand-note,
  .panel:not(.open) .index-hero { display: none; }
  .panel:not(.open) .panel-body { overflow: hidden; }
  .feed-panel { display: none; }
  .m-feed-btn { display: block; }
  .stat { padding: 9px 6px 8px; }
  .stat b { font-size: 20px; }
  .region-pill { top: 12px; left: 12px; transform: none; }
  .maplibregl-popup-content { max-width: 82vw; }
}

/* ── окно фильтров + сворачивание окон (31.08) ─────────────────────── */
/* кнопки сворачивания окон — заметные (просьба владельца 01.09) */
.win-min{margin-left:auto;width:34px;height:34px;border:0;
  border-radius:10px;background:var(--line);color:#21201F;font-size:17px;
  font-weight:600;line-height:1;cursor:pointer;flex:none;
  transition:background .12s,color .12s}
.win-min:hover{background:#21201F;color:#fff}
.fp-min{position:absolute;top:10px;right:10px;z-index:5}

/* фильтры — правая колонка во всю высоту (десктоп, 01.09) */
.fwin{position:absolute;top:0;right:0;bottom:0;z-index:24;width:304px;
  background:#fff;box-shadow:var(--shadow-panel);
  display:flex;flex-direction:column;overflow:hidden}
.fwin-head{display:flex;align-items:center;gap:8px;padding:14px 12px 10px 16px;
  font-weight:700;font-size:16px;border-bottom:1px solid #F1F0EE}
.fwin-badge{font-size:11px;color:#7F7E7A;font-weight:400}
.fwin-body{overflow-y:auto;padding:4px 16px 12px}
.fwin .types-box,.fwin .filters-box{border-top:0;padding-left:0;padding-right:0}
.fwin.collapsed{display:none}
.panel.collapsed{transform:translateX(-105%);transition:transform .18s}
.feed-panel.collapsed{transform:translateX(105%);transition:transform .18s}
.panel,.feed-panel{transition:transform .18s}

.edge-btn{position:absolute;z-index:26;background:#fff;border:0;
  box-shadow:0 2px 10px rgba(33,32,31,.18);border-radius:12px;
  padding:10px 14px;font:500 13px/1 "Golos Text",sans-serif;color:#21201F;
  cursor:pointer}
.edge-btn:hover{background:#F6F5F3}
.edge-filters{right:12px;top:14px;font-weight:600;padding:12px 16px}

/* свёрнутая левая панель = компактная полоса с меню (01.09) */
.panel-mini{position:absolute;top:0;left:0;bottom:0;width:56px;z-index:12;
  background:#fff;box-shadow:var(--shadow-panel);cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 0}
.pm-btn{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;
  border:0;background:transparent;color:var(--text-2);cursor:pointer;
  text-decoration:none;transition:background .12s,color .12s;flex:none}
.pm-btn:hover{background:var(--hover);color:var(--text)}
.pm-btn svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8}
.pm-expand{color:var(--text)}
.pm-sep{width:26px;height:1px;background:var(--border);margin:3px 0;flex:none}
.edge-filters span{color:#E6402A;font-weight:600}

@media (max-width: 760px){
  /* на мобиле фильтры остаются окном поверх карты, не колонкой */
  .fwin{right:10px;left:10px;width:auto;top:56px;bottom:auto;
    border-radius:14px;box-shadow:0 2px 10px rgba(33,32,31,.18);
    max-height:calc(100vh - 150px)}
  .edge-filters{top:56px}
  .map-top{right:12px}
  .map-bottom{left:10px;right:10px;bottom:10px}
  .map-bottom .mb-period{order:3}
  .maplibregl-ctrl-bottom-right{right:0}
}

/* составной код события (ТИП-ГГММДД-№): ориентир для админки и переписки */
.pp-eid{margin-top:8px;font-size:10.5px;color:#ABAAA7;cursor:pointer;
  font-variant-numeric:tabular-nums;user-select:all}
.pp-eid:hover{color:#21201F}
.card-eid{margin-left:auto;font-size:10px;color:#C6C5C1;
  font-variant-numeric:tabular-nums;user-select:all}

/* ── плиточная картограмма (tile grid map) ─────────────────────────── */
.tile-overlay{position:fixed;inset:0;z-index:60;background:#fff;
  display:flex;flex-direction:column}
.to-head{display:flex;align-items:flex-start;gap:16px;padding:18px 24px;
  border-bottom:1px solid #F1F0EE}
.to-title{font-size:19px;font-weight:700}
.to-sub{font-size:13px;color:#7F7E7A;margin-top:3px;max-width:560px}
.to-body{flex:1;overflow:auto;display:flex;align-items:center;
  justify-content:center;padding:20px}
.to-grid{--tile:clamp(34px, 4.6vw, 62px);display:grid;gap:3px}
.tile{position:relative;border:0;border-radius:6px;cursor:pointer;
  font-family:"Golos Text",sans-serif;padding:0;transition:transform .08s}
.tile:hover{transform:scale(1.12);z-index:2;box-shadow:0 2px 10px rgba(33,32,31,.25)}
.tile.empty{cursor:default}
.tile.empty:hover{transform:none;box-shadow:none}
.tile .tl-l{position:absolute;left:5px;top:4px;font-size:9.5px;font-weight:600;
  color:#8B8A86;letter-spacing:.02em}
.tile .tl-n{position:absolute;right:5px;bottom:3px;font-size:14px;font-weight:700;
  color:#21201F;font-variant-numeric:tabular-nums}
.tile.inv .tl-l{color:rgba(255,255,255,.75)}
.tile.inv .tl-n{color:#fff}

/* hidden обязан побеждать любой display из классов (дважды наступали) */
[hidden]{display:none!important}

/* ── меню разделов в левой панели (01.09) ──────────────────────────── */
.menu-box{border-bottom:1px solid var(--line);padding:5px 0}
.menu-row{display:flex;align-items:center;gap:12px;width:100%;
  padding:10px 16px;border:0;background:transparent;cursor:pointer;
  font:500 14px/1.2 var(--font);color:var(--text);
  text-decoration:none;text-align:left;transition:background .12s}
.menu-row:hover{background:var(--hover)}
.menu-row svg{width:20px;height:20px;flex:none;stroke:currentColor;fill:none;
  stroke-width:1.8;color:var(--text-2)}
.mr-name{flex:1;min-width:0}
.mr-go{color:var(--text-3);font-size:17px;line-height:1}

/* ── окно статистики ───────────────────────────────────────────────── */
.stats-overlay{position:fixed;inset:0;z-index:60;background:#fff;
  display:flex;flex-direction:column}
.so-body{flex:1;overflow-y:auto;padding:22px 24px 48px}
.so-inner{max-width:880px;margin:0 auto;display:flex;flex-direction:column;gap:26px}
.so-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.so-card{background:#F7F6F4;border-radius:14px;padding:16px 18px}
.so-card b{display:block;font-size:30px;font-weight:700;font-variant-numeric:tabular-nums}
.so-card span{font-size:12.5px;color:var(--text-2)}
.so-h{font-size:15px;font-weight:700;margin-bottom:12px}
.so-chart svg{display:block;width:100%}
.so-chart .bar{fill:#d9d8d5}
.so-chart .bar:hover{fill:#abaaa7}
.so-chart .bar.peak{fill:var(--red)}
.so-chart .axis-label{font-size:11px;fill:var(--text-3);font-family:var(--font)}
.so-chart .peak-label{font-size:12px;font-weight:700;fill:var(--red);font-family:var(--font)}
.so-row{display:flex;align-items:center;gap:12px;margin-bottom:9px;font-size:13.5px}
.so-row img{width:20px;height:20px;flex:none}
.so-name{width:200px;flex:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.so-name-wide{width:230px}
.so-bar{flex:1;height:9px;border-radius:5px;background:var(--line);overflow:hidden}
.so-bar i{display:block;height:100%;border-radius:5px}
.so-n{width:46px;flex:none;text-align:right;font-weight:600;
  font-variant-numeric:tabular-nums;font-size:13px}
.so-empty{color:var(--text-2);font-size:13px}

@media (max-width: 760px){
  .so-name{width:120px}
  .so-name-wide{width:130px}
  .so-card b{font-size:24px}
}

/* ── годы и архив 2022-2025 ─────────────────────── */
.years-box { padding: 13px 16px 12px; border-bottom: 1px solid var(--line); }
.year-opts { margin-top: 8px; }
.year-opts button.loading { opacity: .55; cursor: progress; }
.arch-extra { margin-top: 10px; }
.arch-rx {
  font-size: 12.5px; font-weight: 500; color: var(--text);
  background: #fff; border: 1px dashed var(--border); border-radius: 999px;
  padding: 5px 12px; cursor: pointer;
}
.arch-rx:hover { background: var(--hover); }
.arch-rx.on { background: var(--text); border-style: solid; border-color: var(--text); color: #fff; }
.arch-note { margin-top: 9px; font-size: 12px; line-height: 1.45; color: var(--text-3); }
.an-row { margin-bottom: 2px; }
.an-row b { color: var(--text-2); font-weight: 600; }
.an-warn { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line); }
/* плашка архива в карточке: точка старая и без редактуры — это надо видеть
   до того, как читатель начнёт на неё ссылаться */
.pp-arch {
  margin: 6px 0 2px; padding: 3px 8px; display: inline-block;
  font-size: 11.5px; color: var(--text-3);
  background: var(--hover); border-radius: 5px;
}

/* событие из дайджеста: в посте одна строка без деталей — читатель должен
   знать это до того, как сошлётся на точку */
.pp-thin {
  margin: 6px 0 2px; padding: 5px 8px; font-size: 11.5px; line-height: 1.4;
  color: var(--text-2); background: #FFF7E6; border-left: 2px solid #E8A33D;
  border-radius: 0 4px 4px 0;
}

/* одна шкала времени: девять кнопок в строке под картой, на узком экране
   переносятся; год грузится файлом, поэтому у кнопки есть состояние ожидания */
.mb-period button { padding: 6px 11px; }
.mb-period button.loading { opacity: .55; cursor: progress; }
.years-box .arch-rx { margin-top: 2px; }