/* ==========================================================================
   Интерактивная карта СНГ (блок cis-viniti/map-explorer)

   Два состояния: обзор всех стран и приближённая страна с регионами, точками
   и панелью справа. Переход между ними ведёт JS через анимацию viewBox,
   отсюда только оформление и переходы прозрачности.

   Отдельный файл от map-demo намеренно: демо-блок остаётся эталоном на
   превью-клоне 428, движок обкатывается на клоне 473.
   ========================================================================== */

.cis-mx {
	--mx-line-hover: #ffffff;
	position: relative;
	display: flex;
	width: 100%;
	/* Высота задаётся жёстко: только тогда height:100% у карты имеет от чего
	   считаться и preserveAspectRatio вписывает её в кадр, а не растит блок. */
	height: 100svh;
	min-height: 520px;
	overflow: hidden;
	color: #eaf1fb;
}

/* Своя подложка в тон ленты: под блоком не должно просвечивать ничего, даже
   если он на долю пикселя короче родителя. */
.cis-mx.is-zoomed {
	background-color: #02193a;
}

/* Пока страна приближена, страница зафиксирована и шапка висит поверх сцены.
   Выпадающие меню открываются на чистом :hover, поэтому глушим их классом на
   body, который вешает движок карты. */
/* Заморозка страницы на время работы с приближённой страной. Полосу прокрутки
   не убираем, а оставляем принудительно: иначе исчезает её жёлоб, страница
   становится шире и вся вёрстка прыгает вбок. Ползунку при этом ехать некуда,
   потому что body зафиксирован. */
html.cis-map-locked {
	overflow-y: scroll;
}

body.cis-map-frozen {
	position: fixed;
	left: 0;
	right: 0;
	width: 100%;
	overflow: hidden;
	/* Фон страницы белый, а тёмный градиент даёт лента .cis-homeband, и она
	   кончается ровно на границе блока. Стоит высоте разъехаться на дробную
	   долю пикселя (масштаб окна, дробный DPR, полоса браузера) — и снизу
	   вылезает белая нитка. На время зума красим подложку в тон ленты. */
	background-color: #02193a;
}

/* Пока страна приближена, страница зафиксирована и шапка висит поверх сцены.
   Прятать её на скролле нельзя: скроллить нечего, а уехала бы она вместе с
   кнопкой возврата. Меню при этом работает как обычно: выпадашки одно время
   были заглушены, но в приближённом состоянии это читается как поломка. */
body.cis-map-locked .cis-header-v2,
body.cis-map-locked .cis-header-v2.cis-header-hidden {
	transform: translateY(0);
}

/* Тема не задаёт border-box глобально, а сцена живёт на паддингах: без этого
   её height:100% считается по контенту и блок вылезает за экран. */
.cis-mx,
.cis-mx *,
.cis-mx *::before,
.cis-mx *::after {
	box-sizing: border-box;
}

/* display у кнопки и панели перебивает атрибут hidden, возвращаем его силу */
.cis-mx [hidden] {
	display: none !important;
}

/* --- сцена ---------------------------------------------------------------- */

.cis-mx-stage {
	position: relative;
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	justify-content: center;
	min-width: 0;
	height: 100%;
	padding: clamp(24px, 5svh, 56px) clamp(16px, 3vw, 48px) clamp(48px, 9svh, 104px);
	/* Отступы едут вместе с зумом, той же длительностью и той же кривой
	   (easeInOutCubic), что и анимация viewBox. Мгновенная смена отступа
	   давала скачок: сцена менялась ступенькой, и карта пересчитывалась
	   рывком — особенно заметно было в конце отъезда. Длительность движок
	   ставит через --mx-fit-ms, а на время замеров глушит классом no-anim. */
	transition: padding var(--mx-fit-ms, 850ms) cubic-bezier(.65, 0, .35, 1);
}

.cis-mx.no-anim .cis-mx-stage {
	transition: none !important;
}

.cis-mx .cis-map {
	width: 100%;
	height: 100%;
	max-height: 100%;
	overflow: visible;
	/* Обводка стран тонкая и светлая: карта живёт на тёмном градиенте ленты. */
	--cis-stroke: rgba(255, 255, 255, .5);
	--cis-stroke-width: 1;
}

/* Толщина обводки — в экранных пикселях, а не в единицах карты. Без этого при
   зуме она умножается на масштаб: на Армении viewBox сжимается в 25 раз, и
   волосяная линия превращается в трубу в четверть сантиметра, под которой не
   видно ни регионов, ни самой страны. */
.cis-mx .cis-map .region,
.cis-mx .cis-map .region:hover,
.cis-mx .cis-map .region:focus-visible {
	vector-effect: non-scaling-stroke;
}

/* Штатное затемнение при наведении из самой cis.svg гасим: подсветка здесь
   строится на обводке и переливе, затемнение делало её грязной. */
.cis-mx .cis-map .region:hover,
.cis-mx .cis-map .region:focus-visible {
	filter: none;
}

.cis-mx .cis-map .region {
	cursor: pointer;
	transition: opacity .35s ease, stroke .3s ease, stroke-width .3s ease;
}

.cis-mx .cis-map .region:hover,
.cis-mx .cis-map .region:focus-visible {
	stroke: var(--mx-line-hover);
	stroke-width: 1.9;
	outline: none;
}

.cis-mx.is-zoomed .cis-map .region {
	cursor: default;
	pointer-events: none;
}

/* Блок зафиксирован во весь экран, шапка лежит поверх: уводим сцену и кнопку
   возврата из-под неё, иначе кнопка оказывается под логотипом. */
.cis-mx.is-zoomed .cis-mx-stage {
	padding-top: calc(var(--mx-header, 64px) + 20px);
	padding-bottom: clamp(24px, 4svh, 48px);
}

/* Перелив: копия контура страны с бегущим градиентом. Мягко, без «неона». */
.cis-mx-sheen {
	pointer-events: none;
}

