/* ===== Череповецкий округ · карта туриста — прототип ===== */
:root{
	--bg:#0f1113;
	--surface:#ffffff;
	--ink:#16191c;
	--ink-2:#5b636b;
	--ink-3:#8b939b;
	--line:#e7eaed;
	--line-2:#eef1f3;
	--accent:#FFC83D;          /* фирменный жёлтый */
	--accent-ink:#1d1a0e;
	--radius:16px;
	--radius-sm:11px;
	--shadow:0 10px 40px rgba(16,22,28,.16);
	--shadow-sm:0 4px 18px rgba(16,22,28,.10);
	--topbar-h:64px;
	--panel-w:332px;
	--ff:'Inter','Segoe UI',system-ui,-apple-system,Arial,sans-serif;
}

*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
	font-family:var(--ff);color:var(--ink);background:var(--bg);
	-webkit-font-smoothing:antialiased;overflow:hidden;
}
button{font-family:inherit;cursor:pointer}
a{color:inherit;text-decoration:none}
svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
img{display:block}

.app{height:100dvh;display:flex;flex-direction:column;background:var(--bg)}

/* ===== ТОПБАР ===== */
.topbar{
	height:var(--topbar-h);flex:0 0 auto;display:flex;align-items:center;gap:14px;
	padding:0 16px;background:#13161a;color:#fff;z-index:40;position:relative;
	border-bottom:1px solid rgba(255,255,255,.06);
}
.topbar__menu{display:none;width:42px;height:42px;border:0;border-radius:11px;background:rgba(255,255,255,.08);color:#fff;align-items:center;justify-content:center;flex:0 0 auto}
.topbar__menu svg{width:22px;height:22px}
/* ширина бренда = ширина левой панели (минус паддинг шапки 16 и gap 14), чтобы поиск начинался ровно на границе панели */
.topbar__brand{display:flex;align-items:center;gap:11px;flex:0 0 calc(var(--panel-w) - 30px)}
.topbar__logo{height:42px;width:auto;display:block}
.topbar__titles{display:flex;flex-direction:column;line-height:1.1}
.topbar__titles b{font-size:15px;font-weight:600;letter-spacing:.2px}
.topbar__titles i{font-size:12px;font-style:normal;color:var(--ink-3)}

.topbar__search{position:relative;flex:1 1 auto;max-width:460px;margin:0}
.topbar__search-ico{position:absolute;left:18px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:var(--ink-3)}
.topbar__search input{
	width:100%;height:44px;border:0;border-radius:12px;background:rgba(255,255,255,.08);
	color:#fff;padding:0 48px;font-size:14px;outline:none;transition:background .15s;
}
.topbar__search input::placeholder{color:#9aa2ab}
.topbar__search input:focus{background:rgba(255,255,255,.14)}
.topbar__search-clear{position:absolute;right:10px;top:50%;transform:translateY(-50%);width:30px;height:30px;border:0;border-radius:50%;background:transparent;color:#9aa2ab;display:none;align-items:center;justify-content:center}
.topbar__search-clear:hover{background:rgba(255,255,255,.1);color:#fff}
.topbar__search-clear svg{width:16px;height:16px}
.topbar.searching .topbar__search-clear{display:flex}

.search-results{
	position:absolute;top:50px;left:0;right:0;background:#fff;color:var(--ink);
	border-radius:12px;box-shadow:var(--shadow);max-height:min(420px,60vh);overflow:auto;
	display:none;padding:6px;z-index:60;
}
.search-results.open{display:block}
.search-results__item{display:flex;gap:10px;align-items:center;padding:9px 10px;border-radius:9px;cursor:pointer}
.search-results__item:hover{background:var(--line-2)}
.search-results__dot{width:10px;height:10px;border-radius:50%;flex:0 0 auto}
.search-results__name{font-size:13.5px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.search-results__cat{font-size:11px;color:var(--ink-3);margin-left:auto;flex:0 0 auto}
.search-results__empty{padding:14px;color:var(--ink-3);font-size:13px;text-align:center}

.topbar__actions{display:flex;align-items:center;gap:8px;flex:0 0 auto;margin-left:auto}
.iconbtn{position:relative;height:42px;min-width:42px;border:0;border-radius:12px;background:rgba(255,255,255,.08);color:#fff;display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:0 12px;font-size:13.5px}
.iconbtn svg{width:20px;height:20px}
.iconbtn--text{background:var(--accent);color:var(--accent-ink);font-weight:600}
.iconbtn__badge{position:absolute;top:-5px;right:-5px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--accent);color:var(--accent-ink);font-size:11px;font-weight:700;display:none;align-items:center;justify-content:center;line-height:1}
.iconbtn.has-fav .iconbtn__badge{display:flex}
.iconbtn.active{background:var(--accent);color:var(--accent-ink)}

/* ===== ТЕЛО ===== */
.body{flex:1 1 auto;display:flex;min-height:0;position:relative}

/* ===== ПАНЕЛЬ ===== */
.panel{
	width:var(--panel-w);flex:0 0 var(--panel-w);background:var(--surface);
	display:flex;flex-direction:column;border-right:1px solid var(--line);z-index:30;
}
.panel__scroll{flex:1 1 auto;overflow:auto;padding:18px 16px 10px}
.panel__section{margin-bottom:22px}
.panel__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.panel__head span{font-size:12px;font-weight:700;letter-spacing:.7px;text-transform:uppercase;color:var(--ink-3)}
.panel__toggleall{border:0;background:transparent;color:var(--ink-2);font-size:12px;font-weight:600;padding:2px 4px}
.panel__toggleall:hover{color:var(--ink)}

.layers{display:flex;flex-direction:column;gap:4px}
.layer{display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:11px;cursor:pointer;user-select:none}
.layer:hover{background:var(--line-2)}
.layer input{display:none}
.layer__sw{width:38px;height:22px;border-radius:11px;background:#d4d9dd;position:relative;flex:0 0 auto;transition:background .18s}
.layer__sw::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .18s}
.layer input:checked + .layer__sw{background:var(--accent)}
.layer input:checked + .layer__sw::after{transform:translateX(16px)}
.layer__name{font-size:14px;font-weight:500}
.layer b{margin-left:auto;font-size:12px;font-weight:600;color:var(--ink-3);background:var(--line-2);padding:2px 8px;border-radius:8px}

/* строка «Только избранное» */
.layer--fav{border:1px solid var(--line)}
.layer--fav.is-active{background:#fff7e0;border-color:var(--accent)}
.layer--fav.is-active .layer__name{font-weight:600}
.layer--fav.is-active b{background:var(--accent);color:var(--accent-ink)}
/* заблокированные слои в режиме избранного */
.layer.is-locked{opacity:.4;pointer-events:none;filter:grayscale(.3)}

.cats{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:3px}
.cat{display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:11px;cursor:pointer;user-select:none;border:1px solid transparent;transition:background .12s}
.cat:hover{background:var(--line-2)}
.cat__ico{width:26px;height:26px;border-radius:8px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;background:var(--catcolor)}
.cat__ico svg,.cat__ico img{width:15px;height:15px;display:block}
.cat__ico-mask{width:15px;height:15px;background:#fff;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center}
.cat__name{font-size:13.5px;font-weight:500}
.cat__cnt{margin-left:auto;font-size:12px;color:var(--ink-3)}
.cat__check{width:18px;height:18px;border-radius:6px;border:2px solid var(--line);flex:0 0 auto;display:flex;align-items:center;justify-content:center;color:#fff}
.cat__check svg{width:12px;height:12px;stroke-width:3;opacity:0}
.cat.is-on{background:#fff}
.cat.is-on .cat__check{background:var(--catcolor);border-color:var(--catcolor)}
.cat.is-on .cat__check svg{opacity:1}
.cat.is-off{opacity:.5}
.cat.is-off .cat__ico{filter:grayscale(1)}

.panel__foot{flex:0 0 auto;padding:12px 16px;border-top:1px solid var(--line)}
.viewswitch{position:relative;display:flex;width:100%;background:var(--line-2);border:0;border-radius:12px;padding:4px;gap:4px}
.viewswitch__thumb{position:absolute;top:4px;left:4px;width:calc(50% - 6px);height:38px;background:#fff;border-radius:9px;box-shadow:var(--shadow-sm);z-index:0;transition:transform .34s cubic-bezier(.4,0,.2,1)}
.viewswitch.is-list .viewswitch__thumb{transform:translateX(calc(100% + 4px))}
.viewswitch__opt{position:relative;z-index:1;flex:1;display:inline-flex;align-items:center;justify-content:center;gap:7px;height:38px;border-radius:9px;font-size:13.5px;font-weight:600;color:var(--ink-2);background:transparent;transition:color .25s}
.viewswitch__opt svg{width:17px;height:17px}
.viewswitch__opt.is-active{color:var(--ink)}

.panel-backdrop{display:none;position:absolute;inset:0;background:rgba(8,11,14,.45);z-index:25;opacity:0;transition:opacity .2s}

/* ===== СЦЕНА / КАРТА ===== */
.stage{flex:1 1 auto;position:relative;min-width:0;background:#e9edf0}
.map{position:absolute;inset:0}
.map [class*="ground-pane"]{filter:saturate(.92)}

/* плашка режима избранного */
.fav-banner{position:absolute;top:16px;left:50%;transform:translate(-50%,-18px);z-index:17;
	display:none;align-items:center;gap:11px;height:46px;padding:0 8px 0 16px;
	background:#13161a;color:#fff;border-radius:23px;box-shadow:var(--shadow);
	font-size:14px;font-weight:600;white-space:nowrap;opacity:0;transition:opacity .2s,transform .2s}
.fav-banner.show{display:flex;opacity:1;transform:translate(-50%,0)}
.fav-banner__ico{width:19px;height:19px;fill:#ff4d5e;stroke:#ff4d5e;flex:0 0 auto}
.search-banner .fav-banner__ico{fill:none;stroke:var(--accent)}
.fav-banner__txt{display:inline-flex;align-items:center;gap:8px}
.fav-banner__cnt{min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--accent);color:var(--accent-ink);font-size:12px;font-weight:700;display:inline-flex;align-items:center;justify-content:center}
.fav-banner__exit{height:32px;padding:0 14px;border:0;border-radius:18px;background:rgba(255,255,255,.14);color:#fff;font-size:13px;font-weight:600}
.fav-banner__exit:hover{background:rgba(255,255,255,.24)}

/* floating controls */
.mapctl{position:absolute;z-index:15;display:flex;flex-direction:column;gap:1px;background:#fff;border-radius:13px;box-shadow:var(--shadow-sm);overflow:hidden}
.mapctl button{width:44px;height:44px;border:0;background:#fff;color:var(--ink);display:flex;align-items:center;justify-content:center}
.mapctl button:hover{background:var(--line-2)}
.mapctl button svg{width:20px;height:20px}
.mapctl button + button{border-top:1px solid var(--line)}
.mapctl--zoom{right:16px;bottom:104px}
.mapctl--tools{right:16px;bottom:16px}

.mobile-filters{display:none;position:absolute;left:50%;bottom:18px;transform:translateX(-50%);z-index:16;height:46px;padding:0 20px;border:0;border-radius:23px;background:#13161a;color:#fff;font-size:14px;font-weight:600;align-items:center;gap:9px;box-shadow:var(--shadow)}
.mobile-filters svg{width:18px;height:18px}
.mobile-filters span{background:var(--accent);color:var(--accent-ink);border-radius:8px;font-size:12px;font-weight:700;padding:1px 7px;min-width:18px}
.mobile-filters span:empty{display:none}

/* ===== КАРТОЧКА ОБЪЕКТА ===== */
.card{
	position:absolute;top:16px;right:16px;width:380px;max-height:calc(100% - 32px);
	background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);z-index:20;
	display:flex;flex-direction:column;overflow:hidden;
	transform:translateX(calc(100% + 24px));opacity:0;pointer-events:none;
	transition:transform .32s cubic-bezier(.22,.61,.36,1),opacity .25s;
}
.card.open{transform:none;opacity:1;pointer-events:auto}
.card__grab{display:none}
.card__close{position:absolute;top:12px;right:12px;z-index:5;width:34px;height:34px;border:0;border-radius:50%;background:rgba(15,18,20,.55);backdrop-filter:blur(6px);color:#fff;display:flex;align-items:center;justify-content:center}
.card__close svg{width:17px;height:17px}
.card__media{position:relative;background:#11151a;flex:0 0 auto}
.card__swiper{height:226px}
.card__media.is-empty{height:96px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#1b2026,#2a3138)}
.card__media.is-empty::after{content:"Череповецкий округ";color:#5b636b;font-size:13px}
.card__swiper .swiper-slide{overflow:hidden}
.card__swiper img{width:100%;height:100%;object-fit:cover}
.card__nav{position:absolute;top:50%;transform:translateY(-50%);z-index:4;width:34px;height:34px;border:0;border-radius:50%;background:rgba(255,255,255,.9);color:#16191c;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(0,0,0,.2)}
.card__nav svg{width:18px;height:18px}
.card__nav--prev{left:10px}
.card__nav--next{right:10px}
.card__swiper .swiper-pagination-bullet{background:#fff;opacity:.55}
.card__swiper .swiper-pagination-bullet-active{opacity:1;background:var(--accent)}

.card__body{padding:18px 18px 20px;overflow:auto}
.card__tag{display:inline-flex;align-items:center;font-size:11.5px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;color:#fff;padding:4px 10px;border-radius:8px;background:var(--ink-2)}
.card__title{font-size:20px;line-height:1.25;font-weight:700;margin:12px 0 8px}
.card__text{font-size:14px;line-height:1.6;color:var(--ink-2)}
.card__text a{color:var(--ink);text-decoration:underline;text-underline-offset:2px}
.card__route-list{list-style:none;margin:6px 0 0;padding:0;counter-reset:rp}
.card__route-list li{position:relative;padding:8px 0 8px 34px;border-bottom:1px solid var(--line-2);font-size:14px}
.card__route-list li::before{counter-increment:rp;content:counter(rp);position:absolute;left:0;top:6px;width:24px;height:24px;border-radius:50%;background:var(--catcolor,#E2656D);color:#fff;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center}
.card__meta{display:flex;flex-direction:column;gap:8px;margin:4px 0 14px}
.card__meta-row{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--ink-2)}
.card__meta-row svg{width:17px;height:17px;color:var(--ink-3);flex:0 0 auto}
.card__actions{display:flex;gap:10px;margin-top:18px}
.btn{height:46px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:14px;font-weight:600;border:0;padding:0 18px}
.btn svg{width:18px;height:18px}
.btn--primary{flex:1;background:var(--accent);color:var(--accent-ink)}
.btn--primary:hover{filter:brightness(.96)}
.btn--ghost{background:var(--line-2);color:var(--ink)}
.btn--ghost.added{background:#ffe2e4;color:#d23541}
.btn--ghost.added .ico-heart{fill:#d23541;stroke:#d23541}

/* ===== СПИСОК ===== */
.listview{position:absolute;inset:0;background:#f4f6f8;z-index:18;overflow:auto;
	opacity:0;visibility:hidden;transform:translateY(10px);
	transition:opacity .3s ease,transform .34s cubic-bezier(.22,.61,.36,1),visibility 0s linear .34s}
.listview.open{opacity:1;visibility:visible;transform:none;
	transition:opacity .3s ease,transform .34s cubic-bezier(.22,.61,.36,1),visibility 0s}
.listview.open .lcard{animation:lcardIn .4s ease both}
/* поочерёдная задержка задаётся inline из JS (renderList), потолок 16 карточек */
@keyframes lcardIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.listview__head{padding:22px 26px 6px;position:sticky;top:0}
.listview__head h2{font-size:19px;margin:0}
.listview__head span{color:var(--ink-3);font-weight:500}
.listview__grid{padding:14px 22px 32px;display:grid;grid-template-columns:repeat(auto-fill,minmax(248px,1fr));gap:16px}
.lcard{background:#fff;border-radius:14px;overflow:hidden;box-shadow:var(--shadow-sm);cursor:pointer;display:flex;flex-direction:column;transition:transform .15s,box-shadow .15s}
.lcard:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.lcard__img{height:148px;background:#e3e8ec;position:relative;overflow:hidden}
.lcard__img img{width:100%;height:100%;object-fit:cover}
.lcard__img.is-empty{display:flex;align-items:center;justify-content:center}
.lcard__img.is-empty::after{content:"";width:42px;height:42px;border-radius:11px;background:var(--catcolor,#ccc);opacity:.25}
.lcard__tag{position:absolute;left:10px;top:10px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;color:#fff;background:var(--catcolor,#333);padding:4px 9px;border-radius:7px}
.lcard__fav{position:absolute;right:10px;top:10px;width:32px;height:32px;border:0;border-radius:50%;background:rgba(15,18,20,.5);color:#fff;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(4px)}
.lcard__fav svg{width:16px;height:16px;fill:none}
.lcard__fav.added svg{fill:#ff4d5e;stroke:#ff4d5e}
.lcard__body{padding:13px 14px 16px;display:flex;flex-direction:column;flex:1}
.lcard__title{font-size:14.5px;font-weight:600;line-height:1.3;margin:0 0 6px}
.lcard__text{font-size:12.5px;line-height:1.5;color:var(--ink-3);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}

/* ===== Яндекс-балун/хинт — нейтрализация дефолта ===== */
.ymaps-2-1-79-balloon,.ymaps-2-1-79-hint{font-family:var(--ff)!important}

/* кнопка-лупа поиска (только мобайл) */
.topbar__searchbtn{display:none}

/* событие-маркер: золотая метка */
.evmark{transform:translate(-50%,-100%)}

/* ===== АДАПТИВ ===== */
@media (max-width:1024px){
	:root{--panel-w:300px}
}
@media (max-width:860px){
	.topbar__menu{display:flex}
	.topbar__searchbtn{display:inline-flex}
	.topbar__actions{margin-left:auto}
	/* логотип по центру шапки (между меню слева и действиями справа) */
	.topbar__brand{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
	/* поиск свёрнут в лупу; по тапу выезжает панель под шапкой */
	.topbar__search{
		position:absolute;top:100%;left:0;right:0;margin:0;max-width:none;
		padding:10px 12px;background:#13161a;box-shadow:0 14px 28px rgba(8,11,14,.4);
		opacity:0;visibility:hidden;transform:translateY(-10px);
		transition:opacity .22s ease,transform .26s cubic-bezier(.22,.61,.36,1),visibility 0s linear .26s;
		z-index:45;
	}
	.topbar.search-open .topbar__search{
		opacity:1;visibility:visible;transform:none;
		transition:opacity .22s ease,transform .26s cubic-bezier(.22,.61,.36,1),visibility 0s;
	}
	.topbar.search-open .topbar__searchbtn{background:var(--accent);color:var(--accent-ink)}
	.topbar__search .search-results{top:58px;left:12px;right:12px;max-height:min(54vh,360px)}
	/* иконки внутри поля симметрично (учитываем боковые отступы панели 12px) */
	.topbar__search .topbar__search-ico{left:28px}
	.topbar__search .topbar__search-clear{right:21px}
	.topbar__titles{display:none}
	.panel{position:absolute;left:0;top:0;bottom:0;transform:translateX(-100%);transition:transform .26s cubic-bezier(.22,.61,.36,1);box-shadow:var(--shadow)}
	.app.panel-open .panel{transform:none}
	.app.panel-open .panel-backdrop{display:block;opacity:1}
	.mobile-filters{display:flex}
	.mapctl--zoom{display:none}
	.card{
		top:auto;left:0;right:0;bottom:0;width:100%;max-height:82dvh;border-radius:20px 20px 0 0;
		transform:translateY(calc(100% + 24px));
	}
	.card.open{transform:none}
	.card__grab{display:block;width:42px;height:5px;border-radius:3px;background:#d4d9dd;margin:9px auto 2px;flex:0 0 auto}
	.card__close{top:10px}
	.listview__grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;padding:12px}
}
@media (max-width:560px){
	.topbar{padding:10px 12px;gap:10px}
	.iconbtn--text{display:none}
	.listview__head{padding:16px 14px 4px}
}