.cis-mx-sheen-shape {
	opacity: .5;
	mix-blend-mode: soft-light;
}

/* --- детальная карта регионов --------------------------------------------- */

.cis-mx-layers {
	pointer-events: none;
}

.cis-mx-detail {
	opacity: 0;
	transition: opacity .5s ease;
}

.cis-mx.is-detail .cis-mx-detail {
	opacity: 1;
}

/* Плоский контур уходит вместе с появлением регионов. Гасим до нуля: у части
   стран он обведён чуть шире суммы областей и остатком светился ореолом.
   Переход намеренно не привязан к is-zoomed: этот класс снимается в начале
   отъезда, и контур возвращался бы скачком. */
.cis-mx .cis-map .region.is-target {
	transition: opacity .5s ease;
}

.cis-mx.is-detail .cis-map .region.is-target {
	opacity: 0;
}

.cis-mx-detail .subregion {
	pointer-events: auto;
	cursor: default;
}

.cis-mx-detail .subregion path {
	stroke: var(--mx-sub-stroke, rgba(255, 255, 255, .82));
	stroke-width: var(--mx-sub-stroke-w, 1.1);
	stroke-linejoin: round;
	vector-effect: non-scaling-stroke;
	transition: fill .25s ease;
}

/* Регионы красим пятью ступенями синей схемы из palettes.json — той же, что
   разводит по тону страны на общем плане. Прозрачные заливки давали разницу в
   сотые доли альфы, страна читалась одним пятном и деления были видны только
   по контуру. Плотный цвет решает это и держит стиль макета. */
/* Запасные значения переменных — это и есть исходная расцветка. Остальные
   расцветки подставляет движок (SCHEMES в map-explorer-new.js). */
.cis-mx-detail .subregion:nth-child(5n+1) path { fill: var(--mx-land-1, #4186E6); }
.cis-mx-detail .subregion:nth-child(5n+2) path { fill: var(--mx-land-2, #2267C0); }
.cis-mx-detail .subregion:nth-child(5n+3) path { fill: var(--mx-land-3, #76A8F6); }
.cis-mx-detail .subregion:nth-child(5n+4) path { fill: var(--mx-land-4, #1059B0); }
.cis-mx-detail .subregion:nth-child(5n+5) path { fill: var(--mx-land-5, #5596F2); }

.cis-mx-detail .subregion:hover path {
	fill: var(--mx-land-hover, #B2CBFC);
}

/* Общий план в неисходных расцветках: страна с данными одним цветом, остальные
   приглушены. В исходной страны красит градиентами PHP (palettes.json). */
.cis-mx[data-scheme]:not([data-scheme="original"]) .cis-map {
	--cis-stroke: var(--mx-country-stroke);
}

.cis-mx[data-scheme]:not([data-scheme="original"]) .cis-map .region {
	fill: var(--mx-country);
}

.cis-mx[data-scheme]:not([data-scheme="original"]) .cis-map .region.is-disabled {
	fill: var(--mx-country-other);
}

/* --- метки ---------------------------------------------------------------- */

.cis-mx-pins {
	opacity: 0;
	transition: opacity .45s ease;
}

.cis-mx-pins.is-on {
	opacity: 1;
}

.cis-mx-pin {
	pointer-events: auto;
	cursor: pointer;
}

.cis-mx-pin-stem {
	stroke: #ffd48a;
	stroke-width: 1.1;
	vector-effect: non-scaling-stroke;
	transition: stroke .2s ease;
}

.cis-mx-pin-dot {
	fill: #ffc266;
	stroke: #fff8ec;
	stroke-width: .9;
	vector-effect: non-scaling-stroke;
	transition: r .2s ease, fill .2s ease, stroke .2s ease;
}

.cis-mx-pin-halo {
	fill: rgba(255, 194, 102, .3);
	transform-box: fill-box;
	transform-origin: center;
	animation: cis-mx-pulse 2.8s ease-out infinite;
	animation-delay: calc(var(--i, 0) * .22s);
}

/* Кластер остаётся одной честной географической точкой. Цифра внутри
   показывает, что под ней не одна организация. */
.cis-mx-cluster-dot {
	fill: #ffc266;
	stroke: #fff8ec;
	stroke-width: 1.2;
	vector-effect: non-scaling-stroke;
	transition: fill .2s ease, stroke .2s ease;
}

.cis-mx-cluster-count {
	fill: #0a1f42;
	font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
	font-size: 8px;
	font-weight: 800;
	pointer-events: none;
}

.cis-mx-cluster:focus-visible {
	outline: none;
}

.cis-mx-cluster:focus-visible .cis-mx-cluster-dot,
.cis-mx-cluster.is-hot .cis-mx-cluster-dot {
	fill: #3ddc84;
	stroke: #eafff2;
}

/* HTML-поповер не масштабируется вместе с SVG и поэтому остаётся
   читаемым даже на максимальном зуме страны. */
.cis-mx-cluster-popover {
	position: absolute;
	z-index: 7;
	width: min(270px, calc(100% - 20px));
	padding: 9px;
	color: #eaf1fb;
	background: rgba(7, 21, 46, .97);
	border: 1px solid rgba(255, 255, 255, .16);
	border-radius: 14px;
	box-shadow: 0 18px 44px rgba(2, 8, 22, .55);
	backdrop-filter: blur(14px);
	opacity: 0;
	transform: translateY(4px);
	transition: opacity .16s ease, transform .16s ease;
}

.cis-mx-cluster-popover.is-on {
	opacity: 1;
	transform: translateY(0);
}

.cis-mx-cluster-heading {
	padding: 5px 8px 9px;
	font-size: 13px;
	font-weight: 700;
	color: #fff;
	border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.cis-mx-cluster-list {
	max-height: 286px;
	padding-top: 5px;
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: rgba(255, 255, 255, .22) transparent;
}

.cis-mx-cluster-item {
	display: block;
	width: 100%;
	padding: 8px;
	font: inherit;
	font-size: 12.5px;
	line-height: 1.3;
	text-align: left;
	color: rgba(226, 236, 250, .84);
	background: transparent;
	border: 0;
	border-radius: 8px;
	cursor: pointer;
	transition: color .15s ease, background .15s ease;
}

.cis-mx-cluster-item:hover,
.cis-mx-cluster-item:focus-visible {
	color: #fff;
	background: rgba(61, 220, 132, .12);
	outline: none;
}

/* Отклик метки на наведение по карточке в списке: точка вырастает, зеленеет и
   расходится кольцом — смена цвета читается сразу, даже боковым зрением. */
/* Размер и толщину обводки у подсвеченной метки не меняем. Раньше здесь стояло
   r: 5.2 при обычных 7: метка под курсором сжималась, курсор у её края
   оказывался снаружи, подсветка снималась, метка вырастала обратно — и так по
   кругу, метка дёргалась. */
.cis-mx-pin.is-hot .cis-mx-pin-dot {
	fill: #3ddc84;
	stroke: #eafff2;
}

.cis-mx-pin.is-hot .cis-mx-pin-stem {
	stroke: #3ddc84;
}

.cis-mx-pin.is-hot .cis-mx-pin-halo {
	fill: rgba(61, 220, 132, .5);
	animation: cis-mx-ping .9s cubic-bezier(0, 0, .2, 1) infinite;
	animation-delay: 0s;
}

@keyframes cis-mx-ping {
	0%   { opacity: .75; transform: scale(.5); }
	80%  { opacity: 0;   transform: scale(2.8); }
	100% { opacity: 0;   transform: scale(2.8); }
}

@keyframes cis-mx-pulse {
	0%   { opacity: .55; transform: scale(.55); }
	70%  { opacity: 0;   transform: scale(1.9); }
	100% { opacity: 0;   transform: scale(1.9); }
}

/* --- подсказка при наведении ---------------------------------------------- */

.cis-mx-hint {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 4;
	display: flex;
	align-items: center;
	gap: 8px;
	/* Ширину не ограничиваем, а строки не переносим: с max-width подпись
	   ломалась на две строки, плашка вырастала и выглядела разъехавшейся. */
	white-space: nowrap;
	padding: 6px 11px 7px 8px;
	border-radius: 10px;
	background: rgba(9, 24, 51, .86);
	border: 1px solid rgba(255, 255, 255, .14);
	box-shadow: 0 10px 26px rgba(2, 10, 26, .4);
	backdrop-filter: blur(8px);
	opacity: 0;
	pointer-events: none;
	transition: opacity .18s ease;
	will-change: transform;
}

.cis-mx-hint.is-plain {
	padding: 6px 11px 7px;
}

.cis-mx-hint-body {
	display: block;
	line-height: 1.15;
}

.cis-mx-hint.is-on {
	opacity: 1;
}

.cis-mx-hint-flag {
	flex: none;
	width: 26px;
	height: auto;
	border-radius: 3px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .45);
}

/* На приближённой карте подсказка называет регион, флаг там лишний. */
.cis-mx-hint.is-plain .cis-mx-hint-flag {
	display: none;
}

.cis-mx-hint-name {
	display: block;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: .01em;
	color: #fff;
}

.cis-mx-hint-cta {
	display: block;
	margin-top: 1px;
	font-size: 11.5px;
	line-height: 1.25;
	color: rgba(226, 236, 250, .66);
}

/* На приближённой карте подсказка показывает название региона, звать никуда
   не надо — строку с призывом убираем. */
.cis-mx-hint.is-plain .cis-mx-hint-cta {
	display: none;
}

/* --- кнопка возврата ------------------------------------------------------ */

.cis-mx-back {
	position: absolute;
	top: calc(var(--mx-header, 64px) + 16px);
	left: clamp(14px, 2vw, 30px);
	z-index: 5;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 16px 9px 12px;
	font: inherit;
	font-size: 14px;
	color: #eaf1fb;
	background: rgba(9, 24, 51, .72);
	border: 1px solid rgba(255, 255, 255, .16);
	border-radius: 999px;
	cursor: pointer;
	backdrop-filter: blur(8px);
	transition: background .2s ease, border-color .2s ease, transform .2s ease;
}

.cis-mx-back:hover {
	background: rgba(16, 40, 82, .88);
	border-color: rgba(255, 255, 255, .3);
	transform: translateX(-2px);
}

.cis-mx-back svg {
	flex: none;
}

/* --- панель справа -------------------------------------------------------- */

.cis-mx-panel {
	position: absolute;
	top: var(--mx-header, 64px);
	right: 0;
	z-index: 6;
	display: flex;
	flex-direction: column;
	width: min(400px, 88vw);
	height: calc(100% - var(--mx-header, 64px));
	padding: clamp(18px, 3svh, 28px) clamp(18px, 2vw, 30px) 24px;
	background: linear-gradient(180deg, rgba(7, 21, 46, .95) 0%, rgba(6, 17, 38, .97) 100%);
	border-left: 1px solid rgba(255, 255, 255, .1);
	box-shadow: -24px 0 60px rgba(2, 8, 22, .45);
	backdrop-filter: blur(14px);
	transform: translateX(100%);
	opacity: 0;
	transition: transform .55s cubic-bezier(.22, .61, .36, 1), opacity .4s ease;
	overflow: hidden;
}

.cis-mx.is-panel .cis-mx-panel {
	transform: translateX(0);
	opacity: 1;
}

/* Место под панель резервируется сразу при старте зума, а не когда панель
   выезжает. Иначе кадр приближения считается по сцене во всю ширину, а потом
   панель забирает 400 px и карта ужимается под остаток: для больших стран
   итоговый масштаб выходил мельче обзорного. */
@media (min-width: 900px) {
	.cis-mx.is-zoomed .cis-mx-stage {
		padding-right: min(400px, 88vw);
	}
}

.cis-mx-panel-head {
	display: flex;
	align-items: center;
	gap: 14px;
	padding-bottom: 16px;
	border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.cis-mx-panel-flag {
	width: 52px;
	height: auto;
	border-radius: 5px;
	box-shadow: 0 3px 12px rgba(0, 0, 0, .35);
	flex: none;
}

.cis-mx-panel-title {
	margin: 0;
	font-size: 21px;
	font-weight: 600;
	line-height: 1.2;
	color: #fff;
}

.cis-mx-panel-close {
	margin-left: auto;
	align-self: center;
	flex: none;
	width: 32px;
	height: 32px;
	padding: 0;
	font-size: 17px;
	line-height: 1;
	color: rgba(226, 236, 250, .7);
	background: transparent;
	border: 1px solid rgba(255, 255, 255, .16);
	border-radius: 50%;
	cursor: pointer;
	transition: color .2s ease, border-color .2s ease;
}

.cis-mx-panel-close:hover {
	color: #fff;
	border-color: rgba(255, 255, 255, .38);
}

.cis-mx-panel-lead {
	margin: 16px 0 0;
	font-size: 13.5px;
	line-height: 1.62;
	color: rgba(214, 227, 246, .78);
}

.cis-mx-points {
	margin: 20px 0 0;
	padding: 0 4px 8px 0;
	list-style: none;
	overflow-y: auto;
	flex: 1 1 auto;
	min-height: 0;
	scrollbar-width: thin;
	scrollbar-color: rgba(255, 255, 255, .22) transparent;
}

.cis-mx-point-group {
	margin: 17px 2px 8px;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: rgba(183, 207, 241, .7);
}

.cis-mx-point-group:first-child {
	margin-top: 0;
}

.cis-mx-point {
	padding: 14px 15px 13px;
	margin-bottom: 10px;
	background: rgba(255, 255, 255, .04);
	border: 1px solid rgba(255, 255, 255, .08);
	border-radius: 12px;
	/* Ничего не двигаем и не масштабируем: карточка съезжала вбок и её рамка
	   вылезала за край панели. Хватает смены фона и цвета рамки. */
	transition: background .2s ease, border-color .2s ease;
}

.cis-mx-point.is-hot {
	background: rgba(61, 220, 132, .09);
	border-color: rgba(61, 220, 132, .45);
}

.cis-mx-point-title {
	margin: 0 0 5px;
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1.32;
	color: #fff;
}

.cis-mx-point-text {
	margin: 0 0 8px;
	font-size: 12.5px;
	line-height: 1.58;
	color: rgba(206, 221, 244, .7);
}

.cis-mx-point-addr {
	margin: 0 0 11px;
	font-size: 12px;
	color: rgba(160, 187, 226, .62);
}

.cis-mx-point-more {
	display: inline-block;
	padding: 6px 14px;
	font: inherit;
	font-size: 12.5px;
	color: #0a1f42;
	background: #ffc266;
	border: 0;
	border-radius: 999px;
	cursor: pointer;
	text-decoration: none;
	transition: background .2s ease, transform .2s ease;
}

.cis-mx-point-more:hover {
	background: #ffd48a;
	transform: translateY(-1px);
}

/* ==========================================================================
   Верстак: контрастные метки и тёмная информационная панель
   ========================================================================== */

/* Страны без реальных точек можно опознать по подсказке, но они не выглядят
   кликабельными и не забирают фокус с клавиатуры. */
.cis-mx .cis-map .region.is-disabled {
	cursor: default;
}

.cis-mx .cis-map .region.is-disabled:hover {
	stroke: rgba(255, 255, 255, .68);
	stroke-width: 1.2;
}

.cis-mx-hint.is-static .cis-mx-hint-cta {
	display: none;
}

/* Контраст даёт компактная обводка самой метки — без подписей-плашек на карте. */
.cis-mx-pin {
	filter: drop-shadow(0 3px 4px rgba(2, 10, 28, .55));
}

.cis-mx-pin-stem {
	stroke: var(--mx-pin-stem, #fff);
	stroke-width: 2.4;
}

.cis-mx-pin-dot,
.cis-mx-cluster-dot {
	fill: #ffb21c;
	stroke: #fff4d5;
	stroke-width: .65;
}

.cis-mx-pin-halo {
	fill: rgba(255, 178, 28, .28);
}

.cis-mx-cluster-count {
	font-size: 9px;
	font-weight: 900;
}

.cis-mx-pin.is-hot .cis-mx-pin-dot,
.cis-mx-cluster.is-hot .cis-mx-cluster-dot,
.cis-mx-cluster:focus-visible .cis-mx-cluster-dot {
	fill: #ffc266;
	stroke: #fff;
}

.cis-mx-pin.is-hot .cis-mx-pin-stem {
	stroke: #ffc266;
}

.cis-mx-pin.is-hot .cis-mx-pin-halo {
	fill: rgba(255, 178, 28, .42);
}

/* Список кластера продолжает визуальный язык карты, а не выглядит белым окном. */
.cis-mx-cluster-popover {
	width: min(292px, calc(100% - 20px));
	padding: 8px;
	color: #eaf2ff;
	background: rgba(5, 24, 55, .96);
	border: 1px solid rgba(137, 178, 231, .3);
	border-radius: 16px;
	box-shadow: 0 20px 55px rgba(1, 8, 25, .55), 0 2px 8px rgba(1, 8, 25, .4);
	backdrop-filter: blur(18px);
}

/* Заголовок в две строки: название места и под ним число организаций. В одну
   строку с числом справа длинное название («Москва и Подмосковье») ломалось,
   и число тоже переносилось. */
.cis-mx-cluster-heading {
	display: block;
	padding: 8px 10px 11px;
	color: #fff;
	border-bottom: 1px solid rgba(157, 190, 233, .18);
}

.cis-mx-cluster-heading strong {
	display: block;
	font: inherit;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.25;
}

.cis-mx-cluster-heading span {
	display: block;
	margin-top: 3px;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.3;
	color: rgba(198, 217, 242, .7);
}

.cis-mx-cluster-item {
	position: relative;
	padding: 9px 30px 9px 10px;
	font-size: 12.5px;
	color: rgba(225, 237, 255, .82);
	border-bottom: 1px solid rgba(157, 190, 233, .12);
}

.cis-mx-cluster-item:last-child {
	border-bottom: 0;
}

.cis-mx-cluster-item::after {
	content: "›";
	position: absolute;
	right: 10px;
	top: 7px;
	font-size: 18px;
	line-height: 1;
	color: #89a9cf;
}

.cis-mx-cluster-item:hover,
.cis-mx-cluster-item:focus-visible {
	color: #fff;
	background: rgba(88, 145, 211, .16);
}

/* Панель — продолжение тёмного полотна карты, отделённое тонкой границей. */
.cis-mx-workbench .cis-mx-panel {
	width: min(440px, 92vw);
	padding: 0;
	color: #e8f1ff;
	background: linear-gradient(180deg, #081f43 0%, #06172f 100%);
	border-left: 1px solid rgba(143, 182, 232, .2);
	box-shadow: -26px 0 70px rgba(1, 8, 25, .48);
	backdrop-filter: blur(18px);
}

.cis-mx-workbench .cis-mx-panel-head {
	flex: none;
	gap: 13px;
	padding: 18px 20px;
	background: rgba(4, 17, 39, .7);
	border-bottom: 1px solid rgba(143, 182, 232, .16);
}

.cis-mx-workbench .cis-mx-panel-flag {
	width: 48px;
	border: 1px solid rgba(255, 255, 255, .22);
	box-shadow: 0 4px 14px rgba(1, 8, 25, .3);
}

.cis-mx-panel-heading {
	min-width: 0;
}

.cis-mx-workbench .cis-mx-panel-title {
	font-size: 22px;
	color: #fff;
}

.cis-mx-workbench .cis-mx-panel-close {
	color: #b8cce7;
	background: rgba(255, 255, 255, .06);
	border-color: rgba(255, 255, 255, .14);
}

.cis-mx-workbench .cis-mx-panel-close:hover {
	color: #fff;
	background: rgba(255, 255, 255, .12);
	border-color: rgba(255, 255, 255, .28);
}

.cis-mx-panel-scroll {
	flex: 1 1 auto;
	min-height: 0;
	padding: 22px 22px 28px;
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	scrollbar-color: rgba(155, 187, 228, .38) transparent;
}

.cis-mx-country-card {
	color: #dce9fb;
}

.cis-mx-country-details {
	margin-bottom: 8px;
	background: rgba(255, 255, 255, .035);
	border: 1px solid rgba(139, 178, 225, .16);
	border-radius: 11px;
	overflow: hidden;
}

.cis-mx-country-details summary {
	position: relative;
	padding: 12px 34px 12px 13px;
	font-size: 12.5px;
	font-weight: 750;
	line-height: 1.35;
	color: #e8f2ff;
	cursor: pointer;
	list-style: none;
}

.cis-mx-country-details summary::-webkit-details-marker {
	display: none;
}

.cis-mx-country-details summary::after {
	content: "+";
	position: absolute;
	right: 13px;
	top: 9px;
	font-size: 18px;
	font-weight: 400;
	color: #8eb3de;
}

.cis-mx-country-details[open] summary::after {
	content: "−";
}

.cis-mx-country-details[open] summary {
	border-bottom: 1px solid rgba(139, 178, 225, .13);
}

.cis-mx-country-details > p {
	margin: 0;
	padding: 12px 13px 14px;
	font-size: 12px;
	line-height: 1.6;
	color: rgba(221, 235, 253, .76);
}

.cis-mx-country-item-icon {
	display: grid;
	place-items: center;
	width: 27px;
	height: 27px;
	color: #8fc5ff;
	background: rgba(79, 145, 216, .12);
	border: 1px solid rgba(119, 174, 232, .2);
	border-radius: 7px;
}

.cis-mx-country-item-icon svg {
	width: 16px;
	height: 16px;
}

.cis-mx-points-heading {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 26px 0 11px;
	padding-top: 19px;
	border-top: 1px solid rgba(139, 178, 225, .16);
}

.cis-mx-points-heading span {
	font-size: 17px;
	font-weight: 800;
	color: #fff;
}

.cis-mx-workbench .cis-mx-points {
	margin: 0;
	padding: 0;
	overflow: visible;
	flex: none;
}

.cis-mx-workbench .cis-mx-point-group {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	color: #82a6d0;
}

.cis-mx-workbench .cis-mx-point-group strong {
	font: inherit;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .04em;
}

.cis-mx-workbench .cis-mx-point-group span {
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	color: rgba(157, 187, 224, .58);
}

.cis-mx-workbench .cis-mx-point {
	padding: 15px;
	background: rgba(255, 255, 255, .035);
	border-color: rgba(139, 178, 225, .14);
	box-shadow: none;
	transition: none;
}

.cis-mx-workbench .cis-mx-point.is-hot {
	background: rgba(255, 178, 28, .07);
	border-color: rgba(255, 194, 102, .82);
	box-shadow: none;
}

.cis-mx-point-head {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 10px;
}

.cis-mx-point-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 70px;
	width: 70px;
	height: 46px;
	padding: 5px;
	border: 1px solid rgba(255, 255, 255, .1);
	border-radius: 8px;
	overflow: hidden;
}

.cis-mx-point-logo.is-light {
	background: #f5f7fa;
}

.cis-mx-point-logo.is-dark {
	background: rgba(2, 13, 32, .72);
}

.cis-mx-point-logo img {
	display: block;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

.cis-mx-point-logo.is-monogram {
	font-size: 11px;
	font-weight: 850;
	letter-spacing: .05em;
	color: #163b68;
}

.cis-mx-point-head .cis-mx-point-title {
	margin: 0;
}

.cis-mx-workbench .cis-mx-point-title {
	color: #fff;
}

.cis-mx-workbench .cis-mx-point-text {
	color: rgba(220, 234, 252, .72);
}

.cis-mx-workbench .cis-mx-point-addr {
	color: rgba(167, 194, 228, .66);
}

.cis-mx-workbench .cis-mx-point-more {
	font-weight: 750;
	color: #fff;
	background: #145da0;
	transition: background .2s ease;
}

.cis-mx-workbench .cis-mx-point-more:hover {
	color: #fff;
	background: #0c477f;
	transform: none;
}

/* Выбранный вариант №4: компактное тёмное кольцо с жёлтым контуром.
   Без чёрной обводки, пульсации и дополнительных декоративных слоёв. */
.cis-mx-marker-ring {
	fill: var(--mx-pin-fill, #08264f);
	stroke: var(--mx-pin-ring, #ffbf3f);
	stroke-width: 2;
	vector-effect: non-scaling-stroke;
}

.cis-mx-marker-core {
	fill: var(--mx-pin-core, #fff);
	stroke: none;
}

.cis-mx-marker-count {
	fill: var(--mx-pin-core, #fff);
	font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
	font-size: 8px;
	font-weight: 850;
	pointer-events: none;
}

.cis-mx-pin.is-hot .cis-mx-marker-ring,
.cis-mx-pin:focus-visible .cis-mx-marker-ring {
	fill: #123d70;
	stroke: #fff;
}

.cis-mx-pin:focus-visible {
	outline: none;
}

@media (min-width: 900px) {
	.cis-mx-workbench.is-zoomed .cis-mx-stage {
		padding-right: min(440px, 92vw);
	}
}

/* --- карточка страны: приоритеты, проекты; раздел кампусов --------------- */

/* «Узнать больше» — полоса у нижнего края панели, вне прокрутки. */
.cis-mx-panel-more,
.cis-mx-panel-more:visited {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 22px;
	font-size: 13.5px;
	font-weight: 750;
	color: #ffbf42;
	background: #04142c;
	border-top: 1px solid rgba(143, 182, 232, .2);
	text-decoration: none;
	transition: color .15s ease, background .15s ease;
}

.cis-mx-panel-more:hover,
.cis-mx-panel-more:focus-visible {
	color: #ffd36d !important;
	background: #071c3d;
	text-decoration: none;
	outline: none;
}

.cis-mx-panel-more svg {
	flex: none;
	transition: transform .15s ease;
}

.cis-mx-panel-more:hover svg {
	transform: translateX(3px);
}

/* Кнопка «наверх» поднимается над полосой. */
.cis-mx-panel.has-more .cis-mx-panel-top {
	bottom: 66px;
}

/* Первый блок карточки начинается сразу, без отбивки от несуществующего соседа сверху. */
.cis-mx-country-card > .cis-mx-card-block:first-child {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

.cis-mx-card-block {
	margin-top: 24px;
	padding-top: 20px;
	border-top: 1px solid rgba(139, 178, 225, .16);
}

.cis-mx-card-title {
	margin: 0;
	font-size: 15px;
	font-weight: 800;
	line-height: 1.32;
	color: #fff;
}

.cis-mx-card-source {
	margin: 8px 0 0;
	padding-left: 10px;
	font-size: 11px;
	line-height: 1.5;
	color: rgba(190, 212, 242, .68);
	border-left: 2px solid rgba(255, 191, 63, .7);
}

.cis-mx-priorities {
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
}

.cis-mx-priorities li {
	display: grid;
	grid-template-columns: 27px minmax(0, 1fr) auto;
	align-items: center;
	gap: 10px;
	padding: 9px 0;
	border-bottom: 1px solid rgba(139, 178, 225, .1);
}

.cis-mx-priorities li:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

.cis-mx-priority-text {
	font-size: 12.5px;
	line-height: 1.42;
	color: rgba(230, 240, 255, .9);
}

.cis-mx-priority-num {
	font-size: 11px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: rgba(143, 197, 255, .46);
}

.cis-mx-projects {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	margin-top: 12px;
}

.cis-mx-project {
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: 13px 13px 12px;
	color: inherit;
	background: rgba(255, 255, 255, .035);
	border: 1px solid rgba(139, 178, 225, .16);
	border-radius: 11px;
	text-decoration: none;
	transition: background .15s ease, border-color .15s ease;
}

.cis-mx-project:hover,
.cis-mx-project:focus-visible {
	background: rgba(184, 148, 255, .09);
	border-color: rgba(184, 148, 255, .6);
	text-decoration: none;
}

.cis-mx-project-head {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 4px;
}

/* Логотипы проектов рассчитаны на тёмный фон: у NICA своя белая плашка,
   у СКИФа — белый круг. */
.cis-mx-project-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 64px;
	width: 64px;
	height: 44px;
	padding: 5px;
	background: rgba(2, 13, 32, .72);
	border: 1px solid rgba(255, 255, 255, .1);
	border-radius: 8px;
}

.cis-mx-project-logo img {
	display: block;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

.cis-mx-project-name {
	font-size: 18px;
	font-weight: 800;
	line-height: 1.15;
	color: #fff;
}

.cis-mx-project-full {
	margin-top: 5px;
	font-size: 11px;
	line-height: 1.4;
	color: rgba(220, 234, 252, .72);
}

.cis-mx-project-place {
	display: flex;
	align-items: center;
	gap: 5px;
	margin-top: 10px;
	font-size: 11px;
	font-weight: 650;
	color: #c4a9ff;
}

.cis-mx-project-go {
	margin-top: auto;
	padding-top: 10px;
	font-size: 11px;
	font-weight: 750;
	color: #ffbf42;
}

.cis-mx-project-go::after {
	content: " →";
}

.cis-mx-campus-note {
	margin: 0 0 14px;
	font-size: 12px;
	line-height: 1.55;
	color: rgba(220, 234, 252, .78);
}

.cis-mx-campus-legend {
	display: inline-block;
	width: 9px;
	height: 9px;
	margin-right: 7px;
	background: var(--mx-campus, #2ff0cf);
	border: 2px solid var(--mx-campus-stroke, #06224a);
	box-shadow: 0 0 0 1px rgba(255, 255, 255, .5);
	border-radius: 50%;
}

.cis-mx-inline-link,
.cis-mx-inline-link:visited {
	font-weight: 700;
	color: #ffbf42;
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 191, 66, .42);
}

.cis-mx-inline-link:hover,
.cis-mx-inline-link:focus-visible {
	color: #ffd36d !important;
	border-color: #ffd36d;
	text-decoration: none;
}

.cis-mx-campus-cards {
	margin: 0;
	padding: 0;
	list-style: none;
}

.cis-mx-campus-card {
	margin-bottom: 10px;
	background: rgba(255, 255, 255, .035);
	border: 1px solid rgba(139, 178, 225, .14);
	border-radius: 12px;
	overflow: hidden;
	transition: background .2s ease, border-color .2s ease;
}

.cis-mx-campus-card.is-hot {
	background: rgba(53, 214, 189, .08);
	border-color: rgba(53, 214, 189, .8);
}

.cis-mx-campus-photo {
	position: relative;
	aspect-ratio: 2 / 1;
	background: #0a2247;
}

.cis-mx-campus-photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cis-mx-campus-city {
	position: absolute;
	left: 10px;
	bottom: 10px;
	padding: 4px 9px 5px;
	font-size: 11.5px;
	font-weight: 750;
	line-height: 1.2;
	color: #04302a;
	background: #5fe3cf;
	border-radius: 999px;
}

.cis-mx-campus-body {
	padding: 13px 15px 15px;
}

.cis-mx-campus-body .cis-mx-point-title {
	margin: 0 0 12px;
	font-size: 13.5px;
	line-height: 1.38;
}

.cis-mx-point-full {
	margin: -3px 0 9px;
	font-size: 11px;
	line-height: 1.45;
	color: rgba(190, 212, 242, .62);
}

/* --- кампусы и место проекта на карте ------------------------------------ */

.cis-mx-campus {
	pointer-events: auto;
	cursor: pointer;
}

/* Тёмный контур вместо белого: на светло-голубой стране общего плана бирюзовая
   точка с белой обводкой терялась. Тёмное кольцо читается и там, и на регионах. */
.cis-mx-campus {
	filter: drop-shadow(0 1px 2px rgba(2, 10, 28, .5));
}

.cis-mx-campus-dot {
	fill: var(--mx-campus, #2ff0cf);
	stroke: var(--mx-campus-stroke, #06224a);
	stroke-width: 2;
	vector-effect: non-scaling-stroke;
	transition: fill .15s ease;
}

/* Клик по метке мог оставить фокус на всём слое, и браузер обводил его рамкой. */
.cis-mx-pins:focus,
.cis-mx-pin:focus,
.cis-mx-campus:focus {
	outline: none;
}

/* Круг импульса вокруг точки. Событий мыши не ловит: точки лежат поверх меток
   организаций, и широкий невидимый круг перекрывал бы метку рядом. */
.cis-mx-campus-halo {
	fill: var(--mx-campus, #2ff0cf);
	opacity: 0;
	pointer-events: none;
	transform-box: fill-box;
	transform-origin: center;
}

.cis-mx-campus.is-pulse .cis-mx-campus-halo {
	animation: cis-mx-impulse 1.1s cubic-bezier(.15, .6, .4, 1) infinite;
}

.cis-mx-campus-dot {
	transform-box: fill-box;
	transform-origin: center;
	transition: transform .15s ease, fill .15s ease;
}

/* Увеличение — на любую подсветку, в том числе от курсора на самой точке.
   Расти под курсором можно, сжиматься нельзя: см. примечание у .cis-mx-pin.is-hot. */
.cis-mx-campus.is-hot .cis-mx-campus-dot {
	transform: scale(1.5);
}

/* --- импульс подсвеченной метки ------------------------------------------ */

/* Класс is-pulse движок ставит только при наведении на карточку в панели, не на
   саму метку. Наведение на карточку должно сразу показывать, где это на карте:
   смены цвета кольца не хватало, метку приходилось искать глазами. */
.cis-mx-marker-pulse {
	fill: var(--mx-pin-ring, #ffbf3f);
	opacity: 0;
	pointer-events: none;
	transform-box: fill-box;
	transform-origin: center;
}

.cis-mx-pin.is-pulse .cis-mx-marker-pulse {
	animation: cis-mx-impulse 1.1s cubic-bezier(.15, .6, .4, 1) infinite;
}

.cis-mx-marker-ring {
	transform-box: fill-box;
	transform-origin: center;
	transition: transform .15s ease;
}

.cis-mx-pin.is-hot .cis-mx-marker-ring,
.cis-mx-cluster:focus-visible .cis-mx-marker-ring {
	transform: scale(1.25);
}

/* Импульс расходится широко и гаснет только в самом конце, а под меткой всё
   время держится свечение: метка видна в любой момент, а не раз в секунду. */
@keyframes cis-mx-impulse {
	0% { transform: scale(1); opacity: .85; }
	100% { transform: scale(4.2); opacity: 0; }
}

.cis-mx-pin.is-pulse {
	filter: drop-shadow(0 0 7px var(--mx-pin-ring, #ffbf3f)) drop-shadow(0 0 2px var(--mx-pin-ring, #ffbf3f));
}

.cis-mx-campus.is-pulse {
	filter: drop-shadow(0 0 7px var(--mx-campus, #2ff0cf)) drop-shadow(0 0 2px var(--mx-campus, #2ff0cf));
}

@media (prefers-reduced-motion: reduce) {
	.cis-mx-campus.is-pulse .cis-mx-campus-halo,
	.cis-mx-pin.is-pulse .cis-mx-marker-pulse {
		animation: none;
		opacity: .4;
		transform: scale(2);
	}
}

.cis-mx-campus.is-hot .cis-mx-campus-dot {
	fill: #fff;
}

.cis-mx-cluster-heading.is-campus strong::before {
	content: "";
	display: inline-block;
	width: 9px;
	height: 9px;
	margin-right: 8px;
	background: var(--mx-campus, #2ff0cf);
	border: 2px solid var(--mx-campus-stroke, #06224a);
	box-shadow: 0 0 0 1px rgba(255, 255, 255, .45);
	border-radius: 50%;
}

.cis-mx-spot {
	pointer-events: none;
}

.cis-mx-spot-core {
	fill: #b894ff;
	stroke: #fff;
	stroke-width: 1.4;
	vector-effect: non-scaling-stroke;
}

.cis-mx-spot-ring {
	fill: rgba(184, 148, 255, .22);
	stroke: #b894ff;
	stroke-width: 1.5;
	vector-effect: non-scaling-stroke;
	transform-box: fill-box;
	transform-origin: center;
	animation: cis-mx-spot 1.3s ease-out infinite;
}

@keyframes cis-mx-spot {
	0% { transform: scale(.45); opacity: 1; }
	100% { transform: scale(1.5); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.cis-mx-spot-ring {
		animation: none;
	}
}

/* --- кнопка «наверх» в панели -------------------------------------------- */

.cis-mx-panel-top {
	position: absolute;
	z-index: 3;
	right: 18px;
	bottom: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin: 0;
	padding: 0;
	color: #fff;
	background: #145da0;
	border: 1px solid rgba(255, 255, 255, .22);
	border-radius: 50%;
	box-shadow: 0 8px 22px rgba(1, 8, 25, .5);
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity .2s ease, transform .2s ease, visibility .2s ease, background .15s ease;
}

.cis-mx-panel-top.is-on {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.cis-mx-panel-top:hover,
.cis-mx-panel-top:focus-visible {
	background: #1b72c2;
	outline: none;
}

/* --- действующая расцветка ---------------------------------------------- */

/* «Два тона». Те же значения движок подставляет из SCHEMES (map-explorer-new.js);
   здесь они продублированы, чтобы карта не мигала исходными цветами до запуска
   скрипта. Атрибут data-scheme ставит PHP-рендер блока. */
.cis-mx[data-scheme="duo"] {
	--mx-land-1: #2f6dcb;
	--mx-land-2: #4b8ce8;
	--mx-land-3: #2f6dcb;
	--mx-land-4: #4b8ce8;
	--mx-land-5: #2f6dcb;
	--mx-sub-stroke: rgba(255, 255, 255, .4);
	--mx-sub-stroke-w: .8;
	--mx-land-hover: #7fb0f7;
	--mx-country: #4b8ce8;
	--mx-country-other: #2c5fae;
	--mx-country-stroke: rgba(255, 255, 255, .5);
}

/* --- подсказка региона: что в нём находится ------------------------------ */

.cis-mx-hint-list {
	display: none;
}

.cis-mx-hint.has-list {
	align-items: flex-start;
	padding: 9px 13px 10px;
}

.cis-mx-hint.has-list .cis-mx-hint-list {
	display: block;
	margin-top: 4px;
}

.cis-mx-hint-group {
	display: block;
	margin: 9px 0 4px;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.3;
	color: rgba(198, 217, 242, .7);
}

.cis-mx-hint-item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 2px 0;
	font-size: 12.5px;
	line-height: 1.35;
	color: rgba(235, 243, 255, .92);
}

.cis-mx-hint-sep {
	margin: 0 -2px;
	font-size: 18px;
	font-weight: 900;
	line-height: 0;
	color: #8fc5ff;
}

.cis-mx-hint-item::before {
	content: "";
	flex: none;
	width: 8px;
	height: 8px;
	border-radius: 50%;
}

.cis-mx-hint-item.is-point::before {
	background: var(--mx-pin-fill, #08264f);
	border: 2px solid var(--mx-pin-ring, #ffbf3f);
}

.cis-mx-hint-item.is-campus::before {
	background: var(--mx-campus, #2ff0cf);
	border: 2px solid var(--mx-campus-stroke, #06224a);
	box-shadow: 0 0 0 1px rgba(255, 255, 255, .45);
}

/* --- где карты нет ------------------------------------------------------- */

/* Карта показывается только на настольной раскладке. Она рассчитана на курсор и
   на широкий экран, куда помещаются и она сама, и панель справа: наведение даёт
   подсказки, списки и подсветку, панель забирает 440 px ширины. Блока нет:
   - при ширине до 1240 px — там же шапка сайта переходит на «бургер»; на
     планшете в альбоме (1024–1194 px) край страны уходит под панель;
   - на портретных и почти квадратных экранах (уже 6:5) — страна в приближении
     остаётся маленьким пятном в высокой пустой сцене;
   - на сенсорных устройствах без курсора — наведения там нет вовсе.
   То же условие продублировано в движке (HIDE_QUERY в map-explorer-new.js): он
   при нём не стартует, не вешает обработчики и не тянет карты регионов. */
@media (max-width: 1240px), (max-aspect-ratio: 6/5), (hover: none) and (pointer: coarse) {
	.cis-mx {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cis-mx-pin-halo,
	.cis-mx-pin.is-hot .cis-mx-pin-halo {
		animation: none;
	}

	.cis-mx-panel,
	.cis-mx-point,
	.cis-mx-back {
		transition: none;
	}
}

/* Плашка в редакторе: сам блок рисует PHP, в админке показываем подпись. */
.cis-mx-editor-placeholder {
	padding: 22px;
	border: 1px dashed #b7c3d6;
	border-radius: 10px;
	background: #f6f8fb;
	color: #33415c;
	text-align: center;
}